/* ============================================================
   MOMENT KITA — STYLE.CSS
   Dirapikan & dikomentari supaya gampang dicari pas mau diubah.
   Urutan dari atas ke bawah: Dasar -> Navbar -> Tombol -> Hero
   -> Statistik -> Section umum -> Tema -> Paket Harga -> Cara
   Order -> Testimoni -> FAQ -> CTA akhir -> Footer -> Mobile.

   Variabel warna (--acc, --bg, dll) ada di paling atas (:root).
   Ganti di situ kalau mau ubah skema warna satu web sekaligus.
   ============================================================ */

/* ---------- 1. WARNA & DASAR ----------
   --bg = warna latar halaman, --card = latar kartu/kotak,
   --ink = warna teks utama, --mute = teks abu-abu/sekunder,
   --acc = warna aksen (tombol, harga, dll), --line = warna garis/border.
   Versi mode gelap otomatis dipakai kalau HP/laptop pengunjung
   disetel dark mode. */
:root{
  --bg:#FAF6F8;--card:#fff;--ink:#22192B;--mute:#6B5F75;--acc:#8E2C57;--acc-ink:#fff;--line:#E9DDE4;
  box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#17111C;--card:#221A29;--ink:#F3EAF1;--mute:#B4A5BC;--acc:#E38AB0;--acc-ink:#2A0F1C;--line:#3A2E43}}
:root[data-theme="dark"]{--bg:#17111C;--card:#221A29;--ink:#F3EAF1;--mute:#B4A5BC;--acc:#E38AB0;--acc-ink:#2A0F1C;--line:#3A2E43}

html{scroll-padding-top:calc(env(safe-area-inset-top,0px) + 64px);scroll-behavior:smooth}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:400 16px/1.6 "Plus Jakarta Sans",system-ui,sans-serif;transition:background-color .35s ease,color .35s ease}
a{color:inherit}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid var(--acc);outline-offset:3px}

/* Lebar kontainer standar, dipakai di header, main, dan footer */
.wrap{max-width:1040px;margin:0 auto;padding:0 20px}

/* Dipakai di beberapa tempat (logo, bagian "Buka undangan" di kartu HP) */
.logo{display:inline-flex;align-items:center;font:italic 600 24px "Cormorant Garamond",Georgia,serif;text-decoration:none}
.logo img{height:55px;width:auto;display:block;transition:height .25s ease}

/* Ganti logo otomatis sesuai mode terang/gelap, biar logo yang teksnya
   putih ga "ketelen" sama background putih pas mode terang.
   - logoPutih.png  = logo yang dipakai pas mode GELAP (teks putih, dst)
   - logo-light.png = SIAPIN FILE INI, logo khusus mode TERANG (teks warna
     gelap/berwarna, bukan putih). Taruh di folder img/ yang sama,
     namain persis "logo-light.png". Kalau file-nya belum ada, logo
     bagian ini akan gagal muncul (gambar kosong) pas mode terang. */
.logo .logo-dark{display:none}
.logo .logo-light{display:block}
:root[data-theme="dark"] .logo .logo-dark{display:block}
:root[data-theme="dark"] .logo .logo-light{display:none}
@media(prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .logo .logo-dark{display:block}
  :root:not([data-theme="light"]) .logo .logo-light{display:none}
}

/* ---------- 2. NAVBAR ----------
   Navbar ngambang: transparan + blur, bentuk pil, ada jarak dari
   tepi atas layar (lihat "margin"). Tinggi navbar: header .wrap. */
