* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  }

:root {
--text: #ffffff;
--muted: rgba(255,255,255,.72);
--muted-soft: rgba(255,255,255,.58);
--border: rgba(255,255,255,.16);

--glass-top: rgba(255,255,255,.105);
--glass-bottom: rgba(5,18,38,.30);

--blue: #35bdf4;
--blue-bright: #65d8ff;

}

html {
min-height: 100%;
font-family:
Inter,
system-ui,
-apple-system,
BlinkMacSystemFont,
"Segoe UI",
sans-serif;
}

body {
min-height: 100vh;
color: var(--text);
background: #081426;
transition:
background 1s ease,
background-image 1s ease;
}

button,
input {
font: inherit;
}

button {
cursor: pointer;
}

a {
color: inherit;
text-decoration: none;
}

/* ============================================================
WEATHER BACKGROUNDS
============================================================ */

body.weather-clear,
body.weather-sunny {
background:
radial-gradient(
circle at 82% 7%,
rgba(255,225,96,.48),
transparent 24%
),
linear-gradient(
135deg,
#0876d1 0%,
#1fa9e5 48%,
#63d9f0 100%
);
}

body.weather-cloudy {
background:
linear-gradient(
135deg,
#405b70 0%,
#668293 48%,
#94aab6 100%
);
}

body.weather-rain {
background:
radial-gradient(
circle at 20% 12%,
rgba(92,190,235,.22),
transparent 27%
),
linear-gradient(
135deg,
#112d49 0%,
#215472 50%,
#4d8ba4 100%
);
}

body.weather-heavy-rain {
background:
linear-gradient(
135deg,
#12263b 0%,
#193e5a 50%,
#47778e 100%
);
}

body.weather-storm {
background:
radial-gradient(
circle at 75% 10%,
rgba(145,120,235,.27),
transparent 26%
),
linear-gradient(
135deg,
#10152b 0%,
#272e4b 50%,
#515c7b 100%
);
}

body.weather-snow {
background:
radial-gradient(
circle at 82% 8%,
rgba(255,255,255,.42),
transparent 25%
),
linear-gradient(
135deg,
#57778e 0%,
#8eafc1 50%,
#cfeaf4 100%
);
}

body.weather-fog {
background:
linear-gradient(
135deg,
#56666e 0%,
#7f9097 50%,
#aeb9bd 100%
);
}

body.weather-haze {
background:
linear-gradient(
135deg,
#765e45 0%,
#ae895e 50%,
#d7bc8d 100%
);
}

body.weather-night {
background:
radial-gradient(
circle at 78% 8%,
rgba(104,138,230,.28),
transparent 25%
),
linear-gradient(
135deg,
#071022 0%,
#102449 50%,
#29466e 100%
);
}

/* ============================================================
APP
============================================================ */

.app {
width: min(1180px, calc(100% - 32px));
margin: 0 auto;
padding: 22px 0 40px;
}

/* ============================================================
HEADER
============================================================ */

.topbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
margin-bottom: 24px;
}

.brand {
display: flex;
align-items: center;
gap: 13px;
}

.brand-icon {
width: 48px;
height: 48px;

display: grid;
place-items: center;

border-radius: 15px;

font-size: 25px;

background:
    linear-gradient(
        145deg,
        rgba(255,255,255,.20),
        rgba(255,255,255,.07)
    );

border: 1px solid rgba(255,255,255,.18);

box-shadow:
    0 10px 30px rgba(0,0,0,.12),
    inset 0 1px 0 rgba(255,255,255,.12);

}

.brand-name {
font-size: 21px;
font-weight: 800;
letter-spacing: -.4px;
}

.brand-subtitle {
margin-top: 2px;
color: var(--muted);
font-size: 12px;
}

.top-actions {
display: flex;
align-items: center;
gap: 9px;
}

