/*
Theme Name: TB24
Theme URI: https://tokobunga24jam.id/
Description: Tema tokobunga24jam.id — halaman wilayah berbasis data, satu sumber tag SEO, pemesanan lewat WhatsApp.
Version: 0.1.2
Requires PHP: 8.1
Text Domain: tb24
*/

:root{
  --gading:#FCF9F2;      /* latar putih gading */
  --papan:#FFFDF8;       /* muka papan */
  --bata:#B44A22;        /* terakota dari angka 24 di logo */
  --bata-tua:#8E3817;    /* hover, teks di atas terakota pucat */
  --bata-muda:#F3E3D6;   /* bidang terakota pucat */
  --tinta:#2A1A12;       /* teks utama, cokelat sangat tua */
  --tinta-2:#6A5547;     /* teks sekunder */
  --garis:#E6D8C6;
  --daun:#364A2A;        /* hijau tulisan logo, dipakai hemat */
  --disp:'Bricolage Grotesque','Arial Narrow',Arial,sans-serif;
  --badan:'Figtree','Segoe UI',system-ui,sans-serif;
  --ukur:68ch;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--gading);color:var(--tinta);font-family:var(--badan);
     font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:var(--bata)}
a:hover{color:var(--bata-tua)}
:focus-visible{outline:3px solid var(--bata);outline-offset:3px}
.bungkus{max-width:1080px;margin:0 auto;padding-inline:20px}
.sempit{max-width:var(--ukur)}
h1,h2,h3{font-family:var(--disp);line-height:1.08;margin:0 0 .5em;color:var(--tinta);
         font-stretch:85%;letter-spacing:-.01em}
