:root{
      --bg:#0a0a0a; --surface:#121212; --border:#0e0f3a; --muted:#a4a3c8; --text:#f5f5f5; --brand:#3538e5; --accent:#3538e5; --navH:56px;
    }
    body{background: radial-gradient(1200px 600px at 20% -10%, #1a0f12 0%, transparent 60%), radial-gradient(900px 500px at 110% 10%, #14090b 0%, transparent 60%), var(--bg); color:var(--text); font-family:'Nunito', ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial}
    .bg-surface{background: linear-gradient(180deg, #181012 0%, #0f0b0c 100%)}
    .border-soft{border:1px solid var(--border)}
    .btn-gradient{background: linear-gradient(135deg, var(--brand), var(--accent)); border:none; color:#14090b; font-weight:700; box-shadow: 0 0 0 0 rgba(229,57,53,0); transition: box-shadow .2s ease}
    .btn-gradient:hover{box-shadow: 0 0 0 4px rgba(56, 53, 229, 0.18)}
    .btn-outline-light{border-color: var(--brand)!important; color: var(--brand)!important}
    .btn-outline-light:hover{background: var(--brand)!important; color:#14090b!important}
    .rounded-14{border-radius:14px}
    .img-frame{border-radius:14px; overflow:hidden; border:1px solid #3a0e12; background:#12090a}
    #hero-title{font-family:'Anton','Nunito',system-ui,Arial,Helvetica,sans-serif; letter-spacing:.02em}
    .navbar-dark .navbar-nav .nav-link{color: rgba(255,255,255,.7)}
    .navbar-dark .navbar-nav .nav-link:hover{color: var(--brand)}
    .breadcrumb .breadcrumb-item a{color: rgba(255,255,255,.7)}
    .breadcrumb .breadcrumb-item a:hover{color: var(--brand)}
    header.sticky-top{background: rgba(20,9,11,.7)!important}
    /* Pastikan drawer tetap tampil ketika body.menu-open aktif */
    @media (max-width: 576px){
      body.menu-open #topNav{ display:block!important; visibility:visible; }
      body.menu-open #topNav.collapse{ height: calc(100vh - var(--navH)) !important; }
      body.menu-open #topNav.collapse:not(.show){ /* paksa gaya drawer meskipun kelas show hilang */
        position: fixed; top: var(--navH); left: 0; bottom: 0; right: auto; height: calc(100vh - var(--navH)); width: 78vw; max-width: 360px; 
        overflow-y:auto; background: var(--brand); padding: 16px; box-shadow: 6px 0 18px rgba(0,0,0,.5); 
        border-right: 1px solid rgba(0,0,0,.25); z-index: 1060;
      }
      body.menu-open #topNav.collapsing{ height: calc(100vh - var(--navH)) !important; }
    }
    /* Toggler: ubah jadi ikon X saat menu aktif */
    .navbar-toggler.is-open .navbar-toggler-icon{background-image:none; position:relative; width:1.5rem; height:1.5rem}
    .navbar-toggler.is-open .navbar-toggler-icon::before,
    .navbar-toggler.is-open .navbar-toggler-icon::after{
      content:""; position:absolute; left:0; top:50%; width:1.5rem; height:2px; background:#fff; transform-origin:center; border-radius:2px;
    }
    .navbar-toggler.is-open .navbar-toggler-icon::before{ transform: translateY(-50%) rotate(45deg) }
    .navbar-toggler.is-open .navbar-toggler-icon::after{ transform: translateY(-50%) rotate(-45deg) }
    /* Promo modal: transparan, tanpa panel putih */
    #promoModal .modal-content{background: transparent; border: none; box-shadow: none}
    #promoModal .modal-body{padding: 0; background: transparent}
    #promoModal .modal-dialog{max-width: 420px}
    #promo-img{display:block; width:100%; height:auto; border-radius:14px}
                    .button-login-daftar {
                        display: grid;
                        grid-template-columns: repeat(2, 1fr);
                        font-weight: 700;
                    }
                    .button-login-daftar a {
                        text-align: center;
                    }
                    .login,
                    .register {
                        color: #fff;
                        padding: 20px 10px;
                    }
                    .login,
                    .login-button {
                        border: 1px solid #fff;
                        background: linear-gradient(to bottom, #0d25ff 0, #000c74 100%);
                        border: 1px solid #0d25ff;
                    }
                    .register,
                    .register-button {
                        background: linear-gradient(to bottom, #4e4e4e 0, #000 100%);
                        border: 1px solid #0d25ff;
                    }
    /* Mobile tweaks */
    @media (max-width: 576px){
      .navbar-brand img{ width: 64px !important; height: auto !important; filter: drop-shadow(0 8px 14px rgba(0,0,0,.45)); }
      .navbar-toggler{ border: none; }
      .navbar-toggler:focus{ box-shadow: 0 0 0 .2rem rgba(255, 197, 7, 0.35); }
      /* Sembunyikan breadcrumb di konten utama saat mobile */
      nav[aria-label="breadcrumb"]{ display:none !important; }
      /* Panel menu collapse disembunyikan di mobile; gunakan Offcanvas */
      #topNav.collapse.show{ display:none !important; }
      #topNav.navbar-collapse{ display:none !important; }
      body.menu-open #topNav{ display:none !important; }
      /* Offcanvas drawer styling */
      #drawerMenu.offcanvas-start{ 
        width:78vw; max-width:360px; 
        background: linear-gradient(180deg, #1b0f10 0%, #12090a 100%);
        color:#fff; box-shadow:none; border:1px solid var(--border)
      }
      #drawerMenu.offcanvas{ 
        --bs-offcanvas-bg: linear-gradient(180deg, #1b0f10 0%, #12090a 100%);
        box-shadow:none; border:1px solid var(--border)
      }
      #drawerMenu, #drawerMenu *{ -webkit-tap-highlight-color: transparent }
      #drawerMenu .offcanvas-body{ padding: 20px 16px; }
      /* Hanya tampilkan breadcrumb dalam menu, item lain disembunyikan */
      #topNav .navbar-nav, #topNav .eeat-buttons{ display: none !important; }
      /* Gaya breadcrumb vertikal di drawer */
      #drawerMenu .breadcrumb{ background: transparent; color:#fff; border-radius:8px; padding:0; margin:0; display:block; list-style:none; gap:0 }
      #drawerMenu .breadcrumb .breadcrumb-item{ display:block; margin:8px 0; border:none }
      #drawerMenu .breadcrumb .breadcrumb-item:last-child{ margin-bottom:0 }
      #drawerMenu .breadcrumb .breadcrumb-item a{
        color:#fff; display:block; text-decoration:none; padding:12px 14px; border-radius:10px;
        transition: color .18s ease, padding-left .18s ease;
        background: transparent;
      }
      #drawerMenu .breadcrumb .breadcrumb-item a:hover,
      /* Hapus highlight saat fokus programatik agar tidak tampak berbeda saat drawer dibuka */
      @media (hover: hover){
        #drawerMenu .breadcrumb .breadcrumb-item a:focus-visible{
          background: rgba(0,0,0,.16); color:#fff; padding-left:22px; outline: none;
          box-shadow: inset 3px 0 0 rgba(255,255,255,.45);
        }
      }
      #drawerMenu .breadcrumb .breadcrumb-item a:hover{
        background: rgba(0,0,0,.16); color:#fff; padding-left:22px; outline: none;
        box-shadow: inset 3px 0 0 rgba(255,255,255,.45);
      }
      /* Override: pada perangkat sentuh, fokus tidak memberi highlight agar item pertama tidak tampak berbeda */
      @media (hover: none){
        #drawerMenu .breadcrumb .breadcrumb-item a:focus,
        #drawerMenu .breadcrumb .breadcrumb-item a:focus-visible{
          background: transparent; box-shadow:none; padding-left:14px;
        }
      }
      #drawerMenu .breadcrumb .breadcrumb-item+.breadcrumb-item::before{ display:none }
      /* Samakan background semua item; hover tanpa ubah background */
      /* Paksa SATU warna latar: tidak ada latar berbeda pada item apapun */
      #drawerMenu .breadcrumb,
      #drawerMenu .breadcrumb *{
        background: transparent !important;
        -webkit-box-shadow: none !important;
        box-shadow: none !important;
        border: 0 !important;
      }
      #drawerMenu .breadcrumb .breadcrumb-item a,
      #drawerMenu .breadcrumb .breadcrumb-item a:hover,
      #drawerMenu .breadcrumb .breadcrumb-item a:focus,
      #drawerMenu .breadcrumb .breadcrumb-item a:focus-visible,
      #drawerMenu .breadcrumb .breadcrumb-item a:active{
        background: transparent !important;
        -webkit-box-shadow: none !important;
        box-shadow: none !important;
        border: 0 !important;
        -webkit-tap-highlight-color: transparent;
      }
      #drawerMenu .breadcrumb .breadcrumb-item a:hover,
      #drawerMenu .breadcrumb .breadcrumb-item a:focus-visible{
        text-decoration: underline; padding-left:18px; background: transparent !important; box-shadow:none !important;
      }
      /* Hard reset untuk memastikan tidak ada latar berbeda pada anchor pertama */
      #drawerMenu .offcanvas-body nav[aria-label="mobile-breadcrumb"] .breadcrumb .breadcrumb-item a,
      #drawerMenu .offcanvas-body nav[aria-label="mobile-breadcrumb"] .breadcrumb .breadcrumb-item a:focus,
      #drawerMenu .offcanvas-body nav[aria-label="mobile-breadcrumb"] .breadcrumb .breadcrumb-item a:active,
      #drawerMenu .offcanvas-body nav[aria-label="mobile-breadcrumb"] .breadcrumb .breadcrumb-item a:visited{
        background-color: transparent !important;
        background-image: none !important;
        box-shadow: none !important;
        outline: none !important;
        border: 0 !important;
        filter: none !important;
        text-shadow: none !important;
      }
      /* Tambahan reset menyeluruh agar benar-benar SATU warna latar */
      #drawerMenu .offcanvas-body,
      #drawerMenu .offcanvas-body *,
      #drawerMenu nav[aria-label="mobile-breadcrumb"],
      #drawerMenu nav[aria-label="mobile-breadcrumb"] *,
      #drawerMenu .breadcrumb,
      #drawerMenu .breadcrumb *,
      #drawerMenu .breadcrumb .breadcrumb-item,
      #drawerMenu .breadcrumb .breadcrumb-item *{
        background: transparent !important;
        background-color: transparent !important;
        box-shadow: none !important;
        border: 0 !important;
        outline: 0 !important;
        text-shadow: none !important;
        -webkit-tap-highlight-color: transparent;
        -webkit-appearance: none;
        appearance: none;
      }
      /* Pastikan item pertama juga tidak mendapat latar apapun */
      #drawerMenu .breadcrumb .breadcrumb-item:first-child,
      #drawerMenu .breadcrumb .breadcrumb-item:first-child a{
        background: transparent !important;
        box-shadow: none !important;
      }
      #hero-img{ margin-bottom: 10px; }
    }
    /* Form Daftar: rapikan gutter agar input menempel ke padding kartu */
    /* Hilangkan gutter horizontal bawaan .row Bootstrap di dalam form */
    /* Form adalah .row, jadi set variabel gutter di elemen itu langsung */
    #form-daftar{ --bs-gutter-x: 0; margin-left: 0; margin-right: 0; }
    /* Jaga-jaga: nolkan padding kolom jika ada override dari lib lain */
    #form-daftar > [class^="col-"],
    #form-daftar > [class*=" col-"]{ padding-left: 0; padding-right: 0; }
    /* Input padding agar tidak mentok ke tepi input */
    #form-daftar .form-control{
      padding: 12px 14px;
      width: 100%;
      max-width: 100%;
      box-sizing: border-box; /* cegah melebar melewati parent */
      display: block;
      margin-left: 0; margin-right: 0;
    }
    /* Klip isi kartu agar sudut input tidak keluar dari radius kartu */
    #daftar .bg-surface.rounded-14{ overflow: hidden; }
    /* Modal: backdrop transparan, blur seluruh halaman kecuali modal */
    .modal-backdrop{ background: transparent !important; opacity: 0 !important; }
    body.modal-blur > :not(.modal){ filter: blur(6px) brightness(.85); transition: filter .2s ease; }
    #promoModal .btn-close-custom{ position:absolute; top:8px; right:8px; background: rgba(0,0,0,.55); border:1px solid rgba(255,255,255,.25); color:#fff; border-radius:999px; width:32px; height:32px; display:flex; align-items:center; justify-content:center }
    #promoModal .btn-close-custom:hover{ background: rgba(0,0,0,.75) }