/* ============================================================
 * MOBILE OVERRIDES — meslekAI
 * Tüm sayfalardaki inline CSS'leri mobilde düzeltir.
 * public_header.php'de import edilir, tüm sitede aktif.
 * ============================================================ */

/* TABLET ve altı (≤960px) */
@media (max-width: 960px) {

    /* İki kolon sidebar layoutları → tek kolon */
    div[style*="grid-template-columns:260px 1fr"],
    div[style*="grid-template-columns: 260px 1fr"],
    div[style*="grid-template-columns:300px 1fr"],
    div[style*="grid-template-columns: 300px 1fr"],
    div[style*="grid-template-columns:1fr 300px"],
    div[style*="grid-template-columns: 1fr 300px"],
    div[style*="grid-template-columns:1fr 320px"],
    div[style*="grid-template-columns: 1fr 320px"] {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }

    /* promptlar.php — sol sidebar mobilde üstten, sticky kaldır */
    aside {
        position: static !important;
    }
    aside > div {
        position: static !important;
    }

    /* Ana container'larda yan padding azalt */
    section[style*="padding:60px 20px"],
    section[style*="padding:70px 20px"],
    section[style*="padding: 60px 20px"],
    section[style*="padding: 70px 20px"] {
        padding: 40px 16px !important;
    }
    section[style*="padding:50px 20px"],
    section[style*="padding: 50px 20px"] {
        padding: 30px 16px !important;
    }
}

