/* ==========================================================
   WP Hava Durumu - Scoped Frontend Styles
   ========================================================== */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800;900&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

/* ==========================================================
   MUTLAK TEMA İZOLASYONU (THEME IMMUNITY RESET)
   Kubio, Twenty Twenty-Four, Astra ve diğer temaların link,
   alt çizgi (underline), border-bottom, liste imleri veya
   tipografi bozuntularını 100% etkisiz hale getirir!
   ========================================================== */
html body [class*="hvadrm-"],
html body .entry-content [class*="hvadrm-"],
html body .kubio-post-content [class*="hvadrm-"],
:where(body) [class*="hvadrm-"],
.hvadrm-widget,
.hvadrm-page-wrapper,
.hvadrm-widget-wrapper {
  font-family: 'Outfit', 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Tüm Elemanlar İçin Kutu Modeli */
[class*="hvadrm-"],
[class*="hvadrm-"] *,
[class*="hvadrm-"] *::before,
[class*="hvadrm-"] *::after {
  box-sizing: border-box !important;
}

/* Mutlak Bağlantı (Link) ve Alt Çizgi (Underline) Arındırma */
html body [class*="hvadrm-"] a,
html body [class*="hvadrm-"] a:link,
html body [class*="hvadrm-"] a:visited,
html body [class*="hvadrm-"] a:hover,
html body [class*="hvadrm-"] a:focus,
html body [class*="hvadrm-"] a:active,
html body .entry-content [class*="hvadrm-"] a,
html body .entry-content [class*="hvadrm-"] a:hover,
html body .entry-content [class*="hvadrm-"] a:focus,
html body .entry-content [class*="hvadrm-"] a:visited,
html body .kubio-post-content [class*="hvadrm-"] a,
html body .kubio-post-content [class*="hvadrm-"] a:hover,
html body .kubio-post-content [class*="hvadrm-"] a:focus,
html body .kubio-post-content [class*="hvadrm-"] a:visited,
:where(.wp-site-blocks) [class*="hvadrm-"] a,
[class*="hvadrm-"] a,
[class*="hvadrm-"] a:hover,
[class*="hvadrm-"] a:focus,
[class*="hvadrm-"] a:active,
[class*="hvadrm-"] a:visited,
html body p > a[class*="hvadrm-"],
html body p a[class*="hvadrm-"],
html body p a.hvadrm-wm-row,
html body p a.hvadrm-multi-pill,
html body p a.hvadrm-hdr-item,
html body p a.hvadrm-sb-forecast-item,
html body p a.hvadrm-world-item,
html body a.hvadrm-wm-row,
html body a.hvadrm-multi-pill,
html body a.hvadrm-hdr-item,
.kubio-post-content p a,
.kubio-post-content p a.hvadrm-wm-row,
.kubio-post-content a.hvadrm-wm-row,
.entry-content p a.hvadrm-wm-row,
.hvadrm-world-item,
.hvadrm-wm-row,
.hvadrm-multi-pill,
.hvadrm-hdr-item,
.hvadrm-sb-forecast-item,
.hvadrm-card,
.hvadrm-card-link {
  text-decoration: none !important;
  text-decoration-line: none !important;
  -webkit-text-decoration-line: none !important;
  -webkit-text-decoration-skip: none !important;
  text-decoration-skip-ink: none !important;
  text-decoration-thickness: 0 !important;
  text-underline-offset: 0 !important;
  border: none !important;
  border-bottom: 0 none transparent !important;
  border-top: none !important;
  border-left: none !important;
  border-right: none !important;
  box-shadow: none !important;
  background-image: none !important;
  outline: none !important;
  color: inherit !important;
}

/* Link İçindeki Tüm Çocuk Elemanlar İçin Alt Çizgi ve Sınır Temizliği */
html body [class*="hvadrm-"] a *,
html body .entry-content [class*="hvadrm-"] a *,
html body .kubio-post-content [class*="hvadrm-"] a *,
html body p a.hvadrm-wm-row *,
html body p a.hvadrm-multi-pill *,
html body p a[class*="hvadrm-"] *,
[class*="hvadrm-"] a *,
[class*="hvadrm-"] a:hover *,
.hvadrm-wm-row *,
.hvadrm-multi-pill *,
.hvadrm-hdr-item *,
.hvadrm-world-item *,
.hvadrm-sb-forecast-item * {
  text-decoration: none !important;
  text-decoration-line: none !important;
  -webkit-text-decoration-line: none !important;
  border: none !important;
  border-bottom: 0 none transparent !important;
  box-shadow: none !important;
}

/* Liste, Başlık ve Buton Temizliği */
[class*="hvadrm-"] ul,
[class*="hvadrm-"] ol,
[class*="hvadrm-"] li {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

[class*="hvadrm-"] h1,
[class*="hvadrm-"] h2,
[class*="hvadrm-"] h3,
[class*="hvadrm-"] h4,
[class*="hvadrm-"] h5,
[class*="hvadrm-"] h6 {
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  text-decoration: none !important;
  line-height: 1.25 !important;
}

/* ==========================================================
   İlçe Seçildiğinde Kartın Sol Üst Köşesine Yapışık İl Sekmesi (Örnek Görsel Tasarımı)
   ========================================================== */
.hvadrm-widget .weather-card-hero {
  position: relative !important;
  overflow: hidden !important;
  padding-top: 1rem !important; /* Şehir ismini yukarı taşır, üst boşluğu kaldırır */
}

/* İlçe seçildiğinde sol üst köşedeki il sekmesi için gereken minimal üst boşluk */
.hvadrm-widget .weather-card-hero.has-province-badge,
.hvadrm-widget .weather-card-hero:has(.hvadrm-province-badge:not([style*="display: none"]):not(.hvadrm-hidden)) {
  padding-top: 1.65rem !important;
}

.hvadrm-widget .hvadrm-province-badge {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  z-index: 15 !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  padding: 5px 16px 5px 14px !important;
  border-top-left-radius: inherit !important;
  border-top-right-radius: 14px !important;
  border-bottom-right-radius: 14px !important;
  border-bottom-left-radius: 0 !important;
  font-size: 0.72rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.07em !important;
  text-transform: uppercase !important;
  line-height: 1.2 !important;
  margin: 0 !important;
  user-select: none !important;

  /* Aydınlık Mod ve Standart Görünüm: Belirgin koyu lacivert/siyah yazı & nöbetçi eczane benzeri gri-mavi sekme */
  background: #cbd5e1 !important;
  color: #0f172a !important;
  border-right: 1px solid rgba(100, 116, 139, 0.35) !important;
  border-bottom: 1px solid rgba(100, 116, 139, 0.35) !important;
  border-top: none !important;
  border-left: none !important;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.08) !important;
  transition: background 0.2s ease, color 0.2s ease !important;
}

.hvadrm-widget .hvadrm-province-badge[style*="display: none"],
.hvadrm-widget .hvadrm-province-badge.hvadrm-hidden {
  display: none !important;
}

/* Aydınlık Mod Garantisi */
:is(.hvadrm-widget.hvadrm-theme-acik, .hvadrm-widget.theme-light, .hvadrm-widget[data-theme="acik"], [data-theme="acik"], .hvadrm-theme-acik) .hvadrm-province-badge {
  background: #cbd5e1 !important;
  color: #0f172a !important;
  border-right: 1px solid rgba(100, 116, 139, 0.35) !important;
  border-bottom: 1px solid rgba(100, 116, 139, 0.35) !important;
}

/* Koyu ve Karanlık Mod Garantisi */
:is(.hvadrm-widget.hvadrm-theme-koyu, .hvadrm-widget.theme-dark, .hvadrm-widget.hvadrm-theme-karanlik, [data-theme="koyu"], [data-theme="karanlik"], .hvadrm-theme-karanlik) .hvadrm-province-badge {
  background: #334155 !important;
  color: #ffffff !important;
  border-right: 1px solid rgba(255, 255, 255, 0.15) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35) !important;
}

/* Likit Cam Mod Garantisi */
:is(.hvadrm-widget.hvadrm-theme-cam, .hvadrm-widget.theme-liquid-glass, [data-theme="cam"], .hvadrm-theme-cam) .hvadrm-province-badge {
  background: rgba(226, 232, 240, 0.85) !important;
  color: #0f172a !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border-right: 1px solid rgba(255, 255, 255, 0.45) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.45) !important;
}

@media (max-width: 768px) {
  .hvadrm-widget .weather-card-hero {
    padding-top: 0.9rem !important;
  }
  .hvadrm-widget .weather-card-hero.has-province-badge,
  .hvadrm-widget .weather-card-hero:has(.hvadrm-province-badge:not([style*="display: none"]):not(.hvadrm-hidden)) {
    padding-top: 1.55rem !important;
  }
  .hvadrm-widget .hvadrm-province-badge {
    font-size: 0.68rem !important;
    padding: 4px 12px 4px 10px !important;
    border-top-right-radius: 12px !important;
    border-bottom-right-radius: 12px !important;
  }
}

/* Şehir Başlığı */
.hvadrm-widget .hvadrm-city-title,
.hvadrm-widget #displayCity,
.hvadrm-widget .location-info h2 {
  font-size: clamp(1.25rem, 5.2vw, 2rem);
  font-weight: 800 !important;
  letter-spacing: -0.01em !important;
  line-height: 1.2 !important;
  text-transform: uppercase !important;
  display: block !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: clip !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  color: var(--text-primary) !important;
}

/* Bölüm Başlıkları */
.hvadrm-widget .hvadrm-overview-title,
.hvadrm-widget .overview-title {
  font-size: 1.08rem !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  margin: 0 !important;
  color: var(--text-primary) !important;
}

.hvadrm-widget .hvadrm-metrics-title {
  font-size: 1.12rem !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  margin: 0 !important;
  color: var(--text-primary) !important;
}

.hvadrm-widget .hvadrm-bulletin-title {
  font-size: 1.15rem !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  margin: 0 !important;
  color: var(--text-primary) !important;
}

.hvadrm-widget .hvadrm-sub-title {
  font-size: 0.95rem !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  margin: 0 !important;
  color: var(--text-primary) !important;
}

/* Açık Tema Başlık ve Metin Renkleri Garantisi */
:is(.hvadrm-widget.hvadrm-theme-acik, .hvadrm-widget.theme-light, .hvadrm-widget[data-theme="acik"], [data-theme="acik"], .hvadrm-theme-acik) :is(.hvadrm-city-title, #displayCity, .location-info h2, .hvadrm-overview-title, .overview-title, .hvadrm-metrics-title, .hvadrm-bulletin-title, .hvadrm-sub-title, .section-title, .temp-current, .weather-desc, .condition-text, .detail-val, .hourly-temp) {
  color: #0f172a !important;
}

:is(.hvadrm-widget.hvadrm-theme-acik, .hvadrm-widget.theme-light, .hvadrm-widget[data-theme="acik"], [data-theme="acik"], .hvadrm-theme-acik) :is(.date-text, .detail-label, .hourly-time, .forecast-date, .forecast-day-name) {
  color: #475569 !important;
}

/* Koyu ve Cam Tema Başlık ve Metin Renkleri Garantisi */
:is(.hvadrm-widget.hvadrm-theme-koyu, .hvadrm-widget.hvadrm-theme-karanlik, .hvadrm-widget.hvadrm-theme-cam, .hvadrm-widget.theme-dark, .hvadrm-widget.theme-liquid-glass, [data-theme="koyu"], [data-theme="karanlik"], [data-theme="cam"]) :is(.hvadrm-city-title, #displayCity, .location-info h2, .hvadrm-overview-title, .overview-title, .hvadrm-metrics-title, .hvadrm-bulletin-title, .hvadrm-sub-title, .section-title, .temp-current, .weather-desc, .condition-text, .detail-val, .hourly-temp) {
  color: #ffffff !important;
}

:is(.hvadrm-widget.hvadrm-theme-koyu, .hvadrm-widget.hvadrm-theme-karanlik, .hvadrm-widget.hvadrm-theme-cam, .hvadrm-widget.theme-dark, .hvadrm-widget.theme-liquid-glass, [data-theme="koyu"], [data-theme="karanlik"], [data-theme="cam"]) :is(.date-text, .detail-label, .hourly-time, .forecast-date, .forecast-day-name) {
  color: #cbd5e1 !important;
}

/* Diğer Etiketlerin Temadan Korunması */
.hvadrm-widget p {
  margin: 0 !important;
  padding: 0 !important;
}

.hvadrm-widget a {
  text-decoration: none !important;
  box-shadow: none !important;
  border: none !important;
}

.hvadrm-widget a:hover {
  text-decoration: none !important;
}

.hvadrm-widget ul,
.hvadrm-widget ol,
.hvadrm-widget li {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.hvadrm-widget button {
  text-transform: none !important;
  letter-spacing: normal !important;
}

.hvadrm-widget table,
.hvadrm-widget th,
.hvadrm-widget td {
  border: none !important;
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
}

.hvadrm-widget code,
.hvadrm-widget pre,
.hvadrm-widget .code-output-box code {
  font-family: 'Consolas', 'Courier New', monospace !important;
}

.hvadrm-widget {
  box-sizing: border-box;
  color: var(--text-primary);
  line-height: 1.5;
  width: 100%;
  max-width: none !important;
  margin: 0 auto;
  position: relative;
  background: var(--bg-gradient);
  border-radius: 28px;
  padding: 1.5rem;
  box-shadow: 0 20px 50px -15px rgba(0,0,0,0.5);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
.hvadrm-widget *, .hvadrm-widget *::before, .hvadrm-widget *::after {
  box-sizing: border-box;
}
.hvadrm-controls-bar {
  margin: 0 0 1.25rem 0 !important;
  padding: 0 !important;
}

.btn-icon svg {
  width: 18px !important;
  height: 18px !important;
  flex-shrink: 0;
  display: block;
}

/* Bulletins tab panels: strictly hide non-active panes */
.b-pane {
  display: none !important;
  animation: fadeIn 0.25s ease;
}
.b-pane.active {
  display: block !important;
}

/* ==========================================================
   Modern Weather Dashboard & WP Widget Styles
   ========================================================== */

.hvadrm-widget,
.hvadrm-widget.hvadrm-theme-koyu,
.hvadrm-widget[data-theme="koyu"] {
  --font-main: 'Outfit', 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  
  /* Theme: Glassmorphic Default */
  --bg-gradient: radial-gradient(circle at 10% 20%, rgba(30, 41, 59, 1) 0%, rgba(15, 23, 42, 1) 90%);
  --card-bg: rgba(30, 41, 59, 0.65);
  --card-border: rgba(255, 255, 255, 0.12);
  --card-shadow: 0 20px 45px -10px rgba(0, 0, 0, 0.5), 0 0 1px 1px rgba(255, 255, 255, 0.05) inset;
  
  --text-primary: #ffffff;
  --text-secondary: #cbd5e1;
  --text-muted: #94a3b8;
  
  --accent-cyan: #06b6d4;
  --accent-blue: #3b82f6;
  --accent-amber: #f59e0b;
  --accent-rose: #f43f5e;
  --accent-emerald: #10b981;
  --accent-violet: #8b5cf6;
  
  --glass-inner: rgba(255, 255, 255, 0.06);
  --glass-hover: rgba(255, 255, 255, 0.12);
  --radius-lg: 24px;
  --radius-md: 16px;
  --radius-sm: 10px;
}

/* Light Theme Mode (Daha Açık & Ferah) */
.hvadrm-widget.hvadrm-theme-acik,
.hvadrm-widget[data-theme="acik"],
.hvadrm-widget.theme-light,
body.theme-light .hvadrm-widget {
  --bg-gradient: radial-gradient(circle at 10% 20%, #ffffff 0%, #f1f5f9 55%, #e2e8f0 100%);
  --card-bg: rgba(255, 255, 255, 0.92);
  --card-border: rgba(226, 232, 240, 0.95);
  --card-shadow: 0 20px 40px -15px rgba(100, 116, 139, 0.14);
  --text-primary: #0f172a;
  --text-secondary: #475569;
  --text-muted: #64748b;
  --glass-inner: rgba(241, 245, 249, 0.85);
  --glass-hover: rgba(226, 232, 240, 0.95);
}

/* Dark Theme Mode */
.hvadrm-widget.hvadrm-theme-karanlik,
.hvadrm-widget[data-theme="karanlik"],
.hvadrm-widget.theme-dark,
body.theme-dark .hvadrm-widget {
  --bg-gradient: linear-gradient(135deg, #090d16 0%, #030712 100%);
  --card-bg: rgba(17, 24, 39, 0.9);
  --card-border: rgba(55, 65, 81, 0.5);
  --card-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.85);
  --text-primary: #ffffff;
  --text-secondary: #cbd5e1;
  --text-muted: #94a3b8;
  --glass-inner: rgba(31, 41, 55, 0.6);
  --glass-hover: rgba(55, 65, 81, 0.7);
}

/* 4. Seçenek: Liquid Glass (Akıcı Sıvı Cam) Ultra Premium Tema */
.hvadrm-widget.hvadrm-theme-cam,
.hvadrm-widget[data-theme="cam"],
.hvadrm-widget.theme-liquid-glass,
body.theme-liquid-glass .hvadrm-widget {
  --bg-gradient: 
    radial-gradient(ellipse at 15% 15%, rgba(6, 182, 212, 0.38) 0%, transparent 45%),
    radial-gradient(ellipse at 85% 15%, rgba(139, 92, 246, 0.35) 0%, transparent 45%),
    radial-gradient(ellipse at 50% 80%, rgba(236, 72, 153, 0.25) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 85%, rgba(14, 165, 233, 0.3) 0%, transparent 45%),
    linear-gradient(135deg, #060b17 0%, #02040a 100%);
  --card-bg: rgba(255, 255, 255, 0.08);
  --card-border: rgba(255, 255, 255, 0.22);
  --card-shadow: 
    inset 0 1.5px 1.5px 0 rgba(255, 255, 255, 0.5),
    inset 0 -1.5px 1.5px 0 rgba(0, 0, 0, 0.3),
    0 24px 50px -12px rgba(2, 6, 23, 0.8),
    0 0 20px rgba(56, 189, 248, 0.15);
  --text-primary: #ffffff;
  --text-secondary: #f1f5f9;
  --text-muted: #cbd5e1;
  --glass-inner: rgba(255, 255, 255, 0.09);
  --glass-hover: rgba(255, 255, 255, 0.18);
}

.hvadrm-widget,
.hvadrm-widget *,
.hvadrm-widget *::before,
.hvadrm-widget *::after {
  box-sizing: border-box;
}

/* WordPress body tag preserved */

/* Top Navigation Bar */
.top-header {
  background: rgba(15, 23, 42, 0.8);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--card-border);
  position: sticky;
  top: 0;
  z-index: 100;
  padding: 0.85rem 1.5rem;
}

:is(body.theme-light, .theme-light, .hvadrm-theme-acik) .top-header {
  background: rgba(255, 255, 255, 0.85);
}

.header-container {
  max-width: 1380px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.brand-badge {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-weight: 800;
  font-size: 1.2rem;
  letter-spacing: -0.02em;
}

.brand-icon {
  width: 40px;
  height: 40px;
  background: linear-gradient(135deg, #0284c7, #38bdf8);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(56, 189, 248, 0.35);
}

.brand-badge span.tag {
  font-size: 0.65rem;
  text-transform: uppercase;
  background: rgba(56, 189, 248, 0.15);
  color: var(--accent-cyan);
  padding: 3px 8px;
  border-radius: 20px;
  border: 1px solid rgba(56, 189, 248, 0.3);
  font-weight: 700;
}

.official-mgm-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid rgba(56, 189, 248, 0.35);
  padding: 6px 14px;
  border-radius: 12px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-primary);
  backdrop-filter: blur(10px);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
}

.official-mgm-badge strong {
  color: var(--accent-cyan);
}

.mgm-live-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 10px #10b981;
  animation: mgmPulse 2s infinite ease-in-out;
  flex-shrink: 0;
}

@keyframes mgmPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.45; transform: scale(0.85); }
}

:is(.theme-light, .hvadrm-theme-acik) .official-mgm-badge {
  background: rgba(255, 255, 255, 0.7);
  border-color: rgba(2, 132, 199, 0.3);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

:is(.theme-light, .hvadrm-theme-acik) .official-mgm-badge strong {
  color: #0284c7;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.segmented-control {
  display: inline-flex;
  background: var(--glass-inner);
  border: 1px solid var(--card-border);
  padding: 4px;
  border-radius: 12px;
  gap: 2px;
  max-width: 100%;
}

.segmented-btn {
  background: transparent;
  border: none;
  color: var(--text-secondary);
  padding: 6px 14px;
  font-size: 0.85rem;
  font-weight: 600;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: inherit;
  white-space: nowrap;
  flex-shrink: 0;
}

.segmented-btn.active {
  background: var(--accent-blue);
  color: #fff;
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.4);
}

.segmented-btn[data-theme="liquid-glass"].active {
  background: linear-gradient(135deg, #06b6d4 0%, #6366f1 50%, #ec4899 100%) !important;
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.6) !important;
  box-shadow: 0 4px 16px rgba(99, 102, 241, 0.5), inset 0 1px 1px rgba(255, 255, 255, 0.6) !important;
}

/* Hero Controls & City Selector */
.dashboard-controls {
  max-width: 1380px;
  margin: 1.5rem auto 0.5rem;
  padding: 0 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.tabs-nav {
  display: flex;
  gap: 0.5rem;
  background: var(--glass-inner);
  border: 1px solid var(--card-border);
  padding: 5px;
  border-radius: 14px;
}

.tab-btn {
  background: transparent;
  border: none;
  color: var(--text-secondary);
  padding: 8px 18px;
  border-radius: 10px;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: inherit;
}

.tab-btn:hover {
  color: var(--text-primary);
}

.tab-btn.active {
  background: var(--card-bg);
  color: var(--text-primary);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  border: 1px solid var(--card-border);
}

.city-search-box {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.action-buttons-group {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.btn-action-label {
  display: inline;
  font-size: 0.88rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
  color: inherit;
  line-height: 1;
}

.mobile-switches-bar {
  display: none !important;
}

.select-wrapper {
  position: relative;
}

.city-select {
  appearance: none !important;
  -webkit-appearance: none !important;
  background: var(--card-bg) !important;
  color: var(--text-primary) !important;
  border: 1px solid var(--card-border) !important;
  padding: 9px 34px 9px 14px !important;
  border-radius: 12px !important;
  font-size: 0.92rem !important;
  font-weight: 600 !important;
  font-family: inherit !important;
  cursor: pointer !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1) !important;
  outline: none !important;
  transition: border-color 0.2s, box-shadow 0.2s !important;
}

:is(.hvadrm-widget.hvadrm-theme-acik, .hvadrm-widget.theme-light, [data-theme="acik"], .hvadrm-theme-acik) .city-select {
  background: #ffffff !important;
  color: #0f172a !important;
  border: 1.5px solid #cbd5e1 !important;
}

.province-select {
  min-width: 175px !important;
}

.district-select {
  min-width: 165px !important;
}

.world-city-select {
  min-width: 175px !important;
}

.city-select:focus {
  border-color: var(--accent-blue) !important;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.25) !important;
}

.city-select option {
  background: #0f172a !important;
  color: #f8fafc !important;
  padding: 8px 12px !important;
}

:is(.hvadrm-widget.hvadrm-theme-acik, .hvadrm-widget.theme-light, [data-theme="acik"], .hvadrm-theme-acik) .city-select option {
  background: #ffffff !important;
  color: #0f172a !important;
}

.select-arrow {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  font-size: 0.7rem;
  color: var(--text-muted);
}

/* ==========================================================
   ÖZEL ŞIK DROPDOWN (İL & İLÇE SEÇİCİ - RESİM 2 TASARIMI)
   ========================================================== */
.hvadrm-native-hidden-select {
  position: absolute !important;
  opacity: 0 !important;
  width: 1px !important;
  height: 1px !important;
  pointer-events: none !important;
  clip: rect(0, 0, 0, 0) !important;
  overflow: hidden !important;
  margin: -1px !important;
  border: 0 !important;
  padding: 0 !important;
}

.select-wrapper.has-custom-dropdown .select-arrow {
  display: none !important;
}

.hvadrm-custom-select-container {
  position: relative;
  display: inline-flex;
  font-family: inherit;
  z-index: 100;
}

.hvadrm-custom-select-container.is-open {
  z-index: 10001;
}

.hvadrm-custom-select-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  height: 40px;
  min-width: 175px;
  padding: 0 14px;
  border-radius: 12px;
  background: var(--card-bg, #ffffff);
  color: var(--text-primary, #0f172a);
  border: 1.5px solid var(--card-border, #cbd5e1);
  font-family: inherit;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
  outline: none;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  user-select: none;
}

.province-wrapper .hvadrm-custom-select-trigger {
  min-width: 190px;
}

.district-wrapper .hvadrm-custom-select-trigger {
  min-width: 165px;
}

.world-city-wrapper .hvadrm-custom-select-trigger {
  min-width: 185px;
}

.hvadrm-custom-select-trigger:hover {
  border-color: #3b82f6;
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15);
}

.hvadrm-custom-select-container.is-open .hvadrm-custom-select-trigger {
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.2);
}

.hvadrm-trigger-label-group {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hvadrm-trigger-prefix {
  font-size: 0.8rem;
  font-weight: 500;
  color: #64748b;
}

:is(.theme-dark, [data-theme="koyu"], [data-theme="karanlik"], .theme-liquid-glass) .hvadrm-trigger-prefix {
  color: #94a3b8;
}

.hvadrm-trigger-plate-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 20px;
  padding: 0 5px;
  background: #f1f5f9;
  color: #334155;
  border-radius: 5px;
  font-weight: 800;
  font-size: 0.76rem;
  font-family: monospace, var(--font-main);
  letter-spacing: 0.02em;
}

:is(.theme-dark, [data-theme="koyu"], [data-theme="karanlik"], .theme-liquid-glass) .hvadrm-trigger-plate-badge {
  background: rgba(255, 255, 255, 0.12);
  color: #e2e8f0;
}

.hvadrm-trigger-name {
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--text-primary, #0f172a);
  display: inline-block;
}

.hvadrm-custom-chevron {
  flex-shrink: 0;
  color: #64748b;
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

:is(.theme-dark, [data-theme="koyu"], [data-theme="karanlik"], .theme-liquid-glass) .hvadrm-custom-chevron {
  color: #94a3b8;
}

.hvadrm-custom-select-container.is-open .hvadrm-custom-chevron {
  transform: rotate(180deg);
  color: #2563eb;
}

/* AÇILIR MENÜ PANELİ */
.hvadrm-custom-dropdown-panel {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 260px;
  max-width: 320px;
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 14px;
  box-shadow: 0 14px 35px -4px rgba(0, 0, 0, 0.18), 0 8px 16px -4px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px) scale(0.98);
  pointer-events: none;
  transition: opacity 0.2s cubic-bezier(0.16, 1, 0.3, 1), transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.2s;
  z-index: 99999;
}

.hvadrm-custom-select-container.is-open .hvadrm-custom-dropdown-panel {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

/* ARAMA KUTUSU (İL İÇİN) */
.hvadrm-dropdown-search-box {
  padding: 8px 10px !important;
  background: #f8fafc !important;
  border-bottom: 1px solid #e2e8f0 !important;
  box-sizing: border-box !important;
}

.hvadrm-search-input-wrapper {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  height: 38px !important;
  background: #ffffff !important;
  border: 1.5px solid #cbd5e1 !important;
  border-radius: 8px !important;
  padding: 0 10px !important;
  box-sizing: border-box !important;
  transition: border-color 0.2s, box-shadow 0.2s !important;
  cursor: text !important;
}

.hvadrm-search-input-wrapper:focus-within {
  border-color: #ef4444 !important; /* Resim 2'deki gibi dikkat çekici şık kenarlık */
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15) !important;
}

.hvadrm-search-icon {
  flex-shrink: 0 !important;
  width: 15px !important;
  height: 15px !important;
  color: #94a3b8 !important;
  margin-right: 8px !important;
  pointer-events: none !important;
  display: block !important;
}

.hvadrm-search-input {
  flex: 1 1 auto !important;
  width: 100% !important;
  min-width: 0 !important;
  height: 100% !important;
  border: none !important;
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  box-shadow: none !important;
  outline: none !important;
  font-family: inherit !important;
  font-size: 0.84rem !important;
  font-weight: 500 !important;
  color: #0f172a !important;
  line-height: normal !important;
}

.hvadrm-search-input::placeholder {
  color: #94a3b8 !important;
  font-size: 0.82rem !important;
  font-weight: 400 !important;
}

.hvadrm-search-clear-btn {
  flex-shrink: 0 !important;
  background: none !important;
  border: none !important;
  color: #94a3b8 !important;
  cursor: pointer !important;
  font-size: 14px !important;
  padding: 4px !important;
  margin-left: 4px !important;
  line-height: 1 !important;
  transition: color 0.15s !important;
}

.hvadrm-search-clear-btn:hover {
  color: #0f172a !important;
}

/* LİSTE */
.hvadrm-custom-options-list {
  max-height: 270px;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 4px 0;
}

.hvadrm-custom-options-list::-webkit-scrollbar {
  width: 5px;
}

.hvadrm-custom-options-list::-webkit-scrollbar-track {
  background: transparent;
}

.hvadrm-custom-options-list::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 10px;
}

.hvadrm-custom-options-list::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

/* SEÇENEK SATIRI */
.hvadrm-custom-option {
  display: flex;
  align-items: center;
  padding: 9px 14px;
  cursor: pointer;
  font-size: 0.86rem;
  color: #1e293b;
  border-bottom: 1px solid #f8fafc;
  transition: background 0.15s, color 0.15s;
  user-select: none;
}

.hvadrm-custom-option:hover {
  background: #f1f5f9;
  color: #0f172a;
}

/* SEÇİLİ ÖĞE (RESİM 2'DEKİ 15 BURDUR GİBİ SİYAH/KOYU ZEMİN) */
.hvadrm-custom-option.active {
  background: #0f172a !important;
  color: #ffffff !important;
  font-weight: 700 !important;
}

.hvadrm-option-plate {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 22px;
  padding: 0 4px;
  background: #f1f5f9;
  color: #475569;
  border-radius: 5px;
  font-weight: 800;
  font-size: 0.78rem;
  margin-right: 10px;
  font-family: monospace, var(--font-main);
}

.hvadrm-custom-option:hover .hvadrm-option-plate {
  background: #e2e8f0;
  color: #1e293b;
}

.hvadrm-custom-option.active .hvadrm-option-plate {
  background: rgba(255, 255, 255, 0.22) !important;
  color: #ffffff !important;
}

.hvadrm-option-text {
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.hvadrm-option-country-sub {
  font-size: 0.78rem;
  font-weight: 500;
  opacity: 0.72;
  margin-left: 5px;
  text-transform: capitalize;
}

.hvadrm-custom-option.active .hvadrm-option-country-sub {
  opacity: 0.9;
  color: #e2e8f0;
}

/* Liste Öğelerinin Sağ Tarafındaki Canlı Hava Durumu Derece Rozeti */
.hvadrm-option-temp-badge {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.82rem;
  font-weight: 750;
  min-width: 44px;
  text-align: right;
  color: #64748b;
  opacity: 0.9;
  padding: 2px 7px;
  border-radius: 6px;
  background: rgba(148, 163, 184, 0.12);
  user-select: none;
  pointer-events: none;
  transition: all 0.15s ease;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.hvadrm-custom-option:hover .hvadrm-option-temp-badge {
  color: #0284c7;
  background: rgba(2, 132, 199, 0.15);
  opacity: 1;
}

.hvadrm-custom-option.active .hvadrm-option-temp-badge {
  color: #ffffff !important;
  background: rgba(255, 255, 255, 0.22) !important;
  opacity: 1 !important;
}

:is(.theme-dark, [data-theme="koyu"], [data-theme="karanlik"], .theme-liquid-glass) .hvadrm-option-temp-badge {
  color: #94a3b8;
  background: rgba(255, 255, 255, 0.08);
}

:is(.theme-dark, [data-theme="koyu"], [data-theme="karanlik"], .theme-liquid-glass) .hvadrm-custom-option:hover .hvadrm-option-temp-badge {
  color: #38bdf8;
  background: rgba(56, 189, 248, 0.2);
}

:is(.theme-dark, [data-theme="koyu"], [data-theme="karanlik"], .theme-liquid-glass) .hvadrm-custom-option.active .hvadrm-option-temp-badge {
  color: #ffffff !important;
  background: rgba(255, 255, 255, 0.25) !important;
}

.hvadrm-no-results {
  padding: 20px 14px;
  text-align: center;
  color: #94a3b8;
  font-size: 0.82rem;
  font-weight: 500;
}

/* ==========================================================
   MUTLAK DROPDOWN VE BUTON İZOLASYONU (THEME IMMUNITY CONTROLS)
   WordPress temalarının button ve .entry-content kurallarının
   açılır menüleri ve butonları bozmasını 100% engeller!
   ========================================================== */

/* 1. TETİKLEYİCİ (DROPDOWN TRIGGER BUTONU) GENEL KORUMA */
html body .hvadrm-widget .hvadrm-custom-select-trigger,
html body .entry-content .hvadrm-widget .hvadrm-custom-select-trigger,
.hvadrm-widget button.hvadrm-custom-select-trigger,
.hvadrm-custom-select-trigger {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  height: 40px !important;
  min-width: 175px !important;
  padding: 0 14px !important;
  border-radius: 12px !important;
  font-family: inherit !important;
  font-size: 0.88rem !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  outline: none !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
  user-select: none !important;
  box-sizing: border-box !important;
}

/* AYDINLIK MOD (AÇIK TEMA): DROPDOWN TETİKLEYİCİSİ VE METİNLERİ (RESİM 1 GÜVENCESİ) */
:is(.hvadrm-widget.hvadrm-theme-acik, .hvadrm-widget.theme-light, .hvadrm-widget[data-theme="acik"], [data-theme="acik"], .hvadrm-theme-acik) .hvadrm-custom-select-trigger {
  background: #ffffff !important;
  color: #0f172a !important;
  border: 1.5px solid #cbd5e1 !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05) !important;
}

:is(.hvadrm-widget.hvadrm-theme-acik, .hvadrm-widget.theme-light, .hvadrm-widget[data-theme="acik"], [data-theme="acik"], .hvadrm-theme-acik) .hvadrm-custom-select-trigger:hover {
  background: #ffffff !important;
  border-color: #3b82f6 !important;
  color: #0f172a !important;
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15) !important;
}

:is(.hvadrm-widget.hvadrm-theme-acik, .hvadrm-widget.theme-light, .hvadrm-widget[data-theme="acik"], [data-theme="acik"], .hvadrm-theme-acik) .hvadrm-trigger-name {
  color: #0f172a !important;
  font-weight: 700 !important;
  display: inline-block !important;
}

:is(.hvadrm-widget.hvadrm-theme-acik, .hvadrm-widget.theme-light, .hvadrm-widget[data-theme="acik"], [data-theme="acik"], .hvadrm-theme-acik) .hvadrm-trigger-prefix {
  color: #64748b !important;
  font-size: 0.8rem !important;
  font-weight: 500 !important;
}

:is(.hvadrm-widget.hvadrm-theme-acik, .hvadrm-widget.theme-light, .hvadrm-widget[data-theme="acik"], [data-theme="acik"], .hvadrm-theme-acik) .hvadrm-trigger-plate-badge {
  background: #f1f5f9 !important;
  color: #334155 !important;
}

:is(.hvadrm-widget.hvadrm-theme-acik, .hvadrm-widget.theme-light, .hvadrm-widget[data-theme="acik"], [data-theme="acik"], .hvadrm-theme-acik) .hvadrm-custom-chevron {
  color: #64748b !important;
  stroke: #64748b !important;
}

/* KOYU VE CAM MOD: DROPDOWN TETİKLEYİCİSİ VE METİNLERİ */
:is(.hvadrm-widget.hvadrm-theme-koyu, .hvadrm-widget.hvadrm-theme-karanlik, .hvadrm-widget.hvadrm-theme-cam, .hvadrm-widget.theme-dark, .hvadrm-widget.theme-liquid-glass, [data-theme="koyu"], [data-theme="karanlik"], [data-theme="cam"]) .hvadrm-custom-select-trigger {
  background: rgba(15, 23, 42, 0.75) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.16) !important;
  color: #f8fafc !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3) !important;
}

