@charset "UTF-8"; /*! * ================================================================== * qiwiy-mobile.css — Qiwiy Genel Mobil Uyum Katmanı * ------------------------------------------------------------------ * Konum : public_html/assets/css/qiwiy-mobile.css * * AMAÇ * Mevcut tasarımı DEĞİŞTİRMEDEN, yalnızca küçük ekranlarda ortaya * çıkan sorunları kapatmak. Kurallar ya zararsız genel korumalardır * ya da @media blokları içindedir; masaüstü görünümü aynen korunur. * * NEDEN !important? * Tailwind CDN, stil etiketini sonuna kendisi enjekte eder. * Bu yüzden aynı isimli sınıflar (.p-8, .sticky ...) normalde bu * dosyayı yener. Yalnızca gerçekten geçersiz kılınması gereken * kurallarda !important kullanılmıştır. * * KIRILIM NOKTALARI * 1023px ve altı -> tablet + telefon * 640px ve altı -> telefon * 480px ve altı -> dar telefon * 360px ve altı -> çok dar telefon * ================================================================== */ /* ================================================================== * 1) TEMEL KORUMA KATMANI (tüm ekran boyutları — risksiz) * ================================================================== */ html { /* iOS yatay çevrildiğinde yazıları kendiliğinden büyütmesin */ -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } body { /* Uzun link/slug/e-posta metinleri satırı taşırmasın */ overflow-wrap: break-word; } /* Yatay kayma kilidi. NOT 1: "hidden" yerine "clip" kullanıldı; "hidden" sayfadaki tüm position:sticky öğelerini bozardı (menu.php arama çubuğu, view-menu.php kategori barı vb.). "clip" bunları bozmaz. NOT 2: Kural yalnızca üzerinde. Kök öğedeki overflow doğrudan görüntü alanına (viewport) devredilir; böylece üzerinde kırpma bağlamı oluşmaz ve position:fixed başlık, modallar ve alt çubuklar etkilenmez. */ html { overflow-x: clip; } body { max-width: 100%; } /* Medya öğeleri kapsayıcıyı asla taşırmaz */ img, video, canvas, iframe, embed, object { max-width: 100%; } /* Flex/grid içinde kısalmayı mümkün kılar (… ile kesme çalışsın) */ .truncate, .min-w-0 { min-width: 0; } /* Form alanları dar satırlarda sıkışabilsin */ input, select, textarea { min-width: 0; } /* Dokunmatik: çift dokunuş gecikmesi ve gri parlama kalksın */ a, button, [role="button"], label, summary, input, select, textarea { touch-action: manipulation; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } /* Yatay kaydırmalı alanlarda iOS ivmeli kaydırma */ .overflow-x-auto, .overflow-auto, .qs-scroll, .custom-scrollbar { -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; } /* Grafikler kutusunu taşırmasın (Chart.js) */ canvas { max-width: 100% !important; } /* ================================================================== * 2) TABLET VE TELEFON (≤ 1023px) * ================================================================== */ @media (max-width: 1023px) { /* Düzenleyici sayfalardaki "yapışkan önizleme" panelleri. Tek sütuna düşen mobil düzende yapışkanlık, önizlemenin formun üstünde kilitli kalmasına yol açıyordu. Etkilenen: tools/fatura.php, google-yorum.php, kartvizit.php, link-agaci.php */ .sticky.top-28 { position: static !important; top: auto !important; } /* Tam ekran yüksekliği: iOS adres çubuğu hatasını giderir */ .min-h-screen { min-height: 100vh; min-height: 100dvh; } } /* ================================================================== * 3) TELEFON (≤ 640px) * ================================================================== */ @media (max-width: 640px) { /* --- 3.1 iOS "input'a dokununca ekran zıplaması" -------------- Safari, 16px'ten küçük yazılı bir alana odaklanınca sayfayı zorla büyütür. 16px, bunu engelleyen tek çözümdür. Renk/onay/dosya alanları hariç tutuldu (boyutları bozulmasın). */ input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="hidden"]), select, textarea { font-size: 16px !important; } /* Projedeki özel form sınıfları da aynı kurala tabi */ .input-std, .input-modern, .qs-input { font-size: 16px !important; } /* --- 3.2 Dolgu sadeleştirme ---------------------------------- 32px'lik dolgular 360px genişlikte içeriğe 296px bırakıyordu. Yalnızca ön eki olmayan sınıflar etkilenir; sm:p-8 / lg:p-8 farklı sınıf adları olduğu için masaüstü aynen kalır. */ .p-8 { padding: 1.25rem !important; } .p-10 { padding: 1.5rem !important; } .p-12 { padding: 1.75rem !important; } .p-16 { padding: 2rem !important; } .px-8 { padding-left: 1.25rem !important; padding-right: 1.25rem !important; } .py-8 { padding-top: 1.25rem !important; padding-bottom: 1.25rem !important; } .gap-8 { gap: 1.5rem !important; } /* --- 3.3 Modal yükseklikleri --------------------------------- vh, mobil tarayıcıda adres çubuğunu hesaba katmaz; dvh katar. dvh desteklemeyen eski tarayıcılarda satır yok sayılır ve Tailwind'in vh değeri geçerli kalır (güvenli geri düşüş). */ .max-h-\[70vh\] { max-height: 68dvh !important; } .max-h-\[80vh\] { max-height: 76dvh !important; } .max-h-\[85vh\] { max-height: 80dvh !important; } .max-h-\[88vh\] { max-height: 82dvh !important; } .max-h-\[90vh\] { max-height: 84dvh !important; } .max-h-\[92vh\] { max-height: 86dvh !important; } /* --- 3.4 Görsel kütüphanesi ızgarası ------------------------- tools/menu.php ve admin/media.php: 100px'lik kutucuklar dar ekranda 2 sütuna düşüp boşluk bırakıyordu. */ .lib-grid { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)) !important; gap: 8px !important; } /* Tema seçici ızgarası (fatura.php / kartvizit.php) */ .theme-grid { grid-template-columns: repeat(auto-fill, minmax(68px, 1fr)) !important; gap: 8px !important; } /* --- 3.5 Tablolar -------------------------------------------- Zaten .overflow-x-auto ile sarılılar; sadece daha fazla sütunun ekrana sığması için yazı boyutu küçültülür. */ table { font-size: 0.8rem; } /* --- 3.6 Çentikli ekranlar (iPhone) -------------------------- Ekranın en altına sabitlenmiş çubuklar ana sayfa çizgisinin altında kalmasın. Etkilenen: views/view-tree.php, views/view-invoice.php vCard butonu. */ .fixed.bottom-0 { padding-bottom: env(safe-area-inset-bottom); } /* --- 3.7 Butonlar sığmadığında alt satıra geçsin -------------- */ .flex.gap-2 > a, .flex.gap-2 > button, .flex.gap-3 > a, .flex.gap-3 > button { min-width: 0; } } /* ================================================================== * 4) DAR TELEFON (≤ 480px) * ================================================================== */ @media (max-width: 480px) { /* Platform seçme penceresi (kartvizit.php + link-agaci.php). 4 sütun, 360px ekranda kutucuk başına ~57px bırakıyor ve "WhatsApp", "LinkedIn" gibi etiketler kesiliyordu. */ .platform-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 10px !important; max-height: 58vh !important; max-height: 58dvh !important; } .platform-item span { font-size: 0.6rem; } /* Modal başlıkları dar ekranda taşmasın */ .selected-platform-preview { padding: 14px !important; gap: 10px !important; } } /* ================================================================== * 5) ÇOK DAR TELEFON (≤ 420px) * ================================================================== */ @media (max-width: 420px) { /* Ön eki olmayan 4 sütunlu ızgaralar 2 sütuna iner. Etkilenen: admin/site_settings.php rozet rengi seçimi. (lg:grid-cols-4 gibi ön ekli sınıflar ayrı isimdir, etkilenmez.) */ .grid-cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } } /* ================================================================== * 6) EN DAR CİHAZLAR (≤ 360px) — iPhone SE, Galaxy A0x * ================================================================== */ @media (max-width: 360px) { .platform-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } .p-8, .p-10, .p-12, .p-16 { padding: 1rem !important; } .px-8 { padding-left: 1rem !important; padding-right: 1rem !important; } .py-8 { padding-top: 1rem !important; padding-bottom: 1rem !important; } } /* ================================================================== * 7) ERİŞİLEBİLİRLİK * ================================================================== */ /* Klavye ile gezinenler için görünür odak halkası */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible { outline: 2px solid #65a30d; outline-offset: 2px; } /* "Hareketi azalt" tercihine saygı */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } }