/* =====================================================
   SMM Panel - Ana CSS  |  sistem/varliklar/css/ana.css
   Tasarım Temeli: AGENT_THEME_RULES.md
   ===================================================== */

/* ── 1. GOOGLE FONTS IMPORT ─────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600;800&family=Inter:wght@400;500;600&display=swap');

/* ── 2. DESIGN TOKENS ───────────────────────────────── */
:root {
    /* Arka Planlar */
    --bg-color:     #080808;
    --bg-color-alt: #0f0f0f;
    --card-bg:      rgba(22, 22, 22, 0.6);
    --card-border:  rgba(255, 255, 255, 0.05);

    /* Metinler */
    --text-color: #ffffff;
    --text-muted: #a0a0a0;

    /* Vurgu Renkleri */
    --accent-1: #ff4d4d;
    --accent-2: #f9cb28;
    --gradient: linear-gradient(135deg, var(--accent-1), var(--accent-2));

    /* Ölçüler */
    --radius-xl:  24px;
    --radius-lg:  16px;
    --radius-md:  12px;
    --radius-pill: 40px;

    /* Tipografi */
    --font-heading: 'Outfit', sans-serif;
    --font-body:    'Inter', sans-serif;

    /* Geçiş */
    --transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);

    /* Gölgeler */
    --shadow-glow:  0 15px 30px rgba(255, 77, 77, 0.25);
    --shadow-card:  0 4px 24px rgba(0, 0, 0, 0.4);
}

/* ── 3. RESET & BASE ────────────────────────────────── */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin:     0;
    padding:    0;
}

html {
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

body {
    background-color: var(--bg-color);
    color:            var(--text-color);
    font-family:      var(--font-body);
    font-size:        1rem;
    line-height:      1.6;
    min-height:       100vh;
    overflow-x:       hidden;
}

a {
    color:           inherit;
    text-decoration: none;
    transition:      var(--transition);
}

img {
    display:   block;
    max-width: 100%;
}

ul, ol {
    list-style: none;
}

/* ── 4. CURSOR GLOW ─────────────────────────────────── */
#cursor-glow {
    position:      fixed;
    width:         400px;
    height:        400px;
    border-radius: 50%;
    background:    radial-gradient(circle, rgba(255, 77, 77, 0.12) 0%, transparent 70%);
    pointer-events: none;
    transform:     translate(-50%, -50%);
    z-index:       0;
    transition:    left 0.08s ease, top 0.08s ease;
    will-change:   left, top;
}

/* ── 5. TİPOGRAFİ ───────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
    font-family:    var(--font-heading);
    letter-spacing: -0.5px;
    line-height:    1.2;
    font-weight:    800;
}

h1 { font-size: clamp(2.2rem, 5vw, 4rem);   letter-spacing: -2px; }
h2 { font-size: clamp(1.6rem, 3vw, 2.5rem); letter-spacing: -1px; }
h3 { font-size: clamp(1.2rem, 2vw, 1.6rem); }
h4 { font-size: 1.1rem; }

.gradient-text {
    background:              var(--gradient);
    -webkit-background-clip: text;
    background-clip:         text;
    -webkit-text-fill-color: transparent;
}

/* ── 6. LAYOUT ──────────────────────────────────────── */
.konteyner {
    width:     100%;
    max-width: 1280px;
    margin:    0 auto;
    padding:   0 24px;
}

.bolum {
    padding: 80px 0;
}

.bolum-baslik {
    text-align:    center;
    margin-bottom: 56px;
}

.bolum-baslik h2 {
    margin-bottom: 12px;
}

.bolum-baslik p {
    color:     var(--text-muted);
    font-size: 1.05rem;
    max-width: 520px;
    margin:    0 auto;
}

/* Grid yardımcıları */
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }

@media (max-width: 1024px) {
    .grid-4 { grid-template-columns: repeat(2, 1fr); }
    .grid-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
    .grid-4,
    .grid-3,
    .grid-2 { grid-template-columns: 1fr; }
    .konteyner { padding: 0 16px; }
    .bolum { padding: 56px 0; }
}

