/* ==================================================================
   KATEGORI SAYFASI v5 — sektorun tam donanimli urun sayfasi
   ------------------------------------------------------------------
   Referans: kullanicinin verdigi WISECP "Mysia" kategori sayfasi.
   Yapi birebir (foto hero + madde listesi -> paket kartlari -> 8 ozellik
   -> karsilastirma tablosu -> 3 bilgi blogu -> SSS -> soru seridi);
   gorunum Turkbil: lacivert #0B1526 + kirmizi #C62338, Barlow/Open Sans,
   ana sayfanin .tb-btn / .tb-cta / .tb-section bilesenleri.
   Kopyalanmayan: mor, indirim seridi, yapay ondalikli fiyat, uydurma
   uptime. Cekirdek fiyat kancalari (section[data-billing], .billing-*,
   plan-grid data-*) aynen korunur.
   ================================================================== */
:root { --tb-yesil: #0AA74B; }

/* ——— HERO: fotograf + lacivert perde ———————————————————————— */
.tb-h5 {
    position: relative; isolation: isolate; overflow: hidden; color: #fff;
    background: #081026;
}
.tb-h5-foto {
    position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%;
    object-fit: cover; object-position: 70% 50%;
}
.tb-h5::before {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background:
        linear-gradient(90deg, rgba(5,10,24,.96) 0%, rgba(5,10,24,.88) 38%, rgba(8,16,38,.55) 68%, rgba(8,16,38,.35) 100%),
        linear-gradient(180deg, rgba(5,10,24,.25), rgba(5,10,24,.6));
}
.tb-h5 .tb-shell { padding-block: clamp(3.2rem, 7vw, 5.6rem) clamp(3rem, 6vw, 4.6rem); min-height: clamp(520px, 62vh, 640px); display: grid; align-items: center; }
.tb-h5-ic { max-width: 640px; }
.tb-h5 h1 {
    margin: 0 0 1rem; font: 700 clamp(2.2rem, 4.6vw, 3.6rem)/1.06 var(--tb-font-baslik);
    letter-spacing: -.025em; color: #fff;
}
.tb-h5-lead { margin: 0 0 1.4rem; max-width: 56ch; font-size: clamp(1rem, 1.2vw, 1.08rem); line-height: 1.65; color: rgba(255,255,255,.84); }
.tb-h5-liste { list-style: none; margin: 0 0 1.4rem; padding: 0; display: grid; gap: .5rem; }
.tb-h5-liste li { display: flex; align-items: center; gap: .6rem; font-size: 1rem; color: rgba(255,255,255,.94); }
.tb-h5-liste i { color: #4ED68A; font-size: 1.1rem; flex: none; }
.tb-h5-fiyat { margin: 0 0 1.5rem; font-size: 1.02rem; color: rgba(255,255,255,.8); }
.tb-h5-fiyat b { color: #fff; font-family: var(--tb-font-baslik); font-size: 1.25em; }
.tb-h5-eylem { display: flex; flex-wrap: wrap; gap: .8rem; }
.tb-h5 .tb-btn-primary { background: linear-gradient(135deg, #D94256, #C62338); box-shadow: 0 12px 28px -10px rgba(198,35,56,.85); }
.tb-h5 .tb-btn-primary:hover { box-shadow: 0 16px 32px -10px rgba(198,35,56,.95); }

/* altyapi logolari: hero'nun hemen altinda ince serit */
.tb-h5-logolar {
    border-bottom: 1px solid var(--tb-line); background: var(--tb-surface);
}
.tb-h5-logolar .tb-shell { display: flex; align-items: center; gap: clamp(1.2rem, 3vw, 3rem); flex-wrap: wrap; padding-block: .9rem; }
.tb-h5-logolar span { font-size: .78rem; font-weight: 600; color: var(--tb-ink-soft); white-space: nowrap; }
.tb-h5-logolar img { height: 22px; width: auto; opacity: .62; filter: grayscale(1); transition: opacity .2s ease, filter .2s ease; }
.tb-h5-logolar img:hover { opacity: 1; filter: none; }
[data-bs-theme="dark"] .tb-h5-logolar { border-bottom-color: rgba(255,255,255,.08); }
[data-bs-theme="dark"] .tb-h5-logolar img { filter: grayscale(1) invert(1); opacity: .55; }

/* ——— ORTAK bolum basligi ————————————————————————————————————— */
.tb-h5-bas { text-align: center; max-width: 66ch; margin: 0 auto 2rem; }
.tb-h5-bas h2 { margin: 0 0 .6rem; font: 700 clamp(1.6rem, 3vw, 2.25rem)/1.15 var(--tb-font-baslik); letter-spacing: -.02em; color: var(--tb-ink); }
.tb-h5-bas p { margin: 0; color: var(--tb-ink-soft); font-size: 1.02rem; line-height: 1.6; }

/* ——— PAKETLER ——————————————————————————————————————————————— */
.tb-h5-paket { padding-block: clamp(3rem, 6vw, 5rem) clamp(2.4rem, 4vw, 3.4rem); background: var(--tb-surface-2); scroll-margin-top: 80px; }
.tb-h5-arac { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 1rem 1.6rem; margin-bottom: 1.8rem; }

/* Aylik/Yillik: kardes kategori sekmeleriyle AYNI dil (lacivert dolu / beyaz cerceveli hap) */
.billing-toggle { position: relative; display: inline-flex; flex-wrap: wrap; gap: .4rem; padding: 0; background: transparent; border: 0; }
.billing-toggle[data-hazir]::before { display: none; }
.billing-toggle .billing-option {
    position: relative; display: inline-flex; align-items: center; min-height: 40px; padding: 0 1.05rem; border-radius: 10px; cursor: pointer;
    border: 1px solid var(--tb-line); background: var(--tb-surface); color: var(--tb-ink); font: 600 .9rem var(--tb-font-govde);
    transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.billing-toggle .billing-option:hover { border-color: rgba(53,100,175,.5); color: var(--basic-primary, #3564AF); }
.billing-toggle .billing-option.active, .billing-toggle:not([data-hazir]) .billing-option.active { background: var(--basic-deep, #0B1526); border-color: var(--basic-deep, #0B1526); color: #fff; }
[data-bs-theme="dark"] .billing-toggle .billing-option { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.1); color: var(--tb-ink); }
[data-bs-theme="dark"] .billing-toggle .billing-option.active { background: var(--basic-primary, #3564AF); border-color: var(--basic-primary, #3564AF); color: #fff; }
.billing-option:focus-visible { outline: 2px solid var(--basic-primary, #3564AF); outline-offset: 2px; }

.plan-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1.1rem; align-items: stretch; }
.plan-grid.pt-3 { padding-top: 0 !important; }
.plan-card {
    position: relative; display: flex; flex-direction: column; height: 100%;
    background: var(--tb-surface); border: 1px solid var(--tb-line); border-radius: 16px;
    box-shadow: var(--tb-shadow); transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.plan-card:hover { transform: translateY(-3px); box-shadow: var(--tb-shadow-lg); border-color: rgba(53,100,175,.45); }
[data-bs-theme="dark"] .plan-card { background: linear-gradient(170deg, rgba(255,255,255,.05), rgba(255,255,255,.015)); border-color: rgba(255,255,255,.08); }
.plan-card.plan-popular { border-color: rgba(198,35,56,.55); box-shadow: 0 0 0 1px rgba(198,35,56,.35), var(--tb-shadow-lg); }
.tb-pk5-rozet {
    position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
    display: inline-flex; align-items: center; gap: .35rem; padding: .3rem .8rem; border-radius: 999px;
    background: linear-gradient(135deg, #D94256, #C62338); color: #fff; font: 700 .72rem var(--tb-font-govde); white-space: nowrap;
    box-shadow: 0 8px 18px -8px rgba(198,35,56,.8);
}
.tb-pk5-bas { padding: 1.5rem 1.35rem 1rem; text-align: center; border-bottom: 1px solid var(--tb-line); }
[data-bs-theme="dark"] .tb-pk5-bas { border-bottom-color: rgba(255,255,255,.08); }
.plan-card h4 { margin: 0 0 .2rem; font: 700 1.3rem/1.2 var(--tb-font-baslik); letter-spacing: -.01em; color: var(--tb-ink); }
.tb-pk5-etiket { margin: 0 0 .9rem; min-height: 1.3em; font-size: .84rem; color: var(--tb-ink-soft); }
.plan-card .tb-pk5-fiyat.price-band { background: transparent !important; margin-inline: 0 !important; padding: 0 !important; }
.tb-pk5-fiyat-satir { display: flex; justify-content: center; align-items: baseline; flex-wrap: wrap; gap: .15rem; }
.plan-card .tb-pk5-fiyat .plan-price .price-now, .plan-card .plan-price .price-now { font: 700 2.4rem/1 var(--tb-font-baslik); letter-spacing: -.025em; color: var(--tb-ink); }
.plan-card .tb-donem, .plan-card [data-role="price-suffix"] { font-size: .95rem; color: var(--tb-ink-soft); margin-left: .15rem; }
.plan-card .price-was { color: var(--tb-ink-soft) !important; }
.plan-card .plan-billing-table { color: var(--tb-ink); }
.plan-card .plan-billing-table th, .plan-card .plan-billing-table td { border-color: var(--tb-line); background: transparent; color: inherit; }
.tb-pk5-sepet { padding: 1rem 1.35rem 0; }
.plan-card .btn {
    width: 100%; border-radius: 10px; padding: .72rem 1rem; font: 700 .94rem var(--tb-font-govde);
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
}
.plan-card .btn-primary { background: linear-gradient(135deg, #D94256, #C62338); border: 0; color: #fff; box-shadow: 0 10px 24px -12px rgba(198,35,56,.8); }
.plan-card .btn-primary:hover { color: #fff; transform: translateY(-1px); box-shadow: 0 14px 28px -12px rgba(198,35,56,.9); }
.plan-card .btn-soft { background: var(--basic-deep, #0B1526); border: 0; color: #fff; }
.plan-card .btn-soft:hover { background: #16305e; color: #fff; transform: translateY(-1px); }
[data-bs-theme="dark"] .plan-card .btn-soft { background: rgba(255,255,255,.1); box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); }
[data-bs-theme="dark"] .plan-card .btn-soft:hover { background: rgba(255,255,255,.18); }
.plan-card .btn:focus-visible { outline: 2px solid var(--basic-primary, #3564AF); outline-offset: 2px; box-shadow: none; }
.tb-pk5-govde { padding: .9rem 1.35rem 1.35rem; flex: 1 1 auto; }
.tb-pk5-liste { list-style: none; margin: 0; padding: 0; }
.tb-pk5-liste li { display: flex; align-items: center; gap: .65rem; padding: .5rem 0; border-bottom: 1px solid var(--tb-line); font-size: .9rem; color: var(--tb-ink); }
.tb-pk5-liste li:last-child { border-bottom: 0; }
[data-bs-theme="dark"] .tb-pk5-liste li { border-bottom-color: rgba(255,255,255,.07); }
.tb-pk5-liste i { flex: none; width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; background: rgba(53,100,175,.1); color: var(--basic-primary, #3564AF); font-size: .95rem; }
[data-bs-theme="dark"] .tb-pk5-liste i { background: rgba(53,100,175,.22); color: #AFC8EA; }
.plan-popular .tb-pk5-liste i { background: rgba(198,35,56,.1); color: var(--basic-secondary, #C62338); }
[data-bs-theme="dark"] .plan-popular .tb-pk5-liste i { background: rgba(198,35,56,.2); color: #E8808C; }
.plan-card.plan-soldout { opacity: .7; }
@keyframes tb-fiyat-yenile { from { background: rgba(53,100,175,.1); } to { background: transparent; } }
.plan-card.tb-fiyat-degisti .tb-pk5-bas { animation: tb-fiyat-yenile .32s ease-out; }
.tb-h5-guvence { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem 1.6rem; margin: 1.4rem 0 0; padding: 0; list-style: none; font-size: .86rem; color: var(--tb-ink-soft); }
.tb-h5-guvence li { display: inline-flex; align-items: center; gap: .4rem; }
.tb-h5-guvence i { color: var(--tb-yesil); }
.tb-h5-not { text-align: center; font-size: .8rem; color: var(--tb-ink-soft); margin: 1rem 0 0; }

/* ——— 8 OZELLIK KARTI ———————————————————————————————————————— */

/* ——— KARSILASTIRMA TABLOSU ———————————————————————————————————— */
.tb-h5-kiyas { padding-block: clamp(3rem, 6vw, 5rem); background: var(--tb-surface-2); }

.tb-h5-dip { display: flex; gap: .5rem; align-items: flex-start; margin: 1rem 0 0; font-size: .82rem; color: var(--tb-ink-soft); }
.tb-h5-dip i { color: var(--basic-primary, #3564AF); margin-top: .1rem; }

/* ——— 3 BILGI BLOGU ———————————————————————————————————————— */

@media (min-width: 900px) {

}

/* ——— SSS ——————————————————————————————————————————————————— */
.tb-h5-sss { padding-block: clamp(3rem, 6vw, 5rem); background: var(--tb-surface-2); }
.tb-h5-sss-liste { max-width: none; margin: 0; }
/* SSS: iki BAGIMSIZ sutun (1-5 sol, 6-10 sag); acilan cevap yalniz kendi sutununu uzatir */
.tb-h5-sss .accordion { display: grid; grid-template-columns: 1fr; gap: 0 1.2rem; align-items: start; }
@media (min-width: 768px) { .tb-h5-sss .accordion { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.tb-h5-sss .accordion-item.tb-sss-oge { border: 1px solid var(--tb-line) !important; border-radius: 14px !important; margin-bottom: .6rem; background: var(--tb-surface); overflow: hidden; box-shadow: var(--tb-shadow); }
[data-bs-theme="dark"] .tb-h5-sss .accordion-item.tb-sss-oge { background: linear-gradient(170deg, rgba(255,255,255,.05), rgba(255,255,255,.015)); border-color: rgba(255,255,255,.08) !important; }
.tb-h5-sss .accordion-button.tb-sss-dugme { display: flex; align-items: center; gap: .8rem; padding: .95rem 1.1rem; background: transparent !important; box-shadow: none !important; color: var(--tb-ink) !important; font: 600 1rem/1.4 var(--tb-font-baslik); }
.tb-h5-sss .accordion-button.tb-sss-dugme::after { display: none; }
.tb-h5-sss .tb-sss-ok { margin-left: auto; color: var(--basic-primary, #3564AF); transition: transform .2s ease; flex: none; }
.tb-h5-sss .tb-sss-dugme:not(.collapsed) .tb-sss-ok { transform: rotate(45deg); }
.tb-h5-sss .tb-sss-dugme:focus-visible { outline: 2px solid var(--basic-primary, #3564AF); outline-offset: -2px; }
.tb-h5-sss .tb-sss-cevap { padding: 0 1.1rem 1.1rem; color: var(--tb-ink-soft); line-height: 1.66; font-size: .95rem; }
.tb-h5-sss .tb-sss-cevap p:last-child { margin-bottom: 0; }

/* ——— SORU SERIDI (ana sayfa .tb-cta) ———————————————————————— */
.tb-h5-soru { padding-block: 0 clamp(3rem, 6vw, 5rem); background: var(--tb-surface-2); }
.tb-h5-soru .tb-cta-ic { max-width: 60ch; }
.tb-h5-soru .tb-cta h2 { font-family: var(--tb-font-baslik); }

/* ——— kucuk ekran ———————————————————————————————————————————— */
@media (max-width: 767.98px) {
    .tb-h5::before { background: linear-gradient(180deg, rgba(5,10,24,.9) 0%, rgba(5,10,24,.78) 60%, rgba(8,16,38,.7) 100%); }
    .tb-h5 .tb-shell { min-height: 0; }
    .tb-h5-logolar .tb-shell { justify-content: center; }
    .tb-h5-logolar span { width: 100%; text-align: center; }
    .plan-grid { grid-template-columns: minmax(0, 1fr); }

}
@media (prefers-reduced-motion: reduce) {
    
.plan-card, .billing-toggle::before, .tb-sss-ok { transition: none; }
    .plan-card.tb-fiyat-degisti .tb-pk5-bas { animation: none; }
}

/* ==================================================================
   v6 — REFERANS PAKET KARTI (hero v7'ye tasindi)
   (kullanicinin iki ekran goruntusu; Turkbil renkleri, kampanya yok)
   ================================================================== */
/* ——— paket karti v6 ——————————————————————————————————————— */
.tb-h5-paket .plan-grid { align-items: stretch; }
/* esit yukseklik: sarmalayici ve kart %100, govde esner; guvenlik blogu + altlik tabana oturur */
.tb-pk6-sar { position: relative; display: flex; flex-direction: column; padding-top: 38px; height: 100%; }
.tb-pk6-sar .plan-card { flex: 1 1 auto; display: flex; flex-direction: column; }
.tb-pk6-govde { flex: 1 1 auto; }
.tb-pk6-guv { margin-top: auto; }
.tb-pk6-tab {
    position: absolute; top: 0; left: 0; right: 0; height: 38px; display: flex; align-items: center; justify-content: center; gap: .4rem;
    border-radius: 14px 14px 0 0; background: linear-gradient(135deg, #D94256, #C62338); color: #fff; font: 700 .82rem var(--tb-font-govde);
}
.tb-pk6-populer .plan-card { border-color: rgba(198,35,56,.6); border-top-left-radius: 0; border-top-right-radius: 0; box-shadow: 0 0 0 1px rgba(198,35,56,.3), var(--tb-shadow-lg); }
.plan-card { border-radius: 14px; box-shadow: var(--tb-shadow); }
.plan-card:hover { transform: none; box-shadow: var(--tb-shadow-lg); }
.tb-pk6-bas { display: flex; align-items: flex-start; justify-content: space-between; gap: .8rem; padding: 1.15rem 1.15rem 1rem; }
.tb-pk6-bas h4 { margin: 0 0 .15rem; font: 700 1.22rem/1.2 var(--tb-font-baslik); letter-spacing: -.01em; color: var(--tb-ink); }
.tb-pk6-etiket { margin: 0; font-size: .8rem; color: var(--tb-ink-soft); min-height: 1.2em; }
.tb-pk6-ikonlar { display: flex; gap: .4rem; flex: none; }
.tb-pk6-ikonlar span { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 9px; border: 1px solid var(--tb-line); background: var(--tb-surface-2); }
.tb-pk6-ikonlar img { width: 20px; height: 20px; object-fit: contain; }
[data-bs-theme="dark"] .tb-pk6-ikonlar span { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.1); }
[data-bs-theme="dark"] .tb-pk6-ikonlar img { filter: brightness(0) invert(1); opacity: .8; }
/* fiyat bandi v7 — tek sutun, sessiz zemin, buyuk fiyat; karsilastir baglantisi yok */

.plan-card .plan-price .price-now { font: 700 2.1rem/1 var(--tb-font-baslik); letter-spacing: -.03em; color: var(--tb-ink); }
.plan-card .tb-donem, .plan-card [data-role="price-suffix"] { font-size: .86rem; font-weight: 600; color: var(--tb-ink-soft); }

.tb-pk6-sepet { padding: 1rem 1.15rem .4rem; }
.plan-card .btn { width: 100%; border-radius: 10px; padding: .66rem 1rem; font: 700 .92rem var(--tb-font-govde); }
.plan-card .btn-soft { background: transparent; border: 1.5px solid var(--basic-primary, #3564AF); color: var(--basic-primary, #3564AF); }
.plan-card .btn-soft:hover { background: rgba(53,100,175,.08); color: var(--basic-primary, #3564AF); transform: none; }
[data-bs-theme="dark"] .plan-card .btn-soft { border-color: rgba(175,200,234,.6); color: #AFC8EA; box-shadow: none; }
[data-bs-theme="dark"] .plan-card .btn-soft:hover { background: rgba(53,100,175,.22); }
.tb-pk6-govde { padding: .7rem 1.15rem .9rem !important; border-top: 1px solid var(--tb-line); margin-top: .6rem; }
[data-bs-theme="dark"] .tb-pk6-govde { border-top-color: rgba(255,255,255,.08); }
.tb-pk6-baslik { display: block; margin-bottom: .45rem; font-size: .8rem; color: var(--tb-ink-soft); }
.tb-pk6-liste { list-style: none; margin: 0; padding: 0; }
.tb-pk6-liste li { display: flex; align-items: center; gap: .55rem; padding: .36rem 0; font-size: .88rem; color: var(--tb-ink-soft); }
.tb-pk6-liste li b { color: var(--tb-ink); font-weight: 700; }
.tb-pk6-liste i { flex: none; width: 18px; text-align: center; color: var(--tb-ink-soft); font-size: .95rem; }
.tb-pk6-guv { margin: 0 1.15rem .9rem; padding: .85rem .95rem; border-radius: 10px; background: #E9F7EF; }
[data-bs-theme="dark"] .tb-pk6-guv { background: rgba(10,167,75,.12); }
.tb-pk6-guv b { display: block; margin-bottom: .4rem; font-size: .8rem; font-weight: 700; color: #0A7F3E; }
[data-bs-theme="dark"] .tb-pk6-guv b { color: #3DD47A; }
.tb-pk6-guv ul { list-style: none; margin: 0; padding: 0; }
.tb-pk6-guv li { display: flex; align-items: center; gap: .5rem; padding: .22rem 0; font-size: .86rem; font-weight: 600; color: var(--tb-ink); }
.tb-pk6-guv i { color: #0AA74B; font-size: .95rem; }
.tb-pk6-alt { display: flex; align-items: center; justify-content: center; gap: .3rem; padding: .7rem; border-top: 1px solid var(--tb-line); background: var(--tb-surface-2); color: var(--tb-ink-soft); font-size: .82rem; text-decoration: none; border-radius: 0 0 14px 14px; }
.tb-pk6-alt:hover { color: var(--basic-primary, #3564AF); }
[data-bs-theme="dark"] .tb-pk6-alt { background: rgba(255,255,255,.04); border-top-color: rgba(255,255,255,.08); }

/* ==================================================================
   v7 — SINEMATIK HERO + CANLI DURUM PANELI
   Koyu sahne her iki kipte aynidir (fotografli hero). Renkler: marka
   laciverti #0B1526, birincil mavi #3564AF, parlak vurgu #8DB8FF.
   Surekli animasyon YOK (marka kurali); sadece veri gelince halka ve
   satirlar gecisle guncellenir.
   ================================================================== */
.tb-h7 {
    position: relative; isolation: isolate; overflow: hidden; color: #fff;
    background: #060D1F; padding: clamp(1.2rem, 2.4vw, 1.8rem) 0 1.2rem;
}
.tb-h7::before {
    content: ""; position: absolute; inset: 0; z-index: -4; pointer-events: none;
    background:
        radial-gradient(60% 70% at 70% 35%, rgba(53,100,175,.45) 0%, transparent 60%),
        radial-gradient(40% 50% at 12% 85%, rgba(53,100,175,.22) 0%, transparent 60%),
        linear-gradient(180deg, #050B1A 0%, #081226 55%, #0B1526 100%);
}
.tb-h7::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 38%; z-index: -1; pointer-events: none;
    background: linear-gradient(180deg, transparent, rgba(6,13,31,.85) 60%, #060D1F);
}
.tb-h7-harita { /* Türkiye nokta haritası — tüm hero'nun arka planı (turkbil-sahne.js) */
    position: absolute; inset: 0; width: 100%; height: 100%; z-index: -2; pointer-events: none; display: none;
}
@media (min-width: 900px) { .tb-h7-harita { display: block; opacity: .55; } }
@media (min-width: 1100px) { .tb-h7-harita { opacity: 1; } }
.tb-h7-icerik { position: relative; z-index: 1; }

.tb-h7-izgara { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.6rem; }
@media (min-width: 1100px) { .tb-h7-izgara { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 2.4rem; align-items: end; } .tb-h7-sol { align-self: center; padding-bottom: .4rem; } }

/* sol sutun */
.tb-h7-cip { display: inline-flex; align-items: center; gap: .55rem; margin-bottom: 1rem; padding: .45rem .95rem .45rem .7rem; border-radius: 999px; border: 1px solid rgba(141,184,255,.3); background: rgba(53,100,175,.18); font-size: .9rem; font-weight: 600; color: rgba(255,255,255,.92); backdrop-filter: blur(6px); }
.tb-h7-cip > i { color: #8DB8FF; font-size: 1rem; }
.tb-h7-cip b { color: rgba(141,184,255,.7); font-weight: 400; }
.tb-h7 h1 { margin: 0 0 1rem; font: 700 clamp(2.4rem, 5.2vw, 4.4rem)/1.02 var(--tb-font-baslik); letter-spacing: -.03em; color: #fff; }
.tb-h7 h1 span { display: block; }
.tb-h7-parla { color: #fff; }
/* vurgu sozcugu (.tb-vurgu) turkbil-ui.css'te: ana sayfa ile ortak */
.tb-h7-lead { margin: 0 0 1.5rem; max-width: 54ch; font-size: 1.02rem; line-height: 1.65; color: rgba(255,255,255,.78); }
.tb-h7-stat { list-style: none; margin: 0 0 1.6rem; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .8rem 1rem; }
.tb-h7-stat li { min-width: 0; padding-right: .6rem; border-right: 1px solid rgba(255,255,255,.14); }
.tb-h7-stat li:last-child { border-right: 0; }
.tb-h7-stat i { display: block; margin-bottom: .4rem; font-size: 1.5rem; line-height: 1; color: #8DB8FF; }
.tb-h7-stat b { display: block; font: 700 1rem/1.2 var(--tb-font-baslik); color: #fff; }
.tb-h7-stat small { display: block; margin-top: .15rem; font-size: .74rem; color: rgba(255,255,255,.58); }
.tb-h7-eylem { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 1.1rem; }
.tb-h7-cta { color: #fff; background: linear-gradient(135deg, #3564AF, #5B8DEF); box-shadow: 0 0 0 1px rgba(141,184,255,.35), 0 14px 34px -10px rgba(91,141,239,.95); }
.tb-h7-cta:hover { color: #fff; transform: translateY(-1px); box-shadow: 0 0 0 1px rgba(141,184,255,.5), 0 18px 40px -10px rgba(91,141,239,1); }
.tb-h7-fiyat { font-size: .9rem; color: rgba(255,255,255,.7); }
.tb-h7-fiyat b { color: #fff; font: 700 1.2em var(--tb-font-baslik); }

/* sag sutun: yuzen rozetler + panel */
.tb-h7-sag { position: relative; }
@media (min-width: 1100px) { .tb-h7-sag { min-height: 560px; } }
.tb-h7-rozet { list-style: none; margin: 0 0 1rem; padding: 0; display: flex; flex-wrap: wrap; gap: .6rem; }
.tb-h7-rozet li {
    display: inline-flex; align-items: center; gap: .7rem; padding: .6rem .95rem .6rem .6rem; border-radius: 14px;
    border: 1px solid rgba(141,184,255,.22); background: linear-gradient(160deg, rgba(20,38,78,.82), rgba(8,16,38,.88));
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 20px 40px -22px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.08);
}
.tb-h7-rozet-ikon { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; background: rgba(53,100,175,.3); color: #8DB8FF; font-size: 1.15rem; flex: none; }
.tb-h7-rozet-ikon img { width: 22px; height: 22px; object-fit: contain; filter: brightness(0) invert(1); }
.tb-h7-rozet b { display: block; font: 700 .95rem/1.15 var(--tb-font-baslik); color: #fff; }
.tb-h7-rozet small { display: block; font-size: .74rem; color: rgba(255,255,255,.62); }
@media (min-width: 1100px) {
    .tb-h7-rozet { display: block; margin: 0; }
    .tb-h7-rozet li { position: absolute; }
    .tb-h7-rozet li:nth-child(1) { top: 0; left: 4%; }
    .tb-h7-rozet li:nth-child(2) { top: 14%; left: 40%; }
    .tb-h7-rozet li:nth-child(3) { top: 32%; left: 6%; }
}
.tb-h7-panel {
    position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "halka grafik" "halka durum" "taze taze";
    gap: .7rem 1.2rem; padding: 1.1rem 1.2rem .9rem; border-radius: 18px;
    border: 1px solid rgba(255,255,255,.16); background: linear-gradient(160deg, rgba(255,255,255,.11), rgba(255,255,255,.035));
    backdrop-filter: blur(24px) saturate(1.5); -webkit-backdrop-filter: blur(24px) saturate(1.5);
    box-shadow: 0 34px 64px -30px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.22), inset 0 0 0 1px rgba(255,255,255,.04);
}
/* camin arkasinda renkli isik: bulanik cam bunu yumusatarak gosterir (referans) */
.tb-h7-sag::after {
    content: ""; position: absolute; left: -6%; right: 18%; bottom: -10%; height: 72%; z-index: 0; pointer-events: none; border-radius: 40%;
    background: radial-gradient(60% 60% at 25% 85%, rgba(53,100,175,.5) 0%, transparent 65%), radial-gradient(55% 60% at 80% 20%, rgba(91,141,239,.7) 0%, transparent 65%), radial-gradient(70% 70% at 50% 50%, rgba(141,184,255,.22) 0%, transparent 70%);
    filter: blur(28px);
}
@media (min-width: 1100px) { .tb-h7-panel { position: absolute; left: 0; bottom: 0; width: min(100%, 400px); z-index: 2; } .tb-h7-rozet li { z-index: 2; } }
.tb-h7-halka { grid-area: halka; position: relative; width: 116px; align-self: center; }
.tb-h7-halka svg { width: 116px; height: 116px; transform: rotate(-90deg); display: block; }
.tb-h7-halka-iz { fill: none; stroke: rgba(255,255,255,.1); stroke-width: 7; }
.tb-h7-halka-deger { fill: none; stroke: url(#tbHalkaG); stroke-width: 7; stroke-linecap: round; stroke-dasharray: 276.46; transition: stroke-dashoffset 1.1s cubic-bezier(.2,.8,.2,1); }
.tb-h7-halka svg { overflow: visible; }
.tb-h7-halka::before { content: ""; position: absolute; inset: 6px; border-radius: 50%; box-shadow: 0 0 22px rgba(91,141,239,.35), inset 0 0 18px rgba(91,141,239,.18); pointer-events: none; }
.tb-h7-halka-metin { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.tb-h7-halka-metin b { font: 700 1.55rem/1 var(--tb-font-baslik); letter-spacing: -.02em; color: #fff; }
.tb-h7-halka-metin small { margin-top: .2rem; font-size: .68rem; font-weight: 600; color: rgba(255,255,255,.8); }
.tb-h7-halka-metin span { font-size: .62rem; color: rgba(255,255,255,.5); }
.tb-h7-grafik { grid-area: grafik; min-width: 0; }
.tb-h7-grafik-bas { display: flex; justify-content: space-between; align-items: baseline; font-size: .78rem; color: rgba(255,255,255,.62); margin-bottom: .25rem; }
.tb-h7-grafik-bas b { font: 700 1rem var(--tb-font-baslik); color: #fff; }
.tb-h7-grafik svg { display: block; width: 100%; height: 56px; border-radius: 8px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.06); }
.tb-h7-grafik small { display: block; margin-top: .25rem; font-size: .66rem; color: rgba(255,255,255,.45); text-align: right; }
.tb-h7-durum { grid-area: durum; list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }
.tb-h7-durum li { display: flex; align-items: center; gap: .6rem; }
.tb-h7-durum li > i { flex: none; width: 9px; height: 9px; border-radius: 50%; background: #6B7A99; box-shadow: 0 0 0 3px rgba(107,122,153,.18); transition: background .4s, box-shadow .4s; }
.tb-h7-durum li.iyi > i   { background: #4ED68A; box-shadow: 0 0 0 3px rgba(78,214,138,.2), 0 0 10px rgba(78,214,138,.7); }
.tb-h7-durum li.uyari > i { background: #F5B942; box-shadow: 0 0 0 3px rgba(245,185,66,.2), 0 0 10px rgba(245,185,66,.6); }
.tb-h7-durum li.kotu > i  { background: #E8808C; box-shadow: 0 0 0 3px rgba(232,128,140,.2), 0 0 10px rgba(232,128,140,.6); }
.tb-h7-durum b { display: block; font-size: .84rem; font-weight: 700; line-height: 1.2; color: #fff; }
.tb-h7-durum small { display: block; font-size: .7rem; color: rgba(255,255,255,.55); }
.tb-h7-taze { grid-area: taze; display: flex; align-items: center; gap: .45rem; padding-top: .6rem; border-top: 1px solid rgba(255,255,255,.14); font-size: .7rem; color: rgba(255,255,255,.55); }
.tb-h7-taze i { width: 7px; height: 7px; border-radius: 50%; background: #4ED68A; box-shadow: 0 0 8px rgba(78,214,138,.8); animation: tb-nabiz 2.4s ease-out infinite; }
.tb-h7-durum li.iyi > i { animation: tb-nabiz 2.4s ease-out infinite; }
.tb-h7-durum li:nth-child(2).iyi > i { animation-delay: .5s; } .tb-h7-durum li:nth-child(3).iyi > i { animation-delay: 1s; } .tb-h7-taze i { animation-delay: 1.5s; }
.tb-h7-durum li.uyari > i { animation: tb-nabiz-sari 1.4s ease-out infinite; }
.tb-h7-durum li.kotu > i { animation: tb-nabiz-kirmizi 1s ease-out infinite; }
@keyframes tb-nabiz { 0% { box-shadow: 0 0 0 0 rgba(78,214,138,.55), 0 0 8px rgba(78,214,138,.8); } 70% { box-shadow: 0 0 0 9px rgba(78,214,138,0), 0 0 8px rgba(78,214,138,.8); } 100% { box-shadow: 0 0 0 0 rgba(78,214,138,0), 0 0 8px rgba(78,214,138,.8); } }
@keyframes tb-nabiz-sari { 0% { box-shadow: 0 0 0 0 rgba(245,185,66,.6); } 70% { box-shadow: 0 0 0 9px rgba(245,185,66,0); } 100% { box-shadow: 0 0 0 0 rgba(245,185,66,0); } }
@keyframes tb-nabiz-kirmizi { 0% { box-shadow: 0 0 0 0 rgba(232,128,140,.7); } 70% { box-shadow: 0 0 0 10px rgba(232,128,140,0); } 100% { box-shadow: 0 0 0 0 rgba(232,128,140,0); } }
/* veri yenilenince deger metinleri kisa parlar */
.tb-h7-panel.yenilendi [data-yanit], .tb-h7-panel.yenilendi [data-erisim], .tb-h7-panel.yenilendi .tb-h7-durum small { animation: tb-parla .9s ease-out; }
@keyframes tb-parla { 0% { color: #8DB8FF; text-shadow: 0 0 10px rgba(141,184,255,.9); } 100% { text-shadow: none; } }
.tb-h7-panel.bayat .tb-h7-taze i, .tb-h7-panel.bos .tb-h7-taze i { background: #6B7A99; box-shadow: none; animation: none; }
.tb-h7-panel.bos .tb-h7-halka-deger { stroke: rgba(255,255,255,.2); filter: none; }

/* alt serit: logolar + kaydir */
.tb-h7-alt { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: clamp(1.2rem, 2.6vw, 2rem); padding-top: 1rem; border-top: 1px solid rgba(255,255,255,.08); }
.tb-h7-logolar { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 2rem; }
.tb-h7-logolar img { height: 22px; width: auto; display: block; filter: brightness(0) invert(1); opacity: .55; }
.tb-h7-kaydir { display: inline-flex; align-items: center; gap: .5rem; font-size: .8rem; color: rgba(255,255,255,.6); text-decoration: none; white-space: nowrap; }
.tb-h7-kaydir:hover { color: #fff; }
.tb-h7-kaydir i { font-size: 1.2rem; }
.tb-h7-kaydir::before { content: ""; width: 28px; height: 1px; background: rgba(255,255,255,.3); }

@media (max-width: 1099.98px) {
}
@media (max-width: 899.98px) {
    .tb-h7-stat { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem 1rem; }
    .tb-h7-stat li { flex: none; margin: 0; padding: 0; border-right: 0; }
    .tb-h7-kaydir { display: none; }
    .tb-h7-logolar { gap: .6rem 1.2rem; }
    .tb-h7-logolar img { height: 18px; }
    .tb-h7-panel { grid-template-columns: minmax(0, 1fr); grid-template-areas: "halka" "grafik" "durum" "taze"; }
    .tb-h7-halka { justify-self: center; }
}
@media (prefers-reduced-motion: reduce) { .tb-h7-halka-deger, .tb-h7-durum li > i { transition: none; } .tb-h7-durum li > i, .tb-h7-taze i, .tb-h7-panel.yenilendi * { animation: none !important; } }

/* ==================================================================
   v8 — FIYAT PLAKASI (kartta koyu plaka) + KARSILASTIRMA TABLOSU
   ================================================================== */
/* FIYAT v9 — tipografik: kutu yok, buyuk rakam + kucuk ₺, tek gradyan cizgi */
.plan-card .tb-pk9-fiyat.price-band { background: transparent !important; margin: 0 !important; padding: .1rem 1.15rem .95rem !important; border-bottom: 1px solid var(--tb-line); }
[data-bs-theme="dark"] .plan-card .tb-pk9-fiyat.price-band { border-bottom-color: rgba(255,255,255,.08); }
.tb-pk9-satir { display: flex; align-items: baseline; gap: .4rem; }
.plan-card .tb-pk9-satir .price-now, .plan-card .plan-price .price-now { font: 700 2.8rem/1 var(--tb-font-baslik); letter-spacing: -.045em; color: var(--tb-ink); font-variant-numeric: tabular-nums; }
.plan-card .price-now .tb-pb { font: 600 1.15rem/1 var(--tb-font-baslik); letter-spacing: 0; margin-left: .2rem; color: var(--tb-ink-soft); vertical-align: .72em; }
.plan-card .tb-pk9-fiyat .tb-donem, .plan-card .tb-pk9-fiyat [data-role="price-suffix"] { font-size: .95rem; font-weight: 600; color: var(--tb-ink-soft); }
/* 12 aylik serit: fiyatin NEDEN o oldugunu gosterir (12 x aylik). Yillikta
   12 cubuk sirayla dolar (eyleme cevap), aylikta tek cubuk; altinda formul. */
.tb-pk9-aylar { position: relative; display: flex; gap: 3px; margin: .8rem 0 .55rem; padding-bottom: 1.1rem; }
.tb-pk9-aylar i { flex: 1 1 0; height: 6px; border-radius: 3px; background: var(--tb-line); transform-origin: left center; transition: background .25s ease, transform .3s ease; }
[data-bs-theme="dark"] .tb-pk9-aylar i { background: rgba(255,255,255,.12); }
.tb-pk9-aylar.dolu i { background: linear-gradient(90deg, var(--basic-primary, #3564AF), #5B8DEF); }
.tb-pk9-aylar.dolu i:last-child, .tb-pk9-aylar.tek i:first-child { background: linear-gradient(90deg, #D94256, var(--basic-secondary, #C62338)); }
.tb-pk9-aylar.tek i:first-child { flex-grow: 2.4; }
.tb-pk9-aylar.dolu i:nth-child(1) { transition-delay: 0ms; } .tb-pk9-aylar.dolu i:nth-child(2) { transition-delay: 25ms; } .tb-pk9-aylar.dolu i:nth-child(3) { transition-delay: 50ms; } .tb-pk9-aylar.dolu i:nth-child(4) { transition-delay: 75ms; }
.tb-pk9-aylar.dolu i:nth-child(5) { transition-delay: 100ms; } .tb-pk9-aylar.dolu i:nth-child(6) { transition-delay: 125ms; } .tb-pk9-aylar.dolu i:nth-child(7) { transition-delay: 150ms; } .tb-pk9-aylar.dolu i:nth-child(8) { transition-delay: 175ms; }
.tb-pk9-aylar.dolu i:nth-child(9) { transition-delay: 200ms; } .tb-pk9-aylar.dolu i:nth-child(10) { transition-delay: 225ms; } .tb-pk9-aylar.dolu i:nth-child(11) { transition-delay: 250ms; } .tb-pk9-aylar.dolu i:nth-child(12) { transition-delay: 275ms; }
.tb-pk9-formul { position: absolute; left: 0; bottom: 0; font-size: .7rem; font-weight: 600; letter-spacing: .02em; color: var(--tb-ink-soft); font-variant-numeric: tabular-nums; }
.tb-pk9-formul[hidden] { display: none; }
/* rakam: gradyan murekkep (kutu yok, derinlik tipografide) */
.plan-card .tb-pk9-satir .price-now { background: linear-gradient(135deg, var(--basic-deep, #0B1526) 20%, var(--basic-primary, #3564AF) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.plan-card .tb-pk9-satir .price-now .tb-pb { -webkit-text-fill-color: var(--tb-ink-soft); color: var(--tb-ink-soft); }
[data-bs-theme="dark"] .plan-card .tb-pk9-satir .price-now { background-image: linear-gradient(135deg, #FFFFFF 10%, #AFC8EA 100%); }
.tb-pk9-alt { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .55rem; margin: 0; font-size: .83rem; line-height: 1.4; color: var(--tb-ink-soft); }
.tb-pk9-alt small { font-size: inherit; font-weight: 600; color: var(--tb-ink); }
.tb-pk9-alt small:not([hidden])::before { content: "·"; margin-right: .55rem; font-weight: 400; color: var(--tb-ink-soft); }
.tb-pk9-alt small[hidden] { display: none; }
.plan-card .tb-pk9-fiyat .price-was { color: var(--tb-ink-soft); }
.tb-pk6-sepet { padding-top: .95rem; }

/* karsilastirma tablosu v8 */
.tb-k8 { padding-block: clamp(2.5rem, 5vw, 4rem); background: var(--tb-surface-2); }
.tb-k8-kart { border-radius: 18px; background: var(--tb-surface); border: 1px solid var(--tb-line); box-shadow: var(--tb-shadow-lg); overflow: hidden; }
[data-bs-theme="dark"] .tb-k8-kart { background: rgba(255,255,255,.03); border-color: rgba(255,255,255,.08); }
.tb-k8-sar { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tb-k8-tablo { width: 100%; min-width: 720px; border-collapse: separate; border-spacing: 0; font-size: .9rem; }
.tb-k8-tablo th, .tb-k8-tablo td { padding: .85rem 1rem; border-bottom: 1px solid var(--tb-line); text-align: center; vertical-align: middle; color: var(--tb-ink-soft); }
[data-bs-theme="dark"] .tb-k8-tablo th, [data-bs-theme="dark"] .tb-k8-tablo td { border-bottom-color: rgba(255,255,255,.08); }
.tb-k8-tablo thead th { padding: 1.05rem 1rem; background: var(--tb-surface-2); color: var(--tb-ink); }
[data-bs-theme="dark"] .tb-k8-tablo thead th { background: rgba(255,255,255,.04); }
.tb-k8-tablo th:first-child, .tb-k8-tablo td:first-child { position: sticky; left: 0; z-index: 1; width: 200px; text-align: left; font-weight: 600; color: var(--tb-ink); background: var(--tb-surface); }
.tb-k8-tablo thead th:first-child { background: var(--tb-surface-2); }
[data-bs-theme="dark"] .tb-k8-tablo th:first-child, [data-bs-theme="dark"] .tb-k8-tablo td:first-child { background: #121C2E; }
.tb-k8-ad { display: block; font: 700 1rem/1.2 var(--tb-font-baslik); color: var(--tb-ink); }
.tb-k8-tablo thead th small { display: block; margin-top: .2rem; font-size: .72rem; font-weight: 600; color: var(--basic-primary, #3564AF); }
[data-bs-theme="dark"] .tb-k8-tablo thead th small { color: #AFC8EA; }
.tb-k8-tablo .tb-one { background: rgba(53,100,175,.07); }
.tb-k8-tablo thead .tb-one { background: rgba(53,100,175,.13); }
[data-bs-theme="dark"] .tb-k8-tablo .tb-one { background: rgba(53,100,175,.16); }
[data-bs-theme="dark"] .tb-k8-tablo thead .tb-one { background: rgba(53,100,175,.26); }
.tb-k8-fiyat td b { font: 700 1.08rem var(--tb-font-baslik); color: var(--tb-ink); }
.tb-k8-fiyat td small { margin-left: .2rem; font-size: .72rem; color: var(--tb-ink-soft); }
.tb-k8-var { color: var(--basic-primary, #3564AF); font-size: 1.1rem; }
[data-bs-theme="dark"] .tb-k8-var { color: #8DB8FF; }
.tb-k8-yok { color: var(--tb-ink-soft); opacity: .5; }
.tb-k8-cp { height: 18px; width: auto; display: inline-block; vertical-align: middle; }
.tb-k8-eylem td, .tb-k8-eylem th { border-bottom: 0; padding-block: 1rem; }
.tb-k8-sepet { display: inline-flex; align-items: center; gap: .3rem; padding: .5rem 1rem; border-radius: 9px; border: 1.5px solid var(--basic-primary, #3564AF); color: var(--basic-primary, #3564AF); font-size: .84rem; font-weight: 700; text-decoration: none; white-space: nowrap; transition: background .18s, color .18s; }
.tb-k8-sepet:hover { background: rgba(53,100,175,.08); color: var(--basic-primary, #3564AF); }
.tb-k8-sepet.dolu { background: linear-gradient(135deg, #D94256, #C62338); border-color: transparent; color: #fff; box-shadow: 0 10px 22px -10px rgba(198,35,56,.8); }
.tb-k8-sepet.dolu:hover { color: #fff; }
[data-bs-theme="dark"] .tb-k8-sepet { border-color: rgba(175,200,234,.55); color: #AFC8EA; }
[data-bs-theme="dark"] .tb-k8-sepet.dolu { color: #fff; }
.tb-k8-gruplar { border-top: 1px solid var(--tb-line); }
[data-bs-theme="dark"] .tb-k8-gruplar { border-top-color: rgba(255,255,255,.08); }
.tb-k8-grup + .tb-k8-grup { border-top: 1px solid var(--tb-line); }
[data-bs-theme="dark"] .tb-k8-grup + .tb-k8-grup { border-top-color: rgba(255,255,255,.08); }
.tb-k8-grup-bas { width: 100%; display: flex; align-items: center; gap: .85rem; padding: 1rem 1.25rem; border: 0; background: transparent; text-align: left; font: 700 .98rem var(--tb-font-baslik); color: var(--tb-ink); cursor: pointer; }
.tb-k8-grup-bas:hover { background: rgba(53,100,175,.04); }
.tb-k8-grup-bas .ikon { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; background: var(--basic-primary, #3564AF); color: #fff; font-size: 1rem; flex: none; }
.tb-k8-grup-bas .ok { margin-left: auto; color: var(--tb-ink-soft); transition: transform .2s ease; }
.tb-k8-grup-bas[aria-expanded="true"] .ok { transform: rotate(180deg); }
.tb-k8-grup-bas:focus-visible { outline: 2px solid var(--basic-primary, #3564AF); outline-offset: -2px; }
.tb-k8-grup dl { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 0 2.5rem; margin: 0; padding: 0 1.25rem 1.1rem; }
.tb-k8-grup dl div { display: flex; justify-content: space-between; gap: 1rem; padding: .55rem 0; border-bottom: 1px dashed var(--tb-line); font-size: .88rem; }
[data-bs-theme="dark"] .tb-k8-grup dl div { border-bottom-color: rgba(255,255,255,.1); }
.tb-k8-grup dt { color: var(--tb-ink-soft); font-weight: 500; }
.tb-k8-grup dd { margin: 0; color: var(--tb-ink); font-weight: 600; text-align: right; }
@media (max-width: 767.98px) { .tb-k8-tablo { min-width: 640px; } .tb-k8-tablo th:first-child, .tb-k8-tablo td:first-child { width: 140px; } .tb-k8-grup dl div { flex-direction: column; gap: .15rem; } .tb-k8-grup dd { text-align: left; } }
@media (prefers-reduced-motion: reduce) { .tb-k8-grup-bas .ok { transition: none; } }

/* ==================================================================
   SITENIZI BIZ TASIYALIM — sol metin + sag aktarim karti (bir kez oynar)
   ================================================================== */
.tb-ts { padding-block: clamp(2.5rem, 5vw, 4.5rem); background: radial-gradient(70% 60% at 85% 30%, rgba(53,100,175,.1), transparent 60%), var(--tb-surface-2); }
[data-bs-theme="dark"] .tb-ts { background: radial-gradient(70% 60% at 85% 30%, rgba(53,100,175,.2), transparent 60%), var(--tb-surface-2); }
.tb-ts-izgara { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2.4rem; align-items: center; }
@media (min-width: 992px) { .tb-ts-izgara { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 3.5rem; } }
.tb-ts-rozet { display: inline-flex; align-items: center; gap: .5rem; padding: .4rem .9rem; border-radius: 999px; border: 1px solid rgba(53,100,175,.3); background: var(--tb-surface); color: var(--basic-primary, #3564AF); font-size: .86rem; font-weight: 700; margin-bottom: 1.1rem; }
[data-bs-theme="dark"] .tb-ts-rozet { background: rgba(255,255,255,.05); color: #AFC8EA; border-color: rgba(175,200,234,.3); }
.tb-ts h2 { margin: 0 0 .9rem; font: 700 clamp(1.9rem, 3.4vw, 2.6rem)/1.1 var(--tb-font-baslik); letter-spacing: -.025em; color: var(--tb-ink); }
.tb-ts h2 span { background: linear-gradient(135deg, var(--basic-primary, #3564AF), #5B8DEF); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.tb-ts-lead { margin: 0 0 1.5rem; max-width: 50ch; font-size: 1rem; line-height: 1.65; color: var(--tb-ink-soft); }
.tb-ts-adim { list-style: none; margin: 0 0 1.8rem; padding: 0; display: grid; gap: 1rem; }
.tb-ts-adim li { display: flex; gap: .8rem; align-items: flex-start; }
.tb-ts-adim li > i { flex: none; margin-top: .1rem; font-size: 1.2rem; color: #0AA74B; }
.tb-ts-adim b { display: block; font: 700 1.02rem/1.3 var(--tb-font-baslik); color: var(--tb-ink); }
.tb-ts-adim span { display: block; margin-top: .15rem; font-size: .9rem; line-height: 1.55; color: var(--tb-ink-soft); }
.tb-ts-cta { box-shadow: 0 14px 30px -14px rgba(53,100,175,.9); }

/* AKTARIM KARTI — sinematik zemin: lacivert derinlik + perspektif izgara +
   mavi/kirmizi isik + ince neon cerceve. Animasyon DONGULU (kullanici istedi):
   paket gider, cubuk dolar, "Tasindi", kisa duraksama, bastan. */
.tb-ts-kart {
    position: relative; isolation: isolate; overflow: hidden; color: #fff;
    padding: clamp(1.4rem, 3vw, 2.2rem) clamp(1.2rem, 3vw, 2.2rem) 1.4rem; border-radius: 24px;
    background: radial-gradient(80% 60% at 20% 0%, #1B3A6E 0%, transparent 55%), linear-gradient(160deg, #0F1F3F 0%, #0B1526 55%, #0A1730 100%);
    box-shadow: 0 40px 80px -36px rgba(11,21,38,.85), inset 0 1px 0 rgba(255,255,255,.08);
}
.tb-ts-kart::before { /* neon cerceve */
    content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; pointer-events: none; z-index: 3;
    background: linear-gradient(135deg, rgba(141,184,255,.75), rgba(53,100,175,.15) 40%, rgba(198,35,56,.45) 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;
}
.tb-ts-zemin { /* perspektif izgara zemini */
    position: absolute; left: -30%; right: -30%; bottom: -8%; height: 70%; z-index: 0; pointer-events: none;
    background-image: linear-gradient(rgba(141,184,255,.16) 1px, transparent 1px), linear-gradient(90deg, rgba(141,184,255,.16) 1px, transparent 1px);
    background-size: 40px 40px; transform: perspective(420px) rotateX(58deg); transform-origin: 50% 100%;
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 45%, #000 100%); mask-image: linear-gradient(180deg, transparent 0%, #000 45%, #000 100%);
}
.tb-ts-isik { /* isik lekeleri + ince nokta dokusu */
    position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background:
        radial-gradient(42% 55% at 85% 20%, rgba(53,100,175,.55) 0%, transparent 70%),
        radial-gradient(30% 40% at 8% 90%, rgba(198,35,56,.28) 0%, transparent 70%),
        radial-gradient(rgba(255,255,255,.07) .8px, transparent .9px);
    background-size: auto, auto, 18px 18px;
}
.tb-ts-kart > .tb-ts-yol, .tb-ts-kart > .tb-ts-bar, .tb-ts-kart > .tb-ts-durum { position: relative; z-index: 1; }
.tb-ts-yol { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 1rem; margin-bottom: 1.6rem; }
.tb-ts-uc { display: flex; flex-direction: column; align-items: center; gap: .55rem; }
.tb-ts-uc small { font-size: .78rem; font-weight: 600; color: rgba(255,255,255,.65); white-space: nowrap; }
.tb-ts-kutu { position: relative; display: grid; place-items: center; width: 66px; height: 66px; border-radius: 16px; font-size: 1.6rem; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16); color: #fff; backdrop-filter: blur(6px); box-shadow: 0 16px 30px -18px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.12); }
.tb-ts-yeni .tb-ts-kutu { background: #fff; border-color: #fff; color: var(--basic-primary, #3564AF); box-shadow: 0 0 0 6px rgba(141,184,255,.14), 0 18px 36px -14px rgba(141,184,255,.7); }
.tb-ts-onay { position: absolute; top: -8px; right: -8px; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #0AA74B; color: #fff; font-size: .8rem; border: 2px solid #0B1526; transform: scale(0); transition: transform .3s cubic-bezier(.3,1.6,.5,1); }
.tb-ts-hat { position: relative; height: 40px; }
.tb-ts-cizgi { position: absolute; left: 0; right: 0; top: 50%; width: 100%; height: 4px; transform: translateY(-50%); overflow: visible; }
.tb-ts-cizgi line { stroke: rgba(141,184,255,.5); stroke-width: 2; stroke-dasharray: 3 3; stroke-dashoffset: 0; vector-effect: non-scaling-stroke; }
.tb-ts-kart.aktif .tb-ts-cizgi line { animation: tb-ts-akis 1.2s linear infinite; }
@keyframes tb-ts-akis { to { stroke-dashoffset: -6; } }
.tb-ts-iz { /* paketin arkasindaki parlak iz */
    position: absolute; left: 0; top: 50%; height: 2px; width: 0; transform: translateY(-50%); border-radius: 2px;
    background: linear-gradient(90deg, transparent, #8DB8FF); box-shadow: 0 0 10px rgba(141,184,255,.8); transition: width 1.6s cubic-bezier(.4,0,.2,1);
}
.tb-ts-kilit { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: #0B1526; border: 1px solid rgba(141,184,255,.45); color: #8DB8FF; font-size: .9rem; z-index: 1; }
.tb-ts-paket { position: absolute; left: 0; top: 50%; transform: translate(-50%, -50%); display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; background: linear-gradient(135deg, #5B8DEF, #3564AF); color: #fff; font-size: .95rem; box-shadow: 0 0 0 4px rgba(91,141,239,.2), 0 10px 24px -8px rgba(91,141,239,1); transition: left 1.6s cubic-bezier(.4,0,.2,1), opacity .25s; z-index: 2; }
.tb-ts-bar { height: 6px; border-radius: 3px; background: rgba(255,255,255,.12); overflow: hidden; margin-bottom: .9rem; }
.tb-ts-bar span { display: block; height: 100%; width: 4%; border-radius: 3px; background: linear-gradient(90deg, #3564AF, #8DB8FF); box-shadow: 0 0 12px rgba(141,184,255,.7); transition: width 1.7s cubic-bezier(.4,0,.2,1); }
.tb-ts-durum { display: flex; align-items: center; gap: .5rem; font-size: .86rem; color: rgba(255,255,255,.7); }
.tb-ts-durum > i { width: 9px; height: 9px; border-radius: 50%; background: #F5B942; box-shadow: 0 0 0 3px rgba(245,185,66,.2), 0 0 8px rgba(245,185,66,.7); transition: background .3s, box-shadow .3s; }
.tb-ts-durum b { color: #fff; }
.tb-ts-durum span::after { content: "·"; margin-left: .5rem; }
.tb-ts-nokta { font-style: normal; letter-spacing: .1em; color: rgba(255,255,255,.6); }
.tb-ts-kart.aktif .tb-ts-nokta { animation: tb-ts-nokta 1s steps(3, end) infinite; }
@keyframes tb-ts-nokta { to { clip-path: inset(0 -1px 0 0); } }
/* hareket halleri */
.tb-ts-kart.aktif .tb-ts-paket { left: 100%; }
.tb-ts-kart.aktif .tb-ts-iz { width: 100%; }
.tb-ts-kart.aktif .tb-ts-bar span { width: 100%; }
.tb-ts-kart.bitti .tb-ts-onay { transform: scale(1); }
.tb-ts-kart.bitti .tb-ts-durum > i { background: #4ED68A; box-shadow: 0 0 0 3px rgba(78,214,138,.2), 0 0 10px rgba(78,214,138,.8); }
.tb-ts-kart.bitti .tb-ts-nokta { display: none; }
.tb-ts-kart.bitti .tb-ts-paket { opacity: 0; }
.tb-ts-kart.bitti .tb-ts-cizgi line { animation: none; }
.tb-ts-kart.sifirla * { transition: none !important; animation: none !important; }
@media (max-width: 575.98px) { .tb-ts-kutu { width: 54px; height: 54px; font-size: 1.3rem; } .tb-ts-yol { gap: .6rem; } }
@media (prefers-reduced-motion: reduce) { .tb-ts-paket, .tb-ts-bar span, .tb-ts-onay, .tb-ts-iz { transition: none; } .tb-ts-cizgi line, .tb-ts-nokta { animation: none !important; } }

/* ==================================================================
   HAZIR UYGULAMALAR — metin + 2x4 logo izgarasi
   ================================================================== */
.tb-uy { padding-block: clamp(2.5rem, 5vw, 4.5rem); background: var(--tb-surface); }
[data-bs-theme="dark"] .tb-uy { background: var(--tb-surface-2); }
.tb-uy-izgara { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2.2rem; align-items: center; }
@media (min-width: 992px) { .tb-uy-izgara { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 3.5rem; } }
.tb-uy-rozet { display: inline-flex; align-items: center; gap: .5rem; padding: .4rem .9rem; border-radius: 999px; border: 1px solid rgba(53,100,175,.3); background: var(--tb-surface-2); color: var(--basic-primary, #3564AF); font-size: .86rem; font-weight: 700; margin-bottom: 1.1rem; }
[data-bs-theme="dark"] .tb-uy-rozet { background: rgba(255,255,255,.05); color: #AFC8EA; border-color: rgba(175,200,234,.3); }
.tb-uy h2 { margin: 0 0 .9rem; font: 700 clamp(1.9rem, 3.4vw, 2.6rem)/1.1 var(--tb-font-baslik); letter-spacing: -.025em; color: var(--tb-ink); }
.tb-uy h2 span { display: block; background: linear-gradient(135deg, var(--basic-primary, #3564AF), #5B8DEF); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.tb-uy-sol p { margin: 0; max-width: 52ch; font-size: 1rem; line-height: 1.65; color: var(--tb-ink-soft); }
.tb-uy-logolar { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem; }
@media (min-width: 576px) and (max-width: 991.98px) { .tb-uy-logolar { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.tb-uy-logolar li {
    position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .5rem; min-height: 118px; padding: 1rem;
    border-radius: 16px; background: var(--tb-surface); border: 1px solid var(--tb-line); box-shadow: var(--tb-shadow); transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.tb-uy-logolar li:hover { transform: translateY(-3px); box-shadow: var(--tb-shadow-lg); border-color: rgba(53,100,175,.35); }
[data-bs-theme="dark"] .tb-uy-logolar li { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.1); }
.tb-uy-logolar img { width: auto; max-width: 120px; height: 42px; object-fit: contain; }
.tb-uy-logolar span { font-size: .82rem; font-weight: 600; color: var(--tb-ink-soft); }
.tb-uy-tek { padding-top: 1.9rem !important; border-color: rgba(53,100,175,.4) !important; background: linear-gradient(180deg, rgba(53,100,175,.06), transparent) !important; }
.tb-uy-tek em { position: absolute; top: 9px; left: 50%; transform: translateX(-50%); white-space: nowrap; display: inline-flex; align-items: center; gap: .25rem; padding: .22rem .5rem; border-radius: 6px; background: linear-gradient(135deg, #D94256, #C62338); color: #fff; font: 700 .64rem/1 var(--tb-font-govde); font-style: normal; letter-spacing: .02em; }
@media (prefers-reduced-motion: reduce) { .tb-uy-logolar li { transition: none; } }

/* ==================================================================
   KURUMSAL HOSTING (kategori 2) — AYRI KIMLIK
   Web Hosting: harita + cam panel. Kurumsal: ince cizgili lacivert
   "takim elbise" dokusu, kirmizi ust hat, solda guvence karolari, sagda
   KURUMSAL HESAP PANOSU (siteler/e-posta/veritabani + canli sunucu
   sagligi cubuklari). Altta "buyume yolu": logonun yukselen cubuklari
   gibi 4 basamak.
   ================================================================== */
.tb-kh { position: relative; isolation: isolate; overflow: hidden; color: #fff; background: #060D1F; padding: clamp(1.6rem, 3vw, 2.6rem) 0 1.6rem; }
.tb-kh::before { /* web hosting hero'suyla ayni atmosfer: derin lacivert + mavi isik */
    content: ""; position: absolute; inset: 0; z-index: -3; pointer-events: none;
    background:
        radial-gradient(60% 70% at 72% 30%, rgba(53,100,175,.45) 0%, transparent 60%),
        radial-gradient(40% 50% at 12% 85%, rgba(53,100,175,.2) 0%, transparent 60%),
        linear-gradient(180deg, #050B1A 0%, #081226 55%, #0B1526 100%);
}
.tb-kh-ag { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -2; pointer-events: none; display: none; }
@media (min-width: 992px) { .tb-kh-ag { display: block; } }
.tb-kh-sag { position: relative; z-index: 1; }
@media (min-width: 1100px) { .tb-kh-sag { min-height: 560px; display: flex; flex-direction: column; justify-content: flex-end; } }
.tb-kh-rozetler { list-style: none; margin: 0 0 1rem; padding: 0; display: flex; flex-wrap: wrap; gap: .6rem; position: relative; z-index: 1; }
.tb-kh-rozetler li { flex: 1 1 140px; display: flex; align-items: center; gap: .7rem; padding: .7rem .9rem; border-radius: 14px; border: 1px solid rgba(255,255,255,.16); background: linear-gradient(160deg, rgba(255,255,255,.12), rgba(255,255,255,.04)); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 20px 40px -24px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.18); }
.tb-kh-rozetler li > i { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: rgba(53,100,175,.35); color: #AFC8EA; font-size: 1rem; }
.tb-kh-rozetler b { display: block; font: 700 1.05rem/1.1 var(--tb-font-baslik); color: #fff; }
.tb-kh-rozetler small { display: block; font-size: .72rem; color: rgba(255,255,255,.62); }
.tb-kh-sag::after { /* camin arkasinda mavi isik */
    content: ""; position: absolute; left: -4%; right: 10%; bottom: -8%; height: 70%; z-index: 0; pointer-events: none; border-radius: 40%;
    background: radial-gradient(60% 60% at 30% 80%, rgba(53,100,175,.5) 0%, transparent 65%), radial-gradient(55% 60% at 80% 20%, rgba(91,141,239,.6) 0%, transparent 65%);
    filter: blur(28px);
}
.tb-kh::after { /* ust kirmizi hat: kurumsal imza */
    content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; z-index: 1;
    background: linear-gradient(90deg, var(--basic-secondary, #C62338), #FF7AA6 55%, transparent 100%);
}
.tb-kh-izgara { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.6rem; }
@media (min-width: 1100px) { .tb-kh-izgara { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 2.4rem; align-items: end; } .tb-kh-sol { align-self: center; padding-bottom: .4rem; } }
.tb-kh-rozet { display: inline-flex; align-items: center; gap: .5rem; margin-bottom: 1.1rem; padding: .42rem .9rem .42rem .6rem; border-radius: 999px; border: 1px solid rgba(255,122,166,.35); background: rgba(198,35,56,.14); font-size: .88rem; font-weight: 600; color: #fff; }
.tb-kh-rozet i { color: #FF7AA6; }
.tb-kh h1 { margin: 0 0 1rem; font: 700 clamp(2.2rem, 4.4vw, 3.6rem)/1.04 var(--tb-font-baslik); letter-spacing: -.03em; color: #fff; }
@media (min-width: 1100px) { .tb-kh-sol { position: relative; z-index: 2; } .tb-kh h1 span { white-space: nowrap; } }
.tb-kh h1 span { display: block; }
.tb-kh-lead { margin: 0 0 1.5rem; max-width: 54ch; font-size: 1.02rem; line-height: 1.65; color: rgba(255,255,255,.78); }
.tb-kh-guv { list-style: none; margin: 0 0 1.6rem; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8rem 1rem; }
.tb-kh-guv li { display: block; min-width: 0; padding-right: .6rem; border-right: 1px solid rgba(255,255,255,.14); }
.tb-kh-guv li:last-child { border-right: 0; }
.tb-kh-guv li > i { display: block; margin-bottom: .4rem; font-size: 1.5rem; line-height: 1; color: #FF7AA6; }
.tb-kh-guv b { display: block; font: 700 1rem/1.2 var(--tb-font-baslik); color: #fff; }
.tb-kh-guv small { display: block; margin-top: .15rem; font-size: .74rem; line-height: 1.4; color: rgba(255,255,255,.58); }
.tb-kh-eylem { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 1.1rem; }
.tb-kh-cta { color: #fff; background: linear-gradient(135deg, #D4203C, #F0456B); box-shadow: 0 0 0 1px rgba(255,122,166,.35), 0 14px 34px -10px rgba(212,32,60,.9); }
.tb-kh-cta:hover { color: #fff; transform: translateY(-1px); }
.tb-kh-fiyat { font-size: .9rem; color: rgba(255,255,255,.7); }
.tb-kh-fiyat b { color: #fff; font: 700 1.2em var(--tb-font-baslik); }

/* kurumsal hesap panosu */
/* kurumsal hero: yuzen cam etiket kartlari (gz silinirken kaybolmustu; v65 geri yazildi, son konumlar: hesap sag ust, siteler sol, vt sol alt, eposta sag alt) */
.tb-kh-kartlar { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; position: relative; z-index: 2; }
.tb-kh-kartlar li { display: flex; align-items: center; gap: .7rem; padding: .6rem .85rem; border-radius: 13px; border: 1px solid rgba(141,184,255,.3); background: linear-gradient(160deg, rgba(20,38,78,.72), rgba(8,16,38,.78)); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 18px 36px -22px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.1), 0 0 0 1px rgba(91,141,239,.12); }
.tb-kh-kartlar li > i { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: rgba(53,100,175,.3); color: #8DB8FF; font-size: 1.05rem; }
.tb-kh-kartlar b { display: block; font: 700 .9rem/1.15 var(--tb-font-baslik); color: #fff; }
.tb-kh-kartlar small { display: block; margin-top: .1rem; font-size: .7rem; line-height: 1.3; color: rgba(255,255,255,.62); white-space: nowrap; }
@media (min-width: 1100px) {
    .tb-kh-kartlar { display: block; margin: 0; position: absolute; inset: 0; pointer-events: none; }
    .tb-kh-kartlar li { position: absolute; }
    .tb-kh-kartlar li.hesap { right: 0; top: 7%; }
    .tb-kh-kartlar li.siteler { left: 0; top: 12%; }
    .tb-kh-kartlar li.vt { left: 0; top: 58%; }
    .tb-kh-kartlar li.eposta { right: 0; top: 58%; }
    .tb-kh-kartlar li { max-width: 40%; }
    .tb-kh-kartlar small { white-space: normal; }
}
.tb-kh-pano { position: relative; z-index: 1; width: 100%; border-radius: 20px; background: linear-gradient(160deg, rgba(255,255,255,.11), rgba(255,255,255,.035)); border: 1px solid rgba(255,255,255,.16); backdrop-filter: blur(24px) saturate(1.5); -webkit-backdrop-filter: blur(24px) saturate(1.5); box-shadow: 0 34px 64px -30px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.22); overflow: hidden; }
.tb-kh-pano::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: linear-gradient(180deg, #D4203C, #FF7AA6); }
.tb-kh-pano-bas { display: flex; align-items: center; gap: .8rem; padding: .85rem 1.2rem; border-bottom: 1px solid rgba(255,255,255,.12); }
.tb-kh-pano-bas .tb-h7-taze { margin-left: auto; padding: 0; border: 0; }
.tb-kh-pano-bas .ikon { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 11px; background: linear-gradient(135deg, #3564AF, #5B8DEF); color: #fff; font-size: 1.1rem; }
.tb-kh-pano-bas b { display: block; font: 700 .95rem/1.2 var(--tb-font-baslik); }
.tb-kh-pano-bas small { display: block; font-size: .76rem; color: rgba(255,255,255,.6); }
.tb-kh-canli { margin-left: auto; display: inline-flex; align-items: center; gap: .4rem; font-size: .72rem; color: rgba(255,255,255,.65); }
.tb-kh-canli i { width: 7px; height: 7px; border-radius: 50%; background: #4ED68A; box-shadow: 0 0 8px rgba(78,214,138,.8); animation: tb-nabiz 2.4s ease-out infinite; }
.tb-kh-satir { display: grid; grid-template-columns: 112px auto minmax(0, 1fr); align-items: center; gap: .6rem 1rem; padding: .8rem 1.3rem; border-bottom: 1px solid rgba(255,255,255,.1); }
.tb-kh-satir > span { display: inline-flex; align-items: center; gap: .45rem; font-size: .8rem; color: rgba(255,255,255,.62); }
.tb-kh-satir > span i { color: #8DB8FF; }
.tb-kh-satir > b { font: 700 1rem var(--tb-font-baslik); color: #fff; white-space: nowrap; }
.tb-kh-cipler { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .35rem; justify-content: flex-end; }
.tb-kh-cipler li { padding: .22rem .55rem; border-radius: 6px; font-size: .7rem; font-weight: 600; color: rgba(255,255,255,.82); background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.1); }
.tb-kh-cipler li.mavi { background: rgba(53,100,175,.3); border-color: rgba(141,184,255,.35); color: #DCE9FF; }
.tb-kh-saglik { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; padding: .85rem 1.2rem 1rem; }
.tb-kh-saglik > small { display: block; margin-bottom: .6rem; font-size: .72rem; font-weight: 600; letter-spacing: .02em; color: rgba(255,255,255,.55); }
.tb-kh-olcek { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "ad deger" "bar bar"; align-items: center; gap: .35rem .5rem; font-size: .76rem; color: rgba(255,255,255,.68); }
.tb-kh-olcek > span { grid-area: ad; font-size: .72rem; line-height: 1.25; } .tb-kh-olcek > b { grid-area: deger; } .tb-kh-olcek .bar { grid-area: bar; }
.tb-kh-olcek b { font: 700 .92rem var(--tb-font-baslik); color: #fff; text-align: right; white-space: nowrap; }
.tb-kh-olcek .bar { height: 7px; border-radius: 4px; background: rgba(255,255,255,.14); overflow: hidden; }
.tb-kh-olcek .bar i { display: block; height: 100%; width: 2%; border-radius: 4px; background: linear-gradient(90deg, #3564AF, #8DB8FF); box-shadow: 0 0 10px rgba(141,184,255,.6); transition: width 1s cubic-bezier(.2,.8,.2,1); }
.tb-kh-olcek .bar i.uyari { background: linear-gradient(90deg, #F5B942, #FFD37A); }
.tb-kh-olcek .bar i.iyi { background: linear-gradient(90deg, #0AA74B, #4ED68A); box-shadow: 0 0 10px rgba(78,214,138,.5); }
.tb-kh-pano .tb-h7-taze { padding: .6rem 1.3rem .95rem; border-top: 0; }
@media (max-width: 899.98px) { .tb-kh-guv { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tb-kh-guv li { border-right: 0; padding-right: 0; } }
@media (max-width: 575.98px) { .tb-kh-saglik { grid-template-columns: 1fr; gap: .6rem; } }

/* buyume yolu: logonun yukselen cubuklari gibi 4 basamak */
.tb-yol { padding-block: clamp(2.5rem, 5vw, 4.5rem); background: var(--tb-surface); }
[data-bs-theme="dark"] .tb-yol { background: var(--tb-surface-2); }
.tb-yol-izgara { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .9rem; align-items: end; }
@media (max-width: 991.98px) { .tb-yol-izgara { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 575.98px) { .tb-yol-izgara { grid-template-columns: 1fr; } }
.tb-yol-adim { position: relative; display: flex; flex-direction: column; border-radius: 16px 16px 12px 12px; border: 1px solid var(--tb-line); background: var(--tb-surface); box-shadow: var(--tb-shadow); overflow: hidden; min-height: calc(300px + var(--k, 0) * 34px); transition: transform .2s ease, box-shadow .2s ease; }
@media (max-width: 991.98px) { .tb-yol-adim { min-height: 0; } }
.tb-yol-adim:hover { transform: translateY(-3px); box-shadow: var(--tb-shadow-lg); }
[data-bs-theme="dark"] .tb-yol-adim { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.1); }
.tb-yol-adim::before { content: ""; height: 6px; background: linear-gradient(90deg, var(--basic-deep, #0B1526), var(--basic-primary, #3564AF)); }
.tb-yol-adim.one::before { background: linear-gradient(90deg, #D4203C, #FF7AA6); }
.tb-yol-ic { display: flex; flex-direction: column; flex: 1 1 auto; padding: 1.15rem 1.2rem 1.2rem; }
.tb-yol-no { font: 700 .72rem var(--tb-font-govde); letter-spacing: .08em; color: var(--tb-ink-soft); }
.tb-yol-adim h3 { margin: .2rem 0 .3rem; font: 700 1.15rem/1.2 var(--tb-font-baslik); color: var(--tb-ink); }
.tb-yol-kim { margin: 0 0 .9rem; font-size: .86rem; line-height: 1.5; color: var(--tb-ink-soft); }
.tb-yol-sayi { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; margin-bottom: .9rem; }
.tb-yol-sayi div { padding: .55rem .6rem; border-radius: 10px; background: var(--tb-surface-2); }
[data-bs-theme="dark"] .tb-yol-sayi div { background: rgba(255,255,255,.05); }
.tb-yol-sayi b { display: block; font: 700 1.2rem/1.1 var(--tb-font-baslik); color: var(--tb-ink); }
.tb-yol-sayi small { font-size: .7rem; color: var(--tb-ink-soft); }
.tb-yol-fiyat { display: flex; align-items: baseline; gap: .25rem; font-size: .8rem; color: var(--tb-ink-soft); }
.tb-yol-fiyat b { font: 700 1.5rem/1 var(--tb-font-baslik); letter-spacing: -.02em; color: var(--tb-ink); }
.tb-yol-sec { margin-top: .8rem; margin-bottom: .4rem; display: inline-flex; align-items: center; justify-content: center; gap: .3rem; padding: .55rem .9rem; border-radius: 9px; border: 1.5px solid var(--basic-primary, #3564AF); color: var(--basic-primary, #3564AF); font-size: .84rem; font-weight: 700; text-decoration: none; }
.tb-yol-sec:hover { background: rgba(53,100,175,.08); color: var(--basic-primary, #3564AF); }
.tb-yol-adim.one .tb-yol-sec { background: linear-gradient(135deg, #D4203C, #F0456B); border-color: transparent; color: #fff; }
[data-bs-theme="dark"] .tb-yol-sec { border-color: rgba(175,200,234,.55); color: #AFC8EA; }
/* basamagin alt bosluğu: logonun yukselen cubuklari — yukseklik --k ile artar */
.tb-yol-adim::after { content: ""; display: block; margin-top: auto; height: calc(14px + var(--k, 0) * 34px); background: repeating-linear-gradient(90deg, rgba(53,100,175,.16) 0 12px, transparent 12px 20px); -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 100%); mask-image: linear-gradient(180deg, transparent 0%, #000 100%); }
.tb-yol-adim.one::after { background: repeating-linear-gradient(90deg, rgba(212,32,60,.18) 0 12px, transparent 12px 20px); }
[data-bs-theme="dark"] .tb-yol-adim::after { background: repeating-linear-gradient(90deg, rgba(141,184,255,.14) 0 12px, transparent 12px 20px); }
@media (max-width: 991.98px) { .tb-yol-adim::after { height: 14px; } }
@media (prefers-reduced-motion: reduce) { .tb-yol-adim, .tb-kh-olcek .bar i { transition: none; } .tb-kh-canli i, .tb-fz-led { animation: none; } }

/* ==================================================================
   FIZIKSEL SUNUCU (kategori 6) — AYRI KIMLIK: "makinenin kendisi"
   Zemin web hosting atmosferi; vurgu celik/mavi. Sagda canvas donanim
   sahnesi; altta "Bursa'dan dunyaya gecikme" (gercek olcum).
   ================================================================== */
.tb-fz { position: relative; isolation: isolate; overflow: hidden; color: #fff; background: #060D1F; padding: clamp(1.6rem, 3vw, 2.6rem) 0 1.6rem; }
.tb-fz::before { content: ""; position: absolute; inset: 0; z-index: -3; pointer-events: none; background: radial-gradient(60% 70% at 75% 35%, rgba(53,100,175,.42) 0%, transparent 60%), radial-gradient(40% 50% at 12% 85%, rgba(53,100,175,.18) 0%, transparent 60%), linear-gradient(180deg, #050B1A 0%, #081226 55%, #0B1526 100%); }
.tb-fz::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; z-index: 1; background: linear-gradient(90deg, #8DB8FF, var(--basic-primary, #3564AF) 50%, transparent 100%); }
.tb-fz-donanim { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -2; pointer-events: none; display: none; }
@media (min-width: 992px) { .tb-fz-donanim { display: block; } }
.tb-fz-izgara { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem; align-items: center; }
@media (min-width: 1100px) { .tb-fz-izgara { grid-template-columns: minmax(0, 1fr) minmax(0, 1.45fr); gap: 2.2rem; align-items: center; } }
.tb-fz-rozet { display: inline-flex; align-items: center; gap: .5rem; margin-bottom: 1.1rem; padding: .42rem .9rem .42rem .6rem; border-radius: 999px; border: 1px solid rgba(141,184,255,.35); background: rgba(53,100,175,.18); font-size: .88rem; font-weight: 600; color: #fff; }
.tb-fz-rozet i { color: #8DB8FF; }
.tb-fz h1 { margin: 0 0 1.618rem; font: 700 clamp(2rem, 3.7vw, 3.05rem)/1.06 var(--tb-font-baslik); letter-spacing: -.03em; color: #fff; }
@media (min-width: 1100px) { .tb-fz h1 span { white-space: nowrap; } }
.tb-fz h1 span { display: block; }
.tb-fz-lead { margin: 0 0 2.618rem; max-width: 42ch; font-size: 1.02rem; line-height: 1.65; color: rgba(255,255,255,.78); }
.tb-fz-guv { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .7rem; position: relative; z-index: 1; }
@media (min-width: 1100px) { .tb-fz-guv { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; } .tb-fz-guv li > i { width: 28px; height: 28px; font-size: .95rem; } }
.tb-fz-guv li { --r: #8DB8FF; --rgb: 141,184,255; position: relative; display: flex; gap: .6rem; align-items: flex-start; padding: .7rem .75rem .65rem; border-radius: 4px 12px 12px 4px; border: 1px solid rgba(255,255,255,.12); border-left: 3px solid var(--r); background: linear-gradient(160deg, rgba(255,255,255,.1), rgba(255,255,255,.035)); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 20px 40px -24px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.14), -8px 0 24px -12px rgba(var(--rgb), .5); }
.tb-fz-guv li.kirmizi { --r: #F0456B; --rgb: 240,69,107; } .tb-fz-guv li.yesil { --r: #4ED68A; --rgb: 78,214,138; }
@media (min-width: 1100px) { .tb-fz-guv li::before { content: ""; position: absolute; left: 50%; top: -22px; width: 1px; height: 22px; background: linear-gradient(180deg, transparent, rgba(var(--rgb), .6)); } }
.tb-fz-led { position: absolute; top: 10px; right: 10px; width: 7px; height: 7px; border-radius: 50%; background: var(--r); box-shadow: 0 0 8px rgba(var(--rgb), .9); animation: tb-nabiz-fz 2.6s ease-out infinite; }
.tb-fz-guv li.kirmizi .tb-fz-led { animation-delay: .6s; } .tb-fz-guv li.yesil .tb-fz-led { animation-delay: 1.2s; }
@keyframes tb-nabiz-fz { 0% { box-shadow: 0 0 0 0 rgba(var(--rgb), .55), 0 0 8px rgba(var(--rgb), .9); } 70% { box-shadow: 0 0 0 8px rgba(var(--rgb), 0), 0 0 8px rgba(var(--rgb), .9); } 100% { box-shadow: 0 0 0 0 rgba(var(--rgb), 0), 0 0 8px rgba(var(--rgb), .9); } }
.tb-fz-guv code { display: inline-block; margin-bottom: .22rem; padding: .1rem .4rem; border-radius: 5px; background: rgba(var(--rgb), .14); border: 1px solid rgba(var(--rgb), .3); font: 600 .66rem/1.3 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .04em; color: var(--r); }
.tb-fz-guv li > i { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: linear-gradient(145deg, rgba(var(--rgb), .35), rgba(var(--rgb), .1)); color: var(--r); font-size: 1.05rem; }
.tb-fz-guv b { display: block; font: 700 .86rem/1.2 var(--tb-font-baslik); color: #fff; }
.tb-fz-guv small { display: block; margin-top: .12rem; font-size: .7rem; line-height: 1.35; color: rgba(255,255,255,.6); }
.tb-fz-eylem { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 1.1rem; }
.tb-fz-cta { color: #fff; background: linear-gradient(135deg, #3564AF, #5B8DEF); box-shadow: 0 0 0 1px rgba(141,184,255,.35), 0 14px 34px -10px rgba(91,141,239,.95); }
.tb-fz-cta:hover { color: #fff; transform: translateY(-1px); }
.tb-fz-fiyat { margin: 1rem 0 0; font-size: .9rem; color: rgba(255,255,255,.7); }
.tb-fz-fiyat b { color: #fff; font: 700 1.2em var(--tb-font-baslik); }
.tb-fz-sag { position: relative; z-index: 1; }
@media (min-width: 1100px) { .tb-fz-sag { min-height: 560px; } .tb-fz-ornek { position: absolute; top: 0; right: 0; } }
.tb-fz-ornek { display: inline-flex; align-items: center; gap: .5rem; padding: .5rem .9rem; border-radius: 12px; border: 1px solid rgba(255,255,255,.16); background: linear-gradient(160deg, rgba(255,255,255,.12), rgba(255,255,255,.04)); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); font-size: .82rem; font-weight: 600; color: #fff; }
.tb-fz-ornek i { color: #8DB8FF; }
.tb-fz-logolar { list-style: none; margin: 2.618rem 0 0; padding: 1rem 0 0; border-top: 1px solid rgba(255,255,255,.1); display: flex; flex-wrap: nowrap; align-items: center; justify-content: space-between; gap: .8rem; }
.tb-fz-logolar li { flex: 0 1 auto; min-width: 0; }
.tb-fz-logolar img { height: 16px; width: auto; max-width: 100%; display: block; filter: brightness(0) invert(1); opacity: .55; }
@media (max-width: 575.98px) { .tb-fz-logolar { flex-wrap: wrap; justify-content: flex-start; gap: .7rem 1.2rem; } }
@media (max-width: 575.98px) { .tb-fz-guv { grid-template-columns: 1fr; } }

/* ==================================================================
   NEON DUGME — Musteri Paneli dugmesiyle AYNI teknik (ui.css):
   donen conic-gradient cerceve (::before) + senkron dis parilti (::after).
   Dolgulu dugmede dolgu korunur; cerceve ve parilti ustune biner.
   ================================================================== */
.tb-neon { position: relative; isolation: isolate; }
.tb-neon::before {
    content: ""; position: absolute; inset: 0; z-index: 2; border-radius: inherit; padding: 1.5px; pointer-events: none;
    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);
    -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 4s linear infinite;
}
.tb-neon::after {
    content: ""; position: absolute; inset: -2px; z-index: -1; border-radius: calc(var(--tb-radius-sm, 12px) + 2px); 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-neon > * { position: relative; z-index: 1; }
/* iki dugme ayni anda ayni aciyi gostermesin: ikincisi yarim tur geride */
.tb-neon + .tb-neon::before, .tb-neon + .tb-neon::after { animation-delay: -2s; }
@media (prefers-reduced-motion: reduce) { .tb-neon::before, .tb-neon::after { animation: none; } }
/* kart dugmesi: 10px radius -> parilti 12px; neon cerceve varken ince kenar gereksiz */
.plan-card .btn.tb-neon { --tb-radius-sm: 10px; border-color: transparent; }
.plan-card .btn-soft.tb-neon { box-shadow: none; background: linear-gradient(180deg, rgba(53,100,175,.14), rgba(53,100,175,.08)); color: var(--basic-deep, #0B1526); }
.plan-card .btn-soft.tb-neon:hover { background: linear-gradient(180deg, rgba(53,100,175,.22), rgba(53,100,175,.14)); color: var(--basic-deep, #0B1526); }
.plan-card .btn-soft.tb-neon::after { opacity: .45; }
[data-bs-theme="dark"] .plan-card .btn-soft.tb-neon { background: rgba(255,255,255,.06); color: #DCE9FF; }
[data-bs-theme="dark"] .plan-card .btn-soft.tb-neon:hover { background: rgba(255,255,255,.11); color: #fff; }
[data-bs-theme="dark"] .plan-card .btn-soft.tb-neon::after { opacity: .85; }
/* kartlarda 4 dugme ayni fazda donmesin */
.tb-pk6-sar:nth-child(2) .tb-neon::before, .tb-pk6-sar:nth-child(2) .tb-neon::after { animation-delay: -1s; }
.tb-pk6-sar:nth-child(3) .tb-neon::before, .tb-pk6-sar:nth-child(3) .tb-neon::after { animation-delay: -2s; }
.tb-pk6-sar:nth-child(4) .tb-neon::before, .tb-pk6-sar:nth-child(4) .tb-neon::after { animation-delay: -3s; }
/* karsilastirma tablosu satin al: neon cerceve; AYDINLIK kipte beyaz hucre
   ustunde parilti patladigi icin dugmeye dolgu verilir (acik mavi zemin, lacivert metin) */
.tb-k8-sepet.tb-neon { --tb-radius-sm: 9px; border-color: transparent; background: linear-gradient(180deg, rgba(53,100,175,.14), rgba(53,100,175,.08)); color: var(--basic-deep, #0B1526); }
.tb-k8-sepet.tb-neon:hover { background: linear-gradient(180deg, rgba(53,100,175,.22), rgba(53,100,175,.14)); color: var(--basic-deep, #0B1526); }
.tb-k8-sepet.tb-neon::after { opacity: .45; }
.tb-k8-sepet.tb-neon.dolu { background: linear-gradient(135deg, #D94256, #C62338); color: #fff; }
.tb-k8-sepet.tb-neon.dolu:hover { color: #fff; }
[data-bs-theme="dark"] .tb-k8-sepet.tb-neon { background: rgba(255,255,255,.05); color: #DCE9FF; }
[data-bs-theme="dark"] .tb-k8-sepet.tb-neon:hover { background: rgba(255,255,255,.1); color: #fff; }
[data-bs-theme="dark"] .tb-k8-sepet.tb-neon::after { opacity: .85; }
[data-bs-theme="dark"] .tb-k8-sepet.tb-neon.dolu, [data-bs-theme="dark"] .tb-k8-sepet.tb-neon.dolu:hover { background: linear-gradient(135deg, #D94256, #C62338); color: #fff; }
.tb-k8-eylem td:nth-child(3) .tb-neon::before, .tb-k8-eylem td:nth-child(3) .tb-neon::after { animation-delay: -1s; }
.tb-k8-eylem td:nth-child(4) .tb-neon::before, .tb-k8-eylem td:nth-child(4) .tb-neon::after { animation-delay: -2s; }
.tb-k8-eylem td:nth-child(5) .tb-neon::before, .tb-k8-eylem td:nth-child(5) .tb-neon::after { animation-delay: -3s; }
/* DONEN ISIK YALNIZCA POPULER PAKETTE SUREKLI YANAR (kullanici istegi).
   Diger paketlerde gizli ve durgun; fare karta (tabloda o hucreye) gelince
   ya da klavyeyle dugmeye odaklaninca yumusakca yanip donmeye baslar.
   Populer kart btn-primary, tablodaki populer dugme .dolu tasir; ikisi
   bu kurallarin disinda kalir. Gizleme seciciler :not(:hover) ile
   ozgulluk kazanir, boylece koyu kipteki opacity kurallarini da ezer;
   fare gelince mevcut opacity degerlerine kendiliginden doner. */
.plan-card .btn-soft.tb-neon::before, .plan-card .btn-soft.tb-neon::after,
.tb-k8-sepet.tb-neon:not(.dolu)::before, .tb-k8-sepet.tb-neon:not(.dolu)::after { transition: opacity .35s ease; }
.plan-card:not(:hover) .btn-soft.tb-neon:not(:focus-visible)::before,
.plan-card:not(:hover) .btn-soft.tb-neon:not(:focus-visible)::after,
.tb-k8-eylem td:not(:hover) .tb-k8-sepet.tb-neon:not(.dolu):not(:focus-visible)::before,
.tb-k8-eylem td:not(:hover) .tb-k8-sepet.tb-neon:not(.dolu):not(:focus-visible)::after { opacity: 0; animation-play-state: paused; }


/* ==================================================================
   TEKNOLOJI SERIDI (.tb-srt) — canvas marquee, kenarlarda maske
   ================================================================== */
.tb-srt { padding-block: clamp(2.2rem, 4.5vw, 3.8rem) 0; background: var(--tb-surface-2); }
.tb-srt .tb-h5-bas { margin-bottom: 1.2rem; }
.tb-srt-sar { position: relative; width: 100%; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%); }
.tb-srt-sar canvas { display: block; width: 100%; height: 152px; }

/* ==================================================================
   FIZIKSEL SUNUCU KARTI (.tb-sv) — raf unitesi gibi kart
   ================================================================== */
.tb-sv-izgara { grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }
.tb-sv-sar { position: relative; display: flex; flex-direction: column; padding-top: 38px; height: 100%; }
.tb-sv-sar .plan-card { flex: 1 1 auto; display: flex; flex-direction: column; border-radius: 14px; }
.tb-sv-populer .plan-card { border-color: rgba(198,35,56,.6); border-top-left-radius: 0; border-top-right-radius: 0; box-shadow: 0 0 0 1px rgba(198,35,56,.3), var(--tb-shadow-lg); }
.tb-sv-bezel { display: block; width: 100%; height: 84px; border-bottom: 1px solid rgba(141,184,255,.25); background: #0B1526; }
.tb-sv-bas { padding: 1rem 1.15rem .4rem; }
.tb-sv-bas h4 { margin: 0 0 .15rem; font: 700 1.2rem/1.2 var(--tb-font-baslik); letter-spacing: -.01em; color: var(--tb-ink); }
.tb-sv-etiket { margin: 0; font-size: .8rem; color: var(--tb-ink-soft); }
/* 2x2 donanim karolari */
.tb-sv-spec { list-style: none; margin: .5rem 1.15rem .3rem; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
.tb-sv-spec li { position: relative; display: flex; flex-direction: column; gap: .1rem; padding: .6rem .7rem .55rem 2.3rem; border-radius: 10px; background: var(--tb-surface-2); border: 1px solid var(--tb-line); }
[data-bs-theme="dark"] .tb-sv-spec li { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.1); }
.tb-sv-spec li > i { position: absolute; left: .7rem; top: .7rem; font-size: 1rem; color: var(--basic-primary, #3564AF); }
[data-bs-theme="dark"] .tb-sv-spec li > i { color: #AFC8EA; }
.tb-sv-spec b { font: 700 .92rem/1.2 var(--tb-font-baslik); color: var(--tb-ink); word-break: break-word; }
.tb-sv-spec small { font-size: .7rem; color: var(--tb-ink-soft); }
.plan-card .tb-sv-fiyat.price-band { border-bottom: 0; padding-top: .6rem !important; }
.tb-sv .tb-pk6-sepet { padding: .2rem 1.15rem 1.1rem; margin-top: auto; }
.tb-sv-cip { list-style: none; margin: 0 1.15rem 1rem; padding: .7rem 0 0; border-top: 1px dashed var(--tb-line); display: flex; flex-wrap: wrap; gap: .35rem .8rem; font-size: .78rem; color: var(--tb-ink-soft); }
.tb-sv-cip i { color: #0AA74B; margin-right: .25rem; }

/* ==================================================================
   UZAKTAN YONETIM KONSOLU (.tb-kn) — Fiziksel Sunucu, paketlerin altinda
   ================================================================== */
.tb-kn { padding-block: clamp(2.5rem, 5vw, 4.5rem); background: radial-gradient(60% 55% at 15% 20%, rgba(53,100,175,.1), transparent 60%), var(--tb-surface-2); }
.tb-kn-izgara { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2.4rem; align-items: center; }
@media (min-width: 992px) { .tb-kn-izgara { grid-template-columns: minmax(0, 1fr) minmax(0, 1.618fr); gap: 3.5rem; } }
.tb-kn h2 { margin: 0 0 .9rem; font: 700 clamp(1.9rem, 3.4vw, 2.6rem)/1.1 var(--tb-font-baslik); letter-spacing: -.025em; color: var(--tb-ink); }
.tb-kn h2 span { background: linear-gradient(135deg, var(--basic-primary, #3564AF), #5B8DEF); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.tb-kn-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.tb-kn-liste li { display: flex; gap: .85rem; align-items: flex-start; padding: .7rem .85rem; border-radius: 12px; border: 1px solid transparent; transition: background .25s, border-color .25s, transform .25s; }
.tb-kn-liste li > i { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; font-size: 1.05rem; color: var(--basic-primary, #3564AF); background: rgba(53,100,175,.1); border: 1px solid rgba(53,100,175,.18); transition: background .25s, color .25s; }
.tb-kn-liste b { display: block; font: 700 1rem/1.3 var(--tb-font-baslik); color: var(--tb-ink); }
.tb-kn-liste span { display: block; margin-top: .1rem; font-size: .88rem; line-height: 1.5; color: var(--tb-ink-soft); }
.tb-kn-liste li.aktif { background: var(--tb-surface); border-color: rgba(53,100,175,.3); transform: translateX(4px); box-shadow: 0 12px 28px -18px rgba(53,100,175,.6); }
.tb-kn-liste li.aktif > i { background: var(--basic-primary, #3564AF); color: #fff; }
[data-bs-theme="dark"] .tb-kn-liste li.aktif { background: rgba(255,255,255,.05); }
[data-bs-theme="dark"] .tb-kn-liste li > i { color: #AFC8EA; background: rgba(141,184,255,.1); border-color: rgba(141,184,255,.2); }
/* konsol karti */
.tb-kn-kart { position: relative; isolation: isolate; overflow: hidden; color: #fff; padding: 1rem 1rem 1rem; border-radius: 24px; background: radial-gradient(80% 60% at 20% 0%, #1B3A6E 0%, transparent 55%), linear-gradient(160deg, #0F1F3F 0%, #0B1526 55%, #0A1730 100%); box-shadow: 0 40px 80px -36px rgba(11,21,38,.85), inset 0 1px 0 rgba(255,255,255,.08); }
.tb-kn-kart::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; pointer-events: none; z-index: 3; background: linear-gradient(135deg, rgba(141,184,255,.75), rgba(53,100,175,.15) 40%, rgba(198,35,56,.45) 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; }
.tb-kn-kart > .tb-kn-ust, .tb-kn-kart > .tb-kn-ekran, .tb-kn-kart > .tb-kn-alt { position: relative; z-index: 1; }
.tb-kn-ust { display: flex; align-items: center; justify-content: space-between; gap: .8rem; flex-wrap: wrap; margin-bottom: .8rem; }
.tb-kn-host { display: inline-flex; align-items: center; gap: .55rem; padding: .4rem .8rem; border-radius: 999px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12); font-size: .82rem; }
.tb-kn-host code { font-family: ui-monospace, "JetBrains Mono", Menlo, Consolas, monospace; font-size: .82rem; color: #fff; }
.tb-kn-host small { font-size: .72rem; color: rgba(255,255,255,.55); }
.tb-kn-led { width: 9px; height: 9px; border-radius: 50%; background: #5A6B8A; transition: background .3s, box-shadow .3s; }
.tb-kn-led[data-tb-led="calisiyor"] { background: #4ED68A; box-shadow: 0 0 0 3px rgba(78,214,138,.2), 0 0 10px rgba(78,214,138,.8); }
.tb-kn-led[data-tb-led="acilis"], .tb-kn-led[data-tb-led="kapanis"] { background: #F5B942; box-shadow: 0 0 0 3px rgba(245,185,66,.2), 0 0 10px rgba(245,185,66,.8); animation: tb-kn-led 1s ease-in-out infinite; }
@keyframes tb-kn-led { 50% { opacity: .35; } }
.tb-kn-dugmeler { display: flex; gap: .4rem; flex-wrap: wrap; }
.tb-kn-dugme { display: inline-flex; align-items: center; gap: .4rem; padding: .45rem .85rem; border-radius: 999px; border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.08); color: #fff; font: 600 .82rem/1 var(--tb-font-baslik); cursor: pointer; transition: background .2s, opacity .2s, transform .15s; }
.tb-kn-dugme:hover:not(:disabled) { background: rgba(255,255,255,.16); transform: translateY(-1px); }
.tb-kn-dugme:focus-visible { outline: 2px solid #8DB8FF; outline-offset: 2px; }
.tb-kn-dugme:disabled { opacity: .38; cursor: not-allowed; }
.tb-kn-dugme-birincil { background: #fff; color: var(--basic-primary, #3564AF); border-color: #fff; }
.tb-kn-dugme-birincil:hover:not(:disabled) { background: #EAF1FF; }
.tb-kn-ekran { display: block; width: 100%; aspect-ratio: 600 / 392; border-radius: 14px; background: #050B18; border: 1px solid rgba(141,184,255,.18); box-shadow: inset 0 0 40px rgba(0,0,0,.6); }
.tb-kn-alt { display: flex; align-items: center; justify-content: space-between; gap: .8rem; flex-wrap: wrap; margin-top: .75rem; font-size: .8rem; color: rgba(255,255,255,.6); }
.tb-kn-durum { display: inline-flex; align-items: center; gap: .45rem; font-weight: 600; color: #fff; }
.tb-kn-durum::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #5A6B8A; }
.tb-kn-kart[data-tb-durum="calisiyor"] .tb-kn-durum::before { background: #4ED68A; }
.tb-kn-kart[data-tb-durum="acilis"] .tb-kn-durum::before, .tb-kn-kart[data-tb-durum="kapanis"] .tb-kn-durum::before { background: #F5B942; }
@media (max-width: 575.98px) { .tb-kn-kart { padding: .8rem; border-radius: 18px; } .tb-kn-dugme { padding: .42rem .7rem; font-size: .78rem; } .tb-kn-liste li { padding: .55rem .4rem; } .tb-kn-liste li.aktif { transform: none; } }
@media (prefers-reduced-motion: reduce) { .tb-kn-led[data-tb-led] { animation: none; } .tb-kn-liste li, .tb-kn-dugme { transition: none; } }

/* ==================================================================
   KATEGORIYE OZEL HERO (.tb-kt) + KANIT BOLUMU (.tb-kb) — v73
   Vurgu rengi slug'a gore (--kt-a / --kt-b); hepsi Turkbil paletinden.
   ================================================================== */
.tb-kt-ucuz,  .tb-kb-ucuz  { --kt-a: #4ED68A; --kt-b: #8DB8FF; }
.tb-kt-ajans, .tb-kb-ajans { --kt-a: #F0456B; --kt-b: #FF7AA6; }
.tb-kt-etic,  .tb-kb-etic  { --kt-a: #F5B942; --kt-b: #FF7AA6; }
.tb-kt-wp,    .tb-kb-wp    { --kt-a: #5B8DEF; --kt-b: #8DB8FF; }
.tb-kt-win,   .tb-kb-win   { --kt-a: #4FB3FF; --kt-b: #8DB8FF; }
.tb-kt-bayi,  .tb-kb-bayi  { --kt-a: #8DB8FF; --kt-b: #F0456B; }
.tb-kt-vds,      .tb-kb-vds      { --kt-a: #8DB8FF; --kt-b: #5B8DEF; }
.tb-kt-vps,      .tb-kb-vps      { --kt-a: #4ED68A; --kt-b: #8DB8FF; }
.tb-kt-yonetim,  .tb-kb-yonetim  { --kt-a: #F5B942; --kt-b: #FF7AA6; }
.tb-kt-bulut, .tb-kb-bulut, .tb-kt-yedek, .tb-kb-yedek { --kt-a: #5B8DEF; --kt-b: #F0456B; }
.tb-kt-colo,     .tb-kb-colo     { --kt-a: #F0456B; --kt-b: #8DB8FF; }
.tb-kt { position: relative; isolation: isolate; overflow: hidden; color: #fff; padding-block: clamp(3rem, 6vw, 5.5rem) clamp(2.6rem, 5vw, 4.2rem); background: linear-gradient(160deg, #0F1F3F 0%, #0B1526 55%, #0A1730 100%); }
.tb-kt::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(55% 60% at 78% 30%, color-mix(in srgb, var(--kt-a) 22%, transparent), transparent 70%), radial-gradient(40% 50% at 10% 90%, rgba(53,100,175,.35), transparent 70%), radial-gradient(rgba(255,255,255,.06) .8px, transparent .9px); background-size: auto, auto, 22px 22px; }
.tb-kt::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: linear-gradient(90deg, transparent, var(--kt-a) 30%, var(--kt-b) 70%, transparent); }
.tb-kt-izgara { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr); gap: 2.2rem; align-items: center; }
@media (min-width: 1100px) { .tb-kt-izgara { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 3.4rem; } }
.tb-kt-rozet { display: inline-flex; align-items: center; gap: .5rem; margin-bottom: 1.1rem; padding: .42rem .95rem; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--kt-a) 45%, transparent); background: color-mix(in srgb, var(--kt-a) 14%, transparent); font-size: .86rem; font-weight: 600; }
.tb-kt-rozet i { color: var(--kt-a); }
.tb-kt h1 { margin: 0 0 1rem; font: 700 clamp(2.2rem, 4.4vw, 3.5rem)/1.05 var(--tb-font-baslik); letter-spacing: -.03em; color: #fff; }
.tb-kt h1 > span { display: block; }
.tb-kt-lead { margin: 0 0 1.5rem; max-width: 52ch; font-size: 1.02rem; line-height: 1.65; color: rgba(255,255,255,.78); }
.tb-kt-guv { list-style: none; margin: 0 0 1.6rem; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .9rem; }
.tb-kt-guv li { min-width: 0; padding-right: .7rem; border-right: 1px solid rgba(255,255,255,.14); }
.tb-kt-guv li:last-child { border-right: 0; }
.tb-kt-guv li > i { display: block; margin-bottom: .4rem; font-size: 1.45rem; line-height: 1; color: var(--kt-a); }
.tb-kt-guv b { display: block; font: 700 .98rem/1.2 var(--tb-font-baslik); color: #fff; }
.tb-kt-guv small { display: block; margin-top: .15rem; font-size: .76rem; line-height: 1.45; color: rgba(255,255,255,.62); }
.tb-kt-eylem { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 1.1rem; }
.tb-kt-cta { color: #fff; background: linear-gradient(135deg, #D4203C, #F0456B); box-shadow: 0 16px 34px -14px rgba(212,32,60,.9); }
.tb-kt-cta:hover { color: #fff; transform: translateY(-1px); }
.tb-kt-fiyat { font-size: .9rem; color: rgba(255,255,255,.7); }
.tb-kt-fiyat b { color: #fff; font: 700 1.2em var(--tb-font-baslik); }
.tb-kt-sag { position: relative; }
.tb-kt-kart { position: relative; isolation: isolate; overflow: hidden; border-radius: 24px; background: radial-gradient(80% 60% at 20% 0%, #1B3A6E 0%, transparent 55%), linear-gradient(160deg, #0F1F3F 0%, #0B1526 55%, #0A1730 100%); box-shadow: 0 40px 80px -36px rgba(11,21,38,.85), inset 0 1px 0 rgba(255,255,255,.08); }
.tb-kt-kart::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; pointer-events: none; z-index: 3; background: linear-gradient(135deg, color-mix(in srgb, var(--kt-a) 80%, transparent), rgba(53,100,175,.15) 40%, color-mix(in srgb, var(--kt-b) 50%, transparent) 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; }
.tb-kt-tuval { position: relative; z-index: 1; display: block; width: 100%; aspect-ratio: 4 / 3; }
.tb-kt-not { display: block; margin-top: .55rem; text-align: right; font-size: .72rem; color: rgba(255,255,255,.45); }
@media (max-width: 575.98px) { .tb-kt-guv { grid-template-columns: minmax(0, 1fr); gap: .7rem; } .tb-kt-guv li { padding-right: 0; border-right: 0; display: grid; grid-template-columns: 32px minmax(0, 1fr); column-gap: .6rem; } .tb-kt-guv li > i { margin: 0; font-size: 1.3rem; } .tb-kt-guv b { grid-column: 2; } .tb-kt-guv small { grid-column: 2; } .tb-kt-kart { border-radius: 18px; } }
/* kanit bolumu */
.tb-kb { padding-block: clamp(2.5rem, 5vw, 4.5rem); background: radial-gradient(60% 55% at 85% 20%, color-mix(in srgb, var(--kt-a) 10%, transparent), transparent 60%), var(--tb-surface-2); }
.tb-kb-izgara { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2.2rem; align-items: start; }
@media (min-width: 992px) { .tb-kb-izgara { grid-template-columns: minmax(0, 1fr) minmax(0, 1.618fr); gap: 3.5rem; } .tb-kb-sol { position: sticky; top: 110px; } }
.tb-kb h2 { margin: 0 0 .9rem; font: 700 clamp(1.9rem, 3.4vw, 2.6rem)/1.1 var(--tb-font-baslik); letter-spacing: -.025em; color: var(--tb-ink); }
.tb-kb h2 span { background: linear-gradient(135deg, var(--basic-primary, #3564AF), #5B8DEF); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.tb-kb-sol p { margin: 0 0 1.4rem; max-width: 48ch; font-size: 1rem; line-height: 1.65; color: var(--tb-ink-soft); }
.tb-kb-oge { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem; counter-reset: kb; }
.tb-kb-oge li { position: relative; display: flex; gap: .9rem; align-items: flex-start; padding: 1.1rem 1.1rem 1.1rem 1rem; border-radius: 16px; background: var(--tb-surface); border: 1px solid var(--tb-line); box-shadow: var(--tb-shadow); overflow: hidden; }
.tb-kb-oge li::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: linear-gradient(180deg, var(--kt-a), var(--kt-b)); }
.tb-kb-oge li > i { flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; font-size: 1.15rem; color: var(--basic-primary, #3564AF); background: rgba(53,100,175,.1); border: 1px solid rgba(53,100,175,.18); }
.tb-kb-oge b { display: block; font: 700 1.02rem/1.3 var(--tb-font-baslik); color: var(--tb-ink); }
.tb-kb-oge span { display: block; margin-top: .25rem; font-size: .9rem; line-height: 1.55; color: var(--tb-ink-soft); }
[data-bs-theme="dark"] .tb-kb-oge li { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.1); }
[data-bs-theme="dark"] .tb-kb-oge li > i { color: #AFC8EA; background: rgba(141,184,255,.1); border-color: rgba(141,184,255,.2); }
@media (max-width: 575.98px) { .tb-kb-oge { grid-template-columns: minmax(0, 1fr); } }

/* paketi tanimlanmamis hizmet: teklif cagrisi (2026-10-14) */
.tb-teklif { max-width: 640px; margin-inline: auto; }
.tb-teklif-b { font-family: "Barlow", sans-serif; font-weight: 700; font-size: clamp(1.15rem, 1rem + .6vw, 1.45rem); margin: 0 0 .5rem; }
.tb-teklif p { margin: 0 auto 1.25rem; max-width: 52ch; }
.tb-teklif .tb-btn { display: inline-flex; align-items: center; gap: .5rem; }

/* fiziksel sunucu: 6 paket 4 sutunda 4+2 kaliyordu -> 3+3 (2026-10-14) */
@media (min-width: 992px) {
    .tb-sv-izgara:has(> :nth-child(6):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* @@ LOGO-KIRMIZISI-AYDINLIK BASLA (acik-kip.py uretir, elle duzenleme) @@ */
html:not([data-bs-theme="dark"]) .tb-h5 .tb-btn-primary{background: linear-gradient(135deg, #D04555, #C4162B);box-shadow: 0 12px 28px -10px rgba(196,22,43,.85)}
html:not([data-bs-theme="dark"]) .tb-h5 .tb-btn-primary:hover{box-shadow: 0 16px 32px -10px rgba(196,22,43,.95)}
html:not([data-bs-theme="dark"]) .plan-card.plan-popular{border-color: rgba(196,22,43,.55);box-shadow: 0 0 0 1px rgba(196,22,43,.35), var(--tb-shadow-lg)}
html:not([data-bs-theme="dark"]) .tb-pk5-rozet{background: linear-gradient(135deg, #D04555, #C4162B);box-shadow: 0 8px 18px -8px rgba(196,22,43,.8)}
html:not([data-bs-theme="dark"]) .plan-card .btn-primary{background: linear-gradient(135deg, #D04555, #C4162B);box-shadow: 0 10px 24px -12px rgba(196,22,43,.8)}
html:not([data-bs-theme="dark"]) .plan-card .btn-primary:hover{box-shadow: 0 14px 28px -12px rgba(196,22,43,.9)}
html:not([data-bs-theme="dark"]) .plan-popular .tb-pk5-liste i{background: rgba(196,22,43,.1);color: var(--basic-secondary, #C4162B)}
html:not([data-bs-theme="dark"]) .tb-pk6-tab{background: linear-gradient(135deg, #D04555, #C4162B)}
html:not([data-bs-theme="dark"]) .tb-pk6-populer .plan-card{border-color: rgba(196,22,43,.6);box-shadow: 0 0 0 1px rgba(196,22,43,.3), var(--tb-shadow-lg)}
html:not([data-bs-theme="dark"]) .tb-h7-durum li.kotu > i{background: #DC7380;box-shadow: 0 0 0 3px rgba(220,115,128,.2), 0 0 10px rgba(220,115,128,.6)}
html:not([data-bs-theme="dark"]) .tb-pk9-aylar.dolu i:last-child,html:not([data-bs-theme="dark"]) .tb-pk9-aylar.tek i:first-child{background: linear-gradient(90deg, #D04555, var(--basic-secondary, #C4162B))}
html:not([data-bs-theme="dark"]) .tb-k8-sepet.dolu{background: linear-gradient(135deg, #D04555, #C4162B);box-shadow: 0 10px 22px -10px rgba(196,22,43,.8)}
html:not([data-bs-theme="dark"]) .tb-ts-kart::before{background: linear-gradient(135deg, rgba(141,184,255,.75), rgba(53,100,175,.15) 40%, rgba(196,22,43,.45) 100%)}
html:not([data-bs-theme="dark"]) .tb-ts-isik{background:
        radial-gradient(42% 55% at 85% 20%, rgba(53,100,175,.55) 0%, transparent 70%),
        radial-gradient(30% 40% at 8% 90%, rgba(196,22,43,.28) 0%, transparent 70%),
        radial-gradient(rgba(255,254,251,.07) .8px, transparent .9px);background-size: auto, auto, 18px 18px}
html:not([data-bs-theme="dark"]) .tb-uy-tek em{background: linear-gradient(135deg, #D04555, #C4162B)}
html:not([data-bs-theme="dark"]) .tb-kh::after{background: linear-gradient(90deg, var(--basic-secondary, #C4162B), #E7A2AA 55%, transparent 100%)}
html:not([data-bs-theme="dark"]) .tb-kh-rozet{border: 1px solid rgba(231,162,170,.35);background: rgba(196,22,43,.14)}
html:not([data-bs-theme="dark"]) .tb-kh-rozet i{color: #E7A2AA}
html:not([data-bs-theme="dark"]) .tb-kh-guv li > i{color: #E7A2AA}
html:not([data-bs-theme="dark"]) .tb-kh-cta{background: linear-gradient(135deg, #C4162B, #DC7380);box-shadow: 0 0 0 1px rgba(231,162,170,.35), 0 14px 34px -10px rgba(196,22,43,.9)}
html:not([data-bs-theme="dark"]) .tb-kh-pano::before{background: linear-gradient(180deg, #C4162B, #E7A2AA)}
html:not([data-bs-theme="dark"]) .tb-yol-adim.one::before{background: linear-gradient(90deg, #C4162B, #E7A2AA)}
html:not([data-bs-theme="dark"]) .tb-yol-adim.one .tb-yol-sec{background: linear-gradient(135deg, #C4162B, #DC7380)}
html:not([data-bs-theme="dark"]) .tb-yol-adim.one::after{background: repeating-linear-gradient(90deg, rgba(196,22,43,.18) 0 12px, transparent 12px 20px)}
html:not([data-bs-theme="dark"]) .tb-fz-guv li.kirmizi{--r: #DC7380}
html:not([data-bs-theme="dark"]) .tb-neon::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-neon::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-k8-sepet.tb-neon.dolu{background: linear-gradient(135deg, #D04555, #C4162B)}
html:not([data-bs-theme="dark"]) .tb-sv-populer .plan-card{border-color: rgba(196,22,43,.6);box-shadow: 0 0 0 1px rgba(196,22,43,.3), var(--tb-shadow-lg)}
html:not([data-bs-theme="dark"]) .tb-kn-kart::before{background: linear-gradient(135deg, rgba(141,184,255,.75), rgba(53,100,175,.15) 40%, rgba(196,22,43,.45) 100%)}
html:not([data-bs-theme="dark"]) .tb-kt-ajans,html:not([data-bs-theme="dark"]) .tb-kb-ajans{--kt-a: #DC7380;--kt-b: #E7A2AA}
html:not([data-bs-theme="dark"]) .tb-kt-etic,html:not([data-bs-theme="dark"]) .tb-kb-etic{--kt-b: #E7A2AA}
html:not([data-bs-theme="dark"]) .tb-kt-bayi,html:not([data-bs-theme="dark"]) .tb-kb-bayi{--kt-b: #DC7380}
html:not([data-bs-theme="dark"]) .tb-kt-yonetim,html:not([data-bs-theme="dark"]) .tb-kb-yonetim{--kt-b: #E7A2AA}
html:not([data-bs-theme="dark"]) .tb-kt-bulut,html:not([data-bs-theme="dark"]) .tb-kb-bulut,html:not([data-bs-theme="dark"]) .tb-kt-yedek,html:not([data-bs-theme="dark"]) .tb-kb-yedek{--kt-b: #DC7380}
html:not([data-bs-theme="dark"]) .tb-kt-colo,html:not([data-bs-theme="dark"]) .tb-kb-colo{--kt-a: #DC7380}
html:not([data-bs-theme="dark"]) .tb-kt-cta{background: linear-gradient(135deg, #C4162B, #DC7380);box-shadow: 0 16px 34px -14px rgba(196,22,43,.9)}
/* @@ LOGO-KIRMIZISI-AYDINLIK BITIR @@ */

/* ===== 2026-10-19 DÖNEM SEÇİCİ (açılır) + FİYAT v10 (aylık karşılık) ===== */
.billing-toggle.tb-gizli { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.tb-donem { position: relative; }
.tb-donem[hidden] { display: none; }
.tb-donem-btn { display: inline-flex; align-items: center; gap: .6rem; min-height: 44px; padding: 0 .9rem 0 1rem; border-radius: 12px; border: 1px solid var(--tb-line); background: var(--tb-surface); color: var(--tb-ink); font: 600 .92rem var(--tb-font-govde); cursor: pointer; transition: border-color .18s ease, box-shadow .18s ease; }
.tb-donem-btn:hover { border-color: rgba(53,100,175,.55); }
.tb-donem-btn:focus-visible { outline: 2px solid var(--basic-primary, #3564AF); outline-offset: 2px; }
.tb-donem-btn .bi-calendar3 { color: var(--basic-primary, #3564AF); font-size: .95rem; }
.tb-donem-ok { font-size: .8rem; color: var(--tb-ink-soft); transition: transform .2s ease; }
.tb-donem.acik .tb-donem-btn { border-color: var(--basic-primary, #3564AF); box-shadow: 0 0 0 3px rgba(53,100,175,.14); }
.tb-donem.acik .tb-donem-ok { transform: rotate(180deg); }
.tb-donem-liste { position: absolute; z-index: 30; inset-inline-start: 50%; transform: translate(-50%, 6px); top: 100%; margin: .35rem 0 0; padding: .35rem; list-style: none; min-inline-size: 20rem; border-radius: 14px; border: 1px solid var(--tb-line); background: var(--tb-surface); box-shadow: 0 24px 48px -20px rgba(11,21,38,.45), 0 2px 8px rgba(11,21,38,.08); opacity: 0; visibility: hidden; transition: opacity .18s ease, transform .18s ease, visibility .18s; }
.tb-donem.acik .tb-donem-liste { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.tb-donem-liste li { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .6rem .75rem; border-radius: 9px; cursor: pointer; font: 600 .9rem var(--tb-font-govde); color: var(--tb-ink); }
.tb-donem-ad { white-space: nowrap; }
@media (max-width: 420px) { .tb-donem-liste { min-inline-size: calc(100vw - 2.5rem); } }
.tb-donem-liste li:hover, .tb-donem-liste li:focus-visible { background: rgba(53,100,175,.08); outline: none; }
.tb-donem-liste li[aria-selected="true"] { background: var(--basic-deep, #0B1526); color: #fff; }
.tb-donem-rozet { flex: 0 0 auto; padding: .18rem .5rem; border-radius: 999px; font-size: .7rem; font-weight: 700; letter-spacing: .02em; color: var(--basic-primary, #3564AF); background: rgba(53,100,175,.1); white-space: nowrap; }
.tb-donem-rozet.en-iyi { color: #fff; background: linear-gradient(135deg, #C4162B, #D04555); }
.tb-donem-liste li[aria-selected="true"] .tb-donem-rozet:not(.en-iyi) { color: #fff; background: rgba(255,255,255,.16); }
[data-bs-theme="dark"] .tb-donem-btn, [data-bs-theme="dark"] .tb-donem-liste { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.12); }
[data-bs-theme="dark"] .tb-donem-liste { background: #13213A; box-shadow: 0 24px 48px -20px rgba(0,0,0,.7); }
[data-bs-theme="dark"] .tb-donem-liste li:hover, [data-bs-theme="dark"] .tb-donem-liste li:focus-visible { background: rgba(255,255,255,.07); }
[data-bs-theme="dark"] .tb-donem-liste li[aria-selected="true"] { background: var(--basic-primary, #3564AF); }
[data-bs-theme="dark"] .tb-donem-rozet { color: #9FD3FF; background: rgba(159,211,255,.12); }

.tb-pk10 .tb-pk10-ust { display: flex; align-items: center; gap: .55rem; min-height: 1.5rem; margin-bottom: .15rem; }
.tb-pk10 .price-was { font: 600 .9rem var(--tb-font-govde); color: var(--tb-ink-soft); text-decoration-thickness: 1.5px; }
.tb-pk10 .tb-pk10-rozet { display: inline-flex; align-items: center; padding: .2rem .55rem; border-radius: 999px; font-size: .7rem; font-weight: 700; letter-spacing: .02em; color: #fff; background: linear-gradient(135deg, #C4162B, #D04555); }
.tb-pk10 .tb-pk10-rozet .bi { display: none; }
.tb-pk10 .tb-pk10-alt { display: flex; flex-direction: column; gap: .2rem; margin: .55rem 0 0; font-size: .82rem; color: var(--tb-ink-soft); }
.tb-pk10 .tb-pk10-alt [data-tb-toplam] { font-weight: 600; color: var(--tb-ink); }
.tb-pk10 .tb-pk10-alt small { display: inline-flex; align-items: center; gap: .35rem; font-size: .76rem; }
.tb-pk10 .tb-pk10-alt small .bi { color: #4ED68A; }
.plan-popular .tb-pk10 .tb-pk10-rozet { background: #fff; color: #C4162B; }

/* 2026-10-19 (2): dönem seçici sağ hizada (Hostinger kalıbı), solunda sessiz etiket; mobilde ortada tam genişlik */
.tb-h5-arac:has(.tb-donem:not([hidden])) { justify-content: flex-end; margin-bottom: 1.1rem; }
.tb-donem::before { content: attr(data-l-sec); margin-inline-end: .6rem; font-size: .82rem; font-weight: 600; color: var(--tb-ink-soft); }
.tb-donem { display: inline-flex; align-items: center; }
.tb-donem-liste { inset-inline-start: auto; inset-inline-end: 0; transform: translateY(6px); }
.tb-donem.acik .tb-donem-liste { transform: translateY(0); }
.plan-card .tb-pk9-fiyat .tb-donem { display: inline; font-size: .95rem; font-weight: 600; color: var(--tb-ink-soft); margin-left: .15rem; }
.plan-card .tb-pk9-fiyat .tb-donem::before { content: none; }
.plan-card .tb-pk9-fiyat .tb-donem[hidden] { display: none; }
@media (max-width: 767.98px) {
  .tb-h5-arac:has(.tb-donem:not([hidden])) { justify-content: center; }
  .tb-donem::before { display: none; }
  .tb-donem-btn { inline-size: min(100%, 22rem); justify-content: space-between; }
  .tb-donem-liste { inset-inline-start: 50%; inset-inline-end: auto; transform: translate(-50%, 6px); }
  .tb-donem.acik .tb-donem-liste { transform: translate(-50%, 0); }
}

/* 2026-10-19 (3): seçici düğmesi Hostinger kalıbı — etiket yok, ikon yok, geniş; metin solda, ok sağda; liste düğme genişliğinde */
.tb-donem::before { content: none; }
.tb-donem { display: block; inline-size: 15.5rem; }
.tb-donem-btn { inline-size: 100%; justify-content: space-between; min-height: 46px; padding: 0 .85rem 0 1.05rem; border-radius: 10px; border: 1px solid var(--tb-line); background: var(--tb-surface); font: 500 .95rem var(--tb-font-govde); letter-spacing: .005em; }
.tb-donem-btn:hover { border-color: rgba(53,100,175,.6); }
.tb-donem.acik .tb-donem-btn { border-color: var(--basic-primary, #3564AF); box-shadow: 0 0 0 3px rgba(53,100,175,.14); }
.tb-donem-ok { font-size: .78rem; color: var(--tb-ink); }
.tb-donem-liste { inset-inline: 0; min-inline-size: 0; inline-size: 100%; margin-top: .4rem; padding: .35rem; border-radius: 10px; transform: translateY(6px); }
.tb-donem.acik .tb-donem-liste { transform: translateY(0); }
.tb-donem-liste li { padding: .62rem .75rem; font-weight: 500; }
.tb-donem-liste li[aria-selected="true"] { font-weight: 600; }
.tb-donem-ad { white-space: nowrap; }
[data-bs-theme="dark"] .tb-donem-btn { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.14); }
[data-bs-theme="dark"] .tb-donem-btn:hover, [data-bs-theme="dark"] .tb-donem.acik .tb-donem-btn { border-color: #5B8DEF; box-shadow: 0 0 0 3px rgba(91,141,239,.18); }
@media (max-width: 767.98px) {
  .tb-donem { inline-size: min(100%, 22rem); }
  .tb-donem-btn { inline-size: 100%; }
  .tb-donem-liste { inset-inline: 0; transform: translateY(6px); }
  .tb-donem.acik .tb-donem-liste { transform: translateY(0); }
}

/* 2026-10-19 (4): başlık + dönem seçici AYNI SATIRDA (Hostinger kalıbı): başlık solda, seçici sağda alt hizada; mobilde alt alta ortada */
.tb-h5-ust { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem 2rem; margin-bottom: 1.6rem; }
.tb-h5-ust .tb-h5-bas { text-align: left; margin: 0; max-width: 60ch; }
.tb-h5-ust .tb-h5-arac, .tb-h5-ust .tb-h5-arac:has(.tb-donem:not([hidden])) { margin: 0 0 .25rem; flex: 0 0 auto; }
@media (max-width: 767.98px) {
  .tb-h5-ust { flex-direction: column; align-items: center; gap: 1rem; }
  .tb-h5-ust .tb-h5-bas { text-align: center; }
  .tb-h5-ust .tb-h5-arac { margin: 0; inline-size: 100%; }
}
/* 2026-10-19 (5): liste içeriğe göre genişler (uzun rozet taşıyordu), sağa demirli; rozet kırılmaz */
.tb-donem-liste { inset-inline-start: auto; inset-inline-end: 0; inline-size: max-content; min-inline-size: 100%; max-inline-size: calc(100vw - 2.5rem); }
.tb-donem-liste li { gap: 1.25rem; }
.tb-donem-rozet { flex-shrink: 0; }
@media (max-width: 767.98px) { .tb-donem-liste { inset-inline: 0; inline-size: 100%; } .tb-donem-liste li { gap: .6rem; } .tb-donem-rozet { font-size: .66rem; padding-inline: .42rem; } }

/* ===== KART v13 (2026-10-19): sakin fiyat bloğu — küçük/hafif rozet ve çizili fiyat, büyük rakam, düğme, ince yazı ===== */
.tb-pk6-bas { padding-bottom: .55rem; }
.tb-pk6-etiket { min-height: 2.4em; line-height: 1.2; }
.tb-pk6-sag { display: flex; flex-direction: column; align-items: flex-end; gap: .45rem; flex: none; }
.tb-pk13-rozet { display: inline-flex; align-items: center; padding: .2rem .55rem; border-radius: 999px; font-size: .68rem; font-weight: 700; letter-spacing: .02em; white-space: nowrap; color: #C4162B; background: rgba(196,22,43,.09); }
.tb-pk13-rozet .bi { display: none; }
[data-bs-theme="dark"] .tb-pk13-rozet { color: #E7A2AA; background: rgba(220,115,128,.14); }
.tb-pk6-ikonlar span { width: 32px; height: 32px; border-radius: 8px; }
.tb-pk6-ikonlar img { width: 17px; height: 17px; }
.plan-card .tb-pk13.price-band { padding: 0 1.15rem .15rem !important; border-bottom: 0; }
.plan-card .tb-pk13 .price-was { display: block; margin: 0 0 .1rem; font: 500 .8rem/1.3 var(--tb-font-govde); color: var(--tb-ink-soft); opacity: .85; text-decoration-thickness: 1px; }
.plan-card .tb-pk13 .price-was.d-none { display: none; }
.plan-card .tb-pk13 .tb-pk9-satir { gap: .3rem; }
.plan-card .tb-pk13 .price-now { font-size: 2.6rem; }
.plan-card .tb-pk13 [data-role="price-suffix"], .plan-card .tb-pk13 .tb-donem { font-size: .88rem; font-weight: 500; color: var(--tb-ink-soft); }
.tb-pk6-sepet { padding: .55rem 1.15rem .15rem; }
.tb-pk13-alt { margin: 0; padding: .6rem 1.15rem .95rem; font-size: .73rem; line-height: 1.5; color: var(--tb-ink-soft); border-bottom: 1px solid var(--tb-line); }
.tb-pk13-alt b { font-weight: 700; color: var(--tb-ink); }
.tb-pk13-alt .tb-pk13-yenileme { white-space: nowrap; }
[data-bs-theme="dark"] .tb-pk13-alt { border-bottom-color: rgba(255,255,255,.08); }

/* ===== KART v14: başlık satırı sade — rozet sağ üst köşede yüzer, ikonlar özellik başlığının sağında, daha ferah dikey ritim ===== */
.plan-card { position: relative; }
.tb-pk6-bas { padding: 1.25rem 1.15rem .6rem; }
.tb-pk6-bas > div { padding-inline-end: 5.4rem; }   /* rozet için yer */
.tb-pk6-bas h4 { font-size: 1.25rem; }
.tb-pk6-etiket { min-height: 2.4em; font-size: .82rem; }
.plan-card .tb-pk13-rozet { position: absolute; inset-block-start: 1.05rem; inset-inline-end: 1rem; }
.plan-card .tb-pk13-rozet.d-none { display: none; }
.plan-card .tb-pk13.price-band { padding-top: .35rem !important; }
.plan-card .tb-pk13 .price-was { min-height: 1.3em; }
.plan-card .tb-pk13 .price-now { font-size: 2.7rem; }
.tb-pk6-sepet { padding: .7rem 1.15rem .2rem; }
.tb-pk13-alt { padding: .7rem 1.15rem 1.05rem; }
.tb-pk6-baslik { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.tb-pk6-baslik .tb-pk6-ikonlar { display: inline-flex; gap: .45rem; opacity: .55; }
.tb-pk6-baslik .tb-pk6-ikonlar img { width: 16px; height: 16px; object-fit: contain; }
[data-bs-theme="dark"] .tb-pk6-baslik .tb-pk6-ikonlar img { filter: brightness(0) invert(1); }

/* ===== KART v15: ikonlar başlık satırında (32px, sakin), rozet çizili fiyatın yanında küçük; yenileme satırı yok ===== */
.tb-pk6-bas > div { padding-inline-end: 0; }
.plan-card .tb-pk13-rozet { position: static; }
.tb-pk13-ust { display: flex; align-items: center; gap: .5rem; min-height: 1.4em; margin-bottom: .1rem; }
.tb-pk13-ust .price-was { margin: 0; }
.tb-pk13-ust .tb-pk13-rozet { font-size: .64rem; padding: .15rem .45rem; }
.tb-pk6-ikonlar { align-self: flex-start; }

/* 2026-10-19: paket başlığı = sekme adı; altında "Tüm paketlere dahil:" ikonlu satır (Hostinger kalıbı, sitenin dilinde) */
.tb-h5-ust .tb-h5-bas h2 { margin-bottom: .55rem; font-size: clamp(1.7rem, 3.2vw, 2.4rem); }
.tb-h5-dahil { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1.15rem; margin: 0; font-size: .9rem; line-height: 1.4; color: var(--tb-ink-soft); }
.tb-h5-dahil > span { display: inline-flex; align-items: center; gap: .4rem; white-space: nowrap; }
.tb-h5-dahil .tb-h5-dahil-bas { color: var(--tb-ink); font-weight: 600; }
.tb-h5-dahil i { font-size: 1rem; color: var(--basic-primary, #3564AF); }
[data-bs-theme="dark"] .tb-h5-dahil i { color: #9FD3FF; }
@media (max-width: 767.98px) { .tb-h5-dahil { justify-content: center; gap: .35rem .85rem; font-size: .84rem; } }
.tb-h5-ust .tb-h5-bas { max-width: none; flex: 1 1 auto; min-width: 0; }

/* 2026-10-19: paket başlığı kurumsal/ölçülü — küçük başlık, tek satır soft açıklama, seçici sağda aynı hizada */
.tb-h5-ust { align-items: center; margin-bottom: 1.4rem; }
.tb-h5-ust .tb-h5-bas h2 { margin-bottom: .3rem; font-size: clamp(1.35rem, 2.1vw, 1.7rem); }
.tb-h5-ust .tb-h5-bas p { font-size: .92rem; line-height: 1.5; max-width: 60ch; }
.tb-h5-ust .tb-h5-arac, .tb-h5-ust .tb-h5-arac:has(.tb-donem:not([hidden])) { margin: 0; }
@media (max-width: 767.98px) { .tb-h5-ust .tb-h5-bas p { margin-inline: auto; } }

/* 2026-10-19 (son): Hostinger ölçüleri — başlık büyük ama hafif (600), satır küçük/soluk, seçici satırla alt hizada */
.tb-h5-ust { align-items: flex-end; margin-bottom: 1.5rem; }
.tb-h5-ust .tb-h5-bas h2.tb-h5-hafif { margin-bottom: .55rem; font-size: clamp(1.7rem, 2.6vw, 2.15rem); font-weight: 600; letter-spacing: -.02em; }
.tb-h5-dahil { font-size: .84rem; gap: .35rem .95rem; color: var(--tb-ink-soft); }
.tb-h5-dahil .tb-h5-dahil-bas { font-weight: 600; font-size: .84rem; color: var(--tb-ink); }
.tb-h5-dahil i { font-size: .9rem; color: var(--tb-ink-soft); opacity: .85; }
[data-bs-theme="dark"] .tb-h5-dahil i { color: var(--tb-ink-soft); }
.tb-h5-ust .tb-h5-arac, .tb-h5-ust .tb-h5-arac:has(.tb-donem:not([hidden])) { margin: 0 0 .1rem; }
@media (max-width: 767.98px) { .tb-h5-ust { align-items: center; } .tb-h5-dahil { font-size: .8rem; } }
.tb-h5-ust .tb-h5-bas p.tb-h5-dahil { max-width: none; }

/* ===== PAKET BAŞLIĞI v3 (2026-10-19, özgün): başlık + logo kırmızısı kısa çizgi; "Tüm paketlere dahil" özellikleri kartlardaki
   platform rozetleriyle aynı dilde küçük ikon kutuları; seçici sağda satırla alt hizada. Tek vurgu: kırmızı çizgi. ===== */
.tb-h5-ust { align-items: flex-end; gap: 1.25rem 2rem; margin-bottom: 1.6rem; }
.tb-h5-ust .tb-h5-bas h2.tb-h5-hafif { position: relative; margin: 0 0 .95rem; padding-bottom: .55rem; font-size: clamp(1.55rem, 2.3vw, 1.95rem); font-weight: 700; letter-spacing: -.02em; }
.tb-h5-ust .tb-h5-bas h2.tb-h5-hafif::after { content: ""; position: absolute; inset-inline-start: 0; inset-block-end: 0; inline-size: 34px; block-size: 3px; border-radius: 2px; background: linear-gradient(90deg, #C4162B, #D04555); }
.tb-h5-dahil { gap: .5rem .9rem; font-size: .86rem; }
.tb-h5-dahil .tb-h5-dahil-bas { font-size: .8rem; font-weight: 500; color: var(--tb-ink-soft); margin-inline-end: .15rem; }
.tb-h5-dahil > span:not(.tb-h5-dahil-bas) { gap: .5rem; color: var(--tb-ink); font-weight: 500; }
.tb-h5-dahil i { display: grid; place-items: center; inline-size: 28px; block-size: 28px; border-radius: 8px; border: 1px solid var(--tb-line); background: var(--tb-surface-2); font-size: .85rem; color: var(--basic-primary, #3564AF); opacity: 1; }
[data-bs-theme="dark"] .tb-h5-dahil i { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.1); color: #9FD3FF; }
[data-bs-theme="dark"] .tb-h5-dahil > span:not(.tb-h5-dahil-bas) { color: var(--tb-ink); }
@media (max-width: 767.98px) {
  .tb-h5-ust { align-items: center; }
  .tb-h5-ust .tb-h5-bas h2.tb-h5-hafif::after { inset-inline-start: 50%; transform: translateX(-50%); }
  .tb-h5-dahil { justify-content: center; gap: .5rem .7rem; }
  .tb-h5-dahil .tb-h5-dahil-bas { inline-size: 100%; justify-content: center; }
}

/* ===== PAKET BAŞLIĞI v4 (2026-10-19, Hostinger ÖLÇÜSÜ: kibar, ölçülü, bol boşluk) =====
   Büyük ama hafif başlık (Barlow 400), çizgi/kutu yok; altında küçük soluk satır, ince çizgi ikonlar;
   seçici ayrı satırda sağda, kart ızgarasının kenarıyla hizalı; aralar geniş. */
.tb-h5-ust { flex-direction: column; align-items: stretch; gap: 1.5rem; margin-bottom: 1.75rem; }
.tb-h5-ust .tb-h5-bas { max-width: none; }
.tb-h5-ust .tb-h5-bas h2.tb-h5-hafif { margin: 0 0 .7rem; padding: 0; font-size: clamp(1.9rem, 2.9vw, 2.6rem); font-weight: 400; letter-spacing: -.02em; line-height: 1.1; }
.tb-h5-ust .tb-h5-bas h2.tb-h5-hafif::after { content: none; }
.tb-h5-dahil { gap: .35rem 1rem; font-size: .86rem; color: var(--tb-ink-soft); }
.tb-h5-dahil .tb-h5-dahil-bas { margin: 0; font-size: .86rem; font-weight: 500; color: var(--tb-ink-soft); }
.tb-h5-dahil > span:not(.tb-h5-dahil-bas) { gap: .4rem; font-weight: 400; color: var(--tb-ink); }
.tb-h5-dahil i { display: inline; inline-size: auto; block-size: auto; border: 0; background: transparent; border-radius: 0; font-size: .95rem; color: var(--tb-ink-soft); opacity: 1; }
[data-bs-theme="dark"] .tb-h5-dahil i { background: transparent; border: 0; color: var(--tb-ink-soft); }
.tb-h5-ust .tb-h5-arac, .tb-h5-ust .tb-h5-arac:has(.tb-donem:not([hidden])) { justify-content: flex-end; margin: 0; }
.tb-h5-paket { padding-top: clamp(2.6rem, 5vw, 3.6rem); }
@media (max-width: 767.98px) {
  .tb-h5-ust { gap: 1.1rem; align-items: center; }
  .tb-h5-ust .tb-h5-bas h2.tb-h5-hafif::after { content: none; }
  .tb-h5-dahil { justify-content: center; }
  .tb-h5-dahil .tb-h5-dahil-bas { inline-size: auto; }
  .tb-h5-ust .tb-h5-arac, .tb-h5-ust .tb-h5-arac:has(.tb-donem:not([hidden])) { justify-content: center; }
}
/* v4 ritim: seçici satırı ile kartlar arası fazla boşluk kısıldı (popüler sekme payı zaten 38px) */
.tb-h5-ust { gap: 1.2rem; margin-bottom: .9rem; }

/* ===== KART v16 (2026-10-19): indirim rozeti → sakin metin. Kırmızı yalnız popüler kart/düğmede kalır; indirim lacivert (koyu: açık mavi),
   çizili fiyatla aynı satır, araya nokta. Ölçü: .8rem, 600. ===== */
.plan-card .tb-pk13-ust { gap: .45rem; min-height: 1.35em; }
.plan-card .tb-pk13-ust .price-was { font-size: .82rem; font-weight: 500; color: var(--tb-ink-soft); opacity: .8; }
.plan-card .tb-pk13-ust .tb-pk13-rozet { padding: 0; border-radius: 0; background: transparent; font-size: .8rem; font-weight: 600; letter-spacing: 0; color: var(--basic-primary, #3564AF); }
.plan-card .tb-pk13-ust .tb-pk13-rozet::before { content: "·"; margin-inline-end: .45rem; font-weight: 400; color: var(--tb-ink-soft); opacity: .7; }
[data-bs-theme="dark"] .plan-card .tb-pk13-ust .tb-pk13-rozet { background: transparent; color: #9FD3FF; }
.plan-popular .tb-pk13 .tb-pk13-rozet, [data-bs-theme="dark"] .plan-popular .tb-pk13 .tb-pk13-rozet { background: transparent; }

/* ===== KART v17 (2026-10-19): indirim = DOLU marka kırmızısı etiket (logo merdiveni C4162B→D04555), beyaz yazı, küçük;
   dönem değişince kısa "pop" (hareket azaltma tercihine saygılı). Tint/metin denemeleri "heyecan vermiyor" diye reddedildi. ===== */
.plan-card .tb-pk13-ust { gap: .55rem; min-height: 1.5em; }
.plan-card .tb-pk13-ust .price-was { font-size: .84rem; font-weight: 500; color: var(--tb-ink-soft); opacity: .85; }
.plan-card .tb-pk13-ust .tb-pk13-rozet, [data-bs-theme="dark"] .plan-card .tb-pk13-ust .tb-pk13-rozet, .plan-popular .tb-pk13 .tb-pk13-rozet, [data-bs-theme="dark"] .plan-popular .tb-pk13 .tb-pk13-rozet {
  display: inline-flex; align-items: center; padding: .24rem .6rem; border-radius: 999px; font-size: .7rem; font-weight: 700; letter-spacing: .03em; line-height: 1;
  color: #fff; background: linear-gradient(135deg, #C4162B, #D04555); box-shadow: 0 6px 14px -8px rgba(196,22,43,.7); transform-origin: left center; }
.plan-card .tb-pk13-ust .tb-pk13-rozet::before { content: none; }
@media (prefers-reduced-motion: no-preference) { .plan-card .tb-pk13-rozet.tb-pop { animation: tb-rozet-pop .5s cubic-bezier(.2,.9,.3,1.4); } }
@keyframes tb-rozet-pop { 0% { transform: scale(.7); opacity: .4; } 60% { transform: scale(1.1); opacity: 1; } 100% { transform: scale(1); } }

/* ===== v18 (2026-10-19): İNDİRİM = YEŞİL (kazanç/onay anlamı; kırmızı = uyarı). Aydınlık: koyu yeşil gradyan + beyaz (kontrast ≥4.5);
   karanlık: sitenin durum yeşili (#4ED68A ailesi) + çok koyu yeşil yazı. Kırmızı yalnız popüler kart/düğme. ===== */
.plan-card .tb-pk13-ust .tb-pk13-rozet, .plan-popular .tb-pk13 .tb-pk13-rozet { background: linear-gradient(135deg, #15803D, #168A42); color: #fff; box-shadow: 0 6px 14px -8px rgba(21,128,61,.65); }
[data-bs-theme="dark"] .plan-card .tb-pk13-ust .tb-pk13-rozet, [data-bs-theme="dark"] .plan-popular .tb-pk13 .tb-pk13-rozet { background: linear-gradient(135deg, #2BC46E, #4ED68A); color: #06301A; box-shadow: 0 6px 14px -8px rgba(46,196,110,.55); }
.tb-donem-rozet { color: #15803D; background: rgba(21,128,61,.1); }
.tb-donem-rozet.en-iyi { color: #fff; background: linear-gradient(135deg, #15803D, #168A42); }
[data-bs-theme="dark"] .tb-donem-rozet { color: #4ED68A; background: rgba(78,214,138,.14); }
[data-bs-theme="dark"] .tb-donem-rozet.en-iyi { color: #06301A; background: linear-gradient(135deg, #2BC46E, #4ED68A); }
.tb-donem-liste li[aria-selected="true"] .tb-donem-rozet:not(.en-iyi) { color: #fff; background: rgba(255,255,255,.16); }

/* ===== v19 (2026-10-19, kullanıcı: "tam yeşil güven vermiyor; Her pakette güvenlik kutusunun arkası gibi"): indirim etiketi ve liste rozetleri
   güvenlik kutusunun paletinde — aydınlık #E9F7EF zemin / #0A7F3E yazı, karanlık rgba(10,167,75,.12) / #3DD47A; ince çerçeve, gölge yok ===== */
.plan-card .tb-pk13-ust .tb-pk13-rozet, .plan-popular .tb-pk13 .tb-pk13-rozet { background: #E9F7EF; color: #0A7F3E; border: 1px solid rgba(10,127,62,.16); box-shadow: none; padding: .2rem .55rem; }
[data-bs-theme="dark"] .plan-card .tb-pk13-ust .tb-pk13-rozet, [data-bs-theme="dark"] .plan-popular .tb-pk13 .tb-pk13-rozet { background: rgba(10,167,75,.12); color: #3DD47A; border-color: rgba(61,212,122,.22); box-shadow: none; }
.tb-donem-rozet { color: #0A7F3E; background: #E9F7EF; border: 1px solid rgba(10,127,62,.14); }
.tb-donem-rozet.en-iyi { color: #0A7F3E; background: #D6F0E1; border-color: rgba(10,127,62,.22); }
[data-bs-theme="dark"] .tb-donem-rozet { color: #3DD47A; background: rgba(10,167,75,.12); border-color: rgba(61,212,122,.2); }
[data-bs-theme="dark"] .tb-donem-rozet.en-iyi { color: #3DD47A; background: rgba(10,167,75,.22); border-color: rgba(61,212,122,.3); }
.tb-donem-liste li[aria-selected="true"] .tb-donem-rozet { color: #fff; background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.2); }
/* v19b: karanlık kipte etiket yazısı BEYAZ (diğer koyu kip etiketleriyle aynı dil; ölçüm 14,8:1), zemin yeşil tint biraz güçlü; aydınlıkta koyu yeşil kalır (beyaz 1,1:1 okunmaz) */
[data-bs-theme="dark"] .plan-card .tb-pk13-ust .tb-pk13-rozet, [data-bs-theme="dark"] .plan-popular .tb-pk13 .tb-pk13-rozet { color: #fff; background: rgba(10,167,75,.2); border-color: rgba(61,212,122,.3); }
[data-bs-theme="dark"] .tb-donem-rozet, [data-bs-theme="dark"] .tb-donem-rozet.en-iyi { color: #fff; }
/* v19c (2026-10-19, "yazı kalınlığı güven vermiyor"): 700/.7rem/harf aralığı → 600/.76rem/aralıksız, Open Sans; etiket "bilgi" tonunda */
.plan-card .tb-pk13-ust .tb-pk13-rozet, .plan-popular .tb-pk13 .tb-pk13-rozet, [data-bs-theme="dark"] .plan-card .tb-pk13-ust .tb-pk13-rozet { font: 600 .76rem/1 var(--tb-font-govde); letter-spacing: 0; padding: .24rem .6rem; }
.tb-donem-rozet { font: 600 .74rem/1 var(--tb-font-govde); letter-spacing: 0; }

/* ===== v20 (2026-10-19, "indirim güveni sarsıyor"): rozet → marka lacivertinde BİLGİ etiketi, yüzde değil TUTAR ("480 ₺ tasarruf").
   Platform ikon kutularıyla aynı dil: surface-2 zemin, ince çizgi, lacivert yazı; karanlıkta beyaz. Pill değil, 6px köşe. ===== */
.plan-card .tb-pk13-ust .tb-pk13-rozet, .plan-popular .tb-pk13 .tb-pk13-rozet { background: var(--tb-surface-2); color: var(--basic-deep, #0B1526); border: 1px solid var(--tb-line); border-radius: 6px; box-shadow: none; font: 600 .76rem/1 var(--tb-font-govde); letter-spacing: 0; padding: .26rem .55rem; }
[data-bs-theme="dark"] .plan-card .tb-pk13-ust .tb-pk13-rozet, [data-bs-theme="dark"] .plan-popular .tb-pk13 .tb-pk13-rozet { background: rgba(255,255,255,.06); color: #fff; border-color: rgba(255,255,255,.14); }
.tb-donem-rozet, .tb-donem-rozet.en-iyi { color: var(--basic-deep, #0B1526); background: var(--tb-surface-2); border: 1px solid var(--tb-line); border-radius: 6px; }
.tb-donem-rozet.en-iyi { font-weight: 700; }
[data-bs-theme="dark"] .tb-donem-rozet, [data-bs-theme="dark"] .tb-donem-rozet.en-iyi { color: #fff; background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.14); }
.tb-donem-liste li[aria-selected="true"] .tb-donem-rozet { color: #fff; background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.22); }

/* ===== v21 (2026-10-19): YÜZDE geri (enerji) + GÜVEN RENGİ: dolu lacivert (üst şerit #13213A→#1B3F6B) üstüne beyaz, 6px köşe, 600;
   karanlıkta birincil mavi gradyan (#3564AF→#5B8DEF = CTA rengi). Kırmızı=uyarı, yeşil=ucuzluk, lacivert=kurum. ===== */
.plan-card .tb-pk13-ust .tb-pk13-rozet, .plan-popular .tb-pk13 .tb-pk13-rozet { background: linear-gradient(135deg, #13213A, #1B3F6B); color: #fff; border: 0; border-radius: 6px; box-shadow: 0 6px 14px -9px rgba(19,33,58,.6); font: 600 .74rem/1 var(--tb-font-govde); letter-spacing: .01em; padding: .28rem .58rem; }
[data-bs-theme="dark"] .plan-card .tb-pk13-ust .tb-pk13-rozet, [data-bs-theme="dark"] .plan-popular .tb-pk13 .tb-pk13-rozet { background: linear-gradient(135deg, #3564AF, #5B8DEF); color: #fff; border: 0; box-shadow: 0 6px 14px -9px rgba(53,100,175,.7); }
.tb-donem-rozet { color: #13213A; background: rgba(19,33,58,.08); border: 1px solid rgba(19,33,58,.12); border-radius: 6px; }
.tb-donem-rozet.en-iyi { color: #fff; background: linear-gradient(135deg, #13213A, #1B3F6B); border: 0; }
[data-bs-theme="dark"] .tb-donem-rozet { color: #9FD3FF; background: rgba(91,141,239,.14); border-color: rgba(91,141,239,.25); }
[data-bs-theme="dark"] .tb-donem-rozet.en-iyi { color: #fff; background: linear-gradient(135deg, #3564AF, #5B8DEF); border: 0; }
.tb-donem-liste li[aria-selected="true"] .tb-donem-rozet { color: #fff; background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.22); }

/* ===== v22 (2026-10-19): etiket mavisi SİTE TONUNA — aydınlık: başlık mürekkebi laciverti (#13213A→#1B3F6B, "Sizi arayalım" sekmesiyle aynı);
   karanlık: parlak CTA mavisi yerine şeridin orta laciverti #1B3F6B→#27518A (beyaz 8–10:1, kart zemininden belirgin ama bağırmaz). ===== */
[data-bs-theme="dark"] .plan-card .tb-pk13-ust .tb-pk13-rozet, [data-bs-theme="dark"] .plan-popular .tb-pk13 .tb-pk13-rozet { background: linear-gradient(135deg, #1B3F6B, #27518A); color: #fff; box-shadow: 0 6px 14px -9px rgba(0,0,0,.6); border: 1px solid rgba(159,211,255,.18); }
[data-bs-theme="dark"] .tb-donem-rozet { color: #CFE3FF; background: rgba(39,81,138,.35); border-color: rgba(159,211,255,.2); }
[data-bs-theme="dark"] .tb-donem-rozet.en-iyi { color: #fff; background: linear-gradient(135deg, #1B3F6B, #27518A); border: 1px solid rgba(159,211,255,.18); }
.plan-card .tb-pk13-ust .tb-pk13-rozet, .plan-popular .tb-pk13 .tb-pk13-rozet { box-shadow: 0 6px 14px -9px rgba(19,33,58,.5); }

/* ===== SEVİYE İŞARETİ (2026-10-19, özgün): Türkbil logosunun merdiveni — 4 yükselen çubuk, dolu olanlar logo kırmızıları
   (alttan üste E7A2AA → DC7380 → D04555 → C4162B), boşlar çizgi rengi. 3 paketli kategoride 3. paket 4 çubuğu doldurur. ===== */
.tb-seviye { display: inline-flex; align-items: flex-end; gap: 2px; block-size: 14px; margin-inline-end: .55rem; vertical-align: baseline; }
.tb-seviye i { display: block; inline-size: 3px; border-radius: 1.5px; background: var(--tb-line); }
.tb-seviye i:nth-child(1) { block-size: 5px; } .tb-seviye i:nth-child(2) { block-size: 8px; } .tb-seviye i:nth-child(3) { block-size: 11px; } .tb-seviye i:nth-child(4) { block-size: 14px; }
[data-bs-theme="dark"] .tb-seviye i { background: rgba(255,255,255,.14); }
.tb-seviye[data-n="1"] i:nth-child(1), .tb-seviye[data-n="2"] i:nth-child(-n+2), .tb-seviye[data-n="3"] i:nth-child(-n+3), .tb-seviye[data-n="4"] i, .tb-seviye[data-t="3"][data-n="3"] i { background: #C4162B; }
.tb-seviye i:nth-child(1) { --sv: #E7A2AA; } .tb-seviye i:nth-child(2) { --sv: #DC7380; } .tb-seviye i:nth-child(3) { --sv: #D04555; } .tb-seviye i:nth-child(4) { --sv: #C4162B; }
.tb-seviye[data-n="1"] i:nth-child(1), .tb-seviye[data-n="2"] i:nth-child(-n+2), .tb-seviye[data-n="3"] i:nth-child(-n+3), .tb-seviye[data-n="4"] i, .tb-seviye[data-t="3"][data-n="3"] i { background: var(--sv); }

/* ===== v23 (2026-10-19): kart rozetleri KALKTI; indirim yalnız dönem seçicisinde ("12 aylık plan · %22 indirim") ===== */
.plan-card .tb-pk13-rozet { display: none !important; }
.plan-card .tb-pk13-ust { min-height: 1.35em; }
.tb-donem { inline-size: 19rem; }
.tb-donem-btn [data-tb-donem-metin] { display: inline-flex; align-items: baseline; gap: .5rem; }
.tb-donem-ind { font-size: .82rem; font-weight: 600; color: var(--basic-primary, #3564AF); }
.tb-donem-ind::before { content: "·"; margin-inline-end: .5rem; font-weight: 400; color: var(--tb-ink-soft); }
[data-bs-theme="dark"] .tb-donem-ind { color: #9FD3FF; }
@media (max-width: 767.98px) { .tb-donem { inline-size: min(100%, 22rem); } }
/* v24: rozet geri (v22 lacivert), dönem başına tek yüzde; seçici eki yok */
.plan-card .tb-pk13-rozet { display: inline-flex !important; }
.plan-card .tb-pk13-rozet.d-none { display: none !important; }
.tb-donem { inline-size: 15.5rem; }
/* v25 (2026-10-19, kullanıcı): rozet TERS — beyaz zemin, lacivert yazı, ince lacivert çizgi; karanlıkta beyaz zemin + lacivert yazı (kartta parlak nokta, okunur) */
.plan-card .tb-pk13-ust .tb-pk13-rozet, .plan-popular .tb-pk13 .tb-pk13-rozet { background: #fff; color: #13213A; border: 1px solid rgba(19,33,58,.28); box-shadow: 0 4px 10px -8px rgba(19,33,58,.35); }
[data-bs-theme="dark"] .plan-card .tb-pk13-ust .tb-pk13-rozet, [data-bs-theme="dark"] .plan-popular .tb-pk13 .tb-pk13-rozet { background: #fff; color: #13213A; border-color: rgba(255,255,255,.6); box-shadow: 0 4px 12px -8px rgba(0,0,0,.6); }
/* v25b: aydınlık rozet v22'ye geri (dolu lacivert + beyaz); karanlıkta ters (beyaz zemin + lacivert) kalır */
.plan-card .tb-pk13-ust .tb-pk13-rozet, .plan-popular .tb-pk13 .tb-pk13-rozet { background: linear-gradient(135deg, #13213A, #1B3F6B); color: #fff; border: 0; box-shadow: 0 6px 14px -9px rgba(19,33,58,.5); }
[data-bs-theme="dark"] .plan-card .tb-pk13-ust .tb-pk13-rozet, [data-bs-theme="dark"] .plan-popular .tb-pk13 .tb-pk13-rozet { background: #fff; color: #13213A; border: 1px solid rgba(255,255,255,.6); box-shadow: 0 4px 12px -8px rgba(0,0,0,.6); }
/* v26 (altın oran): açıklama min-height JS ile eşitlenir (sabit 2 satır yok); başlık bloğu : fiyat bloğu ≈ 1 : 1,62. Karanlıkta rozet hafif kırık beyaz: en parlak öğe fiyat kalsın. */
.tb-pk6-etiket { min-height: 0; }
.tb-pk6-bas { padding-bottom: .5rem; }
[data-bs-theme="dark"] .plan-card .tb-pk13-ust .tb-pk13-rozet, [data-bs-theme="dark"] .plan-popular .tb-pk13 .tb-pk13-rozet { background: #EEF2F8; border-color: rgba(255,255,255,.5); }

/* ===== KART v27 (2026-10-19, "kalitesiz firma izlenimi" denetimi) =====
   1) Yedi ayrı punto → dört: 12 (ince yazı/etiket), 14 (meta/özellik), 20 (başlık), 42 (fiyat)
   2) Karanlıkta "Hemen satın al" düz koyu gri = devre dışı gibi → çerçeveli, beyaz yazı; hover dolgu. Ok ikonu ↗ (dış bağlantı) → →
   3) Karanlık kart zemini sayfadan ayrışsın: hafif daha açık yüzey + üst iç ışık + görünür çizgi; fiyat rakamı düz beyaz (çamurlu gradyan yok)
   4) Platform ikon kutuları kaldırıldı (üstteki "Tüm paketlere dahil" satırı aynı bilgiyi veriyor) → başlık satırı nefes aldı
   5) İnce yazı parantezsiz: "12 ay için toplam 1.080 ₺ · normal fiyat 1.380 ₺"; "Genel özellikler" iki noktasız, küçük ve aralıklı etiket */
.tb-pk6-bas { padding: 1.2rem 1.25rem .45rem; }
.tb-pk6-bas h4 { font-size: 1.25rem; }
.tb-pk6-etiket { font-size: .875rem; color: var(--tb-ink-soft); }
.plan-card .tb-pk13.price-band { padding: .3rem 1.25rem .15rem !important; }
.plan-card .tb-pk13-ust .price-was { font-size: .875rem; }
.plan-card .tb-pk13-ust .tb-pk13-rozet { font-size: .75rem; }
.plan-card .tb-pk13 .price-now { font-size: 2.625rem; }
.plan-card .tb-pk13 [data-role="price-suffix"], .plan-card .tb-pk13 .tb-donem { font-size: .875rem; }
[data-bs-theme="dark"] .plan-card .tb-pk9-satir .price-now { background-image: none; -webkit-text-fill-color: #fff; color: #fff; }
.tb-pk6-sepet { padding: .75rem 1.25rem .25rem; }
.plan-card .btn-soft { background: transparent; border: 1px solid rgba(19,33,58,.28); color: var(--tb-ink); font-weight: 600; }
.plan-card .btn-soft:hover { background: var(--basic-deep, #0B1526); border-color: var(--basic-deep, #0B1526); color: #fff; }
[data-bs-theme="dark"] .plan-card .btn-soft { background: transparent; border-color: rgba(255,255,255,.28); color: #fff; }
[data-bs-theme="dark"] .plan-card .btn-soft:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.5); color: #fff; }
.tb-pk13-alt { padding: .7rem 1.25rem 1.05rem; font-size: .75rem; line-height: 1.55; }
.tb-pk6-govde { padding: .8rem 1.25rem 1rem !important; }
.tb-pk6-baslik { font-size: .75rem; font-weight: 600; letter-spacing: .04em; color: var(--tb-ink-soft); margin-bottom: .5rem; }
.tb-pk6-liste li { font-size: .875rem; padding: .38rem 0; }
[data-bs-theme="dark"] .plan-card { background: linear-gradient(170deg, rgba(255,255,255,.075), rgba(255,255,255,.03)); border-color: rgba(255,255,255,.12); box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 20px 40px -28px rgba(0,0,0,.8); }
[data-bs-theme="dark"] .tb-pk6-govde, [data-bs-theme="dark"] .tb-pk13-alt { border-color: rgba(255,255,255,.1); }

/* ===== MERDİVEN DÖNEM SEÇİCİ (2026-10-19, özgün): logonun dört yükselen çubuğu. Basamak yüksekliği --k/--n ile artar (en kısa 1 ay, en uzun 36 ay);
   seçili basamak logo kırmızısı gradyanı, diğerleri lacivert cam; üstte indirim yüzdesi, altta dönem adı. Açılır liste gizlenir. ===== */
.tb-merdiven { display: flex; align-items: flex-end; gap: 6px; inline-size: 20rem; }
.tb-merdiven[hidden] { display: none; }
.tb-mer-basamak { position: relative; flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: .3rem; padding: 0; border: 0; background: transparent; cursor: pointer; color: var(--tb-ink-soft); font: 600 .74rem/1 var(--tb-font-govde); }
.tb-mer-ind { min-block-size: .9rem; font-size: .7rem; font-weight: 700; letter-spacing: .01em; color: var(--tb-ink-soft); transition: color .2s ease; }
.tb-mer-cubuk { display: block; inline-size: 100%; block-size: calc(22px + (var(--k) - 1) * 10px); border-radius: 7px 7px 4px 4px; border: 1px solid var(--tb-line); background: var(--tb-surface-2); transition: background .22s ease, border-color .22s ease, transform .22s cubic-bezier(.2,.9,.3,1.3), box-shadow .22s ease; }
.tb-mer-ad { font-size: .78rem; font-weight: 600; color: var(--tb-ink); white-space: nowrap; }
.tb-mer-basamak:hover .tb-mer-cubuk { border-color: rgba(53,100,175,.55); transform: translateY(-2px); }
.tb-mer-basamak.aktif .tb-mer-cubuk { background: linear-gradient(180deg, #D04555, #C4162B); border-color: #C4162B; box-shadow: 0 10px 22px -12px rgba(196,22,43,.85); }
.tb-mer-basamak.aktif .tb-mer-ind { color: #C4162B; }
.tb-mer-basamak.aktif .tb-mer-ad { color: var(--tb-ink); }
.tb-mer-basamak:focus-visible { outline: none; } .tb-mer-basamak:focus-visible .tb-mer-cubuk { outline: 2px solid var(--basic-primary, #3564AF); outline-offset: 2px; }
[data-bs-theme="dark"] .tb-mer-cubuk { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.14); }
[data-bs-theme="dark"] .tb-mer-basamak:hover .tb-mer-cubuk { border-color: rgba(159,211,255,.5); }
[data-bs-theme="dark"] .tb-mer-basamak.aktif .tb-mer-ind { color: #E7A2AA; }
[data-bs-theme="dark"] .tb-mer-ad { color: #fff; }
.tb-h5-ust .tb-h5-arac:has(.tb-merdiven:not([hidden])) { margin: 0; align-items: flex-end; }
@media (max-width: 767.98px) { .tb-merdiven { inline-size: 100%; max-inline-size: 24rem; } }
@media (prefers-reduced-motion: reduce) { .tb-mer-cubuk { transition: none; } }

/* ===== DÖNEM SEÇİCİ VARYANTLARI (2026-10-19): 9 kategori, 9 farklı seçici — kullanıcı birini seçecek ===== */
.tb-merdiven { inline-size: auto; min-inline-size: 18rem; max-inline-size: 26rem; }
.tb-sec-merdiven { display: flex; align-items: flex-end; gap: 6px; inline-size: 20rem; }
/* 14 UCUZ — kayar hap: tek parça kapsül, kırmızı dil seçili bölüme kayar */
.tb-sec-hap .tb-hap { position: relative; display: grid; grid-template-columns: repeat(var(--n), 1fr); padding: 4px; border-radius: 999px; border: 1px solid var(--tb-line); background: var(--tb-surface-2); }
.tb-hap-iz { position: absolute; inset-block: 4px; inset-inline-start: calc(4px + var(--i) * ((100% - 8px) / var(--n))); inline-size: calc((100% - 8px) / var(--n)); border-radius: 999px; background: linear-gradient(135deg, #D04555, #C4162B); box-shadow: 0 8px 18px -10px rgba(196,22,43,.8); transition: inset-inline-start .32s cubic-bezier(.2,.9,.3,1.2); }
.tb-hap-sec { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: .1rem; padding: .45rem .6rem; border: 0; background: transparent; color: var(--tb-ink); cursor: pointer; }
.tb-hap-sec b { font: 600 .84rem/1 var(--tb-font-govde); } .tb-hap-sec small { font-size: .66rem; font-weight: 600; color: var(--tb-ink-soft); }
.tb-hap-sec.aktif { color: #fff; } .tb-hap-sec.aktif small { color: rgba(255,255,255,.85); }
[data-bs-theme="dark"] .tb-sec-hap .tb-hap { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.14); }
/* 2 KURUMSAL — hat: ray üstünde dört istasyon, seçiliye kadar dolu */
.tb-sec-hat .tb-hat { position: relative; display: grid; grid-template-columns: repeat(var(--n), 1fr); padding-top: .2rem; }
.tb-hat-ray, .tb-hat-dolu { position: absolute; inset-block-start: calc(1.15rem + 6px); block-size: 3px; border-radius: 2px; }
.tb-hat-ray { inset-inline: calc(100% / var(--n) / 2); background: var(--tb-line); }
.tb-hat-dolu { inset-inline-start: calc(100% / var(--n) / 2); inline-size: calc((100% - 100% / var(--n)) * var(--i) / (var(--n) - 1)); background: linear-gradient(90deg, #D04555, #C4162B); transition: inline-size .35s ease; }
.tb-hat-nokta { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: .3rem; border: 0; background: transparent; padding: 0; cursor: pointer; color: var(--tb-ink); }
.tb-hat-nokta small { min-block-size: .9rem; font-size: .66rem; font-weight: 700; color: var(--tb-ink-soft); }
.tb-hat-nokta i { display: block; inline-size: 15px; block-size: 15px; border-radius: 50%; border: 3px solid var(--tb-surface); background: var(--tb-line); box-shadow: 0 0 0 1px var(--tb-line); transition: transform .2s ease, background .2s ease; }
.tb-hat-nokta b { font: 600 .8rem/1 var(--tb-font-govde); }
.tb-hat-nokta.aktif i { background: #C4162B; box-shadow: 0 0 0 1px #C4162B, 0 0 0 6px rgba(196,22,43,.15); transform: scale(1.15); } .tb-hat-nokta.aktif small { color: #C4162B; }
.tb-hat-nokta:hover i { transform: scale(1.15); }
[data-bs-theme="dark"] .tb-hat-nokta i { border-color: #0F1B2E; background: rgba(255,255,255,.25); box-shadow: 0 0 0 1px rgba(255,255,255,.2); } [data-bs-theme="dark"] .tb-hat-nokta.aktif small { color: #E7A2AA; }
/* 9 WINDOWS — alt çizgi sekmeleri: metin + kırmızı çizgi */
.tb-sec-sekme { display: flex; gap: 1.3rem; border-bottom: 1px solid var(--tb-line); }
.tb-sek { position: relative; display: flex; align-items: baseline; gap: .4rem; padding: .3rem 0 .6rem; border: 0; background: transparent; cursor: pointer; color: var(--tb-ink-soft); }
.tb-sek b { font: 600 .9rem/1 var(--tb-font-govde); } .tb-sek small { font-size: .66rem; font-weight: 700; } .tb-sek i { position: absolute; inset-inline: 0; inset-block-end: -1px; block-size: 3px; border-radius: 2px 2px 0 0; background: transparent; transition: background .2s ease; }
.tb-sek.aktif { color: var(--tb-ink); } .tb-sek.aktif small { color: #C4162B; } .tb-sek.aktif i { background: linear-gradient(90deg, #D04555, #C4162B); } .tb-sek:hover { color: var(--tb-ink); }
[data-bs-theme="dark"] .tb-sec-sekme { border-color: rgba(255,255,255,.14); } [data-bs-theme="dark"] .tb-sek.aktif small { color: #E7A2AA; }
/* 10 CLOUD — sürgü: gerçek kaydırıcı, kırmızı dolgu, üstte seçili dönem + indirim */
.tb-sec-surgu .tb-surgu { inline-size: 20rem; }
.tb-surgu-ust { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: .45rem; } .tb-surgu-ust b { font: 600 .92rem/1 var(--tb-font-govde); color: var(--tb-ink); } .tb-surgu-ind { font-size: .72rem; font-weight: 700; color: #C4162B; }
.tb-surgu-giris { -webkit-appearance: none; appearance: none; inline-size: 100%; block-size: 6px; border-radius: 3px; background: linear-gradient(90deg, #D04555 0%, #C4162B var(--p), var(--tb-line) var(--p)); outline: 0; cursor: pointer; }
.tb-surgu-giris::-webkit-slider-thumb { -webkit-appearance: none; inline-size: 20px; block-size: 20px; border-radius: 50%; background: #fff; border: 3px solid #C4162B; box-shadow: 0 4px 12px -4px rgba(196,22,43,.7); }
.tb-surgu-giris::-moz-range-thumb { inline-size: 14px; block-size: 14px; border-radius: 50%; background: #fff; border: 3px solid #C4162B; }
.tb-surgu-tik { display: flex; justify-content: space-between; margin-top: .4rem; font-size: .72rem; color: var(--tb-ink-soft); } .tb-surgu-tik .aktif { color: var(--tb-ink); font-weight: 700; }
[data-bs-theme="dark"] .tb-surgu-giris { background: linear-gradient(90deg, #D04555 0%, #C4162B var(--p), rgba(255,255,255,.14) var(--p)); } [data-bs-theme="dark"] .tb-surgu-ind { color: #E7A2AA; }
/* 11 AJANS — dikey radyo listesi: kompakt kart */
.tb-sec-liste { display: grid; gap: 4px; padding: 5px; border-radius: 12px; border: 1px solid var(--tb-line); background: var(--tb-surface); min-inline-size: 15rem; }
.tb-lst { display: flex; align-items: center; gap: .6rem; padding: .45rem .6rem; border: 0; border-radius: 8px; background: transparent; cursor: pointer; color: var(--tb-ink); text-align: left; }
.tb-lst i { inline-size: 14px; block-size: 14px; border-radius: 50%; border: 2px solid var(--tb-line); flex: none; transition: all .2s ease; } .tb-lst b { flex: 1 1 auto; font: 600 .84rem/1 var(--tb-font-govde); } .tb-lst small { font-size: .66rem; font-weight: 700; color: var(--tb-ink-soft); } .tb-lst small.en-iyi { color: #C4162B; }
.tb-lst:hover { background: rgba(53,100,175,.07); } .tb-lst.aktif { background: rgba(196,22,43,.08); } .tb-lst.aktif i { border-color: #C4162B; background: radial-gradient(circle, #C4162B 45%, transparent 50%); }
[data-bs-theme="dark"] .tb-sec-liste { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.14); } [data-bs-theme="dark"] .tb-lst.aktif { background: rgba(196,22,43,.18); } [data-bs-theme="dark"] .tb-lst small.en-iyi { color: #E7A2AA; }
/* 16 E-TİCARET — adımlayıcı: − [dönem · indirim] + (sepet adet seçici dili) */
.tb-sec-adim { display: flex; flex-direction: column; align-items: center; gap: .4rem; }
.tb-adim { display: inline-flex; align-items: stretch; border-radius: 12px; border: 1px solid var(--tb-line); background: var(--tb-surface); overflow: hidden; }
.tb-adim-btn { inline-size: 44px; border: 0; background: transparent; font: 600 1.25rem/1 var(--tb-font-govde); color: var(--basic-primary, #3564AF); cursor: pointer; } .tb-adim-btn:hover:not(:disabled) { background: rgba(53,100,175,.08); } .tb-adim-btn:disabled { color: var(--tb-line); cursor: default; }
.tb-adim-ekran { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .15rem; min-inline-size: 9.5rem; padding: .45rem .9rem; border-inline: 1px solid var(--tb-line); } .tb-adim-ekran b { font: 600 .92rem/1 var(--tb-font-govde); color: var(--tb-ink); } .tb-adim-ekran small { font-size: .68rem; font-weight: 700; color: #C4162B; }
.tb-adim-nokta { display: flex; gap: 6px; } .tb-adim-nokta i { inline-size: 6px; block-size: 6px; border-radius: 50%; background: var(--tb-line); } .tb-adim-nokta i.aktif { background: #C4162B; inline-size: 18px; border-radius: 3px; }
[data-bs-theme="dark"] .tb-adim { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.14); } [data-bs-theme="dark"] .tb-adim-ekran { border-color: rgba(255,255,255,.14); } [data-bs-theme="dark"] .tb-adim-ekran small { color: #E7A2AA; } [data-bs-theme="dark"] .tb-adim-btn { color: #9FD3FF; }
/* 17 WORDPRESS — mini kartlar: büyük sayı, altında birim, altında indirim; seçili üstte kırmızı şerit */
.tb-sec-kart { display: flex; gap: 8px; }
.tb-krt { position: relative; display: flex; flex-direction: column; align-items: center; gap: .1rem; min-inline-size: 4.4rem; padding: .6rem .5rem .45rem; border-radius: 10px; border: 1px solid var(--tb-line); background: var(--tb-surface); cursor: pointer; color: var(--tb-ink); overflow: hidden; }
.tb-krt::before { content: ""; position: absolute; inset-inline: 0; inset-block-start: 0; block-size: 3px; background: transparent; transition: background .2s ease; }
.tb-krt b { font: 700 1.3rem/1 var(--tb-font-baslik); letter-spacing: -.02em; } .tb-krt span { font-size: .7rem; color: var(--tb-ink-soft); } .tb-krt small { margin-top: .2rem; font-size: .64rem; font-weight: 700; color: var(--tb-ink-soft); min-block-size: .8rem; }
.tb-krt:hover { border-color: rgba(53,100,175,.5); } .tb-krt.aktif { border-color: rgba(196,22,43,.5); } .tb-krt.aktif::before { background: linear-gradient(90deg, #D04555, #C4162B); } .tb-krt.aktif small { color: #C4162B; }
[data-bs-theme="dark"] .tb-krt { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.14); } [data-bs-theme="dark"] .tb-krt.aktif small { color: #E7A2AA; }
/* 8 BAYİ — çipler: dönem + indirim tek kapsül, en uygun dolu */
.tb-sec-cip { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.tb-cip { display: inline-flex; align-items: center; gap: .45rem; padding: .45rem .8rem; border-radius: 999px; border: 1px solid var(--tb-line); background: var(--tb-surface); font: 600 .84rem/1 var(--tb-font-govde); color: var(--tb-ink); cursor: pointer; transition: all .2s ease; }
.tb-cip small { padding: .12rem .4rem; border-radius: 999px; background: rgba(53,100,175,.1); color: var(--basic-primary, #3564AF); font-size: .64rem; font-weight: 700; }
.tb-cip:hover { border-color: rgba(53,100,175,.5); } .tb-cip.aktif { background: linear-gradient(135deg, #13213A, #1B3F6B); border-color: transparent; color: #fff; } .tb-cip.aktif small { background: rgba(255,255,255,.18); color: #fff; }
.tb-cip.en-iyi:not(.aktif) small { background: rgba(196,22,43,.1); color: #C4162B; }
[data-bs-theme="dark"] .tb-cip { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.14); } [data-bs-theme="dark"] .tb-cip small { background: rgba(159,211,255,.14); color: #9FD3FF; } [data-bs-theme="dark"] .tb-cip.aktif { background: linear-gradient(135deg, #3564AF, #5B8DEF); }
@media (max-width: 767.98px) { .tb-merdiven { max-inline-size: 100%; } .tb-sec-sekme { justify-content: center; } .tb-sec-cip { justify-content: center; } .tb-sec-surgu .tb-surgu { inline-size: 100%; } }

/* ===== DÖNEM SEÇİCİ 2. KUŞAK (2026-10-20) — dokuz metafor ===== */
.tb-merdiven { --kr: #C4162B; --kr2: #D04555; --mavi: var(--basic-primary, #3564AF); --cizgi: var(--tb-line); --yuz: var(--tb-surface); --yuz2: var(--tb-surface-2); --ink: var(--tb-ink); --soft: var(--tb-ink-soft); }
[data-bs-theme="dark"] .tb-merdiven { --cizgi: rgba(255,255,255,.16); --yuz: rgba(255,255,255,.05); --yuz2: rgba(255,255,255,.08); --mavi: #9FD3FF; }
.tb-merdiven button { font-family: var(--tb-font-govde); }
/* 1 WEB — FİYAT EĞRİSİ */
.tb-sec-egri { inline-size: 20rem; } .tb-egri { display: block; inline-size: 100%; } .tb-egri-n { fill: var(--yuz); stroke: var(--kr); stroke-width: 2.5; cursor: pointer; } .tb-egri-n.aktif { fill: var(--kr); stroke: #fff; filter: drop-shadow(0 0 6px rgba(196,22,43,.6)); }
.tb-egri-alt { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: -.4rem; } .tb-egri-b { display: flex; flex-direction: column; align-items: center; gap: .15rem; padding: .25rem 0; border: 0; background: transparent; color: var(--soft); cursor: pointer; } .tb-egri-b b { font-size: .82rem; font-weight: 600; } .tb-egri-b small { font-size: .64rem; font-weight: 700; } .tb-egri-b.aktif { color: var(--ink); } .tb-egri-b.aktif small { color: var(--kr); } [data-bs-theme="dark"] .tb-egri-b.aktif small { color: #E7A2AA; }
/* 14 UCUZ — PİL HÜCRELERİ */
.tb-sec-pil { inline-size: 19rem; } .tb-pil-ust { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: .4rem; } .tb-pil-ust b { font-size: .92rem; font-weight: 600; color: var(--ink); } .tb-pil-ust span { font-size: .72rem; font-weight: 700; color: var(--kr); } [data-bs-theme="dark"] .tb-pil-ust span { color: #E7A2AA; }
.tb-pil { position: relative; display: grid; grid-template-columns: repeat(var(--n), 1fr); gap: 4px; padding: 5px; padding-inline-end: 9px; border-radius: 10px; border: 2px solid var(--cizgi); background: var(--yuz); }
.tb-pil-kutup { position: absolute; inset-inline-end: -8px; inset-block-start: 30%; block-size: 40%; inline-size: 6px; border-radius: 0 3px 3px 0; background: var(--cizgi); }
.tb-pil-h { block-size: 38px; border: 0; border-radius: 5px; background: var(--yuz2); color: var(--soft); font-size: .74rem; font-weight: 600; cursor: pointer; transition: background .25s ease, color .25s ease, box-shadow .25s ease; }
.tb-pil-h.dolu { background: linear-gradient(180deg, var(--kr2), var(--kr)); color: #fff; } .tb-pil-h.aktif { box-shadow: inset 0 0 0 2px rgba(255,255,255,.55), 0 0 14px rgba(196,22,43,.45); } .tb-pil-h:hover:not(.dolu) { background: rgba(196,22,43,.14); }
/* 2 KURUMSAL — TAKVİM YAPRAKLARI */
.tb-sec-takvim { display: flex; gap: 10px; align-items: flex-end; }
.tb-tkv { position: relative; display: flex; flex-direction: column; align-items: center; min-inline-size: 4.4rem; padding: 0 0 .4rem; border: 1px solid var(--cizgi); border-radius: 9px; background: var(--yuz); color: var(--ink); cursor: pointer; overflow: visible; transition: transform .22s cubic-bezier(.2,.9,.3,1.3), box-shadow .22s ease, border-color .22s ease; }
.tb-tkv-bas { inline-size: 100%; padding: .22rem 0; border-radius: 8px 8px 0 0; background: var(--mavi); color: #fff; font-size: .62rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; text-align: center; } [data-bs-theme="dark"] .tb-tkv-bas { background: #1B3F6B; }
.tb-tkv-halka { position: absolute; inset-block-start: -5px; inset-inline-start: 22%; inline-size: 6px; block-size: 10px; border-radius: 3px; background: var(--cizgi); } .tb-tkv-halka.s { inset-inline-start: auto; inset-inline-end: 22%; }
.tb-tkv b { margin-top: .25rem; font: 700 1.5rem/1 var(--tb-font-baslik); } .tb-tkv small { font-size: .62rem; font-weight: 700; color: var(--soft); min-block-size: .8rem; }
.tb-tkv.aktif { transform: translateY(-5px); border-color: var(--kr); box-shadow: 0 14px 26px -14px rgba(196,22,43,.7); } .tb-tkv.aktif .tb-tkv-bas { background: linear-gradient(135deg, var(--kr2), var(--kr)); } .tb-tkv.aktif small { color: var(--kr); } [data-bs-theme="dark"] .tb-tkv.aktif small { color: #E7A2AA; } .tb-tkv:hover { transform: translateY(-3px); }
/* 9 WINDOWS — FLİP SAYAÇ */
.tb-sec-sayac { display: flex; align-items: center; gap: .7rem; }
.tb-syc-ok { inline-size: 36px; block-size: 36px; border-radius: 50%; border: 1px solid var(--cizgi); background: var(--yuz); color: var(--ink); cursor: pointer; } .tb-syc-ok:disabled { opacity: .35; cursor: default; } .tb-syc-ok:hover:not(:disabled) { border-color: var(--kr); color: var(--kr); }
.tb-syc { display: flex; align-items: flex-end; gap: 4px; } .tb-syc-d { position: relative; display: grid; place-items: center; inline-size: 38px; block-size: 52px; border-radius: 7px; background: linear-gradient(180deg, #1B3F6B 0%, #13213A 49%, #0E1A30 51%, #13213A 100%); color: #fff; font: 700 1.9rem/1 var(--tb-font-baslik); box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 6px 14px -8px rgba(0,0,0,.7); overflow: hidden; }
.tb-syc-d::after { content: ""; position: absolute; inset-inline: 0; inset-block-start: 50%; block-size: 1px; background: rgba(0,0,0,.45); } .tb-syc-d.flip i { display: block; animation: tb-flip .5s cubic-bezier(.2,.8,.3,1); transform-origin: 50% 50%; }
@keyframes tb-flip { 0% { transform: rotateX(90deg); opacity: 0; } 100% { transform: rotateX(0); opacity: 1; } }
.tb-syc-b { margin-left: .2rem; padding-bottom: .35rem; font-size: .8rem; font-weight: 600; color: var(--soft); }
.tb-syc-bilgi { display: flex; flex-direction: column; gap: .15rem; min-inline-size: 6.5rem; } .tb-syc-bilgi b { font-size: .92rem; font-weight: 600; color: var(--ink); } .tb-syc-bilgi small { font-size: .72rem; font-weight: 700; color: var(--kr); } [data-bs-theme="dark"] .tb-syc-bilgi small { color: #E7A2AA; }
/* 10 CLOUD — YÖRÜNGE GÖSTERGESİ */
.tb-sec-yorunge { inline-size: 15rem; } .tb-yor { display: block; inline-size: 100%; } .tb-yor-ray { fill: none; stroke: var(--cizgi); stroke-width: 6; stroke-linecap: round; } .tb-yor-dolu { fill: none; stroke: var(--kr); stroke-width: 6; stroke-linecap: round; transition: d .3s ease; }
.tb-yor-ibre { stroke: var(--ink); stroke-width: 2.5; stroke-linecap: round; transition: all .4s cubic-bezier(.2,.9,.3,1.3); } .tb-yor-mil { fill: var(--kr); } .tb-yor-n { fill: var(--yuz); stroke: var(--cizgi); stroke-width: 2; } .tb-yor-n.aktif { fill: var(--kr); stroke: #fff; } .tb-yor-ind { font: 700 13px var(--tb-font-govde); fill: var(--kr); } [data-bs-theme="dark"] .tb-yor-ind { fill: #E7A2AA; }
.tb-yor-alt { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: -.2rem; } .tb-yor-b { padding: .25rem 0; border: 0; background: transparent; color: var(--soft); font-size: .8rem; font-weight: 600; cursor: pointer; } .tb-yor-b.aktif { color: var(--ink); }
/* 11 AJANS — DİLİMLİ HALKA */
.tb-hlk { display: flex; align-items: center; gap: 1rem; } .tb-hlk svg { inline-size: 108px; block-size: 108px; } .tb-hlk-seg { fill: none; stroke: var(--cizgi); stroke-width: 10; stroke-linecap: butt; cursor: pointer; transition: stroke .2s ease, stroke-width .2s ease; } .tb-hlk-seg:hover { stroke: var(--mavi); } .tb-hlk-seg.aktif { stroke: var(--kr); stroke-width: 14; }
.tb-hlk-b { font: 700 15px var(--tb-font-baslik); fill: var(--ink); } .tb-hlk-s { font: 700 10px var(--tb-font-govde); fill: var(--kr); } [data-bs-theme="dark"] .tb-hlk-s { fill: #E7A2AA; }
.tb-hlk-alt { display: grid; gap: .25rem; } .tb-hlk-b2 { display: flex; align-items: center; gap: .5rem; padding: .2rem .4rem; border: 0; border-radius: 6px; background: transparent; color: var(--soft); font-size: .82rem; font-weight: 600; cursor: pointer; text-align: left; } .tb-hlk-b2 i { inline-size: 10px; block-size: 10px; border-radius: 2px; background: var(--cizgi); } .tb-hlk-b2.aktif { color: var(--ink); } .tb-hlk-b2.aktif i { background: var(--kr); } .tb-hlk-b2:hover { background: rgba(53,100,175,.08); }
/* 16 E-TİCARET — AY CETVELİ */
.tb-cet { inline-size: 21rem; } .tb-cet-ust { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: .55rem; } .tb-cet-ust b { font-size: .92rem; font-weight: 600; color: var(--ink); } .tb-cet-ust span { font-size: .72rem; font-weight: 700; color: var(--kr); } [data-bs-theme="dark"] .tb-cet-ust span { color: #E7A2AA; }
.tb-cet-ray { position: relative; block-size: 14px; margin: 0 .6rem 1.4rem; border-bottom: 2px solid var(--cizgi); } .tb-cet-t { position: absolute; bottom: 0; inline-size: 1px; block-size: 6px; background: var(--cizgi); transform: translateX(-50%); } .tb-cet-t.b { block-size: 12px; inline-size: 2px; }
.tb-cet-dolu { position: absolute; bottom: -2px; left: 0; block-size: 2px; background: linear-gradient(90deg, var(--kr2), var(--kr)); transition: width .35s ease; }
.tb-cet-d { position: absolute; bottom: -2px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: .3rem; border: 0; background: transparent; padding: 0; cursor: pointer; color: var(--soft); } .tb-cet-d i { inline-size: 14px; block-size: 14px; border-radius: 50%; border: 3px solid var(--yuz); background: var(--cizgi); box-shadow: 0 0 0 1px var(--cizgi); transform: translateY(6px); transition: transform .2s ease, background .2s ease; } .tb-cet-d span { font-size: .74rem; font-weight: 600; white-space: nowrap; transform: translateY(6px); }
.tb-cet-d.aktif { color: var(--ink); } .tb-cet-d.aktif i { background: var(--kr); box-shadow: 0 0 0 1px var(--kr), 0 0 0 6px rgba(196,22,43,.14); transform: translateY(6px) scale(1.2); } .tb-cet-d:hover i { transform: translateY(6px) scale(1.2); }
[data-bs-theme="dark"] .tb-cet-d i { border-color: #0F1B2E; }
/* 17 WORDPRESS — SUNUCU RAFI */
.tb-raf { position: relative; display: grid; gap: 3px; inline-size: 15rem; padding: 6px 14px; border-radius: 8px; background: var(--yuz2); border: 1px solid var(--cizgi); } .tb-raf-ray { position: absolute; inset-block: 6px; inline-size: 6px; border-radius: 2px; background: repeating-linear-gradient(180deg, var(--cizgi) 0 3px, transparent 3px 8px); } .tb-raf-ray.l { inset-inline-start: 4px; } .tb-raf-ray.r { inset-inline-end: 4px; }
.tb-raf-u { position: relative; display: grid; grid-template-columns: 14px 1fr auto 28px; align-items: center; gap: .5rem; block-size: 30px; padding: 0 .5rem; border: 1px solid var(--cizgi); border-radius: 4px; background: var(--yuz); color: var(--soft); font-size: .78rem; font-weight: 600; text-align: left; cursor: pointer; transition: all .2s ease; }
.tb-raf-led { inline-size: 7px; block-size: 7px; border-radius: 50%; background: var(--cizgi); } .tb-raf-u small { font-size: .64rem; font-weight: 700; } .tb-raf-izgara { block-size: 14px; border-radius: 2px; background: repeating-linear-gradient(90deg, var(--cizgi) 0 2px, transparent 2px 5px); opacity: .7; }
.tb-raf-u.aktif { color: var(--ink); border-color: rgba(196,22,43,.5); background: rgba(196,22,43,.08); } .tb-raf-u.aktif .tb-raf-led { background: var(--kr); box-shadow: 0 0 8px var(--kr), 0 0 2px #fff; animation: tb-led 1.6s ease-in-out infinite; } .tb-raf-u.aktif small { color: var(--kr); } [data-bs-theme="dark"] .tb-raf-u.aktif small { color: #E7A2AA; } .tb-raf-u:hover { border-color: var(--mavi); }
@keyframes tb-led { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
/* 8 BAYİ — DÖNER KADRAN */
.tb-kad { position: relative; inline-size: 150px; block-size: 150px; margin: .2rem 2.2rem .2rem 0; } .tb-kad-dugme { position: absolute; inset: 32px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, var(--yuz2), var(--yuz)); border: 1px solid var(--cizgi); box-shadow: 0 10px 24px -12px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.2); transform: rotate(var(--d)); transition: transform .45s cubic-bezier(.2,.9,.3,1.3); }
.tb-kad-dugme i { position: absolute; left: 50%; top: 8px; inline-size: 4px; block-size: 18px; margin-left: -2px; border-radius: 2px; background: var(--kr); box-shadow: 0 0 6px rgba(196,22,43,.6); }
.tb-kad-e { position: absolute; transform: translate(-50%, -50%); padding: .2rem .45rem; border: 0; border-radius: 6px; background: transparent; color: var(--soft); font-size: .76rem; font-weight: 600; white-space: nowrap; cursor: pointer; } .tb-kad-e.aktif { color: var(--ink); background: rgba(196,22,43,.1); } .tb-kad-e:hover { color: var(--ink); }
.tb-kad-ind { position: absolute; inset-inline: 0; inset-block-end: -2px; text-align: center; font-size: .72rem; font-weight: 700; color: var(--kr); } [data-bs-theme="dark"] .tb-kad-ind { color: #E7A2AA; }
@media (max-width: 767.98px) { .tb-sec-egri, .tb-sec-pil, .tb-cet, .tb-sec-yorunge { inline-size: 100%; max-inline-size: 22rem; } .tb-sec-takvim { justify-content: center; } }
@media (prefers-reduced-motion: reduce) { .tb-raf-led, .tb-syc-d.flip i { animation: none; } }
/* 2. kuşak düzeltme: araç kutusu dikey akış (yan yana sıkışma yok); başlık satırları gap; sıralı dizilim yukarı doğru */
.tb-merdiven.tb-sec-egri, .tb-merdiven.tb-sec-yorunge, .tb-merdiven.tb-sec-pil, .tb-merdiven.tb-sec-cetvel { display: block; }
.tb-sec-egri { inline-size: 22rem; } .tb-egri-alt { grid-template-columns: repeat(var(--n, 4), 1fr); margin-top: -.3rem; } .tb-egri-b small { white-space: nowrap; }
.tb-sec-yorunge { inline-size: 16rem; } .tb-yor-alt { grid-template-columns: repeat(var(--n, 4), 1fr); }
.tb-pil-ust, .tb-cet-ust { gap: 1rem; } .tb-pil-ust b, .tb-cet-ust b { white-space: nowrap; }
.tb-cet-ust { margin-bottom: 1.1rem; } .tb-cet-ray { margin-bottom: 1.6rem; }
.tb-sec-sayac { gap: .9rem; } .tb-syc-bilgi { min-inline-size: 7rem; }
.tb-sec-takvim { gap: 8px; } .tb-tkv { min-inline-size: 4.2rem; }

/* ===== 3. KUŞAK (2026-10-20): pil kaldı; sekiz yeni ===== */
/* 1 WEB — BİLET KOÇANI */
.tb-sec-bilet { display: flex; gap: 8px; }
.tb-blt { display: flex; align-items: stretch; padding: 0; border: 0; background: transparent; cursor: pointer; transition: transform .2s ease; }
.tb-blt-sol, .tb-blt-sag { display: flex; flex-direction: column; align-items: center; justify-content: center; } .tb-blt-sol { gap: 0; min-inline-size: 3rem; padding: .45rem .5rem; border-radius: 8px 0 0 8px; background: var(--yuz2); border: 1px solid var(--cizgi); border-right: 0; color: var(--ink); }
.tb-blt-sol b { font: 700 1.25rem/1 var(--tb-font-baslik); } .tb-blt-sol i { font-style: normal; font-size: .62rem; color: var(--soft); }
.tb-blt-sag { position: relative; min-inline-size: 3.6rem; padding: .45rem .4rem; border-radius: 0 8px 8px 0; border: 1px dashed var(--cizgi); border-left-style: dashed; background: var(--yuz); } .tb-blt-sag small { font-size: .62rem; font-weight: 700; color: var(--soft); }
.tb-blt-sag em { position: absolute; inset-inline-start: -5px; inset-block: -5px; inline-size: 9px; background: radial-gradient(circle, var(--tb-surface-2) 3px, transparent 3.5px) 0 0/9px 9px; }
.tb-blt.aktif .tb-blt-sol { background: linear-gradient(135deg, var(--kr2), var(--kr)); border-color: var(--kr); color: #fff; } .tb-blt.aktif .tb-blt-sol i { color: rgba(255,255,255,.8); } .tb-blt.aktif .tb-blt-sag { border-color: var(--kr); } .tb-blt.aktif .tb-blt-sag small { color: var(--kr); } .tb-blt:hover { transform: translateY(-2px); }
[data-bs-theme="dark"] .tb-blt.aktif .tb-blt-sag small { color: #E7A2AA; } [data-bs-theme="dark"] .tb-blt-sag em { background-image: radial-gradient(circle, #0F1B2E 3px, transparent 3.5px); }
/* 2 KURUMSAL — DOSYA KLASÖRÜ */
.tb-kls { inline-size: 20rem; } .tb-kls-sekmeler { display: flex; gap: 3px; padding: 0 .5rem; } .tb-kls-s { padding: .38rem .8rem; border: 1px solid var(--cizgi); border-bottom: 0; border-radius: 8px 8px 0 0; background: var(--yuz2); color: var(--soft); font-size: .78rem; font-weight: 600; cursor: pointer; transform: translateY(2px); }
.tb-kls-s.aktif { background: var(--yuz); color: var(--ink); transform: translateY(1px); border-color: var(--kr); border-bottom: 1px solid var(--yuz); z-index: 1; position: relative; font-weight: 700; } .tb-kls-s.aktif::before { content: ""; position: absolute; inset-inline: 0; inset-block-start: 0; block-size: 3px; border-radius: 8px 8px 0 0; background: linear-gradient(90deg, var(--kr2), var(--kr)); }
.tb-kls-govde { display: flex; justify-content: space-between; align-items: baseline; padding: .7rem .9rem; border: 1px solid var(--kr); border-radius: 10px; background: var(--yuz); } .tb-kls-govde b { font-size: .95rem; font-weight: 600; color: var(--ink); } .tb-kls-govde small { font-size: .74rem; font-weight: 700; color: var(--kr); } [data-bs-theme="dark"] .tb-kls-govde small { color: #E7A2AA; }
/* 9 WINDOWS — PANEL ŞALTERLERİ */
.tb-slt { display: flex; gap: 6px; padding: 8px 10px; border-radius: 12px; background: var(--yuz2); border: 1px solid var(--cizgi); }
.tb-slt-a { display: flex; flex-direction: column; align-items: center; gap: .3rem; padding: .4rem .5rem; border: 0; border-radius: 8px; background: transparent; color: var(--soft); cursor: pointer; min-inline-size: 4.2rem; }
.tb-slt-led { inline-size: 7px; block-size: 7px; border-radius: 50%; background: var(--cizgi); } .tb-slt-yuva { display: block; inline-size: 26px; block-size: 44px; border-radius: 6px; background: linear-gradient(180deg, rgba(0,0,0,.25), rgba(0,0,0,.05)); border: 1px solid var(--cizgi); position: relative; }
.tb-slt-kol { position: absolute; inset-inline: 3px; block-size: 19px; inset-block-end: 3px; border-radius: 4px; background: linear-gradient(180deg, var(--yuz), var(--yuz2)); border: 1px solid var(--cizgi); box-shadow: 0 2px 4px rgba(0,0,0,.3); transition: inset-block-end .22s cubic-bezier(.2,.9,.3,1.3), background .22s ease; }
.tb-slt-a b { font-size: .76rem; font-weight: 600; } .tb-slt-a small { font-size: .6rem; font-weight: 700; min-block-size: .8rem; }
.tb-slt-a.aktif { color: var(--ink); } .tb-slt-a.aktif .tb-slt-led { background: var(--kr); box-shadow: 0 0 8px var(--kr); } .tb-slt-a.aktif .tb-slt-kol { inset-block-end: 21px; background: linear-gradient(180deg, var(--kr2), var(--kr)); border-color: var(--kr); } .tb-slt-a.aktif small { color: var(--kr); } [data-bs-theme="dark"] .tb-slt-a.aktif small { color: #E7A2AA; }
/* 10 CLOUD — SAAT */
.tb-sat { display: flex; align-items: center; gap: .9rem; } .tb-sat svg { inline-size: 104px; block-size: 104px; } .tb-sat-cerceve { fill: var(--yuz); stroke: var(--cizgi); stroke-width: 2; } .tb-sat-tik { stroke: var(--soft); stroke-width: 1.5; } .tb-sat-dolu { fill: none; stroke: var(--kr); stroke-width: 4; stroke-linecap: round; } .tb-sat-akrep { stroke: var(--ink); stroke-width: 3; stroke-linecap: round; transition: all .4s ease; } .tb-sat-mil { fill: var(--kr); } .tb-sat-t { font: 700 11px var(--tb-font-govde); fill: var(--kr); }
.tb-sat-bilgi { display: flex; flex-direction: column; gap: .1rem; margin-bottom: .4rem; } .tb-sat-bilgi b { font-size: .95rem; font-weight: 600; color: var(--ink); } .tb-sat-bilgi small { font-size: .72rem; font-weight: 700; color: var(--kr); } [data-bs-theme="dark"] .tb-sat-bilgi small, [data-bs-theme="dark"] .tb-sat-t { color: #E7A2AA; fill: #E7A2AA; }
.tb-sat-sec { display: flex; gap: 4px; } .tb-sat-b { padding: .28rem .55rem; border: 1px solid var(--cizgi); border-radius: 6px; background: var(--yuz); color: var(--soft); font-size: .74rem; font-weight: 600; cursor: pointer; } .tb-sat-b.aktif { background: var(--kr); border-color: var(--kr); color: #fff; }
/* 11 AJANS — JETON YIĞINI */
.tb-sec-jeton { display: flex; gap: 10px; align-items: flex-end; }
.tb-jtn { display: flex; flex-direction: column; align-items: center; gap: .3rem; min-inline-size: 4.4rem; padding: .3rem .2rem 0; border: 0; background: transparent; color: var(--soft); cursor: pointer; } .tb-jtn small { font-size: .64rem; font-weight: 700; min-block-size: .8rem; } .tb-jtn b { font-size: .8rem; font-weight: 600; }
.tb-jtn-yigin { display: flex; flex-direction: column-reverse; gap: 2px; min-block-size: 44px; justify-content: flex-start; } .tb-jtn-yigin i { display: block; inline-size: 40px; block-size: 7px; border-radius: 50%/60%; background: linear-gradient(180deg, var(--yuz2), var(--cizgi)); border: 1px solid var(--cizgi); } .tb-jtn-yigin u { display: block; inline-size: 40px; block-size: 7px; border-radius: 50%; border: 1px dashed var(--cizgi); }
.tb-jtn.aktif { color: var(--ink); } .tb-jtn.aktif .tb-jtn-yigin i { background: linear-gradient(180deg, #E7A2AA, var(--kr)); border-color: var(--kr); box-shadow: 0 2px 4px rgba(196,22,43,.35); } .tb-jtn.aktif small { color: var(--kr); } [data-bs-theme="dark"] .tb-jtn.aktif small { color: #E7A2AA; } .tb-jtn:hover .tb-jtn-yigin { transform: translateY(-2px); }
/* 16 E-TİCARET — ASKILI FİYAT ETİKETLERİ */
.tb-sec-etiket { display: flex; gap: 10px; align-items: flex-start; }
.tb-etk { display: flex; flex-direction: column; align-items: center; padding: 0; border: 0; background: transparent; cursor: pointer; transform-origin: 50% 0; transition: transform .3s ease; } .tb-etk-ip { display: block; inline-size: 1px; block-size: 14px; background: var(--soft); }
.tb-etk-kart { position: relative; display: flex; flex-direction: column; align-items: center; min-inline-size: 4.2rem; padding: .7rem .5rem .45rem; border: 1px solid var(--cizgi); border-radius: 4px 4px 8px 8px; background: var(--yuz); color: var(--ink); clip-path: polygon(50% 0, 100% 18%, 100% 100%, 0 100%, 0 18%); } .tb-etk-delik { position: absolute; inset-block-start: 5px; inline-size: 6px; block-size: 6px; border-radius: 50%; background: var(--yuz2); border: 1px solid var(--cizgi); }
.tb-etk-kart b { font: 700 1.3rem/1 var(--tb-font-baslik); } .tb-etk-kart em { font-style: normal; font-size: .64rem; color: var(--soft); } .tb-etk-kart small { margin-top: .25rem; font-size: .62rem; font-weight: 700; color: var(--soft); min-block-size: .8rem; }
.tb-etk.aktif { transform: rotate(-4deg) translateY(2px); } .tb-etk.aktif .tb-etk-kart { background: linear-gradient(160deg, var(--kr2), var(--kr)); border-color: var(--kr); color: #fff; } .tb-etk.aktif .tb-etk-kart em, .tb-etk.aktif .tb-etk-kart small { color: rgba(255,255,255,.85); } .tb-etk:hover { transform: rotate(3deg); }
/* 17 WORDPRESS — MİKSER SÜRGÜSÜ (fader) */
.tb-fdr { inline-size: 20rem; } .tb-fdr-ray { position: relative; block-size: 64px; margin: 0 1.2rem; } .tb-fdr-iz { position: absolute; inset-inline: 0; inset-block-start: 14px; block-size: 8px; border-radius: 4px; background: var(--yuz2); border: 1px solid var(--cizgi); }
.tb-fdr-dolu { position: absolute; inset-inline-start: 0; inset-block-start: 15px; block-size: 6px; inline-size: calc(var(--i) / (var(--n) - 1) * 100%); border-radius: 3px; background: linear-gradient(90deg, var(--kr2), var(--kr)); transition: inline-size .35s ease; }
.tb-fdr-kol { position: absolute; inset-block-start: 0; inset-inline-start: calc(var(--i) / (var(--n) - 1) * 100%); inline-size: 18px; block-size: 36px; margin-inline-start: -9px; border-radius: 4px; background: linear-gradient(180deg, var(--yuz), var(--yuz2)); border: 1px solid var(--cizgi); box-shadow: 0 6px 12px -6px rgba(0,0,0,.6); transition: inset-inline-start .35s cubic-bezier(.2,.9,.3,1.2); pointer-events: none; } .tb-fdr-kol::after { content: ""; position: absolute; inset-inline: 3px; inset-block-start: 16px; block-size: 3px; background: var(--kr); border-radius: 2px; }
.tb-fdr-d { position: absolute; inset-block-start: 0; inset-inline-start: calc(var(--k) / (var(--n) - 1) * 100%); transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 0; border: 0; background: transparent; padding: 0; cursor: pointer; color: var(--soft); } .tb-fdr-d i { display: block; inline-size: 2px; block-size: 36px; background: transparent; } .tb-fdr-d b { margin-top: .35rem; font-size: .76rem; font-weight: 600; white-space: nowrap; } .tb-fdr-d small { font-size: .6rem; font-weight: 700; } .tb-fdr-d.aktif { color: var(--ink); } .tb-fdr-d.aktif small { color: var(--kr); } [data-bs-theme="dark"] .tb-fdr-d.aktif small { color: #E7A2AA; }
/* 8 BAYİ — HEDEF HALKALARI */
.tb-hdf { display: flex; align-items: center; gap: 1rem; } .tb-hdf svg { inline-size: 104px; block-size: 104px; } .tb-hdf-h { fill: none; stroke: var(--cizgi); stroke-width: 9; cursor: pointer; transition: stroke .2s ease; } .tb-hdf-h:hover { stroke: var(--mavi); } .tb-hdf-h.aktif { stroke: var(--kr); } .tb-hdf-merkez { fill: var(--ink); }
.tb-hdf-bilgi { display: flex; flex-direction: column; gap: .1rem; margin-bottom: .4rem; } .tb-hdf-bilgi b { font-size: .95rem; font-weight: 600; color: var(--ink); } .tb-hdf-bilgi small { font-size: .72rem; font-weight: 700; color: var(--kr); } [data-bs-theme="dark"] .tb-hdf-bilgi small { color: #E7A2AA; }
.tb-hdf-sec { display: grid; grid-template-columns: 1fr 1fr; gap: .2rem .6rem; } .tb-hdf-b { display: flex; align-items: center; gap: .4rem; padding: .15rem .3rem; border: 0; border-radius: 6px; background: transparent; color: var(--soft); font-size: .78rem; font-weight: 600; cursor: pointer; text-align: left; } .tb-hdf-b i { inline-size: 9px; block-size: 9px; border-radius: 50%; border: 2px solid var(--cizgi); } .tb-hdf-b.aktif { color: var(--ink); } .tb-hdf-b.aktif i { border-color: var(--kr); background: var(--kr); }
@media (max-width: 767.98px) { .tb-sec-bilet, .tb-sec-jeton, .tb-sec-etiket { justify-content: center; flex-wrap: wrap; } .tb-kls, .tb-fdr { inline-size: 100%; max-inline-size: 22rem; } }

/* ===== 4. KUŞAK (2026-10-20) ===== */
/* 1 WEB — ZİNCİR */
.tb-sec-zincir { display: flex; align-items: flex-start; gap: 0; }
.tb-znc { display: flex; flex-direction: column; align-items: center; gap: .3rem; border: 0; background: transparent; padding: 0; cursor: pointer; color: var(--soft); margin-inline-start: -10px; } .tb-znc:first-child { margin: 0; }
.tb-znc-halka { display: grid; place-items: center; min-inline-size: 4.6rem; block-size: 40px; padding: 0 .9rem; border-radius: 999px; border: 3px solid var(--cizgi); background: var(--yuz); color: var(--soft); transition: all .22s ease; } .tb-znc-halka b { font-size: .82rem; font-weight: 600; white-space: nowrap; }
.tb-znc:nth-child(even) .tb-znc-halka { transform: translateY(6px); } .tb-znc.dolu .tb-znc-halka { border-color: var(--mavi); color: var(--ink); } .tb-znc.aktif .tb-znc-halka { border-color: var(--kr); background: linear-gradient(135deg, var(--kr2), var(--kr)); color: #fff; box-shadow: 0 8px 18px -10px rgba(196,22,43,.8); }
.tb-znc small { font-size: .64rem; font-weight: 700; } .tb-znc:nth-child(even) small { margin-top: 6px; } .tb-znc.aktif small { color: var(--kr); } [data-bs-theme="dark"] .tb-znc.aktif small { color: #E7A2AA; }
/* 2 KURUMSAL — BLOK KULESİ */
.tb-sec-kule { inline-size: 14rem; } .tb-kul-ust { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: .4rem; gap: 1rem; } .tb-kul-ust b { font-size: .92rem; font-weight: 600; color: var(--ink); white-space: nowrap; } .tb-kul-ust span { font-size: .72rem; font-weight: 700; color: var(--kr); } [data-bs-theme="dark"] .tb-kul-ust span { color: #E7A2AA; }
.tb-kul { display: flex; flex-direction: column; align-items: center; gap: 3px; } .tb-kul-b { display: flex; justify-content: space-between; align-items: center; inline-size: var(--w); padding: 0 .7rem; block-size: 26px; border: 1px solid var(--cizgi); border-radius: 5px; background: var(--yuz2); color: var(--soft); font-size: .74rem; cursor: pointer; transition: all .22s ease; } .tb-kul-b b { font-weight: 600; } .tb-kul-b small { font-size: .62rem; font-weight: 700; }
.tb-kul-b.dolu { background: var(--yuz); color: var(--ink); border-color: rgba(53,100,175,.4); } .tb-kul-b.aktif { background: linear-gradient(135deg, var(--kr2), var(--kr)); border-color: var(--kr); color: #fff; box-shadow: 0 8px 18px -10px rgba(196,22,43,.8); transform: scale(1.04); } .tb-kul-zemin { inline-size: 100%; block-size: 4px; border-radius: 2px; background: var(--cizgi); margin-top: 2px; }
/* 9 WINDOWS — KLAVYE TUŞLARI */
.tb-tus { display: flex; gap: 8px; padding: 10px; border-radius: 12px; background: var(--yuz2); border: 1px solid var(--cizgi); }
.tb-tus-k { padding: 0 0 5px; border: 0; border-radius: 9px; background: var(--cizgi); cursor: pointer; transition: padding .12s ease; } .tb-tus-yuz { display: flex; flex-direction: column; align-items: center; gap: .15rem; min-inline-size: 4.4rem; padding: .55rem .5rem .45rem; border-radius: 8px; background: linear-gradient(180deg, var(--yuz), var(--yuz2)); border: 1px solid var(--cizgi); color: var(--ink); box-shadow: inset 0 1px 0 rgba(255,255,255,.2); }
.tb-tus-yuz b { font-size: .84rem; font-weight: 700; } .tb-tus-yuz small { font-size: .6rem; font-weight: 700; color: var(--soft); min-block-size: .8rem; }
.tb-tus-k.aktif { padding-bottom: 1px; background: #8E0F1F; } .tb-tus-k.aktif .tb-tus-yuz { background: linear-gradient(180deg, var(--kr2), var(--kr)); border-color: var(--kr); color: #fff; } .tb-tus-k.aktif small { color: rgba(255,255,255,.85); } .tb-tus-k:hover:not(.aktif) { padding-bottom: 3px; }
/* 10 CLOUD — PUSULA */
.tb-pus { display: flex; align-items: center; gap: 1.2rem; } .tb-pus-gul { position: relative; inline-size: 128px; block-size: 128px; margin: .6rem 1.2rem .6rem .4rem; } .tb-pus-gul svg { position: absolute; inset: 10px; inline-size: 108px; block-size: 108px; }
.tb-pus-c { fill: var(--yuz); stroke: var(--cizgi); stroke-width: 2; } .tb-pus-t { stroke: var(--soft); stroke-width: 1; } .tb-pus-ibre { transform-origin: 60px 60px; transform: rotate(var(--d)); transition: transform .5s cubic-bezier(.2,.9,.3,1.2); } .tb-pus-ibre .k { fill: var(--kr); } .tb-pus-ibre .b { fill: var(--cizgi); } .tb-pus-mil { fill: var(--ink); }
.tb-pus-e { position: absolute; transform: translate(-50%, -50%); padding: .2rem .45rem; border: 0; border-radius: 6px; background: transparent; color: var(--soft); font-size: .74rem; font-weight: 600; white-space: nowrap; cursor: pointer; } .tb-pus-e.aktif { color: var(--ink); background: rgba(196,22,43,.1); font-weight: 700; }
.tb-pus-bilgi { display: flex; flex-direction: column; gap: .1rem; } .tb-pus-bilgi b { font-size: .95rem; font-weight: 600; color: var(--ink); } .tb-pus-bilgi small { font-size: .72rem; font-weight: 700; color: var(--kr); } [data-bs-theme="dark"] .tb-pus-bilgi small { color: #E7A2AA; }
/* 11 AJANS — RENK KARTELASI */
.tb-pal { position: relative; display: flex; block-size: 92px; inline-size: 17rem; } .tb-pal-k { position: absolute; inset-block-end: 0; inset-inline-start: calc(var(--k) * 44px); display: flex; flex-direction: column; align-items: flex-start; gap: .15rem; inline-size: 7.6rem; padding: .5rem .55rem .45rem; border: 1px solid var(--cizgi); border-radius: 8px; background: var(--yuz); color: var(--ink); cursor: pointer; transform-origin: 20% 100%; transform: rotate(calc((var(--k) - (var(--n) - 1) / 2) * 7deg)); transition: transform .25s ease, box-shadow .25s ease; z-index: var(--k); box-shadow: 0 8px 16px -10px rgba(0,0,0,.5); }
.tb-pal-renk { display: block; inline-size: 100%; block-size: 26px; border-radius: 5px; background: color-mix(in srgb, #E7A2AA calc((1 - var(--t)) * 100%), #C4162B); } .tb-pal-k b { font-size: .8rem; font-weight: 600; } .tb-pal-k small { font-size: .62rem; font-weight: 700; color: var(--soft); }
.tb-pal-k.aktif { z-index: 10; transform: rotate(calc((var(--k) - (var(--n) - 1) / 2) * 7deg)) translateY(-10px); border-color: var(--kr); box-shadow: 0 14px 24px -12px rgba(196,22,43,.6); } .tb-pal-k.aktif small { color: var(--kr); } [data-bs-theme="dark"] .tb-pal-k.aktif small { color: #E7A2AA; } .tb-pal-k:hover { transform: rotate(calc((var(--k) - (var(--n) - 1) / 2) * 7deg)) translateY(-6px); }
/* 16 E-TİCARET — KASA FİŞİ */
.tb-fis { inline-size: 15rem; padding: .6rem .8rem .9rem; background: var(--yuz); border: 1px solid var(--cizgi); border-radius: 4px; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 6px), 96% 100%, 92% calc(100% - 6px), 88% 100%, 84% calc(100% - 6px), 80% 100%, 76% calc(100% - 6px), 72% 100%, 68% calc(100% - 6px), 64% 100%, 60% calc(100% - 6px), 56% 100%, 52% calc(100% - 6px), 48% 100%, 44% calc(100% - 6px), 40% 100%, 36% calc(100% - 6px), 32% 100%, 28% calc(100% - 6px), 24% 100%, 20% calc(100% - 6px), 16% 100%, 12% calc(100% - 6px), 8% 100%, 4% calc(100% - 6px), 0 100%); font-family: var(--tb-font-govde); }
.tb-fis-bas { display: flex; justify-content: space-between; padding-bottom: .35rem; margin-bottom: .25rem; border-bottom: 1px dashed var(--cizgi); font-size: .68rem; color: var(--soft); } .tb-fis-bas b { letter-spacing: .12em; color: var(--ink); }
.tb-fis-s { display: flex; align-items: center; gap: .4rem; inline-size: 100%; padding: .3rem .2rem; border: 0; background: transparent; color: var(--soft); font-size: .8rem; cursor: pointer; text-align: left; } .tb-fis-s i { inline-size: 10px; block-size: 10px; border: 1px solid var(--cizgi); border-radius: 2px; } .tb-fis-s b { font-weight: 600; } .tb-fis-s em { flex: 1 1 auto; border-bottom: 1px dotted var(--cizgi); margin: 0 .3rem; } .tb-fis-s small { font-weight: 700; }
.tb-fis-s.aktif { color: var(--ink); background: rgba(196,22,43,.07); border-radius: 4px; } .tb-fis-s.aktif i { background: var(--kr); border-color: var(--kr); } .tb-fis-s.aktif small { color: var(--kr); } [data-bs-theme="dark"] .tb-fis-s.aktif small { color: #E7A2AA; }
.tb-fis-alt { display: flex; justify-content: space-between; margin-top: .35rem; padding-top: .4rem; border-top: 1px dashed var(--cizgi); font-size: .7rem; color: var(--soft); } .tb-fis-alt b { color: var(--kr); font-weight: 700; } [data-bs-theme="dark"] .tb-fis-alt b { color: #E7A2AA; }
/* 17 WORDPRESS — KİTAP AYRAÇLARI */
.tb-ayr { display: flex; align-items: stretch; } .tb-ayr-kitap { display: flex; align-items: center; min-inline-size: 11rem; padding: .9rem 1rem; border: 1px solid var(--cizgi); border-radius: 10px 0 0 10px; background: var(--yuz); box-shadow: inset -8px 0 12px -10px rgba(0,0,0,.35); } .tb-ayr-sayfa { display: flex; flex-direction: column; gap: .15rem; } .tb-ayr-sayfa b { font-size: .95rem; font-weight: 600; color: var(--ink); } .tb-ayr-sayfa small { font-size: .72rem; font-weight: 700; color: var(--kr); } [data-bs-theme="dark"] .tb-ayr-sayfa small { color: #E7A2AA; }
.tb-ayr-ler { display: flex; flex-direction: column; justify-content: center; gap: 4px; } .tb-ayr-a { padding: .32rem .7rem .32rem .55rem; border: 1px solid var(--cizgi); border-left: 0; border-radius: 0 7px 7px 0; background: var(--yuz2); color: var(--soft); font-size: .76rem; font-weight: 600; cursor: pointer; transition: all .2s ease; white-space: nowrap; } .tb-ayr-a.aktif { background: linear-gradient(90deg, var(--kr2), var(--kr)); border-color: var(--kr); color: #fff; padding-inline-end: 1.1rem; } .tb-ayr-a:hover:not(.aktif) { color: var(--ink); padding-inline-end: .9rem; }
/* 8 BAYİ — ROZET / MÜHÜR */
.tb-sec-muhur { display: flex; gap: 12px; align-items: flex-start; }
.tb-mhr { position: relative; display: flex; flex-direction: column; align-items: center; gap: .2rem; border: 0; background: transparent; padding: 0; cursor: pointer; color: var(--soft); }
.tb-mhr-disk { display: flex; flex-direction: column; align-items: center; justify-content: center; inline-size: 58px; block-size: 58px; border-radius: 50%; background: var(--yuz); border: 2px solid var(--cizgi); box-shadow: inset 0 0 0 4px var(--yuz), inset 0 0 0 5px var(--cizgi); color: var(--ink); transition: all .22s ease; } .tb-mhr-disk b { font: 700 1.25rem/1 var(--tb-font-baslik); } .tb-mhr-disk em { font-style: normal; font-size: .58rem; color: var(--soft); }
.tb-mhr-kurdele { display: block; inline-size: 26px; block-size: 14px; margin-top: -6px; background: var(--cizgi); clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 70%, 0 100%); } .tb-mhr small { font-size: .62rem; font-weight: 700; min-block-size: .8rem; }
.tb-mhr.aktif .tb-mhr-disk { background: linear-gradient(135deg, var(--kr2), var(--kr)); border-color: var(--kr); color: #fff; box-shadow: inset 0 0 0 4px var(--kr), inset 0 0 0 5px rgba(255,255,255,.7), 0 10px 20px -10px rgba(196,22,43,.8); } .tb-mhr.aktif .tb-mhr-disk em { color: rgba(255,255,255,.85); } .tb-mhr.aktif .tb-mhr-kurdele { background: var(--kr); } .tb-mhr.aktif small { color: var(--kr); } [data-bs-theme="dark"] .tb-mhr.aktif small { color: #E7A2AA; } .tb-mhr:hover .tb-mhr-disk { transform: scale(1.06); }
@media (max-width: 767.98px) { .tb-sec-zincir, .tb-sec-muhur { justify-content: center; flex-wrap: wrap; } .tb-pal { inline-size: 100%; } .tb-pus { flex-direction: column; } }
/* 4. kuşak düzeltme */
.tb-merdiven.tb-sec-kule { display: block; inline-size: 15rem; } .tb-kul-b { min-inline-size: 7.5rem; white-space: nowrap; gap: .6rem; } .tb-kul-b b, .tb-kul-b small { white-space: nowrap; }
.tb-pal { inline-size: 19rem; block-size: 104px; } .tb-pal-k { inline-size: 6.6rem; inset-inline-start: calc(var(--k) * 56px); transform: rotate(calc((var(--k) - (var(--n) - 1) / 2) * 4deg)); } .tb-pal-k.aktif { transform: rotate(calc((var(--k) - (var(--n) - 1) / 2) * 4deg)) translateY(-12px); } .tb-pal-k:hover { transform: rotate(calc((var(--k) - (var(--n) - 1) / 2) * 4deg)) translateY(-6px); } .tb-pal-k small, .tb-pal-k b { white-space: nowrap; }

/* ===== 5. KUŞAK (2026-10-20) ===== */
/* 1 WEB — TERMOMETRE */
.tb-merdiven.tb-sec-termo { display: block; inline-size: 21rem; } .tb-trm-ust { display: flex; justify-content: space-between; margin-bottom: .5rem; gap: 1rem; } .tb-trm-ust b { font-size: .92rem; font-weight: 600; color: var(--ink); white-space: nowrap; } .tb-trm-ust span { font-size: .72rem; font-weight: 700; color: var(--kr); } [data-bs-theme="dark"] .tb-trm-ust span { color: #E7A2AA; }
.tb-trm-govde { position: relative; display: flex; align-items: center; block-size: 54px; } .tb-trm-hazne { inline-size: 26px; block-size: 26px; border-radius: 50%; background: var(--kr); box-shadow: 0 0 0 3px var(--yuz), 0 0 0 4px var(--cizgi), 0 0 12px rgba(196,22,43,.5); z-index: 1; }
.tb-trm-tup { position: relative; flex: 1 1 auto; block-size: 12px; margin-inline-start: -4px; border-radius: 0 6px 6px 0; background: var(--yuz); border: 1px solid var(--cizgi); overflow: hidden; } .tb-trm-civa { position: absolute; inset-block: 0; inset-inline-start: 0; inline-size: calc(var(--p) + 8px); background: linear-gradient(90deg, var(--kr), var(--kr2)); transition: inline-size .4s ease; }
.tb-trm-olcek { position: absolute; inset-inline: 22px 0; inset-block-start: 30px; } .tb-trm-d { position: absolute; inset-inline-start: var(--k); transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: .2rem; border: 0; background: transparent; padding: 0; cursor: pointer; color: var(--soft); } .tb-trm-d i { inline-size: 2px; block-size: 8px; background: var(--cizgi); } .tb-trm-d b { font-size: .74rem; font-weight: 600; white-space: nowrap; } .tb-trm-d.aktif { color: var(--ink); } .tb-trm-d.aktif i { background: var(--kr); block-size: 12px; } .tb-trm-d:last-child { transform: translateX(-80%); } .tb-trm-d:first-child { transform: translateX(-20%); }
/* 2 KURUMSAL — NABIZ */
.tb-merdiven.tb-sec-nabiz { display: block; inline-size: 20rem; } .tb-nbz { display: block; inline-size: 100%; } .tb-nbz-cizgi { fill: none; stroke: var(--kr); stroke-width: 2; stroke-linejoin: round; filter: drop-shadow(0 0 4px rgba(196,22,43,.5)); } .tb-nbz-n { fill: var(--kr); }
.tb-nbz-alt { display: grid; grid-template-columns: repeat(var(--n), 1fr); margin-top: -.4rem; } .tb-nbz-b { display: flex; flex-direction: column; align-items: center; gap: .1rem; padding: .2rem 0; border: 0; background: transparent; color: var(--soft); cursor: pointer; } .tb-nbz-b b { font-size: .8rem; font-weight: 600; } .tb-nbz-b small { font-size: .62rem; font-weight: 700; } .tb-nbz-b.aktif { color: var(--ink); } .tb-nbz-b.aktif small { color: var(--kr); } [data-bs-theme="dark"] .tb-nbz-b.aktif small { color: #E7A2AA; }
/* 9 WINDOWS — PENCERE KARELERİ */
.tb-sec-pencere { display: flex; align-items: center; gap: 1rem; } .tb-pnc { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; transform: skewY(-6deg); }
.tb-pnc-k { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .1rem; inline-size: 4.6rem; block-size: 3.2rem; border: 1px solid var(--cizgi); border-radius: 3px; background: var(--yuz2); color: var(--ink); cursor: pointer; transition: all .2s ease; } .tb-pnc-k b { font-size: .8rem; font-weight: 700; } .tb-pnc-k small { font-size: .58rem; font-weight: 700; color: var(--soft); }
.tb-pnc-k.aktif { background: linear-gradient(135deg, var(--kr2), var(--kr)); border-color: var(--kr); color: #fff; box-shadow: 0 8px 18px -10px rgba(196,22,43,.8); } .tb-pnc-k.aktif small { color: rgba(255,255,255,.85); } .tb-pnc-k:hover:not(.aktif) { border-color: var(--mavi); }
.tb-pnc-bilgi { display: flex; flex-direction: column; gap: .1rem; } .tb-pnc-bilgi b { font-size: .95rem; font-weight: 600; color: var(--ink); } .tb-pnc-bilgi small { font-size: .72rem; font-weight: 700; color: var(--kr); } [data-bs-theme="dark"] .tb-pnc-bilgi small { color: #E7A2AA; }
/* 10 CLOUD — RADAR */
.tb-rdr { display: flex; align-items: center; gap: 1rem; } .tb-rdr-ekran { position: relative; inline-size: 112px; block-size: 112px; border-radius: 50%; background: radial-gradient(circle, rgba(53,100,175,.18), transparent 70%); overflow: hidden; } .tb-rdr-ekran svg { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; } .tb-rdr-c { fill: none; stroke: var(--cizgi); stroke-width: 1; }
.tb-rdr-tarama { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 0deg, rgba(196,22,43,.35), transparent 70deg); animation: tb-radar 3.2s linear infinite; }
.tb-rdr-n { position: absolute; transform: translate(-50%, -50%); inline-size: 12px; block-size: 12px; border-radius: 50%; border: 0; background: var(--soft); cursor: pointer; padding: 0; } .tb-rdr-n span { position: absolute; inset-inline-start: 14px; inset-block-start: -2px; font-size: .6rem; font-weight: 600; color: var(--soft); white-space: nowrap; } .tb-rdr-n.aktif { background: var(--kr); box-shadow: 0 0 0 4px rgba(196,22,43,.25), 0 0 10px var(--kr); } .tb-rdr-n.aktif span { color: var(--ink); }
.tb-rdr-bilgi { display: flex; flex-direction: column; gap: .15rem; } .tb-rdr-bilgi b { font-size: .95rem; font-weight: 600; color: var(--ink); } .tb-rdr-bilgi small { font-size: .72rem; font-weight: 700; color: var(--kr); } [data-bs-theme="dark"] .tb-rdr-bilgi small { color: #E7A2AA; } .tb-rdr-sec { display: flex; gap: 4px; margin-top: .3rem; } .tb-rdr-b { padding: .26rem .5rem; border: 1px solid var(--cizgi); border-radius: 6px; background: var(--yuz); color: var(--soft); font-size: .72rem; font-weight: 600; cursor: pointer; } .tb-rdr-b.aktif { background: var(--kr); border-color: var(--kr); color: #fff; }
@keyframes tb-radar { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .tb-rdr-tarama { animation: none; } }
/* 11 AJANS — POST-IT NOTLAR */
.tb-sec-notlar { display: flex; gap: 10px; align-items: flex-start; padding-top: 6px; }
.tb-not { position: relative; display: flex; flex-direction: column; align-items: center; gap: .15rem; min-inline-size: 4.6rem; padding: .9rem .5rem .55rem; border: 0; border-radius: 2px; background: #FBE7A1; color: #3B3A2E; cursor: pointer; transform: rotate(var(--r)); box-shadow: 0 8px 14px -8px rgba(0,0,0,.5); transition: transform .2s ease; font-family: var(--tb-font-govde); } .tb-not b { font-size: .86rem; font-weight: 700; } .tb-not small { font-size: .62rem; font-weight: 700; color: #7A6A2F; min-block-size: .8rem; }
.tb-not-pin { position: absolute; inset-block-start: -6px; inset-inline-start: 50%; inline-size: 12px; block-size: 12px; margin-inline-start: -6px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff, #9aa 70%); box-shadow: 0 2px 3px rgba(0,0,0,.4); }
.tb-not.aktif { background: linear-gradient(160deg, #E7A2AA, var(--kr2)); color: #fff; transform: rotate(var(--r)) translateY(-6px) scale(1.06); z-index: 1; } .tb-not.aktif small { color: rgba(255,255,255,.9); } .tb-not.aktif .tb-not-pin { background: radial-gradient(circle at 35% 35%, #fff, var(--kr) 70%); } .tb-not:hover { transform: rotate(0) translateY(-3px); }
/* 16 E-TİCARET — KUPON (makas) */
.tb-sec-kupon { display: grid; gap: 6px; } .tb-kpn { display: grid; grid-template-columns: 1fr auto 5.2rem; align-items: stretch; padding: 0; border: 0; background: transparent; cursor: pointer; min-inline-size: 15rem; }
.tb-kpn-sol { display: flex; align-items: center; padding: .4rem .8rem; border: 1px solid var(--cizgi); border-right: 0; border-radius: 8px 0 0 8px; background: var(--yuz); color: var(--ink); } .tb-kpn-sol b { font-size: .84rem; font-weight: 600; }
.tb-kpn-kes { display: grid; place-items: center; inline-size: 22px; border-block: 1px solid var(--cizgi); background: var(--yuz); color: var(--soft); font-size: .72rem; background-image: repeating-linear-gradient(180deg, var(--cizgi) 0 4px, transparent 4px 8px); background-size: 1px 100%; background-repeat: no-repeat; background-position: center; } .tb-kpn-kes .bi { background: var(--yuz); padding: 2px; border-radius: 50%; }
.tb-kpn-sag { display: flex; align-items: center; justify-content: center; padding: .4rem .5rem; border: 1px solid var(--cizgi); border-left: 0; border-radius: 0 8px 8px 0; background: var(--yuz2); } .tb-kpn-sag small { font-size: .68rem; font-weight: 700; color: var(--soft); }
.tb-kpn.aktif .tb-kpn-sol { background: linear-gradient(135deg, var(--kr2), var(--kr)); border-color: var(--kr); color: #fff; } .tb-kpn.aktif .tb-kpn-kes { border-color: var(--kr); color: var(--kr); } .tb-kpn.aktif .tb-kpn-sag { border-color: var(--kr); } .tb-kpn.aktif .tb-kpn-sag small { color: var(--kr); } [data-bs-theme="dark"] .tb-kpn.aktif .tb-kpn-sag small { color: #E7A2AA; }
/* 17 WORDPRESS — YÜZDE HALKALARI (donut) */
.tb-sec-donut { display: flex; gap: 10px; } .tb-dnt { display: flex; flex-direction: column; align-items: center; gap: .15rem; border: 0; background: transparent; padding: .3rem; border-radius: 10px; cursor: pointer; color: var(--soft); } .tb-dnt svg { inline-size: 54px; block-size: 54px; transform: rotate(-90deg); } .tb-dnt .iz { fill: none; stroke: var(--cizgi); stroke-width: 5; } .tb-dnt .dolu { fill: none; stroke: var(--mavi); stroke-width: 5; stroke-linecap: round; transition: stroke .2s ease; } .tb-dnt text { font: 700 11px var(--tb-font-govde); fill: var(--ink); transform: rotate(90deg); transform-origin: 22px 22px; }
.tb-dnt b { font-size: .76rem; font-weight: 600; } .tb-dnt.aktif { color: var(--ink); background: rgba(196,22,43,.08); } .tb-dnt.aktif .dolu { stroke: var(--kr); } .tb-dnt.aktif text { fill: var(--kr); } [data-bs-theme="dark"] .tb-dnt.aktif text { fill: #E7A2AA; } .tb-dnt:hover { background: rgba(53,100,175,.08); }
/* 8 BAYİ — RÜTBE ŞERİTLERİ */
.tb-sec-rutbe { display: flex; gap: 8px; align-items: flex-end; } .tb-rtb { display: flex; flex-direction: column; align-items: center; gap: .3rem; min-inline-size: 4.4rem; padding: .55rem .4rem .45rem; border: 1px solid var(--cizgi); border-radius: 10px; background: var(--yuz); color: var(--soft); cursor: pointer; transition: all .2s ease; }
.tb-rtb-seritler { display: flex; flex-direction: column; gap: 3px; } .tb-rtb-seritler i { display: block; inline-size: 28px; block-size: 8px; background: var(--cizgi); clip-path: polygon(0 0, 50% 45%, 100% 0, 100% 55%, 50% 100%, 0 55%); } .tb-rtb b { font-size: .78rem; font-weight: 600; } .tb-rtb small { font-size: .6rem; font-weight: 700; min-block-size: .8rem; }
.tb-rtb.aktif { color: var(--ink); border-color: var(--kr); background: rgba(196,22,43,.07); } .tb-rtb.aktif .tb-rtb-seritler i { background: var(--kr); } .tb-rtb.aktif small { color: var(--kr); } [data-bs-theme="dark"] .tb-rtb.aktif small { color: #E7A2AA; } .tb-rtb:hover { border-color: var(--mavi); }
@media (max-width: 767.98px) { .tb-sec-notlar, .tb-sec-donut, .tb-sec-rutbe { justify-content: center; flex-wrap: wrap; } .tb-sec-termo, .tb-sec-nabiz { inline-size: 100%; } .tb-sec-pencere, .tb-rdr { flex-direction: column; } }

/* ===== 6. KUŞAK (2026-10-20) — hosting metaforları ===== */
/* 1 WEB — TARAYICI SEKMELERİ */
.tb-try { inline-size: 22rem; } .tb-try-sekmeler { display: flex; gap: 2px; padding: 0 .4rem; } .tb-try-s { display: flex; align-items: center; gap: .4rem; padding: .4rem .7rem; border: 1px solid var(--cizgi); border-bottom: 0; border-radius: 9px 9px 0 0; background: var(--yuz2); color: var(--soft); font-size: .76rem; cursor: pointer; transform: translateY(1px); } .tb-try-fav { inline-size: 10px; block-size: 10px; border-radius: 2px; background: var(--cizgi); } .tb-try-s b { font-weight: 600; } .tb-try-s small { font-size: .6rem; font-weight: 700; }
.tb-try-s.aktif { background: var(--yuz); color: var(--ink); border-color: var(--kr); border-bottom: 1px solid var(--yuz); position: relative; z-index: 1; } .tb-try-s.aktif .tb-try-fav { background: var(--kr); } .tb-try-s.aktif small { color: var(--kr); } [data-bs-theme="dark"] .tb-try-s.aktif small { color: #E7A2AA; }
.tb-try-adres { display: flex; align-items: center; gap: .5rem; padding: .5rem .8rem; border: 1px solid var(--kr); border-radius: 10px; background: var(--yuz); font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .8rem; color: var(--soft); } .tb-try-adres .bi { color: #2BB673; font-size: .75rem; } .tb-try-adres span b { color: var(--ink); } .tb-try-adres em { margin-inline-start: auto; font-style: normal; font-size: .7rem; font-weight: 700; color: var(--kr); font-family: var(--tb-font-govde); } [data-bs-theme="dark"] .tb-try-adres em { color: #E7A2AA; }
/* 2 KURUMSAL — SWITCH PORTLARI */
.tb-prt { display: flex; align-items: center; gap: 1rem; } .tb-prt-panel { display: flex; gap: 6px; padding: 8px 10px; border-radius: 8px; background: #1a2740; border: 1px solid rgba(255,255,255,.12); box-shadow: inset 0 1px 0 rgba(255,255,255,.08); }
.tb-prt-p { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 2px 4px; border: 0; background: transparent; color: rgba(255,255,255,.55); cursor: pointer; } .tb-prt-no { font-size: .56rem; font-weight: 700; letter-spacing: .05em; } .tb-prt-jak { position: relative; display: block; inline-size: 34px; block-size: 26px; border-radius: 3px 3px 5px 5px; background: #0b1324; border: 1px solid rgba(255,255,255,.18); } .tb-prt-jak i { position: absolute; inset-block-start: 3px; inline-size: 4px; block-size: 4px; border-radius: 50%; background: rgba(255,255,255,.15); } .tb-prt-jak .l { inset-inline-start: 3px; } .tb-prt-jak .r { inset-inline-end: 3px; } .tb-prt-p b { font-size: .66rem; font-weight: 600; }
.tb-prt-p.aktif { color: #fff; } .tb-prt-p.aktif .tb-prt-jak { border-color: var(--kr); box-shadow: 0 0 10px rgba(196,22,43,.5); } .tb-prt-p.aktif .tb-prt-jak .l { background: #2BB673; box-shadow: 0 0 5px #2BB673; } .tb-prt-p.aktif .tb-prt-jak .r { background: var(--kr); box-shadow: 0 0 5px var(--kr); animation: tb-led 1s ease-in-out infinite; }
.tb-prt-bilgi { display: flex; flex-direction: column; gap: .15rem; } .tb-prt-bilgi b { font-size: .95rem; font-weight: 600; color: var(--ink); } .tb-prt-bilgi small { font-size: .72rem; font-weight: 700; color: var(--kr); } [data-bs-theme="dark"] .tb-prt-bilgi small { color: #E7A2AA; } .tb-prt-link { display: inline-flex; align-items: center; gap: .3rem; font-size: .6rem; font-weight: 700; letter-spacing: .1em; color: #2BB673; } .tb-prt-link i { inline-size: 6px; block-size: 6px; border-radius: 50%; background: #2BB673; box-shadow: 0 0 5px #2BB673; }
/* 9 WINDOWS — İŞLEMCİ ÇEKİRDEKLERİ */
.tb-sec-cekirdek { display: flex; align-items: center; gap: 1rem; } .tb-cpu { position: relative; padding: 8px; border-radius: 6px; background: #1a2740; border: 1px solid rgba(255,255,255,.14); } .tb-cpu-pin { position: absolute; inset-inline: 10px; block-size: 6px; background: repeating-linear-gradient(90deg, rgba(255,255,255,.35) 0 3px, transparent 3px 9px); } .tb-cpu-pin.u { inset-block-start: -7px; } .tb-cpu-pin.d { inset-block-end: -7px; }
.tb-cpu-die { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; } .tb-cpu-c { display: flex; flex-direction: column; align-items: center; gap: 1px; inline-size: 4.8rem; padding: .35rem .3rem; border: 1px solid rgba(255,255,255,.14); border-radius: 3px; background: #0b1324; color: rgba(255,255,255,.6); cursor: pointer; } .tb-cpu-c small { font-size: .52rem; letter-spacing: .1em; } .tb-cpu-c b { font-size: .76rem; font-weight: 700; } .tb-cpu-c em { font-style: normal; font-size: .56rem; font-weight: 700; min-block-size: .7rem; }
.tb-cpu-c.aktif { color: #fff; background: linear-gradient(135deg, var(--kr2), var(--kr)); border-color: var(--kr); box-shadow: 0 0 12px rgba(196,22,43,.55); } .tb-cpu-c:hover:not(.aktif) { border-color: #9FD3FF; }
.tb-cpu-bilgi { display: flex; flex-direction: column; gap: .15rem; } .tb-cpu-bilgi b { font-size: .95rem; font-weight: 600; color: var(--ink); } .tb-cpu-bilgi small { font-size: .72rem; font-weight: 700; color: var(--kr); } [data-bs-theme="dark"] .tb-cpu-bilgi small { color: #E7A2AA; }
/* 10 CLOUD — AĞ DÜĞÜMLERİ */
.tb-merdiven.tb-sec-dugum { display: block; inline-size: 20rem; } .tb-dgm { display: block; inline-size: 100%; } .tb-dgm-hat { stroke: var(--cizgi); stroke-width: 2; } .tb-dgm-hat.dolu { stroke: var(--kr); } .tb-dgm-hat.zayif { stroke-dasharray: 3 4; opacity: .5; }
.tb-dgm-n { cursor: pointer; } .tb-dgm-n circle { fill: var(--yuz); stroke: var(--cizgi); stroke-width: 2; transition: all .2s ease; } .tb-dgm-n text { font: 700 11px var(--tb-font-govde); fill: var(--soft); } .tb-dgm-n text.e { font: 600 10px var(--tb-font-govde); fill: var(--soft); } .tb-dgm-n:hover circle { stroke: var(--mavi); } .tb-dgm-n.aktif circle { fill: var(--kr); stroke: #fff; filter: drop-shadow(0 0 6px rgba(196,22,43,.7)); } .tb-dgm-n.aktif text { fill: #fff; } .tb-dgm-n.aktif text.e { fill: var(--ink); } .tb-dgm-n:focus-visible { outline: none; } .tb-dgm-n:focus-visible circle { stroke: var(--mavi); stroke-width: 3; }
/* 11 AJANS — FİBER HATTI */
.tb-fbr { inline-size: 21rem; padding: .3rem 0 1.4rem; } .tb-fbr-hat { position: relative; block-size: 6px; margin: 1.2rem 1rem 0; border-radius: 3px; background: var(--cizgi); } .tb-fbr-isik { position: absolute; inset-block: 0; inset-inline-start: 0; inline-size: calc(var(--i) / (var(--n) - 1) * 100%); border-radius: 3px; background: linear-gradient(90deg, var(--kr2), var(--kr)); box-shadow: 0 0 10px rgba(196,22,43,.6); transition: inline-size .4s ease; }
.tb-fbr-nabiz { position: absolute; inset-block: -2px; inline-size: 26px; border-radius: 5px; background: linear-gradient(90deg, transparent, #fff, transparent); opacity: .9; animation: tb-fbr 1.8s linear infinite; mix-blend-mode: screen; }
@keyframes tb-fbr { from { inset-inline-start: 0; } to { inset-inline-start: calc(var(--i) / (var(--n) - 1) * 100% - 26px); } } @media (prefers-reduced-motion: reduce) { .tb-fbr-nabiz { display: none; } }
.tb-fbr-n { position: absolute; inset-block-start: -7px; inset-inline-start: calc(var(--k) / (var(--n) - 1) * 100%); transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: .3rem; border: 0; background: transparent; padding: 0; cursor: pointer; color: var(--soft); } .tb-fbr-n i { inline-size: 20px; block-size: 20px; border-radius: 50%; background: var(--yuz); border: 3px solid var(--cizgi); } .tb-fbr-n b { font-size: .76rem; font-weight: 600; white-space: nowrap; } .tb-fbr-n small { font-size: .6rem; font-weight: 700; } .tb-fbr-n.aktif { color: var(--ink); } .tb-fbr-n.aktif i { border-color: var(--kr); background: #fff; box-shadow: 0 0 0 4px rgba(196,22,43,.18), 0 0 12px var(--kr); } .tb-fbr-n.aktif small { color: var(--kr); } [data-bs-theme="dark"] .tb-fbr-n.aktif small { color: #E7A2AA; }
/* 16 E-TİCARET — SSL ASMA KİLİTLER */
.tb-sec-kilit { display: flex; gap: 10px; align-items: flex-end; } .tb-klt { display: flex; flex-direction: column; align-items: center; border: 0; background: transparent; padding: 0; cursor: pointer; }
.tb-klt-kemer { display: block; inline-size: 30px; block-size: 20px; border: 4px solid var(--soft); border-bottom: 0; border-radius: 15px 15px 0 0; transition: transform .25s ease, border-color .25s ease; transform-origin: 80% 100%; transform: rotate(-22deg) translate(2px, 4px); }
.tb-klt-govde { display: flex; flex-direction: column; align-items: center; gap: .1rem; min-inline-size: 4.4rem; padding: .55rem .5rem .45rem; border-radius: 8px; background: var(--yuz2); border: 1px solid var(--cizgi); color: var(--soft); } .tb-klt-govde b { font-size: .8rem; font-weight: 600; } .tb-klt-govde small { font-size: .6rem; font-weight: 700; min-block-size: .8rem; }
.tb-klt.aktif .tb-klt-kemer { transform: none; border-color: var(--kr); } .tb-klt.aktif .tb-klt-govde { background: linear-gradient(135deg, var(--kr2), var(--kr)); border-color: var(--kr); color: #fff; box-shadow: 0 10px 20px -10px rgba(196,22,43,.8); } .tb-klt:hover .tb-klt-kemer { transform: rotate(-10deg) translate(1px, 2px); }
/* 17 WORDPRESS — BLOK EDİTÖRÜ */
.tb-blk { display: grid; gap: 5px; inline-size: 17rem; } .tb-blk-b { display: grid; grid-template-columns: auto 1fr auto 24px; align-items: center; gap: .6rem; padding: .45rem .6rem; border: 1px solid var(--cizgi); border-radius: 6px; background: var(--yuz); color: var(--soft); font-size: .82rem; cursor: pointer; text-align: left; transition: all .2s ease; } .tb-blk-tut { font-style: normal; letter-spacing: -2px; color: var(--cizgi); } .tb-blk-b b { font-weight: 600; } .tb-blk-b small { font-size: .66rem; font-weight: 700; } .tb-blk-b em { display: grid; place-items: center; inline-size: 22px; block-size: 22px; border-radius: 4px; border: 1px solid var(--cizgi); font-style: normal; font-size: .9rem; }
.tb-blk-b.aktif { color: var(--ink); border-color: var(--mavi); box-shadow: 0 0 0 1px var(--mavi); } .tb-blk-b.aktif em { background: var(--kr); border-color: var(--kr); color: #fff; } .tb-blk-b.aktif small { color: var(--kr); } [data-bs-theme="dark"] .tb-blk-b.aktif small { color: #E7A2AA; } .tb-blk-b:hover:not(.aktif) { border-color: var(--mavi); }
/* 8 BAYİ — TERMİNAL */
.tb-trm2 { inline-size: 19rem; border-radius: 10px; overflow: hidden; border: 1px solid rgba(255,255,255,.14); background: #0b1324; color: #cfe3ff; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .76rem; box-shadow: 0 16px 30px -18px rgba(0,0,0,.8); } .tb-trm2-bar { display: flex; align-items: center; gap: 6px; padding: 6px 10px; background: #152038; } .tb-trm2-bar i { inline-size: 9px; block-size: 9px; border-radius: 50%; background: #3a4a66; } .tb-trm2-bar i:first-child { background: var(--kr); } .tb-trm2-bar span { margin-inline-start: auto; font-size: .64rem; color: rgba(255,255,255,.5); }
.tb-trm2-govde { padding: .6rem .8rem .7rem; } .tb-trm2-cmd { margin-bottom: .3rem; color: #9FD3FF; } .tb-trm2-cmd b { color: #fff; } .tb-trm2-s { display: grid; grid-template-columns: 10px 5.2rem 1fr auto; gap: .5rem; inline-size: 100%; padding: .15rem .2rem; border: 0; border-radius: 3px; background: transparent; color: rgba(255,255,255,.6); font: inherit; text-align: left; cursor: pointer; } .tb-trm2-s span { color: var(--kr); } .tb-trm2-s b { color: #cfe3ff; font-weight: 600; } .tb-trm2-s em { font-style: normal; } .tb-trm2-s small { color: #2BB673; font-size: .7rem; }
.tb-trm2-s.aktif { background: rgba(196,22,43,.18); color: #fff; } .tb-trm2-s:hover { background: rgba(255,255,255,.06); } .tb-trm2-out { margin-top: .35rem; color: #2BB673; } .tb-trm2-cur { display: inline-block; inline-size: 7px; block-size: 12px; margin-inline-start: 4px; vertical-align: -2px; background: #cfe3ff; animation: tb-cur 1s steps(2) infinite; }
@keyframes tb-cur { 50% { opacity: 0; } }
@media (max-width: 767.98px) { .tb-try, .tb-fbr, .tb-blk, .tb-trm2, .tb-sec-dugum { inline-size: 100%; max-inline-size: 22rem; } .tb-sec-kilit { justify-content: center; flex-wrap: wrap; } .tb-prt, .tb-sec-cekirdek { flex-direction: column; } }

/* ===== 7. KUŞAK (2026-10-20) — FİBER KABLO ===== */
.tb-merdiven svg [role="radio"] { cursor: pointer; outline: none; }
/* 1 WEB — FİBER DEMETİ */
.tb-merdiven.tb-sec-demet { display: block; inline-size: 22rem; } .tb-fdm { display: block; inline-size: 100%; } .tb-fdm-kilif { fill: #1a2740; stroke: rgba(255,255,255,.2); } .tb-fdm-kilif2 { fill: #0b1324; stroke: rgba(255,255,255,.25); }
.tb-fdm-d .k { fill: none; stroke: var(--cizgi); stroke-width: 5; stroke-linecap: round; } .tb-fdm-d .i { fill: none; stroke: transparent; stroke-width: 2; stroke-linecap: round; } .tb-fdm-d circle { fill: var(--cizgi); } .tb-fdm-d text { font: 600 11px var(--tb-font-govde); fill: var(--soft); }
.tb-fdm-d:hover .k { stroke: var(--mavi); } .tb-fdm-d.aktif .k { stroke: #5a1f27; } .tb-fdm-d.aktif .i { stroke: #fff; stroke-dasharray: 10 90; animation: tb-akis 1.4s linear infinite; filter: drop-shadow(0 0 4px var(--kr)); } .tb-fdm-d.aktif circle { fill: var(--kr); filter: drop-shadow(0 0 6px var(--kr)); } .tb-fdm-d.aktif text { fill: var(--ink); font-weight: 700; }
@keyframes tb-akis { to { stroke-dashoffset: -100; } } @media (prefers-reduced-motion: reduce) { .tb-fdm-d.aktif .i, .tb-ayr2-d.aktif .i { animation: none; stroke-dasharray: none; stroke: #fff; } }
/* 2 KURUMSAL — PATCH PANEL */
.tb-pch { display: flex; align-items: center; gap: 1rem; } .tb-pch-panel { position: relative; display: flex; gap: 8px; padding: 10px 18px; border-radius: 6px; background: #1a2740; border: 1px solid rgba(255,255,255,.14); box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 10px 20px -14px rgba(0,0,0,.8); } .tb-pch-vida { position: absolute; inset-block-start: 50%; inline-size: 6px; block-size: 6px; margin-top: -3px; border-radius: 50%; background: #0b1324; box-shadow: inset 0 0 0 1px rgba(255,255,255,.3); } .tb-pch-vida.l { inset-inline-start: 5px; } .tb-pch-vida.r { inset-inline-end: 5px; }
.tb-pch-p { display: flex; flex-direction: column; align-items: center; gap: 4px; border: 0; background: transparent; color: rgba(255,255,255,.55); cursor: pointer; padding: 0; } .tb-pch-yuva { position: relative; display: block; inline-size: 30px; block-size: 34px; border-radius: 3px; background: #0b1324; border: 1px solid rgba(255,255,255,.2); overflow: visible; } .tb-pch-jak { position: absolute; inset-inline: 7px; inset-block-start: 6px; block-size: 10px; border-radius: 2px; background: #223252; } .tb-pch-kablo { position: absolute; inset-inline-start: 50%; inset-block-start: 100%; inline-size: 5px; block-size: 0; margin-inline-start: -2.5px; border-radius: 0 0 3px 3px; background: #e9b400; transition: block-size .3s ease; } .tb-pch-p b { font-size: .66rem; font-weight: 600; }
.tb-pch-p.aktif { color: #fff; } .tb-pch-p.aktif .tb-pch-yuva { border-color: var(--kr); box-shadow: 0 0 10px rgba(196,22,43,.5); } .tb-pch-p.aktif .tb-pch-jak { background: var(--kr); box-shadow: 0 0 8px var(--kr); } .tb-pch-p.aktif .tb-pch-kablo { block-size: 16px; }
.tb-pch-bilgi { display: flex; flex-direction: column; gap: .15rem; } .tb-pch-bilgi b { font-size: .95rem; font-weight: 600; color: var(--ink); } .tb-pch-bilgi small { font-size: .72rem; font-weight: 700; color: var(--kr); } [data-bs-theme="dark"] .tb-pch-bilgi small { color: #E7A2AA; } .tb-pch-bilgi span { display: inline-flex; align-items: center; gap: .3rem; font-size: .62rem; font-weight: 700; letter-spacing: .08em; color: #2BB673; } .tb-pch-bilgi span i { inline-size: 6px; block-size: 6px; border-radius: 50%; background: #2BB673; box-shadow: 0 0 5px #2BB673; animation: tb-led 1.2s ease-in-out infinite; }
/* 9 WINDOWS — KABLO KESİTİ */
.tb-kst { display: flex; align-items: center; gap: 1rem; } .tb-kst svg { inline-size: 112px; block-size: 112px; } .tb-kst-kilif { fill: #1a2740; stroke: rgba(255,255,255,.2); stroke-width: 2; } .tb-kst-zirh { fill: none; stroke: rgba(255,255,255,.25); stroke-width: 6; stroke-dasharray: 4 3; } .tb-kst-dolgu { fill: #0b1324; }
.tb-kst-d .kap { fill: var(--cizgi); } .tb-kst-d .cek { fill: #0b1324; transition: fill .2s ease; } .tb-kst-d:hover .kap { fill: var(--mavi); } .tb-kst-d.aktif .kap { fill: #5a1f27; } .tb-kst-d.aktif .cek { fill: var(--kr); filter: drop-shadow(0 0 6px var(--kr)); }
.tb-kst-bilgi { display: flex; flex-direction: column; gap: .15rem; } .tb-kst-bilgi b { font-size: .95rem; font-weight: 600; color: var(--ink); } .tb-kst-bilgi small { font-size: .72rem; font-weight: 700; color: var(--kr); } [data-bs-theme="dark"] .tb-kst-bilgi small { color: #E7A2AA; } .tb-kst-sec { display: grid; grid-template-columns: 1fr 1fr; gap: .15rem .6rem; margin-top: .25rem; } .tb-kst-b { display: flex; align-items: center; gap: .4rem; padding: .15rem .3rem; border: 0; border-radius: 6px; background: transparent; color: var(--soft); font-size: .76rem; font-weight: 600; cursor: pointer; text-align: left; } .tb-kst-b i { inline-size: 9px; block-size: 9px; border-radius: 50%; background: var(--cizgi); } .tb-kst-b.aktif { color: var(--ink); } .tb-kst-b.aktif i { background: var(--kr); box-shadow: 0 0 5px var(--kr); }
/* 10 CLOUD — S KIVRIMLI HAT */
.tb-merdiven.tb-sec-kivrim { display: block; inline-size: 21rem; } .tb-kvr { display: block; inline-size: 100%; } .tb-kvr-kilif { fill: none; stroke: #1a2740; stroke-width: 12; stroke-linecap: round; } [data-bs-theme="dark"] .tb-kvr-kilif { stroke: #22304d; } .tb-kvr-cam { fill: none; stroke: var(--cizgi); stroke-width: 4; stroke-linecap: round; } .tb-kvr-isik { fill: none; stroke: var(--kr); stroke-width: 4; stroke-linecap: round; filter: drop-shadow(0 0 5px rgba(196,22,43,.7)); transition: stroke-dashoffset .6s ease; }
.tb-kvr-d circle { fill: var(--yuz); stroke: var(--cizgi); stroke-width: 3; } .tb-kvr-d text { font: 600 11px var(--tb-font-govde); fill: var(--soft); } .tb-kvr-d text.e { font-size: 9.5px; font-weight: 700; } .tb-kvr-d:hover circle { stroke: var(--mavi); } .tb-kvr-d.aktif circle { fill: var(--kr); stroke: #fff; filter: drop-shadow(0 0 6px var(--kr)); } .tb-kvr-d.aktif text { fill: var(--ink); } .tb-kvr-d.aktif text.e { fill: var(--kr); } [data-bs-theme="dark"] .tb-kvr-d.aktif text.e { fill: #E7A2AA; }
/* 11 AJANS — AYIRICI (splitter) */
.tb-merdiven.tb-sec-ayirici { display: block; inline-size: 22rem; } .tb-ayr2 { display: block; inline-size: 100%; } .tb-ayr2-giris { stroke: var(--kr); stroke-width: 5; stroke-linecap: round; filter: drop-shadow(0 0 4px rgba(196,22,43,.6)); } .tb-ayr2-kutu { fill: #1a2740; stroke: rgba(255,255,255,.25); } .tb-ayr2-t { font: 700 10px ui-monospace, monospace; fill: #9FD3FF; }
.tb-ayr2-d .k { fill: none; stroke: var(--cizgi); stroke-width: 4; stroke-linecap: round; } .tb-ayr2-d .i { fill: none; stroke: transparent; stroke-width: 2; } .tb-ayr2-d .j { fill: var(--cizgi); } .tb-ayr2-d text { font: 600 11px var(--tb-font-govde); fill: var(--soft); }
.tb-ayr2-d:hover .k { stroke: var(--mavi); } .tb-ayr2-d.aktif .k { stroke: #5a1f27; } .tb-ayr2-d.aktif .i { stroke: #fff; stroke-dasharray: 8 70; animation: tb-akis 1.2s linear infinite; filter: drop-shadow(0 0 4px var(--kr)); } .tb-ayr2-d.aktif .j { fill: var(--kr); filter: drop-shadow(0 0 5px var(--kr)); } .tb-ayr2-d.aktif text { fill: var(--ink); font-weight: 700; }
/* 16 E-TİCARET — MAKARA */
.tb-mkr { display: flex; align-items: center; gap: 0; inline-size: 22rem; } .tb-mkr-makara { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; inline-size: 68px; block-size: 68px; border-radius: 50%; background: #1a2740; border: 4px solid #223252; color: #fff; flex: none; } .tb-mkr-sarim { position: absolute; inset: 6px; border-radius: 50%; border: 6px solid #e9b400; opacity: .9; } .tb-mkr-makara b { font: 700 1.1rem/1 var(--tb-font-baslik); position: relative; } .tb-mkr-makara small { font-size: .56rem; position: relative; color: rgba(255,255,255,.7); }
.tb-mkr-kablo { position: relative; flex: 1 1 auto; block-size: 6px; margin: 0 .8rem 0 -2px; border-radius: 3px; background: var(--cizgi); } .tb-mkr-hat { position: absolute; inset-block: 0; inset-inline-start: 0; inline-size: var(--u); border-radius: 3px; background: #e9b400; box-shadow: 0 0 8px rgba(233,180,0,.5); transition: inline-size .45s ease; }
.tb-mkr-d { position: absolute; inset-block-start: -8px; inset-inline-start: var(--k); transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: .3rem; border: 0; background: transparent; padding: 0; cursor: pointer; color: var(--soft); } .tb-mkr-d i { inline-size: 22px; block-size: 22px; border-radius: 4px; background: var(--yuz); border: 2px solid var(--cizgi); } .tb-mkr-d b { font-size: .74rem; font-weight: 600; white-space: nowrap; } .tb-mkr-d small { font-size: .6rem; font-weight: 700; } .tb-mkr-d.aktif { color: var(--ink); } .tb-mkr-d.aktif i { border-color: var(--kr); background: var(--kr); box-shadow: 0 0 10px rgba(196,22,43,.6); } .tb-mkr-d.aktif small { color: var(--kr); } [data-bs-theme="dark"] .tb-mkr-d.aktif small { color: #E7A2AA; } .tb-mkr-d:first-child { transform: translateX(-20%); } .tb-sec-makara { padding-bottom: 1.6rem; }
/* 17 WORDPRESS — KONEKTÖRLER */
.tb-knk { display: flex; align-items: center; gap: 0; } .tb-knk-soket { position: relative; inline-size: 26px; block-size: 110px; border-radius: 6px 0 0 6px; background: #1a2740; border: 1px solid rgba(255,255,255,.2); border-right: 0; flex: none; } .tb-knk-lazer { position: absolute; inset-inline-start: 6px; inset-block-start: 10px; inline-size: 6px; block-size: 6px; border-radius: 50%; background: var(--kr); box-shadow: 0 0 8px var(--kr); animation: tb-led 1s ease-in-out infinite; }
.tb-knk-ler { display: grid; gap: 4px; } .tb-knk-k { display: flex; align-items: center; gap: 0; border: 0; background: transparent; padding: 0; cursor: pointer; color: var(--soft); transition: transform .25s ease; transform: translateX(14px); } .tb-knk-uc { inline-size: 14px; block-size: 14px; border-radius: 2px; background: #223252; border: 1px solid rgba(255,255,255,.25); } .tb-knk-govde { display: flex; align-items: center; gap: .5rem; padding: .2rem .6rem; border-radius: 4px; background: var(--yuz2); border: 1px solid var(--cizgi); } .tb-knk-govde b { font-size: .76rem; font-weight: 600; } .tb-knk-govde small { font-size: .6rem; font-weight: 700; } .tb-knk-kablo { inline-size: 26px; block-size: 5px; border-radius: 0 3px 3px 0; background: #e9b400; }
.tb-knk-k.aktif { transform: translateX(0); color: var(--ink); } .tb-knk-k.aktif .tb-knk-uc { background: var(--kr); border-color: var(--kr); box-shadow: 0 0 8px var(--kr); } .tb-knk-k.aktif .tb-knk-govde { border-color: var(--kr); background: rgba(196,22,43,.1); } .tb-knk-k.aktif small { color: var(--kr); } [data-bs-theme="dark"] .tb-knk-k.aktif small { color: #E7A2AA; } .tb-knk-k:hover { transform: translateX(6px); }
@media (max-width: 767.98px) { .tb-sec-demet, .tb-sec-kivrim, .tb-sec-ayirici, .tb-mkr { inline-size: 100%; max-inline-size: 22rem; } .tb-pch, .tb-kst { flex-direction: column; } }
.tb-merdiven.tb-sec-demet { inline-size: 24rem; } .tb-merdiven.tb-sec-ayirici { inline-size: 25rem; } .tb-merdiven.tb-sec-kivrim { inline-size: 22rem; }

/* ===== 8. KUŞAK (2026-10-20) — MARKA KİMLİĞİ ===== */
/* 1 WEB — İZOMETRİK LOGO KÜPLERİ */
.tb-merdiven.tb-sec-izo { display: block; inline-size: 20rem; } .tb-izo-ust { display: flex; justify-content: space-between; gap: 1rem; margin-bottom: .2rem; } .tb-izo-ust b { font-size: .92rem; font-weight: 600; color: var(--ink); white-space: nowrap; } .tb-izo-ust span { font-size: .72rem; font-weight: 700; color: var(--kr); } [data-bs-theme="dark"] .tb-izo-ust span { color: #E7A2AA; }
.tb-izo { display: flex; align-items: flex-end; gap: 10px; } .tb-izo-s { display: flex; flex-direction: column; align-items: center; gap: .2rem; border: 0; background: transparent; padding: 0; cursor: pointer; color: var(--soft); } .tb-izo-yigin { position: relative; display: block; inline-size: 44px; block-size: 72px; }
.tb-izo-kup { position: absolute; inset-inline-start: 0; inset-block-end: calc(var(--z) * 13px); inline-size: 44px; block-size: 30px; } .tb-izo-kup u { position: absolute; display: block; } .tb-izo-kup u:nth-child(1) { inset-inline: 0; inset-block-start: 0; block-size: 16px; background: var(--c1, var(--yuz2)); clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); } .tb-izo-kup u:nth-child(2) { inset-inline-start: 0; inset-block-start: 8px; inline-size: 22px; block-size: 22px; background: var(--c2, var(--cizgi)); clip-path: polygon(0 0, 100% 36%, 100% 100%, 0 64%); } .tb-izo-kup u:nth-child(3) { inset-inline-end: 0; inset-block-start: 8px; inline-size: 22px; block-size: 22px; background: var(--c3, var(--yuz)); clip-path: polygon(0 36%, 100% 0, 100% 64%, 0 100%); }
.tb-izo-s.dolu .tb-izo-kup { --c1: #D04555; --c2: #9E1322; --c3: #C4162B; } .tb-izo-s.aktif .tb-izo-kup { --c1: #E7A2AA; --c2: #C4162B; --c3: #D04555; filter: drop-shadow(0 6px 10px rgba(196,22,43,.45)); } .tb-izo-s b { font-size: .78rem; font-weight: 600; } .tb-izo-s small { font-size: .6rem; font-weight: 700; min-block-size: .8rem; } .tb-izo-s.aktif { color: var(--ink); } .tb-izo-s.aktif small { color: var(--kr); } [data-bs-theme="dark"] .tb-izo-s.aktif small { color: #E7A2AA; } .tb-izo-s:hover .tb-izo-yigin { transform: translateY(-3px); }
/* 2 KURUMSAL — TEK ÇATI, KATLAR */
.tb-bna { display: flex; align-items: flex-end; gap: 1rem; } .tb-bna-govde { position: relative; display: flex; flex-direction: column; inline-size: 12rem; padding: 0 8px 10px; border-radius: 4px 4px 0 0; background: var(--yuz2); border: 1px solid var(--cizgi); border-bottom-width: 4px; } .tb-bna-cati { display: block; block-size: 14px; margin: -14px -9px 6px; background: var(--ink); clip-path: polygon(50% 0, 100% 100%, 0 100%); opacity: .85; } [data-bs-theme="dark"] .tb-bna-cati { background: #9FD3FF; }
.tb-bna-kat { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .5rem; padding: .3rem .5rem; margin-bottom: 3px; border: 1px solid var(--cizgi); border-radius: 3px; background: var(--yuz); color: var(--soft); font-size: .76rem; cursor: pointer; text-align: left; transition: all .2s ease; } .tb-bna-pencereler { display: flex; gap: 3px; } .tb-bna-pencereler i { inline-size: 7px; block-size: 9px; border-radius: 1px; background: var(--cizgi); } .tb-bna-kat b { font-weight: 600; } .tb-bna-kat small { font-size: .6rem; font-weight: 700; }
.tb-bna-kat.aktif { color: var(--ink); border-color: var(--kr); background: rgba(196,22,43,.08); } .tb-bna-kat.aktif .tb-bna-pencereler i { background: #FFD36A; box-shadow: 0 0 6px rgba(255,211,106,.8); } .tb-bna-kat.aktif small { color: var(--kr); } [data-bs-theme="dark"] .tb-bna-kat.aktif small { color: #E7A2AA; } .tb-bna-kapi { display: block; inline-size: 18px; block-size: 14px; margin: 0 auto -10px; border-radius: 3px 3px 0 0; background: var(--kr); }
.tb-bna-bilgi { display: flex; flex-direction: column; gap: .15rem; padding-bottom: .6rem; } .tb-bna-bilgi b { font-size: .95rem; font-weight: 600; color: var(--ink); } .tb-bna-bilgi small { font-size: .72rem; font-weight: 700; color: var(--kr); } [data-bs-theme="dark"] .tb-bna-bilgi small { color: #E7A2AA; }
/* 9 WINDOWS — PİST IŞIKLARI */
.tb-pst { inline-size: 21rem; padding: .6rem 0 1.5rem; } .tb-pst-yol { position: relative; block-size: 34px; margin: 0 1rem; border-radius: 4px; background: #1a2740; border: 1px solid rgba(255,255,255,.14); } .tb-pst-cizgi { position: absolute; inset-inline: 10px; inset-block-start: 50%; block-size: 2px; margin-top: -1px; background: repeating-linear-gradient(90deg, rgba(255,255,255,.5) 0 12px, transparent 12px 22px); }
.tb-pst-d { position: absolute; inset-block-start: -8px; inset-inline-start: calc(var(--k) / (var(--n) - 1) * 100%); transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 0; border: 0; background: transparent; padding: 0; cursor: pointer; color: var(--soft); } .tb-pst-d i { display: block; inline-size: 8px; block-size: 8px; border-radius: 50%; background: rgba(255,255,255,.2); transition: all .2s ease; } .tb-pst-d .a { margin-top: 34px; } .tb-pst-d b { margin-top: .5rem; font-size: .76rem; font-weight: 600; white-space: nowrap; } .tb-pst-d small { font-size: .6rem; font-weight: 700; }
.tb-pst-d.dolu i { background: #FFD36A; box-shadow: 0 0 6px rgba(255,211,106,.8); } .tb-pst-d.aktif i { background: var(--kr); box-shadow: 0 0 10px var(--kr); animation: tb-led 1s ease-in-out infinite; } .tb-pst-d.aktif { color: var(--ink); } .tb-pst-d.aktif small { color: var(--kr); } [data-bs-theme="dark"] .tb-pst-d.aktif small { color: #E7A2AA; } .tb-pst-d:first-child { transform: translateX(-30%); } .tb-pst-d:last-child { transform: translateX(-70%); }
/* 10 CLOUD — KÜRE VE YÖRÜNGELER */
.tb-yrg { display: flex; align-items: center; gap: 1.2rem; } .tb-yrg-sahne { position: relative; inline-size: 150px; block-size: 150px; display: grid; place-items: center; } .tb-yrg-kure { inline-size: 40px; block-size: 40px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, #AFC8EA 45%, #3564AF 100%); box-shadow: 0 0 24px rgba(91,141,239,.45); } [data-bs-theme="dark"] .tb-yrg-kure { background: radial-gradient(circle at 35% 30%, #cfe3ff, #3564AF 55%, #13213A 100%); }
.tb-yrg-halka { position: absolute; inline-size: calc(var(--r) * 2); block-size: calc(var(--r) * 2); border-radius: 50%; border: 1px solid var(--cizgi); transform: rotateX(62deg); animation: tb-yrg var(--t) linear infinite; } .tb-yrg-halka u { position: absolute; inset-block-start: -4px; inset-inline-start: calc(50% - 4px); inline-size: 8px; block-size: 8px; border-radius: 50%; background: var(--soft); } .tb-yrg-halka.aktif { border-color: var(--kr); border-width: 2px; } .tb-yrg-halka.aktif u { background: var(--kr); box-shadow: 0 0 8px var(--kr); inline-size: 10px; block-size: 10px; }
@keyframes tb-yrg { to { transform: rotateX(62deg) rotateZ(360deg); } } @media (prefers-reduced-motion: reduce) { .tb-yrg-halka { animation: none; } }
.tb-yrg-bilgi { display: flex; flex-direction: column; gap: .15rem; } .tb-yrg-bilgi b { font-size: .95rem; font-weight: 600; color: var(--ink); } .tb-yrg-bilgi small { font-size: .72rem; font-weight: 700; color: var(--kr); } [data-bs-theme="dark"] .tb-yrg-bilgi small { color: #E7A2AA; } .tb-yrg-sec { display: grid; grid-template-columns: 1fr 1fr; gap: .15rem .6rem; margin-top: .3rem; } .tb-yrg-b { display: flex; align-items: center; gap: .4rem; padding: .15rem .3rem; border: 0; border-radius: 6px; background: transparent; color: var(--soft); font-size: .76rem; font-weight: 600; cursor: pointer; text-align: left; } .tb-yrg-b i { inline-size: 9px; block-size: 9px; border-radius: 50%; border: 1px solid var(--cizgi); } .tb-yrg-b.aktif { color: var(--ink); } .tb-yrg-b.aktif i { background: var(--kr); border-color: var(--kr); }
/* 11 AJANS — DALGA FORMU */
.tb-dlg { display: flex; gap: 8px; align-items: flex-end; } .tb-dlg-s { display: flex; flex-direction: column; align-items: center; gap: .3rem; padding: .5rem .5rem .4rem; border: 1px solid var(--cizgi); border-radius: 10px; background: var(--yuz); color: var(--soft); cursor: pointer; transition: all .2s ease; } .tb-dlg-cubuklar { display: flex; align-items: center; gap: 2px; block-size: 30px; } .tb-dlg-cubuklar i { display: block; inline-size: 3px; block-size: var(--h); border-radius: 2px; background: var(--cizgi); } .tb-dlg-s b { font-size: .76rem; font-weight: 600; } .tb-dlg-s small { font-size: .6rem; font-weight: 700; min-block-size: .8rem; }
.tb-dlg-s.aktif { color: var(--ink); border-color: var(--kr); background: rgba(196,22,43,.07); } .tb-dlg-s.aktif .tb-dlg-cubuklar i { background: var(--kr); animation: tb-dlg .9s ease-in-out infinite alternate; } .tb-dlg-s.aktif .tb-dlg-cubuklar i:nth-child(odd) { animation-delay: -.45s; } .tb-dlg-s.aktif small { color: var(--kr); } [data-bs-theme="dark"] .tb-dlg-s.aktif small { color: #E7A2AA; } .tb-dlg-s:hover { border-color: var(--mavi); }
@keyframes tb-dlg { from { transform: scaleY(.55); } to { transform: scaleY(1.15); } } @media (prefers-reduced-motion: reduce) { .tb-dlg-s.aktif .tb-dlg-cubuklar i { animation: none; } }
/* 16 E-TİCARET — KOLİ YIĞINI */
.tb-ktu { display: flex; gap: 10px; align-items: flex-end; } .tb-ktu-s { display: flex; flex-direction: column; align-items: center; gap: .25rem; border: 0; background: transparent; padding: 0; cursor: pointer; color: var(--soft); } .tb-ktu-yigin { display: flex; flex-direction: column-reverse; gap: 2px; } .tb-ktu-koli { position: relative; display: block; inline-size: 40px; block-size: 16px; border-radius: 2px; background: #C99A5B; border: 1px solid #A87B3E; } .tb-ktu-koli u { position: absolute; inset-inline: 0; inset-block-start: 50%; block-size: 3px; margin-top: -1.5px; background: rgba(255,255,255,.55); }
.tb-ktu-s b { font-size: .78rem; font-weight: 600; } .tb-ktu-s small { font-size: .6rem; font-weight: 700; min-block-size: .8rem; } .tb-ktu-s.aktif { color: var(--ink); } .tb-ktu-s.aktif .tb-ktu-koli { background: var(--kr2); border-color: var(--kr); box-shadow: 0 4px 8px -4px rgba(196,22,43,.6); } .tb-ktu-s.aktif small { color: var(--kr); } [data-bs-theme="dark"] .tb-ktu-s.aktif small { color: #E7A2AA; } .tb-ktu-s:hover .tb-ktu-yigin { transform: translateY(-3px); }
/* 17 WORDPRESS — AY ISI HARİTASI */
.tb-isi { inline-size: 20rem; } .tb-isi-ust { display: flex; justify-content: space-between; gap: 1rem; margin-bottom: .45rem; } .tb-isi-ust b { font-size: .92rem; font-weight: 600; color: var(--ink); white-space: nowrap; } .tb-isi-ust span { font-size: .72rem; font-weight: 700; color: var(--kr); } [data-bs-theme="dark"] .tb-isi-ust span { color: #E7A2AA; }
.tb-isi-izgara { display: grid; grid-template-columns: repeat(12, 1fr); gap: 3px; } .tb-isi-izgara i { display: block; aspect-ratio: 1; border-radius: 3px; background: var(--cizgi); transition: background .25s ease; transition-delay: calc(var(--d) * 12ms); } .tb-isi-izgara i.dolu { background: var(--kr); } .tb-isi-izgara i.dolu:nth-child(-n+12) { background: #E7A2AA; } .tb-isi-izgara i.dolu:nth-child(n+13):nth-child(-n+24) { background: #D04555; }
.tb-isi-sec { display: flex; gap: 4px; margin-top: .5rem; } .tb-isi-b { flex: 1 1 0; padding: .3rem 0; border: 1px solid var(--cizgi); border-radius: 6px; background: var(--yuz); color: var(--soft); font-size: .74rem; font-weight: 600; cursor: pointer; } .tb-isi-b.aktif { background: var(--kr); border-color: var(--kr); color: #fff; }
@media (max-width: 767.98px) { .tb-sec-izo, .tb-pst, .tb-isi { inline-size: 100%; max-inline-size: 22rem; } .tb-izo, .tb-dlg, .tb-ktu { justify-content: center; flex-wrap: wrap; } .tb-bna, .tb-yrg { flex-direction: column; align-items: center; } }

/* ===== 9. KUŞAK (2026-10-20) — HİPNOTİK ===== */
/* 1 WEB — KUZEY IŞIKLARI */
.tb-merdiven.tb-sec-aurora { display: block; inline-size: 21rem; } .tb-aur-serit { position: relative; block-size: 44px; border-radius: 22px; overflow: hidden; background: #0b1324; border: 1px solid rgba(255,255,255,.12); }
.tb-aur-isik { position: absolute; inset-block: -20px; inline-size: 60%; filter: blur(14px); opacity: .8; mix-blend-mode: screen; animation: tb-aur 7s ease-in-out infinite alternate; } .tb-aur-isik.a { inset-inline-start: -10%; background: linear-gradient(90deg, #3564AF, #5B8DEF, transparent); } .tb-aur-isik.b { inset-inline-start: 30%; background: linear-gradient(90deg, transparent, #C4162B, #E7A2AA, transparent); animation-duration: 9s; animation-delay: -3s; } .tb-aur-isik.c { inset-inline-start: 55%; background: linear-gradient(90deg, transparent, #2BB673, #9FD3FF); animation-duration: 11s; animation-delay: -6s; }
@keyframes tb-aur { from { transform: translateX(-12%) skewX(-10deg); } to { transform: translateX(14%) skewX(10deg); } }
.tb-aur-imlec { position: absolute; inset-block: 6px; inset-inline-start: calc(6px + var(--i) * ((100% - 12px) / var(--n))); inline-size: calc((100% - 12px) / var(--n)); border-radius: 16px; border: 2px solid #fff; box-shadow: 0 0 14px rgba(255,255,255,.6), inset 0 0 14px rgba(255,255,255,.2); transition: inset-inline-start .4s cubic-bezier(.2,.9,.3,1.2); }
.tb-aur-alt { display: grid; grid-template-columns: repeat(var(--n), 1fr); margin-top: .35rem; } .tb-aur-b { display: flex; flex-direction: column; align-items: center; gap: .1rem; padding: .2rem 0; border: 0; background: transparent; color: var(--soft); cursor: pointer; } .tb-aur-b b { font-size: .8rem; font-weight: 600; } .tb-aur-b small { font-size: .62rem; font-weight: 700; } .tb-aur-b.aktif { color: var(--ink); } .tb-aur-b.aktif small { color: var(--kr); } [data-bs-theme="dark"] .tb-aur-b.aktif small { color: #E7A2AA; }
@media (prefers-reduced-motion: reduce) { .tb-aur-isik { animation: none; } }
/* 2 KURUMSAL — LİKİT DOLGU */
.tb-lkt { display: flex; align-items: center; gap: 1rem; } .tb-lkt-tank { position: relative; inline-size: 7.5rem; block-size: 120px; border-radius: 12px; border: 2px solid var(--cizgi); background: var(--yuz); overflow: hidden; }
.tb-lkt-sivi { position: absolute; inset-inline: 0; inset-block-end: 0; block-size: var(--p); background: linear-gradient(180deg, var(--kr2), var(--kr)); transition: block-size .7s cubic-bezier(.2,.9,.3,1.1); } .tb-lkt-sivi i { position: absolute; inset-block-start: -12px; inset-inline-start: -50%; inline-size: 200%; block-size: 24px; border-radius: 45%; background: var(--yuz); animation: tb-lkt 4s linear infinite; opacity: .95; } .tb-lkt-sivi .d2 { inset-block-start: -8px; animation-duration: 6s; animation-direction: reverse; opacity: .5; }
@keyframes tb-lkt { to { transform: translateX(25%) rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .tb-lkt-sivi i { animation: none; } }
.tb-lkt-olcek { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-around; padding: 4px 8px; } .tb-lkt-c { display: flex; align-items: center; gap: .4rem; border: 0; background: transparent; padding: 0; color: var(--ink); cursor: pointer; mix-blend-mode: difference; } .tb-lkt-c i { inline-size: 10px; block-size: 2px; background: #fff; } .tb-lkt-c b { font-size: .76rem; font-weight: 600; color: #fff; } .tb-lkt-c.aktif b { font-weight: 700; text-decoration: underline; }
.tb-lkt-bilgi { display: flex; flex-direction: column; gap: .15rem; } .tb-lkt-bilgi b { font-size: .95rem; font-weight: 600; color: var(--ink); } .tb-lkt-bilgi small { font-size: .72rem; font-weight: 700; color: var(--kr); } [data-bs-theme="dark"] .tb-lkt-bilgi small { color: #E7A2AA; }
/* 9 WINDOWS — SPİRAL */
.tb-spr { display: flex; align-items: center; gap: 1rem; } .tb-spr svg { inline-size: 118px; block-size: 118px; animation: tb-spr 24s linear infinite; } @keyframes tb-spr { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .tb-spr svg { animation: none; } }
.tb-spr-iz { fill: none; stroke: var(--cizgi); stroke-width: 6; stroke-linecap: round; } .tb-spr-seg { fill: none; stroke: transparent; stroke-width: 10; stroke-linecap: round; cursor: pointer; } .tb-spr-seg:hover { stroke: rgba(53,100,175,.45); } .tb-spr-seg.aktif { stroke: var(--kr); filter: drop-shadow(0 0 6px rgba(196,22,43,.7)); }
.tb-spr-bilgi { display: flex; flex-direction: column; gap: .15rem; } .tb-spr-bilgi b { font-size: .95rem; font-weight: 600; color: var(--ink); } .tb-spr-bilgi small { font-size: .72rem; font-weight: 700; color: var(--kr); } [data-bs-theme="dark"] .tb-spr-bilgi small { color: #E7A2AA; } .tb-spr-sec { display: flex; gap: 4px; margin-top: .3rem; } .tb-spr-b { padding: .26rem .5rem; border: 1px solid var(--cizgi); border-radius: 6px; background: var(--yuz); color: var(--soft); font-size: .72rem; font-weight: 600; cursor: pointer; } .tb-spr-b.aktif { background: var(--kr); border-color: var(--kr); color: #fff; }
/* 10 CLOUD — DALGACIKLAR */
.tb-dlc { display: flex; align-items: center; gap: 1rem; } .tb-dlc-sahne { position: relative; inline-size: 160px; block-size: 160px; display: grid; place-items: center; } .tb-dlc-merkez { inline-size: 14px; block-size: 14px; border-radius: 50%; background: var(--kr); box-shadow: 0 0 12px var(--kr); }
.tb-dlc-h { position: absolute; inline-size: calc(var(--r) * 2); block-size: calc(var(--r) * 2); border-radius: 50%; border: 2px solid var(--cizgi); background: transparent; cursor: pointer; padding: 0; animation: tb-dlc 3.2s ease-out infinite; animation-delay: var(--g); } .tb-dlc-h span { position: absolute; inset-block-start: -9px; inset-inline-start: 50%; transform: translateX(-50%); padding: 0 .35rem; border-radius: 4px; background: var(--yuz); font-size: .62rem; font-weight: 600; color: var(--soft); white-space: nowrap; }
@keyframes tb-dlc { 0% { transform: scale(.92); opacity: .5; } 50% { opacity: 1; } 100% { transform: scale(1.06); opacity: .5; } } @media (prefers-reduced-motion: reduce) { .tb-dlc-h { animation: none; } }
.tb-dlc-h:hover { border-color: var(--mavi); } .tb-dlc-h.aktif { border-color: var(--kr); border-width: 3px; box-shadow: 0 0 0 4px rgba(196,22,43,.15), 0 0 16px rgba(196,22,43,.45); animation: none; } .tb-dlc-h.aktif span { color: var(--ink); background: var(--kr); color: #fff; }
.tb-dlc-bilgi { display: flex; flex-direction: column; gap: .15rem; } .tb-dlc-bilgi b { font-size: .95rem; font-weight: 600; color: var(--ink); } .tb-dlc-bilgi small { font-size: .72rem; font-weight: 700; color: var(--kr); } [data-bs-theme="dark"] .tb-dlc-bilgi small { color: #E7A2AA; }
/* 11 AJANS — MÜREKKEP DAMLASI */
.tb-sec-damla { display: flex; gap: 10px; align-items: flex-start; } .tb-dml { display: flex; flex-direction: column; align-items: center; gap: .25rem; border: 0; background: transparent; padding: 0; cursor: pointer; color: var(--soft); }
.tb-dml-blob { display: flex; flex-direction: column; align-items: center; justify-content: center; inline-size: 60px; block-size: 60px; background: var(--yuz2); border: 1px solid var(--cizgi); color: var(--ink); border-radius: 60% 40% 55% 45% / 50% 60% 40% 50%; animation: tb-blob 8s ease-in-out infinite; animation-delay: var(--g); transition: background .3s ease; } .tb-dml-blob b { font: 700 1.3rem/1 var(--tb-font-baslik); } .tb-dml-blob em { font-style: normal; font-size: .6rem; color: var(--soft); }
@keyframes tb-blob { 0%, 100% { border-radius: 60% 40% 55% 45% / 50% 60% 40% 50%; } 33% { border-radius: 45% 55% 40% 60% / 60% 45% 55% 40%; } 66% { border-radius: 55% 45% 60% 40% / 40% 55% 45% 60%; } } @media (prefers-reduced-motion: reduce) { .tb-dml-blob { animation: none; } }
.tb-dml small { font-size: .6rem; font-weight: 700; min-block-size: .8rem; } .tb-dml.aktif .tb-dml-blob { background: radial-gradient(circle at 35% 30%, #E7A2AA, var(--kr) 70%); border-color: var(--kr); color: #fff; box-shadow: 0 10px 22px -10px rgba(196,22,43,.8); } .tb-dml.aktif .tb-dml-blob em { color: rgba(255,255,255,.85); } .tb-dml.aktif { color: var(--ink); } .tb-dml.aktif small { color: var(--kr); } [data-bs-theme="dark"] .tb-dml.aktif small { color: #E7A2AA; } .tb-dml:hover .tb-dml-blob { transform: scale(1.06); }
/* 16 E-TİCARET — NEON TABELA */
.tb-sec-neon { display: flex; gap: 10px; padding: 10px 12px; border-radius: 12px; background: #0b1324; border: 1px solid rgba(255,255,255,.1); } .tb-neo { display: flex; flex-direction: column; align-items: center; gap: .2rem; min-inline-size: 4.6rem; padding: .5rem .5rem .4rem; border: 2px solid rgba(255,255,255,.14); border-radius: 10px; background: transparent; color: rgba(255,255,255,.35); cursor: pointer; font-family: var(--tb-font-baslik); transition: all .25s ease; } .tb-neo b { font-size: .9rem; font-weight: 700; letter-spacing: .06em; } .tb-neo small { font-size: .6rem; font-weight: 700; min-block-size: .8rem; font-family: var(--tb-font-govde); }
.tb-neo.aktif { color: #fff; border-color: var(--kr2); text-shadow: 0 0 6px #fff, 0 0 14px var(--kr), 0 0 28px var(--kr); box-shadow: 0 0 10px rgba(196,22,43,.6), inset 0 0 10px rgba(196,22,43,.35); animation: tb-neon 3s ease-in-out infinite; animation-delay: var(--g); } .tb-neo.aktif small { color: #E7A2AA; } .tb-neo:hover:not(.aktif) { color: rgba(255,255,255,.7); border-color: rgba(255,255,255,.3); }
@keyframes tb-neon { 0%, 100% { opacity: 1; } 92% { opacity: 1; } 94% { opacity: .55; } 96% { opacity: 1; } 98% { opacity: .75; } } @media (prefers-reduced-motion: reduce) { .tb-neo.aktif { animation: none; } }
/* 17 WORDPRESS — 3B ÇEVRİLEN KARTLAR */
.tb-sec-flip { display: flex; gap: 10px; perspective: 700px; } .tb-flp { inline-size: 4.6rem; block-size: 4.6rem; border: 0; background: transparent; padding: 0; cursor: pointer; } .tb-flp-ic { position: relative; display: block; inline-size: 100%; block-size: 100%; transform-style: preserve-3d; transition: transform .6s cubic-bezier(.2,.9,.3,1.1); } .tb-flp.aktif .tb-flp-ic { transform: rotateY(180deg); } .tb-flp:hover:not(.aktif) .tb-flp-ic { transform: rotateY(-12deg); }
.tb-flp-on, .tb-flp-arka { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .1rem; border-radius: 10px; backface-visibility: hidden; -webkit-backface-visibility: hidden; } .tb-flp-on { background: var(--yuz); border: 1px solid var(--cizgi); color: var(--ink); } .tb-flp-on b { font: 700 1.5rem/1 var(--tb-font-baslik); } .tb-flp-on em { font-style: normal; font-size: .64rem; color: var(--soft); }
.tb-flp-arka { transform: rotateY(180deg); background: linear-gradient(135deg, var(--kr2), var(--kr)); color: #fff; box-shadow: 0 12px 22px -12px rgba(196,22,43,.8); } .tb-flp-arka small { font-size: .78rem; font-weight: 700; } .tb-flp-arka em { font-style: normal; font-size: .62rem; opacity: .85; }
@media (max-width: 767.98px) { .tb-sec-aurora { inline-size: 100%; } .tb-sec-damla, .tb-sec-neon, .tb-sec-flip { justify-content: center; flex-wrap: wrap; } .tb-lkt, .tb-spr, .tb-dlc { flex-direction: column; } }

/* ===== 10. KUŞAK (2026-10-20) — İNDİRİM HEYECANI ===== */
/* 1 WEB — KUMBARA SAYACI */
.tb-kmb { display: flex; align-items: center; gap: 1rem; } .tb-kmb-kutu { position: relative; inline-size: 9.5rem; padding: 1.1rem .8rem .7rem; border-radius: 14px; background: linear-gradient(160deg, #1B3F6B, #13213A); border: 1px solid rgba(159,211,255,.25); box-shadow: 0 16px 30px -18px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,255,255,.1); overflow: hidden; } .tb-kmb-yarik { position: absolute; inset-block-start: 6px; inset-inline-start: 50%; inline-size: 34px; block-size: 5px; margin-inline-start: -17px; border-radius: 3px; background: #06101f; box-shadow: inset 0 1px 2px rgba(0,0,0,.8); }
.tb-kmb-para { position: absolute; inset-block-start: -14px; inset-inline-start: 50%; inline-size: 22px; block-size: 8px; margin-inline-start: -11px; border-radius: 50%; background: radial-gradient(circle at 40% 40%, #FFE08A, #D9A400); animation: tb-para 2.4s ease-in infinite; } .tb-kmb-para.p2 { animation-delay: .8s; } .tb-kmb-para.p3 { animation-delay: 1.6s; }
@keyframes tb-para { 0% { transform: translateY(0) rotateX(0); opacity: 0; } 15% { opacity: 1; } 45% { transform: translateY(14px) rotateX(70deg); opacity: 1; } 55% { opacity: 0; } 100% { opacity: 0; } } @media (prefers-reduced-motion: reduce) { .tb-kmb-para { animation: none; display: none; } }
.tb-kmb-ekran { text-align: center; color: #fff; } .tb-kmb-ekran small { display: block; font-size: .62rem; letter-spacing: .06em; text-transform: uppercase; color: rgba(255,255,255,.65); } .tb-kmb-ekran b { display: block; font: 700 1.45rem/1.1 var(--tb-font-baslik); color: #FFD36A; text-shadow: 0 0 12px rgba(255,211,106,.45); font-variant-numeric: tabular-nums; }
.tb-kmb-sec { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; } .tb-kmb-b { display: flex; flex-direction: column; align-items: center; gap: .05rem; padding: .35rem .6rem; border: 1px solid var(--cizgi); border-radius: 8px; background: var(--yuz); color: var(--soft); cursor: pointer; } .tb-kmb-b b { font-size: .78rem; font-weight: 600; } .tb-kmb-b small { font-size: .6rem; font-weight: 700; } .tb-kmb-b.aktif { background: var(--kr); border-color: var(--kr); color: #fff; } .tb-kmb-b.aktif small { color: #fff; }
/* 2 KURUMSAL — FİYAT KIRILMASI */
.tb-merdiven.tb-sec-kirilma { display: block; } .tb-krl-sahne { display: flex; align-items: center; gap: .7rem; margin-bottom: .5rem; } .tb-krl-eski { position: relative; font-size: 1.05rem; color: var(--soft); } .tb-krl-eski s { text-decoration: none; } .tb-krl-cizik { position: absolute; inset-inline: -4px; inset-block-start: 50%; block-size: 3px; border-radius: 2px; background: var(--kr); transform: rotate(-12deg) scaleX(0); transform-origin: left; animation: tb-cizik .45s cubic-bezier(.2,.9,.3,1) .15s forwards; } @keyframes tb-cizik { to { transform: rotate(-12deg) scaleX(1); } }
.tb-krl-ok { inline-size: 18px; block-size: 18px; background: var(--kr); clip-path: polygon(0 35%, 55% 35%, 55% 10%, 100% 50%, 55% 90%, 55% 65%, 0 65%); } .tb-krl-yeni b { font: 700 2rem/1 var(--tb-font-baslik); color: var(--ink); animation: tb-pop2 .5s cubic-bezier(.2,.9,.3,1.4); } .tb-krl-yeni em { font-style: normal; font-size: .8rem; color: var(--soft); margin-inline-start: .15rem; } @keyframes tb-pop2 { from { transform: scale(.7); } to { transform: scale(1); } }
.tb-krl-rozet { padding: .3rem .6rem; border-radius: 6px; background: linear-gradient(135deg, var(--kr2), var(--kr)); color: #fff; font-size: .72rem; font-weight: 700; transform: rotate(-6deg); box-shadow: 0 8px 16px -8px rgba(196,22,43,.8); } .tb-krl-rozet.bos { display: none; }
.tb-krl-sec { display: flex; gap: 5px; } .tb-krl-b { padding: .3rem .7rem; border: 1px solid var(--cizgi); border-radius: 999px; background: var(--yuz); color: var(--soft); font-size: .76rem; font-weight: 600; cursor: pointer; } .tb-krl-b.aktif { background: var(--ink); border-color: var(--ink); color: var(--yuz); } [data-bs-theme="dark"] .tb-krl-b.aktif { background: #fff; color: #13213A; }
/* 9 WINDOWS — ÇARKIFELEK */
.tb-crk { display: flex; align-items: center; gap: 1rem; } .tb-crk-sahne { position: relative; inline-size: 128px; block-size: 128px; } .tb-crk-ibre { position: absolute; inset-block-start: -4px; inset-inline-start: 50%; inline-size: 16px; block-size: 18px; margin-inline-start: -8px; background: var(--ink); clip-path: polygon(0 0, 100% 0, 50% 100%); z-index: 2; filter: drop-shadow(0 2px 3px rgba(0,0,0,.4)); } [data-bs-theme="dark"] .tb-crk-ibre { background: #fff; }
.tb-crk-disk { inline-size: 100%; block-size: 100%; border-radius: 50%; transform: rotate(var(--d)); transition: transform 1.1s cubic-bezier(.2,.9,.2,1); box-shadow: 0 10px 24px -12px rgba(0,0,0,.7); } .tb-crk-disk svg { inline-size: 100%; block-size: 100%; } .tb-crk-dilim { stroke: var(--yuz); stroke-width: 1.5; } .tb-crk-dilim.d0 { fill: var(--yuz2); } .tb-crk-dilim.d1 { fill: var(--cizgi); } .tb-crk-dilim.aktif { fill: var(--kr); } .tb-crk-disk text { font: 700 11px var(--tb-font-govde); fill: var(--ink); } .tb-crk-dilim.aktif + text { fill: #fff; } .tb-crk-mil { fill: var(--yuz); stroke: var(--ink); stroke-width: 2; }
.tb-crk-bilgi { display: flex; flex-direction: column; gap: .15rem; } .tb-crk-bilgi b { font-size: .95rem; font-weight: 600; color: var(--ink); } .tb-crk-bilgi small { font-size: .72rem; font-weight: 700; color: var(--kr); } [data-bs-theme="dark"] .tb-crk-bilgi small { color: #E7A2AA; } .tb-crk-sec { display: flex; gap: 4px; margin-top: .3rem; } .tb-crk-b { padding: .26rem .5rem; border: 1px solid var(--cizgi); border-radius: 6px; background: var(--yuz); color: var(--soft); font-size: .72rem; font-weight: 600; cursor: pointer; } .tb-crk-b.aktif { background: var(--kr); border-color: var(--kr); color: #fff; }
/* 10 CLOUD — YILDIZ PATLAMASI */
.tb-ptl { display: flex; gap: 8px; align-items: center; } .tb-ptl-y { position: relative; display: grid; place-items: center; inline-size: 74px; block-size: 74px; border: 0; background: transparent; padding: 0; cursor: pointer; } .tb-ptl-yildiz { position: absolute; inset: 0; background: var(--cizgi); clip-path: polygon(50% 0%, 61% 15%, 78% 8%, 80% 26%, 97% 33%, 87% 48%, 97% 64%, 80% 70%, 78% 88%, 61% 82%, 50% 96%, 39% 82%, 22% 88%, 20% 70%, 3% 64%, 13% 48%, 3% 33%, 20% 26%, 22% 8%, 39% 15%); transition: transform .3s ease, background .3s ease; }
.tb-ptl-y span { position: relative; display: flex; flex-direction: column; align-items: center; color: var(--ink); } .tb-ptl-y span b { font: 800 1rem/1 var(--tb-font-baslik); } .tb-ptl-y span em { font-style: normal; font-size: .58rem; color: var(--soft); }
.tb-ptl-y.aktif .tb-ptl-yildiz { background: linear-gradient(135deg, #FFD36A, #F0A500); transform: scale(1.12); animation: tb-ptl 6s linear infinite; filter: drop-shadow(0 8px 14px rgba(240,165,0,.5)); } .tb-ptl-y.aktif span b, .tb-ptl-y.aktif span em { color: #3B2A00; } .tb-ptl-y.en-iyi:not(.aktif) .tb-ptl-yildiz { background: rgba(196,22,43,.35); } .tb-ptl-y:hover .tb-ptl-yildiz { transform: scale(1.08); }
@keyframes tb-ptl { to { transform: scale(1.12) rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .tb-ptl-y.aktif .tb-ptl-yildiz { animation: none; } }
/* 11 AJANS — KİLİT AÇMA ŞERİDİ */
.tb-klc { inline-size: 22rem; padding: .3rem 0 1.5rem; } .tb-klc-bar { position: relative; block-size: 10px; margin: 1.2rem 1.2rem 0; border-radius: 5px; background: var(--cizgi); } .tb-klc-dolu { position: absolute; inset: 0; inline-size: calc(var(--i) / (var(--n) - 1) * 100%); border-radius: 5px; background: linear-gradient(90deg, #FFD36A, var(--kr)); box-shadow: 0 0 10px rgba(255,211,106,.5); transition: inline-size .5s ease; }
.tb-klc-k { position: absolute; inset-block-start: -13px; inset-inline-start: calc(var(--k) / (var(--n) - 1) * 100%); transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: .25rem; border: 0; background: transparent; padding: 0; cursor: pointer; color: var(--soft); } .tb-klc-k > i { display: grid; place-items: center; inline-size: 36px; block-size: 36px; border-radius: 50%; background: var(--yuz); border: 2px solid var(--cizgi); font-size: .95rem; transition: all .3s ease; } .tb-klc-k b { font-size: .76rem; font-weight: 700; white-space: nowrap; } .tb-klc-k small { font-size: .6rem; font-weight: 600; }
.tb-klc-k.acik > i { border-color: #FFD36A; color: #D9A400; } .tb-klc-k.aktif > i { background: var(--kr); border-color: var(--kr); color: #fff; box-shadow: 0 0 0 5px rgba(196,22,43,.18), 0 0 14px rgba(196,22,43,.6); transform: scale(1.1); } .tb-klc-k.aktif { color: var(--ink); } .tb-klc-k.aktif b { color: var(--kr); } [data-bs-theme="dark"] .tb-klc-k.aktif b { color: #E7A2AA; } .tb-klc-k:first-child { transform: translateX(-30%); } .tb-klc-k:last-child { transform: translateX(-70%); }
/* 16 E-TİCARET — KAZI KAZAN */
.tb-sec-kazikazan { display: flex; gap: 8px; } .tb-kzk { position: relative; inline-size: 4.8rem; block-size: 4.2rem; border: 0; border-radius: 10px; background: transparent; padding: 0; cursor: pointer; overflow: hidden; } .tb-kzk-alt { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .1rem; border-radius: 10px; background: linear-gradient(135deg, var(--kr2), var(--kr)); color: #fff; } .tb-kzk-alt b { font-size: .95rem; font-weight: 800; } .tb-kzk-alt em { font-style: normal; font-size: .62rem; opacity: .9; }
.tb-kzk-kaplama { position: absolute; inset: 0; display: grid; place-items: center; border-radius: 10px; background: repeating-linear-gradient(135deg, #9aa3b2 0 6px, #b7bfcc 6px 12px); color: #2b3140; font-size: .78rem; font-weight: 700; transition: clip-path .55s cubic-bezier(.2,.9,.3,1); clip-path: inset(0 0 0 0); } [data-bs-theme="dark"] .tb-kzk-kaplama { background: repeating-linear-gradient(135deg, #3a4660 0 6px, #4c5a78 6px 12px); color: #e8edf4; } .tb-kzk-kaplama i { position: absolute; inset: 0; background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.25), transparent 50%); }
.tb-kzk.aktif .tb-kzk-kaplama { clip-path: inset(0 0 100% 0); } .tb-kzk:hover:not(.aktif) .tb-kzk-kaplama { clip-path: inset(0 0 22% 0); }
/* 17 WORDPRESS — KONFETİ */
.tb-knf { display: flex; gap: 8px; } .tb-knf-k { position: relative; display: flex; flex-direction: column; align-items: center; gap: .1rem; min-inline-size: 4.6rem; padding: .6rem .5rem .5rem; border: 1px solid var(--cizgi); border-radius: 10px; background: var(--yuz); color: var(--soft); cursor: pointer; overflow: visible; } .tb-knf-k b { font-size: .82rem; font-weight: 700; } .tb-knf-k small { font-size: .62rem; font-weight: 700; min-block-size: .8rem; } .tb-knf-k em { font-style: normal; font-size: .58rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #FFD36A; }
.tb-knf-k.aktif { color: #fff; background: linear-gradient(135deg, var(--kr2), var(--kr)); border-color: var(--kr); box-shadow: 0 12px 22px -12px rgba(196,22,43,.8); } .tb-knf-k.aktif small { color: #fff; }
.tb-knf-parca { position: absolute; inset-inline-start: 50%; inset-block-start: 40%; pointer-events: none; } .tb-knf-parca i { position: absolute; inline-size: 6px; block-size: 9px; background: var(--c); border-radius: 1px; opacity: 0; } .tb-knf-k.aktif .tb-knf-parca i { animation: tb-knf 1.4s ease-out var(--g) 1 both; }
@keyframes tb-knf { 0% { transform: translate(0, 0) rotate(0); opacity: 1; } 100% { transform: translate(var(--x), -70px) rotate(var(--r)); opacity: 0; } } @media (prefers-reduced-motion: reduce) { .tb-knf-k.aktif .tb-knf-parca i { animation: none; } .tb-krl-cizik { animation: none; transform: rotate(-12deg) scaleX(1); } }
@media (max-width: 767.98px) { .tb-klc { inline-size: 100%; } .tb-sec-kazikazan, .tb-knf, .tb-ptl { justify-content: center; flex-wrap: wrap; } .tb-kmb, .tb-crk { flex-direction: column; } }

/* ===== 11. KUŞAK (2026-10-20) — AĞIRBAŞLI / RESMİ ===== */
.tb-merdiven { --kirmizi-resmi: #C4162B; --altin: #B9975B; }
/* 1 WEB — RESMİ DAİRE MÜHÜR */
.tb-mhh { display: flex; align-items: center; gap: 1rem; } .tb-mhh-muhur svg { inline-size: 124px; block-size: 124px; } .tb-mhh .d1 { fill: none; stroke: var(--kirmizi-resmi); stroke-width: 2.5; } .tb-mhh .d2 { fill: none; stroke: var(--kirmizi-resmi); stroke-width: 1; } .tb-mhh .d3 { fill: none; stroke: var(--kirmizi-resmi); stroke-width: 1; stroke-dasharray: 2 2; }
.tb-mhh-yazi { font: 700 8.6px var(--tb-font-govde); letter-spacing: .12em; fill: var(--kirmizi-resmi); } .tb-mhh-b { font: 800 22px var(--tb-font-baslik); fill: var(--kirmizi-resmi); } .tb-mhh-s { font: 700 8px var(--tb-font-govde); letter-spacing: .2em; fill: var(--kirmizi-resmi); } .tb-mhh-yildiz { fill: var(--kirmizi-resmi); }
.tb-mhh-sec { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; } .tb-mhh-b2 { display: flex; flex-direction: column; align-items: flex-start; gap: .05rem; padding: .4rem .7rem; border: 1px solid var(--cizgi); border-radius: 4px; background: var(--yuz); color: var(--soft); cursor: pointer; text-align: left; } .tb-mhh-b2 b { font-size: .78rem; font-weight: 600; } .tb-mhh-b2 small { font-size: .6rem; font-weight: 700; } .tb-mhh-b2.aktif { border-color: var(--kirmizi-resmi); color: var(--ink); box-shadow: inset 3px 0 0 var(--kirmizi-resmi); } .tb-mhh-b2.aktif small { color: var(--kirmizi-resmi); } [data-bs-theme="dark"] .tb-mhh-b2.aktif small { color: #E7A2AA; }
/* 2 KURUMSAL — RESMİ FORM */
.tb-frm { inline-size: 20rem; border: 1px solid var(--cizgi); border-radius: 4px; background: var(--yuz); font-family: var(--tb-font-govde); } .tb-frm-bas { display: flex; align-items: center; gap: .6rem; padding: .55rem .7rem; border-bottom: 2px solid var(--kirmizi-resmi); } .tb-frm-logo { inline-size: 26px; block-size: 26px; border-radius: 50%; border: 2px solid var(--kirmizi-resmi); background: radial-gradient(circle, var(--kirmizi-resmi) 30%, transparent 32%); flex: none; } .tb-frm-bas b { display: block; font-size: .7rem; letter-spacing: .1em; color: var(--ink); } .tb-frm-bas small { font-size: .6rem; color: var(--soft); }
.tb-frm-damga { margin-inline-start: auto; padding: .2rem .5rem; border: 2px solid var(--kirmizi-resmi); border-radius: 3px; color: var(--kirmizi-resmi); font: 800 .62rem/1 var(--tb-font-govde); letter-spacing: .14em; transform: rotate(-8deg); opacity: .9; }
.tb-frm-govde { padding: .3rem .5rem; } .tb-frm-s { display: grid; grid-template-columns: 1.2rem 14px 1fr auto auto; align-items: center; gap: .5rem; inline-size: 100%; padding: .3rem .2rem; border: 0; border-bottom: 1px dotted var(--cizgi); background: transparent; color: var(--soft); font-size: .8rem; cursor: pointer; text-align: left; } .tb-frm-no { font-size: .7rem; } .tb-frm-kutu { inline-size: 13px; block-size: 13px; border: 1.5px solid var(--soft); border-radius: 2px; } .tb-frm-s b { font-weight: 600; } .tb-frm-s em { inline-size: 2rem; } .tb-frm-s small { font-weight: 700; }
.tb-frm-s.aktif { color: var(--ink); } .tb-frm-s.aktif .tb-frm-kutu { border-color: var(--kirmizi-resmi); background: var(--kirmizi-resmi); box-shadow: inset 0 0 0 2px var(--yuz); } .tb-frm-s.aktif small { color: var(--kirmizi-resmi); } [data-bs-theme="dark"] .tb-frm-s.aktif small { color: #E7A2AA; }
.tb-frm-alt { display: flex; align-items: flex-end; justify-content: flex-end; gap: .4rem; padding: .35rem .7rem .55rem; font-size: .6rem; color: var(--soft); } .tb-frm-alt i { inline-size: 5rem; border-bottom: 1px solid var(--soft); }
/* 9 WINDOWS — KURUMSAL BANT */
.tb-merdiven.tb-sec-bant { display: block; inline-size: 21rem; } .tb-bnt-ust { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: .4rem; } .tb-bnt-ust b { font-size: .92rem; font-weight: 600; color: var(--ink); } .tb-bnt-ust small { font-size: .72rem; font-weight: 700; color: var(--kirmizi-resmi); } [data-bs-theme="dark"] .tb-bnt-ust small { color: #E7A2AA; }
.tb-bnt-serit { display: grid; grid-template-columns: repeat(4, 1fr); background: var(--kirmizi-resmi); border-radius: 2px; overflow: hidden; } .tb-bnt-b { padding: .6rem 0; border: 0; border-right: 1px solid rgba(255,255,255,.25); background: transparent; color: rgba(255,255,255,.85); font: 700 .74rem/1 var(--tb-font-govde); letter-spacing: .12em; cursor: pointer; transition: background .2s ease, color .2s ease; } .tb-bnt-b:last-child { border-right: 0; } .tb-bnt-b.aktif { background: #fff; color: var(--kirmizi-resmi); } .tb-bnt-b:hover:not(.aktif) { background: rgba(255,255,255,.12); color: #fff; } .tb-bnt-cizgi { display: block; block-size: 3px; margin-top: 3px; background: var(--kirmizi-resmi); border-radius: 2px; opacity: .5; }
/* 10 CLOUD — KABARTMA PLAKET */
.tb-plk { display: flex; gap: 8px; } .tb-plk-p { position: relative; display: flex; flex-direction: column; align-items: center; gap: .15rem; min-inline-size: 4.8rem; padding: .7rem .6rem .55rem; border: 1px solid rgba(185,151,91,.45); border-radius: 3px; background: linear-gradient(160deg, #D8C49A, #B9975B 55%, #A68449); color: #3B2E12; cursor: pointer; box-shadow: inset 0 1px 0 rgba(255,255,255,.45), inset 0 -1px 0 rgba(0,0,0,.2), 0 8px 14px -10px rgba(0,0,0,.6); font-family: var(--tb-font-govde); } .tb-plk-p .v { position: absolute; inline-size: 5px; block-size: 5px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff6, #5a4a2a); } .tb-plk-p .tl { inset-block-start: 4px; inset-inline-start: 4px; } .tb-plk-p .tr { inset-block-start: 4px; inset-inline-end: 4px; } .tb-plk-p .bl { inset-block-end: 4px; inset-inline-start: 4px; } .tb-plk-p .br { inset-block-end: 4px; inset-inline-end: 4px; }
.tb-plk-p b { font-size: .74rem; font-weight: 800; letter-spacing: .14em; text-shadow: 0 1px 0 rgba(255,255,255,.5); } .tb-plk-p small { font-size: .58rem; font-weight: 700; letter-spacing: .04em; min-block-size: .8rem; color: #5a4a2a; } .tb-plk-p.aktif { background: linear-gradient(160deg, #D04555, var(--kirmizi-resmi) 55%, #9E1322); color: #fff; border-color: #7a0f1d; } .tb-plk-p.aktif b { text-shadow: 0 1px 0 rgba(0,0,0,.35); } .tb-plk-p.aktif small { color: #fff; } .tb-plk-p:hover { transform: translateY(-2px); }
/* 16 E-TİCARET — TARİH DAMGASI */
.tb-dmg { display: flex; align-items: center; gap: 1rem; } .tb-dmg-kagit { position: relative; inline-size: 10.5rem; block-size: 96px; border-radius: 2px; background: var(--yuz); border: 1px solid var(--cizgi); box-shadow: 0 8px 16px -12px rgba(0,0,0,.5); overflow: hidden; } .tb-dmg-satir { position: absolute; inset-inline: 12px; block-size: 3px; border-radius: 2px; background: var(--cizgi); inset-block-start: 14px; } .tb-dmg-satir.k { inset-block-start: 24px; inline-size: 55%; }
.tb-dmg-izi { position: absolute; inset-inline-start: 50%; inset-block-start: 50%; transform: translate(-50%, -40%) rotate(-10deg); display: flex; flex-direction: column; align-items: center; padding: .35rem .8rem; border: 3px double var(--kirmizi-resmi); border-radius: 6px; color: var(--kirmizi-resmi); opacity: .9; animation: tb-dmg .35s cubic-bezier(.2,.9,.3,1.3); mix-blend-mode: multiply; } [data-bs-theme="dark"] .tb-dmg-izi { mix-blend-mode: normal; } .tb-dmg-izi b { font: 800 .9rem/1 var(--tb-font-govde); letter-spacing: .12em; } .tb-dmg-izi small { font-size: .56rem; font-weight: 700; letter-spacing: .14em; }
@keyframes tb-dmg { 0% { transform: translate(-50%, -40%) rotate(-10deg) scale(1.6); opacity: 0; } 100% { transform: translate(-50%, -40%) rotate(-10deg) scale(1); opacity: .9; } } @media (prefers-reduced-motion: reduce) { .tb-dmg-izi { animation: none; } }
.tb-dmg-sec { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; } .tb-dmg-b { display: flex; align-items: center; gap: .45rem; padding: .35rem .6rem; border: 1px solid var(--cizgi); border-radius: 4px; background: var(--yuz); color: var(--soft); font-size: .78rem; font-weight: 600; cursor: pointer; text-align: left; } .tb-dmg-b i { inline-size: 10px; block-size: 10px; border-radius: 50%; border: 1.5px solid var(--soft); } .tb-dmg-b.aktif { color: var(--ink); border-color: var(--kirmizi-resmi); } .tb-dmg-b.aktif i { background: var(--kirmizi-resmi); border-color: var(--kirmizi-resmi); }
/* 17 WORDPRESS — MECLİS SÜTUNLARI */
.tb-stn { display: flex; flex-direction: column; align-items: center; } .tb-stn-aliblik { display: block; inline-size: 100%; block-size: 10px; border-radius: 2px 2px 0 0; background: var(--ink); opacity: .85; } [data-bs-theme="dark"] .tb-stn-aliblik { background: #cfe3ff; } .tb-stn-ler { display: flex; gap: 14px; padding: 0 10px; } .tb-stn-s { display: flex; flex-direction: column; align-items: center; border: 0; background: transparent; padding: 0; cursor: pointer; color: var(--soft); }
.tb-stn-bas, .tb-stn-taban { display: block; inline-size: 42px; block-size: 7px; background: var(--cizgi); } .tb-stn-bas { border-radius: 2px 2px 0 0; } .tb-stn-taban { border-radius: 0 0 2px 2px; } .tb-stn-govde { display: grid; place-items: center; inline-size: 32px; block-size: 58px; background: repeating-linear-gradient(90deg, var(--yuz2) 0 5px, var(--cizgi) 5px 6px); border-inline: 1px solid var(--cizgi); } .tb-stn-govde b { writing-mode: vertical-rl; transform: rotate(180deg); font-size: .72rem; font-weight: 700; letter-spacing: .08em; color: var(--ink); background: var(--yuz); padding: .15rem .05rem; }
.tb-stn-s small { margin-top: .35rem; font-size: .6rem; font-weight: 700; min-block-size: .8rem; } .tb-stn-s.aktif .tb-stn-bas, .tb-stn-s.aktif .tb-stn-taban { background: var(--kirmizi-resmi); } .tb-stn-s.aktif .tb-stn-govde { background: repeating-linear-gradient(90deg, #E7A2AA 0 5px, var(--kirmizi-resmi) 5px 6px); border-color: var(--kirmizi-resmi); } .tb-stn-s.aktif .tb-stn-govde b { background: var(--kirmizi-resmi); color: #fff; } .tb-stn-s.aktif small { color: var(--kirmizi-resmi); } [data-bs-theme="dark"] .tb-stn-s.aktif small { color: #E7A2AA; } .tb-stn-zemin { display: block; inline-size: 100%; block-size: 6px; margin-top: -1.1rem; background: var(--cizgi); border-radius: 2px; }
@media (max-width: 767.98px) { .tb-frm, .tb-sec-bant { inline-size: 100%; } .tb-plk, .tb-stn-ler { flex-wrap: wrap; justify-content: center; } .tb-mhh, .tb-dmg { flex-direction: column; } }

/* ===== 12. KUŞAK (2026-10-20) — OSMANLI ===== */
.tb-merdiven { --osm-kirmizi: #A3161F; --osm-altin: #C9A552; --osm-lacivert: #1C3A6B; --osm-firuze: #2E8B9A; --osm-krem: #F4ECD8; }
/* 1 WEB — SİVRİ KEMER NİŞLERİ */
.tb-kmr { display: flex; gap: 10px; align-items: flex-end; } .tb-kmr-nis { display: flex; flex-direction: column; align-items: center; gap: .3rem; border: 0; background: transparent; padding: 0; cursor: pointer; color: var(--soft); }
.tb-kmr-ic { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; inline-size: 56px; block-size: 76px; padding-bottom: .5rem; background: var(--yuz2); border: 2px solid var(--osm-altin); border-radius: 28px 28px 3px 3px; clip-path: polygon(50% 0, 100% 22%, 100% 100%, 0 100%, 0 22%); color: var(--ink); transition: all .25s ease; } .tb-kmr-ic b { font: 700 1.3rem/1 var(--tb-font-baslik); } .tb-kmr-ic em { font-style: normal; font-size: .6rem; color: var(--soft); }
.tb-kmr-kandil { position: absolute; inset-block-start: 14px; inline-size: 8px; block-size: 12px; border-radius: 4px 4px 6px 6px; background: var(--osm-altin); opacity: .5; } .tb-kmr-kandil::before { content: ""; position: absolute; inset-block-start: -8px; inset-inline-start: 3px; inline-size: 2px; block-size: 8px; background: var(--osm-altin); }
.tb-kmr-nis small { font-size: .6rem; font-weight: 700; min-block-size: .8rem; } .tb-kmr-nis.aktif .tb-kmr-ic { background: linear-gradient(180deg, #C0202C, var(--osm-kirmizi)); color: #fff; border-color: var(--osm-altin); box-shadow: 0 10px 22px -12px rgba(163,22,31,.8); } .tb-kmr-nis.aktif .tb-kmr-ic em { color: var(--osm-altin); } .tb-kmr-nis.aktif .tb-kmr-kandil { opacity: 1; background: #FFD36A; box-shadow: 0 0 10px #FFD36A; } .tb-kmr-nis.aktif { color: var(--ink); } .tb-kmr-nis.aktif small { color: var(--osm-kirmizi); } [data-bs-theme="dark"] .tb-kmr-nis.aktif small { color: #E7A2AA; } .tb-kmr-nis:hover .tb-kmr-ic { transform: translateY(-3px); }
/* 2 KURUMSAL — İZNİK ÇİNİSİ */
.tb-cin { display: flex; gap: 8px; } .tb-cin-k { display: flex; flex-direction: column; align-items: center; gap: .2rem; border: 0; background: transparent; padding: 0; cursor: pointer; color: var(--soft); } .tb-cin-k svg { inline-size: 62px; block-size: 62px; transition: transform .25s ease; } .tb-cin .z { fill: var(--osm-krem); stroke: var(--osm-lacivert); stroke-width: 1.5; } .tb-cin .y1 { fill: var(--osm-lacivert); } .tb-cin .y2 { fill: var(--osm-firuze); } .tb-cin .g { fill: var(--osm-krem); }
.tb-cin-k b { font-size: .78rem; font-weight: 600; } .tb-cin-k small { font-size: .6rem; font-weight: 700; min-block-size: .8rem; } .tb-cin-k.aktif .y1 { fill: var(--osm-kirmizi); } .tb-cin-k.aktif .y2 { fill: #E05A48; } .tb-cin-k.aktif .z { stroke: var(--osm-kirmizi); stroke-width: 2.5; } .tb-cin-k.aktif .g { fill: var(--osm-altin); } .tb-cin-k.aktif svg { transform: scale(1.08); filter: drop-shadow(0 8px 12px rgba(163,22,31,.35)); } .tb-cin-k.aktif { color: var(--ink); } .tb-cin-k.aktif small { color: var(--osm-kirmizi); } [data-bs-theme="dark"] .tb-cin-k.aktif small { color: #E7A2AA; } .tb-cin-k:hover svg { transform: scale(1.05); }
/* 10 CLOUD — KUBBELER */
.tb-kbb { display: flex; align-items: flex-end; gap: 1.2rem; } .tb-kbb-siluet { display: flex; align-items: flex-end; gap: 6px; padding: 0 4px; border-bottom: 3px solid var(--cizgi); } .tb-kbb-k { display: flex; flex-direction: column; align-items: center; border: 0; background: transparent; padding: 0; cursor: pointer; color: var(--soft); }
.tb-kbb-alem { display: block; inline-size: 2px; block-size: 12px; background: var(--osm-altin); position: relative; } .tb-kbb-alem::after { content: ""; position: absolute; inset-block-start: -5px; inset-inline-start: -3px; inline-size: 8px; block-size: 8px; border-radius: 50%; background: var(--osm-altin); }
.tb-kbb-dome { display: block; inline-size: var(--s); block-size: calc(var(--s) / 2); border-radius: var(--s) var(--s) 0 0; background: linear-gradient(180deg, #6E8FB8, #3B5C8A); border: 1px solid rgba(255,255,255,.2); border-bottom: 0; transition: background .25s ease; } .tb-kbb-kasnak { display: flex; justify-content: space-evenly; inline-size: calc(var(--s) - 8px); block-size: 10px; background: var(--yuz2); border: 1px solid var(--cizgi); border-top: 0; } .tb-kbb-kasnak u { display: block; inline-size: 3px; block-size: 6px; margin-top: 2px; background: var(--cizgi); border-radius: 2px 2px 0 0; }
.tb-kbb-k b { margin-top: .3rem; font-size: .72rem; font-weight: 600; } .tb-kbb-k.aktif .tb-kbb-dome { background: linear-gradient(180deg, #C0202C, var(--osm-kirmizi)); box-shadow: 0 -4px 14px rgba(163,22,31,.45); } .tb-kbb-k.aktif .tb-kbb-kasnak u { background: #FFD36A; box-shadow: 0 0 5px #FFD36A; } .tb-kbb-k.aktif { color: var(--ink); } .tb-kbb-k:hover .tb-kbb-dome { filter: brightness(1.12); }
.tb-kbb-bilgi { display: flex; flex-direction: column; gap: .15rem; padding-bottom: 1.2rem; } .tb-kbb-bilgi b { font-size: .95rem; font-weight: 600; color: var(--ink); } .tb-kbb-bilgi small { font-size: .72rem; font-weight: 700; color: var(--osm-kirmizi); } [data-bs-theme="dark"] .tb-kbb-bilgi small { color: #E7A2AA; }
/* 16 E-TİCARET — SİKKE */
.tb-sec-sikke { display: flex; gap: 10px; } .tb-skk { display: flex; flex-direction: column; align-items: center; gap: .25rem; border: 0; background: transparent; padding: 0; cursor: pointer; color: var(--soft); }
.tb-skk-para { display: grid; place-items: center; inline-size: 62px; block-size: 62px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #E8D08A, var(--osm-altin) 55%, #8A6B22); box-shadow: inset 0 0 0 2px rgba(255,255,255,.35), inset 0 0 0 4px #8A6B22, 0 6px 12px -6px rgba(0,0,0,.6); transition: transform .35s ease; } .tb-skk-ic { display: flex; flex-direction: column; align-items: center; justify-content: center; inline-size: 46px; block-size: 46px; border-radius: 50%; border: 1px dashed rgba(90,70,20,.6); color: #3B2E0A; } .tb-skk-ic b { font: 800 1.15rem/1 var(--tb-font-baslik); } .tb-skk-ic em { font-style: normal; font-size: .52rem; letter-spacing: .1em; text-transform: uppercase; }
.tb-skk small { font-size: .6rem; font-weight: 700; min-block-size: .8rem; } .tb-skk.aktif .tb-skk-para { background: radial-gradient(circle at 35% 30%, #E07A80, var(--osm-kirmizi) 55%, #5E0C14); box-shadow: inset 0 0 0 2px rgba(255,255,255,.35), inset 0 0 0 4px var(--osm-altin), 0 10px 20px -8px rgba(163,22,31,.7); transform: rotateY(360deg) scale(1.08); } .tb-skk.aktif .tb-skk-ic { color: #fff; border-color: rgba(255,255,255,.5); } .tb-skk.aktif { color: var(--ink); } .tb-skk.aktif small { color: var(--osm-kirmizi); } [data-bs-theme="dark"] .tb-skk.aktif small { color: #E7A2AA; } .tb-skk:hover .tb-skk-para { transform: scale(1.06); }
/* 17 WORDPRESS — FERMAN */
.tb-frn { display: flex; flex-direction: column; align-items: stretch; inline-size: 18rem; } .tb-frn-rulo { display: block; block-size: 12px; border-radius: 6px; background: linear-gradient(180deg, #D8C9A3, #A8935F); box-shadow: 0 2px 4px rgba(0,0,0,.35); margin: 0 -8px; position: relative; z-index: 1; } .tb-frn-rulo.ust { margin-bottom: -4px; } .tb-frn-rulo.alt { margin-top: -4px; }
.tb-frn-kagit { padding: .9rem .9rem .7rem; background: var(--osm-krem); color: #3B2E0A; border-inline: 1px solid #D8C9A3; } .tb-frn-bas { display: flex; align-items: center; gap: .5rem; margin-bottom: .4rem; font: 700 .64rem/1 var(--tb-font-govde); letter-spacing: .14em; text-transform: uppercase; color: var(--osm-kirmizi); } .tb-frn-bas i { flex: 1 1 auto; block-size: 1px; background: var(--osm-altin); }
.tb-frn-s { display: grid; grid-template-columns: 12px 1fr auto auto; align-items: center; gap: .5rem; inline-size: 100%; padding: .28rem .2rem; border: 0; background: transparent; color: #6B5A2E; font-size: .8rem; cursor: pointer; text-align: left; } .tb-frn-tugla { inline-size: 10px; block-size: 10px; transform: rotate(45deg); border: 1.5px solid var(--osm-altin); } .tb-frn-s b { font-weight: 600; } .tb-frn-s em { inline-size: 1.5rem; border-bottom: 1px dotted #C9B98A; } .tb-frn-s small { font-weight: 700; }
.tb-frn-s.aktif { color: #3B2E0A; } .tb-frn-s.aktif .tb-frn-tugla { background: var(--osm-kirmizi); border-color: var(--osm-kirmizi); } .tb-frn-s.aktif small { color: var(--osm-kirmizi); }
.tb-frn-muhur { display: flex; justify-content: flex-end; margin-top: .4rem; } .tb-frn-muhur span { display: grid; place-items: center; inline-size: 50px; block-size: 50px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #C0202C, var(--osm-kirmizi) 60%, #6E0E16); color: #fff; font: 800 .58rem/1.1 var(--tb-font-govde); text-align: center; letter-spacing: .04em; box-shadow: 0 4px 8px rgba(0,0,0,.35), inset 0 0 0 2px rgba(255,255,255,.25); transform: rotate(-8deg); }
@media (max-width: 767.98px) { .tb-kmr, .tb-cin, .tb-sec-sikke { flex-wrap: wrap; justify-content: center; } .tb-kbb { flex-direction: column; align-items: center; } .tb-frn { inline-size: 100%; max-inline-size: 22rem; } }

/* ===== 13. KUŞAK (2026-10-20) — OSMANLI × TEKNOLOJİ ===== */
/* 1 WEB — MUKARNAS LED PANELİ */
.tb-mkn { display: flex; align-items: center; gap: 1rem; } .tb-mkn-panel { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 14px; border-radius: 4px 4px 14px 14px; background: linear-gradient(180deg, #1a2740, #0b1324); border: 1px solid var(--osm-altin); box-shadow: inset 0 0 0 3px #0b1324, inset 0 0 0 4px rgba(201,165,82,.4); }
.tb-mkn-kat { display: flex; flex-direction: column; align-items: center; gap: 2px; border: 0; background: transparent; padding: 0; cursor: pointer; color: rgba(255,255,255,.55); } .tb-mkn-hucreler { display: flex; gap: 3px; } .tb-mkn-hucreler i { display: block; inline-size: 30px; block-size: 20px; background: #1f2d4a; border: 1px solid rgba(201,165,82,.45); clip-path: polygon(0 0, 100% 0, 100% 60%, 50% 100%, 0 60%); transition: background .25s ease, box-shadow .25s ease; }
.tb-mkn-kat b { font-size: .66rem; font-weight: 600; } .tb-mkn-kat small { font-size: .56rem; font-weight: 700; } .tb-mkn-kat.aktif { color: #fff; } .tb-mkn-kat.aktif .tb-mkn-hucreler i { background: linear-gradient(180deg, #E7A2AA, var(--kr)); border-color: #FFD36A; box-shadow: 0 0 8px rgba(196,22,43,.7); animation: tb-led 1.6s ease-in-out infinite; } .tb-mkn-kat.aktif small { color: #FFD36A; } .tb-mkn-kat:hover:not(.aktif) .tb-mkn-hucreler i { background: #2a3a5e; }
.tb-mkn-bilgi { display: flex; flex-direction: column; gap: .15rem; } .tb-mkn-bilgi b { font-size: .95rem; font-weight: 600; color: var(--ink); } .tb-mkn-bilgi small { font-size: .72rem; font-weight: 700; color: var(--kr); } [data-bs-theme="dark"] .tb-mkn-bilgi small { color: #E7A2AA; } .tb-mkn-bilgi span { font-size: .6rem; letter-spacing: .12em; text-transform: uppercase; color: var(--osm-altin); }
/* 2 KURUMSAL — REVAK VERİ MERKEZİ */
.tb-rvk { display: flex; flex-direction: column; align-items: center; } .tb-rvk-saçak { display: block; inline-size: 100%; block-size: 8px; background: var(--osm-altin); border-radius: 2px 2px 0 0; box-shadow: 0 2px 0 #0b1324; } .tb-rvk-kemerler { display: flex; gap: 0; padding: 0 6px; background: linear-gradient(180deg, #1a2740, #0b1324); }
.tb-rvk-k { position: relative; display: flex; flex-direction: column; align-items: center; border: 0; background: transparent; padding: 6px 4px 0; cursor: pointer; color: rgba(255,255,255,.6); } .tb-rvk-kemer { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 1px; inline-size: 54px; block-size: 74px; padding-bottom: 6px; background: #06101f; border: 2px solid var(--osm-altin); border-bottom: 0; border-radius: 27px 27px 0 0; clip-path: polygon(50% 0, 100% 24%, 100% 100%, 0 100%, 0 24%); transition: background .25s ease; } .tb-rvk-kilit { position: absolute; inset-block-start: 3px; inline-size: 6px; block-size: 9px; background: var(--osm-altin); clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.tb-rvk-rack { display: flex; flex-direction: column; gap: 2px; margin-bottom: 4px; } .tb-rvk-rack u { display: block; inline-size: 26px; block-size: 5px; border-radius: 1px; background: #1f2d4a; border: 1px solid rgba(255,255,255,.1); position: relative; } .tb-rvk-rack u::after { content: ""; position: absolute; inset-inline-end: 2px; inset-block-start: 1px; inline-size: 2px; block-size: 2px; border-radius: 50%; background: rgba(255,255,255,.25); }
.tb-rvk-kemer b { font: 700 1rem/1 var(--tb-font-baslik); color: #fff; } .tb-rvk-kemer em { font-style: normal; font-size: .5rem; letter-spacing: .1em; color: rgba(255,255,255,.6); } .tb-rvk-sutun { position: absolute; inset-block-end: 14px; inline-size: 4px; block-size: 50px; background: linear-gradient(90deg, #8a6b22, var(--osm-altin), #8a6b22); } .tb-rvk-sutun.l { inset-inline-start: 0; } .tb-rvk-sutun.r { inset-inline-end: 0; } .tb-rvk-k small { font-size: .58rem; font-weight: 700; min-block-size: .8rem; margin-top: .2rem; }
.tb-rvk-k.aktif .tb-rvk-kemer { background: radial-gradient(ellipse at 50% 100%, rgba(196,22,43,.55), #06101f 70%); } .tb-rvk-k.aktif .tb-rvk-rack u { background: #3a1016; border-color: var(--kr); } .tb-rvk-k.aktif .tb-rvk-rack u::after { background: #2BB673; box-shadow: 0 0 4px #2BB673; } .tb-rvk-k.aktif small { color: #FFD36A; } .tb-rvk-k.aktif { color: #fff; } .tb-rvk-zemin { display: block; inline-size: 100%; block-size: 6px; background: var(--osm-altin); opacity: .7; }
/* 10 CLOUD — MİNARE SİNYAL KULESİ */
.tb-mnr { display: flex; align-items: flex-end; gap: 1.2rem; } .tb-mnr-kule { display: flex; flex-direction: column; align-items: center; } .tb-mnr-anten { display: block; inline-size: 2px; block-size: 16px; background: var(--osm-altin); position: relative; } .tb-mnr-anten::before, .tb-mnr-anten::after { content: ""; position: absolute; inset-inline-start: 50%; inset-block-start: -6px; inline-size: 14px; block-size: 14px; margin-inline-start: -7px; border: 1.5px solid var(--kr); border-radius: 50%; clip-path: polygon(0 0, 100% 0, 100% 45%, 0 45%); animation: tb-sinyal 1.6s ease-out infinite; } .tb-mnr-anten::after { inline-size: 24px; block-size: 24px; margin-inline-start: -12px; inset-block-start: -11px; animation-delay: .5s; }
@keyframes tb-sinyal { 0% { opacity: 0; transform: scale(.6); } 40% { opacity: 1; } 100% { opacity: 0; transform: scale(1.3); } } @media (prefers-reduced-motion: reduce) { .tb-mnr-anten::before, .tb-mnr-anten::after { animation: none; opacity: .8; } }
.tb-mnr-kulah { display: block; inline-size: 26px; block-size: 22px; background: linear-gradient(180deg, #8a6b22, var(--osm-altin)); clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.tb-mnr-serefe { position: relative; display: flex; flex-direction: column; align-items: center; border: 0; background: transparent; padding: 0; cursor: pointer; color: var(--soft); } .tb-mnr-govde { display: block; inline-size: 18px; block-size: 22px; background: repeating-linear-gradient(90deg, #d8d2c4 0 3px, #bfb8a8 3px 6px); } [data-bs-theme="dark"] .tb-mnr-govde { background: repeating-linear-gradient(90deg, #cfd6e0 0 3px, #9aa6b8 3px 6px); }
.tb-mnr-balkon { display: flex; justify-content: space-between; inline-size: 44px; block-size: 8px; padding: 0 3px; background: #b9b2a2; border-radius: 0 0 4px 4px; box-shadow: 0 2px 0 #8a8474; } .tb-mnr-balkon u { display: block; inline-size: 2px; block-size: 100%; background: #6e695c; } .tb-mnr-serefe b { position: absolute; inset-inline-start: 54px; inset-block-start: 14px; font-size: .74rem; font-weight: 600; white-space: nowrap; } .tb-mnr-serefe small { position: absolute; inset-inline-start: 54px; inset-block-start: 29px; font-size: .58rem; font-weight: 700; white-space: nowrap; }
.tb-mnr-sinyal { position: absolute; inset-inline-end: 56px; inset-block-start: 10px; inline-size: 6px; block-size: 6px; border-radius: 50%; background: transparent; } .tb-mnr-serefe.aktif .tb-mnr-balkon { background: var(--kr); box-shadow: 0 2px 0 #7a0f1d, 0 0 14px rgba(196,22,43,.6); } .tb-mnr-serefe.aktif .tb-mnr-balkon u { background: #FFD36A; } .tb-mnr-serefe.aktif b { color: var(--ink); } .tb-mnr-serefe.aktif small { color: var(--kr); } [data-bs-theme="dark"] .tb-mnr-serefe.aktif small { color: #E7A2AA; } .tb-mnr-serefe.aktif .tb-mnr-sinyal { background: #2BB673; box-shadow: 0 0 8px #2BB673; animation: tb-led 1.2s ease-in-out infinite; }
.tb-mnr-kaide { display: block; inline-size: 36px; block-size: 12px; background: #8a8474; border-radius: 2px 2px 0 0; } .tb-mnr-kule { padding-inline-end: 7rem; } .tb-mnr-bilgi { display: flex; flex-direction: column; gap: .15rem; padding-bottom: .4rem; } .tb-mnr-bilgi b { font-size: .95rem; font-weight: 600; color: var(--ink); } .tb-mnr-bilgi small { font-size: .72rem; font-weight: 700; color: var(--kr); } [data-bs-theme="dark"] .tb-mnr-bilgi small { color: #E7A2AA; } .tb-mnr-bilgi span { font-size: .6rem; letter-spacing: .12em; text-transform: uppercase; color: #2BB673; }
/* 16 E-TİCARET — KAPALIÇARŞI KEPENKLERİ */
.tb-crs { position: relative; display: flex; flex-direction: column; align-items: center; } .tb-crs-tonoz { inline-size: 100%; block-size: 22px; background: linear-gradient(180deg, #1a2740, #0b1324); border-radius: 50% 50% 0 0 / 100% 100% 0 0; border: 1px solid var(--osm-altin); border-bottom: 0; } .tb-crs-dukkanlar { display: flex; gap: 4px; padding: 6px 8px 0; background: #0b1324; border-inline: 1px solid var(--osm-altin); }
.tb-crs-d { border: 0; background: transparent; padding: 0; cursor: pointer; } .tb-crs-kemer { position: relative; display: block; inline-size: 62px; block-size: 76px; background: #06101f; border: 2px solid var(--osm-altin); border-bottom: 0; border-radius: 31px 31px 0 0; overflow: hidden; } .tb-crs-tabela { position: absolute; inset-inline: 6px; inset-block-start: 8px; padding: 2px 0; border-radius: 3px; background: var(--osm-altin); color: #3B2E0A; font: 700 .58rem/1 var(--tb-font-govde); letter-spacing: .08em; text-align: center; z-index: 2; }
.tb-crs-kepenk { position: absolute; inset-inline: 0; inset-block-start: 24px; block-size: 52px; background: repeating-linear-gradient(180deg, #8a8474 0 4px, #6e695c 4px 7px); transition: block-size .5s cubic-bezier(.2,.9,.3,1); z-index: 1; } .tb-crs-ic { position: absolute; inset-inline: 0; inset-block: 24px 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; background: radial-gradient(ellipse at 50% 100%, rgba(196,22,43,.5), #0b1324 75%); color: #fff; } .tb-crs-ic b { font-size: .72rem; font-weight: 800; color: #FFD36A; } .tb-crs-ic em { font-style: normal; font-size: .5rem; opacity: .85; }
.tb-crs-d.aktif .tb-crs-kepenk { block-size: 6px; } .tb-crs-d:hover:not(.aktif) .tb-crs-kepenk { block-size: 36px; } .tb-crs-kaldirim { display: block; inline-size: 100%; block-size: 8px; background: var(--osm-altin); opacity: .7; }
/* 17 WORDPRESS — GİRİH DEVRE KARTI */
.tb-merdiven.tb-sec-girih { display: block; inline-size: 20rem; } .tb-grh svg { display: block; inline-size: 100%; } .tb-grh-iz { fill: none; stroke: var(--osm-altin); stroke-width: 1; stroke-dasharray: 3 3; opacity: .55; } .tb-grh-y .h { fill: none; stroke: var(--cizgi); stroke-width: 1; } .tb-grh-y .y { fill: var(--yuz2); stroke: var(--osm-altin); stroke-width: 1.5; transition: fill .25s ease; } .tb-grh-y .c { fill: var(--cizgi); } .tb-grh-y .t { font: 700 11px var(--tb-font-baslik); fill: var(--ink); }
.tb-grh-y:hover .y { fill: rgba(53,100,175,.25); } .tb-grh-y.aktif .y { fill: var(--kr); stroke: #FFD36A; filter: drop-shadow(0 0 8px rgba(196,22,43,.7)); } .tb-grh-y.aktif .c { fill: #FFD36A; } .tb-grh-y.aktif .t { fill: #fff; } .tb-grh-y.aktif .h { stroke: var(--kr); stroke-dasharray: 4 4; animation: tb-grh 6s linear infinite; }
@keyframes tb-grh { to { stroke-dashoffset: -64; } } @media (prefers-reduced-motion: reduce) { .tb-grh-y.aktif .h { animation: none; } }
.tb-grh-alt { display: grid; grid-template-columns: repeat(4, 1fr); } .tb-grh-b { display: flex; flex-direction: column; align-items: center; gap: .05rem; padding: .15rem 0; border: 0; background: transparent; color: var(--soft); cursor: pointer; } .tb-grh-b b { font-size: .76rem; font-weight: 600; } .tb-grh-b small { font-size: .6rem; font-weight: 700; } .tb-grh-b.aktif { color: var(--ink); } .tb-grh-b.aktif small { color: var(--kr); } [data-bs-theme="dark"] .tb-grh-b.aktif small { color: #E7A2AA; }
@media (max-width: 767.98px) { .tb-mkn, .tb-mnr { flex-direction: column; align-items: center; } .tb-mnr-kule { padding-inline-end: 0; } .tb-sec-girih { inline-size: 100%; } .tb-crs-dukkanlar, .tb-rvk-kemerler { flex-wrap: wrap; justify-content: center; } }

/* ===== 14. KUŞAK (2026-10-20) — SADE & BİLGİ VEREN ===== */
/* 1 WEB — RADYO KARTLARI */
.tb-sec-radyokart { display: flex; gap: 6px; } .tb-rdk { display: flex; align-items: center; gap: .55rem; padding: .5rem .7rem .5rem .6rem; border: 1px solid var(--cizgi); border-radius: 10px; background: var(--yuz); color: var(--soft); cursor: pointer; text-align: left; transition: all .18s ease; } .tb-rdk-radyo { inline-size: 14px; block-size: 14px; border-radius: 50%; border: 2px solid var(--cizgi); flex: none; transition: all .18s ease; } .tb-rdk-metin { display: flex; flex-direction: column; gap: .05rem; } .tb-rdk-metin b { font-size: .8rem; font-weight: 600; white-space: nowrap; } .tb-rdk-metin em { font-style: normal; font-size: .66rem; color: var(--soft); white-space: nowrap; } .tb-rdk small { padding: .14rem .4rem; border-radius: 4px; background: rgba(19,33,58,.08); color: var(--ink); font-size: .6rem; font-weight: 700; white-space: nowrap; }
.tb-rdk:hover { border-color: var(--mavi); } .tb-rdk.aktif { border-color: var(--kr); color: var(--ink); box-shadow: 0 0 0 1px var(--kr); } .tb-rdk.aktif .tb-rdk-radyo { border-color: var(--kr); background: radial-gradient(circle, var(--kr) 45%, transparent 50%); } .tb-rdk.aktif small { background: var(--kr); color: #fff; } [data-bs-theme="dark"] .tb-rdk small { background: rgba(255,255,255,.1); color: #fff; }
/* 2 KURUMSAL — TARİHLİ TAKVİM ŞERİDİ */
.tb-tkv2 { inline-size: 22rem; } .tb-tkv2-ust { display: flex; align-items: center; gap: .6rem; margin-bottom: .45rem; font-size: .78rem; color: var(--soft); } .tb-tkv2-ust span { display: inline-flex; align-items: center; gap: .35rem; padding: .22rem .55rem; border-radius: 6px; border: 1px solid var(--cizgi); background: var(--yuz); } .tb-tkv2-ust .bitis { color: var(--ink); font-weight: 600; border-color: var(--kr); } .tb-tkv2-ust .bi { color: var(--kr); } .tb-tkv2-ust b { color: var(--soft); }
.tb-tkv2-serit { position: relative; block-size: 10px; margin: 0 .2rem .6rem; border-radius: 5px; background: var(--yuz2); border: 1px solid var(--cizgi); overflow: hidden; } .tb-tkv2-dolu { position: absolute; inset-block: 0; inset-inline-start: 0; inline-size: var(--u); background: linear-gradient(90deg, #1B3F6B, var(--kr)); transition: inline-size .45s ease; } .tb-tkv2-t { position: absolute; inset-block-end: 0; inline-size: 1px; block-size: 4px; background: rgba(255,255,255,.45); } .tb-tkv2-t.b { block-size: 100%; inline-size: 2px; background: rgba(255,255,255,.7); }
.tb-tkv2-sec { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; } .tb-tkv2-b { display: flex; flex-direction: column; align-items: center; gap: .05rem; padding: .3rem 0; border: 1px solid var(--cizgi); border-radius: 6px; background: var(--yuz); color: var(--soft); cursor: pointer; } .tb-tkv2-b b { font-size: .76rem; font-weight: 600; } .tb-tkv2-b small { font-size: .58rem; font-weight: 700; } .tb-tkv2-b.aktif { border-color: var(--kr); color: var(--ink); background: rgba(196,22,43,.06); } .tb-tkv2-b.aktif small { color: var(--kr); } [data-bs-theme="dark"] .tb-tkv2-b.aktif small { color: #E7A2AA; }
/* 10 CLOUD — KUTU SEÇİCİ */
.tb-scc { display: flex; gap: 6px; } .tb-scc-k { display: flex; flex-direction: column; align-items: center; gap: .1rem; min-inline-size: 5rem; padding: .5rem .55rem .4rem; border: 1px solid var(--cizgi); border-radius: 10px; background: var(--yuz); color: var(--soft); cursor: pointer; transition: all .18s ease; } .tb-scc-k b { font-size: .82rem; font-weight: 600; color: var(--ink); } .tb-scc-k em { font-style: normal; font-size: .72rem; font-weight: 700; color: var(--mavi); } .tb-scc-k small { font-size: .58rem; font-weight: 700; min-block-size: .75rem; }
.tb-scc-k:hover { border-color: var(--mavi); } .tb-scc-k.aktif { border-color: var(--kr); box-shadow: 0 0 0 1px var(--kr); background: rgba(196,22,43,.05); } .tb-scc-k.aktif small { color: var(--kr); } [data-bs-theme="dark"] .tb-scc-k.aktif small { color: #E7A2AA; }
/* 16 E-TİCARET — FATURA ÖNİZLEME */
.tb-ftr { display: flex; align-items: flex-start; gap: .8rem; } .tb-ftr-sec { display: grid; gap: 4px; } .tb-ftr-b { padding: .34rem .7rem; border: 1px solid var(--cizgi); border-radius: 6px; background: var(--yuz); color: var(--soft); font-size: .76rem; font-weight: 600; cursor: pointer; text-align: left; white-space: nowrap; } .tb-ftr-b.aktif { background: var(--ink); border-color: var(--ink); color: var(--yuz); } [data-bs-theme="dark"] .tb-ftr-b.aktif { background: #fff; color: #13213A; }
.tb-ftr-kagit { min-inline-size: 13rem; padding: .55rem .75rem .5rem; border: 1px solid var(--cizgi); border-radius: 8px; background: var(--yuz); font-size: .76rem; color: var(--soft); } .tb-ftr-satir { display: flex; justify-content: space-between; gap: 1rem; padding: .22rem 0; border-bottom: 1px dashed var(--cizgi); } .tb-ftr-satir b { font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; } .tb-ftr-satir.ind b { color: var(--kr); } [data-bs-theme="dark"] .tb-ftr-satir.ind b { color: #E7A2AA; } .tb-ftr-satir.toplam { border-bottom: 0; padding-top: .35rem; font-size: .84rem; color: var(--ink); } .tb-ftr-satir.toplam b { font-size: 1rem; font-weight: 700; } .tb-ftr-not { font-size: .66rem; color: var(--soft); text-align: right; }
/* 17 WORDPRESS — CÜMLE SEÇİCİ */
.tb-cml { max-inline-size: 24rem; } .tb-cml-metin { margin: 0; font-size: 1rem; line-height: 2.1; color: var(--ink); } .tb-cml-sec { display: inline-flex; gap: 3px; margin: 0 .2rem; padding: 3px; border-radius: 999px; background: var(--yuz2); border: 1px solid var(--cizgi); vertical-align: middle; } .tb-cml-b { padding: .22rem .6rem; border: 0; border-radius: 999px; background: transparent; color: var(--soft); font-size: .8rem; font-weight: 600; cursor: pointer; line-height: 1.2; } .tb-cml-b.aktif { background: var(--kr); color: #fff; } .tb-cml-metin b { font-weight: 700; } .tb-cml-metin em { font-style: normal; font-weight: 700; color: var(--kr); } [data-bs-theme="dark"] .tb-cml-metin em { color: #E7A2AA; }
@media (max-width: 767.98px) { .tb-sec-radyokart, .tb-scc { flex-wrap: wrap; justify-content: center; } .tb-tkv2 { inline-size: 100%; } .tb-ftr { flex-direction: column; align-items: stretch; } .tb-ftr-sec { grid-template-columns: repeat(4, 1fr); } }
/* radyokart: dar */
.tb-rdk { padding: .4rem .55rem .4rem .5rem; gap: .45rem; } .tb-rdk-metin b { font-size: .76rem; } .tb-rdk-metin em { font-size: .62rem; } .tb-rdk small { padding: .12rem .32rem; font-size: .56rem; } .tb-sec-radyokart { gap: 4px; }
.tb-merdiven.tb-sec-radyokart { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; max-inline-size: 24rem; } .tb-rdk { justify-content: space-between; }
.tb-rdk { justify-content: flex-start; } .tb-rdk small { margin-inline-start: auto; }

/* ===== 15. KUŞAK (2026-10-20) ===== */
/* 1 WEB — KIYAS TABLOSU */
.tb-tbl { inline-size: 22rem; border: 1px solid var(--cizgi); border-radius: 10px; background: var(--yuz); overflow: hidden; font-variant-numeric: tabular-nums; } .tb-tbl-bas, .tb-tbl-s { display: grid; grid-template-columns: 1.3fr 1fr 1fr .9fr; align-items: center; gap: .4rem; padding: .4rem .7rem; } .tb-tbl-bas { font-size: .6rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--soft); background: var(--yuz2); border-bottom: 1px solid var(--cizgi); }
.tb-tbl-s { inline-size: 100%; border: 0; border-bottom: 1px solid var(--cizgi); background: transparent; color: var(--soft); font-size: .78rem; cursor: pointer; text-align: left; } .tb-tbl-s:last-child { border-bottom: 0; } .tb-tbl-s > span:first-child { display: inline-flex; align-items: center; gap: .4rem; } .tb-tbl-s > span:first-child i { inline-size: 9px; block-size: 9px; border-radius: 50%; border: 1.5px solid var(--cizgi); } .tb-tbl-s b { font-weight: 700; color: var(--ink); } .tb-tbl-s small { font-size: .7rem; font-weight: 700; }
.tb-tbl-s:hover { background: rgba(53,100,175,.06); } .tb-tbl-s.aktif { background: rgba(196,22,43,.07); color: var(--ink); } .tb-tbl-s.aktif > span:first-child i { background: var(--kr); border-color: var(--kr); } .tb-tbl-s.aktif small { color: var(--kr); } [data-bs-theme="dark"] .tb-tbl-s.aktif small { color: #E7A2AA; }
/* 2 KURUMSAL — YATAY KIYAS ÇUBUKLARI */
.tb-cbk { display: grid; gap: 4px; inline-size: 21rem; } .tb-cbk-s { display: grid; grid-template-columns: 2.6rem 1fr 4.6rem 4.4rem; align-items: center; gap: .5rem; inline-size: 100%; padding: .25rem .4rem; border: 0; border-radius: 6px; background: transparent; color: var(--soft); font-size: .76rem; cursor: pointer; text-align: left; } .tb-cbk-ad { font-weight: 600; } .tb-cbk-ray { display: block; block-size: 10px; border-radius: 5px; background: var(--yuz2); border: 1px solid var(--cizgi); overflow: hidden; } .tb-cbk-ray i { display: block; block-size: 100%; inline-size: var(--w); border-radius: 5px; background: var(--cizgi); transition: background .25s ease; } .tb-cbk-s b { font-weight: 700; color: var(--ink); text-align: right; font-variant-numeric: tabular-nums; } .tb-cbk-s small { font-size: .66rem; font-weight: 700; text-align: right; }
.tb-cbk-s:hover { background: rgba(53,100,175,.06); } .tb-cbk-s.aktif { background: rgba(196,22,43,.07); color: var(--ink); } .tb-cbk-s.aktif .tb-cbk-ray i { background: linear-gradient(90deg, #1B3F6B, var(--kr)); } .tb-cbk-s.aktif small { color: var(--kr); } [data-bs-theme="dark"] .tb-cbk-s.aktif small { color: #E7A2AA; }
/* 10 CLOUD — BÜYÜK RAKAM SAYACI */
.tb-byk { display: flex; flex-direction: column; align-items: flex-end; gap: .5rem; } .tb-byk-rakam { display: flex; align-items: baseline; gap: .3rem; } .tb-byk-rakam b { font: 700 2.2rem/1 var(--tb-font-baslik); letter-spacing: -.03em; color: var(--ink); font-variant-numeric: tabular-nums; } .tb-byk-rakam span { font-size: .9rem; color: var(--soft); } .tb-byk-rakam em { margin-inline-start: .5rem; padding: .2rem .5rem; border-radius: 6px; background: linear-gradient(135deg, #13213A, #1B3F6B); color: #fff; font-style: normal; font-size: .68rem; font-weight: 700; } [data-bs-theme="dark"] .tb-byk-rakam em { background: #fff; color: #13213A; }
.tb-byk-sec { position: relative; display: grid; grid-template-columns: repeat(var(--n), 1fr); padding: 3px; border-radius: 10px; background: var(--yuz2); border: 1px solid var(--cizgi); min-inline-size: 18rem; } .tb-byk-iz { position: absolute; inset-block: 3px; inset-inline-start: calc(3px + var(--i) * ((100% - 6px) / var(--n))); inline-size: calc((100% - 6px) / var(--n)); border-radius: 8px; background: var(--kr); transition: inset-inline-start .3s cubic-bezier(.2,.9,.3,1.2); } .tb-byk-b { position: relative; z-index: 1; padding: .4rem 0; border: 0; background: transparent; color: var(--soft); font-size: .8rem; font-weight: 600; cursor: pointer; } .tb-byk-b.aktif { color: #fff; }
/* 16 E-TİCARET — BALONLU KAYDIRICI */
.tb-bln { inline-size: 21rem; padding: 2.4rem 0 1.4rem; } .tb-bln-ray { position: relative; block-size: 8px; margin: 0 1.2rem; border-radius: 4px; background: var(--yuz2); border: 1px solid var(--cizgi); } .tb-bln-dolu { position: absolute; inset-block: 0; inset-inline-start: 0; inline-size: calc(var(--i) / (var(--n) - 1) * 100%); border-radius: 4px; background: linear-gradient(90deg, #1B3F6B, var(--kr)); transition: inline-size .35s ease; }
.tb-bln-top { position: absolute; inset-block-start: 50%; inset-inline-start: calc(var(--i) / (var(--n) - 1) * 100%); inline-size: 22px; block-size: 22px; margin: -11px 0 0 -11px; border-radius: 50%; background: #fff; border: 3px solid var(--kr); box-shadow: 0 4px 10px -4px rgba(196,22,43,.7); transition: inset-inline-start .35s cubic-bezier(.2,.9,.3,1.2); pointer-events: none; z-index: 2; }
.tb-bln-balon { position: absolute; inset-block-end: 20px; inset-inline-start: calc(var(--i) / (var(--n) - 1) * 100%); transform: translateX(-50%); padding: .3rem .6rem; border-radius: 8px; background: var(--ink); color: var(--yuz); font-size: .72rem; white-space: nowrap; transition: inset-inline-start .35s cubic-bezier(.2,.9,.3,1.2); z-index: 2; } [data-bs-theme="dark"] .tb-bln-balon { background: #fff; color: #13213A; } .tb-bln-balon i { position: absolute; inset-block-end: -5px; inset-inline-start: 50%; inline-size: 10px; block-size: 10px; margin-inline-start: -5px; background: inherit; transform: rotate(45deg); }
.tb-bln-d { position: absolute; inset-block-start: -4px; inset-inline-start: calc(var(--k) / (var(--n) - 1) * 100%); transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: .55rem; border: 0; background: transparent; padding: 0; cursor: pointer; color: var(--soft); } .tb-bln-d i { inline-size: 14px; block-size: 14px; border-radius: 50%; background: var(--cizgi); } .tb-bln-d b { font-size: .74rem; font-weight: 600; white-space: nowrap; } .tb-bln-d.aktif { color: var(--ink); } .tb-bln-d.aktif b { font-weight: 700; } .tb-bln-d:first-child { transform: translateX(-30%); } .tb-bln-d:last-child { transform: translateX(-70%); }
@media (max-width: 767.98px) { .tb-tbl, .tb-cbk, .tb-bln { inline-size: 100%; } .tb-byk { align-items: stretch; } .tb-byk-sec { min-inline-size: 0; } }

/* ===== 16. KUŞAK (2026-10-20) — SON ===== */
/* 1 WEB — SEKME + ÖZET ŞERİDİ */
.tb-ozt { inline-size: 22rem; } .tb-ozt-sek { position: relative; display: grid; grid-template-columns: repeat(var(--n), 1fr); padding: 3px; border-radius: 10px; background: var(--yuz2); border: 1px solid var(--cizgi); } .tb-ozt-iz { position: absolute; inset-block: 3px; inset-inline-start: calc(3px + var(--i) * ((100% - 6px) / var(--n))); inline-size: calc((100% - 6px) / var(--n)); border-radius: 8px; background: var(--yuz); box-shadow: 0 2px 6px rgba(0,0,0,.15); border: 1px solid var(--cizgi); transition: inset-inline-start .3s cubic-bezier(.2,.9,.3,1.2); } [data-bs-theme="dark"] .tb-ozt-iz { background: #1B3F6B; border-color: rgba(159,211,255,.3); }
.tb-ozt-b { position: relative; z-index: 1; padding: .38rem 0; border: 0; background: transparent; color: var(--soft); font-size: .8rem; font-weight: 600; cursor: pointer; } .tb-ozt-b.aktif { color: var(--ink); }
.tb-ozt-satir { display: flex; align-items: center; justify-content: space-between; gap: .6rem; margin-top: .5rem; padding: .45rem .75rem; border-radius: 8px; border: 1px dashed var(--cizgi); font-size: .76rem; color: var(--soft); } .tb-ozt-satir span { display: inline-flex; align-items: center; gap: .35rem; white-space: nowrap; } .tb-ozt-satir .bi { color: var(--mavi); } .tb-ozt-satir b { padding: .15rem .45rem; border-radius: 4px; background: var(--kr); color: #fff; font-size: .66rem; font-weight: 700; }
/* 2 KURUMSAL — DİKEY ADIMLAR */
.tb-adm { display: grid; min-inline-size: 16rem; } .tb-adm-s { display: grid; grid-template-columns: 26px 1fr auto; align-items: center; gap: .6rem; position: relative; padding: .2rem 0; border: 0; background: transparent; color: var(--soft); cursor: pointer; text-align: left; } .tb-adm-no { display: grid; place-items: center; inline-size: 26px; block-size: 26px; border-radius: 50%; border: 2px solid var(--cizgi); background: var(--yuz); font-size: .72rem; font-weight: 700; z-index: 1; transition: all .2s ease; } .tb-adm-cizgi { position: absolute; inset-inline-start: 12px; inset-block-start: 50%; block-size: 100%; inline-size: 2px; background: var(--cizgi); } .tb-adm-s:last-child .tb-adm-cizgi { display: none; }
.tb-adm-metin { display: flex; flex-direction: column; gap: .05rem; padding: .25rem .5rem; border-radius: 6px; } .tb-adm-metin b { font-size: .8rem; font-weight: 600; } .tb-adm-metin em { font-style: normal; font-size: .66rem; color: var(--soft); } .tb-adm-s small { font-size: .64rem; font-weight: 700; padding-inline-end: .3rem; }
.tb-adm-s.gecti .tb-adm-no { border-color: var(--mavi); color: var(--mavi); } .tb-adm-s.gecti .tb-adm-cizgi { background: var(--mavi); } .tb-adm-s.aktif .tb-adm-no { background: var(--kr); border-color: var(--kr); color: #fff; box-shadow: 0 0 0 4px rgba(196,22,43,.15); } .tb-adm-s.aktif { color: var(--ink); } .tb-adm-s.aktif .tb-adm-metin { background: rgba(196,22,43,.07); } .tb-adm-s.aktif small { color: var(--kr); } [data-bs-theme="dark"] .tb-adm-s.aktif small { color: #E7A2AA; } .tb-adm-s:hover .tb-adm-metin { background: rgba(53,100,175,.07); }
/* 10 CLOUD — KAZANÇ SATIRI */
.tb-kzn { inline-size: 22rem; } .tb-kzn-sek { position: relative; display: grid; grid-template-columns: repeat(var(--n), 1fr); padding: 3px; border-radius: 12px; background: var(--yuz2); border: 1px solid var(--cizgi); } .tb-kzn-iz { position: absolute; inset-block: 3px; inset-inline-start: calc(3px + var(--i) * ((100% - 6px) / var(--n))); inline-size: calc((100% - 6px) / var(--n)); border-radius: 10px; background: linear-gradient(135deg, #13213A, #1B3F6B); transition: inset-inline-start .3s cubic-bezier(.2,.9,.3,1.2); } [data-bs-theme="dark"] .tb-kzn-iz { background: #fff; }
.tb-kzn-b { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: .05rem; padding: .35rem 0; border: 0; background: transparent; color: var(--soft); cursor: pointer; } .tb-kzn-b b { font-size: .8rem; font-weight: 600; } .tb-kzn-b small { font-size: .6rem; font-weight: 700; } .tb-kzn-b.aktif { color: #fff; } .tb-kzn-b.aktif small { color: #E7A2AA; } [data-bs-theme="dark"] .tb-kzn-b.aktif { color: #13213A; } [data-bs-theme="dark"] .tb-kzn-b.aktif small { color: var(--kr); }
.tb-kzn-satir { display: flex; align-items: center; gap: .45rem; margin: .5rem 0 0; font-size: .8rem; color: var(--soft); } .tb-kzn-satir .bi { color: var(--kr); font-size: 1rem; } .tb-kzn-satir b { color: var(--ink); font-weight: 700; }
/* 16 E-TİCARET — ÖDEME PLANI (TAKSİT) KARTLARI */
.tb-tks { display: flex; gap: 8px; padding-top: 8px; } .tb-tks-k { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: .1rem; min-inline-size: 5.4rem; padding: .6rem .6rem .5rem; border: 1px solid var(--cizgi); border-radius: 10px; background: var(--yuz); color: var(--soft); cursor: pointer; text-align: left; transition: all .18s ease; } .tb-tks-radyo { position: absolute; inset-block-start: .55rem; inset-inline-end: .55rem; inline-size: 13px; block-size: 13px; border-radius: 50%; border: 2px solid var(--cizgi); transition: all .18s ease; } .tb-tks-k b { font-size: .78rem; font-weight: 600; padding-inline-end: 1.2rem; } .tb-tks-k em { font-style: normal; font-size: .92rem; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; } .tb-tks-k small { font-size: .62rem; color: var(--soft); white-space: nowrap; }
.tb-tks-serit { position: absolute; inset-block-start: -9px; inset-inline-start: 50%; transform: translateX(-50%); padding: .15rem .5rem; border-radius: 999px; background: var(--kr); color: #fff; font-size: .56rem; font-weight: 700; letter-spacing: .04em; white-space: nowrap; }
.tb-tks-k:hover { border-color: var(--mavi); } .tb-tks-k.aktif { border-color: var(--kr); box-shadow: 0 0 0 1px var(--kr); background: rgba(196,22,43,.05); color: var(--ink); } .tb-tks-k.aktif .tb-tks-radyo { border-color: var(--kr); background: radial-gradient(circle, var(--kr) 45%, transparent 50%); }
@media (max-width: 767.98px) { .tb-ozt, .tb-kzn { inline-size: 100%; } .tb-tks { flex-wrap: wrap; justify-content: center; } }

/* ===== 17. KUŞAK (2026-10-20) ===== */
/* 1 WEB — İKİ AŞAMA */
.tb-ika { inline-size: 22rem; } .tb-ika-ust { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; } .tb-ika-k { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: .55rem; align-items: center; padding: .55rem .7rem; border: 1px solid var(--cizgi); border-radius: 10px; background: var(--yuz); color: var(--soft); cursor: pointer; text-align: left; transition: all .18s ease; } .tb-ika-k .bi { grid-row: span 2; font-size: 1.2rem; color: var(--mavi); } .tb-ika-k b { font-size: .82rem; font-weight: 600; color: var(--ink); } .tb-ika-k small { font-size: .64rem; }
.tb-ika-k:hover { border-color: var(--mavi); } .tb-ika-k.aktif { border-color: var(--kr); box-shadow: 0 0 0 1px var(--kr); background: rgba(196,22,43,.05); } .tb-ika-k.aktif .bi { color: var(--kr); }
.tb-ika-alt { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; margin-top: 6px; padding: 5px; border-radius: 10px; background: var(--yuz2); border: 1px solid var(--cizgi); } .tb-ika-y { display: flex; flex-direction: column; align-items: center; gap: .05rem; padding: .32rem 0; border: 0; border-radius: 7px; background: transparent; color: var(--soft); cursor: pointer; } .tb-ika-y b { font-size: .78rem; font-weight: 600; } .tb-ika-y small { font-size: .6rem; font-weight: 700; } .tb-ika-y.aktif { background: var(--kr); color: #fff; } .tb-ika-y.aktif small { color: #fff; }
/* 2 KURUMSAL — SÜTUN GRAFİK */
.tb-sgf { display: flex; align-items: flex-end; gap: 10px; } .tb-sgf-s { display: flex; flex-direction: column; align-items: center; gap: .25rem; min-inline-size: 4.4rem; border: 0; background: transparent; padding: 0; cursor: pointer; color: var(--soft); } .tb-sgf-s small { font-size: .64rem; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; } .tb-sgf-cubuk { display: block; inline-size: 34px; block-size: var(--h); min-block-size: 6px; border-radius: 5px 5px 2px 2px; background: var(--cizgi); transition: background .25s ease, transform .25s ease; } .tb-sgf-s b { font-size: .76rem; font-weight: 600; } .tb-sgf-s em { font-style: normal; font-size: .6rem; font-weight: 700; min-block-size: .8rem; }
.tb-sgf-s:hover .tb-sgf-cubuk { background: var(--mavi); } .tb-sgf-s.aktif .tb-sgf-cubuk { background: linear-gradient(180deg, #D04555, var(--kr)); box-shadow: 0 8px 16px -10px rgba(196,22,43,.8); } .tb-sgf-s.aktif { color: var(--ink); } .tb-sgf-s.aktif em { color: var(--kr); } [data-bs-theme="dark"] .tb-sgf-s.aktif em { color: #E7A2AA; }
/* 10 CLOUD — TEK HALKA */
.tb-thk { display: flex; align-items: center; gap: 1rem; } .tb-thk-halka { position: relative; inline-size: 92px; block-size: 92px; } .tb-thk-halka svg { inline-size: 100%; block-size: 100%; transform: rotate(-90deg); } .tb-thk-halka .iz { fill: none; stroke: var(--cizgi); stroke-width: 9; } .tb-thk-halka .dolu { fill: none; stroke: var(--kr); stroke-width: 9; stroke-linecap: round; transition: stroke-dashoffset .6s ease; } .tb-thk-ic { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; } .tb-thk-ic b { font: 800 1.3rem/1 var(--tb-font-baslik); color: var(--ink); } .tb-thk-ic small { font-size: .58rem; letter-spacing: .08em; text-transform: uppercase; color: var(--soft); }
.tb-thk-bilgi { display: flex; flex-direction: column; gap: .05rem; margin-bottom: .45rem; } .tb-thk-bilgi b { font-size: .95rem; font-weight: 600; color: var(--ink); } .tb-thk-bilgi em { font-style: normal; font-size: .74rem; color: var(--soft); } .tb-thk-d { display: flex; gap: 4px; } .tb-thk-b { padding: .3rem .6rem; border: 1px solid var(--cizgi); border-radius: 6px; background: var(--yuz); color: var(--soft); font-size: .74rem; font-weight: 600; cursor: pointer; } .tb-thk-b.aktif { background: var(--kr); border-color: var(--kr); color: #fff; }
/* 16 E-TİCARET — ANAHTAR + YIL */
.tb-anh { min-inline-size: 18rem; } .tb-anh-ust { display: flex; align-items: center; gap: .7rem; } .tb-anh-sw { position: relative; inline-size: 48px; block-size: 28px; border: 0; border-radius: 14px; background: var(--cizgi); cursor: pointer; transition: background .25s ease; flex: none; } .tb-anh-sw i { position: absolute; inset-block-start: 3px; inset-inline-start: 3px; inline-size: 22px; block-size: 22px; border-radius: 50%; background: #fff; box-shadow: 0 2px 5px rgba(0,0,0,.35); transition: inset-inline-start .25s cubic-bezier(.2,.9,.3,1.2); } .tb-anh-sw.acik { background: var(--kr); } .tb-anh-sw.acik i { inset-inline-start: 23px; }
.tb-anh-etiket { display: flex; flex-direction: column; } .tb-anh-etiket b { font-size: .9rem; font-weight: 600; color: var(--ink); } .tb-anh-etiket small { font-size: .7rem; color: var(--soft); }
.tb-anh-yil { display: flex; align-items: center; gap: 6px; margin-top: .6rem; } .tb-anh-yil > span { font-size: .74rem; color: var(--soft); margin-inline-end: .2rem; } .tb-anh-y { display: flex; flex-direction: column; align-items: center; gap: .05rem; min-inline-size: 3.4rem; padding: .3rem .4rem; border: 1px solid var(--cizgi); border-radius: 8px; background: var(--yuz); color: var(--ink); font-size: .9rem; font-weight: 700; cursor: pointer; } .tb-anh-y small { font-size: .58rem; font-weight: 700; color: var(--soft); } .tb-anh-y.aktif { border-color: var(--kr); background: rgba(196,22,43,.07); box-shadow: 0 0 0 1px var(--kr); } .tb-anh-y.aktif small { color: var(--kr); } [data-bs-theme="dark"] .tb-anh-y.aktif small { color: #E7A2AA; }
@media (max-width: 767.98px) { .tb-ika { inline-size: 100%; } .tb-sgf { justify-content: center; } .tb-thk { flex-direction: column; } }

/* ===== 18. KUŞAK (2026-10-20) — KOMPAKT, TEK SATIR ===== */
/* 1 WEB — SEGMENT (üst simge indirim) */
.tb-sg2 { position: relative; display: grid; grid-template-columns: repeat(var(--n), auto); gap: 0; padding: 3px; border-radius: 9px; background: var(--yuz2); border: 1px solid var(--cizgi); } .tb-sg2-iz { position: absolute; inset-block: 3px; inset-inline-start: calc(3px + var(--i) * ((100% - 6px) / var(--n))); inline-size: calc((100% - 6px) / var(--n)); border-radius: 7px; background: var(--yuz); border: 1px solid var(--cizgi); box-shadow: 0 1px 3px rgba(0,0,0,.12); transition: inset-inline-start .25s cubic-bezier(.2,.9,.3,1.2); } [data-bs-theme="dark"] .tb-sg2-iz { background: #1B3F6B; border-color: rgba(159,211,255,.3); }
.tb-sg2-b { position: relative; z-index: 1; padding: .42rem .95rem; border: 0; background: transparent; color: var(--soft); font-size: .82rem; font-weight: 600; cursor: pointer; white-space: nowrap; } .tb-sg2-b sup { margin-inline-start: .2rem; font-size: .58rem; font-weight: 700; color: var(--kr); vertical-align: .35em; } .tb-sg2-b.aktif { color: var(--ink); } [data-bs-theme="dark"] .tb-sg2-b.aktif sup { color: #E7A2AA; }
/* 2 KURUMSAL — İKİLİ + YIL ADIMLAYICI */
.tb-ikl { display: flex; align-items: center; gap: 8px; } .tb-ikl-mod { display: flex; padding: 3px; border-radius: 9px; background: var(--yuz2); border: 1px solid var(--cizgi); } .tb-ikl-m { padding: .4rem .9rem; border: 0; border-radius: 7px; background: transparent; color: var(--soft); font-size: .82rem; font-weight: 600; cursor: pointer; } .tb-ikl-m.aktif { background: var(--kr); color: #fff; }
.tb-ikl-yil { display: inline-flex; align-items: stretch; border-radius: 9px; border: 1px solid var(--cizgi); background: var(--yuz); overflow: hidden; } .tb-ikl-ok { inline-size: 34px; border: 0; background: transparent; color: var(--mavi); font-size: 1.1rem; font-weight: 600; cursor: pointer; } .tb-ikl-ok:disabled { color: var(--cizgi); cursor: default; } .tb-ikl-ok:hover:not(:disabled) { background: rgba(53,100,175,.08); } .tb-ikl-yil > span { display: inline-flex; align-items: baseline; gap: .4rem; padding: 0 .6rem; border-inline: 1px solid var(--cizgi); font-size: .82rem; color: var(--ink); line-height: 2.4; } .tb-ikl-yil b { font-weight: 700; white-space: nowrap; } .tb-ikl-yil small { font-size: .62rem; font-weight: 700; color: var(--kr); } [data-bs-theme="dark"] .tb-ikl-yil small { color: #E7A2AA; }
/* 10 CLOUD — KAPSÜL KAYDIRICI */
.tb-kps { display: inline-flex; align-items: center; gap: .9rem; padding: .3rem .95rem .3rem .85rem; border-radius: 999px; border: 1px solid var(--cizgi); background: var(--yuz); } .tb-kps-etiket { display: inline-flex; align-items: baseline; gap: .4rem; min-inline-size: 7rem; } .tb-kps-etiket b { font-size: .84rem; font-weight: 700; color: var(--ink); white-space: nowrap; } .tb-kps-etiket small { font-size: .62rem; font-weight: 700; color: var(--kr); white-space: nowrap; } [data-bs-theme="dark"] .tb-kps-etiket small { color: #E7A2AA; }
.tb-kps-ray { position: relative; display: block; inline-size: 9rem; block-size: 4px; border-radius: 2px; background: var(--cizgi); } .tb-kps-dolu { position: absolute; inset-block: 0; inset-inline-start: 0; inline-size: calc(var(--i) / (var(--n) - 1) * 100%); border-radius: 2px; background: var(--kr); transition: inline-size .3s ease; } .tb-kps-n { position: absolute; inset-block-start: 50%; inset-inline-start: calc(var(--k) / (var(--n) - 1) * 100%); inline-size: 12px; block-size: 12px; margin: -6px 0 0 -6px; border-radius: 50%; border: 2px solid var(--cizgi); background: var(--yuz); cursor: pointer; padding: 0; transition: all .2s ease; } .tb-kps-n:hover { border-color: var(--mavi); transform: scale(1.2); } .tb-kps-n.aktif { border-color: var(--kr); background: var(--kr); box-shadow: 0 0 0 3px rgba(196,22,43,.18); transform: scale(1.25); }
/* 16 E-TİCARET — METİN BAĞLANTILARI */
.tb-mtn { display: inline-flex; align-items: center; gap: .55rem; padding: .25rem 0; } .tb-mtn-ayrac { inline-size: 4px; block-size: 4px; border-radius: 50%; background: var(--cizgi); } .tb-mtn-b { position: relative; padding: .25rem .1rem; border: 0; background: transparent; color: var(--soft); font-size: .86rem; font-weight: 500; cursor: pointer; white-space: nowrap; transition: color .15s ease; } .tb-mtn-b small { margin-inline-start: .25rem; font-size: .62rem; font-weight: 700; color: var(--soft); } .tb-mtn-b::after { content: ""; position: absolute; inset-inline: 0; inset-block-end: 0; block-size: 2px; border-radius: 1px; background: var(--kr); transform: scaleX(0); transition: transform .2s ease; }
.tb-mtn-b:hover { color: var(--ink); } .tb-mtn-b.aktif { color: var(--ink); font-weight: 700; } .tb-mtn-b.aktif small { color: var(--kr); } .tb-mtn-b.aktif::after { transform: scaleX(1); } [data-bs-theme="dark"] .tb-mtn-b.aktif small { color: #E7A2AA; }
@media (max-width: 767.98px) { .tb-sg2 { inline-size: 100%; grid-template-columns: repeat(var(--n), 1fr); } .tb-sg2-b { padding-inline: .3rem; } .tb-ikl, .tb-mtn { flex-wrap: wrap; justify-content: center; } .tb-kps { inline-size: 100%; justify-content: space-between; } }
.tb-sg2 { grid-template-columns: repeat(var(--n), 1fr); } .tb-sg2-b { padding-inline: .8rem; }

/* ===== 19. KUŞAK — USTA BİLEŞEN ===== */
.tb-merdiven.tb-sec-usta { display: block; inline-size: auto; max-inline-size: none; }
.tb-ust { position: relative; display: grid; grid-template-columns: repeat(var(--n), 1fr); padding: 3px; border-radius: 11px; background: var(--yuz2); border: 1px solid var(--cizgi); inline-size: 21rem; touch-action: none; user-select: none; cursor: grab; } .tb-ust.surukle { cursor: grabbing; }
.tb-ust-dil { position: absolute; inset-block: 3px; inset-inline-start: 3px; inline-size: calc((100% - 6px) / var(--n)); transform: translateX(calc(var(--p, 0) * 100%)); border-radius: 9px; background: linear-gradient(135deg, #13213A, #1B3F6B); box-shadow: 0 4px 12px -6px rgba(19,33,58,.6), inset 0 1px 0 rgba(255,255,255,.12); will-change: transform; } .tb-ust.surukle .tb-ust-dil { transform: translateX(calc(var(--p, 0) * 100%)) scaleY(.92); }
[data-bs-theme="dark"] .tb-ust-dil { background: linear-gradient(135deg, #D04555, var(--kr)); box-shadow: 0 6px 14px -8px rgba(196,22,43,.8), inset 0 1px 0 rgba(255,255,255,.2); }
.tb-ust-b { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; gap: .25rem; padding: .46rem .3rem; border: 0; background: transparent; color: var(--soft); font-size: .82rem; cursor: pointer; transition: color .18s ease; } .tb-ust-b b { font-weight: 600; } .tb-ust-b sup { font-size: .58rem; font-weight: 700; color: var(--kr); vertical-align: .3em; font-variant-numeric: tabular-nums; } .tb-ust-b.en-iyi::after { content: ""; position: absolute; inset-block-start: 5px; inset-inline-end: 7px; inline-size: 5px; block-size: 5px; border-radius: 50%; background: var(--kr); box-shadow: 0 0 6px var(--kr); }
.tb-ust-b.aktif { color: #fff; } .tb-ust-b.aktif sup { color: #E7A2AA; } .tb-ust-b.aktif.en-iyi::after { background: #fff; box-shadow: none; } .tb-ust-b:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--mavi); border-radius: 8px; } .tb-ust.onizliyor .tb-ust-b.aktif { color: #fff; }
.tb-ust-alt { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: .4rem; padding: 0 .2rem; font-size: .74rem; color: var(--soft); } .tb-ust-ozet { font-variant-numeric: tabular-nums; } .tb-ust-kazanc { display: inline-flex; align-items: center; gap: .1rem; font-weight: 700; color: var(--kr); } [data-bs-theme="dark"] .tb-ust-kazanc { color: #E7A2AA; } .tb-ust-kazanc .bi { font-size: 1rem; }
@media (max-width: 767.98px) { .tb-ust { inline-size: 100%; } }
.tb-ust-b.en-iyi::after { inset-block-start: 4px; inset-inline-end: 4px; inline-size: 4px; block-size: 4px; }

/* ===== USTA — katman 2: ücretsiz ay şeridi, ipucu, delta, yapışkan pil ===== */
.tb-ust-kazanc small { font-size: .68rem; font-weight: 600; color: var(--soft); margin-inline-start: .15rem; }
.tb-ust-serit { display: flex; gap: 2px; margin-top: .35rem; padding: 0 .2rem; } .tb-ust-serit i { flex: 1 1 0; block-size: 4px; border-radius: 2px; background: var(--cizgi); animation: tbSeritGel .35s ease both; animation-delay: calc(var(--d) * 12ms); } .tb-ust-serit i.bedava { background: var(--kr); box-shadow: 0 0 6px rgba(196,22,43,.45); } @keyframes tbSeritGel { from { transform: scaleY(0); opacity: 0; } to { transform: scaleY(1); opacity: 1; } } html.tb-er-azalt .tb-ust-serit i, @media (prefers-reduced-motion: reduce) { .tb-ust-serit i { animation: none; } }
.tb-ust-ipucu { position: absolute; inset-block-end: calc(100% + 9px); inset-inline-start: var(--x, 50%); transform: translate(-50%, 4px); display: flex; flex-direction: column; gap: .1rem; padding: .45rem .65rem; border-radius: 8px; background: #13213A; color: #E6ECF5; font-size: .7rem; line-height: 1.35; white-space: nowrap; box-shadow: 0 10px 24px -10px rgba(0,0,0,.6); opacity: 0; pointer-events: none; transition: opacity .15s ease, transform .15s ease; z-index: 5; } .tb-ust-ipucu::after { content: ""; position: absolute; inset-block-start: 100%; inset-inline-start: 50%; margin-inline-start: -5px; border: 5px solid transparent; border-top-color: #13213A; } .tb-ust-ipucu.acik { opacity: 1; transform: translate(-50%, 0); } .tb-ust-ipucu b { font-size: .74rem; } .tb-ust-ipucu em { font-style: normal; font-weight: 700; } .tb-ust-ipucu .kz { color: #E7A2AA; font-weight: 700; }
[data-bs-theme="dark"] .tb-ust-ipucu { background: #fff; color: #13213A; } [data-bs-theme="dark"] .tb-ust-ipucu::after { border-top-color: #fff; } [data-bs-theme="dark"] .tb-ust-ipucu .kz { color: var(--kr); }
.tb-pk9-satir { position: relative; } .tb-delta { position: absolute; inset-inline-start: 0; inset-block-start: -.2rem; padding: .12rem .45rem; border-radius: 999px; font-size: .66rem; font-weight: 700; white-space: nowrap; pointer-events: none; animation: tbDelta 1.6s ease-out both; } .tb-delta.dusus { background: rgba(196,22,43,.12); color: var(--kr); } .tb-delta.artis { background: rgba(53,100,175,.12); color: var(--mavi); } [data-bs-theme="dark"] .tb-delta.dusus { color: #E7A2AA; } [data-bs-theme="dark"] .tb-delta.artis { color: #9FD3FF; } @keyframes tbDelta { 0% { opacity: 0; transform: translateY(6px); } 15% { opacity: 1; transform: translateY(-4px); } 70% { opacity: 1; transform: translateY(-18px); } 100% { opacity: 0; transform: translateY(-26px); } }
.tb-yapisik { position: fixed; inset-block-end: 18px; inset-inline-start: 50%; transform: translate(-50%, 24px); display: inline-flex; align-items: center; gap: 2px; padding: 4px 4px 4px 12px; border-radius: 999px; background: rgba(19,33,58,.92); color: #E6ECF5; backdrop-filter: blur(8px); box-shadow: 0 14px 30px -12px rgba(0,0,0,.6); opacity: 0; pointer-events: none; transition: opacity .25s ease, transform .25s cubic-bezier(.2,.9,.3,1.2); z-index: 1040; } .tb-yapisik.gorunur { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; } html.tb-yan-panel-acik .tb-yapisik { opacity: 0; pointer-events: none; }
[data-bs-theme="dark"] .tb-yapisik { background: rgba(255,255,255,.94); color: #13213A; }
.tb-yapisik-etiket { font-size: .68rem; letter-spacing: .04em; margin-inline-end: 6px; opacity: .7; } .tb-yapisik-b { padding: .3rem .65rem; border: 0; border-radius: 999px; background: transparent; color: inherit; font-size: .76rem; font-weight: 600; cursor: pointer; } .tb-yapisik-b sup { font-size: .54rem; font-weight: 700; margin-inline-start: .15rem; color: #E7A2AA; vertical-align: .3em; } .tb-yapisik-b.aktif { background: var(--kr); color: #fff; } .tb-yapisik-b.aktif sup { color: #fff; } [data-bs-theme="dark"] .tb-yapisik-b sup { color: var(--kr); }
@media (max-width: 767.98px) { .tb-yapisik { inset-inline: 12px; transform: translateY(24px); justify-content: center; } .tb-yapisik.gorunur { transform: none; } .tb-yapisik-etiket { display: none; } .tb-yapisik-b { padding-inline: .5rem; } .tb-ust-ipucu { display: none; } }

/* ===== 20. KUŞAK — delta sağa, SÜRGÜ, TEKERLEK ===== */
.tb-delta { inset-inline-start: auto; inset-inline-end: 0; inset-block-start: 50%; margin-block-start: -.7rem; }
/* CETVEL */
.tb-merdiven.tb-sec-surgu { display: block; } .tb-srg { position: relative; inline-size: 24rem; padding-top: 2.1rem; user-select: none; } .tb-srg-bayrak-kap { position: absolute; inset-block-start: 0; inset-inline-start: var(--p, 0%); transform: translateX(-50%); pointer-events: none; } .tb-srg-bayrak { display: inline-flex; align-items: baseline; gap: .3rem; padding: .22rem .55rem; border-radius: 6px; background: #13213A; color: #fff; white-space: nowrap; font-size: .72rem; box-shadow: 0 6px 14px -8px rgba(0,0,0,.6); position: relative; } .tb-srg-bayrak::after { content: ""; position: absolute; inset-block-start: 100%; inset-inline-start: 50%; margin-inline-start: -4px; border: 4px solid transparent; border-top-color: #13213A; } .tb-srg-bayrak b { font-size: .86rem; font-weight: 700; font-variant-numeric: tabular-nums; } .tb-srg-bayrak small { opacity: .75; } [data-bs-theme="dark"] .tb-srg-bayrak { background: #fff; color: #13213A; } [data-bs-theme="dark"] .tb-srg-bayrak::after { border-top-color: #fff; }
.tb-srg-ray { position: relative; block-size: 10px; border-radius: 5px; background: var(--yuz2); border: 1px solid var(--cizgi); cursor: pointer; touch-action: none; background-image: repeating-linear-gradient(90deg, transparent 0 calc(100% / var(--max) - 1px), var(--cizgi) calc(100% / var(--max) - 1px) calc(100% / var(--max))); } .tb-srg-odenen { position: absolute; inset-block: 0; inset-inline-start: 0; inline-size: calc(var(--ay) / var(--max) * 100%); border-radius: 5px; background: linear-gradient(90deg, #1B3F6B, var(--mavi)); transition: inline-size .35s ease; } .tb-srg-bedava { position: absolute; inset-block: 0; inset-inline-start: calc((var(--ay) - var(--bedava)) / var(--max) * 100%); inline-size: calc(var(--bedava) / var(--max) * 100%); border-radius: 0 5px 5px 0; background: var(--kr); box-shadow: 0 0 8px rgba(196,22,43,.5); transition: all .35s ease; }
.tb-srg-tutamac { position: absolute; inset-block-start: 50%; inset-inline-start: var(--p, 0%); inline-size: 20px; block-size: 20px; margin: -10px 0 0 -10px; border-radius: 50%; background: #fff; border: 3px solid var(--kr); box-shadow: 0 2px 8px rgba(0,0,0,.35); cursor: grab; transition: transform .15s ease; } .tb-srg.surukle .tb-srg-tutamac { cursor: grabbing; transform: scale(1.15); }
.tb-srg-isaretler { position: relative; block-size: 2.4rem; margin-top: .35rem; } .tb-srg-isaret { position: absolute; inset-block-start: 0; inset-inline-start: var(--p); transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: .05rem; padding: 0 .2rem; border: 0; background: transparent; color: var(--soft); cursor: pointer; } .tb-srg-isaret i { inline-size: 1px; block-size: 6px; background: var(--cizgi); } .tb-srg-isaret b { font-size: .76rem; font-weight: 600; white-space: nowrap; } .tb-srg-isaret small { font-size: .6rem; font-weight: 700; color: var(--kr); white-space: nowrap; } .tb-srg-isaret.aktif { color: var(--ink); } .tb-srg-isaret.aktif i { background: var(--kr); block-size: 8px; } .tb-srg-isaret:focus-visible { outline: none; } .tb-srg-isaret:focus-visible b { box-shadow: 0 0 0 2px var(--mavi); border-radius: 4px; } [data-bs-theme="dark"] .tb-srg-isaret small { color: #E7A2AA; }
.tb-srg-alt { margin: .2rem 0 0; font-size: .74rem; color: var(--soft); } .tb-srg-alt b { color: var(--kr); font-weight: 700; } [data-bs-theme="dark"] .tb-srg-alt b { color: #E7A2AA; } .tb-srg-alt span { color: var(--soft); }
/* ÇARK */
.tb-merdiven.tb-sec-tekerlek { display: block; } .tb-tkr { inline-size: 17rem; outline: none; user-select: none; touch-action: none; } .tb-tkr-pencere { position: relative; block-size: 84px; overflow: hidden; border-radius: 12px; background: var(--yuz2); border: 1px solid var(--cizgi); perspective: 420px; -webkit-mask-image: linear-gradient(180deg, transparent, #000 28%, #000 72%, transparent); mask-image: linear-gradient(180deg, transparent, #000 28%, #000 72%, transparent); cursor: grab; } .tb-tkr.surukle .tb-tkr-pencere { cursor: grabbing; }
.tb-tkr-vurgu { position: absolute; inset-inline: 6px; inset-block-start: 50%; block-size: 30px; margin-block-start: -15px; border-radius: 8px; background: rgba(196,22,43,.1); border: 1px solid rgba(196,22,43,.35); pointer-events: none; } .tb-tkr-liste { position: absolute; inset: 0; transform-style: preserve-3d; } .tb-tkr-r { position: absolute; inset-inline: 10px; inset-block-start: 50%; block-size: 30px; margin-block-start: -15px; display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: .6rem; padding: 0 .55rem; color: var(--soft); transform: translateY(calc(var(--d) * 30px)) rotateX(calc(var(--d) * -26deg)) translateZ(calc(abs(var(--d)) * -10px)); opacity: calc(1 - abs(var(--d)) * .42); cursor: pointer; } .tb-tkr-r b { font-size: .8rem; font-weight: 600; } .tb-tkr-r em { font-style: normal; font-size: .72rem; font-variant-numeric: tabular-nums; } .tb-tkr-r small { font-size: .62rem; font-weight: 700; color: var(--kr); min-inline-size: 3.6rem; text-align: right; } .tb-tkr-r.yakin { color: var(--ink); } .tb-tkr-r.yakin small { color: var(--kr); } [data-bs-theme="dark"] .tb-tkr-r small { color: #E7A2AA; } .tb-tkr:focus-visible .tb-tkr-pencere { box-shadow: 0 0 0 2px var(--mavi); }
.tb-tkr-ipucu { display: flex; align-items: center; gap: .35rem; margin-top: .3rem; font-size: .66rem; color: var(--soft); opacity: .8; }
@media (max-width: 767.98px) { .tb-srg, .tb-tkr { inline-size: 100%; } }
.tb-srg { padding-inline: 1.5rem; inline-size: 27rem; }
.tb-yapisik-b.aktif { background: #C4162B; } .tb-yapisik-b sup { color: #E7A2AA; } [data-bs-theme="dark"] .tb-yapisik-b sup { color: #C4162B; } .tb-yapisik-b.aktif sup { color: #fff; }

/* BANT (9 Windows) renk uyarlaması 2026-10-20: site paletine — aydınlık lacivert şerit + beyaz seçili; karanlık lacivert şerit + kırmızı seçili */
.tb-bnt-serit { background: linear-gradient(135deg, #13213A, #1B3F6B); border-radius: 6px; } .tb-bnt-b { color: rgba(230,236,245,.8); border-right-color: rgba(159,211,255,.18); } .tb-bnt-b.aktif { background: #fff; color: #13213A; } .tb-bnt-b:hover:not(.aktif) { background: rgba(159,211,255,.12); color: #fff; } .tb-bnt-cizgi { background: #1B3F6B; opacity: .35; } .tb-bnt-ust small { color: #C4162B; }
[data-bs-theme="dark"] .tb-bnt-serit { background: #1B3F6B; box-shadow: inset 0 1px 0 rgba(255,255,255,.08); } [data-bs-theme="dark"] .tb-bnt-b.aktif { background: linear-gradient(135deg, #D04555, #C4162B); color: #fff; } [data-bs-theme="dark"] .tb-bnt-cizgi { background: #C4162B; opacity: .45; }

/* PİL (14 Ucuz) renk uyarlaması 2026-10-20: dolu hücreler lacivert; seçili hücre aydınlıkta beyaz halkalı lacivert, karanlıkta logo kırmızısı */
.tb-pil-h.dolu { background: linear-gradient(180deg, #1B3F6B, #13213A); color: #E6ECF5; } .tb-pil-h.aktif { box-shadow: inset 0 0 0 2px rgba(255,255,255,.7), 0 0 12px rgba(27,63,107,.5); } .tb-pil-h:hover:not(.dolu) { background: rgba(53,100,175,.14); } .tb-pil-ust span { color: #C4162B; }
[data-bs-theme="dark"] .tb-pil-h.dolu { background: #1B3F6B; color: #E6ECF5; } [data-bs-theme="dark"] .tb-pil-h.dolu.aktif { background: linear-gradient(180deg, #D04555, #C4162B); color: #fff; box-shadow: inset 0 0 0 2px rgba(255,255,255,.35), 0 0 14px rgba(196,22,43,.45); }

/* PİL renk düzeltmesi 2: kırmızı yok — seçili hücre her kipte beyaz + lacivert yazı */
.tb-pil-h.dolu.aktif, [data-bs-theme="dark"] .tb-pil-h.dolu.aktif { background: #fff; color: #13213A; box-shadow: inset 0 0 0 2px #1B3F6B, 0 0 12px rgba(27,63,107,.45); }
/* KIYAS (10 Cloud, 2026-10-20): segment + ödenen/normal fiyat kıyas çubuğu */
.tb-merdiven.tb-sec-kiyas { display: block; } .tb-kys { inline-size: 23rem; } .tb-kys-sek { position: relative; display: grid; grid-template-columns: repeat(var(--n), 1fr); padding: 3px; border-radius: 10px; background: var(--yuz2); border: 1px solid var(--cizgi); } .tb-kys-iz { position: absolute; inset-block: 3px; inset-inline-start: calc(3px + var(--i) * ((100% - 6px) / var(--n))); inline-size: calc((100% - 6px) / var(--n)); border-radius: 8px; background: linear-gradient(135deg, #13213A, #1B3F6B); transition: inset-inline-start .3s cubic-bezier(.2,.9,.3,1.2); } [data-bs-theme="dark"] .tb-kys-iz { background: #fff; }
.tb-kys-b { position: relative; z-index: 1; display: inline-flex; align-items: baseline; justify-content: center; gap: .25rem; padding: .42rem 0; border: 0; background: transparent; color: var(--soft); font-size: .82rem; cursor: pointer; } .tb-kys-b b { font-weight: 600; } .tb-kys-b small { font-size: .6rem; font-weight: 700; color: var(--mavi); } .tb-kys-b.aktif { color: #fff; } .tb-kys-b.aktif small { color: #9FD3FF; } [data-bs-theme="dark"] .tb-kys-b.aktif { color: #13213A; } [data-bs-theme="dark"] .tb-kys-b.aktif small { color: #1B3F6B; } .tb-kys-b:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--mavi); border-radius: 8px; }
.tb-kys-cubuk { position: relative; block-size: 22px; margin-top: .55rem; } .tb-kys-normal { position: absolute; inset: 0; border-radius: 6px; background: repeating-linear-gradient(135deg, var(--cizgi) 0 4px, transparent 4px 9px); opacity: .7; } .tb-kys-odenen { position: absolute; inset-block: 0; inset-inline-start: 0; inline-size: calc(var(--o) * 100%); border-radius: 6px; background: linear-gradient(90deg, #13213A, #1B3F6B); transition: inline-size .4s ease; } [data-bs-theme="dark"] .tb-kys-odenen { background: linear-gradient(90deg, #1B3F6B, #3564AF); }
.tb-kys-e1, .tb-kys-e2 { position: absolute; inset-block: 0; display: inline-flex; align-items: center; gap: .25rem; font-size: .68rem; font-weight: 700; white-space: nowrap; } .tb-kys-e1 { inset-inline-start: .55rem; color: #fff; } .tb-kys-e2 { inset-inline-end: .55rem; color: var(--soft); } .tb-kys-e1 em, .tb-kys-e2 em { font-style: normal; font-weight: 500; opacity: .8; }
.tb-kys-alt { margin: .35rem 0 0; font-size: .74rem; color: var(--soft); } .tb-kys-alt b { color: var(--ink); font-weight: 700; }
@media (max-width: 767.98px) { .tb-kys { inline-size: 100%; } }

/* KİLİT AÇMA (11 Ajans) renk uyarlaması 2026-10-20: sarı/kırmızı yerine lacivert dolgu; açık kilitler mavi, seçili kilit aydınlıkta lacivert, karanlıkta beyaz */
.tb-klc-dolu { background: linear-gradient(90deg, #3564AF, #1B3F6B); box-shadow: 0 0 10px rgba(53,100,175,.35); } .tb-klc-k.acik > i { border-color: #3564AF; color: #3564AF; }
.tb-klc-k.aktif > i { background: linear-gradient(135deg, #13213A, #1B3F6B); border-color: #1B3F6B; color: #fff; box-shadow: 0 0 0 5px rgba(27,63,107,.16), 0 8px 18px -8px rgba(19,33,58,.7); } .tb-klc-k.aktif b { color: #13213A; }
[data-bs-theme="dark"] .tb-klc-dolu { background: linear-gradient(90deg, #1B3F6B, #9FD3FF); box-shadow: 0 0 10px rgba(159,211,255,.3); } [data-bs-theme="dark"] .tb-klc-k.acik > i { border-color: #9FD3FF; color: #9FD3FF; } [data-bs-theme="dark"] .tb-klc-k.aktif > i { background: #fff; border-color: #fff; color: #13213A; box-shadow: 0 0 0 5px rgba(255,255,255,.12), 0 0 14px rgba(159,211,255,.4); } [data-bs-theme="dark"] .tb-klc-k.aktif b { color: #fff; }

/* CÜMLE (17 WordPress) kenar uyarlaması 2026-10-20: oval yerine pahlı (kesik köşe) lacivert şerit; seçili beyaz pahlı blok; fiyat altında kırmızı vurgu çizgisi */
.tb-cml-sec { --pah: 7px; gap: 0; padding: 3px; border-radius: 0; border: 0; background: linear-gradient(135deg, #13213A, #1B3F6B); clip-path: polygon(var(--pah) 0, 100% 0, 100% calc(100% - var(--pah)), calc(100% - var(--pah)) 100%, 0 100%, 0 var(--pah)); box-shadow: none; }
[data-bs-theme="dark"] .tb-cml-sec { background: linear-gradient(135deg, #1B3F6B, #13213A); outline: 1px solid rgba(159,211,255,.25); outline-offset: -1px; }
.tb-cml-b { --pah: 5px; border-radius: 0; padding: .28rem .7rem; color: rgba(230,236,245,.8); clip-path: polygon(var(--pah) 0, 100% 0, 100% calc(100% - var(--pah)), calc(100% - var(--pah)) 100%, 0 100%, 0 var(--pah)); transition: background .18s ease, color .18s ease; } .tb-cml-b:hover:not(.aktif) { background: rgba(159,211,255,.12); color: #fff; }
.tb-cml-b.aktif { background: #fff; color: #13213A; font-weight: 700; } .tb-cml-b:focus-visible { outline: none; background: rgba(159,211,255,.2); color: #fff; }
.tb-cml-metin b { position: relative; padding: 0 .1rem; font-size: 1.08rem; } .tb-cml-metin b::after { content: ""; position: absolute; inset-inline: 0; inset-block-end: -.1rem; block-size: 3px; background: linear-gradient(90deg, #C4162B, #DC7380); clip-path: polygon(0 0, 100% 0, calc(100% - 3px) 100%, 3px 100%); }
.tb-cml-metin em { padding: .05rem .4rem; background: #C4162B; color: #fff; font-size: .82rem; clip-path: polygon(4px 0, 100% 0, 100% calc(100% - 4px), calc(100% - 4px) 100%, 0 100%, 0 4px); } [data-bs-theme="dark"] .tb-cml-metin em { background: #fff; color: #C4162B; }

/* CÜMLE (17 WordPress) çağdaş uyarlama 2026-10-20: pah yok; cam yüzeyli segment, yumuşak derinlikli seçili blok, tonlu etiketler, ince kontur, tabular rakam */
.tb-cml-sec, [data-bs-theme="dark"] .tb-cml-sec { --pah: 0; clip-path: none; gap: 2px; padding: 3px; border-radius: 12px; background: rgba(19,33,58,.05); border: 1px solid rgba(19,33,58,.1); outline: 0; backdrop-filter: blur(10px); box-shadow: inset 0 1px 0 rgba(255,255,255,.5); }
[data-bs-theme="dark"] .tb-cml-sec { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.1); box-shadow: inset 0 1px 0 rgba(255,255,255,.06); }
.tb-cml-b { clip-path: none; border-radius: 9px; padding: .3rem .7rem; color: var(--soft); font-weight: 500; font-variant-numeric: tabular-nums; transition: background .2s ease, color .2s ease, box-shadow .2s ease, transform .2s ease; } .tb-cml-b:hover:not(.aktif) { background: rgba(19,33,58,.06); color: var(--ink); } [data-bs-theme="dark"] .tb-cml-b:hover:not(.aktif) { background: rgba(255,255,255,.08); color: #fff; }
.tb-cml-b.aktif { background: #fff; color: #13213A; font-weight: 600; box-shadow: 0 1px 2px rgba(19,33,58,.12), 0 6px 16px -8px rgba(19,33,58,.35), inset 0 0 0 1px rgba(19,33,58,.06); } [data-bs-theme="dark"] .tb-cml-b.aktif { background: linear-gradient(180deg, #2A5285, #1B3F6B); color: #fff; box-shadow: 0 1px 0 rgba(255,255,255,.12) inset, 0 8px 20px -10px rgba(0,0,0,.8); } .tb-cml-b:active { transform: scale(.97); } .tb-cml-b:focus-visible { outline: none; box-shadow: 0 0 0 2px #3564AF; background: transparent; color: var(--ink); }
.tb-cml-metin { font-weight: 400; letter-spacing: -.005em; } .tb-cml-metin b { padding: .05rem .45rem; border-radius: 8px; font-size: 1rem; font-weight: 650; font-variant-numeric: tabular-nums; background: rgba(19,33,58,.06); color: #13213A; } .tb-cml-metin b::after { content: none; } [data-bs-theme="dark"] .tb-cml-metin b { background: rgba(255,255,255,.08); color: #fff; }
.tb-cml-metin em, [data-bs-theme="dark"] .tb-cml-metin em { clip-path: none; padding: .05rem .5rem; border-radius: 999px; background: rgba(196,22,43,.1); color: #C4162B; font-weight: 600; font-size: .82rem; border: 1px solid rgba(196,22,43,.18); } [data-bs-theme="dark"] .tb-cml-metin em { background: rgba(231,162,170,.12); color: #E7A2AA; border-color: rgba(231,162,170,.25); }

/* CÜMLE → ADA (17 WordPress, 2026-10-20): kapsayıcısız çipler; seçili çip genişleyip fiyatı gösterir (dinamik ada), diğerleri kısa */
.tb-cml-ada { max-inline-size: 26rem; } .tb-cml-ada .tb-cml-metin { font-size: .8rem; font-weight: 600; letter-spacing: .02em; color: var(--soft); margin-bottom: .4rem; line-height: 1.2; }
.tb-cml-ada .tb-cml-sec, [data-bs-theme="dark"] .tb-cml-ada .tb-cml-sec { display: flex; gap: 6px; padding: 0; margin: 0; background: transparent; border: 0; box-shadow: none; backdrop-filter: none; border-radius: 0; }
.tb-cml-ada .tb-cml-b { display: inline-flex; align-items: center; gap: 0; block-size: 40px; padding: 0 .85rem; border-radius: 14px; background: rgba(19,33,58,.06); border: 1px solid rgba(19,33,58,.08); color: var(--ink); font-weight: 500; box-shadow: none; transition: flex-grow .45s cubic-bezier(.2,.9,.25,1.1), background .25s ease, color .25s ease, box-shadow .25s ease; flex: 0 1 auto; overflow: hidden; white-space: nowrap; } .tb-cml-ada .tb-cml-b b { font-weight: 600; font-size: .84rem; }
.tb-cml-ada .tb-cml-ic { display: inline-flex; align-items: baseline; gap: .4rem; max-inline-size: 0; opacity: 0; margin-inline-start: 0; transition: max-inline-size .45s cubic-bezier(.2,.9,.25,1.1), opacity .3s ease .1s, margin .45s ease; font-variant-numeric: tabular-nums; } .tb-cml-ada .tb-cml-ic i { font-style: normal; font-size: .84rem; font-weight: 700; } .tb-cml-ada .tb-cml-ic em { font-style: normal; font-size: .7rem; font-weight: 700; padding: .08rem .4rem; border-radius: 999px; }
.tb-cml-ada .tb-cml-b.aktif { flex-grow: 1; background: linear-gradient(135deg, #13213A, #1B3F6B); border-color: transparent; color: #fff; box-shadow: 0 10px 24px -12px rgba(19,33,58,.7); } .tb-cml-ada .tb-cml-b.aktif .tb-cml-ic { max-inline-size: 14rem; opacity: 1; margin-inline-start: .6rem; } .tb-cml-ada .tb-cml-b.aktif .tb-cml-ic em { background: rgba(255,255,255,.14); color: #fff; }
.tb-cml-ada .tb-cml-b:hover:not(.aktif) { background: rgba(19,33,58,.1); } .tb-cml-ada .tb-cml-b:active { transform: scale(.98); } .tb-cml-ada .tb-cml-b:focus-visible { outline: none; box-shadow: 0 0 0 2px #3564AF; }
[data-bs-theme="dark"] .tb-cml-ada .tb-cml-b { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.08); color: #E6ECF5; } [data-bs-theme="dark"] .tb-cml-ada .tb-cml-b:hover:not(.aktif) { background: rgba(255,255,255,.12); } [data-bs-theme="dark"] .tb-cml-ada .tb-cml-b.aktif { background: #fff; color: #13213A; box-shadow: 0 10px 28px -12px rgba(255,255,255,.35); } [data-bs-theme="dark"] .tb-cml-ada .tb-cml-b.aktif .tb-cml-ic em { background: rgba(196,22,43,.1); color: #C4162B; }
.tb-cml-alt { margin: .5rem 0 0; font-size: .78rem; color: var(--soft); line-height: 1.5; } .tb-cml-alt b { font-weight: 700; color: var(--ink); background: none; padding: 0; border-radius: 0; font-size: inherit; } .tb-cml-alt b::after { content: none; } .tb-cml-alt em, [data-bs-theme="dark"] .tb-cml-alt em { font-style: normal; font-weight: 700; color: #C4162B; background: none; border: 0; padding: 0; clip-path: none; } [data-bs-theme="dark"] .tb-cml-alt em { color: #E7A2AA; }
html.tb-er-azalt .tb-cml-ada .tb-cml-b, html.tb-er-azalt .tb-cml-ada .tb-cml-ic { transition: none; } @media (prefers-reduced-motion: reduce) { .tb-cml-ada .tb-cml-b, .tb-cml-ada .tb-cml-ic { transition: none; } }
@media (max-width: 767.98px) { .tb-cml-ada .tb-cml-sec { flex-wrap: wrap; } .tb-cml-ada .tb-cml-b.aktif { flex-basis: 100%; } }

/* CÜMLE → JETON (17 WordPress, 2026-10-20): cümle aynı; seçici satır içi lacivert jeton + açılır menü */
.tb-cml-jeton { max-inline-size: 26rem; } .tb-cml-jeton .tb-cml-metin { font-size: 1rem; line-height: 2.1; font-weight: 400; color: var(--ink); margin: 0; }
.tb-cml-jeton .tb-cml-sec, [data-bs-theme="dark"] .tb-cml-jeton .tb-cml-sec { position: relative; display: inline-block; padding: 0; margin: 0 .15rem; background: transparent; border: 0; box-shadow: none; backdrop-filter: none; vertical-align: middle; }
.tb-cml-j { display: inline-flex; align-items: center; gap: .4rem; padding: .3rem .55rem .3rem .75rem; border: 0; border-radius: 10px; background: linear-gradient(135deg, #13213A, #1B3F6B); color: #fff; font-size: .88rem; line-height: 1.2; cursor: pointer; box-shadow: 0 6px 16px -10px rgba(19,33,58,.8), inset 0 1px 0 rgba(255,255,255,.12); transition: transform .15s ease, box-shadow .2s ease; } .tb-cml-j b { font-weight: 600; } .tb-cml-j .bi { font-size: .7rem; opacity: .8; transition: transform .25s ease; } .tb-cml-j:hover { transform: translateY(-1px); } .tb-cml-sec.acik .tb-cml-j .bi { transform: rotate(180deg); } .tb-cml-j:focus-visible { outline: none; box-shadow: 0 0 0 2px #3564AF, 0 6px 16px -10px rgba(19,33,58,.8); }
[data-bs-theme="dark"] .tb-cml-j { background: #fff; color: #13213A; box-shadow: 0 8px 20px -12px rgba(255,255,255,.4); }
.tb-cml-menu { position: absolute; inset-block-start: calc(100% + 8px); inset-inline-start: 0; z-index: 30; display: flex; flex-direction: column; gap: 2px; min-inline-size: 15.5rem; padding: 5px; border-radius: 14px; background: #fff; border: 1px solid rgba(19,33,58,.1); box-shadow: 0 20px 44px -18px rgba(19,33,58,.45), 0 2px 6px rgba(19,33,58,.08); opacity: 0; transform: translateY(-6px) scale(.98); transform-origin: top left; pointer-events: none; transition: opacity .18s ease, transform .22s cubic-bezier(.2,.9,.3,1.1); line-height: 1.2; } .tb-cml-sec.acik .tb-cml-menu { opacity: 1; transform: none; pointer-events: auto; }
[data-bs-theme="dark"] .tb-cml-menu { background: #16243D; border-color: rgba(255,255,255,.1); box-shadow: 0 20px 44px -18px rgba(0,0,0,.8); }
.tb-cml-jeton .tb-cml-b { display: grid; grid-template-columns: 1fr auto auto 16px; align-items: center; gap: .6rem; padding: .5rem .55rem .5rem .7rem; border: 0; border-radius: 10px; background: transparent; color: var(--ink); text-align: left; font-size: .82rem; cursor: pointer; box-shadow: none; clip-path: none; } .tb-cml-jeton .tb-cml-b b { font-weight: 600; } .tb-cml-jeton .tb-cml-b span { color: var(--soft); font-variant-numeric: tabular-nums; font-size: .76rem; } .tb-cml-jeton .tb-cml-b em { font-style: normal; font-size: .68rem; font-weight: 700; color: #C4162B; min-inline-size: 2.4rem; text-align: right; } .tb-cml-jeton .tb-cml-b .bi { font-size: .9rem; opacity: 0; color: #1B3F6B; } .tb-cml-jeton .tb-cml-b.aktif .bi { opacity: 1; }
.tb-cml-jeton .tb-cml-b:hover, .tb-cml-jeton .tb-cml-b:focus-visible { background: rgba(19,33,58,.06); outline: none; } .tb-cml-jeton .tb-cml-b.aktif { background: rgba(27,63,107,.08); font-weight: 600; } [data-bs-theme="dark"] .tb-cml-jeton .tb-cml-b { color: #E6ECF5; } [data-bs-theme="dark"] .tb-cml-jeton .tb-cml-b:hover, [data-bs-theme="dark"] .tb-cml-jeton .tb-cml-b:focus-visible { background: rgba(255,255,255,.07); } [data-bs-theme="dark"] .tb-cml-jeton .tb-cml-b.aktif { background: rgba(255,255,255,.1); } [data-bs-theme="dark"] .tb-cml-jeton .tb-cml-b em { color: #E7A2AA; } [data-bs-theme="dark"] .tb-cml-jeton .tb-cml-b .bi { color: #9FD3FF; }
.tb-cml-f { padding: 0 .1rem; border-radius: 0; background: none; font-size: 1.02rem; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; } .tb-cml-f::after { content: none; } .tb-cml-y, [data-bs-theme="dark"] .tb-cml-y { padding: 0; border: 0; background: none; clip-path: none; font-style: normal; font-weight: 700; color: #C4162B; font-size: inherit; } [data-bs-theme="dark"] .tb-cml-y { color: #E7A2AA; }
/* JETON özgüllük düzeltmesi: önceki cümle katmanlarının b/em çip stillerini jeton içinde sıfırla */
.tb-cml-jeton { max-inline-size: 30rem; } .tb-cml-jeton .tb-cml-metin b, .tb-cml-jeton .tb-cml-metin em, [data-bs-theme="dark"] .tb-cml-jeton .tb-cml-metin b, [data-bs-theme="dark"] .tb-cml-jeton .tb-cml-metin em { padding: 0; border: 0; border-radius: 0; background: none; clip-path: none; font-size: inherit; color: inherit; }
.tb-cml-jeton .tb-cml-metin b::after { content: none; } .tb-cml-jeton .tb-cml-j b { color: #fff; font-weight: 600; } [data-bs-theme="dark"] .tb-cml-jeton .tb-cml-j b { color: #13213A; }
.tb-cml-jeton .tb-cml-metin .tb-cml-f { font-weight: 700; font-size: 1.02rem; color: var(--ink); } .tb-cml-jeton .tb-cml-metin .tb-cml-y { font-weight: 700; color: #C4162B; } [data-bs-theme="dark"] .tb-cml-jeton .tb-cml-metin .tb-cml-y { color: #E7A2AA; }
.tb-cml-jeton .tb-cml-b b { padding: 0; background: none; border-radius: 0; font-size: .82rem; color: inherit; } .tb-cml-jeton .tb-cml-b em, [data-bs-theme="dark"] .tb-cml-jeton .tb-cml-b em { padding: 0; border: 0; border-radius: 0; background: none; clip-path: none; }
.tb-cml-jeton .tb-cml-b em { color: #C4162B; } [data-bs-theme="dark"] .tb-cml-jeton .tb-cml-b em { color: #E7A2AA; } .tb-cml-jeton { max-inline-size: none; }

/* CÜMLE → ÇİZGİ (17 WordPress, 2026-10-20 SON): özgün cümle, dört dönem görünür; kutu/oval yok, seçili kelime lacivert + altında kalın çizgi */
.tb-cml-cizgi { max-inline-size: none; } .tb-cml-cizgi .tb-cml-metin { font-size: 1rem; line-height: 2.1; font-weight: 400; color: var(--ink); margin: 0; }
.tb-cml-cizgi .tb-cml-sec, [data-bs-theme="dark"] .tb-cml-cizgi .tb-cml-sec { display: inline-flex; gap: .15rem; padding: 0; margin: 0 .2rem; background: transparent; border: 0; border-radius: 0; box-shadow: none; backdrop-filter: none; vertical-align: baseline; }
.tb-cml-cizgi .tb-cml-b { position: relative; padding: .1rem .4rem .2rem; border: 0; border-radius: 6px; background: transparent; clip-path: none; box-shadow: none; color: var(--soft); font-size: .92rem; font-weight: 500; line-height: 1.3; cursor: pointer; transition: color .18s ease, background .18s ease; } .tb-cml-cizgi .tb-cml-b::after { content: ""; position: absolute; inset-inline: .4rem; inset-block-end: -.05rem; block-size: 3px; border-radius: 2px; background: #1B3F6B; transform: scaleX(0); transform-origin: left; transition: transform .28s cubic-bezier(.2,.9,.3,1.1); }
.tb-cml-cizgi .tb-cml-b:hover:not(.aktif) { color: var(--ink); background: rgba(19,33,58,.05); } .tb-cml-cizgi .tb-cml-b.aktif { color: #13213A; font-weight: 700; background: transparent; } .tb-cml-cizgi .tb-cml-b.aktif::after { transform: scaleX(1); } .tb-cml-cizgi .tb-cml-b:focus-visible { outline: none; box-shadow: 0 0 0 2px #3564AF; }
[data-bs-theme="dark"] .tb-cml-cizgi .tb-cml-b { color: rgba(230,236,245,.6); } [data-bs-theme="dark"] .tb-cml-cizgi .tb-cml-b:hover:not(.aktif) { color: #fff; background: rgba(255,255,255,.06); } [data-bs-theme="dark"] .tb-cml-cizgi .tb-cml-b.aktif { color: #fff; } [data-bs-theme="dark"] .tb-cml-cizgi .tb-cml-b::after { background: #9FD3FF; }
.tb-cml-cizgi .tb-cml-metin b, .tb-cml-cizgi .tb-cml-metin em, [data-bs-theme="dark"] .tb-cml-cizgi .tb-cml-metin b, [data-bs-theme="dark"] .tb-cml-cizgi .tb-cml-metin em { padding: 0; border: 0; border-radius: 0; background: none; clip-path: none; font-size: inherit; } .tb-cml-cizgi .tb-cml-metin b::after { content: none; } .tb-cml-cizgi .tb-cml-f { font-weight: 700; font-size: 1.02rem; color: var(--ink); font-variant-numeric: tabular-nums; } .tb-cml-cizgi .tb-cml-y { font-style: normal; font-weight: 700; color: #C4162B; } [data-bs-theme="dark"] .tb-cml-cizgi .tb-cml-y { color: #E7A2AA; }
html.tb-er-azalt .tb-cml-cizgi .tb-cml-b::after { transition: none; }
[data-bs-theme="dark"] .tb-cml-cizgi .tb-cml-b, [data-bs-theme="dark"] .tb-cml-cizgi .tb-cml-b.aktif { background: transparent; box-shadow: none; } [data-bs-theme="dark"] .tb-cml-cizgi .tb-cml-b:hover:not(.aktif) { background: rgba(255,255,255,.06); } .tb-cml-nw { white-space: nowrap; }

/* CÜMLE (17 WordPress) — ÖZGÜN HÂL GERİ, yalnız köşe: oval (999px) yerine yumuşak dikdörtgen (grup 8px, düğme 6px). Önceki deneme katmanları burada sıfırlanır. */
.tb-cml, .tb-cml-cizgi { max-inline-size: 24rem; } .tb-cml .tb-cml-metin { margin: 0; font-size: 1rem; line-height: 2.1; font-weight: 400; color: var(--ink); }
.tb-cml .tb-cml-sec, [data-bs-theme="dark"] .tb-cml .tb-cml-sec { display: inline-flex; gap: 3px; margin: 0 .2rem; padding: 3px; border-radius: 8px; background: var(--yuz2); border: 1px solid var(--cizgi); box-shadow: none; backdrop-filter: none; outline: 0; clip-path: none; vertical-align: middle; }
.tb-cml .tb-cml-b, [data-bs-theme="dark"] .tb-cml .tb-cml-b { position: static; padding: .22rem .6rem; border: 0; border-radius: 6px; background: transparent; color: var(--soft); font-size: .8rem; font-weight: 600; line-height: 1.2; cursor: pointer; box-shadow: none; clip-path: none; transform: none; } .tb-cml .tb-cml-b::after { content: none; }
.tb-cml .tb-cml-b.aktif, [data-bs-theme="dark"] .tb-cml .tb-cml-b.aktif { background: var(--kr); color: #fff; font-weight: 600; box-shadow: none; } .tb-cml .tb-cml-b:hover:not(.aktif), [data-bs-theme="dark"] .tb-cml .tb-cml-b:hover:not(.aktif) { background: transparent; color: var(--ink); } .tb-cml .tb-cml-b:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--mavi); }
.tb-cml .tb-cml-metin b, [data-bs-theme="dark"] .tb-cml .tb-cml-metin b { padding: 0; border: 0; border-radius: 0; background: none; clip-path: none; font-size: inherit; font-weight: 700; color: var(--ink); } .tb-cml .tb-cml-metin b::after { content: none; }
.tb-cml .tb-cml-metin em, [data-bs-theme="dark"] .tb-cml .tb-cml-metin em { padding: 0; border: 0; border-radius: 0; background: none; clip-path: none; font-size: inherit; font-style: normal; font-weight: 700; color: var(--kr); } [data-bs-theme="dark"] .tb-cml .tb-cml-metin em { color: #E7A2AA; }
/* CÜMLE renk uyarlaması 2026-10-20: seçili düğme aydınlıkta lacivert, karanlıkta beyaz+lacivert yazı; indirim aydınlık kırmızı / karanlık pembe */
.tb-cml .tb-cml-b.aktif { background: linear-gradient(135deg, #13213A, #1B3F6B); color: #fff; } [data-bs-theme="dark"] .tb-cml .tb-cml-b.aktif { background: #fff; color: #13213A; }
[data-bs-theme="dark"] .tb-cml .tb-cml-sec { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.12); } .tb-cml .tb-cml-metin em { color: #C4162B; } [data-bs-theme="dark"] .tb-cml .tb-cml-metin em { color: #E7A2AA; }
/* BANT (9 Windows) renk düzeltmesi 2: karanlıkta kırmızı yok — seçili hücre beyaz + lacivert yazı; alt çizgi lacivert/açık mavi */
[data-bs-theme="dark"] .tb-bnt-b.aktif { background: #fff; color: #13213A; } [data-bs-theme="dark"] .tb-bnt-cizgi { background: #9FD3FF; opacity: .35; } .tb-bnt-ust small { color: #C4162B; } [data-bs-theme="dark"] .tb-bnt-ust small { color: #E7A2AA; }


/* KART BAŞLIĞI (2026-10-21): kategori adı + seviye şeritleri (örnekteki üst üste chevron; lacivert, karanlıkta açık mavi) */
.plan-card h4.tb-pk-kat { display: flex; align-items: center; justify-content: space-between; gap: .6rem; } .plan-card h4.tb-pk-kat > span:first-child { font-size: 1.02rem; font-weight: 600; }
.tb-sev { display: inline-flex; flex-direction: column-reverse; align-items: center; gap: 0; padding-top: 2px; } .tb-sev i { display: block; inline-size: 11px; block-size: 11px; margin-block-start: -6px; border-block-start: 2.5px solid #1B3F6B; border-inline-end: 2.5px solid #1B3F6B; border-radius: 1px; transform: rotate(-45deg); opacity: .9; } .tb-sev i:first-child { margin-block-start: 0; }
[data-bs-theme="dark"] .tb-sev i { border-color: #9FD3FF; } .plan-popular .tb-sev i { border-color: #C4162B; } [data-bs-theme="dark"] .plan-popular .tb-sev i { border-color: #E7A2AA; }

/* SEVİYE İŞARETİ = RAF (2026-10-21, bize özgü): mini sunucu rafı; kategori kaç paketliyse o kadar ünite, seviye kadar ünite açık (lacivert gövde + kırmızı LED). Chevron kuralları geçersiz. */
.tb-sev.tb-sev-raf { display: flex; flex-direction: column-reverse; gap: 2px; padding: 3px; border-radius: 4px; border: 1px solid var(--tb-line, rgba(19,33,58,.14)); background: transparent; } .tb-sev.tb-sev-raf i { display: flex; align-items: center; inline-size: 22px; block-size: 5px; margin: 0; border: 0; border-radius: 1.5px; background: var(--tb-line, rgba(19,33,58,.14)); opacity: .55; transform: none; transition: background .25s ease, opacity .25s ease; } .tb-sev.tb-sev-raf i::before { content: ""; inline-size: 3px; block-size: 3px; margin-inline-start: 2px; border-radius: 50%; background: transparent; }
.tb-sev.tb-sev-raf i.on { background: #1B3F6B; opacity: 1; } .tb-sev.tb-sev-raf i.on::before { background: #C4162B; box-shadow: 0 0 4px #C4162B; }
[data-bs-theme="dark"] .tb-sev.tb-sev-raf { border-color: rgba(255,255,255,.14); } [data-bs-theme="dark"] .tb-sev.tb-sev-raf i { background: rgba(255,255,255,.14); } [data-bs-theme="dark"] .tb-sev.tb-sev-raf i.on { background: #9FD3FF; } [data-bs-theme="dark"] .tb-sev.tb-sev-raf i.on::before { background: #C4162B; }
.plan-popular .tb-sev.tb-sev-raf i.on { background: #C4162B; } .plan-popular .tb-sev.tb-sev-raf i.on::before { background: #fff; box-shadow: 0 0 4px rgba(255,255,255,.8); }
.plan-card:hover .tb-sev.tb-sev-raf i.on::before { animation: tbLed 1.2s ease-in-out infinite; } @keyframes tbLed { 0%, 100% { opacity: 1; } 50% { opacity: .35; } } html.tb-er-azalt .tb-sev.tb-sev-raf i.on::before, @media (prefers-reduced-motion: reduce) { .tb-sev.tb-sev-raf i.on::before { animation: none; } }

/* SEVİYE İŞARETİ SVG (2026-10-21): JS çizer (SEV_STIL); renk belirteçleri */
.tb-sev.tb-sev-svg { display: inline-flex; padding: 0; border: 0; background: transparent; --tb-sev-mavi: #1B3F6B; --tb-sev-cizgi: rgba(19,33,58,.16); --tb-sev-kr: #C4162B; } .tb-sev.tb-sev-svg svg { display: block; inline-size: 28px; block-size: 28px; overflow: visible; }
[data-bs-theme="dark"] .tb-sev.tb-sev-svg { --tb-sev-mavi: #9FD3FF; --tb-sev-cizgi: rgba(255,255,255,.14); } .plan-popular .tb-sev.tb-sev-svg { --tb-sev-mavi: #C4162B; --tb-sev-kr: #fff; } [data-bs-theme="dark"] .plan-popular .tb-sev.tb-sev-svg { --tb-sev-mavi: #E7A2AA; --tb-sev-kr: #fff; }
.plan-popular .tb-sev.tb-sev-svg { --tb-sev-kr: #13213A; } [data-bs-theme="dark"] .plan-popular .tb-sev.tb-sev-svg { --tb-sev-kr: #fff; }
/* merdiven: popüler kartta çubuklar beyaz/krem tonları (kırmızı şerit üstünde) */
.plan-popular .tb-sev.tb-sev-merdiven { --tb-sev-m1: #fff; --tb-sev-m2: #fff; --tb-sev-m3: #fff; --tb-sev-m4: #fff; --tb-sev-cizgi: rgba(255,255,255,.35); }
.plan-popular .tb-sev.tb-sev-merdiven { --tb-sev-m1: #1B3F6B; --tb-sev-m2: #1B3F6B; --tb-sev-m3: #13213A; --tb-sev-m4: #13213A; --tb-sev-cizgi: rgba(19,33,58,.16); } [data-bs-theme="dark"] .plan-popular .tb-sev.tb-sev-merdiven { --tb-sev-m1: #fff; --tb-sev-m2: #fff; --tb-sev-m3: #fff; --tb-sev-m4: #fff; --tb-sev-cizgi: rgba(255,255,255,.2); }
.tb-sev.tb-sev-katman { --tb-sev-alt: #3564AF; --tb-sev-yuz: #fff; } [data-bs-theme="dark"] .tb-sev.tb-sev-katman { --tb-sev-alt: #5A8FD6; --tb-sev-yuz: #121E33; } .plan-popular .tb-sev.tb-sev-katman { --tb-sev-mavi: #C4162B; --tb-sev-alt: #D04555; --tb-sev-kr: #fff; } [data-bs-theme="dark"] .plan-popular .tb-sev.tb-sev-katman { --tb-sev-mavi: #E7A2AA; --tb-sev-alt: #D04555; --tb-sev-kr: #13213A; }
.tb-sev.tb-sev-kup { --tb-sev-mavi: #5A8FD6; --tb-sev-alt: #3564AF; --tb-sev-sol: #13213A; --tb-sev-sag: #1B3F6B; } [data-bs-theme="dark"] .tb-sev.tb-sev-kup { --tb-sev-mavi: #BFE2FF; --tb-sev-alt: #9FD3FF; --tb-sev-sol: #2A5285; --tb-sev-sag: #3B6BA8; } .plan-popular .tb-sev.tb-sev-kup { --tb-sev-mavi: #E7A2AA; --tb-sev-alt: #DC7380; --tb-sev-sol: #8E0F1F; --tb-sev-sag: #C4162B; --tb-sev-kr: #fff; } [data-bs-theme="dark"] .plan-popular .tb-sev.tb-sev-kup { --tb-sev-kr: #13213A; }
.tb-sev.tb-sev-petek { --tb-sev-alt: #3564AF; --tb-sev-yuz: #fff; } [data-bs-theme="dark"] .tb-sev.tb-sev-petek { --tb-sev-alt: #5A8FD6; --tb-sev-yuz: #121E33; } .plan-popular .tb-sev.tb-sev-petek { --tb-sev-mavi: #C4162B; --tb-sev-alt: #DC7380; --tb-sev-kr: #fff; } [data-bs-theme="dark"] .plan-popular .tb-sev.tb-sev-petek { --tb-sev-mavi: #E7A2AA; --tb-sev-alt: #D04555; --tb-sev-kr: #13213A; }
.tb-sev.tb-sev-yorunge { --tb-sev-alt: #3564AF; --tb-sev-yuz: #fff; } [data-bs-theme="dark"] .tb-sev.tb-sev-yorunge { --tb-sev-alt: #5A8FD6; --tb-sev-yuz: #fff; } .plan-popular .tb-sev.tb-sev-yorunge { --tb-sev-mavi: #C4162B; --tb-sev-alt: #DC7380; --tb-sev-kr: #13213A; } [data-bs-theme="dark"] .plan-popular .tb-sev.tb-sev-yorunge { --tb-sev-mavi: #E7A2AA; --tb-sev-alt: #D04555; --tb-sev-kr: #fff; }
.tb-sev.tb-sev-bina { --tb-sev-alt: #2A5285; --tb-sev-yuz: #fff; } [data-bs-theme="dark"] .tb-sev.tb-sev-bina { --tb-sev-alt: #3B6BA8; --tb-sev-yuz: #E6F3FF; } .plan-popular .tb-sev.tb-sev-bina { --tb-sev-mavi: #C4162B; --tb-sev-alt: #D04555; --tb-sev-kr: #13213A; } [data-bs-theme="dark"] .plan-popular .tb-sev.tb-sev-bina { --tb-sev-mavi: #E7A2AA; --tb-sev-alt: #D04555; --tb-sev-kr: #fff; --tb-sev-yuz: #13213A; }
.tb-sev.tb-sev-rozet { --tb-sev-alt: #3564AF; } [data-bs-theme="dark"] .tb-sev.tb-sev-rozet { --tb-sev-alt: #5A8FD6; } .plan-popular .tb-sev.tb-sev-rozet { --tb-sev-mavi: #C4162B; --tb-sev-alt: #DC7380; --tb-sev-kr: #fff; } [data-bs-theme="dark"] .plan-popular .tb-sev.tb-sev-rozet { --tb-sev-mavi: #E7A2AA; --tb-sev-alt: #D04555; --tb-sev-kr: #13213A; }
.tb-sev.tb-sev-disk { --tb-sev-mavi: #5A8FD6; --tb-sev-alt: #1B3F6B; --tb-sev-ust: #2A5285; } [data-bs-theme="dark"] .tb-sev.tb-sev-disk { --tb-sev-mavi: #BFE2FF; --tb-sev-alt: #3B6BA8; --tb-sev-ust: #6FA6E0; } .plan-popular .tb-sev.tb-sev-disk { --tb-sev-mavi: #E7A2AA; --tb-sev-alt: #C4162B; --tb-sev-ust: #D04555; --tb-sev-kr: #13213A; } [data-bs-theme="dark"] .plan-popular .tb-sev.tb-sev-disk { --tb-sev-kr: #fff; }
.tb-sev.tb-sev-unite { --tb-sev-mavi: #2A5285; --tb-sev-alt: #1B3F6B; --tb-sev-yuz: #fff; } [data-bs-theme="dark"] .tb-sev.tb-sev-unite { --tb-sev-mavi: #6FA6E0; --tb-sev-alt: #3B6BA8; --tb-sev-yuz: #0B1526; } .plan-popular .tb-sev.tb-sev-unite { --tb-sev-mavi: #D04555; --tb-sev-alt: #C4162B; --tb-sev-kr: #fff; } [data-bs-theme="dark"] .plan-popular .tb-sev.tb-sev-unite { --tb-sev-mavi: #E7A2AA; --tb-sev-alt: #D04555; --tb-sev-kr: #13213A; --tb-sev-yuz: #13213A; }
.tb-sev.tb-sev-cip { --tb-sev-mavi: #1B3F6B; --tb-sev-yuz: #BFE2FF; --tb-sev-cizgi: rgba(19,33,58,.3); } [data-bs-theme="dark"] .tb-sev.tb-sev-cip { --tb-sev-mavi: #3B6BA8; --tb-sev-yuz: #E6F3FF; --tb-sev-cizgi: rgba(255,255,255,.3); } .plan-popular .tb-sev.tb-sev-cip { --tb-sev-mavi: #C4162B; --tb-sev-yuz: #fff; --tb-sev-kr: #13213A; } [data-bs-theme="dark"] .plan-popular .tb-sev.tb-sev-cip { --tb-sev-mavi: #D04555; --tb-sev-kr: #13213A; }
.tb-sev.tb-sev-port { --tb-sev-mavi: #1B3F6B; --tb-sev-yuz: #E6F3FF; --tb-sev-led: #9FD3FF; } [data-bs-theme="dark"] .tb-sev.tb-sev-port { --tb-sev-mavi: #3B6BA8; --tb-sev-yuz: #E6F3FF; --tb-sev-led: #BFE2FF; } .plan-popular .tb-sev.tb-sev-port { --tb-sev-mavi: #C4162B; --tb-sev-yuz: #fff; --tb-sev-led: #fff; --tb-sev-kr: #13213A; } [data-bs-theme="dark"] .plan-popular .tb-sev.tb-sev-port { --tb-sev-mavi: #D04555; --tb-sev-kr: #13213A; }
.tb-sev.tb-sev-bellek { --tb-sev-mavi: #2A5285; --tb-sev-alt: #1B3F6B; --tb-sev-yuz: #BFE2FF; --tb-sev-pin: #C9A227; } [data-bs-theme="dark"] .tb-sev.tb-sev-bellek { --tb-sev-mavi: #5A8FD6; --tb-sev-alt: #3B6BA8; --tb-sev-yuz: #E6F3FF; --tb-sev-pin: #E2B93B; } .plan-popular .tb-sev.tb-sev-bellek { --tb-sev-mavi: #D04555; --tb-sev-alt: #C4162B; --tb-sev-yuz: #fff; --tb-sev-kr: #13213A; } [data-bs-theme="dark"] .plan-popular .tb-sev.tb-sev-bellek { --tb-sev-kr: #13213A; }
.tb-sev.tb-sev-bulut { --tb-sev-mavi: #1B3F6B; --tb-sev-alt: #5A8FD6; --tb-sev-yuz: #fff; } [data-bs-theme="dark"] .tb-sev.tb-sev-bulut { --tb-sev-mavi: #9FD3FF; --tb-sev-alt: #3B6BA8; --tb-sev-yuz: #121E33; } .plan-popular .tb-sev.tb-sev-bulut { --tb-sev-mavi: #C4162B; --tb-sev-alt: #DC7380; --tb-sev-kr: #13213A; } [data-bs-theme="dark"] .plan-popular .tb-sev.tb-sev-bulut { --tb-sev-mavi: #E7A2AA; --tb-sev-alt: #D04555; --tb-sev-kr: #fff; }
.tb-sev.tb-sev-bulutag { --tb-sev-mavi: #1B3F6B; --tb-sev-yuz: #BFE2FF; } [data-bs-theme="dark"] .tb-sev.tb-sev-bulutag { --tb-sev-mavi: #3B6BA8; --tb-sev-yuz: #E6F3FF; } .plan-popular .tb-sev.tb-sev-bulutag { --tb-sev-mavi: #C4162B; --tb-sev-yuz: #fff; --tb-sev-kr: #13213A; } [data-bs-theme="dark"] .plan-popular .tb-sev.tb-sev-bulutag { --tb-sev-mavi: #D04555; --tb-sev-kr: #13213A; }
.tb-sev.tb-sev-bulutpro { --tb-sev-g1: #3564AF; --tb-sev-g2: #13213A; --tb-sev-mavi: #1B3F6B; --tb-sev-yuz: #fff; } [data-bs-theme="dark"] .tb-sev.tb-sev-bulutpro { --tb-sev-g1: #BFE2FF; --tb-sev-g2: #5A8FD6; --tb-sev-mavi: #9FD3FF; --tb-sev-yuz: #fff; } .plan-popular .tb-sev.tb-sev-bulutpro { --tb-sev-g1: #DC7380; --tb-sev-g2: #C4162B; --tb-sev-mavi: #C4162B; --tb-sev-kr: #13213A; } [data-bs-theme="dark"] .plan-popular .tb-sev.tb-sev-bulutpro { --tb-sev-g1: #E7A2AA; --tb-sev-g2: #D04555; --tb-sev-mavi: #E7A2AA; --tb-sev-kr: #fff; }
.tb-sev.tb-sev-buluthale { --tb-sev-g1: #3564AF; --tb-sev-g2: #13213A; --tb-sev-mavi: #1B3F6B; --tb-sev-zemin: #fff; } [data-bs-theme="dark"] .tb-sev.tb-sev-buluthale { --tb-sev-g1: #BFE2FF; --tb-sev-g2: #5A8FD6; --tb-sev-mavi: #9FD3FF; --tb-sev-zemin: #121E33; } .plan-popular .tb-sev.tb-sev-buluthale { --tb-sev-g1: #DC7380; --tb-sev-g2: #C4162B; --tb-sev-mavi: #C4162B; --tb-sev-kr: #13213A; } [data-bs-theme="dark"] .plan-popular .tb-sev.tb-sev-buluthale { --tb-sev-g1: #E7A2AA; --tb-sev-g2: #D04555; --tb-sev-mavi: #E7A2AA; --tb-sev-kr: #fff; }
.tb-sev.tb-sev-bulutpar { --tb-sev-g1: #3564AF; --tb-sev-g2: #13213A; --tb-sev-par: #3564AF; } [data-bs-theme="dark"] .tb-sev.tb-sev-bulutpar { --tb-sev-g1: #BFE2FF; --tb-sev-g2: #5A8FD6; --tb-sev-par: #BFE2FF; } .plan-popular .tb-sev.tb-sev-bulutpar { --tb-sev-g1: #DC7380; --tb-sev-g2: #C4162B; --tb-sev-par: #C4162B; --tb-sev-kr: #13213A; } [data-bs-theme="dark"] .plan-popular .tb-sev.tb-sev-bulutpar { --tb-sev-g1: #E7A2AA; --tb-sev-g2: #D04555; --tb-sev-par: #E7A2AA; --tb-sev-kr: #fff; }
.tb-sev.tb-sev-bulutkat { --tb-sev-g1: #3564AF; --tb-sev-g2: #13213A; --tb-sev-yuz: #fff; } [data-bs-theme="dark"] .tb-sev.tb-sev-bulutkat { --tb-sev-g1: #BFE2FF; --tb-sev-g2: #3B6BA8; --tb-sev-yuz: #fff; } .plan-popular .tb-sev.tb-sev-bulutkat { --tb-sev-g1: #DC7380; --tb-sev-g2: #C4162B; --tb-sev-kr: #13213A; } [data-bs-theme="dark"] .plan-popular .tb-sev.tb-sev-bulutkat { --tb-sev-g1: #E7A2AA; --tb-sev-g2: #D04555; --tb-sev-kr: #13213A; }

/* AÇILIR LİSTE TEMA UYUMU (2026-10-21, kullanıcı ekran görüntüsü): mavi kontur/mavi seçili satır yerine tema paleti — karanlıkta kart yüzeyi + kılcal kontur + BEYAZ seçili satır; aydınlıkta lacivert seçili satır */
.tb-donem-btn { border-color: rgba(19,33,58,.14); color: #13213A; } .tb-donem-btn:hover { border-color: rgba(27,63,107,.45); } .tb-donem.acik .tb-donem-btn { border-color: #1B3F6B; box-shadow: 0 0 0 3px rgba(27,63,107,.12); } .tb-donem-ok { color: #1B3F6B; }
.tb-donem-liste { border-color: rgba(19,33,58,.1); } .tb-donem-liste li:hover, .tb-donem-liste li:focus-visible { background: rgba(27,63,107,.07); } .tb-donem-liste li[aria-selected="true"] { background: linear-gradient(135deg, #13213A, #1B3F6B); color: #fff; } .tb-donem-rozet { color: #1B3F6B; background: rgba(27,63,107,.1); } .tb-donem-liste li[aria-selected="true"] .tb-donem-rozet:not(.en-iyi) { color: #fff; background: rgba(255,255,255,.16); }
[data-bs-theme="dark"] .tb-donem-btn { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.14); color: #E6ECF5; } [data-bs-theme="dark"] .tb-donem-btn:hover { border-color: rgba(159,211,255,.4); } [data-bs-theme="dark"] .tb-donem.acik .tb-donem-btn { border-color: rgba(159,211,255,.55); box-shadow: 0 0 0 3px rgba(159,211,255,.1); } [data-bs-theme="dark"] .tb-donem-ok { color: #9FD3FF; }
[data-bs-theme="dark"] .tb-donem-liste { background: #121E33; border-color: rgba(255,255,255,.1); box-shadow: 0 24px 48px -20px rgba(0,0,0,.8); } [data-bs-theme="dark"] .tb-donem-liste li { color: #E6ECF5; } [data-bs-theme="dark"] .tb-donem-liste li:hover, [data-bs-theme="dark"] .tb-donem-liste li:focus-visible { background: rgba(255,255,255,.06); } [data-bs-theme="dark"] .tb-donem-liste li[aria-selected="true"] { background: #fff; color: #13213A; }
[data-bs-theme="dark"] .tb-donem-rozet { color: #9FD3FF; background: rgba(159,211,255,.12); } [data-bs-theme="dark"] .tb-donem-liste li[aria-selected="true"] .tb-donem-rozet:not(.en-iyi) { color: #13213A; background: rgba(19,33,58,.1); } [data-bs-theme="dark"] .tb-donem-rozet.en-iyi { color: #fff; background: linear-gradient(135deg, #C4162B, #D04555); }
.tb-donem-rozet.en-iyi, [data-bs-theme="dark"] .tb-donem-rozet.en-iyi { color: #fff; background: linear-gradient(135deg, #C4162B, #D04555); border: 0; }
.tb-sev.tb-sev-bulutlar { --tb-sev-g1: #3564AF; --tb-sev-g2: #13213A; } [data-bs-theme="dark"] .tb-sev.tb-sev-bulutlar { --tb-sev-g1: #BFE2FF; --tb-sev-g2: #5A8FD6; } .plan-popular .tb-sev.tb-sev-bulutlar { --tb-sev-g1: #DC7380; --tb-sev-g2: #C4162B; --tb-sev-kr: #13213A; } [data-bs-theme="dark"] .plan-popular .tb-sev.tb-sev-bulutlar { --tb-sev-g1: #E7A2AA; --tb-sev-g2: #D04555; --tb-sev-kr: #fff; }

/* AÇILIR LİSTE = KART DİLİ (2026-10-21, "uyumlu olmadı"): düğme = kartın "Hemen satın al" yüzeyi; menü = kart (14px, kart konturu); seçili satır = düğme yüzeyi; rozetler = karttaki indirim pili; En uygun = popüler şeridi kırmızısı */
.tb-donem-btn { border-radius: 10px; border: 1px solid #E6E0D6; background: #FFFEFB; color: #13213A; box-shadow: none; } .tb-donem-btn:hover { border-color: #1B3F6B; } .tb-donem.acik .tb-donem-btn { border-color: #1B3F6B; box-shadow: none; }
.tb-donem-liste { border-radius: 14px; border: 1px solid #E6E0D6; background: #FFFEFB; box-shadow: 0 18px 40px -22px rgba(19,33,58,.35); padding: .4rem; } .tb-donem-liste li { border-radius: 10px; border: 1px solid transparent; } .tb-donem-liste li:hover, .tb-donem-liste li:focus-visible { background: rgba(27,63,107,.05); border-color: transparent; }
.tb-donem-liste li[aria-selected="true"] { background: linear-gradient(135deg, #13213A, #1B3F6B); color: #fff; border-color: transparent; } .tb-donem-rozet { background: linear-gradient(135deg, #13213A, #1B3F6B); color: #fff; border: 0; font-size: .72rem; } .tb-donem-liste li[aria-selected="true"] .tb-donem-rozet:not(.en-iyi) { background: #fff; color: #13213A; }
[data-bs-theme="dark"] .tb-donem-btn { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.28); color: #DCE9FF; } [data-bs-theme="dark"] .tb-donem-btn:hover { border-color: rgba(255,255,255,.5); } [data-bs-theme="dark"] .tb-donem.acik .tb-donem-btn { border-color: rgba(255,255,255,.6); box-shadow: none; } [data-bs-theme="dark"] .tb-donem-ok { color: #DCE9FF; }
[data-bs-theme="dark"] .tb-donem-liste { background: #0B1526; border-color: rgba(255,255,255,.12); box-shadow: 0 24px 48px -20px rgba(0,0,0,.85); } [data-bs-theme="dark"] .tb-donem-liste li { color: #C8CDD6; } [data-bs-theme="dark"] .tb-donem-liste li:hover, [data-bs-theme="dark"] .tb-donem-liste li:focus-visible { background: rgba(255,255,255,.04); border-color: transparent; }
[data-bs-theme="dark"] .tb-donem-liste li[aria-selected="true"] { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.28); color: #fff; }
[data-bs-theme="dark"] .tb-donem-rozet, [data-bs-theme="dark"] .tb-donem-liste li[aria-selected="true"] .tb-donem-rozet:not(.en-iyi) { background: #EEF2F8; color: #13213A; border: 1px solid rgba(255,255,255,.5); }
.tb-donem-rozet.en-iyi, [data-bs-theme="dark"] .tb-donem-rozet.en-iyi, [data-bs-theme="dark"] .tb-donem-liste li[aria-selected="true"] .tb-donem-rozet.en-iyi { background: linear-gradient(135deg, #C4162B, #D04555); color: #fff; border: 0; }
.tb-sev.tb-sev-bulutcizgi { --tb-sev-mavi: #1B3F6B; } [data-bs-theme="dark"] .tb-sev.tb-sev-bulutcizgi { --tb-sev-mavi: #DCE9FF; } .plan-popular .tb-sev.tb-sev-bulutcizgi { --tb-sev-mavi: #C4162B; } [data-bs-theme="dark"] .plan-popular .tb-sev.tb-sev-bulutcizgi { --tb-sev-mavi: #E7A2AA; }
/* 2026-10-21 kullanıcı: düğme zemini = menü zemini */
[data-bs-theme="dark"] .tb-donem-btn, [data-bs-theme="dark"] .tb-donem.acik .tb-donem-btn { background: #0B1526; } [data-bs-theme="dark"] .tb-donem-btn:hover { background: #0F1B30; }

/* AÇILIR LİSTE "GÜVEN" sürümü (2026-10-21): dolu lacivert düğme, belirgin panel, dolu seçili satır; saydamlık/ince kontur yok */
.tb-donem-btn, [data-bs-theme="dark"] .tb-donem-btn, [data-bs-theme="dark"] .tb-donem.acik .tb-donem-btn, .tb-donem.acik .tb-donem-btn { min-height: 48px; border-radius: 10px; border: 0; background: linear-gradient(135deg, #13213A, #1B3F6B); color: #fff; font-weight: 600; box-shadow: 0 10px 22px -14px rgba(19,33,58,.8); } .tb-donem-btn:hover, [data-bs-theme="dark"] .tb-donem-btn:hover { background: linear-gradient(135deg, #182B4B, #23507F); border: 0; } .tb-donem-ok, [data-bs-theme="dark"] .tb-donem-ok { color: #fff; }
.tb-donem-liste, [data-bs-theme="dark"] .tb-donem-liste { margin-top: .45rem; padding: .4rem; border-radius: 12px; border: 1px solid rgba(19,33,58,.12); background: #fff; box-shadow: 0 20px 44px -18px rgba(19,33,58,.45); } .tb-donem-liste li { color: #13213A; font-weight: 500; } .tb-donem-liste li:hover, .tb-donem-liste li:focus-visible { background: rgba(27,63,107,.08); } .tb-donem-liste li[aria-selected="true"] { background: linear-gradient(135deg, #13213A, #1B3F6B); color: #fff; font-weight: 600; }
[data-bs-theme="dark"] .tb-donem-liste { background: #16243D; border-color: rgba(255,255,255,.14); box-shadow: 0 24px 48px -20px rgba(0,0,0,.9); } [data-bs-theme="dark"] .tb-donem-liste li { color: #E6ECF5; } [data-bs-theme="dark"] .tb-donem-liste li:hover, [data-bs-theme="dark"] .tb-donem-liste li:focus-visible { background: rgba(255,255,255,.07); } [data-bs-theme="dark"] .tb-donem-liste li[aria-selected="true"] { background: linear-gradient(135deg, #1B3F6B, #2A5285); color: #fff; border-color: transparent; }
.tb-donem-rozet, [data-bs-theme="dark"] .tb-donem-rozet { background: rgba(27,63,107,.1); color: #1B3F6B; border: 0; } [data-bs-theme="dark"] .tb-donem-rozet { background: rgba(255,255,255,.1); color: #DCE9FF; } .tb-donem-liste li[aria-selected="true"] .tb-donem-rozet:not(.en-iyi), [data-bs-theme="dark"] .tb-donem-liste li[aria-selected="true"] .tb-donem-rozet:not(.en-iyi) { background: #fff; color: #13213A; border: 0; }
.tb-sev.tb-sev-bulutdolu { --tb-sev-g1: #13213A; --tb-sev-g2: #1B3F6B; --tb-sev-ayrac: #FFFEFB; } [data-bs-theme="dark"] .tb-sev.tb-sev-bulutdolu { --tb-sev-g1: #2A5285; --tb-sev-g2: #5A8FD6; --tb-sev-ayrac: #0B1526; } .plan-popular .tb-sev.tb-sev-bulutdolu { --tb-sev-g1: #C4162B; --tb-sev-g2: #D04555; } [data-bs-theme="dark"] .plan-popular .tb-sev.tb-sev-bulutdolu { --tb-sev-g1: #D04555; --tb-sev-g2: #E7A2AA; }
.tb-sev.tb-sev-bulutbuyuk { --tb-sev-g1: #13213A; --tb-sev-g2: #1B3F6B; --tb-sev-yuz: #fff; } [data-bs-theme="dark"] .tb-sev.tb-sev-bulutbuyuk { --tb-sev-g1: #2A5285; --tb-sev-g2: #5A8FD6; } .plan-popular .tb-sev.tb-sev-bulutbuyuk { --tb-sev-g1: #C4162B; --tb-sev-g2: #D04555; } [data-bs-theme="dark"] .plan-popular .tb-sev.tb-sev-bulutbuyuk { --tb-sev-g1: #D04555; --tb-sev-g2: #E7A2AA; }
.tb-sev.tb-sev-bulutcanli { --tb-sev-g1: #13213A; --tb-sev-g2: #1B3F6B; --tb-sev-par: #3564AF; } .tb-sev.tb-sev-bulutcanli svg { inline-size: 34px; block-size: 30px; overflow: visible; } [data-bs-theme="dark"] .tb-sev.tb-sev-bulutcanli { --tb-sev-g1: #2A5285; --tb-sev-g2: #5A8FD6; --tb-sev-par: #BFE2FF; } .plan-popular .tb-sev.tb-sev-bulutcanli { --tb-sev-g1: #C4162B; --tb-sev-g2: #D04555; --tb-sev-par: #DC7380; --tb-sev-kr: #13213A; } [data-bs-theme="dark"] .plan-popular .tb-sev.tb-sev-bulutcanli { --tb-sev-g1: #D04555; --tb-sev-g2: #E7A2AA; --tb-sev-par: #E7A2AA; --tb-sev-kr: #fff; }
.tb-sev.tb-sev-bulutcanli svg { inline-size: 40px; block-size: 34px; }
.tb-sev.tb-sev-yagmur { --tb-sev-g1: #13213A; --tb-sev-g2: #1B3F6B; --tb-sev-par: #3564AF; } .tb-sev.tb-sev-yagmur svg { inline-size: 34px; block-size: 32px; overflow: visible; } [data-bs-theme="dark"] .tb-sev.tb-sev-yagmur { --tb-sev-g1: #2A5285; --tb-sev-g2: #5A8FD6; --tb-sev-par: #BFE2FF; } .plan-popular .tb-sev.tb-sev-yagmur { --tb-sev-g1: #C4162B; --tb-sev-g2: #D04555; --tb-sev-par: #DC7380; --tb-sev-kr: #13213A; } [data-bs-theme="dark"] .plan-popular .tb-sev.tb-sev-yagmur { --tb-sev-g1: #D04555; --tb-sev-g2: #E7A2AA; --tb-sev-par: #E7A2AA; --tb-sev-kr: #fff; }
.tb-sev.tb-sev-bulutyan { --tb-sev-g1: #13213A; --tb-sev-g2: #1B3F6B; } [data-bs-theme="dark"] .tb-sev.tb-sev-bulutyan { --tb-sev-g1: #2A5285; --tb-sev-g2: #5A8FD6; } .plan-popular .tb-sev.tb-sev-bulutyan { --tb-sev-g1: #C4162B; --tb-sev-g2: #D04555; } [data-bs-theme="dark"] .plan-popular .tb-sev.tb-sev-bulutyan { --tb-sev-g1: #D04555; --tb-sev-g2: #E7A2AA; } .tb-sev.tb-sev-bulutyan svg { inline-size: auto; }
/* bulutyan renk uyumu (2026-10-21): aydınlıkta kart rozetinin laciverti; karanlıkta başlık metni/ikon tonu (açık), popülerde popüler şeridi kırmızısı */
.tb-sev.tb-sev-bulutyan { --tb-sev-g1: #1B3F6B; --tb-sev-g2: #13213A; } [data-bs-theme="dark"] .tb-sev.tb-sev-bulutyan { --tb-sev-g1: #E6ECF5; --tb-sev-g2: #BFD3EE; } .plan-popular .tb-sev.tb-sev-bulutyan { --tb-sev-g1: #D04555; --tb-sev-g2: #C4162B; } [data-bs-theme="dark"] .plan-popular .tb-sev.tb-sev-bulutyan { --tb-sev-g1: #E7A2AA; --tb-sev-g2: #DC7380; }
/* bulutyan = kart düğmesi dili (2026-10-21): saydam dolgu + ince kontur */
.tb-sev.tb-sev-bulutyan { --tb-sev-dolgu: rgba(27,63,107,.08); --tb-sev-kontur: #1B3F6B; } [data-bs-theme="dark"] .tb-sev.tb-sev-bulutyan { --tb-sev-dolgu: rgba(255,255,255,.06); --tb-sev-kontur: rgba(255,255,255,.55); } .plan-popular .tb-sev.tb-sev-bulutyan { --tb-sev-dolgu: rgba(196,22,43,.08); --tb-sev-kontur: #C4162B; } [data-bs-theme="dark"] .plan-popular .tb-sev.tb-sev-bulutyan { --tb-sev-dolgu: rgba(231,162,170,.1); --tb-sev-kontur: #E7A2AA; }
/* KARAR B (2026-10-21): bulutlar = büyük fiyat rakamının rengi; popülerde de aynı */
.tb-sev.tb-sev-bulutyan, .plan-popular .tb-sev.tb-sev-bulutyan { --tb-sev-dolgu: #1B3F6B; } [data-bs-theme="dark"] .tb-sev.tb-sev-bulutyan, [data-bs-theme="dark"] .plan-popular .tb-sev.tb-sev-bulutyan { --tb-sev-dolgu: #fff; }
/* KARAR C (2026-10-21): bulutlar = tema ana mavisi #3564AF, iki kipte aynı */
.tb-sev.tb-sev-bulutyan, .plan-popular .tb-sev.tb-sev-bulutyan, [data-bs-theme="dark"] .tb-sev.tb-sev-bulutyan, [data-bs-theme="dark"] .plan-popular .tb-sev.tb-sev-bulutyan { --tb-sev-dolgu: #3564AF; }
/* KARAR A (2026-10-21): bulutlar = kart indirim rozetiyle aynı (aydınlık lacivert gradyan, karanlık #EEF2F8) */
.tb-sev.tb-sev-bulutyan, .plan-popular .tb-sev.tb-sev-bulutyan { --tb-sev-dolgu: #13213A; } [data-bs-theme="dark"] .tb-sev.tb-sev-bulutyan, [data-bs-theme="dark"] .plan-popular .tb-sev.tb-sev-bulutyan { --tb-sev-dolgu: #EEF2F8; }
/* KARAR D (2026-10-21): bulutlar = açıklama satırının soft tonu */
.tb-sev.tb-sev-bulutyan, .plan-popular .tb-sev.tb-sev-bulutyan { --tb-sev-dolgu: #6B7A8C; } [data-bs-theme="dark"] .tb-sev.tb-sev-bulutyan, [data-bs-theme="dark"] .plan-popular .tb-sev.tb-sev-bulutyan { --tb-sev-dolgu: #9AA7B8; }
/* KARAR E (2026-10-21): çift ton bulut — üst yarı açık, alt yarı koyu */
.tb-sev.tb-sev-bulutyan, .plan-popular .tb-sev.tb-sev-bulutyan, [data-bs-theme="dark"] .tb-sev.tb-sev-bulutyan, [data-bs-theme="dark"] .plan-popular .tb-sev.tb-sev-bulutyan { --tb-sev-dolgu: initial; } .tb-sev.tb-sev-bulutyan { --tb-sev-ust: #5A8FD6; --tb-sev-alt: #13213A; } [data-bs-theme="dark"] .tb-sev.tb-sev-bulutyan { --tb-sev-ust: #E6ECF5; --tb-sev-alt: #9FD3FF; }
/* KARAR F (2026-10-21): bulutlar lacivert/beyaz, yalnız sonuncusu logo kırmızısı */
.tb-sev.tb-sev-bulutyan, .plan-popular .tb-sev.tb-sev-bulutyan { --tb-sev-dolgu: #1B3F6B; --tb-sev-son: #C4162B; } [data-bs-theme="dark"] .tb-sev.tb-sev-bulutyan, [data-bs-theme="dark"] .plan-popular .tb-sev.tb-sev-bulutyan { --tb-sev-dolgu: #EEF2F8; --tb-sev-son: #E7A2AA; }
/* YUKARI OKLAR renk: tema mavisi; karanlıkta açık mavi; popülerde aynı (rakipte de sabit) */
.tb-sev.tb-sev-yukari { --tb-sev-ok: #3564AF; } .tb-sev.tb-sev-yukari svg { inline-size: 28px; block-size: 28px; } [data-bs-theme="dark"] .tb-sev.tb-sev-yukari { --tb-sev-ok: #9FD3FF; } .plan-popular .tb-sev.tb-sev-yukari { --tb-sev-ok: #3564AF; } [data-bs-theme="dark"] .plan-popular .tb-sev.tb-sev-yukari { --tb-sev-ok: #9FD3FF; }
/* BASAMAK renk: tema mavisi çizgi, kırmızı platform noktası; karanlıkta açık mavi */
.tb-sev.tb-sev-basamak { --tb-sev-ok: #3564AF; --tb-sev-kr: #C4162B; } .tb-sev.tb-sev-basamak svg { inline-size: 28px; block-size: 28px; } [data-bs-theme="dark"] .tb-sev.tb-sev-basamak { --tb-sev-ok: #9FD3FF; --tb-sev-kr: #E7A2AA; } .plan-popular .tb-sev.tb-sev-basamak { --tb-sev-ok: #C4162B; --tb-sev-kr: #13213A; } [data-bs-theme="dark"] .plan-popular .tb-sev.tb-sev-basamak { --tb-sev-ok: #E7A2AA; --tb-sev-kr: #fff; }
.tb-sev.tb-sev-dalga { --tb-sev-ok: #3564AF; } .tb-sev.tb-sev-dalga svg { inline-size: 28px; block-size: 28px; } [data-bs-theme="dark"] .tb-sev.tb-sev-dalga { --tb-sev-ok: #9FD3FF; } .plan-popular .tb-sev.tb-sev-dalga { --tb-sev-ok: #3564AF; } [data-bs-theme="dark"] .plan-popular .tb-sev.tb-sev-dalga { --tb-sev-ok: #9FD3FF; }
/* LOGO işareti: logo kırmızıları her kipte aynı (marka); popülerde (kırmızı şerit üstünde değil, kart içinde) yine aynı */
.tb-sev.tb-sev-logo svg { inline-size: 28px; block-size: 28px; } .tb-sev.tb-sev-logo, [data-bs-theme="dark"] .tb-sev.tb-sev-logo, .plan-popular .tb-sev.tb-sev-logo { --tb-sev-l1: #E7A2AA; --tb-sev-l2: #DC7380; --tb-sev-l3: #D04555; --tb-sev-l4: #C4162B; }
/* LOGO işareti v2 (altın oran): ikon 18.5px (= büyük harf 11.4 × φ); başlıkla boşluk 7px (= 11.4 / φ); aydınlıkta logo merdiveni, karanlıkta bir ton açık merdiven (lacivert zeminde okunur), sıra korunur */
.tb-sev.tb-sev-logo { display: inline-flex; align-items: flex-end; margin-inline-start: 7px; flex: none; } .tb-sev.tb-sev-logo svg { inline-size: auto; block-size: 18.5px; }
.tb-sev.tb-sev-logo, .plan-popular .tb-sev.tb-sev-logo { --tb-sev-l1: #E7A2AA; --tb-sev-l2: #DC7380; --tb-sev-l3: #D04555; --tb-sev-l4: #C4162B; }
[data-bs-theme="dark"] .tb-sev.tb-sev-logo, [data-bs-theme="dark"] .plan-popular .tb-sev.tb-sev-logo { --tb-sev-l1: #F4CFD4; --tb-sev-l2: #E7A2AA; --tb-sev-l3: #DC7380; --tb-sev-l4: #D04555; }

/* 2026-10-22 QA: e-posta kategorilerinin vurgu rengi hic tanimlanmamisti -> kahraman rozetinin cercevesi/zemini ve ust serit bos kaliyordu */
.tb-kt-kposta,   .tb-kb-kposta   { --kt-a: #4FB3FF; --kt-b: #8DB8FF; }
.tb-kt-pposta,   .tb-kb-pposta   { --kt-a: #8DB8FF; --kt-b: #F0456B; }
.tb-kt-mailsrv,  .tb-kb-mailsrv  { --kt-a: #F5B942; --kt-b: #8DB8FF; }
.tb-kt-exchange, .tb-kb-exchange { --kt-a: #5B8DEF; --kt-b: #4FB3FF; }
html:not([data-bs-theme="dark"]) .tb-kt-pposta, html:not([data-bs-theme="dark"]) .tb-kb-pposta { --kt-b: #DC7380; }

/* 2026-10-22 QA: uzun dillerde (pt-br, es, fr...) son kartin "12 ay toplam · normal fiyat" notu 2 satira sariyor, kartin ozellik listesini
   kardeslerinden asagi itiyordu. Not satiri her kartta 2 satirlik yer kaplar -> tum kartlarda "Genel ozellikler" ayni hizada. */
.plan-grid .plan-card .tb-pk13-alt { min-block-size: 2.9em; }

/* 2026-10-22 QA: mobilde acilir donem listesi dugme genisliginde kaliyor, uzun rozetler ("Melhor preço · 35% de desconto") panel ve ekran disina tasiyordu */
.tb-donem-liste { max-inline-size: calc(100vw - 2rem); }
.tb-donem-liste li { flex-wrap: wrap; row-gap: .3rem; }
@media (max-width: 767.98px) {
  .tb-donem-liste .tb-donem-rozet { white-space: normal; max-inline-size: 100%; }
}

/* 2026-10-22 OLCUM: kategori basligi 1366 px'te uzun dillerde 3-4 satira iniyordu (TR 2). Punto her genislikte 56 px,
   fark sutun genisliginden. 1100-1499 px'te yalnizca uzun dillerde ~%10 kucultulur; tr/zh/ja/ko degismez. */
@media (min-width: 1100px) and (max-width: 1499.98px) {
    html:not([lang="tr"]):not([lang="zh"]):not([lang="ja"]) .tb-kt h1 { font-size: clamp(2.2rem, 3.7vw, 3.5rem); }
}

/* 2026-10-29 kart: ilk 5 özellik; "Detayları incele" açar (aynı ızgaradaki kartlar birlikte), sonra aynı düğme "Daha detaylı incele" → #teknik */
.tb-pk6-liste li.tb-pk-ek { display: none; }
.plan-grid.tb-pk-acik .tb-pk6-liste li.tb-pk-ek { display: flex; }
button.tb-pk6-alt { width: 100%; border: 0; border-top: 1px solid var(--tb-line); font: inherit; font-size: .82rem; cursor: pointer; }
[data-bs-theme="dark"] button.tb-pk6-alt { border-top-color: rgba(255,255,255,.08); }
[dir="rtl"] .plan-grid.tb-pk-acik button.tb-pk6-alt i { transform: scaleX(-1); }   /* açıkken ok tabloya; RTL'de sola */

/* ==================================================================
   GÜVENLİK BÖLÜMÜ — 8 konsept (components/guvenlik-8.tpl), 2026-10-29
   Ortak iskelet: tema kart yüzeyi + başlık ölçeği + güven yeşili; her konsept kendi görsel dili.
   ================================================================== */
.tb-gv { --gv-y: #0A8F43; --gv-y-z: rgba(10,167,75,.10); --gv-m: #3564AF; --gv-k: #C4162B; --gv-k-z: rgba(196,22,43,.08);
    position: relative; margin-top: 2.6rem; padding: clamp(1.4rem, 3vw, 2.4rem); border-radius: 18px;
    background: var(--tb-surface); border: 1px solid var(--tb-line); color: var(--tb-ink); overflow: hidden; }
[data-bs-theme="dark"] .tb-gv { --gv-y: #3DD47A; --gv-y-z: rgba(61,212,122,.10); --gv-m: #8DB8FF; --gv-k: #FF6B7D; --gv-k-z: rgba(255,107,125,.10); }
.tb-gv h3 { margin: 0 0 .45rem; font: 700 clamp(1.3rem, 2.1vw, 1.7rem)/1.2 var(--tb-font-baslik); letter-spacing: -.01em; color: var(--tb-ink); text-wrap: balance; }
.tb-gv .gv-bas p { margin: 0; max-width: 62ch; color: var(--tb-ink-soft); font-size: .95rem; line-height: 1.6; }
.tb-gv b { color: var(--tb-ink); }

/* 1 · WEB — kalkan halkası */
.gv-halka { display: grid; grid-template-columns: 1fr 210px 1fr; grid-template-rows: auto auto; gap: 1.2rem 2.4rem; align-items: center; margin-top: 2rem; }
.gv-hk { position: relative; display: grid; gap: .3rem; padding: 1rem 1.15rem; border-radius: 14px; background: var(--tb-surface-2); border: 1px solid var(--tb-line); }
.gv-hk i { font-size: 1.15rem; color: var(--gv-y); }
.gv-hk b { font-size: .95rem; } .gv-hk span { font-size: .84rem; line-height: 1.5; color: var(--tb-ink-soft); }
.gv-hk-1, .gv-hk-3 { grid-column: 1; text-align: end; justify-items: end; }
.gv-hk-2, .gv-hk-4 { grid-column: 3; }
.gv-hk-1, .gv-hk-2 { grid-row: 1; } .gv-hk-3, .gv-hk-4 { grid-row: 2; }
.gv-hk::after { content: ""; position: absolute; top: 50%; width: 2.4rem; height: 1px; }
.gv-hk-1::after, .gv-hk-3::after { inset-inline-start: 100%; background: linear-gradient(90deg, var(--tb-line), var(--gv-y)); }
.gv-hk-2::after, .gv-hk-4::after { inset-inline-end: 100%; background: linear-gradient(270deg, var(--tb-line), var(--gv-y)); }
[dir="rtl"] .gv-hk-1::after, [dir="rtl"] .gv-hk-3::after { background: linear-gradient(270deg, var(--tb-line), var(--gv-y)); }
[dir="rtl"] .gv-hk-2::after, [dir="rtl"] .gv-hk-4::after { background: linear-gradient(90deg, var(--tb-line), var(--gv-y)); }
.gv-merkez { grid-column: 2; grid-row: 1 / 3; position: relative; width: 210px; aspect-ratio: 1; }
.gv-merkez-r1, .gv-merkez-r2, .gv-merkez-k { position: absolute; border-radius: 50%; }
.gv-merkez-r1 { inset: 0; border: 1px dashed color-mix(in srgb, var(--gv-y) 45%, transparent); }
.gv-merkez-r2 { inset: 30px; border: 1px solid color-mix(in srgb, var(--gv-y) 30%, transparent); background: radial-gradient(circle, var(--gv-y-z), transparent 70%); }
.gv-merkez-k { inset: 58px; display: grid; place-items: center; font-size: 2.3rem; color: #fff;
    background: linear-gradient(150deg, #13B95B, #0A7F3E); box-shadow: 0 14px 34px -10px rgba(10,143,67,.6), inset 0 1px 0 rgba(255,255,255,.25); }

/* 2 · UCUZ — fiyat değişir, güvenlik değişmez */
.gv-matris-sar { margin-top: 1.8rem; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.gv-matris { width: 100%; min-width: 560px; border-collapse: separate; border-spacing: 0; }
.gv-matris thead th { padding: .2rem .6rem 1rem; text-align: center; font-weight: 400; vertical-align: bottom; }
.gv-matris thead th small { display: block; font-size: .78rem; color: var(--tb-ink-soft); }
.gv-matris thead th b { display: block; margin-top: .15rem; font: 700 1.35rem/1.1 var(--tb-font-baslik); font-variant-numeric: tabular-nums; }
.gv-matris thead th em { font-style: normal; font-size: .75rem; color: var(--tb-ink-soft); }
.gv-matris tbody th { padding: .8rem .6rem; text-align: start; font-size: .9rem; font-weight: 600; white-space: nowrap; border-top: 1px solid var(--tb-line); }
.gv-matris tbody th i { margin-inline-end: .55rem; color: var(--gv-y); }
.gv-matris td { position: relative; padding: .8rem .6rem; text-align: center; border-top: 1px solid var(--tb-line); }
.gv-matris td::before { content: ""; position: absolute; top: 50%; left: 0; right: 0; height: 2px; background: var(--gv-y-z); }
.gv-tik { position: relative; display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--tb-surface); border: 1.5px solid var(--gv-y); color: var(--gv-y); font-size: .95rem; }

/* 3 · KURUMSAL — güvenlik bilgi formu (resmî belge) */
.tb-gv-2 { border-top: 4px solid var(--gv-m); background-image: repeating-linear-gradient(0deg, transparent 0 31px, color-mix(in srgb, var(--tb-line) 45%, transparent) 31px 32px); }
.gv-form-ust { display: flex; align-items: center; gap: 1.1rem; padding-bottom: 1.2rem; border-bottom: 2px solid var(--tb-ink); }
.gv-form-muhur { flex: none; display: grid; place-items: center; width: 58px; height: 58px; border-radius: 50%; font-size: 1.5rem; color: var(--gv-y);
    border: 2px solid var(--gv-y); box-shadow: 0 0 0 4px var(--tb-surface), 0 0 0 5px color-mix(in srgb, var(--gv-y) 45%, transparent); background: var(--tb-surface); }
.gv-form-ust p { margin: 0; color: var(--tb-ink-soft); font-size: .92rem; max-width: 70ch; }
.gv-form-sar { overflow-x: auto; }
.gv-form-tablo { width: 100%; min-width: 640px; border-collapse: collapse; font-size: .9rem; background: var(--tb-surface); }
.gv-form-tablo thead th { padding: .75rem .8rem; text-align: start; font-size: .78rem; font-weight: 700; color: var(--tb-ink-soft); border-bottom: 1px solid var(--tb-line); }
.gv-form-tablo tbody th { width: 13%; padding: .85rem .8rem; text-align: start; font-weight: 700; color: var(--tb-ink); border-bottom: 1px solid var(--tb-line); }
.gv-form-tablo td { padding: .85rem .8rem; color: var(--tb-ink-soft); line-height: 1.5; border-bottom: 1px solid var(--tb-line); }
.gv-form-tablo td:nth-child(2) { width: 24%; white-space: nowrap; }
.gv-form-tablo tbody tr:nth-child(even) { background: color-mix(in srgb, var(--tb-surface-2) 70%, transparent); }
.gv-etkin { display: inline-flex; align-items: center; gap: .45rem; font-weight: 700; color: var(--gv-y); white-space: nowrap; }
.gv-etkin::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--gv-y); box-shadow: 0 0 0 3px var(--gv-y-z); }

/* 4 · E-TİCARET — ziyaretçiden ödemeye güvenli yol (tek seferlik paket) */
.gv-yol { position: relative; list-style: none; margin: 2.2rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1rem; }
.gv-yol::before { content: ""; position: absolute; top: 28px; left: 10%; right: 10%; height: 2px; background: linear-gradient(90deg, var(--gv-m), var(--gv-y)); opacity: .55; }
.gv-yol::after { content: ""; position: absolute; top: 23px; left: 10%; width: 12px; height: 12px; border-radius: 50%; background: #fff;
    box-shadow: 0 0 0 3px var(--gv-y), 0 0 16px 4px color-mix(in srgb, var(--gv-y) 60%, transparent); animation: gv-paket 2.6s cubic-bezier(.6,.05,.35,1) .8s 1 forwards; }
@keyframes gv-paket { to { left: calc(90% - 12px); } }
[dir="rtl"] .gv-yol::after { left: auto; right: 10%; animation-name: gv-paket-rtl; }
@keyframes gv-paket-rtl { to { right: calc(90% - 12px); } }
.gv-yol li { position: relative; z-index: 1; display: grid; justify-items: center; align-content: start; gap: .4rem; text-align: center; }
.gv-yol-d { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; font-size: 1.3rem; color: var(--tb-ink-soft); background: var(--tb-surface); border: 2px solid var(--tb-line); }
.gv-yol-k { color: var(--gv-y); border-color: var(--gv-y); background: var(--tb-surface); box-shadow: 0 0 0 6px var(--gv-y-z); }
.gv-yol-son { color: #fff; border: 0; background: linear-gradient(150deg, #13B95B, #0A7F3E); box-shadow: 0 12px 26px -10px rgba(10,143,67,.6); }
.gv-yol li b { margin-top: .35rem; font-size: .92rem; } .gv-yol li > span:not(.gv-yol-d) { font-size: .8rem; line-height: 1.5; color: var(--tb-ink-soft); max-width: 24ch; }
@media (prefers-reduced-motion: reduce) { .gv-yol::after { display: none; } }

/* 5 · WORDPRESS — katman katman */
.gv-wp { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; }
.gv-wp-cizim { position: relative; width: 300px; aspect-ratio: 1; }
.gv-wp-r, .gv-wp-m { position: absolute; border-radius: 50%; }
.gv-wp-r1 { inset: 0;    border: 1.5px solid #3564AF; background: rgba(53,100,175,.05); }
.gv-wp-r2 { inset: 32px; border: 1.5px solid #2D7FA6; background: rgba(45,127,166,.05); }
.gv-wp-r3 { inset: 64px; border: 1.5px solid #1C9A86; background: rgba(28,154,134,.06); }
.gv-wp-r4 { inset: 96px; border: 1.5px solid #0AA74B; background: rgba(10,167,75,.08); }
.gv-wp-m { inset: 124px; display: grid; place-items: center; font-size: 1.9rem; color: #fff; background: #21759B; box-shadow: 0 10px 24px -8px rgba(33,117,155,.7); }
.gv-wp-liste { list-style: none; margin: 1.4rem 0 0; padding: 0; display: grid; gap: .85rem; }
.gv-wp-liste li { display: flex; gap: .85rem; align-items: flex-start; }
.gv-wp-liste li div { display: grid; gap: .1rem; } .gv-wp-liste li div span { font-size: .84rem; color: var(--tb-ink-soft); line-height: 1.5; }
.gv-wp-n { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; font-size: .8rem; font-weight: 700; color: #fff; }
.gv-wp-n1 { background: #3564AF; } .gv-wp-n2 { background: #2D7FA6; } .gv-wp-n3 { background: #1C9A86; } .gv-wp-n4 { background: #0AA74B; }
.gv-wp-son .gv-wp-n { background: #21759B; font-size: .95rem; }

/* 6 · AJANS — her müşteri ayrı oda */
.gv-oda { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; }
.gv-oda-izgara { display: grid; grid-template-columns: repeat(4, 1fr); gap: .65rem; }
.gv-oda-k { position: relative; display: grid; place-items: center; aspect-ratio: 4 / 3; border-radius: 10px; background: var(--tb-surface-2); border: 1px solid var(--tb-line); color: var(--gv-y); font-size: 1.35rem; }
.gv-oda-k em { position: absolute; left: 10px; height: 4px; border-radius: 2px; background: var(--tb-line); }
.gv-oda-k em:first-of-type { bottom: 16px; width: 42%; } .gv-oda-k em:last-of-type { bottom: 9px; width: 26%; }
.gv-oda-sorun { font-size: 1.7rem; color: var(--gv-k); background: var(--gv-k-z); border-color: color-mix(in srgb, var(--gv-k) 45%, transparent); outline: 2px dashed color-mix(in srgb, var(--gv-k) 55%, transparent); outline-offset: 3px; }
.gv-oda-liste { list-style: none; margin: 1.4rem 0 0; padding: 0; display: grid; gap: 1rem; }
.gv-oda-liste li { display: flex; gap: .85rem; align-items: flex-start; }
.gv-oda-liste li > i { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; color: var(--gv-y); background: var(--gv-y-z); font-size: 1.1rem; }
.gv-oda-liste li div { display: grid; gap: .1rem; } .gv-oda-liste li span { font-size: .85rem; color: var(--tb-ink-soft); line-height: 1.5; }

/* 7 · CLOUD — güvenlik yığını (raf görünümü, iki kipte de donanım koyusu) */
.gv-raf { margin-top: 1.8rem; padding: .7rem; border-radius: 14px; background: #0C1424; border: 1px solid #1E2C45; box-shadow: inset 0 0 0 1px rgba(255,255,255,.02), 0 18px 40px -24px rgba(5,10,20,.8); display: grid; gap: .5rem; }
.gv-raf-u { display: grid; grid-template-columns: 10px 110px minmax(150px, 220px) minmax(0, 1fr) auto 10px; align-items: center; gap: 1rem; padding: .85rem 1rem; border-radius: 8px;
    background: linear-gradient(180deg, #192640, #131E34); border: 1px solid rgba(255,255,255,.06); box-shadow: inset 0 1px 0 rgba(255,255,255,.05); }
.gv-raf-vida { width: 8px; height: 8px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #9AA8BA, #4A5568); }
.gv-raf-katman { font-size: .76rem; font-weight: 700; letter-spacing: .02em; color: #8DB8FF; }
.tb-gv .gv-raf-u b { color: #F1F5FA; font-size: .95rem; }
.gv-raf-m { color: rgba(226,234,244,.72); font-size: .84rem; line-height: 1.45; }
.gv-raf-led { display: inline-flex; gap: .35rem; }
.gv-raf-led i { width: 8px; height: 8px; border-radius: 50%; background: #3DD47A; box-shadow: 0 0 8px 1px rgba(61,212,122,.7); }
.gv-raf-led i + i { background: #3D6FB8; box-shadow: none; opacity: .7; }

/* 8 · RESELLER — devreden güvence */
.gv-agac { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; }
.gv-agac-liste { list-style: none; margin: 1.3rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem 1rem; }
.gv-agac-liste li { display: inline-flex; align-items: center; gap: .5rem; font-size: .9rem; font-weight: 600; }
.gv-agac-liste li i { color: var(--gv-y); }
.gv-agac-cizim { display: grid; justify-items: center; gap: 2.4rem; }
.gv-agac-kok { position: relative; display: inline-flex; align-items: center; gap: .6rem; padding: .85rem 1.3rem; border-radius: 12px; color: #fff;
    background: linear-gradient(150deg, #3D72C4, #274C8A); box-shadow: 0 14px 30px -14px rgba(39,76,138,.8); }
.tb-gv .gv-agac-kok b { color: #fff; }
.gv-agac-kok::after { content: ""; position: absolute; top: 100%; left: 50%; width: 2px; height: 1.2rem; background: var(--tb-line); }
.gv-agac-dallar { position: relative; width: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.gv-agac-dallar::before { content: ""; position: absolute; top: -1.2rem; left: 16.6%; right: 16.6%; height: 1.2rem; border: 2px solid var(--tb-line); border-bottom: 0; border-radius: 12px 12px 0 0; }
.gv-agac-hesap { display: grid; justify-items: center; gap: .55rem; padding: .9rem .6rem; border-radius: 12px; background: var(--tb-surface-2); border: 1px solid var(--tb-line); text-align: center; }
.gv-agac-hesap b { font-size: .85rem; }
.gv-agac-hesap span { display: inline-flex; gap: .3rem; }
.gv-agac-hesap span i { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; font-size: .78rem; color: var(--gv-y); background: var(--gv-y-z); }

/* duyarlı */
@media (max-width: 991.98px) {
    .gv-halka { grid-template-columns: 1fr; grid-template-rows: none; }
    .gv-merkez { grid-column: auto; grid-row: auto; order: -1; width: 150px; justify-self: center; }
    .gv-merkez-r2 { inset: 22px; } .gv-merkez-k { inset: 42px; font-size: 1.7rem; }
    .gv-hk-1, .gv-hk-2, .gv-hk-3, .gv-hk-4 { grid-column: auto; grid-row: auto; text-align: start; justify-items: start; }
    .gv-hk::after { display: none; }
    .gv-wp, .gv-oda, .gv-agac { grid-template-columns: 1fr; }
    .gv-wp-cizim { width: 230px; justify-self: center; }
    .gv-wp-r2 { inset: 24px; } .gv-wp-r3 { inset: 48px; } .gv-wp-r4 { inset: 72px; } .gv-wp-m { inset: 94px; font-size: 1.5rem; }
    .gv-raf-u { grid-template-columns: 110px minmax(0, 1fr) auto; gap: .3rem 1rem; }
    .gv-raf-vida { display: none; } .gv-raf-m { grid-column: 1 / -1; }
}
@media (max-width: 767.98px) {
    .gv-yol { grid-template-columns: 1fr; gap: 1.1rem; }
    .gv-yol::before { top: 28px; bottom: 28px; left: 27px; right: auto; width: 2px; height: auto; background: linear-gradient(180deg, var(--gv-m), var(--gv-y)); }
    [dir="rtl"] .gv-yol::before { left: auto; right: 27px; }
    .gv-yol::after { display: none; }
    .gv-yol li { grid-template-columns: 56px minmax(0, 1fr); justify-items: start; text-align: start; column-gap: 1rem; }
    .gv-yol li .gv-yol-d { grid-row: 1 / 3; } .gv-yol li b { margin-top: .5rem; }
}
@media (max-width: 479.98px) {
    .gv-agac-dallar { grid-template-columns: 1fr; } .gv-agac-dallar::before { display: none; } .gv-agac-kok::after { display: none; }
    .gv-agac-liste { grid-template-columns: 1fr; }
    .gv-oda-izgara { grid-template-columns: repeat(3, 1fr); } .gv-oda-k:nth-child(n+10) { display: none; }
}
/* telefon düzeltmeleri (ölçümle): Ucuz matrisi 4 paketi sığdırır, Kurumsal formu satır kartlarına döner, Cloud rafı katmanı üste alır */
@media (max-width: 575.98px) {
    .gv-matris { min-width: 0; table-layout: fixed; }
    .gv-matris thead th:first-child, .gv-matris tbody th { width: 40%; }
    .gv-matris thead th { padding: .2rem .15rem .8rem; }
    .gv-matris thead th b { font-size: .92rem; } .gv-matris thead th small { font-size: .7rem; }
    .gv-matris tbody th { white-space: normal; font-size: .8rem; padding: .7rem .3rem; line-height: 1.3; }
    .gv-matris tbody th i { margin-inline-end: .35rem; }
    .gv-matris td { padding: .7rem .1rem; } .gv-tik { width: 24px; height: 24px; font-size: .8rem; }
}
@media (max-width: 767.98px) {
    .gv-form-tablo { min-width: 0; background: transparent; }
    .gv-form-tablo thead { display: none; }
    .gv-form-tablo, .gv-form-tablo tbody { display: block; }
    .gv-form-tablo tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .15rem .8rem; margin-top: .7rem; padding: .85rem .95rem; border: 1px solid var(--tb-line); border-radius: 12px; background: var(--tb-surface); }
    .gv-form-tablo tbody tr:nth-child(even) { background: var(--tb-surface); }
    .gv-form-tablo tbody th, .gv-form-tablo td { display: block; width: auto; padding: 0; border: 0; white-space: normal; }
    .gv-form-tablo tbody th { grid-column: 1; font-size: .74rem; font-weight: 700; color: var(--tb-ink-soft); }
    .gv-form-tablo td:nth-child(2) { grid-column: 1; width: auto; white-space: normal; }
    .gv-form-tablo td:nth-child(3) { grid-column: 1 / -1; font-size: .85rem; }
    .gv-form-tablo td:nth-child(4) { grid-column: 2; grid-row: 1 / 3; align-self: center; }
    .gv-raf-u { grid-template-columns: minmax(0, 1fr) auto; gap: .2rem .8rem; }
    .gv-raf-katman { grid-column: 1; grid-row: 1; } .gv-raf-u b { grid-column: 1; grid-row: 2; } .gv-raf-led { grid-column: 2; grid-row: 1 / 3; align-self: center; }
    .gv-raf-m { grid-column: 1 / -1; grid-row: 3; }
}

/* ==================================================================
   GÜVENLİK KUTUSU R1 (plan-grid.tpl .tb-gkt) — 2026-10-29: ilk yeşil kutunun rafine hâli. Mühür başlık (yeşil daire + kalkan),
   dört koruma kısa adlarıyla en çok iki sütunda (geniş 3'lü kartta 3+1 dizilmesin); kutu dar kalınca (≈1200px'te 4 kart) tek sütun. Önizlemede 17 dil × 3 genişlik ölçüldü.
   ================================================================== */
.tb-gkt { margin: 0 1.15rem 1rem; padding: .8rem .8rem .85rem; border-radius: 12px; background: linear-gradient(180deg, #EFF9F3, #E6F5ED); border: 1px solid rgba(10,143,67,.16); }
[data-bs-theme="dark"] .tb-gkt { background: linear-gradient(180deg, rgba(61,212,122,.09), rgba(61,212,122,.045)); border-color: rgba(61,212,122,.16); }
.tb-gkt-bas { display: flex; align-items: center; gap: .55rem; margin-bottom: .6rem; }
.tb-gkt-ik { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; font-size: .8rem; color: #fff;
    background: linear-gradient(150deg, #13B95B, #0A7F3E); box-shadow: 0 4px 10px -4px rgba(10,143,67,.6); }
.tb-gkt-bas b { min-width: 0; font-size: .84rem; font-weight: 700; line-height: 1.25; color: #0A6B35; }
[data-bs-theme="dark"] .tb-gkt-bas b { color: #4ADE8A; }
/* sütun kararı YAZI BOYUTUNA bağlı (em): kullanıcının tarayıcı yazı boyutu/yakınlaştırması büyükse iki ad yan yana sığmaz → tek sütun.
   Önceki px eşiği büyük yazıda "Let's Encrypt™ SSL" ile "ModSecurity WAF"ı üst üste bindirdi (kullanıcı ekran görüntüsü 2026-10-29).
   max(... , 50%) → en çok 2 sütun (geniş kartta 3+1 dizilmez). */
.tb-gkt ul { list-style: none; margin: 0; padding: 0; display: grid; font-size: .78rem; gap: .4rem .5rem;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, max(10.45em, calc(50% - .25rem))), 1fr)); }   /* en uzun ad ölçüldü: 10,14em; min(100%) → aşırı büyük yazıda tek sütun kutuyu aşmaz */
.tb-gkt li { display: flex; align-items: center; gap: .35rem; min-width: 0; font-size: 1em; font-weight: 600; line-height: 1.3; color: var(--tb-ink); overflow-wrap: anywhere; }   /* çok büyük yazıda taşmak yerine alt satır */
.tb-gkt li i { flex: none; font-size: 1.15em; color: #0AA74B; }
[data-bs-theme="dark"] .tb-gkt li i { color: #4ADE8A; }