/* KetumLokal Premium Mobile/UX Overhaul
   File: assets/css/kl-premium.css
   Notes:
   - Non-destructive overrides on top of existing min CSS.
   - Mobile-first polish + safe-area + luxury spacing/typography.
*/

/* =========================
   Theme + Base
========================= */
:root{
  --bg:#070a08;
  --bg2:#0b0f0c;
  --card:rgba(255,255,255,.06);
  --card2:rgba(255,255,255,.08);
  --line:rgba(255,255,255,.10);
  --text:rgba(255,255,255,.92);
  --muted:rgba(255,255,255,.70);
  --muted2:rgba(255,255,255,.55);
  --accent:#b7ff5a;           /* herbal premium accent (lime-sage) */
  --accent2:#d8ffb0;
  --radius:18px;
  --radius2:22px;
  --shadow: 0 24px 80px rgba(0,0,0,.55);
  --shadow2: 0 10px 32px rgba(0,0,0,.38);
  --maxw: 1120px;
  --tap: 44px;
}

html { scroll-behavior: smooth; }

body{
  background: radial-gradient(1200px 800px at 50% -20%, rgba(183,255,90,.10), transparent 55%),
              radial-gradient(900px 650px at 15% 10%, rgba(216,255,176,.06), transparent 55%),
              linear-gradient(180deg, var(--bg) 0%, #060806 100%);
  color: var(--text);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

.wrap{ max-width: var(--maxw); }

/* Prevent horizontal jiggle on mobile (marquee/cards) */
body, .wrap, main, section { overflow-x: clip; }

/* Tap targets */
a, button, input{
  min-height: var(--tap);
  -webkit-tap-highlight-color: transparent;
}
button, .iconbtn{ cursor:pointer; }

/* Better focus ring */
:focus-visible{
  outline: 2px solid rgba(183,255,90,.70);
  outline-offset: 3px;
  border-radius: 10px;
}

/* Subtle premium accent */
.accent{ color: var(--accent2) !important; }

/* =========================
   Topbar / Nav
========================= */
.topbar{
  position: sticky;
  top: 0;
  z-index: 1000;
  background: rgba(7,10,8,.68);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(255,255,255,.07);
  padding-top: env(safe-area-inset-top);
}

.topbar .wrap.nav{
  padding-left: max(16px, env(safe-area-inset-left));
  padding-right: max(16px, env(safe-area-inset-right));
}

/* Brand */
.brand__name{ letter-spacing: .02em; }

/* Buttons: more premium */
.btn{
  border-radius: 999px !important;
  font-weight: 600;
  letter-spacing: .01em;
}
.btn--solid{ box-shadow: 0 12px 26px rgba(0,0,0,.35); }
.btn--ghost{
  border: 1px solid rgba(255,255,255,.12) !important;
  background: rgba(255,255,255,.04) !important;
}

/* Icon button (hamburger) - tetap ada untuk desktop, tapi nanti dimatikan di mobile */
.iconbtn{
  width: var(--tap);
  height: var(--tap);
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  display: grid;
  place-items: center;
  line-height: 1;
  font-size: 18px;
}

/* =========================
   Mobile menu drawer (legacy)
   (Tetap disimpan tapi dimatikan di mobile-bar mode)
========================= */
#mobileMenu{
  position: fixed;
  inset: 0;
  z-index: 1200;
  padding: calc(18px + env(safe-area-inset-top)) 18px calc(18px + env(safe-area-inset-bottom));
  background: rgba(7,10,8,.92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  transform: translateY(-8px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
  display: grid;
  align-content: start;
  gap: 10px;

  /* safety */
  max-width: none !important;
  width: 100% !important;
  margin: 0 !important;
  border-radius: 0 !important;
}

#mobileMenu.is-open{
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

#mobileMenu a{
  padding: 12px 4px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  font-size: 1.05rem;
  color: rgba(255,255,255,.90);
}
#mobileMenu a.btn{ border-bottom: none; margin-top: 10px; }

/* =========================
   Hero
========================= */
.hero{
  padding-top: clamp(36px, 5vw, 56px);
  padding-bottom: clamp(18px, 3vw, 28px);
}

.kicker{
  letter-spacing: .18em;
  text-transform: uppercase;
  font-size: .78rem;
  color: rgba(255,255,255,.70);
}

.hero__left h1{ letter-spacing: -0.02em; }
.lead{ color: rgba(255,255,255,.78); }

/* Feature card */
.featureCard{
  border-radius: var(--radius2);
  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.04));
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: var(--shadow2);
}

.price, .priceSmall{ letter-spacing: -0.01em; }

