/*
 * Olta Robotu - sihirbaz (.tw-*) ve sonuc sayfasi (.tr-*).
 *
 * NEDEN DUZ CSS (Tailwind utility'leri yerine): public/build/assets/app-*.css
 * elle derleniyor ve yenilenmiyor. Blade'e bugun yazilan bir utility derlenmis
 * dosyada yoksa SESSIZCE etkisiz kalir. Bu yuzden bu iki gorunumun govdesi
 * derleme gerektirmeyen duz CSS; yalnizca sayfa kabugu (container/mx-auto) ve
 * breadcrumb, derlenmis CSS'te var oldugu DOGRULANAN siniflari kullaniyor.
 *
 * NEDEN "--twz-" (beklenen "--tw-" degil): "--tw-*" TAILWIND'IN kendi ic
 * degisken alan adi (--tw-shadow, --tw-border-style, --tw-ring-color ...).
 * Ayni on ekle degisken tanimlamak, ileride ayni adi tasiyan bir Tailwind
 * degiskeniyle sessizce cakisirdi. Sinif adlari istendigi gibi .tw-* kaldi;
 * yalnizca DEGISKEN on eki bir harf uzatildi. Renkler public/css/
 * category-filter.css paletiyle birebir ayni.
 */

:root {
    /* Sihirbaz paleti */
    --twz-border: #e5e7eb;
    --twz-border-strong: #d1d5db;
    --twz-text: #374151;
    --twz-text-muted: #6b7280;
    --twz-accent: #0284c7;
    --twz-accent-soft: #e0f2fe;
    --twz-accent-hover: #0369a1;
    --twz-surface: #ffffff;

    /* Sonuc sayfasi paleti (ayni renkler, ayri ad alani) */
    --tr-border: #e5e7eb;
    --tr-border-strong: #d1d5db;
    --tr-text: #374151;
    --tr-text-strong: #111827;
    --tr-text-muted: #6b7280;
    --tr-text-faint: #9ca3af;
    --tr-accent: #0284c7;
    --tr-accent-soft: #e0f2fe;
    --tr-accent-hover: #0369a1;
    --tr-surface: #ffffff;
    --tr-surface-alt: #f9fafb;
    --tr-radius: 10px;

    /* Rozetler: yesil / mavi / amber. Metin renkleri WCAG AA (>= 4.5:1). */
    --tr-ok-bg: #d1fae5;
    --tr-ok-fg: #065f46;
    --tr-mid-bg: #dbeafe;
    --tr-mid-fg: #1e40af;
    --tr-low-bg: #fef3c7;
    --tr-low-fg: #92400e;
}

/* [hidden] burada acikca bastirilir: asagidaki display kurallari aksi halde
   oznitelikten daha guclu olur ve gizli bolumler gorunur kalirdi. */
.tw-steps[hidden],
.tw-step[hidden],
.tw-go[hidden],
.tr-tabs[hidden],
.tr-item__actions[hidden],
.tr-btn[hidden],
.tr-share[hidden],
.tr-share__menu[hidden],
.tr-share__item[hidden],
.tr-pair__why[hidden],
.tr-pair__note[hidden] {
    display: none !important;
}

/* Yalnizca ekran okuyucuya gorunen metin.
   NEDEN: durumu (secili urun/ortam) tek basina renk tasimasin diye kart ve
   dugmelere metinsel karsilik ekleniyor; gorunumde yer kaplamamali. */
