/* ==========================================================================
   Haraso Coffee — brand overrides for the Small Apps template
   Brand color: #7957F3 (ungu Haraso)
   ========================================================================== */

:root {
  --haraso: #7957F3;
  --haraso-dark: #5a3fd6;
  --haraso-darker: #3a248f;
  --haraso-soft: #f3f0ff;
}

/* ---- Warna aksen: ganti biru template (#2e7eed) jadi ungu Haraso ---- */
a:hover,
.text-primary,
.btn-white,
.service .service-item i,
.feature-content h2 a,
.section-title h2::after,
.video-promo .content-block h2::after { color: var(--haraso) !important; }

.bg-blue { background: var(--haraso) !important; }
.bg-gray { background: #faf9ff; }

/* Nav item aktif (scrollspy) */
.main-nav .navbar-nav .nav-item.active .nav-link { color: var(--haraso); }
.main-nav .navbar-nav .nav-item.active .nav-link:before { background: var(--haraso); }
.main-nav .navbar-nav .nav-link:hover { color: var(--haraso); }

.btn-main,
.btn-main-md,
.btn-main-sm { background: var(--haraso); transition: all .25s ease; }
.btn-main:hover,
.btn-main-md:hover,
.btn-main-sm:hover { background: var(--haraso-dark); box-shadow: 0 12px 24px rgba(121, 87, 243, .3); }

.btn-white { background: #fff; }
.btn-white:hover { color: var(--haraso-dark) !important; }

/* Hero gradient */
.gradient-banner::before {
  background-image: linear-gradient(45deg, #9b7bff 0%, #7957F3 35%, #3a248f 75%);
}

/* Titik & border slider */
.testimonial .testimonial-slider .owl-dots .owl-dot.active span,
.slick-dots li.active button:before { background: var(--haraso); }
.slick-dots li button:before { color: var(--haraso); }

/* Kartu fitur di bawah hero */
.pull-top .rounded.shadow { box-shadow: 0 30px 60px rgba(58, 36, 143, .12) !important; }

/* Navbar brand */
.navbar-brand { display: flex; align-items: center; gap: 10px; font-weight: 800; }
.navbar-brand img { width: 40px; height: 40px; border-radius: 10px; }
.navbar-brand .brand-text { color: #1c1340; font-size: 20px; letter-spacing: -.02em; }
.main-nav.sticky .navbar-brand .brand-text { color: #1c1340; }

/* Section helpers */
.section-title h2 { font-weight: 700; color: #1c1340; }
.feature-content h2 { font-weight: 700; color: #1c1340; }
.bg-soft { background: var(--haraso-soft); }

/* Statistik ringkas */
.stat-row { margin-top: 60px; }
.stat-row .stat h3 { font-size: 42px; font-weight: 800; color: #fff; margin-bottom: 4px; }
.stat-row .stat p { color: rgba(255, 255, 255, .8); font-size: 15px; }

/* Daftar fitur bullet */
.check-list { list-style: none; padding: 0; margin: 25px 0 0; }
.check-list li {
  position: relative; padding-left: 34px; margin-bottom: 14px;
  color: #5a5470; font-size: 16px; line-height: 26px;
}
.check-list li::before {
  content: '\e64c'; /* themify check */
  font-family: 'themify'; position: absolute; left: 0; top: 2px;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--haraso-soft); color: var(--haraso);
  font-size: 11px; display: flex; align-items: center; justify-content: center;
}

/* Kartu fitur grid */
.feature-card {
  background: #fff; border-radius: 16px; padding: 36px 30px; height: 100%;
  border: 1px solid #efeafe; transition: transform .25s ease, box-shadow .25s ease;
}
.feature-card:hover { transform: translateY(-6px); box-shadow: 0 24px 48px rgba(58, 36, 143, .12); }
.feature-card i {
  font-size: 26px; color: var(--haraso);
  width: 60px; height: 60px; border-radius: 14px;
  background: var(--haraso-soft);
  display: flex; align-items: center; justify-content: center; margin-bottom: 22px;
}
.feature-card h3 { font-size: 18px; font-weight: 700; color: #1c1340; margin-bottom: 10px; }
.feature-card p { font-size: 14.5px; line-height: 24px; }

/* Langkah / cara pakai */
.step { text-align: center; padding: 0 15px; }
.step .num {
  width: 64px; height: 64px; margin: 0 auto 20px; border-radius: 50%;
  background: var(--haraso); color: #fff; font-size: 24px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 12px 24px rgba(121, 87, 243, .3);
}
.step h3 { font-size: 18px; font-weight: 700; color: #1c1340; margin-bottom: 8px; }

/* CTA download tombol */
.download-btns .btn-rounded-icon { border-color: rgba(255,255,255,.6); }
.download-btns .btn-rounded-icon:hover { background: #fff; color: var(--haraso-dark); }

/* Footer */
footer .footer-main { background: #1c1340; }
footer .footer-main h6 { color: #fff; }
footer .footer-main .block-2 ul li a:hover { color: #b9a6ff; }
footer .footer-main .block ul.social-icon li a:hover { background: var(--haraso); border-color: var(--haraso); }

/* FAQ */
.faq-item { border: 1px solid #efeafe; border-radius: 14px; padding: 24px 26px; margin-bottom: 16px; background: #fff; }
.faq-item h3 { font-size: 17px; font-weight: 700; color: #1c1340; margin-bottom: 8px; }
.faq-item p { font-size: 15px; }

/* Mockup hero (screenshot layar, tanpa bezel) */
.hero-mockup {
  max-width: 300px; width: 100%;
  border-radius: 30px;
  border: 1px solid rgba(255, 255, 255, .25);
  box-shadow: 0 40px 70px rgba(0, 0, 0, .35), 0 0 0 8px rgba(255, 255, 255, .06);
}

/* Screenshot dengan frame HP (PNG transparan) di baris highlight */
.device { max-width: 320px; width: 100%; filter: drop-shadow(0 26px 44px rgba(58, 36, 143, .28)); }

/* Galeri tampilan aplikasi */
.screens-section { background: linear-gradient(180deg, #ffffff 0%, #f6f3ff 100%); }
.screen-card { margin: 0; text-align: center; }
.screen-card img {
  width: 100%; max-width: 230px;
  filter: drop-shadow(0 18px 30px rgba(58, 36, 143, .22));
  transition: transform .25s ease;
}
.screen-card:hover img { transform: translateY(-8px); }
.screen-card figcaption {
  margin-top: 14px; font-size: 13.5px; font-weight: 600;
  color: #1c1340; letter-spacing: .01em;
}

@media (max-width: 767px) {
  .stat-row .stat { margin-bottom: 30px; }
  .stat-row .stat h3 { font-size: 34px; }
}

/* ==========================================================================
   Interaktivitas: navbar sticky, progress bar, parallax
   ========================================================================== */

html { scroll-behavior: smooth; scroll-padding-top: 90px; }
/* Halaman non-beranda: beri ruang untuk navbar fixed. Beranda: navbar melayang di atas banner. */
body:not(.home) { padding-top: 70px; }

/* Navbar menempel di atas + berubah saat digulir */
.main-nav {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 1030;
  background: #fff;
  transition: background-color .35s ease, box-shadow .35s ease;
}
.main-nav .navbar-brand img { transition: width .35s ease, height .35s ease; }
.main-nav .navbar-brand .brand-text,
.main-nav .navbar-nav .nav-link,
.main-nav .navbar-toggler .ti-menu,
.main-nav .nav-cta { transition: color .35s ease, background-color .35s ease, font-size .35s ease; }

/* --- Beranda: sebelum di-scroll, navbar transparan & menyatu dengan banner --- */
body.home .main-nav { background: transparent; box-shadow: none; }
body.home .main-nav:not(.scrolled) .navbar-brand .brand-text { color: #fff; }
body.home .main-nav:not(.scrolled) .navbar-nav .nav-link { color: rgba(255, 255, 255, .88); }
body.home .main-nav:not(.scrolled) .navbar-nav .nav-item.active .nav-link { color: #fff; }
body.home .main-nav:not(.scrolled) .navbar-nav .nav-item.active .nav-link:before { background: #fff; }
body.home .main-nav:not(.scrolled) .navbar-toggler { border-color: rgba(255, 255, 255, .5); }
body.home .main-nav:not(.scrolled) .navbar-toggler .ti-menu { color: #fff; }
body.home .main-nav:not(.scrolled) .nav-cta { background: #fff; color: var(--haraso); }
body.home .main-nav:not(.scrolled) .nav-cta:hover { background: rgba(255, 255, 255, .86); color: var(--haraso-dark); }
body.home .main-nav:not(.scrolled) .navbar-nav .nav-link:hover { color: #fff; }
.main-nav .nav-cta { color: #fff; }

/* --- Setelah di-scroll: latar putih + blur + bayangan (berlaku semua halaman) --- */
.main-nav.scrolled {
  background: rgba(255, 255, 255, .94);
  -webkit-backdrop-filter: saturate(180%) blur(10px);
  backdrop-filter: saturate(180%) blur(10px);
  box-shadow: 0 8px 30px rgba(28, 19, 64, .10);
}
.main-nav.scrolled .navbar-brand img { width: 34px; height: 34px; }
.main-nav.scrolled .navbar-brand .brand-text { font-size: 18px; }

/* Beri jarak ekstra di beranda supaya judul tidak tertutup navbar melayang */
body.home .gradient-banner { padding-top: 132px; }

@media (max-width: 991px) {
  .main-nav .navbar-collapse {
    background: #fff; margin-top: 8px; padding: 10px 16px 16px;
    border-radius: 0 0 14px 14px; box-shadow: 0 20px 40px rgba(28, 19, 64, .12);
  }
  /* Menu mobile selalu tampil di atas kartu putih → paksa teks gelap meski belum di-scroll */
  body.home .main-nav:not(.scrolled) .navbar-collapse .nav-link { color: #1c1340; }
  body.home .main-nav:not(.scrolled) .navbar-collapse .nav-item.active .nav-link { color: var(--haraso); }
  body.home .main-nav:not(.scrolled) .navbar-collapse .nav-cta { background: var(--haraso); color: #fff; }
}

/* Bar progres baca di paling atas halaman */
.scroll-progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 0;
  background: linear-gradient(90deg, var(--haraso), #b9a6ff);
  z-index: 2000; pointer-events: none;
  transition: width .12s linear;
}

/* Elemen parallax */
[data-parallax] { will-change: transform; }
.hero-visual { will-change: transform; }
.hero-mockup { transition: none; }

/* Hormati preferensi pengguna: matikan gerakan */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  [data-parallax], .hero-mockup { transform: none !important; }
  .screen-card img, .feature-card, .btn-main, .btn-main-md, .btn-main-sm { transition: none !important; }
}