.play-button,
.unit-button {
min-height: 42px;

border: 1px solid rgba(255,255,255,.17);
border-radius: 12px;

background:
    linear-gradient(
        145deg,
        rgba(255,255,255,.14),
        rgba(255,255,255,.06)
    );

color: white;

backdrop-filter: blur(16px);

box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 8px 25px rgba(0,0,0,.08);

}

.play-button {
display: flex;
align-items: center;
gap: 8px;

padding: 0 15px;

font-size: 13px;
font-weight: 700;

}

.play-button:hover,
.unit-button:hover {
background:
linear-gradient(
145deg,
rgba(255,255,255,.19),
rgba(255,255,255,.08)
);
}

.unit-button {
width: 48px;
font-weight: 800;
}

/* ============================================================
SEARCH
============================================================ */

.search-section {
position: relative;
z-index: 20;
margin-bottom: 20px;
}

.search-box {
position: relative;

display: flex;
align-items: center;

height: 58px;
padding: 6px;

border-radius: 17px;

background:
    linear-gradient(
        110deg,
        rgba(255,255,255,.15),
        rgba(255,255,255,.075) 45%,
        rgba(4,15,30,.27)
    );

border: 1px solid rgba(255,255,255,.18);

backdrop-filter: blur(22px);

box-shadow:
    0 15px 45px rgba(0,0,0,.13),
    inset 0 1px 0 rgba(255,255,255,.09);

}

.search-icon {
padding-left: 15px;
opacity: .8;
}

.search-box input {
flex: 1;
min-width: 0;
height: 100%;

padding: 0 13px;

border: 0;
outline: 0;

color: white;
background: transparent;

}

.search-box input::placeholder {
color: rgba(255,255,255,.62);
}

.location-button,
.search-button {
height: 44px;
border: 0;
border-radius: 11px;
}

.location-button {
width: 44px;

color: white;

background:
    linear-gradient(
        145deg,
        rgba(255,255,255,.14),
        rgba(255,255,255,.06)
    );

}

.search-button {
padding: 0 20px;

color: #06213b;

background:
    linear-gradient(
        135deg,
        #ffffff,
        #dff7ff
    );

font-weight: 800;

box-shadow:
    0 6px 20px rgba(0,0,0,.12);

}

.search-button:hover {
background:
linear-gradient(
135deg,
#ffffff,
#edfbff
);
}

/* ============================================================
SUGGESTIONS
============================================================ */

.suggestions {
position: absolute;

top: calc(100% + 8px);
left: 0;
right: 0;

display: none;

overflow: hidden;

border-radius: 15px;

background:
    linear-gradient(
        145deg,
        rgba(15,34,59,.97),
        rgba(5,17,33,.97)
    );

border: 1px solid var(--border);

box-shadow:
    0 20px 55px rgba(0,0,0,.3);

backdrop-filter: blur(25px);

}

.suggestions.active {
display: block;
}

.suggestion-item {
width: 100%;

display: flex;
align-items: center;
gap: 12px;

padding: 13px 15px;

border: 0;
border-bottom: 1px solid rgba(255,255,255,.07);

color: white;
text-align: left;

background: transparent;

}

.suggestion-item:hover {
background: rgba(255,255,255,.08);
}

.suggestion-icon {
font-size: 18px;
}

.suggestion-text {
display: flex;
flex-direction: column;
gap: 2px;
}

.suggestion-text strong {
font-size: 14px;
}

.suggestion-text small {
color: var(--muted);
font-size: 11px;
}

/* ============================================================
HERO
============================================================ */

.hero-card {
position: relative;
overflow: hidden;

padding: 27px;

border-radius: 25px;
border: 1px solid rgba(255,255,255,.18);

background:
    radial-gradient(
        circle at 88% 5%,
        rgba(255,255,255,.17),
        transparent 28%
    ),
    linear-gradient(
        135deg,
        rgba(255,255,255,.15),
        rgba(255,255,255,.075) 48%,
        rgba(5,18,38,.24) 100%
    );

backdrop-filter: blur(24px);

box-shadow:
    0 25px 65px rgba(0,0,0,.13),
    inset 0 1px 0 rgba(255,255,255,.08);

}