:is(.hvadrm-widget.hvadrm-theme-koyu, .hvadrm-widget.hvadrm-theme-karanlik, .hvadrm-widget.hvadrm-theme-cam, .hvadrm-widget.theme-dark, .hvadrm-widget.theme-liquid-glass, [data-theme="koyu"], [data-theme="karanlik"], [data-theme="cam"]) .hvadrm-custom-select-trigger:hover {
  border-color: #38bdf8 !important;
  color: #ffffff !important;
}

:is(.hvadrm-widget.hvadrm-theme-koyu, .hvadrm-widget.hvadrm-theme-karanlik, .hvadrm-widget.hvadrm-theme-cam, .hvadrm-widget.theme-dark, .hvadrm-widget.theme-liquid-glass, [data-theme="koyu"], [data-theme="karanlik"], [data-theme="cam"]) .hvadrm-trigger-name {
  color: #ffffff !important;
  font-weight: 700 !important;
  display: inline-block !important;
}

:is(.hvadrm-widget.hvadrm-theme-koyu, .hvadrm-widget.hvadrm-theme-karanlik, .hvadrm-widget.hvadrm-theme-cam, .hvadrm-widget.theme-dark, .hvadrm-widget.theme-liquid-glass, [data-theme="koyu"], [data-theme="karanlik"], [data-theme="cam"]) .hvadrm-trigger-prefix {
  color: #94a3b8 !important;
}

:is(.hvadrm-widget.hvadrm-theme-koyu, .hvadrm-widget.hvadrm-theme-karanlik, .hvadrm-widget.hvadrm-theme-cam, .hvadrm-widget.theme-dark, .hvadrm-widget.theme-liquid-glass, [data-theme="koyu"], [data-theme="karanlik"], [data-theme="cam"]) .hvadrm-trigger-plate-badge {
  background: rgba(255, 255, 255, 0.12) !important;
  color: #e2e8f0 !important;
}

:is(.hvadrm-widget.hvadrm-theme-koyu, .hvadrm-widget.hvadrm-theme-karanlik, .hvadrm-widget.hvadrm-theme-cam, .hvadrm-widget.theme-dark, .hvadrm-widget.theme-liquid-glass, [data-theme="koyu"], [data-theme="karanlik"], [data-theme="cam"]) .hvadrm-custom-chevron {
  color: #94a3b8 !important;
  stroke: #94a3b8 !important;
}

:is(.theme-dark, [data-theme="koyu"], [data-theme="karanlik"], .theme-liquid-glass) .hvadrm-custom-dropdown-panel {
  background: rgba(15, 23, 42, 0.96);
  border-color: rgba(255, 255, 255, 0.18);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(16px);
}

:is(.theme-dark, [data-theme="koyu"], [data-theme="karanlik"], .theme-liquid-glass) .hvadrm-dropdown-search-box {
  background: rgba(255, 255, 255, 0.03) !important;
  border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}

:is(.theme-dark, [data-theme="koyu"], [data-theme="karanlik"], .theme-liquid-glass) .hvadrm-search-input-wrapper {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(255, 255, 255, 0.18) !important;
}

:is(.theme-dark, [data-theme="koyu"], [data-theme="karanlik"], .theme-liquid-glass) .hvadrm-search-input {
  color: #ffffff !important;
}

:is(.theme-dark, [data-theme="koyu"], [data-theme="karanlik"], .theme-liquid-glass) .hvadrm-custom-option {
  color: #e2e8f0;
  border-bottom-color: rgba(255, 255, 255, 0.04);
}

:is(.theme-dark, [data-theme="koyu"], [data-theme="karanlik"], .theme-liquid-glass) .hvadrm-custom-option:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
}

:is(.theme-dark, [data-theme="koyu"], [data-theme="karanlik"], .theme-liquid-glass) .hvadrm-custom-option.active {
  background: #2563eb !important;
  color: #ffffff !important;
}

:is(.theme-dark, [data-theme="koyu"], [data-theme="karanlik"], .theme-liquid-glass) .hvadrm-option-plate {
  background: rgba(255, 255, 255, 0.1);
  color: #cbd5e1;
}

/* MOBİL UYARLAMA */
@media (max-width: 600px) {
  .province-wrapper .hvadrm-custom-select-trigger,
  .district-wrapper .hvadrm-custom-select-trigger {
    min-width: 140px;
    padding: 0 10px;
  }
  .hvadrm-trigger-prefix {
    display: none;
  }
  .hvadrm-custom-dropdown-panel {
    min-width: 220px;
    max-width: calc(100vw - 32px);
  }
}

/* 2. KONUMUM VE YENİLE BUTONLARI (.btn-icon, #btnGeo, #btnRefresh) */
html body .hvadrm-widget .btn-icon,
html body .entry-content .hvadrm-widget .btn-icon,
.hvadrm-widget button.btn-icon,
.hvadrm-widget #btnGeo,
.hvadrm-widget #btnRefresh,
.btn-icon {
  background: var(--card-bg, #ffffff) !important;
  border: 1.5px solid var(--card-border, #cbd5e1) !important;
  color: var(--text-primary, #0f172a) !important;
  width: auto !important;
  min-width: 42px !important;
  height: 42px !important;
  padding: 0 14px !important;
  gap: 8px !important;
  border-radius: 12px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  outline: none !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  transition: all 0.2s !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05) !important;
  font-size: 0.88rem !important;
  font-weight: 600 !important;
  font-family: inherit !important;
  box-sizing: border-box !important;
}

/* AYDINLIK MOD (AÇIK TEMA): KONUM & YENİLE (RESİM 1'DEKİ BEYAZ KUTU SORUNUNU GİDERİR) */
:is(.hvadrm-widget.hvadrm-theme-acik, .hvadrm-widget.theme-light, .hvadrm-widget[data-theme="acik"], [data-theme="acik"], .hvadrm-theme-acik) .btn-icon,
.hvadrm-widget.hvadrm-theme-acik .btn-icon,
.hvadrm-widget[data-theme="acik"] .btn-icon {
  background: #ffffff !important;
  border: 1.5px solid #cbd5e1 !important;
  color: #0f172a !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05) !important;
}

:is(.hvadrm-widget.hvadrm-theme-acik, .hvadrm-widget.theme-light, .hvadrm-widget[data-theme="acik"], [data-theme="acik"], .hvadrm-theme-acik) .btn-icon:hover,
.hvadrm-widget.hvadrm-theme-acik .btn-icon:hover,
.hvadrm-widget[data-theme="acik"] .btn-icon:hover {
  background: #f8fafc !important;
  border-color: #0284c7 !important;
  color: #0284c7 !important;
  box-shadow: 0 4px 12px rgba(2, 132, 199, 0.15) !important;
}

:is(.hvadrm-widget.hvadrm-theme-acik, .hvadrm-widget.theme-light, .hvadrm-widget[data-theme="acik"], [data-theme="acik"], .hvadrm-theme-acik) .btn-icon .btn-action-label,
.hvadrm-widget.hvadrm-theme-acik .btn-icon .btn-action-label,
.hvadrm-widget[data-theme="acik"] .btn-icon .btn-action-label {
  color: #0f172a !important;
  display: inline-block !important;
  line-height: 1 !important;
}

:is(.hvadrm-widget.hvadrm-theme-acik, .hvadrm-widget.theme-light, .hvadrm-widget[data-theme="acik"], [data-theme="acik"], .hvadrm-theme-acik) .btn-icon:hover .btn-action-label,
.hvadrm-widget.hvadrm-theme-acik .btn-icon:hover .btn-action-label,
.hvadrm-widget[data-theme="acik"] .btn-icon:hover .btn-action-label {
  color: #0284c7 !important;
}

:is(.hvadrm-widget.hvadrm-theme-acik, .hvadrm-widget.theme-light, .hvadrm-widget[data-theme="acik"], [data-theme="acik"], .hvadrm-theme-acik) .btn-icon svg,
.hvadrm-widget.hvadrm-theme-acik .btn-icon svg,
.hvadrm-widget[data-theme="acik"] .btn-icon svg {
  stroke: #0284c7 !important;
  color: #0284c7 !important;
  vertical-align: middle !important;
  flex-shrink: 0 !important;
}

:is(.hvadrm-widget.hvadrm-theme-acik, .hvadrm-widget.theme-light, .hvadrm-widget[data-theme="acik"], [data-theme="acik"], .hvadrm-theme-acik) .btn-icon:hover svg,
.hvadrm-widget.hvadrm-theme-acik .btn-icon:hover svg,
.hvadrm-widget[data-theme="acik"] .btn-icon:hover svg {
  stroke: #0284c7 !important;
  color: #0284c7 !important;
}

/* KOYU VE CAM MOD: KONUM & YENİLE BUTONU */
:is(.hvadrm-widget.hvadrm-theme-koyu, .hvadrm-widget.hvadrm-theme-karanlik, .hvadrm-widget.hvadrm-theme-cam, .hvadrm-widget.theme-dark, .hvadrm-widget.theme-liquid-glass, [data-theme="koyu"], [data-theme="karanlik"], [data-theme="cam"]) .btn-icon,
.hvadrm-widget.hvadrm-theme-koyu .btn-icon,
.hvadrm-widget.hvadrm-theme-karanlik .btn-icon,
.hvadrm-widget.hvadrm-theme-cam .btn-icon {
  background: rgba(30, 41, 59, 0.65) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
}

:is(.hvadrm-widget.hvadrm-theme-koyu, .hvadrm-widget.hvadrm-theme-karanlik, .hvadrm-widget.hvadrm-theme-cam, .hvadrm-widget.theme-dark, .hvadrm-widget.theme-liquid-glass, [data-theme="koyu"], [data-theme="karanlik"], [data-theme="cam"]) .btn-icon:hover {
  background: rgba(255, 255, 255, 0.12) !important;
  border-color: #38bdf8 !important;
  color: #38bdf8 !important;
}

:is(.hvadrm-widget.hvadrm-theme-koyu, .hvadrm-widget.hvadrm-theme-karanlik, .hvadrm-widget.hvadrm-theme-cam, .hvadrm-widget.theme-dark, .hvadrm-widget.theme-liquid-glass, [data-theme="koyu"], [data-theme="karanlik"], [data-theme="cam"]) .btn-icon .btn-action-label {
  color: #ffffff !important;
  display: inline-block !important;
  line-height: 1 !important;
}

:is(.hvadrm-widget.hvadrm-theme-koyu, .hvadrm-widget.hvadrm-theme-karanlik, .hvadrm-widget.hvadrm-theme-cam, .hvadrm-widget.theme-dark, .hvadrm-widget.theme-liquid-glass, [data-theme="koyu"], [data-theme="karanlik"], [data-theme="cam"]) .btn-icon:hover .btn-action-label {
  color: #38bdf8 !important;
}

:is(.hvadrm-widget.hvadrm-theme-koyu, .hvadrm-widget.hvadrm-theme-karanlik, .hvadrm-widget.hvadrm-theme-cam, .hvadrm-widget.theme-dark, .hvadrm-widget.theme-liquid-glass, [data-theme="koyu"], [data-theme="karanlik"], [data-theme="cam"]) .btn-icon svg {
  stroke: #38bdf8 !important;
  color: #38bdf8 !important;
  vertical-align: middle !important;
  flex-shrink: 0 !important;
}

:is(.hvadrm-widget.hvadrm-theme-koyu, .hvadrm-widget.hvadrm-theme-karanlik, .hvadrm-widget.hvadrm-theme-cam, .hvadrm-widget.theme-dark, .hvadrm-widget.theme-liquid-glass, [data-theme="koyu"], [data-theme="karanlik"], [data-theme="cam"]) .btn-icon:hover svg {
  stroke: #38bdf8 !important;
  color: #38bdf8 !important;
}

.btn-icon.locating {
  border-color: var(--accent-cyan) !important;
  color: var(--accent-cyan) !important;
  animation: gpsPulse 1.2s infinite ease-in-out;
}

.hvadrm-widget .btn-geo.locating svg {
  animation: hvadrmSpin 0.85s linear infinite !important;
}

.hvadrm-widget .btn-geo:disabled,
.hvadrm-widget .btn-geo.locating {
  opacity: 0.8 !important;
  cursor: wait !important;
  pointer-events: none !important;
  border-color: var(--accent-cyan) !important;
}

@keyframes gpsPulse {
  0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(56, 189, 248, 0.7); }
  70% { transform: scale(1.04); box-shadow: 0 0 0 8px rgba(56, 189, 248, 0); }
  100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(56, 189, 248, 0); }
}

/* Yenile Butonu Yükleniyor / Devre Dışı Durumu */
.hvadrm-widget .btn-refresh.is-refreshing svg {
  animation: hvadrmSpin 0.75s linear infinite !important;
}

.hvadrm-widget .btn-refresh:disabled,
.hvadrm-widget .btn-refresh.is-refreshing {
  opacity: 0.65 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
  border-color: var(--accent-cyan) !important;
}

@keyframes hvadrmSpin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Main Container */
.main-wrapper {
  max-width: 1380px;
  margin: 1rem auto 3rem;
  padding: 0 1.5rem;
  width: 100%;
}

.tab-pane {
  display: none;
  animation: fadeIn 0.3s ease;
}

.tab-pane.active {
  display: block;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ==========================================================
   WP CARD COMPONENT (WIDGET PREVIEW)
   ========================================================== */
.widget-preview-layout {
  max-width: none !important;
  margin: 0 auto;
  width: 100%;
}

.weather-card-hero {
  background: var(--card-bg);
  backdrop-filter: blur(25px);
  -webkit-backdrop-filter: blur(25px);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-lg);
  padding: 2.2rem;
  box-shadow: var(--card-shadow);
  position: relative;
  overflow: hidden;
}

.weather-card-hero::before {
  content: '';
  position: absolute;
  top: -100px;
  right: -80px;
  width: 320px;
  height: 320px;
  background: radial-gradient(circle, rgba(56, 189, 248, 0.18) 0%, transparent 70%);
  pointer-events: none;
  border-radius: 50%;
}

/* Status Badge Top */
.card-top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.25rem;
}

.location-info h2 {
  font-size: 2rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.date-and-time-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.65rem;
  margin-top: 2px;
}

.date-badge,
.local-time-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 20px;
  padding: 3px 11px;
  font-size: 0.82rem;
  font-weight: 600;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  line-height: 1.4;
  white-space: nowrap;
  transition: all 0.2s ease;
}

.date-badge svg,
.local-time-badge svg {
  color: var(--accent-cyan, #06b6d4);
  flex-shrink: 0;
  width: 13px;
  height: 13px;
}

.date-badge .date-subtitle {
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
  margin: 0;
}

.local-time-badge strong {
  font-weight: 800;
  letter-spacing: 0.02em;
}

/* Unit Toggle (°C / °F) in Top Right Corner */
.unit-toggle-control {
  display: inline-flex;
  background: var(--glass-inner);
  border: 1px solid var(--card-border);
  border-radius: 20px;
  padding: 3px;
  gap: 2px;
  backdrop-filter: blur(12px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.unit-btn {
  background: transparent;
  border: none;
  color: var(--text-secondary);
  font-size: 0.85rem;
  font-weight: 700;
  padding: 5px 14px;
  border-radius: 16px;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  font-family: inherit;
  outline: none;
}

.unit-btn:hover {
  color: var(--text-primary);
}

.unit-btn.active {
  background: linear-gradient(135deg, #0284c7 0%, #38bdf8 100%);
  color: #ffffff;
  box-shadow: 0 2px 10px rgba(56, 189, 248, 0.4);
}

:is(.theme-light, .hvadrm-theme-acik) .unit-toggle-control {
  background: rgba(0, 0, 0, 0.05);
  border-color: rgba(0, 0, 0, 0.1);
}

:is(.theme-light, .hvadrm-theme-acik) .unit-btn {
  color: var(--text-secondary);
}

:is(.theme-light, .hvadrm-theme-acik) .unit-btn.active {
  background: var(--accent-blue);
  color: #ffffff;
}

/* Header Controls Group (Unit Toggle & Time Format Toggle side-by-side) */
.header-controls-group {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
}

.hvadrm-widget .header-controls-group .unit-toggle-control,
.hvadrm-widget .header-controls-group .time-format-segmented {
  height: 38px !important;
  display: inline-flex !important;
  align-items: center !important;
  padding: 3px !important;
  border-radius: 20px !important;
  gap: 2px !important;
  box-sizing: border-box !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}

.hvadrm-widget .header-controls-group .unit-btn,
.hvadrm-widget .header-controls-group .time-fmt-btn {
  height: 100% !important;
  min-height: 30px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 0.84rem !important;
  font-weight: 700 !important;
  padding: 0 13px !important;
  border-radius: 16px !important;
  line-height: 1 !important;
  box-sizing: border-box !important;
  white-space: nowrap !important;
}

:is(.theme-light, .hvadrm-theme-acik) .time-format-segmented {
  background: rgba(0, 0, 0, 0.05);
  border-color: rgba(0, 0, 0, 0.1);
}

:is(.theme-light, .hvadrm-theme-acik) .time-fmt-btn {
  color: var(--text-secondary);
}

:is(.theme-light, .hvadrm-theme-acik) .time-fmt-btn.active {
  background: var(--accent-blue);
  color: #ffffff !important;
}

/* Minimal Hero Display (Compact Temperature & Inline Metrics) */
.weather-hero-compact {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding-bottom: 1.25rem;
  margin-bottom: 1.25rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  flex-wrap: nowrap;
}

:is(.theme-light, .hvadrm-theme-acik) .weather-hero-compact {
  border-bottom-color: rgba(0, 0, 0, 0.08);
}

.hero-left-block {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
  flex: 0 0 auto;
}

.hero-weather-main-row {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  flex-wrap: nowrap;
}

.hero-left-block .date-and-time-row {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  margin: 0;
}

.desktop-datetime-slot {
  display: block;
  width: 100%;
}

.mobile-datetime-slot {
  display: none;
  width: 100%;
}

.temp-display-wrap {
  display: flex;
  align-items: flex-start;
  gap: 2px;
}

.temp-val {
  font-size: 3.4rem;
  font-weight: 800;
  line-height: 0.95;
  letter-spacing: -0.04em;
  background: linear-gradient(180deg, #ffffff 40%, #cbd5e1 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

:is(.theme-light, .hvadrm-theme-acik) .temp-val {
  background: linear-gradient(180deg, #0f172a 40%, #475569 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.temp-deg-unit {
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--accent-cyan);
  margin-top: 2px;
}

.hero-icon-wrap {
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-icon-wrap svg {
  width: 48px;
  height: 48px;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.25));
}

.condition-meta-wrap {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.condition-text {
  font-size: 1.18rem;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.2;
}

.feels-range-text {
  font-size: 0.85rem;
  color: var(--text-secondary);
  font-weight: 500;
}

/* 5'li Minimal Metrik Şeridi (Nem, Rüzgar, Basınç, UV İndeks, Ay) */
.hero-right-metrics {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  flex-wrap: nowrap;
}

.minimal-metric-chip {
  background: var(--glass-inner);
  border: 1px solid var(--card-border);
  border-radius: 12px;
  padding: 0.45rem 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.minimal-metric-chip:hover {
  background: var(--glass-hover);
  border-color: rgba(56, 189, 248, 0.3);
}

.chip-icon {
  font-size: 1.15rem;
  line-height: 1;
}

.chip-info {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

.chip-label {
  font-size: 0.68rem;
  color: var(--text-muted);
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.chip-value {
  font-size: 0.95rem;
  color: var(--text-primary);
  font-weight: 700;
}

@media (max-width: 900px) {
  .weather-hero-compact {
    flex-direction: column;
    align-items: flex-start;
  }
  .hero-right-metrics {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Hourly Timeline Rail */
.hourly-section {
  margin-top: 1.75rem;
}

.section-label {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.85rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.hourly-rail {
  display: flex;
  gap: 0.75rem;
  overflow-x: auto;
  padding-bottom: 0.85rem;
  scroll-behavior: smooth;
}

.hourly-rail::-webkit-scrollbar {
  height: 6px;
}

.hourly-rail::-webkit-scrollbar-thumb {
  background: var(--card-border);
  border-radius: 10px;
}

.hourly-item {
  flex: 0 0 74px;
  background: var(--glass-inner);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-sm);
  padding: 0.75rem 0.5rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.hourly-item:hover {
  background: var(--glass-hover);
  border-color: var(--accent-blue);
}

.hourly-item.now {
  background: rgba(59, 130, 246, 0.15);
  border-color: var(--accent-blue);
}

.hourly-time {
  font-size: 0.75rem;
  color: var(--text-secondary);
  font-weight: 600;
}

.hourly-temp {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-primary);
}

/* 7-Day Forecast Section (Integrated Inside Hero Card Below 24-Hour Forecast) */
.daily-forecast-section {
  margin-top: 2rem;
  padding-top: 1.75rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

:is(.theme-light, .hvadrm-theme-acik) .daily-forecast-section {
  border-top-color: rgba(0, 0, 0, 0.08);
}

/* ── Dünya Şehirleri: 3 Günlük Tek Satır (Row) Masaüstü Layout ── */
@media (min-width: 769px) {

  /* Liste: dikey sütun, 3 kart alt alta */
  .daily-list.world-city-list {
    flex-direction: column;
    gap: 6px;
    overflow-x: hidden;
  }

  /* Her kart: yatay, wrap'li — içerik tek satırda, bar alt satıra iner */
  .daily-list.world-city-list .daily-box-card {
    flex: none;
    width: 100%;
    min-width: 0;
    max-width: none;
    flex-direction: row;
    flex-wrap: wrap;           /* Bar alt satıra düşer */
    align-items: center;
    padding: 0.5rem 1rem 0.45rem;
    border-radius: 10px;
    gap: 0;
  }

  /* Gün adı + ŞİMDİ rozeti: sabit sol sütun */
  .daily-list.world-city-list .box-top-row {
    flex: 0 0 120px;
    margin-bottom: 0;
    justify-content: flex-start;
    align-items: center;
  }

  /* Sıcaklık max/min */
  .daily-list.world-city-list .box-temp-values.desktop-temps {
    flex: 0 0 85px;
    justify-content: flex-start;
    margin: 0;
    gap: 0.3rem;
  }

  .daily-list.world-city-list .box-temp-high {
    font-size: 1.1rem;
    line-height: 1;
  }

  .daily-list.world-city-list .box-temp-low {
    font-size: 0.82rem;
    line-height: 1;
  }

  /* Ikon + açıklama: kalan yeri doldurur */
  .daily-list.world-city-list .box-desktop-center {
    flex: 1 1 auto;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
  }

  .daily-list.world-city-list .box-icon-container {
    width: 24px;
    height: 24px;
    margin: 0;
    flex-shrink: 0;
  }

  .daily-list.world-city-list .box-icon-container svg {
    width: 22px;
    height: 22px;
  }

  .daily-list.world-city-list .box-condition-desc {
    margin-bottom: 0;
    font-size: 0.74rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Bar: tam genişlik, alt satırda ince şerit */
  .daily-list.world-city-list .daily-details-body {
    flex: 0 0 100%;           /* Yeni satıra geç, tam genişlik */
    flex-direction: row;
    align-items: center;
    width: 100%;
    padding-top: 0.3rem;
  }

  .daily-list.world-city-list .box-mini-bar-track {
    width: 100%;
    margin-bottom: 0;
  }

  /* Mobil elemanları gizli kal */
  .daily-list.world-city-list .daily-mobile-status,
  .daily-list.world-city-list .daily-mobile-right,
  .daily-list.world-city-list .daily-expand-chevron {
    display: none !important;
  }
}

.daily-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.daily-header-hint {
  font-size: 0.75rem;
  text-transform: none;
  color: var(--text-muted);
  font-weight: 500;
}

/* 5 Günlük Tahmin - Yanyana 5 Kutu (Kaydırılabilir & Tutup Çekilebilir Liste) */
.daily-list {
  display: flex;
  overflow-x: auto;
  gap: 12px;
  width: 100%;
  padding-bottom: 0.75rem;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x pan-y;
  scroll-snap-type: x proximity;
  cursor: grab;
  user-select: none;
  scrollbar-width: thin;
}

.daily-list.is-dragging {
  cursor: grabbing !important;
  scroll-behavior: auto !important;
  scroll-snap-type: none !important;
  user-select: none !important;
}

.daily-list.is-dragging * {
  cursor: grabbing !important;
  user-select: none !important;
}

.daily-box-card {
  flex: 1 0 195px;
  min-width: 195px;
  max-width: 250px;
  scroll-snap-align: start;
  background: var(--glass-inner);
  border: 1px solid var(--card-border);
  border-radius: 16px;
  padding: 1.1rem 0.75rem 0.95rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
  transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
  user-select: none;
}

/* Hatırlatma: Kullanıcı kuralı: "ÜSTÜNE GELİNCE YUKARI KAYMASIN" -> No translateY! */
.daily-box-card:hover {
  background: var(--glass-hover);
  border-color: rgba(56, 189, 248, 0.45);
  box-shadow: 0 0 16px rgba(56, 189, 248, 0.12);
}

.daily-box-card.today {
  background: rgba(37, 99, 235, 0.08);
  border-color: rgba(59, 130, 246, 0.45);
  box-shadow: inset 0 0 14px rgba(37, 99, 235, 0.08);
}

.box-top-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin-bottom: 0.45rem;
}

.daily-row-header {
  cursor: default;
}

.daily-row-left {
  display: flex;
  align-items: center;
  gap: 6px;
}

.daily-row-date-group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
}

.desktop-temps {
  display: flex;
}

.box-desktop-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.daily-mobile-status {
  display: none !important;
}

.daily-mobile-right {
  display: none !important;
}

.daily-expand-chevron {
  display: none !important;
}

.daily-details-body {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-height: none !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

.box-day-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: #ffffff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

:is(body.theme-light, .theme-light, .hvadrm-theme-acik) .box-day-title {
  color: #0f172a !important;
}

.box-day-subdate {
  font-size: 0.68rem;
  font-weight: 600;
  color: #94a3b8;
  letter-spacing: 0.02em;
}

:is(body.theme-light, .theme-light, .hvadrm-theme-acik) .box-day-subdate {
  color: #64748b !important;
}

.box-today-pill {
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  background: var(--accent-blue);
  color: #ffffff;
  padding: 2px 6px;
  border-radius: 6px;
}

.box-icon-container {
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0.2rem 0;
}

.box-icon-container svg {
  width: 34px;
  height: 34px;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.3));
}

.box-condition-desc {
  font-size: 0.72rem;
  color: #e2e8f0;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  margin-bottom: 0.55rem;
  line-height: 1.2;
}

:is(body.theme-light, .theme-light, .hvadrm-theme-acik) .box-condition-desc {
  color: #334155 !important;
}

.box-temp-values {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 0.45rem;
  margin: 0.35rem 0 0.25rem;
}

.box-temp-high {
  font-size: 1.55rem;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

:is(body.theme-light, .theme-light, .hvadrm-theme-acik) .box-temp-high {
  color: #0f172a !important;
}

.box-temp-low {
  font-size: 1.05rem;
  font-weight: 600;
  color: #cbd5e1;
  line-height: 1.1;
}

:is(body.theme-light, .theme-light, .hvadrm-theme-acik) .box-temp-low {
  color: #64748b !important;
}

.box-mini-bar-track {
  position: relative;
  width: 82%;
  height: 4px;
  margin-bottom: 0.75rem;
  display: flex;
  align-items: center;
}

.box-mini-bar-bg {
  position: absolute;
  left: 0;
  right: 0;
  height: 4px;
  background: rgba(0, 0, 0, 0.35);
  border-radius: 999px;
}

:is(.theme-light, .hvadrm-theme-acik) .box-mini-bar-bg {
  background: rgba(0, 0, 0, 0.1);
}

.box-mini-bar-fill {
  position: absolute;
  height: 4px;
  background: linear-gradient(90deg, #5eead4 0%, #a3e635 35%, #facc15 70%, #f97316 100%);
  border-radius: 999px;
  z-index: 1;
}

.box-current-dot {
  position: absolute;
  width: 7px;
  height: 7px;
  background: #ffffff;
  border-radius: 50%;
  border: 1.5px solid rgba(15, 23, 42, 0.9);
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.8), 0 0 6px rgba(255, 255, 255, 0.9);
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  pointer-events: none;
}

/* Ayın Evresi Rozeti */
.box-moon-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 100%;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  padding: 2px 6px;
  margin-bottom: 0.65rem;
  font-size: 0.68rem;
  color: #e2e8f0;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.box-moon-row:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(147, 197, 253, 0.45);
}

.box-moon-icon {
  font-size: 0.8rem;
  line-height: 1;
  filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.35));
}

.box-moon-text {
  font-weight: 600;
  color: #ffffff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 0.66rem;
}

.box-moon-illum {
  font-size: 0.6rem;
  color: #cbd5e1;
  font-weight: 500;
}

:is(body.theme-light, .theme-light, .hvadrm-theme-acik) .box-moon-row {
  background: rgba(0, 0, 0, 0.035);
  border-color: rgba(0, 0, 0, 0.08);
  color: #475569;
}

:is(body.theme-light, .theme-light, .hvadrm-theme-acik) .box-moon-row:hover {
  background: rgba(0, 0, 0, 0.06);
  border-color: rgba(59, 130, 246, 0.3);
}

:is(body.theme-light, .theme-light, .hvadrm-theme-acik) .box-moon-text {
  color: #0f172a !important;
}

:is(body.theme-light, .theme-light, .hvadrm-theme-acik) .box-moon-illum {
  color: #64748b !important;
}

.box-metrics-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 4px;
  width: 100%;
  margin-top: auto;
}

.box-metric-cell {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  padding: 4px 3px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-width: 0;
  overflow: hidden;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.box-metric-cell:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(56, 189, 248, 0.45);
}

:is(body.theme-light, .theme-light, .hvadrm-theme-acik) .box-metric-cell {
  background: rgba(0, 0, 0, 0.035);
  border-color: rgba(0, 0, 0, 0.08);
}

:is(body.theme-light, .theme-light, .hvadrm-theme-acik) .box-metric-cell:hover {
  background: rgba(0, 0, 0, 0.06);
  border-color: rgba(59, 130, 246, 0.35);
}

.box-metric-cell .m-icon {
  font-size: 0.72rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.box-metric-cell .m-val {
  font-size: 0.72rem;
  font-weight: 700;
  color: #ffffff !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  text-align: center;
  line-height: 1.2;
}

:is(body.theme-light, .theme-light, .hvadrm-theme-acik) .box-metric-cell .m-val {
  color: #0f172a !important;
}

.box-metric-cell .m-val small {
  font-size: 0.6rem;
  font-weight: 600;
  color: #cbd5e1 !important;
  margin-left: 2px;
}

:is(body.theme-light, .theme-light, .hvadrm-theme-acik) .box-metric-cell .m-val small {
  color: #475569 !important;
  font-weight: 500;
}

/* ==========================================================
   MINI TICKER PREVIEW (For Header / Sidebar in WP)
   ========================================================== */
.mini-preview-box {
  margin-top: 1.5rem;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-md);
  padding: 1.25rem;
}

.mini-ticker {
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  background: var(--glass-inner);
  border: 1px solid var(--card-border);
  padding: 8px 16px;
  border-radius: 30px;
  font-size: 0.9rem;
  font-weight: 600;
}

.mini-ticker .temp {
  color: var(--accent-cyan);
  font-weight: 700;
}

/* ==========================================================
   81 İL BATCH QUERY TAB
   ========================================================== */
.batch-header-box {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-lg);
  padding: 2rem;
  margin-bottom: 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1.5rem;
  box-shadow: var(--card-shadow);
}

.batch-info h3 {
  font-size: 1.6rem;
  font-weight: 800;
  margin-bottom: 0.35rem;
}

.benchmark-badge {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  background: var(--glass-inner);
  border: 1px solid var(--card-border);
  padding: 1rem 1.5rem;
  border-radius: var(--radius-md);
}

.stat-item {
  display: flex;
  flex-direction: column;
}

.stat-val {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--accent-cyan);
}

.stat-label {
  font-size: 0.75rem;
  color: var(--text-muted);
  text-transform: uppercase;
}

.btn-refresh-batch {
  background: linear-gradient(135deg, var(--accent-blue), #2563eb);
  color: white;
  border: none;
  padding: 12px 24px;
  border-radius: 12px;
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.4);
  transition: all 0.2s;
  font-family: inherit;
}

.btn-refresh-batch:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(37, 99, 235, 0.5);
}

.search-filter-box {
  width: 100%;
  margin-top: 1rem;
}

.search-input {
  width: 100%;
  background: var(--glass-inner);
  border: 1px solid var(--card-border);
  color: var(--text-primary);
  padding: 12px 18px;
  border-radius: 12px;
  font-size: 0.95rem;
  font-family: inherit;
  outline: none;
  transition: border-color 0.2s;
}

.search-input:focus {
  border-color: var(--accent-blue);
}

.cities-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1rem;
}

.city-card-mini {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-md);
  padding: 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  transition: all 0.2s;
}

.city-card-mini:hover {
  transform: translateY(-3px);
  border-color: var(--accent-cyan);
  box-shadow: 0 8px 20px -6px rgba(0, 0, 0, 0.3);
}

.mini-city-name {
  font-weight: 700;
  font-size: 0.95rem;
}

.mini-city-plate {
  font-size: 0.7rem;
  color: var(--text-muted);
  font-weight: 600;
}

.mini-city-temp {
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--accent-cyan);
}

/* ==========================================================
   SHORTCODE GENERATOR TAB
   ========================================================== */
.code-generator-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
}

@media (max-width: 900px) {
  .code-generator-grid {
    grid-template-columns: 1fr;
  }
}

.gen-panel {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-lg);
  padding: 2rem;
  box-shadow: var(--card-shadow);
}

.gen-panel h3 {
  font-size: 1.4rem;
  font-weight: 800;
  margin-bottom: 1.5rem;
}

.form-group {
  margin-bottom: 1.25rem;
}

.form-group label {
  display: block;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-secondary);
  margin-bottom: 0.4rem;
}

