:root{
  --orange:#F4A300;
  --gold1:#FFCE4A;
  --gold2:#A86C00;
  --black:#0b0b0b;
  --white:#ffffff;
}

*{box-sizing:border-box}
html,body{height:100%}

body{
  margin:0;
  font-family:"Montserrat", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background:#000;
  overflow-x:hidden;
}

/* TOP BAR */
.topbar{
  position:fixed;
  top:0; left:0; right:0;
  height:78px;
  background:var(--orange);
  display:flex;
  align-items:center;
  z-index:30;
}

.brand{
  display:inline-flex;
  align-items:center;
  margin-left:22px;
  background:#0a0a0a;
  padding:10px 16px;
  border-bottom-left-radius:8px;
  border-bottom-right-radius:8px;
  box-shadow:0 6px 18px rgba(0,0,0,.35);
  transform:skewX(-8deg);
}
.brand img{
  height:34px;
  width:auto;
  display:block;
  transform:skewX(8deg);
}

/* BACKGROUND IMAGE */
.bg{
  position:fixed;
  inset:0;
  top:78px;
  background:
    radial-gradient(ellipse at center, rgba(0,0,0,.10) 0%, rgba(0,0,0,.55) 70%, rgba(0,0,0,.75) 100%),
    url("../img/banner6.jpg");
  background-size:cover;
  background-position:center;
  filter:saturate(1.05);
  z-index:0;
}

/* WRAP */
.wrap{
  position:relative;
  z-index:10;
  min-height:calc(100vh - 78px);
  padding-top:110px;
  padding-bottom:24px;
  display:flex;
  align-items:flex-start;
  justify-content:center;
}

/* PANEL FULL HEIGHT */
.panel{
  width:min(460px, calc(100% - 32px));
  background:rgba(255,255,255,.92);
  border-radius:6px;
  box-shadow:0 20px 55px rgba(0,0,0,.45);
  border:4px solid rgba(255,255,255,.85);
  overflow:hidden;

  /* full tinggi desktop */
  min-height:calc(100vh - 78px - 110px - 24px);

  /* penting: biar hero bisa ngisi sisa ruang */
  display:flex;
  flex-direction:column;
}

/* TABS */
.tabs{
  display:flex;
  gap:6px;
  padding:10px 10px 0 10px;
}
.tab{
  flex:1;
  text-align:center;
  text-decoration:none;
  font-weight:900;
  letter-spacing:.6px;
  padding:12px 10px;
  border-radius:2px;
  color:#fff;
  background:linear-gradient(#3a2a00, #0d0d0d);
  border:2px solid rgba(255,206,74,.35);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.15);
}
.tab--active{
  background:linear-gradient(#f6d367, #c07a00 55%, #111 100%);
  border-color:rgba(255,206,74,.75);
}

/* HERO (STRETCH MENGISI SISA TINGGI) */
.hero{
  position:relative;
  margin:10px;
  border-radius:6px;
  overflow:hidden;
  border:2px solid rgba(0,0,0,.20);
  background:#000;

  flex:1;              /* <<< ini bikin hero memanjang */
  min-height:240px;    /* safety supaya gak kekecilan */
}

.hero__img{
  width:100%;
  height:100%;
  object-fit:contain;       /* gambar tetap kelihatan full */
  object-position:center;
  display:block;
  transform:none;
}

.hero__overlay{
  position:absolute;
  left:0; right:0; bottom:0;
  padding:16px 12px 12px;
  background:linear-gradient(to top, rgba(0,0,0,.78), rgba(0,0,0,.15), rgba(0,0,0,0));
  text-align:center;
}
.hero__title{
  font-size:22px;
  font-weight:900;
  letter-spacing:1px;
  color:#ffe177;
  text-shadow:0 3px 10px rgba(0,0,0,.8);
}
.hero__logo{
  margin-top:6px;
  font-size:36px;
  font-weight:900;
  letter-spacing:1px;
  color:#ffcc41;
  text-shadow:
    0 3px 0 rgba(0,0,0,.55),
    0 10px 25px rgba(0,0,0,.55);
}

/* ROWS (tetap rapih di bawah) */
.rows{
  padding:8px 10px 14px;
}
.row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  background:#0b0b0b;
  color:#fff;
  padding:14px 14px;
  border-radius:4px;
  border:2px solid rgba(255,255,255,.08);
  margin:10px 0;
  box-shadow:0 10px 20px rgba(0,0,0,.22);
}
.row__text{
  font-weight:900;
  letter-spacing:.6px;
  font-size:13px;
}

/* GOLD BUTTON */
.row__btn{
  text-decoration:none;
  font-weight:900;
  letter-spacing:.8px;
  color:#111;
  padding:10px 18px;
  border-radius:3px;
  background:linear-gradient(var(--gold1), #d88b00 55%, var(--gold2));
  border:1px solid rgba(255,255,255,.25);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.35),
    0 6px 12px rgba(0,0,0,.35);
  min-width:110px;
  text-align:center;
}
.row__btn:hover{filter:brightness(1.05)}
.row__btn:active{transform:translateY(1px)}

/* RESPONSIVE */
@media (max-width:420px){
  .topbar{height:70px}
  .bg{top:70px}

  .wrap{
    min-height:calc(100vh - 70px);
    padding-top:98px;
    padding-bottom:18px;
  }

  .panel{
    min-height:calc(100vh - 70px - 98px - 18px);
  }

  .hero{min-height:220px}
  .hero__logo{font-size:32px}
}