/* ══════════════════════════════════════════════════════════════════════
   TASARIM BELİRTEÇLERİ (v17)

   Renk sisteminde iki ayrı "vurgu" belirteci var ve bunları karıştırmamak
   önemli:

     --hiviz        VURGU METNİ rengi. Zemin üzerinde OKUNABİLİR olmalı.
                    Karanlık temada parlak limon, AÇIK temada koyu zeytin —
                    aksi hâlde beyaz üzerine parlak limon yazı okunmuyordu
                    (v16'daki açık temanın soluk görünmesinin asıl sebebi).

     --hiviz-fill   VURGU ZEMİNİ. Her iki temada da parlak kalır (marka
                    rengi, hi-viz yelek). Üzerine --hiviz-on-fill yazılır.

   Yani: metin için --hiviz, düğme zemini için --hiviz-fill.
   ══════════════════════════════════════════════════════════════════════ */
:root {
  /* Yüzeyler — sıfırdan yükselen katmanlar */
  --asphalt: #101214; /* sayfa zemini */
  --asphalt-2: #191d20; /* kart */
  --asphalt-3: #232829; /* yükseltilmiş yüzey (üzerine gelince, seçili) */

  /* Çizgiler */
  --line: #2b3135;
  --line-strong: #3b4248;

  /* Metin */
  --paper: #f1f0ec;
  --muted: #8f979e;
  --faint: #6b7378;

  /* Marka vurgusu */
  --hiviz: #cdf22a;
  --hiviz-dim: #93b019;
  --hiviz-fill: #cdf22a;
  --hiviz-on-fill: #101214;
  --hiviz-soft: rgba(205, 242, 42, 0.12);

  /* Anlam renkleri */
  --ember: #ff6b3d;
  --ember-soft: rgba(255, 107, 61, 0.12);
  /* Dolu turuncu buton üstündeki yazı: parlak turuncuda beyaz 2.8:1 veriyordu */
  --on-ember: #101214;
  /* Form alanı zemini: koyu temada karttan koyu, açık temada BEYAZ + belirgin çerçeve
     (açık temada gri alanlar devre dışı gibi görünüyordu) */
  --input-bg: #101214;
  --input-border: #2b3135;
  --ok: #7ed957;
  --warn: #f2c14e;
  --ink: #101214;

  /* Tipografi ölçeği */
  --text-2xs: 10px;
  --text-xs: 11px;
  --text-sm: 12px;
  --text-base: 14px;
  --text-md: 15px;
  --text-lg: 18px;
  --text-xl: 22px;
  --text-2xl: 28px;

  /* Boşluk ölçeği (4px tabanlı) */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px;
  --s5: 20px; --s6: 24px; --s8: 32px; --s10: 40px;

  /* Köşe yarıçapları */
  --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 20px; --r-full: 999px;

  /* Yükseklik (gölge) rampası */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.30);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.36);
  --shadow-lg: 0 16px 40px rgba(0,0,0,0.46);
  --ring: 0 0 0 3px rgba(205, 242, 42, 0.22);

  --ease: cubic-bezier(0.2, 0.7, 0.3, 1);
}

/* HTML'in "hidden" özniteliği, display tanımlayan HERHANGİ bir sınıf
   tarafından eziliyor (aynı özgüllük, sonra gelen kazanıyor). Bu yüzden
   .road-reminder gibi display:flex kullanan öğeler gizlenemiyordu.
   Bu kural, hidden'ın her zaman kazanmasını garanti eder. */
[hidden] { display: none !important; }



/* Açık tema.
   v16'da her şey neredeyse aynı açıklıktaydı (sayfa #f3f4f5, kart #ffffff),
   bu yüzden kartlar zeminden ayrılmıyor ve arayüz "solgun" görünüyordu.
   Burada sayfa zemini bilerek bir ton koyulaştırıldı, kartlar beyaz
   bırakıldı ve çizgiler belirginleştirildi — böylece gerçek bir katman
   hissi oluşuyor. */
[data-theme="light"] {
  --asphalt: #e9ecee;
  --asphalt-2: #ffffff;
  --asphalt-3: #f2f4f6;

  --line: #d5dbe0;
  --line-strong: #b9c2c9;

  --paper: #13171a;
  --muted: #5a656d;
  --faint: #7d878e;

  /* Vurgu METNİ koyu: beyaz üzerinde okunabilsin */
  --hiviz: #4f6d00;
  --hiviz-dim: #6b8f0a;
  /* Vurgu ZEMİNİ parlak kalır — marka rengi korunur */
  --hiviz-fill: #c2e81f;
  --hiviz-on-fill: #14180a;
  --hiviz-soft: rgba(79, 109, 0, 0.10);

  /* Beyaz kart üzerinde #d6431a 4.49 kontrast veriyordu — WCAG AA sınırının
     (4.5) kıl payı altı. Güneş altında okunması gereken bir uygulamada
     sınırda dolaşmanın anlamı yok; bir ton koyulaştırıldı (4.89). */
  --ember: #cc3f18;
  --ember-soft: rgba(204, 63, 24, 0.10);
  --on-ember: #ffffff;   /* koyu turuncuda beyaz 4.89:1 */
  --input-bg: #ffffff;
  --input-border: #b9c2c9;
  --ok: #3f8f2b;
  --warn: #9a6b00;
  --ink: #13171a;

  --shadow-sm: 0 1px 2px rgba(19,23,26,0.07);
  --shadow-md: 0 6px 18px rgba(19,23,26,0.10);
  --shadow-lg: 0 18px 44px rgba(19,23,26,0.16);
  --ring: 0 0 0 3px rgba(79, 109, 0, 0.20);
}

[data-theme="light"] .dial-btn {
  background: radial-gradient(circle at 50% 34%, #ffffff, #f4f6f7 72%);
  box-shadow:
  inset 0 0 0 1px var(--line),
  inset 0 -2px 6px rgba(19,23,26,0.05),
  var(--shadow-md);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--asphalt);
  color: var(--paper);
  font-family: 'Inter', sans-serif;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
}

.app {
  /* iOS Safari'de 100vh, adres çubuğu yüzünden ekrandan taşar. 100dvh
     (dynamic viewport height) bunu doğru hesaplar; desteklemeyen eski
     tarayıcılar için 100vh yedek olarak önce yazılıyor. */
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  /* Çentikli iPhone'larda üst çubuk çentiğin altında kalmasın, alt kısım da
     ana ekran çubuğuyla çakışmasın diye güvenli alan payları. */
  padding: calc(20px + env(safe-area-inset-top)) calc(20px + env(safe-area-inset-right))
  calc(20px + env(safe-area-inset-bottom)) calc(20px + env(safe-area-inset-left));
}

/* Üst çubuk: ince bir ayırıcı çizgiyle sayfadan ayrılır. Gezinme
   ikonları sessiz durur (muted), yalnızca dokunulduğunda öne çıkar —
   ekranın tek baskın öğesi gösterge olmalı, üst çubuk değil. */
.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s3);
  padding-bottom: var(--s3);
  margin-bottom: var(--s2);
  border-bottom: 1px solid var(--line);
}

.topbar button {
  color: var(--muted);
  border-radius: var(--r-sm);
  /* Eldivenle dokunulabilir hedef boyutu */
  min-width: 34px;
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: color 0.15s var(--ease), background 0.15s var(--ease);
}

.topbar button:hover { color: var(--paper); background: var(--asphalt-2); }
.topbar button:active { transform: scale(0.94); }

.brand {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: var(--text-lg);
  letter-spacing: 2.5px;
  color: var(--paper);
}

.pill {
  font-size: 12px;
  color: var(--muted);
  border: 1px solid var(--line);
  padding: 6px 12px;
  border-radius: 999px;
}

.stage {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
}

/* --- Gösterge (hero) -------------------------------------------------
   Ekranın tek baskın öğesi. Motosiklet devir saati mantığı: dış halkada
   tik işaretleri, içeride tek bir eylem. Kontroller bunun ALTINDA durur,
   üstünde değil — önce ne yapacağını gör, sonra ayar yap. */
.dial-wrap {
  position: relative;
  width: min(74vw, 300px);
  aspect-ratio: 1;
  margin: 4px auto 0;
}

.dial-ring {
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* v25 — Devir saati: 270°'lik yay (sol alttan başlar, tepeden geçip sağ
   altta biter), 0–8 rakamları, 7–8 kırmızı bölge. Değerler client.js'den. */
.gauge-tick {
  stroke: var(--line);
  stroke-width: 1.3;
  stroke-linecap: round;
}
.gauge-tick.major { stroke: var(--muted); stroke-width: 2.2; }
.gauge-tick.red { stroke: var(--ember); }
.gauge-num {
  fill: var(--muted);
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 9.5px;
}
.gauge-num.red { fill: var(--ember); }
.gauge-unit {
  fill: var(--muted);
  font-family: 'Inter', sans-serif;
  font-size: 6.5px;
  letter-spacing: 0.4px;
}

.dial-track {
  fill: none;
  stroke: var(--asphalt-2);
  stroke-width: 3;
  stroke-linecap: round;
}

/* Uzunluk: 2π·82·(270/360) ≈ 386.42 */
.dial-progress {
  fill: none;
  stroke: var(--hiviz);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 386.42;
  stroke-dashoffset: 386.42;
}

.dial-btn {
  position: absolute;
  inset: 17%;
  border-radius: 50%;
  border: none;
  /* Düz renk yerine hafif bir eğim: düğme düz bir daire değil, basılacak
     fiziksel bir tuş gibi dursun. */
  background:
  radial-gradient(circle at 50% 34%, var(--asphalt-3), var(--asphalt-2) 70%);
  color: var(--paper);
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: clamp(24px, 7vw, 32px);
  letter-spacing: 2.5px;
  cursor: pointer;
  box-shadow:
  inset 0 1px 0 rgba(255,255,255,0.05),
  inset 0 -2px 6px rgba(0,0,0,0.35),
  var(--shadow-md);
  transition: transform 0.15s var(--ease), box-shadow 0.25s var(--ease),
  background 0.25s var(--ease), color 0.25s var(--ease);
}

.dial-btn:hover:not(:disabled) { box-shadow: var(--shadow-lg); }
.dial-btn:active:not(:disabled) { transform: scale(0.98); }
.dial-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.dial-btn.searching { color: var(--hiviz); }

.dial-btn.live {
  background: var(--hiviz-fill);
  color: var(--ink);
  box-shadow: 0 0 0 1px var(--hiviz), 0 10px 40px rgba(201,243,29,0.22);
}

/* --- Kanal göstergesi ---
   Kutulu açılır menü değil; panodaki vites göstergesi gibi düz tipografi. */
.channel-display {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  position: relative;
}

.channel-select {
  appearance: none;
  -webkit-appearance: none;
  background: none;
  border: none;
  color: var(--paper);
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 17px;
  letter-spacing: 1.5px;
  text-align: center;
  text-align-last: center;
  padding: 6px 2px 6px 8px;
  cursor: pointer;
}

.channel-select:focus-visible { outline: 2px solid var(--hiviz); outline-offset: 4px; border-radius: 6px; }
.channel-caret { color: var(--muted); pointer-events: none; }

/* --- Telemetri şeridi ---
   Kart DEĞİL. Alt/üst ince çizgi arasında okunan gösterge değerleri —
   böylece butonlardan ve kartlardan görsel olarak ayrışır. */
.readout {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin-top: 4px;
  padding: 10px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  width: min(100%, 320px);
  margin-inline: auto;
}

.readout-item { display: flex; align-items: baseline; gap: 6px; }

.readout-value {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.5px;
  color: var(--muted);
}

.readout-sep { width: 1px; height: 14px; background: var(--line); }

/* --- Kontrol güvertesi (göstergenin altında) --- */
.control-deck {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-top: 18px;
}

.deck-toggle {
  background: none;
  border: none;
  color: var(--muted);
  font-size: 12px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
}
.deck-toggle:hover { color: var(--paper); }

/* Bölümlü seçici: iki ayrı buton değil, tek bir anahtar */
.segmented {
  display: inline-flex;
  background: var(--asphalt-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 3px;
}

.seg-btn {
  background: none;
  border: none;
  color: var(--muted);
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 600;
  padding: 8px 16px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.18s var(--ease), color 0.18s var(--ease);
}

.seg-btn.selected {
  background: var(--hiviz-fill);
  color: var(--ink);
}

/* Hafif, çerçevesiz ikincil butonlar — ana eylemle yarışmasınlar */
.ghost-btn {
  background: none;
  border: 1px solid var(--line);
  color: var(--paper);
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 500;
  padding: 8px 14px;
  border-radius: 10px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: border-color 0.15s var(--ease), color 0.15s var(--ease);
}
.ghost-btn:hover { border-color: var(--hiviz-dim); }

.code-row {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
}

.code-input {
  background: var(--asphalt-2);
  color: var(--paper);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 8px 12px;
  font-size: 13px;
  width: 104px;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
}
.code-input:focus { outline: none; border-color: var(--hiviz-dim); }

.road-reminder {
  color: var(--ember);
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 7px;
  justify-content: center;
}

.status {
  max-width: 280px;
  align-self: center;
  text-align: center;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
  margin: 0;
}

.peers {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  padding: 12px 0;
  min-height: 40px;
}

.peer-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--asphalt-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 8px 14px;
  font-size: 13px;
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.15s var(--ease);
}

.peer-chip[hidden] { display: none; }

.code-share-row {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-top: 8px;
}

.code-share-row[hidden] { display: none; }

.peer-chip .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--hiviz-fill);
}

.chip-avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--line);
}

.chip-avatar-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}

/* v20: Eskiden burada ".peer-chip button { padding:0; background:none;
   border:none; font-size:12px }" vardı. Özgüllüğü yüksek olduğu için kart
   içindeki TÜM butonları (arkadaş ekle, şikayet, değerlendirme, bağış)
   eldivenle basılamayan küçük yazılara çeviriyordu. Kaldırıldı. */

.controls {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: stretch;
  width: 100%;
  max-width: 360px;
  margin: 0 auto;
}

.controls[hidden] { display: none; }

.controls-secondary {
  display: flex;
  gap: 10px;
  justify-content: center;
}

/* Eldiven dostu dev buton — eldivenle sürüş sırasında bile tek seferde
   basılabilsin diye ana "Ayrıl" butonu diğerlerinden belirgin şekilde
   büyük ve ekranın önemli bir kısmını kaplıyor. */
.ctrl-end-big {
  width: 100%;
  max-width: none;
  flex: none;
  padding: 26px 10px;
  font-size: 20px;
  border-radius: 20px;
  letter-spacing: 0.5px;
}

/* Peer kartındaki Şikayet/Engelle/Arkadaş Ekle butonları da eldivenle
   basılabilecek kadar büyük dokunma alanına sahip olsun */
.friend-btn, .block-btn, .report-btn {
  padding: 10px 14px;
  font-size: 13px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--asphalt);
  color: inherit;
  cursor: pointer;
}
.report-btn { color: var(--ember); border-color: var(--ember); }

.ctrl-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  flex: 1;
  max-width: 200px;
  background: var(--asphalt-2);
  border: 1px solid var(--line);
  color: var(--paper);
  padding: 13px var(--s4);
  border-radius: var(--r-md);
  font-family: 'Inter', sans-serif;
  font-size: var(--text-base);
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: background 0.15s var(--ease), border-color 0.15s var(--ease),
  transform 0.12s var(--ease), box-shadow 0.15s var(--ease),
  color 0.15s var(--ease);
}

.ctrl-btn:hover:not(:disabled) {
  background: var(--asphalt-3);
  border-color: var(--line-strong);
}

.ctrl-btn:active:not(:disabled) { transform: translateY(1px); box-shadow: none; }

.ctrl-btn:disabled { opacity: 0.45; cursor: not-allowed; }

.ctrl-btn:focus-visible { outline: none; box-shadow: var(--ring); }

/* Birincil eylem: dolu vurgu zemini */
.ctrl-btn.ctrl-next {
  background: var(--hiviz-fill);
  border-color: var(--hiviz-fill);
  color: var(--hiviz-on-fill);
  font-weight: 700;
}

.ctrl-btn.ctrl-next:hover:not(:disabled) {
  filter: brightness(1.06);
  background: var(--hiviz-fill);
  border-color: var(--hiviz-fill);
}

/* .ctrl-end (hesap silme) artık dolu turuncu değil, çerçeveli uyarı
   butonu — aşağıdaki "Tehlikeli eylem" bölümünde tanımlı. Buradaki eski
   dolu hâli, yeni kuralın rengini ezmeyip arka planı turuncu bıraktığı
   için yazı okunmaz olmuştu. */

.ctrl-btn.selected {
  background: var(--hiviz-fill);
  border-color: var(--hiviz);
  color: var(--ink);
  box-shadow: 0 4px 16px rgba(201,243,29,0.25);
}

.ctrl-btn.selected:hover:not(:disabled) {
  border-color: var(--hiviz);
}

/* Onboarding */
.onboard {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 18px;
  max-width: 420px;
  margin: 0 auto;
  width: 100%;
}

.onboard-title {
  font-family: 'Rajdhani', sans-serif;
  font-size: 26px;
  font-weight: 700;
  margin: 0 0 4px;
}

.check-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--paper);
  cursor: pointer;
}

.check-row input {
  width: 20px;
  height: 20px;
  accent-color: var(--hiviz);
  margin-top: 2px;
  flex-shrink: 0;
}

.check-row a {
  color: var(--hiviz);
}

.onboard-note {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.6;
  border-top: 1px solid var(--line);
  padding-top: 14px;
}

/* v36: Bu yazılar panelden değiştirilebiliyor — panele uzun bir adres ya da
   boşluksuz bir metin yapıştırılsa bile ekrandan taşmasın */
.onboard [data-i18n="legalLiabilityNote"],
.onboard [data-i18n="termsCheckedLabel"],
.onboard .onboard-note,
#openTermsBtn {
  overflow-wrap: anywhere;
  min-width: 0;
}

/* .onboard dikey ortalamak için flex:1 kullanır — içindeki HERHANGİ bir
   .ctrl-btn de flex:1'i miras alıp tüm boş alanı kaplayabilir (dev buton
   hatası). Bunu tek tek yamalamak yerine kökten engelliyoruz. */
.onboard > .ctrl-btn {
  flex: none;
}

#continueBtn {
  max-width: none;
  margin-top: 8px;
}

#continueBtn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Profil */
.profile-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 420px;
  margin: 0 auto;
  width: 100%;
  padding-bottom: 24px;
}

