/* Dipindah dari shop/product.php (blok #2, id=product-premium) */
        :root{
            --sg-blue:#1f8cff;
            --sg-blue-dark:#0a4cff;
            --sg-cyan:#38d4ff;
            --sg-bg:#f6f9ff;
            --sg-card:rgba(255,255,255,.94);
            --sg-line:#e3ecfb;
            --sg-text:#0a0b0d;
            --sg-muted:#64748b;
            --sg-shadow:0 18px 48px -30px rgba(15,30,60,.28);
        }
        [data-theme="dark"]{
            --sg-bg:#050b18;
            --sg-card:rgba(13,24,42,.78);
            --sg-line:rgba(148,197,255,.14);
            --sg-text:#f8fbff;
            --sg-muted:rgba(226,239,255,.68);
            --sg-shadow:0 22px 56px -34px rgba(0,0,0,.7);
        }
        body{
            color:var(--sg-text);
            background:
                radial-gradient(980px 520px at 82% -12%,rgba(56,212,255,.14),transparent 55%),
                radial-gradient(760px 420px at -12% 28%,rgba(31,140,255,.10),transparent 60%),
                var(--sg-bg) !important;
        }
        .nav{
            background:rgba(255,255,255,.78)!important;
            border-bottom:1px solid var(--sg-line)!important;
            backdrop-filter:blur(18px) saturate(140%);
            -webkit-backdrop-filter:blur(18px) saturate(140%);
        }
        [data-theme="dark"] .nav{background:rgba(7,14,28,.82)!important}
        .nav-in{max-width:1120px!important;padding:12px 18px!important}
        .brand{
            gap:10px!important;
            font-size:1rem!important;
            letter-spacing:.2px;
        }
        .brand i{
            width:36px;height:36px;border-radius:12px;
            display:inline-flex;align-items:center;justify-content:center;
            color:#fff!important;
            background:linear-gradient(135deg,var(--sg-blue),var(--sg-cyan));
            box-shadow:0 12px 24px -14px rgba(31,140,255,.65);
        }
        .nav-links{gap:10px!important}
        .nav-links a{
            padding:8px 12px;border-radius:12px;
            font-size:.82rem!important;font-weight:800!important;
            color:var(--sg-muted)!important;
        }
        .nav-links a:hover{background:#eaf2ff;color:var(--sg-blue-dark)!important}
        [data-theme="dark"] .nav-links a:hover{background:rgba(56,212,255,.10);color:#fff!important}
        .theme-btn{cursor:pointer}

        .hero{
            position:relative;
            overflow:hidden;
            border-radius:0 0 32px 32px!important;
            background:
                radial-gradient(600px 320px at 88% 12%,rgba(125,241,255,.32),transparent 58%),
                linear-gradient(135deg,#071833 0%,#0a4cff 54%,#38d4ff 100%)!important;
        }
        .hero::before{
            content:'';position:absolute;inset:0;pointer-events:none;
            background-image:
                linear-gradient(rgba(255,255,255,.08) 1px,transparent 1px),
                linear-gradient(90deg,rgba(255,255,255,.08) 1px,transparent 1px);
            background-size:56px 56px;
            mask-image:radial-gradient(circle at 50% 20%,#000 35%,transparent 76%);
            -webkit-mask-image:radial-gradient(circle at 50% 20%,#000 35%,transparent 76%);
            opacity:.32;
        }
        .hero-in{
            position:relative;z-index:1;
            max-width:1120px!important;
            padding:44px 18px 82px!important;
            gap:28px!important;
        }
        .crumb{
            display:inline-flex;flex-wrap:wrap;align-items:center;gap:6px;
            padding:7px 12px;border-radius:999px;
            background:rgba(255,255,255,.12);
            border:1px solid rgba(255,255,255,.20);
            color:rgba(255,255,255,.82)!important;
            font-size:.76rem!important;font-weight:750;
            margin-bottom:18px!important;
        }
        .hero h1{
            max-width:680px;
            font-size:clamp(1.8rem,4.5vw,3rem)!important;
            line-height:1.06!important;
            letter-spacing:-.04em!important;
        }
        .hero p{
            color:rgba(226,239,255,.86)!important;
            font-size:.98rem;line-height:1.62!important;
        }
        .hero-card{
            border-radius:24px!important;
            background:rgba(255,255,255,.92)!important;
            border:1px solid rgba(255,255,255,.62);
            box-shadow:0 24px 60px -30px rgba(0,40,90,.55)!important;
            backdrop-filter:blur(18px);
            -webkit-backdrop-filter:blur(18px);
        }
        [data-theme="dark"] .hero-card{
            background:rgba(13,24,42,.78)!important;
            border-color:rgba(148,197,255,.16)!important;
        }
        .hero-card img{
            object-fit:contain!important;
            background:transparent!important;
            box-shadow:none!important;
        }
        .hero-stat span{
            background:#f6f9ff!important;
            border-color:#dbeafe!important;
            border-radius:14px!important;
        }
        [data-theme="dark"] .hero-stat span{
            background:rgba(255,255,255,.05)!important;
            border-color:var(--sg-line)!important;
        }

        .wrap{
            max-width:1120px!important;
            margin-top:-44px!important;
            padding:0 18px 56px!important;
        }
        .card{
            background:var(--sg-card)!important;
            border:1px solid var(--sg-line)!important;
            border-radius:22px!important;
            box-shadow:var(--sg-shadow)!important;
            backdrop-filter:blur(14px);
            -webkit-backdrop-filter:blur(14px);
        }
        .detail{gap:18px!important}
        .section-title h2{
            font-size:1.05rem!important;
            font-weight:900!important;
            letter-spacing:-.01em;
        }
        .detail-hero{
            align-items:center!important;
            padding:14px;
            border:1px solid var(--sg-line);
            background:rgba(246,249,255,.65);
            border-radius:20px;
        }
        [data-theme="dark"] .detail-hero{background:rgba(255,255,255,.04)}
        .detail-hero img,.detail-hero .detail-icon{
            width:76px!important;height:76px!important;border-radius:20px!important;
            object-fit:contain!important;background:transparent!important;box-shadow:none!important;
        }
        .detail-hero h2{
            font-size:1.1rem!important;
            line-height:1.25!important;
        }
        .detail-hero p{font-size:.88rem!important}
        .detail-list{gap:9px!important}
        .detail-row{
            border-color:var(--sg-line)!important;
            background:rgba(246,249,255,.72)!important;
            border-radius:14px!important;
            padding:12px 13px!important;
        }
        [data-theme="dark"] .detail-row{background:rgba(255,255,255,.045)!important}
        .detail-row span:first-child{
            font-size:.78rem;
            color:var(--sg-muted)!important;
        }
        .detail-row span:last-child{
            font-size:.82rem;
        }
        aside.card{
            position:sticky;
            top:82px;
            align-self:start;
        }
        .price{
            color:var(--sg-blue-dark)!important;
            font-size:1.55rem!important;
            letter-spacing:-.02em;
        }
        [data-theme="dark"] .price{color:var(--sg-cyan)!important}
        .btn{
            width:100%;
            min-height:46px;
            border-radius:14px!important;
            background:linear-gradient(135deg,var(--sg-blue-dark),var(--sg-blue),var(--sg-cyan))!important;
            box-shadow:0 14px 28px -16px rgba(10,76,255,.55);
            transition:transform .18s ease,filter .18s ease,box-shadow .18s ease;
        }
        .btn:hover{
            transform:translateY(-2px);
            filter:brightness(1.05);
            box-shadow:0 18px 34px -18px rgba(10,76,255,.65);
        }
        .btn-soft{
            background:rgba(246,249,255,.8)!important;
            color:var(--sg-blue-dark)!important;
            border:1px solid var(--sg-line)!important;
            box-shadow:none!important;
        }
        [data-theme="dark"] .btn-soft{
            background:rgba(255,255,255,.05)!important;
            color:#9ec6ff!important;
        }
        .checkout-shell{margin-top:22px!important}
        .checkout-direct{
            border-radius:0;
            overflow:visible;
        }
        .footer{
            background:#0b1626;
            color:rgba(226,239,255,.62)!important;
            border-top:1px solid rgba(148,197,255,.10)!important;
        }

        @keyframes productFadeUp{from{opacity:0;transform:translateY(18px);filter:blur(5px)}to{opacity:1;transform:none;filter:none}}
        .hero h1,.hero p,.hero-card,.card{animation:productFadeUp .55s cubic-bezier(.2,.8,.2,1) both}
        .hero p{animation-delay:.06s}.hero-card{animation-delay:.12s}.card{animation-delay:.16s}
        .checkout-shell,.checkout-direct{animation:none!important;transform:none!important;filter:none!important}

        @media(max-width:900px){
            aside.card{position:relative;top:auto}
            .hero-in{grid-template-columns:1fr!important;padding-bottom:68px!important}
        }
        @media(max-width:640px){
            .nav-in{padding:10px 14px!important}
            .brand{font-size:.9rem!important}
            .brand i{width:34px;height:34px}
            .hero-in{padding:30px 14px 58px!important}
            .hero-card{display:grid!important;grid-template-columns:64px 1fr!important;border-radius:20px!important;padding:16px!important}
            .hero-card img{width:64px!important;height:64px!important;border-radius:18px!important}
            .hero-stat{grid-template-columns:1fr!important}
            .wrap{margin-top:-34px!important;padding:0 12px 42px!important}
            .card{padding:16px!important;border-radius:18px!important}
            .detail-hero{align-items:flex-start!important}
            .detail-hero img{width:64px!important;height:64px!important}
        }