.form-control {
  width: 100%;
  background: var(--glass-inner);
  border: 1px solid var(--card-border);
  color: var(--text-primary);
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 0.95rem;
  font-family: inherit;
  outline: none;
}

.code-output-box {
  background: #0f172a;
  border: 1px solid var(--card-border);
  border-radius: 12px;
  padding: 1.25rem;
  margin: 1.5rem 0;
  position: relative;
}

.code-output-box code {
  font-family: 'Consolas', 'Courier New', monospace;
  font-size: 1rem;
  color: #38bdf8;
  word-break: break-all;
}

.btn-copy {
  background: var(--accent-blue);
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 10px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: inherit;
  transition: opacity 0.2s;
}

.btn-copy:hover {
  opacity: 0.9;
}

/* Loading Overlay */
.loading-indicator {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 3px solid rgba(255,255,255,0.2);
  border-radius: 50%;
  border-top-color: var(--accent-cyan);
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ==========================================================
   SVG WEATHER ANIMATIONS (5 İKON PAKETİ)
   ========================================================== */

/* 0. VARSAYILAN PAKET */
.sun-rays {
  transform-origin: 12px 12px;
  animation: rotateRays 20s linear infinite;
}
@keyframes rotateRays {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.rain-drop {
  animation: rainFall 1.2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
.drop-2 { animation-delay: 0.25s; }
.drop-3 { animation-delay: 0.5s; }
@keyframes rainFall {
  0% { transform: translateY(-4px); opacity: 0; }
  50% { opacity: 1; }
  100% { transform: translateY(4px); opacity: 0; }
}

.lightning-flash {
  animation: lightningPulse 2.5s ease-in-out infinite;
}
@keyframes lightningPulse {
  0%, 80%, 100% { opacity: 0.9; transform: scale(1); }
  85% { opacity: 1; filter: drop-shadow(0 0 6px #fef08a); transform: scale(1.05); }
}

/* 1. APPLE iOS WEATHER STYLE (.pack-ios) */
.pack-ios .ios-sun-corona {
  transform-origin: 12px 12px;
  animation: iosSunCorona 3.2s ease-in-out infinite alternate;
}
@keyframes iosSunCorona {
  0% { transform: scale(0.92); opacity: 0.2; }
  100% { transform: scale(1.18); opacity: 0.45; }
}

.pack-ios .ios-sun-rays {
  transform-origin: 12px 12px;
  animation: iosSunSpin 28s linear infinite;
}
@keyframes iosSunSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.pack-ios .ios-star-1 {
  animation: iosStarTwinkle 2.4s ease-in-out infinite;
}
.pack-ios .ios-star-2 {
  animation: iosStarTwinkle 2.4s ease-in-out 1.2s infinite;
}
@keyframes iosStarTwinkle {
  0%, 100% { opacity: 0.25; transform: scale(0.8); }
  50% { opacity: 1; transform: scale(1.3); }
}

.pack-ios .ios-cloud-float {
  animation: iosCloudFloat 4s ease-in-out infinite alternate;
}
@keyframes iosCloudFloat {
  0% { transform: translateY(0px); }
  100% { transform: translateY(-1.5px); }
}

.pack-ios .ios-sun-subtle {
  animation: iosSunBob 3.5s ease-in-out infinite alternate;
}
@keyframes iosSunBob {
  0% { transform: translateY(0); }
  100% { transform: translateY(-1.5px); }
}

.pack-ios .ios-rain-drop {
  animation: iosRainSlide 1s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
.pack-ios .ios-drop-1 { animation-delay: 0s; }
.pack-ios .ios-drop-2 { animation-delay: 0.3s; }
.pack-ios .ios-drop-3 { animation-delay: 0.6s; }
@keyframes iosRainSlide {
  0% { transform: translate(1px, -4px); opacity: 0; }
  35% { opacity: 1; }
  80% { opacity: 1; }
  100% { transform: translate(-1px, 4px); opacity: 0; }
}

.pack-ios .ios-snow-flake {
  animation: iosSnowFlutter 2.4s ease-in-out infinite;
}
.pack-ios .ios-flake-1 { animation-delay: 0s; }
.pack-ios .ios-flake-2 { animation-delay: 0.8s; }
.pack-ios .ios-flake-3 { animation-delay: 1.6s; }
@keyframes iosSnowFlutter {
  0% { transform: translateY(-3px) rotate(0deg); opacity: 0; }
  30% { opacity: 1; }
  70% { opacity: 0.9; }
  100% { transform: translateY(4px) rotate(90deg); opacity: 0; }
}

.pack-ios .ios-lightning-flash {
  animation: iosLightningFlash 3s ease-in-out infinite;
  transform-origin: 12px 14px;
}
@keyframes iosLightningFlash {
  0%, 78%, 100% { opacity: 0.85; filter: drop-shadow(0 0 1px #eab308); transform: scale(1); }
  80% { opacity: 1; filter: drop-shadow(0 0 8px #fef08a); transform: scale(1.06); }
  83% { opacity: 0.35; transform: scale(0.98); }
  86% { opacity: 1; filter: drop-shadow(0 0 10px #fef08a); transform: scale(1.08); }
  90% { opacity: 0.9; }
}

.pack-ios .ios-fog-1 { animation: iosFogSway 3.2s ease-in-out infinite alternate; }
.pack-ios .ios-fog-2 { animation: iosFogSway 4.2s ease-in-out 0.5s infinite alternate-reverse; }
.pack-ios .ios-fog-3 { animation: iosFogSway 3.6s ease-in-out 1s infinite alternate; }
@keyframes iosFogSway {
  0% { transform: translateX(-2px); }
  100% { transform: translateX(2px); }
}

/* 2. GOOGLE MATERIAL YOU STYLE (.pack-google) */
.pack-google .google-sun-rays {
  transform-origin: 12px 12px;
  animation: googleSunSpin 14s linear infinite;
}
@keyframes googleSunSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.pack-google .google-moon-rock {
  transform-origin: 12px 12px;
  animation: googleMoonRock 4s ease-in-out infinite alternate;
}
@keyframes googleMoonRock {
  0% { transform: rotate(-8deg); }
  100% { transform: rotate(8deg); }
}

.pack-google .google-cloud-drift {
  animation: googleCloudDrift 3.6s ease-in-out infinite alternate;
}
@keyframes googleCloudDrift {
  0% { transform: translateX(-1px) translateY(0); }
  100% { transform: translateX(1px) translateY(-1.5px); }
}

.pack-google .google-sun-bob {
  animation: googleSunBob 3s ease-in-out infinite alternate;
}
@keyframes googleSunBob {
  0% { transform: translateY(0); }
  100% { transform: translateY(-2px); }
}

.pack-google .google-drop {
  animation: googleDropBounce 1.1s cubic-bezier(0.2, 0.8, 0.4, 1) infinite;
}
.pack-google .google-drop-1 { animation-delay: 0s; }
.pack-google .google-drop-2 { animation-delay: 0.35s; }
.pack-google .google-drop-3 { animation-delay: 0.7s; }
@keyframes googleDropBounce {
  0% { transform: translateY(-3px) scaleY(0.7); opacity: 0; }
  30% { transform: translateY(0) scaleY(1.1); opacity: 1; }
  70% { transform: translateY(2px) scaleY(1); opacity: 1; }
  100% { transform: translateY(5px) scaleY(0.6); opacity: 0; }
}

.pack-google .google-snow {
  animation: googleSnowSpin 3.2s linear infinite;
}
.pack-google .google-snow-1 { animation-delay: 0s; }
.pack-google .google-snow-2 { animation-delay: 0.9s; }
.pack-google .google-snow-3 { animation-delay: 1.8s; }
@keyframes googleSnowSpin {
  0% { transform: translateY(-2px) rotate(0deg); opacity: 0.3; }
  50% { transform: translateY(1px) rotate(180deg); opacity: 1; }
  100% { transform: translateY(3px) rotate(360deg); opacity: 0.3; }
}

.pack-google .google-bolt-pop {
  animation: googleBoltPop 2.8s ease-in-out infinite;
  transform-origin: 13px 16px;
}
@keyframes googleBoltPop {
  0%, 75%, 100% { opacity: 0.9; transform: scale(1); }
  80% { opacity: 1; transform: scale(1.12); filter: drop-shadow(0 0 5px #ffd54f); }
  85% { opacity: 0.3; transform: scale(0.95); }
  90% { opacity: 1; transform: scale(1.08); filter: drop-shadow(0 0 7px #ffd54f); }
}

.pack-google .google-fog-1 { animation: googleFogPulse 2.8s ease-in-out infinite alternate; }
.pack-google .google-fog-2 { animation: googleFogPulse 3.4s ease-in-out 0.4s infinite alternate-reverse; }
.pack-google .google-fog-3 { animation: googleFogPulse 3s ease-in-out 0.8s infinite alternate; }
@keyframes googleFogPulse {
  0% { transform: scaleX(0.92); opacity: 0.7; }
  100% { transform: scaleX(1.06); opacity: 1; }
}

/* 3. 3D GLASSMORPHIC & CLAY STYLE (.pack-3d) */
.pack-3d .clay-sun-aura {
  transform-origin: 12px 12px;
  animation: clayAuraPulse 3s ease-in-out infinite alternate;
}
@keyframes clayAuraPulse {
  0% { transform: scale(0.9); opacity: 0.18; }
  100% { transform: scale(1.2); opacity: 0.45; }
}

.pack-3d .clay-sun-body,
.pack-3d .clay-moon-body {
  animation: clayFloat 4s ease-in-out infinite alternate;
}
@keyframes clayFloat {
  0% { transform: translateY(0); }
  100% { transform: translateY(-1.8px); }
}

.pack-3d .clay-cloud-float {
  animation: clayCloudFloat 4.2s ease-in-out infinite alternate;
}
@keyframes clayCloudFloat {
  0% { transform: translateY(0); }
  100% { transform: translateY(-1.5px); }
}

.pack-3d .clay-drop {
  animation: clayDropFall 1.2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
.pack-3d .clay-drop-1 { animation-delay: 0s; }
.pack-3d .clay-drop-2 { animation-delay: 0.35s; }
.pack-3d .clay-drop-3 { animation-delay: 0.7s; }
@keyframes clayDropFall {
  0% { transform: translateY(-3px); opacity: 0; }
  40% { opacity: 1; }
  80% { opacity: 1; }
  100% { transform: translateY(4px); opacity: 0; }
}

.pack-3d .clay-snow-flake {
  animation: claySnowGlint 2.4s ease-in-out infinite;
}
.pack-3d .clay-flake-1 { animation-delay: 0s; }
.pack-3d .clay-flake-2 { animation-delay: 0.8s; }
.pack-3d .clay-flake-3 { animation-delay: 1.6s; }
@keyframes claySnowGlint {
  0%, 100% { transform: translateY(-1px); opacity: 0.5; }
  50% { transform: translateY(2px); opacity: 1; filter: drop-shadow(0 0 4px #7dd3fc); }
}

.pack-3d .clay-internal-glow {
  transform-origin: 12px 15px;
  animation: clayStormGlow 3s ease-in-out infinite;
}
@keyframes clayStormGlow {
  0%, 75%, 100% { opacity: 0.1; transform: scale(0.8); }
  80% { opacity: 0.85; transform: scale(1.3); }
  83% { opacity: 0.2; transform: scale(1); }
  86% { opacity: 0.95; transform: scale(1.4); }
  90% { opacity: 0.15; }
}

.pack-3d .clay-bolt {
  animation: clayBoltFlash 3s ease-in-out infinite;
}
@keyframes clayBoltFlash {
  0%, 78%, 100% { opacity: 0.85; }
  80% { opacity: 1; filter: drop-shadow(0 0 8px #f59e0b); }
  83% { opacity: 0.3; }
  86% { opacity: 1; filter: drop-shadow(0 0 10px #f59e0b); }
}

.pack-3d .clay-fog-1 { animation: clayFogDrift 3.6s ease-in-out infinite alternate; }
.pack-3d .clay-fog-2 { animation: clayFogDrift 4.4s ease-in-out 0.5s infinite alternate-reverse; }
.pack-3d .clay-fog-3 { animation: clayFogDrift 3.8s ease-in-out 1s infinite alternate; }
@keyframes clayFogDrift {
  0% { transform: translateX(-1.5px); opacity: 0.65; }
  100% { transform: translateX(1.5px); opacity: 1; }
}

/* 4. MINIMALIST MONOLINE MODERN ART (.pack-minimal) */
.pack-minimal .mono-sun-rotate {
  transform-origin: 12px 12px;
  animation: monoSunSpin 24s linear infinite;
}
@keyframes monoSunSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.pack-minimal .mono-star-pulse {
  transform-origin: 18px 7.4px;
  animation: monoStarPulse 2.2s ease-in-out infinite;
}
@keyframes monoStarPulse {
  0%, 100% { transform: scale(0.8); opacity: 0.35; }
  50% { transform: scale(1.3); opacity: 1; }
}

.pack-minimal .mono-float {
  animation: monoFloat 3.8s ease-in-out infinite alternate;
}
@keyframes monoFloat {
  0% { transform: translateY(0); }
  100% { transform: translateY(-1.5px); }
}

.pack-minimal .mono-wind-stream {
  animation: monoWindDash 2.5s linear infinite;
}
@keyframes monoWindDash {
  0% { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: -10; }
}

.pack-minimal .mono-rain-line {
  animation: monoRainCascade 1s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
.pack-minimal .mono-line-1 { animation-delay: 0s; }
.pack-minimal .mono-line-2 { animation-delay: 0.3s; }
.pack-minimal .mono-line-3 { animation-delay: 0.6s; }
@keyframes monoRainCascade {
  0% { transform: translateY(-3px); opacity: 0; }
  40% { opacity: 1; }
  100% { transform: translateY(3px); opacity: 0; }
}

.pack-minimal .mono-snow {
  animation: monoSnowSpin 4s linear infinite;
}
.pack-minimal .mono-snow-1 { animation-delay: 0s; }
.pack-minimal .mono-snow-2 { animation-delay: 1.2s; }
.pack-minimal .mono-snow-3 { animation-delay: 2.4s; }
@keyframes monoSnowSpin {
  from { transform: translateY(-1px) rotate(0deg); }
  to { transform: translateY(2px) rotate(360deg); }
}

.pack-minimal .mono-bolt-flash {
  animation: monoBoltFlash 3s ease-in-out infinite;
}
@keyframes monoBoltFlash {
  0%, 80%, 100% { opacity: 0.85; filter: none; }
  84% { opacity: 1; filter: drop-shadow(0 0 4px #facc15); }
  87% { opacity: 0.3; }
  90% { opacity: 1; filter: drop-shadow(0 0 6px #facc15); }
}

.pack-minimal .mono-fog-1 { animation: monoFogSlide 3s ease-in-out infinite alternate; }
.pack-minimal .mono-fog-2 { animation: monoFogSlide 4s ease-in-out 0.5s infinite alternate-reverse; }
.pack-minimal .mono-fog-3 { animation: monoFogSlide 3.5s ease-in-out 1s infinite alternate; }
@keyframes monoFogSlide {
  0% { stroke-dashoffset: 0; transform: translateX(-1px); }
  100% { stroke-dashoffset: 6; transform: translateX(1px); }
}

/* ==========================================================
   METEOROLOJİK UYARI & MGM RESMİ BÜLTEN BİLEŞENLERİ
   ========================================================== */

/* Uyarı Şeridi (Alert Banner) */
.weather-alert-banner {
  background: rgba(245, 158, 11, 0.12);
  border: 1px solid rgba(245, 158, 11, 0.35);
  border-radius: var(--radius-md);
  padding: 1rem 1.4rem;
  margin-bottom: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  box-shadow: 0 8px 24px -6px rgba(245, 158, 11, 0.2);
  position: relative;
  overflow: hidden;
  animation: fadeIn 0.3s ease;
}

.weather-alert-banner::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 5px;
  background: var(--accent-amber);
  border-radius: 4px 0 0 4px;
}

.alert-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.alert-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.75rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: rgba(245, 158, 11, 0.2);
  color: #fbbf24;
  padding: 3px 10px;
  border-radius: 12px;
  border: 1px solid rgba(245, 158, 11, 0.4);
}

.alert-pulse-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #f59e0b;
  box-shadow: 0 0 8px #f59e0b;
  animation: pulseWarning 1.5s infinite;
}

@keyframes pulseWarning {
  0% { transform: scale(0.9); opacity: 0.7; }
  50% { transform: scale(1.3); opacity: 1; }
  100% { transform: scale(0.9); opacity: 0.7; }
}

.alert-item {
  font-size: 0.9rem;
  color: #fef3c7;
  line-height: 1.5;
  padding-left: 0.5rem;
}

:is(body.theme-light, .theme-light, .hvadrm-theme-acik) .alert-item {
  color: #92400e;
}

/* ==========================================================
   12'Lİ DETAYLI METEOROLOJİK PARAMETRELER PANELİ
   ========================================================== */
.detailed-metrics-section {
  grid-column: 1 / -1;
  margin-top: 1.5rem;
  background: var(--card-bg);
  backdrop-filter: blur(25px);
  -webkit-backdrop-filter: blur(25px);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-lg);
  padding: 1.75rem 2rem;
  box-shadow: var(--card-shadow);
  animation: fadeIn 0.3s ease;
}

.section-title-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.25rem;
  padding-bottom: 0.85rem;
  border-bottom: 1px solid var(--card-border);
  flex-wrap: wrap;
  gap: 0.75rem;
}

.section-title-icon {
  font-size: 1.4rem;
  background: var(--glass-inner);
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--card-border);
}

.detailed-metrics-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.15rem;
}

.metric-card {
  background: rgba(15, 23, 42, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  padding: 1.25rem 1.35rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 175px;
  position: relative;
  overflow: hidden;
  transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
  user-select: none;
}

:is(body.theme-light, .theme-light, .hvadrm-theme-acik) .detailed-metrics-section {
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(226, 232, 240, 0.95);
  box-shadow: 0 16px 36px -10px rgba(100, 116, 139, 0.12);
}

:is(body.theme-light, .theme-light, .hvadrm-theme-acik) .section-title-wrap {
  border-bottom-color: rgba(226, 232, 240, 0.85);
}

:is(body.theme-light, .theme-light, .hvadrm-theme-acik) .section-title-icon {
  background: #f1f5f9;
  border-color: #e2e8f0;
}

:is(body.theme-light, .theme-light, .hvadrm-theme-acik) .metric-card {
  background: #ffffff;
  border: 1px solid rgba(226, 232, 240, 0.95);
  box-shadow: 0 4px 14px -2px rgba(148, 163, 184, 0.12), 0 1px 3px 0 rgba(0, 0, 0, 0.03);
}

.metric-card:hover {
  background: rgba(30, 41, 59, 0.7);
  border-color: rgba(56, 189, 248, 0.35);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}

:is(body.theme-light, .theme-light, .hvadrm-theme-acik) .metric-card:hover {
  background: #ffffff;
  border-color: rgba(56, 189, 248, 0.7);
  box-shadow: 0 10px 24px -4px rgba(56, 189, 248, 0.18), 0 2px 6px 0 rgba(0, 0, 0, 0.04);
}

:is(body.theme-liquid-glass, .theme-liquid-glass, .hvadrm-theme-cam) .detailed-metrics-section {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(15, 23, 42, 0.55) 100%);
  border: 1px solid rgba(255, 255, 255, 0.22);
  backdrop-filter: blur(28px) saturate(190%);
  box-shadow: inset 0 1.5px 1.5px 0 rgba(255, 255, 255, 0.45), 0 20px 45px -10px rgba(2, 6, 23, 0.7);
}

:is(body.theme-liquid-glass, .theme-liquid-glass, .hvadrm-theme-cam) .metric-card {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.03) 100%);
  border: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow: inset 0 1px 1.5px 0 rgba(255, 255, 255, 0.45), 0 10px 25px -5px rgba(0, 0, 0, 0.45);
}

:is(body.theme-liquid-glass, .theme-liquid-glass, .hvadrm-theme-cam) .metric-card:hover {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.06) 100%);
  border-color: rgba(56, 189, 248, 0.65);
  box-shadow: inset 0 1.5px 1.5px 0 rgba(255, 255, 255, 0.6), 0 16px 36px -6px rgba(56, 189, 248, 0.3);
  transform: translateY(-2px);
}

.card-header-title {
  font-size: 0.76rem;
  font-weight: 700;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 0.5rem;
}

:is(body.theme-light, .theme-light, .hvadrm-theme-acik) .card-header-title {
  color: #64748b;
}

.card-top-content {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
  min-height: 52px;
}

.card-big-num {
  font-size: 1.95rem;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: -0.03em;
  line-height: 1;
}

:is(body.theme-light, .theme-light, .hvadrm-theme-acik) .card-big-num {
  color: #0f172a;
}

.card-top-visual {
  width: 80px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.card-bottom-info {
  margin-top: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.card-status-line {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.84rem;
  font-weight: 700;
  color: var(--text-primary);
}

.card-subtext {
  font-size: 0.74rem;
  color: var(--text-muted);
  line-height: 1.35;
}

.status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}

.status-dot.cyan { background: #38bdf8; box-shadow: 0 0 8px rgba(56, 189, 248, 0.6); }
.status-dot.green { background: #10b981; box-shadow: 0 0 8px rgba(16, 185, 129, 0.6); }
.status-dot.amber { background: #f59e0b; box-shadow: 0 0 8px rgba(245, 158, 11, 0.6); }
.status-dot.orange { background: #f97316; box-shadow: 0 0 8px rgba(249, 115, 22, 0.6); }
.status-dot.red { background: #ef4444; box-shadow: 0 0 8px rgba(239, 68, 68, 0.6); }

/* Sparkline SVG */
.sparkline-svg {
  width: 100%;
  height: 44px;
  overflow: visible;
}

/* Hissedilen & Basınç Barı */
.card-linear-bar {
  width: 100%;
  height: 6px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  position: relative;
  overflow: hidden;
  margin: 0.4rem 0;
}

:is(body.theme-light, .theme-light, .hvadrm-theme-acik) .card-linear-bar {
  background: rgba(0, 0, 0, 0.08);
}

.card-linear-fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #38bdf8, #06b6d4, #f59e0b);
}

/* Rüzgar Pusulası */
.compass-dial-wrap {
  width: 58px;
  height: 58px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.compass-dial-svg {
  width: 100%;
  height: 100%;
}

.compass-needle {
  transform-origin: center;
  transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* UV Speedometer / Takometre */
.uv-gauge-wrap {
  width: 66px;
  height: 48px;
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.uv-gauge-svg {
  width: 100%;
  height: 100%;
}

/* Hava Kalitesi (HKİ) Çemberi */
.aqi-circle-wrap {
  width: 54px;
  height: 54px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Görüş Sinyal Çubukları */
.signal-bars-wrap {
  display: flex;
  flex-direction: column;
  gap: 3px;
  width: 48px;
  align-items: flex-end;
}

.signal-bar-line {
  height: 3px;
  border-radius: 2px;
  background: #10b981;
}

/* Güneş Döngüsü Yayı */
.sun-arc-wrap {
  width: 80px;
  height: 48px;
  position: relative;
}

.sun-arc-svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

@media (max-width: 1150px) {
  .detailed-metrics-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 860px) {
  .detailed-metrics-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 540px) {
  .detailed-metrics-grid {
    grid-template-columns: 1fr;
  }
}

/* MGM Resmi Bülten Paneli */
.bulletin-card {
  grid-column: 1 / -1;
  background: var(--card-bg);
  backdrop-filter: blur(25px);
  -webkit-backdrop-filter: blur(25px);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-lg);
  padding: 1.75rem 2.2rem;
  box-shadow: var(--card-shadow);
  margin-top: 1.5rem;
  animation: fadeIn 0.3s ease;
}

.bulletin-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--card-border);
  padding-bottom: 1.25rem;
  margin-bottom: 1.25rem;
  flex-wrap: wrap;
  gap: 1rem;
}

.bulletin-icon {
  font-size: 1.5rem;
  background: var(--glass-inner);
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--card-border);
}

.bulletin-body {
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--text-primary);
}

.b-pane {
  display: none;
  animation: fadeIn 0.25s ease;
}

.b-pane.active {
  display: block;
}

.b-box {
  background: var(--glass-inner);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-md);
  padding: 1.25rem 1.5rem;
  margin-top: 0.75rem;
}

.b-title {
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--accent-cyan);
  margin-bottom: 0.5rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Bulletin Alerts Tab Styles */
.alert-tab-btn {
  color: #fbbf24;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.alert-tab-btn.active {
  background: linear-gradient(135deg, #d97706, #b45309);
  border-color: #f59e0b;
  color: #ffffff;
  box-shadow: 0 4px 14px rgba(217, 119, 6, 0.45);
}

.bulletin-alert-card-inner {
  border: 1.5px solid rgba(245, 158, 11, 0.45);
  background: rgba(245, 158, 11, 0.04);
  border-radius: var(--radius-md);
  padding: 1.25rem 1.4rem;
  box-shadow: inset 0 0 20px rgba(245, 158, 11, 0.03);
}

.alert-card-inner-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid rgba(245, 158, 11, 0.2);
  gap: 0.75rem;
}

.alert-header-left {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  white-space: nowrap;
}

.alert-status-dot-amber {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #f59e0b;
  box-shadow: 0 0 10px rgba(245, 158, 11, 0.8);
  animation: pulseAmber 2s infinite ease-in-out;
}

@keyframes pulseAmber {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.6; transform: scale(0.85); }
}

.alert-title-text {
  font-size: 0.88rem;
  font-weight: 800;
  color: #fbbf24;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
}

.alert-source-text {
  font-size: 0.8rem;
  color: var(--text-muted);
  font-weight: 600;
  white-space: nowrap;
}

.bulletin-tabs-wrapper {
  display: flex;
  align-items: center;
}

#bulletinTabs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  background: rgba(15, 23, 42, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.12);
  padding: 6px;
  border-radius: 14px;
  max-width: 100%;
}

#bulletinTabs .segmented-btn {
  white-space: nowrap;
  padding: 8px 14px;
  font-size: 0.85rem;
  font-weight: 600;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.07);
  color: #cbd5e1;
  border: 1px solid rgba(255, 255, 255, 0.1);
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  user-select: none;
}

#bulletinTabs .segmented-btn:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.25);
  transform: translateY(-1px);
}

#bulletinTabs .segmented-btn.active {
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  color: #ffffff;
  font-weight: 700;
  border-color: #60a5fa;
  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.45);
}

#bulletinTabs .segmented-btn.alert-tab-btn {
  background: rgba(245, 158, 11, 0.15);
  border-color: rgba(245, 158, 11, 0.4);
  color: #fbbf24;
}

#bulletinTabs .segmented-btn.alert-tab-btn.active {
  background: linear-gradient(135deg, #d97706, #b45309);
  border-color: #f59e0b;
  color: #ffffff;
  box-shadow: 0 4px 14px rgba(217, 119, 6, 0.45);
}

:is(body.theme-light, .theme-light, .hvadrm-theme-acik) #bulletinTabs {
  background: rgba(241, 245, 249, 0.8);
  border-color: rgba(203, 213, 225, 0.8);
}

:is(body.theme-light, .theme-light, .hvadrm-theme-acik) #bulletinTabs .segmented-btn {
  background: #ffffff;
  color: #475569;
  border-color: #e2e8f0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

:is(body.theme-light, .theme-light, .hvadrm-theme-acik) #bulletinTabs .segmented-btn:hover {
  background: #f8fafc;
  color: #0f172a;
  border-color: #cbd5e1;
}

:is(body.theme-light, .theme-light, .hvadrm-theme-acik) #bulletinTabs .segmented-btn.active {
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  color: #ffffff;
  border-color: #2563eb;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.25);
}

:is(body.theme-light, .theme-light, .hvadrm-theme-acik) #bulletinTabs .segmented-btn.alert-tab-btn,
:is(body.theme-light, .theme-light, .hvadrm-theme-acik) .alert-tab-btn {
  background: #fef3c7 !important;
  border: 1px solid #f59e0b !important;
  color: #92400e !important;
  font-weight: 800 !important;
}

:is(body.theme-light, .theme-light, .hvadrm-theme-acik) #bulletinTabs .segmented-btn.alert-tab-btn:hover,
:is(body.theme-light, .theme-light, .hvadrm-theme-acik) .alert-tab-btn:hover {
  background: #fde68a !important;
  color: #78350f !important;
  border-color: #d97706 !important;
}

:is(body.theme-light, .theme-light, .hvadrm-theme-acik) #bulletinTabs .segmented-btn.alert-tab-btn.active,
:is(body.theme-light, .theme-light, .hvadrm-theme-acik) .alert-tab-btn.active {
  background: linear-gradient(135deg, #d97706, #b45309) !important;
  border-color: #b45309 !important;
  color: #ffffff !important;
  box-shadow: 0 4px 12px rgba(217, 119, 6, 0.35) !important;
}

#bulletinTabs .segmented-btn.alert-tab-btn #alertCountBadge,
.alert-tab-btn #alertCountBadge,
#alertCountBadge {
  font-weight: 800;
  display: inline-block;
}

#bulletinTabs .segmented-btn.alert-tab-btn.active #alertCountBadge,
.alert-tab-btn.active #alertCountBadge,
:is(body.theme-light, .theme-light, .hvadrm-theme-acik) #bulletinTabs .segmented-btn.alert-tab-btn.active #alertCountBadge,
:is(body.theme-light, .theme-light, .hvadrm-theme-acik) .alert-tab-btn.active #alertCountBadge {
  color: #ffffff !important;
}

:is(body.theme-light, .theme-light, .hvadrm-theme-acik) #bulletinTabs .segmented-btn.alert-tab-btn:not(.active) #alertCountBadge,
:is(body.theme-light, .theme-light, .hvadrm-theme-acik) .alert-tab-btn:not(.active) #alertCountBadge {
  color: #92400e !important;
}

:is(body.theme-light, .theme-light, .hvadrm-theme-acik) .alert-tab-btn .alert-pulse-dot {
  background: #d97706 !important;
}

:is(body.theme-light, .theme-light, .hvadrm-theme-acik) .alert-tab-btn.active .alert-pulse-dot {
  background: #ffffff !important;
}

:is(body.theme-light, .theme-light, .hvadrm-theme-acik) .alert-title-text {
  color: #92400e !important;
}

:is(body.theme-light, .theme-light, .hvadrm-theme-acik) .tag-resmi-veriler {
  background: #e0f2fe !important;
  color: #0369a1 !important;
}

/* Genel ve Bölgesel Bülten Vurgu Kartı */
.bulletin-highlight-card {
  background: var(--glass-inner);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-md);
  padding: 1.4rem 1.6rem;
  box-shadow: 0 4px 20px -6px rgba(0, 0, 0, 0.25);
  transition: border-color 0.2s ease;
}

.bulletin-highlight-card.region-highlight {
  border-left: 4px solid var(--accent-cyan);
}

.highlight-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--card-border);
  flex-wrap: wrap;
  gap: 0.5rem;
}

.highlight-header h4 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
}

.highlight-icon {
  font-size: 1.2rem;
}

.highlight-badge {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 3px 10px;
  border-radius: 20px;
  background: rgba(56, 189, 248, 0.12);
  color: var(--accent-cyan);
  border: 1px solid rgba(56, 189, 248, 0.25);
}

.highlight-text {
  font-size: 0.95rem;
  line-height: 1.75;
  color: var(--text-primary);
  margin: 0;
}

/* Sıcaklık & Rüzgar İkili Kart Izgarası */
.trends-cards-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem;
}

.trend-card {
  background: var(--glass-inner);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-md);
  padding: 1.25rem 1.4rem;
  display: flex;
  flex-direction: column;
}

.trend-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.85rem;
  padding-bottom: 0.65rem;
  border-bottom: 1px solid var(--card-border);
  gap: 0.5rem;
}

.trend-card-header h4 {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
}

.trend-icon {
  font-size: 1.15rem;
}

.trend-badge {
  font-size: 0.7rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-muted);
}

.trend-text {
  font-size: 0.92rem;
  line-height: 1.65;
  color: var(--text-primary);
  margin: 0;
  flex: 1;
}

/* Denizler (Marine) Bölümü & Kartları */
.marine-cards-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem;
}

.marine-card {
  background: var(--glass-inner);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-md);
  padding: 1.25rem 1.4rem;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 4px 15px -4px rgba(0, 0, 0, 0.25);
}

.marine-card:hover {
  border-color: rgba(56, 189, 248, 0.4);
  box-shadow: 0 8px 24px -6px rgba(14, 165, 233, 0.2);
}

.marine-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #0284c7, #38bdf8, #06b6d4);
  opacity: 0.7;
}

.marine-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.9rem;
  padding-bottom: 0.65rem;
  border-bottom: 1px solid var(--card-border);
  gap: 0.5rem;
}

.marine-title-combo {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.marine-header-icon {
  font-size: 1.15rem;
}

.marine-card-header h4 {
  font-size: 0.98rem;
  font-weight: 800;
  color: var(--text-primary);
  margin: 0;
  letter-spacing: 0.02em;
}

.marine-badge {
  font-size: 0.68rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 12px;
  background: rgba(14, 165, 233, 0.12);
  color: #38bdf8;
  border: 1px solid rgba(56, 189, 248, 0.2);
  letter-spacing: 0.03em;
}

.marine-card-body {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.marine-metrics-list {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.marine-metric-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.45rem 0.65rem;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.04);
}

:is(body.theme-light, .theme-light, .hvadrm-theme-acik) .marine-metric-row {
  background: rgba(0, 0, 0, 0.02);
  border-color: rgba(0, 0, 0, 0.04);
}

.marine-label {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--accent-cyan);
  flex-shrink: 0;
}

.marine-label .m-icon {
  font-size: 0.95rem;
}

.marine-val {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text-primary);
  text-align: right;
  line-height: 1.45;
  word-break: break-word;
}

.marine-empty-state {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--text-muted);
  font-size: 0.85rem;
  padding: 0.8rem 0;
  font-style: italic;
}

.marine-plain-text {
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--text-primary);
  margin: 0;
}

