/* ==================================================================
   MARKA PALETI — kaynak: kimlik kilavuzu + 2023 web tasarimlarindan
   OLCULEREK dogrulandi (tasarim hero'su #C52338, mavi paneli #3765B0).
   KURAL: kirmizi+mavi SISTEMI kurar; yesil ve turuncu YALNIZCA kategori
   ayirir (TLD rozeti, paket kademesi). Dekoratif kullanilmaz.
   ================================================================== */
/* ==================================================================
   MARKA YAZI TIPLERI
   ------------------------------------------------------------------
   Kimlik belgesindeki iki aile uygulanir:
     Barlow     -> basliklar, sayilar, dugmeler (dar ve karakterli)
     Open Sans  -> govde metni (uzun okumada rahat)
   Tema degiskeni uzerinden verilir ki tek yerden degistirilebilsin.
   ================================================================== */
:root {
    --tb-font-baslik: Barlow, "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
    --tb-font-govde:  "Open Sans", "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
}
body, .tb-shell, input, textarea, select, button {
    font-family: var(--tb-font-govde);
}
h1, h2, h3, h4, h5, h6,
.tb-hero h1, .tb-cta h2, .tb-why-intro h2,
.tb-hizmet-kart h3, .tb-why-card h3, .tb-mega-metin b, .tb-mega-oge > b,
.tb-footer-col h3, .tb-fstat-oge b, .tb-hizmet-fiyat b,
.tb-btn, .tb-neden-btn, .tb-panel-btn, .tb-nav > li > a {
    font-family: var(--tb-font-baslik);
}
/* rakamlar: Barlow'da tabular sekil daha hizali durur */
.num-tabular { font-family: var(--tb-font-baslik); font-variant-numeric: tabular-nums; }

:root {
    --tb-kat-yesil:   #0AA74B;
    --tb-kat-turuncu: #F7931E;
}

/* ==================================================================
   turkbil — kurumsal arayuz katmani
   turkbil.net.tr kimligi (renk, tipografi, dort renkli bant) korunarak
   modern CSS ile yeniden kuruldu. Eski site.css float tabanliydi ve
   hicbir kapsayici float temizlemiyordu; burada float hic kullanilmaz.

   Degiskenler layouts/default.tpl icindeki <style> blogundan gelir:
   --basic-primary (#3564AF) --basic-secondary (#C62338)
   --basic-deep (#0B1526)    --tb-band (dort renk)
   ================================================================== */

:root {
    /* --tb-shell: turkbil.css'te, panel ayarina gore (standard/wide/wider) */
    --tb-gutter:     20px;
    --tb-radius:     14px;
    --tb-radius-sm:  10px;
    --tb-ring:       0 0 0 1px rgba(15, 32, 55, .07);
    --tb-shadow:     0 10px 30px -18px rgba(15, 32, 55, .45);
    --tb-shadow-lg:  0 30px 70px -40px rgba(15, 32, 55, .55);
    --tb-ink:        #0C1627;
    --tb-ink-soft:   #5b6b7c;
    --tb-line:       #e6eaf0;
    --tb-surface:    #ffffff;
    --tb-surface-2:  #f5f7fa;
    --tb-orange:     #F1B71C;
    --tb-green:      #0AA74B;
}

[data-bs-theme="dark"] {
    --tb-ring:      0 0 0 1px rgba(255, 255, 255, .07);
    --tb-shadow:    0 10px 30px -18px rgba(0, 0, 0, .7);
    --tb-shadow-lg: 0 30px 70px -40px rgba(0, 0, 0, .8);
    --tb-ink:       #e8edf4;
    --tb-ink-soft:  #9aa8ba;
    --tb-line:      #172C4E;
    --tb-surface:   #0B1525;
    --tb-surface-2: #08101B;
}

/* --- ortak kabuk ------------------------------------------------- */
.tb-shell {
    width: 100%;
    max-width: var(--tb-shell);
    margin-inline: auto;
    padding-inline: var(--tb-gutter);
}

.tb-eyebrow {
    display: inline-flex; align-items: center; gap: .45rem;
    font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
    color: var(--basic-primary);
}
[data-bs-theme="dark"] .tb-eyebrow { color: #819ECD; }

.tb-section { padding-block: clamp(3rem, 6vw, 5.5rem); }
.tb-section-head { max-width: 62ch; margin-bottom: 2.5rem; }
.tb-section-head h2 {
    font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.2rem);
    font-weight: 800; letter-spacing: -.02em; line-height: 1.2;
    color: var(--tb-ink); margin: .5rem 0 .6rem;
}
.tb-section-head p { color: var(--tb-ink-soft); margin: 0; font-size: 1.02rem; line-height: 1.65; }
.tb-center { margin-inline: auto; text-align: center; }

/* --- dort renkli kimlik bandi ------------------------------------ */

/* ==================================================================
   UST ILETISIM SERIDI
   ------------------------------------------------------------------
   MOR TUZAGI (gecmis): serit onceden mavi -> koyu kirmizi arasinda
   %45 boyunca harmanlaniyordu; mavi ile kirmizinin arasi HER renk
   uzayinda mordur (olculdu: #49528F, #66375F). Cozum, seridin tek
   renk ailesinde kalmasi — marka mavisinin tonu korunup yalnizca
   aydinlik degisir. Marka kirmizisi harmanlanmaz, "Uzman Yardimi"
   dugmesinde ayri bir blok olarak durur.

   Serit 42px: canvas ince bir sinyal izi cizer, yazi kaymaz.
   ================================================================== */