header{
  position:sticky;z-index:50;
  top:calc(env(safe-area-inset-top,0px) + 10px);
  margin:calc(env(safe-area-inset-top,0px) + 10px) auto 0;
  width:min(960px,calc(100% - 24px));
  background:color-mix(in srgb,var(--bg) 70%,transparent);
  backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);
  border:1px solid color-mix(in srgb,var(--line) 60%,transparent);
  border-radius:999px;box-shadow:0 8px 24px rgba(0,0,0,.12)
}
/* Grid 3-kolom: logo di kiri, menu di tengah (kolom lentur di antara
   logo dan toggle/hamburger), toggle+hamburger di kanan.

   CARA BESARIN/KECILIN NAVBAR:
   - "height:76px" di bawah ini = TINGGI navbar. Mau lebih gede/kecil,
     ganti angka 76px-nya (misal 66px buat lebih kecil, 86px lebih gede).
   - "header .logo img{height:...}" di bawah = ukuran LOGO di navbar.
     Samain aja sama perasaan tinggi navbarnya (biasanya logo = tinggi
     navbar dikurang 36-44px, biar ga mepet atas-bawah).
   - Kalau mau lebih LEBAR (kiri-kanan, bukan tinggi), itu di bagian
     "header{...}" di atas, baris "width:min(960px,...)" -> ganti
     angka 960px-nya (misal 1100px buat lebih lebar). */
header .wrap{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;height:85px;padding:0 20px}
header .logo img{height:30px}
header .burger{padding:8px}

/* Menu Tema/Harga/dll ketengah secara horizontal di kolom tengah */
nav{display:flex;gap:16px;overflow-x:auto;justify-self:center}
nav a{text-decoration:none;color:var(--mute);font-size:14px;white-space:nowrap;transition:color .2s ease}
nav a:hover{color:var(--acc)}

/* Grup kanan: toggle dark/light + tombol hamburger, nempel sejajar */
.navRight{display:flex;align-items:center;gap:10px;justify-self:end}

/* Toggle mode terang/gelap: bentuk kotak rounded (bukan pil lagi), isinya
   cuma 1 ikon yang kelihatan di satu waktu -> pas diklik, ikon matahari
   & bulan saling "morph" (muter + fade + scale) ganti satu sama lain,
   bukan geser thumb seperti sebelumnya. Status dibaca dari atribut
   aria-pressed (diatur di script.js).
   Default-nya cuma ikonnya doang yang kelihatan (background/border
   transparan) -> pas di-hover baru muncul kotak background+border-nya. */
.theme-toggle{
  position:relative;flex:none;display:flex;align-items:center;justify-content:center;
  width:38px;height:38px;border-radius:12px;padding:0;border:1px solid transparent;
  background:transparent;cursor:pointer;overflow:hidden;
  transition:background-color .25s ease,border-color .25s ease,transform .15s ease,box-shadow .25s ease
}

.theme-toggle:active{transform:scale(.92)}

/* Kedua ikon ditumpuk pas ditengah, yang lagi "nggak aktif" diputer +
   diperkecil + ditranparanin, pas diklik posisinya kebalik -> hasilnya
   kerasa kaya 1 ikon berubah jadi ikon lain (morph), bukan icon ganti
   instan atau pil geser biasa. */
