:root { --primary-color:#0d6efd; --success-color:#198754; --danger-color:#dc3545; --heading-color:#2c3e50; --body-text-color:#495057; --light-gray-color:#e0e0e0; --border-color:#dee2e6; --background-light:#f8f9fa; --font-family-sans-serif:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; --font-size-base:1rem; --font-size-lg:1.125rem; --font-size-md:1rem; --font-size-sm:0.875rem; --font-size-xs:0.75rem; --border-radius:0.375rem; --box-shadow:0 4px 12px rgba(0,0,0,0.08); --transition-speed:0.3s; }
html, body { height: 100%; margin: 0; }
body { font-family:var(--font-family-sans-serif); color:var(--body-text-color); font-size:var(--font-size-base); /* padding:20px; */}
.form-step { display: none; } 
.form-step.active-step { display: block; } 
@keyframes fadeIn { from { opacity:0; transform:translateY(20px); } to { opacity:1; transform:translateY(0); } }
.progress-container { display:flex; justify-content:space-between; position:relative; margin-bottom:40px; width:80%; margin-left:auto; margin-right:auto; } 
.progress-container::before { content:''; position:absolute; top:50%; left:0; transform:translateY(-50%); height:4px; width:100%; background-color:var(--light-gray-color); z-index:1; } 
.progress-bar { position:absolute; top:50%; left:0; transform:translateY(-50%); height:4px; background-color:var(--primary-color); width:0%; z-index:2; transition:width 0.4s ease; }
.step-indicator { color:#999; background-color:#fff; padding:5px 15px; border:2px solid var(--light-gray-color); border-radius:50%; z-index:3; font-weight:bold; font-size:1rem; transition:all 0.4s ease; position:relative; } 
.step-indicator.active { border-color:var(--primary-color); color:var(--primary-color); } 
.step-indicator::after { content:attr(data-title); position:absolute; top:130%; left:50%; transform:translateX(-50%); width:150px; text-align:center; font-size:1rem; color:navy; }
.form-step-title { color:#94470c; margin-bottom:1.5rem; font-weight:550; font-size:var(--font-size-lg); } .section-title2 { color:navy; display:flex; text-align:left !important; gap:0.5rem; margin-bottom:1rem; font-size:1.25rem; } 
.discount-badge { display:inline-block; background-color:orange; color:white; font-weight:450; font-size:var(--font-size-xs); padding:0.2rem 0.6rem; border-radius:12px; margin-left:0.25rem; vertical-align:middle; }
.ekle-btn,.cikar-btn { padding:0.2rem 0.8rem; font-size:var(--font-size-xs); border-radius:20px; font-weight:500; border-width:1px; transition:all 0.2s ease-in-out; box-shadow:none !important; } 
.ekle-btn:hover,.cikar-btn:hover { transform:translateY(-2px); box-shadow:0 4px 8px rgba(0,0,0,0.1) !important; } 
.sure-btn-group .btn { padding:0.1rem 0.6rem; font-size:var(--font-size-xs); line-height:1.2; } 
.sure-btn-group.disabled-group .btn { pointer-events:none; opacity:0.65; }
.modern-toggle { position:relative; display:inline-block; width:60px; height:28px; } 
.modern-toggle input { display:none; } 
.toggle-slider { position:absolute; cursor:pointer; top:0; left:0; right:0; bottom:0; background-color:var(--light-gray-color); border-radius:34px; transition:background-color var(--transition-speed); } 
.toggle-slider::before { position:absolute; content:""; height:22px; width:22px; left:3px; bottom:3px; background-color:var(--primary-color); border-radius:50%; transition:transform var(--transition-speed); } 
.modern-toggle input:checked + .toggle-slider::before { transform:translateX(32px); }

.category-header { cursor:pointer; padding:0.75rem 1rem; background-color:var(--background-light); border:1px solid var(--border-color); border-radius:var(--border-radius); margin-top:1rem; font-weight:600; color:var(--body-text-color); display:flex; justify-content:space-between; align-items:center; transition:background-color var(--transition-speed); } 
.category-header:hover { background-color:#e9ecef; }
.subcategory-header { background:rgb(239, 247, 255); padding: 8px 12px; border-left: 4px solid #0d6efd; margin: 8px 15px; cursor: pointer;} 
.subcategory-header i { float: right; transition: transform 0.3s ease-in-out; } 
.subcategory-header[aria-expanded="true"] i { transform: rotate(180deg);  }

.modul-tablosu, .sepet-tablosu { font-size: var(--font-size-sm); }
.table.modul-tablosu th, .table.sepet-tablosu th { font-weight: 600; }
.table.modul-tablosu th { background-color: #e6f2ff; color: navy; font-size: 1rem; }
.table.sepet-tablosu th { background-color: #cce5ff; color: navy; font-size: 1rem; }
.table.modul-tablosu td:not(:first-child), 
.table.modul-tablosu th:not(:first-child),
.table.sepet-tablosu td:not(:first-child), 
.table.sepet-tablosu th:not(:first-child) { text-align: center; }
.col-md-12 a { color: #007bff; text-decoration: underline; }
.col-md-12 a:hover { color: #0056b3; }
.app-modal-overlay { position: fixed; inset: 0; background-color: rgba(0, 0, 0, 0.7); display: flex; justify-content: center; align-items: center; z-index: 1050; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; }
.app-modal-overlay.show { opacity: 1; visibility: visible; }
.app-modal-content { background-color: #fff; padding: 20px; border-radius: 10px; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); max-width: 90%; max-height: 90%; overflow-y: auto; position: relative; transform: translateY(-50px); transition: transform 0.3s ease; min-width: 450px; }
.app-modal-overlay.show .app-modal-content { transform: translateY(0); }
.app-modal-header { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #eee; padding-bottom: 10px; margin-bottom: 15px; }
.app-modal-header h5 { margin: 0; font-size: 1.5rem; color: var(--heading-color); }
.app-modal-close-btn { background: none; border: none; font-size: 1.5rem; cursor: pointer; color: #666; }
.app-modal-body { padding-top: 10px; font-size: 0.9rem; line-height: 1.6; color: #333; }

/* Mobil Uyumluluk - Responsive Tasarım */
@media (max-width: 768px) {
    /* Container ve genel düzenlemeler */
    .container {
        padding-left: 10px;
        padding-right: 10px;
    }
    
    /* Progress bar mobilde daha küçük */
    .progress-container {
        width: 95%;
        margin-bottom: 30px;
    }
    
    .step-indicator {
        padding: 4px 10px;
        font-size: 0.85rem;
        border-width: 1.5px;
    }
    
    .step-indicator::after {
        width: 100px;
        font-size: 0.75rem;
        top: 120%;
    }
    
    /* Başlık alanı mobilde */
    .shadow-lg.rounded-3 {
        padding: 10px !important;
    }
    
    .shadow-lg.rounded-3 h6 {
        font-size: 0.9rem !important;
    }
    
    /* Section başlıkları */
    .section-title2 {
        font-size: 1.1rem !important;
        flex-wrap: wrap;
    }
    
    /* Tablolar mobilde scroll edilebilir */
    .table-responsive {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    .modul-tablosu, .sepet-tablosu {
        font-size: 0.8rem;
        min-width: 600px;
    }
    
    .table.modul-tablosu th, 
    .table.sepet-tablosu th {
        font-size: 0.85rem;
        padding: 8px 4px;
        white-space: nowrap;
    }
    
    .table.modul-tablosu td, 
    .table.sepet-tablosu td {
        padding: 8px 4px;
        font-size: 0.8rem;
    }

    /* .ekle-btn,.cikar-btn { padding:0.2rem 0.8rem; font-size:var(--font-size-xs); border-radius:20px; font-weight:500; border-width:1px; transition:all 0.2s ease-in-out; box-shadow:none !important; } 
    .sure-btn-group .btn { padding:0.1rem 0.6rem; font-size:var(--font-size-xs); line-height:1.2; } 
    .sure-btn-group.disabled-group .btn { pointer-events:none; opacity:0.65; } */
    
    /* Form alanları mobilde tam genişlik */
    .input-group {
        margin-bottom: 15px !important;
    }
    
    .input-group-text {
        padding: 10px 12px;
    }
    
    .form-control {
        font-size: 0.8em;
        padding: 10px 12px;
    }
    
    /* Card içerikleri */
    .card {
        padding: 15px !important;
        margin-bottom: 15px;
    }
    
    /* Toggle switch mobilde */
    .modern-toggle {
        width: 50px;
        height: 26px;
    }
    
    .toggle-slider::before {
        height: 20px;
        width: 20px;
    }
    
    .modern-toggle input:checked + .toggle-slider::before {
        transform: translateX(24px);
    }
    
    /* Destekçi seçimi alanı */
    .d-flex.align-items-center.flex-wrap {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 15px !important;
    }
    
    /* Modal mobilde tam ekran */
    .app-modal-content {
        width: 95% !important;
        max-width: 95% !important;
        max-height: 95% !important;
        padding: 15px;
        margin: 10px;
    }
    
    .app-modal-header h5 {
        font-size: 1.2rem;
    }
    
    /* Step navigation butonları */
    .d-flex.justify-content-between {
        flex-wrap: wrap;
        gap: 10px;
    }
    
    .d-flex.justify-content-between .btn {
        flex: 1;
        min-width: 120px;
    }
    
    /* Hata mesajları */
    #step1-error-message,
    #step2-error-message,
    #step3-error-message,
    #step4-error-message {
        width: 100%;
        text-align: center;
        margin: 10px 0 !important;
        font-size: 0.9rem;
    }
    
    /* Category header */
    .category-header {
        padding: 12px 15px;
        font-size: 0.95rem;
    }
    
    .subcategory-header {
        padding: 10px 12px;
        margin: 6px 10px;
        font-size: 0.9rem;
    }
    
    /* Alert mesajları */
    .alert {
        font-size: 0.85rem;
        padding: 10px 12px;
    }
    
    /* Görüntülenecek metin uyarısı */
    #goruntulenecek_metin_uyari {
        font-size: 0.8rem;
        padding: 8px;
        margin-left: 0 !important;
        margin-top: 10px;
    }
    
    /* Checkbox alanları */
    .form-check {
        margin-top: 15px !important;
    }
    
    .form-check-label {
        font-size: 0.9rem;
        line-height: 1.5;
    }
    
    /* Scroll to top butonu */
    #scrollToTop {
        width: 45px;
        height: 45px;
        bottom: 20px;
        right: 20px;
    }
    
    /* Icon circle */
    .icon-circle {
        width: 32px !important;
        height: 32px !important;
    }
    
    .icon-circle i {
        font-size: 1.1rem !important;
    }
    
    /* Info icon ve metin */
    .d-flex.justify-content-between.align-items-center .section-title2 {
        flex-direction: column;
        align-items: flex-start !important;
    }
    
    .d-flex.justify-content-between.align-items-center > div:last-child {
        margin-top: 8px;
        font-size: 0.85rem !important;
    }
    
    /* Sayac kodu mobilde */
    .sayac-kodu-mobil {
        margin-top: 5px !important;
    }

    .goruntulenecek-metin-baslik {
        color: navy;
        font-weight: 450 !important;
    }
}

@media (min-width: 768px) {
    .sayac-kodu-mobil {
        margin-top: 0 !important;
    }
    
    .modul-secim-info {
        margin-top: 0 !important;
        margin-left: 10px !important;
    }
    
    .goruntulenecek-metin-baslik {
        color: navy;
        font-weight: 450 !important;
    }
}

/* Çok küçük ekranlar için ek düzenlemeler */
@media (max-width: 480px) {
    .progress-container {
        width: 100%;
    }
    
    .step-indicator {
        padding: 3px 8px;
        font-size: 0.75rem;
    }
    
    .step-indicator::after {
        width: 80px;
        font-size: 0.65rem;
    }
    
    .section-title2 {
        font-size: 1rem !important;
    }
    
    .modul-tablosu, .sepet-tablosu {
        font-size: 0.75rem;
        min-width: 500px;
    }
    
    .card {
        padding: 12px !important;
    }
    
    .app-modal-content {
        padding: 12px;
    }
    
    .input-group-text {
        padding: 8px 10px;
    }
    
    .form-control {
        padding: 8px 10px;
    }
}

.banner-toggle-content {
    transition: max-height var(--transition-speed) ease-out, padding var(--transition-speed) ease-out, opacity var(--transition-speed) ease-out;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    padding: 0px;
    border-color: #e9ecef !important;
}

.banner-toggle-content.active {
    max-height: 500px;
    padding: 10px;
    opacity: 1;
}