/* ============================================================
   HERO LAYER SYSTEM  —  JualLakban.com
   File ini WAJIB dipakai di halaman admin (tambah/edit hero)
   DAN di frontend (home.php). Satu file = tampilan identik.

   Ruang desain tetap: 1440 x 600
   1 "design px" = var(--u) = calc(100cqw / 1440)
   Jadi apa pun lebar layarnya, proporsi layer selalu sama.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Sora:wght@600;700;800;900&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@500;600&display=swap');

/* ---------- VIEWPORT ---------- */
.hero-viewport{
    --u: calc(100cqw / 1440);
    position: relative;
    width: 100%;
    aspect-ratio: 1440 / 600;
    overflow: hidden;
    background: #150F0D;
    container-type: inline-size;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
}
/* dipakai saat viewport mengisi penuh parent (mis. di dalam swiper-slide) */
.hero-viewport--fill{ position:absolute; inset:0; width:100%; height:100%; aspect-ratio:auto; }

/* fallback browser lama tanpa container query */
@supports not (container-type: inline-size){
    .hero-viewport{ --u: calc(100vw / 1440); }
}

.hero-bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; }
.hero-scrim{ position:absolute; inset:0; background:rgba(0,0,0,.25); pointer-events:none; }
.hero-stage{ position:absolute; inset:0; z-index:10; }

/* ---------- BASE LAYER ---------- */
.hl{
    position: absolute;
    box-sizing: border-box;
    width: calc(var(--w, 300) * var(--u));
    max-width: 100%;
}
.hl__text{ display:block; width:100%; }

/* ---------- LAYER: BADGE ---------- */
.hl-badge{
    display:flex; align-items:center; justify-content:center;
    /* --bg-a: 0-1 (transparansi latar) diisi lewat inline style per slide */
    background: rgba(0,0,0, var(--bg-a, .42));
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    border: max(1px, calc(1 * var(--u))) solid rgba(251,191,36,.45);
    border-radius: 999px;
    padding: calc(7 * var(--u)) calc(16 * var(--u));
    box-shadow: 0 calc(4 * var(--u)) calc(14 * var(--u)) rgba(0,0,0,.35);
}
.hl-badge .hl__text{
    font-family:'JetBrains Mono', ui-monospace, monospace;
    font-weight:700; letter-spacing:.14em; color: var(--text-color, #FBBF24); text-align:center;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
    font-size: calc(11 * var(--s, 1) * var(--u));
    line-height: 1.3;
}

/* ---------- LAYER: JUDUL ---------- */
.hl-title{
    background: rgba(0,0,0, var(--bg-a, .50));
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    border: max(1px, calc(1 * var(--u))) solid rgba(255,255,255,.20);
    border-radius: calc(14 * var(--u));
    padding: calc(18 * var(--u)) calc(20 * var(--u));
    box-shadow: 0 calc(10 * var(--u)) calc(30 * var(--u)) rgba(0,0,0,.45);
}
.hl-title .hl__text{
    font-family:'Sora', system-ui, sans-serif;
    font-weight:800; color: var(--text-color, #fff);
    font-size: calc(44 * var(--s, 1) * var(--u));
    line-height: 1.15;
    white-space: pre-line;
    overflow-wrap: anywhere;
}

/* ---------- LAYER: DESKRIPSI ---------- */
.hl-desc{
    background: rgba(0,0,0, var(--bg-a, .42));
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    border: max(1px, calc(1 * var(--u))) solid rgba(255,255,255,.20);
    border-radius: calc(14 * var(--u));
    padding: calc(14 * var(--u)) calc(16 * var(--u));
    box-shadow: 0 calc(6 * var(--u)) calc(20 * var(--u)) rgba(0,0,0,.35);
}
.hl-desc .hl__text{
    color: var(--text-color, #E5E7EB);
    font-size: calc(16 * var(--s, 1) * var(--u));
    line-height: 1.55;
    white-space: pre-line;
    overflow-wrap: anywhere;
}

/* ---------- LAYER: TOMBOL CTA ---------- */
.hl-btn{
    border-radius: calc(14 * var(--u));
    border: max(1px, calc(1 * var(--u))) solid transparent;
    box-shadow: 0 calc(10 * var(--u)) calc(26 * var(--u)) rgba(0,0,0,.45);
    overflow: hidden;
    transition: filter .2s ease;
}
.hl-btn:hover{ filter: brightness(1.1); }
.hl-btn__inner{
    display:flex; align-items:center; justify-content:center;
    width:100%; height:100%;
    padding: calc(14 * var(--u)) calc(22 * var(--u));
    text-decoration:none;
}
.hl-btn .hl__text{
    font-weight:700; color: var(--text-color, #fff); text-align:center;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
    font-size: calc(15 * var(--s, 1) * var(--u));
    line-height: 1.25;
}
/* --bg-a (0-1) mengatur transparansi latar tombol tanpa menghilangkan
   gradasi/gaya masing-masing tema */
.btn-crystal-red{ background: linear-gradient(90deg, rgba(210,80,74,var(--bg-a,1)), rgba(158,27,36,var(--bg-a,1))); border-color: transparent; }
.btn-gold       { background: rgba(217,119,6,var(--bg-a,1)); border-color:#FCD34D; }
.btn-glass      { background: rgba(255,255,255, var(--bg-a,.12)); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-color: rgba(255,255,255,.45); }

/* ---------- VERSI MOBILE (stack) ---------- */
.hero-mobile{
    --u: 1px;                 /* fallback: blok mobile tidak memakai ruang 1440px */
    position:relative; z-index:20; width:100%;
    padding: 0 24px;
    display:flex; flex-direction:column; align-items:center; text-align:center; gap:12px;
}
.hero-mobile .hl{ position:static; width:100%; max-width:520px; }
.hero-mobile .hl-badge{ width:auto; padding:7px 16px; border-width:1px; border-radius:999px; }
.hero-mobile .hl-badge .hl__text{ font-size:10px; }
.hero-mobile .hl-title{ padding:16px; border-radius:12px; border-width:1px; }
.hero-mobile .hl-title .hl__text{ font-size:24px; }
.hero-mobile .hl-desc{ padding:12px 14px; border-radius:12px; border-width:1px; }
.hero-mobile .hl-desc .hl__text{ font-size:13px; }
.hero-mobile .hl-btn{ border-radius:12px; border-width:1px; }
.hero-mobile .hl-btn__inner{ padding:14px 20px; }
.hero-mobile .hl-btn .hl__text{ font-size:14px; }