/* ============ THEME ============ */
    :root{
      --ink:#0f172a; --muted:#475569; --soft:#f1f5f9;
      --line:#e5e7eb; --brand:#ff6b6b; --brand-ink:#7a1a1a;
      --bg:#ffffff; --shadow:0 10px 30px rgba(2,6,23,.06);
      --radius:14px;
    }
    html,body{height:100%}
    body{margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;background:var(--bg);color:var(--ink)}
    .container{width:min(1200px,92vw);margin:0 auto}

    /* ============ HERO ============ */
    .hero{position:relative;padding:44px 0 18px}
    .badge{display:inline-block;background:#ffe8e8;color:var(--brand-ink);padding:6px 12px;border-radius:999px;font-weight:700;font-size:12px}
    .hero h1{font-size:clamp(28px,4.2vw,42px);letter-spacing:-.3px;margin:8px 0 10px}
    .muted{color:var(--muted)}
    .cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
    .btn{padding:12px 16px;border-radius:12px;border:1px solid transparent;cursor:pointer;font-weight:700;text-decoration:none;display:inline-flex;align-items:center;gap:8px;box-shadow:var(--shadow)}
    .btn.primary{background:var(--brand);color:#fff}
    .btn.ghost{background:#fff;border-color:var(--line);color:var(--ink)}
    .hero-media{border-radius:var(--radius);overflow:hidden;border:1px solid var(--line)}
    .hero-media img{width:100%;display:block}

    /* ============ GRID UTILS ============ */
    .grid{display:grid;gap:16px}
    .cols-2{grid-template-columns:1fr}
    @media(min-width:720px){.cols-2{grid-template-columns:1fr 1fr}}

    /* Responsive 3-col */
    .cols-3{grid-template-columns:1fr}
    @media(min-width:640px){.cols-3{grid-template-columns:repeat(2,1fr)}}
    @media(min-width:980px){.cols-3{grid-template-columns:repeat(3,1fr)}}

    /* Responsive 4-col */
    .cols-4{grid-template-columns:1fr}
    @media(min-width:640px){.cols-4{grid-template-columns:repeat(2,1fr)}}
    @media(min-width:960px){.cols-4{grid-template-columns:repeat(3,1fr)}}
    @media(min-width:1180px){.cols-4{grid-template-columns:repeat(4,1fr)}}

    /* ============ CARDS ============ */
    .card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:16px;box-shadow:var(--shadow);transition:transform .15s ease}
    .card:hover{transform:translateY(-2px)}
    .pill{display:inline-block;border:1px solid var(--line);border-radius:999px;padding:6px 10px;margin:4px 6px 0 0;font-size:12px}

    .section{padding:22px 0}
    .section h2{font-size:clamp(20px,3.2vw,30px);margin:4px 0 12px}
    .caption{font-size:13px;color:var(--muted)}

    .price{font-weight:800;font-size:22px}
    .price small{font-weight:600;color:var(--muted)}
    .ribbon{position:absolute;top:12px;right:12px;background:var(--brand);color:#fff;padding:6px 10px;border-radius:999px;font-size:12px}

/* ====== Simple table: rapih di mobile ====== */
.table-wrap{
  border:1px solid var(--line);
  border-radius:12px;
  overflow:hidden;                 /* biar sudut tabel ikut membulat */
  background:#fff;
}

table.table{
  width:100%;
  border-collapse:collapse;
  table-layout:fixed;              /* kunci supaya gak melebar */
  font-size:14px;
}

.table thead th{
  background:var(--soft);
  text-align:left;
  font-weight:600;
}

.table th, .table td{

  border:1px solid var(--line);

  white-space:normal;
  word-break:break-word;           /* teks panjang akan wrap */
}

/* Kolom pertama (Wilayah) agak sempit */
.table th:first-child, .table td:first-child{
  width:28%;
  white-space:nowrap;
  font-weight:600;
}

/* ====== Mobile ====== */
@media (max-width:480px){
  table.table{ font-size:13px; }
  .table th, .table td{ padding:2px 8px; }
  .table th:first-child, .table td:first-child{ width:26%; }
}
    .note{background:var(--soft);border:1px dashed #cbd5e1;border-radius:12px;padding:12px}

    /* ============ LAYOUT SWITCHER (for demo) ============ */
    .layout-toggle{display:flex;gap:8px;align-items:center;margin:8px 0 2px}
    .layout-toggle .btn{box-shadow:none}
    .layout-toggle .btn[aria-pressed="true"]{background:#0f172a;color:#fff}
      /* ============ CARD THUMB ============ */
    .card .thumb{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:12px;margin:-4px 0 10px 0;border:1px solid var(--line)}

    /* ============ GALLERY OVERLAY ============ */
    .gallery-overlay{position:fixed;inset:0;background:rgba(0,0,0,.86);display:none;align-items:center;justify-content:center;z-index:9999}
    .gallery-overlay.open{display:flex}
    .gallery-frame{position:relative;width:min(1000px,94vw);height:min(680px,84vh);background:#000;border-radius:14px;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.35);border:1px solid #111}
    .gallery-slide{width:100%;height:100%;display:flex;align-items:center;justify-content:center}
    .gallery-slide img{max-width:100%;max-height:100%;display:block}
    .gallery-nav{position:absolute;inset:0;pointer-events:none}
    .gallery-btn{position:absolute;top:50%;transform:translateY(-50%);pointer-events:auto;border:none;background:rgba(255,255,255,.14);backdrop-filter:blur(6px);padding:10px 14px;border-radius:12px;color:#fff;font-weight:800;cursor:pointer}
    .gallery-btn:hover{background:rgba(255,255,255,.2)}
    .gallery-prev{left:10px}
    .gallery-next{right:10px}
    .gallery-close{position:absolute;top:10px;right:10px;border:none;background:rgba(255,255,255,.14);color:#fff;padding:8px 12px;border-radius:12px;cursor:pointer}
    .gallery-index{position:absolute;left:50%;transform:translateX(-50%);bottom:10px;background:rgba(255,255,255,.14);color:#fff;padding:6px 10px;border-radius:999px;font-size:12px}
/* === Galery slider (compact & arrows clickable, 1-per-slide) === */
#galery .gal-slider{ position:relative; isolation:isolate; }

#galery .gal-track{
  display:flex;
  gap:8px;
  padding:0;
  margin:0;
  overflow:auto;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;       /* anim halus */
  scrollbar-width:thin;
  list-style:none;
}

#galery .gal-item{
  flex:0 0 calc(50% - 4px);
  margin:0;
  list-style:none;
  scroll-snap-align:center;
  scroll-snap-stop:always;      /* <-- stop di setiap snap, jangan loncat */
}

#galery .gal-item img{
  display:block;
  width:100%;
  height:auto;
  border-radius:12px;
  object-fit:cover;
  aspect-ratio:4/3;
}

/* nav buttons */
#galery .gal-nav{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  z-index:10;
  border:none;
  background:rgba(0,0,0,.35);
  color:#fff;
  padding:8px 12px;
  border-radius:12px;
  cursor:pointer;
  backdrop-filter:blur(4px);
}
#galery .gal-nav.prev{ left:6px; }
#galery .gal-nav.next{ right:6px; }
#galery .gal-nav:hover{ background:rgba(0,0,0,.5); }

/* responsive: 1 kolom */
@media (max-width:700px){
  #galery .gal-item{ flex-basis:100%; }
  #galery .gal-item img{ aspect-ratio:16/9; }
}

    /* ============ faq ============ */	
	.faq details{border:1px solid #e5e7eb;border-radius:12px;padding:12px;margin:10px 0}
    .faq summary{cursor:pointer;font-weight:700}
    .section{padding:20px 0}
    .section h2{font-size:clamp(20px,3vw,28px);margin:4px 0 12px}
    .caption{font-size:13px;color:var(--muted)}
    .hero-media{border-radius:14px;overflow:hidden;border:1px solid #e5e7eb}
    .hero-media img{width:100%;height:auto;display:block}
    .table{width:100%;border-collapse:collapse}
    .table th,.table td{border:1px solid #e5e7eb;padding:10px;text-align:left}
    .note{background:var(--soft);border:1px dashed #cbd5e1;border-radius:12px;padding:12px}


  /* About Us */
  .about-wrap{align-items:center}
  .about-media{margin:0;border-radius:12px;overflow:hidden;background:#f8fafc}
  .about-media img{width:100%;height:100%;display:block;object-fit:cover;aspect-ratio:4/3}
  .about-text h2{margin-top:6px}
  .about .pills .pill{display:inline-block;border:1px solid #e5e7eb;border-radius:999px;
    padding:4px 10px;font-size:.875rem;margin-right:6px;margin-bottom:6px;background:#fff}
  @media (max-width:900px){
    .about-media img{aspect-ratio:16/9}
  }
  
@media (max-width:640px){
  #paket-wedding .thumb{ aspect-ratio:4/3; }
}

/* Icon atas card unggulan */
#unggulan .icon-top{
  width:48px; height:48px;
  margin-bottom:8px;
  color: var(--brand);            /* ikuti warna brand */
  display:block;
  /* outline style */
  fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round;
}

/* Rapihin jarak judul setelah ikon */
#unggulan h3{ margin-top:4px; }

@media (min-width: 900px){
  .card{ display:flex; flex-direction:column; }
  .card-body{ flex: 1 1 auto; }
  .card-footer{ margin-top:auto; padding-top:12px; border-top:1px solid #e2e8f0; }
  .card-footer .calc{
    display:grid; grid-template-columns: 1fr 1fr auto; gap:12px; align-items:end;
  }
}
.card-footer .calc{ display:grid; grid-template-columns: 1fr 1fr; gap:10px; align-items:end; }
.card-footer .calc .order-btn{ margin:0; height:36px; }

/* Note di dalam .grid cols-3/cols-4 melebar sepanjang container */
.gridset-note{
  grid-column: 1 / -1;        /* <-- kunci utamanya */
  margin-top: 12px;
  padding: 10px 12px;
  background: #f8fafc;
  border: 1px dashed #cbd5e1;
  border-radius: 10px;
}

/* === Nusantara slider === */
#harga4 .ns-active{                /* override grid container */
  display:block !important;
  position:relative;
}

#harga4 .ns-track{
  display:flex;
  width:100%;
  overflow:hidden;
  gap:var(--ns-gap,16px);          /* mengikuti gap grid aslinya */
}

#harga4 .ns-track > .card{
  flex:0 0 var(--ns-item-w,260px); /* 4 kartu per layar */
  max-width:none;
}

/* tombol navigasi */
#harga4 .ns-nav{
  position:absolute;
  top:50%; transform:translateY(-50%);
  width:36px; height:36px;
  border-radius:999px;
  border:1px solid #e8e8e8;
  background:#fff;
  box-shadow:0 2px 12px rgba(0,0,0,.12);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; z-index:5;
}
#harga4 .ns-nav.prev{ left:6px; }
#harga4 .ns-nav.next{ right:6px; }
#harga4 .ns-nav[disabled]{ opacity:.35; pointer-events:none; }

/* Mobile: ubah grid jadi slider swipe (tanpa JS) */
@media (max-width:640px){
  /* pastikan selector lebih spesifik dari .grid */
  #harga .gridset[data-mobile-slider]{
    --gap: 16px;                 /* sesuaikan kalau gap grid kamu beda */
    display:flex !important;     /* override .grid { display:grid } */
    gap: var(--gap);
    overflow:auto;
    -webkit-overflow-scrolling:touch;
    scroll-snap-type:x mandatory;
    scroll-behavior:smooth;
    padding: 0;
  }
  
  #harga .gridset[data-mobile-slider] > .card{
    flex: 0 0 calc(100% - var(--gap)); /* 1 kartu per layar, jaga jarak */
    max-width: none;
    scroll-snap-align:start;
  }
}

/* HP: sembunyikan 2 tombol toggle */
@media (max-width:768px){
  .layout-toggle [data-show="#naskotregular"],
  .layout-toggle [data-show="#nasikuning"]{
    display:none !important;
  }
}

/* === FIX: Tabel Gubukan full kontainer & tidak kepotong di HP === */

/* wrapper wajib: scroll horizontal kalau kolom panjang */
.tbl-stall-wrap{
  width:100%;
  overflow-x:auto;
  -webkit-overflow-scrolling: touch;
}

/* tabel full width */
.tbl-stall{
  width:100%;
  border-collapse: collapse;
  table-layout: fixed;            /* kolom stabil */
}

/* sel */
.tbl-stall th, .tbl-stall td{
  padding:8px 10px;
  border-bottom:1px solid var(--line, #e5e7eb);
  vertical-align: top;
  word-break: break-word;         /* pecah kata panjang */
}

/* kolom harga rata kanan */
.tbl-stall td.num{ text-align:right; white-space: nowrap; }

/* --- Mobile tweaks --- */
@media (max-width: 768px){
  /* biar gak meluber, izinkan kolom harga membungkus */
  .tbl-stall td.num{ white-space: normal; }

  /* longgarin layout agar muat */
  .tbl-stall{ table-layout: auto; }
  .tbl-stall th, .tbl-stall td{ padding:2px 10px; font-size:14px; }
}

/* OPTIONAL: kalau tabelnya berada di dalam .card yang punya overflow:hidden,
   buka overflow khusus untuk wrapper tabel ini saja */
    .card .tbl-stall-wrap{
  border:1px solid var(--line);
  border-radius:12px;
  overflow:hidden;                 /* biar sudut tabel ikut membulat */
  background:#fff;
}
    table.tbl{
  width:100%;
  border-collapse:collapse;
  table-layout:fixed;              /* kunci supaya gak melebar */
  font-size:14px;
}

	table.tbl thead th{
  background:var(--soft);
  text-align:left;
  font-weight:600;
}
    table.tbl th,table.tbl td{
  padding:2px 10px;
  border:1px solid var(--line);

  white-space:normal;
  word-break:break-word;           /* teks panjang akan wrap */
}
	table.tbl td.day{
  width:28%;
  white-space:nowrap;
  font-weight:600;
}

:root{
  --topbar-h: 56px;          /* sudah ada */
  --text:  #0f172a;          /* warna teks utama */
  --muted: #334155;          /* <-- ganti lebih gelap (AA pass di 13px+) */
  --soft:  #f1f5f9;          /* latar panel lembut */
  --line:  #e5e7eb;          /* garis/border */
}
body{ color: var(--text); }

#topbar{
  position: fixed; top:0; left:0; right:0;
  z-index: 10000;                     /* pastikan di atas overlay lain */
  background:#fff; border-bottom:1px solid var(--line, #e5e7eb);
}
#topbar .nav{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 0; }
#topbar .brand{ font-weight:800; text-decoration:none; color:#0f172a; }
#topbar .menu{ display:flex; gap:18px; }
#topbar .menu a{ text-decoration:none; color:#0f172a; font-weight:600; padding:8px 10px; border-radius:8px; }
#topbar .menu a:hover{ background:#f8fafc; }
#topbar .menu a.active{ background:rgba(15,23,42,.08); }

/* tombol hamburger */
#topbar .nav-toggle{
  display:none; background:none; border:0; font-size:22px; padding:6px 8px; line-height:1;
  position: relative; z-index: 10001;  /* pastikan bisa diklik (di atas apa pun) */
  pointer-events: auto;
}

@media (max-width:840px){
  #topbar .nav{ padding:10px 4px; }
  #topbar .nav-toggle{ display:inline-block; }
  #topbar .menu{
    position:absolute; left:0; right:0; top:100%;
    background:#fff; border-bottom:1px solid var(--line, #e5e7eb);
    display:none; flex-direction:column; padding:10px;
  }
  #topbar .menu.show{ display:flex !important; } /* paksa tampil saat toggle */
}

/* ruang konten agar tidak ketutup */
html{ scroll-behavior:smooth; scroll-padding-top: var(--topbar-h); }
body{ padding-top: var(--topbar-h); }

/* ===== PERF FIXES: LCP & CLS (2025-10-16) ===== */
.hero-media img{
  width:100%;
  height:auto;
  display:block;
  aspect-ratio:16/9;      /* reserve tinggi sebelum image load */
  object-fit:cover;
  background:#f6f7f9;     /* placeholder halus, cegah “loncat” saat image muncul */
}

/* Opsional: tunda render section berat di bawah fold */
.section.defer{
  content-visibility:auto;           /* browser render saat mendekat viewport */
  contain-intrinsic-size: 1px 1000px;/* reservasi tinggi kira-kira agar tidak geser */
}

/* ===== A11Y & Kontras (2025-10-16) ===== */
:root{
  --text:  #0f172a;   /* teks utama */
  --muted: #334155;   /* lebih gelap agar AA pass */
  --link:  #0b66d0;   /* link biru gelap kontras */
}

body{ color: var(--text); }
a{ color: var(--link); }
a:hover{ text-decoration: underline; }

/* teks “muted” */
.muted, .caption, small, .price small { color: var(--muted); }

/* tombol WA (hijau default kurang kontras utk teks kecil) */
.btn.wa{ background:#1f8e46; color:#fff; }
.btn.wa:hover{ filter:brightness(0.92); }

/* label-visually-hidden tapi masih bisa dibaca screen reader */
.sr-only{
  position:absolute!important; width:1px!important; height:1px!important;
  padding:0!important; margin:-1px!important; overflow:hidden!important;
  clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important;
}

.figure-overlay{ position:relative; }
.figure-overlay .figcap{
  position:absolute; left:0; right:0; bottom:0;
  padding:8px 10px;
  background:linear-gradient(transparent, rgba(0,0,0,.55));
  color:#fff;
}

/* ==== KONTRAS FIX (buttons & ribbons) ==== */
:root{
  /* warna aman untuk teks di atas brand coral */
  --brand-ink-contrast: #0f172a;
  /* hijau WA lebih gelap agar teks putih lulus AA */
  --wa: #196d36; /* (white vs #196d36 ≈ 6.40:1) */
}

/* tombol utama & ribbon pakai teks gelap */
.btn.primary{
  background: var(--brand);
  color: var(--brand-ink-contrast);
  border-color: rgba(15,23,42,.12);
}
.btn.primary svg{ fill: currentColor; stroke: currentColor; }

.ribbon{
  background: var(--brand);
  color: var(--brand-ink-contrast);
}

/* WhatsApp: tetap putih tapi latar lebih gelap */
.btn.wa{
  background: var(--wa);
  color:#fff;
}
/* (opsional) kalau mau tetap hijau lama, pakai teks hitam biar aman:
   .btn.wa{ background:#1f8e46; color:#000; }  (≈5.02:1) */