:root{
    /* Atur agar sejajar dengan navibar */
    --wrap-max: 1280px;               /* lebar maksimum konten  */
    --wrap-pad: 24px;                 /* padding kiri/kanan untuk gutter */
    --sidebar-w: 280px;               /* lebar sidebar di desktop */
    --gap: 0.2px;                      /* jarak antar kolom */
  }

  /* ===== Base ===== */
  * { box-sizing: border-box; }
  html, body { height: 100%; }
  body {
    margin: 0;
    min-height: 100vh;
    color: #c7d5e0;
    font-family: 'Montserrat', 'Roboto', system-ui, -apple-system, Arial, sans-serif;
    background:
      linear-gradient(to bottom, rgba(0,0,0,0.8), rgba(0,0,0,1)),
      url('/gambar/kotak_mail_wow_classic.webp');
    background-size: cover;
    background-attachment: fixed;
  }

  /* ===== Global wrapper agar rata dengan navibar ===== */
  .page-wrap{
    width: min(var(--wrap-max), calc(100% - var(--wrap-pad)*2));
    margin-inline: auto;
  }

  /* ===== Layout utama pakai GRID agar lebih stabil ===== */
  .container-main{
    display: grid;
    grid-template-columns: var(--sidebar-w) 1fr;
    gap: var(--gap);
    min-height: calc(100vh - 140px); /* kira2 sisa tinggi setelah nav & footer */
    padding-block: 20px 32px;        /* ruang atas & bawah dalam grid */
  }

  /* ===== Sidebar ===== */
  .sidebar{
  background: transparent;
    border-radius:.75rem;
    padding:1.4rem 1rem;
    display:flex; flex-direction:column;
    gap: .8rem;
    box-shadow:4px 0 18px 0 #0e1120cc;
  }
  .sidebar-title{
    font-size:1.05rem; font-weight:800; letter-spacing:1.2px;
    color:#a7fffa; text-shadow:0 2px 16px #3dfaff21;
    padding: .25rem .5rem .75rem;
    border-bottom: 1px solid #1f2a44;
    margin-bottom:.6rem;
  }
  .sidebar-btn{
    background:#0f172a;
    border:1px solid #2dd4bf;
    border-radius:.75rem;
    color:#fff; width:100%;
    font-size:1rem; font-weight:700;
    padding:.9rem 1rem; text-align:left;
    cursor:pointer; position:relative;
    transition:border-color .2s, box-shadow .2s, transform .2s, background .2s;
  }
  .sidebar-btn:hover{
    border-color:#ffd700;
    box-shadow:0 0 8px #ffd70080, 0 0 16px #ffd70040;
    background:#162235;
  }
  .sidebar-btn.active{
    border-color:#ffd700;
    background:#1e293b;
    /* Hapus translateX agar tepi kiri tetap sejajar */
    transform: none;
    box-shadow:0 0 8px #ffd70080, 0 0 16px #ffd70040;
  }

  /* ===== Area Offers ===== */
  .offers-area{
  background: transparent;
    border-radius:.75rem;
    padding: 22px;
    min-height: 100%;
    display:flex; flex-direction:column;
  }
  .offers-title{
    font-size: clamp(1.35rem, 1vw + 1.3rem, 2.1rem);
    font-weight:800; letter-spacing:1.2px;
    margin: .1rem 0 .4rem;
    color:#FFD700; text-shadow:0 3px 24px #0ef0f8a1;
  }
  .offers-hot{
    font-size: clamp(1rem, 0.5vw + 0.9rem, 1.35rem);
    font-weight:700; color:#00ffe7;
    margin: 0 0 1.2rem; text-shadow:0 2px 8px #00ffe751;
  }

  /* Pakai grid agar kartu sejajar rapi */
  .offers-list{
    display: grid;
    grid-template-columns: repeat(3, minmax(240px, 1fr));
    gap: 20px;
  }

  /* ===== Offer Card ===== */
  .offer-card{
    position:relative;
    background:rgba(30, 30, 45, 0.5);
    border:1px solid #2b3a55;
    border-radius:1.1rem;
    padding:1rem 1rem 1.3rem;
    display:flex; flex-direction:column; align-items:center;
    overflow:hidden; cursor:pointer;
    transition:transform .22s cubic-bezier(.45,1.56,.66,.99), box-shadow .18s;
    min-height: 100%;
  }
  .offer-card:hover{
    box-shadow:0 0 8px #ffd70080, 0 0 16px #ffd70040;
    transform:translateY(-1px);
  }
  .offer-img{
    width: 210px; height: 186px;
    margin-bottom:1rem; border-radius:.8rem;
    background:#191e2f; display:flex; align-items:center; justify-content:center;
    box-shadow: 0 0 0 0 #000, 6px 6px 6px yellow;
    transition:transform .28s cubic-bezier(.5,2.2,.54,1), box-shadow .18s;
  }
  .offer-card:hover .offer-img{
    transform:scale(1.06) rotate(-1.2deg);
    box-shadow:0 0 8px #ffd70080, 0 0 16px #ffd70040;
  }

  .offer-title{
    font-size:1.1rem; font-weight:800;
    margin:.2rem 0 .2rem; color:#FFD700;
    letter-spacing:.4px; text-shadow:0 2px 12px #12d8f876; text-align:center;
  }
  .offer-features{
    list-style:none; padding:0; margin:0 0 .7rem; color:#bafff8;
    font-size:.98rem; min-height:64px;
  }
  .offer-features li{ margin-bottom:.18rem; display:flex; align-items:center; gap:.5em; }
  .offer-features li::before{
    content:"\f00c"; font-family:"Font Awesome 6 Free"; font-weight:900;
    color:#00ffe7; font-size:1em; margin-right:.5em; text-shadow:0 0 8px #00ffe7c4;
  }

  .offer-buy-btn{
    display:inline-block; text-decoration:none;
    background:linear-gradient(90deg,#7568ff 0%,#00ffe7 80%);
    color:#13182c !important; font-size:1.05rem; font-weight:800;
    padding:.6rem 1.4rem; border:0; border-radius:.9rem;
    box-shadow:0 2px 10px #12f0f833; cursor:pointer; margin-top:.4rem;
    transition:background .14s, color .16s, transform .14s; position:relative; z-index:2;
  }
  .offer-buy-btn:hover{
    background:linear-gradient(92deg,#00ffe7 0%,#13bbfa 80%);
    color:#181b29 !important; transform:scale(1.06);
  }

  .offer-card__overlay{
    position:absolute; inset:0; z-index:1; background:transparent; display:block;
    -webkit-tap-highlight-color:transparent;
  }
  .offer-card__overlay:focus-visible{
    outline:2px solid #4da6ff; outline-offset:2px; border-radius:inherit;
  }

  /* ===== Responsive ===== */
  @media (max-width: 1100px){
    :root{ --sidebar-w: 260px; }
    .offers-list{ grid-template-columns: repeat(2, minmax(220px, 1fr)); }
  }
  @media (max-width: 860px){
    .container-main{
      grid-template-columns: 1fr;
    }
    .sidebar{
      flex-direction: row; flex-wrap: wrap; gap: .6rem;
      padding: .9rem; border-right: none; border-bottom: 2px solid #232b42;
    }
    .sidebar-title{
      width: 100%; border: none; margin: 0 0 .2rem;
      padding: .25rem .25rem;
    }
    .sidebar-btn{ flex: 1 1 200px; text-align: center; }
  }
  @media (max-width: 680px){
    .page-wrap{ width: calc(100% - 20px); }
    .offers-area{ padding: 14px; }
    .offers-list{ grid-template-columns: 1fr; gap: 12px; }
    .offer-img{ width: 200px; height: 172px; }
    .offer-buy-btn{ width: 100%; text-align: center; }
  }