.tb-topbar {
    /* overflow:hidden KALDIRILDI. Konmasinin sebebi canvas'ti, ama canvas
       zaten `position:absolute; inset:0` ile seride tam oturuyor, tasmasi
       imkansiz. Buna karsilik kural, serit disina acilan her seyi kesiyordu:
       yerel tercihler paneli (216x188) 44px'lik seritte 1px gorunuyordu.
       Uc stacking context'i olmasin diye isolation da kaldirildi; panelin
       z-index'i (80) ust bolumle ayni duzlemde degerlendirilmeli. */
    position: relative; z-index: 90;
    background: linear-gradient(90deg,
        #02142C 0%,
        #0A2449 34%,
        #143A6F 70%,
        #27548F 100%);
    color: #DCE7F3; font-size: .84rem;
}
.tb-topbar-canvas {
    position: absolute; inset: 0; width: 100%; height: 100%;
    z-index: 0; pointer-events: none;
}
.tb-topbar > .tb-shell {
    position: relative; z-index: 1;
    display: flex; flex-wrap: wrap; align-items: center;
    gap: .2rem .25rem;
    min-height: 44px; padding-block: .3rem;
}
/* alt kenarda ince marka tizgisi */
.tb-topbar::after {
    content: ""; position: absolute; inset-inline: 0; bottom: 0; height: 1px; z-index: 2;
    background: linear-gradient(90deg,
        transparent, rgba(90,160,255,.55) 22%, rgba(255,255,255,.4) 50%,
        rgba(232,100,125,.55) 78%, transparent);
}

/* --- sol grup: ogeler arasi ince ayrac --- */
.tb-topbar-oge {
    position: relative;
    display: inline-flex; align-items: center; gap: .5rem;
    padding: .3rem .85rem;
    color: #CFE0F2; text-decoration: none;
    transition: color .18s ease;
}
.tb-topbar-oge:first-child { padding-inline-start: 0; }
.tb-topbar-oge + .tb-topbar-oge::before {
    content: ""; position: absolute; inset-inline-start: 0; top: 50%;
    width: 1px; height: 14px; transform: translateY(-50%);
    background: rgba(170,205,250,.22);
}
.tb-topbar-oge i { font-size: .95em; opacity: .72; transition: opacity .18s ease, color .18s ease; }
.tb-topbar-oge:hover { color: #fff; }
.tb-topbar-oge:hover i { opacity: 1; color: #8FBBF2; }

.tb-topbar-end {
    margin-inline-start: auto;
    display: flex; align-items: center; gap: .55rem;
}

/* --- Uzman Yardimi: marka kirmizisi, harmanlanmamis --- */
/* ——— UZMAN YARDIMI ——————————————————————————————————————————————
   ROLU (sayfadan okundu, varsayilmadi):
   Ust serit bir "bize ulasin" seridi. Icinde DORT kanal var:
     Kutuphanemiz  -> /bilgi-bankasi          kendim bulurum
     Telefon       -> tel:                    simdi konusayim
     E-posta       -> mailto:                 genel soru
     Uzman Yardimi -> /destek-talebi-olustur  takipli talep
   Ilk uc tanesi sessiz metin baglantisi. Dorduncusu "hangisini
   sececegimi bilmiyorum" diyen icin TOPLAYICI kapi — Turkbil'in acemi
   hedef kitlesinin kapisi. Bu yuzden digerlerinden BIR TIK one cikar,
   ama hero'daki birincil eylemden cok geride kalir.
   Hiyerarsi: metin baglantisi < bu < birincil CTA.
   Etiket de bilerek "Uzman Yardimi": sistemin dili "Destek Talebi
   Olustur" olurdu, bu kullanicinin dili. Hedef sayfa giris ISTEMIYOR
   (dogrulandi: HTTP 200, ad/e-posta/departman/oncelik/konu/mesaj
   alanlariyla acik form) — vaat tutuluyor.

   ESKI HALININ SORUNU (olculdu):
     zemin #C62338 = hero'daki BIRINCIL CTA ile birebir ayni renk
     golge rgba(198,35,56,.80) ~ birincil CTA'nin .85 golgesi
     alan 4952 px² = birincil CTA'nin %52'si, ama ONDAN ONCE goruluyor
   Ucuncul bir eylem birincil eylemin giysisini giyiyordu.

   ZANAAT DUZELTMELERI (hepsi olculerek):
     • dolgu ASIMETRIK oldu: solda ikon, sagda metin var; esit dolgu
       (olculen 15,4 / 15,4) kutuyu sola agir gosteriyordu.
     • ikon metinden BUYUK: 12,77px ikon 13,44px metnin yaninda optik
       olarak zayifti. Ikon gliflerinde murekkep seyrek dagilir, esit
       gorunmesi icin biraz buyumeli.
     • dikey nefes: dugme 33px, serit 44px idi — hap seride sikismisti.
   ------------------------------------------------------------------ */
.tb-topbar-yardim {
    position: relative;
    display: inline-flex; align-items: center;
    gap: .42rem;
    /* ikon tarafi dar, metin tarafi genis — optik denge */
    padding: .26rem .95rem .26rem .72rem;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.34);
    background: transparent;
    color: #fff;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    -webkit-tap-highlight-color: transparent;
    transition: border-color .22s ease, transform .12s ease;
}

/* Dolgu katmani metnin ARKASINDA kalir ve IKONDAN disa yayilir.
   Sol kenardan silme degil: anlamin capasi ikon, renk oradan dogup
   iki yana aciliyor. transform-origin ikonun merkezine denk gelir
   (sol dolgu .72rem + ikonun yarisi). */
.tb-topbar-yardim::before {
    content: "";
    position: absolute; inset: 0;
    background: var(--basic-secondary, #C62338);
    transform: scaleX(0);
    /* OLCULDU: ikon merkezi dugme solundan 19,8px uzakta.
       1.17rem (18,72px) 1,08px kacikti; 1.2375rem tam uzerine denk gelir. */
    transform-origin: 1.2375rem center;
    transition: transform .26s cubic-bezier(.33, .85, .3, 1);
    z-index: 0;
}
.tb-topbar-yardim > * { position: relative; z-index: 1; }

/* Ikon metinden bir tik buyuk: esit AGIRLIKTA gorunsun diye. */
.tb-topbar-yardim i {
    font-size: 1.08em;
    line-height: 1;
}

/* ——— haller ——————————————————————————————————————————————————— */
.tb-topbar-yardim:hover,
.tb-topbar-yardim:focus-visible {
    border-color: var(--basic-secondary, #C62338);
    color: #fff;
}
.tb-topbar-yardim:hover::before,
.tb-topbar-yardim:focus-visible::before { transform: scaleX(1); }

/* BASILI: dolgu zaten geldi, geri bildirim derinlikte olur.
   Golge degil 1px asagi — serit ince, golge sigmaz. */
.tb-topbar-yardim:active { transform: translateY(1px); }
.tb-topbar-yardim:active::before { background: #AE1F31; }

/* KLAVYE ODAGI: dolgu kirmizi geldigi icin kirmizi halka kaybolurdu;
   halka disarida ve beyaz, her iki temada ve her iki halde gorunur. */
.tb-topbar-yardim:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

/* Hareketten rahatsiz olan ziyaretci: dolgu aninda gelir, kayma yok. */
@media (prefers-reduced-motion: reduce) {
    .tb-topbar-yardim,
    .tb-topbar-yardim::before { transition: none; }
    .tb-topbar-yardim:active { transform: none; }
}
/* (kaldirildi) .tb-topbar-yardim i { font-size: .95em }
   Blok icindeki 1.08em ayarini eziyordu — ayni ozgullukte ama daha
   sonra geldigi icin kazaniyordu. Ikon metinden BUYUK olmali:
   olculen 12,77px ikon, 13,44px metnin yaninda zayif kaliyordu. */

/* canli nabiz: destek ulasilabilir */
/* .tb-topbar-nabiz kurallari ve tb-nabiz animasyonu KALDIRILDI —
   nokta sablondan cikti, bkz. partials/topbar.tpl aciklamasi. */

/* --- dil --- */
.tb-topbar-dil {
    display: inline-flex; align-items: center; gap: .4rem;
    padding: .3rem .5rem; border-radius: 7px;
    color: #CFE0F2; text-decoration: none;
    transition: background .18s ease, color .18s ease;
}
.tb-topbar-dil:hover { background: rgba(255,255,255,.1); color: #fff; }
.tb-topbar-dil i { opacity: .72; }
.tb-lang-tag {
    font-weight: 700; font-size: .72rem; letter-spacing: .05em;
    background: rgba(255,255,255,.16); border-radius: 4px; padding: .08rem .34rem;
}

/* Koyu kipte serit biraz daha derin olur; acik kipte zaten koyudur,
   bu yuzden metin kontrasti iki kipte de ayni kalir. */
[data-bs-theme="dark"] .tb-topbar {
    background: linear-gradient(90deg, #01101F 0%, #071B36 34%, #0F2C51 70%, #1B3F6B 100%);
}

@media (max-width: 720px) {
    .tb-topbar-oge span { display: none; }
    .tb-topbar-oge { padding-inline: .6rem; }
    .tb-topbar-oge:first-child { padding-inline-start: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .tb-topbar-nabiz::after { animation: none; opacity: .5; }
    .tb-topbar-yardim { transition: none; }
    .tb-topbar-yardim:hover { transform: none; }
}

/* ==================================================================
   ANA MENU
   ================================================================== */
.tb-header {
    position: sticky; top: 0; z-index: 1030;
    background: rgba(255, 255, 255, 0.880);
    background: color-mix(in srgb, var(--tb-surface) 88%, transparent);
    backdrop-filter: saturate(180%) blur(12px);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
    border-bottom: 1px solid var(--tb-line);
}
.tb-header .tb-shell { display: flex; align-items: center; gap: 1.25rem; min-height: 72px; }

.tb-logo { display: inline-flex; align-items: center; flex: 0 0 auto; }
.tb-logo img { height: 38px; width: auto; display: block; }
.tb-logo .tb-logo-dark { display: none; }
[data-bs-theme="dark"] .tb-logo .tb-logo-light { display: none; }
[data-bs-theme="dark"] .tb-logo .tb-logo-dark { display: block; }
.tb-logo .tb-wordmark { font-weight: 800; font-size: 1.3rem; color: var(--basic-primary); }

.tb-nav { display: flex; align-items: center; gap: .15rem; margin-inline-start: .75rem; }
.tb-nav > li { position: relative; list-style: none; }
.tb-nav > li > a {
    display: inline-flex; align-items: center; gap: .3rem;
    padding: .6rem .8rem; border-radius: var(--tb-radius-sm);
    font-size: .94rem; font-weight: 600; color: var(--tb-ink); text-decoration: none;
    transition: background .18s ease, color .18s ease;
}
.tb-nav > li > a:hover,
.tb-nav > li:focus-within > a { background: rgba(var(--basic-primary-rgb), .08); color: var(--basic-primary); }
.tb-nav .tb-caret { transition: transform .2s ease; font-size: .7em; opacity: .65; }
.tb-nav > li:hover .tb-caret, .tb-nav > li:focus-within .tb-caret { transform: rotate(180deg); }

/* acilir menu */
.tb-header-end { margin-inline-start: auto; display: flex; align-items: center; gap: .6rem; }

.tb-icon-btn {
    position: relative; display: inline-flex; align-items: center; justify-content: center;
    width: 42px; height: 42px; border-radius: var(--tb-radius-sm); border: 0;
    background: rgba(var(--basic-primary-rgb), .08); color: var(--basic-primary);
    text-decoration: none; transition: background .18s ease;
}
.tb-icon-btn:hover { background: rgba(var(--basic-primary-rgb), .16); color: var(--basic-primary); }
.tb-badge {
    position: absolute; top: -4px; inset-inline-end: -4px;
    min-width: 18px; height: 18px; padding-inline: 5px; border-radius: 9px;
    background: var(--basic-secondary); color: #fff;
    font-size: .68rem; font-weight: 700; line-height: 18px; text-align: center;
}

/* ana eylem butonu — eski sitedeki .anasolbuton gradyani */
.tb-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    padding: .72rem 1.25rem; border: 0; border-radius: var(--tb-radius-sm);
    font-size: .94rem; font-weight: 700; text-decoration: none; cursor: pointer;
    transition: transform .18s ease, box-shadow .18s ease, background-position .3s ease;
}
.tb-btn-primary {
    background: linear-gradient(135deg, var(--basic-deep), var(--basic-primary));
    color: #fff;
}
.tb-btn-primary:hover {
    color: #fff; transform: translateY(-1px);
    box-shadow: 0 12px 26px -14px rgba(var(--basic-primary-rgb), .9);
}
.tb-btn-ghost {
    background: transparent; color: var(--basic-primary);
    box-shadow: inset 0 0 0 1.5px rgba(var(--basic-primary-rgb), .35);
}
.tb-btn-ghost:hover { color: var(--basic-primary); background: rgba(var(--basic-primary-rgb), .07); }
.tb-btn-light {
    background: rgba(255, 255, 255, .12); color: #fff;
    box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .3);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
.tb-btn-light:hover { color: #fff; background: rgba(255, 255, 255, .2); }

/* Koyu zeminde BIRINCIL eylem. Hero ve CTA'da iki buton da .tb-btn-light
   oldugunda hangisinin ana eylem oldugu okunmuyordu; birincil dolu beyaz
   zemin + marka laciverti metin ile ayrisiyor (kontrast 16.4:1). */
.tb-btn-solid {
    background: #fff; color: var(--basic-deep, #0B1526);
    box-shadow: 0 10px 30px -14px rgba(0, 0, 0, .55);
}
.tb-btn-solid:hover {
    color: var(--basic-deep, #0B1526); background: #fff;
    transform: translateY(-1px);
    box-shadow: 0 16px 34px -14px rgba(0, 0, 0, .65);
}

.tb-burger { display: none; }

/* ==================================================================
   HERO — canvas destekli
   ================================================================== */
/* canvas yuklenemezse hero yine de dolu gorunsun */
/* Metin kolonu: canvas'taki dunya sagda durdugu icin metin onun altina
   girmesin diye genislik sinirli. Dar ekranda sinir kalkar, kure
   solukla(tiri)lip asagi cekilir (bkz. turkbil-canvas.js). */

/* ==================================================================
   ALAN ADI SORGULAMA
   ================================================================== */
/* ==================================================================
   ALAN ADI SORGULAMA — koyu kart + NEON KAYAN CIZGI
   ------------------------------------------------------------------
   Cerceve, donen bir konik gradyanin 2px'lik halkaya maskelenmesiyle
   elde edilir; ayni aci degiskeni hem keskin cizgiyi (::before) hem de
   disa vuran parıltıyı (::after) surdugu icin ikisi SENKRON doner.

   RENKLER kurumsal kimlikten turetildi:
     --basic-primary  #3564AF  -> parlak mavi ucu  #7998CA / #AABDDD
     --basic-secondary #C62338 -> kirmizi ucu      #D25363
   ================================================================== */
@property --tb-neon-aci {
    syntax: "<angle>";
    inherits: false;
    initial-value: 0deg;
}
@keyframes tb-neon-don { to { --tb-neon-aci: 360deg; } }

.tb-domain-wrap { position: relative; margin-top: -2.75rem; z-index: 5; }

.tb-domain {
    position: relative;
    isolation: isolate;
    padding: clamp(1.25rem, 3vw, 1.9rem);
    border-radius: 20px;
    background: linear-gradient(165deg, #142541 0%, #0C1729 58%, #0C1627 100%);
    box-shadow: 0 30px 64px -30px rgba(0, 0, 0, .7);
}
/* icerik neon halkanin ustunde kalsin */
.tb-domain > * { position: relative; z-index: 2; }

/* --- keskin neon cizgi --- */
.tb-domain::before {
    content: ""; position: absolute; inset: 0; z-index: 1;
    border-radius: inherit; padding: 2px; pointer-events: none;
    background: conic-gradient(from var(--tb-neon-aci),
        transparent 0deg 196deg,
        rgba(53, 100, 175, .55) 214deg,
        #7998CA 246deg,
        #AABDDD 276deg,
        #D25363 312deg,
        rgba(198, 35, 56, .5) 334deg,
        transparent 352deg 360deg);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    animation: tb-neon-don 5s linear infinite;
}
/* --- disa vuran parilti (ayni aci -> senkron) --- */
.tb-domain::after {
    content: ""; position: absolute; inset: -2px; z-index: 0;
    border-radius: 22px; padding: 3px; pointer-events: none;
    background: conic-gradient(from var(--tb-neon-aci),
        transparent 0deg 200deg,
        #7998CA 250deg,
        #D25363 315deg,
        transparent 350deg 360deg);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    filter: blur(8px);
    opacity: .8;
    animation: tb-neon-don 5s linear infinite;
}
/* @property desteklenmeyen tarayicida aci sabit kalir -> cizgi durur ama
   cerceve yine gradyanli gorunur; kirik bir gorunum olusmaz. */

/* --- baslik satiri --- */
.tb-domain-head {
    display: flex; align-items: flex-start; gap: .68rem;
    margin-bottom: 1.1rem; flex-wrap: wrap;
}
.tb-domain-ikon {
    display: grid; place-items: center;
    width: 44px; height: 44px; flex: 0 0 44px;
    border-radius: 13px;
    border: 1px solid rgba(255, 255, 255, .14);
    background: rgba(89, 134, 191, .14);
    color: #AABDDD; font-size: 1.2rem;
}
.tb-domain-head h2 {
    margin: 0; font-size: clamp(1rem, 1.6vw, 1.22rem);
    font-weight: 700; color: #fff; letter-spacing: -.015em;
}
.tb-domain-head p {
    margin: .22rem 0 0; font-size: .84rem;
    color: rgba(255, 255, 255, .6);
}
/* uzanti rozetleri — basligin sagina yaslanir */
.tb-domain-exts {
    margin-inline-start: auto; display: flex; gap: .4rem; flex-wrap: wrap;
}
.tb-domain-exts span {
    padding: .32rem .75rem; border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .13);
    background: rgba(255, 255, 255, .04);
    font-size: .78rem; font-weight: 600;
    color: rgba(255, 255, 255, .72);
}
.tb-domain-exts span.is-active {
    border-color: rgba(150, 176, 214, .55);
    background: rgba(89, 134, 191, .18);
    color: #B2C4E0;
}

/* --- sorgu alani --- */
.tb-domain-form {
    display: flex; align-items: center; gap: .5rem;
    padding: .38rem .38rem .38rem 1rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .13);
    background: rgba(2, 10, 26, .72);
    transition: border-color .2s ease, box-shadow .2s ease;
}
.tb-domain-form:focus-within {
    border-color: rgba(198, 35, 56, .5);
    box-shadow: 0 0 0 4px rgba(198, 35, 56, .12);
}
.tb-domain-form input {
    flex: 1 1 auto; min-width: 0;
    border: 0; background: none; padding: .72rem 0;
    font-size: .95rem; color: #fff;
}
.tb-domain-form input::placeholder { color: rgba(255, 255, 255, .42); }
.tb-domain-form input:focus { outline: none; }
.tb-domain-form button {
    flex: 0 0 auto;
    display: inline-flex; align-items: center; gap: .45rem;
    padding: .72rem 1.5rem; border: 0; border-radius: 999px;
    background: linear-gradient(135deg, #D25363, var(--basic-secondary, #C62338));
    color: #fff; font-size: .9rem; font-weight: 600; cursor: pointer;
    box-shadow: 0 10px 22px -10px rgba(198, 35, 56, .85);
    transition: transform .18s ease, box-shadow .18s ease;
}
.tb-domain-form button:hover {
    transform: translateY(-1px);
    box-shadow: 0 14px 28px -10px rgba(198, 35, 56, 1);
}

/* --- uzanti fiyat kartlari --- */
.tb-tlds {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .65rem; margin-top: .95rem;
}
.tb-tld {
    display: flex; align-items: center; gap: .6rem;
    padding: .8rem .95rem; border-radius: 13px;
    border: 1px solid rgba(255, 255, 255, .1);
    background: rgba(255, 255, 255, .035);
    text-decoration: none;
    transition: border-color .2s ease, background .2s ease, transform .2s ease;
}
.tb-tld:hover {
    border-color: rgba(150, 176, 214, .45);
    background: rgba(89, 134, 191, .1);
    transform: translateY(-2px);
}
.tb-tld b { font-size: .95rem; font-weight: 700; color: #fff; }
.tb-tld span { margin-inline-start: auto; font-size: .84rem; color: rgba(255, 255, 255, .62); }
.tb-tld i {
    display: grid; place-items: center;
    width: 26px; height: 26px; flex: 0 0 26px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .16);
    color: rgba(255, 255, 255, .7); font-size: .68rem;
    transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.tb-tld:hover i { background: var(--basic-secondary, #C62338); border-color: var(--basic-secondary, #C62338); color: #fff; }

/* fiyat girilmemisken gosterilen sakin baglanti */
.tb-tld-bos {
    margin-inline-start: auto;
    font-size: .8rem;
    color: rgba(255, 255, 255, .5);
}
.tb-domain-hint {
    display: inline-flex; align-items: center; gap: .45rem;
    margin-top: .95rem; font-size: .86rem; font-weight: 600;
    color: #AABDDD; text-decoration: none;
}
.tb-domain-hint:hover { color: #B2C4E0; }
.tb-domain-hint i { transition: transform .18s ease; }
.tb-domain-hint:hover i { transform: translateX(3px); }

/* ==================================================================
   HIZMET KARTLARI
   ================================================================== */
.tb-grid { display: grid; gap: 1rem; }
.tb-grid-4 { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.tb-grid-3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }

.tb-card {
    position: relative; display: flex; flex-direction: column; gap: .55rem;
    padding: 1.5rem 1.35rem; border-radius: var(--tb-radius);
    background: var(--tb-surface); border: 1px solid var(--tb-line);
    text-decoration: none; color: inherit; overflow: hidden;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.tb-card::before {
    content: ""; position: absolute; inset-inline: 0; top: 0; height: 3px;
    background: var(--tb-card-accent, var(--basic-primary));
    transform: scaleX(0); transform-origin: left; transition: transform .25s ease;
}
.tb-card:hover { transform: translateY(-3px); box-shadow: var(--tb-shadow); border-color: transparent; color: inherit; }
.tb-card:hover::before { transform: scaleX(1); }
.tb-card-icon {
    width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center;
    background: color-mix(in srgb, var(--tb-card-accent, var(--basic-primary)) 12%, transparent);
    color: var(--tb-card-accent, var(--basic-primary)); font-size: 1.35rem; margin-bottom: .5rem;
}
.tb-card-icon img { width: 28px; height: 28px; object-fit: contain; }
.tb-card h3 { font-size: 1.05rem; font-weight: 700; margin: 0; color: var(--tb-ink); }
.tb-card p { font-size: .9rem; line-height: 1.6; color: var(--tb-ink-soft); margin: 0; }
.tb-card-price { margin-top: auto; padding-top: .7rem; font-size: .88rem; color: var(--tb-ink-soft); }
.tb-card-price strong { color: var(--tb-ink); font-size: 1.05rem; }
/* Urunlerde fiyat tanimli degilken .tb-card-price hic basilmiyordu ve
   "Paketleri Incele" yukari kayip kartlar hizasiz duruyordu. Bagimsiz
   olarak alta sabitleniyor; fiyat eklenince de dogru calisir. */
.tb-card-more { margin-top: auto; padding-top: .7rem; display: inline-flex; align-items: center; gap: .35rem; font-size: .86rem; font-weight: 600; color: var(--tb-card-accent, var(--basic-primary)); }
.tb-card-price + .tb-card-more { margin-top: 0; padding-top: .35rem; }

/* "Neden Türkbil" renkli kartlar — eski sitedeki turuncu/lacivert/yesil */
/* Giris sutunu kartlarla ayni yukseklikte ve dikey ortali; kartlar
   esit yukseklikte kalsin diye stretch. */

/* Acik/canli zeminli kart (turuncu): beyaz metin 1.93:1 ile okunmuyordu.
   Turuncuyu karartmak marka tonunu hardala cevirdigi icin metni koyulastirdik;
   marka laciverti #0B1526 ile en kotu kose 7.22:1 (WCAG AA fazlasiyla gecer). */

/* ==================================================================
   SAYILAR
   ================================================================== */
.tb-stats {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 1px;
    background: var(--tb-line); border: 1px solid var(--tb-line);
    border-radius: var(--tb-radius); overflow: hidden;
}
.tb-stat { background: var(--tb-surface); padding: 1.5rem 1.25rem; text-align: center; }
.tb-stat b { display: block; font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.3rem); font-weight: 800; letter-spacing: -.02em; color: var(--basic-primary); }
/* Koyu zeminde marka laciverti 2.05:1 ile okunmuyor; ayni tonun acigi 6.64:1 */
[data-bs-theme="dark"] .tb-stat b { color: #7998CA; }
.tb-stat span { font-size: .86rem; color: var(--tb-ink-soft); }

/* ==================================================================
   CTA
   ================================================================== */
.tb-cta {
    position: relative; overflow: hidden; border-radius: calc(var(--tb-radius) + 4px);
    background: linear-gradient(120deg, var(--basic-deep), var(--basic-primary) 60%, #8A1827);
    color: #fff; padding: clamp(2rem, 5vw, 3.25rem);
    display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1.5rem; align-items: center;
}
.tb-cta h2 { font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2rem); font-weight: 800; letter-spacing: -.02em; margin: 0 0 .5rem; color: #fff; }
.tb-cta p { color: rgba(255, 255, 255, .82); margin: 0; max-width: 60ch; }
.tb-cta-actions { display: flex; flex-wrap: wrap; gap: .75rem; }

/* ==================================================================
   FOOTER
   ================================================================== */
.tb-footer { background: var(--basic-deep); color: #b9c7d8; padding-top: clamp(2.5rem, 5vw, 4rem); }
[data-bs-theme="dark"] .tb-footer { background: #070D17; }
.tb-footer-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(auto-fit, minmax(150px, 1fr)); gap: 2rem; padding-bottom: 2.5rem; }
.tb-footer-logo img { height: 40px; width: auto; margin-bottom: 1rem; }
.tb-footer address { font-style: normal; font-size: .9rem; line-height: 1.75; color: #93a5bb; margin-bottom: 1rem; }
.tb-social { display: flex; gap: .5rem; }
.tb-social a {
    width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center;
    background: rgba(255, 255, 255, .08); color: #dbe6f2; text-decoration: none;
    transition: background .18s ease, transform .18s ease;
}
.tb-social a:hover { background: var(--basic-secondary); color: #fff; transform: translateY(-2px); }
.tb-footer-col h3 { font-size: .82rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #fff; margin: 0 0 .9rem; }
.tb-footer-col a { display: block; padding: .3rem 0; font-size: .9rem; color: #a7b8cc; text-decoration: none; transition: color .16s ease; }
.tb-footer-col a:hover { color: #fff; }
.tb-footer-bottom {
    display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.5rem;
    padding-block: 1.25rem; border-top: 1px solid rgba(255, 255, 255, .09);
    font-size: .84rem; color: #8ea0b6;
}
.tb-footer-bottom nav { margin-inline-start: auto; display: flex; flex-wrap: wrap; gap: 1.25rem; }
.tb-footer-bottom a { color: #8ea0b6; text-decoration: none; }
.tb-footer-bottom a:hover { color: #fff; }

/* ==================================================================
   MOBIL
   ================================================================== */
@media (max-width: 991.98px) {
    .tb-nav { display: none; }
    .tb-burger {
        display: inline-flex; align-items: center; justify-content: center;
        width: 42px; height: 42px; border: 0; border-radius: var(--tb-radius-sm);
        background: rgba(var(--basic-primary-rgb), .08); color: var(--basic-primary);
    }
                .tb-cta { grid-template-columns: 1fr; }
}

@media (max-width: 575.98px) {
    .tb-topbar .tb-shell { font-size: .78rem; gap: .25rem .9rem; }
    /* Dar ekranda 5 oge 3 satira sariyordu. Telefon ve "Musteri Paneli"
       zaten erisilebilir oldugu icin ikincil olanlari gizliyoruz;
       hepsi mobil yan menude duruyor. */
    .tb-topbar a[href^="mailto:"] { display: none; }
    /* DUZELTME: burada once `.tb-topbar-end a:first-child` vardi ve
       "Uzman Yardimi" baglantisini gizlemek icin yazilmisti. O baglanti
       kaldirilip yerine yerel tercihler paneli gelince seçici kapsamdan
       cikti: panelin her <li>'sindeki tek <a>, kendi <li>'sinin ILK
       cocugudur — dolayisiyla dort para birimi secenegi de bu kurala
       uyup display:none oluyordu (olculdu: secenek yuksekligi 0px).
       Kural artik yalnizca DOGRUDAN cocuga bakar ve yerel kontrolu
       disarida birakir. */
    .tb-topbar .tb-topbar-end > a:first-child:not(.tb-yerel-dugme) { display: none; }
    .tb-topbar .tb-shell { min-height: 36px; }
    .tb-domain-form button { flex: 1 1 100%; }
    .tb-footer-bottom nav { margin-inline-start: 0; }
}

/* Hareket hassasiyeti */
@media (prefers-reduced-motion: reduce) {
        .tb-brand-band.is-animated { animation: none; }
    .tb-card,     .tb-domain::before, .tb-domain::after { animation: none; }
    .tb-card:hover, }

/* ==================================================================
   MENU ALANI — koyu kabuk, neon vurgular, canvas destegi
   ------------------------------------------------------------------
   Renkler kurumsal kimlikten: --basic-deep #0B1526, --basic-primary
   #3564AF, --basic-secondary #C62338. Parlak uclar bunlardan turetildi.
   Canvas yalnizca SUSLEMEDIR: betik calismazsa baslik kendi zemini ve
   alt neon cizgisiyle eksiksiz gorunur.
   ================================================================== */

/* --- ust serit: ayraclar + EN rozeti --- */
.tb-topbar .tb-shell > a + a::before,
.tb-topbar-end > a + a::before {
    content: "";
    width: 1px; height: 13px;
    margin-inline-end: 1rem;
    background: rgba(255, 255, 255, .22);
}
.tb-topbar .tb-shell > a + a,
.tb-topbar-end > a + a { margin-inline-start: -.65rem; }

.tb-topbar .tb-lang-tag {
    background: rgba(0, 0, 0, .3);
    border: 1px solid rgba(214, 85, 100, .55);
    box-shadow: 0 0 10px -2px rgba(214, 85, 100, .7);
    border-radius: 999px;
    padding: .12rem .45rem;
    color: #fff;
}

/* --- baslik: koyu + canvas --- */
.tb-header {
    position: sticky; top: 0; z-index: 1030;
    isolation: isolate;
    background: linear-gradient(180deg, #0E1A2D 0%, #09111D 100%);
    backdrop-filter: saturate(150%) blur(10px);
    -webkit-backdrop-filter: saturate(150%) blur(10px);
    border-bottom: 0;
}
.tb-header-canvas {
    position: absolute; inset: 0; z-index: -1;
    width: 100%; height: 100%; display: block;
    pointer-events: none;
}
/* alt neon cizgi: solda mavi, sagda kirmizi (referanstaki gibi) */
.tb-header::after {
    content: "";
    position: absolute; inset-inline: 0; bottom: 0; height: 1px;
    background: linear-gradient(90deg,
        rgba(89, 134, 191, 0) 0%,
        #7998CA 18%,
        rgba(150, 176, 214, .85) 38%,
        rgba(255, 255, 255, .25) 50%,
        rgba(214, 85, 100, .85) 64%,
        rgba(198, 35, 56, .70) 84%,
        rgba(198, 35, 56, 0) 100%);
    box-shadow: none;
    pointer-events: none;
}

/* --- menu baglantilari: acik metin --- */
.tb-header .tb-nav > li > a { color: rgba(255, 255, 255, .82); font-weight: 500; }
.tb-header .tb-nav > li > a:hover,
.tb-header .tb-nav > li:focus-within > a {
    background: rgba(255, 255, 255, .06);
    color: #fff;
}
/* aktif sayfa: altinda kirmizi cizgi */
.tb-header .tb-nav > li > a[aria-current="page"],
.tb-header .tb-nav > li > a.is-active { color: #fff; background: none; }
.tb-header .tb-nav > li > a[aria-current="page"]::after,
.tb-header .tb-nav > li > a.is-active::after {
    content: "";
    position: absolute; left: .8rem; right: .8rem; bottom: .25rem;
    height: 2px; border-radius: 2px;
    background: var(--basic-secondary, #C62338);
    box-shadow: 0 0 8px -1px rgba(198, 35, 56, .9);
}

/* koyu zeminde her zaman acik logo */
.tb-header .tb-logo .tb-logo-light { display: none; }
.tb-header .tb-logo .tb-logo-dark { display: block; }
.tb-header .tb-logo .tb-wordmark { color: #fff; }

.tb-header .tb-icon-btn { border-color: rgba(255, 255, 255, .16); color: rgba(255, 255, 255, .8); }
.tb-header .tb-icon-btn:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.tb-header .tb-burger { color: #fff; border-color: rgba(255, 255, 255, .18); }

/* --- Musteri Paneli: mavi -> kirmizi gradyan cerceve --- */
.tb-panel-btn {
    position: relative;
    display: inline-flex; align-items: center; gap: .5rem;
    padding: .62rem 1.15rem;
    border: 0; border-radius: 12px;
    background: rgba(255, 255, 255, .03);
    color: #fff; font-size: .9rem; font-weight: 600;
    text-decoration: none;
    transition: background .18s ease, transform .18s ease;
}
.tb-panel-btn::before {
    content: "";
    position: absolute; inset: 0;
    border-radius: inherit; padding: 1px;
    background: linear-gradient(100deg, #7998CA 0%, #3564AF 45%, #D25363 100%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}
.tb-panel-btn:hover {
    color: #fff;
    background: rgba(255, 255, 255, .09);
    transform: translateY(-1px);
}

/* --- acilir menu: koyu --- */
@media (prefers-reduced-motion: reduce) {
    .tb-panel-btn:hover { transform: none; }
}

/* ==================================================================
   BASLIK — ALTIN ORAN HIZALAMA + NEON DUGME
   ------------------------------------------------------------------
   phi = 1.618. Olculer basligin yuksekliginden turetildi:
     baslik 72px -> logo 72/phi = 44px, yan bosluk 72/phi^2 = 28px
   Yatayda sutun orani 1 : 0.618 -> menunun optik merkezi kabugun
   %61.8'ine (altin kesit) oturur, tam ortasina degil.
   ================================================================== */
:root { --tb-phi: 1.618; }

.tb-header .tb-shell {
    display: grid;
    /* ALTIN ORAN uygulamasi — konum yuzdesi degil RITIM uzerinden.
       Sabit %38,2'lik sol sutunu denedim: 6 ogeli menu sigmadi, dugme
       kabuktan 82px tasti (olculdu). Dogrusu: sutunlar icerige gore
       boyutlanir, menu logo ile dugme arasinda optik merkeze oturur;
       altin oran ise TUM DIKEY VE BOSLUK OLCULERINI belirler:
         baslik 72px
         logo   72 / phi   = 44px
         yan bosluk 72 / phi^2 = 28px
         sutun araligi  1.618rem
         menu ogesi dolgusu .618rem / .809rem  (phi^-1, phi^-1*1.309)
         ust serit 72 / phi = 44px
    */
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    column-gap: clamp(1rem, 2vw, 1.618rem);
    min-height: 72px;
    padding-inline: clamp(1rem, 2.4vw, 28px);
}
.tb-header .tb-logo      { justify-self: start; }
.tb-header .tb-nav       { justify-self: center; margin-inline-start: 0; }
.tb-header .tb-header-end{ justify-self: end; }

/* logo yuksekligi = baslik / phi */
.tb-header .tb-logo img { height: 44px; width: auto; }

/* menu ogeleri arasi bosluk da phi tabanli */
.tb-header .tb-nav {
    gap: .382rem;
    /* <ul> varsayilan dikey kenar bosluguyla baslik 72 yerine 81px
       oluyordu (olculdu). Sifirlanmazsa altin oran ritmi bozulur. */
    margin-block: 0;
    padding-inline-start: 0;
}
.tb-header .tb-nav > li > a { line-height: 1.25; }
.tb-header .tb-nav > li > a { padding: .618rem .809rem; }

/* ust serit yuksekligi: 72 / phi */
.tb-topbar .tb-shell { min-height: 44px; }

/* --- Musteri Paneli: DONEN neon cerceve (alan adi kartiyla ayni teknik) --- */
.tb-panel-btn::before {
    background: conic-gradient(from var(--tb-neon-aci),
        transparent 0deg 188deg,
        rgba(53, 100, 175, .5) 208deg,
        #7998CA 242deg,
        #AABDDD 272deg,
        #D25363 308deg,
        rgba(198, 35, 56, .5) 332deg,
        transparent 350deg 360deg);
    animation: tb-neon-don 4s linear infinite;
}
/* disa vuran parilti — ayni aci, senkron */
.tb-panel-btn::after {
    content: "";
    position: absolute; inset: -2px; z-index: -1;
    border-radius: 14px; padding: 3px; pointer-events: none;
    background: conic-gradient(from var(--tb-neon-aci),
        transparent 0deg 195deg,
        #7998CA 245deg,
        #D25363 312deg,
        transparent 348deg 360deg);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    filter: blur(6px);
    opacity: .85;
    animation: tb-neon-don 4s linear infinite;
}
.tb-panel-btn { isolation: isolate; }

@media (prefers-reduced-motion: reduce) {
    .tb-panel-btn::before, .tb-panel-btn::after { animation: none; }
}

/* dar ekran: izgara tek satira sigmaz, akisa don */
@media (max-width: 992px) {
    .tb-header .tb-shell {
        display: flex; justify-content: space-between;
        padding-inline: clamp(20px, 4vw, 28px);   /* en az 20px (2026-10-13) */
    }
    .tb-header .tb-logo img { height: 38px; }
}

/* ==================================================================
   HERO — referans gorsele gore: koyu uzay, isik agindaki dunya,
   solda baslik, sagda guven karti.
   ================================================================== */
.tb-hero {
    position: relative; isolation: isolate; overflow: hidden;
    color: #fff;
    background:
        radial-gradient(120% 95% at 72% 45%, #16305e 0%, transparent 58%),
        radial-gradient(70% 80% at 97% 25%, rgba(140, 40, 90, .45) 0%, transparent 60%),
        radial-gradient(60% 70% at 3% 85%, rgba(53, 100, 175, .35) 0%, transparent 62%),
        linear-gradient(180deg, #050a18 0%, #081026 52%, #060b1c 100%);
}
.tb-hero-canvas {
    position: absolute; inset: 0; z-index: -1;
    width: 100%; height: 100%; display: block;
}
/* metin tarafini okunur tutan perde */
.tb-hero::after {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: linear-gradient(100deg, rgba(5,10,24,.93) 0%, rgba(5,10,24,.72) 32%, rgba(5,10,24,.15) 55%, transparent 70%);
}
.tb-hero .tb-shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: center;
    min-height: clamp(520px, 64vh, 660px);
    padding-block: clamp(3rem, 6vw, 4.5rem) clamp(5rem, 9vw, 7rem);
}
.tb-hero-copy { max-width: 620px; }

.tb-hero-eyebrow {
    display: inline-flex; align-items: center; gap: .55rem;
    padding: .42rem 1.05rem; margin-bottom: 1.3rem;
    border: 1px solid rgba(255,255,255,.22); border-radius: 999px;
    background: rgba(255,255,255,.05);
    /* .74rem = 11.8px idi; 12px tabanin altindaydi. .8rem = 12.8px. */
    /* BUYUK HARF + genis izleme kaldirildi: uretilmis sayfalarin en
       belirgin isareti. Rozet cumle duzeninde bir olgu etiketi olarak
       kaliyor — bilgi duruyor, sablon gorunumu gidiyor. */
    font-size: .82rem; font-weight: 600; letter-spacing: .01em;
    color: rgba(255,255,255,.9);
}
.tb-hero-eyebrow::before {
    content: ""; width: 6px; height: 6px; border-radius: 50%;
    background: var(--basic-secondary, #C62338);
    box-shadow: 0 0 8px 1px rgba(198,35,56,.9);
}
.tb-hero h1 {
    margin: 0 0 1.1rem;
    /* 4.1rem'de "Turkiye'de guvende" tasip 3. satira iniyordu (olculdu);
       hero uzayip kureyi ortuyordu. 3.75rem'de vurgu tek satirda kaliyor. */
    /* Olculdu: 3.75rem'de vurgunun dogal genisligi 620px, kolon da
       620px — sifir pay oldugu icin sariyordu. 3.55rem ~%5 pay birakir. */
    font-size: clamp(2.05rem, 4.45vw, 3.55rem);
    /* Barlow'da yalnizca 400/600/700 yuklu. 600-700 farki olculdu:
       329 -> 332 px (%1), gorulmuyor. Gercek kesimler kullaniliyor:
       ilk satir 400, vurgu satiri 700. Hiyerarsi renkle degil
       agirlikla kuruluyor. */
    font-weight: 400;
    /* 1.06 iki satirli baslikta satirlari yapistiriyordu (olculdu).
       Izleme -.035em -> -.028em: Turkce aksanlar (g-bresve, noktasiz i,
       u-umlaut) cok sik izlemede birbirine giriyor. */
    line-height: 1.1; letter-spacing: -.028em; color: #fff;
}
.tb-hero h1 .tb-accent {
    display: block;             /* kendi satirinda butun kalsin */
    font-weight: 700;           /* h1 400'de; 400 -> 700 gercek kesim atlamasi */
    color: #fff;
}
/* VURGU SOZCUGU (ana sayfa + kategori hero): kirmizi -> pembe gradyan
   murekkep; kalan sozcukler beyaz. Kullanicinin referansi (2026-10-08). */
.tb-vurgu { font-style: normal; font-weight: inherit; background: linear-gradient(90deg, #D4203C 0%, #F0456B 55%, #FF7AA6 100%); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; filter: drop-shadow(0 0 16px rgba(217,36,70,.35)); }
.tb-hero-lead {
    /* 50ch sinirinda satir basina 47 karakter dusuyordu (olculdu);
       okuma icin ideal bant 55-75. 58ch ~55 karaktere cikariyor.
       1.75 satir araligi bu punto icin gevsekti. */
    margin: 0 0 2rem; max-width: 58ch;
    font-size: clamp(1rem, 1.2vw, 1.09rem); line-height: 1.65;
    color: rgba(255,255,255,.82);
}
.tb-hero-actions { display: flex; align-items: center; gap: 1.6rem; flex-wrap: wrap; }

/* --- sagdaki guven karti --- */







@media (max-width: 992px) {
    .tb-hero .tb-shell { grid-template-columns: minmax(0,1fr); }
    .tb-hero-canvas { opacity: .5; }
    .tb-hero::after {
        background: linear-gradient(180deg, rgba(5,10,24,.92) 0%, rgba(5,10,24,.7) 45%, rgba(5,10,24,.3) 100%);
    }
    
}

/* Hero CTA referansta KIRMIZI — tema birincil rengi mavi oldugu icin
   yalnizca hero icinde eziyoruz. */
.tb-hero .tb-btn-primary,
.tb-hero .tb-btn-solid {
    /* OLCUM: #E5306B'nin tonu 340.4°, marka kirmizisi #C62338 ise
       352.3° — 11.9 derece sapma, gozle macentaya kayiyor. Marka
       belgesinin kendi turetme kurali "parlak uc = marka rengi + beyaz"
       diyor; o kuralla uretilen #D94256'nin tonu 352.1°, yani sapma
       0.2°. Ayni parlakligi veriyor, markadan cikmiyor. */
    background: linear-gradient(135deg, #D94256 0%, var(--basic-secondary, #C62338) 100%);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 12px 28px -10px rgba(198, 35, 56, .85);
}
.tb-hero .tb-btn-primary:hover,
.tb-hero .tb-btn-solid:hover {
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 18px 36px -12px rgba(198, 35, 56, 1);
}
/* oynat dugmesi */
.tb-hero .tb-play { display: inline-flex; align-items: center; gap: .75rem; color: rgba(255,255,255,.9); text-decoration: none; font-weight: 500; }
.tb-hero .tb-play:hover { color: #fff; }
.tb-hero .tb-play-ring {
    display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%;
    border: 1px solid rgba(255,255,255,.3); background: rgba(255,255,255,.07);
    transition: transform .2s ease, background .2s ease;
}
.tb-hero .tb-play:hover .tb-play-ring { transform: scale(1.06); background: rgba(255,255,255,.13); }
.tb-hero .tb-play i { font-size: .85rem; margin-inline-start: 2px; }

/* ==================================================================
   KAYDIRMA CUBUGU — kimlik renklerinde
   Varsayilan #FAFAFB gri cubuk koyu tasarimin yaninda siritiyordu.
   Firefox `scrollbar-color`, WebKit/Blink ::-webkit-scrollbar kullanir;
   ikisi de yazildi.
   ================================================================== */
:root {
    scrollbar-width: thin;
    scrollbar-color: var(--basic-primary, #3564AF) rgba(11, 21, 38, .6);
}
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track {
    background: rgba(11, 21, 38, .55);
}
::-webkit-scrollbar-thumb {
    border-radius: 999px;
    border: 2px solid transparent;
    background-clip: padding-box;
    background-color: var(--basic-primary, #3564AF);
}
::-webkit-scrollbar-thumb:hover {
    background-color: var(--basic-secondary, #C62338);
}
::-webkit-scrollbar-corner { background: transparent; }

/* ==================================================================
   MEGA MENU
   ------------------------------------------------------------------
   Dar acilir liste yerine, basligin altina tam genislikte oturan cam
   panel. Ust kenarda marka gradyani (mavi -> kirmizi) alan adi kartiyla
   ayni dili konusur. Oge sayisi azsa sagdaki one cikan panel dengeyi
   kurar; cok olursa sutunlar kendiliginden cogalir (auto-fill).
   ================================================================== */
/* Mega panel kabuga gore hizalansin diye li'yi static yapiyoruz. ANCAK
   bunu yapinca etkin sayfa alt cizgisi (a[aria-current]::after) en yakin
   konumlandirilmis atayi KABUK olarak buldu ve left/right:.8rem ile tum
   genislige yayildi — basligin altinda tam genislikte kirmizi bir cizgi
   olarak goruluyordu. Baglantiya position:relative vererek cizgiyi kendi
   kutusuna geri bagliyoruz. */
.tb-nav > li { position: static; }
.tb-header .tb-nav > li > a { position: relative; }

/* OLU BOLGE DUZELTMESI
   Olculen durum: baglanti y=103.3'te bitiyordu, panel y=112'de basliyordu —
   aradaki 8.7px li'nin DISINDA kaliyordu, fare oradan gecerken li:hover
   kopuyor ve panel kapaniyordu. (padding-top eklemek yetmedi, cunku bosluk
   panelin ustunde degil BAGLANTININ altindaydi.)
   Cozum: li basligin tam yuksekligine yayilsin, baglanti icinde ortalansin.
   Boylece li'nin alt kenari panelin ustune degiyor, kesintisiz gecis olur. */
.tb-header .tb-nav { align-items: stretch; }
.tb-header .tb-nav > li { display: flex; align-items: center; }

/* HOVER KOPRUSU
   li'yi baslik yuksekligine yaymak tek basina yetmedi; menu hala
   kapaniyordu. Olculen bosluk: baglanti y=103.3'te bitiyor, panel
   y=112'de basliyor -> 8.7px.
   Bu kopru BAGLANTIYA ait (a::before) ve mutlak konumlu oldugu icin
   yerlesimi bozmaz. Yalnizca baglantinin genisligindedir — panelin
   kendisi gibi tum satiri kaplamaz, bu yuzden diger menu ogelerinin
   ustune binip onlari engellemez.
   Yalnizca alt menusu OLAN ogelerde acilir (:has), digerlerinde gereksiz
   bir tiklama alani olusturmaz. */
.tb-header .tb-nav > li:has(> .tb-mega) > a::before {
    content: "";
    position: absolute;
    left: 0; right: 0; top: 100%;
    height: 22px;
}
/* :has desteklemeyen tarayicilar icin: koprü tum ogelerde olsun —
   zararsizdir, yalnizca 22px'lik gorunmez bir alan ekler. */
@supports not selector(li:has(> div)) {
    .tb-header .tb-nav > li > a::before {
        content: ""; position: absolute;
        left: 0; right: 0; top: 100%; height: 22px;
    }
}
.tb-header .tb-shell { position: relative; }

.tb-mega {
    position: absolute;
    inset-inline: 0;
    top: 100%;
    padding-top: 12px;          /* gorsel bosluk + KESINTISIZ hover koprusu */
    z-index: 60;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity .2s ease, transform .22s ease, visibility .22s;
    pointer-events: none;
}
.tb-nav > li:hover > .tb-mega,
.tb-nav > li:focus-within > .tb-mega {
    opacity: 1; visibility: visible; transform: none; pointer-events: auto;
}

.tb-mega-ic {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 1.6rem;
    padding: 1.5rem;
    border-radius: 18px;
    background: linear-gradient(165deg, rgba(10,22,46,.97), rgba(5,12,28,.98));
    border: 1px solid rgba(255,255,255,.10);
    box-shadow: 0 36px 72px -30px rgba(0,0,0,.92);
    backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    overflow: hidden;
}
/* ust kenarda marka gradyani */
.tb-mega-ic::before {
    content: ""; position: absolute; inset-inline: 0; top: 0; height: 2px;
    background: linear-gradient(90deg,
        transparent 0%, var(--basic-primary, #3564AF) 22%,
        #93B3D1 48%, var(--basic-secondary, #C62338) 76%, transparent 100%);
}

/* --- one cikan panel --- */
.tb-mega-one {
    position: relative;
    display: flex; flex-direction: column;
    padding: 1.3rem;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,.09);
    background:
        radial-gradient(120% 100% at 100% 0%, rgba(198,35,56,.20), transparent 62%),
        linear-gradient(160deg, rgba(53,100,175,.22), rgba(8,16,36,.5));
    overflow: hidden;
}
.tb-mega-etiket {
    font-size: .68rem; font-weight: 700; letter-spacing: .1em;
    text-transform: uppercase; color: rgba(255,255,255,.55);
    margin-bottom: .5rem;
}
.tb-mega-one h4 {
    margin: 0 0 .5rem; font-size: 1.08rem; font-weight: 700;
    color: #fff; line-height: 1.3; letter-spacing: -.015em;
}
.tb-mega-one p {
    margin: 0 0 1rem; font-size: .8rem; line-height: 1.6;
    color: rgba(255,255,255,.62);
}
.tb-mega-cta {
    margin-top: auto;
    display: inline-flex; align-items: center; gap: .45rem;
    align-self: flex-start;
    padding: .52rem 1rem;
    border-radius: 999px;
    background: linear-gradient(135deg, #E04A63, var(--basic-secondary, #C62338));
    color: #fff; font-size: .82rem; font-weight: 600; text-decoration: none;
    box-shadow: 0 8px 20px -8px rgba(198,35,56,.8);
    transition: transform .18s ease;
}
.tb-mega-cta:hover { color: #fff; transform: translateY(-1px); }

@media (max-width: 1100px) {
    .tb-mega-ic { grid-template-columns: minmax(0,1fr); }
    .tb-mega-one { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .tb-mega { transition: opacity .01s; }
    }

/* --- SIMETRIK OGE IZGARASI ------------------------------------------
   Sutun sayisi sablondan gelir (--tb-sut = oge sayisi), boylece HER
   menu tek sirada ve esit genislikte sutunlarla acilir: Hosting 4,
   Kurumsal 3, Iletisim 2 — ucu de ayni ritimde. Kartlar esit yukseklikte
   (align-items:stretch) ve ortalanmis; sagdaki one cikan panel sabit
   kalir, boylece panelin agirligi her zaman ayni yerdedir.
   -------------------------------------------------------------------- */
.tb-mega-liste {
    display: grid;
    grid-template-columns: repeat(var(--tb-sut, 3), minmax(0, 1fr));
    align-items: stretch;
    gap: .5rem;
}
.tb-mega-oge {
    position: relative;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    text-align: center;
    padding: 1.05rem .8rem 1.15rem;
    border-radius: 14px;
    text-decoration: none;
    border: 1px solid rgba(255,255,255,.07);
    background: linear-gradient(170deg, rgba(255,255,255,.045), rgba(255,255,255,.012));
    overflow: hidden;
    transition: border-color .2s ease, transform .2s ease, background .2s ease;
}
.tb-mega-oge:hover {
    border-color: rgba(53,100,175,.55);
    background: linear-gradient(170deg, rgba(53,100,175,.14), rgba(255,255,255,.02));
    transform: translateY(-3px);
}
.tb-mega-ikon {
    display: grid; place-items: center;
    width: 46px; height: 46px; margin-bottom: .7rem;
    border-radius: 13px;
    border: 1px solid rgba(53,100,175,.45);
    background: rgba(53,100,175,.16);
    color: #93B3D1; font-size: 1.18rem;
    transition: background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
}
.tb-mega-oge:hover .tb-mega-ikon {
    background: rgba(198,35,56,.18);
    border-color: rgba(198,35,56,.55);
    color: #E8808C;
    transform: scale(1.06);
}
.tb-mega-oge > b {
    font-size: .9rem; font-weight: 600; color: #fff;
    line-height: 1.3; letter-spacing: -.005em;
}
.tb-mega-ac {
    margin-top: .3rem;
    font-size: .765rem; line-height: 1.5;
    color: rgba(255,255,255,.5);
}
/* alt vurgu cizgisi: hover'da ortadan disa acilir */
.tb-mega-cizgi {
    position: absolute; left: 50%; bottom: 0;
    width: 0; height: 2px; border-radius: 2px;
    background: linear-gradient(90deg, var(--basic-primary,#3564AF), var(--basic-secondary,#C62338));
    transform: translateX(-50%);
    transition: width .26s ease;
}
.tb-mega-oge:hover .tb-mega-cizgi { width: 62%; }
/* genis liste (>4 oge, orn. Hosting 8): yatay kart — ikon solda, baslik + aciklama sagda */
.tb-mega-metin { display: flex; flex-direction: column; min-width: 0; }
.tb-mega-liste-genis { gap: .6rem; }
.tb-mega-liste-genis .tb-mega-oge { flex-direction: row; align-items: center; justify-content: flex-start; text-align: left; gap: .85rem; padding: .8rem .95rem; }
.tb-mega-liste-genis .tb-mega-ikon { flex: none; margin: 0; width: 44px; height: 44px; }
.tb-mega-liste-genis .tb-mega-oge > .tb-mega-metin > b { font-size: .92rem; }
.tb-mega-liste-genis .tb-mega-ac { margin-top: .15rem; }
/* genis listede sagdaki tanitim paneli gizlenir: 8 kart tam genislikte, basliklar tek satir */
.tb-mega-ic:has(.tb-mega-liste-genis) { grid-template-columns: minmax(0, 1fr); }
.tb-mega-ic:has(.tb-mega-liste-genis) .tb-mega-one { display: none; }
.drawer-subac { display: block; font-size: .74rem; font-weight: 400; line-height: 1.35; color: var(--tb-ink-soft, rgba(255,255,255,.55)); }

@media (max-width: 1100px) {
    .tb-mega-liste { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 620px) {
    .tb-mega-liste { grid-template-columns: minmax(0,1fr); }
}
@media (prefers-reduced-motion: reduce) {
    .tb-mega-oge:hover { transform: none; }
    .tb-mega-oge:hover .tb-mega-ikon { transform: none; }
    .tb-mega-cizgi { transition: none; }
}

/* ==================================================================
   ALAN ADI KARTI — canvas katmani + islevsel parcalar
   ------------------------------------------------------------------
   Canvas kartin zemininde durur; icerik z-index ile ustte kalir.
   Hicbir islevsel oge canvas'a bagimli degildir.
   ================================================================== */
.tb-domain { position: relative; isolation: isolate; }
.tb-domain-canvas {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    border-radius: inherit;
    pointer-events: none;
    z-index: 0;
    opacity: .9;
}
.tb-domain > *:not(.tb-domain-canvas) { position: relative; z-index: 1; }

/* --- uzanti cipleri artik <button>: tiklayinca uzantiyi degistirir --- */
.tb-domain-exts button {
    appearance: none; cursor: pointer;
    font: inherit; font-size: .78rem; font-weight: 600;
    padding: .34rem .72rem;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.14);
    background: rgba(255,255,255,.04);
    color: rgba(255,255,255,.72);
    transition: border-color .18s ease, background .18s ease, color .18s ease;
}
.tb-domain-exts button:hover {
    border-color: rgba(53,100,175,.6);
    background: rgba(53,100,175,.16);
    color: #fff;
}
.tb-domain-exts button.is-active {
    border-color: rgba(198,35,56,.65);
    background: rgba(198,35,56,.18);
    color: #fff;
}
.tb-domain-exts button:focus-visible {
    outline: 2px solid var(--basic-primary, #3564AF); outline-offset: 2px;
}

/* --- canli oneri satiri --- */
.tb-domain-oneriler {
    display: flex; flex-wrap: wrap; gap: .4rem;
    margin-top: .7rem;
}
.tb-domain-oneriler[hidden] { display: none; }
.tb-domain-oner {
    display: inline-flex; align-items: baseline; gap: .1rem;
    padding: .4rem .8rem;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.1);
    background: rgba(255,255,255,.035);
    text-decoration: none;
    font-size: .82rem;
    transition: border-color .18s ease, background .18s ease, transform .18s ease;
}
.tb-domain-oner b    { color: #fff; font-weight: 600; }
.tb-domain-oner span { color: #93B3D1; font-weight: 600; }
.tb-domain-oner:hover {
    border-color: rgba(53,100,175,.55);
    background: rgba(53,100,175,.14);
    transform: translateY(-1px);
}
.tb-domain-oner:focus-visible {
    outline: 2px solid var(--basic-primary, #3564AF); outline-offset: 2px;
}


@media (prefers-reduced-motion: reduce) {
    .tb-domain-oner:hover { transform: none; }
}

/* ==================================================================
   HIZMETLER BOLUMU
   ------------------------------------------------------------------
   SIMETRI: sutun sayisi kart sayisina esitlenir (--tb-sut), kartlar
   esit yukseklikte; fiyat ve eylem satiri margin-top:auto ile kartin
   dibine kilitlenir — aciklamalar farkli uzunlukta olsa da alt hizalar
   ayni kalir.

   RENK: tema hem acik hem KOYU kipte calisiyor ([data-bs-theme="dark"]).
   Ilk yazimimda renkleri koyuya sabitlemistim ve acik kipte beyaz metin
   beyaz zeminde kayboluyordu. Artik tum renkler tema degiskenlerinden
   gelir; yalnizca koyu kipe ozgu ince ayarlar ayrica verilir.
   ================================================================== */
.tb-hizmet { position: relative; isolation: isolate; overflow: hidden; }
.tb-hizmet-canvas {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    pointer-events: none; z-index: 0;
}
.tb-hizmet > .tb-shell { position: relative; z-index: 1; }

.tb-hizmet-grid {
    display: grid;
    grid-template-columns: repeat(var(--tb-sut, 4), minmax(0, 1fr));
    align-items: stretch;
    gap: clamp(.8rem, 1.5vw, 1.15rem);
}

.tb-hizmet-kart {
    position: relative;
    display: flex; flex-direction: column;
    padding: 1.5rem 1.35rem 1.4rem;
    border-radius: 18px;
    text-decoration: none;
    color: inherit;
    border: 1px solid var(--tb-line);
    background: var(--tb-surface);
    box-shadow: var(--tb-shadow);
    overflow: hidden;
    transition: border-color .22s ease, transform .22s ease, box-shadow .22s ease;
}
.tb-hizmet-kart:hover {
    border-color: rgba(53,100,175,.55);
    transform: translateY(-4px);
    box-shadow: var(--tb-shadow-lg);
}
[data-bs-theme="dark"] .tb-hizmet-kart {
    background: linear-gradient(170deg, rgba(255,255,255,.05), rgba(255,255,255,.015));
    border-color: rgba(255,255,255,.08);
}
[data-bs-theme="dark"] .tb-hizmet-kart:hover {
    background: linear-gradient(170deg, rgba(53,100,175,.14), rgba(255,255,255,.02));
    border-color: rgba(53,100,175,.55);
}

.tb-hizmet-ikon {
    display: grid; place-items: center;
    width: 50px; height: 50px; margin-bottom: 1rem;
    border-radius: 14px;
    border: 1px solid rgba(53,100,175,.35);
    background: rgba(53,100,175,.10);
    color: var(--basic-primary, #3564AF);
    font-size: 1.3rem;
    transition: background .22s ease, color .22s ease, border-color .22s ease, transform .22s ease;
}
[data-bs-theme="dark"] .tb-hizmet-ikon {
    border-color: rgba(53,100,175,.45);
    background: rgba(53,100,175,.16);
    color: #93B3D1;
}
.tb-hizmet-kart:hover .tb-hizmet-ikon {
    background: rgba(198,35,56,.12);
    border-color: rgba(198,35,56,.45);
    color: var(--basic-secondary, #C62338);
    transform: scale(1.06);
}
[data-bs-theme="dark"] .tb-hizmet-kart:hover .tb-hizmet-ikon {
    background: rgba(198,35,56,.18);
    border-color: rgba(198,35,56,.55);
    color: #E8808C;
}

.tb-hizmet-kart h3 {
    margin: 0 0 .4rem;
    font-size: 1.02rem; font-weight: 700;
    color: var(--tb-ink);
    line-height: 1.3; letter-spacing: -.01em;
}
.tb-hizmet-kart p {
    margin: 0 0 .9rem;
    font-size: .82rem; line-height: 1.6;
    color: var(--tb-ink-soft);
}

.tb-hizmet-adet {
    align-self: flex-start;
    margin-bottom: 1rem;
    padding: .22rem .6rem;
    border-radius: 999px;
    border: 1px solid var(--tb-line);
    background: var(--tb-surface-2);
    font-size: .7rem; font-weight: 600; letter-spacing: .02em;
    color: var(--tb-ink-soft);
}
[data-bs-theme="dark"] .tb-hizmet-adet {
    border-color: rgba(255,255,255,.12);
    background: rgba(255,255,255,.04);
}

/* fiyat ve eylem: kartin dibine kilitli -> alt hizalar her kartta ayni */
.tb-hizmet-fiyat {
    margin-top: auto;
    display: flex; align-items: baseline; gap: .3rem;
    padding-top: .9rem;
    border-top: 1px solid var(--tb-line);
}
.tb-hizmet-fiyat small { font-size: .74rem; color: var(--tb-ink-soft); }
.tb-hizmet-fiyat b     { font-size: 1.32rem; font-weight: 700; color: var(--tb-ink); letter-spacing: -.02em; }

/* fiyati olmayan kart da ayni dibe otursun */
.tb-hizmet-kart > .tb-hizmet-git { margin-top: auto; }
.tb-hizmet-fiyat ~ .tb-hizmet-git { margin-top: .85rem; }

.tb-hizmet-git {
    display: inline-flex; align-items: center; gap: .4rem;
    font-size: .84rem; font-weight: 600;
    color: var(--basic-primary, #3564AF);
    transition: color .2s ease, gap .2s ease;
}
[data-bs-theme="dark"] .tb-hizmet-git { color: #93B3D1; }
.tb-hizmet-kart:hover .tb-hizmet-git { color: var(--basic-secondary, #C62338); gap: .62rem; }
[data-bs-theme="dark"] .tb-hizmet-kart:hover .tb-hizmet-git { color: #E8808C; }

.tb-hizmet-cizgi {
    position: absolute; left: 50%; bottom: 0;
    width: 0; height: 2px; border-radius: 2px;
    background: linear-gradient(90deg, var(--basic-primary,#3564AF), var(--basic-secondary,#C62338));
    transform: translateX(-50%);
    transition: width .3s ease;
}
.tb-hizmet-kart:hover .tb-hizmet-cizgi { width: 68%; }

@media (max-width: 1100px) { .tb-hizmet-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 600px)  { .tb-hizmet-grid { grid-template-columns: minmax(0,1fr); } }
@media (prefers-reduced-motion: reduce) {
    .tb-hizmet-kart:hover { transform: none; }
    .tb-hizmet-kart:hover .tb-hizmet-ikon { transform: none; }
    .tb-hizmet-cizgi { transition: none; }
}

/* ==================================================================
   ACIK / KOYU KIP ANAHTARI
   Baslik her iki kipte de koyu zeminde durdugu icin dugme beyaz
   tonlarindadir; etkin kipe gore yalnizca bir ikon gosterilir.
   ================================================================== */
.tb-kip {
    display: inline-grid; place-items: center;
    width: 38px; height: 38px;
    border-radius: 11px;
    border: 1px solid rgba(255,255,255,.16);
    background: rgba(255,255,255,.05);
    color: rgba(255,255,255,.82);
    cursor: pointer;
    transition: background .18s ease, border-color .18s ease, color .18s ease;
}
.tb-kip:hover { background: rgba(255,255,255,.1); color: #fff; border-color: rgba(255,255,255,.3); }
.tb-kip:focus-visible { outline: 2px solid var(--basic-primary,#3564AF); outline-offset: 2px; }
.tb-kip[hidden] { display: none; }
.tb-kip i { grid-area: 1 / 1; font-size: .95rem; line-height: 1; }
/* acik kipte ay, koyu kipte gunes gosterilir: "neye gececegin" ikonu */
.tb-kip [data-tb-kip-acik] { display: none; }
[data-bs-theme="dark"] .tb-kip [data-tb-kip-acik] { display: block; }
[data-bs-theme="dark"] .tb-kip [data-tb-kip-koyu] { display: none; }

/* ==================================================================
   FOOTER — referans tasarim
   ------------------------------------------------------------------
   Footer HER IKI KIPTE DE koyudur (referanstaki gibi); kurumsal
   kapanis blogu olarak calisir. Bu yuzden ic renkler tema
   degiskenlerine degil, kendi koyu paletine baglidir — kip
   degisiminde sirtmaz cunku zemini zaten sabit koyudur.
   ================================================================== */
.tb-footer {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: linear-gradient(180deg, #0A1526 0%, #060D1A 100%);
    color: rgba(255,255,255,.72);
    padding-top: clamp(2.2rem, 4vw, 3.4rem);
}
.tb-footer-canvas {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    pointer-events: none; z-index: 0;
}
.tb-footer > .tb-shell { position: relative; z-index: 1; }

/* --- 1) ISTATISTIK SERIDI ------------------------------------- */
.tb-fstat {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr)) auto;
    align-items: center;
    gap: 0;
    padding: 1.1rem 1.4rem;
    border-radius: 16px;
    border: 1px solid rgba(120,170,235,.22);
    background: linear-gradient(135deg, rgba(20,42,78,.55), rgba(10,21,42,.5));
    box-shadow: 0 24px 60px -34px rgba(0,0,0,.9);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    margin-bottom: clamp(2rem, 3.6vw, 3rem);
}
.tb-fstat-oge {
    display: flex; align-items: center; gap: .8rem;
    padding-inline: 1.1rem;
}
.tb-fstat-oge + .tb-fstat-oge,
.tb-fstat-slogan { border-inline-start: 1px solid rgba(255,255,255,.1); }

.tb-fstat-ikon {
    display: grid; place-items: center;
    width: 44px; height: 44px; flex: 0 0 44px;
    border-radius: 12px;
    border: 1px solid rgba(120,170,235,.3);
    background: rgba(53,100,175,.18);
    color: #AFCDF0; font-size: 1.12rem;
}
.tb-fstat-oge > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.tb-fstat-oge b     { font-size: 1.18rem; font-weight: 700; color: #fff; letter-spacing: -.01em; line-height: 1.15; }
.tb-fstat-oge small { font-size: .76rem; color: rgba(255,255,255,.55); margin-top: .1rem; }

/* el yazisi slogan: referanstaki gibi egik, altinda kirmizi vurgu */
.tb-fstat-slogan {
    margin: 0;
    padding-inline: 1.4rem;
    font-family: Georgia, "Times New Roman", serif;
    font-style: italic;
    font-size: .92rem;
    line-height: 1.45;
    color: rgba(255,255,255,.88);
    position: relative;
    white-space: nowrap;
}
.tb-fstat-slogan::after {
    content: "";
    position: absolute; left: 1.4rem; right: .6rem; bottom: -.1rem;
    height: 2px; border-radius: 2px;
    background: linear-gradient(90deg, transparent, var(--basic-secondary, #C62338) 35%, #E8566F 85%, transparent);
}

/* --- 2) ANA ALAN ---------------------------------------------- */
.tb-footer-grid {
    display: grid;
    /* marka + 5 menu sutunu (Hosting, Sunucu, Alan Adi ve E-Posta, Kurumsal, Destek) */
    grid-template-columns: minmax(0, 1.3fr) repeat(5, minmax(0, 1fr));
    gap: 0;                                   /* ayrac bosluk yerine cizgi */
    padding-bottom: clamp(1.6rem, 3vw, 2.4rem);
}
/* Referanstaki DIKEY AYRAC CIZGILERI: her sutunun solunda ince bir cizgi
   (ilk sutun haric). Cizgi sutun yuksekliginin tamamina uzansin diye
   gap yerine padding + border kullanildi. */
.tb-footer-grid > * { padding-inline: clamp(1rem, 2.2vw, 2.1rem); }
.tb-footer-grid > *:first-child { padding-inline-start: 0; }
.tb-footer-grid > *:last-child  { padding-inline-end: 0; }
.tb-footer-grid > * + * { border-inline-start: 1px solid rgba(255,255,255,.1); }
.tb-footer-logo img { height: 42px; width: auto; display: block; margin-bottom: 1rem; }
.tb-footer-marka address {
    margin: 0 0 1.1rem;
    font-style: normal;
    font-size: .84rem; line-height: 1.75;
    color: rgba(255,255,255,.58);
}
.tb-footer-marka address a { color: inherit; text-decoration: none; }
.tb-footer-marka address a:hover { color: #fff; }

.tb-social { display: flex; flex-wrap: wrap; gap: .5rem; }
.tb-social a {
    display: grid; place-items: center;
    width: 38px; height: 38px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,.14);
    background: rgba(255,255,255,.05);
    color: rgba(255,255,255,.78);
    font-size: .92rem; text-decoration: none;
    transition: background .18s ease, border-color .18s ease, color .18s ease, transform .18s ease;
}
.tb-social a:hover {
    background: var(--basic-primary, #3564AF);
    border-color: var(--basic-primary, #3564AF);
    color: #fff; transform: translateY(-2px);
}

.tb-footer-col h3 {
    margin: 0 0 .9rem;
    font-size: .95rem; font-weight: 700; color: #fff;
    letter-spacing: -.005em;
    /* eski kuralda text-transform:uppercase vardi ve ayni ozgullukte
       oldugu icin burada SIFIRLANMASI gerekiyor — referansta basliklar
       normal yazimda. */
    text-transform: none;
}
.tb-footer-col a {
    display: block;
    padding: .28rem 0;
    font-size: .84rem;
    color: rgba(255,255,255,.58);
    text-decoration: none;
    transition: color .16s ease, padding-inline-start .16s ease;
    overflow-wrap: break-word; hyphens: auto;   /* uzun Rusca/Almanca adlar sutunu tasirmasin */
}
.tb-footer-col a:hover { color: #fff; padding-inline-start: .3rem; }

/* --- 3) ALT SERIT --------------------------------------------- */
.tb-footer-bottom {
    display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 1.4rem;
    padding-block: 1.1rem;
    border-top: 1px solid rgba(255,255,255,.09);
    font-size: .8rem;
    color: rgba(255,255,255,.5);
}
.tb-footer-bottom nav {
    margin-inline-start: auto;
    display: flex; flex-wrap: wrap; align-items: center;
    gap: .5rem 0;
}
/* referanstaki gibi baglantilar arasi dikey ayrac */
.tb-footer-bottom nav a { padding-inline: 1.15rem; }
.tb-footer-bottom nav a:last-child { padding-inline-end: 0; }
.tb-footer-bottom nav a + a { border-inline-start: 1px solid rgba(255,255,255,.14); }
.tb-footer-bottom nav a {
    color: rgba(255,255,255,.55); text-decoration: none;
    transition: color .16s ease;
}
.tb-footer-bottom nav a:hover { color: #fff; }

.tb-yukari {
    display: grid; place-items: center;
    width: 40px; height: 40px;
    border-radius: 50%;
    border: 1px solid rgba(120,170,235,.3);
    background: rgba(53,100,175,.16);
    color: #AFCDF0;
    cursor: pointer;
    transition: background .18s ease, color .18s ease, transform .18s ease;
}
.tb-yukari:hover { background: var(--basic-primary, #3564AF); color: #fff; transform: translateY(-2px); }
.tb-yukari:focus-visible { outline: 2px solid var(--basic-primary, #3564AF); outline-offset: 3px; }

/* 1101-1280: alti sutun sigmiyor (Rusca "Профессиональная" kelimenin
   ortasindan kiriliyordu). Marka blogu ustte yatay bir satir olur,
   bes menu sutunu tum genisligi paylasir. */
@media (min-width: 1101px) and (max-width: 1280px) {
    .tb-footer-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); row-gap: 1.6rem; }
    .tb-footer-marka {
        grid-column: 1 / -1;
        display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2.5rem;
        padding-bottom: 1.6rem; border-bottom: 1px solid rgba(255,255,255,.1);
    }
    .tb-footer-marka address, .tb-footer-logo img { margin: 0; }
    .tb-footer-grid > .tb-footer-col:nth-child(2) { padding-inline-start: 0; border-inline-start: 0; }
}
@media (max-width: 1100px) {
    .tb-fstat { grid-template-columns: repeat(2, minmax(0,1fr)); gap: .9rem; }
    .tb-fstat-oge + .tb-fstat-oge { border-inline-start: 0; }
    .tb-fstat-slogan { grid-column: 1 / -1; border-inline-start: 0; padding-inline: 1.1rem; white-space: normal; }
    .tb-footer-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
    .tb-footer-grid > * { padding-inline: 0; border-inline-start: 0; }
    .tb-footer-grid { gap: 1.6rem; }
    .tb-footer-marka { grid-column: 1 / -1; }
}
@media (max-width: 620px) {
    .tb-fstat { grid-template-columns: minmax(0,1fr); }
    .tb-footer-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
    .tb-footer-grid > * { padding-inline: 0; border-inline-start: 0; }
    .tb-footer-grid { gap: 1.6rem; }
    .tb-footer-bottom nav a { padding-inline: 0 1.1rem; }
    .tb-footer-bottom nav a + a { border-inline-start: 0; }
    .tb-footer-bottom nav { margin-inline-start: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .tb-social a:hover, .tb-yukari:hover { transform: none; }
    .tb-footer-col a:hover { padding-inline-start: 0; }
}

/* ==================================================================
   CTA — ortalanmis duzen + NEON KAYAN CERCEVE
   ------------------------------------------------------------------
   Cerceve, alan adi kartiyla ayni teknikle cizilir: donen bir
   conic-gradient, mask-composite ile yalnizca kenarda birakilir.
   --tb-neon-aci zaten tanimli (bkz. yukarisi), yeniden tanimlanmaz.

   Renkler MARKA PALETINDEN: mavi #3564AF, kirmizi #C62338,
   yesil #0AA74B, turuncu #F1B71C. Dort renk cember boyunca sirayla
   dolasir, boylece kayan cizgi palet disina cikmaz.
   ================================================================== */
.tb-cta {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    border-radius: 22px;
    padding: clamp(2.2rem, 5vw, 3.4rem);
    color: #fff;
    background:
        radial-gradient(120% 140% at 0% 0%, #16325C 0%, transparent 55%),
        linear-gradient(118deg, #0D1E3C 0%, #2B5695 48%, #7E1B2C 100%);
    box-shadow: 0 34px 80px -46px rgba(0,0,0,.9);
}
.tb-cta-canvas {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    pointer-events: none; z-index: 0;
}

/* --- neon kayan cerceve --- */
.tb-cta::before {
    content: "";
    position: absolute; inset: 0;
    border-radius: inherit;
    padding: 1.5px;                       /* cerceve kalinligi */
    background: conic-gradient(from var(--tb-neon-aci),
        rgba(53,100,175,0) 0deg,
        #3564AF 42deg,
        rgba(53,100,175,0) 86deg,
        rgba(198,35,56,0) 112deg,
        #C62338 154deg,
        rgba(198,35,56,0) 198deg,
        rgba(10,167,75,0) 224deg,
        #0AA74B 264deg,
        rgba(10,167,75,0) 304deg,
        rgba(241,183,28,0) 322deg,
        #F1B71C 344deg,
        rgba(241,183,28,0) 360deg);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    animation: tb-neon-don 6s linear infinite;
    pointer-events: none;
    z-index: 2;
}
/* cercevenin disina tasan yumusak parlama */
.tb-cta::after {
    content: "";
    position: absolute; inset: -1px;
    border-radius: inherit;
    background: conic-gradient(from var(--tb-neon-aci),
        rgba(53,100,175,0) 0deg, rgba(53,100,175,.5) 42deg, rgba(53,100,175,0) 86deg,
        rgba(198,35,56,0) 112deg, rgba(198,35,56,.5) 154deg, rgba(198,35,56,0) 198deg,
        rgba(10,167,75,0) 224deg, rgba(10,167,75,.45) 264deg, rgba(10,167,75,0) 304deg,
        rgba(241,183,28,0) 322deg, rgba(241,183,28,.45) 344deg, rgba(241,183,28,0) 360deg);
    filter: blur(11px);
    opacity: .5;
    animation: tb-neon-don 6s linear infinite;
    pointer-events: none;
    z-index: 0;
}

/* --- ORTALANMIS ICERIK --- */
.tb-cta-ic {
    position: relative; z-index: 1;
    display: flex; flex-direction: column; align-items: center;
    text-align: center;
    max-width: 62ch; margin-inline: auto;
}
.tb-cta-etiket {
    display: inline-flex; align-items: center; gap: .45rem;
    padding: .32rem .82rem;
    margin-bottom: 1rem;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.24);
    background: rgba(255,255,255,.09);
    font-size: .71rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
    color: rgba(255,255,255,.92);
}
.tb-cta-etiket i { font-size: .8rem; color: #8FD3A8; }

.tb-cta h2 {
    margin: 0 0 .6rem;
    font-size: clamp(1.55rem, 1.1rem + 1.7vw, 2.3rem);
    font-weight: 800; letter-spacing: -.028em; color: #fff;
}
.tb-cta p {
    margin: 0 0 1.6rem;
    color: rgba(255,255,255,.8); line-height: 1.65;
}

.tb-cta-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .7rem; }
.tb-cta .tb-btn { transition: transform .18s ease, box-shadow .18s ease, background .18s ease; }
.tb-cta .tb-btn:hover { transform: translateY(-2px); }
.tb-cta .tb-btn-solid {
    background: #fff; color: #10203A; border: 1px solid #fff;
    box-shadow: 0 14px 30px -14px rgba(0,0,0,.65);
}
.tb-cta .tb-btn-solid:hover { box-shadow: 0 18px 38px -14px rgba(0,0,0,.85); }
.tb-cta .tb-btn-light {
    background: rgba(255,255,255,.08);
    color: #fff;
    border: 1px solid rgba(255,255,255,.4);
    box-shadow: none;
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
.tb-cta .tb-btn-light:hover {
    background: rgba(255,255,255,.17);
    border-color: rgba(255,255,255,.68);
    color: #fff;
}

@media (prefers-reduced-motion: reduce) {
    .tb-cta::before, .tb-cta::after { animation: none; }
    .tb-cta .tb-btn:hover { transform: none; }
}

/* ==================================================================
   NEDEN TURKBIL — referans tasarim
   ------------------------------------------------------------------
   Duzen: tanitim blogu (1.15fr) + 3 esit kart.
   Her kart kendi vurgu rengini --tb-c1/--tb-c2 ile tasir; kenarlik,
   ikon gradyani, baglanti rengi ve kose isigi hep o renkten uretilir
   — boylece yeni bir kart eklendiginde tek satir renk yeterli olur.

   Kartlar HER IKI KIPTE de koyudur (referanstaki gibi): kendi kapali
   yuzeyleri olduklari icin kip degisiminde sirtmazlar.
   ================================================================== */
.tb-neden { position: relative; overflow: hidden; }
.tb-neden > .tb-shell { position: relative; z-index: 1; }

.tb-why {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) repeat(3, minmax(0, 1fr));
    gap: clamp(.9rem, 1.8vw, 1.35rem);
    align-items: stretch;
}

/* --- tanitim blogu --- */
.tb-why-intro { display: flex; flex-direction: column; justify-content: center; padding-inline-end: .6rem; }
.tb-neden-ust {
    display: inline-flex; align-items: center; gap: .5rem;
    align-self: flex-start;      /* hap icerigini sarsin, sutuna yayilmasin */
    margin-bottom: 1rem;
    padding: .34rem .85rem;
    border-radius: 999px;
    border: 1px solid rgba(198, 35, 56, 0.320);
    border: 1px solid color-mix(in srgb, var(--basic-secondary, #C62338) 32%, transparent);
    background: rgba(198, 35, 56, 0.080);
    background: color-mix(in srgb, var(--basic-secondary, #C62338) 8%, transparent);
    font-family: var(--tb-font-baslik);
    font-size: .74rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
    color: var(--basic-secondary, #C62338);
}
[data-bs-theme="dark"] .tb-neden-ust {
    border-color: rgba(198, 35, 56, 0.450);
    border-color: color-mix(in srgb, var(--basic-secondary, #C62338) 45%, transparent);
    background: rgba(198, 35, 56, 0.150);
    background: color-mix(in srgb, var(--basic-secondary, #C62338) 15%, transparent);
    color: #F08A98;
}
.tb-neden-ust img { display: block; }
/* Kisa marka cubugu: uc koyu kartin yanindaki metin sutununa gorsel
   agirlik verir; bolumun nerede basladigini isaretler. */
.tb-neden-cubuk {
    display: block;
    align-self: flex-start;      /* dikey flex'te gerilmesin */
    width: 46px; height: 4px; border-radius: 4px;
    margin-bottom: 1.1rem;
    background: linear-gradient(90deg, var(--basic-secondary, #C62338), var(--basic-primary, #3564AF));
}

.tb-why-intro h2 {
    margin: 0 0 .85rem;
    font-size: clamp(1.4rem, 1rem + 1.35vw, 1.95rem);
    font-weight: 800; letter-spacing: -.03em; line-height: 1.18;
    color: var(--tb-ink);
    text-wrap: balance;
}
.tb-why-intro p {
    margin: 0 0 1.7rem;
    font-size: .9rem; line-height: 1.75;
    color: var(--tb-ink-soft);
    max-width: 42ch;
}
.tb-neden-btn {
    align-self: flex-start;
    display: inline-flex; align-items: center; gap: .6rem;
    padding: .78rem 1.55rem;
    border-radius: 999px;
    border: 0;
    background: linear-gradient(135deg, #E04A63, var(--basic-secondary, #C62338));
    color: #fff;
    font-family: var(--tb-font-baslik);
    font-size: .9rem; font-weight: 600; letter-spacing: .005em; text-decoration: none;
    box-shadow: 0 14px 30px -14px rgba(198, 35, 56, 0.900);
    box-shadow: 0 14px 30px -14px color-mix(in srgb, var(--basic-secondary, #C62338) 90%, transparent);
    transition: transform .2s ease, box-shadow .2s ease, gap .2s ease;
}
.tb-neden-btn:hover {
    color: #fff; gap: .85rem;
    transform: translateY(-2px);
    box-shadow: 0 20px 40px -16px rgba(198, 35, 56, 0.950);
    box-shadow: 0 20px 40px -16px color-mix(in srgb, var(--basic-secondary, #C62338) 95%, transparent);
}
.tb-neden-btn i { font-size: .85rem; }

/* --- vurgu kartlari (her iki kipte de koyu) --- */
.tb-why-card {
    position: relative;
    display: flex; flex-direction: column;
    padding: 1.6rem 1.4rem 1.4rem;
    border-radius: 18px;
    text-decoration: none;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--tb-c1) 45%, transparent);
    background:
        radial-gradient(120% 90% at 100% 0%, color-mix(in srgb, var(--tb-c1) 26%, transparent), transparent 62%),
        linear-gradient(165deg, #121E33 0%, #0B1424 100%);
    box-shadow: 0 22px 54px -34px rgba(0,0,0,.85);
    transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}
.tb-why-card:hover {
    transform: translateY(-4px);
    border-color: color-mix(in srgb, var(--tb-c1) 78%, transparent);
    box-shadow: 0 30px 64px -30px color-mix(in srgb, var(--tb-c2) 55%, rgba(0,0,0,.85));
}

/* Kart canvas'i: zeminde durur, icerik z-index ile ustunde kalir.
   Statik CSS huzmesinin yerini aldi — ayni etkiyi iki kez cizmemek icin
   o kural kaldirildi. */
.tb-why-canvas {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    pointer-events: none; z-index: 0;
    border-radius: inherit;
}

.tb-why-ikon {
    position: relative; z-index: 1;
    display: grid; place-items: center;
    width: 56px; height: 56px; margin-bottom: 1.1rem;
    border-radius: 16px;
    background: linear-gradient(145deg, var(--tb-c1), var(--tb-c2));
    box-shadow: 0 12px 26px -12px color-mix(in srgb, var(--tb-c2) 75%, transparent),
                inset 0 1px 0 rgba(255,255,255,.3);
}
/* Ikonlar artik PNG degil Bootstrap Icons: uc PNG de BIREBIR AYNI
   dosyaydi (md5 esit) ve ucunde de ayni anlamsiz sekil cikiyordu.
   Yazi tipi ikonu hem keskin hem her olcekte net. */
.tb-why-ikon i { font-size: 1.45rem; color: #fff; line-height: 1; }

.tb-why-card h3 {
    position: relative; z-index: 1;
    margin: 0 0 .5rem;
    font-size: 1.05rem; font-weight: 700; color: #fff;
    letter-spacing: -.012em;
}
.tb-why-card p {
    position: relative; z-index: 1;
    margin: 0 0 1.2rem;
    font-size: .82rem; line-height: 1.65;
    color: rgba(255,255,255,.62);
}
.tb-why-git {
    position: relative; z-index: 1;
    margin-top: auto;
    display: inline-flex; align-items: center; gap: .35rem;
    font-size: .83rem; font-weight: 600;
    color: var(--tb-c1);
    transition: gap .2s ease;
}
.tb-why-card:hover .tb-why-git { gap: .6rem; }

@media (max-width: 1100px) {
    .tb-why { grid-template-columns: repeat(2, minmax(0,1fr)); }
    .tb-why-intro { grid-column: 1 / -1; padding-inline-end: 0; }
}
@media (max-width: 620px) {
    .tb-why { grid-template-columns: minmax(0,1fr); }
}
@media (prefers-reduced-motion: reduce) {
    .tb-why-card:hover { transform: none; }
}

/* ==================================================================
   HAKKIMIZDA — marka kimligi sayfasi
   ------------------------------------------------------------------
   Giris her iki kipte de koyudur (marka blogu). Palet ve tipografi
   bolumleri tema degiskenleriyle calisir, kip degisiminde sirtmaz.
   ================================================================== */
.tb-mk-hero {
    position: relative; isolation: isolate; overflow: hidden;
    padding-block: clamp(3.8rem, 8vw, 6.6rem);
    min-height: clamp(380px, 46vh, 520px);
    display: flex; align-items: center;
    background:
        radial-gradient(110% 150% at 8% 0%, #163158 0%, transparent 60%),
        linear-gradient(135deg, #0B1A33 0%, #0A1526 52%, #22121E 100%);
    color: #fff;
}
/* ust kenarda ince marka vurgusu */
.tb-mk-hero::after {
    content: ""; position: absolute; inset-inline: 0; bottom: 0; height: 1px; z-index: 2;
    background: linear-gradient(90deg, transparent, rgba(150,195,255,.6) 28%, rgba(255,255,255,.4) 52%, rgba(232,110,130,.7) 76%, transparent);
}
.tb-mk-ic { max-width: 62ch; }
.tb-mk-canvas {
    position: absolute; inset: 0; width: 100%; height: 100%;
    pointer-events: none; z-index: 0;
}
.tb-mk-hero > .tb-shell { position: relative; z-index: 1; }

.tb-mk-etiket {
    display: inline-flex; align-items: center; gap: .45rem;
    padding: .34rem .9rem; margin-bottom: 1.1rem;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.24);
    background: rgba(255,255,255,.08);
    font-family: var(--tb-font-baslik);
    font-size: .74rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
    color: rgba(255,255,255,.92);
}
.tb-mk-etiket i { color: #8FD3A8; font-size: .82rem; }

.tb-mk-hero h1 {
    margin: 0 0 .8rem;
    font-family: var(--tb-font-baslik);
    font-size: clamp(1.9rem, 1.2rem + 2.6vw, 3.1rem);
    font-weight: 700; letter-spacing: -.03em; color: #fff;
}
.tb-mk-hero p {
    margin: 0; max-width: 56ch;
    font-size: 1rem; line-height: 1.7;
    color: rgba(255,255,255,.76);
}


/* hero'daki kucuk rakam kutulari */
.tb-mk-kutular {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .6rem;
    margin-top: 2rem;
    max-width: 640px;
}
.tb-mk-kutular > div {
    padding: .85rem .9rem;
    border-radius: 13px;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.055);
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.tb-mk-kutular b {
    display: block;
    font-family: var(--tb-font-baslik);
    font-size: 1.32rem; font-weight: 700; color: #fff; letter-spacing: -.02em;
}
.tb-mk-kutular small {
    display: block; margin-top: .12rem;
    font-size: .74rem; color: rgba(255,255,255,.58);
}
@media (max-width: 620px) {
    .tb-mk-kutular { grid-template-columns: repeat(2, minmax(0,1fr)); }
}

/* ==================================================================
   HAKKIMIZDA — misyon / vizyon / degerler
   Tema degiskenleriyle calisir; iki kipte de dogru okunur.
   ================================================================== */
.tb-mv { padding-block: clamp(2.4rem, 5vw, 4rem); }

.tb-mv-ikili {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(.9rem, 2vw, 1.4rem);
}
.tb-mv-kart {
    position: relative;
    padding: clamp(1.5rem, 2.6vw, 2.1rem);
    border-radius: 20px;
    border: 1px solid var(--tb-line);
    background: var(--tb-surface);
    box-shadow: var(--tb-shadow);
    overflow: hidden;
}
[data-bs-theme="dark"] .tb-mv-kart { border-color: rgba(255,255,255,.1); }
/* ust kenarda kartin kendi rengi */
.tb-mv-kart::before {
    content: ""; position: absolute; inset-inline: 0; top: 0; height: 3px;
    background: linear-gradient(90deg, var(--tb-mv), color-mix(in srgb, var(--tb-mv) 25%, transparent));
}
.tb-mv-ikon {
    display: grid; place-items: center;
    width: 48px; height: 48px; margin-bottom: 1.1rem;
    border-radius: 14px;
    color: #fff; font-size: 1.25rem;
    background: linear-gradient(145deg, var(--tb-mv), color-mix(in srgb, var(--tb-mv) 70%, #000));
    box-shadow: 0 12px 26px -14px var(--tb-mv);
}
.tb-mv-etiket {
    display: block; margin-bottom: .35rem;
    font-family: var(--tb-font-baslik);
    font-size: .74rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
    color: var(--tb-mv);
}
.tb-mv-kart h2 {
    margin: 0 0 .7rem;
    font-family: var(--tb-font-baslik);
    font-size: clamp(1.2rem, .95rem + .9vw, 1.6rem);
    font-weight: 700; letter-spacing: -.025em; line-height: 1.25;
    color: var(--tb-ink);
}
.tb-mv-kart p { margin: 0; line-height: 1.75; color: var(--tb-ink-soft); font-size: .92rem; }

.tb-mv-baslik { text-align: center; margin: clamp(2.6rem, 5vw, 4rem) 0 2rem; }
.tb-mv-baslik h2 {
    margin: .4rem 0 0;
    font-family: var(--tb-font-baslik);
    font-size: clamp(1.35rem, 1rem + 1.3vw, 1.9rem);
    font-weight: 700; letter-spacing: -.025em;
    color: var(--tb-ink);
}

.tb-mv-degerler {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(.8rem, 1.8vw, 1.3rem);
}
.tb-mv-deger {
    position: relative;
    padding: 1.4rem 1.3rem 1.3rem;
    border-radius: 16px;
    border: 1px solid var(--tb-line);
    background: var(--tb-surface-2);
}
[data-bs-theme="dark"] .tb-mv-deger {
    border-color: rgba(255,255,255,.09);
    background: rgba(255,255,255,.035);
}
.tb-mv-no {
    display: block; margin-bottom: .7rem;
    font-family: var(--tb-font-baslik);
    font-size: 1.6rem; font-weight: 700; letter-spacing: -.03em;
    color: rgba(53, 100, 175, 0.550);
    color: color-mix(in srgb, var(--basic-primary, #3564AF) 55%, transparent);
}
.tb-mv-deger h3 {
    margin: 0 0 .45rem;
    font-family: var(--tb-font-baslik);
    font-size: .98rem; font-weight: 700; letter-spacing: -.012em;
    color: var(--tb-ink);
}
.tb-mv-deger p { margin: 0; font-size: .84rem; line-height: 1.65; color: var(--tb-ink-soft); }

@media (max-width: 900px) {
    .tb-mv-ikili    { grid-template-columns: minmax(0,1fr); }
    .tb-mv-degerler { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 560px) {
    .tb-mv-degerler { grid-template-columns: minmax(0,1fr); }
}

/* ==================================================================
   GIRIS SAHNESI
   ------------------------------------------------------------------
   Iki sutun: solda canvas destekli marka panosu, sagda mevcut giris
   karti. Kartin ICI degistirilmedi — coklu adimlar aynen calisir;
   yalnizca kabuk, zemin ve form gorunumu ana sayfa diline cekildi.

   Sahne her iki kipte de koyudur (kapali bir sahne gibi davranir),
   bu yuzden kip degisiminde sirtmaz.
   ================================================================== */
.tb-giris {
    position: relative; isolation: isolate; overflow: hidden;
    /* Onceki surumde min-height:calc(100vh-120px) vardi; sahne 693px
       cikiyor, basliik+altbilgiyle sayfa 1302px'e ulasip pencereye
       sigmiyordu (olculdu). Artik sabit ve olculu bir yukseklik. */
    min-height: 480px;
    display: grid; place-items: center;
    padding: clamp(1.1rem, 2.4vw, 2rem) 0;
    background:
        radial-gradient(100% 120% at 20% 10%, #16325C 0%, transparent 58%),
        linear-gradient(140deg, #0B1A33 0%, #0A1526 55%, #20121D 100%);
}
.tb-giris-canvas {
    position: absolute; inset: 0; width: 100%; height: 100%;
    pointer-events: none; z-index: 0;
}
.tb-giris-ic {
    position: relative; z-index: 1;
    width: 100%; max-width: 1040px;
    margin-inline: auto; padding-inline: var(--tb-gutter, 20px);
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
    gap: clamp(1.5rem, 4vw, 3.5rem);
    align-items: center;
}

/* --- sol pano --- */
.tb-giris-pano { color: #fff; }
.tb-giris-pano h2 {
    margin: 0 0 .8rem;
    font-family: var(--tb-font-baslik);
    font-size: clamp(1.45rem, 1.05rem + 1.4vw, 2.1rem);
    font-weight: 700; letter-spacing: -.03em; line-height: 1.16;
    color: #fff;
}
.tb-giris-pano > p {
    margin: 0 0 1.2rem; max-width: 42ch;
    font-size: .9rem; line-height: 1.65; color: rgba(255,255,255,.72);
}
/* --- kayit cagrisi: panonun asil isi --- */
.tb-giris-kayit {
    display: flex; flex-direction: column; align-items: flex-start;
    max-width: 23rem;
    margin-bottom: 1.4rem;
    padding: 1.1rem 1.2rem;
    border-radius: 15px;
    border: 1px solid rgba(255,255,255,.14);
    background: rgba(255,255,255,.055);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
.tb-giris-kayit b {
    font-family: var(--tb-font-baslik);
    font-size: 1rem; font-weight: 700; color: #fff; letter-spacing: -.012em;
}
.tb-giris-kayit span {
    margin: .2rem 0 .9rem;
    font-size: .83rem; line-height: 1.55; color: rgba(255,255,255,.62);
}
.tb-giris-kayit a {
    display: inline-flex; align-items: center; gap: .45rem;
    padding: .55rem 1.1rem;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.42);
    background: rgba(255,255,255,.07);
    color: #fff; font-size: .86rem; font-weight: 600; text-decoration: none;
    font-family: var(--tb-font-baslik);
    transition: background .18s ease, border-color .18s ease, gap .18s ease;
}
.tb-giris-kayit a:hover {
    background: rgba(255,255,255,.16);
    border-color: rgba(255,255,255,.7);
    color: #fff; gap: .68rem;
}

.tb-giris-not {
    display: flex; align-items: flex-start; gap: .5rem;
    margin: 0; max-width: 38ch;
    font-size: .78rem; line-height: 1.6;
    color: rgba(255,255,255,.48);
}
.tb-giris-not i { flex: 0 0 auto; margin-top: .14rem; color: #8FD3A8; font-size: .85rem; }
.tb-giris-not a { color: #93B3D1; text-decoration: none; border-bottom: 1px solid rgba(147,179,209,.4); }
.tb-giris-not a:hover { color: #fff; border-bottom-color: #fff; }


/* --- sag: giris karti --- */
.tb-giris-form .auth-card {
    max-inline-size: none;
    width: 100%;
    padding: clamp(1.3rem, 2.2vw, 1.75rem);
    border-radius: 20px;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(12, 24, 44, .72);
    box-shadow: 0 36px 80px -40px rgba(0,0,0,.95);
    backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    color: #fff;
}
/* kart icindeki hazir bilesenleri koyu zemine uyarla */
.tb-giris-form .card { background: transparent; border: 0; box-shadow: none; }
.tb-giris-form .card-body { padding: 0 !important; }
.tb-giris-form h1, .tb-giris-form h2, .tb-giris-form h3 {
    font-family: var(--tb-font-baslik); color: #fff; letter-spacing: -.02em;
}
.tb-giris-form .text-body-secondary { color: rgba(255,255,255,.6) !important; }
.tb-giris-form .form-label { color: rgba(255,255,255,.82); font-size: .86rem; font-weight: 600; }
.tb-giris-form .form-control {
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.16);
    color: #fff;
    padding: .72rem .9rem;
    border-radius: 11px;
}
.tb-giris-form .form-control::placeholder { color: rgba(255,255,255,.4); }
.tb-giris-form .form-control:focus {
    background: rgba(255,255,255,.09);
    border-color: var(--basic-primary, #3564AF);
    box-shadow: 0 0 0 3px rgba(53,100,175,.28);
    color: #fff;
}
.tb-giris-form .btn-primary {
    background: linear-gradient(135deg, #E04A63, var(--basic-secondary, #C62338));
    border: 0; border-radius: 11px; padding-block: .72rem;
    font-family: var(--tb-font-baslik); font-weight: 600; letter-spacing: .01em;
    box-shadow: 0 14px 30px -14px rgba(198,35,56,.85);
}
.tb-giris-form .btn-primary:hover { filter: brightness(1.07); }
.tb-giris-form .btn-soft {
    background: rgba(255,255,255,.07);
    border: 1px solid rgba(255,255,255,.16);
    color: #fff; border-radius: 11px;
}
.tb-giris-form .btn-soft:hover { background: rgba(255,255,255,.13); color: #fff; }
.tb-giris-form .auth-divider { color: rgba(255,255,255,.45); }
.tb-giris-form .auth-divider:before,
.tb-giris-form .auth-divider:after { border-block-start-color: rgba(255,255,255,.14); }
.tb-giris-form a { color: #93B3D1; }
.tb-giris-form a:hover { color: #fff; }
.tb-giris-form .auth-icon { background: rgba(53,100,175,.2); color: #AFCDF0; }
.tb-giris-form .otp-input.form-control { background: rgba(255,255,255,.07); color: #fff; }
.tb-giris-form .form-check-label { color: rgba(255,255,255,.72); }

@media (max-width: 900px) {
    .tb-giris-ic { grid-template-columns: minmax(0,1fr); }
    .tb-giris-pano { text-align: center; }
    .tb-giris-pano > p { margin-inline: auto; }
        .tb-giris-form { max-width: 440px; margin-inline: auto; width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
    }

/* Kart ici dikey ritim: Bootstrap'in mb-3/mb-4 bosluklari bu olcekte
   fazla genisti; kart 518px'ten ~430px'e iniyor. */
.tb-giris-form .auth-card .mb-4 { margin-bottom: 1.1rem !important; }
.tb-giris-form .auth-card .mb-3 { margin-bottom: .8rem !important; }
.tb-giris-form .auth-card .my-4 { margin-block: 1rem !important; }
.tb-giris-form .auth-card .mt-4 { margin-top: 1rem !important; }
.tb-giris-form .auth-card h1 { font-size: 1.45rem; margin-bottom: .35rem !important; }
.tb-giris-form .auth-card h2 { font-size: 1.3rem; }
.tb-giris-form .auth-card .text-body-secondary { font-size: .87rem; line-height: 1.55; }
.tb-giris-form [data-social-providers] { gap: .45rem !important; }
.tb-giris-form [data-social-providers] .btn { padding-block: .52rem; }

/* ==================================================================
   MENU SARMALANMASI — duzeltme
   ------------------------------------------------------------------
   Sorun: 992-1150px arasinda "Ana Sayfa" ve "Alan Adlari" iki satira
   boluniyordu (olculdu: 992 ve 1024px'te metin dugumu 2 satir
   dondu). Sebep iki katmanli:
     1) baglantilarda white-space:normal -> metin kirilabiliyor,
     2) .tb-nav esnek kutu; dar alanda ogeler sikisip metni sardiriyor.

   Cozum:
     - Metin HICBIR kosulda kirilmasin (nowrap).
     - Ogeler dogal genisliklerini korusun (flex-shrink:0).
     - 992-1199px araliginda bosluk ve dolgu daraltilsin ki menu
       sigsin; olculen acik ~80px, burada ~85px kazaniliyor.
   ================================================================== */
.tb-header .tb-nav > li > a {
    white-space: nowrap;      /* metin asla iki satira bolunmez */
}
.tb-header .tb-nav > li { flex: 0 0 auto; }   /* dogal genislik korunur */

@media (min-width: 992px) and (max-width: 1199.98px) {
    .tb-header .tb-nav { gap: .1rem; margin-inline-start: .4rem; }
    .tb-header .tb-nav > li > a {
        padding: .618rem .52rem;      /* .809rem -> .52rem : ~35px kazanc */
        font-size: .9rem;             /* .94rem -> .9rem   : ~20px kazanc */
    }
    .tb-header .tb-logo img { height: 38px; }
    .tb-panel-btn { padding-inline: .9rem; font-size: .86rem; }
    .tb-header .tb-shell { gap: .8rem; padding-inline: 20px; }
}

/* ==================================================================
   HOSTING AVANTAJLARI — neon sema
   ------------------------------------------------------------------
   Bolum HER IKI KIPTE de koyudur (kendi kapali sahnesi), bu yuzden
   renkler sabittir ve kip degisiminde sirtmaz.
   Hatlar CANVAS'ta, ikonlarin GERCEK konumundan hesaplanir.
   Neon dili: ust/alt kenarda marka gradyani, ikon rozetlerinde
   isiyan halka, merkezde ic ice neon cemberler.
   ================================================================== */
.tb-avantaj {
    position: relative; isolation: isolate; overflow: hidden;
    padding-block: clamp(3.2rem, 6.5vw, 5.4rem);
    /* MARKA DENGESI: sahne tamamen maviydi (olculdu: renkli alanin
       %97'si mavi). Sag alttan marka kirmizisi ISIK olarak eklendi —
       yuzey degil isik oldugu icin sahne koyu ve ciddi kalir, ama
       sayfa artik Turkbil'in rengini tasiyor. */
    background:
        radial-gradient(60% 55% at 88% 86%, rgba(198,35,56,.26), transparent 68%),
        radial-gradient(90% 70% at 42% 46%, rgba(28,56,108,.45), transparent 70%),
        linear-gradient(180deg, #060B16 0%, #0A1426 52%, #080D1C 100%);
    color: #fff;
}

/* KOYU MODDA BANT YUKSELIR, ALCALMAZ
   ------------------------------------------------------------------
   OLCUM (gercek pikselden):
     ACIK mod  sayfa #F5F6F8 · bant #0C182E -> kontrast 16.4  (guclu noktalama)
     KOYU mod  sayfa #101927 · bant #070D1A -> kontrast  1.1  (bant kayboluyor)
   Bant sabit koyu bir gradyandi; koyu modda sayfadan DAHA koyu kaliyor
   ve bolum ritmi tamamen siliniyordu — sayfa tek parca koyu bir serit
   gibi akiyordu.
   Koyu arayuzde dogru olcut kontrast orani degil AYDINLIK FARKI; oran
   bu aralikta sikisiyor (1.1 ile 1.34 arasi). Sayfa L %11; secilen
   #1B2B4A L %20, yani +9 puan — koyu arayuzde net secilen yuzey
   basamagi. Ton 220°, marka mavisinin tonunda kaliyor (turetme kurali:
   tonu koru, yalnizca aydinligi degistir).
   Kirmizi isik katmani korunuyor; taban acildigi icin mavi radyal
   biraz kisildi, yoksa yuzey yikaniyordu. */
[data-bs-theme="dark"] .tb-avantaj {
    background:
        radial-gradient(60% 55% at 88% 86%, rgba(198,35,56,.22), transparent 68%),
        radial-gradient(90% 70% at 42% 46%, rgba(28,56,108,.28), transparent 70%),
        linear-gradient(180deg, #16243D 0%, #1B2B4A 52%, #182744 100%);
}
/* ust ve alt kenarda ince neon cizgi */
.tb-avantaj::before,
.tb-avantaj::after {
    content: ""; position: absolute; inset-inline: 0; height: 1px; z-index: 2;
    background: linear-gradient(90deg,
        transparent, rgba(90,160,255,.75) 26%, rgba(255,255,255,.55) 50%,
        rgba(232,100,125,.75) 74%, transparent);
}
.tb-avantaj::before { top: 0; }
.tb-avantaj::after  { bottom: 0; }

.tb-avantaj > .tb-shell { position: relative; z-index: 1; }

.tb-avantaj-canvas {
    position: absolute; inset: 0; width: 100%; height: 100%;
    pointer-events: none; z-index: 0;
}
.tb-avantaj > .tb-shell { position: relative; z-index: 1; }

.tb-avantaj-bas { text-align: center; margin-bottom: clamp(2rem, 4vw, 3.2rem); }
.tb-avantaj-bas h2 {
    margin: 0 0 .7rem;
    font-family: var(--tb-font-baslik);
    font-size: clamp(1.5rem, 1.05rem + 1.8vw, 2.35rem);
    font-weight: 700; letter-spacing: -.025em; color: #fff;
    text-shadow: 0 0 34px rgba(110,170,255,.3);
}
.tb-avantaj-bas p {
    margin: 0 auto; max-width: 56ch;
    font-size: .94rem; line-height: 1.65; color: rgba(255,255,255,.58);
}

.tb-avantaj-sema {
    display: grid;
    grid-template-columns: minmax(0,1fr) auto minmax(0,1fr);
    align-items: center;
    gap: clamp(1rem, 3vw, 3rem);
}
.tb-avantaj-sutun { display: grid; gap: clamp(1.6rem, 3.6vw, 3.4rem); }

.tb-avantaj-oge { display: flex; align-items: flex-start; gap: 1rem; }
.tb-avantaj-sol .tb-avantaj-oge { flex-direction: row-reverse; text-align: right; }

/* --- ikon rozeti: neon halka --- */
.tb-avantaj-ikon {
    position: relative;
    flex: 0 0 auto;
    display: grid; place-items: center;
    width: 52px; height: 52px;
    border-radius: 50%;
    border: 1px solid rgba(120,175,245,.5);
    background: radial-gradient(circle at 50% 50%, rgba(28,60,112,.85), rgba(8,16,32,.9));
    color: #8CC2FF; font-size: 1.15rem;
    box-shadow: 0 0 0 1px rgba(90,150,235,.14),
                0 0 18px -4px rgba(80,150,245,.55),
                inset 0 0 14px -6px rgba(140,200,255,.8);
    transition: box-shadow .25s ease, color .25s ease, border-color .25s ease, transform .25s ease;
}
/* disa tasan ikinci halka */
.tb-avantaj-ikon::after {
    content: ""; position: absolute; inset: -7px;
    border-radius: 50%;
    border: 1px solid rgba(120,175,245,.16);
    transition: border-color .25s ease, inset .25s ease;
}
.tb-avantaj-oge:hover .tb-avantaj-ikon {
    color: #D6EBFF;
    border-color: rgba(160,210,255,.9);
    transform: scale(1.06);
    box-shadow: 0 0 0 1px rgba(120,180,255,.3),
                0 0 30px -2px rgba(90,165,255,.85),
                inset 0 0 18px -5px rgba(190,225,255,.9);
}
.tb-avantaj-oge:hover .tb-avantaj-ikon::after { border-color: rgba(150,200,255,.45); }

.tb-avantaj-metin { min-width: 0; }
.tb-avantaj-metin b {
    display: block; margin-bottom: .35rem;
    font-family: var(--tb-font-baslik);
    font-size: 1rem; font-weight: 700; color: #fff; letter-spacing: -.01em;
}
.tb-avantaj-metin p {
    margin: 0; max-width: 34ch;
    font-size: .845rem; line-height: 1.6; color: rgba(255,255,255,.55);
}
.tb-avantaj-sol .tb-avantaj-metin p { margin-inline-start: auto; }

/* --- merkez: ic ice neon cemberler --- */
.tb-avantaj-merkez {
    position: relative;
    display: flex; flex-direction: column; align-items: center;
    justify-self: center;
}
.tb-avantaj-halka,
.tb-avantaj-merkez::before,
.tb-avantaj-merkez::after {
    content: ""; position: absolute; top: 50%; left: 50%;
    border-radius: 50%; pointer-events: none;
    transform: translate(-50%, -50%);
}
.tb-avantaj-merkez::before {
    width: 300px; height: 300px;
    border: 1px solid rgba(120,175,245,.12);
}
.tb-avantaj-halka {
    width: 244px; height: 244px;
    border: 1px solid rgba(120,175,245,.3);
    box-shadow: 0 0 34px -10px rgba(80,150,245,.6),
                inset 0 0 34px -14px rgba(80,150,245,.5);
}
.tb-avantaj-merkez::after {
    width: 196px; height: 196px;
    border: 1px dashed rgba(150,200,255,.16);
}

.tb-avantaj-cekirdek {
    position: relative; z-index: 1;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .45rem;
    width: 168px; height: 168px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 28%, #1E3A6E 0%, #0F1F3F 55%, #0B1526 100%);
    border: 2px solid rgba(141,184,255,.6);
    box-shadow: 0 0 0 8px rgba(141,184,255,.07), 0 0 44px -6px rgba(90,160,255,.55),
                0 24px 54px -22px rgba(0,0,0,.85), inset 0 1px 0 rgba(255,255,255,.12);
}
.tb-avantaj-cekirdek { transition: border-color .4s ease, box-shadow .4s ease; }
/* kalp atisi: darbe rozete varinca kisa kizarma (JS .tb-av-kan ekler/kaldirir) */
.tb-avantaj-ikon { transition: box-shadow .55s ease, border-color .55s ease, color .55s ease; }
.tb-avantaj-ikon.tb-av-kan { transition-duration: .12s; border-color: rgba(200,225,255,.95); color: #fff; box-shadow: 0 0 0 3px rgba(150,196,250,.25), 0 0 26px rgba(120,180,255,.75); }
.tb-avantaj-cekirdek:hover { border-color: rgba(190,215,255,.95); box-shadow: 0 0 0 10px rgba(141,184,255,.1), 0 0 64px -4px rgba(120,180,255,.7), 0 24px 54px -22px rgba(0,0,0,.85), inset 0 1px 0 rgba(255,255,255,.14); }
.tb-avantaj-amblem { width: 60px; height: 60px; display: block; filter: drop-shadow(0 4px 14px rgba(0,0,0,.5)); }
.tb-avantaj-amblem-tuval { position: absolute; inset: 0; width: 100%; height: 100%; display: none; pointer-events: none; }
.tb-avantaj-cekirdek.tb-tuval-acik .tb-avantaj-amblem { visibility: hidden; }
.tb-avantaj-cekirdek.tb-tuval-acik .tb-avantaj-amblem-tuval { display: block; }


@media (max-width: 1100px) {
    .tb-avantaj-halka { width: 206px; height: 206px; }
    .tb-avantaj-merkez::before { width: 254px; height: 254px; }
    .tb-avantaj-merkez::after { width: 166px; height: 166px; }
    .tb-avantaj-metin p { max-width: 30ch; }
}
@media (max-width: 860px) {
    .tb-avantaj-sema { grid-template-columns: minmax(0,1fr); gap: 2rem; }
    .tb-avantaj-merkez { order: -1; }
    .tb-avantaj-sol .tb-avantaj-oge { flex-direction: row; text-align: left; }
    .tb-avantaj-sol .tb-avantaj-metin p { margin-inline-start: 0; }
    .tb-avantaj-metin p { max-width: 46ch; }
    .tb-avantaj-canvas { display: none; }
    .tb-avantaj-merkez::before, .tb-avantaj-merkez::after { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .tb-avantaj-oge:hover .tb-avantaj-ikon { transform: none; }
}


/* ---------- 2026-10-14: asimetrik duzen — cekirdek solda, cam kartlar sagda ---------- */
.tb-av2 { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2.6rem; align-items: center; }
@media (min-width: 1100px) { .tb-av2 { grid-template-columns: minmax(0, .9fr) minmax(0, 2fr); gap: clamp(3rem, 6vw, 6rem); } }
.tb-av2-sol h2 { margin: 0 0 .8rem; font: 700 clamp(1.8rem, 1.2rem + 2vw, 2.5rem)/1.08 var(--tb-font-baslik); letter-spacing: -.03em; color: #fff; }
.tb-av2-sol h2 > span { display: block; }
.tb-av2-sol > p { margin: 0 0 2.6rem; max-width: 38ch; font-size: .98rem; line-height: 1.65; color: rgba(255,255,255,.72); }
.tb-av2-sol .tb-avantaj-merkez { width: 300px; height: 300px; justify-content: center; margin-inline: auto; }
.tb-av2-liste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; position: relative; z-index: 1; }
.tb-av2-oge { display: grid; grid-template-columns: 52px minmax(0, 1fr); column-gap: 1rem; align-items: start; padding: 1.15rem 1.2rem; border-radius: 16px;
    background: linear-gradient(160deg, rgba(30,58,110,.42), rgba(11,21,38,.55)); border: 1px solid rgba(141,184,255,.18);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: border-color .3s ease, box-shadow .3s ease; }
.tb-av2-oge:hover { border-color: rgba(240,69,107,.55); box-shadow: 0 0 0 1px rgba(240,69,107,.18), 0 18px 40px -22px rgba(240,69,107,.55); }
.tb-av2-oge b { display: block; margin-top: .15rem; font: 700 1.04rem/1.3 var(--tb-font-baslik); color: #fff; }
.tb-av2-oge p { margin: .35rem 0 0; font-size: .88rem; line-height: 1.55; color: rgba(255,255,255,.68); }
@media (max-width: 1099.98px) { .tb-av2-sol { text-align: center; } .tb-av2-sol > p { margin-inline: auto; } }
@media (max-width: 860px) { .tb-av2-sol .tb-avantaj-merkez { width: 220px; height: 220px; } .tb-av2-sol > p { margin-bottom: 1.4rem; } }
@media (max-width: 640px) { .tb-av2-liste { grid-template-columns: minmax(0, 1fr); } }

/* ==================================================================
   BLOG ICERIKLERI
   ------------------------------------------------------------------
   Referans duzen: solda tek buyuk yazi, sagda uc kisa yazi.
   Iki sutun arasinda dikey ayrim cizgisi, kisa yazilar arasinda
   yatay cizgi. Tum renkler tema degiskenlerinden gelir — bolumun
   kendi zemini yoktur, sayfanin yuzeyinde durur.
   ================================================================== */
.tb-yazi { padding-block: clamp(3rem, 6vw, 5rem); }

.tb-yazi-bas {
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: 1.5rem; flex-wrap: wrap;
    padding-bottom: 1.4rem;
    border-bottom: 1px solid var(--tb-line);
    margin-bottom: clamp(1.6rem, 3vw, 2.6rem);
}
.tb-yazi-bas h2 {
    margin: 0 0 .5rem;
    font-family: var(--tb-font-baslik);
    font-size: clamp(1.45rem, 1rem + 1.7vw, 2.2rem);
    font-weight: 700; letter-spacing: -.025em; color: var(--tb-ink);
}
.tb-yazi-bas p {
    margin: 0; max-width: 60ch;
    font-size: .92rem; line-height: 1.6; color: var(--tb-ink-soft);
}
/* referanstaki alti cizili baglanti — ok ucu kayar */
.tb-yazi-tum {
    flex: 0 0 auto;
    display: inline-flex; align-items: center; gap: .55rem;
    padding-bottom: .4rem;
    border-bottom: 1px solid var(--tb-ink);
    font-size: .88rem; font-weight: 600; color: var(--tb-ink);
    text-decoration: none;
    transition: color .2s ease, border-color .2s ease, gap .2s ease;
}
.tb-yazi-tum:hover {
    color: var(--basic-primary, #3564AF);
    border-color: var(--basic-primary, #3564AF);
    gap: .85rem;
}

.tb-yazi-izgara {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) 1px minmax(0, 1fr);
    gap: clamp(1.6rem, 3vw, 2.8rem);
}
/* sutunlari ayiran dikey cizgi (referansta var) */
.tb-yazi-izgara::before {
    content: ""; grid-column: 2; grid-row: 1;
    background: var(--tb-line);
}

/* --- ortak kart davranisi --- */
.tb-yazi-one,
.tb-yazi-kucuk { text-decoration: none; color: inherit; display: block; }

.tb-yazi-gorsel {
    position: relative; display: block; overflow: hidden;
    border-radius: 14px;
    background: var(--tb-surface-2, #f1f4f8);
    border: 1px solid var(--tb-line);
}
.tb-yazi-gorsel canvas { display: block; width: 100%; height: 100%; }
.tb-yazi-gorsel img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.tb-yazi-one:hover .tb-yazi-gorsel img, .tb-yazi-kucuk:hover .tb-yazi-gorsel img { transform: scale(1.04); }
.tb-yazi-one .tb-yazi-gorsel {
    aspect-ratio: 16 / 10;
    margin-bottom: 1.35rem;
}
.tb-yazi-kucuk .tb-yazi-gorsel {
    flex: 0 0 auto;
    width: 132px; aspect-ratio: 1 / 1;
    border-radius: 12px;
}

/* numara + kategori satiri */
.tb-yazi-ust {
    display: flex; align-items: center; gap: .7rem;
    margin-bottom: .55rem;
    /* Numara kaldirildi; kategori adi tek basina kaliyor ve artik
       BUYUK HARF degil. */
    font-size: .76rem; font-weight: 600; letter-spacing: .01em;
    color: var(--tb-ink-soft);
}
.tb-yazi-ust b { font-weight: 700; color: var(--tb-ink-soft); }
.tb-yazi-ust i {
    width: 22px; height: 1px; background: var(--tb-line);
    display: inline-block;
}

.tb-yazi-one h3 {
    margin: 0 0 .7rem;
    font-family: var(--tb-font-baslik);
    font-size: clamp(1.35rem, .95rem + 1.4vw, 1.95rem);
    font-weight: 700; letter-spacing: -.025em; line-height: 1.2;
    color: var(--tb-ink);
    transition: color .2s ease;
}
.tb-yazi-one p {
    margin: 0 0 1rem; max-width: 56ch;
    font-size: .93rem; line-height: 1.65; color: var(--tb-ink-soft);
}

.tb-yazi-liste { display: grid; align-content: start; }
.tb-yazi-kucuk {
    display: flex; gap: 1.1rem; align-items: flex-start;
    padding-block: 1.35rem;
    border-bottom: 1px solid var(--tb-line);
}
.tb-yazi-kucuk:first-child { padding-top: 0; }
.tb-yazi-kucuk:last-child { border-bottom: 0; padding-bottom: 0; }
.tb-yazi-metin { min-width: 0; }
.tb-yazi-kucuk h3 {
    margin: 0 0 .4rem;
    font-family: var(--tb-font-baslik);
    font-size: 1.02rem; font-weight: 700; letter-spacing: -.015em;
    line-height: 1.3; color: var(--tb-ink);
    transition: color .2s ease;
}
.tb-yazi-kucuk p {
    margin: 0 0 .6rem;
    font-size: .85rem; line-height: 1.55; color: var(--tb-ink-soft);
    /* iki satirda kes: kartlarin yuksekligi birbirini tutsun */
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
}

.tb-yazi-oku {
    display: inline-flex; align-items: center; gap: .45rem;
    font-size: .845rem; font-weight: 600;
    color: var(--basic-primary, #3564AF);
    transition: gap .2s ease;
}
.tb-yazi-one:hover h3,
.tb-yazi-kucuk:hover h3 { color: var(--basic-primary, #3564AF); }
.tb-yazi-one:hover .tb-yazi-oku,
.tb-yazi-kucuk:hover .tb-yazi-oku { gap: .8rem; }

@media (max-width: 980px) {
    .tb-yazi-izgara { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
    .tb-yazi-izgara::before { display: none; }
    .tb-yazi-liste { border-top: 1px solid var(--tb-line); padding-top: 1.35rem; }
    .tb-yazi-kucuk:first-child { padding-top: 0; }
}
@media (max-width: 560px) {
    .tb-yazi-kucuk { gap: .9rem; }
    .tb-yazi-kucuk .tb-yazi-gorsel { width: 92px; border-radius: 10px; }
    .tb-yazi-kucuk p { -webkit-line-clamp: 3; }
    .tb-yazi-bas { align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
    .tb-yazi-tum, .tb-yazi-oku { transition: none; }
}

/* ==================================================================
   ALTYAPI TEKNOLOJILERI — KAYAN SERIT
   ------------------------------------------------------------------
   Logolar surekli SOLA kayar. Liste sablonda iki kez yazilir;
   animasyon tam YARI yol (-50%) kaydirinca ikinci kopya birincinin
   yerine oturur ve donus dikissiz olur.

   Ray tam genisliktedir (tb-shell DISINDA), kenarlarda yumusak
   maske ile silinir — logolar aniden belirip kaybolmaz.
   Fare ustundeyken durur; hareket azaltma tercihinde hic kaymaz.
   ================================================================== */
.tb-serit {
    position: relative; isolation: isolate; overflow: hidden;
    padding-block: clamp(1.9rem, 3.4vw, 2.8rem);
    border-top: 1px solid var(--tb-line);
    border-bottom: 1px solid var(--tb-line);
    background: var(--tb-surface-2, #f7f9fc);
}
.tb-serit-canvas {
    position: absolute; inset: 0; width: 100%; height: 100%;
    z-index: 0; pointer-events: none;
}
.tb-serit > .tb-shell { position: relative; z-index: 1; }

.tb-serit-bas {
    margin: 0 0 1.1rem; text-align: left;
    /* BUYUK HARF + .15em izleme kaldirildi (bkz. .tb-hero-eyebrow).
       Bu satir seridin tek aciklamasi, bu yuzden duruyor. */
    font-size: .8rem; font-weight: 600; letter-spacing: .005em;
    color: var(--tb-ink-soft);
}

/* --- ray: kenarlari yumusayan tam genislikte pencere --- */
.tb-serit-ray {
    position: relative; z-index: 1;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
            mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}

.tb-serit-liste {
    list-style: none; margin: 0; padding: 0;
    display: flex; align-items: center;
    width: max-content;
    /* gap DEGIL margin: 24 oge arasinda 23 gap olur, yarisi 11,5
       gap eder ve -50% tam bir takima denk gelmez — her turda
       yarim bosluk kadar zipliyordu. margin her ogeye esit
       dagildigi icin yari yol tam bir takimdir. */
    animation: tb-serit-kay 46s linear infinite;
}
@keyframes tb-serit-kay {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(-50%, 0, 0); }
}
.tb-serit:hover .tb-serit-liste,
.tb-serit-liste:focus-within { animation-play-state: paused; }

.tb-serit-liste > li { flex: 0 0 auto; margin-inline-end: .55rem; }
.tb-serit-kutu {
    display: grid; place-items: center;
    width: 134px; height: 78px; padding: .5rem .6rem;
    border: 1px solid var(--tb-line);
    border-radius: 10px;
    background: var(--tb-surface);
    transition: border-color .25s ease, box-shadow .25s ease;
}
.tb-serit-kutu img {
    /* Tum logolar siki kirpilmis; contain + grid ortalamasi ile
       hepsi ayni optik merkezde durur.
       --tb-s: sablonda OLCULEREK atanan optik denge carpani. */
    --tb-s: 1; --tb-dx: 0%; --tb-dy: 0%;
    max-width:  calc(112px * var(--tb-s));
    max-height: calc(30px  * var(--tb-s));
    width: auto; height: auto;
    object-fit: contain;
    /* Ic asimetri duzeltmesi: yuzdeler ogenin KENDI olcusune
       goredir, yani logo buyuyup kuculse de duzeltme orantili kalir. */
    transform: translate(var(--tb-dx), var(--tb-dy));
    /* Gorunurluk: .45 cok solgundu, ince cizgili logolar (Intel, HP,
       Cloudflare) kayboluyordu. .58 okunur ama hala sakin. */
    filter: grayscale(1) opacity(.58);
    transition: filter .3s ease, transform .3s ease;
}
.tb-serit-kutu:hover {
    border-color: rgba(53, 100, 175, 0.450);
    border-color: color-mix(in srgb, var(--basic-primary, #3564AF) 45%, transparent);
    box-shadow: 0 10px 26px -16px rgba(53,100,175,.55);
}
.tb-serit-kutu:hover img {
    filter: none;
    transform: translate(var(--tb-dx), var(--tb-dy)) scale(1.05);
}

/* Koyu kipte koyu logolar kaybolur -> parlaklik yukseltilir. */
[data-bs-theme="dark"] .tb-serit { background: rgba(255,255,255,.02); }
[data-bs-theme="dark"] .tb-serit-kutu img {
    filter: grayscale(1) brightness(2.8) opacity(.68);
}
[data-bs-theme="dark"] .tb-serit-kutu:hover img { filter: brightness(1.14); }

@media (max-width: 560px) {
    .tb-serit-kutu { width: 114px; height: 68px; }
    .tb-serit-kutu img {
        max-width:  calc(94px * var(--tb-s));
        max-height: calc(25px * var(--tb-s));
    }
}
@media (prefers-reduced-motion: reduce) {
    /* Kayma tamamen durur; serit yatayda kaydirilabilir kalir. */
    .tb-serit-liste { animation: none; }
    .tb-serit-ray { overflow-x: auto; scrollbar-width: thin; }
    .tb-serit-kutu, .tb-serit-kutu img { transition: none; }
    .tb-serit-kutu:hover img { transform: translate(var(--tb-dx), var(--tb-dy)); }
}

/* ==================================================================
   GELISMIS SEPET
   ------------------------------------------------------------------
   Dugme kip anahtarinin yaninda, HER ZAMAN gorunur. Panel sagdan
   kayarak acilir; icerik /sepet sayfasindan getirilir.
   Tum renkler tema degiskenlerinden gelir.
   ================================================================== */
.tb-sepet-btn { position: relative; }
.tb-sepet-btn .tb-badge {
    position: absolute; top: -4px; inset-inline-end: -4px;
    min-width: 17px; height: 17px; padding: 0 4px;
    display: grid; place-items: center;
    border-radius: 9px;
    background: var(--basic-secondary, #C62338);
    color: #fff; font-size: .64rem; font-weight: 700; line-height: 1;
}
/* sepete urun eklenince kisa bir vurgu */
@keyframes tb-sepet-vur {
    0%, 100% { transform: scale(1); }
    35%      { transform: scale(1.18); }
}
.tb-sepet-canlandi { animation: tb-sepet-vur .55s ease; }

.tb-sepet-ortu {
    position: fixed; inset: 0; z-index: 1045;
    background: rgba(4, 12, 26, .5);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    opacity: 0; transition: opacity .28s ease;
}
.tb-sepet-ortu.acik { opacity: 1; }

.tb-sepet {
    position: fixed; z-index: 1046;
    inset-block: 0; inset-inline-end: 0;
    width: min(420px, 92vw);
    display: flex; flex-direction: column;
    background: var(--tb-surface);
    border-inline-start: 1px solid var(--tb-line);
    box-shadow: -24px 0 60px -30px rgba(0, 0, 0, .55);
    transform: translateX(100%);
    transition: transform .3s cubic-bezier(.22, .8, .3, 1);
}
.tb-sepet.acik { transform: translateX(0); }

.tb-sepet-bas {
    display: flex; align-items: center; justify-content: space-between;
    gap: 1rem; padding: 1.1rem 1.25rem;
    border-bottom: 1px solid var(--tb-line);
}
.tb-sepet-bas h2 {
    margin: 0; display: flex; align-items: center; gap: .6rem;
    font-family: var(--tb-font-baslik);
    font-size: 1.05rem; font-weight: 700; color: var(--tb-ink);
}
.tb-sepet-bas h2 i { color: var(--basic-primary, #3564AF); }
.tb-sepet-bas h2 span { font-weight: 600; color: var(--tb-ink-soft); font-size: .9em; }
.tb-sepet-kapat {
    flex: 0 0 auto;
    width: 34px; height: 34px; display: grid; place-items: center;
    border: 1px solid var(--tb-line); border-radius: 9px;
    background: transparent; color: var(--tb-ink-soft);
    cursor: pointer; transition: background .2s ease, color .2s ease;
}
.tb-sepet-kapat:hover { background: var(--tb-surface-2); color: var(--tb-ink); }

.tb-sepet-govde { flex: 1 1 auto; overflow-y: auto; padding: 1rem 1.25rem; }

.tb-sepet-yukleniyor, .tb-sepet-bos {
    display: grid; place-items: center; gap: .8rem;
    padding-block: 3rem; text-align: center; color: var(--tb-ink-soft);
}
.tb-sepet-bos i { font-size: 2.4rem; opacity: .35; }
.tb-sepet-bos p, .tb-sepet-yukleniyor p { margin: 0; font-size: .92rem; }
.tb-sepet-bos-btn {
    display: inline-flex; align-items: center;
    padding: .55rem 1.1rem; border-radius: 9px;
    background: var(--basic-primary, #3564AF); color: #fff;
    font-size: .88rem; font-weight: 600; text-decoration: none;
}
.tb-sepet-donuyor {
    width: 26px; height: 26px; border-radius: 50%;
    border: 2px solid var(--tb-line);
    border-top-color: var(--basic-primary, #3564AF);
    animation: tb-sepet-don .8s linear infinite;
}
@keyframes tb-sepet-don { to { transform: rotate(360deg); } }

.tb-sepet-liste { display: grid; gap: .6rem; }
.tb-sepet-satir {
    display: grid; grid-template-columns: 42px minmax(0, 1fr) auto;
    align-items: center; gap: .8rem;
    padding: .7rem; border: 1px solid var(--tb-line); border-radius: 11px;
    background: var(--tb-surface-2);
}
.tb-sepet-satir-link { cursor: pointer; transition: border-color .2s ease; }
.tb-sepet-satir-link:hover { border-color: var(--basic-primary, #3564AF); }
.tb-sepet-ikon {
    width: 42px; height: 42px; display: grid; place-items: center;
    border-radius: 9px; background: var(--tb-surface);
    border: 1px solid var(--tb-line);
    color: var(--basic-primary, #3564AF);
}
.tb-sepet-ikon img { max-width: 26px; max-height: 26px; }
.tb-sepet-bilgi { min-width: 0; }
.tb-sepet-bilgi b {
    display: block; font-size: .88rem; font-weight: 600; color: var(--tb-ink);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tb-sepet-fiyat { font-size: .88rem; font-weight: 700; color: var(--tb-ink); white-space: nowrap; }

.tb-sepet-alt { border-top: 1px solid var(--tb-line); padding: 1rem 1.25rem 1.2rem; }
.tb-sepet-toplam {
    display: flex; align-items: center; justify-content: space-between;
    gap: 1rem; margin-bottom: .9rem;
    font-size: 1rem; font-weight: 700; color: var(--tb-ink);
}
.tb-sepet-eylem { display: grid; grid-template-columns: auto 1fr; gap: .6rem; }
.tb-sepet-git, .tb-sepet-ode {
    display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
    padding: .7rem 1rem; border-radius: 10px;
    font-size: .9rem; font-weight: 600; text-decoration: none;
    transition: background .2s ease, border-color .2s ease;
}
.tb-sepet-git {
    border: 1px solid var(--tb-line); color: var(--tb-ink); background: transparent;
}
.tb-sepet-git:hover { border-color: var(--basic-primary, #3564AF); color: var(--basic-primary, #3564AF); }
.tb-sepet-ode {
    background: var(--basic-primary, #3564AF); color: #fff;
}
.tb-sepet-ode:hover { background: #27548F; color: #fff; }

@media (prefers-reduced-motion: reduce) {
    .tb-sepet, .tb-sepet-ortu { transition: none; }
    .tb-sepet-canlandi { animation: none; }
    .tb-sepet-donuyor { animation-duration: 2s; }
}
.tb-sepet-bilgi small {
    display: block; margin-top: .15rem;
    font-size: .74rem; line-height: 1.35; color: var(--tb-ink-soft);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ==================================================================
   HESAP MENUSU (header, giris yapilmis durum)
   ------------------------------------------------------------------
   Onceki halde dugme yalnizca /hesabim'a baglaniyordu; CIKIS YAP
   hicbir yerde gorunmuyordu. Artik acilir menu: hesap ozeti, panel
   kisayollari ve cikis.
   ================================================================== */
.tb-hesap { position: relative; }
.tb-hesap-ac {
    display: inline-flex; align-items: center; gap: .5rem;
    cursor: pointer;
}
.tb-hesap-ava {
    display: grid; place-items: center; flex: 0 0 auto;
    width: 26px; height: 26px; border-radius: 50%;
    background: linear-gradient(135deg, var(--basic-primary, #3564AF), #27548F);
    color: #fff; font-size: .68rem; font-weight: 700; letter-spacing: .02em;
    overflow: hidden;
}
.tb-hesap-ava img { width: 100%; height: 100%; object-fit: cover; }
.tb-hesap-ok { font-size: .7rem; transition: transform .2s ease; }
.tb-hesap-ac[aria-expanded="true"] .tb-hesap-ok { transform: rotate(180deg); }

.tb-hesap-menu {
    position: absolute; z-index: 1050;
    inset-inline-end: 0; top: calc(100% + .5rem);
    min-width: 248px; padding: .4rem;
    border: 1px solid var(--tb-line);
    border-radius: 14px;
    background: var(--tb-surface);
    box-shadow: 0 24px 54px -26px rgba(8,20,40,.5);
    opacity: 0; transform: translateY(-6px);
    transition: opacity .18s ease, transform .18s ease;
}
.tb-hesap-menu.acik { opacity: 1; transform: translateY(0); }

.tb-hesap-bas {
    display: flex; align-items: center; gap: .65rem;
    padding: .7rem .65rem .8rem;
    border-bottom: 1px solid var(--tb-line);
    margin-bottom: .35rem;
}
.tb-hesap-ava-buyuk { width: 38px; height: 38px; font-size: .9rem; }
.tb-hesap-bilgi { min-width: 0; display: grid; }
.tb-hesap-bilgi b {
    font-size: .88rem; font-weight: 700; color: var(--tb-ink);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tb-hesap-bilgi small {
    font-size: .76rem; color: var(--tb-ink-soft);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.tb-hesap-oge {
    display: flex; align-items: center; gap: .6rem;
    padding: .55rem .65rem; border-radius: 9px;
    font-size: .875rem; font-weight: 500;
    color: var(--tb-ink); text-decoration: none;
    transition: background .16s ease, color .16s ease;
}
.tb-hesap-oge i { width: 1.1em; font-size: .95em; color: var(--tb-ink-soft); transition: color .16s ease; }
.tb-hesap-oge:hover { background: var(--tb-surface-2); color: var(--basic-primary, #3564AF); }
.tb-hesap-oge:hover i { color: var(--basic-primary, #3564AF); }

.tb-hesap-ayirac {
    display: block; height: 1px; margin: .35rem .3rem;
    background: var(--tb-line);
}
.tb-hesap-cikis { color: var(--basic-secondary, #C62338); }
.tb-hesap-cikis i { color: var(--basic-secondary, #C62338); }
.tb-hesap-cikis:hover {
    background: rgba(198, 35, 56, 0.090);
    background: color-mix(in srgb, var(--basic-secondary, #C62338) 9%, transparent);
    color: var(--basic-secondary, #C62338);
}
.tb-hesap-cikis:hover i { color: var(--basic-secondary, #C62338); }

@media (prefers-reduced-motion: reduce) {
    .tb-hesap-menu, .tb-hesap-ok { transition: none; }
}

/* ==================================================================
   TEK VUCUT — sayfa butunlugu
   ------------------------------------------------------------------
   Bolumler ayri ayri tasarlandi ve her biri kendi canvas dilini
   gelistirdi. Olculdugunde bes ayri mavi cikti:
     122,174,230 / 120,180,255 / 53,100,175 / 76,134,216 / 96,150,220
   Bu, sayfanin "parcali" hissettirmesinin asil sebebi.

   Cozum uc katmanli:
     1) TEK PALET — canvas renkleri artik buradan okunur (CSS
        degiskeni), her dosyada ayri sabit tanimlanmaz. Kip
        degisiminde hepsi birlikte doner.
     2) TEK RITIM — bolum dikey bosluklari tek olcege baglanir.
     3) OMURGA — bolumler arasinda kisa dikey baglanti ve dugum;
        sayfa ayri bloklar degil, tek bir govdenin bolumleri gibi
        okunur.
   ================================================================== */
:root {
    /* Canvas paleti — TEK KAYNAK. Yeni bir canvas yazilirsa bunlari
       okumali, kendi sabitini tanimlamamali. */
    --tb-cv-ana:   53, 100, 175;    /* marka mavisi        */
    --tb-cv-acik:  76, 134, 216;    /* acilmis mavi        */
    --tb-cv-parlak:150, 196, 250;   /* parlama / vurgu uc  */
    --tb-cv-sicak: 232, 65, 92;     /* marka kirmizisi     */
    --tb-cv-guc:   0.70;            /* genel yogunluk carpani */
}
[data-bs-theme="dark"] {
    --tb-cv-ana:   120, 180, 255;
    --tb-cv-acik:  150, 200, 255;
    --tb-cv-parlak:205, 232, 255;
    --tb-cv-sicak: 232, 110, 135;
    --tb-cv-guc:   1;
}

/* --- 2) TEK RITIM --- */
.tb-section,
.tb-avantaj,
.tb-yazi {
    padding-block: var(--tb-ritim, clamp(3.2rem, 6vw, 5.2rem));
}

/* --- 3) OMURGA: bolumleri birbirine baglayan kisa eklem --- */
.tb-eklem {
    position: relative;
    display: block;
    height: 46px;
    margin: 0;
    pointer-events: none;
}
.tb-eklem::before {
    /* dikey hat: ustteki bolumden alttakine gecer */
    content: ""; position: absolute; left: 50%; top: 0; bottom: 0;
    width: 1px; transform: translateX(-50%);
    background: linear-gradient(180deg,
        transparent,
        color-mix(in srgb, var(--basic-primary) 30%, transparent) 30%,
        color-mix(in srgb, var(--basic-primary) 30%, transparent) 70%,
        transparent);
}
.tb-eklem::after {
    /* dugum: eklemin ortasinda kucuk nokta */
    content: ""; position: absolute; left: 50%; top: 50%;
    width: 5px; height: 5px; border-radius: 50%;
    transform: translate(-50%, -50%);
    background: var(--tb-surface);
    border: 1px solid rgba(53, 100, 175, 0.450);
    border: 1px solid color-mix(in srgb, var(--basic-primary) 45%, transparent);
    box-shadow: 0 0 0 4px var(--tb-surface);
}
/* Eklem, komsu bolumlerin bosluguna oturur; ust uste binmesin diye
   cevresindeki dolgu kisilir. */
.tb-eklem + section,
.tb-eklem + .tb-section { padding-top: clamp(1.6rem, 3vw, 2.6rem); }
section:has(+ .tb-eklem) { padding-bottom: clamp(1.6rem, 3vw, 2.6rem); }

@media (max-width: 680px) {
    .tb-eklem { height: 34px; }
}
@media (prefers-reduced-motion: reduce) {
    .tb-eklem::after { box-shadow: 0 0 0 4px var(--tb-surface); }
}

/* ==================================================================
   MARKA DENGESI — kirmizi birinci renk olmali
   ------------------------------------------------------------------
   OLCUM: ana sayfadaki renkli degerlerin %96,4'u MAVI, %2,5'i
   KIRMIZI cikti. Oysa marka kilavuzunda BIRINCI RENK KIRMIZI
   (#C62338); mavi yan renktir. Sayfa teknik olarak guzeldi ama
   MARKAYA BENZEMIYORDU — "uzay sirketi gibi olmus" tespitinin
   olculmus karsiligi budur.

   DUZELTME MANTIGI — her yeri kirmizi yapmak degil:
     KIRMIZI = markanin SESI. Bolum etiketleri, omurga dugumleri,
               birincil eylem, vurgu. Yani "burada Turkbil konusuyor"
               denen yerler.
     MAVI    = ALTYAPININ rengi. Teknik yuzeyler, kartlar, veri
               gorsellestirmeleri, baglantilar.

   Boylece kirmizi sayfanin omurgasindan gecer, mavi govdeyi tasir.
   Kamu kurumu ciddiyeti bozulmaz: kirmizi bagirmaz, isaretler.
   ================================================================== */

/* --- bolum ust etiketleri: markanin sesi --- */
.tb-eyebrow {
    color: var(--basic-secondary, #C62338);
}
[data-bs-theme="dark"] .tb-eyebrow { color: #F08A98; }

/* --- omurga dugumu: marka ipligi sayfadan gecer --- */
.tb-eklem::before {
    background: linear-gradient(180deg,
        transparent,
        color-mix(in srgb, var(--basic-secondary, #C62338) 32%, transparent) 30%,
        color-mix(in srgb, var(--basic-secondary, #C62338) 32%, transparent) 70%,
        transparent);
}
.tb-eklem::after {
    border-color: rgba(198, 35, 56, 0.550);
    border-color: color-mix(in srgb, var(--basic-secondary, #C62338) 55%, transparent);
}

/* --- "Neden Turkbil" ust etiketi ve cubugu --- */
.tb-neden-ust { color: var(--basic-secondary, #C62338); }
[data-bs-theme="dark"] .tb-neden-ust { color: #F08A98; }
.tb-neden-cubuk {
    background: linear-gradient(90deg,
        var(--basic-secondary, #C62338), var(--basic-primary, #3564AF));
}

/* --- hizmet kartlari: ust kenarda ince marka cizgisi --- */
.tb-hizmet-kart { position: relative; }
.tb-hizmet-kart::before {
    content: ""; position: absolute; inset-inline: 0; top: 0; height: 2px;
    border-radius: 2px 2px 0 0;
    background: linear-gradient(90deg,
        var(--basic-secondary, #C62338), var(--basic-primary, #3564AF));
    opacity: 0; transition: opacity .25s ease;
}
.tb-hizmet-kart:hover::before { opacity: 1; }

/* --- blog: one cikan yazinin numarasi markanin rengiyle --- */
.tb-yazi-one .tb-yazi-ust b { color: var(--basic-secondary, #C62338); }



/* ==================================================================
   MOR SUPURME — mavi ile kirmizinin genis alanda harmanlanmasi
   ------------------------------------------------------------------
   Tema genelinde tarandi: 18 kuralda marka mavisi ile marka kirmizisi
   ayni gradyanda bulusuyor. Mavi ile kirmizinin ara rengi HER renk
   uzayinda MORDUR; palette mor yoktur.

   AYRIM — hepsi sorun degil:
     SORUN:  genis yuzeyler (serit, yan panel, hero). Mor koca bir
             leke olarak gorunur.
     SORUN DEGIL: 1-2px ince cizgiler. Orada gecis zarif bir vurgu
             olur, mor kutle olusmaz. Dokunulmadi.

   KURAL: iki marka rengi genis alanda harmanlanmaz. Ya tek aile
   icinde kalinir, ya gecis KOYU NOTR uzerinden yapilir, ya da ikisi
   ayri blok olarak durur.
   ================================================================== */

/* --- cagri seridi: "Baslamaya Hazir misiniz?" — en gorunur olani --- */
.cta-band {
    background: linear-gradient(135deg,
        #0A1A33 0%, #143A6F 45%, #27548F 100%) !important;
}
[data-bs-theme="dark"] .cta-band {
    background: linear-gradient(135deg,
        #060F1F 0%, #0E2A4E 45%, #1B3F6B 100%) !important;
}

/* --- odeme ekrani yan paneli --- */
.checkout-split-aside,
[dir="rtl"] .checkout-split-aside {
    background: linear-gradient(155deg,
        #0A1A33 0%, #163E74 55%, #27548F 115%) !important;
}
[data-bs-theme="dark"] .checkout-split-aside,
[data-bs-theme="dark"] [dir="rtl"] .checkout-split-aside {
    background: linear-gradient(155deg,
        #060F1F 0%, #102C52 55%, #1B3F6B 115%) !important;
}

/* --- giris ekrani ikonu --- */
.auth-aside-icon {
    background: linear-gradient(135deg,
        var(--basic-primary, #3564AF), #27548F) !important;
}

/* --- pano hero: RTL surumu de kapatilir --- */
[dir="rtl"] .dash-hero,
[dir="rtl"][data-bs-theme="dark"] .dash-hero {
    background:
        radial-gradient(120% 140% at 12% 6%, rgba(76,134,216,.34), transparent 60%),
        linear-gradient(225deg, #050D1C 0%, #0A1B33 44%, #15314F 76%, #1D3F63 100%) !important;
}

/* --- cekirdek ust serit (bizimki .tb-topbar, bu yedek) --- */
.topbar {
    background: linear-gradient(90deg,
        #02142C 0%, #0A2449 34%, #143A6F 70%, #27548F 100%) !important;
}

/* --- kendi CTA blogumuz: son %40'i mordan geciyordu --- */
.tb-cta {
    background: linear-gradient(120deg,
        var(--basic-deep, #001F3F) 0%, #0E2E5C 42%, var(--basic-primary, #3564AF) 100%) !important;
}

/* ==================================================================
   UST BOLUM — SAG DENETIMLERIN HIZASI
   ------------------------------------------------------------------
   OLCULDU (1280 ve 1440 px): uc denetim farkli olculerdeydi
       .tb-panel-btn  147 x 41   (dolgu tabanli, yaricap 12, kenar yok)
       .tb-icon-btn    42 x 42   (kare, yaricap degisken, kenar yok)
       .tb-kip         38 x 38   (kare, yaricap 11, 1px kenar)
   Uc kutu ayni cizgide durmuyordu; 13" ekranda bu ucu da yan yana
   gelince "dagiinik" okunuyor. Goz 3-4 px'lik yukseklik farkini
   adlandiramaz ama duzensizligi hisseder.

   Cozum: ortak bir denetim yuksekligi ve ortak yaricap. Her birinin
   KENDI gorsel kimligi (gradyan cerceve, kenarlik) korunuyor —
   degisen yalnizca kutu olcusu.
   ================================================================== */
.tb-header {
    --tb-denetim-boy: 42px;
    --tb-denetim-yaricap: 12px;
}

.tb-header .tb-panel-btn {
    height: var(--tb-denetim-boy);
    padding-block: 0;
    border-radius: var(--tb-denetim-yaricap);
}
.tb-header .tb-icon-btn {
    width: var(--tb-denetim-boy);
    height: var(--tb-denetim-boy);
    border-radius: var(--tb-denetim-yaricap);
}
.tb-header .tb-kip {
    width: var(--tb-denetim-boy);
    height: var(--tb-denetim-boy);
    border-radius: var(--tb-denetim-yaricap);
}

/* Uclu grup tek bir oge gibi okunsun: esit ve biraz daha ferah aralik. */
.tb-header .tb-panel-btn + *,
.tb-header .tb-icon-btn + * { margin-inline-start: 0; }
.tb-header .tb-hesap-sar,
.tb-header .tb-ust-araclar { gap: .6rem; }

/* ==================================================================
   UST BOLUM SINYALLERI — ICERIK BANDINDAN CIKARILDI
   ------------------------------------------------------------------
   Sinyal izleri ust bolumun TUM yuksekliginde dolasiyordu; logonun,
   menu yazilarinin ve dugmelerin hizasindan geciyorlardi. Dugmelerin
   zemini yari saydam oldugu icin (rgba(255,255,255,.03)) izler
   iclerinden gorunuyor, "ust uste binmis" izlenimi veriyordu.

   Cozum: canvas'i maskeleyip izleri yalnizca UST ve ALT seritte
   birakmak. Teknik karakter korunuyor, icerik bandi tamamen temiz.
   Geometrik cakisma zaten yoktu (olculdu: 1000-1440 px arasi
   logo→menu 29-100 px, menu→sag 44-134 px) — sorun gorseldi.
   ================================================================== */
.tb-header-canvas {
    /* Icerik bandi OLCULDU: menu yazilari ust bolumun %23-77 araliginda.
       Maske o araligi tamamen bos birakir, gecis paylari disarida kalir. */
    -webkit-mask-image: linear-gradient(180deg,
        #000 0%, #000 8%, transparent 20%,
        transparent 80%, #000 92%, #000 100%);
            mask-image: linear-gradient(180deg,
        #000 0%, #000 8%, transparent 20%,
        transparent 80%, #000 92%, #000 100%);
    opacity: .72;
}
/* Ust serit de ayni sorunu tasiyor: orada da yazilarin hizasi korunur. */
.tb-topbar-canvas {
    -webkit-mask-image: linear-gradient(180deg,
        #000 0%, #000 18%, transparent 34%,
        transparent 66%, #000 82%, #000 100%);
            mask-image: linear-gradient(180deg,
        #000 0%, #000 18%, transparent 34%,
        transparent 66%, #000 82%, #000 100%);
    opacity: .7;
}


/* ==================================================================
   BOS SEPET GIZLENIR
   ------------------------------------------------------------------
   Anasayfada sepet tanimi geregi her zaman bostur; 42x42'lik ikon
   hicbir bilgi vermeden ust bolumde yer kapliyordu. Dugme DOM'dan
   SILINMEZ, yalnizca gizlenir: turkbil-sepet.js sayac sifirdan
   buyuk olunca sinifi kaldirir, boylece urun eklenince dugme sayfa
   yenilenmeden geri gelir.
   ================================================================== */
.tb-header .tb-sepet-btn.tb-sepet-bos { display: none !important; }

/* ==================================================================
   YEREL TERCIHLER — DIL + PARA BIRIMI
   ------------------------------------------------------------------
   ILK TASARIM NEDEN YABANCI DURUYORDU (olculdu, tahmin degil):

     TEMANIN DILI                        ILK HALIM
     ikon dugmesi yaricap 12px           dugme yaricap 999px      ✗
                  dolgu rgba(mavi,.08)         seffaf + kenarlik  ✗
                  kenarlik YOK
     mega menu    yaricap 18px           panel yaricap 14px       ✗
                  gradyan zemin                duz beyaz          ✗
                  golge -30px yayilma          -18px              ✗

   Ust bolumdeki HER kontrol 12px koseli, hafif dolgulu, kenarliksiz.
   Ben hap seklinde kenarlikli bambaska bir sey koymustum; sayfanin
   geri kalaniyla ayni dili konusmuyordu.

   Simdi tema ne diyorsa o: dugme .tb-icon-btn ailesinden, panel
   .tb-mega-ic ailesinden. Yeni bir gorsel dil KURULMUYOR, var olan
   dil KONUSULUYOR.
   ================================================================== */
.tb-yerel { position: relative; flex: 0 0 auto; }

/* ——— tetikleyici: temanin ikon dugmesiyle ayni aile ——————————— */
.tb-yerel-dugme {
    display: inline-flex; align-items: center;
    gap: .42rem;
    height: 34px;                       /* serit 44px: 5'er px nefes */
    padding-inline: .66rem .58rem;      /* ikon tarafi dar, ok tarafi genis */
    border: 0;
    border-radius: var(--tb-radius-sm, 12px);
    background: rgba(255,255,255,.08);
    color: #fff;
    font: inherit; font-weight: 600; line-height: 1;
    cursor: pointer; white-space: nowrap;
    -webkit-tap-highlight-color: transparent;
    transition: background .18s ease;
}
.tb-yerel-dugme > i:first-child { font-size: 1.06em; opacity: .9; }
.tb-yerel-kod { font-variant-numeric: tabular-nums; letter-spacing: .01em; }
.tb-yerel-ayrac { width: 1px; height: 13px; background: rgba(255,255,255,.26); flex: 0 0 auto; }
.tb-yerel-ok { font-size: .72em; opacity: .62; transition: transform .22s ease; }

.tb-yerel-dugme:hover,
.tb-yerel-dugme[aria-expanded="true"] { background: rgba(255,255,255,.16); }
.tb-yerel-dugme[aria-expanded="true"] .tb-yerel-ok { transform: rotate(180deg); }
.tb-yerel-dugme:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* ——— panel: temanin mega menusuyle ayni aile ————————————————— */
.tb-yerel-panel {
    position: absolute;
    top: calc(100% + 10px);
    inset-inline-end: 0;
    z-index: 80;
    min-width: 15rem;
    padding: .7rem;
    border-radius: 18px;
    background: linear-gradient(165deg, rgba(10,22,46,.97), rgba(5,12,28,.98));
    border: 1px solid rgba(255,255,255,.10);
    box-shadow: 0 36px 72px -30px rgba(0,0,0,.92);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    /* OLCUM: 9 dil + 4 para birimi = 13 secenek, panel 565 px.
       720 px'lik ekrana siginiyor ama 600 px'lik bir dizustunde ya da
       yatay mobilde tasardi — ve overflow:hidden onu KESERDI.
       Panel ekranin alt kenarina kadar uzayabilir, gerisi kaydirilir. */
    max-height: calc(100vh - 72px);
    max-height: calc(100dvh - 72px);     /* mobil adres cubugu icin */
    overflow-y: auto;
    overscroll-behavior: contain;        /* panel biterse sayfa kaymasin */
    scrollbar-width: thin;
    transform-origin: top right;
    animation: tb-yerel-ac .2s cubic-bezier(.3,.9,.35,1);
}
/* Ust kenardaki marka cizgisi kaydirmayla kaymasin */
.tb-yerel-panel::before { position: sticky; }
.tb-yerel-panel[hidden] { display: none; }
@keyframes tb-yerel-ac {
    from { opacity: 0; transform: scale(.97) translateY(-5px); }
    to   { opacity: 1; transform: none; }
}
/* Ust kenarda marka gradyani — mega menudeki ayni cizgi, ayni degerler.
   Panelin temaya ait oldugunu tek bakista soyleyen detay. */
.tb-yerel-panel::before {
    content: ""; position: absolute; inset-inline: 0; top: 0; height: 2px;
    background: linear-gradient(90deg,
        transparent 0%, var(--basic-primary, #3564AF) 22%,
        #93B3D1 48%, var(--basic-secondary, #C62338) 76%, transparent 100%);
}

.tb-yerel-baslik {
    margin: .45rem .6rem .3rem;
    font-size: .68rem; font-weight: 700; letter-spacing: .02em;
    color: rgba(255,255,255,.52);
}
.tb-yerel-liste + .tb-yerel-baslik {
    margin-top: .55rem; padding-top: .55rem;
    border-top: 1px solid rgba(255,255,255,.09);
}

.tb-yerel-liste { list-style: none; margin: 0; padding: 0; }
.tb-yerel-liste a {
    display: grid;
    /* PT-BR en uzun kod; 2.7rem dar kaliyordu */
    grid-template-columns: 3.4rem minmax(0, 1fr) .9rem;
    align-items: center; gap: .5rem;
    padding: .5rem .6rem;
    border-radius: 10px;
    color: rgba(255,255,255,.92);
    text-decoration: none;
    font-size: .85rem;
    transition: background-color .15s ease;
}
.tb-yerel-liste a:hover { background: rgba(255,255,255,.08); }
.tb-yerel-liste a:focus-visible { outline: 2px solid rgba(255,255,255,.75); outline-offset: -2px; }
.tb-yerel-k { font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: .01em; }
.tb-yerel-a {
    color: rgba(255,255,255,.55); font-size: .95em;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tb-yerel-liste a.tb-yerel-aktif { background: rgba(198,35,56,.16); }
.tb-yerel-liste a.tb-yerel-aktif .tb-yerel-k,
.tb-yerel-liste a.tb-yerel-aktif i { color: #F08A98; }
.tb-yerel-liste a.tb-yerel-aktif .tb-yerel-a { color: rgba(255,255,255,.72); }
.tb-yerel-liste a i { justify-self: end; font-size: .88em; }

/* Panel KOYU; acik temada da koyu kalir — ust serit zaten koyu bir
   banttir, panel oradan dogar. Mega menu de ayni sekilde davranir. */

@media (pointer: coarse), (max-width: 575.98px) {
    .tb-yerel-dugme { height: 44px; padding-inline: .8rem .7rem; }
    .tb-yerel-liste a { min-height: 44px; }
}
@media (max-width: 575.98px) {
    .tb-yerel-panel { min-width: 13rem; max-width: calc(100vw - 1.5rem); }
}

@media (prefers-reduced-motion: reduce) {
    .tb-yerel-panel { animation: none; }
    .tb-yerel-ok { transition: none; }
}


/* ==================================================================
   PANEL ACIKKEN SERIT YAPISKAN BASLIGIN USTUNE CIKAR
   ------------------------------------------------------------------
   OLCUM: .tb-header z-index 1030 (yapiskan), .tb-topbar 90. Panel
   seridin icinde oldugu icin 1030'u asla gecemiyordu; 189px'lik
   panelin 72px'i basligin altinda kaliyordu.
   Seridi KALICI olarak yukseltmek yanlis olurdu: sayfa kaydirilirken
   serit yukari akar ve yapiskan basligin uzerine binerdi.
   Bu yuzden yukselme YALNIZCA panel acikken olur; turkbil-yerel.js
   sinifi ekleyip kaldirir.
   ================================================================== */
.tb-topbar.tb-topbar-ustte { z-index: 1040; }

/* ==================================================================
   DOKUNMATIK: EN AZ 44 px HEDEF
   ------------------------------------------------------------------
   OLCUM: 390px ekranda dugme 79x24 px cikiyordu — parmakla isabet
   ettirilemez. WCAG/platform esigi 44px.
   Hap GORSEL olarak buyumesin diye yukseklik degil DOLGU artirilmiyor;
   min-height veriliyor ve icerik dikeyde ortalaniyor. Yalnizca kaba
   isaretleyicide (parmak) uygulanir; fareyle gezen masaustunde hap
   ince ve sakin kalir.
   ================================================================== */
@media (pointer: coarse) {
    .tb-yerel-dugme {
        min-height: 44px;
        padding-inline: .8rem .7rem;
    }
    /* Panel secenekleri de parmak icin genisler */
    .tb-yerel-liste a { min-height: 44px; }   /* dolguyla 42px cikiyordu; esik dogrudan yaziliyor */
}

/* Dar ekranda panel ekrani asmasin: sag kenara yaslanir ve
   en fazla ekranin elverdigi kadar genisler. */
@media (max-width: 575.98px) {
    .tb-yerel-panel {
        min-width: 12rem;
        max-width: calc(100vw - 1.5rem);
    }
}

/* Dar ekran yedegi: `pointer: coarse` bazi tarayici emulasyonlarinda
   bildirilmiyor, ama 576px altindaki bir ekran pratikte her zaman
   dokunmatiktir. Ikisi birlikte calisir, catismaz. */
@media (max-width: 575.98px) {
    .tb-yerel-dugme { min-height: 44px; padding-inline: .8rem .7rem; }
    .tb-yerel-liste a { min-height: 44px; }   /* dolguyla 42px cikiyordu; esik dogrudan yaziliyor */
}

/* --- avantaj bolumu basligi altinda ince marka cizgisi --- */
.tb-avantaj-bas h2 { position: relative; display: inline-block; }
.tb-avantaj-bas h2::after {
    content: ""; position: absolute; left: 50%; bottom: -.55rem;
    width: 46px; height: 2px; border-radius: 2px;
    transform: translateX(-50%);
    background: linear-gradient(90deg,
        var(--basic-secondary, #C62338), var(--basic-primary, #3564AF));
}

/* Kayit formundaki sozlesme kutusu: sayfa basliklari (h2/h3) 160px'lik kutuda dev gorunuyordu */
.contract-scroll h2,.contract-scroll h3{font-size:.875rem;font-weight:600;line-height:1.45;margin-block:1rem .4rem}
.contract-scroll ul,.contract-scroll ol{padding-inline-start:1.1rem;margin-block:0 .5rem}

/* ==========================================================================
   KAYIT SAHNESI (2026-10-17) — giris sahnesinin (.tb-giris) kayit sayfasi uyarlamasi.
   Sahne yuksekligi formun boyuna gore akar; sol pano yapiskan; form giris kartiyla ayni koyu cam.
   data-bs-theme="dark" sahnede verildigi icin form bilesenleri iki kipte de koyu cizilir.
   ========================================================================== */
.tb-kayit { display: block; min-height: 0; padding: clamp(2rem, 4vw, 3.4rem) 0 clamp(2.6rem, 5vw, 4.4rem); }
.tb-kayit-ic { position: relative; z-index: 1; }
.tb-kayit .row { align-items: flex-start; }
.tb-kayit-pano { position: sticky; top: 118px; padding-top: 3.6rem; }
.tb-kayit .tb-giris-form > [data-register-step] > .card { background: rgba(12, 24, 44, .72); border: 1px solid rgba(255,255,255,.12); border-radius: 20px; box-shadow: 0 36px 80px -40px rgba(0,0,0,.95); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
.tb-kayit .tb-giris-form > [data-register-step] > .card > .card-body { padding: clamp(1.3rem, 2.6vw, 2rem) !important; }
.tb-kayit .tb-giris-form h1 { color: #fff; }

/* ==========================================================================
   ANA SAYFA HERO — AYDINLIK KIP (2026-10-17, v2 "porselen kure")
   Kullanici: "karanlik modda harika ama aydinlik moda alinca da ayni kaliyor".
   Kure canvas'i (turkbil-canvas.js, 121 KB) renkleri sabit ve "lighter" karisimla ciziyor; acik zeminde
   isiltilar kaybolur. Betigi yeniden boyamak yerine canvas'a invert + 180deg ton dondurme: zemin seffaf
   oldugu icin yalniz cizilenler doner -> acik mavi isiltilar lacivert, kirmizi Turkiye koyu kirmizi;
   kure gun isiginda kazinmis harita gibi okunur. Koyu kip hic degismez.
   ========================================================================== */
html:not([data-bs-theme="dark"]) .tb-hero {
    color: #13213A;
    /* kagit beyazi gokyuzu: kurenin arkasinda hafif mavi hale, sag ustte cok soluk marka kirmizisi */
    background:
        radial-gradient(58% 78% at 66% 50%, rgba(53, 100, 175, .14) 0%, transparent 64%),
        radial-gradient(42% 52% at 98% 4%, rgba(198, 35, 56, .07) 0%, transparent 62%),
        radial-gradient(50% 60% at 0% 100%, rgba(53, 100, 175, .06) 0%, transparent 60%),
        linear-gradient(180deg, #FFFEFB 0%, #F3F0EA 100%);
}
/* kure artik turkbil-canvas.js icinde aydinlik paletle ("porselen kure") ciziliyor; CSS filtresi yok */
html:not([data-bs-theme="dark"]) .tb-hero::after { background: linear-gradient(100deg, rgba(255,254,251,.94) 0%, rgba(255,254,251,.74) 32%, rgba(255,254,251,.14) 55%, transparent 70%); }
@media (max-width: 992px) { html:not([data-bs-theme="dark"]) .tb-hero::after { background: linear-gradient(180deg, rgba(255,254,251,.94) 0%, rgba(255,254,251,.72) 45%, rgba(255,254,251,.3) 100%); } }
html:not([data-bs-theme="dark"]) .tb-hero h1,
html:not([data-bs-theme="dark"]) .tb-hero h1 .tb-accent { color: #13213A; }
html:not([data-bs-theme="dark"]) .tb-hero .tb-vurgu { filter: none; }
html:not([data-bs-theme="dark"]) .tb-hero-lead { color: #5E6470; }
html:not([data-bs-theme="dark"]) .tb-hero-eyebrow { border-color: rgba(30,34,44,.16); background: rgba(255,254,251,.75); color: #13213A; }
html:not([data-bs-theme="dark"]) .tb-hero .tb-play { color: #13213A; }
html:not([data-bs-theme="dark"]) .tb-hero .tb-play:hover { color: #3564AF; }
html:not([data-bs-theme="dark"]) .tb-hero .tb-play-ring { border-color: rgba(30,34,44,.22); background: #FFFEFB; color: #13213A; }
html:not([data-bs-theme="dark"]) .tb-hero .tb-play:hover .tb-play-ring { background: #FFFEFB; }

/* alan adi karti: beyaz kart; neon cerceve aynen kalir (beyazda da okunuyor) */
html:not([data-bs-theme="dark"]) .tb-domain { background: #FFFEFB; box-shadow: 0 30px 64px -34px rgba(30,34,44,.38); }
html:not([data-bs-theme="dark"]) .tb-domain-canvas { filter: invert(1) hue-rotate(180deg); opacity: .55; }
html:not([data-bs-theme="dark"]) .tb-domain-head h2 { color: #13213A; }
html:not([data-bs-theme="dark"]) .tb-domain-head p { color: #5E6470; }
html:not([data-bs-theme="dark"]) .tb-domain-ikon { border-color: rgba(30,34,44,.1); background: rgba(53,100,175,.08); color: #3564AF; }
html:not([data-bs-theme="dark"]) .tb-domain-exts button { border-color: rgba(30,34,44,.14); background: #FFFEFB; color: #5E6470; }
html:not([data-bs-theme="dark"]) .tb-domain-exts button:hover { border-color: rgba(53,100,175,.5); background: rgba(53,100,175,.06); color: #13213A; }
html:not([data-bs-theme="dark"]) .tb-domain-exts button.is-active { border-color: rgba(198,35,56,.5); background: rgba(198,35,56,.07); color: #A91D30; }
html:not([data-bs-theme="dark"]) .tb-domain-form { background: #FAF8F3; border-color: rgba(30,34,44,.14); }
html:not([data-bs-theme="dark"]) .tb-domain-form input { color: #13213A; }
html:not([data-bs-theme="dark"]) .tb-domain-form input::placeholder { color: rgba(30,34,44,.45); }
html:not([data-bs-theme="dark"]) .tb-domain-oner { border-color: rgba(30,34,44,.12); background: #FFFEFB; }
html:not([data-bs-theme="dark"]) .tb-domain-oner b { color: #13213A; }
html:not([data-bs-theme="dark"]) .tb-domain-oner span { color: #3564AF; }
html:not([data-bs-theme="dark"]) .tb-domain-hint { color: #3564AF; }

/* ==========================================================================
   UST SERIT + BASLIK + MEGA MENU — AYDINLIK KIP (2026-10-17)
   Kullanici: hero'daki "porselen kure" diliyle ayni sekilde calis. Karanlik kip hic degismez.
   Dil: kagit beyazi gokyuzu + lacivert murekkep + marka kirmizisi eylem. Serit kagit tonunda (sinyal izi
   lacivert, tepe isigi kirmizi "canli sinyal"); baslik buzlu beyaz cam, renkli logo; menuler beyaz kart.
   Canvas renkleri turkbil-topbar.js / turkbil-header.js icinde (GUN dali).
   ========================================================================== */
/* --- ust serit --- */
html:not([data-bs-theme="dark"]) .tb-topbar { background: linear-gradient(90deg, #F3F0EA 0%, #FAF8F3 52%, #F3F0EA 100%); color: #5E6470; }
html:not([data-bs-theme="dark"]) .tb-topbar-oge { color: #5E6470; }
html:not([data-bs-theme="dark"]) .tb-topbar-oge:hover { color: #13213A; }
html:not([data-bs-theme="dark"]) .tb-topbar-oge:hover i { color: #3564AF; }
html:not([data-bs-theme="dark"]) .tb-topbar-oge + .tb-topbar-oge::before,
html:not([data-bs-theme="dark"]) .tb-topbar .tb-shell > a + a::before,
html:not([data-bs-theme="dark"]) .tb-topbar-end > a + a::before { background: rgba(30,34,44,.14); }
html:not([data-bs-theme="dark"]) .tb-yerel-dugme { background: #FFFEFB; color: #13213A; box-shadow: inset 0 0 0 1px rgba(30,34,44,.10), 0 1px 2px rgba(30,34,44,.06); }
html:not([data-bs-theme="dark"]) .tb-yerel-dugme:hover,
html:not([data-bs-theme="dark"]) .tb-yerel-dugme[aria-expanded="true"] { background: #FAF8F3; }
html:not([data-bs-theme="dark"]) .tb-yerel-dugme > i:first-child { color: #3564AF; }
html:not([data-bs-theme="dark"]) .tb-yerel-ayrac { background: rgba(30,34,44,.16); }
html:not([data-bs-theme="dark"]) .tb-yerel-dugme:focus-visible { outline-color: #3564AF; }
/* dil / para birimi paneli */
html:not([data-bs-theme="dark"]) .tb-yerel-panel { background: rgba(255,254,251,.98); border-color: rgba(30,34,44,.08); box-shadow: 0 32px 64px -30px rgba(30,34,44,.38); }
html:not([data-bs-theme="dark"]) .tb-yerel-baslik { color: #5E6470; }
html:not([data-bs-theme="dark"]) .tb-yerel-liste + .tb-yerel-baslik { border-top-color: rgba(30,34,44,.08); }
html:not([data-bs-theme="dark"]) .tb-yerel-liste a { color: #13213A; }
html:not([data-bs-theme="dark"]) .tb-yerel-liste a:hover { background: rgba(53,100,175,.06); }
html:not([data-bs-theme="dark"]) .tb-yerel-k { color: #3564AF; }
html:not([data-bs-theme="dark"]) .tb-yerel-a { color: #5E6470; }
html:not([data-bs-theme="dark"]) .tb-yerel-liste a.tb-yerel-aktif { background: rgba(198,35,56,.07); }
html:not([data-bs-theme="dark"]) .tb-yerel-liste a.tb-yerel-aktif .tb-yerel-k,
html:not([data-bs-theme="dark"]) .tb-yerel-liste a.tb-yerel-aktif i { color: #C62338; }
html:not([data-bs-theme="dark"]) .tb-yerel-liste a.tb-yerel-aktif .tb-yerel-a { color: #5E6470; }

/* --- baslik: buzlu beyaz cam --- */
html:not([data-bs-theme="dark"]) .tb-header {
    background: rgba(255,254,251,.86);
    backdrop-filter: saturate(180%) blur(14px); -webkit-backdrop-filter: saturate(180%) blur(14px);
    box-shadow: 0 1px 0 rgba(30,34,44,.05), 0 12px 32px -26px rgba(30,34,44,.40);
}
html:not([data-bs-theme="dark"]) .tb-header .tb-logo .tb-logo-light { display: block; }
html:not([data-bs-theme="dark"]) .tb-header .tb-logo .tb-logo-dark { display: none; }
html:not([data-bs-theme="dark"]) .tb-header .tb-logo .tb-wordmark { color: #13213A; }
html:not([data-bs-theme="dark"]) .tb-header .tb-nav > li > a { color: #1B2A45; }
html:not([data-bs-theme="dark"]) .tb-header .tb-nav > li > a:hover,
html:not([data-bs-theme="dark"]) .tb-header .tb-nav > li:focus-within > a { background: rgba(53,100,175,.07); color: #13213A; }
html:not([data-bs-theme="dark"]) .tb-header .tb-nav > li > a[aria-current="page"],
html:not([data-bs-theme="dark"]) .tb-header .tb-nav > li > a.is-active { color: #13213A; }
html:not([data-bs-theme="dark"]) .tb-header .tb-nav > li > a[aria-current="page"]::after,
html:not([data-bs-theme="dark"]) .tb-header .tb-nav > li > a.is-active::after { box-shadow: 0 2px 8px -2px rgba(198,35,56,.55); }
html:not([data-bs-theme="dark"]) .tb-header .tb-icon-btn { background: #FFFEFB; border-color: rgba(30,34,44,.13); color: #1B2A45; }
html:not([data-bs-theme="dark"]) .tb-header .tb-icon-btn:hover { background: #FAF8F3; color: #13213A; }
html:not([data-bs-theme="dark"]) .tb-header .tb-burger { color: #13213A; border-color: rgba(30,34,44,.16); }
html:not([data-bs-theme="dark"]) .tb-panel-btn { background: #FFFEFB; color: #13213A; box-shadow: 0 1px 2px rgba(30,34,44,.06); }
html:not([data-bs-theme="dark"]) .tb-panel-btn:hover { background: #FAF8F3; color: #13213A; }

/* --- mega menu: beyaz kartlar --- */
html:not([data-bs-theme="dark"]) .tb-mega-ic { background: rgba(255,254,251,.98); border-color: rgba(30,34,44,.08); box-shadow: 0 40px 80px -36px rgba(30,34,44,.42); }
html:not([data-bs-theme="dark"]) .tb-mega-one { border-color: rgba(30,34,44,.06); background: radial-gradient(120% 100% at 100% 0%, rgba(198,35,56,.09), transparent 62%), linear-gradient(160deg, #F3F0EA, #FAF8F3); }
html:not([data-bs-theme="dark"]) .tb-mega-etiket { color: #5E6470; }
html:not([data-bs-theme="dark"]) .tb-mega-one h4 { color: #13213A; }
html:not([data-bs-theme="dark"]) .tb-mega-one p { color: #5E6470; }
html:not([data-bs-theme="dark"]) .tb-mega-oge { border-color: rgba(30,34,44,.07); background: linear-gradient(170deg, #FFFEFB, #FAF8F3); }
html:not([data-bs-theme="dark"]) .tb-mega-oge:hover { border-color: rgba(53,100,175,.38); background: linear-gradient(170deg, rgba(53,100,175,.06), #FFFEFB); box-shadow: 0 16px 32px -24px rgba(30,34,44,.5); }
html:not([data-bs-theme="dark"]) .tb-mega-ikon { border-color: rgba(53,100,175,.24); background: rgba(53,100,175,.07); color: #3564AF; }
html:not([data-bs-theme="dark"]) .tb-mega-oge:hover .tb-mega-ikon { background: rgba(198,35,56,.07); border-color: rgba(198,35,56,.34); color: #C62338; }
html:not([data-bs-theme="dark"]) .tb-mega-oge > b,
html:not([data-bs-theme="dark"]) .tb-mega-metin b { color: #13213A; }
html:not([data-bs-theme="dark"]) .tb-mega-ac { color: #5E6470; }
/* tema dugmesi (.tb-kip): beyaz ikon beyaz camda kayboluyordu */
html:not([data-bs-theme="dark"]) .tb-kip { background: #FFFEFB; border-color: rgba(30,34,44,.13); color: #1B2A45; box-shadow: 0 1px 2px rgba(30,34,44,.06); }
html:not([data-bs-theme="dark"]) .tb-kip:hover { background: #FAF8F3; border-color: rgba(53,100,175,.35); color: #3564AF; }

/* @@ LOGO-KIRMIZISI-AYDINLIK BASLA (acik-kip.py uretir, elle duzenleme) @@ */
html:not([data-bs-theme="dark"]) .tb-topbar::after{background: linear-gradient(90deg,
        transparent, rgba(90,160,255,.55) 22%, rgba(255,254,251,.4) 50%,
        rgba(220,115,128,.55) 78%, transparent)}
html:not([data-bs-theme="dark"]) .tb-topbar-yardim::before{background: var(--basic-secondary, #C4162B)}
html:not([data-bs-theme="dark"]) .tb-topbar-yardim:hover,html:not([data-bs-theme="dark"]) .tb-topbar-yardim:focus-visible{border-color: var(--basic-secondary, #C4162B)}
html:not([data-bs-theme="dark"]) .tb-topbar-yardim:active::before{background: #C4162B}
html:not([data-bs-theme="dark"]) .tb-domain::before{background: conic-gradient(from var(--tb-neon-aci),
        transparent 0deg 196deg,
        rgba(53, 100, 175, .55) 214deg,
        #7998CA 246deg,
        #AABDDD 276deg,
        #D04555 312deg,
        rgba(196, 22, 43, .5) 334deg,
        transparent 352deg 360deg)}
html:not([data-bs-theme="dark"]) .tb-domain::after{background: conic-gradient(from var(--tb-neon-aci),
        transparent 0deg 200deg,
        #7998CA 250deg,
        #D04555 315deg,
        transparent 350deg 360deg)}
html:not([data-bs-theme="dark"]) .tb-domain-form:focus-within{border-color: rgba(196, 22, 43, .5);box-shadow: 0 0 0 4px rgba(196, 22, 43, .12)}
html:not([data-bs-theme="dark"]) .tb-domain-form button{background: linear-gradient(135deg, #D04555, var(--basic-secondary, #C4162B));box-shadow: 0 10px 22px -10px rgba(196, 22, 43, .85)}
html:not([data-bs-theme="dark"]) .tb-domain-form button:hover{box-shadow: 0 14px 28px -10px rgba(196, 22, 43, 1)}
html:not([data-bs-theme="dark"]) .tb-tld:hover i{background: var(--basic-secondary, #C4162B);border-color: var(--basic-secondary, #C4162B)}
html:not([data-bs-theme="dark"]) .tb-cta{background: linear-gradient(120deg, var(--basic-deep), var(--basic-primary) 60%, #A01223)}
html:not([data-bs-theme="dark"]) .tb-topbar .tb-lang-tag{border: 1px solid rgba(208, 69, 85, .55);box-shadow: 0 0 10px -2px rgba(208, 69, 85, .7)}
html:not([data-bs-theme="dark"]) .tb-header::after{background: linear-gradient(90deg,
        rgba(89, 134, 191, 0) 0%,
        #7998CA 18%,
        rgba(150, 176, 214, .85) 38%,
        rgba(255,254,251,.25) 50%,
        rgba(208, 69, 85, .85) 64%,
        rgba(196, 22, 43, .70) 84%,
        rgba(196, 22, 43, 0) 100%)}
html:not([data-bs-theme="dark"]) .tb-header .tb-nav > li > a[aria-current="page"]::after,html:not([data-bs-theme="dark"]) .tb-header .tb-nav > li > a.is-active::after{background: var(--basic-secondary, #C4162B);box-shadow: 0 0 8px -1px rgba(196, 22, 43, .9)}
html:not([data-bs-theme="dark"]) .tb-panel-btn::before{background: linear-gradient(100deg, #7998CA 0%, #3564AF 45%, #D04555 100%)}
html:not([data-bs-theme="dark"]) .tb-panel-btn::before{background: conic-gradient(from var(--tb-neon-aci),
        transparent 0deg 188deg,
        rgba(53, 100, 175, .5) 208deg,
        #7998CA 242deg,
        #AABDDD 272deg,
        #D04555 308deg,
        rgba(196, 22, 43, .5) 332deg,
        transparent 350deg 360deg)}
html:not([data-bs-theme="dark"]) .tb-panel-btn::after{background: conic-gradient(from var(--tb-neon-aci),
        transparent 0deg 195deg,
        #7998CA 245deg,
        #D04555 312deg,
        transparent 348deg 360deg)}
html:not([data-bs-theme="dark"]) .tb-hero{background:
        radial-gradient(120% 95% at 72% 45%, #16305e 0%, transparent 58%),
        radial-gradient(70% 80% at 97% 25%, rgba(160, 18, 35, .45) 0%, transparent 60%),
        radial-gradient(60% 70% at 3% 85%, rgba(53, 100, 175, .35) 0%, transparent 62%),
        linear-gradient(180deg, #050a18 0%, #081026 52%, #060b1c 100%)}
html:not([data-bs-theme="dark"]) .tb-hero-eyebrow::before{background: var(--basic-secondary, #C4162B);box-shadow: 0 0 8px 1px rgba(196,22,43,.9)}
html:not([data-bs-theme="dark"]) .tb-vurgu{background: linear-gradient(90deg, #C4162B 0%, #DC7380 55%, #E7A2AA 100%);filter: drop-shadow(0 0 16px rgba(208,69,85,.35));-webkit-background-clip: text;background-clip: text;color: transparent;-webkit-text-fill-color: transparent}
html:not([data-bs-theme="dark"]) .tb-hero .tb-btn-primary,html:not([data-bs-theme="dark"]) .tb-hero .tb-btn-solid{background: linear-gradient(135deg, #D04555 0%, var(--basic-secondary, #C4162B) 100%);box-shadow: 0 12px 28px -10px rgba(196, 22, 43, .85)}
html:not([data-bs-theme="dark"]) .tb-hero .tb-btn-primary:hover,html:not([data-bs-theme="dark"]) .tb-hero .tb-btn-solid:hover{box-shadow: 0 18px 36px -12px rgba(196, 22, 43, 1)}
html:not([data-bs-theme="dark"]) ::-webkit-scrollbar-thumb:hover{background-color: var(--basic-secondary, #C4162B)}
html:not([data-bs-theme="dark"]) .tb-mega-ic::before{background: linear-gradient(90deg,
        transparent 0%, var(--basic-primary, #3564AF) 22%,
        #93B3D1 48%, var(--basic-secondary, #C4162B) 76%, transparent 100%)}
html:not([data-bs-theme="dark"]) .tb-mega-one{background:
        radial-gradient(120% 100% at 100% 0%, rgba(196,22,43,.20), transparent 62%),
        linear-gradient(160deg, rgba(53,100,175,.22), rgba(30,34,44,.5))}
html:not([data-bs-theme="dark"]) .tb-mega-cta{background: linear-gradient(135deg, #D04555, var(--basic-secondary, #C4162B));box-shadow: 0 8px 20px -8px rgba(196,22,43,.8)}
html:not([data-bs-theme="dark"]) .tb-mega-oge:hover .tb-mega-ikon{background: rgba(196,22,43,.18);border-color: rgba(196,22,43,.55);color: #DC7380}
html:not([data-bs-theme="dark"]) .tb-mega-cizgi{background: linear-gradient(90deg, var(--basic-primary,#3564AF), var(--basic-secondary,#C4162B))}
html:not([data-bs-theme="dark"]) .tb-domain-exts button.is-active{border-color: rgba(196,22,43,.65);background: rgba(196,22,43,.18)}
html:not([data-bs-theme="dark"]) .tb-hizmet-kart:hover .tb-hizmet-ikon{background: rgba(196,22,43,.12);border-color: rgba(196,22,43,.45);color: var(--basic-secondary, #C4162B)}
html:not([data-bs-theme="dark"]) .tb-hizmet-kart:hover .tb-hizmet-git{color: var(--basic-secondary, #C4162B)}
html:not([data-bs-theme="dark"]) .tb-hizmet-cizgi{background: linear-gradient(90deg, var(--basic-primary,#3564AF), var(--basic-secondary,#C4162B))}
html:not([data-bs-theme="dark"]) .tb-fstat-slogan::after{background: linear-gradient(90deg, transparent, var(--basic-secondary, #C4162B) 35%, #DC7380 85%, transparent)}
html:not([data-bs-theme="dark"]) .tb-cta{background:
        radial-gradient(120% 140% at 0% 0%, #16325C 0%, transparent 55%),
        linear-gradient(118deg, #0D1E3C 0%, #2B5695 48%, #7C0E1B 100%)}
html:not([data-bs-theme="dark"]) .tb-cta::before{background: conic-gradient(from var(--tb-neon-aci),
        rgba(53,100,175,0) 0deg,
        #3564AF 42deg,
        rgba(53,100,175,0) 86deg,
        rgba(196,22,43,0) 112deg,
        #C4162B 154deg,
        rgba(196,22,43,0) 198deg,
        rgba(10,167,75,0) 224deg,
        #0AA74B 264deg,
        rgba(10,167,75,0) 304deg,
        rgba(241,183,28,0) 322deg,
        #F1B71C 344deg,
        rgba(241,183,28,0) 360deg)}
html:not([data-bs-theme="dark"]) .tb-cta::after{background: conic-gradient(from var(--tb-neon-aci),
        rgba(53,100,175,0) 0deg, rgba(53,100,175,.5) 42deg, rgba(53,100,175,0) 86deg,
        rgba(196,22,43,0) 112deg, rgba(196,22,43,.5) 154deg, rgba(196,22,43,0) 198deg,
        rgba(10,167,75,0) 224deg, rgba(10,167,75,.45) 264deg, rgba(10,167,75,0) 304deg,
        rgba(241,183,28,0) 322deg, rgba(241,183,28,.45) 344deg, rgba(241,183,28,0) 360deg)}
html:not([data-bs-theme="dark"]) .tb-neden-ust{border: 1px solid rgba(196, 22, 43, 0.320);border: 1px solid color-mix(in srgb, var(--basic-secondary, #C4162B) 32%, transparent);background: rgba(196, 22, 43, 0.080);background: color-mix(in srgb, var(--basic-secondary, #C4162B) 8%, transparent);color: var(--basic-secondary, #C4162B)}
html:not([data-bs-theme="dark"]) .tb-neden-cubuk{background: linear-gradient(90deg, var(--basic-secondary, #C4162B), var(--basic-primary, #3564AF))}
html:not([data-bs-theme="dark"]) .tb-neden-btn{background: linear-gradient(135deg, #D04555, var(--basic-secondary, #C4162B));box-shadow: 0 14px 30px -14px rgba(196, 22, 43, 0.900);box-shadow: 0 14px 30px -14px color-mix(in srgb, var(--basic-secondary, #C4162B) 90%, transparent)}
html:not([data-bs-theme="dark"]) .tb-neden-btn:hover{box-shadow: 0 20px 40px -16px rgba(196, 22, 43, 0.950);box-shadow: 0 20px 40px -16px color-mix(in srgb, var(--basic-secondary, #C4162B) 95%, transparent)}
html:not([data-bs-theme="dark"]) .tb-mk-hero::after{background: linear-gradient(90deg, transparent, rgba(150,195,255,.6) 28%, rgba(255,254,251,.4) 52%, rgba(220,115,128,.7) 76%, transparent)}
html:not([data-bs-theme="dark"]) .tb-giris-form .btn-primary{background: linear-gradient(135deg, #D04555, var(--basic-secondary, #C4162B));box-shadow: 0 14px 30px -14px rgba(196,22,43,.85)}
html:not([data-bs-theme="dark"]) .tb-avantaj{background:
        radial-gradient(60% 55% at 88% 86%, rgba(196,22,43,.26), transparent 68%),
        radial-gradient(90% 70% at 42% 46%, rgba(30,34,44,.45), transparent 70%),
        linear-gradient(180deg, #13213A 0%, #13213A 52%, #13213A 100%)}
html:not([data-bs-theme="dark"]) .tb-avantaj::before,html:not([data-bs-theme="dark"]) .tb-avantaj::after{background: linear-gradient(90deg,
        transparent, rgba(90,160,255,.75) 26%, rgba(255,254,251,.55) 50%,
        rgba(220,115,128,.75) 74%, transparent)}
html:not([data-bs-theme="dark"]) .tb-av2-oge:hover{border-color: rgba(220,115,128,.55);box-shadow: 0 0 0 1px rgba(220,115,128,.18), 0 18px 40px -22px rgba(220,115,128,.55)}
html:not([data-bs-theme="dark"]) .tb-sepet-btn .tb-badge{background: var(--basic-secondary, #C4162B)}
html:not([data-bs-theme="dark"]) .tb-hesap-cikis{color: var(--basic-secondary, #C4162B)}
html:not([data-bs-theme="dark"]) .tb-hesap-cikis i{color: var(--basic-secondary, #C4162B)}
html:not([data-bs-theme="dark"]) .tb-hesap-cikis:hover{background: rgba(196, 22, 43, 0.090);background: color-mix(in srgb, var(--basic-secondary, #C4162B) 9%, transparent);color: var(--basic-secondary, #C4162B)}
html:not([data-bs-theme="dark"]) .tb-hesap-cikis:hover i{color: var(--basic-secondary, #C4162B)}
html:not([data-bs-theme="dark"]) .tb-eyebrow{color: var(--basic-secondary, #C4162B)}
html:not([data-bs-theme="dark"]) .tb-eklem::before{background: linear-gradient(180deg,
        transparent,
        color-mix(in srgb, var(--basic-secondary, #C4162B) 32%, transparent) 30%,
        color-mix(in srgb, var(--basic-secondary, #C4162B) 32%, transparent) 70%,
        transparent)}
html:not([data-bs-theme="dark"]) .tb-eklem::after{border-color: rgba(196, 22, 43, 0.550);border-color: color-mix(in srgb, var(--basic-secondary, #C4162B) 55%, transparent)}
html:not([data-bs-theme="dark"]) .tb-neden-ust{color: var(--basic-secondary, #C4162B)}
html:not([data-bs-theme="dark"]) .tb-neden-cubuk{background: linear-gradient(90deg,
        var(--basic-secondary, #C4162B), var(--basic-primary, #3564AF))}
html:not([data-bs-theme="dark"]) .tb-hizmet-kart::before{background: linear-gradient(90deg,
        var(--basic-secondary, #C4162B), var(--basic-primary, #3564AF))}
html:not([data-bs-theme="dark"]) .tb-yazi-one .tb-yazi-ust b{color: var(--basic-secondary, #C4162B)}
html:not([data-bs-theme="dark"]) .tb-yerel-panel::before{background: linear-gradient(90deg,
        transparent 0%, var(--basic-primary, #3564AF) 22%,
        #93B3D1 48%, var(--basic-secondary, #C4162B) 76%, transparent 100%)}
html:not([data-bs-theme="dark"]) .tb-yerel-liste a.tb-yerel-aktif{background: rgba(196,22,43,.16)}
html:not([data-bs-theme="dark"]) .tb-yerel-liste a.tb-yerel-aktif .tb-yerel-k,html:not([data-bs-theme="dark"]) .tb-yerel-liste a.tb-yerel-aktif i{color: #E7A2AA}
html:not([data-bs-theme="dark"]) .tb-avantaj-bas h2::after{background: linear-gradient(90deg,
        var(--basic-secondary, #C4162B), var(--basic-primary, #3564AF))}
/* @@ LOGO-KIRMIZISI-AYDINLIK BITIR @@ */

/* @@ ELLE-AYDINLIK @@ */

/* AYDINLIK KIP — VURGU SOZCUGU logo kirmizisi, parlama yok (2026-10-17) */
html:not([data-bs-theme="dark"]) .tb-hk .tb-vurgu,
html:not([data-bs-theme="dark"]) .tb-hero .tb-vurgu { background: linear-gradient(90deg, #C4162B 0%, #D04555 100%); -webkit-background-clip: text; background-clip: text; filter: none; }

/* AYDINLIK KIP — kirmizi golge ve isiklar kagitta pembe leke birakiyordu: sakinlestirildi (2026-10-17) */
html:not([data-bs-theme="dark"]) .tb-hero .tb-btn-primary,
html:not([data-bs-theme="dark"]) .tb-hero .tb-btn-solid { background: #C4162B; box-shadow: 0 10px 22px -12px rgba(196,22,43,.55); }
html:not([data-bs-theme="dark"]) .tb-hero .tb-btn-primary:hover,
html:not([data-bs-theme="dark"]) .tb-hero .tb-btn-solid:hover { background: #A01223; }
html:not([data-bs-theme="dark"]) .tb-domain-form button { background: #C4162B; box-shadow: 0 8px 18px -10px rgba(196,22,43,.5); }
html:not([data-bs-theme="dark"]) .tb-domain-form button:hover { background: #A01223; box-shadow: 0 10px 22px -10px rgba(196,22,43,.55); }
html:not([data-bs-theme="dark"]) .tb-hero {
    background:
        radial-gradient(58% 78% at 66% 50%, rgba(53, 100, 175, .14) 0%, transparent 64%),
        radial-gradient(50% 60% at 0% 100%, rgba(53, 100, 175, .06) 0%, transparent 60%),
        linear-gradient(180deg, #FFFEFB 0%, #F3F0EA 100%);
}

/* AYDINLIK KIP — tema degiskeni (theme.php color2 karanlik icin C62338 kaldi) */
:root:not([data-bs-theme="dark"]) { --basic-secondary: #C4162B; --basic-secondary-rgb: 196, 22, 43; }

/* AYDINLIK HERO — EK YERI (2026-10-17): hero #EDF2F9 ile bitip altindaki sayfa zemini #F5F6F8'e keskin
   geciyordu (alan adi kartinin saginda yatay cizgi, olculdu y=692). Alt renk = sayfa zemini; gecis kesintisiz. */
html:not([data-bs-theme="dark"]) .tb-hero {
    background:
        radial-gradient(58% 78% at 66% 50%, rgba(53, 100, 175, .14) 0%, transparent 64%),
        radial-gradient(50% 60% at 0% 100%, rgba(53, 100, 175, .05) 0%, transparent 60%),
        linear-gradient(180deg, #FFFEFB 0%, #FAF8F3 58%, #FAF8F3 100%);
}


/* ==========================================================================
   RESMI BELGE KAGIDI — AYDINLIK MOD (2026-10-17). Kullanici: saf beyaz soguk, Night Shift fazla turuncu;
   "hosting firmasi icin en iyisini sen sec". Karar (kurumsal durus: GUVEN, kamu kurumu ciddiyeti):
   fildisi zemin #FAF8F3 · kart #FFFEFB · ikincil #F3F0EA · cizgi #E6E0D6 (tas) · metin MARKA LACIVERTI
   #13213A · soluk #5E6470 · yapisal mavi #004B93/#3564AF · eylem LOGO KIRMIZISI #C4162B (degismez).
   Tapu/pasaport/banka evraki dili: sicak kagit + lacivert murekkep. YALNIZ AYDINLIK; karanlik degismez.
   ========================================================================== */
:root:not([data-bs-theme="dark"]) {
    --tb-ink: #13213A; --tb-ink-soft: #5E6470; --tb-line: #E6E0D6; --tb-surface: #FFFEFB; --tb-surface-2: #F3F0EA;
    --tb-ring: 0 0 0 1px rgba(30,34,44,.07);
    --tb-shadow: 0 1px 2px rgba(30,34,44,.05), 0 12px 28px -18px rgba(30,34,44,.28);
    --tb-shadow-lg: 0 30px 70px -40px rgba(30,34,44,.40);
    --bs-body-bg: #FAF8F3; --bs-body-color: #1B2A45; --bs-emphasis-color: #13213A;
    --bs-secondary-color: #5E6470; --bs-secondary-bg: #F3F0EA; --bs-tertiary-bg: #F3F0EA;
    --bs-border-color: #E6E0D6; --bs-border-color-translucent: rgba(30,34,44,.08);
}
html:not([data-bs-theme="dark"]) body { background-color: #FAF8F3; color: #1B2A45; }
html:not([data-bs-theme="dark"]) .card, html:not([data-bs-theme="dark"]) .dropdown-menu,
html:not([data-bs-theme="dark"]) .modal-content, html:not([data-bs-theme="dark"]) .popover,
html:not([data-bs-theme="dark"]) .offcanvas { --bs-card-bg: #FFFEFB; --bs-dropdown-bg: #FFFEFB; --bs-modal-bg: #FFFEFB; --bs-popover-bg: #FFFEFB; --bs-offcanvas-bg: #FFFEFB;
    --bs-card-border-color: #E6E0D6; --bs-dropdown-border-color: #E6E0D6; }
html:not([data-bs-theme="dark"]) .form-control, html:not([data-bs-theme="dark"]) .form-select { background-color: #FFFEFB; border-color: #DDD6CA; color: #13213A; }
/* hero: fildisi; kurenin arkasinda cok hafif lacivert golge (murekkep), sicak kagit tonu */
html:not([data-bs-theme="dark"]) .tb-hero {
    background:
        radial-gradient(56% 76% at 66% 50%, rgba(19, 33, 58, .07) 0%, transparent 64%),
        linear-gradient(180deg, #FCFBF7 0%, #F6F3EC 60%, #FAF8F3 100%);
}

/* atlas gravuru (2026-10-17): kurenin arkasindaki lacivert/gri hale kaldirildi (bej kure + soguk hale "kirli top" yapiyordu) */
html:not([data-bs-theme="dark"]) .tb-hero { background: linear-gradient(180deg, #FCFBF7 0%, #F7F4EE 60%, #FAF8F3 100%); }

/* GEZEGEN (2026-10-17): aydinlikta kure opak lacivert nesne; metin perdesi kurenin uzerine sis gibi binmesin diye
   perde yalniz metin sutununu korur (0-50%). Zemin sade fildisi (hale/golge canvas icinde). */
html:not([data-bs-theme="dark"]) .tb-hero::after { background: linear-gradient(100deg, rgba(250,248,243,.97) 0%, rgba(250,248,243,.86) 30%, rgba(250,248,243,.30) 44%, transparent 52%); }
html:not([data-bs-theme="dark"]) .tb-hero { background: linear-gradient(180deg, #FCFBF7 0%, #F8F5EF 60%, #FAF8F3 100%); }
/* GEZEGEN mobil (aydinlik): koyu kure metnin arkasina yari saydam giriyordu (lacivert metin, lacivert kure);
   kure soluk filigran olur, perde metin bandini korur. Karanlik kip kurali (opacity .5) degismez. */
@media (max-width: 992px) {
    html:not([data-bs-theme="dark"]) .tb-hero-canvas { opacity: .22; }
    html:not([data-bs-theme="dark"]) .tb-hero::after { background: linear-gradient(180deg, rgba(250,248,243,.92) 0%, rgba(250,248,243,.70) 55%, rgba(250,248,243,.25) 100%); }
}
/* ATLAS SAYFASI (2026-10-17): harita hafif murekkep; perde yalniz metin sutunu, mobilde filigran daha gorunur */
html:not([data-bs-theme="dark"]) .tb-hero::after { background: linear-gradient(100deg, rgba(250,248,243,.97) 0%, rgba(250,248,243,.88) 28%, rgba(250,248,243,.25) 42%, transparent 48%); }
@media (max-width: 992px) { html:not([data-bs-theme="dark"]) .tb-hero-canvas { opacity: .38; } }

/* 2026-10-21 kullanıcı: açılır panellerin yüzeyi tek beden — mega menü ve dil/para paneli aynı yarı saydam cam */
/* 2026-10-21: kullanici onceki (bulanik, .86/.9) hali tercih etti; geri alindi. */
.tb-mega-ic, .tb-yerel-panel { background: linear-gradient(165deg, rgba(10,22,46,.86), rgba(5,12,28,.9)); backdrop-filter: blur(22px) saturate(140%); -webkit-backdrop-filter: blur(22px) saturate(140%); border-color: rgba(255,255,255,.12); }
html:not([data-bs-theme="dark"]) .tb-mega-ic, html:not([data-bs-theme="dark"]) .tb-yerel-panel { background: rgba(255,254,251,.9); border-color: rgba(30,34,44,.09); }

/* 2026-10-21 RTL: ".com" gibi uzantilar Arapca akista "com." diye ters okunuyordu — her zaman soldan saga */
.tb-domain-tld-btn, .tb-domain-tld-btn span, .tb-domain-exts button, .tb-domain-tld-menu button, #domain-query { direction: ltr; unicode-bidi: isolate; }
[dir="rtl"] #domain-query { text-align: right; }
[dir="rtl"] #domain-query::placeholder { direction: rtl; }

/* 2026-10-21 RTL: telefon numarasi ve e-posta Arapca akista ters diziliyordu ("40 51 514 (212) 90+") */
[dir="rtl"] a[href^="tel:"], [dir="rtl"] a[href^="mailto:"], [dir="rtl"] .tb-tel, [dir="rtl"] .tb-eposta { direction: ltr; unicode-bidi: isolate; display: inline-block; }
/* kayit onay cumlesi: cekirdek .form-check-label inline-flex → baglantilar ayri kutu oluyor, kelime sirasi karisiyor */
label[for="reg-terms"] { display: inline; }
/* adres Latin yazildigi icin RTL akista "36/A" parcalaniyordu; adres kutulari soldan saga, hizalama sagda kalir */
[dir="rtl"] footer address, [dir="rtl"] .tb-il-genis span, [dir="rtl"] .tb-il-harita-kart p, [dir="rtl"] .tb-kunye-adres { direction: ltr; unicode-bidi: isolate; text-align: end; }

/* 2026-10-21: uzun basliklı dillerde hero 3-4 satira sarip kart konumunu kaydiriyordu (olculdu: el 4, uk 3 satir).
   Baslik bu dillerde bir kademe kucuk; kart konumu tum dillerde ayni hizada kalir. */
html[lang="el"] .tb-hero h1, html[lang="uk"] .tb-hero h1, html[lang="ru"] .tb-hero h1 { font-size: clamp(2rem, 3.9vw, 3.1rem); }
/* 2026-10-22: paragraf kisa dillerde (ar, zh) hero kisaliyor, kart yukari kayiyordu -> 3 satirlik yer her dilde ayrilir */
.tb-hero-lead { min-height: calc(3 * 1.6em); } /* 2026-10-22: sutun 700 px olunca ru/fr/es/pt/pt-br/it tam boyda 2 satira sigiyor; yalniz el/uk kucuk */
.tb-hero h1 { text-wrap: balance; }

/* 2026-10-22 kullanici: "Arapcada dunya karanlik". .tb-hero::after gecisi 100deg ile SOL tarafi karartir (LTR'de metnin alti);
   RTL'de kure solda kaldigi icin karariyordu. Sagdan sola dillerde gecis aynalanir (260deg): metin sagda korunur, kure acik kalir. */
html[dir="rtl"] .tb-hero::after { background: linear-gradient(260deg, rgba(5,10,24,.93) 0%, rgba(5,10,24,.72) 32%, rgba(5,10,24,.15) 55%, transparent 70%); }
html[dir="rtl"]:not([data-bs-theme="dark"]) .tb-hero::after { background: linear-gradient(260deg, rgba(5,10,24,.93) 0%, rgba(5,10,24,.72) 32%, rgba(5,10,24,.15) 55%, transparent 70%); }   /* aydinlik kipte de TR ile ayni koyu renkler, aynali */

/* 2026-10-22 kullanici: Arapca "Sizi arayalim" sekmesinde harfler kopuk. Sebep: letter-spacing Arapca bitisik yaziyi parcalar
   (dikey sekme .05em, rozetler/eyebrow'lar .01-.12em). Sagdan sola dillerde harf araligi her yerde sifir. */
html[dir="rtl"] body, html[dir="rtl"] body * { letter-spacing: 0 !important; }
html[dir="rtl"] .tb-ara-sekme-metin { text-orientation: mixed; }

/* 2026-10-22 RTL (ar) QA: fiziksel left/right ile yazilmis bilesenler sagdan sola dillerde aynalanir */
/* ayirici cizgili istatistik seritleri: cizgi ogeler ARASINDA kalsin (Arapcada 2.-3. oge bitisik, cizgi dis kenardaydi) */
html[dir="rtl"] .tb-r2-olcu li, html[dir="rtl"] .tb-h7-stat li, html[dir="rtl"] .tb-kh-guv li, html[dir="rtl"] .tb-kt-guv li { border-right: 0; border-left: 1px solid rgba(255,255,255,.14); }
html[dir="rtl"] .tb-r2-olcu li { padding: 0 0 0 1.2rem; margin: 0 0 .8rem 1.2rem; }
html[dir="rtl"] .tb-h7-stat li { padding-right: 0; padding-left: .6rem; }
html[dir="rtl"] .tb-kh-guv li { padding-right: 0; padding-left: .6rem; }
html[dir="rtl"] .tb-kt-guv li { padding-right: 0; padding-left: .7rem; }
html[dir="rtl"] .tb-r2-olcu li:last-child, html[dir="rtl"] .tb-h7-stat li:last-child, html[dir="rtl"] .tb-kh-guv li:last-child, html[dir="rtl"] .tb-kt-guv li:last-child { border-left: 0; margin-left: 0; padding-left: 0; }
@media (max-width: 899.98px) { html[dir="rtl"] .tb-kh-guv li, html[dir="rtl"] .tb-h7-stat li { border-left: 0; padding-left: 0; } }
@media (max-width: 575.98px) { html[dir="rtl"] .tb-kt-guv li { border-left: 0; padding-left: 0; } }
@media (min-width: 992px) { html[dir="rtl"] .tb-r3-ozellik li + li { border-left: 0; padding-left: 0; border-right: 1px solid rgba(15,32,55,.08); padding-right: 1.4rem; } html[dir="rtl"][data-bs-theme="dark"] .tb-r3-ozellik li + li { border-right-color: rgba(141,184,255,.12); } }
/* bolum ust etiketi oku ve alan adi arama oklari ileri yonu (sola) gostersin */
html[dir="rtl"] .tb-r-ust::before { transform: scaleX(-1); }
html[dir="rtl"] .tb-domain-wrap .tb-domain-form > button[type="submit"]::after { content: "\2190"; margin-left: 0; margin-right: .2rem; }
html[dir="rtl"] .tb-domain-wrap .tb-domain-oner::after { content: "\2190"; margin-left: 0; margin-right: .45rem; transform: translateX(4px); }
/* SSS arti isareti ve karsilastirma grup oku satirin sonuna (sola); paket basligi saga */
html[dir="rtl"] .tb-h5-sss .tb-sss-ok, html[dir="rtl"] .tb-k8-grup-bas .ok { margin-left: 0; margin-right: auto; }
html[dir="rtl"] .tb-k8-grup-bas { text-align: right; }
html[dir="rtl"] .tb-k8-grup dd { text-align: left; }
html[dir="rtl"] .tb-k8-tablo th:first-child, html[dir="rtl"] .tb-k8-tablo td:first-child { left: auto; right: 0; text-align: right; }
html[dir="rtl"] .tb-h5-ust .tb-h5-bas { text-align: right; }
/* canli panel rozetleri ve olcek degerleri */
html[dir="rtl"] .tb-kh-pano-bas .tb-h7-taze, html[dir="rtl"] .tb-kh-canli { margin-left: 0; margin-right: auto; }
html[dir="rtl"] .tb-kh-olcek b, html[dir="rtl"] .tb-h7-grafik small, html[dir="rtl"] .tb-kt-not { text-align: left; }
html[dir="rtl"] .tb-h7-grafik-bas b { white-space: nowrap; }
/* iletisim kanal kartlari: tel/mailto kurali kartin tamamini LTR satir-ici yapiyordu (baslik, numara, aciklama yan yana) */
html[dir="rtl"] .tb-il-kanal a[href^="tel:"], html[dir="rtl"] .tb-il-kanal a[href^="mailto:"] { direction: rtl; unicode-bidi: normal; display: grid; }
html[dir="rtl"] .tb-il-kanal a[href^="mailto:"] span { direction: ltr; unicode-bidi: isolate; }
html[dir="rtl"] .tb-il-kanal a > span { text-align: right; }
/* ust serit: simge metnin basinda (sagda) ve bosluklu; numara/e-posta yine soldan saga */
html[dir="rtl"] a.tb-topbar-oge[href^="tel:"], html[dir="rtl"] a.tb-topbar-oge[href^="mailto:"] { direction: rtl; display: inline-flex; }
html[dir="rtl"] a.tb-topbar-oge > span { direction: ltr; unicode-bidi: isolate; }
/* sunucu kartlari: "2 x 480GB SSD", "2 x Xeon ..." Arapca akista "x 480GB SSD 2" diye ters diziliyordu */
html[dir="rtl"] .tb-sv-spec b { direction: ltr; unicode-bidi: isolate; text-align: right; }
html[dir="rtl"] .tb-sv-cip i { margin-right: 0; margin-left: .25rem; }

/* 2026-10-22 QA: Barlow'da Kiril yok -> Rusca/Ukraynaca basliklarda Latin kelimeler Barlow, Kiril harfler sistem yazi tipi cikiyordu.
   Kiril dillerde baslik yazi tipi Golos Text (Latin + Kiril tek aile). */
html[lang="ru"], html[lang="uk"] { --tb-font-baslik: "Golos Text", "Open Sans", system-ui, sans-serif; }
/* Rusca/Ukraynaca altlik menusunde otomatik heceleme yanlis bolmeler uretiyordu (по-чтовый) */
html[lang="ru"] footer, html[lang="uk"] footer { hyphens: manual; -webkit-hyphens: manual; }

/* 2026-10-22: 17+ dil ile dil/para paneli 820px'i asiyor; alcak ekranlarda (1366x768) alt kisim tasmasin */
.tb-yerel-panel { max-block-size: calc(100vh - 70px); max-block-size: calc(100dvh - 70px); overflow-y: auto; overscroll-behavior: contain; }

/* 2026-10-22: Korece kelime icinden kiriliyordu ("캠페|인", "등록하세|요"); Korece bosluklu yazilir, kirilma bosluklarda olmali */
html[lang="ko"] body { word-break: keep-all; overflow-wrap: anywhere; }

/* Bilgi bankasi (2026-10-23): kod blogu etiketi dosya yolu ve komut adi tasir (/etc/ssh/sshd_config, .htaccess, wp-config.php).
   Temanin buyuk harf donusumu Linux yollarini yanlis gosterir; Turkce yerelde "i" harfini "İ" yapar. Ozgun yazim, es aralikli yazi. */
.kb-codeblock .kb-codeblock-label { text-transform: none; letter-spacing: 0; font-family: var(--kb-font-mono); font-size: .78rem; }

/* Bilgi bankasi sagdan sola diller (ar, fa) (2026-10-23): kod her dilde soldan saga okunur.
   pre sayfanin rtl yonunu aliyordu: satir basindaki # ve / satir sonuna kaciyor, ".htaccess" "htaccess." gorunuyordu.
   Kod etiketi ilk harfine gore yon alir: "الطرفية" sagdan sola, "/etc/ssh/sshd_config" soldan saga. */
[dir="rtl"] .kb-codeblock pre, [dir="rtl"] .kb-codeblock pre code { direction: ltr; text-align: left; unicode-bidi: isolate; }
[dir="rtl"] .kb-codeblock .kb-codeblock-label { unicode-bidi: plaintext; }
[dir="rtl"] .kb-prose :not(pre) > code, [dir="rtl"] .kb-prose kbd { direction: ltr; unicode-bidi: isolate; }

/* Bilgi bankasi makale sayfasi (2026-10-23): kenardaki erisilebilirlik dugmesi (.tb-er-sekme: sabit, 56px, kenardan 16px)
   yapiskan "Bu sayfada" listesinin dis kenarindaki 48px'i okuma boyunca ortuyordu (992-1551px; 1552px ustunde kapsayici payi 8px birakir).
   Satirin o kenarina dugme kadar pay: uc sutun orantili daralir, liste dugmeden 8px once biter. RTL'de ayni mantiksal kenar. */
@media (min-width: 992px) and (max-width: 1551.98px) {
  .row:has(> aside .kb-toc) { margin-inline-end: calc(-.5 * var(--bs-gutter-x) + 3.5rem); }
}

/* 2026-10-23 DESTEK v17 — UZMAN EKIBI (kullanici "7." -> yeni yaklasim). Tek temsilci yerine EKIP: ust uste binen uc yuvarlak
   siluet (lacivert / mavi / yesil — paletten), sonuncusunun kosesinde yesil LED. Yanda "Destek" / "Uzmanlarimiz cevrimici"
   (ust_uzman_cevrimici, 20 dil). Dil secicisiyle ayni aile hap. Ust uste binme margin-inline-start ile -> RTL aynalanir. */
.tb-destek {
    display: inline-flex; align-items: center; gap: .55rem; flex: none;
    height: 34px; padding-block: 0; padding-inline: .35rem .9rem; border: 0; border-radius: 999px;
    background: rgba(255,255,255,.08); box-shadow: inset 0 0 0 1px rgba(255,255,255,.1);
    color: #fff; cursor: pointer; text-align: start; white-space: nowrap;
    -webkit-tap-highlight-color: transparent; transition: background-color .18s ease;
}
.tb-destek-ekip { position: relative; display: inline-flex; align-items: center; flex: none; }
.tb-destek-ekip i { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; color: rgba(255,255,255,.95);
    box-shadow: 0 0 0 2px #16335E; transition: transform .25s ease; }
.tb-destek-ekip i + i { margin-inline-start: -8px; }
.tb-destek-ekip i svg { display: block; width: 14px; height: 14px; margin-top: 3px; }
.tb-destek-ekip .k1 { background: linear-gradient(160deg, #2A4E86, #13213A); }
.tb-destek-ekip .k2 { background: linear-gradient(160deg, #3D86E6, #004b93); }
.tb-destek-ekip .k3 { background: linear-gradient(160deg, #22C46E, #008A43); }
.tb-destek-led { position: absolute; inset-inline-end: -2px; bottom: -1px; width: 8px; height: 8px; border-radius: 50%;
    background: #7CF0B0; box-shadow: 0 0 0 2px #16335E, 0 0 6px rgba(124,240,176,.8); animation: tbDestekLed 6s steps(1, end) infinite; }
@keyframes tbDestekLed { 0%, 78% { opacity: 1; } 80% { opacity: .2; } 83% { opacity: 1; } 86% { opacity: .2; } 89%, 100% { opacity: 1; } }
.tb-destek-yazi { display: flex; flex-direction: column; justify-content: center; gap: 1px; }
.tb-destek-yazi b { font: 600 .78rem/14px var(--tb-font-baslik, inherit); color: #fff; }
.tb-destek-yazi small { font-size: .64rem; line-height: 12px; font-weight: 500; color: #9FD9B8; }
.tb-destek:hover { background: rgba(255,255,255,.14); }
.tb-destek:hover .tb-destek-ekip .k1 { transform: translateX(-2px); } .tb-destek:hover .tb-destek-ekip .k3 { transform: translateX(2px); }
html[dir="rtl"] .tb-destek:hover .tb-destek-ekip .k1 { transform: translateX(2px); } html[dir="rtl"] .tb-destek:hover .tb-destek-ekip .k3 { transform: translateX(-2px); }
.tb-destek:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
html:not([data-bs-theme="dark"]) .tb-destek { background: #FFFEFB; box-shadow: inset 0 0 0 1px rgba(30,34,44,.10), 0 1px 2px rgba(30,34,44,.06); }
html:not([data-bs-theme="dark"]) .tb-destek:hover { background: #FAF8F3; }
html:not([data-bs-theme="dark"]) .tb-destek-ekip i { box-shadow: 0 0 0 2px #FFFEFB; }
html:not([data-bs-theme="dark"]) .tb-destek-led { background: #00C060; box-shadow: 0 0 0 2px #FFFEFB, 0 0 5px rgba(0,166,81,.5); }
html:not([data-bs-theme="dark"]) .tb-destek-yazi b { color: #13213A; }
html:not([data-bs-theme="dark"]) .tb-destek-yazi small { color: #00843F; }
html:not([data-bs-theme="dark"]) .tb-destek:focus-visible { outline-color: #13213A; }
@media (prefers-reduced-motion: reduce) { .tb-destek-led { animation: none; } .tb-destek-ekip i { transition: none; } }
@media (max-width: 1024px) { .tb-destek { height: auto; min-height: 40px; } }
@media (max-width: 575.98px) { .tb-destek-yazi small { display: none; } .tb-destek { padding-inline-end: .8rem; } }
/* v17c (kullanici: "yesil insan ikonu cok dikkat cekiyor, rengini baska yapalim"): uc siluet tek mavi ailede koyudan aciga
   merdiven (lacivert / mavi / acik mavi); yesil yalniz kucuk cevrimici LED'inde kalir. */
.tb-destek-ekip .k3 { background: linear-gradient(160deg, #8DB8FF, #4E7FD0); }
/* v17d (kullanici: "kose yaricapi yanindaki dil butonu gibi olsun"): ayni degisken -> iki dugme ayni koseli; mobilde de esit */
.tb-destek { border-radius: var(--tb-radius-sm, 12px); }
/* mobil: dil dugmesi 44px (dokunma hedefi) -> destek de 44 (olculdu: 40 / 44) */
@media (max-width: 1024px) { .tb-destek { min-height: 44px; } }
/* dil dugmesiyle tam es: koyu kipte ince cerceve yok (dil dugmesinde yok); koseli zeminde siluetler kenara sikismasin */
html[data-bs-theme="dark"] .tb-destek { box-shadow: none; }
.tb-destek { padding-inline: .5rem .9rem; }
/* v17e (kullanici: "uc kisi aktif gibi ama hover'da digerleri one geliyor, onlar cevrimici degil gibi"):
   1) hover acilma hareketi kaldirildi — transform siluetleri ayri katmana alip ust uste binme sirasini bozuyordu
   2) her siluetin cevresinde ince yesil "cevrimici" halkasi (zemin rengi ayirici + yesil cizgi) -> ucu de aktif okunur; LED kalir */
.tb-destek:hover .tb-destek-ekip .k1, .tb-destek:hover .tb-destek-ekip .k3,
html[dir="rtl"] .tb-destek:hover .tb-destek-ekip .k1, html[dir="rtl"] .tb-destek:hover .tb-destek-ekip .k3 { transform: none; }
.tb-destek-ekip i { transition: none; box-shadow: 0 0 0 1.5px #16335E, 0 0 0 3px rgba(34,196,110,.85); }
.tb-destek-ekip i + i { margin-inline-start: -6px; }
.tb-destek-ekip .k1 { position: relative; z-index: 1; } .tb-destek-ekip .k2 { position: relative; z-index: 2; } .tb-destek-ekip .k3 { position: relative; z-index: 3; }
.tb-destek-led { z-index: 4; }
html:not([data-bs-theme="dark"]) .tb-destek-ekip i { box-shadow: 0 0 0 1.5px #FFFEFB, 0 0 0 3px rgba(0,166,81,.8); }
/* v17f (kullanici: "cevresine koydugun halka cok yogun ve cirkin; renkleri koyu/aydinlik temaya gore uyarla"):
   yesil halkalar kaldirildi (siralama hatasi v17e'de cozuldu, tek LED "ekip cevrimici" der).
   KOYU kip: lacivert seritte en koyu siluet kayboluyordu -> uc ton bir kademe acik; ayirici = dugme zemini tonu.
   ACIK kip: beyaz dugmede en acik siluet soluktu -> koyu/orta/acik merdiven daha belirgin; ayirici = dugme zemini. */
.tb-destek-ekip i + i { margin-inline-start: -7px; }
.tb-destek-ekip i { box-shadow: 0 0 0 2px #1B3863; }
.tb-destek-ekip .k1 { background: linear-gradient(160deg, #4A6EA6, #2A4A7C); }
.tb-destek-ekip .k2 { background: linear-gradient(160deg, #5A98F0, #2F68C4); }
.tb-destek-ekip .k3 { background: linear-gradient(160deg, #A9CBFF, #6A97E0); }
.tb-destek-led { box-shadow: 0 0 0 2px #1B3863, 0 0 6px rgba(124,240,176,.8); }
html:not([data-bs-theme="dark"]) .tb-destek-ekip i { box-shadow: 0 0 0 2px #FFFEFB; }
html:not([data-bs-theme="dark"]) .tb-destek-ekip .k1 { background: linear-gradient(160deg, #2A3F63, #13213A); }
html:not([data-bs-theme="dark"]) .tb-destek-ekip .k2 { background: linear-gradient(160deg, #2F72C9, #004b93); }
html:not([data-bs-theme="dark"]) .tb-destek-ekip .k3 { background: linear-gradient(160deg, #7FA8E8, #3F72C6); }
html:not([data-bs-theme="dark"]) .tb-destek-led { box-shadow: 0 0 0 2px #FFFEFB, 0 0 5px rgba(0,166,81,.5); }
/* v17g (kullanici: "renkleri koyu/aydinlik moda gore tum ana sayfayi onizleyip uygun sec"): ana sayfanin ikon dili OLCULDU —
   koyu: yari saydam mavi cip rgba(111,168,255,.14) + yumusak mavi glif #8DB8FF/#9AB2D7; acik: #E3EEFF cip + #3564AF glif
   (hizmet kartlari, rozetler, alt serit). Siluetler ayni dile cekildi: uc kademe cip tonu + glif; degrade doygun maviler kalkti. */
html[data-bs-theme="dark"] .tb-destek-ekip .k1 { background: #24406C; color: #93B3D1; }
html[data-bs-theme="dark"] .tb-destek-ekip .k2 { background: #2B4C81; color: #B4CDF0; }
html[data-bs-theme="dark"] .tb-destek-ekip .k3 { background: #345B98; color: #E3EDFB; }
html[data-bs-theme="dark"] .tb-destek-ekip i { box-shadow: 0 0 0 2px #1B3863; }
html:not([data-bs-theme="dark"]) .tb-destek-ekip .k1 { background: #D5E3F8; color: #27548F; }
html:not([data-bs-theme="dark"]) .tb-destek-ekip .k2 { background: #E3EEFF; color: #3564AF; }
html:not([data-bs-theme="dark"]) .tb-destek-ekip .k3 { background: #EEF4FF; color: #2F6FE0; }
html:not([data-bs-theme="dark"]) .tb-destek-ekip i { box-shadow: 0 0 0 2px #FFFEFB, 0 0 0 2.6px rgba(53,100,175,.14); }
/* "Destek biraz kalin" (kullanici): tema olcusu — ust menu baglantilari Barlow 500; Destek 600'du -> menuyle ayni 500 */
.tb-destek-yazi b { font-weight: 500; }
/* kullanici: "soldaki Kutuphanemiz ve mail adresiyle ayni kalinlik, boy iyi" -> serit ogeleriyle ayni yazi tipi + kalinlik
   (olculdu: .tb-topbar-oge = Open Sans 400); boy degismedi (12.48px). Ayni kalinligin gozde de ayni gorunmesi icin aile de esitlendi. */
.tb-destek-yazi b { font-family: inherit; font-weight: 400; }
/* v17j AYDINLIK KIP DEGERLENDIRMESI (kullanici: "aydinlik modda gariplik var mi, uzman gibi degerlendir"):
   OLCULDU: acik cip tonlari (#D5E3F8/#E3EEFF/#EEF4FF) beyaz dugmeden yalniz 1,09-1,29:1 ayrisiyordu -> siluetlerin siniri
   kayboluyor, uc soluk leke / "devre disi" gibi okunuyordu (44px kart ciplerinde calisan ton 24px'te calismiyor);
   ic insan simgesi 14px'te secilmiyordu; disaridaki soluk mavi halka gurultuydu.
   COZUM: yanindaki dil dugmesinin kure ikonuyla ayni kurumsal mavi ailesinde uc ton (#4E78B8/#3564AF/#27548F) + beyaz glif
   -> cip/zemin 4,4-7,6:1, glif/cip 4,5-7,6:1; simge 16px; dis halka yok (2px zemin ayirici kaldi). Koyu kipte de simge 16px. */
html:not([data-bs-theme="dark"]) .tb-destek-ekip .k1 { background: #4E78B8; color: #fff; }
html:not([data-bs-theme="dark"]) .tb-destek-ekip .k2 { background: #3564AF; color: #fff; }
html:not([data-bs-theme="dark"]) .tb-destek-ekip .k3 { background: #27548F; color: #fff; }
html:not([data-bs-theme="dark"]) .tb-destek-ekip i { box-shadow: 0 0 0 2px #FFFEFB; }
.tb-destek-ekip i svg { width: 16px; height: 16px; margin-top: 4px; }
/* v17k (kullanici: "yanip sonen yesil cok parlak, temanin durusunu bozuyor"): neon yesil + parlama kalkti;
   doygunlugu dusuk, temanin sakin tonuna yakin yesil; isik halesi yok; sonme derinligi azaldi (.2 -> .45) ve seyreldi (8 sn). */
html[data-bs-theme="dark"] .tb-destek-led { background: #4DB585; box-shadow: 0 0 0 2px #1B3863; }
html:not([data-bs-theme="dark"]) .tb-destek-led { background: #2E9E66; box-shadow: 0 0 0 2px #FFFEFB; }
.tb-destek-led { animation: tbDestekLedSakin 8s steps(1, end) infinite; }
@keyframes tbDestekLedSakin { 0%, 84% { opacity: 1; } 86% { opacity: .45; } 89% { opacity: 1; } 92% { opacity: .45; } 95%, 100% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .tb-destek-led { animation: none; } }
/* v17l (kullanici: "sunucu disk isigi gibi yanip sonsun; hala parlak, onizle en uygun parlakligi sec"):
   PARLAKLIK: 4 ton iki kipte yerinde cizilip olculdu -> koyu #378F66 (zemine 2,95:1: secilir ama parlamaz), acik #2D7D55 (4,99:1, sakin derin).
   Koyu kipte "Cevrimici" yazisi da pastel #9FD9B8'den ayni aileye (#86BFA0) cekildi; acikta #2D7D55.
   RITIM: disk etkinlik LED'i — cogu zaman sabit; duzensiz araliklarla 50-130 ms'lik kisa kirpisma kumeleri (9 sn dongu, steps). */
html[data-bs-theme="dark"] .tb-destek-led { background: #378F66; }
html:not([data-bs-theme="dark"]) .tb-destek-led { background: #2D7D55; }
html[data-bs-theme="dark"] .tb-destek-yazi small { color: #86BFA0; }
html:not([data-bs-theme="dark"]) .tb-destek-yazi small { color: #2D7D55; }
.tb-destek-led { animation: tbDestekDisk 9s steps(1, end) infinite; }
@keyframes tbDestekDisk {
    0% { opacity: 1; }
    38% { opacity: .3; } 39% { opacity: 1; } 40.4% { opacity: .3; } 41% { opacity: 1; } 43.5% { opacity: .3; } 44.1% { opacity: 1; }
    67% { opacity: .3; } 67.6% { opacity: 1; } 68.5% { opacity: .3; } 69.9% { opacity: 1; } 70.6% { opacity: .3; } 71.2% { opacity: 1; } 72.9% { opacity: .3; } 73.4% { opacity: 1; }
    100% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { .tb-destek-led { animation: none; } }
/* v17m (kullanici: "yalniz aydinlik modda kisilerden biri kirmizi olsun, en arkadaki veya ortadaki, tema uyumu icin"):
   en arkadaki (k1) logo kirmizisi #C4162B — soldan saga kirmizi -> lacivert = logonun okumasi; ortada kirmizi grubu boluyordu,
   #D04555 pembeye kaciyordu (uc aday yerinde cizildi). Koyu kipe DOKUNULMADI. Glif beyaz: #C4162B uzerinde 5,8:1. */
html:not([data-bs-theme="dark"]) .tb-destek-ekip .k1 { background: #C4162B; color: #fff; }
/* v17n (kullanici: "parlak kirmizi cok dikkat cekiyor, acemi goruntu"): logo kirmizisi doygunluk .80 — yanindaki maviler .43-.57.
   Kirmizi mavilerle ayni doygunluk/aciklik araligina kalibre edildi: hsl(352, 42%, 43%) = #9C404C (mat sarap kirmizisi).
   Uc aday yerinde cizildi (#B13545 canli kaciyor, #AA505C pembe/soluk). Glif beyaz ~6,7:1. Yalniz aydinlik kip. */
html:not([data-bs-theme="dark"]) .tb-destek-ekip .k1 { background: #9C404C; }
/* v17o (kullanici: "ortadaki kirmizi olursa nasil?"): kirmizi ortaya (k2); en arkadaki maviye dondu. Yalniz aydinlik.
   Geri donus (arkada kirmizi): bu blogu sil -> v17n gecerli olur. */
html:not([data-bs-theme="dark"]) .tb-destek-ekip .k1 { background: #4E78B8; }
html:not([data-bs-theme="dark"]) .tb-destek-ekip .k2 { background: #9C404C; }

/* v17p (kullanici: "disk gibi degil; yanip sonerken yuvarlak seklini kaybediyor"):
   KOK NEDEN: sonme opacity ile yapiliyordu -> zemin renkli 2px ayirici halka da saydamlasiyor, alttaki siluetin kenari
   gorunup nokta kesik/bozuk duruyordu. COZUM: RENKLE sonme (acik yesil <-> koyu "kapali LED" yesili), halka hep opak.
   RITIM: gercek disk etkinlik LED'i — uzun sakin + farkli uzunlukta (3/7/11) hizli duzensiz kirpisma kumeleri, 30-80 ms. */
.tb-destek-led { --tb-led-acik: #378F66; --tb-led-sonuk: #1D4E3B; opacity: 1 !important; animation: tbDestekDisk2 10s linear infinite; animation-timing-function: steps(1, end); }
html:not([data-bs-theme="dark"]) .tb-destek-led { --tb-led-acik: #2D7D55; --tb-led-sonuk: #A7C9B6; }
html[data-bs-theme="dark"] .tb-destek-led { background: var(--tb-led-acik); }
html:not([data-bs-theme="dark"]) .tb-destek-led { background: var(--tb-led-acik); }
@keyframes tbDestekDisk2 {
    0% { background-color: var(--tb-led-acik); }
    22.0% { background-color: var(--tb-led-sonuk); }
    22.5% { background-color: var(--tb-led-acik); }
    23.0% { background-color: var(--tb-led-sonuk); }
    23.6% { background-color: var(--tb-led-acik); }
    24.1% { background-color: var(--tb-led-sonuk); }
    24.7% { background-color: var(--tb-led-acik); }
    25.4% { background-color: var(--tb-led-sonuk); }
    25.8% { background-color: var(--tb-led-acik); }
    26.7% { background-color: var(--tb-led-sonuk); }
    27.0% { background-color: var(--tb-led-acik); }
    27.8% { background-color: var(--tb-led-sonuk); }
    28.2% { background-color: var(--tb-led-acik); }
    28.7% { background-color: var(--tb-led-sonuk); }
    29.2% { background-color: var(--tb-led-acik); }
    48.5% { background-color: var(--tb-led-sonuk); }
    48.9% { background-color: var(--tb-led-acik); }
    49.5% { background-color: var(--tb-led-sonuk); }
    50.1% { background-color: var(--tb-led-acik); }
    51.4% { background-color: var(--tb-led-sonuk); }
    52.0% { background-color: var(--tb-led-acik); }
    71.0% { background-color: var(--tb-led-sonuk); }
    71.8% { background-color: var(--tb-led-acik); }
    72.2% { background-color: var(--tb-led-sonuk); }
    73.0% { background-color: var(--tb-led-acik); }
    73.7% { background-color: var(--tb-led-sonuk); }
    74.0% { background-color: var(--tb-led-acik); }
    74.5% { background-color: var(--tb-led-sonuk); }
    75.0% { background-color: var(--tb-led-acik); }
    76.2% { background-color: var(--tb-led-sonuk); }
    76.6% { background-color: var(--tb-led-acik); }
    77.6% { background-color: var(--tb-led-sonuk); }
    78.2% { background-color: var(--tb-led-acik); }
    79.0% { background-color: var(--tb-led-sonuk); }
    79.6% { background-color: var(--tb-led-acik); }
    80.0% { background-color: var(--tb-led-sonuk); }
    80.3% { background-color: var(--tb-led-acik); }
    81.0% { background-color: var(--tb-led-sonuk); }
    81.6% { background-color: var(--tb-led-acik); }
    82.4% { background-color: var(--tb-led-sonuk); }
    82.9% { background-color: var(--tb-led-acik); }
    83.9% { background-color: var(--tb-led-sonuk); }
    84.4% { background-color: var(--tb-led-acik); }
    100% { background-color: var(--tb-led-acik); }
}
@media (prefers-reduced-motion: reduce) { .tb-destek-led { animation: none; } }
/* v17q (kullanici: "cok cok fazla yanip sonuyor, dikkat dagitiyor; normal bir disk gibi — mantik guzel"):
   16 sn dongu, toplam 6 kirpisma (2 + 4), 50-80 ms; kalan sure sabit yanar. */
.tb-destek-led { animation: tbDestekDisk3 16s steps(1, end) infinite; }
@keyframes tbDestekDisk3 {
    0% { background-color: var(--tb-led-acik); }
    31.0% { background-color: var(--tb-led-sonuk); } 31.4% { background-color: var(--tb-led-acik); }
    32.4% { background-color: var(--tb-led-sonuk); } 32.8% { background-color: var(--tb-led-acik); }
    74.0% { background-color: var(--tb-led-sonuk); } 74.3% { background-color: var(--tb-led-acik); }
    75.0% { background-color: var(--tb-led-sonuk); } 75.5% { background-color: var(--tb-led-acik); }
    76.6% { background-color: var(--tb-led-sonuk); } 76.9% { background-color: var(--tb-led-acik); }
    77.5% { background-color: var(--tb-led-sonuk); } 78.0% { background-color: var(--tb-led-acik); }
    100% { background-color: var(--tb-led-acik); }
}
@media (prefers-reduced-motion: reduce) { .tb-destek-led { animation: none; } }

/* 2026-10-25 telefonun onunde "Musteri Hizmetleri" etiketi: ayni yazi/boy, yalniz sessiz ton;
   numara oldugu gibi kalir, ikisi tek oge (ayrac yok, aralik .35rem) */
.tb-topbar-oge .tb-topbar-etiket { opacity: .66; margin-inline-end: -.15rem; transition: opacity .18s ease; }
.tb-topbar-oge:hover .tb-topbar-etiket { opacity: .85; }
html[dir="rtl"] a.tb-topbar-oge > span.tb-topbar-etiket { direction: rtl; }
/* Tablet (<992px): "Musteri Hizmetleri" etiketi gizli, numara kalir. Olculdu: 728-936px araliginda serit
   iki satira cikiyordu (ru en genis; ru'da Rehber'den once de 728-808 tasiyordu). */
@media (max-width: 991.98px) { .tb-topbar-oge .tb-topbar-etiket { display: none; } }



/* ——— BLOG DUGMESI (ust serit sag grup, 2026-10-25) ——————————————————————
   Dil dugmesinin kalibi; baglanti oldugu icin alt cizgi/renk sabitlenir, ok olmadigindan yan dolgular esit.
   <840px yalniz ikon, <576px gizli (telefon + Destek + dil ancak sigiyor; olculdu). */
a.tb-yerel-dugme.tb-blog-dugme, a.tb-yerel-dugme.tb-blog-dugme:hover { text-decoration: none; color: #fff; padding-inline: .66rem .72rem; }
html:not([data-bs-theme="dark"]) a.tb-yerel-dugme.tb-blog-dugme, html:not([data-bs-theme="dark"]) a.tb-yerel-dugme.tb-blog-dugme:hover { color: #13213A; }
@media (max-width: 839.98px) { a.tb-blog-dugme > span { display: none; } a.tb-yerel-dugme.tb-blog-dugme { padding-inline: .66rem; } }
@media (max-width: 575.98px) { a.tb-yerel-dugme.tb-blog-dugme { display: none; } }
/* Blog: zemin yok, yalniz ince cerceve (kullanici: "arkaplan degil, biraz once cizgi vardi, sadece onu"); hover'da hafif zemin */
a.tb-yerel-dugme.tb-blog-dugme { background: transparent; box-shadow: inset 0 0 0 1px rgba(255,255,255,.22); transition: background-color .18s ease, box-shadow .18s ease; }
a.tb-yerel-dugme.tb-blog-dugme:hover { background: rgba(255,255,255,.08); box-shadow: inset 0 0 0 1px rgba(255,255,255,.3); }
html:not([data-bs-theme="dark"]) a.tb-yerel-dugme.tb-blog-dugme { background: transparent; box-shadow: inset 0 0 0 1px rgba(30,34,44,.18); }
html:not([data-bs-theme="dark"]) a.tb-yerel-dugme.tb-blog-dugme:hover { background: #FFFEFB; box-shadow: inset 0 0 0 1px rgba(30,34,44,.10), 0 1px 2px rgba(30,34,44,.06); }
/* Blog: cizgi de yok (kullanici: "etrafinda o cizgi olmasa da olur") — yalniz ikon + yazi; hover'da hafif zemin kalir */
a.tb-yerel-dugme.tb-blog-dugme, html:not([data-bs-theme="dark"]) a.tb-yerel-dugme.tb-blog-dugme { box-shadow: none; }
a.tb-yerel-dugme.tb-blog-dugme:hover, html:not([data-bs-theme="dark"]) a.tb-yerel-dugme.tb-blog-dugme:hover { box-shadow: none; }
/* Blog: simge de yok (kullanici) — yalniz yazi; yan dolgular esit. Simge gidince 576-839px'te de yazi gorunur (kisa kelime) */
a.tb-yerel-dugme.tb-blog-dugme { padding-inline: .72rem; }
@media (max-width: 839.98px) { a.tb-blog-dugme > span { display: inline; } a.tb-yerel-dugme.tb-blog-dugme { padding-inline: .72rem; } }
/* Blog SON HAL (2026-10-25): zemin geri (kullanici: "arkaplansiz olmadi") — dil dugmesiyle ayni dolgu, cizgi/simge yok;
   yazi ana sayfadaki "Teknolojiyle daha guclu yarinlara..." slogani ile ayni (tb-fstat-slogan: Georgia italik 400, 14.72px). */
a.tb-yerel-dugme.tb-blog-dugme { background: rgba(255,255,255,.08); box-shadow: none; }
a.tb-yerel-dugme.tb-blog-dugme:hover { background: rgba(255,255,255,.16); box-shadow: none; }
html:not([data-bs-theme="dark"]) a.tb-yerel-dugme.tb-blog-dugme { background: #FFFEFB; box-shadow: inset 0 0 0 1px rgba(30,34,44,.10), 0 1px 2px rgba(30,34,44,.06); }
html:not([data-bs-theme="dark"]) a.tb-yerel-dugme.tb-blog-dugme:hover { background: #FAF8F3; box-shadow: inset 0 0 0 1px rgba(30,34,44,.10), 0 1px 2px rgba(30,34,44,.06); }
a.tb-blog-dugme > span { font-family: Georgia, "Times New Roman", serif; font-style: italic; font-weight: 400; font-size: 14.72px; letter-spacing: normal; }
/* Blog yazisi "cok ince" (kullanici) -> Georgia'nin kalin italigi (yalniz 400/700 var). ALTIN ORAN (phi=1.618), dugme 34px:
   yan dolgu = 34/phi^2 = 13px; satir yuksekligi = 34/phi = 21px; yazi boyu 14.5px (Georgia satiri ~1.45em). */
a.tb-blog-dugme > span { font-weight: 700; font-size: 14.5px; line-height: 21px; letter-spacing: .01em; }
a.tb-yerel-dugme.tb-blog-dugme, a.tb-yerel-dugme.tb-blog-dugme:hover { padding-inline: 13px; }
@media (max-width: 839.98px) { a.tb-yerel-dugme.tb-blog-dugme { padding-inline: 13px; } }
/* ——— BLOG ZEMINI (kullanici: "uygun bir arkaplan bul, sov yap") ————————————————————
   Yazinin kaynagi ana sayfa slogani (.tb-fstat-slogan) — zemin de onun dilinden: hafif dikey cam degrade + yazinin altinda
   sloganin AYNI kirmizi isik cizgisi (ayni degrade, 2px). Hover: cizgi soldan saga tam dolar ve hafif parlar. */
a.tb-yerel-dugme.tb-blog-dugme { position: relative; overflow: hidden; isolation: isolate;
    background: linear-gradient(180deg, rgba(255,255,255,.13) 0%, rgba(255,255,255,.05) 100%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.12), inset 0 0 0 1px rgba(255,255,255,.06); }
a.tb-yerel-dugme.tb-blog-dugme:hover { background: linear-gradient(180deg, rgba(255,255,255,.18) 0%, rgba(255,255,255,.07) 100%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.16), inset 0 0 0 1px rgba(255,255,255,.09); }
a.tb-blog-dugme::after { content: ""; position: absolute; inset-inline: 13px; bottom: 5px; height: 2px; border-radius: 2px; z-index: -1;
    background: linear-gradient(90deg, transparent, var(--basic-secondary, #C62338) 35%, #E8566F 85%, transparent);
    transform: scaleX(.62); transform-origin: left center; opacity: .9; transition: transform .35s cubic-bezier(.2,.8,.2,1), opacity .2s ease, box-shadow .2s ease; }
html[dir="rtl"] a.tb-blog-dugme::after { transform-origin: right center; }
a.tb-blog-dugme:hover::after, a.tb-blog-dugme:focus-visible::after { transform: scaleX(1); opacity: 1; box-shadow: 0 0 8px rgba(232,86,111,.45); }
html:not([data-bs-theme="dark"]) a.tb-yerel-dugme.tb-blog-dugme { background: linear-gradient(180deg, #FFFFFF 0%, #FAF6EF 100%);
    box-shadow: inset 0 0 0 1px rgba(30,34,44,.10), 0 1px 2px rgba(30,34,44,.06); }
html:not([data-bs-theme="dark"]) a.tb-yerel-dugme.tb-blog-dugme:hover { background: linear-gradient(180deg, #FFFFFF 0%, #F6F0E6 100%);
    box-shadow: inset 0 0 0 1px rgba(30,34,44,.12), 0 2px 6px rgba(30,34,44,.08); }
html:not([data-bs-theme="dark"]) a.tb-blog-dugme::after { background: linear-gradient(90deg, transparent, var(--basic-secondary, #C4162B) 35%, #DC7380 85%, transparent); }
html:not([data-bs-theme="dark"]) a.tb-blog-dugme:hover::after { box-shadow: 0 0 6px rgba(196,22,43,.3); }
@media (prefers-reduced-motion: reduce) { a.tb-blog-dugme::after { transition: none; } }
/* ——— BLOG = MARKA KIRMIZISI (kullanici karsilastirmadan 1. secenegi secti) ————————————
   Logo kirmizi merdiveninden dolu degrade (#D04555 -> #C4162B), beyaz egik yazi, ust kenarda isik, altta kirmizi golge.
   Cizgi (::after) yok; hover bir ton acilir. Iki kipte ayni. */
a.tb-blog-dugme::after { display: none; }
a.tb-yerel-dugme.tb-blog-dugme, html:not([data-bs-theme="dark"]) a.tb-yerel-dugme.tb-blog-dugme {
    overflow: visible; color: #fff; background: linear-gradient(180deg, #D04555 0%, #C4162B 100%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 6px 14px -8px rgba(196,22,43,.75); transition: background .18s ease, box-shadow .18s ease; }
a.tb-yerel-dugme.tb-blog-dugme:hover, html:not([data-bs-theme="dark"]) a.tb-yerel-dugme.tb-blog-dugme:hover {
    color: #fff; background: linear-gradient(180deg, #DC5A69 0%, #CC2236 100%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 8px 18px -8px rgba(196,22,43,.85); }
a.tb-yerel-dugme.tb-blog-dugme:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
html:not([data-bs-theme="dark"]) a.tb-yerel-dugme.tb-blog-dugme:focus-visible { outline-color: #13213A; }
/* ——— BLOG = PANEL ISIGI (kullanici 2. secenegi aldirdi; kirmizi yedekte) ——————————————
   Musteri Paneli dugmesinin mavi-kirmizi kenar isigi (ayni degrade, 1px maske halkasi); ic zemin hafif. */
a.tb-yerel-dugme.tb-blog-dugme { position: relative; color: #fff; background: rgba(255,255,255,.05); box-shadow: none; }
a.tb-yerel-dugme.tb-blog-dugme:hover { color: #fff; background: rgba(255,255,255,.09); box-shadow: none; }
a.tb-blog-dugme::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
    background: linear-gradient(100deg, #7998CA 0%, #3564AF 45%, #D25363 100%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; }
html:not([data-bs-theme="dark"]) a.tb-yerel-dugme.tb-blog-dugme { color: #13213A; background: #FFFEFB; box-shadow: 0 1px 2px rgba(30,34,44,.06); }
html:not([data-bs-theme="dark"]) a.tb-yerel-dugme.tb-blog-dugme:hover { color: #13213A; background: #FAF8F3; box-shadow: 0 2px 6px rgba(30,34,44,.08); }
html:not([data-bs-theme="dark"]) a.tb-blog-dugme::before { background: linear-gradient(100deg, #7998CA 0%, #3564AF 45%, #D04555 100%); }
/* ——— BLOG = GECE MUREKKEBI (kullanici 3. secenegi aldirdi; panel isigi + kirmizi yedekte) ——————————
   Koyu kip: derin lacivert #0A1730, ince ic cerceve, yumusak kirmizi yazi #F2A0AC. Aydinlik kip: lacivert #13213A, beyaz yazi.
   Panel isigi halkasi (::before) kapali. */
a.tb-blog-dugme::before { display: none; }
a.tb-yerel-dugme.tb-blog-dugme { color: #F2A0AC; background: #0A1730; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
a.tb-yerel-dugme.tb-blog-dugme:hover { color: #F7BBC4; background: #0D1D3B; box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); }
html:not([data-bs-theme="dark"]) a.tb-yerel-dugme.tb-blog-dugme { color: #fff; background: #13213A; box-shadow: 0 1px 2px rgba(30,34,44,.15); }
html:not([data-bs-theme="dark"]) a.tb-yerel-dugme.tb-blog-dugme:hover { color: #fff; background: #1C2E4F; box-shadow: 0 2px 6px rgba(30,34,44,.2); }
/* ——— BLOG = KAGIT (kullanici 4. secenegi aldirdi; kirmizi / panel isigi / murekkep yedekte) ——————————
   Iki kipte ayni: sicak kagit degradesi (#FBF8F2 -> #F1EBDF), murekkep lacivert yazi, ince cerceve + hafif golge. */
a.tb-yerel-dugme.tb-blog-dugme, html:not([data-bs-theme="dark"]) a.tb-yerel-dugme.tb-blog-dugme {
    color: #13213A; background: linear-gradient(180deg, #FBF8F2 0%, #F1EBDF 100%);
    box-shadow: inset 0 0 0 1px rgba(30,34,44,.08), 0 1px 2px rgba(0,0,0,.18); }
a.tb-yerel-dugme.tb-blog-dugme:hover, html:not([data-bs-theme="dark"]) a.tb-yerel-dugme.tb-blog-dugme:hover {
    color: #13213A; background: linear-gradient(180deg, #FFFFFF 0%, #F5F0E6 100%);
    box-shadow: inset 0 0 0 1px rgba(30,34,44,.10), 0 3px 8px rgba(0,0,0,.2); }
a.tb-yerel-dugme.tb-blog-dugme:focus-visible { outline: 2px solid #FBF8F2; outline-offset: 2px; }
html:not([data-bs-theme="dark"]) a.tb-yerel-dugme.tb-blog-dugme:focus-visible { outline-color: #13213A; }
/* ——— BLOG = ZEMINSIZ (kullanici: "5.ci al, arkaplan olmasin") ————————————————————
   Kutu/cerceve/golge yok; yalniz Georgia kalin egik yazi. Hover'da yalniz renk acilir. Kagit + digerleri yedekte. */
a.tb-yerel-dugme.tb-blog-dugme, a.tb-yerel-dugme.tb-blog-dugme:hover,
html:not([data-bs-theme="dark"]) a.tb-yerel-dugme.tb-blog-dugme, html:not([data-bs-theme="dark"]) a.tb-yerel-dugme.tb-blog-dugme:hover { background: transparent; box-shadow: none; }
a.tb-yerel-dugme.tb-blog-dugme { color: #E6EEF7; transition: color .18s ease; }
a.tb-yerel-dugme.tb-blog-dugme:hover { color: #fff; }
html:not([data-bs-theme="dark"]) a.tb-yerel-dugme.tb-blog-dugme { color: #13213A; }
html:not([data-bs-theme="dark"]) a.tb-yerel-dugme.tb-blog-dugme:hover { color: #3564AF; }
/* Blog simgesi (kullanici: "yanina ikon getir kurumsal bir tane"): bi-newspaper, seridin simge diliyle ayni boy/sonukluk */
a.tb-yerel-dugme.tb-blog-dugme { gap: .45rem; }
a.tb-blog-dugme > i { font-size: 15px; line-height: 1; opacity: .85; transition: opacity .18s ease, color .18s ease; }
a.tb-blog-dugme:hover > i { opacity: 1; }
html:not([data-bs-theme="dark"]) a.tb-blog-dugme > i { color: #3564AF; opacity: 1; }
/* Blog yazisi NORMAL (kullanici): Georgia italik kaldirildi -> seridin kendi yazisi (soldaki Musteri Hizmetleri ile ayni) */
a.tb-blog-dugme > span { font-family: inherit; font-style: normal; font-weight: 400; font-size: inherit; line-height: inherit; letter-spacing: normal; }
/* Blog simgesi: karesiz klasik yayin akisi (nokta + iki yay, satir ici SVG; Bootstrap'ta yalniz kareli rss var) */
a.tb-blog-dugme > .tb-rss-svg { flex: none; display: block; opacity: .85; transition: opacity .18s ease, color .18s ease; }
a.tb-blog-dugme:hover > .tb-rss-svg { opacity: 1; }
html:not([data-bs-theme="dark"]) a.tb-blog-dugme > .tb-rss-svg { color: #3564AF; opacity: 1; }
html[dir="rtl"] a.tb-blog-dugme > .tb-rss-svg { transform: scaleX(-1); }

/* 2026-10-25 kullanici: "Musteri Hizmetleri soluk, uzerine gelince beyazlasiyor -> numara gibi sabit olsun" ve
   "ikon renkleri birbirinden farkli -> tum ikonlari en uygun renkle sabitle".
   Etiket: numarayla ayni renk, opaklik 1, hover'da degismez. Simgeler (telefon, yayin akisi, dil kuresi): tek sabit renk —
   koyu kipte yumusak marka mavisi #8FBBF2, aydinlikta marka mavisi #3564AF; opaklik 1; hover'da degismez. */
.tb-topbar-oge .tb-topbar-etiket, .tb-topbar-oge:hover .tb-topbar-etiket { opacity: 1; }
.tb-topbar .tb-topbar-oge > i, .tb-topbar .tb-topbar-oge:hover > i,
.tb-topbar a.tb-blog-dugme > .tb-rss-svg, .tb-topbar a.tb-blog-dugme:hover > .tb-rss-svg,
.tb-topbar .tb-yerel-dugme[data-tb-yerel-ac] > i:first-child { color: #8FBBF2; opacity: 1; }
html:not([data-bs-theme="dark"]) .tb-topbar .tb-topbar-oge > i, html:not([data-bs-theme="dark"]) .tb-topbar .tb-topbar-oge:hover > i,
html:not([data-bs-theme="dark"]) .tb-topbar a.tb-blog-dugme > .tb-rss-svg, html:not([data-bs-theme="dark"]) .tb-topbar a.tb-blog-dugme:hover > .tb-rss-svg,
html:not([data-bs-theme="dark"]) .tb-topbar .tb-yerel-dugme[data-tb-yerel-ac] > i:first-child { color: #3564AF; opacity: 1; }
/* "sabit beyaz" — etiket + numara normalde de hover'da da ayni: koyu kipte beyaz, aydinlik kipte murekkep lacivert */
.tb-topbar .tb-topbar-oge, .tb-topbar .tb-topbar-oge:hover { color: #fff; }
html:not([data-bs-theme="dark"]) .tb-topbar .tb-topbar-oge, html:not([data-bs-theme="dark"]) .tb-topbar .tb-topbar-oge:hover { color: #13213A; }
/* Blog yazisi da soldaki yaziyla ayni sabit renk (koyu #fff, aydinlik #13213A), hover'da degismez */
.tb-topbar a.tb-yerel-dugme.tb-blog-dugme, .tb-topbar a.tb-yerel-dugme.tb-blog-dugme:hover { color: #fff; }
html:not([data-bs-theme="dark"]) .tb-topbar a.tb-yerel-dugme.tb-blog-dugme, html:not([data-bs-theme="dark"]) .tb-topbar a.tb-yerel-dugme.tb-blog-dugme:hover { color: #13213A; }
/* koyu kip serit yazilari saf beyaz "fazla" (kullanici) -> kirik beyaz #E6EEF7, tum serit yazilarinda ayni (esitlik korunur) */
html[data-bs-theme="dark"] .tb-topbar .tb-topbar-oge, html[data-bs-theme="dark"] .tb-topbar .tb-topbar-oge:hover,
html[data-bs-theme="dark"] .tb-topbar a.tb-yerel-dugme.tb-blog-dugme, html[data-bs-theme="dark"] .tb-topbar a.tb-yerel-dugme.tb-blog-dugme:hover,
html[data-bs-theme="dark"] .tb-topbar .tb-destek-yazi b, html[data-bs-theme="dark"] .tb-topbar .tb-yerel-dugme[data-tb-yerel-ac] { color: #E6EEF7; }


/* 2026-10-25 SEO/Lighthouse: footer telefon/e-posta dokunma alani 18px -> 24px (target-size). Satir yuksekligi
   23.52 -> 24px (blok yalniz ~2px uzar); baglantilar kendi satirlari kadar 24px kutu — dolgu/negatif pay YOK
   (onceki deneme: komsu baglantiyla ust uste binip "kismen ortulu" sayildi, olculdu). */
.tb-footer-marka address { line-height: 24px; }
.tb-footer-marka address a { display: inline-block; line-height: 24px; }

/* 2026-10-25 erisilebilirlik: dar ekranda serit baglantilarinin yazisi display:none ile gizleniyordu -> baglanti ADSIZ kaliyordu
   (Lighthouse "link-name"). Yazi artik yalniz gorsel olarak gizlenir, ekran okuyucu adi okur. Gorunum ayni. */
@media (max-width: 720px) {   /* asil gizleme kuraliyla AYNI esik */
    .tb-topbar .tb-topbar-oge > span:not(.tb-topbar-etiket) { display: inline !important; position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
        overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
}

/* ——— TCMB KURU = SADE YAZI (ust serit sag grup, 2026-10-25; kullanici ornegi "1$ = 49,65 TL") ——————————————
   Kutusuz duz yazi; Blog'la ayni yazi tipi/boy/renk (koyu #E6EEF7, aydinlik #13213A), ayni eksen. <768px gizli. */
.tb-kur-yazi { display: inline-flex; align-items: center; flex: none; height: 34px; padding-inline: .4rem; color: #E6EEF7;
    font-size: 13.44px; white-space: nowrap; cursor: default; font-variant-numeric: tabular-nums; }
html:not([data-bs-theme="dark"]) .tb-kur-yazi { color: #13213A; }
@media (max-width: 767.98px) { .tb-kur-yazi { display: none; } }

/* 2026-10-25 SAG GRUP ARALIKLARI — ALTIN ORAN (kullanici: "hepsinin arasindaki mesafe ayni olsun, altin oran"):
   dugme yuksekligi 34px -> 34/phi = 21 -> 21/phi = 13px. Gorunur mesafe her cift arasinda 13px: grup araligi 13px,
   duz yazi ogelerinin (kur, Blog) gorunmez yan dolgulari sifir. Onceki olcum: 28.2 / 21.8 / 8.8 px. */
.tb-topbar .tb-topbar-end { gap: 21px; }   /* 13 -> 21 (bir altin oran basamagi yukari; kullanici: "kutularin ic bosluklarini hesaba kat, biraz genis, daha modern" — 13/21/26 yan yana gorerek secildi) */
.tb-topbar .tb-topbar-end > .tb-kur-yazi,
.tb-topbar .tb-topbar-end > a.tb-yerel-dugme.tb-blog-dugme { padding-inline: 0; }

/* 2026-10-26 DESTEK + DIL DUGMESI ZEMINSIZ (kullanici: "arkasindaki blur kismini kaldir, dolar kismi gibi olsun").
   Kutu (zemin, cerceve, golge) yok; icerik ayni. Yan dolgular 0 -> sag grubun 21px esit gorunur araligi korunur.
   Hover: zemin belirmez, yalniz yazi parlar. Klavye odagi (focus-visible) korunur. Acilir panel (tb-yerel-panel) etkilenmez. */
.tb-topbar .tb-topbar-end > .tb-destek,
.tb-topbar .tb-topbar-end > .tb-destek:hover,
html[data-bs-theme="dark"] .tb-topbar .tb-topbar-end > .tb-destek,
html:not([data-bs-theme="dark"]) .tb-topbar .tb-topbar-end > .tb-destek,
html:not([data-bs-theme="dark"]) .tb-topbar .tb-topbar-end > .tb-destek:hover,
.tb-topbar .tb-yerel > .tb-yerel-dugme,
.tb-topbar .tb-yerel > .tb-yerel-dugme:hover,
.tb-topbar .tb-yerel > .tb-yerel-dugme[aria-expanded="true"],
html:not([data-bs-theme="dark"]) .tb-topbar .tb-yerel > .tb-yerel-dugme,
html:not([data-bs-theme="dark"]) .tb-topbar .tb-yerel > .tb-yerel-dugme:hover,
html:not([data-bs-theme="dark"]) .tb-topbar .tb-yerel > .tb-yerel-dugme[aria-expanded="true"] {
    background: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.tb-topbar .tb-topbar-end > .tb-destek { padding-inline: 0; }
.tb-topbar .tb-yerel > .tb-yerel-dugme { padding-inline: 0; }
.tb-topbar .tb-yerel > .tb-yerel-dugme { color: #E6EEF7; transition: color .18s ease; }
.tb-topbar .tb-yerel > .tb-yerel-dugme:hover, .tb-topbar .tb-yerel > .tb-yerel-dugme[aria-expanded="true"] { color: #fff; }
html:not([data-bs-theme="dark"]) .tb-topbar .tb-yerel > .tb-yerel-dugme { color: #13213A; }
html:not([data-bs-theme="dark"]) .tb-topbar .tb-yerel > .tb-yerel-dugme:hover,
html:not([data-bs-theme="dark"]) .tb-topbar .tb-yerel > .tb-yerel-dugme[aria-expanded="true"] { color: #3564AF; }
.tb-topbar .tb-topbar-end > .tb-destek:hover .tb-destek-yazi b { color: #fff; }
html:not([data-bs-theme="dark"]) .tb-topbar .tb-topbar-end > .tb-destek:hover .tb-destek-yazi b { color: #3564AF; }
/* siluet halkalari kutu zeminine gore ayarliydi -> seridin kendi tonuna */
html[data-bs-theme="dark"] .tb-topbar .tb-destek-ekip i, .tb-topbar .tb-destek-ekip i { box-shadow: 0 0 0 2px #0F2747; }
html:not([data-bs-theme="dark"]) .tb-topbar .tb-destek-ekip i { box-shadow: 0 0 0 2px #F3F0EA; }

/* 2026-10-26 HOVER CIZGISI (kullanici: "maus uzerine gelince sadece cizgi gelsin, daha once koydugun sabit cizgi"):
   Blog / Destek / dil dugmesi zeminsiz; uzerine gelince (ve klavye odaginda) cevresinde Blog'un eski ince cercevesi belirir.
   Cizgi ::after ile ogenin DISINA cizilir (dikey 2px, yatay 10px pay, 10px yaricap) -> yerlesim/21px aralik degismez.
   Kur yazisi tiklanamaz bilgi oldugu icin cizgi almaz. */
.tb-topbar .tb-topbar-end > a.tb-blog-dugme,
.tb-topbar .tb-topbar-end > .tb-destek,
.tb-topbar .tb-yerel > .tb-yerel-dugme { position: relative; }
.tb-topbar .tb-topbar-end > a.tb-blog-dugme::after,
.tb-topbar .tb-topbar-end > .tb-destek::after,
.tb-topbar .tb-yerel > .tb-yerel-dugme::after {
    content: ""; position: absolute; inset: 2px -10px; width: auto; height: auto; z-index: 0; border-radius: var(--tb-radius-sm, 12px); pointer-events: none;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.22); opacity: 0; transition: opacity .18s ease; display: block; transform: none; background: none; }
    /* ^ Blog'un eski kirmizi alt cizgi ::after kurallari (height 2px, bottom, z-index -1, degrade) dosyada duruyor; burada acikca ezilir */
.tb-topbar .tb-topbar-end > a.tb-blog-dugme:hover::after, .tb-topbar .tb-topbar-end > a.tb-blog-dugme:focus-visible::after,
.tb-topbar .tb-topbar-end > .tb-destek:hover::after, .tb-topbar .tb-topbar-end > .tb-destek:focus-visible::after,
.tb-topbar .tb-yerel > .tb-yerel-dugme:hover::after, .tb-topbar .tb-yerel > .tb-yerel-dugme:focus-visible::after,
.tb-topbar .tb-yerel > .tb-yerel-dugme[aria-expanded="true"]::after { opacity: 1; }
html:not([data-bs-theme="dark"]) .tb-topbar .tb-topbar-end > a.tb-blog-dugme::after,
html:not([data-bs-theme="dark"]) .tb-topbar .tb-topbar-end > .tb-destek::after,
html:not([data-bs-theme="dark"]) .tb-topbar .tb-yerel > .tb-yerel-dugme::after { box-shadow: inset 0 0 0 1px rgba(30,34,44,.18); }
/* hover cizgisi "dar" (kullanici: "biraz onceki blurlu kismin genisliginde") -> eski kutularin olcusu: tam yukseklik (34px)
   ve her dugmenin eski ic dolgusu kadar yan pay: Blog 13/13, Destek .5rem/.9rem, dil .66rem/.58rem */
.tb-topbar .tb-topbar-end > a.tb-blog-dugme::after { inset: 0 -13px; }
.tb-topbar .tb-topbar-end > .tb-destek::after { inset: 0; inset-inline: -.5rem -.9rem; }
.tb-topbar .tb-yerel > .tb-yerel-dugme::after { inset: 0; inset-inline: -.66rem -.58rem; }

/* 2026-10-28 MENÜ SIĞDIRMA (kullanıcı: Rusçada menü logoya biniyor, MacBook 13"; "PC'de hamburger olmasın").
   Sabit kırılma noktası yerine ÖLÇÜM: turkbil-header.js başlık blokları arasındaki boşluğu ölçer, sığmazsa kademeli sıkıştırır —
   sik: aralık · sik2: + yazı boyu · sik3: + logo ve sağ grup. Menü masaüstünde ASLA gizlenmez. !important: dile özel eski
   :not([lang]) kuralları daha yüksek özgüllükte. */
.tb-header.tb-nav-sik .tb-shell { column-gap: 1rem !important; }
.tb-header.tb-nav-sik .tb-nav { gap: 0 !important; }
.tb-header.tb-nav-sik .tb-nav > li > a, .tb-header.tb-nav-sik .tb-nav > li > button { padding-inline: .45rem !important; }
.tb-header.tb-nav-sik2 .tb-nav > li > a, .tb-header.tb-nav-sik2 .tb-nav > li > button { padding-inline: .34rem !important; font-size: .8rem !important; }
.tb-header.tb-nav-sik3 .tb-shell { column-gap: .6rem !important; }
.tb-header.tb-nav-sik3 .tb-nav > li > a, .tb-header.tb-nav-sik3 .tb-nav > li > button { padding-inline: .26rem !important; font-size: .76rem !important; }
.tb-header.tb-nav-sik3 .tb-logo img { height: 36px !important; }
.tb-header.tb-nav-sik3 .tb-header-end { gap: .4rem !important; }
/* logo hiçbir durumda daralmaz; sıkışma menüde ölçülür */
.tb-header .tb-shell > .tb-logo { flex-shrink: 0; }
.tb-header .tb-nav { min-width: 0; }