/* =====================================================================
   CIPTONING KOPI — Public Site Design System
   Palet & font mengikuti CLAUDE.md / BRAND_DNA_GUIDELINE.md §25.4-25.5
   ===================================================================== */
:root{
  --espresso-900:#2C1810; --espresso-800:#3B2415; --espresso-700:#5C4738; --espresso-500:#9A6F3D;
  --cream:#F5F1EA;        --cream-soft:#FBF7EF;
  --gold:#C6A15B;
  --orange:#F94F06;
  --white:#FFFFFF;        --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(--cream-soft); color:var(--espresso-900);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit; text-decoration:none}
.accent{font-family:'Pacifico',cursive}
h1,h2,h3{font-family:'Playfair Display',Georgia,serif; margin:0 0 .4em; color:var(--espresso-900)}

/* ---------- Header ---------- */
.site-header{
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 32px; background:var(--cream-soft);
  border-bottom:1px solid rgba(44,24,16,.08);
  position:sticky; top:0; z-index:10;
}
.site-logo{font-family:'Pacifico',cursive; font-size:22px; color:var(--espresso-900)}
.site-nav{display:flex; gap:28px; align-items:center}
.site-nav a{font-weight:500; font-size:15px; color:var(--espresso-700)}
.site-nav a:hover{color:var(--espresso-900)}
.site-nav .cta{
  background:var(--gold); color:var(--espresso-900); font-weight:600;
  padding:9px 20px; border-radius:999px;
}
.site-nav .cta:hover{background:#b28d4a}

/* ---------- Hero (skeleton) ---------- */
.hero{
  padding:96px 32px; text-align:center; max-width:760px; margin:0 auto;
}
.hero h1{font-size:clamp(32px,5vw,52px)}
.hero p{font-size:18px; color:var(--espresso-700); max-width:520px; margin:0 auto 28px}
.hero .cta{
  display:inline-block; background:var(--espresso-900); color:var(--cream-soft);
  font-weight:600; padding:14px 30px; border-radius:999px;
}
.hero .cta:hover{background:var(--espresso-800)}

/* ---------- Lakon Kami (story layers) ---------- */
.story{max-width:720px; margin:0 auto; padding:64px 24px 96px}
.story-hero{text-align:center; margin-bottom:56px}
.story-lede{font-size:18px; color:var(--espresso-700); max-width:520px; margin:0 auto}
.story-layer{margin-bottom:48px; padding-top:8px; border-top:1px solid rgba(44,24,16,.1)}
.story-layer__tag{
  display:inline-block; font-family:'Pacifico',cursive; color:var(--gold);
  font-size:20px; margin-bottom:6px;
}
.story-layer p{color:var(--espresso-700); font-size:16px}
.story-layer--meaning{border-top:none; text-align:center; padding-top:24px}
.story-layer--meaning .cta{
  display:inline-block; margin-top:12px; background:var(--espresso-900); color:var(--cream-soft);
  font-weight:600; padding:14px 30px; border-radius:999px;
}
.story-layer--meaning .cta:hover{background:var(--espresso-800)}

/* ---------- Kontak ---------- */
.contact{max-width:720px; margin:0 auto; padding:64px 24px 96px}
.contact-cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:16px}
.contact-card{
  display:flex; flex-direction:column; gap:6px; padding:24px;
  background:var(--white); border-radius:var(--radius); box-shadow:var(--shadow);
}
.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}

/* ---------- Koleksi Kopi (catalog) ---------- */
.catalog{max-width:1040px; margin:0 auto; padding:64px 24px 96px}
.catalog-empty{text-align:center; color:var(--espresso-700); padding:40px 0}
.catalog-section{margin-top:56px}
.catalog-section:first-of-type{margin-top:40px}
.catalog-section__title{font-size:22px; margin-bottom:6px}
.catalog-section__note{color:var(--espresso-700); font-size:14px; margin:0 0 20px}
.catalog-grid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:22px;
}
.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:600; padding:11px; border-radius:8px;
}
.product-card__cta:hover{background:#b28d4a; 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:760px; margin:0 auto; padding:64px 24px 96px}
.journal-list{display:flex; flex-direction:column; gap:0}
.journal-card{
  display:block; 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__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)}

/* ---------- 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:600; padding:12px 26px; border-radius:999px;
}
.article__cta .cta:hover{background:var(--espresso-800); text-decoration:none}
.article__back{text-align:center; font-weight:600}

/* ---------- Footer ---------- */
.site-footer{
  padding:32px; text-align:center; color:var(--espresso-700); font-size:13px;
  border-top:1px solid rgba(44,24,16,.08);
}

/* =====================================================================
   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:'Playfair Display',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;
}