/* base.css - CSS bersama MFAX (landing + blog).
   Diambil PERSIS dari blok CSS bersama kontrak UI (prototype/common.py).
   Chrome khusus prototype (prototype-bar) dan CSS admin sengaja TIDAK disertakan:
   admin punya stylesheet sendiri. Dua referensi 58px milik prototype-bar juga
   dilepas karena di produk tidak ada bar itu (body full tinggi viewport). */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
:root{
  --bg:#FAF7F2; --card:#FFFFFF; --ink:#141210; --muted:#5F594F;
  --shadow:0 2px 8px rgba(20,18,16,.06);
  --disp:'Cormorant Garamond',Georgia,'Times New Roman',serif;
  --txt:'Inter',-apple-system,'Segoe UI',Helvetica,Arial,sans-serif;
}
body{background:var(--page-bg,#FFFFFF);font-family:var(--txt);color:var(--ink);font-size:16px;line-height:1.65}
img{max-width:100%;display:block}
a{color:inherit}
button{font-family:inherit;cursor:pointer}
.le{display:none}
body.en .li{display:none}
body.en .le{display:revert}

/* ===== views ===== */
.view{display:none;background:var(--bg);min-height:100vh;container-type:inline-size}
.view.on{display:block}

/* ===== brand tokens ===== */
.theme-macbrame{--ac:#FF7E00;--acd:#A84A00;--txac:#A84A00;--ctatx:#141210;--gold:#FBCF0C}
.theme-altahaani{--ac:#00521F;--acd:#063D1B;--txac:#00521F;--ctatx:#FFFFFF;--gold:#F4CB4A}
.theme-xultimate{--ac:#00B4D8;--acd:#006B85;--txac:#006B85;--ctatx:#141210;--gold:#00B4D8}
.theme-florentine{--ac:#870000;--acd:#6E0000;--txac:#870000;--ctatx:#FFFFFF;--gold:#DBB42C}

/* ===== typography ===== */
/* cqw (bukan vw): ukuran ikut lebar .view (container) - preview 390px akurat = build akurat */
.h-disp{font-family:var(--disp);font-weight:500;font-size:clamp(2.75rem,1rem + 6.5cqw,6rem);line-height:1.05;letter-spacing:-.01em}
h2.h2{font-family:var(--disp);font-weight:500;font-size:clamp(2rem,.75rem + 3cqw,3.25rem);line-height:1.12}
.eyebrow{font:600 .75rem var(--txt);text-transform:uppercase;letter-spacing:.18em;color:var(--txac);display:inline-flex;align-items:center;gap:.6rem}
.eyebrow::before{content:'';width:24px;height:2px;background:var(--ac)}
.lead{font-size:1.25rem;font-weight:400;color:var(--ink)}
.cap{font-size:.8125rem;color:var(--muted)}
.narrow{max-width:65ch;margin-inline:auto}

/* ===== layout ===== */
.sec{padding-block:var(--sec-pad,clamp(6rem,12vh,10rem))}
.wrap{max-width:72rem;margin-inline:auto;padding-inline:clamp(1.25rem,4vw,3rem)}
.sechead{margin-bottom:clamp(2.5rem,5vw,4rem)}
.sechead h2{margin-top:.75rem}

/* ===== buttons ===== */
.btn{display:inline-block;border:none;border-radius:2px;padding:.85rem 1.7rem;font:600 .9375rem var(--txt);text-decoration:none;transition:transform .2s ease-out,filter .2s ease-out;text-align:center}
.btn:hover{transform:translateY(-1px);filter:brightness(.96)}
.btn:active{transform:translateY(0);filter:brightness(.9)}
.btn-fill{background:var(--ac);color:var(--ctatx)}
.btn-ghost{background:transparent;color:var(--txac);border:1px solid currentColor}
.btn-ink{background:var(--ink);color:#FAF7F2}
.btn-gold{background:transparent;color:var(--gold);border:1px solid var(--gold)}
.btn-gold:hover{background:var(--gold);color:#141210;filter:none}
a.tlink{color:var(--txac);text-decoration:none;border-bottom:2px solid transparent;transition:border-color .2s ease-out}
a.tlink:hover{border-color:var(--txac)}

/* ===== nav landing ===== */
.lnav{position:sticky;top:0;z-index:40;background:rgba(250,247,242,.94);backdrop-filter:blur(6px);border-bottom:1px solid rgba(20,18,16,.08)}
.lnav .wrap{display:flex;align-items:center;gap:1.5rem;padding-block:.7rem}
.lnav img{height:34px;width:auto}
.lnav .links{display:flex;gap:1.3rem;margin-left:auto;align-items:center}
.lnav .links a{font:500 .8125rem var(--txt);text-decoration:none;color:var(--ink);border-bottom:2px solid transparent;transition:border-color .2s}
.lnav .links a:hover{border-color:var(--ac)}
.lnav .links a.btn{color:var(--ctatx)} /* kalahkan .lnav .links a - kontras token ctatx (putih di hijau/maroon) */
.lnav .btn{padding:.5rem 1rem;font-size:.8125rem}
.langbtn{background:none;border:1px solid rgba(20,18,16,.25);border-radius:2px;font:600 .75rem var(--txt);padding:.35rem .6rem;letter-spacing:.05em;color:var(--ink);transition:background .2s}
.langbtn:hover{background:rgba(20,18,16,.06)}

/* ===== hero ===== */
.hero{position:relative;overflow:hidden}
.hero .wrap{display:grid;grid-template-columns:7fr 5fr;gap:clamp(1.5rem,4vw,4rem);align-items:center;padding-block:clamp(4rem,10vh,7rem)}
.hero .lead{margin:1.5rem 0 2.2rem;max-width:34rem;color:var(--muted)}
.hero .ctas{display:flex;gap:1rem;flex-wrap:wrap}
.hero-panel{aspect-ratio:4/5;border-radius:2px;overflow:hidden;box-shadow:var(--shadow)}
.hero-panel img{width:100%;height:100%;object-fit:cover}
.kw{font-style:italic}
.theme-macbrame .kw{box-shadow:inset 0 -0.14em 0 var(--ac)}
.theme-florentine .kw{color:var(--ac)}
/* AT dark hero */
.hero-at{background:linear-gradient(160deg,#00521F 0%,#063D1B 100%);color:#fff}
.hero-at::before{content:'';position:absolute;inset:0;opacity:.06;background:
 repeating-linear-gradient(45deg,#F4CB4A 0 1px,transparent 1px 26px),
 repeating-linear-gradient(-45deg,#F4CB4A 0 1px,transparent 1px 26px)}
.hero-at .wrap{position:relative;grid-template-columns:1fr;max-width:56rem;text-align:center;justify-items:center}
.hero-at .eyebrow{color:#F4CB4A}
.hero-at .eyebrow::before{background:#F4CB4A}
.hero-at .lead{color:rgba(255,255,255,.82);margin-inline:auto}
/* XU typographic hero */
.hero-xu .wrap{grid-template-columns:7fr 5fr;position:relative;z-index:1}
.x3{font-style:normal;color:#006B85}
.minitable{border-collapse:collapse;background:var(--card);box-shadow:var(--shadow);border-radius:2px;width:100%;font-size:.875rem}
.minitable caption{caption-side:top;text-align:left;font:600 .75rem var(--txt);letter-spacing:.18em;text-transform:uppercase;color:#006B85;padding-bottom:.6rem}
.minitable th,.minitable td{padding:.6rem .9rem;text-align:left;border-bottom:1px solid rgba(20,18,16,.08)}
.minitable thead th{background:#141210;color:#FAF7F2;font:600 .75rem var(--txt);letter-spacing:.06em}
.minitable thead th:last-child{color:#00B4D8}
.minitable td strong{color:#006B85}

/* ===== USP ===== */
.uspgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:clamp(1rem,2vw,2rem)}
.usp{background:var(--card);border-radius:2px;padding:1.6rem 1.4rem;box-shadow:var(--shadow);transition:transform .2s ease-out}
.usp:hover{transform:translateY(-3px)}
.usp svg{width:26px;height:26px;stroke:var(--txac);stroke-width:1.5;fill:none;margin-bottom:.9rem}
.usp h3{font:600 .9375rem var(--txt);margin-bottom:.3rem}
.usp p{font-size:.875rem;color:var(--muted)}

/* ===== metrics band (Mac) ===== */
.metrics{background:#141210;color:#FAF7F2}
.metrics .wrap{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;padding-block:clamp(3.5rem,8vh,5.5rem);text-align:center}
.metrics .num{font-family:var(--disp);font-weight:500;font-size:clamp(2.5rem,5vw,4rem);font-variant-numeric:tabular-nums;color:#FF7E00}
.metrics .num::after{content:'';display:block;width:4px;height:4px;background:#FBCF0C;margin:.5rem auto 0}
.metrics .lbl{font:500 .8125rem var(--txt);letter-spacing:.12em;text-transform:uppercase;color:rgba(250,247,242,.65)}

/* ===== katalog ===== */
.cattitle{font-family:var(--disp);font-weight:600;font-size:1.5rem;color:var(--txac);margin:3rem 0 1.2rem;display:flex;align-items:baseline;gap:.8rem}
.cattitle::after{content:'';flex:1;height:1px;background:rgba(20,18,16,.1)}
.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:clamp(1rem,2vw,2rem)}
.pcard{background:var(--card);border-radius:2px;box-shadow:var(--shadow);cursor:pointer;transition:transform .2s ease-out;overflow:hidden}
.theme-florentine .pcard{border-top:3px solid var(--ac)}
.theme-altahaani .pcard{border:1px solid rgba(0,82,31,.15)}
.pcard:hover{transform:translateY(-3px)} /* guard #4: shadow tetap var(--shadow) */
.pcard:active{transform:scale(.99)}
.pimg{aspect-ratio:4/5;overflow:hidden;position:relative}
.pimg img{width:100%;height:100%;object-fit:cover}
.tcard{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.6rem;padding:1rem;text-align:center;background:linear-gradient(165deg,var(--bg) 0%,#F1EBE1 100%)}
.tcard::before{content:'';width:28px;height:2px;background:var(--ac)}
.tcard .tn{font-family:var(--disp);font-weight:600;font-size:1.45rem;line-height:1.15;color:var(--ink)}
.tcard .tc{font:500 .75rem var(--txt);letter-spacing:.14em;color:var(--muted)}
.pmeta{padding:.9rem 1rem 1rem;display:flex;justify-content:space-between;align-items:baseline;gap:.5rem}
.pmeta h4{font:600 .8125rem var(--txt);letter-spacing:.08em;text-transform:uppercase}
.pmeta .pcode{font:400 .75rem var(--txt);color:var(--muted);white-space:nowrap}
.katcta{margin-top:3rem;text-align:center}

/* ===== mood ===== */
.moodgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,2vw,2rem)}
.mood{aspect-ratio:4/5;border-radius:2px;position:relative;overflow:hidden}
.mood .cap{position:absolute;left:1rem;bottom:.9rem;color:rgba(255,255,255,.85);font-size:.75rem;letter-spacing:.06em}
.theme-macbrame .mood{background:linear-gradient(160deg,#A84A00 0%,#141210 90%)}
.theme-altahaani .mood{background:linear-gradient(160deg,#00521F 0%,#0B0E0A 90%)}
.theme-xultimate .mood{background:linear-gradient(160deg,#006B85 0%,#0A0A0A 90%)}
.theme-florentine .mood{background:linear-gradient(160deg,#870000 0%,#1A0505 90%)}
.mood::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 70% 25%,rgba(255,255,255,.16),transparent 55%)}

/* ===== banner tematik (Mac) ===== */
.temagrid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(1rem,2vw,2rem)}
.tema{border-radius:2px;overflow:hidden;box-shadow:var(--shadow);aspect-ratio:16/9;position:relative}
.tema img{width:100%;height:100%;object-fit:cover}
.tema.ph{background:linear-gradient(150deg,#F1EBE1,#E4DCCE);display:flex;align-items:center;justify-content:center}
.tema.ph span{font-family:var(--disp);font-size:1.3rem;color:var(--muted);font-style:italic}

/* ===== FAQ ===== */
.faq{max-width:46rem;margin-inline:auto}
.acc{border-top:1px solid rgba(20,18,16,.12)}
.acc:last-child{border-bottom:1px solid rgba(20,18,16,.12)}
.acc-q{width:100%;background:none;border:none;text-align:left;display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1.2rem .2rem;font:500 1.05rem var(--txt);color:var(--ink);transition:color .2s}
.acc-q:hover{color:var(--txac)}
.acc-q .ic{font-family:var(--disp);font-size:1.5rem;line-height:1;transition:transform .25s ease-out;color:var(--txac)}
.acc.open .ic{transform:rotate(45deg)}
/* guard #11: buka tanpa animasi tinggi - hanya fade opacity; tanpa cap tinggi (jawaban panjang aman) */
.acc-a{display:none}
.acc.open .acc-a{display:block;animation:accfade .3s ease-out}
@keyframes accfade{from{opacity:0}to{opacity:1}}
.acc-a p{padding:0 .2rem 1.3rem;color:var(--muted)}

/* ===== blog teaser & pages ===== */
.bgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:clamp(1rem,2vw,2rem)}
.bcard{background:var(--card);border-radius:2px;box-shadow:var(--shadow);padding:1.7rem 1.5rem;display:flex;flex-direction:column;gap:.7rem;text-decoration:none;transition:transform .2s ease-out}
a.bcard:hover{transform:translateY(-3px)}
.bcard .bk{font:600 .6875rem var(--txt);letter-spacing:.18em;text-transform:uppercase;color:var(--txac)}
.bcard h3{font-family:var(--disp);font-weight:600;font-size:1.4rem;line-height:1.2}
.bcard .cap{margin-top:auto}
.bcard.soon{cursor:default} /* tanpa opacity container (AA); pola prototype-only - draft tidak dirender publik saat build */
.article{max-width:44rem;margin-inline:auto}
.article .h2{margin:.8rem 0 .4rem}
.article p{margin-bottom:1.4rem}
.article .atable{width:100%;border-collapse:collapse;margin:2rem 0;font-size:.9375rem;background:var(--card);box-shadow:var(--shadow)}
.article .atable th,.article .atable td{padding:.7rem 1rem;border:1px solid rgba(20,18,16,.1);text-align:left}
.article .atable thead th{background:#141210;color:#FAF7F2;font:600 .8125rem var(--txt)}
.tablewrap{overflow-x:auto}

/* ===== liputan / press ===== */
/* strip nama media = TEKS ter-styling (guard: nol logo pihak-ketiga, kita tak punya lisensinya) */
.presswall{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;row-gap:.55rem;margin-bottom:clamp(2.5rem,5vw,3.5rem)}
.presswall span{font:600 .75rem var(--txt);letter-spacing:.13em;text-transform:uppercase;color:var(--muted);display:inline-flex;align-items:center;white-space:nowrap}
.presswall span:not(:last-child)::after{content:'';width:1px;height:11px;background:rgba(20,18,16,.18);margin:0 .95rem}
.presslist{max-width:52rem;margin-inline:auto;border-top:1px solid rgba(20,18,16,.1)}
.pressrow{display:grid;grid-template-columns:1fr auto;column-gap:1rem;row-gap:.3rem;padding:1.15rem .3rem;border-bottom:1px solid rgba(20,18,16,.1);text-decoration:none;transition:transform .2s ease-out} /* geser halus = transform-only (guard #11) */
.pressrow .pr-head{grid-column:1;grid-row:1;display:flex;align-items:baseline;gap:.5rem;flex-wrap:wrap}
.pr-media{font:600 .8125rem var(--txt);letter-spacing:.02em;color:var(--txac)}
.pr-dot{color:var(--muted)}
.pr-period{font:500 .6875rem var(--txt);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.pr-title{grid-column:1;grid-row:2;justify-self:start;font-family:var(--disp);font-weight:600;font-size:1.2rem;line-height:1.25;color:var(--ink);border-bottom:2px solid transparent;transition:border-color .2s ease-out}
.pr-arrow{grid-column:2;grid-row:1 / span 2;align-self:center;width:18px;height:18px;stroke:var(--txac);stroke-width:1.75;fill:none;flex:none;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s ease-out}
.pressrow:hover{transform:translateX(5px)}
.pressrow:hover .pr-title{border-color:var(--txac)}
.pressrow:hover .pr-arrow{transform:translate(3px,-3px)}

/* ===== contact CTA ===== */
.contact{background:var(--card)}
.contact .wrap{text-align:center;max-width:46rem}
.contact .ctas{display:flex;justify-content:center;gap:1rem;margin-top:2.2rem;flex-wrap:wrap}

/* ===== footer ===== */
.foot{background:#141210;color:rgba(250,247,242,.8)}
.foot .wrap{display:grid;grid-template-columns:2fr 1.5fr 1.5fr 1fr;gap:2.5rem;padding-block:clamp(3.5rem,8vh,5rem)}
.foot h5{font:600 .6875rem var(--txt);letter-spacing:.18em;text-transform:uppercase;color:rgba(250,247,242,.5);margin-bottom:1rem}
.foot a{color:rgba(250,247,242,.85);text-decoration:none;border-bottom:1px solid transparent}
.foot a:hover{border-color:currentColor}
.foot ul{list-style:none;display:flex;flex-direction:column;gap:.55rem;font-size:.875rem}
.foot .fbrand{font-family:var(--disp);font-weight:600;font-size:1.6rem;color:#FAF7F2}
.foot .maharum{font-size:.8125rem;color:rgba(250,247,242,.55);margin-top:.6rem}
.foot .legal{border-top:1px solid rgba(250,247,242,.12)}
.foot .legal .wrap{display:flex;justify-content:space-between;gap:1rem;padding-block:1.1rem;font-size:.75rem;color:rgba(250,247,242,.55);flex-wrap:wrap} /* .55 = 5.86:1 AA di ink */
.foot .langbtn{border-color:rgba(250,247,242,.3);color:rgba(250,247,242,.85)}
.foot .langbtn:hover{background:rgba(250,247,242,.1)}

/* ===== FL gold wave divider ===== */
.wavediv{display:block;margin:0 auto;width:180px;height:14px}

/* ===== modal ===== */
#modal{position:fixed;inset:0;z-index:90;background:rgba(20,18,16,.55);display:none;align-items:center;justify-content:center;padding:1.25rem}
#modal.on{display:flex}
.mbox{background:#FAF7F2;border-radius:2px;max-width:56rem;width:100%;max-height:88vh;overflow:auto;position:relative;box-shadow:var(--shadow)} /* guard #4: separasi cukup dari scrim gelap */
.mclose{position:absolute;top:.7rem;right:.7rem;z-index:2;width:38px;height:38px;border:none;background:#141210;color:#FAF7F2;font-size:1.05rem;border-radius:2px;transition:filter .2s}
.mclose:hover{filter:brightness(1.4)}
.mgrid{display:grid;grid-template-columns:5fr 7fr}
.mimg{aspect-ratio:4/5;overflow:hidden}
.mimg img{width:100%;height:100%;object-fit:cover}
.mbody{padding:clamp(1.5rem,3vw,2.5rem)}
.mbody .code{font:500 .75rem var(--txt);letter-spacing:.14em;color:var(--muted)}
.mbody h3{font-family:var(--disp);font-weight:600;font-size:clamp(1.7rem,3vw,2.4rem);line-height:1.1;margin:.3rem 0 1.4rem}
.pyr{display:flex;flex-direction:column;align-items:center;gap:.5rem;margin:1.2rem 0}
.tier{border-radius:2px;padding:.55rem .9rem;text-align:center;font-size:.8125rem;background:var(--card);box-shadow:var(--shadow)}
.tier .tl{display:block;font:600 .625rem var(--txt);letter-spacing:.18em;text-transform:uppercase;color:var(--txac)}
.t1{width:62%}.t2{width:80%}.t3{width:100%}
.mbackdrop{font-size:.8125rem;color:var(--muted);font-style:italic;margin-top:1rem}

/* ===== responsive (container) ===== */
@container (max-width:760px){
  .hero .wrap,.hero-xu .wrap{grid-template-columns:1fr}
  .hero-panel{max-width:340px}
  .metrics .wrap{grid-template-columns:1fr;gap:2.2rem}
  .moodgrid{grid-template-columns:1fr}
  .temagrid{grid-template-columns:1fr}
  .foot .wrap{grid-template-columns:1fr;gap:2rem}
  .lnav .links a.anchor{display:none}
  .mgrid{grid-template-columns:1fr}
  .mimg{aspect-ratio:16/10}
}

/* ===== fade-up ===== */
.fu{opacity:0;transform:translateY(24px);transition:opacity .7s cubic-bezier(.22,1,.36,1),transform .7s cubic-bezier(.22,1,.36,1)}
.fu.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .fu{opacity:1;transform:none;transition:none}
  *{transition-duration:.01ms!important;animation:none!important}
}