/* Latar kanvas halaman: tampak saat overscroll elastis (macOS/iOS).
   Wajib sama dengan base brand, bukan warna kanvas prototype. */
:root{--page-bg:#FAF7F2;color-scheme:light}

/* style.css - CSS brand Al-Tahaani (theme-altahaani), di-port dari
   prototype/layouts/altahaani.py (blok CSS). Namespace .theme-altahaani dipertahankan.
   Foundation bersama (reset, token brand, .view, .btn, .pcard, #modal, .foot, .fu, dsb)
   ada di ../shared/base.css yang dimuat lebih dulu. File ini hanya berisi override khas
   Al-Tahaani. CSS khusus prototype (prototype-bar, body.mobile) sengaja TIDAK disertakan. */

/* ===== tokens & tipografi khas Al-Tahaani ===== */
.theme-altahaani{
  --disp:'Amiri',Georgia,'Times New Roman',serif;
  --txt:'Mulish',-apple-system,'Segoe UI',Helvetica,Arial,sans-serif;
  --at-green:#00521F; --at-dark:#063D1B; --at-gold:#F4CB4A; --at-krem:#FAF7F2;
  --sec-pad:clamp(5rem,10vh,8.5rem); /* ritme sedang (antara XU rapat & FL lapang) */
}
/* Amiri hanya 400/700 -> display type minta bobot yang ADA (bukan 500/600 disintesis) */
.theme-altahaani .h-disp,.theme-altahaani h2.h2{font-weight:700}
.theme-altahaani .at-eb{font:600 .75rem var(--txt);text-transform:uppercase;letter-spacing:.2em;color:var(--at-green);display:inline-block}
.theme-altahaani .at-eb-g{font:600 .75rem var(--txt);text-transform:uppercase;letter-spacing:.2em;color:var(--at-gold);display:inline-block}

/* ===== nav split, logo di tengah, ceremonial ===== */
.theme-altahaani .at-nav{position:sticky;top:0;z-index:40;background:rgba(6,61,27,.94);backdrop-filter:blur(8px);border-bottom:1px solid rgba(244,203,74,.42)}
.theme-altahaani .at-nav .wrap{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:1rem;padding-block:.5rem}
.theme-altahaani .at-nav-left{justify-self:start;display:flex;gap:1.4rem;align-items:center}
.theme-altahaani .at-nav-logo{justify-self:center;display:flex;align-items:center}
/* logo brand di nav hijau gelap = versi EMAS via CSS mask (emblem persegi asli hijau tua tak terlihat).
   emblem 320x320 -> massa visual kecil, jadi diperbesar optis 54px (vs wordmark brand lain ~44px).
   margin-block negatif = optical overhang: logo mengisi nav penuh tanpa membuat bar jadi tinggi. */
.theme-altahaani .brandlogo{--logo-ink:#F4CB4A;display:block;height:54px;aspect-ratio:320/320;width:auto;margin-block:-.5rem;
  background-color:var(--logo-ink);
  -webkit-mask:var(--logo-src) center/contain no-repeat;
          mask:var(--logo-src) center/contain no-repeat}
.theme-altahaani .brandlogo-fb{display:none}
/* fallback bila mask tak didukung: tampilkan img asli diputihkan agar tetap terlihat di hijau gelap */
@supports not ((-webkit-mask:url(#a)) or (mask:url(#a))){
  .theme-altahaani .brandlogo{display:none}
  .theme-altahaani .brandlogo-fb{display:block;height:52px;width:auto;filter:brightness(0) invert(1)}
}
.theme-altahaani .at-nav-right{justify-self:end;display:flex;gap:1.1rem;align-items:center}
.theme-altahaani .at-link{font:600 .8125rem var(--txt);letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.9);text-decoration:none;border-bottom:1px solid transparent;transition:color .2s,border-color .2s}
.theme-altahaani .at-link:hover{color:var(--at-gold);border-color:var(--at-gold)}
.theme-altahaani .at-nav .langbtn{border-color:rgba(244,203,74,.5);color:rgba(255,255,255,.92);background:none}
.theme-altahaani .at-nav .langbtn:hover{background:rgba(244,203,74,.12)}

/* ===== hero full-bleed gelap immersive ===== */
.theme-altahaani .at-hero{position:relative;min-height:88vh;display:flex;align-items:center;overflow:hidden;color:#fff}
.theme-altahaani .at-hero-bg{position:absolute;inset:0;z-index:0}
.theme-altahaani .at-hero-bg img{width:100%;height:100%;object-fit:cover;filter:grayscale(.3) contrast(1.03)}
.theme-altahaani .at-hero-duo{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(6,61,27,.72),rgba(6,61,27,.58)),radial-gradient(ellipse at 50% 38%,rgba(0,82,31,.32),rgba(6,61,27,.86))}
.theme-altahaani .at-hero-pat{position:absolute;inset:0;z-index:2;opacity:.06;mix-blend-mode:soft-light;background-repeat:repeat}
.theme-altahaani .at-hero .wrap{position:relative;z-index:3;max-width:56rem;margin-inline:auto;text-align:center}
.theme-altahaani .at-hero h1{color:#fff;margin-top:1.2rem}
.theme-altahaani .at-hero .lead{color:rgba(255,255,255,.85);margin:1.6rem auto 2.4rem;max-width:42rem}
.theme-altahaani .at-hero .ctas{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}
.theme-altahaani .at-hero .at-wa{color:#fff;border:1px solid rgba(255,255,255,.4);background:none}
.theme-altahaani .at-hero .at-wa:hover{border-color:#fff;filter:none;background:rgba(255,255,255,.08)}
.theme-altahaani .at-scrollcue{margin:2.6rem auto 0;width:1px;height:46px;background:linear-gradient(rgba(244,203,74,.85),transparent)}
/* ===== lockup brand di hero: emblem emas besar + hairline (editorial, nol glow/bevel/gradien) =====
   emblem emas 320x320 di atas hijau gelap = kehadiran brand megah tanpa norak. */
.theme-altahaani .at-hero-mark{--logo-ink:#F4CB4A;display:block;margin:0 auto;height:clamp(88px,12vw,168px);aspect-ratio:320/320;width:auto;
  background-color:var(--logo-ink);
  -webkit-mask:var(--logo-src) center/contain no-repeat;
          mask:var(--logo-src) center/contain no-repeat}
.theme-altahaani .at-hero-mark-fb{display:none}
@supports not ((-webkit-mask:url(#a)) or (mask:url(#a))){
  .theme-altahaani .at-hero-mark{display:none}
  .theme-altahaani .at-hero-mark-fb{display:block;margin:0 auto;height:clamp(88px,12vw,168px);width:auto;filter:brightness(0) invert(1)}
}
.theme-altahaani .at-hero-rule{display:block;width:72px;height:1px;background:rgba(244,203,74,.7);margin:clamp(1.2rem,2.8vw,1.9rem) auto clamp(1rem,2.4vw,1.5rem)}
/* jalur fallback img emas->putih: dipakai saat mask-image tak bisa dimuat (mis. file:// diblokir CORS).
   Di hosting http(s) same-origin, CSS mask emas di atas yang aktif. */
.theme-altahaani .brandlogo-fb.at-fb-nav{display:block;height:54px;width:auto;filter:brightness(0) invert(1)}
.theme-altahaani .at-hero-mark-fb.at-fb-hero{display:block;margin:0 auto;height:clamp(88px,12vw,168px);width:auto;filter:brightness(0) invert(1)}

/* ===== narasi warisan (krem) ===== */
.theme-altahaani .at-heritage{background:var(--at-krem)}
.theme-altahaani .at-heritage .wrap{display:grid;grid-template-columns:minmax(0,60ch) 300px;gap:clamp(2rem,5vw,4rem);align-items:center;max-width:64rem}
.theme-altahaani .at-heritage .body{text-align:left}
.theme-altahaani .at-heritage h2{margin:.7rem 0 .4rem}
.theme-altahaani .at-heritage p{color:var(--muted);font-size:1.0625rem}
.theme-altahaani .at-heritage p.drop::first-letter{font-family:var(--disp);font-weight:700;font-size:3.2em;line-height:.78;float:left;color:var(--at-green);margin:.08em .12em 0 0}
.theme-altahaani .at-accent{aspect-ratio:3/4;overflow:hidden;position:relative;border-radius:2px}
.theme-altahaani .at-accent img{width:100%;height:100%;object-fit:cover;filter:grayscale(.35) contrast(1.03)}
.theme-altahaani .at-accent::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,82,31,.35),rgba(6,61,27,.55))}
.theme-altahaani .at-divider{display:flex;align-items:center;justify-content:center;gap:.7rem;margin:.6rem auto 0}
.theme-altahaani .at-divider span{height:1px;width:64px;background:rgba(0,82,31,.28)}
.theme-altahaani .at-divider i{width:9px;height:9px;transform:rotate(45deg);background:var(--at-gold);opacity:.85}

/* ===== USP - baris bermotif belah-ketupat gold (TANPA kartu shared) ===== */
.theme-altahaani .at-usplist{display:grid;grid-template-columns:repeat(2,1fr)}
.theme-altahaani .at-usp-item{display:grid;grid-template-columns:auto 1fr;gap:1rem;align-items:start;
  padding:1.5rem 1.3rem;border-top:1px solid rgba(0,82,31,.16)}
.theme-altahaani .at-usp-item .dmd{width:10px;height:10px;transform:rotate(45deg);background:var(--at-gold);margin-top:.5rem;flex:none}
.theme-altahaani .at-usp-item h3{font-family:var(--disp);font-weight:700;font-size:1.3rem;line-height:1.15;color:var(--at-green);margin-bottom:.3rem}
.theme-altahaani .at-usp-item p{font-size:.9rem;color:var(--muted)}

/* ===== band bahan baku full-bleed duotone hijau bernama ===== */
.theme-altahaani .at-band-bahan{position:relative;isolation:isolate;overflow:hidden;background:var(--at-dark);color:#fff;padding-block:clamp(4rem,9vh,7rem)}
/* latar fotografis rempah (macro cinnamon+anise) - mengubah band dari warna rata jadi berkedalaman.
   scrim gelap 0.86->0.92: teks bandhead putih ~10:1 & eyebrow emas ~7:1 pada area terterang foto (AA lulus). */
.theme-altahaani .at-band-bahan-bg{position:absolute;inset:0;z-index:0}
.theme-altahaani .at-band-bahan-bg img{width:100%;height:100%;object-fit:cover;filter:grayscale(.32) contrast(1.06)}
.theme-altahaani .at-band-bahan-bg::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,61,27,.86),rgba(3,26,12,.92))}
.theme-altahaani .at-band-bahan>.bandhead,.theme-altahaani .at-band-bahan>.at-bahan-grid{position:relative;z-index:1}
.theme-altahaani .at-band-bahan .bandhead{text-align:center;max-width:44rem;margin:0 auto clamp(2rem,4vw,3rem);padding-inline:clamp(1.25rem,4vw,3rem)}
.theme-altahaani .at-band-bahan .bandhead h2{color:#fff;margin-top:.6rem}
.theme-altahaani .at-bahan-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:2px}
.theme-altahaani .at-bahan-cell{position:relative;height:380px;overflow:hidden}
.theme-altahaani .at-bahan-cell img{width:100%;height:100%;object-fit:cover;filter:saturate(1.1) brightness(1.06) contrast(1.04)}
/* scrim tipis di atas (10-14% hijau -> bahan baku terlihat warna asli), pekat hanya di dasar tempat label duduk.
   diukur: teks putih di atas dasar ~64-76% overlay = min ~5.3:1 (bahkan atas bahan paling terang), AA lulus */
.theme-altahaani .at-bahan-cell .ov{position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,61,27,.10) 0%,rgba(6,61,27,.14) 42%,rgba(3,26,12,.82) 100%)}
.theme-altahaani .at-bahan-cell .nm{position:absolute;left:0;right:0;bottom:1.3rem;z-index:2;text-align:center;color:#fff;font-family:var(--disp);font-size:1.7rem;letter-spacing:.02em}
.theme-altahaani .at-bahan-cell .nm::after{content:'';display:block;width:26px;height:2px;background:var(--at-gold);opacity:.75;margin:.5rem auto 0}

/* ===== katalog per-keluarga (bab koleksi) ===== */
.theme-altahaani .at-catalog{background:var(--at-krem)}
.theme-altahaani .at-chapter{display:grid;grid-template-columns:220px 1fr;gap:clamp(1.5rem,4vw,3rem);align-items:start;padding-block:clamp(2rem,4vw,3rem);border-top:1px solid rgba(0,82,31,.14)}
.theme-altahaani .at-chapter-label{position:sticky;top:88px}
.theme-altahaani .at-chapter-label .tick{display:block;width:10px;height:10px;transform:rotate(45deg);background:var(--at-gold);opacity:.9;margin-bottom:.7rem}
.theme-altahaani .at-chapter-label .fam{font-family:var(--disp);font-weight:700;font-size:clamp(1.9rem,4cqw,2.7rem);color:var(--at-green);line-height:1.08}
.theme-altahaani .at-chapter-label .fc{display:block;font:500 .75rem var(--txt);letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-top:.5rem}
.theme-altahaani .at-chapter-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:clamp(1rem,2vw,1.6rem)}

