/* Uygulama kabuğu: üst çubuk, gezinme (yan panel · alt menü · öbek paneli),
   profil paneli, sayfa alanı.
   Kaynak: 6-belgeler/tasarim.md · "Bileşenler" ve "Arayüz kararları" */

/* ---------- Üst çubuk ---------- */
.ust-cubuk {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: var(--bosluk);
  height: var(--ust-cubuk);
  padding: 0 var(--bosluk);
  /* Düz kırmızı yerine hafif bir iniş: üstte açık, altta koyu. Çubuk
     kâğıdın üstüne konmuş bir cilt sırtı gibi durur, düz boya gibi
     değil (2026.141). */
  background: linear-gradient(180deg, var(--vurgu) 0%, var(--yan-vurgu-koyu) 100%);
  color: var(--yuzey);
  /* Alt kenar tek çizgi değil: önce ince tel, sonra sıcak gölge.
     Sayfanın kâğıdı çubuğun altından başlıyormuş gibi görünsün. */
  border-bottom: 2px solid var(--defter-tel);
  box-shadow: 0 10px 22px -14px rgba(34, 37, 42, .75),
              0 2px 6px -3px rgba(34, 37, 42, .45);
  padding-top: env(safe-area-inset-top, 0px);
  height: calc(var(--ust-cubuk) + env(safe-area-inset-top, 0px));
}

/* Geri oku: koyu üst çubukta kendi dairesi içinde durur. Simge tek
   başına bırakıldığında düğme olduğu anlaşılmıyor, basılacak yer
   görünmüyordu; ince bir yüzey ve kontur bunu söyler. Görünen daire
   36px'tir, dokunma alanı .dokunma-alani ile 44px'e tamamlanır
   (6-belgeler/NIZAM.md · "Dokunma hedefi"). Basma tepkisi küçülmedir: geçiş
   listesinde transform da durur, yoksa .bas-kucuk'un geçişini ezer. */
.ust-geri {
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .10);
  border: 1px solid var(--defter-tel);
  color: var(--kart-yuzey);
  transition:
    background-color var(--gecis) ease-out,
    border-color var(--gecis) ease-out,
    opacity var(--gecis) ease-out,
    transform var(--basma) ease-out;
}

@media (hover: hover) {
  .ust-geri:hover:not(:disabled) {
    background: rgba(168, 174, 182, .22);
    border-color: var(--defter-tel);
  }
}

/* Gidilecek yer yokken düğme yüzeyini bırakır, yalnız konturu kalır:
   yeri durur ama dolu görünmez. */
.ust-geri:disabled {
  background: transparent;
  border-color: rgba(168, 174, 182, .30);
  opacity: .5;
}

/* Ok dairenin ortasında optik olarak sağa kaçıyor; bir piksel sola
   alınınca ortalanmış görünür. */
.ust-geri .simge { margin-right: 1px; }

/* Okun kuyruğundaki elmas koyu zeminde sönük kalıyordu; çubukta açık
   gri olur — çevresindeki tel ile aynı renk. */
.ust-geri .gri-kat { stroke: var(--defter-tel); }

/* Amblem her ekranda aynı yerde durur, sayfa değişince yeri kaymaz. */
.ust-logo {
  flex: none;
  height: 32px;
  width: auto;
}

/* Künye kutusu kalan payı alır. Sayfa adındaki üç nokta kırpması
   min-width: 0 ile durur. */
.ust-kimlik {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  flex: 1 1 auto;
}

/* Firma adı · küçük, aralıklı, soluk. */
.ust-marka {
  font-size: var(--etiket-boy);
  line-height: var(--etiket-satir);
  letter-spacing: .14em;
  text-transform: uppercase;
  opacity: .8;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ust-alt-satir {
  display: flex;
  align-items: center;
  gap: var(--bosluk);
  min-width: 0;
}

/* Sayfa adı yol izinin kendisidir; kuşaktaki başlıkla aynı yazıyla
   yazılır ki iki başlık aynı ailenin olduğu belli olsun. */
.ust-sayfa-adi {
  font-family: var(--yazi-baslik);
  font-size: 17px;
  line-height: 22px;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--kart-yuzey);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Şube seçici: ince görünür, dokunma alanı 44px'e tamamlanır. */
.ust-sube {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--bosluk) / 2);
  height: 22px;
  padding: 0 var(--bosluk);
  border-radius: 999px;
  background: rgba(255, 255, 255, .10);
  border: 1px solid rgba(168, 174, 182, .55);
  color: var(--kart-yuzey);
  font-size: var(--etiket-boy);
  line-height: var(--etiket-satir);
  white-space: nowrap;
}

