/* =====================================================================
   NOT — vh ve dvh
   iOS Safari'de 100vh, adres cubugu GIZLIYKEN'ki yukseklik demek.
   Cubuk gorunurken gercek alan bundan ~60-100 piksel daha kisa, yani
   "height: 100vh" verilmis bir panel ekrandan tasiyor ve alti cubugun
   arkasinda kaliyor -- kaydirmak da ise yaramiyor, cunku tasan panel
   degil, ekran kisa.
   dvh (dynamic viewport height) tam da o anki gercek yuksekligi
   veriyor. Her yerde once vh, hemen ardindan dvh yaziyoruz: dvh'yi
   bilmeyen eski bir tarayici ikinci satiri yok sayip vh'de kaliyor.
   ===================================================================== */
body {
    margin: 0;
    background: var(--zemin);
    font-family: "Space Grotesk", -apple-system, "Segoe UI", sans-serif;
}
#harita { height: 100vh; height: 100dvh; width: 100%; background: transparent; cursor: grab; overflow: hidden; }
#harita canvas { display: block; }

/* Panel - sağdan kayan */
#panel {
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    height: 100dvh;
    width: 420px;
    max-width: 85vw;
    background: var(--katman);
    color: var(--yazi);
    box-shadow: -10px 0 40px var(--golge);
    transform: translateX(100%);
    transition: transform 0.35s ease;
    overflow-y: auto;
    z-index: 1000;
    padding: 24px;
    box-sizing: border-box;
    pointer-events: none;
}
#panel.acik {
    transform: translateX(0);
    pointer-events: auto;
}
#ortu {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: var(--golge-guclu);
    z-index: 999;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}
#ortu.acik {
    opacity: 1;
    pointer-events: auto;
}


#panelBaslik { font-size: 22px; font-weight: 600; margin: 0 0 4px; }
#panelAltBaslik { color: var(--yazi-soluk); font-size: 14px; margin: 0 0 20px; }
#kapat {
    position: absolute; top: 20px; right: 20px;
    background: none; border: none; color: var(--yazi-soluk);
    font-size: 24px; cursor: pointer;
}
#sehirListe {
    display: grid;
    gap: 12px;
}
.sehir-kart {
    background: var(--katman-2);
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 14px;
}
.sehir-kart img { width: 100%; height: 78px; object-fit: cover; display: block; }
.sehir-bilgi { padding: 10px 14px; }
.sehir-ad { font-weight: 600; font-size: 16px; }
.sehir-aciklama { color: var(--yazi-soluk); font-size: 13px; margin-top: 2px; }
.sehir-kart.secili { background: var(--kehribar); }
.sehir-kart.secili .sehir-aciklama { color: var(--kehribar-a); }
.ulke-etiket {
    background: var(--kehribar);
    color: #fff;
    border: none;
    border-radius: 20px;
    padding: 6px 14px;
    font-size: 14px;
    font-weight: 600;
    box-shadow: 0 4px 12px rgba(var(--golge-rgb), 0.3);
}
.ulke-etiket::before { display: none; }
#istatistik {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000;
    color: var(--kehribar-a);
    font-size: 30px;
    font-weight: 800;
    letter-spacing: 0.5px;
    background: var(--katman);
    padding: 12px 28px;
    border-radius: 14px;
    box-shadow: 0 6px 20px var(--golge);
    pointer-events: none;
}
#crosshairX, #crosshairY {
    position: fixed;
    background: rgba(var(--kehribar-rgb), 0.5);
    z-index: 300;
    pointer-events: none;
}
#crosshairX {
    width: 100%;
    height: 1px;
    left: 0;
    top: 0;
}
#crosshairY {
    width: 1px;
    height: 100%;
    top: 0;
    left: 0;
}

#gecmisPanel {
    position: fixed;
    top: 155px;
    right: 20px;
    width: 240px;
    box-sizing: border-box;
    max-height: 70vh;
    max-height: 70dvh;
    overflow-y: auto;
    background: var(--katman);
    border-radius: 12px;
    padding: 16px;
    z-index: 900;
    color: var(--yazi);
    font-family: "Space Grotesk", -apple-system, "Segoe UI", sans-serif;
    font-weight: 600;
}
#gecmisBaslik {
    margin: 0 0 12px;
    font-size: 15px;
    color: var(--kehribar-yazi);
    text-transform: uppercase;
    letter-spacing: 1px;
}
.gecmis-ulke {
    margin-bottom: 6px;
}
.gecmis-ulke-ad {
    cursor: pointer;
    padding: 8px 10px;
    background: var(--katman-2);
    border-radius: 8px;
    font-weight: 600;
    display: flex;
    justify-content: space-between;
    align-items: center;
    user-select: none;
}
.gecmis-ulke-ad:hover { background: var(--katman-2); }
.gecmis-sehirler {
    display: none;
    padding: 6px 10px 2px;
}
.gecmis-ulke.acik .gecmis-sehirler { display: block; }
.gecmis-sehir {
    padding: 4px 0;
    font-size: 14px;
    color: var(--yazi-soluk);
    cursor: pointer
}
.gecmis-ok { transition: transform 0.2s; }
.gecmis-ulke.acik .gecmis-ok { transform: rotate(90deg); }
#gecmisPanel:empty { display: none; }

#logo {
    position: fixed;
    top: 20px;
    right: 20px;
    width: 240px;
    box-sizing: border-box;
    background: var(--katman);
    color: var(--kehribar-yazi);
    font-family: "Space Grotesk", -apple-system, "Segoe UI", sans-serif;
    font-weight: 600;
    font-size: 26px;
    text-align: center;
    padding: 12px 0;
    border-radius: 12px;
    z-index: 901;
    letter-spacing: 2px;
}

#kitaChart {
    position: fixed;
    bottom: 20px;
    left: 20px;
    background: var(--katman);
    border-radius: 16px;
    padding: 16px;
    z-index: 1000;
    width: 240px;
    box-sizing: border-box;
    box-shadow: 0 6px 20px var(--golge);
}
#kitaSvg { width: 100%; height: auto; display: block; transform-origin: center center; }
@keyframes pastaDon {
    from { transform: rotate(-90deg) scale(0); }
    to { transform: rotate(0deg) scale(1); }
}
#kitaSvg.donuyor { animation: pastaDon 1s ease; }
#kitaLejant { margin-top: 12px; }
.lejant-satir {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
    color: var(--yazi);
    font-size: 13px;
}
.lejant-renk {
    width: 12px; height: 12px;
    border-radius: 3px;
    flex-shrink: 0;
}
.lejant-yuzde { color: var(--kehribar-a); font-weight: 700; margin-left: auto; }

/* İstatistik paneli - sağdan kayan */
#istatistikPanel {
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    height: 100dvh;
    width: 460px;
    max-width: 85vw;
    background: var(--katman);
    color: var(--yazi);
    box-shadow: -10px 0 40px var(--golge);
    transform: translateX(100%);
    transition: transform 0.35s ease;
    overflow-y: auto;
    z-index: 1001;
    padding: 28px;
    box-sizing: border-box;
    pointer-events: none;
}
#istatistikPanel.acik {
    transform: translateX(0);
    pointer-events: auto;
}
#istatistikBaslik {
    margin: 0 0 24px;
    font-size: 22px;
    color: var(--kehribar-yazi);
    font-family: "Space Grotesk", -apple-system, "Segoe UI", sans-serif;
    font-weight: 600;
    letter-spacing: 1px;
}
#istatistikKapat {
    position: absolute; top: 20px; right: 20px;
    background: none; border: none; color: var(--yazi-soluk);
    font-size: 24px; cursor: pointer;
}
.bar-satir { margin-bottom: 18px; }
.bar-ust {
    display: flex;
    justify-content: space-between;
    margin-bottom: 6px;
    font-size: 14px;
    font-weight: 600;
}
.bar-yuzde { color: var(--kehribar-a); }
.bar-dis {
    background: var(--bos);
    border-radius: 8px;
    height: 16px;
    overflow: hidden;
}
.bar-ic {
    height: 100%;
    width: 0;
    border-radius: 8px;
    transition: width 1s ease;
}
#kitaChart { cursor: pointer; }

#sifirlaBtn {
    position: fixed;
    right: 20px;
    bottom: 20px;
    width: 240px;
    box-sizing: border-box;
    background: var(--katman);
    color: var(--kehribar-yazi);
    font-family: "Space Grotesk", -apple-system, "Segoe UI", sans-serif;
    font-weight: 600;
    font-size: 15px;
    text-align: center;
    padding: 14px 0;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    z-index: 901;
    letter-spacing: 1px;
    transition: background 0.2s;
}
#sifirlaBtn:hover { background: var(--kehribar); color: var(--katman); }
#sifirlaBtn:hover { background: var(--kehribar); color: var(--katman); }

.gittim-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 2px solid #fff;
    /* Fotografin uzerinde: perde de yazi da temadan bagimsiz. */
    background: rgba(0, 0, 0, 0.6);
    color: #F2F6F9;
    font-size: 20px;
    font-weight: 700;
    cursor: pointer;
    z-index: 5;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px var(--golge);
}
.gittim-btn.aktif { background: var(--kehribar); border-color: #fff; }
.sehir-kart { position: relative; }

/* Şehir detay paneli - sağdan kayan */
#sehirDetayPanel {
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    height: 100dvh;
    width: 480px;
    max-width: 85vw;
    background: var(--katman);
    color: var(--yazi);
    box-shadow: -10px 0 40px var(--golge);
    transform: translateX(100%);
    transition: transform 0.35s ease;
    overflow-y: auto;
    z-index: 1002;
    padding: 28px;
    box-sizing: border-box;
    pointer-events: none;
}
#sehirDetayPanel.acik {
    transform: translateX(0);
    pointer-events: auto;
}
#sehirDetayBaslik {
    margin: 0 0 24px;
    font-size: 24px;
    color: var(--kehribar-yazi);
    font-family: "Space Grotesk", -apple-system, "Segoe UI", sans-serif;
    font-weight: 600;
}
#sehirDetayKapat {
    position: absolute; top: 20px; right: 20px;
    background: none; border: none; color: var(--yazi-soluk);
    font-size: 24px; cursor: pointer;
}
.detay-bolum { margin-bottom: 24px; }
.detay-bolum label {
    display: block;
    font-size: 12px;
    color: var(--yazi-soluk);
    letter-spacing: 1px;
    margin-bottom: 10px;
}
#yildizlar { display: flex; gap: 6px; }
.yildiz {
    font-size: 32px;
    color: var(--bos);
    cursor: pointer;
    transition: color 0.15s, transform 0.15s;
}
.yildiz:hover { transform: scale(1.15); }
.yildiz.dolu { color: var(--yildiz-dolu); }
#sehirFotoLabel {
    display: inline-block;
    border: 2px dashed var(--kil-guclu);
    color: var(--yazi-soluk);
    padding: 12px 24px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.15s;
}
#sehirFotoLabel:hover { border-color: var(--kehribar-yazi); color: var(--kehribar-yazi); }
#sehirFotoOnizle { margin-top: 12px; }
#sehirFotoOnizle img {
    max-width: 100%;
    border-radius: 8px;
    display: block;
}
#sehirNot {
    width: 100%;
    min-height: 80px;
    background: var(--zemin);
    border: 2px solid var(--kil-guclu);
    border-radius: 8px;
    color: var(--yazi);
    padding: 12px;
    font-family: inherit;
    font-size: 14px;
    resize: vertical;
    box-sizing: border-box;
}
#sehirDetayKaydet {
    width: 100%;
    background: var(--kehribar);
    color: var(--katman);
    border: none;
    border-radius: 8px;
    padding: 14px;
    font-weight: 700;
    font-size: 16px;
    cursor: pointer;
    font-family: "Space Grotesk", -apple-system, "Segoe UI", sans-serif;
    font-weight: 600;
    letter-spacing: 1px;
}
#sehirDetayKaydet:hover { background: var(--kehribar-a); }

.kart-puan {
    position: absolute;
    top: 8px;
    left: 8px;
    /* Kullanici FOTOGRAFININ uzerinde duruyor. Fotograf ne acik ne
       koyu oldugu icin bu rozet temaya uymuyor: perde de yazi da iki
       temada sabit. Temaya baglasak acik temada perde grilesip yazi
       okunmaz oluyor. */
    background: rgba(0, 0, 0, 0.78);
    color: #F3BE73;
    padding: 3px 8px;
    border-radius: 12px;
    font-size: 13px;
    letter-spacing: 1px;
    z-index: 5;
    box-shadow: 0 2px 6px var(--golge);
}

#koordinat {
    font-family: "Space Grotesk", -apple-system, "Segoe UI", sans-serif;
    font-weight: 600;
    font-size: 13px;
    color: var(--kehribar-a);
    text-align: center;
    margin-bottom: 12px;
    letter-spacing: 1px;
}

#sehirKapakSar { position: relative; margin-bottom: 20px; }
#sehirKapak {
    width: 100%;
    height: 160px;
    object-fit: cover;
    border-radius: 10px;
    display: none;
}
/* Kapak varsa dugme fotografin ustunde, sag ust kosede */
#gittimBtn {
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    padding: 9px 16px;
    border-radius: 20px;
    cursor: pointer;
    background: rgba(var(--zemin-rgb), 0.82);
    border: 1px solid var(--kehribar);
    color: var(--kehribar-yazi);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
