/* ===================================================================== * css/anasayfa.css — kapı sayfasının (.ana-kapi / .kp-*) BÜTÜN stilleri. * SAHİBİ B3 (şartname §9). * * 7 EYLÜL 2026 — İKİNCİ TUR, TASARIM DİLİ YAZIMI. * * NEDEN BAŞTAN YAZILDI: A2 bu dosyayı index.php'den taşırken tek karakter * değiştirmemişti; o sırada B1 ve B2 bölüm markup'ını BAŞTAN kurdu. Ölçüldü: * eski dosyanın kural yazdığı `.kp-kurs__kart`, `.kp-okul__ic`, `.kp-hoca__kart`, * `.kp-yazi__kart`, `.kp-kitap__cerceve`, `.kp-slaytlar`, `.kp-slider__kumanda`, * `.kp-okullar--ikincil`, `.kp-araclar`, `.kp-arac`, `.kp-kapilar`, `.kp-kapi` * sınıflarının HİÇBİRİ artık basılmıyor (kaynak taraması: yalnız bu CSS'te * geçiyorlar). Yani dosyanın büyük bölümü ölü kuraldı ve yeni DOM * (`.kp-kart`, `.kp-dizi`, `.kp-kaydir`, `.kp-sekmeler`, `.kp-soz`, * `.kp-lisanslar__kutu`, `.kp-tanitim`, `.kp-canli`) çıplak duruyordu. * * YÖN: docs/anasayfa-v2-tasarim-yonu.md §2 — "yazma eser ve derkenar". * Kopyalanacak bir tema değil: cömert kenar boşluğu, güçlü metin hiyerarşisi, * çift cetvel çerçeveler, kenarda küçük künye işaretleri. Şatafat değil * TİTİZLİK. Teşhis §1'de: eksik olan fotoğraf değil, KONTRASTIN HER TÜRÜ * (değer, ölçek, doygunluk, ağırlık, derinlik, ritim). * * DEĞİŞMEZLER (şartname §1): * · Ham hex 0. Renk yalnız var(--token) ve color-mix() türevi. * TEK İSTİSNA `mask-image`/`-webkit-mask-image` içindeki `rgb(0 0 0 / …)`: * maske bir RENK değil bir opaklık haritasıdır (siyah = tam görünür, * saydam = gizli). Oraya tema token'ı yazmak maskeyi temaya göre * bozardı. Üç yerde geçiyor, hiçbiri ekranda renk üretmiyor. * · Yedi temada (iris·okyanus·orman·bordo·elmustafa·aile·murekkep) kontrast * ihlali 0. Aşağıdaki her renk kararının yanında ÖLÇÜLEN en kötü tema * değeri yazılı. * · Dokunma hedefi ≥24×24 (ok düğmeleri ≥44×44). * · Giriş animasyonunun `opacity:0` başlangıcı `.kp-hareket` altında (§12.3); * `.kp-js` "betik çalıştı", `.kp-hareket` "animasyon serbest" demek. * Yanlış yazılırsa hareketi kapatan kullanıcı metni kaybeder. * ===================================================================== */ /* ===================================================================== * 0. DEĞİŞKENLER * ===================================================================== */ .ana-kapi{ /* ---- RİTİM (tasarım yönü §2.8) ---- Tek bir nefes değeri sayfayı metronom gibi tekdüze yapıyordu: her bölüm aynı yükseklikte, göz hiçbir yerde durmuyor. Üç kademe var ve ardışık iki bölüm aynı kademede DEĞİL (atama §1'de bölüm bölüm yazılı). */ --kp-nefes-genis: clamp(72px, 8vw, 116px); --kp-nefes-orta: clamp(48px, 5vw, 76px); --kp-nefes-dar: clamp(22px, 2.6vw, 38px); /* Varsayılan: bölüm kendi kademesini söylemezse orta. */ --kp-nefes: var(--kp-nefes-orta); --kp-r: 14px; /* kart yarıçapı */ --kp-r-ic: 9px; /* kartın İÇİNDEKİ yüzey (görsel, levha) */ --kp-r-buyuk: 24px; /* büyük yüzey (iletişim şeridi, lisans kutusu) */ --kp-cetvel: 7px; /* çift cetvel arasındaki kâğıt payı */ /* ---- DERİNLİK (tasarım yönü §2.7) ---- İki katman: 1px kenar netliği + geniş yayılımlı yükseklik. Eski değer ikinci katmanı %7'de tutuyordu ve gölge pratikte görünmüyordu; kartlar zeminle aynı düzlemde duruyordu. Renk siyah değil MÜREKKEP — koyu paketlerde de doğru davransın. */ --kp-golge: 0 1px 2px color-mix(in srgb, var(--murekkep) 8%, transparent), 0 12px 28px -16px color-mix(in srgb, var(--murekkep) 26%, transparent); --kp-golge-2: 0 2px 5px color-mix(in srgb, var(--murekkep) 10%, transparent), 0 18px 40px -18px color-mix(in srgb, var(--murekkep) 34%, transparent); /* ---- DEĞER SIÇRAMASI (tasarım yönü §2.4) ---- Krem bant rol rengine %4 çekildi. Ölçüldü (WCAG bağıl parlaklık farkı, yedi tema): krem↔zemin 10,0-15,6 · krem↔beyaz 16,9-20,0 · zemin↔beyaz 4,4-6,9 — hepsi §2.4'ün istediği %3 eşiğinin üstünde. %4'te DURULDU: %6'da "aile" temasında `--murekkep-2` metni krem üstünde 4,55'e, %8'de 4,41'e düşüyor (eşik 4,5). %4'te en kötü tema 4,71. */ --kp-krem: color-mix(in srgb, var(--birincil) 4%, var(--yuzey-2)); /* Kaydırma rayının bir öğesinin genişliği — ok adımını JS bundan hesaplıyor. */ --kp-ray-oge: clamp(232px, 25vw, 310px); } /* ===================================================================== * 1. BÖLÜM RİTMİ VE BANTLAR * ===================================================================== */ .ana-kapi .kp-blok{position:relative;padding-block:var(--kp-nefes)} /* Kademeler bölüm bölüm. SIRA (index.php §11.2, canlı şerit veri varsa girer): slider · rakam(dar) · okullar(geniş) · tanıtım(orta) · kurslar(geniş) · canlı(dar) · hocalar(orta) · söz(dar) · görüşler(orta) · kitaplar(geniş) · yazılar(orta) · lisanslar(dar) · nasıl-çalışır(orta) · iletişim(dar) · kapanış(geniş). Ardışık iki bölüm aynı kademede değil. */ .ana-kapi .kp-okullar, .ana-kapi .kp-kurslar, .ana-kapi .kp-kitaplar, .ana-kapi .kp-cta{--kp-nefes:var(--kp-nefes-genis)} .ana-kapi .kp-serit--rakam, .ana-kapi .kp-canli, .ana-kapi .kp-sozler, .ana-kapi .kp-lisanslar{--kp-nefes:var(--kp-nefes-dar)} /* İlk bölüm yapışkan barın hemen altından başlar. */ .ana-kapi > .kp-blok:first-child{padding-top:clamp(34px,4vw,64px)} .ana-kapi .kp-blok--dar{padding-block:0 var(--kp-nefes-dar)} /* ---- TAM GENİŞLİK BANT (.kp-serit) ---- `.wrap` 1350'de ortalanmış bir kap; bant ondan çıkmak zorunda. `margin-inline: calc(50% - 50vw)` iki yanı görüntü kenarına çeker, AYNI değerin iç dolgu olarak geri verilmesi bandın içerik kutusunu `.wrap`ın içerik kutusuna oturtur. `50vw` KAYDIRMA ÇUBUĞUNU DA SAYAR — taşmayı `overflow-x: clip` kırpıyor (cekirdek.css, hem `html` hem gövde). `hidden` DEĞİL: hidden bir kaydırma kabı yaratıp yapışkan üst barı bozardı. */ .kp-serit{margin-inline:calc(50% - 50vw);padding-inline:calc(50vw - 50%);overflow:clip} .kp-serit--krem{background:var(--kp-krem)} .kp-serit--koyu{background:var(--birincil-koyu);color:var(--yuzey)} /* ---- DEĞER SIÇRAMASI, ARDIŞIK BANTLARDA ---- Bölüm sınıflarını B1/B2 yazdı ve üç krem bant arka arkaya geliyor (tanıtım · kurslar · hocalar). Üçü aynı tonda olsaydı sayfa yine tek bir bej lekeye dönerdi. Kardeş zinciriyle çözülüyor: ikinci krem BEYAZ yüzeye çıkar, üçüncü krem'e döner. PHP'ye dokunmadan ritim kuruluyor. */ .ana-kapi .kp-serit--krem + .kp-serit--krem{background:var(--yuzey)} .ana-kapi .kp-serit--krem + .kp-serit--krem + .kp-serit--krem{background:var(--kp-krem)} .ana-kapi .kp-serit--krem + .kp-serit--krem + .kp-serit--krem + .kp-serit--krem{background:var(--yuzey)} /* Krem üstüne krem gelirse (dördüncüden sonra) saç teli ayırır. */ .ana-kapi .kp-serit--krem + .kp-serit--krem + .kp-serit--krem + .kp-serit--krem + .kp-serit--krem{background:var(--kp-krem);border-top:1px solid var(--cizgi)} /* İki koyu bant arka arkaya (slayt + rakam şeridi) tek gövdeye dönüşmesin. */ .kp-serit--koyu + .kp-serit--koyu{border-top:1px solid color-mix(in srgb, var(--yuzey) 16%, transparent)} /* ---- AÇILIŞ KABI (.kp-acilis, index.php) ---- 5 Ekim 2026, kullanıcı: rakam şeridinin zemini slayttan farklı, arada geçiş çizgisi var; "üstteki kısımla aynı olsun". Eskiden iki bölüm ayrı ayrı zemin çiziyordu: ışıma ve örgü maskesi şeridin tepesinde baştan başlıyor, slaydın alt köşesindeki altın ışıma da kesiliyordu. Artık zemin (renk, ışımalar, örgü) kabın; içteki bölümler saydam ve kırpmasız. Yatay taşmayı kabın kendi `overflow:clip`'i keser. */ .ana-kapi .kp-acilis{position:relative} .ana-kapi .kp-acilis > .kp-blok.kp-serit{background:none;border-top:0;overflow:visible;z-index:1} .ana-kapi .kp-acilis > .kp-blok.kp-serit::after{content:none} /* ŞERİT OLMAYAN BÖLÜM DE BANT TAŞIYABİLİR. Lisanslar · nasıl-çalışır · iletişim arka arkaya üç "sade" bölüm ve üçü de sayfa zeminindeydi. Tam genişlik zemini sözde öğe çizer, akış bozulmaz; ortadaki bölüm beyaz yüzeye çıkar. */ .ana-kapi .kp-blok:not(.kp-serit){--kp-bant:transparent} .ana-kapi .kp-blok:not(.kp-serit)::before{ content:"";position:absolute;z-index:0;top:0;bottom:0; left:calc(50% - 50vw);right:calc(50% - 50vw); background:var(--kp-bant);pointer-events:none} /* Ortadaki bant KREM, beyaz DEĞİL: o bölüm ("nasıl çalışır") içinde beyaz bir kart taşıyor ve beyaz bantta kart zemine gömülüyordu. Krem hem kartı çıkarıyor hem sıçramayı %5,8'den %12,4'e büyütüyor. */ .ana-kapi .kp-blok:not(.kp-serit) + .kp-blok:not(.kp-serit){--kp-bant:var(--kp-krem)} .ana-kapi .kp-blok:not(.kp-serit) + .kp-blok:not(.kp-serit) + .kp-blok:not(.kp-serit){--kp-bant:transparent} .ana-kapi .kp-blok:not(.kp-serit) + .kp-blok:not(.kp-serit) + .kp-blok:not(.kp-serit) + .kp-blok:not(.kp-serit){--kp-bant:var(--kp-krem)} /* Odak halkası kabukta `--birincil`; koyu bantta o renk zeminle karışıyor. */ .kp-serit--koyu :focus-visible{outline-color:var(--yuzey)} /* ---- KOYU BANTTA DOKU (tasarım yönü §2.3) ---- `uploads/ornek/desen-1.jpg` (Moresque çini levhası) yerine ÜRETİLEN örgü seçildi: o dosya 400 KB ve her ziyaretçiye inecekti; §2.3 dosya bağımlılığı istemeyene bu alternatifi zaten veriyor. Dört doğrultuda saç teli çizgi = sekiz katlı girih ızgarası. Metnin ARKASINDA, %7 beyaz: kontrastı ölçülebilir biçimde değiştirmiyor (metin zaten `--yuzey`, zemin `--birincil-koyu`; 6,32-11,63). */ .ana-kapi .kp-serit--koyu::after{ content:"";position:absolute;inset:0;z-index:0;pointer-events:none; --kp-org: color-mix(in srgb, var(--yuzey) 7%, transparent); background-image: repeating-linear-gradient(45deg, var(--kp-org) 0 1px, transparent 1px 26px), repeating-linear-gradient(-45deg, var(--kp-org) 0 1px, transparent 1px 26px), repeating-linear-gradient(0deg, var(--kp-org) 0 1px, transparent 1px 52px), repeating-linear-gradient(90deg, var(--kp-org) 0 1px, transparent 1px 52px); -webkit-mask-image:radial-gradient(120% 90% at 70% 20%, rgb(0 0 0) 0%, rgb(0 0 0 / .5) 55%, transparent 88%); mask-image:radial-gradient(120% 90% at 70% 20%, rgb(0 0 0) 0%, rgb(0 0 0 / .5) 55%, transparent 88%); } /* ===================================================================== * 2. DEKORATİF KATMAN * Hepsi `aria-hidden`, `pointer-events:none`, içeriğin ARKASINDA. * Kural: dekor hiçbir yerde metnin kontrastını değiştirmez. * ===================================================================== */ .ana-kapi .kp-dekor{position:absolute;pointer-events:none;z-index:0;color:var(--birincil)} .ana-kapi .kp-blok > :not(.kp-dekor){position:relative;z-index:1} .ana-kapi .kp-dekor--izgara{ top:-10px;left:-30px;width:230px;height:200px; background-image:radial-gradient(color-mix(in srgb, var(--yuzey) 26%, transparent) 1.5px, transparent 1.6px); background-size:17px 17px; -webkit-mask-image:linear-gradient(125deg, rgb(0 0 0) 0%, rgb(0 0 0 / .3) 55%, transparent 82%); mask-image:linear-gradient(125deg, rgb(0 0 0) 0%, rgb(0 0 0 / .3) 55%, transparent 82%); } .ana-kapi .kp-dekor--konfeti{top:6%;right:2%;width:170px;height:150px;color:var(--vurgu);opacity:.85} .ana-kapi .kp-dekor--konfeti svg{width:100%;height:100%} /* Koyu bantta konfeti beyaza döner: sarı, koyu zeminin üstünde tek başına duran bir leke gibi görünüyordu. */ .ana-kapi .kp-serit--koyu .kp-dekor--konfeti{color:var(--yuzey);opacity:.45} .ana-kapi .kp-dekor--yol{top:-34px;left:50%;width:min(430px,60%);height:170px; transform:translateX(-46%);color:color-mix(in srgb, var(--birincil) 40%, transparent)} .ana-kapi .kp-dekor--yol svg{width:100%;height:100%} .ana-kapi .kp-dekor--dalga{top:calc(var(--kp-nefes) * .34);left:0;right:0;height:14px; color:color-mix(in srgb, var(--murekkep) 20%, transparent)} .ana-kapi .kp-dekor--dalga svg{display:block;width:100%;height:14px} /* Yumuşak radyal ışımalar. `filter:blur` yerine gradyanın kendi yumuşak durağı — blur büyük yüzeyde ölçülebilir kare maliyeti getiriyor. */ .ana-kapi .kp-dekor--isik{width:min(620px,72vw);aspect-ratio:1;border-radius:50%} .ana-kapi .kp-dekor--isik-a{top:-24%;right:-12%; background:radial-gradient(closest-side, color-mix(in srgb, var(--birincil) 34%, transparent), transparent)} .ana-kapi .kp-dekor--isik-b{bottom:-32%;left:-14%; background:radial-gradient(closest-side, color-mix(in srgb, var(--vurgu) 20%, transparent), transparent)} .ana-kapi .kp-blok:not(.kp-serit--koyu) .kp-dekor--isik-a{ background:radial-gradient(closest-side, color-mix(in srgb, var(--birincil) 10%, transparent), transparent)} .ana-kapi .kp-blok:not(.kp-serit--koyu) .kp-dekor--isik-b{ background:radial-gradient(closest-side, color-mix(in srgb, var(--vurgu) 12%, transparent), transparent)} /* ===================================================================== * 3. FOSFOR — .fosfor (metnin ARKASI) * Doygun rengin (§2.5) sayfadaki meşru yeri. `.fosfor`un kendisi * css/style.css'te. Bölüm başlıklarının altındaki `.kalem-alti` izi * 29 Eylül 2026'da kaldırıldı: yapay duruyordu. * ===================================================================== */ /* Fosforlu vurgu KOYU BANTTA daha güçlü: ışık zemin için ayarlanmış %30'luk karışım koyu zeminde bir gölgeye dönüşüyor ve "kalem izi" olduğu anlaşılmıyordu. %50 ölçüldü: beyaz yazı yedi temada 4,47-5,29 arasında, başlık zaten büyük metin (eşik 3,0). */ /* Kural css/style.css'e taşındı (7 Eylül 2026): `.fosfor` artık `::before` ile değil kendi arka planıyla çiziliyor, bu seçici boşa düşüyordu. */ /* ===================================================================== * 4. BÖLÜM BAŞLIĞI (.kp-bas) * * ÖLÇEK FARKI AÇILDI (tasarım yönü §2.6). Ölçülen fark: referansta başlık * 44px / gövde 15px, oran ~3; bizde 40/15,5 = 2,6 ve bütün başlıklar aynı * boyda. Üç kademe artık net ayrı: * künye/etiket mono 11.5px · .1em · büyük harf * gövde 15.5px / 1.62 * başlık clamp(30px,3.4vw,46px) / 1.06 · -.02em · 800 * * İKİ VARYANT VE ADLARI (§12.2): ortalanmış = değiştiricisiz `.kp-bas`, * sola yaslı = `.kp-bas--yan`. `--sol` / `--orta` diye bir sınıf KODDA YOK; * onlara kural yazmak ölü kural olurdu. * ===================================================================== */ .ana-kapi .kp-bas{max-width:54rem;margin:0 auto clamp(32px,3.8vw,60px);text-align:center} /* ---- KÜNYE İŞARETİ (tasarım yönü §2.2) ---- Etiket eskiden bir "hap"tı: her SaaS şablonunda duran, kuruma ait olmayan bir biçim. Yerine yazma eser sayfasının kenar işareti: 18px'lik bir cetvel çizgisi + mono künye. Ucuz ama sayfaya "dizilmiş" hissi veriyor. Renk `--birincil-KOYU`: `--birincil` üç temada eşiğin altında kalıyor (Okyanus 3,74 · Orman 3,73 · ElMustafa 4,07). Koyu ton krem bant üstünde yedi temada 5,30-9,61, beyaz üstünde 6,32-11,63. */ .kp-etiket{display:inline-flex;align-items:center;gap:10px;min-height:24px; color:var(--birincil-koyu); font-family:var(--yz-mono);font-size:11.5px;font-weight:500; letter-spacing:.1em;text-transform:uppercase} .kp-etiket::before{content:"";flex:none;width:18px;height:1px;background:currentColor} .ana-kapi .kp-bas .kp-etiket{justify-content:center} .ana-kapi .kp-bas--yan .kp-etiket{justify-content:flex-start} .ana-kapi .kp-serit--koyu .kp-etiket{color:var(--yuzey)} .ana-kapi .kp-bas__baslik{ scroll-margin-top:calc(var(--zy-bar) + 16px); margin:14px 0 0;padding:0;border:0; font-family:var(--yz-baslik);font-size:clamp(30px,3.4vw,46px);font-weight:800; line-height:1.06;letter-spacing:-.02em;text-transform:none;color:var(--murekkep)} .ana-kapi .kp-serit--koyu .kp-bas__baslik{color:var(--yuzey)} .ana-kapi .kp-bas__alt{margin:18px auto 0;max-width:58ch; font-size:15.5px;line-height:1.62;color:var(--murekkep-2)} .ana-kapi .kp-serit--koyu .kp-bas__alt{color:var(--yuzey);opacity:.86} .ana-kapi .kp-bas__eylem{margin-top:26px} /* Sola yaslı varyant: solda künye + başlık, ortada sarı kıvrım, sağda düğme. */ .ana-kapi .kp-bas--yan{max-width:none;margin-inline:0;text-align:left; display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:18px 30px} .ana-kapi .kp-bas--yan .kp-bas__sol{min-width:0} .ana-kapi .kp-bas--yan .kp-bas__alt{margin-inline:0} .ana-kapi .kp-bas__kivrim{display:block;color:var(--vurgu);line-height:0} .ana-kapi .kp-bas__kivrim svg{width:auto;height:34px} /* Ara başlık — akademi grubunun üstünde (okul ızgarası). Aynı künye dili. */ .ana-kapi .kp-okul-grup__baslik{display:flex;align-items:center;gap:14px; margin:clamp(26px,2.6vw,42px) 0 16px; font-family:var(--yz-mono);font-size:11.5px;font-weight:600;letter-spacing:.11em; text-transform:uppercase;color:var(--murekkep-2)} .ana-kapi .kp-okul-grup:first-child .kp-okul-grup__baslik{margin-top:0} .ana-kapi .kp-okul-grup__baslik::after{content:"";flex:1;height:1px;background:var(--cizgi)} /* Grup adının solunda rolün kendi mürekkebinden bir nokta: ızgaradaki renk ailesini başlıkta önceden haber verir. */ .ana-kapi .kp-okul-grup__baslik::before{content:"";flex:none;width:7px;height:7px; border-radius:2px;background:color-mix(in srgb, var(--rol,var(--birincil)) 68%, var(--murekkep))} /* ===================================================================== * 5. BUTON HİYERARŞİSİ (tasarım yönü §3) * * Bugünkü en görünür kusur buydu: "Kursu incele" soluk gri zeminde soluk * yazıyla PASİF BİR ALAN gibi duruyor, oysa kartın tek eylemi. Üç kademe: * Birincil : dolu `--birincil-koyu` + `--yuzey` yazı (6,32-11,63) * İkincil : 1px `--birincil-koyu` çizgi, saydam zemin, koyu yazı * Metin : yalnız yazı + ok işareti * SOLUK GRİ DOLGULU BUTON HİÇ KULLANILMAZ. * Koyu bantta birincil `--yuzey` dolgulu + `--murekkep` yazı (15,37-18,54). * ===================================================================== */ .ana-kapi .kp-dugme, .ana-kapi .kp-kurs__dugme, .ana-kapi .kp-slayt__dugme, .ana-kapi .kp-tanitim__dugme, .ana-kapi .kp-canli__dugme, .ana-kapi .kp-cta__dugme{ display:inline-flex;align-items:center;justify-content:center;gap:8px; min-height:46px;padding:12px 24px;border-radius:10px; background:var(--birincil-koyu);color:var(--yuzey);border:1px solid var(--birincil-koyu); font-size:14.5px;font-weight:600;line-height:1.2;text-decoration:none; transition:background-color .15s ease-out,border-color .15s ease-out,color .15s ease-out} .ana-kapi .kp-dugme svg,.ana-kapi .kp-kurs__dugme svg,.ana-kapi .kp-slayt__dugme svg, .ana-kapi .kp-tanitim__dugme svg,.ana-kapi .kp-canli__dugme svg, .ana-kapi .kp-cta__dugme svg{width:17px;height:17px;flex:none} .ana-kapi .kp-tanitim__dugme:hover,.ana-kapi .kp-cta__dugme:hover{ background:var(--birincil);border-color:var(--birincil)} /* Koyu bantta birincil ters döner. */ .ana-kapi .kp-serit--koyu .kp-slayt__dugme, .ana-kapi .kp-serit--koyu .kp-cta__dugme{ background:var(--yuzey);border-color:var(--yuzey);color:var(--murekkep)} .ana-kapi .kp-serit--koyu .kp-slayt__dugme:hover, .ana-kapi .kp-serit--koyu .kp-cta__dugme:hover{ background:var(--vurgu);border-color:var(--vurgu);color:var(--murekkep)} /* İKİNCİL — "Hepsini gör", "Tüm hocalar", "Mağazaya git". Eskiden bunlar da dolu koyu düğmeydi: sayfada yedi tane özdeş dolu düğme vardı ve kartın içindeki asıl eylem onların yanında kayboluyordu. */ .ana-kapi .kp-bas__dugme{display:inline-flex;align-items:center;gap:8px; min-height:44px;padding:11px 20px;border-radius:10px; background:transparent;border:1px solid var(--birincil-koyu);color:var(--birincil-koyu); font-size:14px;font-weight:600;text-decoration:none;white-space:nowrap; transition:background-color .15s ease-out,color .15s ease-out} .ana-kapi .kp-bas__dugme svg{width:16px;height:16px;flex:none} .ana-kapi .kp-bas__dugme:hover{background:var(--birincil-koyu);color:var(--yuzey)} .ana-kapi .kp-serit--koyu .kp-bas__dugme{ border-color:color-mix(in srgb, var(--yuzey) 55%, transparent);color:var(--yuzey)} .ana-kapi .kp-serit--koyu .kp-bas__dugme:hover{background:var(--yuzey);color:var(--murekkep)} /* METİN kademesi — "Yazıyı oku", "İncele". Ok işareti hover'da ilerler. */ .ana-kapi .kp-yazi__git,.ana-kapi .kp-kitap__git{ display:inline-flex;align-items:center;gap:6px;min-height:24px; font-size:13.5px;font-weight:600;color:var(--birincil-koyu)} .ana-kapi .kp-yazi__git svg,.ana-kapi .kp-kitap__git svg{width:15px;height:15px;flex:none} /* ===================================================================== * 6. IZGARA (.kp-dizi) — sözleşme §2.4 * `--4` bir ÜST SINIR: dar ekranda auto-fill daraltır, geniş ekranda dört * sütunda durur. Eskiden bu sınıfın hiç kuralı yoktu (§7.3); okul ızgarası * kaldırılmış bir kuralın artığıyla ayakta duruyordu. * ===================================================================== */ .ana-kapi .kp-dizi{list-style:none;margin:0;padding:0;display:grid; gap:clamp(16px,1.7vw,26px); grid-template-columns:repeat(auto-fill,minmax(min(var(--kp-dizi-min,240px),100%),1fr))} .ana-kapi .kp-dizi--4{--kp-dizi-min:258px} @media (min-width:1120px){ .ana-kapi .kp-dizi--4{grid-template-columns:repeat(4,minmax(0,1fr))} } /* Ders biçimleri okul DEĞİL, dersin veriliş yolu: aynı dil, küçük ölçek. */ .ana-kapi .kp-dizi--ikincil{--kp-dizi-min:186px;gap:12px} @media (min-width:1120px){ .ana-kapi .kp-dizi--ikincil{grid-template-columns:repeat(auto-fill,minmax(186px,1fr))} } /* ===================================================================== * 7. KART TABANI (.kp-kart) — ÇİFT CETVEL (tasarım yönü §2.1) * * Yazma eser sayfasındaki gibi: dış cetvel (1px `--cizgi`), içeride 7px * kâğıt payı, sonra içerik yüzeyinin kendi ince cetveli. Fazladan `div` * gerekmiyor — pay kartın dolgusu, iç cetvel içerik yüzeyinin `box-shadow`u. * Kart gölgesi iki katmanlı (§2.7); hover'da 3px yükselme, 150ms. * ===================================================================== */ .ana-kapi .kp-kart{position:relative;display:flex;flex-direction:column;height:100%; padding:var(--kp-cetvel); background:var(--yuzey);border:1px solid var(--cizgi);border-radius:var(--kp-r); box-shadow:var(--kp-golge)} .ana-kapi .kp-kart:hover{border-color:color-mix(in srgb, var(--birincil) 40%, transparent); box-shadow:var(--kp-golge-2)} /* Kapak: kartın İÇİNDEKİ yüzey, kendi cetveliyle. `height:auto` şart — ``de iki boyut da nitelik olarak yazılı, aksi hâlde `aspect-ratio` hiç uygulanmıyor (§6.4). */ .ana-kapi .kp-kart__kapak{position:relative;display:block;overflow:hidden; border-radius:var(--kp-r-ic);background:var(--yuzey-2); box-shadow:0 0 0 1px color-mix(in srgb, var(--birincil) 13%, transparent)} .ana-kapi .kp-kart__kapak img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover} /* Kapağı olmayan kart: BOŞ KUTU DEĞİL, desenli bir levha + ortada ikon. Küçük gri bir ikon, canlı kapaklardan oluşan bir satırda "görsel yüklenemedi" gibi duruyordu. */ .ana-kapi .kp-kart__kapak--bos{display:grid;place-items:center;aspect-ratio:16/10; background: repeating-linear-gradient(45deg, color-mix(in srgb, var(--birincil) 9%, transparent) 0 1px, transparent 1px 18px), repeating-linear-gradient(-45deg, color-mix(in srgb, var(--birincil) 9%, transparent) 0 1px, transparent 1px 18px), color-mix(in srgb, var(--birincil) 6%, var(--yuzey)); color:var(--birincil-koyu)} .ana-kapi .kp-kart__kapak--bos svg{width:30px;height:30px;opacity:.75} .ana-kapi .kp-kart__govde{display:flex;flex-direction:column;flex:1; padding:15px 11px 4px} /* Alt satır: cetvel çizgisiyle ayrılır — kartın künyesi ile eylemi arasındaki sınır, referansın "20 Lessons | 50 Students" ayracının karşılığı. */ .ana-kapi .kp-kart__alt{display:flex;flex-direction:column;margin-top:auto; padding:13px 11px 9px;border-top:1px solid var(--cizgi)} /* ===================================================================== * 8. HERO SLIDER (.kp-slider) — sözleşme §2.7 * ===================================================================== */ .ana-kapi .kp-slider{padding-block:clamp(40px,4.6vw,80px) clamp(48px,5.4vw,92px)} /* ---- RAY ---- JS KAPALIYKEN SLAYTLAR ARASINDA GEZMENİN TEK YOLU BU (§7.3). Ray yatay sıraya çevrilip `overflow-x:auto` + `scroll-snap` yazılmasaydı 2. ve 3. slayt kırpılır ve ERİŞİLEMEZ kalırdı. Betik varken tek slayt gösteriliyor, taşma olmadığı için kaydırma çubuğu da çıkmıyor. */ .ana-kapi .kp-slider__ray{display:flex;list-style:none;margin:0;padding:0; overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory; scrollbar-color:color-mix(in srgb, var(--yuzey) 40%, transparent) transparent} .ana-kapi .kp-slayt{flex:0 0 100%;min-width:0;scroll-snap-align:start; display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:34px 48px;align-items:center} .ana-kapi .kp-slayt--gorselsiz{grid-template-columns:minmax(0,1fr)} /* `hidden` niteliği `display:grid` tarafından ezilir; açıkça geri alınır. */ .ana-kapi .kp-slayt[hidden]{display:none} /* Betik tek slayt gösterdiğinde ray artık bir kaydırma kabı değil. */ .ana-kapi .kp-slider--js .kp-slider__ray{scrollbar-width:none} .ana-kapi .kp-slider--js .kp-slider__ray::-webkit-scrollbar{display:none} /* SABİT BOY masaüstünde de (5 Ekim 2026): görseller büyüyünce slaytlar arası boy farkı 170 px'e çıktı, her geçişte alttaki sayfa zıplıyordu. Betik varken slaytlar aynı ızgara hücresine yığılır, gizli olan yer kaplar ama görünmez; şerit en uzun slayt boyunda durur. */ .ana-kapi .kp-slider--js .kp-slider__ray{display:grid;overflow:visible} .ana-kapi .kp-slider--js .kp-slayt{grid-area:1/1} .ana-kapi .kp-slider--js .kp-slayt[hidden]{display:grid;visibility:hidden} /* OKLAR İÇERİĞE BİNMESİN: bant tam genişlik olduğu için `--kp-ok-dis` pratikte hep 8 px'e düşüyor; içerik sütunu ise ~1700 px'ten dar ekranda kenara 30-40 px kalıyor. 52 px'lik oklar metnin ve büyük görselin üstüne biniyordu (1366 px'te ölçüldü: 18 px). Ray, kenar boşluğu 76 px'i bulana kadar içeri çekilir; geniş ekranda pay sıfıra iner. 1024 altında oklar zaten bölümün dibinde (anasayfa-vakar.css). */ @media (min-width:1024px){ .ana-kapi .kp-slider--js .kp-slider__ray{padding-inline:max(0px, calc(76px - (100vw - 100%) / 2))} } /* `.fosfor` şeridi `z-index:-1` taşıyor; metin sütunu kendi yığın bağlamını kurmazsa vurgu bandın zemininin ARKASINA düşer ve hiç görünmez. */ .ana-kapi .kp-slayt__metin{position:relative;z-index:1;min-width:0;max-width:35rem} .ana-kapi .kp-slayt__etiket{margin:0 0 16px;font-family:var(--yz-mono); font-size:11.5px;letter-spacing:.14em;text-transform:uppercase; color:var(--yuzey);opacity:.82} /* Kicker opaklığı .72 iken Mürekkep temasında 4,71 ölçülmüştü — eşiğin hemen üstü. .82'de yedi temada da 5,6 üstünde. */ .ana-kapi .kp-slayt__baslik{margin:0;font-family:var(--yz-baslik); font-size:clamp(31px,4.1vw,54px);font-weight:800;line-height:1.04; letter-spacing:-.022em;color:var(--yuzey)} .ana-kapi .kp-slayt__alt{margin:20px 0 0;max-width:52ch;font-size:16px;line-height:1.66; color:var(--yuzey);opacity:.88} .ana-kapi .kp-slayt__dugme{margin-top:30px;min-height:50px;padding:14px 28px;font-size:15px} /* ---- SLAYT GÖRSELİ (tasarım yönü §2.7) ---- 5 Ekim 2026, kurum isteği: görsel büyütüldü (sütun payı .95fr → 1.1fr, üst sınırlar daire/kare 430 → 540, afiş 310 → 390, geniş 430 → 680 px) ve üstüne taşan rakam kartları kaldırıldı. */ .ana-kapi .kp-slayt__gorsel{position:relative;min-width:0; display:flex;align-items:center;justify-content:center;padding:14px 0} .ana-kapi .kp-slayt__gorsel img{position:relative;z-index:1;display:block; width:100%;max-width:var(--slayt-en,540px);height:auto; aspect-ratio:var(--slayt-oran,1);object-fit:cover; border-radius:var(--slayt-yuvarlak,50%); box-shadow:0 24px 60px -28px color-mix(in srgb, var(--murekkep) 70%, transparent)} /* ŞEKİL (geçiş 149) — panelden seçilir; kod yalnız üç değişkeni değiştirir. `afis` A4 dikey (1:1,414) ve en dar olan: geniş bırakılsa yüksekliği metin sütununu aşıp bütün şeridi uzatıyordu. */ .ana-kapi .kp-slayt__gorsel--kare img{--slayt-oran:1; --slayt-yuvarlak:26px} .ana-kapi .kp-slayt__gorsel--afis img{--slayt-oran:1/1.414;--slayt-yuvarlak:18px;--slayt-en:390px} .ana-kapi .kp-slayt__gorsel--genis img{--slayt-oran:16/9; --slayt-yuvarlak:22px;--slayt-en:680px} /* Arkadaki renkli disk yalnız DAİREde tam görünür; dikdörtgen şekillerde köşelerden taşıyordu — küçültülüp kenara alındı. */ .ana-kapi .kp-slayt__gorsel--kare .kp-sahne__halka, .ana-kapi .kp-slayt__gorsel--afis .kp-sahne__halka, .ana-kapi .kp-slayt__gorsel--genis .kp-sahne__halka{width:min(240px,58%);transform:translate(-74%,-22%)} .ana-kapi .kp-slayt__gorsel--kare .kp-sahne__serit, .ana-kapi .kp-slayt__gorsel--afis .kp-sahne__serit, .ana-kapi .kp-slayt__gorsel--genis .kp-sahne__serit{transform:translate(30%,-88%)} /* Büyük renkli disk ve eğik şeritler — görselin arkasındaki kompozisyon. */ .ana-kapi .kp-sahne__halka{position:absolute;z-index:0;pointer-events:none; width:min(470px,86%);aspect-ratio:1;border-radius:50%; background:color-mix(in srgb, var(--birincil) 42%, transparent); top:50%;left:50%;transform:translate(-50%,-50%)} .ana-kapi .kp-sahne__serit{position:absolute;z-index:0;pointer-events:none; width:min(230px,52%);aspect-ratio:1;border-radius:50%; top:50%;left:50%;transform:translate(-16%,-74%); background:repeating-linear-gradient(58deg, color-mix(in srgb, var(--vurgu) 55%, transparent) 0 6px, transparent 6px 18px); -webkit-mask-image:radial-gradient(closest-side, rgb(0 0 0) 46%, transparent 100%); mask-image:radial-gradient(closest-side, rgb(0 0 0) 46%, transparent 100%)} /* ---- KUMANDA ---- Sunucu `hidden` basar, `js/anasayfa-slider.js` kaldırır (§7.1). CSS bunu `.kp-js` ile GİZLEMEZ: gizleseydi hareket kısıtı olan kullanıcıdan okları alırdı, oysa kısıt yalnız otomatik geçişi kapatır. */ /* SEÇİCİ NEDEN `.kp-slider >` İLE NİTELENDİ: yukarıdaki `.ana-kapi .kp-blok > :not(.kp-dekor){position:relative}` kuralı üç sınıf taşıyor; `.ana-kapi .kp-slider__ok` iki sınıfla onu ezemiyordu ve oklar mutlak konum yerine AKIŞA giriyordu (ölçüldü: iki daire hero'nun sol alt köşesinde alt alta duruyordu). */ .ana-kapi .kp-slider > .kp-slider__ok{position:absolute;z-index:3;top:calc(50% - 22px); display:grid;place-items:center;width:44px;height:44px; padding:0;border:1px solid color-mix(in srgb, var(--yuzey) 40%, transparent); border-radius:999px;background:color-mix(in srgb, var(--birincil-koyu) 70%, transparent); color:var(--yuzey);cursor:pointer; transition:background-color .15s ease-out,border-color .15s ease-out} .ana-kapi .kp-slider__ok svg{width:20px;height:20px} .ana-kapi .kp-slider__ok:hover{background:var(--yuzey);border-color:var(--yuzey);color:var(--murekkep)} .ana-kapi .kp-slider__ok[hidden]{display:none} /* Oklar bandın KENDİ kenarına değil, İÇERİK sütununun 56px dışına oturur. `left:0` bandın dolgu kutusunun kenarı, yani görüntü alanının kenarıdır: 1905px'te içerik sütunu 277px'ten başlıyor ve oklar slayttan 277px uzakta, "başka bir şeye ait" gibi duruyordu. `max()` dar ekranda 8px'te durduruyor ki ok ekran dışına taşmasın. */ .ana-kapi .kp-slider{--kp-ok-dis:max(8px, calc(50vw - 50% - 56px))} .ana-kapi .kp-slider > .kp-slider__ok--geri{left:var(--kp-ok-dis)} .ana-kapi .kp-slider > .kp-slider__ok--ileri{right:var(--kp-ok-dis)} .ana-kapi .kp-slider__noktalar{display:flex;align-items:center;justify-content:center;gap:4px; margin-top:30px} .ana-kapi .kp-slider__noktalar[hidden]{display:none} /* Dokunma hedefi 26×26 (eşik 24). Görünen nokta küçük olabilir, DÜĞMENİN kendisi olamaz — daha önce 8×8 denendi ve kullanılamadı. */ .ana-kapi .kp-slider__nokta{display:grid;place-items:center;width:26px;height:26px; padding:0;border:0;background:transparent;cursor:pointer} .ana-kapi .kp-slider__nokta::before{content:"";display:block;width:8px;height:8px;border-radius:999px; background:color-mix(in srgb, var(--yuzey) 42%, transparent); transition:width .18s ease-out,background-color .18s ease-out} /* Etkin nokta — doygun rengin (§2.5) beş meşru yerinden biri. */ .ana-kapi .kp-slider__nokta[aria-selected="true"]::before{width:22px;background:var(--vurgu)} /* ---- STATİK HERO YEDEĞİ ---- Slayt yoksa bolum-slider.php bugünkü statik hero'yu basar (§4.1). Aşağısı ÖLÜ KURAL DEĞİL: veri boşken tek görünen hero budur. */ .ana-kapi .kp-sahne .hero{padding:0;position:relative;z-index:1; grid-template-columns:minmax(0,1.08fr) minmax(280px,.92fr);gap:40px 56px;align-items:center} .ana-kapi .kp-sahne .hero-zincir{color:var(--yuzey);opacity:.82;font-size:11.5px;letter-spacing:.14em} .ana-kapi .kp-sahne .hero h1{color:var(--yuzey);max-width:18ch; font-size:clamp(31px,4.1vw,54px);font-weight:800;line-height:1.04;letter-spacing:-.022em} .ana-kapi .kp-sahne .hero p.hero-giris{color:var(--yuzey);opacity:.88;max-width:50ch; font-size:16px;line-height:1.66} .ana-kapi .hero-yan{position:relative;display:flex;align-items:center;justify-content:center; min-height:300px;padding:18px 0} .ana-kapi .hero-yan .hero-fis,.ana-kapi .hero-yan .kp-sahne__gorsel{position:relative;z-index:1} .ana-kapi .hero-yan .hero-fis{margin:0;align-self:auto;width:100%;max-width:400px} .ana-kapi .kp-sahne .fis{box-shadow:var(--kp-golge-2)} .fis-ayet .dosya-sekme{background:var(--birincil-koyu)} .ana-kapi .hero p.fis-ayet-ar{margin:2px 0 12px;text-align:right; font-size:30px;line-height:1.95;letter-spacing:.01em;color:var(--birincil-koyu)} .ana-kapi .fis-ayet .fis-metin{font-style:italic} @media (max-width:640px){ .ana-kapi .hero p.fis-ayet-ar{font-size:25px} } .ana-kapi .kp-sahne__gorsel{position:relative;z-index:1;width:100%;max-width:440px} .ana-kapi .kp-sahne__gorsel img{display:block;width:100%;height:auto;aspect-ratio:3/2; object-fit:cover;border-radius:var(--kp-r-buyuk)} .ana-kapi .kp-sahne__gorsel--hero img{aspect-ratio:1;border-radius:50%} /* Hero araması (yedek hero'nun içinde). Kutu tek parça: alan + düğme aynı kenarlığın içinde. Düğme SESSİZ — dolu olsaydı hero'da iki özdeş dolu düğme üst üste dururdu. */ .kp-ara{display:flex;gap:0;margin:22px 0 0;max-width:480px; border:1px solid var(--cizgi);border-radius:11px;background:var(--yuzey);overflow:hidden} .kp-ara input{flex:1 1 auto;min-width:0;border:0;background:transparent; padding:14px 16px;font:inherit;font-size:15px;color:var(--murekkep)} .kp-ara input::placeholder{color:var(--murekkep-2)} .kp-ara input:focus{outline:0} .kp-ara:focus-within{border-color:var(--birincil)} .kp-ara button{flex:0 0 auto;border:0;border-left:1px solid var(--cizgi); background:transparent;color:var(--murekkep-2); padding:0 20px;min-height:44px;font:inherit;font-size:14px;font-weight:600;cursor:pointer; transition:color .15s ease-out,background-color .15s ease-out} .kp-ara button:hover{color:var(--birincil-koyu);background:var(--yuzey-2)} .kp-ara button:focus-visible{outline:2px solid var(--birincil);outline-offset:-2px} .ana-kapi .kp-sahne .kp-ara{margin-top:28px;background:color-mix(in srgb, var(--yuzey) 10%, transparent); border-color:color-mix(in srgb, var(--yuzey) 34%, transparent);border-radius:10px} .ana-kapi .kp-sahne .kp-ara input{color:var(--yuzey)} .ana-kapi .kp-sahne .kp-ara input::placeholder{color:color-mix(in srgb, var(--yuzey) 72%, transparent)} .ana-kapi .kp-sahne .kp-ara:focus-within{border-color:var(--yuzey)} .ana-kapi .kp-sahne .kp-ara button{color:var(--yuzey);border-left-color:color-mix(in srgb, var(--yuzey) 30%, transparent)} .ana-kapi .kp-sahne .kp-ara button:hover{color:var(--murekkep);background:var(--yuzey)} /* Yedek hero'nun düğmeleri: sarı dolgu + MÜREKKEP yazı. Sarı üstünde beyaz yazı yedi temanın hiçbirinde 4,5'i geçmiyor (Aile'de 2,29); mürekkep aynı dolguda 5,68-7,51. */ .ana-kapi .kp-sahne .hero-eylem{margin-top:24px} .ana-kapi .kp-sahne .hero-eylem .btn{border-radius:10px;padding:13px 25px;min-height:48px; background:var(--vurgu);border-color:var(--vurgu);color:var(--murekkep);font-weight:600} .ana-kapi .kp-sahne .hero-eylem .btn:hover{background:color-mix(in srgb, var(--vurgu) 84%, var(--murekkep))} .ana-kapi .kp-sahne .hero-eylem .btn.sec{background:transparent;color:var(--yuzey); border:1px solid color-mix(in srgb, var(--yuzey) 46%, transparent)} .ana-kapi .kp-sahne .hero-eylem .btn.sec:hover{background:color-mix(in srgb, var(--yuzey) 12%, transparent); border-color:var(--yuzey)} .ana-kapi .kp-yuzen{position:absolute;z-index:2;left:-8px;bottom:6px; display:flex;align-items:center;gap:12px; padding:12px 18px 12px 12px;border-radius:14px; background:var(--yuzey);color:var(--murekkep);box-shadow:var(--kp-golge-2)} .ana-kapi .kp-yuzen__ikon{display:grid;place-items:center;width:40px;height:40px;flex:none; border-radius:11px;background:color-mix(in srgb, var(--vurgu) 26%, var(--yuzey));color:var(--birincil-koyu)} .ana-kapi .kp-yuzen__govde b{display:block;font-family:var(--yz-mono);font-size:19px;font-weight:600; font-variant-numeric:tabular-nums;line-height:1.15} .ana-kapi .kp-yuzen__govde > span{display:block;margin-top:1px;font-size:12px;color:var(--murekkep-2)} /* ===================================================================== * 9. RAKAM ŞERİDİ (.kp-serit--rakam) — hero'nun devamı, koyu ve DAR * ===================================================================== */ .ana-kapi .kp-rakamlar{--kp-dizi-min:150px;gap:0} @media (min-width:1120px){ .ana-kapi .kp-rakamlar{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))} } .ana-kapi .kp-rakam{display:flex;align-items:center;gap:14px;padding:6px 22px; border-left:1px solid color-mix(in srgb, var(--yuzey) 20%, transparent)} .ana-kapi .kp-rakam:first-child{border-left:0;padding-left:0} .ana-kapi .kp-rakam__ikon{flex:none;display:grid;place-items:center;width:42px;height:42px; border-radius:12px;background:color-mix(in srgb, var(--yuzey) 12%, transparent);color:var(--yuzey)} .ana-kapi .kp-rakam__ikon svg{width:22px;height:22px} /* SAYILAR BEYAZ, turuncu değil: vurgu rengi bant zemininde iki temada eşiğin altında (Orman 2,34 · Okyanus 2,72; büyük metin eşiği 3,0). Beyaz 6,3-15,4. */ .ana-kapi .kp-rakam b{display:block;font-family:var(--yz-mono);font-size:clamp(23px,2.2vw,32px); font-weight:600;font-variant-numeric:tabular-nums;color:var(--yuzey);line-height:1.1} .ana-kapi .kp-rakam__govde > span{display:block;margin-top:3px;font-size:12.5px;letter-spacing:.03em; color:var(--yuzey);opacity:.84} /* ===================================================================== * 10. AKADEMİLER VE OKULLAR (.kp-okullar) — §4.3 * 30 Eylül 2026: kemer kartları kalktı; kısa süren fihrist listesinden sonra * girih şeritli kart (çok okullu akademi 4 sütun, küçükler en altta 3 sütun). * Gerekçe anasayfa/bolum-okullar.php başında. * Renk MARKUP'TAN gelir: grup ya da satır `style="--rol: var(--vurgu)"` * yazar, CSS yalnız `var(--rol)` okur ve tonu `--yuzey`/`--murekkep` ile * karıştırır (tema değişince kendiliğinden uyar). * ===================================================================== */ .ana-kapi .kp-okul-grup + .kp-okul-grup{margin-top:clamp(26px,2.6vw,40px)} .ana-kapi .kp-okul-grup__baslik small{order:2;flex:none;font-family:var(--yz-mono);font-size:11.5px; font-weight:500;letter-spacing:.02em;text-transform:none;color:var(--murekkep-2); font-variant-numeric:tabular-nums} /* --- Girih şeritli okul kartı (30 Eylül 2026; kemer ve fihristin yerine) --- Üst şerit: sitenin koyu bantlarındaki girih örgüsü (`--vk-girih`, ince beyaz çizgi) koyu petrol zeminde, üstünde yarı saydam petrol perde ki örgü Arapça adın arkasında doku olarak kalsın. Arapça ad şeritte beyaz. Gövde beyaz: ad (kitap harfi), künye, "Kursları gör". Şerit tüm okullarda aynı renk: sekiz kart tek takım gibi okunur, renk yarışı yok. */ .ana-kapi .kp-okk-izgara{list-style:none;margin:0;padding:0;display:grid;gap:16px; grid-template-columns:repeat(auto-fill,minmax(min(220px,100%),1fr))} @media (min-width:1120px){ .ana-kapi .kp-okk-izgara{grid-template-columns:repeat(4,minmax(0,1fr))} } /* Küçük akademiler (en fazla birkaç kart): üç sütun, tek kart ortada yapayalnız kalmasın diye satırı doldurur. */ @media (min-width:900px){ .ana-kapi .kp-okk-izgara--diger{grid-template-columns:repeat(3,minmax(0,1fr))} } .ana-kapi .kp-okk-izgara > li{display:flex;min-width:0} .ana-kapi .kp-okk{flex:1;display:flex;flex-direction:column;min-width:0;overflow:hidden; border-radius:10px;background:var(--yuzey);color:var(--murekkep);text-decoration:none; box-shadow:inset 0 0 0 1px var(--cizgi);transition:transform .2s ease-out,box-shadow .2s ease-out} .ana-kapi .kp-okk__serit{position:relative;display:grid;place-items:center;height:96px;color:#fff; background:var(--vk-girih) center / 72px 72px, linear-gradient(135deg, var(--birincil-koyu), color-mix(in srgb, var(--birincil-koyu) 70%, var(--murekkep)))} .ana-kapi .kp-okk__serit::before{content:"";position:absolute;inset:0; background:linear-gradient(0deg, color-mix(in srgb, var(--birincil-koyu) 70%, transparent), color-mix(in srgb, var(--birincil-koyu) 45%, transparent)); transition:opacity .25s ease-out} .ana-kapi .kp-okk__serit > span{position:relative} .ana-kapi .kp-okk__ar{font-family:var(--vk-arap,'Amiri','Noto Naskh Arabic',serif);font-weight:700; font-size:34px;line-height:1.2;text-shadow:0 2px 12px rgba(0,0,0,.35)} .ana-kapi .kp-okk__harf{font-family:var(--vk-serif,var(--yz-kitap,Georgia,serif));font-weight:600;font-size:34px;line-height:1} .ana-kapi .kp-okk__govde{display:flex;flex-direction:column;flex:1;gap:3px;padding:14px 16px 16px} .ana-kapi .kp-okk__ust{font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--murekkep-2)} .ana-kapi .kp-okk__ad{font-family:var(--vk-serif,var(--yz-kitap,Georgia,serif));font-size:19px;font-weight:600; line-height:1.25;text-wrap:balance} .ana-kapi .kp-okk__kunye{font-size:12.5px;font-variant-numeric:tabular-nums;color:var(--murekkep-2)} .ana-kapi .kp-okk__git{display:inline-flex;align-items:center;gap:4px;margin-top:auto;padding-top:10px; font-size:13.5px;font-weight:700;color:var(--birincil-koyu,var(--birincil))} .ana-kapi .kp-okk__git svg{width:15px;height:15px;transition:transform .2s ease-out} /* Hover: kart kalkar, perde incelir ve girih örgüsü belirginleşir. */ .ana-kapi a.kp-okk:hover{transform:translateY(-2px); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--birincil) 45%, var(--cizgi)),var(--kp-golge)} .ana-kapi a.kp-okk:hover .kp-okk__serit::before{opacity:.6} .ana-kapi a.kp-okk:hover .kp-okk__git svg{transform:translateX(3px)} .ana-kapi a.kp-okk:focus-visible{outline:2px solid var(--birincil);outline-offset:3px} /* Kursu olmayan okul: görünür ama sessiz ve tıklanamaz; şerit renksiz. */ .ana-kapi .kp-okk--bos{background:transparent} .ana-kapi .kp-okk--bos .kp-okk__serit{filter:grayscale(1);opacity:.55} .ana-kapi .kp-okk--bos .kp-okk__ad{color:var(--murekkep-2);font-weight:500} /* --- Telefon: iki sütun, kısa şerit; "Kursları gör" düşer (kartın tamamı dokunulabilir). "Diğer programlar" yatay kart: şerit solda dar bir blok, tek kart iki sütunluk ızgarada yalnız kalmaz. --- */ @media (max-width:640px){ .ana-kapi .kp-okk-izgara{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px} .ana-kapi .kp-okk__serit{height:64px} .ana-kapi .kp-okk__ar{font-size:25px} .ana-kapi .kp-okk__harf{font-size:26px} .ana-kapi .kp-okk__govde{gap:1px;padding:9px 11px 11px} .ana-kapi .kp-okk__ad{font-size:16px} .ana-kapi .kp-okk__kunye{font-size:11.5px} .ana-kapi .kp-okk__git{display:none} .ana-kapi .kp-okul-grup__baslik small{display:none} .ana-kapi .kp-okk-izgara--diger{grid-template-columns:minmax(0,1fr)} .ana-kapi .kp-okk-izgara--diger .kp-okk{flex-direction:row} .ana-kapi .kp-okk-izgara--diger .kp-okk__serit{width:86px;height:auto;min-height:64px;flex:none} .ana-kapi .kp-okk-izgara--diger .kp-okk__govde{justify-content:center} } @media (prefers-reduced-motion:reduce){ .ana-kapi .kp-okk,.ana-kapi .kp-okk__serit::before,.ana-kapi .kp-okk__git svg{transition:none} .ana-kapi a.kp-okk:hover{transform:none} } /* ===================================================================== * 11. KURUM TANITIMI (.kp-tanitim) — §4.4 * Solda görsel kolajı + koyu rozet, sağda metin ve 2×2 tik listesi. * ===================================================================== */ .ana-kapi .kp-tanitim{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr); gap:clamp(30px,4vw,64px);align-items:center} .ana-kapi .kp-tanitim__kolaj{position:relative;display:grid; grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;align-items:start} .ana-kapi .kp-tanitim__gorsel{margin:0;border-radius:var(--kp-r-buyuk);overflow:hidden; background:var(--yuzey-2);box-shadow:var(--kp-golge)} .ana-kapi .kp-tanitim__gorsel img{display:block;width:100%;height:auto; aspect-ratio:3/4;object-fit:cover} /* İkinci görsel aşağı kayar: iki eşit dikdörtgen yan yana durunca kolaj değil tablo gibi okunuyordu. */ .ana-kapi .kp-tanitim__gorsel:nth-child(2){margin-top:clamp(24px,3vw,52px)} /* Rozet kolajın üstüne TAŞAR (§2.7 derinlik). */ .ana-kapi .kp-tanitim__rozet{position:absolute;z-index:2;left:50%;bottom:-16px; transform:translateX(-50%);margin:0;white-space:nowrap; padding:11px 20px;border-radius:100px; background:var(--birincil-koyu);color:var(--yuzey); font-family:var(--yz-mono);font-size:12px;letter-spacing:.04em; box-shadow:var(--kp-golge-2)} .ana-kapi .kp-tanitim__govde{min-width:0} .ana-kapi .kp-tanitim__govde .kp-bas{max-width:none;margin:0;text-align:left} .ana-kapi .kp-tanitim__govde .kp-bas .kp-etiket{justify-content:flex-start} .ana-kapi .kp-tanitim__govde .kp-bas__alt{margin-inline:0} .ana-kapi .kp-tanitim__metin{margin:18px 0 0;max-width:62ch; font-size:15.5px;line-height:1.62;color:var(--murekkep-2)} .ana-kapi .kp-tanitim__maddeler{--kp-dizi-min:0;grid-template-columns:repeat(2,minmax(0,1fr)); margin-top:26px;gap:12px 22px} .ana-kapi .kp-tanitim__madde{display:flex;align-items:flex-start;gap:10px; font-size:14.5px;line-height:1.45} .ana-kapi .kp-tanitim__madde svg{flex:none;width:18px;height:18px;margin-top:2px; color:var(--birincil-koyu)} .ana-kapi .kp-tanitim__dugme{margin-top:28px} /* ===================================================================== * 12. KURS VİTRİNİ (.kp-kurslar) + SEKMELER — §4.5, sözleşme §2.6 * ===================================================================== */ /* JS KAPALIYKEN: çubuk gizli, ÜÇ liste de alt alta, her birinin başında hangi liste olduğunu söyleyen

. JS varken tersi. İkinci kural olmazsa sekmenin adı gövdenin başında bir kez daha yazar (§6.4). */ html:not(.kp-js) .kp-sekmeler__cubuk{display:none} .kp-js .kp-sekme-govde__baslik{display:none} .ana-kapi .kp-sekme-govde__baslik{margin:0 0 18px;font-family:var(--yz-baslik); font-size:19px;font-weight:700;color:var(--murekkep)} .ana-kapi .kp-sekme-govde + .kp-sekme-govde{margin-top:clamp(30px,3vw,48px)} .ana-kapi .kp-sekmeler__cubuk{display:flex;flex-wrap:wrap;gap:6px; margin:0 0 clamp(24px,2.6vw,38px);padding:5px;border-radius:12px; background:color-mix(in srgb, var(--murekkep) 5%, var(--yuzey)); box-shadow:inset 0 0 0 1px var(--cizgi);width:max-content;max-width:100%} /* Dokunma hedefi: ölçülen 62×21 idi (B2 raporu), sözleşme ≥24×24 istiyor — burada 44px yükseklik verildi, sekme bir NAVİGASYON öğesi. */ .ana-kapi .kp-sekme{display:inline-flex;align-items:center;justify-content:center; min-height:44px;padding:0 20px;border:0;border-radius:9px; background:transparent;color:var(--murekkep-2); font-family:inherit;font-size:14px;font-weight:600;cursor:pointer; transition:background-color .15s ease-out,color .15s ease-out} .ana-kapi .kp-sekme:hover{color:var(--murekkep)} .ana-kapi .kp-sekme[aria-selected="true"]{background:var(--yuzey);color:var(--birincil-koyu); box-shadow:0 1px 2px color-mix(in srgb, var(--murekkep) 14%, transparent)} /* ---- KURS KARTI ---- */ .ana-kapi .kp-kurs{display:flex} .ana-kapi .kp-kurs .kp-kart{width:100%} /* Kategori rozeti: koyu dolgu + beyaz yazı (6,32-11,63, yedi tema). */ .ana-kapi .kp-kurs__rozet{position:absolute;top:10px;left:10px;max-width:calc(100% - 66px); padding:5px 11px;border-radius:7px; background:var(--birincil-koyu);color:var(--yuzey); font-size:11.5px;font-weight:600;letter-spacing:.02em; white-space:nowrap;overflow:hidden;text-overflow:ellipsis} /* Yer imi: referanstaki beyaz daire. DEKORATİF — tıklanabilir değil, çünkü portalda "kaydet" diye bir işlev yok; olmayan bir düğme basmak yalan olur. */ .ana-kapi .kp-kurs__yerim{position:absolute;top:10px;right:10px;display:grid;place-items:center; width:30px;height:30px;border-radius:999px;background:var(--yuzey);color:var(--birincil-koyu); box-shadow:0 1px 3px color-mix(in srgb, var(--murekkep) 20%, transparent)} .ana-kapi .kp-kurs__yerim svg{width:15px;height:15px} /* Künye satırı: referansta "eğitmen + fiyat". Bizde okul adı — fiyat basılmıyor (satış kapalı), eğitmen bağı kurs tablosunda yok. */ .ana-kapi .kp-kurs__okul{display:flex;align-items:center;gap:6px; font-family:var(--yz-mono);font-size:10.5px;letter-spacing:.07em; text-transform:uppercase;color:var(--murekkep-2)} .ana-kapi .kp-kurs__okul svg{width:14px;height:14px;flex:none} /* Kurs adı İKİ SATIRA sabitlenir: en fazla iki (uzun ad ızgarayı uzatmasın), en az iki (kısa ad kartı kısaltmasın). */ .ana-kapi .kp-kurs__ad{display:block;margin-top:9px;font-family:var(--yz-baslik); font-size:17.5px;font-weight:700;line-height:1.3;letter-spacing:-.01em; min-height:calc(1.3em * 2)} .ana-kapi .kp-kurs__ad a{display:-webkit-box;-webkit-line-clamp:2;line-clamp:2; -webkit-box-orient:vertical;overflow:hidden;min-height:24px; color:inherit;text-decoration:none} /* Kartın tamamı tıklanabilir ama DOM'da TEK bağlantı var: iç içe ya da yan yana iki bağlantı ekran okuyucuda kartı iki kez okutur. */ .ana-kapi .kp-kurs__ad a::after{content:"";position:absolute;inset:0;border-radius:var(--kp-r)} .ana-kapi .kp-kart:hover .kp-kurs__ad a{color:var(--birincil-koyu)} .ana-kapi .kp-kurs__kunye{display:flex;flex-wrap:wrap;align-items:center;gap:5px 16px; margin-top:11px;padding-bottom:4px;font-size:12.5px;color:var(--murekkep-2)} .ana-kapi .kp-kurs__kunye > span{display:inline-flex;align-items:center;gap:6px} .ana-kapi .kp-kurs__kunye svg{width:15px;height:15px;flex:none;color:var(--birincil-koyu)} /* Kurs kapakları AFİŞ: üstlerinde yazı var ve tek ölçüde değiller. `cover` kırpınca ders adının yarısı gidiyordu (ölçüldü: 640×360 afişler 16/10 kutuda yatayda kırpılıyor). `contain` + tonlu zemin ikisini de korur. */ .ana-kapi .kp-kurs__gorsel{object-fit:contain;aspect-ratio:16/10; background:color-mix(in srgb, var(--birincil) 6%, var(--yuzey))} /* TAM GENİŞLİK DOLU BİRİNCİL DÜĞME (§4.5, tasarım yönü §3). Geçen turda soluk gri tint + koyu yazıydı ve "pasif alan" diye okunuyordu; `` olması sebep değildi, RENGİ sebepti. */ .ana-kapi .kp-kurs__dugme{width:100%;min-height:44px;padding:11px 18px;font-size:13.5px} .ana-kapi .kp-kart:hover .kp-kurs__dugme{background:var(--birincil);border-color:var(--birincil)} /* ===================================================================== * 13. CANLI YAYIN ŞERİDİ (.kp-canli) — §4.6, koyu ve DAR * ===================================================================== */ .ana-kapi .kp-canli__ust{display:flex;flex-wrap:wrap;align-items:center;gap:12px 22px} /* Doygun rengin (§2.5) beş yerinden biri: canlı rozeti ve düğmesi. */ .ana-kapi .kp-canli__rozet{margin:0;display:inline-flex;align-items:center;gap:8px; padding:5px 13px;border-radius:100px; background:var(--vurgu);color:var(--murekkep); font-family:var(--yz-mono);font-size:11px;font-weight:600;letter-spacing:.08em; text-transform:uppercase} .ana-kapi .kp-canli__rozet::before{content:"";width:8px;height:8px;border-radius:999px; background:var(--murekkep)} .ana-kapi .kp-canli__metin{flex:1;min-width:200px} .ana-kapi .kp-canli__metin b{display:block;font-family:var(--yz-baslik); font-size:clamp(17px,1.7vw,21px);font-weight:700;color:var(--yuzey)} .ana-kapi .kp-canli__kunye{display:inline-flex;align-items:center;gap:7px;margin-top:5px; font-family:var(--yz-mono);font-size:12px;color:var(--yuzey);opacity:.84} .ana-kapi .kp-canli__kunye svg{width:15px;height:15px;flex:none} .ana-kapi .kp-canli__dugme{background:var(--vurgu);border-color:var(--vurgu);color:var(--murekkep)} /* Sıradaki dersler (18 Ekim 2026): şeridin altında ince bir liste. */ .ana-kapi .kp-canli__sonraki{list-style:none;margin:16px 0 0;padding:14px 0 0;display:grid;gap:8px; border-top:1px solid color-mix(in srgb, var(--yuzey) 18%, transparent)} .ana-kapi .kp-canli__sonraki li{display:flex;flex-wrap:wrap;gap:4px 14px;align-items:baseline} .ana-kapi .kp-canli__sonraki time{min-width:118px;font-family:var(--yz-mono);font-size:12px;color:var(--vurgu)} .ana-kapi .kp-canli__sonraki a{color:var(--yuzey);text-decoration:none;font-size:14.5px} .ana-kapi .kp-canli__sonraki a:hover{text-decoration:underline} @media (min-width:900px){.ana-kapi .kp-canli__sonraki{grid-template-columns:repeat(3,minmax(0,1fr))} .ana-kapi .kp-canli__sonraki li{flex-direction:column;gap:3px}} .ana-kapi .kp-canli__dugme:hover{background:color-mix(in srgb, var(--vurgu) 84%, var(--murekkep)); border-color:color-mix(in srgb, var(--vurgu) 84%, var(--murekkep))} /* ===================================================================== * 14. HOCALAR (.kp-hocalar) — §4.7 * Ad ve unvan fotoğrafın ÜSTÜNDE (referanstaki düzen). * ===================================================================== */ .ana-kapi .kp-hoca{display:flex} .ana-kapi .kp-hoca .kp-kart{width:100%;text-align:center} .ana-kapi .kp-hoca__bilgi{padding:11px 8px 15px} .ana-kapi .kp-hoca__ad{display:block;font-family:var(--yz-baslik); font-size:16.5px;font-weight:700;line-height:1.28} /* min-height 24px: WCAG 2.2 asgari dokunma hedefi. Kartın tamamı zaten bu bağlantının `::after`ı ile tıklanabilir, ama denetimde ÖĞENİN kendi kutusu ölçülüyor ve tek satırlık başlıkta 23px kalıyordu. */ .ana-kapi .kp-hoca__ad a{display:inline-block;min-height:24px;color:inherit;text-decoration:none} .ana-kapi .kp-hoca__ad a::after{content:"";position:absolute;inset:0;border-radius:var(--kp-r)} .ana-kapi .kp-kart:hover .kp-hoca__ad a{color:var(--birincil-koyu)} .ana-kapi .kp-hoca__unvan{display:block;margin-top:5px;font-size:12.5px;line-height:1.45; color:var(--murekkep-2)} .ana-kapi .kp-hoca__foto{position:relative;margin-top:auto;overflow:hidden; border-radius:var(--kp-r-ic);background:var(--yuzey-2); box-shadow:0 0 0 1px color-mix(in srgb, var(--birincil) 13%, transparent)} .ana-kapi .kp-hoca__foto img{display:block;width:100%;height:auto;aspect-ratio:10/11;object-fit:cover} /* Fotoğrafsız hoca: yer tutucu FOTOĞRAF basılmaz (§4.7). Adın baş harflerini taşıyan, aynı örgü dokusundaki bir madalyon durur. */ /* Örgü SEYREK ve SOLUK: ilk denemede 15px aralık / %14 tonda kurulmuştu ve kart bir baş harften çok bir kumaş deseni gibi okunuyordu (700px'te ölçüldü: madalyon kartın yüksekliğinin üçte ikisi). 26px aralık, %8 ton ve yalnız tek doğrultu: doku kalıyor, baş harf öne çıkıyor. */ .ana-kapi .kp-hoca__madalyon{display:grid;place-items:center;aspect-ratio:10/11; background: repeating-linear-gradient(45deg, color-mix(in srgb, var(--birincil) 8%, transparent) 0 1px, transparent 1px 26px), color-mix(in srgb, var(--birincil) 7%, var(--yuzey)); font-family:var(--yz-baslik);font-size:clamp(38px,3.8vw,52px);font-weight:800; letter-spacing:-.02em;color:var(--birincil-koyu)} /* FOTOGRAFSIZ KART (.kp-hoca--fotosuz) — olculmus kusur, 7 Eylul 2026. Madalyon `aspect-ratio:10/11` tasidigi icin kart 1440px'te ~280px'lik bos bir kutu aciyordu; ustelik bu satirlarda "ad" bir gorev adi oldugu icin bas harfler ("TS"/"TS") hicbir seyi ayirt etmiyordu. Fotograf yoksa artik o alani kurumun kendi ozeti dolduruyor: bos yer bilgiye donuyor. Fotograf gelince .kp-hoca__foto geri gelir, bu kural hic uygulanmaz. */ .ana-kapi .kp-hoca__ozet{margin:0;padding:0 15px 17px;text-align:left; font-size:13.5px;line-height:1.62;color:var(--murekkep-2)} .ana-kapi .kp-hoca--fotosuz .kp-kart{text-align:left} .ana-kapi .kp-hoca--fotosuz .kp-hoca__bilgi{padding:15px 15px 9px} /* Kunye artik fotografin uzerinde degil, kartin normal akisinda. */ .ana-kapi .kp-hoca--fotosuz .kp-hoca__kunye{position:static;margin:0 15px 15px; align-self:flex-start;display:inline-block} /* Kurs rozeti fotoğrafın alt kenarında. "0 kurs" hiç basılmaz. */ .ana-kapi .kp-hoca__kunye{position:absolute;left:9px;bottom:9px; padding:5px 11px;border-radius:7px; background:var(--birincil-koyu);color:var(--yuzey); font-family:var(--yz-mono);font-size:11px;letter-spacing:.04em} /* ===================================================================== * 15. YATAY KAYDIRMALI ŞERİT (.kp-kaydir) — sözleşme §2.5 * * JS KAPALIYKEN ŞERİDİN TEK GEZİLME YOLU BUDUR (§6.4): oklar `.kp-js` yokken * gizli. Ray `overflow-x:auto` + `scroll-snap`; parmakla ve klavyeyle * (odak öğeye Tab ile girip ok tuşuyla) kaydırılır. Otomatik geçiş YOK. * ===================================================================== */ .ana-kapi .kp-kaydir{display:grid;grid-template-columns:auto minmax(0,1fr) auto; align-items:center;gap:14px} .ana-kapi .kp-kaydir__ray{grid-column:2;display:flex;gap:clamp(16px,1.7vw,24px); list-style:none;margin:0;padding:4px 2px 16px; overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory; scrollbar-width:thin} /* KAYDIRMA CUBUGU GORUNUR KALIR ama tarayicinin gri kalin cubugu yerine token renginde ince bir cizgi olur. GIZLEMIYORUZ: betik yokken oklar basilmadigi icin cubuk, seridin kaydirilabildigini gosteren TEK isaret. `rgba(0,0,0,0)` bir renk degil, "saydam" demek; tema tokeni gerektirmez. */ .ana-kapi .kp-kaydir__ray{scrollbar-color: color-mix(in srgb, var(--murekkep) 26%, transparent) transparent} .ana-kapi .kp-kaydir__ray::-webkit-scrollbar{height:7px} .ana-kapi .kp-kaydir__ray::-webkit-scrollbar-track{background:transparent} .ana-kapi .kp-kaydir__ray::-webkit-scrollbar-thumb{border-radius:999px; background:color-mix(in srgb, var(--murekkep) 22%, transparent)} .ana-kapi .kp-kaydir__ray:hover::-webkit-scrollbar-thumb{ background:color-mix(in srgb, var(--murekkep) 34%, transparent)} .ana-kapi .kp-kaydir__oge{flex:0 0 var(--kp-ray-oge);min-width:0;scroll-snap-align:start; display:flex} .ana-kapi .kp-kaydir__oge > *{width:100%} /* Ok düğmeleri ≥44×44 (sözleşme §2.5). Betik yokken hiç basılmazlar. */ html:not(.kp-js) .kp-kaydir__ok{display:none} .ana-kapi .kp-kaydir__ok{display:grid;place-items:center;width:44px;height:44px;flex:none; padding:0;border:1px solid var(--cizgi);border-radius:999px;background:var(--yuzey); color:var(--birincil-koyu);cursor:pointer; transition:background-color .15s ease-out,border-color .15s ease-out,color .15s ease-out} .ana-kapi .kp-kaydir__ok svg{width:19px;height:19px} .ana-kapi .kp-kaydir__ok:hover:not(:disabled){background:var(--birincil-koyu); border-color:var(--birincil-koyu);color:var(--yuzey)} .ana-kapi .kp-kaydir__ok:disabled{opacity:.4;cursor:default} .ana-kapi .kp-kaydir__ok[hidden]{display:none} .ana-kapi .kp-kaydir__ok--geri{grid-column:1} .ana-kapi .kp-kaydir__ok--ileri{grid-column:3} /* ===================================================================== * 16. SÖZ KİTAPTA (.kp-sozler) — §4.8 * ===================================================================== */ .ana-kapi .kp-soz{position:relative;display:flex;flex-direction:column;height:100%;margin:0; padding:clamp(24px,2.4vw,34px) clamp(20px,2vw,28px) clamp(20px,2vw,26px); background:var(--yuzey);border:1px solid var(--cizgi);border-radius:var(--kp-r-buyuk); box-shadow:var(--kp-golge)} /* Çift cetvel: dış kenarlık + içeride kâğıt payı + soluk iç cetvel. */ .ana-kapi .kp-soz::before{content:"";position:absolute;inset:6px;border-radius:18px; border:1px solid color-mix(in srgb, var(--birincil) 14%, transparent);pointer-events:none} /* Süslü tırnak: `--birincil` + `opacity:.35` denendi ve 1,89 verdi. Ornament `aria-hidden` olduğu için WCAG ihlali sayılmaz ama soluk görünüyordu. Opaklık kaldırıldı, ton `--birincil-koyu` (5,30-11,63). */ .ana-kapi .kp-soz__tirnak{position:relative;display:block; font-family:var(--yz-baslik);font-size:52px;font-weight:800;line-height:.7; color:var(--birincil-koyu)} .ana-kapi .kp-soz__metin{position:relative;margin:14px 0 0; font-family:var(--yz-baslik);font-size:clamp(16px,1.4vw,19px);font-weight:500; line-height:1.52;color:var(--murekkep)} .ana-kapi .kp-soz__kaynak{position:relative;margin-top:auto;padding-top:16px; font-family:var(--yz-mono);font-size:11.5px;line-height:1.55;letter-spacing:.03em; color:var(--murekkep-2)} /* ===================================================================== * 17. GÖRÜŞLER (.kp-gorusler) — §4.9 * Solda baş harf madalyonu, sağda alıntı; iki yanda dairesel oklar. * Otomatik geçiş YOK (müşteri "kenarda bir yere" dedi). * Kök sınıf `