/* =====================================================================
   CIPTONING KOPI — Public Site Design System
   Redesain mengikuti INSTRUKSI_REDESAIN_CIPTONING.md §1
   ===================================================================== */
:root{
  /* Palet resmi redesain */
  --color-cream:#F4F1EB;
  --color-espresso:#2C1810;
  --color-gold:#C8A96E;
  --color-brown:#6F4E37;
  --color-text:#3A3A3A;
  --color-light:#FAF8F5;
  --color-white:#FFFFFF;
  --gold-deep:#B28D4A;

  /* Alias lama dipertahankan (dipakai luas di CSS ini) supaya konsisten
     dengan palet baru tanpa menulis ulang setiap selector. */
  --espresso-900:var(--color-espresso); --espresso-800:#3B2415; --espresso-700:var(--color-brown); --espresso-500:#9A6F3D;
  --cream:var(--color-cream);        --cream-soft:var(--color-light);
  --gold:var(--color-gold);
  --orange:#F94F06;
  --white:var(--color-white);        --black:#000000;
  --radius:14px;
  --shadow:0 2px 8px rgba(44,24,16,.08), 0 12px 32px rgba(44,24,16,.06);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  background:var(--color-light); color:var(--color-text);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{color:inherit; text-decoration:none}
.accent{font-family:'Pacifico',cursive}
h1,h2,h3{font-family:'Instrument Serif',Georgia,serif; font-style:italic; font-weight:400; margin:0 0 .4em; color:var(--color-espresso)}

/* Label kecil huruf besar (eyebrow) - dipakai di hero, tag section, dst */
.eyebrow{
  display:inline-block; font-family:'Instrument Serif',Georgia,serif; font-style:italic;
  color:var(--espresso-500); font-size:14px; letter-spacing:.1em; text-transform:uppercase;
}

/* ---------- Tombol CTA (outline & solid, gaya kotak kecil huruf besar) ---------- */
.btn-outline, .btn-solid, .btn-dark{
  display:inline-block; text-align:center; font-size:12px; font-weight:700;
  text-transform:uppercase; letter-spacing:.08em; border-radius:2px; padding:15px 26px; min-height:44px;
  transition:background .2s ease, color .2s ease;
}
.btn-outline{border:1.5px solid var(--color-espresso); color:var(--color-espresso)}
.btn-outline:hover{background:var(--color-espresso); color:var(--color-light); text-decoration:none}
.btn-solid{background:var(--color-gold); color:var(--color-espresso); border:1.5px solid var(--color-gold)}
.btn-solid:hover{background:var(--gold-deep); border-color:var(--gold-deep); text-decoration:none}
.btn-dark{background:var(--color-espresso); color:var(--color-light); border:1.5px solid var(--color-espresso)}
.btn-dark:hover{background:var(--espresso-800); border-color:var(--espresso-800); text-decoration:none}

/* ---------- Lompat ke konten (terlihat hanya saat difokus keyboard) ---------- */
.skip-link{position:absolute; left:16px; top:-64px; z-index:200; background:var(--color-espresso); color:var(--color-light); padding:12px 18px; border-radius:2px; font-weight:600; font-size:14px; transition:top .15s ease}
.skip-link:focus{top:12px; text-decoration:none; outline:2px solid var(--color-gold); outline-offset:2px}
#konten:focus{outline:none}

/* ---------- Header ---------- */
.site-header{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px max(32px, env(safe-area-inset-right)) 16px max(32px, env(safe-area-inset-left)); background:rgba(244,241,235,.7);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  border-bottom:1px solid rgba(44,24,16,.06);
  position:sticky; top:0; z-index:100;
  transition:background .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.site-header.is-scrolled{
  background:var(--color-light);
  box-shadow:var(--shadow);
  border-bottom-color:rgba(44,24,16,.1);
}
.site-logo{display:flex; align-items:center}
.site-logo img{height:38px; width:auto; display:block}
.site-nav{display:flex; gap:26px; align-items:center}
.site-nav a{display:inline-flex; align-items:center; min-height:44px; font-weight:500; font-size:12px; text-transform:uppercase; letter-spacing:.08em; color:var(--color-brown)}
.site-nav a:hover{color:var(--color-espresso)}
.site-nav a.is-active{color:var(--color-espresso); font-weight:700}
.site-nav a.site-nav__cta{margin-left:4px; padding:0 20px !important; color:var(--color-espresso)}
.site-nav a.site-nav__cta:hover{color:var(--color-light)}

/* ---------- Header: mobile (hamburger) ---------- */
.nav-toggle{
  display:none; background:none; border:0; padding:0; cursor:pointer;
  flex-direction:column; gap:5px; align-items:center; justify-content:center; width:44px; height:44px; z-index:110;
}
.nav-toggle span{width:24px; height:2px; background:var(--color-espresso); display:block; transition:transform .25s ease, opacity .25s ease}
.nav-toggle.is-open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle.is-open span:nth-child(2){opacity:0}
.nav-toggle.is-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

@media (max-width: 640px){
  .nav-toggle{display:flex}
  .site-header{padding:10px max(20px, env(safe-area-inset-right)) 10px max(20px, env(safe-area-inset-left))}
  .site-nav{
    position:fixed; inset:0 0 0 auto; top:0; height:100vh; height:100dvh; width:min(78vw,320px);
    background:var(--color-light); flex-direction:column; align-items:flex-start;
    justify-content:center; gap:26px; padding:32px;
    transform:translateX(100%); transition:transform .35s ease;
    box-shadow:-8px 0 24px rgba(44,24,16,.12);
  }
  .site-nav.is-open{transform:translateX(0)}
  .site-nav a{font-size:18px}
  .site-nav a.btn-outline{font-size:12px}
}

/* ---------- Hero full-bleed (dipakai Beranda & Lakon Kami) ---------- */
.story-hero-full, .hero-full{
  position:relative; min-height:78vh; min-height:78svh; display:flex; align-items:center; justify-content:center;
  overflow:hidden; text-align:center;
}
.story-hero-full{min-height:62vh; align-items:flex-end; justify-content:flex-start; text-align:left}
.story-hero-full .story-hero-full__content{text-align:left; padding:0 40px 56px}
.story-hero-full__img, .hero-full__img{
  position:absolute; inset:-12% 0; width:100%; height:124%; object-fit:cover; z-index:0;
}
.story-hero-full::before, .hero-full::before{
  content:''; position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg,rgba(44,24,16,.5),rgba(44,24,16,.78));
}
.story-hero-full__content, .hero-full__content{position:relative; z-index:2; max-width:640px; padding:0 24px; color:var(--color-light)}
.story-hero-full__content h1, .hero-full__content h1{color:var(--color-light); font-size:clamp(32px,5vw,52px)}
.story-hero-full__content p, .hero-full__content p{color:rgba(244,241,235,.9); font-size:18px; margin:0}

/* Hero Beranda: rata kiri-bawah, bukan tengah (varian --bottom) */
.hero-full--bottom{justify-content:flex-start; align-items:flex-end; text-align:left}
.hero-full--bottom .hero-full__content{max-width:780px; padding:0 40px 64px; text-align:left}
.hero-full__eyebrow{color:var(--color-gold); margin:0 0 14px}
.hero-full__cta{display:flex; gap:14px 26px; flex-wrap:wrap; align-items:center; margin-top:30px}
.hero-full__link{display:inline-flex; align-items:center; min-height:44px; font-weight:600; font-size:15px; color:var(--color-light); border-bottom:1.5px solid rgba(250,248,245,.55)}
.hero-full__link:hover{color:var(--color-gold); border-bottom-color:var(--color-gold); text-decoration:none}
.hero-full__link:focus-visible{outline:2px solid var(--color-gold); outline-offset:4px}

@media (max-width: 640px){
  .hero-full--bottom .hero-full__content{padding:0 20px 48px}
}

/* ---------- Beranda: section hover kata ("Ada banyak hal di balik secangkir kopi") ---------- */
.home-hook{max-width:1080px; margin:0 auto; padding:64px 24px 76px; display:flex; gap:48px; align-items:center; flex-wrap:wrap; border-bottom:1px solid rgba(44,24,16,.08)}
.home-hook__media{flex:1 1 320px; min-width:260px; aspect-ratio:4/3; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); position:relative; background:var(--color-cream)}
.home-hook__img{position:absolute; inset:0; opacity:0; transition:opacity .4s ease}
.home-hook__img.is-active{opacity:1}
.home-hook__img img{width:100%; height:100%; object-fit:cover; display:block}
.home-hook__text{flex:1 1 360px; min-width:280px}
.home-hook__lede{font-family:'Instrument Serif',Georgia,serif; font-style:italic; color:var(--color-espresso); font-size:clamp(20px,2.6vw,26px); margin:0 0 10px}
.home-hook__hint{color:var(--color-brown); font-size:14px; margin:0 0 22px}
.home-hook__words{display:flex; flex-wrap:wrap; gap:6px 24px}
.home-hook__caption{margin:22px 0 6px; min-height:3.2em; max-width:44ch; color:var(--color-brown); font-size:16px; line-height:1.6}
.home-hook__go{display:inline-flex; align-items:center; min-height:44px; font-weight:600; font-size:15px; color:var(--color-espresso); border-bottom:1.5px solid var(--color-gold)}
.home-hook__go:hover{color:var(--espresso-500); text-decoration:none}
.home-hook__go:focus-visible, .home-hook__word:focus-visible{outline:2px solid var(--color-espresso); outline-offset:4px}
.home-hook__word{
  display:inline-flex; align-items:center; min-height:44px; font-family:'Instrument Serif',Georgia,serif; font-style:italic; font-size:19px;
  letter-spacing:.05em; color:var(--color-brown); border-bottom:1.5px solid transparent;
  transition:color .2s ease, border-color .2s ease;
}
.home-hook__word:hover, .home-hook__word.is-active{color:var(--color-espresso); border-bottom-color:var(--color-gold)}