/* ===== band kutipan HIJAU penuh (satu-satunya color band) ===== */
.theme-altahaani .at-quote{position:relative;background:var(--at-green);color:#fff;overflow:hidden}
.theme-altahaani .at-quote-bg{position:absolute;inset:0;z-index:0;opacity:.12}
.theme-altahaani .at-quote-bg img{width:100%;height:100%;object-fit:cover;filter:grayscale(.6)}
.theme-altahaani .at-quote-pat{position:absolute;inset:0;z-index:1;opacity:.06;mix-blend-mode:soft-light;background-repeat:repeat}
/* asap dupa (bakhoor) di sisi kanan - mood band gelap, senada teks kutipan soal "asap bakhoor".
   di-mask fade dari kiri (transparan) sehingga tak menyentuh kolom teks kiri; scrim hijau menjamin
   sisi kiri tetap #00521F pekat -> teks putih ~9.4:1 & emas ~6:1 (AA lulus, tak tergantung foto). */
.theme-altahaani .at-quote-smoke{position:absolute;top:0;right:0;bottom:0;width:62%;z-index:1;opacity:.6;pointer-events:none;
  -webkit-mask:linear-gradient(90deg,transparent,#000 46%);mask:linear-gradient(90deg,transparent,#000 46%)}
.theme-altahaani .at-quote-smoke img{width:100%;height:100%;object-fit:cover;object-position:center right}
.theme-altahaani .at-quote-scrim{position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,var(--at-green) 0%,rgba(0,82,31,.72) 40%,rgba(0,82,31,0) 70%)}
/* komposisi asimetris rata-kiri + rule gold (BEDA dari band sampul terpusat Florentine) */
.theme-altahaani .at-quote .wrap{position:relative;z-index:2;text-align:left;max-width:72rem}
.theme-altahaani .at-quote .qwrap{max-width:40rem;margin-left:0;border-left:2px solid var(--at-gold);
  padding-left:clamp(1.3rem,4vw,2.6rem)}
.theme-altahaani .at-quote .qt{font-family:var(--disp);font-style:italic;font-size:clamp(1.6rem,1rem+2.4cqw,2.6rem);line-height:1.32;margin:1.1rem 0 1.4rem}
.theme-altahaani .at-quote .qby{font:600 .8125rem var(--txt);letter-spacing:.14em;text-transform:uppercase;color:var(--at-gold)}

/* ===== liputan media (surface terang, logo grayscale, tanpa eyebrow) ===== */
.theme-altahaani .at-press{background:var(--at-krem)}
.theme-altahaani .at-press .sechead{text-align:center}
.theme-altahaani .at-press-card{background:#fff;border-block:1px solid rgba(0,82,31,.12);padding:clamp(1.6rem,4vw,2.6rem) clamp(1rem,3vw,2rem);margin-bottom:clamp(2.5rem,5vw,3.5rem)}
.theme-altahaani .at-press-logos{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;column-gap:clamp(2.25rem,5vw,3.25rem);row-gap:1.5rem}
.theme-altahaani .at-press-logos img{height:40px;width:auto;max-width:150px;object-fit:contain;filter:grayscale(1);opacity:.62;transition:filter .2s ease-out,opacity .2s ease-out}
.theme-altahaani .at-press-logos img.is-icon{height:32px}
.theme-altahaani .at-press-logos img:hover,.theme-altahaani .at-press-logos img:focus{filter:grayscale(0);opacity:1}
.theme-altahaani .at-logo-fallback{font:600 .75rem var(--txt);letter-spacing:.13em;text-transform:uppercase;color:var(--muted);display:inline-flex;align-items:center;height:40px}

/* ===== footer varian gelap hijau ===== */
.theme-altahaani + #modal,.theme-altahaani .foot{--at-x:0}

/* ===== bottom sections - bahasa divider belah-ketupat gold (beda dari XU hairline & FL editorial) ===== */
/* blog */
.theme-altahaani .bcard{background:#fff;box-shadow:none;border:1px solid rgba(0,82,31,.14);border-top:none;padding-top:2rem;position:relative}
.theme-altahaani .bcard::before{content:'';position:absolute;top:0;left:1.5rem;width:12px;height:12px;transform:translateY(-50%) rotate(45deg);background:var(--at-gold)}
.theme-altahaani .bcard .bk{color:var(--at-green)}
.theme-altahaani .bcard h3{font-family:var(--disp);font-weight:700;color:var(--at-green)}
.theme-altahaani a.bcard:hover{transform:translateY(-3px)}
/* press rows */
.theme-altahaani .presslist{border-top:none;max-width:60rem}
.theme-altahaani .pressrow{border-bottom:none;position:relative;padding-left:1.9rem}
.theme-altahaani .pressrow:not(:last-child)::after{content:'';position:absolute;left:1.9rem;right:.3rem;bottom:0;height:1px;background:rgba(0,82,31,.14)}
.theme-altahaani .pressrow::before{content:'';position:absolute;left:.35rem;top:1.5rem;width:9px;height:9px;transform:rotate(45deg);background:var(--at-gold);opacity:.85}
.theme-altahaani .pr-title{font-family:var(--disp);font-weight:700;color:var(--at-green)}
.theme-altahaani .pressrow:hover .pr-title{border-color:var(--at-gold)}
/* accordion: marker belah-ketupat + pertanyaan serif */
.theme-altahaani .acc{border-top-color:rgba(0,82,31,.16)}
.theme-altahaani .acc:last-child{border-bottom-color:rgba(0,82,31,.16)}
.theme-altahaani .acc-q{font-family:var(--disp);font-weight:700;font-size:1.2rem;color:var(--at-green)}
.theme-altahaani .acc-q .ic{color:var(--at-gold)}
/* contact: penutup gelap immersive (bookend hero) - arch marmer masjid + duotone hijau.
   scrim 0.88->0.93 di atas foto TERANG (marmer putih) -> teks putih ~8.3:1 & emas ~5:1 (AA lulus). */
.theme-altahaani .contact{position:relative;isolation:isolate;overflow:hidden;background:var(--at-dark)}
.theme-altahaani .contact-bg{position:absolute;inset:0;z-index:0}
.theme-altahaani .contact-bg img{width:100%;height:100%;object-fit:cover;filter:grayscale(.28) contrast(1.03)}
.theme-altahaani .contact-bg::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,61,27,.88),rgba(3,26,12,.93))}
.theme-altahaani .contact .wrap{position:relative;z-index:1}
.theme-altahaani .contact .wrap::before{content:'';display:block;width:11px;height:11px;transform:rotate(45deg);background:var(--at-gold);margin:0 auto 1.4rem}
.theme-altahaani .contact h2{color:#fff}
.theme-altahaani .contact .btn-ghost{color:#fff;border-color:rgba(255,255,255,.5)}
.theme-altahaani .contact .btn-ghost:hover{border-color:#fff;background:rgba(255,255,255,.08)}

/* ===== responsive (container-query, sinkron dgn .view) ===== */
@container (max-width:760px){
  .theme-altahaani .at-usplist{grid-template-columns:1fr}
  .theme-altahaani .at-nav .wrap{grid-template-columns:1fr auto;gap:.6rem}
  .theme-altahaani .at-nav-left{display:none}
  .theme-altahaani .at-nav-logo{justify-self:start}
  /* emblem persegi turun proporsional di mobile (spec: ~40px) */
  .theme-altahaani .brandlogo{height:40px;margin-block:-.3rem}
  .theme-altahaani .brandlogo-fb{height:38px}
  .theme-altahaani .brandlogo-fb.at-fb-nav{height:40px}
  .theme-altahaani .at-heritage .wrap{grid-template-columns:1fr}
  .theme-altahaani .at-accent{max-width:280px;margin-inline:auto}
  .theme-altahaani .at-bahan-grid{grid-template-columns:repeat(2,1fr)}
  .theme-altahaani .at-bahan-cell{height:240px}
  /* kolom kutipan menyempit di mobile -> matikan asap agar tak menyentuh teks (scrim tetap aman) */
  .theme-altahaani .at-quote-smoke{display:none}
  .theme-altahaani .at-chapter{grid-template-columns:1fr;gap:1rem}
  .theme-altahaani .at-chapter-label{position:static;top:auto}
  .theme-altahaani .at-press-logos img{height:30px}
  .theme-altahaani .at-press-logos img.is-icon{height:26px}
  .theme-altahaani .at-logo-fallback{height:30px}
}
@container (max-width:460px){
  .theme-altahaani .at-bahan-cell .nm{font-size:1.3rem}
}