.theme-toggle i{
  position:absolute;font-size:17px;
  transition:opacity .4s ease,transform .45s cubic-bezier(.34,1.3,.4,1)
}
.theme-toggle .ic-sun{color:#F5A623}
.theme-toggle .ic-moon{color:#8B7CF6}

.theme-toggle[aria-pressed="false"] .ic-sun{opacity:1;transform:rotate(0deg) scale(1)}
.theme-toggle[aria-pressed="false"] .ic-moon{opacity:0;transform:rotate(80deg) scale(.4)}
.theme-toggle[aria-pressed="true"] .ic-sun{opacity:0;transform:rotate(-80deg) scale(.4)}
.theme-toggle[aria-pressed="true"] .ic-moon{opacity:1;transform:rotate(0deg) scale(1)}

/* Tombol hamburger (cuma kelihatan di HP, lihat bagian Mobile di bawah) */
.burger{display:none;flex-direction:column;gap:5px;background:none;border:0;padding:10px;cursor:pointer}
.burger span{display:block;width:22px;height:2px;background:var(--ink);transition:transform .2s,opacity .2s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ---------- 3. TOMBOL (.btn) ----------
   Dipakai di mana-mana: hero, kartu tema, paket harga, footer, dll.
   .btn       = tombol solid (warna --acc)
   .btn.o     = tombol outline/garis
   .btn.off   = tombol pudar & tidak bisa diklik (demo tema kosong)
   [hidden]   = dipaksa "display:none" karena tanpa ini, aturan
                .btn di atas bisa menang lawan atribut hidden bawaan
                browser (pernah bikin tombol "Lihat tema lainnya"
                kelihatan terus padahal harusnya disembunyikan). */
.btn{
  display:inline-block;background:var(--acc);color:var(--acc-ink);
  padding:12px 22px;border-radius:999px;font-weight:700;
  text-decoration:none;font-size:15px;text-align:center;
  transition:background-color .2s ease,transform .2s ease,opacity .2s ease
}
.btn:hover{background-color:color-mix(in srgb,var(--acc) 85%,black);transform:translateY(-2px)}
.btn.o{background:transparent;color:var(--ink);border:1px solid var(--line)}
.btn.o:hover{background-color:var(--line);transform:translateY(-2px)}
.btn.off{opacity:.45;pointer-events:none}
.btn.off:hover{transform:none}
.btn[hidden],[hidden]{display:none!important}

/* ---------- 4. HERO (judul besar + tombol + preview HP) ----------
   h1        = judul besar (diketik otomatis lewat script.js, lihat TYPE_TEXT)
   .hero p   = paragraf di bawah judul (animasi kata, lihat PARA_TEXT di script.js)
   .cta      = baris tombol "Hubungi Kami" / "Lihat tema"
   .phone    = bingkai HP preview undangan
   .feat     = daftar fitur (musik, peta, RSVP, amplop) di samping/bawah preview */
.hero{display:grid;gap:32px;padding:48px 0 32px;align-items:center}
/* Catatan: hero dipaksa jadi 1 kolom (bukan 1.2fr/.8fr) biar preview HP
   turun ke bawah teks, bukan di samping. Aturan di bawah ini SENGAJA
   ditulis lagi supaya menang (sama-sama breakpoint 800px, yang paling
   akhir yang dipakai browser). */
@media(min-width:800px){.hero{grid-template-columns:1.2fr .8fr}}
@media(min-width:800px){.hero{grid-template-columns:1fr}}

h1{font:italic 500 clamp(38px,7vw,64px)/1.05 "Cormorant Garamond",Georgia,serif;margin:0 0 16px}
.hero p{color:var(--mute);max-width:48ch;margin:0 0 24px}
.cta{display:flex;gap:10px;flex-wrap:wrap}

.phone{justify-self:center;width:230px;aspect-ratio:9/17;border-radius:32px;border:8px solid var(--ink);overflow:hidden}
.phone img{display:block;width:100%;height:100%;object-fit:cover;object-position:top}
.cp{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:16px;gap:6px}
.cp small{font-size:11px;opacity:.8}
.cp b{font:italic 600 30px/1.05 "Cormorant Garamond",Georgia,serif}
.cp i{font-style:normal;font-size:12px}
.cp span{margin-top:10px;font-size:11px;padding:6px 14px;border-radius:999px;border:1px solid currentColor}

.preview{display:grid;gap:28px;align-items:center;margin-top:8px}
@media(min-width:800px){.preview{grid-template-columns:230px 1fr;gap:40px}}
.feat ul{list-style:none;padding:0;margin:0;display:grid;gap:12px}
@media(min-width:800px){.feat ul{grid-template-columns:repeat(2,1fr)}}

/* Kursor kedap-kedip di ujung judul (animasi ngetik, lihat TYPE_TEXT di script.js) */
.hero h1::after{content:"";display:inline-block;width:3px;height:.9em;background:currentColor;margin-left:4px;vertical-align:-.12em;animation:hkCaret 1s steps(1) infinite}
@keyframes hkCaret{50%{opacity:0}}

/* Animasi paragraf hero: kata-kata muncul dari bawah, mulai dari kata
   PALING AKHIR duluan (lihat PARA_TEXT & WORD_STAGGER di script.js) */
.hero p .word{display:inline-block;opacity:0;transform:translateY(16px);transition:opacity .5s ease,transform .5s ease}
.hero p .word.show{opacity:1;transform:translateY(0)}

@media(prefers-reduced-motion:reduce){
  .hero h1::after{display:none}
  .hero p .word{opacity:1;transform:none;transition:none}
}

/* ---------- 5. STATISTIK (400+ Tema, Bisa Revisi, dll) ---------- */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:12px;padding:0 0 24px}
.stats div{border:1px solid var(--line);border-radius:12px;padding:14px;background:var(--card)}
.stats b{display:block;font:italic 600 30px "Cormorant Garamond",serif;color:var(--acc)}
.stats span{font-size:14px;color:var(--mute)}

/* ---------- 6. SECTION UMUM (judul section, kotak/.box generik) ---------- */
section{padding:40px 0}
h2{font:italic 500 clamp(30px,5vw,42px)/1.1 "Cormorant Garamond",Georgia,serif;margin:0 0 8px}
.sub{color:var(--mute);margin:0 0 24px;max-width:60ch}
.cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}
.box{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:18px}
.box h3{margin:0 0 6px;font-size:17px}
.box p{margin:0;color:var(--mute);font-size:15px}

/* ---------- 7. FILTER & GRID TEMA (section #tema) ----------
   .chips = tombol filter kategori (Semua/Terpopuler/dst)
   .grid  = kartu-kartu tema. Tombol "Lihat tema lainnya" diatur
   lewat AWAL di script.js (default 8 tema per halaman). */
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:24px}
.chip{background:transparent;color:var(--ink);border:1px solid var(--line);padding:8px 16px;border-radius:999px;font:500 14px "Plus Jakarta Sans",sans-serif;cursor:pointer}
.chip[aria-pressed="true"]{background:var(--ink);color:var(--bg);border-color:var(--ink)}