.bulletin-alerts-container {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.bulletin-alert-item {
  background: rgba(245, 158, 11, 0.09);
  border: 1px solid rgba(245, 158, 11, 0.3);
  border-left: 4px solid var(--accent-amber);
  border-radius: var(--radius-sm);
  padding: 0.95rem 1.15rem;
  color: #fef3c7;
  font-size: 0.92rem;
  line-height: 1.65;
  display: flex;
  gap: 0.85rem;
  align-items: flex-start;
}

.bulletin-alert-icon {
  font-size: 1.15rem;
  flex-shrink: 0;
  margin-top: 1px;
}

.bulletin-alert-content {
  flex: 1;
}

.alert-item-title {
  color: #fbbf24;
  font-weight: 700;
}

:is(body.theme-light, .theme-light, .hvadrm-theme-acik) .bulletin-alert-card-inner {
  background: rgba(245, 158, 11, 0.06);
  border-color: rgba(245, 158, 11, 0.5);
}

:is(body.theme-light, .theme-light, .hvadrm-theme-acik) .bulletin-alert-item {
  background: rgba(245, 158, 11, 0.1);
  border-color: rgba(245, 158, 11, 0.35);
  color: #78350f;
}

:is(body.theme-light, .theme-light, .hvadrm-theme-acik) .alert-item-title {
  color: #b45309;
}

/* ==========================================================
   MOBILE RESPONSIVE ENHANCEMENTS
   ========================================================== */
@media (max-width: 768px) {
  .main-wrapper {
    padding: 0 0.75rem;
    margin: 0.75rem auto 2rem;
  }

  .weather-card-hero {
    padding: 1.25rem 1rem;
    border-radius: var(--radius-md);
  }

  .card-top-bar {
    width: 100% !important;
    margin-bottom: 0.45rem !important;
    gap: 0.35rem !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .location-info {
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
  }

  .desktop-datetime-slot {
    display: none !important;
  }

  .mobile-datetime-slot {
    display: flex !important;
    width: 100% !important;
    justify-content: center !important;
    order: 4 !important;
  }

  .location-info h2,
  .hvadrm-widget #displayCity {
    font-size: clamp(1.4rem, 6.8vw, 2.3rem);
    font-weight: 800 !important;
    line-height: 1.15 !important;
    letter-spacing: -0.01em !important;
    margin: 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: clip !important;
    text-align: center !important;
    width: 100% !important;
  }

  .date-and-time-row {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
    max-width: 100% !important;
    gap: 0.35rem !important;
    margin-top: 0.55rem !important;
    overflow: hidden !important;
  }

  .date-badge,
  .local-time-badge {
    display: inline-flex !important;
    align-items: center !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    font-size: clamp(0.68rem, 2.6vw, 0.78rem) !important;
    padding: 3px 8px !important;
    line-height: 1.35 !important;
  }

  .unit-btn {
    padding: 4px 10px;
    font-size: 0.8rem;
  }

  .weather-hero-compact {
    flex-direction: column !important;
    align-items: center !important;
    gap: 0.75rem;
    padding-bottom: 0.85rem;
    margin-bottom: 0.85rem;
  }

  .hero-left-block {
    width: 100%;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.45rem !important;
  }

  .hero-weather-main-row {
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    gap: 0.45rem 0.85rem !important;
  }

  /* Sadece Mobil: Sayı (derece) solda */
  .hero-left-block .temp-display-wrap,
  .hero-weather-main-row .temp-display-wrap {
    order: 1 !important;
    display: flex !important;
    align-items: flex-start !important;
    gap: 2px !important;
  }

  .hero-left-block .temp-val,
  .hero-weather-main-row .temp-val {
    font-size: 3.35rem !important;
    line-height: 0.92 !important;
    letter-spacing: -0.03em !important;
  }

  .hero-left-block .temp-deg-unit,
  .hero-weather-main-row .temp-deg-unit {
    font-size: 1.35rem !important;
    margin-top: 1px !important;
  }

  /* Sadece Mobil: Simge (hava simgesi) sağda */
  .hero-left-block .hero-icon-wrap,
  .hero-weather-main-row .hero-icon-wrap {
    order: 2 !important;
    width: 62px !important;
    height: 62px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
  }

  .hero-left-block .hero-icon-wrap svg,
  .hero-weather-main-row .hero-icon-wrap svg {
    width: 58px !important;
    height: 58px !important;
  }

  /* Durum ve hissedilen alt satırda ortalı */
  .hero-left-block .condition-meta-wrap,
  .hero-weather-main-row .condition-meta-wrap {
    order: 3 !important;
    width: 100% !important;
    gap: 1px !important;
    margin-top: -2px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
  }

  /* Sadece Mobil: Yerel saat ve tarih hissedilen sıcaklığın altında ortalı */
  .hero-left-block .date-and-time-row {
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-wrap: nowrap !important;
    gap: 0.35rem !important;
    margin-top: 0.35rem !important;
    margin-bottom: 0.2rem !important;
    overflow: hidden !important;
  }

  .hero-right-metrics {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
  }

  .minimal-metric-chip {
    padding: 0.45rem 0.65rem;
  }

  .bulletin-card {
    padding: 1.25rem 1rem;
    margin-top: 1rem;
    border-radius: var(--radius-md);
  }

  .bulletin-header {
    flex-direction: column;
    align-items: stretch;
    gap: 0.85rem;
    padding-bottom: 1rem;
    margin-bottom: 1rem;
  }

  .bulletin-header h3 {
    font-size: 1.05rem;
  }

  #bulletinTabs {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    background: rgba(15, 23, 42, 0.65);
    border: 1px solid rgba(255, 255, 255, 0.12);
    padding: 6px;
    border-radius: 12px;
  }

  #bulletinTabs .segmented-btn {
    flex: 1 1 calc(50% - 6px);
    justify-content: center;
    padding: 8px 10px;
    font-size: 0.82rem;
    text-align: center;
  }

  #bulletinTabs .segmented-btn.alert-tab-btn {
    flex: 1 1 100%;
  }

  .trends-cards-grid,
  .marine-cards-grid {
    grid-template-columns: 1fr;
    gap: 0.85rem;
  }

  .marine-card {
    padding: 1rem 1.15rem;
  }

  .marine-metric-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
  }

  .marine-val {
    text-align: left;
    font-size: 0.84rem;
  }

  .bulletin-alert-card-inner {
    padding: 0.9rem 0.85rem;
  }

  .alert-card-inner-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.35rem;
  }

  .alert-source-text {
    align-self: flex-start;
    font-size: 0.75rem;
  }

  .bulletin-alert-item {
    padding: 0.75rem 0.85rem;
    font-size: 0.86rem;
    gap: 0.6rem;
  }

  .daily-list {
    gap: 8px;
    padding-bottom: 0.75rem;
  }

  .daily-box-card {
    flex: 0 0 154px;
    min-width: 154px;
    scroll-snap-align: start;
    padding: 0.95rem 0.55rem 0.85rem;
  }

  .box-metrics-grid {
    gap: 3px;
  }

  .box-metric-cell {
    padding: 3px 2px;
  }

  .box-metric-cell .m-val {
    font-size: 0.68rem;
  }

  .box-metric-cell .m-val small {
    font-size: 0.58rem;
  }
}

@media (max-width: 1024px) and (min-width: 769px) {
  .daily-list {
    gap: 10px;
  }
  .daily-box-card {
    flex: 0 0 180px;
    min-width: 180px;
  }
}

@media (max-width: 420px) {
  .temp-val {
    font-size: 2.5rem;
  }

  .condition-text {
    font-size: 1rem;
  }

  .feels-range-text {
    font-size: 0.78rem;
  }
}

/* ==========================================================
   12'Lİ DETAYLI METEOROLOJİK PARAMETRELER PANELİ
   ========================================================== */
.detailed-metrics-section {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  margin-top: 1.25rem;
  backdrop-filter: blur(20px);
  box-shadow: var(--card-shadow);
}

.detailed-metrics-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.2rem;
  padding-bottom: 0.85rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.detailed-metrics-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.9rem;
}

.metric-tile {
  background: rgba(19, 31, 55, 0.82);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  padding: 1rem 1.15rem;
  min-height: 162px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  overflow: hidden;
  transition: background 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
  backdrop-filter: blur(12px);
}

/* KULLANICI KURALI: Üstüne gelince yukarı kaymasın (NO translateY) */
.metric-tile:hover {
  background: rgba(26, 42, 74, 0.92);
  border-color: rgba(56, 189, 248, 0.38);
  box-shadow: 0 4px 22px -2px rgba(0, 0, 0, 0.45);
}

:is(body.theme-light, .theme-light, .hvadrm-theme-acik) .metric-tile {
  background: #ffffff;
  border: 1px solid rgba(226, 232, 240, 0.95);
  box-shadow: 0 4px 14px -2px rgba(148, 163, 184, 0.12), 0 1px 3px 0 rgba(0, 0, 0, 0.03);
}

:is(body.theme-light, .theme-light, .hvadrm-theme-acik) .metric-tile:hover {
  background: #ffffff;
  border-color: rgba(56, 189, 248, 0.65);
  box-shadow: 0 8px 24px -2px rgba(56, 189, 248, 0.2);
}

:is(body.theme-light, .theme-light, .hvadrm-theme-acik) .metric-tile-label {
  color: #475569;
  font-weight: 800;
}

:is(body.theme-light, .theme-light, .hvadrm-theme-acik) .metric-tile-val {
  color: #0f172a;
}

:is(body.theme-light, .theme-light, .hvadrm-theme-acik) .metric-tile-val .sub-actual {
  color: #64748b;
}

:is(body.theme-light, .theme-light, .hvadrm-theme-acik) .metric-status-row {
  color: #1e293b;
}

:is(body.theme-light, .theme-light, .hvadrm-theme-acik) .metric-sun-times {
  color: #0f172a !important;
  font-weight: 700;
}

:is(body.theme-light, .theme-light, .hvadrm-theme-acik) .metric-sun-horizon {
  stroke: rgba(148, 163, 184, 0.45) !important;
}

:is(body.theme-light, .theme-light, .hvadrm-theme-acik) .metric-tile-note {
  color: #64748b;
}

:is(body.theme-light, .theme-light, .hvadrm-theme-acik) .metric-linear-bar,
:is(body.theme-light, .theme-light, .hvadrm-theme-acik) .metric-pressure-bar {
  background: rgba(226, 232, 240, 0.85);
}

:is(body.theme-light, .theme-light, .hvadrm-theme-acik) .compass-dial {
  background: rgba(248, 250, 252, 0.95);
  border-color: rgba(203, 213, 225, 0.9);
}

:is(body.theme-light, .theme-light, .hvadrm-theme-acik) .compass-dir {
  color: #64748b;
}

:is(body.theme-liquid-glass, .theme-liquid-glass, .hvadrm-theme-cam) .metric-tile {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.03) 100%);
  border: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow: inset 0 1px 1.5px 0 rgba(255, 255, 255, 0.45), 0 10px 25px -5px rgba(0, 0, 0, 0.45);
}

:is(body.theme-liquid-glass, .theme-liquid-glass, .hvadrm-theme-cam) .metric-tile:hover {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.06) 100%);
  border-color: rgba(56, 189, 248, 0.65);
  box-shadow: inset 0 1.5px 1.5px 0 rgba(255, 255, 255, 0.6), 0 16px 36px -6px rgba(56, 189, 248, 0.3);
}

.metric-tile-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 0.35rem;
}

.metric-tile-label {
  font-size: 0.72rem;
  font-weight: 700;
  color: #8da2c0;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.metric-tile-visual {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  transform: scale(1.5);
  transform-origin: top right;
  margin-bottom: 16px;
  margin-right: 4px;
  transition: transform 0.2s ease;
}

.metric-tile-mid {
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin: 0.25rem 0;
}

.metric-tile-val {
  font-size: 1.45rem;
  font-weight: 700;
  color: #ffffff;
  line-height: 1.15;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.metric-tile-val .sub-actual {
  font-size: 0.82rem;
  font-weight: 400;
  color: #94a3b8;
}

.metric-sun-times {
  font-size: 0.85rem;
  font-weight: 600;
  color: #e2e8f0;
  margin-bottom: 2px;
  line-height: 1.25;
}

.metric-sun-horizon {
  stroke: rgba(255, 255, 255, 0.18);
}

.metric-status-row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.84rem;
  font-weight: 500;
  color: #e2e8f0;
  margin-top: 0.25rem;
}

.metric-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}

.metric-dot.cyan {
  background: #38bdf8;
  box-shadow: 0 0 6px rgba(56, 189, 248, 0.6);
}

.metric-dot.orange {
  background: #f97316;
  box-shadow: 0 0 6px rgba(249, 115, 22, 0.6);
}

.metric-dot.yellow {
  background: #eab308;
  box-shadow: 0 0 6px rgba(234, 179, 8, 0.6);
}

.metric-dot.green {
  background: #10b981;
  box-shadow: 0 0 6px rgba(16, 185, 129, 0.6);
}

.metric-dot.red {
  background: #ef4444;
  box-shadow: 0 0 6px rgba(239, 68, 68, 0.6);
}

.metric-tile-note {
  font-size: 0.74rem;
  color: #7187a4;
  line-height: 1.35;
  margin-top: 0.25rem;
}

/* Özel Bileşenler */
.sparkline-svg {
  width: 82px;
  height: 34px;
  overflow: visible;
}

.metric-linear-bar {
  width: 100%;
  height: 6px;
  background: rgba(255, 255, 255, 0.09);
  border-radius: 99px;
  overflow: hidden;
  position: relative;
  margin: 0.4rem 0 0.5rem;
}

.metric-linear-fill {
  height: 100%;
  background: linear-gradient(90deg, #38bdf8, #0ea5e9);
  border-radius: 99px;
  transition: width 0.5s ease;
}

.metric-pressure-bar {
  width: 100%;
  height: 6px;
  background: rgba(255, 255, 255, 0.09);
  border-radius: 99px;
  overflow: hidden;
  position: relative;
  margin: 0.4rem 0 0.5rem;
}

.metric-pressure-fill {
  height: 100%;
  background: linear-gradient(90deg, #818cf8, #38bdf8, #0ea5e9);
  border-radius: 99px;
  transition: width 0.5s ease;
}

/* Rüzgar Pusulası */
.compass-dial {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.12);
  background: rgba(15, 23, 42, 0.6);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.compass-dir {
  position: absolute;
  font-size: 0.56rem;
  font-weight: 700;
  color: #94a3b8;
}

.compass-dir.n { top: 2px; left: 50%; transform: translateX(-50%); }
.compass-dir.e { right: 3px; top: 50%; transform: translateY(-50%); }
.compass-dir.s { bottom: 2px; left: 50%; transform: translateX(-50%); }
.compass-dir.w { left: 3px; top: 50%; transform: translateY(-50%); }

.compass-dir.active {
  color: #38bdf8;
  font-weight: 800;
  text-shadow: 0 0 6px rgba(56, 189, 248, 0.6);
}

.compass-needle-group {
  transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
  transform-origin: 20px 20px;
  transform-box: view-box;
}

/* Nem Ekolayzır */
.hum-bars-wrap {
  display: flex;
  align-items: flex-end;
  gap: 3.5px;
  height: 32px;
}

.hum-bar {
  width: 4px;
  border-radius: 2px;
  background: linear-gradient(to top, #0284c7, #38bdf8);
}

/* Görüş Sinyal Çubukları */
.vis-signal-bars {
  display: flex;
  flex-direction: column;
  gap: 3.5px;
  width: 42px;
}

.vis-bar {
  height: 4px;
  border-radius: 4px;
  background: rgba(16, 185, 129, 0.2);
  transition: background 0.3s;
}

.vis-bar.active {
  background: #10b981;
  box-shadow: 0 0 6px rgba(16, 185, 129, 0.45);
}

/* Responsive Düzen */
@media (max-width: 1100px) and (min-width: 769px) {
  .detailed-metrics-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 768px) {
  .detailed-metrics-section {
    padding: 1.15rem 1rem;
    margin-top: 1rem;
  }

  .detailed-metrics-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.65rem;
  }

  .metric-tile {
    min-height: 122px;
    padding: 0.65rem 0.85rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 0.25rem;
  }

  .metric-tile-top {
    margin-bottom: 0.1rem;
  }

  .metric-tile-visual {
    margin-bottom: 0;
    margin-top: -2px;
  }

  .metric-tile-visual svg[width="86"] {
    transform: scale(0.9);
    transform-origin: top right;
  }

  .metric-tile-mid {
    margin: 0.05rem 0;
  }

  .metric-tile-val {
    font-size: 1.25rem;
  }

  .metric-status-row {
    margin-top: 0.12rem;
    font-size: 0.78rem;
    gap: 5px;
  }

  .metric-tile-note {
    margin-top: auto;
    font-size: 0.72rem;
    line-height: 1.25;
  }

  .metric-pressure-bar,
  .metric-linear-bar {
    margin: 0.25rem 0 0.35rem;
  }
}

@media (max-width: 480px) {
  .detailed-metrics-grid {
    grid-template-columns: 1fr;
    gap: 0.65rem;
  }

  .metric-tile {
    padding: 0.65rem 0.85rem;
  }
}

/* ==========================================================
   24 SAATLİK SICAKLIK & HİSSEDİLEN ALAN GRAFİĞİ (GENEL BAKIŞ)
   ========================================================== */
.overview-chart-section {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-lg);
  padding: 1.1rem 1.35rem 0.85rem;
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  box-shadow: var(--card-shadow);
  margin-top: 1rem;
  position: relative;
  overflow: clip;   /* clip: masaüstünde taşmayı gizler ama positioned child'lar overflow:visible ile çıkabilir */
  transition: border-color 0.25s ease, background 0.3s ease;
}

.overview-chart-section:hover {
  border-color: rgba(56, 189, 248, 0.3);
}

:is(body.theme-light, .theme-light, .hvadrm-theme-acik) .overview-chart-section {
  background: rgba(255, 255, 255, 0.92);
  border-color: rgba(226, 232, 240, 0.95);
  box-shadow: 0 14px 34px -10px rgba(100, 116, 139, 0.12);
}

:is(body.theme-liquid-glass, .theme-liquid-glass, .hvadrm-theme-cam) .overview-chart-section {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(15, 23, 42, 0.6) 100%);
  border: 1px solid rgba(255, 255, 255, 0.24);
  backdrop-filter: blur(30px) saturate(190%);
  box-shadow: inset 0 1.5px 1.5px 0 rgba(255, 255, 255, 0.45), 0 20px 45px -10px rgba(2, 6, 23, 0.7);
}

:is(body.theme-light, .theme-light, .hvadrm-theme-acik) .overview-title {
  color: #0f172a;
}

:is(body.theme-light, .theme-light, .hvadrm-theme-acik) .overview-header {
  border-bottom: 1px solid rgba(226, 232, 240, 0.85);
}

:is(body.theme-light, .theme-light, .hvadrm-theme-acik) .toggle-text-label {
  color: #475569;
}

:is(body.theme-light, .theme-light, .hvadrm-theme-acik) .chart-slider {
  background: rgba(203, 213, 225, 0.7);
  border-color: rgba(148, 163, 184, 0.4);
}

:is(body.theme-light, .theme-light, .hvadrm-theme-acik) .time-label {
  color: #64748b;
}

:is(body.theme-light, .theme-light, .hvadrm-theme-acik) .time-label.current {
  color: #0284c7;
}

:is(body.theme-light, .theme-light, .hvadrm-theme-acik) .chart-guide-line {
  stroke: rgba(226, 232, 240, 0.9);
}

:is(body.theme-light, .theme-light, .hvadrm-theme-acik) .chart-guide-text {
  fill: #64748b;
  font-weight: 700;
}

:is(body.theme-light, .theme-light, .hvadrm-theme-acik) .milestone-line {
  stroke: rgba(245, 158, 11, 0.35);
}

:is(.hvadrm-widget.hvadrm-theme-acik, .hvadrm-widget.theme-light, [data-theme="acik"], .hvadrm-theme-acik) .milestone-label {
  fill: #b45309 !important;
  font-weight: 600 !important;
  font-family: 'Outfit', 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  letter-spacing: 0.02em !important;
}

.overview-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.75rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.overview-title-group {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.overview-title {
  font-size: 1.12rem;
  font-weight: 800;
  color: #ffffff;
  margin: 0;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.overview-subtitle-badge {
  font-size: 0.65rem;
  font-weight: 700;
  color: var(--accent-cyan);
  background: rgba(56, 189, 248, 0.14);
  border: 1px solid rgba(56, 189, 248, 0.26);
  padding: 2px 8px;
  border-radius: 99px;
  letter-spacing: 0.05em;
}

.time-format-toggle-wrap {
  display: flex;
  align-items: center;
}

.time-format-segmented {
  display: inline-flex;
  background: var(--glass-inner, rgba(255, 255, 255, 0.06));
  border: 1px solid var(--card-border, rgba(255, 255, 255, 0.12));
  border-radius: 20px;
  padding: 2px;
  gap: 2px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.time-fmt-btn {
  background: transparent;
  border: none;
  color: var(--text-secondary, #94a3b8);
  font-size: 0.78rem;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 16px;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  font-family: inherit;
  outline: none;
  line-height: 1.3;
}

.time-fmt-btn:hover {
  color: var(--text-primary);
}

.time-fmt-btn.active {
  background: linear-gradient(135deg, #0284c7 0%, #38bdf8 100%);
  color: #ffffff !important;
  box-shadow: 0 2px 8px rgba(56, 189, 248, 0.35);
}

.overview-toggle-wrap {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}

.toggle-text-label {
  font-size: 0.85rem;
  font-weight: 600;
  color: #94a3b8;
  user-select: none;
}

/* iOS Tarzı Şık Toggle Switch */
.chart-switch {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
  margin: 0;
}

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

.chart-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 24px;
  transition: background 0.3s ease, border-color 0.3s ease;
}

.chart-slider:before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 2px;
  bottom: 2px;
  background: #ffffff;
  border-radius: 50%;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.35);
}

.chart-switch input:checked + .chart-slider {
  background: #0284c7;
  border-color: #38bdf8;
  box-shadow: 0 0 10px rgba(56, 189, 248, 0.4);
}

.chart-switch input:checked + .chart-slider:before {
  transform: translateX(20px);
}

/* 24 Saatlik Kaydırılabilir Şerit (Desktop Saat-Saat Gösterim) */
.overview-chart-scroll-track {
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  position: relative;
  scrollbar-width: thin;
  scrollbar-color: rgba(56, 189, 248, 0.35) transparent;
  -webkit-overflow-scrolling: touch;
  cursor: grab;
  user-select: none;
  padding-bottom: 4px;
}

.overview-chart-scroll-track:active {
  cursor: grabbing;
}

.overview-chart-scroll-track::-webkit-scrollbar {
  height: 5px;
}

.overview-chart-scroll-track::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.03);
  border-radius: 4px;
}

.overview-chart-scroll-track::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.16);
  border-radius: 4px;
  transition: background 0.2s ease;
}

.overview-chart-scroll-track::-webkit-scrollbar-thumb:hover {
  background: rgba(56, 189, 248, 0.45);
}

:is(body.theme-light, .theme-light, .hvadrm-theme-acik) .overview-chart-scroll-track {
  scrollbar-color: rgba(2, 132, 199, 0.35) transparent;
}

:is(body.theme-light, .theme-light, .hvadrm-theme-acik) .overview-chart-scroll-track::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.03);
}

:is(body.theme-light, .theme-light, .hvadrm-theme-acik) .overview-chart-scroll-track::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, 0.45);
}

.overview-header-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.overview-nav-btns {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 99px;
  padding: 2px 4px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

:is(body.theme-light, .theme-light, .hvadrm-theme-acik) .overview-nav-btns {
  background: rgba(241, 245, 249, 0.9);
  border-color: rgba(203, 213, 225, 0.8);
}

.overview-nav-btn {
  background: transparent;
  border: none;
  color: #94a3b8;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  padding: 0;
  outline: none;
}

.overview-nav-btn:hover {
  background: rgba(56, 189, 248, 0.2);
  color: #38bdf8;
  transform: scale(1.08);
}

:is(body.theme-light, .theme-light, .hvadrm-theme-acik) .overview-nav-btn {
  color: #475569;
}

:is(body.theme-light, .theme-light, .hvadrm-theme-acik) .overview-nav-btn:hover {
  background: rgba(2, 132, 199, 0.15);
  color: #0284c7;
}

.overview-nav-btn:active {
  transform: scale(0.95);
}

/* Zaman Noktaları Grid - 24 Saate Yayılmış Saat Saat Akış */
.overview-timeline-grid {
  display: grid;
  gap: 0;
  margin-bottom: 0.25rem;
  width: max-content;
  min-width: 100%;
}

.timeline-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  padding: 0.35rem 0.1rem;
  border-radius: 8px;
  transition: background 0.2s ease, transform 0.2s ease;
  user-select: none;
  box-sizing: border-box;
}

.timeline-col:hover {
  background: rgba(255, 255, 255, 0.05);
}

.timeline-col .time-label {
  font-size: 0.74rem;
  font-weight: 600;
  color: #94a3b8;
  white-space: nowrap;
}

.timeline-col .time-label.current {
  color: var(--accent-cyan);
  font-weight: 800;
  text-shadow: 0 0 8px rgba(56, 189, 248, 0.4);
}

.timeline-col .time-icon {
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.4));
}

.timeline-col .time-temp {
  display: none;
}

/* SVG Grafik Kapsayıcı */
.overview-svg-container {
  position: relative;
  width: max-content;
  min-width: 100%;
  height: 140px;
  margin: 0.1rem 0 0.35rem;
  overflow: visible;
}

.overview-svg-container svg {
  display: block;
  overflow: visible;
}

/* Kılavuz Çizgileri & Metinleri */
.chart-guide-line {
  stroke: rgba(255, 255, 255, 0.07);
  stroke-dasharray: 4 4;
  stroke-width: 1;
}

.chart-guide-text {
  fill: #64748b;
  font-size: 10px;
  font-weight: 600;
  font-family: inherit;
}

/* Alan Grafiği Eğrisi & Dolgusu */
.chart-area-path {
  transition: d 0.5s cubic-bezier(0.4, 0, 0.2, 1), fill 0.4s ease;
}

.chart-line-path {
  fill: none;
  stroke-width: 2.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: d 0.5s cubic-bezier(0.4, 0, 0.2, 1), stroke 0.4s ease, filter 0.4s ease;
}

.chart-line-path.temp-line {
  stroke: #f59e0b;
  filter: drop-shadow(0 2px 8px rgba(245, 158, 11, 0.55));
}

.chart-line-path.apparent-line {
  stroke: #38bdf8;
  filter: drop-shadow(0 2px 8px rgba(56, 189, 248, 0.55));
}

/* Grafiğin Nokta Boncukları & Üzerindeki Derece Etiketleri */
.chart-point-dot {
  fill: #ffffff;
  stroke-width: 2.5;
  transition: cx 0.5s ease, cy 0.5s ease, stroke 0.3s ease;
}

.chart-point-dot.temp-dot {
  stroke: #f59e0b;
}

.chart-point-dot.apparent-dot {
  stroke: #38bdf8;
}

.curve-point-badge {
  font-size: 13px !important;
  font-weight: 700 !important;
  font-family: 'Outfit', 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif !important;
  letter-spacing: 0.03em !important;
  user-select: none;
  paint-order: stroke fill;
  stroke-width: 2.5px !important;
  stroke-linejoin: round;
  transition: fill 0.3s ease, stroke 0.3s ease;
}

.curve-point-badge.temp {
  fill: #ffffff !important;
  stroke: rgba(15, 23, 42, 0.95) !important;
  filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.85));
}

.curve-point-badge.apparent {
  fill: #e0f2fe !important;
  stroke: rgba(15, 23, 42, 0.95) !important;
  filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.85));
}

:is(.hvadrm-widget.hvadrm-theme-acik, .hvadrm-widget.theme-light, .hvadrm-widget[data-theme="acik"], [data-theme="acik"], .hvadrm-theme-acik) .curve-point-badge {
  stroke-width: 2.5px !important;
  font-family: 'Outfit', 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif !important;
  letter-spacing: 0.03em !important;
}

:is(.hvadrm-widget.hvadrm-theme-acik, .hvadrm-widget.theme-light, .hvadrm-widget[data-theme="acik"], [data-theme="acik"], .hvadrm-theme-acik) .curve-point-badge.temp {
  fill: #0f172a !important;
  stroke: rgba(255, 255, 255, 0.98) !important;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.12));
}

:is(.hvadrm-widget.hvadrm-theme-acik, .hvadrm-widget.theme-light, .hvadrm-widget[data-theme="acik"], [data-theme="acik"], .hvadrm-theme-acik) .curve-point-badge.apparent {
  fill: #0284c7 !important;
  stroke: rgba(255, 255, 255, 0.98) !important;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.12));
}

:is(.hvadrm-widget.hvadrm-theme-cam, .hvadrm-widget.theme-liquid-glass, [data-theme="cam"], .hvadrm-theme-cam) .curve-point-badge.temp {
  fill: #ffffff !important;
  stroke: rgba(4, 9, 20, 0.95) !important;
  stroke-width: 2.6px !important;
  filter: drop-shadow(0 0 8px rgba(245, 158, 11, 0.65));
}

:is(.hvadrm-widget.hvadrm-theme-cam, .hvadrm-widget.theme-liquid-glass, [data-theme="cam"], .hvadrm-theme-cam) .curve-point-badge.apparent {
  fill: #ffffff !important;
  stroke: rgba(4, 9, 20, 0.95) !important;
  stroke-width: 2.6px !important;
  filter: drop-shadow(0 0 8px rgba(56, 189, 248, 0.65));
}

:is(body.theme-light, .theme-light, .hvadrm-theme-acik) .chart-live-tooltip {
  background: rgba(255, 255, 255, 0.96);
  border-color: rgba(2, 132, 199, 0.4);
  box-shadow: 0 10px 25px -4px rgba(0, 0, 0, 0.15);
}

:is(body.theme-light, .theme-light, .hvadrm-theme-acik) .chart-live-tooltip .tooltip-temp {
  color: #0f172a;
}

/* Canlı İnteraktif Takip Çizgisi ve Tooltip */
.chart-live-tooltip {
  position: absolute;
  pointer-events: none;
  z-index: 25;
  background: rgba(15, 23, 42, 0.95);
  border: 1px solid rgba(56, 189, 248, 0.5);
  border-radius: 10px;
  padding: 6px 11px;
  box-shadow: 0 10px 28px -4px rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(16px);
  text-align: center;
  white-space: nowrap;
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  opacity: 0;
  transition: opacity 0.15s ease, border-color 0.2s ease;
}

.chart-live-tooltip.visible {
  display: flex;
  opacity: 1;
}

.chart-live-tooltip .tooltip-time {
  font-size: 0.72rem;
  font-weight: 700;
  color: #94a3b8;
}

.chart-live-tooltip .tooltip-row {
  display: flex;
  align-items: center;
  gap: 5px;
}

.chart-live-tooltip .tooltip-icon {
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.chart-live-tooltip .tooltip-temp {
  font-size: 1.05rem;
  font-weight: 800;
  color: #ffffff;
}

.chart-live-tooltip .tooltip-sub {
  font-size: 0.71rem;
  color: #38bdf8;
  font-weight: 600;
}

/* Gün Doğumu ve Batımı İşaretçileri */
.milestone-group {
  transition: transform 0.4s ease, opacity 0.3s ease;
}

.milestone-line {
  stroke: rgba(249, 115, 22, 0.5);
  stroke-dasharray: 3 3;
  stroke-width: 1.2;
}

.milestone-label {
  fill: #fb923c !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  font-family: 'Outfit', 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  letter-spacing: 0.02em !important;
  text-anchor: middle;
}

/* Alt Bilgi & Lejant */
.overview-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-top: 0.85rem;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  margin-top: 0.5rem;
  font-size: 0.82rem;
}

:is(body.theme-light, .theme-light, .hvadrm-theme-acik) .overview-footer {
  border-top: 1px solid rgba(226, 232, 240, 0.85);
}

/* Sıcaklık lejantını hem mobil hem masaüstünde tamamen kaldır, sadece ay evresi kalsın */
.overview-legend,
#overviewLegend,
.mobile-overview-footer-slot .overview-legend {
  display: none !important;
}

:is(body.theme-light, .theme-light, .hvadrm-theme-acik) .overview-moon-phase {
  color: #475569;
}

:is(body.theme-light, .theme-light, .hvadrm-theme-acik) .overview-moon-phase strong,
:is(body.theme-light, .theme-light, .hvadrm-theme-acik) #moonPhaseText {
  color: #1e40af !important; /* Belirgin Koyu Mavi */
  font-weight: 700 !important;
}

.overview-moon-phase {
  color: #94a3b8;
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.overview-moon-phase strong {
  color: #e2e8f0;
}

.moon-icon {
  font-size: 1.1rem;
  filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.3));
}

/* Mobilde Basınç & UV İndeks Altına Yerleşen Bölüm */
.mobile-overview-footer-slot {
  display: none;
  width: 100%;
}

.desktop-overview-footer-slot {
  display: none !important;
  width: 100%;
}

@media (max-width: 900px) {
  #chipMoonPhase {
    display: none !important;
  }

  .mobile-overview-footer-slot {
    display: block;
    width: 100%;
    margin-top: 0.5rem;
  }

  .desktop-overview-footer-slot {
    display: none !important;
  }

  .mobile-overview-footer-slot .overview-footer {
    background: var(--glass-inner, rgba(255, 255, 255, 0.05));
    border: 1px solid var(--card-border, rgba(255, 255, 255, 0.1));
    border-radius: 12px;
    padding: 0.55rem 0.85rem;
    margin-top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    box-sizing: border-box;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transition: all 0.25s ease;
  }

  .mobile-overview-footer-slot .overview-footer:hover {
    background: var(--glass-hover, rgba(255, 255, 255, 0.08));
    border-color: rgba(56, 189, 248, 0.3);
  }

  .mobile-overview-footer-slot .overview-legend {
    display: none !important;
  }

  .mobile-overview-footer-slot .overview-moon-phase {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    font-size: 0.82rem;
    color: var(--text-secondary, #cbd5e1);
    border-top: none !important;
    padding-top: 0 !important;
    margin-top: 0 !important;
    width: 100%;
  }

  .mobile-overview-footer-slot .overview-moon-phase strong,
  .mobile-overview-footer-slot #moonPhaseText {
    color: #38bdf8;
    font-weight: 700;
  }

  :is(body.theme-light, .theme-light, .hvadrm-theme-acik) .mobile-overview-footer-slot .overview-footer {
    background: rgba(255, 255, 255, 0.88);
    border: 1px solid rgba(203, 213, 225, 0.9);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  }

  :is(body.theme-light, .theme-light, .hvadrm-theme-acik) .mobile-overview-footer-slot .overview-legend {
    color: #334155;
  }

  :is(body.theme-light, .theme-light, .hvadrm-theme-acik) .mobile-overview-footer-slot .legend-stats {
    color: #0f172a;
  }

  :is(body.theme-light, .theme-light, .hvadrm-theme-acik) .mobile-overview-footer-slot .overview-moon-phase {
    color: #475569;
    border-top-color: rgba(0, 0, 0, 0.07);
  }

  :is(body.theme-light, .theme-light, .hvadrm-theme-acik) .mobile-overview-footer-slot .overview-moon-phase strong,
  :is(body.theme-light, .theme-light, .hvadrm-theme-acik) .mobile-overview-footer-slot #moonPhaseText {
    color: #1e40af !important;
    font-weight: 700 !important;
  }

  :is(body.theme-liquid-glass, .theme-liquid-glass, .hvadrm-theme-cam) .mobile-overview-footer-slot .overview-footer {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(15, 23, 42, 0.65) 100%);
    border: 1px solid rgba(255, 255, 255, 0.22);
    backdrop-filter: blur(28px) saturate(190%);
    -webkit-backdrop-filter: blur(28px) saturate(190%);
    box-shadow: inset 0 1px 1px 0 rgba(255, 255, 255, 0.4), 0 10px 25px -5px rgba(2, 6, 23, 0.5);
  }
}

