/* ----------------------------------------------------------- */
/* ZONE HOST - SİPARİŞ VE SEPET SİSTEMİ (MASTER RESPONSIVE)    */
/* Dosya Yolu: css/sepet.css                                   */
/* ----------------------------------------------------------- */

/* =========================================================== */
/* 1. HEADER BANNER & WIZARD (ADIM GÖSTERGESİ)                 */
/* =========================================================== */

.order-header-banner {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
    padding: 60px 0 160px 0;
    color: #fff;
    position: relative;
    margin-bottom: -80px;
    overflow: hidden;
}

.order-header-banner::before {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background-image: radial-gradient(rgba(255,255,255,0.05) 1px, transparent 1px);
    background-size: 30px 30px;
    opacity: 0.6;
}

.banner-step-badge {
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.2);
    padding: 5px 15px; border-radius: 50px; font-size: 0.8rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 1px; color: #38bdf8; margin-bottom: 15px; display: inline-block;
}

.order-wizard-steps {
    display: flex; justify-content: center; gap: 40px; margin-bottom: 20px; position: relative; z-index: 2;
}

/* Masaüstü için bağlantı çizgisi */
.order-wizard-steps::before {
    content: ''; position: absolute; top: 18px; left: 20%; width: 60%; height: 2px;
    background: rgba(255,255,255,0.1); z-index: -1;
}