@media (max-width: 760px){
  .home-hook{padding:48px 20px 56px; gap:28px}
}

/* Badge nomor pada kartu "Masuk Lebih Jauh" */
.explore-card__img{position:relative}
.explore-card__num{
  position:absolute; top:14px; left:14px; z-index:2; background:var(--color-light); color:var(--color-espresso);
  font-family:'Instrument Serif',Georgia,serif; font-style:italic; font-size:15px; padding:4px 11px; border-radius:2px;
}

/* ---------- Beranda: Siapa Kami ---------- */
.home-siapa{
  max-width:1040px; margin:0 auto; padding:96px 24px;
  display:flex; align-items:center; gap:56px;
}
.home-siapa__text{flex:1.3; max-width:600px}
.home-siapa__text h2{text-wrap:balance}
.home-siapa__text > p{color:var(--color-brown); font-size:18px; margin-bottom:18px; max-width:62ch}
.home-siapa__layers{display:grid; grid-template-columns:1fr 1fr; gap:22px 28px; margin:30px 0 32px; padding:0}
.home-siapa__layers > div{border-top:1px solid rgba(154,111,61,.45); padding-top:12px}
.home-siapa__layers dt{font-family:'Instrument Serif',Georgia,serif; font-style:italic; font-size:22px; color:var(--color-espresso); margin:0 0 4px}
.home-siapa__layers dd{margin:0; font-size:15px; line-height:1.6; color:var(--color-brown)}
.home-siapa__link{display:inline-flex; align-items:center; min-height:44px; font-weight:600; font-size:15px; color:var(--color-espresso); border-bottom:1.5px solid var(--color-gold)}
.home-siapa__link:hover{color:var(--espresso-500); text-decoration:none}
.home-siapa__link:focus-visible{outline:2px solid var(--color-espresso); outline-offset:4px}
.home-siapa__media{flex:1; aspect-ratio:4/3; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); min-width:0}
.home-siapa__media img{width:100%; height:100%; object-fit:cover; display:block}

