/*
 * Tasarım sisteminin DIŞINDAKİ ek stiller.
 *
 * app.css EYS deposundaki globals.css'in birebir kopyasıdır ve ELLE DÜZENLENMEZ;
 * ona dokunmak bir tasarım sistemi değişikliğidir. Üçüncü parti bileşenlerin
 * (leaflet) tasarım sistemine uydurulması burada yapılır.
 */

/* ---- Leaflet ---- */

/* Harita konteyneri kartın yuvarlaklığına uysun. */
.leaflet-container {
  border-radius: inherit;
  font-family: inherit;
  background: var(--surface-2);
}

/*
 * Koyu tema: raster tile'lar CSS filtresiyle koyulaştırılır.
 * Harita YENİDEN KURULMAZ — setTheme yalnızca bu sınıfı ekler/çıkarır.
 * Marker'lar var(--…) kullandığı için kendiliğinden döner, filtre dışında tutulur.
 */
.map-dark .leaflet-tile {
  filter: invert(1) hue-rotate(180deg) brightness(0.92) contrast(0.92);
}

.map-dark .leaflet-control-attribution,
.map-dark .leaflet-control-zoom a {
  background: var(--surface);
  color: var(--text-2);
}

/* divIcon varsayılan beyaz kutusunu kaldır. */
.eys-marker {
  background: transparent;
  border: none;
}

/* transport/modal.tsx'teki z-[1000] karşılığı: modal harita panellerinin üstünde. */
.leaflet-pane,
.leaflet-control {
  z-index: 400;
}

/* ---- Bildirim sayısı rozeti ----
 *
 * Menü karosunun ve yan menü satırının okunmamış sayısı. Durum paletinin
 * "no" adımı (yumuşak zemin + koyu kırmızı metin) yerine DOLU kırmızı ister:
 * rozet bir durum kodu değil, dikkat çeken bir sayaçtır. DS (02 §2.11) burada
 * amber `.badge.wait` kullanır; kırmızı sayaç mobil paritesi için korunur.
 *
 * 02.10.2026 — zemin --red-500'den --uni-red-700'e (#b91c1c) indi: beyaz sayı
 * kurumsal kırmızı üstünde ≈ 4,2:1 ile AA altındaydı, bu adımda ≈ 6,5:1.
 * --uni-red-700 koyu temada override edilmez; rozet her iki temada aynı
 * kırmızıdır. 08.10.2026'dan beri durum paleti (--no-*) DS'nin kurumsal
 * kırmızı ailesindedir; --uni-red-700 yalnız bu rozete aittir.
 */
.badge-count {
  background: var(--uni-red-700);
}

/* ---- Yazı tipi ölçeği: +2px ----
 *
 * Tüm ölçek bir adım (2px = .125rem) büyütülür. Tailwind v4'te
 * `.text-sm{font-size:var(--text-sm)}` biçiminde üretildiği için token'ı
 * burada ezmek yeterlidir; app.css'e (birebir kopya) dokunulmaz.
 *
 * Bu dosya katmansızdır, app.css'in `@layer theme` bloğundan sonra gelir ve
 * CSS katman sırasına göre onu ezer.
 *
 * --text-*--line-height DEĞERLERİ EZİLMEZ: Tailwind onları oransız çarpan
 * (`calc(1.25 / .875)`) olarak tutar, satır yüksekliği kendiliğinden orantılı
 * büyür. Mutlak bir değer yazmak oranı bozardı.
 *
 * 3xl ve üstü şu an kullanılmıyor; ölçeğin geri kalanıyla tutarlı kalsın diye
 * yine de tanımlıdır (kullanılmayan değişken çıktıya maliyet bindirmez).
 */
:root {
  --text-xs: 0.875rem; /* 12 → 14 */
  --text-sm: 1rem; /* 14 → 16 */
  --text-base: 1.125rem; /* 16 → 18 */
  --text-lg: 1.25rem; /* 18 → 20 */
  --text-xl: 1.375rem; /* 20 → 22 */
  --text-2xl: 1.625rem; /* 24 → 26 */
  --text-3xl: 2rem; /* 30 → 32 */
  --text-4xl: 2.375rem; /* 36 → 38 */
  --text-5xl: 3.125rem; /* 48 → 50 */
  --text-6xl: 3.875rem; /* 60 → 62 */
  --text-7xl: 4.625rem; /* 72 → 74 */
  --text-8xl: 6.125rem; /* 96 → 98 */
  --text-9xl: 8.125rem; /* 128 → 130 */
}

