/* ==========================================================================
   ResepPraktis — Tema "Hijau Daun Pisang & Krem"
   Semua warna & font terpusat di sini (design tokens). Template tidak boleh
   menulis hex langsung. Dimuat SETELAH <style> bawaan header.php agar
   menimpa token lama tanpa menyentuh struktur.
   ========================================================================== */

/* ---------- Font (self-hosted, CSP font-src 'self') ---------- */
@font-face{
  font-family:'DM Serif Display';
  src:url('/assets/fonts/DMSerifDisplay-400.woff2') format('woff2');
  font-weight:400;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Inter';
  src:url('/assets/fonts/Inter-400.woff2') format('woff2');
  font-weight:100 900;font-style:normal;font-display:swap;
}

/* ---------- Design tokens (spesifikasi) ---------- */
:root{
  --c-primary:#2F5D34;      /* hijau daun pisang */
  --c-primary-dark:#1E3B22; /* hijau tua */
  --c-bg:#F3EEDF;           /* krem latar halaman */
  --c-bg-alt:#E6DEC6;       /* krem tua (panel) */
  --c-gold:#7C631F;         /* emas label kecil (dr #D9C27A/#A8862A: 4.94:1 AA teks, antislop R-25) */
  --c-text:#1E3B22;
  --c-text-muted:#5E6B55;
  --c-line:#D6CCB0;
  --c-chip-border:#8E8568;  /* chip border (dr #BFB596: 1.76 -> 3.2+/AA non-text, antislop R-25) */
  --f-head:'DM Serif Display',Georgia,serif;
  --f-body:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --radius-pill:999px;
  --radius-card-arch:999px 999px 0 0;
  --container:1280px;
  --gap:24px;

  /* --- remap token lama (dipakai semua template) --- */
  --bg:var(--c-bg);
  --surface:#FFFDF6;
  --cream:var(--c-bg-alt);
  --ink:var(--c-text);
  --muted:var(--c-text-muted);
  --line:var(--c-line);
  --green:var(--c-primary);
  --green-d:var(--c-primary-dark);
  --yellow:var(--c-gold);
  --primary:var(--c-primary);
  --primary-d:#26492B;
  --primary-text:var(--c-primary);
  --shadow:0 2px 10px rgba(30,59,34,.07);
  --shadow-lg:0 14px 34px rgba(30,59,34,.14);
}

/* ---------- Dasar tipografi & layout ---------- */
body{font-family:var(--f-body);background:var(--c-bg);color:var(--c-text)}
h1,h2,h3,h1.sect,h2.sect,.logo{font-family:var(--f-head);font-weight:400;letter-spacing:.2px}
.wrap{max-width:var(--container);padding:0 24px}
@media(max-width:640px){.wrap{padding:0 16px}}