#gittimBtn:hover:not(:disabled) { background: rgba(var(--kehribar-rgb), 0.16); }
#gittimBtn:disabled { opacity: 0.45; cursor: default; }
#gittimBtn.gidildi {
    background: rgba(var(--kehribar-rgb), 0.18);
    border-color: rgba(var(--kehribar-rgb), 0.55);
}
#sehirKapakSar:not(.kapaksiz) #gittimBtn {
    position: absolute; top: 10px; right: 10px;
    /* Arkasinda kullanici fotografi var; saydam kehribar fotografin
       rengine karisip camurlasiyordu. Burada renkler sabit: gidilmediyse
       koyu perde + kehribar cerceve, gidildiyse dolu kehribar. */
    background: rgba(0, 0, 0, 0.55);
    color: #F3BE73;
    border-color: rgba(233, 162, 59, 0.65);
}
#sehirKapakSar:not(.kapaksiz) #gittimBtn.gidildi {
    background: #E9A23B;
    color: #0C1119;
    border-color: #E9A23B;
}
/* Kapak yoksa baslik altinda tam genislikte dursun */
#sehirKapakSar.kapaksiz #gittimBtn { display: block; width: 100%; }

#kilitUyari {
    display: none;
    background: var(--zemin);
    border: 2px dashed var(--kehribar);
    color: var(--yazi);
    padding: 20px;
    border-radius: 10px;
    text-align: center;
    font-size: 14px;
    line-height: 1.5;
}
#kilitUyari b { color: var(--kehribar-yazi); }

.pin-etiket {
    background: var(--katman);
    color: var(--yazi);
    border: none;
    border-radius: 8px;
    font-family: "Space Grotesk", -apple-system, "Segoe UI", sans-serif;
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 0.5px;
    padding: 4px 10px;
    box-shadow: 0 2px 8px var(--golge);
}
.pin-etiket::before {
    border-top-color: var(--katman) !important;
}

#profilBtn {
    position: fixed;
    top: 82px;
    right: 20px;
    width: 240px;
    box-sizing: border-box;
    background: var(--katman);
    border: none;
    border-radius: 12px;
    padding: 12px 16px;
    cursor: pointer;
    z-index: 901;
    display: flex;
    align-items: center;
    gap: 12px;
    transition: background 0.2s;
}
#profilBtn:hover { background: var(--katman-3); }

#profilFoto {
    flex: 0 0 25%;
    aspect-ratio: 1;
    background: var(--kehribar);   /* idle.png yoktu, 404 veriyordu */
    border-radius: 50%;
    max-width: 44px;
}
#profilCizgi {
    width: 2px;
    align-self: stretch;
    background: var(--kehribar);
    opacity: 0.5;
}
#profilYazi {
    flex: 1;
    color: var(--kehribar-yazi);
    font-family: "Space Grotesk", -apple-system, "Segoe UI", sans-serif;
    font-weight: 600;
    font-size: 18px;
    letter-spacing: 1px;
    text-align: center;
}

/* Profil kartı ve ayarlar — sağdan kayan, aynı yüzey */
#profilKart, #ayarlarPanel {
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    height: 100dvh;
    width: 440px;
    max-width: 85vw;
    background: var(--katman);
    color: var(--yazi);
    box-shadow: -10px 0 40px var(--golge);
    transform: translateX(100%);
    transition: transform 0.35s ease;
    overflow-y: auto;
    z-index: 1003;
    padding: 28px;
    box-sizing: border-box;
    pointer-events: none;
}
#profilKart.acik, #ayarlarPanel.acik {
    transform: translateX(0);
    pointer-events: auto;
}
#profilKapat, #ayarlarKapat {
    position: absolute; top: 20px; right: 20px;
    background: none; border: none; color: var(--yazi-soluk);
    font-size: 24px; cursor: pointer;
}

/* Fotoğraflar */
#profilFotolar {
    display: flex;
    gap: 10px;
    justify-content: center;
    align-items: center;
    margin-bottom: 24px;
    flex-wrap: wrap;
}
#profilFotoListe { display: flex; gap: 10px; }
.profil-foto-kutu {
    position: relative;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid var(--kehribar);
}
.profil-foto-kutu img { width: 100%; height: 100%; object-fit: cover; }
.profil-foto-sil {
    position: absolute; top: 0; right: 0;
    background: var(--tehlike); color: #fff;
    border: none; width: 20px; height: 20px;
    border-radius: 50%; cursor: pointer;
    font-size: 12px; line-height: 1;
}
#profilFotoEkle {
    width: 80px; height: 80px;
    border: 2px dashed var(--kil-guclu);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: var(--yazi-soluk); cursor: pointer;
    font-size: 12px; text-align: center;
}
#profilFotoEkle:hover { border-color: var(--kehribar-yazi); color: var(--kehribar-yazi); }

/* Bölümler */
.profil-bolum { margin-bottom: 20px; }
.profil-bolum label {
    display: block; font-size: 12px; color: var(--yazi-soluk);
    letter-spacing: 1px; margin-bottom: 8px;
}
.profil-bolum input {
    width: 100%; box-sizing: border-box;
    background: var(--zemin); border: 2px solid var(--kil-guclu);
    border-radius: 8px; color: var(--yazi);
    padding: 12px; font-family: inherit; font-size: 15px;
}
.profil-bolum input:disabled { color: var(--yazi); border-color: var(--katman-2); }

#profilSonGezilen { display: flex; flex-direction: column; gap: 6px; }
.profil-gezi-satir {
    background: var(--zemin);
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 14px;
    color: var(--yazi);
}

#profilButonlar { display: flex; gap: 12px; margin-top: 24px; }
#profilKaydet, #profilDegistir {
    flex: 1;
    border: none;
    border-radius: 8px;
    padding: 14px;
    font-weight: 700;
    font-size: 15px;
    cursor: pointer;
    font-family: "Space Grotesk", -apple-system, "Segoe UI", sans-serif;
    font-weight: 600;
    letter-spacing: 1px;
}
#profilKaydet { background: var(--kehribar); color: var(--katman); }
#profilKaydet:hover { background: var(--kehribar-a); }
#profilDegistir { background: var(--katman-3); color: var(--yazi); }
#profilDegistir:hover { background: var(--katman-3); }

/* Giriş / Kayıt ekranı */
.giris-ekran {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: var(--katman);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}
.giris-kutu {
    background: var(--yazi);
    padding: 40px;
    border-radius: 12px;
    width: 300px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    box-shadow: 0 10px 40px var(--golge);
}
.giris-logo {
    font-family: "Space Grotesk", -apple-system, "Segoe UI", sans-serif;
    font-weight: 600;
    color: var(--katman);
    text-align: center;
    margin: 0 0 10px 0;
    font-size: 28px;
}
.giris-kutu input {
    padding: 12px;
    border: 2px solid var(--katman);
    border-radius: 6px;
    font-size: 14px;
}
.giris-btn, .kayit-btn {
    padding: 12px;
    border: none;
    border-radius: 6px;
    font-weight: bold;
    cursor: pointer;
    font-size: 14px;
}
.giris-btn { background: var(--kehribar); color: white; }
.kayit-btn { background: var(--katman); color: white; }
.giris-mesaj {
    color: var(--tehlike);
    text-align: center;
    font-size: 13px;
    margin: 0;
    min-height: 16px;
}

/* Çıkış butonu */
.cikis-btn {
    position: fixed;
    top: 20px;
    left: 20px;
    z-index: 1000;
    background: var(--katman);
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 6px;
    font-weight: bold;
    cursor: pointer;
    font-size: 13px;
}

/* Canlı arama */
.arama-kutu {
    position: fixed;
    top: 96px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3000;
    width: 420px;
    max-width: 86%;
    display: none; /* başta gizli, bir harfe basınca açılır */
}
/* Bu kural eksikti: aramaAc() "acik" sınıfını ekliyordu ama onu
   görünür yapan bir şey yoktu, kutu hiç açılmıyordu. */
.arama-kutu.acik { display: block; }
.arama-kutu input {
    width: 100%;
    box-sizing: border-box;
    padding: 13px 16px;
    border: 1px solid var(--kil-guclu);
    border-radius: 6px;
    background: var(--yuzey-koyu);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    color: var(--yazi);
    font-size: 15px;
    font-family: "Space Grotesk", -apple-system, "Segoe UI", sans-serif;
    font-weight: 600;
    box-shadow: 0 6px 20px rgba(var(--golge-rgb), 0.25);
    outline: none;
}
.arama-sonuc {
    background: var(--yuzey-koyu);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid var(--kil);
    border-radius: 6px;
    margin-top: 6px;
    max-height: 46vh;
    max-height: 46dvh;
    overflow-y: auto;
    box-shadow: 0 10px 28px var(--golge-guclu);
}
.arama-sonuc:empty { display: none; }
.arama-sonuc-satir {
    padding: 10px 16px;
    cursor: pointer;
    border-bottom: 1px solid rgba(var(--zemin-rgb), 0.15);
    color: var(--katman);
    font-size: 14px;
}
.arama-sonuc-satir:hover {
    background: var(--kehribar);
    color: white;
}
.arama-sonuc-satir .tur {
    font-size: 11px;
    opacity: 0.6;
    margin-left: 6px;
}

/* Panel açıkken harita sola kaysın */
#harita {
    transition: transform 0.35s ease;
}
#harita.itili {
    transform: translateX(-420px);
}

/* Eski çıkış ve sıfırla butonlarını gizle (profile taşındı) */
.cikis-btn { display: none; }
#sifirlaBtn { display: none; }

/* Profil içi ayar butonları */
#profilAyarlar {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid rgba(var(--kehribar-rgb), 0.25);
}
.profil-ayar-btn {
    border: none;
    border-radius: 8px;
    padding: 12px;
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
    font-family: "Space Grotesk", -apple-system, "Segoe UI", sans-serif;
    font-weight: 600;
    letter-spacing: 1px;
    background: var(--katman-3);
    color: var(--yazi);
}
.profil-ayar-btn:hover { background: var(--katman-3); }
.profil-ayar-btn.tehlike { background: var(--tehlike); color: var(--uyari); }
.profil-ayar-btn.tehlike:hover { background: var(--tehlike); }

/* =====================================================================
   KÜRE (globe.gl) — Leaflet'ten kalan etiket stilleri yerine
   ===================================================================== */
.scene-tooltip { pointer-events: none; }
.kure-etiket {
    background: var(--katman);
    color: var(--yazi);
    border: 1px solid var(--kehribar);
    border-radius: 8px;
    font-family: "Space Grotesk", -apple-system, "Segoe UI", sans-serif;
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 0.5px;
    padding: 6px 12px;
    white-space: nowrap;
    box-shadow: 0 4px 14px var(--golge-guclu);
}
.kure-etiket span {
    display: block;
    font-family: "Space Grotesk", -apple-system, "Segoe UI", sans-serif;
    font-size: 11px;
    letter-spacing: 0;
    color: var(--kehribar-a);
    margin-top: 2px;
}

/* Panel içi arama kutusu ------------------------------------------------ */
#panelArama {
    width: 100%;
    box-sizing: border-box;
    background: var(--zemin);
    border: 1px solid var(--katman-3);
    border-radius: 10px;
    color: var(--yazi);
    font-size: 14px;
    padding: 11px 14px;
    margin-bottom: 16px;
    outline: none;
}
#panelArama:focus { border-color: var(--kehribar-yazi); }
#panelArama::placeholder { color: var(--yazi-soluk); }

/* "Daha fazla" ---------------------------------------------------------- */
#dahaFazla {
    display: block;
    width: 100%;
    margin: 18px 0 4px;
    padding: 13px;
    background: transparent;
    border: 1px dashed var(--kehribar);
    border-radius: 10px;
    color: var(--kehribar-yazi);
    font-family: "Space Grotesk", -apple-system, "Segoe UI", sans-serif;
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 1px;
    cursor: pointer;
}
#dahaFazla:hover { background: var(--kehribar); color: var(--kehribar-ustu); }
#dahaFazla:disabled { opacity: .5; cursor: default; }

.panel-durum { color: var(--yazi-soluk); font-size: 14px; padding: 8px 2px; }

/* Şehir listesi: sabit sütun sayısı yerine esnek ızgara.
   Eskiden sütun sayısı şehir sayısına göre hesaplanıyordu; 400 şehirde
   400 sütunluk bir ızgara çıkıyordu ve panel donuyordu. */
#sehirListe {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 14px;
}

/* Arama sonuç satırı ---------------------------------------------------- */
.arama-satir {
    padding: 11px 14px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    color: var(--yazi);
}
.arama-satir:hover { background: var(--katman-2); }

.kure-hata {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
    color: var(--kehribar-yazi); font-family: "Space Grotesk", -apple-system, "Segoe UI", sans-serif;
    font-weight: 600; font-size: 15px;
    text-align: center; line-height: 1.7; letter-spacing: 1px;
}


/* Uzay tuvali: her seyin arkasinda, sabit. script.js bir kez ciziyor. */
#uzay {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    pointer-events: none;
    display: block;
}


