/* Hava Durumu İkon Sprite Sistemi */
/* Sprite: weather_icons_dark.svg — 2232x72px, 31 ikon (72x72px) */

span.icon-hd,
div.icon-hd {
  display: inline-block;
  background-image: url('../img/weather_icons_light.svg');
  background-size: 3100% 100%;
  background-position: calc(var(--hd-index, 0) * (100% / 30)) 0;
  background-repeat: no-repeat;
}

/* Astronomi arka plan efektleri */
.astronomi::before {
  content: '';
  position: absolute;
  inset: 0;
  bottom: auto;
  height: 100%;
  width: 40px;
  background: linear-gradient(to right, rgb(var(--body-rgb, 245 245 245)), transparent);
  z-index: -1;
  pointer-events: none;
}
.astronomi::after {
  content: '';
  position: absolute;
  inset: 0;
  top: auto;
  height: 100%;
  width: 64px;
  right: 0;
  left: auto;
  background: linear-gradient(to left, rgb(var(--body-rgb, 245 245 245)), transparent);
  z-index: -1;
  pointer-events: none;
}

.icon-hd.sun { --hd-index: 0; }

.icon-hd.sun-cloud,
.icon-hd.sun-cloud_2 { --hd-index: 1; }

.icon-hd.cloud,
.icon-hd.cloud_2,
.icon-hd.night.cloud,
.icon-hd.night.cloud_2 { --hd-index: 2; }

.icon-hd.sun-cloud_2-snow,
.icon-hd.sun-cloud-snow { --hd-index: 3; }

.icon-hd.cloud_2-snow,
.icon-hd.cloud-snow { --hd-index: 4; }

.icon-hd.sun-cloud_2-snow_2,
.icon-hd.sun-cloud-snow_2 { --hd-index: 5; }

.icon-hd.cloud_2-snow-grad,
.icon-hd.cloud-snow-grad { --hd-index: 6; }

.icon-hd.sun-cloud_2-snow_3,
.icon-hd.sun-cloud-snow_3 { --hd-index: 7; }

.icon-hd.cloud_2-snow-grad_strong,
.icon-hd.cloud-snow-grad_strong { --hd-index: 8; }

.icon-hd.sun-cloud_2-rain-snow,
.icon-hd.sun-cloud-rain-snow { --hd-index: 9; }

.icon-hd.cloud_2-snow-rain_2,
.icon-hd.cloud_2-rain-snow,
.icon-hd.cloud-snow-rain,
.icon-hd.cloud-snow-rain_2,
.icon-hd.cloud-rain-snow { --hd-index: 10; }

.icon-hd.sun-cloud_2-rain,
.icon-hd.sun-cloud-rain { --hd-index: 11; }

.icon-hd.cloud_2-rain,
.icon-hd.cloud-rain,
.icon-hd.night.cloud_2-rain,
.icon-hd.night.cloud-rain { --hd-index: 12; }

.icon-hd.sun-cloud_2-rain_2,
.icon-hd.sun-cloud-rain_2 { --hd-index: 13; }

.icon-hd.cloud_2-rain_2,
.icon-hd.cloud-rain_2,
.icon-hd.night.cloud_2-rain_2,
.icon-hd.night.cloud-rain_2 { --hd-index: 14; }

.icon-hd.sun-cloud_2-rain_strong,
.icon-hd.sun-cloud-rain_strong { --hd-index: 15; }

.icon-hd.cloud_2-rain_strong,
.icon-hd.cloud-rain_strong,
.icon-hd.night.cloud_2-rain_strong,
.icon-hd.night.cloud-rain_strong { --hd-index: 16; }

.icon-hd.night.moon { --hd-index: 17; }

.icon-hd.night.moon-cloud,
.icon-hd.night.moon-cloud_2 { --hd-index: 18; }

.icon-hd.night.cloud_2-snow,
.icon-hd.night.cloud-snow { --hd-index: 19; }

.icon-hd.night.cloud_2-snow-grad,
.icon-hd.night.cloud-snow-grad { --hd-index: 20; }

.icon-hd.night.cloud_2-snow-grad_strong,
.icon-hd.night.cloud-snow-grad_strong { --hd-index: 21; }

.icon-hd.night.cloud-snow-rain,
.icon-hd.night.cloud_2-snow-rain { --hd-index: 22; }

.icon-hd.night.moon-cloud-rain,
.icon-hd.night.moon-rain { --hd-index: 23; }

.icon-hd.night.moon-cloud_2-rain_2,
.icon-hd.night.moon-cloud-rain_2 { --hd-index: 24; }

.icon-hd.night.moon-cloud_2-rain_strong,
.icon-hd.night.moon-cloud-rain_strong { --hd-index: 25; }

.icon-hd.cloud_2-lightning,
.icon-hd.cloud-lightning,
.icon-hd.night.cloud_2-lightning,
.icon-hd.night.cloud-lightning { --hd-index: 26; }

.icon-hd.cloud_2-lightning-snow,
.icon-hd.cloud-lightning-snow,
.icon-hd.night.cloud_2-lightning-snow,
.icon-hd.night.cloud-lightning-snow { --hd-index: 27; }

.icon-hd.cloud_2-lightning-rain,
.icon-hd.cloud_2-lightning-rain_strong,
.icon-hd.cloud-lightning-rain,
.icon-hd.cloud-lightning-rain_strong,
.icon-hd.night.cloud_2-lightning-rain,
.icon-hd.night.cloud_2-lightning-rain_strong,
.icon-hd.night.cloud-lightning-rain,
.icon-hd.night.cloud-lightning-rain_strong { --hd-index: 28; }

.icon-hd.cloud_2-rain-danger,
.icon-hd.night.cloud-rain-danger { --hd-index: 29; }