/* Mobil Uyumluluk */
@media (max-width: 768px) {
  .overview-chart-section {
    padding: 0.95rem 0.75rem 0.85rem;
    overflow: visible;   /* Sağ kenardaki sıcaklık badge'lerinin kesilmesini önle */
  }

  .overview-title {
    font-size: 1.05rem;
  }

  .overview-nav-btns {
    display: none;
  }

  .overview-chart-scroll-track {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    cursor: default;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }

  .overview-timeline-grid {
    display: grid !important;
    grid-template-columns: repeat(5, 1fr) !important;
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    gap: 0 !important;
    margin: 0 0 0.25rem 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }

  .timeline-col {
    padding: 0.35rem 0 !important;
    min-width: 0 !important;
    max-width: none !important;
    width: 100% !important;
    box-sizing: border-box !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
  }

  .timeline-col .time-label {
    font-size: 0.76rem;
    font-weight: 700;
    text-align: center;
    width: 100%;
  }

  .timeline-col .time-temp {
    display: none;
  }

  .timeline-col .time-icon {
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
  }

  .overview-svg-container {
    display: block !important;
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    height: 120px !important;
    margin: 0.1rem 0 0.25rem !important;
    padding: 0 !important;
    overflow: visible !important;
    box-sizing: border-box !important;
  }

  .overview-svg-container svg {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    overflow: visible !important;
  }

  .overview-footer {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.4rem;
    font-size: 0.75rem;
  }
}

@media (max-width: 480px) {
  .overview-subtitle-badge {
    display: none;
  }
}

@media (max-width: 420px) {
  .timeline-col .time-label {
    font-size: 0.74rem;
  }
  .timeline-col .time-icon {
    width: 24px;
    height: 24px;
  }
}

/* ==========================================================
   4. TEMA: LIQUID GLASS (SIVI CAM) ÖZEL BİLEŞEN STİLLERİ
   ========================================================== */
:is(body.theme-liquid-glass, .theme-liquid-glass, .hvadrm-theme-cam) .top-header {
  background: rgba(6, 11, 23, 0.65);
  backdrop-filter: blur(28px) saturate(190%);
  -webkit-backdrop-filter: blur(28px) saturate(190%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
}

:is(body.theme-liquid-glass, .theme-liquid-glass, .hvadrm-theme-cam) .weather-card-hero {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.12) 0%, rgba(15, 23, 42, 0.65) 100%);
  border: 1px solid rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(30px) saturate(190%);
  -webkit-backdrop-filter: blur(30px) saturate(190%);
  box-shadow: inset 0 2px 2px 0 rgba(255, 255, 255, 0.5), inset 0 -2px 2px 0 rgba(0, 0, 0, 0.3), 0 30px 60px -15px rgba(2, 6, 23, 0.8), 0 0 30px rgba(56, 189, 248, 0.15);
}

:is(body.theme-liquid-glass, .theme-liquid-glass, .hvadrm-theme-cam) .bulletin-card {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.09) 0%, rgba(15, 23, 42, 0.65) 100%);
  border: 1px solid rgba(255, 255, 255, 0.22);
  backdrop-filter: blur(28px) saturate(190%);
  -webkit-backdrop-filter: blur(28px) saturate(190%);
  box-shadow: inset 0 1.5px 1.5px 0 rgba(255, 255, 255, 0.45), 0 20px 45px -10px rgba(2, 6, 23, 0.75);
}

:is(body.theme-liquid-glass, .theme-liquid-glass, .hvadrm-theme-cam) .marine-card {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(15, 23, 42, 0.6) 100%);
  border: 1px solid rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  box-shadow: inset 0 1px 1px 0 rgba(255, 255, 255, 0.4), 0 12px 28px -6px rgba(0, 0, 0, 0.5);
}

/* 4. Resim İsteği: Liquid Glass (Cam) temada 5 günlük hava tahmini çevresindeki dikdörtgen çerçeveyi kaldır */
:is(body.theme-liquid-glass, .theme-liquid-glass, .hvadrm-theme-cam, [data-theme="cam"]) .daily-forecast-section {
  background: transparent !important;
  border: none !important;
  border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-radius: 0 !important;
}

/* ==========================================================
   Tema Başlık & Alt Yazı Renk Kontrolleri (Açık tema hariç tam beyaz)
   ========================================================== */

/* 1. Açık Tema (Light Mode) */
:is(
  .hvadrm-widget.hvadrm-theme-acik,
  .hvadrm-widget.theme-light,
  .hvadrm-widget[data-theme="acik"]
) .location-info h2,
:is(
  .hvadrm-widget.hvadrm-theme-acik,
  .hvadrm-widget.theme-light,
  .hvadrm-widget[data-theme="acik"]
) #displayCity {
  color: #0f172a !important;
}

:is(
  .hvadrm-widget.hvadrm-theme-acik,
  .hvadrm-widget.theme-light,
  .hvadrm-widget[data-theme="acik"]
) .location-info .date-subtitle,
:is(
  .hvadrm-widget.hvadrm-theme-acik,
  .hvadrm-widget.theme-light,
  .hvadrm-widget[data-theme="acik"]
) #displayDate {
  color: #475569 !important;
}

:is(
  .hvadrm-widget.hvadrm-theme-acik,
  .hvadrm-widget.theme-light,
  .hvadrm-widget[data-theme="acik"]
) .bulletin-header h3 {
  color: #0f172a !important;
}

:is(
  .hvadrm-widget.hvadrm-theme-acik,
  .hvadrm-widget.theme-light,
  .hvadrm-widget[data-theme="acik"]
) #bulletinDate,
:is(
  .hvadrm-widget.hvadrm-theme-acik,
  .hvadrm-widget.theme-light,
  .hvadrm-widget[data-theme="acik"]
) .bulletin-header span:not(.tag):not(#alertCountBadge) {
  color: #64748b !important;
}

:is(
  .hvadrm-widget.hvadrm-theme-acik,
  .hvadrm-widget.theme-light,
  .hvadrm-widget[data-theme="acik"]
) .daily-section-header {
  color: #475569 !important;
}

:is(
  .hvadrm-widget.hvadrm-theme-acik,
  .hvadrm-widget.theme-light,
  .hvadrm-widget[data-theme="acik"],
  body.theme-light .hvadrm-widget
) .date-badge,
:is(
  .hvadrm-widget.hvadrm-theme-acik,
  .hvadrm-widget.theme-light,
  .hvadrm-widget[data-theme="acik"],
  body.theme-light .hvadrm-widget
) #displayDateBadge,
:is(
  .hvadrm-widget.hvadrm-theme-acik,
  .hvadrm-widget.theme-light,
  .hvadrm-widget[data-theme="acik"],
  body.theme-light .hvadrm-widget
) .local-time-badge,
:is(
  .hvadrm-widget.hvadrm-theme-acik,
  .hvadrm-widget.theme-light,
  .hvadrm-widget[data-theme="acik"],
  body.theme-light .hvadrm-widget
) #displayLocalTime {
  background: rgba(15, 23, 42, 0.05) !important;
  border: 1px solid rgba(15, 23, 42, 0.12) !important;
  border-color: rgba(15, 23, 42, 0.12) !important;
  color: #475569 !important;
}

:is(
  .hvadrm-widget.hvadrm-theme-acik,
  .hvadrm-widget.theme-light,
  .hvadrm-widget[data-theme="acik"],
  body.theme-light .hvadrm-widget
) .date-badge svg,
:is(
  .hvadrm-widget.hvadrm-theme-acik,
  .hvadrm-widget.theme-light,
  .hvadrm-widget[data-theme="acik"],
  body.theme-light .hvadrm-widget
) .local-time-badge svg {
  color: #0284c7 !important;
}

:is(
  .hvadrm-widget.hvadrm-theme-acik,
  .hvadrm-widget.theme-light,
  .hvadrm-widget[data-theme="acik"],
  body.theme-light .hvadrm-widget
) .local-time-badge strong {
  color: #0f172a !important;
}

:is(
  .hvadrm-widget.hvadrm-theme-acik,
  .hvadrm-widget.theme-light,
  .hvadrm-widget[data-theme="acik"]
) .time-format-segmented {
  background: rgba(0, 0, 0, 0.05) !important;
  border-color: rgba(0, 0, 0, 0.1) !important;
}

:is(
  .hvadrm-widget.hvadrm-theme-acik,
  .hvadrm-widget.theme-light,
  .hvadrm-widget[data-theme="acik"]
) .time-fmt-btn {
  color: #64748b !important;
}

:is(
  .hvadrm-widget.hvadrm-theme-acik,
  .hvadrm-widget.theme-light,
  .hvadrm-widget[data-theme="acik"]
) .time-fmt-btn.active {
  background: #0284c7 !important;
  color: #ffffff !important;
}

/* 2. Açık Tema Hariç Tüm Temalar (Cam, Koyu, Karanlık) - Tam Beyaz (#ffffff) */
:is(
  .hvadrm-widget.hvadrm-theme-cam,
  .hvadrm-widget.hvadrm-theme-koyu,
  .hvadrm-widget.hvadrm-theme-karanlik,
  [data-theme="cam"],
  [data-theme="koyu"],
  [data-theme="karanlik"],
  .theme-liquid-glass,
  .theme-glass,
  .theme-dark,
  .hvadrm-widget:not(.hvadrm-theme-acik):not(.theme-light):not([data-theme="acik"])
) .location-info h2,
:is(
  .hvadrm-widget.hvadrm-theme-cam,
  .hvadrm-widget.hvadrm-theme-koyu,
  .hvadrm-widget.hvadrm-theme-karanlik,
  [data-theme="cam"],
  [data-theme="koyu"],
  [data-theme="karanlik"],
  .theme-liquid-glass,
  .theme-glass,
  .theme-dark,
  .hvadrm-widget:not(.hvadrm-theme-acik):not(.theme-light):not([data-theme="acik"])
) #displayCity {
  color: #ffffff !important;
}

:is(
  .hvadrm-widget.hvadrm-theme-cam,
  .hvadrm-widget.hvadrm-theme-koyu,
  .hvadrm-widget.hvadrm-theme-karanlik,
  [data-theme="cam"],
  [data-theme="koyu"],
  [data-theme="karanlik"],
  .theme-liquid-glass,
  .theme-glass,
  .theme-dark,
  .hvadrm-widget:not(.hvadrm-theme-acik):not(.theme-light):not([data-theme="acik"])
) .location-info .date-subtitle,
:is(
  .hvadrm-widget.hvadrm-theme-cam,
  .hvadrm-widget.hvadrm-theme-koyu,
  .hvadrm-widget.hvadrm-theme-karanlik,
  [data-theme="cam"],
  [data-theme="koyu"],
  [data-theme="karanlik"],
  .theme-liquid-glass,
  .theme-glass,
  .theme-dark,
  .hvadrm-widget:not(.hvadrm-theme-acik):not(.theme-light):not([data-theme="acik"])
) #displayDate {
  color: #ffffff !important;
}

:is(
  .hvadrm-widget.hvadrm-theme-cam,
  .hvadrm-widget.hvadrm-theme-koyu,
  .hvadrm-widget.hvadrm-theme-karanlik,
  [data-theme="cam"],
  [data-theme="koyu"],
  [data-theme="karanlik"],
  .theme-liquid-glass,
  .theme-glass,
  .theme-dark,
  .hvadrm-widget:not(.hvadrm-theme-acik):not(.theme-light):not([data-theme="acik"])
) .bulletin-header h3 {
  color: #ffffff !important;
}

:is(
  .hvadrm-widget.hvadrm-theme-cam,
  .hvadrm-widget.hvadrm-theme-koyu,
  .hvadrm-widget.hvadrm-theme-karanlik,
  [data-theme="cam"],
  [data-theme="koyu"],
  [data-theme="karanlik"],
  .theme-liquid-glass,
  .theme-glass,
  .theme-dark,
  .hvadrm-widget:not(.hvadrm-theme-acik):not(.theme-light):not([data-theme="acik"])
) #bulletinDate,
:is(
  .hvadrm-widget.hvadrm-theme-cam,
  .hvadrm-widget.hvadrm-theme-koyu,
  .hvadrm-widget.hvadrm-theme-karanlik,
  [data-theme="cam"],
  [data-theme="koyu"],
  [data-theme="karanlik"],
  .theme-liquid-glass,
  .theme-glass,
  .theme-dark,
  .hvadrm-widget:not(.hvadrm-theme-acik):not(.theme-light):not([data-theme="acik"])
) .bulletin-header span:not(.tag) {
  color: #ffffff !important;
}


:is(
  .hvadrm-widget.hvadrm-theme-acik,
  .hvadrm-widget.theme-light,
  .hvadrm-widget[data-theme="acik"]
) .location-info .date-subtitle,
:is(
  .hvadrm-widget.hvadrm-theme-acik,
  .hvadrm-widget.theme-light,
  .hvadrm-widget[data-theme="acik"]
) #displayDate {
  color: #475569 !important;
}

:is(
  .hvadrm-widget.hvadrm-theme-acik,
  .hvadrm-widget.theme-light,
  .hvadrm-widget[data-theme="acik"]
) .bulletin-header h3 {
  color: #0f172a !important;
}

:is(
  .hvadrm-widget.hvadrm-theme-acik,
  .hvadrm-widget.theme-light,
  .hvadrm-widget[data-theme="acik"]
) #bulletinDate,
:is(
  .hvadrm-widget.hvadrm-theme-acik,
  .hvadrm-widget.theme-light,
  .hvadrm-widget[data-theme="acik"]
) .bulletin-header span:not(.tag):not(#alertCountBadge) {
  color: #64748b !important;
}

:is(
  .hvadrm-widget.hvadrm-theme-acik,
  .hvadrm-widget.theme-light,
  .hvadrm-widget[data-theme="acik"]
) .daily-section-header {
  color: #475569 !important;
}

:is(
  .hvadrm-widget.hvadrm-theme-acik,
  .hvadrm-widget.theme-light,
  .hvadrm-widget[data-theme="acik"],
  body.theme-light .hvadrm-widget
) .date-badge,
:is(
  .hvadrm-widget.hvadrm-theme-acik,
  .hvadrm-widget.theme-light,
  .hvadrm-widget[data-theme="acik"],
  body.theme-light .hvadrm-widget
) #displayDateBadge,
:is(
  .hvadrm-widget.hvadrm-theme-acik,
  .hvadrm-widget.theme-light,
  .hvadrm-widget[data-theme="acik"],
  body.theme-light .hvadrm-widget
) .local-time-badge,
:is(
  .hvadrm-widget.hvadrm-theme-acik,
  .hvadrm-widget.theme-light,
  .hvadrm-widget[data-theme="acik"],
  body.theme-light .hvadrm-widget
) #displayLocalTime {
  background: rgba(15, 23, 42, 0.05) !important;
  border: 1px solid rgba(15, 23, 42, 0.12) !important;
  border-color: rgba(15, 23, 42, 0.12) !important;
  color: #475569 !important;
}

:is(
  .hvadrm-widget.hvadrm-theme-acik,
  .hvadrm-widget.theme-light,
  .hvadrm-widget[data-theme="acik"],
  body.theme-light .hvadrm-widget
) .date-badge svg,
:is(
  .hvadrm-widget.hvadrm-theme-acik,
  .hvadrm-widget.theme-light,
  .hvadrm-widget[data-theme="acik"],
  body.theme-light .hvadrm-widget
) .local-time-badge svg {
  color: #0284c7 !important;
}

:is(
  .hvadrm-widget.hvadrm-theme-acik,
  .hvadrm-widget.theme-light,
  .hvadrm-widget[data-theme="acik"],
  body.theme-light .hvadrm-widget
) .local-time-badge strong {
  color: #0f172a !important;
}

:is(
  .hvadrm-widget.hvadrm-theme-acik,
  .hvadrm-widget.theme-light,
  .hvadrm-widget[data-theme="acik"]
) .time-format-segmented {
  background: rgba(0, 0, 0, 0.05) !important;
  border-color: rgba(0, 0, 0, 0.1) !important;
}

:is(
  .hvadrm-widget.hvadrm-theme-acik,
  .hvadrm-widget.theme-light,
  .hvadrm-widget[data-theme="acik"]
) .time-fmt-btn {
  color: #64748b !important;
}

:is(
  .hvadrm-widget.hvadrm-theme-acik,
  .hvadrm-widget.theme-light,
  .hvadrm-widget[data-theme="acik"]
) .time-fmt-btn.active {
  background: #0284c7 !important;
  color: #ffffff !important;
}

/* 2. Açık Tema Hariç Tüm Temalar (Cam, Koyu, Karanlık) - Tam Beyaz (#ffffff) */
:is(
  .hvadrm-widget.hvadrm-theme-cam,
  .hvadrm-widget.hvadrm-theme-koyu,
  .hvadrm-widget.hvadrm-theme-karanlik,
  [data-theme="cam"],
  [data-theme="koyu"],
  [data-theme="karanlik"],
  .theme-liquid-glass,
  .theme-glass,
  .theme-dark,
  .hvadrm-widget:not(.hvadrm-theme-acik):not(.theme-light):not([data-theme="acik"])
) .location-info h2,
:is(
  .hvadrm-widget.hvadrm-theme-cam,
  .hvadrm-widget.hvadrm-theme-koyu,
  .hvadrm-widget.hvadrm-theme-karanlik,
  [data-theme="cam"],
  [data-theme="koyu"],
  [data-theme="karanlik"],
  .theme-liquid-glass,
  .theme-glass,
  .theme-dark,
  .hvadrm-widget:not(.hvadrm-theme-acik):not(.theme-light):not([data-theme="acik"])
) #displayCity {
  color: #ffffff !important;
}

:is(
  .hvadrm-widget.hvadrm-theme-cam,
  .hvadrm-widget.hvadrm-theme-koyu,
  .hvadrm-widget.hvadrm-theme-karanlik,
  [data-theme="cam"],
  [data-theme="koyu"],
  [data-theme="karanlik"],
  .theme-liquid-glass,
  .theme-glass,
  .theme-dark,
  .hvadrm-widget:not(.hvadrm-theme-acik):not(.theme-light):not([data-theme="acik"])
) .location-info .date-subtitle,
:is(
  .hvadrm-widget.hvadrm-theme-cam,
  .hvadrm-widget.hvadrm-theme-koyu,
  .hvadrm-widget.hvadrm-theme-karanlik,
  [data-theme="cam"],
  [data-theme="koyu"],
  [data-theme="karanlik"],
  .theme-liquid-glass,
  .theme-glass,
  .theme-dark,
  .hvadrm-widget:not(.hvadrm-theme-acik):not(.theme-light):not([data-theme="acik"])
) #displayDate {
  color: #ffffff !important;
}

:is(
  .hvadrm-widget.hvadrm-theme-cam,
  .hvadrm-widget.hvadrm-theme-koyu,
  .hvadrm-widget.hvadrm-theme-karanlik,
  [data-theme="cam"],
  [data-theme="koyu"],
  [data-theme="karanlik"],
  .theme-liquid-glass,
  .theme-glass,
  .theme-dark,
  .hvadrm-widget:not(.hvadrm-theme-acik):not(.theme-light):not([data-theme="acik"])
) .bulletin-header h3 {
  color: #ffffff !important;
}

:is(
  .hvadrm-widget.hvadrm-theme-cam,
  .hvadrm-widget.hvadrm-theme-koyu,
  .hvadrm-widget.hvadrm-theme-karanlik,
  [data-theme="cam"],
  [data-theme="koyu"],
  [data-theme="karanlik"],
  .theme-liquid-glass,
  .theme-glass,
  .theme-dark,
  .hvadrm-widget:not(.hvadrm-theme-acik):not(.theme-light):not([data-theme="acik"])
) #bulletinDate,
:is(
  .hvadrm-widget.hvadrm-theme-cam,
  .hvadrm-widget.hvadrm-theme-koyu,
  .hvadrm-widget.hvadrm-theme-karanlik,
  [data-theme="cam"],
  [data-theme="koyu"],
  [data-theme="karanlik"],
  .theme-liquid-glass,
  .theme-glass,
  .theme-dark,
  .hvadrm-widget:not(.hvadrm-theme-acik):not(.theme-light):not([data-theme="acik"])
) .bulletin-header span:not(.tag) {
  color: #ffffff !important;
}

:is(
  .hvadrm-widget.hvadrm-theme-cam,
  .hvadrm-widget.hvadrm-theme-koyu,
  .hvadrm-widget.hvadrm-theme-karanlik,
  [data-theme="cam"],
  [data-theme="koyu"],
  [data-theme="karanlik"],
  .theme-liquid-glass,
  .theme-glass,
  .theme-dark,
  .hvadrm-widget:not(.hvadrm-theme-acik):not(.theme-light):not([data-theme="acik"])
) .daily-section-header {
  color: #ffffff !important;
}

:is(
  .hvadrm-widget.hvadrm-theme-cam,
  .hvadrm-widget.hvadrm-theme-koyu,
  .hvadrm-widget.hvadrm-theme-karanlik,
  [data-theme="cam"],
  [data-theme="koyu"],
  [data-theme="karanlik"],
  .theme-liquid-glass,
  .theme-glass,
  .theme-dark,
  .hvadrm-widget:not(.hvadrm-theme-acik):not(.theme-light):not([data-theme="acik"])
) .date-badge,
:is(
  .hvadrm-widget.hvadrm-theme-cam,
  .hvadrm-widget.hvadrm-theme-koyu,
  .hvadrm-widget.hvadrm-theme-karanlik,
  [data-theme="cam"],
  [data-theme="koyu"],
  [data-theme="karanlik"],
  .theme-liquid-glass,
  .theme-glass,
  .theme-dark,
  .hvadrm-widget:not(.hvadrm-theme-acik):not(.theme-light):not([data-theme="acik"])
) .local-time-badge {
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.22) !important;
  background: rgba(255, 255, 255, 0.08) !important;
}

:is(
  .hvadrm-widget.hvadrm-theme-cam,
  .hvadrm-widget.hvadrm-theme-koyu,
  .hvadrm-widget.hvadrm-theme-karanlik,
  [data-theme="cam"],
  [data-theme="koyu"],
  [data-theme="karanlik"],
  .theme-liquid-glass,
  .theme-glass,
  .theme-dark,
  .hvadrm-widget:not(.hvadrm-theme-acik):not(.theme-light):not([data-theme="acik"])
) .date-badge svg,
:is(
  .hvadrm-widget.hvadrm-theme-cam,
  .hvadrm-widget.hvadrm-theme-koyu,
  .hvadrm-widget.hvadrm-theme-karanlik,
  [data-theme="cam"],
  [data-theme="koyu"],
  [data-theme="karanlik"],
  .theme-liquid-glass,
  .theme-glass,
  .theme-dark,
  .hvadrm-widget:not(.hvadrm-theme-acik):not(.theme-light):not([data-theme="acik"])
) .local-time-badge svg {
  color: #38bdf8 !important;
}

:is(
  .hvadrm-widget.hvadrm-theme-cam,
  .hvadrm-widget.hvadrm-theme-koyu,
  .hvadrm-widget.hvadrm-theme-karanlik,
  [data-theme="cam"],
  [data-theme="koyu"],
  [data-theme="karanlik"],
  .theme-liquid-glass,
  .theme-glass,
  .theme-dark,
  .hvadrm-widget:not(.hvadrm-theme-acik):not(.theme-light):not([data-theme="acik"])
) .local-time-badge strong {
  color: #ffffff !important;
}

@media (max-width: 640px) {
  .date-and-time-row {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
    max-width: 100% !important;
    gap: 0.35rem !important;
    overflow: hidden !important;
  }
  .date-badge,
  .local-time-badge {
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    font-size: clamp(0.68rem, 2.6vw, 0.78rem) !important;
    padding: 3px 8px !important;
  }
  .time-fmt-btn {
    font-size: 0.72rem;
    padding: 2px 7px;
  }
}

/* ==========================================================
   Tema Uyumlu Akışkan Kaydırma Çubuğu (Theme-Adaptive Scrollbars)
   ========================================================== */

.hvadrm-widget .daily-list,
.hvadrm-widget .hourly-rail,
.hvadrm-widget .bulletin-segmented-control,
.hvadrm-widget .bulletin-tab-nav-wrapper {
  scrollbar-width: thin;
  scrollbar-color: var(--hvadrm-scroll-thumb, rgba(255, 255, 255, 0.35)) var(--hvadrm-scroll-track, rgba(255, 255, 255, 0.06));
}

.hvadrm-widget .daily-list::-webkit-scrollbar,
.hvadrm-widget .hourly-rail::-webkit-scrollbar,
.hvadrm-widget .bulletin-segmented-control::-webkit-scrollbar,
.hvadrm-widget .bulletin-tab-nav-wrapper::-webkit-scrollbar {
  height: 7px;
  width: 7px;
}

.hvadrm-widget .daily-list::-webkit-scrollbar-button,
.hvadrm-widget .hourly-rail::-webkit-scrollbar-button,
.hvadrm-widget .bulletin-segmented-control::-webkit-scrollbar-button,
.hvadrm-widget .bulletin-tab-nav-wrapper::-webkit-scrollbar-button {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

.hvadrm-widget .daily-list::-webkit-scrollbar-track,
.hvadrm-widget .hourly-rail::-webkit-scrollbar-track,
.hvadrm-widget .bulletin-segmented-control::-webkit-scrollbar-track,
.hvadrm-widget .bulletin-tab-nav-wrapper::-webkit-scrollbar-track {
  background: var(--hvadrm-scroll-track, rgba(255, 255, 255, 0.06));
  border-radius: 9999px;
  border: 1px solid var(--hvadrm-scroll-track-border, rgba(255, 255, 255, 0.08));
  margin: 0 4px;
}

.hvadrm-widget .daily-list::-webkit-scrollbar-thumb,
.hvadrm-widget .hourly-rail::-webkit-scrollbar-thumb,
.hvadrm-widget .bulletin-segmented-control::-webkit-scrollbar-thumb,
.hvadrm-widget .bulletin-tab-nav-wrapper::-webkit-scrollbar-thumb {
  background: var(--hvadrm-scroll-thumb, rgba(255, 255, 255, 0.35));
  border-radius: 9999px;
  border: 1px solid var(--hvadrm-scroll-thumb-border, rgba(255, 255, 255, 0.45));
  box-shadow: var(--hvadrm-scroll-glow, 0 0 8px rgba(255, 255, 255, 0.25));
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: all 0.2s ease;
}

.hvadrm-widget .daily-list::-webkit-scrollbar-thumb:hover,
.hvadrm-widget .hourly-rail::-webkit-scrollbar-thumb:hover,
.hvadrm-widget .bulletin-segmented-control::-webkit-scrollbar-thumb:hover,
.hvadrm-widget .bulletin-tab-nav-wrapper::-webkit-scrollbar-thumb:hover {
  background: var(--hvadrm-scroll-thumb-hover, rgba(255, 255, 255, 0.65));
  box-shadow: var(--hvadrm-scroll-glow-hover, 0 0 14px rgba(255, 255, 255, 0.5));
}

/* 1. Cam / Liquid Glass Teması Scrollbar */
:is(.hvadrm-widget.hvadrm-theme-cam, [data-theme="cam"], .theme-liquid-glass, .theme-liquid, .theme-cam) {
  --hvadrm-scroll-track: rgba(255, 255, 255, 0.08);
  --hvadrm-scroll-track-border: rgba(255, 255, 255, 0.15);
  --hvadrm-scroll-thumb: rgba(255, 255, 255, 0.4);
  --hvadrm-scroll-thumb-border: rgba(255, 255, 255, 0.65);
  --hvadrm-scroll-glow: 0 0 10px rgba(255, 255, 255, 0.4);
  --hvadrm-scroll-thumb-hover: rgba(255, 255, 255, 0.75);
  --hvadrm-scroll-glow-hover: 0 0 16px rgba(255, 255, 255, 0.7);
}

/* 2. Koyu Teması Scrollbar */
:is(.hvadrm-widget.hvadrm-theme-koyu, [data-theme="koyu"], .theme-glass) {
  --hvadrm-scroll-track: rgba(15, 23, 42, 0.5);
  --hvadrm-scroll-track-border: rgba(56, 189, 248, 0.15);
  --hvadrm-scroll-thumb: rgba(56, 189, 248, 0.38);
  --hvadrm-scroll-thumb-border: rgba(56, 189, 248, 0.5);
  --hvadrm-scroll-glow: 0 0 8px rgba(56, 189, 248, 0.3);
  --hvadrm-scroll-thumb-hover: rgba(56, 189, 248, 0.7);
  --hvadrm-scroll-glow-hover: 0 0 14px rgba(56, 189, 248, 0.6);
}

/* 3. Karanlık Teması Scrollbar */
:is(.hvadrm-widget.hvadrm-theme-karanlik, [data-theme="karanlik"], .theme-dark) {
  --hvadrm-scroll-track: rgba(0, 0, 0, 0.4);
  --hvadrm-scroll-track-border: rgba(255, 255, 255, 0.08);
  --hvadrm-scroll-thumb: rgba(148, 163, 184, 0.35);
  --hvadrm-scroll-thumb-border: rgba(255, 255, 255, 0.18);
  --hvadrm-scroll-glow: 0 0 6px rgba(0, 0, 0, 0.4);
  --hvadrm-scroll-thumb-hover: rgba(148, 163, 184, 0.65);
  --hvadrm-scroll-glow-hover: 0 0 10px rgba(148, 163, 184, 0.4);
}

/* 4. Açık Teması Scrollbar */
:is(.hvadrm-widget.hvadrm-theme-acik, .hvadrm-widget.theme-light, [data-theme="acik"], body.theme-light, .theme-light) {
  --hvadrm-scroll-track: rgba(15, 23, 42, 0.05);
  --hvadrm-scroll-track-border: rgba(15, 23, 42, 0.08);
  --hvadrm-scroll-thumb: rgba(100, 116, 139, 0.35);
  --hvadrm-scroll-thumb-border: rgba(100, 116, 139, 0.2);
  --hvadrm-scroll-glow: 0 0 6px rgba(100, 116, 139, 0.15);
  --hvadrm-scroll-thumb-hover: rgba(100, 116, 139, 0.65);
  --hvadrm-scroll-glow-hover: 0 0 10px rgba(100, 116, 139, 0.3);
}

/* ==========================================================
   MOBİL İÇİN TAM GENİŞLİK VE BOŞLUKSUZ TASARIM (MOBILE LAYOUT)
   ========================================================== */
@media (max-width: 768px) {
  /* 1. Arka plandaki beyaz alanları komple kaldır */
  body.hvadrm-weather-page,
  body.hvadrm-weather-page #page,
  body.hvadrm-weather-page #content,
  body.hvadrm-weather-page .site-content,
  body.hvadrm-weather-page #primary,
  body.hvadrm-weather-page #main,
  body.hvadrm-weather-page .content-area,
  body.hvadrm-weather-page .entry-content,
  body.hvadrm-weather-page .site-main,
  body.hvadrm-weather-page .post-inner {
    margin: 0 !important;
    padding: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  body.hvadrm-weather-page #site-header {
    margin-bottom: 0 !important;
  }

  .hvadrm-page-wrapper {
    margin: 0 !important;
    padding: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
  }

  .hvadrm-widget {
    margin: 0 !important;
    border-radius: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    border-left: none !important;
    border-right: none !important;
    border-top: none !important;
    padding: 0.85rem 0.75rem 2rem 0.75rem !important;
    box-sizing: border-box !important;
  }

  .hvadrm-widget .main-wrapper {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* 2. İl ve İlçe kutuları tam genişlikte ve alt alta */
  .hvadrm-widget .dashboard-controls {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
    margin-bottom: 12px !important;
    width: 100% !important;
  }

  .hvadrm-widget .city-search-box {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100% !important;
    gap: 8px !important;
  }

  .hvadrm-widget .province-wrapper,
  .hvadrm-widget .district-wrapper,
  .hvadrm-widget .select-wrapper {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .hvadrm-widget .hvadrm-custom-select-container {
    width: 100% !important;
    display: flex !important;
  }

  .hvadrm-widget .hvadrm-custom-select-trigger {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    height: 42px !important;
    box-sizing: border-box !important;
    justify-content: space-between !important;
  }

  .hvadrm-widget .city-select {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    height: 42px !important;
    box-sizing: border-box !important;
  }

  .hvadrm-widget .hvadrm-custom-dropdown-panel {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 100% !important;
    left: 0 !important;
    right: 0 !important;
    box-sizing: border-box !important;
  }

  /* Konum ve Yenile butonları yan yana (50% / 50%) ve metin etiketli */
  .hvadrm-widget .action-buttons-group {
    display: flex !important;
    flex-direction: row !important;
    width: 100% !important;
    gap: 8px !important;
    margin-top: 2px !important;
  }

  .hvadrm-widget .action-buttons-group .btn-icon {
    flex: 1 1 50% !important;
    width: auto !important;
    min-width: 0 !important;
    height: 40px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 0 12px !important;
    border-radius: 12px !important;
    font-size: 0.88rem !important;
    font-weight: 600 !important;
    box-sizing: border-box !important;
  }

  .hvadrm-widget .btn-action-label {
    display: inline !important;
    font-size: 0.88rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.01em !important;
  }

  /* 3. Resmi Veriler rozetini mobilde kaldır, yerine °C/°F ve 24s/12s AM-PM kontrolleri */
  .hvadrm-widget .official-mgm-badge {
    display: none !important;
  }

  .hvadrm-widget .mobile-switches-bar {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    width: 100% !important;
    margin-top: 4px !important;
  }

  .hvadrm-widget .mobile-switches-bar .unit-toggle-control {
    display: inline-flex !important;
    height: 36px !important;
    align-items: center !important;
    padding: 2px !important;
    border-radius: 12px !important;
  }

  .hvadrm-widget .mobile-switches-bar .unit-toggle-control .unit-btn {
    padding: 5px 12px !important;
    font-size: 0.82rem !important;
    font-weight: 700 !important;
    border-radius: 9px !important;
  }

  .hvadrm-widget .mobile-switches-bar .time-format-segmented {
    display: inline-flex !important;
    height: 36px !important;
    align-items: center !important;
    padding: 2px !important;
    border-radius: 12px !important;
  }

  .hvadrm-widget .mobile-switches-bar .time-format-segmented .time-fmt-btn {
    padding: 5px 11px !important;
    font-size: 0.8rem !important;
    font-weight: 700 !important;
    border-radius: 9px !important;
  }

  /* Kart içi kontrolleri mobilde gizle (mobil üst barda yer alır) */
  .hvadrm-widget .card-top-bar .unit-toggle-control,
  .hvadrm-widget .card-top-bar .header-controls-group,
  .hvadrm-widget .card-top-bar #timeFormatToggle,
  .hvadrm-widget .card-top-bar .time-format-segmented,
  .hvadrm-widget .weather-card-hero #timeFormatToggle,
  .hvadrm-widget .weather-card-hero .header-controls-group,
  .hvadrm-widget .date-and-time-row .time-format-segmented,
  .card-top-bar .header-controls-group,
  .card-top-bar #timeFormatToggle,
  .card-top-bar .time-format-segmented {
    display: none !important;
  }
}

/* ==========================================================
   MOBİL 5 GÜNLÜK HAVA TAHMİNİ (SATIR SATIR & AÇILIR AKORDİYON)
   Kullanıcı Kuralı:
   - Sadece mobil (max-width: 640px)
   - Tarihler satır satır
   - Tarih ve yanlarında sıcaklık
   - Üste tıklayınca alta doğru genişleyip diğer veriler gözüksün
   - Diğer tarihe tıklayınca daha önce tıklanan kapanmasın açık kalsın
   - Masaüstüne kesinlikle karışma
   ========================================================== */
@media (max-width: 640px) {
  .daily-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    overflow-x: visible !important;
    overflow-y: visible !important;
    padding-bottom: 0 !important;
    scroll-snap-type: none !important;
    cursor: default !important;
    touch-action: auto !important;
    user-select: auto !important;
  }

  .daily-box-card {
    flex: 1 1 auto !important;
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding: 0.85rem 1rem !important;
    border-radius: 14px !important;
    cursor: pointer !important;
    align-items: stretch !important;
    text-align: left !important;
    scroll-snap-align: none !important;
    transition: background 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease !important;
    -webkit-tap-highlight-color: transparent !important;
  }

  .daily-box-card:hover,
  .daily-box-card:active {
    background: var(--glass-hover) !important;
  }

  .daily-box-card.today {
    border-left: 3.5px solid #38bdf8 !important;
  }

  .daily-box-card.is-expanded {
    background: rgba(30, 41, 59, 0.75) !important;
    border-color: rgba(56, 189, 248, 0.45) !important;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.22) !important;
  }

  :is(body.theme-light, .theme-light, .hvadrm-theme-acik) .daily-box-card.is-expanded {
    background: #ffffff !important;
    border-color: rgba(59, 130, 246, 0.4) !important;
    box-shadow: 0 4px 18px rgba(15, 23, 42, 0.08) !important;
  }

  /* Üst Satır Başlık Çubuğu */
  .daily-box-card .daily-row-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    margin-bottom: 0 !important;
    cursor: pointer !important;
    gap: 8px !important;
    user-select: none !important;
    -webkit-tap-highlight-color: transparent !important;
  }

  .daily-row-left {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    min-width: 95px !important;
    flex: 0 0 auto !important;
  }

  .daily-row-date-group {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 1px !important;
  }

  .daily-box-card .box-day-title {
    font-size: 0.94rem !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
  }

  .daily-box-card .box-day-subdate {
    font-size: 0.7rem !important;
    color: #94a3b8 !important;
    font-weight: 500 !important;
  }

  /* Mobilde Ortadaki Durum (Hava İkonu + Açıklama) */
  .daily-mobile-status {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    flex: 1 1 auto !important;
    justify-content: center !important;
    min-width: 0 !important;
    overflow: hidden !important;
    padding: 0 4px !important;
  }

  .daily-mobile-icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 24px !important;
    height: 24px !important;
    flex-shrink: 0 !important;
  }

  .daily-mobile-icon svg {
    width: 22px !important;
    height: 22px !important;
  }

  .daily-mobile-desc {
    font-size: 0.78rem !important;
    font-weight: 500 !important;
    color: #cbd5e1 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  :is(body.theme-light, .theme-light, .hvadrm-theme-acik) .daily-mobile-desc {
    color: #475569 !important;
  }

  /* Mobilde Sağdaki Sıcaklık ve Açılır Ok */
  .daily-mobile-right {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex: 0 0 auto !important;
  }

  .mobile-temps {
    display: flex !important;
    align-items: baseline !important;
    gap: 6px !important;
    margin: 0 !important;
  }

  .mobile-temps .box-temp-high {
    font-size: 1.18rem !important;
    font-weight: 800 !important;
    letter-spacing: -0.01em !important;
  }

  .mobile-temps .box-temp-low {
    font-size: 0.94rem !important;
    font-weight: 600 !important;
    color: #94a3b8 !important;
  }

  :is(body.theme-light, .theme-light, .hvadrm-theme-acik) .mobile-temps .box-temp-low {
    color: #64748b !important;
  }

  .daily-expand-chevron {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 22px !important;
    height: 22px !important;
    color: #94a3b8 !important;
    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1), color 0.2s ease !important;
    flex-shrink: 0 !important;
  }

  .daily-box-card.is-expanded .daily-expand-chevron {
    transform: rotate(180deg) !important;
    color: #38bdf8 !important;
  }

  /* Masaüstü Öğelerini Mobilde Gizle */
  .desktop-temps,
  .box-desktop-center {
    display: none !important;
  }

  /* Akordiyon Detay Gövdesi (Varsayılan olarak kapalı, tıklanınca aşağı doğru açılır) */
  .daily-box-card .daily-details-body {
    max-height: 0 !important;
    overflow: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    width: 100% !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
    border-top: 1px solid transparent !important;
    transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.25s ease,
                margin-top 0.25s ease,
                padding-top 0.25s ease,
                border-color 0.25s ease !important;
  }

  .daily-box-card.is-expanded .daily-details-body {
    max-height: 500px !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    margin-top: 0.75rem !important;
    padding-top: 0.75rem !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
  }

  :is(body.theme-light, .theme-light, .hvadrm-theme-acik) .daily-box-card.is-expanded .daily-details-body {
    border-top: 1px solid rgba(0, 0, 0, 0.08) !important;
  }

  .daily-box-card .box-mini-bar-track {
    width: 100% !important;
    margin-bottom: 0.65rem !important;
  }

  .daily-box-card .box-moon-row {
    margin-bottom: 0.65rem !important;
    max-width: 100% !important;
    width: auto !important;
    padding: 3px 10px !important;
  }

  .daily-box-card .box-metrics-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 6px !important;
    width: 100% !important;
  }

  .daily-box-card .box-metric-cell {
    padding: 6px 3px !important;
    border-radius: 8px !important;
  }
}

/* ==========================================================
   DÜNYA ŞEHİRLERİ 3 GÜNLÜK ÖZEL GÖRÜNÜM (MASAÜSTÜ & MOBİL)
   ========================================================== */

/* Masaüstü: 3 günlük kartlar soldan sağa tam genişliğe yayılır */
@media (min-width: 641px) {
  .daily-list.is-world-cities {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    width: 100% !important;
    gap: 14px !important;
    overflow-x: visible !important;
    cursor: default !important;
  }

  .daily-list.is-world-cities .daily-box-card {
    max-width: none !important;
    min-width: 0 !important;
    width: 100% !important;
    flex: 1 1 auto !important;
  }
}

/* Mobil: Kartlar tıklandığında açılmaz, akordiyonsuz olarak alt alta 3 gün yayınlanır */
@media (max-width: 640px) {
  .daily-list.is-world-cities .daily-box-card,
  .daily-box-card.is-world-card {
    cursor: default !important;
    -webkit-tap-highlight-color: transparent !important;
  }

  .daily-list.is-world-cities .daily-box-card:hover,
  .daily-list.is-world-cities .daily-box-card:active {
    background: var(--glass-inner) !important;
    border-color: var(--card-border) !important;
    box-shadow: none !important;
  }

  .daily-list.is-world-cities .daily-box-card.today:hover,
  .daily-list.is-world-cities .daily-box-card.today:active {
    background: rgba(37, 99, 235, 0.08) !important;
    border-color: rgba(59, 130, 246, 0.45) !important;
    box-shadow: inset 0 0 14px rgba(37, 99, 235, 0.08) !important;
  }

  .daily-list.is-world-cities .daily-row-header {
    cursor: default !important;
  }

  .daily-box-card.is-world-card .daily-expand-chevron {
    display: none !important;
  }

  .daily-box-card.is-world-card .daily-details-body {
    display: none !important;
    max-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
  }
}

/* ==========================================================
   TÜRKİYE 81 İL HAVA DURUMU ANA SAYFASI VE KART IZGARASI
   ========================================================== */
.hvadrm-archive-page-wrapper {
  width: 100% !important;
  max-width: 1260px !important;
  margin: 0 auto !important;
  padding: 24px 16px 60px !important;
  box-sizing: border-box !important;
}

.hvadrm-archive-container {
  width: 100% !important;
  margin: 0 auto !important;
  box-sizing: border-box !important;
}

/* --- Hero Başlık & Arama --- */
.hvadrm-archive-hero {
  text-align: center !important;
  background: linear-gradient(135deg, rgba(30, 41, 59, 0.72) 0%, rgba(15, 23, 42, 0.82) 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 24px !important;
  padding: 36px 24px 28px !important;
  margin-bottom: 28px !important;
  box-shadow: 0 16px 40px -12px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  position: relative !important;
  overflow: visible !important;
  z-index: 50 !important;
}

.hvadrm-archive-hero::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 10% !important;
  right: 10% !important;
  height: 1px !important;
  background: linear-gradient(90deg, transparent, rgba(56, 189, 248, 0.6), transparent) !important;
}

.hvadrm-archive-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: rgba(14, 165, 233, 0.15) !important;
  border: 1px solid rgba(56, 189, 248, 0.35) !important;
  color: #38bdf8 !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.8px !important;
  padding: 4px 14px !important;
  border-radius: 9999px !important;
  margin-bottom: 14px !important;
  text-transform: uppercase !important;
}

.hvadrm-live-dot {
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  background: #22c55e !important;
  box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7) !important;
  animation: hvadrmPulse 2s infinite !important;
  flex-shrink: 0 !important;
}

@keyframes hvadrmPulse {
  0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7); }
  70% { transform: scale(1); box-shadow: 0 0 0 7px rgba(34, 197, 94, 0); }
  100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
}

.hvadrm-archive-title {
  text-align: center !important;
  width: 100% !important;
  font-size: clamp(26px, 4.5vw, 40px) !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  margin: 0 auto 8px auto !important;
  letter-spacing: -0.5px !important;
  line-height: 1.2 !important;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.4) !important;
}

.hvadrm-archive-subtitle {
  text-align: center !important;
  width: 100% !important;
  font-size: 14px !important;
  color: rgba(226, 232, 240, 0.75) !important;
  margin: 0 auto 22px auto !important;
  font-weight: 400 !important;
}

/* --- Canlı Arama Çubuğu & Hızlı Eylemler (Konumum & Yenile) --- */
.hvadrm-archive-container .hvadrm-archive-search-box {
  max-width: 840px !important;
  margin: 0 auto 22px auto !important;
  position: relative !important;
  z-index: 60 !important;
  overflow: visible !important;
  width: 100% !important;
  box-sizing: border-box !important;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  text-align: left !important;
}

.hvadrm-archive-container .hvadrm-archive-search-row {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  position: relative !important;
  overflow: visible !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  gap: 10px !important;
}

.hvadrm-archive-container .hvadrm-archive-input-wrapper {
  position: relative !important;
  z-index: 70 !important;
  overflow: visible !important;
  display: flex !important;
  align-items: center !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

.hvadrm-archive-container .hvadrm-archive-actions {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-shrink: 0 !important;
  box-sizing: border-box !important;
}

/* Aksiyon Butonları (Konumum ve Yenile) - Temalara Karşı Koruma */
.hvadrm-archive-container button.hvadrm-action-btn,
body .hvadrm-archive-container button.hvadrm-action-btn,
.entry-content .hvadrm-archive-container button.hvadrm-action-btn,
body.ast-theme-transparent-header .hvadrm-archive-container button.hvadrm-action-btn {
  all: unset !important;
  box-sizing: border-box !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  height: 52px !important;
  min-height: 52px !important;
  max-height: 52px !important;
  padding: 0 18px !important;
  border-radius: 9999px !important;
  font-family: 'Outfit', 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif !important;
  font-size: 14.5px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  cursor: pointer !important;
  border: 1.5px solid transparent !important;
  white-space: nowrap !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  box-shadow: none !important;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
  user-select: none !important;
  -webkit-user-select: none !important;
}

.hvadrm-archive-container button.hvadrm-action-btn svg,
body .hvadrm-archive-container button.hvadrm-action-btn svg {
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  min-height: 18px !important;
  flex-shrink: 0 !important;
  display: block !important;
  stroke: currentColor !important;
  transition: transform 0.25s ease !important;
}

.hvadrm-archive-container button.hvadrm-action-btn .btn-action-label {
  display: inline-block !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  color: inherit !important;
  line-height: 1 !important;
}

.hvadrm-archive-container button.hvadrm-action-btn:hover svg {
  transform: scale(1.1) !important;
}

.hvadrm-archive-container button.hvadrm-action-btn.locating svg {
  animation: hvadrmPulse 1.2s infinite ease-in-out !important;
}

.hvadrm-archive-container button.hvadrm-action-btn.is-refreshing svg {
  animation: hvadrmSpin 0.75s linear infinite !important;
}

@keyframes hvadrmPulse {
  0% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.25); opacity: 0.6; }
  100% { transform: scale(1); opacity: 1; }
}

@keyframes hvadrmSpin {
  100% { transform: rotate(360deg); }
}

/* Cam (Glass / Liquid Glass) Tema Butonları */
.hvadrm-archive-container .hvadrm-action-btn,
.hvadrm-theme-cam .hvadrm-action-btn,
.theme-liquid-glass .hvadrm-action-btn {
  background: rgba(15, 23, 42, 0.72) !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
  color: #ffffff !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.25), inset 0 1px 2px rgba(255, 255, 255, 0.1) !important;
}

.hvadrm-archive-container .hvadrm-action-btn:hover,
.hvadrm-theme-cam .hvadrm-action-btn:hover,
.theme-liquid-glass .hvadrm-action-btn:hover {
  background: rgba(56, 189, 248, 0.22) !important;
  border-color: #38bdf8 !important;
  color: #38bdf8 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 24px rgba(56, 189, 248, 0.25) !important;
}

/* Karanlık Tema Butonları */
.hvadrm-theme-karanlik .hvadrm-action-btn,
.hvadrm-theme-koyu .hvadrm-action-btn,
.theme-dark .hvadrm-action-btn {
  background: #1e293b !important;
  border-color: #334155 !important;
  color: #f8fafc !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.28) !important;
}

.hvadrm-theme-karanlik .hvadrm-action-btn:hover,
.hvadrm-theme-koyu .hvadrm-action-btn:hover,
.theme-dark .hvadrm-action-btn:hover {
  background: #334155 !important;
  border-color: #38bdf8 !important;
  color: #38bdf8 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.35) !important;
}

/* Açık (Light) Tema Butonları */
.hvadrm-theme-acik .hvadrm-action-btn,
.theme-light .hvadrm-action-btn {
  background: #ffffff !important;
  border-color: #cbd5e1 !important;
  color: #0f172a !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06), inset 0 1px 2px rgba(0, 0, 0, 0.02) !important;
}

.hvadrm-theme-acik .hvadrm-action-btn:hover,
.theme-light .hvadrm-action-btn:hover {
  background: #f8fafc !important;
  border-color: #0284c7 !important;
  color: #0284c7 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 20px rgba(2, 132, 199, 0.15) !important;
}

/* Tema ezmelerine karşı tam sıfırlama (all: unset) ve yüksek özgüllük */
.hvadrm-archive-container .hvadrm-archive-search-input,
.hvadrm-archive-container input[type="text"].hvadrm-archive-search-input,
.hvadrm-archive-container input.hvadrm-archive-search-input,
body .hvadrm-archive-container .hvadrm-archive-input-wrapper input.hvadrm-archive-search-input,
body.ast-theme-transparent-header .hvadrm-archive-container input.hvadrm-archive-search-input,
.entry-content .hvadrm-archive-container input.hvadrm-archive-search-input {
  all: unset !important;
  box-sizing: border-box !important;
  display: block !important;
  width: 100% !important;
  height: 52px !important;
  min-height: 52px !important;
  max-height: 52px !important;
  padding: 0 46px 0 52px !important;
  margin: 0 !important;
  border-radius: 9999px !important;
  font-family: 'Outfit', 'Plus Jakarta Sans', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  line-height: 52px !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  text-shadow: none !important;
  text-indent: 0 !important;
  vertical-align: middle !important;
  outline: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  cursor: text !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* Cam (Glass / Liquid Glass) Tema Arama Inputu */
.hvadrm-archive-container .hvadrm-archive-search-input,
.hvadrm-theme-cam .hvadrm-archive-search-input,
.theme-liquid-glass .hvadrm-archive-search-input {
  background: rgba(15, 23, 42, 0.72) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.2) !important;
  color: #ffffff !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2), inset 0 1px 2px rgba(255, 255, 255, 0.1) !important;
}

.hvadrm-archive-container .hvadrm-archive-search-input:focus,
.hvadrm-theme-cam .hvadrm-archive-search-input:focus,
.theme-liquid-glass .hvadrm-archive-search-input:focus {
  border-color: #38bdf8 !important;
  background: rgba(15, 23, 42, 0.9) !important;
  box-shadow: 0 0 0 4px rgba(56, 189, 248, 0.25), 0 8px 30px rgba(0, 0, 0, 0.35) !important;
  color: #ffffff !important;
}

/* Karanlık Tema Arama Inputu */
.hvadrm-theme-karanlik .hvadrm-archive-search-input,
.hvadrm-theme-koyu .hvadrm-archive-search-input,
.theme-dark .hvadrm-archive-search-input {
  background: #1e293b !important;
  border: 1.5px solid #334155 !important;
  color: #f8fafc !important;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.28) !important;
}

.hvadrm-theme-karanlik .hvadrm-archive-search-input:focus,
.hvadrm-theme-koyu .hvadrm-archive-search-input:focus,
.theme-dark .hvadrm-archive-search-input:focus {
  border-color: #38bdf8 !important;
  background: #0f172a !important;
  box-shadow: 0 0 0 4px rgba(56, 189, 248, 0.22), 0 8px 25px rgba(0, 0, 0, 0.4) !important;
  color: #ffffff !important;
}

/* Açık (Light) Tema Arama Inputu */
.hvadrm-theme-acik .hvadrm-archive-search-input,
.theme-light .hvadrm-archive-search-input {
  background: #ffffff !important;
  border: 1.5px solid #cbd5e1 !important;
  color: #0f172a !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.05), inset 0 1px 2px rgba(0, 0, 0, 0.02) !important;
}

.hvadrm-theme-acik .hvadrm-archive-search-input:focus,
.theme-light .hvadrm-archive-search-input:focus {
  border-color: #0284c7 !important;
  background: #ffffff !important;
  box-shadow: 0 0 0 4px rgba(2, 132, 199, 0.18), 0 8px 25px rgba(0, 0, 0, 0.08) !important;
  color: #0f172a !important;
}

/* Placeholder renkleri */
.hvadrm-archive-container input.hvadrm-archive-search-input::placeholder {
  font-family: inherit !important;
  font-size: 14.5px !important;
  font-weight: 400 !important;
  opacity: 1 !important;
}

.hvadrm-theme-cam input.hvadrm-archive-search-input::placeholder,
.theme-liquid-glass input.hvadrm-archive-search-input::placeholder {
  color: rgba(226, 232, 240, 0.7) !important;
}

.hvadrm-theme-karanlik input.hvadrm-archive-search-input::placeholder,
.theme-dark input.hvadrm-archive-search-input::placeholder {
  color: #94a3b8 !important;
}

.hvadrm-theme-acik input.hvadrm-archive-search-input::placeholder,
.theme-light input.hvadrm-archive-search-input::placeholder {
  color: #64748b !important;
}

/* Arama İkonu */
.hvadrm-archive-container .hvadrm-archive-search-icon {
  position: absolute !important;
  left: 20px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 20px !important;
  height: 20px !important;
  pointer-events: none !important;
  z-index: 3 !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  transition: color 0.2s ease !important;
}

.hvadrm-theme-cam .hvadrm-archive-search-icon,
.theme-liquid-glass .hvadrm-archive-search-icon {
  color: rgba(226, 232, 240, 0.8) !important;
}

.hvadrm-theme-karanlik .hvadrm-archive-search-icon,
.theme-dark .hvadrm-archive-search-icon {
  color: #94a3b8 !important;
}

.hvadrm-theme-acik .hvadrm-archive-search-icon,
.theme-light .hvadrm-archive-search-icon {
  color: #64748b !important;
}

/* Arama Temizle Butonu (Temalardan etkilenmeyen tam sıfırlama, sadece arama doluyken görünür) */
.hvadrm-archive-container button.hvadrm-archive-clear-btn,
body .hvadrm-archive-container button#hvadrmSearchClearBtn,
.entry-content .hvadrm-archive-container button#hvadrmSearchClearBtn {
  all: unset !important;
  box-sizing: border-box !important;
  position: absolute !important;
  right: 14px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 24px !important;
  height: 24px !important;
  min-width: 24px !important;
  min-height: 24px !important;
  max-width: 24px !important;
  max-height: 24px !important;
  border-radius: 50% !important;
  background: rgba(148, 163, 184, 0.22) !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  color: inherit !important;
  cursor: pointer !important;
  display: none !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 4 !important;
  transition: background 0.2s ease, transform 0.2s ease, color 0.2s ease !important;
}

.hvadrm-archive-container button.hvadrm-archive-clear-btn.is-active,
body .hvadrm-archive-container button#hvadrmSearchClearBtn.is-active {
  display: flex !important;
}

.hvadrm-archive-container button.hvadrm-archive-clear-btn:hover {
  background: rgba(239, 68, 68, 0.85) !important;
  color: #ffffff !important;
  transform: translateY(-50%) scale(1.08) !important;
}

/* Canlı Arama Sonuçları Dropdown (İlçe ve İl Arama Listesi) */
.hvadrm-archive-dropdown {
  position: absolute !important;
  top: calc(100% + 8px) !important;
  left: 0 !important;
  right: 0 !important;
  background: #0b1120 !important;
  border: 1.5px solid rgba(56, 189, 248, 0.4) !important;
  border-radius: 16px !important;
  box-shadow: 0 25px 60px -10px rgba(0, 0, 0, 0.85), 0 0 0 1px rgba(255, 255, 255, 0.1) !important;
  z-index: 99999 !important;
  max-height: 380px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding: 8px !important;
  box-sizing: border-box !important;
  text-align: left !important;
}

.hvadrm-archive-dropdown::-webkit-scrollbar {
  width: 6px !important;
}
.hvadrm-archive-dropdown::-webkit-scrollbar-track {
  background: rgba(15, 23, 42, 0.5) !important;
  border-radius: 8px !important;
}
.hvadrm-archive-dropdown::-webkit-scrollbar-thumb {
  background: rgba(56, 189, 248, 0.35) !important;
  border-radius: 8px !important;
}
.hvadrm-archive-dropdown::-webkit-scrollbar-thumb:hover {
  background: rgba(56, 189, 248, 0.6) !important;
}

.hvadrm-theme-cam .hvadrm-archive-dropdown,
.theme-liquid-glass .hvadrm-archive-dropdown {
  background: #0b1329 !important;
  border-color: rgba(56, 189, 248, 0.4) !important;
  box-shadow: 0 25px 60px -10px rgba(0, 0, 0, 0.85), 0 0 25px rgba(56, 189, 248, 0.15) !important;
}

.hvadrm-theme-karanlik .hvadrm-archive-dropdown,
.hvadrm-theme-koyu .hvadrm-archive-dropdown,
.theme-dark .hvadrm-archive-dropdown {
  background: #0f172a !important;
  border-color: rgba(56, 189, 248, 0.35) !important;
  box-shadow: 0 25px 60px -10px rgba(0, 0, 0, 0.85) !important;
}

.hvadrm-theme-acik .hvadrm-archive-dropdown,
.theme-light .hvadrm-archive-dropdown {
  background: #ffffff !important;
  border-color: #cbd5e1 !important;
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.16), 0 0 0 1px rgba(0, 0, 0, 0.05) !important;
}

.hvadrm-dropdown-section-title {
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.8px !important;
  color: #94a3b8 !important;
  padding: 8px 12px 6px 12px !important;
  margin: 0 !important;
}

.hvadrm-theme-acik .hvadrm-dropdown-section-title,
.theme-light .hvadrm-dropdown-section-title {
  color: #64748b !important;
}

.hvadrm-dropdown-item {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 10px 14px !important;
  border-radius: 12px !important;
  text-decoration: none !important;
  color: #ffffff !important;
  transition: background 0.18s ease, transform 0.18s ease !important;
  cursor: pointer !important;
  box-sizing: border-box !important;
  margin-bottom: 2px !important;
}

.hvadrm-theme-acik .hvadrm-dropdown-item,
.theme-light .hvadrm-dropdown-item {
  color: #0f172a !important;
}

.hvadrm-dropdown-item:hover,
.hvadrm-dropdown-item.is-selected {
  background: rgba(56, 189, 248, 0.18) !important;
  transform: translateX(3px) !important;
}

.hvadrm-theme-acik .hvadrm-dropdown-item:hover,
.theme-light .hvadrm-dropdown-item:hover {
  background: #f1f5f9 !important;
}

.hvadrm-item-icon {
  font-size: 16px !important;
  flex-shrink: 0 !important;
  line-height: 1 !important;
}

.hvadrm-item-info {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

.hvadrm-archive-container a.hvadrm-dropdown-item,
body .hvadrm-archive-container .hvadrm-archive-dropdown a.hvadrm-dropdown-item {
  color: #f8fafc !important;
  text-decoration: none !important;
}

.hvadrm-archive-container a.hvadrm-dropdown-item:hover,
body .hvadrm-archive-container a.hvadrm-dropdown-item:hover {
  text-decoration: none !important;
  color: #ffffff !important;
}

.hvadrm-archive-container a.hvadrm-dropdown-item .hvadrm-item-title,
body .hvadrm-archive-container a.hvadrm-dropdown-item .hvadrm-item-title {
  font-size: 14.5px !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  color: #f8fafc !important;
}

.hvadrm-archive-container a.hvadrm-dropdown-item .hvadrm-item-title mark {
  background: rgba(56, 189, 248, 0.25) !important;
  color: #38bdf8 !important;
  border-radius: 3px !important;
  padding: 0 2px !important;
  font-weight: 700 !important;
}

.hvadrm-archive-container a.hvadrm-dropdown-item .hvadrm-item-sub,
body .hvadrm-archive-container a.hvadrm-dropdown-item .hvadrm-item-sub {
  font-size: 12.5px !important;
  color: #94a3b8 !important;
  line-height: 1.25 !important;
  margin-top: 2px !important;
}

/* Light Tema Dropdown Renkleri */
.hvadrm-theme-acik a.hvadrm-dropdown-item,
.theme-light a.hvadrm-dropdown-item,
.hvadrm-theme-acik a.hvadrm-dropdown-item .hvadrm-item-title,
.theme-light a.hvadrm-dropdown-item .hvadrm-item-title {
  color: #0f172a !important;
}

.hvadrm-theme-acik a.hvadrm-dropdown-item .hvadrm-item-title mark,
.theme-light a.hvadrm-dropdown-item .hvadrm-item-title mark {
  background: rgba(2, 132, 199, 0.2) !important;
  color: #0284c7 !important;
}

.hvadrm-theme-acik a.hvadrm-dropdown-item .hvadrm-item-sub,
.theme-light a.hvadrm-dropdown-item .hvadrm-item-sub {
  color: #64748b !important;
}

.hvadrm-item-badge {
  font-size: 11px !important;
  font-weight: 700 !important;
  padding: 3px 8px !important;
  border-radius: 6px !important;
  background: rgba(56, 189, 248, 0.16) !important;
  color: #38bdf8 !important;
  flex-shrink: 0 !important;
}

.hvadrm-theme-acik .hvadrm-item-badge,
.theme-light .hvadrm-item-badge {
  background: #e0f2fe !important;
  color: #0284c7 !important;
}

.hvadrm-dropdown-empty {
  padding: 14px !important;
  text-align: center !important;
  color: #94a3b8 !important;
  font-size: 13.5px !important;
}

/* Eşleşen İlçe Rozeti */
.hvadrm-matched-district {
  font-size: 11.5px !important;
  font-weight: 600 !important;
  color: #38bdf8 !important;
  background: rgba(56, 189, 248, 0.14) !important;
  padding: 2px 8px !important;
  border-radius: 6px !important;
  display: inline-block !important;
  max-width: 140px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.hvadrm-theme-acik .hvadrm-matched-district,
.theme-light .hvadrm-matched-district {
  color: #0284c7 !important;
  background: #e0f2fe !important;
}

/* --- Bölge Filtre Butonları --- */
.hvadrm-region-chips {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  gap: 8px !important;
}

.hvadrm-chip {
  padding: 6px 14px !important;
  border-radius: 9999px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: rgba(241, 245, 249, 0.8) !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  line-height: 1.3 !important;
}

.hvadrm-chip:hover {
  background: rgba(255, 255, 255, 0.16) !important;
  color: #ffffff !important;
  transform: translateY(-1px) !important;
}

.hvadrm-chip.active {
  background: #0284c7 !important;
  border-color: #38bdf8 !important;
  color: #ffffff !important;
  box-shadow: 0 4px 12px rgba(2, 132, 199, 0.4) !important;
}

/* --- 81 İl Kart Izgarası --- */
.hvadrm-cities-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(175px, 1fr)) !important;
  gap: 14px !important;
  width: 100% !important;
}

/* Izgara Kartlarında GPU Yükünü Sıfırlama: SVG animasyonları sadece hover anında canlanır */
.hvadrm-cities-grid .hvadrm-box-icon svg,
.hvadrm-cities-grid .hvadrm-box-icon svg *,
.hvadrm-cities-grid .hvadrm-city-box svg,
.hvadrm-cities-grid .hvadrm-city-box svg * {
  animation-play-state: paused !important;
}

.hvadrm-cities-grid .hvadrm-city-box:hover .hvadrm-box-icon svg,
.hvadrm-cities-grid .hvadrm-city-box:hover .hvadrm-box-icon svg *,
.hvadrm-cities-grid .hvadrm-city-box:hover svg,
.hvadrm-cities-grid .hvadrm-city-box:hover svg * {
  animation-play-state: running !important;
}

.hvadrm-city-box {
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  background: linear-gradient(135deg, rgba(30, 41, 59, 0.92) 0%, rgba(15, 23, 42, 0.96) 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.09) !important;
  border-radius: 18px !important;
  padding: 14px 14px 12px !important;
  text-decoration: none !important;
  color: inherit !important;
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  position: relative !important;
  overflow: hidden !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2) !important;
  box-sizing: border-box !important;
  content-visibility: auto !important;
  contain-intrinsic-size: 180px 125px !important;
  contain: layout style paint !important;
}

.hvadrm-city-box.hvadrm-hidden,
.hvadrm-city-box[style*="display: none"],
.hvadrm-city-box[style*="display:none"] {
  display: none !important;
}

.hvadrm-city-box::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 1px !important;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.22), transparent) !important;
}

.hvadrm-city-box:hover {
  transform: translateY(-4px) !important;
  border-color: rgba(56, 189, 248, 0.45) !important;
  box-shadow: 0 12px 28px -4px rgba(0, 0, 0, 0.45), 0 0 20px rgba(56, 189, 248, 0.2) !important;
  background: linear-gradient(135deg, rgba(30, 41, 59, 0.88) 0%, rgba(15, 23, 42, 0.92) 100%) !important;
}

.hvadrm-city-box:active {
  transform: scale(0.98) !important;
}

/* Kart Başlığı (Plaka + Şehir) */
.hvadrm-box-header {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin-bottom: 8px !important;
}

.hvadrm-plate-badge {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 28px !important;
  height: 22px !important;
  padding: 0 6px !important;
  background: rgba(56, 189, 248, 0.16) !important;
  border: 1px solid rgba(56, 189, 248, 0.35) !important;
  border-radius: 6px !important;
  font-size: 11.5px !important;
  font-weight: 800 !important;
  color: #38bdf8 !important;
  letter-spacing: 0.5px !important;
  flex-shrink: 0 !important;
  font-variant-numeric: tabular-nums !important;
}

.hvadrm-box-city {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  margin: 0 !important;
  line-height: 1.2 !important;
}

/* Kart Gövdesi (İkon + Derece) */
.hvadrm-box-body {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 8px !important;
  gap: 6px !important;
}

.hvadrm-box-icon {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 44px !important;
  height: 44px !important;
  flex-shrink: 0 !important;
}

.hvadrm-box-icon svg {
  width: 38px !important;
  height: 38px !important;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.3)) !important;
}

.hvadrm-box-temp {
  display: flex !important;
  align-items: baseline !important;
}

.hvadrm-temp-val {
  font-size: 26px !important;
  font-weight: 800 !important;
  color: #f8fafc !important;
  line-height: 1 !important;
  font-variant-numeric: tabular-nums !important;
}

.hvadrm-temp-unit {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #38bdf8 !important;
  margin-left: 2px !important;
}

/* Kart Altı (Hadise Açıklaması + Ok) */
.hvadrm-box-footer {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  border-top: 1px solid rgba(255, 255, 255, 0.07) !important;
  padding-top: 7px !important;
  margin-top: 2px !important;
}

.hvadrm-box-desc {
  font-size: 11.5px !important;
  color: #94a3b8 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: calc(100% - 16px) !important;
  font-weight: 500 !important;
}

.hvadrm-box-arrow {
  display: flex !important;
  align-items: center !important;
  color: rgba(255, 255, 255, 0.35) !important;
  transition: transform 0.2s ease, color 0.2s ease !important;
  flex-shrink: 0 !important;
}

.hvadrm-city-box:hover .hvadrm-box-arrow {
  transform: translateX(3px) !important;
  color: #38bdf8 !important;
}

/* --- Boş Arama Durumu --- */
.hvadrm-no-results {
  text-align: center !important;
  padding: 48px 20px !important;
  background: rgba(30, 41, 59, 0.5) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 20px !important;
  margin: 20px auto !important;
  max-width: 500px !important;
  color: #94a3b8 !important;
}

.hvadrm-no-res-icon {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-bottom: 12px !important;
  color: #64748b !important;
}

.hvadrm-no-results h4 {
  font-size: 18px !important;
  font-weight: 700 !important;
  color: #f1f5f9 !important;
  margin: 0 0 6px 0 !important;
}

.hvadrm-no-results p {
  font-size: 13.5px !important;
  color: #94a3b8 !important;
  margin: 0 !important;
}

/* ==========================================================
   HAVA DURUMU ANA SAYFA (81 İL) TEMA ÇEŞİTLERİ (4 TEMA)
   ========================================================== */

/* ----------------------------------------------------------
   1. AÇIK TEMA (LIGHT CLEAN)
   ---------------------------------------------------------- */
:is(.hvadrm-theme-acik, .theme-light, [data-theme="acik"]) .hvadrm-archive-hero {
  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 55%, #f1f5f9 100%) !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 14px 36px -8px rgba(100, 116, 139, 0.12), 0 2px 8px rgba(0, 0, 0, 0.03) !important;
}

:is(.hvadrm-theme-acik, .theme-light, [data-theme="acik"]) .hvadrm-archive-hero::before {
  background: linear-gradient(90deg, transparent, rgba(2, 132, 199, 0.45), transparent) !important;
}

:is(.hvadrm-theme-acik, .theme-light, [data-theme="acik"]) .hvadrm-archive-badge {
  background: #e0f2fe !important;
  border: 1px solid #bae6fd !important;
  color: #0284c7 !important;
}

:is(.hvadrm-theme-acik, .theme-light, [data-theme="acik"]) .hvadrm-archive-title {
  color: #0f172a !important;
  text-shadow: none !important;
}

:is(.hvadrm-theme-acik, .theme-light, [data-theme="acik"]) .hvadrm-archive-subtitle {
  color: #64748b !important;
}

:is(.hvadrm-theme-acik, .theme-light, [data-theme="acik"]) .hvadrm-archive-search-input {
  background: #ffffff !important;
  border: 1.5px solid #cbd5e1 !important;
  color: #0f172a !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
}

