/* ══════════════════════════════════════════════════════════════════
   motion.css — Profesyonel animasyon sistemi, harita öğeleri, yeni bileşenler
   (style.css'ten sonra yüklenir)
   ══════════════════════════════════════════════════════════════════ */
:root {
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --ease-in: cubic-bezier(.4, 0, 1, 1);
  /* Remotion tarzı hareket (js/motion.js aynı adlarla gerçek spring eğrisini linear() olarak yazar) */
  --ease-video: cubic-bezier(.33, 1, .68, 1);
  --spring-pop: cubic-bezier(.34, 1.56, .64, 1);  --spring-pop-dur: 620ms;
  --spring-soft: cubic-bezier(.22, 1.2, .36, 1);  --spring-soft-dur: 640ms;
  --spring-logo: cubic-bezier(.34, 1.4, .64, 1);  --spring-logo-dur: 720ms;
}

/* ── Remotion tarzı giriş dili ──────────────────────────────────────
   Tümü bağımsız `translate` / `scale` özellikleriyle yapılır: elemanın kendi transform'u
   (hover, sticky, sürükleme) ile çakışmaz. */
@keyframes enterUp { from { opacity: 0; translate: 0 40px; scale: .97; } to { opacity: 1; translate: 0 0; scale: 1; } }
@keyframes enterRise { from { opacity: 0; translate: 0 40px; } to { opacity: 1; translate: 0 0; } }
@keyframes enterDown { from { opacity: 0; translate: 0 -18px; } to { opacity: 1; translate: 0 0; } }
@keyframes cardIn { from { opacity: 0; translate: 0 26px; scale: .97; } to { opacity: 1; translate: 0 0; scale: 1; } }
@keyframes popSpring { from { opacity: 0; scale: .35; } to { opacity: 1; scale: 1; } }
@keyframes logoPop { from { opacity: 0; scale: .55; rotate: -14deg; } to { opacity: 1; scale: 1; rotate: 0deg; } }
@keyframes lineGrow { from { scale: 1 0; } to { scale: 1 1; } }
@keyframes wipeIn {
  from { clip-path: inset(0 100% 0 0); opacity: 0; translate: 0 8px; }
  35% { opacity: 1; }
  to { clip-path: inset(-4px -4px -4px -4px); opacity: 1; translate: 0 0; }
}
@keyframes ringOut { from { opacity: .7; scale: .6; } to { opacity: 0; scale: 2.7; } }

.header { animation: enterDown var(--spring-soft-dur) var(--spring-soft) backwards; }
.logo-img { animation: logoPop var(--spring-logo-dur) var(--spring-logo) 90ms backwards; }
.hdr-actions .icon-btn { animation: popSpring var(--spring-pop-dur) var(--spring-pop) backwards; }
.hdr-actions .icon-btn:nth-child(1) { animation-delay: 160ms; }
.hdr-actions .icon-btn:nth-child(2) { animation-delay: 230ms; }
.hdr-actions .icon-btn:nth-child(3) { animation-delay: 300ms; }
.hdr-actions .icon-btn:nth-child(4) { animation-delay: 370ms; }
/* Harita kabına ÖLÇEK (scale) uygulanmaz: Mapbox tuval boyutunu ölçekli ölçüp marker'ları kaydırır. Yalnızca opaklık + dikey kayma. */
.map-col { animation: enterRise var(--spring-soft-dur) var(--spring-soft) 40ms backwards; }
.side-top .route-card { animation: enterUp var(--spring-soft-dur) var(--spring-soft) 130ms backwards; }
.profile-wrap { animation: enterUp var(--spring-soft-dur) var(--spring-soft) 230ms backwards; }
.drawer { animation: enterUp var(--spring-soft-dur) var(--spring-soft) 330ms backwards; }
.route-title.wipe { animation: wipeIn 700ms var(--ease-video) both; }

/* Dokunma/tıklama geri bildirimi */
.chip:active, .date-pill:active, .prof-btn:active, .quick-route-chip:active, .break-pill:active,
.break-add-btn:active, .modal-primary-btn:active, .tl-tick-btn:active { transform: scale(.95); }
.icon-btn, .chip, .date-pill, .prof-btn, .quick-route-chip, .break-pill { -webkit-tap-highlight-color: transparent; }

/* Yenile butonu / canlı konum */
#refreshBtn.spinning svg { animation: spinnerRotate 0.9s linear infinite; }
#refreshBtn:disabled { cursor: progress; opacity: .65; }
.chip.busy svg { animation: spinnerRotate 1.1s linear infinite; }

/* İçerik değişim geçişleri */
@keyframes swapIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
.swap { animation: swapIn 260ms var(--ease-out) both; }

/* Kademeli giriş (yalnızca yeni rota verisi geldiğinde): kartlar spring ile, her biri ~85 ms arayla */
#segList.stagger .seg-item,
#alertsWrap.stagger .alert-card {
  animation: cardIn var(--spring-soft-dur) var(--spring-soft) backwards;
  animation-delay: calc(var(--i, 0) * 85ms + 140ms);
}
#alertsWrap.stagger .alerts-hdr { animation: swapIn 360ms var(--ease-video) backwards; }
/* zaman çizelgesi: nokta yaylanarak belirir, bağlantı çizgisi yukarıdan aşağı uzar, hava çipi pop yapar */
#segList.stagger .seg-dot { animation: popSpring var(--spring-pop-dur) var(--spring-pop) backwards; animation-delay: calc(var(--i, 0) * 85ms + 260ms); }
#segList.stagger .seg-connector { transform-origin: 50% 0; animation: lineGrow 520ms var(--ease-video) backwards; animation-delay: calc(var(--i, 0) * 85ms + 340ms); }
#segList.stagger .wchip { animation: popSpring var(--spring-pop-dur) var(--spring-pop) backwards; animation-delay: calc(var(--i, 0) * 85ms + 320ms); }
#decisionBanner.stagger .decision-banner { animation: cardIn var(--spring-soft-dur) var(--spring-soft) 60ms backwards; }
#decisionBanner.stagger .decision-icon { animation: popSpring var(--spring-pop-dur) var(--spring-pop) 240ms backwards; }
#badgeRow.stagger .w-badge { animation: popSpring var(--spring-pop-dur) var(--spring-pop) backwards; animation-delay: calc(var(--i, 0) * 90ms + 180ms); }
.seg-item { cursor: pointer; }
.seg-item:focus-visible { outline-offset: -2px; }

/* Uyarı rozeti artık <button> */
.alert-badge { border: none; font-family: inherit; padding: 0; }

/* Rota noktası satırları: sabit ritim → noktalar ve bağlantı çizgisi tam hizalanır */
.route-input-group { position: relative; align-items: flex-start; padding-top: 5px; padding-bottom: 5px; }
.route-input-actions { align-self: center; }
.route-point-row { height: 30px; padding: 0; gap: 9px; overflow: visible; }
.route-point-row .route-field { height: 30px; padding: 0; }
.input-divider { margin: 0 0 0 16px; }
.rp-dot { flex-shrink: 0; position: relative; margin-left: 2px; }
.rp-dot.has-line::after {
  content: ''; position: absolute; left: 50%; top: 100%; width: 1.5px; height: 24px; margin-left: -.75px;
  background: rgba(0, 0, 0, 0.16); border-radius: 1px; pointer-events: none;
}
body.dark .rp-dot.has-line::after { background: rgba(255, 255, 255, 0.22); }
.route-point-row.row-in { animation: rowIn 300ms var(--ease-out) both; }
.route-point-row.row-out { animation: rowOut 180ms var(--ease-in) both; }
@keyframes rowIn { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: none; } }
@keyframes rowOut { to { opacity: 0; transform: translateX(10px); } }
.drag-handle { touch-action: none; }
.route-point-row.dragging { cursor: grabbing; }

.route-field:focus-visible { outline: none; }
.route-input-group { transition: var(--theme-trans), box-shadow 200ms ease; }
.route-input-group:focus-within { border-color: rgba(10, 95, 82, .5); box-shadow: 0 0 0 3px rgba(10, 95, 82, .13); }
body.dark .route-input-group:focus-within { border-color: rgba(255, 209, 102, .5); box-shadow: 0 0 0 3px rgba(255, 209, 102, .14); }

/* Konum önerileri */
.sug-box {
  position: absolute; left: -1px; right: -1px; top: 100%;
  background: var(--card); border: 1px solid var(--border); border-radius: 14px;
  box-shadow: var(--sh-md); padding: 5px; z-index: 60; max-height: 260px; overflow-y: auto;
  opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-6px) scale(.98); transform-origin: top center;
  transition: opacity 160ms ease, transform 240ms var(--ease-out), visibility 0s linear 240ms;
}
.sug-box.open .sug-item { animation: cardIn 420ms var(--ease-video) backwards; animation-delay: calc(var(--i, 0) * 28ms); }
.sug-box.open { opacity: 1; visibility: visible; pointer-events: auto; transform: none; transition-delay: 0s; }
.sug-item {
  display: flex; align-items: center; gap: 9px; width: 100%; text-align: left;
  padding: 9px 10px; border: none; background: transparent; border-radius: 10px;
  font-family: var(--font); font-size: 12.5px; color: var(--txt-h); cursor: pointer;
  transition: background 120ms ease;
}
.sug-item .d-icon { color: var(--txt-m); width: 14px; height: 14px; }
.sug-item.active, .sug-item:hover { background: rgba(10, 95, 82, 0.09); }
body.dark .sug-item.active, body.dark .sug-item:hover { background: rgba(255, 238, 238, 0.09); }

