/* ============================
   TABLET (768px ve altı)
   ============================ */
@media (max-width: 768px) {
    .landing-features {
        grid-template-columns: repeat(2, 1fr);
    }

    .landing-sinavlar {
        grid-template-columns: repeat(2, 1fr);
    }

    .landing-title {
        font-size: 32px;
    }

    .landing-subtitle {
        font-size: 16px;
    }

    .landing-hero {
        padding: 48px 16px 40px;
    }

    .anasayfa-grid {
        grid-template-columns: 1fr;
    }

    .ozet-kartlar {
        grid-template-columns: repeat(2, 1fr);
    }

    .bugun-ozet {
        flex-wrap: wrap;
        gap: 8px;
    }

    .gerisayim-kutular {
        gap: 8px;
    }

    .gerisayim-kutu {
        padding: 8px 12px;
        min-width: 60px;
    }

    .gerisayim-sayi {
        font-size: 28px;
    }

    .rozetler-liste {
        grid-template-columns: 1fr;
    }

    .rapor-ozet {
        grid-template-columns: repeat(2, 1fr);
    }

    .pomodoro-istatistik-ozet {
        flex-wrap: wrap;
    }

    .header-top {
        padding: 8px 12px;
    }

    .logo {
        font-size: 36px;
    }

    .logo-img {
        width: 80px;
        height: 80px;
    }

    .user-email {
        display: none;
    }

    .nav-btn {
        padding: 10px 12px;
        font-size: 13px;
    }

    .main {
        padding: 12px;
    }

    .modal-content {
        padding: 16px;
        margin: 8px;
        max-height: 90vh;
    }

    .modal-large {
        max-width: 100%;
    }

    .soru-log-form {
        flex-direction: column;
    }

    .soru-log-form .input-small {
        width: 100%;
    }

    .pomodoro-ayarlar {
        flex-direction: column;
        align-items: center;
    }

    /* Test sonuçları net input */
    .net-input {
        flex-wrap: wrap;
    }

    .net-input label {
        min-width: 80px;
    }

    /* Plan tablosu */
    .plan-item {
        flex-wrap: wrap;
        gap: 4px;
    }

    .plan-item .plan-saat {
        min-width: auto;
    }

    /* Hatali sorular */
    .hatali-actions {
        flex-wrap: wrap;
    }

    /* Rapor günlük */
    .rapor-gun-item {
        flex-wrap: wrap;
        gap: 4px;
    }

    .rapor-gun-ad {
        min-width: 100%;
        font-weight: 600;
    }

    /* Ders ekle row */
    .ders-ekle-row {
        flex-direction: column;
    }

    /* Konu ekle row */
    .konu-ekle-row {
        flex-direction: column;
    }

    /* Card header */
    .card-header {
        flex-wrap: wrap;
        gap: 8px;
    }

    /* Ayarlar */
    .ayarlar-actions {
        flex-direction: column;
    }

    .ayarlar-actions .btn {
        width: 100%;
    }

    /* Forum meta */
    .konu-meta {
        flex-wrap: wrap;
    }
}

/* ============================
   TELEFON (480px ve alti)
   ============================ */
