/* ==========================================================================
   KopiKelilingSaaS — Style utama (dipakai semua halaman)
   Tema, komponen landing page, dan komponen umum.
   ========================================================================== */

:root {
  --kk-brown: #5a3f33;
  --kk-brown-dark: #382a1f;
  --kk-cream: #f6eee3;
  --kk-accent: #c0392b;
}

body {
  font-family: "Lato", "Segoe UI", system-ui, -apple-system, sans-serif;
  color: #2e2620;
}

h1, h2, h3, h4, h5, h6,
.display-1, .display-2, .display-3, .display-4, .display-5, .display-6 {
  font-family: "Playfair Display", Georgia, serif;
}

.judul {
	font-family: "Playfair Display", Georgia, serif;
}

/* ---------- Utilitas tema ---------- */
.bg-cream { background-color: var(--kk-cream); }
.bg-kopi { background-color: var(--kk-brown); }
.bg-kopi-dark { background-color: var(--kk-brown-dark); }
.bg-nav-dark { background-color: #000; }
.text-kopi { color: var(--kk-brown); }
.text-accent { color: var(--kk-accent); }

/* ---------- Tombol ---------- */
.btn-kopi {
  background-color: var(--kk-brown);
  border-color: var(--kk-brown);
  color: #fff;
}
.btn-kopi:hover {
  background-color: var(--kk-brown-dark);
  border-color: var(--kk-brown-dark);
  color: #fff;
}
.btn-outline-kopi {
  border-color: var(--kk-brown);
  color: var(--kk-brown);
}
.btn-outline-kopi:hover {
  background-color: var(--kk-brown);
  color: #fff;
}
.navbar-brand img { filter: drop-shadow(0 2px 4px rgba(0,0,0,.2)); }

/* ---------- Form umum ---------- */
.form-check-input:checked {
  background-color: var(--kk-brown);
  border-color: var(--kk-brown);
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  overflow: hidden;
  color: #fff;
  background: linear-gradient(rgba(36,26,19,.86), rgba(56,42,31,.8)),
    url("../img/hero-kopi2.jpg") center/cover no-repeat;
  background-attachment: fixed;
}
.hero h1,
.hero .lead,
.hero .text-kopi,
.hero small.text-muted {
  color: #fff !important;
}
.hero h1 { text-shadow: 0 2px 14px rgba(0,0,0,.45); }
.hero .lead { opacity: .9; }
.hero .btn-outline-kopi { border-color: #fff; color: #fff; }
.hero .btn-outline-kopi:hover { background-color: #fff; color: var(--kk-brown-dark); }

.hero-float-bean {
  position: absolute;
  pointer-events: none;
  opacity: .45;
  animation: floatBean 6s ease-in-out infinite;
  z-index: 0;
}
.hero-float-bean g { fill: #f5ece0; }
.hero-float-bean path[stroke] { stroke: #6f4e37; }
.hero-float-bean.b1 { top: 8%; left: 4%; width: 56px; animation-delay: 0s; }
.hero-float-bean.b2 { top: 12%; right: 8%; width: 72px; animation-delay: 1.5s; }
.hero-float-bean.b3 { bottom: 14%; left: 12%; width: 64px; animation-delay: 3s; }
.hero-float-bean.b4 { bottom: 10%; right: 20%; width: 48px; animation-delay: 2.2s; }
.hero-float-bean.b5 { top: 45%; left: 30%; width: 40px; animation-delay: 4s; opacity: .2; }
@keyframes floatBean {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-14px) rotate(12deg); }
}
.hero .container { position: relative; z-index: 1; }

/* ---------- Mockup HP ---------- */
.phone-mock {
  background: #fff;
  border: 2px solid #fafafa;
  border-radius: 4px;
  box-shadow: 0 1.4rem 1.4rem rgba(244,244,244,.25);
  max-width: 260px;
}
.phone-mock img {
  border-radius: 1rem;
  object-fit: cover;
}

/* ---------- Kartu fitur ---------- */
.feature-card {
  border: 1px solid #e3d5c4;
  border-radius: 1rem;
  transition: transform .2s ease, box-shadow .2s ease;
}
.feature-card:hover { transform: translateY(-4px); box-shadow: 0 .5rem 1.5rem rgba(38,28,20,.14); }
.icon-circle {
  width: 56px; height: 56px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--kk-brown); color: #fff; font-size: 1.5rem;
}

/* ---------- Kartu harga ---------- */
.price-card {
  border-radius: 1rem;
  transition: transform .2s ease;
}
.price-card:hover { transform: translateY(-4px); }
.price-card.highlight { background-color: var(--kk-brown); color: #fff; border-color: var(--kk-brown); }

/* ---------- Nomor langkah ---------- */
.step-number {
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--kk-accent); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 1.25rem;
}

/* ---------- Testimoni ---------- */
.testimonial-card { border: 1px solid #e3d5c4; border-radius: 1rem; }

/* ---------- FAQ ---------- */
.faq-accordion .accordion-button:not(.collapsed) {
  background-color: #efe2d0; color: var(--kk-brown-dark);
}

/* ---------- CTA band ---------- */
.cta-band {
  background: linear-gradient(120deg, var(--kk-brown-dark) 0%, var(--kk-brown) 100%);
  border-radius: 1.5rem;
}

/* ---------- Footer ---------- */
.footer { background-color: #2b1f16; color: #cbb39a; }
.footer a { color: #cbb39a; text-decoration: none; }
.footer a:hover { color: #fff; }