/* Ainesi — küre ekranının stili. 13 Eylül 2026a kadar index.html içinde satır içiydi;
ayrıldı ki tarayıcı bir kez indirip saklasın (anasayfanın HTML i kategori
bağlantıları yüzünden sık değişiyor, 2400 satır stil her seferinde yeniden inmesin). */
:root{
--zemin:#070C15;
--zemin-2:#0E1725;
--kart:rgba(13,21,34,.92);
--murekkep:#F3F6FA;
--murekkep-sonuk:#7E93AC;
--amber:#F5B33C;
--cizgi:rgba(126,147,172,.22);
--kart-cizgi:rgba(122,172,232,.26);
--mavi-hale:rgba(74,150,238,.42);
--acil:#E62D2D; /* son dakika işareti */
--serit-h:64px;
--kart-en:192px; /* kart 2 kat büyük çizilir, ölçek 0.5 ile küçültülür — gerilme olmaz */
}
*{box-sizing:border-box}
/* hidden niteliği her zaman gizlesin — display kuralları onu ezmesin */
[hidden]{display:none !important}
body{
margin:0;
background:var(--zemin);
color:var(--murekkep);
font-family:"IBM Plex Sans",system-ui,-apple-system,Segoe UI,sans-serif;
overflow:hidden;
height:100svh;
position:relative;
}
/* kürenin oturduğu atmosfer — küre formunu belli eden hâle */
body::before{
content:"";
position:fixed;
inset:0 0 var(--serit-h) 0;
background:
radial-gradient(46vmin 46vmin at 50% 47%, rgba(34,62,102,.60) 0%, rgba(16,29,50,.34) 52%, transparent 76%),
radial-gradient(120vmin 90vmin at 50% 122%, rgba(245,179,60,.06) 0%, transparent 62%);
pointer-events:none;
}
header{
position:fixed;
top:0; left:0; right:0;
z-index:9000;
display:flex;
align-items:baseline;
justify-content:space-between;
gap:16px;
padding:20px 24px;
/* Başlık küreyi kapatmasın; içindeki arama kendi `pointer-events`ini
geri açıyor. */
pointer-events:none;
}
header{align-items:center}
/* ——— ARAMA ———
Başlık `pointer-events:none` — küreyi çevirmeyi engellemesin.
Aramanın kendisi tıklanabilir olmalı, o yüzden geri açılıyor. */
.arama{ display:flex; align-items:center; gap:8px; pointer-events:auto }
/* Hesap simgesi bir bağlantı, arama düğmesi bir düğme; görünüşleri
aynı olsun diye aynı sınıfı paylaşıyorlar. */
/* `margin-left:auto` şart: başlık `space-between` ile hizalanıyor ve
üçüncü bir öğe eklenince ortaya düşüyordu. Boşluk simgeden ÖNCE
toplanınca hesap ve arama sağda yan yana kalıyor. */
.hesap-dugme{
text-decoration:none; pointer-events:auto;
flex:0 0 auto; margin-left:auto;
}
.arama-dugme,.arama-suzgec{
display:inline-flex; align-items:center; justify-content:center;
width:40px; height:40px; flex:0 0 auto;
border-radius:999px; border:1px solid var(--cizgi);
background:rgba(11,18,32,.7);
-webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
color:var(--murekkep-sonuk); cursor:pointer;
transition:color .18s ease,border-color .18s ease;
}
.arama-dugme svg,.arama-suzgec svg{
width:18px; height:18px; stroke:currentColor; fill:none;
stroke-width:1.8; stroke-linecap:round;
}
.arama-dugme:hover,.arama-suzgec:hover{color:var(--murekkep);border-color:rgba(126,147,172,.45)}
.arama-dugme:focus-visible,.arama-suzgec:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
.arama-dugme[aria-expanded="true"],.arama-suzgec[aria-expanded="true"]{color:var(--amber);border-color:var(--amber)}
/* ——— KUTU GENİŞLEYEREK AÇILIR ———
*Eskiden `hidden` ile bir anda beliriyordu:* düğmeye basınca ekranın
köşesinde birden bir kutu peydahlanıyor, gözün onu takip edecek
zamanı olmuyordu. Genişleyerek açılınca hareket "bu, o düğmeden
çıktı" diyor — büyüme kendisi bir açıklama.
`hidden` yerine genişlik canlandırılıyor; kapalıyken `visibility`
gizli, yani sekme sırasına da girmiyor. *Yalnız `width:0` yetmezdi:*
içindeki alan hâlâ odaklanabilir kalırdı. `visibility` geçişi
kapanışta gecikmeli, açılışta anında — yoksa kapanırken kutu daha
daralmadan yok oluyor. */
.arama-kutu{
display:flex; align-items:center; gap:6px;
height:40px;
border-radius:999px; border:1px solid transparent;
background:rgba(11,18,32,.82);
-webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
width:0; padding:0; overflow:hidden; opacity:0;
/* *`min-width` olmadan kapanmıyordu:* esnek bir kutunun kendiliğinden
gelen en küçük boyu içeriği kadardır, `width:0` onu geçemez. */
min-width:0;
pointer-events:none;
transition:width .28s cubic-bezier(.4,0,.2,1),
padding .28s cubic-bezier(.4,0,.2,1),
opacity .16s ease;
}
.arama.acik .arama-kutu{
width:min(46vw,260px); padding:0 6px 0 12px;
border-color:var(--cizgi);
opacity:1; pointer-events:auto;
transition:width .28s cubic-bezier(.4,0,.2,1),
padding .28s cubic-bezier(.4,0,.2,1),
opacity .18s ease .06s;
}
@media (prefers-reduced-motion:reduce){
.arama-kutu,.arama.acik .arama-kutu{transition:none}
}
.arama-kutu input{
/* Kutu genişledikçe alan da genişler; sabit genişlik verilseydi
daralan kutunun içinde taşıp kayardı. */
flex:1 1 auto; min-width:0;
border:0; outline:0; background:transparent;
color:var(--murekkep); font:inherit; font-size:14px;
}
.arama-kutu input::placeholder{color:var(--murekkep-sonuk);opacity:.7}
.arama-kutu .arama-suzgec{width:32px;height:32px;border-color:transparent;background:transparent}
.arama-kutu .arama-suzgec svg{width:16px;height:16px}
/* Süzgeç paneli başlığın altında açılır — arama kutusuyla aynı hizada. */
.suzgec-panel{
position:absolute; right:24px; top:calc(100% + 6px);
z-index:9400;
display:grid; gap:10px;
width:min(280px,86vw); padding:14px;
border-radius:16px; border:1px solid var(--cizgi);
background:rgba(11,18,32,.96);
-webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
box-shadow:0 20px 50px rgba(0,0,0,.55);
pointer-events:auto;
}
.suzgec-panel[hidden]{display:none}
.suzgec-panel label{
display:grid; gap:5px;
font-family:"IBM Plex Mono",monospace; font-size:10.5px;
letter-spacing:.1em; text-transform:uppercase;
color:var(--murekkep-sonuk);
}
.suzgec-panel input,.suzgec-panel select{
height:38px; padding:0 10px;
border-radius:9px; border:1px solid var(--cizgi);
background:rgba(243,246,250,.05);
color:var(--murekkep); font:inherit; font-size:13.5px;
}
.suzgec-panel input:focus,.suzgec-panel select:focus{outline:2px solid var(--amber);outline-offset:1px}
.suzgec-dip{display:flex; gap:8px; margin-top:2px}
.suzgec-dip button{
flex:1; min-height:40px; border-radius:999px; font:inherit;
font-size:13px; font-weight:600; cursor:pointer;
}
.suzgec-ikincil{border:1px solid var(--cizgi);background:transparent;color:var(--murekkep-sonuk)}
.suzgec-ikincil:hover{color:var(--murekkep);border-color:rgba(126,147,172,.45)}
.suzgec-birincil{border:1px solid var(--amber);background:var(--amber);color:#0B1220}
.marka{
font-family:"IBM Plex Sans Condensed",sans-serif;
font-weight:300;
font-size:21px;
letter-spacing:.005em;
}
.marka b{color:inherit; font-weight:inherit}
/* İşaret ile yazı TEK ÖBEK. Ölçü em: punto değişince işaret de
birlikte büyüyor, iki yere ayrı sayı yazılmıyor. */
/* .marka FLEX YAPILMADI ve bu bilinçli: flex olunca "göz" metni ile
6 ayrı birer öğe sayılıyor, aralarına da gap giriyor ve
marka "göz 6" diye okunuyordu. İşaret satır içinde duruyor,
yazının dizilişine hiç dokunulmuyor. */
/* 13 Eylül 2026: logo yalnız üç kartlı GOZ işareti, "Ainesi" yazısı
kalktı (Kemal). Yukarıdaki flex notu artık yazı olmadığı için
geçersiz; tek öğe olduğu için flex güvenli. Harfler oyuk. */
.marka{display:inline-flex; align-items:center; line-height:0}
/* Ainesi logosu (15 Eylül 2026): altında "Dijital Haber Ağı" yazısı var,
GOZ kartlarının boyunda okunmuyordu → 2,2em'den 3,3em'e. */
.marka-im{width:auto; height:3.3em; display:block}
.rozet{
font-family:"IBM Plex Mono",monospace;
font-size:10.5px;
letter-spacing:.14em;
text-transform:uppercase;
color:var(--murekkep-sonuk);
white-space:nowrap;
font-variant-numeric:tabular-nums;
}
.sahne{
position:fixed;
inset:0 0 var(--serit-h) 0;
/* kartların kendi z sıraları küre içinde kalsın —
şerit, menü ve açılan haber her zaman kürenin üstünde dursun */
z-index:1;
isolation:isolate;
display:grid;
place-items:center;
touch-action:none;
cursor:grab;
user-select:none;
-webkit-user-select:none;
}
.sahne.tutuluyor{cursor:grabbing}
/* ——— /tam GENİŞ EKRAN: KENARDA BOŞLUK, ZEMİNE KARARMA ———
Kemal, 13 Eylül 2026: *"tam ekranda geniş ekranlar için kenarlarda
biraz boşluk bıraksak; derinlik hissini yükseltsek. kenara çok
yaklaşınca arka plan renginin içine doğru üzeri kararmaya başlasa."*
Kararma kartlara tek tek `filter` yazılarak DEĞİL, sahnenin üstünde
sabit tek bir geçiş katmanıyla: *kart başına yazılsaydı* 119 kartın
süzgeci her karede değişir ve her kart yeniden boyanırdı (galakside
ölçülmüş ders). Bu katman hiç değişmiyor, maliyeti yok.
En dışta ince bir düz bant boşluğu veriyor, içe doğru zemin rengi
saydamlaşıyor. Dokunuş geçiyor (`pointer-events:none`); şerit,
başlık ve açılan kart bu katmanın üstünde. */
/* /tam YATAY KART: kart boyu enin 0,75'i; dikey karttaki yazı ölçüsü
burada fotoğrafın neredeyse tamamını örtüyordu (telefonda ekranda
görüldü). Manşet iki satır, yazı ve dolgu biraz küçük — fotoğraf
görünsün. Kesme yine `yaziSigdir` ile ölçerek. */
/* Kart 1,5 kat geniş ama yazı eski genişliğe göre: 1.5 = TAM_YATAY_GENIS. */
body.tam-yatay .kart{ font-size:calc(var(--kart-en) / 17.45 / 1.5) }
body.tam-yatay .kart .yazi{ padding:0 1.05em 1.05em }
body.tam-yatay .kart .ust{ font-size:1.04em; margin-bottom:.28em }
body.tam-yatay .kart .ana{ font-size:1.72em; max-height:2.12em }
.tam-kenar{ display:none }
body.tam-genis .tam-kenar{
display:block;
position:fixed; inset:0 0 var(--serit-h) 0;
z-index:2; pointer-events:none;
background:
linear-gradient(to right,
var(--zemin) 0, var(--zemin) 2.2vw, rgba(7,12,21,.55) 5vw, transparent 13vw,
transparent calc(100% - 13vw), rgba(7,12,21,.55) calc(100% - 5vw),
var(--zemin) calc(100% - 2.2vw), var(--zemin) 100%),
linear-gradient(to bottom,
var(--zemin) 0, var(--zemin) 1.6vh, rgba(7,12,21,.5) 5vh, transparent 14vh,
transparent calc(100% - 12vh), rgba(7,12,21,.5) calc(100% - 4vh),
var(--zemin) calc(100% - 1.2vh), var(--zemin) 100%);
}
/* /hepsi: kenarda boşluk bandı ve kararma YOK — kartlar ekranın kenarına
kadar. Kemal: *"kenarlardaki kesmeyi falan kaldır."* /tam'da katman duruyor. */
body.hepsi .tam-kenar{ display:none }
/* ——— /hepsi: SAHNE İKİ YANDAN 1,5 KART DAR ———
`--hepsi-pay` kure.js → olcuAl yazıyor (geniş ekranda 1,5 kart eni,
dar ekranda 0). Sahne daralınca kürenin merkezi yine ekranın ortası.
Kenar katmanı payın içini DÜZ zemin rengiyle kapatıyor: sınırı yarı
aşan kart pay alanına taşmasın; kararma payın bittiği yerden içe
doğru, /tam'daki gibi. */
body.hepsi-dar .sahne{ left:var(--hepsi-pay); right:var(--hepsi-pay) }
/* Kararma gradyanı YOK: kenara yaklaşan kart kendisi sönüyor (kure.js →
KENAR_*). Kalan tek şey yan payın düz zemini — sınırı yarı aşan kart
boşluğa taşmasın. */
body.hepsi-dar.tam-genis .tam-kenar{
background:
linear-gradient(to right,
var(--zemin) 0, var(--zemin) var(--hepsi-pay),
transparent var(--hepsi-pay), transparent calc(100% - var(--hepsi-pay)),
var(--zemin) calc(100% - var(--hepsi-pay)), var(--zemin) 100%);
}
/* Kenar bandındaki kart kendi saydamlığıyla sönüyor (kure.js → KENAR_*);
burada ayrı bir sınıf yok. */
/* /hepsi (web): kavisin arkaya düşen kısmındaki kart SİLÜET — fotoğraf,
perde ve yazı görünmez, yerinde koyu bir kart kalıbı ve ince kenar.
`visibility` (display değil): yazının ölçüsü korunuyor, kart tam karta
dönünce yeniden sığdırmak gerekmiyor. */
.kart.siluet .gorsel img,
.kart.siluet .perde,
.kart.siluet .yazi,
.kart.siluet .etiket{ visibility:hidden }
.kart.siluet .gorsel{
background:linear-gradient(160deg, rgba(30,44,66,.92), rgba(12,19,31,.95));
box-shadow:inset 0 0 0 1px rgba(126,147,172,.18);
}
.kure{position:relative;width:0;height:0}
/* ——— haber kartı ———
Kart bir dikey fotoğraftır. Metin fotoğrafın ALTINDA değil ÜSTÜNDEDİR;
okunabilirliği alttan yukarı açılan karartma perdesi sağlar. */
.kart{
position:absolute;
left:0; top:0;
width:calc(var(--kart-en) * var(--carpan, 1));
/* ——— KART BİÇİMİ TEK SAYIDAN ———
Oran üç yerde birden geçiyordu: burada, sığdırma hesabında ve
vekil çizimde. *Ayrı ayrı yazılsaydı* biri değişince kartlar üst
üste biner ya da küre seyrekleşirdi. Panelden seçilen biçim
`--kart-oran` değişkenine yazılıyor (boy/en). */
aspect-ratio:1 / var(--kart-oran, 1.3333);
padding:0;
/* Kart içindeki her ölçü kartın genişliğine oranlı — kart büyüyünce
yazı da dolgu da birlikte büyür. */
font-size:calc(var(--kart-en) / 17.45);
background:#0B1220;
border:1px solid var(--kart-cizgi);
border-radius:1.82em;
overflow:hidden;
color:inherit;
font-family:inherit;
text-align:left;
display:block;
cursor:pointer;
transform-origin:50% 50%;
box-shadow:
/* KALINLIK: alt kenarda bulanıksız sert gölge — kartın kendi kenarı.
Bulanık gölge "havada duruyor" der, sert gölge "kalın" der. */
0 2px 0 rgba(3,6,12,.62),
0 0 0 2px rgba(110,168,232,.07);
will-change:transform,opacity;
}
/* ——— BULANIK GÖLGE VE HÂLE YALNIZ ÖNDEKİ KARTTA (`.onde`) ———
Kemal: *"gölgeyi, ışımayı sadece önde görünür olan kartlarda
etkinleştir… bize kazanç sağlayacaksa."* Arkadaki kartın gölgesi koyu
zeminde zaten görünmüyordu ama katmanını gölge payı kadar büyütüyordu.
*Ölçüldü (başsız Chrome, 4x yavaş işlemci):* katman alanı masaüstünde
14,6 → 10,5 MP, telefonda 5,7 → 4,0 MP (%28); kare hızı farkı ölçüm
gürültüsünün içinde. Fotoğraf süzgeci öndekiyle sınırlanınca ek kazanç
çıkmadı, eşikte renk sıçraması riski olduğu için süzgeç her kartta.
Sınıf `ciz()` içinde eşikte bir kez değişiyor (0,62 gir · 0,56 çık). */
.kart.onde{
box-shadow:
0 2px 0 rgba(3,6,12,.62),
0 16px 44px rgba(0,0,0,.5),
0 24px 52px -20px rgba(74,150,238,.42),
0 0 0 2px rgba(110,168,232,.07);
}
/* GÖRSEL TABAKASI — fotoğrafların rengini canlandırır.
Sabit bir süzgeç olduğu için tarayıcı bir kez uyguluyor; ölçüldü,
91 kart dönerken hız düşmedi (121 kare/sn). Panelden ayarlanır. */
.suzgecler{ position:absolute; width:0; height:0; overflow:hidden }
/* ——— İL ÇİZİMİNİN HAREKETİ ———
Hepsi `transform`/`opacity`; tarayıcı ayrı katmanda yürütüyor ve
hiçbir karede yeniden boyama olmuyor — galaksideki dokunun aynı
dersi. Bu yüzden 81 il birden hareket edebiliyor; video ile aynı
anda ancak 3-5 kart oynayabiliyordu. */
/* ——— ARKA YÜZDEN GİREN KART AÇILARAK YERLEŞİR ———
*Önce `requestAnimationFrame` + `transition` ile yapıldı ve
ÖLÇÜMDE TAKILI KALDI:* kart `opacity(0)` ile giriyor, açılmayı
yapacak ikinci yazma rAF'a bağlıydı ve rAF sekme arka plandayken
durduğu için kartlar görünmez kalıyordu.
Animasyon tek yazmayla kendi kendine bitiyor; ikinci bir yazma,
zorlanmış yeniden akış ya da rAF gerekmiyor.
`filter` seçildi çünkü `opacity`yi çizim döngüsü her karede kendi
yazıyor — araya girilseydi ikisi birbirini ezerdi. */
.kart.yeni-giren{ animation:kartGir 900ms linear both }
@keyframes kartGir{ from{ filter:opacity(0) } to{ filter:opacity(1) } }
@media (prefers-reduced-motion:reduce){
/* Hareket azaltmada açılma yok ama kart GÖRÜNÜR kalmalı. */
.kart.yeni-giren{ animation:none }
}
.kart .il-cizim,
.kart .akis-cizim{position:absolute; inset:0; width:100%; height:100%; display:block}
/* ——— PLAKA: ADIN TAM ÜSTÜNDE VE OPAK ———
Ölçüler `em`, yani kartın kendi genişliğine oranlı (kart kuralı
7): kart büyüyünce plaka da büyür. Renkler SABİT ve opak —
kartın saydamlığı yazıyı soldurabilir ama plaka gerçek bir
plaka gibi durmalı. */
/* Gerçek plakanın oranı ve düzeni: mavi şerit SOL KENARA YAPIŞIK
ve TAM BOY, gövde beyaz, yazı siyah. *Şerit içeride yüzen küçük
bir kutu olunca* plakaya benzemiyor, rozet gibi duruyordu —
Kemal'in tespiti: "yer doğru, plaka bozuldu".
Kutu blok olduğu için `width:max-content` şart: yoksa satırın
tamamına yayılıyor. */
/* 13 Eylül 2026: plaka adın ALTINDA ve büyük (Kemal: *"il ismini
üste koy plakayı altta büyüt"*). `font-size` plakanın bütün `em`
ölçülerini birlikte büyütüyor; genişlik yine kartın içinde kalıyor. */
.kart .il-plaka{
display:flex; width:max-content; max-width:100%; align-items:stretch;
/* Yatayda ORTADA ve BÜYÜK (Kemal: *"plakayı alta ortala"* →
*"büyüt işte alta ortala oturt"*). 1,9em: plaka kartın eninin
~%80'i. *Daha büyüğü* ili temsil eden çizimi ve adı ezerdi. */
margin:.45em auto 0; overflow:hidden; font-size:1.9em;
background:#fff; border-radius:.2em;
box-shadow:0 .06em .2em rgba(0,0,0,.6);
color:#0e1116; white-space:nowrap; line-height:1;
}
.kart .il-plaka .il-tr{
display:flex; align-items:flex-end; justify-content:center;
width:1.45em; padding:.2em .1em .26em;
background:#1b4ea8; color:#fff;
font-size:.52em; font-style:normal; font-weight:700; letter-spacing:.02em;
}
/* İl adı plakaya ortalı (Kemal: *"illeri de plakaya ortala"*). */
.kart.il-karti .ana{ text-align:center }
/* ——— İL ADI KARTIN ÜSTÜNDE, PLAKA ALTTA ———
Kemal, 13 Eylül 2026: *"kartlara şehir isimlerini kartın üstüne yaz..
altı kapalıysa üstten görünsün."* Kürede kartlar üst üste biniyor ve
öndeki kart arkadakinin ALTINI örtüyor; ad altta kalınca kaybolan
şey tam o oluyordu. Yazı bloğu kartın boyu kadar uzuyor: ad başta,
plaka sonda. Ad yine `.ana` — `yaziSigdir` aynı kutuyu ölçüyor.
Üstte ince bir karartma: çizimin açık göğü üstünde beyaz yazı okunsun. */
.kart.il-karti .yazi{
top:0; display:flex; flex-direction:column; justify-content:space-between;
padding-top:1.1em;
}
.kart.il-karti .perde{
background:
linear-gradient(to bottom, rgba(4,8,14,.72) 0%, rgba(4,8,14,.3) 16%, transparent 30%),
linear-gradient(to top, rgba(4,8,14,.85) 0%, rgba(4,8,14,.35) 22%, transparent 40%);
}
.kart .il-plaka b{
padding:.26em .5em .28em;
font-size:1em; font-weight:800; letter-spacing:.06em;
}
.ic-bulut{animation:icKay 46s linear infinite}
@keyframes icKay{to{transform:translateX(-120px)}}
.ic-kar{animation:icDus 7s linear infinite}
@keyframes icDus{to{transform:translateY(60px); opacity:0}}
.ic-dalga{animation:icDalga 9s ease-in-out infinite alternate}
@keyframes icDalga{to{transform:translateX(30px)}}
.ic-sallan{transform-origin:150px 300px; animation:icSallan 6s ease-in-out infinite alternate}
@keyframes icSallan{to{transform:rotate(4deg)}}
.ic-akis{animation:icAkis 2.4s linear infinite}
@keyframes icAkis{to{transform:translateY(18px)}}
/* ——— AKIŞ ÇİZİMİNİN DEVİNİMLERİ ———
Beş tane ve hepsi `transform`/`opacity` — il çizimlerindeki
kuralın aynısı, her karede hesap yok. Anlamına göre dağıtıldı
(bkz. ortak/akis-cizim.js): acil olan nabız atar, büyüyen
yükselir, yayın taranır, insan salınır, geniş olan süzülür. */
.ak-suzul{animation:icKay 52s linear infinite; animation-delay:var(--ak-faz,0s)}
.ak-salin{transform-origin:150px 320px; animation:akSalin 8s ease-in-out infinite alternate;
animation-delay:var(--ak-faz,0s)}
@keyframes akSalin{to{transform:translateY(-14px) rotate(2.5deg)}}
.ak-yuksel circle{animation:akYuksel 9s ease-in-out infinite; animation-delay:var(--ak-faz,0s)}
.ak-yuksel .z2{animation-duration:11s; animation-delay:calc(var(--ak-faz,0s) - 3s)}
.ak-yuksel .z3{animation-duration:8s; animation-delay:calc(var(--ak-faz,0s) - 5s)}
.ak-yuksel .z4{animation-duration:12s; animation-delay:calc(var(--ak-faz,0s) - 1.5s)}
.ak-yuksel .z5{animation-duration:10s; animation-delay:calc(var(--ak-faz,0s) - 6s)}
@keyframes akYuksel{0%{transform:translateY(0); opacity:0}
22%{opacity:.34} 78%{opacity:.28}
100%{transform:translateY(-190px); opacity:0}}
/* Halkalar SIRAYLA açılıyor: üçü aynı anda çıksaydı tek kalın bir
daire görünür, "nabız" hissi hiç olmazdı. */
.ak-nabiz{transform-origin:150px 176px}
.ak-nabiz circle{animation:akNabiz 3.4s ease-out infinite; opacity:0;
transform-origin:150px 176px; animation-delay:var(--ak-faz,0s)}
.ak-nabiz .h2{animation-delay:calc(var(--ak-faz,0s) - 1.13s)}
.ak-nabiz .h3{animation-delay:calc(var(--ak-faz,0s) - 2.26s)}
@keyframes akNabiz{0%{transform:scale(.55); opacity:.4}
100%{transform:scale(1.9); opacity:0}}
.ak-tara{animation:akTara 6.5s linear infinite; animation-delay:var(--ak-faz,0s)}
@keyframes akTara{to{transform:translateY(470px)}}
.ic-balon .b1{animation:icYuksel 11s ease-in-out infinite}
.ic-balon .b2{animation:icYuksel 13s ease-in-out infinite; animation-delay:-4s}
.ic-balon .b3{animation:icYuksel 9s ease-in-out infinite; animation-delay:-7s}
@keyframes icYuksel{50%{transform:translateY(-18px)}}
@media (prefers-reduced-motion:reduce){
.ic-bulut,.ic-kar,.ic-dalga,.ic-sallan,.ic-akis,.ic-balon *,
.ak-suzul,.ak-salin,.ak-tara,.ak-yuksel circle,.ak-nabiz circle{animation:none}
/* Nabız halkaları `opacity:0` ile başlıyor; hareket durunca
görünmez kalırlardı. Duruşta tek bir halka duruyor. */
.ak-nabiz circle{opacity:.22}
.ak-nabiz .h2,.ak-nabiz .h3{display:none}
.ak-yuksel circle{opacity:.3}
}
.kart .gorsel img{ filter:var(--gorsel-tabaka, none) }
/* ——— FOTOĞRAF SÜRÜKLENMEZ ———
Kemal: *"webde mausla sorun. mecbur karttan tutup döndürmek zorunda
kalıyoruz o da karttan tutunca istenen şeyi yapamıyoruz."* Farede
karta basıp çekince tarayıcı fotoğrafı SÜRÜKLENEN RESİM sanıyor, kendi
sürüklemesini başlatıyor ve `pointercancel` ile küreyi çeviren hareketi
kesiyordu. Parmakta bu yok, o yüzden telefonda sorun görünmüyordu.
`/tam`'da ekran boşluksuz kartla dolu — tutacak boşluk yok. */
.kart img{ -webkit-user-drag:none; user-select:none }
.kart .gorsel{
position:absolute;
inset:0;
display:block;
overflow:hidden;
background:#101A2A;
}
/* HÂLE: ortası aydınlık, köşelere doğru koyulaşan radyal geçiş.
İç gölge (inset box-shadow) bunu vermiyor — o kenar boyunca eşit
karartıyor, oysa istenen merkezden köşeye doğru artan bir düşüş.
Dikdörtgenin köşeleri merkeze kenar ortasından daha uzak olduğu için
elips biçimli radyal geçiş köşeleri kendiliğinden daha çok karartıyor.
Üstteki ince ışık çizgisi kartın kalınlığının aydınlık yüzü. */
.kart .gorsel::after{
content:"";
position:absolute; inset:0;
pointer-events:none;
background:
radial-gradient(68% 52% at 50% 40%, rgba(255,255,255,.09), transparent 62%),
radial-gradient(118% 94% at 50% 44%,
transparent 30%,
rgba(4,8,14,.20) 62%,
rgba(4,8,14,.42) 84%,
rgba(4,8,14,.66) 100%);
box-shadow: inset 0 1px 0 rgba(226,238,255,.14);
}
/* Kartın videosu fotoğrafın ÜSTÜNE oturur, onun yerine geçmez.
Video yüklenene kadar fotoğraf görünür; video bitince ya da kart
geriye gidince yine fotoğraf kalır — kart hiçbir an boş kalmaz. */
.kart video{
position:absolute; inset:0; width:100%; height:100%;
object-fit:cover; display:block; z-index:1;
opacity:0; transition:opacity .35s ease;
pointer-events:none;
/* Videonun kendi süzgeci fotoğraflarınkinden GÜÇLÜ. Ajans videosu
yanındaki fotoğrafların yanında solgun kalıyordu: fotoğraf işlenmiş
bir kare, video sıkıştırılmış ham çekim. */
filter:var(--video-tabaka, none);
}
.kart video.acik{ opacity:1 }
/* Videolu kartın köşesinde küçük bir işaret — okur kartın video
taşıdığını, oynamasa da bilsin. */
/* ——— OYNATMA ÜÇGENİ `.perde` ÜZERİNDE, `.gorsel` DEĞİL ———
*Önce `.gorsel::before` idi ve OKUR GÖNDERİSİNDE ÇALIŞMIYORDU:*
gönderi kartının kendi kimliği de aynı sözde-öğeyi kullanıyor
(sol kenardaki mor şerit) ve bir öğenin tek bir `::before`ü var —
mor şerit üçgeni eziyordu. Ölçüldü: videolu gönderi kartında
rozetin arka planı `linear-gradient(rgba(139,107,255…))` çıktı,
yani basılan şey şeritti.
`.perde` her iki kart türünde de var, `::before`ü boş ve zaten
kartın tamamını kaplıyor. Böylece TEK kural hem habere hem
gönderiye hizmet ediyor — *ikinci bir rozet yazılsaydı* aynı
çizim iki yerde durur ve biri değişince öteki eskirdi.
`pointer-events` `.perde`de zaten kapalı; rozet tıklamayı yemiyor,
kartın kendisi açılıyor. */
.kart.videolu .perde::before{
content:""; position:absolute; right:.55em; top:.55em; z-index:4;
width:1.15em; height:1.15em; border-radius:50%;
background:rgba(7,12,21,.62) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M9 6.5v11l9-5.5z'/%3E%3C/svg%3E") center/58% no-repeat;
box-shadow:0 1px 4px rgba(0,0,0,.5);
}
@media (prefers-reduced-motion:reduce){
.kart video{ display:none }
}
.kart .gorsel img{
display:block;
width:100%; height:100%;
object-fit:cover;
/* Süzgeç BİR ARA YALNIZ galaksi pullarına uygulanıyordu; kartlar ham
kalmıştı ve panelden seçilen tabaka/keskinlik ayarının kürede hiçbir
karşılığı yoktu. Asıl yeri burası — kart, kürenin yüzü. */
filter:var(--gorsel-tabaka, none);
}
/* karartma perdesi — hangi fotoğraf gelirse gelsin yazı okunsun */
/* KATMAN SIRASI (kartın içinde):
0 fotoğraf
1 video ← fotoğrafın üstünde
2 perde ← videonun da üstünde, yazı okunsun diye
3 yazı ve son dakika işareti
4 oynat rozeti
*Perde ve yazıya sıra verilmezse video onların üstüne çıkıyor ve
başlık kayboluyor — bir kez bu oldu.* */
/* ——— REKLAM KARTI ———
Küredeki reklam haber kartıyla AYNI formda durur — küre bir kartlar
kümesi, araya başka biçimde bir nesne girerse form bozulur. Ama
kimliği saklanmaz: sol üstte "Reklam" plakası ve amber değil altın
bir çerçeve ışığı. *Reklamın reklam olduğunu yazmak hem yasal bir
zorunluluk hem okura karşı dürüstlüğün kendisi.*
En/boy oranı kartın kendisinden gelmiyor, reklamın kendi `oran`
alanından — esnek kare bu. Haber kartından UZUN olamaz (sunucu
tarafında 4/3'e kırpılıyor): uzun olsa küreye sığdırma hesabı taşar. */
.kart.reklam{
box-shadow:
0 2px 0 rgba(3,6,12,.62),
0 0 0 2px rgba(214,186,116,.13);
}
.kart.reklam.onde{
box-shadow:
0 2px 0 rgba(3,6,12,.62),
0 16px 44px rgba(0,0,0,.5),
0 24px 52px -20px rgba(198,164,92,.34),
0 0 0 2px rgba(214,186,116,.13);
}
/* ——— ÖNE ÇIKARMA PLAKASI ———
Reklam plakasının kardeşi ama AYRI RENKTE olmalı: reklamda içerik
reklamverenin, burada içerik ajansın haberi ve satılan yalnız
konum. Okur ikisini karıştırmamalı — aynı amber plaka iki ayrı şeyi
anlatıyor gibi görünürdü.
Sönük ve küçük: bilgi, vurgu değil. Kartın en değerli yeri
başlığındır, plaka onu yemez. */
/* ——— OKUR GÖNDERİSİ KARTI ———
Haber kartından ayrı görünmesi ŞART. Ayrımı üç şey taşıyor: sol
kenardaki mor çizgi (galaksideki gezegeninin rengi), büyük harfsiz
düz metin, ve üstte kategori yerine kullanıcı adı. */
.kart.gonderi{ border-color:rgba(139,107,255,.42) }
.kart.gonderi .gorsel::before{
content:"";
position:absolute; left:0; top:0; bottom:0; width:.38em;
background:linear-gradient(to bottom,rgba(139,107,255,.95),rgba(139,107,255,.35));
z-index:3;
}
.kart.gonderi .ana.gd{
font-family:"IBM Plex Sans",system-ui,sans-serif;
font-weight:500;
font-size:1.24em;
line-height:1.34;
letter-spacing:0;
text-transform:none;
max-height:5.4em;
}
.kart.gonderi .ust{ color:rgba(196,180,255,.92); text-transform:none; letter-spacing:.02em }
/* Fotoğrafsız gönderide kart bir yazı kartıdır: metin ortadan başlar,
perde gereksiz. */
.kart.gonderi.yazili .gorsel{
background:linear-gradient(155deg,rgba(38,30,64,.96),rgba(18,16,30,.98));
}
.kart.gonderi.yazili .perde{ opacity:.24 }
.kart .oc-plaka{
position:absolute;
z-index:4;
top:1em; left:1em;
padding:.26em .62em;
border-radius:.62em;
font-size:.94em;
font-weight:600;
letter-spacing:.08em;
line-height:1.35;
color:rgba(243,246,250,.92);
background:rgba(20,32,50,.72);
border:1px solid rgba(160,185,215,.34);
-webkit-backdrop-filter:blur(6px);
backdrop-filter:blur(6px);
pointer-events:none;
}
.kart .reklam-plaka{
position:absolute;
z-index:4;
top:1em; left:1em;
padding:.28em .66em;
border-radius:.62em;
font-size:1.02em;
font-weight:700;
letter-spacing:.1em;
line-height:1.35;
color:rgba(14,18,26,.88);
background:rgba(226,206,148,.9);
box-shadow:0 1px 0 rgba(0,0,0,.28);
pointer-events:none;
}
/* ——— TESCİL KİPİ ———
Başvuru görselinde tescile konu tasarım dışında hiçbir şey
bulunamaz: ipucu yazısı, sayfalama, şerit hepsi kalkar. Zemin
düz olmalı; kürenin arka plan geçişi kapatılır. */
body.tescil .ipucu,
body.tescil .devam-sarma,
body.tescil .rozet{display:none !important}
/* Kartın üzerindeki DURUM işaretleri de çıkar: kırmızı son dakika
noktası ve video rozeti. İkisi de tasarımın kalıcı parçası değil —
o an o kartta ne olduğunu söyleyen geçici işaretler, bazı kartlarda
var bazılarında yok. Başvuru karesinde durunca hem "bu nokta ne"
sorusunu doğuruyor hem de tasarımı habere bağlıyor. */
body.tescil .kart .etiket,
body.tescil .kart.videolu .perde::before{display:none !important}
/* Aynı sebeple son dakika kartının KIRMIZI ÇERÇEVESİ de düşer:
kartların bir kısmı kırmızı bir kısmı değil, kare bakan kişide
"ikisi ayrı tasarım mı" sorusu doğuyor. */
body.tescil .kart.acil{border-color:var(--kart-cizgi) !important}
/* Küme ekranı KARE İÇİN DONDURULUR. İki hareketi var ve ikisi de
kareyi tekrarlanamaz kılıyordu: açılış geçişi (saydamlık 0→1) ve
gezegenlerin nefesi. *Her çekim başka bir ana denk geliyordu;*
beyaz zeminde yarım saydamlıkta yakalanan kare bütün gezegenleri
soluk gösteriyordu. Geçiş kapatılınca küme ilk kareden itibaren
son hâlinde duruyor. */
body.tescil .galaksi{transition:none !important}
body.tescil .gz-kor{animation:none !important; opacity:1 !important}
/* Marka ve ajans künyesi de çıkar. Künye ZORUNLU olarak çıkar:
"İhlas Haber Ajansı" üçüncü bir tarafın adı, tasarım başvurusunun
görselinde işi yok. Marka ise ayrı bir hak (marka tescili);
tasarımın kapsamını adla sınırlandırmamak için dışarıda tutuluyor. */
body.tescil .marka,
body.tescil .serit{display:none !important}
body.tescil.seritli .serit{display:flex !important}
/* ——— BEYAZ ZEMİNLİ HÂL (?beyaz=1) ———
Aynı tasarımın açık temalı sürümü: ekranın kendi zemini beyaz,
kartlar koyu kalıyor. Bu koyu setin yerine geçmez, YANINA konur —
biri gelip aynı düzeni açık temayla kurup "benimki başka" diyemesin
diye ayrı bir tasarım olarak tescile giriyor.
Renkler tek tek değil DEĞİŞKENLERDEN çevriliyor; arayüzün her yeri
zaten `--zemin`, `--murekkep`, `--cizgi` üzerinden boyanıyor.
Değişkene bağlanmamış birkaç yer (şeridin geçişi, arama düğmesinin
dolgusu) elle karşılanıyor — *onlar unutulursa* beyaz ekranın
üstünde koyu bir şerit kalıyor ve kare bozuk görünüyor.
Kart koyu kalıyor: kartın kendi rengi (`--kart`) ve fotoğrafı
tasarımın parçası, tema değişse de değişmez. */
body.tescil.beyaz{
--zemin:#FFFFFF;
--zemin-2:#F1F3F6;
--murekkep:#0E1520;
--murekkep-sonuk:#5A6A7D;
--cizgi:rgba(20,32,48,.20);
background:#FFFFFF !important;
}
body.tescil.beyaz .sahne,
body.tescil.beyaz .galaksi{ background:#FFFFFF !important }
body.tescil.beyaz .serit{
background:linear-gradient(to top,rgba(255,255,255,.97),rgba(255,255,255,.86)) !important;
}
body.tescil.beyaz .kat-dugme{ background:rgba(14,21,32,.04) }
body.tescil.beyaz .arama-dugme,
body.tescil.beyaz .arama-suzgec{ background:rgba(255,255,255,.72) }
/* Küme düğmesinin dolgusu koyu bir radyal geçiş; beyaz zeminde siyah
bir top gibi duruyordu. Amber rengi ve hâlesi kalıyor, gövdesi
açılıyor — düğmenin şeritten ayrılan kimliği bozulmasın. */
body.tescil.beyaz .galaksi-dugme{
background:radial-gradient(circle at 50% 40%,
rgba(245,179,60,.22), rgba(255,255,255,.94) 70%);
box-shadow:0 0 0 4px rgba(245,179,60,.10), 0 10px 26px rgba(20,32,48,.14);
}
/* ——— YAZISIZ KARE (?yazisiz=1) ———
Başvuru karesinde okunabilir metin bulunmaması isteniyor. Ama yazı
kartın İÇİNDE ve tasarımın parçası: iki kademeli blok (üstte ince
küçük satır, altında kalın büyük başlık) kartın en ayırt edici
yanlarından biri. *Yazıyı tamamen kaldırmak* korumayı zayıflatırdı —
o zaman biri aynı düzeni kurup içine yazı koyar ve "benimki başka"
der.
Bu yüzden yazı silinmiyor, SUSTURULUYOR: harfler görünmez oluyor,
yerlerinde yazının kapladığı alanı gösteren düz gri şeritler
kalıyor. Blok duruyor, kelime kalmıyor. Tescil kılavuzlarının
"yer tutucu çizgi" dediği şey budur.
Şeritler yazının kendi kutusuna çiziliyor (::before), yani uzunluk
ve satır sayısı hangi metin varsa ona göre değişiyor — elle
ayarlanan sahte bir çizgi değil, yazının gerçek izi. */
body.tescil.yazisiz .kart .ust,
body.tescil.yazisiz .kart .ana{
color:transparent !important;
text-shadow:none !important;
position:relative;
}
body.tescil.yazisiz .kart .ust::before,
body.tescil.yazisiz .kart .ana::before{
content:"";
position:absolute;
left:0; right:18%;
top:.12em; bottom:.18em;
border-radius:.14em;
background:rgba(228,232,238,.62);
}
/* Başlık iki satır yüksekliğinde; tek bir şerit onu tek satır gibi
gösterirdi. İkinci şerit alt satırın izi, daha kısa — gerçek
başlıkların son satırı da nadiren tam dolu biter. */
body.tescil.yazisiz .kart .ana::after{
content:"";
position:absolute;
left:0; right:46%;
top:1.24em; height:.72em;
border-radius:.14em;
background:rgba(228,232,238,.62);
}
body.tescil.yazisiz .kart .ust::before{ right:56%; background:rgba(228,232,238,.42) }
/* Alt şeritteki kategori adları ve sayıları da okunmaz olur. Şeridin
kendisi tasarımın parçası — hap biçimli çerçeveler, simgeler,
aralıklar duruyor; yalnız kelimeler susuyor. *Adları büsbütün
gizlemek* hapların genişliğini değiştirir, yani tasarımı değiştirir;
yazının yerini alan şerit genişliği koruyor. */
body.tescil.yazisiz .kat-dugme > span{
color:transparent !important;
background:rgba(228,232,238,.42);
border-radius:.3em;
}
body.tescil.yazisiz .kat-dugme .sayi{ background:rgba(228,232,238,.3) }
/* Küme ekranındaki gezegen adları da susar. Yazının kürenin üstüne
KAZINMIŞ duruşu tasarımın parçası; şerit onun izini koruyor. */
body.tescil.yazisiz .gz-ad-i{
color:transparent !important;
text-shadow:none !important;
background:rgba(232,236,242,.55);
border-radius:.3em;
}
/* Tek kart karesi: kart TEK BAŞINA, düz zeminde, kürenin perspektifi
olmadan. Orada tescile konu olan şey KARTIN KENDİSİ, ekranın tamamı
değil — bu yüzden ekranın gezinme öğeleri de çıkar. Üstteki hesap ve
arama simgeleri ile köşedeki küme düğmesi kalsaydı kare "kartın
yalın hâli" olmaktan çıkıp eksik bir ekran görüntüsüne dönerdi. */
body.tescil.tekkart > header,
body.tescil.tekkart .galaksi-dugme,
body.tescil.tekkart .kart{display:none !important}
body.tescil.tekkart .kart.ornek{
display:block !important;
left:50% !important; top:50% !important;
opacity:1 !important;
/* Ölçek kartın kendi ölçüsüne göre; 900x1200 dikey pencerede
kart çerçevenin ~%70i olur. Pencere ölçüsü değişirse kart da
değişir — 4. tasarımın kareleri hep aynı pencerede alınmalı. */
transform:translate(-50%,-50%) scale(1.8) !important;
}
/* Küre normalde ekranın kenarına yaslanır (bilerek). Başvuru
görselinde ise tasarımın TAMAMI görünmeli — kenardaki kartlar
kesilmemeli. Sahneyi içeri çekince küre kendini ona göre
küçültüyor ve çerçevede pay kalıyor. */
body.tescil .sahne{inset:7% 7% calc(7% + 0px) 7% !important}
body.tescil, body.tescil .sahne{background:#080D16 !important}
body.tescil .sahne::before,
body.tescil .sahne::after{display:none !important}
.kart .perde{
position:absolute;
inset:0;
z-index:2;
background:linear-gradient(to top,
rgba(4,8,14,.95) 0%,
rgba(4,8,14,.85) 26%,
rgba(4,8,14,.45) 50%,
rgba(4,8,14,.08) 72%,
transparent 88%);
pointer-events:none;
}
.kart .yazi{
position:absolute;
left:0; right:0; bottom:0;
z-index:3;
padding:0 1.27em 1.45em;
}
.kart .ust{
display:block;
margin-bottom:0.36em;
font-size:1.18em;
letter-spacing:.06em;
line-height:1.2;
color:rgba(243,246,250,.82);
font-weight:500;
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;
}
.kart .ana{
display:block;
/* Manşet yazı tipi panelden (sunucu/manset-font.js); tanımsızsa eskisi. */
font-family:var(--manset-font,"IBM Plex Sans Condensed"),"IBM Plex Sans Condensed",sans-serif;
font-weight:var(--manset-agirlik,700);
font-size:2em;
line-height:1.06;
letter-spacing:-.005em;
text-transform:uppercase;
color:#fff;
overflow:hidden;
text-shadow:0 1px 3px rgba(0,0,0,.55);
/* en fazla üç satır — yaziSigdir() bu kutuya göre kısaltır */
max-height:3.18em;
}
/* SON DAKİKA İŞARETİ — yazı değil, nabız atan bir nokta.
"SON DAKİKA" yazısı kartın en değerli yerini (üst şeridini) yiyordu;
alan dar, aynı bilgiyi bir işaret de veriyor. Yazı ekran okuyucular
için görünmez biçimde duruyor — bilgi kaybolmuyor. */
.kart .etiket{
display:none;
position:absolute;
left:1.09em; top:1.09em;
width:0.72em; height:0.72em;
border-radius:50%;
background:var(--acil);
box-shadow:0 0 0 0.14em rgba(7,12,21,.72), 0 0 1em 0.12em rgba(230,45,45,.65);
z-index:3;
/* Yazıyı gizle ama ekran okuyucuya bırak.
font-size:0 KULLANMA — noktanın çapı em cinsinden, sıfırlanıyor. */
text-indent:-100em; white-space:nowrap; overflow:hidden;
}
/* nabız: sert yanıp sönme değil, yumuşak bir soluk alış.
Hızlı yanıp sönme hem rahatsız eder hem nöbet riski taşır. */
.kart.acil .etiket::after{
content:"";
position:absolute; inset:-0.42em;
border-radius:50%;
border:0.1em solid rgba(230,45,45,.9);
animation:nabiz 1.9s ease-out infinite;
}
@keyframes nabiz{
0% { transform:scale(.55); opacity:.95 }
70% { transform:scale(1.25); opacity:0 }
100% { transform:scale(1.25); opacity:0 }
}
@media (prefers-reduced-motion:reduce){
.kart.acil .etiket{ animation:none }
.kart.acil .etiket::after{ animation:none; opacity:.5; transform:scale(1) }
}
.kart.acil .etiket{
display:block;
/* Nokta da kendi içinde soluk alıp veriyor. 1,4 sn = saniyede 0,7
yanıp sönme — nöbet riski sınırının (saniyede 3) çok altında. */
animation:acilYanip 1.4s ease-in-out infinite;
}
@keyframes acilYanip{
0%,100%{ opacity:1 }
50% { opacity:.45 }
}
.kart.odak{
border-color:rgba(245,179,60,.65);
box-shadow:
0 16px 44px rgba(0,0,0,.7),
0 32px 80px -24px rgba(74,150,238,.5),
0 0 0 2px rgba(245,179,60,.25);
}
.kart.acil{border-color:rgba(230,45,45,.5)}
.kart.secili{
border-color:var(--amber);
box-shadow:0 0 0 2px var(--amber),0 10px 28px rgba(0,0,0,.6);
}
.kart:focus-visible{outline:4px solid var(--amber);outline-offset:6px}
/* Haber kartı ve kategori düğmesi artık (Google bağlantıyı izlesin):
bağlantı görünümü, iPhone basılı tutma önizlemesi ve sürükleme kapalı. */
a.kart{ text-decoration:none; -webkit-touch-callout:none; -webkit-user-select:none; user-select:none; -webkit-user-drag:none }
a.kat-dugme, a.galaksi-dugme{ text-decoration:none; -webkit-touch-callout:none }
.tasma .tasma-tum{ color:var(--murekkep); font-weight:600 }
/* Anasayfanın temel bağlantıları: görünmez ama klavyeyle içine girilince
açılır (atlama bağlantısı düzeni) — görünmez bir odak durağı kalmasın. */
.temel-baglar:focus-within{
position:fixed; left:12px; right:12px; bottom:12px; width:auto; height:auto;
max-height:60vh; margin:0; clip:auto; overflow:auto; white-space:normal;
z-index:99999; padding:14px; background:#0B1220; border:1px solid var(--amber); border-radius:12px;
}
.temel-baglar a{ color:var(--murekkep); display:inline-block; margin:4px 10px 4px 0 }
/* ——— DEVAM DÜĞMESİ ———
Küre bir sayfa gösterir (ekrana kaç kart sığıyorsa o kadar). Daha
eskisini görmek için bu düğmeye basılır. *Sonsuz kaydırma değil:*
her basış bir karardır, okuyucu ne kadar ilerlediğini bilir.
Liste bitince düğme "başa dön"e döner — çıkmaz sokak bırakılmaz. */
/* Konumu artık SARMALAYICI taşıyor; düğmeler onun içinde yan yana
duruyor. Eskiden konum düğmenin üstündeydi ve ikinci düğme
eklenince ikisi üst üste biniyordu. */
/* İki düğme EŞİT genişlikte. Sarmalayıcıya sabit bir genişlik
verilmeden "eşit" diye bir şey olmuyor: içerik uzunluğu düğmeyi
büyütür ve "Başa dön" ile "12 haber daha" farklı boyda kalır. */
.devam-sarma{
position:fixed;
left:50%; bottom:calc(var(--serit-h) + 10px);
transform:translateX(-50%);
z-index:9000;
display:flex; align-items:stretch; gap:8px;
width:min(330px, calc(100vw - 28px));
}
.devam-sarma .devam{ flex:1 1 0; justify-content:center; min-width:0 }
/* Başa dön gizliyken ilerle tek başına kalır; sarmalayıcı daralsın ki
tek düğme ekranın yarısı kadar uzamasın. */
.devam-sarma.tek{ width:auto }
.devam{
display:inline-flex; align-items:center; gap:.5em;
padding:10px 20px;
min-height:44px;
border:1px solid rgba(150,180,225,.22);
/* Hap değil KARE. Alt bandın bütün düğmeleri kart diline geçti
(kategoriler 10px, kare düğmeler 12px); bu ikisi hap kalınca
aynı bandın içinde yabancı duruyordu. */
border-radius:12px;
background:rgba(9,15,26,.82);
backdrop-filter:blur(8px);
color:var(--metin);
font:600 12.5px/1 "IBM Plex Sans",system-ui,sans-serif;
letter-spacing:.06em;
cursor:pointer;
transition:border-color .2s ease, background .2s ease, opacity .25s ease;
}
.devam:hover{ border-color:var(--amber); background:rgba(14,23,37,.92) }
.devam:focus-visible{ outline:2px solid var(--amber); outline-offset:3px }
.devam .sayi{ color:var(--sonuk); font-weight:500; font-size:11.5px }
/* İKİ AYRI RENK — ama ikisi de ŞEFFAF. İlerlemek asıl yol: amber
yazı ve amber çerçeve. Başa dönmek geri adım: sönük mavi.
*Renk farkı hangi düğmenin ne yaptığını okumadan anlatır;* ikisi
aynı görünürse okur her seferinde yazıyı okumak zorunda kalır.
*İlerle bir ara DOLU amberdi* ve ayrımı en güçlü taşıyan hâl oydu.
Kemal kaldırttı: *"ileri butonunu da şeffaf kare yap."* Dolu bir
hap, altındaki bandın hiçbir düğmesine benzemiyordu; kürenin
üstünde duran tek opak nesneydi. Ayrım renkte duruyor, dolgu
değil: amber çerçeve + amber yazı ile sönük mavi çerçeve. */
.devam.basa{
color:#9FB6D4;
border-color:rgba(120,160,215,.34);
background:rgba(14,24,40,.82);
}
.devam.basa:hover{
color:#CFE0F5;
border-color:rgba(140,185,240,.55);
background:rgba(20,34,55,.92);
}
.devam.ileri{
color:var(--amber);
border-color:rgba(245,179,60,.55);
background:rgba(9,15,26,.82);
font-weight:700;
}
.devam.ileri:hover{ background:rgba(26,20,10,.92); border-color:var(--amber) }
.devam.ileri .sayi{ color:rgba(245,179,60,.72) }
/* Son sayfada ilerle sönük ve tıklanmaz — çıkmaz sokak olduğunu
düğmenin kendisi söyler. */
.devam.ileri[disabled]{ opacity:.42; cursor:default }
.devam.ileri[disabled]:hover{ background:rgba(9,15,26,.82); border-color:rgba(245,179,60,.55) }
.devam[hidden]{ display:none !important }
/* Küre ile düğme çakışmasın diye ipucu yazısı düğme varken gizlenir. */
.ipucu.gizli-devam{ opacity:0; pointer-events:none }
.ipucu{
position:fixed;
left:50%; bottom:calc(var(--serit-h) + 16px);
transform:translateX(-50%);
z-index:9000;
font-family:"IBM Plex Mono",monospace;
font-size:10.5px;
letter-spacing:.13em;
text-transform:uppercase;
color:var(--murekkep-sonuk);
pointer-events:none;
transition:opacity .4s ease;
margin:0;
width:min(560px,calc(100vw - 32px));
text-align:center;
line-height:1.7;
}
.ipucu.gizli{opacity:0}
/* Davet kürenin ORTASINDA duruyor, altında değil: boş küre zaten
ortası boş bir ekran, yazı oraya ait. Şeritle çakışmasın diye
merkez biraz yukarıda. */
.okur-davet{
position:fixed; left:50%; top:calc(50% - 40px);
transform:translate(-50%,-50%);
z-index:60; text-align:center; pointer-events:none;
display:flex; flex-direction:column; gap:14px; align-items:center;
max-width:min(420px, 82vw);
}
.okur-davet p{
margin:0; font-size:16px; line-height:1.5;
color:rgba(226,234,245,.82); text-wrap:balance;
}
.okur-davet-yol{display:flex; gap:10px; pointer-events:auto}
.okur-davet-yol a{
min-height:44px; display:inline-flex; align-items:center;
padding:0 18px; border-radius:999px; text-decoration:none;
font-size:14.5px; font-weight:600;
background:rgba(139,107,255,.16); color:#C9B6FF;
border:1px solid rgba(139,107,255,.45);
}
.okur-davet-yol a:hover{background:rgba(139,107,255,.26)}
/* ——— boş durum ——— */
.bos{
position:fixed;
left:50%; top:50%;
transform:translate(-50%,-50%);
z-index:8500;
text-align:center;
max-width:min(420px,86vw);
display:grid;
gap:10px;
justify-items:center;
pointer-events:none;
}
.bos[hidden]{display:none}
.bos h2{
margin:0;
font-family:"IBM Plex Sans Condensed",sans-serif;
font-size:20px;
font-weight:700;
}
.bos p{margin:0;font-size:13.5px;line-height:1.55;color:var(--murekkep-sonuk)}
.bos code{
font-family:"IBM Plex Mono",monospace;
font-size:12px;
background:rgba(126,147,172,.14);
padding:2px 6px;
border-radius:4px;
color:var(--murekkep);
}
/* ——— kategori şeridi ——— */
.serit{
position:fixed;
left:0; right:0; bottom:0;
/* Galaksi 9500'de; şerit onun ÜSTÜNDE çünkü galakside de duruyor —
çıkış yolu şeridin ucundaki küre simgesi. */
z-index:9600;
background:linear-gradient(to top,rgba(7,12,21,.97),rgba(7,12,21,.82));
-webkit-backdrop-filter:blur(12px);
backdrop-filter:blur(12px);
border-top:1px solid var(--cizgi);
padding-bottom:env(safe-area-inset-bottom,0px);
}
.serit-ic{
display:flex;
align-items:center;
justify-content:center;
gap:8px;
height:var(--serit-h);
padding:0 12px;
max-width:var(--serit-en);
margin:0 auto;
/* Küreye ortalı (kure.js → yuzenKonumla). */
transform:translateX(var(--serit-kay, 0px));
}
.serit-liste{
display:flex;
align-items:center;
gap:8px;
flex:0 1 auto;
min-width:0;
overflow:hidden;
/* 17 Eylül 2026, Kemal: "alt bölümü uzatmak zorunda değilsin. sığmayanları
hamburger menüye al. orası belli bir oranda ve estetik kalsın." Liste
şeridin en çok %55'i; sığmayan kategori taşma menüsüne düşer
(tasmaHesapla clientWidth'e bakıyor). */
max-width:min(55%, 860px);
}
/* ——— KAPSÜL DEĞİL, KART ———
Kemal: *"bizim site felsefemiz küre değil artık… kare ve
dikdörtgen kartlar"* ve *"alt banddaki kategori kürecikleri…
kart felsefemize uygun hale gelsin."*
`999px` her düğmeyi bir hapa çeviriyordu; şeridin tamamı
yuvarlak lekelerden oluşuyordu ve üstündeki kart küresiyle
hiçbir akrabalığı yoktu. Yarıçap artık kartınkiyle aynı
ailede: köşe var ama sert değil. */
.kat-dugme{
flex:0 0 auto;
display:inline-flex;
align-items:center;
gap:8px;
min-height:44px;
padding:0 14px;
border-radius:10px;
border:1px solid var(--cizgi);
background:rgba(243,246,250,.04);
color:var(--murekkep-sonuk);
font-family:inherit;
font-size:13px;
font-weight:500;
white-space:nowrap;
cursor:pointer;
transition:color .18s ease,background-color .18s ease,border-color .18s ease;
}
/* Simge kategorinin kendi rengini taşır; seçiliyken zemin amber olduğu
için renk devralınır, yoksa koyu zeminde okunmazdı. */
.kat-dugme .simge{
width:18px; height:18px;
flex:0 0 auto;
stroke:currentColor;
fill:none;
stroke-width:1.7;
stroke-linecap:round;
stroke-linejoin:round;
opacity:.9;
}
.kat-dugme[aria-pressed="true"] .simge{color:inherit !important;opacity:1}
.kat-dugme .sayi{
font-family:"IBM Plex Mono",monospace;
font-size:10.5px;
font-variant-numeric:tabular-nums;
opacity:.6;
}
.kat-dugme:hover{color:var(--murekkep);border-color:rgba(126,147,172,.45)}
.kat-dugme[aria-pressed="true"]{
background:var(--amber);
border-color:var(--amber);
color:#0B1220;
font-weight:600;
}
.kat-dugme[aria-pressed="true"] .sayi{opacity:.75}
.kat-dugme[aria-pressed="true"] .nokta{opacity:1}
.kat-dugme:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
.kat-dugme.gizli{display:none}
.serit-daha{
flex:0 0 auto;
display:inline-flex;
align-items:center;
gap:9px;
min-height:44px;
min-width:44px;
padding:0 13px;
border-radius:10px;
border:1px solid var(--cizgi);
background:rgba(243,246,250,.04);
color:var(--murekkep-sonuk);
font-family:inherit;
font-size:13px;
font-weight:500;
white-space:nowrap;
cursor:pointer;
transition:color .18s ease,background-color .18s ease,border-color .18s ease;
}
.serit-daha:hover{color:var(--murekkep);border-color:rgba(126,147,172,.45)}
.serit-daha:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
.serit-daha[hidden]{display:none}
.serit-daha.etkin{background:var(--amber);border-color:var(--amber);color:#0B1220;font-weight:600}
.cizgiler{display:grid;gap:3px;flex:0 0 auto}
.cizgiler i{display:block;width:16px;height:2px;border-radius:2px;background:currentColor}
.serit-daha[aria-expanded="true"] .cizgiler i:nth-child(2){opacity:.35}
.serit-ayar{
flex:0 0 auto;
display:inline-flex;
align-items:center;
justify-content:center;
width:44px; height:44px;
border-radius:12px;
border:1px solid var(--cizgi);
background:rgba(243,246,250,.04);
color:var(--murekkep-sonuk);
cursor:pointer;
transition:color .18s ease,border-color .18s ease;
}
.serit-ayar:hover{color:var(--murekkep);border-color:rgba(126,147,172,.45)}
.serit-ayar:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
.serit-ayar svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.7}
.serit-ayar[aria-pressed="true"]{
background:var(--amber); border-color:var(--amber); color:#0B1220;
}
/* ——— ŞERİDİN SOL UCU: OKURUN KENDİSİ ———
Kemal: *"bunu gören profil kimse alt bantta solda profil
fotoğrafı olmalı."* Şeridin sağ ucu "nereye gidiyorum" diyor
(ana küre), sol ucu artık "ben kimim".
KARE, daire değil. *Bir ara daireydi* ve savunması "okur ağının
her yerinde avatar daire" idi; Kemal kapattı: *"profil
fotoğrafının çerçevesi de kare. işimiz gücümüz kare dikdörtgen.
felsefe bu. her yerde bunu kullanmaya çalışacağız."* Kural bir
istisna listesi değil — kimlik işareti de o dile uyuyor.
Yarıçap 12px: şeritteki kare düğmelerle (`.serit-ayar`) AYNI.
*Başka bir değer verilseydi* yan yana duran iki kutu birbirine
akraba görünmezdi.
44px: dokunma hedefi kuralı. Fotoğraf kutuyu tamamen dolduruyor
(`object-fit:cover`) — *contain olsaydı* dikey bir fotoğrafın
yanında boşluk kalırdı. */
.serit-ben{
flex:0 0 auto;
display:inline-flex; align-items:center; justify-content:center;
width:44px; height:44px;
border-radius:12px;
border:1px solid var(--cizgi);
background:rgba(243,246,250,.04);
color:var(--murekkep-sonuk);
overflow:hidden; text-decoration:none;
font-weight:600; font-size:17px; line-height:1;
transition:color .18s ease,border-color .18s ease;
}
.serit-ben:hover{color:var(--murekkep);border-color:rgba(126,147,172,.45)}
.serit-ben:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
.serit-ben svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.7}
.serit-ben img{width:100%;height:100%;object-fit:cover;display:block}
/* Fotoğraflı hesapta zemin görünmüyor; boş bir ton fotoğrafın
kenarında halka gibi duruyordu. */
.serit-ben.fotografli{background:none}
/* Dişli bir BAĞLANTI (giriş ya da ayarlar sayfası), düğme değil;
kutusu `.serit-ayar` ile aynı, alt çizgi yok. */
a.serit-ayar{text-decoration:none}
/* ——— GALAKSİ DÜĞMESİ ŞERİDİN SAĞ ÜSTÜNDE ———
Şerit "hangi akış" sorusunun yeri; galaksi akışların tamamına çıkan
ayrı bir kat. Bu yüzden şeridin içinde değil, üstünde duruyor.
Galaksi açıkken kendini gizler: oradayken gösterecek bir yer yok. */
.galaksi-dugme{
position:fixed;
/* ——— ŞERİDİN SAĞ UCUYLA HİZALI ———
*Ekranın sağ kenarına sabitlenmişti* ve geniş ekranda şerit
1280'de bitip düğme çok daha sağda kalıyordu — ikisi aynı köşeye
ait görünmüyordu. Şerit ortalanmış bir kutu; düğme de onun sağ
ucundan biraz içeride durmalı, ekranın kenarından değil.
Dar ekranda kutu zaten ekran kadar, formül 16px'e düşüyor. */
/* 14 Eylül 2026: bir ara şerit ekran boyuna açıldı ve düğme ekranın sağ
ucuna gitti; Kemal: *"her boyutta neden menü tam sağa tam sola gidiyor.
ortadayken ona göre ayarlasın."* Geri alındı: şerit ortada, düğme onun
sağ ucunda. */
/* 17 Eylül 2026, Kemal: "en sağda yukarı doğru dizilen ekstra menüler
ekranla sağa doğru gidebilir" → ekranın sağ kenarına yakın. */
/* 17 Eylül 2026 akşam, Kemal: "her şartta kürenin sonuna konumlanacak" →
kürenin sağ kenarının hemen dışı (kure.js → --yuzen-sag). */
right:var(--yuzen-sag, 16px);
bottom:calc(var(--serit-h) + env(safe-area-inset-bottom,0px) + 14px);
z-index:9650;
display:inline-flex; align-items:center; justify-content:center;
width:50px; height:50px;
/* Yuvarlak değil: kategoriler ve iller düğmeleri de kart
ailesinden. 13px, 50px'lik kutuda kartın köşe oranına
denk geliyor. */
border-radius:13px;
/* ——— GÖRÜNÜR OLMALI ———
Şeritteki öteki simgelerle aynı sönük griydi ve kürenin üstünde
kayboluyordu. Oysa bu düğme bir kategori değil, bir KATMAN
değiştiriyor — sitedeki en büyük hareket. Amber onu şeritten
ayırıyor; hâle karanlık kürenin üstünde sınırını çiziyor. */
border:1px solid rgba(245,179,60,.55);
background:radial-gradient(circle at 50% 40%,
rgba(245,179,60,.16), rgba(11,18,32,.92) 70%);
-webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
color:var(--amber);
box-shadow:0 0 0 4px rgba(245,179,60,.06), 0 10px 26px rgba(0,0,0,.5);
cursor:pointer;
transition:color .18s ease,border-color .18s ease,box-shadow .2s ease,
opacity .2s ease,transform .2s ease;
}
.galaksi-dugme svg{width:23px;height:23px;stroke:currentColor;fill:none;stroke-width:1.7}
.galaksi-dugme:hover{
border-color:var(--amber);
box-shadow:0 0 0 5px rgba(245,179,60,.12), 0 12px 30px rgba(0,0,0,.55);
transform:translateY(-1px);
}
.galaksi-dugme:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
/* "Hepsi" nabzın üstünde; aralık galaksi→nabız aralığıyla aynı (60px).
Kendi sayfasında görünmez — oradayken gidecek bir yer yok. */
.hepsi-dugme{
bottom:calc(var(--serit-h) + env(safe-area-inset-bottom,0px) + 134px);
text-decoration:none;
}
body.kisi-akisi .hepsi-dugme{
bottom:calc(var(--serit-h) + env(safe-area-inset-bottom,0px) + 134px + 82px);
}
body.hepsi .hepsi-dugme{ display:none }
body.akis-secim .hepsi-dugme{ display:none }
/* Şeridin ucundaki düğme anasayfadayken kategorilere gider (index.html). */
.serit-kure .ik-kategori{ display:none }
/* 17 Eylül 2026 akşam, Kemal: "anasayfada ana küre butonu gidiyor o göz gibi
olan geliyor. üstünde yine göz butonu var." Galaksi düğmesiyle çift
duruyordu; şeridin ucu her akışta anasayfa simgesi. */
/* Galakside gizlenir — dönüş yolu şeridin ucundaki küre. */
.galaksi-dugme.gizli{opacity:0;transform:scale(.8);pointer-events:none}
/* ——— galaksi: kürelerin kuş bakışı görünümü ——— */
.sahne{ transition:transform .42s cubic-bezier(.4,0,.2,1), opacity .34s ease }
/* KÜRE BİR NESNEDİR: çevrilir, ama bir de İTİLİR. İtilince ekrandan
çıkar, yerine öteki küre gelir. Kayan bir liste yok — kürenin
kendisi kayıyor. Galakside gezegenlerin nesne olmasıyla aynı fikir,
bir kat aşağıda. */
.sahne.kaydir{ transition:transform .26s cubic-bezier(.32,0,.24,1),
opacity .26s ease }
.sahne.cikSol{ transform:translateX(-118%); opacity:0 }
.sahne.cikSag{ transform:translateX( 118%); opacity:0 }
@media (prefers-reduced-motion:reduce){
.sahne.kaydir{ transition:opacity .2s ease }
.sahne.cikSol,.sahne.cikSag{ transform:none }
}
/* ——— GALAKSİDEYKEN ANA KÜRE SAHNEDEN TAMAMEN ÇEKİLİR ———
Saydamlığı 0 yapmak onu GÖRÜNMEZ yapar ama tarayıcı için orada
durmaya devam eder: 91 kart, 91 fotoğraf, hepsi düzen hesabında ve
bellekte. `content-visibility` tarayıcıya "bu dalı hiç çizme" der;
çizim, düzen ve fotoğraf çözme işi durur. Geçiş bitince uygulanıyor
(`.gizli`), yoksa küçülme animasyonu görünmeden kesilirdi.
*Ölçüldü: galakside ana kürenin 91 kartı hâlâ bellekte duruyordu.* */
.sahne.uzakta{ transform:scale(.28); opacity:0; pointer-events:none }
.sahne.uzakta.gizli{ content-visibility:hidden }
.galaksi{
position:fixed; inset:0; z-index:9500;
background-color:var(--zemin);
/* uzay: derinlik için tek bir yumuşak ışık, üstüne seyrek yıldızlar */
background:
radial-gradient(1px 1px at 12% 22%,rgba(226,238,255,.55),transparent),
radial-gradient(1px 1px at 78% 14%,rgba(226,238,255,.42),transparent),
radial-gradient(1.4px 1.4px at 33% 71%,rgba(226,238,255,.38),transparent),
radial-gradient(1px 1px at 61% 84%,rgba(226,238,255,.5),transparent),
radial-gradient(1px 1px at 88% 62%,rgba(226,238,255,.32),transparent),
radial-gradient(1.2px 1.2px at 24% 46%,rgba(226,238,255,.3),transparent),
radial-gradient(1px 1px at 47% 9%,rgba(226,238,255,.35),transparent),
radial-gradient(1px 1px at 7% 78%,rgba(226,238,255,.28),transparent),
radial-gradient(1px 1px at 93% 33%,rgba(226,238,255,.36),transparent),
radial-gradient(120% 90% at 50% 12%,#0F1A2C 0%,var(--zemin) 62%);
display:flex; flex-direction:column;
opacity:0; transform:scale(.94);
transition:opacity .34s ease, transform .42s cubic-bezier(.4,0,.2,1);
overscroll-behavior:contain;
}
.galaksi.acik{ opacity:1; transform:none }
/* Galaksinin kendi logosu var; sayfanın üstündeki sabit logo onun
altında ikinci bir kopya olarak görünüyordu. */
body.galaksi-acik > header{ opacity:0; pointer-events:none }
/* Galakside sayfalama yok: ilerlenecek bir küre sayfası orada yok.
Mobilde bu düğme şeridin üstünde durduğu için kendiliğinden
kaybolmuyor, açıkça gizleniyor. */
body.galaksi-acik .devam-sarma{display:none}
/* Üstte yalnız logo — ana ekrandakiyle aynı yerde, aynı boyda.
Okur katman değiştirdiğini gezegenlerden anlıyor, yazıdan değil. */
.galaksi-bas{
display:flex; align-items:center; gap:12px;
padding:20px 24px 6px;
padding-top:calc(20px + env(safe-area-inset-top,0px));
pointer-events:none;
}
/* Galaksi bir ızgara değil, bir küredir: gezegenler ortadan hesaplanan
konumlara oturur, sürüklenince döner. Bu yüzden burada düzen kuralı
yok — hepsi JavaScript'te transform ile yerleşir. */
.galaksi-ic{
position:relative; flex:1; min-height:0;
overflow:hidden; touch-action:none; cursor:grab;
isolation:isolate;
/* Şerit galakside de duruyor; gezegenler onun altında kalmasın. */
padding-bottom:calc(var(--serit-h) + env(safe-area-inset-bottom,0px));
}
.galaksi-ic:focus{outline:none}
.galaksi-ic:active{ cursor:grabbing }
/* ═══════════════════════════════════════════════════════════════
CANLI NABIZ — illerin küresi
Galaksinin kardeşi: aynı zemin, aynı çevirme, aynı derinlik.
Farkı gezegen yerine BAYRAK olması. Gezegen bir akışın gövdesi;
bayrak bir yere dikilen işaret — il bir gövde değil, bir yer.
*Düz harita yapıldı ve ekran olmaktan çıkarıldı;* sebebi
`#nabiz` DOM yorumunda.
═══════════════════════════════════════════════════════════════ */
/* ——— NABIZ DÜĞMESİ GALAKSİNİN ÜSTÜNDE ———
*Konum verilmeseydi* ikisi birebir aynı noktaya oturuyordu ve alttaki
hiç tıklanamıyordu (ölçüldü: ikisi de x=1278, y=822). Aynı dikey
çizgide, bir düğme boyu yukarıda: ikisi de katman değiştiriyor,
aynı köşeye ait görünmeliler. */
.nabiz-dugme{
bottom:calc(var(--serit-h) + env(safe-area-inset-bottom,0px) + 74px);
}
/* ——— İLLER EKRANINDA BAYRAK YOK, YERİNDE İL ARAMA ———
Kemal: *"yerele tıkladığımızda bayraklı logo gitmeli... bir de liste
arama şekli olmalı."* Aynı yuva: okur düğmenin yerini yeniden
öğrenmek zorunda kalmıyor. Liste alttan açılıyor (menüler alttan). */
.il-ara-dugme{display:none}
body.akis-iller #serit-nabiz{display:none}
body.akis-iller .il-ara-dugme{display:inline-flex}
/* Düelloda yüzen düğmeler yok (Kemal: "düello modunda menüleri olmasın.
isteyen anasayfaya dönsün"): büyük kartların yazısının üstüne biniyorlardı.
Çıkış yolu alt banttaki anasayfa düğmesi. */
body.akis-duello .galaksi-dugme,
body.akis-duello .hepsi-dugme{display:none !important}
/* Temsilî (arşiv) fotoğraf çoğunlukla dikey: kırpılmaz, sığdırılır; arkası
bulanık kopya. Yazılı görselin düzeniyle aynı. */
.kart.duello-karti.duello-temsili .gorsel{background:#05080e; overflow:hidden}
.kart.duello-karti.duello-temsili .gorsel::before{
content:""; position:absolute; inset:-10%;
background:var(--poster) center/cover no-repeat;
filter:blur(.8em) brightness(.42) saturate(1.1);
}
.kart.duello-karti.duello-temsili .gorsel img{position:relative; object-fit:contain}
/* Kaynakta görsel yoksa arşivden konan görselin işareti: sağ üstte, sönük. */
.kart.duello-karti .duello-temsili-not{
position:absolute; top:.9em; right:.9em; z-index:3; pointer-events:none;
font-size:1.05em; line-height:1.2; padding:.25em .55em; border-radius:.35em;
background:rgba(4,7,12,.72); color:rgba(243,246,250,.82); letter-spacing:.02em;
}
.il-liste .nb-liste-bas{gap:10px}
.il-liste-ara{
flex:1; min-width:0; height:44px; padding:0 14px;
border-radius:10px; border:1px solid rgba(126,147,172,.28);
background:rgba(20,31,49,.7); color:#EEF4FF;
font:inherit; font-size:16px; /* 16px: iPhone odaklanınca yakınlaştırmasın */
}
.il-liste-ara:focus{outline:none; border-color:rgba(245,179,60,.7)}
.il-liste .nb-liste-kapat{flex:none; width:44px; height:44px; border-radius:10px}
.il-liste-plaka{
font-family:"IBM Plex Mono",ui-monospace,monospace;
font-variant-numeric:tabular-nums; font-size:12px; color:#7E93AC;
}
.il-liste-bos{grid-column:1/-1; padding:10px 4px; color:#7E93AC}
.nabiz{
position:fixed; inset:0; z-index:9500;
background-color:var(--zemin);
background:
radial-gradient(1px 1px at 12% 22%,rgba(226,238,255,.55),transparent),
radial-gradient(1px 1px at 78% 14%,rgba(226,238,255,.42),transparent),
radial-gradient(1.4px 1.4px at 33% 71%,rgba(226,238,255,.38),transparent),
radial-gradient(1px 1px at 61% 84%,rgba(226,238,255,.5),transparent),
radial-gradient(1px 1px at 88% 62%,rgba(226,238,255,.32),transparent),
radial-gradient(1.2px 1.2px at 24% 46%,rgba(226,238,255,.3),transparent),
radial-gradient(1px 1px at 47% 9%,rgba(226,238,255,.35),transparent),
radial-gradient(120% 90% at 50% 12%,#0F1A2C 0%,var(--zemin) 62%);
display:flex; flex-direction:column;
opacity:0; transform:scale(.94);
transition:opacity .34s ease, transform .42s cubic-bezier(.4,0,.2,1);
overscroll-behavior:contain;
}
.nabiz.acik{ opacity:1; transform:none }
body.nabiz-acik > header{ opacity:0; pointer-events:none }
body.nabiz-acik .devam-sarma{display:none}
/* ——— SOSYAL AĞDA "İLERLE" YOK ———
Kemal: *"sosyal ağımızda ilerle butonu olmayacak. akış verilerek
devam edecek. aşağı indikçe yeni akışlar ekrana gelirken eskiler
düşecek, sistem yorulmayacak."*
Haber küresinde sayfalama duruyor ve orada doğru: *"her basış
bir karardır, okuyucu ne kadar ilerlediğini bilir."* Okur ağı
ise bir AKIŞ — nerede olduğunun sayısı yok, bitmesi de yok.
Sayfa numarası orada okura hiçbir şey söylemiyor.
Düğmeler gizlenmiyor, hiç çizilmiyor (`devamTazele` erken
dönüyor); bu satır ipucu şeridiyle birlikte yeri de kapatıyor. */
body.akis-okur .devam-sarma{display:none}
/* ═══ PROFİL: AKIŞIN ÜSTÜNDE KİMLİK ŞERİDİ, ALTTAN AÇILAN HAKKINDA ═══
Kemal: *"birinin profiline girdiğimizde görseli ve yanında ahmet
yılmaz yazıyor, diğer yanında hakkında butonu. üstte yine onun
paylaşımları küre şeklinde dönüyor."* ve *"felsefemizden bir diğeri
de menüyü alttan açıyoruz."*
Profil ayrı bir belge sayfası DEĞİL: akış zaten ekranda dönüyor,
üstüne yalnız kimin akışı olduğunu söyleyen bir şerit biniyor.
*Ayrı sayfa yapılsaydı* aynı gönderiler iki düzende iki kez
gösterilirdi — Keşfet'te bir kez düşülen tuzağın aynısı. */
.kisi-serit{
position:fixed; left:0; right:0;
bottom:calc(var(--serit-h) + env(safe-area-inset-bottom,0px));
z-index:9550;
display:none; align-items:center; gap:10px;
justify-content:space-between;
max-width:var(--serit-en); margin:0 auto;
padding:8px 12px;
background:rgba(10,13,20,.72);
-webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
border-top:1px solid var(--cizgi);
}
body.kisi-akisi .kisi-serit{display:flex}
/* ——— YÜZEN DÜĞMELER ŞERİDİN ÜSTÜNE ÇIKIYOR ———
Galaksi ve nabız düğmeleri şeridin hemen üstünde duruyor; kimlik
şeridi araya girince *ölçüldü:* Hakkında düğmesinin sağ yarısı
onların altında kalıyor ve basılamıyordu. İki dokunma hedefi
üst üste binmemeli — düğmeler şeridin boyu kadar yukarı çıkıyor.
Şerit yüksekliği ÖLÇÜLDÜ: fotoğraf 44 + boşluk 5 + ad satırı 16
+ 2x8 dolgu + 1 çizgi = 82px. *Ad fotoğrafın yanındayken 61px
yetiyordu;* ad altına inince şerit büyüdü ve galaksi düğmesi 7px
bandın içine girdi (ölçüldü). */
body.kisi-akisi .galaksi-dugme{
bottom:calc(var(--serit-h) + env(safe-area-inset-bottom,0px) + 14px + 82px);
}
body.kisi-akisi .nabiz-dugme{
bottom:calc(var(--serit-h) + env(safe-area-inset-bottom,0px) + 74px + 82px);
}
/* Fotoğraf KARE — projenin kimliği kare ve dikdörtgen. */
.kisi-serit .foto{
flex:0 0 auto; width:44px; height:44px; border-radius:12px;
object-fit:cover; display:inline-flex; align-items:center; justify-content:center;
background:rgba(243,246,250,.06); border:1px solid var(--cizgi);
font-weight:600; font-size:17px; color:var(--murekkep-sonuk); overflow:hidden;
}
.kisi-serit .foto img{width:100%;height:100%;object-fit:cover;display:block}
/* ——— ŞABLON: FOTOĞRAF ÜSTTE, ADI ALTINDA, HAKKINDA SAĞ UÇTA ———
Kemal: *"solda fotoğrafı, fotoğrafın altında ahmet yılmaz,
bandın sağ tarafına yaslanmış hakkında bölümü. şablon bu."*
*Ad bir ara fotoğrafın YANINDAYDI* ve bandı bir satır alçak
tutuyordu; ama o zaman kimlik yatay bir şerit gibi okunuyor,
fotoğrafla ad ayrı iki şey gibi duruyordu. Alt alta gelince
ikisi tek bir künye oluyor ve sağdaki düğmeye de gerçek bir
boşluk kalıyor.
`@kullanıcı adı` ekranda yazmıyor, `title` içinde: bandın işi
kim olduğunu söylemek, kimlik kartı basmak değil. */
.kisi-serit .kim{
flex:0 1 auto; min-width:0;
display:flex; flex-direction:column; align-items:center; gap:5px;
}
.kisi-serit .kim b{
display:block; max-width:42vw;
font-size:14px; font-weight:600; line-height:1.15;
overflow:hidden; white-space:nowrap; text-overflow:ellipsis;
}
.kisi-serit .hakkinda-ac{
flex:0 0 auto; min-height:38px; padding:0 14px; border-radius:10px;
border:1px solid var(--cizgi); background:rgba(243,246,250,.04);
color:var(--murekkep); font:inherit; font-size:13.5px; font-weight:600;
cursor:pointer;
}
.kisi-serit .hakkinda-ac:hover{border-color:rgba(126,147,172,.45)}
/* ——— ALTTAN AÇILAN TABAKA ———
Şeridin taşma menüsüyle aynı hareket: aşağıdan yukarı. *Ortada
bir kutu olarak açılsaydı* sitede iki ayrı açılma dili olurdu. */
.kisi-tabaka{
position:fixed; left:0; right:0;
bottom:calc(var(--serit-h) + env(safe-area-inset-bottom,0px));
z-index:9700;
max-height:min(70vh, 560px); overflow:auto;
/* Zemin OPAK: taşma menüsüyle aynı yüzey. *Yarı saydam kart rengi
kullanılınca* arkadaki küre okunuyor ve tabakanın yazısı onun
üstünde bulanıklaşıyordu — ölçüldü, ekranda görüldü. */
background:var(--zemin-2); border-top:1px solid var(--cizgi);
box-shadow:0 -18px 40px rgba(2,5,12,.55);
border-radius:18px 18px 0 0;
padding:14px 14px 20px;
transform:translateY(100%); opacity:0;
transition:transform .22s ease, opacity .18s ease;
max-width:var(--serit-en); margin:0 auto;
}
.kisi-tabaka.acik{transform:none; opacity:1}
.kisi-ortu{
position:fixed; inset:0; z-index:9690;
background:rgba(4,7,12,.55);
-webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px);
}
.kisi-tabaka .tb-bas{
display:flex; align-items:center; gap:10px; margin-bottom:12px;
}
.kisi-tabaka .tb-bas h2{margin:0; font-size:16px; flex:1 1 auto}
.kisi-tabaka .tb-kapa{
width:38px; height:38px; border-radius:10px; border:1px solid var(--cizgi);
background:none; color:var(--murekkep-sonuk); cursor:pointer; font-size:18px;
line-height:1;
}
/* ═══ DÜELLO ═══
Şerit gündemin künyesi: solda görsel (kare köşe), yanında DÜELLO +
Gündemler düğmesi, başlık (2 satır), tarafsız spot (2 satır). Boy
`--duello-h`: yüzen düğmelerin kaydırma payı aynı sayıdan. Tarafların
adı yazılmaz. Tabaka `.kisi-tabaka` dilini kullanıyor. */
/* `--serit-en`: alt menünün genişliği EKRANA GÖRE — ekranın %72'si, en az
1280 px, ortada (Kemal: "ekrana göre ayarlasın"). Şeritler, alttan açılan
liste ve sağdaki düğmelerin hizası aynı sayıdan. */
:root{--duello-h:168px; --serit-en:max(1280px, 72vw)}
.duello-serit{
position:fixed; left:0; right:0;
bottom:calc(var(--serit-h) + env(safe-area-inset-bottom,0px));
z-index:9550;
display:none; align-items:stretch; gap:14px;
max-width:var(--serit-en); margin:0 auto; height:var(--duello-h); box-sizing:border-box;
padding:14px 16px;
/* Gündem kartı dönen kartların gölgesinde kalmasın (Kemal: "gündem
yazımız dikkat çekmesi gerekiyor"): opak zemin, üstte amber çizgi,
yukarı doğru koyu hâle — kartlar şeride yaklaşınca sönüyor. */
/* Renk logonun sarısı (Kemal: "o bölümün rengini de değiştir"): koyu
kartların arasında tek sarı yüzey; yazı koyu mürekkep. */
background:linear-gradient(180deg, #ffc62e 0%, #f4b000 100%);
border-radius:14px 14px 0 0;
box-shadow:0 -26px 40px 6px rgba(6,9,15,.92), 0 -2px 22px rgba(255,190,20,.35);
overflow:hidden;
}
body.akis-duello .duello-serit{display:flex}
/* Kartlar sabit gündem kartının ÜSTÜNDEKİ alanda döner, altına girmez
(Kemal: "kartlar sabit gündem kartının üstünde dönsün"). Küre ölçüsü de
bu boydan (kure.js → ekranOlculeri). */
body.akis-duello .sahne{bottom:calc(var(--serit-h) + env(safe-area-inset-bottom,0px) + var(--duello-h))}
body.akis-duello .galaksi-dugme{
bottom:calc(var(--serit-h) + env(safe-area-inset-bottom,0px) + 14px + var(--duello-h));
}
/* SVG test sayfası (tescil görselleri): bayrak simgeli düğme görünmez. */
body.svg-kip .nabiz-dugme{ display:none !important }
/* Anasayfanın h1'i: görünmez, ekran okuyucu ve arama motoru okur.
`display:none` DEĞİL — o hâlde ikisi de okumaz. */
.gizli-baslik{
position:absolute; width:1px; height:1px; margin:-1px; padding:0;
overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
body.akis-duello .nabiz-dugme{
bottom:calc(var(--serit-h) + env(safe-area-inset-bottom,0px) + 74px + var(--duello-h));
}
.duello-serit .dl-gorsel{
flex:0 0 auto; aspect-ratio:4/3; height:100%;
border-radius:10px; overflow:hidden; background:#05080e;
border:1px solid var(--cizgi);
}
.duello-serit .dl-gorsel img{display:block; width:100%; height:100%; object-fit:cover}
.duello-serit .dl-kim{flex:1 1 auto; display:flex; flex-direction:column; justify-content:center; gap:6px; min-width:0}
.duello-serit .dl-ust{display:flex; align-items:center; justify-content:space-between; gap:10px; min-height:30px}
.duello-serit .dl-etiket{
font-style:normal; font-size:12px; font-weight:800; letter-spacing:.12em;
text-transform:uppercase; color:#ffc62e; background:#10141c;
padding:4px 9px; border-radius:6px; line-height:1;
}
.duello-serit .dl-baslik{
font-size:26px; font-weight:800; line-height:1.18; color:#0b0f17; letter-spacing:-.01em;
text-wrap:balance;
overflow:hidden; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2;
}
.duello-serit .dl-spot{
max-width:86ch; font-size:15px; line-height:1.4; color:rgba(16,20,28,.8);
overflow:hidden; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2;
}
/* Düğme görünüşte 30px, dokunma alanı 44px (şeridin boyu kısa kalsın). */
.duello-serit .dl-dugme{
position:relative; flex:0 0 auto; min-height:30px; padding:0 12px; border-radius:9px;
border:1px solid rgba(16,20,28,.35); background:rgba(16,20,28,.08);
color:#10141c; font:inherit; font-size:12.5px; font-weight:700; cursor:pointer;
}
.duello-serit .dl-dugme::after{content:""; position:absolute; inset:-7px -4px}
/* Gündem arşivi menüsü (Günün · Dünün · Haftanın · Ayın · Yılın): her zaman
görünür; dar ekranda yana kayar, satır kırılmaz. */
.duello-serit .dl-menu{
display:flex; gap:6px; min-width:0; overflow-x:auto; scrollbar-width:none;
padding:7px 4px; margin:-7px -4px; font-variant-numeric:tabular-nums;
}
.duello-serit .dl-menu::-webkit-scrollbar{display:none}
.duello-serit .dl-menu .dl-dugme{white-space:nowrap}
.duello-serit .dl-menu .dl-dugme::after{inset:-7px -3px}
.duello-serit .dl-dugme.bos{opacity:.55}
.duello-serit .dl-dugme:hover{background:rgba(16,20,28,.16)}
.duello-serit .dl-dugme:focus-visible{outline:2px solid #10141c; outline-offset:2px}
@media (max-width:620px){
.duello-serit .dl-ust{justify-content:flex-start}
.duello-serit .dl-menu .dl-dugme{font-size:12px; padding:0 9px}
}
@media (max-width:620px){
:root{--duello-h:166px}
.duello-serit{gap:10px; padding:12px}
.duello-serit .dl-gorsel{aspect-ratio:3/4}
.duello-serit .dl-baslik{font-size:19px}
.duello-serit .dl-spot{font-size:13px; line-height:1.35}
}
/* ——— CANLI YAYIN: "BİRAZDAN BURADA" ŞERİDİ VE SABİT YAYIN EKRANI ———
Kemal: *"canlı yayına dakika kala üstte kırmızı bir şerit çıkar.
yanıp sönerek canlı yayını ve konusunu bildirir.. 'birazdan burada'
yazar. canlı yayın saatinde de orada yatay sabit bir ekran kartı
açılır."* İkisi AYNI yerde, başlığın hemen altında.
- Yanıp sönme YAVAŞ (1,6 sn) ve yalnız saydamlıkta: hızlı yanıp
sönme hem yorar hem nöbet riski taşır (son dakika ışığındaki kural).
Koyu katman `::before`, arka plan rengi her karede boyanmaz.
- Galaksinin (9500) üstünde, ortaya açılan kartın (9680) ve alttan
açılan listelerin (9700) altında. */
:root{ --canli-kirmizi:#E0243A; --canli-ust:80px }
.canli-serit,.canli-ekran{
position:fixed; left:0; right:0; z-index:9560;
top:calc(env(safe-area-inset-top,0px) + var(--canli-ust));
margin:0 auto;
}
.canli-serit{
width:min(760px, calc(100vw - 32px));
display:flex; align-items:center; gap:12px;
min-height:48px; padding:2px 2px 2px 14px;
border-radius:12px; background:var(--canli-kirmizi); color:#fff;
box-shadow:0 10px 30px rgba(224,36,58,.32);
}
.canli-serit::before{
content:""; position:absolute; inset:0; border-radius:inherit;
background:#7E0C1C; opacity:0; pointer-events:none;
animation:canliNabiz 1.6s ease-in-out infinite;
}
@keyframes canliNabiz{ 50%{ opacity:.62 } }
.canli-serit > *{ position:relative }
.cs-nokta{ width:10px; height:10px; border-radius:2px; background:#fff; flex:0 0 auto }
.cs-metin{ flex:1 1 auto; min-width:0; display:flex; align-items:baseline; gap:10px }
.cs-etiket{ font-size:12px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; white-space:nowrap }
.cs-konu{ min-width:0; font-size:15px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.cs-sure{ font-family:"IBM Plex Mono",monospace; font-size:13px; white-space:nowrap; font-variant-numeric:tabular-nums }
.cs-kapa,.ce-dus{
flex:0 0 auto; width:44px; height:44px; border:0; border-radius:10px;
display:inline-flex; align-items:center; justify-content:center;
background:transparent; color:inherit; cursor:pointer;
}
.cs-kapa:hover{ background:rgba(0,0,0,.18) }
.cs-kapa svg,.ce-dus svg{ width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round }
.cs-kapa:focus-visible,.ce-dus:focus-visible,.ce-baslat:focus-visible{ outline:2px solid #fff; outline-offset:-4px }
.canli-ekran{
width:min(640px, 46vw, calc(100vw - 32px));
border-radius:14px; overflow:hidden; background:#05080e;
border:1px solid rgba(224,36,58,.6);
box-shadow:0 18px 50px rgba(0,0,0,.6);
}
.ce-bas{ display:flex; align-items:center; gap:10px; min-height:44px; padding-left:12px; background:rgba(10,13,20,.94) }
.ce-rozet{
display:inline-flex; align-items:center; gap:6px; flex:0 0 auto;
padding:3px 8px; border-radius:6px; background:var(--canli-kirmizi); color:#fff;
font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
}
.ce-rozet::before{ content:""; width:7px; height:7px; border-radius:2px; background:#fff; animation:canliNokta 1.6s ease-in-out infinite }
@keyframes canliNokta{ 50%{ opacity:.25 } }
.ce-baslik{ flex:1 1 auto; min-width:0; font-size:14px; font-weight:600; color:var(--murekkep); overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.ce-dus{ color:var(--murekkep-sonuk); border-radius:0; border-left:1px solid var(--cizgi) }
.ce-dus:hover{ color:var(--murekkep); background:rgba(243,246,250,.06) }
.ce-oynatici{
position:relative; aspect-ratio:16/9; background:#000 center/cover no-repeat;
display:flex; align-items:center; justify-content:center;
}
.ce-oynatici iframe,.ce-oynatici video{ position:absolute; inset:0; width:100%; height:100%; border:0; background:#000 }
.ce-baslat{
min-height:44px; padding:0 18px; border:0; border-radius:10px;
background:var(--canli-kirmizi); color:#fff; font:inherit; font-weight:700; cursor:pointer;
}
.ce-bekle{ padding:6px 12px; border-radius:8px; background:rgba(5,8,14,.78); color:var(--murekkep); font-size:13px }
/* Küredeki canlı kart: kırmızı çerçeve ve künye. */
.kart.canli-karti{ border-color:rgba(224,36,58,.75) }
.kart.canli-karti .ust{ color:#FF7A88 }
@media (prefers-reduced-motion:reduce){
.canli-serit::before,.ce-rozet::before{ animation:none }
}
@media (max-width:620px){
:root{ --canli-ust:68px }
.canli-serit,.canli-ekran{ width:calc(100vw - 20px) }
.cs-metin{ flex-direction:column; align-items:flex-start; gap:1px }
.cs-etiket{ font-size:10.5px }
.cs-konu{ max-width:100%; font-size:13.5px }
}
.dl-liste{display:grid; gap:8px}
.dl-gundem{
display:flex; flex-direction:column; align-items:flex-start; gap:3px;
min-height:56px; padding:10px 12px; border:1px solid var(--cizgi); border-radius:12px;
background:rgba(243,246,250,.03); color:var(--murekkep); font:inherit; text-align:left; cursor:pointer;
}
.dl-gundem b{font-size:14.5px; font-weight:600}
.dl-gundem span{font-size:12.5px; color:var(--murekkep-sonuk)}
.dl-gundem[aria-pressed="true"]{border-color:var(--amber)}
/* Dönem sekmeleri: kare, seçili amber çerçeve + kalın (ayarlar ekranının dili). */
.dl-sekmeler{display:flex; flex-wrap:wrap; gap:8px; margin:0 0 12px}
.dl-sekmeler .dl-sekme{flex:1 1 90px}
.dl-sekme{
min-height:44px; padding:0 10px; border-radius:10px; font:inherit; font-size:14px; cursor:pointer;
background:transparent; color:var(--murekkep-sonuk); border:1px solid var(--cizgi);
font-variant-numeric:tabular-nums
}
.dl-sekme[aria-selected="true"]{border-color:var(--amber); color:var(--murekkep, #fff); font-weight:700}
.dl-sekme:focus-visible, .dl-gundem:focus-visible{outline:2px solid var(--amber); outline-offset:2px}
.dl-gundem .dl-meta.suruyor{color:var(--amber)}
.dl-bos{margin:8px 2px; color:var(--murekkep-sonuk); font-size:14px}
/* Düello kartı: poster KIRPILMIYOR (içindeki başlık kesilirdi),
sığdırılıyor; kalan boşluk posterin bulanık kopyası. Sabit süzgeç —
kart sayısı en çok 22, her karede yeniden hesaplanmıyor. */
.kart.taraf-A{--taraf:#E2231A}
.kart.taraf-B{--taraf:#3B82F6}
.kart.taraf-N{--taraf:#64748B}
.kart.duello-karti.yazili-gorsel .gorsel{background:#05080e; overflow:hidden}
.kart.duello-karti.yazili-gorsel .gorsel::before{
content:""; position:absolute; inset:-10%;
background:var(--poster) center/cover no-repeat;
filter:blur(.8em) brightness(.42) saturate(1.1);
}
.kart.duello-karti.yazili-gorsel .gorsel img{position:relative; object-fit:contain}
/* Sağ üstte kaynağın logosu ve adı (Kemal: "her kartın üst sağına net
logosunu yanına da ismini yaz"). Logo beyaz kare zeminde: koyu ya da
saydam simgeler koyu kartta kaybolmasın. Tarafın rengi rozetin sol
kenarında. Adı rozette olduğu için postersiz kartın üst satırı gizli. */
.kart.duello-karti .duello-rozet{
/* SOL ÜSTTE, logo solda (Kemal: "logo solda olacak yanlış söylemişim..
sola yasla biraz daha büyüt"). */
position:absolute; top:.7em; left:.7em; z-index:3;
display:flex; align-items:center; gap:.55em;
max-width:calc(100% - 1.4em); box-sizing:border-box;
padding:.35em .75em .35em .35em;
background:rgba(4,7,12,.8); border:1px solid rgba(255,255,255,.14);
border-left:.32em solid var(--taraf); border-radius:.55em;
pointer-events:none;
}
.kart.duello-karti .duello-rozet i{
flex:none; width:3.2em; height:3.2em; border-radius:.45em;
background:#fff center/84% no-repeat;
}
.kart.duello-karti .duello-rozet b{
min-width:0; font-size:1.4em; font-weight:700; color:#fff; line-height:1.1;
overflow:hidden; white-space:nowrap; text-overflow:ellipsis;
}
.kart.duello-karti .yazi .ust{display:none}
/* Yatay düello kartı DUELLO_GENIS (1,45) kat geniş: yazı ölçüsü dikey
karttakiyle aynı kalsın. */
body.akis-duello .kart.duello-karti{font-size:calc(var(--kart-en) / 17.45 / 1.9)}
/* İkili başlığın ilk parçası: küçük harf, küçük yazı, üst satırda. */
.kart.duello-karti.duello-ikili .yazi .ust{
display:block; white-space:normal; text-transform:none; letter-spacing:0;
font-size:1.35em; font-weight:600; line-height:1.2; color:#fff;
margin-bottom:.3em; text-shadow:0 1px 3px rgba(0,0,0,.6);
}
/* Başlık tam gösterilir; sığdırma yazıyı küçülterek yapılıyor (kure.js → tamSigdir). */
.kart.duello-karti .ana{max-height:none}
.kart.duello-karti:not(.yazili-gorsel) .yazi{border-left:.45em solid var(--taraf)}
/* Posteri olmayan (yalnız RSS başlığı gelen) kart: sayfanın yedek çizimi
DEĞİL, koyu zemin + taraf renginde hafif ışık. *Yedek çizim kalsaydı*
ekranda görüldü: posterlerin arasında sarımsı boş yamalar. */
.kart.duello-karti:not(.yazili-gorsel):not(.duello-gorselli) .gorsel img{visibility:hidden}
.kart.duello-karti:not(.yazili-gorsel):not(.duello-gorselli) .gorsel{
background:
radial-gradient(120% 70% at 30% 20%, color-mix(in srgb, var(--taraf) 34%, transparent), transparent 70%),
linear-gradient(to bottom, #111a29, #070b12);
}
/* Bölüm seçiciler: kare kartlar, sayısıyla. */
.kisi-bolumler{
display:grid; grid-template-columns:repeat(auto-fit, minmax(88px, 1fr));
gap:8px; margin-bottom:14px;
}
.kisi-bolumler button{
display:flex; flex-direction:column; align-items:flex-start; justify-content:center;
gap:2px; min-height:56px; padding:8px 10px;
border:1px solid var(--cizgi); border-radius:12px;
background:rgba(243,246,250,.03); color:var(--murekkep-sonuk);
font:inherit; font-size:12.5px; cursor:pointer; text-align:left;
}
.kisi-bolumler button b{font-size:16px; color:var(--murekkep); font-weight:600}
.kisi-bolumler button[aria-pressed="true"]{
border-color:var(--amber); color:var(--murekkep);
}
/* Hakkında satırları */
.kisi-bilgi{display:grid; gap:10px; margin:0}
.kisi-bilgi div{display:grid; gap:2px}
.kisi-bilgi dt{font-size:12px; color:var(--murekkep-sonuk)}
.kisi-bilgi dd{margin:0; font-size:14.5px; white-space:pre-line; overflow-wrap:anywhere}
.kisi-bos{color:var(--murekkep-sonuk); font-size:13.5px; margin:0}
/* Kişi ve medya kareleri */
.kisi-izgara{
display:grid; grid-template-columns:repeat(auto-fill, minmax(96px, 1fr));
gap:8px;
}
.kisi-izgara a{
display:block; text-decoration:none; color:inherit;
border:1px solid var(--cizgi); border-radius:12px; overflow:hidden;
background:rgba(243,246,250,.03);
}
.kisi-izgara .kare{
display:block; width:100%; aspect-ratio:1/1; object-fit:cover;
background:rgba(243,246,250,.06);
}
.kisi-izgara .harf{
display:flex; align-items:center; justify-content:center;
font-size:26px; font-weight:600; color:var(--murekkep-sonuk);
}
.kisi-izgara .ad{
display:block; padding:6px 8px; font-size:12.5px;
overflow:hidden; white-space:nowrap; text-overflow:ellipsis;
}
.kisi-izgara .oynat{position:relative}
.kisi-izgara .oynat::after{
content:""; position:absolute; left:8px; bottom:34px;
width:0; height:0; border-left:11px solid #fff;
border-top:7px solid transparent; border-bottom:7px solid transparent;
filter:drop-shadow(0 1px 2px rgba(0,0,0,.6));
}
/* Akış düğmesinin işareti: haber tarafında üç çizgi, okur ağında
bir karenin içinde dört kart. İkisi de markup'ta; yalnız biri
görünüyor. */
.akis-simge{display:none}
.akis-simge svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.7;display:block}
body.akis-okur .serit-daha .cizgiler{display:none}
body.akis-okur .serit-daha .akis-simge{display:block}
body.nabiz-acik #serit-nabiz{opacity:0;pointer-events:none}
.nabiz-ic{
position:relative; flex:1; min-height:0;
overflow:hidden; touch-action:none; cursor:grab;
isolation:isolate;
padding-bottom:calc(var(--serit-h) + env(safe-area-inset-bottom,0px));
}
.nabiz-ic:focus{outline:none}
.nabiz-ic:active{ cursor:grabbing }
/* ═══ KÜRE: İLLER KÜRENİN KABUĞU ═══
Yeryüzündeki ülkeler dünyayı nasıl oluşturuyorsa küreyi de iller
oluşturuyor. *İlk denemede kart gibiydiler,* kürenin önünde
uçuyorlardı; Kemal'in tespiti: "iller uzayda uçuyor… küreyi
oluşturan ana parça onlar." Artık her köşe noktası kürenin
yüzeyinde ve komşu iller aynı sınırı paylaşıyor.
Küre YUVARLAK: yarıçap tek. *Ana kürede olduğu gibi dikeyde
uzatılsaydı* top değil yumurta olurdu — dünya küresi basık olmaz. */
.nb-kure{
position:absolute; left:50%; top:50%;
width:var(--nb-cap,600px); height:var(--nb-cap,600px);
margin-left:calc(var(--nb-cap,600px) / -2);
margin-top:calc(var(--nb-cap,600px) / -2);
display:block;
overflow:visible;
/* Uzayda duran bir top: dışa sızan yumuşak bir ışık. */
filter:drop-shadow(0 0 34px rgba(38,124,190,.30));
}
/* Deniz OPAK. *Yarı saydam denendi ve bırakıldı:* arka yüzdeki iller
suyun içinden görününce küre bir cam bilyeye dönüyor, hangi ilin
önde olduğu anlaşılmıyordu. Gerçek küre ışık geçirmez. */
.nb-su{ }
.nb-golge,.nb-dalga,.nb-parlak{ pointer-events:none }
/* Parıltı nefes alıyor — nefes YALNIZ saydamlıkta, geçişi oynatmak
her karede yeniden boyama demek olurdu. */
@keyframes nbParilti{ 0%,100%{opacity:.7} 50%{opacity:1} }
.nb-parlak{ animation:nbParilti 11s ease-in-out infinite }
/* Su hep başka türlü parlıyor: iki katman birbirini kovalayan uzun
döngülerde solup beliriyor. *Kaydırma denenmedi bile bırakılmadı —
denendi:* bir tur sonunda desen başa dönerken sıçrıyor. */
@keyframes nbSu1{
0%,100%{ opacity:.30 }
50% { opacity:.72 }
}
@keyframes nbSu2{
0%,100%{ opacity:.62 }
50% { opacity:.22 }
}
/* Hafif kipte su dokusu kapalı: iki süzgeçli katman telefonda
çevirmeyi ağırlaştırıyor ve 350 pikselik bir kürede zaten
görünmüyor. Denizin kendi geçişi ve parıltısı duruyor. */
.nabiz.hafif .nb-dalga{ display:none }
.nb-dalga-1{ animation:nbSu1 19s ease-in-out infinite }
.nb-dalga-2{ animation:nbSu2 27s ease-in-out infinite }
/* ——— İL ———
Düz dolgu + ince koyu sınır: okul küresindeki gibi. Kalınlık,
gölge, kabartma YOK — kara kürenin yüzeyinde, üstünde değil.
Yuvarlaklığı `.nb-golge` perdesi veriyor; her ile ayrı gölge
vermek 81 süzgeç demek olurdu ve her karede yeniden boyanırdı. */
/* Kabartmanın iki yüzü: ikisi de dolgu, çizgi YOK — çizgi olsaydı
kenarda ikinci bir sınır çıkardı. */
.ik-golge{ fill:rgba(6,10,16,.6); stroke:none }
.ik-isik{ fill:rgba(255,244,220,.42); stroke:none }
.il-kara{
fill:var(--ik-renk,#B79A63);
stroke:rgba(12,16,22,.7);
stroke-width:1.6;
stroke-linejoin:round;
cursor:pointer;
}
.il-kara.sessiz{ fill:var(--ik-sonuk,#6E6553); cursor:default }
.il-kara:hover{ fill:var(--ik-acik,#D9BE86) }
/* Kalkan il küreden ayrılmış görünmeli: altına gölge düşüyor ve
komşularının üstünde duruyor. */
.il-kara.kalkik{
filter:drop-shadow(0 14px 18px rgba(2,8,16,.75));
stroke:rgba(255,246,228,.6);
stroke-width:2.4;
}
.il-kara:focus{ outline:none }
.il-kara:focus-visible{ stroke:#FFF1D2; stroke-width:4 }
.il-kara.secildi{ fill:#F6DFAE }
/* ——— AD TOPRAĞIN ÜSTÜNE YAZILIR: DÜZ BEYAZ ———
*Önce açık toprak üstünde koyu yazı vardı.* Toprak koyulaşınca
(kahve, gri, kiremit, yeşil) koyu yazı okunmaz oldu — Kemal'in
tespiti: "illerin yazısını düz beyaz yapsan daha okunaklı olsa."
Beyaz dokuz tonun hepsinde okunuyor. `paint-order` ile altına koyu
bir kontur: açık kalan bir ilde harfin kenarı yoksa kayboluyor. */
/* ——— AD DÜZ BEYAZ ———
*Önce koyu yazı + açık kontur vardı* (okul küresindeki gibi) ama
toprak koyulaşınca okunurluk düştü: koyu zeminde koyu yazı, onu
taşıyan da ince bir açık çizgiydi. Kemal: "illerin yazısını düz
beyaz yapsan daha okunaklı olsa."
Kontur ters çevrildi: yazı beyaz, çevresi koyu — her toprak
renginde okunuyor. */
.ik-ad{
font-family:"IBM Plex Sans Condensed",system-ui,sans-serif;
font-weight:700;
text-anchor:middle;
fill:#FFFFFF;
paint-order:stroke;
stroke:rgba(10,14,20,.72);
stroke-width:5;
stroke-linejoin:round;
pointer-events:none;
}
.ik-adet{
font-family:"IBM Plex Mono",ui-monospace,monospace;
font-weight:500;
text-anchor:middle;
fill:rgba(255,255,255,.86);
paint-order:stroke;
stroke:rgba(10,14,20,.7);
stroke-width:4;
pointer-events:none;
}
/* Olay olan ilin işareti — küçük bir bayrak, yanıp söner.
*Yanan şey bayrak, toprağın tamamı DEĞİL:* karanın da sönmesi
kürenin kabuğunu delerdi. */
.ik-bayrak{ pointer-events:none }
.ikb-flama{ fill:var(--nb-renk,#E0452F) }
.ikb-sopa{ stroke:rgba(32,20,8,.8); stroke-width:5; stroke-linecap:round }
@keyframes ikNabiz{
0%,100%{ opacity:.35 }
50% { opacity:1 }
}
.ik-bayrak.olayli{ animation:ikNabiz 1.35s ease-in-out infinite;
animation-delay:var(--nb-gecik,0s) }
@media (prefers-reduced-motion:reduce){
.nb-dalga,.ik-bayrak.olayli{ animation:none }
}
/* ——— İL LİSTESİ DÜĞMESİ ———
Şeridin hemen üstünde, ortada. *Yan köşeye konsaydı* oradaki
galaksi ve nabız düğmeleriyle üçüncü bir köşe yığını olurdu;
ortası hem iki başparmağa da yakın hem de boş. */
.nb-liste-dugme{
position:fixed; left:50%; transform:translateX(-50%);
bottom:calc(var(--serit-h) + env(safe-area-inset-bottom,0px) + 14px);
z-index:9660;
display:none; align-items:center; gap:8px;
min-height:44px; padding:0 16px;
border-radius:10px;
border:1px solid rgba(245,179,60,.5);
background:rgba(10,20,34,.86);
-webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
color:#F5B33C;
font-family:"IBM Plex Sans Condensed",system-ui,sans-serif;
font-size:14.5px; font-weight:600; letter-spacing:.02em;
cursor:pointer;
}
/* Yalnız nabız açıkken görünür — başka ekranda anlamı yok. */
body.nabiz-acik .nb-liste-dugme{ display:inline-flex }
.nb-liste-dugme svg{ width:18px; height:18px }
.nb-liste-dugme:hover{ border-color:#F5B33C; background:rgba(14,28,46,.94) }
/* ——— LİSTE ———
Alttan gelen tam genişlikte bir sayfa — telefondaki "Akışlar"
sayfasıyla aynı düzen, aynı sebeple: 81 giriş bir açılır menüye
sığmaz. */
.nb-liste{
position:fixed; left:0; right:0; bottom:0;
max-height:74vh;
z-index:9700;
background:rgba(8,15,26,.97);
-webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
border-top:1px solid var(--cizgi,rgba(126,147,172,.22));
border-radius:18px 18px 0 0;
display:flex; flex-direction:column;
transform:translateY(100%);
transition:transform .28s cubic-bezier(.4,0,.2,1);
padding-bottom:env(safe-area-inset-bottom,0px);
}
.nb-liste.acik{ transform:none }
.nb-liste-bas{
display:flex; align-items:center; justify-content:space-between;
padding:14px 18px 10px;
border-bottom:1px solid rgba(126,147,172,.14);
}
.nb-liste-bas h2{
margin:0;
font-family:"IBM Plex Sans Condensed",system-ui,sans-serif;
font-size:15px; font-weight:700; letter-spacing:.07em;
text-transform:uppercase; color:#7E93AC;
}
.nb-liste-kapat{
width:40px; height:40px; border-radius:50%;
display:inline-flex; align-items:center; justify-content:center;
background:transparent; border:1px solid rgba(126,147,172,.28);
color:#B9C9DC; cursor:pointer;
}
.nb-liste-kapat svg{ width:18px; height:18px }
.nb-liste-ic{
overflow-y:auto; -webkit-overflow-scrolling:touch;
padding:12px 14px 18px;
display:grid; gap:8px;
grid-template-columns:repeat(auto-fill,minmax(190px,1fr));
}
.nb-il-sat{
display:flex; align-items:center; gap:10px;
min-height:46px; padding:0 12px;
border-radius:10px;
background:rgba(20,31,49,.7);
border:1px solid rgba(126,147,172,.14);
color:#EEF4FF; text-align:left;
font-family:inherit; font-size:15px;
cursor:pointer;
}
.nb-il-sat:hover{ border-color:rgba(245,179,60,.5) }
.nb-il-sat:disabled{ opacity:.42; cursor:default }
/* Toprak rengi: kürede hangi renkteyse listede de o. *Ayrı renk
verilseydi* okur listedeki ili kürede tanıyamazdı. */
.nb-il-nokta{
width:12px; height:12px; border-radius:3px; flex:none;
background:var(--ik-renk,#B79A63);
border:1px solid rgba(46,30,14,.5);
}
.nb-il-ad{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.nb-il-say{
font-family:"IBM Plex Mono",ui-monospace,monospace;
font-variant-numeric:tabular-nums;
font-size:13px; color:#F5B33C;
}
.nb-il-olay{
font-family:"IBM Plex Sans Condensed",system-ui,sans-serif;
font-size:11.5px; font-weight:600; letter-spacing:.03em;
color:var(--nb-renk,#E0452F);
text-transform:uppercase;
}
.gezegen{
position:absolute; left:50%; top:50%;
width:var(--gz-en,120px);
-webkit-appearance:none; appearance:none; background:transparent; border:0;
padding:0; cursor:pointer; color:inherit;
display:flex; flex-direction:column; align-items:center; gap:6px;
will-change:transform,opacity;
/* konum her karede yazılıyor; geçiş yalnız seçildiğinde çalışsın */
}
.gezegen.secildi{ transition:transform .3s cubic-bezier(.4,0,.2,1), opacity .3s ease }
/* ——— ODAK HALKASI GEZEGENİN BİÇİMİNİ ALIR ———
`.gezegen` dikdörtgen bir kutu (içinde küre + adı), `outline` da o
kutuyu çiziyordu: **yuvarlak gezegenin etrafında kare bir çerçeve.**
Kemal'in tespiti: "dokunduğumda etraflarında kare bir şey oluşuyor."
Halka artık kutuya değil KÜRENİN KENDİSİNE çiziliyor ve o yuvarlak.
`outline` yerine `box-shadow` çünkü outline biçimi izlemez. */
.gezegen:focus-visible{ outline:none }
.gezegen:focus-visible .gz-kure{
box-shadow:0 0 0 2px var(--amber), 0 0 14px rgba(245,179,60,.45);
border-radius:50%;
}
.gezegen.secildi{ transform:scale(3.2); opacity:0 }
.galaksi.kapaniyor .gezegen:not(.secildi){ opacity:0 }
/* Daire çerçeve YOK. Küre hissi kartların derinliğinden gelir —
kenarı çizilmiş bir madalyon değil, dönen bir haber kümesi.
Arkadaki tek şey kenarı belli olmayan yumuşak bir hâle. */
.gz-kure{
position:relative; width:100%; aspect-ratio:1;
}
/* Kürenin ETRAFINDA hâle yok — madalyon gibi duruyordu.
Ama MERKEZİNDEN hafif bir ışık sızıyor: dar, yumuşak, kürenin içinde.
z sırası ortada (50) olduğu için öndeki pullar ışığın önünü kapatıyor,
arkadakiler aydınlanıyor — ışık gerçekten içeriden geliyor gibi. */
.gz-kure::before{
content:""; position:absolute; left:50%; top:50%; z-index:50;
width:52%; height:52%; transform:translate(-50%,-50%);
border-radius:50%;
background:radial-gradient(circle,var(--gz-renk,#7FB2FF) 0%,transparent 68%);
/* Işık şiddeti UZAKLIKLA artar (--isik): yakındaki gezegen saf haber
kümesi, uzaktaki bir ışık noktası gibi görünür. Nefes yalnız ölçekte;
saydamlık her karede JavaScript'ten geliyor. */
/* Kor geldikten sonra bu ışık gereksiz kaldı: çekirdek aydınlığı
artık korun kendi renk geçişinden geliyor. İkisi üst üste binince
gezegen puslanıyordu. */
display:none;
opacity:var(--isik,.20); filter:blur(11px);
pointer-events:none;
}
@keyframes cekirdek{
0%,100%{ transform:translate(-50%,-50%) scale(.90) }
50% { transform:translate(-50%,-50%) scale(1.10) }
}
@media (prefers-reduced-motion:reduce){
.gz-kure::before{ animation:none }
}
/* DIŞ IŞIK: kürenin çevresine taşan, kenarı olmayan bir parıltı.
Çizgi ya da çerçeve DEĞİL — hiçbir yerde keskin sınır yok.
ÖLÇÜLDÜ: pullar kutunun yarıçapının %77'sinde bitiyor.
radial-gradient(circle) köşeye kadar yayıldığı için bir durak yüzdesi
kutu yarıçapının 1.64 katına düşer; yani halkayı pulların kenarına
oturtan durak %47'dir (0.47 x 1.64 = 0.77). Bir zamanlar %76'daydı,
yani kürenin 1.25 katı uzağında — arada boşluk görünüyordu. Pulların ARKASINDA
(z:0) durur ki küre onun üstünde katı görünsün. Rengi kategoriden
gelir, şiddeti --disIsik'ten.
*Bir kez keskin daire çizgisi denendi, gezegen madalyona benzedi.
Bu o değil: burada çizilmiş bir kenar yok, yalnızca sönen ışık.* */
.gz-kure::after{
content:""; position:absolute; left:-6%; top:-6%; z-index:0;
width:112%; height:112%; border-radius:50%; pointer-events:none;
/* `closest-side` ŞART: varsayılan yayılım köşeye gider ve durak
yüzdeleri 1.64 katına düşer — hangi durağın nereye geldiğini kimse
hesaplayamaz. closest-side ile %100 = kutunun yarıçapı, yüzdeler
doğrudan okunur. Kutu %120 olduğu için pulların bittiği yer %64 (0.77/1.20). */
/* Eski tarayıcı color-mix bilmezse düz mavi olan bu satır kalır. */
/* İNCE ÇİZGİ — hâle değil.
İki kez daraltıldı ve iki kez hâlâ "hâle" olarak okundu; sorun
bandın genişliğiydi. Renk %71,2 ile %73,2 arasında, yani kutu
yarıçapının yalnız %2'si kadar bir şerit. Bulanıklık 0,6px —
kenarın tırtıklanmasını engelleyecek kadar, yaymayacak kadar.
Araya konan koyu bant da kaldırıldı: o da kalınlık ekliyordu.
*Belgede "keskin daire çizgisi denendi, madalyona benzedi" diye
bir not vardı.* O deneme kalın ve tam donuk bir çizgiydi; bu ise
saydamlığı uzaklıkla değişen ince bir kenar. Kemal ince çizgi
istedi, karar onun. */
background:radial-gradient(circle closest-side,
transparent 71.2%,
rgba(127,178,255,.95) 72.2%,
transparent 73.2%);
background:radial-gradient(circle closest-side,
transparent 71.2%,
color-mix(in srgb, var(--gz-renk,#7FB2FF) 96%, transparent) 72.2%,
transparent 73.2%);
/* Korun kendi kararan kenarı sınırı zaten çiziyor; üstüne bir de
çizgi koyunca gezegen madalyona dönüyordu. Çizgi kalktı, geriye
yalnız yakındaki gezegenin çevresine sızan hafif ışık kaldı. */
background:radial-gradient(circle closest-side,
transparent 62%,
color-mix(in srgb, var(--gz-renk,#7FB2FF) 26%, transparent) 84%,
transparent 100%);
opacity:var(--disIsik,.22); filter:blur(6px);
}
/* ——— KOR: gezegenin gövdesi ———
*Eskiden gövde 78 haber fotoğrafından örülüyordu.* Fikir güzeldi ama
ÖLÇÜLDÜ ve tutmuyordu: 20 gezegen x 78 pul = 1560 fotoğraf, her biri
ekranda ortalama 5 PİKSEL, dosyalar ise 887 piksel — 177 kat fazla,
alan olarak 31 bin kat. Telefon galaksiyi açmak için 1,6 milyar piksel
çözüyordu. Okur o 5 pikselde hiçbir şey göremiyordu; yani bedeli
ödenen şey görünmüyordu bile.
Yerine kor geldi: ortası kategorinin renginde kızıl, kenara doğru
koyulaşan, tam kenarda siyaha yaklaşan bir küre. Kenarın kararması
bir daireyi TOP gibi gösteren şeydir — eski hâlde bu yoktu, o yüzden
düz bir yamaya benziyordu. Maliyeti: 1560 fotoğraf yerine bir renk
geçişi. */
.gz-kor{
position:absolute; inset:0; border-radius:50%; z-index:20;
pointer-events:none;
background:
/* Işık kaynağı sol üstte. *Ortada olduğunda küre düz bir parıltı
gibi duruyordu;* gerçek bir topta parlak nokta hiçbir zaman tam
ortada olmaz, o yüzden gölge tarafı oluşmuyordu. */
radial-gradient(circle at 38% 33%,
color-mix(in srgb, var(--gz-renk,#7FB2FF) 92%, #FFFFFF) 0%,
color-mix(in srgb, var(--gz-renk,#7FB2FF) 78%, #000000) 26%,
color-mix(in srgb, var(--gz-renk,#7FB2FF) 34%, #000000) 58%,
color-mix(in srgb, var(--gz-renk,#7FB2FF) 10%, #000000) 82%,
#03060B 100%);
/* Kor "çıkmak için zorluyor" hissi — YALNIZ saydamlıkta.
Renk geçişini oynatmak her karede yeniden boyama demek; bu bedava. */
animation:korNefes 7.5s ease-in-out infinite;
animation-delay:var(--gz-gecik,0s);
}
@keyframes korNefes{ 0%,100%{opacity:.92} 50%{opacity:1} }
@media (prefers-reduced-motion:reduce){ .gz-kor{animation:none} }
/* ——— DÖNÜYOR HİSSİ ———
Gezegen gerçekten dönmüyor: döndürmek yüzeydeki her şeyi her karede
yeniden hesaplamak demek ve galaksinin ağır olmasının sebebi buydu.
Onun yerine yüzeyde çok sönük bir doku YATAY KAYIYOR — göz bunu
dönen bir yüzey olarak okuyor.
Bedeli sıfıra yakın: tek bir `transform` animasyonu, tarayıcı bunu
ayrı bir katmanda yürütüyor, hiçbir karede yeniden boyama yok.
*Renk ya da konum oynatmak (background-position gibi) her karede
yeniden boyama demekti; kaçınılan şey o.*
Işık kayan dokuyla BİRLİKTE GİTMİYOR — kor sabit duruyor. Gerçekte
de öyle: güneş yerinde durur, dönen yüzeydir. Parlaklığın sabit,
dokunun akıyor olması dönme hissini asıl kuran şey. */
.gz-doku{
position:absolute; inset:0; border-radius:50%; overflow:hidden;
z-index:22; pointer-events:none;
/* Kenarda doku silinir: küre orada bize sırtını dönüyor, orada bir şey
okunmaz. Maskesiz bırakılınca çizgiler kenarda kesiliyor ve gezegen
yuvarlak değil silindir gibi duruyordu. */
-webkit-mask-image:radial-gradient(circle at 50% 50%, #000 40%, rgba(0,0,0,.35) 72%, transparent 92%);
mask-image:radial-gradient(circle at 50% 50%, #000 40%, rgba(0,0,0,.35) 72%, transparent 92%);
}
.gz-doku i{
position:absolute; top:-8%; left:0; width:200%; height:116%;
/* Sönük ve düzensiz aralıklı: eşit aralıklı çizgi perde gibi duruyor,
düzensiz aralık kaynayan bir yüzey gibi. */
background:repeating-linear-gradient(96deg,
rgba(255,255,255,0) 0%,
rgba(255,255,255,.055) 2.4%,
rgba(255,255,255,0) 5.5%,
rgba(0,0,0,.10) 8.5%,
rgba(255,255,255,0) 12%,
rgba(255,255,255,.03) 15%,
rgba(0,0,0,.06) 19%,
rgba(255,255,255,0) 25%);
filter:blur(1.5px);
animation:dokuKay 34s linear infinite;
animation-delay:var(--gz-gecik,0s);
}
/* Yarısı kadar kayıp başa dönüyor: desen %50'de kendini tekrarladığı
için sıçrama görünmüyor. */
@keyframes dokuKay{ from{transform:translate3d(0,0,0)} to{transform:translate3d(-50%,0,0)} }
@media (prefers-reduced-motion:reduce){ .gz-doku{display:none} }
/* Kategori simgesi kürenin yüzeyine KAZINIR: altta koyu gölge, üstte
ince ışık. Şeritteki ve kategori sayfasındaki simgenin aynısı —
okur aynı işareti üç yerde görüyor. */
/* ——— SİMGE VE AD TEK ÖBEK, KÜRENİN ORTASINDA ———
*Ad bir ara kürenin dışında, gezegenin ayrı bir çocuğuydu* ve ters
ölçekle büyütülüyordu: uzaktaki gezegenin adı okunur kalsın diye.
Sonucu şuydu — minicik bir kürenin üstünde kocaman bir yazı; ad
gezegene ait görünmüyor, önünde duruyordu.
Kemal'in kararı: simge ile ad **birlikte, ortalanmış ve gezegene
yapışık**. Bu yüzden ikisi de artık kürenin İÇİNDE, tek bir dikey
öbekte; gezegen küçüldükçe ikisi birden küçülüyor, kararma süzgeci
ikisine de işliyor. *Yani uzaktaki gezegenin adı da kararıyor —
bedeli bu, ve kasıtlı:* uzaktaki gezegen bir ışık noktası, üstünde
okunacak bir şey yok. Yakınlaştıkça adı da gövdesiyle beraber
ortaya çıkıyor. */
.gz-yuz{
position:absolute; left:50%; top:50%; z-index:30;
transform:translate(-50%,-50%);
width:74%;
display:flex; flex-direction:column; align-items:center;
/* Simge ile ad arası gezegen boyuna oranlı; sabit boşluk küçük
kürede ikisini birbirine yapıştırıyordu. */
gap:calc(var(--gz-en,120px) * .035);
pointer-events:none;
}
.gz-simge{
width:44%; height:auto; aspect-ratio:1;
stroke:rgba(255,255,255,.62); fill:none; stroke-width:1.5;
stroke-linecap:round; stroke-linejoin:round;
filter:drop-shadow(0 1px 0 rgba(0,0,0,.55)) drop-shadow(0 -1px 0 rgba(255,255,255,.10));
}
/* Kazıma etkisi: parlak yazı + üstte ince ışık çizgisi + altta koyu gölge.
Böylece yazı fotoğrafın üstünde yüzmüyor, yüzeye oyulmuş gibi duruyor.
Pulların z sırası 0-100; yazı 200'de, hepsinin üstünde. */
.gz-ad{
/* Konum yok: öbeğin içinde, simgenin hemen altında akıyor. */
width:100%;
text-align:center;
font-family:"IBM Plex Sans Condensed","IBM Plex Sans",system-ui,sans-serif;
font-weight:700; line-height:1.08;
/* Ad gezegenin boyuna oranlı: sabit punto küçük kürede dışına taşıyordu. */
font-size:clamp(10px, calc(var(--gz-en,120px) / 13.5), 22px);
letter-spacing:.05em; text-transform:uppercase;
}
/* ——— AD GEZEGENE KAZINIR, PLAKAYA YAZILMAZ ———
*Ad bir ara koyu bir künye plakasının üstündeydi.* Gerekçesi
doğruydu: o zaman gezegenin gövdesi haber fotoğraflarından
örülüyordu ve çıplak yazı fotoğrafın üstünde okunmuyordu.
Gövde artık kor — düzgün, sakin bir renk geçişi. Plakanın koruduğu
şey ortadan kalktı, geriye yalnız kendisi kaldı: yirmi gezegenin
üstünde yirmi koyu dikdörtgen, kürelerin biçimini bölüyordu.
Kazıma üç parçadan oluşur ve üçü birden gerekir:
- altta koyu gölge → yazı yüzeye gömülmüş gibi durur,
- üstte ince ışık çizgisi → oyuğun aydınlık kenarı,
- yazının kendisi gövdeden bir ton açık, beyaz değil.
*Yalnız gölge koyarsak* yazı yüzeyin üstünde yüzer; ışık çizgisi
onu içeri oturtan şeydir. */
.gz-ad-i{
display:inline-block;
padding:0 .2em;
color:rgba(255,255,255,.92);
text-shadow:
/* oyuğun karanlık dibi */
0 1.5px 1px rgba(0,0,0,.75),
0 1px 3px rgba(0,0,0,.55),
/* oyuğun aydınlık üst kenarı */
0 -1px 0 rgba(255,255,255,.22),
/* Yumuşak bir dış hâle: kazımanın kenarını gövdeden ayırıyor. */
0 0 4px rgba(0,0,0,.5);
}
.gezegen.etkin .gz-ad-i{ color:#FFE7B4 }
@media (prefers-reduced-motion:reduce){
.sahne,.galaksi,.gezegen{ transition-duration:.01ms }
}
/* ——— taşan kategoriler (hamburger menüsü) ——— */
.ortu{
position:fixed;
inset:0;
z-index:9300;
background:rgba(4,8,14,.55);
border:0;
padding:0;
}
.ortu[hidden]{display:none}
.tasma{
position:fixed;
z-index:9660; /* açıkken sağdaki yüzen düğmelerin (9650) üstünde */
/* Menü şeridin sağ ucuna hizalı ve ekranın içinde kalır: geniş ekranda
sağdaki yüzen düğmelerin altına girip kesiliyordu. */
right:calc(max(12px, (100vw - var(--serit-en)) / 2 + 12px));
bottom:calc(var(--serit-h) + env(safe-area-inset-bottom,0px) + 10px);
width:min(300px,calc(100vw - 24px));
max-height:min(78vh,760px); /* 17 Eylül 2026: 420 px kategoriler + sayfaları sığdırmıyor, künye kaydırmanın altında kalıyordu */
overflow-y:auto;
display:grid;
gap:6px;
padding:8px;
background:var(--zemin-2);
border:1px solid var(--cizgi);
border-radius:16px;
box-shadow:0 24px 64px rgba(0,0,0,.65);
transform-origin:100% 100%;
animation:tasmaAc .18s cubic-bezier(.22,.9,.3,1);
}
.tasma[hidden]{display:none}
@keyframes tasmaAc{from{opacity:0;transform:translateY(8px) scale(.97)}to{opacity:1;transform:none}}
.tasma .baslik{
font-family:"IBM Plex Mono",monospace;
font-size:10px;
letter-spacing:.14em;
text-transform:uppercase;
color:var(--murekkep-sonuk);
padding:6px 10px 2px;
}
.tasma .kat-dugme{
width:100%;
justify-content:flex-start;
border-color:transparent;
background:transparent;
font-size:14px;
}
.tasma .kat-dugme .sayi{margin-left:auto}
.tasma .kat-dugme:hover{background:rgba(243,246,250,.06);border-color:transparent}
.tasma .kat-dugme[aria-pressed="true"]{background:var(--amber);border-color:var(--amber)}
/* ——— KURUMSAL SAYFALAR LİSTENİN SONUNDA ———
Künye, hakkımızda, iletişim. **Kategori değiller:** haber
taşımıyorlar, sıraları haber sayısına göre değişmiyor, sayıları yok.
Bu yüzden aynı listede ama ayrı bir öbekte — ince bir ayraçtan
sonra, sönük ve simgesiz. *Aralarına karışsalardı okur "Künye"yi
boş bir kategori sanırdı.* */
.tasma .sayfa-ayrac{
grid-column:1 / -1;
height:1px;
background:var(--cizgi);
margin:8px 8px 4px;
}
.tasma-sayfa{
display:flex;
align-items:center;
min-height:44px;
padding:0 12px;
border-radius:10px;
color:var(--murekkep-sonuk);
text-decoration:none;
font-size:13.5px;
}
.tasma-sayfa:hover,.tasma-sayfa:focus-visible{
background:rgba(243,246,250,.06);
color:var(--murekkep);
}
/* ——— küçük ekran ——— */
@media (max-width:620px){
:root{--serit-h:58px}
header{padding:15px 16px}
.marka{font-size:17px}
.rozet{font-size:9px}
.ipucu{bottom:calc(var(--serit-h) + 12px);font-size:9.5px}
:root{--kart-en:148px}
.panel{padding:16px 16px 20px}
.panel-ic{grid-template-columns:96px 1fr;gap:12px}
.panel .kare{width:96px}
.serit-ic{padding:0 10px;gap:8px}
/* Dar ekranda şeridin iç dolgusu 10px; düğme de o çizgiye insin. */
.galaksi-dugme{right:10px}
.serit-liste{gap:6px}
.kat-dugme{padding:0 12px;font-size:13px}
/* ——— ALT KULLANIM ALANI: TEK ELLE ———
Telefonu tek elle tutan birinin başparmağı ekranın alt üçte
birine rahat, üst köşelerine hiç yetişmiyor. Bu yüzden bütün
işlevler en alt sıraya toplandı ve ÜÇE indirildi:
[ Akış ▾ ] [ İlerle 24 ] [ Galaksi ]
sol slot orta · birincil sağ slot
Orta slot en kolay yer olduğu için okurun en çok yaptığı işi
taşıyor: ilerlemek. Yanlardaki iki slot sağ ve sol elini
kullanana eşit uzaklıkta — biri ötekinden avantajlı değil.
*Kategori şeridi dar ekranda kalkıyor:* ölçüldü, 31 kategoriden
yalnız 3'ü sığıyordu ve ilk düğme (Anasayfa) sağ el için en zor
köşedeydi. Yerine gelen sayfa 31'ini de gösteriyor. */
.serit-liste{display:none}
.serit-ic{justify-content:space-between}
/* ——— YAZI YOK, SİMGE VAR ———
*Bir ara üç yuva da adıyla duruyordu* — "simge tek başına
keşfedilmiyor" diye. Kemal bunu şöyle kapattı: "galaksi yazarsak
onu da bilmeyecek zaten, galaksinin kategoriler olduğunu nereden
bilsin." Yazı da öğretmiyordu; iki durumda da okur bir kez basıp
öğreniyor. O hâlde ekranı yazıyla doldurmanın karşılığı yok.
Ad `title` ve `aria-label` içinde duruyor. */
/* Sol yuvada artık İKİ şey var: okurun kendisi ve akış düğmesi.
`space-between` üç öğeyi eşit dağıtınca akış düğmesi ortaya
kayıp İlerle'nin altına giriyordu; `margin-right` onu avatarın
hemen yanına, sola çekiyor. Sağ uçtaki anasayfa düğmesi
yerinde kalıyor, orta yuva İlerle'nin. */
.serit-daha{
flex:0 0 auto; min-width:0;
width:44px; padding:0; gap:0; justify-content:center;
}
/* ——— 13 EYLÜL 2026: AKIŞ DÜĞMESİ SAĞA, ANASAYFANIN YANINA ———
Kemal: *"hamburger menüyü sağa al anasayfa butonu yanına…
kullanıcı fotoğrafı yanına da ayarları al."* Sol grup artık
"ben" (fotoğraf + ayarlar), sağ grup "nereye" (akışlar +
anasayfa). `margin-right:auto` dişliye geçti: iki grubu uçlara
itiyor, orta yuva İlerle'nin. 375 pikselde ölçü: sol grup 10–106,
sağ grup 269–365, İlerle 144–231 — çakışma yok. */
.serit-disli{ margin-right:auto }
/* ——— TELEFONDA AKIŞIN ADI YAZILMIYOR ———
Kemal: *"okur küresi yazısını kaldır. küre tabiri bizim için
riskli… okur küresi ana akışa götüren butonsa bir kare içine
küçük dört kare koy, o kadar."*
*Ad bir ara bu düğmede duruyordu ve gerekçesi doğruydu:* "sol
düğme 'Diğer' değil akışın kendisi." İki şey birden değiştirdi:
1. ADIN KENDİSİ RİSKLİ. "Okur küresi" yazısı ekrandan kalktı;
akışı açan düğmenin İŞARETİ onun yerine geçti — bir
çerçevenin içinde dört küçük kart (`simgeler.js` → okur).
2. YER ZATEN YOKTU. Şeridin sol ucuna okurun fotoğrafı girince
375 pikselde ölçüldü: kenar 10 + avatar 44 + boşluk 8, yani
düğme 62'den başlıyor; İlerle 144'te (ekranın tam ortası).
Kalan 82px, ad ise 120px istiyor — *ad bırakılınca* düğmenin
sağ kenarı 181 çıktı, İlerle'in altına giriyordu.
Orta yuvayı daraltmak seçenek değildi: *"orta slot en kolay
yer, oraya okurun en çok yaptığı iş kondu"* ve *"yan yuvalar
sağ ve sol ele eşit uzaklıkta"* ölçülmüş kararlar.
Kürede zaten geçerli olan kuralın aynısı: arayüzde yazı yok,
simge var. Ad `title` ve `aria-label` içinde duruyor
("Seçili: …"), düğmeye basınca açılan sayfada da seçili akış
işaretli. *Masaüstü değişmedi* — orada ad yerinde. */
.serit-daha .daha-yazi{display:none}
/* Seçili akışın adını taşıdığı için sönük değil, okunur durmalı. */
.serit-daha{color:var(--murekkep)}
/* İlerle şeridin ORTA yuvasına oturur — ayrı bir kat değil,
aynı sıranın parçası. Yüksekliği şeritle aynı hizada. */
.devam-sarma{
width:auto;
bottom:calc(env(safe-area-inset-bottom,0px) + (var(--serit-h) - 44px) / 2);
/* Şeridin ORTA yuvası — şeridin (9600) üstünde durmalı.
*Şerit galaksinin üstüne çıkarılınca bu düğme altında kalmıştı.* */
z-index:9650;
}
.devam{padding:10px 18px}
/* Başa dön İlerle'nin üstünde ayrı bir hap olarak durur: seyrek
kullanılan bir iş, orta sırada yer kaplamamalı. */
.devam-sarma .basa{
position:absolute; left:50%; bottom:calc(100% + 9px);
transform:translateX(-50%);
white-space:nowrap; padding:7px 15px; font-size:12.5px;
}
.devam-sarma.tek{width:auto}
.ipucu{bottom:calc(var(--serit-h) + 58px)}
/* ——— KATEGORİ SAYFASI ———
Küçük bir açılır liste değil, alttan gelen tam genişlikte bir
sayfa. Başparmakla taranabilsin diye iki sütun, büyük hedefler
ve haber sayıları görünür. */
.tasma{
left:0; right:0; width:auto;
bottom:calc(var(--serit-h) + env(safe-area-inset-bottom,0px));
max-height:min(64vh,460px);
grid-template-columns:1fr 1fr;
gap:8px; padding:14px 12px 18px;
border-radius:20px 20px 0 0;
border-left:0; border-right:0; border-bottom:0;
transform-origin:50% 100%;
}
.tasma .baslik{grid-column:1 / -1}
/* Sayfadaki yazı ŞERİTTEKİNDEN büyük: şerit bir çubuk, burası bir
sayfa — okur listeyi tarıyor ve hedefe basıyor. */
.tasma .kat-dugme{
min-height:54px; font-size:15.5px; font-weight:600;
padding:0 13px; gap:10px;
}
.tasma .kat-dugme .simge{width:21px;height:21px}
.tasma .kat-dugme .sayi{display:inline-block;font-size:11.5px}
.tasma-sayfa{min-height:50px;font-size:14.5px;padding:0 13px}
.tasma .sayfa-ayrac{margin:10px 4px 6px}
}
@media (max-width:380px){
.kat-dugme{padding:0 11px}
.serit-daha{max-width:34vw;padding:0 11px}
.devam{padding:10px 14px}
}
/* ——— ODAK SAHNESİ ———
Kemal: *"kartlar dönerken bir karta tıklayınca ekranın ortasına gelip
büyüsün. içindeki video ise gerçek video oynasın… ses dışarı
verilsin. bir daha tıklarsa habere girsin."*
Tam ekran bir katman: arkadaki küre DURUYOR (ciz() erken dönüyor),
beş kesit oynatıcı bırakılıyor, tazeleme istek atmıyor. Şeridin de
üstünde (9680) — sahne açıkken akış değiştirmek kartı yarıda
bırakırdı; kapatmanın yolu örtü, kare düğme ya da Esc. */
.odak-sahne{
position:fixed; inset:0; z-index:9680;
opacity:0; transition:opacity .22s ease;
}
.odak-sahne.acik{ opacity:1 }
.odak-ortu{
position:absolute; inset:0; border:0; padding:0; margin:0;
background:rgba(4,8,14,.80); cursor:zoom-out;
}
/* Kart kürendekinin KOPYASI: sınıfları aynen taşıyor, yani gönderi,
videolu, son dakika — hepsi aynı görünüyor. Yalnız yeri ve boyu
burada; `transform` FLIP canlandırması için, ölçüler en/boy
değişince (yatay video) yumuşak geçsin diye. */
.kart.odak-kart{
position:fixed; margin:0;
aspect-ratio:auto;
transform-origin:0 0;
z-index:1;
cursor:pointer;
transition:transform .38s cubic-bezier(.2,.8,.2,1),
left .32s ease, top .32s ease, width .32s ease, height .32s ease;
}
.kart.odak-kart .ana{ max-height:none }
/* ——— VİDEOLU KARTTA YAZI KARTIN ALTINDA ———
Kemal: *"video ekranda büyüdüğünde başlığı kartın altına al. hatta
haberin spotundan sığan bir bölüm varsa o da eklensin.. metin
sınırının bittiği yerde 'tamamını okumak için tıklayın' yazsın."*
Ölçülmüş sebep: telefonda 16:9 video 190 piksel boyunda ve üstündeki
üç satırlık manşet onun yarısını kaplıyordu. Videolu kartta yazı
kartın İÇİNDEN çıkıyor, altına iniyor; fotoğraflı kart kürendeki
gibi kalıyor — orada yazı fotoğrafın üstünde durmak için çizildi. */
.odak-sahne.altyazili .kart.odak-kart .yazi,
.odak-sahne.altyazili .kart.odak-kart .perde{ display:none }
.odak-altyazi{
position:fixed; z-index:1; margin:0; padding:2px 2px 0;
display:flex; flex-direction:column; gap:6px;
text-align:left; background:transparent; border:0;
color:var(--murekkep); cursor:pointer;
font-family:"IBM Plex Sans",system-ui,sans-serif;
opacity:0; transition:opacity .3s ease .18s;
}
.odak-sahne.acik .odak-altyazi{ opacity:1 }
.odak-altyazi:focus-visible{ outline:2px solid var(--amber); outline-offset:4px }
.oa-ust{
font-size:12.5px; line-height:1.3; letter-spacing:.04em;
color:rgba(243,246,250,.7); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.oa-ust:empty{ display:none }
/* Başlık kartın kendi manşet dilinde: dar, kalın, büyük harf. */
.oa-baslik{
font-family:"IBM Plex Sans Condensed",sans-serif; font-weight:700;
text-transform:uppercase; letter-spacing:-.005em;
font-size:clamp(16px, 0.9vw + 11px, 21px); line-height:1.15; color:#fff;
max-height:calc(3 * 1.15em); overflow:hidden;
}
.oa-baslik:empty{ display:none }
/* Üç satır: spot + "tamamını okumak için tıklayın". Kesme ölçülerek
yapılıyor (`sigdir`); `line-clamp` belgede yasaklı — üçüncü satırı
yarıdan kesiyordu. */
.oa-spot{
font-size:14px; line-height:1.45; color:rgba(226,234,244,.82);
max-height:calc(3 * 1.45em); overflow:hidden;
}
/* Düello: kaynağın olayı nasıl gördüğü (basinca kuralı 5-7 cümle). */
.odak-sahne.duello-spot .oa-spot{ max-height:calc(9 * 1.45em) }
@media (max-width:620px){ .odak-sahne.duello-spot .oa-spot{ font-size:13px; max-height:calc(11 * 1.45em) } }
.oa-devam{ color:var(--amber); font-weight:600; white-space:nowrap }
/* ——— TELEFON YAN ÇEVRİLİNCE VİDEO TAM EKRAN ———
Kemal: *"kullanıcı telefonu yan çevirirse video tam ekran olsun,
başlık ve spot görünmesin."*
Tam ekran API'si (`requestFullscreen`) KULLANILMADI: tarayıcı onu
yalnız bir dokunuşla açıyor, telefonu çevirmek dokunuş sayılmıyor —
*API'ye bağlansaydı* çevirince hiçbir şey olmazdı. Sahne zaten tam
ekran bir katman; kart onu kaplıyor, yazı gizleniyor. Ölçüler JS'in
yazdığı satır içi değerlerin önüne geçmek için `!important`.
Eşik yükseklik 540: yatay telefon 360-430 piksel; yatay tablet
700'ün üstünde ve orada kart + yazı zaten sığıyor. */
@media (orientation:landscape) and (max-height:540px){
.odak-sahne.altyazili .odak-ortu{ background:#000 }
.odak-sahne.altyazili .kart.odak-kart{
left:0 !important; top:0 !important;
width:100vw !important; height:100vh !important; height:100dvh !important;
transform:none !important; border:0 !important; border-radius:0 !important;
box-shadow:none !important; background:#000 !important;
}
.odak-sahne.altyazili .kart.odak-kart video{ object-fit:contain }
.odak-sahne.altyazili .kart.odak-kart .gorsel img{ object-fit:contain }
.odak-sahne.altyazili .odak-altyazi{ display:none !important }
/* Fotoğraflı kartta yatay telefonda spota yer yok: kart ekranın
boyunu kullansın, başlık zaten kartın üstünde. */
.odak-sahne.spotlu .odak-altyazi{ display:none !important }
.odak-sahne.altyazili .odak-dugme.odak-tam{ display:grid }
}
/* ——— TAM EKRAN DÜĞMESİ ———
Kemal: *"telefonu döndürünce genişliyor; ama tam ekran olmuyor. üstte
sayfa adresi çıkıyor."* Yan çevirmek sahneyi ekrana yayıyor ama
adres çubuğunu kaldıramıyor: tarayıcı gerçek tam ekranı yalnız bir
DOKUNUŞLA açıyor, telefonu çevirmek dokunuş sayılmıyor. Bu yüzden
yan çevrilince bir düğme çıkıyor; basınca SAHNENİN TAMAMI tam ekrana
geçiyor (düğmeler de içinde kalsın diye kart değil sahne).
iPhone öğe tam ekranını desteklemiyor: orada videonun kendi tam
ekranı açılıyor. Dik tutulunca tam ekrandan kendiliğinden çıkılıyor. */
.odak-dugme.odak-tam{ display:none }
.odak-dugme .tam-cik{ display:none }
.odak-dugme.odak-tam.tamda .tam-gir{ display:none }
.odak-dugme.odak-tam.tamda .tam-cik{ display:inline }
.odak-sahne:fullscreen{ background:#000 }
/* Kürede video `prefers-reduced-motion` ve veri tasarrufunda hiç
oynamıyor; burada okur KENDİSİ tıkladı — oynatmak onun isteği. */
/* ——— SAHNEDE KESKİNLİK YOK, YALNIZ RENK ———
Kemal: *"ajans videolarının kalitesi mi düşük; yoksa bizden mi
kaynaklanıyor"* Ölçüldü: ajans videosu 512×288, ~600-750 kbit/sn;
sahne onu 1100 piksele büyütüyor. Kürede solgun durmasın diye konan
sert keskinlik (`--video-tabaka`) büyük görüntüde sıkıştırma
bloklarını ve kenar parlamalarını belirginleştiriyordu. Kürede
kalıyor, sahnede yalnız renk (`--video-renk`). */
.kart.odak-kart video{ display:block; filter:var(--video-renk, none) }
.kart.odak-kart.oynuyor .perde::before{ display:none }
/* Video gelince yazı perdesi hafifler: izlenen şey görüntü. */
.kart.odak-kart.oynuyor .perde{ opacity:.72; transition:opacity .4s ease }
.odak-dugmeler{
position:absolute; top:calc(env(safe-area-inset-top,0px) + 14px); right:14px;
display:flex; gap:8px; z-index:2;
}
.odak-dugme{
width:44px; height:44px; display:grid; place-items:center;
border:1px solid rgba(150,180,225,.22); border-radius:12px;
background:rgba(9,15,26,.82); color:var(--metin);
cursor:pointer; padding:0;
}
.odak-dugme:hover{ border-color:var(--amber) }
.odak-dugme:focus-visible{ outline:2px solid var(--amber); outline-offset:2px }
.odak-dugme svg{ width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round }
.odak-dugme .ses-kapali{ display:none }
.odak-dugme.sessiz .ses-acik{ display:none }
.odak-dugme.sessiz .ses-kapali{ display:inline }
@media (prefers-reduced-motion:reduce){
.odak-sahne, .kart.odak-kart{ transition:none }
}
/* ——— /ayarlar: hareketleri azalt, yazı boyu ——— */
body.hareket-az .odak-sahne, body.hareket-az .kart.odak-kart{ transition:none !important }
body.hareket-az .kart *, body.hareket-az .kart{ animation:none !important }
.odak-sahne.yazi-buyuk .oa-spot{ font-size:16px }
.odak-sahne.yazi-buyuk .oa-baslik{ font-size:clamp(18px, 1vw + 13px, 24px) }
.odak-sahne.yazi-kucuk .oa-spot{ font-size:12.5px }
.odak-sahne.yazi-kucuk .oa-baslik{ font-size:clamp(14px, .8vw + 10px, 18px) }
@media (prefers-reduced-motion:reduce){
.panel{transition:none}
.tasma{animation:none}
.kat-dugme,.serit-daha{transition:none}
}
/* 16 Eylül 2026 (Kemal): "logo büyüsün. mobilde sağa yaslansın." Yeni logonun
kenarında şeffaf pay var; aynı boyda yazısı küçük kalıyordu. Telefonda logo
sağda, arama ve hesap düğmeleri solda (order). */
.marka-im{height:5.4em}
/* 16 Eylül 2026 akşam (Kemal): "logoyu mobilde sola mümkün olduğunca yasla."
Sağa alma geri alındı. Logo dosyasının solunda şeffaf pay var (1774 px'lik
görselde 79 px = yüksekliğin %8,9'u); negatif pay onu yiyor, dosyaya dokunulmadı. */
@media (max-width:620px){
.marka-im{height:4.6em; margin-left:calc(-4.6em * 79 / 887)}
header{padding-left:6px}
}
/* Videolu haberde motorun şeffaf manşet katmanı (kure.js → katmanli).
Video (z 1) altta oynar, katman üstünde (z 3); tıklamayı yemez. */
.kart.katmanli .perde{ background:none }
.kart .manset-katman{
position:absolute; inset:0; z-index:3; pointer-events:none;
background-size:cover; background-position:center bottom; background-repeat:no-repeat;
}
/* Ortaya açılan videolu kart videonun oranına döner ve yazı kartın altına
iner; 3:4 katman orada kırpılırdı, gizleniyor. */
.odak-sahne.altyazili .kart.odak-kart .manset-katman{ display:none }
/* Pencereli katman: video yalnız motorun bıraktığı şeffaf pencerede.
Ortaya açılan kartta katman zaten gizli; video yine tam kartı kaplar. */
.kart.pencereli video{
inset:auto;
left:calc(var(--kp-x, 0) * 100%); top:calc(var(--kp-y, 0) * 100%);
width:calc(var(--kp-w, 1) * 100%); height:calc(var(--kp-h, 1) * 100%);
}
.odak-sahne .kart.pencereli video{ left:0; top:0; width:100%; height:100%; inset:0 }
/* ——— POSTER YAZISINI SİTE ÇİZER (17 Eylül 2026) ———
Motorun kuralları: alt ~%45 zemin renginde koyu geçiş, yazı altta ortalı,
vurgu iri (küçüğün ~2 katı) BÜYÜK HARF kalın, küçük satır normal yazım
ince ve okunur; ikisi beyaz, hafif gölgeli. Ölçüler em (kartla ölçeklenir). */
.kart.poster-yazili .perde{
background:linear-gradient(to top,
color-mix(in srgb, var(--pz-zemin,#0d1626) 96%, transparent) 0%,
color-mix(in srgb, var(--pz-zemin,#0d1626) 80%, transparent) 25%,
color-mix(in srgb, var(--pz-zemin,#0d1626) 30%, transparent) 45%,
transparent 58%);
}
.kart.poster-yazili .pz-yazi{
position:absolute; left:0; right:0; bottom:0; z-index:3;
display:flex; flex-direction:column; align-items:center; gap:.3em;
padding:0 .9em 1.25em;
text-align:center; color:#fff;
text-shadow:0 .08em .3em rgba(0,0,0,.55);
}
.kart.poster-yazili .pz-vurgu,
.kart.poster-yazili .pz-kucuk{
display:block; width:100%;
overflow-wrap:normal; word-break:keep-all; hyphens:none; white-space:normal;
}
.kart.poster-yazili .pz-vurgu{
font-family:var(--poster-vurgu-font,"Archivo Black"),"IBM Plex Sans Condensed",sans-serif;
font-weight:var(--poster-vurgu-agirlik,400);
font-size:2.5em; line-height:1.02; letter-spacing:-.025em; /* Kemal: "harflerin arasını biraz daha yaklaştır" */
}
.kart.poster-yazili .pz-kucuk{
font-family:var(--poster-kucuk-font,"Barlow Condensed"),"IBM Plex Sans Condensed",sans-serif;
font-weight:var(--poster-kucuk-agirlik,500);
/* İki satıra geçince aradaki boşluk fazla duruyordu (Kemal): satır
yüksekliği 1,15 → 1,04. Küçük manşet cümle düzeninde yazıldığı için
(ğ, y, p) tamamen kapatılamaz; 1,04 alt uzantıyı kırpmayan sınır. */
font-size:1.45em; line-height:1.04;
}
.kart.poster-yazili .pz-temsili{
position:absolute; right:.7em; bottom:.45em; z-index:4;
font-size:.72em; color:rgba(255,255,255,.8);
}
.kart.poster-yazili .pz-satir{ display:block; white-space:nowrap }
/* ——— BÜYÜK MANŞET DÜZ SARI, GÖLGE METİN GÖLGESİ (18 Eylül 2026) ———
Kemal, ortaya açılmış kartın ekran görüntüsüyle: *"yazıdaki çözünürlüğün
kötülüğünü anlayabiliyor musun."* Canlıdan ölçüldü; suçlu yazı tipi ya da
fotoğraf değil, manşete binen ÜÇ efektti:
1. **Degrade + "background-clip:text".** Harfin içi degradeyle dolunca yazı
metin olmaktan çıkıp maskeye dönüyor ve tarayıcı **alt piksel
yumuşatmayı kapatıyor**. Üstelik geçişin alt ucu (#D99400) zemine
yaklaşıp harfin ALTINDA kontrastı düşürüyordu.
2. **Gölgenin "filter: drop-shadow" ile verilmesi.** Süzgeç uygulanan öğe
ayrı bir katmana taranıyor; bulanık ikinci gölge de kenarı eritiyor.
3. **"-webkit-font-smoothing:antialiased"** (aşağıda, odak kartında) —
netlik için konmuştu, harfleri inceltip soluklaştırıyordu.
Dört hâl aynı puntoda yan yana çizilip pikselleri 3 kat büyütülerek
karşılaştırıldı ("scratchpad/netlik.html"); Kemal düz sarı + süzgeçsiz
hâli seçti: *"3 numara da bozuk çıkacak uygula."*
**Bedeli ve Kemal'in bilerek verdiği taviz:** sarı→koyu sarı degrade
gitti, o onun kendi kararıydı. Renk geçişin ortası (#FFC61A) — üst uç
fazla açık, alt uç zemine yakındı.
*Gölge artık "text-shadow":* saydam dolgu kalktığı için harfin içinden
görünme sorunu da kalktı, yani süzgece gerek yok. Ölçüler "em" — kart
büyüyünce gölge de büyüsün (kartın 7. kuralı). */
.kart.poster-yazili .pz-vurgu,
.kart.poster-yazili .pz-vurgu .pz-satir{
background:none;
-webkit-background-clip:border-box; background-clip:border-box;
color:#FFC61A; -webkit-text-fill-color:#FFC61A;
text-shadow:0 .05em 0 #1E1300, 0 .12em .25em rgba(0,0,0,.85);
}
.kart.poster-yazili .pz-vurgu .pz-satir{ width:max-content; max-width:100%; margin:0 auto }
/* Küçük manşetin altında kırmızı bant (17 Eylül 2026, Kemal): yazının
ARKASINDA, harf boyundan ince (üstten ve alttan kısa), baştan ve sondan
içeride kalır, dışa taşmaz. Genişlik yazının kendisi kadar (display:table). */
.kart.poster-yazili .pz-kucuk .pz-satir{
display:table; width:auto; margin:0 auto;
background-image:linear-gradient(#C8102E, #C8102E);
background-repeat:no-repeat;
background-size:calc(100% - .5em) 48%;
background-position:center 69%;
}
/* ——— ORTAYA AÇILAN KARTTA YAZI NET (17 Eylül 2026, Kemal: "görsel yaklaşınca
yazı çözünürlüğü düşüyor") ———
`.kart`taki will-change:transform tarayıcıya katmanı bir kez taramasını
söylüyor; açılış (FLIP) küçük ölçekten başladığı için yazı o küçük
çözünürlükte kalıp büyütülüyordu. Ortadaki kopyada ipucu kalkıyor:
hareket bitince yazı gerçek boyunda yeniden çiziliyor. */
.kart.odak-kart{ will-change:auto }
/* *Burada bir ara "-webkit-font-smoothing:antialiased" ve
"text-rendering:geometricPrecision" vardı* ve netlik için konmuştu;
ölçüldüğünde tersini yapıyordu — ilki alt piksel yumuşatmayı elle
kapatıp harfi inceltiyor, ikincisi hinting'i düşürüp kenarı yumuşatıyor.
Yumuşatma kararı tarayıcıya bırakıldı (18 Eylül 2026). */
/* ——— SİTENİN KENDİ MANŞETLERİ (17 Eylül 2026, Kemal) ———
"bunu motorun gönderdiklerine değil sitenin başlıklarına uygula." Yalnız düz
haber kartı (motor posteri, yazılı görsel, il, akış, düello, reklam hariç):
küçük manşet tam görünür (gerekirse iki sıra) ve arkasında kırmızı bant;
büyük manşet sarı→kırmızı geçişli, solunda yukarıdan aşağı kırmızı dik bant;
ikisi sola yaslı. */
.kart.haber-karti:not(.poster-yazili):not(.yazili-gorsel) .ust{
display:inline;
white-space:normal; overflow:visible; text-overflow:clip;
letter-spacing:.02em;
color:#fff;
background-image:linear-gradient(#C8102E, #C8102E);
background-repeat:no-repeat;
background-size:calc(100% - .4em) 48%;
background-position:center 69%;
-webkit-box-decoration-break:clone; box-decoration-break:clone;
line-height:1.35;
}
.kart.haber-karti:not(.poster-yazili):not(.yazili-gorsel) .ana{
margin-top:.3em;
box-sizing:border-box;
border-left:.14em solid #C8102E;
padding-left:.3em;
/* Düz sarı + metin gölgesi — gerekçesi yukarıda (18 Eylül 2026). */
color:#FFC61A;
text-shadow:0 .05em 0 #1E1300, 0 .12em .25em rgba(0,0,0,.85);
}
/* Sitenin kendi manşeti: motor çizimi + sola yaslı + büyük manşetin solunda dik bant. */
.kart.site-manset .pz-yazi{ align-items:flex-start; text-align:left }
.kart.site-manset .pz-kucuk .pz-satir,
.kart.site-manset .pz-vurgu .pz-satir{ margin:0 }
.kart.site-manset .pz-vurgu{
box-sizing:border-box;
border-left:.14em solid #C8102E;
padding-left:.3em;
}
/* ——— TEMSİLÎ GÖRSEL ETİKETİ (18 Eylül 2026) ———
Fotoğraf haberin kendisinden değil, konunun arşivimizdeki temsilî
karesinden geliyor (sunucu/temsili-gorsel.js). Okurun neye baktığını
bilme hakkı var — düello kartındaki "Temsilî görsel" yazısının aynısı.
DOM'a öğe eklenmiyor: kart 91 kez çiziliyor, etiket ::after ile. */
/* ——— ETİKET ::before, HÂLE ::after (18 Eylül 2026) ———
*Etiket de ::after ile çiziliyordu* ve bir öğenin tek bir ::after'ı var:
hâle kuralı (.kart .gorsel::after) ona zaten inset:0 veriyor, yani
right ve bottom sıfır kalıyordu. Etiketin left/top değerleri kutuyu
küçültmüyor, yalnız sol üst köşesini içeri alıyordu — sonuç kartın
NEREDEYSE TAMAMINI kaplayan rgba(9,15,26,.72) koyu perde. Kemal ekranda
gördü: *"bu ne bir hata mı oluştu."* Üstelik hâlenin radyal karartması
da eziliyordu.
Etiket ::before'a taşındı; haber kartında orası boş (video rozeti
.perde::before'da, gönderi ve düello kartınınki ayrı seçicilerde). */
.kart.temsili-kart .gorsel::before{
content:"Temsilî görsel";
position:absolute; left:.5em; top:.5em; z-index:4;
padding:.12em .4em; border-radius:.25em;
background:rgba(9,15,26,.72); color:rgba(255,255,255,.82);
font-size:.62em; letter-spacing:.01em; line-height:1.5;
pointer-events:none;
}
/* ——— ÜST MANŞET: YAZI FOTOĞRAFTAN BAĞIMSIZ (18 Eylül 2026) ———
Kemal: "o yazıyı görselden bağımsız yazmalıyız. görsel altında kalmalı."
Kart artık iki parça: üstte manşet bandı (kendi zemini), altında fotoğraf.
Bandın boyu içeriğinden geliyor, fotoğraf kalanı dolduruyor (flex) —
*sabit bir bant yüksekliği verilseydi* iki satırlık manşet taşar,
tek satırlık manşetin altında boşluk kalırdı.
Fotoğrafın üstünde yazı olmadığı için PERDE de yok: perde hem fotoğrafı
karartıyordu hem kontrastı fotoğraftan fotoğrafa değiştiriyordu. */
.kart.ust-manset{ display:flex; flex-direction:column }
.kart.ust-manset .pz-yazi{
position:static; order:0; flex:0 0 auto;
padding:.85em 1em .95em;
background:var(--pz-zemin,#0d1626);
text-shadow:none;
border-bottom:.08em solid rgba(255,255,255,.07);
}
.kart.ust-manset .gorsel{
position:relative; inset:auto; order:1;
flex:1 1 auto; min-height:0;
}
/* Perde ve kartın kendi yazı bloğu bu düzende kullanılmıyor. */
.kart.ust-manset .perde, .kart.ust-manset > .yazi{ display:none }
/* Büyük manşetin solundaki dik kırmızı bant bandın içinde kalıyor. */
.kart.ust-manset .pz-vurgu{ padding-left:.3em }
.kart.ust-manset .pz-kucuk .pz-satir{ margin:0 }