/* =========================
   Global Theme & Tokens
   ========================= */
:root{
  --radius: 18px;
  --shadow: 0 10px 30px rgba(18, 23, 64, .35);
  --nav-h: 72px; /* fallback, akan diupdate via JS */
}

/* Dark */
:root[data-theme="dark"]{
  --bg:#0f1226; --bg-2:#111536;
  --card:rgba(255,255,255,.06);
  --stroke:rgba(255,255,255,.12);
  --text:#f5f7ff; --muted:#9aa3c7;
  --accent:#6a7dff; --accent-2:#4de1c1;
  --grad-1:#1b1f43; --grad-2:#111536;
  --btn-muted-a:rgba(106,125,255,.18); --btn-muted-b:rgba(77,225,193,.18);
}

/* Light */
:root[data-theme="light"]{
  --bg:#f6f8ff; --bg-2:#ffffff;
  --card:rgba(0,0,0,.04);
  --stroke:rgba(0,0,0,.12);
  --text:#000000; --muted:#000000;
  --accent:#4b6bff; --accent-2:#10bfa4; --accent-3:#fdfdfd; --accent-4:#09e438;
  --grad-1:#ffffff; --grad-2:#edf2ff;
  --btn-muted-a:rgba(75,107,255,.12); --btn-muted-b:rgba(16,191,164,.12);
  --shadow: 0 10px 30px rgba(15, 18, 38, .15);
  --sun-stroke: #FFB300;   /* kuning-oranye untuk garis/rays */
  --sun-fill:   #FFF3B0;
}

/* Base */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family:"Plus Jakarta Sans",system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial;
  color:var(--text);
  background: radial-gradient(1200px 800px at 70% -10%, var(--grad-1) 0%, var(--grad-2) 35%, var(--bg) 75%) fixed;
  line-height:1.6; letter-spacing:.2px;
  padding-top: var(--nav-h); /* supaya konten tidak ketutup header fixed */
}
a{color:inherit; text-decoration:none}
img{max-width:100%; height:auto; display:block; border-radius:12px}
.container{width:min(1150px, 92vw); margin-inline:auto}

/* =========================
   NAV (Fixed + Mobile-first)
   ========================= */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:1000;
  background: linear-gradient(0deg, color-mix(in oklab, var(--bg) 70%, transparent), color-mix(in oklab, var(--bg) 70%, transparent));
  border-bottom:1px solid var(--stroke);
  backdrop-filter:saturate(140%) blur(8px);
}
.nav-wrap{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 0;}
.brand{display:flex; align-items:center; gap:10px; font-weight:800; letter-spacing:.3px}
.logo{
  width:38px; height:38px; border-radius:12px; display:grid; place-items:center;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  box-shadow: 0 6px 20px color-mix(in oklab, var(--accent) 40%, transparent);
}

.gallery img { display:block; width:100%; height:auto; }
.gallery .slot--11 { flex: 1 1 30%; margin:4px; }

/* kanan: toggle ikon + hamburger */
.nav-actions{display:flex; align-items:center; gap:8px}

