/* ══════════════════════════════════════════════════════════════════
   PASLA — Tasarım Sistemi (base.css)
   Sahibi: G1 (Grafik Tasarım). Tokenlar burada sabitlenir; G2/G3 bu
   dosyadaki değişkenleri ve ortak sınıfları kullanır, sabit renk/ölçü
   yazmaz. Kullanım kılavuzu: ../../DESIGN.md
   ══════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@500;600;700;800&family=Inter:wght@400;500;600;700;800&display=swap');

/* ── Tokenlar ────────────────────────────────────────────────────── */
:root{
  /* Yüzeyler — koyu, mavimsi-antrasit saha ışığı zemini */
  --c-bg:        #0a0e16;
  --c-surface:   #121a26;
  --c-surface-2: #1a2432;
  --c-line:      #263142;

  /* Metin */
  --c-text:  #f4f7fb;
  --c-muted: #8b98ac;

  /* Tek güçlü vurgu — elektrik nane/turkuaz (yayın grafiği hissi) */
  --c-accent:     #2fe6c4;
  --c-accent-ink: #04231d; /* vurgu zemin üstü metin */

  /* Anlam renkleri — vurgudan bağımsız */
  --c-good: #3ddc84;
  --c-bad:  #ff5468;
  --c-warn: #ffb020;
  --c-gold: #ffcf4d;

  /* Yarıçap */
  --r-s: 10px;
  --r-m: 16px;
  --r-l: 24px;

  /* Boşluk ölçeği */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;

  /* Tipografi */
  --font-display: 'Oswald', 'Arial Narrow', sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Gölge */
  --shadow-1: 0 2px 10px rgba(0,0,0,.28);
  --shadow-2: 0 18px 48px rgba(0,0,0,.42);

  /* Hareket */
  --ease: cubic-bezier(.16,1,.3,1);

  /* Telegram gerçek görünür yükseklik (app.js viewportStableHeight'i buraya yazar) */
  --app-h: 100dvh;

  color-scheme: dark;
}

/* ── Sıfırlama ───────────────────────────────────────────────────── */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; -webkit-tap-highlight-color:transparent; }

html,body{ height:100%; }

body{
  font-family: var(--font-body);
  background: var(--tg-theme-bg-color, var(--c-bg));
  color: var(--tg-theme-text-color, var(--c-text));
  font-size: 16px;
  line-height: 1.5;
  height: var(--app-h, 100dvh);
  overflow: hidden;
  overscroll-behavior: none;
  -webkit-font-smoothing: antialiased;
}

button, input{ font: inherit; color: inherit; }
button{ touch-action: manipulation; background: none; border: none; }
button:focus-visible, input:focus-visible, a:focus-visible{
  outline: 2px solid var(--c-accent); outline-offset: 2px;
}
button:disabled{ opacity:.5; cursor:default; }
a{ color: inherit; text-decoration:none; }
img{ max-width:100%; display:block; }

h1,h2,h3{ font-family: var(--font-display); font-weight:700; letter-spacing:-.01em; }

/* Rakamlar her yerde sabit genişlikte hizalansın (skor, sayaç, puan) */
.nums, .score, .points, .countup{
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

::selection{ background: var(--c-accent); color: var(--c-accent-ink); }

/* ── Uygulama iskeleti ──────────────────────────────────────────── */
#app{
  height: var(--app-h, 100dvh);
  display: flex;
  flex-direction: column;
  max-width: 600px;
  margin: 0 auto;
  position: relative;
  background: var(--c-bg);
  overflow: hidden;
}

