/*
  Temel katman: yerel yazı tipleri, sıfırlama, gövde, odak, kaydırma çubukları, simgeler.
  Eski WebKit (PS5) uyumu için düzen yalnızca flexbox ile kurulur.
  grid, clamp(), flex gap, :is(), :where(), aspect-ratio ve inset kullanılmaz,
  boşluklar margin ve padding ile verilir.
*/

/* Yazı tipleri (SIL Open Font License 1.1, lisanslar public/fonts/ altında).
   Her aile latin ve latin-ext olarak iki dosyadır, unicode-range sayesinde yalnızca
   gereken dosya ve yalnızca etkin temanın aileleri indirilir. ç, ö, ü, ı latin, ğ, ş, İ latin-ext
   dosyasındadır. */

@font-face {
  font-family: "Rubik Telsiz";
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url("/fonts/rubik-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Rubik Telsiz";
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url("/fonts/rubik-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Unbounded Telsiz";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/unbounded-latin-700-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Unbounded Telsiz";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/unbounded-latin-ext-700-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Manrope Telsiz";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("/fonts/manrope-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Manrope Telsiz";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("/fonts/manrope-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Martian Mono Telsiz";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/martian-mono-latin-500-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Martian Mono Telsiz";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/martian-mono-latin-ext-500-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Figtree Telsiz";
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url("/fonts/figtree-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Figtree Telsiz";
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url("/fonts/figtree-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Young Serif Telsiz";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/young-serif-latin-400-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Young Serif Telsiz";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/young-serif-latin-ext-400-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Sıfırlama */

*,
*::before,
*::after {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

html {
  height: 100%;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  position: relative;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background-color: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: var(--leading);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;
}

/* Zemindeki iki yumuşak ışık. Paneller bunun üstünde durur. */
body::before {
  content: "";
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    radial-gradient(60rem 38rem at 6% -8%, var(--bg-glow-a), var(--bg-glow-a0) 70%),
    radial-gradient(52rem 34rem at 102% 108%, var(--bg-glow-b), var(--bg-glow-b0) 70%);
}

h1,
h2,
h3,
h4,
h5,
p {
  margin: 0;
}

ul {
  margin: 0;
  padding: 0;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
  margin: 0;
}

button {
  -webkit-appearance: none;
  appearance: none;
  touch-action: manipulation;
}

img {
  max-width: 100%;
}

a {
  color: var(--link);
}

kbd,
code {
  font-family: var(--font-mono);
}

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

.sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* Simgeler: 24 birim ızgara, 2 birim çizgi, currentColor */

.icon {
  display: inline-block;
  flex: none;
  width: 1.25em;
  height: 1.25em;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: middle;
  pointer-events: none;
}

.icon-fill {
  fill: currentColor;
  stroke: none;
}

.logo {
  display: inline-block;
  flex: none;
  width: 2rem;
  height: 2rem;
  vertical-align: middle;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.mono {
  font-family: var(--font-mono);
}

.noscript {
  position: relative;
  z-index: 1;
  padding: 2rem;
  color: var(--text);
}

/* Yalnızca bir temada görünen dekoratif simgeler (işaretleme her temada aynıdır) */
.skin-arcade,
.skin-gece,
.skin-turkuaz {
  display: none;
}

:root[data-skin="arcade"] .skin-arcade,
:root:not([data-skin]) .skin-arcade,
:root[data-skin="gece"] .skin-gece,
:root[data-skin="turkuaz"] .skin-turkuaz {
  display: inline-block;
}

/* Belirgin odak çerçevesi: klavye, PS5 imleci ve kontrolcü için. :focus-visible
   desteklemeyen eski tarayıcılarda aynı çerçeve :focus ile gelir. */

:focus {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

:focus:not(:focus-visible) {
  outline: none;
}

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  box-shadow: 0 0 0 7px var(--focus-halo);
}

/* Fareyle tıklanan metin alanlarında da odak görünür kalır */
input:focus,
select:focus,
textarea:focus {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

.composer-input:focus,
.composer-input:focus-visible {
  outline: 0;
  box-shadow: none;
}

/* Kaydırma çubukları */

::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}

::-webkit-scrollbar-thumb {
  background: var(--scrollbar);
  border: 3px solid transparent;
  background-clip: padding-box;
  border-radius: 8px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

/* Hareketi azalt: tüm geçiş ve döngüler durur. Durumlar biçimle taşınır, döngülü göstergelerin
   (konuşan hale, ekolayzır, yıldız) temel stili tam görünür durağan karedir. */

:root[data-reduce-motion="true"] *,
:root[data-reduce-motion="true"] *::before,
:root[data-reduce-motion="true"] *::after {
  -webkit-animation: none !important;
  animation: none !important;
  -webkit-transition: none !important;
  transition: none !important;
  scroll-behavior: auto !important;
}

/* Zorlanmış renkler (Windows Yüksek Karşıtlık gibi): tarayıcı renkleri sistem renkleriyle değiştirir, gölgeleri ve
   zemin resimlerini kaldırır. Seçili ve ayarlı öğeler gölge veya yalnızca zemin rengi yerine sistem vurgusu renginde
   kenarla ayrılır, Bas konuş kenarla çizilir, odak çerçevesi kalınlaşır. Anlam taşıyan küçük renk işaretleri (durum
   noktası, telsiz lambası, okunmamış noktası, tema önizlemesi) kendi renklerini korur. Destekleyen tarayıcı yoksa kural
   yok sayılır.
   Bu dosya bileşen ve tema dosyalarından önce yüklenir. Onların aynı ya da daha özgül kuralları (ör. frekans.css
   .station.is-tuned, Bas konuş kenarını sıfırlayan radio.css .radio .radio-ptt, süs dosyalarındaki :root[data-skin]
   kuralları) bu bölümü ezerdi. Hareketi azalt bölümündeki gibi kişinin sistem tercihi önce gelsin diye bildirimler
   !important ile yazılır. Gönder düğmesinin kenarını sonraki dosyalar silmez, Yüksek Kontrast'taki kesik kenarlı
   devre dışı hâli korunsun diye o kural !important değildir. Sonuç e2e/04-ayarlar.test.js içinde her temada ölçülür. */
@media (forced-colors: active) {
  .station.is-tuned,
  .room-row.is-current,
  .dm-item[aria-current],
  .settings-cat[aria-current="page"],
  .settings-theme-card.is-selected,
  .top-personal-button.is-current {
    border-color: Highlight !important;
  }

  .room-row.is-current::before,
  .needle::after {
    background-color: Highlight !important;
    forced-color-adjust: none;
  }

  .radio .radio-ptt {
    border: 2px solid ButtonText !important;
  }

  #composer .send-button {
    border: 2px solid ButtonText;
  }

  :focus-visible {
    outline-width: 4px !important;
  }

  .avatar[data-status]::after,
  .radio-led,
  .unread-badge,
  .theme-swatch > span {
    forced-color-adjust: none;
  }
}