/* ═══════════════════════════════════════════════════════════════ OTOKOD · platform.css Aynı site; iOS, Android ve masaüstünde o platformun kendi diline uygun davranır. Sınıflar üzerine PHP tarafından yazılır: .platform-ios / .platform-android / .platform-desktop ═══════════════════════════════════════════════════════════════ */ /* ═════════════════════════ iOS ════════════════════════════════ Hedef: iOS 26 "Liquid Glass" dili — yüzen pill kontroller, yoğun bulanıklık, yay (spring) hareketleri, ince çizgiler, büyük başlıklardan küçüğe geçiş. ═════════════════════════════════════════════════════════════ */ .platform-ios { --font-ui: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", sans-serif; /* iOS köşeleri daha yumuşak ve daha büyük */ --r-sm: 13px; --r-md: 20px; --r-lg: 26px; --r-xl: 34px; --r-2xl: 44px; --blur: 32px; --blur-strong: 52px; --glass-sat: 200%; /* Daha ince kenarlıklar — iOS hairline hissi */ --stroke: rgba(255, 255, 255, 0.07); --stroke-strong: rgba(255, 255, 255, 0.14); } .platform-ios body { letter-spacing: -0.012em; /* iOS'ta lastik kaydırma hissi */ overscroll-behavior-y: contain; } /* Büyük başlık → kaydırınca küçülür (iOS navigation bar davranışı) */ .platform-ios .page-head h1 { font-weight: 800; letter-spacing: -0.045em; } /* Yüzen rıhtım: iOS'ta ekranın altından ayrık ve tam pill */ .platform-ios .dock { bottom: calc(env(safe-area-inset-bottom, 0px) + 10px); border-radius: 30px; padding: 7px; background: color-mix(in oklab, var(--bg) 52%, transparent); border-color: rgba(255, 255, 255, 0.14); } .platform-ios .dock__item { border-radius: 24px; font-size: 0.6rem; letter-spacing: -0.005em; } .platform-ios .dock__item.is-active::before { inset: 3px; border-radius: 22px; } /* Bası hissi: iOS'ta ölçek küçülür, dalga yok */ .platform-ios .btn:active, .platform-ios .chip:active, .platform-ios .card:active { transform: scale(0.96); } .platform-ios .card { transition-timing-function: var(--ease-spring); } /* Form alanları iOS'ta daha yuvarlak ve yüksek */ .platform-ios .input, .platform-ios .textarea, .platform-ios .select { padding: 0.86rem 1.05rem; border-radius: var(--r-md); font-size: 1rem; } /* iOS anahtarı (switch) biraz daha büyük */ .platform-ios .switch__track { width: 52px; height: 32px; } .platform-ios .switch__track::after { width: 26px; height: 26px; } .platform-ios .switch input:checked + .switch__track::after { transform: translateX(20px); } /* Alttan açılan tabaka iOS'ta her zaman grabber'lı */ .platform-ios .sheet { border-radius: var(--r-2xl); } /* Bildirimler iOS'ta üstten iner (Dynamic Island hissi) */ .platform-ios .toasts { top: calc(env(safe-area-inset-top, 0px) + 10px); bottom: auto; flex-direction: column; } .platform-ios .toast { border-radius: 24px; padding: 0.7rem 1.1rem; animation-name: ios-toast-in; } @keyframes ios-toast-in { from { opacity: 0; transform: translateY(-22px) scale(0.9); } } /* iOS'ta kaydırma çubuğunu gizle (sistem zaten geçici gösterir) */ .platform-ios ::-webkit-scrollbar { width: 0; height: 0; } /* Metin seçimi iOS'ta etkileşimli alanlarda kapalı olsun */ .platform-ios .dock, .platform-ios .nav, .platform-ios .btn, .platform-ios .card { -webkit-user-select: none; user-select: none; } /* ═══════════════════════ ANDROID ══════════════════════════════ Hedef: Material 3 dili — alt kenara oturan gezinme çubuğu, ikon arkasındaki hap biçimli gösterge, dalga (ripple) geri bildirimi, daha yüksek kontrastlı yüzeyler. ═════════════════════════════════════════════════════════════ */ .platform-android { --font-ui: Roboto, "Google Sans", "Noto Sans", system-ui, -apple-system, sans-serif; --r-sm: 10px; --r-md: 16px; --r-lg: 20px; --r-xl: 26px; --r-2xl: 30px; --blur: 20px; --blur-strong: 30px; --glass-sat: 150%; /* Material yüzeyleri camdan çok "tonal" */ --surface: rgba(255, 255, 255, 0.055); --surface-2: rgba(255, 255, 255, 0.085); --surface-3: rgba(255, 255, 255, 0.125); } .platform-android body { letter-spacing: 0; } .platform-android h1, .platform-android h2, .platform-android h3 { letter-spacing: -0.01em; font-weight: 600; } /* Gezinme çubuğu alt kenara yapışır (M3 navigation bar) */ .platform-android .dock { left: 0; right: 0; bottom: 0; width: 100%; max-width: none; transform: none; border-radius: 0; border-left: 0; border-right: 0; border-bottom: 0; padding: 8px 4px calc(8px + env(safe-area-inset-bottom, 0px)); background: color-mix(in oklab, var(--bg-raise) 88%, transparent); box-shadow: 0 -1px 0 var(--stroke); } .platform-android .dock.is-hidden { transform: translateY(100%); } /* Aktif göstergesi: ikonun arkasında hap */ .platform-android .dock__item { gap: 4px; border-radius: 0; padding: 4px 2px; font-size: 0.66rem; font-weight: 500; } .platform-android .dock__item.is-active { color: var(--accent); font-weight: 600; } .platform-android .dock__item.is-active::before { inset: auto; top: 2px; left: 50%; transform: translateX(-50%); width: 62px; height: 30px; border-radius: 16px; background: color-mix(in oklab, var(--accent) 22%, transparent); animation: m3-indicator 0.32s var(--ease-out); } @keyframes m3-indicator { from { width: 30px; opacity: 0; } } .platform-android .dock__item .ico { position: relative; z-index: 1; } .platform-android .dock__badge { right: calc(50% - 22px); top: 0; } /* Dalga geri bildirimi */ .platform-android .btn, .platform-android .chip, .platform-android .nav__link, .platform-android .dock__item, .platform-android .menu__item, .platform-android .card { position: relative; overflow: hidden; } .platform-android .ripple { position: absolute; border-radius: 50%; background: currentColor; opacity: 0.22; transform: scale(0); pointer-events: none; animation: ripple 0.58s var(--ease-out) forwards; } @keyframes ripple { to { transform: scale(2.6); opacity: 0; } } /* Android'de basınca ölçek değil, yükseklik değişir */ .platform-android .btn:active { transform: none; filter: brightness(1.12); } .platform-android .card:active { transform: none; } /* Üst çubuk Android'de daha opak ve düz */ .platform-android .site-header.is-stuck::before { background: color-mix(in oklab, var(--bg-raise) 92%, transparent); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.28); } /* Form alanları: M3 "filled text field" hissi */ .platform-android .input, .platform-android .textarea, .platform-android .select { border-radius: 14px 14px 6px 6px; border-bottom-width: 2px; background: var(--surface-2); } .platform-android .input:focus, .platform-android .textarea:focus, .platform-android .select:focus { border-bottom-color: var(--accent); box-shadow: none; background: var(--surface-3); } /* Anahtar M3 ölçüleri */ .platform-android .switch__track { width: 52px; height: 32px; border-width: 2px; } .platform-android .switch__track::after { width: 20px; height: 20px; top: 4px; left: 4px; } .platform-android .switch input:checked + .switch__track::after { transform: translateX(20px) scale(1.2); } /* Bildirimler Android'de alttan "snackbar" olarak gelir */ .platform-android .toasts { left: 16px; right: 16px; bottom: calc(env(safe-area-inset-bottom, 0px) + 84px); top: auto; transform: none; width: auto; max-width: none; } .platform-android .toast { border-radius: 8px; background: var(--surface-solid); animation-name: m3-snack-in; } @keyframes m3-snack-in { from { opacity: 0; transform: translateY(24px); } } /* Alttan açılan tabaka M3 köşeleri */ .platform-android .sheet { border-radius: 28px 28px 0 0; } /* Yüzen eylem düğmesi (arama) — yalnızca Android'de ve yalnızca alt gezinme çubuğunun göründüğü dar ekranlarda */ @media (max-width: 899px) { .platform-android .fab { display: grid; } } .platform-android .fab { position: fixed; z-index: var(--z-sticky); right: 16px; bottom: calc(env(safe-area-inset-bottom, 0px) + 88px); display: grid; place-items: center; width: 56px; height: 56px; border-radius: 18px; background: linear-gradient(140deg, var(--accent), var(--accent-2)); color: var(--text-on-accent); box-shadow: 0 6px 18px -4px var(--accent-glow), 0 2px 6px rgba(0, 0, 0, 0.3); transition: transform var(--t-base) var(--ease-spring), box-shadow var(--t-base) var(--ease-out); } /* Geniş ekranda üst çubuktaki arama zaten var; FAB gereksiz */ @media (min-width: 900px) { .platform-android .fab { display: none; } } .platform-android .fab:active { transform: scale(0.92); } .fab { display: none; } /* ═════════════════════ MASAÜSTÜ ═══════════════════════════════ */ .platform-desktop .card { cursor: pointer; } .platform-desktop .nav__link, .platform-desktop .btn, .platform-desktop .chip { cursor: pointer; } /* Masaüstünde imleç etrafında hafif ışık — kartlara derinlik verir */ @media (hover: hover) and (min-width: 900px) { .card { background-image: radial-gradient( 320px circle at var(--mx, 50%) var(--my, 50%), color-mix(in oklab, var(--accent) 12%, transparent), transparent 62% ); background-repeat: no-repeat; } } /* ═════════════════ ORTAK MOBİL DÜZELTMELER ════════════════════ */ @media (max-width: 899px) { /* Dokunma hedefleri en az 44px */ .btn { min-height: 44px; } .btn--sm { min-height: 40px; } .btn--icon { min-width: 44px; } .tool-btn { min-height: 34px; } /* Bağlantı görevi gören küçük ögeler parmakla rahat vurulsun */ a.chip, .section__link { min-height: 40px; } .filters__item { min-height: 42px; } .tab { min-height: 40px; } /* Kart üzerindeki kalp görsel olarak küçük kalsın ama dokunma alanı çepeçevre genişlesin. */ .fav { position: relative; } .fav::after { content: ""; position: absolute; inset: -6px; border-radius: inherit; } /* Yatay taşmayı engelle */ .section { margin-block: var(--s-10); } /* iOS Safari'de 16px altı yazı otomatik yakınlaştırma yapar */ .input, .textarea, .select, .search__input { font-size: 16px; } } /* Cihaz "hareketi azalt" diyorsa vitrin otomatik geçişi dursun */ @media (prefers-reduced-motion: reduce) { .hero__thumb.is-active::after { animation: none; width: 100%; } .auth-art__col { animation: none; } }