/* =====================================================================
   YAZI TIPI
   Arayüzün tamamı Space Grotesk. Tek istisna logolar: onlar
   Black Ops One kalıyor, marka işareti gibi duruyorlar.
   ===================================================================== */
#logo,
.giris-logo {
    font-family: "Black Ops One", sans-serif;
    font-weight: 400;
}


/* =====================================================================
   GEZGİN FOTOĞRAFLARI
   ===================================================================== */
#sehirFotoOnizle,
.foto-izgara {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-top: 12px;
}
#sehirFotoOnizle:empty { margin-top: 0; }

.foto-kart {
    position: relative;
    aspect-ratio: 1;
    border-radius: 10px;
    overflow: hidden;
    background: var(--zemin);
    border: 1px solid var(--katman-3);
}
.foto-kart img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.foto-sil {
    position: absolute;
    top: 5px; right: 5px;
    width: 22px; height: 22px;
    border: none;
    border-radius: 50%;
    background: rgba(var(--golge-rgb), 0.65);
    color: #fff;
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
    padding: 0;
}
.foto-sil:hover { background: var(--tehlike); }

.foto-paylas {
    position: absolute;
    left: 5px; right: 5px; bottom: 5px;
    border: none;
    border-radius: 6px;
    padding: 4px 0;
    font-family: inherit;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.4px;
    cursor: pointer;
    /* Bu da fotografin uzerinde; ayni sebeple temadan bagimsiz. */
    background: rgba(0, 0, 0, 0.68);
    color: #CBD5DC;
}
.foto-paylas.acik { background: var(--kehribar); color: var(--kehribar-ustu); }
.foto-paylas:hover { filter: brightness(1.15); }

.foto-sahip.tiklanir { cursor: pointer; }
.foto-sahip.tiklanir:hover { color: var(--misafir); text-decoration: underline; }
.foto-sahip {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    padding: 4px 6px;
    font-size: 10px;
    color: var(--yazi);
    background: linear-gradient(transparent, rgba(var(--golge-rgb), 0.8));
    text-align: center;
}

#fotoSayac {
    float: right;
    color: var(--yazi-soluk);
    letter-spacing: 0;
}
#fotoDurum {
    margin-top: 8px;
    font-size: 12px;
    color: var(--kehribar-yazi);
    min-height: 14px;
}
#digerFotolar { margin-bottom: 24px; }
#digerFotolar label {
    display: block;
    font-size: 11px;
    letter-spacing: 1px;
    color: var(--yazi-soluk);
    margin-bottom: 4px;
}


/* =====================================================================
   BAŞKA BİR GEZGİNİN HARİTASI
   ===================================================================== */
#misafirBar {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1100;
    display: flex;
    align-items: center;
    gap: 14px;
    background: var(--katman-3);
    border: 1px solid var(--misafir);
    border-radius: 12px;
    padding: 10px 16px;
    color: var(--misafir);
    font-size: 14px;
    box-shadow: 0 8px 24px var(--golge-guclu);
}
#misafirBar button {
    background: var(--misafir);
    color: var(--katman);
    border: none;
    border-radius: 8px;
    padding: 6px 12px;
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}
#misafirBar button:hover { filter: brightness(1.1); }

.gezgin-sayilar {
    background: var(--zemin);
    border: 1px solid var(--katman-3);
    border-radius: 10px;
    padding: 14px;
    text-align: center;
    color: var(--yazi-soluk);
    font-size: 14px;
}
.gezgin-sayilar b { color: var(--misafir); font-size: 20px; margin: 0 3px; }

.gezgin-baslik {
    font-size: 11px;
    letter-spacing: 1px;
    color: var(--yazi-soluk);
    margin: 22px 0 8px;
}
.gezgin-ulkeler { display: flex; flex-direction: column; gap: 6px; }
.gezgin-ulke {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--katman);
    border-radius: 8px;
    padding: 10px 14px;
    cursor: pointer;
    color: var(--yazi);
    font-size: 14px;
}
.gezgin-ulke:hover { background: var(--katman-2); }
/* Ülke adı eğik durmasın: gezi kaydında ve yorum kartında upright,
   burada eğikti — aynı kalıbın üç yerde iki türlü görünmesi. */
.gezgin-ulke em { font-style: normal; color: var(--yazi-soluk); }
.gezgin-ulke b { color: var(--misafir); }

/* Misafir modunda "gittim" işareti tıklanamaz */
.gittim-btn.misafir { cursor: default; pointer-events: none; }

/* Arama sonuçları: bölüm başlıkları */
.arama-baslik {
    font-size: 10px;
    letter-spacing: 1.2px;
    color: var(--yazi-soluk);
    padding: 10px 14px 4px;
}
.arama-sag { float: right; opacity: .6; font-size: 12px; }

/* Kullanıcı adı */
.kullanici-adi {
    font-size: 18px;
    color: var(--kehribar-yazi);
    font-weight: 600;
}
.kullanici-adi-not {
    font-size: 12px;
    color: var(--yazi-soluk);
    line-height: 1.5;
    margin-bottom: 8px;
}
.kullanici-adi-satir { display: flex; gap: 8px; }
.kullanici-adi-satir input {
    flex: 1;
    background: var(--zemin);
    border: 1px solid var(--katman-3);
    border-radius: 8px;
    color: var(--yazi);
    padding: 10px 12px;
    font-family: inherit;
    font-size: 14px;
    outline: none;
}
.kullanici-adi-satir input:focus { border-color: var(--kehribar-yazi); }
.kullanici-adi-satir button {
    background: var(--kehribar);
    color: var(--kehribar-ustu);
    border: none;
    border-radius: 8px;
    padding: 0 18px;
    font-family: inherit;
    font-weight: 600;
    cursor: pointer;
}
.kullanici-adi-uyari {
    margin-top: 6px;
    font-size: 12px;
    color: var(--kehribar-yazi);
    min-height: 14px;
}


/* =====================================================================
   ARKADAŞLIK
   ===================================================================== */
.arkadas-kutu {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 12px;
}
.arkadas-etiket {
    color: var(--misafir);
    font-size: 13px;
    margin-right: auto;
}
.arkadas-dugme {
    border: none;
    border-radius: 8px;
    padding: 9px 16px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    background: var(--katman-2);
    color: var(--yazi);
}
.arkadas-dugme.onay { background: var(--misafir); color: var(--katman); }
.arkadas-dugme:hover { filter: brightness(1.12); }
.arkadas-dugme:disabled { opacity: .5; cursor: default; }
.arkadas-uyari {
    flex-basis: 100%;
    font-size: 12px;
    color: var(--kehribar-yazi);
}

.arkadas-satir {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--katman);
    border-radius: 8px;
    padding: 10px 12px;
    margin-bottom: 6px;
    cursor: pointer;
    font-size: 14px;
    color: var(--yazi);
}
.arkadas-satir:hover { background: var(--katman-2); }
.arkadas-satir.istek { cursor: default; border: 1px solid var(--misafir); }
.arkadas-ad { flex: 1; color: var(--misafir); }
.arkadas-sag { opacity: .6; font-size: 12px; }
.arkadas-bos { font-size: 12px; color: var(--yazi-soluk); line-height: 1.5; }

.arkadas-mini {
    border: none;
    border-radius: 6px;
    padding: 5px 10px;
    font-family: inherit;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    background: var(--katman-3);
    color: var(--yazi);
}
.arkadas-mini.onay { background: var(--misafir); color: var(--katman); }
.arkadas-mini:hover { filter: brightness(1.12); }

#profilBtn { position: fixed; }
#arkadasRozet {
    position: absolute;
    top: -6px;
    right: -6px;
    min-width: 20px;
    height: 20px;
    border-radius: 10px;
    background: var(--kehribar);
    color: var(--kehribar-ustu);
    font-size: 12px;
    font-weight: 700;
    line-height: 20px;
    text-align: center;
    padding: 0 5px;
    box-sizing: border-box;
}

/* =====================================================================
   ŞEHİR IŞIKLARI
   Küre üzerinde duran küçük DOM parçaları. Dış div sıfır boyutlu;
   globe.gl onu şehrin tam üstüne koyuyor, içteki <i> ise kendi
   boyutunun yarısı kadar sola/yukarı kayarak ışığı ortalıyor.
   Boyut --isik-boy değişkeninden geliyor, o da kamera yüksekliğine
   göre isikBoyutu() tarafından ayarlanıyor.
   ===================================================================== */
.sehir-isik {
    position: absolute;
    width: 0; height: 0;
    pointer-events: none;      /* tıklama nokta katmanının işi */
}
.sehir-isik i {
    position: absolute;
    display: block;
    width: var(--isik-boy, 46px);
    height: var(--isik-boy, 46px);
    left: calc(var(--isik-boy, 46px) / -2);
    top:  calc(var(--isik-boy, 46px) / -2);
    border-radius: 50%;
    background: radial-gradient(circle,
        rgba(255, 240, 214, 0.95) 0%,
        rgba(240, 174,  76, 0.42) 13%,
        rgba(233, 162,  59, 0.20) 32%,
        rgba(233, 162,  59, 0.00) 70%);
}
.sehir-isik.misafir i {
    background: radial-gradient(circle,
        rgba(232, 251, 255, 0.95) 0%,
        rgba(111, 202, 218, 0.42) 13%,
        rgba( 95, 182, 196, 0.20) 32%,
        rgba( 95, 182, 196, 0.00) 70%);
}

/* =====================================================================
   YENİ TEMA — küreyle uyum
   Küre koyu, sessiz ve soğuk tonlu; paneller de oraya uymalı. Buradaki
   kurallar yukarıdaki eski kuralları eziyor. Üç şey yapıyor:
     1. Paneller opak lacivert kutu değil, uzayın üstünde koyu cam
     2. Kehribar rengi SADECE "senin" olan şeyde: gezilen şehir, değer
     3. Köşeler daha az yuvarlak, çerçeveler kıl payı ince
   ===================================================================== */
:root {
    /* ---------- MARKA: iki temada da ayni kimlik ---------- */
    /* Kehribar "senin olan sey"i gosteriyor: gezdigin sehir, verdigin
       puan. Acik temada beyaz uzerinde okunmasi icin koyulasiyor ama
       ayni renk ailesinde kaliyor. */
    --kehribar:      #E9A23B;   /* dolgu ve kenar */
    --kehribar-yazi: #E9A23B;   /* yazi (acik temada koyulasir) */
    --kehribar-a:    #F3BE73;
    --kehribar-rgb:  233, 162, 59;
    --kehribar-ustu: #0C1119;   /* kehribar dolgunun ustundeki yazi */

    --misafir:       #5FB6C4;   /* baskasinin haritasi */
    --misafir-rgb:   95, 182, 196;
    --tehlike:       #C0392B;
    --tehlike-rgb:   192, 57, 43;
    --uyari:         #E8B9B9;

    /* ---------- TEMAYA BAGLI ---------- */
    --zemin:       #080D14;   /* en alt zemin */
    --zemin-rgb:   6, 9, 14;  /* yari saydam paneller bundan turuyor */
    --katman:      #101720;   /* opak kutu: logo, istatistik seridi */
    --katman-2:    #1A222B;   /* bir kademe acik yuzey */
    --katman-3:    #222B35;   /* girdi kutulari, kabartma */
    --yuzey:       rgba(9, 13, 19, 0.86);
    --yuzey-koyu:  rgba(6, 9, 14, 0.92);

    --yazi:        #DEE7EB;
    --yazi-soluk:  #818C95;
    --yazi-silik:  #8FA0B4;

    --kil:         rgba(190, 212, 218, 0.10);
    --kil-guclu:   rgba(190, 212, 218, 0.20);
    --kil-rgb:     190, 212, 218;

    --golge:       rgba(0, 0, 0, 0.40);
    --golge-guclu: rgba(0, 0, 0, 0.55);
    --golge-rgb:   0, 0, 0;

    --vurgu:       rgba(255, 255, 255, 0.04);
    --vurgu-guclu: rgba(255, 255, 255, 0.08);
    --vurgu-rgb:   255, 255, 255;

    /* Bos yildiz, dolmamis cubuk gibi "pasif" parcalar. Yuzey
       renginden ayirt edilmeli, yoksa acik temada beyaza karisiyor. */
    --bos:         #2C3641;
    --yildiz-dolu: #F3BE73;
}

/* =====================================================================
   ACIK TEMA
   ---------------------------------------------------------------------
   Kure ve uzay arka plani KOYU kaliyor -- uzay aydinlanmaz, sehir
   isiklari da ancak koyu zeminde isik gibi durur. Degisen sey kurenin
   ustundeki aray'uz: paneller acik, yazilar koyu.

   Paneller koyu temada "koyu cam" (arkasindaki yildizlar hafif
   siziyor). Acik temada ayni saydamlikta birakinca koyu kurenin
   ustunde kirli griye donuyordu, o yuzden burada daha opaklar.
   ===================================================================== */