:is(.hvadrm-theme-acik, .theme-light, [data-theme="acik"]) .hvadrm-archive-search-input::placeholder {
  color: #94a3b8 !important;
  opacity: 1 !important;
}

:is(.hvadrm-theme-acik, .theme-light, [data-theme="acik"]) .hvadrm-archive-search-input:focus {
  border-color: #0284c7 !important;
  background: #ffffff !important;
  box-shadow: 0 0 0 4px rgba(2, 132, 199, 0.15), 0 8px 20px rgba(0, 0, 0, 0.06) !important;
}

:is(.hvadrm-theme-acik, .theme-light, [data-theme="acik"]) .hvadrm-archive-search-icon {
  color: #64748b !important;
}

:is(.hvadrm-theme-acik, .theme-light, [data-theme="acik"]) .hvadrm-archive-clear-btn {
  background: #e2e8f0 !important;
  color: #475569 !important;
}

:is(.hvadrm-theme-acik, .theme-light, [data-theme="acik"]) .hvadrm-archive-clear-btn:hover {
  background: #ef4444 !important;
  color: #ffffff !important;
}

:is(.hvadrm-theme-acik, .theme-light, [data-theme="acik"]) .hvadrm-archive-action-btn {
  background: #ffffff !important;
  border: 1.5px solid #cbd5e1 !important;
  color: #0f172a !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
}

:is(.hvadrm-theme-acik, .theme-light, [data-theme="acik"]) .hvadrm-archive-action-btn:hover {
  background: #f8fafc !important;
  border-color: #0284c7 !important;
  color: #0284c7 !important;
  box-shadow: 0 4px 14px rgba(2, 132, 199, 0.15) !important;
}

:is(.hvadrm-theme-acik, .theme-light, [data-theme="acik"]) .hvadrm-chip {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  color: #475569 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
}

:is(.hvadrm-theme-acik, .theme-light, [data-theme="acik"]) .hvadrm-chip:hover {
  background: #f1f5f9 !important;
  border-color: #cbd5e1 !important;
  color: #0f172a !important;
}

:is(.hvadrm-theme-acik, .theme-light, [data-theme="acik"]) .hvadrm-chip.active {
  background: #0284c7 !important;
  border-color: #0284c7 !important;
  color: #ffffff !important;
  box-shadow: 0 4px 14px rgba(2, 132, 199, 0.35) !important;
}

:is(.hvadrm-theme-acik, .theme-light, [data-theme="acik"]) .hvadrm-city-box {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 4px 16px rgba(100, 116, 139, 0.08), 0 1px 3px rgba(0, 0, 0, 0.03) !important;
}

:is(.hvadrm-theme-acik, .theme-light, [data-theme="acik"]) .hvadrm-city-box::before {
  background: linear-gradient(90deg, transparent, rgba(2, 132, 199, 0.25), transparent) !important;
}

:is(.hvadrm-theme-acik, .theme-light, [data-theme="acik"]) .hvadrm-city-box:hover {
  background: #ffffff !important;
  border-color: #38bdf8 !important;
  box-shadow: 0 14px 30px -4px rgba(2, 132, 199, 0.18), 0 4px 12px rgba(0, 0, 0, 0.05) !important;
}

:is(.hvadrm-theme-acik, .theme-light, [data-theme="acik"]) .hvadrm-plate-badge {
  background: #f0f9ff !important;
  border: 1px solid #bae6fd !important;
  color: #0284c7 !important;
}

:is(.hvadrm-theme-acik, .theme-light, [data-theme="acik"]) .hvadrm-box-city {
  color: #0f172a !important;
}

:is(.hvadrm-theme-acik, .theme-light, [data-theme="acik"]) .hvadrm-temp-val {
  color: #0f172a !important;
}

:is(.hvadrm-theme-acik, .theme-light, [data-theme="acik"]) .hvadrm-temp-unit {
  color: #0284c7 !important;
}

:is(.hvadrm-theme-acik, .theme-light, [data-theme="acik"]) .hvadrm-box-footer {
  border-top: 1px solid #f1f5f9 !important;
}

:is(.hvadrm-theme-acik, .theme-light, [data-theme="acik"]) .hvadrm-box-desc {
  color: #64748b !important;
}

:is(.hvadrm-theme-acik, .theme-light, [data-theme="acik"]) .hvadrm-box-arrow {
  color: #94a3b8 !important;
}

:is(.hvadrm-theme-acik, .theme-light, [data-theme="acik"]) .hvadrm-city-box:hover .hvadrm-box-arrow {
  color: #0284c7 !important;
}

:is(.hvadrm-theme-acik, .theme-light, [data-theme="acik"]) .hvadrm-no-results {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  color: #64748b !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.05) !important;
}

:is(.hvadrm-theme-acik, .theme-light, [data-theme="acik"]) .hvadrm-no-results h4 {
  color: #0f172a !important;
}

:is(.hvadrm-theme-acik, .theme-light, [data-theme="acik"]) .hvadrm-no-results p {
  color: #64748b !important;
}

:is(.hvadrm-theme-acik, .theme-light, [data-theme="acik"]) .hvadrm-no-res-icon {
  color: #94a3b8 !important;
}

/* ----------------------------------------------------------
   2. LİKİT CAM TEMA (LIQUID GLASS ULTRA PREMIUM)
   ---------------------------------------------------------- */
:is(.hvadrm-theme-cam, .theme-liquid-glass, [data-theme="cam"]) .hvadrm-archive-hero {
  background: 
    radial-gradient(ellipse at 15% 15%, rgba(6, 182, 212, 0.35) 0%, transparent 50%),
    radial-gradient(ellipse at 85% 15%, rgba(139, 92, 246, 0.32) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 85%, rgba(236, 72, 153, 0.22) 0%, transparent 50%),
    linear-gradient(135deg, rgba(6, 11, 23, 0.9) 0%, rgba(2, 4, 10, 0.95) 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  box-shadow: inset 0 1.5px 1.5px 0 rgba(255, 255, 255, 0.4), 0 24px 50px -12px rgba(2, 6, 23, 0.85), 0 0 25px rgba(56, 189, 248, 0.2) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
}

:is(.hvadrm-theme-cam, .theme-liquid-glass, [data-theme="cam"]) .hvadrm-archive-hero::before {
  background: linear-gradient(90deg, transparent, rgba(6, 182, 212, 0.9), rgba(139, 92, 246, 0.9), transparent) !important;
}

:is(.hvadrm-theme-cam, .theme-liquid-glass, [data-theme="cam"]) .hvadrm-archive-badge {
  background: rgba(6, 182, 212, 0.2) !important;
  border: 1px solid rgba(56, 189, 248, 0.5) !important;
  color: #38bdf8 !important;
  box-shadow: 0 0 16px rgba(6, 182, 212, 0.3) !important;
}

:is(.hvadrm-theme-cam, .theme-liquid-glass, [data-theme="cam"]) .hvadrm-archive-title {
  color: #ffffff !important;
  text-shadow: 0 2px 16px rgba(6, 182, 212, 0.4) !important;
}

:is(.hvadrm-theme-cam, .theme-liquid-glass, [data-theme="cam"]) .hvadrm-archive-subtitle {
  color: rgba(241, 245, 249, 0.85) !important;
}

:is(.hvadrm-theme-cam, .theme-liquid-glass, [data-theme="cam"]) .hvadrm-archive-search-input {
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  color: #ffffff !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  box-shadow: inset 0 1.5px 1.5px rgba(255, 255, 255, 0.3), inset 0 -1.5px 1.5px rgba(0, 0, 0, 0.3) !important;
}

:is(.hvadrm-theme-cam, .theme-liquid-glass, [data-theme="cam"]) .hvadrm-archive-search-input::placeholder {
  color: #cbd5e1 !important;
  opacity: 0.8 !important;
}

:is(.hvadrm-theme-cam, .theme-liquid-glass, [data-theme="cam"]) .hvadrm-archive-search-input:focus {
  border-color: #38bdf8 !important;
  background: rgba(255, 255, 255, 0.14) !important;
  box-shadow: 0 0 0 4px rgba(56, 189, 248, 0.3), 0 0 25px rgba(6, 182, 212, 0.45) !important;
}

:is(.hvadrm-theme-cam, .theme-liquid-glass, [data-theme="cam"]) .hvadrm-archive-search-icon {
  color: #94a3b8 !important;
}

:is(.hvadrm-theme-cam, .theme-liquid-glass, [data-theme="cam"]) .hvadrm-archive-clear-btn {
  background: rgba(255, 255, 255, 0.22) !important;
  color: #ffffff !important;
}

:is(.hvadrm-theme-cam, .theme-liquid-glass, [data-theme="cam"]) .hvadrm-archive-action-btn {
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  color: #ffffff !important;
  box-shadow: inset 0 1px 1px 0 rgba(255, 255, 255, 0.25), 0 4px 16px rgba(0, 0, 0, 0.3) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
}

:is(.hvadrm-theme-cam, .theme-liquid-glass, [data-theme="cam"]) .hvadrm-archive-action-btn:hover {
  background: rgba(255, 255, 255, 0.16) !important;
  border-color: rgba(56, 189, 248, 0.6) !important;
  color: #38bdf8 !important;
  box-shadow: inset 0 1px 1px 0 rgba(255, 255, 255, 0.4), 0 6px 20px rgba(6, 182, 212, 0.3) !important;
}

:is(.hvadrm-theme-cam, .theme-liquid-glass, [data-theme="cam"]) .hvadrm-chip {
  background: rgba(255, 255, 255, 0.09) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  color: #ffffff !important;
  backdrop-filter: blur(10px) !important;
}

:is(.hvadrm-theme-cam, .theme-liquid-glass, [data-theme="cam"]) .hvadrm-chip:hover {
  background: rgba(255, 255, 255, 0.2) !important;
  border-color: rgba(255, 255, 255, 0.35) !important;
  box-shadow: 0 0 16px rgba(56, 189, 248, 0.25) !important;
}

:is(.hvadrm-theme-cam, .theme-liquid-glass, [data-theme="cam"]) .hvadrm-chip.active {
  background: linear-gradient(135deg, rgba(6, 182, 212, 0.85) 0%, rgba(59, 130, 246, 0.85) 100%) !important;
  border-color: #38bdf8 !important;
  color: #ffffff !important;
  box-shadow: 0 4px 16px rgba(6, 182, 212, 0.5), inset 0 1px 1px rgba(255, 255, 255, 0.6) !important;
}

:is(.hvadrm-theme-cam, .theme-liquid-glass, [data-theme="cam"]) .hvadrm-city-box {
  background: linear-gradient(135deg, rgba(24, 33, 47, 0.94) 0%, rgba(15, 23, 42, 0.98) 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  box-shadow: inset 0 1px 1px 0 rgba(255, 255, 255, 0.25), 0 8px 24px -4px rgba(0, 0, 0, 0.45), 0 0 14px rgba(6, 182, 212, 0.1) !important;
}

:is(.hvadrm-theme-cam, .theme-liquid-glass, [data-theme="cam"]) .hvadrm-city-box::before {
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.35), transparent) !important;
}

:is(.hvadrm-theme-cam, .theme-liquid-glass, [data-theme="cam"]) .hvadrm-city-box:hover {
  background: linear-gradient(135deg, rgba(30, 41, 59, 0.98) 0%, rgba(15, 23, 42, 1) 100%) !important;
  border-color: rgba(56, 189, 248, 0.65) !important;
  box-shadow: inset 0 1px 1px 0 rgba(255, 255, 255, 0.4), 0 14px 32px -4px rgba(0, 0, 0, 0.6), 0 0 22px rgba(56, 189, 248, 0.3) !important;
}

:is(.hvadrm-theme-cam, .theme-liquid-glass, [data-theme="cam"]) .hvadrm-plate-badge {
  background: rgba(6, 182, 212, 0.22) !important;
  border: 1px solid rgba(56, 189, 248, 0.45) !important;
  color: #38bdf8 !important;
  box-shadow: 0 0 10px rgba(6, 182, 212, 0.25) !important;
}

:is(.hvadrm-theme-cam, .theme-liquid-glass, [data-theme="cam"]) .hvadrm-box-city {
  color: #ffffff !important;
}

:is(.hvadrm-theme-cam, .theme-liquid-glass, [data-theme="cam"]) .hvadrm-temp-val {
  color: #ffffff !important;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3) !important;
}

:is(.hvadrm-theme-cam, .theme-liquid-glass, [data-theme="cam"]) .hvadrm-temp-unit {
  color: #38bdf8 !important;
}

:is(.hvadrm-theme-cam, .theme-liquid-glass, [data-theme="cam"]) .hvadrm-box-footer {
  border-top: 1px solid rgba(255, 255, 255, 0.12) !important;
}

:is(.hvadrm-theme-cam, .theme-liquid-glass, [data-theme="cam"]) .hvadrm-box-desc {
  color: #cbd5e1 !important;
}

:is(.hvadrm-theme-cam, .theme-liquid-glass, [data-theme="cam"]) .hvadrm-box-arrow {
  color: rgba(255, 255, 255, 0.4) !important;
}

:is(.hvadrm-theme-cam, .theme-liquid-glass, [data-theme="cam"]) .hvadrm-city-box:hover .hvadrm-box-arrow {
  color: #38bdf8 !important;
}

:is(.hvadrm-theme-cam, .theme-liquid-glass, [data-theme="cam"]) .hvadrm-no-results {
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  color: #cbd5e1 !important;
  backdrop-filter: blur(16px) !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5) !important;
}

:is(.hvadrm-theme-cam, .theme-liquid-glass, [data-theme="cam"]) .hvadrm-no-results h4 {
  color: #ffffff !important;
}

:is(.hvadrm-theme-cam, .theme-liquid-glass, [data-theme="cam"]) .hvadrm-no-results p {
  color: #cbd5e1 !important;
}

/* ----------------------------------------------------------
   3. MODERN KOYU TEMA (GLASSMORHPIC SLATE)
   ---------------------------------------------------------- */
:is(.hvadrm-theme-koyu, [data-theme="koyu"]) .hvadrm-archive-hero {
  background: linear-gradient(135deg, rgba(30, 41, 59, 0.85) 0%, rgba(15, 23, 42, 0.92) 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow: 0 16px 40px -12px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
}

:is(.hvadrm-theme-koyu, [data-theme="koyu"]) .hvadrm-archive-hero::before {
  background: linear-gradient(90deg, transparent, rgba(56, 189, 248, 0.6), transparent) !important;
}

:is(.hvadrm-theme-koyu, [data-theme="koyu"]) .hvadrm-archive-badge {
  background: rgba(14, 165, 233, 0.15) !important;
  border: 1px solid rgba(56, 189, 248, 0.35) !important;
  color: #38bdf8 !important;
}

:is(.hvadrm-theme-koyu, [data-theme="koyu"]) .hvadrm-archive-title {
  color: #ffffff !important;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.4) !important;
}

:is(.hvadrm-theme-koyu, [data-theme="koyu"]) .hvadrm-archive-subtitle {
  color: rgba(226, 232, 240, 0.75) !important;
}

:is(.hvadrm-theme-koyu, [data-theme="koyu"]) .hvadrm-archive-search-input {
  background: rgba(15, 23, 42, 0.82) !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  color: #ffffff !important;
  backdrop-filter: blur(10px) !important;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.25) !important;
}

:is(.hvadrm-theme-koyu, [data-theme="koyu"]) .hvadrm-archive-search-input::placeholder {
  color: #94a3b8 !important;
}

:is(.hvadrm-theme-koyu, [data-theme="koyu"]) .hvadrm-archive-search-input:focus {
  border-color: #38bdf8 !important;
  background: rgba(15, 23, 42, 0.96) !important;
  box-shadow: 0 0 0 4px rgba(56, 189, 248, 0.22), 0 8px 24px rgba(0, 0, 0, 0.4) !important;
}

:is(.hvadrm-theme-koyu, [data-theme="koyu"]) .hvadrm-chip {
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: rgba(241, 245, 249, 0.85) !important;
}

:is(.hvadrm-theme-koyu, [data-theme="koyu"]) .hvadrm-chip:hover {
  background: rgba(255, 255, 255, 0.16) !important;
  color: #ffffff !important;
}

:is(.hvadrm-theme-koyu, [data-theme="koyu"]) .hvadrm-chip.active {
  background: #0284c7 !important;
  border-color: #38bdf8 !important;
  color: #ffffff !important;
  box-shadow: 0 4px 14px rgba(2, 132, 199, 0.4) !important;
}

:is(.hvadrm-theme-koyu, [data-theme="koyu"]) .hvadrm-city-box {
  background: linear-gradient(135deg, rgba(30, 41, 59, 0.92) 0%, rgba(15, 23, 42, 0.96) 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.09) !important;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25) !important;
}

:is(.hvadrm-theme-koyu, [data-theme="koyu"]) .hvadrm-city-box::before {
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.22), transparent) !important;
}

:is(.hvadrm-theme-koyu, [data-theme="koyu"]) .hvadrm-city-box:hover {
  background: linear-gradient(135deg, rgba(30, 41, 59, 0.92) 0%, rgba(15, 23, 42, 0.95) 100%) !important;
  border-color: rgba(56, 189, 248, 0.45) !important;
  box-shadow: 0 12px 28px -4px rgba(0, 0, 0, 0.5), 0 0 20px rgba(56, 189, 248, 0.2) !important;
}

:is(.hvadrm-theme-koyu, [data-theme="koyu"]) .hvadrm-plate-badge {
  background: rgba(56, 189, 248, 0.16) !important;
  border: 1px solid rgba(56, 189, 248, 0.35) !important;
  color: #38bdf8 !important;
}

:is(.hvadrm-theme-koyu, [data-theme="koyu"]) .hvadrm-box-city {
  color: #ffffff !important;
}

:is(.hvadrm-theme-koyu, [data-theme="koyu"]) .hvadrm-temp-val {
  color: #f8fafc !important;
}

:is(.hvadrm-theme-koyu, [data-theme="koyu"]) .hvadrm-temp-unit {
  color: #38bdf8 !important;
}

:is(.hvadrm-theme-koyu, [data-theme="koyu"]) .hvadrm-box-footer {
  border-top: 1px solid rgba(255, 255, 255, 0.07) !important;
}

:is(.hvadrm-theme-koyu, [data-theme="koyu"]) .hvadrm-box-desc {
  color: #94a3b8 !important;
}

:is(.hvadrm-theme-koyu, [data-theme="koyu"]) .hvadrm-box-arrow {
  color: rgba(255, 255, 255, 0.35) !important;
}

:is(.hvadrm-theme-koyu, [data-theme="koyu"]) .hvadrm-city-box:hover .hvadrm-box-arrow {
  color: #38bdf8 !important;
}

:is(.hvadrm-theme-koyu, [data-theme="koyu"]) .hvadrm-no-results {
  background: rgba(30, 41, 59, 0.6) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  color: #94a3b8 !important;
}

/* ----------------------------------------------------------
   4. TAM KARANLIK TEMA (OLED MINIMAL)
   ---------------------------------------------------------- */
:is(.hvadrm-theme-karanlik, .theme-dark, [data-theme="karanlik"]) .hvadrm-archive-hero {
  background: linear-gradient(135deg, #090d16 0%, #030712 100%) !important;
  border: 1px solid rgba(55, 65, 81, 0.6) !important;
  box-shadow: 0 20px 48px -10px rgba(0, 0, 0, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
}

:is(.hvadrm-theme-karanlik, .theme-dark, [data-theme="karanlik"]) .hvadrm-archive-hero::before {
  background: linear-gradient(90deg, transparent, rgba(96, 165, 250, 0.6), transparent) !important;
}

:is(.hvadrm-theme-karanlik, .theme-dark, [data-theme="karanlik"]) .hvadrm-archive-badge {
  background: rgba(31, 41, 55, 0.8) !important;
  border: 1px solid rgba(75, 85, 99, 0.6) !important;
  color: #9ca3af !important;
}

:is(.hvadrm-theme-karanlik, .theme-dark, [data-theme="karanlik"]) .hvadrm-archive-title {
  color: #ffffff !important;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.8) !important;
}

:is(.hvadrm-theme-karanlik, .theme-dark, [data-theme="karanlik"]) .hvadrm-archive-subtitle {
  color: #9ca3af !important;
}

:is(.hvadrm-theme-karanlik, .theme-dark, [data-theme="karanlik"]) .hvadrm-archive-search-input {
  background: #030712 !important;
  border: 1px solid rgba(55, 65, 81, 0.8) !important;
  color: #ffffff !important;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.5) !important;
}

:is(.hvadrm-theme-karanlik, .theme-dark, [data-theme="karanlik"]) .hvadrm-archive-search-input::placeholder {
  color: #6b7280 !important;
}

:is(.hvadrm-theme-karanlik, .theme-dark, [data-theme="karanlik"]) .hvadrm-archive-search-input:focus {
  border-color: #60a5fa !important;
  background: #000000 !important;
  box-shadow: 0 0 0 4px rgba(96, 165, 250, 0.2), 0 8px 24px rgba(0, 0, 0, 0.7) !important;
}

:is(.hvadrm-theme-karanlik, .theme-dark, [data-theme="karanlik"]) .hvadrm-chip {
  background: rgba(17, 24, 39, 0.85) !important;
  border: 1px solid rgba(55, 65, 81, 0.5) !important;
  color: #9ca3af !important;
}

:is(.hvadrm-theme-karanlik, .theme-dark, [data-theme="karanlik"]) .hvadrm-chip:hover {
  background: rgba(31, 41, 55, 0.95) !important;
  color: #ffffff !important;
  border-color: rgba(75, 85, 99, 0.8) !important;
}

:is(.hvadrm-theme-karanlik, .theme-dark, [data-theme="karanlik"]) .hvadrm-chip.active {
  background: #2563eb !important;
  border-color: #3b82f6 !important;
  color: #ffffff !important;
  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.45) !important;
}

:is(.hvadrm-theme-karanlik, .theme-dark, [data-theme="karanlik"]) .hvadrm-city-box {
  background: linear-gradient(135deg, rgba(17, 24, 39, 0.94) 0%, rgba(10, 15, 26, 0.98) 100%) !important;
  border: 1px solid rgba(55, 65, 81, 0.5) !important;
  box-shadow: 0 8px 24px -4px rgba(0, 0, 0, 0.6) !important;
}

:is(.hvadrm-theme-karanlik, .theme-dark, [data-theme="karanlik"]) .hvadrm-city-box::before {
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.12), transparent) !important;
}

:is(.hvadrm-theme-karanlik, .theme-dark, [data-theme="karanlik"]) .hvadrm-city-box:hover {
  background: linear-gradient(135deg, rgba(24, 33, 53, 0.98) 0%, rgba(15, 23, 42, 1) 100%) !important;
  border-color: #3b82f6 !important;
  box-shadow: 0 14px 32px -4px rgba(0, 0, 0, 0.85), 0 0 18px rgba(59, 130, 246, 0.25) !important;
}

:is(.hvadrm-theme-karanlik, .theme-dark, [data-theme="karanlik"]) .hvadrm-plate-badge {
  background: rgba(31, 41, 55, 0.9) !important;
  border: 1px solid rgba(75, 85, 99, 0.7) !important;
  color: #93c5fd !important;
}

:is(.hvadrm-theme-karanlik, .theme-dark, [data-theme="karanlik"]) .hvadrm-box-city {
  color: #ffffff !important;
}

:is(.hvadrm-theme-karanlik, .theme-dark, [data-theme="karanlik"]) .hvadrm-temp-val {
  color: #f9fafb !important;
}

:is(.hvadrm-theme-karanlik, .theme-dark, [data-theme="karanlik"]) .hvadrm-temp-unit {
  color: #60a5fa !important;
}

:is(.hvadrm-theme-karanlik, .theme-dark, [data-theme="karanlik"]) .hvadrm-box-footer {
  border-top: 1px solid rgba(55, 65, 81, 0.35) !important;
}

:is(.hvadrm-theme-karanlik, .theme-dark, [data-theme="karanlik"]) .hvadrm-box-desc {
  color: #9ca3af !important;
}

:is(.hvadrm-theme-karanlik, .theme-dark, [data-theme="karanlik"]) .hvadrm-box-arrow {
  color: rgba(156, 163, 175, 0.5) !important;
}

:is(.hvadrm-theme-karanlik, .theme-dark, [data-theme="karanlik"]) .hvadrm-city-box:hover .hvadrm-box-arrow {
  color: #60a5fa !important;
}

:is(.hvadrm-theme-karanlik, .theme-dark, [data-theme="karanlik"]) .hvadrm-no-results {
  background: #090d16 !important;
  border: 1px solid rgba(55, 65, 81, 0.6) !important;
  color: #9ca3af !important;
}

:is(.hvadrm-theme-karanlik, .theme-dark, [data-theme="karanlik"]) .hvadrm-no-results h4 {
  color: #f9fafb !important;
}

:is(.hvadrm-theme-karanlik, .theme-dark, [data-theme="karanlik"]) .hvadrm-no-results p {
  color: #9ca3af !important;
}

/* ==========================================================
   MOBİL İÇİN ULTRA ŞIK 2 SÜTUNLU KART DÜZENİ
   ========================================================== */
@media (max-width: 640px) {
  .hvadrm-archive-page-wrapper {
    padding: 12px 10px 40px !important;
  }

  .hvadrm-archive-hero {
    padding: 22px 14px 18px !important;
    border-radius: 18px !important;
    margin-bottom: 16px !important;
  }

  .hvadrm-archive-title {
    text-align: center !important;
    width: 100% !important;
    font-size: 22px !important;
    margin: 0 auto 6px auto !important;
  }

  .hvadrm-archive-subtitle {
    text-align: center !important;
    width: 100% !important;
    font-size: 12px !important;
    margin: 0 auto 14px auto !important;
  }

  .hvadrm-archive-search-box {
    margin-bottom: 14px !important;
    width: 100% !important;
  }

  .hvadrm-archive-search-row {
    width: 100% !important;
    flex-direction: column !important;
    gap: 8px !important;
  }

  .hvadrm-archive-input-wrapper {
    width: 100% !important;
  }

  .hvadrm-archive-actions {
    width: 100% !important;
    display: flex !important;
    gap: 8px !important;
  }

  .hvadrm-archive-container button.hvadrm-action-btn {
    flex: 1 1 50% !important;
    height: 46px !important;
    min-height: 46px !important;
    padding: 0 12px !important;
    font-size: 13.5px !important;
  }

  .hvadrm-archive-container .hvadrm-archive-search-input,
  .hvadrm-archive-container input[type="text"].hvadrm-archive-search-input {
    height: 46px !important;
    min-height: 46px !important;
    max-height: 46px !important;
    line-height: 46px !important;
    font-size: 14px !important;
    padding: 0 40px 0 44px !important;
  }

  .hvadrm-archive-search-icon {
    left: 14px !important;
    width: 17px !important;
    height: 17px !important;
  }

  /* Bölge butonları mobilde yatay kaydırılabilir modern şerit */
  .hvadrm-region-chips {
    gap: 8px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    padding: 2px 4px 8px 4px !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    cursor: grab !important;
    user-select: none !important;
    -webkit-user-select: none !important;
    scroll-behavior: smooth !important;
  }

  .hvadrm-region-chips.is-dragging {
    cursor: grabbing !important;
    scroll-behavior: auto !important;
  }

  .hvadrm-region-chips::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
  }

  .hvadrm-chip {
    padding: 6px 14px !important;
    font-size: 12px !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
  }

  /* Mobilde tam 2 sütunlu kusursuz ızgara */
  .hvadrm-cities-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }

  .hvadrm-city-box {
    padding: 10px 10px 8px !important;
    border-radius: 14px !important;
  }

  .hvadrm-box-header {
    gap: 6px !important;
    margin-bottom: 4px !important;
  }

  .hvadrm-plate-badge {
    min-width: 24px !important;
    height: 18px !important;
    font-size: 10px !important;
    padding: 0 4px !important;
    border-radius: 4px !important;
  }

  .hvadrm-box-city {
    font-size: 12px !important;
  }

  .hvadrm-box-body {
    margin-bottom: 4px !important;
    gap: 4px !important;
  }

  .hvadrm-box-icon {
    width: 34px !important;
    height: 34px !important;
  }

  .hvadrm-box-icon svg {
    width: 30px !important;
    height: 30px !important;
  }

  .hvadrm-temp-val {
    font-size: 20px !important;
  }

  .hvadrm-temp-unit {
    font-size: 13px !important;
  }

  .hvadrm-box-footer {
    padding-top: 5px !important;
  }

  .hvadrm-box-desc {
    font-size: 10px !important;
  }
}

/* ==========================================================================
   YENİ WIDGET SETİ STİLLERİ (HEADER, SIDEBAR, ÇOKLU ŞEHİR, SAATLİK, DETAY, DÜNYA)
   ========================================================================== */

.hvadrm-widget-header,
.hvadrm-widget-sidebar,
.hvadrm-widget-multicity,
.hvadrm-widget-hourly,
.hvadrm-widget-details,
.hvadrm-widget-worldmini {
  font-family: 'Outfit', 'Plus Jakarta Sans', -apple-system, sans-serif !important;
  box-sizing: border-box !important;
  color: #ffffff;
}

.hvadrm-widget-header *,
.hvadrm-widget-sidebar *,
.hvadrm-widget-multicity *,
.hvadrm-widget-hourly *,
.hvadrm-widget-details *,
.hvadrm-widget-worldmini * {
  box-sizing: border-box !important;
}

/* Tema Varyantları */
.theme-cam {
  background: radial-gradient(120% 120% at 10% 10%, rgba(30, 41, 59, 0.88) 0%, rgba(15, 23, 42, 0.96) 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15) !important;
  color: #ffffff !important;
}

.theme-koyu {
  background: rgba(15, 23, 42, 0.94) !important;
  border: 1px solid rgba(56, 189, 248, 0.2) !important;
  backdrop-filter: blur(14px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25) !important;
  color: #f8fafc !important;
}

.theme-karanlik {
  background: #030712 !important;
  border: 1px solid #1f2937 !important;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3) !important;
  color: #f9fafb !important;
}

.theme-acik {
  background: #ffffff !important;
  border: 1.5px solid #e2e8f0 !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06) !important;
  color: #0f172a !important;
}

.theme-acik a,
.theme-acik span,
.theme-acik div,
.theme-acik strong {
  color: #1e293b !important;
}

.theme-seffaf {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  color: inherit !important;
}

/* 1. Header / Ticker Widget */
.hvadrm-widget-header {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 30px;
  max-width: 100%;
  overflow: hidden;
  line-height: 1.2;
  font-size: 13px;
  font-weight: 600;
  vertical-align: middle;
}

.hvadrm-hdr-geo-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(56, 189, 248, 0.2);
  color: #38bdf8;
  flex-shrink: 0;
}

.hvadrm-hdr-items-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-width: 160px;
  height: 26px;
}

.hvadrm-hdr-item {
  display: none;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  text-decoration: none !important;
  color: inherit !important;
  opacity: 0;
  transition: opacity 0.4s ease, transform 0.4s ease;
  transform: translateY(4px);
}

.hvadrm-hdr-item.active {
  display: inline-flex;
  opacity: 1;
  transform: translateY(0);
}

.hvadrm-hdr-loc {
  font-weight: 700;
}

.hvadrm-hdr-icon {
  display: inline-flex;
  align-items: center;
  width: 22px;
  height: 22px;
}

.hvadrm-hdr-icon svg {
  width: 22px;
  height: 22px;
}

.hvadrm-hdr-temp {
  font-weight: 800;
  font-size: 14px;
  color: #38bdf8;
}

.theme-acik .hvadrm-hdr-temp {
  color: #0284c7 !important;
}

.hvadrm-hdr-desc {
  opacity: 0.85;
  font-size: 12px;
}

.hvadrm-hdr-meta {
  font-size: 11.5px;
  opacity: 0.75;
  margin-left: 4px;
  padding-left: 8px;
  border-left: 1px solid rgba(255, 255, 255, 0.2);
}

.theme-acik .hvadrm-hdr-meta {
  border-left-color: rgba(0, 0, 0, 0.15);
}

/* 2. Kompakt Kenar Çubuğu Kartı */
.hvadrm-widget-sidebar {
  border-radius: 16px;
  padding: 16px;
  max-width: 360px;
  width: 100%;
  margin: 0 auto;
  transition: all 0.25s ease;
}

.hvadrm-sb-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
  gap: 8px;
}

.hvadrm-sb-select-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  padding: 2px 8px;
}

.theme-acik .hvadrm-sb-select-wrap {
  background: #f1f5f9;
  border-color: #cbd5e1;
}

.hvadrm-sb-pin {
  font-size: 13px;
}

.hvadrm-sb-city-dropdown {
  width: 100%;
  background: transparent !important;
  border: none !important;
  color: inherit !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  padding: 6px 0 !important;
  cursor: pointer;
  outline: none !important;
  box-shadow: none !important;
}

.theme-acik .hvadrm-sb-city-dropdown option {
  background: #ffffff;
  color: #0f172a;
}

.theme-cam .hvadrm-sb-city-dropdown option,
.theme-koyu .hvadrm-sb-city-dropdown option,
.theme-karanlik .hvadrm-sb-city-dropdown option {
  background: #0f172a;
  color: #ffffff;
}

.hvadrm-sb-city-name {
  font-size: 14px;
  font-weight: 800;
}

.hvadrm-sb-time {
  font-size: 12px;
  opacity: 0.75;
  font-weight: 600;
}

.hvadrm-sb-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.hvadrm-sb-temp-wrap {
  display: flex;
  align-items: flex-start;
  line-height: 1;
}

.hvadrm-sb-temp {
  font-size: 42px;
  font-weight: 900;
  letter-spacing: -0.04em;
}

.hvadrm-sb-unit {
  font-size: 18px;
  font-weight: 700;
  margin-top: 4px;
  opacity: 0.85;
}

.hvadrm-sb-cond {
  font-size: 13px;
  font-weight: 700;
  margin-top: 6px;
  opacity: 0.95;
}

.hvadrm-sb-feels {
  font-size: 11.5px;
  opacity: 0.75;
  margin-top: 2px;
}

.hvadrm-sb-hero-icon {
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hvadrm-sb-hero-icon svg {
  width: 56px;
  height: 56px;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.2));
}

.hvadrm-sb-metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  background: rgba(0, 0, 0, 0.15);
  border-radius: 10px;
  padding: 8px 10px;
  margin-bottom: 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.theme-acik .hvadrm-sb-metrics {
  background: #f8fafc;
  border-color: #e2e8f0;
}

.hvadrm-sb-metric-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.hvadrm-sb-metric-item .m-label {
  font-size: 11px;
  opacity: 0.75;
  font-weight: 600;
}

.hvadrm-sb-metric-item .m-val {
  font-size: 12px;
  font-weight: 800;
  margin-top: 2px;
}

.hvadrm-sb-forecast {
  display: flex;
  justify-content: space-between;
  gap: 6px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: 12px;
  margin-bottom: 10px;
}

.theme-acik .hvadrm-sb-forecast {
  border-top-color: #e2e8f0;
}

.hvadrm-sb-f-day {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 8px;
  padding: 6px 4px;
  text-align: center;
}