/* Sınıfsız metin tarayıcı varsayılanı 16px'ten miras alır; o taban da
   ölçekle aynı adımda büyütülür. `html`'e YAZILMAZ — rem tabanını kaydırmak
   boşlukları ve yarıçapları da ölçekler, bu bir yakınlaştırma olurdu.
   Tailwind preflight form öğelerine `font:inherit` verdiği için input ve
   düğmeler de bu tabanı izler. */
body {
  font-size: 1.125rem; /* 16 → 18 */
}

/* ---- Zorunlu renkler (Windows Kontrast teması) — DS 07 §7.6 ----
 *
 * `forced-colors: active` altında tarayıcı renkleri sistem paletine çevirir ve
 * gradyanlı `background-image`'ı DÜŞÜRÜR. Marka gradyanı (`bg-brand-gradient`)
 * seçim/etkinlik bildiren tek işaret olduğu yerlerde — aktif menü öğesi, seçili
 * çip, aktif sayfa numarası, birincil düğme — öğe çevresinden ayırt edilemez
 * hâle geliyordu.
 *
 * Seçim, öğenin kendi durum özniteliğinden okunur (`aria-current="page"`,
 * `aria-pressed="true"`, `aria-selected="true"`) ve sistemin seçim renkleriyle
 * (Highlight / HighlightText) dolar; `forced-color-adjust: none` bu iki rengin
 * yeniden çevrilmesini engeller. Gradyanlı yüzeyler sınır kazanır: düğmenin
 * sınırı preflight'ta 0'dır, kontrast temasında görünür bir kenarı kalmazdı.
 *
 * Blazor bool değerli `aria-*`'yı "true" değil BOŞ değerle yazar; seçiciler bu
 * yüzden metin değerine bağlıdır ve bileşenler değeri açıkça "true"/"false"
 * olarak verir.
 */
@media (forced-colors: active) {
  :is([aria-current="page"], [aria-pressed="true"], [aria-selected="true"]) {
    forced-color-adjust: none;
    background: Highlight;
    color: HighlightText;
  }

  .bg-brand-gradient {
    border: 1px solid ButtonText;
  }
}

/* ---- Yazdırma: yalnız işaretli alan ----
 *
 * Sayfada `[data-print-area]` varsa kâğıda yalnız o çıkar (Form Detayı'nın
 * kâğıt yüzeyi). Alanın ne atası ne torunu olan her şey düşer: kenar çubuğu,
 * üst şerit, sayfa başlığı, düğmeler, toast'lar.
 *
 * `visibility: hidden` kullanılmaz — gizlenen kabuk yerini korur ve alanın
 * önüne/arkasına boş sayfalar ekler. Atalar ise kalır ama kabuğun ekran
 * düzeni (sabit yükseklik + `overflow: auto`, flex, iç boşluklar) uzun bir
 * formu tek ekranlık kesip kırpardı; o yüzden atalar düz bloğa indirilir.
 *
 * İşaret yoksa hiçbir şey değişmez; tarayıcının kendi yazdırması sayfanın
 * tamamını basar.
 */
@media print {
  @page {
    margin: 15mm;
  }

  body:has([data-print-area])
    *:not([data-print-area], [data-print-area] *, :has([data-print-area])) {
    display: none !important;
  }

  body:has([data-print-area]),
  body :has([data-print-area]) {
    display: block !important;
    position: static !important;
    width: auto !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    border: 0 !important;
    box-shadow: none !important;
    background: #fff !important;
  }

  /* Ekrandaki kart görünümü (çerçeve, yuvarlak köşe, iç boşluk, yatay kaydırma)
     kâğıtta anlamsızdır; sayfa kenarını @page verir. */
  [data-print-area] {
    overflow: visible !important;
    border: 0 !important;
    border-radius: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
  }

  /* Tablo hücre zeminleri (bg-paper-head) tarayıcının "arka plan grafikleri"
     ayarı kapalıyken de basılsın. */
  [data-print-area],
  [data-print-area] * {
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
  }

  [data-print-area] :is(tr, img) {
    break-inside: avoid;
  }
}

/* ---- Üst çubuktaki sayfa eylemleri: dar ekranda yalnız ikon ----
 *
 * DS 08.10 `@media (max-width:600px){.topbar .bar-actions .btn .lbl{display:none}}`.
 * Düğmelerimiz etiketi ayrı bir span'da taşımaz (ChildContent ikon + metindir),
 * bu yüzden metin `font-size: 0` ile görsel olarak gizlenir — DS'nin ray menüsündeki
 * yolun aynısı. Metin DOM'da kalır, erişilebilir ad değişmez; ikon boyu piksel
 * olarak verildiği için etkilenmez. Yalnız ikonu olan düğmelere uygulanır: ikonsuz
 * bir düğme boş kutuya dönerdi. Eşik Tailwind `sm`'idir (başlığın ikinci satıra
 * indiği genişlik).
 */