:root[data-tema="acik"] {
    --kehribar:      #C07E18;
    --kehribar-yazi: #7A4E06;
    --kehribar-a:    #6A430A;
    --kehribar-rgb:  192, 126, 24;

    --misafir:       #1A7484;
    --misafir-rgb:   26, 116, 132;
    --tehlike:       #B02A1E;
    --tehlike-rgb:   176, 42, 30;
    --uyari:         #8C2F2F;

    --zemin:       #EEF1F5;
    --zemin-rgb:   255, 255, 255;
    --katman:      #FFFFFF;
    --katman-2:    #F1F4F8;
    --katman-3:    #E2E8EF;
    --yuzey:       rgba(255, 255, 255, 0.95);
    --yuzey-koyu:  rgba(247, 249, 252, 0.97);

    --yazi:        #17202A;
    --yazi-soluk:  #49545F;
    --yazi-silik:  #555F6B;

    --kil:         rgba(23, 32, 42, 0.12);
    --kil-guclu:   rgba(23, 32, 42, 0.24);
    --kil-rgb:     23, 32, 42;

    --golge:       rgba(23, 32, 42, 0.14);
    --golge-guclu: rgba(23, 32, 42, 0.22);
    --golge-rgb:   23, 32, 42;

    --vurgu:       rgba(23, 32, 42, 0.05);
    --vurgu-guclu: rgba(23, 32, 42, 0.09);
    --vurgu-rgb:   23, 32, 42;
    --bos:         #C3CDD8;
    --yildiz-dolu: #C07E18;
}

/* --- panel yüzeyleri --------------------------------------------- */
#panel, #sehirDetayPanel, #istatistikPanel {
    background: var(--yuzey-koyu);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-left: 1px solid var(--kil);
    box-shadow: none;
}
#gecmisPanel, #profilKart, #ayarlarPanel, #logo, #kitaChart, #istatistik, #sifirlaBtn, .arama-kutu {
    background: var(--yuzey);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid var(--kil);
    border-radius: 6px;
    box-shadow: none;
}

/* --- üst sayaç: ekranın en gürültülü şeyiydi ---------------------- */
#istatistik {
    color: var(--yazi);
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    padding: 10px 22px;
}

/* --- logo --------------------------------------------------------- */
#logo { color: var(--kehribar-yazi); font-size: 24px; letter-spacing: 3px; }

/* --- gezilen şehir kartı: dolu turuncu blok değil ------------------ */
.sehir-kart {
    background: rgba(var(--vurgu-rgb), 0.025);
    border: 1px solid var(--kil);
    border-radius: 5px;
}
.sehir-kart.secili {
    background: rgba(var(--kehribar-rgb), 0.07);
    border-color: rgba(var(--kehribar-rgb), 0.38);
    box-shadow: inset 3px 0 0 var(--kehribar);
}
.sehir-kart.secili .sehir-ad { color: var(--kehribar-yazi); }
.sehir-kart.secili .sehir-aciklama { color: var(--kehribar-a); }

/* --- "gittim" işareti ---------------------------------------------- */
.gittim-btn {
    background: rgba(var(--zemin-rgb), 0.75);
    border: 1px solid var(--kil-guclu);
    color: var(--yazi-soluk);
    box-shadow: none;
}
.gittim-btn.aktif {
    background: rgba(var(--kehribar-rgb), 0.16);
    border-color: var(--kehribar-yazi);
    color: var(--kehribar-yazi);
}

/* --- düğmeler: dolu yerine çerçeveli ------------------------------- */
#sehirDetayKaydet, #profilKaydet, #dahaFazla {
    background: rgba(var(--kehribar-rgb), 0.08);
    border: 1px solid rgba(var(--kehribar-rgb), 0.45);
    color: var(--kehribar-yazi);
    border-radius: 5px;
}
#sehirDetayKaydet:hover, #profilKaydet:hover, #dahaFazla:hover {
    background: rgba(var(--kehribar-rgb), 0.20);
    color: var(--kehribar-a);
}

/* --- bölüm başlıkları: turuncu değil, sessiz --------------------- */
#gecmisBaslik, #istatistikBaslik, .detay-baslik, .panel-alt-baslik {
    color: var(--yazi-soluk);
    letter-spacing: 2px;
    font-size: 11px;
    text-transform: uppercase;
    font-weight: 500;
}
#istatistikBaslik { font-size: 13px; }

/* --- küre üstündeki ülke etiketi ---------------------------------- */
.ulke-etiket {
    background: rgba(var(--zemin-rgb), 0.88);
    border: 1px solid var(--kil-guclu);
    color: var(--yazi);
    border-radius: 4px;
    font-weight: 500;
    font-size: 13px;
}

/* --- fotoğraf paylaşım rozeti ------------------------------------- */
.foto-paylas.acik {
    background: rgba(var(--kehribar-rgb), 0.20);
    color: var(--kehribar-yazi);
    border: 1px solid rgba(var(--kehribar-rgb), 0.45);
}

/* --- ince kenarlar ------------------------------------------------- */
#panelArama, .kullanici-adi-satir input, #sehirNot {
    background: var(--vurgu);
    border: 1px solid var(--kil);
    border-radius: 5px;
    color: var(--yazi);
}
#panelArama:focus, #sehirNot:focus { border-color: var(--kil-guclu); outline: none; }

/* --- kıta halkası -------------------------------------------------- */
.halka-sayi {
    fill: var(--yazi);
    font-family: "Space Grotesk", -apple-system, "Segoe UI", sans-serif;
    font-size: 34px;
    font-weight: 500;
}
.halka-alt {
    fill: var(--yazi-soluk);
    font-family: "Space Grotesk", -apple-system, "Segoe UI", sans-serif;
    font-size: 10px;
    letter-spacing: 2px;
}

/* --- profil düğmesi ------------------------------------------------ */
#profilFoto {
    background: rgba(var(--kehribar-rgb), 0.12);
    border: 1px solid rgba(var(--kehribar-rgb), 0.40);
    box-sizing: border-box;
}
#profilCizgi { background: var(--kil-guclu); opacity: 1; width: 1px; }
#profilYazi { color: var(--yazi); font-weight: 500; font-size: 15px; letter-spacing: 2px; }

/* --- profil kartındaki düğmeler ------------------------------------ */
.kullanici-adi-satir button {
    background: rgba(var(--kehribar-rgb), 0.10);
    border: 1px solid rgba(var(--kehribar-rgb), 0.45);
    color: var(--kehribar-yazi);
    border-radius: 5px;
}
.kullanici-adi-satir button:hover { background: rgba(var(--kehribar-rgb), 0.22); }

#profilDegistir, .profil-ayar-btn {
    background: rgba(var(--vurgu-rgb), 0.035);
    border: 1px solid var(--kil);
    color: var(--yazi);
    border-radius: 5px;
}
#profilDegistir:hover, .profil-ayar-btn:hover {
    background: rgba(var(--vurgu-rgb), 0.07);
    border-color: var(--kil-guclu);
}
.profil-ayar-btn.tehlike {
    background: rgba(var(--tehlike-rgb), 0.10);
    border-color: rgba(var(--tehlike-rgb), 0.45);
    color: var(--uyari);
}
.profil-ayar-btn.tehlike:hover {
    background: rgba(var(--tehlike-rgb), 0.22);
    border-color: rgba(var(--tehlike-rgb), 0.70);
    color: var(--uyari);
}

/* --- misafir modu ve arkadaşlık: dolu mavi yerine çerçeveli --------- */
#misafirBar {
    background: rgba(var(--zemin-rgb), 0.88);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(var(--misafir-rgb), 0.35);
    border-radius: 6px;
    box-shadow: none;
}
#misafirBar button {
    background: rgba(var(--misafir-rgb), 0.14);
    border: 1px solid rgba(var(--misafir-rgb), 0.50);
    color: var(--misafir);
    border-radius: 5px;
}
#misafirBar button:hover { background: rgba(var(--misafir-rgb), 0.26); filter: none; }

.arkadas-dugme, .arkadas-mini {
    background: var(--vurgu);
    border: 1px solid var(--kil);
    border-radius: 5px;
}
.arkadas-dugme.onay, .arkadas-mini.onay {
    background: rgba(var(--misafir-rgb), 0.14);
    border: 1px solid rgba(var(--misafir-rgb), 0.50);
    color: var(--misafir);
}
.arkadas-dugme:hover, .arkadas-mini:hover { filter: none; background: var(--vurgu-guclu); }
.arkadas-dugme.onay:hover, .arkadas-mini.onay:hover { background: rgba(var(--misafir-rgb), 0.26); }
.arkadas-satir.istek { border-color: rgba(var(--misafir-rgb), 0.40); }

/* --- misafir sayı kutusu ------------------------------------------- */
.gezgin-sayilar { border-radius: 5px; }

/* --- giriş ekranı --------------------------------------------------
   Uygulamanın ilk gördüğün ekranı burasıydı ve tek başına eski temada
   kalmıştı: koyu bir uygulamanın önünde bembeyaz bir kart. Aynı koyu
   cam diline geçirildi. */
.giris-ekran {
    background: radial-gradient(120% 90% at 50% 10%, var(--katman) 0%, var(--zemin) 55%, var(--zemin) 100%);
}
.giris-kutu {
    background: var(--yuzey);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid var(--kil);
    border-radius: 8px;
    box-shadow: 0 20px 60px var(--golge-guclu);
    width: 320px;
}
.giris-logo { color: var(--kehribar-yazi); letter-spacing: 2px; }
.giris-kutu input {
    background: var(--vurgu);
    border: 1px solid var(--kil);
    border-radius: 5px;
    color: var(--yazi);
}
.giris-kutu input::placeholder { color: var(--yazi-soluk); }
.giris-kutu input:focus { border-color: var(--kil-guclu); outline: none; }
.giris-btn, .kayit-btn { border-radius: 5px; border: 1px solid var(--kil); }
.giris-btn {
    background: rgba(var(--kehribar-rgb), 0.12);
    border-color: rgba(var(--kehribar-rgb), 0.50);
    color: var(--kehribar-yazi);
}
.giris-btn:hover { background: rgba(var(--kehribar-rgb), 0.24); }
.kayit-btn { background: var(--vurgu); color: var(--yazi); }
.kayit-btn:hover { background: var(--vurgu-guclu); }
.giris-mesaj { color: var(--yazi-soluk); }

