*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
    html { scroll-behavior:smooth; }

    :root {
      --bg:    #0c0b0a;
      --bg2:   #131110;
      --gold:  #c9a96e;
      --gold2: #e8d5a3;
      --gold3: #7a5c2e;
      --ivory: #f7f3ed;
      --muted: #7a6e60;
      --bdr:   rgba(201,169,110,.13);
      --hdr-h: 52px;
      --tab-h: 52px;
    }

    body {
      background:var(--bg);
      color:var(--ivory);
      font-family:'DM Sans',sans-serif;
      overflow-x:hidden;
      -webkit-font-smoothing:antialiased;
    }
    body::before {
      content:''; position:fixed; inset:0; z-index:0; pointer-events:none;
      background-image:
        linear-gradient(rgba(201,169,110,.02) 1px,transparent 1px),
        linear-gradient(90deg,rgba(201,169,110,.02) 1px,transparent 1px);
      background-size:70px 70px;
    }
    ::-webkit-scrollbar{width:3px}
    ::-webkit-scrollbar-track{background:var(--bg)}
    ::-webkit-scrollbar-thumb{background:var(--gold3)}

    /* ══════════════════════════════════════
       HEADER
    ══════════════════════════════════════ */
    .hdr {
      position:fixed; top:0; left:0; right:0; z-index:500;
      height:var(--hdr-h);
      display:flex; align-items:center; justify-content:space-between;
      padding:0 16px;
      background:rgba(12,11,10,.95);
      backdrop-filter:blur(20px);
      border-bottom:1px solid var(--bdr);
    }
    .logo {
      font-family:'Cormorant Garamond',serif;
      font-size:1rem; font-weight:300; letter-spacing:.07em;
      color:var(--gold2); text-decoration:none;
      display:flex; align-items:center; gap:7px;
    }
    .logo-mark {
      width:22px; height:22px; border:1px solid var(--gold3); flex-shrink:0;
      display:flex; align-items:center; justify-content:center;
      font-size:.68rem; color:var(--gold);
    }
    .hdr-cta {
      font-size:.62rem; letter-spacing:.14em; text-transform:uppercase;
      background:var(--gold); color:var(--bg); padding:6px 14px;
      text-decoration:none; font-weight:600; white-space:nowrap;
      transition:background .2s; flex-shrink:0;
    }
    .hdr-cta:hover{background:var(--gold2)}

    /* ══════════════════════════════════════
       TAB BAR — fixed di bawah header
    ══════════════════════════════════════ */
    .tabs {
      position:fixed; top:var(--hdr-h); left:0; right:0; z-index:400;
      height:var(--tab-h);
      display:flex;
      background:rgba(12,11,10,.96);
      backdrop-filter:blur(16px);
      border-bottom:1px solid var(--bdr);
      overflow-x:auto; scrollbar-width:none;
    }
    .tabs::-webkit-scrollbar{display:none}
    .tab {
      flex:1; min-width:0;
      display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
      padding:6px 4px;
      background:none; border:none; cursor:pointer;
      color:var(--muted); font-family:'DM Sans',sans-serif;
      border-bottom:2px solid transparent;
      transition:color .2s; position:relative;
    }
    .tab:hover{color:var(--ivory)}
    .tab.on{color:var(--gold2); border-bottom-color:var(--gold)}
    .tab-icon{font-size:.9rem; line-height:1}
    .tab-lbl{font-size:.48rem; letter-spacing:.09em; text-transform:uppercase; white-space:nowrap}

    /* ══════════════════════════════════════
       MOBILE LAYOUT (< 768px)
       - iframe full screen di bawah tab
       - bottom bar: label + tombol nav
    ══════════════════════════════════════ */
    .mob-stage {
      display:block;
      /* posisi pas di bawah header + tab */
      padding-top:calc(var(--hdr-h) + var(--tab-h));
      /* tinggi sisa layar dikurangi bottom bar */
      height:100dvh;
      display:flex; flex-direction:column;
    }

    .mob-iframe-wrap {
      flex:1; position:relative; overflow:hidden;
    }
    #iframe-main {
      position:absolute; inset:0;
      width:100%; height:100%; border:none;
    }

    /* bottom bar permanen di mobile */
    .mob-bottom {
      flex-shrink:0;
      background:rgba(12,11,10,.97);
      border-top:1px solid var(--bdr);
      padding:10px 12px;
      display:flex; flex-direction:column; gap:8px;
    }
    .mob-label {
      display:flex; align-items:center; justify-content:center; gap:8px;
    }
    .mob-lbl-num{font-size:.5rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold3)}
    .mob-lbl-sep{width:1px;height:10px;background:var(--bdr)}
    .mob-lbl-name{font-family:'Cormorant Garamond',serif;font-size:1rem;font-weight:300;color:var(--ivory)}
    .mob-nav {
      display:flex; gap:6px;
    }
    .mob-btn-prev,.mob-btn-next {
      flex:1; padding:10px 4px; background:none;
      border:1px solid var(--bdr); color:var(--muted);
      font-family:'DM Sans',sans-serif; font-size:.58rem;
      letter-spacing:.09em; text-transform:uppercase;
      cursor:pointer; transition:all .2s;
    }
    .mob-btn-prev:hover,.mob-btn-next:hover{border-color:rgba(201,169,110,.4);color:var(--gold2)}
    .mob-btn-cta {
      flex:2; padding:10px 4px;
      background:var(--gold); color:var(--bg); border:none;
      font-family:'DM Sans',sans-serif; font-size:.6rem;
      letter-spacing:.12em; text-transform:uppercase; font-weight:600;
      cursor:pointer; transition:background .2s;
      text-decoration:none; display:flex; align-items:center; justify-content:center;
    }
    .mob-btn-cta:hover{background:var(--gold2)}

    /* loader overlay */
    .loader-ov {
      position:absolute; inset:0; background:var(--bg2);
      display:flex; flex-direction:column;
      align-items:center; justify-content:center; gap:10px;
      z-index:20; transition:opacity .35s;
    }
    .loader-ov.gone{opacity:0;pointer-events:none}
    .ring{
      width:30px;height:30px;
      border:2px solid rgba(201,169,110,.15);border-top-color:var(--gold);
      border-radius:50%;animation:spin .8s linear infinite;
    }
    @keyframes spin{to{transform:rotate(360deg)}}
    .loader-txt{font-size:.58rem;letter-spacing:.13em;text-transform:uppercase;color:var(--muted)}

    /* ══════════════════════════════════════
       DESKTOP (≥ 768px)
    ══════════════════════════════════════ */
    .desk-stage { display:none; }

    @media(min-width:768px) {
      :root { --hdr-h:56px; --tab-h:54px; }

      /* header */
      .hdr{padding:0 clamp(20px,4vw,48px)}
      .logo{font-size:1.05rem}
      .hdr-cta{font-size:.65rem;padding:7px 18px}

      /* tabs */
      .tabs .tab{flex:none; padding:10px clamp(14px,2.5vw,32px); min-width:unset}
      .tabs .tab-icon{font-size:1rem}
      .tabs .tab-lbl{font-size:.55rem}
      .tabs{justify-content:center}

      /* hide mobile layout */
      .mob-stage{display:none}

      /* show desktop layout */
      .desk-stage{
        display:block;
        padding-top:calc(var(--hdr-h) + var(--tab-h) + 28px);
        padding-bottom:0;
        max-width:1100px; margin:0 auto;
        padding-left:clamp(20px,4vw,48px);
        padding-right:clamp(20px,4vw,48px);
      }

      /* view toggle */
      .vtog{display:flex;justify-content:center;gap:0;margin-bottom:20px}
      .vbtn{
        padding:8px 22px; background:none;
        border:1px solid var(--bdr); color:var(--muted);
        font-family:'DM Sans',sans-serif;
        font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;
        cursor:pointer; transition:all .2s;
      }
      .vbtn:first-child{border-right:none}
      .vbtn.on{background:rgba(201,169,110,.1);color:var(--gold2);border-color:rgba(201,169,110,.4)}

      /* desktop browser frame */
      .frame-desk{
        background:#111;border:1px solid rgba(255,255,255,.07);
        border-radius:10px;overflow:hidden;
        box-shadow:0 20px 60px rgba(0,0,0,.55);
      }
      .topbar{
        height:32px;background:#0e0e0e;
        display:flex;align-items:center;padding:0 12px;gap:6px;
        border-bottom:1px solid rgba(255,255,255,.05);
      }
      .dot{width:9px;height:9px;border-radius:50%}
      .r{background:#ff5f57}.y{background:#febc2e}.g{background:#28c840}
      .urlbar{
        flex:1;margin:0 10px;height:19px;background:#1a1a1a;border-radius:3px;
        display:flex;align-items:center;padding:0 8px;
        font-size:.55rem;color:#555;letter-spacing:.04em;
      }
      .desk-body{position:relative}
      #iframe-desk{width:100%;height:580px;border:none;display:block}

      /* mobile device frame */
      .mob-outer{display:flex;justify-content:center;padding:10px 0}
      .frame-mob{
        width:340px;
        background:#0e0e0e;border:8px solid #1c1c1e;border-radius:40px;
        overflow:hidden;
        box-shadow:0 16px 50px rgba(0,0,0,.65),inset 0 0 0 1px rgba(255,255,255,.04);
        position:relative;
      }
      .mob-notch{
        position:absolute;top:0;left:50%;transform:translateX(-50%);
        width:86px;height:20px;background:#0e0e0e;
        border-radius:0 0 14px 14px;z-index:20;
      }
      /* tinggi tetap, gate selalu penuh, tidak bisa di-scroll dari luar */
      .mob-screen{
        height:640px;overflow:hidden;
        scrollbar-width:none;position:relative;
      }
      .mob-screen::-webkit-scrollbar{display:none}
      #iframe-mob{width:100%;height:100%;border:none;display:block}

      /* desk stage footer: label + nav */
      .desk-foot{
        margin-top:18px;padding-bottom:32px;
        display:flex;flex-direction:column;align-items:center;gap:12px;
      }
      .desk-label{display:flex;align-items:center;gap:10px}
      .d-lbl-num{font-size:.52rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold3)}
      .d-lbl-sep{width:1px;height:12px;background:var(--bdr)}
      .d-lbl-name{font-family:'Cormorant Garamond',serif;font-size:1.15rem;font-weight:300;color:var(--ivory)}
      .desk-nav{display:flex;gap:8px;width:100%;max-width:500px}
      .d-btn-prev,.d-btn-next{
        flex:1;padding:11px;background:none;
        border:1px solid var(--bdr);color:var(--muted);
        font-family:'DM Sans',sans-serif;font-size:.62rem;
        letter-spacing:.1em;text-transform:uppercase;
        cursor:pointer;transition:all .2s;
      }
      .d-btn-prev:hover,.d-btn-next:hover{border-color:rgba(201,169,110,.4);color:var(--gold2)}
      .d-btn-cta{
        flex:2;padding:11px;background:var(--gold);color:var(--bg);border:none;
        font-family:'DM Sans',sans-serif;font-size:.64rem;
        letter-spacing:.13em;text-transform:uppercase;font-weight:600;
        cursor:pointer;transition:background .2s;
        text-decoration:none;display:flex;align-items:center;justify-content:center;
      }
      .d-btn-cta:hover{background:var(--gold2)}

      /* thumbnails */
      .thumbs{padding:28px clamp(20px,4vw,48px);border-top:1px solid var(--bdr)}

      /* cta & footer */
      .cta-sec{padding:72px clamp(20px,4vw,48px)}
      .ftr{padding:18px clamp(20px,4vw,44px)}
    }

    /* ══════════════════════════════════════
       THUMBNAILS
    ══════════════════════════════════════ */
    .thumbs{
      position:relative;z-index:1;
      padding:24px 12px;
      border-top:1px solid var(--bdr);
    }
    .thumbs-lbl{
      text-align:center;font-size:.5rem;letter-spacing:.18em;
      text-transform:uppercase;color:var(--muted);margin-bottom:14px;
    }
    .thumb-row{display:flex;gap:6px;justify-content:center}
    .thumb{
      flex:1;max-width:110px;min-width:0;
      cursor:pointer;border:2px solid transparent;
      transition:all .2s;overflow:hidden;
    }
    .thumb.on{border-color:var(--gold)}
    .thumb:hover:not(.on){border-color:rgba(201,169,110,.3)}
    .th-vis{height:56px;display:flex;align-items:center;justify-content:center}
    .th-lbl{
      padding:5px 3px;font-size:.46rem;letter-spacing:.08em;text-transform:uppercase;
      text-align:center;background:var(--bg2);border-top:1px solid var(--bdr);
      color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
    }
    .thumb.on .th-lbl{color:var(--gold)}
    .tv1{background:radial-gradient(circle,#2d1b0e,#120a05)}
    .tv3{background:linear-gradient(160deg,#fff5f7,#fce8ed,#fbd5de)}
    .tv4{background:radial-gradient(circle,#17181c,#050506)}
    .tv5{background:#0c0b0a}

    /* ══════════════════════════════════════
       CTA
    ══════════════════════════════════════ */
    .cta-sec{
      position:relative;z-index:1;text-align:center;
      padding:48px 16px;border-top:1px solid var(--bdr);overflow:hidden;
    }
    .cta-sec::before{
      content:'';position:absolute;pointer-events:none;
      width:280px;height:280px;border-radius:50%;filter:blur(40px);
      background:radial-gradient(circle,rgba(201,169,110,.05),transparent 65%);
      left:50%;top:50%;transform:translate(-50%,-50%);
    }
    .cta-ey{font-size:.52rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin-bottom:10px}
    .cta-ttl{
      font-family:'Cormorant Garamond',serif;
      font-size:clamp(1.5rem,5vw,2.6rem);font-weight:300;
      color:var(--gold2);margin-bottom:10px;line-height:1.1;
    }
    .cta-desc{font-size:.78rem;color:var(--muted);max-width:300px;margin:0 auto 20px;line-height:1.7}
    .cta-btn{
      display:inline-block;text-decoration:none;
      font-size:.65rem;letter-spacing:.14em;text-transform:uppercase;
      background:var(--gold);color:var(--bg);padding:11px 26px;font-weight:600;
      transition:background .2s;
    }
    .cta-btn:hover{background:var(--gold2)}

    /* ══════════════════════════════════════
       FOOTER
    ══════════════════════════════════════ */
    .ftr{
      position:relative;z-index:1;border-top:1px solid var(--bdr);
      padding:14px 16px;
      display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:6px;
    }
    .ftr-brand{font-family:'Cormorant Garamond',serif;font-size:.85rem;font-weight:300;color:var(--gold2)}
    .ftr-copy{font-size:.56rem;color:var(--muted)}