/* =========================
   Sections + Cards
========================= */
.section{
  padding-top: clamp(26px, 4vw, 42px);
  padding-bottom: clamp(26px, 4vw, 42px);
}

.sectionHead{ gap: 14px; }

.subtitle{
  color: rgba(255,255,255,.72) !important;
  max-width: 62ch;
}

.cards{ gap: 16px !important; }

.card{
  border-radius: var(--radius);
  border: 1px solid rgba(255,255,255,.10);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.035));
  box-shadow: 0 14px 40px rgba(0,0,0,.28);
}

.cardTop{ align-items: baseline; }

.badge{
  border: 1px solid rgba(183,255,90,.25);
  background: rgba(183,255,90,.08);
}

.card .muted{ color: rgba(255,255,255,.74) !important; }

/* Panels / FAQ / CTA */
.panel, .cta{
  border-radius: 26px;
  border: 1px solid rgba(255,255,255,.10);
  background: linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.03));
  box-shadow: var(--shadow);
}

.faqItem{
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
}
.faqItem summary{
  padding: 14px 14px;
  font-weight: 600;
}
.faqItem p{ padding: 0 14px 14px; }

/* CTA input */
#contactInput{
  width: 100%;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  padding: 14px 14px;
  color: rgba(255,255,255,.92);
}
#contactInput::placeholder{ color: rgba(255,255,255,.50); }

.footerLinks{ gap: 12px !important; }

/* Marquee (lebih classy) */
.marquee{
  border-top: 1px solid rgba(255,255,255,.06);
  border-bottom: 1px solid rgba(255,255,255,.06);
  background: rgba(255,255,255,.02);
}
.marquee__track{
  opacity: .70;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-size: .78rem;
}

/* =========================
   Responsive polish
========================= */

/* Default: sembunyikan links lebih awal agar header tidak sempit,
   NANTI akan di-override lagi oleh mode "NO HAMBURGER" */
@media (max-width: 900px){
  .links{ display:none !important; }
}