@media (max-width: 760px){
  .home-siapa{flex-direction:column; padding:64px 24px; gap:28px}
  .home-siapa__media{width:100%}
  .home-siapa__layers{grid-template-columns:1fr; gap:16px}
}

/* ---------- Beranda: Koleksi Kopi (pintu masuk ke produk) ---------- */
.home-koleksi{
  background:var(--color-cream); padding:96px 24px;
  display:flex; align-items:center; justify-content:center; gap:56px; flex-wrap:wrap;
}
.home-koleksi__media{flex:1 1 380px; max-width:520px; aspect-ratio:5/4; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); min-width:0}
.home-koleksi__media img{width:100%; height:100%; object-fit:cover; display:block}
.home-koleksi__text{flex:1 1 320px; max-width:440px}
.home-koleksi__text h2{font-size:clamp(28px,4vw,40px); text-wrap:balance}
.home-koleksi__text p{color:var(--color-brown); font-size:18px; margin:0 0 20px; max-width:38ch}
@media (max-width: 760px){
  .home-koleksi{padding:64px 20px; gap:28px}
}

/* ---------- Beranda: Dari Jurnal Kami ---------- */
.home-journal{max-width:1080px; margin:0 auto; padding:96px 24px}
.home-journal h2{text-align:center; margin-bottom:48px}
.home-journal-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:28px}
.mini-journal-card{color:inherit; display:block}
.mini-journal-card__img{aspect-ratio:16/9; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); margin-bottom:14px}
.mini-journal-card__img img{width:100%; height:100%; object-fit:cover; display:block}
.mini-journal-card__date{font-size:12px; text-transform:uppercase; letter-spacing:.05em; color:var(--color-brown)}
.mini-journal-card__title{margin:6px 0 8px; font-size:19px}
.mini-journal-card__excerpt{color:var(--color-brown); font-size:14px; margin:0}