/* Desktop links hidden by default (mobile-first) */
.nav-links{display:none}
.nav-links a{padding:8px 12px; border-radius:10px; color:var(--muted)}
.nav-links a:hover{background:var(--card); color:var(--text)}
.cta-nav{padding:10px 14px; border-radius:12px; background:linear-gradient(135deg,var(--accent),var(--accent-2)); color:#0a1027; font-weight:800}

/* wadah item dropdown */
.nav-links .dd{ position:relative; }

/* tombol dropdown (desktop) */
.nav-links .dd-toggle{
  display:flex; align-items:center; gap:6px;
  padding:8px 12px; border-radius:10px; color:var(--text);
}
.nav-links .dd-toggle:hover{ background:var(--card); }
.nav-links .dd-toggle .chev{
  width:12px; height:12px; transition:.2s transform;
}

/* menu dropdown */
.nav-links .menu{
  position:absolute; top:calc(100% + 10px); left:0;
  min-width: 320px; background:var(--bg-2);
  border:1px solid var(--stroke); border-radius:12px;
  box-shadow: var(--shadow); padding:8px;
  display:none; z-index: 1001;
}
.nav-links .menu a{
  display:block; padding:10px 12px; border-radius:8px;
  color:var(--text);
}
.nav-links .menu a:hover{ background:var(--hover-solid); }

/* tampil saat hover/focus */
.nav-links .dd:hover .menu,
.nav-links .dd:focus-within .menu{ display:block; }
.nav-links .dd:hover .chev,
.nav-links .dd:focus-within .chev{ transform: rotate(180deg); }

/* jaga agar dropdown tidak muncul di mobile (nav-links disembunyikan di mobile oleh CSS-mu) */
@media (max-width:980px){
  .nav-links .menu{ display:none !important; }
}

/* Tombol hamburger */
.hamburger{
  display:inline-flex; align-items:center; justify-content:center;
  background:none; border:0; color:var(--text);
  padding:8px; border-radius:10px;
}
.hamburger:focus{outline:2px solid var(--stroke)}
.hamburger svg{width:26px; height:26px}

/* Tombol toggle (ikon saja) – selalu tampil di kanan, di luar nav-links */
.theme-icon{
  display:inline-grid; place-items:center;
  width:38px; height:38px; border-radius:12px;
  border:1px solid var(--stroke); background:var(--bg-2);
  cursor:pointer;
}
.theme-icon svg{width:20px; height:20px}
.theme-icon .sun{display:none}
:root[data-theme="light"] .theme-icon .sun{display:block}
:root[data-theme="light"] .theme-icon .moon{display:none}

/* Desktop breakpoint */
@media (min-width:981px){
  .nav-links{display:flex; gap:14px; align-items:center; flex-wrap:wrap}
  .hamburger{display:none} /* hamburger sembunyi di desktop */
}

/* =========================
   MOBILE DRAWER (solid + nav menyatu)
   ========================= */
.mobile{
  position: fixed;
  inset: var(--nav-h) 0 0 0;      /* dinamis sesuai tinggi header */
  background: var(--bg-2);
  border-top: 1px solid var(--stroke);
  display: none;
  z-index: 999;                   /* di bawah header (1000) */
  padding: 12px;
}
.mobile-list{
  background: var(--bg-2);
  border: 1px solid var(--stroke);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: var(--shadow);
}
.mobile-list a{
  display: block;
  padding: 14px 16px;
  color: var(--text);
  text-decoration: none;
  background: transparent;
  margin: 0;
  border: 0;
}
.mobile-list a + a{ border-top:1px solid var(--stroke); }
:root[data-theme="light"] { --hover-solid: #eef2ff; }
:root[data-theme="dark"]  { --hover-solid: #161a36; }
.mobile-list a:hover{ background: var(--hover-solid); }

/* =========================
   HERO
   ========================= */
.hero{position:relative; overflow:hidden}
.hero .grid{display:grid; grid-template-columns:1.2fr .8fr; gap:28px; align-items:center; padding:56px 0}
.badge{display:inline-flex; gap:8px; align-items:center; padding:6px 10px; border-radius:999px; border:1px solid var(--stroke); color:var(--muted); background:var(--bg-2)}
.title{font-size:clamp(28px, 4.2vw, 48px); line-height:1.15; margin:14px 0 10px; font-weight:800}
.subtitle{color:var(--muted); max-width:65ch}
.hero-cta{display:flex; gap:14px; flex-wrap:wrap; margin-top:22px}
.btn{
  padding:14px 18px; border:1px solid var(--stroke); border-radius:16px; display:inline-flex; gap:10px; align-items:center; font-weight:800;
  background:linear-gradient(135deg, var(--btn-muted-a), var(--btn-muted-b));
  transition:.25s transform, .25s box-shadow, .25s background;
}
.btn:hover{transform:translateY(-2px); box-shadow: var(--shadow)}
.btn.primary{background:linear-gradient(135deg,var(--accent),var(--accent-2)); color:#0b102a; border-color:transparent}
.trust{display:flex; gap:18px; margin-top:22px; color:var(--muted); flex-wrap:wrap}
.hero-card{border:1px solid var(--stroke); background:var(--bg-2); border-radius:var(--radius); padding:20px; box-shadow:var(--shadow)}
.hero-card .item{display:flex; gap:12px; padding:12px; border-radius:14px; background:var(--card); border:1px dashed var(--stroke); align-items:flex-start}
.hero-card .item + .item{margin-top:12px}
.icon{
  width:38px; height:38px; border-radius:12px; display:grid; place-items:center;
  background:var(--card); border:1px solid var(--stroke); font-size:18px;
}
.muted{color:var(--muted)}

/* =========================
   SECTIONS & CARDS
   ========================= */
section{padding:48px 0}
.sec-title{font-size:28px; margin:0 0 8px; letter-spacing:.3px}
.sec-sub{color:var(--muted); margin:0 0 24px}

/* Default cards grid */
.cards{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}

/* Khusus “Pilih Layanan” => 2 kolom di semua layar + equal height */
.cards--fixed2{
  grid-template-columns:repeat(2, minmax(0,1fr)) !important;
  align-items:stretch;
}
.cards--fixed2 .card{
  display:grid; grid-template-rows:auto 1fr auto;
  height:100%;
}
.cards--fixed2 .slot{aspect-ratio:16/9}

/* Kartu */
.card{border:1px solid var(--stroke); background:var(--bg-2); border-radius:var(--radius); padding:18px; transition:.25s transform, .25s box-shadow}
.card:hover{transform:translateY(-3px); box-shadow:var(--shadow)}
.list{display:grid; gap:10px; margin:10px 0 0; color:var(--muted)}

/* Grid util */
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.grid-4{display:grid; grid-template-columns:repeat(4,1fr); gap:18px}

/* =========================
   GALLERY & IMAGE SLOTS
   ========================= */
.gallery{display:grid; grid-template-columns:repeat(3,1fr); gap:12px}
.slot{
  aspect-ratio: 4 / 3; border:1px dashed var(--stroke); border-radius:14px;
  display:grid; place-items:center; color:var(--muted); background:var(--bg-2); padding:8px; text-align:center;
}
.slot small{opacity:.85}

/* =========================
   PRICING / FAQ / CONTACT / FOOTER
   ========================= */
.price{background:linear-gradient(180deg, color-mix(in oklab, var(--accent) 12%, transparent), color-mix(in oklab, var(--accent-2) 8%, transparent));
  border:1px solid var(--stroke); border-radius:var(--radius); padding:18px}
.price .nom{font-size:26px; font-weight:800}

.faq{display:grid; gap:12px}
details{border:1px solid var(--stroke); border-radius:14px; padding:14px; background:var(--bg-2)}
details[open]{background:color-mix(in oklab, var(--bg-2), var(--card))}
summary{font-weight:700; cursor:pointer}

.contact{display:grid; grid-template-columns:1.1fr .9fr; gap:18px}
.form{display:grid; gap:12px}
.input{
  width:100%; padding:14px 14px; border-radius:12px; border:1px solid var(--stroke); color:var(--text);
  background:var(--bg-2);
}
textarea.input{min-height:120px; resize:vertical}
.map{border:1px solid var(--stroke); border-radius:var(--radius); overflow:hidden; min-height:280px}

footer{border-top:1px solid var(--stroke); background:color-mix(in oklab, var(--bg), transparent 75%); padding:28px 0; color:var(--muted)}
.foot{display:grid; grid-template-columns:1.2fr .8fr; gap:18px}
.foot small{display:block; margin-top:8px}

/* =========================
   RESPONSIVE
   ========================= */
@media (max-width: 980px){
  .hero .grid{grid-template-columns:1fr}
  .grid-3{grid-template-columns:repeat(2,1fr)}
  .grid-4{grid-template-columns:repeat(2,1fr)}
  .contact{grid-template-columns:1fr}
  .foot{grid-template-columns:1fr}
  .gallery{grid-template-columns:repeat(2,1fr)}
}
@media (max-width: 560px){
  .cards{grid-template-columns:repeat(2,1fr)}
  .cards--fixed2{grid-template-columns:repeat(2,1fr)}
  .grid-3,.grid-4,.gallery{grid-template-columns:1fr}
}
/* warnai ikon matahari (SVG) */
.theme-icon .sun circle,
.theme-icon .sun path{
  stroke: var(--sun-stroke) !important;
}

/* isi lingkaran matahari agar terlihat 'berwarna' */
.theme-icon .sun circle{
  fill: var(--sun-fill) !important;
}

/* opsional: efek hover sedikit glow */
.theme-icon:hover{
  box-shadow: 0 0 0 6px color-mix(in oklab, var(--sun-fill) 35%, transparent);
}
/* Geser nav-links ke kanan (desktop) */
@media (min-width: 981px){
  .nav-links{
    display:flex; gap:14px; align-items:center; flex-wrap:wrap;
    margin-left:auto;           /* dorong ke kanan */
    margin-right:10px;          /* jarak kecil dari toggle tema */
  }
  .nav-actions{
    display:flex; align-items:center; gap:8px; /* toggle + hamburger */
  }
}
/* Dropdown tetap terbuka saat kelas .open aktif */
.nav-links .dd.open .menu{ display:block; }

/* Chevron ikut berputar saat open */
.nav-links .dd.open .chev{ transform: rotate(180deg); }

/* Tampilkan menu saat hover/focus juga (opsi tambahan) */
.nav-links .dd:hover .menu,
.nav-links .dd:focus-within .menu{ display:block; }
/* === Anti-zoom + auto-resize untuk semua gambar === */
img{
  max-width: 100%;
  height: auto;          /* jaga rasio asli */
  display: block;
}

/* Slot gambar (kartu/galeri) – tetap seragam tapi tidak memotong */
.slot{
  aspect-ratio: 16 / 9;  /* boleh 4/3 kalau lebih cocok */
  border: 1px solid var(--stroke);
  border-radius: 14px;
  background: var(--bg-2);
  overflow: hidden;      /* biar rapi di sudut */
  display: grid;
  place-items: center;
  padding: 0;            /* hilangkan padding agar img full */
}

/* Gambar di dalam slot: muat seluruh area TANPA zoom/crop */
.slot > img{
  width: 100%;
  height: 100%;
  object-fit: contain;   /* kunci: tidak dipotong, tidak zoom */
}

/* Variasi opsional kalau butuh rasio lain */
.slot--43 { aspect-ratio: 4 / 3; }
.slot--11 { aspect-ratio: 1 / 1; }

/* NON-zoom di hover */
.slot img, .card img, .gallery img{ transform: none !important; }
/* ==== Pengaturan Slot Gambar (Card/Galeri) ==== */

/* Pakai rasio tetap agar tinggi gambar seragam mengikuti layout */
:root{
  --slot-ratio: 16/9;          /* ubah ke 4/3 atau 1/1 jika butuh */
  --img-bg: color-mix(in oklab, var(--bg-2) 80%, transparent);
}

/* Wadah gambar di dalam card */
.slot{
  width: 100%;
  aspect-ratio: var(--slot-ratio);
  border: 1px solid var(--stroke);
  border-radius: 14px;
  background: var(--img-bg);   /* terlihat penuh tanpa crop (letterbox rapi) */
  overflow: hidden;            /* jaga sudut bulat */
  display: grid;
  place-items: center;
  padding: 0;                  /* gambar menempel ke tepi wadah */
}

/* Gambar memenuhi slot TANPA dipotong */
.slot > img{
  width: 100%;
  height: 100%;
  object-fit: contain;         /* kunci: tidak terpotong */
  object-position: center;
  display: block;
  border-radius: inherit;      /* sudut gambar ikut slot/card */
  background: inherit;         /* untuk PNG transparan */
}

/* Hilangkan efek zoom apapun saat hover */
.card:hover .slot img,
.slot img{ transform: none !important; }

/* VARIASI jika butuh rasio lain (opsional) */
.slot--43 { aspect-ratio: 4 / 3; }
.slot--11 { aspect-ratio: 1 / 1; }
/* === FIX: Floating WhatsApp selalu bulat, kecil, dan nempel kanan-bawah === */
.wa-float{
  position: fixed;
  inset: auto 16px 16px auto;   /* right:16px; bottom:16px */
  z-index: 2200;                /* di atas konten */
  display: block;
  pointer-events: auto;
}

.wa-float__btn{
  display: flex; align-items: center; justify-content: center;
  width: 56px; height: 56px; padding: 0;
  border: 0; border-radius: 999px; cursor: pointer;
  background: linear-gradient(135deg, #25D366, #31f07f);
  color: #fff;
  text-decoration: none;
  box-shadow: 0 12px 28px rgba(37,211,102,.35), inset 0 0 0 1px rgba(0,0,0,.08);
}

.wa-float__btn svg,
.wa-float__btn img{
  width: 28px !important;
  height: 28px !important;
  display: block;
  object-fit: contain;
}

/* Pulse ring */
.wa-float__pulse{
  position: absolute; inset: 0;
  border-radius: 999px; pointer-events: none;
  box-shadow: 0 0 0 0 rgba(37,211,102,.45);
  animation: waPulse 2s infinite;
}
@keyframes waPulse{
  0% { box-shadow: 0 0 0 0 rgba(37,211,102,.45); }
  70%{ box-shadow: 0 0 0 16px rgba(37,211,102,0); }
  100%{ box-shadow: 0 0 0 0 rgba(37,211,102,0); }
}

.wa-float__btn:hover{ transform: translateY(-1px); }

:root[data-theme="dark"] .wa-float__btn{
  box-shadow: 0 12px 28px rgba(37,211,102,.25), inset 0 0 0 1px rgba(255,255,255,.06);
}

@media (max-width:560px){
  .wa-float{ inset: auto 14px 14px auto; }
}
/* === Besarkan tombol WA saat smartphone pakai mode desktop === */
/* Berlaku hanya jika viewport >= 981px (layout desktop) DAN device bertipe touch */
@media (min-width: 981px) and (pointer: coarse),
       (min-width: 981px) and (hover: none){
  .wa-float{
    /* beri jarak aman dengan notch/home bar */
    inset: auto max(18px, env(safe-area-inset-right)) max(18px, env(safe-area-inset-bottom)) auto;
  }
  .wa-float__btn{
    width: 72px;
    height: 72px;
  }
  .wa-float__btn svg,
  .wa-float__btn img{
    width: 34px !important;
    height: 34px !important;
  }
  /* pulse sedikit lebih besar agar proporsional */
  @keyframes waPulseDesktopTouch{
    0%   { box-shadow: 0 0 0 0 rgba(37,211,102,.45); }
    70%  { box-shadow: 0 0 0 24px rgba(37,211,102,0); }
    100% { box-shadow: 0 0 0 0 rgba(37,211,102,0); }
  }
  .wa-float__pulse{ animation: waPulseDesktopTouch 2s infinite; }
}

/* ---- Fallback via class (jika browser tidak dukung pointer/hover MQ) ---- */
:root.desktop-touch .wa-float{
  inset: auto max(18px, env(safe-area-inset-right)) max(18px, env(safe-area-inset-bottom)) auto;
}
:root.desktop-touch .wa-float__btn{
  width: 72px; height: 72px;
}
:root.desktop-touch .wa-float__btn svg,
:root.desktop-touch .wa-float__btn img{
  width: 34px !important; height: 34px !important;
}

/* ===========================
   PAGE TEXT SETTINGS (ADMIN)
   prefix: pt-
   =========================== */

/* Container utama halaman */
.pt-wrapper {
    max-width: 880px;
    margin: 0 auto;
    padding: 18px 20px 24px;
    background: #020617;
    border-radius: 18px;
    border: 1px solid rgba(148, 163, 184, 0.35);
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.55);
}

/* Header judul + deskripsi */
.pt-header {
    margin-bottom: 18px;
}

.pt-header h1 {
    margin: 0 0 4px;
    font-size: 1.15rem;
    font-weight: 600;
    color: #e5e7eb;
    letter-spacing: .02em;
}

.pt-header p {
    margin: 0;
    font-size: .82rem;
    color: #9ca3af;
}

/* Alert sukses */
.pt-alert-success {
    margin-bottom: 12px;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid rgba(16, 185, 129, 0.4);
    background: rgba(6, 95, 70, 0.18);
    color: #bbf7d0;
    font-size: .82rem;
}

/* Filter / dropdown pilih halaman */
.pt-filter {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
    font-size: .82rem;
    color: #e5e7eb;
}

.pt-filter label {
    white-space: nowrap;
}

.pt-filter select {
    min-width: 220px;
    padding: 7px 10px;
    border-radius: 999px;
    border: 1px solid rgba(148, 163, 184, 0.6);
    background: #020617;
    color: #e5e7eb;
    font-size: .82rem;
    outline: none;
    transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}

.pt-filter select:focus {
    border-color: #38bdf8;
    box-shadow: 0 0 0 1px rgba(56, 189, 248, 0.5);
}

/* Form utama */
.pt-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Setiap group field */
.pt-group {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.pt-group label {
    font-size: .82rem;
    font-weight: 500;
    color: #e5e7eb;
}

/* Input & textarea */
.pt-group input[type="text"],
.pt-group textarea {
    width: 100%;
    padding: 9px 11px;
    border-radius: 10px;
    border: 1px solid rgba(55, 65, 81, 0.9);
    background: #020617;
    color: #e5e7eb;
    font-size: .85rem;
    outline: none;
    resize: vertical;
    transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}

.pt-group input[type="text"]::placeholder,
.pt-group textarea::placeholder {
    color: #6b7280;
    font-size: .8rem;
}

.pt-group input[type="text"]:focus,
.pt-group textarea:focus {
    border-color: #6366f1;
    box-shadow: 0 0 0 1px rgba(99, 102, 241, .5);
    background: #020617;
}

/* Footer form - tombol */
.pt-actions {
    margin-top: 10px;
    display: flex;
    justify-content: flex-end;
}

.pt-actions button[type="submit"] {
    border: none;
    border-radius: 999px;
    padding: 8px 18px;
    font-size: .85rem;
    font-weight: 600;
    cursor: pointer;
    background: linear-gradient(135deg, #22c55e, #16a34a);
    color: #022c22;
    box-shadow: 0 14px 30px rgba(22, 163, 74, 0.55);
    transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
}

.pt-actions button[type="submit"]:hover {
    filter: brightness(1.05);
    transform: translateY(-1px);
    box-shadow: 0 18px 40px rgba(22, 163, 74, 0.75);
}

.pt-actions button[type="submit"]:active {
    transform: translateY(0);
    box-shadow: 0 10px 25px rgba(22, 163, 74, 0.6);
}

/* Responsive */
@media (max-width: 640px) {
    .pt-wrapper {
        margin: 0 -8px;
        border-radius: 0;
        border-left: none;
        border-right: none;
    }

    .pt-filter {
        flex-direction: column;
        align-items: flex-start;
    }

    .pt-filter select {
        width: 100%;
    }
}