@media (max-width: 480px) {
    .landing-features {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    .landing-feature-card {
        padding: 16px 12px;
    }

    .landing-feature-icon {
        font-size: 28px;
    }

    .landing-feature-card h3 {
        font-size: 13px;
    }

    .landing-feature-card p {
        font-size: 12px;
    }

    .landing-sinavlar {
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }

    .landing-title {
        font-size: 26px;
    }

    .landing-hero {
        padding: 36px 12px 32px;
    }

    .landing-section {
        padding: 32px 12px;
    }

    .landing-section-title {
        font-size: 22px;
        margin-bottom: 20px;
    }

    .btn-lg {
        padding: 12px 24px;
        font-size: 14px;
    }

    .landing-hero-btns {
        flex-direction: column;
        align-items: center;
    }

    .landing-hero-btns .btn {
        width: 100%;
        max-width: 280px;
    }

    body {
        font-size: 14px;
    }

    .auth-container {
        padding: 24px 16px;
        margin: 12px;
    }

    .auth-logo {
        width: 120px;
        height: 120px;
    }

    .auth-container h1 {
        font-size: 20px;
    }

    .pomodoro-timer {
        width: 180px;
        height: 180px;
    }

    .pomodoro-zaman {
        font-size: 36px;
    }

    .pomodoro-controls {
        flex-wrap: wrap;
        justify-content: center;
    }

    .pomodoro-ders-sec {
        flex-direction: column;
        gap: 6px;
    }

    .ozet-kartlar {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    .ozet-kart {
        padding: 12px 8px;
    }

    .ozet-kart-icon {
        font-size: 22px;
    }

    .ozet-kart-value {
        font-size: 18px;
    }

    .ozet-kart-label {
        font-size: 11px;
    }

    .gun-secici {
        gap: 2px;
    }

    .gun-btn {
        padding: 6px 4px;
        font-size: 12px;
        min-width: 38px;
    }

    .forum-kategoriler {
        gap: 2px;
    }

    .filtre-btn {
        padding: 4px 10px;
        font-size: 12px;
    }

    /* Nav scroll iyileştirme */
    .nav {
        padding: 0 8px;
        gap: 2px;
    }

    .nav-btn {
        padding: 8px 10px;
        font-size: 12px;
    }

    /* Card padding küçült */
    .card {
        padding: 14px;
        margin-bottom: 12px;
        border-radius: 12px;
    }

    .main {
        padding: 8px;
    }

    /* Header compact */
    .header-top {
        padding: 6px 10px;
    }

    .header-actions {
        gap: 6px;
    }

    .btn-icon {
        padding: 4px 8px;
        font-size: 14px;
    }

    /* Gerisayim kompakt */
    .gerisayim-kutular {
        gap: 6px;
    }

    .gerisayim-kutu {
        padding: 6px 8px;
        min-width: 50px;
    }

    .gerisayim-sayi {
        font-size: 22px;
    }

    .gerisayim-birim {
        font-size: 10px;
    }

    /* Motivasyon */
    .motivasyon-soz {
        font-size: 15px;
    }

    /* Buton küçült */
    .btn {
        padding: 8px 14px;
        font-size: 13px;
    }

    .btn-small {
        padding: 5px 10px;
        font-size: 12px;
    }

    /* Özet items */
    .bugun-ozet {
        gap: 6px;
    }

    .ozet-item {
        padding: 8px;
    }

    .ozet-label {
        font-size: 11px;
    }

    .ozet-value {
        font-size: 16px;
    }

    /* Modal tam ekran */
    .modal {
        padding: 8px;
        align-items: flex-end;
    }

    .modal-content {
        padding: 16px;
        border-radius: 16px 16px 8px 8px;
        max-height: 92vh;
        margin: 0;
    }

    /* Test sonuçları */
    .test-item .test-baslik {
        flex-direction: column;
        gap: 2px;
    }

    .test-item .netleri {
        gap: 4px;
    }

    .net-badge {
        font-size: 12px;
        padding: 2px 6px;
    }

    /* Toast */
    .toast {
        top: 10px;
        right: 10px;
        left: 10px;
        max-width: none;
        text-align: center;
        font-size: 13px;
        padding: 10px 14px;
    }

    /* Hatırlatma */
    .hatirlatma {
        top: 60px;
        right: 8px;
        left: 8px;
    }

    .hatirlatma-icerik {
        font-size: 13px;
        padding: 10px 12px;
    }

    /* Sinav secim */
    .sinav-sec-btn {
        padding: 10px 12px;
        font-size: 14px;
    }

    /* Form row */
    .form-row {
        flex-direction: column;
        align-items: stretch;
        gap: 4px;
    }

    .form-row label {
        min-width: auto;
    }

    /* Su takip */
    .su-takip {
        flex-direction: column;
        text-align: center;
    }

    /* Input */
    .input {
        padding: 8px 12px;
        font-size: 14px;
    }

    /* Rozet */
    .rozet-item {
        padding: 10px;
        gap: 8px;
    }

    .rozet-icon {
        font-size: 24px;
        min-width: 30px;
    }

    .rozet-ad {
        font-size: 13px;
    }

    .rozet-aciklama {
        font-size: 11px;
    }

    /* Rapor özet mobil */
    .rapor-ozet {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }

    .rapor-ozet-value {
        font-size: 16px;
    }

    .rapor-ozet-icon {
        font-size: 20px;
    }

    /* Forum */
    .forum-konu-item {
        padding: 10px;
    }

    .konu-baslik {
        font-size: 14px;
    }

    /* Hatali sorular kompakt */
    .hatali-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .hatali-soru-text {
        font-size: 13px;
    }

    .hatali-cozum-text {
        font-size: 12px;
    }

    .hatali-actions {
        width: 100%;
    }

    .hatali-actions .btn {
        flex: 1;
        text-align: center;
    }
}

/* ============================
   ÇOK KÜÇÜK EKRAN (360px ve altı)
   ============================ */
@media (max-width: 360px) {
    .ozet-kartlar {
        grid-template-columns: 1fr;
    }

    .gerisayim-kutular {
        flex-wrap: wrap;
    }

    .gerisayim-kutu {
        flex: 1;
        min-width: 40%;
    }

    .pomodoro-timer {
        width: 160px;
        height: 160px;
    }

    .pomodoro-zaman {
        font-size: 32px;
    }

    .rapor-ozet {
        grid-template-columns: 1fr;
    }

    .nav-btn {
        padding: 8px 8px;
        font-size: 11px;
    }

    .auth-container {
        padding: 20px 12px;
    }

    .auth-logo {
        width: 100px;
        height: 100px;
    }
}

/* ============================
   MASAÜSTÜ (769px ve üstü)
   ============================ */
@media (min-width: 769px) {
    .yasam-container {
        grid-template-columns: 1fr 1fr;
    }

    .yasam-container > .card:first-child {
        grid-column: 1 / -1;
    }
}

/* ============================
   YATAY TELEFON (landscape)
   ============================ */
@media (max-height: 500px) and (orientation: landscape) {
    .header {
        position: relative;
    }

    .auth-screen {
        min-height: auto;
        padding: 20px;
    }

    .auth-logo {
        width: 80px;
        height: 80px;
    }

    .modal-content {
        max-height: 95vh;
    }

    .pomodoro-timer {
        width: 150px;
        height: 150px;
    }
}

/* ============================
   DOKUNMA OPTİMİZASYONU
   ============================ */
@media (hover: none) and (pointer: coarse) {
    /* Dokunmatik cihazlarda daha büyük tıklama alanları */
    .btn {
        min-height: 44px;
    }

    .btn-small {
        min-height: 36px;
    }

    .nav-btn {
        min-height: 44px;
    }

    .gun-btn {
        min-height: 40px;
    }

    .filtre-btn {
        min-height: 36px;
    }

    .konu-item {
        padding: 10px 0;
    }

    .konu-item input[type="checkbox"] {
        width: 22px;
        height: 22px;
    }

    .sinav-sec-btn {
        min-height: 48px;
    }

    .forum-konu-item {
        padding: 14px;
    }

    .rozet-item {
        padding: 14px;
    }

    .plan-item {
        padding: 12px;
    }

    /* Hover efektlerini kaldır (dokunmatik cihazlarda yapışıyor) */
    .btn:hover,
    .nav-btn:hover,
    .filtre-btn:hover,
    .gun-btn:hover,
    .sinav-sec-btn:hover,
    .forum-konu-item:hover,
    .ders-baslik:hover {
        transform: none;
    }
}

/* ============================
   GÜVENLİ ALAN (notch/island)
   ============================ */
@supports (padding: env(safe-area-inset-bottom)) {
    .header {
        padding-top: env(safe-area-inset-top);
    }

    .main {
        padding-left: max(12px, env(safe-area-inset-left));
        padding-right: max(12px, env(safe-area-inset-right));
        padding-bottom: env(safe-area-inset-bottom);
    }

    .modal {
        padding-bottom: env(safe-area-inset-bottom);
    }

    .toast {
        top: max(10px, env(safe-area-inset-top));
    }
}