/* ══════════════════════════════════════════════════════════════════════════ AYAYDIN VERİ — ORTAK MOBİL UYUM KATMANI 26.07.2026 Her panel 'ine tek satırla bağlanır: (mutlak URL: Blogger'a gömülü siz parçalar da aynı dosyayı çeker) AMAÇ: dar ekranda SAYFA yatay kaymasın. Geniş içerik (tablo/grafik) sayfayı değil KENDİ kutusunu kaydırsın; araç çubukları alt satıra sarsın. Kural: masaüstünü (>900px) hiç değiştirmez — hepsi medya sorgusu içinde. ══════════════════════════════════════════════════════════════════════════ */ @media (max-width: 900px) { /* ── 1. Geniş medya kutuyu aşmasın ─────────────────────────────────────── */ img, svg, video, iframe, canvas { max-width: 100%; } /* ── 2. Uzun kelime / adres / kod satır kırsın ─────────────────────────── */ body { overflow-wrap: break-word; } pre, code, kbd, samp { white-space: pre-wrap; overflow-wrap: anywhere; max-width: 100%; } /* tek parça uzun jeton (hash, url, sembol dizisi) */ td, th, li, p, .not, .aciklama { overflow-wrap: break-word; } /* ── 3. Tablo sayfayı değil KENDİNİ kaydırsın ──────────────────────────── */ table { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } /* kaydırma olduğu belli olsun (ince, temaya karışmaz) */ table::-webkit-scrollbar { height: 6px; } table::-webkit-scrollbar-thumb { background: rgba(128,128,128,.45); border-radius: 6px; } /* ── 4. Yatay araç çubukları alt satıra sarsın ─────────────────────────── */ .bar, .bar2, .bars, .toolbar, .araclar, .arac, .kontrol, .kontroller, .chips, .chip-row, .filtre, .filtreler, .secim, .secimler, .tabs, .sekme, .sekmeler, .btns, .butonlar, .legend, .leg, .stats, .ust, .head-row, .satir, .row, .flexrow, .sync, .side-by-side { flex-wrap: wrap; min-width: 0; } /* ── 5. Form/kaydırıcı öğeleri ekranı aşmasın ──────────────────────────── */ input, select, textarea, button { max-width: 100%; } input[type=range] { min-width: 0; width: min(220px, 62vw); } /* ── 6. Esnek kutuların içi sıkışabilsin (TAŞMANIN ASIL SEBEBİ) ────────── */ /* flex/grid çocuğunun varsayılan min-width:auto değeri, içerik ne kadar genişse kutuyu o kadar şişirir → sayfa yatay kayar. :where() ÖZGÜLLÜĞÜ SIFIR olduğu için panelin kendi "min-width:280px" gibi kuralları ezilmez; yalnızca "otomatik" değer 0'a çekilir. */ :where(div, section, article, main, aside, header, footer, nav, li, form, details, summary, table, figure) { min-width: 0; } .wrap, .kutu, .kart, .card, .panel, .box, .grid, .cols, .col, .side, .sol, .sag, .icerik, .content, .main, .body { min-width: 0; } /* ── 7. AYXH üst barı dar ekranda derli toplu ──────────────────────────── */ #ayxh-bar { gap: 8px; padding: 0 10px; } #ayxh-bar > * { flex-shrink: 1; min-width: 0; } #ayxh-home b { font-size: 13px; } #ayxh-help { right: 8px; left: 8px; max-width: none; width: auto; } /* ── 8. Sabit üst bar varken içerik altına girmesin (yaygın desen) ─────── */ /* (panellerin kendi padding-top'u korunur; sadece taşan yatay eksen) */ } /* ── 9. Dikey yığılan kabuk: çocuk kabuğun genişliğini alsın ───────────── */ /* Panel şablonlarında .shell masaüstünde "align-items:flex-start" (sol sekme sütunu boyu kadar dursun diye). Dar ekranda flex-direction:column'a dönünce AYNI kural çapraz eksende "içerik kadar genişle" anlamına gelir → içerik ne kadar genişse kabuk o kadar taşar. Yığılma kırılımında stretch'e çekilir. */ @media (max-width: 760px) { .shell, .layout, .app, .sayfa, .gov, .govde, .kabuk, .duzen { align-items: stretch; } } /* ── 10. Çok dar ekran (telefon dikey) ──────────────────────────────────── */ @media (max-width: 560px) { #ayxh-bar { gap: 6px; padding: 0 8px; } #ayxh-clock { font-size: 12px; } input[type=range] { width: min(180px, 56vw); } /* çok sütunlu grid'ler tek sütuna insin (yalnız sabit px şablonlular) */ .g2, .g3, .g4, .grid2, .grid3, .iki, .uc { grid-template-columns: 1fr !important; } }