/* Tüm şubeler seçiliyken düğmede yazı yoktur: kapsamı panelin en
   tepesindeki satır söyler, üst çubuk yalnız iki simgeyle kalır. */
.ust-sube-yalin { padding: 0 calc(var(--bosluk) / 2); }

.ust-sube:disabled { opacity: .55; cursor: default; }

/* Kullanıcı çipi: avatar, ad ve rol bir arada durur. Yalnız avatar kimin
   girdiğini belirsiz bırakır (6-belgeler/NIZAM.md · "Üst çubuk · Kullanıcı sağ üstte
   çiple durur"). Çip daralan taraftır: yer kalmayınca ad ve rol üç noktaya
   iner, avatar hiç küçülmez. */
.ust-kullanici {
  flex: 0 1 auto;
  display: flex;
  align-items: center;
  gap: var(--bosluk);
  min-width: var(--avatar);
  /* Çip, sayfa adının yerini yemez: sayfa adı yol izinin kendisidir
     (6-belgeler/NIZAM.md · "Üst çubuk · Yol izi geri oku ve başlıktır"). Dar ekranda
     payı orantıyla, geniş ekranda sabit bir tavanla sınırlanır. */
  max-width: min(36%, 168px);
  height: var(--dokunma);
  padding: 0 var(--bosluk) 0 calc(var(--bosluk) / 2);
  border-radius: 999px;
  background: rgba(255, 255, 255, .10);
  border: 1px solid rgba(168, 174, 182, .45);
  color: var(--kart-yuzey);
  transition: background-color var(--gecis) ease-out,
              border-color var(--gecis) ease-out,
              transform var(--basma) ease-out;
}

@media (hover: hover) {
  .ust-kullanici:hover {
    background: rgba(168, 174, 182, .18);
    border-color: var(--defter-tel);
  }
}

.ust-kullanici-kimlik {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  text-align: left;
}

.ust-kullanici-ad {
  font-family: var(--yazi-baslik);
  font-size: var(--kucuk-boy);
  line-height: 16px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ust-kullanici-rol {
  font-size: 10px;
  line-height: 14px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--defter-tel);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ust-avatar {
  position: relative;
  flex: 0 0 var(--avatar);
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--avatar);
  height: var(--avatar);
  border-radius: 999px;
  background: rgba(255, 255, 255, .14);
  box-shadow: 0 0 0 1.5px var(--defter-tel);
  color: var(--defter-tel);
  font-family: var(--yazi-baslik);
  font-size: var(--kucuk-boy);
  font-weight: 600;
}

/* Kullanıcının fotoğrafı varsa daireyi o doldurur; yoksa baş harfler
   kalır (5-veritabani/2-guncellemeler/45 · profil_fotografi). */
.ust-avatar-resim {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Yuvarlaklık resmin kendisinde: daireye overflow:hidden verilseydi
     okunmamış bildirim sayısı kırpılırdı, o daireden taşar. */
  border-radius: 999px;
}

.ust-avatar-sayi {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--defter-tel);
  color: var(--defter-koyu);
  box-shadow: 0 0 0 1.5px var(--vurgu);
  font-size: 10px;
  font-weight: 600;
  line-height: 16px;
  text-align: center;
  z-index: 1;
}

/* ---------- Üst çubuk · günlük iş akışı düğmesi ---------- */
.ust-akis {
  position: relative;
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .10);
  border: 1px solid rgba(168, 174, 182, .55);
  color: var(--kart-yuzey);
  transition: background-color var(--gecis) ease-out,
              border-color var(--gecis) ease-out,
              transform var(--basma) ease-out;
}

@media (hover: hover) {
  .ust-akis:hover { background: rgba(168, 174, 182, .22); }
}

/* Panel açıkken düğme dolu durur: hangi durumda olduğu bir bakışta
   anlaşılsın. */
.ust-akis-acik {
  background: var(--defter-tel);
  border-color: var(--defter-tel);
  color: var(--defter-koyu);
}

/* Kalan iş sayısı · bildirim rozetiyle aynı dil. */
.ust-akis-sayi {
  position: absolute;
  top: -5px;
  right: -5px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--defter-tel);
  color: var(--defter-koyu);
  box-shadow: 0 0 0 1.5px var(--vurgu);
  font-size: 10px;
  font-weight: 600;
  line-height: 16px;
  text-align: center;
}