/* --- şifremi unuttum ------------------------------------------------ */
.metin-btn {
    background: none;
    border: none;
    color: var(--yazi-soluk);
    font-family: inherit;
    font-size: 13px;
    cursor: pointer;
    padding: 4px 0;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.metin-btn:hover { color: var(--yazi); }
#yeniSifreAlani { display: none; flex-direction: column; gap: 12px; }
#yeniSifreAlani.acik { display: flex; }
.giris-kutu.kurtarma #girisEmail,
.giris-kutu.kurtarma #girisSifre,
.giris-kutu.kurtarma #girisBtn,
.giris-kutu.kurtarma #kayitBtn,
.giris-kutu.kurtarma #sifreUnuttum { display: none; }

/* Son gezdiklerin panelinin masaüstünde kapatma düğmesi yok — orada
   hep açık duran bir pencere. Mobilde alttan açılan sayfaya dönüşüyor
   ve kapatılabilmesi gerekiyor. Bu kural mobil blogundan ÖNCE duruyor:
   aynı özgüllükteki iki kuraldan dosyada sonra gelen kazanıyor. */
#gecmisKapat { display: none; }

/* =====================================================================
   MOBİL
   Masaüstünde dört köşede sabit duran pencereler var. Telefonda o
   pencereler ekranın yarısını kaplıyor ve küreye yer kalmıyordu.
   Dar ekranda hepsi alttan açılan sayfaya dönüşüyor, geriye üstte ve
   altta iki ince şerit kalıyor.
   ===================================================================== */
#mobilUst, #mobilAlt { display: none; }

/* Olcut sadece genislik olamaz: telefon yan cevrilince genislik 870
   pikseli buluyor ama yukseklik 400'e dusuyor, masaustu yerlesimi
   dikeyde hic sigmiyor. Ikisinden biri yeterse mobil duzene geciyoruz. */
@media (max-width: 720px), (max-height: 520px) {

    /* --- masaüstüne ait olanlar --- */
    #logo, #istatistik, #kitaChart, #sifirlaBtn, #profilBtn,
    #crosshairX, #crosshairY { display: none !important; }
    /* Koordinat ve artı işareti fareyle çalışıyordu, dokunmatikte
       karşılığı yok. Kıta halkası da gizli; aynı bilgi istatistikler
       sayfasındaki çubuklarda zaten var. */

    /* --- üst şerit --- */
    #mobilUst {
        display: flex;
        position: fixed;
        top: 0; left: 0; right: 0;
        z-index: 1100;
        align-items: baseline;
        justify-content: space-between;
        gap: 12px;
        padding: calc(12px + env(safe-area-inset-top)) 16px 12px;
        background: linear-gradient(180deg, rgba(var(--zemin-rgb), 0.92) 0%, rgba(var(--zemin-rgb), 0) 100%);
        pointer-events: none;
    }
    #mobilLogo {
        font-family: "Black Ops One", sans-serif;
        font-size: 17px;
        letter-spacing: 2px;
        color: var(--kehribar-yazi);
    }
    #mobilSayac {
        font-size: 12px;
        color: var(--yazi-soluk);
        white-space: nowrap;
    }

    /* --- alt şerit --- */
    #mobilAlt {
        display: flex;
        position: fixed;
        left: 0; right: 0; bottom: 0;
        z-index: 1100;
        background: rgba(var(--zemin-rgb), 0.94);
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
        border-top: 1px solid var(--kil);
        padding-bottom: env(safe-area-inset-bottom);
    }
    /* Dört düğme oldu; yazılar dar ekranda taşmasın */
    #mobilAlt button {
        flex: 1;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        background: none;
        border: none;
        border-right: 1px solid var(--kil);
        color: var(--yazi-soluk);
        font-family: inherit;
        font-size: 12px;
        padding: 15px 4px;
        cursor: pointer;
    }
    #mobilAlt button:last-child { border-right: none; }
    #mobilAlt button.secili { color: var(--kehribar-yazi); }
    /* Bekleyen arkadaslik istegi varsa Profil'in yaninda kucuk bir nokta */
    #mobilAlt button.rozetli::after {
        content: "";
        display: inline-block;
        width: 6px; height: 6px;
        margin-left: 6px;
        border-radius: 50%;
        background: var(--kehribar);
        vertical-align: middle;
    }

    /* --- bütün paneller: alttan açılan tam sayfa --- */
    #panel, #sehirDetayPanel, #istatistikPanel, #profilKart, #ayarlarPanel, #gecmisPanel {
        position: fixed;
        left: 0; right: 0; bottom: 0;
        top: auto;
        width: auto;
        max-width: none;
        height: auto;
        max-height: 82vh;
        max-height: 82dvh;
        border-radius: 10px 10px 0 0;
        border: 1px solid var(--kil);
        border-bottom: none;
        transform: translateY(100%);
        transition: transform 0.32s ease;
        overflow-y: auto;
        padding: 22px 18px calc(70px + env(safe-area-inset-bottom));
        box-sizing: border-box;
    }
    #panel.acik, #sehirDetayPanel.acik, #istatistikPanel.acik,
    #profilKart.acik, #ayarlarPanel.acik, #gecmisPanel.acik {
        transform: translateY(0);
        pointer-events: auto;
    }

    /* Haritayı sola iten efekt telefonda küreyi ekran dışına atıyordu */
    #harita.itili { transform: none; }

    /* Kapat düğmeleri parmakla basılacak kadar büyük olsun */
    #gecmisPanel { position: fixed; }
    #gecmisKapat {
        display: block;
        position: absolute;
        background: none;
        border: none;
        color: var(--yazi-soluk);
        cursor: pointer;
        z-index: 3;
    }
    #panelKapat, #sehirDetayKapat, #istatistikKapat, #profilKapat, #gecmisKapat {
        top: 14px; right: 14px;
        font-size: 30px;
        padding: 6px 10px;
    }

    /* Şehir kartları tek sütun sığmıyor, iki sütun kalsın ama daha dar */
    #sehirListe { gap: 10px; }

    /* Arama kutusu: masaüstünde ortada duran dar bir kutu, telefonda
       üst şeridin altında tam genişlik. */
    .arama-kutu {
        top: calc(52px + env(safe-area-inset-top));
        left: 10px; right: 10px;
        width: auto;
        max-width: none;
        transform: none;
    }
    .arama-sonuc { max-height: 52vh; max-height: 52dvh; }
}

/* --- "ana ekrana ekle" ipucu (yalnız iPhone'da, bir kez) ----------- */
#ekleIpucu {
    display: none;
    position: fixed;
    left: 12px; right: 12px;
    bottom: calc(64px + env(safe-area-inset-bottom));
    z-index: 1200;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 8px;
    background: rgba(var(--zemin-rgb), 0.94);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid var(--kil-guclu);
    color: var(--yazi);
    font-size: 13px;
    line-height: 1.45;
}
#ekleIpucu.acik { display: flex; }
#ekleIpucu b { color: var(--kehribar-yazi); font-weight: 600; }
#ipucuKapat {
    background: none; border: none; color: var(--yazi-soluk);
    font-size: 22px; line-height: 1; cursor: pointer; padding: 0 4px;
}

/* --- giriş ekranı: giriş / kayıt / kullanıcı adı seçme kipleri ------
   Aynı kutu üç iş görüyor. Hangi kipteysek gereksiz alanları
   gizliyoruz; ayrı sayfa açmaktansa bu daha sade. */
#girisKullanici, #adSecimAlani { display: none; }
.giris-kutu.kayit #girisKullanici { display: block; }
.giris-kutu.kayit #girisBtn,
.giris-kutu.kayit #sifreUnuttum { display: none; }
.giris-kutu:not(.kayit) #kayitBtn { display: none; }

.giris-kutu.adsecim #girisEmail,
.giris-kutu.adsecim #girisSifre,
.giris-kutu.adsecim #girisKullanici,
.giris-kutu.adsecim #girisBtn,
.giris-kutu.adsecim #kayitBtn,
.giris-kutu.adsecim #modDegistir,
.giris-kutu.adsecim #sifreUnuttum { display: none; }
.giris-kutu.adsecim #adSecimAlani { display: flex; flex-direction: column; gap: 12px; }

/* kurtarma kipi kayıt alanlarını da kapatsın */
.giris-kutu.kurtarma #girisKullanici,
.giris-kutu.kurtarma #modDegistir,
.giris-kutu.kurtarma #adSecimAlani { display: none; }

/* --- sifre sifirlama adimi ---
   Ekranda SADECE e-posta kutusu ve "Baglanti Gonder" kalir. Sifre
   kutusunun ve "Giris Yap"in gorunur kalmasi kafa karistiriyordu. */
#sifirlamaAlani { display: none; flex-direction: column; gap: 12px; }
.giris-kutu.sifirlama #sifirlamaAlani { display: flex; }
.giris-kutu.sifirlama #girisSifre,
.giris-kutu.sifirlama #girisKullanici,
.giris-kutu.sifirlama #girisBtn,
.giris-kutu.sifirlama #kayitBtn,
.giris-kutu.sifirlama #modDegistir,
.giris-kutu.sifirlama #sifreUnuttum,
.giris-kutu.sifirlama #adSecimAlani,
.giris-kutu.sifirlama #yeniSifreAlani { display: none; }

/* =====================================================================
   AVATAR
   Fotoğraf koymayanda silüet görünsün, boş daire kalmasın. Silüet ayrı
   bir dosya değil, CSS'in içine gömülü küçük bir çizim — indirilecek
   bir şey yok, temayla aynı renkte.

   Avatar HER YERDE küçük. Büyütülemiyor, tıklanınca açılmıyor. Bu
   bilinçli: yüzlere bakmak için gezilen bir yer olmasın diye.
   ===================================================================== */
.avatar {
    flex: 0 0 auto;
    border-radius: 50%;
    background-color: rgba(var(--kehribar-rgb), 0.10);
    border: 1px solid rgba(var(--kehribar-rgb), 0.35);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    box-sizing: border-box;
    overflow: hidden;
    pointer-events: none;      /* tıklanamaz, büyütülemez */
}
/* Silüet: fotoğraf yokken. Fotoğraf gelince .dolu sınıfı bunu kapatıyor. */
.avatar:not(.dolu) {
    background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'>\
<circle cx='20' cy='15' r='6.6' fill='%23E9A23B' fill-opacity='0.45'/>\
<path d='M6.5 37c0-7.4 6-13.4 13.5-13.4S33.5 29.6 33.5 37z' fill='%23E9A23B' fill-opacity='0.45'/>\
</svg>");
    background-size: 100% 100%;
}
.avatar-kucuk  { width: 26px; height: 26px; }
.avatar-orta   { width: 38px; height: 38px; }
.avatar-buyuk  { width: 76px; height: 76px; }

/* --- profil kartındaki fotoğraf bölümü --- */
#profilFotolar {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 22px;
}
#profilFotoIsler { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
#profilFotoEkle {
    /* Eski kural 80x80 kesikli daireydi (fotograf ekleme yeri o zaman
       galeriydi). Onun olculerini burada sifirliyoruz. */
    width: auto; height: auto;
    border-radius: 5px;
    justify-content: flex-start;
    display: inline-block;
    padding: 8px 14px;
    border-radius: 5px;
    border: 1px solid var(--kil);
    background: var(--vurgu);
    color: var(--yazi);
    font-size: 13px;
    cursor: pointer;
}
#profilFotoEkle:hover { background: var(--vurgu-guclu); }
#profilFotoDurum { font-size: 12px; color: var(--yazi-soluk); }

/* --- misafir panelinin üst satırı: avatar + kullanıcı adı --------- */
.gezgin-ust {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}
.gezgin-kim { font-size: 16px; font-weight: 600; color: var(--yazi); }

/* --- listelerde avatar hizalaması --------------------------------- */
.arama-satir.kisi {
    display: flex;
    align-items: center;
    gap: 10px;
}
.arama-metin { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.arkadas-satir { display: flex; align-items: center; gap: 10px; }
.foto-sahip { display: flex; align-items: center; gap: 6px; }
.foto-sahip .avatar { width: 18px; height: 18px; }

/* --- açık/kapalı anahtarı ------------------------------------------ */
.anahtar-satir {
    display: flex !important;
    align-items: flex-start;
    gap: 12px;
    cursor: pointer;
    margin: 0 !important;
    color: var(--yazi) !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    font-size: 14px !important;
}
/* Gorunmez onay kutusu. Genislik SART: .profil-bolum input kurali
   buna da "width:100%" veriyordu, mutlak konumlu oldugu icin sol
   bosluktan baslayip kartin 32 piksel disina tasiyordu. Gorunmedigi
   icin kimse fark etmiyor, tarayici ise "icerik tasiyor" deyip profil
   kartinin altina yatay kaydirma cubugu koyuyordu. */
.anahtar-satir input {
    position: absolute; opacity: 0; pointer-events: none;
    width: 1px; height: 1px;
}
.anahtar-gorsel {
    flex: 0 0 auto;
    width: 38px; height: 22px;
    border-radius: 11px;
    background: rgba(var(--vurgu-rgb), 0.06);
    border: 1px solid var(--kil);
    position: relative;
    transition: background 0.2s, border-color 0.2s;
    margin-top: 1px;
}
.anahtar-gorsel::after {
    content: "";
    position: absolute;
    top: 2px; left: 2px;
    width: 16px; height: 16px;
    border-radius: 50%;
    background: var(--yazi-soluk);
    transition: transform 0.2s, background 0.2s;
}
.anahtar-satir input:checked + .anahtar-gorsel {
    background: rgba(var(--kehribar-rgb), 0.18);
    border-color: rgba(var(--kehribar-rgb), 0.55);
}
.anahtar-satir input:checked + .anahtar-gorsel::after {
    transform: translateX(16px);
    background: var(--kehribar);
}
.anahtar-yazi { display: flex; flex-direction: column; gap: 3px; }
.anahtar-yazi b { font-weight: 600; }
.anahtar-yazi em {
    font-style: normal;
    font-size: 12px;
    color: var(--yazi-soluk);
    line-height: 1.45;
}

/* --- kilitli profil uyarısı --------------------------------------- */
.gezgin-kilit {
    margin: 18px 0;
    padding: 16px;
    border: 1px solid var(--kil);
    border-radius: 6px;
    background: var(--vurgu);
    color: var(--yazi-soluk);
    font-size: 13px;
    line-height: 1.55;
}

/* --- gidilen tarih (ay + yıl) -------------------------------------- */
.tarih-satir { display: flex; align-items: center; gap: 8px; }
.tarih-satir select {
    background: var(--vurgu);
    border: 1px solid var(--kil);
    border-radius: 5px;
    color: var(--yazi);
    font-family: inherit;
    font-size: 14px;
    padding: 9px 10px;
    cursor: pointer;
}
.tarih-satir select:focus { border-color: var(--kil-guclu); outline: none; }
/* Acilan listeyi isletim sistemi ciziyor ve varsayilani BEYAZ zemin.
   Bizim yazi rengimiz acik oldugu icin beyazin uzerinde okunmuyordu.
   color-scheme tarayiciya "bu koyu bir arayuz" diyor, acilan listeyi
   de koyu ciziyor; option kurallari da onu desteklemeyen tarayicilar
   icin. */
.tarih-satir select { color-scheme: dark; }
.tarih-satir select option {
    background: var(--katman);
    color: var(--yazi);
}
.tarih-not { font-size: 12px; color: var(--yazi-soluk); margin-top: 7px; }

/* --- gezi kaydı listesi -------------------------------------------- */
.kayit-satir {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    padding: 9px 0;
    border-bottom: 1px solid var(--kil);
    font-size: 14px;
}
.kayit-satir:last-child { border-bottom: none; }
.kayit-yer { color: var(--yazi); }
.kayit-yer em { font-style: normal; color: var(--yazi-soluk); }
.kayit-tarih { color: var(--kehribar-yazi); font-size: 12px; white-space: nowrap; }
.kayit-tarih.yok { color: var(--yazi-soluk); }

/* --- burayı gezenler ----------------------------------------------- */
.suzgec { display: flex; gap: 6px; margin-bottom: 12px; flex-wrap: wrap; }
.suzgec button {
    background: var(--vurgu);
    border: 1px solid var(--kil);
    border-radius: 20px;
    color: var(--yazi-soluk);
    font-family: inherit;
    font-size: 12px;
    padding: 6px 13px;
    cursor: pointer;
}
.suzgec button:hover { background: var(--vurgu-guclu); }
.suzgec button.secili {
    background: rgba(var(--kehribar-rgb), 0.12);
    border-color: rgba(var(--kehribar-rgb), 0.45);
    color: var(--kehribar-yazi);
}
.gezen-satir {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 0;
    border-bottom: 1px solid var(--kil);
    cursor: pointer;
    font-size: 14px;
}
.gezen-satir:last-child { border-bottom: none; }
.gezen-satir:hover .gezen-ad { color: var(--kehribar-yazi); }
.gezen-ad { flex: 1; min-width: 0; color: var(--yazi); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gezen-ad em { font-style: normal; color: var(--yazi-soluk); }
.gezen-tarih { color: var(--kehribar-yazi); font-size: 12px; white-space: nowrap; }
.gezen-bos { color: var(--yazi-soluk); font-size: 13px; padding: 6px 0; line-height: 1.5; }

/* --- gezgin işlemleri (engelle / şikayet) -------------------------- */
.gezgin-islem { display: flex; gap: 16px; margin: 4px 0 18px; }

/* --- şikayet penceresi --------------------------------------------- */
#sikayetKutu, #silKutu {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 4000;
    background: rgba(var(--zemin-rgb), 0.72);
    align-items: center;
    justify-content: center;
    padding: 20px;
}
#sikayetKutu.acik, #silKutu.acik { display: flex; }
.sikayet-ic {
    width: 380px;
    max-width: 100%;
    background: var(--yuzey-koyu);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid var(--kil);
    border-radius: 8px;
    padding: 24px;
    box-sizing: border-box;
}
.sikayet-ic h3 {
    margin: 0 0 6px;
    font-size: 17px;
    font-weight: 600;
    color: var(--yazi);
}
.sikayet-not { margin: 0 0 14px; font-size: 13px; color: var(--yazi-soluk); }
#sikayetSebepler { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
#sikayetSebepler button {
    text-align: left;
    background: var(--vurgu);
    border: 1px solid var(--kil);
    border-radius: 5px;
    color: var(--yazi);
    font-family: inherit;
    font-size: 14px;
    padding: 10px 12px;
    cursor: pointer;
}
#sikayetSebepler button:hover { background: var(--vurgu-guclu); }
#sikayetSebepler button.secili {
    background: rgba(var(--kehribar-rgb), 0.12);
    border-color: rgba(var(--kehribar-rgb), 0.45);
    color: var(--kehribar-yazi);
}
#sikayetAciklama {
    width: 100%;
    box-sizing: border-box;
    min-height: 70px;
    background: var(--vurgu);
    border: 1px solid var(--kil);
    border-radius: 5px;
    color: var(--yazi);
    font-family: inherit;
    font-size: 14px;
    padding: 10px;
    resize: vertical;
}
#sikayetDurum { font-size: 12px; color: var(--yazi-soluk); margin-top: 8px; min-height: 16px; }
.sikayet-dugmeler { display: flex; align-items: center; justify-content: flex-end; gap: 14px; margin-top: 6px; }