.profile-form[hidden] { display: none; }

.avatar-picker {
  display: flex;
  align-items: center;
  gap: 16px;
}

.avatar-preview {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--asphalt-2);
  border: 2px solid var(--line);
  object-fit: cover;
  box-shadow: var(--shadow-sm);
}

.field label {
  display: block;
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 6px;
}

.field input[type="text"],
.field input[type="password"],
.field textarea,
.field select {
  width: 100%;
  background: var(--asphalt-2);
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--paper);
  padding: 12px;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  transition: border-color 0.15s var(--ease), box-shadow 0.15s var(--ease);
}

.field input[type="text"]:focus,
.field input[type="password"]:focus,
.field textarea:focus,
.field select:focus {
  outline: none;
  border-color: var(--hiviz-dim);
  box-shadow: 0 0 0 3px rgba(201,243,29,0.15);
}

.field textarea { resize: vertical; min-height: 70px; }

.photo-row {
  display: flex;
  gap: 10px;
}

.photo-slot {
  width: 76px;
  height: 76px;
  border-radius: 10px;
  border: 1px dashed var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  color: var(--muted);
  font-size: 11px;
  cursor: pointer;
  position: relative;
  transition: border-color 0.15s var(--ease), color 0.15s var(--ease);
}

.photo-slot:hover {
  border-color: var(--hiviz-dim);
  color: var(--hiviz-dim);
}

.photo-slot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.toggle-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--asphalt-2);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px 14px;
  box-shadow: var(--shadow-sm);
}

.switch {
  position: relative;
  width: 44px;
  height: 24px;
}

.switch input { opacity: 0; width: 0; height: 0; }

.switch-track {
  position: absolute;
  inset: 0;
  background: var(--line);
  border-radius: 999px;
  transition: 0.2s;
}

.switch-track::before {
  content: '';
  position: absolute;
  width: 18px;
  height: 18px;
  left: 3px;
  top: 3px;
  background: var(--paper);
  border-radius: 50%;
  transition: 0.2s;
}

.switch input:checked + .switch-track {
  background: var(--hiviz-fill);
}

.switch input:checked + .switch-track::before {
  transform: translateX(20px);
  background: var(--ink);
}

.save-msg {
  font-size: 13px;
  color: var(--hiviz);
  min-height: 18px;
}

/* Bağış sayfası */
.donate-box {
  max-width: 420px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.donate-item {
  background: var(--asphalt-2);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 16px;
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.15s var(--ease);
}

.donate-item .label {
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 6px;
}

.donate-item .value {
  font-family: 'Rajdhani', sans-serif;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 1px;
  word-break: break-all;
}

/* Profil görüntüleme modalı (friends.html) */
.modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 10;
  align-items: center;
  justify-content: center;
  padding: 20px;
  box-sizing: border-box;
}

.modal-box {
  background: var(--asphalt-2);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 20px;
  max-width: 360px;
  width: 100%;
  max-height: 85vh;
  overflow-y: auto;
  box-sizing: border-box;
  box-shadow: var(--shadow-lg);
  animation: modal-in 0.2s var(--ease);
}