.theme-acik .hvadrm-sb-f-day {
  background: #f1f5f9;
}

.f-day-name {
  font-size: 11px;
  font-weight: 700;
  opacity: 0.8;
}

.f-day-ico {
  margin: 4px 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.f-day-ico svg {
  width: 24px;
  height: 24px;
}

.f-day-temps {
  font-size: 12px;
  font-weight: 800;
}

.hvadrm-sb-footer {
  text-align: center !important;
  padding-top: 6px !important;
}

.hvadrm-sb-link,
.hvadrm-sb-footer a,
.hvadrm-sb-footer a.hvadrm-sb-link,
.hvadrm-widget-sidebar .hvadrm-sb-link {
  font-size: 11.5px !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  letter-spacing: 0.2px !important;
  display: inline-block !important;
  text-decoration: none !important;
  color: #38bdf8 !important;
  transition: opacity 0.2s ease;
}

.theme-acik .hvadrm-sb-link,
.theme-acik .hvadrm-sb-footer a,
.theme-acik .hvadrm-sb-footer a.hvadrm-sb-link,
.hvadrm-widget-sidebar.theme-acik .hvadrm-sb-link {
  color: #0284c7 !important;
  font-size: 11.5px !important;
  line-height: 1.3 !important;
  font-weight: 700 !important;
}

.hvadrm-sb-link:hover,
.hvadrm-sb-footer a:hover {
  opacity: 0.85 !important;
}

/* 3. Çoklu Şehir Karşılaştırma Şeridi */
.hvadrm-widget-multicity {
  border-radius: 14px;
  padding: 10px 12px;
  width: 100%;
  position: relative;
}

.hvadrm-multi-wrapper {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  position: relative;
}

.multi-nav-arrow {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: inherit;
  font-size: 18px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  padding: 0;
  user-select: none;
}

.multi-nav-arrow:hover {
  background: rgba(255, 255, 255, 0.25);
  transform: scale(1.06);
}

.theme-acik .multi-nav-arrow {
  background: #f1f5f9;
  border-color: #cbd5e1;
  color: #334155;
}

.theme-acik .multi-nav-arrow:hover {
  background: #e2e8f0;
  color: #0f172a;
}

.hvadrm-multi-track {
  display: flex;
  gap: 8px;
  width: 100%;
  cursor: grab;
  user-select: none;
}

.hvadrm-widget-multicity.layout-yatay .hvadrm-multi-track {
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  padding: 4px 0;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
  -webkit-overflow-scrolling: touch;
}

.hvadrm-widget-multicity.layout-yatay .hvadrm-multi-track::-webkit-scrollbar,
.hvadrm-multi-track::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  background: transparent !important;
}

.hvadrm-widget-multicity.layout-grid .hvadrm-multi-track {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 10px;
}

.hvadrm-widget-multicity.layout-dikey .hvadrm-multi-track {
  flex-direction: column;
}

.hvadrm-multi-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 7px 11px;
  border-radius: 10px;
  text-decoration: none !important;
  color: inherit !important;
  white-space: nowrap;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  flex-shrink: 0;
}

.theme-acik .hvadrm-multi-pill {
  background: #f8fafc;
  border-color: #e2e8f0;
}

.hvadrm-multi-pill:hover {
  background: rgba(255, 255, 255, 0.14);
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.15);
}

.theme-acik .hvadrm-multi-pill:hover {
  background: #ffffff;
  border-color: #0284c7;
  box-shadow: 0 4px 12px rgba(2, 132, 199, 0.12);
}

.m-pill-city {
  font-weight: 800;
  font-size: 12.5px;
}

.m-pill-icon {
  display: inline-flex;
  align-items: center;
}

.m-pill-icon svg {
  width: 22px;
  height: 22px;
}

.m-pill-temp {
  font-size: 13.5px;
  font-weight: 800;
  color: #38bdf8;
}

.theme-acik .m-pill-temp {
  color: #0284c7 !important;
}

.m-pill-cond {
  font-size: 11px;
  opacity: 0.75;
  max-width: 95px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 4. Saatlik Tahmin Şeridi */
.hvadrm-widget-hourly {
  border-radius: 16px;
  padding: 16px;
  width: 100%;
}

.hvadrm-hr-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.hvadrm-hr-title {
  font-size: 14px;
  font-weight: 800;
}

.hvadrm-hr-nav {
  display: flex;
  gap: 6px;
}

.hr-nav-btn {
  width: 26px;
  height: 26px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: inherit;
  font-size: 16px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s;
}

.hr-nav-btn:hover {
  background: rgba(255, 255, 255, 0.25);
}

.theme-acik .hr-nav-btn {
  background: #f1f5f9;
  border-color: #cbd5e1;
  color: #334155;
}

.hvadrm-hr-scroll-box {
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  padding-bottom: 4px;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
  -webkit-overflow-scrolling: touch;
  cursor: grab;
  user-select: none;
}

.hvadrm-hr-scroll-box::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  background: transparent !important;
}

.hvadrm-hr-track {
  display: flex;
  gap: 10px;
}

.hvadrm-hr-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 10px 12px;
  min-width: 68px;
  text-align: center;
  transition: transform 0.2s;
}

.theme-acik .hvadrm-hr-col {
  background: #f8fafc;
  border-color: #e2e8f0;
}

.hvadrm-hr-col:hover {
  transform: translateY(-2px);
  background: rgba(255, 255, 255, 0.1);
}

.hr-time {
  font-size: 11.5px;
  font-weight: 700;
  opacity: 0.8;
}

.hr-ico {
  margin: 6px 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hr-ico svg {
  width: 28px;
  height: 28px;
}

.hr-temp {
  font-size: 14px;
  font-weight: 800;
}

.hr-pop {
  font-size: 10.5px;
  font-weight: 700;
  color: #38bdf8;
  margin-top: 4px;
}

.theme-acik .hr-pop {
  color: #0284c7 !important;
}

.hr-pop-empty {
  font-size: 10px;
  opacity: 0.3;
  margin-top: 4px;
}

/* 5. Atmosfer & Yaşam Göstergeleri */
.hvadrm-widget-details {
  border-radius: 16px;
  padding: 16px;
  width: 100%;
}

.hvadrm-dt-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.hvadrm-dt-title {
  font-size: 14px;
  font-weight: 800;
}

.hvadrm-dt-status {
  background: #10b981;
  color: #ffffff;
  font-size: 10.5px;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 10px;
  letter-spacing: 0.05em;
}

.hvadrm-dt-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

@media (max-width: 480px) {
  .hvadrm-dt-grid {
    grid-template-columns: 1fr;
  }
  .hvadrm-dt-card.dt-sun-card {
    grid-column: span 1 !important;
  }
}

.hvadrm-dt-card {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
}

.theme-acik .hvadrm-dt-card {
  background: #f8fafc;
  border-color: #e2e8f0;
}

.dt-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.dt-label {
  font-size: 12px;
  font-weight: 700;
  opacity: 0.8;
}

.dt-badge {
  font-size: 10.5px;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.15);
}

.theme-acik .dt-badge {
  background: #e2e8f0;
  color: #334155;
}

.dt-value {
  font-size: 24px;
  font-weight: 900;
  line-height: 1.1;
}

.dt-value small {
  font-size: 13px;
  font-weight: 600;
  opacity: 0.75;
}

.dt-hint {
  font-size: 11px;
  opacity: 0.7;
  margin-top: 4px;
}

/* Rüzgar Pusulası */
.dt-wind-body {
  display: flex;
  align-items: center;
  gap: 12px;
}

.dt-compass {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.2);
  flex-shrink: 0;
}

.theme-acik .dt-compass {
  border-color: #cbd5e1;
  background: #e2e8f0;
}

.compass-needle {
  transition: transform 0.5s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dt-wind-info {
  display: flex;
  flex-direction: column;
}

.wind-speed {
  font-size: 18px;
  font-weight: 800;
}

.wind-speed small {
  font-size: 12px;
  font-weight: 600;
}

.wind-desc {
  font-size: 11.5px;
  opacity: 0.75;
}

/* Güneş Solar Eğrisi */
.dt-sun-arc-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.sun-arc-svg {
  width: 100%;
  max-width: 240px;
  height: auto;
}

.sun-times-row {
  display: flex;
  justify-content: space-between;
  width: 100%;
  font-size: 12px;
  margin-top: 4px;
  opacity: 0.9;
}

/* Bulut Örtüsü Kartı (Image 2 Şablonu) */
.hvadrm-dt-card.dt-cloud-card {
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
}

.dt-cloud-gauge {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.dt-cloud-gauge svg {
  display: block !important;
  width: 40px !important;
  height: 40px !important;
}

.theme-acik .cloud-gauge-track {
  stroke: rgba(0, 0, 0, 0.08) !important;
}

.theme-koyu .cloud-gauge-track,
.theme-cam .cloud-gauge-track,
.theme-karanlik .cloud-gauge-track {
  stroke: rgba(255, 255, 255, 0.12) !important;
}

.dt-cloud-sub {
  display: flex !important;
  align-items: center !important;
  gap: 7px !important;
  margin-top: 4px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
}

.dt-dot-cyan {
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  background: #38bdf8 !important;
  display: inline-block !important;
  flex-shrink: 0 !important;
  box-shadow: 0 0 6px rgba(56, 189, 248, 0.5) !important;
}

.theme-acik .dt-dot-cyan {
  background: #0284c7 !important;
  box-shadow: 0 0 4px rgba(2, 132, 199, 0.4) !important;
}

.dt-cloud-text {
  font-size: 13px !important;
  font-weight: 700 !important;
  opacity: 0.9 !important;
}

/* 6. Dünya Metropolleri Mini Kartı */
.hvadrm-widget-worldmini {
  border-radius: 16px;
  padding: 16px;
  width: 100%;
}

.hvadrm-wm-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.hvadrm-wm-title {
  font-size: 14px;
  font-weight: 800;
}

.hvadrm-wm-badge {
  background: rgba(255, 255, 255, 0.12);
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 8px;
}

.hvadrm-wm-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.hvadrm-wm-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  text-decoration: none !important;
  color: inherit !important;
  transition: all 0.2s ease;
}

.theme-acik .hvadrm-wm-row {
  background: #f8fafc;
  border-color: #e2e8f0;
}

.hvadrm-wm-row:hover {
  background: rgba(255, 255, 255, 0.12);
  transform: translateX(3px);
}

.theme-acik .hvadrm-wm-row:hover {
  background: #ffffff;
  border-color: #0284c7;
}

.wm-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.wm-flag-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 18px;
  background: #0284c7;
  color: #ffffff;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.wm-names {
  display: flex;
  flex-direction: column;
}

.wm-names strong {
  font-size: 13px;
  font-weight: 800;
}

.wm-names span {
  font-size: 11px;
  opacity: 0.75;
}

.wm-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.wm-ico {
  display: flex;
  align-items: center;
}

.wm-ico svg {
  width: 26px;
  height: 26px;
}

.wm-temp {
  font-size: 15px;
  font-weight: 800;
  color: #38bdf8;
  min-width: 32px;
  text-align: right;
}

.theme-acik .wm-temp {
  color: #0284c7 !important;
}

/* ==========================================================================
   ÖZEL ŞEHİR SEÇİCİ AÇILIR MENÜSÜ (Image 3 Tarzı)
   ========================================================================== */
.hvadrm-custom-dropdown {
  position: relative !important;
  flex: 1 !important;
  display: flex !important;
  user-select: none;
  font-family: inherit !important;
}

.hvadrm-dd-trigger {
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  background: rgba(0, 0, 0, 0.2) !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  border-radius: 9px !important;
  padding: 6px 10px !important;
  cursor: pointer !important;
  font-family: inherit !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: inherit !important;
  transition: all 0.2s ease !important;
  box-shadow: none !important;
  text-decoration: none !important;
  outline: none !important;
  text-align: left !important;
}

.theme-acik .hvadrm-dd-trigger {
  background: #f1f5f9 !important;
  border-color: #cbd5e1 !important;
  color: #0f172a !important;
}

.hvadrm-dd-trigger:hover,
.hvadrm-custom-dropdown.is-open .hvadrm-dd-trigger {
  border-color: #3b82f6 !important;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.25) !important;
}

.hvadrm-dd-current-label {
  flex: 1 !important;
  text-align: left !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  font-weight: 700 !important;
}

.hvadrm-dd-chevron {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: transform 0.2s ease !important;
  opacity: 0.75 !important;
  flex-shrink: 0 !important;
}

.hvadrm-custom-dropdown.is-open .hvadrm-dd-chevron {
  transform: rotate(180deg) !important;
}

/* Açılır Menü Paneli (Image 3) */
.hvadrm-dd-panel {
  position: absolute !important;
  top: calc(100% + 6px) !important;
  left: 0 !important;
  width: 100% !important;
  min-width: 275px !important;
  max-width: 320px !important;
  background: #ffffff !important;
  color: #0f172a !important;
  border-radius: 12px !important;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.25), 0 4px 12px rgba(0, 0, 0, 0.08) !important;
  border: 1px solid #cbd5e1 !important;
  z-index: 999999 !important;
  overflow: hidden !important;
  padding: 8px 6px 6px !important;
  box-sizing: border-box !important;
}

.theme-koyu .hvadrm-dd-panel,
.theme-cam .hvadrm-dd-panel,
.theme-karanlik .hvadrm-dd-panel {
  background: #0f172a !important;
  color: #f8fafc !important;
  border-color: #334155 !important;
  box-shadow: 0 16px 44px rgba(0, 0, 0, 0.6), 0 4px 14px rgba(0, 0, 0, 0.35) !important;
}

/* Arama Kutusu */
.hvadrm-dd-search-box {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: #ffffff !important;
  border: 1.5px solid #cbd5e1 !important;
  border-radius: 8px !important;
  padding: 6px 10px !important;
  margin-bottom: 8px !important;
  transition: border-color 0.2s ease !important;
}

.theme-koyu .hvadrm-dd-search-box,
.theme-cam .hvadrm-dd-search-box,
.theme-karanlik .hvadrm-dd-search-box {
  background: #1e293b !important;
  border-color: #475569 !important;
}

.hvadrm-dd-search-box:focus-within {
  border-color: #3b82f6 !important;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2) !important;
}

.hvadrm-dd-search-icon {
  display: flex !important;
  align-items: center !important;
  color: #94a3b8 !important;
  flex-shrink: 0 !important;
}

.hvadrm-dd-search-input {
  width: 100% !important;
  border: none !important;
  outline: none !important;
  background: transparent !important;
  color: inherit !important;
  font-size: 12.5px !important;
  font-family: inherit !important;
  padding: 0 !important;
  margin: 0 !important;
  box-shadow: none !important;
}

.hvadrm-dd-search-input::placeholder {
  color: #94a3b8 !important;
  font-size: 12px !important;
  font-weight: 500 !important;
}

/* Şehir Listesi ve Kaydırma Çubuğu */
.hvadrm-dd-list {
  max-height: 250px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding: 0 !important;
  margin: 0 !important;
  list-style: none !important;
  scrollbar-width: thin !important;
  scrollbar-color: #cbd5e1 transparent !important;
}

.theme-koyu .hvadrm-dd-list,
.theme-cam .hvadrm-dd-list,
.theme-karanlik .hvadrm-dd-list {
  scrollbar-color: #475569 transparent !important;
}

.hvadrm-dd-list::-webkit-scrollbar {
  width: 6px !important;
}
.hvadrm-dd-list::-webkit-scrollbar-thumb {
  background-color: #cbd5e1 !important;
  border-radius: 4px !important;
}
.theme-koyu .hvadrm-dd-list::-webkit-scrollbar-thumb,
.theme-cam .hvadrm-dd-list::-webkit-scrollbar-thumb,
.theme-karanlik .hvadrm-dd-list::-webkit-scrollbar-thumb {
  background-color: #475569 !important;
}

/* Liste Öğesi (Image 3 Şablonu) */
.hvadrm-dd-item {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  padding: 8px 8px !important;
  border-radius: 6px !important;
  cursor: pointer !important;
  border-bottom: 1px solid #f1f5f9 !important;
  transition: all 0.15s ease !important;
  font-family: inherit !important;
}

.hvadrm-dd-item.is-hidden,
.hvadrm-dd-item[style*="display: none"] {
  display: none !important;
}

.theme-koyu .hvadrm-dd-item,
.theme-cam .hvadrm-dd-item,
.theme-karanlik .hvadrm-dd-item {
  border-bottom-color: #1e293b !important;
}

.hvadrm-dd-item:last-child {
  border-bottom: none !important;
}

.hvadrm-dd-item:hover {
  background: #f8fafc !important;
}

.theme-koyu .hvadrm-dd-item:hover,
.theme-cam .hvadrm-dd-item:hover,
.theme-karanlik .hvadrm-dd-item:hover {
  background: #1e293b !important;
}

/* Seçili İl (Tüm temalarda okunabilir canlı mavi stil) */
.hvadrm-dd-item.is-selected,
.theme-acik .hvadrm-dd-item.is-selected,
.theme-koyu .hvadrm-dd-item.is-selected,
.theme-cam .hvadrm-dd-item.is-selected,
.theme-karanlik .hvadrm-dd-item.is-selected {
  background: #2563eb !important;
  color: #ffffff !important;
}

.dd-item-plate {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 26px !important;
  padding: 3px 6px !important;
  border-radius: 5px !important;
  background: #f1f5f9 !important;
  color: #334155 !important;
  font-size: 11.5px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  flex-shrink: 0 !important;
}

.hvadrm-dd-item.is-selected .dd-item-plate,
.theme-acik .hvadrm-dd-item.is-selected .dd-item-plate,
.theme-koyu .hvadrm-dd-item.is-selected .dd-item-plate,
.theme-cam .hvadrm-dd-item.is-selected .dd-item-plate,
.theme-karanlik .hvadrm-dd-item.is-selected .dd-item-plate {
  background: rgba(255, 255, 255, 0.25) !important;
  color: #ffffff !important;
}

.theme-koyu .dd-item-plate,
.theme-cam .dd-item-plate,
.theme-karanlik .dd-item-plate {
  background: #1e293b !important;
  color: #94a3b8 !important;
}

.dd-item-name {
  flex: 1 !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  letter-spacing: 0.3px !important;
  text-align: left !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  color: #0f172a !important;
}

.theme-koyu .dd-item-name,
.theme-cam .dd-item-name,
.theme-karanlik .dd-item-name {
  color: #f8fafc !important;
}

.hvadrm-dd-item.is-selected .dd-item-name,
.theme-acik .hvadrm-dd-item.is-selected .dd-item-name,
.theme-koyu .hvadrm-dd-item.is-selected .dd-item-name,
.theme-cam .hvadrm-dd-item.is-selected .dd-item-name,
.theme-karanlik .hvadrm-dd-item.is-selected .dd-item-name {
  color: #ffffff !important;
}

.dd-item-temp {
  display: inline-flex !important;
  align-items: center !important;
  padding: 3px 8px !important;
  border-radius: 6px !important;
  background: #f1f5f9 !important;
  color: #1e293b !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  flex-shrink: 0 !important;
}

.hvadrm-dd-item.is-selected .dd-item-temp,
.theme-acik .hvadrm-dd-item.is-selected .dd-item-temp,
.theme-koyu .hvadrm-dd-item.is-selected .dd-item-temp,
.theme-cam .hvadrm-dd-item.is-selected .dd-item-temp,
.theme-karanlik .hvadrm-dd-item.is-selected .dd-item-temp {
  background: rgba(255, 255, 255, 0.25) !important;
  color: #ffffff !important;
}

.theme-koyu .dd-item-temp,
.theme-cam .dd-item-temp,
.theme-karanlik .dd-item-temp {
  background: #1e293b !important;
  color: #f8fafc !important;
}

/* ==========================================================================
   7 GÜNLÜK PORTAL HAVA DURUMU BİLEŞENİ (Image 5 Tarzı)
   ========================================================================== */
.hvadrm-widget-weekly,
.hvadrm-widget-weekly.theme-acik,
.hvadrm-widget-weekly.theme-koyu,
.hvadrm-widget-weekly.theme-karanlik,
.hvadrm-widget-weekly.theme-cam,
.hvadrm-widget-weekly.theme-seffaf {
  width: 100% !important;
  box-sizing: border-box !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif !important;
  margin: 16px 0 !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  background: transparent !important;
  padding: 0 !important;
}

.hw-header-bar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 14px !important;
  width: 100% !important;
  border: none !important;
  outline: none !important;
  padding: 0 !important;
}

.hw-title {
  color: #e11d48 !important;
  font-size: 17px !important;
  font-weight: 900 !important;
  letter-spacing: 0.4px !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
  line-height: 1.2 !important;
}

.hw-sep-line {
  display: none !important;
}

.hw-all-link {
  color: #0f172a !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  letter-spacing: 0.5px !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  transition: color 0.15s ease !important;
  border: none !important;
}

.hw-all-link:hover {
  color: #e11d48 !important;
  text-decoration: underline !important;
}

.theme-koyu .hw-all-link,
.theme-cam .hw-all-link,
.theme-karanlik .hw-all-link {
  color: #f1f5f9 !important;
}

.theme-koyu .hw-all-link:hover,
.theme-cam .hw-all-link:hover,
.theme-karanlik .hw-all-link:hover {
  color: #fb7185 !important;
}

.hw-days-track {
  display: flex !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scroll-behavior: smooth !important;
  gap: 12px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  cursor: grab !important;
  user-select: none !important;
  -webkit-user-select: none !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
  -webkit-overflow-scrolling: touch !important;
  padding: 6px 2px 14px 2px !important;
}

.hw-days-track::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

.hw-day-card {
  flex: 1 0 130px !important;
  min-width: 130px !important;
  background: #ffffff !important;
  border: none !important;
  border-radius: 12px !important;
  padding: 16px 8px !important;
  text-align: center !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: space-between !important;
  min-height: 190px !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.05) !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
  box-sizing: border-box !important;
}

.hw-day-card:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.09) !important;
}

.theme-koyu .hw-day-card {
  background: #1e293b !important;
  border: none !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25) !important;
}

.theme-karanlik .hw-day-card {
  background: #121212 !important;
  border: none !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35) !important;
}

.theme-cam .hw-day-card {
  background: linear-gradient(135deg, rgba(30, 41, 59, 0.9) 0%, rgba(15, 23, 42, 0.95) 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.15), 0 6px 20px rgba(0, 0, 0, 0.2) !important;
}

.hw-day-date {
  font-size: 12.5px !important;
  font-weight: 600 !important;
  color: #475569 !important;
  line-height: 1.2 !important;
}

.theme-koyu .hw-day-date,
.theme-cam .hw-day-date,
.theme-karanlik .hw-day-date {
  color: #94a3b8 !important;
}

.hw-day-name {
  font-size: 14.5px !important;
  font-weight: 800 !important;
  color: #0f172a !important;
  margin-top: 2px !important;
  margin-bottom: 10px !important;
  line-height: 1.2 !important;
}

.theme-koyu .hw-day-name,
.theme-cam .hw-day-name,
.theme-karanlik .hw-day-name {
  color: #f8fafc !important;
}

.hw-day-icon {
  width: 56px !important;
  height: 56px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 4px 0 !important;
}

.hw-day-icon svg {
  width: 52px !important;
  height: 52px !important;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.12)) !important;
}

.hw-day-cond {
  font-size: 12px !important;
  font-weight: 600 !important;
  color: #334155 !important;
  margin-top: 8px !important;
  line-height: 1.2 !important;
}

.theme-koyu .hw-day-cond,
.theme-cam .hw-day-cond,
.theme-karanlik .hw-day-cond {
  color: #cbd5e1 !important;
}

.hw-day-temps {
  font-size: 13px !important;
  font-weight: 800 !important;
  color: #0f172a !important;
  margin-top: 4px !important;
  line-height: 1.2 !important;
}

.theme-koyu .hw-day-temps,
.theme-cam .hw-day-temps,
.theme-karanlik .hw-day-temps {
  color: #ffffff !important;
}

/* ==========================================================
   AÇILIR MENÜLÜ ŞEHİR ROZETİ (HEADER / NAVBAR DROPDOWN WIDGET)
   Haber ve portal siteleri (Hürriyet, Sabah, Gazete Oku vb.) tarzı
   ========================================================== */
.hvadrm-nav-widget {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  font-family: inherit !important;
  font-size: 14px !important;
  line-height: 1.2 !important;
  vertical-align: middle !important;
  box-sizing: border-box !important;
  user-select: none !important;
}

.hvadrm-nav-widget *,
.hvadrm-nav-widget *::before,
.hvadrm-nav-widget *::after {
  box-sizing: border-box !important;
}

/* Tetikleyici Rozet (Trigger) */
.hvadrm-nav-trigger {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  padding: 5px 9px !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  text-decoration: none !important;
  color: inherit !important;
  outline: none !important;
}

.hvadrm-nav-trigger:focus-visible {
  box-shadow: 0 0 0 2px #0284c7 !important;
}

.hvadrm-nav-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 24px !important;
  height: 24px !important;
  flex-shrink: 0 !important;
}

.hvadrm-nav-icon svg {
  width: 24px !important;
  height: 24px !important;
  display: block !important;
}

.hvadrm-nav-link {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  text-decoration: none !important;
  color: inherit !important;
}

.hvadrm-nav-link:hover .hvadrm-nav-city {
  color: #0284c7 !important;
}

.hvadrm-nav-temp {
  font-size: 15px !important;
  font-weight: 700 !important;
  letter-spacing: -0.2px !important;
  font-variant-numeric: tabular-nums !important;
}

.hvadrm-nav-city {
  font-size: 13.5px !important;
  font-weight: 800 !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
  transition: color 0.15s ease !important;
}

.hvadrm-nav-arrow-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: none !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  cursor: pointer !important;
  color: #0284c7 !important;
}

.hvadrm-nav-chevron {
  width: 15px !important;
  height: 15px !important;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
  stroke: #0284c7 !important;
  stroke-width: 2.8 !important;
}

.hvadrm-nav-widget.is-open .hvadrm-nav-chevron {
  transform: rotate(180deg) !important;
}

/* Açılır Menü Konteyneri (Dropdown Container) */
.hvadrm-nav-dropdown {
  position: absolute !important;
  top: calc(100% + 5px) !important;
  left: 0 !important;
  min-width: 210px !important;
  max-width: 280px !important;
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 10px !important;
  box-shadow: 0 14px 35px -4px rgba(0, 0, 0, 0.16), 0 4px 10px -2px rgba(0, 0, 0, 0.06) !important;
  z-index: 999999 !important;
  overflow: hidden !important;
  animation: hvadrmNavFadeIn 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* Sağa Yaslı Dropdown Desteği (Ekrandan taşmaması için) */
.hvadrm-nav-widget.align-right .hvadrm-nav-dropdown {
  left: auto !important;
  right: 0 !important;
}

@keyframes hvadrmNavFadeIn {
  from {
    opacity: 0;
    transform: translateY(-6px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Arama Kutucuğu (Opsiyonel) */
.hvadrm-nav-search-wrap {
  padding: 8px 10px !important;
  border-bottom: 1px solid #f1f5f9 !important;
  background: #f8fafc !important;
}

.hvadrm-nav-search-input {
  width: 100% !important;
  padding: 6px 10px !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 6px !important;
  background: #ffffff !important;
  color: #0f172a !important;
  outline: none !important;
}

.hvadrm-nav-search-input:focus {
  border-color: #0284c7 !important;
  box-shadow: 0 0 0 2px rgba(2, 132, 199, 0.2) !important;
}

/* Şehir Listesi */
.hvadrm-nav-menu {
  list-style: none !important;
  margin: 0 !important;
  padding: 4px 0 !important;
  max-height: 290px !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  scrollbar-width: thin !important;
  scrollbar-color: #cbd5e1 transparent !important;
}

.hvadrm-nav-menu::-webkit-scrollbar {
  width: 5px !important;
}

.hvadrm-nav-menu::-webkit-scrollbar-track {
  background: transparent !important;
}

.hvadrm-nav-menu::-webkit-scrollbar-thumb {
  background: #cbd5e1 !important;
  border-radius: 99px !important;
}

.hvadrm-nav-menu::-webkit-scrollbar-thumb:hover {
  background: #94a3b8 !important;
}

/* Şehir Ögesi */
.hvadrm-nav-item {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 8px 14px !important;
  cursor: pointer !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #1e293b !important;
  text-transform: uppercase !important;
  letter-spacing: 0.3px !important;
  border-bottom: 1px solid #f1f5f9 !important;
  transition: background 0.15s ease, color 0.15s ease !important;
}

.hvadrm-nav-item:last-child {
  border-bottom: none !important;
}

.hvadrm-nav-item:hover {
  background: #f8fafc !important;
  color: #0284c7 !important;
}

.hvadrm-nav-item.is-selected {
  background: #f0f9ff !important;
  color: #0284c7 !important;
  font-weight: 800 !important;
}

.hvadrm-nav-item.is-selected .hvadrm-nav-item-name::before {
  content: '✓ ' !important;
  margin-right: 4px !important;
  font-weight: 900 !important;
  color: #0284c7 !important;
}

.hvadrm-nav-item-name {
  flex: 1 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.hvadrm-nav-item-right {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  flex-shrink: 0 !important;
  margin-left: 8px !important;
}

.hvadrm-nav-item-icon {
  display: inline-flex !important;
  align-items: center !important;
  width: 18px !important;
  height: 18px !important;
}

.hvadrm-nav-item-icon svg {
  width: 18px !important;
  height: 18px !important;
}

.hvadrm-nav-item-temp {
  font-size: 12.5px !important;
  font-weight: 700 !important;
  color: #64748b !important;
  font-variant-numeric: tabular-nums !important;
}

.hvadrm-nav-item.is-selected .hvadrm-nav-item-temp,
.hvadrm-nav-item:hover .hvadrm-nav-item-temp {
  color: #0284c7 !important;
}

/* ==========================================
   TEMALAR
   ========================================== */

/* 1. Açık Tema (Varsayılan - Temiz Beyaz, Haber Siteleri Uyumlu) */
.hvadrm-nav-widget.theme-acik .hvadrm-nav-trigger {
  color: #0f172a !important;
}
.hvadrm-nav-widget.theme-acik .hvadrm-nav-trigger:hover {
  background: #f1f5f9 !important;
}

/* 2. Şeffaf Tema (Header Uyumlu) */
.hvadrm-nav-widget.theme-seffaf .hvadrm-nav-trigger {
  color: inherit !important;
  background: transparent !important;
}
.hvadrm-nav-widget.theme-seffaf .hvadrm-nav-trigger:hover {
  background: rgba(0, 0, 0, 0.05) !important;
}

/* 3. Koyu Tema (Dark Glassmorphic) */
.hvadrm-nav-widget.theme-koyu .hvadrm-nav-trigger {
  color: #ffffff !important;
}
.hvadrm-nav-widget.theme-koyu .hvadrm-nav-trigger:hover {
  background: rgba(255, 255, 255, 0.08) !important;
}
.hvadrm-nav-widget.theme-koyu .hvadrm-nav-chevron {
  stroke: #38bdf8 !important;
}
.hvadrm-nav-widget.theme-koyu .hvadrm-nav-dropdown {
  background: #1e293b !important;
  border-color: #334155 !important;
  box-shadow: 0 16px 36px -4px rgba(0, 0, 0, 0.6) !important;
}
.hvadrm-nav-widget.theme-koyu .hvadrm-nav-search-wrap {
  background: #0f172a !important;
  border-color: #334155 !important;
}
.hvadrm-nav-widget.theme-koyu .hvadrm-nav-search-input {
  background: #1e293b !important;
  border-color: #475569 !important;
  color: #ffffff !important;
}
.hvadrm-nav-widget.theme-koyu .hvadrm-nav-item {
  color: #e2e8f0 !important;
  border-bottom-color: rgba(255, 255, 255, 0.06) !important;
}
.hvadrm-nav-widget.theme-koyu .hvadrm-nav-item:hover {
  background: #334155 !important;
  color: #38bdf8 !important;
}
.hvadrm-nav-widget.theme-koyu .hvadrm-nav-item.is-selected {
  background: rgba(56, 189, 248, 0.15) !important;
  color: #38bdf8 !important;
}
.hvadrm-nav-widget.theme-koyu .hvadrm-nav-item-temp {
  color: #94a3b8 !important;
}
.hvadrm-nav-widget.theme-koyu .hvadrm-nav-item.is-selected .hvadrm-nav-item-temp,
.hvadrm-nav-widget.theme-koyu .hvadrm-nav-item:hover .hvadrm-nav-item-temp {
  color: #38bdf8 !important;
}

/* 4. Cam Tema (Liquid Glass) */
.hvadrm-nav-widget.theme-cam .hvadrm-nav-trigger {
  color: #ffffff !important;
}
.hvadrm-nav-widget.theme-cam .hvadrm-nav-trigger:hover {
  background: rgba(255, 255, 255, 0.12) !important;
}
.hvadrm-nav-widget.theme-cam .hvadrm-nav-chevron {
  stroke: #38bdf8 !important;
}
.hvadrm-nav-widget.theme-cam .hvadrm-nav-dropdown {
  background: linear-gradient(135deg, rgba(30, 41, 59, 0.96) 0%, rgba(15, 23, 42, 0.98) 100%) !important;
  border-color: rgba(255, 255, 255, 0.18) !important;
  box-shadow: inset 0 1px 1px 0 rgba(255, 255, 255, 0.25), 0 18px 40px -4px rgba(0, 0, 0, 0.7) !important;
}
.hvadrm-nav-widget.theme-cam .hvadrm-nav-item {
  color: #f1f5f9 !important;
  border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}
.hvadrm-nav-widget.theme-cam .hvadrm-nav-item:hover {
  background: rgba(255, 255, 255, 0.1) !important;
  color: #38bdf8 !important;
}
.hvadrm-nav-widget.theme-cam .hvadrm-nav-item.is-selected {
  background: rgba(6, 182, 212, 0.2) !important;
  color: #38bdf8 !important;
}
.hvadrm-nav-widget.theme-cam .hvadrm-nav-item-temp {
  color: #94a3b8 !important;
}
.hvadrm-nav-widget.theme-cam .hvadrm-nav-item.is-selected .hvadrm-nav-item-temp,
.hvadrm-nav-widget.theme-cam .hvadrm-nav-item:hover .hvadrm-nav-item-temp {
  color: #38bdf8 !important;
}

/* 5. Karanlık Tema (Minimal OLED) */
.hvadrm-nav-widget.theme-karanlik .hvadrm-nav-trigger {
  color: #ffffff !important;
}
.hvadrm-nav-widget.theme-karanlik .hvadrm-nav-dropdown {
  background: #090d16 !important;
  border-color: #374151 !important;
  box-shadow: 0 18px 40px -6px rgba(0, 0, 0, 0.9) !important;
}
.hvadrm-nav-widget.theme-karanlik .hvadrm-nav-item {
  color: #e5e7eb !important;
  border-bottom-color: #1f2937 !important;
}
.hvadrm-nav-widget.theme-karanlik .hvadrm-nav-item:hover {
  background: #1f2937 !important;
  color: #60a5fa !important;
}
.hvadrm-nav-widget.theme-karanlik .hvadrm-nav-item.is-selected {
  background: #2563eb !important;
  color: #ffffff !important;
}