.tr-sr,
.tw-sr {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ================================================================ SIHIRBAZ */

/* Band: anasayfada bilesen container'in DISINDA ve tam genislikte duruyor;
   acik gradyan zemin karta gorsel agirlik veriyor (eski slider'in yerini
   tutan tek sey buydu). compact=false (/olta-robotu) sayfa container'inin
   icinde oldugu icin bandi soyar: --plain. */
/* NEDEN GRADYAN TERS (mavi ustte): sayfa govdesi bg-gray-50 ~ #f8fafc. Eski
   sira (#f8fafc -> #e0f2fe) bandin UST yarisini arka planla ayni renge
   getiriyordu, yani band yalnizca kartin altinda seziliyordu. Mavi uctan
   basliyor ve altta 1px ayirici var; band artik iki ucundan da gorunuyor. */
.tw-hero {
    box-sizing: border-box;
    background: linear-gradient(180deg, #e0f2fe 0%, #f0f9ff 58%, #f8fafc 100%);
    border-bottom: 1px solid var(--twz-border);
    padding: 24px 0;
}

.tw-hero *,
.tw-hero *::before,
.tw-hero *::after {
    box-sizing: border-box;
}

/* NEDEN 20px (32 degil): hero MacBook ekraninda (1440x900, ustbilgi+menu
   148px) bandi asiyordu ve altindaki "Son Eklenen Kamışlar" basligi ilk
   ekranda gorunmuyordu. Kompaktlastirma bandin kendisinden basliyor. */
@media (min-width: 640px) {
    .tw-hero {
        padding: 20px 0;
    }
}

/* Kart icerigi site container'iyla ayni hizada ("Son Eklenen Kamışlar").
   NEDEN BES KADEME (sabit 1280 degil): sitenin Tailwind container'i bes
   kirilmali (640 / 768 / 1024 / 1280 / 1536). Sabit 1280 yalnizca
   1280-1535 bandinda tutuyordu: 1920px ekranda container 1536'ya acilirken
   hero 1280'de kaliyor ve kart alttaki panelden 128px iceride basliyordu,
   1279px'te ise tam tersi yonde 127px disarida kaliyordu. Yatay 16px
   bosluk container'in sm:px-4 degeriyle ayni. */
.tw-hero__inner {
    width: 100%;
    max-width: none;
    margin: 0 auto;
    padding: 0 16px;
}

@media (min-width: 640px) {
    .tw-hero__inner {
        max-width: 640px;
    }
}

@media (min-width: 768px) {
    .tw-hero__inner {
        max-width: 768px;
    }
}

@media (min-width: 1024px) {
    .tw-hero__inner {
        max-width: 1024px;
    }
}

@media (min-width: 1280px) {
    .tw-hero__inner {
        max-width: 1280px;
    }
}

@media (min-width: 1536px) {
    .tw-hero__inner {
        max-width: 1536px;
    }
}

.tw-hero--plain {
    background: none;
    border-bottom: 0;
    padding: 0;
}

.tw-hero--plain .tw-hero__inner {
    max-width: none;
    margin: 0;
    padding: 0;
}

.tw-card {
    padding: 24px;
    background: var(--twz-surface);
    border: 1px solid var(--twz-border);
    border-radius: 16px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 10px 28px rgba(15, 23, 42, .07);
    color: var(--twz-text);
    font-size: 14px;
    line-height: 1.5;
}

/* NEDEN YATAYDA 24px (32px degil): site kartlari ("Son Eklenen Kamışlar")
   md'de p-6 = 24px ic bosluk kullaniyor. 32px yapilinca kart KENARLARI
   hizali olmasina ragmen ic metin sutunu 8px iceride kaliyor, dikey
   taramada hero ayri bir sisteme aitmis gibi duruyordu. */
@media (min-width: 768px) {
    .tw-card {
        padding: 24px;
    }
}

/* Mobilde tam genislik: sitenin container'i <640'ta yatay bosluk vermiyor
   ("Son Eklenen Kamışlar" bolumu tam genislikte, basligi 12px iceride).
   Hero 16px iceride basladigi icin iki bolumun sol kenari tutmuyordu;
   burada kart da tam genislige alinip ic boslugu 12px'e cekiliyor.
   /olta-robotu (--plain) sayfa container'i icinde, oraya dokunulmuyor. */
@media (max-width: 639px) {
    .tw-hero:not(.tw-hero--plain) .tw-hero__inner {
        padding: 0;
    }

    .tw-hero:not(.tw-hero--plain) .tw-card {
        padding: 20px 12px;
        border-left-width: 0;
        border-right-width: 0;
        border-radius: 0;
    }
}

/* [hidden] burada acikca bastirilir: asagidaki display kurallari aksi halde
   oznitelikten daha guclu olur ve gizli bolumler gorunur kalirdi. */
.tw-bar[hidden],
.tw-btn[hidden],
.tw-chipset[hidden] {
    display: none !important;
}

/* Iki sutun: sol adimlar (7/12), sag vitrin (5/12). <1024 tek sutun, vitrin
   adimlarin ALTINDA kalir (DOM sirasi zaten oyle). */
.tw-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
}

/* NEDEN align-items:stretch (center degil): sag sutun artik bir vitrin karti
   degil, tam boy bir sahne. Ortalanmis birakilsaydi sahne kendi min-height
   degerinde kalir, sol sutun uzadikca altta ve ustte bos serit acilirdi.
   Stretch sahneyi sol sutunla ayni yukseklige cekiyor. */
@media (min-width: 1024px) {
    .tw-grid {
        grid-template-columns: 7fr 5fr;
        gap: 28px;
        align-items: stretch;
    }
}

/* 1024-1279: 7/5 bolunmede sag sutun 373px'e dusuyor ve sol sutundaki uc
   ortam karti yan yana sigmiyor. Bu aralikta bolunme 6/6. */
@media (min-width: 1024px) and (max-width: 1279px) {
    .tw-grid {
        grid-template-columns: 6fr 6fr;
        gap: 24px;
    }
}

.tw-main,
.tw-scene {
    min-width: 0;
}

/* ------------------------------------------------------------------ baslik */

.tw-eyebrow {
    margin: 0 0 4px;
    color: var(--twz-accent);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
}

/* NEDEN TEK OLCU (>=768'de 34px degil): baslik + alt metin + uc ortam karti
   birlikte hero'yu yukseltiyordu. 30px her genislikte yeterince baskin. */
.tw-title {
    margin: 0 0 6px;
    font-size: 30px;
    font-weight: 700;
    line-height: 1.2;
    color: #111827;
}

.tw-sub {
    margin: 0;
    max-width: 60ch;
    color: var(--twz-text-muted);
    font-size: 15px;
    line-height: 1.55;
}

/* ------------------------------------------------------------- adim cubugu */

.tw-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 20px;
}

.tw-bar__right {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}

