:root{
      /* Cerah & mewah: orange → merah */
      --brand:#fb923c;          /* Orange 400 */
      --brand-600:#f97316;      /* Orange 500 */
      --brand-700:#ea580c;      /* Orange 600 */
      --accent:#ef4444;         /* Red 500 */
      --ring:rgba(249,115,22,.28);
      --ink:#0f172a; --ink-2:#334155; --muted:#cbd5e1;
      --bg:#0a0f1e; --card:#0f172a;
      --gradient: radial-gradient(1200px 600px at 10% -10%, rgba(249,115,22,.22), transparent 60%),
                  radial-gradient(1000px 700px at 110% 10%, rgba(239,68,68,.18), transparent 55%),
                  linear-gradient(180deg, #0a0f1e 0%, #0b1220 60%);
    }
    *{box-sizing:border-box}
    html,body{height:100%}
    body{
      margin:0; font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
      color:#f1f5f9; background:var(--gradient); overflow-x:hidden;
    }
    a{color:inherit;text-decoration:none}
    img{max-width:100%;height:auto;display:block}
    .container{width:min(1120px, 100% - 2rem); margin-inline:auto}

    /* Shimmer open */
    .skeleton-overlay{position:fixed; inset:0; background:#0b1220; z-index:9999; display:grid; place-items:center}
    .shimmer-card{width:min(520px, 80vw); height:120px; border-radius:16px; overflow:hidden; background:#0f172a; box-shadow:0 20px 60px rgba(249,115,22,.35)}
    .shimmer-line{height:20px; margin:16px 24px; border-radius:12px; background:#0b2135; overflow:hidden; position:relative}
    .shimmer-line::after{content:""; position:absolute; inset:-20%; background:linear-gradient(90deg, transparent, rgba(255,255,255,.08), transparent); animation:shimmer 1.2s linear infinite}
    .shimmer-logo{height:44px; width:220px; margin:16px 24px; border-radius:12px; background:#0b2135; position:relative; overflow:hidden}
    .shimmer-logo::after{content:""; position:absolute; inset:-20%; background:linear-gradient(90deg, transparent, rgba(255,255,255,.09), transparent); animation:shimmer 1.2s linear infinite}
    @keyframes shimmer{from{transform:translateX(-100%)} to{transform:translateX(100%)} }
    .fade-out{animation:fade .5s ease forwards}
    @keyframes fade{to{opacity:0; visibility:hidden}}

    /* Topbar */
    .topbar{position:sticky; top:0; z-index:50; backdrop-filter:saturate(120%) blur(8px); background:rgba(11,18,32,.7); border-bottom:1px solid rgba(255,255,255,.05)}
    .nav{display:flex; align-items:center; justify-content:space-between; padding:12px 0}
    .brand{display:flex; align-items:center; gap:.75rem}
    .brand-logo{width:36px;height:36px;border-radius:10px;background:conic-gradient(from 45deg, var(--brand-600), var(--accent));display:grid;place-items:center;box-shadow:0 8px 24px rgba(249,115,22,.45)}
    .brand-title{font-weight:800; letter-spacing:.2px}
    .nav-actions{display:flex; gap:.75rem}
    .btn{display:inline-flex; align-items:center; gap:.5rem; padding:.7rem 1rem; border-radius:12px; border:1px solid rgba(255,255,255,.08); background:#0f172a}
    .btn:hover{border-color:var(--ring); box-shadow:0 0 0 6px var(--ring)}
    .btn.primary{color:white; background:linear-gradient(180deg, var(--brand-600), var(--brand-700)); border:0; box-shadow:0 10px 30px rgba(249,115,22,.32)}

    /* Hero */
    .hero{position:relative; padding:72px 0 32px}
    .hero-grid{display:grid; grid-template-columns:1.15fr .85fr; gap:2rem; align-items:center}
    .media21x9{aspect-ratio:21/9; border-radius:14px; background:#0d1a2b; display:grid; place-items:center; border:1px solid rgba(249,115,22,.18); margin-bottom:16px}
    .media16x9{aspect-ratio:16/9; border-radius:14px; background:#0d1a2b; display:grid; place-items:center; overflow:hidden; border:1px solid rgba(249,115,22,.18)}
    .ph-img{width:100%; height:100%; display:grid; place-items:center; color:#ffd7c2; font-weight:600; background:linear-gradient(135deg,#1a2436,#26344d)}
    .hero h1{font-size:clamp(28px, 6vw, 56px); line-height:1.05; margin:0 0 12px; color:#fff}
    .hero p{font-size:clamp(15px, 2.2vw, 18px); color:#e2e8f0; margin:0 0 24px}
    .badges{display:flex; gap:.6rem; flex-wrap:wrap; margin:14px 0 0}
    .badge{font-size:12px; padding:.45rem .7rem; border-radius:999px; background:rgba(249,115,22,.16); border:1px solid rgba(249,115,22,.35); color:#fff3e6}
    .hero-card{border:1px solid rgba(255,255,255,.06); background:#0f172a; border-radius:18px; padding:18px; box-shadow:0 12px 40px rgba(249,115,22,.20)}

    /* Sections */
    section{padding:48px 0}
    .section-title{font-size:clamp(22px, 4vw, 36px); margin:0 0 10px}
    .muted{color:#cbd5e1}

    /* Grid utility */
    .grid{display:grid; gap:1rem}
    .grid-3{grid-template-columns:repeat(3, 1fr)}
    .grid-2{grid-template-columns:repeat(2, 1fr)}

    /* Cards */
    .card{background:#0f172a; border:1px solid rgba(249,115,22,.18); border-radius:18px; padding:18px}
    .card:hover{transform:translateY(-2px); transition:.2s ease; box-shadow:0 12px 34px rgba(249,115,22,.25)}
    .icon{width:42px;height:42px;border-radius:11px;background:rgba(249,115,22,.18);display:grid;place-items:center;margin-bottom:.75rem}

    /* Price */
    .price{display:flex; align-items:flex-end; gap:.25rem; margin:.5rem 0 1rem}
    .price strong{font-size:28px}

    /* CTA */
    .cta{background:linear-gradient(180deg, rgba(249,115,22,.14), rgba(249,115,22,.05)); border:1px solid rgba(249,115,22,.35); border-radius:20px; padding:24px}

    /* Chips */
    .chips{display:flex; flex-wrap:wrap; gap:.5rem}
    .chip{border:1px solid rgba(249,115,22,.25); padding:.5rem .75rem; border-radius:999px; font-size:.9rem; background:#0f172a}

    /* Testimoni */
    .testi-head{display:flex; align-items:center; gap:.75rem; margin-bottom:.5rem}
    .avatar{width:40px; height:40px; border-radius:999px; background:#26344d; border:1px solid rgba(249,115,22,.25); display:block}
    .stars{color:#fde047}

    /* Form */
    .form{display:grid; gap:12px}
    input, textarea{
      background:#0b2135; border:1px solid rgba(255,255,255,.08); border-radius:12px; padding:12px 14px; color:#e2e8f0; font:inherit
    }
    input:focus, textarea:focus{outline:2px solid var(--ring)}
    textarea{min-height:120px; resize:vertical}

    /* Footer & FAB */
    footer{border-top:1px solid rgba(255,255,255,.06); padding:28px 0; color:#94a3b8}
    .fab{position:fixed; bottom:20px; right:20px; display:flex; flex-direction:column; gap:10px; z-index:40}
    .fab a{display:inline-flex; align-items:center; gap:.6rem; padding:.8rem 1rem; border-radius:999px; background:linear-gradient(180deg, var(--brand-600), var(--accent)); color:white; box-shadow:0 8px 26px rgba(249,115,22,.38)}

    /* Responsive */
    @media (max-width: 960px){
      .hero-grid{grid-template-columns:1fr}
      .grid-3{grid-template-columns:repeat(2,1fr)}
      .nav-actions{flex-wrap:wrap; justify-content:flex-end}
    }
    @media (max-width: 640px){
      .grid-3, .grid-2{grid-template-columns:1fr}
      .nav{flex-wrap:wrap; gap:.75rem}
      .nav-actions{width:100%; gap:.5rem}
      .nav-actions .btn{flex:1 1 auto; width:100%}
      .hero{padding:56px 0 24px}
      .brand-title{font-size:18px}
    }
    @media (max-width:480px){
      .container{width:calc(100% - 1.5rem)}
      .btn{padding:.65rem .9rem}
      .price strong{font-size:24px}
      .section-title{font-size:26px}
      .brand-title{letter-spacing:.1px}
    }
    .site-footer{border-top:1px solid rgba(255,255,255,.06); padding:36px 0 22px; color:#94a3b8}
.footer-grid{display:grid; gap:2rem; grid-template-columns:2fr 1fr 1fr}
.footer-brand .footer-logo{display:flex; align-items:center; gap:.75rem; margin-bottom:.5rem}
.footer-title{font-weight:800; font-size:18px; color:#e5e7eb}
.footer-text{margin:.35rem 0; color:#cbd5e1}
.footer-text.muted{color:#a3b2c2}
.footer-links h4{margin:.2rem 0 .6rem; color:#e5e7eb; font-size:14px; letter-spacing:.3px}
.footer-links ul{list-style:none; margin:0; padding:0; display:grid; gap:.4rem}
.footer-links a{color:#cfefff}
.footer-links a:hover{color:#fff; text-decoration:underline}
.footer-bottom{display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; padding-top:14px; border-top:1px solid rgba(255,255,255,.06)}
.footer-mini-nav{display:flex; gap:.75rem}
@media (max-width: 960px){ .footer-grid{grid-template-columns:1fr 1fr} }
@media (max-width: 640px){ .footer-grid{grid-template-columns:1fr} .footer-mini-nav{flex-wrap:wrap} }


/* FAB modern */
.fab{
  position:fixed;
  bottom:24px; right:24px;
  display:flex; align-items:center; gap:16px;
  z-index:99;
  backdrop-filter:saturate(120%) blur(6px);
  animation:fab-enter 0.8s ease forwards;
}

.fab-btn{
  width:58px; height:58px;
  border-radius:50%;
  display:grid; place-items:center;
  color:white; font-weight:600;
  box-shadow:0 10px 30px rgba(0,0,0,.25);
  cursor:pointer;
  transition:transform .3s ease, box-shadow .3s ease;
  animation:pulse 2s infinite ease-in-out;
}

/* Tombol kiri = Telepon (Orange–Red) */
.fab-call{
  background:linear-gradient(145deg, var(--brand-700), var(--accent));
  animation-delay:.3s;
}

/* Tombol kanan = WhatsApp (Emerald) */
.fab-wa{
  background:linear-gradient(145deg, #10b981, #059669);
}

/* Hover efek */
.fab-btn:hover{
  transform:scale(1.1) translateY(-2px);
  box-shadow:0 12px 40px rgba(249,115,22,.3);
}

/* Animasi muncul */
@keyframes fab-enter{
  from{opacity:0; transform:translateY(30px) scale(.8)}
  to{opacity:1; transform:translateY(0) scale(1)}
}

/* Animasi pulse lembut */
@keyframes pulse{
  0%,100%{box-shadow:0 0 0 0 rgba(249,115,22,.0)}
  50%{box-shadow:0 0 0 12px rgba(249,115,22,.1)}
}

/* Mobile */
@media(max-width:640px){
  .fab{bottom:16px; right:16px; gap:12px}
  .fab-btn{width:54px; height:54px}
}

/* ===== Footer v2 modern ===== */
.site-footer.v2{
  border-top:1px solid rgba(255,255,255,.06);
  padding:40px 0 22px;
  color:#a9b7c7;
  background:linear-gradient(180deg, transparent, rgba(0,0,0,.08));
}
.footer-head{
  display:grid;
  place-items:center;
  text-align:center;
  gap:16px;
  padding-bottom:22px;
}
.footer-logo-image img{
  width:250px; height:auto; 
  filter: drop-shadow(0 10px 30px rgba(0,0,0,.35));
  transition: transform .25s ease;
}
.footer-logo-image:hover img{ transform:translateY(-2px) scale(1.02) }

.footer-copy .mission{
  margin:.25rem 0 .35rem;
  color:#e5e7eb;
  font-size:clamp(14px, 2vw, 16px);
}
.footer-copy .closing{
  margin:0;
  color:#cbd5e1;
  font-size:clamp(13px, 2vw, 15px);
}

/* Link grid */
.footer-links-wrap{
  display:grid; gap:2rem; 
  grid-template-columns:repeat(3, 1fr);
  padding:24px 0;
  border-top:1px dashed rgba(255,255,255,.08);
  border-bottom:1px dashed rgba(255,255,255,.08);
}
.footer-col h4{
  margin:.2rem 0 .6rem; color:#e5e7eb; font-size:14px; letter-spacing:.3px
}
.footer-col ul{list-style:none; margin:0; padding:0; display:grid; gap:.5rem}
.footer-col a{
  color:#cfefff; position:relative; padding-left:14px;
  transition: color .2s ease;
}
.footer-col a::before{
  content:""; position:absolute; left:0; top:50%; transform:translateY(-50%);
  width:8px; height:8px; border-radius:50%;
  background:linear-gradient(135deg, var(--brand-600), var(--accent));
  box-shadow:0 0 0 4px rgba(249,115,22,.12);
}
.footer-col a:hover{ color:#fff; text-decoration:underline }

/* CTA kecil */
.footer-cta{display:flex; gap:.6rem; flex-wrap:wrap; margin-top:.4rem}
.mini-btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:.55rem .8rem; border-radius:12px; font-size:14px;
  color:white; border:1px solid rgba(255,255,255,.08);
  box-shadow:0 8px 22px rgba(0,0,0,.25);
}
.mini-btn.wa{ background:linear-gradient(145deg, #10b981, #059669) }
.mini-btn.call{ background:linear-gradient(145deg, var(--brand-600), var(--accent)) }

.footer-bottom{
  display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  padding-top:14px;
}
.footer-mini-nav{display:flex; gap:.75rem}
.footer-mini-nav a{color:#cfefff}
.footer-mini-nav a:hover{color:#fff}

/* Responsif */
@media (max-width:960px){
  .footer-links-wrap{ grid-template-columns:1fr 1fr }
}
@media (max-width:640px){
  .footer-links-wrap{ grid-template-columns:1fr }
  .footer-mini-nav{ flex-wrap:wrap }
}

/* ===== Galeri ===== */
#galeri{padding:48px 0}
.gallery-grid{
  display:grid; gap:14px;
  grid-template-columns:repeat(3,1fr); /* laptop/desktop: 3 kolom */
}
.g-item{
  background:#0f172a; border:1px solid rgba(255,255,255,.06);
  border-radius:16px; overflow:hidden; position:relative;
  transition:transform .2s ease, box-shadow .2s ease;
}
.g-item img{
  width:100%; height:100%; aspect-ratio: 4/3; object-fit:cover;
  display:block; transition:transform .35s ease;
}
.g-item:hover{transform:translateY(-2px); box-shadow:0 16px 36px rgba(0,0,0,.28)}
.g-item:hover img{transform:scale(1.04)}
.g-item figcaption{
  position:absolute; left:10px; bottom:10px;
  background:rgba(0,0,0,.45);
  border:1px solid rgba(255,255,255,.08);
  color:#fff; font-size:13px; padding:.35rem .55rem; border-radius:10px;
}

/* HP: 2 kolom */
@media (max-width: 640px){
  .gallery-grid{grid-template-columns:repeat(2,1fr)}
  .g-item img{aspect-ratio: 1/1} /* square biar rapi di HP */
}

/* Tablet: 3 kolom (ikuti desktop) */
@media (min-width: 641px) and (max-width: 959px){
  .gallery-grid{grid-template-columns:repeat(3,1fr)}
}

/* ===== Lightbox minimal ===== */
.glight{
  width:min(980px, 92vw);
  border:none; padding:0; margin:auto;
  background:transparent; overflow:visible;
}
.glight::backdrop{background:rgba(0,0,0,.7); backdrop-filter:blur(2px)}
.glight img{
  width:100%; height:auto; border-radius:16px;
  box-shadow:0 20px 60px rgba(0,0,0,.45);
  border:1px solid rgba(255,255,255,.1);
}
.glight-close{
  position:absolute; top:-36px; right:-6px;
  background:linear-gradient(145deg, var(--brand-600), var(--accent));
  color:#fff; border:none; border-radius:999px; width:34px; height:34px;
  display:grid; place-items:center; cursor:pointer;
  box-shadow:0 10px 24px rgba(0,0,0,.35);
}
.glight-cap{
  text-align:center; color:#e5e7eb; margin-top:8px; font-size:14px;
}

  /* Judul kedip cepat */
  .price-title .blink{
    display:inline-block; padding:.2rem .6rem; border-radius:10px;
    border:1px solid rgba(239,68,68,.45);
    background:linear-gradient(180deg, rgba(249,115,22,.22), rgba(239,68,68,.14));
    animation:blink-fast .8s steps(2, start) infinite;
    box-shadow:0 6px 16px rgba(239,68,68,.22);
  }
  @keyframes blink-fast{0%{opacity:1}50%{opacity:.25}100%{opacity:1}}

  /* Wrapper dengan scroll-x di mobile (tetap tabel) */
  .tbl-wrap{margin-top:14px; border:1px solid rgba(255,255,255,.06); border-radius:14px; overflow:auto; background:rgba(15,23,42,.6)}
  .tbl{width:100%; border-collapse:separate; border-spacing:0; min-width:720px}
  .tbl th, .tbl td{padding:12px 14px; border-bottom:1px solid rgba(255,255,255,.07)}
  .tbl thead th{background:linear-gradient(180deg, rgba(249,115,22,.18), rgba(249,115,22,.06)); text-align:left; color:#e5e7eb; font-weight:700}
  .tbl tbody tr:nth-child(odd){background:rgba(255,255,255,.02)}
  .tbl tbody tr:hover{background:rgba(249,115,22,.06)}
  .tbl td{color:#dbeafe}
  .th-action, .action{text-align:right}

  /* Tombol WA konsisten & lurus */
  .wa-btn{
    display:inline-flex; align-items:center; justify-content:center;
    padding:.45rem .75rem; font-size:13px; color:#fff; border-radius:10px;
    background:linear-gradient(145deg, #10b981, #059669);
    border:1px solid rgba(255,255,255,.08);
    box-shadow:0 8px 20px rgba(0,0,0,.25);
    transition:transform .2s ease, box-shadow .2s ease;
  }
  .wa-btn:hover{transform:translateY(-2px); box-shadow:0 12px 26px rgba(0,0,0,.35)}