/* ---------- Günlük İş Akışı paneli ----------
   Sağdan açılır ve AÇIK KALIR: kullanıcı listeye bakarken uygulamayı
   kullanmaya devam eder (kullanıcının isteği · 2026.146).

   HER ÖLÇÜDE SAYFANIN ÜSTÜNDE durur (kullanıcının kararı · 2026.147):
   sayfa daralmaz, tablolar ve kartlar yerinde kalır. Panel açılıp
   kapanırken altındaki ekranın yeniden yerleşmesi gözü yoruyordu. */
.akis-panel {
  position: fixed;
  top: calc(var(--ust-cubuk) + env(safe-area-inset-top, 0px));
  right: 0;
  bottom: 0;
  z-index: 38;
  width: min(360px, 88vw);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  padding: calc(var(--bosluk) * 2);
  background-color: var(--kart-zemin);
  background-image: var(--kart-desen);
  border-left: 2px solid var(--defter-tel);
  box-shadow: -18px 0 34px -26px rgba(34, 37, 42, .8);
  transform: translateX(100%);
  transition: transform var(--gecis) ease-out;
  /* Kayarken kendi katmanında kalsın; altındaki sayfa yeniden
     boyanmasın. */
  will-change: transform;
}

body.akis-acik .akis-panel { transform: none; }

/* Rehber görünümünde çekmece genişler (2026.195): örnek tablolar ve
   nakit akış hücreleri 360px'e sığmıyordu. Geçiş genişlikte değil
   yalnız kaydırmada: genişliği canlandırmak panelin içindekileri her
   karede yeniden yerleştirir ve takılır. */
body.akis-rehberde .akis-panel { width: min(520px, 94vw); }

/* Telefonda alt menü panelin üstünde duruyor: son satır onun altında
   kalmasın diye panelin dibi kadar pay bırakılır. */
@media (max-width: 899.98px) {
  .akis-panel {
    padding-bottom: calc(var(--alt-menu) + env(safe-area-inset-bottom, 0px)
                         + var(--bosluk) * 2);
  }
}

.akis-tepe {
  display: flex;
  align-items: flex-start;
  gap: var(--bosluk);
  margin-bottom: calc(var(--bosluk) * 2);
}

.akis-tepe-yazi { flex: 1; min-width: 0; }

.akis-baslik {
  display: block;
  font-family: var(--yazi-baslik);
  font-size: var(--h2-boy);
  line-height: var(--h2-satir);
  font-weight: 600;
  color: var(--defter-koyu);
}

.akis-tarih {
  display: block;
  font-size: var(--etiket-boy);
  line-height: var(--etiket-satir);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--gri-vurgu);
}

.akis-gizle { flex: none; color: var(--metin); }

/* İlerleme · kaç iş bitti. */
.akis-olcu {
  display: flex;
  align-items: center;
  gap: var(--bosluk);
  margin-bottom: calc(var(--bosluk) * 2);
}

.akis-cubuk {
  flex: 1;
  height: 6px;
  border-radius: 999px;
  background: rgba(183, 44, 40, .12);
  overflow: hidden;
}

.akis-cubuk span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--defter-tel), var(--defter-koyu));
  transition: width var(--gecis) ease-out;
}

.akis-sayi {
  flex: none;
  font-family: var(--yazi-baslik);
  font-size: var(--kucuk-boy);
  font-variant-numeric: tabular-nums;
  color: var(--defter-koyu);
}

.akis-liste {
  display: flex;
  flex-direction: column;
  gap: calc(var(--bosluk) * 1.25);
}

/* Bölüm başlığı · listenin ortasında bir ara verir (2026.190).
   Kutusu yoktur: işaretlenecek bir iş değil, altındakileri toplayan bir
   ad. Kart da değil ki listede iş gibi durmasın. */
.akis-bolum {
  display: flex;
  flex-direction: column;
  gap: calc(var(--bosluk) / 4);
  padding: calc(var(--bosluk) * 1.25) calc(var(--bosluk) / 2) 0;
  border-top: 1px solid var(--ayirici);
}

.akis-bolum-ad {
  font-family: var(--yazi-baslik);
  font-size: var(--kucuk-boy);
  line-height: var(--kucuk-satir);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--defter-koyu);
  opacity: .85;
}

.akis-satir {
  display: flex;
  gap: calc(var(--bosluk) * 1.5);
  padding: calc(var(--bosluk) * 1.25);
  border: 1px solid var(--kart-kenar);
  border-radius: var(--kose-kutu);
  background: var(--kart-yuzey);
}

/* Biten iş soluklaşır ama okunur kalır: listede kaldığı yer görünsün. */
.akis-satir-bitti { opacity: .62; }

