/* ============ 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}
  }
  
.ig-lite{display:block; position:relative; aspect-ratio:9/16; border:1px solid var(--line); border-radius:12px; overflow:hidden; background:#000;}
/* play badge */
.ig-lite::after{content:""; position:absolute; inset:auto; left:50%; top:50%; width:64px; height:64px; transform:translate(-50%,-50%);
  background:rgba(0,0,0,.4); border-radius:50%;}
.ig-lite::before{content:""; position:absolute; left:50%; top:50%; transform:translate(-40%,-50%); border-left:18px solid #fff;
  border-top:12px solid transparent; border-bottom:12px solid transparent;}
.ig-lite iframe{position:absolute; inset:0; width:100%; height:100%; border:0; display:block;}

/* ===== Testimoni slider ===== */
#testimoni .gal-slider{ position:relative; isolation:isolate; } /* sama pola galeri */
#testimoni .gal-track{
  display:flex; gap:8px; padding:0; margin:0; overflow:auto;
  scroll-snap-type:x mandatory; scroll-behavior:smooth; scrollbar-width:thin; list-style:none;
}
#testimoni .gal-item{
  flex:0 0 100%;
  margin:0; list-style:none;
  scroll-snap-align:center; scroll-snap-stop:always;
}
/* breakpoint mengikuti pola grid 1/2/3 kolom: 640px & 980px */
@media (min-width:640px){ #testimoni .gal-item{ flex-basis:calc(50% - 4px); } }
@media (min-width:980px){ #testimoni .gal-item{ flex-basis:calc(33.333% - 5.4px); } }

/* wadah embed supaya rapi proporsinya */
#testimoni .ig-embed{ position:relative; width:100%; aspect-ratio:9/16;
  border-radius:12px; overflow:hidden; border:1px solid var(--line); background:#000; }
#testimoni .ig-embed iframe,
#testimoni .ig-embed video{ position:absolute; inset:0; width:100%; height:100%; border:0; display:block; object-fit:cover; }

/* tombol navigasi (reuse gaya nav galeri) */
#testimoni .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);
}
#testimoni .gal-nav.prev{ left:6px; }
#testimoni .gal-nav.next{ right:6px; }
#testimoni .gal-nav:hover{ background:rgba(0,0,0,.5); }

/* Paket Wedding */
#paket-wedding .price { margin-top:8px }
#paket-wedding .price .big {
  font-size:24px; font-weight:800; letter-spacing:.2px;
}
@media (min-width:980px){
  #paket-wedding .price .big { font-size:28px; }
}
#paket-wedding .venue-fig{ margin:8px 0 10px; }
#paket-wedding .thumb{
  width:100%;
  aspect-ratio:16/9;
  object-fit:cover;
  border-radius:12px;
  border:1px solid var(--line);
  background:#f8fafc;
}
@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; }

/* modal sederhana */
/* ===== Global modal ===== */
.modal-overlay{
  position: fixed; inset: 0; display: none;
  align-items: center; justify-content: center;
  background: rgba(0,0,0,.45);
  z-index: 9999; padding: 16px;
}
.modal-overlay.open{ display: flex; }
.modal{
  position: relative;
  background: #fff; border: 1px solid var(--line); border-radius: 14px;
  width: min(600px, 96vw); padding: 16px; box-shadow: var(--shadow, 0 10px 30px rgba(0,0,0,.12));
}
.modal .modal-close{
  position: absolute; right: 14px; top: 10px;
  background: #eee; border: 0; width: 34px; height: 34px; border-radius: 10px; cursor: pointer;
}

/* ===== Modal: versi nyaman (roomy) ===== */
.modal-overlay{
  position: fixed; inset: 0;
  display: none; align-items: center; justify-content: center;
  background: rgba(15, 23, 42, .45);
  backdrop-filter: blur(2px);
  z-index: 9999; padding: 20px;
  pointer-events: none;
}
.modal-overlay.open{ display:flex; pointer-events:auto; }

#orderModal .modal{
  max-width: 720px; width: 100%;
  padding: 22px; border-radius: 16px;
  background: #fff; border: 1px solid var(--line);
  box-shadow: 0 20px 60px rgba(2,6,23,.2);
}

#orderModal h3{
  margin: 0 0 14px; font-size: 18px; font-weight: 700; color:#0f172a;
}