@media (width < 40rem) {
  .bar-actions :is(a, button):has(> svg) {
    font-size: 0;
    gap: 0;
    min-width: 2.75rem;
    justify-content: center;
    padding-inline: 0.625rem;
  }
}

/* ---- Yükleme ve iskelet (DS 10, stil.css v=20261008n) ----
 *
 * İskelet: nötr zemin (--sk-base) + soldan sağa yumuşak parlama (--sk-glint).
 * Marka gradyanı değildir; tek sürekli animasyonlar iskelet parlaması, döner
 * gösterge ve belirsiz ilerleme çubuğudur (rehber §4).
 */
.skeleton {
  position: relative;
  overflow: hidden;
  background: var(--sk-base);
}

.skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent 0%, var(--sk-glint) 50%, transparent 100%);
  animation: sk-sweep 1.6s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

@keyframes sk-sweep {
  to {
    transform: translateX(100%);
  }
}

/* DS 10.5: gösterge gecikmeli açılır — 300 ms altındaki yanıtta hiç görünmez.
   Öğe DOM'dadır; gecikme boyunca `from` (saydam) uygulanır. */
.gecikmeli {
  animation: gecikmeli-belir 150ms cubic-bezier(0.4, 0, 0.2, 1) 300ms both;
}

@keyframes gecikmeli-belir {
  from {
    opacity: 0;
  }
}

/* DS `.fab-dock` `fabIn`: kaydetme çubuğu (Brand/KaydetCubugu) her görünüşünde aşağıdan
   belirir — `hidden` kalkınca animasyon yeniden başlar. */
.cubuk-belir {
  animation: cubuk-belir 180ms cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes cubuk-belir {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
}

/* Döner gösterge (Brand/Spinner): 14 / 20 / 32 px, renk currentColor. */
.spinner {
  display: inline-block;
  flex: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2.5px solid color-mix(in srgb, currentColor 25%, transparent);
  border-top-color: currentColor;
  animation: eys-spin 0.7s linear infinite;
}

.spinner.sm {
  width: 14px;
  height: 14px;
  border-width: 2px;
}

.spinner.lg {
  width: 32px;
  height: 32px;
  border-width: 3px;
}

@keyframes eys-spin {
  to {
    transform: rotate(360deg);
  }
}

/* Veri varken yenileme (Layout/YenilemeCubugu): üst çubuğun alt kenarında 3px
   belirsiz ilerleme. İçerik yerinde kalır, iskelete dönülmez. */
.progress-top {
  position: relative;
  height: 3px;
  overflow: hidden;
  background: var(--nav-active-bg);
}

.progress-top::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 40%;
  border-radius: 9999px;
  background: var(--primary);
  animation: eys-indet 1.3s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

@keyframes eys-indet {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(250%);
  }
}

/* Düğme içi meşguliyet (Brand/Button Busy): etiket saydamlaşır ama yerini korur,
   gösterge ortada durur — düğmenin genişliği değişmez. Katmansız olduğu için
   utility'lerin metin rengini ezer; göstergenin rengini düğme verir. */
.dugme-mesgul {
  color: transparent;
}

.dugme-mesgul > :not(.dugme-mesgul-katman) {
  visibility: hidden;
}

.dugme-mesgul-katman {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* "Hareketi azalt" (DS 10.5, 07): parlama ve kayan çubuk durur, döner gösterge
   yavaşlar ama durmaz (iş sürdüğünü anlatan tek işarettir), geçişler anında olur. */
@media (prefers-reduced-motion: reduce) {
  .skeleton::after {
    display: none;
  }

  .progress-top::before {
    animation: none;
    width: 100%;
    opacity: 0.5;
  }

  .spinner {
    animation-duration: 2s;
  }

  .gecikmeli {
    animation-duration: 1ms;
  }

  .cubuk-belir {
    animation: none;
  }

  *,
  *::before,
  *::after {
    transition-duration: 0s !important;
    scroll-behavior: auto !important;
  }
}

/* ---- Odaklanan alan yapışkan çubukların altında kalmasın ----
 *
 * Üst çubuk (72–108px) ve dar ekranda formun eylem çubuğu yapışkandır. Hata
 * özetinden ya da klavyeyle bir alana gidildiğinde tarayıcı onu kenara kaydırır ve
 * alan çubuğun altında kalırdı. Kaydırma payı bunu önler.
 */
:where(input, select, textarea, button, a, [tabindex]) {
  scroll-margin-top: 7.5rem;
  scroll-margin-bottom: 6rem;
}