/* YOSO — görsel sistem.
*
* ⚠️ PALET: KOYU SİNEMA + RGB (kullanıcı seçimi 22 Ağu, B seçeneği).
* Ürün video üretiyor; zemin karartılmış salon, üstünde kırmızı/yeşil/mavi
* spot parıltıları — ekranın renk modelinin kendisi. Aksan TEK (mavi);
* kırmızı ve yeşil DURUM/KATEGORİ renklerinde yaşıyor, ikinci aksan değil.
*
* ⚠️ HER RENK DEĞİŞKENDEN GELİR, sabit yazılmaz. İlk koyu mod denemesinde
* 14 yerde sabit açık renk (#fff, rgba(255,255,255,.6), #C2D4C9…) kalmıştı;
* tema değişince onlar değişmediği için arayüz yer yer bozuluyordu. Yeni bir
* tema = yalnız bu bloğu değiştirmek olmalı. Sabit renk eklemeyin.
*
* ⚠️ Yazı tipi ÇİFT ve İŞ BÖLÜMLÜ: başlıkta Manrope (geometrik ama ciddi — kurumsal),
* gövdede Inter (küçük puntoda okunaklı). Her yerde Inter kullanmak jenerik
* "AI arayüzü" seçimidir. İkisi de KENDİ SUNUCUMUZDAN ve Türkçe kapsamı
* ÖLÇÜLDÜ: `latin` ı/ç/ö/ü, `latin-ext` ş/ğ/İ taşıyor — biri eksik olsa
* Türkçe metinde harf düşerdi.
*/
@font-face{font-family:Manrope;font-weight:200 800;font-display:swap;
src:url(/fonts/manrope-latin-ext.woff2) format("woff2");
unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,
U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,
U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Manrope;font-weight:200 800;font-display:swap;
src:url(/fonts/manrope-latin.woff2) format("woff2");
unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,
U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,
U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Inter;font-weight:100 900;font-display:swap;
src:url(/fonts/inter-latin-ext.woff2) format("woff2");
unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,
U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,
U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Inter;font-weight:100 900;font-display:swap;
src:url(/fonts/inter-latin.woff2) format("woff2");
unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,
U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,
U+2212,U+2215,U+FEFF,U+FFFD}
:root{
/* Metin açık, zemin koyu. Saf #000 değil: mavi-gri lacivert — koyu modda
saf siyah kontrastı sertleştirir ve gölge görünmez olur. */
/* ⚠️ Uygulama YALNIZ koyu. Bunu tarayıcıya SÖYLEMEK gerekiyor: aksi
hâlde imleç, kaydırma çubuğu, `select` açılır listesi ve otomatik
doldurma menüsü AÇIK temada çiziliyor — zeminini kendimiz boyadığımız
hâlde. (10 Eyl, otomatik doldurma vakasıyla birlikte eklendi.) */
color-scheme:dark;
--murekkep:#EEF3F9; --murekkep-2:#AFBCCC; --murekkep-3:#7E8C9E;
--kagit:#0B0F16; --yuzey:#151C27; --cizgi:#2A3444;
--cizgi-2:#3C4859; /* vurgulu kenar / hover */
/* TEK aksan: mavi. */
--aksan:#3B82F6; --aksan-koyu:#2563EB; --aksan-2:#60A5FA;
--aksan-acik:#17263F;
--aksan-halka:rgba(59,130,246,.22); --aksan-halka-2:rgba(59,130,246,.34);
/* ⚠️ Koyu yüzey üstüne yazılan aksan METİN bu — `--aksan-koyu` bir ZEMİN
tonudur, yazı olarak kullanılırsa kontrast 3,0'ın altına düşer. */
--aksan-yazi:#93C5FD;
/* ⚠️ Durum renkleri aksan DEĞİL — aksan mavi olduğu için burada RGB'nin
kalan iki kanalı iş görüyor: yeşil "oldu", kırmızı "olmadı". */
--olumlu:#4ADE80; --olumlu-zemin:#123021;
--uyari:#FBBF24; --hata:#F87171; --hata-zemin:#3A1B1B;
/* Arka plan lekeleri. ⚠️ Durum renklerinin AYNISI DEĞİL: leke kırmızısı
#EF4444, `--hata` ise #F87171. İkisini birleştirmek uyarı tonuyla
dekoratif ışığı aynı şeye bağlamak olurdu; biri değişince diğeri de
sessizce değişirdi. */
--leke-sicak:#EF4444; --leke-mavi:#3B82F6; --leke-yesil:#22C55E;
/* Kategori tonları — RGB üçlüsünün koyu karşılıkları. */
/* ⚠️ ŞERİT TONLARI PARLATILDI (31 Ağu, kullanıcı: "kenarlar
renklenmemiş"). Ölçüldü: eski tonlar yüzeyle **1,16-1,38** kontrast
veriyordu — yani pratikte görünmüyordu; 4 px sol şerit dikkatli
bakınca fark ediliyor, 2 px sağ şerit hiç. Yeni tonlar 4,83-7,31.
⚠️ GÜVENLE DEĞİŞTİRİLDİ: `--ton-*` yalnız kart şeridinde kullanılıyor
(ölçüldü), yani genel tasarım etkilenmiyor — kullanıcının koşulu buydu. */
--ton-1:#4A8DFF; --ton-2:#E05C6E; --ton-3:#3FBF7F;
/* ⚠️ `--ton-4` (mor) KALDIRILDI: kullanıcı 31 Ağu'da RGB üçlüsü
istedi. Dördüncü ton, üç kartlık bir ekranda hiç görünmüyordu
ve ardışık tekrarı da önlemiyordu. */
/* ⚠️ Gölge koyu zeminde SİYAH olmalı: tonlu gölge burada kirli griye döner. */
--golge-1:0 1px 2px rgba(0,0,0,.5);
--golge-2:0 2px 4px rgba(0,0,0,.5),0 8px 24px -8px rgba(0,0,0,.68);
--golge-3:0 4px 8px rgba(0,0,0,.55),0 16px 40px -12px rgba(0,0,0,.8);
/* Bileşen yüzeyleri — sabit renk yerine bunlar kullanılır. */
--yuzey-yari:rgba(255,255,255,.05); /* yükleme alanı, serbest alan */
--yuzey-yari-2:rgba(255,255,255,.08);
--secili-yuzey:#1A2434; /* seçili seçenek zemini */
--secili-zemin:var(--aksan); --secili-yazi:#08111F;
--onizleme-zemin:#05080D; /* altyazı örnek karesinin arkası */
--ornek-cerceve:rgba(255,255,255,.2);
--ust-zemin:rgba(11,15,22,.78);
--marka-gradyan:linear-gradient(150deg,#60A5FA,#3B82F6 55%,#1D4ED8);
--marka-parlak:rgba(255,255,255,.3);
--dugme-yazi:#08111F;
--dugme-gradyan:linear-gradient(178deg,#60A5FA,#3B82F6 60%,#2563EB);
--dugme-golge:0 1px 0 rgba(255,255,255,.28) inset,
0 2px 6px rgba(0,0,0,.5),0 10px 22px -10px rgba(59,130,246,.6);
--dugme-golge-2:0 1px 0 rgba(255,255,255,.28) inset,
0 3px 9px rgba(0,0,0,.55),0 16px 30px -12px rgba(59,130,246,.75);
/* Başlıktaki vurgu şeridi — aksanın soluk hâli. */
--vurgu-yazi:#DBEAFE;
--vurgu-serit:linear-gradient(90deg,#3B82F6,#60A5FA);
--tavsiye-zemin:linear-gradient(150deg,#16233A,#141C2A 60%,#1A1728);
--tavsiye-cizgi:#2F3D52;
/* Yarıçap KADEMELİ: dış kap yumuşak, iç öğe daha sıkı. Her yerde aynı
yarıçap kullanmak "şablondan çıkmış" hissi verir. */
/* ⚠️ 2 Eyl 2026, kullanıcı: *"tüm kutucukları round yapsak"* → ölçek BİR
KADEME artırıldı (kap 20→23 · kart 16→18 · öğeler 11→13). Oranlar
korundu: dört kademe arasındaki fark tasarımın kendi dili.
⚠️ Kırpma riski YOK: metin kırpılması `overflow:hidden` + dar alandan
doğuyor, köşe yarıçapından değil (bugünkü üç kırpma vakası da öyleydi).
⚠️ Geri almak tek satır. */
--r-kap:23px; --r-kart:18px; --r-ogeler:13px; --r-hap:999px;
/* ⚠️ 2 Eyl: `--r-kucuk` 9 YERDE KULLANILIYOR ama HİÇ TANIMLI DEĞİLDİ.
CSS'te tanımsız değişken `border-radius`'u geçersiz kılar, yani o
dokuz öğe (özet satırı, bölüm metni, sahne araç düğmeleri, paylaşım
kutusu, video kabı…) KÖŞELİ görünüyordu. Kullanıcının "kutucukları
round yapsak" demesinin muhtemel sebebi buydu — ölçek değil eksik
tanım. Değer öğelerin bir altı: 23 · 18 · 13 · 9. */
--r-kucuk:9px;
/* ⚠️ `ease-in` UI'da HİÇ kullanılmaz: yavaş başlar, kullanıcının en
dikkatle baktığı ilk anı geciktirir. */
--cikis:cubic-bezier(.23,1,.32,1);
--yay:cubic-bezier(.34,1.4,.5,1);
--sure-basma:140ms; --sure-giris:280ms;
--z-ust:20; --z-ortu:60; --z-bildirim:80;
}
*{box-sizing:border-box}
/* 🔴 GENEL YUMUŞAK KAYDIRMA KALDIRILDI (8 Eyl, kullanıcı: *"yazmak için
ekrana dokunduğumda klavye ekranda çıkıp geri kayboluyor"*).
⚠️ TEŞHİS ELEME İLE DARALDI, tahminle değil. Elenenler:
· JS odak çalma — `blur()` yalnız Enter eşlemesinde, bu alan listede yok
· tıklama engeli — gerçek tarayıcıda tıklama `baglam-metin`e ULAŞIYOR,
yazma çalışıyor, tek olay `focusin`, hiç `focusout` YOK
· tembel görsel sıçraması — `.gorsel img{aspect-ratio:1}`, yükseklik
yükleme ÖNCESİ ayrılmış
· sabit yükseklikli kapsayıcı — `body{min-height}`, `main` normal akış
Kalan sebep: Android'de bir alana odaklanınca tarayıcı onu klavyenin
ÜSTÜNE kaydırıyor; `scroll-behavior:smooth` bunu ANİMASYONLU yapıyor ve
animasyon, klavyenin viewport'u küçültmesiyle çakışınca Chrome odağı
bırakabiliyor.
⚠️ AÇIKÇA YUMUŞAK İSTENEN yerler ETKİLENMEZ: `scrollIntoView`
çağrılarından biri `behavior:"smooth"` diyor ve öyle kalıyor. Kaybedilen
tek şey kendiliğinden animasyonlu kaydırma.
⚠️ **CİHAZDA DOĞRULANMADI** — masaüstü tarayıcıda kusur zaten
üretilemiyordu. Düzelmezse tek satırla geri alınır. */
html{scroll-behavior:auto}
/* ⚠️ Odaklanan alan YAPIŞKAN BAŞLIĞIN ALTINDA kalmasın: tarayıcı alanı
klavyenin üstüne kaydırırken `.ust-yigin` onu örtebiliyor ve müşteri
yazdığını göremiyor. Üstteki teorinin doğru çıkıp çıkmamasından
BAĞIMSIZ olarak doğru; tek başına da kazanç. */
input,textarea,select{scroll-margin-block:96px 24px}
body{margin:0;min-height:100dvh;color:var(--murekkep);
font:16px/1.6 Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
font-variant-numeric:tabular-nums;
/* ⚠️ Inter'in biçimsel alternatifleri: `cv02` tek katlı `g`, `cv03` açık
uçlu `a`. Küçük puntoda gövde metnini bir tık okunaklı ve daha az
"varsayılan" gösteriyor. Lovable denemesinden alındı (24 Ağu). */
font-feature-settings:"cv02","cv03";
-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
padding-bottom:calc(48px + env(safe-area-inset-bottom));
/* ⚠️ İKİ KATMAN (kullanıcı: "güzel bir arka plan"):
① üç yumuşak RADYAL leke — 45°'lik düz gradyan "şablon" gibi durur
② taban rengi
⚠️ ÜÇÜNCÜ KATMAN 24 Ağu'da KALDIRILDI (kullanıcı: "arka plandaki
simgeleri kaldır"). `desen.svg` 26 grup ikon çiziyordu — klaket, film
şeridi. Buradaki eski yorum onu "eş yükselti eğrileri, harita konturu"
diye anlatıyordu; yorum dosyanın gerçekte çizdiğiyle ayrışmıştı.
⚠️ TABAN RENGİ AYRI BİLDİRİMDE (24 Ağu). Eskiden tek `background`
kısayolunda, lekelerle BİRLİKTE yazılıydı: leke değerlerinden biri
tarayıcıda geçersiz olsa (örn. `color-mix` desteklenmese) kısayolun
TAMAMI düşer ve sayfa zemini de kaybolurdu. Ayrı yazılınca en kötü
ihtimalde lekeler gider, zemin kalır.
⚠️ Leke renkleri ARTIK BELİRTEÇ: değerler `:root`'ta, burada yalnız
yerleşim ve güç var. Önceki hâlde `rgba(239,68,68,.20)` gibi ham
sayılar bu kısayolun içine gömülüydü; palet değişse burası ayrışırdı.
Fikir Lovable denemesinden (o `color-mix` ile durum renklerinden
TÜRETİYORDU); biz renkleri ayrı tuttuk çünkü lekeler durum
renklerinin aynısı değil (leke kırmızısı #EF4444, `--hata` #F87171). */
background-color:var(--kagit);
background-image:
radial-gradient(680px 420px at 88% -6%,
color-mix(in oklab, var(--leke-sicak) 20%, transparent) 0%, transparent 62%),
radial-gradient(680px 420px at 8% 8%,
color-mix(in oklab, var(--leke-mavi) 24%, transparent) 0%, transparent 62%),
radial-gradient(600px 420px at 52% 52%,
color-mix(in oklab, var(--leke-yesil) 13%, transparent) 0%, transparent 60%);
background-attachment:fixed}
/* ⚠️ `body::before` (desen katmanı) 24 Ağu'da KALDIRILDI — kullanıcı arka
plandaki simgeleri istemedi. Katmanla birlikte onu metnin altında
söndürmek için yazılmış maske de gitti; maske deseni korumak içindi,
koruyacak desen kalmadı.
⚠️ `desen.svg`, `scripts/desen_uret.py` ve `backend/app.py`'deki
`/desen.svg` rotası SİLİNMEDİ: desen geri istenirse sabit tohumla
yeniden üretilebilsin. Dosya hâlâ servis ediliyor, sadece artık kimse
istemiyor — referans veren tek yer burasıydı.
⚠️ `tests/test_css_kontrast.py:test_yari_saydam_kutular_deseni_engeller`
şu an ARKASINDA DESEN OLMAYAN bir durumu koruyor. Kural yine de doğru
(yarı saydam kutu okunur zemin ister) ve desen geri gelirse hazır. */
/* ⚠️ Kumlanma: tamamen düz dijital yüzey steril görünür. Çok hafif bir
doku (opaklık .05) ekranı "basılı kâğıt" tarafına çekiyor. */
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:1;
opacity:.05;
background-image:url("data:image/svg+xml;utf8, (ana sayfa). Tarayıcının düğme varsayılanları
sıfırlanıyor — yoksa üst çubukta çerçeveli gri bir kutu belirir. */
.marka{display:flex;align-items:center;gap:10px;min-width:0;
border:none;background:none;padding:0;margin:0;font:inherit;color:inherit;
cursor:pointer;-webkit-tap-highlight-color:transparent}
.marka:active{transform:scale(.97)}
/* Marka imi: oker kare, içinde beyaz "oynat" üçgeni — video ürünü olduğunu
söyleyen tek işaret. Yuvarlak avatar yerine köşeleri yumuşatılmış kare. */
/* ⚠️ ROZET TEK KAYNAKTAN (31 Ağu): burada gradyan + CSS üçgenle AYRI bir
işaret çiziliyordu. Uygulama simgesi değişince bu değişmiyordu —
kullanıcı "simge değişmemiş" dedi ve haklıydı; baktığı yer burasıydı.
Artık `simge-im.svg` (yazısız varyant, `scripts/simge_uret.py` üretir).
⚠️ Gölge KALDI: dosya düz bir kare, kabartma efekti buradan geliyor. */
.marka-im{width:34px;height:34px;flex:0 0 auto;border-radius:11px;
background:url("/simge-im.svg") center/cover no-repeat;
box-shadow:var(--golge-1), inset 0 1px 0 var(--marka-parlak)}
/* ⚠️ Kısa ad (kullanıcı 22 Ağu): başlıkta "YOSO". Dört kelimelik tam ad
başlıkta iki satıra sarıyor ve bakiye rozetiyle yer kavgası ediyordu.
⚠️ Tam cümle arayüzde HİÇBİR YERDE geçmez: davet kartında slogan olarak
duruyordu, 23 Ağu'da bağlamsız olduğu için çıkarıldı ve
`test_hat_durustlugu.py` geri gelmesini engelliyor. */
.marka-ad{font-family:Manrope,Inter,sans-serif;font-size:21px;font-weight:750;
letter-spacing:-.02em;color:var(--murekkep);line-height:1}
.kredi{flex:0 0 auto;font-size:13px;font-weight:600;color:var(--aksan-yazi);
background:var(--aksan-acik);border:1px solid var(--cizgi-2);
padding:6px 12px;border-radius:var(--r-hap);white-space:nowrap;
transition:color 200ms ease,background 200ms ease}
/* ── Tipografi ─────────────────────────────────────────────────────── */
main{max-width:680px;margin:0 auto;padding:26px 18px 72px;position:relative;z-index:2}
h1,h2,h3{font-family:Manrope,Inter,sans-serif}
/* ⚠️ Büyük puntoda harfler optik olarak dağılır; negatif aralık olmadan
amatör görünür. Punto `clamp()` ile akışkan. */
h1{font-size:clamp(30px,8.2vw,40px);line-height:1.08;letter-spacing:-.035em;
font-weight:700;margin:0 0 12px;text-wrap:balance}
h2{font-size:clamp(23px,6vw,28px);line-height:1.14;letter-spacing:-.028em;
font-weight:650;margin:0 0 8px;text-wrap:balance}
h3{font-size:17px;letter-spacing:-.015em;font-weight:650;margin:0}
/* "Yazı efekti": başlıkta tek bir kelime öbeği okerle boyanıyor ve altında
yumuşak bir vurgu şeridi var. Tüm başlığı gradyanla boyamak ucuz durur. */
.vurgu-metin{color:var(--vurgu-yazi);position:relative;white-space:nowrap}
/* ⚠️ Dolu blok DEĞİL: koyu temada harflerin arkasını doldurmak yazıyı
"seçili metin" gibi gösteriyor ve aynı tonda olduğu için kontrastı
düşürüyordu (ölçüm 4,30). Yazı açık renk kalıyor — zeminle kontrastı
yüksek — vurguyu ALTINDAKİ çizgi taşıyor. */
.vurgu-metin::after{content:"";position:absolute;left:0;right:0;bottom:.02em;
height:.11em;background:var(--vurgu-serit);border-radius:99px;z-index:-1}
.alt{color:var(--murekkep-2);margin:0 0 22px;max-width:52ch;text-wrap:pretty}
/* Bölünmemesi gereken kısa öbek — anlam iki satıra dağılmasın. */
.bitisik{white-space:nowrap}
.not{color:var(--murekkep-3);font-size:13.5px;min-height:20px}
/* İletişim e-postası — yasal metindeki üç bağlantı.
⚠️ 1 Eyl 2026: bu sınıf HTML'de vardı ama CSS'te KURALI YOKTU; linkler
tarayıcı varsayılanıyla (#0000EE) çiziliyordu ve koyu zeminde kontrast
ÖLÇÜLDÜ: 2,04:1 — WCAG AA eşiği 4,5. Kullanıcı "mavi görünmüyor" dedi,
ölçüm doğruladı. --aksan-yazi aynı zeminde 10,64:1 veriyor.
⚠️ Kırmızı (6,94) ve yeşil (11,01) ELENDİ: kontrastları yeterli ama
arayüzde hata/başarı anlamı taşıyorlar; bağlantıya o yük binmemeli.
⚠️ Altı çizili — bilgi yalnız renkle taşınmasın (renk körlüğü). */
.iletisim-eposta{color:var(--aksan-yazi);text-decoration:underline;
text-underline-offset:2px;text-decoration-thickness:1px}
.iletisim-eposta:hover,.iletisim-eposta:focus-visible{color:var(--murekkep)}
.hata{color:var(--hata)}
.gizli{display:none!important}
/* 🔴 2 Eyl, kullanıcı: *"buradaki ve başka yerlerdeki başlıklar daha büyük
ve belirgin olsa daha güzel olmaz mı."* Haklıydı — ölçüldü: başlık 12 px
ve `--murekkep-3` iken, ALTINDAKİ gövde metni 15,5 px ve daha parlaktı.
Yani hiyerarşi TERSTİ: bölüm başlığı, anlattığı metinden sönük duruyordu.
⚠️ Kimlik korundu (büyük harf + harf aralığı + Manrope); değişen yalnız
boyut, ağırlık ve renk. Harf aralığı 0,09 → 0,07 em: 14 px'te 0,09
sözcükleri dağıtıyor.
⚠️ Kontrast ölçüldü (zemin #0B0F16): 5,60 → 9,95.
⚠️ TEK YERDEN 18 başlık besleniyor (hakkında bölümleri, "Hazırlanan
bölümler", "Bölüm konuları", "Çıkarılan sahneler"…). */
.ara-baslik{font-family:Manrope,Inter,sans-serif;font-size:14px;font-weight:700;
letter-spacing:.07em;text-transform:uppercase;color:var(--murekkep-2);
margin:32px 0 11px}
/* Giriş ekranı — ürünün ilk izlenimi */
.rozet{display:inline-flex;align-items:center;gap:7px;margin-bottom:14px;
font-size:12.5px;font-weight:600;letter-spacing:.01em;color:var(--aksan-yazi);
background:var(--aksan-acik);border:1px solid var(--cizgi-2);
padding:6px 13px;border-radius:var(--r-hap)}
.rozet::before{content:"";width:6px;height:6px;border-radius:50%;
background:var(--aksan);box-shadow:0 0 0 3px rgba(20,86,60,.16)}
.madde{list-style:none;padding:0;margin:0 0 26px;display:grid;gap:9px}
.madde li{position:relative;padding-left:27px;color:var(--murekkep-2);font-size:15px}
.madde li::before{content:"";position:absolute;left:0;top:.42em;width:16px;height:16px;
border-radius:50%;background:var(--olumlu-zemin);
box-shadow:inset 0 0 0 1.5px rgba(63,111,74,.32)}
.madde li::after{content:"";position:absolute;left:5px;top:.66em;width:4px;height:7px;
border:solid var(--olumlu);border-width:0 1.8px 1.8px 0;transform:rotate(42deg)}
/* ── Form ──────────────────────────────────────────────────────────── */
label{display:block;font-size:13px;font-weight:600;color:var(--murekkep-2);margin:0 0 7px}
input[type=email],input[type=text],input[type=file]{width:100%;padding:13px 15px;
font:inherit;font-size:16px;color:var(--murekkep);
border:1.5px solid var(--cizgi);border-radius:var(--r-ogeler);
background:var(--yuzey);transition:border-color 180ms ease,box-shadow 180ms ease}
/* ⚠️ İKİ ELLE YAZILMIŞ RENK, İKİSİ DE ESKİ PALETTEN KALMA (10 Eyl):
halka `rgba(20,86,60,.13)` KOYU YEŞİLDİ, oysa `--aksan` mavi (`#3B82F6`);
yer tutucu `#9FAEA6` yeşilimsi griydi, `--murekkep-3` ise `#7E8C9E`.
`select:focus` ve `textarea::placeholder` çoktan belirteci kullanıyordu
— bu ikisi payını almamıştı. Yeni renk UYDURULMADI, belirtece bağlandı. */
input[type=email]:focus,input[type=text]:focus{outline:none;
border-color:var(--aksan);box-shadow:0 0 0 4px var(--aksan-halka)}
input::placeholder{color:var(--murekkep-3)}
/* ── SELECT TABAN KURALI (10 Eyl) ───────────────────────────────────
🔴 Kullanıcı: *"bu seçim kutuları tasarıma uygun olmamış."* Marka
seçicileri tarayıcının VARSAYILANIYLA çiziliyordu: beyaz zemin, siyah
yazı, yerli ok — koyu temanın ortasında yamalı duruyordu.
⚠️ **AYNI KUSUR 8 EYL'DE ÇÖZÜLMÜŞTÜ** (`.sahne-foto-sec`, yorumu
birebir şunu diyor: *"yerli select koyu temada beyaz zeminle çiziliyor
ve arayüzün ortasında yamalı duruyor"*) — ama SINIFA KAPSAMLI
yazılmıştı, taban kural olarak değil. Yeni eklenen üç `select` payını
almadı. 30 Ağu'da TEXTAREA için alınan dersin aynısı: *"üç ayrı kopya
yazılmıştı, dördüncüsü hiçbirine girmediği için varsayılana düştü."*
⚠️ Değerler `input[type=text]` ile AYNI belirteçlerden: yeni renk
uydurulmuyor, tasarım değişmiyor (kullanıcı kararı 24 Ağu).
⚠️ `appearance:none` + kendi oku: yerli ok platformdan platforma
değişiyor ve macOS/Windows'ta mavi çiziliyor.
⚠️ `option` da boyanır: açılan liste bazı tarayıcılarda sayfanın
değil sistemin rengini alıyor. */
select{width:100%;box-sizing:border-box;padding:12px 38px 12px 15px;
font:inherit;font-size:15px;color:var(--murekkep);
border:1.5px solid var(--cizgi);border-radius:var(--r-ogeler);
background-color:var(--yuzey);
/* ⚠️ Ok, `--murekkep-3` tonunda gömülü SVG: ayrı dosya isteği
olmasın ve renk belirteçle aynı kalsın. */
background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%237E8C9E' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
background-repeat:no-repeat;
background-position:right 14px center;
-webkit-appearance:none;-moz-appearance:none;appearance:none;
transition:border-color 180ms ease,box-shadow 180ms ease}
select:focus{outline:none;border-color:var(--aksan);
box-shadow:0 0 0 4px var(--aksan-halka)}
select option{background:var(--yuzey);color:var(--murekkep)}
/* ⚠️ TEXTAREA TABAN KURALI (30 Ağu). Yoktu: `.sahne`, `#kaynak-kutu` ve
`.paylasim-satir` üç ayrı kopya yazmıştı, dördüncü textarea (sorun
bildirimi) hiçbirine girmediği için TARAYICI VARSAYILANINA düştü —
koyu temanın ortasında beyaz kutu ve daktilo yazısı (kullanıcı gördü).
Kusur o textarea'da değil, taban kuralın YOKLUĞUNDAYDI.
⚠️ Üç özel kural KALDI: kendi ölçülerini (padding, font-size, margin)
yazmaya devam ediyorlar, taban yalnız altlarını dolduruyor. */
textarea{width:100%;box-sizing:border-box;padding:11px 13px;
font:inherit;font-size:15px;line-height:1.5;color:var(--murekkep);
border:1.5px solid var(--cizgi);border-radius:var(--r-ogeler);
background:var(--yuzey);resize:vertical;
transition:border-color 180ms ease}
textarea:focus{outline:none;border-color:var(--aksan)}
textarea::placeholder{color:var(--murekkep-3)}
/* ── OTOMATİK DOLDURMA (autofill) TABAN KURALI (10 Eyl) ─────────────
🔴 Kullanıcı ekran görüntüsüyle: *"neden beyaz arka plan"*.
⚠️ Kural EKSİK DEĞİLDİ: `input[type=text]{background:var(--yuzey)}` var
ve uygulanıyor — daha yüksek öncelikli hiçbir kural yok (ölçüldü).
Chrome, otomatik doldurduğu alanı KENDİ iç `!important`iyle yeniden
boyuyor; yazar `background` bildirimi onu YENEMİYOR.
⚠️ Teşhisi kesinleştiren şey iki izin BİRLİKTE görülmesi: zemin beyazladı
VE yazı koyulaştı. Eksik bir arka plan kuralı yalnız zemini etkilerdi,
yazı açık kalıp beyaz üstünde okunmaz olurdu.
⚠️ Zemini `background` ile geri almanın yolu YOK; tek yol içe dönük dev
gölge. Yazı için de ayrı özellik gerekiyor — düz `color` yenilmiyor,
`-webkit-text-fill-color` gerekiyor.
⚠️ Uzun `transition`: Chrome gölgeyi ilk karede kendi rengiyle çizip
sonra bizimkine geçiyor; gecikme o tek kareyi görünmez kılıyor.
⚠️ TABAN KURAL, sınıfa kapsamlı DEĞİL — bu dosyada aynı ders iki kez
yazılı (`select` 10 Eyl, `textarea` 30 Ağu): kapsamlı yazılan kuraldan
SONRA eklenen öğe payını almıyor ve varsayılana düşüyor. */
input:-webkit-autofill,input:-webkit-autofill:hover,
input:-webkit-autofill:focus,input:-webkit-autofill:active,
textarea:-webkit-autofill,select:-webkit-autofill{
-webkit-text-fill-color:var(--murekkep);
caret-color:var(--murekkep);
-webkit-box-shadow:0 0 0 1000px var(--yuzey) inset;
box-shadow:0 0 0 1000px var(--yuzey) inset;
transition:background-color 9999s ease-in-out 0s}
fieldset{border:0;padding:0;margin:0 0 24px}
legend{font-family:Manrope,Inter,sans-serif;font-size:12px;font-weight:650;
letter-spacing:.08em;text-transform:uppercase;color:var(--murekkep-3);padding:0 0 10px}
/* ── Düğmeler ──────────────────────────────────────────────────────── */
button{font:inherit;cursor:pointer;
transition:transform var(--sure-basma) var(--cikis),
box-shadow 200ms ease,background 200ms ease,border-color 200ms ease}
form button,#gorunum-devam,.birincil,#sektor-devam,#konu-devam,#gorsel-devam,#seri-kur{
margin-top:16px;padding:14px 22px;border:0;border-radius:var(--r-ogeler);
font-family:Manrope,Inter,sans-serif;font-size:15.5px;font-weight:600;
letter-spacing:-.01em;color:var(--dugme-yazi);
background:var(--dugme-gradyan);
box-shadow:var(--dugme-golge)}
.ikincil{margin-top:16px;padding:13px 20px;border:1.5px solid var(--cizgi);
border-radius:var(--r-ogeler);background:var(--yuzey);color:var(--murekkep-2);
font-weight:550}
.butonlar{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
/* ⚠️ ÖZNİTELİK VAR ≠ GİZLİ: `display:flex` `hidden`ı ezer ve öğe
gizli olması gerekirken GÖRÜNÜR kalır. Aynı sınıf hatası
31 Ağu'da kart gövdelerinde yaşandı; 9 Eyl'de kapanış
düğmesinde tekrarlanacaktı — mevcut test yakaladı. */
.butonlar[hidden]{display:none}
/* ⚠️ Her basılan yüzey CEVAP VERİR — 0,97 fark edilmeyecek kadar küçük,
"duydum" demeye yetecek kadar var. */
button:active,.kart:active,.secenek:active,.stil:active,.karakter:active,
.renk:active,.etiket:active{transform:scale(.97)}
/* ⚠️ Hover DOKUNMATİKTE TETİKLENMEZ: parmak değince açılıp basılı takılı
kalıyor. */
@media (hover:hover) and (pointer:fine){
.birincil:hover,form button:hover,#gorunum-devam:hover,#gorsel-devam:hover,
#seri-kur:hover{box-shadow:var(--dugme-golge-2)}
.kart:hover{border-color:var(--cizgi-2);box-shadow:var(--golge-3)}
.secenek:hover,.stil:hover,.renk:hover{border-color:var(--cizgi-2)}
.ikincil:hover{border-color:var(--cizgi-2);color:var(--murekkep)}
}
button:focus-visible,input:focus-visible,summary:focus-visible,
a:focus-visible{outline:2.5px solid var(--aksan);outline-offset:2px;
border-radius:var(--r-ogeler)}
button[disabled]{opacity:.42;cursor:default;box-shadow:none}
/* ── Kartlar ───────────────────────────────────────────────────────── */
.kartlar{display:grid;gap:14px}
/* ⚠️ `color` AÇIKÇA yazılır: bunlar ve düğmeler renk mirası almaz
(varsayılan `buttontext` = siyah). Koyu temada kart başlıkları siyah
kalmıştı; kontrast taraması yakaladı (1,23). */
.kart{color:var(--murekkep);display:grid;gap:5px;text-align:left;padding:20px 20px 18px;
border:1px solid var(--cizgi);border-radius:var(--r-kart);
background:var(--yuzey);box-shadow:var(--golge-2);position:relative;
overflow:hidden}
/* ── Katlanır kart (31 Ağu) ────────────────────────────────────────────
⚠️ Üç kart açıklamalarıyla birlikte telefona sığmıyordu. Başta yalnız
isim; dokununca açıklama ve "Devam et" açılıyor.
⚠️ GLOSSY: kullanıcının istediği parlaklık, koyu temayı bozmadan üstten
gelen ince bir ışıkla veriliyor (`--parlak` gradyan). Aksan renkleri ve
yazı tipleri DEĞİŞMİYOR — tasarım kararı 24 Ağu'da kilitlendi. */
.kart.katlanir{padding:0;display:block;
background:linear-gradient(180deg,
rgba(255,255,255,.055) 0%, rgba(255,255,255,.012) 38%,
rgba(255,255,255,0) 100%), var(--yuzey)}
.kart-basi{display:flex;align-items:center;justify-content:space-between;
gap:12px;width:100%;padding:18px 18px 18px 22px;background:none;border:0;
color:var(--murekkep);font-family:inherit;text-align:left;cursor:pointer;
-webkit-tap-highlight-color:transparent}
.kart-basi strong{font-family:Manrope,Inter,sans-serif;font-size:18px;
font-weight:650;letter-spacing:-.02em}
/* ⚠️ Ok CSS ile: ikon dosyası eklemek bir istek daha demek ve bu ekran
açılışta görünüyor. */
.kart-basi .ok{flex:0 0 auto;width:9px;height:9px;border-right:2px solid var(--murekkep-3);
border-bottom:2px solid var(--murekkep-3);transform:rotate(45deg) translateY(-2px);
transition:transform 220ms var(--cikis)}
.kart-basi[aria-expanded="true"] .ok{transform:rotate(-135deg) translateY(-2px);
border-color:var(--aksan)}
.kart-basi[aria-expanded="true"] strong{color:var(--murekkep)}
.kart.katlanir:has(.kart-basi[aria-expanded="true"]){border-color:var(--aksan);
box-shadow:0 0 0 1px var(--aksan-halka), 0 10px 30px rgba(0,0,0,.35)}
.kart-govde{padding:0 18px 18px 22px;display:grid;gap:14px}
/* 🔴 `[hidden]` KURALI ŞART (31 Ağu, kullanıcı canlıda gördü: "yine aynı
duruyor, yazılar değişmedi"). HTML'deki `hidden` özniteliği tarayıcının
DÜŞÜK ÖZGÜLLÜKLÜ `[hidden]{display:none}` kuralına dayanıyor; hemen
üstteki `.kart-govde{display:grid}` onu EZİYOR ve gövde açık kalıyordu.
⚠️ Testlerim kaçırdı çünkü "HTML'de hidden var" diye gizli saydım.
ÖZNİTELİK VAR ≠ GİZLİ; görünürlüğün son sözü CSS'te. */
.kart-govde[hidden]{display:none}
.kart-govde span{color:var(--murekkep-2);font-size:14.5px;line-height:1.5}
.kart-govde .birincil{margin-top:0;justify-self:start}
@media (hover:hover) and (pointer:fine){
.kart-basi:hover strong{color:var(--aksan-yazi)}
}
/* Kategori şeridi: her kart ayrı tondan. Renk BİLGİ taşıyor (bunlar farklı
şeyler), süs değil. */
/* ⚠️ ŞERİT İKİ KENARDA ve RGB DÖNGÜSÜNDE (31 Ağu, kullanıcı: "kenar
renklerimiz kırmızı yeşil mavi yani RGB. Her kutucuk bir renk olsun,
aynı sayfada arka arkaya iki kutucuk varsa renkleri aynı olmasın").
🔴 İKİ KART DA MAVİ ÇIKIYORDU ve sebebi `nth-child`in nasıl saydığıydı:
hat ekranında her kart KENDİ SARMALAYICISININ içinde ("Böyle görünüyor"
satırıyla birlikte), yani her biri o sarmalayıcının 1. çocuğu →
`.kart:nth-child(2)` hiç eşleşmiyordu.
⚠️ ÇÖZÜM KALITSAL DEĞİŞKEN: renk `.kartlar`ın DOĞRUDAN çocuğunda
tanımlanıyor (sarmalayıcı da olsa kartın kendisi de olsa) ve içerideki
`.kart::before` onu miras alıyor. Böylece iki farklı DOM yapısı tek
kuralla kapsanıyor; `nth-child` seçicisini her yapıya göre yeniden
yazmak gerekmiyor.
⚠️ ÜÇLÜ DÖNGÜ (`3n+1/3n+2/3n`): dört renk olsaydı üç kartlık bir
ekranda dördüncü ton hiç görünmezdi; üç renk her uzunlukta ardışık
tekrarı önlüyor.
⚠️ SAĞ ŞERİT DAHA İNCE (3px ↔ 4px): ikisi de kalın olunca kart
çerçeveye dönüşüp koyu temada gürültü yapıyordu. */
.kartlar > *:nth-child(3n+1){--serit:var(--ton-1)} /* mavi */
.kartlar > *:nth-child(3n+2){--serit:var(--ton-2)} /* kırmızı */
.kartlar > *:nth-child(3n){--serit:var(--ton-3)} /* yeşil */
.kart::before{content:"";position:absolute;inset:0;pointer-events:none;
border-radius:inherit;
background:
linear-gradient(var(--serit, var(--ton-1)), var(--serit, var(--ton-1)))
left / 4px 100% no-repeat,
linear-gradient(var(--serit, var(--ton-1)), var(--serit, var(--ton-1)))
right / 3px 100% no-repeat}
/* ── ŞERİT: SADECE KARTLAR DEĞİL, BÜTÜN KUTULAR ──────────────────────
⚠️ Kapsamı ÜÇ KEZ dar tuttum (önce kartlar, sonra ev kısayolları,
sonra yine eksik) ve kullanıcı üçünde de düzeltti: davet kutusu,
paylaşım kutusu, seçenek/stil/renk/sahne kutuları renksiz kalmıştı.
Doğru okuma: "kutucuk" = kenarlığı + köşesi + zemini olan HER öğe.
⚠️ TEK LİSTE (`--kutular`): aynı liste hem şeridi çizen `::before`
kuralında hem rengi atayan `nth-child` kuralında geçiyor. İki ayrı
liste yazılsaydı biri güncellenip diğeri unutulurdu — bu dosyada
defalarca yaşanan ayrışma. `tests/test_katlanir_kartlar.py` iki
listenin AYNI olduğunu denetliyor.
⚠️ DIŞARIDA BIRAKILANLAR ve sebebi: `video`/`textarea` (yerini alan
öğelerde `::before` çizilmez), `.gorsel .sil` + `.gorsel .etiket`
(fotoğrafın üstünde yüzen katman), `.etiket` + `.sahne-sure`
(rozet boyutunda, 4px şerit metni bastırırdı). */
:is(.secenek,.stil,.renk,.kare-kap,.karakter,.yukle,.gorsel,.sahne,
.tavsiye,.serbest,.altyazi-kutu,.dosya-alan,.levha,.ozet-satir,
.bolum-satir,.video-satir,.paylasim-kutu,.ornek-satir,.seri-sil,
.konu-eylem button,.sahne-arac button,.sahne .toparla,
.paylasim-satir button,.secimler .sec,.ornek-dugme
){position:relative;overflow:hidden}
:is(.secenek,.stil,.renk,.kare-kap,.karakter,.yukle,.gorsel,.sahne,
.tavsiye,.serbest,.altyazi-kutu,.dosya-alan,.levha,.ozet-satir,
.bolum-satir,.video-satir,.paylasim-kutu,.ornek-satir,.seri-sil,
.konu-eylem button,.sahne-arac button,.sahne .toparla,
.paylasim-satir button,.secimler .sec,.ornek-dugme
)::before{content:"";position:absolute;inset:0;pointer-events:none;
border-radius:inherit;
background:
linear-gradient(var(--serit, var(--ton-1)), var(--serit, var(--ton-1)))
left / 4px 100% no-repeat,
linear-gradient(var(--serit, var(--ton-1)), var(--serit, var(--ton-1)))
right / 3px 100% no-repeat}
/* Renk kutunun KENDİ sırasından gelir; tek başına duran kutu (davet gibi)
1. çocuk olduğu için maviyle başlar, listeler üçlü döngüyle ilerler. */
:is(.secenek,.stil,.renk,.kare-kap,.karakter,.yukle,.gorsel,.sahne,
.tavsiye,.serbest,.altyazi-kutu,.dosya-alan,.levha,.ozet-satir,
.bolum-satir,.video-satir,.paylasim-kutu,.ornek-satir,.seri-sil,
.konu-eylem button,.sahne-arac button,.sahne .toparla,
.paylasim-satir button,.secimler .sec,.ornek-dugme
):nth-child(3n+1){--serit:var(--ton-1)}
:is(.secenek,.stil,.renk,.kare-kap,.karakter,.yukle,.gorsel,.sahne,
.tavsiye,.serbest,.altyazi-kutu,.dosya-alan,.levha,.ozet-satir,
.bolum-satir,.video-satir,.paylasim-kutu,.ornek-satir,.seri-sil,
.konu-eylem button,.sahne-arac button,.sahne .toparla,
.paylasim-satir button,.secimler .sec,.ornek-dugme
):nth-child(3n+2){--serit:var(--ton-2)}
:is(.secenek,.stil,.renk,.kare-kap,.karakter,.yukle,.gorsel,.sahne,
.tavsiye,.serbest,.altyazi-kutu,.dosya-alan,.levha,.ozet-satir,
.bolum-satir,.video-satir,.paylasim-kutu,.ornek-satir,.seri-sil,
.konu-eylem button,.sahne-arac button,.sahne .toparla,
.paylasim-satir button,.secimler .sec,.ornek-dugme
):nth-child(3n){--serit:var(--ton-3)}
.kart strong{font-family:Manrope,Inter,sans-serif;font-size:19px;font-weight:650;
letter-spacing:-.02em}
.kart .ozet{color:var(--murekkep);font-weight:500;font-size:15px}
.kart span{color:var(--murekkep-2);font-size:14.5px}
.kart .ince{font-size:13px;color:var(--murekkep-3)}
.kart em{display:inline-block;margin-top:8px;font-style:normal;font-size:12.5px;
font-weight:600;color:var(--aksan-yazi);background:var(--aksan-acik);
padding:5px 11px;border-radius:var(--r-hap)}
.teslimat{margin:9px 0 4px;padding:0;list-style:none;display:grid;gap:6px;
color:var(--murekkep-2);font-size:14.5px}
.teslimat li{position:relative;padding-left:20px}
.teslimat li::before{content:"";position:absolute;left:2px;top:.55em;width:7px;height:7px;
border-radius:2px;background:var(--aksan);opacity:.55}
/* ── Etiket / seçenek / stil ───────────────────────────────────────── */
.etiketler{display:flex;flex-wrap:wrap;gap:8px}
.etiket{padding:10px 15px;border:1.5px solid var(--cizgi);border-radius:var(--r-hap);
background:var(--yuzey);font-size:14.5px;color:var(--murekkep-2);font-weight:500}
.etiket.secili{background:var(--secili-zemin);color:var(--secili-yazi);
border-color:var(--secili-zemin);
box-shadow:var(--golge-2)}
.secenekler{display:grid;gap:9px}
.secenek{text-align:left;padding:15px 17px;border:1.5px solid var(--cizgi);
border-radius:var(--r-ogeler);background:var(--yuzey);font-size:15.5px;
color:var(--murekkep);box-shadow:var(--golge-1)}
.secenek .ince{display:block;color:var(--murekkep-3);font-size:13px;margin-top:3px}
.stiller{display:grid;gap:9px}
/* Durum yazısı seçilen düğmenin altına TAŞINIYOR (bkz. app.js sesCal). */
#ses-liste .not{margin:0;padding:0 4px}
.stil{color:var(--murekkep);display:grid;grid-template-columns:1fr auto;
align-items:center;column-gap:12px;
text-align:left;padding:13px 15px;border:1.5px solid var(--cizgi);
border-radius:var(--r-ogeler);background:var(--yuzey);box-shadow:var(--golge-1)}
.stil strong,.stil span{grid-column:1}
.stil strong{font-weight:650;font-size:15.5px}
.stil span{color:var(--murekkep-2);font-size:13.5px}
.stil.secili{border-color:var(--aksan);background:var(--secili-yuzey);
box-shadow:0 0 0 3px var(--aksan-halka)}
/* ⚠️ Eylem etiketi METİN, ikon DEĞİL: ▶/👁 her cihazda yok ve eksik glif
"boş kutu" olarak çıkıyor (ilk sürümde tam bu oldu). */
.stil::after{content:"dinle";grid-column:2;grid-row:1/3;font-size:12.5px;
font-weight:600;color:var(--murekkep-2);background:var(--kagit);
border:1px solid var(--cizgi);border-radius:var(--r-hap);padding:6px 13px}
#altyazi-liste .stil::after{content:"göster"}
/* Bekleme, basılan düğmenin ÜSTÜNDE görünür: etiket "dinle" → "hazırlanıyor…".
Örnek sunucuda üretildiği için ilk dinleyiş birkaç saniye sürebiliyor. */
#ses-liste .stil.hazirlaniyor::after{content:"hazırlanıyor…"}
.stil.secili::after{background:var(--aksan);border-color:var(--aksan);
color:var(--secili-yazi)}
/* ── Altyazı rengi ─────────────────────────────────────────────────── */
.alt-ic{margin:18px 0 9px;font-size:12px;font-weight:650;letter-spacing:.08em;
text-transform:uppercase;color:var(--murekkep-3)}
.renkler{display:flex;flex-wrap:wrap;gap:8px}
.renk{display:flex;align-items:center;gap:9px;padding:8px 14px 8px 9px;
border:1.5px solid var(--cizgi);border-radius:var(--r-hap);background:var(--yuzey);
font-size:14px;box-shadow:var(--golge-1)}
.renk.secili{border-color:var(--aksan);box-shadow:0 0 0 3px var(--aksan-halka)}
/* Örnek daire: üst yarı yazı rengi, alt şerit okunan kelimenin rengi —
stil ikisini birlikte kullanıyor, tek renk göstermek yanıltıcı olurdu. */
.ornek-renk{width:22px;height:22px;border-radius:50%;display:inline-block;
border:1px solid var(--ornek-cerceve)}
.renk-ad{color:var(--murekkep)}
.kare-kap{margin-top:12px;border:1px solid var(--cizgi);border-radius:var(--r-kart);
overflow:hidden;background:var(--onizleme-zemin);box-shadow:var(--golge-2)}
/* ⚠️ DİKEYDE KARENİN TAMAMI GÖSTERİLMEZ. Ölçüldü: 9:16 örnekte yazı
%74,9-%79,9 arasında, yani karenin yalnız %5'i; kalanı boş zemin.
Tam kare 400 px yer kaplayıp neredeyse tamamı boş görünüyordu
(kullanıcı 23 Ağu: "örnek boyutu çok büyük").
`cover` + `object-position` ile yazı bandı kırpılıyor; %84 değeri
ölçülen %77'lik merkezi pencereye ortalıyor.
⚠️ YATAY KIRPILMAZ: 16:9 kare aynı genişlikte zaten ~225 px ve yazı
oranı daha büyük — kırpmak bilgi kaybı olurdu. */
/* ⚠️ VİDEO da kare ile AYNI kurallardan geçer: örnek artık oynayan bir
klip (bkz. app.js altyaziGoster). İki ayrı kural yazılsaydı kırpma
penceresi ikisinde ayrışır, video başka bir bandı gösterirdi. */
.kare-kap img,.kare-kap video{display:block;width:100%;max-height:340px;
object-fit:contain}
/* İki formatta da AYNI BANT gösteriliyor. Örneğin işi altyazı stilini
göstermek; karenin geri kalanı boş zemin, yer kaplamaktan başka bir şey
yapmıyor. Konumlar ölçülen yazı bandına göre:
dikey merkez %77,4 · yatay merkez %76,2 (kare içindeki oran). */
.kare-kap.dikey{height:150px}
/* ⚠️ Yatay pencere DAHA KISA: 16:9 kare aynı genişlikte yalnız ~224 px,
taşma payı az. 132 px pencerede `bottom` yazıyı %62'ye düşürüyordu
(ölçüldü); pencere daralınca yazı ortalanıyor. */
.kare-kap.yatay{height:100px}
/* ⚠️ ÖLÇÜLDÜ (31 Ağu, kullanıcı: "kelimeler karenin üst tarafında çıkıyor,
ortalasak"): yazı bandının merkezi dikeyde %70,9, yatayda %69,6 — kare ve
video birebir aynı. Eski `object-position:center 84%` değeri "%77'lik
bant" varsayımıyla hesaplanmıştı ve yazıyı pencerenin üstüne itiyordu.
⚠️ `object-position` YERİNE mutlak konum + `translateY`: object-position
formülü PENCERE GENİŞLİĞİNE bağlı (P = (y·H − h/2)/(H − h)), yani dar
telefonda %77,7 geniş ekranda %75,4 gerekiyordu — tek sayı hepsinde
doğru olamazdı. `translateY(-70%)` öğenin KENDİ yüksekliğine göre
kaydırdığı için genişlikten bağımsız: yazının %70'i her ekranda
pencerenin ortasına gelir. */
.kare-kap.dikey,.kare-kap.yatay{position:relative}
/* ⚠️ ÖLÇÜLDÜ (1 Eyl, kullanıcı: "örneklerdeki yazılar kutucuğun üst tarafına
çok yakın"): -70% değeri KARE üzerinden gelmişti ve kareler TEK sabit cümle
kullanıyor (merkez %69,9-70,4, tutarlı). Video ise havuzdan 18 atasözü
döndürüyor ve altyazının ALT kenarı sabitken (%71,1-72,8) üst kenar satır
sayısıyla yukarı büyüyor: 1 satır üst %68,9 · 2 satır %63,3 · 3 satır %57,8.
Bant merkezi böylece %65,3-70,6 arasında geziyor; -70% üç satırlık cümlede
yazıyı ~32 px yukarı itiyordu.
⚠️ TAM ORTALAMA MÜMKÜN DEĞİL: bandı pencereye hizalamak video/pencere
yüksekliği oranını gerektirir, o oran ekran genişliğiyle değişir — zaten
`object-position` bu yüzden bırakılmıştı. Yapılabilecek en iyisi ölçülen
ORTALAMA merkeze (%68) ayarlayıp pencereyi büyütmek: kalan sapma ±2,7 puan
(~±18 px) ve 150 px pencerede göze çarpmıyor. */
.kare-kap.dikey img,.kare-kap.yatay img,
.kare-kap.dikey video,.kare-kap.yatay video{position:absolute;left:0;
width:100%;height:auto;max-height:none;top:50%;transform:translateY(-68%)}
/* Yatayda ayrı kural GEREKMİYOR: bant merkezi %69,6, dikeydeki %70,9 ile
pratikte aynı yerde. İki ayrı sayı tutmak, biri ölçüldüğünde diğerini
bayatlatırdı. */
/* Düzenleme alanı etiketleri — hangi kutu ne (1 Eyl).
⚠️ `.ara-baslik` ile aynı dil: küçük, seyrek harfli, ikincil mürekkep.
Yeni bir görsel dil icat edilmiyor. */
.alan-etiket{display:block;margin:10px 0 5px;font-family:Manrope,Inter,sans-serif;
font-size:11.5px;font-weight:650;letter-spacing:.06em;text-transform:uppercase;
color:var(--murekkep-3)}
/* ── Karakter ──────────────────────────────────────────────────────── */
.karakterler{display:grid;grid-template-columns:repeat(3,1fr);gap:11px;margin-top:16px}
.karakter{padding:0;border:1.5px solid var(--cizgi);border-radius:var(--r-kart);
overflow:hidden;background:var(--yuzey);line-height:0;box-shadow:var(--golge-2);
position:relative}
.karakter img{width:100%;aspect-ratio:9/16;object-fit:cover;display:block}
.karakter.secili{border-color:var(--aksan);box-shadow:0 0 0 3px var(--aksan-halka-2),
var(--golge-3)}
#betimleme-uret{margin-top:11px;padding:11px 17px;border:1.5px solid var(--cizgi);
border-radius:var(--r-ogeler);background:var(--yuzey);font-weight:550;
color:var(--murekkep-2)}
/* ── Müşterinin fotoğrafları ───────────────────────────────────────── */
.yukle{display:grid;gap:4px;padding:26px 20px;border:2px dashed var(--cizgi-2);
border-radius:var(--r-kap);text-align:center;
backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
background:linear-gradient(rgba(11,15,22,.55),rgba(11,15,22,.55)),var(--yuzey-yari);
cursor:pointer;transition:border-color 200ms ease,background 200ms ease}
.yukle strong{font-family:Manrope,Inter,sans-serif;font-size:16px;font-weight:650;
color:var(--aksan-yazi)}
.yukle span{color:var(--murekkep-3);font-size:13.5px}
@media (hover:hover){.yukle:hover{border-color:var(--aksan);background:var(--yuzey-yari-2)}}
/* 🔴 SATIR SATIR, ÜÇ SÜTUN DEĞİL (8 Eyl, kullanıcı: *"dikey güzel
durmuyor, yatay mı yapsak"*). 412 px telefonda üç sütun her karta
~110 px bırakıyordu: "Bu fotoğrafta ne öne çıksın?" satır başına TEK
KELİME sarıyor, odak şıkları alt alta diziliyor ve kart uzayıp
gidiyordu. Ekran görüntüsü bunu net gösterdi.
⚠️ Numara SOLDA, araçlar SAĞDA — sahne listesiyle AYNI DİL
(`.sahne` + `.sira`), yeni bir görsel dil icat edilmiyor. */
.galeri{display:grid;gap:11px;margin:16px 0}
/* ⚠️ Not SOLDA, düğme SAĞDA; dar ekranda alt alta. */
.galeri-ust{display:flex;flex-wrap:wrap;gap:8px;align-items:center;
justify-content:space-between;margin-top:14px}
.galeri-ust .not{margin:0}
/* ⚠️ Onay kutusu TAM GENİŞLİK (`2 / -1`): dar sütunda etiketin altına
iner, kartın dışına taşmaz — 9 Eyl'de ölçülen kırpma sınıfı. */
.gorsel-kullan{grid-column:2 / -1;display:flex;align-items:center;gap:8px;
font-size:13px;color:var(--murekkep-2);cursor:pointer}
.gorsel-kullan input{width:17px;height:17px;accent-color:var(--aksan)}
.gorsel{display:grid;grid-template-columns:28px 76px 1fr auto;
gap:6px 11px;align-items:start;padding:11px;position:relative;
border:1px solid var(--cizgi);border-radius:var(--r-kart);
background:var(--yuzey);box-shadow:var(--golge-1)}
.gorsel-sira{width:28px;height:28px;display:grid;place-items:center;
border-radius:9px;background:var(--aksan-acik);color:var(--aksan-yazi);
font-size:12.5px;font-weight:700}
.gorsel img{width:76px;height:76px;aspect-ratio:1;object-fit:cover;
display:block;border-radius:10px}
.gorsel-govde{min-width:0}
/* ⚠️ Etiket artık 3 satır: satır genişledi, kırpma gevşeyebilir. */
.gorsel .etiket{display:-webkit-box;-webkit-line-clamp:3;
-webkit-box-orient:vertical;overflow:hidden;padding:0;font-size:13px;
color:var(--murekkep-2);line-height:1.4;border:0;background:none;
border-radius:0}
/* ⚠️ Etiket artık DÜĞME (düzeltilebilir) ama düğme gibi durmuyor: metin
kalabalıklaşırsa müşteri onu bir eylem sanır. Dokunulabilir olduğunu
ince alt çizgi söylüyor. */
.gorsel .etiket-duzelt{text-align:left;cursor:text;
text-decoration:underline dotted var(--murekkep-3);
text-underline-offset:3px}
/* ⚠️ Odak kutusu artık TAM GENİŞLİK: dar sütunda tek kelimeye sarıyordu. */
.gorsel .odak-kutu{grid-column:2 / -1}
.gorsel-arac{display:flex;flex-direction:column;gap:5px}
.gorsel-arac button{width:30px;height:30px;display:grid;place-items:center;
padding:0;border:1px solid var(--cizgi);border-radius:9px;
background:var(--yuzey-2,var(--yuzey));color:var(--murekkep-2);
font-size:14px;line-height:1}
.gorsel-arac button:disabled{opacity:.35}
/* ⚠️ Silme düğmesi ARTIK FOTOĞRAFIN ÜSTÜNDE DEĞİL: satır düzeninde
araçlarla aynı sütunda duruyor, o yüzden sabit koyu/beyaz gerekmiyor —
sayfa zeminiyle kontrast kuruyor. */
.gorsel-arac .sil{color:var(--murekkep-3)}
/* ── Sahne listesi ─────────────────────────────────────────────────── */
.sahneler{display:grid;gap:11px;margin-bottom:18px}
.sahne{display:grid;grid-template-columns:30px 1fr;gap:5px 13px;padding:16px;
border:1px solid var(--cizgi);border-radius:var(--r-kart);background:var(--yuzey);
box-shadow:var(--golge-1)}
.sira{grid-row:span 3;width:28px;height:28px;display:grid;place-items:center;
border-radius:9px;background:var(--aksan-acik);color:var(--aksan-yazi);
font-size:13px;font-weight:700}
.replik{margin:0;font-weight:550;font-size:15.5px;line-height:1.5}
/* ⚠️ ADI `.gorsel` DEĞİL: o ad müşteri fotoğraf galerisinin KARTINDA
kullanılıyor ve orası kenarlık + yuvarlak köşe + `overflow:hidden`
getiriyor. Sahne açıklaması o kuralları geçersiz kılmadığı için metin
kutunun kenarına yapışıp kırpılıyordu (23 Ağu, kullanıcı ekran
görüntüsüyle bildirdi). İki ayrı bileşen, iki ayrı ad. */
.sahne-aciklama{margin:0;color:var(--murekkep-3);font-size:13.5px;
line-height:1.45}
/* Sahne süresi rozeti.
⚠️ `grid-column:2` ZORUNLU: `.sahne` iki sütunlu bir ızgara ve `.sira`
ilk sütunda üç satır kaplıyor; sütun verilmeyen bir öğe numaranın altına
düşer. `.sahne-foto` da aynı sebeple sabitlenmiş.
⚠️ Sayı her sahnede AYNI ve bu doğru: Remotion toplam süreyi sahnelere
eşit bölüyor. O yüzden rozet SESSİZ tutuldu (küçük, gri) — tekrar eden
bir bilgi, repliğin önüne geçmemeli. */
/* ⚠️ SAĞ ÜSTTE (1 Eyl): eskiden `justify-self:start` ile metnin ALTINDA
duruyordu ve "görselin tarifi" etiketiyle aynı hizaya gelip onu kırpıyordu.
Süre SAHNENİN tamamına ait, tek bir alana değil. */
.sahne-sure{grid-column:2;justify-self:end;font-size:12px;font-weight:600;
color:var(--murekkep-3);background:var(--kagit);
border:1px solid var(--cizgi);padding:2px 9px;border-radius:var(--r-hap)}
/* ⚠️ Sahne başına fotoğraf seçici (8 Eyl). Yerli `select` koyu temada
beyaz zeminle çiziliyor ve arayüzün ortasında yamalı duruyor — aynı
kusur 31 Ağu'da sınıfsız bir düğmede yaşanmıştı. */
/* ⚠️ Taban `select` kuralı 10 Eyl'de eklendi; burada yalnız FARKLAR
kalıyor (daha dar dolgu, küçük punto, küçük köşe). Ortak değerler
tekrarlanmıyor — iki yerde tutulan değer zamanla ayrışır. */
.sahne-foto-sec{flex:1;min-width:0;width:auto;
padding:8px 32px 8px 10px;font-size:13.5px;
border-width:1px;border-radius:var(--r-kucuk,8px);
background-position:right 10px center}
.sahne-foto-sec:focus-visible{outline:2px solid var(--aksan);outline-offset:1px}
.sahne-foto{grid-column:2;display:flex;gap:11px;align-items:center;margin:8px 0 0;
padding:9px;border-radius:var(--r-ogeler);background:var(--kagit)}
.sahne-foto img{width:50px;height:50px;object-fit:cover;border-radius:9px;
flex:0 0 auto}
.sahne-foto span{font-size:12.5px;color:var(--murekkep-2)}
.sahne-foto em{font-style:normal;display:block;color:var(--murekkep-3)}
/* ── Üretim adımları ───────────────────────────────────────────────── */
.adimlar{list-style:none;padding:0;display:grid;gap:9px}
/* ⚠️ `flex-wrap` BURADA, ayrı bir `.adim{}` kuralında DEĞİL: ikinci kural
yazmak `test_css_sinif_cakismasi` tarafından reddediliyor ve haklı —
aynı sınıfa iki yerde kutu özelliği vermek sessiz devralma üretir. */
.adim{padding:14px 16px;border:1px solid var(--cizgi);border-radius:var(--r-ogeler);
background:var(--yuzey);color:var(--murekkep-3);font-size:15px;
display:flex;align-items:center;gap:11px;flex-wrap:wrap}
.adim::before{content:"";width:9px;height:9px;border-radius:50%;flex:0 0 auto;
background:var(--cizgi)}
/* ⚠️ Zemin SABİT `#FAFDFB` idi — açık temadan kalma. Koyu temada yazı
açık olduğu için kontrast 1,09 çıkıyordu: üretim sürerken ÇALIŞAN adım
görünmüyordu. Koyu moda çevirirken `#fff`/`rgba(255,255,255` aradım,
bu ton desene uymadığı için kaçtı; `tests/test_css_kontrast.py` buldu. */
/* ⚠️ ÇALIŞAN ADIM DAHA BELİRGİN (31 Ağu, kullanıcı: "metin hazırlanıyor
veya görsel hazırlanıyor uyarıları pek görünmüyor"). Önceden tek fark
kenarlık rengi + kalın yazıydı; koyu zeminde ikisi de zayıf sinyal.
⚠️ YAZI YANIP SÖNMÜYOR: sönen metin okunamaz ve kullanıcı tam da o
metni okumaya çalışıyor. Bunun yerine üstünden geçen ışık (`tarama`) —
şeritteki şimşekle aynı dil, aynı aksan rengi.
⚠️ `overflow:hidden` + `position:relative` ışığı kutunun içinde tutuyor. */
.adim.calisiyor{border-color:var(--aksan);color:var(--murekkep);font-weight:600;
background:var(--secili-yuzey);position:relative;overflow:hidden;
box-shadow:0 0 0 1px var(--aksan-halka), 0 4px 18px var(--aksan-halka)}
.adim.calisiyor::after{content:"";position:absolute;inset:0;pointer-events:none;
background:linear-gradient(100deg,transparent 20%,
var(--aksan-halka) 45%,var(--aksan-halka-2) 50%,
var(--aksan-halka) 55%,transparent 80%);
transform:translateX(-100%);animation:tarama 2.1s ease-in-out infinite}
.adim.calisiyor::before{background:var(--aksan);width:11px;height:11px;
box-shadow:0 0 0 4px var(--aksan-halka);
animation:nabiz 1.4s ease-in-out infinite}
/* Çalışan adımın altındaki açıklama (kullanıcı 30 Ağu: montaj adımında
"biraz vakit alabilir" bilgisi). ⚠️ `.adim` flex SATIR — sarmalamazsak
not etiketin YANINA düşüyor. `flex-basis:100%` kendi satırına indiriyor.
⚠️ Nokta `::before` ve `align-items:center`; iki satırlı öğede dikeyde
ortalanıyor, o yüzden üstte hizalanıyor. */
.adim-not{flex-basis:100%;margin-left:22px;font-size:12.5px;font-weight:400;
color:var(--murekkep-2);line-height:1.35;position:relative}
/* ⚠️ ÇALIŞAN adımın notu daha büyük ve daha okunaklı: müşterinin şu an
ne olduğunu anlatan tek cümle bu. Bitmiş adımların notu küçük kalıyor —
hepsini büyütmek listeyi gürültüye çevirirdi. */
.adim.calisiyor .adim-not{font-size:14px;color:var(--murekkep);font-weight:500}
.adim.bitti{color:var(--murekkep)}
.adim.bitti::before{background:var(--olumlu)}
.adim.hata{border-color:var(--hata);color:var(--hata);background:var(--hata-zemin)}
.adim.hata::before{background:var(--hata)}
@keyframes nabiz{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.45;transform:scale(.8)}}
@keyframes tarama{0%{transform:translateX(-100%)}60%,100%{transform:translateX(100%)}}
/* ── Seri konu haritası ────────────────────────────────────────────── */
/* 🔴 2 Eyl: numara CSS SAYACINDAN geliyordu (`counter(k)`), yani listedeki
SIRAYI basıyordu. Üstteki mesaj ise BÖLÜM numarasını söylüyor ("3.
bölümü hazırla") ve ikisi ayrışıyordu: müşterinin kendi yazdığı konu
haritanın SONUNA ekleniyor ama bölüm olarak ARAYA giriyor.
Kullanıcı: *"yukarıda 3. bölüm Sulama teknikleri yazıyor ama altta 3.
Toprak analizi yazıyor — karışıklık var."*
⚠️ Numara artık JS'ten geliyor (`data-no`): bekleyen konu, hazırlanırsa
ALACAĞI bölüm numarasını gösteriyor. */
.harita{list-style:none;padding:0;display:grid;gap:7px}
.konu{padding:13px 15px 13px 44px;position:relative;
border:1px solid var(--cizgi);border-radius:var(--r-ogeler);background:var(--yuzey);
font-size:15px;box-shadow:var(--golge-1)}
.konu::before{content:attr(data-no);position:absolute;left:12px;top:50%;
transform:translateY(-50%);width:22px;height:22px;display:grid;place-items:center;
border-radius:7px;background:var(--kagit);color:var(--murekkep-3);
font-size:11.5px;font-weight:700}
.konu.acildi{color:var(--murekkep-3);background:var(--kagit);box-shadow:none}
.konu.acildi::before{background:var(--olumlu-zemin);color:var(--olumlu)}
/* Konu kuyruğu eylemleri (kullanıcı 24 Ağu: hazırla / çıkar / sırala).
⚠️ Düğmeler METNİN ALTINDA, yanında değil: telefonda 44px'lik numara
payından sonra kalan genişlikte dört düğme yan yana sığmıyor ve konu
metni tek harflik sütuna sıkışıyordu. */
.konu-ad{display:block}
.konu-eylem{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px}
.konu-eylem button{padding:6px 11px;border-radius:var(--r-hap);
border:1px solid var(--cizgi-2);background:transparent;color:var(--murekkep);
font-size:12.5px;cursor:pointer;
transition:color 200ms ease,border-color 200ms ease,background 200ms ease}
.konu-eylem button:active{transform:scale(.97)}
.konu-eylem button:disabled{opacity:.38;cursor:default}
.konu-hazirla{color:var(--aksan-yazi);background:var(--aksan-acik)}
/* ⚠️ Ok düğmeleri KARE ve geniş dokunma alanlı: 12px'lik bir ok işareti
parmakla ıskalanır. */
.konu-tasi{min-width:38px;text-align:center;font-size:14px;line-height:1}
.konu-cikar{color:var(--murekkep-3);margin-left:auto}
.konu-cikar.onay{color:var(--kagit);background:var(--uyari,#F0B429);
border-color:var(--uyari,#F0B429);font-weight:600}
/* Kaydedilirken liste tıklanamaz: iki hızlı dokunuş, sunucuya iki farklı
sıralama gönderip son yazanı kazandırırdı. */
.harita.mesgul{opacity:.55;pointer-events:none}
/* ── Tavsiye ───────────────────────────────────────────────────────── */
.tavsiye{margin-top:30px;padding:20px;border-radius:var(--r-kap);
border:1px solid var(--tavsiye-cizgi);position:relative;overflow:hidden;
background:var(--tavsiye-zemin)}
.tavsiye strong{display:block;font-family:Manrope,Inter,sans-serif;font-size:17px;
font-weight:700;letter-spacing:-.02em;margin-bottom:5px;color:var(--murekkep)}
.tavsiye p{margin:0 0 14px;color:var(--murekkep-2);font-size:14px}
.tavsiye-satir{display:flex;gap:9px}
.tavsiye-satir input{flex:1;min-width:0;font-size:13px;color:var(--murekkep-2);
background:var(--yuzey-yari-2)}
#tavsiye-kopyala{padding:12px 16px;border:1.5px solid var(--cizgi-2);
border-radius:var(--r-ogeler);background:var(--yuzey);white-space:nowrap;
font-weight:600;color:var(--aksan-yazi)}
/* ── Açılır serbest alan ───────────────────────────────────────────── */
.serbest{margin-top:20px;padding:14px 16px;border:1px dashed var(--cizgi-2);
border-radius:var(--r-ogeler);
backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
background:linear-gradient(rgba(11,15,22,.55),rgba(11,15,22,.55)),var(--yuzey-yari)}
.serbest summary{color:var(--murekkep-2);font-size:14px;font-weight:550;
cursor:pointer;list-style:none}
.serbest summary::-webkit-details-marker{display:none}
.serbest summary::before{content:"+ ";color:var(--aksan);font-weight:700}
.serbest[open] summary::before{content:"– "}
.serbest input{margin-top:11px}
/* ⚠️ DESEN METİNLE ÇAKIŞIYORDU (kullanıcı 23 Ağu, ekran görüntüsü):
`--yuzey-yari` yalnız %5 beyaz yıkama, yani neredeyse şeffaf — arkadaki
klaket/film şeridi çizgileri yazının üstünden geçiyordu.
⚠️ OPAK YAPMAK YANLIŞ olurdu: sayfada renkli radyal lekeler var, kart düz
koyu bir yama gibi dururdu.
⚠️ BULANIKLIK TEK BAŞINA YETMEDİ, ölçüldü: deseni siliyor değil YAYIYOR
(tepe fark 138→71 ama etkilenen alan %0,93→%2,56). Bulanıklık + koyu
yıkama sızıntıyı %0,02'ye indiriyor, tepe 32. Ölçüm yöntemi: kartı deseni
AÇIK ve KAPALI çekip piksel farkı saymak (kontrol grubu).
⚠️ `background:rgba(...),rgba(...)` GEÇERSİZ — denediğim bir aday tam bu
yüzden hiçbir şey değiştirmedi ve ölçümde bir öncekiyle birebir aynı çıktı.
Çok katmanlı zemin için `linear-gradient()` sarmalı şart. */
/* ⚠️ Reçete ÜÇ KURALIN İÇİNE işlendi, ayrı bir toplu blok olarak
YAZILMADI: `.yukle`/`.serbest`/`.altyazi-kutu` adlarını ikinci bir
kutu-özellikli blokta tanımlamak `tests/test_css_sinif_cakismasi.py`nin
tam da yakaladığı hata sınıfı (yazdım, test düşürdü). */
/* ── Bildirim şeridi (alert() yerine) ──────────────────────────────── */
/* ⚠️ `window.alert()` tarayıcının kendi kutusu: tasarımın dışında durur,
sayfayı kilitler ve mobilde ürünü ucuz gösterir. */
#bildirim{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom));
transform:translate(-50%,120%);z-index:var(--z-bildirim);
max-width:min(520px,calc(100vw - 32px));padding:14px 18px;
/* ⚠️ TERS ÇEVRİLMİŞ ŞERİT: zemin metin rengi, yazı sayfa rengi. İkisi de
değişken olduğu için tema değişince KENDİLİĞİNDEN ters çevriliyor —
açık temada koyu kutu/açık yazı, koyu temada açık kutu/koyu yazı.
Yazı `#F7F1EA` sabitiydi ve koyu temada zemin de açık olunca beyaz
kutuda beyaz yazı çıkıyordu (kullanıcı 23 Ağu bildirdi).
⚠️ Kontrast taramam bunu GÖREMEZDİ: o an içinde metin olmayan öğeleri
ölçmüyor, bildirim ise ateşlenene kadar boş. */
border-radius:var(--r-kart);background:var(--murekkep);color:var(--kagit);
font-size:14.5px;line-height:1.45;box-shadow:var(--golge-3);
transition:transform 320ms var(--yay),opacity 220ms ease;opacity:0}
#bildirim.acik{transform:translate(-50%,0);opacity:1}
#bildirim.kotu{background:var(--hata)}
/* ── Giriş hareketi ────────────────────────────────────────────────── */
/* ⚠️ Amaç süs değil YÖN: ekran değişince gözün nereye bakacağını söylüyor.
⚠️ scale(0) YOK — gerçek dünyada hiçbir şey yoktan belirmez. */
.ekran:not(.gizli)>*{animation:yuksel var(--sure-giris) var(--cikis) both}
.ekran:not(.gizli)>*:nth-child(1){animation-delay:0ms}
.ekran:not(.gizli)>*:nth-child(2){animation-delay:36ms}
.ekran:not(.gizli)>*:nth-child(3){animation-delay:72ms}
.ekran:not(.gizli)>*:nth-child(4){animation-delay:108ms}
.ekran:not(.gizli)>*:nth-child(n+5){animation-delay:144ms}
@keyframes yuksel{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
/* Kredi sayacı: DURUM BİLDİRİMİ, süs değil — "6 kredi düştü"ü fark etmeyen
müşteri sonra şaşırır. */
.kredi.degisti{animation:sayac 460ms var(--yay)}
@keyframes sayac{0%{transform:scale(1)}
38%{transform:scale(1.14);background:var(--aksan);color:var(--secili-yazi)}
100%{transform:scale(1)}}
/* ⚠️ "Azaltılmış hareket" = HAREKETSİZ animasyon, ANİMASYONSUZ değil.
Opaklık anlamayı kolaylaştırdığı için KALIR. Toplu susturma solmayı da
öldürüyordu (ölçüldü: 0,00001 sn) — `!important` ile geri alınıyor. */
@media (prefers-reduced-motion:reduce){
*,*::before,*::after{animation-duration:.01ms!important;
animation-iteration-count:1!important;transition-duration:120ms!important}
.ekran:not(.gizli)>*{animation:solgun 170ms ease both!important;
animation-delay:0ms!important}
button:active,.kart:active,.secenek:active,.stil:active,.karakter:active{
transform:none}
html{scroll-behavior:auto}
@keyframes solgun{from{opacity:0}to{opacity:1}}
}
/* Geniş ekranda kartlar iki sütun — ama ŞABLON kartları değil: onların
metni uzun, iki sütunda okunmaz hâle geliyor. */
@media (min-width:720px){
.karakterler{gap:14px}
/* 🔴 SABİT 4 SÜTUN KIRPIYORDU (9 Eyl, kullanıcı ekran görüntüsü).
8 Eyl'de kart SATIR düzenine çevrildi (`28px 76px 1fr auto`) ama bu
kural sabit dört sütunda kaldı: 741 px ekranda karta ~170 px düşüyor,
iç ızgaranın kendisi ~140 px istiyor ve "Bu fotoğrafta ne öne çıksın?"
ile etiket metni kartın dışına taşıp KESİLİYORDU.
⚠️ Kardeş düzeltme: satır düzenine geçiş JS/işaretlemede yapılmış,
bu medya sorgusu payını almamıştı — bu deponun tekrar eden sınıfı.
⚠️ Sayı SABİTLENMİYOR: kart genişliği içeriğin gerektirdiği asgariden
türüyor, yani ekran ne kadar yerse o kadar sütun olur ve dar ekranda
kendiliğinden tek sütuna döner. */
.galeri{grid-template-columns:repeat(auto-fill,minmax(340px,1fr))}
}
/* ── Teslim ────────────────────────────────────────────────────────── */
.teslim{margin-top:18px;display:grid;gap:8px}
.teslim video{width:100%;max-height:62vh;border-radius:var(--r-kart);
background:var(--onizleme-zemin);border:1px solid var(--cizgi);
box-shadow:var(--golge-2);display:block}
/* ⚠️ İndirme bir ama BİRİNCİL DÜĞME gibi görünmeli — `form button`
kuralı yalnız 'a uyuyor, bağlantı stilsiz kalıyordu. */
a.birincil{display:inline-block;text-decoration:none;text-align:center;
margin-top:16px;padding:14px 22px;border-radius:var(--r-ogeler);
font-family:Manrope,Inter,sans-serif;font-size:15.5px;font-weight:600;
letter-spacing:-.01em;color:var(--dugme-yazi);
background:var(--dugme-gradyan);box-shadow:var(--dugme-golge)}
/* ── Dikkat çeken bildirim (kullanıcı isteği 23 Ağu) ───────────────── */
/* ⚠️ Kırmızı arayüzde HATA demektir, bu ise BAŞARI mesajı. Kullanıcı
açıkça istedi; not olarak duruyor. Aynı kutudaki diğer iki metin gerçek
hata ve gri kalıyor — o ayrım da kullanıcıya bildirildi.
⚠️ SONSUZ YANIP SÖNME YOK: 6 tur sonra sabit kalıyor. Durmayan hareket
hem okumayı zorlaştırır hem erişilebilirlik kuralına (WCAG 2.2.2)
takılır. Son kare `opacity:1` — animasyon nerede biterse bitsin yazı
GÖRÜNÜR kalır, kaybolmuş gibi durmaz. */
/* ⚠️ `!important` ŞART: `.ekran:not(.gizli)>*` ekran giriş animasyonunu
(`yuksel`) ATIYOR ve seçici daha güçlü — `.dikkat` tek başına yazılınca
renk uygulanıyor ama YANIP SÖNME HİÇ ÇALIŞMIYORDU (ölçüldü: hesaplanan
animationName "yuksel", opaklık 7 örnekte sabit 1,00).
Tek elemana özgü ve kasıtlı bir üstünlük. */
.ekran:not(.gizli)>.dikkat,.dikkat{color:var(--hata);font-weight:600;
animation:yanip-sonme .85s ease-in-out 6 both!important}
@keyframes yanip-sonme{
0%,100%{opacity:1}
50%{opacity:.2}
}
/* ⚠️ Hareketi azaltılmış kullanıcıda YANIP SÖNMEZ ama KIRMIZI KALIR:
vurgunun kendisi bilgi taşıyor, onu da silmek mesajı sıradanlaştırırdı.
(Üstteki genel kural süreyi .01ms'ye indiriyor; son kare opacity:1
olduğu için yazı tam görünür sabitlenir.) */
/* ⚠️ Yukarıdaki `.dikkat` kuralı `!important` taşıyor ve dosyanın SONUNDA
olduğu için hareket-azaltma bloğunu da eziyordu (ölçüldü: azaltma açıkken
opaklık 1,00 → 0,23, yani hâlâ yanıp sönüyordu). Kendi eklediğim
`!important`ın açtığı gerilemeyi yine açıkça kapatıyorum — iptal, ezdiği
kuraldan SONRA gelmek zorunda.
⚠️ Kırmızı ve kalın KALIYOR: vurgunun kendisi bilgi taşıyor; kaldırılan
yalnız HAREKET. */
@media (prefers-reduced-motion:reduce){
.ekran:not(.gizli)>.dikkat,.dikkat{animation:none!important;opacity:1!important}
}
/* ── YOSO bakiyesi ─────────────────────────────────────────────────── */
/* ⚠️ Rozet artık : tarayıcı varsayılan düğme kenarlığı/zeminini
sıfırlıyoruz, yoksa üst çubukta kutu gibi duruyor. */
button.kredi{border:1px solid var(--cizgi-2);cursor:pointer;font:inherit;
font-size:13px;font-weight:600}
@media (hover:hover) and (pointer:fine){
button.kredi:hover{border-color:var(--aksan);color:var(--murekkep)}
}
.yoso-buyuk{font-family:Manrope,Inter,sans-serif;font-size:34px;font-weight:750;
letter-spacing:-.03em;color:var(--aksan-yazi);margin:4px 0 14px}
/* ── Altyazı örneği: seçilen stilin hemen altında ──────────────────── */
.altyazi-kutu{margin:10px 0 4px;padding:12px;border-radius:var(--r-kart);
border:1px solid var(--cizgi);
backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
background:linear-gradient(rgba(11,15,22,.55),rgba(11,15,22,.55)),var(--yuzey-yari)}
.altyazi-kutu .alt-ic{margin:0 0 8px}
/* ⚠️ İskelet: örnek gelene kadar AYNI YERDE bir kutu duruyor. Boş bırakmak
sayfayı zıplatıyor ve "bir şey olmadı" hissi veriyor. */
.iskelet{display:grid;place-items:center;min-height:132px;margin-top:12px;
border:1px dashed var(--cizgi-2);border-radius:var(--r-kart);
color:var(--murekkep-3);font-size:13.5px;
animation:iskelet-nabiz 1.4s ease-in-out infinite}
@keyframes iskelet-nabiz{0%,100%{opacity:1}50%{opacity:.55}}
@media (prefers-reduced-motion:reduce){.iskelet{animation:none!important}}
/* Örnek gelmeden renk seçmek görünür bir şey değiştirmiyor. */
.renk[disabled]{opacity:.45;cursor:default}
/* ── Fotoğraf büyüteci ─────────────────────────────────────────────── */
/* ⚠️ Küçük karede yüz seçilemiyor: müşteri kimi seçtiğini göremeden
seçiyordu (kullanıcı 23 Ağu). */
/* ⚠️ `minmax(0,1fr)`: düz `1fr` içeriğin doğal boyutunu taban alıyor ve
büyük fotoğraf satırı şişirip alttaki düğmeleri ekranın dışına itiyordu
(31 Ağu, kullanıcı: "altta çıkan seçenekler ekrana sığmıyor").
⚠️ İkinci bir çıplak `.buyutec` bloğu YAZILMADI — `test_css_sinif_cakismasi`
tam bu hata sınıfını yakalıyor; kural mevcut bloğa işlendi. */
.buyutec{position:fixed;inset:0;z-index:var(--z-ortu);display:grid;
grid-template-rows:minmax(0,1fr) auto;gap:14px;padding:18px;
background:rgba(6,9,14,.92);backdrop-filter:blur(8px)}
/* ⚠️ ÜÇÜ DE 1. IZGARA SATIRINDA (`grid-area:1/1`). `.buyutec` iki satırlık
bir ızgara (`minmax(0,1fr) auto`); oklar sıradan çocuk olarak eklenseydi
2. ve 3. SATIRA düşer, alttaki düğmeleri ekran dışına iterlerdi —
31 Ağu'da düzeltilen kusurun aynısı geri gelirdi. */
.buyutec img{grid-area:1/1;width:100%;height:100%;object-fit:contain;
border-radius:var(--r-kart)}
/* Yan oklar: KEŞFEDİLEBİLİRLİK için. Kaydırma tek başına görünmez bir
özellik — kullanıcı 6 Eyl: *"sağda solda oklar olsun, kaydırma var
olduğu anlaşılsın."* */
.buyutec-ok{grid-area:1/1;align-self:center;z-index:1;
width:44px;height:44px;min-width:0;margin:0;padding:0;
display:flex;align-items:center;justify-content:center;
font-size:26px;line-height:1;border-radius:50%;
background:rgba(10,14,20,.72);border:1px solid var(--cizgi-2);
color:var(--murekkep);backdrop-filter:blur(4px)}
.buyutec-ok.sol{justify-self:start;margin-left:4px}
.buyutec-ok.sag{justify-self:end;margin-right:4px}
/* ⚠️ Uçta GİZLENMEZ, SÖNÜKLEŞİR: kaybolan düğme "özellik yok" izlenimi
verir; sönük düğme "buradasın, bu yöne gidilmiyor" der. */
.buyutec-ok:disabled{opacity:.28}
.buyutec-sayac{align-self:center;font-size:.85rem;color:var(--murekkep-2);
min-width:52px;text-align:center}
/* ⚠️ 31 Ağu, kullanıcı: "fotoyu seçince altta çıkan seçenekler ekrana
sığmıyor." Sebep: iki düğme YAN YANA ve uzun etiketlerle dar telefonda
taşıyordu; ayrıca `.buyutec` iki satırlık bir ızgara (`1fr auto`) ve
görsel alanı tüm boşluğu alınca düğmeler ekranın dışına itiliyordu.
⚠️ Görsele TAVAN konuyor (`minmax(0,1fr)`), düğmeler dar ekranda ALT
ALTA geçiyor; `flex-wrap` tek başına yetmiyordu çünkü satır yüksekliği
ızgaradan geliyor. */
.buyutec-alt{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;
padding-bottom:calc(env(safe-area-inset-bottom) + 6px)}
.buyutec-alt button{margin-top:0;flex:1 1 auto;min-width:132px;max-width:220px}
@media (max-width:380px){
.buyutec-alt{flex-direction:column}
.buyutec-alt button{max-width:none}
}
/* ── Kaynak kutusu: belge / bağlantı / yapıştırma ──────────────────── */
/* ⚠️ 31 Ağu, kullanıcı: "http kutusu tasarıma uygun değil". `type="url"`
ve `