/* =====================================================
   mobile.css — Mobil Arayüz Düzeltmeleri
   Hedef: touch cihazlar ve küçük ekranlar
   ===================================================== */

/* ── 1. CUSTOM CURSOR — mobilde kapat ──────────────── */
@media (hover: none),
(pointer: coarse) {

    /* Dokunmatik ekranda cursor elementlerini gizle */
    .custom-cursor-dot {
        display: none !important;
    }

    /* Varsayılan cursor'ı geri getir */
    body,
    a,
    button,
    input[type="submit"],
    input[type="button"],
    .copy-uid,
    .pill-nav-item,
    [style*="cursor: none"],
    * {
        cursor: auto !important;
    }

    a,
    button,
    .pill-nav-item {
        cursor: pointer !important;
    }
}

/* ── 2. SCROLLBAR — tüm site gizle (mobil) ─────────── */
@media (max-width: 768px) {
    * {
        scrollbar-width: none !important;
        -ms-overflow-style: none !important;
    }

    *::-webkit-scrollbar {
        display: none !important;
        width: 0 !important;
    }

    /* ── 3. ARTICLE — makale iç padding ─────────────── */
    #main>.inner>article,
    #main article {
        padding: 3rem 1.5rem 2rem !important;
    }

    /* X (close) butonu — daha büyük dokunma alanı */
    #main>.inner>.close,
    .close {
        top: 0.8rem !important;
        right: 0.8rem !important;
        width: 44px !important;
        height: 44px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 1.2rem !important;
    }

    /* ── 4. NAV BUTONLARI — köşe butonları safe area ── */
    /* Sol üst (sidebar toggle — logo btn) */
    #pill-nav-root .pill-logo-btn,
    .logo-btn {
        top: max(12px, env(safe-area-inset-top, 12px)) !important;
        left: max(12px, env(safe-area-inset-left, 12px)) !important;
    }

    /* Sağ üst (müzik butonu) */
    .music-player-toggle,
    #music-toggle-btn {
        top: max(12px, env(safe-area-inset-top, 12px)) !important;
        right: max(12px, env(safe-area-inset-right, 12px)) !important;
    }

    /* ── 5. PİLL NAV — horizontal pill bar mobil ─────── */
    #pill-nav-root .pill-nav {
        padding: 0 0.5rem !important;
        gap: 0.3rem !important;
    }

    #pill-nav-root .pill-nav-item {
        padding: 0.4rem 0.75rem !important;
        font-size: 0.65rem !important;
        letter-spacing: 1px !important;
    }

    /* ── 6. BAŞLIK TYPOGRAPHY ───────────────────────── */
    #main h2.major {
        font-size: 1.5rem !important;
        letter-spacing: 4px !important;
    }

    /* ── 7. IMAGE — makale içi görseller ────────────── */
    #main .image.main img {
        border-radius: 8px !important;
    }

    /* ── 8. SIDEBAR MENU — mobilde daha iyi ─────────── */
    #pill-nav-root .sidebar-menu {
        width: 85vw !important;
        max-width: 320px !important;
    }
}

/* Çok küçük ekranlar (≤ 380px) */
@media (max-width: 380px) {
    #main h2.major {
        font-size: 1.2rem !important;
        letter-spacing: 3px !important;
    }

    #main>.inner>article,
    #main article {
        padding: 2.5rem 1rem 1.5rem !important;
    }
}