/* ── 7. KARTLAR ─────────────────────────────────────── */
.kart {
    background:    var(--card-bg);
    border:        1px solid var(--card-border);
    border-radius: var(--radius-xl);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    transition:    var(--transition);
    box-shadow:    var(--shadow-card);
}

.kart:hover {
    border-color: rgba(255, 77, 77, 0.25);
    box-shadow:   0 8px 40px rgba(255, 77, 77, 0.12);
    transform:    translateY(-4px);
}

.kart-govde {
    padding: 28px;
}

/* ── 8. BUTONLAR ────────────────────────────────────── */
.btn {
    display:        inline-flex;
    align-items:    center;
    justify-content: center;
    gap:            8px;
    padding:        12px 28px;
    border:         none;
    border-radius:  var(--radius-pill);
    font-family:    var(--font-body);
    font-size:      .95rem;
    font-weight:    600;
    cursor:         pointer;
    transition:     var(--transition);
    text-decoration: none;
    white-space:    nowrap;
}

/* Primary */
.btn-primer {
    background: var(--gradient);
    color:      #000;
}
.btn-primer:hover {
    transform:  translateY(-3px);
    box-shadow: var(--shadow-glow);
}
.btn-primer:active {
    transform: translateY(-1px);
}

/* Secondary / Hollow */
.btn-ikincil {
    background: transparent;
    color:      var(--text-color);
    border:     1px solid rgba(255, 255, 255, 0.12);
}
.btn-ikincil:hover {
    background:   rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.25);
}

/* Küçük buton */
.btn-kucuk {
    padding:   8px 18px;
    font-size: .8rem;
}

/* Tehlike */
.btn-tehlike {
    background: rgba(255, 77, 77, 0.12);
    color:      var(--accent-1);
    border:     1px solid rgba(255, 77, 77, 0.2);
}
.btn-tehlike:hover {
    background: rgba(255, 77, 77, 0.2);
}

/* ── 9. FORM ELEMANLARI ─────────────────────────────── */
.form-grup {
    margin-bottom: 20px;
}

.form-etiket {
    display:       block;
    margin-bottom: 8px;
    font-size:     .875rem;
    font-weight:   600;
    color:         var(--text-muted);
}

.form-alan {
    width:         100%;
    background:    rgba(255, 255, 255, 0.04);
    border:        1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-md);
    padding:       12px 16px;
    color:         var(--text-color);
    font-family:   var(--font-body);
    font-size:     .95rem;
    transition:    var(--transition);
    outline:       none;
}

.form-alan:focus {
    border-color: var(--accent-1);
    background:   rgba(255, 77, 77, 0.04);
    box-shadow:   0 0 0 3px rgba(255, 77, 77, 0.12);
}

.form-alan::placeholder {
    color: rgba(160, 160, 160, 0.5);
}

select.form-alan {
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='%23a0a0a0'%3E%3Cpath d='M12 15l-6-6h12z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    padding-right: 40px;
    background-color: #121214 !important;
    color: #ffffff !important;
}

select.form-alan option, select option {
    background-color: #121214 !important;
    color: #ffffff !important;
}

/* ── 10. FLASH / UYARI MESAJLARI ────────────────────── */
.uyari {
    padding:       14px 20px;
    border-radius: var(--radius-md);
    font-size:     .9rem;
    display:       flex;
    align-items:   center;
    gap:           10px;
    margin-bottom: 20px;
    border:        1px solid transparent;
}

.uyari-basari {
    background:   rgba(40, 167, 69, 0.08);
    border-color: rgba(40, 167, 69, 0.2);
    color:        #4caf72;
}

.uyari-hata {
    background:   rgba(255, 77, 77, 0.08);
    border-color: rgba(255, 77, 77, 0.2);
    color:        var(--accent-1);
}

.uyari-bilgi {
    background:   rgba(249, 203, 40, 0.08);
    border-color: rgba(249, 203, 40, 0.2);
    color:        var(--accent-2);
}

/* ── 11. FADE-IN ANİMASYON ──────────────────────────── */
@keyframes fadeInUp {
    from {
        opacity:   0;
        transform: translateY(30px);
    }
    to {
        opacity:   1;
        transform: translateY(0);
    }
}

