*,*::before,*::after{box-sizing:border-box}
:root{
  --bg:#0b0f14; --kart:#141b24; --kart2:#1b2531; --cizgi:#243040;
  --yazi:#e8eef6; --soluk:#8b9bb0; --yesil:#22c55e; --kirmizi:#ef4444; --mavi:#3b82f6;
}
html,body{height:100%}
body{
  margin:0; background:radial-gradient(1200px 600px at 50% -10%,#16233a 0%,var(--bg) 60%);
  color:var(--yazi); font:400 16px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,sans-serif;
  -webkit-font-smoothing:antialiased; overscroll-behavior:none;
}
.ekran{display:none; min-height:100dvh; padding:18px; max-width:560px; margin:0 auto}
.ekran.aktif{display:flex; flex-direction:column}
.ortala{flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; text-align:center}

/* giriş */
#giris{align-items:center; justify-content:center}
.kart{width:100%; background:var(--kart); border:1px solid var(--cizgi); border-radius:22px; padding:26px 22px; box-shadow:0 24px 60px -30px #000}
.logo{font-size:34px; width:64px; height:64px; display:grid; place-items:center; border-radius:18px; background:linear-gradient(160deg,#1d4ed8,#0ea5e9); margin-bottom:16px}
h1{margin:0 0 6px; font-size:26px; letter-spacing:-.02em}
.alt{margin:0; color:var(--soluk); font-size:14px}
form{display:flex; flex-direction:column; gap:10px; margin-top:20px}
.alan{display:flex; flex-direction:column; gap:6px}
.alan span{font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--soluk); padding-left:2px}
.ipucu{margin:14px 0 0; font-size:12px; color:var(--soluk); opacity:.8}
input{width:100%; padding:14px 16px; border-radius:14px; border:1px solid var(--cizgi); background:#0e141c; color:var(--yazi); font-size:16px; outline:none}
input:focus{border-color:var(--mavi)}
.btn{border:0; border-radius:14px; padding:14px 18px; font-size:16px; font-weight:600; color:#fff; background:var(--kart2); cursor:pointer; transition:transform .08s,filter .15s}
.btn:active{transform:scale(.97)}
.btn.ana{background:linear-gradient(160deg,#2563eb,#0ea5e9)}
.btn.kucuk{padding:9px 14px; font-size:14px; border-radius:11px}
.btn.kucuk.ana{padding:9px 14px}
.btn:disabled{opacity:.5; cursor:default}
.hata{color:#fca5a5; font-size:14px; margin:12px 0 0}

/* üst bar */
.ust{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:8px}
.ben{display:flex; align-items:center; gap:9px; font-size:17px}
.nokta{width:9px; height:9px; border-radius:50%; background:var(--soluk); transition:background .2s}
.nokta.canli{background:var(--yesil); box-shadow:0 0 0 4px #22c55e22}

.uyari{display:flex; flex-direction:column; gap:8px; align-items:flex-start; background:#3a2418; border:1px solid #6b3f1d; color:#ffd8b0; padding:14px; border-radius:14px; font-size:14px; margin:10px 0}
.uyari b{color:#ffbe7a}

.baslik{font-size:13px; letter-spacing:.08em; text-transform:uppercase; color:var(--soluk); margin:20px 4px 10px; display:flex; align-items:center; gap:8px}
.sayi{background:var(--kart2); border-radius:20px; padding:1px 9px; font-size:12px; color:var(--yazi); letter-spacing:0}

.liste{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px}
.liste li{display:flex; align-items:center; gap:12px; background:var(--kart); border:1px solid var(--cizgi); border-radius:16px; padding:12px 14px}
.avatar{width:46px; height:46px; border-radius:50%; display:grid; place-items:center; font-weight:700; font-size:18px; color:#fff; background:linear-gradient(160deg,#334155,#1e293b); flex:none}
.avatar.buyuk{width:104px; height:104px; font-size:38px}
.avatar.kucuk{width:42px; height:42px; font-size:16px}
.li-ad{flex:1; min-width:0}
.li-ad b{display:block; font-size:16px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.li-ad span{font-size:12.5px; color:var(--soluk)}
.li-ad span.mesgul{color:#fbbf24}
.aramaBtn{width:44px; height:44px; border-radius:50%; border:0; background:var(--yesil); color:#05230f; font-size:19px; cursor:pointer}
.aramaBtn:disabled{background:var(--kart2); color:var(--soluk); cursor:default}
.bos{color:var(--soluk); font-size:14px; text-align:center; margin:26px 0 0}
.bos span{font-size:13px; opacity:.75}

.paylas{display:flex; gap:8px; margin-top:auto; padding-top:22px}
.paylas input{font-size:13px; color:var(--soluk)}

/* arama ekranları */
.dugmeIki{display:flex; gap:34px; margin-top:26px}
.btn.yuvarlak{width:74px; height:74px; border-radius:50%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; font-size:24px; padding:0; border:0}
.btn.yuvarlak span{font-size:11px; font-weight:600; opacity:.9}
.yesil{background:var(--yesil); color:#05230f}
.kirmizi{background:var(--kirmizi); color:#fff; animation:nabiz 1.8s infinite}
.gri{background:var(--kart2); color:var(--yazi); animation:none}
.gri.acik{background:#e8eef6; color:#0b0f14}
@keyframes nabiz{0%,100%{box-shadow:0 0 0 0 #ef444455}50%{box-shadow:0 0 0 16px #ef444400}}
.sure{font-variant-numeric:tabular-nums; font-size:22px; margin:0; color:var(--soluk)}
.ses{display:flex; gap:26px; margin-top:26px}
.ses .btn.kirmizi{animation:none}
.seviye{width:180px; height:5px; border-radius:4px; background:var(--kart2); overflow:hidden; margin-top:10px}
.seviye i{display:block; height:100%; width:0%; background:linear-gradient(90deg,#22c55e,#3b82f6); transition:width .1s}

.toast{position:fixed; left:50%; bottom:26px; transform:translateX(-50%); background:#e8eef6; color:#0b0f14; padding:11px 18px; border-radius:12px; font-size:14px; font-weight:600; box-shadow:0 14px 34px -12px #000; z-index:50}

/* çalan ekranı */
.etiket{margin:0 0 4px; font-size:13px; letter-spacing:.14em; text-transform:uppercase; color:var(--soluk)}
.avatar.calan{position:relative; animation:calHalka 1.6s ease-out infinite}
.avatar.calan::after{
  content:''; position:absolute; inset:-10px; border-radius:50%;
  border:2px solid #22c55e66; animation:halka 1.6s ease-out infinite;
}
@keyframes halka{0%{transform:scale(.9); opacity:.9}100%{transform:scale(1.5); opacity:0}}
@keyframes calHalka{0%,100%{box-shadow:0 0 0 0 #22c55e33}50%{box-shadow:0 0 0 14px #22c55e00}}
#caliyor .btn.kirmizi{margin-top:22px}