/* MOBİL (≤640px) */
@media (max-width: 640px) {

    /* === Büyük başlıkları küçült === */
    h1[style*="font-size:48px"],
    h1[style*="font-size: 48px"] {
        font-size: 32px !important;
        line-height: 1.15 !important;
    }
    h1[style*="font-size:42px"],
    h1[style*="font-size: 42px"],
    h1[style*="font-size:40px"],
    h1[style*="font-size: 40px"] {
        font-size: 28px !important;
        line-height: 1.2 !important;
    }
    h1[style*="font-size:38px"],
    h1[style*="font-size: 38px"],
    h1[style*="font-size:34px"],
    h1[style*="font-size: 34px"] {
        font-size: 26px !important;
        line-height: 1.2 !important;
    }
    h2[style*="font-size:28px"],
    h2[style*="font-size: 28px"] {
        font-size: 22px !important;
    }
    h2[style*="font-size:22px"],
    h2[style*="font-size: 22px"] {
        font-size: 18px !important;
    }

    /* Hero paragrafları */
    p[style*="font-size:19px"],
    p[style*="font-size: 19px"],
    p[style*="font-size:18px"],
    p[style*="font-size: 18px"],
    p[style*="font-size:17px"],
    p[style*="font-size: 17px"] {
        font-size: 15px !important;
        line-height: 1.5 !important;
    }

    /* Dayanıklılık skor kartı tek kolon */
    section div[style*="padding:40px"] {
        padding: 24px 20px !important;
    }

    /* Dayanıklılık skoru başlığı 96px çok büyük mobilde */
    div[style*="font-size:96px"] {
        font-size: 64px !important;
    }

    /* 3-kolon auto-fit grid'ler: mobilde tek kolona */
    div[style*="grid-template-columns:repeat(auto-fit,minmax(280px"],
    div[style*="grid-template-columns: repeat(auto-fit, minmax(280px"],
    div[style*="grid-template-columns:repeat(auto-fit,minmax(300px"],
    div[style*="grid-template-columns: repeat(auto-fit, minmax(300px"],
    div[style*="grid-template-columns:repeat(auto-fit,minmax(320px"],
    div[style*="grid-template-columns: repeat(auto-fit, minmax(320px"] {
        grid-template-columns: 1fr !important;
    }

    /* paket-detay özellikler 2 kolon → 1 kolon */
    ul[style*="grid-template-columns:1fr 1fr"],
    ul[style*="grid-template-columns: 1fr 1fr"] {
        grid-template-columns: 1fr !important;
    }

    /* Section padding azalt */
    section[style*="padding:60px 20px"],
    section[style*="padding: 60px 20px"],
    section[style*="padding:70px 20px"],
    section[style*="padding: 70px 20px"] {
        padding: 32px 14px !important;
    }
    section[style*="padding:50px 20px"],
    section[style*="padding: 50px 20px"],
    section[style*="padding:40px 20px"],
    section[style*="padding: 40px 20px"] {
        padding: 24px 14px !important;
    }

    /* Container yan padding */
    div[style*="padding:0 20px"][style*="max-width:1200px"],
    div[style*="padding: 0 20px"][style*="max-width: 1200px"],
    div[style*="padding:0 20px"][style*="max-width:1100px"],
    div[style*="padding:0 20px"][style*="max-width:1000px"],
    div[style*="padding:0 20px"][style*="max-width:900px"] {
        padding: 0 14px !important;
    }

    /* Prompt kartları üstten boşluk */
    article[style*="padding:18px"],
    article[style*="padding: 18px"] {
        padding: 16px !important;
    }

    /* Hero buton/form grupları dikey yerleştir */
    form[style*="display:flex"][style*="max-width:620px"] {
        flex-direction: column !important;
    }

    /* Paket kartı hero'da grid'leri dikey */
    section div[style*="grid-template-columns:1fr 320px"] {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }

    /* Paylaş butonları tek satırda kalsın, küçük kalmasın */
    a[style*="padding:10px 18px"] {
        padding: 8px 14px !important;
        font-size: 12px !important;
    }

    /* Anket secenek label'ları padding */
    label[style*="padding:10px 14px"] {
        padding: 12px !important;
    }

    /* Tehdit görevleri 3 kolon → stacked */
    div[style*="grid-template-columns:auto 1fr auto"] {
        grid-template-columns: auto 1fr !important;
    }
    div[style*="grid-template-columns:auto 1fr auto"] > div:last-child {
        grid-column: 1 / -1 !important;
        margin-top: 8px;
    }

    /* İstatistik kartları 5-6 kolonluk compact grid'ler */
    div[style*="repeat(auto-fit,minmax(120px"],
    div[style*="repeat(auto-fit, minmax(120px"] {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    div[style*="repeat(auto-fit,minmax(180px"],
    div[style*="repeat(auto-fit, minmax(180px"] {
        grid-template-columns: 1fr !important;
    }

    /* Breadcrumb küçült */
    nav[style*="font-size:13px"] {
        font-size: 11px !important;
    }

    /* Paket detay hero */
    section[style*="padding:60px 20px 50px"] {
        padding: 30px 16px !important;
    }

    /* Tek satır selectbox'ların width */
    select[style*="padding:14px"],
    select[style*="padding: 14px"] {
        padding: 12px 14px !important;
        font-size: 14px !important;
    }

    /* Btn büyüklüğü */
    button[style*="padding:14px 40px"],
    a.btn[style*="padding:14px 28px"] {
        padding: 12px 24px !important;
        font-size: 14px !important;
    }

    /* Dropdown menu mobilde zaten gizleniyor ve mobil menü açılıyor (public.css 960px) */
}

/* ÇOK KÜÇÜK EKRAN (≤400px) */
@media (max-width: 400px) {
    h1[style*="font-size:48px"],
    h1[style*="font-size: 48px"],
    h1[style*="font-size:42px"] {
        font-size: 26px !important;
    }

    /* Emoji meta etiketleri wrap */
    span[style*="border-radius:14px"],
    span[style*="border-radius:20px"] {
        font-size: 11px !important;
        padding: 3px 8px !important;
    }
}

/* TOUCH opt — minimum tıklanabilir alan 44x44 (WCAG) */
@media (hover: none) and (pointer: coarse) {
    a.btn, button.btn, a[class*="btn"] {
        min-height: 44px;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
    }
    /* Küçük icon butonları hariç */
    .btn-sm, button.btn-sm, a.btn-sm {
        min-height: 36px;
    }
}

/* Skrollu table wrapper - mobilde yatay scroll */
@media (max-width: 640px) {
    .tablo-cerceve {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    table.tablo {
        min-width: 600px;
    }
}

/* Image/iframe mobile safety */
img, iframe, video {
    max-width: 100%;
    height: auto;
}

/* ============================================================
 * MODERN SELECT STYLING — tüm public sayfalarda
 * Browser native arrow'u kaldırır, custom SVG arrow ekler.
 * Admin sayfaları bu CSS'i yüklemiyor (ayrı stil).
 * ============================================================ */
section select,
.container select,
form select,
main select {
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>") !important;
    background-repeat: no-repeat !important;
    background-position: right 14px center !important;
    padding-right: 42px !important;
    cursor: pointer;
    transition: border-color 0.2s, box-shadow 0.2s;
}

/* Select hover & focus */
section select:hover,
.container select:hover,
form select:hover,
main select:hover {
    border-color: #4c1d95;
}
section select:focus,
.container select:focus,
form select:focus,
main select:focus {
    outline: none;
    border-color: #4c1d95;
    box-shadow: 0 0 0 3px rgba(76, 29, 149, 0.15);
}

/* Hero select'leri (büyük, beyaz arka planlı) için özel arrow */
section select[style*="font-size:16px"],
section select[style*="font-size: 16px"] {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%234c1d95' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>") !important;
    background-position: right 18px center !important;
    padding-right: 48px !important;
}

/* Kod blokları mobilde wrap */
@media (max-width: 640px) {
    pre, code {
        word-break: break-word;
        white-space: pre-wrap !important;
    }
}