/* MCTaksi — musteri haritasi (tam ekran, mobil uygulama gorunumu).
   Mobil: harita tam ekran + alttan acilan panel. >= 900px: solda sabit panel. */

:root {
    --th-koyu: #0f172a;
    --th-metin: #1e293b;
    --th-soluk: #64748b;
    --th-cizgi: #e2e8f0;
    --th-zemin: #ffffff;
    --th-sari: #facc15;
    --th-sari-koyu: #a16207;
    --th-mavi: #2563eb;
    --th-yesil: #16a34a;
    --th-wa: #1fa855;
    --th-golge: 0 10px 30px rgba(15, 23, 42, .18);
    --th-alt-bosluk: env(safe-area-inset-bottom, 0px);
}

* { box-sizing: border-box; }

html, body {
    margin: 0; height: 100%; overflow: hidden;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    color: var(--th-metin); background: #e5e7eb;
    -webkit-tap-highlight-color: transparent;
}

/* Google Maps kaba satir ici "position: relative" yazar -> inset:0 boyutu kaybolur (yukseklik 0).
   Bu yuzden acik genislik/yukseklik + !important ile sabit konum. */
#harita { position: fixed !important; top: 0; left: 0; width: 100%; height: 100%; }

/* ---------- ust serit ---------- */
.th-ust {
    position: fixed; z-index: 5; left: 0; right: 0; top: 0;
    padding: calc(env(safe-area-inset-top, 0px) + 12px) 12px 0;
    display: flex; justify-content: space-between; align-items: center; gap: 10px;
    pointer-events: none;
}
.th-ust > * { pointer-events: auto; }

