/* =====================================================================
   Stüdyo dünya haritası (/sirketler). Türk oyunları haritasının (TurkOyunlari/Index, .tr-map) tasarımı:
   Sayılı kırmızı pin, altında etiket, dokununca stüdyo kutusu; ülke zemini yüzey rengi, stüdyolu ülke açık
   kırmızı, seçili ülke OG kırmızısı. Fark: Oval (Mollweide) dünya, yakınlaştırma ve kalabalık bölgede küme pini.
   og-kit değişkenleriyle çalışır, .ogk içinde kullanılır. Davranış: wwwroot/js/og-dunya-haritasi.js.
   ===================================================================== */

.wm { position: relative; }
.wm-stage {
    position: relative; width: 100%; aspect-ratio: 2 / 1;
    touch-action: pan-y; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent;
}
/* Yakınken tek parmak haritayı kaydırır; sayfa haritanın dışından kaydırılır */
.wm.is-zoomed .wm-stage { touch-action: none; cursor: grab; }
.wm.is-dragging .wm-stage { cursor: grabbing; }

/* ---- Harita çizimi: Okyanus ovali, enlem/boylam çizgileri, ülkeler (renk yalnız burada) ---- */
.wm-svg { position: absolute; inset: 0; display: block; width: 100%; height: 100%; overflow: hidden; }
.wm-sphere { fill: #dcdee8; }
.wm-grat { fill: none; stroke: rgba(15, 15, 26, .08); stroke-width: .6; vector-effect: non-scaling-stroke; }
.wm-rim { fill: none; stroke: rgba(15, 15, 26, .16); stroke-width: 1; vector-effect: non-scaling-stroke; }
.wm-countries path {
    fill: var(--k-surface); stroke: var(--k-paper); stroke-width: .6; stroke-linejoin: round;
    vector-effect: non-scaling-stroke; transition: fill .15s ease;
}
.wm-countries path.has-studios { fill: #f2b3b9; cursor: pointer; }
.wm-countries path.has-studios:hover, .wm-countries path.is-active { fill: var(--k-red); }
[data-theme="dark"] .wm-sphere { fill: #101018; }
[data-theme="dark"] .wm-grat { stroke: rgba(255, 255, 255, .06); }
[data-theme="dark"] .wm-rim { stroke: rgba(255, 255, 255, .14); }
[data-theme="dark"] .wm-countries path.has-studios { fill: #7a2b30; }
[data-theme="dark"] .wm-countries path.has-studios:hover, [data-theme="dark"] .wm-countries path.is-active { fill: var(--k-red); }

/* ---- Pinler (Türkiye haritasıyla aynı ölçü). overflow GÖRÜNÜR: Kenardaki pinin kutusu kırpılmasın ---- */
.wm-pins { position: absolute; inset: 0; pointer-events: none; }
.wm-pin { position: absolute; transform: translate(-50%, -50%); line-height: 1; pointer-events: auto; z-index: 1; }
.wm-pin.is-out, .wm-pin.is-merged { display: none; }
.wm-pin-btn { position: relative; display: block; border: 0; background: transparent; padding: 0; cursor: pointer; line-height: 1; font-family: inherit; }
.wm-dot {
    display: flex; align-items: center; justify-content: center; min-width: 1.5rem; height: 1.5rem; padding: 0 .35rem;
    background: var(--k-red); color: #fff; font-size: .78rem; font-weight: 700; border-radius: 1rem; border: 2px solid #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .4); transition: transform .15s ease;
}
/* Küme: Aynı kırmızı, etrafında hale (birkaç ülke tek pinde) */
.wm-pin--cluster .wm-dot { min-width: 1.85rem; height: 1.85rem; font-size: .82rem; box-shadow: 0 0 0 5px rgba(227, 10, 23, .22), 0 1px 4px rgba(0, 0, 0, .4); }
.wm-pin:hover .wm-dot, .wm-pin.is-open .wm-dot { transform: scale(1.2); }
.wm-pin-btn:focus-visible { outline: none; }
.wm-pin-btn:focus-visible .wm-dot { outline: 2px solid var(--k-text); outline-offset: 2px; }
.wm-label {
    position: absolute; left: 50%; top: calc(100% + 2px); transform: translateX(-50%); white-space: nowrap;
    font-size: .68rem; font-weight: 700; color: #0f0f1a; background: rgba(255, 255, 255, .88); padding: 0 .3rem; border-radius: 999px; pointer-events: none;
}
[data-theme="dark"] .wm-label { background: rgba(20, 20, 28, .85); color: #f1f2f7; }
/* Başka etiketle çakışan etiket gizlenir, üzerine gelince görünür (JS karar verir) */
.wm-pin.no-label .wm-label { display: none; }
.wm-pin.no-label:hover .wm-label, .wm-pin.no-label.is-open .wm-label { display: block; }

/* ---- Bilgi kutusu: Ülkedeki stüdyolar ve şehirleri; üst bölgede aşağı, kenarlarda içeri açılır ---- */
.wm-pop {
    position: absolute; left: 50%; bottom: calc(100% + 10px); transform: translateX(-50%); display: none; flex-direction: column;
    width: max-content; min-width: 11rem; max-width: 16rem; text-align: left; background: var(--k-surface); border: 1px solid var(--k-line);
    border-radius: 1rem; padding: .65rem .8rem; box-shadow: 0 .8rem 1.6rem rgba(0, 0, 0, .22); z-index: 5; cursor: auto;
}
/* Pin ile kutu arasındaki boşlukta fare üzerinden çıkmasın */
.wm-pop::before { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 12px; }
.wm-pin--down .wm-pop { bottom: auto; top: calc(100% + 10px); }
.wm-pin--down .wm-pop::before { top: auto; bottom: 100%; }
.wm-pin--left .wm-pop { left: -.5rem; transform: none; }
.wm-pin--right .wm-pop { left: auto; right: -.5rem; transform: none; }
.wm-pin:hover, .wm-pin.is-open { z-index: 6; }
.wm-pin:hover .wm-pop, .wm-pin.is-open .wm-pop { display: flex; }
.wm-pop-head { font-size: .84rem; color: var(--k-icon); margin-bottom: .3rem; display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; }
.wm-pop-count { font-size: .7rem; font-weight: 600; color: var(--k-muted); white-space: nowrap; }
/* ABD gibi kalabalık ülkelerde liste kayar (ince tema çubuğu) */
.wm-pop-list {
    display: flex; flex-direction: column; max-height: 13rem; overflow-y: auto; overscroll-behavior: contain;
    scrollbar-width: thin; scrollbar-color: var(--k-line) transparent;
}
.wm-pop-list::-webkit-scrollbar { width: 5px; }
.wm-pop-list::-webkit-scrollbar-button { display: none; }
.wm-pop-list::-webkit-scrollbar-thumb { background: var(--k-line); border-radius: 999px; }
.ogk .wm-pop-studio {
    display: flex; align-items: baseline; justify-content: space-between; gap: .7rem; font-size: .86rem; color: var(--k-text) !important;
    text-decoration: none !important; padding: .22rem 0; border-top: 1px solid var(--k-line);
}
.ogk .wm-pop-studio:first-child { border-top: 0; }
.ogk .wm-pop-studio:hover { color: var(--k-icon) !important; }
.wm-pop-studio small { flex-shrink: 0; max-width: 45%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .72rem; color: var(--k-muted); }

/* ---- Yakınlaştırma düğmeleri (ovalin dışındaki sağ üst köşe) ---- */
.wm-ctrl { position: absolute; right: .4rem; top: .4rem; display: flex; flex-direction: column; gap: .3rem; z-index: 7; }
.wm-ctrl[hidden] { display: none; }
.wm-ctrl button {
    width: 2.1rem; height: 2.1rem; display: flex; align-items: center; justify-content: center; padding: 0;
    border-radius: 999px; border: 1px solid var(--k-line); background: var(--k-surface); color: var(--k-text);
    font-size: .8rem; box-shadow: 0 .2rem .6rem rgba(0, 0, 0, .12); cursor: pointer; transition: color .15s ease;
}
.wm-ctrl button:hover:not(:disabled) { color: var(--k-icon); }
.wm-ctrl button:disabled { opacity: .4; cursor: default; }

@media (max-width: 575.98px) {
    .ogk-panel.wm-panel { padding-left: .8rem; padding-right: .8rem; }
    .wm-dot { min-width: 1.2rem; height: 1.2rem; font-size: .68rem; border-width: 1.5px; }
    .wm-pin--cluster .wm-dot { min-width: 1.45rem; height: 1.45rem; font-size: .7rem; box-shadow: 0 0 0 4px rgba(227, 10, 23, .22), 0 1px 4px rgba(0, 0, 0, .4); }
    .wm-label { font-size: .62rem; }
    .wm-pop { max-width: 14rem; }
    /* Dar ekranda oval bütün genişliği kaplar: Düğmeler haritanın altında, sağa yaslı */
    .wm-ctrl { position: static; flex-direction: row; justify-content: flex-end; margin-top: .5rem; }
    .wm-ctrl button { width: 2.2rem; height: 2.2rem; }
}
@media (prefers-reduced-motion: reduce) {
    .wm-countries path, .wm-dot, .wm-ctrl button { transition: none; }
}