/* --- fotoğraf üzerindeki şikayet --- */
.foto-sikayet {
    position: absolute;
    left: 6px; top: 6px;
    background: rgba(var(--zemin-rgb), 0.75);
    border: 1px solid var(--kil-guclu);
    border-radius: 4px;
    color: var(--yazi-soluk);
    font-family: inherit;
    font-size: 11px;
    padding: 3px 7px;
    cursor: pointer;
    z-index: 4;
}
.foto-sikayet:hover { color: var(--yazi); }

/* --- engellediklerin listesi --- */
.engel-satir {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 0; border-bottom: 1px solid var(--kil); font-size: 14px;
}
.engel-satir:last-child { border-bottom: none; }
.engel-ad { flex: 1; color: var(--yazi); }

/* --- hesap silme penceresi ----------------------------------------- */
.sil-liste {
    margin: 0 0 14px;
    padding-left: 18px;
    font-size: 13px;
    line-height: 1.6;
    color: var(--yazi-soluk);
}
.sil-uyari {
    margin: 0 0 16px;
    font-size: 12.5px;
    line-height: 1.6;
    color: var(--uyari);
    background: rgba(var(--tehlike-rgb), 0.16);
    border: 1px solid rgba(var(--tehlike-rgb), 0.32);
    border-radius: 5px;
    padding: 10px 12px;
}
.sil-uyari b { color: var(--uyari); }
.sil-etiket {
    display: block;
    font-size: 11px;
    letter-spacing: 0.08em;
    color: var(--yazi-soluk);
    margin-bottom: 6px;
    text-transform: uppercase;
}
#silOnay {
    width: 100%;
    box-sizing: border-box;
    background: var(--vurgu);
    border: 1px solid var(--kil);
    border-radius: 5px;
    color: var(--yazi);
    font-family: inherit;
    font-size: 14px;
    padding: 10px;
}
#silDurum { font-size: 12px; color: var(--uyari); margin-top: 8px; min-height: 16px; }
.sil-btn { background: var(--tehlike); color: var(--uyari); border-color: rgba(var(--tehlike-rgb), 0.5); }
.sil-btn:hover:not(:disabled) { background: var(--tehlike); }
.sil-btn:disabled { opacity: 0.4; cursor: default; }

/* --- yasal bağlantılar (giriş ekranı ve profil kartı) --------------- */
.yasal {
    display: flex; justify-content: center; align-items: center; gap: 8px;
    margin-top: 18px; font-size: 12px; color: var(--yazi-soluk);
}
.yasal a { color: var(--yazi-soluk); text-decoration: none; border-bottom: 1px solid var(--kil-guclu); }
.yasal a:hover { color: var(--yazi); }
#profilKart .yasal { margin: 14px 0 4px; }

/* --- harita üzerindeki küçük yasal bağlantı ------------------------- */
/* Masaüstünde sağ altta; sıfırlama düğmesi orada gizli olduğu için yer
   boş. Sağdan açılan panellerin altında kalıyor (z-index 900) -- panel
   açıkken zaten haritaya bakmıyorsun. */
#altBilgi {
    position: fixed;
    right: 20px; bottom: 16px;
    z-index: 900;
    display: flex; align-items: center; gap: 7px;
    font-size: 11px;
    color: rgba(var(--kil-rgb), 0.30);
    letter-spacing: 0.02em;
}
#altBilgi a { color: inherit; text-decoration: none; }
#altBilgi a:hover { color: var(--yazi-soluk); }

@media (max-width: 720px), (max-height: 520px) {
    /* Telefonda alt şerit var; bağlantıyı onun hemen üstüne, ortaya
       alıyoruz. Şeridin yüksekliği ~44px, güvenli alan payıyla birlikte. */
    #altBilgi {
        right: 0; left: 0;
        bottom: calc(52px + env(safe-area-inset-bottom));
        justify-content: center;
        font-size: 10.5px;
        color: rgba(var(--kil-rgb), 0.26);
    }
}

/* --- iOS'un kendiliğinden yakınlaştırması ---------------------------
   Safari, yazı boyutu 16 pikselden KÜÇÜK bir yazı alanına dokunulunca
   sayfayı yakınlaştırıyor. Apple bunu bilerek yapıyor: küçük yazıyı
   okutmaya zorlamamak için. Ama klavye kapanınca zoom geri çıkmıyor --
   sayfa yakınlaşmış kalıyor, sağ tarafı ekran dışına taşıyor ve
   kullanıcı elle geri açana kadar bütün paneller kesik görünüyor.

   Tek çözümü alanları 16 piksele çıkarmak. Görünüm meta etiketine
   "user-scalable=no" yazmak İŞE YARAMAZ; Safari iOS 10'dan beri onu
   kasten yok sayıyor (görme zorluğu olan kullanıcıyı korumak için).

   !important gerekiyor çünkü alanların çoğu kimliğiyle (#girisEmail
   gibi) boyutlandırılmış; kimlik seçicisi bu kuraldan güçlü.
   Masaüstünü etkilemiyor, sadece dokunmatik ekranlarda. */
@media (max-width: 720px), (max-height: 520px), (pointer: coarse) {
    input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
    textarea,
    select {
        font-size: 16px !important;
    }
}

/* --- açık panelin üstündeki harita: dokununca kapat ----------------- */
/* Telefonda paneller alttan açılıyor ve uzun listelerde kapatmak için
   ta yukarı kaydırıp çarpıya basmak gerekiyordu. Panelin üstünde kalan
   harita alanı artık kapatma alanı. Örtü sadece telefonda açılıyor;
   masaüstünde paneller yanda duruyor ve küre kullanılabilir kalmalı. */
@media (max-width: 720px), (max-height: 520px) {
    #ortu { background: rgba(var(--zemin-rgb), 0.45); }
}

/* --- ayarlar ekranı ------------------------------------------------- */
#ayarlarAc {
    position: absolute; top: 19px; right: 54px;
    background: none; border: none; color: var(--yazi-soluk);
    cursor: pointer; padding: 2px; line-height: 0;
}
#ayarlarAc:hover { color: var(--kehribar-yazi); }

/* Carkla capraz AYNI hizada olsun. Ikisi farkli sey: biri 19px'lik bir
   svg, oteki 24-30px'lik bir yazi karakteri. Ayri ayri "top" vermek
   tutturmuyordu -- ozellikle telefonda capraz buyuyup asagi kayiyordu.
   Ikisini de ayni olcude bir kutuya alip icerigi ortaliyoruz; boylece
   yazi boyu degisse de hizalari bozulmuyor.
   Iki kimlikli secici: asagidaki medya sorgusundaki tek kimlikli
   kurallari yenmesi icin. */
#profilKart > #profilKapat,
#profilKart > #ayarlarAc {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    line-height: 1;
    top: 16px;
}
#profilKart > #profilKapat { right: 16px; font-size: 26px; }
#profilKart > #ayarlarAc  { right: 56px; }

@media (max-width: 720px), (max-height: 520px) {
    #profilKart > #profilKapat,
    #profilKart > #ayarlarAc { top: 12px; }
    #profilKart > #profilKapat { right: 10px; font-size: 28px; }
    #profilKart > #ayarlarAc  { right: 52px; }
}
#ayarlarGeri {
    display: inline-block; margin-bottom: 4px; padding: 0;
    font-size: 13px;
}
h2.ayar-baslik {
    margin: 0 0 22px; font-size: 22px; font-weight: 600; color: var(--yazi);
}
.ayar-satir {
    display: flex; justify-content: space-between; align-items: baseline;
    gap: 12px; font-size: 14px; color: var(--yazi-soluk);
    padding: 10px 12px; border-radius: 8px; background: var(--zemin);
}
.ayar-satir b {
    color: var(--yazi); font-weight: 500; word-break: break-all; text-align: right;
}
.ayar-durum { font-size: 12.5px; color: var(--yazi-soluk); min-height: 16px; margin-top: 8px; }
.ayar-durum.hata { color: var(--uyari); }
#yeniSifre1 { margin-bottom: 8px; }
#yeniSifre2 { margin-bottom: 10px; }
#sifreDegistir { width: 100%; }
#ayarlarPanel .yasal { justify-content: flex-start; margin-top: 0; }
#engelListe:empty { display: none; }

/* =====================================================================
   PROFİL EKRANI — sabit üst + kayan sekme gövdesi
   Üstteki kimlik ve sayılar kaymıyor; kayan tek yer #profilIcerik.
   Aynı iskelet başkasının profili için de kullanılıyor.
   ===================================================================== */
#profilKart {
    display: flex;
    flex-direction: column;
    overflow: hidden;                 /* kayan tek yer #profilIcerik */
    padding: 26px 0 0;
}
#profilUst, #profilFavoriler, #profilUstEk, #profilSekmeler {
    flex: 0 0 auto;
    padding-left: 26px;
    padding-right: 26px;
}
#profilIcerik {
    flex: 1 1 auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 4px 26px 26px;
}

/* Kapat ve çark düğmeleri üstte mutlak duruyor. Sağdan yeri SADECE
   kullanıcı adı satırı bırakıyor; altındaki iki satır düğmelerin
   hizasının altında kaldığı için tüm genişliği kullanabiliyor. */
#profilUst { display: flex; align-items: center; gap: 14px; }
#profilKimlik { min-width: 0; flex: 1 1 auto; }
#profilAd {
    font-family: "Space Grotesk", -apple-system, "Segoe UI", sans-serif;
    font-size: 19px; font-weight: 600; letter-spacing: 0.3px;
    color: var(--yazi);
    padding-right: 66px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#profilAltSatir {
    font-size: 13px; color: var(--yazi-soluk); margin-top: 4px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* --- sayılar: kutu değil, tek cümle --- */
#profilSayiYazi {
    display: flex; flex-wrap: wrap; align-items: baseline;
    gap: 0 10px;
    margin-top: 6px;
    font-size: 12.5px;
    color: var(--yazi-soluk);
}
.sayi-parca {
    position: relative;
    padding: 2px 0;
    background: none; border: none; font-family: inherit; font-size: inherit;
    color: var(--yazi-soluk);
    white-space: nowrap;
}
/* Ayırıcı nokta parçanın kendisinden geliyor: satır sarınca alt satırın
   başında öksüz bir "·" kalmıyor. */
