/* ==================================================================
   NEDEN TURKIYE'DE BARINDIRMALI
   ------------------------------------------------------------------
   Olcek cubuklari gercek sureye orantili. Yakin mesafeler marka
   kirmizisi (bizim taraf), uzaklar notr mavi — renk de anlatiyor.
   ================================================================== */
.tb-tr {
    position: relative; isolation: isolate; overflow: hidden;
    padding-block: var(--tb-ritim, clamp(3.2rem, 6vw, 5.2rem));
}
.tb-tr-canvas {
    position: absolute; inset: 0; width: 100%; height: 100%;
    z-index: 0; pointer-events: none;
}
.tb-tr > .tb-shell { position: relative; z-index: 1; }

.tb-tr-bas { text-align: center; margin-bottom: clamp(1.8rem, 3.4vw, 2.6rem); }
.tb-tr-bas h2 {
    margin: .55rem 0 .7rem;
    font-family: var(--tb-font-baslik);
    font-size: clamp(1.5rem, 1.05rem + 1.8vw, 2.3rem);
    font-weight: 700; letter-spacing: -.028em; color: var(--tb-ink);
    text-wrap: balance;
}
.tb-tr-bas p {
    margin: 0 auto; max-width: 56ch;
    font-size: .95rem; line-height: 1.65; color: var(--tb-ink-soft);
}

.tb-tr-izgara {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(.8rem, 1.8vw, 1.2rem);
}
.tb-tr-kart-genis { grid-row: span 2; }