h1{font-size:clamp(34px,6.4vw,60px);font-weight:800}
h2{font-size:clamp(26px,4vw,38px);font-weight:750}
h3{font-size:21px;font-weight:700;font-stretch:90%}
p{margin:0 0 1em}
.lompat{position:absolute;left:-9999px}
.lompat:focus{left:12px;top:12px;background:#fff;padding:8px 12px;z-index:50}

/* kepala */
.kepala{border-bottom:1px solid var(--garis);background:var(--gading)}
.kepala .bungkus{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:14px}
.merek{white-space:nowrap;font-family:var(--disp);font-weight:800;font-size:22px;font-stretch:80%;color:var(--tinta);text-decoration:none;letter-spacing:-.01em}
.merek{display:inline-flex;align-items:center;gap:10px}
.merek img{height:48px;width:auto}
.kaki-logo{width:150px;height:auto;margin-bottom:12px}
.nav{display:flex;gap:18px;align-items:center;font-size:15px}
.nav a{color:var(--tinta-2);text-decoration:none}
.nav a:hover{color:var(--bata)}
.nav a.tombol,.nav a.tombol:hover{color:#fff}
@media(max-width:640px){.nav{display:none}.merek{font-size:19px}.merek img{height:40px}}

/* tombol */
.tombol{display:inline-flex;align-items:center;gap:10px;background:var(--bata);color:#fff;
        text-decoration:none;font-weight:700;font-size:16px;padding:14px 22px;border-radius:6px;border:0}
.tombol:hover{background:var(--bata-tua);color:#fff}
.tombol-garis{background:transparent;color:var(--bata);box-shadow:inset 0 0 0 2px var(--bata)}
.tombol-garis:hover{background:var(--bata-muda);color:var(--bata-tua)}
.tombol-kecil{padding:9px 14px;font-size:14px;white-space:nowrap;flex:none}
.deret{display:flex;flex-wrap:wrap;gap:12px}

/* pahlawan: papan bunga */
.pahlawan{padding-block:40px 56px}
.pahlawan-isi{display:grid;gap:36px;align-items:center}
@media(min-width:900px){.pahlawan-isi{grid-template-columns:1.05fr .95fr}}
.pahlawan .pengantar{font-size:19px;color:var(--tinta-2);max-width:46ch}
.papan{position:relative;background:var(--papan);border:10px solid var(--bata);padding:34px 26px 64px;
       text-align:center;box-shadow:0 0 0 6px var(--papan),0 0 0 7px var(--garis)}
.papan::before{content:'';position:absolute;inset:8px;border:2px dotted #C9876A;pointer-events:none}
.papan .ucapan-kecil{font-family:var(--disp);font-weight:700;font-size:18px;font-stretch:80%;color:var(--daun);margin:0 0 6px}
.papan .ucapan{font-family:var(--disp);font-weight:800;font-stretch:75%;text-transform:none;
               font-size:clamp(40px,7.5vw,72px);line-height:.95;color:var(--bata);margin:0}
.papan .untuk{font-family:var(--disp);font-weight:700;font-stretch:85%;font-size:20px;margin:16px 0 0;color:var(--tinta)}
.pita{position:absolute;left:50%;bottom:-18px;transform:translateX(-50%);background:var(--bata);color:#fff;
      font-size:14px;font-weight:700;padding:9px 22px;white-space:nowrap;border-radius:2px}
.pita::before,.pita::after{content:'';position:absolute;top:6px;border:16px solid var(--bata-tua);z-index:-1}
.pita::before{left:-22px;border-left-color:transparent}
.pita::after{right:-22px;border-right-color:transparent}

/* bagian */
.bagian{padding-block:52px;border-top:1px solid var(--garis)}
.bagian .sub{color:var(--tinta-2);max-width:56ch}
.daftar-produk{list-style:none;margin:24px 0 0;padding:0;display:grid;gap:0}
@media(min-width:760px){.daftar-produk{grid-template-columns:1fr 1fr;column-gap:40px}}
.daftar-produk li{border-top:1px solid var(--garis);padding:16px 0;display:flex;justify-content:space-between;gap:16px;align-items:baseline}
.daftar-produk h3{margin:0 0 2px}
.daftar-produk p{margin:0;color:var(--tinta-2);font-size:15.5px}
.langkah{list-style:none;counter-reset:l;margin:24px 0 0;padding:0;display:grid;gap:22px}
@media(min-width:860px){.langkah{grid-template-columns:repeat(4,1fr)}}
.langkah li{counter-increment:l;padding-top:14px;border-top:3px solid var(--bata)}
.langkah li::before{content:counter(l);font-family:var(--disp);font-weight:800;font-size:30px;color:var(--bata);display:block;line-height:1;margin-bottom:8px}
.langkah b{display:block;margin-bottom:4px}
.langkah span{color:var(--tinta-2);font-size:15.5px}

/* wilayah */
.remah{font-size:14px;color:var(--tinta-2);margin:22px 0 8px}
.remah a{color:var(--tinta-2)}
.fakta{display:grid;gap:0;margin:24px 0;background:var(--bata-muda);border-radius:4px}
@media(min-width:640px){.fakta{grid-template-columns:repeat(3,1fr)}}
.fakta div{padding:16px 18px;border-bottom:1px solid #E8CDB9}
@media(min-width:640px){.fakta div{border-bottom:0;border-right:1px solid #E8CDB9}.fakta div:last-child{border-right:0}}
.fakta dt{font-size:14px;color:var(--bata-tua)}
.fakta dd{margin:2px 0 0;font-weight:700;font-size:18px}
.tujuan{list-style:none;padding:0;margin:0}
.tujuan li{padding:12px 0;border-top:1px solid var(--garis)}
.tujuan li span{display:block;color:var(--tinta-2);font-size:15px}
.galeri{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px;margin-top:14px}
.galeri figure{margin:0}
.galeri figcaption{font-size:13.5px;color:var(--tinta-2);margin-top:4px}
.testi{margin:0 0 18px;padding:0 0 0 16px;border-left:3px solid var(--garis)}
.testi p{margin:0 0 4px}
.testi cite{font-style:normal;font-size:14px;color:var(--tinta-2)}
.daftar-area{list-style:none;padding:0;margin:16px 0 0;columns:2 220px;column-gap:32px}
.daftar-area li{break-inside:avoid;padding:6px 0}
.daftar-area small{display:block;color:var(--tinta-2)}
.galeri-pesanan{list-style:none;padding:0;margin:24px 0 0;columns:2 150px;column-gap:12px}
@media(min-width:900px){.galeri-pesanan{columns:4}}
.galeri-pesanan li{break-inside:avoid;margin:0 0 12px}
.galeri-pesanan figure{margin:0}
.galeri-pesanan img{width:100%;height:auto;border-radius:4px;background:var(--bata-muda)}
.galeri-pesanan figcaption{font-size:13.5px;color:var(--tinta-2);margin-top:5px;line-height:1.4}
.kosong{background:var(--papan);border:1px dashed var(--garis);padding:18px 20px;border-radius:4px;color:var(--tinta-2)}

/* kaki */
.kaki{border-top:1px solid var(--garis);padding-block:32px 110px;font-size:15px;color:var(--tinta-2)}
.kaki .bungkus{display:grid;gap:18px}
@media(min-width:760px){.kaki .bungkus{grid-template-columns:2fr 1fr}}
.lekat{position:fixed;left:0;right:0;bottom:0;padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px));
       background:var(--gading);border-top:1px solid var(--garis);z-index:20}
.lekat .tombol{width:100%;justify-content:center}
@media(min-width:900px){.lekat{display:none}.kaki{padding-bottom:40px}}
.isi-halaman{padding-block:36px 56px}
.isi-halaman .entri{max-width:var(--ukur)}
.jarak{margin-top:40px}
.kaki a{color:var(--tinta-2)}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}