.fade-in-up {
    animation: fadeInUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.fade-in-up-1 { animation-delay: 0.1s; }
.fade-in-up-2 { animation-delay: 0.2s; }

/* ── Spinner Animation ──────────────────────────── */
@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
.ph-spinner, .spinner {
    animation: spin 1s linear infinite;
    display: inline-block;
}
.fade-in-up-3 { animation-delay: 0.3s; }
.fade-in-up-4 { animation-delay: 0.4s; }

/* ── 12. AYIRICI ────────────────────────────────────── */
.ayirici {
    border:     none;
    border-top: 1px solid var(--card-border);
    margin:     32px 0;
}

/* ── 13. YARDIMCI SINIFLAR ───────────────────────────── */
.text-muted    { color: var(--text-muted); }
.text-gradient { color: transparent; background: var(--gradient); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.text-kirmizi  { color: var(--accent-1); }
.text-sari     { color: var(--accent-2); }
.text-merkez   { text-align: center; }
.text-sag      { text-align: right; }
.font-kalin    { font-weight: 700; }
.mb-0          { margin-bottom: 0 !important; }
.mb-8          { margin-bottom: 8px; }
.mb-16         { margin-bottom: 16px; }
.mb-24         { margin-bottom: 24px; }
.mb-32         { margin-bottom: 32px; }
.mt-8          { margin-top: 8px; }
.mt-12         { margin-top: 12px; }
.mt-16         { margin-top: 16px; }
.mt-24         { margin-top: 24px; }
.mt-32         { margin-top: 32px; }
.mt-auto       { margin-top: auto; }
.w-full        { width: 100%; }
.flex          { display: flex; }
.flex-center   { display: flex; align-items: center; justify-content: center; }
.flex-between  { display: flex; align-items: center; justify-content: space-between; }
.gap-8         { gap: 8px; }
.gap-12        { gap: 12px; }
.gap-16        { gap: 16px; }

/* ── 14. CUSTOM MODAL & TOAST SYSTEM ────────────────── */
.smm-custom-modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 11000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.smm-custom-modal-card {
    background: rgba(20, 20, 20, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card), 0 0 40px rgba(255, 77, 77, 0.05);
    padding: 32px;
    max-width: 440px;
    width: 100%;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.smm-custom-modal-icon {
    font-size: 3.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.smm-custom-modal-title {
    font-family: var(--font-heading);
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--text-color);
}

.smm-custom-modal-message {
    font-size: 0.95rem;
    color: var(--text-muted);
    line-height: 1.6;
}

.smm-custom-modal-actions {
    display: flex;
    gap: 12px;
    width: 100%;
    margin-top: 8px;
}

.smm-custom-modal-actions .btn {
    flex: 1;
    justify-content: center;
    padding: 12px;
    font-weight: 600;
}

/* Masaüstünde mobil alt menüyü, overlay menüyü ve mobil kapatma butonunu gizle */
.mobil-bottom-nav,
.smm-more-overlay,
.sp-modal-close {
    display: none;
}

/* ── MOBİL ALT MENÜ VE RESPONSİVE TABLOLAR ──────────────── */
@media (max-width: 768px) {
    /* Mobil Alt Menü (Bottom Navigation Bar) */
    .mobil-bottom-nav {
        display: block !important;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        height: 64px;
        background: rgba(15, 15, 15, 0.95);
        backdrop-filter: blur(24px);
        -webkit-backdrop-filter: blur(24px);
        border-top: 1px solid var(--card-border);
        z-index: 10000;
        box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.5);
    }

    .mobil-bottom-nav-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        height: 100%;
        max-width: 600px;
        margin: 0 auto;
    }

    .bottom-nav-btn {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 4px;
        background: none;
        border: none;
        color: var(--text-muted);
        font-family: var(--font-body);
        font-size: 0.72rem;
        font-weight: 600;
        cursor: pointer;
        transition: var(--transition);
        text-decoration: none;
        padding: 4px;
    }

    .bottom-nav-btn i {
        font-size: 1.35rem;
        transition: var(--transition);
        color: var(--text-muted);
    }

    .bottom-nav-btn:hover,
    .bottom-nav-btn.aktif {
        color: var(--accent-1);
    }

    .bottom-nav-btn.aktif i {
        transform: translateY(-2px);
        color: var(--accent-1);
    }

    /* Daha Fazla Overlay Menüsü */
    .smm-more-overlay {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.8);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        z-index: 10001;
        display: flex !important;
        align-items: flex-end;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .smm-more-overlay.acik {
        opacity: 1;
        pointer-events: all;
    }

    .smm-more-menu {
        width: 100%;
        background: rgba(18, 18, 18, 0.98);
        border-top: 1px solid var(--card-border);
        border-radius: var(--radius-xl) var(--radius-xl) 0 0;
        padding: 24px 20px 40px;
        transform: translateY(100%);
        transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
        box-shadow: 0 -15px 40px rgba(255, 77, 77, 0.05);
    }

    .smm-more-overlay.acik .smm-more-menu {
        transform: translateY(0);
    }

    .smm-more-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
        padding-bottom: 12px;
    }

    .smm-more-header h3 {
        font-size: 1.15rem;
        font-weight: 800;
        font-family: var(--font-heading);
    }

    .smm-more-close {
        background: rgba(255, 255, 255, 0.03);
        border: 1px solid var(--card-border);
        width: 32px;
        height: 32px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        color: var(--text-color);
        transition: var(--transition);
    }

    .smm-more-close:hover {
        background: rgba(255, 77, 77, 0.1);
        border-color: rgba(255, 77, 77, 0.2);
        color: var(--accent-1);
    }

    .smm-more-links {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    .smm-more-link {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 12px 16px;
        border-radius: var(--radius-md);
        font-size: 0.95rem;
        font-weight: 500;
        color: var(--text-muted);
        transition: var(--transition);
        border: 1px solid transparent;
        text-decoration: none;
    }

    .smm-more-link i {
        font-size: 1.2rem;
    }

    .smm-more-link:hover,
    .smm-more-link.aktif {
        background: rgba(255, 77, 77, 0.08);
        border-color: rgba(255, 77, 77, 0.15);
        color: var(--accent-1);
        font-weight: 600;
    }

    .smm-more-link.cikis:hover {
        background: rgba(255, 77, 77, 0.12);
        color: var(--accent-1);
    }

    /* Tabloların Mobil Kart Görünümü */
    .tablo-wrap {
        border: none !important;
        background: transparent !important;
    }

    .pano-tablo {
        display: block !important;
        width: 100% !important;
    }

    .pano-tablo thead {
        display: none !important;
    }

    .pano-tablo tbody {
        display: block !important;
        width: 100% !important;
    }

    .pano-tablo tbody tr {
        display: block !important;
        background: var(--card-bg) !important;
        border: 1px solid var(--card-border) !important;
        border-radius: var(--radius-lg) !important;
        padding: 16px !important;
        margin-bottom: 16px !important;
        transition: var(--transition) !important;
        box-shadow: var(--shadow-card) !important;
    }

    .pano-tablo tbody tr:hover {
        border-color: rgba(255, 77, 77, 0.2) !important;
        background: rgba(255, 255, 255, 0.03) !important;
        transform: none !important;
    }

    .pano-tablo tbody tr td {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        text-align: right !important;
        padding: 10px 0 !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
        font-size: 0.88rem !important;
        width: 100% !important;
        white-space: normal !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
    }

    .pano-tablo tbody tr td:last-child {
        border-bottom: none !important;
    }

    .pano-tablo tbody tr td::before {
        content: attr(data-label);
        font-weight: 600 !important;
        color: var(--text-muted) !important;
        text-align: left !important;
        margin-right: 16px !important;
        font-family: var(--font-heading) !important;
        flex-shrink: 0 !important;
    }

    /* Hedef link (siparişlerim) mobilde taşmasın */
    .pano-tablo tbody tr td a[style] {
        max-width: 140px !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    /* Alt Menü Alanı Açılınca Sayfa Paddingleri */
    main#pano,
    main#siparis-olustur,
    main#siparislerim,
    main#bakiye-yukle,
    main#destek,
    main#destek-bilet,
    main#profil,
    main#api {
        padding-bottom: 100px !important;
    }

    /* Yeni Sipariş Ekranı - Mobil Sipariş Detayları Modal Düzeni */
    .sp-form-panel {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        z-index: 10002 !important;
        background: rgba(0, 0, 0, 0.85) !important;
        backdrop-filter: blur(10px) !important;
        -webkit-backdrop-filter: blur(10px) !important;
        display: none !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 16px !important;
        overflow-y: auto !important;
    }
    
    .sp-form-panel.aktif {
        display: flex !important;
    }
    
    .sp-form-panel .sp-form-kart {
        max-width: 480px !important;
        width: 100% !important;
        margin: auto !important;
        position: relative !important;
        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.8) !important;
        background: #0f0f0f !important;
        border: 1px solid var(--card-border) !important;
        border-radius: var(--radius-xl) !important;
        padding: 24px !important;
    }
    
    .sp-form-panel .sp-modal-close {
        display: flex !important;
        position: absolute !important;
        top: 20px !important;
        right: 20px !important;
        background: rgba(255, 255, 255, 0.05) !important;
        border: 1px solid var(--card-border) !important;
        width: 32px !important;
        height: 32px !important;
        border-radius: 50% !important;
        align-items: center !important;
        justify-content: center !important;
        color: var(--text-color) !important;
        cursor: pointer !important;
        transition: var(--transition) !important;
        z-index: 2 !important;
    }
    
    .sp-form-panel .sp-modal-close:hover {
        background: rgba(255, 77, 77, 0.1) !important;
        color: var(--accent-1) !important;
    }
    
    .sp-form-panel #sp-toplam-kart {
        background: none !important;
        border: none !important;
        padding: 0 !important;
        box-shadow: none !important;
        margin-top: 12px !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        max-width: 480px !important;
        width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    /* Miktar kutusu mobilde sığsın */
    .sp-miktar-input {
        padding: 10px 8px !important;
        font-size: 1rem !important;
    }

    /* Mobil Alt Navigasyon Gösterilince Üst Alt Navigasyonu Gizle */
    .member-sub-nav-container {
        display: none !important;
    }

    .konteyner {
        padding: 0 16px !important;
    }

    /* ── MOBİL YATAYSAYFa TAŞMA DÜZELTMESİ (API & Siparişlerim) ─── */

    /* Sayfa genişliğini aşan pano üst alanı */
    .pano-ust {
        flex-direction: column !important;
        align-items: flex-start !important;
    }

    /* Sağ alan (API anahtarı kartı, filtre çubuğu vb.) tam genişlik */
    .pano-ust-sag {
        width: 100% !important;
        max-width: 100% !important;
        overflow: hidden !important;
    }

    /* API anahtarı kartı: yatay flex'i dikey yap, metin kırılsın */
    .pano-ust-sag .kart.flex-center {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 6px !important;
        width: 100% !important;
    }

    .pano-ust-sag .kart.flex-center code {
        word-break: break-all !important;
        white-space: normal !important;
        display: block !important;
        max-width: 100% !important;
        font-size: 0.78rem !important;
    }

    /* Kart içi padding'i inline override yerine mobil değere çek */
    .kart[style] {
        padding: 16px !important;
    }

    /* API metot başlığı: uzun URL sarılsın */
    .metot-baslik {
        flex-wrap: wrap !important;
        gap: 8px !important;
    }

    .metot-url {
        word-break: break-all !important;
        font-size: 0.82rem !important;
        max-width: 100% !important;
    }

    /* Monospace kod blokları mobilde sarmalsın */
    .kod-blok {
        white-space: pre-wrap !important;
        word-break: break-all !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
        font-size: 0.78rem !important;
    }

    /* Siparişlerim filtre çubuğu içsel scroll — sayfa taşmasın */
    .pano-ust-sag .flex.gap-8 {
        overflow-x: auto !important;
        max-width: 100% !important;
        -webkit-overflow-scrolling: touch !important;
    }
}

/* Tablet ve Mobil Izgara (Grid) Ezme Kuralları */
@media (max-width: 1024px) {
    .grid-2[style],
    .grid-3[style],
    .grid-4[style] {
        grid-template-columns: 1fr !important;
    }
}