.tw-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.tw-crumb {
    padding: 5px 12px;
    border: 1px solid transparent;
    border-radius: 999px;
    background: var(--twz-accent-soft);
    color: var(--twz-accent-hover);
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.tw-crumb:hover,
.tw-crumb:focus-visible {
    border-color: var(--twz-accent);
}

/* NEDEN SAYAC YERINE CUBUK: "Adım 2/2" bilgi tasimiyordu. Teknik kutusu cogu
   senaryoda hic acilmadigi icin kullanicinin gordugu ikinci adim her zaman
   sonuncuydu. Ince cubuk ayni ilerlemeyi yanlis sayi vermeden gosterir;
   hangi secimlerin yapildigini zaten soldaki cipler soyluyor. */
.tw-progress {
    display: block;
    flex: 0 0 auto;
    width: 64px;
    height: 4px;
    border-radius: 999px;
    /* NEDEN --border-strong: #e5e7eb'lik ray 4px'te gorunmuyor, dolu parca
       tek basina "yolda kalmis mavi cizgi" gibi duruyordu. */
    background: var(--twz-border-strong);
    overflow: hidden;
}

.tw-progress__fill {
    display: block;
    width: 50%;
    height: 100%;
    border-radius: inherit;
    background: var(--twz-accent);
    transition: width .2s ease;
}

.tw-q {
    margin: 14px 0 8px;
    font-size: 16px;
    font-weight: 600;
    color: #111827;
}

/* ----------------------------------------------------------- adim 1: ortam */

.tw-envs {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}

/* NEDEN ARTIK DAHA KISA KART: sag sutun stretch ile sol sutunu takip ettigi
   icin kartlari yukseltip iki kolonu esitlemeye gerek kalmadi. Yukseklik
   120 -> 84, aralik 16 -> 12 hero'dan ~50px kazandiriyor. */
@media (min-width: 640px) {
    .tw-envs {
        grid-template-columns: repeat(3, 1fr);
        gap: 12px;
    }
}

.tw-env {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 96px;
    padding: 14px;
    border: 1px solid var(--twz-border);
    border-radius: 12px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    color: var(--twz-text);
    text-decoration: none;
    transition: border-color .15s, box-shadow .15s, transform .15s, background-color .15s;
}

/* NEDEN BURADA (yukaridaki .tw-envs bloguna degil): ayni ozgulluk, bu yuzden
   .tw-env temel kuralindan SONRA gelmesi gerekiyor - aksi halde 96px kazanir. */
@media (min-width: 640px) {
    .tw-env {
        min-height: 84px;
    }
}

/* NEDEN TELEFONDA DAHA KOMPAKT: <640'ta uc kart alt alta diziliyor ve hero
   871px'e cikiyor; ilk ekranda sorunun kendisi kayboluyor. Ikon (44px) ile
   iki satir metin 76px'e rahat siginiyor, dokunma hedefi hala 44px'in cok
   uzerinde. */
@media (max-width: 639px) {
    .tw-env {
        min-height: 76px;
        padding: 12px;
    }
}

.tw-env:hover {
    border-color: var(--twz-accent);
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(2, 132, 199, .14);
}

.tw-env:focus-visible {
    outline: 2px solid var(--twz-accent);
    outline-offset: 2px;
}

/* NEDEN inset box-shadow (border-width degil): 2px kenarlik kartin ic
   olculerini degistirip izgarayi oynatirdi. */
.tw-env.is-active {
    border-color: var(--twz-accent);
    box-shadow: inset 0 0 0 1px var(--twz-accent);
    background: var(--twz-accent-soft);
}

/* Secili ortam kartinin isareti (tackle-wizard.js ekler).
   NEDEN SVG: eskiden duz bir onay glifiydi. Site sahibi gorunur metinde
   Unicode sembol istemiyor. Ikon artik satir ici SVG, yaninda gizli
   "Seçili" metni duruyor. */
.tw-env__sel {
    position: absolute;
    top: 7px;
    right: 9px;
    display: block;
    color: var(--twz-accent-hover);
    line-height: 0;
}

.tw-env__sel svg {
    display: block;
    width: 14px;
    height: 14px;
}

.tw-env__icon {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 999px;
    background: var(--twz-accent-soft);
    color: var(--twz-accent);
}

.tw-env__icon svg {
    width: 24px;
    height: 24px;
}

.tw-env--tekne .tw-env__icon {
    background: #ccfbf1;
    color: #0f766e;
}

.tw-env--tatli_su .tw-env__icon {
    background: #dcfce7;
    color: #15803d;
}

/* 640-1279: uc kart YAN YANA diziliyor, yani her kart sol sutunun ucte biri.
   Yan yana ikon+metin duzeninde metne 100px'in altinda yer kaliyor ve ipucu
   satiri (nowrap + ellipsis) kirpiliyordu - 640-1023 bandinda "Göl, baraj,
   nehir" yerine "Göl, bar..." goruluyordu. Kural eskiden yalnizca 1024-1279
   icindi; ayni sikisma daha alt bantta da var, bu yuzden esik 640'a indi.
   Olculer aynen korundu. */
@media (min-width: 640px) and (max-width: 1279px) {
    .tw-env {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        padding: 12px 10px;
    }

    .tw-env__icon {
        width: 40px;
        height: 40px;
    }
}

.tw-env__body {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.tw-env__name {
    font-size: 16px;
    font-weight: 600;
    color: #111827;
}

/* NEDEN TEK SATIR ZORUNLU: ipuclarindan biri sarinca o kartin metin blogu
   asagi kayiyor ve uc kartin baslik hizasi optik olarak tutmuyordu. */
.tw-env__hint {
    overflow: hidden;
    color: var(--twz-text-muted);
    font-size: 13px;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* --------------------------------------------------------- adim 2-3: cipler */

.tw-chipset {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.tw-chip {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: 0 16px;
    border: 1px solid var(--twz-border-strong);
    border-radius: 999px;
    background: var(--twz-surface);
    color: var(--twz-text);
    font: inherit;
    font-size: 15px;
    cursor: pointer;
    transition: border-color .15s, background-color .15s, color .15s;
}

.tw-chip:hover {
    border-color: var(--twz-accent);
    background: var(--twz-accent-soft);
}

.tw-chip:focus-visible {
    outline: 2px solid var(--twz-accent);
    outline-offset: 2px;
}

.tw-chip.is-active {
    border-color: var(--twz-accent);
    background: var(--twz-accent);
    color: #ffffff;
}

.tw-chip--unsure {
    border-style: dashed;
    color: var(--twz-text-muted);
}

/* --------------------------------------------------------------- butonlar */

.tw-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1px solid transparent;
    border-radius: 10px;
    font: inherit;
    text-decoration: none;
    cursor: pointer;
}

.tw-btn:focus-visible {
    outline: 2px solid var(--twz-accent);
    outline-offset: 2px;
}

.tw-btn--ghost {
    padding: 6px 12px;
    border-color: var(--twz-border);
    background: var(--twz-surface);
    color: var(--twz-text-muted);
    font-size: 13px;
}

.tw-btn--ghost:hover {
    border-color: var(--twz-accent);
    color: var(--twz-accent-hover);
}

.tw-btn--primary {
    height: 48px;
    padding: 0 24px;
    background: var(--twz-accent);
    color: #ffffff;
    font-size: 16px;
    font-weight: 700;
}

.tw-btn--primary:hover {
    background: var(--twz-accent-hover);
}

.tw-btn__arrow {
    width: 18px;
    height: 18px;
}

/* "Geri" dugmesindeki ok: eskiden "←" glifiydi (bkz. .tw-env__sel notu). */
.tw-btn__back {
    width: 14px;
    height: 14px;
}

.tw-go {
    margin-top: 18px;
}

.tw-go__name {
    display: block;
    margin-bottom: 6px;
    color: var(--twz-text-muted);
    font-size: 13px;
}

.tw-go__name:empty {
    display: none;
}

/* NEDEN GORUNMEZ: bu bolge ekran okuyucuya adim degisimini duyuruyor, ama
   yazdigi metin bir ustteki soruyla AYNI - gorunurde ikinci bir soluk satir
   olarak duruyordu. aria-live gizli ogede de calisir. */
.tw-live {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ------------------------------------------------- kisayollar + tam liste */

/* NEDEN IZGARANIN DISINDA: sol sutunda (7/12) uc populer cip iki satira
   tasiyordu ve "Tüm N senaryo" baglantisi kartin degil sutunun sag alt
   kosesine dusuyordu. Kartin tam genisliginde tek satir. */
.tw-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--twz-border);
}

.tw-shortcuts {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.tw-shortcuts__label {
    color: var(--twz-text-muted);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.tw-shortcut {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 13px;
    border: 1px solid var(--twz-border-strong);
    border-radius: 999px;
    background: var(--twz-surface);
    color: var(--twz-accent-hover);
    font-size: 13px;
    text-decoration: none;
}

.tw-shortcut:hover,
.tw-shortcut:focus-visible {
    border-color: var(--twz-accent);
    background: var(--twz-accent-soft);
}

.tw-shortcut__icon {
    flex: 0 0 auto;
    width: 15px;
    height: 15px;
    color: var(--twz-accent);
}

.tw-morelink {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
    color: var(--twz-text-muted);
    font-size: 13px;
    text-decoration: none;
    white-space: nowrap;
}

.tw-morelink:hover {
    color: var(--twz-accent-hover);
    text-decoration: underline;
}

/* NEDEN SVG: baglanti metni eskiden bir metin oku tasiyordu. Ok gorunur
   yazidan cikarildi, yerini satir ici chevron aldi. */
.tw-morelink__icon {
    flex: 0 0 auto;
    width: 14px;
    height: 14px;
}

/* ------------------------------------------------------------------- sahne */

/* Sag sutun artik bir vitrin karti degil, uc katmanli bir illustrasyon.
   NEDEN VITRIN KALKTI: sabit "Örnek takım" her ziyaretciye ayni iki urunu
   gosteriyordu ve anasayfayi oneri motoruna bagliyordu. Sahne veriye bagli
   degil; yalnizca alt seritteki sayilar katalogdan geliyor.

   NEDEN <1024'TE GIZLI: 400px genislikte sahne, sihirbazin ilk ekranini
   asagi itiyordu. Mobilde ziyaretcinin gormesi gereken sey sorunun kendisi. */
.tw-scene {
    display: none;
}

/* NEDEN #050c1a (eski #082f49): katmanlarin gok dikdortgeni artik kutuyu her
   yukseklikte dolduruyor, yani bu renk yalnizca iki yerde goruluyor - SVG
   boyanmadan onceki ilk kare ve katman gecisinin ortasi (iki katman da yari
   saydamken alttan sizan renk). Varsayilan katmanin (kiyi) EN UST gok rengiyle
   ayni tutuldu, boylece ne acilista ne de gecis ortasinda yabanci bir ton
   beliriyor. */
@media (min-width: 1024px) {
    .tw-scene {
        position: relative;
        display: block;
        overflow: hidden;
        min-height: 250px;
        border-radius: 14px;
        background: #050c1a;
    }
}

.tw-scene__layers {
    position: absolute;
    inset: 0;
}

/* Uc katman ust uste; gorunur olani [data-tw-scene] secer. 600 ms opaklik
   gecisi disinda hicbir sey degismiyor, yani gecis sirasinda yeniden
   yerlesim (layout) olmuyor. */
.tw-scene__layer {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity .6s ease;
}

[data-tw-scene="kiyi"] .tw-scene__layer--kiyi,
[data-tw-scene="tekne"] .tw-scene__layer--tekne,
[data-tw-scene="tatli_su"] .tw-scene__layer--tatli_su {
    opacity: 1;
}

/* Alt serit: koyu scrim uzerinde beyaz sayilar. SVG degil HTML, cunku
   burada gercek bilgi var ve ekran okuyucuya ulasmasi gerekiyor. */
.tw-scene__stats {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px;
    margin: 0;
    padding: 30px 16px 12px;
    background: linear-gradient(180deg, rgba(2, 6, 23, 0) 0%, rgba(2, 6, 23, .55) 55%, rgba(2, 6, 23, .82) 100%);
    color: #e0f2fe;
    font-size: 13px;
    line-height: 1.3;
}

.tw-scene__stat b {
    margin-right: 3px;
    color: #ffffff;
    font-size: 18px;
    font-weight: 700;
}

.tw-scene__sep {
    color: rgba(224, 242, 254, .55);
}

/* NEDEN: sahne <1024'te display:none ile kapatilinca alt serit de birlikte
   gidiyordu. display:none ogeyi erisilebilirlik agacindan da siler, yani
   "kamış / makine / senaryo" sayilari telefonda ve tablette ne goruluyor ne
   de ekran okuyucuya ulasiyordu. Oysa blade'deki gerekce tam tersini
   soyluyor: alt serit GERCEK bilgi. Burada sahnenin kendisi (katmanlar)
   gizli kalir, sayilar sade bir satir olarak basilir. */
@media (max-width: 1023px) {
    .tw-scene {
        display: block;
        min-height: 0;
        overflow: visible;
        background: none;
    }

    .tw-scene__layers {
        display: none;
    }

    .tw-scene__stats {
        position: static;
        margin-top: 4px;
        padding: 0;
        background: none;
        color: var(--twz-text-muted);
    }

    .tw-scene__stat b {
        color: #111827;
        font-size: 15px;
    }

    .tw-scene__sep {
        color: var(--twz-border-strong);
    }
}

/* --------------------------------------------------------- sahne hareketi */

/* Dalga ve sis bantlari 960 birim genisliginde (viewBox'in iki kati) cizildi;
   yarim genislik kadar kayinca desen kendini tekrar ediyor, yani dongu
   dikissiz. Hepsi transform, yani yeniden yerlesim yok. */
@keyframes tw-drift {
    from { transform: translateX(0); }
    to { transform: translateX(-480px); }
}

@keyframes tw-swim-r {
    from { transform: translateX(-40px); }
    to { transform: translateX(520px); }
}

@keyframes tw-swim-l {
    from { transform: translateX(520px) scaleX(-1); }
    to { transform: translateX(-40px) scaleX(-1); }
}

@keyframes tw-bob {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-3px); }
}

@keyframes tw-ring {
    0% { transform: scale(.35); opacity: .65; }
    100% { transform: scale(2.6); opacity: 0; }
}

@keyframes tw-rock {
    0%, 100% { transform: rotate(-1.5deg); }
    50% { transform: rotate(1.5deg); }
}

@keyframes tw-glide {
    from { transform: translateX(-50px); }
    to { transform: translateX(530px); }
}

@keyframes tw-jump {
    0% { transform: translate(0, 16px) rotate(-40deg); opacity: 0; }
    6% { opacity: 1; }
    25% { transform: translate(14px, -16px) rotate(-18deg); }
    50% { transform: translate(30px, -25px) rotate(4deg); }
    75% { transform: translate(46px, -14px) rotate(28deg); }
    94% { opacity: 1; }
    100% { transform: translate(58px, 16px) rotate(46deg); opacity: 0; }
}

@keyframes tw-splash {
    0% { transform: scale(.3); opacity: .65; }
    45% { transform: scale(1.9); opacity: .22; }
    100% { transform: scale(2.6); opacity: 0; }
}

.tw-wave {
    animation: tw-drift linear infinite;
}

/* Yakin bant en hizli, uzak bant en yavas: bakis acisi boyle okunuyor. */
.tw-wave--far { animation-duration: 34s; }
.tw-wave--mid { animation-duration: 26s; }
.tw-wave--near { animation-duration: 18s; }

.tw-mist {
    animation: tw-drift 90s linear infinite;
}

.tw-fish {
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

.tw-fish--a { animation-name: tw-swim-r; animation-duration: 28s; animation-delay: -6s; }
.tw-fish--b { animation-name: tw-swim-r; animation-duration: 20s; animation-delay: -13s; }
.tw-fish--c { animation-name: tw-swim-l; animation-duration: 34s; animation-delay: -3s; }
.tw-fish--d { animation-name: tw-swim-r; animation-duration: 42s; animation-delay: -22s; }

.tw-bob {
    animation: tw-bob 3s ease-in-out infinite;
}

/* transform-box: fill-box - olcekleme oge KENDI kutusunun merkezinden olsun;
   aksi halde SVG'nin (0,0) noktasi merkez sayilir ve halka kayarak buyur. */
.tw-ring,
.tw-splash {
    transform-box: fill-box;
    transform-origin: center;
}

.tw-ring {
    animation: tw-ring 4s ease-out infinite;
}

.tw-splash {
    animation: tw-splash 8s ease-out infinite;
}

.tw-boat {
    transform-box: fill-box;
    transform-origin: center bottom;
    animation: tw-rock 5s ease-in-out infinite;
}

.tw-gull {
    animation: tw-glide linear infinite;
}

.tw-gull--a { animation-duration: 34s; animation-delay: -8s; }
.tw-gull--b { animation-duration: 46s; animation-delay: -26s; }

.tw-jump {
    transform-box: fill-box;
    transform-origin: center;
    animation: tw-jump 8s ease-in-out infinite;
}

/* GORUNMEYEN KATMANLAR DURUR.
   NEDEN: uc katman da DOM'da duruyor ve opaklik 0 olani da her karede dalga,
   balik, marti ve sicrama animasyonlarini isletiyordu - sahnenin hareket
   maliyeti gorunen tek katmanin UC KATIYDI. "is-on" sinifini JS ortam
   secildiginde tasiyor (tackle-wizard.js pickEnv -> markScene), sunucu da
   acilistaki katmana basiyor; GORUNURLUGU hala [data-tw-scene] belirliyor.
   NEDEN play-state (animation:none degil): duraklatilan katman acildiginda
   animasyon kaldigi yerden devam ediyor, basa donup sicramiyor. */
.tw-scene__layer:not(.is-on) :is(.tw-wave, .tw-mist, .tw-fish, .tw-bob, .tw-ring, .tw-boat, .tw-gull, .tw-jump, .tw-splash) {
    animation-play-state: paused;
}

/* Hareket duyarliligi: sahne tamamen sabit kalir, tek kare de olsa oynamaz. */
@media (prefers-reduced-motion: reduce) {
    .tw-wave,
    .tw-mist,
    .tw-fish,
    .tw-bob,
    .tw-ring,
    .tw-splash,
    .tw-boat,
    .tw-gull,
    .tw-jump {
        animation: none !important;
    }

    .tw-scene__layer {
        transition: none;
    }
}

/* ------------------------------------------------------ mobil dokunma alani */

/* NEDEN 44px: parmakla isabet ettirilebilir en kucuk hedef. Populer senaryo
   pill'leri 34px, "Tüm N senaryo" baglantisi 20px kaliyordu. Morelink ayrica
   sagdan sola aliniyor ki pill'lerle ayni ritimde dursun (sag ustte tek
   basina duran 20px'lik metin en zor hedefti). */
@media (max-width: 639px) {
    .tw-shortcut {
        min-height: 44px;
        padding: 6px 15px;
    }

    .tw-morelink {
        min-height: 44px;
        margin-left: 0;
    }
}

/* ------------------------------------------------------------------ yazdir */

@media print {
    .tw-hero {
        background: none;
        border-bottom: 0;
        padding: 0;
    }

    .tw-card {
        box-shadow: none;
    }

    /* Sahne dekoratif: kagida basmanin anlami yok (koyu zemin, animasyon). */
    .tw-scene {
        display: none;
    }
}


/* ============================================================ SONUC SAYFASI */

.tr-intro,
.tr-hero,
.tr-section,
.tr-escape,
.tr-scenarios {
    box-sizing: border-box;
    color: var(--tr-text);
    font-size: 14px;
    line-height: 1.55;
}

.tr-intro {
    margin: 0 16px 8px;
}

.tr-intro__title {
    margin: 0 0 6px;
    font-size: 26px;
    font-weight: 800;
    color: var(--tr-text-strong);
}

/* NEDEN SINIR YOK: giris metni sayfanin altina tasindi ve makale
   bicimlendirmesini kullaniyor; 68ch sinirli govde sagda bosluk birakiyordu. */
.tr-intro__text {
    margin: 0;
    color: var(--tr-text-muted);
}

/* -------------------------------------------------------------------- hero */

.tr-hero {
    margin: 0 16px 16px;
    padding: 16px;
    background: var(--tr-surface);
    border: 1px solid var(--tr-border);
    border-radius: var(--tr-radius);
}

.tr-hero__title {
    margin: 0 0 8px;
    font-size: 24px;
    font-weight: 800;
    color: var(--tr-text-strong);
}

.tr-hero__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 0 10px;
}

.tr-chip {
    display: inline-block;
    padding: 4px 12px;
    border: 1px solid var(--tr-border-strong);
    border-radius: 999px;
    background: var(--tr-surface-alt);
    color: var(--tr-accent-hover);
    font-size: 13px;
    text-decoration: none;
}

.tr-chip:hover,
.tr-chip:focus-visible {
    border-color: var(--tr-accent);
    background: var(--tr-accent-soft);
}

.tr-chip--static {
    color: var(--tr-text-muted);
    cursor: default;
}

.tr-hero__summary {
    margin: 0 0 10px;
    color: var(--tr-text-muted);
}

.tr-profile {
    padding: 12px 14px;
    border-left: 4px solid var(--tr-accent);
    border-radius: 0 var(--tr-radius) var(--tr-radius) 0;
    background: var(--tr-accent-soft);
}

.tr-profile__label {
    display: block;
    margin-bottom: 2px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--tr-accent-hover);
}

.tr-profile__text {
    margin: 0;
    font-size: 15px;
    color: var(--tr-text-strong);
}

.tr-hero__counts {
    margin: 10px 0 0;
    color: var(--tr-text-faint);
    font-size: 13px;
}

.tr-hero__relaxed {
    color: var(--tr-low-fg);
}

/* ----------------------------------------------------------------- bolumler */

.tr-section {
    margin: 0 16px 20px;
}

.tr-section__title {
    margin: 0 0 10px;
    font-size: 18px;
    font-weight: 700;
    color: var(--tr-text-strong);
}

.tr-note,
.tr-empty {
    margin: 0 0 10px;
    padding: 10px 12px;
    border: 1px dashed var(--tr-border-strong);
    border-radius: var(--tr-radius);
    background: var(--tr-surface-alt);
    color: var(--tr-text-muted);
    font-size: 13px;
}

.tr-notes {
    padding: 14px;
    background: var(--tr-surface);
    border: 1px solid var(--tr-border);
    border-radius: var(--tr-radius);
}

.tr-notes p {
    margin: 0 0 10px;
}

.tr-notes ul,
.tr-notes ol {
    margin: 0 0 10px;
    padding-left: 20px;
}

.tr-escape {
    margin: 0 16px 28px;
    color: var(--tr-text-muted);
}

.tr-escape a {
    color: var(--tr-accent-hover);
}

/* -------------------------------------------------------------- takim karti */

.tr-pair {
    background: var(--tr-surface);
    border: 1px solid var(--tr-border);
    border-radius: var(--tr-radius);
}

.tr-pair--hero {
    padding: 16px;
    border-color: var(--tr-accent);
    box-shadow: 0 1px 3px rgba(2, 132, 199, .12);
}

.tr-pair__combo {
    display: grid;
    grid-template-columns: 1fr;
    align-items: center;
    gap: 10px;
}

@media (min-width: 640px) {
    .tr-pair__combo {
        grid-template-columns: 1fr auto 1fr;
    }
}

.tr-pair__side {
    min-width: 0;
    text-align: center;
}

.tr-pair__kind {
    display: block;
    margin-bottom: 4px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--tr-text-faint);
}