@keyframes modal-in {
  from { opacity: 0; transform: translateY(8px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.modal-photo {
  width: 100%;
  max-height: 220px;
  object-fit: cover;
  border-radius: 10px;
  margin-top: 8px;
  display: block;
}

/* Kurumsal tanıtım sayfası */
.landing {
  max-width: 720px;
  margin: 0 auto;
}

.landing-hero {
  padding: 48px 0 32px;
  text-align: center;
}

.landing-eyebrow {
  display: inline-block;
  font-size: 11px;
  letter-spacing: 3px;
  color: var(--hiviz);
  border: 1px solid var(--hiviz-dim);
  border-radius: 999px;
  padding: 6px 14px;
  margin-bottom: 20px;
}

.landing-h1 {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 40px;
  line-height: 1.1;
  margin: 0 0 16px;
}

.landing-sub {
  color: var(--muted);
  font-size: 15px;
  line-height: 1.6;
  max-width: 480px;
  margin: 0 auto 28px;
}

.landing-cta {
  display: inline-block;
  background: var(--hiviz-fill);
  color: var(--ink);
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 1px;
  padding: 16px 36px;
  border-radius: 999px;
  text-decoration: none;
  box-shadow: 0 0 40px rgba(201,243,29,0.25);
}

.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  margin: 40px 0;
}

.feature-card {
  background: var(--asphalt-2);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 20px;
}

.feature-icon { font-size: 24px; margin-bottom: 10px; display: block; }

.feature-title {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 16px;
  margin-bottom: 6px;
}

.feature-desc { font-size: 13px; color: var(--muted); line-height: 1.5; }

.landing-section-title {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 22px;
  margin: 40px 0 16px;
}

.landing-footer {
  border-top: 1px solid var(--line);
  margin-top: 48px;
  padding: 24px 0 40px;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: center;
  font-size: 13px;
}

.landing-footer a { color: var(--muted); text-decoration: none; }
.landing-footer a:hover { color: var(--paper); }

/* --- İkon sistemi --- */
/* Tüm ikonlar currentColor kullanır: bulunduğu yerin metin rengini alır.
   Bu sayede tema değişiminde, hover'da, disabled durumda ayrı kural
   yazmaya gerek kalmaz. */
.ico {
  width: 1.25em;
  height: 1.25em;
  flex: none;
  vertical-align: -0.24em;
  color: inherit;
}

.ico-sm { width: 1em; height: 1em; }
.ico-lg { width: 1.6em; height: 1.6em; }

/* Üst çubuktaki gezinme ikonları */
.topbar .ico { width: 21px; height: 21px; vertical-align: middle; }

/* Butonlarda ikon + metin hizası */
.ctrl-btn .ico { margin-right: 6px; }

/* --- İkon sistemi --------------------------------------------------- */
/* Kontur tabanlı, currentColor ile bulunduğu yerin rengini alır.
   Gösterge paneli mantığı: dolgu yok, kalın kontur, yuvarlak uç. */
.ico {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: -0.18em;
  flex: none;
}

/* Metinle yan yana kullanıldığında nefes payı */
.ico + span,
span + .ico { margin-left: 6px; }

/* Üst çubuktaki gezinme ikonları */
.topbar .ico { stroke-width: 1.8; }

/* Rozet renkleri — madalya ikonu tek, rengi dereceye göre değişir */
.ico-bronze { color: #c87d3f; }
.ico-silver { color: #b8bec6; }
.ico-gold { color: #e0b33a; }

/* Bağlantı kalitesi göstergesi: dolu çubuk sayısı değil, renk değişir */
.ico-signal-good { color: var(--hiviz); }
.ico-signal-mid { color: #e0b33a; }
.ico-signal-bad { color: var(--ember); }

/* --- Görüşme sırasında sadeleşme ---
   Sürerken ekrana bakılmaması gereken bir uygulamada, görüşme başlayınca
   ekranda sadece iş yapan şeyler kalmalı. Kanal/oda/kod ayarları ve bağış
   sekmesi gizlenir; geriye büyük "Ayrıl" ve iki kontrol kalır. */
body.in-call .control-deck,
body.in-call #gasBannerTab { display: none !important; }

/* Kanal göstergesi üst çubuğa yapışmasın */
.channel-display { margin-top: 10px; }

/* Grup kodu alanı: yer tutucu metin kesilmesin */
.code-input { width: 120px; font-size: 12px; letter-spacing: 0.5px; }
.code-input::placeholder { letter-spacing: 0; font-family: 'Inter', sans-serif; font-weight: 400; }

/* --- Devir saati ibresi ---------------------------------------------
   v25: Açısı ve dolum yayı client.js'de TEK bir değerden çiziliyor (ikisi
   hep aynı yeri gösterir). Aranırken motorun gaz verip bırakması gibi
   hareket eder: hızlı yükseliş, kısa geri tepme, ikinci gaz, yavaş düşüş.
   Burada CSS transform KULLANILMAMALI: SVG'nin transform özniteliğini ezer. */
.dial-needle-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 2; /* butonun üstünde çizilsin, yoksa arkada kalıyor */
}

.dial-needle {
  fill: var(--muted);
  transition: fill 0.3s var(--ease);
}
.dial-wrap.is-searching .dial-needle,
.dial-wrap.is-live .dial-needle {
  fill: var(--hiviz);
  filter: drop-shadow(0 0 5px rgba(201,243,29,0.55));
}


/* ══════════════════════════════════════════════════════════════════════
   v16 — Genişletilmiş profil formu
   ══════════════════════════════════════════════════════════════════════ */

/* Form artık uzun. Alanları başlıklı bölümlere ayırmak, tek uzun listede
   kaybolmayı önlüyor. */
.form-section {
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: var(--asphalt-2);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 16px;
  box-shadow: var(--shadow-sm);
}

.section-title {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--hiviz);
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
}

/* Bölüm kutusu zaten arka plan verdiği için, içindeki alanlar bir ton
   daha koyu olmalı — yoksa sınırları kaybolur. */
.form-section .field input[type="text"],
.form-section .field input[type="password"],
.form-section .field textarea,
.form-section .field select {
  background: var(--asphalt);
}

/* Bölüm kutusunun İÇİNDEKİ anahtar satırı kendi kartını çizmesin —
   kutu içinde kutu amatör duruyordu. Burada düz bir satır olarak kalır. */
.form-section .toggle-row {
  background: none;
  border: none;
  box-shadow: none;
  border-radius: 0;
  padding: 0;
  gap: var(--s4);
}

/* Uzun açıklama metni anahtarı ekran dışına itiyordu: metin sütunu
   daralabilsin, anahtar küçülmesin. */
.toggle-row > div:first-child { min-width: 0; }
.toggle-row .switch { flex: none; }

.char-count {
  float: right;
  font-size: 11px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

/* --- Profil doluluk göstergesi --- */
.completeness {
  background: var(--asphalt-2);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px 14px;
}

.completeness-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 8px;
}

.completeness-pct {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 16px;
  color: var(--paper);
  font-variant-numeric: tabular-nums;
}

.completeness-track {
  height: 5px;
  background: var(--asphalt-3);
  border-radius: 999px;
  overflow: hidden;
}

.completeness-fill {
  height: 100%;
  width: 0;
  background: var(--hiviz-fill);
  border-radius: 999px;
  transition: width 0.4s var(--ease);
}

/* --- Seçilebilir etiketler (sürüş tarzı) ---
   Açılır menü yerine etiket kullanmanın sebebi: çoklu seçim açılır menüsü
   mobilde kullanılamaz durumda, etiketler ise tek dokunuşla çalışıyor. */
.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.chip {
  background: var(--asphalt);
  border: 1px solid var(--line);
  color: var(--muted);
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 500;
  padding: 8px 13px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s var(--ease), color 0.15s var(--ease), border-color 0.15s var(--ease);
}

.chip:hover { border-color: var(--hiviz-dim); color: var(--paper); }

.chip-on {
  background: var(--hiviz-fill);
  border-color: var(--hiviz);
  color: var(--ink);
  font-weight: 600;
}

/* --- Ön ekli giriş alanı (@kullaniciadi) --- */
.prefix-input {
  display: flex;
  align-items: center;
  background: var(--asphalt);
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  transition: border-color 0.15s var(--ease), box-shadow 0.15s var(--ease);
}

.prefix-input:focus-within {
  border-color: var(--hiviz-dim);
  box-shadow: 0 0 0 3px rgba(201,243,29,0.15);
}

.prefix-input .prefix {
  padding: 0 4px 0 12px;
  color: var(--muted);
  font-size: 14px;
}

.prefix-input input[type="text"] {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  padding-left: 2px;
}

/* --- Fotoğraf kaldırma düğmesi --- */
.photo-cell { position: relative; }

.photo-remove {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--asphalt-3);
  border: 1px solid var(--line);
  color: var(--paper);
  font-size: 13px;
  line-height: 1;
  padding: 0;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
}

.photo-remove:hover { border-color: var(--ember); color: var(--ember); }


/* ══════════════════════════════════════════════════════════════════════
   LOGO (v26)
   Eskiden logo durmadan "nefes alıyor", arkasındaki ışık halkası da
   durmadan büyüyüp küçülüyordu — zayıf telefonda sayfa açık kaldıkça
   boşuna işlemci/ekran kartı harcıyordu. Artık logo sayfa açılınca BİR KEZ
   küçükten büyüyerek belirir ve durur. Yalnızca transform + opacity
   oynatılıyor: bunlar ekran kartında birleştirilir, sayfanın geri kalanını
   yeniden çizdirmez; ana iş parçacığı meşgulken bile takılmaz.
   v35: Logo kaynağı yeniden icon.svg — ama artık TAMAMEN VEKTÖR (13 KB).
   Eskisi 319 KB'tı ve içinde 512 px'lik gömülü bir resim vardı; o yüzden
   PNG'ye geçilmişti. PNG'ler de o bulanık resimden üretildiği için yüksek
   çözünürlüklü telefonlarda logo tırtıklı görünüyordu. Vektör her ekranda
   keskin, çözmesi de ucuz.
   ══════════════════════════════════════════════════════════════════════ */
.logo-stage {
  position: relative;
  width: 132px;
  height: 132px;
  margin: 4px auto 10px;
  display: grid;
  place-items: center;
}

/* Arkadaki yumuşak ışık: SABİT. Yalnızca girişte bir kez belirir. */
.logo-glow {
  position: absolute;
  inset: -10%;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, rgba(201,243,29,0.24), rgba(201,243,29,0) 66%);
  pointer-events: none;
  animation: logo-fade-in 0.7s ease-out both;
}

.logo-mark {
  position: relative;
  display: block;
  width: 116px;
  height: 116px;
  border-radius: 24%;
  box-shadow: 0 10px 28px rgba(0,0,0,0.28);
  transform-origin: center;
}

/* Tek seferlik giriş: küçükten büyüyerek belirir. Yaylanma/sekme yok,
   sonsuz tekrar yok — hızlı başlar, yumuşak durur. */
.logo-mark.logo-enter {
  animation: logo-grow-in 0.52s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

@keyframes logo-grow-in {
  from { transform: scale(0.55); opacity: 0; }
  to   { transform: scale(1);    opacity: 1; }
}

@keyframes logo-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Üst çubuktaki logo — her sayfada aynı sınıf.
   Eskiden 18 px (telefonda 26 px) idi; "logo çok küçük" geri bildirimiyle
   büyütüldü. Köşe yuvarlaklığı yüzde olarak verildi ki açılış ekranındaki
   büyük logo buraya küçülerek uçtuğunda köşeler birebir otursun. */
.topbar-logo {
  display: block;
  flex: none;
  width: 32px;
  height: 32px;
  margin-right: 8px;
  border-radius: 24%;
}


/* --- Açılış ekranı (splash) ---
   Uygulama açılırken kısa bir an görünür. Zemin ayrı bir katmanda
   (.splash-bg) ki logo üst çubuğa uçarken zemin solabilsin ama logo
   solmasın. .is-gone yedek yol: her şey birlikte solar (animasyon
   desteklenmiyorsa ya da hareket azaltma tercihinde). */
.splash {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: opacity 0.45s var(--ease), visibility 0.45s var(--ease);
}

.splash-bg {
  position: absolute;
  inset: 0;
  background: var(--asphalt);
}

.splash .logo-stage {
  width: clamp(152px, 46vw, 212px);
  height: clamp(152px, 46vw, 212px);
  margin: 0 auto;
}

.splash .logo-mark {
  width: clamp(132px, 40vw, 184px);
  height: clamp(132px, 40vw, 184px);
}

.splash-brand {
  position: relative; /* zemin katmanının üstünde çizilsin */
  font-size: 22px;
  /* v29: Sabit satır yüksekliği. Yazı tipi yüklenip yedek yazı tipinin
     yerine geçtiğinde (font-display: swap) satır yüksekliği değişiyor ve
     ortalanmış logo birkaç piksel kayıyordu (hareket azaltma tercihinde
     bile). Kutu artık yazı tipinden bağımsız. */
  line-height: 28px;
  height: 28px;
  white-space: nowrap;
  /* v36: harf aralığı son harften sonra da eklenir; baştan aynı kadar
     boşluk bırakınca "Teker Daş" logonun tam ortasına gelir */
  text-indent: 2.5px;
  color: var(--paper);
  opacity: 0;
  animation: splash-brand-in 0.5s var(--ease) 0.25s forwards;
}

@keyframes splash-brand-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

.splash.is-gone {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* Hareketi azaltılmış tercihinde logo sabit durur — bu bir süs tercihi
   değil, bazı kullanıcılar için baş dönmesi/mide bulantısı sebebidir. */
@media (prefers-reduced-motion: reduce) {
  .logo-mark.logo-enter,
  .logo-glow,
  .splash-brand { animation: none; }
  .splash-brand { opacity: 1; }
}


/* --- Bağış tutarı seçimi (v16.2) --- */
.amount-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
  gap: 8px;
}

.amount-btn {
  background: var(--asphalt-2);
  border: 1px solid var(--line);
  color: var(--paper);
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 18px;
  padding: 14px 8px;
  border-radius: 12px;
  cursor: pointer;
  transition: background 0.15s var(--ease), color 0.15s var(--ease), border-color 0.15s var(--ease);
}

.amount-btn:hover { border-color: var(--hiviz-dim); }

.amount-btn.selected {
  background: var(--hiviz-fill);
  border-color: var(--hiviz);
  color: var(--ink);
}


/* ══════════════════════════════════════════════════════════════════════
   v17 — Emojilerin yerini alan bileşenler
   ══════════════════════════════════════════════════════════════════════ */

/* Bağlantı kalitesi:yerine sinyal ikonu + renk.
   Küçük boyutta renkli daire emojisi lekeye dönüyordu; çubuk ikonu hem
   biçimden hem renkten okunuyor (renk körlüğüne de daha dayanıklı). */
.quality { display: inline-flex; align-items: center; line-height: 0; }
.quality-good { color: var(--ok); }
.quality-ok { color: var(--warn); }
.quality-poor { color: var(--ember); }

/* Puanlama düğmeleri */
.rate-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  flex: none;
  background: var(--asphalt-3);
  border: 1px solid var(--line);
  border-radius: var(--r-full);
  color: var(--muted);
  cursor: pointer;
  transition: color 0.15s var(--ease), border-color 0.15s var(--ease),
  background 0.15s var(--ease), transform 0.12s var(--ease);
}

.rate-btn:hover { color: var(--paper); border-color: var(--line-strong); }
.rate-btn:active { transform: scale(0.92); }
#rateUp:hover { color: var(--ok); border-color: var(--ok); }
#rateDown:hover { color: var(--ember); border-color: var(--ember); }

/* Rozet kademeleri: madalya emojileri yerine tek ikon + kademe rengi */
.badge-bronze { color: #c07a3e; }
.badge-silver { color: #adb5bd; }
.badge-gold { color: #e3b341; }

/* Durum satırı (yönetici panelindeki güvenlik özeti) */
.status-row {
  display: flex;
  gap: var(--s2);
  align-items: flex-start;
  margin-bottom: var(--s2);
  font-size: var(--text-base);
  line-height: 1.5;
}

.status-row .ico { margin-top: 2px; flex: none; }
.status-row.is-ok .ico { color: var(--ok); }
.status-row.is-warn .ico { color: var(--warn); }


/* ══════════════════════════════════════════════════════════════════════
   v17 — Genel arayüz rötuşları
   ══════════════════════════════════════════════════════════════════════ */

/* Form alanları: odaklanınca belirgin bir halka. Eskiden yalnızca kenarlık
   rengi değişiyordu, sürüş eldiveniyle hangi alanda olduğun belli olmuyordu. */
.field input[type="text"]:focus,
.field input[type="password"]:focus,
.field textarea:focus,
.field select:focus {
  outline: none;
  border-color: var(--hiviz-dim);
  box-shadow: var(--ring);
}

.field label {
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: 0.2px;
}

/* İkon + metin taşıyan butonlarda ikon metinle aynı hizada dursun */
.ctrl-btn .ico, .ghost-btn .ico, .tab-btn .ico { flex: none; }

/* İkincil butonlar */
.ghost-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  border-radius: var(--r-sm);
  transition: border-color 0.15s var(--ease), color 0.15s var(--ease),
  background 0.15s var(--ease);
}

.ghost-btn:hover { border-color: var(--line-strong); background: var(--asphalt-2); }

/* Tehlikeli eylem */
.ctrl-end {
  color: var(--ember);
  border-color: color-mix(in srgb, var(--ember) 45%, var(--line));
}

.ctrl-end:hover:not(:disabled) {
  background: var(--ember-soft);
  border-color: var(--ember);
}

/* Durum metni */
.status {
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--muted);
}

/* Telemetri şeridi */
.readout-value {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  letter-spacing: 1.2px;
  font-variant-numeric: tabular-nums;
}

/* Kanal kilidi notu: bağırmayan, tek satırlık bir rozet */
#channelUnlockNote {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  max-width: 340px;
  margin: 0 auto;
  padding: var(--s2) var(--s3);
  background: var(--hiviz-soft);
  border: 1px solid color-mix(in srgb, var(--hiviz) 30%, transparent);
  border-radius: var(--r-full);
  font-size: var(--text-xs);
  line-height: 1.45;
  color: var(--hiviz);
  text-align: left;
}


/* Üst çubuk taşma koruması.
   v16'da düğmeler dar ekranda sığmayıp sonuncusu (bağış) ekran dışına
   taşıyordu — düğme görünmüyor ama tıklanabilir de değildi. Marka yazısı
   artık daralabiliyor ve gerekirse kısalıyor; düğmeler asla taşmıyor. */
.topbar { gap: var(--s2); min-width: 0; }
.topbar > span { min-width: 0; }
.topbar .brand {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.topbar > span:last-child { flex: none; gap: 10px !important; }

@media (max-width: 380px) {
  .topbar .brand { font-size: var(--text-base); letter-spacing: 1.5px; }
  .topbar button { min-width: 30px; min-height: 30px; }
}

/* ─────────────────────────────────────────────────────────────────────
   AYARLAR LİSTESİ
   Altı tane aynı boyda koyu kutu üst üste dizmek yerine, telefon
   ayarlarındaki gibi tek bir kart içinde satırlar. Nereye gideceği
   soldaki simgeden, tıklanabilir olduğu sağdaki oktan anlaşılıyor.
   ───────────────────────────────────────────────────────────────────── */
.nav-list {
  display: flex;
  flex-direction: column;
  background: var(--asphalt-2);
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  color: var(--paper);
  text-decoration: none;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 500;
  background: none;
  border: none;
  border-bottom: 1px solid var(--line);
  width: 100%;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s var(--ease);
  /* Eldivenle basılabilsin */
  min-height: 52px;
}

.nav-item:last-child { border-bottom: none; }
.nav-item:hover { background: var(--asphalt-3, rgba(255,255,255,0.04)); }
.nav-item:focus-visible { outline: none; box-shadow: var(--ring); }

.nav-item > .ico {
  width: 20px;
  height: 20px;
  flex: none;
  color: var(--hiviz);
}

.nav-item .nav-label { flex: 1; min-width: 0; }

.nav-item .nav-go {
  width: 18px;
  height: 18px;
  flex: none;
  color: var(--muted);
  transform: rotate(-90deg); /* aşağı oku sağa çevir */
}

/* Tehlikeli satır: ayrı kart, ayrı renk — yanlışlıkla basılmasın */
.nav-item.is-danger { color: var(--ember); }
.nav-item.is-danger > .ico { color: var(--ember); }
.nav-item.is-danger:hover { background: var(--ember-soft); }

/* ─────────────────────────────────────────────────────────────────────
   ERİŞİM KODU KUTUSU (ödeme ekranı ve ayarlar)
   ───────────────────────────────────────────────────────────────────── */
.code-box {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  text-align: left;
}

.code-box-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--paper);
  margin-bottom: 8px;
}

.code-box-row {
  display: flex;
  gap: 8px;
}

.code-input {
  flex: 1;
  min-width: 0;
  background: var(--asphalt);
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--paper);
  padding: 12px;
  /* Kod okunaklı olsun: sabit genişlikli, harf aralıklı */
  font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  font-size: 15px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  transition: border-color 0.15s var(--ease), box-shadow 0.15s var(--ease);
}