/* ===== Fix ukuran field di modal ===== */
#orderModal .modal,
#orderModal .modal * {
  box-sizing: border-box;           /* biar width:100% tidak meluber */
}

#orderModal .modal {
  max-width: 680px;                 /* pastikan modalnya tidak terlalu lebar */
}

/* Field nyaman & tidak tinggi */
#orderModal .modal-form .input input {
  width: 100%;
  max-width: 100%;
  height: 36px;                     /* <— lebih pendek */
  padding: 6px 10px;
  font-size: 14px;
  line-height: 1.2;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
}

/* Jarak grid sedikit dipadatkan */
#orderModal .form-grid { gap: 12px; }
#orderModal .summary { padding: 10px; }

/* (opsional) readonly tampak netral tapi tetap muat */
#orderModal .modal-form .input input[readonly] {
  background: #f8fafc;
  color: #0f172a;
}

/* form layout */
.modal-form{ display:flex; flex-direction:column; gap:16px; }

.form-grid{ display:grid; gap:16px; }
.form-grid.two{ grid-template-columns: 1fr 1fr; }
.form-grid .full{ grid-column: 1 / -1; }

@media (max-width: 640px){
  .form-grid.two{ grid-template-columns: 1fr; }
  #orderModal .modal{ padding: 16px; border-radius: 14px; }
}

/* field */
.modal-form .input{ display:block; }
.modal-form .input span{
  display:block; margin-bottom:8px; font-size:12.5px; color:#475569;
}
.modal-form .input input{
  width:100%; height:44px; padding:10px 12px;
  border:1px solid #e2e8f0; border-radius:12px; outline:0;
  background:#fff; color:#0f172a;
}
.modal-form .input input[readonly]{ background:#f8fafc; }
.modal-form .input input:focus{
  border-color:#94a3b8; box-shadow:0 0 0 3px rgba(59,130,246,.15);
}

/* summary */
.summary{
  padding:14px; border:1px solid #e2e8f0; border-radius:12px;
  background:#f8fafc;
}
.summary-title{ font-weight:600; font-size:14px; color:#334155; margin-bottom:8px; }
.summary-list{ margin:0; padding-left:18px; }
.summary-list li{ margin:4px 0; }

/* divider & actions */
.divider{ height:1px; background:#e2e8f0; margin:2px 0; }
.actions{ display:flex; gap:10px; justify-content:flex-end; margin-top:4px; }

/* close button */
#orderModal .modal-close{
  position:absolute; right:14px; top:12px;
  width:34px; height:34px; border:0; border-radius:10px; cursor:pointer;
  background:#eef2f7; color:#0f172a;
}
#orderModal .modal-close:hover{ background:#e2e8f0; }


/* total tampilan */
.totalbox .big{font-weight:800; font-size:20px}
@media (min-width:980px){ .totalbox .big{font-size:22px} }

/* Perkecil kolom Kuantiti di Prasmanan Ruby */
.calc{
  grid-template-columns: auto 1fr; /* kolom 1 selebar konten, kolom 2 sisa ruang */
  align-items: end;
}
.calc .input { max-width: 160px; }   /* label + input */
.calc .qty{
  width: 40px;                 /* kecil dan rapi */
  padding: 6px 8px;
}

@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;
}

/* hanya untuk grid di section wedding */
#paket-wedding .grid > * { min-width: 0; }

#paket-wedding .grid.cols-4{
  display:grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap:16px;
}
@media (max-width:1024px){ #paket-wedding .grid.cols-4{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width:560px){  #paket-wedding .grid.cols-4{ grid-template-columns: 1fr; } }

#paket-wedding .card{ min-width:0; max-width:100%; box-sizing:border-box; }

/* Frame gambar konsisten 16:9 + crop rapi */
#paket-wedding .venue-fig{
  border:1px solid var(--line);
  border-radius:12px;
  background:#f8fafc;
  overflow:hidden;
  aspect-ratio: 16/9;               /* tinggi mengikuti lebar, stabil di mobile */
}
#paket-wedding .venue-fig .thumb{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;                  /* fill & crop */
}

/* teks panjang tidak melar */
#paket-wedding .venue-desc,
#paket-wedding .muted,
#paket-wedding .price .big{ overflow-wrap:anywhere; word-break:break-word; }

/* dropdown full width di kartu */
#paket-wedding select.venue{ width:100%; max-width:100%; }