.tr-pair__media {
    display: block;
    height: 120px;
    margin-bottom: 8px;
    color: var(--tr-text-faint);
}

.tr-pair__media img,
.tr-pair__media svg {
    width: auto;
    max-width: 100%;
    height: 100%;
    object-fit: contain;
    margin: 0 auto;
}

.tr-pair__name {
    margin: 0 0 4px;
    font-size: 15px;
    font-weight: 700;
}

.tr-pair__name a {
    color: var(--tr-text-strong);
    text-decoration: none;
}

.tr-pair__name a:hover {
    color: var(--tr-accent-hover);
    text-decoration: underline;
}

.tr-pair__spec {
    margin: 0 0 6px;
    color: var(--tr-text-muted);
    font-size: 13px;
}

.tr-pair__plus {
    font-size: 24px;
    font-weight: 300;
    color: var(--tr-text-faint);
    text-align: center;
}

.tr-pair__why {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--tr-border);
}

.tr-pair__whyTitle {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 0 0 8px;
    font-size: 15px;
    font-weight: 700;
    color: var(--tr-text-strong);
}

.tr-pair__whyList {
    margin: 0 0 10px;
    padding-left: 20px;
}

.tr-pair__whyCols {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}

@media (min-width: 640px) {
    .tr-pair__whyCols {
        grid-template-columns: 1fr 1fr;
    }
}

