/* =====================================================
   ÜcretliYol - Ortak Stil (Kurumsal tema)
   Palet: logo turuncusu (#F26522) + antrasit lacivert
   (#1E2233) + açık ferah gri zemin. Beyaz üst bar.
   ===================================================== */
:root {
    --turuncu: #F26522;         /* logo turuncusu - ana vurgu */
    --turuncu-koyu: #D8500F;
    --turuncu-acik: #FFF1EA;    /* çok açık turuncu zemin */
    --lacivert: #1E2233;        /* logo antrasiti - başlık/metin */
    --lacivert-2: #2C3145;
    --zemin: #F7F8FA;           /* ferah açık gri sayfa zemini */
    --kart: #FFFFFF;
    --metin: #2A2F3A;
    --soluk: #7A8194;
    --cizgi: #E8EBF0;
    --cizgi-koyu: #D5D9E2;
    --basari: #17916B;
    --hata: #D64545;
    --radius: 14px;
    --golge: 0 1px 3px rgba(30,34,51,.06), 0 4px 16px rgba(30,34,51,.05);
    --golge-kalk: 0 4px 12px rgba(30,34,51,.08), 0 12px 32px rgba(30,34,51,.08);
    /* Geriye dönük uyumluluk (eski değişken adları yeni palete eşlendi) */
    --yesil: #F26522; --yesil-koyu: #D8500F; --sari: #F26522;
    --asfalt: #1E2233;
}

* { 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(90deg, var(--turuncu) 0%, #FF8A4C 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;
}

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(--turuncu);
    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 {
    margin-top: 48px;
    padding: 26px 22px;
    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, var(--lacivert) 0%, var(--lacivert-2) 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: #A9B0C4; }
.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: var(--turuncu); }
.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: 0; padding: 8px; border-bottom: 1px solid var(--cizgi);
        box-shadow: 0 12px 24px rgba(30,34,51,.12);
        display: none;
        z-index: 5200;
    }
    .ustbar nav.acik { display: flex; }
    .ustbar nav a { padding: 13px 16px; border-radius: 10px; font-size: 15px; }
    .ustbar nav a.btn-uye, .ustbar nav a.nav-giris { text-align: center; margin-top: 4px; }

    /* 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;
}
.nav-dropdown:hover .nav-dropdown-menu,
.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; }

@media (max-width: 820px) {
    .nav-dropdown { width: 100%; }
    .nav-dropdown-menu {
        position: static; opacity: 1; visibility: visible; transform: none;
        box-shadow: none; border: none; border-left: 2px solid var(--cizgi);
        margin: 2px 0 2px 14px; padding: 4px; min-width: 0;
        display: none;
    }
    .nav-dropdown.acik .nav-dropdown-menu { display: block; }
}

/* ========== 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; }
}