/* Araç profili: kayan seçim göstergesi */
.profile-wrap { position: relative; }
.prof-btn { position: relative; z-index: 1; }
.prof-thumb {
  position: absolute; top: 0; left: 0; border-radius: 12px; background: #fbf0f0;
  box-shadow: 0 2px 8px rgba(11, 29, 26,  0.10); opacity: 0; pointer-events: none;
  transition: transform 420ms var(--ease-out), width 300ms var(--ease-out), height 300ms var(--ease-out), background 650ms, opacity 200ms;
}
.prof-thumb.ready { opacity: 1; }
body.dark .prof-thumb { background: #081512; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5); }

/* Mola pilleri */
@keyframes popIn { from { opacity: 0; transform: scale(.9); } to { opacity: 1; transform: none; } }
.break-pills.pop-in { animation: popIn 260ms var(--ease-spring) both; }

/* Çekmece */
.drawer-handle-wrap { cursor: pointer; }
.drawer-handle { transition: background var(--ease), width 300ms var(--ease-out); }
.drawer-handle-wrap:hover .drawer-handle, .drawer.expanded .drawer-handle { width: 48px; background: rgba(0, 0, 0, .22); }

/* Hava durumu rozetleri (kar / fırtına / bulut) */
.w-badge-icon.cloud, .wchip.cloud { background: rgba(160, 180, 192, .18); }
.w-badge-icon.snow, .wchip.snow { background: rgba(127, 181, 230, .2); }
.w-badge-icon.storm, .wchip.storm { background: rgba(123, 94, 167, .18); }
.wchip.cloud { color: #4f6673; }
.wchip.snow { color: #2d6ea3; }
.wchip.storm { color: #5b3f8c; }
body.dark .wchip.cloud { color: #b7c8d2; }
body.dark .wchip.snow { color: #9CCBF0; }
body.dark .wchip.storm { color: #c1a7f0; }
.wchip { transition: background 300ms, color 300ms; }

/* Modal çıkış animasyonu */
@keyframes modalFadeOut { to { opacity: 0; } }
@keyframes modalScaleOut { to { opacity: 0; transform: scale(.96) translateY(8px); } }
.modal-overlay.closing { animation: modalFadeOut 180ms ease-in forwards; pointer-events: none; }
.modal-overlay.closing .modal-card { animation: modalScaleOut 180ms var(--ease-in) forwards; }

/* ── Harita işaretçileri ──────────────────────────────────────────
   Mapbox kök elemana `transform` yazar → animasyonlar iç elemanlarda ve bağımsız `scale`/`translate` ile yapılır.
   Marker'lar anchor:center ile tam koordinata oturur; etiketler mutlak konumlanır (yerleşimi etkilemez).
   DİKKAT: marker köklerine `position` yazma — .mapboxgl-marker'ın `absolute`'unu ezer ve marker'lar akışta üst üste dizilip kayar.
   pre → rota çizgisi henüz oraya ulaşmadı (gizli) · enter → belirirken spring + halka darbesi */
.mk-ring {
  position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--mk-c, rgba(10, 95, 82, .7));
  opacity: 0; pointer-events: none;
}
.mk-city { width: 16px; height: 16px; pointer-events: none; --mk-c: rgba(19, 46, 41, .75); }
.mk-city.end { --mk-c: rgba(229, 62, 62, .8); }
.mk-city-dot {
  position: absolute; inset: 0; border-radius: 50%; background: #132E29; border: 3px solid #fff;
  box-shadow: 0 0 0 5px rgba(19, 46, 41, .2), 0 2px 8px rgba(0, 0, 0, .22);
}
.mk-city.end .mk-city-dot { background: #E53E3E; box-shadow: 0 0 0 5px rgba(229, 62, 62, .22), 0 2px 8px rgba(0, 0, 0, .22); }
.mk-city-tagwrap { position: absolute; left: 50%; bottom: calc(100% + 10px); transform: translateX(-50%); }
.mk-city-tag {
  display: block; transform-origin: 50% 100%;
  background: rgba(255, 255, 255, .96); backdrop-filter: blur(6px); padding: 3px 9px; border-radius: 7px;
  font: 600 10.5px/1.3 var(--font); color: #132E29; white-space: nowrap; box-shadow: 0 2px 8px rgba(0, 0, 0, .14);
}
.mk-city.pre .mk-city-dot, .mk-city.pre .mk-city-tag { opacity: 0; scale: .3; }
.mk-city.enter .mk-city-dot { animation: popSpring var(--spring-pop-dur) var(--spring-pop) both; }
.mk-city.enter .mk-city-tag { animation: cardIn var(--spring-pop-dur) var(--spring-pop) 110ms both; }
.mk-city.enter .mk-ring { inset: -3px; animation: ringOut 780ms var(--ease-video) both; }

.mk-wx { width: 34px; height: 34px; padding: 0; border: none; background: none; cursor: pointer; display: block; }
.mk-wx-in {
  display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; border-radius: 50%;
  border: 2.5px solid #fff; box-shadow: 0 3px 12px rgba(0, 0, 0, .24); color: #132E29;
  background: rgba(10, 95, 82, .92);
  transition: transform 220ms var(--ease-video), box-shadow 220ms, background 400ms;
}
.mk-wx.pre .mk-wx-in { opacity: 0; scale: .3; }
.mk-wx.enter .mk-wx-in { animation: popSpring var(--spring-pop-dur) var(--spring-pop) both; }
.mk-wx.enter .mk-ring { animation: ringOut 780ms var(--ease-video) both; }
.mk-wx:hover .mk-wx-in { transform: scale(1.14); }
.mk-wx:active .mk-wx-in { transform: scale(.96); }
.mk-wx:focus-visible { outline: none; }
.mk-wx:focus-visible .mk-wx-in { box-shadow: 0 0 0 3px var(--primary), 0 3px 12px rgba(0, 0, 0, .24); }
.mk-wx.open .mk-wx-in { transform: scale(1.2); box-shadow: 0 0 0 5px rgba(255, 255, 255, .55), 0 6px 18px rgba(0, 0, 0, .3); }
.mk-wx.sun { --mk-c: rgba(230, 170, 30, .9); }
.mk-wx.rain { --mk-c: rgba(79, 145, 197, .9); }
.mk-wx.fog { --mk-c: rgba(120, 150, 140, .9); }
.mk-wx.cloud, .mk-wx.nodata { --mk-c: rgba(140, 165, 178, .9); }
.mk-wx.snow { --mk-c: rgba(120, 180, 230, .9); }
.mk-wx.storm { --mk-c: rgba(123, 94, 167, .9); }
.mk-wx.sun .mk-wx-in { background: rgba(255, 209, 102, .97); }
.mk-wx.rain .mk-wx-in { background: rgba(79, 145, 197, .97); color: #fff; }
.mk-wx.fog .mk-wx-in { background: rgba(158, 179, 171, .95); }
.mk-wx.cloud .mk-wx-in, .mk-wx.nodata .mk-wx-in { background: rgba(176, 196, 204, .95); }
.mk-wx.snow .mk-wx-in { background: rgba(156, 203, 240, .97); }
.mk-wx.storm .mk-wx-in { background: rgba(123, 94, 167, .97); color: #fff; }
.mk-wx-in .d-icon { width: 16px; height: 16px; display: block; }

.mk-live { width: 14px; height: 14px; } /* konum vermez: kök .mapboxgl-marker zaten absolute; relative yazmak marker'ı akışa sokup kaydırırdı */
.mk-live { width: 14px; height: 14px; } /* konum vermez: kök .maplibregl-marker zaten absolute; relative yazmak marker'ı akışa sokup kaydırırdı */
.mk-live-dot { position: absolute; inset: 0; border-radius: 50%; background: #0D7A69; border: 2.5px solid #fff; box-shadow: 0 2px 8px rgba(0,0,0,.28); }
.mk-live-pulse { position: absolute; inset: -6px; border-radius: 50%; background: rgba(13,122,105,.35); animation: livePulse 2s ease-out infinite; }
@keyframes livePulse { 0% { transform: scale(.5); opacity: .9; } 100% { transform: scale(2.2); opacity: 0; } }

/* ── Hava popup'ı (haritada) ── */
.wx-popup {
  position: absolute; left: 0; top: 0; width: 268px; z-index: 1001;
  background: var(--card); color: var(--txt-h); border: 1px solid var(--border); border-radius: 18px;
  padding: 14px; box-shadow: 0 16px 44px rgba(0,0,0,.28);
  --ty: calc(-100% - 26px); --ax: 0px;
  opacity: 0; visibility: hidden; pointer-events: none; transform-origin: 50% 100%;
  transform: translate(-50%, var(--ty)) scale(.9);
  transition: opacity 160ms ease, transform var(--spring-pop-dur) var(--spring-pop), visibility 0s linear var(--spring-pop-dur);
}
.wx-popup.open { opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%, var(--ty)) scale(1); transition-delay: 0s; }
.wx-popup.below { --ty: 26px; transform-origin: 50% 0; }
.wx-popup::after {
  content: ''; position: absolute; left: calc(50% + var(--ax)); bottom: -7px; width: 14px; height: 14px; margin-left: -7px;
  background: var(--card); border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); transform: rotate(45deg);
}
.wx-popup.below::after { bottom: auto; top: -7px; border: none; border-left: 1px solid var(--border); border-top: 1px solid var(--border); }
.wx-close {
  position: absolute; top: 8px; right: 8px; width: 24px; height: 24px; border-radius: 50%; border: none; cursor: pointer;
  background: rgba(0,0,0,.05); color: var(--txt-s); display: flex; align-items: center; justify-content: center;
  transition: background var(--ease), transform var(--ease);
}
.wx-close:hover { background: rgba(0,0,0,.1); transform: scale(1.1); }
body.dark .wx-close { background: rgba(255,255,255,.08); }
.wx-head { display: flex; align-items: center; gap: 12px; padding-right: 22px; }
.wx-icon-big { width: 52px; height: 52px; border-radius: 16px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.wx-icon-big.sun { background: rgba(255,209,102,.2); color: #A87800; }
.wx-icon-big.rain { background: rgba(79,145,197,.18); color: #1E5F9A; }
.wx-icon-big.fog { background: rgba(158,179,171,.2); color: #4A7068; }
.wx-icon-big.cloud { background: rgba(160,180,192,.2); color: #4f6673; }
.wx-icon-big.snow { background: rgba(127,181,230,.22); color: #2d6ea3; }
.wx-icon-big.storm { background: rgba(123,94,167,.18); color: #5b3f8c; }
body.dark .wx-icon-big.sun { color: #FFD166; }
body.dark .wx-icon-big.rain { color: #72B3DC; }
body.dark .wx-icon-big.fog { color: #9EB3AB; }
body.dark .wx-icon-big.cloud { color: #b7c8d2; }
body.dark .wx-icon-big.snow { color: #9CCBF0; }
body.dark .wx-icon-big.storm { color: #c1a7f0; }
.wx-name { font-size: 14px; font-weight: 600; line-height: 1.25; }
.wx-desc { font-size: 11.5px; color: var(--txt-s); margin-top: 2px; }
.wx-eta { font-size: 11px; color: var(--primary-ink); margin-top: 4px; display: flex; align-items: center; gap: 4px; }
body.dark .wx-eta { color: #7EC8BD; }
.wx-danger { display: inline-block; margin-top: 5px; padding: 2px 8px; border-radius: 6px; font-size: 10px; font-weight: 700; color: #fff; }
.wx-danger.red { background: var(--d-red); }
.wx-danger.orange { background: var(--d-orange); }
.wx-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 12px; }
.wx-cell { padding: 7px 9px; border-radius: 10px; background: rgba(0,0,0,.03); border: 1px solid rgba(0,0,0,.05); }
body.dark .wx-cell { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.06); }
.wx-cell-label { font-size: 9.5px; color: var(--txt-m); }
.wx-cell-val { font-size: 13px; font-weight: 600; margin-top: 1px; }
.wx-cell-val span { font-size: 9.5px; font-weight: 400; color: var(--txt-s); }

/* ── Radar zaman çizelgesi ── */
.radar-bar {
  position: absolute; left: 50%; bottom: 18px; z-index: 998; display: flex; align-items: center; gap: 10px;
  padding: 7px 14px 7px 8px; border-radius: 999px; background: rgba(255,255,255,.94); backdrop-filter: blur(10px);
  box-shadow: 0 6px 22px rgba(0,0,0,.2); color: var(--txt-h);
  opacity: 0; visibility: hidden; pointer-events: none; transform: translate(-50%, 16px) scale(.96);
  transition: opacity 240ms ease, transform 420ms var(--ease-spring), visibility 0s linear 420ms;
}
.radar-bar.show { opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%, 0) scale(1); transition-delay: 0s; }
body.dark .radar-bar { background: rgba(15, 41, 37, .92); color: #ffeeee; }
.radar-play {
  width: 28px; height: 28px; border-radius: 50%; border: none; cursor: pointer; background: var(--primary); color: #fff;
  display: flex; align-items: center; justify-content: center; transition: transform 160ms var(--ease-out), background var(--ease);
}
.radar-play:hover { transform: scale(1.08); }
.radar-play:active { transform: scale(.92); }
.radar-play .i-play { display: none; margin-left: 1px; }
.radar-play.paused .i-play { display: block; }
.radar-play.paused .i-pause { display: none; }
.radar-ticks { display: flex; align-items: center; gap: 5px; }
.radar-tick {
  width: 16px; height: 8px; padding: 0; border: none; border-radius: 4px; cursor: pointer; background: rgba(0,0,0,.16);
  transition: background 200ms, transform 200ms var(--ease-out), width 260ms var(--ease-out);
}
.radar-tick.past { background: rgba(10,95,82,.45); }
.radar-tick.nowcast { background-image: repeating-linear-gradient(45deg, transparent 0 3px, rgba(255,255,255,.55) 3px 5px); }
.radar-tick.active { background-color: var(--primary); width: 22px; }
.radar-tick:hover { transform: scaleY(1.4); }
body.dark .radar-tick { background: rgba(255,255,255,.2); }
body.dark .radar-tick.past { background: rgba(255,209,102,.4); }
body.dark .radar-tick.active { background-color: var(--accent); }
.radar-time { font-size: 12px; font-weight: 600; min-width: 74px; font-variant-numeric: tabular-nums; }
.radar-spinner { display: none; }
.radar-bar.loading .radar-spinner { display: inline-block; }
.radar-bar.loading .radar-ticks, .radar-bar.loading .radar-time { opacity: .45; }

/* Hareket azaltma tercihi */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .load-bar.on { animation: none; }
  .mk-live-pulse { animation: none; opacity: .4; }
}

/* Harita: koyu temada renkler aynı kalır, yalnızca parlaklık biraz düşer (rota/marker'lar etkilenmez) */
#map .mapboxgl-canvas { transition: filter 650ms cubic-bezier(0.33, 1, 0.68, 1); }
#map .maplibregl-canvas { transition: filter 650ms cubic-bezier(0.33, 1, 0.68, 1); }
body.dark #map .mapboxgl-canvas { filter: brightness(0.8); }
body.dark #map .maplibregl-canvas { filter: brightness(0.8); }

/* Arama düğmesi (büyüteç) ve öneri etiketleri */
.row-search {
  flex-shrink: 0; width: 24px; height: 24px; border-radius: 8px; border: none; padding: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: center; background: transparent; color: var(--txt-m);
  transition: background 160ms ease, color 160ms ease, transform 160ms var(--ease-out);
}
.row-search:hover, .route-point-row:focus-within .row-search { color: var(--primary-ink); background: rgba(10, 95, 82, 0.1); }
body.dark .row-search:hover, body.dark .route-point-row:focus-within .row-search { color: var(--accent); background: rgba(255, 209, 102, 0.12); }
.row-search:active { transform: scale(.88); }
.row-search.busy svg { animation: spinnerRotate .8s linear infinite; }
.sug-label { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 1px; overflow: hidden; line-height: 1.25; }
.sug-main { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.sug-where { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; font-weight: 400; color: var(--txt-m); }
.sug-search .sug-label { flex-direction: row; align-items: center; white-space: nowrap; }
.sug-ico { flex-shrink: 0; width: 15px; height: 15px; color: var(--txt-m); transition: color 160ms ease, transform 420ms var(--ease-video); }
.sug-item.active .sug-ico, .sug-item:hover .sug-ico { color: var(--primary-ink); transform: scale(1.12); }
body.dark .sug-item.active .sug-ico, body.dark .sug-item:hover .sug-ico { color: var(--accent); }
.sug-item .sug-ico { margin-right: 1px; }
.sug-tag {
  flex-shrink: 0; font-size: 9.5px; font-weight: 600; letter-spacing: .02em; padding: 2px 7px; border-radius: 999px;
  color: var(--txt-s); background: rgba(0, 0, 0, .05);
}
.sug-tag.run { color: #0A5F52; background: rgba(13, 122, 105, .13); }
.sug-tag.key { font-family: var(--font); border: 1px solid var(--border); background: transparent; }
body.dark .sug-tag { background: rgba(255, 255, 255, .08); color: var(--txt-s); }
body.dark .sug-tag.run { color: #7EC8BD; background: rgba(13, 122, 105, .22); }
.sug-search { border-top: 1px solid var(--border); border-radius: 0 0 10px 10px; margin-top: 3px; color: var(--primary-ink); font-weight: 500; }
body.dark .sug-search { color: var(--accent); }
.sug-search svg { flex-shrink: 0; }
.sug-empty { padding: 12px 10px; font-size: 12px; color: var(--txt-s); text-align: center; }

/* Hava çipi / rozet ikonları: ikon ile metin arası tek ritim (çift boşluk kayması giderildi) */
.wchip { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; line-height: 1; }
.wchip .d-icon, .wchip svg { margin: 0; width: 14px; height: 14px; flex-shrink: 0; display: block; }
.w-badge-icon { display: flex; align-items: center; justify-content: center; }
.w-badge-icon .d-icon, .w-badge-icon svg { display: block; margin: 0; }
.alert-icon .d-icon, .decision-icon .d-icon, .wx-icon-big .d-icon { display: block; }


/* ── Kota bilgilendirme kartı (ücretsiz harita modu) ─────────────── */
.map-notice {
  position: absolute; left: 50%; bottom: 16px; z-index: 997; width: min(520px, calc(100% - 28px));
  translate: -50% 0; padding: 14px 16px 12px; border-radius: 16px;
  background: var(--card); color: var(--txt-h); border: 1px solid var(--border); box-shadow: 0 14px 40px rgba(0, 0, 0, .28);
  animation: noticeIn var(--spring-soft-dur) var(--spring-soft) 900ms backwards;
}
.radar-bar.show ~ .map-notice { bottom: 78px; }
.map-notice-title { font-size: 13.5px; font-weight: 650; margin-bottom: 4px; }
.map-notice p { margin: 0; font-size: 12.2px; line-height: 1.5; color: var(--txt-s); }
.map-notice-ok {
  margin-top: 10px; border: none; border-radius: 10px; padding: 7px 16px; cursor: pointer; font: 600 12px var(--font);
  background: var(--primary); color: #fff; transition: transform 160ms var(--ease-video);
}
.map-notice-ok:hover { transform: scale(1.04); } .map-notice-ok:active { transform: scale(.95); }
.map-notice.out { opacity: 0; translate: -50% 12px; transition: opacity 260ms ease, translate 300ms var(--ease-video); pointer-events: none; }
@keyframes noticeIn { from { opacity: 0; translate: -50% 26px; } to { opacity: 1; translate: -50% 0; } }


/* ── Açık gece (ay) — gündüz "güneşli"den ayrı ─────────────────── */
.w-badge-icon.night, .wchip.night { background: rgba(44, 110, 138, .14); }
.wchip.night { color: #2C6E8A; }
body.dark .wchip.night { color: #8FC3DC; }
.mk-wx.night { --mk-c: rgba(44, 110, 138, .9); }
.mk-wx.night .mk-wx-in { background: rgba(44, 82, 120, .97); color: #fff; }
.wx-icon-big.night { background: rgba(44, 110, 138, .18); color: #2C6E8A; }
body.dark .wx-icon-big.night { color: #8FC3DC; }

/* Model karşılaştırma satırı (popup) */
.wx-models { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 10px; padding-top: 9px; border-top: 1px solid var(--border); font-size: 11px; color: var(--txt-s); }
.wx-models b { color: var(--txt-h); font-weight: 600; }
.wx-agree { padding: 2px 8px; border-radius: 99px; font-weight: 600; font-size: 10.5px; white-space: nowrap; }
.wx-agree.high { background: rgba(13, 122, 105, .14); color: #0A5F52; }
.wx-agree.mid { background: rgba(245, 166, 35, .18); color: #9A6300; }
.wx-agree.low { background: rgba(214, 69, 69, .16); color: #b23838; }
body.dark .wx-agree.high { color: #7EC8BD; } body.dark .wx-agree.mid { color: #FFD166; } body.dark .wx-agree.low { color: #f19a9a; }


/* ── Parçalı bulutlu (gündüz / gece) ─────────────────────────────── */
.w-badge-icon.partly, .wchip.partly { background: rgba(78, 154, 142, .14); }
.w-badge-icon.partlynight, .wchip.partlynight { background: rgba(63, 124, 147, .14); }
.wchip.partly { color: #2E7A6E; } .wchip.partlynight { color: #3F7C93; }
body.dark .wchip.partly { color: #8ED0C4; } body.dark .wchip.partlynight { color: #8FC3DC; }
.mk-wx.partly { --mk-c: rgba(78, 154, 142, .9); } .mk-wx.partlynight { --mk-c: rgba(63, 124, 147, .9); }
.mk-wx.partly .mk-wx-in { background: rgba(196, 226, 160, .97); color: #1F4D46; }
.mk-wx.partlynight .mk-wx-in { background: rgba(70, 104, 140, .97); color: #fff; }
.wx-icon-big.partly { background: rgba(78, 154, 142, .18); color: #2E7A6E; }
.wx-icon-big.partlynight { background: rgba(63, 124, 147, .18); color: #3F7C93; }
body.dark .wx-icon-big.partly { color: #8ED0C4; } body.dark .wx-icon-big.partlynight { color: #8FC3DC; }

/* ── 7 günlük kalkış günü şeridi (yatay kaydırılır) ──────────────── */
.date-pills { flex: 1 1 auto; min-width: 0; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; padding: 2px 14px 2px 1px;
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 22px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 22px), transparent); }
.date-pills::-webkit-scrollbar { display: none; }
.date-pill { scroll-snap-align: start; flex: 0 0 auto; }

/* ── En uygun kalkış saatleri ────────────────────────────────────── */
#windowsWrap:empty { display: none; }
.windows-card { margin: 0 0 12px; padding: 12px 12px 10px; border-radius: 14px; background: var(--card); border: 1px solid var(--border); box-shadow: var(--sh-sm); }
.windows-hdr { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 8px; font-size: 12.5px; font-weight: 600; color: var(--txt-h); }
.windows-hdr small { font-size: 10.5px; font-weight: 400; color: var(--txt-m); }
.windows-list { display: grid; gap: 6px; }
.win-item {
  display: grid; grid-template-columns: 72px 1fr; grid-template-areas: "when risk" "when note"; align-items: center; column-gap: 10px; row-gap: 1px;
  width: 100%; text-align: left; padding: 8px 10px; border-radius: 11px; border: 1px solid var(--border); background: transparent; cursor: pointer; font-family: var(--font); color: var(--txt-h);
  transition: background 160ms ease, border-color 160ms ease, transform 200ms var(--ease-video);
}
.win-item:hover { background: rgba(10, 95, 82, .07); transform: translateX(2px); }
.win-item:active { transform: scale(.98); }
.win-item.active { border-color: var(--primary-ink); background: rgba(10, 95, 82, .1); }
.win-when { grid-area: when; display: flex; flex-direction: column; line-height: 1.15; }
.win-when b { font-size: 16px; font-variant-numeric: tabular-nums; } .win-when small { font-size: 10.5px; color: var(--txt-m); }
.win-risk { grid-area: risk; display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; }
.win-note { grid-area: note; font-size: 10.5px; color: var(--txt-m); }
.win-dot { width: 8px; height: 8px; border-radius: 50%; background: #0D7A69; box-shadow: 0 0 0 3px rgba(13, 122, 105, .18); }
.win-item.caution .win-dot { background: #F5A623; box-shadow: 0 0 0 3px rgba(245, 166, 35, .2); }
.win-item.danger .win-dot { background: #d64545; box-shadow: 0 0 0 3px rgba(214, 69, 69, .2); }
body.dark .win-item:hover, body.dark .win-item.active { background: rgba(255, 238, 238, .08); }
#windowsWrap.stagger .windows-card { animation: cardIn var(--spring-soft-dur) var(--spring-soft) 100ms backwards; }
#windowsWrap.stagger .win-item { animation: cardIn var(--spring-soft-dur) var(--spring-soft) backwards; animation-delay: calc(var(--i, 0) * 80ms + 220ms); }

/* ── Rota seçenekleri (alternatifler) ────────────────────────────── */
.alt-item {
  display: grid; grid-template-columns: 1fr auto; grid-template-areas: "name meta" "risk risk"; align-items: center; gap: 3px 10px;
  width: 100%; text-align: left; padding: 9px 11px; border-radius: 11px; border: 1px solid var(--border); background: transparent; cursor: pointer;
  font-family: var(--font); color: var(--txt-h); transition: background 160ms ease, border-color 160ms ease, transform 200ms var(--ease-video);
}
.alt-item:hover { background: rgba(10, 95, 82, .07); transform: translateX(2px); }
.alt-item:active { transform: scale(.98); }
.alt-item.active { border-color: var(--primary-ink); background: rgba(10, 95, 82, .1); }
body.dark .alt-item:hover, body.dark .alt-item.active { background: rgba(255, 238, 238, .08); }
.alt-name { grid-area: name; display: flex; align-items: center; gap: 6px; font-size: 13px; flex-wrap: wrap; }
body.dark .alt-name em { background: rgba(132, 205, 180, .16); }
.alt-name em { font-style: normal; font-size: 10px; font-weight: 600; padding: 1px 8px; border-radius: 99px; background: rgba(10, 95, 82, .13); color: var(--primary-ink); }
.alt-meta { grid-area: meta; font-size: 12px; color: var(--txt-s); font-variant-numeric: tabular-nums; }
.alt-risk { grid-area: risk; display: flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 600; }
.alt-item.caution .win-dot { background: #F5A623; box-shadow: 0 0 0 3px rgba(245, 166, 35, .2); }
.alt-item.danger .win-dot { background: #d64545; box-shadow: 0 0 0 3px rgba(214, 69, 69, .2); }
#altWrap:empty { display: none; }


/* ── PWA: yüklü uygulama görünümü ────────────────────────────────── */
#installBtn[hidden] { display: none; }
@media (display-mode: standalone) {
  .header { padding-top: max(env(safe-area-inset-top), 0px); }
  .app { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); padding-bottom: env(safe-area-inset-bottom); }
  #installBtn { display: none; }
}


/* Resmî kaynak bağlantıları (MGM / KGM) */
.official-link { color: var(--primary-ink); font-weight: 600; text-decoration: none; white-space: nowrap; }
.official-link:hover { text-decoration: underline; }
body.dark .official-link { color: var(--accent); }
.alerts-hdr .official-link { float: right; font-size: 10.5px; font-weight: 500; margin-top: 3px; }
.official-note { margin: 8px 2px 0; font-size: 10.5px; line-height: 1.5; color: var(--txt-m); }


/* ── Rota izleme bildirimi düğmesi ───────────────────────────────── */
#watchWrap:empty { display: none; }
.watch-chip {
  display: flex; align-items: center; gap: 11px; width: 100%; margin: 0 0 12px; padding: 10px 13px; border-radius: 14px; cursor: pointer;
  border: 1px dashed rgba(10, 95, 82, .45); background: rgba(10, 95, 82, .05); color: var(--txt-h); font-family: var(--font); text-align: left;
  transition: background 180ms ease, transform 200ms var(--ease-video), border-color 180ms ease;
}
.watch-chip:hover { background: rgba(10, 95, 82, .1); transform: translateY(-1px); }
.watch-chip:active { transform: scale(.985); }
.watch-chip:disabled { opacity: .6; cursor: progress; }
.watch-chip svg { flex-shrink: 0; color: var(--primary-ink); }
.watch-chip span { display: flex; flex-direction: column; line-height: 1.25; }
.watch-chip b { font-size: 12.5px; font-weight: 600; } .watch-chip small { font-size: 10.5px; color: var(--txt-m); }
.watch-chip.on { border-style: solid; border-color: var(--primary-ink); background: rgba(10, 95, 82, .12); }
body.dark .watch-chip svg { color: var(--accent); } body.dark .watch-chip { border-color: rgba(255, 209, 102, .4); background: rgba(255, 209, 102, .06); }
body.dark .watch-chip.on { border-color: var(--accent); background: rgba(255, 209, 102, .12); }