.tb-tr-kart {
    display: flex; flex-direction: column;
    padding: clamp(1.3rem, 2.6vw, 1.8rem);
    border: 1px solid var(--tb-line);
    border-radius: 16px;
    background: var(--tb-surface);
    transition: border-color .25s ease, box-shadow .25s ease;
}
.tb-tr-kart:hover {
    border-color: rgba(53, 100, 175, 0.360);
    border-color: color-mix(in srgb, var(--basic-primary) 36%, transparent);
    box-shadow: 0 18px 44px -30px rgba(53,100,175,.5);
}
.tb-tr-ikon {
    display: grid; place-items: center;
    width: 42px; height: 42px; margin-bottom: .9rem;
    border-radius: 12px;
    background: rgba(198, 35, 56, 0.090);
    background: color-mix(in srgb, var(--basic-secondary, #C62338) 9%, transparent);
    border: 1px solid rgba(198, 35, 56, 0.220);
    border: 1px solid color-mix(in srgb, var(--basic-secondary, #C62338) 22%, transparent);
    color: var(--basic-secondary, #C62338); font-size: 1.1rem;
}
.tb-tr-kart h3 {
    margin: 0 0 .55rem;
    font-family: var(--tb-font-baslik);
    font-size: 1.12rem; font-weight: 700; letter-spacing: -.02em; color: var(--tb-ink);
}
.tb-tr-kart p {
    margin: 0 0 .7rem;
    font-size: .9rem; line-height: 1.65; color: var(--tb-ink-soft);
}
.tb-tr-kart p b { color: var(--tb-ink); font-weight: 600; }
.tb-tr-vurgu {
    margin-top: auto !important;
    padding-top: .7rem;
    border-top: 1px solid var(--tb-line);
    font-size: .845rem !important;
}

/* --- olcek --- */
.tb-tr-olcek { list-style: none; margin: .4rem 0 .8rem; padding: 0; display: grid; gap: .55rem; }
.tb-tr-olcek li {
    display: grid;
    grid-template-columns: 9.5rem minmax(0, 1fr) 4.2rem;
    align-items: center; gap: .7rem;
}
.tb-tr-yer { font-size: .86rem; font-weight: 600; color: var(--tb-ink); }
.tb-tr-cubuk {
    position: relative; height: 8px; border-radius: 99px;
    background: rgba(91, 107, 124, 0.120);
    background: color-mix(in srgb, var(--tb-ink-soft) 12%, transparent);
    overflow: hidden;
}
/* Yakin mesafeler marka kirmizisi: "bizim taraf" gorsel olarak ayrilir */
.tb-tr-yakin .tb-tr-ms { color: var(--basic-secondary, #C62338); }
.tb-tr-ms {
    text-align: end; font-size: 1rem; font-weight: 700; color: var(--tb-ink);
    letter-spacing: -.02em;
}
.tb-tr-ms small {
    font-size: .68em; font-weight: 600; color: var(--tb-ink-soft); margin-inline-start: .12rem;
}
.tb-tr-dipnot {
    display: block; margin-top: auto; padding-top: .7rem;
    border-top: 1px solid var(--tb-line);
    font-size: .78rem; line-height: 1.5; color: var(--tb-ink-soft);
}

@media (max-width: 880px) {
    .tb-tr-izgara { grid-template-columns: minmax(0, 1fr); }
    .tb-tr-kart-genis { grid-row: auto; }
}
@media (max-width: 480px) {
    .tb-tr-olcek li { grid-template-columns: 7.2rem minmax(0,1fr) 3.6rem; gap: .5rem; }
    .tb-tr-yer { font-size: .8rem; }
}
@media (prefers-reduced-motion: reduce) {
    .tb-tr-kart { transition: none; }
}

/* ==================================================================
   GIDIS-DONUS YARISI
   ------------------------------------------------------------------
   Kartin icindeki olu bosluga (olculdu: 94 px) kondu. Arka plandaki
   gorunmez "mesafe halkalari" tuvalinin yerini alir — o tuval her iki
   temada da yalnizca %0,5-0,7 piksel boyuyordu, yani fikir vardi ama
   ekranda yoktu.
   Burasi kartin SON gorsel ogesi degil; altinda dipnot var. Bu yuzden
   tuval kendi basina durmaz, iki cizgi ve bir altyazidan ibarettir —
   cubuklarin dilini surdurur, yeni bir dil kurmaz.
   ================================================================== */
.tb-tr-yaris {
    margin: .9rem 0 0;
    padding: .85rem 0 0;
    border-top: 1px solid var(--tb-line);
}
.tb-tr-yaris canvas {
    display: block;
    width: 100%;
    /* iki serit + etiket icin olculen en az yukseklik */
    height: 72px;
}
.tb-tr-yaris figcaption {
    margin-top: .5rem;
    font-size: .82rem;
    line-height: 1.5;
    color: var(--tb-ink-soft);
}
.tb-tr-yaris figcaption b {
    font-weight: 700;
    color: var(--tb-ink);
    font-variant-numeric: tabular-nums;
}
/* Yakin olan marka kirmizisiyla, uzak olan marka mavisiyle anilir —
   tuvaldeki seritlerle ayni renk esleсmesi. */
.tb-tr-yaris figcaption b[data-tb-yaris-yakin] { color: var(--basic-secondary, #C62338); }
.tb-tr-yaris figcaption b[data-tb-yaris-uzak]  { color: var(--basic-primary, #3564AF); }

@media (max-width: 575.98px) {
    .tb-tr-yaris canvas { height: 64px; }
    .tb-tr-yaris figcaption { font-size: .78rem; }
}

/* ==================================================================
   14 SEHIRLIK LISTE — IKI SUTUN
   ------------------------------------------------------------------
   OLCUM: liste 6 satirdan 14'e cikinca sol kart 567 -> 877 px uzadi.
   Kart izgarada iki satir kapliyor (grid-row: span 2), bu yuzden
   sagdaki iki kart da gerildi ve her birinde ~155 px bos alan olustu.
   Yani sorun listenin kendisi degil, listenin BOYU idi.

   Cozum: liste iki sutuna alinir, boy yariya iner (450 -> ~225 px) ve
   kart eski yuksekligine yakin kalir. Satir izgarasi bu dar sutunda
   yeniden oranlanir; sehir adi sutunu kisalir, cubuk korunur.
   Dar ekranda (kart zaten tek sutun) liste de tek sutuna doner.
   ================================================================== */
@media (min-width: 992px) {
    /* IKI SUTUN — SEHIR SAYISINDAN BAGIMSIZ
       ------------------------------------------------------------
       Onceki surum `grid-template-rows: repeat(7, auto)` +
       `grid-auto-flow: column` kullaniyordu. 14 sehir icin dogruydu;
       sehir 16'ya cikinca izgara UCUNCU bir sutun acti, acik tanimli
       iki sutunun payi bozuldu ve cubuk kapsayicilari 0 px'e dustu
       (olculdu: kapsayici genisligi 0, cubuk gorunmez oldu).

       Cozum: CSS cok sutunu (`columns`). Satir sayisini kendisi
       dengeler; 16, 18, 24 sehir olsa da kod degismez. Sutun sutun
       doldurdugu icin sira yine yakindan uzaga okunur.
       Her satir bolunmez (`break-inside: avoid`). */
    .tb-tr-olcek {
        display: block;
        columns: 2;
        column-gap: 1.1rem;
    }
    .tb-tr-olcek li {
        break-inside: avoid;
        -webkit-column-break-inside: avoid;
        margin-bottom: .5rem;
        /* 9.5rem ad sutunu dar sutunda cubuga yer birakmiyordu.
           Olculen en uzun ad "Johannesburg" / "ABD (Ashburn)" ~6.3rem. */
        grid-template-columns: 6.6rem minmax(0, 1fr) 3.3rem;
        gap: .45rem;
    }
    .tb-tr-yer { font-size: .8rem; }
    .tb-tr-ms  { font-size: .92rem; }
    .tb-tr-ms small { font-size: .64em; }
}

/* ==================================================================
   CANLI OLCUM — TAZELIK SATIRI VE CUBUK DURUSU
   ------------------------------------------------------------------
   AMAC: ziyaretcinin "bu sayilar gercek ve guncel" diye anlamasi.
   Bunu SOYLEYEREK degil GOSTEREREK yapiyoruz:
     • satirda kac dakika once olculdugu yaziyor (sunucuda hesaplanir)
     • yenilenme sikligi yaziyor
     • cubuklar ilk goruste bir kez dolar — olcum yapiliyormus gibi

   MARKA KURALI: "carpicilik bicimde olur, davranista olmaz."
   Bu yuzden SONSUZ animasyon YOK. Dolum bir kez, bolum goruse girince
   olur ve biter. Nokta da yanip sonmez; yalnizca yumusak bir halka
   tasir — durum bildirir, dikkat calmaz.
   ================================================================== */
.tb-tr-canli {
    display: flex; align-items: center; flex-wrap: wrap;
    gap: .36rem .5rem;
    margin: .1rem 0 .7rem;
    font-size: .76rem;
    color: var(--tb-ink-soft);
}
.tb-tr-canli b {
    font-weight: 700;
    color: var(--basic-secondary, #C62338);
    letter-spacing: .005em;
}
/* Durum noktasi: marka kirmizisi, cevresinde tek bir yumusak halka.
   Yesil kullanilmadi — kirmizi zeminli markada yesil nokta hem palet
   disi hem de renk korlugunde en kotu cift (daha once olculdu). */
.tb-tr-canli-nokta {
    position: relative; flex: 0 0 auto;
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--basic-secondary, #C62338);
}
.tb-tr-canli-nokta::after {
    content: ""; position: absolute; inset: -4px;
    border-radius: 50%;
    border: 1px solid rgba(198,35,56,.34);
}
.tb-tr-canli-ara {
    width: 1px; height: 11px;
    background: var(--tb-line);
    flex: 0 0 auto;
}
.tb-tr-canli-yas { font-variant-numeric: tabular-nums; color: var(--tb-ink); font-weight: 600; }
.tb-tr-canli-siklik { color: var(--tb-ink-soft); opacity: .78; }
[data-bs-theme="dark"] .tb-tr-canli-nokta::after { border-color: rgba(240,138,152,.4); }
[data-bs-theme="dark"] .tb-tr-canli b { color: #F08A98; }

/* ——— cubuk durusu ———————————————————————————————————————————————
   Duz dolgu yerine ince bir derinlik: ucta biraz daha parlak bir uc
   (olcum basi gibi okunur) ve yuvarlak kapak. Golge YOK — serit ince,
   golge kirli gosterir. */
   "Derinlik" vermek icin eklenen seffaf gradyan, dolgunun KENDI
   rengini tasiyan `background` kisayolunu eziyordu: cubuklar renksiz
   kaldi, yalnizca gri ray gorunuyordu. Sus, susledigi seyi bozdu.
   Dolgu rengi .tb-tr-yakin / varsayilan kurallarindan gelir; uc
   isareti asagida ayri bir ::after ile verilir. */
/* GORUNUR TABAN: en kisa cubuk (Istanbul, %2,5) 2 px cikiyordu ve
   "cubuk" degil "nokta" gibi okunuyordu — teknik olarak dogru ama
   gorsel olarak bozuk. 7 px'lik taban onu cubuk olarak okutur; sayi
   zaten yaninda, dolayisiyla taban kimseyi yaniltmaz. Oran bilgisi
   uzun cubuklarda zaten korunuyor. */


/* ——— ilk goruste dolum ——————————————————————————————————————————
   Betik .tb-tr-dolacak sinifini ekler, genisligi 0'a ceker, sonra
   gercek degere birakir. Betik calismazsa sinif hic eklenmez ve
   cubuklar zaten dolu gelir — bozulma olmaz. */

@media (prefers-reduced-motion: reduce) {
}

/* ==================================================================
   BOLUM SAYFANIN BASINA TASINDI — TAM GENISLIK PANEL
   ------------------------------------------------------------------
   Bolum artik alan adi sorgusunun hemen altinda: ziyaretcinin gordugu
   IKINCI sey. Sayfanin en guclu kaniti (16 sehirde canli olculen gercek
   gecikme) one alindi.

   Onceki duzen iki sutunluydu ve gecikme karti sol sutunda, 74 px'lik
   cubuklarla sikisiyordu. Tam genislikte cubuk ~300 px'e cikar; 8 ms ile
   326 ms arasindaki rampa ancak o zaman GORULUR. Kanit, okunabildigi
   kadar kanittir.

   Hukuk kartlari (KVKK, Turk mahkemeleri) alta indi ve yalnizca
   Turkiye'den girenlere gosterilir — bkz. sablondaki $tb_tr_ziyaretci.
   ================================================================== */
.tb-tr-izgara-tek { grid-template-columns: minmax(0, 1fr); }
.tb-tr-izgara-tek .tb-tr-kart-genis { grid-row: auto; }

.tb-tr-izgara-ikili {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: clamp(.8rem, 1.8vw, 1.2rem);
}
@media (max-width: 767.98px) {
    .tb-tr-izgara-ikili { grid-template-columns: minmax(0, 1fr); }
}

/* ——— tam genislikte liste ———————————————————————————————————————
   Genis kartta sutun sayisi ekranla birlikte artar; 16 sehir dar
   ekranda tek, orta boyda iki, genis ekranda uc sutuna dagilir.
   `columns` kullanildigi icin satir sayisi kendini dengeler — sehir
   eklenince kod degismez. */
@media (min-width: 992px) {
    .tb-tr-izgara-tek .tb-tr-olcek {
        columns: 2;
        column-gap: clamp(1.4rem, 3vw, 2.6rem);
    }
    .tb-tr-izgara-tek .tb-tr-olcek li {
        /* Genis alanda ad sutunu rahatlar, cubuk uzar. */
        /* Genis sutunda ad ve sayi sabit kalir, artan tum yer CUBUGA
           gider: 1440 px'de cubuk ~300 px olur. */
        grid-template-columns: 8.4rem minmax(0, 1fr) 4rem;
        gap: .9rem;
    }
    .tb-tr-izgara-tek .tb-tr-yer { font-size: .88rem; }
    .tb-tr-izgara-tek .tb-tr-ms  { font-size: 1.02rem; }
    .tb-tr-izgara-tek .tb-tr-ms small { font-size: .62em; }
    .tb-tr-izgara-tek .tb-tr-cubuk { height: 9px; }
}
/* UC SUTUN DENENDI, VAZGECILDI:
   1440 px'de 16 sehir 6/6/4 bolunuyordu (son sutun yarim) ve cubuk
   118 px'de kaliyordu. Tam genislige gecmenin amaci zaten CUBUGU
   uzatmakti. Iki sutunda bolunme 8/8 dengeli ve cubuk iki katina
   cikiyor — rampa ancak o zaman goruluyor. */

/* Giris metni ve yaris seridi genis kartta ortalanmis bir bantta kalir;
   tam genislikte satir uzunlugu 110+ karaktere cikardi ve okunmazdi.
   (Tipografi kurali: govde metni 80 karakteri gecmemeli.) */
.tb-tr-izgara-tek .tb-tr-kart-genis > p { max-width: 72ch; }
.tb-tr-izgara-tek .tb-tr-yaris { max-width: 52rem; }
.tb-tr-izgara-tek .tb-tr-dipnot { max-width: 86ch; }

/* ==================================================================
   OLCUM PANELI — SAF GOSTERGE
   ------------------------------------------------------------------
   KALDIRILANLAR ve nedeni:
     • ust bant (ikon + baslik + giris metni) — panel anlatmaz, GOSTERIR;
       bolum basligi zaten panelin disinda duruyor
     • "canli olcum · 29 dk once" rozeti — olcum zamani alt notta var
     • gidis-donus yarisi — "Ayni surede Istanbul 48, Ashburn 3 tur"
       cumlesi bir hosting firmasi icin kendi aleyhine calisiyordu

   TEMA DUYARLI: panel ONCEDEN her iki temada da koyuydu; acik modda
   acik olmaliydi. Artik yuzey temayla birlikte degisiyor, cubuk renkleri
   iki zeminde de ayri ayri ayarlandi.

   TEK SUTUN + OLCEK EKSENI: iki sutunda her sutun kendi genisligine
   gore olceklenirdi ve ortak bir eksen cizilemezdi. Tek sutunda 16 sehir
   AYNI cizgiye gore okunur — gosterge ile tablo arasindaki fark budur.
   Cubuk tam genislikte ~1000 px'e cikar.
   ================================================================== */
.tb-tr-kart.tb-panel {
    padding: 0;
    overflow: hidden;
    background: var(--tb-surface, #fff);
    border-color: var(--tb-line);
    box-shadow: 0 26px 60px -34px rgba(15, 32, 55, .42);
}
[data-bs-theme="dark"] .tb-tr-kart.tb-panel {
    background:
        radial-gradient(110% 80% at 88% 0%, rgba(198,35,56,.12), transparent 60%),
        linear-gradient(168deg, #16243D 0%, #111C31 55%, #0D1727 100%);
    border-color: rgba(255,255,255,.10);
    box-shadow: 0 30px 70px -34px rgba(4, 10, 22, .8);
}
/* Ust kenarda marka cizgisi — temadaki diger panellerle ayni degerler. */
.tb-tr-kart.tb-panel::before {
    content: ""; position: absolute; inset-inline: 0; top: 0; height: 2px;
    background: linear-gradient(90deg,
        transparent 0%, var(--basic-primary, #3564AF) 20%,
        #93B3D1 46%, var(--basic-secondary, #C62338) 74%, transparent 100%);
    z-index: 2;
}

.tb-panel-okuma { padding: clamp(1.2rem, 2.4vw, 1.9rem) clamp(1.3rem, 2.6vw, 2rem) .4rem; }

/* ——— SATIRLAR: tek sutun, eksenle ayni izgara ————————————————— */
@media (min-width: 992px) {
    .tb-tr-izgara-tek .tb-panel .tb-tr-olcek { columns: auto; }
    .tb-tr-izgara-tek .tb-panel .tb-tr-olcek li {
        grid-template-columns: var(--tb-ad, 8.4rem) minmax(0, 1fr) var(--tb-ms, 4rem);
        gap: .9rem;
        margin-bottom: 0;
    }
    .tb-panel .tb-tr-olcek { display: grid; gap: .42rem; }
}
.tb-panel .tb-tr-cubuk { height: 10px; border-radius: 99px; }

/* Acik modda: oluk acik gri, dolgu marka renginde.
   Kilavuz cizgileri olugun UZERINE yinelenen gradyanla ciziliyor —
   boylece 16 satirda da kendiliginden ayni yere denk gelir, ayrica
   bir katman gerekmez. --tb-bolum sablondan gelir (adim/tavan). */

/* Koyu modda: oluk koyu oluk, dolgu isir */
[data-bs-theme="dark"] .tb-panel .tb-tr-yer { color: rgba(255,255,255,.88); }
[data-bs-theme="dark"] .tb-panel .tb-tr-ms  { color: #fff; }
[data-bs-theme="dark"] .tb-panel .tb-tr-ms small { color: rgba(255,255,255,.45); }
[data-bs-theme="dark"] .tb-panel .tb-tr-yakin .tb-tr-ms { color: #F08A98; }
[data-bs-theme="dark"] .tb-olcek-eksen { color: rgba(255,255,255,.5); }

/* ——— ALT: yontem notu ————————————————————————————————————————— */
.tb-panel-alt {
    padding: .9rem clamp(1.3rem, 2.6vw, 2rem) clamp(1.1rem, 2.2vw, 1.4rem);
    border-top: 1px solid var(--tb-line);
}
[data-bs-theme="dark"] .tb-panel-alt {
    border-top-color: rgba(255,255,255,.08);
    background: rgba(0,0,0,.16);
}
.tb-tr-kart.tb-panel .tb-tr-dipnot {
    margin: 0; padding: 0; border: 0;
    color: var(--tb-ink-soft);
    font-size: .78rem; line-height: 1.55;
    max-width: 92ch;
}
[data-bs-theme="dark"] .tb-tr-kart.tb-panel .tb-tr-dipnot { color: rgba(255,255,255,.58); }
.tb-panel-yontem { align-self: center; }

@media (max-width: 991.98px) {
    .tb-panel-alt { grid-template-columns: minmax(0, 1fr); }
}

/* ==================================================================
   OLCUM TABLOSU — IKI SUTUN, SIKI SATIR, SINYAL NOKTASI
   ------------------------------------------------------------------
   ALAN: panel 519 px -> hedef ~311 px (%40 kucultme). Nereden geldi:
     • ust yolculuk seridi kaldirildi            -103 px
     • satir adimi 31 -> 21 px (8 satir)          -80 px
     • ic bosluklar kisaldi                       -25 px

   Satir adimini kisaltirken dokunulmayanlar: yazi boyu okunabilir
   kaldi (.82rem), dokunma hedefi mobilde 44 px'in altina DUSURULMEDI
   (orada adim ayri tanimli).

   SINYAL NOKTASI: her satirda bir nokta sunucudan cikar, kendi
   sehrine gider, doner. Hepsi AYNI HIZDA — sure mesafeyle orantili.
   Varsayilan gorunmez; yalnizca animasyon sirasinda betik gosterir,
   boylece betik calismazsa ekranda artik kalmaz.
   ================================================================== */
.tb-olcek-iki { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 clamp(1.4rem, 3vw, 2.6rem); }
@media (min-width: 992px) {
    .tb-olcek-iki { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .tb-tr-izgara-tek .tb-panel .tb-olcek-sutun .tb-tr-olcek li {
        grid-template-columns: 6.2rem minmax(0, 1fr) 3.3rem;
        gap: .6rem;
    }
}

/* ——— SIKI SATIR ——————————————————————————————————————————————— */
.tb-panel .tb-tr-olcek { display: grid; gap: .36rem; }
.tb-panel .tb-tr-olcek li { min-height: 0; padding: 0; }
/* OKUNABILIRLIK — olculdu ve duzeltildi
   "ms" birimi 0,62em x 0,86rem = 8,5 PIKSEL idi. Bu hicbir
   erisilebilirlik olcutunu karsilamaz; gozu zayif biri okuyamaz.
   Kucuk yazi "ikincil bilgi" demek degildir, "okunamayan bilgi"
   demektir — ikincilligi boyutla degil RENK/AGIRLIK ile anlatmak
   dogrusudur.

   Yeni degerler (16 px kok):
     sehir adi  .88rem = 14,1 px
     ms sayisi  .95rem = 15,2 px
     "ms" birim .78em  = 11,9 px   (onceki 8,5 px)
   Kaybedilen yukseklik, kaldirilan eksen satirindan geri alindi. */
.tb-panel .tb-tr-yer {
    font-size: .88rem; line-height: 1.25;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tb-panel .tb-tr-ms  { font-size: .95rem; line-height: 1.25; }
.tb-panel .tb-tr-ms small { font-size: .78em; font-weight: 600; opacity: .62; margin-inline-start: .14em; }
.tb-panel-okuma { padding: clamp(.8rem, 1.7vw, 1.15rem) clamp(1.1rem, 2.2vw, 1.7rem) .5rem; }
.tb-panel-alt { padding: .7rem clamp(1.1rem, 2.2vw, 1.7rem) clamp(.8rem, 1.7vw, 1.05rem); }

/* ——— GUZERGAH CIZGISI —————————————————————————————————————————
   Once 8 px'lik yuvarlak bir olukti ve icinde olculen degere kadar
   dolan renkli bir cubuk vardi. Iki sorun: (1) iki tonlu cubuk,
   uzerinde gidip gelen sinyalle gorsel olarak yarisiyordu;
   (2) dolu/bos ayrimi "yarim kalmis bir ilerleme cubugu" gibi
   okunuyordu.

   Dolgu tamamen kaldirildi. Geriye kalan 2 px'lik ince cizgi "bos"
   diye okunamaz — o bir guzergahtir, uzerinde veri gider gelir.
   Buyukluk bilgisi artik sinyalin RITMINDE: Istanbul'un noktasi
   hizla mekik dokur, Sidney'inki agir agir suzulur. */
.tb-panel .tb-tr-cubuk {
    position: relative;
    height: 6px;
    border-radius: 4px;
    background-color: rgba(15,32,55,.17);
}
[data-bs-theme="dark"] .tb-panel .tb-tr-cubuk {
    background-color: rgba(255,255,255,.16);
    box-shadow: none;
}
/* Animasyon sirasinda genislik betikten gelir; CSS gecisi devre disi
   kalmali yoksa iki kaynak carpisir ve hareket takilir. */

@media (max-width: 991.98px) {
    .tb-panel .tb-tr-olcek { gap: .3rem; }
    .tb-panel .tb-tr-yer { font-size: .84rem; }
}

/* ——— PORT DURUM ISIGI + IZ TUVALI ——————————————————————————————
   DORT DENEMENIN ARDINDAN
   (1) Bayrak seridin sonundaydi — cubukla ilgisizdi.
   (2) Onay muhru cubugun ucundaydi — 8 px'lik seritte okunmuyordu.
   (3) Derece madalyasi okunuyordu ama SAYI gereksizdi: tablo zaten
       ms'ye gore sirali, birinci her zaman en ust satir.
   (4) Genisleyen halka + kivilcim "su patlamasi" gibi duruyordu;
       sacilma ORGANIK bir harekettir, veri merkezi anlatimina ters.

   SIMDI — sektorun kendi dili
   Bir sehir turlarini tamamlayinca o baglanti DOGRULANMIS olur.
   Telekomda bunun gostergesi bellidir: anahtarin PORT ISIGI. Sonuk
   bir cerceve baglanti henuz dogrulanmadi, dolu ve parlak kare
   dogrulandi demektir. Yanip sonmeyi degil, SOLUK/PARLAK farkini
   okuruz — bu bir sekil tanima degil, isik algisidir; cok daha
   hizli ve kucuk boyutta bile isler.

   Isiklar yukaridan asagi sirayla yandigi icin yarisin sonucu da
   ayrica okunur. */
.tb-panel-okuma { position: relative; }
.tb-olcek-tuval {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    pointer-events: none;
    z-index: 3;
}

/* Isik satirin BASINDA: izleme panellerinin yerlesik duzeni
   (durum -> ne -> deger). On sutun ayrica 16 isigi tek bir dikey
   raya diziyor — bir anahtarin port paneli gibi okunuyor. */
@media (min-width: 992px) {
    .tb-tr-izgara-tek .tb-panel .tb-olcek-sutun .tb-tr-olcek li,
    .tb-olcek-sutun .tb-olcek-eksen {
        grid-template-columns: 7.6rem 4.3rem minmax(0, 1fr) 3.4rem;
    }
}
.tb-panel .tb-tr-olcek li { grid-template-columns: 7.4rem minmax(0, 1fr) 3.3rem; }


/* YANDI: dolu, parlak, halesi var — soluk cerceveden kesin ayrilir */

/* Dogrulanmis satir: sayi kalinlasir ve marka rengine doner */

/* ——— YONTEM ve TAZELIK ————————————————————————————————————————
   Iki satir, iki farkli is:
     YONTEM   nasil olctugumuzu anlatir — ikincil, soluk murekkep
     TAZELIK  degerlerin canli oldugunu soyler — ASIL kanit, tam
              murekkep ve kalin zaman damgasi

   Boyut 0,78 -> 0,84rem (12,5 -> 13,4 px). Kucuk yazi "ikincil"
   demek degil "okunamayan" demektir; ikincilligi RENK anlatir. */
.tb-panel-yontem { display: grid; gap: .34rem; }
.tb-tr-kart.tb-panel .tb-tr-yontem {
    margin: 0;
    font-size: .84rem; line-height: 1.55;
    color: var(--tb-ink-soft);
    max-width: 94ch;
}
.tb-tr-kart.tb-panel .tb-tr-tazelik {
    margin: 0;
    font-size: .84rem; line-height: 1.5;
    color: var(--tb-ink);
    display: flex; align-items: baseline; flex-wrap: wrap; gap: .34rem;
}
.tb-tr-tazelik time { font-weight: 700; font-variant-numeric: tabular-nums; }
[data-bs-theme="dark"] .tb-tr-kart.tb-panel .tb-tr-yontem { color: rgba(255,255,255,.58); }
[data-bs-theme="dark"] .tb-tr-kart.tb-panel .tb-tr-tazelik { color: rgba(255,255,255,.9); }

/* Canli isareti: olcum panelindeki port isiklariyla ayni dil.
   Yanip sonmez — marka kurali "carpicilik davranista olmaz". */
.tb-tr-nabiz {
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--basic-secondary, #C62338);
    box-shadow: 0 0 0 2.5px rgba(198,35,56,.16);
    flex: 0 0 auto;
    transform: translateY(-1px);
}
[data-bs-theme="dark"] .tb-tr-nabiz {
    background: #F0607A;
    box-shadow: 0 0 0 2.5px rgba(240,96,122,.2);
}

/* ——— MESAFE SUTUNU ——————————————————————————————————————————————
   NICIN VAR
   Bir sureyi anlamli kilan sey mesafedir. "318 ms" tek basina yavas
   okunur; "14 922 km" ile yan yana okununca isik hizina ne kadar
   yaklasildigi gorunur. Sayi degismedi, CERCEVE degisti.

   Binlik ayraci DAR BOSLUK (U+202F): SI standardi ve dilden bagimsiz.
   Nokta/virgul ayraci dile gore degisir — "14.922" bazi dillerde
   ondalik okunur ve yanlis anlasilir.

   Olcu olarak ikincil: ms'den kucuk ve soluk. Kiyas edilen sayi ms,
   mesafe onu CERCEVELER.

   DAR EKRANDA GIZLENIR: mobilde cizgiye 106 px kaliyor; 62 px'i
   mesafeye vermek sinyalin yolculugunu gorunmez kilardi. Fizik
   argumani orada da alt yazidaki cumleyle veriliyor. */
.tb-tr-km {
    display: none;
    font-size: .78rem;
    text-align: right;
    white-space: nowrap;
    color: var(--tb-ink-soft);
    font-variant-numeric: tabular-nums;
}
.tb-tr-km small { font-size: .78em; opacity: .7; margin-inline-start: .34em; }
[data-bs-theme="dark"] .tb-tr-km { color: rgba(255,255,255,.5); }
@media (min-width: 992px) { .tb-tr-km { display: block; } }

/* ——— FIZIK CUMLESI ————————————————————————————————————————————
   Tablonun en buyuk sayisini savunan cumle. Yontem notundan ONCE
   gelir ve ondan bir tik guclu: cerceveyi kuran odur, yontem onu
   destekler. Sayilari hooks.php olculen veriden uretir. */
.tb-tr-kart.tb-panel .tb-tr-fizik {
    margin: 0 0 .1rem;
    font-size: .84rem; line-height: 1.55;
    color: var(--tb-ink);
    max-width: 94ch;
}
[data-bs-theme="dark"] .tb-tr-kart.tb-panel .tb-tr-fizik { color: rgba(255,255,255,.82); }

/* ——— ms RENGI ————————————————————————————————————————————————
   Once ".tb-tr-bitti" sinifiyla, yani animasyon durumuna bagliydi.
   1:1 olcekte o sinif ilk 0,33 saniyede 16 satira birden eklendigi
   icin bir sey ayirt etmiyordu. Simdi renk BOLGEYE bagli ve sabit:
   Turk sehirleri marka kirmizisi, digerleri marka mavisi — satirdaki
   isik cizgisiyle ayni renk, satir butun halinde okunuyor. */
.tb-panel .tb-tr-ms { font-weight: 800; color: var(--basic-primary, #3564AF); }
.tb-panel .tb-tr-yakin .tb-tr-ms { color: var(--basic-secondary, #C62338); }
[data-bs-theme="dark"] .tb-panel .tb-tr-ms { color: #8FB6F0; }
[data-bs-theme="dark"] .tb-panel .tb-tr-yakin .tb-tr-ms { color: #F57F95; }

/* ——— SERIDIN IKI UCU ————————————————————————————————————————————
   OLCULEN KUSUR: serit ciplakti; isik ortada bir yerde gidip
   geliyordu ama NEYIN ARASINDA gittigi ekranda yoktu. Referans
   noktasi olmayan hareket, olcum degil SUS gibi okunur — "guven
   vermiyor" denmesinin sebebi buydu.

   Simdi her seridin iki ucu isaretli:
     SOL  — sunucumuz (Bursa). 16 satirda da ayni oldugu icin notr
            murekkep; one cikmaz, yalnizca baslangici tanimlar.
     SAG  — o satirin sehri. Satirin kendi renginde (Turk sehirleri
            marka kirmizisi, digerleri mavi), boylece isigin gittigi
            yer ile vardigi yer ayni dili konusur.

   Cizgiden YUKSEK (12 px / 6 px) ki serit uzerinde birer UC olarak
   okunsunlar, cizginin parcasi gibi degil. Statikler: animasyon
   bitince de kalirlar, serit "sunucu —— sehir" olarak okunmaya
   devam eder. */
.tb-panel .tb-tr-cubuk::before,
.tb-panel .tb-tr-cubuk::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 2px; height: 12px;
    margin-top: -6px;
    border-radius: 1px;
    pointer-events: none;
}
.tb-panel .tb-tr-cubuk::before {            /* sunucu — notr */
    left: 0;
    background: rgba(15,32,55,.34);
}
.tb-panel .tb-tr-cubuk::after {             /* sehir — satirin rengi */
    right: 0;
    background: var(--basic-primary, #3564AF);
    opacity: .62;
}
.tb-panel .tb-tr-yakin .tb-tr-cubuk::after {
    background: var(--basic-secondary, #C62338);
}
[data-bs-theme="dark"] .tb-panel .tb-tr-cubuk::before { background: rgba(255,255,255,.32); }
[data-bs-theme="dark"] .tb-panel .tb-tr-cubuk::after  { background: #78A5EC; }
[data-bs-theme="dark"] .tb-panel .tb-tr-yakin .tb-tr-cubuk::after { background: #F0607A; }

/* @@ LOGO-KIRMIZISI-AYDINLIK BASLA (acik-kip.py uretir, elle duzenleme) @@ */
html:not([data-bs-theme="dark"]) .tb-tr-ikon{background: rgba(196, 22, 43, 0.090);background: color-mix(in srgb, var(--basic-secondary, #C4162B) 9%, transparent);border: 1px solid rgba(196, 22, 43, 0.220);border: 1px solid color-mix(in srgb, var(--basic-secondary, #C4162B) 22%, transparent);color: var(--basic-secondary, #C4162B)}
html:not([data-bs-theme="dark"]) .tb-tr-yakin .tb-tr-ms{color: var(--basic-secondary, #C4162B)}
html:not([data-bs-theme="dark"]) .tb-tr-yaris figcaption b[data-tb-yaris-yakin]{color: var(--basic-secondary, #C4162B)}
html:not([data-bs-theme="dark"]) .tb-tr-canli b{color: var(--basic-secondary, #C4162B)}
html:not([data-bs-theme="dark"]) .tb-tr-canli-nokta{background: var(--basic-secondary, #C4162B)}
html:not([data-bs-theme="dark"]) .tb-tr-canli-nokta::after{border: 1px solid rgba(196,22,43,.34)}
html:not([data-bs-theme="dark"]) .tb-tr-kart.tb-panel::before{background: linear-gradient(90deg,
        transparent 0%, var(--basic-primary, #3564AF) 20%,
        #93B3D1 46%, var(--basic-secondary, #C4162B) 74%, transparent 100%)}
html:not([data-bs-theme="dark"]) .tb-tr-nabiz{background: var(--basic-secondary, #C4162B);box-shadow: 0 0 0 2.5px rgba(196,22,43,.16)}
html:not([data-bs-theme="dark"]) .tb-panel .tb-tr-yakin .tb-tr-ms{color: var(--basic-secondary, #C4162B)}
html:not([data-bs-theme="dark"]) .tb-panel .tb-tr-yakin .tb-tr-cubuk::after{background: var(--basic-secondary, #C4162B)}
/* @@ LOGO-KIRMIZISI-AYDINLIK BITIR @@ */