.akis-kutu {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  border: 1px solid var(--kart-kenar);
  background: var(--yuzey);
  color: var(--defter-koyu);
  font-family: var(--yazi-baslik);
  font-size: var(--kucuk-boy);
  cursor: pointer;
  transition: background-color var(--gecis) ease-out,
              border-color var(--gecis) ease-out;
}

.akis-satir-bitti .akis-kutu {
  background: var(--defter-koyu);
  border-color: var(--defter-koyu);
  color: var(--kart-yuzey);
}

.akis-no { opacity: .75; }

.akis-yazi { min-width: 0; flex: 1; }

/* "i" düğmesi · satırın sağ ucunda, sönük durur (2026.193). İşin adı
   kadar çekmemeli: rehber ikinci yoldur, ilk yol adına basmaktır. */
.akis-rehber {
  flex: none;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 1px solid var(--kart-kenar);
  border-radius: 999px;
  background: var(--yuzey);
  color: var(--defter-koyu);
  opacity: .6;
  cursor: pointer;
  transition: opacity var(--gecis) ease-out,
              border-color var(--gecis) ease-out;
}

@media (hover: hover) {
  .akis-rehber:hover { opacity: 1; border-color: var(--defter-koyu); }
}

.akis-rehber:focus-visible { opacity: 1; }

.akis-ad {
  display: block;
  padding: 0;
  border: 0;
  background: none;
  font-family: var(--yazi-baslik);
  font-size: var(--govde-boy);
  line-height: var(--govde-satir);
  font-weight: 600;
  color: var(--defter-koyu);
  text-align: left;
  cursor: pointer;
}

@media (hover: hover) {
  button.akis-ad:hover { text-decoration: underline; }
}

.akis-ad-pasif { color: var(--metin); opacity: .7; cursor: default; }

.akis-satir-bitti .akis-ad { text-decoration: line-through; }

.akis-aciklama {
  display: block;
  margin-top: 2px;
  font-size: var(--kucuk-boy);
  line-height: var(--kucuk-satir);
  opacity: .75;
}

/* ---- Sayfa notları · panelin ikinci yüzü ---- */
.akis-duzen { flex: none; color: var(--defter-koyu); }

.akis-not-bolum { margin-bottom: calc(var(--bosluk) * 2.5); }

.akis-not-baslik {
  display: flex;
  align-items: center;
  gap: var(--bosluk);
  margin-bottom: var(--bosluk);
  font-family: var(--yazi-baslik);
  font-size: var(--govde-boy);
  line-height: var(--govde-satir);
  font-weight: 600;
  color: var(--defter-koyu);
}

.akis-not-sayi {
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: rgba(183, 44, 40, .12);
  font-family: var(--yazi-govde);
  font-size: var(--etiket-boy);
  line-height: 20px;
  text-align: center;
}

.akis-not-ekle {
  display: flex;
  gap: var(--bosluk);
  margin-bottom: var(--bosluk);
}

.akis-not-ekle .alan-kutu { flex: 1; min-width: 0; }

.akis-not-liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--bosluk) / 2);
}

.akis-not {
  display: flex;
  align-items: flex-start;
  gap: var(--bosluk);
  padding: calc(var(--bosluk) * 1.25);
  border: 1px solid var(--kart-kenar);
  border-radius: var(--kose-kutu);
  background: var(--kart-yuzey);
}

.akis-not-yazi {
  flex: 1;
  min-width: 0;
  font-size: var(--kucuk-boy);
  line-height: var(--kucuk-satir);
  overflow-wrap: break-word;
}

.akis-not-tarih {
  flex: none;
  font-size: var(--etiket-boy);
  line-height: var(--etiket-satir);
  opacity: .55;
}

.akis-not-sil {
  flex: none;
  width: 24px;
  height: 24px;
  color: var(--metin);
  opacity: .6;
}

@media (hover: hover) {
  .akis-not-sil:hover { opacity: 1; color: var(--metin-hata); }
}

.akis-not-bos {
  margin: 0;
  font-size: var(--kucuk-boy);
  line-height: var(--kucuk-satir);
  opacity: .65;
}

.akis-dip {
  margin-top: calc(var(--bosluk) * 2.5);
  padding-top: calc(var(--bosluk) * 1.5);
  border-top: 1px solid var(--kart-kenar);
}

.akis-dip p {
  margin: 0 0 var(--bosluk);
  font-size: var(--etiket-boy);
  line-height: var(--etiket-satir);
  opacity: .7;
}

/* İki düğme yan yana; dar panelde alt alta iner (2026.226). */
.akis-dip-dugmeler {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bosluk);
}

.akis-dip-dugmeler > button {
  flex: 1 1 auto;
}

