/* ===================================================================== KEŞFET EKRANI — TELEFON DÜZENİ · "Fildişi / Mürekkep vitrin" ailesi telefon-bugun.css'in KARDEŞ dosyası; style.css → telefon-bugun.css → telefon-kesfet.css sırasıyla yüklenir. Kelime rayı (.word-grid.wg-alt) ve editoryal kart başlığı kuralları telefon-bugun.css'ten miras alınır. TAMAMI genişlik bloğunda; bu rota masaüstünde zaten yok (941px+ hiçbir kural almaz). Gereken yama (3 nokta): 1) icons.js · sete 'search' ikonu (24×24 çizgi, mevcut dille): search: '' 2) mobil.js · kesfetHtml() yeni işaretlemeyle değişir + arama süzgeci (APP.SCENARIOS / APP.WORDS / APP.GRAMER_KONULAR üzerinde, toLocaleLowerCase('tr') ile) — örnek: demo/js/demo.js. 3) index.html · telefon-bugun.css'ten SONRA bu dosyanın bağı. YENİ RENK YOK — kimlik renkleri mevcut token çiftleri: senaryo --accent/--accent-soft · hikâye --violet/--violet-soft · kelime --ok/--ok-soft · konu --warn/--warn-soft (üç blokta zaten tanımlılar). Gradyan yok; tek istisna mask-image kaydırma solmaları. ===================================================================== */ @media (max-width: 940px) { /* ------------------------------------------------------------------ 1 · ARAMA — ekranın birincil aracı, çubuğun hemen altında. 52px (--ctrl-h-lg): kütüphanenin TEK ana kontrolü budur. ------------------------------------------------------------------ */ .ks-ara { position: relative; margin-bottom: var(--sp-5); } .ks-ara .ks-ara-ic { position: absolute; left: var(--sp-4); top: 50%; width: var(--sp-5); height: var(--sp-5); margin-top: -10px; color: var(--faint); display: inline-flex; pointer-events: none; } .ks-ara .ks-ara-ic .ic { width: 100%; height: 100%; } .ks-ara input { width: 100%; box-sizing: border-box; height: var(--ctrl-h-lg); padding: 0 52px 0 48px; border: 1px solid var(--btn-line); border-radius: var(--r-full); background: var(--card); color: var(--text); font-family: inherit; font-size: var(--fs-base); font-weight: 600; transition: border-color var(--mo-hizli) var(--mo-cikis), box-shadow var(--mo-hizli) var(--mo-cikis); } .ks-ara input::placeholder { color: var(--faint); font-weight: 600; } .ks-ara input:hover:not(:disabled) { border-color: var(--accent); } .ks-ara input:disabled { opacity: 0.45; cursor: not-allowed; } .ks-ara input::-webkit-search-cancel-button, .ks-ara input::-webkit-search-decoration { -webkit-appearance: none; display: none; } /* Temizle: 40px dokunma hedefi, alan doluyken görünür. */ .ks-ara .ks-ara-sil { position: absolute; right: var(--sp-2); top: 50%; width: var(--icon-box); height: var(--icon-box); margin-top: -20px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: none; border-radius: var(--r-full); background: none; color: var(--faint); cursor: pointer; transition: color var(--mo-hizli) var(--mo-cikis), background var(--mo-hizli) var(--mo-cikis); } .ks-ara .ks-ara-sil:hover { color: var(--text); background: var(--card2); } .ks-ara .ks-ara-sil .ic { width: var(--sp-4); height: var(--sp-4); } .ks-ara .ks-ara-sil[hidden] { display: none; } /* Arama süzerken (eşzamansız kaynak bağlanırsa): ikon göstergeye döner. */ .ks-ara.yukluyor .ks-ara-ic .ic { visibility: hidden; } .ks-ara.yukluyor .ks-ara-ic::after { content: ''; position: absolute; inset: 0; border-radius: var(--r-full); border: 2px solid var(--line-strong); border-top-color: var(--accent); animation: tk-donme 700ms linear infinite; } @keyframes tk-donme { to { transform: rotate(360deg); } } .ks-ara.hata input { border-color: var(--bad); background: var(--bad-soft); } /* ------------------------------------------------------------------ 2 · EDİTORYAL BÖLÜM ETİKETİ — Çalış'la aynı dil. ------------------------------------------------------------------ */ .ks-etiket { display: flex; align-items: baseline; gap: var(--sp-2); font-size: var(--fs-xs); font-weight: 800; letter-spacing: 1.6px; text-transform: uppercase; color: var(--faint); margin: var(--sp-5) var(--sp-1) var(--sp-2); } .ks-etiket > span { font-weight: 700; color: var(--line-strong); letter-spacing: 0; } .ks-govde > .ks-etiket:first-child { margin-top: 0; } /* ------------------------------------------------------------------ 3 · SATIR BİLEŞENİ — .mk-satir kart yüzeyine döner (sonuç listesi, "kaldığın yerden", günün senaryosu hepsi AYNI bileşen). ------------------------------------------------------------------ */ .mk-liste { gap: var(--sp-2); } .mk-satir { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-1); min-height: 64px; padding: var(--sp-3); transition: border-color var(--mo-hizli) var(--mo-cikis), transform var(--mo-hizli) var(--mo-cikis), background var(--mo-hizli) var(--mo-cikis); } .mk-satir:hover { border-color: var(--line-strong); } .mk-satir:active { background: var(--card2); transform: translateY(1px); } .mk-satir:disabled { opacity: 0.45; cursor: not-allowed; } .mk-satir.hata { border-color: var(--bad); background: var(--bad-soft); } /* Kimlik rengi YALNIZ ikonda: madalyon token çiftinden. */ .mk-ic { border-radius: var(--r-full); } .ks-c-senaryo { background: var(--accent-soft); color: var(--accent); } .ks-c-hikaye { background: var(--violet-soft); color: var(--violet); } .ks-c-kelime { background: var(--ok-soft); color: var(--ok-strong); } .ks-c-konu { background: var(--warn-soft); color: var(--warn-ink, var(--warn)); } /* ------------------------------------------------------------------ 4 · KÜTÜPHANE — 2×2 karo. Bölümler menü değil İÇERİK: her karo sayısını taşır, "içinde ne var" girmeden okunur. ------------------------------------------------------------------ */ .ks-izgara { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2); } .ks-kutu { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-2); min-height: 128px; padding: var(--sp-4); text-align: left; cursor: pointer; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-1); color: var(--text); font-family: inherit; transition: border-color var(--mo-hizli) var(--mo-cikis), transform var(--mo-hizli) var(--mo-cikis), background var(--mo-hizli) var(--mo-cikis); } .ks-kutu:hover { border-color: var(--line-strong); } .ks-kutu:active { background: var(--card2); transform: translateY(1px); } .ks-kutu:disabled { opacity: 0.45; cursor: not-allowed; } .ks-kutu.hata { border-color: var(--bad); background: var(--bad-soft); } .ks-kutu-ic { width: var(--icon-box); height: var(--icon-box); border-radius: var(--r-full); display: inline-flex; align-items: center; justify-content: center; } .ks-kutu-ic .ic { width: var(--sp-5); height: var(--sp-5); } .ks-kutu > b { font-size: var(--fs-md); font-weight: 800; letter-spacing: -0.2px; margin-top: var(--sp-1); } .ks-kutu > i { font-style: normal; font-size: var(--fs-sm); font-weight: 600; color: var(--muted); line-height: var(--lh-normal); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* Karolar + satırlar için yükleniyor durumu (içerik soluklaşır, ortada gösterge; dönüş linear — geçiş eğrisi değil sabit hız). */ .ks-kutu.yukluyor, .mk-satir.yukluyor { pointer-events: none; position: relative; } .ks-kutu.yukluyor > *, .mk-satir.yukluyor > * { opacity: 0.25; } .ks-kutu.yukluyor::after, .mk-satir.yukluyor::after { content: ''; position: absolute; left: 50%; top: 50%; width: var(--sp-5); height: var(--sp-5); margin: -10px 0 0 -10px; border-radius: var(--r-full); border: 2px solid var(--line-strong); border-top-color: var(--accent); animation: tk-donme 700ms linear infinite; } /* ------------------------------------------------------------------ 5 · KELİME RAYI — Çalış'taki .word-grid.wg-alt rayının aynısı; kurallar telefon-bugun.css'te. Burada yalnız üst boşluk hizalanır. ------------------------------------------------------------------ */ .ks-ray { margin-top: 0; } /* ------------------------------------------------------------------ 6 · BOŞ SONUÇ — ikon madalyonu + tek satır sebep + gerçek temizleme. ------------------------------------------------------------------ */ .ks-bos { display: flex; flex-direction: column; align-items: center; gap: var(--sp-3); padding: var(--sp-10) var(--sp-6); text-align: center; } .ks-bos .ks-bos-ic { width: var(--icon-box); height: var(--icon-box); border-radius: var(--r-full); background: var(--card2); color: var(--faint); display: inline-flex; align-items: center; justify-content: center; } .ks-bos .ks-bos-ic .ic { width: var(--sp-5); height: var(--sp-5); } .ks-bos p { margin: 0; font-size: var(--fs-base); font-weight: 600; color: var(--muted); line-height: var(--lh-normal); overflow-wrap: anywhere; } } /* Koyu tema = "Mürekkep vitrin": "kaldığın yerden" kartı sahnenin vitrinidir — üst kenar ışığı (--kenar-isik). Değerler token; yeni renk yok. Sorgular birleşik: yine yalnız ≤940px. */ @media (max-width: 940px) and (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .ks-devam { box-shadow: var(--shadow-card), var(--kenar-isik); } } @media (max-width: 940px) { :root[data-theme="dark"] .ks-devam { box-shadow: var(--shadow-card), var(--kenar-isik); } /* ODAK HALKASI — dosyanın SONUNDA ve :where() OLMADAN. */ .ks-ara input:focus-visible, .ks-ara .ks-ara-sil:focus-visible, .ks-kutu:focus-visible, .mk-satir:focus-visible { outline: none; box-shadow: var(--odak); border-color: var(--accent); } }