.topbar{
  flex-shrink: 0;
  display:flex; align-items:center; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  padding-top: calc(var(--sp-3) + env(safe-area-inset-top));
  border-bottom: 1px solid var(--c-line);
  background: var(--c-bg);
}
.topbar-title{
  flex:1; font-family: var(--font-display); font-size: 17px;
  font-weight:700; letter-spacing:.01em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.topbar-back{
  width:44px; height:44px; border-radius: var(--r-s);
  background: var(--c-surface); color: var(--c-text);
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.topbar-back:active{ background: var(--c-surface-2); }
.topbar-action{ flex-shrink:0; }

.screen-body{
  flex:1;
  overflow-y:auto;
  -webkit-overflow-scrolling: touch;
  padding: var(--sp-4);
  padding-bottom: calc(var(--sp-5) + env(safe-area-inset-bottom));
  display:flex; flex-direction:column; gap: var(--sp-4);
}

/* Ekran geçiş animasyonu (app.js .screen-enter ekler) */
.screen-enter{ animation: screenIn .28s var(--ease) both; }
@keyframes screenIn{
  from{ opacity:0; transform: translateY(10px) scale(.99); }
  to{ opacity:1; transform: translateY(0) scale(1); }
}

/* Alt gezinme çubuğu */
.bottom-nav{
  flex-shrink:0;
  display:flex;
  border-top: 1px solid var(--c-line);
  background: var(--c-bg);
  padding-bottom: env(safe-area-inset-bottom);
}
/* `hidden` özniteliği: aynı özgüllükteki .topbar/.bottom-nav display
   kuralı olmasaydı yazar sayfası UA stilini zaten ezerdi — burada
   açıkça geri kazandırıyoruz ki app.js'in navEl.hidden/topbarEl.hidden
   ataması gerçekten gizlesin. */
.topbar[hidden], .bottom-nav[hidden]{ display:none; }
.navitem{
  flex:1; display:flex; flex-direction:column; align-items:center; gap:3px;
  padding: 9px 4px 8px;
  color: var(--c-muted);
  font-size: 11px; font-weight:600;
  min-height:44px;
}
.navitem svg{ width:22px; height:22px; }
.navitem.active{ color: var(--c-accent); }
.navitem:active{ opacity:.7; }

/* Telegram dışında engellendi ekranı */
.blocked-screen{
  height: var(--app-h,100dvh); display:flex; align-items:center; justify-content:center;
  padding: var(--sp-5); text-align:center;
}
.blocked-card h1{ font-size:20px; margin-bottom: var(--sp-2); }
.blocked-card p{ color: var(--c-muted); font-size:14px; }

/* ── Ortak bileşenler ────────────────────────────────────────────── */

/* Butonlar */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap: var(--sp-2);
  min-height:48px; padding: 12px var(--sp-4);
  border-radius: var(--r-m);
  font-size:15px; font-weight:700;
  background: var(--c-surface-2); color: var(--c-text);
  border: 1px solid var(--c-line);
  transition: transform .12s var(--ease), background .15s var(--ease), border-color .15s var(--ease);
  cursor:pointer;
}
.btn:active{ transform: scale(.97); }
.btn-primary{
  background: var(--c-accent); color: var(--c-accent-ink); border-color: var(--c-accent);
}
.btn-primary:active{ background: color-mix(in srgb, var(--c-accent) 82%, black); }
.btn-ghost{
  background: transparent; border-color: var(--c-line); color: var(--c-muted);
}
.btn-ghost:active{ background: var(--c-surface); color: var(--c-text); }
.btn-block{ width:100%; }
.btn-sm{ min-height:38px; padding:8px 14px; font-size:13px; border-radius: var(--r-s); }

/* Kart */
.card{
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-l);
  padding: var(--sp-4);
}
.card-tap{ cursor:pointer; transition: transform .12s var(--ease), border-color .15s var(--ease); }
.card-tap:active{ transform: scale(.98); border-color: var(--c-accent); }

/* Çip / rozet metni */
.chip{
  display:inline-flex; align-items:center; gap:5px;
  padding: 4px 10px; border-radius:999px;
  font-size:12px; font-weight:700;
  background: var(--c-surface-2); color: var(--c-muted);
  border: 1px solid var(--c-line);
  white-space:nowrap;
}
.chip-accent{ background: color-mix(in srgb, var(--c-accent) 16%, transparent); color: var(--c-accent); border-color: color-mix(in srgb, var(--c-accent) 40%, transparent); }
.chip-good{ background: color-mix(in srgb, var(--c-good) 16%, transparent); color: var(--c-good); border-color: color-mix(in srgb, var(--c-good) 40%, transparent); }
.chip-bad{ background: color-mix(in srgb, var(--c-bad) 16%, transparent); color: var(--c-bad); border-color: color-mix(in srgb, var(--c-bad) 40%, transparent); }
.chip-gold{ background: color-mix(in srgb, var(--c-gold) 18%, transparent); color: var(--c-gold); border-color: color-mix(in srgb, var(--c-gold) 42%, transparent); }

/* Pill (büyük, tek değer — skor/puan/seri göstergesi) */
.pill{
  display:inline-flex; align-items:center; gap:6px;
  padding: 6px 14px; border-radius:999px;
  background: var(--c-surface-2); border:1px solid var(--c-line);
  font-size:14px; font-weight:800; color: var(--c-text);
}

/* Metin girişi */
.input{
  width:100%; background: var(--c-surface-2);
  border: 1.5px solid var(--c-line); border-radius: var(--r-m);
  padding: 13px 14px; font-size:16px; color: var(--c-text);
  transition: border-color .15s var(--ease);
}
.input::placeholder{ color: var(--c-muted); }
.input:focus{ border-color: var(--c-accent); outline:none; }
.input.is-err{ border-color: var(--c-bad); animation: shake .32s var(--ease); }
.input.is-ok{ border-color: var(--c-good); }

