/* ============================================================ base.css — reset + tasarım değişkenleri (token'lar) Renk / font / boşluk değiştirmek istersen tek yer burası. ============================================================ */ :root { /* --- Renkler --- Parantezdeki değerler --bg zeminine karşı kontrast oranı. WCAG AA normal metin için 4.5:1, AAA için 7:1 ister. */ --bg: #101214; /* ana zemin (tüm paneller aynı) */ --fg: #f2f4f6; /* birincil yazı (17.0:1) */ --fg-dim: #9aa3ad; /* ikincil: açıklama, log (7.3:1) */ --fg-faint: #7d8792; /* üçüncül: versiyon, boş liste (5.1:1) */ --line: #4d555e; /* dekoratif: çizgiler, noktalar, kenarlıklar */ --surface: #1b1f23; /* menü hover zemini */ --cell-off: #242930; /* koleksiyon: çıkmamış kare */ --cell-on: #7d8792; /* koleksiyon: çıkmış kare */ --focus: #7aa2ff; /* klavye odak halkası */ /* --- Fontlar --- Latin harfler sistem fontundan gelir; tarayıcı yazı tipini harf harf seçtiği için sadece Japonca karakterler "Noto Sans JP"ye düşer. O yüzden JP fontu listede sona yakın duruyor — Latin metnin görünümü değişmesin diye. Font index.html'de Google Fonts'tan yükleniyor ve unicode-range sayesinde yalnızca Japonca gösterilirken indiriliyor. */ --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans JP", "Hiragino Sans", "Yu Gothic UI", Meiryo, sans-serif; --font-log: ui-monospace, SFMono-Regular, Menlo, Consolas, "Noto Sans JP", "Hiragino Sans", "Yu Gothic UI", Meiryo, monospace; /* --- Yazı ölçeği --- Japonca karakterler aynı puntoda Latin harflerden daha yoğun ve küçük görünür (bir karede çok daha fazla çizgi var). Dil jp'ye geçince yazılar bu katsayı kadar büyür — sadece punto, yerleşim ölçüleri sabit kalır. Daha büyük/küçük istersen tek değişecek yer burası. */ --text-scale: 1; /* --- Ölçüler --- */ --gap: clamp(1.25rem, 3vw, 2.5rem); /* sütunlar arası boşluk */ --pad: clamp(1.25rem, 2.5vw, 2rem); /* panel iç boşluğu */ --slot-row: 3.25rem; /* slot satır yüksekliği (JS bunu ölçer) */ --radius: 6px; } /* Japonca seçiliyken yazılar büyür. i18n.js dil değişince değerini güncellediği için ek bir sınıfa gerek yok — :lang(ja) kendiliğinden eşleşir. */ :root:lang(ja) { --text-scale: 1.18; } /* --- Reset --- */ *, *::before, *::after { box-sizing: border-box; } html, body, h1, h2, h3, p, ol, ul, li, figure, blockquote { margin: 0; padding: 0; } ol, ul { list-style: none; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { min-height: 100dvh; background: var(--bg); color: var(--fg); font-family: var(--font); font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; } a { color: inherit; text-decoration: none; } /* --- Ortak yardımcılar --- */ /* Bölme başlıkları — mobilde sekmelerin yerine geçer (Koleksiyon / Kayıt / Hakkında) */ .pane__title { font-size: calc(0.9rem * var(--text-scale)); font-weight: 500; color: var(--fg); letter-spacing: 0.01em; } /* Sadece ekran okuyucular görsün */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } /* Klavye ile gezenler için görünür odak */ :focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 3px; } /* Hareketi azalt tercihi açıksa tüm geçişleri kıs */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } }