/* =========================================================================
   Sahabaşı "Saha Defteri" tasarım sistemi — 1/3: TOKENLAR + TEMEL + KABUK + GİRİŞ
   (kritik CSS: ilk boyama için gereken her şey burada, küçük tutulur)

   Parçalar:  app.css (bu dosya)  ·  css/bilesenler.css  ·  css/ekranlar.css
   Tema:      <html data-tema="acik|koyu|gunes" data-yazi="..." data-yan="dar">
              (JS tema.js ayarlar; "otomatik" seçimi sistem temasına çevrilip acik/koyu yazılır)
              Vurgu rengi seçimi KALDIRILDI: birincil renk marka lacivertidir.
   Birim:     ölçüler rem'dir; yazı boyutu ölçeği <html font-size> ile ayarlanır.
   Neden:     TASARIM-YONU.md · Nasıl: TASARIM.md
   ========================================================================= */

@font-face {
  font-family: 'Sora';          /* YALNIZ logo yazısı (.logo-yazi) */
  src: url('/font/Sora.woff2') format('woff2'), url('/font/Sora.ttf') format('truetype');
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
}

/* ------------------------------------------------------------------ TOKENLAR */
:root {
  color-scheme: light;

  /* Marka (temadan bağımsız sabitler) */
  --lacivert:   #13294B;
  --lacivert-2: #0E1F3A;
  --marka-turuncu: #F47B20;

  /* Yüzeyler ve yazı: AÇIK tema ("sıcak kâğıt" + mürekkep) */
  --zemin:    #F4F3EF;
  --yuzey:    #FFFFFF;
  --yuzey-2:  #FAF9F6;        /* çok hafif ikinci yüzey (satır üstü, tablo başlığı) */
  --yuzey-3:  #EDEBE5;        /* basılı / segment kabı / gri dolgu */
  --cizgi:    #E4E1DA;
  --cizgi-guclu: #8A857B;     /* form alanı kenarı: yüzeye karşı >= 3:1 */
  --metin:    #191917;        /* mürekkep */
  --metin-2:  #5C5850;
  --metin-3:  #6F6A62;        /* soluk (AA: beyazda 5,4 · zeminde 4,8) */

  /* Birincil eylem = marka laciverdi. İŞARET turuncusu ayrı: yalnız Kaydet ve canlı göstergeler */
  --vurgu:       #13294B;     /* birincil düğme dolgusu */
  --vurgu-ust:   #FFFFFF;     /* dolgu üstü yazı */
  --vurgu-yazi:  #13294B;     /* yüzey üstünde bağlantı / seçili yazı / odak halkası */
  --vurgu-hafif: #E9ECF2;     /* hafif lacivert zemin (seçili satır) */
  --isaret:      #F47B20;
  --isaret-ust:  #191917;     /* turuncu üstü mürekkep yazı */

  /* Durum renkleri: acil · dikkat · tamam · bilgi  (yazı rengi; -b = hafif zemin; -u = dolgu üstü yazı) */
  --kirmizi: #B42318; --kirmizi-b: #FBEAE8; --kirmizi-u: #FFFFFF;     /* ACİL */
  --turuncu: #8A5A00; --turuncu-b: #F8EDD0;                            /* DİKKAT (eski ad: turuncu) */
  --yesil:   #2B6E45; --yesil-b:   #E3F0E8; --yesil-u:   #FFFFFF;     /* TAMAM */
  --mavi:    #4B5A72; --mavi-b:    #E8EBF1;                            /* BİLGİ (eski ad: mavi) */
  --mor:     #6B4FA0; --mor-b:     #EEE9F6;
  --sari: var(--turuncu); --sari-b: var(--turuncu-b);

  /* Yan menü: nötr yüzey (tema ile değişir) */
  --yan-zemin: var(--yuzey);
  --yan-metin: var(--metin-2);
  --yan-metin-vurgu: var(--metin);
  --yan-cizgi: var(--cizgi);
  --yan-secili: var(--yuzey-3);

  /* Yazı ölçeği (rem): meta · etiket · gövde · satır başlığı · bölüm · sayfa · büyük sayı */
  --t-meta: .75rem; --t-etiket: .8125rem; --t-govde: .9375rem; --t-satir: 1.0625rem;
  --t-bolum: 1.375rem; --t-sayfa: 1.75rem; --t-sayi: 2.25rem;

  /* Boşluk (4 px ritmi) */
  --s1: .25rem; --s2: .5rem; --s3: .75rem; --s4: 1rem; --s6: 1.5rem; --s8: 2rem; --s12: 3rem;

  /* Köşe: denetim 8 · grup/katman 12 · avatar daire · hap yalnız segment ve sayaç */
  --r-s: .375rem; --r-m: .5rem; --r-l: .75rem; --r-xl: .75rem; --r-hap: 999px;
  --yuvarlak: var(--r-l);                 /* eski ad */
  --kenar: 1px;                           /* Güneş temasında 2px */
  --hedef: 2.75rem;                       /* en az dokunma hedefi (44px); Güneş: 3.25rem (52px) */
  --satir-en-az: 3.5rem;                  /* .satir en az yüksekliği (56px) */

  /* Gölge: kart ve satırda YOK. Yalnız üstte açılan katmanlarda */
  --golge:   none;
  --golge-2: 0 10px 32px rgba(25, 25, 23, .16), 0 0 0 1px rgba(25, 25, 23, .05);

  /* Hareket tokenları (TASARIM.md "Hareket"): hareket BİLGİ verir ya da YÖN gösterir; süs yok.
     Süreler: 1 basma · 2 küçük geçiş · 3 sayfa/katman · 4 imza anı. Hiçbir animasyon 360 ms'yi geçmez. */
  --sure-1: 90ms;
  --sure-2: 160ms;
  --sure-3: 240ms;
  --sure-4: 360ms;
  --egri-cikis: cubic-bezier(.2, .8, .2, 1);        /* girenler: hızlı başlar, yumuşak durur */
  --egri-giris: cubic-bezier(.4, 0, 1, 1);          /* çıkanlar: yavaş başlar, hızlı gider */
  --egri-vurgu: cubic-bezier(.3, 1.25, .5, 1);      /* yalnız KÜÇÜK nesnelerde hafif aşma */
  /* eski adlar (ekranlar kullanıyor) yeni tokenlara bağlı */
  --sure-hizli: var(--sure-1);
  --sure: var(--sure-2);
  --egri: var(--egri-cikis);

  /* Yerleşim */
  --yan-genislik: 15rem;
  --ust-yukseklik: 3.5rem;
  --alt-yukseklik: 4.5rem;
  --guvenli-ust: env(safe-area-inset-top, 0px);
  --guvenli-alt: env(safe-area-inset-bottom, 0px);
  --icerik-en: 78rem;

  /* Yazı: sistem arayüz yazısı (indirme yok); Sora yalnız logoda */
  --yazi: "Segoe UI Variable Text", "Segoe UI Variable", "Segoe UI", system-ui, -apple-system, "SF Pro Text", Roboto, "Helvetica Neue", Arial, sans-serif;
  --yazi-baslik: var(--yazi);             /* eski ad: artık başlıklar da sistem yazısı */

  /* ESKİ ADLAR → yeni değerlere eşleme (ekran dosyaları kullanıyor; yeni kodda kullanmayın) */
  --kehribar: var(--turuncu);             /* eski turuncu vurgu → dikkat tonu */
  --kehribar-koyu: var(--turuncu);
  --lacivert-eski: var(--lacivert-2);
  --izgara: transparent;                  /* ozalit ızgara kalktı */
  --izgara-ana: transparent;
}

/* KOYU tema: gerçek koyu, lacivert ton yüzeylerde hafif */
:root[data-tema="koyu"] {
  color-scheme: dark;
  --zemin:    #0E1013;
  --yuzey:    #15181D;
  --yuzey-2:  #1A1E24;
  --yuzey-3:  #20252C;
  --cizgi:    #262A31;
  --cizgi-guclu: #5E6672;
  --metin:    #E9EAEC;
  --metin-2:  #B4B8BF;
  --metin-3:  #8F959E;

  --vurgu:       #2F5597;
  --vurgu-ust:   #FFFFFF;
  --vurgu-yazi:  #9DB6E4;
  --vurgu-hafif: #1B2638;
  --isaret:      #F47B20;
  --isaret-ust:  #191917;

  --kirmizi: #FF8F86; --kirmizi-b: #3A1B19; --kirmizi-u: #2A0705;
  --turuncu: #E8B04A; --turuncu-b: #35280D;
  --yesil:   #6FCB8D; --yesil-b:   #14301F; --yesil-u:   #06210F;
  --mavi:    #9DB0CC; --mavi-b:    #1B2433;
  --mor:     #BBA6EE; --mor-b:     #2A2145;

  --golge-2: 0 12px 36px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .06);
}

/* GÜNEŞ saha teması: saf beyaz/siyah, 2 px çizgi, 52 px hedef, ince yazı yok (en az 500) */
:root[data-tema="gunes"] {
  color-scheme: light;
  --zemin:    #FFFFFF;
  --yuzey:    #FFFFFF;
  --yuzey-2:  #F4F4F4;
  --yuzey-3:  #E6E6E6;
  --cizgi:    #4A4A4A;
  --cizgi-guclu: #1A1A1A;
  --metin:    #000000;
  --metin-2:  #1A1A1A;
  --metin-3:  #2E2E2E;

  --vurgu:       #0B1E3F;
  --vurgu-ust:   #FFFFFF;
  --vurgu-yazi:  #0B1E3F;
  --vurgu-hafif: #E6E6E6;
  --isaret:      #F47B20;
  --isaret-ust:  #000000;

  --kirmizi: #9B1C12; --kirmizi-b: #FFE3E0; --kirmizi-u: #FFFFFF;
  --turuncu: #6B4500; --turuncu-b: #FFEFC9;
  --yesil:   #1E5A34; --yesil-b:   #D9F3E2; --yesil-u:   #FFFFFF;
  --mavi:    #27364F; --mavi-b:    #E1E6EE;
  --mor:     #4C1D95; --mor-b:     #EADFFF;

  --kenar: 2px;
  --hedef: 3.25rem;
  --satir-en-az: 3.75rem;
  --golge-2: 0 6px 0 rgba(0, 0, 0, .3);
}