@media (max-width: 760px){
  .home-journal{padding:64px 20px}
  .home-journal-grid{grid-template-columns:1fr; gap:28px}
}

/* ---------- Beranda: penutup (scroll-driven ke espresso) ---------- */
.home-closing{
  padding:120px 24px; text-align:center; background:var(--color-light);
}
.home-closing__inner{max-width:600px; margin:0 auto}
.home-closing .home-closing__cta{display:inline-block; margin-top:8px}
.home-closing p{color:var(--color-brown); font-size:18px; line-height:1.8; margin:0 0 28px}
.home-closing__ngopi{
  font-family:'Pacifico',cursive; color:var(--color-gold);
  font-size:clamp(30px,5vw,46px) !important; margin:0 !important;
}

/* ---------- Lakon Kami: 4 lapisan (alternating media/text) ---------- */
.story-layers{max-width:1080px; margin:0 auto; padding:0 24px}
.story-layer-row{display:flex; align-items:center; gap:56px; padding:88px 0}
.story-layer-row--reverse{flex-direction:row-reverse}
.story-layer-row__media{flex:1 1 0; aspect-ratio:4/5; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); min-width:0}
.story-layer-row__media img{width:100%; height:100%; object-fit:cover; display:block}
.story-layer-row__text{flex:1 1 0; min-width:0}
.story-layer__tag{
  display:inline-block; font-family:'Instrument Serif',Georgia,serif; font-style:italic;
  color:var(--espresso-500); font-size:15px; text-transform:uppercase; letter-spacing:.1em;
  margin-bottom:8px; position:relative;
}
.story-layer-row__text{position:relative}
.story-layer-row__num{
  position:absolute; top:-38px; left:-4px; z-index:-1;
  font-family:'Instrument Serif',Georgia,serif; font-style:italic; color:rgba(44,24,16,.09);
  font-size:120px; line-height:1; pointer-events:none; user-select:none;
}
.story-layer-row__text p{color:var(--color-brown); font-size:16px; margin:0}

@media (max-width: 760px){
  .story-layer-row, .story-layer-row--reverse{flex-direction:column; gap:24px; padding:56px 0}
  .story-layer-row__media{width:100%; aspect-ratio:16/10}
}

/* ---------- Lakon Kami: Makna (full-bleed dark, dipisah dari 3 lapis lain) ---------- */
.story-makna{position:relative; min-height:64vh; display:flex; align-items:center; justify-content:center; overflow:hidden; text-align:center}
.story-makna__img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0}
.story-makna::before{
  content:''; position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg,rgba(44,24,16,.88),rgba(58,32,20,.92));
}
.story-makna__content{position:relative; z-index:2; max-width:620px; padding:56px 40px; color:var(--color-light)}
.story-makna__content .eyebrow{color:var(--color-gold)}
.story-makna__content h2{color:var(--color-light); font-size:clamp(24px,3.6vw,34px)}
.story-makna__content p{color:rgba(250,248,245,.88); font-size:16px; line-height:1.75; margin:0}