/* Mobile layout */
@media (max-width: 768px){
  body{ font-size: 15px; line-height: 1.65; }

  .wrap{
    padding-left: max(16px, env(safe-area-inset-left));
    padding-right: max(16px, env(safe-area-inset-right));
  }

  .hero{
    display: block !important;
    padding-top: 5.25rem;
  }

  .hero__left h1{
    font-size: 1.85rem;
    line-height: 1.25;
    margin-top: 10px;
  }

  .lead{ font-size: 1rem; }

  .ctaRow{
    display: grid !important;
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .chips{ display:none !important; }

  .cards{ grid-template-columns: 1fr !important; }

  .twoCol{
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 18px;
  }

  .ctaBtns{
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px;
  }

  .btn--small{
    padding: 12px 14px !important;
    font-size: .95rem !important;
  }

  .priceRow{ gap: 12px !important; }
}

/* iOS fix: avoid input zoom */
@supports (-webkit-touch-callout: none) {
  input, textarea, select{ font-size: 16px; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  *{ scroll-behavior: auto !important; }
  .reveal{ transition: none !important; animation: none !important; }
  #mobileMenu{ transition: none !important; }
}

/* =========================
   MODE: NO HAMBURGER (Premium Menu Bar)
   - Ini yang bikin header rapi, tidak loncat, tidak berantakan.
========================= */
@media (max-width: 980px){
  /* matikan hamburger + drawer */
  #menuBtn{ display:none !important; }
  #mobileMenu{ display:none !important; }

  /* susun nav jadi 3 kolom: brand | links | pesan */
  .topbar .wrap.nav{
    display:grid !important;
    grid-template-columns: auto 1fr auto !important;
    align-items:center !important;
    gap: 10px !important;
  }

  /* brand jangan makan tempat */
  .brand{ min-width: 0 !important; }
  .brand__name{ font-size: 13px !important; }

  /* tampilkan links (override rule max-width:900 yang sembunyikan) */
  .links{
    display:flex !important;
    justify-content:flex-start !important;
    gap: 8px !important;
    overflow-x:auto !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width:none;
    padding: 6px 2px !important;
  }
  .links::-webkit-scrollbar{ display:none; }

  .links a{
    white-space: nowrap;
    font-size: 12.5px !important;
    padding: 8px 10px !important;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(255,255,255,.03);
    color: rgba(255,255,255,.88) !important;
  }

  /* tombol kanan */
  .nav__actions{ gap: 8px !important; }
  .nav__actions .btn--solid{
    padding: 10px 14px !important;
    font-size: 13px !important;
    border-radius: 999px !important;
    white-space: nowrap;
  }

  /* sembunyikan shopee/tiktok di header mobile biar nggak crowded */
  #shopShopeeTop, #shopTiktokTop{ display:none !important; }
}
/* KetumLokal Premium Mobile/UX Overhaul
   File: assets/css/kl-premium.css
   Notes:
   - Non-destructive overrides on top of existing min CSS.
   - Mobile-first polish + safe-area + luxury spacing/typography.
*/

/* =========================
   Theme + Base
========================= */
:root{
  --bg:#070a08;
  --bg2:#0b0f0c;
  --card:rgba(255,255,255,.06);
  --card2:rgba(255,255,255,.08);
  --line:rgba(255,255,255,.10);
  --text:rgba(255,255,255,.92);
  --muted:rgba(255,255,255,.70);
  --muted2:rgba(255,255,255,.55);
  --accent:#b7ff5a;           /* herbal premium accent (lime-sage) */
  --accent2:#d8ffb0;
  --radius:18px;
  --radius2:22px;
  --shadow: 0 24px 80px rgba(0,0,0,.55);
  --shadow2: 0 10px 32px rgba(0,0,0,.38);
  --maxw: 1120px;
  --tap: 44px;
}

html { scroll-behavior: smooth; }

body{
  background: radial-gradient(1200px 800px at 50% -20%, rgba(183,255,90,.10), transparent 55%),
              radial-gradient(900px 650px at 15% 10%, rgba(216,255,176,.06), transparent 55%),
              linear-gradient(180deg, var(--bg) 0%, #060806 100%);
  color: var(--text);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

.wrap{ max-width: var(--maxw); }

/* Prevent horizontal jiggle on mobile (marquee/cards) */
body, .wrap, main, section { overflow-x: clip; }

/* Tap targets */
a, button, input{
  min-height: var(--tap);
  -webkit-tap-highlight-color: transparent;
}
button, .iconbtn{ cursor:pointer; }

/* Better focus ring */
:focus-visible{
  outline: 2px solid rgba(183,255,90,.70);
  outline-offset: 3px;
  border-radius: 10px;
}

/* Subtle premium accent */
.accent{ color: var(--accent2) !important; }

/* =========================
   Topbar / Nav
========================= */
.topbar{
  position: sticky;
  top: 0;
  z-index: 1000;
  background: rgba(7,10,8,.68);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(255,255,255,.07);
  padding-top: env(safe-area-inset-top);
}

.topbar .wrap.nav{
  padding-left: max(16px, env(safe-area-inset-left));
  padding-right: max(16px, env(safe-area-inset-right));
}

/* Brand */
.brand__name{ letter-spacing: .02em; }

/* Buttons: more premium */
.btn{
  border-radius: 999px !important;
  font-weight: 600;
  letter-spacing: .01em;
}
.btn--solid{ box-shadow: 0 12px 26px rgba(0,0,0,.35); }
.btn--ghost{
  border: 1px solid rgba(255,255,255,.12) !important;
  background: rgba(255,255,255,.04) !important;
}

/* Icon button (hamburger) - tetap ada untuk desktop, tapi nanti dimatikan di mobile */
.iconbtn{
  width: var(--tap);
  height: var(--tap);
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  display: grid;
  place-items: center;
  line-height: 1;
  font-size: 18px;
}

/* =========================
   Mobile menu drawer (legacy)
   (Tetap disimpan tapi dimatikan di mobile-bar mode)
========================= */
#mobileMenu{
  position: fixed;
  inset: 0;
  z-index: 1200;
  padding: calc(18px + env(safe-area-inset-top)) 18px calc(18px + env(safe-area-inset-bottom));
  background: rgba(7,10,8,.92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  transform: translateY(-8px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
  display: grid;
  align-content: start;
  gap: 10px;

  /* safety */
  max-width: none !important;
  width: 100% !important;
  margin: 0 !important;
  border-radius: 0 !important;
}

#mobileMenu.is-open{
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

#mobileMenu a{
  padding: 12px 4px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  font-size: 1.05rem;
  color: rgba(255,255,255,.90);
}
#mobileMenu a.btn{ border-bottom: none; margin-top: 10px; }

/* =========================
   Hero
========================= */
.hero{
  padding-top: clamp(36px, 5vw, 56px);
  padding-bottom: clamp(18px, 3vw, 28px);
}

.kicker{
  letter-spacing: .18em;
  text-transform: uppercase;
  font-size: .78rem;
  color: rgba(255,255,255,.70);
}

.hero__left h1{ letter-spacing: -0.02em; }
.lead{ color: rgba(255,255,255,.78); }

/* Feature card */
.featureCard{
  border-radius: var(--radius2);
  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.04));
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: var(--shadow2);
}

.price, .priceSmall{ letter-spacing: -0.01em; }

/* =========================
   Sections + Cards
========================= */
.section{
  padding-top: clamp(26px, 4vw, 42px);
  padding-bottom: clamp(26px, 4vw, 42px);
}

.sectionHead{ gap: 14px; }

.subtitle{
  color: rgba(255,255,255,.72) !important;
  max-width: 62ch;
}

.cards{ gap: 16px !important; }

.card{
  border-radius: var(--radius);
  border: 1px solid rgba(255,255,255,.10);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.035));
  box-shadow: 0 14px 40px rgba(0,0,0,.28);
}