/* 4 şıklı / seçenek düğmesi (quiz vb.) */
.choice{
  display:flex; align-items:center; width:100%;
  min-height:52px; padding: 13px 16px; text-align:left;
  background: var(--c-surface); border:1.5px solid var(--c-line);
  border-radius: var(--r-m); font-size:15px; font-weight:600; color: var(--c-text);
  transition: border-color .15s var(--ease), background .15s var(--ease), transform .12s var(--ease);
}
.choice:active{ transform: scale(.98); }
.choice.is-correct{ border-color: var(--c-good); background: color-mix(in srgb, var(--c-good) 14%, var(--c-surface)); color: var(--c-good); animation: popGood .4s var(--ease) both; }
.choice.is-wrong{ border-color: var(--c-bad); background: color-mix(in srgb, var(--c-bad) 14%, var(--c-surface)); color: var(--c-bad); animation: shake .35s var(--ease); }
.choice.is-muted{ opacity:.45; }

/* İlerleme çubuğu (seviye/etap) */
.progress{
  height:8px; width:100%; border-radius:999px; background: var(--c-surface-2);
  overflow:hidden; border:1px solid var(--c-line);
}
.progress > i{
  display:block; height:100%; border-radius:999px;
  background: var(--c-accent);
  transition: width .5s var(--ease);
}

/* Avatar / baş harf yedeği */
.avatar{
  width:44px; height:44px; border-radius:50%; flex-shrink:0;
  object-fit:cover; border:1.5px solid var(--c-line);
  background: var(--c-surface-2);
}
.avatar-fallback{
  width:44px; height:44px; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background: var(--c-surface-2); border:1.5px solid var(--c-line);
  color: var(--c-accent); font-family: var(--font-display); font-weight:700; font-size:18px;
}

/* İskelet yükleyici */
.skeleton{
  position:relative; overflow:hidden;
  background: var(--c-surface-2);
  border-radius: var(--r-s);
  color:transparent !important;
}
.skeleton::after{
  content:''; position:absolute; inset:0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.06), transparent);
  animation: shimmer 1.4s infinite;
}

/* Toast */
.toast-stack{
  position:fixed; left:0; right:0; bottom: calc(var(--sp-4) + env(safe-area-inset-bottom));
  display:flex; flex-direction:column; align-items:center; gap: var(--sp-2);
  z-index: 500; pointer-events:none; padding: 0 var(--sp-4);
}
.toast{
  max-width: 340px; width:100%;
  background: var(--c-surface-2); border:1px solid var(--c-line);
  color: var(--c-text); font-size:13.5px; font-weight:600;
  padding: 12px 16px; border-radius: var(--r-m); box-shadow: var(--shadow-2);
  text-align:center;
  animation: toastIn .25s var(--ease) both;
}
.toast.good{ border-color: color-mix(in srgb, var(--c-good) 55%, transparent); color: var(--c-good); }
.toast.bad{ border-color: color-mix(in srgb, var(--c-bad) 55%, transparent); color: var(--c-bad); }
.toast.leaving{ animation: toastOut .2s var(--ease) both; }

/* Modal */
.modal-backdrop{
  position:fixed; inset:0; background: rgba(4,6,10,.78);
  backdrop-filter: blur(6px);
  display:flex; align-items:center; justify-content:center;
  z-index:600; padding: var(--sp-5);
  animation: fadeIn .18s var(--ease) both;
}
.modal-card{
  width:min(88vw,340px); background: var(--c-surface);
  border:1px solid var(--c-line); border-radius: var(--r-l);
  padding: var(--sp-5); text-align:center;
  box-shadow: var(--shadow-2);
  animation: popIn .28s var(--ease) both;
}
.modal-card h2{ font-size:19px; margin-bottom: var(--sp-2); }
.modal-card .modal-body{ color: var(--c-muted); font-size:14px; margin-bottom: var(--sp-4); line-height:1.55; }
.modal-actions{ display:flex; flex-direction:column; gap: var(--sp-2); }

/* ── Hareketler ─────────────────────────────────────────────────── */
@keyframes shimmer{ 100%{ transform: translateX(100%); } }
@keyframes shake{ 0%,100%{transform:translateX(0);} 20%{transform:translateX(-6px);} 60%{transform:translateX(6px);} 80%{transform:translateX(-3px);} }
@keyframes popGood{ 0%{transform:scale(.97);} 55%{transform:scale(1.02);} 100%{transform:scale(1);} }
@keyframes popIn{ from{ opacity:0; transform:scale(.85); } to{ opacity:1; transform:scale(1); } }
@keyframes fadeIn{ from{opacity:0;} to{opacity:1;} }
@keyframes toastIn{ from{ opacity:0; transform: translateY(10px); } to{ opacity:1; transform: translateY(0); } }
@keyframes toastOut{ from{ opacity:1; } to{ opacity:0; transform: translateY(6px); } }

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}

/* 360px genişlikte taşma olmasın diye küçük sıkılaştırma */
@media (max-width:360px){
  .screen-body{ padding: var(--sp-3); gap: var(--sp-3); }
  .card{ padding: var(--sp-3); }
}

