/* Akıllı Ayna v3.0.0 - Profesyonel: glassmorphism + responsive + day/night + forecast + news */
:root{
  --bg-start: #07070a;
  --bg-end: #0f1720;
  --glass: rgba(255,255,255,0.04);
  --glass-border: rgba(255,255,255,0.08);
  --accent: #00e6d7;
  --accent-2: #6df0ff;
  --muted: #aab3bd;
  --glass-padding: 22px;
  --radius: 16px;
  --card-bg: rgba(255,255,255,0.02);
  --card-border: rgba(255,255,255,0.03);
}

/* dark & light classes will swap variables */
.light {
  --bg-start: #f5f7fb;
  --bg-end: #e9eef6;
  --glass: rgba(0,0,0,0.04);
  --glass-border: rgba(0,0,0,0.06);
  --accent: #ff8a65;
  --accent-2: #ffd180;
  --muted: #59616a;
  --card-bg: rgba(0,0,0,0.03);
  --card-border: rgba(0,0,0,0.04);
  color-scheme: light;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  background: linear-gradient(180deg,var(--bg-start),var(--bg-end));
  color: #e8eef6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  display:flex;
  justify-content:center;
  align-items:center;
  padding:28px;
}

/* container */
.app{
  width:100%;
  max-width:1100px;
  margin:0 auto;
}

/* header */
.header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:14px;
  gap:12px;
}
.clock-wrap{display:flex;flex-direction:column}
.time{
  font-family: 'Orbitron', sans-serif;
  font-size:60px;
  line-height:1;
  color:var(--accent-2);
  text-shadow: 0 0 10px rgba(0,0,0,0.35);
}
.date{
  color:var(--muted);
  font-size:14px;
  margin-top:4px;
}
.version{
  font-size:13px;
  color:var(--muted);
  background: linear-gradient(90deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01));
  padding:6px 10px;
  border-radius:999px;
  border:1px solid var(--glass-border);
}
.theme-toggle{
  margin-left:8px;
  background:transparent;
  border:1px solid var(--glass-border);
  color:var(--muted);
  padding:6px 8px;
  border-radius:8px;
  cursor:pointer;
}

/* mirror */
.mirror{
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  border-radius: var(--radius);
  padding: 18px;
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(10px) saturate(120%);
  box-shadow: 0 10px 40px rgba(0,0,0,0.6);
}

/* weather card */
.weather-card{
  display:flex;
  gap:18px;
  align-items:flex-start;
  padding: var(--glass-padding);
  border-radius:12px;
  background: var(--card-bg);
  border:1px solid var(--card-border);
  margin-bottom:18px;
}
.weather-left{
  width:150px;
  text-align:center;
}
.weather-icon{
  width:120px;
  height:120px;
  display:block;
  margin:0 auto 6px auto;
  filter: drop-shadow(0 6px 20px rgba(0,0,0,0.6));
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  border-radius:12px;
  padding:8px;
}
.temp{
  font-family: 'Orbitron', sans-serif;
  font-size:34px;
  color:var(--accent);
}
.desc{font-size:15px;color:var(--muted);margin-bottom:8px}
.location{font-size:18px;font-weight:600;margin-bottom:6px}
.feels{font-size:13px;color:var(--muted)}
.details{font-size:13px;color:var(--muted);margin-bottom:12px}

/* sun bar */
.sun-wrap{margin-top:6px}
.sun-times{display:flex;gap:10px;align-items:center;font-size:13px;color:var(--muted);margin-bottom:8px}
.sun-bar{width:100%;height:8px;background:linear-gradient(90deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));border-radius:10px;overflow:hidden;border:1px solid rgba(255,255,255,0.02)}
.sun-progress{height:100%;width:0%;background: linear-gradient(90deg, var(--accent), var(--accent-2));transition: width 1s ease-in-out;}

/* forecast cards */
.forecast-wrap{margin-top:12px}
.forecast{display:flex;gap:10px;flex-wrap:wrap}
.forecast-card{
  width:96px;
  background: rgba(255,255,255,0.01);
  border:1px solid rgba(255,255,255,0.02);
  padding:8px;
  border-radius:10px;
  text-align:center;
  font-size:13px;
  color:var(--muted);
}
.forecast-card .day{font-weight:600;margin-bottom:6px}
.forecast-card img{width:48px;height:48px;margin-bottom:6px}
.forecast-card .tmax{color:var(--accent);font-weight:600}
.forecast-card .tmin{color:var(--muted);font-size:12px}

/* extras */
.extras{display:flex;gap:18px;align-items:flex-start;margin-bottom:14px;flex-wrap:wrap}
.quote{flex:1 1 55%;min-width:260px;background: rgba(255,255,255,0.01);padding:14px;border-radius:10px;border:1px solid rgba(255,255,255,0.02);color:var(--muted);font-style:italic;transition:opacity .6s}
.news-panel{flex:1 1 40%;min-width:260px;background: rgba(255,255,255,0.01);padding:12px;border-radius:10px;border:1px solid rgba(255,255,255,0.02)}
.news-header{font-weight:600;color:var(--muted);margin-bottom:8px}
.news-list{list-style:none;padding:0;margin:0;max-height:160px;overflow:auto}
.news-list li{padding:8px 6px;border-bottom:1px solid rgba(255,255,255,0.01);font-size:13px;color:var(--muted)}

/* footer */
.footer-row{display:flex;justify-content:space-between;align-items:center;font-size:12px;color:var(--muted);gap:8px}
.last-updated{color:var(--muted)}
.error{color:#ffb3b3;background:rgba(255,0,0,0.03);padding:8px;border-radius:8px;border:1px solid rgba(255,0,0,0.06);font-size:13px}
.hint{margin-top:12px;color:var(--muted);text-align:center;font-size:12px}

/* responsive */
@media (max-width:880px){
  .weather-card{flex-direction:column;align-items:center}
  .weather-left{width:120px}
  .time{font-size:44px}
  .extras{flex-direction:column}
  .forecast-card{width:86px}
}