.hero-location {
margin-bottom: 5px;
}

.location-name {
font-size: 27px;
font-weight: 800;
}

.current-date {
margin-top: 4px;

color: var(--muted);

font-size: 13px;
text-transform: capitalize;

}

.current-weather {
display: flex;
align-items: center;
gap: 25px;

margin: 15px 0 25px;

}

.current-icon-wrap {
width: 145px;
height: 145px;

display: grid;
place-items: center;

}

.current-icon {
width: 140px;
height: 140px;

object-fit: contain;

filter:
    drop-shadow(0 15px 20px rgba(0,0,0,.15));

}

.temperature {
display: flex;
align-items: flex-start;

line-height: .95;

}

.temperature #currentTemp {
font-size: clamp(62px, 9vw, 92px);

font-weight: 300;

letter-spacing: -5px;

}

.temperature-unit {
margin-top: 9px;
margin-left: 5px;

color: var(--muted);

font-size: 22px;

}

.condition-text {
margin-top: 10px;

font-size: 19px;
font-weight: 700;

}

.feels-line {
margin-top: 7px;

color: var(--muted);

font-size: 13px;

}

.feels-line strong {
color: white;
margin-left: 3px;
}

.hero-stats {
display: grid;
grid-template-columns: repeat(4, 1fr);

border-top: 1px solid rgba(255,255,255,.16);

padding-top: 19px;

}

.hero-stat {
display: grid;

grid-template-columns: auto 1fr;
column-gap: 8px;

align-items: center;

padding: 0 16px;

border-right: 1px solid rgba(255,255,255,.14);

}

.hero-stat:first-child {
padding-left: 0;
}

.hero-stat:last-child {
border-right: 0;
}

.stat-icon {
grid-row: span 2;
font-size: 20px;
}

.stat-label {
color: var(--muted);
font-size: 11px;
}

.hero-stat strong {
font-size: 14px;
}

/* ============================================================
SECTIONS
============================================================ */

.section {
margin-top: 23px;
}

.section-heading {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 15px;

margin-bottom: 12px;

}

.section-title {
font-size: 18px;
font-weight: 800;
}

.section-caption {
color: var(--muted);
font-size: 11px;
}

/* ============================================================
HOURLY
============================================================ */

.hourly-list {
display: flex;
gap: 9px;

overflow-x: auto;
overflow-y: hidden;

padding: 2px 2px 12px;

scroll-behavior: smooth;

scrollbar-width: auto;
scrollbar-color:
    rgba(255,255,255,.48)
    rgba(255,255,255,.10);

}

.hourly-list::-webkit-scrollbar {
height: 9px;
}

.hourly-list::-webkit-scrollbar-track {
border-radius: 99px;

background:
    rgba(255,255,255,.10);

}

.hourly-list::-webkit-scrollbar-thumb {
border-radius: 99px;

background:
    linear-gradient(
        90deg,
        rgba(255,255,255,.48),
        rgba(101,216,255,.70)
    );

border: 2px solid transparent;
background-clip: padding-box;

}

.hourly-list::-webkit-scrollbar-thumb:hover {
background:
linear-gradient(
90deg,
rgba(255,255,255,.62),
rgba(101,216,255,.85)
);

border: 2px solid transparent;
background-clip: padding-box;

}

.hour-card {
flex: 0 0 105px;

min-height: 155px;

display: flex;
flex-direction: column;
align-items: center;
justify-content: center;

gap: 7px;

border: 1px solid rgba(255,255,255,.15);
border-radius: 17px;

background:
    linear-gradient(
        145deg,
        rgba(255,255,255,.13),
        rgba(255,255,255,.065) 55%,
        rgba(4,17,35,.25)
    );

backdrop-filter: blur(18px);

box-shadow:
    inset 0 1px 0 rgba(255,255,255,.07);

}

/*
Bilerek hover efekti yok.
Kullanıcı kartın üzerine geldiğinde
sahte bir "tıklanabilir" hissi oluşmuyor.
*/