/* ---------- Çevrimdışı şeridi ---------- */
.cevrimdisi-serit {
  position: fixed;
  top: calc(var(--ust-cubuk) + env(safe-area-inset-top, 0px));
  left: 0;
  right: 0;
  z-index: 39;
  padding: calc(var(--bosluk) / 2) calc(var(--bosluk) * 2);
  background: var(--uyari);
  color: var(--metin);
  font-size: var(--etiket-boy);
  line-height: var(--etiket-satir);
  text-align: center;
}

/* Şerit görünürken içeriğin başı altında kalmasın. */
.kabuk-cevrimdisi .kabuk-govde {
  padding-top: calc(var(--ust-cubuk) + env(safe-area-inset-top, 0px) + 24px);
}

/* ---------- Sayfa alanı ---------- */
.kabuk-govde {
  position: relative;
  z-index: 1;
  padding-top: calc(var(--ust-cubuk) + env(safe-area-inset-top, 0px));
  min-height: 100%;
}

.sayfa-alani {
  /* Alt menü "var(--alt-menu) + güvenli alan" yüksekliğinde duruyor ama
     boşluk yalnız --alt-menu kadardı: çentikli telefonlarda listenin son
     satırı çubuğun altında kalıyordu. İkisi aynı hesabı kullanır. */
  padding-bottom: calc(var(--alt-menu) + env(safe-area-inset-bottom, 0px));
  min-height: calc(100vh - var(--ust-cubuk) - env(safe-area-inset-top, 0px));
}

.sayfa {
  width: 100%;
}

/* Telefonda yan panel yoktur: marka ve logo üst çubukta durur ve bütün
   pay künyeye gider. */
@media (max-width: 899.98px) {
  .ust-kimlik { flex: 1; }

  /* Telefonda çubuk üç şeyi birden taşıyamıyordu: firma adı, sayfa adı
     ve kullanıcının adı yan yana sıkışınca sayfa adı "N…" oluyordu.
     Firma adını amblem zaten söylüyor, kullanıcının adını da profil
     paneli. Çubukta kalan tek yazı sayfa adıdır — yol izi odur
     (6-belgeler/NIZAM.md · "Üst çubuk · Yol izi geri oku ve başlıktır"). */
  .ust-marka { display: none; }

  .ust-sayfa-adi { font-size: 17px; line-height: 22px; }

  .ust-kullanici {
    flex: none;
    max-width: none;
    padding: 0;
    background: transparent;
    border: 0;
  }

  .ust-kullanici-kimlik { display: none; }
}

/* ---------- Alt menü · yalnız 900px altında ---------- */
.alt-menu {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  display: flex;
  height: calc(var(--alt-menu) + env(safe-area-inset-bottom, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px);
  border-top: 1px solid var(--kenar);
  background: var(--yuzey);
}

@supports ((backdrop-filter: blur(12px)) or (-webkit-backdrop-filter: blur(12px))) {
  .alt-menu {
    background: rgba(255, 255, 255, .72);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
  }
}

/* Tarayıcıda ana ekran çizgisi payı verilmez. */
@media not all and (display-mode: standalone) {
  .alt-menu {
    height: var(--alt-menu);
    padding-bottom: 0;
  }
}

.alt-menu-sekme {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  color: var(--metin);
  font-size: var(--etiket-boy);
  line-height: var(--etiket-satir);
}

.alt-menu-sekme-secili { color: var(--vurgu); }

.alt-menu-sekme-secili::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 6px;
  width: 20px;
  height: 2px;
  transform: translateX(-50%);
  background: var(--vurgu);
}

/* ---------- Öbek paneli · alttan yukarı ---------- */
.obek-perde {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: var(--perde);
}

.obek-panel {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 51;
  max-height: 70vh;
  overflow-y: auto;
  padding-bottom: calc(var(--bosluk) * 2 + env(safe-area-inset-bottom, 0px));
  background: var(--yuzey);
  border-top-left-radius: var(--kose-modal);
  border-top-right-radius: var(--kose-modal);
}

.obek-panel-baslik {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--bosluk);
  padding: calc(var(--bosluk) * 2);
  padding-bottom: var(--bosluk);
}

.obek-panel-ad {
  font-family: var(--yazi-baslik);
  font-size: var(--h2-boy);
  line-height: var(--h2-satir);
  font-weight: 600;
}

/* ---------- Yan panel · yalnız 900px ve üstünde ----------
   Sayfadan bir ton açık nötr gri zeminde temiz bir gezinme rayı. Doku
   yok, desen yok, ağır gölge yok, buzlu cam yok — modern uygulama hissi
   bunlarla değil, boşluk ve ince çizgiyle kurulur.
   Kaynak: 6-belgeler/tasarim.md · "Bileşenler" · Yan panel */