/* ===== Wedding: rapihin deskripsi + border ===== */
#paket-wedding .venue-desc {
  font-size: 13px;           /* kecilin teks */
  line-height: 1.45;         /* biar enak dibaca */
  color: var(--muted);       /* warna lebih soft */
  background: #fbfdff;       /* latar tipis */
  border: 1px solid rgba(15,23,42,.08);  /* border tipis */
  border-radius: 10px;
  padding: 10px 12px;
  margin-top: 10px;
  overflow-wrap: anywhere;   /* kalau ada teks panjang */
  word-break: break-word;
}

/* Bold di dalam deskripsi tetap jelas tapi nggak terlalu tebal */
#paket-wedding .venue-desc b,
#paket-wedding .venue-desc strong {
  color: #0f172a;
  font-weight: 600;
}

/* Spasi antar paragraf/list di deskripsi */
#paket-wedding .venue-desc p { margin: 0 0 6px; }
#paket-wedding .venue-desc ul { margin: 6px 0 0 18px; padding: 0; }

/* Bingkai gambar juga dibuat lebih halus */
#paket-wedding .venue-fig {
  border: 1px solid rgba(15,23,42,.08);
  border-radius: 12px;
  background: #f8fafc;
}

/* (opsional) kecilkan font harga label "Harga", bukan angkanya */
#paket-wedding .price small { font-size: 12px; color: var(--muted); }	

/* ===== Wedding: kecilkan spasi heading & rapikan list ===== */
#paket-wedding .pack h4{
  line-height: 1.25;
  margin: 8px 0 4px;        /* kurangi jarak atas/bawah */
  font-weight: 700;
}

/* h4 kamu ada di dalam <ul>, jadi kita tetap rapihin tampilannya */
#paket-wedding .pack ul{
  margin: 8px 0 10px;       /* list tidak kebesaran jaraknya */
  padding-left: 16px;       /* indent bullet secukupnya */
}
#paket-wedding .pack ul li{
  margin: 2px 0;            /* jarak antar item lebih rapat */
}

/* pemisah halus antar section h4 di dalam ul */
#paket-wedding .pack ul h4{
  display: block;
  margin: 10px 0 6px;       /* heading di dalam ul lebih rapat */
  padding-top: 6px;
  border-top: 1px dashed rgba(15,23,42,.12);
}
#paket-wedding .pack ul h4:first-child{
  border-top: 0;
  padding-top: 0;
  margin-top: 0;
}

: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) */

/* =========================================================
   THEME VARIANT: Bogor (scoped)
   Added: 2025-10-16
   ========================================================= */
.theme-bogor{
  --brand: #16a34a;     /* emerald-600 */
  --brand-ink: #065f46; /* emerald-800 */
}

.theme-bogor .hero{
  background: radial-gradient(1200px 320px at 50% -100px, rgba(22,163,74,.08), transparent) no-repeat;
}

