/* ===== PURCHASE PAGE ===== */
.purchase-container{max-width:1100px;margin:0 auto;padding:40px 20px 60px}
.purchase-header{text-align:center;margin-bottom:40px}
.purchase-header-badge{display:inline-flex;align-items:center;gap:6px;background:rgba(16,185,129,0.12);border:1px solid rgba(16,185,129,0.3);color:var(--success);padding:5px 14px;border-radius:20px;font-size:12px;font-weight:700;margin-bottom:16px}
.purchase-header h1{font-size:34px;font-weight:900;margin-bottom:10px;background:var(--gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.purchase-header p{color:var(--text-secondary);font-size:15px;margin-bottom:24px}
.current-balance-card{display:inline-flex;align-items:center;gap:16px;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:16px 28px;box-shadow:var(--shadow)}
.cbc-icon{width:44px;height:44px;background:var(--gradient);border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:18px;color:white;flex-shrink:0}
.current-balance-card span{display:block;font-size:11px;color:var(--text-muted);text-transform:uppercase;letter-spacing:.5px}
.current-balance-card strong{font-size:22px;font-weight:900;color:var(--accent)}
.cbc-live{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--success);font-weight:600;margin-left:8px}

.pending-alert{display:flex;align-items:center;gap:14px;background:rgba(245,158,11,0.1);border:1px solid rgba(245,158,11,0.3);border-radius:var(--radius);padding:14px 20px;margin-bottom:28px;font-size:13px}
.pending-alert i{color:var(--warning);font-size:18px;flex-shrink:0}
.pending-alert strong{color:var(--warning)}

/* Paket Grid */
.packages-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-bottom:48px}
.pkg-card{background:var(--bg-card);border:2px solid var(--border);border-radius:var(--radius-lg);padding:28px 20px 20px;cursor:pointer;transition:var(--transition);position:relative;text-align:center;overflow:hidden}
.pkg-card::before{content:'';position:absolute;inset:0;background:var(--gradient-soft);opacity:0;transition:var(--transition)}
.pkg-card:hover{border-color:var(--primary);transform:translateY(-6px);box-shadow:0 16px 48px rgba(233,30,140,0.25)}
.pkg-card:hover::before{opacity:1}
.pkg-card.popular-pkg{border-color:var(--accent);box-shadow:0 8px 32px rgba(245,158,11,0.2)}
.popular-badge{position:absolute;top:-1px;left:50%;transform:translateX(-50%);background:linear-gradient(135deg,var(--accent),#ef4444);color:white;padding:4px 16px;border-radius:0 0 12px 12px;font-size:11px;font-weight:800;white-space:nowrap;letter-spacing:.3px}
.pkg-name{font-size:12px;font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:1px;margin-bottom:12px;position:relative}
.pkg-points-main{font-size:42px;font-weight:900;color:white;line-height:1;position:relative}
.lp-label{font-size:18px;font-weight:700;color:var(--accent)}
.pkg-bonus{font-size:12px;color:var(--success);font-weight:700;margin:6px 0 2px;position:relative}
.pkg-bonus-empty{height:20px}
.pkg-total-lp{font-size:13px;color:var(--text-secondary);margin-bottom:12px;position:relative}
.pkg-price-main{font-size:26px;font-weight:900;color:white;margin:8px 0 2px;position:relative}
.pkg-per{font-size:11px;color:var(--text-muted);margin-bottom:14px;position:relative}
.pkg-select-btn{display:inline-flex;align-items:center;gap:6px;background:var(--gradient);color:white;padding:8px 20px;border-radius:20px;font-size:13px;font-weight:700;transition:var(--transition);position:relative}
.pkg-card:hover .pkg-select-btn{box-shadow:0 4px 16px rgba(233,30,140,0.4);transform:scale(1.05)}

/* LP Info Grid */
.lp-info-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:40px}
.lp-info-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:22px;text-align:center;transition:var(--transition)}
.lp-info-card:hover{border-color:rgba(233,30,140,0.3);transform:translateY(-3px)}
/* ===== METHOD SELECTION ===== */
.method-header{text-align:center;margin-bottom:36px}
.method-header h2{font-size:28px;font-weight:900;margin:10px 0 8px;background:var(--gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.method-header p{color:var(--text-secondary);font-size:15px}
.btn-back{background:none;border:1px solid var(--border);color:var(--text-secondary);padding:8px 16px;border-radius:20px;font-size:13px;cursor:pointer;transition:var(--transition);margin-bottom:16px}
.btn-back:hover{border-color:var(--primary);color:var(--primary)}
.method-pkg-info{max-width:480px;margin:0 auto 32px}
.method-cards{display:grid;grid-template-columns:1fr 1fr;gap:24px;max-width:640px;margin:0 auto 24px}
.method-card{background:var(--bg-card);border:2px solid var(--border);border-radius:var(--radius-xl);padding:32px 24px;text-align:center;cursor:pointer;transition:var(--transition);position:relative;overflow:hidden}
.method-card:hover{transform:translateY(-4px);box-shadow:0 16px 40px rgba(233,30,140,0.2)}
.method-card.selected{border-color:var(--primary);box-shadow:0 0 0 3px rgba(233,30,140,0.15)}
.method-card-soon{opacity:0.6;cursor:not-allowed}
.method-card-soon:hover{transform:none;box-shadow:none}
.method-card-active{border-color:rgba(16,185,129,0.4)}
.method-card-active:hover{border-color:var(--success);box-shadow:0 16px 40px rgba(16,185,129,0.2)}
.method-soon-badge{position:absolute;top:12px;right:12px;background:rgba(245,158,11,0.15);border:1px solid rgba(245,158,11,0.3);color:var(--warning);padding:3px 10px;border-radius:20px;font-size:11px;font-weight:700}
.method-active-badge{position:absolute;top:12px;right:12px;background:rgba(16,185,129,0.12);border:1px solid rgba(16,185,129,0.3);color:var(--success);padding:3px 10px;border-radius:20px;font-size:11px;font-weight:700}
.method-icon{width:64px;height:64px;background:var(--gradient);border-radius:18px;display:flex;align-items:center;justify-content:center;font-size:26px;color:white;margin:0 auto 16px}
.method-name{font-size:18px;font-weight:800;color:white;margin-bottom:6px}
.method-desc{font-size:13px;color:var(--text-secondary);margin-bottom:16px}
.method-tags{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.method-tags span{background:rgba(233,30,140,0.1);border:1px solid rgba(233,30,140,0.2);color:var(--text-secondary);padding:3px 10px;border-radius:20px;font-size:11px;font-weight:600}
.method-note{text-align:center;font-size:13px;color:var(--text-muted);max-width:500px;margin:0 auto}
.method-note i{color:var(--accent);margin-right:6px}
/* ===== PAYMENT FLOW ===== */
.payment-flow{display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:start}
.payment-left-header,.payment-right-header{margin-bottom:24px}
.step-badge{display:inline-flex;align-items:center;background:var(--gradient);color:white;padding:4px 14px;border-radius:20px;font-size:11px;font-weight:800;margin-bottom:10px;letter-spacing:.5px}
.payment-left-header h2,.payment-right-header h2{font-size:20px;font-weight:800;margin-bottom:6px}
.payment-left-header p,.payment-right-header p{font-size:13px;color:var(--text-secondary)}
.iban-card{background:linear-gradient(135deg,rgba(12,12,32,0.98),rgba(18,18,42,0.98));border:1px solid rgba(233,30,140,0.25);border-radius:var(--radius-xl);padding:24px;margin-bottom:24px;box-shadow:0 8px 32px rgba(233,30,140,0.1)}
.iban-card-header{display:flex;align-items:center;gap:14px;padding-bottom:18px;border-bottom:1px solid rgba(255,255,255,0.06);margin-bottom:18px}
.bank-logo-wrap{width:48px;height:48px;background:var(--gradient);border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:20px;color:white;flex-shrink:0}
.bank-name{font-size:14px;font-weight:800;color:white}
.bank-type{font-size:11px;color:var(--text-muted);margin-top:2px}
.iban-field{margin-bottom:16px}
.iban-field label{display:block;font-size:10px;color:var(--text-muted);text-transform:uppercase;letter-spacing:.8px;font-weight:700;margin-bottom:6px}
.iban-value-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.iban-value{font-size:18px;font-weight:800;color:white;letter-spacing:2px;font-family:'Courier New',monospace;word-break:break-all}
.iban-value-sm{font-size:15px;font-weight:700;color:white}
.copy-btn{display:inline-flex;align-items:center;gap:6px;background:rgba(233,30,140,0.15);border:1px solid rgba(233,30,140,0.3);color:var(--primary);padding:6px 14px;border-radius:20px;font-size:12px;font-weight:700;cursor:pointer;transition:var(--transition);flex-shrink:0}
.copy-btn:hover{background:rgba(233,30,140,0.25);box-shadow:0 0 16px rgba(233,30,140,0.3)}
.copy-btn.copied{background:rgba(16,185,129,0.15);border-color:var(--success);color:var(--success)}
.amount-field .pay-amount{font-size:28px;font-weight:900;color:var(--accent)}
.iban-ref-note{display:flex;align-items:flex-start;gap:8px;background:rgba(245,158,11,0.08);border:1px solid rgba(245,158,11,0.2);border-radius:var(--radius);padding:10px 14px;font-size:12px;color:var(--text-secondary);margin-top:4px}
.iban-ref-note i{color:var(--warning);flex-shrink:0;margin-top:1px}
.payment-steps{display:flex;flex-direction:column;gap:10px}
.ps-item{display:flex;align-items:center;gap:14px;font-size:13px;color:var(--text-secondary)}
.ps-num{width:28px;height:28px;border-radius:50%;background:rgba(233,30,140,0.15);border:1px solid rgba(233,30,140,0.3);color:var(--primary);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;flex-shrink:0}
.ps-item-highlight .ps-num{background:var(--gradient);border-color:transparent;color:white}
.ps-item-highlight{color:var(--text-primary);font-weight:600}
.selected-pkg-card{margin-bottom:20px}
.spk-inner{display:flex;align-items:center;justify-content:space-between;background:rgba(233,30,140,0.08);border:1px solid rgba(233,30,140,0.2);border-radius:var(--radius-lg);padding:16px 20px}
.spk-popular{background:rgba(245,158,11,0.08);border-color:rgba(245,158,11,0.3)}
.spk-name{font-size:13px;font-weight:700;color:var(--text-secondary);margin-bottom:4px}
.spk-lp{font-size:20px;font-weight:900;color:white}
.spk-bonus{font-size:12px;color:var(--success);font-weight:600}
.spk-price{font-size:24px;font-weight:900;color:var(--accent)}
.req{color:var(--danger);font-size:13px}
.eft-security-note{display:flex;align-items:center;gap:10px;background:rgba(16,185,129,0.06);border:1px solid rgba(16,185,129,0.2);border-radius:var(--radius);padding:12px 16px;font-size:12px;color:var(--text-secondary);margin-bottom:20px}
.eft-security-note i{color:var(--success);font-size:16px;flex-shrink:0}
.mt-10{margin-top:10px}
/* ===== SUCCESS SCREEN ===== */
.success-screen{max-width:560px;margin:60px auto;text-align:center}
.success-icon-wrap{position:relative;width:90px;height:90px;margin:0 auto 32px}
.success-icon{width:90px;height:90px;background:var(--gradient);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:36px;color:white;position:relative;z-index:1;animation:successPop .5s cubic-bezier(.34,1.56,.64,1)}
.success-ripple{position:absolute;inset:-10px;border-radius:50%;border:2px solid rgba(233,30,140,0.3);animation:rippleOut 1.5s ease-out infinite}
@keyframes successPop{from{transform:scale(0)}to{transform:scale(1)}}
@keyframes rippleOut{from{transform:scale(.9);opacity:1}to{transform:scale(1.6);opacity:0}}
.success-screen h2{font-size:28px;font-weight:900;margin-bottom:10px}
.success-screen p{color:var(--text-secondary);font-size:15px;margin-bottom:28px}
.success-ref-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-xl);padding:24px;margin-bottom:24px}
.src-label{font-size:11px;color:var(--text-muted);text-transform:uppercase;letter-spacing:.8px;font-weight:700;margin-bottom:8px}
.src-code{font-size:26px;font-weight:900;color:var(--accent);letter-spacing:2px;font-family:'Courier New',monospace;margin-bottom:6px}
.src-note{font-size:12px;color:var(--text-muted)}
.success-pkg-info{margin-bottom:28px}
.support-cta{background:rgba(37,211,102,0.06);border:1px solid rgba(37,211,102,0.2);border-radius:var(--radius-xl);padding:24px;margin-bottom:24px}
.support-cta p{font-size:14px;color:var(--text-secondary);margin-bottom:14px}
.support-cta p i{color:#25d366;margin-right:6px}
.btn-success{background:linear-gradient(135deg,#25d366,#128c7e);color:white;border:none;box-shadow:0 4px 20px rgba(37,211,102,0.3)}
.btn-success:hover{transform:translateY(-2px);box-shadow:0 8px 28px rgba(37,211,102,0.5)}
.support-alt{font-size:12px;color:var(--text-muted);margin-top:12px!important;margin-bottom:0!important}
.success-btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

/* ===== RESPONSIVE ===== */
@media(max-width:900px){.packages-grid{grid-template-columns:repeat(2,1fr)}.payment-flow{grid-template-columns:1fr}.lp-info-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.packages-grid{grid-template-columns:1fr}.lp-info-grid{grid-template-columns:1fr}.iban-value{font-size:14px;letter-spacing:1px}.current-balance-card{flex-wrap:wrap;justify-content:center}.success-btns{flex-direction:column}}


.lp-info-icon{font-size:30px;margin-bottom:10px}
.lp-info-card h4{font-size:14px;font-weight:700;margin-bottom:4px}
.lp-info-card p{font-size:12px;color:var(--text-secondary)}