/* ==========================================================================
TURKCHEM v2 — düzeltme listesi uygulaması
tc.css'in ÜSTÜNE biner. tc.css'e yazma erişimi olmadığı için bu blok
tc-header şablonuna gömülüdür; kalıcı çözüm bunu tc.css'e taşımaktır.
Sıra: A (boş alanlar) → C (tasarım sistemi) → erişilebilirlik.
========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700;800&display=swap');
/* ── C4 · Renk paleti — tek vurgu ───────────────────────────────────────── */
:root{
--ink:#10161C; --paper:#FFFFFF; --paper-2:#F2F4F6; --card:#FFFFFF;
--line:#D8DEE4; --line-2:#C3CBD3;
--ink-2:#414A54; --muted:#6B757F;
--accent:#0B5D3B; --accent-hi:#C8F02E;
--brand:var(--accent); --brand-2:#084029; --brand-wash:#E8F2ED;
--up:#12805C; --down:#B3261E; --flat:#7A858F;
/* Bölüm başına ayrı vurgu rengi hiyerarşiyi bozuyordu (C4) — hepsi tek
vurguya indirildi. Token'lar duruyor ki accent_class kullanan markup
kırılmasın. */
--teal:var(--accent); --amber:var(--accent); --purple:var(--accent);
--green:var(--accent); --pink:var(--accent); --blue:var(--accent);
/* ── C2 · Tipografi rolleri ─────────────────────────────────────────── */
--disp:'Archivo','Libre Franklin',system-ui,sans-serif;
--ui:'Archivo','Libre Franklin',system-ui,sans-serif;
--read:'Source Serif 4',Georgia,serif;
--mono:'IBM Plex Mono',ui-monospace,monospace;
--fs-display:2.75rem; --lh-display:1.1;
--fs-h1:2rem; --lh-h1:1.15;
--fs-h2:1.5rem; --lh-h2:1.2;
--fs-h3:1.125rem; --lh-h3:1.3;
--fs-body:1.0625rem; --lh-body:1.65;
--fs-meta:.75rem; --lh-meta:1.4;
/* ── C5 · Dikey ritim ───────────────────────────────────────────────── */
--space-1:4px; --space-2:8px; --space-3:12px;
--space-4:16px; --space-5:24px; --space-6:32px;
--space-7:48px; --space-8:64px; --space-9:96px;
}
/* Vurgu rengi tek olduğu için accent_class varyantları da tek renge düşer. */
.k.red,.k.purple,.k.teal,.k.amber,.k.green,.k.pink,.k.blue{color:var(--accent)}
/* ══════════════════════════════════════════════════════════════════════════
A11 · REKLAM ALANI — BOŞ DURUM
"Reklam Alanı 728×90" yazısı son kullanıcıya hiçbir koşulda görünmemeli.
Dolu reklamda .ad-ph basılmıyor; :has() ile boş konteyner tamamen kalkar
(üstündeki "Reklam" etiketi de gider). .ad'de aspect-ratio zaten var,
yani reklam sonradan yüklenirse sayfa zıplamaz (CLS).
══════════════════════════════════════════════════════════════════════════ */
.ad:has(.ad-ph){display:none !important}
.mast-ad:has(> .ad-ph),.mast-ad:not(:has(.ad:not(:has(.ad-ph)))){display:none}
.mob-ad:not(:has(.ad:not(:has(.ad-ph)))){display:none}
/* ══════════════════════════════════════════════════════════════════════════
B2 · Okunma sayıları gizlenir — sıralama kalır.
Reklam verene "trafiğimiz düşük" mesajı veren ham rakam kaldırıldı.
══════════════════════════════════════════════════════════════════════════ */
.rk-meta{display:none}
/* Haber künyesindeki okunma sayacı (göz ikonu + rakam) da gizlenir; sıralama
ve "dk okuma" kalır. Sayacın kendisi sunucuda artmaya devam ediyor. */
.fh-meta span:has(> .ic-eye),
.a-meta span:has(> .ic-eye),
.art-meta span:has(> .ic-eye){display:none}
/* ══════════════════════════════════════════════════════════════════════════
A9 / B1 · Sağ sütundaki mükerrer kutular
B1: "Trend" ve "En Çok Okunan" birebir aynı 5 haberi gösteriyordu; ikisi
tek modüle indi. Ayrıştırma (48 saat / 30 gün) index-legacy.php
gerektiriyor — o dosyaya yazma erişimi yok.
A9: Dergilerimiz iki kez basılıyordu; sağ sütundaki (ol içermeyen) kutu
kalktı, tam şeritli "Dergilerimiz" bölümü kaldı.
══════════════════════════════════════════════════════════════════════════ */
/* DİKKAT: bu kurallar LEGACY kutuları hedefliyor (mükerrer "En Çok Okunan" ve
"Dergilerimiz"). .tc-box hariç tutulmazsa sonradan eklenen kendi
kutularımızı da gizliyor — ul kullandıkları için "ol içermeyen" sayılıyorlar.
Bu bir kez yaşandı: sağ sütunda yalnızca Trend kaldı. */
.home-rail:has(ol.rank) .rail-box:has(> ol.rail:not(.rank)):not(.tc-box){display:none}
.home-rail:has(ol.rank) .rail-box:not(:has(ol)):not(.tc-box){display:none}
/* e-dergi sayfasındaki iç yapılandırma notu son kullanıcıya görünmemeli. */
.tc-buildnote{display:none}
/* ══════════════════════════════════════════════════════════════════════════
C1 · Bölüm numaraları kalktı — eyebrow + kural çizgisi düzeni
01/02/03 yalnızca 3 bölümde vardı, sıra bilgisi taşımıyordu.
══════════════════════════════════════════════════════════════════════════ */
.section-head h2 .no{display:none}
.section-head{
align-items:baseline;
margin-bottom:var(--space-5);
padding-bottom:var(--space-3);
border-bottom:1px solid var(--ink);
}
.section-head h2{
font-family:var(--mono);
font-size:var(--fs-meta);
line-height:var(--lh-meta);
font-weight:500;
letter-spacing:.14em;
text-transform:uppercase;
color:var(--ink);
}
.section-head h2.serif{font-family:var(--mono)}
.section-head .more{
font-family:var(--mono);
font-size:var(--fs-meta);
letter-spacing:.08em;
font-weight:400;
color:var(--ink-2);
}
.section-head .more:hover{color:var(--accent)}
/* ══════════════════════════════════════════════════════════════════════════
C2 · Tipografi — başlık Archivo, uzun metin Source Serif, veri mono
Gövde serifi YALNIZCA okuma bağlamlarına uygulanıyor. Tüm siteyi serif
yapmak navigasyonu ve formları da değiştirirdi; C2'nin gerekçesi
"uzun analiz ve röportaj metinlerinde okunabilirlik".
══════════════════════════════════════════════════════════════════════════ */
h1,h2,h3,h4,.card h3,.card h2{font-family:var(--disp);letter-spacing:-.01em}
h1{font-size:var(--fs-h1);line-height:var(--lh-h1)}
.a-body,.legal,.dd-desc,.about-body{
font-family:var(--read);
font-size:var(--fs-body);
line-height:var(--lh-body);
}
.card .ex,.nl p{font-family:var(--read)}
/* Etiket / tarih / sayısal veri — laboratuvar dokümanı dili */
.card .m,.rail li .m,.m,.kicker,.card .k,.rail li .k,.section-head .more,
.ev-date,.ft-fl{
font-family:var(--mono);
font-size:var(--fs-meta);
line-height:var(--lh-meta);
letter-spacing:.06em;
}
.card .m,.m{text-transform:uppercase;color:var(--muted)}
/* ══════════════════════════════════════════════════════════════════════════
C3 · İmza öğe — periyodik tablo hücresi kategori rozeti
İki harfli kısaltma tc-v2.js tarafından üretilip .k'nin başına eklenir
(CSS metinden kısaltma türetemez).
══════════════════════════════════════════════════════════════════════════ */
.k{display:inline-flex;align-items:center;gap:var(--space-2)}
.pt-cell{
font-family:var(--mono);
font-size:11px;
font-weight:500;
line-height:1;
letter-spacing:0;
text-transform:none;
font-style:normal;
color:var(--accent);
border:1px solid var(--accent);
border-radius:2px;
padding:3px 4px;
min-width:20px;
text-align:center;
flex:none;
}
.rail li .pt-cell{font-size:10px;padding:2px 3px;min-width:18px}
/* ══════════════════════════════════════════════════════════════════════════
C5 · Boşluk ölçeği uygulaması
══════════════════════════════════════════════════════════════════════════ */
.section{padding-top:var(--space-8);padding-bottom:var(--space-8)}
.section + .section{padding-top:0}
.card{padding:var(--space-4)}
.card.plain,.card:has(> .media){padding:0}
.rail-box{padding:var(--space-5)}
/* ══════════════════════════════════════════════════════════════════════════
C8 · Piyasa şeridi — marquee yerine sabit grid
Kayan şerit mobilde okunamıyordu ve reduced-motion ihlaliydi.
Masaüstü: 6 kolonlu sabit grid. Mobil: yatay kaydırma + snap.
══════════════════════════════════════════════════════════════════════════ */
/* ── Üst bar: TEK SATIR (tarih + kayan şerit + üyelik) ────────────────────
Şerit ayrı satırdayken üst taraf iki bant kaplıyordu. Şimdi tek 40px'lik
satır; şerit kalan alanı alıyor ve kayıyor. Kayma tc.css'teki
.ticker-move animasyonu — prefers-reduced-motion'da duruyor. */
.util .wrap{display:flex;align-items:center;gap:var(--space-5);height:40px}
.util .udate{flex:none;font-family:var(--mono);font-size:11px;letter-spacing:.04em}
.util .uticker{flex:1;min-width:0;display:flex;align-items:center;gap:var(--space-3);overflow:hidden}
.util .ulbl{flex:none}
.util .utrack{flex:1;min-width:0;overflow:hidden;
mask-image:linear-gradient(90deg,transparent 0,#000 24px,#000 88%,transparent 100%)}
.util .ticker-move{display:flex;gap:0;width:max-content;animation-duration:52s}
.mkgrid{display:none}
.utrack .mk{
display:inline-flex;align-items:baseline;gap:6px;
padding:0 var(--space-4);
border-left:1px solid #262B33;
font-family:var(--mono);font-size:11.5px;white-space:nowrap;flex:none;
}
.utrack .mk .s{color:#AAB0B9}
.utrack .mk .v{color:#fff;font-weight:500}
.utrack .mk .up{color:#3FD07A;font-size:10.5px}
.utrack .mk .down{color:#FF7B72;font-size:10.5px}
.utrack .mk .flat{color:var(--flat);font-size:10.5px} /* A5: %0 iken nötr */
.utrack .mk.stale{opacity:.45} /* 24 saatten eski */
.mkupd{flex:none;font-family:var(--mono);font-size:9.5px;letter-spacing:.05em;
color:#8B9099;white-space:nowrap}
/* Üyelik tarafı yer kaplamasın */
.util .uright{flex:none;display:flex;align-items:center;gap:var(--space-3)}
.util .ulink,.util .abone{font-family:var(--ui);font-size:11.5px}
.util .langsw{margin-right:var(--space-1)}
@media (max-width:1080px){
.util .udate{display:none}
.util .ulbl{display:none}
}
@media (max-width:700px){
.util .uticker{display:none}
.util .udate{display:block}
}
}
/* ══════════════════════════════════════════════════════════════════════════
E1 / C7 · Navigasyon açılır menüsü
══════════════════════════════════════════════════════════════════════════ */
/* ── Menü şeridi ──────────────────────────────────────────────────────────
.cats'e overflow:visible verilmesi (açılır panel taşabilsin diye) menü
öğelerinin arama kutusunun ÜSTÜNE taşmasına yol açıyordu. Çözüm: şerit
daralabilsin (min-width:0) ve öğeler sıkışabilsin; arama kutusu kendi
zemini + üst z-index ile korunuyor. */
.nav .wrap{gap:var(--space-3)}
/* Şerit KENDİ İÇİNDE kaydırılıyor, taşmıyor. overflow:visible bırakılınca
scroll durumunda beliren mini logo (126px) menüyü sağa itiyor ve son
öğeler arama kutusunun üstüne biniyordu (her genişlikte 51px, ölçüldü).
Açılır panel bu yüzden position:fixed — kaydırılan kutudan çıkabilsin. */
.nav .cats{align-items:center;flex:1 1 auto;min-width:0;gap:0;
overflow-x:auto;overflow-y:hidden;scrollbar-width:none}
.nav .cats::-webkit-scrollbar{display:none}
.ddw{position:static}
.nav .navsearch{flex:none;position:relative;z-index:3;background:var(--paper)}
.nav.scrolled .navsearch{background:rgba(255,255,255,.94)}
@media (max-width:1180px){
.nav .ddi{padding:var(--space-2) 9px;font-size:12.5px}
.nav .navsearch input{width:120px}
}
@media (max-width:1040px){
.nav .navsearch input{width:0;padding-left:0;padding-right:0}
.nav .navsearch:focus-within input{width:150px;padding-left:8px}
}
.nav .ddi{
font-family:var(--ui);
font-size:13px;
font-weight:500;
color:var(--ink-2);
padding:var(--space-2) var(--space-3);
white-space:nowrap;
border-radius:6px;
background:none;
border:0;
cursor:pointer;
display:inline-flex;
align-items:center;
gap:6px;
}
.nav .ddi:hover{color:var(--ink);background:var(--paper-2)}
.nav .ddi.on{color:var(--accent);font-weight:600}
.ddw{flex:none}
.ddc{
width:0;height:0;
border-left:4px solid transparent;
border-right:4px solid transparent;
border-top:5px solid currentColor;
transition:transform .18s;
}
.ddt[aria-expanded="true"] .ddc{transform:rotate(180deg)}
.ddp{
/* Konum JS ile veriliyor (place()): şerit overflow-x:auto olduğu için
panel akışta kalırsa kırpılır. Burada position:absolute bırakılınca
JS'in fixed kuralını EZİYOR ve panel menünün 153px altına düşüyordu. */
position:fixed;
z-index:60;
min-width:210px;
padding:var(--space-2);
background:var(--paper);
border:1px solid var(--line);
border-radius:10px;
box-shadow:var(--shadow-l);
display:flex;
flex-direction:column;
}
.ddp[hidden]{display:none}
.ddp a{
font-family:var(--ui);
font-size:13.5px;
color:var(--ink-2);
padding:var(--space-2) var(--space-3);
border-radius:6px;
white-space:nowrap;
}
.ddp a:hover{background:var(--paper-2);color:var(--ink)}
/* 18 alt kategori tek sütunda çok uzun; 8'den fazlada çok kolonlu panel */
.ddp-mega{
display:grid;grid-template-columns:repeat(3,minmax(210px,1fr));
gap:1px var(--space-3);min-width:700px;padding:var(--space-3);
}
/* Uzun kategori adları hücreyi taşırıyordu (nowrap) — sarsınlar */
.ddp-mega a{white-space:normal;line-height:1.3;padding:9px var(--space-3)}
.ddp-mega .dd-all{grid-column:1/-1}
.dd-all{
font-family:var(--mono);font-size:var(--fs-meta);letter-spacing:.08em;
text-transform:uppercase;color:var(--accent);
border-bottom:1px solid var(--line);margin-bottom:var(--space-2);
padding-bottom:var(--space-2);border-radius:0;
}
.dd-all:hover{background:none;text-decoration:underline}
.ddp a.on{color:var(--accent);font-weight:600}
/* Mobil drawer — grup başlığı + girintili alt öğeler */
.drawer-nav .dr-grp{
font-family:var(--mono);
font-size:var(--fs-meta);
letter-spacing:.12em;
text-transform:uppercase;
color:var(--muted);
padding:var(--space-4) var(--space-3) var(--space-1);
display:block;
}
.drawer-nav .dr-sub{padding-left:var(--space-6)}
/* ══════════════════════════════════════════════════════════════════════════
C9 · Sticky header sadeleştirmesi
Yalnızca .nav yapışıyor (52px). .util / .mast / .breaking sayfayla birlikte
yukarı kayar — kaydırmada ekranın yarısını kaplamazlar.
══════════════════════════════════════════════════════════════════════════ */
.util,.mast,.breaking{position:static}
.nav{position:sticky;top:0;max-height:56px}
/* ══════════════════════════════════════════════════════════════════════════
A10 · Bülten — KVKK onayı ve durum mesajı
══════════════════════════════════════════════════════════════════════════ */
.ft-nl form{flex-wrap:wrap;align-items:center}
.nl-consent{
flex-basis:100%;
display:flex;
align-items:flex-start;
gap:var(--space-2);
font-family:var(--ui);
font-size:12px;
line-height:1.45;
color:#AAB0B9;
margin-top:var(--space-3);
max-width:52ch;
}
.foot-top .ft-nl .nl-consent input[type="checkbox"],
.nl-consent input[type="checkbox"]{
width:15px;height:15px;min-width:15px;margin-top:2px;flex:none;accent-color:var(--accent)}
.nl-consent a{color:#fff;text-decoration:underline}
.nl-status{
flex-basis:100%;
font-family:var(--ui);
font-size:12.5px;
margin-top:var(--space-2);
min-height:1.2em;
}
.nl-status.ok{color:#3FD07A}
.nl-status.err{color:#FF7B72}
/* ══════════════════════════════════════════════════════════════════════════
Çerez onay banner'ı — KVKK (üyelik + bülten olduğu için zorunlu)
══════════════════════════════════════════════════════════════════════════ */
.cc{
position:fixed;
left:var(--space-4);
right:var(--space-4);
bottom:var(--space-4);
z-index:9000;
max-width:760px;
margin:0 auto;
background:var(--ink);
color:#E8EAEE;
border-radius:14px;
padding:var(--space-5);
box-shadow:var(--shadow-l);
display:flex;
align-items:center;
gap:var(--space-5);
flex-wrap:wrap;
}
.cc[hidden]{display:none}
.cc p{font-family:var(--ui);font-size:13.5px;line-height:1.5;margin:0;flex:1;min-width:260px}
.cc a{color:#fff;text-decoration:underline}
.cc-act{display:flex;gap:var(--space-2);flex:none}
.cc button{
font-family:var(--ui);
font-size:13px;
font-weight:600;
padding:10px 18px;
border-radius:8px;
border:1px solid #3A424C;
background:transparent;
color:#E8EAEE;
cursor:pointer;
}
.cc button.pri{background:var(--accent);border-color:var(--accent);color:#fff}
.cc button:hover{border-color:#fff}
.cc button.pri:hover{background:var(--brand-2)}
/* ══════════════════════════════════════════════════════════════════════════
A6 / A7 · Ana sayfa — yaklaşan etkinlikler ve araçlar promosu
Her ikisi de veri yoksa kendini gizler (boş blok basılmaz).
══════════════════════════════════════════════════════════════════════════ */
.tc-aside-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-5);align-items:start}
.tc-aside-grid .rail-box .more{
display:inline-block;margin-top:var(--space-3);
font-family:var(--mono);font-size:var(--fs-meta);letter-spacing:.08em;color:var(--accent);
}
@media (max-width:820px){.tc-aside-grid{grid-template-columns:1fr}}
.up-ev{display:flex;flex-direction:column;gap:var(--space-3)}
.up-ev li{list-style:none}
.up-ev a{
display:grid;
grid-template-columns:auto 1fr;
gap:var(--space-3);
align-items:start;
padding:var(--space-3) 0;
border-bottom:1px solid var(--line);
}
.up-ev li:last-child a{border-bottom:0}
.up-ev .d{
font-family:var(--mono);
font-size:10px;
white-space:nowrap;
line-height:1.15;
text-align:center;
color:var(--accent);
border:1px solid var(--accent);
border-radius:3px;
padding:5px 6px;
min-width:52px;
}
.up-ev .d b{display:block;font-size:15px;font-weight:600}
.up-ev h4{font-family:var(--disp);font-size:14.5px;line-height:1.3;margin:0 0 3px}
.up-ev .c{font-family:var(--mono);font-size:11px;letter-spacing:.05em;color:var(--muted)}
.tool-promo{display:grid;gap:var(--space-2)}
.tool-promo a{
display:flex;
align-items:center;
gap:var(--space-3);
padding:var(--space-3);
border:1px solid var(--line);
border-radius:10px;
font-family:var(--ui);
font-size:13.5px;
color:var(--ink-2);
}
.tool-promo a:hover{border-color:var(--accent);color:var(--accent)}
.tool-promo .e{font-size:19px;line-height:1;flex:none}
/* ══════════════════════════════════════════════════════════════════════════
C10 · Boş durum metinleri — yön gösteren, çıkmaz sokak olmayan
══════════════════════════════════════════════════════════════════════════ */
.empty{padding:var(--space-9) var(--space-5);text-align:center}
.empty h3{font-family:var(--disp);font-size:var(--fs-h3);margin-bottom:var(--space-2)}
.empty p{font-family:var(--read);color:var(--ink-2);max-width:46ch;margin:0 auto var(--space-4)}
.empty .em{font-size:34px;margin-bottom:var(--space-3)}
.empty-links{display:flex;gap:var(--space-3);justify-content:center;flex-wrap:wrap}
.empty-links a{
font-family:var(--ui);
font-size:13px;
font-weight:600;
color:var(--accent);
border:1px solid var(--accent);
border-radius:8px;
padding:9px 16px;
}
.empty-links a:hover{background:var(--accent);color:#fff}
/* ══════════════════════════════════════════════════════════════════════════
C11 · Erişilebilirlik zemini
══════════════════════════════════════════════════════════════════════════ */
a:focus-visible,button:focus-visible,input:focus-visible,
select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{
outline:2px solid var(--accent);
outline-offset:2px;
border-radius:4px;
}
/* Koyu zeminde yeşil halka okunmuyor — orada yüksek vurgu rengi kullanılır. */
.util a:focus-visible,.foot a:focus-visible,.foot button:focus-visible,
.foot input:focus-visible,.cc button:focus-visible,.nl input:focus-visible,
.nl button:focus-visible{outline-color:var(--accent-hi)}
/* Kontrast: gri tarih/meta metinleri 4.5:1'in altındaydı (#868c96 → #6B757F). */
.card .m,.rail li .m,.muted,.ev-meta{color:var(--muted)}
/* Klavye kullanıcısı için içeriğe atlama bağlantısı */
.skip{
position:absolute;
left:var(--space-4);
top:-60px;
z-index:9999;
background:var(--accent);
color:#fff;
font-family:var(--ui);
font-size:13px;
font-weight:600;
padding:10px 16px;
border-radius:0 0 8px 8px;
transition:top .15s;
}
.skip:focus{top:0}
@media (prefers-reduced-motion:reduce){
*,*::before,*::after{
animation-duration:.001ms !important;
animation-iteration-count:1 !important;
transition-duration:.001ms !important;
scroll-behavior:auto !important;
}
.ticker-move{animation:none !important}
}
/* ══════════════════════════════════════════════════════════════════════════
C6 / C12 · Kart görselleri — sabit oran, kırpma, geç yükleme
Kart varyantlarını üçe indirmek markup gerektiriyor (index-legacy.php'ye
yazma erişimi yok); burada yalnızca ortak görsel sözleşmesi zorlanıyor.
══════════════════════════════════════════════════════════════════════════ */
/* ── Mobil düzeltmeleri ────────────────────────────────────────────────
.foot .cols tc.css'te 2fr 1fr 1fr 1fr olarak sabit; mobil kuralı yoktu
ve 390px'te footer gövdeyi 21px taşırıyordu (body overflow-x:clip
olduğu için içerik sessizce kırpılıyordu, kaydırma da yoktu). */
@media (max-width:820px){
.foot .cols{grid-template-columns:1fr 1fr;gap:var(--space-6)}
}
@media (max-width:560px){
.foot .cols{grid-template-columns:1fr;gap:var(--space-5)}
.ft-social{justify-content:flex-start;flex-wrap:wrap}
.foot-top .ft-nl input[type="email"]{width:100%;max-width:none}
.foot-top .ft-nl form{flex-wrap:wrap}
.cc{left:var(--space-2);right:var(--space-2);bottom:var(--space-2);padding:var(--space-4)}
.cc-act{width:100%}
.cc-act button{flex:1}
}
/* Görsel taşıyan house kreatifi — dergi kapağı gerçek görsel, fuar tipografik */
.ad-house{
display:flex;flex-direction:column;justify-content:flex-end;
gap:var(--space-1);width:100%;height:100%;padding:var(--space-4);
text-align:left;background:var(--paper-2);border-radius:inherit;
position:relative;overflow:hidden;
}
.ad-house .ah-img{
position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
opacity:.28;filter:saturate(.85);
}
.ad-house .ah-tx{position:relative;display:flex;flex-direction:column;gap:2px;min-width:0;max-width:100%}
/* Uzun fuar adları ("InterDye & Textile Printing Eurasia") kabı taşırıyordu */
.ad-house .ah-t,.ad-house .ah-s,.ad-house .ah-k{min-width:0;overflow-wrap:anywhere;hyphens:auto}
.ad-house{min-width:0}
.ad-house.ah-fair .ah-t{color:#fff}
.ad-house.ah-fair .ah-s{color:#AFC4BB}
.ad-house.ah-fair .ah-k{color:var(--accent-hi)}
.ad-house.ah-fair .ah-c{color:#fff}
/* Dekoratif halka: pseudo-element negatif konumla kabın scrollWidth'ini
40px büyütüyordu. Arka plan gradyanı düzene hiç etki etmiyor. */
.ad-house.ah-fair{
background:
radial-gradient(circle at calc(100% + 10px) -10px,
transparent 78px, rgba(200,240,46,.16) 79px, rgba(200,240,46,.16) 80px, transparent 81px),
linear-gradient(135deg,var(--ink) 0%,#12303F 55%,var(--accent) 100%);
}
.ad-house .ah-k{
font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;
text-transform:uppercase;color:var(--accent);
}
.ad-house .ah-t{
font-family:var(--disp);font-weight:700;font-size:15px;line-height:1.2;color:var(--ink);
}
.ad-house .ah-s{font-family:var(--mono);font-size:10.5px;color:var(--muted);letter-spacing:.03em}
.ad-house .ah-c{
font-family:var(--ui);font-size:12px;font-weight:600;color:var(--accent);margin-top:var(--space-1);
}
.ad-house:hover .ah-c{text-decoration:underline}
/* Yatay (leaderboard) kapta tek satıra sığsın */
.ad[style*="--adh:90px"] .ad-house{
flex-direction:row;align-items:center;gap:var(--space-4);padding:var(--space-2) var(--space-5);
}
.ad[style*="--adh:90px"] .ad-house .ah-tx{flex-direction:row;align-items:baseline;gap:var(--space-4);width:100%}
.ad[style*="--adh:90px"] .ad-house .ah-t{font-size:15px}
.ad[style*="--adh:90px"] .ad-house .ah-c{margin:0 0 0 auto;white-space:nowrap}
/* Kapaksız haberde boş gri kutu yerine markalı görsel (periyodik hücre dili) */
.card .media{position:relative}
.media-ph{
position:absolute;inset:0;display:grid;place-items:center;
font-family:var(--mono);font-size:34px;font-weight:500;letter-spacing:.02em;
color:var(--accent);
background:
radial-gradient(circle at 1px 1px,var(--line) 1px,transparent 0) 0 0/16px 16px,
linear-gradient(135deg,var(--paper-2),var(--brand-wash));
}
.rail li .media-ph,.cb-side .media-ph{font-size:19px}
/* Sağ sütun ek kutuları */
.rb-more{
display:inline-block;margin-top:var(--space-3);
font-family:var(--mono);font-size:var(--fs-meta);letter-spacing:.08em;color:var(--accent);
}
.rb-more:hover{text-decoration:underline}
.rt-list{display:flex;flex-direction:column;gap:var(--space-1);list-style:none;margin:0;padding:0}
.rt-list li{list-style:none}
.rt-list a{
display:grid;grid-template-columns:64px 1fr;gap:var(--space-3);align-items:start;
padding:var(--space-3) 0;border-bottom:1px solid var(--line);
}
.rt-list li:last-child a{border-bottom:0}
.rt-m{display:block;aspect-ratio:1/1;border-radius:6px;overflow:hidden;background:var(--paper-2)}
.rt-m img{width:100%;height:100%;object-fit:cover;display:block}
.rt-list h4{font-family:var(--disp);font-size:14px;line-height:1.25;margin:0 0 3px}
.rt-list .c{font-family:var(--mono);font-size:10.5px;letter-spacing:.05em;color:var(--muted)}
/* Haber görsellerinin çoğu beyaz zeminli logo/basın görseli; beyaz kartın
üstünde "boş kutu" gibi duruyorlardı. İnce çerçeve + hafif zemin onları
kasıtlı bir küçük görsel haline getiriyor. */
.card .media{
background:var(--paper-2);
border:1px solid var(--line);
border-radius:8px;
overflow:hidden;
}
.cb-list .card .media,.rail .card .media{border-radius:6px}
/* Dergi house kreatifi: kapak arkada soluk değil, üstte scrim ile okunur */
.ad-house.ah-mag{background:var(--ink);justify-content:flex-end}
.ad-house.ah-mag .ah-img{opacity:1;object-fit:cover}
/* Yumuşak gradient yoğun kapak görsellerinde metni okunmaz bırakıyordu;
alt kısım DÜZ koyu panel — kontrast her kapakta garanti. */
.ad-house.ah-mag::before{
content:"";position:absolute;left:0;right:0;bottom:0;height:52%;
background:linear-gradient(180deg,rgba(16,22,28,0) 0%,rgba(16,22,28,.93) 34%,var(--ink) 100%);
}
.ad-house.ah-mag .ah-tx{padding-top:var(--space-2)}
.ad-house.ah-mag .ah-k{color:var(--accent-hi)}
.ad-house.ah-mag .ah-t{color:#fff}
.ad-house.ah-mag .ah-s{color:#C4CCD4}
.ad-house.ah-mag .ah-c{color:#fff}
/* Yatay kapta kapak görseli sağda küçük kalsın */
.ad[style*="--adh:90px"] .ad-house.ah-mag .ah-img{width:auto;left:auto;right:0;opacity:.9}
.ad[style*="--adh:90px"] .ad-house.ah-mag::before{
inset:0;height:100%;
background:linear-gradient(90deg,var(--ink) 62%,rgba(16,22,28,.30) 100%);
}
/* ══════════════════════════════════════════════════════════════════════════
SEKTÖRDEN — görselli kartlar
Eskiden sadece ad + haber sayısı vardı; kutu boş duruyordu. Görsel o
sektörün en yeni haberinden (v_sectors.cover_url).
══════════════════════════════════════════════════════════════════════════ */
.sec-wrap{background:var(--ink);border-radius:20px;padding:var(--space-7) var(--space-6);margin:var(--space-6) auto;max-width:var(--wrap)}
.sec-wrap .section-head{border-bottom-color:#2A323B}
.sec-wrap .section-head h2{color:#fff}
.sec-wrap .section-head .more{color:#9AA6B2}
.sec-wrap .section-head .more:hover{color:var(--accent-hi)}
.secx{display:grid;grid-template-columns:repeat(6,1fr);gap:var(--space-4)}
.secx-c{
position:relative;display:block;aspect-ratio:4/3;border-radius:12px;overflow:hidden;
background:#1A222B;isolation:isolate;
}
.secx-m{position:absolute;inset:0;display:block}
.secx-m img{width:100%;height:100%;object-fit:cover;display:block;
transition:transform .5s cubic-bezier(.2,.7,.2,1);filter:saturate(.9)}
.secx-c::after{
content:"";position:absolute;inset:0;
background:linear-gradient(180deg,rgba(16,22,28,.05) 0%,rgba(16,22,28,.55) 45%,rgba(16,22,28,.93) 100%);
}
.secx-t{
position:absolute;left:var(--space-4);right:var(--space-4);bottom:var(--space-4);z-index:2;
font-family:var(--disp);font-weight:700;font-size:14.5px;line-height:1.22;color:#fff;
}
.secx-c:hover .secx-m img{transform:scale(1.06)}
.secx-c:hover .secx-t{color:var(--accent-hi)}
.secx-c:focus-visible{outline:2px solid var(--accent-hi);outline-offset:3px}
@media (max-width:1180px){.secx{grid-template-columns:repeat(4,1fr)}}
@media (max-width:820px){.secx{grid-template-columns:repeat(3,1fr)}}
@media (max-width:520px){.secx{grid-template-columns:repeat(2,1fr)};.sec-wrap{padding:var(--space-5) var(--space-4)}}
/* ══════════════════════════════════════════════════════════════════════════
YAKLAŞAN FUARLAR
══════════════════════════════════════════════════════════════════════════ */
.fairx{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-4)}
.fairx-c{
display:flex;flex-direction:column;gap:var(--space-3);
border:1px solid var(--line);border-radius:14px;padding:var(--space-4);
background:var(--card);transition:border-color .18s,transform .18s,box-shadow .2s;
}
.fairx-c:hover{border-color:var(--accent);transform:translateY(-2px);box-shadow:var(--shadow)}
.fairx-l{display:block;height:52px}
.fairx-l img{max-height:52px;max-width:100%;width:auto;object-fit:contain;display:block}
.fairx-b{display:flex;flex-direction:column;gap:3px}
.fairx-d{
font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.08em;
text-transform:uppercase;color:var(--accent);
}
.fairx-t{font-family:var(--disp);font-weight:700;font-size:15px;line-height:1.22;color:var(--ink)}
.fairx-p{font-family:var(--mono);font-size:11px;letter-spacing:.05em;color:var(--muted)}
@media (max-width:980px){.fairx{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.fairx{grid-template-columns:1fr}}
/* ══════════════════════════════════════════════════════════════════════════
KART TARİHLERİ — mono, küçük, üstte ince ayraçla; "12 AĞU 2026" kalabalık
görünüyordu, artık meta satırı olarak okunuyor.
══════════════════════════════════════════════════════════════════════════ */
.card .m,.cb-list .card .m,.hero-trio .card .m{
display:inline-flex;align-items:center;gap:7px;
font-family:var(--mono);font-size:10.5px;font-weight:400;
letter-spacing:.1em;text-transform:uppercase;color:var(--muted);
margin-top:var(--space-3);
}
.card .m::before{
content:"";width:14px;height:1px;background:var(--line-2);flex:none;
}
.card:hover .m::before{background:var(--accent)}
/* ── Öne Çıkanlar slider (hero sağ sütunu) ────────────────────────────── */
.fsl{position:relative;margin-top:var(--space-5)}
.fsl-track{
display:flex;overflow-x:auto;scroll-snap-type:x mandatory;
scrollbar-width:none;-ms-overflow-style:none;border-radius:12px;
}
.fsl-track::-webkit-scrollbar{display:none}
.fsl-s{
flex:0 0 100%;scroll-snap-align:start;display:flex;flex-direction:column;
min-width:0;
}
.fsl-m{display:block;aspect-ratio:16/9;overflow:hidden;border-radius:12px;background:var(--paper-2)}
.fsl-m img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.fsl-s:hover .fsl-m img{transform:scale(1.05)}
.fsl-k{
font-family:var(--ui);font-size:10px;font-weight:600;letter-spacing:.12em;
text-transform:uppercase;color:var(--accent);margin:var(--space-3) 0 var(--space-1);
}
.fsl-t{font-family:var(--disp);font-weight:700;font-size:16px;line-height:1.22;color:var(--ink)}
.fsl-s:hover .fsl-t{color:var(--accent)}
.fsl-d{
font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
color:var(--muted);margin-top:var(--space-2);
}
.fsl-b{
position:absolute;top:calc(28% - 16px);width:32px;height:32px;border-radius:50%;
border:0;background:rgba(255,255,255,.92);color:var(--ink);font-size:18px;line-height:1;
cursor:pointer;display:grid;place-items:center;box-shadow:var(--shadow-s);opacity:0;transition:opacity .18s;
}
.fsl:hover .fsl-b,.fsl-b:focus-visible{opacity:1}
.fsl-p{left:8px}
.fsl-n{right:8px}
.fsl-dots{display:flex;gap:5px;justify-content:center;margin-top:var(--space-3)}
.fsl-dots button{
width:6px;height:6px;border-radius:50%;border:0;padding:0;cursor:pointer;
background:var(--line-2);transition:.18s;
}
.fsl-dots button.on{background:var(--accent);width:18px;border-radius:3px}
.fsl-single .fsl-b,.fsl-single .fsl-dots{display:none}
/* ── Alt kategori seçimi (kategori sayfası) ──────────────────────────────
Düz çipler sıradan duruyordu; görselli kartlar hem seçimi kolaylaştırıyor
hem sayfanın üstünü dolduruyor. Haber sayıları kaldırıldı. */
.subx{
display:grid;grid-template-columns:repeat(6,1fr);gap:var(--space-3);
margin-bottom:var(--space-6);
}
.subx-c{
position:relative;display:block;aspect-ratio:16/10;border-radius:10px;
overflow:hidden;background:var(--ink);isolation:isolate;
}
.subx-m{position:absolute;inset:0;display:block}
.subx-m img{width:100%;height:100%;object-fit:cover;display:block;
transition:transform .45s cubic-bezier(.2,.7,.2,1);filter:saturate(.9)}
.subx-c::after{
content:"";position:absolute;inset:0;
background:linear-gradient(180deg,rgba(16,22,28,.1) 0%,rgba(16,22,28,.6) 50%,rgba(16,22,28,.92) 100%);
}
.subx-t{
position:absolute;left:10px;right:10px;bottom:9px;z-index:2;
font-family:var(--disp);font-weight:600;font-size:12.5px;line-height:1.2;color:#fff;
}
.subx-c:hover .subx-m img{transform:scale(1.07)}
.subx-c:hover .subx-t{color:var(--accent-hi)}
.subx-c.on{outline:2px solid var(--accent);outline-offset:2px}
@media (max-width:1180px){.subx{grid-template-columns:repeat(4,1fr)}}
@media (max-width:820px){.subx{grid-template-columns:repeat(3,1fr)}}
@media (max-width:520px){.subx{grid-template-columns:repeat(2,1fr)}}
/* Alt kategori yoksa şerit hiç basılmasın */
.subx:empty{display:none}
/* ── Scroll durumunda mini logo 126px alıyor ve son menü öğeleri kırpılıyor.
Öğeler sıkılaşınca dokuzu da sığıyor. ─────────────────────────────────── */
.nav.scrolled .ddi{padding-left:7px;padding-right:7px}
.nav.scrolled .cats{gap:0}
/* ── Arama kutusu her yerde belirgin ───────────────────────────────────── */
.nav .navsearch{
border:1px solid var(--line-2);border-radius:8px;
background:var(--paper-2);transition:border-color .16s,box-shadow .16s,background .16s;
}
.nav .navsearch:hover{border-color:var(--ink-2)}
.nav .navsearch:focus-within{
border-color:var(--accent);background:var(--paper);
box-shadow:0 0 0 3px rgba(11,93,59,.14);
}
.nav .navsearch button{color:var(--ink-2)}
.nav .navsearch:focus-within button{color:var(--accent)}
.nav .navsearch input{
font-family:var(--ui);font-size:13px;color:var(--ink);
background:transparent;border:0;padding:9px 12px 9px 4px;width:190px;
}
.nav .navsearch input::placeholder{color:var(--muted)}
.drawer-search{
border:1px solid var(--line-2);border-radius:8px;background:var(--paper-2);
}
.drawer-search:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px rgba(11,93,59,.14)}
/* ── Reklam kaplarında yuvarlak köşe yok ───────────────────────────────────
Kreatifler dik köşeli geliyor; yuvarlatılmış kap kenarlarda beyaz köşe
bırakıyor ve reklam "kırpılmış" duruyor. ─────────────────────────────── */
.ad,.ad-house,.ad .ad-ph,.ad img{border-radius:0}
.ad-sticky .ad{border-radius:0}
/* ── Kart tarihleri: çizgi + mono yerine sade, küçük, harf aralıklı ──────── */
.card .m,.cb-list .card .m,.hero-trio .card .m{
display:block;
font-family:var(--ui);
font-size:11.5px;
font-weight:500;
letter-spacing:.02em;
text-transform:none;
color:var(--muted);
margin-top:var(--space-3);
}
.card .m::before{content:none}
/* ── Sektör kartları: jenerik, tutarlı tasarım ────────────────────────────
Kart görseli o sektörün en yeni haber fotoğrafıydı; rastgele ve konuyla
ilgisiz duruyordu (kiraz fotoğrafı "Gıda", takım elbiseli portre "Endüstriyel
Temizlik"). Yerine sitenin imza dili: periyodik tablo hücresi kısaltması,
sektöre göre sabit renk. Her zaman aynı karakterde, her zaman düzgün.
─────────────────────────────────────────────────────────────────────── */
.secx-c,.subx-c{
position:relative;display:flex;flex-direction:column;justify-content:flex-end;
overflow:hidden;isolation:isolate;background:#141C24;
border:1px solid rgba(255,255,255,.06);
}
.secx-c{aspect-ratio:4/3;border-radius:12px;padding:var(--space-4)}
.subx-c{aspect-ratio:16/10;border-radius:10px;padding:11px}
.secx-c::after,.subx-c::after{content:none}
.secx-b,.subx-b{
position:absolute;right:-6px;top:-14px;z-index:0;
font-family:var(--mono);font-weight:500;line-height:1;
color:rgba(255,255,255,.10);letter-spacing:-.04em;user-select:none;
}
.secx-b{font-size:104px}
.subx-b{font-size:66px}
.secx-t,.subx-t{position:relative;z-index:2;color:#fff}
.secx-t{font-family:var(--disp);font-weight:700;font-size:14.5px;line-height:1.22;left:auto;right:auto;bottom:auto}
.subx-t{font-family:var(--disp);font-weight:600;font-size:12.5px;line-height:1.2;left:auto;right:auto;bottom:auto}
/* Sektöre göre sabit renk — sıraya göre 6'lı döngü, hepsi koyu zeminli */
.secx-c:nth-child(6n+1),.subx-c:nth-child(6n+1){background:linear-gradient(150deg,#0B5D3B,#0A3F2A)}
.secx-c:nth-child(6n+2),.subx-c:nth-child(6n+2){background:linear-gradient(150deg,#14425C,#0E2C3E)}
.secx-c:nth-child(6n+3),.subx-c:nth-child(6n+3){background:linear-gradient(150deg,#4A3A6B,#2E2444)}
.secx-c:nth-child(6n+4),.subx-c:nth-child(6n+4){background:linear-gradient(150deg,#7A4420,#4E2B14)}
.secx-c:nth-child(6n+5),.subx-c:nth-child(6n+5){background:linear-gradient(150deg,#1D5B63,#123A40)}
.secx-c:nth-child(6n+6),.subx-c:nth-child(6n+6){background:linear-gradient(150deg,#6B2540,#45182A)}
.secx-c:hover,.subx-c:hover{border-color:var(--accent-hi)}
.secx-c:hover .secx-b,.subx-c:hover .subx-b{color:rgba(200,240,46,.22)}
.secx-c:hover .secx-t,.subx-c:hover .subx-t{color:var(--accent-hi)}
/* ── Turkchem TV kartları ─────────────────────────────────────────────── */
.vidx{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-5)}
.vidx-c{display:flex;flex-direction:column;min-width:0}
.vidx-m{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;border-radius:10px;background:var(--ink)}
.vidx-m img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .45s cubic-bezier(.2,.7,.2,1)}
.vidx-c:hover .vidx-m img{transform:scale(1.05)}
.vidx-p{
position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
width:46px;height:46px;border-radius:50%;background:rgba(16,22,28,.72);
display:grid;place-items:center;transition:background .18s;
}
.vidx-p::after{
content:"";border-left:13px solid #fff;border-top:8px solid transparent;
border-bottom:8px solid transparent;margin-left:3px;
}
.vidx-c:hover .vidx-p{background:var(--accent)}
.vidx-s{
position:absolute;right:7px;bottom:7px;
font-family:var(--mono);font-size:10.5px;color:#fff;
background:rgba(16,22,28,.82);padding:2px 6px;border-radius:3px;
}
.vidx-t{
font-family:var(--disp);font-weight:600;font-size:14.5px;line-height:1.25;
color:var(--ink);margin-top:var(--space-3);
}
.vidx-c:hover .vidx-t{color:var(--accent)}
.vidx-d{font-family:var(--ui);font-size:11.5px;color:var(--muted);margin-top:var(--space-2)}
.vidx-page{grid-template-columns:repeat(4,1fr);row-gap:var(--space-6)}
@media (max-width:980px){.vidx,.vidx-page{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.vidx{grid-template-columns:1fr}}
/* ══════════════════════════════════════════════════════════════════════════
ETKİNLİK TAKVİMİ
══════════════════════════════════════════════════════════════════════════ */
.evsec{padding-top:var(--space-6)}
.evh{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--space-5);
padding-bottom:var(--space-4);border-bottom:1px solid var(--ink);margin-bottom:var(--space-5)}
.evh-k{font-family:var(--mono);font-size:var(--fs-meta);letter-spacing:.14em;
text-transform:uppercase;color:var(--accent);display:block;margin-bottom:6px}
.evh h1{font-family:var(--disp);font-size:var(--fs-h1);line-height:1.1;margin:0}
.evh-nav{display:flex;gap:6px;flex:none}
.evh-b{
min-width:38px;height:38px;padding:0 12px;border:1px solid var(--line-2);border-radius:8px;
display:grid;place-items:center;font-family:var(--ui);font-size:15px;color:var(--ink-2);
}
.evh-b:hover{border-color:var(--accent);color:var(--accent)}
.evh-now{font-size:12.5px;font-weight:600}
.evf{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:var(--space-6)}
.evc{
font-family:var(--ui);font-size:12.5px;padding:7px 14px;border-radius:30px;
border:1px solid var(--line-2);color:var(--ink-2);
}
.evc:hover{border-color:var(--ink);color:var(--ink)}
.evc.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.evgrid{display:grid;grid-template-columns:300px 1fr;gap:var(--space-7);align-items:start}
.evcal{border:1px solid var(--line);border-radius:14px;padding:var(--space-4);background:var(--card)}
.evcal-h,.evcal-g{display:grid;grid-template-columns:repeat(7,1fr);gap:3px}
.evcal-h span{
font-family:var(--mono);font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;
color:var(--muted);text-align:center;padding-bottom:6px;
}
.evd{
aspect-ratio:1/1;display:grid;place-items:center;border-radius:7px;
font-family:var(--mono);font-size:12px;color:var(--ink-2);
}
.evd-x{visibility:hidden}
.evd-on{background:var(--accent);color:#fff;font-weight:600}
.evd-today{outline:1.5px solid var(--ink);outline-offset:-1.5px;font-weight:600;color:var(--ink)}
.evd-on.evd-today{outline-color:var(--accent-hi)}
.evlist{display:flex;flex-direction:column;gap:var(--space-3);list-style:none;margin:0;padding:0}
.evl{
display:grid;grid-template-columns:auto 1fr auto;gap:var(--space-4);align-items:center;
border:1px solid var(--line);border-radius:14px;padding:var(--space-4);background:var(--card);
}
.evl:hover{border-color:var(--accent)}
.evl-past{opacity:.55}
.evl-d{
font-family:var(--mono);font-size:10.5px;line-height:1.15;text-align:center;
color:var(--accent);border:1px solid var(--accent);border-radius:6px;padding:8px 9px;min-width:54px;
}
.evl-d b{display:block;font-size:17px;font-weight:600}
.evl-b{display:flex;flex-direction:column;gap:5px;min-width:0}
.evl-logo{max-height:34px;max-width:150px;width:auto;object-fit:contain;margin-bottom:2px}
.evl-t{font-family:var(--disp);font-weight:700;font-size:15.5px;line-height:1.22;color:var(--ink)}
.evl-tag{
font-family:var(--mono);font-size:9.5px;font-style:normal;letter-spacing:.1em;
text-transform:uppercase;color:var(--muted);border:1px solid var(--line-2);
border-radius:3px;padding:1px 5px;margin-left:5px;vertical-align:middle;
}
.evl-p{font-family:var(--mono);font-size:11px;letter-spacing:.05em;color:var(--muted)}
.evl-a{display:flex;flex-direction:column;gap:6px;flex:none;align-items:flex-end}
.evl-go{
font-family:var(--ui);font-size:12.5px;font-weight:600;color:#fff;background:var(--accent);
padding:8px 16px;border-radius:8px;white-space:nowrap;
}
.evl-go:hover{background:var(--brand-2)}
.evl-ics{
font-family:var(--ui);font-size:11.5px;color:var(--ink-2);white-space:nowrap;
border-bottom:1px solid var(--line-2);
}
.evl-ics:hover{color:var(--accent);border-color:var(--accent)}
@media (max-width:900px){
.evgrid{grid-template-columns:1fr;gap:var(--space-5)}
.evl{grid-template-columns:auto 1fr;row-gap:var(--space-3)}
.evl-a{grid-column:1/-1;flex-direction:row;align-items:center;justify-content:flex-start}
}
/* ── Hammadde & Ürün arama ─────────────────────────────────────────────── */
.prodsec{padding-top:var(--space-6);padding-bottom:var(--space-6)}
.prod{
display:grid;grid-template-columns:1.05fr 1fr;gap:var(--space-7);
background:var(--paper-2);border:1px solid var(--line);border-radius:18px;
padding:var(--space-7) var(--space-6);align-items:center;
}
.prod-k{
font-family:var(--mono);font-size:var(--fs-meta);letter-spacing:.14em;
text-transform:uppercase;color:var(--accent);display:block;margin-bottom:var(--space-2);
}
.prod h2{font-family:var(--disp);font-size:var(--fs-h2);line-height:1.15;margin:0 0 var(--space-3)}
.prod p{font-family:var(--read);font-size:15px;line-height:1.6;color:var(--ink-2);margin:0 0 var(--space-5);max-width:46ch}
.prod-f{display:flex;gap:var(--space-2)}
.prod-f input{
flex:1;min-width:0;font-family:var(--ui);font-size:14.5px;color:var(--ink);
padding:13px 16px;border:1px solid var(--line-2);border-radius:10px;background:var(--paper);
}
.prod-f input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(11,93,59,.14)}
.prod-f button{
font-family:var(--ui);font-size:14px;font-weight:600;color:#fff;background:var(--accent);
border:0;border-radius:10px;padding:13px 26px;cursor:pointer;flex:none;
}
.prod-f button:hover{background:var(--brand-2)}
.prod-h{
font-family:var(--mono);font-size:var(--fs-meta);letter-spacing:.1em;text-transform:uppercase;
color:var(--muted);display:block;margin-bottom:var(--space-3);
}
.prod-c{display:flex;flex-wrap:wrap;gap:7px}
.prod-c a{
display:inline-flex;align-items:center;gap:7px;
font-family:var(--ui);font-size:13px;color:var(--ink-2);
border:1px solid var(--line-2);border-radius:30px;padding:7px 8px 7px 14px;background:var(--paper);
}
.prod-c a:hover{border-color:var(--accent);color:var(--accent)}
.prod-c a b{
font-family:var(--mono);font-size:10.5px;font-weight:500;color:var(--muted);
background:var(--paper-2);border-radius:20px;padding:2px 7px;
}
.prod-c a:hover b{background:var(--brand-wash);color:var(--accent)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
@media (max-width:900px){
.prod{grid-template-columns:1fr;gap:var(--space-5);padding:var(--space-5) var(--space-4)}
}
/* ── E-dergi ızgarası ─────────────────────────────────────────────────── */
.edg-lede{font-family:var(--read);font-size:15.5px;line-height:1.6;color:var(--ink-2);
max-width:60ch;margin:0 0 var(--space-6)}
.edg{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-6)}
.edg-c{display:flex;flex-direction:column}
.edg-m{
display:block;aspect-ratio:3/4;overflow:hidden;border-radius:10px;
background:var(--paper-2);border:1px solid var(--line);
box-shadow:var(--shadow-s);transition:transform .28s cubic-bezier(.2,.7,.2,1),box-shadow .28s;
}
.edg-m img{width:100%;height:100%;object-fit:cover;display:block}
.edg-c:hover .edg-m{transform:translateY(-4px);box-shadow:var(--shadow-l)}
.edg-t{font-family:var(--disp);font-weight:700;font-size:17px;line-height:1.2;
color:var(--ink);margin-top:var(--space-4)}
.edg-c:hover .edg-t{color:var(--accent)}
.edg-d{font-family:var(--read);font-size:14px;line-height:1.5;color:var(--ink-2);margin-top:var(--space-2)}
@media (max-width:900px){.edg{grid-template-columns:repeat(2,1fr);gap:var(--space-5)}}
@media (max-width:520px){.edg{grid-template-columns:1fr}}
/* Takvim sağda, etkinlik detayı solda satırın altında açılıyor */
.evgrid{grid-template-columns:1fr 300px}
.evgrid-r{position:sticky;top:70px}
.evl{grid-template-columns:auto 1fr auto;row-gap:0}
.evl-x{
grid-column:1/-1;margin-top:var(--space-4);padding-top:var(--space-4);
border-top:1px solid var(--line);
}
.evl-x[hidden]{display:none}
.evl-x p{font-family:var(--read);font-size:14.5px;line-height:1.6;color:var(--ink-2);margin:0 0 var(--space-3)}
.evl-dl{display:grid;grid-template-columns:auto 1fr;gap:5px var(--space-4);margin:0 0 var(--space-3)}
.evl-dl dt{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.evl-dl dd{font-family:var(--ui);font-size:13.5px;color:var(--ink);margin:0}
.evl-site{font-family:var(--ui);font-size:13px;font-weight:600;color:var(--accent)}
.evl-site:hover{text-decoration:underline}
/* Künyedeki web adresi — uzun alan adları sütunu taşırmasın */
.evl-web,.fd-web{color:var(--accent);font-weight:600;overflow-wrap:anywhere}
.evl-web:hover,.fd-web:hover{text-decoration:underline}
.evl-more{border:0;cursor:pointer;font-family:var(--ui)}
@media (max-width:900px){
.evgrid{grid-template-columns:1fr}
.evgrid-r{position:static;order:-1}
}
/* Sağ sütun ürün kutusu (haber detayı) */
.prodr-f{display:flex;gap:6px;margin-bottom:var(--space-4)}
.prodr-f input{
flex:1;min-width:0;font-family:var(--ui);font-size:13.5px;color:var(--ink);
padding:10px 12px;border:1px solid var(--line-2);border-radius:8px;background:var(--paper);
}
.prodr-f input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(11,93,59,.14)}
.prodr-f button{
flex:none;width:40px;border:0;border-radius:8px;background:var(--accent);color:#fff;
font-size:16px;cursor:pointer;
}
.prodr-f button:hover{background:var(--brand-2)}
.prodr-c a{font-size:12.5px;padding:6px 7px 6px 12px}
/* Hero sağ sütunu: "Öne Çıkanlar" başlığı reklamın hemen dibindeydi */
.hero .rail .rail-h{margin-top:var(--space-6)}
.hero .rail .ad + .rail-h{margin-top:var(--space-6)}
.kicker-link{color:inherit}
.kicker-link:hover{text-decoration:underline}
/* ── Kart nefes payı ──────────────────────────────────────────────────────
Kart içerikleri kutunun tam sınırından başlıyordu; görsel de metin de
kenara yapışıyordu. Her yönden en az 6px iç boşluk. */
.card{padding:6px}
.card:has(> .media){padding:6px}
.card .media{margin-bottom:var(--space-2)}
.card .k,.card h3,.card h2,.card .ex,.card .m{padding-left:2px;padding-right:2px}
.cb-list .card{padding:6px}
.grid .card,.cb-grid .card{padding:6px}
/* Kart zemini görünür olsun ki iç boşluk anlam kazansın */
.grid .card,.cb-list .card{border-radius:10px;transition:background .16s}
.grid .card:hover,.cb-list .card:hover{background:var(--paper-2)}
/* Etkinlik sayfası: sol haberler, sağ takvim + yaklaşanlar */
.evgrid-l .grid.c2{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-5)}
.evsh2{margin-top:var(--space-7)}
.evgrid-r{display:flex;flex-direction:column;gap:var(--space-5)}
.evgrid-r .up-ev a{padding:var(--space-3) 0}
@media (max-width:1100px){.evgrid-l .grid.c2{grid-template-columns:1fr}}
/* ── Haber kategorisi şeridi (kategori sayfaları) ─────────────────────── */
.ncat{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:var(--space-5)}
.ncat-c{
font-family:var(--ui);font-size:12.5px;font-weight:500;padding:7px 15px;
border:1px solid var(--line-2);border-radius:30px;color:var(--ink-2);white-space:nowrap;
}
.ncat-c:hover{border-color:var(--ink);color:var(--ink)}
.ncat-c.on{background:var(--accent);color:#fff;border-color:var(--accent)}
/* Takvim içi ay gezinme (gün başlıklarının üstünde) */
.evcal-nav{
display:flex;align-items:center;justify-content:space-between;gap:var(--space-2);
padding-bottom:var(--space-3);margin-bottom:var(--space-3);
border-bottom:1px solid var(--line);
}
.evcal-m{
font-family:var(--disp);font-weight:700;font-size:14.5px;color:var(--ink);
text-align:center;flex:1;
}
.evcal-b{
width:30px;height:30px;flex:none;border:1px solid var(--line-2);border-radius:8px;
display:grid;place-items:center;font-size:15px;color:var(--ink-2);line-height:1;
}
.evcal-b:hover{border-color:var(--accent);color:var(--accent)}
/* ══════════════════════════════════════════════════════════════════════════
PERİYODİK TABLO
Gerçek grup/periyot yerleşimi CSS grid ile; lantanit ve aktinit standart
gösterimde olduğu gibi altta ayrı şeritte.
══════════════════════════════════════════════════════════════════════════ */
.pt-wrap{overflow-x:auto;padding-bottom:var(--space-3);scrollbar-width:thin}
.pt-main{
display:grid;grid-template-columns:repeat(18,minmax(46px,1fr));
gap:4px;min-width:900px;
}
.pt-strip{display:flex;align-items:center;gap:var(--space-4);margin-top:var(--space-3);min-width:900px}
.pt-slabel{
font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;
color:var(--muted);width:86px;flex:none;text-align:right;
}
.pt-row{display:grid;grid-template-columns:repeat(15,minmax(46px,1fr));gap:4px;flex:1}
.pt-el{
position:relative;aspect-ratio:1/1;border:1px solid rgba(255,255,255,.16);
border-radius:7px;padding:3px 2px;cursor:pointer;
display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;
color:#fff;font-family:var(--ui);line-height:1;
transition:transform .16s cubic-bezier(.2,.7,.2,1),box-shadow .16s,z-index 0s;
}
.pt-z{position:absolute;top:3px;left:5px;font-family:var(--mono);font-size:8.5px;opacity:.75}
.pt-s{font-family:var(--disp);font-weight:700;font-size:17px}
.pt-n{font-size:7.5px;opacity:.85;text-align:center;line-height:1.05;
overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;padding:0 1px}
.pt-el:hover,.pt-el:focus-visible{
transform:scale(1.35);z-index:5;box-shadow:0 12px 28px rgba(0,0,0,.35);
outline:2px solid var(--accent-hi);outline-offset:0;
}
.pt-el.on{outline:2px solid var(--accent-hi);outline-offset:0;transform:scale(1.15);z-index:4}
.pt-ph{
background:transparent;border-style:dashed;border-color:var(--line-2);color:var(--muted);
font-family:var(--mono);font-size:9px;cursor:default;
}
.pt-ph:hover{transform:none;box-shadow:none;outline:0}
/* Kategori renkleri */
.pt-ametal{background:linear-gradient(160deg,#1f7a5a,#12523c)}
.pt-soygaz{background:linear-gradient(160deg,#6b4fa8,#42306b)}
.pt-alkali{background:linear-gradient(160deg,#b4562a,#7a3419)}
.pt-toprak-alkali{background:linear-gradient(160deg,#c07a1e,#8a5512)}
.pt-gecis{background:linear-gradient(160deg,#1f5f80,#123c53)}
.pt-metal{background:linear-gradient(160deg,#4a5b6b,#2c3843)}
.pt-yariMetal{background:linear-gradient(160deg,#2f7d7d,#1b5050)}
.pt-halojen{background:linear-gradient(160deg,#2b6ea8,#1a4670)}
.pt-lantanit{background:linear-gradient(160deg,#8a3f6b,#5a2745)}
.pt-aktinit{background:linear-gradient(160deg,#a03a4a,#6b2430)}
.pt-legend{display:flex;flex-wrap:wrap;gap:var(--space-3);margin-bottom:var(--space-5)}
.pt-lg{display:inline-flex;align-items:center;gap:7px;font-family:var(--ui);
font-size:12px;color:var(--ink-2)}
.pt-lg i{width:14px;height:14px;border-radius:4px;display:block;flex:none}
/* Detay paneli */
.pt-detail{
position:relative;margin-top:var(--space-6);padding:var(--space-6);
border:1px solid var(--line);border-radius:16px;background:var(--paper-2);
}
.pt-detail[hidden]{display:none}
.pt-close{
position:absolute;top:10px;right:10px;width:32px;height:32px;border-radius:50%;
border:1px solid var(--line-2);background:var(--paper);color:var(--ink-2);
font-size:18px;line-height:1;cursor:pointer;
}
.pt-close:hover{border-color:var(--accent);color:var(--accent)}
.pt-d-head{display:flex;align-items:center;gap:var(--space-5);margin-bottom:var(--space-5)}
.pt-d-cell{
width:86px;height:86px;flex:none;border-radius:12px;color:#fff;
display:flex;flex-direction:column;align-items:center;justify-content:center;
font-family:var(--disp);position:relative;
}
.pt-d-cell span{position:absolute;top:7px;left:9px;font-family:var(--mono);font-size:11px;opacity:.8}
.pt-d-cell b{font-size:34px;font-weight:700}
.pt-d-cat{
font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
color:var(--accent);display:block;margin-bottom:4px;
}
.pt-detail h3{font-family:var(--disp);font-size:var(--fs-h2);margin:0 0 3px;line-height:1.15}
.pt-d-en{font-family:var(--ui);font-size:13px;color:var(--muted)}
.pt-d-dl{display:grid;grid-template-columns:auto 1fr;gap:6px var(--space-5);margin:0 0 var(--space-5)}
.pt-d-dl dt{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;
text-transform:uppercase;color:var(--muted)}
.pt-d-dl dd{font-family:var(--ui);font-size:14px;color:var(--ink);margin:0}
.pt-d-uses{padding:var(--space-4);border-radius:12px;background:var(--paper);
border:1px solid var(--line);margin-bottom:var(--space-4)}
.pt-d-ut{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
color:var(--accent);display:block;margin-bottom:6px}
.pt-d-uses p{font-family:var(--read);font-size:15px;line-height:1.6;color:var(--ink-2);margin:0}
.pt-d-more{font-family:var(--ui);font-size:13.5px;font-weight:600;color:var(--accent)}
.pt-d-more:hover{text-decoration:underline}
@media (max-width:640px){
.pt-d-head{flex-direction:column;align-items:flex-start;gap:var(--space-3)}
.pt-detail{padding:var(--space-4)}
}
/* ══════════════════════════════════════════════════════════════════════════
ARAÇLAR & OYUNLAR ŞERİDİ (footer üstü, her sayfada)
══════════════════════════════════════════════════════════════════════════ */
.tools-strip{
background:var(--paper-2);border-top:1px solid var(--line);
padding:var(--space-7) 0 var(--space-8);
}
.ts-head{margin-bottom:var(--space-5);max-width:62ch}
.ts-k{
font-family:var(--mono);font-size:var(--fs-meta);letter-spacing:.14em;
text-transform:uppercase;color:var(--accent);display:block;margin-bottom:6px;
}
.ts-head h2{font-family:var(--disp);font-size:var(--fs-h2);line-height:1.15;margin:0 0 6px}
.ts-head p{font-family:var(--read);font-size:14.5px;line-height:1.55;color:var(--ink-2);margin:0}
.ts-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:var(--space-3)}
.ts-c{
display:flex;flex-direction:column;gap:7px;min-width:0;
background:var(--paper);border:1px solid var(--line);border-radius:12px;
padding:var(--space-4);transition:border-color .16s,transform .16s,box-shadow .2s;
}
.ts-c:hover{border-color:var(--accent);transform:translateY(-2px);box-shadow:var(--shadow)}
.ts-c .pt-cell{align-self:flex-start;font-size:11px;padding:3px 5px;min-width:24px}
.ts-t{font-family:var(--disp);font-weight:700;font-size:14.5px;line-height:1.2;color:var(--ink)}
.ts-c:hover .ts-t{color:var(--accent)}
.ts-d{font-family:var(--ui);font-size:11.5px;line-height:1.45;color:var(--muted)}
/* Bulunulan sayfanın kendi kutusu gizlenir (footer JS işaretler) */
.ts-c[hidden]{display:none}
@media (max-width:1100px){.ts-grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:640px){.ts-grid{grid-template-columns:repeat(2,1fr)};.tools-strip{padding:var(--space-6) 0}}
/* ── Kutu görselleri (satır içi SVG) ────────────────────────────────────
Her kutunun kendi rengi var; renk .ts-art'ta currentColor üzerinden
akıyor, böylece SVG'ler tek bir CSS kuralıyla temalanıyor. */
.ts-art{
display:block;width:100%;aspect-ratio:96/56;border-radius:8px;
background:var(--paper-2);border:1px solid var(--line);
margin-bottom:2px;overflow:hidden;color:var(--accent);
}
.ts-art svg{width:100%;height:100%;display:block}
.ts-c:hover .ts-art{background:var(--paper)}
.ts-art .cell,.ts-art .a,.ts-art .b,.ts-art .c{
fill:currentColor;stroke:none;
}
.ts-art .a{opacity:.14}
.ts-art .b{opacity:.24}
.ts-art .c{opacity:.34}
.ts-art .cell{opacity:.16}
.ts-art .hi{fill:currentColor;opacity:.85}
.ts-art .fill{fill:currentColor;opacity:.18}
.ts-art .ln{stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;fill:none;opacity:.7}
.ts-art .run{stroke:currentColor;stroke-width:2.4;stroke-linecap:round;fill:none;opacity:.85}
.ts-art .dot{fill:currentColor;opacity:.75}
.ts-art .drop{fill:currentColor;opacity:.2}
.ts-art .drop.hi{opacity:.4}
.ts-art .s1{fill:currentColor;opacity:.5}
.ts-art .s2{fill:currentColor;opacity:.34}
.ts-art .s3{fill:currentColor;opacity:.2}
.ts-art .sym{
font-family:var(--mono);font-size:9px;font-weight:700;
fill:var(--paper);text-anchor:middle;
}
.ts-art .sym.big{font-size:13px;fill:currentColor;opacity:.9}
.ts-art .sym.sm{font-size:7.5px;fill:currentColor;opacity:.9}
/* Kutu başına renk — şerit tek renk blok gibi durmasın */
.ts-1 .ts-art{color:#0B5D3B}
.ts-2 .ts-art{color:#1F6F8B}
.ts-3 .ts-art{color:#8A5A00}
.ts-4 .ts-art{color:#7A3E9D}
.ts-5 .ts-art{color:#B03A2E}
.ts-6 .ts-art{color:#12303F}
.ad-rail-sticky{position:sticky;top:64px}
/* Sağ sütun yoksa (mobil) kutular yatay şerit olur */
.tc-rail-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-5);margin:var(--space-6) 0}
.tc-rail-strip .ad{display:none}
@media (max-width:900px){.tc-rail-strip{grid-template-columns:1fr}}
/* Yoğunluk — bölümler arası boşluk C5'te 64px'ti, sayfa dağınık duruyordu */
.section{padding-top:var(--space-7);padding-bottom:var(--space-7)}
/* Üst taraf toplansın: logo satırı 40px'e yakın daralıyor */
.mast .wrap{padding-top:var(--space-4);padding-bottom:var(--space-4);gap:var(--space-6)}
.mast .logo-img{width:190px;height:auto}
.mast-ad .ad{max-height:74px}
.catblock{margin:0 0 var(--space-6)}
.home-grid{gap:var(--space-6)}
.home-rail{gap:var(--space-5)}
/* Y1 · Mobil sticky alt banner — §9, en yüksek görüntülenebilirlik */
.ad-sticky{
position:fixed;left:0;right:0;bottom:0;z-index:8500;
display:flex;align-items:center;justify-content:center;
background:var(--paper);border-top:1px solid var(--line);
padding:var(--space-1) 0;min-height:52px;
box-shadow:0 -2px 12px rgba(16,22,28,.08);
}
.ad-sticky[hidden]{display:none}
.ad-sticky .ad{border:0;background:none;margin:0}
.ad-sticky-x{
position:absolute;top:-11px;right:8px;width:22px;height:22px;border-radius:50%;
border:1px solid var(--line);background:var(--paper);color:var(--ink-2);
font-size:15px;line-height:1;cursor:pointer;display:grid;place-items:center;
}
@media (min-width:768px){ .ad-sticky{display:none} }
/* Sticky varken çerez banner'ı üstüne binmesin */
.ad-sticky:not([hidden]) ~ .cc{bottom:64px}
.card .media{aspect-ratio:16/9;overflow:hidden;background:var(--paper-2)}
.card .media img{width:100%;height:100%;object-fit:cover;display:block}
/* ── MOBİL ARAMA ─────────────────────────────────────────────────────────
Eski davranış: ≤1040px'te input width:0'a iniyordu, ama dosyanın sonundaki
`.nav .navsearch input{width:190px}` kuralı (aynı özgüllük, daha sonra)
onu eziyordu. Sonuç: 40px'lik kutuya sıkışmış 21px'lik kırpık input.
Yeni davranış: mobilde arama kendi satırında TAM GENİŞLİK — daralan/kırpılan
bir kutu yok. .cats zaten mobilde display:none, satır boş kalıyordu. */
@media (max-width:1040px){
.nav .wrap{flex-wrap:wrap;row-gap:0;height:auto} /* tc.css sabit yükseklik veriyor; 2. satır sığmıyordu */
.nav{max-height:none} /* 56px'lik tavan arama satırını kırpıyordu */
.nav .navsearch{
order:9;flex:1 0 100%;width:100%;box-sizing:border-box;
margin:0 0 10px;padding:0 4px 0 2px;height:42px;border-radius:8px;
background:var(--paper-2);overflow:visible;
}
.nav .navsearch button{flex:none;width:38px;height:40px;display:grid;place-items:center}
.nav .navsearch input,
.nav .navsearch:focus-within input{
flex:1 1 auto;width:auto;min-width:0;
padding:9px 10px 9px 2px;font-size:15px; /* iOS 16px altı zoom yapar; 15px sınırda kalıyor */
}
.nav .navsearch input::placeholder{opacity:1}
}
@media (max-width:1040px){
/* Üst bar: dar ekranda üyelik bağlantıları kırpılmasın */
.util .wrap{flex-wrap:wrap;row-gap:2px;height:auto;min-height:40px}
.uright{flex:none;margin-left:auto}
}
/* ── HOUSE AD — dar ekranda yatay dizilim ────────────────────────────────
--adh:90px (leaderboard) kreatifinde .ah-tx satır oluyor: 4 metin yan yana.
390px'te her biri ~60px'lik sütuna sıkışıp kelimeler hecelere bölünüyordu
("Tur / kco / at"). Mobilde metin yeniden sütun; alt başlık ve CTA gizli. */
@media (max-width:720px){
.ad[style*="--adh:90px"] .ad-house{padding:8px 12px;gap:10px}
.ad[style*="--adh:90px"] .ad-house .ah-tx{flex-direction:column;align-items:flex-start;gap:1px}
.ad[style*="--adh:90px"] .ad-house .ah-t{
font-size:13.5px;line-height:1.25;overflow-wrap:normal;hyphens:none;
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.ad[style*="--adh:90px"] .ad-house .ah-s,
.ad[style*="--adh:90px"] .ad-house .ah-c{display:none}
.ad[style*="--adh:90px"] .ad-house .ah-k{font-size:9px}
}
/* Son dakika şeridi: metin etiketin kenarında sert kesiliyordu — kenarlara
yumuşak geçiş. mask-image desteklenmezse şerit olduğu gibi kalır. */
.breaking .track{
-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 18px,#000 calc(100% - 26px),transparent 100%);
mask-image:linear-gradient(90deg,transparent 0,#000 18px,#000 calc(100% - 26px),transparent 100%);
}
/* ── PİYASA ŞERİDİ: SABİT GRID ───────────────────────────────────────────
Kayan şerit kaldırıldı (tc_ui.php). Kalemler tek kopya ve sabit duruyor;
sığmayanlara yatay kaydırma + snap ile ulaşılıyor. Sol kenardaki solma
kaldırıldı — artık ilk kalemi soldurmanın anlamı yok, yalnızca sağda
"devamı var" ipucu kalıyor. */
.util .uticker-grid .utrack{
display:flex;align-items:center;
overflow-x:auto;overflow-y:hidden;
scroll-snap-type:x proximity;
scrollbar-width:none;-ms-overflow-style:none;
-webkit-mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 28px),transparent 100%);
mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 28px),transparent 100%);
}
.util .uticker-grid .utrack::-webkit-scrollbar{display:none}
.util .uticker-grid .utrack .mk{scroll-snap-align:start}
.util .uticker-grid .utrack .mk:first-child{border-left:0;padding-left:0}
/* ── DİL MENÜSÜ görünürlüğü ────────────────────────────────────────────────
.lang-menu (z-index:100) masthead reklamının (.ad-house, kendi stacking
context'i) ARKASINDA kalıyordu — menü açılıyor ama görünmüyordu (mobil ve
masaüstü). .util'a stacking context verip menüyü öne alıyoruz. */
.util{position:relative;z-index:200}
.util .langsw{position:relative}
.util .lang-menu{z-index:300}
/* .util overflow:hidden (tc.css, piyasa şeridini tek satırda tutmak için) dil
menüsünü de kırpıyordu — menü util'in altına taşıyor. Yalnızca menü açıkken
taşmaya izin ver; piyasa şeridi normalde hâlâ kırpılı. */
.util:has(.langsw.open){overflow:visible}
/* Mobil drawer, .util'in z-index:200'ünün (dil menüsü için verildi) ALTINDA
kalıyordu → açık drawer'da logo siyah üst barın altında görünüyordu.
Drawer ve backdrop'u her şeyin üstüne al. */
.drawer{z-index:500 !important}
.drawer-backdrop{z-index:499 !important}
/* v3 · 5.2 — Trend okunma sayıları (.rk-meta: 103, 67…) reklamverene doğrudan
trafik seviyesini ilan ediyordu. Sıralama kalsın, sayı kalksın. */
.rk-meta{display:none !important}
/* v3 · 2.6 — Araçlar şeridi dekoratif SVG element harfleri (C, Fe…) aria-hidden
zaten; kopyalanmasın/seçilmesin diye user-select + pointer-events kapat. */
.ts-art{user-select:none;-webkit-user-select:none;pointer-events:none}
/* ══ OYUN TAM EKRAN — tüm oyunlar için ortak ══════════════════════════════
Oyunlar mobilde sayfanın çok aşağısındaydı (header + açıklama + kutular
sonra canvas); oynamak için kaydırmak gerekiyordu. "Tam ekran" butonu oyun
kökünü (data-fs-target) viewport'a alıyor — kaydırmasız, odaklı. Gerçek
Fullscreen API yerine CSS overlay: iOS Safari'de FS API kısıtlı ve
canvas'ı bozuyor; CSS overlay her yerde güvenilir. */
.game-fs-btn{
display:inline-flex;align-items:center;gap:6px;cursor:pointer;
border:1px solid var(--line);background:var(--paper-2);color:var(--ink);
border-radius:10px;padding:10px 14px;font:700 13px/1 var(--ui);
}
.game-fs-btn:hover{border-color:var(--accent);color:var(--accent)}
.game-fs-btn .fs-ic{font-size:15px;line-height:1}
body.game-fs-lock{overflow:hidden}
.game-fs-on{
position:fixed !important;inset:0;z-index:9990;margin:0 !important;max-width:none !important;
width:100vw;height:100vh;height:100dvh;overflow:auto;border-radius:0 !important;
background:linear-gradient(180deg,#0b1020 0%,#12303f 100%);
padding:calc(env(safe-area-inset-top,0px) + 46px) 10px calc(env(safe-area-inset-bottom,0px) + 10px);
display:flex;flex-direction:column;gap:10px;justify-content:center;align-items:stretch;
}
/* Fullscreen'de canvas/oyun alanı ekrana sığar (contain), dikey ortalı. */
.game-fs-on canvas{max-width:100%;max-height:72vh;height:auto !important;width:auto !important;margin:0 auto;display:block}
.game-fs-on .lrg-canvas,.game-fs-on .fy-arena{max-height:74vh}
.game-fs-close{
position:fixed;top:calc(env(safe-area-inset-top,0px) + 8px);right:10px;z-index:9999;
display:none;align-items:center;gap:5px;cursor:pointer;border:0;border-radius:10px;
background:rgba(255,255,255,.14);color:#fff;padding:9px 13px;font:700 13px/1 var(--ui);
-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
}
body.game-fs-lock .game-fs-close{display:inline-flex}
.game-fs-close:hover{background:rgba(255,255,255,.24)}
/* Fullscreen'de metin kutuları koyu zemine uyumlu */
.game-fs-on .lrg-stat,.game-fs-on .fy-card{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.14)}
.game-fs-on .lrg-label,.game-fs-on .lrg-value{color:#fff}
.game-fs-on .lrg-help,.game-fs-on .edg-lede,.game-fs-on .section-head{display:none}
/* Tam ekranda HUD kompakt (yatay, küçük) → canvas'a maksimum yer. */
.game-fs-on .lrg-hud{grid-template-columns:repeat(4,auto);justify-content:center;gap:8px;flex:0 0 auto}
.game-fs-on .lrg-stat{padding:6px 12px;min-height:0}
.game-fs-on .lrg-value{font-size:15px}
.game-fs-on .lrg-act button{min-height:40px;padding:8px 14px;width:auto}
.game-fs-on .game-fs-btn{display:none} /* zaten tam ekran; çıkış sağ üstte */
.game-fs-on .lrg-stat:has(.game-fs-btn){display:none} /* gizli butonun boş kutusu */
.game-fs-on .lrg{gap:10px;height:100%;justify-content:center}
.sh-actions{display:inline-flex;align-items:center;gap:10px;flex-wrap:wrap}
/* Formül: fullscreen'de arena büyür (oyun getGameWidth/Height'i kabdan okuyor). */
.game-fs-on .fy{gap:8px;height:100%;display:flex;flex-direction:column;justify-content:center}
.game-fs-on .fy-arena{aspect-ratio:auto;flex:1 1 auto;min-height:0;max-height:78vh}
.game-fs-on .fy-hud{flex:0 0 auto}
.game-fs-on .fy-m{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.14)}
.game-fs-on .fy-m span,.game-fs-on .fy-m b,.game-fs-on .fy-m i{color:#fff}
.game-fs-on .fy-need,.game-fs-on .fy-status{color:#fff}
/* Fullscreen'de formül HUD kompakt — 6 kutu oyun alanını eziyordu. */
.game-fs-on .fy-hud{grid-template-columns:repeat(auto-fit,minmax(56px,1fr));gap:4px}
.game-fs-on .fy-m{padding:4px 7px}
.game-fs-on .fy-m span{font-size:8px;letter-spacing:.04em}
.game-fs-on .fy-m b{font-size:12px}
.game-fs-on .fy-m i{font-size:9px}
.game-fs-on .fy-need{padding:6px 10px}
/* ── MOBİL: oyunu ÜSTE çek (kaydırmasız başlangıç) ─────────────────────────
Normal modda da oyun alanı açıklama/yardımdan ÖNCE gelsin; kullanıcı
sayfayı açar açmaz oyunu görsün. Flex order ile yeniden sıralanıyor. */
@media (max-width:768px){
.game-mobile{display:flex;flex-direction:column}
.game-mobile .section-head{order:1;margin-bottom:8px}
.game-mobile .game-area{order:2}
.game-mobile .edg-lede{order:4;margin-top:12px;font-size:13px}
.game-mobile .lrg-help,.game-mobile .fy-help{order:5}
}
/* Üye kutusu (üst bar) — giriş yapınca ad + avatar + çıkış. */
.util .uacc{display:inline-flex;align-items:center;gap:6px;font-weight:600}
.util .uava{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;
background:var(--accent);color:#fff;font:700 10px/1 var(--ui);text-transform:uppercase}
.util .uacc:hover{color:var(--accent-hi)}
/* Drawer alt üyelik alanı — userbox buraya da giriyor; dikey diz. */
.drawer-foot{display:flex;flex-direction:column;gap:8px}
.drawer-foot .ulink,.drawer-foot .abone{display:block;text-align:center;padding:11px;
border-radius:9px;font:700 14px/1 var(--ui);text-decoration:none}
.drawer-foot .ulink{border:1px solid var(--line);color:var(--ink)}
.drawer-foot .abone{background:var(--accent);color:#fff}
.drawer-foot .uacc{justify-content:center}
/* ── EDİTÖRDEN / YAZARLAR sağ kolon — metin sıkışması ──────────────────────
.rt-list li a display:grid (thumbnail'lı liste düzeni: görsel + metin).
Editörden/Yazarlar öğelerinde GÖRSEL YOK → metin ilk 64px'lik track'e
sıkışıp kelime kelime alt alta düşüyordu. Görselsiz öğeleri block yap. */
.home-rail .rail-box .rt-list li a:not(:has(img)){display:block}
.home-rail .rail-box .rt-list li a:not(:has(img)) > span{display:block;width:100%}
.home-rail .rail-box .rt-list h4{white-space:normal;font-size:14px;line-height:1.34}
.home-rail .rail-box .rt-list .c{display:block;margin-top:4px}
/* ── Patlak görsel placeholder ─────────────────────────────────────────────
Bazı haber kapakları storage'dan taşınmamış (404). Kırık görsel yerine
markalı bir kimya deseni: gri "hata" kutusu yerine molekül simgeli gradyan. */
.media.media-ph{
background:linear-gradient(135deg,rgba(13,92,74,.10),rgba(31,111,139,.14)) !important;
position:relative;overflow:hidden;
}
.media.media-ph::after{
content:'';position:absolute;inset:0;
background-image:url("data:image/svg+xml,");
background-repeat:no-repeat;background-position:center;background-size:44px 44px;opacity:.30;
}
.media.media-ph::before{
content:'turkchem';position:absolute;left:50%;bottom:14%;transform:translateX(-50%);
font:700 10px/1 var(--mono);letter-spacing:.14em;color:rgba(13,92,74,.45);text-transform:uppercase;
}
/* ══════════════════════════════════════════════════════════════════════════
MOBİL FOOTER SIKIŞTIRMA
Ölçüm (puppeteer 390x844, /tr/haberler): araçlar şeridi 938px + footer
1.390px = 2.328px, yani ~2,8 ekran boyu kuyruk. İki sebep:
1) .foot .cols 560'ın altında TEK kolona düşüyor (4 blok alt alta = 839px)
2) araç kutularının kapak SVG'si kutu başına ~110px götürüyor (grid 647px)
Burada ikisi de toparlanıyor. Masaüstü düzeni değişmiyor.
══════════════════════════════════════════════════════════════════════════ */
@media (max-width:640px){
/* Araç kutuları: kapak SVG'si mobilde düşüyor, element hücresi (.pt-cell)
görsel imza olarak kalıyor — kutu 215px'ten ~105px'e iniyor. */
.tools-strip{padding:var(--space-5) 0 var(--space-6)}
.ts-head{margin-bottom:var(--space-4)}
.ts-head h2{font-size:21px}
.ts-head p{font-size:13px;line-height:1.45}
.ts-grid{gap:8px}
.ts-c{padding:11px 12px;gap:3px;border-radius:10px}
.ts-c .ts-art{display:none}
.ts-c .pt-cell{font-size:10px;padding:2px 4px;min-width:21px}
.ts-t{font-size:13.5px}
.ts-d{font-size:11px;line-height:1.35}
}
@media (max-width:560px){
/* Kolonlar iki sütuna dönüyor. "Bölümler" (7 bağlantı) iki satır boyunca
uzatılıyor; sağ sütunda Kurumsal + Yasal alt alta oturuyor, böylece boş
hücre kalmıyor. Marka bloğu tam genişlikte üstte. */
.foot .cols{grid-template-columns:1fr 1fr;gap:20px 18px;padding-bottom:24px}
.foot .cols > :first-child{grid-column:1 / -1}
.foot .cols > :nth-child(2){grid-row:span 2}
.foot-logo{height:32px}
.foot p{font-size:13px;line-height:1.5;margin:8px 0 0;max-width:none}
.foot h6{margin-bottom:9px}
.foot ul{gap:8px}
.foot ul a{font-size:13.5px}
/* Bülten: e-posta alanı ve buton tek satırda (alt alta iken ~60px fazlaydı).
Tip seçicili — tc.css'teki .foot-top .ft-nl input kuralını aşmak için
ve KVKK onay kutucuğuna dokunmamak için (bkz. tuzak 12). */
.foot-top .ft-nl h5{font-size:17px;margin-bottom:9px}
.foot-top .ft-nl form{flex-wrap:wrap;gap:8px}
.foot-top .ft-nl input[type="email"]{flex:1 1 140px;width:auto;min-width:0;max-width:none;padding:11px 13px}
.foot-top .ft-nl button{flex:0 0 auto;padding:11px 16px}
.nl-consent{font-size:11.5px;line-height:1.35;margin-top:8px;max-width:none}
/* Takip: "Bizi takip edin" etiketi ikonlarla aynı satıra */
.ft-follow{display:flex;align-items:center;gap:9px 12px;flex-wrap:wrap}
.ft-follow .ft-fl{margin:0}
.ft-social{margin-bottom:0}
.ft-social a{width:36px;height:36px}
.foot .bottom{padding-top:16px;gap:4px 14px;font-size:12px;flex-wrap:wrap}
/* Dikey boşluklar: tc.css'te foot-top 32px dolgu + 44px alt marj ile
masaüstü için ayarlı; mobilde tek başına ~90px götürüyordu. */
.foot{margin-top:36px;padding-bottom:20px}
.foot-top{padding:22px 0;margin-bottom:24px;gap:14px}
.nl-status{margin-top:6px}
}
/* ══════════════════════════════════════════════════════════════════════════
v4 · 2.8 — Dekoratif SVG sembolleri metin olarak sayılmasın
Araç kutularının kapak çiziminde element sembolleri var (C, Fe, K/O, H/O/N/
C/S). Sarmalayıcı zaten aria-hidden, yani ekran okuyucu görmüyor; ama SVG
düğümü seçilebilir ve kopyalanabilir olduğu için metin çıkarımında
"KO Bu Kimya Bulmacası" gibi anlamsız diziler üretiyordu.
══════════════════════════════════════════════════════════════════════════ */
.ts-art,.ts-art svg,.ts-art text{user-select:none;-webkit-user-select:none;pointer-events:none}
/* ══════════════════════════════════════════════════════════════════════════
v4 · 6.1 — Bölüm numaraları kaldırıldı
Ana sayfada yalnızca "01 Gündem" ve "03 Dergilerimiz" numaralıydı; aradaki
10 bölüm numarasız. Yani numara bir sıra bilgisi taşımıyor, eksik bir dizi
izlenimi veriyordu. Numara legacy index-legacy.php'de gömülü ve o dosyaya
yazma erişimi yok — bu yüzden görsel olarak kaldırılıyor.
══════════════════════════════════════════════════════════════════════════ */
.section-head h2 .no{display:none}
/* ══════════════════════════════════════════════════════════════════════════
R1 · REKLAM KABI — KREATİF EZİLMESİ
Oran zaten tc.css'te doğru kuruluyor: aspect-ratio:calc(var(--adw)/var(--adh)).
Sorun, oranı bozan İKİ kap kısıtıydı (ölçüldü, 24 Ağu 2026):
1) .mast-ad .ad{max-height:74px} — genişlik 728px'e sabitken yükseklik
74px'e kırpılıyordu: kutu 728x74, yani oran 9,84 (olması gereken 8,09).
Kreatif dikeyde sıkışıyordu. width:auto ile artık genişlik de kısılıyor,
kutu 599x74 — oran korunuyor, kreatif deforme olmuyor.
NOT: alan ad_zones'ta 728x90 satılıyor, gerçekte 599x74 basılıyor.
Üst bar 90px'e çıkarılmadıkça bu fark kapanmaz (bkz. devir notu).
2) .phead-ad{max-width:500px} — kategori başlığındaki alan 970x90 olarak
basılıyor (functions.php ad_zones'taki 728x90'ı ezip 970 veriyor), kap
500px'e sıkıştırınca kutu 500x46'ya iniyordu. Kap gerçek ölçüye açıldı.
══════════════════════════════════════════════════════════════════════════ */
/* width:auto KULLANMA: kreatifler (.ad-i) artık position:absolute, yani akışta
içerik kalmıyor ve kutu genişliği sıfıra çöküyor — masthead reklamı tamamen
kayboluyor (canlıda görüldü). Genişlik 100% kalıp max-width ile kısılıyor:
74px yükseklik x 728/90 oran = 599px. */
.mast-ad .ad{max-height:74px;max-width:599px}
/* Kategori başlığı: BAŞLIK önceliklidir, reklam daralır.
970px'lik kap 1200px'lik wrap'ta başlığa ~200px bırakıyordu ve başlık
harf harf alt alta iniyordu. Reklam artık esneyebiliyor; başlığın
asgari genişliği garanti. */
.phead-head{flex:1 1 auto;min-width:min(360px,100%)}
.phead-ad{flex:0 1 auto;width:100%;max-width:680px;min-width:0}
.phead-ad .ad{max-width:680px}
@media(max-width:1100px){
.phead-ad{max-width:460px}
.phead-ad .ad{max-width:460px}
}
/* Yerleşim düzenleyicisinin (tc-footer, tc-ad-layout) bandı boşaltmak için
kullandığı sınıf. */
.ad.ad-suppressed{display:none !important}
/* ── DERGİLERİMİZ kutusu (tc_dergi.php) ─────────────────────────────────
Sağ sütunda sektöre uyan dergilerin kapağı. Kapaklar chemmedia'dan
geliyor (dış adres), o yüzden yükleme hatasına dayanıklı: görsel
gelmezse .dgb-ph baş harfleri gösteriliyor. */
.dgb .dgb-g{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:2px 0 0}
.dgb-c{display:block;text-decoration:none;color:inherit;min-width:0}
.dgb-m{display:block;aspect-ratio:3/4;border-radius:8px;overflow:hidden;
background:var(--paper-2,#eef2f5);border:1px solid var(--line,#e2e8ee);
display:grid;place-items:center}
.dgb-m img{width:100%;height:100%;object-fit:cover;display:block}
.dgb-ph{font:800 20px/1 var(--mono,monospace);color:var(--muted,#8593a0);letter-spacing:.04em}
.dgb-t{display:block;margin:7px 0 0;font:700 12.5px/1.25 var(--ui);color:var(--ink,#12202b);
overflow-wrap:anywhere}
.dgb-d{display:block;margin:2px 0 0;font:400 11px/1.35 var(--ui);color:var(--muted,#8593a0);
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.dgb-c:hover .dgb-m{border-color:var(--accent,#0d5c4a)}
.dgb-c:hover .dgb-t{color:var(--accent,#0d5c4a)}
.dgb-all{display:inline-block;margin:12px 0 0;font:600 12px/1 var(--ui);
color:var(--accent,#0d5c4a);text-decoration:none}
.dgb-all:hover{text-decoration:underline}
/* Tek dergi kalırsa kapak kutuyu kaplamasın */
.dgb .dgb-g:has(.dgb-c:only-child){grid-template-columns:minmax(0,150px)}
@media(max-width:900px){.dgb .dgb-g{grid-template-columns:repeat(4,1fr)}}
@media(max-width:560px){.dgb .dgb-g{grid-template-columns:1fr 1fr}}
/* Çözüm sonrası içerik sütunundaki reklam bölümlere yapışmasın. */
.ad-lead,.ad-in_content{margin-block:var(--space-7,34px)}
/* ── Mobilde yatay reklam kabı ─────────────────────────────────────────────
728x90 alan 390px ekranda 358x44'e iniyor. İçindeki house ad kreatifi iki
satır başlık + iç boşluk istiyor (~50px), yani kaba sığmıyordu. Dar ekranda
oran serbest bırakılıp asgari yükseklik veriliyor.
Görsel kreatifler contain ile ortalanıyor, deforme olmuyor — ama 728px'lik
bir kreatif 358px'te %49 ölçekle basılıyor. Kalıcı çözüm mobil için ayrı
320x100 kreatif (mobil_sticky alanı tanımlı ama kampanyası yok). */
@media(max-width:640px){
.ad[style*="--adh:90px"]{aspect-ratio:auto;min-height:92px}
.ad[style*="--adh:90px"] .ad-house{padding:10px 12px}
}
/* ══════════════════════════════════════════════════════════════════════════
R3 · KREATİF ROTASYONU — asıl "reklamlar yan yana çıkıyor" sorunu
adSlot() bir alandaki TÜM kreatifleri havuz halinde basıyor ve ilkine
.on veriyor: ………
Geri kalanını gizleyecek kural ile 8 saniyede bir sırayı değiştirecek JS
sitede HİÇ YOKTU (ölçüldü: tc.css'te ve tc-header'da .ad-i geçmiyor).
Sonuç: bir alandaki 5 kreatif aynı anda, yan yana sıkışarak basılıyordu —
ana sayfada toplam 16 kreatif aynı anda ekrandaydı.
Kural JS'ten bağımsız çalışır: JS düşse bile yalnızca .on görünür.
══════════════════════════════════════════════════════════════════════════ */
.ad > .ad-i{position:absolute;inset:0;display:none}
.ad > .ad-i.on{display:block}
.ad > .ad-i img{width:100%;height:100%;object-fit:contain;display:block}
/* ══════════════════════════════════════════════════════════════════════════
D1 · DİL MENÜSÜ — yalnızca TR ve EN
Anahtarın markup'ı legacy header'dan geliyor (tc_langsw) ve orada
beş dil basılıyor. Ama gerçek çeviri yalnızca TR ve EN için var:
app/lang.php sözlüğünde de/az/ru karşılıkları yok, kategori ve menü
adlarının EN çevirisi tc_ui.php'deki $NAV_EN sözlüğünden geliyor ve o da
yalnızca EN. DE/AZ/RU seçilince arayüz Türkçe kalıyordu — var olmayan bir
dil seçeneği sunmak kullanıcıyı yanıltıyor.
Markup'a erişim olmadığı için seçenekler burada gizleniyor; kabul edilen
locale listesi de tc_ui.php'de ['tr','en'] olarak daraltıldı, böylece
elle yazılan ?lang=de adresi de yarım çeviri üretmiyor.
Kalıcı çözüm: legacy header'da beş dilin basılmasını durdurmak (R5 benzeri
geliştirici işi).
══════════════════════════════════════════════════════════════════════════ */
.lang-menu .lang-opt[href="?lang=de"],
.lang-menu .lang-opt[href="?lang=az"],
.lang-menu .lang-opt[href="?lang=ru"]{display:none}
/* ══════════════════════════════════════════════════════════════════════════
D2 · ŞABLON İÇİ İKİ DİLLİLİK
Şablona gömülü sabit metinler (iletişim, reklam, arama, piyasa sayfaları)
sözlükle çevrilemiyor: uzun paragraflar ve tablo hücreleri tam eşleşmeye
uygun değil. İki dil de şablonda duruyor, görünen dili seçiyor.
JS gerekmiyor — sayfa açılışında doğru dil basılı geliyor, titreme yok.
══════════════════════════════════════════════════════════════════════════ */
html[lang="en"] .i18n-tr{display:none}
html:not([lang="en"]) .i18n-en{display:none}
/* ── MPU 400x250 (ekip revizesi) ────────────────────────────────────────
Sağ kolon 300 → 400px. Kural tc.css'ten SONRA yüklendiği için eşit
özgüllük yeterli. ad-half_page 300px kalıyor (kreatif 300x600) ve
geniş kolonda ortalanıyor. */
.home-grid{grid-template-columns:1fr 400px}
.ad.ad-mpu:not(.ad-half_page){max-width:400px}
.home-rail > .ad{margin-left:auto;margin-right:auto}
/* tc.css'teki 980px kuralını TEKRARLA — yoksa bu dosya onu ezer ve
mobilde sağ kolon tek sütuna düşmez. */
@media(max-width:980px){
.home-grid{grid-template-columns:1fr}
.ad.ad-mpu:not(.ad-half_page){max-width:400px;width:100%}
}
/* Haber detayı sağ kolonu da 400px — MPU her sayfada aynı ölçüde olsun. */
.art-wrap{grid-template-columns:minmax(0,1fr) 400px}
.art-rail > .ad{margin-left:auto;margin-right:auto}
@media(max-width:980px){ .art-wrap{grid-template-columns:1fr} }
/* ══════════════════════════════════════════════════════════════════════════
Y2 · Yerleşimi olmayan reklam alanları — 2026-09-04
Ekip bildirdi: "aşağıdaki alanlar haricindeki alanları yayına aldığımızda
reklamlar sitede görünmüyor." Sebep: 15 alanın 10'unda hiç adSlot() çağrısı
yoktu. Yerleşimler eklendi, ölçüleri de burada tanımlanıyor.
══════════════════════════════════════════════════════════════════════════ */
/* Alan genişliği artık kabın kendi --adw değerinden geliyor. Önceden tc.css'te
sabit `.ad{max-width:728px}` vardı; billboard (970), bülten (600), piyasa
şeridi (200) hepsi 728'e sıkışırdı. Daha özgül kurallar (ad-mpu 400,
ad-half_page 300) bu kuralı ezmeye devam ediyor. */
.ad{max-width:var(--adw,728px)}
/* Billboard — içerik üstü geniş bant, ortalı. */
.ad-billboard-wrap{margin:0 0 var(--space-5)}
.ad.ad-billboard{margin-left:auto;margin-right:auto}
/* Bölüm sponsoru — sağ kolonda, üstünde kim olduğunu söyleyen etiket. */
.ad-bolum{display:block}
.ad-bolum-h{
font:700 11px/1 var(--ui);letter-spacing:.09em;text-transform:uppercase;
color:var(--ink-2);margin:0 0 9px;
}
/* Bülten alanı — footer'daki kayıt formunun yanında. */
.ad-bulten-wrap{margin:var(--space-4) 0 0}
.ad.ad-bulten{margin-left:auto;margin-right:auto}
/* Piyasa şeridi sponsoru — üst bantta, şeridin yanında, küçük (200x44).
.util overflow:hidden olduğu için taşmaması şart. */
.ad-piyasa{flex:none;margin-left:10px}
.ad.ad-piyasa_sponsor{border:0;background:none}
@media(max-width:900px){ .ad-piyasa{display:none} }
/* Arama sonuçları üstü. */
.ad-arama-wrap{margin:0 0 var(--space-5);display:flex;justify-content:center}
/* Interstitial — oturumda bir kez açılan katman. Kapatılabilir olması şart;
kapatma yoksa Google'ın müdahaleci reklam ölçütlerine takılır. */
.ad-inter{
position:fixed;inset:0;z-index:9000;display:grid;place-items:center;
background:rgba(16,22,28,.72);padding:20px;
}
.ad-inter[hidden]{display:none}
.ad-inter-box{position:relative;background:var(--paper);padding:14px;border-radius:8px;
max-width:100%;max-height:100%;overflow:auto}
.ad-inter-x{
position:absolute;top:-12px;right:-12px;width:30px;height:30px;border-radius:50%;
border:1px solid var(--line);background:var(--paper);color:var(--ink);
font-size:19px;line-height:1;cursor:pointer;display:grid;place-items:center;
box-shadow:0 2px 10px rgba(16,22,28,.18);
}