/* ==========================================================================
   9:16 Dikey Format: Simülasyon, Radar ve Alt Kontrol Merkezi
   ========================================================================== */

/* 1. Yağmur ve Şimşek Canvası */
#rainCanvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 500;
  pointer-events: none;
  filter: drop-shadow(0 0 1.5px rgba(255, 255, 255, 0.5));
}

.radar-canvas-layer {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
  mix-blend-mode: multiply;
  opacity: 0.85;
}

/* 2. Alt Kontrol Merkezi (Bottom Hub) */
.sim-bottom-hub {
  position: absolute;
  bottom: 32px;
  left: 10px;
  right: 10px;
  z-index: 990;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: opacity 0.3s, transform 0.3s;
}

/* Canlı Radar & Meteoroloji Kartı (Bottom Hub) */
.live-hub-card {
  background: rgba(15, 23, 42, 0.92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-radius: 18px;
  padding: 10px 14px;
  color: #ffffff;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.15);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.live-hub-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.live-badge-group {
  display: flex;
  align-items: center;
  gap: 6px;
}

.live-badge-text {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.5px;
  color: #38bdf8;
}

.live-location-badge {
  font-size: 11px;
  font-weight: 600;
  color: #cbd5e1;
  background: rgba(255, 255, 255, 0.1);
  padding: 3px 8px;
  border-radius: 12px;
}

/* Hızlı Bölge Seçici Haplar */
.region-quick-pills {
  display: flex;
  align-items: center;
  gap: 6px;
  overflow-x: auto;
  padding: 2px 0;
  scrollbar-width: none;
}
.region-quick-pills::-webkit-scrollbar {
  display: none;
}

.region-pill {
  flex: 0 0 auto;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #f1f5f9;
  border-radius: 14px;
  padding: 5px 10px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

.region-pill:hover {
  background: rgba(255, 255, 255, 0.2);
}

.region-pill.active {
  background: #0284c7;
  border-color: #38bdf8;
  color: #ffffff;
  box-shadow: 0 0 10px rgba(2, 132, 199, 0.5);
}

.region-refresh-btn {
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #ffffff;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  transition: all 0.25s ease;
  flex-shrink: 0;
  margin-left: auto;
}

.region-refresh-btn:hover {
  background: #0284c7;
  transform: rotate(90deg);
}

/* Kompakt Radar Zaman Çizelgesi (Gerekirse geriye uyumluluk) */
.radar-timeline-bar {
  background: rgba(15, 23, 42, 0.9);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-radius: 16px;
  padding: 10px 14px;
  color: #ffffff;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.14);
  display: none;
  flex-direction: column;
  gap: 6px;
}

.timeline-top-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.radar-mode-switcher {
  display: flex;
  background: rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  padding: 2px;
}

.radar-mode-btn {
  background: none;
  border: none;
  color: #cbd5e1;
  padding: 3px 8px;
  font-size: 10px;
  font-weight: 600;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s;
}

.radar-mode-btn.active {
  background: #0284c7;
  color: #ffffff;
}

.timeline-time-display {
  font-size: 12px;
  font-weight: 800;
  color: #38bdf8;
}

.timeline-controls-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.btn-play-pause {
  background: #0284c7;
  border: none;
  color: #fff;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  box-shadow: 0 2px 6px rgba(2, 132, 199, 0.5);
  flex-shrink: 0;
}

.timeline-slider-wrapper {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.timeline-slider {
  width: 100%;
  height: 5px;
  background: rgba(255, 255, 255, 0.25);
  border-radius: 4px;
  outline: none;
  -webkit-appearance: none;
  cursor: pointer;
}

.timeline-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #38bdf8;
  cursor: pointer;
  box-shadow: 0 0 8px #38bdf8;
}

.timeline-ticks {
  display: flex;
  justify-content: space-between;
  font-size: 8px;
  color: #94a3b8;
  font-weight: 700;
}

.speed-pills {
  display: flex;
  gap: 3px;
}

.speed-pill {
  background: rgba(255, 255, 255, 0.12);
  border: none;
  color: #cbd5e1;
  padding: 3px 5px;
  border-radius: 4px;
  font-size: 9px;
  font-weight: 700;
  cursor: pointer;
}

.speed-pill.active {
  background: #38bdf8;
  color: #0f172a;
}

/* 3. Kompakt dBZ Lejantı (Zaman Çizelgesinin Üstünde) */
.radar-legend {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(15, 23, 42, 0.75);
  backdrop-filter: blur(8px);
  padding: 3px 10px;
  border-radius: 12px;
  color: #ffffff;
  font-size: 9px;
  font-weight: 600;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.legend-bar {
  flex: 1;
  margin: 0 8px;
  height: 6px;
  border-radius: 3px;
  background: linear-gradient(
    to right,
    rgba(74, 222, 128, 0.85),
    rgba(34, 197, 94, 0.9),
    rgba(163, 230, 53, 0.9),
    rgba(245, 158, 11, 0.95),
    rgba(239, 68, 68, 1),
    rgba(217, 70, 239, 1)
  );
}

/* Canlı Trafik Yoğunluğu Lejantı */
.traffic-legend {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(15, 23, 42, 0.85);
  backdrop-filter: blur(8px);
  padding: 4px 10px;
  border-radius: 12px;
  color: #ffffff;
  font-size: 10px;
  font-weight: 600;
  border: 1px solid rgba(34, 197, 94, 0.35);
  box-shadow: 0 0 12px rgba(34, 197, 94, 0.15);
  transition: all 0.3s ease;
}

.traffic-legend.hidden {
  display: none !important;
}

.t-legend-title {
  font-weight: 700;
  color: #38bdf8;
  display: flex;
  align-items: center;
  gap: 4px;
}

.t-legend-items {
  display: flex;
  align-items: center;
  gap: 8px;
}

.t-item {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 9.5px;
  color: #cbd5e1;
}

.t-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  display: inline-block;
}

.t-dot.dot-green {
  background: #22c55e;
  box-shadow: 0 0 6px #22c55e;
}

.t-dot.dot-orange {
  background: #f59e0b;
  box-shadow: 0 0 6px #f59e0b;
}

.t-dot.dot-red {
  background: #ef4444;
  box-shadow: 0 0 6px #ef4444;
}

.t-dot.dot-darkred {
  background: #881337;
  box-shadow: 0 0 6px #881337;
}

/* 4. Alt Açılır Çekmece (9:16 Bottom Sheet Ayarlar Paneli) */
.sim-bottom-sheet {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  max-height: 80vh;
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-radius: 20px 20px 0 0;
  box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.35);
  z-index: 1050;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform: translateY(105%);
  transition: transform 0.35s cubic-bezier(0.33, 1, 0.68, 1);
}

.sim-bottom-sheet.open {
  transform: translateY(0);
}

.sheet-drag-handle {
  width: 36px;
  height: 4px;
  background: #cbd5e1;
  border-radius: 4px;
  margin: 8px auto 4px;
  cursor: pointer;
}

.sheet-header {
  padding: 6px 16px 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #f1f5f9;
}

.sheet-title {
  font-size: 15px;
  font-weight: 800;
  color: #0f172a;
  display: flex;
  align-items: center;
  gap: 6px;
}

.sheet-close-btn {
  background: #f1f5f9;
  border: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: #64748b;
  cursor: pointer;
}

.sheet-body {
  padding: 14px 16px 24px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Meteoroloji ve Hidroloji Kartları */
.met-main-card {
  background: #f8fafc;
  border-radius: 12px;
  padding: 10px 12px;
  border: 1px solid #e2e8f0;
}

.met-top-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.met-rain-val {
  font-size: 22px;
  font-weight: 800;
  color: #0369a1;
}

.status-chip {
  font-size: 10px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 10px;
}

.status-clear { background: #dcfce7; color: #15803d; }
.status-light { background: #e0f2fe; color: #0369a1; }
.status-mod { background: #fef9c3; color: #a16207; }
.status-heavy { background: #ffedd5; color: #c2410c; }
.status-severe { background: #fee2e2; color: #b91c1c; }

.met-grid-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid #e2e8f0;
}

.met-cell {
  display: flex;
  flex-direction: column;
}

.met-label {
  font-size: 9px;
  color: #64748b;
  font-weight: 700;
  text-transform: uppercase;
}

.met-val {
  font-size: 12px;
  font-weight: 700;
  color: #1e293b;
  display: flex;
  align-items: center;
  gap: 4px;
}

.compass-icon {
  display: inline-block;
  transition: transform 0.3s;
}

/* Hidroloji Kartı */
.hydro-box {
  background: linear-gradient(135deg, #f0fdf4, #e0f2fe);
  border: 1px solid #bae6fd;
  border-radius: 12px;
  padding: 10px 12px;
}

.hydro-title {
  font-size: 11px;
  font-weight: 700;
  color: #0369a1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}

.risk-badge {
  font-size: 9px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 8px;
}

.risk-safe { background: #22c55e; color: #fff; }
.risk-warning { background: #eab308; color: #fff; }
.risk-critical { background: #ef4444; color: #fff; }

.hydro-metrics {
  display: flex;
  justify-content: space-between;
}

.h-metric {
  display: flex;
  flex-direction: column;
}

.h-lbl { font-size: 9px; color: #475569; }
.h-val { font-size: 13px; font-weight: 800; color: #0c4a6e; }

/* Kaydırıcılar */
.section-subtitle {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  color: #475569;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
}

.slider-group {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.slider-label-row {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  font-weight: 600;
  color: #475569;
}

.slider-input {
  width: 100%;
  height: 5px;
  border-radius: 4px;
  background: #e2e8f0;
  outline: none;
  -webkit-appearance: none;
  cursor: pointer;
}

.slider-input::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #0284c7;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

/* Katman Seçimi (Yol / Uydu / Arazi / Gece) */
.sheet-map-types {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}

.sheet-map-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 6px;
  border-radius: 8px;
  border: 2px solid transparent;
  background: #f8fafc;
  cursor: pointer;
  font-size: 10px;
  font-weight: 600;
  color: #334155;
}

.sheet-map-card.active {
  border-color: #0284c7;
  background: #e0f2fe;
  color: #0284c7;
}

.sheet-map-card span:first-child {
  font-size: 16px;
}

/* Efekt Aç/Kapa Düğmeleri */
.toggles-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
}

.toggle-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #f8fafc;
  padding: 6px 8px;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
  font-size: 10px;
  font-weight: 600;
  color: #334155;
  cursor: pointer;
}

.toggle-switch {
  position: relative;
  width: 28px;
  height: 16px;
}

.toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.toggle-slider {
  position: absolute;
  cursor: pointer;
  top: 0; left: 0; right: 0; bottom: 0;
  background-color: #cbd5e1;
  transition: .25s;
  border-radius: 16px;
}

.toggle-slider:before {
  position: absolute;
  content: "";
  height: 12px;
  width: 12px;
  left: 2px;
  bottom: 2px;
  background-color: white;
  transition: .25s;
  border-radius: 50%;
}

input:checked + .toggle-slider {
  background-color: #0284c7;
}

input:checked + .toggle-slider:before {
  transform: translateX(12px);
}

/* Ses ve Şimşek */
.audio-action-row {
  display: flex;
  gap: 6px;
}

.btn-audio-toggle {
  flex: 1;
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  padding: 7px 10px;
  font-size: 11px;
  font-weight: 600;
  color: #334155;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.btn-audio-toggle.active {
  background: #e0f2fe;
  color: #0369a1;
  border-color: #38bdf8;
}

.btn-test-action {
  background: #fef08a;
  border: 1px solid #fde047;
  color: #854d0e;
  border-radius: 8px;
  padding: 7px 10px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}

/* ==========================================================================
   Canlı Veri / Simülasyon Geçiş Çubuğu (MGM & AFAD Canlı Entegrasyonu)
   ========================================================================== */
.live-mode-switch-wrapper {
  display: flex;
  background: rgba(15, 23, 42, 0.92);
  backdrop-filter: blur(12px);
  border-radius: 12px;
  padding: 3px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  gap: 4px;
}

.live-switch-btn {
  flex: 1;
  background: none;
  border: none;
  color: #cbd5e1;
  padding: 6px 8px;
  font-size: 10px;
  font-weight: 700;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  white-space: nowrap;
}

.live-switch-btn.active {
  background: #0284c7;
  color: #ffffff;
  box-shadow: 0 2px 8px rgba(2, 132, 199, 0.4);
}

.live-switch-btn.live-active {
  background: #16a34a !important;
  color: #ffffff !important;
  box-shadow: 0 0 12px rgba(22, 163, 74, 0.6) !important;
}

.live-pulse-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #22c55e;
  display: inline-block;
  animation: pulse-live 1.2s infinite;
}

.live-badge-status {
  font-size: 9px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 6px;
  background: rgba(34, 197, 94, 0.2);
  color: #4ade80;
  border: 1px solid rgba(74, 222, 128, 0.3);
}

/* ==========================================================================
   VENTUSKY TARZI ATMOSFER VE TERMAL HARİTA TONLAMASI
   ========================================================================== */
#ventuskyOverlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 250;
  transition: background 0.8s ease, opacity 0.8s ease;
  mix-blend-mode: multiply;
  opacity: 0;
}

/* Sıcaklık & Hava Durumu Renk Tonları (Ventusky Skalası) */
#ventuskyOverlay.tone-hot {
  /* 25°C üzeri: Sıcak kehribar / güneşli sarı */
  background: radial-gradient(circle at 75% 25%, rgba(245, 158, 11, 0.28) 0%, rgba(217, 119, 6, 0.16) 60%, rgba(180, 83, 9, 0.08) 100%);
  opacity: 1;
}

#ventuskyOverlay.tone-warm {
  /* 18°C - 24°C: Ilık altın sarısı gün ışığı */
  background: radial-gradient(circle at 75% 25%, rgba(251, 191, 36, 0.18) 0%, rgba(234, 179, 8, 0.1) 70%, transparent 100%);
  opacity: 1;
}

#ventuskyOverlay.tone-mild {
  /* 12°C - 17°C: Berrak doğal Karadeniz gökyüzü */
  background: radial-gradient(circle at 50% 50%, rgba(56, 189, 248, 0.08) 0%, transparent 80%);
  opacity: 1;
}

#ventuskyOverlay.tone-overcast {
  /* Bulutlu / Kapalı: Dingin kurşuni ton */
  background: rgba(100, 116, 139, 0.14);
  opacity: 1;
}

#ventuskyOverlay.tone-drizzle {
  /* Çisenti: Dingin puslu Karadeniz yağmur atmosferi */
  background: radial-gradient(circle at 50% 50%, rgba(56, 189, 248, 0.12) 0%, rgba(30, 58, 138, 0.1) 100%);
  opacity: 1;
}

#ventuskyOverlay.tone-rain {
  /* Yağmurlu: Koyu kurşuni mavi yağmur tonu */
  background: radial-gradient(circle at 50% 40%, rgba(30, 41, 59, 0.22) 0%, rgba(30, 58, 138, 0.26) 100%);
  opacity: 1;
}

#ventuskyOverlay.tone-storm {
  /* Fırtına / Taşkın: Koyu mor-mavi fırtına kubbesi */
  background: radial-gradient(circle at 50% 40%, rgba(15, 23, 42, 0.25) 0%, rgba(30, 58, 138, 0.35) 100%);
  opacity: 1;
}

/* ==========================================================================
   GÜNEŞLİ HAVA ANİMASYONU (SOLAR FLARE & DÖNEN IŞIK HAREKETİ)
   ========================================================================== */
#sunnyEffect {
  position: absolute;
  top: 115px;
  right: 58px;
  width: 120px;
  height: 120px;
  pointer-events: none;
  z-index: 460;
  display: none;
  align-items: center;
  justify-content: center;
  transition: opacity 0.4s ease, transform 0.4s ease;
}

#sunnyEffect.active {
  display: flex;
}

.sun-core {
  width: 48px;
  height: 48px;
  background: radial-gradient(circle, #fffbeb 10%, #fbbf24 60%, #f59e0b 100%);
  border-radius: 50%;
  box-shadow: 0 0 35px #fbbf24, 0 0 65px rgba(245, 158, 11, 0.6);
  animation: sun-pulse 3s ease-in-out infinite;
  z-index: 2;
}

.sun-rays {
  position: absolute;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    rgba(251, 191, 36, 0.45) 0deg 20deg,
    transparent 20deg 45deg,
    rgba(251, 191, 36, 0.45) 45deg 65deg,
    transparent 65deg 90deg,
    rgba(251, 191, 36, 0.45) 90deg 110deg,
    transparent 110deg 135deg,
    rgba(251, 191, 36, 0.45) 135deg 155deg,
    transparent 155deg 180deg,
    rgba(251, 191, 36, 0.45) 180deg 200deg,
    transparent 200deg 225deg,
    rgba(251, 191, 36, 0.45) 225deg 245deg,
    transparent 245deg 270deg,
    rgba(251, 191, 36, 0.45) 270deg 290deg,
    transparent 290deg 315deg,
    rgba(251, 191, 36, 0.45) 315deg 335deg,
    transparent 335deg 360deg
  );
  animation: sun-spin 22s linear infinite;
  z-index: 1;
  filter: blur(1px);
}

.sun-lens-flare {
  position: absolute;
  top: 55px;
  left: -70px;
  width: 250px;
  height: 2px;
  background: linear-gradient(to right, transparent, rgba(254, 243, 199, 0.6), transparent);
  transform: rotate(-35deg);
  pointer-events: none;
}

/* Mobil Cihazlar ve Dar Ekranlar için Güneş Efekti */
@media (max-width: 767px) {
  #sunnyEffect {
    top: 116px;
    right: 56px;
    width: 105px;
    height: 105px;
  }
  .sun-core {
    width: 42px;
    height: 42px;
    box-shadow: 0 0 28px #fbbf24, 0 0 52px rgba(245, 158, 11, 0.55);
  }
  .sun-rays {
    width: 105px;
    height: 105px;
  }
  .sun-lens-flare {
    top: 50px;
    left: -60px;
    width: 220px;
  }
}

/* Video / Temiz Ekranda Üst Boşluk Açıldığında Güneş Konumu */
body.clean-video-mode #sunnyEffect {
  top: 75px;
  right: 25px;
}

@keyframes sun-pulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 35px #fbbf24, 0 0 65px rgba(245, 158, 11, 0.5); }
  50% { transform: scale(1.08); box-shadow: 0 0 45px #f59e0b, 0 0 85px rgba(245, 158, 11, 0.7); }
}