.tr-pair__whyCol ul {
    margin: 2px 0 0;
    padding-left: 20px;
    color: var(--tr-text-muted);
    font-size: 13px;
}

.tr-pair__whyKind {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--tr-text-faint);
}

/* ------------------------------------------------------------ takim satiri */

.tr-pairRows {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.tr-pair--row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
}

.tr-pair__thumbs {
    flex: 0 0 auto;
    display: flex;
    gap: 4px;
}

.tr-pair__thumb {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 1px solid var(--tr-border);
    border-radius: 6px;
    background: var(--tr-surface-alt);
    color: var(--tr-text-faint);
    overflow: hidden;
}

.tr-pair__thumb img,
.tr-pair__thumb svg {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.tr-pair__rowBody {
    flex: 1 1 auto;
    min-width: 0;
}

.tr-pair__rowNames {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
}

.tr-pair__rowNames a {
    color: var(--tr-text-strong);
    text-decoration: none;
}

.tr-pair__rowNames a:hover {
    color: var(--tr-accent-hover);
    text-decoration: underline;
}

.tr-pair__rowPlus {
    color: var(--tr-text-faint);
    padding: 0 4px;
}

.tr-pair__rowWhy {
    margin: 2px 0 0;
    color: var(--tr-text-muted);
    font-size: 12px;
}

/* ------------------------------------------------------- sekmeler / sutunlar */

.tr-tabs {
    display: flex;
    gap: 6px;
    margin-bottom: 10px;
}

.tr-tab {
    flex: 1 1 0;
    padding: 9px 12px;
    border: 1px solid var(--tr-border-strong);
    border-radius: 8px;
    background: var(--tr-surface);
    color: var(--tr-text);
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

.tr-tab.is-active {
    border-color: var(--tr-accent);
    background: var(--tr-accent-soft);
    color: var(--tr-accent-hover);
}

.tr-cols {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}

.tr-col__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
}

.tr-col__title {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    color: var(--tr-text-strong);
}

/* 1024px: iki sutun yan yana; sekmeler burada ANLAMSIZ, gizlenir. */
@media (min-width: 1024px) {
    .tr-cols {
        grid-template-columns: 1fr 1fr;
    }

    .tr-tabs {
        display: none !important;
    }

    .tr-cols--tabbed .tr-col {
        display: block !important;
    }
}

/* Mobil: JS sekmeleri acmissa yalnizca etkin sutun gorunur.
   JS yoksa .tr-cols--tabbed hic eklenmez ve iki sutun alt alta akar. */
@media (max-width: 1023.98px) {
    .tr-cols--tabbed .tr-col {
        display: none;
    }

    .tr-cols--tabbed[data-tr-active="kamis"] .tr-col[data-tr-col="kamis"],
    .tr-cols--tabbed[data-tr-active="makine"] .tr-col[data-tr-col="makine"] {
        display: block;
    }
}

/* ------------------------------------------------------------- aday satiri */

.tr-item {
    display: flex;
    gap: 10px;
    padding: 10px;
    margin-bottom: 8px;
    background: var(--tr-surface);
    border: 1px solid var(--tr-border);
    border-radius: var(--tr-radius);
}

.tr-item.is-selected {
    border-color: var(--tr-accent);
    background: var(--tr-accent-soft);
}

.tr-item__media {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border: 1px solid var(--tr-border);
    border-radius: 6px;
    background: var(--tr-surface-alt);
    color: var(--tr-text-faint);
    overflow: hidden;
}

.tr-item__media img,
.tr-item__media svg {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.tr-item__body {
    flex: 1 1 auto;
    min-width: 0;
}

.tr-item__name {
    margin: 0 0 3px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.35;
}

.tr-item__name a {
    color: var(--tr-text-strong);
    text-decoration: none;
}

.tr-item__name a:hover {
    color: var(--tr-accent-hover);
    text-decoration: underline;
}

.tr-item__spec {
    margin: 0 0 4px;
    color: var(--tr-text-muted);
    font-size: 12.5px;
}

.tr-item__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin: 0;
}

.tr-item__brand {
    color: var(--tr-text-faint);
    font-size: 12px;
}

.tr-item__actions {
    flex: 0 0 auto;
    display: flex;
    align-items: flex-start;
}

/* Gorsel olmayan urunler icin gomulu yer tutucu (blade icinde inline SVG). */
.tr-noimg {
    width: 60%;
    height: 60%;
    opacity: .55;
}

/* ------------------------------------------------------------------ rozet */

.tr-badge {
    display: inline-block;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 700;
    white-space: nowrap;
}

.tr-badge--cok_iyi {
    background: var(--tr-ok-bg);
    color: var(--tr-ok-fg);
}

.tr-badge--iyi {
    background: var(--tr-mid-bg);
    color: var(--tr-mid-fg);
}

.tr-badge--yaklasik {
    background: var(--tr-low-bg);
    color: var(--tr-low-fg);
}

/* ------------------------------------------------------------ neden / uyari */

.tr-why {
    margin-top: 5px;
}

.tr-why__summary {
    cursor: pointer;
    color: var(--tr-accent-hover);
    font-size: 12.5px;
    font-weight: 600;
}

.tr-why__list {
    margin: 5px 0 0;
    padding-left: 18px;
    color: var(--tr-text-muted);
    font-size: 12.5px;
}

.tr-caveats {
    margin: 5px 0 0;
    padding-left: 18px;
    color: var(--tr-text-faint);
    font-size: 12px;
}

/* --------------------------------------------------------- secim / butonlar */

.tr-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 14px;
    border: 1px solid var(--tr-border-strong);
    border-radius: 8px;
    background: var(--tr-surface);
    color: var(--tr-text);
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}

