/* ================================================================== kategori.css — KATEGORİ LİSTE (PLP) 2026-08-31 ================================================================== views/yeni/kategori_liste.php ile birlikte yükleniyor. ⚠️ ortak.css + kurs.css'ten SONRA geliyor (head.php sırası), yani aynı ağırlıktaki kuralda bu dosya kazanır. BURADA OLMAYANLAR — bilerek kurs.css'ten miras alınıyor: .wrap .sec-head .kicker .btn .btn-primary .btn-cam .tnum .yldz .cmp .cmp-wrap .cmp-desc .cmp-fiyat .cmp-btn .cmp-kdv .kadro .kadro-sarma .kadro-ok .insts .inst .inst-* .yrm-sarma .yrm-ok .yrms .rev .rev-* .ava .faq .sss-liste .sss-alt-not .ans .ilgili .ilgili-sarma .ilgili-ok .ilgililer .ilgili-* .yz-teaser .yz-tag .yz-ans .yz-more .khero-owl (15. tur — hero sağ kartı kurs detaydan birebir; khero-sayac gibi miras) 📌 `.cmp-*` böylece ÜÇÜNCÜ kez kullanılıyor (kurs detay + ödeme + kategori). Ortak Katman Deseni gereği ortak.css'e taşınmalı; bu turda taşınmadı, çalışan CSS'i yeni sayfayla aynı anda oynatmamak için (plan §B2.1). TUZAK NOTLARI (tasarim-tuzaklari.md): §A Element seçicisi kullanılmıyor, hepsi `.kat-` önekli. §A Global `section{padding-block:clamp(64px,8vw,116px)}` komşularda TOPLANIYOR — arka arkaya gelen `.kat-grup` bölümlerinde üst boşluk kısıldı, yoksa iki tablo arasında ~200px ölü bant kalıyor. §A Reset `p{margin:0}` ve `ul{list-style:none;padding:0}` veriyor; ihtiyaç duyulan her boşluk burada AÇIKÇA geri veriliyor. §K Sütunsuz grid min-content'e çakılıyor → her grid'de açık `grid-template-columns` + gerekli yerde `min-width:0`. ================================================================== */ /* ================================================================== 1. HERO ================================================================== */ .kat-hero{ position:relative; background:var(--navy-d); color:#B6C6DC; padding-block:clamp(20px,3vw,32px) clamp(28px,4vw,44px); overflow:hidden; } /* marka ışığı — kurs detay hero'suyla aynı iki katman */ /* ♻️ 20. tur — HAFİF RENK İMZASI (kullanıcı: "farkı hafif renk değişimiyle de belli edebilir miyiz?"). Sağdaki ikincil ışık maviden TURKUAZA kaydı — kicker'la aynı aile. Ana marka ışığı, kırmızı CTA, lacivert zemin AYNEN duruyor; fark bilinçli olarak fısıltı düzeyinde. Aynı imza .kat-yz'de de var. eski: radial-gradient(55% 80% at 92% 12%, rgb(126 176 255 / .12), transparent 62%) */ .kat-hero::before{ content:''; position:absolute; inset:0; pointer-events:none; background: radial-gradient(65% 85% at 8% 0%, rgb(47 107 208 / .30), transparent 60%), radial-gradient(55% 80% at 92% 12%, rgb(64 224 195 / .12), transparent 62%); } .kat-hero-ic{ position:relative; z-index:1 } /* 🔴 2026-08-31 (3. tur) — HERO'NUN SAĞI BOŞTU (kullanıcı bildirdi). Kurs detayda sağda YZ asistan kartı var; burada hiçbir şey yoktu ve masaüstünde geniş bir ölü alan kalıyordu. Kategoriye özel karşılığı: "bu kategoride ne var" sayıları + bölümlere atlayan kısayollar. ⚠️ Tek sütun tabanı `minmax(0,1fr)` — sütunsuz grid min-content'e çakılıyor (§K). */ .kat-hero-ust{ display:grid; gap:26px; grid-template-columns:minmax(0,1fr); align-items:start; } /* ♻️ 12. tur: panel 330 → 380px — içinde artık SINAV SAYACI var (khero-sayac, kurs.css'ten miras) ve geri sayım hücreleri 330'da sıkışıyordu. "Bu kategoride" listesi tek kompakt satıra indi. */ /* ♻️♻️ 15. tur — KURS DETAY ORANI. Kullanıcı: "hero sağ kısım hâlâ kötü... kurs detaydaki gibi yap; ayrıca küçük kalmış." Sabit 380px sütun, kurs detayın `.khero-grid` oranına çevrildi (kurs.css: 1.15fr .85fr, gap 52px @980px). 1400px wrap'te sağ sütun ~573px — 380'in 1.5 katı; YZ kartı + sayaç ferah oturuyor. */ @media (min-width:1024px){ .kat-hero-yanli .kat-hero-ust{ grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:52px; } /* eski: grid-template-columns:minmax(0,1fr) minmax(0,380px) */ } .kat-hero-metin{ min-width:0 } /* Sayaç panel içinde kendi kartında (khero-sayac kurs.css'te lacivert kart olarak stilli); panelin kendi dolgusuyla çift çerçeve olmasın. */ .kat-hero-yan .khero-sayac{ margin:0 } /* ♻️ 15. tur: margin-top 12px → 0 — sarmalayıcı artık gap:14px'lik grid, üstüne bir de margin binince 26px açılıyordu. ⛔ 19. tur: KULLANILMIYOR — özet sola, `.kat-ozet-cipler` cip dizisine taşındı; view'da if(false) yedeğinde. */ .kat-yan-ozet{ margin-top:0; padding-top:12px; border-top:1px solid rgb(255 255 255 / .1); font-size:.84rem; color:#8FA6C6; display:flex; flex-wrap:wrap; align-items:center; gap:6px 8px; } .kat-yan-ozet a{ color:#9CC4FF; text-decoration:none; white-space:nowrap } .kat-yan-ozet a:hover{ text-decoration:underline } .kat-yan-ozet b{ color:#fff; font-weight:800 } /* 🔴 13. tur — SAYAÇ YOKKEN yedek: BÜYÜK istatistik kutuları. (TUS'ta aktif sınav sayacı kaydı yok; panel tek satıra düşüp "boş/önemsiz" görünüyordu — kullanıcı bildirdi.) 2 sütun ızgara, sayı büyük, etiket altında; her kutu ilgili bölüme atlıyor. ⛔ 15. tur: KULLANILMIYOR — yerine kurs detayın .yz-teaser kartı geldi (her durumda basılıyor); view'da if(false) yedeğinde. */ .kat-yan-istat{ display:grid; gap:8px; grid-template-columns:repeat(2,minmax(0,1fr)); position:relative; z-index:1; } .kat-yan-istat a{ display:flex; flex-direction:column; gap:2px; min-width:0; padding:14px 14px 12px; border-radius:var(--r); background:rgb(255 255 255 / .05); border:1px solid rgb(255 255 255 / .09); color:#DCE7F5; text-decoration:none; transition:background .18s ease, transform .18s ease; } .kat-yan-istat a:hover{ background:rgb(255 255 255 / .11); transform:translateY(-2px) } .kat-yan-istat b{ font-size:1.55rem; font-weight:800; color:#fff; line-height:1.1 } .kat-yan-istat b em{ font-style:normal; font-size:.9rem; color:#FFC24A; margin-left:2px } .kat-yan-istat span{ font-size:.8rem; color:#8FA6C6; line-height:1.35 } /* ♻️♻️ 15. tur — CAM PANEL SARMALAYICI KALKTI. Kullanıcı: "kurs detaydaki gibi yap." Kurs detayda `.khero-side` çıplak bir dikey ızgara; kartlar (yz-teaser, khero-sayac) kendi zeminini kurs.css'ten getiriyor. Buradaki cam zemin + dolgu, içine yz-teaser girince KART-İÇİNDE-KART yapıyordu. Kaldırıldı; khero-side'ın aynısı. eski kurallar: padding:18px 18px 16px; border-radius:var(--r-x); background:rgb(255 255 255 / .055); border:1px solid rgb(255 255 255 / .12); backdrop-filter:blur(6px); box-shadow:0 20px 44px -28px rgb(0 0 0 / .6); overflow:hidden; ⚠️ `overflow:hidden` da kalktı — baykuş (khero-owl) yz-teaser'ın içinde absolute, taşması kart kırpıyor; sarmalayıcı kırpsaydı gölgeler de kesilirdi. */ .kat-hero-yan{ position:relative; min-width:0; display:grid; gap:14px; align-content:start; /* kurs.css .khero-side ile aynı: tek sütunda 520'yi aşmasın, yan sütun açılınca serbest. */ max-width:520px; } @media (min-width:1024px){ .kat-hero-yan{ max-width:none } } .kat-yan-bas{ margin:0 0 12px; font-size:.72rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:#8FA6C6; } .kat-yan-liste{ list-style:none; margin:0; padding:0; display:grid; gap:6px; grid-template-columns:minmax(0,1fr) } .kat-yan-liste a{ display:flex; align-items:center; gap:10px; min-width:0; padding:9px 12px; border-radius:var(--r); background:rgb(255 255 255 / .05); color:#DCE7F5; text-decoration:none; font-size:.88rem; transition:background .18s ease, transform .18s ease; } .kat-yan-liste a:hover{ background:rgb(255 255 255 / .11); transform:translateX(2px) } .kat-yan-liste b{ color:#fff; font-size:1.12rem; font-weight:800; min-width:1.6ch } .kat-yan-liste span{ flex:1 1 auto; min-width:0 } .kat-yan-ok{ width:15px; height:15px; flex:none; color:#7EA6E0 } .kat-yan-alt{ margin:12px 0 0; padding-top:11px; border-top:1px solid rgb(255 255 255 / .1); font-size:.82rem; color:#8FA6C6; display:flex; flex-wrap:wrap; align-items:center; gap:7px; } .kat-yan-alt a{ color:#9CC4FF; text-decoration:none } .kat-yan-alt a:hover{ text-decoration:underline } /* 🔴 2026-09-01 (5. tur) — BAYKUŞ SATIRLARIN ÜSTÜNE BİNİYORDU. 132px + `opacity:.5` ile maskot panelin sağ yarısını kaplıyor, "2 ana kurs / 3 ders" satırlarının okları görünmez oluyordu (canlıda TR-YÖS ve TUS'ta görüldü). ✅ Küçültüldü, iyice soluklaştırıldı ve İÇERİĞİN ARKASINA alındı (`z-index:0` + içeriğe `z-index:1`). Dekoratif kalıyor, engel olmuyor. ⛔ 15. tur: KULLANILMIYOR — baykuş artık yz-teaser'ın khero-owl'u. */ .kat-yan-baykus{ display:none } @media (min-width:1024px){ .kat-yan-baykus{ display:block; position:absolute; right:-16px; bottom:-12px; width:96px; opacity:.22; pointer-events:none; z-index:0; } .kat-yan-baykus img{ width:100%; height:auto; display:block } } .kat-yan-bas, .kat-yan-liste, .kat-yan-alt{ position:relative; z-index:1 } /* ♻️ 20. tur — kırıntı kurs detayın `.crumb` GÖRÜNÜMÜNE çekildi (kullanıcı: "o kısım detay sayfasında güzel"). `.crumb` sınıfı DOĞRUDAN kullanılamadı: bizim kırıntı BreadcrumbList microdata'sı için öğeleri span'la sarıyor, `.crumb span{opacity:.45}` o sarmalı da soldururdu. Değerler .crumb'dan birebir; son adım . margin-bottom 14→0: boşluğu artık altındaki .kat-kicker veriyor. */ .kat-yol{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; font-size:13.5px; color:#7A8FAE; font-weight:700; margin-bottom:0; } .kat-yol a{ color:#8FA6C4; text-decoration:none } .kat-yol a:hover{ color:#fff; text-decoration:underline } .kat-yol-ayrac{ opacity:.45 } .kat-yol b{ color:#D6E1F0; font-weight:800 } /* 🆕 20. tur — VİTRİN KİMLİĞİ ŞERİDİ (kullanıcı onayladı). Kurs detay hero'sunda karşılığı YOK — "kategori sayfasındayım" sinyalinin kendisi. Turkuaz = kategori renk imzası; hero ve YZ bölümü ışıklarındaki tonla aynı aile. ⚠️ text-transform YOK: Türkçe İ, view'da elle büyük yazıldı. */ .kat-kicker{ margin:16px 0 10px; display:flex; flex-wrap:wrap; align-items:center; gap:8px; font-size:.74rem; font-weight:800; letter-spacing:.14em; color:#5EE6C8; } .kat-kicker span{ opacity:.5 } .kat-h1{ margin:0 0 12px; color:#fff; font-size:clamp(1.6rem,1.15rem + 2.1vw,2.7rem); line-height:1.16; font-weight:800; letter-spacing:-.015em; max-width:22ch; } /* ⚠️ `max-width` BAŞLIKTA, gövde metninde DEĞİL. `ch` cinsinden satır sınırı gövdede üç ayrı blokta denendi ve üçünde de metin solda dar bir sütunda kalıp sağda ölü alan bıraktı (tasarim-tuzaklari §B). */ .kat-lede{ margin:0 0 20px; max-width:70ch; font-size:clamp(.98rem,.93rem + .22vw,1.1rem); line-height:1.68; color:#C6D5E8; } .kat-hero-rozetler{ display:flex; flex-wrap:wrap; align-items:center; gap:10px 16px; margin-bottom:18px; } /* ⛔ 20. tur: .kat-puan/.kat-yildiz KULLANILMIYOR — puan rozeti kurs detayın `.rating` hapına geçti (kurs.css'ten miras: .rating, .rating-stars, .yldz.dolu/.yarim/.bos, .rating-say); eski blok view'da if(false) yedeğinde. */ .kat-puan{ display:inline-flex; align-items:center; gap:8px; color:#DCE7F5; font-size:.92rem } .kat-yildiz{ display:inline-flex; gap:1px; color:#FFC24A; font-size:1rem; line-height:1 } /* ⚠️ `.yldz.bos` dolgusu kurs.css'te BEYAZ (koyu hero için). Burası da koyu zemin, o yüzden ezilmiyor — açık zeminli bir bloğa taşınırsa ayrı kural gerekir (tasarim-tuzaklari §A). */ .kat-yildiz .bos{ color:rgb(255 255 255 / .3) } .kat-puan b{ color:#fff } .kat-puan-adet{ color:#8FA6C6; font-size:.85rem } /* ♻️ 20. tur — hap ölçüsü kurs detayın .rating/.garanti'siyle eşitlendi (padding 8/15, 14px); RENK YEŞİL KALDI (kullanıcı: "listedeki yeşil daha iyi" — kurs detayınki kırmızı tonlu). */ .kat-gar{ display:inline-flex; align-items:center; gap:8px; padding:8px 15px; border-radius:999px; background:rgb(45 190 126 / .13); border:1px solid rgb(45 190 126 / .34); color:#7FE3B4; font-size:14px; font-weight:800; } .kat-gar .icon{ width:17px; height:17px; flex:none } .kat-hero-cta{ display:flex; flex-wrap:wrap; gap:12px; margin-bottom:10px } .kat-hero-mikro{ margin:0; font-size:.82rem; color:#8FA6C6 } /* ♻️ 19. tur — KATEGORİ ÖZETİ SOL SÜTUNDA CAM CİPLER. Kullanıcı: "sağ taraf soldan uzun, solun altı boş; ana kurs / ders / yıldız satırını sola al, güzel bir tasarım yap." Sağ paneldeki düz metin satırı (kat-yan-ozet, ⛔ artık yedekte) buraya cip dizisi olarak indi; her cip 18. turun çıpalarına kayıyor. Canlı ölçüm (KPSS): sütunların alt hiza farkı ~200px → 74px. */ .kat-ozet-cipler{ list-style:none; margin:24px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:8px; } .kat-ozet-cipler a{ display:inline-flex; align-items:baseline; gap:7px; padding:9px 15px; border-radius:999px; background:rgb(255 255 255 / .06); border:1px solid rgb(255 255 255 / .13); color:#DCE7F5; text-decoration:none; font-size:.86rem; font-weight:700; transition:background .18s ease, transform .18s ease; } .kat-ozet-cipler a:hover{ background:rgb(255 255 255 / .13); transform:translateY(-1px) } .kat-ozet-cipler b{ font-size:1.08rem; font-weight:800; color:#fff } .kat-ozet-cipler b em{ font-style:normal; font-size:.85rem; color:#FFC24A } /* ♻️ 18. tur — güven şeridi kurs detayın `khero-guven` bileşenine geçti (ikonlu; markup+CSS miras). kurs.css'te katmanı `.khero > * { position:relative }` veriyor ama bizim section `.kat-hero` — ::before ışık katmanının üstünde kalması için karşılığı burada. */ .kat-hero .khero-guven{ position:relative; z-index:1 } /* ⛔ 18. tur: KULLANILMIYOR — tek tip onay işaretli eski şerit; view'da if(false) yedeğinde. */ .kat-guven{ list-style:none; margin:26px 0 0; padding:0; display:grid; gap:12px 20px; grid-template-columns:minmax(0,1fr); border-top:1px solid rgb(255 255 255 / .1); padding-top:20px; } @media (min-width:640px){ .kat-guven{ grid-template-columns:repeat(2,minmax(0,1fr)) } } @media (min-width:1060px){ .kat-guven{ grid-template-columns:repeat(4,minmax(0,1fr)) } } .kat-guven-madde{ display:flex; align-items:flex-start; gap:9px; min-width:0; font-size:.88rem; line-height:1.5; color:#C6D5E8; } .kat-guven-iko{ flex:none; width:20px; height:20px; margin-top:2px; display:grid; place-items:center; border-radius:50%; background:rgb(126 176 255 / .16); color:#9CC4FF; } .kat-guven-iko .icon{ width:12px; height:12px } /* ================================================================== 2. ANA KURSLAR — turun asıl işi: bunlar BÜYÜK ve dikkat çekici ================================================================== */ /* ♻️ 12. tur: alt boşluk kısıldı — garanti dipnotu kalkınca liste ile sonraki bölüm arasında büyük ölü bant kalıyordu (kullanıcı bildirdi). */ .kat-ana{ padding-block:clamp(44px,6vw,84px) clamp(22px,3vw,40px) } /* ⚠️ `auto-fit` burada güvenli: hücreleri kart dolduruyor. Bilgi panelinde boş ızgara hücresi bıraktığı için bırakılmıştı, o vaka farklı (tasarim-tuzaklari §B). */ .kat-ana-izgara{ display:grid; gap:20px; grid-template-columns:minmax(0,1fr); } /* 🔴 2026-08-31 CANLI DÜZELTME — EN ÇOK 3 SÜTUN. `auto-fit minmax(300px,1fr)` 1440px'te DÖRT sütun açıyordu; KPSS'in 6 kartı **4 + 2** diziliyor ve ikinci satırda iki boş hücre kalıyordu (canlıda görüldü). Sütun sayısı 3'e sabitlenince 6 kart 3+3, 4 kart 2+2 oluyor — her iki durumda da satırlar dolu. ⚠️ Sabit sütun sayısı, `auto-fit`in "kaç sığarsa" davranışından bilerek üstün: kart genişliği değil DİZİLİM kontrol ediliyor. */ /* 🔴 2026-08-31 (4. tur) — KARTLAR DEVASAYDI. Kullanıcı: *"kurslar devasa yer kaplıyor, sayfaya sığmıyor o derece."* Ölçüldü (TR-YÖS, 1440px): kart **668×751**, görsel tek başına **666×375**. Sebep: sütunlar `1fr` idi, iki kartlı kategoride her track 668px oluyordu; 16/9 görsel de onunla birlikte büyüyordu. ✅ Track'e ÜST SINIR kondu (`minmax(0,340px)`) + `justify-content:start` → kart sayısı kaç olursa olsun kart ~340px, görsel ~191px. ⚠️ Ortalama YOK — sola dayalı (kullanıcının tabloda da istediği). */ /* ♻️ 5. tur: 340px ÇOK KÜÇÜK kaldı. İki kartlı kategoride (TR-YÖS) kartlar sayfanın solunda küçük bir ada gibi duruyor, sağda ~580px boşluk kalıyordu. 400px'e çıkarıldı: 3 kart 1.240px'i dolduruyor, 2 kart 820px'de dengeli duruyor. "Devasa" sınırı 668px'ti, buradan uzağız. */ /* ♻️♻️ 2026-09-01 (7. tur) — HEPSİ KUTU KART, YATAY DÜZEN KALKTI. Kullanıcı: *"Kurs kısmı hâlâ çok büyük, üstelik gepgeniş — yani kutu gibi kart değil."* Tek ana kurslu kategoride (TUS) kart tam genişlikte yatay bir panel oluyordu; üç tur boyunca hep o düzenin ölçüsüyle uğraştım, oysa sorun ÖLÇÜ DEĞİL DÜZENDİ. ✅ `[data-adet="1"]` yatay kuralları KALDIRILDI. Ana kurs kartı da artık kutu; kaç tane olursa olsun aynı ızgarada. ⚠️ `auto-fill` + üst sınır: 320px'i geçmiyor, dar ekranda daralıyor. `justify-content:start` → sola dayalı, ortalanmıyor. ⚠️ Hiyerarşi ölçüden değil MALZEMEDEN: ana kurs 320px + üstte marka şeridi + kurdele + kapsam çipleri; ikincil kartlar 260px ve sade. */ /* ♻️♻️♻️ 2026-09-01 (8. tur) — TEK IZGARA. Kullanıcı ÜÇÜNCÜ kez söyledi: *"Bir blokta ana kurslar, dersler, sınav, akıllı kitap, ilgili eğitimler gelsin. Tek farkı ana kurslar daha detaylı ve büyük kart olsun. Bu kadar."* Önce 3, sonra 2 ayrı bölüm vardı; hepsi tek `.kat-liste` ızgarasında birleşti. Taban track "İlgili eğitimler" kartıyla aynı: **260px**. ⚠️ ANA KURS "büyük" olmayı ızgarada İKİ TRACK kaplayarak alıyor — ayrı bir ızgara ya da yatay panel DEĞİL (7. turda yatay panel tam bu yüzden kaldırılmıştı). ⚠️ `span 2` yalnız ≥1180px'te: orada 4 track var, ana kart ~534px çıkıyor. 900-1180 arası 3 track ve span 2 ~588px yapardı — 4. turda "devasa" denen 668px'e fazla yaklaşırdı. Dar ekranda ana kart da tek track, ayrımı malzeme taşıyor. */ .kat-liste{ display:grid; gap:14px; grid-template-columns:minmax(0,1fr); justify-content:start; } /* 🔴 17. tur (mobil/responsive taraması) — SAĞDA ÖLÜ BANT. `minmax(...,260px)` sabit üst sınırla `auto-fill`, SÜTUN SAYISINI MAX TRACK BOYUNA göre sayıyor (CSS spec: max belirliyse tekrar sayısı ona göre). Canlıda ölçüldü (ALES): 768 vp → 2×260, sağda 175px ölü · 1100 vp → 3×260, 233px ölü 1440'ta 5×260=1356 tam denk geldiği için masaüstünde hiç görünmedi. ✅ Üst sınır `1fr`: tekrar sayısı MIN'e (215) göre sayılıyor, track kalan boşluğu paylaşıyor — her genişlikte satır dolu: 620→2×273 · 768→3×227 · 900→3×271 · 1100→4×250 · 1250→5×227 ⚠️ Track artık 260'ı AŞABİLİR (900'de 271) — "devasa" sınırı 668'di, çok uzak. ≥1360 zaten repeat(6) ile ayrı yönetiliyor. */ @media (min-width:520px){ .kat-liste{ grid-template-columns:repeat(auto-fill,minmax(min(100%,215px),1fr)) } /* eski: repeat(auto-fill,minmax(min(100%,215px),260px)) */ } /* 🔴 2026-09-01 (9. tur) — KÜÇÜK KARTLAR UPUZUN OLUYORDU. Kullanıcı: *"Dersler upuzun olmuş."* Ölçüldü (1440px, TUS): büyük kart 534×**614** · küçük kart 260×**614** ama küçüğün DOĞAL boyu 260×**334** (2. satırdakiler öyle) → her küçük kartın içinde **280px ölü boşluk** Sebep: büyük kart yalnız İKİ SÜTUN kaplıyordu, ama satır yüksekliğini de o belirliyordu; ızgara varsayılanı `stretch` olduğu için aynı satırdaki küçük kartlar 614'e geriliyordu. ✅ Büyük kart artık İKİ SATIR da kaplıyor (`grid-row:span 2`), yani yüksekliğini kendi alanından alıyor. `align-self:start` ile de gereğinden fazla uzamıyor — küçük kartlar doğal boyunda kalıyor. */ /* ♻️ 14. tur: `align-self:start` KALDIRILDI — kullanıcı: "ana kurs kutusu yanındaki 2 sıra kutuyla AYNI ÇİZGİDE bitse daha iyi." Ölçüldü: büyük kart altı 1573, 2. satır küçüklerin altı 1630 → 57px fark. `stretch` (varsayılan) ile büyük kart iki satırlık alanını tam dolduruyor, alt çizgiler hizalanıyor. Kartın içindeki `margin-top:auto` (eylem bloğu) fazla boşluğu butonların ÜSTÜNE atıyor, kart alttan boş görünmüyor. */ @media (min-width:1180px){ .kat-liste .kat-kart{ grid-column:span 2; grid-row:span 2 } } /* ♻️ 16. tur — GENİŞ MASAÜSTÜNDE ANA KURSLAR 3'LÜ. Kullanıcı (ALES'e bakarak): *"Ana kursları masaüstünde yan yana 3 tane gelecek kadar mı büyütsek?"* auto-fill 215-260 track'lerle satıra EN ÇOK 2 büyük + 1 mini sütunu sığıyordu (2×534 + 260); "iki büyük + sıska mini sütunu" ritmi dağınık okunuyordu. 6 EŞİT sütunda büyük kart (span 2) satıra tam 3 kez giriyor, satır dolu bitiyor. Canlıda enjeksiyonla ölçüldü: 1440 vp → track ~214 · büyük 443 · satırda 3 büyük (ALES/KPSS ✓) 1366 vp → track ~194 · büyük 403 · yine 3'lü, kart kırılmadı ⚠️ Eşik 1360: altında 6 track mini'yi ~178px'e düşürürdü (1180 vp). 1180-1360 arası eski davranış (2 büyük + mini sütunu) bilerek korunuyor — auto-fill zaten oraya kalibre. ⚠️ Bedeli: miniler ≥1360'ta 260 → ~214px (7. turdaki "İlgili eğitimlerle aynı boyut" ölçüsünün altı; başlıklar 2 satıra kırılıyor ama kart bozulmuyor). KPSS 6 büyük = 3+3 tam; ALES 4 büyük = 3+1, artan kartın yanını miniler dolduruyor. */ @media (min-width:1360px){ .kat-liste{ grid-template-columns:repeat(6,minmax(0,1fr)) } } /* Ana kurs kartının üstünde ince marka şeridi — "bu sayfanın asıl ürünü" işareti. İkincil kartlarda yok, ayrım buradan da okunuyor. */ .kat-liste .kat-kart{ position:relative; border-color:rgb(47 107 208 / .22) } .kat-liste .kat-kart::before{ content:''; position:absolute; inset:0 0 auto; height:3px; z-index:2; background:linear-gradient(90deg, var(--brand), var(--red)); } /* --- ESKİ AYRI IZGARALAR (ŞU AN KULLANILMIYOR) -------------------- */ .kat-ana-izgara{ justify-content:start } @media (min-width:560px){ .kat-ana-izgara{ grid-template-columns:repeat(auto-fill,minmax(min(100%,270px),320px)) } } .kat-kart{ min-width:0; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-l); box-shadow:var(--sh-2); overflow:hidden; display:flex; flex-direction:column; transition:box-shadow .2s ease, transform .2s ease; } .kat-kart:hover{ box-shadow:var(--sh-3); transform:translateY(-2px) } /* ⚠️ Oran SABİT: admin görselleri farklı en-boy oranlarında yükleniyor, `height:auto` bırakılınca kartlar farklı yükseklikte başlıyordu. */ .kat-kart-gorsel{ background:var(--tint); line-height:0 } .kat-kart-gorsel img{ width:100%; height:auto; display:block; aspect-ratio:16/9; object-fit:cover } .kat-kart-govde{ min-width:0; padding:18px 18px 20px; display:flex; flex-direction:column; gap:10px; flex:1 1 auto; } .kat-kart-ad{ margin:0; font-size:1.12rem; line-height:1.32; font-weight:800; color:var(--ink) } .kat-kart-ad a{ color:inherit; text-decoration:none } .kat-kart-ad a:hover{ color:var(--brand-d); text-decoration:underline } /* 🔴 2026-08-31 (2. tur) — `crs_slogan` KAMPANYA KURDELESİ, açıklama değil ("Özel İndirim Fırsatı", "Erken Kayıt Fırsatı", "%50 İndirim Fırsatı"). Gri paragraf olarak basılınca hem yanlış okunuyordu hem kart metni sanılıyordu. Eski temanın kart kurdelesinin karşılığı. */ .kat-kart-kurdele{ margin:0; align-self:start; padding:4px 11px; border-radius:999px; background:var(--red-w); color:var(--red-d); font-size:.76rem; font-weight:800; letter-spacing:.01em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; } /* 🔴 2026-09-01 (5. tur) — KAPSAM ÇİPLERİ. Fiyat kalkınca kartta başlık + kurdele + tek satır kalmıştı; tek ana kurslu kategoride kartın sağ yarısı boş duruyordu. `crs_approx_time` kursa özel ve zaten virgüllü bir liste. */ .kat-kart-cipler{ list-style:none; margin:2px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:6px; } .kat-kart-cipler li{ padding:4px 10px; border-radius:999px; background:var(--tint); color:var(--ink-2); font-size:.76rem; font-weight:700; line-height:1.4; } /* 🔴🔴 2026-08-31 (4. tur) — KARTTA FİYAT YOK (kullanıcı kararı). *"Burada yazdığın fiyat hangi paketin fiyatı? Kategori liste sayfasında biz fiyat veremeyiz ki, kursların kendi paketleri var."* Aşağıdaki fiyat kuralları KULLANILMIYOR ama SİLİNMEDİ — karar geri alınırsa markup ve stiller hazır (view'daki blok da yoruma alındı). */ .kat-paket-bilgi{ margin:0 0 2px; font-size:.85rem; line-height:1.5; color:var(--ink-2); } .kat-paket-bilgi b{ color:var(--ink); font-weight:800 } /* --- fiyat bloğu (ŞU AN BASILMIYOR) -------------------------------- */ .kat-fiyat{ margin-top:auto; padding-top:6px } .kat-fiyat-ust{ margin:0 0 2px; display:flex; flex-wrap:wrap; align-items:center; gap:8px; font-size:.85rem; color:var(--ink-3); } .kat-fiyat-ust s{ text-decoration-thickness:1px } .kat-indirim{ padding:2px 8px; border-radius:999px; background:var(--red-w); color:var(--red-d); font-size:.78rem; font-weight:800; } .kat-fiyat-mansur{ margin:0; display:flex; flex-wrap:wrap; align-items:baseline; gap:6px; } .kat-fiyat-onek{ width:100%; font-size:.76rem; color:var(--ink-3); letter-spacing:.04em; text-transform:uppercase } .kat-fiyat-mansur b{ font-size:1.5rem; font-weight:800; color:var(--ink); line-height:1.2 } .kat-fiyat-kdv{ font-size:.82rem; color:var(--ink-2); font-weight:700 } /* ⚠️ "+ %20 KDV" satırı KDV DAHİL manşetin ALTINDA ve küçük. Eski sayfanın hatası tersiydi: `fee_monthly` yanına "+ kdv" konup geçerli bir fiyat gibi gösteriliyordu (tasarim-tuzaklari §D). */ .kat-fiyat-alt{ margin:2px 0 0; font-size:.8rem; color:var(--ink-3) } .kat-epara{ margin:8px 0 0; padding:6px 10px; border-radius:var(--r); background:var(--brand-w); color:var(--brand-d); font-size:.8rem; line-height:1.45; } /* 🔴 2026-08-31 — "N paket seçeneği" DÜĞMENİN ALTINA alındı. Yan yanayken dar kartta düğmeyi sıkıştırıp sağa kayık bir kuyruk bırakıyordu (canlıda KPSS'te görüldü). Ayrıca düğme `flex:1 1 auto` ile tek kartlı kategoride ~700px'lik kırmızı bir banda dönüyordu. */ /* ⚠️ `margin-top:auto` ARTIK BURADA: fiyat bloğu kalkınca kartı dibe iten öğe bu oldu. Olmasaydı kısa başlıklı kartlarda düğme yukarıda kalır, ızgarada hizasızlık geri gelirdi. */ .kat-kart-eylem{ margin-top:auto; padding-top:12px; display:grid; gap:9px; grid-template-columns:minmax(0,1fr); justify-items:stretch; } .kat-kart-eylem .btn{ justify-content:center } .kat-kart-paket{ font-size:.8rem; color:var(--ink-3); text-align:center } /* Tek ana kurslu kategoride kart yatay; düğme tüm gövdeyi kaplamasın. */ @media (min-width:860px){ .kat-ana-izgara[data-adet="1"] .kat-kart-eylem{ grid-template-columns:minmax(0,280px); justify-content:start; justify-items:start; } .kat-ana-izgara[data-adet="1"] .kat-kart-paket{ text-align:left } } /* ⛔ 12. tur — garanti dipnotu kaldırıldı; kural yedekte duruyor. */ .kat-gar-not{ margin:22px 0 0; padding-top:16px; border-top:1px solid var(--line-2); font-size:.82rem; line-height:1.6; color:var(--ink-3); max-width:80ch; } /* ♻️ 12. tur — YEDİRİLMİŞ ADMİN METNİ (kurs listesinin altı). Kutu YOK — bölümün doğal devamı. Katlama .kat-icerik-metin kurallarını kullanıyor (aşağıda, js-icerik altında). ♻️ 14. tur: `max-width:860px` KALDIRILDI — kullanıcı: "metnin sağ tarafı boş kalmış." Ölçüldü: blok 860px, wrap 1400px → sağda 540px ölü alan. Tam genişlik; §B'deki "panel daraltılır, metin değil" tercihimin üçüncü kez aynı geri bildirimi alması üzerine. */ .kat-yedik{ margin-top:clamp(26px,3.5vw,40px); padding-top:clamp(18px,2.5vw,26px); border-top:1px solid var(--line-2); } .kat-yedik h3{ margin:0 0 10px; font-size:1.08rem; line-height:1.4; font-weight:800; color:var(--ink); } /* ================================================================== 3. GRUPLAR (dersler / denemeler / akıllı kitaplar) ⚠️ Üst boşluk KISILDI: bu bölümler arka arkaya geliyor ve global section padding'i komşuyla toplanıp ~200px ölü bant üretiyor (tasarim-tuzaklari §A). ================================================================== */ .kat-grup{ padding-block:clamp(28px,3.5vw,48px) } .kat-grup + .kat-grup{ padding-block-start:clamp(12px,2vw,24px) } /* ♻️♻️ 2026-09-01 (6. tur) — TABLO KALDIRILDI, KÜÇÜK KART LİSTESİ. Kullanıcı: *"Her kursun görseli var ama tabloda görseller yok, çünkü tabloya uygun değil. Ana kurslar detaylı büyük kutular, diğerleri 'İlgili eğitimler' gibi küçük listelensin."* Gerekçe zinciri: açıklama sütunu tekrar ediyordu (kalktı) → fiyat sütunu "hangi paket?" doğuruyordu (kalktı) → geriye ad + düğme kaldı, tablo olmasının sebebi bitti. Görsel ise kursun en güçlü ayırt edicisiydi ve tabloya girmiyordu. ⛔ Aşağıdaki `.kat-tablo-*` ve `.cmp` override'ları KULLANILMIYOR ama SİLİNMEDİ (karar geri alınırsa hazır). */ /* ♻️ 7. tur — ÖLÇÜ "İLGİLİ EĞİTİMLER" KARTIYLA AYNI. Kullanıcı: *"İlgili eğitimler kısmındaki kutu kartların boyutu çok iyi masaüstünde, bununla aynı boyutta demiştim sana."* kurs.css → `.ilgili-kart{ flex:0 0 min(260px,78vw) }` ve görsel `aspect-ratio:16/10`. İkisi de birebir alındı. */ .kat-mini-izgara{ display:grid; gap:14px; grid-template-columns:minmax(0,1fr); justify-content:start; } @media (min-width:520px){ .kat-mini-izgara{ grid-template-columns:repeat(auto-fill,minmax(min(100%,215px),260px)) } } .kat-mini{ min-width:0; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-l); box-shadow:var(--sh-1); overflow:hidden; display:flex; flex-direction:column; transition:box-shadow .2s ease, transform .2s ease; } .kat-mini:hover{ box-shadow:var(--sh-2); transform:translateY(-2px) } /* ⚠️ Görsel bağlantısı `tabindex="-1" aria-hidden` — başlıkta aynı adrese giden gerçek link var; iki link tek hedef demek olurdu (kadro kartındaki kuralın aynısı). */ /* Görsel oranı da `.ilgili-gorsel` ile aynı: 16/10. */ .kat-mini-gorsel{ display:block; background:var(--tint); line-height:0 } .kat-mini-gorsel img{ width:100%; height:auto; display:block; aspect-ratio:16/10; object-fit:cover } .kat-mini-govde{ min-width:0; padding:13px 14px 15px; flex:1 1 auto; display:flex; flex-direction:column; gap:6px; } /* Tür çipi: üç grup tek ızgarada birleşince türü kart söylüyor. */ .kat-mini-tur{ align-self:start; padding:2px 9px; border-radius:999px; background:var(--brand-w); color:var(--brand-d); font-size:.66rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; } .kat-mini-ad{ margin:0; font-size:.94rem; line-height:1.35; font-weight:800; color:var(--ink) } .kat-mini-ad a{ color:inherit; text-decoration:none } .kat-mini-ad a:hover{ color:var(--brand-d); text-decoration:underline } .kat-mini-kapsam{ margin:0; font-size:.8rem; line-height:1.45; color:var(--ink-3) } .kat-mini-eylem{ margin-top:auto; padding-top:10px; display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; } .kat-mini-eylem .btn{ padding:7px 13px; font-size:.82rem } .kat-mini-link{ font-size:.82rem; font-weight:700; color:var(--brand-d); text-decoration:underline; text-underline-offset:2px; } .kat-mini-link:hover{ color:var(--ink) } /* --- ESKİ TABLO STİLLERİ (ŞU AN KULLANILMIYOR) --------------------- */ .kat-tablo-ad{ font-weight:700; color:var(--ink); line-height:1.35 } .kat-tablo-epara{ display:block; font-size:.76rem; color:var(--brand-d); font-weight:600 } .kat-tablo-kapsam{ color:var(--ink-2); font-size:.88rem; line-height:1.45 } .kat-tablo-bos{ color:var(--ink-3) } .kat-tablo-adet{ color:var(--ink-2); font-weight:700; white-space:nowrap } /* ⛔ 2. turdaki `max-width:940px; margin-inline:auto` GERİ ALINDI. Kullanıcı: *"TUS dersleri kısmı da sağı solu boşluk geniş olmuş, ortalı olmuş."* Tabloyu daraltmak boşluğu ortadan yanlara taşıdı. ✅ Doğru çözüm boşluğu DOLDURMAK: "Kapsam" sütunu eklendi (`crs_approx_time` — kursa özel, kıyaslanabilir). Tablo yine tam genişlikte ve sola dayalı. */ /* ------------------------------------------------------------------ 🔴 `.cmp` ÜÇ SÜTUNA GÖRE DÜZELTİLİYOR kurs.css'teki tablo BEŞ sütuna kalibre: Paket · Açıklama · Kazanma garantisi · Fiyat · İncele Kategori tablosunda ikisi de yok: · Garanti — kurs/paket düzeyinde, ders satırında kıyas değeri sıfır · Açıklama — canlıda ölçüldü, 12 satırda 12 kez AYNI metin Kalan ÜÇ sütun: Ders · Fiyat · İncele Miras `nth-child` kuralları bu yüzden İKİ sütun kayıyor; düzeltilmezse · masaüstünde ölçüler yanlış sütuna biniyor · 🔴 MOBİLDE `nth-child(2)` **Fiyat**'ı, `nth-child(3)` **İncele**'yi gizliyor (orada Açıklama ve Garanti'yi gizlemek içindi) ⚠️ §B'deki "nth-child yalnız thead'de" kuralı burada işe yaradı: gövde yerleşimi sınıf/konum tabanlı olduğu için (`.cmp-fiyat`, `td:last-child`) tbody KENDİLİĞİNDEN doğru eşleşiyor. ------------------------------------------------------------------- */ @media (min-width:761px){ /* 3 sütun: Ders · Fiyat · İncele */ .kat-tablo[data-sutun="3"] thead th:nth-child(1){ width:auto } .kat-tablo[data-sutun="3"] thead th:nth-child(2){ width:180px; text-align:right } .kat-tablo[data-sutun="3"] thead th:nth-child(3){ width:110px; text-align:right } /* 4 sütun: Ders · Kapsam · Fiyat · İncele */ .kat-tablo[data-sutun="4"] thead th:nth-child(1){ width:34% } .kat-tablo[data-sutun="4"] thead th:nth-child(2){ width:auto; text-align:left } .kat-tablo[data-sutun="4"] thead th:nth-child(3){ width:180px; text-align:right } .kat-tablo[data-sutun="4"] thead th:nth-child(4){ width:110px; text-align:right } } @media (max-width:760px){ /* Miras gizleme kuralları iptal — bizde gizlenecek sütun yok. */ .kat-tablo thead th:nth-child(2), .kat-tablo thead th:nth-child(3){ display:table-cell } /* 4 sütunlu tabloda KAPSAM mobilde gizleniyor: dar ekranda ad + fiyat + düğme zaten sınırda; kapsam kursun kendi sayfasında. ⚠️ `th` tarafı nth-child ile GÜVENLİ (thead sabit), `td` tarafı SINIFLA — satırda hücre sırası değişebiliyor (§B). */ .kat-tablo[data-sutun="4"] thead th:nth-child(2){ display:none } .kat-tablo .kat-tablo-kapsam{ display:none } /* Mobil grid: ad | fiyat | düğme. Sabit px — `auto` satırdan satıra kayıp fiyat sütununu oynatıyor (tasarim-tuzaklari §B). */ .kat-tablo thead tr, .kat-tablo tbody tr{ grid-template-columns:1fr 82px 62px } } /* Fiyatı girilmemiş satır: hücre boş kalmasın. */ .kat-tablo .cmp-fiyat:empty::after{ content:'—'; color:var(--ink-3) } /* ================================================================== 3-PKT. PAKETLER MODALI — eski "Paketler" düğmesinin modern hâli ⚠️ Kartta fiyat YOK; fiyat yalnız burada, HER paketle birlikte. Böylece hiçbir paket "seçilmiş" olmuyor (kullanıcı kararı). ================================================================== */ /* ♻️ 12. tur — Paketler düğmesi maviye çevrilmişti; 13. turda kullanıcı "mavi çok zıt, uyumsuz" dedi. ✅ Kurs detayın kendi ikincil düğmesine geçildi: paket kartlarındaki "Sipariş Ver" LACİVERTİ (var(--navy)). Kırmızı birincil + lacivert ikincil zaten oturmuş tema dili. */ /* ♻️ 24. tur — `cursor:pointer` (kullanıcı: "Kursu İncele'de el ikonu çıkıyor, Paketler'de imleç kalıyor; tıklanamazmış algısı oluşuyor"). Sebep: İncele bir (tarayıcı kendiliğinden el verir), Paketler