.theme-bogor .badge{ background:#eaf7ee; color:var(--brand-ink); }

.theme-bogor .section h2{
  border-left:6px solid var(--brand);
  padding-left:12px;
}

/* Utility: pill list for areas */
.pill-list{
  display:flex; flex-wrap:wrap; gap:8px; padding:0; margin:12px 0 0; list-style:none;
}
.pill-list li{
  padding:6px 12px; border:1px solid var(--line); border-radius:999px; background:#fff;
}
.theme-bogor .pill-list li{ border-color:rgba(22,163,74,.35); background:#f7fbf8; }

/* Hero bullet points */
.hero-points{ margin:12px 0 0 18px; }
.hero-points li{ margin:4px 0; }

/* === Bogor variant v2: distinct cards, nav, body background === */
.theme-bogor{
  --bg:#f8fbf9;                /* lebih lembut dibanding putih */
  --radius:18px;               /* card lebih bulat */
}
/* Body subtle pattern */
body.theme-bogor{
  background:
    radial-gradient(600px 180px at 50% -80px, rgba(22,163,74,.06), transparent) no-repeat,
    var(--bg);
}

/* Card shape & accent */
.theme-bogor .card{
  border-radius:18px;
  border:1px solid rgba(22,163,74,.20);
  box-shadow:0 8px 24px rgba(2,6,23,.06);
  overflow:hidden;
}
.theme-bogor .card .head{
  border-bottom:1px dashed rgba(22,163,74,.25);
}
.theme-bogor .card .price, .theme-bogor .card h3{
  color:#0b3d2e;
}
.theme-bogor .card .muted{ color:#345f52; }
.theme-bogor .card .foot{
  background:linear-gradient(180deg, rgba(22,163,74,.05), rgba(22,163,74,.0));
  border-top:1px dashed rgba(22,163,74,.25);
}

/* Pill nav (desktop) */
.theme-bogor .desk-nav a{
  padding:6px 12px;
  border:1px solid transparent;
  border-radius:999px;
}
.theme-bogor .desk-nav a:hover{
  background:#eaf7ee;
  border-color:rgba(22,163,74,.35);
}
.theme-bogor .desk-nav a.active{
  background:var(--brand);
  color:#fff;
  border-color:var(--brand);
}

/* Topbar background & blur */
.theme-bogor .topbar{
  background:rgba(255,255,255,.85);
  backdrop-filter:saturate(1.2) blur(6px);
  border-bottom:1px solid rgba(22,163,74,.12);
}

/* Buttons */
.theme-bogor .btn{ border-radius:12px; }
.theme-bogor .btn.ghost{ border-color:rgba(22,163,74,.35); }
.theme-bogor .btn.primary{ background:var(--brand); }

/* Hero media rounding */
.theme-bogor .hero-media img, .theme-bogor .hero-media video{
  border-radius:16px;
}

/* FAQ & feature cards icon tint */
.theme-bogor .feature .icon, .theme-bogor .faq .q:before{
  color:var(--brand);
}

/* === Bogor variant v3 (readability-focused) — 2025-10-16 === */
/* Keep unique look (pill nav, dashed sections, rounded cards), but boost contrast & legibility */
.theme-bogor {
  --bg:#ffffff;                 /* back to pure white for max contrast */
  --ink:#0b1324;                /* slightly deeper ink */
  --muted:#334155;              /* slate-700 for better readability */
  --line:#d9e2dd;               /* softer line tint */
}

/* Body: remove global green wash — keep clean white */
body.theme-bogor{
  background:var(--bg);
}

/* Hero: apply the green accent only inside hero block */
.theme-bogor .hero{
  background: radial-gradient(1200px 360px at 50% -120px, rgba(22,163,74,.08), transparent) no-repeat;
  border-bottom:1px solid rgba(22,163,74,.10);
}
.theme-bogor .hero h1{
  color:var(--ink);
  line-height:1.2;
  letter-spacing:-.015em;
  font-weight:800;
}
.theme-bogor .hero p{ color:var(--muted); max-width:72ch; }

/* Cards: keep distinct style but increase contrast */
.theme-bogor .card{
  background:#fff;
  border:1px solid rgba(22,163,74,.22);
  box-shadow:0 10px 28px rgba(2,6,23,.06);
}
.theme-bogor .card .muted{ color:var(--muted); }
.theme-bogor .card h3, .theme-bogor .card .price{ color:#0b3d2e; }

/* Nav: ensure text contrast against blur background */
.theme-bogor .topbar{
  background:rgba(255,255,255,.92);
  border-bottom:1px solid rgba(22,163,74,.14);
}
.theme-bogor .desk-nav a{ color:var(--ink); }
.theme-bogor .desk-nav a.active{ color:#fff; }

/* Feature/FAQ icons remain green, but questions/answers use high-contrast text */
.theme-bogor .feature p, .theme-bogor .faq .a{ color:var(--muted); }
.theme-bogor .faq .q{ color:var(--ink); }

/* Buttons: rounded and high-contrast focus states */
.theme-bogor .btn{ border-radius:12px; }
.theme-bogor .btn:focus-visible{ outline:2px solid var(--brand); outline-offset:2px; }

/* Small typography polish */
.theme-bogor .caption{ color:#475569; }
.theme-bogor .badge{ background:#eaf7ee; color:#065f46; }

/* 1 kartu per layar di ≤640px */
@media (max-width:640px){
  #harga4 .ns-track{
    display:flex !important;
    gap: var(--ns-gap,16px);
    overflow:auto;
    -webkit-overflow-scrolling:touch;
  }
  #harga4 .ns-track > .card{
    flex: 0 0 calc(100% - var(--ns-gap,16px)) !important;  /* full width */
    max-width: none !important;
  }
}

/* 2 kartu per layar di tablet */
@media (min-width:641px) and (max-width:980px){
  #harga4 .ns-track > .card{
    flex: 0 0 calc(50% - var(--ns-gap,16px)) !important;
    max-width: none !important;
  }
}