.th-marka {
    display: inline-flex; align-items: center; gap: 9px; min-width: 0;
    background: var(--th-koyu); color: #fff; text-decoration: none;
    padding: 7px 14px 7px 7px; border-radius: 999px; box-shadow: var(--th-golge);
    font-weight: 700; font-size: .95rem;
}
.th-marka-ikon {
    width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0;
    display: grid; place-items: center; background: var(--th-sari); color: var(--th-koyu);
}
.th-marka-ad { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.th-yuvarlak {
    width: 46px; height: 46px; border-radius: 50%; border: 0; flex-shrink: 0;
    background: var(--th-zemin); color: var(--th-mavi); font-size: 1.25rem;
    box-shadow: var(--th-golge); cursor: pointer;
}
.th-yuvarlak.gps-kapali { color: var(--th-soluk); }

/* ---------- bildirim ---------- */
.th-bildirim {
    position: fixed; z-index: 6; left: 50%; transform: translateX(-50%);
    top: calc(env(safe-area-inset-top, 0px) + 70px);
    width: min(92vw, 460px);
    background: var(--th-koyu); color: #fff; border-radius: 12px;
    padding: 10px 14px; font-size: .86rem; line-height: 1.35; box-shadow: var(--th-golge);
}

/* ---------- panel ---------- */
.th-panel {
    position: fixed; z-index: 4; left: 0; right: 0; bottom: 0;
    max-height: 62vh; display: flex; flex-direction: column;
    background: var(--th-zemin); border-radius: 20px 20px 0 0;
    box-shadow: 0 -8px 30px rgba(15, 23, 42, .16);
    padding: 0 14px calc(var(--th-alt-bosluk) + 10px);
    transition: max-height .25s ease;
}
.th-panel.kucuk { max-height: 158px; }
.th-panel.kucuk .th-not, .th-panel.kucuk .th-dipnot { display: none; }

.th-tutamac {
    align-self: center; border: 0; background: none; padding: 9px 30px 6px; cursor: pointer;
}
.th-tutamac span { display: block; width: 42px; height: 5px; border-radius: 3px; background: #cbd5e1; }

.th-panel-bas h1 { margin: 0; font-size: 1.08rem; font-weight: 750; color: var(--th-koyu); }
.th-alt { font-size: .8rem; color: var(--th-soluk); margin-top: 2px; }

/* ---------- taksi ozeti + dolu anahtari ---------- */
.th-taksi-satir { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 8px; }
.th-taksi-ozet { font-size: .82rem; color: var(--th-metin); display: inline-flex; align-items: center; gap: 6px; }
.th-taksi-ozet b { font-weight: 800; }
.th-taksi-ozet .y { color: var(--th-yesil); } .th-taksi-ozet .k { color: #dc2626; }
.th-anahtar { display: inline-flex; align-items: center; gap: 7px; font-size: .8rem; color: var(--th-soluk); cursor: pointer; flex-shrink: 0; }
.th-anahtar input { position: absolute; opacity: 0; width: 0; height: 0; }
.th-anahtar-ray { width: 34px; height: 20px; border-radius: 999px; background: #cbd5e1; position: relative; transition: background .15s ease; }
.th-anahtar-ray::after {
    content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%;
    background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.3); transition: transform .15s ease;
}
.th-anahtar input:checked + .th-anahtar-ray { background: #dc2626; }
.th-anahtar input:checked + .th-anahtar-ray::after { transform: translateX(14px); }
.th-anahtar input:focus-visible + .th-anahtar-ray { outline: 2px solid var(--th-mavi); outline-offset: 2px; }
.th-panel.kucuk .th-taksi-satir { display: none; }

.th-not {
    display: flex; align-items: center; gap: 8px; margin: 10px 0 4px;
    border: 1px solid var(--th-cizgi); border-radius: 12px; padding: 0 12px; color: var(--th-soluk);
}
.th-not input {
    flex: 1; border: 0; outline: 0; padding: 10px 0; font: inherit; font-size: .86rem;
    color: var(--th-metin); background: transparent; min-width: 0;
}

/* 4px ic bosluk: secili kartin vurgu golgesi kaydirma kutusunda kirpilmasin */
.th-liste { list-style: none; margin: 2px -4px 0; padding: 4px; overflow-y: auto; -webkit-overflow-scrolling: touch; }

.th-durak { border: 1px solid var(--th-cizgi); border-radius: 14px; padding: 10px; margin-bottom: 8px; }
.th-durak.secili { border-color: var(--th-sari); box-shadow: 0 0 0 3px rgba(250, 204, 21, .35); }

.th-durak-govde {
    width: 100%; display: flex; align-items: center; gap: 11px; text-align: left;
    background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer;
}
.th-durak-ikon {
    width: 40px; height: 40px; border-radius: 11px; flex-shrink: 0;
    display: grid; place-items: center; font-size: 1.15rem;
    background: var(--th-sari); color: var(--th-koyu);
}
.th-durak-bilgi { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.th-durak-ad { font-weight: 700; font-size: .95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.th-durak-alt { font-size: .78rem; color: var(--th-soluk); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.th-mesafe {
    flex-shrink: 0; font-size: .8rem; font-weight: 700; color: var(--th-koyu);
    background: #f1f5f9; border-radius: 999px; padding: 4px 9px; font-variant-numeric: tabular-nums;
}

.th-dugmeler { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.th-dugme {
    display: flex; align-items: center; justify-content: center; gap: 7px;
    min-height: 46px; border-radius: 12px; text-decoration: none;
    font-weight: 700; font-size: .95rem; color: #fff;
}
.th-dugme i { font-size: 1.05rem; }
.th-ara { background: var(--th-yesil); }
.th-wa { background: var(--th-wa); }
.th-dugme.yok { background: #e2e8f0; color: #94a3b8; pointer-events: none; }
.th-durak:not(.secili) .th-dugmeler { display: none; }

.th-bos { text-align: center; color: var(--th-metin); padding: 18px 8px 8px; font-size: .9rem; }
.th-bos i { font-size: 1.8rem; color: var(--th-soluk); display: block; margin-bottom: 6px; }

.th-dipnot { font-size: .72rem; color: var(--th-soluk); margin: 6px 2px 0; line-height: 1.4; }

/* ---------- harita isaretleri ---------- */
.th-ben { position: relative; width: 22px; height: 22px; }
.th-ben::before {
    content: ""; position: absolute; inset: -14px; border-radius: 50%;
    background: rgba(37, 99, 235, .22); animation: th-nabiz 2s ease-out infinite;
}
.th-ben::after {
    content: ""; position: absolute; inset: 0; border-radius: 50%;
    background: var(--th-mavi); border: 3px solid #fff; box-shadow: 0 1px 5px rgba(0, 0, 0, .35);
}
.th-ben.elle::before { animation: none; background: rgba(37, 99, 235, .14); }
@keyframes th-nabiz { 0% { transform: scale(.5); opacity: 1; } 100% { transform: scale(1.4); opacity: 0; } }

.th-durak-isaret { display: flex; flex-direction: column; align-items: center; cursor: pointer; transition: transform .15s ease; }
.th-durak-isaret.secili { transform: scale(1.18); }
.th-durak-isaret .levha {
    display: flex; align-items: center; gap: 4px;
    background: var(--th-sari); color: var(--th-koyu); border: 2px solid var(--th-koyu);
    border-radius: 7px; padding: 3px 6px; font-size: 10.5px; font-weight: 800; letter-spacing: .04em;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .3);
}
.th-durak-isaret .levha i { font-size: 13px; }
.th-durak-isaret.secili .levha { background: var(--th-koyu); color: var(--th-sari); border-color: var(--th-sari); }
.th-durak-isaret .direk { width: 3px; height: 10px; background: var(--th-koyu); }
.th-durak-isaret .taban { width: 9px; height: 4px; border-radius: 50%; background: rgba(15, 23, 42, .45); }

/* Isaret kabi (OverlayView): konuma gore hizalanir; saydam ic bosluk dokunma alanini
   parmak boyutuna buyutur (taksi 32 + 2x6 = 44px). merkez: nokta ortada, alt: levhanin tabani noktada. */
.th-isaret-kap { position: absolute; padding: 6px; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.th-isaret-kap.merkez { transform: translate(-50%, -50%); }
.th-isaret-kap.alt { transform: translate(-50%, -100%); padding-bottom: 0; }

/* taksi isareti (talep #46): musteri = sari (musait); yonetici = yesil bos, kirmizi dolu, turuncu musteriye gidiyor */
.th-taksi {
    width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center;
    color: #fff; font-size: 16px; border: 2.5px solid #fff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .35);
}
.th-taksi.bos { background: var(--th-yesil); }
.th-taksi.dolu { background: #dc2626; }
.th-taksi { position: relative; }
.th-taksi.musait { background: var(--th-sari); color: var(--th-koyu); border-color: var(--th-koyu); border-width: 2px; }
.th-taksi.yolda { background: #f97316; }
.th-taksi.bekleme { border-style: dashed; }
/* yonetici rozetleri: G = gezen taksi, saat = bekleme noktasinda (canli konum yok, calisma saatinde) */
.th-g { position: absolute; left: -7px; top: -7px; min-width: 16px; height: 16px; border-radius: 999px; background: var(--th-koyu); color: #fff;
        display: grid; place-items: center; font-size: 9.5px; font-weight: 800; font-style: normal; box-shadow: 0 1px 2px rgba(0,0,0,.3); }
.th-saat { position: absolute; right: -6px; top: -6px; width: 16px; height: 16px; border-radius: 50%; background: #fff; color: var(--th-koyu);
           display: grid; place-items: center; font-size: 10px; box-shadow: 0 1px 2px rgba(0,0,0,.3); }
.th-taksi-ozet .s { color: var(--th-sari-koyu); } .th-taksi-ozet .t { color: #ea580c; }
/* sahipli durakta musait taksi sayisi: kartta etiket, levhada rozet */
.th-musait { display: inline-block; margin-top: 3px; font-size: .72rem; font-weight: 800; color: var(--th-koyu);
             background: var(--th-sari); border-radius: 999px; padding: 1px 8px; width: max-content; }
.th-durak-isaret .levha .sayi { margin-left: 2px; background: var(--th-koyu); color: var(--th-sari); border-radius: 999px;
                                padding: 0 5px; font-size: 10.5px; line-height: 15px; }
.th-durak-isaret.secili .levha .sayi { background: var(--th-sari); color: var(--th-koyu); }
.th-bildirim-dugmeler { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.th-bildirim .th-bildirim-dugmeler a, .th-bildirim .th-bildirim-dugmeler button { margin: 0; display: inline-flex; align-items: center; gap: 5px; border-radius: 999px;
    padding: 6px 12px; font: inherit; font-weight: 700; text-decoration: none; border: 0; cursor: pointer; background: var(--th-sari); color: var(--th-koyu); }
.th-bildirim .th-bildirim-dugmeler a.wa { background: var(--th-wa); color: #fff; }
.th-bildirim .th-bildirim-dugmeler button { background: #fff; color: var(--th-koyu); }

.th-bildirim a { color: var(--th-sari); font-weight: 700; margin-left: 6px; }

/* ---------- genis ekran: solda panel ---------- */
@media (min-width: 900px) {
    .th-panel {
        left: 16px; right: auto; bottom: 16px; top: 76px; width: 390px;
        max-height: none; border-radius: 18px; padding-bottom: 12px;
    }
    .th-panel.kucuk { max-height: none; }
    .th-panel.kucuk .th-not, .th-panel.kucuk .th-dipnot { display: block; }
    .th-panel.kucuk .th-not, .th-panel.kucuk .th-taksi-satir { display: flex; }
    .th-tutamac { display: none; }
    .th-panel-bas { padding-top: 14px; }
}

/* ---------- dogrulanmis musteri: hesap + konum istegi ---------- */
.th-ust-sag { display: inline-flex; gap: 8px; }
a.th-yuvarlak { display: grid; place-items: center; text-decoration: none; color: var(--th-soluk); }
a.th-yuvarlak.dogrulandi { color: var(--th-yesil); }

.th-konum {
    grid-column: 1 / -1; border: 0; font: inherit; font-weight: 800; cursor: pointer;
    background: var(--th-koyu); color: var(--th-sari);
}

.th-bildirim button {
    margin-left: 6px; border: 0; background: var(--th-sari); color: var(--th-koyu); font: inherit; font-weight: 800;
    border-radius: 8px; padding: 4px 10px; cursor: pointer;
}

.th-istek {
    margin: 4px 0 10px; border-radius: 16px; padding: 12px 14px; background: #fffbeb; border: 2px solid var(--th-sari);
}
.th-istek.kabul { background: #f0fdf4; border-color: var(--th-yesil); }
.th-istek.tamam { background: #f0fdf4; border-color: #bbf7d0; }
.th-istek.bitti { background: #f8fafc; border-color: var(--th-cizgi); }
.th-istek-bas { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 1rem; color: var(--th-koyu); }
.th-istek-sure { font-variant-numeric: tabular-nums; font-weight: 800; color: var(--th-sari-koyu); }
.th-istek-yazi { font-size: .88rem; color: var(--th-metin); margin-top: 4px; }
.th-istek-goruldu { font-size: .8rem; color: var(--th-soluk); margin-top: 3px; }
.th-istek-goruldu.evet { color: var(--th-mavi); font-weight: 700; }
.th-istek-goruldu i { font-size: 1rem; vertical-align: -2px; }
.th-istek.bekliyor .th-istek-yazi::before {
    content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--th-sari-koyu);
    margin-right: 6px; vertical-align: middle; animation: th-yanip 1.2s infinite;
}
@keyframes th-yanip { 50% { opacity: .2; } }
.th-istek-dugmeler { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.th-istek-dugmeler a, .th-istek-dugmeler button {
    flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 42px;
    border-radius: 11px; border: 0; font: inherit; font-weight: 700; font-size: .9rem; text-decoration: none; cursor: pointer;
    background: var(--th-yesil); color: #fff;
}
.th-istek-dugmeler .wa { background: var(--th-wa); flex: 0 0 48px; }
.th-istek-dugmeler .ikincil { background: transparent; color: var(--th-metin); border: 1.5px solid var(--th-cizgi); }

/* konum isteğini kabul edip gelen taksi: musait sarilardan ayrissin diye buyuk, yanip sonen, plakali */
.th-taksi.gelen {
    width: 44px; height: 44px; font-size: 21px; background: var(--th-sari); color: var(--th-koyu); border: 3px solid var(--th-koyu);
    animation: th-gelen 1.6s infinite;
}
.th-gelen-plaka { position: absolute; top: calc(100% + 4px); left: 50%; transform: translateX(-50%); white-space: nowrap;
                  background: var(--th-koyu); color: var(--th-sari); font-size: 11px; font-weight: 800; letter-spacing: .03em;
                  padding: 2px 7px; border-radius: 6px; box-shadow: 0 1px 3px rgba(0,0,0,.35); }
@keyframes th-gelen { 0% { box-shadow: 0 0 0 0 rgba(250,204,21,.7); } 70% { box-shadow: 0 0 0 14px rgba(250,204,21,0); } 100% { box-shadow: 0 0 0 0 rgba(250,204,21,0); } }

/* taksi duraklari bizi bulsun: basvuru baglantisi (panelin dibi) */
.th-durak-ekle {
    display: flex; align-items: center; gap: 8px; margin: 4px 0 6px; padding: 10px 12px; border-radius: 12px;
    background: #fffbeb; border: 1px dashed var(--th-sari-koyu); color: var(--th-metin); text-decoration: none; font-size: .86rem;
}
.th-durak-ekle i { color: var(--th-sari-koyu); font-size: 1.05rem; }
/* yonetici haritayi acinca: yonetim paneline donus */
a.th-yuvarlak.th-yonetim { background: var(--th-koyu); color: var(--th-sari); }

/* ---------- mobil: harita buyuk, panel alcak (2026-10-15, kullanici geri bildirimi: liste ekranin %70'ini kapliyordu) ----------
   Panel varsayilan ~%40; tutamaca dokununca / yukari kaydirinca .genis (%82), asagi kaydirinca .kucuk (yalniz baslik). */
@media (max-width: 899px) {
    .th-panel { max-height: 40vh; padding-left: 12px; padding-right: 12px; }
    .th-panel.genis { max-height: 82vh; }
    .th-panel.kucuk { max-height: 118px; }
    .th-tutamac { padding: 7px 40px 4px; touch-action: none; }
    .th-panel-bas h1 { font-size: .98rem; }
    .th-alt { font-size: .76rem; }
    .th-taksi-satir { margin-top: 5px; }
    .th-not { margin: 6px 0 2px; border-radius: 10px; }
    .th-not input { padding: 7px 0; font-size: .82rem; }
    .th-panel:not(.genis) .th-dipnot { display: none; }
    /* Durak basvuru baglantisi panel kucukken de gorunur: tek satir, panelin dibinde sabit (liste ustunde kayar) */
    .th-durak-ekle { flex-shrink: 0; margin: 6px 0 0; padding: 7px 10px; font-size: .78rem; border-radius: 10px;
                     white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
    .th-durak-ekle i { font-size: .9rem; margin-right: 4px; vertical-align: -1px; }
    .th-panel.kucuk { max-height: 150px; }
    .th-panel.kucuk .th-liste, .th-panel.kucuk .th-bos { display: none; }   /* kucuk: yalniz baslik + basvuru baglantisi */

    .th-durak { padding: 7px 8px; margin-bottom: 6px; border-radius: 12px; }
    .th-durak-govde { gap: 9px; }
    .th-durak-ikon { width: 32px; height: 32px; border-radius: 9px; font-size: .95rem; }
    .th-durak-ad { font-size: .88rem; }
    .th-durak-alt { font-size: .72rem; }
    .th-mesafe { font-size: .74rem; padding: 3px 8px; }
    /* secili durakta uc dugme tek satirda */
    .th-dugmeler { grid-template-columns: 1fr 1fr 1.45fr; gap: 6px; margin-top: 7px; }
    .th-dugme span { white-space: nowrap; }
    .th-dugme { min-height: 40px; border-radius: 10px; font-size: .84rem; gap: 5px; }
    .th-konum { grid-column: auto; }
    .th-istek { margin: 2px 0 8px; padding: 10px 12px; }
}
@media (min-width: 900px) {
    .th-panel.genis { max-height: none; }
}

/* Konum isteği almayan durak (sahipsiz, istek alan taksisi yok — talep #39): Konum gönder yok, Ara + WhatsApp iki sütun */
.th-durak.istek-yok .th-dugmeler { grid-template-columns: 1fr 1fr; }