.tr-btn--ghost:hover,
.tr-btn--ghost:focus-visible {
    border-color: var(--tr-accent);
    color: var(--tr-accent-hover);
}

.tr-pick {
    padding: 6px 12px;
    border: 1px solid var(--tr-border-strong);
    border-radius: 8px;
    background: var(--tr-surface);
    color: var(--tr-text);
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}

.tr-pick:hover,
.tr-pick:focus-visible {
    border-color: var(--tr-accent);
    color: var(--tr-accent-hover);
}

.tr-pick[aria-pressed="true"] {
    border-color: var(--tr-accent);
    background: var(--tr-accent);
    color: #fff;
}

.tr-pick__on,
.tr-pick[aria-pressed="true"] .tr-pick__off {
    display: none;
}

.tr-pick[aria-pressed="true"] .tr-pick__on {
    display: inline;
}

/* ------------------------------------------------------------- fiyat yuvasi */

/* NEDEN SIMDIDEN: katalogda fiyat alani yok ve
   config/product_types.php -> tackle.show_prices bugun false; sablonlar
   fiyat yokken HICBIR eleman basmiyor. Bu kurallar bayrak true yapildigi
   gun sablon/CSS derlemesi gerekmeden devreye girsin diye hazir duruyor. */
.tr-price {
    margin: 0 0 6px;
    color: var(--tr-text-strong);
    font-size: 14px;
    font-weight: 700;
}

