:root{
  --bg:#0a0710; --bg2:#140b22; --panel:#1a0f2e; --purple:#9b4dff; --purple2:#6a2cc9;
  --text:#ecebf5; --muted:#a79bc4; --accent:#c084fc; --border:#2a1a45;
  color-scheme: dark;
  box-sizing:border-box;
}
*{box-sizing:inherit; margin:0; padding:0;}
html,body{height:100%;}
body{
  font-family:'Segoe UI', system-ui, -apple-system, sans-serif;
  background: radial-gradient(circle at 20% 0%, var(--bg2), var(--bg) 60%);
  color:var(--text); line-height:1.6;
}
.wrap{max-width:680px; margin:0 auto; padding:40px 20px 70px;}

h1{text-align:center; font-size:1.8rem; letter-spacing:1px; margin-bottom:24px;
  background:linear-gradient(90deg, var(--accent), #fff, var(--purple));
  -webkit-background-clip:text; background-clip:text; color:transparent;}

.search-box{display:flex; gap:10px; margin-bottom:28px;}
.search-box input{flex:1; background:var(--panel); border:1px solid var(--border); border-radius:10px;
  padding:12px 14px; color:var(--text); font-size:1rem;}
.search-box button{background:var(--purple); color:#fff; border:none; border-radius:10px; padding:12px 20px;
  font-weight:600; cursor:pointer; font-size:1rem;}
.search-box button:hover{background:var(--purple2);}

.msg-err{background:rgba(255,80,80,0.1); color:#ff8f8f; border:1px solid rgba(255,80,80,0.4);
  border-radius:10px; padding:12px 16px; margin-bottom:20px; font-size:0.92rem;}

.current-card{background:var(--panel); border:1px solid var(--border); border-radius:20px; padding:32px 24px;
  text-align:center; box-shadow:0 0 30px rgba(155,77,255,0.12); margin-bottom:28px;}
.current-card .loc{color:var(--muted); font-size:1rem; margin-bottom:6px;}
.current-card .emoji{font-size:4rem; margin:10px 0;}
.current-card .temp{font-size:3rem; font-weight:800; color:var(--accent);}
.current-card .desc{color:var(--text); font-size:1.05rem; margin-top:4px;}
.current-card .extra{color:var(--muted); font-size:0.88rem; margin-top:10px;}

.forecast-title{color:var(--accent); font-size:0.95rem; letter-spacing:1px; margin-bottom:12px;}
.forecast-grid{display:grid; grid-template-columns:repeat(5,1fr); gap:10px;}
.forecast-day{background:var(--bg2); border:1px solid var(--border); border-radius:14px;
  padding:14px 8px; text-align:center;}
.forecast-day .d{color:var(--muted); font-size:0.78rem;}
.forecast-day .e{font-size:1.6rem; margin:6px 0;}
.forecast-day .t{font-size:0.85rem;}
.forecast-day .t .max{color:var(--text); font-weight:700;}
.forecast-day .t .min{color:var(--muted);}

footer{text-align:center; color:var(--muted); font-size:0.8rem; margin-top:36px;}

@media (max-width:520px){
  .forecast-grid{grid-template-columns:repeat(5,1fr); gap:6px;}
  .forecast-day{padding:10px 4px;}
  .current-card .temp{font-size:2.4rem;}
  .current-card .emoji{font-size:3.2rem;}
  .search-box{flex-direction:column;}
}

/* Girilen yer + eşleşme seçici */
.searched{color:var(--muted); font-size:0.9rem; margin-bottom:12px;}
.searched strong{color:var(--accent);}
.matches{display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-bottom:20px; font-size:0.82rem; color:var(--muted);}
.chip{background:var(--bg2); border:1px solid var(--border); border-radius:999px; padding:5px 12px;
  color:var(--text); text-decoration:none; font-size:0.82rem; transition:border-color .2s;}
.chip:hover{border-color:var(--accent);}
.chip.active{background:rgba(155,77,255,0.18); border-color:var(--purple); color:var(--accent);}