/* ---------- Lakon Kami: Cipta + Ning (dark) ---------- */
.story-cipta{background:var(--color-espresso); padding:96px 24px; text-align:center}
.story-cipta__inner{max-width:680px; margin:0 auto}
.story-cipta__inner p{color:rgba(244,241,235,.9); font-size:17px; line-height:1.8; margin:0 0 22px}
.story-cipta__ngopi{
  font-family:'Pacifico',cursive; color:var(--color-gold);
  font-size:clamp(28px,4.5vw,42px); margin-top:36px !important;
}

/* ---------- Lakon Kami: penutup ---------- */
.story-close{max-width:600px; margin:0 auto; padding:80px 24px 100px; text-align:center}
.story-close p{color:var(--color-brown); font-size:18px; margin-bottom:24px}

/* ---------- Kontak ---------- */
.contact{max-width:820px; margin:0 auto; padding:16px 24px 96px}
.contact-cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:16px}
.contact-card{
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:8px; padding:32px 20px;
  background:var(--white); border-radius:var(--radius); box-shadow:var(--shadow);
}
.contact-card__icon{color:var(--color-gold)}
.contact-card__label{font-size:12px; text-transform:uppercase; letter-spacing:.05em; color:var(--espresso-500)}
.contact-card__value{font-weight:600; font-size:17px; color:var(--espresso-900)}
.contact-card--static{cursor:default}
.contact-card--map{overflow:hidden}
.contact-card__map{width:100%; aspect-ratio:16/10; border-radius:8px; overflow:hidden; filter:sepia(.3) saturate(1.1)}

/* ---------- Halaman: intro sederhana (Koleksi Kopi, Jurnal Seduh, Kontak) ---------- */
.page-intro{max-width:700px; margin:0 auto; padding:88px 24px 16px; text-align:center}
.page-intro p{color:var(--color-brown); font-size:18px; margin:0}

