/* ==================================================================
   YOL HARITASI
   ------------------------------------------------------------------
   Sakin, ciddi, oyunlastirilmamis. Secenekler kart degil SATIR gibi
   davranir — form doldurma hissi vermez, okuma hissi verir.
   Tum renkler tema degiskenlerinden; iki kipte de olculdu.
   ================================================================== */
.tb-yol {
    position: relative; isolation: isolate; overflow: hidden;
    padding-block: var(--tb-ritim, clamp(3.2rem, 6vw, 5.2rem));
}
.tb-yol-canvas {
    position: absolute; inset: 0; width: 100%; height: 100%;
    z-index: 0; pointer-events: none;
}
@media (max-width: 760px) { .tb-yol-canvas { display: none; } }   /* dar ekranda rota listenin altina denk geliyordu */
.tb-yol > .tb-shell { position: relative; z-index: 1; }

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

.tb-yol-govde {
    max-width: 780px; margin-inline: auto;
}

/* --- soru basligi --- */
.tb-yol-soru {
    display: flex; align-items: center; gap: .7rem;
    margin-bottom: 1rem;
    font-family: var(--tb-font-baslik);
    font-size: 1.05rem; font-weight: 700; color: var(--tb-ink);
}
.tb-yol-soru b {
    display: grid; place-items: center; flex: 0 0 auto;
    width: 26px; height: 26px; border-radius: 50%;
    background: var(--basic-secondary, #C62338);
    color: #fff; font-size: .78rem; font-weight: 700;
}

/* --- secenekler --- */
.tb-yol-secenek {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .6rem;
}
.tb-yol-secenek-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.tb-yol-secenek button {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: auto auto;
    align-items: center;
    gap: .15rem .75rem;
    padding: .95rem 1rem;
    text-align: start;
    border: 1px solid var(--tb-line);
    border-radius: 13px;
    background: var(--tb-surface);
    cursor: pointer;
    transition: border-color .2s ease, background .2s ease, transform .2s ease;
}
.tb-yol-secenek button i {
    grid-row: span 2;
    display: grid; place-items: center;
    width: 36px; height: 36px; border-radius: 10px;
    background: rgba(53, 100, 175, 0.090);
    background: color-mix(in srgb, var(--basic-primary) 9%, transparent);
    border: 1px solid rgba(53, 100, 175, 0.200);
    border: 1px solid color-mix(in srgb, var(--basic-primary) 20%, transparent);
    color: var(--basic-primary); font-size: 1rem;
    transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.tb-yol-secenek button b {
    font-size: .92rem; font-weight: 600; color: var(--tb-ink); line-height: 1.3;
}
.tb-yol-secenek button small {
    font-size: .78rem; color: var(--tb-ink-soft); line-height: 1.4;
}
.tb-yol-secenek button:hover {
    border-color: rgba(53, 100, 175, 0.480);
    border-color: color-mix(in srgb, var(--basic-primary) 48%, transparent);
    background: var(--tb-surface-2);
    transform: translateY(-2px);
}
.tb-yol-secenek button:hover i {
    background: rgba(53, 100, 175, 0.160);
    background: color-mix(in srgb, var(--basic-primary) 16%, transparent);
    border-color: var(--basic-primary);
}
.tb-yol-secenek button.secili {
    border-color: var(--basic-primary);
    background: rgb(243, 246, 250);
    background: color-mix(in srgb, var(--basic-primary) 6%, var(--tb-surface));
}

/* --- geri / sifirla --- */
.tb-yol-geri {
    display: inline-flex; align-items: center; gap: .4rem;
    margin-top: 1rem; padding: .4rem .2rem;
    border: 0; background: none; cursor: pointer;
    font-size: .85rem; font-weight: 600; color: var(--tb-ink-soft);
    transition: color .2s ease;
}
.tb-yol-geri:hover { color: var(--basic-primary); }

/* --- sonuc --- */
.tb-yol-sonuc {
    padding: clamp(1.4rem, 3vw, 2rem);
    border: 1px solid rgba(53, 100, 175, 0.280);
    border: 1px solid color-mix(in srgb, var(--basic-primary) 28%, transparent);
    border-radius: 16px;
    background: var(--tb-surface);
    box-shadow: 0 20px 48px -30px rgba(53,100,175,.5);
}
.tb-yol-sonuc-ust {
    display: block; margin-bottom: .3rem;
    /* Son kalan "eyebrow" izi. BUYUK HARF + genis izleme kaldirildi;
       bkz. .tb-hero-eyebrow ve .tb-serit-bas. Satir duruyor cunku
       sonucun ne oldugunu soyluyor, bicimi sakinlesti. */
    font-size: .78rem; font-weight: 600; letter-spacing: .01em;
    color: var(--basic-secondary, #C62338);
}
.tb-yol-sonuc h3 {
    margin: 0 0 .5rem;
    font-family: var(--tb-font-baslik);
    font-size: clamp(1.35rem, 1rem + 1.2vw, 1.8rem);
    font-weight: 700; letter-spacing: -.025em; color: var(--tb-ink);
}
.tb-yol-sonuc p {
    margin: 0 0 1.2rem; max-width: 56ch;
    font-size: .94rem; line-height: 1.65; color: var(--tb-ink-soft);
}
.tb-yol-sonuc-alt {
    display: flex; flex-wrap: wrap; align-items: center; gap: .9rem;
}
/* sonuc dugmesi: sitenin eylem rengi (hero ile ayni turetme: marka kirmizisi + beyaz uc) */
.tb-yol-git { gap: .5rem; background: linear-gradient(135deg, #D94256 0%, var(--basic-secondary, #C62338) 100%); border-color: transparent; color: #fff; box-shadow: 0 12px 28px -10px rgba(198,35,56,.85); }
.tb-yol-git:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 18px 36px -12px rgba(198,35,56,1); gap: .8rem; }
.tb-yol-fiyat { font-size: .88rem; color: var(--tb-ink-soft); }
.tb-yol-fiyat b { font: 700 1.35rem/1 var(--tb-font-baslik); letter-spacing: -.02em; color: var(--tb-ink); margin-inline: .15rem; font-variant-numeric: tabular-nums; }

/* Emin degilseniz sorun — baski degil, destek. Guven ilkesi. */
.tb-yol-not {
    display: flex; align-items: flex-start; gap: .55rem;
    margin-top: 1.1rem; padding-top: 1rem;
    border-top: 1px solid var(--tb-line);
    font-size: .85rem; line-height: 1.5; color: var(--tb-ink-soft);
}
.tb-yol-not i { color: var(--basic-primary); margin-top: .1rem; }
.tb-yol-not a { color: var(--basic-primary); font-weight: 600; }

@media (max-width: 760px) {
    .tb-yol-secenek, .tb-yol-secenek-3 { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
    .tb-yol-secenek button { transition: none; }
    .tb-yol-secenek button:hover { transform: none; }
}

/* @@ LOGO-KIRMIZISI-AYDINLIK BASLA (acik-kip.py uretir, elle duzenleme) @@ */
html:not([data-bs-theme="dark"]) .tb-yol-soru b{background: var(--basic-secondary, #C4162B)}
html:not([data-bs-theme="dark"]) .tb-yol-sonuc-ust{color: var(--basic-secondary, #C4162B)}
html:not([data-bs-theme="dark"]) .tb-yol-git{background: linear-gradient(135deg, #D04555 0%, var(--basic-secondary, #C4162B) 100%);box-shadow: 0 12px 28px -10px rgba(196,22,43,.85)}
html:not([data-bs-theme="dark"]) .tb-yol-git:hover{box-shadow: 0 18px 36px -12px rgba(196,22,43,1)}
/* @@ LOGO-KIRMIZISI-AYDINLIK BITIR @@ */