/* ---------- Header ---------- */
header.site{background:var(--c-bg);border-bottom:1px solid var(--c-line);box-shadow:none}
.hbar{padding:16px 0 12px}
nav.main{gap:6px;padding-bottom:14px}
nav.main a{background:transparent;border:1px solid transparent;color:var(--c-text-muted);border-radius:var(--radius-pill);font-weight:600;font-size:14px}
nav.main a:hover{background:var(--c-bg-alt);color:var(--c-primary-dark);border-color:var(--c-line)}
nav.main a.active{background:var(--c-primary);color:#fff;border-color:var(--c-primary)}
.searchf{background:var(--c-bg-alt);border:1px solid var(--c-line);border-radius:var(--radius-pill)}
.searchf button{background:var(--c-primary);border-radius:var(--radius-pill);margin:3px;font-weight:700}
.searchf button:hover{background:var(--primary-d)}
.sug{border-radius:18px;border-color:var(--c-line)}

/* ---------- Judul section ---------- */
h1.sect,h2.sect{font-size:clamp(24px,2.6vw,38px);gap:12px;margin:30px 0 16px}
h1.sect:before,h2.sect:before{width:0;height:0;background:none}
.sec-ic{color:var(--c-primary)}
.sec-ic.star{color:var(--c-gold)}

/* ---------- Hero beranda ---------- */
section.hero{position:relative;isolation:isolate;min-height:640px;display:flex;align-items:center;margin:0 0 0;background:var(--c-primary-dark);overflow:hidden}
section.hero .hero-bg{position:absolute;inset:0;background-size:cover;background-position:center;z-index:-2}
section.hero::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(20,45,24,.55) 0%,rgba(20,45,24,.72) 55%,rgba(20,45,24,.88) 100%)}
section.hero .hero-in{padding:96px 24px 88px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:18px}
section.hero .hero-logo{height:44px;width:auto}
section.hero .hero-label{font-size:12px;font-weight:700;letter-spacing:3px;text-transform:uppercase;color:var(--c-gold)}
section.hero h1{font-family:var(--f-head);font-weight:400;color:#F7F3E6;font-size:clamp(40px,6vw,84px);line-height:1.04;max-width:900px}
section.hero .hero-sub{color:#E9E3D2;font-size:clamp(15px,1.2vw,17px);line-height:1.7;max-width:680px}
section.hero .hero-sub strong{color:#fff;font-weight:600}
section.hero .hero-search{display:flex;width:min(600px,100%);height:60px;background:#FBF8EF;border-radius:var(--radius-pill);overflow:hidden;border:1px solid var(--c-line);margin-top:6px}
section.hero .hero-search input{flex:1;border:0;background:transparent;padding:0 22px;font-size:16px;font-family:inherit;color:var(--c-text);outline:none;min-width:0}
section.hero .hero-search button{border:0;background:var(--c-primary);color:#fff;font-weight:700;font-size:15px;padding:0 30px;cursor:pointer;font-family:inherit}
section.hero .hero-search button:hover{background:var(--primary-d)}
@media(max-width:640px){
  section.hero{min-height:520px}
  section.hero .hero-in{padding:64px 16px 60px}
  section.hero .hero-logo{height:34px}
  section.hero .hero-search{height:54px}
}

/* ---------- Pita daerah ---------- */
.region-band{background:var(--c-primary);border-top:1px solid var(--primary-d);border-bottom:1px solid var(--primary-d)}
.region-wrap{display:flex;gap:10px;align-items:center;justify-content:center;flex-wrap:wrap;padding-top:18px;padding-bottom:18px}
.region-chip{display:inline-flex;align-items:center;gap:7px;padding:9px 18px;border-radius:var(--radius-pill);
  border:1px solid rgba(255,255,255,.34);color:#F3EEDF;font-weight:600;font-size:14px;text-decoration:none;transition:.16s}
.region-chip:hover{background:rgba(255,255,255,.14);border-color:#F3EEDF}
@media(max-width:900px){
  .region-wrap{justify-content:flex-start;flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .region-wrap::-webkit-scrollbar{display:none}
  .region-chip{flex:0 0 auto;white-space:nowrap}
}

/* ---------- Statistik ---------- */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap);padding-top:44px;padding-bottom:8px}
.stats .stat{background:var(--c-bg-alt);border:1px solid var(--c-line);border-radius:22px;padding:26px 18px;text-align:center}
.stats .stat b{display:block;font-family:var(--f-head);font-weight:400;font-size:clamp(34px,4.4vw,64px);line-height:1;color:var(--c-primary-dark)}
.stats .stat span{display:block;margin-top:8px;font-size:13px;font-weight:600;letter-spacing:1px;text-transform:uppercase;color:var(--c-text-muted)}
@media(max-width:768px){.stats{grid-template-columns:1fr;gap:12px;padding-top:26px}.stats .stat{padding:16px}}

/* ---------- Kartu resep (foto lengkung atas) ---------- */
.rcard{background:transparent;border:0;border-radius:0;box-shadow:none;overflow:visible;transition:transform .22s ease}
.rcard:hover{transform:translateY(-4px);box-shadow:none;border-color:transparent}
.rcard .thumb{aspect-ratio:4/5;border-radius:var(--radius-card-arch);overflow:hidden;border:1px solid var(--c-line);
  background:linear-gradient(135deg,var(--c-bg-alt),var(--c-line))}
.rcard .body{background:var(--surface);border:1px solid var(--c-line);border-top:0;border-radius:0 0 20px 20px;padding:14px 16px 18px}
.rcard .cat{font-size:11px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--c-primary);opacity:1}
.rcard .name{font-family:var(--f-head);font-weight:400;font-size:19px;line-height:1.28;color:var(--c-primary-dark)}
.rcard .reg{color:var(--c-text-muted)}
.rcard .reg svg{color:var(--c-primary)}
.rcard .diff{background:var(--c-primary)!important;color:#F3EEDF;border-radius:var(--radius-pill)}
.rcard .time{background:rgba(255,253,246,.95);color:var(--c-primary-dark);border-radius:var(--radius-pill)}

/* ---------- Chip filter & bar ---------- */
.fbar,.fgrp,.flabel{--x:0}
.fbar{background:var(--c-bg-alt);border-color:var(--c-line);border-radius:18px}
.flabel{color:var(--c-text-muted)}
.fchip{background:var(--surface);border:1px solid var(--c-chip-border);color:var(--c-primary-dark);border-radius:var(--radius-pill);padding:8px 16px}
.fchip:hover{border-color:var(--c-primary);transform:none}
.fchip.on{background:var(--c-primary);border-color:var(--c-primary);color:#fff}

/* ---------- Tombol pil umum ---------- */
.hbtn{background:transparent;border:1.5px solid var(--c-primary);color:var(--c-primary-dark);
  padding:12px 22px;border-radius:var(--radius-pill);font-weight:600;box-shadow:none}
.hbtn.primary{background:var(--c-primary);color:#fff;border-color:var(--c-primary)}
.hbtn:hover{background:var(--c-bg-alt)}
.hbtn.primary:hover{background:var(--primary-d)}

/* ---------- Paginasi ---------- */
.pager .pg{border-radius:var(--radius-pill);background:var(--surface);border-color:var(--c-chip-border);box-shadow:none}
.pager .pg.cur{background:var(--c-primary);border-color:var(--c-primary)}
.pager a.pg:hover{border-color:var(--c-primary);background:var(--c-bg-alt)}

/* ---------- Breadcrumb & panel umum ---------- */
.crumb a{color:var(--c-primary)}
.intro{background:var(--c-bg-alt);border-left:4px solid var(--c-primary);color:var(--c-text-muted);border-radius:0 14px 14px 0}
.panel{background:var(--surface);border:1px solid var(--c-line);border-radius:22px}

/* ---------- Footer hijau tua ---------- */
footer.site-foot{background:var(--c-primary-dark);color:#EDE7D6;margin-top:56px;padding:52px 0 34px}
footer.site-foot .foot-top{display:flex;flex-wrap:wrap;gap:28px;align-items:flex-start;justify-content:space-between}
footer.site-foot .foot-logo{height:46px;width:auto}
footer.site-foot .foot-desc{color:#C9C3B0;font-size:14px;line-height:1.75;max-width:520px;margin-top:14px}
footer.site-foot nav{display:flex;flex-wrap:wrap;gap:12px 20px;font-size:14px}
footer.site-foot nav a{color:#EDE7D6;font-weight:600;border-bottom:1px solid transparent}
footer.site-foot nav a:hover{border-color:var(--c-gold);color:#fff}
footer.site-foot .foot-stats{display:flex;gap:26px;flex-wrap:wrap;margin-top:8px}
footer.site-foot .foot-stats b{display:block;font-family:var(--f-head);font-size:30px;color:#fff;line-height:1}
footer.site-foot .foot-stats span{font-size:12px;letter-spacing:1.4px;text-transform:uppercase;color:var(--c-gold)}
footer.site-foot .foot-copy{margin-top:30px;padding-top:18px;border-top:1px solid rgba(243,238,223,.18);font-size:12.5px;color:#B7B2A1}
@media(max-width:640px){footer.site-foot{padding:38px 0 26px}}

/* ---------- Penyesuaian halaman resep (literals lama → token) ---------- */
.rhead .hero{background:linear-gradient(135deg,var(--c-bg-alt),var(--c-line))}
.tips{background:var(--c-bg-alt)!important;border-color:var(--c-line)!important;border-radius:18px}
.tips p{color:var(--c-text-muted)!important}
.intro p,.intro{color:var(--c-text-muted)}
.panel[style]{border-radius:22px}

/* ---------- Full-bleed untuk hero & pita daerah ---------- */
body{overflow-x:clip}
section.hero,.region-band{width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw)}
.region-band .region-wrap{padding:18px 24px}
@media(max-width:640px){.region-band .region-wrap{padding:16px}}

/* ---------- Baris judul section + chip ---------- */
.sect-row{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin:34px 0 14px}
.sect-row h1.sect,.sect-row h2.sect{margin:0}
.sect-more{font-weight:600;color:var(--c-primary);white-space:nowrap;font-size:15px}
.sect-more:hover{text-decoration:underline}
.chiprow{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 20px}

/* ---------- Footer tagline ---------- */
footer.site-foot .foot-tag{font-family:var(--f-head);font-size:22px;color:#F3EEDF;margin-top:16px}

/* ---------- Logo header: ukuran responsif ---------- */
.logo-img{height:40px;width:auto;display:block}
.logo-sym{display:none;height:32px;width:auto}
@media(max-width:640px){.logo-img{height:32px}}
@media(max-width:359px){.logo-img{display:none}.logo-sym{display:block}}

/* ---------- FIX MOBILE (11 Okt) ---------- */
/* Badge kesulitan: pindah ke tengah-atas busur foto.
   Sebelumnya di kiri-atas (9,9) — sudut kiri badge berada di luar lengkungan
   (border-radius 999px), sehingga terpotong dan tampak bergeser. */
.rcard .diff{top:12px;left:50%;right:auto;transform:translateX(-50%)}

/* Tap target nyaman di mobile (>=44px) */
@media(max-width:640px){
  .share-buttons .share-btn{min-height:44px;display:inline-flex;align-items:center;justify-content:center;padding-left:18px;padding-right:18px}
  #bmk{min-height:44px}
  #printBtn{min-height:44px;display:inline-flex;align-items:center}
  .logo{min-height:44px}
}

/* FIX (11 Okt): tombol "Simpan" Pinterest memakai position:absolute, tapi
   wadah .rhead tidak position:relative → tombol kabur ke pojok atas halaman
   dan tertutup sticky header (z 50 vs 5). Jadikan .rhead acuan posisi. */
.rhead{position:relative}

/* Tap target tombol Simpan Pinterest di mobile */
@media(max-width:640px){
  .rhead > a[href*="pin/create"]{min-height:44px;display:inline-flex;align-items:center;padding:0 18px}
}

/* FIX (11 Okt): gambar di panel split "Resep Pilihan" berukuran 800px dan
   tidak dibatasi → melebarkan halaman di mobile (overflow horizontal).
   Batasi semua gambar di dalam panel split agar tidak melebihi kolomnya. */

/* FIX (11 Okt): hero kadang tampak bergeser ke kanan.
   Sebab: (a) width:100vw ikut menghitung lebar scrollbar vertikal → overflow
   horizontal ~8px (kiri terpotong, kanan menonjol) sehingga blok terkesan
   condong kanan; (b) centering hero mengandalkan flex-item yang bisa menyusut.
   Perbaikan: matikan scroll-x di html, paksa hero-in lebar penuh & center. */
html{overflow-x:clip}
section.hero{justify-content:center}
section.hero .hero-in{width:100%;margin-left:auto;margin-right:auto}
/* Full-bleed yang sadar-scrollbar: pakai 100% (lebar area terlihat) sebagai
   fallback, lalu 100vw hanya bila memang tak ada selisih (dvw lebih akurat). */
section.hero,.region-band{width:100vw;max-width:100vw}
@supports (width:100dvw){
  section.hero,.region-band{width:100dvw;max-width:100dvw;margin-left:calc(50% - 50dvw);margin-right:calc(50% - 50dvw)}
}

/* ---------- Panel split (Resep Pilihan) — RESTORE (11 Okt) ----------
   Blok ini sempat hilang dari rp-theme.css sehingga .pick-body jadi display:block
   dan tombol menimpa baris meta. Dikembalikan sesuai desain staging awal. */
.pick-split{display:grid;grid-template-columns:minmax(0,47%) minmax(0,1fr);border-radius:26px;overflow:hidden;border:1px solid var(--c-line);background:var(--c-bg-alt);margin-top:6px}
.pick-split .pick-photo{position:relative;min-height:340px;background:linear-gradient(135deg,var(--c-bg-alt),var(--c-line));display:flex;align-items:center;justify-content:center;overflow:hidden}
.pick-split .pick-photo img{width:100%;height:100%;object-fit:cover;display:block;max-width:100%}
.pick-split .pick-photo .noimg{font-size:56px;opacity:.5}
.pick-split .pick-body{padding:44px 46px;display:flex;flex-direction:column;justify-content:center;gap:14px}
.pick-label{font-size:11px;font-weight:700;letter-spacing:3px;text-transform:uppercase;color:var(--c-primary)}
.pick-name{font-family:var(--f-head);font-weight:400;font-size:clamp(26px,2.6vw,38px);line-height:1.15;color:var(--c-primary-dark);margin:0}
.pick-meta{font-size:14px;color:var(--c-text-muted);font-weight:600}
.pick-split .hbtn{align-self:flex-start;margin-top:4px}
@media(max-width:900px){
  .pick-split{grid-template-columns:1fr}
  .pick-split .pick-photo{min-height:240px;aspect-ratio:4/3}
  .pick-split .pick-body{padding:26px 22px 30px}
}

/* ====== FIX AUDIT (12 Okt): tap target >=44px ======
   Temuan audit #1-3: chip filter, dropdown filter, region-chip, hbtn
   di bawah 44px pada layar sentuh. Target yang sering ditekan jempol. */

/* #3 region-chip & hbtn: borderline (42/43.6px) -> genapkan 44px, global aman */
.region-chip{min-height:44px}
.hbtn{min-height:44px;display:inline-flex;align-items:center;justify-content:center}

/* #1 & #2 chip filter + dropdown filter: naikkan hanya di lebar sentuh,
   desktop dibiarkan ramping. select pakai min-height (inline padding tetap). */
@media(max-width:640px){
  .fchip{min-height:44px;display:inline-flex;align-items:center;justify-content:center}
  .chiprow .fchip{min-height:44px}
  .fbar select,[data-autosubmit]{min-height:44px}
  .fbar .fchip{min-height:44px}
  }

  /* ====== FIX AUDIT ANTISLOP (23 Okt): focus-visible keyboard state ======
   Antislop R-32: rp-theme.css tidak punya :focus/:focus-visible sama sekali.
   Keyboard user (Tab) bisa kehilangan jejak fokus. Ini global, 1px/setara,
   tidak menggeser layout (outline, bukan border). */
  :focus-visible{outline:2px solid var(--c-primary);outline-offset:2px;border-radius:4px}
  :focus:not(:focus-visible){outline:none}