.sayi-parca + .sayi-parca::before {
    content: "·"; position: absolute; left: -7px; opacity: 0.55;
}
.sayi-parca b { color: var(--yazi); font-weight: 600; }
button.sayi-baglanti {
    cursor: pointer;
    border-bottom: 1px solid var(--kil-guclu);
    padding-bottom: 1px;
}
button.sayi-baglanti:hover { color: var(--yazi); border-bottom-color: var(--yazi-soluk); }
button.sayi-baglanti.secili { color: var(--kehribar-yazi); border-bottom-color: var(--kehribar-yazi); }
button.sayi-baglanti.secili b { color: var(--kehribar-yazi); }
button.sayi-baglanti.bekleyen::after {
    content: ""; display: inline-block; margin-left: 5px;
    width: 6px; height: 6px; border-radius: 50%; background: var(--kehribar);
    vertical-align: middle;
}

/* --- favoriler: en fazla 6 şehir, üst kısımda --- */
#profilFavoriler {
    display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
    margin-top: 14px;
}
.favori-yildiz { color: var(--kehribar-yazi); font-size: 12px; margin-right: 1px; }
.favori-etiket {
    background: rgba(var(--kil-rgb), 0.05);
    border: 1px solid var(--kil);
    border-radius: 20px;
    color: var(--yazi);
    font-family: inherit; font-size: 12px;
    padding: 4px 11px;
    cursor: pointer;
    max-width: 46%;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.favori-etiket:hover { border-color: var(--kehribar-yazi); color: var(--kehribar-yazi); }

/* [hidden] varsayilan olarak display:none demek, ama flex/grid kuralları
   onu eziyordu: başkasının profilinde BENİM arkadaş sayım görünüyordu.
   Bir kez oldu. */
[hidden] { display: none !important; }

#profilUstEk:empty { display: none; }
#profilUstEk { margin-top: 14px; }
#profilUstEk .arkadas-kutu { margin: 0; }
#profilUstEk .gezgin-islem { margin: 10px 0 0; }
#kullaniciAdiBolum .kullanici-adi-not { margin-bottom: 8px; }

/* --- sekme şeridi --- */
#profilSekmeler {
    display: flex; gap: 0;
    margin-top: 18px;
    border-bottom: 1px solid var(--kil);
    overflow-x: auto;
    scrollbar-width: none;
}
#profilSekmeler::-webkit-scrollbar { display: none; }
.sekme-btn {
    flex: 0 0 auto;
    background: none; border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    color: var(--yazi-soluk);
    font-family: inherit; font-size: 12px; letter-spacing: 0.01em;
    padding: 9px 7px; cursor: pointer; white-space: nowrap;
}
.sekme-btn:hover  { color: var(--yazi); }
.sekme-btn.secili { color: var(--yazi); border-bottom-color: var(--kehribar-yazi); }

/* --- sekme gövdeleri --- */
.sekme-baslik {
    font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--yazi-soluk);
    margin: 20px 0 9px;
}
.sekme-govde > .sekme-baslik:first-child { margin-top: 12px; }
.sekme-not { font-size: 11.5px; color: var(--yazi-soluk); opacity: 0.8;
             margin: -3px 0 10px; line-height: 1.45; }
.sekme-govde .arkadas-bos { padding: 14px 0; }
.sekme-govde .gezgin-kilit { margin-top: 14px; }
.kayit-satir.tiklanir { cursor: pointer; }
.kayit-satir.tiklanir:hover { background: rgba(var(--kil-rgb), 0.05); }
.foto-kart.tiklanir { cursor: pointer; }
/* Profildeki fotoğraf ızgarasında "gizli" rozeti: hangisinin herkese
   açık olduğunu başka türlü göremiyordum. */
.foto-rozet {
    position: absolute; top: 6px; left: 6px;
    background: rgba(var(--zemin-rgb), 0.72);
    color: var(--yazi-soluk);
    font-size: 10px; padding: 2px 6px; border-radius: 4px;
    letter-spacing: 0.04em;
}

/* --- Ayarlar'a taşınan profil düzenleme --- */
#profilDuzenle #profilFotolar { margin-bottom: 14px; }
#profilDuzenle input[type="text"] { margin-bottom: 8px; }

@media (max-width: 720px), (max-height: 520px) {
    /* Telefonda da üst kısım sabit: panelin kendisi kaymıyor,
       içindeki sekme gövdesi kayıyor. */
    #profilKart {
        overflow: hidden;
        padding: 20px 0 0;
        height: 82vh; height: 82dvh;
    }
    #profilUst, #profilFavoriler, #profilUstEk, #profilSekmeler {
        padding-left: 18px; padding-right: 18px;
    }
    #profilAd { padding-right: 56px; }
    #profilIcerik { padding: 4px 18px calc(78px + env(safe-area-inset-bottom)); }
    #profilAd { font-size: 18px; }
    .sekme-btn { font-size: 12.5px; padding: 10px 9px; }
    #profilSayiYazi { font-size: 12.5px; }
    .favori-etiket { max-width: 44%; }
}

/* --- şehir kartındaki liste düğmeleri ------------------------------
   "Gitmek istiyorum" gittiğin şehirde hiç görünmüyor; favori ise
   gitmediğin şehirde kapalı duruyor (sebebi üstüne gelince yazıyor).
   Aynı kurallar sunucuda da var. */
#listeDugmeler {
    display: flex; gap: 8px;
    margin: 12px 0 0;
}
#listeDugmeler button {
    flex: 1 1 0;
    background: none;
    border: 1px solid var(--kil);
    border-radius: 6px;
    color: var(--yazi-soluk);
    font-family: inherit; font-size: 12.5px;
    padding: 9px 8px;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis;
}
#listeDugmeler button:hover:not(:disabled) { border-color: var(--kil-guclu); color: var(--yazi); }
#listeDugmeler button.aktif {
    border-color: var(--kehribar-yazi);
    color: var(--kehribar-yazi);
}
#listeDugmeler button:disabled { opacity: 0.38; cursor: default; }
#listeDurum { font-size: 11.5px; color: var(--uyari); margin-top: 7px; min-height: 15px; line-height: 1.4; }
#listeDurum:empty { min-height: 0; margin-top: 0; }
/* Düğmelerle altındaki uyarı kutusu birbirine yapışmasın */
#listeDugmeler + #listeDurum + #kilitUyari,
#listeDugmeler + #listeDurum + #kilitUyari + .detay-bolum { margin-top: 14px; }

/* --- şehir sayfasındaki yorumlar -----------------------------------
   Kişi başı şehir başına tek yorum; kimse kimseye cevap yazamıyor.
   Şehir sayfası sohbete dönmesin diye. */
#yorumBolum { display: none; }
#yorumListe { display: flex; flex-direction: column; gap: 10px; }
.yorum-kart {
    background: rgba(var(--kil-rgb), 0.035);
    border: 1px solid var(--kil);
    border-radius: 8px;
    padding: 11px 13px;
}
.yorum-kart.benim { border-color: rgba(var(--kehribar-rgb), 0.28); }
.yorum-kart.tiklanir { cursor: pointer; }
.yorum-kart.tiklanir:hover { border-color: var(--kil-guclu); }
.yorum-ust {
    display: flex; align-items: center; gap: 8px;
    font-size: 12px; color: var(--yazi-soluk);
    margin-bottom: 7px;
}
.yorum-ad { color: var(--yazi); }
.yorum-ad em { color: var(--yazi-soluk); font-style: normal; }
.yorum-ad.tiklanir { cursor: pointer; }
.yorum-ad.tiklanir:hover { color: var(--kehribar-yazi); }
.yorum-puan { color: var(--kehribar-yazi); font-size: 11px; letter-spacing: 1px; }
.yorum-sag { margin-left: auto; font-size: 11px; color: var(--yazi-soluk); opacity: 0.7; }
.yorum-sag .foto-sikayet { position: static; opacity: 1; }
.yorum-metin {
    margin: 0;
    font-size: 13px; line-height: 1.55;
    color: var(--yazi);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}
.sekme-govde .yorum-kart { margin-bottom: 0; }
.sekme-govde .yorum-kart + .yorum-kart { margin-top: 10px; }

/* --- notun herkese açık anahtarı --- */
#notBolum #notAnahtarSatir { margin-top: 10px !important; }
#notSayac, #yorumSayac { font-size: 10.5px; opacity: 0.65; margin-left: 5px; letter-spacing: 0; }
#notDurum { font-size: 11.5px; color: var(--uyari); margin-top: 8px; line-height: 1.4; }
#notDurum:empty { margin-top: 0; }

/* --- misafir kipi: üstteki şerit çakışıyordu ------------------------
   #misafirBar ile #mobilUst ikisi de z-index 1100 ve ikisi de üstte;
   bar logonun ve sayacın üstüne biniyordu. Ayrıca o sayaç SENİN
   sayılarını gösteriyor — başkasının haritasına bakarken yanıltıcı.
   Misafirdeyken ikisini de gizleyip yerini bara bırakıyoruz. */
body.misafirde #istatistik { display: none; }
.misafir-yazi { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@media (max-width: 720px), (max-height: 520px) {
    body.misafirde #mobilUst { display: none !important; }
    body.misafirde #misafirBar {
        top: 0; left: 0; right: 0;
        transform: none;
        justify-content: space-between;
        border-radius: 0 0 12px 12px;
        border-top: none;
        padding: calc(10px + env(safe-area-inset-top)) 14px 10px;
        font-size: 13px;
    }
    body.misafirde #misafirBar button { flex: 0 0 auto; }
}

/* =====================================================================
   KÜRE ALTI SAYAÇ (sadece telefon)
   Uygulamanın verdiği tek "puan" bu. Sağ üst köşede 12 punto gri
   duruyordu; küreyle alt şerit arasındaki boş alana, ortaya alındı.
   Kehribar kullanılmıyor — küreyle yarışmasın, iri olması yetiyor.
   ===================================================================== */
#kureSayac { display: none; }

@media (max-width: 720px), (max-height: 520px) {
    #kureSayac {
        display: flex;
        position: fixed;
        left: 0; right: 0;
        bottom: calc(74px + env(safe-area-inset-bottom));
        z-index: 900;
        justify-content: center;
        align-items: baseline;
        flex-wrap: wrap;
        gap: 2px 18px;
        background: none;
        border: none;
        padding: 6px 16px;
        font-family: inherit;
        font-size: 12px;
        color: var(--yazi-soluk);
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }
    .kure-sayac-parca { white-space: nowrap; }
    /* Ayırıcı nokta yok: yıldızlı gökyüzünün önünde toz gibi duruyordu,
       üstelik iri rakamla küçük yazının arasında hizası tutmuyordu.
       Boşluk zaten ayırıyor. */
    .kure-sayac-parca b {
        font-family: "Space Grotesk", -apple-system, "Segoe UI", sans-serif;
        font-size: 23px; font-weight: 600;
        color: var(--yazi);
        margin-right: 2px;
        transition: color 0.25s ease;
    }
    /* Yeni şehir işaretlenince sayı bir an parlasın. Ödül o sayı. */
    #kureSayac.parla b { animation: sayacParla 0.9s ease; }
    @keyframes sayacParla {
        0%   { color: var(--yazi); }
        25%  { color: var(--kehribar-yazi); text-shadow: 0 0 14px rgba(var(--kehribar-rgb), 0.55); }
        100% { color: var(--yazi); text-shadow: none; }
    }

    /* Aynı sayıyı iki yerde bağırmayalım: büyük sayaç varken üstteki
       küçük yazı gidiyor, logo kalıyor. */
    #mobilSayac { display: none; }

    /* Başkasının haritasındayken kendi sayın ortada durmasın. */
    body.misafirde #kureSayac { display: none; }

    /* Panel açıkken haritanın üstündeki mobilya görünmesin. "Son
       Gezdiklerin" paneli de z-index 900'deydi; eşitlikte HTML sırası
       kazandığı için sayaç panelin ÖNÜNDE çıkıp yazıya karışıyordu.
       Panelin katını yükseltiyoruz, ayrıca ikisini de gizliyoruz. */
    #gecmisPanel { z-index: 1001; }
    body.panelde #kureSayac,
    body.panelde #altBilgi { display: none !important; }

    /* Alt bilgi bağlantısı sayacın altında kalsın */
    #altBilgi { bottom: calc(52px + env(safe-area-inset-bottom)); }
}

/* Kısa ekran (telefon yan çevrilince): kürenin altında yer kalmıyor.
   Sayaç üst şeride çıkıyor, logonun yerini alıyor. */
@media (max-height: 520px) {
    #kureSayac { display: none !important; }
    #mobilLogo  { display: none; }
    #mobilSayac {
        display: block;
        font-family: "Space Grotesk", -apple-system, "Segoe UI", sans-serif;
        font-size: 17px;
        color: var(--yazi);
        letter-spacing: 0.2px;
    }
    #mobilUst { justify-content: flex-start; }
}

/* --- parmağın altındakinin adı (sadece telefon) ---------------------
   Masaüstünde imleçle çıkan ipucunun telefondaki karşılığı. Kalıcı bir
   yazı katmanı değil: bir seferde tek isim, o da parmak küredeyken. */
