/* =========================================================== Ear Training — "Sinyal Odası" · DAW modu =========================================================== Şasi nötr grafit (koyu) / nötr stüdyo grisi (açık). Renk yalnızca VERİYE ait: beş beceri = beş kanal rengi. Amber tek bir iş yapar — seçim, playhead, aktif öğe. Yoğunluk DAW ölçülerinde: 3px panel arası, 2–3px yarıçap, 22–26px satır, gölge yok, hairline var. Tema üç durumlu ve KOYU VARSAYILAN: :root → koyu palet (varsayılan) prefers-color-scheme:light → açık palet (kullanıcı koyu seçmediyse) [data-theme="light"] → açık palet (kullanıcı seçtiyse) =========================================================== */ :root { /* ── şasi · GRAFİT (koyu, varsayılan) ── */ --app: #121316; --panel: #1A1B1E; /* Manşet bloku için: panel'den bir ton açık, çerçeve YERİNE (docs/ panel-manset-blok.md) — hat "ayrı nesne" demektir, manşet ekranın kendi başı, ayrı bir nesne değil. */ --panel2: #1E2026; --head: #212328; --alt: #1E1F23; --well: #0B0C0E; --line: #2B2D33; --line2: #3B3E46; --ink: #DEDFE2; --ink2: #92959C; --ink3: #62656C; --sel: #E8B04A; --sel-ink: #101216; /* Kanal renginin üstündeki yazı — temayla değişmez, zemin de değişmiyor. */ --on-chan: #101216; --sel-dim: rgba(232, 176, 74, .16); --ok: #4CC38A; --bad: #F0553F; --ok-dim: rgba(76, 195, 138, .14); --bad-dim: rgba(240, 85, 63, .14); --bevel: rgba(255, 255, 255, .045); /* ── kanal renkleri (--t1..--t6, --tN-ink) BURADA DEĞİL ── Tek kaynak `src/games.mjs#color`; `views/layout.mjs#channelStyle` her sayfanın 'ine basar. Burada da yazılı olsaydı iki kaynak olurdu ve biri sessizce eskirdi. */ /* klip dolgusu: koyuda tam doygun, açıkta beyazla karışıp pastelleşir */ --clip-mix: 100%; --clip-base: transparent; --clip-ink: #0D0E10; /* ── ölçüler ── */ --gap: 3px; --tp-h: 46px; --sb-h: 24px; --r: 3px; --r-sm: 2px; --font-ui: 'Archivo', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif; --font-mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace; } @media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { /* Açık tema baştan ayarlandı. ÖNCEKİ HATA: zemin #C9CBCE ile panel #E8E9EB arasında yalnızca ~%8 aydınlık farkı vardı ve hairline (#C2C5C9) zeminle neredeyse aynı tondaydı. Sonuç: paneller zeminden ayrılmıyor, çizgiler görünmüyor, her şey "yıkanmış" duruyordu. Koyu temada bu sorun yoktu çünkü orada fark %6 aydınlıkta bile göze çarpar; açıkta çarpmaz. Yeni ilke: zemin AŞAĞI, panel YUKARI, çizgi ikisinin de dışında. Zemin #B4B8BC → panel #F4F5F6 = net ayrım. Çizgi #C4C7CC panelin üstünde görünür, zeminde kaybolmaz. */ --app: #B4B8BC; --panel: #F4F5F6; /* Koyu temada panel2 panel'den bir ton AÇIK; açıkta panel zaten en açık yüzey olduğu için panel2 ters yönde (panel'den bir ton koyu, head'e yakın) — yine "ayırt edilebilir ama sessiz" hedefi. */ --panel2: #EBECEE; --head: #E6E8EA; --alt: #EBECEE; --well: #A8ACB1; --line: #C4C7CC; --line2: #93979E; --ink: #15171A; --ink2: #4A4E54; --ink3: #70747B; --sel: #9A5F00; --sel-ink: #FFFFFF; --sel-dim: rgba(154, 95, 0, .13); --ok: #146F45; --bad: #A8331F; --ok-dim: rgba(20, 111, 69, .12); --bad-dim: rgba(168, 51, 31, .12); --bevel: rgba(255, 255, 255, .62); /* Kanal renklerinin açık tonları src/games.mjs#color.light'ta. */ /* Büyük dolgu alanları beyazla karışıp pastelleşir; ince çubuklar tam doygun kalır. Oran düşürüldü: %52'de geniş bloklar (gün şeridi gibi) fazla baskındı. */ --clip-mix: 38%; --clip-base: #FFFFFF; --clip-ink: #15171A; } } /* Kullanıcı AÇIK temayı kendi seçtiyse — yukarıdaki blokla birebir aynı değerler. İkisi ayrı durmak zorunda: biri sistem tercihini, diğeri kullanıcının açık seçimini karşılıyor. */ :root[data-theme="light"] { --app: #B4B8BC; --panel: #F4F5F6; --panel2: #EBECEE; --head: #E6E8EA; --alt: #EBECEE; --well: #A8ACB1; --line: #C4C7CC; --line2: #93979E; --ink: #15171A; --ink2: #4A4E54; --ink3: #70747B; --sel: #9A5F00; --sel-ink: #FFFFFF; --sel-dim: rgba(154, 95, 0, .13); --ok: #146F45; --bad: #A8331F; --ok-dim: rgba(20, 111, 69, .12); --bad-dim: rgba(168, 51, 31, .12); --bevel: rgba(255, 255, 255, .62); --clip-mix: 38%; --clip-base: #FFFFFF; --clip-ink: #15171A; } * { box-sizing: border-box; } [hidden] { display: none !important; } html, body { height: 100%; } body { margin: 0; background: var(--app); color: var(--ink); font-family: var(--font-ui); font-size: 13px; line-height: 1.5; -webkit-font-smoothing: antialiased; overflow: hidden; } a { color: inherit; } :focus-visible { outline: 2px solid var(--sel); outline-offset: 1px; } .mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; } /* serigrafi etiketi — Archivo genişlik ekseni */ .silk { font-variation-settings: 'wdth' 125; font-size: 9px; font-weight: 600; text-transform: uppercase; letter-spacing: .14em; color: var(--ink2); } /* ═══════════════════════════════════════════════════════════ UYGULAMA KABUĞU ═══════════════════════════════════════════════════════════ */ .app { height: 100%; display: grid; grid-template-rows: var(--tp-h) minmax(0, 1fr) var(--sb-h); gap: var(--gap); padding: var(--gap); background: var(--app); } /* ── transport ─────────────────────────────────────────── */ .tp { background: var(--head); border: 1px solid var(--line); border-radius: var(--r); display: flex; align-items: center; padding: 0 8px; min-width: 0; } .tp__mark { width: 20px; height: 20px; border-radius: var(--r-sm); background: var(--sel); color: var(--sel-ink); display: grid; place-items: center; flex: none; font-family: var(--font-mono); font-size: 9px; font-weight: 600; margin-right: 10px; text-decoration: none; } .tp__group { display: flex; flex-direction: column; justify-content: center; padding: 0 12px; border-left: 1px solid var(--line); height: 30px; flex: none; } .tp__group:first-of-type { border-left: 0; padding-left: 0; } .tp__k { font-variation-settings: 'wdth' 125; font-size: 9px; font-weight: 600; text-transform: uppercase; letter-spacing: .14em; color: var(--ink3); line-height: 1.2; } .tp__v { font-family: var(--font-mono); font-size: 16px; line-height: 1.15; font-variant-numeric: tabular-nums; white-space: nowrap; } .tp__v small { font-size: 9px; color: var(--ink3); } .tp__spacer { flex: 1 1 auto; min-width: 8px; } .tp__meter { width: 104px; flex: none; margin-right: 10px; } .tp__meter .tp__k { margin-bottom: 3px; } .tp__btns { display: flex; gap: var(--gap); align-items: center; flex: none; } .btn { font-family: var(--font-mono); font-size: 11px; background: var(--panel); color: var(--ink2); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 5px 10px; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; } .btn:hover { color: var(--ink); border-color: var(--line2); } .btn--on, .btn--primary { background: var(--sel); color: var(--sel-ink); border-color: transparent; box-shadow: inset 0 1px 0 rgba(255,255,255,.18); } .btn--primary:hover { color: var(--sel-ink); filter: brightness(1.07); } .btn--danger { color: var(--bad); border-color: var(--line); } .btn--danger:hover { background: var(--bad-dim); border-color: var(--bad); color: var(--bad); } .btn--wide { width: 100%; justify-content: center; padding: 8px 12px; font-size: 13px; } /* dil seçici — transport içinde, DAW'ın küçük açılır menüleri gibi */ .langform { display: flex; } .lang { font-family: var(--font-mono); font-size: 11px; background: var(--panel); color: var(--ink2); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 4px 6px; cursor: pointer; max-width: 108px; } .lang:hover { color: var(--ink); border-color: var(--line2); } .lang:focus-visible { outline: 2px solid var(--sel); outline-offset: 1px; } .icon-btn { width: 26px; height: 26px; padding: 0; justify-content: center; background: transparent; } /* ── gövde: browser · ana · inspector ──────────────────── */ .body { display: grid; grid-template-columns: 176px minmax(0, 1fr) 264px; gap: var(--gap); min-height: 0; } .body--wide { grid-template-columns: 176px minmax(0, 1fr); } .body--bare { grid-template-columns: minmax(0, 1fr); } .pane { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); display: flex; flex-direction: column; min-height: 0; min-width: 0; } .pane__head { height: 24px; flex: none; display: flex; align-items: center; gap: 12px; padding: 0 9px; background: var(--head); border-bottom: 1px solid var(--line); border-radius: 2px 2px 0 0; } .pane__body { flex: 1; overflow: auto; min-height: 0; } .pane__body--pad { padding: 12px; } /* ── browser (sol) ─────────────────────────────────────── */ .brw__group { padding: 6px 0 8px; border-bottom: 1px solid var(--line); } .brw__group:last-child { border-bottom: 0; } .brw__label { font-variation-settings: 'wdth' 125; font-size: 9px; font-weight: 600; text-transform: uppercase; letter-spacing: .14em; color: var(--ink3); padding: 0 9px 4px; } .brw__row { display: flex; align-items: center; gap: 6px; min-height: 23px; padding: 2px 9px; color: var(--ink2); text-decoration: none; font-size: 13px; } .brw__row:hover { background: var(--alt); color: var(--ink); } .brw__row[aria-current="page"] { background: var(--sel); color: var(--sel-ink); } .brw__dot { width: 7px; height: 7px; border-radius: 1px; flex: none; background: var(--tc, var(--line2)); } .brw__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .brw__n { margin-left: auto; font-family: var(--font-mono); font-size: 11px; opacity: .75; } /* ── inspector (sağ) ───────────────────────────────────── */ .insp { padding: 10px; display: grid; gap: 12px; align-content: start; } .insp__title { font-size: 13px; font-weight: 700; letter-spacing: -.01em; } .insp__sub { font-family: var(--font-mono); font-size: 11px; color: var(--ink3); } .hr { height: 1px; background: var(--line); } .kv { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-family: var(--font-mono); font-size: 11px; color: var(--ink2); } .kv b { color: var(--ink); font-weight: 500; } /* ── status bar ────────────────────────────────────────── */ .sb { background: var(--head); border: 1px solid var(--line); border-radius: var(--r); display: flex; align-items: center; gap: 12px; padding: 0 9px; font-family: var(--font-mono); font-size: 11px; color: var(--ink3); min-width: 0; } .sb__info { color: var(--ink2); flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sb__x { flex: none; white-space: nowrap; } /* ═══════════════════════════════════════════════════════════ İÇERİK BİLEŞENLERİ ═══════════════════════════════════════════════════════════ */ .wrap { padding: 12px; display: grid; gap: var(--gap); align-content: start; } /* ── grup ayracı ─────────────────────────────────────────── ÖLÇÜLEN HATA: grup İÇİ boşluk ile grup ARASI boşluk aynıydı — ikisi de 3px. Bu yüzden ekran aynı anda hem sıkışık hem boş okunuyordu: sıkışık, çünkü hiçbir şey nefes almıyor; boş, çünkü hiçbir şey gruplanmıyor. Premium duygusu boşluk MİKTARINDAN değil, boşluğun EŞİTSİZLİĞİNDEN gelir. Panel arası 3px kalıyor (yoğunluk kasıtlı), panel GRUBU arası 12px oluyor. 9 + 3px gap = 12px görünen boşluk. "Nefes" dediğimiz şey bu. */ .group { margin-top: 9px; } /* ── panele YAYILAN yerleşim ─────────────────────────────── ŞİKÂYET: "sitede inanılmaz bir boşluk hissi var, çok amatör geliyor." Sebep, ekranın altında kalan yaklaşık %40'lık düz gri alandı. İçerik üste yığılıyor, geri kalanı boş zemin olarak duruyordu — DAW'da bir pane hiç öyle durmaz, tahsis edildiği alanı doldurur. Çözüm dolgu MALZEMESİ eklemek değil: son panel esneyip boşluğu alıyor ve tablosu kendi içinde kayıyor. Böylece alan dolu, üstteki paneller de gereksiz yere büyümüyor. */ .wrap--fill { display: flex; flex-direction: column; min-height: 100%; } .wrap--fill > * { flex: none; } .wrap--fill > .mod--grow { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 168px; overflow: hidden; } .mod--grow > .tablewrap { flex: 1 1 auto; overflow: auto; min-height: 0; /* Tablonun bittiği yerde şerit BİTMEZ — DAW'ın aranje penceresinde son klipten sonra kanal şeritleri devam eder. Boş alan "kâğıt" değil, "henüz dolmamış kanal" olarak okunur. Satır yüksekliği aşağıda SABİT veriliyor ki desen yazı tipi yüklenmese bile fazdan çıkmasın. */ --row-h: 31px; --head-h: 23px; background-image: repeating-linear-gradient( to bottom, transparent 0 var(--row-h), var(--alt) var(--row-h) calc(var(--row-h) * 2)); background-position: 0 var(--head-h); background-attachment: local; } .mod--grow > .tablewrap th, .mod--grow > .tablewrap td { padding-top: 0; padding-bottom: 0; height: var(--row-h); } .mod--grow > .tablewrap thead th { height: var(--head-h); } .head { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; margin-bottom: 2px; } .head h1 { margin: 0; font-size: 20px; font-weight: 700; letter-spacing: -.02em; line-height: 1.1; } .head p { margin: 0; color: var(--ink2); font-size: 13px; } .head__actions { margin-left: auto; display: flex; gap: var(--gap); } .prose { font-size: 13px; line-height: 1.55; color: var(--ink2); max-width: 68ch; } .prose strong { color: var(--ink); font-weight: 600; } /* modül (panel içi blok) */ .mod { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); box-shadow: inset 0 1px 0 var(--bevel); } .mod__head { height: 23px; display: flex; align-items: center; gap: 12px; padding: 0 9px; border-bottom: 1px solid var(--line); background: var(--head); border-radius: 2px 2px 0 0; } .mod__body { padding: 11px; } .grid { display: grid; gap: var(--gap); } .grid--2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* Yan yana iki panel AYNI yükseklikte biter. `start` iken kısa olanın altında panel kenarını kıran bir oyuk kalıyordu; DAW'da iki modül yan yana durur ve alt kenarları hizalıdır. */ align-items: stretch; } .grid--cards { grid-template-columns: repeat(auto-fill, minmax(238px, 1fr)); } /* ── readout şeridi (eski stat-strip) ──────────────────── */ .readout { display: grid; grid-template-columns: repeat(auto-fit, minmax(108px, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; } .ro { background: var(--head); padding: 7px 10px 8px; } .ro__k { font-variation-settings: 'wdth' 125; font-size: 9px; font-weight: 600; text-transform: uppercase; letter-spacing: .14em; color: var(--ink3); } .ro__v { font-family: var(--font-mono); font-size: 20px; line-height: 1.2; font-variant-numeric: tabular-nums; margin-top: 1px; } .ro__v small { font-size: 11px; color: var(--ink3); margin-left: 2px; } /* Ölçülmemiş okuma: sayı sönük — "henüz bir sonuç değil" demenin sessiz yolu. */ .ro__v--thin { color: var(--ink3); } /* Rapor kutusunun (brief-istatistik-koc-1.md §3.3) önceki döneme göre değişim satırı — .ro'nun üçüncü satırı, k/v'nin altında. */ .ro__d { font-family: var(--font-mono); font-size: 9px; margin-top: 3px; color: var(--ink3); } .ro__d--up { color: var(--ok); } .ro__d--down { color: var(--bad); } /* ── ölçerler ──────────────────────────────────────────── */ .meter { height: 6px; border-radius: 1px; background: var(--well); position: relative; overflow: hidden; } .meter > i { position: absolute; inset: 0 auto 0 0; width: var(--v, 0%); background: var(--tc, var(--sel)); -webkit-mask-image: repeating-linear-gradient(90deg, #000 0 4px, transparent 4px 5px); mask-image: repeating-linear-gradient(90deg, #000 0 4px, transparent 4px 5px); } .meter--tall { height: 8px; } /* Ölçüm eşiğinin altında metre bir SONUÇ değil, DOLUM göstergesidir: sönük ve çizgili — "buraya bir sayı gelecek" der, sayıyı söylemez. */ .meter--thin > i { background: var(--line2); opacity: .8; } .led { width: 6px; height: 6px; border-radius: 50%; background: var(--line2); flex: none; } .led--on { background: var(--sel); } .led--ok { background: var(--ok); } .led--bad { background: var(--bad); } /* ── kanal şeridi (beş beceri) ─────────────────────────── */ .chans { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; } .chan { background: var(--panel); padding: 8px 9px 10px; display: flex; flex-direction: column; gap: 6px; text-decoration: none; color: inherit; border-top: 2px solid var(--tc); min-width: 0; } .chan:hover { background: var(--alt); } .chan__name { font-variation-settings: 'wdth' 118; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .1em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .chan__num { font-family: var(--font-mono); font-size: 20px; line-height: 1; font-variant-numeric: tabular-nums; } .chan__num small { font-size: 11px; color: var(--ink3); } .chan__num--raw { color: var(--ink3); font-size: 16px; } .chan__foot { display: flex; justify-content: space-between; gap: 6px; font-family: var(--font-mono); font-size: 11px; color: var(--ink3); } /* ── oyun kartı (liste görünümü) ───────────────────────── */ .card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); border-top: 2px solid var(--tc); padding: 10px 11px 11px; display: flex; flex-direction: column; gap: 12px; text-decoration: none; color: inherit; min-width: 0; } .card:hover { border-color: var(--line2); background: var(--alt); } .card__top { display: flex; align-items: baseline; gap: 12px; } .card__name { font-weight: 700; font-size: 16px; letter-spacing: -.01em; } .card__tag { color: var(--ink2); font-size: 13px; line-height: 1.4; } .card__foot { display: flex; gap: 12px; font-family: var(--font-mono); font-size: 11px; color: var(--ink3); } .card__foot span:last-child { margin-left: auto; } /* ── çip / rozet ───────────────────────────────────────── */ .chip { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); border-radius: var(--r-sm); padding: 2px 7px; font-family: var(--font-mono); font-size: 11px; color: var(--ink2); white-space: nowrap; } .chip--ok { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 45%, transparent); background: var(--ok-dim); } .chip--bad { color: var(--bad); border-color: color-mix(in srgb, var(--bad) 45%, transparent); background: var(--bad-dim); } .chip--sel { color: var(--sel); border-color: color-mix(in srgb, var(--sel) 45%, transparent); background: var(--sel-dim); } /* ── bölge çubukları ───────────────────────────────────── */ .zones { display: grid; gap: 6px; } .zone { display: grid; grid-template-columns: minmax(60px, 108px) 1fr 52px; gap: 12px; align-items: center; font-size: 13px; } .zone__l { color: var(--ink2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .zone__t { height: 7px; border-radius: 1px; background: var(--well); position: relative; overflow: hidden; } .zone__band { position: absolute; inset: 0 auto 0 0; background: color-mix(in srgb, var(--tc) 28%, transparent); } .zone__fill { position: absolute; inset: 0 auto 0 0; background: var(--tc); } .zone__fill--weak { background: var(--bad); } .zone__n { font-family: var(--font-mono); font-size: 11px; color: var(--ink2); text-align: right; } /* ── henüz ölçülmemiş satır ──────────────────────────────── Az denemeli bir satır SİLİNMEZ, SÖNDÜRÜLÜR: kullanıcı orada bir ölçüm olacağını görsün ama onu bir sonuç sanmasın. Çubuk yerine boş bir oluk, yüzde yerine ham "1/1" durur. */ .zone--thin { grid-template-columns: minmax(60px, 1fr) 88px 52px; } .zone--thin .zone__l { color: var(--ink3); white-space: normal; } .zone__t--empty { height: 7px; border-radius: 1px; background: transparent; border: 1px dashed var(--line2); opacity: .55; } .zone__n--raw { color: var(--ink3); font-size: 11px; } /* ── "henüz ölçülmedi" notu ──────────────────────────────── */ .notyet { margin: 9px 0 0; font-size: 11px; line-height: 1.45; color: var(--ink3); padding-left: 9px; border-left: 2px solid var(--line2); } .notyet__row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: 13px; color: var(--ink2); padding: 4px 0; border-bottom: 1px solid var(--line); } .notyet__row:last-of-type { border-bottom: 0; } .notyet__row b { color: var(--ink); font-size: 13px; } /* ── grafikler ─────────────────────────────────────────── */ .spark { display: block; width: 100%; height: 62px; } .spark__line { fill: none; stroke: var(--tc, var(--sel)); stroke-width: 1.75; stroke-linejoin: round; } .spark__area { fill: color-mix(in srgb, var(--tc, var(--sel)) 18%, transparent); stroke: none; } .days { display: flex; align-items: flex-end; gap: 3px; height: 54px; } .days > i { flex: 1; min-width: 2px; border-radius: 1px 1px 0 0; position: relative; background: color-mix(in srgb, var(--tc, var(--sel)) 26%, transparent); } .days > i > b { position: absolute; inset: auto 0 0 0; background: var(--tc, var(--sel)); border-radius: 1px 1px 0 0; display: block; } /* ── tablo ─────────────────────────────────────────────── */ .tablewrap { overflow-x: auto; } table { width: 100%; border-collapse: collapse; font-size: 13px; } th, td { text-align: left; padding: 5px 8px; border-bottom: 1px solid var(--line); white-space: nowrap; } thead th { font-variation-settings: 'wdth' 125; font-size: 9px; font-weight: 600; text-transform: uppercase; letter-spacing: .14em; color: var(--ink3); position: sticky; top: 0; background: var(--head); z-index: 1; } tbody tr:nth-child(even) { background: var(--alt); } tbody tr:last-child td { border-bottom: 0; } td.num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; } /* ── boş durum: "sinyal yok" ───────────────────────────── */ .nosignal { padding: 28px 16px; text-align: center; color: var(--ink3); border: 1px dashed var(--line2); border-radius: var(--r); background-image: radial-gradient(circle at 1px 1px, var(--line) 1px, transparent 1px); background-size: 13px 13px; } .nosignal b { display: block; color: var(--ink2); font-weight: 600; margin-bottom: 3px; } /* ── koç sayfası (istatistik → "ne yapmalıyım") ────────── Beş oyunda aynı beş modül. Kart dışında yeni bileşen yok — barlar `.zone`/`.zone__t`/`.zone__fill`, üç kanıt kutusu `.readout`/`.ro` yeniden kullanılıyor; burada yalnızca eşik cetveli ve koç kartının durum rengi yeni. */ /* eşik cetveli — 4 sabit çapa (başlangıç/hedef/buradasın/usta) */ .cscale { margin-top: 12px; } .cscale__track { height: 5px; border-radius: 1px; background: var(--well); position: relative; margin: 0 1px; } .cscale__band { position: absolute; inset: 0; border-radius: 1px; background: color-mix(in srgb, var(--tc, var(--sel)) 20%, transparent); } .cscale__tick { position: absolute; top: -3px; width: 1px; height: 11px; background: var(--line2); } .cscale__now { position: absolute; top: -4px; width: 2px; height: 13px; background: var(--sel); transform: translateX(-1px); } .cscale__labels { /* yükseklik satır içi stilde gelir (bkz. coach.mjs) — çakışan çapalar ikinci bir satıra kayınca konteyner büyür, altındaki içerik kaymaz. */ position: relative; height: 26px; margin-top: 2px; font-family: var(--font-mono); font-size: 9px; color: var(--ink3); } .cscale__label { /* konum/hizalama HER etiket için satır içi stilde gelir (bkz. coach.mjs) — çakışan çapaları (hedef == usta gibi) birleştirmek de aynı yerde karar veriliyor, burada yalnızca ORTAK görünüm kalıyor. */ position: absolute; top: 0; white-space: nowrap; display: flex; flex-direction: column; gap: 1px; } .cscale__label b { color: var(--ink2); font-size: 11px; } /* koç kartı — kenar rengi DURUMU söyler, zemin her zaman soluk kalır (CLAUDE.md §6: alarm kutusu gibi görünmez). */ .coach { background: var(--panel2); border: 1px solid var(--line); border-left: 3px solid var(--line2); border-radius: var(--r); padding: 12px 14px 13px; } .coach--warn { border-left-color: var(--bad); } .coach--ceiling { border-left-color: var(--sel); } .coach--ok { border-left-color: var(--ok); } .coach__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 8px; } .coach__confidence { font-size: 11px; color: var(--ink3); white-space: nowrap; } .coach__lead { font-size: 16px; font-weight: 700; letter-spacing: -.01em; line-height: 1.35; margin: 0; } .coach__why { font-size: 13px; color: var(--ink2); line-height: 1.5; margin: 6px 0 0; } .coach__reco { font-size: 13px; color: var(--ink); line-height: 1.5; margin: 8px 0 0; } .coach__acts { display: flex; gap: var(--gap); margin-top: 12px; flex-wrap: wrap; } .coach__evidence { margin-top: 12px; } /* son tavsiyenin sonucu — iki sütun */ .outcome { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; } .outcome__past { flex: 1 1 220px; min-width: 0; } .outcome__past b { display: block; color: var(--ink); font-weight: 600; font-size: 13px; margin-bottom: 2px; } .outcome__past span { font-size: 11px; color: var(--ink3); } .outcome__result { display: flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 13px; } /* ── form ──────────────────────────────────────────────── */ .field { display: block; margin-bottom: 11px; } .field > span { display: block; font-size: 13px; color: var(--ink2); margin-bottom: 4px; } .field input { width: 100%; padding: 8px 10px; font: inherit; font-size: 13px; background: var(--well); color: var(--ink); border: 1px solid var(--line); border-radius: var(--r-sm); } .field input:disabled { color: var(--ink3); } .field__hint { font-size: 11px; color: var(--ink3); margin-top: 4px; } .notice { padding: 8px 10px; border-radius: var(--r-sm); font-size: 13px; border: 1px solid var(--line); background: var(--alt); margin-bottom: 10px; } .notice--bad { border-color: var(--bad); background: var(--bad-dim); } .notice--ok { border-color: var(--ok); background: var(--ok-dim); } .divider { display: flex; align-items: center; gap: 12px; color: var(--ink3); font-family: var(--font-mono); font-size: 11px; margin: 14px 0; } .divider::before, .divider::after { content: ''; flex: 1; height: 1px; background: var(--line); } /* ── giriş / kayıt ekranı ──────────────────────────────── */ .auth { display: grid; place-items: center; padding: 24px 16px; overflow: auto; } .auth__box { width: 100%; max-width: 380px; } .auth__brand { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; } .auth__brand .tp__mark { margin: 0; } .auth__brand b { font-size: 16px; letter-spacing: -.01em; } .auth__alt { text-align: center; font-size: 13px; color: var(--ink3); margin-top: 14px; } .auth__alt a { color: var(--sel); font-weight: 600; } /* ── karşılama sayfası ─────────────────────────────────── */ .landing { overflow: auto; } /* `.pane` bir flex kolonu; genişlik verilmezse içerik kadar daralıyordu (max-width tek başına yetmez). */ .landing__in { width: 100%; max-width: 980px; margin: 0 auto; padding: 40px 20px 60px; } .landing h1 { font-size: clamp(26px, 4vw, 38px); font-weight: 700; letter-spacing: -.028em; line-height: 1.06; margin: 0 0 12px; max-width: 18ch; text-wrap: balance; } .landing__lead { font-size: 16px; color: var(--ink2); max-width: 62ch; line-height: 1.55; } /* ── kahraman: başlık + mikser görseli ── Mikser SÜS: gerçek bir ölçüm göstermiyor, beş kanalın rengini bir bakışta tanıtıyor (bkz. pages.mjs'teki gerekçe). */ .hero2 { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 12px; } .hero2__eyebrow { color: var(--sel); margin: 0 0 12px; } .hero2__dim { color: var(--ink2); } .hero2__cta { display: flex; align-items: center; gap: 12px; margin-top: 20px; flex-wrap: wrap; } .hero2__note { font-size: 13px; color: var(--ink3); } .mixer { display: flex; align-items: flex-end; gap: 12px; padding: 0 6px; } .mixer__ch { display: flex; flex-direction: column; align-items: center; gap: 6px; } .mixer__track { position: relative; width: 3px; height: 132px; background: var(--line); border-radius: 2px; } .mixer__fill { position: absolute; left: 0; bottom: 0; width: 100%; height: var(--v); background: var(--tc); border-radius: 2px; font-style: normal; } .mixer__handle { position: absolute; left: 50%; bottom: var(--v); width: 13px; height: 5px; border-radius: 2px; background: var(--tc); box-shadow: inset 0 1px 0 rgba(255,255,255,.28); transform: translate(-50%, 50%); font-style: normal; } .mixer__label { font-size: 9px; letter-spacing: .08em; color: var(--ink3); } /* Beş kanal — karşılamanın vitrini. Şimdilik tıklanmıyor; "dene" akışı henüz buraya bağlanmadı, sahte bir kapı açmaktansa hiç açmamak daha dürüst (bkz. pages.mjs). */ .pickhead { display: flex; align-items: baseline; gap: 12px; margin: 30px 0 8px; flex-wrap: wrap; } .cards2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(166px, 1fr)); gap: 3px; } .card2 { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 16px 13px 13px; background: var(--panel); border: 1px solid var(--line); border-top: 2px solid var(--tc); border-radius: 3px; } .card2 .ico { color: var(--tc); } .card2__name { font-size: 16px; font-weight: 600; letter-spacing: -.004em; } .card2__tag { font-size: 13px; color: var(--ink2); line-height: 1.45; } @media (max-width: 640px) { .hero2 { grid-template-columns: 1fr; } .mixer { justify-content: center; margin-top: 6px; } } /* ── devam ekranı ──────────────────────────────────────── */ .resume, .nextup { display: grid; gap: 3px; text-decoration: none; color: inherit; background: var(--surf); border: 1px solid var(--line); border-left: 2px solid var(--tc); border-radius: 3px; transition: background .14s, border-color .14s; } .resume:hover, .nextup:hover { background: var(--alt); border-color: var(--line2); border-left-color: var(--tc); } .resume:focus-visible, .nextup:focus-visible { outline: 2px solid var(--sel); outline-offset: 1px; } .resume { padding: 18px 18px 16px; } .resume__k { font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink3); } .resume__name { font-size: clamp(21px, 3.4vw, 29px); font-weight: 700; letter-spacing: -.022em; line-height: 1.1; } .resume__meta { font-size: 13px; color: var(--ink2); } .resume__meta b { color: var(--ink); font-weight: 600; } .resume__go { justify-self: start; margin-top: 9px; font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: .1em; padding: 8px 15px; border-radius: 2px; background: var(--sel); color: var(--sel-ink); } .nextup { padding: 12px 14px; margin-top: 3px; } .nextup__k { font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink3); } .nextup__name { font-size: 16px; font-weight: 600; } .nextup__why { font-size: 13px; color: var(--ink2); } .contfoot { margin-top: 10px; display: flex; gap: 3px; } /* ── oyun ekranı ───────────────────────────────────────── */ .play { display: grid; grid-template-rows: minmax(0, 1fr); min-height: 0; } .play-frame { width: 100%; height: 100%; border: 0; background: var(--app); display: block; } .sync { font-family: var(--font-mono); font-size: 11px; color: var(--ink3); } .sync[data-state="saving"] { color: var(--sel); } .sync[data-state="saved"] { color: var(--ok); } .sync[data-state="error"] { color: var(--bad); } /* ── katman kapıları (kulaklık onayı · deneme sonu) ───── Ortak kabuk: hairline'lı bir panel, gölge yok. Tek bir iş yapar ve kaybolur; ne kutlama ne ceza — ürünün geri kalanıyla aynı dilde. */ .gate { position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; padding: 22px; background: color-mix(in srgb, var(--app) 82%, transparent); backdrop-filter: blur(2px); } .gate[hidden] { display: none; } .gate__box { width: min(440px, 100%); background: var(--surf); border: 1px solid var(--line2); border-radius: 3px; padding: 22px 22px 18px; display: grid; gap: 12px; } .gate__icon { color: var(--tc, var(--sel)); line-height: 0; } .gate__title { font-size: 20px; font-weight: 700; letter-spacing: -.015em; margin: 0; } .gate__body { font-size: 13px; color: var(--ink2); line-height: 1.55; margin: 0; } .gate__acts { display: flex; gap: 3px; flex-wrap: wrap; margin-top: 4px; } .gate__quiet { justify-self: start; background: none; border: 0; padding: 2px 0; font-family: inherit; font-size: 13px; color: var(--ink3); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; } .gate__quiet:hover { color: var(--ink2); } /* Ses kalibrasyonu — /play/:id'nin üst katmanında, kulaklık onayının hemen ardından. Kaydırıcı OYUNUN gerçek çıkış seviyesini belirler; önizleme sitenin kendi test tonuyla çalar (oyunun motoruna dokunmadan), bkz. static/play.js. */ .gate__vol { display: flex; align-items: center; gap: 12px; } .gate__vol input[type="range"] { flex: 1 1 auto; accent-color: var(--tc, var(--sel)); } .gate__caution { font-size: 11px; color: var(--ink3); margin: -6px 0 0; } .gate__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; } .gate__stat { border: 1px solid var(--line); border-radius: 2px; background: var(--alt); padding: 8px 10px; display: grid; gap: 1px; } .gate__stat span { font-family: var(--font-mono); font-size: 9px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink3); } .gate__stat b { font-family: var(--font-mono); font-size: 20px; font-weight: 600; font-variant-numeric: tabular-nums; } .btn--lg { padding: 9px 16px; font-size: 11px; } /* Kapı açıkken arkadaki sayfa kaymasın. */ html.is-gated, html.is-gated body { overflow: hidden; } /* ── mobil ─────────────────────────────────────────────── */ .menu-btn { display: none; } @media (max-width: 1180px) { .body { grid-template-columns: 176px minmax(0, 1fr); } .insp-pane { display: none; } } @media (max-width: 820px) { body { overflow: auto; } .app { height: auto; min-height: 100%; grid-template-rows: auto minmax(0,1fr) auto; } .tp { flex-wrap: wrap; height: auto; padding: 6px 8px; gap: 3px 0; } .tp__group { padding: 0 10px; height: 26px; } .body { grid-template-columns: minmax(0, 1fr); } .browser-pane { display: none; } body.menu-open .browser-pane { display: flex; } .menu-btn { display: inline-flex; } .pane__body { overflow: visible; } .chans { grid-template-columns: repeat(2, minmax(0, 1fr)); } .zone { grid-template-columns: minmax(52px, 84px) 1fr 44px; } } /* ═══════════ aşama haritası ═══════════ Oyuna tıklayınca açılan ekran. Karar: docs/asama-haritasi.md. Burası bir HARİTA, tablo değil — yüzde çubuğu, ikinci bir okuma şeridi ya da dokuz satırlık aynı görünen bir liste YOK. */ /* ── 1. devam et: ekranın en büyük öğesi ── */ .resume { display: block; text-decoration: none; padding: 12px; border-radius: var(--r-sm); border: 1px solid var(--tc); background: var(--alt); box-shadow: inset 0 1px 0 var(--bevel); } .resume:hover { background: var(--head); } .resume__do { display: block; font-size: 20px; line-height: 1.15; color: var(--tc); letter-spacing: -.01em; } .resume__what { display: block; margin-top: 3px; font-size: 13px; color: var(--ink2); } .resume__what b { color: var(--ink); font-variant-numeric: tabular-nums; } /* ── "artık ne duyabiliyorsun" ── Ham seviye DEĞİL, kazanılmış yetenek. Yanında örneklem büyüklüğü. */ .able { margin: 0; font-size: 13px; color: var(--ink2); display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; } .able b { font-size: 16px; color: var(--ink); } .able small { font-size: 9px; color: var(--ink3); text-transform: uppercase; letter-spacing: .14em; } .able--quiet { color: var(--ink3); } /* ── 2. aşama listesi ── */ .stages { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; } .st { background: var(--panel); border-left: 2px solid transparent; /* Satır artık İKİ bağlantı taşıyor: SEÇEN (tüm genişlik) ve Dinleme Odası'na GİREN (sağda, ayrı). İkisi ayrı olmak zorunda — CLAUDE.md §9: "satıra tıklamak oyunu BAŞLATMAZ, seçer". */ display: flex; align-items: stretch; } .st > a { flex: 1 1 auto; min-width: 0; } .st > a { text-decoration: none; color: inherit; display: flex; align-items: baseline; gap: 6px; padding: 6px 12px; } .st > a:hover { background: var(--head); } /* Dinleme Odası girişi — satırın SEÇME işlevinden ayrı, açıkça etiketli. */ .st__room { flex: none; display: flex; align-items: center; padding: 0 10px; text-decoration: none; font-family: var(--mono); font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink3); border-left: 1px solid var(--line); } .st__room:hover { color: var(--tc); background: var(--head); } .st__room:focus-visible { outline: 2px solid var(--tc); outline-offset: -2px; } /* Bağlantı olmayan satır (kilitli ya da atlanamayan oyun). */ .st--flat { display: flex; align-items: baseline; gap: 6px; padding: 6px 12px; } .st__n { font-style: normal; font-size: 11px; color: var(--ink3); font-variant-numeric: tabular-nums; min-width: 13px; flex: none; } .st__line { font-size: 13px; color: var(--ink); flex: 1 1 auto; } .st__tag { font-size: 9px; letter-spacing: .14em; text-transform: uppercase; color: var(--tc); flex: none; } .st__tag--done { color: var(--ink3); } /* Kilitli satır "kilitli" yazmaz; neyle açılacağını yazar. */ .st__need { font-size: 11px; color: var(--ink3); flex: none; text-align: right; } /* SEÇİLİ SATIR — kanal renginde yanar. Satıra tıklamak oyunu başlatmaz, onu SEÇER; oyuna giren tek şey "devam et". Seçim ile "buradasın" ayrı iki şey: biri kullanıcının o an ne seçtiğini, öteki müfredatta nerede kaldığını söyler. Seçim varsayılan olarak "buradasın"dır, o yüzden çoğu zaman üst üste düşerler (docs/asama-haritasi.md). */ .st.is-sel { background: color-mix(in srgb, var(--tc) 12%, var(--panel)); } .st.is-sel .st__line { color: var(--tc); font-weight: 650; } .st.is-sel .st__n { color: var(--tc); } .st--current { border-left-color: var(--tc); background: var(--alt); } .st--current .st__line { color: var(--tc); } .st--done .st__line { color: var(--ink2); } .st--locked .st__line { color: var(--ink3); } /* Seçim, durum renklerinin ÜSTÜNDE kalır: tamamlanmış bir aşamayı seçtiğinde de yandığını görmelisin. */ .st.is-sel.st--done .st__line, .st.is-sel.st--locked .st__line { color: var(--tc); } /* ── 3. ilerleme sayfası: sessiz, küçük ── */ .quiet { font-size: 11px; color: var(--ink3); text-decoration: none; justify-self: start; } .quiet:hover { color: var(--ink2); text-decoration: underline; } @media (max-width: 560px) { /* Dar ekranda kilit koşulu satırın altına iner; yoksa cümleyi eziyor. */ .st > a, .st--flat { flex-wrap: wrap; } .st__need { flex: 1 1 100%; text-align: left; } } /* ═══════════ oyunlar ekranı — konsol düzeni ═══════════ Karar: docs/oyunlar-ekrani.md. Bu ekranın işi KARŞILAŞTIRMAK değil, BİRİNİ SEÇİP OYNAMAK. Düzen 2 + 3 + 3 + … Maketteki ölçüler projenin ölçeğine oturtuldu: tip 9/11/13/16/20, boşluk 1/3/6/12 (tests/scale.mjs bunu kilitliyor). Dolgu ve kenar boşluğu ölçeğe tabi değil, o yüzden maketin nefesi korunabildi. */ .silk { display: block; font-family: var(--font-mono); font-size: 9px; letter-spacing: .18em; text-transform: uppercase; color: var(--ink3); margin: 0 0 3px; } /* ── üstteki iki büyük kart ── */ .top2 { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; } .top2--one { grid-template-columns: 1fr; } .hero { display: grid; grid-template-rows: 3px 1fr; background: var(--alt); border: 1px solid var(--line); border-radius: var(--r-sm); overflow: hidden; text-decoration: none; color: inherit; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tc) 40%, transparent); } .hero:hover { background: var(--head); } .hero__led { background: var(--tc); } .hero__in { padding: 18px 18px 15px; display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: center; } .hero__ic { width: 66px; height: 66px; display: grid; place-items: center; flex: none; background: color-mix(in srgb, var(--tc) 11%, transparent); border-radius: var(--r-sm); color: var(--tc); } .hero__body { display: grid; gap: 3px; } .hero__k { font-family: var(--font-mono); font-size: 9px; letter-spacing: .18em; text-transform: uppercase; color: var(--tc); } .hero__nm { font-size: 20px; font-weight: 700; letter-spacing: -.018em; } .hero__q { font-size: 13px; color: var(--ink3); line-height: 1.4; } /* Gerekçe satırı ZORUNLU: kart neden burada. */ .hero__meta { font-family: var(--font-mono); font-size: 11px; color: var(--ink2); } .hero__go { justify-self: start; margin-top: 6px; /* KANAL RENGİNİN ÜSTÜNE KOYU YAZI — her iki temada da aynı. `--sel-ink` kullanılamaz: o açık temada beyaza dönüyor ve beş kanal rengi de orta tonda (amber #c98500 üstünde beyaz ≈ 2.6:1, okunmuyor). Zemin temayla değişmediği için üstündeki yazı da değişmemeli. */ background: var(--tc); color: var(--on-chan); font-size: 13px; font-weight: 650; padding: 7px 18px; border-radius: var(--r-sm); } /* ── alt şeritler: SABİT üç sütun ── Son sıra eksik kalırsa kartlar genişlemez, oldukları yerde durur. */ .strips { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; } .strip { display: grid; grid-template-rows: 3px 1fr; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-sm); overflow: hidden; text-decoration: none; color: inherit; } .strip:hover { background: var(--head); } .strip__led { background: var(--tc); opacity: .9; } .strip__in { padding: 18px 12px 15px; display: grid; justify-items: center; gap: 6px; color: var(--tc); } .strip__nm { font-size: 13px; font-weight: 650; color: var(--ink); text-align: center; } .strip__q { font-size: 11px; color: var(--ink3); text-align: center; line-height: 1.35; min-height: 30px; } /* "başla" bir DÜĞME DEĞİL, metin. Karar burada veriliyor, tıklanacak yer kartın kendisi. */ .strip__go { font-family: var(--font-mono); font-size: 9px; letter-spacing: .14em; text-transform: uppercase; color: var(--tc); opacity: .9; } .ico { display: block; } .icodefs { position: absolute; width: 0; height: 0; overflow: hidden; } /* ═══════════ istatistik — YATAY satırlar ═══════════ Games'in tam tersi olsun diye: yoğun, taranabilir. Çubuk SEVİYEYİ gösterir, doğruluğu değil (motor doğruluğu %80'de sabitler). */ .rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; } .row { background: var(--panel); } .row__a { display: grid; align-items: center; gap: 12px; grid-template-columns: 18px minmax(96px, 1fr) minmax(60px, 2fr) auto auto; padding: 6px 12px; text-decoration: none; color: inherit; } .row__a:hover { background: var(--head); } .row__ic { color: var(--tc); display: grid; place-items: center; } .row__nm { font-size: 13px; } .row__bar { display: block; height: 6px; background: var(--well); border-radius: 1px; } .row__bar i { display: block; height: 100%; width: var(--v); background: var(--tc); border-radius: 1px; } .row__n { font-family: var(--font-mono); font-size: 11px; color: var(--ink3); text-align: right; } .row__lv { font-family: var(--font-mono); font-size: 11px; color: var(--ink2); text-align: right; min-width: 68px; } @media (max-width: 700px) { .top2 { grid-template-columns: 1fr; } } @media (max-width: 560px) { .strips { grid-template-columns: repeat(2, 1fr); } .hero__in { grid-template-columns: 1fr; } .hero__ic { width: 48px; height: 48px; } /* Dar ekranda çubuk düşer; ad, round ve seviye kalır. */ .row__a { grid-template-columns: 18px 1fr auto auto; } .row__bar { display: none; } } /* ═══════════ dashboard — manşet, panel, aşama ═══════════ Karar: docs/dashboard-manset.md. Doğruluk yüzdesi bu ekrandan tamamen çıktı; yerine seviye eğrisi + aşama çubuğu geldi. */ .dash__hd { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; } .dash__hd h1 { margin: 0; } .dash__win { font-family: var(--font-mono); font-size: 9px; letter-spacing: .18em; text-transform: uppercase; color: var(--ink3); } /* Ekranın TEK dolu düğmesi. Karttan farklı görünür, o yüzden karışmaz: dashboard'un geri kalanı açıklar, bu başlatır. Okuduktan SONRA gelir (cümlenin altında) — okumanın ortasında değil (docs/panel-manset-blok.md). */ .dash__go { display: inline-block; margin-top: 12px; background: var(--tc); color: var(--on-chan); font-size: 13px; font-weight: 650; padding: 7px 18px; border-radius: var(--r-sm); text-decoration: none; } /* ── manşet: solda cümle, sağda kart ── Hat YOK — bir ton açık zemin (--panel2). Hat "ayrı nesne" demektir; manşet ayrı bir nesne değil, ekranın başı (docs/panel-manset-blok.md). Sağdaki kart (`.closest`) kendi --panel + hat'ını KORUR: o gerçekten ayrı bir nesne (başka bir oyunun durumu). */ .manset { display: grid; grid-template-columns: 1fr 300px; gap: 6px; align-items: stretch; background: var(--panel2); border-radius: 4px; padding: 20px 22px; } .lede { display: grid; align-content: start; } .lede__t { margin: 3px 0 0; font-size: 20px; font-weight: 600; line-height: 1.4; letter-spacing: -.015em; max-width: 36ch; } .lede__ev { margin: 6px 0 0; font-size: 11px; color: var(--ink3); } /* Cümledeki değişim ifadesi (ör. "0,0'den 2,2'ye") o oyunun kanal rengiyle vurgulanır; --tc satır içinde `pages.mjs#headlineFrom` ile yazılır. */ .lede__delta { color: var(--tc); font-weight: 700; } .closest { display: grid; gap: 3px; padding: 12px; background: var(--alt); border: 1px solid var(--line); border-radius: var(--r-sm); text-decoration: none; color: inherit; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tc) 32%, transparent); } .closest:hover { background: var(--head); } .closest__nm { display: flex; align-items: center; gap: 6px; font-size: 16px; font-weight: 650; color: var(--tc); } /* ── panel ızgarası: her zaman üç sütun ── */ .panels { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; } .pnl { display: grid; gap: 6px; padding: 12px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-sm); text-decoration: none; color: inherit; } .pnl:hover { background: var(--head); } .pnl__hd { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 650; color: var(--tc); } .pnl__hd span { color: var(--ink); } /* Eğri kutusu SABİT (150 × 132). Kart genişleyince genişleyen taraf sayı rayıdır — geniş ve alçak bir kutuda eğri ilerlemeyi düz gösterir. */ .pnl__body { display: grid; grid-template-columns: 150px 1fr; gap: 12px; } .pnl__rail { display: grid; align-content: start; gap: 3px; min-width: 0; } .pnl__lv { font-size: 16px; font-variant-numeric: tabular-nums; } .pnl__lv i { color: var(--ink3); font-style: normal; } .pnl__n { font-family: var(--font-mono); font-size: 11px; color: var(--ink3); } .pnl__ab { font-size: 11px; color: var(--ink2); line-height: 1.4; } .pnl__ab b { color: var(--ink); } .curve { position: relative; } .curve svg { display: block; overflow: visible; } .curve__line { fill: none; stroke: var(--tc); stroke-width: 1.5; } .curve__area { fill: color-mix(in srgb, var(--tc) 14%, transparent); stroke: none; } .curve__ax { display: flex; justify-content: space-between; gap: 3px; font-size: 9px; color: var(--ink3); margin-top: 3px; } /* Gelişim eğrisinin (brief-istatistik-koc-1.md §3.4) kilometre taşları — rütbe kazanımı/aşama açılışı. Metin etiketi YOK (küçük grafikte çakışırdı), `` yerel tarayıcı ipucu taşıyor. */ .curve__milestone { fill: var(--ok); stroke: var(--panel); stroke-width: 1.5; } /* YAYILIM BANDI — o günün orta yarısı (çeyrekler arası). Bilerek "güven aralığı" değil: elimizde bir dağılım varsayımı yok, çizilen şey o gün gerçekten çalışılmış zorlukların yayılımı. Dar bant o günün tutarlı geçtiğini, geniş bant dağınık geçtiğini söyler. Çizgiden ÖNCE çizilir ki onu örtmesin. */ .curve__band { fill: color-mix(in srgb, var(--tc) 16%, transparent); stroke: none; } /* "Başlangıç 6,2 dB → Şimdi 2,4 dB" — eğrinin üstündeki büyük okuma. Birim FİZİKSEL: "4,1" soyut bir sayı, "2,4 dB" mikste karşılığı olan bir cümle. */ .fromto { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; } .fromto__side { display: flex; flex-direction: column; gap: 1px; } .fromto__k { font-size: 11px; color: var(--ink3); } .fromto__v { font-size: 20px; color: var(--ink2); line-height: 1.1; } .fromto__v small { font-size: 11px; color: var(--ink3); } .fromto__v--now { color: var(--ink); } .fromto__arrow { font-size: 16px; color: var(--ink3); } /* Dönem sekmeleri. Gerçek <a href> — bu proje istemci tarafı JS framework kullanmıyor, filtreler sayfayı yeniden yüklüyor (§19). */ .tabs { display: flex; gap: 3px; } .tab { font-size: 11px; padding: 2px 8px; border-radius: 999px; color: var(--ink3); text-decoration: none; border: 1px solid transparent; white-space: nowrap; } .tab:hover { color: var(--ink2); } .tab--on { color: var(--ink); border-color: var(--line); } /* Oyun sekmeleri şeridi — sayfanın en üstünde, başlıktan önce. */ .gametabs { flex-wrap: wrap; margin-bottom: 12px; } .gametabs .tab { display: inline-flex; align-items: center; gap: 6px; } .gametabs .brw__dot { width: 7px; height: 7px; } /* ── düzen — 8 haftalık yoğunluk ızgarası (brief §3.6) ──────────── */ .hm { display: flex; gap: 3px; overflow-x: auto; padding-bottom: 3px; } .hm__col { display: flex; flex-direction: column; gap: 3px; } .hm__cell { display: block; width: 11px; height: 11px; border-radius: 2px; background: var(--well); } .hm__cell.lv-a { background: color-mix(in srgb, var(--tc) 30%, var(--well)); } .hm__cell.lv-b { background: color-mix(in srgb, var(--tc) 55%, var(--well)); } .hm__cell.lv-c { background: color-mix(in srgb, var(--tc) 80%, var(--well)); } .hm__cell.lv-d { background: var(--tc); } .hm__legend { display: flex; align-items: center; gap: 6px; font-size: 9px; color: var(--ink3); margin-top: 9px; flex-wrap: wrap; } .hm__legend .hm__cell { width: 10px; height: 10px; } /* Eşiğin altında eğri ÇİZİLMEZ: dört noktalı bir eğri trend değil, üçgen. */ .curve--thin { display: grid; place-items: center; text-align: center; border: 1px dashed var(--line); border-radius: var(--r-sm); font-size: 11px; color: var(--ink3); padding: 6px; } /* ── aşama çubuğu ── Aşama bir SAYIMDIR, ölçüm değil: eğri çizilmeyen panelde bile çizilir. */ .sbar { border-top: 1px solid var(--line); padding-top: 6px; display: grid; gap: 3px; } .sbar__top, .sbar__bot { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; } .sbar__k { font-family: var(--font-mono); font-size: 9px; letter-spacing: .12em; color: var(--ink3); text-transform: uppercase; } /* "bu aşamada" etiketi ZORUNLU ve yüzdenin AYNI SATIRINDA: yüzde tek başına durursa "oyunun %48'i bitti" diye okunur. */ .sbar__pctwrap { display: flex; align-items: baseline; gap: 3px; } .sbar__lab { font-family: var(--font-mono); font-size: 9px; color: var(--ink3); } .sbar__pct { font-family: var(--font-mono); font-size: 13px; color: var(--ink); font-variant-numeric: tabular-nums; } .sbar__cells { display: flex; gap: 1px; } .sbar__c { flex: 1 1 0; height: 6px; border-radius: 1px; background: var(--well); position: relative; } .sbar__c.is-done { background: var(--tc); } /* Yanan bölme: çerçevesi kanal renginde, İÇİ yüzde kadar dolu. */ .sbar__c.is-live { background: var(--well); box-shadow: inset 0 0 0 1px var(--tc); } .sbar__c.is-live::after { content: ''; position: absolute; inset: 0; width: var(--v, 0%); background: var(--tc); border-radius: 1px; } .sbar__nm { font-size: 11px; color: var(--ink2); } .sbar__left { font-family: var(--font-mono); font-size: 9px; color: var(--ink3); } /* Müfredatı olmayan oyunda uydurma bölme KOYULMAZ. */ .sbar--none { display: grid; gap: 1px; } .sbar--none span { font-size: 11px; color: var(--ink3); } .sbar--none .sbar__sub { font-size: 9px; } @media (max-width: 980px) { .manset { grid-template-columns: 1fr; } } @media (max-width: 820px) { .panels { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .panels { grid-template-columns: 1fr; } .pnl__body { grid-template-columns: 1fr; } } /* ═══════════════════════════════════════════════════════════════════ LISTENING ACADEMY — görsel yenileme katmanı (2026) ═══════════════════════════════════════════════════════════════════ Bu bölüm eskiden AYRI bir dosyaydı (`static/academy.css`) ve `styles.css`in ÜSTÜNE ikinci bir `<link>` ile biniyordu. İki sorun vardı ve ikisi de ölçüldü: 1. İki ayrı ölçek aynı sayfada yaşıyordu. Üstteki bölüm 5 font boyutu + 4 boşluk kullanıyor (CLAUDE.md §6); akademi katmanı 24 font boyutu + 17 boşluk getiriyordu. Ekranda aynı anda 12/13/14/15/16px gövde metni vardı — bu bir ölçek değil, liste. 2. `tests/scale.mjs` YALNIZCA `styles.css`i okuyordu. Yani bekçi yeşildi ama hiçbir şeyi beklemiyordu; 24 boyutun hiçbirini görmüyordu. Birleştirmede yapılanlar: · 279 kural 11 satırdan (biri 12.699 karakter) okunur satırlara açıldı; bölümlenmiş ve yorumlu. · Font boyutları ORANSAL en yakın komşuya yuvarlanarak YEDİ basamağa indi: 9 / 11 / 13 / 16 / 20 / 26 / 34 (+ iki `clamp()` manşet boyu). İlk beşi eski ölçeğin AYNISI — üstteki bölüm hiç değişmedi; yeni olan yalnızca akademinin ihtiyacı olan iki manşet basamağı (26, 34). · Boşluklar BEŞ değere indi: 3 / 6 / 12 / 18 / 24 (+ 1px hairline, o bir boşluk değil ızgara çizgisi). Yeni olan 18 ve 24. · 75 bildirim değişti; en büyük oynamalar `.academy-topnav` (gap 38→24) ve `.hero2` (gap 40→24). · `--a-*` jetonları da ölçeğe hizalandı (--a-small 12→13, --a-section/--a-title 40→34). SIRA ÖNEMLİ: bu bölüm dosyanın SONUNDA durur çünkü üstteki kuralların bir kısmını bilerek geçersiz kılıyor. Yukarı taşınırsa site eski görünümüne döner. ═══════════════════════════════════════════════════════════════════ */ /* Listening Academy. One palette and type hierarchy across the entire platform. */ html:root, html:root[data-theme=light] { --app: #f5f2ea; --panel: #fcfbf7; --panel2: #eef1e6; --head: #f5f2ea; --alt: #edf0e5; --well: #e4e9da; --line: #d8ded0; --line2: #a8b5a6; --ink: #222b30; --ink2: #526159; --ink3: #657064; --sel: #264cca; --sel-ink: #fff; --sel-dim: #e7edff; --ok: #346d47; --ok-dim: #e5efdf; --bad: #a0492c; --bad-dim: #f8e8dd; --bevel: transparent; --on-chan: #fff; --font-ui: Arial,'Segoe UI',sans-serif; --font-mono: Consolas,monospace; --font-editorial: Georgia,'Times New Roman',serif; --r: 8px; --r-sm: 5px; --a-space: 24px; --a-section: 34px; --a-small: 13px; --a-body: 16px; --a-title: 34px; color-scheme: light; } html:root[data-theme=dark] { --app: #171e20; --panel: #1e282a; --panel2: #28352f; --head: #1c2426; --alt: #24302c; --well: #111a1b; --line: #3b4947; --line2: #687c74; --ink: #f1f0e7; --ink2: #becbc4; --ink3: #9eb0a6; --sel: #9aafff; --sel-ink: #142348; --sel-dim: #293957; --ok: #afcf90; --ok-dim: #2b3c2c; --bad: #f1b293; --bad-dim: #453027; --on-chan: #101a20; color-scheme: dark; } html, body { height: auto; min-height: 100%; overflow: auto; background: var(--app); color: var(--ink); } body { margin: 0; padding: 0; font-family: var(--font-ui); font-size: var(--a-body); line-height: 1.6; } * { scrollbar-color: var(--line2) var(--app); } [hidden] { display: none!important; } button, a, input, select, textarea { touch-action: manipulation; } button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible { outline: 3px solid var(--sel); outline-offset: 4px; } h1, h2, h3, p { overflow-wrap: anywhere; } h1, h2, .lede__t, .coach__lead, .resume__do { font-family: var(--font-editorial); font-weight: 400; letter-spacing: -.035em; } h1 { font-size: clamp(30px,3.3vw,48px); line-height: 1.14; } h2 { font-size: 26px; line-height: 1.25; } h3 { font-size: 20px; } .app { height: auto; min-height: 100vh; display: flex; flex-direction: column; gap: 0; } .academy-top { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 18px 32px; background: var(--panel); border-bottom: 1px solid var(--line); } .academy-brand { display: flex; gap: 12px; align-items: center; text-decoration: none; white-space: nowrap; font: 700 26px var(--font-editorial); color: var(--ink); } .academy-mark { display: flex; align-items: center; gap: 3px; height: 32px; } .academy-mark i { height: 20px; width: 5px; background: var(--sel); border-radius: 3px; } .academy-mark i:nth-child(2) { height: 32px; } .academy-mark i:nth-child(3) { height: 25px; } .academy-topnav { display: flex; gap: 24px; align-items: center; } .academy-topnav a { text-decoration: none; font-size: 16px; color: var(--ink2); padding: 10px 0; } .academy-topnav a[aria-current=page] { color: var(--sel); box-shadow: 0 3px var(--sel); } .academy-tools { display: flex; gap: 12px; align-items: center; } .academy-tools form { margin: 0; } .academy-tools .btn { min-height: 38px; } .academy-top .lang { height: 38px; background: var(--panel); color: var(--ink); border: 1px solid var(--line); border-radius: 5px; } .academy-account { border: 1px solid var(--line); border-radius: 50%; width: 36px; height: 36px; display: grid; place-items: center; text-decoration: none; } .academy-body { display: grid; grid-template-columns: 210px minmax(0,1fr); gap: 0; flex: 1; max-width: 1600px; width: 100%; margin: auto; } .academy-main { min-width: 0; padding: 36px 40px 52px; } .academy-sidebar { padding: 30px 22px; border-right: 1px solid var(--line); background: transparent; } .academy-sidebar h2 { font-size: 26px; margin: 0 0 20px; } .academy-sidebar .brw__row { padding: 13px 8px; min-height: 48px; border: 0; border-radius: 6px; gap: 12px; display: flex; text-decoration: none; } .academy-sidebar .brw__row[aria-current=page] { background: var(--sel-dim); color: var(--sel); } .academy-sidebar .brw__name { font-size: 16px; } .academy-sidebar .brw__n { font-size: 13px; color: var(--ink3); } .academy-sidebar .brw__dot { width: 7px; height: 7px; } .academy-sidebar p { font-size: 13px; line-height: 1.6; margin-top: 30px; color: var(--ink2); } .academy-inspector { margin-top: 32px; border-top: 1px solid var(--line); padding-top: 18px; } .academy-inspector summary { cursor: pointer; font-size: 13px; color: var(--ink2); } .academy-inspector .insp { padding: 22px; max-width: 600px; font-size: 13px; background: var(--panel); margin-top: 15px; } .wrap { padding: 0; max-width: 1180px; margin: auto; display: block; } .head, .dash__hd { margin: 0 0 26px; gap: 24px; align-items: start; } .head p, .landing__lead { font-size: 16px; line-height: 1.7; color: var(--ink2); margin-top: 12px; } .silk { font-size: 13px; letter-spacing: .08em; line-height: 1.6; color: var(--ink2); font-family: var(--font-ui); } .mono { font-family: var(--font-mono); } .btn { font: 13px/1.4 var(--font-ui); padding: 11px 17px; min-height: 42px; border-radius: 6px; border: 1px solid var(--line2); box-shadow: none; text-transform: none; letter-spacing: normal; background: var(--panel); color: var(--ink); } .btn--primary { background: var(--sel); border-color: var(--sel); color: var(--sel-ink); } .btn--lg { padding: 14px 22px; font-size: 16px; } .btn:disabled { opacity: .48; } .icon-btn { min-width: 42px; } .quiet { font-size: 13px; color: var(--sel); display: inline-block; padding: 8px 0; } .group { margin-top: 32px; } .hr { margin: 20px 0; background: var(--line); } .sb { position: static; min-height: 38px; height: auto; display: flex; gap: 18px; flex-wrap: wrap; padding: 10px 28px; border-top: 1px solid var(--line); background: var(--app); font-size: 13px; } .sb__x { font-size: 13px; } .academy-eyebrow { font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink2); margin-bottom: 10px; } .academy-hero { display: grid; grid-template-columns: minmax(0,1.5fr) minmax(240px,1fr); gap: 24px; align-items: center; padding: 30px 0 40px; border-bottom: 1px solid var(--line); margin-bottom: 30px; } .academy-hero h1 { margin: 8px 0 18px; } .academy-hero p { font-size: 16px; max-width: 620px; color: var(--ink2); } .academy-hero .btn { margin-top: 22px; } .academy-hero__aside { background: var(--panel2); padding: 26px; border-radius: 8px; } .academy-hero__aside h2 { font-size: 26px; margin: 0 0 14px; } .academy-hero__aside .sbar { margin-top: 20px; } .academy-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 24px; } .academy-section { min-width: 0; margin: 0; } .academy-section>h2 { margin: 0 0 18px; font-size: 26px; } .academy-empty { padding: 28px; border: 1px dashed var(--line2); border-radius: 8px; background: var(--panel); color: var(--ink2); line-height: 1.7; } .academy-callout { background: var(--panel2); padding: 24px; border-radius: 8px; } .academy-path { padding: 24px; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; margin: 24px 0 32px; } .academy-path h2 { font-size: 26px; margin: 0 0 18px; } .academy-path ol { padding: 0; margin: 0; list-style: none; display: flex; gap: 12px; flex-wrap: wrap; } .academy-path__item { flex: 1 1 145px; min-width: 0; } .academy-path__item a { display: flex; align-items: center; gap: 12px; text-decoration: none; font-size: 13px; color: var(--ink2); padding: 8px 0; } .academy-path__number { flex: none; width: 26px; height: 26px; display: grid; place-items: center; border: 1px solid var(--line2); border-radius: 50%; font-size: 13px; } .academy-path__item.is-current a { color: var(--sel); } .academy-path__item.is-current .academy-path__number { background: var(--sel); color: var(--sel-ink); border-color: var(--sel); } .academy-path__item.is-done .academy-path__number { background: var(--ok-dim); border-color: var(--ok); color: var(--ok); } .academy-path p { font-size: 13px; color: var(--ink2); margin: 18px 0 0; } .academy-progress-grid { display: grid; grid-template-columns: minmax(0,1.4fr) minmax(280px,1fr); gap: 24px; align-items: start; } .academy-progress-grid>* { min-width: 0; } .academy-wide { grid-column: 1/-1; } .academy-evidence { display: flex; flex-wrap: wrap; gap: 24px; margin: 28px 0; padding: 22px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .academy-evidence>div { flex: 1; min-width: 160px; } .academy-evidence span { font-size: 13px; color: var(--ink2); display: block; } .academy-evidence strong { font-size: 20px; font-weight: 500; } .academy-details { border: 1px solid var(--line); background: var(--panel); border-radius: 8px; margin-top: 24px; padding: 20px; } .academy-details>summary { cursor: pointer; font-size: 16px; } .academy-details[open]>summary { margin-bottom: 24px; } .mod, .coach, .closest, .pnl { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; box-shadow: none; overflow: visible; } .mod__head, .coach__head, .pnl__hd { padding: 17px 22px; background: transparent; border-bottom: 1px solid var(--line); font-size: 16px; } .mod__body { padding: 22px; } .mod__head .silk { font-size: 13px; letter-spacing: normal; } .coach { padding: 24px; background: var(--panel2); } .coach__head { padding: 0 0 14px; gap: 18px; } .coach__lead { font-size: 26px; line-height: 1.25; margin: 20px 0 12px; } .coach__why, .coach__reco { font-size: 13px; line-height: 1.7; } .coach__confidence, .coach__foot, .ev__k { font-size: 13px; } .coach__acts { margin-top: 22px; gap: 12px; flex-wrap: wrap; } .coach__ev, .evidence { font-size: 13px; gap: 18px; margin-top: 20px; } .ro__v { font-size: 34px; } .cscale { margin-top: 25px; } .cscale__label { font-size: 11px; } .rpt-grid, .report-grid { gap: 18px; } .zones { gap: 12px; } .zone { min-height: 33px; gap: 12px; } .zone__l, .zone__n { font-size: 13px; } .zone__t { height: 8px; } .field__hint, .prose, .kv, .insp__sub { font-size: 13px; line-height: 1.65; } .kv { padding: 8px 0; } .chip { font-size: 13px; padding: 6px 10px; border-radius: 20px; background: var(--panel2); color: var(--ink2); } .chip--sel { background: var(--sel-dim); color: var(--sel); } .panels { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 24px; } .pnl { padding: 0; text-decoration: none; color: var(--ink); } .pnl__body { padding: 22px; gap: 24px; } .pnl__lv { font-size: 26px; } .pnl__n, .pnl__ab { font-size: 13px; line-height: 1.6; } .curve__ax { font-size: 11px; } .sbar { border-top: 1px solid var(--line); padding: 18px 22px; } .sbar__k, .sbar__lab, .sbar__left, .sbar__nm { font-size: 13px; line-height: 1.6; } .sbar__top, .sbar__bot { gap: 12px; flex-wrap: wrap; } .sbar__cells { gap: 6px; margin: 12px 0; } .sbar__c { height: 5px; } .lede__t { font-size: 34px; line-height: 1.3; } .lede__ev { font-size: 13px; line-height: 1.7; margin-top: 12px; } .manset { display: grid; grid-template-columns: 1.5fr 1fr; gap: 24px; } .dash__go { font: 16px var(--font-ui); padding: 14px 20px; background: var(--sel); color: var(--sel-ink); border-radius: 6px; margin-top: 20px; } .dash__win { font-size: 13px; } .top2 { gap: 24px; margin: 20px 0 32px; } .hero, .strip { padding: 24px; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; text-decoration: none; color: var(--ink); } .hero__led, .strip__led { display: none; } .hero__in, .strip__in { padding: 0; gap: 18px; } .hero__nm { font: 34px var(--font-editorial); } .hero__q, .strip__q { font-size: 16px; line-height: 1.6; margin-top: 10px; } .hero__k, .hero__meta { font-size: 13px; line-height: 1.6; } .hero__go, .strip__go { font-size: 13px; color: var(--sel); margin-top: 18px; } .strips { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 24px; margin: 16px 0; } .strip__nm { font: 26px var(--font-editorial); } .strip__ic { width: 36px; } .rows { margin: 24px 0; display: grid; grid-template-columns: 1fr 1fr; gap: 18px; } .row { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 18px; } .row__a { display: grid; grid-template-columns: auto 1fr; gap: 12px; text-decoration: none; } .row__nm { font: 26px var(--font-editorial); } .row__bar { grid-column: 1/-1; } .row__n, .row__lv { font-size: 13px; } .resume { display: block; padding: 25px 28px; background: var(--panel2); border: 1px solid var(--line); border-radius: 8px; text-decoration: none; color: var(--ink); margin-bottom: 24px; } .resume__do { font-size: 34px; color: var(--sel); } .resume__what { font-size: 20px; display: block; margin-top: 12px; } .able { font-size: 16px; line-height: 1.7; margin: 20px 0; } .stages { margin-top: 28px; gap: 12px; } .st { border: 1px solid var(--line); background: var(--panel); border-radius: 6px; } .st a, .st--flat { padding: 18px; } .st__name, .st__t { font-size: 16px; } .st__desc, .st__need, .st__why { font-size: 13px; line-height: 1.65; } .st--current, .st.is-selected { background: var(--sel-dim); } .st__room { font-size: 13px; color: var(--sel); } .landing .pane, .auth .pane { background: var(--app); } .landing__body { padding: 40px 24px; } .hero2 { display: grid; grid-template-columns: 1.2fr 1fr; gap: 24px; max-width: 1120px; margin: 20px auto 45px; align-items: center; } .hero2 h1 { font-size: clamp(38px,4.3vw,62px); line-height: 1.05; } .hero2__dim { color: var(--ink); } .hero2__cta { gap: 18px; flex-wrap: wrap; margin-top: 28px; } .hero2__note { font-size: 13px; } .academy-method { padding: 32px; background: var(--panel2); border-radius: 10px; } .academy-method h2 { font-size: 34px; margin: 0 0 22px; } .academy-method ol { list-style: none; padding: 0; margin: 0; display: grid; gap: 18px; } .academy-method li { display: flex; align-items: center; gap: 12px; font-size: 16px; } .academy-method li span { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid var(--line2); border-radius: 50%; color: var(--sel); } .cards2 { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 18px; max-width: 1120px; margin: auto; } .card2 { padding: 26px; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; text-decoration: none; color: var(--ink); } .card2__name { font: 26px var(--font-editorial); margin: 16px 0 10px; } .card2__tag { font-size: 13px; line-height: 1.6; } .pickhead { max-width: 1120px; margin: 20px auto; } .tp { height: auto; min-height: 64px; padding: 13px 24px; background: var(--panel); border-bottom: 1px solid var(--line); gap: 18px; flex-wrap: wrap; } .tp__mark { background: transparent; color: var(--sel); border: 0; font: 26px var(--font-editorial); width: auto; } .tp__k { font-size: 11px; } .tp__v { font-size: 13px; } .tp__btns { gap: 12px; } .body--bare { display: block; flex: 1; min-height: calc(100vh - 110px); padding: 0; background: var(--app); } .play { height: calc(100vh - 110px); min-height: 620px; overflow: hidden; } .play-frame { width: 100%; height: 100%; border: 0; display: block; } .gate { background: color-mix(in srgb,var(--app) 80%,transparent); backdrop-filter: blur(8px); } .gate__box { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 32px; max-width: 540px; box-shadow: 0 20px 60px #0002; } .gate__title { font: 34px/1.2 var(--font-editorial); } .gate__body, .gate__caution { font-size: 16px; line-height: 1.7; } .gate__acts { gap: 12px; margin-top: 24px; } .auth__box, .auth-card { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 30px; } .field input, .field select, .input { min-height: 44px; font-size: 16px; border-radius: 5px; background: var(--panel); color: var(--ink); } .table { font-size: 13px; } .table th, .table td { padding: 12px; } .log-table { overflow: auto; } .weak-grid { gap: 18px; } svg text { font-family: var(--font-ui); } @media(max-width:1100px) { .academy-top { padding: 16px 22px; gap: 18px; } .academy-topnav { gap: 18px; } .academy-tools { gap: 6px; } .academy-body { grid-template-columns: 175px minmax(0,1fr); } .academy-sidebar { padding: 28px 14px; } .academy-main { padding: 28px; } .academy-progress-grid { grid-template-columns: 1fr; } .academy-wide { grid-column: auto; } .strips { grid-template-columns: 1fr 1fr; } .panels { grid-template-columns: 1fr; } .academy-hero { grid-template-columns: 1fr 1fr; gap: 24px; } } @media(max-width:760px) { .academy-top { flex-wrap: wrap; padding: 14px 18px; gap: 12px; } .academy-brand { font-size: 20px; } .academy-topnav { order: 3; justify-content: center; width: 100%; gap: 24px; border-top: 1px solid var(--line); padding-top: 6px; } .academy-tools .lang { max-width: 88px; } .academy-tools form[action='/logout'] { display: none; } .academy-body { display: block; } .academy-sidebar { border-right: 0; border-bottom: 1px solid var(--line); padding: 14px 18px; } .academy-sidebar h2, .academy-sidebar p { display: none; } .academy-sidebar nav { display: flex; gap: 6px; overflow-x: auto; } .academy-sidebar .brw__row { min-height: 40px; white-space: nowrap; flex: none; padding: 8px 12px; } .academy-sidebar .brw__n { display: none; } .academy-main { padding: 26px 20px; } .academy-hero, .academy-grid, .manset, .hero2 { grid-template-columns: 1fr; gap: 24px; } .academy-hero { padding-top: 6px; } .academy-hero__aside { padding: 22px; } .strips, .cards2, .rows { grid-template-columns: 1fr 1fr; gap: 18px; } .hero2 { margin-top: 10px; margin-bottom: 30px; } .academy-method { padding: 24px; } .pnl__body { grid-template-columns: 150px minmax(0,1fr); gap: 18px; padding: 18px; } .academy-path { padding: 20px; } .academy-path__item { flex-basis: 130px; } .tp { padding: 12px 16px; gap: 12px; } .tp__group { gap: 6px; } .tp__group:has([data-trial-count]) { margin-right: auto; } .play { height: calc(100dvh - 160px); min-height: 500px; } .sb { padding: 10px 16px; } .sb__x { display: none; } .coach { padding: 22px; } .mod__body { padding: 20px; } .coach__lead { font-size: 26px; } .gate__box { margin: 18px; width: calc(100% - 36px); padding: 26px; } .top2 { display: block; } .hero { margin: 18px 0; } .sbar__pct { font-size: 13px; } } @media(max-width:440px) { .academy-main { padding: 24px 16px; } .academy-brand { font-size: 20px; } .academy-tools { gap: 6px; } .academy-tools .btn { padding: 8px; min-width: 34px; } .academy-account { width: 32px; height: 32px; } .academy-topnav a { font-size: 16px; } .strips, .cards2, .rows { grid-template-columns: 1fr; } .pnl__body { grid-template-columns: 1fr; } .curve { max-width: 100%; } .academy-hero h1 { font-size: 34px; } .coach__acts { display: grid; grid-template-columns: 1fr; } .coach__acts .btn { width: 100%; } .academy-evidence { gap: 18px; } .tp__btns { flex-wrap: wrap; } .tp__k { font-size: 11px; } .tp .btn { font-size: 13px; padding: 9px 11px; } .academy-path ol { display: grid; grid-template-columns: 1fr; } .academy-path__item { border-bottom: 1px solid var(--line); } .mod__head { flex-wrap: wrap; gap: 12px; } .cscale__label { font-size: 11px; } .rpt__grid { grid-template-columns: 1fr!important; } .table { font-size: 13px; } .table th, .table td { padding: 8px; } .st { flex-wrap: wrap; } .st__room { width: 100%; } } @media(prefers-reduced-motion:reduce) { *, *::before, *::after { animation: none!important; transition: none!important; scroll-behavior: auto!important; } } .app { padding: 0; } .tp__mark { font: 700 20px var(--font-editorial); color: var(--ink); text-decoration: none; } .academy-path ol { display: grid; grid-template-columns: repeat(auto-fit,minmax(160px,1fr)); } .academy-path__item { min-width: 0; } .academy-path__item a { min-height: 44px; } .academy-account { flex-shrink: 0; } @media(max-width:600px) { .academy-path ol { grid-template-columns: 1fr 1fr; } .tp__mark { font-size: 20px; } .academy-path { padding: 18px; } .academy-path__item a { font-size: 13px; } } /* ── DÜZELTME: LED gizlenince kart içeriği 3px'lik satıra sıkışıyordu ── `.hero`/`.strip` (üstteki bölüm) `grid-template-rows: 3px 1fr` ile kuruluyor: 1. satır kanal rengindeki ince LED şeridi, 2. satır içerik. Akademi katmanı LED'i `display:none` yapınca LED ızgaradan TAMAMEN çıktı ve içerik BİRİNCİ satıra, yani 3 piksele düştü. `.hero`/`.strip`in kendi `overflow:hidden`ı da gerisini kırptı: /games ekranındaki altı kartın hepsi BOŞ görünüyordu — ad, soru, "başla" hiçbiri çizilmiyordu (CLAUDE.md §11 bu satırları ZORUNLU sayıyor). Gerçek tarayıcıda ölçülerek bulundu: kart 53px, içeriği 173px, `.strip__in` yüksekliği 3px. Satır şablonu tek satıra iner — LED yoksa onun satırı da yok. */ .hero, .strip { grid-template-rows: 1fr; } /* ═══════════════════════════════════════════════════════════════════ GELİŞİM SAYFASI — üç sütun (2026 maketi) ═══════════════════════════════════════════════════════════════════ sol nereye gidiyorsun — müfredat yolu orta ne değişti — gelişim eğrisi, zayıflık, düzen sağ şimdi ne yapmalı — koç kartı, son öneri, düzen ızgarası Eski tek sütunda "ne değişti" ile "ne yapmalıyım" alt alta duruyordu ve ikisi birbirine karışıyordu. Sağ sütun EYLEM, orta sütun ÖLÇÜM. Modüllerin hiçbiri yeniden yazılmadı; yalnızca yerleri değişti. Ölçek §6'ya bağlı: yalnızca 9/11/13/16/20/26/34 ve 1/3/6/12/18/24. */ .growth__tabs { display: flex; flex-wrap: wrap; gap: 6px; border-bottom: 1px solid var(--line); padding-bottom: 12px; margin-bottom: 18px; } .growth__tab { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: var(--r-sm); font-size: 13px; color: var(--ink2); text-decoration: none; border: 1px solid transparent; } .growth__tab:hover { background: var(--alt); } .growth__tab.is-on { color: var(--ink); background: var(--panel2); border-color: var(--line); font-weight: 500; } .growth__shell { display: grid; gap: 24px; grid-template-columns: 232px minmax(0, 1fr) 272px; align-items: start; } .growth__main { min-width: 0; } .growth__rail { min-width: 0; } /* Dar ekranda sütunlar SIRAYLA düşer: önce eylem (sağ sütun), sonra ölçüm, en sona yol — telefonda "şimdi ne yapmalıyım" en üstte olmalı. */ @media (max-width: 1100px) { .growth__shell { grid-template-columns: minmax(0, 1fr) 272px; } .growth__shell > .growth__rail:first-child { grid-column: 1 / -1; order: 3; } } @media (max-width: 860px) { .growth__shell { grid-template-columns: minmax(0, 1fr); } .growth__shell > .growth__rail--act { order: -1; } } /* ── dikey müfredat yolu ── */ .pathv { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; } .pathv__row { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 6px; align-items: baseline; padding: 3px 0; color: var(--ink3); font-size: 13px; } .pathv__n { font-size: 11px; color: var(--ink3); } .pathv__t { min-width: 0; overflow-wrap: anywhere; } .pathv__row.is-done { color: var(--ink2); } .pathv__row.is-done .pathv__n { color: var(--ok); } .pathv__row.is-here { color: var(--ink); font-weight: 500; } .pathv__row.is-here .pathv__n { color: var(--tc, var(--sel)); } /* ── "daha rahat" / "biraz daha çalış" ── */ .comfort__pair { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); } @media (max-width: 560px) { .comfort__pair { grid-template-columns: minmax(0, 1fr); } } .comfort { border: 1px solid var(--line); border-radius: 12px; padding: 12px; background: var(--panel); min-width: 0; } .comfort--ok { background: var(--ok-dim); border-color: color-mix(in srgb, var(--ok) 30%, transparent); } .comfort--work { background: var(--accent-dim, var(--alt)); } .comfort__t { font-size: 13px; color: var(--ink2); } .comfort__v { font-size: 16px; color: var(--ink); margin-top: 3px; overflow-wrap: anywhere; } .comfort__n { font-size: 11px; color: var(--ink3); margin-top: 6px; } /* ── "ilerleme nasıl okunur?" ── */ .howto > summary { cursor: pointer; } .howto__list { margin: 0; display: grid; gap: 6px; } .howto__list dt { font-size: 13px; color: var(--ink); } .howto__list dd { margin: 0 0 6px; font-size: 13px; line-height: 1.5; color: var(--ink3); } /* Kenar sütunlarının kartları — `.mod` ile AYNI görünür ama AYRI sınıf. `.mod` sayısı bir dürüstlük kontrolüdür (tests/e2e.mjs: az veriyle ölçüm modülü çizilmez); gezinme ve açıklayıcı kartlar o sayıya girmemeli, yoksa kontrol anlamını yitirir. */ .railmod { border: 1px solid var(--line); border-radius: 12px; background: var(--panel); overflow: hidden; } .railmod > .mod__head { padding: 12px 12px 0; } .railmod > .mod__body { padding: 12px; } .railmod > summary.mod__head { padding: 12px; } /* ── Gözlem ekranı (/admin) — ürün yüzeyi değil, alet ────────────── Yoğun ve taranabilir olmalı: burada amaç etkilemek değil, saymak. Ölçek §6'ya bağlı kalır (scale.mjs bu dosyayı tarıyor). */ .adm { width: 100%; border-collapse: collapse; font-size: 13px; } .adm th, .adm td { padding: 6px 12px 6px 0; text-align: left; border-bottom: 1px solid var(--line); vertical-align: baseline; } .adm th { font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink3); font-weight: 400; } .adm__n { text-align: right; font-variant-numeric: tabular-nums; } .adm tbody tr:hover { background: var(--alt); } .adm__spark { display: flex; align-items: flex-end; gap: 1px; height: 34px; } .adm__spark i { flex: 1 1 auto; min-width: 2px; background: var(--sel); opacity: .75; border-radius: 1px 1px 0 0; } /* ── Oyun sayfası: KOMPAKT uygulama çubuğu (2026, yan konsol) ── Eski bant 64 px'ti, sarıyordu ve dinleme odasında GİZLENİYORDU (kullanıcı istemişti: oda kendi başlığını taşıyordu). Yan konsol düzeninde odanın kendi başlık şeridi yok, yerine ince ders satırı var; uygulamaya dönüş yolu bu çubukta durur. Tek satır, SABİT 52 px — oyun alanının yüksekliği bu sayıdan hesaplanıyor, çubuk sararsa iframe kesilirdi. Odada alt durum çubuğu gizlenir (`data-room`, static/play.js): odanın kendi alt şeridi "Alıştırmaya geç"i taşıyor, iki alt çubuk yüksekliği boşa harcıyordu. */ .tp.tp--play { height: 52px; min-height: 52px; box-sizing: border-box; flex-wrap: nowrap; padding: 0 18px; gap: 18px; overflow: hidden; } .tp--play .tp__mark { font: 700 20px var(--font-editorial); white-space: nowrap; } .tp__nav { display: flex; gap: 18px; } .tp__nav a { display: inline-flex; align-items: center; min-height: 44px; font-size: 13px; color: var(--ink2); text-decoration: none; white-space: nowrap; } .tp__nav a:hover { color: var(--ink); } .tp__nav a[aria-current="page"] { color: var(--ink); box-shadow: inset 0 -2px 0 var(--sel); } .tp--play .tp__game { display: flex; flex-direction: row; align-items: center; gap: 6px; border-left: 1px solid var(--line); padding-left: 18px; } .tp--play .tp__game .brw__dot { width: 10px; height: 10px; border-radius: 2px; background: var(--tc); } .tp__gamename { font: 600 13px var(--font-ui); color: var(--tc-ink); white-space: nowrap; } .tp--play .tp__group { white-space: nowrap; } .tp--play .tp__k { font-size: 11px; } .tp--play .btn { min-height: 36px; padding: 6px 12px; font-size: 13px; } .app--play .play { height: calc(100vh - 52px - 43px); height: calc(100dvh - 52px - 43px); min-height: 480px; } .app--play[data-room] > .sb { display: none; } .app--play[data-room] .play { height: calc(100vh - 52px); height: calc(100dvh - 52px); } @media (max-width: 1100px) { .tp__nav { display: none; } } @media (max-width: 760px) { .tp.tp--play { padding: 0 12px; gap: 12px; } .tp--play .tp__mark { font-size: 16px; } .tp--play .tp__group:not(.tp__game) { display: none; } .tp--play .tp__game { padding-left: 10px; } } @media (max-width: 420px) { .tp--play .tp__mark { display: none; } .tp--play .tp__game { border-left: 0; padding-left: 0; } } /* ═══════════════════════════════════════════════════════════════════ KARŞILAMA SAYFASI — Listening Academy (2026) ═══════════════════════════════════════════════════════════════════ Görünüm: src/views/landing.mjs · davranış: static/landing.js. Palet sitenin KENDİ jetonları (--app/--panel/--ink/--sel/--ok) — iki tema da kendiliğinden çalışır. Ölçek kuralı (CLAUDE.md §6) burada da geçerli: tip 9/11/13/16/20/26/34 + clamp() manşetler, boşluk 1/3/6/12/18/24. `tests/scale.mjs` bu bölümü de tarar. İSTİSNA — `.lp-device`: dinleme odası ve telefon önizlemeleri SABİT koyu palet taşır, çünkü oyun ekranları sitenin temasını izlemez (CLAUDE.md §8). Önizleme gerçek ürünle tutarlı olsun diye. */ .lp { min-height: 100vh; background: var(--app); color: var(--ink); overflow-x: clip; } .lp-main { display: block; } .lp-inner { max-width: 1180px; margin-inline: auto; padding-inline: 40px; box-sizing: border-box; } .lp [id] { scroll-margin-top: 84px; } @media (prefers-reduced-motion: no-preference) { html:has(.lp) { scroll-behavior: smooth; } } /* ── üst şerit ── */ .lp-top { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 24px; padding: 12px 32px; border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--app) 90%, transparent); backdrop-filter: blur(10px); } .lp-brand { font-size: 26px; } .lp-nav { display: flex; gap: 24px; margin-left: 12px; } .lp-nav a, .lp-top__login, .lp-top__signup, .lp-foot__links a { display: inline-flex; align-items: center; min-height: 44px; white-space: nowrap; color: var(--ink2); text-decoration: none; font-size: 13px; } .lp-nav a:hover, .lp-top__login:hover, .lp-top__signup:hover { color: var(--ink); } .lp-tools { display: flex; align-items: center; gap: 12px; margin-left: auto; } .lp-tools .langform { margin: 0; } .lp-top__try { min-height: 40px; display: inline-flex; align-items: center; } /* ── ortak tipografi ── */ .lp-eyebrow { display: flex; align-items: center; gap: 12px; margin: 0 0 18px; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink2); } .lp-eyebrow::before { content: ''; width: 22px; height: 1px; background: var(--ok); flex: none; } .lp-eyebrow--center { justify-content: center; } .lp-num { font: italic 16px var(--font-editorial); color: var(--ok); letter-spacing: 0; text-transform: none; } .lp-h1 { margin: 0; font-family: var(--font-editorial); font-weight: 400; font-size: clamp(38px, 4.4vw, 64px); line-height: 1.05; letter-spacing: -.045em; } .lp-h1 em { font-style: normal; color: var(--ok); } .lp-h2 { margin: 0; font-family: var(--font-editorial); font-weight: 400; font-size: clamp(32px, 3.6vw, 48px); line-height: 1.08; letter-spacing: -.04em; } .lp-lead { font-size: 16px; line-height: 1.75; color: var(--ink2); max-width: 46ch; margin: 24px 0 0; } .lp-copy > p:not(.lp-eyebrow) { font-size: 16px; line-height: 1.75; color: var(--ink2); max-width: 46ch; margin: 18px 0 0; } .lp-textlink { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; color: var(--ink); font-size: 13px; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--line2); background: none; border: 0; padding: 0; cursor: pointer; } .lp-textlink:hover { text-decoration-color: var(--sel); } .lp-textlink span { color: var(--sel); } .lp-cta { min-height: 48px; display: inline-flex; align-items: center; gap: 12px; padding: 12px 22px; font-size: 16px; } .lp-caption { font-size: 11px; color: var(--ink3); margin: 12px 0 0; text-align: center; } .lp-note { font-size: 11px; color: var(--ink3); margin: 12px 0 0; } .lp-checks { list-style: none; padding: 0; margin: 24px 0 12px; display: grid; gap: 12px; } .lp-checks li { display: flex; gap: 12px; align-items: center; font-size: 13px; color: var(--ink2); } .lp-checks svg { color: var(--ok); flex: none; } /* ── 1. hero ── */ .lp-hero { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); gap: 24px; align-items: center; padding-block: 64px 36px; } .lp-hero__acts { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; margin-top: 30px; } .lp-hero__note { font-size: 13px; color: var(--ink3); margin: 12px 0 0; } .lp-devices { display: flex; align-items: center; gap: 6px; margin: 24px 0 0; font-size: 13px; color: var(--ink2); flex-wrap: wrap; } .lp-devices svg { color: var(--ok); } .lp-devices span { margin-left: 6px; } .lp-scene { margin: 0; min-width: 0; } .lp-scene__top { display: flex; align-items: center; gap: 12px; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink2); } .lp-pulse { width: 7px; height: 7px; border-radius: 50%; background: var(--sel); } .lp-scene__stage { position: relative; aspect-ratio: 800 / 520; background: var(--app); margin-top: 6px; } .lp-scene__static, .lp-scene__canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; } .lp-scene__canvas { touch-action: pan-y; cursor: ew-resize; } .lp-sp__fill { fill: var(--app); } .lp-sp__line { fill: none; stroke: var(--ink3); stroke-width: 1.2; } .lp-sp__line--front { stroke: var(--ink); stroke-width: 2; } .lp-sp__band { fill: none; stroke: var(--sel); stroke-width: 2.4; } .lp-sp__ax { fill: var(--ink3); font: 11px var(--font-mono); } .lp-sp__gain { fill: var(--sel); font: 13px var(--font-mono); } .lp-sp__pill { fill: var(--app); stroke: var(--sel); stroke-width: 1; } .lp-scene__ctrl { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; padding-top: 12px; border-top: 1px solid var(--line); } .lp-seg { display: inline-flex; border: 1px solid var(--line2); border-radius: 6px; overflow: hidden; } .lp-seg button { min-height: 44px; padding: 10px 14px; border: 0; background: transparent; color: var(--ink2); font: 13px var(--font-ui); cursor: pointer; } .lp-seg button + button { border-left: 1px solid var(--line2); } .lp-seg button[aria-pressed="true"] { background: var(--sel); color: var(--sel-ink); } .lp-band { display: flex; align-items: center; gap: 12px; flex: 1 1 220px; min-width: 0; } .lp-band__k { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink3); } .lp-band input { flex: 1 1 auto; min-width: 0; min-height: 44px; accent-color: var(--sel); margin: 0; } .lp-band__v { font-size: 13px; color: var(--sel); min-width: 64px; text-align: right; } .lp-scene__hint { font-size: 11px; color: var(--ink3); margin: 6px 0 0; } .lp-steps { list-style: none; margin: 0; padding: 24px 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .lp-steps li { display: flex; gap: 12px; align-items: baseline; } .lp-steps__n { font: italic 26px var(--font-editorial); color: var(--ok); font-weight: 400; } .lp-steps strong { display: block; font-size: 16px; font-weight: 600; } .lp-steps small { display: block; font-size: 13px; color: var(--ink2); margin-top: 3px; } /* ── bölüm iskeleti ── */ .lp-section { padding-block: 96px; } .lp-split { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); gap: 24px 64px; align-items: center; } .lp-split--media-right { grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr); } #path .lp-split { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); } .lp-media { min-width: 0; } .lp-band-bg { background: color-mix(in srgb, var(--ok) 7%, var(--app)); border-block: 1px solid var(--line); } .lp-band-bg--panel { background: var(--panel); } .lp-intro { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px 64px; margin-bottom: 36px; } .lp-intro > p { font-size: 16px; line-height: 1.75; color: var(--ink2); max-width: 40ch; margin: 0; } /* ── oda ve telefon önizlemeleri: SABİT koyu palet (§8) ── */ .lp-device { --d-bg: #171e20; --d-panel: #1e282a; --d-panel2: #24302c; --d-line: #3b4947; --d-ink: #f1f0e7; --d-ink2: #becbc4; --d-ink3: #9eb0a6; --d-sel: #9aafff; --d-sel-ink: #142348; --d-sel-dim: #293957; --d-chan: #9085e9; color-scheme: dark; background: var(--d-bg); color: var(--d-ink); font-family: var(--font-ui); } .lp-room { border: 1px solid var(--d-line); border-radius: 10px; overflow: hidden; box-shadow: 0 24px 60px rgba(10, 18, 18, .18); } .lp-room__bar { display: flex; align-items: center; gap: 12px; padding: 12px 18px; border-bottom: 1px solid var(--d-line); font-size: 11px; letter-spacing: .06em; color: var(--d-ink3); } .lp-room__bar b { font-weight: 400; color: var(--d-ink); } .lp-room__dot { width: 8px; height: 8px; border-radius: 2px; background: var(--d-chan); flex: none; } .lp-room__x { margin-left: auto; color: var(--d-ink2); } .lp-room__body { padding: 24px; } .lp-room__head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px 18px; align-items: start; } .lp-room__q { margin: 0; font: 26px/1.15 var(--font-editorial); letter-spacing: -.03em; color: var(--d-ink); } .lp-room__hint { margin: 6px 0 0; font-size: 13px; line-height: 1.6; color: var(--d-ink2); } .lp-room__modes { display: inline-flex; border: 1px solid var(--d-line); border-radius: 6px; overflow: hidden; } .lp-room__modes span { padding: 9px 12px; font-size: 11px; color: var(--d-ink2); white-space: nowrap; } .lp-room__modes span.is-on { background: var(--d-sel); color: var(--d-sel-ink); } .lp-room__cue { margin: 18px 0; padding-left: 12px; border-left: 2px solid var(--d-sel); font-size: 13px; line-height: 1.6; color: var(--d-ink); } .lp-eq { background: var(--d-panel2); border-radius: 8px; padding: 12px; } .lp-eq__plot { position: relative; aspect-ratio: 600 / 170; border: 1px solid var(--d-line); border-radius: 5px; overflow: hidden; } .lp-eq__plot svg { position: absolute; inset: 0; width: 100%; height: 100%; } .lp-eq__region { position: absolute; top: 0; bottom: 0; background: rgba(241, 240, 231, .025); } .lp-eq__region--alt { background: rgba(241, 240, 231, .06); } .lp-eq__region i { position: absolute; top: 6px; left: 50%; transform: translateX(-50%); font: 9px var(--font-mono); font-style: normal; letter-spacing: .12em; color: var(--d-ink3); } .lp-eq__zero { stroke: var(--d-line); stroke-width: 1; stroke-dasharray: 4 4; vector-effect: non-scaling-stroke; } .lp-eq__curve { fill: none; stroke: var(--d-sel); stroke-width: 2.4; vector-effect: non-scaling-stroke; } .lp-eq__marker { stroke: var(--d-ink3); stroke-width: 1; stroke-dasharray: 2 4; opacity: .6; vector-effect: non-scaling-stroke; } .lp-eq__zlabel { position: absolute; left: 6px; font-size: 9px; color: var(--d-ink3); } .lp-eq__ax { display: flex; justify-content: space-between; gap: 12px; margin-top: 6px; font-size: 11px; color: var(--d-ink3); } .lp-eq__ax b { font-weight: 400; color: var(--d-sel); } .lp-eq--compact { padding: 6px; } .lp-eq--compact .lp-eq__ax { font-size: 9px; } .lp-room__deck { display: grid; grid-template-columns: minmax(0, 1fr) 190px; gap: 18px; margin-top: 18px; align-items: start; } .lp-room__vars { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } .lp-var { position: relative; display: grid; gap: 3px; align-content: start; text-align: left; min-height: 76px; padding: 12px; border: 1px solid var(--d-line); border-radius: 6px; background: transparent; color: var(--d-ink); font-family: var(--font-ui); cursor: pointer; } .lp-var:hover { border-color: var(--d-ink3); } .lp-var[aria-pressed="true"] { background: var(--d-sel-dim); border-color: var(--d-sel); } .lp-var__play { font-size: 11px; color: var(--d-sel); } .lp-var__name { font-size: 16px; } .lp-var__sub { font-size: 11px; color: var(--d-ink3); } .lp-var:focus-visible { outline: 3px solid var(--d-sel); outline-offset: 3px; } .lp-room__steps { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 11px; color: var(--d-ink3); } .lp-room__steps li { display: flex; align-items: center; gap: 6px; } .lp-room__steps i { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; border: 1px solid var(--d-line); font-size: 9px; font-style: normal; } .lp-room__steps li.is-on { color: var(--d-ink); } .lp-room__steps li.is-on i { background: var(--d-sel); border-color: var(--d-sel); color: var(--d-sel-ink); } .lp-room__side { border: 1px solid var(--d-line); border-radius: 8px; padding: 12px; background: var(--d-panel); } .lp-room__k { display: flex; justify-content: space-between; font-size: 11px; color: var(--d-ink2); } .lp-room__k b { font-weight: 400; color: var(--d-ink); } .lp-room__chips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin-top: 12px; } .lp-room__chips span { padding: 6px; text-align: center; font-size: 11px; border: 1px solid var(--d-line); border-radius: 5px; color: var(--d-ink2); } .lp-room__chips span.is-on { background: var(--d-sel-dim); border-color: var(--d-sel); color: var(--d-ink); } .lp-room__foot { display: flex; justify-content: flex-end; padding: 12px 24px; border-top: 1px solid var(--d-line); } .lp-room__foot span { padding: 10px 18px; border-radius: 6px; background: var(--d-sel); color: var(--d-sel-ink); font-size: 13px; } /* ── 2. müfredat ── */ .lp-path { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 18px 24px 24px; } .lp-path__head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--line); } .lp-path__game { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink); } .lp-path__list { list-style: none; margin: 0; padding: 0; } .lp-path__row { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 12px 0; border-bottom: 1px solid var(--line); } .lp-path__n { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--line2); font-size: 11px; color: var(--ink3); } .lp-path__t { font-size: 16px; line-height: 1.45; color: var(--ink2); padding-top: 3px; } .lp-path__st { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink3); padding-top: 6px; white-space: nowrap; } .lp-path__row.is-done .lp-path__n { background: var(--ok-dim); border-color: var(--ok); color: var(--ok); } .lp-path__row.is-done .lp-path__st { color: var(--ok); } .lp-path__row.is-current { background: color-mix(in srgb, var(--sel) 7%, transparent); margin-inline: -12px; padding-inline: 12px; border-radius: 6px; } .lp-path__row.is-current .lp-path__n { background: var(--sel); border-color: var(--sel); color: var(--sel-ink); } .lp-path__row.is-current .lp-path__t { color: var(--ink); } .lp-path__row.is-current .lp-path__st { color: var(--sel); } .lp-path__row.is-next .lp-path__st { color: var(--ink2); } .lp-path__row.is-locked .lp-path__t { color: var(--ink3); } .lp-path__ev { display: flex; align-items: center; gap: 12px; margin-top: 6px; font-size: 11px; color: var(--ink2); } .lp-path__evbar { position: relative; width: 120px; height: 6px; border-radius: 3px; background: var(--well); overflow: hidden; flex: none; } .lp-path__evbar i { position: absolute; inset: 0 auto 0 0; background: var(--sel); } .lp-path__more { font-size: 11px; color: var(--ink3); margin: 12px 0 0; } .lp-path__hint { font-size: 13px; line-height: 1.6; color: var(--ink2); margin: 12px 0 0; } /* ── 3. adaptif zorluk ── */ .lp-adapt { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 24px; } .lp-adapt__head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; } .lp-adapt__diff small { font-size: 11px; color: var(--ink3); } .lp-adapt__diff b { font-size: 20px; font-weight: 400; color: var(--sel); } .lp-adapt__viz svg { display: block; width: 100%; height: auto; margin: 12px 0 6px; } .lp-adapt__base { stroke: var(--line2); stroke-width: 1; vector-effect: non-scaling-stroke; } .lp-adapt__bell { fill: color-mix(in srgb, var(--sel) 16%, transparent); stroke: var(--sel); stroke-width: 2.2; vector-effect: non-scaling-stroke; } .lp-adapt__meter { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; font-size: 11px; color: var(--ink3); } .lp-adapt__track { position: relative; height: 4px; border-radius: 2px; background: var(--well); } .lp-adapt__track i { position: absolute; top: -5px; width: 14px; height: 14px; border-radius: 50%; background: var(--sel); transform: translateX(-50%); transition: left .3s ease; } .lp-adapt__acts { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 18px 0; } .lp-adapt__acts .btn { min-height: 44px; padding: 10px 16px; font-size: 13px; } .lp-adapt__hist { border-top: 1px solid var(--line); padding-top: 12px; } .lp-adapt__histk { font-size: 11px; color: var(--ink3); } .lp-adapt__histplot { position: relative; margin-top: 6px; } .lp-adapt__hist svg { display: block; width: 100%; height: auto; } .lp-adapt__yk { position: absolute; left: 0; font-size: 9px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink3); } .lp-adapt__yk--top { top: 0; } .lp-adapt__yk--bot { bottom: 0; } .lp-hist__line { fill: none; stroke: var(--ink2); stroke-width: 1.5; vector-effect: non-scaling-stroke; } .lp-hist__dot.is-ok { fill: var(--ok); } .lp-hist__dot.is-miss { fill: var(--bad); } .lp-adapt__story { font-size: 13px; line-height: 1.6; color: var(--ink); min-height: 42px; margin: 12px 0 0; } .lp-adapt .lp-caption { text-align: left; } /* ── 4. gelişim — gerçek bileşenler bir ekran çerçevesinde ── */ .lp-screen { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; box-shadow: 0 24px 60px rgba(10, 18, 18, .08); } .lp-screen__bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 18px; border-bottom: 1px solid var(--line); font-size: 13px; background: var(--app); } .lp-screen__bar strong { display: flex; align-items: center; gap: 6px; font-weight: 400; } /* İki satır × iki sütun: üstte ÖLÇÜM (eğri) ↔ EYLEM (öneri), altta güçlü/zayıf alan ↔ çalışma düzeni. Gelişim ekranının kendi ayrımı. */ .lp-prog { display: grid; grid-template-columns: minmax(0, 1fr) 360px; } .lp-prog__cell { padding: 18px; min-width: 0; } .lp-prog__cell--side { border-left: 1px solid var(--line); background: color-mix(in srgb, var(--app) 60%, var(--panel)); } .lp-prog__cell--low { border-top: 1px solid var(--line); } .lp-prog__cell--side .coach { margin-top: 12px; } .lp-prog__cell .comfort__pair { margin-top: 0; } /* ── 5. telefon ── */ .lp-phonestage { display: flex; justify-content: center; padding-block: 12px; } .lp-phone { position: relative; width: 300px; max-width: 100%; box-sizing: border-box; padding: 12px; border-radius: 44px; background: #0b1011; box-shadow: 0 0 0 1px var(--line2), 0 30px 70px rgba(10, 18, 18, .22); transform: rotate(-2.5deg); } .lp-phone__notch { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); width: 96px; height: 24px; border-radius: 0 0 14px 14px; background: #0b1011; z-index: 2; } .lp-phone__screen { position: relative; border-radius: 32px; overflow: hidden; display: flex; flex-direction: column; min-height: 600px; } .lp-phone__screen .lp-room__bar { padding: 36px 18px 12px; } .lp-phone__stepper { display: flex; align-items: center; gap: 12px; padding: 12px 18px; border-bottom: 1px solid var(--d-line); font-size: 13px; color: var(--d-ink2); } .lp-phone__arrow { display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid var(--d-line); border-radius: 6px; color: var(--d-ink); } .lp-phone__rooms { margin-left: auto; padding: 6px 9px; border: 1px dashed var(--d-line); border-radius: 5px; font-size: 9px; letter-spacing: .1em; } .lp-phone__body { display: flex; flex-direction: column; gap: 12px; padding: 18px; flex: 1; } .lp-phone__body .lp-room__q { font-size: 20px; } .lp-room__modes--full { display: flex; } .lp-room__modes--full span { flex: 1; text-align: center; padding: 9px 6px; } .lp-room__vars--stack { grid-template-columns: minmax(0, 1fr); gap: 6px; } .lp-room__vars--stack .lp-var { grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; min-height: 50px; padding: 12px; } .lp-phone__screen .lp-room__foot { padding: 12px 18px 24px; } .lp-phone__screen .lp-room__foot span { width: 100%; text-align: center; padding: 12px; } /* Dokunma işareti: "buraya dokun" — ikinci örnek düğmesinde bir halka. */ .lp-phone .lp-room__vars--stack .lp-var:nth-child(2)::after { content: ''; position: absolute; left: 58%; top: 50%; width: 34px; height: 34px; margin-top: -17px; border-radius: 50%; border: 2px solid var(--d-sel); background: rgba(154, 175, 255, .16); pointer-events: none; } @media (prefers-reduced-motion: no-preference) { .lp-phone .lp-room__vars--stack .lp-var:nth-child(2)::after { animation: lp-tap 2.4s ease-out infinite; } } @keyframes lp-tap { 0% { transform: scale(.6); opacity: 0; } 25% { opacity: 1; } 70%, 100% { transform: scale(1.25); opacity: 0; } } /* ── 6. beceriler ── */ .lp-skills { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line); } .lp-skills li { border-bottom: 1px solid var(--line); } .lp-skill { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 6px 12px; align-content: start; height: 100%; box-sizing: border-box; padding: 24px 24px 24px 0; color: var(--ink); text-decoration: none; border-top: 2px solid transparent; margin-top: -1px; } .lp-skill .ico { color: var(--tc); grid-row: span 3; } .lp-skill__name { font: 26px/1.1 var(--font-editorial); letter-spacing: -.03em; } .lp-skill__q { font-size: 13px; line-height: 1.6; color: var(--ink2); } .lp-skill__go { font-size: 13px; color: var(--sel); margin-top: 6px; } a.lp-skill:hover { border-top-color: var(--tc); } a.lp-skill:hover .lp-skill__go { text-decoration: underline; text-underline-offset: 3px; } /* ── 7. son çağrı + altbilgi ── */ .lp-final { text-align: center; padding-block: 96px; background: color-mix(in srgb, var(--ok) 7%, var(--app)); border-top: 1px solid var(--line); } .lp-h1--final { font-size: clamp(34px, 4.6vw, 64px); } .lp-final .lp-lead { margin: 24px auto 30px; } .lp-final__small { display: flex; justify-content: center; align-items: center; gap: 6px; font-size: 13px; color: var(--ink2); margin: 18px 0 0; } .lp-final__small svg { color: var(--ok); } .lp-final__beta { font-size: 13px; line-height: 1.6; color: var(--ink2); max-width: 52ch; margin: 18px auto 0; padding: 12px 18px; border: 1px solid var(--line); border-radius: 6px; background: var(--panel); } .lp-final .lp-textlink { margin-top: 12px; } .lp-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; padding: 24px 32px; border-top: 1px solid var(--line); } .lp-foot .lp-brand { font-size: 20px; } .lp-foot__tag { flex: 1 1 240px; font-size: 13px; color: var(--ink3); } .lp-foot__links { display: flex; gap: 18px; } .lp-foot__links a:hover { color: var(--ink); } /* ── duyarlı düzen ── */ @media (max-width: 1080px) { .lp-nav { display: none; } .lp-prog { grid-template-columns: minmax(0, 1fr); } .lp-prog__cell--side { border-left: 0; border-top: 1px solid var(--line); } .lp-prog__cell:nth-child(2) { order: 3; } .lp-prog__cell:nth-child(3) { order: 2; } .lp-room__deck { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 900px) { .lp-inner { padding-inline: 24px; } .lp-top { padding: 12px 24px; } .lp-hero, .lp-split, .lp-split--media-right, #path .lp-split { grid-template-columns: minmax(0, 1fr); } .lp-split--media-first .lp-copy { order: -1; } .lp-hero { padding-block: 36px 24px; gap: 24px; } .lp-section { padding-block: 64px; } .lp-intro { display: block; } .lp-intro > p { margin-top: 18px; max-width: none; } .lp-skills { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 640px) { .lp-inner { padding-inline: 18px; } .lp-top { padding: 12px 18px; gap: 12px; } .lp-brand { font-size: 20px; gap: 6px; } .lp-brand .academy-mark { height: 24px; } .lp-brand .academy-mark i { width: 4px; } .lp-top__signup, .lp-top__try { display: none; } .lp-tools { gap: 6px; } .lp-tools .lang { max-width: 92px; } .lp-hero__acts { gap: 12px 24px; margin-top: 24px; } .lp-cta { width: 100%; justify-content: center; box-sizing: border-box; } .lp-steps { grid-template-columns: minmax(0, 1fr); gap: 12px; } .lp-scene__stage { aspect-ratio: 800 / 600; } .lp-seg { width: 100%; } .lp-seg button { flex: 1; } .lp-room__body { padding: 18px; } .lp-room__head { grid-template-columns: minmax(0, 1fr); } .lp-room__q { font-size: 20px; } .lp-room__vars { grid-template-columns: minmax(0, 1fr); } .lp-var { min-height: 50px; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; } .lp-path { padding: 12px 18px 18px; } .lp-path__row { grid-template-columns: 30px minmax(0, 1fr); } .lp-path__st { grid-column: 2; padding-top: 0; } .lp-adapt { padding: 18px; } .lp-skills { grid-template-columns: minmax(0, 1fr); } .lp-skill { padding-right: 0; } .lp-phone { transform: none; } .lp-final { padding-block: 64px; } .lp-foot { padding: 24px 18px; } } @media (max-width: 420px) { .lp-top .lp-brand { font-size: 16px; } .lp-top .icon-btn { width: 36px; height: 36px; } } @media (prefers-reduced-motion: reduce) { .lp *, .lp *::before, .lp *::after { transition: none !important; animation: none !important; } } /* ══ OYUN RENGİ — sitenin oyuna ait işaretleri (2026) ══════════════════ Akademi katmanı oyuna ait işaretleri de ortak maviye (`--sel`) çevirmişti: kenar çubuğunda seçili oyun, aşama haritasında şu anki / seçili satır ve "Başla" başlığı, oda düğmesi. Eski sitede bunlar oyunun kanal rengiydi ve kullanıcı nerede olduğunu renkten tanıyordu. Zeminler ORTAK kalır — yalnızca işaret, ince ton ve yazı oyun renginde. YAŞANMIŞ HATA (bu turda ekran görüntüsünde): /games'teki önerilen kartın "Başla" düğmesi zemini oyun rengi, yazısı akademinin mavisiydi (amber üstünde mavi — okunmuyordu). Düğme artık ince ton + oyun rengi çerçeve + mürekkep yazı; her kanalda ve iki temada okunur. `--tc-ink`: satır içi `--tc` taşıyan her öğede küçük METİN tonu — `src/games.mjs#color` ile aynı oran (koyu %75+beyaz, açık %87+siyah). */ [style*="--tc"] { --tc-ink: color-mix(in srgb, var(--tc) 87%, #000); } html:root[data-theme=dark] [style*="--tc"] { --tc-ink: color-mix(in srgb, var(--tc) 75%, #fff); } .academy-sidebar .brw__row[aria-current=page] { background: color-mix(in srgb, var(--tc) 16%, transparent); color: var(--ink); box-shadow: inset 3px 0 0 var(--tc); } .hero .hero__go { background: color-mix(in srgb, var(--tc) 20%, var(--panel)); color: var(--ink); border: 1px solid var(--tc); } .strip__go { color: var(--tc-ink, var(--sel)); } .wrap[style*="--tc"] .resume__do { color: var(--tc-ink); } .wrap[style*="--tc"] .resume { border-left: 3px solid var(--tc); } .wrap[style*="--tc"] .st--current, .wrap[style*="--tc"] .st.is-sel { background: color-mix(in srgb, var(--tc) 12%, var(--panel)); border-color: color-mix(in srgb, var(--tc) 55%, var(--line)); } .wrap[style*="--tc"] .st.is-sel .st__line, .wrap[style*="--tc"] .st--current .st__line, .wrap[style*="--tc"] .st.is-sel .st__n { color: var(--tc-ink); } .wrap[style*="--tc"] .st__room { color: var(--tc-ink); } /* ---------- SÖZLÜK (/glossary) ---------- Kelime + tanım + o kelimeyi DUYABİLECEĞİN odaya bağlantı. Renk kelimenin ait olduğu oyunun kanal rengi (--tc, satırda kuruluyor): §32 — renk hangi beceri olduğunu söyler, tek başına bilgi taşımaz, yanında hep ad durur. */ .gl { display: grid; gap: 12px; margin: 0; } .gl__row { display: grid; gap: 3px; padding-bottom: 12px; border-bottom: 1px solid var(--line); } .gl__row:last-child { border-bottom: 0; padding-bottom: 0; } .gl__term { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; } .gl__def { margin: 0; font-size: 13px; line-height: 1.5; color: var(--ink2); } .gl__listen { margin-left: 6px; white-space: nowrap; font-family: var(--font-mono); font-size: 11px; color: var(--tc-ink, var(--accent)); } /* ---------- NEDEN ÖĞRENİYORSUN (§46'nın D maddesi) ---------- Tagline NE SORULDUĞUNU söyler ("Ne kadar yüksek?"); bu satır o beceriyi öğrenince NE YAPABİLECEĞİNİ. Aşama haritasında "devam et"in üstünde, /games'in iki büyük kartında tagline'ın altında. */ .why { margin: 6px 0 12px; font-size: 13px; line-height: 1.5; color: var(--ink2); } .why b { color: var(--ink); font-weight: 600; } .hero__why { font-size: 13px; line-height: 1.5; color: var(--ink2); } /* ---------- MALZEME TEZGÂHI (/admin/materials) ---------- Alet ekranı (§28): sayı ham gösterilir, süs yok. Satır = bir malzeme. */ .mat { display: grid; gap: 3px; } .mat__row { display: grid; grid-template-columns: 44px minmax(120px, 1fr) minmax(0, 2fr); gap: 12px; align-items: center; padding: 6px; border-bottom: 1px solid var(--line); } .mat__row:last-child { border-bottom: 0; } .mat__nm { font-size: 13px; } .mat__nm i { margin-left: 6px; font-style: normal; color: var(--ink3); font-size: 11px; } .mat__meta { font-size: 11px; color: var(--ink2); } .mat__play.is-on { background: var(--accent); color: var(--panel); } /* ---------- ÇALMA DENETİMİ (ekipman kontrolü) ---------- Kulaklık onayı ve ses kalibrasyonuyla AYNI kabuk (.gate/.gate__box); burada yalnızca adım sayacı, cevap yığını ve özet listesi var. Gerekçe ve ölçüm tuzakları: src/playback.mjs. */ .pb__eyebrow { margin: 0; font-family: var(--font-mono); font-size: 9px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink3); } .pb__step { margin: 0; font-family: var(--font-mono); font-size: 11px; color: var(--ink3); } .pb__s { display: grid; gap: 12px; } .pb__s[hidden] { display: none; } /* Cevaplar DİKEY yığın: şıklar tam cümle ("Biraz kısıktı ama net duydum") ve yan yana dizilince dar ekranda kelime ortasından bölünüyordu — aynı hata maskeleme odasında bir kez yaşanmıştı (§32). */ .pb__ans { display: grid; gap: 3px; } .pb__ans .btn { justify-content: flex-start; text-align: left; } .pb__res { margin: 0; padding: 0; list-style: none; display: grid; gap: 3px; } .pb__res li { font-size: 13px; line-height: 1.55; color: var(--ink2); } /* Uyarı satırı — aşama haritasında ve hesap sayfasında. Kapı değil bilgi: ceza rengi (--bad) DEĞİL, sessiz bir kenar çizgisi. */ .pbwarn { margin: 0 0 6px; padding: 6px 12px; border-left: 1px solid var(--line-strong, var(--line2)); background: var(--alt); font-size: 13px; line-height: 1.55; color: var(--ink2); } .pbwarn a { color: var(--ink3); text-decoration: underline; text-underline-offset: 3px; } .pbwarn a:hover { color: var(--ink2); } /* ── /admin/progress — "aşama aşama nerede takıldım" ─────────────── Alet ekranı (§28), ürün yüzeyi değil. Yeni bileşen yalnızca İKİ şerit: sayılan tur oranı ve seviye aralığı. Gerisi var olan `.adm` / `.readout` / `.silk` / `.btn` bileşenleri — yeni bir görsel dil açılmadı. Tip ve boşluk ölçeği `tests/scale.mjs` ile kilitli. */ .apr__pick { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; } .apr__pick .field { min-width: 190px; } .apr__dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; } .apr__bar { position: relative; height: 7px; min-width: 96px; border-radius: 1px; background: var(--well); overflow: hidden; } .apr__fill { position: absolute; inset: 0 auto 0 0; background: var(--tc); } /* Oynanan seviye aralığı — kanal renginin soluk hâli. */ .apr__rng { position: absolute; top: 0; bottom: 0; background: color-mix(in srgb, var(--tc) 34%, transparent); } .apr__med { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--tc); } /* GEÇME SEVİYESİ. Kutu bu çizginin tamamen solundaysa o aşamada hiçbir tur sayılmamış demektir — raporun bütün meselesi bu. */ .apr__need { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--bad); /* Kanal renginin üstünde de okunsun: ince bir çizgi soluk zeminde kaybolabiliyordu (gain'in kendi rengi de kırmızıya yakın). */ box-shadow: 0 0 0 1px var(--panel); } .apr__v { font-family: var(--font-mono); font-size: 9px; color: var(--ink3); } .apr__net--ok { color: var(--ok); } .apr__net--bad { color: var(--bad); } .apr__chip { font-family: var(--font-mono); font-size: 9px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink3); } .apr__chip--bad { color: var(--bad); } .apr__row--now { background: var(--alt); } .apr__verdict { background: var(--head); border-left: 2px solid var(--sel); padding: 12px; font-size: 13px; line-height: 1.5; } .apr__verdict--bad { border-left-color: var(--bad); } .apr__split { margin-top: 6px; font-family: var(--font-mono); font-size: 11px; color: var(--ink2); } .apr__reset { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; } .apr__confirm { display: flex; gap: 6px; align-items: center; font-size: 11px; color: var(--ink2); } /* ── AŞAMA HARİTASI: "yeni aşama açıldı" ─────────────────────────── Kilidi açmak ürünün en çok emek isteyen anı; ekran o anı söylemeli. Satır "devam et"in ALTINDA ve ondan sessiz: birincil eylem hâlâ devam etmek, bu bir DAVET. Girildiği anda kaybolur. */ .unlocked { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; padding: 6px 12px; text-decoration: none; background: var(--head); border-left: 2px solid var(--tc, var(--sel)); } .unlocked:hover { background: var(--alt); } .unlocked--flat { cursor: default; } .unlocked__k { font-family: var(--font-mono); font-size: 9px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink3); } .unlocked__v { font-size: 13px; color: var(--ink); } .unlocked__go { margin-left: auto; font-size: 11px; color: var(--tc, var(--sel)); } /* ── GÜNÜN VE HAFTANIN GÖREVİ (§54) ────────────────────────────────── Üç kart: bugün · bu hafta · kendi miksinde. Düğme YOK — "devam et" zaten manşette; görev onu yalnızca adlandırıyor. Tek etkileşim DAW günlüğü ve o bir sayaç değil. Ölçek `tests/scale.mjs`e tabi: yalnız tablodaki boyutlar ve boşluklar. */ .tsk__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; } .tsk__card { display: grid; gap: 6px; align-content: start; padding: 12px; border: 1px solid var(--line); border-radius: 6px; min-width: 0; } .tsk__cap { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink3); } .tsk__game { font-size: 20px; } .tsk__row { display: grid; grid-template-columns: 1fr 72px auto; gap: 6px; align-items: center; } .tsk__k { font-size: 11px; color: var(--ink3); min-width: 0; } .tsk__bar { height: 3px; border-radius: 3px; overflow: hidden; background: color-mix(in srgb, var(--ink3) 22%, transparent); } .tsk__bar > i { display: block; height: 100%; background: var(--accent); } .tsk__row.is-done .tsk__bar > i { background: var(--ok); } .tsk__v { font-size: 11px; font-variant-numeric: tabular-nums; color: var(--ink2); } .tsk__note, .tsk__daw { font-size: 13px; color: var(--ink2); } .tsk__done { font-size: 13px; color: var(--ok); } .tsk__fine { font-size: 11px; color: var(--ink3); } .tsk__form { display: grid; grid-template-columns: 1fr auto; gap: 6px; } .tsk__form input { min-width: 0; padding: 6px; font-size: 13px; border: 1px solid var(--line); border-radius: 3px; background: transparent; color: var(--ink); } @media (max-width: 760px) { .tsk__grid { grid-template-columns: 1fr; } } /* ---------- OYUN AİLELERİ (/games, §55) ---------- Yirmi üç oyun tek ızgarada taranamıyordu. Ekran iki basamaklı: üstte "senin için" iki kart, altında yedi AİLE kartı; oyunların kendisi ailenin sayfasında. Izgara `.strips` ile AYNI: sabit üç sütun, 24 boşluk — iki basamak birbirinin devamı gibi okunsun diye. Ölçek `tests/scale.mjs`e tabi: yalnız tablodaki tip (13/26) ve boşluk (3/6/12/18/24) değerleri. YAŞANMIŞ TUZAĞIN TEKRARI ÖNLENDİ: `.hero`/`.strip`in LED'i `grid-template-rows: 3px 1fr`in birinci satırıydı ve akademi katmanı onu `display:none` yapınca içerik 3 piksele düşüp kırpılmıştı. Buradaki LED ızgaraya HİÇ girmiyor — `position:absolute`, yani gizlense de şablonu değiştirmiyor. */ .fams { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin: 6px 0 0; } .fam { position: relative; display: block; overflow: hidden; padding: 24px; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; text-decoration: none; color: var(--ink); } .fam:hover { background: var(--head); border-color: var(--tc, var(--line2)); } .fam__led { position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--tc); } .fam__in { display: grid; gap: 3px; } .fam__ics { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; color: var(--tc-ink, var(--ink2)); } .fam__ics--dim { opacity: .55; color: var(--ink3); } .fam__nm { font: 26px/1.1 var(--font-editorial); letter-spacing: -.02em; } .fam__q { margin-top: 3px; font-size: 13px; line-height: 1.55; color: var(--ink3); } .fam__meta { margin-top: 6px; font-family: var(--font-mono); font-size: 13px; color: var(--ink2); } .fam__go { margin-top: 18px; font-size: 13px; color: var(--tc-ink, var(--sel)); } /* "Tüm oyunlar" — aile değil bir ÇIKIŞ: kesik çizgi onu ailelerden ayırır. */ .fam--all { border-style: dashed; } /* Ailenin kendi sayfası. */ .famback { justify-self: start; font-size: 13px; color: var(--sel); text-decoration: none; } .famback:hover { text-decoration: underline; } .famtitle { border-left: 6px solid var(--tc); padding-left: 12px; } @media (max-width: 900px) { .fams { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 620px) { .fams { grid-template-columns: 1fr; } }