.yan-panel {
  display: none;
}

/* --- Marka görseli ---
   Panelin tepesinde, ortalanmış ve nefes alanı geniş. Görsel dosyadan
   gelir; CSS ile taklit edilmez. Dosya yoksa blok gizlenir. */
.yan-marka {
  flex: none;
  padding: calc(var(--bosluk) * 3) calc(var(--bosluk) * 2.75)
           calc(var(--bosluk) * 2.25);
  text-align: center;
}

.yan-marka-gorsel {
  display: block;
  width: 100%;
  max-width: 132px;
  height: auto;
  margin: 0 auto;
}

/* --- Menü listesi ---
   Panelin uzayan parçası. Menü uzarsa yalnız burası kayar; marka da
   tarihî görsel de yerinde durur. */
.yan-liste {
  position: relative;
  z-index: 1;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  /* Alttaki tarihî görselin yoğunlaştığı yere kadar inilmez: menü
     görselin üstüne binmez, aralarında nefes kalır. */
  padding: 0 calc(var(--bosluk) * 2.25) calc(var(--bosluk) * 7);
}

/* --- Menü satırı --- */
.yan-satir {
  display: flex;
  align-items: center;
  gap: 15px;
  width: 100%;
  min-height: 50px;
  margin-bottom: 3px;
  padding-left: calc(var(--bosluk) * 2);
  padding-right: calc(var(--bosluk) * 1.75);
  border-radius: 20px;
  text-align: left;
  font-size: 14.5px;
  line-height: 20px;
  color: var(--yan-metin);
  transition: background-color .17s ease-out, color .17s ease-out;
}

.yan-simge {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 9px;
  color: var(--yan-metin-ikincil);
  transition: color .17s ease-out, background-color .17s ease-out;
}

/* Renkli simge kırmızı kapsülün üstünde kaybolurdu: seçili satırda simge
   beyaz bir plakanın içine oturur, kendi renkleriyle okunmaya devam
   eder. */
.yan-satir-secili .yan-simge {
  background: rgba(255, 255, 255, .92);
}