.code-input::placeholder { color: var(--faint); letter-spacing: 1.5px; }
.code-input:focus { outline: none; border-color: var(--hiviz-dim); box-shadow: var(--ring); }

.code-btn {
  flex: none;
  max-width: none;
  width: auto;
  padding: 0 16px;
  white-space: nowrap;
}

/* ─────────────────────────────────────────────────────────────────────
   ABONELİK PLANLARI (v28) — ödeme ekranında aylık / yıllık seçimi.
   Eldivenle seçilebilsin diye kartlar büyük; seçili olan hi-viz çerçeveli.
   ───────────────────────────────────────────────────────────────────── */
.plan-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}

.plan-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  min-height: 84px;
  padding: 12px 12px 10px;
  background: var(--asphalt);
  border: 1.5px solid var(--line);
  border-radius: var(--r-md);
  color: var(--paper);
  font-family: 'Inter', sans-serif;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s var(--ease), background 0.15s var(--ease);
}
.plan-card:hover { border-color: var(--line-strong); }
.plan-card:focus-visible { outline: none; box-shadow: var(--ring); }
.plan-card[aria-pressed="true"] {
  border-color: var(--hiviz-fill);
  background: var(--hiviz-soft);
}
.plan-name { font-size: 12px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.6px; }
.plan-card[aria-pressed="true"] .plan-name { color: var(--hiviz); }
.plan-price { font-family: 'Rajdhani', sans-serif; font-size: 22px; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.plan-sub { font-size: 11px; color: var(--muted); }
.plan-badge {
  position: absolute;
  top: -9px;
  right: 10px;
  padding: 2px 8px;
  border-radius: var(--r-full);
  background: var(--hiviz-fill);
  color: var(--hiviz-on-fill);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.3px;
}
.plan-note { font-size: 11px; color: var(--muted); margin: 10px 0 0; line-height: 1.5; }

/* Ana ekrandaki kalan süre / abonelik göstergesi dokunulabilir (v28) */
.readout-btn {
  background: none;
  border: none;
  padding: 2px 4px;
  margin: -2px -4px;
  border-radius: 6px;
  cursor: pointer;
  color: var(--muted);
}
.readout-btn:focus-visible { outline: none; box-shadow: var(--ring); }
.readout-btn.is-free { color: var(--hiviz); }
.readout-btn.is-warn { color: var(--ember); }

/* ─────────────────────────────────────────────────────────────────────
   GÖRÜŞME EKRANI — ELDİVEN DOSTU (v20)

   Eskiden kişi kartındaki "arkadaş ekle / engelle / şikayet" küçük kırmızı
   yazı bağlantılarıydı; eldivenle basılamıyordu. Aslında büyük buton
   stilleri yazılmıştı ama ".peer-chip button { padding:0 }" kuralı daha
   özgül olduğu için onları eziyordu. Yeni kart çakışmasın diye tamamen
   ayrı sınıf adları kullanıyor.

   Hedef boyut: en az 56px yükseklik, aralarında 8px boşluk — motosiklet
   eldiveniyle tek dokunuşta doğru butona basılabilsin.
   ───────────────────────────────────────────────────────────────────── */
.peers { width: 100%; max-width: 380px; margin: 0 auto; flex-direction: column; align-items: stretch; }

.peer-card {
  width: 100%;
  background: var(--asphalt-2);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 12px;
  box-shadow: var(--shadow-sm);
}

.peer-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.peer-avatar {
  width: 40px; height: 40px; flex: none;
  border-radius: 50%;
  object-fit: cover;
  background: var(--asphalt-3);
  display: flex; align-items: center; justify-content: center;
  color: var(--muted);
}
.peer-avatar .ico { width: 22px; height: 22px; }

.peer-meta { flex: 1; min-width: 0; }
.peer-name { font-weight: 600; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.peer-sub  { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.peer-actions {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}

.peer-act {
  min-height: 56px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 8px 6px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--asphalt);
  color: var(--paper);
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  cursor: pointer;
  transition: background 0.15s var(--ease), border-color 0.15s var(--ease), transform 0.1s;
}
.peer-act .ico { width: 20px; height: 20px; }
.peer-act:active { transform: scale(0.97); }
.peer-act:disabled { opacity: 0.6; cursor: default; }

/* Arkadaş ekleme olumlu bir eylem — kırmızı değil */
.peer-act-friend { color: var(--hiviz); border-color: color-mix(in srgb, var(--hiviz) 35%, var(--line)); }
.peer-act-report .ico { color: var(--ember); }

/* "Ayrıl" gerçekten büyük ve tam genişlik olsun: .ctrl-btn'in
   max-width:200px kuralı dosyada sonra geldiği için bunu eziyordu. */
.ctrl-btn.ctrl-end-big {
  width: 100%;
  max-width: none;
  flex: none;
  min-height: 64px;
  font-size: 18px;
  border-radius: 16px;
  background: var(--ember-soft);
}
.controls-secondary .ctrl-btn { min-height: 56px; max-width: none; }

/* ── Şikayet penceresi ── */
.report-box { max-width: 420px; text-align: left; }
.report-title { font-family: 'Rajdhani', sans-serif; font-weight: 700; font-size: 20px; margin-bottom: 2px; }
.report-sub { font-size: 12px; color: var(--muted); margin: 2px 0 10px; }

.reason-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin-bottom: 10px;
}

.reason-chip {
  min-height: 52px;
  padding: 10px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--asphalt);
  color: var(--paper);
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s var(--ease), border-color 0.15s var(--ease), color 0.15s;
}
.reason-chip.on {
  background: var(--ember-soft);
  border-color: var(--ember);
  color: var(--ember);
}

