:root{
  --navy:#0E3F60; --navy-2:#0A314C; --navy-3:#072638;
  --gold:#C7A149; --gold-2:#E8C979; --gold-3:#A67F1C;
  --ink:#0f172a; --white:#fff; --glass:rgba(255,255,255,.82); --stroke:rgba(255,255,255,.34);
}
*{box-sizing:border-box} html,body{height:100%}
body{
  margin:0;font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans",Arial,sans-serif;color:var(--ink);
  background:
    radial-gradient(1100px 520px at 70% -10%, rgba(255,255,255,.16), rgba(255,255,255,0) 60%),
    linear-gradient(180deg, var(--navy) 0%, var(--navy-2) 52%, var(--navy-3) 100%);
  background-attachment:fixed,fixed;
}
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;opacity:.06;
  background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="220" height="220" viewBox="0 0 220 220"><g fill="none" stroke="%23ffffff" stroke-width="0.7"><path d="M30 30h160v160H30zM60 60h100v100H60z"/><path d="M110 0v220M0 110h220"/></g></svg>');
  background-size:220px;background-repeat:repeat;
}
.container{max-width:1200px;margin:0 auto;padding:0 18px}

/* NAV */
.nav{position:sticky;top:0;z-index:80;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-bottom:1px solid rgba(255,255,255,.18)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0}
.brand{display:flex;gap:10px;align-items:center}
.logo{width:44px;height:44px;border-radius:12px;background:#fff;display:flex;align-items:center;justify-content:center;overflow:hidden;border:1px solid rgba(0,0,0,.08)}
.logo img{width:100%;height:100%;object-fit:contain;display:block}
.logo .fallback{display:none;width:100%;height:100%;align-items:center;justify-content:center;font-weight:900;color:#1E2634;background:conic-gradient(from 210deg,var(--gold-2),var(--gold))}
.brand b{color:#fff;letter-spacing:.3px;text-shadow:0 1px 2px rgba(0,0,0,.35)}
.menu{display:flex;gap:6px;align-items:center}
.menu>li{list-style:none;position:relative}
.menu>li>a{color:#E7F0F7;text-decoration:none;padding:10px 12px;display:inline-block;font-weight:700;border-radius:10px}
.menu>li>a:hover{color:#fff;background:rgba(255,255,255,.08)}
.menu>li:hover .panel{opacity:1;visibility:visible;transform:translateY(0)}
.panel{position:absolute;left:0;top:100%;min-width:560px;background:#fff;border:1px solid rgba(15,65,99,.12);border-radius:14px;box-shadow:0 20px 48px rgba(0,0,0,.14);padding:14px;display:grid;grid-template-columns:1fr 1fr;gap:12px;opacity:0;visibility:hidden;transform:translateY(6px);transition:.18s}
.panel h4{margin:0 0 6px;color:#0f4163}
.panel a{display:block;color:#365b75;text-decoration:none;padding:6px 8px;border-radius:10px}
.panel a:hover{background:#F6FAFF}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:8px;background:linear-gradient(180deg,#1C6A97,#144E71);color:#fff;border:none;padding:12px 18px;border-radius:12px;text-decoration:none;font-weight:800;letter-spacing:.2px;box-shadow:0 10px 24px rgba(12,63,97,.35)}
.btn.gold{background:linear-gradient(180deg,var(--gold),var(--gold-2));color:#1E2634;border:1px solid rgba(166,127,28,.8);box-shadow:0 12px 26px rgba(199,161,73,.45),inset 0 1px 0 rgba(255,255,255,.8)}
.btn.ghost{background:transparent;border:1.5px solid rgba(255,255,255,.92);color:#fff}
.pill{border-radius:999px;padding:6px 12px;font-size:12px;letter-spacing:.3px}

/* Mobile drawer */
.hamb{display:none;color:#fff;font-size:18px;padding:10px 14px;border:1px solid rgba(255,255,255,.25);border-radius:10px}
@media(max-width:920px){.menu{display:none}.hamb{display:inline-flex}}
.drawer{position:fixed;inset:0 0 0 auto;width:86%;max-width:420px;background:#fff;transform:translateX(100%);transition:.22s ease;z-index:99;box-shadow:-20px 0 48px rgba(0,0,0,.22)}
.drawer.open{transform:none}
.drawer header{display:flex;align-items:center;justify-content:space-between;padding:14px;border-bottom:1px solid #eee}
.drawer a{display:block;padding:12px 16px;color:#0B3C58;text-decoration:none;border-top:1px solid #f2f4f7;font-weight:700}
.drawer a:hover{background:#EEF6FF}
.backdrop{position:fixed;inset:0;background:rgba(0,0,0,.35);backdrop-filter:blur(2px);opacity:0;visibility:hidden;transition:.2s;z-index:98}
.backdrop.show{opacity:1;visibility:visible}

/* HERO */
.hero{position:relative;padding:64px 0 54px}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.18),rgba(0,0,0,.06) 40%,rgba(0,0,0,0));pointer-events:none}
.hero-wrap{display:grid;gap:18px;align-items:stretch;grid-template-columns:1.05fr .95fr}
@media(max-width:980px){.hero-wrap{grid-template-columns:1fr}}
.card{background:var(--glass);border:1px solid var(--stroke);border-radius:18px;box-shadow:0 20px 48px rgba(0,0,0,.22)}
.card .c{padding:22px}
.hero .lead h1{color:#fff;font-size:40px;line-height:1.15;margin:10px 0 6px;letter-spacing:.2px;text-shadow:0 2px 8px rgba(0,0,0,.45)}
.hero .lead p{color:#F2F8FF;margin:0 0 14px;text-shadow:0 1px 2px rgba(0,0,0,.5)}
.badge{display:inline-flex;align-items:center;gap:8px;background:linear-gradient(180deg,rgba(199,161,73,.38),rgba(199,161,73,.2));color:#2c1e04;border:1px solid rgba(166,127,28,.8);padding:6px 10px;border-radius:999px;font-size:12px;box-shadow:0 10px 22px rgba(199,161,73,.28),inset 0 1px 0 rgba(255,255,255,.7)}
.orn{margin:10px 0 14px;width:300px;height:18px;background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 36"><g fill="none" stroke="%23C7A149" stroke-width="3"><path d="M14 18H260"/><path d="M340 18H586"/><path d="M300 6l10 12 10-12 10 12-10 12-10-12-10 12-10-12z" fill="%23C7A149"/></g></svg>');background-size:contain;background-repeat:no-repeat;background-position:left center}
.metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
@media(max-width:560px){.metrics{grid-template-columns:repeat(2,1fr)}}
.metric{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.42);color:#fff;border-radius:12px;padding:12px 14px;text-align:center;box-shadow:inset 0 1px 0 rgba(255,255,255,.28);text-shadow:0 1px 2px rgba(0,0,0,.45)}
.metric b{font-size:20px}
.stack{display:grid;gap:12px}
.feature{display:flex;gap:12px;align-items:flex-start;background:#fff;border:1px solid rgba(15,65,99,.12);border-radius:14px;padding:12px 14px}
.ficon{min-width:38px;height:38px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:linear-gradient(180deg,var(--gold-2),var(--gold));color:#1c2433;font-weight:900;box-shadow:0 8px 18px rgba(199,161,73,.35),inset 0 1px 0 rgba(255,255,255,.6)}

/* SECTIONS */
.section{padding:42px 0}
.section h2{color:#fff;text-align:center;margin:0 0 6px;letter-spacing:.2px;text-shadow:0 2px 6px rgba(0,0,0,.45)}
.orn-center{margin:10px auto 18px;width:240px;height:16px;background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 480 32"><g fill="none" stroke="%23C7A149" stroke-width="3"><path d="M10 16 H200"/><path d="M280 16 H470"/><path d="M240 6 L249 16 L258 6 L267 16 L258 26 L249 16 L240 26 L231 16 Z" fill="%23C7A149"/></g></svg>');background-size:contain;background-repeat:no-repeat;background-position:center}
.muted{color:#EAF2F8;text-align:center;margin:0 0 18px;text-shadow:0 1px 2px rgba(0,0,0,.45)}
.grid{display:grid;gap:14px}
@media(min-width:900px){.grid-3{grid-template-columns:repeat(3,1fr)} .grid-4{grid-template-columns:repeat(4,1fr)}}

/* JADWAL (tetap) */
.viewTabs{display:flex;gap:8px;justify-content:flex-end;align-items:center;margin:0 0 8px}
.tab{display:inline-flex;gap:8px;align-items:center;border:1px solid rgba(15,65,99,.2);background:#fff;border-radius:999px;padding:6px 10px;font-weight:800;color:#0f4163;cursor:pointer}
.tab input{display:none}
.cards,.tableWrap{display:none}
#tabCards:checked ~ .cards{display:block}
#tabTable:checked ~ .tableWrap{display:block}

/* ===== LIVE stream + kontrol custom + panah geser ===== */
.ratio.livebox{
  position:relative; width:100%;
  aspect-ratio:16/9; background:#000; border-radius:14px; overflow:hidden;
}
.ratio.vertical{ aspect-ratio:9/16; width:100%; max-width:420px; margin-inline:auto; }
.ratio.livebox iframe{
  position:absolute; inset:0; width:100%; height:100%; border:0;
  pointer-events:none; /* video tidak bisa diklik */
}
/* Badge judul stream */
.live-badge{
  position:absolute; left:14px; top:14px; z-index:3;
  padding:6px 10px; border-radius:999px; font-weight:800; font-size:12px;
  background:rgba(255,255,255,.92); color:#0b3c58; border:1px solid rgba(15,65,99,.12);
  box-shadow:0 10px 22px rgba(0,0,0,.18);
}
/* Tombol kontrol play/mute */
.yt-controls{
  position:absolute; left:14px; bottom:14px; z-index:3; display:flex; gap:10px;
  transition:opacity .25s ease;
}
.yt-controls.is-hidden{opacity:0; pointer-events:none}
.yt-btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:9px 12px; border-radius:999px; font-weight:800;
  background:rgba(255,255,255,.92); color:#0b3c58;
  border:1px solid rgba(15,65,99,.12); box-shadow:0 10px 22px rgba(0,0,0,.18);
  cursor:pointer; user-select:none;
}
.yt-btn:active{ transform:translateY(1px) }
.yt-btn .ico{font-size:14px}
/* Panah next / prev */
.nav-arrow{
  position:absolute; top:50%; transform:translateY(-50%);
  width:42px; height:42px; border-radius:999px; z-index:3;
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.92); color:#0b3c58; font-weight:900; font-size:18px;
  border:1px solid rgba(15,65,99,.12); box-shadow:0 10px 22px rgba(0,0,0,.18);
  cursor:pointer; user-select:none;
}
.nav-arrow.left{ left:14px }
.nav-arrow.right{ right:14px }
.nav-arrow:active{ transform:translateY(-50%) translateX(1px) }

/* ====== GALERI VIDEO ====== */
.chipRow{display:flex;gap:10px;justify-content:center;margin:8px 0 12px;flex-wrap:wrap}
.chipBtn{border:1.5px solid rgba(255,255,255,.92);color:#fff;background:transparent;padding:8px 12px;border-radius:999px;font-weight:800;cursor:pointer}
.chipBtn.active{background:linear-gradient(180deg,var(--gold),var(--gold-2));color:#1d2433;border-color:rgba(166,127,28,.9)}

/* Table jadwal (tetap) */
.timeline{position:relative;margin:6px 0}
.timeline::before{content:"";position:absolute;left:26px;top:0;bottom:0;width:2px;background:linear-gradient(180deg,rgba(199,161,73,.7),rgba(199,161,73,.2))}
.jcard{position:relative;display:flex;gap:14px;background:#fff;border:1px solid rgba(15,65,99,.08);border-radius:14px;padding:12px 14px;margin:12px 0;box-shadow:0 12px 26px rgba(0,0,0,.08)}
.dot{position:absolute;left:18px;top:18px;width:16px;height:16px;border-radius:999px;background:linear-gradient(180deg,var(--gold),var(--gold-2));border:2px solid #fff;box-shadow:0 6px 12px rgba(199,161,73,.4)}
.datebox{min-width:96px;text-align:center;border-right:1px dashed rgba(15,65,99,.15);padding-right:12px}
.datebox .d{font-size:22px;font-weight:900;color:#0f4163;line-height:1}
.datebox .m{font-weight:800;color:#365b75}
.datebox .y{font-size:12px;color:#6b7f91}
.info{flex:1}
.info h4{margin:0 0 4px;color:#0b3c58}
.meta{display:flex;gap:10px;flex-wrap:wrap;color:#355068;font-size:14px}
.chip{display:inline-block;padding:4px 10px;border-radius:999px;font-weight:800;font-size:12px;border:1px solid}
.open{background:#DCFCE7;color:#166534;border-color:#86EFAC}
.full{background:#FFE4E6;color:#991B1B;border-color:#FECDD3}
.cta-slot{display:flex;align-items:center;gap:10px}
.tableWrap{padding:14px;overflow:auto;background:#fff;border:1px solid rgba(15,65,99,.08);border-radius:14px}
table{width:100%;border-collapse:collapse;font-size:14px}
thead th{background:#F6FAFF;color:#0f4163;font-weight:800}
th,td{padding:12px 10px;border-top:1px solid #eef2ff;text-align:left;white-space:nowrap}
tbody tr:nth-child(odd){background:#fcfdff}
tbody tr:hover{background:#f7fbff}

/* FOOTER & FLOAT */
footer{border-top:1px solid rgba(255,255,255,.18);padding:24px 0;margin-top:36px}
.sticky-cta{position:fixed;bottom:16px;left:50%;transform:translateX(-50%);display:none;z-index:70}
.sticky-cta .btn{border-radius:999px;padding:14px 22px}
@media(max-width:740px){.sticky-cta{display:block}}
.wa{position:fixed;right:16px;bottom:16px;z-index:90;display:flex;align-items:center;gap:10px;text-decoration:none}
.wa .chip{display:none;background:rgba(255,255,255,.92);border:1px solid rgba(15,65,99,.12);padding:8px 12px;border-radius:999px;color:#0f4163;font-weight:800}
.wa .bubble{width:54px;height:54px;border-radius:999px;background:#25D366;display:flex;align-items:center;justify-content:center;box-shadow:0 12px 26px rgba(0,0,0,.28)}
@media(min-width:860px){.wa .chip{display:block}}

/* Micro-tweak mobile kecil */
@media(max-width:420px){
  .btn.pill{ padding:8px 10px; font-size:11px }
  .brand b{ font-size:14px }
}
/* === HERO: Bikin tulisan lebih kebaca (teks gelap di glass terang) === */
.hero .lead.card{
  background: rgba(255,255,255,.95);
  border-color: rgba(0,0,0,.06);
  backdrop-filter: blur(10px);
}
.hero .lead h1{
  color:#0b3c58;
  text-shadow:none;
}
.hero .lead p{ color:#28506e; }
.metrics .metric{
  background:#ffffff;
  border-color: rgba(14,63,96,.18);
  color:#1b2a3a;
}
.metric b{ color:#0b3c58; }
/* === Tombol Lihat Paket: ubah jadi warna gold === */
.btn.ghost[href="#paket"]{
  background: linear-gradient(180deg,#E8C979,#C7A149);
  color: #1E2634 !important;
  border: 1px solid rgba(166,127,28,.9);
  box-shadow: 0 12px 26px rgba(199,161,73,.45), inset 0 1px 0 rgba(255,255,255,.8);
}
.btn.ghost[href="#paket"]:hover{
  filter: brightness(1.08);
}

/* === Perbaiki posisi label Best Value (ribbon) === */
.ribbon {
  position: absolute;
  top: 12px;
  left: 12px;
  background: linear-gradient(180deg,#E8C979,#C7A149);
  color: #1E2634;
  font-weight: 800;
  font-size: 13px;
  padding: 6px 14px;
  border-radius: 999px;
  box-shadow: 0 6px 16px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.6);
  border: 1px solid rgba(166,127,28,.7);
  z-index: 3;
}
/* === Ribbon Best Value: geser ke kanan tanpa ngangkat isi === */
.ribbon {
  position: absolute;
  top: 12px;              /* jarak dari atas */
  right: 16px;            /* pindah ke kanan */
  background: linear-gradient(180deg,#E8C979,#C7A149);
  color: #1E2634;
  font-weight: 800;
  font-size: 13px;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid rgba(166,127,28,.7);
  box-shadow: 0 6px 16px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.6);
  z-index: 3;
}
/* === Fix ribbon biar kecil di pojok kanan, tidak melebar === */
.paket .card { position: relative; }

.paket .card .ribbon{
  position: absolute;
  top: 12px;
  right: 14px;
  left: auto !important;   /* reset, supaya tidak stretch */
  width: auto;              /* ikuti konten */
  display: inline-flex;     /* ukuran pas konten */
  white-space: nowrap;      /* teks ga turun baris */
  padding: 6px 14px;
  font-weight: 800;
  font-size: 13px;
  background: linear-gradient(180deg,#E8C979,#C7A149);
  color: #1E2634;
  border: 1px solid rgba(166,127,28,.7);
  border-radius: 999px;
  box-shadow: 0 6px 16px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.6);
  z-index: 3;
}

/* Testimonial Slider */
.testimonial-slider {
    position: relative;
    padding: 0 50px; /* Room for arrows */
}
.slider-viewport {
    overflow: hidden;
    width: 100%;
}
.slider-track {
    display: flex;
    gap: 14px; /* Same as the old .grid gap */
    transition: transform 0.5s ease-in-out;
    align-items: stretch; /* Make all slider items equal height */
}
.slider-item {
    flex: 0 0 calc((100% / 3) - (14px * 2 / 3)); /* 3 items visible */
    display: flex; /* Required for child to stretch */
}
.slider-item .card {
    width: 100%; /* Ensure card takes full width of the item */
    display: flex;
    flex-direction: column;
}
.slider-item .card .c {
    flex-grow: 1; /* Make the content wrapper fill the card */
    display: flex;
    flex-direction: column;
    align-items: center; /* Center photo and text */
}
.slider-item .card .c p[style*="italic"] {
    flex-grow: 1; /* Make the testimonial text expand */
}
.testimonial-slider .nav-arrow {
    top: 50%;
    transform: translateY(-50%);
}
.testimonial-slider .nav-arrow.left { left: 0; }
.testimonial-slider .nav-arrow.right { right: 0; }

@media(max-width: 900px) {
    .slider-item {
        flex: 0 0 calc((100% / 2) - (14px * 1 / 2)); /* 2 items visible */
    }
}
@media(max-width: 600px) {
    .testimonial-slider {
        padding: 0; /* No room for arrows on mobile */
    }
    .slider-item {
        flex: 0 0 100%; /* 1 item visible */
    }
    .testimonial-slider .nav-arrow {
        display: none; /* Hide arrows on small screens, could add touch swipe later if needed */
    }
}

.testimonial-avatar {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid var(--gold);
    margin-bottom: 16px;
    box-shadow: 0 10px 24px rgba(0,0,0,.18);
}

/* Modal Styles */
.modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(14, 63, 96, 0.6);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    z-index: 100;
}
.modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.95);
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    width: 90%;
    max-width: 1000px; /* User Request */
    padding: 50px; /* Adjusted */
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    z-index: 101;
}
.modal-backdrop.is-visible,
.modal.is-visible {
    opacity: 1;
    visibility: visible;
}
.modal.is-visible {
    transform: translate(-50%, -50%) scale(1);
}
.modal-close {
    position: absolute;
    top: 10px;
    right: 14px;
    background: transparent;
    border: none;
    font-size: 24px;
    font-weight: bold;
    color: #888;
    cursor: pointer;
}
.modal-content {
    text-align: center;
}
.modal-img {
    width: 400px; /* User Request */
    height: 400px; /* User Request */
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid var(--gold);
    margin-bottom: 16px;
}
.modal-content h3 {
    margin: 0 0 4px;
    color: var(--navy);
    font-size: 24px;
}
.modal-content .modal-asal {
    margin: 0 0 16px;
    color: #555;
    font-size: 14px;
}
.modal-content .modal-quote {
    font-style: italic;
    font-size: 18px; /* Back to original */
    line-height: 1.6;
    color: #333;
}