/* ---------- Breadcrumb ---------- */
.breadcrumb{max-width:1040px; margin:0 auto; padding:20px 24px 0}
.breadcrumb ol{display:flex; flex-wrap:wrap; align-items:center; gap:6px; list-style:none; margin:0; padding:0; font-size:13px; color:var(--muted, #6E6053)}
.breadcrumb li{display:flex; align-items:center; gap:6px}
.breadcrumb li:not(:last-child)::after{content:"/"; color:var(--muted, #6E6053); opacity:.6}
.breadcrumb a{color:var(--muted, #6E6053); text-decoration:none}
.breadcrumb a:hover{color:var(--color-brown); text-decoration:underline}
.breadcrumb li[aria-current], .breadcrumb span[aria-current]{color:var(--color-brown); font-weight:500}

/* ---------- Koleksi Kopi (catalog) ---------- */
.catalog{max-width:1040px; margin:0 auto; padding:0 24px 96px}
.catalog-empty{text-align:center; color:var(--espresso-700); padding:40px 0}
.catalog-section{max-width:1080px; margin:64px auto 0; padding:0 24px}
.catalog-section--tinted{background:var(--color-cream); padding:64px 24px; max-width:none; margin-top:80px}
.catalog-section--tinted .catalog-section__inner{max-width:1080px; margin:0 auto}
.catalog-section__title{font-size:28px; text-align:center; margin-bottom:6px}
.catalog-section__note{color:var(--espresso-700); font-size:15px; margin:0 auto 32px; text-align:center; max-width:560px}
.catalog-grid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:22px;
}

/* ---------- Chip filter (dipakai di Koleksi Kopi & Jurnal Seduh) ---------- */
.chip-row{display:flex; gap:10px; justify-content:center; flex-wrap:wrap}
.chip{
  cursor:pointer; border:0; font-size:13px; font-weight:500; padding:8px 16px; border-radius:999px;
  background:var(--color-white); color:var(--color-brown); box-shadow:0 1px 4px rgba(44,24,16,.08);
  font-family:inherit;
}
.chip.is-active{background:var(--color-espresso); color:var(--color-light); font-weight:600; box-shadow:none}

/* ---------- Koleksi Kopi: Pandawa Series (showcase, belum ada checkout) ---------- */
.pandawa-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:22px}
.pandawa-card{
  background:var(--color-white); border-radius:var(--radius); box-shadow:var(--shadow);
  overflow:hidden; display:flex; flex-direction:column;
}
.pandawa-card__img{aspect-ratio:1/1; overflow:hidden; background:var(--color-cream); position:relative}
.pandawa-card__img img{width:100%; height:100%; object-fit:cover; display:block; filter:sepia(.3) saturate(1.15) brightness(.98)}
.pandawa-card__body{padding:20px; display:flex; flex-direction:column; gap:6px; flex:1}
.pandawa-card__tokoh{font-size:12px; text-transform:uppercase; letter-spacing:.05em; color:var(--color-gold); font-weight:600}
.pandawa-card__name{margin:0; font-size:19px}
.pandawa-card__meta{font-size:13px; color:var(--color-brown); margin:0}
.pandawa-card__flavor{font-size:14px; color:var(--color-text); margin:4px 0 0}
.pandawa-card__more{display:none; margin-top:10px; padding-top:10px; border-top:1px solid rgba(44,24,16,.08); flex-direction:column; gap:6px}
.pandawa-card__more.is-open{display:flex}
.pandawa-card__toggle{
  cursor:pointer; background:none; border:0; padding:0; margin-top:10px; text-align:left;
  font-family:inherit; font-weight:600; color:var(--color-brown); font-size:13px;
}
.pandawa-card__toggle:hover{color:var(--color-espresso)}
.pandawa-card__cta{
  display:inline-block; text-align:center; font-weight:700; font-size:11px;
  text-transform:uppercase; letter-spacing:.08em;
  color:var(--color-espresso); background:var(--color-gold); border-radius:2px; padding:10px;
}
.pandawa-card__cta:hover{background:var(--gold-deep); text-decoration:none}
.pandawa-card__num{
  position:absolute; top:12px; left:12px; z-index:2; background:var(--color-light); color:var(--color-espresso);
  font-family:'Instrument Serif',Georgia,serif; font-style:italic; font-size:14px; padding:3px 10px; border-radius:2px;
}
.product-card{
  background:var(--white); border-radius:var(--radius); box-shadow:var(--shadow);
  overflow:hidden; display:flex; flex-direction:column;
}
.product-card__img{width:100%; aspect-ratio:4/3; object-fit:contain; background:var(--cream); padding:14px}
.product-card__body{padding:18px; display:flex; flex-direction:column; gap:8px; flex:1}
.product-card__badge{
  display:inline-block; font-size:11px; text-transform:uppercase; letter-spacing:.04em;
  background:var(--cream); color:var(--espresso-500); padding:3px 10px; border-radius:999px; width:fit-content;
}
.product-card__name{margin:0; font-size:17px}
.product-card__desc{color:var(--espresso-700); font-size:14px; margin:0}
.product-card__price{font-weight:700; font-size:17px; margin-top:auto; color:var(--espresso-900)}
.product-card__cta{
  display:block; text-align:center; background:var(--gold); color:var(--espresso-900);
  font-weight:700; padding:11px; border-radius:2px;
  font-size:11px; text-transform:uppercase; letter-spacing:.06em;
}
.product-card__cta:hover{background:var(--gold-deep); text-decoration:none}
.product-card__cta--wa{background:var(--espresso-900); color:var(--cream-soft)}
.product-card__cta--wa:hover{background:var(--espresso-800)}

/* ---------- Jurnal Seduh (list) ---------- */
.journal{max-width:860px; margin:0 auto; padding:16px 24px 96px}
.journal-list{display:flex; flex-direction:column; gap:0}
.journal-card{
  display:flex; align-items:center; gap:28px; padding:28px 0;
  border-top:1px solid rgba(44,24,16,.1); color:inherit;
}
.journal-card:hover{text-decoration:none}
.journal-card:last-child{border-bottom:1px solid rgba(44,24,16,.1)}
.journal-card__img{flex:0 0 220px; aspect-ratio:16/9; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow)}
.journal-card__img img{width:100%; height:100%; object-fit:cover; display:block}
.journal-card__body{flex:1; min-width:0}
.journal-card__date{font-size:12px; text-transform:uppercase; letter-spacing:.05em; color:var(--espresso-500)}
.journal-card__title{margin:6px 0 8px; font-size:22px}
.journal-card__excerpt{color:var(--espresso-700); font-size:15px; margin:0 0 8px}
.journal-card__link{font-weight:600; color:var(--gold)}

@media (max-width: 640px){
  .journal-card{flex-direction:column; align-items:stretch; gap:16px}
  .journal-card__img{flex:none; width:100%}
}

/* ---------- Jurnal Seduh (artikel) ---------- */
.article{max-width:680px; margin:0 auto; padding:64px 24px 96px}
.article__date{font-size:12px; text-transform:uppercase; letter-spacing:.05em; color:var(--espresso-500)}
.article article h1{margin:8px 0 20px; font-size:clamp(28px,4vw,40px)}
.article__lede{font-size:18px; color:var(--espresso-700); margin-bottom:24px}
.article article p{font-size:16px; line-height:1.75; margin-bottom:20px; color:var(--espresso-900)}
.article__cta{
  text-align:center; margin:48px 0; padding:32px; background:var(--white);
  border-radius:var(--radius); box-shadow:var(--shadow);
}
.article__cta p{margin:0 0 14px; font-weight:600}
.article__cta .cta{
  display:inline-block; background:var(--espresso-900); color:var(--cream-soft);
  font-weight:700; padding:12px 26px; border-radius:2px;
  font-size:11px; text-transform:uppercase; letter-spacing:.08em;
}
.article__cta .cta:hover{background:var(--espresso-800); text-decoration:none}
.article__back{text-align:center; font-weight:600}

/* ---------- Halaman legal (Kebijakan Privasi, S&K, Pengembalian) ---------- */
.legal{max-width:800px; margin:0 auto; padding:16px 24px 96px}
.legal h2{font-size:22px; margin-top:40px}
.legal p, .legal li{color:var(--color-text); font-size:16px; line-height:1.75}
.legal ul{padding-left:22px; margin:0 0 20px}
.legal li{margin-bottom:8px}
.legal__updated{color:var(--espresso-500); font-size:13px; margin-bottom:8px}

/* ---------- Halaman produk Ciptoning POS ---------- */
.pos-hero{max-width:760px; margin:0 auto; padding:88px 24px 8px; text-align:center}
.pos-hero p{color:var(--color-brown); font-size:18px; margin:0 0 24px}
.pos-hero .hero-cta-link{margin-top:0}
.feature-grid{max-width:1080px; margin:56px auto 0; padding:0 24px; display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:20px}
.feature-item{background:#fff; border-radius:14px; padding:22px; box-shadow:0 2px 10px rgba(0,0,0,.05)}
.feature-item__title{font-family:'Instrument Serif',Georgia,serif; font-style:italic; font-weight:400; font-size:18px; color:var(--color-espresso); margin:0 0 6px}
.feature-item__desc{color:var(--espresso-700); font-size:14px; margin:0; line-height:1.6}
.pricing-grid{max-width:1080px; margin:0 auto; padding:0 24px; display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:20px}
.pricing-card{background:#fff; border-radius:16px; padding:28px 24px; box-shadow:0 2px 10px rgba(0,0,0,.06); display:flex; flex-direction:column; text-align:center}
.pricing-card--featured{border:2px solid var(--gold); box-shadow:0 8px 24px rgba(201,152,47,.18)}
.pricing-card__badge{font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--gold); font-weight:700; margin-bottom:6px}
.pricing-card__nama{font-family:'Instrument Serif',Georgia,serif; font-style:italic; font-weight:400; font-size:22px; margin:0}
.pricing-card__harga{font-size:28px; font-weight:700; color:var(--color-espresso); margin:10px 0 4px}
.pricing-card__harga span{font-size:13px; font-weight:400; color:var(--espresso-500)}
.pricing-card__list{list-style:none; padding:0; margin:18px 0; text-align:left; flex:1}
.pricing-card__list li{font-size:14px; color:var(--espresso-700); padding:6px 0; border-bottom:1px solid var(--color-light)}
.pricing-card__cta{
  display:block; text-align:center; background:var(--gold); color:var(--espresso-900);
  font-weight:700; padding:12px; border-radius:2px; margin-top:10px;
  font-size:11px; text-transform:uppercase; letter-spacing:.06em;
}
.pricing-card__cta:hover{opacity:.9; text-decoration:none}
.pos-faq{max-width:720px; margin:64px auto 0; padding:0 24px}
.pos-faq details{background:#fff; border-radius:10px; padding:14px 18px; margin-bottom:10px; box-shadow:0 1px 6px rgba(0,0,0,.04)}
.pos-faq summary{font-weight:600; cursor:pointer; color:var(--color-espresso)}
.pos-faq p{color:var(--espresso-700); font-size:14px; margin:10px 0 0}

/* ---------- Tombol CTA generik (dipakai di 404, dst) ---------- */
.hero-cta-link{
  display:inline-block; margin-top:16px; background:var(--espresso-900); color:var(--cream-soft);
  font-weight:700; padding:12px 26px; border-radius:2px;
  font-size:11px; text-transform:uppercase; letter-spacing:.08em;
}
.hero-cta-link:hover{background:var(--espresso-800); text-decoration:none}

/* ---------- Footer ---------- */
.site-footer{
  background:var(--color-espresso); color:var(--color-light);
  padding:48px 24px max(32px, env(safe-area-inset-bottom)); text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:20px;
}
.site-footer__logo img{height:34px; width:auto; filter:brightness(0) invert(1); opacity:.92}
.site-footer__ngopi{font-family:'Pacifico',cursive; color:var(--color-gold); font-size:22px; margin:4px 0 0}
.site-footer__ngopi-sub{font-family:'Instrument Serif',Georgia,serif; font-style:italic; color:rgba(200,169,110,.8); font-size:15px; margin:-4px 0 4px}
.site-footer__nav{display:flex; flex-wrap:wrap; justify-content:center; gap:8px 18px; font-size:14px}
.site-footer__nav a{display:inline-flex; align-items:center; min-height:44px; color:rgba(244,241,235,.8)}
.site-footer__nav a:hover{color:var(--color-gold)}
.site-footer__copy{font-size:12px; color:rgba(244,241,235,.55)}
.site-footer__copy a{display:inline-flex; align-items:center; min-height:44px; padding:0 6px; color:rgba(244,241,235,.7)}
.site-footer__copy a:hover{color:var(--color-gold)}

/* ---------- Marquee NGOPI (pita istilah berjalan) ---------- */
@keyframes ngopi-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.ngopi-marquee{
  background-color:var(--espresso-900);
  background-image:radial-gradient(rgba(200,169,110,.14) 1px, transparent 1px);
  background-size:14px 14px;
  overflow:hidden; padding:16px 0;
}
.ngopi-marquee__track{
  display:flex; gap:44px; white-space:nowrap; width:max-content;
  animation:ngopi-marquee 32s linear infinite;
}
.ngopi-marquee__item{display:inline-flex; align-items:baseline; gap:8px; flex:0 0 auto}
.ngopi-marquee__term{font-family:'Pacifico',cursive; color:var(--color-gold); font-size:16px}
.ngopi-marquee__meaning{color:rgba(250,248,245,.75); font-size:14px}
@media (prefers-reduced-motion: reduce){
  .ngopi-marquee__track{animation:none}
}

/* =====================================================================
   Idle-Overlay Bermerek (NGOPI = Ngolah Pikir)
   ===================================================================== */
.idle-overlay{
  position:fixed; inset:0; z-index:9999;
  background:var(--espresso-900);
  display:flex; align-items:center; justify-content:center;
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .6s ease;
}
.idle-overlay.active{opacity:1; visibility:visible; pointer-events:auto}
.idle-overlay__inner{text-align:center; padding:0 24px; max-width:560px}
.idle-overlay__term{
  font-family:'Pacifico',cursive; color:var(--gold);
  font-size:clamp(36px,7vw,64px); margin:0 0 .3em;
}
.idle-overlay__meaning{
  font-family:'Instrument Serif',Georgia,serif; color:var(--cream-soft);
  font-size:clamp(16px,2.4vw,22px); font-style:italic; margin:0 0 2em;
}
.idle-overlay__hint{
  color:rgba(245,241,234,.55); font-size:13px; letter-spacing:.04em;
  text-transform:uppercase;
}

/* =====================================================================
   Scroll-reveal utility (dianimasikan lewat GSAP di assets/js/site.js).
   Fallback tanpa JS/GSAP: tetap terlihat (progressive enhancement).
   ===================================================================== */
.reveal{opacity:1; transform:none}
.js-gsap .reveal{opacity:0; transform:translateY(24px)}