.step-item { display: flex; align-items: center; gap: 10px; opacity: 0.5; transition: 0.3s; background: #0f172a; padding: 0 10px; border-radius: 20px; }
.step-item.active, .step-item.completed { opacity: 1; }

.step-circle {
    width: 35px; height: 35px; border-radius: 50%;
    background: rgba(255,255,255,0.1); border: 2px solid rgba(255,255,255,0.2);
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; color: #fff; flex-shrink: 0;
}

.step-item.completed .step-circle { background: #10b981; border-color: #10b981; }
.step-item.active .step-circle { background: #009eff; border-color: #009eff; box-shadow: 0 0 15px rgba(0,158,255,0.4); }
.step-text { font-size: 0.9rem; font-weight: 600; color: #fff; white-space: nowrap; }

.white-content-box {
    background: #fff; border-radius: 20px; box-shadow: 0 20px 50px rgba(0,0,0,0.05);
    padding: 50px; position: relative; z-index: 5; border: 1px solid #eef2f6; max-width: 900px; margin: 0 auto;
}

/* =========================================================== */
/* 2. ADIM 1: SÜRE SEÇİMİ KARTLARI                     */
/* =========================================================== */

.period-card {
    background: #fff; border: 2px solid #f1f5f9; border-radius: 16px; padding: 30px 20px;
    text-align: center; cursor: pointer; transition: all 0.3s ease; position: relative; height: 100%;
}
.period-card:hover { transform: translateY(-5px); border-color: #cbd5e1; box-shadow: 0 10px 30px rgba(0,0,0,0.05); }
.period-card.selected { border-color: #009eff; background-color: #f0f9ff; box-shadow: 0 10px 30px rgba(0, 158, 255, 0.15); }
.period-card.selected .check-icon { transform: scale(1); opacity: 1; }

.check-icon {
    position: absolute; top: -12px; right: -12px; background: #009eff; color: #fff;
    width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    font-size: 0.9rem; border: 3px solid #fff; transform: scale(0); opacity: 0; transition: 0.3s ease;
}
.p-icon { font-size: 2rem; color: #94a3b8; margin-bottom: 15px; transition: 0.3s; }
.period-card.selected .p-icon { color: #009eff; }
.p-label { font-size: 1.1rem; color: #64748b; font-weight: 600; margin-bottom: 5px; display: block; }
.p-price { font-size: 1.8rem; font-weight: 800; color: #1e293b; letter-spacing: -0.5px; }
.p-save { font-size: 0.75rem; background: #dcfce7; color: #166534; padding: 2px 8px; border-radius: 4px; font-weight: 700; display: inline-block; margin-top: 5px; }

/* =========================================================== */
/* 3. ADIM 2: DOMAIN SEÇİMİ                            */
/* =========================================================== */

.domain-option-tabs { display: flex; gap: 15px; margin-bottom: 40px; justify-content: center; flex-wrap: wrap; }
.domain-tab-btn {
    background: #fff; border: 1px solid #e2e8f0; padding: 18px 30px; border-radius: 12px;
    font-weight: 600; color: #475569; cursor: pointer; transition: 0.2s;
    display: flex; align-items: center; gap: 10px; flex: 1; justify-content: center; min-width: 200px;
}
.domain-tab-btn:hover { background: #f8fafc; color: #1e293b; }
.domain-tab-btn.active { background: #009eff; color: #fff; border-color: #009eff; box-shadow: 0 8px 20px rgba(0, 158, 255, 0.2); }
.domain-input-area { display: none; animation: fadeIn 0.4s ease-out; }
.domain-input-area.active { display: block; }
@keyframes fadeIn { from{opacity:0; transform:translateY(10px);} to{opacity:1; transform:translateY(0);} }

/* Modern Input Grubu (Kapsül) */
.modern-domain-input-group {
    display: flex; align-items: stretch; background: #ffffff; border: 1px solid #e2e8f0;
    border-radius: 12px; overflow: hidden; box-shadow: 0 4px 15px rgba(0,0,0,0.03); transition: 0.3s; height: 60px;
}
.modern-domain-input-group:focus-within { border-color: #009eff; box-shadow: 0 8px 20px rgba(0, 158, 255, 0.15); }
.mdi-input { flex-grow: 1; border: none; padding: 0 25px; font-size: 1.1rem; color: #334155; outline: none; background: transparent; font-weight: 500; width: 100%; }
.mdi-input::placeholder { color: #94a3b8; font-weight: 400; }
.btn-check-domain {
    margin-top: 20px; width: 100%; padding: 15px; border-radius: 12px; font-weight: 700; font-size: 1.1rem;
    background: #1e293b; color: #fff; border: none; transition: 0.3s;
}
.btn-check-domain:hover { background: #0f172a; transform: translateY(-2px); box-shadow: 0 10px 20px rgba(0,0,0,0.1); }

/* =========================================================== */
/* 4. ADIM 3: ÖDEME FORMLARI & GİRİŞ                   */
/* =========================================================== */

/* Modern Form Input Yapısı */
.modern-input-wrapper {
    display: flex; align-items: center; background-color: #f8fafc; border: 1px solid #e2e8f0;
    border-radius: 12px; padding: 0 15px; transition: all 0.3s ease; height: 55px;
}
.modern-input-wrapper:focus-within { background-color: #fff; border-color: #009eff; box-shadow: 0 4px 12px rgba(0, 158, 255, 0.1); transform: translateY(-2px); }
.input-icon { font-size: 1.2rem; color: #94a3b8; margin-right: 15px; transition: 0.3s; }
.modern-input-wrapper:focus-within .input-icon { color: #009eff; }
.modern-input { width: 100%; border: none; background: transparent; font-size: 0.95rem; color: #1e293b; font-weight: 500; outline: none; height: 100%; }
.modern-input::placeholder { color: #cbd5e1; font-weight: 400; }
.modern-input-wrapper.textarea-wrapper { height: auto; padding: 15px; align-items: flex-start; }
.modern-input-wrapper.textarea-wrapper .input-icon { margin-top: 5px; }
.modern-label { display: block; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; color: #64748b; margin-bottom: 8px; letter-spacing: 0.5px; margin-left: 5px; }

/* Modern Tab (Segmented Control) */
.custom-pill-nav { background-color: #f1f5f9; padding: 5px; border-radius: 12px; display: flex; gap: 5px; border: 1px solid #e2e8f0; }
.custom-pill-nav .nav-item { flex: 1; text-align: center; }
.custom-pill-nav .nav-link { width: 100%; border-radius: 8px; padding: 12px 0; font-weight: 700; font-size: 0.9rem; color: #64748b; transition: all 0.3s ease; }
.custom-pill-nav .nav-link:hover { color: #1e293b; }
.custom-pill-nav .nav-link.active { background-color: #ffffff; color: #009eff; box-shadow: 0 2px 5px rgba(0,0,0,0.05); }

/* Ödeme Yöntemi Kartları */
.checkout-box { 
    background: #ffffff; border: 1px solid #eef2f6; border-radius: 16px; overflow: hidden; 
    box-shadow: 0 10px 40px rgba(0,0,0,0.03); margin-bottom: 30px; position: relative; z-index: 5;
}
.box-header { background: #f8fafc; padding: 20px 25px; border-bottom: 1px solid #eef2f6; }
.box-header h4 { margin: 0; font-size: 1.1rem; font-weight: 700; color: #1e293b; }
.box-body { padding: 30px; }

.payment-selection-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 15px; }
.payment-option-card {
    background: #fff; border: 2px solid #eef2f6; border-radius: 12px; padding: 20px; text-align: center;
    cursor: pointer; transition: all 0.2s ease; position: relative; display: block;
}
.payment-option-card input[type="radio"] { display: none; }
.payment-option-card:hover { border-color: #cbd5e1; background: #f8fafc; }
.payment-option-card.selected { border-color: #009eff; background-color: #f0f9ff; box-shadow: 0 4px 15px rgba(0, 158, 255, 0.1); }
.payment-option-card.selected::after {
    content: '\F26B'; font-family: 'bootstrap-icons'; position: absolute; top: 10px; right: 10px; color: #009eff; font-size: 1.1rem;
}
.poc-icon { font-size: 2rem; color: #64748b; margin-bottom: 10px; }
.payment-option-card.selected .poc-icon { color: #009eff; }
.poc-title { font-weight: 700; color: #1e293b; display: block; margin-bottom: 5px; }
.poc-desc { font-size: 0.8rem; color: #10b981; font-weight: 600; display: block; }

.payment-details-area { display: none; animation: fadeIn 0.4s ease-out; }
.payment-details-area.active { display: block; }
.bank-mini-list { display: flex; gap: 20px; flex-wrap: wrap; margin-top: 20px; }
.bank-mini-item { border: 1px solid #eef2f6; padding: 15px; border-radius: 10px; text-align: center; flex: 1; }

/* =========================================================== */
/* 5. ÖZET KUTUSU (Sticky)                                     */
/* =========================================================== */

.sticky-sidebar-wrapper { position: -webkit-sticky; position: sticky; top: 100px; z-index: 99; }

.order-summary-box { 
    background: #ffffff; border-radius: 16px; padding: 30px; border: 1px solid #eef2f6; 
    box-shadow: 0 10px 40px rgba(0,0,0,0.05); position: relative; z-index: 5;
}
.summary-row { display: flex; justify-content: space-between; margin-bottom: 15px; font-size: 0.95rem; color: #64748b; }
.summary-row.total { border-top: 2px dashed #eef2f6; margin-top: 20px; padding-top: 20px; font-size: 1.2rem; color: #0f172a; font-weight: 800; }

.coupon-input-group { position: relative; margin-bottom: 20px; width: 100%; display: block; }
.coupon-input-group .custom-input {
    width: 100%; height: 50px !important; min-height: 50px !important; padding-left: 15px !important; padding-right: 100px !important;
    border: 1px solid #e2e8f0; border-radius: 10px; background-color: #f8fafc; font-size: 14px; color: #334155; outline: none; box-shadow: none; transition: 0.3s;
}
.coupon-input-group .custom-input:focus { background-color: #fff; border-color: #009eff; box-shadow: 0 0 0 4px rgba(0, 158, 255, 0.1); }
.btn-apply-coupon {
    position: absolute; right: 10px !important; top: 69% !important; transform: translateY(-50%) !important;
    height: 38px !important; line-height: 38px !important; padding: 0 20px !important; border: none; background: #eef2f6; color: #64748b; font-weight: 700;
    font-size: 13px; border-radius: 8px; cursor: pointer; z-index: 10; white-space: nowrap; display: inline-block; transition: 0.2s;
}
.btn-apply-coupon:hover { background: #009eff; color: #ffffff; box-shadow: 0 2px 8px rgba(0, 158, 255, 0.25); }

/* =========================================================== */
/* 6. RESPONSIVE / MOBİL UYUMLULUK (ÖNEMLİ KISIM)              */
/* =========================================================== */

@media (max-width: 991px) {
    /* Banner Yüksekliği */
    .order-header-banner { padding: 40px 0 100px 0; margin-bottom: -50px; }
    
    /* Wizard (Adım) Ayarları */
    .order-wizard-steps { gap: 15px; }
    .order-wizard-steps::before { display: none; } /* Çizgiyi gizle */
    .step-item { flex-direction: column; gap: 5px; background: transparent; }
    .step-text { font-size: 0.75rem; text-align: center; }
    .step-circle { width: 40px; height: 40px; font-size: 1.1rem; }

    /* Kutu Padding Azaltma */
    .white-content-box { padding: 30px 20px; }
    .checkout-box { margin-bottom: 20px; }
    .box-body { padding: 20px; }

    /* Sticky Özelliğini Kaldır */
    .sticky-sidebar-wrapper { position: static; margin-top: 30px; }
}

@media (max-width: 768px) {
    /* Domain Tabları Alt Alta */
    .domain-tab-btn { width: 100%; justify-content: flex-start; margin-bottom: 10px; }
    
    /* Modern Input Grubu Mobilde */
    .modern-domain-input-group { flex-direction: column; height: auto; }
    .mdi-input { height: 55px; border-bottom: 1px solid #f1f5f9; width: 100%; padding: 0 15px; }
    
    /* Ödeme Grid */
    .payment-selection-grid { grid-template-columns: 1fr; }
}

@media (max-width: 576px) {
    .p-price { font-size: 1.5rem; }
    .step-text { display: none; } /* Çok küçük ekranda yazıyı gizle */
    .step-item { padding: 0; }
    
    /* Form Inputları */
    .modern-input-wrapper { padding: 0 10px; }
    .input-icon { margin-right: 10px; font-size: 1rem; }
    
    /* Kupon Butonu Mobil */
    .coupon-input-group .custom-input { padding-right: 80px !important; font-size: 13px; }
    .btn-apply-coupon { padding: 0 12px !important; font-size: 11px; }
}