.report-note {
  width: 100%;
  background: var(--asphalt);
  border: 1px solid var(--line);
  border-radius: 12px;
  color: var(--paper);
  padding: 10px 12px;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  resize: vertical;
}
.report-note:focus { outline: none; border-color: var(--hiviz-dim); box-shadow: var(--ring); }

.report-block-row {
  display: flex; align-items: center; gap: 10px;
  font-size: 13px; margin: 12px 0 2px; cursor: pointer;
}
.report-block-row input { width: 22px; height: 22px; accent-color: var(--ember); flex: none; }
/* v31: "Reşit değil" seçilince engelleme zorunlu. Kutu "disabled" yapılmıyor
   (tarayıcı onu soluk griye boyuyor, işaretsiz sanılabiliyor); işaretli ve
   renkli kalıyor, yanında kilit simgesi çıkıyor, tıklama etkisiz. */
.report-block-row .block-lock { display: none; color: var(--ember); flex: none; }
.report-block-row.is-locked { cursor: default; }
.report-block-row.is-locked input { cursor: default; }
.report-block-row.is-locked .block-lock { display: inline-block; }

/* v31: "Reşit değil" sebebi iki satır: ana metin + küçük "18 yaş altı" */
.reason-chip-2l {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1px; line-height: 1.2;
}
.reason-chip-2l small { font-size: 11px; font-weight: 500; opacity: 0.8; }

/* v31: "Reşit değil" seçilince çıkan kısa açıklama */
.resit-note {
  margin: -2px 0 10px;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--ember) 40%, var(--line));
  background: var(--ember-soft);
  color: var(--paper);
  font-size: 12px;
  line-height: 1.4;
}

.report-actions { display: flex; gap: 8px; margin-top: 12px; }
.report-actions .ctrl-btn { max-width: none; min-height: 52px; }
.report-submit { background: var(--ember); border-color: var(--ember); color: var(--on-ember); font-weight: 700; }
.report-onlyblock {
  width: 100%; margin-top: 10px; min-height: 44px;
  background: none; border: none; color: var(--muted);
  font-family: 'Inter', sans-serif; font-size: 13px; text-decoration: underline; cursor: pointer;
}

/* Görüşme sonrası istemleri (değerlendirme, bağış) — kart düzeni */
#ratingPrompt, #donatePrompt { flex-wrap: wrap; padding: 12px 14px; border-radius: 16px; }
#ratingPrompt .rate-btn .ico { width: 22px; height: 22px; }
#donatePrompt .ctrl-btn { min-height: 44px; }

/* Son 3 dakika uyarısı */
.time-warn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; max-width: 380px; margin: 4px auto 0;
  padding: 12px 14px; border-radius: 14px;
  background: var(--ember-soft); border: 1px solid var(--ember);
  color: var(--ember); font-weight: 700; font-size: 14px;
  animation: time-warn-in 0.3s var(--ease);
}
.time-warn .ico { width: 20px; height: 20px; flex: none; }
@keyframes time-warn-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .time-warn { animation: none; } }

.low-time-note {
  max-width: 380px; margin: 4px auto 0; text-align: center;
  font-size: 12px; line-height: 1.5; color: var(--muted);
}

/* Profil fotoğrafı yer tutucusu (kırık resim simgesi yerine) */
.avatar-wrap { width: 72px; height: 72px; flex: none; position: relative; }
.avatar-wrap .avatar-preview { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; }
.avatar-placeholder {
  width: 72px; height: 72px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--asphalt-3); border: 1px dashed var(--line-strong); color: var(--muted);
}
.avatar-placeholder .ico { width: 30px; height: 30px; }

/* ─────────────────────────────────────────────────────────────────────
   ARKADAŞLAR SAYFASI (v20)
   ───────────────────────────────────────────────────────────────────── */
.friends-page { display: flex; flex-direction: column; gap: 22px; max-width: 480px; width: 100%; margin: 0 auto; padding-top: 8px; }
.fr-section { display: flex; flex-direction: column; gap: 10px; }
.fr-label { font-size: 13px; font-weight: 600; color: var(--paper); }
.fr-head {
  display: flex; align-items: center; gap: 8px;
  font-family: 'Rajdhani', sans-serif; font-weight: 700; font-size: 15px;
  letter-spacing: 1px; text-transform: uppercase; color: var(--hiviz);
}
.fr-count {
  font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 0;
  min-width: 20px; padding: 2px 7px; border-radius: 999px; text-align: center;
  background: var(--hiviz-soft); color: var(--hiviz);
}
.fr-count:empty { display: none; }
.fr-search {
  width: 100%; min-height: 48px; padding: 12px 14px;
  background: var(--input-bg); border: 1px solid var(--input-border); border-radius: 12px;
  color: var(--paper); font-family: 'Inter', sans-serif; font-size: 15px;
}
.fr-search:focus { outline: none; border-color: var(--hiviz-dim); box-shadow: var(--ring); }
.fr-hint { font-size: 12px; color: var(--muted); line-height: 1.5; margin: 0; }
.fr-list { display: flex; flex-direction: column; gap: 10px; }
.fr-empty {
  margin: 0; padding: 16px; border-radius: 14px; text-align: center;
  font-size: 13px; line-height: 1.6; color: var(--muted);
  background: var(--asphalt-2); border: 1px dashed var(--line-strong);
}