.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:20px}
.item{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:12px;display:flex;flex-direction:column}
.item .cp,.item img{aspect-ratio:9/13;height:auto;width:100%;border-radius:8px;object-fit:cover;object-position:top}
.item h3{margin:12px 0 0;font-size:16px}
.item p{margin:2px 0 10px;color:var(--mute);font-size:14px}
.item .btn{margin-top:auto;padding:10px 16px;font-size:14px}
.item .pv{font-size:13px;color:var(--mute);margin:0 0 10px}
.shot{display:block;width:100%;border-radius:8px}

/* Dua tombol (Preview / Pilih tema) sejajar di tiap kartu tema */
.acts{display:flex;gap:8px;margin-top:auto}
.acts .btn{flex:1;margin-top:0;padding:10px 8px;font-size:14px;cursor:pointer;font-family:inherit}

/* Gambar tema tidak ditemukan -> otomatis balik ke warna gradasi polos
   (lihat fungsi fallback() di script.js, ini cuma urusan tampilan kartunya) */

/* ---------- 8. PAKET HARGA (section #harga) ----------
   .plans ul dibatasi tingginya (scroll di dalam kartu) karena daftar
   fitur Paket Premium cukup panjang. */
.plans .box{display:flex;flex-direction:column;gap:10px}
.plans .hl{border:2px solid var(--acc)}
.price{font:italic 600 32px "Cormorant Garamond",serif;color:var(--acc)}
.plans ul{
  margin:0;color:var(--mute);font-size:15px;flex:none;
  height:240px;overflow-y:auto;padding:0 8px 0 18px;
  scrollbar-width:thin;scrollbar-color:var(--mute) transparent;
  background:
    linear-gradient(var(--card) 30%,transparent) center top,
    linear-gradient(transparent,var(--card) 70%) center bottom,
    radial-gradient(farthest-side at 50% 0,rgba(0,0,0,.18),transparent) center top,
    radial-gradient(farthest-side at 50% 100%,rgba(0,0,0,.18),transparent) center bottom;
  background-repeat:no-repeat;
  background-size:100% 28px,100% 28px,100% 10px,100% 10px;
  background-attachment:local,local,scroll,scroll
}
.plans li{margin-bottom:6px}