.hour-time {
color: var(--muted);
font-size: 11px;
}

.hour-icon {
width: 53px;
height: 53px;

object-fit: contain;

}

.hour-temp {
font-size: 18px;
font-weight: 700;
}

.hour-rain {
color: #63d1ff;
font-size: 11px;
font-weight: 700;
}

/* ============================================================
DAILY
============================================================ */

.daily-header,
.day-row {
display: grid;

grid-template-columns:
    1.2fr
    70px
    1.5fr
    90px
    80px
    100px;

align-items: center;
gap: 10px;

}

.daily-header {
padding: 0 16px 8px;

color: rgba(255,255,255,.58);

font-size: 10px;
text-transform: uppercase;

}

.daily-list {
display: flex;
flex-direction: column;
gap: 7px;
}

.day-row {
min-height: 73px;

padding: 9px 16px;

border-radius: 15px;
border: 1px solid rgba(255,255,255,.15);

background:
    linear-gradient(
        110deg,
        rgba(255,255,255,.13),
        rgba(255,255,255,.065) 50%,
        rgba(4,17,35,.23)
    );

backdrop-filter: blur(18px);

box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06);

}

.day-name {
font-size: 13px;
font-weight: 700;
}

.day-date {
color: var(--muted);
font-size: 10px;
}

.day-icon {
width: 45px;
height: 45px;

object-fit: contain;

}

.day-condition {
color: rgba(255,255,255,.84);
font-size: 12px;
}

.day-rain-probability {
display: flex;
flex-direction: column;
gap: 3px;
}

.rain-percent {
color: #61d2ff;
font-size: 12px;
font-weight: 800;
}

.snow-percent {
color: #dff8ff;
font-size: 10px;
font-weight: 700;
}

.day-precipitation {
display: flex;
flex-direction: column;
gap: 2px;

color: var(--muted);
font-size: 11px;

}

.day-temp {
font-size: 15px;
font-weight: 800;
}

.day-temp-low {
margin-left: 5px;

color: var(--muted);
font-weight: 500;

}

/* ============================================================
DETAILS
============================================================ */

.details-grid {
display: grid;

grid-template-columns: repeat(4, 1fr);

gap: 10px;

}

.detail-card {
position: relative;
overflow: hidden;

min-height: 112px;

display: flex;
flex-direction: column;
justify-content: center;

gap: 7px;

padding: 17px;

border-radius: 17px;
border: 1px solid rgba(255,255,255,.15);

background:
    linear-gradient(
        135deg,
        rgba(255,255,255,.13),
        rgba(255,255,255,.065) 52%,
        rgba(4,17,35,.23)
    );

backdrop-filter: blur(20px);

box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06);

}

.detail-icon {
font-size: 19px;
}

.detail-label {
color: var(--muted);
font-size: 11px;
}

.detail-card strong {
font-size: 16px;
}

/* ============================================================
SUN
============================================================ */

.sun-card {
display: grid;

grid-template-columns: 1fr 2fr 1fr;

align-items: center;
gap: 25px;

margin-top: 23px;
padding: 20px;

border: 1px solid rgba(255,255,255,.15);
border-radius: 19px;

background:
    linear-gradient(
        110deg,
        rgba(255,255,255,.13),
        rgba(255,255,255,.065) 52%,
        rgba(4,17,35,.23)
    );

backdrop-filter: blur(20px);

box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06);

}

.sun-item {
display: flex;
align-items: center;
gap: 11px;
}

.sun-item > div:last-child {
display: flex;
flex-direction: column;
gap: 3px;
}

.sun-item span {
color: var(--muted);
font-size: 11px;
}

.sun-item strong {
font-size: 14px;
}

.sun-icon {
font-size: 25px;
}

.sun-line {
height: 5px;

border-radius: 99px;

background: rgba(255,255,255,.13);

overflow: hidden;

}