/* Yazı boyutu ölçeği */
:root { font-size: 100%; }
:root[data-yazi="buyuk"]    { font-size: 112.5%; }
:root[data-yazi="cokbuyuk"] { font-size: 125%; }

/* Yan menü daraltılmış */
:root[data-yan="dar"] { --yan-genislik: 4.75rem; }

/* ------------------------------------------------------------------ TEMEL */
*, *::before, *::after { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0; padding: 0;
  min-height: 100%;
  background: var(--zemin);
  color: var(--metin);
  font-family: var(--yazi);
  font-size: 1rem;
  line-height: 1.5;
  font-variant-numeric: tabular-nums;     /* rakamlar eşit genişlik: tablolar, tutarlar hizalı */
  overscroll-behavior-y: none;
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
:root[data-tema="gunes"] body { font-weight: 500; }

input, select, textarea, button { font-family: inherit; font-size: 1rem; color: inherit; }
button { cursor: pointer; }
a { color: var(--vurgu-yazi); }
h1, h2, h3, h4 { font-family: var(--yazi); font-weight: 600; letter-spacing: 0; }
img { max-width: 100%; }
.ik { width: 1.25rem; height: 1.25rem; flex: 0 0 auto; }   /* ikon() varsayılan boyutu; bağlama özel kurallar ezer */
[hidden] { display: none !important; }

/* Görünür odak halkası (klavye ile gezinme): lacivert 2 px */
:focus { outline: none; }
[tabindex="-1"]:focus-visible { outline: none; box-shadow: none; }   /* yalnız kodla odaklanan kapsayıcılar */
:focus-visible {
  outline: 2px solid var(--vurgu-yazi);
  outline-offset: 2px;
  border-radius: var(--r-s);
}
:root[data-tema="gunes"] :focus-visible { outline: 4px solid #000; outline-offset: 3px; box-shadow: 0 0 0 7px #fff; }

/* Ekran okuyucu için gizli metin */
.sr-only {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.atla-link {
  position: fixed; left: .75rem; top: -4rem; z-index: 200; display: inline-flex; align-items: center; min-height: var(--hedef, 44px); padding: 0 1rem;
  background: var(--vurgu); color: var(--vurgu-ust); border-radius: var(--r-m); font-weight: 600;
  text-decoration: none; transition: top var(--sure) var(--egri);
}
.atla-link:focus { top: .75rem; }

/* Hareketi azalt: sistem ayarı YA DA Görünüm ekranındaki "Hareket: Azaltılmış" tercihi (html[data-hareket="az"]).
   Süreler sıfırlanır; JS yardımcıları (hareket.js) da aynı bilgiyi okuyup animasyonu hiç başlatmaz. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important; animation-delay: 0s !important;
    transition-duration: .01ms !important; transition-delay: 0s !important; scroll-behavior: auto !important;
  }
}
:root[data-hareket="az"] *, :root[data-hareket="az"] *::before, :root[data-hareket="az"] *::after {
  animation-duration: .01ms !important; animation-iteration-count: 1 !important; animation-delay: 0s !important;
  transition-duration: .01ms !important; transition-delay: 0s !important; scroll-behavior: auto !important;
}

/* ------------------------------------------------------------------ AÇILIŞ (yükleniyor) */
.acilis {
  position: fixed; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.25rem;
  background: var(--zemin); color: var(--metin);
}
.acilis .logo { font-size: 1.75rem; }
.acilis-yazi { color: var(--metin-3); font-size: .875rem; }
.acilis-donen {
  width: 1.5rem; height: 1.5rem; border-radius: 50%;
  border: 2px solid var(--cizgi); border-top-color: var(--metin-2);
  animation: don .8s linear infinite;
}
@keyframes don { to { transform: rotate(360deg); } }

/* ------------------------------------------------------------------ LOGO (tek yer: js/marka.js logoHtml) */
.logo { display: inline-flex; align-items: center; gap: .6em; color: inherit; line-height: 1; text-decoration: none; }
.logo-isaret { width: 1.5em; height: 1.5em; flex: 0 0 auto; display: block; }
.logo-yazi { font-family: 'Sora', var(--yazi); font-weight: 700; font-size: 1em; letter-spacing: -.02em; white-space: nowrap; }   /* Sora yalnız burada */
.logo.acik-zemin { color: var(--lacivert); }

/* ------------------------------------------------------------------ KABUK */
.kabuk { min-height: 100vh; min-height: 100dvh; }
.ana-alan { min-width: 0; }

#icerik {
  position: relative;
  max-width: var(--icerik-en);
  margin: 0 auto;
  padding: calc(var(--ust-yukseklik) + var(--guvenli-ust) + 1rem) 1rem
           calc(var(--alt-yukseklik) + var(--guvenli-alt) + 1.5rem);
  min-height: 100vh; min-height: 100dvh;
  outline: none;
}

/* Üst çubuk. Telefonda: solda şantiye seçici BAŞLIK olarak, sağda arama + bildirim */
.ust {
  position: fixed; top: 0; left: 0; right: 0; z-index: 40;
  height: calc(var(--ust-yukseklik) + var(--guvenli-ust));
  padding: var(--guvenli-ust) .5rem 0 1rem;
  display: flex; align-items: center; gap: .25rem;
  background: var(--yuzey);
  border-bottom: var(--kenar) solid var(--cizgi);
}
.ust-baslik {
  flex: 1; min-width: 0; margin: 0;
  font-size: var(--t-satir); font-weight: 600; line-height: 1.2;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ust-sag { display: flex; align-items: center; gap: .125rem; }

.ust-btn {
  position: relative; display: inline-grid; place-items: center;
  width: var(--hedef); height: var(--hedef); padding: 0;
  border: 0; border-radius: var(--r-m); background: transparent; color: var(--metin);
  transition: background var(--sure-hizli);
}
.ust-btn:hover { background: var(--yuzey-3); }
.ust-btn:active { background: var(--cizgi); }
.ust-btn svg { width: 1.375rem; height: 1.375rem; }

.zil-rozet {
  position: absolute; top: .3rem; right: .2rem; min-width: 1.125rem; height: 1.125rem; padding: 0 .3rem;
  background: #F47B20; color: #161208; border-radius: var(--r-hap);   /* okunmamış: marka turuncusu, koyu yazı (kontrast 6:1) — kurucu firma isteği */
  font-size: .6875rem; font-weight: 600; line-height: 1.125rem; text-align: center;
  border: 2px solid var(--yuzey);
}

/* Şantiye seçici: telefonda başlık gibi (soldaki tek bağlam), ofiste çizgili kutu */
.santiye-btn {
  display: inline-flex; align-items: center; gap: .375rem;
  height: var(--hedef); max-width: 16rem; padding: 0 .75rem; margin-right: .125rem;
  border: var(--kenar) solid var(--cizgi); border-radius: var(--r-m);
  background: var(--yuzey); color: var(--metin); font-size: var(--t-govde); font-weight: 500;
  transition: background var(--sure-hizli);
}
.santiye-btn:hover { background: var(--yuzey-3); }
.santiye-btn span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.santiye-btn svg { width: 1rem; height: 1rem; flex: 0 0 auto; color: var(--metin-3); }
@media (max-width: 1023px) {
  .ust.santiyeli .ust-baslik {            /* başlık yerini şantiye seçiciye bırakır (h1 ekran okuyucuda kalır) */
    position: absolute !important; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0);
  }
  .ust.santiyeli .ust-sag { flex: 1; min-width: 0; }
  .santiye-btn {
    flex: 1; min-width: 0; max-width: none; justify-content: flex-start;
    margin: 0 .25rem 0 -.25rem; border-color: transparent; background: transparent;
    font-size: var(--t-satir); font-weight: 600;
  }
  .santiye-btn:hover { background: var(--yuzey-3); }
  .ust-masaustu { display: none !important; }
}

.ara-btn {
  display: inline-grid; place-items: center; width: var(--hedef); height: var(--hedef); padding: 0;
  border: 0; border-radius: var(--r-m); background: transparent; color: var(--metin);
}
.ara-btn:hover { background: var(--yuzey-3); }
.ara-btn svg { width: 1.375rem; height: 1.375rem; }
.ara-btn .ara-yazi, .ara-btn kbd { display: none; }

.avatar-btn {
  display: none; width: var(--hedef); height: var(--hedef); margin-left: .375rem; padding: 0;
  border: 0; border-radius: 50%; background: var(--yuzey-3); color: var(--metin);
  font-weight: 600; font-size: .8125rem;
  place-items: center; overflow: hidden;
}
.avatar-btn img { width: 100%; height: 100%; object-fit: cover; }

.cevrimdisi-serit {
  position: fixed; z-index: 39; left: 0; right: 0;
  top: calc(var(--ust-yukseklik) + var(--guvenli-ust));
  background: var(--kirmizi); color: var(--kirmizi-u); font-size: .8125rem; font-weight: 600;
  text-align: center; padding: .3rem;
}

/* Alt çubuk (telefon / tablet): Bugün · Puantaj · [Kaydet] · Mesajlar · Menü */
.alt {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 40;
  height: calc(var(--alt-yukseklik) + var(--guvenli-alt));
  padding: .375rem .25rem var(--guvenli-alt);
  display: flex; align-items: stretch; gap: .125rem;
  background: var(--yuzey);
  border-top: var(--kenar) solid var(--cizgi);
}
.alt a, .alt button.alt-oge {
  flex: 1; min-width: 0; position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .125rem;
  min-height: var(--hedef);
  text-decoration: none; color: var(--metin-3);
  font-size: var(--t-meta); font-weight: 500; line-height: 1.1;
  border: 0; background: transparent; border-radius: var(--r-m);
  -webkit-user-select: none; user-select: none;
}
.alt a .alt-ikon { display: grid; place-items: center; width: 2rem; height: 1.75rem; }
.alt a .alt-ikon svg { width: 1.375rem; height: 1.375rem; }
.alt a:active { background: var(--yuzey-3); }
.alt a[aria-current="page"] { color: var(--metin); font-weight: 600; }
.alt a[aria-current="page"]::before {       /* seçili sekme: üstte kısa mürekkep çizgi (renkli hap yok) */
  content: ""; position: absolute; top: -.375rem; left: 28%; right: 28%; height: 2px; background: var(--metin);
}
:root[data-tema="gunes"] .alt a { font-size: .8125rem; font-weight: 600; color: var(--metin); }
.alt a .alt-rozet {
  position: absolute; top: .1rem; left: calc(50% + .55rem);
  min-width: 1rem; height: 1rem; padding: 0 .25rem; border-radius: var(--r-hap);
  background: var(--kirmizi); color: var(--kirmizi-u); border: 2px solid var(--yuzey);
  font-size: .625rem; font-weight: 600; line-height: .75rem; text-align: center;
}
/* KAYDET: işaret turuncusu, köşeli (12), mürekkep ikon + etiket. Uygulamada tek turuncu düğme. */
.alt .alt-kaydet {
  flex: 0 0 4.75rem; align-self: center; height: 3.5rem; margin: 0 .25rem;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .125rem;
  border: 0; border-radius: .75rem; background: var(--isaret); color: var(--isaret-ust);
  font-size: var(--t-meta); font-weight: 600; line-height: 1;
  transition: filter var(--sure-hizli);
}
.alt .alt-kaydet svg { width: 1.5rem; height: 1.5rem; stroke-width: 2.2; }
.alt .alt-kaydet:active { filter: brightness(.9); }
:root[data-tema="gunes"] .alt .alt-kaydet { border: 2px solid #000; }

/* Yan menü (≥1024px): nötr yüzey */
.yan {
  display: none;
  position: fixed; left: 0; top: 0; bottom: 0; z-index: 45;
  width: var(--yan-genislik);
  flex-direction: column;
  background: var(--yan-zemin); color: var(--yan-metin);
  border-right: var(--kenar) solid var(--yan-cizgi);
  transition: width var(--sure) var(--egri);
  overflow: hidden;
}
.yan-ust { display: flex; align-items: center; gap: .5rem; height: 4rem; padding: 0 .75rem 0 1rem; flex: 0 0 auto; }
.yan-daralt {
  margin-left: auto; width: var(--hedef); height: var(--hedef); display: grid; place-items: center;
  border: 0; border-radius: var(--r-m); background: transparent; color: var(--metin-3);
}
.yan-daralt:hover { background: var(--yuzey-3); color: var(--metin); }
.yan-daralt svg { width: 1.25rem; height: 1.25rem; transition: transform var(--sure) var(--egri); }
:root[data-yan="dar"] .yan-daralt svg { transform: rotate(180deg); }

/* Masaüstü: Kaydet yan menünün üstünde birincil (turuncu) düğme */
.yan-kaydet { flex: 0 0 auto; padding: 0 .75rem .5rem; }
.yan-kaydet button {
  width: 100%; min-height: var(--hedef); display: flex; align-items: center; justify-content: center; gap: .5rem;
  border: 0; border-radius: .75rem; background: var(--isaret); color: var(--isaret-ust);
  font-size: var(--t-govde); font-weight: 600;
}
.yan-kaydet button:hover { filter: brightness(.95); }
.yan-kaydet button svg { width: 1.25rem; height: 1.25rem; stroke-width: 2.2; }
:root[data-tema="gunes"] .yan-kaydet button { border: 2px solid #000; }

.yan-nav { flex: 1; overflow-y: auto; overflow-x: hidden; padding: .25rem .625rem 1rem; scrollbar-width: thin; scrollbar-color: var(--cizgi) transparent; }
.yan-grup { margin-top: 1.125rem; }
.yan-grup:first-child { margin-top: .25rem; }
.yan-grup-ad {
  padding: 0 .625rem .375rem; font-size: var(--t-meta); font-weight: 500; letter-spacing: .02em;
  color: var(--metin-3); white-space: nowrap;
}
.yan-oge {
  position: relative; display: flex; align-items: center; gap: .75rem;
  min-height: var(--hedef); padding: 0 .75rem; margin-bottom: 1px;
  border-radius: var(--r-m); text-decoration: none; color: var(--yan-metin);
  font-size: var(--t-govde); font-weight: 500; white-space: nowrap;
  transition: background var(--sure-hizli), color var(--sure-hizli);
}
.yan-oge:hover { background: var(--yuzey-2); color: var(--yan-metin-vurgu); }
.yan-oge svg { width: 1.25rem; height: 1.25rem; flex: 0 0 auto; stroke-width: 1.6; }
.yan-oge[aria-current="page"] { background: var(--yan-secili); color: var(--yan-metin-vurgu); font-weight: 600; }
.yan-oge[aria-current="page"]::before {       /* solda 2 px mürekkep çizgi */
  content: ""; position: absolute; left: 0; top: .5rem; bottom: .5rem; width: 2px; background: var(--metin);
}
.yan-rozet {
  margin-left: auto; min-width: 1.25rem; height: 1.25rem; padding: 0 .35rem; border-radius: var(--r-hap);
  background: var(--kirmizi); color: var(--kirmizi-u); font-size: var(--t-meta); font-weight: 600; line-height: 1.25rem; text-align: center;
}
.yan-alt { flex: 0 0 auto; padding: .75rem .875rem 1rem; border-top: var(--kenar) solid var(--yan-cizgi); font-size: var(--t-meta); color: var(--metin-3); white-space: nowrap; }

:root[data-yan="dar"] .yan-ad,
:root[data-yan="dar"] .yan-grup-ad span,
:root[data-yan="dar"] .yan-alt-yazi,
:root[data-yan="dar"] .yan-kaydet .yan-kaydet-yazi { display: none; }
:root[data-yan="dar"] .yan-ust .logo-yazi { display: none; }
:root[data-yan="dar"] .yan-ust { padding: 0; flex-direction: column; justify-content: center; gap: .25rem; height: 5.5rem; }
:root[data-yan="dar"] .yan-daralt { margin: 0; }
:root[data-yan="dar"] .yan-oge { justify-content: center; padding: 0; }
:root[data-yan="dar"] .yan-rozet { position: absolute; top: .2rem; right: .35rem; margin: 0; min-width: 1rem; height: 1rem; line-height: 1rem; font-size: .625rem; }
:root[data-yan="dar"] .yan-grup-ad { padding-bottom: .5rem; border-bottom: var(--kenar) solid var(--cizgi); margin-bottom: .25rem; }

/* Çekip yenile: ŞERİT METRE (telefon). Yukarıdan çekildikçe soldan sağa cm çentikleri uzar ve sayılır (0 … 60 cm);
   eşikte "Bırak yenilesin"; bırakınca şerit sarılır, yenilenirken çentikler yavaşça akar. Süs değil: çekme mesafesini ve eşiği gösterir. */
.serit-metre {
  position: fixed; left: 0; right: 0; z-index: 38;
  top: calc(var(--ust-yukseklik) + var(--guvenli-ust));
  height: 3.75rem; padding: 0 1rem; background: var(--zemin); color: var(--metin);
  border-bottom: var(--kenar) solid var(--cizgi);
  transform: translateY(-100%); visibility: hidden; pointer-events: none;
}
.serit-metre.acik { visibility: visible; }
.sm-kap { position: relative; height: 100%; overflow: hidden; }
.sm-svg { position: absolute; left: 0; top: 6px; width: 100%; height: 30px; display: block; overflow: hidden; }
.sm-cizgi, .sm-cm { stroke: var(--metin); stroke-width: 1; fill: none; shape-rendering: crispEdges; }
.sm-cm.uzun { stroke-width: 1.5; }
.sm-sayi { fill: var(--metin-3); font: 500 8px var(--yazi); text-anchor: middle; }
.sm-yazi {
  position: absolute; left: 0; right: 0; bottom: .375rem; text-align: center;
  font-size: var(--t-etiket); font-weight: 500; color: var(--metin-2); font-variant-numeric: tabular-nums; line-height: 1.2;
}
.serit-metre.esik .sm-yazi { color: var(--metin); font-weight: 600; }
.serit-metre.sarilirken { transition: transform var(--sure-3) var(--egri-cikis); }                 /* bırakınca şerit sarılır */
.serit-metre.sarilirken .sm-svg { transition: clip-path var(--sure-3) var(--egri-cikis); }
.serit-metre.yenileniyor .sm-etiket { opacity: 0; }
.serit-metre.yenileniyor .sm-akis { animation: sm-akis 2.4s linear infinite; }                       /* yalnız yenilenirken: işlevsel meşgul göstergesi */
@keyframes sm-akis { to { transform: translateX(calc(var(--sm-p, 60px) * -1)); } }

/* Sayfa içi giriş: yalnız yumuşak belirme (kayma/sıçrama yok) */
@keyframes gir { from { opacity: 0; } to { opacity: 1; } }
#icerik > * { animation: gir var(--sure-2) var(--egri-cikis) both; }

/* GÖRÜNÜM GEÇİŞLERİ (View Transitions). Yön bilgi verir:
     ileri  → yeni sayfa sağdan 12 px + opacity   geri → soldan   sekme (alt çubuk / yan menü) → yalnız çapraz solma 120 ms
   Yalnız #icerik hareket eder; eski sayfa tam opak KALIR, yenisi üstüne gelir (iki yarı saydam içeriğin "hayalet" görünmesi, kontrast çöküşü olmaz).
   Grup boyut/konum geçişi kapalı (içerik uzunlukları farklı olunca esneme olmasın). Destek yoksa ya da hareket azaltılmışsa geçiş hiç çalışmaz. */
@supports (view-transition-name: x) {
  html.gecis-yol #icerik { view-transition-name: icerik; background: var(--zemin); }   /* opak: yeni sayfa solarken eskisi içinden görünmez (hayalet yok) */
  html.gecis-yol #icerik > * { animation: none; }
  html.gecis-yol::view-transition-group(icerik) { animation: none; }
  html.gecis-yol::view-transition-old(icerik) { animation: none; mix-blend-mode: normal; }
  html.gecis-yol::view-transition-new(icerik) { animation: gecis-sekme 120ms linear both; mix-blend-mode: normal; }
  html.gecis-yol[data-yon="ileri"]::view-transition-new(icerik) { animation: gecis-ileri var(--sure-3) var(--egri-cikis) both; }
  html.gecis-yol[data-yon="geri"]::view-transition-new(icerik)  { animation: gecis-geri  var(--sure-3) var(--egri-cikis) both; }
  html.gecis-yol::view-transition-old(root),
  html.gecis-yol::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
}
@keyframes gecis-sekme { from { opacity: 0; } }
@keyframes gecis-ileri { from { opacity: 0; transform: translateX(12px); } }
@keyframes gecis-geri  { from { opacity: 0; transform: translateX(-12px); } }
html.gecis-tema::view-transition-old(root),
html.gecis-tema::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
html.gecis-tema::view-transition-old(root) { z-index: 1; }
html.gecis-tema::view-transition-new(root) { z-index: 2; }

/* ------------------------------------------------------------------ GİRİŞ: sakin, tek sütun */
.giris {
  min-height: 100vh; min-height: 100dvh;
  display: flex; align-items: flex-start; justify-content: center;
  padding: calc(3rem + var(--guvenli-ust)) 1rem calc(2rem + var(--guvenli-alt));
  background: var(--zemin); color: var(--metin);
}
.giris-kap { width: 100%; max-width: 24rem; }
.giris-ust { margin-bottom: 1.75rem; }
.giris-ust .logo { font-size: 1.5rem; }
.giris-firma { font-weight: 600; font-size: var(--t-bolum); line-height: 1.25; margin: 1.5rem 0 0; overflow-wrap: anywhere; }
.giris-alt { color: var(--metin-3); font-size: var(--t-govde); margin: .25rem 0 0; }
.giris-kart {
  width: 100%;
  background: var(--yuzey); border: var(--kenar) solid var(--cizgi); border-radius: var(--r-l);
  padding: 1.25rem;
}
.giris-kart h2 { margin: 0 0 .25rem; font-size: var(--t-satir); }
.giris-kart .giris-yardim { margin: 0 0 1.25rem; color: var(--metin-2); font-size: var(--t-govde); }
.giris-ipucu { color: var(--metin-2); font-size: var(--t-etiket); text-align: center; margin-top: 1.25rem; line-height: 1.6; }
.giris-ipucu button {
  background: none; border: 0; padding: .35rem .5rem; min-height: var(--hedef); color: var(--metin-2);
  text-decoration: underline; font-size: var(--t-etiket); border-radius: var(--r-s);
}
.giris-tema { display: flex; justify-content: center; gap: .5rem; margin-top: .75rem; }
.giris-tema button {
  width: 2.5rem; height: 2.5rem; border-radius: 50%; border: var(--kenar) solid var(--cizgi);
  background: var(--yuzey); color: var(--metin-2); display: grid; place-items: center; padding: 0;
}
.giris-tema button[aria-pressed="true"] { border-color: var(--metin); color: var(--metin); background: var(--yuzey-3); }
.giris-tema svg { width: 1.125rem; height: 1.125rem; }

/* ------------------------------------------------------------------ GENİŞ EKRAN */
@media (min-width: 768px) {
  #icerik { padding-left: 1.5rem; padding-right: 1.5rem; }
  .giris { align-items: center; padding-top: 2rem; }
}

@media (min-width: 1024px) {
  :root { --ust-yukseklik: 3.75rem; }
  .yan { display: flex; }
  .alt, .serit-metre { display: none !important; }
  .ana-alan { margin-left: var(--yan-genislik); transition: margin-left var(--sure) var(--egri); }
  .ust { left: var(--yan-genislik); padding-left: 1.5rem; padding-right: 1rem; transition: left var(--sure) var(--egri); }
  .cevrimdisi-serit { left: var(--yan-genislik); }
  #icerik { padding: calc(var(--ust-yukseklik) + var(--guvenli-ust) + 1.5rem) 2rem 3rem; }
  .ust-baslik { font-size: var(--t-satir); flex: 0 1 auto; margin-right: auto; }
  .ust-sag { gap: .25rem; flex: 1 1 auto; justify-content: flex-end; }
  .ust-sag .ust-baslik-bosluk { flex: 1; }
  .ara-btn {
    width: 15rem; justify-content: flex-start; display: inline-flex; align-items: center; gap: .5rem;
    padding: 0 .625rem; border: var(--kenar) solid var(--cizgi); background: var(--yuzey); color: var(--metin-3);
    font-size: var(--t-govde); margin: 0 .25rem;
  }
  .ara-btn:hover { background: var(--yuzey-3); }
  .ara-btn svg { width: 1.125rem; height: 1.125rem; }
  .ara-btn .ara-yazi { display: inline; flex: 1; text-align: left; }
  .ara-btn kbd {
    display: inline-block; font: 500 .6875rem var(--yazi); padding: .15rem .4rem; border-radius: .3rem;
    background: var(--yuzey-2); border: var(--kenar) solid var(--cizgi); color: var(--metin-3);
  }
  .avatar-btn { display: inline-grid; }
  .ust-masaustu { display: inline-grid !important; }
  #toastlar { bottom: auto !important; top: calc(var(--ust-yukseklik) + .75rem) !important; left: auto !important; right: 1rem !important; width: 24rem; }
}

@media (min-width: 1480px) {
  :root { --icerik-en: 88rem; }
}