/* Modal + animations + fancy headings */
:root{ --bg:#0b0e14; --bg2:#0f1522; --panel:#101828; --panel-2:#0d1524; --border:#1f2e4a; --text:#ecf3ff; --muted:#aab7cf; --brand:#ff1c37; --brand-2:#ffd54a; --radius:18px; --shadow:0 12px 50px rgba(0,0,0,.5); }
*{box-sizing:border-box} html,body{height:100%}
body{margin:0;color:var(--text);font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;
  background:radial-gradient(80% 60% at 10% -20%, rgba(255,28,55,.12), transparent 55%), radial-gradient(60% 50% at 100% 0%, rgba(78,161,255,.12), transparent 60%), linear-gradient(180deg,var(--bg) 0%, var(--bg2) 100%); background-attachment:fixed;}
.app{min-height:100dvh; display:grid; grid-template-rows:auto 1fr auto}
.site-header{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 18px; border-bottom:1px solid var(--border); position:sticky; top:0; z-index:20; backdrop-filter:saturate(140%) blur(6px)}
.brand{display:flex; align-items:center; gap:12px} .poke-logo{width:36px; height:36px; filter:drop-shadow(0 4px 8px rgba(255,28,55,.35))}
.titles h1{margin:0; font-size:18px} .subtitle{font-size:12px; color:var(--muted)}
.controls{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.content{display:grid; grid-template-columns:minmax(0,1fr) 370px; gap:18px; padding:16px; align-items:start}
@media(max-width:980px){.content{grid-template-columns:1fr}}
.card{background:linear-gradient(180deg,var(--panel) 0%,var(--panel-2) 100%); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden}
.card-header{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 14px; border-bottom:1px solid var(--border)}
.card-title{margin:0; font-size:16px}
.site-footer{padding:14px 18px; border-top:1px solid var(--border); color:var(--muted)}
.btn{cursor:pointer;border:1px solid var(--border);background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));color:var(--text);padding:8px 12px;border-radius:12px}
.btn-primary{border-color:#7f1320;background:linear-gradient(180deg,#ff2b45,#c9162b);color:#fff}
.btn-ghost{background:transparent}
.btn-mini{font-size:12px;padding:6px 10px;border-radius:999px;border:1px solid var(--border);background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));color:#e9f2ff}

.pill{display:flex;align-items:center;gap:6px;border:1px solid var(--border);border-radius:999px;padding:6px 8px}
.label{font-size:12px;color:var(--muted)}
.chip{ text-decoration:none; font-size:13px; color:#fff; padding:2px 10px; border-radius:999px; border:1px solid rgba(255,255,255,.15); background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)); box-shadow: inset 0 3px 10px rgba(0,0,0,.25) }
.chip:hover{ background:linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.04)) }

/* Modal */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  display: grid;
  place-items: center;
  z-index: 60;
  animation: fOut .2s both;
  pointer-events: none; /* 🔹 kapalıyken tıklamaları engelleme */
  opacity: 0;
}

.modal-overlay.show {
  animation: fIn .25s both;
  pointer-events: auto; /* 🔹 sadece açıkken tıklama */
  opacity: 1;
}
@keyframes fIn{from{opacity:0}to{opacity:1}} @keyframes fOut{from{opacity:1}to{opacity:0}}
.modal{width:min(560px,92vw);background:linear-gradient(180deg,var(--panel),var(--panel-2));border:1px solid var(--border);border-radius:20px;box-shadow:0 30px 100px rgba(0,0,0,.6);padding:18px;transform:scale(.96);opacity:.7;animation:popIn .25s both}
@keyframes popIn{to{transform:scale(1);opacity:1}}
.modal-header{margin-bottom:8px}
.fancy{margin:.2rem 0;font-size:22px;letter-spacing:.3px;background:linear-gradient(90deg,#ff5770,#ffd54a);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:0 0 20px rgba(255,87,112,.25)}
.muted{color:var(--muted);margin:0}
.modal-close{position:absolute;right:12px;top:12px;border:0;background:transparent;color:#fff;font-size:18px;cursor:pointer;opacity:.8}
.modal-close:hover{opacity:1}

.tabs{display:flex;gap:8px;margin:10px 0 4px}
.tab{flex:1;border:1px solid var(--border);background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));padding:10px;border-radius:10px;cursor:pointer}
.tab.active{border-color:#7f1320;background:linear-gradient(180deg,rgba(255,28,55,.15),rgba(255,28,55,.05))}
.tab-panels{position:relative}
/* Sadece aktif panel görünsün */
.tab-panels .panel{display:none !important; margin-top:6px}
.tab-panels .panel.active{display:grid !important; animation:fadeSlide .25s both}

/* Formun düzeni için "display"i buradan kaldırıyoruz */
.auth-form{gap:10px}
.auth-form input{padding:10px;border:1px solid var(--border);background:rgba(255,255,255,.03);color:var(--text);border-radius:10px}
.auth-form .wide{width:100%}
.form-msg{font-size:13px;color:#ffd54a;margin-top:6px}

/* Player & list (short, inherited from previous patches) */
.player-shell{ position:relative; width:100%; aspect-ratio:16/9; background:#000; border-radius:22px; overflow:hidden; box-shadow:0 14px 60px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.06) inset }
.player-el{ position:absolute; inset:0; width:100%; height:100%; display:none; border:0; background:#000 }
.player-el.show{ display:block }
.player-toolbar{ position:absolute; right:12px; top:12px; display:flex; gap:8px; z-index:5 }
.sidebar{ overflow:hidden } .ep-list{ height:100%; overflow:auto; display:flex; flex-direction:column; gap:10px; padding:10px }
.ep{ padding:12px 14px; border:1px solid var(--border); border-radius:14px; cursor:pointer; background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.015)); display:flex; align-items:center; justify-content:space-between; gap:10px }
.ep.active{ border-color:#7f1320; background:linear-gradient(180deg, rgba(255,28,55,.15), rgba(255,28,55,.05)) }
.ep.watched{ border-color:#2b6f1f; background:linear-gradient(180deg, rgba(46,160,67,.24), rgba(30,110,50,.1)) }
.searchbox{ position:relative } .searchbox input{ width:260px; max-width:50vw; background:rgba(255,255,255,.02); border:1px solid var(--border); color:var(--text); border-radius:10px; padding:8px 28px 8px 10px; outline:none } .kbd{ position:absolute; right:6px; top:50%; transform:translateY(-50%); font-size:11px; color:var(--muted); border:1px solid var(--border); border-radius:6px; padding:2px 6px; background:rgba(255,255,255,.02) }
.filters .chip{ margin-left:6px }