/* ===== Design tokens: "Modern Akademik" ===== */ :root { /* Nötr paleti — açık mod (kağıt/mürekkep) */ --paper-0: #fffdf8; /* kart yüzeyi */ --paper-50: #f7f5ef; /* ana zemin */ --paper-100: #eeeae0; /* ikincil zemin */ --paper-200: #e3ddce; /* üçüncül yüzey / nötr rozet zemini */ --ink-900: #1f2a37; /* ana metin */ --ink-600: #45536a; /* ikincil okunur metin (dim) */ --ink-400: #667085; /* üçüncül/soluk metin (faint) */ --paper-border: #ddd8cb; /* Nötr paleti — koyu mod (mürekkep/gece) */ --night-950: #111820; /* ana zemin */ --night-900: #18222d; /* ikincil zemin */ --night-800: #202c38; /* kart yüzeyi */ --night-700: #283645; /* yükseltilmiş yüzey / nötr rozet zemini */ --snow-100: #f3f0e8; /* ana metin */ --snow-300: #d7dce0; /* ikincil okunur metin (dim) */ --snow-500: #b8c0c8; /* üçüncül/soluk metin (faint) */ --night-border: #344453; /* Marka ve vurgu — açık mod değerleri (koyu modda aşağıda geçersiz kılınır) */ --navy: #334e68; --navy-strong: #243b53; --sage: #385e52; --amber: #d69e2e; --logo-ink: #10233f; --logo-accent: #a77a28; --subj-verbal: #4f78a8; /* Türkçe */ --subj-quant: #4f8263; /* Matematik / Muhakeme */ --subj-history: #a55c5c; /* Tarih */ --subj-geo: #438c89; /* Coğrafya */ --subj-citizenship: #7667a8; /* Vatandaşlık */ --subj-current: #8b6f3e; /* Güncel konular (uyarı renginden kasıtlı olarak ayrıştırılmış ton) */ --ok: #3f7d58; --warn: #b7791f; --bad: #b85c5c; --info: #4f78a8; --radius-sm: 10px; --radius-md: 16px; --radius-lg: 22px; --radius-pill: 999px; --shadow-sm: 0 1px 2px rgba(31,42,55,.06), 0 1px 1px rgba(31,42,55,.05); --shadow-md: 0 8px 24px rgba(31,42,55,.10); --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --font-sans: 'Manrope', -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif; --font-serif: 'Source Serif 4', Georgia, "Times New Roman", serif; --bg: var(--paper-50); --surface: var(--paper-0); --surface-2: var(--paper-100); --surface-3: var(--paper-200); --border: var(--paper-border); --text: var(--ink-900); --text-dim: var(--ink-600); --text-faint: var(--ink-400); /* Kart/yükseltilmiş yüzey metni sayfa metninden ayrıdır. Özel temada sayfa ve kart zeminleri zıt parlaklıklarda seçilebildiği için bu token'lar JS tarafından kart zeminine göre ayrıca hesaplanır. */ --surface-text: var(--ink-900); --surface-text-dim: var(--ink-600); --surface-text-faint: var(--ink-400); /* Veri teması henüz uygulanmadan önceki güvenli varsayılan: landing ile aynı adaçayı. */ --accent: var(--sage); --accent-hover: #173f36; --accent-active: #102e28; --accent-text: var(--paper-0); /* Kocchum tema sistemi — eksik semantik token'lar (bkz. Kocchum fazı, Faz 3/4). --accent zaten hem "vurgu" hem dolaylı olarak odak halkası rengiydi; ayrı bir --focus-ring token'ı eklemek, ileride odak rengini vurgudan bağımsızlaştırmak gerekirse (ör. kontrast nedeniyle) tek noktadan değiştirilebilmesini sağlar. */ --focus-ring: var(--accent); /* Harita seçim durumu, sabit bir altın renge değil kullanıcının etkin tema vurgusuna bağlanır. Bu ifadeler --accent/--accent-text sonradan özel tema tarafından satır içi değiştirilse bile kullanım anında yeniden çözülür. */ --overlay: rgba(17, 22, 28, .55); --disabled-opacity: .45; --input-bg: var(--surface-2); --motion-fast: 120ms; --motion-base: 180ms; --motion-slow: 280ms; --ease-standard: cubic-bezier(.2, .7, .3, 1); color-scheme: light; /* ===== Merkezi otomatik tema sistemi — ek semantik token'lar (bkz. görev talimatı "Centralized automatic theme system", js/utils/color.js, js/data/themePresets.js) ===== Birincil/ikincil buton ve üst bar/gezinme artık --accent/--surface'e DOLAYLI olarak değil, KENDİ token'larına bağlıdır — böylece bir preset/özel tema "Birincil buton" ile "Vurgu rengi"ni veya "Üst bar" ile "Kart" rengini BAĞIMSIZ ayarlayabilir (bkz. görev talimatı "Changing one area must not overwrite unrelated colors"). Varsayılan değerleri MEVCUT görünümle birebir aynı olacak şekilde eskiye referans verir — bu yüzden eski altı-tema sisteminde (navy/sage/amber/monochrome/colorful/system) HİÇBİR görsel değişiklik olmaz. */ --btn-primary-bg: var(--accent); --btn-primary-hover: var(--accent-hover); --btn-primary-active: var(--accent-active); --btn-primary-text: var(--accent-text); --btn-secondary-bg: var(--surface-2); --btn-secondary-hover: var(--surface-3); --btn-secondary-text: var(--text); --btn-secondary-border: var(--border); --header-bg: var(--surface); --header-text: var(--text); --header-text-dim: var(--text-faint); } @media (prefers-color-scheme: dark) { /* Yalnızca hiçbir data-theme HENÜZ atanmamışken (ör. JS devre dışıysa) devreye girer — uygulama normalde her zaman js/app.js -> applyTheme() ile altı temadan (bkz. Kocchum "Altı Tema" fazı: navy/sage/amber x açık/karanlık) birini data-theme olarak KESİN şekilde atar (bkz. index.html'deki FOUC önleyici satır içi betik). Bu yüzden seçici burada TÜM açık temalı seçenekleri OS koyu tercihinin ezmesini önlemek için yalnızca `[data-theme]` HİÇ yoksa eşleşir. Varsayılan aile (adaçayı) kullanılır. */ :root:not([data-theme]) { --bg: var(--night-950); --surface: var(--night-800); --surface-2: var(--night-900); --surface-3: var(--night-700); --border: var(--night-border); --text: var(--snow-100); --text-dim: var(--snow-300); --text-faint: var(--snow-500); --surface-text: var(--snow-100); --surface-text-dim: var(--snow-300); --surface-text-faint: var(--snow-500); --accent: #8fc39a; --accent-hover: #a3d1ac; --accent-active: #b6dcbe; --accent-text: var(--night-950); --sage: #91b497; --amber: #e5b95c; --ok: #75b889; --warn: #e5b95c; --bad: #e08a8a; --info: #86a9d1; --logo-ink: #f7f3e8; --logo-accent: #d8a84c; --overlay: rgba(0, 0, 0, .6); --shadow-sm: 0 1px 2px rgba(0,0,0,.28), 0 1px 1px rgba(0,0,0,.2); --shadow-md: 0 10px 28px rgba(0,0,0,.36); color-scheme: dark; } } /* ===== Altı tema preseti: 3 vurgu ailesi (Navy/Yeşil/Amber) x (Açık/Karanlık) ===== Görev talimatı: "the three existing color/accent families" -> bunlar zaten yukarıdaki :root'ta tanımlı marka token'larıdır (--navy, --sage, --amber). Her aile artık HEM açık HEM karanlık modda kendi kimliğini koruyan, WCAG AA kontrastlı tam bir preset olarak var. Nötr taban (bg/surface/text/border) her ailede AYNIDIR (paper-* açıkta, night-* koyuda) — yalnızca --accent/--accent-hover/--accent-active/--accent-text ailesine göre değişir; bu sayede vurgu her zaman "aynı uygulama, farklı vurgu" hissi verir, tutarsız bir nötr taban yaratmaz. `data-theme="dark"`/`"light"` eski (legacy) değerleri, geriye dönük uyumluluk için `navy-dark`/varsayılan navy-light ile birebir aynı görünüme çözümlenir (bkz. js/app.js -> resolveEffectiveTheme, backend/app.py -> ALLOWED_THEMES migration notu). */ :root[data-theme="light"], :root[data-theme="navy-light"] { --bg: var(--paper-50); --surface: var(--paper-0); --surface-2: var(--paper-100); --surface-3: var(--paper-200); --border: var(--paper-border); --text: var(--ink-900); --text-dim: var(--ink-600); --text-faint: var(--ink-400); --accent: #334e68; --accent-hover: #243b53; --accent-active: #1c2e40; --accent-text: var(--paper-0); --overlay: rgba(17, 22, 28, .55); color-scheme: light; } :root[data-theme="dark"], :root[data-theme="navy-dark"] { --bg: var(--night-950); --surface: var(--night-800); --surface-2: var(--night-900); --surface-3: var(--night-700); --border: var(--night-border); --text: var(--snow-100); --text-dim: var(--snow-300); --text-faint: var(--snow-500); --accent: #8faec7; --accent-hover: #a3bdd2; --accent-active: #b7cddc; --accent-text: var(--night-950); --sage: #91b497; --amber: #e5b95c; --ok: #75b889; --warn: #e5b95c; --bad: #e08a8a; --info: #86a9d1; --overlay: rgba(0, 0, 0, .6); --shadow-sm: 0 1px 2px rgba(0,0,0,.28), 0 1px 1px rgba(0,0,0,.2); --shadow-md: 0 10px 28px rgba(0,0,0,.36); color-scheme: dark; } :root[data-theme="sage-light"] { /* Public landing paletinin uygulama semantik tokenlarına eşlenmiş sürümü. */ --bg: #f4f2ea; --surface: #fffdfa; --surface-2: #e8ede5; --surface-3: #dce5d9; --border: #cfd7cc; --text: #24352f; --text-dim: #53635d; --text-faint: #77847f; --accent: #385e52; --accent-hover: #173f36; --accent-active: #102e28; --accent-text: #ffffff; --overlay: rgba(17, 22, 28, .55); color-scheme: light; } :root[data-theme="sage-dark"] { --bg: var(--night-950); --surface: var(--night-800); --surface-2: var(--night-900); --surface-3: var(--night-700); --border: var(--night-border); --text: var(--snow-100); --text-dim: var(--snow-300); --text-faint: var(--snow-500); --accent: #8fc39a; --accent-hover: #a3d1ac; --accent-active: #b6dcbe; --accent-text: var(--night-950); --ok: #75b889; --warn: #e5b95c; --bad: #e08a8a; --info: #86a9d1; --overlay: rgba(0, 0, 0, .6); --shadow-sm: 0 1px 2px rgba(0,0,0,.28), 0 1px 1px rgba(0,0,0,.2); --shadow-md: 0 10px 28px rgba(0,0,0,.36); color-scheme: dark; } :root[data-theme="amber-light"] { --bg: var(--paper-50); --surface: var(--paper-0); --surface-2: var(--paper-100); --surface-3: var(--paper-200); --border: var(--paper-border); --text: var(--ink-900); --text-dim: var(--ink-600); --text-faint: var(--ink-400); --accent: #7a5f2e; --accent-hover: #695027; --accent-active: #574220; --accent-text: var(--paper-0); --overlay: rgba(17, 22, 28, .55); color-scheme: light; } :root[data-theme="amber-dark"] { --bg: var(--night-950); --surface: var(--night-800); --surface-2: var(--night-900); --surface-3: var(--night-700); --border: var(--night-border); --text: var(--snow-100); --text-dim: var(--snow-300); --text-faint: var(--snow-500); --accent: #e0b563; --accent-hover: #e8c37c; --accent-active: #efd093; --accent-text: var(--night-950); --ok: #75b889; --warn: #e5b95c; --bad: #e08a8a; --info: #86a9d1; --overlay: rgba(0, 0, 0, .6); --shadow-sm: 0 1px 2px rgba(0,0,0,.28), 0 1px 1px rgba(0,0,0,.2); --shadow-md: 0 10px 28px rgba(0,0,0,.36); color-scheme: dark; } /* ===== "Siyah-Beyaz" (monochrome) tema ===== */ /* Renk taşımaz; durum ayrımı (doğru/yanlış/uyarı) rengin dışında zaten metin etiketi (ör. "doğru"/"yanlış" rozetleri) ve ✓/✕ işaretleriyle (bkz. .option.correct/.incorrect) sağlandığından, buradaki farklı gri tonları yalnızca EK bir okunabilirlik katmanıdır. */ :root[data-theme="monochrome"] { --bg: #f2f2f0; --surface: #ffffff; --surface-2: #e9e9e7; --surface-3: #d8d8d6; --border: #c7c7c4; --text: #17181a; --text-dim: #47484b; --text-faint: #74757a; --accent: #202225; --accent-hover: #000000; --accent-active: #000000; --accent-text: #ffffff; --sage: #47484b; --amber: #3a3b3d; --ok: #26272a; --warn: #55565a; --bad: #000000; --info: #6a6b6f; --overlay: rgba(10, 10, 10, .6); --shadow-sm: 0 1px 2px rgba(0,0,0,.10); --shadow-md: 0 8px 24px rgba(0,0,0,.16); color-scheme: light; } /* ===== "Renkli" (colorful) özel tema ===== */ /* Nötr taban her zaman açık/kağıt tonlarıdır (uzun çalışma seansları için sakin kalır); --accent/--accent-hover/--accent-active/--accent-text js/app.js -> applyTheme() tarafından js/utils/color.js -> deriveAccentPalette() ile HER kullanıcı için ayrı ayrı, satır içi (inline) stil olarak hesaplanıp buradaki varsayılanların ÜZERİNE yazılır (bkz. Faz 3). */ :root[data-theme="colorful"] { --bg: var(--paper-50); --surface: var(--paper-0); --surface-2: var(--paper-100); --surface-3: var(--paper-200); --border: var(--paper-border); --text: var(--ink-900); --text-dim: var(--ink-600); --text-faint: var(--ink-400); --accent: var(--navy); --accent-hover: var(--navy-strong); --accent-active: #1c2e40; --accent-text: var(--paper-0); --overlay: rgba(17, 22, 28, .55); color-scheme: light; } /* Marka rengi tema ailesinden bağımsızdır; yalnızca zemin parlaklığına göre kontrast değiştirir. */ :root:is([data-theme="dark"], [data-theme$="-dark"]) { --logo-ink: #f7f3e8; --logo-accent: #d8a84c; --surface-text: var(--snow-100); --surface-text-dim: var(--snow-300); --surface-text-faint: var(--snow-500); } :root[data-theme="monochrome"] { --logo-ink: #17181a; --logo-accent: #5a5b5e; --surface-text: #17181a; --surface-text-dim: #47484b; --surface-text-faint: #74757a; } /* Eski tema referansları (bkz. js/components/charts.js, home.js) marka/ikincil vurgu rengine denk gelsin diye korunuyor — yeni bir paralel token seti açmak yerine. */ :root { --cyan: var(--sage); } * { box-sizing: border-box; } html, body { height: 100%; } body { margin: 0; font-family: var(--font-sans); background: var(--bg); color: var(--text); -webkit-font-smoothing: antialiased; overflow-x: hidden; } /* ===== Yüzeye duyarlı metin kapsamı ===== Özel temada `--bg` ve `--surface` birbirinden bağımsızdır. Aşağıdaki ortak yüzey bileşenleri kendi kapsamlarında kart için üretilen metin token'larını kullanır; böylece tüm alt başlık/dim/faint kuralları da ekrana özel yamalar olmadan doğru kontrastı miras alır. */ .card, .metric-tile, .stat-tile, .quick-card, .option, .modal-card, .admin-drawer, .test-footer, .theme-select-trigger, .theme-select-menu, .flashcard-face, .flashcard-fav-btn, .map-lab-mode-switch, .map-lab-timeline, .map-lab-control-card, .map-lab-detail-card, .map-lab-subcat, .map-lab-mobile-layers, .map-lab-map-panel.is-mobile-expanded { --text: var(--surface-text); --text-dim: var(--surface-text-dim); --text-faint: var(--surface-text-faint); color: var(--text); } .tabular-nums, .timer, .stat-value, .bar-pct, .qnav-dot, .badge, .opt-letter { font-variant-numeric: tabular-nums; } a { color: inherit; } button { font-family: inherit; } ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-thumb { background: var(--surface-3); border-radius: 8px; } /* ===== App shell ===== Bu kapsayıcı ARTIK genişliği kısıtlamaz (bkz. Kocchum fazı "Masaüstü Duyarlı Tasarım") — önceden buradaki sabit `max-width:480px`, viewport ne kadar geniş olursa olsun TÜM rotaları (Yönetim Paneli dahil) her zaman dar/ortalanmış bir "telefon çerçevesi"ne sıkıştırıyordu; admin-shell/admin-sidebar'ın kendi 960px/1280px kırılım noktaları hiçbir zaman devreye giremiyordu çünkü ÜST kapsayıcı zaten 480px'e sabitti. Okunabilir içerik genişliği artık ekran BAŞINA (bkz. .screen / .screen--wide / .admin-screen) belirlenir, dış kabuk yalnızca tam yükseklik/tam genişlik bir host'tur. */ .app-shell { width: 100%; min-height: 100vh; position: relative; background: var(--bg); display: flex; flex-direction: column; } .app-shell > * { min-width: 0; } :root { --content-max: 560px; } /* Varsayılan (mobil-öncelikli) ekranlar: okunabilir tek sütun, her zaman ortalanmış — bkz. görev talimatı "keep question text at a readable line length". Genişliği artırmak isteyen ekranlar (dashboard/admin/sonuç) .screen--wide ile bunun üzerine yazar. */ .screen { flex: 1; width: 100%; max-width: var(--content-max); margin: 0 auto; min-width: 0; padding: 16px 16px calc(96px + env(safe-area-inset-bottom)); animation: fadeIn .18s ease; } @media (min-width: 600px) { .screen { padding-left: 24px; padding-right: 24px; } } /* ===== Masaüstü "dashboard" ekranları (Akıllı Puan, Sınavlar, Sonuç/Analiz, Pratik vb.) ===== Mobilde (<960px) davranış birebir ÖNCEKİYLE aynıdır: tek sütun, dikey akış. >=960px'te içerik genişler ve doğrudan alt bölümler (.section) content-driven bir grid'e ("kartlar yan yana") yeniden akar — hiçbir ekranın iş mantığı/HTML yapısı değişmeden, yalnızca kapsayıcıya bir CSS sınıfı eklenerek. .section--full her zaman tam genişlik kaplar (ör. üst başlık, Hızlı Başlangıç grid'i, sınav listesi). Ana Sayfa (home.js) artık kendi ÖZEL .screen--dashboard/.home-grid çiftini kullanır (bkz. aşağısı) — auto-fill masonry yerine, satırların KESİN olarak eşleşmesi (ör. "Son Sonuç" ile "Net Puan Trendi" hep yan yana) gerektiğinden. */ .screen--wide { max-width: 1180px; padding-bottom: calc(48px + env(safe-area-inset-bottom)); } @media (min-width: 960px) { .screen--wide { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: row; align-items: stretch; align-content: start; gap: 20px; padding-bottom: 40px; } .screen--wide > * { margin-top: 0 !important; } .screen--wide > .section { min-width: 0; display: flex; flex-direction: column; } .screen--wide > .section > .card:only-child { flex: 1; } .screen--wide > .section--full, .screen--wide > .flex.between.center:first-child { grid-column: 1 / -1; } } /* ===== Ana Sayfa (home.js) — amaca özel iki sütunlu pano ===== .screen--dashboard yalnızca genişliği ayarlar (auto-fill DAVRANIŞI YOKTUR). .home-grid, mobilde tek sütun dikey akış, >=1180px'te (kenar çubuğu + rahat iki sütun için yeterli genişlik) KESİN 2 sütunlu bir grid'e döner — DOM sırasına göre kartlar ikişerli eşleşir (ör. "Bugünkü Hedef"+"Genel Ustalık" bir satır, "Son Sonuç"+"Net Puan Trendi" bir sonraki). .span-2 taşıyan öğeler (üst başlık, Hızlı Başlangıç) her zaman tam genişlik kaplar. */ .screen--dashboard { max-width: 1360px; padding-bottom: calc(48px + env(safe-area-inset-bottom)); } .home-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-top: 4px; margin-bottom: 20px; } .home-header h1 { margin: 2px 0 0; font-size: 22px; } .home-header-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .home-header-actions .btn { width: auto; } /* Mobil ana sayfa başlığı tek satırda kalır: isim solda, birincil CTA ve öneri ikonu sağda. Profil üst başlıktan gizlenir; mobil alt menüdeki Profil erişimi korunur. */ @media (max-width: 767px) { .home-header { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, min(64vw, 310px)); align-items: center; gap: 8px; flex-wrap: nowrap; } .home-header > :first-child { min-width: 0; } .home-header h1 { min-width: 0; font-size: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .home-header-actions { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) 40px; align-items: center; gap: 6px; flex-wrap: nowrap; } .home-header-actions .btn-primary { width: 100%; min-width: 0; min-height: 40px; padding: 8px 9px; gap: 5px; font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .home-header-actions .btn-label-text { display: none; } .home-header-actions .btn-sm { width: 40px !important; min-width: 40px; min-height: 40px; padding: 0; justify-content: center; } .home-header-actions .icon-btn { display: none; } } @media (max-width: 380px) { .home-header-actions .btn-primary svg { display: none; } } .home-grid { display: flex; flex-direction: column; gap: 18px; } .home-grid > * { margin-top: 0; } .home-grid > .card.home-card { margin-top: 0; } .home-card { height: 100%; } .home-map-lab { isolation: isolate; min-height: 190px; position: relative; overflow: hidden; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 22px; padding: 28px; border: 1px solid color-mix(in srgb, var(--subj-geo) 48%, var(--border)); border-radius: var(--radius-lg); background: linear-gradient(120deg, color-mix(in srgb, var(--subj-history) 12%, var(--surface)) 0%, color-mix(in srgb, var(--subj-geo) 14%, var(--surface)) 100%); box-shadow: var(--shadow-sm); } .home-map-lab-glow { position: absolute; z-index: -1; width: 280px; height: 280px; right: 8%; top: 50%; border-radius: 50%; background: color-mix(in srgb, var(--subj-geo) 22%, transparent); filter: blur(34px); transform: translateY(-50%); pointer-events: none; } .home-map-lab-icon { width: 64px; height: 64px; display: grid; place-items: center; border: 1px solid color-mix(in srgb, var(--subj-geo) 50%, var(--border)); border-radius: 18px; background: color-mix(in srgb, var(--subj-geo) 16%, var(--surface)); color: var(--subj-geo); } .home-map-lab-copy { min-width: 0; } .home-map-lab-kicker { display: block; margin-bottom: 5px; color: var(--subj-geo); font-size: 11px; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; } .home-map-lab h2 { margin: 0; font-size: clamp(23px, 3vw, 31px); } .home-map-lab p { max-width: 720px; margin: 7px 0 14px; color: var(--text-dim); line-height: 1.55; } .home-map-lab-tags { display: flex; flex-wrap: wrap; gap: 7px; } .home-map-lab-tags span { padding: 5px 9px; border: 1px solid color-mix(in srgb, var(--subj-geo) 25%, var(--border)); border-radius: var(--radius-pill); background: color-mix(in srgb, var(--subj-geo) 7%, var(--surface)); color: var(--text-dim); font-size: 11px; font-weight: 650; } .home-map-lab-action { width: auto; min-height: 48px; padding-inline: 20px; border-color: transparent; background: var(--subj-geo); color: var(--paper-0); white-space: nowrap; } .home-map-lab-action:hover { background: color-mix(in srgb, var(--subj-geo) 84%, black); } @media (max-width: 700px) { .home-map-lab { grid-template-columns: auto 1fr; gap: 14px; padding: 20px; } .home-map-lab-icon { width: 52px; height: 52px; border-radius: 15px; } .home-map-lab-action { grid-column: 1 / -1; width: 100%; } } @media (min-width: 1180px) { .home-grid { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; gap: 20px; } .home-grid > .span-2 { grid-column: 1 / -1; } } /* ===== Profil ekranı — masaüstünde kimlik kartı (~1/3) + ustalık/istatistik alanı (~2/3) ===== Mobilde tek sütun dikey akış (öncekiyle aynı). >=1024px'te kimlik kartı sola, geri kalan TÜM içerik (özet/metrikler/ders raporu/bağlantılar) sağa geçer; kimlik kartı `sticky` ile sağ sütun kaydırılırken yerinde kalır (görev talimatı: "Do not centre every element merely because it is a profile page" — yalnızca kimlik KARTININ İÇİ ortalanır, sayfanın tamamı değil). */ .profile-grid { display: flex; flex-direction: column; gap: 16px; } .profile-grid > * { margin-top: 0; } .profile-main > .card.card { margin-top: 0; } @media (min-width: 1024px) { .profile-grid { display: grid; grid-template-columns: minmax(260px, 320px) 1fr; align-items: start; gap: 22px; } .profile-grid > .profile-main { display: flex; flex-direction: column; gap: 16px; min-width: 0; } .profile-identity { position: sticky; top: 20px; } } /* Sayısal/tarih metriklerini TEK bir tutarlı ızgarada hizalar (görev talimatı: "Align numeric metrics consistently", "labels visibly secondary to values") — stat-tile ile aynı görsel dil (büyük değer + küçük büyük-harf etiket), yalnızca 6 öğeye kadar esner. Önceki (daha dengeli/temiz görünen) 3 sütunlu düzene geri dönüldü (bkz. görev talimatı "restore ... to the previous cleaner style"); yalnızca `max-width`, geniş masaüstünde (bkz. .profile-grid'in >=1024px sağ sütunu) döşemelerin konteyneri tamamen doldurup aşırı gerilmesini önlemek için korunur — görsel stil/aralık aksi halde birebir öncekiyle aynıdır. */ .metric-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; } @media (min-width: 480px) { .metric-grid { grid-template-columns: repeat(3, 1fr); max-width: 460px; } } .metric-tile { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 14px 10px; text-align: center; } .metric-tile .metric-value { font-size: 17px; font-weight: 800; letter-spacing: -.01em; line-height: 1.25; } .metric-tile .metric-value.is-empty { color: var(--text-faint); font-weight: 600; font-size: 14px; } .metric-tile .metric-label { font-size: 10.5px; color: var(--text-faint); margin-top: 4px; text-transform: uppercase; letter-spacing: .04em; } @keyframes fadeIn { from { opacity: 0; transform: translateY(4px);} to { opacity: 1; transform: none;} } @media (prefers-reduced-motion: reduce) { .screen { animation: none; } } .screen--nochrome { padding-bottom: 24px; } /* ===== İkonlar ===== */ .icon { display: inline-block; vertical-align: -4px; flex-shrink: 0; } button .icon, .nav-icon .icon { vertical-align: middle; } .icon.flip-v { transform: scaleY(-1); } /* ===== Top bar ===== */ .topbar { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 14px 16px 6px; position: sticky; top: 0; background: linear-gradient(var(--bg) 80%, transparent); z-index: 5; } .topbar h1 { font-size: 19px; margin: 0; letter-spacing: -.005em; font-weight: 700; } .topbar .back-btn { width: 40px; height: 40px; border-radius: var(--radius-pill); background: var(--surface-2); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--text); } .topbar-actions { display: flex; gap: 8px; } .icon-btn { width: 40px; height: 40px; border-radius: var(--radius-pill); background: var(--surface-2); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--text); } /* ===== Ana gezinme: mobil/tablette ALT SEKME ÇUBUĞU, masaüstünde SOL KENAR ÇUBUĞU ===== Tek bir bileşen (bkz. js/components/ui.js -> bottomNav()), yalnızca CSS ile genişliğe göre yeniden şekillenir — admin-shell'in zaten kullandığı desenle tutarlı (bkz. .admin-sidebar). < 960px: yatay, sabit-alt sekme çubuğu (marka gizli, yalnızca ikon+etiket sekmeleri). */ .bottom-nav { position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); width: 100%; max-width: var(--content-max); display: flex; background: var(--header-bg); border-top: 1px solid var(--border); padding: 8px 6px calc(8px + env(safe-area-inset-bottom)); z-index: 20; } .nav-brand { display: none; } .nav-items-primary, .nav-items-action { display: contents; } .nav-item { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px 1px; background: none; border: none; cursor: pointer; color: var(--header-text-dim); font-size: 10.5px; font-weight: 600; border-radius: var(--radius-sm); min-height: 48px; justify-content: center; min-width: 0; } .nav-item span:last-child { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .nav-item .nav-icon { line-height: 1; display: flex; align-items: center; justify-content: center; } .nav-item.active { color: var(--accent); } .nav-item:hover { background: var(--surface-2); } .nav-item.active:hover { background: color-mix(in srgb, var(--accent) 12%, var(--surface)); } /* KokonutUI Smooth Tab yaklaşımının bağımlılıksız karşılığı: gösterge tek bir compositor katmanında transform ile kayar; rota değişmeden hemen önce hedef sekmeye ulaşır. */ .smooth-tab-indicator { position: absolute; left: 0; top: 0; z-index: 0; width: var(--smooth-tab-w, 0); height: var(--smooth-tab-h, 0); border-radius: var(--radius-md); background: color-mix(in srgb, var(--accent) 13%, var(--surface)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 18%, transparent); transform: translate3d(var(--smooth-tab-x, 0), var(--smooth-tab-y, 0), 0); pointer-events: none; opacity: 0; } .bottom-nav.smooth-tab-ready .smooth-tab-indicator { opacity: 1; transition: transform .34s cubic-bezier(.2,.8,.2,1), width .24s ease, height .24s ease, opacity .16s ease; } .bottom-nav .nav-brand, .bottom-nav .nav-items-primary, .bottom-nav .nav-items-action, .bottom-nav .nav-item { position: relative; z-index: 1; } .nav-item.active { background: transparent; } .nav-item.active:hover { background: transparent; } .nav-item.active .nav-icon { transform: translateY(-1px) scale(1.06); } .nav-icon { transition: transform .28s cubic-bezier(.2,.8,.2,1); } /* >= 960px: aynı DOM, sol sabit tam-yükseklik kenar çubuğu. .app-shell:has(> .bottom-nav) ile içerik alanı kenar çubuğu kadar içeri kaydırılır (bkz. aşağıdaki .app-shell kuralı) — yalnızca ANA uygulama ekranlarında geçerlidir; /admin kendi ayrı kabuğunu kullandığından (adminShell()) bu seçiciyle eşleşmez, dolayısıyla çift boşluk oluşmaz. */ @media (min-width: 960px) { .bottom-nav { position: fixed; top: 0; left: 0; bottom: 0; transform: none; width: 240px; max-width: none; height: 100vh; flex-direction: column; align-items: stretch; padding: 18px 14px calc(18px + env(safe-area-inset-bottom)); border-top: none; border-right: 1px solid var(--border); gap: 4px; z-index: 30; overflow-y: auto; } .nav-brand { display: block; padding: 6px 10px 20px; flex: 0 0 auto; width: 100%; border: 0; background: transparent; color: inherit; text-align: left; cursor: pointer; border-radius: var(--radius-md); } .nav-brand:hover { background: color-mix(in srgb, var(--accent) 7%, transparent); } .nav-brand:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } .nav-items-primary { display: flex; flex-direction: column; gap: 2px; flex: 1; min-height: 0; } .nav-items-action { display: flex; flex-direction: column; margin-top: 10px; padding-top: 12px; border-top: 1px solid var(--border); flex: 0 0 auto; } .nav-item { flex: 0 0 auto; flex-direction: row; justify-content: flex-start; gap: 11px; padding: 10px 12px; font-size: 14px; min-height: 44px; border-radius: var(--radius-md); } .nav-item span:last-child { overflow: visible; text-overflow: clip; white-space: nowrap; } .nav-item.active { background: transparent; font-weight: 700; } /* "Soru Ekle": birincil çalışma akışını gölgede bırakmadan tanımlı bir eylem olarak öne çıkar (görev talimatı) — dolu değil, vurgu renkli anahat (outline) bir buton gibi. */ .nav-item-action { border: 1.5px solid var(--accent); color: var(--accent); font-weight: 700; } .nav-item-action:hover { background: color-mix(in srgb, var(--accent) 10%, var(--surface)); } .nav-item-action.active { background: var(--accent); color: var(--accent-text); } .nav-item-action.active { background: transparent; } } @media (prefers-reduced-motion: reduce) { .bottom-nav.smooth-tab-ready .smooth-tab-indicator, .nav-icon { transition: none; } } /* ===== Avatar Picker ===== */ .avatar-picker { min-width: 0; margin: 0 0 20px; padding: 0; border: 0; text-align: left; } .avatar-picker legend { padding: 0; color: var(--text); font-size: 13px; font-weight: 800; } .avatar-picker__hint { margin: 4px 0 12px; color: var(--text-faint); font-size: 12px; line-height: 1.45; } .avatar-picker__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; } .avatar-option { position: relative; min-width: 0; min-height: 88px; padding: 8px 4px 7px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; border: 1px solid var(--border); border-radius: 16px; background: var(--surface-2); color: var(--text-dim); cursor: pointer; font: inherit; transition: transform .18s ease, border-color .18s ease, background-color .18s ease, box-shadow .18s ease; } .avatar-option > span:not(.profile-avatar) { max-width: 100%; overflow: hidden; text-overflow: ellipsis; font-size: 11px; font-weight: 750; white-space: nowrap; } .avatar-option:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); } .avatar-option:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .avatar-option.is-selected { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--surface)); box-shadow: 0 8px 22px color-mix(in srgb, var(--accent) 16%, transparent); } .avatar-option__check { position: absolute; top: 5px; right: 5px; width: 19px; height: 19px; display: grid; place-items: center; border-radius: 50%; background: var(--accent); color: var(--accent-text); opacity: 0; transform: scale(.55) rotate(-12deg); transition: transform .2s cubic-bezier(.2,.8,.2,1), opacity .15s ease; } .avatar-option.is-selected .avatar-option__check { opacity: 1; transform: scale(1) rotate(0); } .profile-avatar { --avatar-size: 64px; position: relative; isolation: isolate; width: var(--avatar-size); height: var(--avatar-size); flex: 0 0 var(--avatar-size); display: inline-grid; place-items: center; overflow: hidden; border-radius: 34%; background: var(--surface-3); border: 1px solid color-mix(in srgb, #fff 22%, var(--border)); box-shadow: inset 0 0 0 1px rgba(255,255,255,.12), 0 8px 20px rgba(12,20,28,.22); } .profile-avatar__image { width:100%; height:100%; display:block; object-fit:cover; transform:scale(1.015); transition:transform .24s ease; } .avatar-option:hover .profile-avatar__image { transform:scale(1.065); } .profile-avatar-stage { margin: 0 auto 14px; animation: avatarSettle .42s cubic-bezier(.2,.8,.2,1); } @keyframes avatarSettle { from { opacity:0; transform:translateY(8px) scale(.92); } to { opacity:1; transform:none; } } .profile-avatar-edit { min-height:44px; margin:14px auto 0; padding:9px 12px; display:inline-flex; align-items:center; gap:7px; border:1px solid var(--border); border-radius:var(--radius-pill); background:var(--surface-2); color:var(--accent); font:inherit; font-size:12px; font-weight:800; cursor:pointer; } .profile-avatar-edit:hover { border-color:var(--accent); } .profile-avatar-editor { margin-top:18px; padding-top:18px; border-top:1px solid var(--border); animation: avatarEditorIn .24s ease both; } .profile-avatar-editor[hidden] { display:none; } .profile-avatar-editor .avatar-picker { margin-bottom:14px; } .profile-avatar-editor .avatar-picker__grid { grid-template-columns:repeat(4,minmax(0,1fr)); } .profile-avatar-actions { display:flex; gap:8px; } .profile-avatar-actions .btn { min-height:44px; padding:10px; font-size:13px; } @keyframes avatarEditorIn { from { opacity:0; transform:translateY(-6px); } to { opacity:1; transform:none; } } @media (max-width: 640px) { .avatar-picker__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; } .avatar-option { min-height: 82px; padding-inline: 3px; } .avatar-option .profile-avatar { --avatar-size: 50px !important; } } @media (max-width: 380px) { .avatar-picker__grid { gap:5px; } .avatar-option { min-height:78px; padding-inline:2px; } .avatar-option .profile-avatar { --avatar-size: 46px !important; } .avatar-option > span:not(.profile-avatar) { font-size:9px; } } @media (prefers-reduced-motion: reduce) { .avatar-option, .avatar-option__check, .profile-avatar-stage, .profile-avatar-editor { animation:none; transition:none; } } /* Ana uygulama ekranları (admin HARİÇ — bkz. yukarıdaki not), >= 960px'te kenar çubuğu kadar içeri kayar. `:has()` yalnızca gerçekten bir .bottom-nav alt-öğesi olduğunda eşleşir. */ @media (min-width: 960px) { .app-shell:has(> .bottom-nav) { padding-left: 240px; } } /* ===== Cards ===== */ .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 16px; box-shadow: var(--shadow-sm); } .card + .card { margin-top: 12px; } .card-title { font-size: 13px; font-weight: 700; color: var(--text-faint); text-transform: uppercase; letter-spacing: .05em; margin: 0 0 10px; } .section { margin-top: 20px; } .section:first-child { margin-top: 0; } .section-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 10px; } .section-head h2 { font-size: 16px; margin: 0; } .section-head .link { font-size: 13px; color: var(--accent); cursor: pointer; background: none; border: none; font-family: inherit; } /* ===== Buttons ===== */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 13px 18px; border-radius: var(--radius-md); border: 1px solid var(--border); background: var(--surface-2); color: var(--text); font-size: 15px; font-weight: 600; cursor: pointer; width: 100%; min-width: 0; min-height: 48px; white-space: normal; overflow-wrap: break-word; text-align: center; line-height: 1.3; transition: transform .08s ease, opacity .15s ease; } .btn:active { transform: scale(.98); } /* Varsayılan (sınıfsız ikinci düzey) düğme görsel olarak "ikincil buton"dur — bkz. yukarıdaki --btn-secondary-* token'ları; bir preset/özel tema bunu --accent'ten bağımsız ayarlayabilir. */ .btn { background: var(--btn-secondary-bg); color: var(--btn-secondary-text); border-color: var(--btn-secondary-border); } .btn:hover { background: var(--btn-secondary-hover); } .btn-primary { background: var(--btn-primary-bg); color: var(--btn-primary-text); border-color: transparent; } .btn-primary:hover { background: var(--btn-primary-hover); } .btn-primary:active { background: var(--btn-primary-active); } .btn-outline { background: transparent; color: var(--btn-secondary-text); border-color: var(--btn-secondary-border); } .btn-outline:hover { background: var(--surface-2); } .btn-ghost { background: transparent; border-color: transparent; color: var(--accent); } .btn-ghost:hover { background: var(--surface-2); } .btn-danger { background: var(--bad); color: var(--paper-0); border-color: transparent; } .btn-sm { padding: 9px 14px; font-size: 13px; min-height: 38px; width: auto; } .btn-row { display: flex; gap: 10px; } .btn-row .btn { width: auto; flex: 1; } .btn:disabled { opacity: var(--disabled-opacity); cursor: not-allowed; } .btn:disabled:hover { background: var(--btn-secondary-bg); } .btn-primary:disabled:hover { background: var(--btn-primary-bg); } /* ===== Odak durumları (klavye/erişilebilirlik) ===== */ :focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; border-radius: 4px; } .btn:focus-visible, .chip:focus-visible, .option:focus-visible, .icon-btn:focus-visible, .back-btn:focus-visible, .nav-item:focus-visible, .card[data-nav-path]:focus-visible, .quick-card:focus-visible { outline-offset: 2px; } /* ===== Quick-start grid ===== Sabit 2/3 sütun (auto-fill DEĞİL) — geniş masaüstünde 6 kart tek satıra sığıp yedinci kartın kendi başına yeni bir satıra düşmesi (görev talimatındaki "orphan card" hatası) yerine, öğe sayısına göre HER ZAMAN dengeli bir ızgara üretir (6 öğe / 3 sütun = 2x3). */ .quick-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; } @media (min-width: 480px) { .quick-grid { grid-template-columns: repeat(3, 1fr); } } .quick-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 16px 14px; text-align: left; cursor: pointer; display: flex; flex-direction: column; gap: 10px; min-height: 118px; color: var(--text); transition: border-color .12s ease, box-shadow .12s ease, transform .08s ease; } .quick-card:hover { border-color: var(--text-faint); box-shadow: var(--shadow-sm); } .quick-card:active { transform: scale(.99); } /* .qc-icon taban stili yalnızca .quick-card altında DEĞİL, aynı sınıfı kullanan her yerde (bkz. js/screens/topicSelect.js -> subjectStep, .card satırlarındaki ders ikon rozeti) geçerli olacak şekilde buraya taşındı — önceden yalnızca `.quick-card .qc-icon` seçicisi vardı, bu yüzden .quick-card ATASI OLMAYAN kullanımlarda (topicSelect.js) ikon kendi 38-42px kutusunun içinde ORTALANMIYOR, varsayılan blok akışıyla sol-üst köşeye yapışıyordu ("too small and stuck near top-left" hatası). Boyut hâlâ `.quick-card .qc-icon` ile (veya satır-içi style ile, ör. topicSelect.js) override edilebilir. */ .qc-icon { display: flex; align-items: center; justify-content: center; border-radius: 10px; flex: 0 0 auto; } .quick-card .qc-icon { width: 38px; height: 38px; } .quick-card .qc-label { font-size: 14px; font-weight: 700; line-height: 1.25; } .quick-card .qc-sub { font-size: 12px; color: var(--text-faint); margin-top: 3px; line-height: 1.4; } /* ===== Chips / badges ===== */ .chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: var(--radius-pill); background: var(--surface-2); border: 1px solid var(--border); font-size: 12.5px; font-weight: 600; cursor: pointer; color: var(--text); min-height: 32px; } .chip.selected { background: var(--accent); color: var(--accent-text); border-color: transparent; } .chip-row { display: flex; gap: 8px; flex-wrap: wrap; } .goal-picker { margin-top: 8px; } .goal-picker .chip { min-height: 44px; padding-inline: 14px; } .goal-custom-field { margin-top: 12px; padding: 12px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface-2); } .goal-custom-field > label { display: block; margin-bottom: 7px; color: var(--text-dim); font-size: 12.5px; font-weight: 700; } .goal-custom-input { position: relative; max-width: 220px; } .goal-custom-input input { width: 100%; min-height: 48px; padding-right: 58px; font-variant-numeric: tabular-nums; } .goal-custom-input > span { position: absolute; top: 50%; right: 14px; transform: translateY(-50%); color: var(--text-faint); font-size: 12px; font-weight: 750; pointer-events: none; } .goal-helper { margin: 7px 0 0; color: var(--text-faint); font-size: 11.5px; line-height: 1.45; } .daily-goal-row strong { color: var(--text); font-variant-numeric: tabular-nums; } .badge { display: inline-flex; align-items: center; padding: 3px 9px; border-radius: var(--radius-pill); font-size: 11px; font-weight: 700; } .badge-ok { background: color-mix(in srgb, var(--ok) 16%, var(--surface)); color: var(--ok); } .badge-warn { background: color-mix(in srgb, var(--warn) 16%, var(--surface)); color: var(--warn); } .badge-bad { background: color-mix(in srgb, var(--bad) 16%, var(--surface)); color: var(--bad); } .badge-neutral { background: var(--surface-3); color: var(--text-dim); } .dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; } /* ===== Stat tiles ===== */ .stat-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; } /* Genişçe ve içerik-güdümlü stat gruplarında (ör. admin kullanıcı kartı istatistikleri) sabit 3 sütun yerine mevcut genişliğe göre esner — dar admin kartlarında bile taşmaz. */ .stat-grid.stat-grid--fluid { grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)); } .stat-tile { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 12px 10px; text-align: center; } .stat-tile .stat-value { font-size: 20px; font-weight: 800; letter-spacing: -.02em; } .stat-tile .stat-label { font-size: 10.5px; color: var(--text-faint); margin-top: 3px; text-transform: uppercase; letter-spacing: .04em; } /* ===== Progress bars / rings ===== */ .bar-track { height: 8px; border-radius: 6px; background: var(--surface-3); overflow: hidden; } .bar-fill { height: 100%; border-radius: 6px; } .bar-row { display: flex; align-items: center; gap: 10px; margin: 8px 0; } .bar-row .bar-label { flex: 0 0 90px; font-size: 12.5px; color: var(--text-dim); } .bar-row .bar-track { flex: 1; } .bar-row .bar-pct { flex: 0 0 40px; text-align: right; font-size: 12.5px; font-weight: 700; } .weak-topic-row { padding-bottom: 10px; margin-bottom: 10px; border-bottom: 1px solid var(--border); } .weak-topic-row:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; } .weak-topic-row .btn { width: 100%; } /* ===== Question card ===== */ .q-meta { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 10px; } .q-text { font-family: var(--font-serif); font-size: 17px; line-height: 1.6; margin: 4px 0 16px; white-space: pre-wrap; } .q-passage { background: var(--surface-2); border-left: 3px solid var(--accent); padding: 12px 14px; border-radius: var(--radius-sm); font-family: var(--font-serif); font-size: 15.5px; line-height: 1.65; margin-bottom: 14px; color: var(--text-dim); white-space: pre-wrap; } .q-visual { background: var(--surface-2); border: 1px dashed var(--border); border-radius: var(--radius-sm); padding: 14px; margin-bottom: 14px; font-size: 13px; color: var(--text-dim); overflow-x: auto; overflow-y: visible; max-width: 100%; min-width: 0; box-sizing: border-box; } .q-visual table { max-width: 100%; } .q-visual th, .q-visual td { overflow-wrap: anywhere; word-break: break-word; line-height: 1.45; vertical-align: top; } .option-list { display: flex; flex-direction: column; gap: 10px; } .option { display: flex; align-items: center; gap: 12px; padding: 13px 14px; border-radius: var(--radius-md); border: 1.5px solid var(--border); background: var(--surface); cursor: pointer; text-align: left; font-size: 15px; line-height: 1.45; color: var(--text); min-height: 48px; transition: border-color .12s ease, background-color .12s ease; } .option:hover:not(:disabled) { border-color: var(--text-faint); } .option .opt-letter { width: 27px; height: 27px; border-radius: 50%; flex: 0 0 27px; background: var(--surface-2); display: flex; align-items: center; justify-content: center; font-size: 12.5px; font-weight: 700; border: 1px solid var(--border); } .option.selected { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, var(--surface)); } .option.selected .opt-letter { background: var(--accent); color: var(--accent-text); border-color: transparent; } .option.correct { border-color: var(--ok); background: color-mix(in srgb, var(--ok) 14%, var(--surface)); } .option.correct .opt-letter { background: var(--ok); color: var(--paper-0); border-color: transparent; } .option.correct::after { content: "✓"; margin-left: auto; color: var(--ok); font-weight: 800; flex: 0 0 auto; } .option.incorrect { border-color: var(--bad); background: color-mix(in srgb, var(--bad) 12%, var(--surface)); } .option.incorrect .opt-letter { background: var(--bad); color: var(--paper-0); border-color: transparent; } .option.incorrect::after { content: "✕"; margin-left: auto; color: var(--bad); font-weight: 800; flex: 0 0 auto; } .option:disabled { cursor: default; } /* ===== Timer / test header ===== */ .test-header { position: sticky; top: 0; z-index: 6; background: var(--bg); padding: 12px 16px 10px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--border); } .timer { font-weight: 800; font-size: 16px; flex: 0 0 auto; } .timer.low { color: var(--bad); } .progress-mini { flex: 1; margin: 0 10px; min-width: 20px; } .test-finish-btn { flex: 0 0 auto; width: auto; padding: 7px 12px; font-size: 12px; display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; min-height: 0; } .qnav-strip { display: flex; gap: 6px; overflow-x: auto; padding: 10px 16px; scrollbar-width: none; } .qnav-strip::-webkit-scrollbar { display: none; } .qnav-dot { flex: 0 0 34px; height: 34px; border-radius: 9px; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; cursor: pointer; background: var(--surface-2); border: 1px solid var(--border); color: var(--text-dim); position: relative; } .qnav-dot.current { border-color: var(--accent); color: var(--accent); border-width: 2px; } .qnav-dot.answered { background: var(--surface-3); color: var(--text); } .qnav-dot.flagged::after { content: ""; position: absolute; top: -3px; right: -3px; width: 8px; height: 8px; border-radius: 50%; background: var(--amber); border: 1.5px solid var(--bg); } .qnav-dot.skipped { border-style: dashed; } /* Adaptif testte henüz materyalize edilmemiş (kilitli) soru yer tutucuları — içerik/zorluk/ konu asla sızdırılmaz, yalnızca bir sayı/konum bilgisi olmadan kilitli bir simge gösterilir. */ .qnav-dot.locked { background: transparent; border-style: dashed; color: var(--text-faint); cursor: default; opacity: .6; } /* ===== Ders içi ilerleme satırı (bkz. görev talimatı "Diagnostic progress and state preservation") — yalnızca ders-bloklu diagnostik sınavda (js/utils/testGenerator.js -> buildDiagnosticTest) gösterilir; diğer test modlarında (konu/karma/zayıflık) hiç render edilmez. */ .subject-progress-row { display: flex; align-items: center; gap: 10px; padding: 8px 16px 2px; } .subject-progress-name { font-size: 12.5px; font-weight: 700; color: var(--text); flex: 0 0 auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 46%; } .subject-progress-count { font-size: 11.5px; color: var(--text-faint); flex: 0 0 auto; white-space: nowrap; } .subject-progress-bar { flex: 1; min-width: 30px; } /* ===== Ders geçiş ekranı (bkz. js/components/subjectTransition.js, görev talimatı "Subject transition animations") — tam ekran, kısa, aktif temanın renklerinden türetilir; asla bir soru olarak sayılmaz/puanı etkilemez. */ .subject-transition { position: fixed; inset: 0; z-index: 50; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; text-align: center; padding: 32px; background: linear-gradient(160deg, color-mix(in srgb, var(--accent) 16%, var(--bg)), var(--bg)); animation: subjectTransitionFade .35s var(--ease-standard); } .subject-transition-icon { width: 84px; height: 84px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--accent) 18%, var(--surface)); color: var(--accent); animation: subjectTransitionPop .5s var(--ease-standard); } .subject-transition-title { font-size: 22px; margin: 4px 0 0; color: var(--text); } .subject-transition-message { color: var(--text-dim); max-width: 320px; margin: 0; font-size: 15px; line-height: 1.5; } .subject-transition-sub { color: var(--text-faint); font-size: 12px; margin: 0; text-transform: uppercase; letter-spacing: .05em; } .subject-transition-btn { width: auto; padding-left: 26px; padding-right: 26px; margin-top: 10px; } @keyframes subjectTransitionFade { from { opacity: 0; } to { opacity: 1; } } @keyframes subjectTransitionPop { from { transform: scale(.7); opacity: 0; } to { transform: scale(1); opacity: 1; } } @media (prefers-reduced-motion: reduce) { .subject-transition, .subject-transition-icon { animation: none; } } .test-footer { position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); width: 100%; max-width: var(--content-max); background: var(--surface); border-top: 1px solid var(--border); padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); display: flex; gap: 8px; z-index: 20; } .test-footer .btn { padding: 12px; font-size: 13.5px; } /* NOT: Test ekranları (testTaking.js/adaptiveTest.js) kasıtlı olarak bottomNav() İÇERMEZ (testin ortasında yanlışlıkla başka bir sekmeye geçilmesini önlemek için, mevcut/önceki bir tasarım kararı) — bu yüzden .test-footer hiçbir zaman kenar çubuğuyla AYNI ekranda görünmez; yeniden ortalama gerekmez. */ /* ===== Onboarding ===== */ .onboard-wrap { min-height: 100vh; width: 100%; min-width: 0; max-width: 100%; display: flex; flex-direction: column; padding: 28px 22px; } .onboard-hero { text-align: center; margin: 12px 0 28px; width: 100%; min-width: 0; max-width: 100%; } .onboard-hero h1, .onboard-hero p { max-width: 100%; overflow-wrap: break-word; word-break: break-word; } .onboard-brand { display: flex; justify-content: center; margin: 0 auto 18px; } .onboard-hero h1 { font-family: var(--font-serif); font-size: 24px; margin: 0 0 6px; font-weight: 700; } .onboard-hero p { color: var(--text-faint); font-size: 14px; margin: 0; } /* ===== 404 (SPA bilinmeyen rota) ===== */ .notfound-wrap { justify-content: center; align-items: center; text-align: center; } .notfound-wrap .onboard-hero { margin-bottom: 8px; } .notfound-code { font-family: var(--font-serif); font-size: 56px; font-weight: 700; letter-spacing: 3px; color: var(--accent); opacity: .45; margin: 0 0 4px; } .notfound-actions { display: flex; justify-content: center; margin-top: 6px; } .field { margin-bottom: 16px; } .field label { display: block; font-size: 12.5px; color: var(--text-faint); margin-bottom: 6px; font-weight: 600; } .field input, .field select { width: 100%; padding: 13px 14px; border-radius: var(--radius-md); background: var(--input-bg); border: 1px solid var(--border); color: var(--surface-text); font-family: inherit; font-size: 16px; } .field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; } .input-with-action { position: relative; } .input-with-action input { padding-right: 44px; } .input-action-btn { position: absolute; top: 50%; right: 4px; transform: translateY(-50%); display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: var(--radius-sm); background: none; border: none; color: var(--text-faint); cursor: pointer; } .input-action-btn:hover { color: var(--text-dim); background: var(--surface-2); } .input-action-btn:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; } /* ===== Kendi Testini Hazırla ===== */ .custom-test-row { border-left: 3px solid color-mix(in srgb, var(--accent) 65%, transparent); } .custom-test-row + .custom-test-row { margin-top: 0; } .custom-test-fields { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.5fr) minmax(110px, .55fr); gap: 12px; align-items: start; } .custom-test-fields .field { margin-bottom: 0; } .custom-test-fields select, .custom-test-fields input { min-width: 0; } .custom-test-summary.has-error { border-color: color-mix(in srgb, var(--bad) 45%, var(--border)); } .custom-test-summary.is-ready { border-color: color-mix(in srgb, var(--good) 55%, var(--border)); } .custom-test-total { display: grid; place-items: center; flex: 0 0 46px; width: 46px; height: 46px; border-radius: 50%; background: color-mix(in srgb, var(--accent) 14%, var(--surface)); color: var(--accent); font-weight: 800; font-size: 17px; } .error-text { color: var(--bad); } @media (min-width: 960px) { .custom-test-builder-screen { grid-template-columns: minmax(0, 1fr); grid-auto-flow: row; align-content: start; gap: 20px; max-width: 1040px; } .custom-test-builder-screen > .section--full { grid-column: 1 / -1; } .custom-test-builder-main, .custom-test-builder-aside { margin-top: 0 !important; min-width: 0; } .custom-test-builder-aside { align-self: start; } } @media (min-width: 1200px) { .custom-test-builder-screen { grid-template-columns: minmax(0, 1fr) 340px; column-gap: 24px; row-gap: 20px; } .custom-test-builder-main { grid-column: 1; } .custom-test-builder-aside { grid-column: 2; position: sticky; top: 24px; } } @media (max-width: 720px) { .custom-test-fields { grid-template-columns: 1fr; gap: 2px; } .custom-test-fields .field { margin-bottom: 12px; } } /* ===== Masaüstü kart ritmi ===== Mobil akış değişmez. Geniş ekranda kartlar sabit iki sütunda aynı satır yüksekliğini paylaşır; içerik uzunluğu değişse bile ana eylemler aynı taban çizgisinde kalır. */ @media (min-width: 960px) { /* Masaüstünde genel eylemler daha sakin ve kompakt; mobilde 48px dokunma hedefi korunur. */ .btn { min-height: 42px; padding: 10px 15px; font-size: 14px; } .btn-sm { min-height: 36px; padding: 8px 12px; font-size: 12.5px; } .practice-card, .mastery-subject-card { height: 100%; display: flex; flex-direction: column; } .mastery-subject-card > .btn:last-child { margin-top: auto !important; } .practice-card-action { display: flex; margin-top: auto !important; padding-top: 16px; } .practice-card-action > .btn { width: auto; min-width: 190px; } .mastery-overview-section > .card, .mastery-shortcut-section > .mastery-shortcut-card { height: 100%; } .mastery-shortcut-card { align-items: center; padding: 20px; } } .auth-error { background: color-mix(in srgb, var(--bad) 12%, var(--surface)); color: var(--bad); border: 1px solid color-mix(in srgb, var(--bad) 35%, transparent); border-radius: var(--radius-md); padding: 10px 12px; font-size: 13px; margin-bottom: 14px; } .dot-steps { display: flex; gap: 6px; justify-content: center; margin: 18px 0; } .dot-steps span { width: 7px; height: 7px; border-radius: 50%; background: var(--surface-3); } .link-btn { background: none; border: none; color: var(--accent); font-size: 12.5px; font-weight: 700; padding: 0; cursor: pointer; font-family: inherit; text-decoration: underline; } .auth-toggle-row { text-align: center; margin: 16px 0 0; font-size: 14px; color: var(--text-faint); } .auth-toggle-row .link-btn { font-size: 14px; margin-left: 2px; } /* ===== Onay kutucukları (KVKK / Gizlilik / Kullanım Koşulları) ===== */ .consent-row { display: flex; align-items: flex-start; gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--border); } .consent-row:last-child { border-bottom: none; } .consent-row input[type="checkbox"] { appearance: none; -webkit-appearance: none; flex: 0 0 auto; width: 20px; height: 20px; margin-top: 1px; display: grid; place-content: center; border: 1.5px solid var(--border); border-radius: 6px; background: var(--surface); cursor: pointer; transition: background .12s ease, border-color .12s ease; } .consent-row input[type="checkbox"]:hover { border-color: var(--text-faint); } .consent-row input[type="checkbox"]:checked { background: var(--accent); border-color: var(--accent); } .consent-row input[type="checkbox"]:checked::after { content: ''; width: 5px; height: 9px; border: solid var(--accent-text); border-width: 0 2px 2px 0; transform: rotate(45deg) translate(-1px, -1px); } .consent-row input[type="checkbox"]:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; } .consent-row label { font-size: 13.5px; line-height: 1.5; color: var(--text-dim); cursor: pointer; } .consent-row .link-btn { background: none; border: none; color: var(--accent); font-size: 12.5px; font-weight: 700; padding: 0; margin-top: 4px; cursor: pointer; font-family: inherit; text-decoration: underline; } .field-error { color: var(--bad); font-size: 12px; margin-top: -10px; margin-bottom: 12px; } .field textarea { width: 100%; padding: 13px 14px; border-radius: var(--radius-md); background: var(--input-bg); border: 1px solid var(--border); color: var(--surface-text); font-size: 14.5px; font-family: inherit; line-height: 1.5; resize: vertical; min-height: 80px; } /* ===== Sekmeler (Soru Ekle — Eğitmen/Admin, Admin Paneli) ===== */ .tabs { display: flex; gap: 6px; flex-wrap: nowrap; border-bottom: 1px solid var(--border); margin-bottom: 16px; padding-bottom: 0; } .tab-btn { background: none; border: none; border-bottom: 2px solid transparent; color: var(--text-faint); font-size: 13px; font-weight: 700; font-family: inherit; padding: 10px 4px; cursor: pointer; white-space: nowrap; } .tab-btn.active { color: var(--accent); border-bottom-color: var(--accent); } .tab-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 999px; background: var(--surface-3); color: var(--text-dim); font-size: 10px; font-weight: 800; } .tab-btn.active .tab-badge { background: var(--accent); color: var(--accent-text); } /* ===== Rol rozetleri (bkz. ROLE_SYSTEM.md) ===== */ .role-badge { display: inline-flex; align-items: center; padding: 3px 9px; border-radius: var(--radius-pill); font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; } .role-badge-admin { background: color-mix(in srgb, var(--bad) 16%, var(--surface)); color: var(--bad); } .role-badge-instructor { background: color-mix(in srgb, var(--accent) 16%, var(--surface)); color: var(--accent); } .role-badge-vip { background: color-mix(in srgb, var(--warn) 16%, var(--surface)); color: var(--warn); } .role-badge-user { background: var(--surface-3); color: var(--text-dim); } .trend-up { color: var(--ok); } .trend-down { color: var(--bad); } .trend-flat { color: var(--text-faint); } /* ===== Kocchum kelime markası (wordmark) ===== */ .wordmark { display: inline-grid; align-items: center; line-height: 0; flex: 0 0 auto; } .wordmark-image { grid-area: 1 / 1; display: block; width: 100%; height: auto; } .wordmark-image-dark { display: none; } .wordmark-sm { width: 145px; } .wordmark-md { width: 190px; } .wordmark-lg { width: min(260px, 82vw); } :root:is([data-theme="dark"], [data-theme$="-dark"]) .wordmark-image-light { display: none; } :root:is([data-theme="dark"], [data-theme$="-dark"]) .wordmark-image-dark { display: block; } @media (prefers-color-scheme: dark) { :root:not([data-theme]) .wordmark-image-light { display: none; } :root:not([data-theme]) .wordmark-image-dark { display: block; } } /* ===== Yönetim (Admin) kabuğu — sorumluluğu js/components/ui.js -> adminShell() ===== */ /* Mobil (<768px): yalnızca logo + hamburger görünür; gezinme bağlantıları ("Ayarlar", "Çıkış Yap" dahil) bir açılır çekmecede (drawer), HER ZAMAN ayrı, çakışmayan satırlar halinde listelenir. Tablet (768-959px): yatay, kaydırılabilir üst çubuk (öğeler ASLA sıkışıp üst üste binmez — flex-shrink:0 + nowrap + overflow-x:auto ile kayar). Masaüstü (>=960px): sabit, tam yükseklik sol kenar çubuğu + geniş içerik alanı. */ .admin-shell { display: flex; flex-direction: column; min-height: 100vh; width: 100%; } .admin-sidebar { display: flex; align-items: center; gap: 4px; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); background: var(--surface); border-bottom: 1px solid var(--border); overflow-x: auto; scrollbar-width: none; position: sticky; top: 0; z-index: 20; } .admin-sidebar::-webkit-scrollbar { display: none; } .admin-brand { flex: 0 0 auto; padding: 6px 10px 6px 2px; } .admin-nav { display: flex; gap: 4px; flex: 1; min-width: 0; } .admin-sidebar-footer { flex: 0 0 auto; display: flex; } .admin-nav-item { display: flex; align-items: center; gap: 7px; white-space: nowrap; flex: 0 0 auto; padding: 9px 13px; border-radius: var(--radius-pill); border: 1px solid transparent; background: none; color: var(--text-dim); font-family: inherit; font-size: 13px; font-weight: 700; cursor: pointer; min-height: 44px; } .admin-nav-item:hover { background: var(--surface-2); color: var(--text); } .admin-nav-item.active { background: var(--accent); color: var(--accent-text); } .admin-logout-btn { color: var(--bad); } .admin-logout-btn:hover { background: color-mix(in srgb, var(--bad) 14%, var(--surface)); color: var(--bad); } .admin-main { flex: 1; min-width: 0; display: flex; justify-content: center; } .admin-screen.screen { padding-bottom: 32px; max-width: 720px; width: 100%; } /* Hamburger tetikleyici — yalnızca <768px'te görünür (bkz. aşağıdaki @media (max-width:767px)). */ .admin-menu-btn { display: none; } @media (max-width: 767px) { .admin-sidebar { justify-content: space-between; overflow-x: visible; } .admin-brand { padding: 6px 4px; } .admin-menu-btn { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; flex: 0 0 auto; border-radius: var(--radius-pill); background: var(--surface-2); border: 1px solid var(--border); color: var(--text); cursor: pointer; } /* Mobilde gezinme + çıkış, sidebar'ın kendisinde DEĞİL, ayrı bir çekmecede gösterilir. */ .admin-nav, .admin-sidebar-footer { display: none; } .admin-drawer-overlay { position: fixed; inset: 0; background: var(--overlay); z-index: 85; display: flex; justify-content: flex-end; } .admin-drawer-overlay[hidden] { display: none; } .admin-drawer { width: min(84vw, 320px); height: 100%; background: var(--surface); border-left: 1px solid var(--border); padding: 16px 14px calc(16px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 4px; overflow-y: auto; animation: drawerIn .18s ease; } @keyframes drawerIn { from { transform: translateX(12px); opacity: .6; } to { transform: none; opacity: 1; } } @media (prefers-reduced-motion: reduce) { .admin-drawer { animation: none; } } .admin-drawer-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; } .admin-drawer .admin-nav-item { width: 100%; justify-content: flex-start; min-height: 48px; } .admin-drawer .admin-sidebar-footer { display: flex; margin-top: 8px; padding-top: 10px; border-top: 1px solid var(--border); } } @media (min-width: 768px) and (max-width: 959px) { .admin-nav-item span { font-size: 12.5px; } } @media (min-width: 960px) { .admin-shell { flex-direction: row; } .admin-sidebar { flex-direction: column; align-items: stretch; justify-content: flex-start; width: 240px; flex: 0 0 240px; height: 100vh; position: sticky; top: 0; border-bottom: none; border-right: 1px solid var(--border); padding: 20px 14px; overflow-x: visible; overflow-y: auto; } .admin-brand { padding: 4px 10px 22px; } .admin-nav { flex-direction: column; gap: 2px; } .admin-nav-item { justify-content: flex-start; width: 100%; } .admin-sidebar-footer { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--border); } .admin-main { padding: 8px 24px; } .admin-screen.screen { max-width: 880px; padding-top: 8px; } } @media (min-width: 1280px) { .admin-screen.screen { max-width: 1080px; } } /* ===== Admin içerik grid'i (Kullanıcı Listesi / Soru İnceleme) ===== Kullanıcı kartları artık masaüstünde tek dar sütuna sıkışmak yerine mevcut genişliği kullanır; uzun kullanıcı adı/e-posta zaten .dim.small üzerindeki ellipsis ile taşmadan kesilir (bkz. js/screens/adminPanel.js -> usersSection, title attribute eklenmiştir). */ .admin-card-grid { display: grid; grid-template-columns: 1fr; gap: 12px; } @media (min-width: 640px) { .admin-card-grid { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); } } .admin-card-grid > .card { margin-top: 0; min-width: 0; } /* Genel amaçlı kart grid'i (Akıllı Puan ders kartları, Sınavlar geçmiş listesi vb.) — admin-card-grid ile aynı davranış, admin dışı ekranlarda kullanılmak üzere genel adla. */ .card-grid { display: grid; grid-template-columns: 1fr; gap: 12px; align-items: stretch; } @media (min-width: 640px) { .card-grid { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); } } .card-grid > .card { margin-top: 0; min-width: 0; height: 100%; } /* ===== Modal ===== */ .modal-overlay { position: fixed; inset: 0; background: var(--overlay); z-index: 80; display: flex; align-items: flex-end; justify-content: center; padding: 0; animation: toastIn .15s ease; } .modal-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg) var(--radius-lg) 0 0; width: 100%; max-width: 480px; max-height: 82vh; overflow-y: auto; padding: 20px 20px 24px; box-shadow: var(--shadow-md); } @media (min-width: 560px) { .modal-overlay { align-items: center; } .modal-card { border-radius: var(--radius-lg); max-height: 78vh; } } .modal-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; } .modal-header h3 { font-size: 16px; margin: 0; font-weight: 700; } .modal-body { font-family: var(--font-serif); font-size: 14.5px; line-height: 1.65; color: var(--text-dim); white-space: pre-wrap; } .dot-steps span.active { background: var(--accent); width: 20px; border-radius: 4px; } /* ===== Yıkıcı işlem onay diyaloğu (bkz. js/components/ui.js -> openConfirmDialog) ===== */ .confirm-overlay { align-items: center; padding: 16px; } .confirm-card { border-radius: var(--radius-lg); max-height: 90vh; text-align: left; max-width: 420px; padding: 24px 22px 20px; } .confirm-icon { width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-bottom: 12px; } .confirm-icon-danger { background: color-mix(in srgb, var(--bad) 16%, var(--surface)); color: var(--bad); } .confirm-title { font-size: 17px; margin: 0 0 8px; font-weight: 700; } .confirm-message { font-size: 14px; line-height: 1.55; color: var(--text-dim); margin: 0 0 4px; } .confirm-details { margin-top: 12px; padding: 11px 13px; background: var(--surface-2); border-radius: var(--radius-sm); font-size: 13.5px; line-height: 1.5; } .confirm-target strong { color: var(--text); } .confirm-error { margin-top: 12px; padding: 9px 12px; border-radius: var(--radius-sm); background: color-mix(in srgb, var(--bad) 12%, var(--surface)); color: var(--bad); font-size: 12.5px; } .confirm-error[hidden] { display: none; } .confirm-actions { display: flex; gap: 10px; margin-top: 18px; } .confirm-actions .btn { width: auto; flex: 1; } @media (max-width: 420px) { .confirm-actions { flex-direction: column-reverse; } } .btn-spinner { display: inline-block; width: 14px; height: 14px; border-radius: 50%; border: 2px solid rgba(255,255,255,.4); border-top-color: currentColor; animation: spin .7s linear infinite; vertical-align: -2px; } @media (prefers-reduced-motion: reduce) { .btn-spinner { animation-duration: .001ms !important; } } /* ===== Metin+ikon tehlikeli eylem düğmesi (ör. "Hesabı Sil" — normal eylemlerin yanında görsel olarak baskın olmaması gerekir, bkz. Kocchum fazı Faz 2 UI gereksinimleri) ===== */ .btn-text-danger { display: inline-flex; align-items: center; gap: 6px; justify-content: center; width: 100%; background: none; border: 1px solid transparent; border-radius: var(--radius-sm); color: var(--bad); font-family: inherit; font-size: 12.5px; font-weight: 700; padding: 9px 10px; cursor: pointer; min-height: 40px; } .btn-text-danger:hover { background: color-mix(in srgb, var(--bad) 10%, var(--surface)); } /* ===== Empty / error / loading states ===== */ .state-block { text-align: center; padding: 44px 20px; color: var(--text-faint); } .state-block .state-icon { width: 64px; height: 64px; margin: 0 auto 14px; border-radius: 50%; background: var(--surface-2); display: flex; align-items: center; justify-content: center; color: var(--text-faint); } .state-block .illustration { margin: 0 auto 10px; display: block; } .state-block h3 { color: var(--text); font-size: 16px; margin: 0 0 6px; font-weight: 700; } .state-block p { font-size: 13.5px; margin: 0 auto 16px; line-height: 1.55; max-width: 320px; } .skeleton { background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface-3) 37%, var(--surface-2) 63%); background-size: 400% 100%; animation: shimmer 1.4s ease infinite; border-radius: var(--radius-sm); } @keyframes shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } } .spinner { width: 22px; height: 22px; border-radius: 50%; border: 3px solid var(--surface-3); border-top-color: var(--accent); animation: spin .7s linear infinite; margin: 0 auto; } @keyframes spin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .skeleton, .spinner { animation-duration: .001ms !important; } } /* ===== Toast ===== */ .toast { position: fixed; left: 50%; bottom: 90px; transform: translateX(-50%); background: var(--surface-3); color: var(--text); padding: 11px 18px; border-radius: var(--radius-pill); font-size: 13.5px; box-shadow: var(--shadow-md); z-index: 60; border: 1px solid var(--border); animation: toastIn .2s ease; } @keyframes toastIn { from { opacity: 0; transform: translate(-50%, 8px);} to { opacity:1; transform: translate(-50%,0);} } /* ===== Utility ===== */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } .flex { display: flex; } .flex-col { display: flex; flex-direction: column; } .gap-6 { gap: 6px; } .gap-8 { gap: 8px; } .gap-10 { gap: 10px; } .gap-12 { gap: 12px; } .between { justify-content: space-between; } .center { align-items: center; } .muted { color: var(--text-faint); } .dim { color: var(--text-dim); } .small { font-size: 12.5px; } .mt-0 { margin-top: 0; } .mt-4 { margin-top: 4px; } .mt-8 { margin-top: 8px; } .mt-12 { margin-top: 12px; } .mt-16 { margin-top: 16px; } .mt-20 { margin-top: 20px; } .mb-8 { margin-bottom: 8px; } .mb-0 { margin-bottom: 0; } .text-center { text-align: center; } .divider { height: 1px; background: var(--border); margin: 14px 0; } .scroll-x { overflow-x: auto; } .tag-list { display: flex; gap: 6px; flex-wrap: wrap; } .list-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 13px 4px; border-bottom: 1px solid var(--border); cursor: pointer; } .list-row:last-child { border-bottom: none; } .switch-row { display: flex; align-items: center; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid var(--border); } .switch-row:last-child { border-bottom: none; } .switch { width: 44px; height: 26px; border-radius: 999px; background: var(--surface-3); position: relative; cursor: pointer; flex: 0 0 44px; border: none; } .switch::after { content: ""; position: absolute; width: 20px; height: 20px; border-radius: 50%; background: var(--paper-0); top: 3px; left: 3px; transition: transform .15s ease; } .switch.on { background: var(--accent); } .switch.on::after { transform: translateX(18px); } @media (prefers-reduced-motion: reduce) { .switch::after { transition: none; } } /* ===== "Sistem Ayarını Kullan" alt seçici — vurgu ailesi rozetleri (bkz. js/screens/ settings.js -> accentFamilyPickerHtml) ===== Tema açılır listesi yeniden yazılırken (bkz. görev talimatı önceki turu) bu iki sınıf YANLIŞLIKLA silinmişti — accentFamilyPickerHtml() hâlâ bunları üretiyordu, bu yüzden `.accent-swatch-btn` HİÇBİR position değeri almadan render ediliyordu. Sonuç: aktif aile rozetinin içindeki onay işareti (`position:absolute; inset:0` satır-içi stili — bkz. settings.js) kendi düğmesini (artık pozisyonlanmamış) DEĞİL, bir sonraki gerçekten konumlandırılmış atadaki `.app-shell`'i (`position:relative`, tam sayfa yüksekliğinde) konumlandırma bağlamı olarak kullanıyor ve TÜM UYGULAMAYI KAPLAYAN görünmez bir katman oluşturuyordu — tema açılır listesinin tetikleyicisi dahil her tıklamayı yutuyordu (bkz. görev talimatı "does not open" hatasının kök nedeni). Düzeltme: `.accent-swatch-btn`'e `position: relative` GERİ verilir, böylece onay işareti yalnızca kendi 44×44 düğmesini kaplar. */ .accent-swatch-list { display: flex; gap: 8px; flex-wrap: wrap; } .accent-swatch-btn { width: 44px; height: 44px; border-radius: 50%; border: 2px solid var(--border); cursor: pointer; padding: 0; position: relative; flex: 0 0 auto; } /* ===== Tema seçici — özel açılır liste (bkz. js/components/themeDropdown.js, görev talimatı "Visual theme dropdown") ===== Kapalıyken aktif temanın adını + küçük bir renk önizlemesini + açık bir açılır ok göstergesini gösteren TEK bir düğme (asla düz metin/basit