.yan-ad {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Alt sayfa satırı bir tık küçüktür: bağlı olduğu başlığın altında
   durduğu boyundan da anlaşılır. */
.yan-satir-alt {
  min-height: 44px;
  font-size: 14px;
}

/* --- Açık sayfa · kırmızı kapsül ---
   Çok hafif bir degrade ve tek katman gölge; kapsül kağıttan bir parmak
   yükselir, havada durmaz. */
.yan-satir-secili {
  background: linear-gradient(180deg, var(--yan-vurgu) 0%, var(--yan-vurgu-koyu) 100%);
  color: #FFFFFF;
  font-weight: 600;
  box-shadow: 0 6px 14px -7px rgba(183, 44, 40, .62);
}

.yan-satir-secili .yan-simge { color: #FFFFFF; }

/* --- Açılıp kapanan öbek --- */
.yan-ok {
  flex: none;
  display: flex;
  align-items: center;
  color: var(--yan-metin-ikincil);
  opacity: .7;
  transition: transform .17s ease-out;
}

.yan-satir-acik { color: var(--yan-vurgu); }
.yan-satir-acik .yan-simge { color: var(--yan-vurgu); }
.yan-satir-acik .yan-ok { transform: rotate(90deg); }

/* Kapalı ama açık sayfayı içeriyor: yazısı bordolaşır ve okun yanında
   küçük bir nokta belirir. Kapsül değildir — açık sayfa bu satır değil,
   altındaki bir satırdır. */
.yan-satir-icinde { color: var(--yan-vurgu); font-weight: 500; }
.yan-satir-icinde .yan-simge { color: var(--yan-vurgu); }

.yan-satir-icinde .yan-ok::after {
  content: "";
  width: 5px;
  height: 5px;
  margin-left: 5px;
  border-radius: 999px;
  background: var(--yan-vurgu);
}

/* Açılan öbeğin alt sayfaları: soldan inen ince çizgi hangi başlığa
   bağlı olduklarını girintiden daha açık söyler. Çizgi altındır ve
   arayüzdeki tek gri vurgudur — açık dalı gösterir, süs değildir. */
.yan-alt {
  margin: 2px 0 var(--bosluk) calc(var(--bosluk) * 2);
  padding-left: calc(var(--bosluk) * 1.25);
  border-left: 1px solid var(--yan-tel-cizgi);
}

.yan-ayirici {
  height: 1px;
  margin: calc(var(--bosluk) * 1.75) calc(var(--bosluk) * 2);
  background: var(--yan-ayirici-cizgi);
}

/* Fare üstüne gelince satır çok hafif bir kırmızı yüzeye oturur.
   Dokunmatikte karşılığı yoktur, o yüzden yalnız fare olan cihazlarda
   açılır. */
/* Alçak ekranda (dizüstü) marka bloğu ve satır boyu bir tık kısılır:
   yoksa dokuz maddelik menü kaydırma çubuğu istiyor ve son madde
   (Ayarlar) ilk bakışta görünmüyordu. Ölçüler künyedeki aralığın
   içinde kalır. */
@media (min-width: 900px) and (max-height: 800px) {
  .yan-marka {
    padding-top: calc(var(--bosluk) * 2);
    padding-bottom: calc(var(--bosluk) * 1.5);
  }

  .yan-marka-gorsel { max-width: 112px; }

  .yan-satir { min-height: 48px; }
  .yan-satir-alt { min-height: 42px; }
  .yan-ayirici { margin-top: var(--bosluk); margin-bottom: var(--bosluk); }
}

@media (hover: hover) {
  .yan-satir:hover { background: rgba(183, 44, 40, .07); }
  .yan-satir-secili:hover {
    background: linear-gradient(180deg, var(--yan-vurgu) 0%, var(--yan-vurgu-koyu) 100%);
  }
}

/* ---------- Profil paneli ---------- */
.profil-panel {
  position: fixed;
  z-index: 52;
  top: calc(var(--ust-cubuk) + env(safe-area-inset-top, 0px) + var(--bosluk));
  right: var(--bosluk);
  width: min(320px, calc(100vw - var(--bosluk) * 2));
  max-height: calc(100vh - var(--ust-cubuk) - var(--bosluk) * 3);
  overflow-y: auto;
  padding: var(--bosluk);
  background: var(--yuzey);
  border: 1px solid var(--kenar);
  border-radius: var(--kose-kart);
  box-shadow: var(--golge);
}

.profil-kimlik {
  padding: var(--bosluk) var(--bosluk) calc(var(--bosluk) * 1.5);
  border-bottom: 1px solid var(--ayirici);
}

.profil-kimlik-ad {
  font-size: var(--govde-boy);
  line-height: var(--govde-satir);
  font-weight: 500;
}

.profil-kimlik-eposta {
  font-size: var(--kucuk-boy);
  line-height: var(--kucuk-satir);
  opacity: .75;
  word-break: break-all;
}

.profil-satir {
  display: flex;
  align-items: center;
  gap: var(--bosluk);
  width: 100%;
  min-height: var(--dokunma);
  padding: 0 var(--bosluk);
  border-radius: var(--kose-kutu);
  text-align: left;
  font-size: var(--kucuk-boy);
  color: var(--metin);
}

.profil-satir-sag {
  margin-left: auto;
  font-size: var(--etiket-boy);
  opacity: .7;
}

.profil-bos {
  padding: var(--bosluk) var(--bosluk) calc(var(--bosluk) * 1.5);
  font-size: var(--kucuk-boy);
  line-height: var(--kucuk-satir);
  opacity: .75;
}

.profil-ayirici {
  height: 1px;
  margin: var(--bosluk) 0;
  background: var(--ayirici);
}

/* ---------- 900px ve üstü: yan panel açılır, alt menü gizlenir ---------- */
@media (min-width: 900px) {
  .alt-menu { display: none; }

  /* Masaüstünde marka iki kez yazmaz: logo da ad da yan panelin
     tepesinde duruyor. Boşalan yer sayfa adına gider — künyeye göre yol
     izi geri oku ve sayfa adıdır, o hâlde adın okunur olması gerekir. */
  .ust-logo,
  .ust-marka { display: none; }

  .ust-sayfa-adi { font-size: 20px; line-height: 26px; }

  /* Koyu çubukta dolu daire gerekmiyor: kontur düğme olduğunu zaten
     söylüyor ve çubuk sakinleşiyor. */
  .ust-geri { background: transparent; }

  .ust-sube { height: 26px; font-size: var(--kucuk-boy); }

  .yan-panel {
    position: fixed;
    top: calc(var(--ust-cubuk) + env(safe-area-inset-top, 0px));
    bottom: 0;
    left: 0;
    z-index: 30;
    display: flex;
    flex-direction: column;
    width: var(--yan-panel-en);
    overflow: hidden;
    isolation: isolate;
    background-color: var(--yan-zemin);
    border-right: 1px solid var(--yan-kenar);
  }

  .sayfa-alani {
    margin-left: var(--yan-panel-en);
    padding-bottom: calc(var(--bosluk) * 3);
  }

  /* Gezinme paneli masaüstünde gizlidir; yerini yan panel alır.
     Panel ekranındaki bölüm kısayolundan açılan aynı liste ise açık
     kalır — o gezinme çubuğu değil, sayfanın kendi içeriğidir. */
  .obek-panel, .obek-perde { display: none; }
  .obek-perde-icerik { display: block; }
  .obek-panel-icerik { display: block; }
}

/* Öbek başlığındaki yön işareti · açıkken aşağı döner. */
.yan-obek-yon {
  display: flex;
  align-items: center;
  opacity: .6;
  transition: transform .15s ease-out;
}

/* Şube seçicinin yön işareti aşağı bakar. Düğmede iki simge durur —
   başta şube simgesi, sonda yön işareti — dönen yalnız sondakidir. */
.ust-sube .simge:last-child { transform: rotate(90deg); }

/* Şube simgesi yazının yanında soluk durur, onu bastırmaz. */
.ust-sube .simge:first-child { opacity: .75; }

/* Panelin son satırında ayırıcı çizgi kalmaz. */
.obek-panel .liste-satir:last-child,
.pencere-govde .liste-satir:last-child { border-bottom: 0; }

/* ---------- Şube paneli ---------- */
/* Öbek panelinden ayrı bir bileşendir: öbek paneli yalnız telefonda
   görünür, şube seçici her genişlikte çalışır. */
.sube-perde {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: var(--perde);
}

.sube-panel {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 51;
  max-height: 70vh;
  overflow-y: auto;
  padding-bottom: calc(var(--bosluk) * 2 + env(safe-area-inset-bottom, 0px));
  background: var(--yuzey);
  border-top-left-radius: var(--kose-modal);
  border-top-right-radius: var(--kose-modal);
}

.sube-panel-baslik {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--bosluk);
  padding: calc(var(--bosluk) * 2);
  padding-bottom: var(--bosluk);
}

.sube-panel-ad {
  font-family: var(--yazi-baslik);
  font-size: var(--h2-boy);
  line-height: var(--h2-satir);
  font-weight: 600;
}

.sube-panel .liste-satir:last-child { border-bottom: 0; }

/* Masaüstünde üst çubuğun altına yanaşır. */
@media (min-width: 900px) {
  .sube-perde { background: transparent; }

  .sube-panel {
    left: var(--bosluk);
    right: auto;
    bottom: auto;
    top: calc(var(--ust-cubuk) + env(safe-area-inset-top, 0px) + var(--bosluk));
    width: min(320px, calc(100vw - var(--bosluk) * 2));
    max-height: calc(100vh - var(--ust-cubuk) - var(--bosluk) * 3);
    padding-bottom: var(--bosluk);
    border: 1px solid var(--kenar);
    border-radius: var(--kose-kart);
    box-shadow: var(--golge);
  }
}

/* ---------- Bildirim listesi · profil panelinin içinde ---------- */
/* Her satır: kısa başlık, bir cümlelik açıklama ve göreceli zaman.
   Okunmamışlar sol kenardaki nokta ile ayrılır.
   Kaynak: 6-belgeler/NIZAM.md · Tasarım · "Bildirim merkezi · Zil, sayı, okundu" */
.zil-satir {
  display: flex;
  align-items: flex-start;
  gap: var(--bosluk);
  width: 100%;
  min-height: var(--dokunma);
  padding: var(--bosluk) calc(var(--bosluk) * 2);
  background: none;
  border: 0;
  border-bottom: 1px solid var(--ayirici);
  color: var(--metin);
  text-align: left;
  cursor: pointer;
}

.zil-satir:last-child { border-bottom: 0; }

.zil-nokta {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  margin-top: 6px;
  border-radius: 999px;
  background: var(--vurgu);
}

.zil-nokta-okundu { background: var(--kenar); }

.zil-metin {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.zil-baslik {
  font-size: var(--kucuk-boy);
  line-height: var(--kucuk-satir);
  font-weight: 600;
}

.zil-aciklama {
  font-size: var(--kucuk-boy);
  line-height: var(--kucuk-satir);
}

.zil-zaman {
  color: var(--metin);
  opacity: .7;
  font-size: var(--etiket-boy);
  line-height: var(--etiket-satir);
}

/* "Tümünü okundu işaretle" satırı listenin üstünde, ince durur. */
.profil-satir-ince {
  min-height: var(--dokunma);
  font-size: var(--kucuk-boy);
  opacity: .85;
}