/* =====================================================
   ÜcretliYol - Ortak Stil (Kurumsal tema)
   Palet: kurumsal mavi (#2563EB) + koyu lacivert
   (#1E2233) + açık ferah gri zemin. Beyaz üst bar.
   ===================================================== */
:root {
    /* KURUMSAL MAVİ/LACİVERT PALET
       Değişken adları eski (--turuncu) korundu ki tüm site otomatik geçsin;
       değerler artık kurumsal mavi tonları. */
    --turuncu: #2563EB;         /* ana vurgu - kurumsal mavi */
    --turuncu-koyu: #1D4ED8;    /* koyu mavi (hover) */
    --turuncu-acik: #EFF4FF;    /* çok açık mavi zemin */
    --lacivert: #0F172A;        /* koyu lacivert - başlık/metin */
    --lacivert-2: #1E293B;
    --zemin: #F6F8FB;           /* ferah açık gri-mavi sayfa zemini */
    --kart: #FFFFFF;
    --metin: #1E293B;
    --soluk: #64748B;
    --cizgi: #E2E8F0;
    --cizgi-koyu: #CBD5E1;
    --basari: #059669;
    --hata: #DC2626;
    --radius: 14px;
    --golge: 0 1px 3px rgba(15,23,42,.06), 0 4px 16px rgba(15,23,42,.05);
    --golge-kalk: 0 4px 12px rgba(15,23,42,.08), 0 12px 32px rgba(15,23,42,.08);
    /* Gradyan renkleri (kurumsal his için) */
    --gradyan: linear-gradient(135deg, #2563EB 0%, #1E40AF 100%);
    --gradyan-acik: linear-gradient(135deg, #3B82F6 0%, #2563EB 100%);
    --gradyan-lacivert: linear-gradient(135deg, #0F172A 0%, #1E3A8A 100%);
    /* Geriye dönük uyumluluk (eski değişken adları yeni palete eşlendi) */
    --yesil: #2563EB; --yesil-koyu: #1D4ED8; --sari: #2563EB;
    --asfalt: #0F172A;
}

* { box-sizing: border-box; }

/* Sorgu / maliyet giriş paneli vurgusu */
.sol-panel {
    position: relative;
    background: var(--kart) !important;
}
.sol-panel::before {
    content: '';
    position: absolute; top: 0; left: 0; right: 0; height: 3px;
    background: linear-gradient(135deg, #2563EB 0%, #3B82F6 100%);
}
.sol-panel h1 { color: var(--lacivert); }
.sol-panel label { color: var(--lacivert); font-weight: 600; }
.sol-panel input:focus, .sol-panel select:focus {
    box-shadow: 0 0 0 3px rgba(242, 101, 34, .12);
}
.tip-secim button.aktif {
    box-shadow: 0 2px 8px rgba(242, 101, 34, .18);
}
/* Yasal uyarı kutusu */
.yasal-uyari {
    margin: 12px auto 0;
    max-width: 900px;
    padding: 12px 16px;
    background: var(--turuncu-acik);
    border: 1px solid #F6C9B2;
    border-left: 4px solid var(--turuncu);
    border-radius: 8px;
    font-size: 12px;
    line-height: 1.55;
    color: #8A4A2A;
    text-align: left;
}
.yasal-uyari b { color: #6B3A1F; }

body {
    margin: 0;
    font-family: 'Inter', 'Segoe UI', Arial, sans-serif;
    background: var(--zemin);
    color: var(--metin);
    font-size: 15px;
    line-height: 1.55;
    /* Sayfa içeriği ekranı doldurmasa bile alt bilgiyi (footer) ekranın en
       altına sabitler — kısa sayfalarda (örn. tek haberli Haberler sayfası)
       footer'ın yukarıda kalıp altında boş/beyaz alan görünmesini engeller.
       09.09.2026 */
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

h1, h2, h3, .tabela-yazi {
    font-family: 'Saira Condensed', 'Arial Narrow', sans-serif;
    letter-spacing: .02em;
}

a { color: var(--yesil); }

/* ---------- Üst bar (beyaz, kurumsal) ---------- */
.ustbar {
    background: #fff;
    color: var(--lacivert);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 26px;
    height: 68px;
    max-height: 68px;
    position: sticky;
    top: 0;
    z-index: 5000;
    border-bottom: 1px solid var(--cizgi);
    box-shadow: 0 1px 8px rgba(30,34,51,.04);
}
.logo {
    display: flex;
    align-items: center;
    text-decoration: none;
    height: 68px;
    flex-shrink: 0;
}
.logo img { height: 52px; max-height: 52px; width: auto; display: block; }
/* Logo görseli yoksa yazı yedeği */
.logo .logo-yazi {
    font-family: 'Saira Condensed', sans-serif;
    font-weight: 700; font-size: 24px;
    color: var(--lacivert); text-transform: uppercase; letter-spacing: .01em;
}
.logo .logo-yazi b { color: var(--turuncu); }
.ustbar nav { display: flex; align-items: center; gap: 6px; }
.ustbar nav a {
    color: var(--lacivert-2);
    text-decoration: none;
    font-weight: 600;
    font-size: 14.5px;
    padding: 9px 14px;
    border-radius: 9px;
    transition: background .15s, color .15s;
}
.ustbar nav a:hover { background: var(--turuncu-acik); color: var(--turuncu-koyu); }
.ustbar nav a.aktif { color: var(--turuncu); }
.ustbar nav a.btn-uye {
    background: var(--turuncu);
    color: #fff;
    padding: 10px 18px;
    border-radius: 10px;
    font-weight: 700;
    box-shadow: 0 4px 12px rgba(242,101,34,.28);
}
.ustbar nav a.btn-uye:hover { background: var(--turuncu-koyu); color: #fff; }
.ustbar nav a.nav-giris {
    border: 1.5px solid var(--cizgi-koyu);
}
.ustbar nav a.nav-giris:hover { border-color: var(--turuncu); background: #fff; }

/* Mobil hamburger (varsayılan gizli) */
.mobil-menu-btn {
    display: none; background: none; border: none; cursor: pointer;
    padding: 8px; border-radius: 8px;
}
.mobil-menu-btn span {
    display: block; width: 24px; height: 2.5px; background: var(--lacivert);
    border-radius: 2px; margin: 5px 0; transition: .25s;
}

/* ---------- Genel sayfa gövdesi ---------- */
.govde {
    max-width: 960px;
    margin: 36px auto;
    padding: 0 18px;
}
.kart {
    background: var(--kart);
    border: 1px solid var(--cizgi);
    border-radius: var(--radius);
    padding: 26px;
    box-shadow: var(--golge);
}
.kart-dar { max-width: 440px; margin: 0 auto; }

/* ---------- Form ---------- */
label { display: block; font-weight: 600; font-size: 13px; margin: 14px 0 5px; }
input[type=text], input[type=email], input[type=password],
input[type=tel], input[type=number], select, textarea {
    width: 100%;
    padding: 11px 13px;
    border: 1.5px solid var(--cizgi-koyu);
    border-radius: 10px;
    font: inherit;
    background: #fff;
    transition: border-color .15s, box-shadow .15s;
}
input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--turuncu);
    box-shadow: 0 0 0 3px rgba(242,101,34,.12);
}
.btn {
    display: inline-block;
    background: var(--gradyan);
    color: #fff;
    border: none;
    border-radius: 10px;
    padding: 12px 24px;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
    text-decoration: none;
    box-shadow: 0 4px 12px rgba(242,101,34,.24);
    transition: background .15s, transform .06s, box-shadow .15s;
}
.btn:hover { background: var(--turuncu-koyu); }
.btn:active { transform: translateY(1px); }
.btn-sari { background: var(--lacivert); color: #fff; box-shadow: 0 4px 12px rgba(30,34,51,.2); }
.btn-sari:hover { background: var(--lacivert-2); }
.btn-tam { width: 100%; }
.btn-bos {
    background: #fff; color: var(--lacivert); border: 1.5px solid var(--cizgi-koyu);
    box-shadow: none;
}
.btn-bos:hover { background: var(--zemin); border-color: var(--turuncu); color: var(--turuncu-koyu); }

.uyari, .basari {
    padding: 11px 14px;
    border-radius: 10px;
    font-size: 14px;
    margin-bottom: 14px;
}
.uyari  { background: #FDECEA; color: var(--hata); border: 1px solid #F5C6C0; }
.basari { background: #EAF6EE; color: var(--yesil-koyu); border: 1px solid #BFE3CC; }

/* ---------- Tabela paneli (imza öge) ---------- */
.tabela {
    background: var(--yesil);
    color: #fff;
    border-radius: 12px;
    border: 3px solid #fff;
    box-shadow: 0 0 0 2px var(--yesil-koyu), 0 8px 22px rgba(0,0,0,.15);
    padding: 16px 18px;
}
.tabela .tabela-baslik {
    font-family: 'Saira Condensed', sans-serif;
    font-size: 20px;
    font-weight: 600;
    text-transform: uppercase;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    border-bottom: 2px solid rgba(255,255,255,.35);
    padding-bottom: 8px;
    margin-bottom: 10px;
}
.tabela .toplam {
    font-family: 'Saira Condensed', sans-serif;
    font-size: 34px;
    font-weight: 700;
    color: var(--sari);
}
.gise-satir {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 0;
    border-bottom: 1px dashed rgba(255,255,255,.25);
    font-size: 14px;
}
.gise-satir:last-child { border-bottom: none; }
.gise-satir .ucret { font-weight: 700; white-space: nowrap; }

/* ---------- Tablolar ---------- */
table.liste { width: 100%; border-collapse: collapse; font-size: 14px; }
table.liste th, table.liste td {
    padding: 9px 10px;
    border-bottom: 1px solid var(--cizgi);
    text-align: left;
    vertical-align: top;
}
table.liste th {
    background: #EDEFE9;
    font-family: 'Saira Condensed', sans-serif;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: .04em;
}

/* ---------- Alt bilgi ---------- */
footer.altbilgi {
    /* body artık flex column; footer'ı içerik ne kadar kısa olursa olsun
       ekranın en altına iter (uzun sayfalarda içerikten hemen sonra normal
       şekilde akmaya devam eder, davranış değişmez). */
    margin-top: auto;
    padding: 40px 22px 26px;
    background: var(--asfalt);
    color: #9CA3AF;
    font-size: 13px;
    text-align: center;
}
footer.altbilgi a { color: #D5D8DD; }

@media (max-width: 720px) {
    .ustbar { padding: 0 12px; }
    .ustbar nav { gap: 12px; }
    .govde { margin: 20px auto; }
}

/* ========== Sonuç kartı + katlanır gruplar + rota şeridi (ortak) ========== */
/* Kurumsal sonuç kartı */
.sonuc-ust {
    background: linear-gradient(135deg, #0F172A 0%, #1E3A8A 100%);
    color: #fff; border-radius: 16px 16px 0 0; padding: 18px 20px;
}
.sonuc-ust .etiket { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: #94A3C8; }
.sonuc-ust .tutar {
    font-family: "Saira Condensed", sans-serif; font-size: 40px; font-weight: 700;
    line-height: 1.05; color: #fff; margin-top: 2px;
}
.sonuc-ust .tutar b { color: #60A5FA; }
.sonuc-ust .ust-alt {
    display: flex; gap: 18px; margin-top: 10px; font-size: 13px; color: #C6CBD9;
    flex-wrap: wrap;
}
.sonuc-ust .ust-alt b { color: #fff; }

/* Katlanır satır grupları */
.kirilim { background: #fff; border: 1px solid var(--cizgi); border-top: none;
           border-radius: 0 0 16px 16px; overflow: hidden; }
.k-grup { border-bottom: 1px solid var(--cizgi); }
.k-grup:last-child { border-bottom: none; }
.k-satir {
    display: flex; justify-content: space-between; align-items: center; gap: 12px;
    padding: 13px 18px; font-size: 14px;
}
.k-satir.acilir { cursor: pointer; user-select: none; transition: background .12s; }
.k-satir.acilir:hover { background: var(--zemin); }
.k-satir .sol { display: flex; align-items: center; gap: 9px; min-width: 0; color: var(--metin); }
.k-satir .sol .ikon { font-size: 16px; flex-shrink: 0; }
.k-satir .sol .metin { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.k-satir .sag { font-weight: 700; white-space: nowrap; color: var(--lacivert); flex-shrink: 0; }
.k-satir .ok { transition: transform .2s; color: var(--soluk); font-size: 12px; margin-left: 4px; }
.k-satir.acik .ok { transform: rotate(180deg); }
.k-detay { max-height: 0; overflow: hidden; transition: max-height .28s ease; background: var(--zemin); }
.k-detay.acik { max-height: 600px; }
.k-detay-ic { padding: 4px 18px 12px; }
.k-detay-satir {
    display: flex; justify-content: space-between; gap: 12px; padding: 7px 0;
    font-size: 13px; color: var(--soluk); border-bottom: 1px dashed var(--cizgi);
}
.k-detay-satir:last-child { border-bottom: none; }
.k-detay-satir .d-sol { min-width: 0; }
.k-detay-satir .d-sag { white-space: nowrap; font-weight: 600; color: var(--metin); }
.k-satir.toplam-satir { background: var(--turuncu-acik); }
.k-satir.toplam-satir .sag { color: var(--turuncu-koyu); font-size: 15px; }


/* Rota seçim şeridi (alternatif rotalar) */
.rota-serit { display: flex; gap: 8px; margin-bottom: 12px; overflow-x: auto; padding-bottom: 2px; }
.rota-sekme {
    flex: 1 1 0; min-width: 120px; background: #fff; border: 1.5px solid var(--cizgi-koyu);
    border-radius: 12px; padding: 10px 12px; cursor: pointer; text-align: left;
    display: flex; flex-direction: column; gap: 2px; transition: border-color .15s, box-shadow .15s;
    font: inherit;
}
.rota-sekme:hover { border-color: var(--turuncu); }
.rota-sekme.aktif { border-color: var(--turuncu); box-shadow: 0 0 0 3px rgba(242,101,34,.12); background: var(--turuncu-acik); }
.rota-sekme .rs-rozet { font-size: 12px; font-weight: 700; color: var(--lacivert); white-space: nowrap; }
.rota-sekme .rs-tutar { font-size: 17px; font-weight: 700; color: var(--turuncu-koyu); font-family: "Saira Condensed", sans-serif; }
.rota-sekme .rs-detay { font-size: 11.5px; color: var(--soluk); }

/* ========== MOBİL (uygulama gibi) ========== */
@media (max-width: 820px) {
    .ustbar { padding: 0 16px; height: 60px; }
    .logo img { height: 34px; }
    .mobil-menu-btn { display: block; }
    .ustbar nav {
        position: absolute; top: 60px; left: 0; right: 0;
        background: #fff; flex-direction: column; align-items: stretch;
        gap: 2px; padding: 10px; border-bottom: 1px solid var(--cizgi);
        box-shadow: 0 12px 24px rgba(30,34,51,.12);
        display: none;
        z-index: 5200;
        max-height: calc(100vh - 60px); overflow-y: auto;
    }
    .ustbar nav.acik { display: flex; }
    .ustbar nav > a { padding: 14px 16px; border-radius: 10px; font-size: 15.5px; font-weight: 600; }
    .ustbar nav > a:not(:last-child),
    .ustbar nav .nav-dropdown { border-bottom: 1px solid var(--zemin); }
    .ustbar nav a.btn-uye, .ustbar nav a.nav-giris { text-align: center; margin-top: 6px; border-bottom: none; }

    /* Genel kart ve içerik */
    .kart { padding: 18px; border-radius: 12px; }
    body { font-size: 14.5px; }

    /* Sonuç kartı mobilde tam genişlik ve dokunmatik dostu */
    .sonuc-ust .tutar { font-size: 34px; }
    .k-satir { padding: 15px 16px; }        /* daha büyük dokunma alanı */
    .k-satir .sol .metin { font-size: 14px; }

    /* İçerik sarmalayıcı kenar boşluğu */
    .icerik, main.icerik { padding: 16px !important; }
}

/* Küçük telefonlar */
@media (max-width: 420px) {
    .sonuc-ust .tutar { font-size: 30px; }
    .yariyari { flex-direction: column; gap: 0; }
    .ust-alt { gap: 12px !important; }
}

/* ========== Sözleşme / yasal metin sayfaları ========== */
.sozlesme-metin { font-size: 14.5px; line-height: 1.7; color: var(--metin); }
.sozlesme-metin h3 {
    margin: 22px 0 8px; font-size: 17px; color: var(--lacivert);
    font-family: 'Saira Condensed', sans-serif;
}
.sozlesme-metin p { margin: 0 0 12px; }
.sozlesme-metin ul { margin: 0 0 14px; padding-left: 22px; }
.sozlesme-metin li { margin-bottom: 6px; }
.sozlesme-metin a { color: var(--turuncu-koyu); font-weight: 600; }

/* ========== Yurtdışı ülke talep bölümü (ana sayfa) ========== */
.yurtdisi-serit {
    background: linear-gradient(135deg, var(--lacivert) 0%, var(--lacivert-2) 100%);
    color: #fff; padding: 36px 20px; margin-top: 2px;
}
.yurtdisi-ic { max-width: 900px; margin: 0 auto; text-align: center; }
.yd-rozet {
    display: inline-block; background: var(--turuncu); color: #fff;
    font-size: 12px; font-weight: 700; letter-spacing: .08em;
    padding: 5px 14px; border-radius: 20px; margin-bottom: 12px;
}
.yurtdisi-ic h2 {
    font-family: 'Saira Condensed', sans-serif; font-size: 30px; margin: 0 0 10px; color: #fff;
}
.yurtdisi-ic > p { font-size: 15px; line-height: 1.65; color: #C6CBD9; margin: 0 auto 22px; max-width: 680px; }
.yurtdisi-ic > p b { color: #fff; }
.ulke-izgara {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 20px;
}
.ulke-secim {
    display: flex; align-items: center; gap: 8px; background: rgba(255,255,255,.08);
    border: 1.5px solid rgba(255,255,255,.15); border-radius: 10px; padding: 11px 14px;
    cursor: pointer; font-size: 14px; font-weight: 600; transition: background .15s, border-color .15s;
    text-align: left;
}
.ulke-secim:hover { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.3); }
.ulke-secim input { width: auto; margin: 0; accent-color: var(--turuncu); cursor: pointer; flex-shrink: 0; }
.ulke-secim input:checked + span { color: #fff; }
.ulke-secim:has(input:checked) { background: rgba(242,101,34,.22); border-color: var(--turuncu); }
.yd-gonder { display: flex; gap: 10px; max-width: 560px; margin: 0 auto; flex-wrap: wrap; }
.yd-gonder input { flex: 1; min-width: 220px; }
.yd-gonder .btn { white-space: nowrap; }
.yd-sonuc { font-size: 14px; font-weight: 600; margin-top: 12px; min-height: 20px; }

@media (max-width: 720px) {
    .ulke-izgara { grid-template-columns: repeat(2, 1fr); }
    .yurtdisi-ic h2 { font-size: 24px; }
}

/* ========== Üst menü dropdown ========== */
.nav-dropdown { position: relative; display: inline-block; }
.nav-dropdown-tetik { cursor: pointer; }
.nav-dropdown-menu {
    position: absolute; top: 100%; left: 0; min-width: 230px;
    background: #fff; border: 1px solid var(--cizgi); border-radius: 12px;
    box-shadow: 0 12px 32px rgba(30,34,51,.14); padding: 8px;
    opacity: 0; visibility: hidden; transform: translateY(6px);
    transition: opacity .16s, transform .16s, visibility .16s; z-index: 5100;
}
@media (hover: hover) {
    .nav-dropdown:hover .nav-dropdown-menu {
        opacity: 1; visibility: visible; transform: translateY(0);
    }
}
.nav-dropdown.acik .nav-dropdown-menu {
    opacity: 1; visibility: visible; transform: translateY(0);
}
.nav-dropdown-menu a {
    display: block; padding: 10px 13px !important; border-radius: 8px;
    font-size: 14px !important; color: var(--lacivert-2) !important; white-space: nowrap;
}
.nav-dropdown-menu a:hover { background: var(--turuncu-acik); color: var(--turuncu-koyu) !important; }
/* 22.09.2026: "Daha Fazla" birleşik menüsü için alt grup başlığı + ayraç
   (Ücretlendirme + Hizmetlerimiz + Kurumsal artık tek dropdown'da). */
.nav-dropdown-baslik {
    padding: 8px 13px 4px; font-size: 11px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .04em; color: var(--soluk);
}
.nav-dropdown-ayrac { height: 1px; background: var(--cizgi); margin: 4px 6px; }

@media (max-width: 820px) {
    .nav-dropdown { width: 100%; }
    .nav-dropdown-tetik { display: block; padding: 14px 16px; font-size: 15.5px; font-weight: 600; }
    .nav-dropdown-menu {
        position: static; opacity: 1; visibility: visible; transform: none;
        box-shadow: none; border: none; border-left: 3px solid var(--turuncu);
        margin: 0 0 8px 16px; padding: 4px 0; min-width: 0;
        background: var(--zemin); border-radius: 0 8px 8px 0;
        display: none;
    }
    .nav-dropdown.acik .nav-dropdown-menu { display: block; }
    .nav-dropdown.acik .nav-dropdown-tetik { color: var(--turuncu-koyu); }
    .nav-dropdown-menu a { padding: 12px 16px !important; font-size: 14.5px !important; }
}

/* ========== Harita z-index kontrolü (dropdown menü üstte kalsın) ========== */
#harita { position: relative; z-index: 1; }
/* Leaflet kendi panes/controls'una yüksek z-index verir; üst bar (5000) hepsinin üstünde.
   Harita konteynerini düşük bir stacking context'e alarak dropdown'ın örtülmesini önlüyoruz. */
.leaflet-container { z-index: 1 !important; }
.leaflet-pane,
.leaflet-top,
.leaflet-bottom { z-index: 400 !important; }

/* ========== Harita kullanım ipucu kutusu ========== */
.harita-ipucu {
    background: rgba(255,255,255,.95);
    padding: 8px 12px;
    border-radius: 9px;
    font-size: 12.5px;
    color: var(--lacivert-2);
    box-shadow: 0 2px 10px rgba(30,34,51,.15);
    max-width: 260px;
    line-height: 1.45;
    margin: 0 0 22px 10px;
}
.harita-ipucu b { color: var(--turuncu-koyu); }
@media (max-width: 600px) {
    .harita-ipucu { font-size: 11.5px; max-width: 210px; padding: 7px 10px; }
}

/* ========== Araç sınıfı bilgi kutusu ========== */
.bilgi-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 18px; height: 18px; margin-left: 6px; padding: 0;
    border: none; border-radius: 50%; background: var(--turuncu);
    color: #fff; font-size: 12px; font-weight: 700; cursor: pointer;
    line-height: 1; vertical-align: middle;
}
.bilgi-btn:hover { background: var(--turuncu-koyu); }
.sinif-bilgi {
    margin-top: 10px; padding: 14px 16px;
    background: var(--zemin); border: 1px solid var(--cizgi);
    border-radius: 10px; font-size: 13px; line-height: 1.55;
}
.sinif-bilgi-baslik { font-weight: 700; color: var(--lacivert); margin-bottom: 6px; }
.sinif-bilgi p { margin: 6px 0; color: var(--lacivert-2); }
.sinif-liste { margin: 8px 0; padding-left: 18px; }
.sinif-liste li { margin: 5px 0; color: var(--lacivert-2); }
.sinif-liste b { color: var(--turuncu-koyu); }
.sinif-not {
    background: var(--turuncu-acik); border-radius: 8px;
    padding: 8px 10px; margin-top: 10px !important; font-size: 12.5px;
}

/* ========== Otoyol kapsama haritası ========== */
.kapsama-aciklama {
    display: flex; gap: 18px; flex-wrap: wrap;
    padding: 12px 14px; background: var(--zemin);
    border-radius: 10px; margin-bottom: 20px; font-size: 13px;
}
.kapsama-aciklama span { display: flex; align-items: center; gap: 6px; }
.durum-nokta { width: 11px; height: 11px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.durum-nokta.aktif   { background: #22A45D; }
.durum-nokta.yakinda { background: #E8A400; }
.durum-nokta.planli  { background: #B0B4BD; }
.kapsama-ulke { margin-bottom: 22px; }
.kapsama-ulke-baslik {
    font-size: 18px; color: var(--lacivert); margin: 0 0 10px;
    padding-bottom: 8px; border-bottom: 2px solid var(--zemin);
}
.kapsama-liste { display: flex; flex-direction: column; gap: 6px; }
.kapsama-satir {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 14px; background: #fff; border: 1px solid var(--cizgi);
    border-radius: 10px;
}
.kapsama-ad { flex: 1; font-size: 14.5px; color: var(--lacivert-2); font-weight: 600; }
.kapsama-ad small { color: var(--soluk); font-weight: 400; }
.kapsama-rozet.aktif {
    font-size: 12.5px; font-weight: 700; color: #22A45D;
    background: #E7F6EE; padding: 5px 12px; border-radius: 20px;
}
.kapsama-iste {
    font-size: 12.5px; font-weight: 600; color: var(--turuncu-koyu);
    background: var(--turuncu-acik); border: 1px solid #F6C9B2;
    padding: 6px 12px; border-radius: 20px; cursor: pointer;
    display: flex; align-items: center; gap: 6px; white-space: nowrap;
}
.kapsama-iste:hover { background: #FCE0D2; }
.kapsama-iste.istendi { background: #E7F6EE; color: #22A45D; border-color: #B6E2C8; cursor: default; }
.talep-adet {
    background: var(--turuncu); color: #fff; font-size: 11px;
    padding: 1px 7px; border-radius: 10px; font-weight: 700;
}
.kapsama-serbest {
    margin-top: 24px; padding: 18px; background: var(--zemin);
    border-radius: 12px;
}
.kapsama-serbest h3 { margin: 0 0 4px; color: var(--lacivert); }
.serbest-form { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.serbest-form input { width: 100%; }
.kapsama-sonuc { margin-top: 10px; font-size: 14px; font-weight: 600; }
/* Mini e-posta modalı */
.eposta-modal {
    position: fixed; inset: 0; background: rgba(30,34,51,.5);
    display: flex; align-items: center; justify-content: center; z-index: 6000;
    padding: 20px;
}
.eposta-modal[hidden] { display: none !important; }
.eposta-modal-ic {
    background: #fff; border-radius: 14px; padding: 24px;
    max-width: 420px; width: 100%; box-shadow: 0 20px 50px rgba(0,0,0,.2);
}
.eposta-modal-ic h3 { margin: 0 0 8px; color: var(--lacivert); font-size: 17px; }
.eposta-modal-ic input { width: 100%; margin: 8px 0 4px; }
.modal-butonlar { display: flex; gap: 10px; margin-top: 14px; }
.modal-butonlar .btn { flex: 1; }

/* ========== Para birimi seçici (maliyet sonucu) ========== */
.para-secici {
    display: flex; gap: 6px; justify-content: center;
    margin: 12px 0 4px; flex-wrap: wrap;
}
.para-btn {
    padding: 6px 14px; border: 1px solid rgba(255,255,255,.35);
    background: rgba(255,255,255,.12); color: #fff;
    border-radius: 20px; font-size: 13px; font-weight: 600;
    cursor: pointer; transition: background .15s;
}
.para-btn:hover { background: rgba(255,255,255,.22); }
.para-btn.aktif { background: #fff; color: var(--turuncu-koyu); border-color: #fff; }
.para-not {
    text-align: center; font-size: 12.5px;
    color: rgba(255,255,255,.85); margin-top: 4px; min-height: 16px;
}

/* ========== Güzergah bilgi/uyarı notları ========== */
#guzergahNotlari { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.guzergah-not {
    display: flex; gap: 10px; padding: 12px 14px;
    border-radius: 10px; font-size: 13.5px; line-height: 1.5;
    border: 1px solid transparent;
}
.guzergah-not .not-ikon { font-size: 18px; flex-shrink: 0; }
.guzergah-not .not-icerik { display: flex; flex-direction: column; gap: 2px; }
.guzergah-not .not-metin { color: var(--lacivert-2); }
.guzergah-not b { color: var(--lacivert); }
.not-saat {
    font-size: 11.5px; background: rgba(0,0,0,.06);
    padding: 1px 7px; border-radius: 10px; margin-left: 6px; font-weight: 600;
}
.not-bilgi { background: #EAF3FB; border-color: #C5E0F5; }
.not-uyari { background: #FFF6E5; border-color: #FFE0A3; }
.not-yasak { background: #FDECEC; border-color: #F5C2C2; }
.not-yasak b { color: #C0392B; }

/* ========== Üye araçları ========== */
.arac-kart {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 16px; background: #fff; border: 1px solid var(--cizgi);
    border-radius: 10px; margin-bottom: 8px;
}
.arac-bilgi { display: flex; flex-direction: column; gap: 3px; }
.arac-bilgi b { color: var(--lacivert); font-size: 15px; }
.arac-sinif {
    font-size: 12px; color: var(--turuncu-koyu); background: var(--turuncu-acik);
    padding: 2px 8px; border-radius: 10px; width: fit-content; font-weight: 600;
}
.arac-detay { font-size: 12.5px; color: var(--soluk); }
.arac-sil {
    background: none; border: 1px solid var(--cizgi); color: var(--hata);
    padding: 6px 14px; border-radius: 8px; cursor: pointer; font-size: 13px; font-weight: 600;
}
.arac-sil:hover { background: #FDECEC; border-color: #F5C2C2; }

/* ========== Yurtdışı (Yunanistan) otoyol geçişleri ========== */
.yurtdisi-kutu {
    margin-top: 12px; padding: 14px 16px;
    background: linear-gradient(135deg, #EAF3FB 0%, #F0F6FC 100%);
    border: 1px solid #C5E0F5; border-radius: 12px;
}
.yurtdisi-baslik { font-weight: 700; color: var(--lacivert); margin-bottom: 10px; font-size: 15px; }
.yd-satir {
    display: flex; justify-content: space-between; align-items: center;
    padding: 8px 0; border-bottom: 1px solid rgba(0,0,0,.06); font-size: 14px; gap: 12px;
}
.yd-yol { color: var(--lacivert-2); }
.yd-fiyat { font-weight: 600; color: var(--lacivert); white-space: nowrap; text-align: right; }
.yd-pass { display: block; font-size: 11.5px; color: #22A45D; font-weight: 600; }
.yd-eksik { opacity: .7; }
.yd-not { font-size: 12px; color: var(--soluk); font-style: italic; }
.yd-toplam {
    display: flex; justify-content: space-between; align-items: center;
    padding: 10px 0 2px; font-weight: 700; color: var(--lacivert); font-size: 15px;
}
.yd-toplam-pass { color: #22A45D; font-size: 14px; padding-top: 4px; }
.yd-aciklama {
    margin-top: 8px; font-size: 12px; color: var(--soluk);
    background: rgba(255,255,255,.6); padding: 8px 10px; border-radius: 8px;
}

/* ========== Çok-kategorili özel tesisler (köprü/tünel soru akışı) ========== */
.tesis-kutu {
    margin-top: 12px; padding: 14px 16px;
    background: linear-gradient(135deg, #FFF6E5 0%, #FFFBF2 100%);
    border: 1px solid #FFE0A3; border-radius: 12px;
}
.tesis-baslik { font-weight: 700; color: var(--lacivert); margin-bottom: 10px; font-size: 15px; }
.tesis-satir {
    display: flex; justify-content: space-between; align-items: center;
    padding: 8px 0; border-bottom: 1px solid rgba(0,0,0,.06); font-size: 14px; gap: 12px;
}
.tesis-ad { color: var(--lacivert-2); }
.tesis-ad small { color: var(--soluk); }
.tesis-ucret { font-weight: 600; color: var(--lacivert); white-space: nowrap; }
.tesis-soru {
    margin-top: 10px; padding: 12px; background: rgba(255,255,255,.7);
    border-radius: 10px; border: 1px dashed #E8A400;
}
.tesis-soru-baslik { font-weight: 600; color: var(--turuncu-koyu); font-size: 14px; }
.tesis-soru-metin { color: var(--lacivert-2); font-size: 13.5px; margin: 4px 0 10px; }
.tesis-secenekler { display: flex; flex-wrap: wrap; gap: 8px; }
.tesis-secenek {
    display: flex; flex-direction: column; align-items: flex-start;
    padding: 8px 14px; background: #fff; border: 1.5px solid var(--cizgi);
    border-radius: 10px; cursor: pointer; font-size: 13.5px; font-weight: 600;
    color: var(--lacivert-2); transition: all .15s; gap: 2px;
}
.tesis-secenek:hover:not(:disabled) { border-color: var(--turuncu); background: var(--turuncu-acik); }
.tesis-secenek.secili { border-color: #22A45D; background: #E7F6EE; color: #1a7a45; }
.tesis-secenek:disabled { cursor: default; opacity: .7; }
.tesis-secenek.secili:disabled { opacity: 1; }
.tesis-secenek-ucret { font-size: 12px; color: var(--turuncu-koyu); font-weight: 700; }
.tesis-secenek.secili .tesis-secenek-ucret { color: #22A45D; }
.tesis-soru-sonuc { margin-top: 8px; font-size: 13.5px; color: var(--lacivert-2); min-height: 0; }
.tesis-soru-sonuc.dolu { padding-top: 8px; }
.tesis-kaydedildi { font-size: 11.5px; color: #22A45D; margin-left: 4px; }

/* ========== Yakıt & Menzil ========== */
.menzil-kutu {
    margin-top: 12px; padding: 14px 16px;
    background: linear-gradient(135deg, #F0F9F4 0%, #F7FBF9 100%);
    border: 1px solid #C3E9D3; border-radius: 12px;
}
.menzil-baslik { font-weight: 700; color: var(--lacivert); margin-bottom: 10px; font-size: 15px; }
.menzil-satir {
    display: flex; justify-content: space-between; align-items: center;
    padding: 5px 0; font-size: 13.5px; color: var(--lacivert-2);
}
.menzil-satir b { color: var(--lacivert); }
.menzil-bar {
    position: relative; height: 26px; background: #E4EFE9; border-radius: 8px;
    margin: 10px 0; overflow: hidden;
}
.menzil-bar-dolu { position: absolute; left: 0; top: 0; height: 100%; border-radius: 8px; transition: width .4s; }
.menzil-bar-etiket {
    position: absolute; left: 0; top: 0; width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    font-size: 12px; font-weight: 700; color: var(--lacivert); z-index: 1;
}
.menzil-mesaj {
    margin-top: 8px; padding: 9px 11px; border-radius: 8px; font-size: 13px; line-height: 1.5;
}
.menzil-ok { background: #E7F6EE; color: #1a7a45; }
.menzil-uyari { background: #FFF6E5; color: #9a6b00; }
.menzil-bilgi { background: #EAF3FB; color: #1E5A8A; }

/* ========== Akıllı Yakıt Tavsiyesi (Aşama 2) ========== */
.yakit-tavsiye {
    margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--cizgi);
}
.yakit-tavsiye-baslik { font-weight: 700; color: var(--lacivert); margin-bottom: 8px; font-size: 14px; }
.yakit-tavsiye-satir {
    padding: 9px 11px; border-radius: 8px; font-size: 13px; line-height: 1.5; margin-bottom: 6px;
}
.yt-ikmal { background: #FFF6E5; color: #9a6b00; border-left: 3px solid #E8A400; }
.yt-firsat { background: #EAF3FB; color: #1E5A8A; border-left: 3px solid #2C8CD6; }
.yt-ok { background: #E7F6EE; color: #1a7a45; border-left: 3px solid #22A45D; }
.yt-bilgi { background: var(--zemin); color: var(--lacivert-2); }
.yakit-enucuz {
    margin-top: 8px; padding: 8px 11px; background: #F0F9F4; border-radius: 8px;
    font-size: 12.5px; color: #1a7a45;
}

/* Çoklu ikmal durakları */
.yt-ozet { background: #FFF6E5; color: #9a6b00; font-weight: 600; border-left: 3px solid #E8A400; }
.yt-ikmal-durak {
    background: #fff; border: 1px solid #FFE0A3; border-left: 3px solid #E8A400;
    display: flex; align-items: center; gap: 8px;
}
.yt-sira {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 22px; height: 22px; border-radius: 50%; background: #E8A400; color: #fff;
    font-weight: 700; font-size: 12px; flex-shrink: 0;
}

/* ========== Harita kapsam rozeti ========== */
#harita { position: relative; }
.kapsam-rozet {
    position: absolute; top: 10px; left: 50%; transform: translateX(-50%);
    z-index: 500; /* harita katmanının üstünde ama kontrollerle çakışmaz */
    pointer-events: none; /* varsayılan: tıklamayı haritaya geçir, alttaki
                              .kapsam-rozet-ozet / .kapsam-rozet-tam.acik
                              kendi pointer-events:auto'suyla bunu geçersiz kılar */
}
.kapsam-rozet-tam {
    background: rgba(255,255,255,.95); color: var(--lacivert);
    padding: 6px 14px; border-radius: 20px; font-size: 13px; font-weight: 500;
    box-shadow: 0 2px 10px rgba(0,0,0,.15); border: 1px solid var(--cizgi);
    white-space: nowrap;
}
.kapsam-rozet-tam b { color: var(--turuncu-koyu); }
.kapsam-rozet-ozet { display: none; } /* masaüstünde hiç görünmez, bkz. aşağıdaki mobil kırılım */

/* 23.09.2026 (9. tur): kullanıcı canlıdan (ucretliyol.com ana sayfa, telefon
   ekran görüntüsü) "Kapsam kısmı sığmıyor" dedi — haklıydı: rozet "Türkiye +
   Yunanistan + ... + Karadağ" TEK SATIRLIK (white-space:nowrap), ekranın
   ortasına sabitlenmiş (left:50% + translateX(-50%)) bir metindi. Dar
   telefon ekranlarında hem SOLDAN hem SAĞDAN kırpılıyordu. Önce mobilde
   normal şekilde 2-3 satıra SARDIRDIK (wrap) — bu "sığmıyor" sorununu
   çözdü ama bu sefer kullanıcı (10. tur) "çok yer kaplıyor, ya kaldıralım
   ya da inceltelim" dedi. Kullanıcının seçtiği: "kısa özet + dokununca
   genişlesin". Şimdi mobilde (≤800px, index.php'nin kendi mobil kırılım
   noktasıyla aynı — o noktadan itibaren harita tam genişlik tek sütun
   oluyor) SADECE kısa ".kapsam-rozet-ozet" ("📍 7 ülke kapsıyor") görünüyor,
   tam liste (".kapsam-rozet-tam") varsayılan KAPALI, dokununca (bkz.
   index.php'deki script) açılıp haritanın üstünde kısa süreliğine beliriyor.
   Masaüstünde bu kırılım hiç devreye girmiyor — orada .kapsam-rozet-ozet
   display:none kalıyor, .kapsam-rozet-tam eskisi gibi hep açık tek satır. */
@media (max-width: 800px) {
    .kapsam-rozet { pointer-events: none; }
    .kapsam-rozet-ozet {
        display: flex; align-items: center; gap: 5px; pointer-events: auto;
        background: rgba(255,255,255,.95); color: var(--lacivert);
        padding: 6px 13px; border-radius: 20px; font-size: 12.5px; font-weight: 600;
        box-shadow: 0 2px 10px rgba(0,0,0,.15); border: 1px solid var(--cizgi);
        white-space: nowrap; cursor: pointer; font-family: inherit;
    }
    .kapsam-rozet-ozet b { color: var(--turuncu-koyu); }
    .kapsam-rozet-ok { font-size: 9px; color: var(--soluk); transition: transform .15s; }
    .kapsam-rozet-ozet[aria-expanded="true"] .kapsam-rozet-ok { transform: rotate(180deg); }

    .kapsam-rozet-tam {
        display: none; /* varsayılan kapalı */
        position: absolute; top: calc(100% + 6px); left: 50%; transform: translateX(-50%);
        white-space: normal; text-align: center; line-height: 1.5;
        max-width: calc(100vw - 40px); /* vw kullanılıyor — üst öğenin genişliği
                                           içeriğe göre değiştiği için yüzde
                                           yerine viewport genişliği taşmayı
                                           daha güvenilir engelliyor */
    }
    .kapsam-rozet-tam.acik { display: block; pointer-events: auto; }
}
@media (max-width: 480px) {
    .kapsam-rozet-tam { font-size: 11.5px; padding: 5px 10px; }
    .kapsam-rozet-ozet { font-size: 11px; padding: 5px 11px; }
}

/* ========== Yunanistan kategori seçici ========== */
.gr-kategori-kutu {
    margin: 10px 0; padding: 12px 14px; background: #EAF3FB;
    border-radius: 10px; border-left: 3px solid #2C8CD6;
}
.gr-kat-baslik { font-weight: 700; color: var(--lacivert); font-size: 14px; margin-bottom: 4px; }
.gr-kat-aciklama { font-size: 12.5px; color: var(--lacivert-2); margin-bottom: 8px; line-height: 1.5; }
.gr-kat-secim {
    width: 100%; padding: 8px 10px; border: 1px solid var(--cizgi);
    border-radius: 8px; font-size: 13px; background: #fff; color: var(--lacivert);
}

/* index.php üst özet — Yunanistan bilgisi */
.ozet-gr {
    display: inline-block; background: #EAF3FB; color: #1E5A8A;
    padding: 2px 8px; border-radius: 6px; font-size: 12.5px;
}

/* ========== Köprü/tesis kategori soru kutusu (sorgulama) ========== */
.tesis-soru-kutu {
    margin: 10px 0; padding: 14px; background: #FFF7ED;
    border: 1px dashed var(--turuncu); border-radius: 12px;
}
.tesis-soru-baslik { font-weight: 700; color: var(--turuncu-koyu); font-size: 15px; margin-bottom: 4px; }
.tesis-soru-metin { font-size: 13.5px; color: var(--lacivert-2); margin-bottom: 10px; }
.tesis-secenek-grup { display: flex; flex-direction: column; gap: 8px; }
.tesis-secenek-btn {
    display: flex; justify-content: space-between; align-items: center;
    padding: 11px 14px; background: #fff; border: 1px solid var(--cizgi);
    border-radius: 10px; cursor: pointer; font-size: 14px; text-align: left;
    transition: border-color .15s, background .15s;
}
.tesis-secenek-btn:hover:not(:disabled) { border-color: var(--turuncu); background: #FFF7ED; }
.tesis-secenek-btn.secili { border-color: var(--turuncu); background: var(--turuncu-acik); }
.tesis-secenek-btn:disabled { opacity: .55; cursor: default; }
.ts-etiket { font-weight: 500; color: var(--lacivert); }
.ts-ucret { font-weight: 700; color: var(--turuncu-koyu); }
.tesis-soru-sonuc { margin-top: 8px; font-size: 14px; color: var(--basari); font-weight: 600; }

/* ========== Bilgi (i) ipucu ========== */
.bilgi-i {
    display: inline-flex; align-items: center; justify-content: center;
    width: 18px; height: 18px; border-radius: 50%;
    background: var(--turuncu); color: #fff; font-size: 12px; font-weight: 700;
    font-style: italic; cursor: pointer; margin-left: 4px; vertical-align: middle;
    font-family: Georgia, serif; user-select: none;
}
.bilgi-i:hover { background: var(--turuncu-koyu); }
.bilgi-balon {
    position: absolute; z-index: 1000; margin-top: 6px; left: 0;
    background: var(--lacivert); color: #fff; padding: 8px 12px;
    border-radius: 8px; font-size: 12.5px; line-height: 1.5; max-width: 260px;
    box-shadow: 0 4px 16px rgba(0,0,0,.25); font-weight: 400;
}
/* Araç sınıfı seçici yanındaki bilgi konumlama */
.arac-sinif-satir { position: relative; }

/* ========== Olympia Pass indirim bilgisi ========== */
.pass-bilgi-kutu {
    margin: 8px 0; padding: 11px 14px; background: #ECFDF5;
    border: 1px solid var(--basari); border-radius: 10px;
    font-size: 13.5px; color: var(--lacivert-2);
}
.pass-bilgi-kutu .pass-ikon { font-size: 16px; }

/* Köprü kategori seçici sonuç */
.kopru-kat-sonuc { margin-top: 8px; font-size: 14px; color: var(--basari); font-weight: 600; }
.kopru-kat-secim { margin-top: 4px; }

/* ========== Üye araç ekleme — ülke sınıfları kutusu ========== */
.ulke-siniflari-kutu {
    margin-top: 14px; padding: 14px 16px; background: #ECFDF5;
    border: 1px solid var(--basari); border-radius: 12px;
}
.usk-baslik { font-weight: 700; color: var(--lacivert); margin-bottom: 10px; font-size: 14px; }
.usk-liste { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.usk-satir {
    display: flex; justify-content: space-between; align-items: center;
    padding: 8px 12px; background: #fff; border-radius: 8px; font-size: 13.5px;
}
.usk-satir b { color: var(--turuncu-koyu); font-family: monospace; }
.usk-satir.usk-eksik { opacity: .7; }
.usk-satir.usk-eksik small { color: var(--soluk); font-size: 11.5px; }
.usk-not { margin-top: 10px; font-size: 12.5px; color: var(--lacivert-2); line-height: 1.5; }
@media (max-width: 560px) { .usk-liste { grid-template-columns: 1fr; } }

/* Hizmet kapsamı — "çalışıyoruz" rozeti */
.kapsama-rozet.yakinda {
    background: #FEF3C7; color: #92400E; border: 1px solid #FCD34D;
    padding: 3px 10px; border-radius: 20px; font-size: 12.5px; font-weight: 600;
}
.durum-nokta.yakinda { background: #F59E0B; }

/* Hizmet kapsamı — "yol haritasında / henüz başlamadık" rozeti (08.09.2026 eklendi) */
.kapsama-rozet.planli {
    background: #F1F2F4; color: #55596A; border: 1px solid #D7DAE1;
    padding: 3px 10px; border-radius: 20px; font-size: 12.5px; font-weight: 600;
}

/* Canlı WhatsApp butonu — sağ alt köşe, tüm sayfalarda sabit (08.09.2026 eklendi) */
.wa-float {
    position: fixed; right: 20px; bottom: 20px; z-index: 9999;
    width: 56px; height: 56px; border-radius: 50%;
    background: #25D366; display: flex; align-items: center; justify-content: center;
    box-shadow: 0 4px 14px rgba(0,0,0,.25);
    transition: transform .15s ease, box-shadow .15s ease;
}
.wa-float:hover { transform: scale(1.07); box-shadow: 0 6px 18px rgba(0,0,0,.3); }
@media (max-width: 560px) {
    .wa-float { right: 14px; bottom: 14px; width: 50px; height: 50px; }
    .wa-float svg { width: 26px; height: 26px; }
}

/* Çerez onay bildirimi — alt bar, tüm sayfalarda (08.09.2026 eklendi) */
/* 08.09.2026 düzeltildi: görünürlük artık HTML "hidden" özelliği yerine
   .acik class'ı ile kontrol ediliyor — display:flex burada olduğu için
   [hidden]{display:none} tarayıcı kuralını eziyordu, buton kapatmıyordu. */
.uy-cerez-bildirim {
    display: none;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 9998;
    background: #1E2233; color: #E7E9EF;
    padding: 14px 20px; align-items: center; justify-content: center;
    gap: 16px; flex-wrap: wrap; box-shadow: 0 -2px 12px rgba(0,0,0,.2);
    font-size: 13.5px; line-height: 1.5;
}
.uy-cerez-bildirim.acik { display: flex; }
.uy-cerez-bildirim p { margin: 0; max-width: 760px; }
.uy-cerez-bildirim a { color: #93C5FD; }
.uy-cerez-bildirim .btn {
    flex-shrink: 0; padding: 8px 18px; font-size: 13.5px;
}
@media (max-width: 560px) {
    .uy-cerez-bildirim { padding: 12px 14px; text-align: center; }
    .wa-float { bottom: 78px; } /* çerez barı açıkken WhatsApp butonuyla çakışmasın */
}