.cardTop{ align-items: baseline; }

.badge{
  border: 1px solid rgba(183,255,90,.25);
  background: rgba(183,255,90,.08);
}

.card .muted{ color: rgba(255,255,255,.74) !important; }

/* Panels / FAQ / CTA */
.panel, .cta{
  border-radius: 26px;
  border: 1px solid rgba(255,255,255,.10);
  background: linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.03));
  box-shadow: var(--shadow);
}

.faqItem{
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
}
.faqItem summary{
  padding: 14px 14px;
  font-weight: 600;
}
.faqItem p{ padding: 0 14px 14px; }

/* CTA input */
#contactInput{
  width: 100%;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  padding: 14px 14px;
  color: rgba(255,255,255,.92);
}
#contactInput::placeholder{ color: rgba(255,255,255,.50); }

.footerLinks{ gap: 12px !important; }

/* Marquee (lebih classy) */
.marquee{
  border-top: 1px solid rgba(255,255,255,.06);
  border-bottom: 1px solid rgba(255,255,255,.06);
  background: rgba(255,255,255,.02);
}
.marquee__track{
  opacity: .70;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-size: .78rem;
}

/* =========================
   Responsive polish
========================= */

/* Default: sembunyikan links lebih awal agar header tidak sempit,
   NANTI akan di-override lagi oleh mode "NO HAMBURGER" */
@media (max-width: 900px){
  .links{ display:none !important; }
}

/* Mobile layout */
@media (max-width: 768px){
  body{ font-size: 15px; line-height: 1.65; }

  .wrap{
    padding-left: max(16px, env(safe-area-inset-left));
    padding-right: max(16px, env(safe-area-inset-right));
  }

  .hero{
    display: block !important;
    padding-top: 5.25rem;
  }

  .hero__left h1{
    font-size: 1.85rem;
    line-height: 1.25;
    margin-top: 10px;
  }

  .lead{ font-size: 1rem; }

  .ctaRow{
    display: grid !important;
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .chips{ display:none !important; }

  .cards{ grid-template-columns: 1fr !important; }

  .twoCol{
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 18px;
  }

  .ctaBtns{
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px;
  }

  .btn--small{
    padding: 12px 14px !important;
    font-size: .95rem !important;
  }

  .priceRow{ gap: 12px !important; }
}

/* iOS fix: avoid input zoom */
@supports (-webkit-touch-callout: none) {
  input, textarea, select{ font-size: 16px; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  *{ scroll-behavior: auto !important; }
  .reveal{ transition: none !important; animation: none !important; }
  #mobileMenu{ transition: none !important; }
}

/* =========================
   MODE: NO HAMBURGER (Premium Menu Bar)
   - Ini yang bikin header rapi, tidak loncat, tidak berantakan.
========================= */
@media (max-width: 980px){
  /* matikan hamburger + drawer */
  #menuBtn{ display:none !important; }
  #mobileMenu{ display:none !important; }

  /* susun nav jadi 3 kolom: brand | links | pesan */
  .topbar .wrap.nav{
    display:grid !important;
    grid-template-columns: auto 1fr auto !important;
    align-items:center !important;
    gap: 10px !important;
  }

  /* brand jangan makan tempat */
  .brand{ min-width: 0 !important; }
  .brand__name{ font-size: 13px !important; }

  /* tampilkan links (override rule max-width:900 yang sembunyikan) */
  .links{
    display:flex !important;
    justify-content:flex-start !important;
    gap: 8px !important;
    overflow-x:auto !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width:none;
    padding: 6px 2px !important;
  }
  .links::-webkit-scrollbar{ display:none; }

  .links a{
    white-space: nowrap;
    font-size: 12.5px !important;
    padding: 8px 10px !important;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(255,255,255,.03);
    color: rgba(255,255,255,.88) !important;
  }

  /* tombol kanan */
  .nav__actions{ gap: 8px !important; }
  .nav__actions .btn--solid{
    padding: 10px 14px !important;
    font-size: 13px !important;
    border-radius: 999px !important;
    white-space: nowrap;
  }

  /* sembunyikan shopee/tiktok di header mobile biar nggak crowded */
  #shopShopeeTop, #shopTiktokTop{ display:none !important; }
}