/* Rota sayfası: harita, işaretçiler, durak listesi. Yalnızca durakları olan rota sayfalarında yüklenir. */
.route-section { margin-top: 2.5rem; max-width: 60rem; }
.route-section > h2 { font-size: clamp(1.5rem, 3vw, 2rem); margin-bottom: .75rem; }
.route-planner-map { width: 100%; height: 30rem; margin-top: 1rem; overflow: hidden; border: 1px solid var(--cizgi); background: var(--antrasit-derin); }
@media (max-width: 680px) { .route-planner-map { height: 24rem; } }
.route-map-status { margin: .6rem 0 1rem; color: var(--celik); font-size: .85rem; }
.route-map-retry { margin-left: .5rem; padding: .25rem .6rem; border: 1px solid var(--cizgi); border-radius: 999px; color: var(--sis); background: transparent; cursor: pointer; font: inherit; }
.route-map--markers-only { outline: 1px dashed var(--cizgi); outline-offset: -8px; }
.route-map-marker { display: grid !important; place-items: center; border: 0; background: transparent; }
.route-map-marker span { display: grid; place-items: center; width: 34px; height: 34px; border: 3px solid #fff; border-radius: 50%; box-shadow: 0 6px 16px rgb(0 0 0 / .5); color: #fff; background: #6f6f6f; font-size: .7rem; font-weight: 900; }
.route-map-marker--start span { background: #267a46; }
.route-map-marker--start-finish span { background: linear-gradient(135deg, #267a46 0 49%, #a00d0d 51% 100%); font-size: .58rem; }
.route-map-marker--finish span { background: #a00d0d; }
.route-map-marker--fuel span { background: #835d12; }
.route-map-marker--meal span { background: #8b3b13; }
.route-map-marker--scenic span { background: #1f6687; }
.route-map-marker--checkpoint span { background: #6b3c88; }
.route-map-marker--rest span { background: #375c8e; }
.route-planner-map .leaflet-popup-content-wrapper, .route-planner-map .leaflet-popup-tip { color: var(--sis); background: var(--antrasit); }
.route-planner-map .leaflet-popup-content { display: grid; gap: .3rem; line-height: 1.45; }
.route-planner-map .leaflet-popup-content strong { color: #fff; }
.route-planner-map .leaflet-popup-content em { color: var(--bordo-isik); font-style: normal; font-size: .75rem; font-weight: 700; }
.route-planner-map .leaflet-popup-content span, .route-planner-map .leaflet-popup-content small { color: var(--celik-acik); }
.route-planner-map .leaflet-popup-content p { margin: .25rem 0; }
.route-stats { display: flex; flex-wrap: wrap; gap: .5rem 2rem; margin: 1rem 0 0; }
.route-stats div { display: grid; }
.route-stats dt { color: var(--celik); font-size: .75rem; }
.route-stats dd { margin: 0; color: var(--beyaz); font-family: var(--display); font-size: 1.25rem; }
.route-stop-list { display: grid; gap: .75rem; margin-top: 1rem; }
.route-stop-list li { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); gap: .9rem; padding: 1rem; border: 1px solid var(--cizgi); background: var(--antrasit-derin); }
.route-stop-list__marker { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 50%; color: #fff; background: #375c8e; font-size: .75rem; font-weight: 800; }
.route-stop-list__marker--start { background: #267a46; }
.route-stop-list__marker--finish { background: #a00d0d; }
.route-stop-list__marker--fuel { background: #835d12; }
.route-stop-list__marker--meal { background: #8b3b13; }
.route-stop-list__marker--scenic { background: #1f6687; }
.route-stop-list__marker--checkpoint { background: #6b3c88; }
.route-stop-list__heading { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .75rem; }
.route-stop-list__heading em { padding: .15rem .55rem; border-radius: 999px; color: var(--sis); background: rgb(142 149 157 / .15); font-size: .75rem; font-style: normal; }
.route-stop-list p { margin: .35rem 0 0; color: var(--celik-acik); }
.route-stop-list__meta { display: flex; flex-wrap: wrap; gap: .25rem 1rem; margin-top: .5rem; color: var(--celik); font-size: .8rem; }