.tr-item__body .tr-price {
    margin: 0 0 4px;
    font-size: 13px;
}

/* ------------------------------------------------- "kendi kurdugun takim" */

/* Ust kart ziyaretcinin secimini gosterirken oneri gerekcelerinin yerine
   gecen not (tackle-results.js gosterip gizliyor). */
.tr-pair__note {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 14px 0 0;
    padding-top: 12px;
    border-top: 1px solid var(--tr-border);
    color: var(--tr-text-muted);
    font-size: 13px;
}

.tr-pair__noteBtn {
    padding: 0;
    border: 0;
    background: none;
    color: var(--tr-accent-hover);
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    text-decoration: underline;
    cursor: pointer;
}

.tr-pair__noteBtn:hover,
.tr-pair__noteBtn:focus-visible {
    color: var(--tr-accent);
}

/* ------------------------------------------------------------- paylas menusu */

/* Baslik satiri: sol tarafta senaryo adi, sag ust kosede "Paylaş".
   NEDEN flex + wrap: 375px'te uzun senaryo adi dugmeyi tasirmasin diye
   dugme alt satira iner ama saga dayali kalir. */
.tr-hero__head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
}

.tr-hero__head .tr-hero__title {
    flex: 1 1 auto;
    min-width: 0;
}

.tr-share {
    position: relative;
    flex: 0 0 auto;
    margin-left: auto;
}

