/* ── CSS KHUSUS DETAIL.PHP ── */
        .product-banner { position:relative; width:100%; height:280px; overflow:hidden; background:linear-gradient(110deg,#1a0e3a 0%,#0e1a40 50%,#0a2230 100%); }
        .product-banner img.banner-bg { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0.35; }
        .banner-overlay { position:absolute; inset:0; background:linear-gradient(to right,rgba(13,15,26,0.92) 30%,transparent 80%); }
        .banner-bottom-strip { position:absolute; bottom:0; left:0; right:0; height:5px; background:linear-gradient(90deg,var(--accent),var(--accent2)); }
        .banner-content { position:relative; z-index:2; height:100%; display:flex; align-items:center; padding:0 40px; gap:28px; }
        .banner-img-wrap { flex-shrink:0; width:150px; height:150px; border-radius:16px; overflow:hidden; border:2px solid rgba(0,212,255,0.3); box-shadow:0 0 30px rgba(0,212,255,0.2); background:var(--bg-card2); }
        .banner-img-wrap img { width:100%; height:100%; object-fit:cover; }
        .banner-img-placeholder { width:100%; height:100%; display:flex; align-items:center; justify-content:center; font-size:48px; color:var(--accent); opacity:0.5; }
        .banner-info h1 { font-family:'Rajdhani',sans-serif; font-size:clamp(24px,4vw,40px); font-weight:700; color:#fff; text-shadow:0 2px 20px rgba(0,212,255,0.3); line-height:1.2; margin-bottom:12px; }
        .banner-badges { display:flex; flex-wrap:wrap; gap:10px; }
        .banner-badge-item { display:flex; align-items:center; gap:6px; font-size:13px; font-weight:600; color:var(--text-muted); }
        .banner-badge-item i { color:var(--accent2); font-size:15px; }
        .badge-sep { color:rgba(255,255,255,0.15); }

        .detail-layout { display:grid; grid-template-columns:1fr 340px; gap:24px; padding:32px 0 60px; }
        .section-header { display:flex; align-items:center; gap:12px; background:linear-gradient(90deg,rgba(0,212,255,0.15),rgba(0,212,255,0.03)); border-left:4px solid var(--accent); border-radius:0 8px 8px 0; padding:12px 18px; margin-bottom:20px; }
        .section-header span { font-family:'Rajdhani',sans-serif; font-size:18px; font-weight:700; color:var(--accent); letter-spacing:.5px; }
        .section-header i { color:var(--accent); font-size:18px; }
        .section-num { background:var(--accent); color:#000; font-family:'Rajdhani',sans-serif; font-weight:700; font-size:15px; width:28px; height:28px; border-radius:50%; display:flex; align-items:center; justify-content:center; }

        .variants-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
        .variant-card { position:relative; background:var(--bg-card); border:1.5px solid var(--border); border-radius:12px; padding:14px 14px 12px; cursor:pointer; transition:all .25s; overflow:hidden; }
        .variant-card::before { content:''; position:absolute; inset:0; background:linear-gradient(135deg,rgba(0,212,255,0.05) 0%,transparent 60%); opacity:0; transition:opacity .25s; }
        .variant-card:hover { border-color:var(--accent); transform:translateY(-2px); box-shadow:0 8px 24px rgba(0,212,255,0.15); }
        .variant-card:hover::before { opacity:1; }
        .variant-card.selected { border-color:var(--accent); background:rgba(0,212,255,0.08); box-shadow:0 0 0 3px rgba(0,212,255,0.2); }
        .variant-card.out-of-stock { opacity:.45; cursor:not-allowed; filter:grayscale(.5); }
        .variant-card.out-of-stock:hover { transform:none; box-shadow:none; border-color:var(--border); }
        .variant-name { font-family:'Rajdhani',sans-serif; font-size:13px; font-weight:700; color:var(--text-main); text-transform:uppercase; letter-spacing:.3px; line-height:1.3; margin-bottom:6px; }
        .variant-price { font-family:'Rajdhani',sans-serif; font-size:16px; font-weight:700; color:var(--accent); margin-bottom:5px; }
        .variant-stock { font-size:11px; font-weight:600; color:var(--success); display:flex; align-items:center; gap:4px; }
        .variant-stock.empty { color:var(--danger); }
        .variant-stock i { font-size:10px; }
        .variant-check { position:absolute; top:10px; left:10px; width:20px; height:20px; border-radius:50%; background:var(--accent); display:flex; align-items:center; justify-content:center; font-size:11px; color:#000; opacity:0; transform:scale(0); transition:all .2s; }
        .variant-card.selected .variant-check { opacity:1; transform:scale(1); }

        .selected-bar { background:rgba(0,212,255,0.06); border:1px solid rgba(0,212,255,0.2); border-radius:12px; padding:16px 18px; margin:20px 0 16px; display:none; align-items:center; justify-content:space-between; gap:12px; }
        .selected-bar.show { display:flex; }
        .selected-bar-left { display:flex; align-items:center; gap:10px; }
        .selected-bar-left i { color:var(--accent); font-size:20px; }
        .selected-bar-name { font-size:14px; font-weight:700; color:var(--text-main); }
        .selected-bar-price { font-family:'Rajdhani',sans-serif; font-size:22px; font-weight:700; color:var(--accent2); }

        .btn-checkout { display:inline-flex; align-items:center; gap:8px; background:linear-gradient(90deg,var(--accent),#0099cc); color:#000; font-family:'Rajdhani',sans-serif; font-size:16px; font-weight:700; padding:12px 28px; border-radius:10px; border:none; cursor:pointer; text-decoration:none; letter-spacing:.5px; transition:all .2s; width:100%; justify-content:center; }
        .btn-checkout:hover { filter:brightness(1.1); transform:translateY(-1px); box-shadow:0 6px 20px rgba(0,212,255,0.3); }
        .btn-checkout.disabled { background:var(--bg-card2); color:var(--text-muted); cursor:not-allowed; transform:none; box-shadow:none; border:1px solid var(--border); pointer-events:none; }

        .collapsible-section { max-height:0; overflow:hidden; transition:max-height .5s cubic-bezier(.4,0,.2,1),opacity .4s; opacity:0; }
        .collapsible-section.open { max-height:900px; opacity:1; }

        .checkout-wrap { margin-top:20px; background:var(--bg-card); border:1px solid rgba(0,212,255,0.25); border-radius:16px; overflow:hidden; }
        .checkout-header { display:flex; align-items:center; justify-content:space-between; padding:16px 20px; background:linear-gradient(90deg,rgba(0,212,255,0.12),rgba(0,212,255,0.03)); border-bottom:1px solid var(--border); }
        .checkout-header-left { display:flex; align-items:center; gap:10px; }
        .checkout-header-left i { color:var(--accent); font-size:18px; }
        .checkout-header-left span { font-family:'Rajdhani',sans-serif; font-size:17px; font-weight:700; color:var(--accent); }
        .checkout-summary { display:flex; align-items:center; gap:8px; font-size:13px; color:var(--text-muted); }
        .checkout-summary strong { color:var(--accent2); font-family:'Rajdhani',sans-serif; font-size:16px; }
        .checkout-body { padding:22px; }
        .section-header2 { display:flex; align-items:center; gap:12px; background:linear-gradient(90deg,rgba(0,212,255,0.15),rgba(0,212,255,0.03)); border-left:4px solid var(--accent); border-radius:0 8px 8px 0; padding:10px 16px; margin-bottom:18px; }
        .section-header2 span { font-family:'Rajdhani',sans-serif; font-size:17px; font-weight:700; color:var(--accent); }
        .section-header2 i { color:var(--accent); }
        .form-row { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
        .form-group { margin-bottom:16px; }
        .form-group label { display:block; font-size:12px; font-weight:700; color:var(--text-muted); text-transform:uppercase; letter-spacing:.6px; margin-bottom:7px; }
        .form-group label i { margin-right:5px; color:var(--accent); }
        .form-control { width:100%; background:var(--bg-card2); border:1.5px solid var(--border); border-radius:9px; padding:10px 14px; color:var(--text-main); font-family:'Nunito',sans-serif; font-size:14px; transition:border-color .2s,box-shadow .2s; outline:none; }
        .form-control:focus { border-color:var(--accent); box-shadow:0 0 0 3px rgba(0,212,255,0.12); }
        .form-control::placeholder { color:rgba(122,139,163,0.5); }
        .form-hint { font-size:11px; color:var(--text-muted); margin-top:5px; }
        .alert-error { display:flex; align-items:center; gap:10px; background:rgba(255,77,106,0.1); border:1px solid rgba(255,77,106,0.35); border-radius:9px; padding:11px 14px; margin-bottom:18px; font-size:13px; color:#ff7a8a; }
        .alert-error i { font-size:16px; flex-shrink:0; }
        .btn-submit { display:flex; align-items:center; justify-content:center; gap:8px; width:100%; background:linear-gradient(90deg,var(--accent2),#e6b800); color:#000; font-family:'Rajdhani',sans-serif; font-size:17px; font-weight:700; padding:13px; border-radius:10px; border:none; cursor:pointer; letter-spacing:.5px; transition:all .2s; }
        .btn-submit:hover { filter:brightness(1.08); transform:translateY(-1px); box-shadow:0 6px 20px rgba(247,201,72,0.3); }

        .payment-panel { margin-top:20px; background:var(--bg-card); border:1px solid rgba(34,214,126,0.3); border-radius:16px; overflow:hidden; }
        .payment-panel-header { padding:16px 22px; background:linear-gradient(90deg,rgba(34,214,126,0.12),rgba(34,214,126,0.03)); border-bottom:1px solid rgba(34,214,126,0.15); display:flex; align-items:center; gap:12px; }
        .payment-panel-header i { color:var(--success); font-size:20px; }
        .payment-panel-header span { font-family:'Rajdhani',sans-serif; font-size:17px; font-weight:700; color:var(--success); }
        .payment-panel-body { padding:20px 22px; }
        .pay-row { display:flex; justify-content:space-between; align-items:center; padding:9px 13px; background:var(--bg-card2); border-radius:8px; margin-bottom:8px; font-size:13px; }
        .pay-row .label { color:var(--text-muted); }
        .pay-row .val { font-weight:700; color:var(--text-main); }
        .pay-row .val.price { color:var(--accent2); font-family:'Rajdhani',sans-serif; font-size:18px; }
        .btn-pay { display:flex; align-items:center; justify-content:center; gap:10px; width:100%; background:linear-gradient(90deg,var(--success),#18a85a); color:#000; font-family:'Rajdhani',sans-serif; font-size:17px; font-weight:700; padding:13px; border-radius:10px; border:none; cursor:pointer; letter-spacing:.5px; transition:all .2s; margin-top:16px; text-decoration:none; }
        .btn-pay:hover { filter:brightness(1.08); transform:translateY(-1px); box-shadow:0 8px 24px rgba(34,214,126,0.3); }
        .pay-status { margin-top:12px; padding:11px 14px; border-radius:8px; font-size:13px; font-weight:600; display:none; align-items:center; gap:8px; width:100%; }
        .pay-status.success { background:rgba(34,214,126,0.12); border:1px solid rgba(34,214,126,0.3); color:var(--success); display:flex; }
        .pay-status.pending { background:rgba(247,201,72,0.1);  border:1px solid rgba(247,201,72,0.3);  color:var(--warning); display:flex; }
        .pay-status.error   { background:rgba(255,77,106,0.1);  border:1px solid rgba(255,77,106,0.3);  color:#ff7a8a; display:flex; }
        .pay-status.closed  { background:rgba(122,139,163,0.1); border:1px solid rgba(122,139,163,0.2); color:var(--text-muted); display:flex; }

        .account-box { background:linear-gradient(135deg,rgba(0,212,255,0.06),rgba(0,212,255,0.02)); border:1.5px solid rgba(0,212,255,0.2); border-radius:11px; padding:16px 18px; margin-bottom:10px; cursor:pointer; transition:border-color .2s; }
        .account-box:hover { border-color:var(--accent); }
        .account-box-label { font-size:11px; font-weight:700; color:var(--text-muted); text-transform:uppercase; letter-spacing:.6px; margin-bottom:8px; }
        .account-box-val { font-family:'Rajdhani',sans-serif; font-size:20px; font-weight:700; color:var(--accent); background:var(--bg-card2); border:1px solid var(--border); border-radius:7px; padding:9px 14px; display:flex; align-items:center; justify-content:space-between; gap:8px; position:relative; }
        .account-box-val .copy-ic { color:var(--text-muted); font-size:15px; transition:color .2s; }
        .account-box:hover .copy-ic { color:var(--accent); }
        .copied-toast { position:absolute; right:40px; top:50%; transform:translateY(-50%); background:var(--success); color:#000; font-size:10px; font-weight:700; padding:2px 8px; border-radius:5px; opacity:0; transition:opacity .2s; pointer-events:none; }
        .copied-toast.show { opacity:1; }
        .wa-note { display:flex; align-items:center; gap:8px; background:rgba(34,214,126,0.08); border:1px solid rgba(34,214,126,0.2); border-radius:8px; padding:10px 13px; font-size:13px; color:var(--success); margin-top:10px; }
        .wa-note i { font-size:16px; flex-shrink:0; }
        .info-box { display:flex; align-items:flex-start; gap:10px; border-radius:9px; padding:12px 14px; font-size:13px; line-height:1.65; }
        .info-box.yellow { background:rgba(247,201,72,0.07); border:1px solid rgba(247,201,72,0.2); color:var(--warning); }
        .info-box i { font-size:18px; flex-shrink:0; margin-top:1px; }

        .sidebar { display:flex; flex-direction:column; gap:16px; }
        .info-card { background:var(--bg-card); border:1px solid var(--border); border-radius:14px; padding:20px; }
        .info-card-title { font-family:'Rajdhani',sans-serif; font-size:15px; font-weight:700; color:var(--accent); letter-spacing:.5px; margin-bottom:14px; display:flex; align-items:center; gap:8px; }
        .desc-text { font-size:13.5px; line-height:1.75; color:var(--text-muted); white-space:pre-wrap; }
        .steps-list { list-style:none; display:flex; flex-direction:column; gap:10px; }
        .steps-list li { display:flex; gap:10px; font-size:13px; color:var(--text-muted); line-height:1.5; }
        .step-num { flex-shrink:0; width:22px; height:22px; border-radius:50%; background:linear-gradient(135deg,var(--accent),#0080aa); color:#000; font-size:11px; font-weight:700; display:flex; align-items:center; justify-content:center; margin-top:1px; }
        .feature-list { display:flex; flex-direction:column; gap:8px; }
        .feature-item { display:flex; align-items:center; gap:10px; font-size:13px; color:var(--text-main); padding:8px 10px; background:var(--bg-card2); border-radius:8px; }
        .feature-item i { color:var(--accent2); font-size:16px; width:18px; text-align:center; }

        @media(max-width:900px){ .detail-layout{grid-template-columns:1fr;} .sidebar{order:-1;} .variants-grid{grid-template-columns:repeat(2,1fr);} }
        @media(max-width:600px){ .form-row{grid-template-columns:1fr;} .banner-content{padding:0 20px;gap:16px;} .banner-img-wrap{width:100px;height:100px;} .variants-grid{grid-template-columns:repeat(2,1fr);gap:10px;} .selected-bar{flex-direction:column;align-items:flex-start;} .pay-row{flex-direction:column;align-items:flex-start;gap:4px;} }