/* ═══════════════════════════════════════════════════════════════════════
   mackazan — MOBİL UYUM KATMANI  [2026-10-26]
   Tüm herkese açık sayfalarda, sayfanın kendi <style> bloğundan SONRA yüklenir.
     1) Yana kayma kalkanı (taşan ışık/süs efektleri sayfayı yana kaydırmasın)
     2) Menüsü olmayan sayfalara eklenen ortak ☰ menü (mk-mm-*)  — Sıralama, Valorant, Profil
     3) Tüm mobil menülerde parmak dostu dokunma alanları (en az 44px)
     4) Sayfa sayfa mobil düzeltmeleri (her blok sayfanın gövde sınıfıyla kapsanır)
   Renkler sitenin paletinden sabit yazıldı (sayfalar farklı değişken adları kullanıyor).
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 1) Yana kayma kalkanı ─────────────────────────────────────────────── */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html, body { max-width: 100%; }
@supports (overflow: clip) { html, body { overflow-x: clip; } }          /* clip: sticky/fixed bozulmaz */
@supports not (overflow: clip) { body { overflow-x: hidden; } }
img, video, iframe, canvas { max-width: 100%; }

/* ── 2) Ortak ☰ menü (mk-mm-*) ─────────────────────────────────────────── */
.mk-mm-btn {
    display: none; flex-direction: column; justify-content: center; align-items: center; gap: 5px;
    width: 44px; height: 44px; margin: 0 -8px 0 0; padding: 0; flex-shrink: 0;
    background: transparent; border: 0; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.mk-mm-btn span { display: block; width: 22px; height: 2px; border-radius: 2px; background: #ff4655; transition: transform .2s ease, opacity .2s ease; }
.mk-mm-btn.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.mk-mm-btn.open span:nth-child(2) { opacity: 0; }
.mk-mm-btn.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.mk-mm-panel {
    position: relative; z-index: 60; background: #0f141e;
    border-bottom: 0.5px solid rgba(255,255,255,0.10); padding: 4px 16px 16px;
    box-shadow: 0 18px 40px -18px rgba(0,0,0,0.8);
}
.mk-mm-panel.hidden { display: none !important; }
.mk-mm-panel > a {
    display: flex; align-items: center; min-height: 46px; padding: 0 4px;
    color: #97a1b3; text-decoration: none; font-size: 15px; font-weight: 500;
    border-bottom: 0.5px solid rgba(255,255,255,0.06);
}
.mk-mm-panel > a:active { color: #f5f6f9; }
.mk-mm-panel > a.active { color: #f5f6f9; font-weight: 700; box-shadow: inset 3px 0 0 #ff4655; padding-left: 12px; }
.mk-mm-guest, .mk-mm-user { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }
.mk-mm-cta {
    display: flex; align-items: center; justify-content: center; min-height: 46px; padding: 0 12px;
    border-radius: 10px; border: 0.5px solid rgba(255,255,255,0.18); background: transparent;
    color: #f5f6f9; font: 700 14.5px/1 inherit; font-family: inherit; text-decoration: none; cursor: pointer;
}
.mk-mm-cta.mk-mm-primary { background: #ff4655; border-color: #ff4655; color: #2b0508; }
@media (max-width: 900px) {
    .mk-mm-btn { display: flex; }
    /* menülü sayfalarda masaüstü giriş/çıkış alanı mobilde gizlenir — aynı düğmeler ☰ menünün içinde */
    .mk-nav.mk-has-mm .mk-auth,
    .mk-nav.mk-has-mm .mk-user-area { display: none !important; }
    .mk-nav.mk-has-mm { flex-wrap: nowrap; }
}

/* ── 2a) Üst çubuk telefonda TEK SATIR: logo solda, ☰ sağda. Giriş/Kayıt/Profil/Çıkış düğmeleri her sayfada
         ☰ menünün içinde de var; bazı sayfalarda (Hakkımızda, SSS...) bunlar ikinci satıra kayıp ekranın üstünü
         kaplıyordu. Anasayfadaki davranışla aynı. ── */
@media (max-width: 900px) {
    .mk-nav .mk-auth,
    .mk-nav > #guestButtons,
    .mk-nav > #userButtons,
    .mk-nav .mk-user-area { display: none !important; }
    .mk-nav { flex-wrap: nowrap; }
}

/* ── 2b) Çift yan boşluk: telefonda bölüm (20px) + iç kap (32px) = 52px → metin ~270px'e sıkışıyordu.
         Yalnız 20px veren sarmalayıcıların İÇİNDEKİ kapların yan boşluğu kaldırılır (ölçüldü: Hakkımızda,
         SSS, Valorant, Valorant Rank, Oyunlar — hepsinde kap bu sarmalayıcılardan birinin içinde). ── */
@media (max-width: 900px) {
    :is(.mk-section, .mk-rail-section, .mk-briefing, .mk-footer, .mk-hero-hud, .mk-main, .mk-section-wrap) .mk-container {
        padding-left: 0; padding-right: 0;
    }
}

/* ── 2c) Yukarı çık düğmesi (script.js): telefonda küçük, köşeye yakın; içeriği daha az örtsün ── */
@media (max-width: 640px) {
    .back-to-top {
        width: 42px !important; height: 42px !important; font-size: 19px !important;
        right: 14px !important; bottom: calc(14px + env(safe-area-inset-bottom, 0px)) !important; opacity: 0.88;
    }
}

/* ── 2d) Alt bilgi (footer): telefonda marka bloğu tam satır, bağlantı sütunları ikişerli.
         Valorant / Valorant Rank'ta 4 sütun kalıyor, "İletişim" sütunu ekran dışına taşıyordu. ── */
@media (max-width: 640px) {
    .mk-footer-grid { grid-template-columns: 1fr 1fr !important; gap: 24px 16px !important; }
    .mk-footer-grid > :first-child { grid-column: 1 / -1; }
    .mk-footer-bottom { flex-direction: column; align-items: flex-start; gap: 10px; }
    .mk-footer { padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)) !important; } /* en alttaki bağlantıları "yukarı çık" düğmesi örtmesin */
}

/* ── 2e) Formlar: küçük dokunma hedefleri (Şifremi unuttum ~20px, onay kutusu 16px) ── */
@media (max-width: 640px) {
    a[href*="sifremi-unuttum"] { display: inline-block; padding: 10px 0; }
    input[type="checkbox"], input[type="radio"] { min-width: 20px; min-height: 20px; }
    input, select, textarea { font-size: max(16px, 1em); }   /* iOS: 16px altı alana dokununca sayfa yakınlaşıyordu */
}

/* ── 3) Tüm mobil menülerde dokunma alanı ──────────────────────────────── */
@media (max-width: 1023px) {
    #mobile-menu-btn { min-width: 44px; min-height: 44px; -webkit-tap-highlight-color: transparent; }
    #mobile-menu > a:not(.mk-btn):not(.mk-mm-cta) { min-height: 44px; display: flex; align-items: center; }
}