/* ══════════════════════════════════════════════════════════════════
   Ana Ekran (home.js) — G1'in kendi ekranı, bileşenleri burada yaşar.
   ══════════════════════════════════════════════════════════════════ */
.home-topbar{ display:flex; align-items:center; justify-content:space-between; }
.brand-mark-row{ display:flex; align-items:center; gap:9px; }
.brand-word{ font-family: var(--font-display); font-size:19px; font-weight:700; letter-spacing:.02em; }
.icon-btn{ border-radius:50%; overflow:hidden; }
.icon-btn:active{ opacity:.75; }

.user-card-top{ display:flex; align-items:center; gap: var(--sp-3); margin-bottom: var(--sp-3); }
.user-card-info{ flex:1; min-width:0; }
.user-card-name{ font-family: var(--font-display); font-size:17px; font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.user-card-level{ font-size:12.5px; color: var(--c-muted); margin-top:2px; }
.user-card-streak{ display:flex; flex-direction:column; align-items:center; gap:1px; color: var(--c-warn); font-weight:800; font-size:15px; flex-shrink:0; }
.user-card-streak .icon-flame{ width:20px; height:20px; }
.user-card-streak .icon-flame svg{ width:100%; height:100%; }
.user-card-bottom{ display:flex; align-items:center; justify-content:space-between; margin-top: var(--sp-2); font-size:12.5px; color: var(--c-muted); }
.user-card-points{ display:flex; align-items:center; gap:5px; color: var(--c-gold); font-weight:700; }
.user-card-points svg{ width:15px; height:15px; }
.user-card-points b{ color: var(--c-gold); font-size:14px; }

.showcase-card{
  display:flex; flex-direction:column; gap:10px; text-align:left;
  padding: var(--sp-4); border-radius: var(--r-l);
  background: linear-gradient(150deg, color-mix(in srgb, var(--c-accent) 22%, var(--c-surface)), var(--c-surface) 65%);
  border: 1px solid color-mix(in srgb, var(--c-accent) 45%, var(--c-line));
}
.showcase-top{ display:flex; align-items:center; justify-content:space-between; }
.eyebrow{ font-size:10.5px; font-weight:800; letter-spacing:.12em; color: var(--c-accent); }
.icon-bolt{ width:22px; height:22px; color: var(--c-accent); }
.icon-bolt svg{ width:100%; height:100%; }
.showcase-title{ font-family: var(--font-display); font-size:34px; line-height:1; letter-spacing:-.01em; }
.showcase-desc{ font-size:13.5px; color: var(--c-muted); line-height:1.5; }
.showcase-bottom{ display:flex; align-items:center; justify-content:space-between; gap: var(--sp-2); margin-top:2px; }
.showcase-bottom .btn{ pointer-events:none; }
.showcase-bottom .btn svg{ width:15px; height:15px; }

.section-label{ font-size:11px; font-weight:800; letter-spacing:.12em; color: var(--c-muted); margin-top: var(--sp-1); }

.mode-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap: var(--sp-2); }
.mode-tile{
  display:flex; flex-direction:column; align-items:flex-start; gap:6px; text-align:left;
  padding: var(--sp-3) var(--sp-2); border-radius: var(--r-m);
  background: var(--c-surface); border:1px solid var(--c-line);
  min-height:132px;
}
.mode-tile-icon{ width:22px; height:22px; color: var(--c-accent); }
.mode-tile-icon svg{ width:100%; height:100%; }
.mode-tile-name{ font-family: var(--font-display); font-size:13.5px; font-weight:700; line-height:1.15; }
.mode-tile-desc{ font-size:10.5px; color: var(--c-muted); line-height:1.35; flex:1; }
.mode-tile-foot{ font-size:10.5px; color: var(--c-muted); font-weight:700; }
.mode-tile-foot .chip{ font-size:10px; padding:2px 7px; }

.rank-strip{ display:flex; align-items:center; gap: var(--sp-3); text-align:left; padding: var(--sp-3) var(--sp-4); }
.rank-strip-icon{ width:22px; height:22px; color: var(--c-gold); flex-shrink:0; }
.rank-strip-icon svg{ width:100%; height:100%; }
.rank-strip-text{ flex:1; display:flex; flex-direction:column; gap:2px; }
.rank-strip-text b{ font-size:13.5px; }
.rank-strip-text small{ font-size:11.5px; color: var(--c-muted); }
.rank-strip-arrow{ width:18px; height:18px; color: var(--c-muted); flex-shrink:0; }
.rank-strip-arrow svg{ width:100%; height:100%; }

@media (max-width:360px){
  .showcase-title{ font-size:29px; }
  .mode-tile{ min-height:120px; padding: var(--sp-2); }
}