/* =============================================================================
G-1 — ANA SAYFA TEMA VİTRİNİ: yatay kayan panel rayı
Onaylı tasarım: AI/mochup/tema-slider/ (00-mekanik.png + 01..13-*.png)
NEDEN AYRI DOSYA
Bölüm 13 farklı panel tasarımı taşıyor; tek şablonla çözülmüyor. Bunu
`tf-sayfa.css`e katmak o dosyayı (zaten 2000+ satır) tema başına doku
kurallarıyla şişirirdi. Ayrı katman: yalnız `index.html` yükler, /tasarla
bu dosyayı HİÇ görmez.
TEMA TASARIMI = DEĞİŞKEN SETİ, AYRI ŞABLON DEĞİL
Her tema `--tv-zemin / --tv-vurgu / --tv-metin / --tv-dugme-metin` yazar;
yerleşim tek yerde durur. Renkler ONAYLI MOCKUP'LARDAN ÖLÇÜLDÜ (panel
gövdesinin baskın rengi + düğme bölgesinin baskın doygun rengi), tahmin
edilmedi. Süper Kahramanlar tek istisna: çizgi roman dili kalın kontur ve
keskin köşe istiyor, o yüzden kendi birkaç kuralı var.
TEMASI OLMAYAN STİL KIRILMAZ
`:root` üstündeki varsayılanlar nötr paneli verir (krem zemin, bal düğme).
14. tema katalogda belirdiğinde ray boş kalmaz; CSS'e dokunmadan çalışır.
DEKORLAR CSS/SVG — mockup PNG'leri GÖMÜLMEZ (görsel yükü kuralı).
============================================================================= */
/* GÖZDEN KALDIR, AĞAÇTAN KALDIRMA. Bölümün `h2`si erişilebilir adı taşımaya
devam eder; `display:none` onu ağaçtan da düşürürdü. */
.tv .tf-gizli {
position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
/* BÖLÜM DOLGUSU: banner sayfanın ilk ekranı; üstünde başlık bloğu yok. Banner
kenarlara dayandığı için üstte dolgu da yok. */
#top.tv { padding-block: 0 40px; }
.tv-ray {
/* Nötr varsayılan — tasarımı olmayan tema bu paneli alır. */
--tv-zemin: #F4EBDA;
--tv-zemin2: #EFE3CD;
--tv-vurgu: #C9A227;
--tv-metin: #241B1B;
--tv-metin-soft: rgba(36, 27, 27, 0.72);
--tv-dugme-metin: #241B1B;
--tv-cip-cizgi: rgba(36, 27, 27, 0.22);
--tv-panel-yaricap: 18px;
--tv-kontur: 0;
position: relative;
margin-top: 0; /* başlık bloğu gizli -- boşluğu bölüm verir */
}
/* ---- BANNER: YANLARDAN SLIDER GİBİ GÖRÜNMEZ ----
Kerem (8 Eylül 2026): "yanlardan slider izlenimi olmamalı, aşağıdaki slider
kısmı yine olmalı."
ÖNCESİ yatay kaydırılan bir raydı ve komşu paneller iki kenardan ~50 px
görünüyordu; bileşen "karusel" diye okunuyordu. ŞİMDİ paneller AYNI IZGARA
HÜCRESİNDE üst üste duruyor, yalnız aktif olan görünür, geçiş çapraz solma.
Yandan hiçbir komşu görünmez; banner ekranın iki kenarına dayanır.
AŞAĞIDAKİ DENETİMLER DURUYOR: noktalar, ilerleme çizgisi, oklar (panelin
içinde) ve tema sekme şeridi (panelin altında) kaldırılmadı.
İÇERİK YİNE SAYFAYLA HİZALI: `--tv-ic-pay` panelin yatay dolgusunu sayfa
kabının kenar payına eşitler; sekme şeridi de aynı payı kullanır, böylece
ikisi tek çizgide başlar. */
/* İÇ PAY: sayfa kabının (`.container`, min(1240px, 92vw)) kenar payı. Panelin
yatay dolgusu, kromu ve sekme şeridi bu TEK değeri kullanır -- üçü aynı
çizgide başlasın diye. */
.tv-ray { --tv-ic-pay: calc((100vw - min(1240px, 92vw)) / 2); }
.tv-ray-kap {
display: grid; /* tüm paneller tek hücrede */
/* FAREYLE TUTUP KAYDIRMA: imleç jestin var olduğunu söyler. `pan-y` dokunmalı
ekranda SAYFANIN dikey kaydırmasını serbest bırakır, yatayı bize verir. */
cursor: grab; touch-action: pan-y;
user-select: none; -webkit-user-select: none;
width: 100vw;
margin-left: calc(50% - 50vw);
overflow: hidden; /* kaydırma YOK */
}
.tv-ray-kap:active { cursor: grabbing; }
/* ---- PANEL: YIĞININ BİR KATI ---- */
.tv-panel {
grid-area: 1 / 1; /* hepsi aynı hücrede, üst üste */
position: relative;
/* HERO BOYUNDA AMA İLK EKRANI AŞMAZ (G-4, Kerem: "alttaki slider kısmı ilk
açılış penceresinde gözükmeli"). Oran bannerin doğal boyunu verir;
`max-height` onu görünüm alanına göre kırpar ki krom ŞERİDİ ve tema
sekmeleri katlanmanın üstünde kalsın.
190 px REZERVİ NEREDEN: yapışkan başlık ~77 + sekme şeridi 29 + şeridin üst
boşluğu 18 + bölümün alt dolgusu 40 + ~26 px nefes payı. `svh` mobil tarayıcı
çubuğu açılıp kapanırken zıplamayı önler; anlamayan tarayıcı için önce `vh`
yazılır. */
/* YÜKSEKLİK DOĞRUDAN YAZILIR, `aspect-ratio` + `max-height` DEĞİL.
İkisi birlikte kullanıldığında tarayıcı oranı korumak için GENİŞLİĞİ de
kısıyor: 900 px'lik pencerede panel 1440 değil 1377 px çıkıyordu ve banner
ekranın kenarlarına dayanmıyordu (ölçüldü). Genişlik ızgaradan (100vw)
gelir; yükseklik ya bannerin doğal oranıdır ya da ilk ekrana sığan tavan --
hangisi küçükse.
190 px REZERVİ: yapışkan başlık ~77 + sekme şeridi 29 + üst boşluk 18 +
bölümün alt dolgusu 40 + ~26 nefes payı. `svh` mobil tarayıcı çubuğu
açılıp kapanırken zıplamayı önler. */
height: min(calc(100vw * 660 / 1280), calc(100vh - 190px));
height: min(calc(100vw * 660 / 1280), calc(100svh - 190px));
/* ÖLÇÜ KABI: içerideki bütün ölçüler `--tv-birim` cinsinden yazılır ve o da
panelin KENDİ yüksekliğinden türer -- mockup'ın 1280x600'ündeki 1 px.
Panel kısalınca metin, çip, düğme ve kartlar birlikte küçülür; kompozisyon
bozulmaz. `container-type: size` panelin boyu içeriğinden BAĞIMSIZ olduğu
için güvenli (`aspect-ratio` + ızgara genişliği veriyor) -- mobilde panel
içerikten büyüdüğü için orada kapatılır. */
container-type: size;
--tv-birim: calc(100cqh / 600);
background: var(--tv-zemin);
color: var(--tv-metin);
overflow: hidden;
/* İÇ DÜZENİ ARTIK `.th-inner--cf` KURUYOR (hero'nun kendi kuralı).
Önce burada tema paneline ÖZGÜ bir ızgara vardı
(`minmax(0,1fr) minmax(0,1.15fr)`) ve kart alanı hero'nun medya
kutusundan BAŞKA yerde/genişlikte çıkıyordu (ölçüldü, 1440×900:
hero medya 775..1308 · tema kart alanı 683..1340). Panel artık hero
gibi tek blok; düzeni içerideki `.th-inner` veriyor. */
display: block;
/* DİKEY DOLGU YOK, BİLİNÇLİ: `container-type: size` ile `100cqh` panelin
İÇERİK kutusudur. Dikey dolgu bıraksaydık birim panelin gerçek boyundan
küçük çıkar ve mockup'ın ölçüleri (310 px kart, 60 px başlık) olduğundan
küçük inerdi (ölçüldü: kart 367 yerine 307 px). Metin zaten dikey ortalı,
krom kendi payını `30 * --tv-birim` ile alıyor. */
padding-block: 0;
padding-inline: var(--tv-ic-pay);
outline: var(--tv-kontur) solid #000;
outline-offset: calc(var(--tv-kontur) * -1);
/* ÇAPRAZ GEÇİŞ. `visibility` de gerekir: yalnız `opacity:0` bırakılan panel
tıklanabilir kalır ve altındaki aktif panelin düğmelerini yutardı. Gecikme
yalnız KAPANIRKEN uygulanır ki solma bitmeden kaybolmasın. */
opacity: 0; visibility: hidden;
transition: opacity .7s ease, visibility 0s linear .7s;
}
.tv-panel[data-aktif="1"] {
opacity: 1; visibility: visible;
transition: opacity .7s ease, visibility 0s;
}
@media (prefers-reduced-motion: reduce) { .tv-panel { transition: none; } }
/* ---- 1. SLAYT: MIQNO HERO'SU ----
Panel `teamforge-hero` sınıfını DA taşıyor: hero'nun düğme, tipografi ve açık
tema kuralları (tf-sayfa.css + tf-light.css) o sınıfa asılı ve hiçbiri
kopyalanmadı. Burada YALNIZ kutu özellikleri nötrlenir -- boyutu artık `.tv-panel`
verir, `.teamforge-hero`nun `min-height`i ve dolgusu ikinci bir ölçü olurdu.
ZEMİN: `.th-stadium` (inset:0) hero'nun kendi ışık katmanını çiziyor; panel
`background: none` diyerek onu örtmez. Panelin `overflow:hidden`ı köşeleri
yuvarlar, `border-radius` korunur. */
.tv-panel--hero { padding: 0; display: block; }
/* HERO DÜĞME ÖLÇÜSÜ — eskiden `.teamforge-hero .btn-*` veriyordu. O sınıf
panelden kaldırıldı (tf-koyu.css'teki `!important` zemin kuralı yüzünden),
ölçü kuralı buraya açıkça taşındı; rengi zaten genel `.btn-*` veriyor. */
/* TEMA DÜĞMESİ DE BU KURALDA (Kerem, 9 Eylül 2026: "buton içindeki yazı
fontu ve buton büyüklüğü yine ana slayttaki ile aynı olmalı").
ÖLÇÜLDÜ (1440×900): tema düğmesi Oswald 17,75 px / 220×59 px, hero düğmesi
Inter 15,2 px / 168×50 px. Sebep: tema düğmesinin bütün ölçüleri
`calc(N * var(--tv-birim))` idi ve `--tv-birim` PANEL BOYUNDAN türüyor
(710/600 = 1,183) -- iki düğme yalnız pencere ~790 px boyundayken denk
geliyordu. ÖLÇÜ İKİ KEZ YAZILMAZ: tema düğmesi hero'nun kuralına katıldı. */
.tv-panel--hero .btn-gold, .tv-panel--hero .btn-ghost, .tv-panel .tv-p-cta {
height: 50px; padding: 0 28px; border-radius: 10px; font-weight: 600;
}
/* İKİ PANELE DE: hero da tema da aynı iç kabı kullanıyor artık. */
.tv-panel .th-inner {
height: 100%; justify-content: center;
/* ÖLÇEK GERİ ALINDI: `.th-inner`ın `scale(1.05)`i sayfa genişliğinde serbest
dururken sorun değildi; panel `overflow:hidden` olduğu için içeriği KIRPTI
(ölçüldü: "Anıların" ve fiyat satırı sol kenardan kesiliyordu). */
transform: none;
/* KROMA YER: noktalar/ok panelin alt %5'inde duruyor; pay olmadan güven
rozetlerinin üstüne biniyordu. */
padding-bottom: 76px;
}
.tv-panel--hero .th-copy, .tv-panel--hero .th-media { position: relative; z-index: 1; }
/* 1. SLAYDIN PALETİ — eski hero'nun krem zemini, diğer temalarla AYNI YOLDAN
(`--tv-zemin`). Değerler `anasayfa-ritim.css`teki `#top` gradyanının birebir
karşılığı; hero kaldırıldığında o kural da anlamını yitirdiği için renk
buraya, panelin kendi değişkenine taşındı. */
.tv-panel[data-tema="miqno"] {
--tv-zemin:
radial-gradient(58% 50% at 74% 18%, rgba(244, 184, 96, .16), transparent 60%),
radial-gradient(48% 46% at 26% 88%, rgba(233, 106, 75, .06), transparent 62%),
linear-gradient(180deg, #FFFDF9 0%, #FFF9F0 55%, #FFF6EA 100%);
--tv-metin: #3B2C35; --tv-metin-soft: #86707C;
--tv-vurgu: #E96A4B; --tv-dugme-metin: #FFF9F0;
--tv-cip-cizgi: color-mix(in srgb, #3B2C35 28%, transparent);
}
/* TEMA DEKORU — onaylı mockup'ın SVG'si, panel kurulurken DOM'a basılır
(assets/js/tf-vitrin-dekor.js). `![]()
` DEĞİL: ağ isteği doğurmaz, ilk boyama
görsel baytını artırmaz. Metin ve kartlar üstte kalır. */
.tv-dekor {
position: absolute; inset: 0; width: 100%; height: 100%;
pointer-events: none; z-index: 0;
}
/* KATMAN SIRASI — `position` TOPLUCA VERİLMEZ.
İlk deneme `.tv-panel > *:not(.tv-dekor){ position:relative }` idi; bu seçici
`.tv-sayac`tan (tek sınıf) daha özgül olduğu için sayacın `position:absolute`
ını da eziyordu. Sonuç ölçüldü: sayaç ızgaraya girip 1. sütunu kapıyor, metin
2. sütuna, kartlar alt satıra düşüyordu (onaylı tasarımda metin SOLDA).
Bu yüzden `position` yalnız ızgara hücrelerine yazılır. */
.tv-panel > * { z-index: 1; }
.tv-p-metin, .tv-p-kartlar { position: relative; }
/* ---- SOL: metin ---- */
/* Aşağıdaki sayılar MOCKUP'IN KENDİ PİKSELLERİ (tema-slider-mockup.html):
eyebrow 12 · h2 60/1.05 · lead 18/1.55 (max 520) · çip 12.5 (6x12) ·
düğme 15 (14x22, r14) · kartlar 310 ve 230 · krom 8/42, alt 30.
Hiçbiri yeniden ölçülmedi; birim çarpanı onları panele taşıyor. */
/* METIN SÜTUNU: genişliği ve hizası artık `.th-copy`den (hero) geliyor;
burada yalnız satır aralığı mockup oranında kalıyor. */
.tv-p-metin {
min-width: 0; display: flex; flex-direction: column; align-items: flex-start;
gap: calc(18 * var(--tv-birim));
}
/* PANELE BAĞLI YAZILIR (`.tv-panel` ön eki): tf-light.css'te site geneli bir
`[class*="eyebrow"]{ color:var(--gold-text) }` kuralı var; aynı özgüllükte
olduğu için sonra yüklenen o kural kazanıyordu (ölçüldü: her panelde
#A9772B). Ön ek özgüllüğü bir sınıf artırır, `!important` gerekmez. */
/* ================= YAZI ÖLÇÜLERİ PANEL BOYUYLA ÖLÇEKLENMEZ =================
Kerem, 9 Eylül 2026: "ana slayttaki yazı fontlarıyla aynı boyutta olmalı."
ÖLÇÜLDÜ (1440×900, hero → tema):
üst yazı 12,80 → 14,20 px cümle 17,92 → 21,30 px
başlık 72,00 → 71,00 px düğme 15,20 → 17,75 px
Hepsi aynı sebepten: bu blok `calc(N * var(--tv-birim))` ile yazılmıştı ve
`--tv-birim` panelin BOYUNDAN türüyor (`100cqh / 600`). Panel 710 px olunca
birim 1,183 oluyor ve bütün yazı %18 büyüyor. İki slayt yalnız panel tam
600 px iken (pencere ~790 px) denk geliyordu -- nöbetçi de tam o boyda
ölçtüğü için YEŞİL diyordu; şimdi üç pencere boyunda ölçülüyor.
DEĞERLER HERO'NUN KENDİ KURALLARINDAN: `.th-eyebrow` (.8rem/.16em),
`.th-title` (clamp) ve `.th-lead` (1.12rem/1.58) -- tf-sayfa.css. Kopyalanan
şey SAYI değil KAYNAK: ayrışmayı nöbetçi (olc:g1 27) yakalıyor.
KARTLAR VE BOŞLUKLAR ÖLÇEKTE KALIR: mockup oranı (Kerem: "objelerde
orantılı bir şekilde küçülüp o düzen sağlanmalı") yalnız YAZI için bırakıldı.
YAZI TİPİ AİLELERİNE DOKUNULMADI (Georgia başlık, Oswald üst yazı): talimat
"aynı BOYUTTA" diyor; düğme ayrı -- orada "yazı fontu" açıkça istendi. */
.tv-panel .tv-p-eyebrow {
margin: 0; font-family: 'Oswald', sans-serif; font-weight: 600;
font-size: .8rem; /* hero `.th-eyebrow` */
letter-spacing: .16em; /* hero `.th-eyebrow` -- em, yani boyla birlikte */
text-transform: uppercase; color: var(--tv-vurgu);
}
.tv-p-baslik {
margin: 0; font-family: Georgia, 'Times New Roman', serif;
font-size: clamp(2.4rem, 6.2vw, 4.5rem); /* hero `.th-title` */
line-height: 1.05; font-weight: 400;
color: var(--tv-metin);
/* KOPYA SÜTUNUNU AŞMAZ. Hero'nun `.th-title`ı `max-width: 580px` ile
sarıyor; tema başlığı `.tv-p-baslik` olduğu için o kuralı almıyordu ve
uzun adlar ("Renk Koleksiyonu", 72 px Georgia) kart yelpazesinin altına
giriyordu -- kartlar açılış slaydının yerine taşınınca görüldü.
`100%` YETMEDİ: yelpaze kopya sütununun sağ ucuna ~70 px giriyor, yani
sütunu tam dolduran bir başlık yine kartların altında kalıyor (ölçüldü:
futbolcu · gamer · renk · cadılar, üç pencere boyunda da).
BOŞ KALAN GENİŞLİK ÖLÇÜLDÜ: 1440'ta 501, 1920'de 501, 1366'da 494 px --
üç boyda da aynı, çünkü hem sütun hem yelpaze aynı iç kaptan türüyor.
470 px o ölçünün altında, nefes payıyla. Aşan ad İKİ SATIRA sarar;
açılış slaydının başlığı da zaten iki satır. */
max-width: min(100%, 470px);
}
.tv-p-cumle {
margin: 0;
font-size: 1.12rem; line-height: 1.58; /* hero `.th-lead` */
color: var(--tv-metin-soft);
/* SATIR GENİŞLİĞİ DE HERO'NUN (`.th-lead { max-width: 30ch }`).
520 px yazılmıştı ve kart yelpazesi hero'nun yerine taşınınca cümle
kartların altına giriyordu (ölçüldü: 13 temada 8'inde çakışma).
Hero'da çakışma yoktu çünkü onun cümlesi 30ch'te duruyor. */
max-width: 30ch;
}
.tv-p-cumle:empty { display: none; } /* sözlükte metin yoksa boşluk bırakma */
/* Masaüstünde blok metin sütununun altında, onunla aynı hizada başlar. */
.tv-panel:not(.tv-panel--hero) .th-price,
.tv-panel:not(.tv-panel--hero) .th-trust {
position: relative; z-index: 1; align-self: start;
}
.tv-panel:not(.tv-panel--hero) .th-trust { justify-content: flex-start; }
/* ÇİPLER TEK SATIR: panel artık geniş, sarmaya gerek yok. Sığmazsa kırpılmak
yerine küçülürler (metin taşmasın diye `min-width:0`). */
.tv-p-cipler { display: flex; flex-wrap: nowrap; gap: calc(8 * var(--tv-birim)); min-width: 0; }
.tv-cip { overflow: hidden; text-overflow: ellipsis; }
.tv-cip {
/* ÇİPLER DE ÖLÇEKTEN ÇIKTI: aynı satırda duran fiyat/güven yazıları zaten
sabit boyda (hero'nun `.th-price`/`.th-trust` kuralları); çipler
ölçeklenmeye devam etseydi tek satırda iki ayrı yazı ölçüsü olurdu. */
font-size: .78rem; line-height: 1;
padding: 6px 12px; border-radius: 999px;
border: 1px solid var(--tv-cip-cizgi); color: var(--tv-metin-soft);
background: rgba(255, 255, 255, .12); white-space: nowrap;
}
.tv-p-dugmeler {
display: flex; align-items: center; flex-wrap: wrap;
gap: calc(22 * var(--tv-birim)); margin-top: calc(6 * var(--tv-birim));
}
.tv-p-cta {
appearance: none; border: 0; cursor: pointer;
background: var(--tv-vurgu); color: var(--tv-dugme-metin);
/* YIĞIN VE YAZI BOYU SİTENİN `.btn` KURALINDAN (tf-sayfa.css:68):
'Inter', 0.95rem, ls .02em. Oswald tema paneline özgüydü ve iki slayt
arasında yazı karakteri değişiyordu -- mobilde 8 Eylül'de düzeltilmişti,
masaüstü açıkta kalmıştı.
YÜKSEKLİK / DOLGU / YARIÇAP burada YAZILMAZ: yukarıdaki
`.tv-panel--hero .btn-gold, ... , .tv-panel .tv-p-cta` kuralı veriyor. */
font-family: 'Inter', sans-serif; font-weight: 600;
font-size: .95rem; letter-spacing: .02em;
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
}
.tv-p-cta:hover { filter: brightness(1.06); }
.tv-p-alt {
appearance: none; background: none; border: 0; cursor: pointer; padding: 0;
color: var(--tv-metin-soft); font-size: calc(14 * var(--tv-birim));
text-decoration: underline; text-underline-offset: 3px;
}
/* ---- FİYAT + GÜVEN SATIRI: HERO'DAKİYLE AYNI, RENGİ TEMADAN ----
Kerem: "yerleri fontları her şeyi aynı kalacak, renkleri hariç."
Bu yüzden BURADA YALNIZ RENK yazılır. Yerleşim, tipografi, boşluk ve simge
ölçüleri hero'nun kurallarından geliyor (tf-light.css `.th-price`,
tf-sayfa.css `.th-trust`) ve kopyalanmadı -- kopyalasaydık iki yerde
ayrışabilirdi.
AÇIKLIK: rozet zemini `--tv-vurgu`, üstündeki yazı `--tv-dugme-metin` --
yani düğmeyle aynı çift. Koyu panelde açık, açık panelde koyu çıkar; her
temada okunur kalır ve ayrıca bir kural yazılmaz. */
/* ÖZGÜLLÜK BİLİNÇLİ, İKİ AYRI RAKİP VAR (ölçüldü, ikisi de kazanıyordu):
· `anasayfa-ritim.css` -> `#top p:not(...)` bir KİMLİK taşıyor (1,1,0) ve
`.th-price` bir ``; o yüzden bizim seçicimiz de `#top` ile başlıyor.
· `tf-koyu.css` -> `:root:not([data-tema="acik"]) .th-price-badge` rozeti
ALTIN yapıyor; kök seçicisi olduğu için ondan da yüksek durmak gerekiyor.
HERO'YA DOKUNULMUYOR: `:not(.tv-panel--hero)` -- açılış slaydının fiyat
satırı bugünkü rengiyle kalıyor (Kerem: "ana sliderda değişiklik yok"). */
/* HERO'NUN FİYAT SATIRI BUGÜNKÜ RENGİNİ KORUR. Eskiden bunu ritim katmanının
`#top p{ color:var(--muted) }` kuralı veriyordu; `.th-price` o listeden
çıkarılınca (tema panelleri kendi rengini taşısın diye) burada AÇIKÇA yazıldı.
Kerem: "ana sliderda değişiklik yok." */
.tv-panel--hero .th-price { color: var(--muted); }
#top .tv-panel:not(.tv-panel--hero) .th-price { color: var(--tv-metin); }
#top .tv-panel:not(.tv-panel--hero) .th-price .th-price-badge {
background: var(--tv-vurgu); color: var(--tv-dugme-metin);
}
#top .tv-panel:not(.tv-panel--hero) .th-price b { color: var(--tv-metin); }
#top .tv-panel:not(.tv-panel--hero) .th-trust { color: var(--tv-metin-soft); }
#top .tv-panel:not(.tv-panel--hero) .th-trust svg { color: var(--tv-vurgu); }
/* ---- SAĞ: üç kart (başrol ortada büyük, yanlar arkada eğik) ---- */
/* ---------------- KART ALANI VE KARTLAR: AÇILIŞ SLAYDININ KURALLARI ----------------
Kerem, 9 Eylül 2026: "sliderlardaki kartlar ana slayttaki kartların
boyutunda ve aynı yerde olmalı."
ÖLÇÜLDÜ (hero → tema, panele göre başrolün merkezi ve ölçüsü):
1440×900 362×518 @1041 → 367×524 @1055 ( -5 / -14 px)
1920×1080 367×525 @1281 → 460×657 @1438 (-93 / -157 px)
1366×768 344×491 @1002 → 299×426 @1053 (+45 / -51 px)
Sebep İKİ AYRI ÖLÇEK: hero kartını medya kutusunun YÜZDESİ ile
(%68 / %56), tema kartını `--tv-birim` ile (panel boyu / 600) çiziyordu.
İki ölçek yalnız TEK bir pencere boyunda çakışır.
ARTIK TEK ÖLÇÜ: kart alanı `.th-media`, kartların yuvası `.th-media-card` /
`.th-fan-card` -- hepsi tf-sayfa.css'teki HERO kuralları. Buradaki
kurallar yalnız tema panelinin kendi işlerini yapar:
· yuva bir ``, görsel onun içinde (iki iş iki öğede: yerleştirme
yuvada, saydam pay telafisi görselde -- birbirinin `transform`ını ezmezler)
· gölge ve köşe yarıçapı tema kartına özgü
MOCKUP'IN KENDİ YELPAZESİ (310/230, -3/-12/+11) BİLİNÇLİ OLARAK BIRAKILDI:
talimat ölçütü mockup değil AÇILIŞ SLAYDI ("sanki ordaki kart değişmiş
hissi"); ikisi aynı anda doğru olamaz. */
.tv-p-kartlar { position: relative; min-width: 0; }
/* YUVA: ölçüsünü ve yerini hero veriyor; burada yalnız blok yapılıyor
(hero'da bu sınıflar `![]()
` üzerinde ve `![]()
` zaten blok). */
.tv-kart-yuva { display: block; }
.tv-kart {
--tv-k-olcek: 1; /* 1 / içerik genişliği */
--tv-k-dx: 0%; /* içerik merkezini kutu merkezine taşıyan kaydırma */
--tv-k-dy: 0%;
display: block; width: 100%; height: 100%;
object-fit: contain;
border-radius: 10px;
filter: drop-shadow(0 18px 34px rgba(0, 0, 0, .32));
/* SAYDAM PAY TELAFİSİ (bkz. `kartTelafiStili`, tf-yeni-temalar.js):
çerçeve dosyalarının çevresindeki boş piksel %0 ile %5,7 arasında
değişiyor, yani aynı yuva farklı büyüklükte kart çizerdi. */
transform: scale(var(--tv-k-olcek)) translate(var(--tv-k-dx), var(--tv-k-dy));
}
/* ---- Sayaç · noktalar · ilerleme · oklar ---- */
/* SAYAÇ KROM ŞERİDİNİN BİR PARÇASI (G-4): sağ üstte ayrı duruyordu, artık
noktalar/ilerleme ile aynı satırda, okların hemen solunda. Mutlak konum
YOK -- şeridin akışında durunca hizası kendiliğinden doğru. */
.tv-sayac {
margin: 0; flex: 0 0 auto;
font-family: 'Oswald', sans-serif; font-size: calc(14 * var(--tv-birim));
letter-spacing: .06em; color: var(--tv-metin-soft); white-space: nowrap;
}
.tv-sayac b { color: var(--tv-metin); font-weight: 700; }
/* ---- KROM: noktalar + ilerleme + oklar, AKTİF PANELİN İÇİNDE ----
Onaylı mockup'ta bu şerit panelin içinde (`.chrome`, left:64 right:40
bottom:30 · 1280x600 panelde %5 / %3,1 / %5) ve TEMANIN paletini kullanıyor.
Eskiden bölümün krem zemininde, sabit altın renkte duruyordu; koyu panelin
altında ayrı bir katman gibi okunuyordu ve panel o yeri kaybediyordu.
Renkler BURADA SABİT YAZILMAZ: hepsi panelin kendi değişkenlerinden gelir,
bu yüzden krom her temada kendiliğinden doğru renge döner. */
.tv-krom {
/* Panelin yatay dolgusuyla AYNI hizada: metin ve krom tek çizgide başlar. */
position: absolute; left: var(--tv-ic-pay); right: var(--tv-ic-pay);
bottom: calc(30 * var(--tv-birim)); z-index: 3;
display: flex; align-items: center; gap: calc(28 * var(--tv-birim));
}
.tv-noktalar { display: flex; align-items: center; gap: calc(7 * var(--tv-birim)); }
.tv-nokta {
appearance: none; border: 0; padding: 0; cursor: pointer;
width: calc(8 * var(--tv-birim)); height: calc(8 * var(--tv-birim)); border-radius: 999px;
background: var(--tv-metin); opacity: .35;
transition: width .3s ease, opacity .3s ease, background .3s ease;
}
.tv-nokta[aria-current="true"] { width: calc(34 * var(--tv-birim)); opacity: 1; background: var(--tv-vurgu); }
.tv-ilerleme {
flex: 1; height: 2px; border-radius: 2px; overflow: hidden;
background: color-mix(in srgb, var(--tv-metin) 22%, transparent);
}
.tv-ilerleme i { display: block; height: 100%; width: 0; background: var(--tv-vurgu); }
.tv-oklar { display: flex; gap: calc(10 * var(--tv-birim)); }
.tv-ok {
appearance: none; cursor: pointer; border-radius: 50%;
width: calc(42 * var(--tv-birim)); height: calc(42 * var(--tv-birim));
border: 1.5px solid color-mix(in srgb, var(--tv-metin) 40%, transparent);
background: transparent; color: var(--tv-metin);
display: grid; place-items: center;
font: 400 calc(26 * var(--tv-birim))/1 Georgia, 'Times New Roman', serif;
}
.tv-ok[data-yon="1"] {
background: var(--tv-vurgu); color: var(--tv-dugme-metin); border-color: var(--tv-vurgu);
}
.tv-ok:hover { filter: brightness(1.08); }
/* ---- SEKME ŞERİDİ: panelin ALTINDA, tema adlarıyla ----
Mockup'ın `.tabs`ı. Bölümün krem zemininde durur, o yüzden rengi TEMAYLA
DEĞİŞMEZ (mockup da sabit veriyor: #F3EAD7 / aktif #3B2C35 + #F4B860).
Noktalar "kaçıncıdayım", sekmeler "nereye gidebilirim" sorusunu yanıtlar. */
/* ŞERİT PANELLE AYNI HİZADA: `.tv-sekmeler` bölüm kabının (1240) içinde
kalsaydı panel 1600'e çıktığında şerit panelden dar durur, iki ayrı bileşen
gibi okunurdu (1920 px'de ölçüldü: panel 145-1745, şerit 325-1565).
Ray gibi full-bleed olup aynı `--tv-en` payıyla içeri çekilir. */
.tv-sekmeler {
display: flex; gap: 6px; margin-top: 18px;
width: 100vw; margin-left: calc(50% - 50vw);
padding-inline: var(--tv-ic-pay);
}
.tv-sekme {
appearance: none; cursor: pointer; flex: 1; min-width: 0;
text-align: center; font-size: .69rem; line-height: 1.2; padding: 7px 4px;
border-radius: 8px; border: 1px solid transparent;
background: #F3EAD7; color: #86707C;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
transition: background .2s ease, color .2s ease;
}
.tv-sekme:hover { color: #3B2C35; }
.tv-sekme[aria-current="true"] { background: #3B2C35; color: #F4B860; border-color: #3B2C35; }
/* =========================== TEMA TASARIMLARI ===============================
PALET ONAYLI MOCKUP'TAN ALINDI, ölçülmedi/tahmin edilmedi: mockup her paneli
`--bg/--ink/--muted/--acc/--accInk` ile taşıyor (tema-slider-mockup.html) ve
buradaki değerler o satırların birebir karşılığı.
Bir tema burada yoksa yukarıdaki nötr varsayılan geçerlidir.
========================================================================== */
.tv-panel[data-tema="futbolcu"] { --tv-zemin:radial-gradient(60% 55% at 15% 0%, rgba(255,255,255,.16), transparent 60%), linear-gradient(180deg,#0F2E1F 0%,#07190F 100%); --tv-metin:#F3E8DC; --tv-metin-soft:#B9CFC2; --tv-vurgu:#D9DEE2; --tv-dugme-metin:#0B1E14; --tv-cip-cizgi:color-mix(in srgb, #F3E8DC 28%, transparent); }
.tv-panel[data-tema="gezi"] { --tv-zemin:linear-gradient(180deg,#F6EEDF 0%,#EFE3CC 100%); --tv-metin:#3B2C35; --tv-metin-soft:#86707C; --tv-vurgu:#C97B3C; --tv-dugme-metin:#FFF9F0; --tv-cip-cizgi:color-mix(in srgb, #3B2C35 28%, transparent); }
.tv-panel[data-tema="bebek"] { --tv-zemin:linear-gradient(180deg,#FFF1F5 0%,#E7F1FF 100%); --tv-metin:#3B2C35; --tv-metin-soft:#86707C; --tv-vurgu:#F7B2C4; --tv-dugme-metin:#3B2C35; --tv-cip-cizgi:color-mix(in srgb, #3B2C35 28%, transparent); }
.tv-panel[data-tema="gamer"] { --tv-zemin:linear-gradient(180deg,#0D0B1A 0%,#07070F 100%); --tv-metin:#EAF6FF; --tv-metin-soft:#8FA3B8; --tv-vurgu:#00E5FF; --tv-dugme-metin:#06121A; --tv-cip-cizgi:color-mix(in srgb, #EAF6FF 28%, transparent); }
.tv-panel[data-tema="renk"] { --tv-zemin:linear-gradient(180deg,#2A2530 0%,#1B171F 100%); --tv-metin:#FFF9F0; --tv-metin-soft:#C9BEC5; --tv-vurgu:#F4B860; --tv-dugme-metin:#241C22; --tv-cip-cizgi:color-mix(in srgb, #FFF9F0 28%, transparent); }
.tv-panel[data-tema="dogum-gunu"] { --tv-zemin:linear-gradient(180deg,#FFF6F9 0%,#FFF1E8 100%); --tv-metin:#3B2C35; --tv-metin-soft:#86707C; --tv-vurgu:#E96A4B; --tv-dugme-metin:#FFF9F0; --tv-cip-cizgi:color-mix(in srgb, #3B2C35 28%, transparent); }
.tv-panel[data-tema="insta"] { --tv-zemin:radial-gradient(70% 60% at 80% 20%, rgba(212,175,55,.18), transparent 60%), linear-gradient(180deg,#1E1418 0%,#120B0E 100%); --tv-metin:#F6EEE4; --tv-metin-soft:#B39A8E; --tv-vurgu:#D4AF37; --tv-dugme-metin:#1A1216; --tv-cip-cizgi:color-mix(in srgb, #F6EEE4 28%, transparent); }
.tv-panel[data-tema="sevgili"] { --tv-zemin:linear-gradient(180deg,#FBEDEE 0%,#F5D9DD 100%); --tv-metin:#3B2C35; --tv-metin-soft:#86707C; --tv-vurgu:#C43B4E; --tv-dugme-metin:#FFF9F0; --tv-cip-cizgi:color-mix(in srgb, #3B2C35 28%, transparent); }
.tv-panel[data-tema="spor"] { --tv-zemin:linear-gradient(180deg,#0E1B2B 0%,#0A1220 100%); --tv-metin:#F3E8DC; --tv-metin-soft:#A9B4C4; --tv-vurgu:#F2C230; --tv-dugme-metin:#1A1408; --tv-cip-cizgi:color-mix(in srgb, #F3E8DC 28%, transparent); }
.tv-panel[data-tema="super-kahramanlar"] { --tv-zemin:linear-gradient(180deg,#2F6BD8 0%,#1B2A5B 100%); --tv-metin:#FFFFFF; --tv-metin-soft:#CFE0FF; --tv-vurgu:#FFD400; --tv-dugme-metin:#111; --tv-cip-cizgi:color-mix(in srgb, #FFFFFF 28%, transparent); }
.tv-panel[data-tema="cadilar-bayrami"] { --tv-zemin:linear-gradient(180deg,#1B0F2E 0%,#0E0818 100%); --tv-metin:#F6EEFF; --tv-metin-soft:#B8A6D2; --tv-vurgu:#F28C28; --tv-dugme-metin:#1B0F2E; --tv-cip-cizgi:color-mix(in srgb, #F6EEFF 28%, transparent); }
.tv-panel[data-tema="yilbasi"] { --tv-zemin:linear-gradient(180deg,#8A1B2C 0%,#5E1020 100%); --tv-metin:#FFF7EA; --tv-metin-soft:#F1C9CF; --tv-vurgu:#2E8B57; --tv-dugme-metin:#FFFFFF; --tv-cip-cizgi:color-mix(in srgb, #FFF7EA 28%, transparent); }
.tv-panel[data-tema="dizi-film"] { --tv-zemin:linear-gradient(180deg,#141216 0%,#0A0A0C 100%); --tv-metin:#F4F0E6; --tv-metin-soft:#A9A29A; --tv-vurgu:#F4B860; --tv-dugme-metin:#241C22; --tv-cip-cizgi:color-mix(in srgb, #F4F0E6 28%, transparent); }
/* G-2a (13 Eylül 2026) — yeni-temalar-mockup.html: N Teknik Çizim, O Pati İzi. */
.tv-panel[data-tema="meslekler"] { --tv-zemin:linear-gradient(180deg,#1E3F63 0%,#152C47 100%); --tv-metin:#EEF3F8; --tv-metin-soft:#A9BBCD; --tv-vurgu:#F4B860; --tv-dugme-metin:#152C47; --tv-cip-cizgi:color-mix(in srgb, #EEF3F8 28%, transparent); }
.tv-panel[data-tema="evcil-hayvanlar"] { --tv-zemin:linear-gradient(180deg,#FBF3E6 0%,#F3E4CF 100%); --tv-metin:#3B2C35; --tv-metin-soft:#86707C; --tv-vurgu:#C4784A; --tv-dugme-metin:#FFF9F0; --tv-cip-cizgi:color-mix(in srgb, #3B2C35 28%, transparent); }
/* SÜPER KAHRAMANLAR — çizgi roman dili (mockup: kalın kontur, keskin köşe,
sert gölge). Tek "kural dışı" panel bu. */
.tv-panel[data-tema="super-kahramanlar"] { --tv-panel-yaricap: 8px; }
.tv-panel[data-tema="super-kahramanlar"] .tv-p-baslik { text-shadow: 4px 4px 0 #111; }
.tv-panel[data-tema="super-kahramanlar"] .tv-p-cta {
border-radius: 6px; border: 3px solid #111; box-shadow: 6px 6px 0 #111; font-weight: 700;
}
.tv-panel[data-tema="super-kahramanlar"] .tv-cip {
background: #fff; color: #111; border: 2px solid #111; border-radius: 6px; font-weight: 600;
}
.tv-panel[data-tema="super-kahramanlar"] .tv-kart { filter: drop-shadow(8px 8px 0 #111); }
.tv-panel[data-tema="super-kahramanlar"] .tv-p-alt { color: #fff; }
/* Krom da çizgi roman dilinde: keskin köşe, kalın kontur (mockup). */
.tv-panel[data-tema="super-kahramanlar"] .tv-ok {
border-radius: 6px; border: 2.5px solid #111; background: #fff; color: #111;
}
.tv-panel[data-tema="super-kahramanlar"] .tv-ok[data-yon="1"] { background: #FFD400; }
.tv-panel[data-tema="super-kahramanlar"] .tv-nokta { border-radius: 2px; }
/* ---- MOBİL (≤ 640 px): dikey banner, tek kart, ok yok ---- */
@media (max-width: 640px) {
.tv-panel {
/* YÜKSEKLİK GERİ İÇERİKTEN. Masaüstü kuralı `height: min(100vw*660/1280,
...)` idi ve mobilde de geçerliydi: 390 px'de panel 201 px'e iniyor,
hero'nun kartı panelin 261 px YUKARISINA taşıyor, CTA bölümün dışında
kalıyordu (ölçüldü). Dikey düzende panelin boyunu içeriği belirler. */
height: auto;
aspect-ratio: auto;
/* ÖLÇÜ KABI KAPALI: `container-type: size` boyutu içerikten bağımsız sayar
ve içeriği bu kez de sıfıra indirirdi. Birim GÖRÜNÜM GENİŞLİĞİNE bağlanır:
mockup'ın 1280 px'lik paneli mobilde ekranın kendisidir, o yüzden
`100vw / 1280`. 390 px'de birim 0.305 -> başlık 60*0.305 = 18 px olurdu;
dikey düzende bu fazla küçük, o yüzden metin ölçüleri aşağıda AYRICA
yazılır. Birim yalnız boşluk/çip/düğme gibi ikincil ölçüleri sürer. */
container-type: normal;
--tv-birim: calc(100vw / 640);
/* IZGARA DEĞİL DİKEY AKIŞ (G-8). Izgarada üç satır vardı ve panelin boyu
EN UZUN slayda (hero) göre belirlendiği için tema slaydında artan yer
satırların ARASINA dağılıyordu: metin bloğunun altında 60 px ölü boşluk
kalıyor, blok aşağı itiliyordu (ölçüldü: metin 393-599, krom 659).
Dikey akışta içerik yukarıdan dizilir; artan yeri `.tv-krom`un
`margin-top: auto`su alır, yani boşluk metnin altına değil KROMUN
üstüne düşer. */
display: flex; flex-direction: column;
/* Masaüstü kuralı `align-items: center`; dikey akışta o, çocukları
içeriklerine göre daraltıyor. Kart alanı `position:relative` ve çocukları
mutlak olduğu için GENİŞLİĞİ SIFIRA iniyordu (ölçüldü: 343 -> 0, kartlar
yanlış yere düşüyordu), krom da 343 yerine 226 kalıyordu. */
align-items: stretch;
gap: calc(14 * var(--tv-birim));
padding: 16px 6vw 18px;
}
/* DİKEY DÜZEN — KART ÜSTTE, METİN ALTTA, KROM EN ALTTA.
`order` ÜÇÜ İÇİN DE YAZILIR: krom'a order verilmediğinde varsayılan 0
kalıyor ve ızgarada BİRİNCİ sıraya geçiyordu -- 390 px'de noktalar kartın
üstünde çıkıyordu (ekran görüntüsüyle ölçüldü). */
.tv-p-kartlar { order: 1; flex: 0 0 auto; }
.tv-p-metin { order: 2; flex: 0 0 auto; }
/* KROM METNİN HEMEN ALTINDA (G-9, Kerem: "slider kısmı mobilde yukarı
taşınsın · o slider kısmı ilk açılışta gözüksün"). Önce `margin-top: auto`
ile panelin en altına yapıştırılmıştı; panel EN UZUN slayda (hero) göre
boylandığı için krom metinden ~160 px aşağıda, katlanmanın dibinde
kalıyordu. Artan yer artık kromun ALTINA düşüyor. */
/* SLİDER ARTIK DÜĞMENİN ALTINDA, KOPYA BLOĞUNUN İÇİNDE (9 Eylül 2026).
Kerem: "slider bu temayı tasarla butonunun altında yer alacak ve tam
konumu şu anki fiyat etiketinin olduğu satır olacak."
Düğümü motor taşıyor (`kromuYerlestir`); burada yalnız ölçüsü var.
`order` KALKTI: artık panelin değil kopya bloğunun çocuğu, sırasını
DOM veriyor. */
.tv-krom { position: static; margin-top: 2px; gap: 14px; }
/* PLANI KROM TUTAR: ilk ekranın son satırı artık slider. Fiyat ve güven
onun ALTINA iner (Kerem: "fiyat etiketi yazısı ve altındaki yazılar
aşağı kayacak"). Boşluk kromun ÜSTÜNDE toplanır; iki slaytta da aynı
yere oturması bu sabitlemeden gelir. */
.tv-panel .th-copy > .tv-krom { margin-top: auto; }
/* KART ALANI: yükseklikten sürülür (çerçeve oranı 0.700), görsel ASLA
esnemez. 84vw -> 390 px'de 328 px yükseklik = 230 px kart genişliği. */
/* ---- TEMA SLAYDI = AÇILIŞ SLAYDININ DÜZENİ ----
Kerem: "mobilde açılıştaki düzen şeklinde sliderlar gözükmeli · kartlar
açılıştaki kartların boyutu · bir sonraki slayta geçildiğini çok anlamadan
aynı düzende kartlar ve yazılar değişmeli."
Bu yüzden tema slaydı hero'nun mobil yerleşimini BİREBİR taklit eder:
üç kart yelpazesi üstte, ortalanmış metin altta. Değişen tek şey içerik
(kartlar, başlık, cümle) ve panelin kendi rengi.
KART GEOMETRİSİ ARTIK KOPYALANMIYOR, PAYLAŞILIYOR: tema paneli
hero'nun `.th-media` / `.th-media-card` / `.th-fan-*` sınıflarının
KENDİSİNİ taşıyor (9 Eylül 2026). Önce buraya %68/%56 ve dönme
açıları elle yazılıyordu; iki yerde duran bir ölçü er geç ayrışır
ve masaüstünde tam bu oldu. */
/* KART ALANI VE KARTLAR MOBİLDE DE HERO'NUN KURALLARINDAN.
Buradaki blok, kartları `--tv-mobil-kart` ile ayrı bir ölçekten
çiziyordu (kap yüksekliği, `.tv-kart--basrol` genişliği, yan kartların
`56/68` oranı ve dönmeleri). Hepsi hero'nun `.th-media` / `.th-media-card` /
`.th-fan-*` kurallarının KOPYASIYDI; artık tema paneli o sınıfların
kendisini taşıdığı için kopya kaldırıldı.
`--tv-mobil-kart` değişkeni de gereksiz kaldı. */
/* METİN HERO GİBİ ORTALI: hero'nun `.th-copy`si mobilde `align-items:center;
text-align:center`. Tema paneli solda hizalı kalsaydı slayt değişiminde
bütün metin bloğu yana zıplardı. */
.tv-p-metin { text-align: center; align-items: center; }
.tv-p-cumle { margin-inline: auto; }
.tv-p-cipler { justify-content: center; }
/* Tek düğme kalınca boşluğa gelip ORTALANIR (mobil). Masaüstünde metin
bloğu sola hizalı -- mockup'ın kendi düzeni, oraya dokunulmadı. */
.tv-p-dugmeler { justify-content: center; }
/* METİN ÖLÇÜLERİ MOBİLDE AYRI: masaüstündeki mockup oranları (60 px başlık)
dikey düzende ekranı yiyor. Değerler görünüm genişliğine bağlı ki 360 ile
430 arasında da orantılı kalsın. */
.tv-panel .tv-p-eyebrow { font-size: clamp(.6rem, 2.9vw, .72rem); letter-spacing: .16em; }
.tv-p-baslik { font-size: clamp(1.45rem, 7vw, 1.9rem); }
.tv-p-cumle { font-size: clamp(.85rem, 3.7vw, 1rem); max-width: none; }
/* DÜĞME AÇILIŞ SLAYDININKİYLE AYNI (Kerem: "butonların içindeki yazı fontu
ilk slide'daki ile aynı olup buton boyutu aynı olmalı yükseklik bakımından").
ÖLÇÜLDÜ: hero düğmesi Inter 13.76 px / 600 / 50 px yüksek / r10; tema
düğmesi Oswald 14.04 px / 45 px idi. Değerler hero'nun kendi kurallarından
alındı (`.tv-panel--hero .btn-gold` 50/r10/600 + mobil `.86rem`), yeniden
ölçülmedi. Font yığını da sitenin `.btn` yığını -- Oswald tema paneline
özgüydü ve iki slayt arasında yazı karakteri değişiyordu. */
.tv-p-cta {
/* YIĞIN SİTENİN `.btn` YIĞINININ AYNISI (tf-sayfa.css: `'Inter', sans-serif`).
Önce 'Poppins','Inter' yazılmıştı; hero düğmesi Inter'e düşerken tema
düğmesi Poppins'e düşüyordu ve iki slayt arasında yazı karakteri
değişiyordu (nöbetçi hesaplanan aileyi karşılaştırıp yakaladı). */
font-family: 'Inter', sans-serif;
font-size: .86rem; font-weight: 600; letter-spacing: 0;
height: 50px; padding: 0 14px; border-radius: 10px;
}
.tv-p-alt { font-size: clamp(.75rem, 3.4vw, .85rem); }
.tv-sayac { font-size: clamp(.68rem, 3vw, .78rem); }
.tv-nokta { width: 7px; height: 7px; }
.tv-nokta[aria-current="true"] { width: 26px; }
/* ÇİPLER TEK SATIRDA (Kerem: "hepsi yan yana kalmalı, uzun olanlardan ötürü
3. etiket alta inmemeli"). Sarmak serbest bırakılınca 13 temanın 6'sında
üçüncü çip alt satıra düşüyordu (ölçüldü, 390 px: sevgili 410 px yer
istiyor, kap 343).
ÖLÇÜ EN KÖTÜ DURUMDAN SEÇİLDİ, tahminle değil: en uzun üçlü `sevgili`
("11 çerçeve · Bilet · polaroid · yıldız haritası · Kişisel yazı alanları")
ve dar telefon 360 px. O ikisi sığdığında hepsi sığar; nöbetçi de 13 temayı
tek tek ölçüyor (23. madde) -- yarın daha uzun bir çip yazılırsa KIRMIZI
döner, sessizce sarmaz.
KIRPMA YOK: `overflow: visible`. Kırpma bir kez denenmişti ve "3 çer…"
çıkıyordu; taşma olursa görünsün ve kapı düşsün. */
/* Mobilde hero gibi ortalı. */
.tv-panel:not(.tv-panel--hero) .th-trust { justify-content: center; }
.tv-panel:not(.tv-panel--hero) .th-price { align-self: center; }
.tv-p-cipler { flex-wrap: nowrap; gap: 4px; justify-content: center; }
.tv-cip {
flex: 0 0 auto; overflow: visible; text-overflow: clip; white-space: nowrap;
font-size: clamp(.55rem, 2.6vw, .68rem); padding: 5px 7px;
}
/* OKLAR MOBİLDE DE GÖRÜNÜR (Kerem, 9 Eylül 2026: "bu slider'da ok
işaretleri de olmalı ki kullanıcı sağa sola kaydırabileceğini anlasın").
Önce `display: none` idi ve gerekçesi "parmakla kaydırılır"dı -- ama
kaydırılabileceğini SÖYLEYEN bir şey kalmıyordu; jest görünmez.
Dokunma hedefi 40 px: parmakla vurulabilir olsun. */
.tv-oklar { display: flex; gap: 10px; }
.tv-ok { width: 40px; height: 40px; }
/* HERO SLAYDI KENDİ AKIŞINDA: `.th-inner` zaten dikey (flex column) ve
hero'nun kendi ölçüleri var. Panelin ızgara kuralları ona uygulanmaz --
`.tv-panel--hero` `display:block`. Alt pay kroma yer açar. */
/* HERO'NUN YAN DOLGUSU 0 KALIR. Kopya sütunu tema panelinden 14 px
geniş (ölçüldü, 430 px: 392 · 378) ve bir ara `padding: 0 6vw`
denendi: sütun genişliği DEĞİŞMEDİ ama üç kart 8 px sağa kaydı ve
"kartlar açılış slaydıyla aynı yerde" kuralı düştü. Genişlik farkı
zaten fiyat düzlemini bozmuyor -- onu bozan güven satırının SARMA
davranışıydı ve yeri ayrılarak çözüldü (aşağıdaki `min-height`). */
.tv-panel--hero { padding: 0; height: auto; }
/* `.th-inner`ın masaüstündeki `height: 100%`i mobilde KROMU DIŞARI İTİYORDU:
iç blok panelin tamamını kaplıyor, kardeşi olan krom panelin altına düşüyor
ve `overflow: hidden` onu kırpıyordu (ölçüldü: panel 69-719, krom y=723 --
ekranda hiç görünmüyordu). Dikey düzende yükseklik içerikten gelmeli. */
.tv-panel--hero .th-inner { height: auto; padding-block: 14px 4px; gap: 8px; }
/* HERO KROMUNUN KENDİ PAYI KALKTI (9 Eylül 2026). `margin: 4px 6vw 12px`
idi; krom kopya bloğunun içine taşınınca o pay iki slayt arasında
8 px'lik bir düzlem farkı doğuruyordu (ölçüldü: hero 712 · tema 720).
Yatay payı da kopya sütunu veriyor artık. */
.tv-panel--hero .tv-krom { margin: 0; }
/* HERO MOBİLDE DARALTILDI. Paneller ÜST ÜSTE yığılı ve ızgara satırının boyu
EN UZUN panele göre belirleniyor; hero en uzunuydu ve 12 tema paneline de
onun boyunu dayatıyordu (ölçüldü: 390 px'de panel 875, bölüm 962 -- görünüm
844). Hero'yu kısaltmak hepsini birden kısaltır.
Ölçüler yalnız MOBİLDE dar; masaüstünde hero'ya dokunulmadı. */
/* İKİ PANELE DE: tema kartları artık hero'nun yuvalarını kullanıyor, yani
mobil daraltılması da ortak olmalı. Önce yalnız hero'ya yazılıydı ve
tema paneli masaüstü genişliğine düşüyordu (ölçüldü, 390 px:
hero kartı 178, tema kartı 196 px). */
/* KART BÜYÜDÜ (60vw/240 -> 76vw/300). Fiyat satırı ilk ekranın dibine
sabitlenince açılış slaydında düğmelerle fiyat arasında ~340 px'lik
bir BOŞLUK kalıyordu (çekimle görüldü): içerik ekranı doldurmuyordu.
O boşluk karta verildi. Fiyatın düzlemi bundan ETKİLENMEZ: metin
sütununun asgari yüksekliği zaten kart boyunu çıkarıyor. */
.tv-panel { --tv-mobil-medya: min(76vw, 300px); }
.tv-panel .th-media { width: var(--tv-mobil-medya); margin: 0 auto; }
.tv-panel--hero .th-title { font-size: clamp(1.8rem, 8vw, 2.2rem); }
.tv-panel--hero .th-lead { font-size: clamp(.82rem, 3.5vw, .92rem); line-height: 1.42; }
/* ============ FİYAT SATIRI İKİ SLAYTTA DA AYNI DÜZLEMDE ============
Kerem, 9 Eylül 2026: "ana slayttaki fiyat etiketi ve yanında yazan kısmın
konumu, diğer tema slaytlarındakiler ile aynı düzlemde olmalı."
ÖLÇÜLDÜ (390×844, panel içi):
hero başlık 66 px (2 satır) · cümle 97 px (4 satır) · fiyat 525
tema başlık 29 px (1 satır) · cümle 46 px (2 satır) + çipler · fiyat 481
Fark BOŞLUKTAN DEĞİL İÇERİK UZUNLUĞUNDAN doğuyor (44 px): hero'nun
başlığı ve cümlesi daha uzun. Boşlukları kısmak bunu çözmez -- metin
bir gün bir satır daha uzasa fark yeniden açılır.
ÇÖZÜM: fiyat + güven grubu metin sütununun DİBİNE sabitlenir
(`margin-top: auto`) ve sütuna ORTAK bir asgari yükseklik verilir.
Üstteki metin ne kadar uzun olursa olsun grup aynı yere oturur.
ASGARİ YÜKSEKLİK GÖRÜNÜM BOYUNDAN **VE KART BOYUNDAN** TÜRER.
İlk sürüm yalnız `100svh - 252px` yazıyordu ve üç telefonda tutmadı
(ölçüldü: 360'ta fiyat 44 px yukarıda, 390'da 26 px, 430'da 6 px
AŞAĞIDA -- yani katlanmanın altında kalıyordu). Sebep: metin sütununun
tepesi sabit değil, KART BOYUYLA birlikte kayıyor
(`--tv-mobil-medya`, oranı 0,97).
Dökümü: görünüm boyu − kart alanının boyu − (başlık + panel dolgusu +
güven satırı + payı + nefes payı).
`max()` çok kısa telefonlarda negatife düşmeyi engeller. */
.tv-panel .th-copy {
/* NEFES PAYI 26 -> 38 px: 26'da 430 px genişlikte fiyat satırının altı
görünümün 1 px üstünde kalıyordu (ölçüldü: 931 / 932). Tarayıcı
çubuğu bir piksel oynasa satır kırpılırdı. */
/* AYRILAN PAY, KROM ALTA İNENİ KAPSAYACAK ŞEKİLDE BÜYÜDÜ (9 Eylül 2026).
Önce satırın dibine FİYAT oturuyordu ve altında yalnız güven satırı
kalıyordu (85 px ayrılıyordu). Şimdi dibe SLIDER oturuyor; altında
fiyat (14+24) ve güven (40+45) var -> 74 px daha ayrılmalı.
Ölçüldü: krom 638 -> 712 panel içi, yani fiyatın ESKİ satırı. */
min-height: max(320px, calc(100svh - 0.97 * var(--tv-mobil-medya) + 36px));
}
/* ARTAN YER FİYAT SATIRININ ÜSTÜNDE TOPLANIR.
`justify-content: space-between` denendi -- artan yeri bütün satır
aralarına dağıtıyor ve daha havadar duruyor; AMA iki panelin satır
SAYISI farklı (tema slaydında bir de çip satırı var), o yüzden dağıtım
da farklı çıkıyor ve fiyat düzlemi 360 px'de 6 px kayıyordu (ölçüldü).
Talimatın ölçütü "aynı düzlem" olduğu için kesinlik seçildi: `auto`
boşluğun TAMAMINI fiyatın üstüne koyar ve iki panelde de aynı yeri verir
(ölçüldü: fark 0 / 1 / 2 px). Boşluğun büyük kısmı ayrıca kart
büyütülerek kompozisyona verildi. */
/* FIYAT ARTIK DİBE SABİTLENMİYOR: o işi yukarıdaki `.th-copy > .tv-krom`
yapıyor. Fiyat kromun hemen ardından gelir ve katlanmanın ALTINDA kalır. */
.tv-panel .th-price { margin-top: 14px; }
/* GÜVEN SATIRI KATLANMANIN ALTINA: Kerem, "bunun altında kalan kısım ve
slider ilk açılışta gözükmeyecek şekilde bu kısmın altında olmalı."
Fiyat satırı ilk ekranın son satırı; bu pay katlanma çizgisini fiyat ile
güven satırının ARASINA düşürür. */
/* GÜVEN SATIRININ YERİ AYRILIR (min-height). Fiyat + güven grubu sütunun
dibine sabitlendiği için grubun YÜKSEKLİĞİ fiyat satırının düzlemini
belirliyor. Ölçüldü (430 px): güven satırı hero'da TEK satır (18 px),
tema panelinde İKİ satır (45 px) sarıyordu -- aradaki 28 px doğrudan
fiyat satırına düzlem farkı olarak yansıyordu.
İki satırlık yer baştan ayrılınca grup yüksekliği sabitlenir; satır
tek satıra sığsa da altta boş kalan yer KATLANMANIN ALTINDA olduğu için
görünmez. Dolayısıyla ölçüt sarma davranışına bağlı kalmaz. */
.tv-panel .th-trust { margin-top: 40px; min-height: 45px; }
/* FİYAT VE GÜVEN SATIRI HER SLAYTTA AYNI: ÖLÇÜ ESKİ ANA SLAYTINKİ.
Kerem: "eski ana slider'daki gibi diğer temalar olmalıydı."
G-11'de ters yöne gidilmişti -- hero, tema slaydının büyük ölçüsüne
çıkarılmıştı (12,48/11,52 -> 15,2/13,44 px). Doğru yön tersi: hero'nun
KENDİ mobil ölçüsü referans, tema slaytları ona iner.
Kural artık `.tv-panel` üzerinde, yani HER slaytta aynı. */
.tv-panel .th-price { font-size: .78rem; }
.tv-panel .th-trust { font-size: .72rem; gap: 8px 12px; }
/* İKİ CTA TEK SATIRDA: 360 px'de sarıp ikinci satıra geçiyor ve bölümü tam
62 px uzatıyordu -- ilk ekranın altını aşan miktar da buydu (ölçüldü:
360x780'de şerit 814'te, görünüm 780). Dolgu ve boşluk daraltıldı. */
.tv-panel--hero .th-cta { flex-wrap: nowrap; gap: 8px; }
.tv-panel--hero .th-cta .btn { padding-inline: 14px; font-size: .86rem; white-space: nowrap; }
/* TEMA SEKME ŞERİDİ MOBİLDE YOK (G-9, Kerem: "sadece mobilde onun altındaki
tema butonları bölümü kalksın"). Masaüstünde aynen duruyor.
GEZİNME KAYBOLMUYOR: noktalar kromun içinde, parmakla kaydırma da çalışıyor
-- şerit "nereye gidebilirim"i söyleyen İKİNCİ yoldu, tek yol değil.
`display: none` bilinçli: `visibility: hidden` yeri kaplamayı sürdürür ve
bölüm boşuna 41 px uzun kalırdı. */
.tv-sekmeler { display: none; }
#top.tv { padding-block: 0 20px; }
}