.person-card {
  background: var(--asphalt-2); border: 1px solid var(--line); border-radius: 16px;
  padding: 12px; box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column; gap: 10px;
}
.person-main {
  display: flex; align-items: center; gap: 12px; width: 100%;
  background: none; border: none; padding: 0; text-align: left; cursor: pointer; color: inherit;
  font-family: 'Inter', sans-serif;
}
.person-avatar {
  width: 44px; height: 44px; flex: none; border-radius: 50%; object-fit: cover;
  display: flex; align-items: center; justify-content: center;
  background: var(--asphalt-3); color: var(--muted);
}
.person-avatar .ico { width: 22px; height: 22px; }
.person-meta { display: flex; flex-direction: column; min-width: 0; }
.person-name { font-weight: 600; font-size: 15px; display: flex; align-items: center; gap: 6px; }
.person-sub { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.person-actions { display: flex; gap: 8px; }
.person-act {
  flex: 1; min-height: 48px; padding: 10px 12px; border-radius: 12px;
  font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 600; cursor: pointer;
  border: 1px solid var(--line); background: var(--asphalt); color: var(--paper);
  transition: background 0.15s var(--ease), border-color 0.15s var(--ease), transform 0.1s;
}
.person-act:active { transform: scale(0.98); }
.person-act:disabled { opacity: 0.65; cursor: default; }
.person-act-primary { background: var(--hiviz-fill); border-color: var(--hiviz-fill); color: var(--hiviz-on-fill); }
.person-act-danger { color: var(--ember); border-color: color-mix(in srgb, var(--ember) 40%, var(--line)); }

/* v22 — Google girişi ayarlanmamışken giriş ekranındaki uyarı */
.setup-warning {
  border: 1px solid var(--ember);
  background: color-mix(in srgb, var(--ember) 10%, transparent);
  border-radius: 12px;
  padding: 14px 16px;
  font-size: 13px;
  line-height: 1.6;
}
.setup-warning strong { display: block; font-size: 15px; margin-bottom: 4px; color: var(--paper); }
.setup-warning p { margin: 0; color: var(--muted); }

/* ═══════════════════════════════════════════════════════════════════════
   v22 — GÖRSEL DÜZELTMELER (dosyanın sonunda: önceki katmanları ezer)
   ═══════════════════════════════════════════════════════════════════════ */

/* Boş geri bildirim satırları yer kaplamasın (giriş ekranındaki boşluklar) */
.inline-feedback:empty { display: none; }

/* Üst çubuk: dar ekranda marka yazısı "TEKERD…" diye kesiliyordu.
   Telefonda sadece logo, geniş ekranda logo + ad. Düğmelerin dokunma
   alanı 40px, aralarında eşit boşluk. */
.topbar { padding-inline: 0; }
.topbar button {
  min-width: 40px; min-height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 12px;
}
.topbar > span:last-child { gap: 2px !important; }
@media (max-width: 440px) {
  .topbar .brand { display: none; }
  /* v26: telefonda yalnızca logo göründüğü için daha büyük (26 → 38 px) */
  .topbar-logo { width: 38px; height: 38px; margin-right: 0; }
}

/* Gelişmiş seçenekler: oda boyutu ortada, grup kodu satırı hizalı */
#advancedControls {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  width: 100%; max-width: 420px; margin-inline: auto;
}
#advancedControls[hidden] { display: none !important; }
#advancedControls .segmented { align-self: center; }
#advancedControls .code-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 8px; width: 100%; align-items: stretch;
}
#advancedControls .code-input {
  width: 100%; min-width: 0; padding: 12px;
  font-size: 15px; text-align: center;
}
#advancedControls .code-input::placeholder {
  letter-spacing: 0; text-transform: none;
  font-family: 'Inter', system-ui, sans-serif; font-weight: 400;
}
#advancedControls .ghost-btn { padding: 10px 14px; white-space: nowrap; }
@media (max-width: 360px) {
  #advancedControls .code-row { grid-template-columns: 1fr 1fr; }
  #advancedControls .code-input { grid-column: 1 / -1; }
}

/* "Benzin Ismarla" düğmesi içeriğin üstüne binmesin */
.app { padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }

/* Açık temada BAĞLAN düğmesi zemin rengine karışıyordu */
[data-theme="light"] .dial-btn {
  box-shadow:
    inset 0 0 0 2px var(--hiviz-dim, #4f6d00),
    inset 0 -3px 8px rgba(19,23,26,0.06),
    0 10px 28px rgba(19,23,26,0.16);
}

/* Logo her zaman tam ortada (sol 1 düğme, sağ 4 düğme olduğu için kayıyordu) */
.topbar { position: relative; justify-content: space-between; }
.topbar > :nth-child(2) {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
/* Tema seçimi Ayarlar'da zaten var; üst çubuktaki kopyası kalabalık yapıyordu */
.app > .topbar #themeToggleBtn { display: none; }

/* Ana ekranın penceresinde açılan sayfalarda dil düğmesi × ile çakışıyordu */
.in-frame #langToggleBtn { visibility: hidden; }

/* ═══════════════════════════════════════════════════════════════════════
   v23 — GRUP, ÇAĞRI, BİLDİRİM, PROFİL
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Uygulama içi bildirimler ── */
.toast-host {
  position: fixed;
  top: calc(env(safe-area-inset-top, 0px) + 64px);
  left: 50%;
  transform: translateX(-50%);
  width: min(420px, calc(100% - 32px));
  z-index: 60;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}
.toast {
  pointer-events: auto;
  background: var(--asphalt-2);
  border: 1px solid var(--line-strong);
  border-radius: 16px;
  box-shadow: var(--shadow-lg);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow: hidden;
  position: relative;
  animation: toast-in 0.24s var(--ease);
}
.toast-out { animation: toast-out 0.2s var(--ease) forwards; }
@keyframes toast-in { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }
@keyframes toast-out { to { opacity: 0; transform: translateY(-8px); } }
.toast-row { display: flex; align-items: center; gap: 12px; }
.toast-ico, .toast-avatar {
  width: 40px; height: 40px; flex: none; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--asphalt-3); color: var(--muted); object-fit: cover;
}
.toast-ico .ico { width: 20px; height: 20px; }
.toast-body { flex: 1; min-width: 0; }
.toast-text { font-size: 14px; font-weight: 600; line-height: 1.35; color: var(--paper); overflow-wrap: anywhere; }
.toast-sub { font-size: 12px; color: var(--muted); margin-top: 2px; }
.toast-x {
  flex: none; width: 36px; height: 36px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: none; border: none; color: var(--muted); cursor: pointer;
}
.toast-x:hover { background: var(--asphalt-3); color: var(--paper); }
.toast-actions { display: flex; gap: 8px; }
.toast-btn {
  flex: 1; min-height: 48px; padding: 10px 12px; border-radius: 12px;
  font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 700; cursor: pointer;
  border: 1px solid var(--line); background: var(--asphalt); color: var(--paper);
}
.toast-btn-primary { background: var(--hiviz-fill); border-color: var(--hiviz-fill); color: var(--hiviz-on-fill); }
.toast-btn:focus-visible, .toast-x:focus-visible { outline: none; box-shadow: var(--ring); }
.toast-timer { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--asphalt-3); }
.toast-timer span {
  display: block; height: 100%; background: var(--hiviz-dim);
  transform-origin: left center; transition-property: transform; transition-timing-function: linear;
}
.toast-ok .toast-ico { color: var(--ok); }
.toast-warn .toast-ico { color: var(--ember); background: var(--ember-soft); }
.toast-info .toast-ico { color: var(--hiviz); }
/* Gelen çağrı: diğer bildirimlerden ayrışsın */
.toast-invite { border-color: var(--hiviz-dim); background: color-mix(in srgb, var(--hiviz) 7%, var(--asphalt-2)); }
.toast-invite .toast-ico { background: var(--hiviz-fill); color: var(--hiviz-on-fill); animation: ring-pulse 1.2s ease-in-out infinite; }
.toast-invite .toast-text { font-size: 15px; }
@keyframes ring-pulse { 0%, 100% { box-shadow: 0 0 0 0 var(--hiviz-soft); } 50% { box-shadow: 0 0 0 8px transparent; } }
@media (prefers-reduced-motion: reduce) {
  .toast, .toast-out, .toast-invite .toast-ico { animation: none; }
  .toast-timer span { transition: none; }
}

/* ── Ana ekrandaki grup girişi ── */
.group-entry {
  display: grid;
  grid-template-columns: 40px 1fr auto;
  align-items: center;
  gap: 12px;
  width: min(100%, 320px);
  min-height: 60px;
  margin: 14px auto 0;
  padding: 10px 14px;
  background: var(--asphalt-2);
  border: 1px solid var(--line);
  border-radius: 14px;
  color: var(--paper);
  text-align: left;
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  transition: border-color 0.15s var(--ease), background 0.15s var(--ease);
}
.group-entry:hover { border-color: var(--hiviz-dim); }
.group-entry:focus-visible { outline: none; box-shadow: var(--ring); }
.group-entry-ico {
  width: 40px; height: 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--hiviz-soft); color: var(--hiviz);
}
.group-entry-text { display: flex; flex-direction: column; min-width: 0; }
.group-entry-text strong { font-size: 14px; font-weight: 600; }
.group-entry-text small { font-size: 12px; color: var(--muted); }
.group-entry-arrow { transform: rotate(-90deg); color: var(--faint); }
body.in-call .group-entry { display: none !important; }

/* Gelişmiş: rastgele eşleşme boyutu */
.adv-label { margin: 0; font-size: 12px; color: var(--muted); text-align: center; }

/* ── Grup kur penceresi ── */
.group-box { max-width: 420px; display: flex; flex-direction: column; gap: 12px; }
.group-title { font-family: 'Rajdhani', sans-serif; font-weight: 700; font-size: 22px; letter-spacing: 0.5px; }
.group-sub { margin: -4px 0 2px; font-size: 13px; line-height: 1.55; color: var(--muted); }
.group-opt {
  display: flex; align-items: center; gap: 12px; width: 100%;
  min-height: 64px; padding: 12px 14px; border-radius: 14px;
  background: var(--asphalt); border: 1px solid var(--line); color: var(--paper);
  text-align: left; cursor: pointer; font-family: 'Inter', sans-serif;
}
.group-opt:hover { border-color: var(--hiviz-dim); }
.group-opt:focus-visible { outline: none; box-shadow: var(--ring); }
.group-opt:disabled { opacity: 0.6; cursor: default; }
.group-opt-ico {
  width: 40px; height: 40px; flex: none; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--hiviz-soft); color: var(--hiviz);
}
.group-opt-text { display: flex; flex-direction: column; min-width: 0; }
.group-opt-text strong { font-size: 15px; font-weight: 600; }
.group-opt-text small { font-size: 12px; color: var(--muted); line-height: 1.4; }
.group-code-made {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 14px; border-radius: 14px; border: 1px dashed var(--hiviz-dim); background: var(--hiviz-soft);
}
.group-code-made[hidden] { display: none; }
.group-code-label { font-size: 11px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--muted); }
.group-code {
  font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  font-size: 28px; font-weight: 700; letter-spacing: 5px; color: var(--paper);
  font-variant-numeric: tabular-nums;
}
.group-code-actions { display: flex; gap: 8px; }
.group-code-actions .ghost-btn { min-height: 44px; padding: 8px 16px; }
.group-join { display: flex; flex-direction: column; gap: 6px; padding-top: 4px; border-top: 1px solid var(--line); }
.group-join-label { font-size: 12px; color: var(--muted); padding-top: 8px; }
.group-join .code-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.group-join .code-input { width: 100%; min-width: 0; padding: 12px; font-size: 15px; text-align: center; }
.group-join .code-input::placeholder { letter-spacing: 0; text-transform: none; font-family: 'Inter', system-ui, sans-serif; font-weight: 400; }
.group-join .ghost-btn { min-height: 48px; padding: 10px 18px; }
.group-close { max-width: none; width: 100%; }

