/* roadmap.css — İRL Gezi Roadmap (2B ülke haritası overlay'i)
   Kaldırmak için: roadmap.js + roadmap.css + Simulation/Index.cshtml [ROADMAP] satırları. */
#rm-overlay {
    position: fixed;
    inset: 0;
    z-index: 2500;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(4, 7, 18, .72);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    opacity: 0;
    pointer-events: none;
    transition: opacity .28s ease;
}
#rm-overlay.is-on { opacity: 1; pointer-events: auto; }

#rm-panel {
    display: flex;
    flex-direction: column;
    width: min(92vw, 1080px);
    max-height: 90vh;
    padding: 16px 18px 14px;
    border-radius: 18px;
    background: linear-gradient(160deg, rgba(16, 22, 46, .96), rgba(9, 12, 28, .96));
    border: 1px solid rgba(120, 180, 255, .28);
    box-shadow: 0 24px 64px rgba(0, 0, 0, .6);
    transform: translateY(14px) scale(.98);
    transition: transform .28s ease;
}
#rm-overlay.is-on #rm-panel { transform: none; }

#rm-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
    color: #eaf6ff;
    font: 700 20px/1.2 system-ui, -apple-system, 'Segoe UI', sans-serif;
}
#rm-sub {
    font: 600 12px/1 system-ui;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(120, 180, 255, .12);
}
#rm-sub.rm-visited { color: #ffca8a; }
#rm-sub.rm-planned { color: #a9c4ff; }
#rm-close {
    margin-left: auto;
    width: 34px; height: 34px;
    border: 1px solid rgba(160, 200, 255, .3);
    border-radius: 10px;
    background: rgba(0, 0, 0, .3);
    color: #cfe0ff;
    font: 400 22px/1 system-ui;
    cursor: pointer;
}
#rm-close:hover { background: rgba(120, 180, 255, .2); }

#rm-map { flex: 1; min-height: 0; display: flex; }
.rm-svg { width: 100%; height: 100%; max-height: 74vh; display: block; }

/* Ülke şekli */
.rm-country { stroke-linejoin: round; }
.rm-country.rm-visited { fill: rgba(255, 157, 77, .16); stroke: #ffb26b; }
.rm-country.rm-planned { fill: rgba(95, 139, 255, .13); stroke: #8fb0ff; }

/* Rota ("yol") çizgisi */
.rm-route { stroke: #ffcf9a; stroke-linecap: round; fill: none; opacity: .92; }
.rm-route-p { stroke: #a9c4ff; }

/* Şehir pinleri */
.rm-pin { stroke: #06101c; }
.rm-city.rm-visited .rm-pin { fill: #4fe3ff; }
.rm-city.rm-planned .rm-pin { fill: rgba(10, 16, 38, .9); stroke: #9fb8ff; }

/* Etiketler */
.rm-name { fill: #eef6ff; font-family: system-ui, sans-serif; font-weight: 700; paint-order: stroke; stroke: rgba(4, 8, 20, .85); stroke-width: .12; }
.rm-date { fill: #9fb4d6; font-family: system-ui, sans-serif; font-weight: 600; paint-order: stroke; stroke: rgba(4, 8, 20, .8); stroke-width: .1; }

#rm-legend {
    display: flex;
    gap: 16px;
    justify-content: center;
    margin-top: 10px;
    color: #b8c6e6;
    font: 600 12px system-ui;
}
.rm-lg-v { color: #ffca8a; }
.rm-lg-p { color: #a9c4ff; }