/* ---------- 9. CARA ORDER (section #cara, list bernomor) ---------- */
.steps{display:grid;gap:16px;padding:0;margin:0;list-style:none;counter-reset:s;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.steps li{counter-increment:s;border-left:3px solid var(--acc);padding:4px 0 4px 16px}
.steps li::before{content:counter(s);font:italic 600 32px "Cormorant Garamond",serif;color:var(--acc)}
.steps b{display:block}
.steps span{color:var(--mute);font-size:15px}

/* ---------- 10. TESTIMONI (section #testimoni) ----------
   Scroll ke samping: 3 kartu kelihatan di laptop/PC, 1 kartu di HP
   (lihat media query di bagian Mobile paling bawah juga). */
.testi{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:14px;scrollbar-width:thin;scrollbar-color:var(--mute) transparent;-webkit-overflow-scrolling:touch}
.tc{position:relative;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:22px 20px 20px;display:flex;flex-direction:column;gap:14px;flex:1 0 calc((100% - 32px)/3);min-width:0;scroll-snap-align:start}
.tc::before{content:"\201C";position:absolute;top:2px;right:18px;font:italic 600 72px/1 "Cormorant Garamond",Georgia,serif;color:var(--acc);opacity:.25}
.tc p{margin:0;flex:1;font-size:15.5px}
.stars{color:#E5A93C;letter-spacing:2px;font-size:17px}
.who{display:flex;align-items:center;gap:12px}
.av{flex:none;width:44px;height:44px;border-radius:50%;background:var(--acc);color:var(--acc-ink);display:grid;place-items:center;font-weight:700;overflow:hidden}
.av img{width:100%;height:100%;object-fit:cover}
.who b{display:block;font-size:15px;line-height:1.3}
.who span{font-size:13px;color:var(--mute)}

/* ---------- 11. FAQ (section #faq, <details>/<summary>) ----------
   Tiap pertanyaan jadi "kartu" sendiri (bukan cuma garis bawah polos):
   ada border yang berubah warna + ikon panah yang muter pas dibuka.
   Ga dikasih max-width lagi -> lebarnya ngikutin penuh container (.wrap),
   ga cuma setengah layar di PC/laptop. */
.faqlist{display:grid;gap:12px;margin-top:28px}
.faqlist details{
  background:var(--card);border:1px solid var(--line);border-radius:14px;
  padding:0;overflow:hidden;transition:border-color .2s ease,box-shadow .2s ease
}
.faqlist details[open]{border-color:var(--acc);box-shadow:0 6px 18px rgba(0,0,0,.08)}
.faqlist summary{
  list-style:none;cursor:pointer;font-weight:700;padding:18px 20px;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  transition:color .2s ease
}
.faqlist summary::-webkit-details-marker{display:none}
.faqlist summary:hover{color:var(--acc)}
.faqlist .faq-ic{flex:none;color:var(--acc);transition:transform .25s ease}
.faqlist details[open] .faq-ic{transform:rotate(180deg)}
.faqlist details p{color:var(--mute);margin:0;padding:0 20px 18px}

/* Dipakai juga di testimoni data (blockquote tidak lagi dipakai di
   markup saat ini, dibiarkan untuk jaga-jaga kalau dipakai lagi) */
blockquote{margin:0}
blockquote p{margin:0 0 12px;font-style:italic}
blockquote footer{border:0;padding:0;text-align:left;font-size:14px;color:var(--mute)}

/* ---------- 12. CTA PENUTUP ("Siap merayakan kisah kalian?") ----------
   1 detail dekoratif: 2 lingkaran garis tipis transparan di pojok card
   (kiri-atas & kanan-bawah), warna ngikut --acc tapi tipis banget (bukan
   full-color card kayak referensi), biar tetep simpel/ga rame. */
.end{
  position:relative;overflow:hidden;
  text-align:center;background:var(--card);border:1px solid var(--line);
  border-radius:18px;padding:40px 20px
}
.end::before,.end::after{
  content:"";position:absolute;border-radius:50%;
  border:1.5px solid color-mix(in srgb,var(--acc) 30%,transparent);
  pointer-events:none
}
.end::before{width:160px;height:160px;top:-60px;left:-50px}
.end::after{width:200px;height:200px;bottom:-80px;right:-50px}
.end h2,.end>a{position:relative;z-index:1}
.end h2{margin-bottom:12px}

/* ---------- 13. FOOTER ----------
   footer.f .wrap  = berlaku untuk SEMUA elemen ber-class "wrap" di
                     dalam footer (baris brand/menu/kontak, DAN baris
                     copyright paling bawah) -> dibuat flex dasar di sini.
   footer.f .fgrid = menimpa footer.f .wrap jadi grid 3 kolom khusus
                     untuk baris brand/menu/kontak.
   footer.f .fbot  = khusus baris copyright paling bawah; sekarang
                     ditengahin (justify-content & text-align center). */
footer.f{border-top:1px solid var(--line);color:var(--mute);font-size:14px;padding:48px 0 0}
footer.f .wrap{display:flex;flex-wrap:wrap;gap:8px 24px;justify-content:space-between}

footer.f .fgrid{display:grid;gap:32px;grid-template-columns:1fr;padding-bottom:32px}
@media(min-width:800px){footer.f .fgrid{grid-template-columns:1.4fr 1fr 1.2fr}}
.fbrand p{margin:10px 0 14px;max-width:38ch}
.fbrand .logo img{height:25px}
footer.f h4{margin:0 0 12px;color:var(--ink);font-size:15px}
footer.f ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
footer.f a{text-decoration:none}
footer.f ul a:hover{color:var(--acc)}

.soc{display:flex;gap:8px;flex-wrap:wrap}
.soc a{border:1px solid var(--line);border-radius:999px;padding:6px 14px;color:var(--ink)}

.fline{border-top:1px solid var(--line)}
footer.f .fbot{padding:18px 20px;gap:8px 24px;justify-content:center;text-align:center}

/* ============================================================
   14. TAMPILAN HP (mobile) — dikumpulkan di sini biar gampang dicari,
   walau sebagian "milik" komponen di atas (navbar, grid tema, dll).
   ============================================================ */

/* Menu navbar jadi dropdown ngambang pas tombol hamburger diklik */
@media(max-width:700px){
  .burger{display:flex}
  nav{
    display:none;position:absolute;top:calc(100% + 10px);left:12px;right:12px;
    /* Reset justify-self:center (dipakai buat nge-tengahin menu di PC) --
       tanpa ini, card dropdown-nya ikut mengecil/shrink ngikutin lebar
       teks, bukan ngisi penuh sesuai left/right di atas. */
    justify-self:stretch;
    flex-direction:column;gap:0;
    background:color-mix(in srgb,var(--bg) 96%,transparent);
    backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
    border:1px solid var(--line);border-radius:20px;
    box-shadow:0 8px 24px rgba(0,0,0,.12);
    padding:6px 20px;overflow:visible
  }
  nav.open{display:flex}
  nav a{padding:12px 0;font-size:16px;color:var(--ink);border-top:1px solid var(--line);text-align:center}
  nav a:first-child{border-top:0}
}

/* Grid tema jadi 2 kolom, statistik jadi 2 kolom, tombol kartu tema
   ditumpuk (bukan sejajar) biar muat */
@media(max-width:600px){
  .grid{grid-template-columns:repeat(2,1fr);gap:12px}
  .item{padding:8px}
  .item h3{font-size:14px}
  .item p{font-size:12.5px;line-height:1.45}
  .acts{flex-direction:column;gap:6px}
  .acts .btn{flex:none;padding:9px 6px;font-size:13px}
  .stats{grid-template-columns:repeat(2,1fr);gap:10px}
  .stats div{padding:10px}
  .stats b{font-size:24px}
  .stats span{font-size:12.5px}
}

/* Testimoni: 2 kartu kelihatan di tablet, 1 kartu (ngintip dikit) di HP */
@media(max-width:899px){.tc{flex-basis:calc((100% - 16px)/2)}}
@media(max-width:700px){.tc{flex-basis:88%}}