#kureEtiket {
    position: fixed;
    z-index: 950;
    transform: translate(-50%, -100%);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.14s ease;
    text-align: center;
    max-width: 70vw;
    overflow: hidden;
    text-overflow: ellipsis;
}
#kureEtiket.acik { opacity: 1; }

/* --- profil düğmesinde kullanıcı adı --------------------------------
   "PROFİL" yerine "@kullanıcı" yazıyor. Uzun adlar düğmeyi şişirmesin
   diye kesiliyor; harf aralığı da ada göre daraltıldı. */
#profilYazi {
    letter-spacing: 0.4px;
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* --- yasal metin paneli --------------------------------------------
   Aynı yüzey, aynı davranış: masaüstünde sağdan, telefonda alttan. */
#yasalPanel {
    position: fixed;
    top: 0; right: 0;
    height: 100vh; height: 100dvh;
    width: 560px;
    max-width: 92vw;
    background: var(--yuzey);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid var(--kil);
    border-radius: 6px;
    color: var(--yazi);
    transform: translateX(100%);
    transition: transform 0.35s ease;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    z-index: 10000;          /* giriş ekranının da üstünde açılabilmeli */
    padding: 26px 0 0;
    box-sizing: border-box;
    pointer-events: none;
}
#yasalPanel.acik { transform: translateX(0); pointer-events: auto; }
#yasalKapat {
    position: absolute; top: 20px; right: 20px;
    background: none; border: none; color: var(--yazi-soluk);
    font-size: 24px; cursor: pointer; z-index: 2;
}
#yasalGeri, #yasalPanel .ayar-baslik, #yasalDiller { flex: 0 0 auto; padding: 0 26px; }
#yasalGeri { display: block; text-align: left; font-size: 13px; margin-bottom: 6px; }
#yasalPanel .ayar-baslik { margin: 0 0 4px; padding-right: 54px; }
#yasalGovde {
    flex: 1 1 auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 4px 26px 30px;
    font-size: 14px;
    line-height: 1.7;
}
#yasalDiller { display: flex; gap: 8px; margin: 12px 0 6px; }
#yasalDiller button {
    background: none;
    border: 1px solid var(--kil);
    border-radius: 20px;
    color: var(--yazi-soluk);
    font-family: inherit; font-size: 12px;
    padding: 5px 13px; cursor: pointer;
}
#yasalDiller button.secili { border-color: var(--kehribar-yazi); color: var(--kehribar-yazi); }

/* Metnin kendi biçimi sayfadan gelmiyor (sadece gövdeyi alıyoruz),
   burada uygulamanın kendi renkleriyle kuruluyor. */
#yasalGovde h1 { font-size: 20px; font-weight: 600; margin: 8px 0 6px; }
#yasalGovde h2 {
    font-size: 15px; font-weight: 600; margin: 28px 0 8px;
    padding-top: 18px; border-top: 1px solid var(--kil);
}
#yasalGovde h3 { font-size: 13.5px; font-weight: 600; margin: 18px 0 6px; color: var(--kehribar-yazi); }
#yasalGovde p, #yasalGovde li { color: var(--yazi); }
#yasalGovde .tarih, #yasalGovde .soluk { color: var(--yazi-soluk); font-size: 13px; }
#yasalGovde a { color: var(--kehribar-yazi); }
#yasalGovde ul, #yasalGovde ol { padding-left: 20px; }
#yasalGovde .kutu {
    background: rgba(var(--kil-rgb), 0.04);
    border: 1px solid var(--kil);
    border-radius: 8px;
    padding: 14px 16px;
    margin: 16px 0;
}
#yasalGovde table { width: 100%; border-collapse: collapse; font-size: 13px; }
#yasalGovde th, #yasalGovde td {
    text-align: left; padding: 8px 10px;
    border-bottom: 1px solid var(--kil); vertical-align: top;
}
#yasalGovde th { color: var(--yazi-soluk); font-weight: 500; }

/* Bağlantı gibi görünen düğmeler (yasal metinlere giden) */
.yasal-bag {
    background: none; border: none; padding: 0;
    font-family: inherit; font-size: inherit;
    color: inherit; cursor: pointer;
    border-bottom: 1px solid var(--kil-guclu);
}
.yasal-bag:hover { color: var(--yazi); }
#altBilgi .yasal-bag { color: inherit; border-bottom: none; }
#altBilgi .yasal-bag:hover { color: var(--yazi-soluk); }

@media (max-width: 720px), (max-height: 520px) {
    #yasalPanel {
        left: 0; right: 0; bottom: 0; top: auto;
        width: auto; max-width: none;
        height: 88vh; height: 88dvh;
        border-radius: 10px 10px 0 0;
        border-bottom: none;
        transform: translateY(100%);
        padding: 20px 0 0;
    }
    #yasalPanel.acik { transform: translateY(0); }
    #yasalGeri, #yasalPanel .ayar-baslik, #yasalDiller { padding-left: 18px; padding-right: 18px; }
    #yasalGovde { padding: 4px 18px calc(30px + env(safe-area-inset-bottom)); }
    #yasalKapat { top: 14px; right: 14px; font-size: 30px; padding: 6px 10px; }
}

/* --- şehrin ortalama puanı ------------------------------------------
   Kim kaç verdi görünmüyor. Yıldızlar iki kat: altta gri beşlik, üstte
   kırpılmış kehribar beşlik. Yarım yıldız böyle çıkıyor — iki katta da
   aynı yazı olduğu için hizalama kendiliğinden tutuyor. */
#sehirPuanOzet {
    display: flex; align-items: center; gap: 9px;
    margin: -2px 0 14px;
    font-size: 13px;
    color: var(--yazi-soluk);
}
.yildiz-olcek { position: relative; display: inline-block; line-height: 1; }
.yildiz-bos { color: var(--bos); letter-spacing: 2px; font-size: 16px; }
.yildiz-dolu {
    position: absolute; top: 0; left: 0;
    overflow: hidden; white-space: nowrap;
    color: var(--kehribar-yazi); letter-spacing: 2px; font-size: 16px;
    pointer-events: none;
}
#puanOrtalama {
    font-family: "Space Grotesk", -apple-system, "Segoe UI", sans-serif;
    font-size: 17px; font-weight: 600; color: var(--yazi);
}
#puanOrtalama:empty { display: none; }
/* Üç kişiye ulaşmadıysa yıldız hiç gösterilmiyor, sadece kaç kişi olduğu */
#sehirPuanOzet.az .yildiz-olcek { display: none; }

/* =====================================================================
   HARITAYI PAYLAS
   ===================================================================== */

/* Masaustu: ustteki istatistik seridinin hemen altinda, ortada.
   (Serit pointer-events:none oldugu icin dugme onun altina aliniyor.) */
#paylasBtn {
    position: fixed;
    top: 78px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--katman);
    border: 1px solid rgba(var(--kehribar-rgb), 0.45);
    color: var(--kehribar-yazi);
    cursor: pointer;
    box-shadow: 0 6px 20px var(--golge);
    -webkit-tap-highlight-color: transparent;
}
#paylasBtn svg {
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
#paylasBtn:hover { border-color: var(--kehribar-yazi); }

/* Baskasinin haritasindayken kendi sayilarini paylasamaz. */
body.misafirde #paylasBtn,
body.panelde   #paylasBtn { display: none; }

@media (max-width: 720px), (max-height: 520px) {
    /* Telefonda buyuk sayacin yaninda, sag kenarda. */
    #paylasBtn {
        top: auto;
        left: auto;
        transform: none;
        right: 12px;
        bottom: calc(70px + env(safe-area-inset-bottom));
        width: 38px;
        height: 38px;
    }
    /* Sayacin yazisi dugmenin altina girmesin diye kenarlardan pay. */
    #kureSayac { padding-left: 58px; padding-right: 58px; }
}

#paylasPanel {
    position: fixed;
    inset: 0;
    z-index: 10001;
    background: rgba(var(--zemin-rgb), 0.82);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    overflow-y: auto;
}
#paylasPanel[hidden] { display: none !important; }

.paylas-ic {
    position: relative;
    width: 100%;
    max-width: 360px;
    background: var(--katman);
    border: 1px solid rgba(var(--kehribar-rgb), 0.28);
    border-radius: 18px;
    padding: 22px 20px 20px;
    text-align: center;
}
.paylas-ic h3 {
    margin: 0 0 16px;
    font-size: 17px;
    font-weight: 600;
    color: var(--yazi, var(--yazi));
}
#paylasKapat {
    position: absolute;
    top: 8px; right: 10px;
    background: none;
    border: none;
    color: var(--yazi-soluk, var(--yazi-silik));
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
}

#paylasSecim {
    display: flex;
    gap: 10px;
    margin-bottom: 16px;
}
.paylas-sec {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 6px;
    border-radius: 12px;
    background: none;
    border: 1px solid rgba(var(--kil-rgb), 0.35);
    color: var(--yazi, var(--yazi));
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}
.paylas-sec small {
    font-size: 11px;
    font-weight: 400;
    color: var(--yazi-soluk, var(--yazi-silik));
}
.paylas-sec.secili {
    border-color: var(--kehribar-yazi);
    color: var(--kehribar-yazi);
}
.paylas-sec.secili small { color: var(--kehribar-yazi); opacity: 0.8; }

#paylasOnizleme img {
    max-width: 100%;
    max-height: 46vh;
    border-radius: 12px;
    display: block;
    margin: 0 auto;
}
#paylasDurum {
    min-height: 18px;
    margin-top: 10px;
    font-size: 13px;
    color: var(--yazi-soluk, var(--yazi-silik));
}

#paylasEylem {
    display: flex;
    gap: 10px;
    margin-top: 14px;
}
#paylasEylem[hidden] { display: none !important; }
#paylasEylem button {
    flex: 1;
    padding: 12px 0;
    border-radius: 12px;
    background: none;
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
}
#paylasGonder {
    border: 1px solid var(--kehribar);
    color: var(--kehribar-yazi);
}
#paylasIndir {
    border: 1px solid rgba(var(--kil-rgb), 0.35);
    color: var(--yazi-soluk, var(--yazi-silik));
}
#paylasEylem button[hidden] { display: none !important; }

/* Acik temada sehir isigi. Isima "cevresinden daha parlak olmak"
   demek; acik zeminde beyazdan yukari cikamadigimiz icin klasik
   parilti islemiyor. Bunun yerine RENK DOYGUNLUGUYLA isiyor:
   doygun sicak bir hale, icinde acik bir cekirdek -- gunduz goru"len
   bir kor gibi. Disinda cok soluk bir golge var, acik karanin
   uzerinde de tutunabilsin diye. */
:root[data-tema="acik"] .sehir-isik i {
    background: radial-gradient(circle,
        rgba(255, 238, 196, 0.98)  0%,
        rgba(255, 150,  20, 0.92) 15%,
        rgba(233, 138,  20, 0.48) 34%,
        rgba(206, 110,  10, 0.20) 56%,
        rgba(110,  62,  10, 0.10) 70%,
        rgba(110,  62,  10, 0.00) 84%);
}
:root[data-tema="acik"] .sehir-isik.misafir i {
    background: radial-gradient(circle,
        rgba(226, 250, 255, 0.98)  0%,
        rgba( 26, 150, 178, 0.92) 15%,
        rgba( 20, 126, 150, 0.48) 34%,
        rgba( 16, 100, 120, 0.20) 56%,
        rgba(  8,  56,  70, 0.10) 70%,
        rgba(  8,  56,  70, 0.00) 84%);
}

/* Haritanin uzerinde, arkasinda panel OLMAYAN yazilar. Koyu temada
   uzayin uzerinde acik tonlulardi; acik temada zemin gokyuzu oldu ve
   gokyuzunun kenarlari koyu, ortasi parlak -- yani tek bir renk iki
   yerde birden tutmuyor. Cozum: acik kalsinlar ama altlarina yumusak
   bir golge; hem parlak mavide hem koyu lacivertte okunuyorlar. */
:root[data-tema="acik"] #altBilgi {
    color: rgba(255, 255, 255, 0.62);
    text-shadow: 0 1px 3px rgba(8, 20, 40, 0.55);
}
:root[data-tema="acik"] #altBilgi a:hover,
:root[data-tema="acik"] #altBilgi .yasal-bag:hover { color: #FFFFFF; }

:root[data-tema="acik"] #kureSayac {
    color: rgba(255, 255, 255, 0.78);
    text-shadow: 0 1px 3px rgba(8, 20, 40, 0.55);
}
:root[data-tema="acik"] #kureSayac b { color: #FFFFFF; }

/* Ayni sebeple paylas dugmesi de gokyuzunun uzerinde duruyor; kendi
   zemini var ama kenari gokyuzunde kaybolmasin. */
:root[data-tema="acik"] #paylasBtn {
    box-shadow: 0 4px 14px rgba(8, 20, 40, 0.28);
}

/* Paylasim panelinde tema secimi. Bicim secimiyle ayni gorunumde ama
   ayri satir: biri goruntunun sekli, digeri havasi. */
#paylasTemaSecim {
    display: flex;
    gap: 10px;
    margin-bottom: 16px;
}