@keyframes sun-spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* ==========================================================================
   DUYARLI (RESPONSIVE) MASAÜSTÜ & TABLET SİMÜLASYON DÜZENİ
   ========================================================================== */

/* Tablet & Küçük Dizüstü Ekranlar (>= 768px) */
@media (min-width: 768px) {
  /* Alt Kontrol Merkezi: Ekranın altında ortalanmış yüzen ada */
  .sim-bottom-hub {
    bottom: 40px;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    width: 540px;
    max-width: calc(100vw - 40px);
  }

  .live-hub-card {
    padding: 12px 18px;
    border-radius: 20px;
    box-shadow: 0 10px 32px rgba(0, 0, 0, 0.45);
  }

  /* Alt Açılır Çekmece / Ayarlar Paneli: Masaüstünde Ortalanmış Geniş Yüzen Modal */
  .sim-bottom-sheet {
    bottom: 42px;
    left: 50%;
    right: auto;
    width: 620px;
    max-width: calc(100vw - 40px);
    max-height: 82vh;
    border-radius: 24px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.6);
    transform: translate(-50%, calc(100% + 60px));
  }

  .sim-bottom-sheet.open {
    transform: translate(-50%, 0);
  }

  .sheet-body::-webkit-scrollbar {
    width: 6px;
  }

  .sheet-body::-webkit-scrollbar-track {
    background: transparent;
  }

  .sheet-body::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 3px;
  }

  .sheet-body::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
  }
}

/* Geniş Ekranlar / Masaüstü Bilgisayarlar (>= 1024px) */
@media (min-width: 1024px) {
  .sim-bottom-hub {
    bottom: 42px;
    width: 580px;
  }

  .sim-bottom-sheet {
    bottom: 44px;
    width: 660px;
    max-height: 84vh;
}

/* VIP Özel Haber Rozeti (sirvolkanx) */
.ticker-item-special {
  background: linear-gradient(135deg, #0284c7, #6366f1) !important;
  color: #ffffff !important;
  font-weight: 800 !important;
  box-shadow: 0 0 10px rgba(99, 102, 241, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.35);
}