:root{
      --bg: #0b1220;
      --card: #0f1a33;
      --muted: rgba(0, 0, 0, 0.72);
      --muted2: rgba(0, 0, 0, 0.55);
      --line: rgb(255, 255, 255);
      --brand: #f7b500; /* kuning */
      --brand2:#ffd86a;
      --text: #000000;
      --shadow: 0 18px 60px rgba(192, 192, 192, 0.45);
      --radius: 10px;
      --radius2: 14px;
      --container: 1400px;
    }

    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;
      font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Helvetica Neue", sans-serif;
      color:var(--text);
      background: #f5f7ff;
    }

    a{color:inherit;text-decoration:none}
    img{max-width:100%;height: auto;display:block}
    .container{max-width:var(--container); margin:0 auto; padding:0 18px}

    /* ===== TOP BAR (mirip contoh: categories + search) ===== */
    .topbar{
      position:sticky; top:0; z-index:50;
      background: rgb(37, 37, 37);
      backdrop-filter: blur(14px);
      border-bottom:1px solid var(--line);
    }
    .topbar-inner{
      display:flex; align-items:center; gap:14px;
      padding:12px 0;
    }
    .hamb{
      display:flex; align-items:center; gap:10px;
      padding:10px 12px;
      border:1px solid var(--line);
      border-radius: 12px;
      background: rgb(255, 174, 0);
      cursor:pointer;
      user-select:none;
    }
    .hamb .icon{width:18px;height:18px;opacity:.9}
    .hamb span{font-weight:700;font-size:13px;color:var(--muted)}
    .search{
      flex:1;
      display:flex; align-items:center;
      border:1px solid rgb(255 255 255);
      border-radius: 999px;
      overflow:hidden;
      background: rgb(255, 255, 255);
    }
    .search input{
      width:100%;
      padding:12px 14px;
      border:0; outline:0;
      background:#ffffff;
      color:var(--text);
      font-weight:600;
    }
    .search button{
      border:0; outline:0;
      padding:12px 16px;
      cursor:pointer;
      background: linear-gradient(195deg, #c49600 11%, #ffd900 21%, #c49600 33%, #ffd900 30%, #c49600 60%, #ffeb37 73%, #c49600 85%, #c49600 100%);
      background-size: 200%;
      font-weight:900;
    }
    .icons{
      display:flex; align-items:center; gap:10px;
      color: var(--muted);
    }
    .ico{
      width:38px;height:38px;
      border-radius: 12px;
      border:1px solid var(--line);
      background: rgb(255, 255, 255);
      display:grid; place-items:center;
    }

    /* ===== CTA BAR (DAFTAR / LOGIN kuning) ===== */
    .n-columns-2 {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    font-weight: 700;
    }
    .n-columns-2 a {
    text-align: center;
    }
    .login, .register {
    color: #000000;
    font-size: larger;
    padding: 11px 10px;
    }
    .login, .login-button {
    background: linear-gradient(195deg, #c49600 11%, #ffd900 21%, #c49600 33%, #ffd900 30%, #c49600 60%, #ffeb37 73%, #c49600 85%, #c49600 100%);
    background-size: 400% 400%;
    border: 2px solid #ffffff;
    box-shadow: inset 0 0 5px 3px #ffe100, inset 0 2px 0 0 #fff, inset 0 0 0 2px #000000, 3px 3px 3px 1px #00000033;
    }
    .register, .register-button {
    background: linear-gradient(195deg, #c49600 11%, #ffd900 21%, #c49600 33%, #ffd900 30%, #c49600 60%, #ffeb37 73%, #c49600 85%, #c49600 100%);
    background-size: 400% 400%;
    border: 2px solid #ffffff;
    box-shadow: inset 0 0 5px 3px #ffe100, inset 0 2px 0 0 #fff, inset 0 0 0 2px #000000, 3px 3px 3px 1px #00000033;
    }

    /* ===== BREADCRUMB ===== */
    .crumbs{
      padding:14px 0 6px;
      color: rgb(0 0 0);
      font-size:15.5px;
    }
    .crumbs a{color:var(--muted)}
    .crumbs .sep{opacity:.55; padding:0 6px}

    /* ===== MAIN GRID (gambar kiri + konten kanan) ===== */
    .hero{
      padding: 14px 0 22px;
    }
    .grid{
      display:grid;
      grid-template-columns: 1.35fr .95fr;
      gap:22px;
      align-items:start;
    }



    .media{
      position:relative;
      overflow:hidden;
    }
    .media .imgwrap{
      border-radius: var(--radius);
      overflow:hidden;
      height: auto;
    }
    .media .save{
      position:absolute;
      right:14px; top:14px;
      width:44px;height:44px;
      border-radius: 999px;
      display:grid; place-items:center;
      border:1px solid var(--line);
      background: rgba(10,14,25,.65);
      backdrop-filter: blur(10px);
      cursor:pointer;
    }
    .media .save:active{transform:scale(.98)}
    .media .badge{
      position:absolute;
      left:14px; top:14px;
      padding:8px 10px;
      border-radius: 999px;
      font-size:12px;
      font-weight:900;
      color:#1a1400;
      background: linear-gradient(195deg, #c49600 11%, #ffd900 21%, #c49600 33%, #ffd900 30%, #c49600 60%, #ffeb37 73%, #c49600 85%, #c49600 100%);
      background-size: 200%;
      border:1px solid rgba(0,0,0,.15);
    }

    .panel{
      padding:18px 18px 16px;
    }
    .price{
      font-weight:950;
      font-size:22px;
      letter-spacing:.2px;
      margin:0 0 4px;
    }
    .brandline{
      color: var(--muted2);
      font-weight:800;
      font-size:12px;
      letter-spacing:.6px;
      text-transform:uppercase;
      margin-bottom:10px;
    }
    h1{
      margin:0 0 10px;
      font-size: 26px;
      line-height:1.15;
      letter-spacing:-.2px;
    }
    .sub{
      color: var(--muted);
      line-height:1.65;
      font-size:14px;
      margin:0 0 10px;
    }
    .rating{
      display:flex; align-items:center; gap:10px;
      padding:10px 0 6px;
      border-top:1px dashed rgb(0 0 0);
      border-bottom:1px dashed rgb(0 0 0);
      margin:10px 0 14px;
    }
    .rating .tag{
      font-size:12px;
      font-weight:900;
      padding:6px 10px;
      border-radius:999px;
      border:1px solid rgb(255 25 25);
      background: rgb(163, 0, 0);
      color: rgb(255 255 255);
    }
    .stars{
      display:flex; gap:4px;
      transform: translateY(-.5px);
    }
    .star{
      width:16px;height:16px;
      filter: drop-shadow(0 2px 10px rgb(247, 181, 0));
    }
    .meta{
      font-size:12.5px;
      color: var(--muted2);
    }

    .btns{
      display:grid;
      grid-template-columns: 1fr 1fr;
      gap:12px;
      margin: 12px 0 14px;
    }
    .btn{
      display:flex; justify-content:center; align-items:center;
      padding:12px 12px;
      border-radius: 14px;
      font-weight:950;
      text-transform:uppercase;
      letter-spacing:.9px;
      border:1px solid rgba(0,0,0,.18);
      cursor:pointer;
      user-select:none;
    }
    .btn.primary{
      background: linear-gradient(195deg, #c49600 11%, #ffd900 21%, #c49600 33%, #ffd900 30%, #c49600 60%, #ffeb37 73%, #c49600 85%, #c49600 100%);
      border: 1px solid yellow;
      background-size: 200%;
      color:#1a1400;
    }
    .btn.ghost{
      background: linear-gradient(180deg, #000000, #2e2e2e);
      border:1px solid var(--line);
      color: #f5f7ff;
    }
    .btn:hover{filter:brightness(.99)}
    .btn:active{transform: translateY(1px)}

    .collection{
      display:flex; align-items:center; gap:10px;
      color: var(--muted);
      font-weight:750;
      margin: 6px 0 14px;
    }
    .heart{
      width:18px;height:18px;
      display:inline-block;
      transform: translateY(1px);
    }

    .desc{
      border-top:1px solid var(--line);
      padding-top:14px;
      color: var(--muted);
      line-height:1.7;
      font-size:14px;
    }

    /* ===== SECTIONS ===== */
    .section{
      margin-top:16px;
      padding:18px;
    }
    .section h2{
      margin:0 0 12px;
      font-size:18px;
      letter-spacing:-.1px;
    }

    .bacok-team{
      display:flex; flex-wrap:wrap; gap:10px;
    }
    .seo-bacok{
      padding:10px 12px;
      border-radius: 999px;
      border:1px solid var(--line);
      background: rgb(255, 255, 255);
      color: var(--muted);
      font-weight:800;
      font-size:12.5px;
    }

    .review-grid{
      display:grid;
      grid-template-columns: 1fr;
      gap:12px;
    }
    .review{
      border:1px solid var(--line);
      border-radius: 14px;
      background: linear-gradient(195deg, #c49600 11%, #ffd900 21%, #c49600 33%, #ffd900 30%, #c49600 60%, #ffeb37 73%, #c49600 85%, #c49600 100%);
      box-shadow: inset 0 0 5px 3px #ffe100, inset 0 2px 0 0 #fff, inset 0 0 0 2px #690000, 3px 3px 3px 1px rgba(0, 0, 0, .2);
      background-size: 200%;
      padding:14px;
    }
    .review .member-abutogel{
      display:flex; align-items:center; justify-content:space-between;
      gap:10px;
      margin-bottom:8px;
      font-weight:950;
    }
    .review .member-abutogel span{
      color: var(--muted2);
      font-weight:800;
      font-size:12px;
    }
    .review p{
      margin:0;
      color: var(--muted);
      line-height:1.65;
      font-size:14px;
    }

    /* ===== FAQ ACCORDION ===== */
    .faq{
      display:grid;
      gap:10px;
    }
    .faq details{
      border:1px solid var(--line);
      border-radius: 14px;
      color: #f7d200;
      background: linear-gradient(195deg, #000000 11%, #1a1a1a 21%, #000000 33%, #1a1a1a 30%, #1a1a1a 60%, #747474 73%, #000000 85%, #000000 100%);
      box-shadow: inset 0 0 5px 3px #000000, inset 0 2px 0 0 #fff, inset 0 0 0 2px #000000, 3px 3px 3px 1px rgba(0, 0, 0, .2);
      background-size: 200%;
      overflow:hidden;
    }
    .faq summary{
      list-style:none;
      cursor:pointer;
      padding:14px 14px;
      font-weight:950;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
    }
    .faq summary::-webkit-details-marker{display:none}
    .faq .ans{
      padding:0 14px 14px;
      color: #ffffff;;
      line-height:1.7;
      font-size:14px;
    }
    .chev{
      width:18px;height:18px;
      opacity:.85;
      transition: transform .2s ease;
    }
    details[open] .chev{transform: rotate(180deg)}

    /* ===== FOOTER ===== */
    footer{
      margin:22px 0 -12px;
      color: #f5f7ff;
      font-size:12.5px;
      line-height:1.7;
    }
    .footgrid{
      display:grid;
      grid-template-columns: 1fr 1fr;
      gap:14px;
      margin-top:12px;
    }
    .footcard{
      border:1px solid var(--line);
      border-radius: 14px;
      background: rgb(70, 70, 70);
      padding:14px;
    }

    /* ===== STICKY MOBILE CTA ===== */
    .mobile-cta{
      position:fixed;
      left:0; right:0; bottom:0;
      padding:10px 12px calc(10px + env(safe-area-inset-bottom));
      background: rgba(0, 0, 0, 0.527);
      backdrop-filter: blur(14px);
      border-top:1px solid var(--line);
      display:none;
      z-index:60;
    }
    .mobile-cta .wrap{
      display:grid;
      grid-template-columns: 1fr 1fr;
      gap:10px;
      max-width: var(--container);
      margin:0 auto;
    }

    /* ===== RESPONSIVE ===== */
    @media (max-width: 980px){
      .grid{grid-template-columns: 1fr}
      h1{font-size:24px}
      .footgrid{grid-template-columns:1fr}
    }
    @media (max-width: 720px){
      .hamb span{display:none}
      .icons{display:none}
      .cta-bar{display:none} /* diganti sticky CTA bawah */
      .mobile-cta{display:block}
      .topbar-inner{gap:10px}
      .search input{font-size:14px}
    }