.tr-share__btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    border: 1px solid var(--tr-border-strong);
    border-radius: 8px;
    background: var(--tr-surface);
    color: var(--tr-text);
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.tr-share__btn:hover,
.tr-share__btn:focus-visible,
.tr-share.is-open .tr-share__btn {
    border-color: var(--tr-accent);
    color: var(--tr-accent-hover);
}

.tr-share__icon {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
}

/* NEDEN saga dayali (right: 0): dugme kartin sag ust kosesinde; menu sola
   acilmazsa 375px'te sayfayi YATAY kaydirirdi. */
.tr-share__menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 30;
    min-width: 210px;
    max-width: calc(100vw - 32px);
    padding: 6px;
    background: var(--tr-surface);
    border: 1px solid var(--tr-border-strong);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(17, 24, 39, .14);
}

.tr-share__item {
    display: block;
    width: 100%;
    padding: 9px 10px;
    border: 0;
    border-radius: 6px;
    background: none;
    color: var(--tr-text);
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}

.tr-share__item:hover,
.tr-share__item:focus-visible {
    background: var(--tr-accent-soft);
    color: var(--tr-accent-hover);
}

.tr-share__item.is-done {
    color: var(--tr-ok-fg);
}

/* -------------------------------------------------- senaryo kartlari (index) */

.tr-scenarios {
    margin: 0 16px;
}

.tr-scenarios__group {
    margin-bottom: 20px;
}

.tr-scenarios__title {
    margin: 0 0 10px;
    font-size: 18px;
    font-weight: 700;
    color: var(--tr-text-strong);
}

.tr-scenarios__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}

@media (min-width: 640px) {
    .tr-scenarios__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .tr-scenarios__grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.tr-scenario {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 14px;
    background: var(--tr-surface);
    border: 1px solid var(--tr-border);
    border-radius: var(--tr-radius);
}

.tr-scenario__name {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
}

.tr-scenario__link {
    color: var(--tr-text-strong);
    text-decoration: none;
}

.tr-scenario__link:hover {
    color: var(--tr-accent-hover);
    text-decoration: underline;
}

.tr-scenario__tech {
    margin: 0;
    color: var(--tr-text-muted);
    font-size: 13px;
}

.tr-scenario__species {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin: 0;
}

.tr-scenario__cta {
    margin-top: auto;
    align-self: flex-start;
    color: var(--tr-accent-hover);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
}

.tr-scenario__cta:hover {
    text-decoration: underline;
}

/* ------------------------------------------------------- erisilebilirlik */

.tw-card :focus-visible,
.tr-section :focus-visible,
.tr-hero :focus-visible {
    outline: 2px solid var(--tr-accent);
    outline-offset: 2px;
}

@media (prefers-contrast: more) {
    :root {
        --twz-border: #9ca3af;
        --twz-border-strong: #4b5563;
        --twz-text-muted: #374151;
        --tr-border: #9ca3af;
        --tr-border-strong: #4b5563;
        --tr-text-muted: #374151;
        --tr-text-faint: #4b5563;
    }
}

@media (prefers-reduced-motion: reduce) {
    .tw-env {
        transition: none;
    }

    /* NEDEN: cubugun genislik gecisi de hareket. Secim yapildigi anda dolum
       animasyonsuz yerine otursun. */
    .tw-progress__fill {
        transition: none;
    }
}

@media print {
    .tw-steps,
    .tr-tabs,
    .tr-share,
    .tr-item__actions {
        display: none !important;
    }

    .tr-cols {
        grid-template-columns: 1fr;
    }

    .tr-pair,
    .tr-item {
        break-inside: avoid;
    }
}

/* Pano izni yokken adresin gosterildigi alan (tackle-results.js uretir). */
.tr-copyfield {
    width: 100%;
    margin-top: 8px;
    padding: 6px 8px;
    border: 1px solid var(--tr-border-strong);
    border-radius: 6px;
    background: var(--tr-surface-alt);
    color: var(--tr-text);
    font-family: inherit;
    font-size: 12px;
}

.tr-copyfield[hidden] {
    display: none !important;
}