.sun-line-fill {
width: 55%;
height: 100%;

border-radius: inherit;

background:
    linear-gradient(
        90deg,
        #ffb52e,
        #ffe66d,
        #ff8b35
    );

}

/* ============================================================
ERROR / LOADING
============================================================ */

.hidden {
display: none !important;
}

.error-box {
display: flex;
align-items: center;
gap: 10px;

margin-bottom: 15px;
padding: 13px 15px;

border-radius: 13px;

border: 1px solid rgba(255,100,100,.3);

color: #ffdada;

background:
    linear-gradient(
        135deg,
        rgba(120,30,35,.45),
        rgba(70,18,25,.32)
    );

font-size: 13px;

}

.loading {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;

min-height: 120px;

color: var(--muted);

}

.spinner {
width: 19px;
height: 19px;

border: 2px solid rgba(255,255,255,.25);
border-top-color: white;

border-radius: 50%;

animation: spin .8s linear infinite;

}

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

/* ============================================================
FOOTER
============================================================ */

.footer {
display: flex;
align-items: center;
justify-content: center;
gap: 9px;

flex-wrap: wrap;

margin-top: 38px;
padding-top: 20px;

border-top: 1px solid rgba(255,255,255,.13);

color: rgba(255,255,255,.68);

font-size: 11px;

}

.footer-brand {
color: #ffffff;
font-weight: 800;
}

.footer-text {
color: rgba(255,255,255,.68);
}

.footer-link {
color: #72d9ff;
font-weight: 800;
}

.footer-link:hover {
text-decoration: underline;
}

/* ============================================================
RESPONSIVE
============================================================ */

@media (max-width: 850px) {

.details-grid {
    grid-template-columns: repeat(2, 1fr);
}

.daily-header {
    display: none;
}

.day-row {
    grid-template-columns:
        1.2fr
        55px
        1fr
        75px
        70px;
}

.day-condition {
    display: none;
}

}

@media (max-width: 650px) {

.app {
    width: min(100% - 20px, 1180px);
    padding-top: 12px;
}

.topbar {
    align-items: flex-start;
}

.brand-name {
    font-size: 18px;
}

.play-button span:last-child {
    display: none;
}

.play-button {
    width: 43px;
    justify-content: center;
    padding: 0;
}

.hero-card {
    padding: 20px;
}

.current-weather {
    gap: 12px;
}

.current-icon-wrap {
    width: 100px;
    height: 100px;
}

.current-icon {
    width: 95px;
    height: 95px;
}

.temperature #currentTemp {
    font-size: 60px;
    letter-spacing: -4px;
}

.condition-text {
    font-size: 16px;
}

.hero-stats {
    grid-template-columns: repeat(2, 1fr);
    gap: 15px 0;
}

.hero-stat:nth-child(2) {
    border-right: 0;
}

.hero-stat:nth-child(3) {
    padding-left: 0;
}

.details-grid {
    gap: 8px;
}

.detail-card {
    min-height: 100px;
    padding: 13px;
}

.day-row {
    grid-template-columns:
        1.2fr
        48px
        65px
        70px;

    gap: 6px;
    padding: 8px 10px;
}

.day-precipitation {
    display: none;
}

.day-icon {
    width: 40px;
    height: 40px;
}

.sun-card {
    grid-template-columns: 1fr;
    gap: 13px;
}

.sun-line {
    order: 3;
}

}

@media (max-width: 420px) {

.search-box {
    height: 54px;
}

.search-button {
    padding: 0 14px;
}

.location-button {
    display: none;
}

.hero-card {
    padding: 17px;
}

.current-weather {
    align-items: center;
}

.current-icon-wrap {
    width: 80px;
    height: 80px;
}

.current-icon {
    width: 78px;
    height: 78px;
}

.temperature #currentTemp {
    font-size: 49px;
}

.temperature-unit {
    font-size: 17px;
}

.details-grid {
    grid-template-columns: 1fr 1fr;
}

.detail-card strong {
    font-size: 14px;
}

}