/* ── Görüşmede "Çağır" ── */
.ctrl-invite { color: var(--hiviz); border-color: color-mix(in srgb, var(--hiviz) 35%, var(--line)); }
.ctrl-invite[hidden] { display: none; }

/* ── Kişi kartı: ada dokununca profil ── */
.peer-who {
  display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0;
  background: none; border: none; padding: 0; margin: 0; text-align: left;
  color: inherit; cursor: pointer; font-family: 'Inter', sans-serif; border-radius: 12px;
}
.peer-who:focus-visible { outline: none; box-shadow: var(--ring); }
.peer-who .peer-name, .peer-who .peer-sub { display: block; }

/* ── Çevrimiçi göstergesi ── */
.person-avatar-wrap { position: relative; flex: none; display: inline-flex; }
.presence-dot {
  position: absolute; right: 0; bottom: 0;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--faint); border: 2px solid var(--asphalt-2);
}
.presence-dot.is-online { background: var(--ok); }
.presence-dot-lg { width: 20px; height: 20px; right: 4px; bottom: 4px; border-width: 3px; border-color: var(--asphalt); }
.person-presence { color: var(--muted); }
.person-presence.is-online { color: var(--ok); font-weight: 600; }
.dot-sep { margin: 0 6px; color: var(--faint); }
.person-main .person-meta { flex: 1; }
.person-chevron { flex: none; transform: rotate(-90deg); color: var(--faint); }

/* ── Arkadaşlar sayfası bantları ── */
.fr-banner {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  padding: 12px 14px; border-radius: 14px; font-size: 13px; line-height: 1.5;
  border: 1px solid var(--hiviz-dim); background: var(--hiviz-soft); color: var(--paper);
}
.fr-banner[hidden] { display: none; }
.fr-banner > .ico { flex: none; color: var(--hiviz); }
.fr-banner > span:not(.fr-banner-actions) { flex: 1; min-width: 200px; }
.fr-banner-soft { border-color: var(--line); background: var(--asphalt-2); }
.fr-banner-actions { display: flex; gap: 8px; width: 100%; }

/* ── Profil sayfası ── */
.user-page { display: flex; flex-direction: column; gap: 18px; max-width: 480px; width: 100%; margin: 0 auto; padding: 8px 0 40px; }
.user-loading, .user-empty { text-align: center; color: var(--muted); padding: 48px 0; margin: 0; }
.user-hero { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; padding-top: 6px; }
.user-avatar-wrap { position: relative; }
.user-avatar {
  width: 104px; height: 104px; border-radius: 50%; object-fit: cover; display: flex;
  align-items: center; justify-content: center; background: var(--asphalt-3); color: var(--muted);
  box-shadow: 0 0 0 1px var(--line), var(--shadow-md);
}
.user-avatar-empty .ico { width: 46px; height: 46px; }
.user-name {
  margin: 6px 0 0; font-family: 'Rajdhani', sans-serif; font-size: 28px; font-weight: 700;
  letter-spacing: 0.5px; line-height: 1.1; display: inline-flex; align-items: center; gap: 8px;
  text-wrap: balance; overflow-wrap: anywhere;
}
.user-name .ico { width: 22px; height: 22px; }
.user-tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.user-tag {
  font-size: 12px; padding: 4px 10px; border-radius: 999px;
  background: var(--asphalt-2); border: 1px solid var(--line); color: var(--muted);
}
.user-tag-friend { color: var(--hiviz); border-color: color-mix(in srgb, var(--hiviz) 40%, var(--line)); }
.user-tag-online { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 45%, var(--line)); }
.user-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; }
.user-actions:empty { display: none; }
.user-msg { text-align: center; margin: -10px 0 0; }
.user-msg:empty { display: none; }
.user-section { display: flex; flex-direction: column; gap: 8px; }
.user-h {
  margin: 0; font-family: 'Rajdhani', sans-serif; font-weight: 700; font-size: 15px;
  letter-spacing: 1px; text-transform: uppercase; color: var(--hiviz);
}
/* Motosiklet ruhsatı gibi künye: etiket solda, değer sağda */
.spec-sheet { margin: 0; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: var(--asphalt-2); }
.spec-row { display: grid; grid-template-columns: minmax(96px, 36%) 1fr; gap: 12px; padding: 12px 14px; }
.spec-row + .spec-row { border-top: 1px solid var(--line); }
.spec-row dt { font-size: 11px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); align-self: center; }
.spec-row dd { margin: 0; font-size: 14px; color: var(--paper); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.chip-static { cursor: default; }
.chip-static:hover { border-color: var(--line); color: inherit; }
.user-bio { margin: 0; font-size: 14px; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; max-width: 65ch; }
.user-photos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.user-photo { padding: 0; border: none; border-radius: 12px; overflow: hidden; aspect-ratio: 1; cursor: zoom-in; background: var(--asphalt-3); max-width: 100%; }
.user-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.user-insta { color: var(--hiviz); font-weight: 600; text-decoration: underline; min-height: 44px; display: inline-flex; align-items: center; align-self: flex-start; }
.user-note {
  margin: 0; font-size: 13px; line-height: 1.6; color: var(--muted);
  padding: 12px 14px; border-radius: 14px; background: var(--asphalt-2); border: 1px dashed var(--line-strong);
}
.user-report {
  align-self: center; background: none; border: none; color: var(--ember); cursor: pointer;
  font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 600; text-decoration: underline;
  min-height: 44px; padding: 8px 12px;
}
.user-lightbox {
  position: fixed; inset: 0; z-index: 70; background: rgba(0, 0, 0, 0.9);
  display: flex; align-items: center; justify-content: center; padding: 16px; cursor: zoom-out;
}
.user-lightbox img { max-width: 100%; max-height: 100%; border-radius: 12px; }

/* Ayarlar: bildirim durumu */
.notify-state { flex: none; font-size: 12px; font-weight: 700; color: var(--muted); padding: 4px 10px; border-radius: 999px; border: 1px solid var(--line); }
.notify-state:empty { display: none; }
.notify-state.is-on { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 45%, var(--line)); }

/* Gizlilik: gerçek saklama süresi */
.retention-line { font-size: 13px; line-height: 1.55; margin: 8px 0 0; padding: 10px 12px; border-radius: 10px; background: var(--asphalt-2); border: 1px solid var(--line); }

/* Özel gruptayken (arkadaş çağrısı ya da grup kodu) rastgele eşleşmeye ait
   kanal seçici, kilit notu ve "Sonraki" gizlenir. */
body.in-group .channel-display,
body.in-group #channelUnlockNote,
body.in-group #nextBtn { display: none !important; }

/* ══════════════════════════════════════════════════════════════════════
   v26 — Engellenen kullanıcı: tek iletişim yolu e-posta
   ══════════════════════════════════════════════════════════════════════ */
.appeal-mail-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  max-width: none;
  margin: 6px 0 0;
  background: var(--hiviz-fill);
  color: var(--hiviz-on-fill);
  border-color: var(--hiviz-fill);
  font-weight: 700;
  text-decoration: none;
}
.appeal-mail-btn[hidden] { display: none; }

/* Uygulama içinde engellenen hesap: her şeyin üstünde, kapatılamaz */
.blocked-screen {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: var(--asphalt);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(24px + env(safe-area-inset-top)) 20px calc(24px + env(safe-area-inset-bottom));
  overflow-y: auto;
}
.blocked-screen .blocked-box {
  width: 100%;
  max-width: 420px;
  text-align: center;
}
.blocked-screen h2 { font-family: 'Rajdhani', sans-serif; margin: 8px 0; }
.blocked-screen p { color: var(--muted); line-height: 1.6; }
.blocked-screen .blocked-appeal {
  margin-top: 22px;
  padding: 16px;
  background: var(--asphalt-2);
  border: 1px solid var(--line);
  border-radius: 14px;
  text-align: left;
}
.blocked-screen .blocked-code {
  font-size: 11px;
  word-break: break-all;
  background: var(--asphalt);
  padding: 8px;
  border-radius: 8px;
  margin-top: 4px;
  font-family: monospace;
}

/* v26 — Üst çubuk logosu düğmelerle aynı hizada.
   Logo büyüyünce, düğmelerden ~6 px aşağıda durduğu belli oluyordu: dikey
   ortalama, üst çubuğun alt boşluğunu (padding-bottom) da hesaba katıyordu.
   Artık yalnızca düğmelerin bulunduğu şeridin ortasında. */
.topbar > :nth-child(2) {
  top: 0;
  bottom: var(--s3);
  transform: translateX(-50%);
}