/* ===== Tasarım Token'ları =====
   Konsept: gece yarısı radyo kabini — kadran ışığı (amber) + dalga formu (teal)
   Bg: #0f1320 / Surface: #171c2e / Amber: #ff8a3d / Teal: #33d9c4
*/
:root{
  --bg: #0f1320;
  --bg-translucent: rgba(15,19,32,0.92);
  --surface: #171c2e;
  --surface-2: #1f2540;
  --border: #2a3152;
  --text: #eef0f7;
  --text-muted: #9aa3b8;
  --amber: #ff8a3d;
  --amber-dim: #7a4a2a;
  --teal: #33d9c4;
  --danger: #ff5c6c;
  --radius: 14px;
  --font-display: 'Space Grotesk', sans-serif;
  --font-body: 'Inter', sans-serif;
  --font-mono: 'IBM Plex Mono', monospace;
}

/* ===== Aydınlık Mod ===== */
body.light-theme{
  --bg: #f4f2ed;
  --bg-translucent: rgba(244,242,237,0.92);
  --surface: #ffffff;
  --surface-2: #f0ede6;
  --border: #ddd7c8;
  --text: #1c1a15;
  --text-muted: #6b6455;
  --amber: #d9640f;
  --amber-dim: #f0c9a3;
  --teal: #0d8a78;
}
body{ transition: background .25s ease, color .25s ease; }
body.light-theme{
  background: radial-gradient(ellipse at top, #ffffff 0%, var(--bg) 60%);
}
.theme-toggle{
  background:var(--surface-2); border:1px solid var(--border); color:var(--text);
  width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  flex-shrink:0; font-size:1rem;
}

[data-theme="light"]{
  --bg: #f6f5f2;
  --surface: #ffffff;
  --surface-2: #f0eee8;
  --border: #e2dfd6;
  --text: #201d17;
  --text-muted: #6b6558;
  --amber: #e06a1f;
  --amber-dim: #f2c9a3;
  --teal: #0d8f7e;
  --danger: #c73448;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:
    radial-gradient(ellipse at top, #1a2038 0%, var(--bg) 55%);
  color:var(--text);
  font-family:var(--font-body);
  min-height:100vh;
  padding-bottom:84px; /* player dock alanı */
}
a{color:var(--teal); text-decoration:none;}
button{font-family:inherit; cursor:pointer;}
input,textarea,select{font-family:inherit;}

/* Kadran çizgisi - dekoratif eq bar üst şerit */
.dial-strip{
  height:5px;
  background:linear-gradient(90deg, var(--amber-dim), var(--amber) 50%, var(--amber-dim));
  position:relative;
  overflow:hidden;
}
.dial-bars{display:none;}

/* ===== Header ===== */
.topbar{
  display:flex; align-items:center; gap:24px;
  padding:16px 28px;
  border-bottom:1px solid var(--border);
  position:sticky; top:0; z-index:50;
  background:var(--bg-translucent);
  backdrop-filter:blur(8px);
}
.brand{display:flex; align-items:baseline; gap:8px; font-family:var(--font-display);}
.brand-name{font-size:1.25rem; letter-spacing:0.5px;}
.brand-name strong{color:var(--teal);}

.main-nav{display:flex; gap:4px; flex:1;}
.main-nav a{
  color:var(--text-muted); padding:8px 14px; border-radius:20px; font-size:0.92rem; font-weight:500;
  transition:background .15s, color .15s;
}
.main-nav a:hover, .main-nav a.active{background:var(--surface-2); color:var(--text);}

.auth-slot{display:flex; align-items:center; gap:10px; font-size:0.9rem;}
.auth-slot .pts-pill{
  background:var(--surface-2); border:1px solid var(--border); padding:6px 12px; border-radius:20px;
  font-family:var(--font-mono); color:var(--amber); font-size:0.82rem;
}
.btn{
  border:1px solid var(--border); background:var(--surface-2); color:var(--text);
  padding:8px 16px; border-radius:10px; font-size:0.88rem; font-weight:500;
  transition:transform .1s, border-color .15s;
}
.btn:hover{border-color:var(--teal);}
.btn:active{transform:scale(0.97);}
.btn-primary{background:var(--amber); color:#1a0f05; border-color:var(--amber); font-weight:600;}
.btn-primary:hover{border-color:var(--amber);}
.btn-danger{background:var(--danger); color:#2a0508; border-color:var(--danger);}
.btn-ghost{background:transparent;}
.nav-toggle{display:none; background:none; border:none; color:var(--text); font-size:1.4rem;}

/* ===== Ticker (kayan mesaj) ===== */
.ticker-bar{
  display:flex; align-items:stretch; border-bottom:1px solid var(--border);
  background:var(--surface); overflow:hidden;
}
.ticker-label{
  background:var(--teal); color:#04211d; font-family:var(--font-mono); font-weight:600; font-size:0.72rem;
  padding:8px 14px; display:flex; align-items:center; letter-spacing:1px; white-space:nowrap;
}
.ticker-track-wrap{flex:1; overflow:hidden; position:relative;}
.ticker-track{
  display:inline-flex; gap:48px; white-space:nowrap; padding:8px 0;
  animation: scroll-left 28s linear infinite;
  will-change:transform;
}
.ticker-item{color:var(--text); font-size:0.9rem;}
.ticker-item .tu{color:var(--amber); font-weight:600;}
.ticker-empty{color:var(--text-muted); padding:0 14px;}
@keyframes scroll-left{
  from{transform:translateX(0);}
  to{transform:translateX(-50%);}
}
@media (prefers-reduced-motion: reduce){
  .ticker-track{animation:none; overflow-x:auto;}
}

/* ===== Hero (Ana Sayfa) ===== */
.hero{
  position:relative; border-radius:20px; overflow:hidden; padding:44px 32px;
  background:
    radial-gradient(circle at 15% 20%, rgba(255,138,61,0.16), transparent 45%),
    radial-gradient(circle at 85% 80%, rgba(51,217,196,0.14), transparent 45%),
    var(--surface);
  border:1px solid var(--border); margin-bottom:32px;
}
.hero-eyebrow{
  display:inline-flex; align-items:center; gap:8px; font-family:var(--font-mono); font-size:0.75rem;
  color:var(--amber); text-transform:uppercase; letter-spacing:1.5px; margin-bottom:14px;
}
.hero-eyebrow::before{ content:''; width:8px; height:8px; border-radius:50%; background:var(--teal); animation:pulse-dot 1.6s infinite; }
@keyframes pulse-dot{ 0%,100%{opacity:1;} 50%{opacity:0.3;} }
.hero h1{ font-family:var(--font-display); font-size:2.6rem; line-height:1.1; margin:0 0 14px; max-width:640px; }
.hero p{ color:var(--text-muted); font-size:1.05rem; max-width:560px; line-height:1.6; margin:0 0 24px; }
.hero-cta{ display:flex; gap:12px; flex-wrap:wrap; }
@media (max-width:600px){ .hero{ padding:30px 20px; } .hero h1{ font-size:1.9rem; } }

/* ===== Makale / Şarkı Kartları ===== */
.card-grid{ display:grid; gap:20px; grid-template-columns:repeat(auto-fill, minmax(260px,1fr)); }
.article-card{
  background:var(--surface); border:1px solid var(--border); border-radius:16px; overflow:hidden;
  display:flex; flex-direction:column; transition:transform .15s, border-color .15s;
}
.article-card:hover{ transform:translateY(-3px); border-color:var(--teal); }
.article-card .cover{
  height:150px; background:linear-gradient(135deg, var(--amber-dim), var(--surface-2));
  display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.article-card .cover img{ width:100%; height:100%; object-fit:cover; }
.article-card .body{ padding:18px; flex:1; display:flex; flex-direction:column; gap:8px; }
.article-card h3{ margin:0; font-family:var(--font-display); font-size:1.1rem; line-height:1.35; }
.article-card p{ color:var(--text-muted); font-size:0.88rem; margin:0; flex:1; }
.article-card .meta{ font-size:0.75rem; color:var(--text-muted); font-family:var(--font-mono); }

.song-card{
  background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:16px;
  display:flex; align-items:center; gap:14px;
}
.song-card .song-icon{
  width:44px; height:44px; border-radius:10px; flex-shrink:0;
  background:linear-gradient(135deg, var(--amber), var(--teal)); display:flex; align-items:center; justify-content:center;
  color:#1a0f05; font-weight:700; font-family:var(--font-display);
}
.song-card .song-info{ flex:1; min-width:0; }
.song-card .song-info .t{ font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.song-card .song-info .a{ color:var(--text-muted); font-size:0.82rem; }

.article-detail-cover{ width:100%; max-height:340px; object-fit:cover; border-radius:16px; margin-bottom:24px; }
.article-body{ line-height:1.8; font-size:1rem; }
.article-body h2{ font-family:var(--font-display); margin-top:32px; }
.app-view{max-width:1080px; margin:0 auto; padding:36px 28px 60px;}
.view-header{margin-bottom:28px;}
.view-header h1{font-family:var(--font-display); font-size:2rem; margin:0 0 6px;}
.view-header p{color:var(--text-muted); margin:0; max-width:620px;}

.card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  padding:24px;
}
.grid{display:grid; gap:18px;}
.grid-3{grid-template-columns:repeat(auto-fit, minmax(220px,1fr));}
.grid-2{grid-template-columns:repeat(auto-fit, minmax(280px,1fr));}

.stat-box{
  background:var(--surface-2); border:1px solid var(--border); border-radius:12px; padding:18px;
}
.stat-box .label{color:var(--text-muted); font-size:0.78rem; text-transform:uppercase; letter-spacing:0.6px;}
.stat-box .value{font-family:var(--font-mono); font-size:1.6rem; color:var(--amber); margin-top:4px;}

.tier-card{
  border-radius:16px; padding:22px; border:1px solid var(--border); background:var(--surface);
  display:flex; flex-direction:column; gap:10px; position:relative;
}
.tier-card .tier-dot{width:12px; height:12px; border-radius:50%; position:absolute; top:20px; right:20px;}
.tier-card h3{margin:0; font-family:var(--font-display); font-size:1.2rem;}
.tier-card .req{color:var(--text-muted); font-size:0.85rem;}
.tier-card ul{margin:8px 0; padding-left:18px; color:var(--text); font-size:0.9rem; line-height:1.6;}
.tier-card.current{border-color:var(--teal); box-shadow:0 0 0 1px var(--teal) inset;}

form.stack{display:flex; flex-direction:column; gap:14px; max-width:420px;}
label{font-size:0.85rem; color:var(--text-muted); display:block; margin-bottom:6px;}
input[type=text], input[type=email], input[type=password], textarea{
  width:100%; background:var(--bg); border:1px solid var(--border); border-radius:10px;
  padding:10px 12px; color:var(--text); font-size:0.95rem;
}
input:focus, textarea:focus, button:focus, a:focus{outline:2px solid var(--teal); outline-offset:2px;}
textarea{resize:vertical; min-height:80px;}
.form-error{color:var(--danger); font-size:0.85rem;}
.form-success{color:var(--teal); font-size:0.85rem;}
.char-count{font-size:0.78rem; color:var(--text-muted); text-align:right;}

/* Chat (DJ Zephyr) */
.chat-wrap{display:flex; flex-direction:column; height:520px; border:1px solid var(--border); border-radius:var(--radius); background:var(--surface); overflow:hidden;}
.chat-header{padding:16px 20px; border-bottom:1px solid var(--border); display:flex; align-items:center; gap:12px;}
.chat-avatar{width:38px; height:38px; border-radius:50%; background:linear-gradient(135deg, var(--amber), var(--teal)); flex-shrink:0;}
.chat-messages{flex:1; overflow-y:auto; padding:18px 20px; display:flex; flex-direction:column; gap:14px;}
.chat-msg{max-width:75%; padding:10px 14px; border-radius:14px; font-size:0.92rem; line-height:1.45;}
.chat-msg.user{align-self:flex-end; background:var(--amber); color:#1a0f05;}
.chat-msg.zephyr{align-self:flex-start; background:var(--surface-2); border:1px solid var(--border);}
.chat-input-row{display:flex; gap:10px; padding:14px 16px; border-top:1px solid var(--border);}
.chat-input-row input{flex:1;}

/* Admin */
.admin-tabs{display:flex; gap:6px; flex-wrap:wrap; margin-bottom:20px;}
.admin-tabs button{
  background:var(--surface); border:1px solid var(--border); color:var(--text-muted);
  padding:8px 14px; border-radius:10px; font-size:0.86rem;
}
.admin-tabs button.active{color:var(--text); border-color:var(--teal);}
table{width:100%; border-collapse:collapse; font-size:0.88rem;}
th,td{padding:10px 12px; border-bottom:1px solid var(--border); text-align:left;}
th{color:var(--text-muted); font-weight:600; font-size:0.78rem; text-transform:uppercase;}
tr:hover td{background:rgba(255,255,255,0.02);}
.badge{padding:3px 9px; border-radius:20px; font-size:0.74rem; font-weight:600;}
.badge.pending{background:#3a2d10; color:#ffcf7a;}
.badge.approved{background:#0d3a2e; color:var(--teal);}
.badge.rejected{background:#3a1015; color:var(--danger);}

/* ===== Footer ===== */
.site-footer{
  max-width:1080px; margin:0 auto; padding:20px 28px 40px; color:var(--text-muted); font-size:0.8rem;
  display:flex; flex-direction:column; gap:6px;
}
.legal-note{color:#6b7290; font-size:0.74rem; max-width:720px;}

/* ===== Kalıcı Player Dock ===== */
.player-dock{
  position:fixed; bottom:0; left:0; right:0; height:70px;
  background:var(--surface); border-top:1px solid var(--border);
  display:flex; align-items:center; gap:16px; padding:0 20px; z-index:100;
}
.play-btn{
  width:44px; height:44px; border-radius:50%; background:var(--amber); border:none;
  display:flex; align-items:center; justify-content:center; color:#1a0f05; flex-shrink:0;
}
.now-playing{display:flex; align-items:center; gap:12px; flex:1; min-width:0;}
.np-eq{display:flex; gap:3px; align-items:flex-end; height:22px; flex-shrink:0;}
.np-eq span{width:3px; background:var(--teal); border-radius:2px; height:6px;}
.np-eq.playing span{animation:eq 1s ease-in-out infinite;}
.np-eq span:nth-child(1){animation-delay:0s;}
.np-eq span:nth-child(2){animation-delay:.2s;}
.np-eq span:nth-child(3){animation-delay:.1s;}
.np-eq span:nth-child(4){animation-delay:.3s;}
@keyframes eq{0%,100%{height:6px;} 50%{height:20px;}}
.np-text{min-width:0;}
.np-title{font-weight:600; font-size:0.92rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.np-sub{color:var(--text-muted); font-size:0.78rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.np-status{font-family:var(--font-mono); font-size:0.75rem; color:var(--text-muted); flex-shrink:0;}
.volume-slider{width:90px; accent-color:var(--teal); flex-shrink:0;}

html, body{ overflow-x:hidden; max-width:100vw; }

@media (max-width:760px){
  .topbar{padding:12px 14px; gap:10px; flex-wrap:nowrap;}
  .main-nav{position:fixed; top:64px; left:0; right:0; background:var(--bg); border-bottom:1px solid var(--border);
    flex-direction:column; padding:10px; display:none; z-index:60;}
  .main-nav.open{display:flex;}
  .nav-toggle{display:block; order:5;}
  .volume-slider{display:none;}
  .brand{ order:1; flex-shrink:0; }
  .brand-name{ font-size:1.05rem; }
  .theme-toggle{ order:2; width:32px; height:32px; font-size:0.85rem; flex-shrink:0; }
  .auth-slot{ order:3; gap:6px; margin-left:auto; min-width:0; }
  .auth-slot .pts-pill{ font-size:0.68rem; padding:5px 8px; max-width:none; white-space:nowrap; }
  .auth-slot .btn{ padding:6px 10px; font-size:0.78rem; }
  .ticker-label{ font-size:0.62rem; padding:8px 8px; }
}

@media (max-width:400px){
  .auth-slot .pts-pill span.pts-username{ display:none; } /* çok dar ekranda sadece puanı göster */
}