/* 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(58, 42, 29, .75),
              0 2px 6px -3px rgba(58, 42, 29, .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/045 · 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(58, 42, 29, .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:not(.nd-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:not(.nd-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);
}

/* ---- 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);
}

/* ALT MENÜDE BULANIKLIK YOK (2026.498 · akıcılık ölçümü).

   Çubuk `position: fixed`; arkasından içerik kayarken `backdrop-filter`
   HER KAREDE yeniden hesaplanıyordu — en pahalı efekt, üstelik sayfa
   boşken bile. Ölçümde 500 satırlık bir tabloda düşen kare 7/40'tan
   4/40'a, en kötü kare 47,8 ms'den 31,7 ms'ye indi.

   Yerine şeffaflığa yakın düz bir zemin kondu: gözle fark edilmiyor,
   çubuk yine kâğıttan ayrı duruyor. Bulanıklık YALNIZ açılır
   katmanlarda kalır (bilesenler.css · .mesgul): orada arkadaki sayfa
   zaten kilitli, kaydırma performansına dokunmuyor. */
.alt-menu { background: var(--yuzey); }

/* 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;
  /* Altı sekme yan yana duruyor (2026.443 · Stok Yönetimi eklendi).
     min-width olmasaydı uzun bir ad kutusunu şişirip çubuğu taşırırdı;
     bu ikisiyle en kötü ihtimalle ad kırpılır, çubuk bozulmaz.
     Adlar zaten kısa tutuluyor — bkz. sayfalar.js · kisaAd. */
  min-width: 0;
  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 > span {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.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;
  /* Panel sonuna gelince tekerlek arkaya devrolmasın (2026.334). */
  overscroll-behavior: contain;
  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;
  /* Listenin dibinde son satırın nefesi. Şablonda burası yedi birimdi:
     panelin altında zemine basılı bir görsel varsayılıyor ve menü onun
     üstüne binmesin diye yer boş bırakılıyordu. Öyle bir görsel yok. */
  padding: 0 calc(var(--bosluk) * 2.25) calc(var(--bosluk) * 2);
}

/* --- Menü satırı --- */
.yan-satir {
  /* Altın çubuk satırın kendi kutusuna göre konumlanır (::before). */
  position: relative;
  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,
    transform .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: var(--yuzey);
  font-weight: 600;
  box-shadow: 0 6px 14px -7px rgba(183, 44, 40, .62);
}

.yan-satir-secili .yan-simge { color: var(--yuzey); }
/* Renklisi olmayan tek renk simge beyaz plakada krem kalırsa kaybolur
   (2026.729 · "bazı ikonlar beyaza dönüşüyor seçilince"): bordo olur. */
.yan-satir-secili .yan-simge .simge:not(.simge-renkli) { color: var(--yan-vurgu); }

/* --- 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);
}

/* Panelin (Muhasebe Paneli · Satın Alma Paneli · 2026.802) içi: öbekler
   bir kat içeride, onların alt sayfaları bir kat daha. İkinci katın
   girintisi kısalır ki sayfa adları yan panele sığsın. */
.yan-alt-cati { margin-bottom: calc(var(--bosluk) * .5); }
.yan-alt-cati .yan-alt { margin-left: var(--bosluk); padding-left: var(--bosluk); }
/* Öbek içi alt grup (2026.924 · Raporlar → Günlük Raporlar) · bir kat daha
   içeride, girintisi daha da kısa. */
.yan-alt .yan-alt-grup { margin: 0 0 calc(var(--bosluk) * .5) calc(var(--bosluk) * .75);
  padding-left: calc(var(--bosluk) * .75); }
.yan-satir-grup .yan-ad { font-size: 14.5px; }
.yan-satir-grup .yan-simge { width: 20px; }
.yan-satir-grup .yan-simge .simge { width: 20px; height: 20px; }

/* Telefonda panelin paneli · öbek başlıkları. */
/* Telefon panelinde öbek içi alt grubun ara başlığı (2026.924). */
/* Başlıklar satırların simgesiyle aynı hizada (2026.972 · kullanıcının
   bildirimi: "başlıklar sola çok kaymış") · liste-satir 2×boşluk içeriden. */
.obek-panel-altbolum {
  margin: calc(var(--bosluk) * .75) 0 2px;
  padding: 0 calc(var(--bosluk) * 2);
  font-size: 11.5px;
  font-weight: 600;
  color: color-mix(in srgb, var(--metin) 55%, transparent);
}
.obek-panel-altbolum-son { height: calc(var(--bosluk) * .75); }
.obek-panel-bolum {
  margin: calc(var(--bosluk) * 2) 0 calc(var(--bosluk) * .75);
  padding: 0 calc(var(--bosluk) * 2);
  font: 700 11px/1.2 var(--yazi-baslik);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--altin-koyu, #8a6d3b);
}

.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 AZ kalkar ve büyür (2026.506 ·
   kullanıcının isteği: "sayfalar ekranında sayfanın üstüne gelince
   rengi kırmızı oluyor ya öyle olmasın, hafif büyüsün yukarı gitsin
   gibi ama çok çok az").

   Eskiden soluk kırmızı bir zemin geliyordu. Kırmızı bu menüde seçili
   sayfanın rengidir; fare gezerken de kırmızı çıkınca hangisinin
   gerçekten açık olduğu bir an karışıyordu. Şimdi renk hiç değişmez,
   yalnız satır 1px yukarı kalkar ve %1,2 büyür — göz hareketi görür,
   seçili satırın kırmızısı tek başına kalır.

   ÖLÇÜ İKİ KEZ AYARLANDI. Önce 1px kalkma ve %1,2 büyüme konmuştu;
   kullanıcının bildirimi: "renk değiştirmeyi kapatmıştık ama hareket
   edecekti, onu yapmamışız." Hareket vardı ama GÖRÜNMÜYORDU: kart
   kalkınca gölgesi ve çerçevesi de kalktığı için 1px okunur, oysa menü
   satırı yalnız yazıdır — arkasında kalkan bir yüzey yoktur.

   Çözüm ölçüyü büyütmek değil, kalkana bir yüzey vermekti: satır
   2px kalkar, %2 büyür ve ALTINA KART GÖLGESİ düşer. Gölge rengi
   değiştirmez, yalnız kalkmayı görünür kılar — kullanıcının kapattığı
   şey kırmızıydı, derinlik değil.

   Dokunmatikte karşılığı yoktur, o yüzden yalnız fare olan cihazlarda
   açılır. Hareket azaltılmışken de kapanır: dosya sonundaki genel kural
   geçiş süresini sıfırlıyor, aşağıdaki satır da hareketin kendisini
   kaldırı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); }
}

/* MENÜ SATIRI KART DEĞİLDİR (2026.513 · kullanıcının bildirimi:
   "normalde düz bir kart gibi değil ama üstüne gelince sanki kartmış da
   o kalkıyormuş gibi, nasıl yapalım" · üç yol gösterildi, üçüncüsü
   seçildi).

   2026.508'den beri satır kalkıyor ve altına kart gölgesi düşüyordu.
   Gölge vardı ama ALTINDA YÜZEY YOKTU: satırın zemini saydamdır. Boşluğun
   etrafına düşen gölgeyi göz "buraya bir kart geldi" diye okuyor, oysa
   öyle bir kart yok — yanılsama tam da bu yüzden rahatsız ediyordu.

   İki çıkış vardı: ya satıra gerçek bir kâğıt yüzey vermek (kart olduğunu
   kabul etmek) ya da kart fikrini bırakmak. Kullanıcı ikincisini seçti.

   ŞİMDİ: yüzey de gölge de yok. Satırın yazısı kalınlaşır ve solunda
   altın bir çubuk belirir — klasik menü davranışı, sessiz ve yanıltmıyor.

   KAYMA YOK, KALINLAŞMA VAR (2026.725 · kullanıcının bildirimi: "sağ
   kayıyor ya kelimeler öyle olmasın onun yerine kalınlaşsın"). Satır
   önceden 4px sağa kayıyordu; artık yerinde durur, yazı 600'e çıkar.
   Seçili satır zaten 600 olduğu için onda değişen bir şey yok. Çubuk
   SEÇİLİ satıra konmaz: onun kendi bordo kapsülü zaten "buradasın" diyor,
   ikinci bir işaret ikisini de zayıflatırdı. */
@media (hover: hover) {
  .yan-satir:hover { font-weight: 600; }

  .yan-satir:hover:not(.yan-satir-secili)::before {
    content: "";
    position: absolute;
    left: 4px;
    top: 50%;
    width: 3px;
    height: 20px;
    margin-top: -10px;
    border-radius: 2px;
    background: var(--altin-koyu);
  }
}

/* BASILIRKEN (2026.512 · 2026.513 · 2026.725). Satır artık kaymadığı
   için ayrı bir kurala gerek kalmadı: ortak basma tepkisi (temel.css ·
   .bas-orta · %97) tek başına yeter, satır yerinde küçülür. */

/* HAREKET AZALTILMIŞKEN DE KALKAR (2026.511 · kullanıcının bildirimi:
   "sayfalarda yine olmadı, faturalardaki seçim düzelmiş ama").

   Burada şöyle bir kural vardı:
       @media (prefers-reduced-motion: reduce) {
         .yan-satir:hover { transform: none; box-shadow: none; }
       }
   ve kullanıcının cihazında "hareketi azalt" AÇIK olduğu için menüde
   hiçbir tepki görünmüyordu. Dashboard kartının böyle bir kuralı hiç
   olmadı; kullanıcının "dashboarddaki kartlar gibi olsun" demesinin ve
   sonra "olmadı" demesinin sebebi buydu — biri hareket ediyor, öbürü
   etmiyordu.

   KURAL (6-belgeler/NIZAM.md · Erişilebilirlik): hareketi azaltılmış
   kullanıcıdan BİLGİ SAKLANMAZ, hareketin kendisi değiştirilir. Burada
   saklanacak bir hareket yok: dosya sonundaki genel kural geçiş
   süresini zaten sıfırlıyor (temel.css · transition-duration .001ms),
   yani satır kalkarken YOL ALMIYOR — bir anda kalkmış oluyor. Baş
   dönmesi yapan şey yol alan harekettir, iki piksellik anlık bir
   kayma değil.

   Bu yüzden kural kaldırıldı: azaltma açıkken de satır kalkar ve
   gölgesi düşer, yalnız yumuşama olmaz. Dashboard kartı da baştan beri
   böyle davranıyordu; ikisi artık aynı. */

/* SAYFA SEÇİCİ · alt menüden açılan öbek paneli aynı hareketi alır
   (2026.508). Orada sayfalar liste satırı olarak duruyor ve hiçbir
   tepki vermiyordu; iki yerde de "sayfa seçmek" aynı iş olduğu için
   tepkisi de aynıdır. */
@media (hover: hover) {
  .obek-panel .liste-satir {
    position: relative;
    transition: transform .17s ease-out;
  }

  /* Kayma yok, yazı kalınlaşır (2026.725 · menüyle aynı). */
  .obek-panel .liste-satir:hover { font-weight: 600; }

  .obek-panel .liste-satir:hover::before {
    content: "";
    position: absolute;
    left: 4px;
    top: 50%;
    width: 3px;
    height: 20px;
    margin-top: -10px;
    border-radius: 2px;
    background: var(--altin-koyu);
  }
}

/* Aynı gerekçeyle burada da kaldırıldı (2026.511): azaltma açıkken
   geçiş süresi zaten sıfır, satır yol almadan kalkar. */

/* ---------- 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;
  /* Panel sonuna gelince tekerlek arkaya devrolmasın (2026.334). */
  overscroll-behavior: contain;
  padding: var(--bosluk);
  background: var(--yuzey);
  border: 1px solid var(--kenar);
  border-radius: var(--kose-kart);
  box-shadow: var(--golge);
}

.profil-kimlik {
  display: flex;
  align-items: center;
  gap: var(--bosluk);
  padding: var(--bosluk) var(--bosluk) calc(var(--bosluk) * 1.5);
  border-bottom: 1px solid var(--ayirici);
}

/* Kimlik dairesi · fotoğraf varsa yüz, yoksa baş harfler. Üst çubuktaki
   daire değildir: o koyu çubukta durur ve bildirim sayısını taşır, bu
   krem panelde durur ve yalnız kimliği gösterir. */
.profil-avatar {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: var(--oyuk);
  box-shadow: inset 0 0 0 1px var(--defter-tel-soluk);
  font-family: var(--yazi-baslik);
  font-size: var(--govde-boy);
  color: var(--defter-koyu);
}

.profil-avatar img { width: 100%; height: 100%; object-fit: cover; }

/* Ad ve e-posta dairenin yanında bir sütun olur; uzun e-posta daireyi
   ezmesin diye kendi genişliğinden kısalabilir. */
.profil-kimlik-yazi { flex: 1; min-width: 0; }

.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);
    isolation: isolate;
    background-color: var(--yan-zemin);
    border-right: 1px solid var(--yan-kenar);
    transition: transform var(--gecis) ease-out, width var(--gecis) ease-out;
  }

  .sayfa-alani {
    margin-left: var(--yan-panel-en);
    padding-bottom: calc(var(--bosluk) * 3);
    transition: margin-left var(--gecis) ease-out,
                margin-right var(--gecis) ease-out;
  }

  /* ---- Elle Kayıt çekmecesi sayfayı SOLA KAYDIRIR (2026.365)
     Kullanıcının isteği: "sayfalar açılınca ekranı sağa kaydırıyor ya,
     elle girişte sola kaydırsın."

     Sayfa menüsü açılınca içerik sağa kayıyor ve menünün altında hiçbir
     şey kalmıyor; çekmece de aynısını ters yönden yapar. Böylece kayıt
     girerken defterin SON SÜTUNU bile çekmecenin altında kalmaz —
     çekmecenin bütün varlık sebebi zaten deftere bakabilmek.

     Yalnız masaüstünde: telefonda çekmece tam eni kaplıyor, sayfayı
     kaydırmak geriye hiçbir şey bırakmazdı. Gizlenmiş çekmece de pay
     istemez, yeri zaten sayfaya geri döner. */
  /* KALDIRILDI (2026.966 · kullanıcının isteği: "ekranı niye daralttı,
     üstünde çıkıyordu"). Çekmece artık sayfanın ÜSTÜNDE açılır, sayfa
     daralmaz; sağ sütunlara bakmak için çekmece sağa gizlenir (tutamak). */

  /* ---- Gizleme (2026.363 · 2026.364 · kullanıcının isteği: "sayfalar
     kısmını da böyle yapalım")

     Panel sola kayar, sayfa alanı boşalan yeri alır; ekranda yalnız
     sağ kenarındaki tutamak kalır ve oku sağa döner. Geniş tablolara
     bakarken menü kapatılabilsin diye var. Telefonda karşılığı yoktur:
     orada yan panel zaten yok, gezinme alt çubuktadır — bu yüzden
     bütün kurallar masaüstü sorgusunun içinde durur.

     GENİŞLİK DÜĞMESİ YOKTUR (2026.364 · kullanıcının kararı: "boyutu
     büyütüp küçültmek için düğmeler koymuşsun, onu istemiyorum"). */
  body.yan-gizli .yan-panel { transform: translateX(-100%); }
  body.yan-gizli .sayfa-alani { margin-left: 0; }

  /* Panelin araç şeridi · markanın altında, listenin üstünde. */
  .yan-araclar {
    display: flex;
    align-items: center;
    flex: none;
    padding: 0 calc(var(--bosluk) / 2) calc(var(--bosluk) / 2);
  }

  .yan-arac {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 30px;
    height: 30px;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    color: var(--yan-metin, currentColor);
    cursor: pointer;
    opacity: .7;
  }

  .yan-arac:hover {
    border-color: var(--yan-kenar);
    background: rgba(58, 42, 29, .06);
    opacity: 1;
  }

  .yan-arac:focus-visible { outline: 2px solid currentColor; outline-offset: 1px; }

  /* Gizleme oku SOLA bakar: bastığın yer, gideceği yön. */
  .yan-arac-ok { transform: scaleX(-1); }

  /* ---- Tutamak · ÜST ÇUBUĞUN DİLİ (2026.364 · kullanıcının isteği:
     "gizledikten sonra açmak için olan düğmelerin de tasarımı ve rengi
     üst çubuk gibi olsun").

     Aynı bordo iniş, aynı altın tel, aynı motif, aynı gölge — tutamak
     sayfanın değil KABUĞUN parçasıdır, üst çubuğun kenardan sarkan ucu
     gibi durur. Panelin İÇİNDE ama sağ kenarının dışında; panel sola
     kayınca ekranda kalan tek parça odur. Oku sağa bakar: "geri aç". */
  .yan-tutamak {
    position: absolute;
    top: 50%;
    right: -36px;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    width: 36px;
    height: 72px;
    margin-top: -36px;
    padding: 0;
    border: 0;
    border-right: 2px solid var(--altin-koyu);
    border-radius: 0 12px 12px 0;
    background: linear-gradient(180deg, var(--vurgu) 0%, var(--yan-vurgu-koyu) 100%);
    color: var(--yuzey);
    box-shadow: 10px 0 22px -14px rgba(58, 42, 29, .75),
                2px 0 6px -3px rgba(58, 42, 29, .45);
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
  }

  .yan-tutamak::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: var(--ust-desen, none);
    background-size: 180px auto;
    opacity: .28;
    pointer-events: none;
  }

  .yan-tutamak svg { display: block; position: relative; z-index: 1; }
  .yan-tutamak:hover { filter: brightness(1.08); }
  body.yan-gizli .yan-tutamak { opacity: 1; pointer-events: auto; }
  .yan-tutamak:focus-visible { outline: 2px solid var(--yuzey); outline-offset: -4px; }

  /* 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;
  /* Panel sonuna gelince tekerlek arkaya devrolmasın (2026.334). */
  overscroll-behavior: contain;
  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; }

/* Telefon bildirimi · ✓ Tamam (2026.1465 · göç 393) */
.zil-kap { display: flex; align-items: center; gap: 6px; border-bottom: 1px solid var(--ayirici); padding-right: calc(var(--bosluk) * 2); }
.zil-kap:last-child { border-bottom: 0; }
.zil-kap .zil-satir { flex: 1; min-width: 0; border-bottom: 0; }
.zil-tamam { flex: 0 0 auto; padding: 6px 10px; border-radius: 999px; border: 1px solid var(--basari); background: var(--yuzey);
  color: var(--basari); font-size: 12px; font-weight: 700; cursor: pointer; white-space: nowrap; }
.zil-tamam:hover { background: color-mix(in srgb, var(--basari) 10%, var(--yuzey)); }

.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;
}

/* =====================================================================
   REFERANS GÖRSELE UYARLAMA · 2026.308
   Kabuğun süsleme katmanı. Motifli dokular birer GÖRSEL DOSYASIDIR
   (--ust-desen · --yan-desen · ana projede boş) ve adresleri degiskenler.css'te
   durur; buradaki kurallar yalnız dokuyu nereye, ne kadar soluk
   koyacağını söyler.
   ===================================================================== */

/* Üst çubuğun motifi · bordo zeminin üstüne çok soluk bir doku. Dokunun
   kendisi tekrarlanabilir bir karodur (--ust-desen · ana projede boş). */
.ust-cubuk::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--ust-desen, none);
  background-size: 180px auto;
  opacity: .28;
  pointer-events: none;
}

/* Çubuğun içindeki her şey motifin ÜSTÜNDE kalır. */
.ust-cubuk > * { position: relative; z-index: 1; }

/* Üst çubuğun altındaki ince altın tel: bordo ile kremin arasına giren
   ayraç. Referans görselde çubuk doğrudan kâğıda oturmuyor. */
.ust-cubuk {
  border-bottom: 2px solid var(--altin-koyu);
}

/* Marka adı serif: referans görselde üst çubuktaki yazı da klasik. */
.ust-marka { font-family: var(--yazi-baslik); letter-spacing: .02em; }

/* Yan panelin motifi · krem zeminin üstüne çok soluk bir doku. */
.yan-panel {
  background-image: var(--yan-desen);
  background-size: 160px auto;
}

/* Etkin gezinme satırı · bordo kapsül, krem yazı. Referans görselde
   köşeleri yumuşak bir kapsül ve hafif bir gölge taşıyor. */
.yan-satir-secili {
  box-shadow: 0 2px 6px -3px rgba(107, 23, 33, .55);
}

/* ---------- Not Defteri paneli (2026.858 · göç 236) ----------
   Günlük İş Akışı panelinin kalıbı (.akis-panel); yalnız açılış sınıfı
   ve içi ayrı. Notlar ortaktır, herkes görür. */
body.not-acik .nd-panel { transform: none; }
.nd-yaz { display: flex; flex-direction: column; gap: 8px; margin-bottom: calc(var(--bosluk) * 1.5); }
.nd-kutu {
  width: 100%;
  min-height: 84px;
  resize: vertical;
  padding: 10px 12px;
  font: inherit;
  color: var(--metin);
  background: var(--yuzey);
  border: 1px solid var(--kenar);
  border-radius: var(--kose-kutu);
}
.nd-kutu:focus { outline: none; border-color: var(--altin); }
.nd-bagla { display: flex; align-items: center; gap: 6px; font-size: var(--kucuk-boy); }
.nd-bagla b { font-weight: 600; }
.nd-yaz .dugme-birincil { align-self: flex-end; }
.nd-hata { color: var(--metin-hata); font-size: var(--kucuk-boy); margin: 0 0 var(--bosluk); }
.nd-bos { font-size: var(--kucuk-boy); opacity: .6; margin: 0 0 var(--bosluk); }
.nd-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.nd-not {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 10px 10px 12px;
  background: var(--yuzey);
  border: 1px solid var(--ayirici);
  border-left: 3px solid var(--altin);
  border-radius: var(--kose-kutu);
}
.nd-tamam { opacity: .6; border-left-color: var(--basari); }
.nd-tamam .nd-metin { text-decoration: line-through; }
.nd-tik {
  flex: none;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  margin-top: 1px;
  padding: 0;
  border: 1.5px solid var(--kenar);
  border-radius: 6px;
  background: var(--yuzey);
  color: var(--metin-basari);
  cursor: pointer;
}
.nd-tamam .nd-tik { border-color: var(--basari); }
.nd-icerik { flex: 1; min-width: 0; }
.nd-metin { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.nd-kunye { display: block; margin-top: 4px; font-size: var(--kucuk-boy); opacity: .7; }
.nd-git { color: var(--vurgu); text-decoration: none; font-weight: 600; }
.nd-git:hover { text-decoration: underline; }
.nd-sil {
  flex: none;
  padding: 2px;
  border: 0;
  background: none;
  color: var(--metin);
  opacity: .45;
  cursor: pointer;
}
.nd-sil:hover { opacity: 1; color: var(--metin-hata); }
.nd-bitenler {
  margin: calc(var(--bosluk) * 1.5) 0 8px;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: var(--kucuk-boy);
  font-weight: 600;
  color: var(--metin);
  opacity: .7;
  cursor: pointer;
  text-align: left;
}

/* GERÇEK NOT DEFTERİ GÖRÜNÜMÜ (2026.1045 · kullanıcının isteği: "not
   defteri de gerçek bir not defterine benzesin"). Krem kâğıt, solda
   kırmızı kenar çizgisi, tepede spiral delikleri.
   SATIRLAR ÇİZGİYLE AYNI HİZADA (2026.1046 · "defter çizgileriyle
   satırlar aynı hizada olmalı"): çizgi panelin zemininde değil, her
   yazılı parçanın kendi zemininde çizilir; her parçanın satır yüksekliği
   ve boyu çizgi aralığının (28px) katıdır, yazı tam çizginin üstüne
   oturur. Başlık bölgesi defterin üst boşluğu gibi çizgisizdir; altta
   kalan boş kâğıt da çizgili dolgudur. */
.nd-panel {
  --nd-satir: 28px;
  --nd-kenar: 46px;
  --nd-cizgi: rgba(120, 150, 190, .32);
  --nd-murekkep: #1F1A17;
  /* Başlıklar kırmızı kalemle (2026.1047 · kullanıcının isteği). */
  --nd-kirmizi: #8A1C26;
  display: flex;
  flex-direction: column;
  background-color: #FFFDF5;
  background-image:
    linear-gradient(90deg, transparent calc(var(--nd-kenar) - 1px), rgba(196, 72, 72, .55) calc(var(--nd-kenar) - 1px),
      rgba(196, 72, 72, .55) var(--nd-kenar), transparent var(--nd-kenar));
  padding-left: calc(var(--nd-kenar) + 10px) !important;
}
.nd-panel > * { flex: none; }
.nd-panel::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 18px; pointer-events: none;
  background: radial-gradient(circle at 50% 60%, #E9E1D0 0 4px, #CFC3AC 4.5px, transparent 5.5px) 0 0 / 26px 18px repeat-x;
}
.nd-panel .akis-tepe { padding-top: 14px; }
.nd-panel .akis-baslik { font-family: var(--yazi-baslik); font-size: 22px; color: var(--nd-kirmizi); }
/* Çizgili parça · alt kenarı çizgi, boyu satırın katı. */
.nd-panel .nd-kutu,
.nd-panel .nd-not,
.nd-panel .nd-bitenler,
.nd-panel .nd-bos,
.nd-panel .nd-tekrar-bas,
.nd-dolgu {
  background-image: repeating-linear-gradient(180deg, transparent 0, transparent calc(var(--nd-satir) - 1px),
    var(--nd-cizgi) calc(var(--nd-satir) - 1px), var(--nd-cizgi) var(--nd-satir));
  background-size: 100% var(--nd-satir);
  /* Çizgi yazının hemen altında: harflerin tabanı çizgiye oturur. */
  background-position: 0 -6px;
  line-height: var(--nd-satir);
}
.nd-panel .nd-kutu {
  background-color: transparent; background-attachment: local;
  border: 0; border-radius: 0; padding: 0 2px; min-height: calc(var(--nd-satir) * 3);
  height: calc(var(--nd-satir) * 3); color: var(--nd-murekkep); font-size: 15px;
}
.nd-panel .nd-kutu:focus { outline: none; box-shadow: none; }
.nd-panel .nd-yaz { gap: 0; margin-bottom: var(--nd-satir); }
.nd-panel .nd-bagla { min-height: var(--nd-satir); margin-top: 6px; }
.nd-yaz-dugmeler { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-top: 6px; }
.nd-yaz-dugmeler .dugme-ikincil { gap: 6px; }
.nd-panel .nd-liste { gap: 0; }
.nd-panel .nd-not {
  background-color: transparent; border: 0; border-radius: 0;
  padding: 0; margin: 0; align-items: flex-start; gap: 8px;
}
.nd-panel .nd-metin { color: var(--nd-murekkep); font-size: 15px; line-height: var(--nd-satir); }
.nd-panel .nd-kunye { margin: 0; line-height: var(--nd-satir); opacity: .75; }
.nd-panel .nd-tik { margin-top: 3px; background: #FFFDF5; }
.nd-panel .nd-sil { margin-top: 4px; }
.nd-panel .nd-bitenler { display: block; width: calc(100% + var(--nd-kenar) + 10px + 2 * var(--bosluk)); margin: 0; padding: 0; background-color: transparent; text-align: left; }
.nd-panel .nd-bos { margin: 0; padding: 0; }
.nd-tekrar { margin-top: var(--nd-satir); }
.nd-tekrar-bas {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  font-family: var(--yazi-baslik); font-size: 16px; color: var(--nd-kirmizi);
  box-shadow: inset 0 -2px 0 rgba(196, 72, 72, .35);
}
.nd-tekrar-bas > span { display: inline-flex; align-items: center; gap: 6px; }
.nd-tekrar-bas .nd-git { background: none; border: 0; cursor: pointer; font-size: var(--kucuk-boy); line-height: var(--nd-satir); }
.nd-tekrar-simge { flex: none; width: 22px; height: 22px; display: grid; place-items: center; color: #8A93B0; margin-top: 3px; }
.nd-panel .nd-bugun .nd-metin { font-weight: 600; }
.nd-panel .nd-bugun .nd-kunye b { color: var(--vurgu); }
/* Çizgiler kâğıdın bir ucundan öbür ucuna: satırlar panelin iç
   boşluğunu taşar, kırmızı kenar çizgisi altlarında görünür. Bölümler
   arası boşluk da çizgili bir boş satırdır. */
.nd-panel .nd-not,
.nd-panel .nd-bitenler,
.nd-panel .nd-bos,
.nd-panel .nd-tekrar-bas,
.nd-panel .nd-tekrar,
.nd-dolgu {
  margin-left: calc(-1 * (var(--nd-kenar) + 10px)) !important;
  margin-right: calc(-2 * var(--bosluk)) !important;
  padding-left: calc(var(--nd-kenar) + 10px) !important;
  padding-right: calc(2 * var(--bosluk)) !important;
}
.nd-panel .nd-tekrar {
  margin-top: 0;
  padding-top: var(--nd-satir);
  background-image: repeating-linear-gradient(180deg, transparent 0, transparent calc(var(--nd-satir) - 1px),
    var(--nd-cizgi) calc(var(--nd-satir) - 1px), var(--nd-cizgi) var(--nd-satir));
  background-size: 100% var(--nd-satir);
  background-position: 0 -6px;
  background-repeat: no-repeat;
  background-size: 100% var(--nd-satir);
}
.nd-panel .nd-tekrar .nd-not, .nd-panel .nd-tekrar .nd-tekrar-bas, .nd-panel .nd-tekrar .nd-bos {
  margin-left: calc(-1 * (var(--nd-kenar) + 10px)) !important;
}
.nd-panel .nd-liste .nd-not { margin-left: calc(-1 * (var(--nd-kenar) + 10px)) !important; }
.nd-dolgu { flex: 1 0 calc(var(--nd-satir) * 5); margin-top: 0; }
/* ÇİZGİSİZ DEFTER (2026.1062 · kullanıcının isteği: "çizgisiz not
   defteri olsun"). Satır ve kenar çizgileri kalkar; tepedeki spiral ve
   kırmızı kalem başlıklar kalır. Notlar arasında küçük boşluk. */
.nd-panel { --nd-cizgi: transparent; background-image: none; padding-left: calc(var(--bosluk) * 2) !important; }
.nd-panel .nd-not,
.nd-panel .nd-bitenler,
.nd-panel .nd-bos,
.nd-panel .nd-tekrar-bas,
.nd-panel .nd-tekrar,
.nd-panel .nd-liste .nd-not,
.nd-panel .nd-tekrar .nd-not, .nd-panel .nd-tekrar .nd-tekrar-bas, .nd-panel .nd-tekrar .nd-bos,
.nd-dolgu {
  margin-left: calc(-2 * var(--bosluk)) !important;
  padding-left: calc(2 * var(--bosluk)) !important;
}
.nd-panel .nd-liste .nd-not { padding-top: 4px; padding-bottom: 4px; border-bottom: 1px solid rgba(138, 116, 88, .12); }
/* Düzeltmeler bölümü */
.nd-duz-not { align-items: flex-start; }
.nd-duz-gun {
  flex: none; margin-top: 4px; padding: 0 6px; border-radius: 6px;
  font-size: 12px; font-weight: 700; line-height: 20px;
  color: var(--nd-kirmizi); background: rgba(138, 28, 38, .08);
}
.nd-panel .nd-duz-ref { display: block; line-height: 1.35; margin-top: 2px; }
.nd-duz-dugmeler { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 6px; }
.pencere.nd-tk-pencere { max-width: 460px; }
.nd-tk-cipler { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0; }
.nd-tk-iki { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.nd-tk-ozet { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 14px 0 4px; font-size: 13px; color: var(--ikinci); }
.nd-tk-ozet b { color: var(--metin); }
.alan[hidden] { display: none !important; }

/* ---------- Telefonda krem üst çubuk (2026.975) ----------
   Kullanıcının bildirimi: "yukarıdaki kırmızı çubuk çok kötü duruyor,
   logoda belli olmuyor." Kararı: krem çubuk. Telefonda çubuk kâğıt
   rengindedir (krem desen), altında ince altın tel; logo kendi
   renkleriyle okunur. Sayfa adı kalkar (sayfanın künye kartında yazıyor).
   Düğmeler bordo çizgili krem daireler. Masaüstü bordo kalır. */
@media (max-width: 899.98px) {
  .ust-cubuk {
    background: var(--yuzey);
    background-image: var(--yan-desen);
    background-size: 160px auto;
    color: var(--metin);
    border-bottom: 1.5px solid var(--altin);
    box-shadow: 0 8px 18px -14px rgba(58, 42, 29, .55);
  }
  .ust-cubuk::before { display: none; }
  .ust-logo { height: 38px; }
  .ust-sayfa-adi { display: none; }
  .ust-marka { display: none; }
  .ust-geri,
  .ust-akis,
  .ust-sube {
    background: rgba(143, 45, 34, .05);
    border-color: color-mix(in srgb, var(--altin) 75%, transparent);
    color: var(--vurgu);
  }
  .ust-geri .gri-kat { stroke: var(--altin-koyu); }
  .ust-geri:disabled { background: transparent; border-color: color-mix(in srgb, var(--altin) 40%, transparent); }
  .ust-akis-acik { background: var(--vurgu); border-color: var(--vurgu); color: var(--yuzey); }
  .ust-akis-sayi { background: var(--vurgu); color: var(--yuzey); }
  .ust-avatar { background: rgba(143, 45, 34, .05); border-color: var(--altin); color: var(--vurgu); }
}

/* Notlar arası bir boş defter satırı (2026.1048 · "notlar arası boşluk
   olsun"). Boşluk notun kendi çizgili zemininde: çizgi hizası bozulmaz. */
.nd-panel .nd-liste .nd-not:not(:last-child) { padding-bottom: var(--nd-satir) !important; }

/* Notlar en tepede, ekleme penceresi ayrı (2026.1049 · "notlar siyah
   renkle yazılsın, başlıklar kırmızı koyu"). */
.nd-ekle-satir { display: flex; justify-content: flex-end; margin: 4px 0 var(--nd-satir); }
.nd-ekle-satir .dugme-birincil { gap: 6px; }
.pencere.nd-yeni-pencere { max-width: 480px; }
.nd-yeni-pencere .nd-kutu { width: 100%; min-height: 120px; }
.nd-yeni-pencere .nd-bagla { margin: 10px 0; }

/* Yazılar daha belirgin (2026.1050 · "görünürlük biraz zayıf oldu
   metinlerin, daha belirgin olsunlar"). Saydamlık kalktı, notlar kalın
   siyah, künye koyu kahve, bağlantılar koyu kırmızı. */
.nd-panel .nd-metin { font-weight: 600; color: #120E0B; font-size: 15.5px; }
.nd-panel .nd-kunye { opacity: 1; color: #4A3D33; font-weight: 500; font-size: 13px; }
.nd-panel .nd-git { color: var(--nd-kirmizi); font-weight: 700; }
.nd-panel .nd-bitenler { opacity: 1; color: #2B221C; font-weight: 700; }
.nd-panel .nd-tekrar-bas { font-weight: 700; }
.nd-panel .nd-bos { opacity: 1; color: #4A3D33; }
.nd-panel .akis-aciklama { color: #4A3D33; opacity: 1; }
.nd-panel .nd-tik { border-color: #8C7B6A; border-width: 1.8px; }
.nd-panel .nd-sil { opacity: .7; }
.nd-panel .nd-tamam { opacity: .75; }
.nd-tekrar-simge { color: #5A6385; }

/* ---- Yan menüde gizleme (2026.1051 · göç 292) ----
   Araç şeridinde göz düğmesi düzen kipini açar; satırların sağında göz
   çıkar, gizlenenler düzen kipinde soluk ve üstü çizili görünür. */
.yan-araclar { justify-content: space-between; }
.yan-arac-duzen[aria-pressed="true"] {
  opacity: 1; color: var(--vurgu);
  background: color-mix(in srgb, var(--vurgu) 10%, transparent);
  border-color: color-mix(in srgb, var(--vurgu) 35%, transparent);
}
.yan-goz {
  flex: none; display: inline-grid; place-items: center;
  width: 28px; height: 28px; margin-left: auto; border-radius: 8px;
  color: var(--metin); opacity: .75; cursor: pointer;
}
.yan-goz:hover { opacity: 1; background: color-mix(in srgb, var(--metin) 8%, transparent); }
.yan-goz-kapali { color: var(--vurgu); opacity: 1; }
.yan-duzen .yan-satir .yan-ok { display: none; }
.yan-satir-gizli .yan-ad, .yan-satir-gizli .yan-simge { opacity: .4; text-decoration: line-through; }
.yan-duzen-not {
  margin: 0 8px 10px; padding: 8px 10px; border-radius: 10px;
  font-size: 12px; line-height: 1.4; color: var(--metin);
  background: color-mix(in srgb, var(--altin, #B8924A) 14%, transparent);
  border: 1px dashed color-mix(in srgb, var(--altin, #B8924A) 55%, transparent);
}

/* Açık başlık belirgin (2026.1052 · kullanıcının isteği: "açılmış olan
   başlık belli edilse, daha koyu renkle"). Koyu şarap rengi, kalın yazı
   ve hafif zemin; iç içe açık başlıkların hepsi böyle. */
.yan-satir-acik {
  color: #6A1420 !important;
  font-weight: 700;
  background: color-mix(in srgb, #6A1420 8%, transparent);
  border-radius: 12px;
}
.yan-satir-acik .yan-ad { font-weight: 700; }
.yan-satir-acik .yan-simge, .yan-satir-acik .yan-ok { color: #6A1420 !important; opacity: 1; }

/* SEÇİLİLER ÇİZGİLİ (2026.1067 · kullanıcının isteği: "seçili olanların
   yanında dikey çizgi olsun ve metinleri siyah kalın olsun"). Açık
   başlık ve açık sayfa: zemin yok, solda bordo dikey çizgi, siyah kalın
   yazı. Simgeler kendi renginde. */
.yan-satir-acik,
.yan-satir-secili {
  color: #1F1A17 !important;
  font-weight: 700;
  background: transparent !important;
  border-radius: 0 10px 10px 0;
  box-shadow: inset 3px 0 0 var(--yan-vurgu, #8F2D22) !important;
}
.yan-satir-acik .yan-ad, .yan-satir-secili .yan-ad { font-weight: 700; color: #1F1A17; }
.yan-satir-acik .yan-ok, .yan-satir-secili .yan-ok { color: #1F1A17 !important; }
.yan-satir-acik .yan-simge { color: var(--yan-metin-ikincil) !important; }
.yan-satir-secili .yan-simge { background: transparent; color: var(--yan-metin-ikincil); }
.yan-satir-secili .yan-simge .simge:not(.simge-renkli) { color: var(--yan-vurgu); }

/* Not Defteri · sağ üstte ikonlar, Bugünün notları (2026.1134). */
.nd-tepe-ikonlar { display: flex; align-items: center; gap: 2px; flex: none; }
.nd-tepe-ikonlar .nd-ikon-secili { color: var(--vurgu); background: color-mix(in srgb, var(--vurgu) 12%, transparent); border-radius: 8px; }
.nd-ekle-satir:has(.nd-geri) { display: flex; justify-content: space-between; align-items: center; }
.nd-geri { background: none; border: 0; padding: 0; cursor: pointer; color: var(--vurgu); font-weight: 600; font-size: var(--kucuk-boy); }
.nd-geri:hover { text-decoration: underline; }
.nd-ekle-satir .nd-git { background: none; border: 0; cursor: pointer; font-size: var(--kucuk-boy); }
.nd-adet { display: inline-block; min-width: 18px; padding: 0 6px; margin-left: 4px; border-radius: 999px;
  background: var(--vurgu); color: #fff; font-size: 11px; line-height: 18px; text-align: center; }
.nd-bugun-bolum { margin-top: 0; }
/* Belirgin tepe ikonları (2026.1135). */
.nd-tepe-ikonlar { gap: 6px; }
.nd-tepe-ikon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; padding: 0; cursor: pointer;
  border: 1px solid color-mix(in srgb, var(--vurgu) 45%, transparent); border-radius: 10px;
  background: color-mix(in srgb, var(--vurgu) 8%, var(--yuzey, #fff)); color: var(--vurgu);
  box-shadow: 0 1px 0 color-mix(in srgb, var(--vurgu) 25%, transparent);
}
.nd-tepe-ikon:hover { background: color-mix(in srgb, var(--vurgu) 16%, var(--yuzey, #fff)); }
.nd-tepe-ikon svg { width: 20px; height: 20px; }
.nd-tepe-ikonlar .nd-tepe-ikon.nd-ikon-secili { background: var(--vurgu); color: #fff; border-color: var(--vurgu); }
.nd-panel .akis-tepe { align-items: center; }
.nd-panel .akis-baslik { font-size: 22px; line-height: 1.2; overflow-wrap: anywhere; }
/* Not künyesi satır satır, sık (2026.1138). */
.nd-panel .nd-kunye.nd-kunye-sira { display: flex; flex-direction: column; align-items: flex-start; gap: 1px;
  margin: 2px 0 4px; line-height: 19px; }
.nd-panel .nd-kunye-sira > * { max-width: 100%; line-height: 19px; }
.nd-panel .nd-kunye-sira > .nd-git { opacity: 1; }
/* Tek satır, sığmazsa "…" (2026.1139). */
.nd-panel .nd-kunye-sira > * { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nd-panel .akis-baslik { font-size: 20px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; overflow-wrap: normal; }

/* Not hatırlatma penceresi (2026.1140). */
.nd-hp-pencere { max-width: 520px; }
.nd-hp-liste { list-style: none; margin: 0 0 12px; padding: 0; max-height: 50vh; overflow: auto; }
.nd-hp-satir { display: flex; align-items: flex-start; gap: 10px; padding: 8px 2px; border-bottom: 1px solid var(--cizgi, #E8DCC4); }
.nd-hp-satir .nd-metin { font-weight: 600; line-height: 1.35; }
.nd-hp-satir .nd-kunye { margin-top: 2px; line-height: 1.3; }
.nd-hp-satir.nd-tamam .nd-metin { text-decoration: line-through; opacity: .6; }
.nd-hp-etiket { flex: none; margin-top: 2px; padding: 0 6px; border-radius: 6px; font-size: 11px; font-weight: 700; line-height: 18px;
  color: var(--vurgu); background: color-mix(in srgb, var(--vurgu) 12%, transparent); }

/* Geciken tekrarlanan not (2026.1141) · belirgin kırmızı. */
.nd-gecikme-uyari {
  margin: 6px 0 8px; padding: 8px 10px; border-radius: 10px; font-size: 13px; line-height: 1.4;
  color: #fff; background: #B3261E; box-shadow: 0 2px 6px rgba(179, 38, 30, .25);
}
.nd-not.nd-gecikti, .nd-hp-satir.nd-gecikti { background: color-mix(in srgb, #B3261E 8%, transparent); border-left: 3px solid #B3261E; }
.nd-gecikti .nd-metin { color: #B3261E; font-weight: 700; }
.nd-gecikti .nd-tik { border-color: #B3261E !important; }
.nd-gecikti-yazi { display: inline-block; margin: 2px 0; padding: 0 6px; border-radius: 6px; font-size: 11.5px; font-weight: 700;
  line-height: 19px; color: #fff; background: #B3261E; }
.nd-hp-satir.nd-gecikti .nd-kunye { color: #B3261E; font-weight: 700; opacity: 1; }
#not-dugme.nd-rozet-gecikti .ust-akis-sayi { background: #B3261E; color: #fff; animation: nd-nabiz 1.4s ease-in-out infinite; }
@keyframes nd-nabiz { 0%, 100% { box-shadow: 0 0 0 0 rgba(179, 38, 30, .6); } 50% { box-shadow: 0 0 0 6px rgba(179, 38, 30, 0); } }
@media (prefers-reduced-motion: reduce) { #not-dugme.nd-rozet-gecikti .ust-akis-sayi { animation: none; } }

/* TELEFON MENÜ PANELİ · kartlı liste (2026.1161 · kullanıcı: "daha güzel
   bir liste yap"). Her bölüm krem zeminde altın çerçeveli bir kart; satır
   ince (52px), simge küçük kabartma karo, sağda ok. Çizgiler simgeden
   sonra başlar. */
.obek-panel { background: var(--zemin); }
.obek-panel-baslik { padding: calc(var(--bosluk) * 2) calc(var(--bosluk) * 2.25) calc(var(--bosluk) * .5); }
.obek-panel-bolum { margin: calc(var(--bosluk) * 2) 0 calc(var(--bosluk) * .75); padding: 0 calc(var(--bosluk) * 3); }
.obek-kart {
  margin: 0 calc(var(--bosluk) * 2);
  border: 1px solid var(--altin-soluk);
  border-radius: 16px;
  background: var(--yuzey);
  box-shadow: 0 4px 14px rgba(58, 42, 29, .07), inset 0 1px 0 #fff;
  overflow: hidden;
}
.obek-panel-baslik + .obek-kart { margin-top: calc(var(--bosluk) * 1.5); }
.obek-kart .liste-satir {
  position: relative;
  min-height: 52px;
  gap: calc(var(--bosluk) * 1.5);
  padding: 0 calc(var(--bosluk) * 1.75);
  border-bottom: 0;
}
.obek-kart .liste-satir + .liste-satir::after,
.obek-kart .obek-panel-altbolum + .liste-satir::after { content: none; }
.obek-kart .liste-satir:not(:first-child)::after {
  content: "";
  position: absolute;
  top: 0;
  left: calc(var(--bosluk) * 1.75 + 34px + var(--bosluk) * 1.5);
  right: 0;
  border-top: 1px solid var(--ayirici);
}
.obek-kart .liste-satir-simge {
  flex: 0 0 34px; width: 34px; height: 34px;
  border-radius: 10px;
  background: linear-gradient(180deg, #FFFCF4, #EEDFC2);
  border: 1px solid var(--altin-soluk);
  box-shadow: 0 2px 0 rgba(201, 176, 133, .45), inset 0 1px 0 #fff;
}
.obek-kart .liste-satir-simge .simge { width: 18px; height: 18px; }
.obek-kart .liste-satir-baslik { font-size: 15.5px; font-weight: 500; }
.obek-kart .liste-satir:active { background: rgba(194, 162, 104, .12); }
.obek-satir-ok { flex: none; margin-left: auto; color: var(--ikinci); font-size: 20px; line-height: 1; opacity: .7; }
.obek-kart .rozet + .obek-satir-ok { margin-left: 4px; }
.obek-kart .obek-panel-altbolum { margin: calc(var(--bosluk)) 0 2px; padding: 0 calc(var(--bosluk) * 1.75); }
.obek-kart .obek-panel-altbolum:not(:first-child) { padding-top: calc(var(--bosluk) * .75); border-top: 1px solid var(--ayirici); }
.obek-kart .obek-panel-altbolum-son { height: 0; }
@media (hover: hover) { .obek-kart .liste-satir:hover::before { left: 0; } }
.obek-kart + .obek-kart { margin-top: calc(var(--bosluk) * 1.5); }
.nd-tik-sabit { display: inline-flex; align-items: center; justify-content: center; cursor: default; opacity: .75; }

/* Günlük İş Akışı · üç aşama, kilit, otomatik tik (2026.1177 · göç 318) */
.akis-asama .akis-bolum-ad { display: flex; align-items: center; gap: 6px; }
.akis-asama-sayi { margin-left: auto; font-weight: 600; color: var(--ikinci); font-size: 12px; }
.akis-asama-tamam .akis-bolum-ad { color: var(--metin-basari); }
.akis-kilitli { opacity: .6; }
.akis-kilit { font-size: 12px; }
.akis-satir-kilitli { opacity: .5; }
.akis-satir-kilitli .akis-ad { cursor: not-allowed; }
.akis-ad:disabled { color: inherit; text-decoration: none; }
.akis-hal { font-weight: 700; font-size: 12px; white-space: nowrap; }
.akis-hal-tamam { color: var(--metin-basari); }
.akis-hal-yok { color: var(--ikinci); }
.akis-mini { border: 1px solid var(--altin-soluk); background: var(--yuzey); color: var(--ikinci); border-radius: 999px;
  padding: 0 8px; font: inherit; font-size: 11.5px; line-height: 20px; cursor: pointer; }
.akis-mini:hover:not(:disabled) { border-color: var(--altin); color: var(--metin); }
.akis-mini:disabled { opacity: .5; cursor: not-allowed; }
.akis-bos { margin: 4px 14px 10px; font-size: 12.5px; color: var(--ikinci); }
.akis-hata { color: var(--metin-hata); }
/* Günlük İşlemler kontrolünün hata notları · adımın altında küçük başlıklar (2026.1181). */
.akis-hal-hata { color: var(--metin-hata); }
.akis-hatalar { list-style: none; margin: 8px 0 2px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.akis-hata-satir { display: flex; flex-direction: column; gap: 6px; padding: 9px 10px 8px; border: 1px solid rgba(164, 36, 48, .22);
  border-left: 3px solid var(--metin-hata); background: rgba(164, 36, 48, .04); border-radius: 8px; }
.akis-hata-git { display: flex; flex-direction: column; gap: 3px; min-width: 0; text-align: left; border: 0; background: none;
  padding: 0; font: inherit; color: var(--metin); cursor: pointer; }
.akis-hata-git:disabled { cursor: not-allowed; opacity: .6; }
.akis-hata-baslik { display: flex; align-items: baseline; gap: 6px; min-width: 0; font-size: 12.5px; }
.akis-hata-kod { flex: none; font-weight: 700; color: var(--metin-hata); font-variant-numeric: tabular-nums; }
.akis-hata-ad { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.akis-hata-git:hover:not(:disabled) .akis-hata-ad { text-decoration: underline; }
.akis-hata-metin { font-size: 13px; line-height: 1.35; }
.akis-hata-kayit { font-size: 11.5px; color: var(--ikinci); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.akis-hata-dip { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.akis-hata-yazan { font-size: 11px; color: var(--ikinci); }
.akis-hata-duzelt { display: inline-flex; align-items: center; gap: 4px; border: 1px solid var(--metin-basari); background: var(--yuzey);
  color: var(--metin-basari); border-radius: 999px; padding: 2px 10px; font: inherit; font-size: 11.5px; font-weight: 600; cursor: pointer; }
.akis-hata-duzelt:hover:not(:disabled) { background: var(--metin-basari); color: var(--yuzey); }
.akis-hata-duzelt:disabled { opacity: .5; cursor: not-allowed; }
/* Kasa Fark Raporu adımı · gün sonu başına kasa cevabı (2026.1185). */
.akis-kasalar { list-style: none; margin: 8px 0 2px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.akis-kasa { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 7px 10px;
  border: 1px solid rgba(196, 140, 30, .45); border-left: 3px solid #C48C1E; background: rgba(196, 140, 30, .08); border-radius: 8px;
  font: inherit; font-size: 12.5px; color: var(--metin); cursor: pointer; text-align: left; }
.akis-kasa-geldi { border-color: rgba(46, 107, 74, .3); border-left-color: var(--metin-basari); background: rgba(46, 107, 74, .06); }
.akis-kasa:disabled { cursor: not-allowed; opacity: .6; }
.akis-kasa:hover:not(:disabled) .akis-kasa-ad { text-decoration: underline; }
.akis-kasa-ad { font-weight: 600; }
.akis-kasa-hal { flex: none; font-size: 11.5px; font-weight: 700; color: #9A6B10; }
.akis-kasa-geldi .akis-kasa-hal { color: var(--metin-basari); }

/* Kasa satırında link kopyala (2026.1465) · satırın sağında küçük kare düğme */
.akis-kasalar > li { display: flex; align-items: stretch; gap: 6px; }
.akis-kasalar > li > .akis-kasa { flex: 1; min-width: 0; }
.akis-kasa-link { flex: none; width: 38px; border-radius: 10px; border: 1px solid rgba(194, 162, 104, .6); background: #fff; font-size: 16px; cursor: pointer; }
.akis-kasa-link:hover:not(:disabled) { border-color: var(--vurgu, #8F2D22); background: #fff8e6; }
.akis-kasa-link:disabled { cursor: not-allowed; opacity: .6; }
/* Bloke Hesapları kontrolü (2026.1465) · "Kontrol ettim" düğmesi */
.akis-mini-onay { margin-top: 6px; border-color: var(--metin-basari, #2e6b4a); color: var(--metin-basari, #2e6b4a); font-weight: 700; }
/* Bloke hesap satırı · onay / hata (2026.1465) */
.akis-bloke-li { flex-direction: column; }
.akis-kasa-hata { border-color: rgba(179, 38, 30, .4); border-left-color: var(--hata, #B3261E); background: rgba(179, 38, 30, .06); }
.akis-kasa-hata .akis-kasa-hal { color: var(--hata, #B3261E); }
.akis-bloke-hata { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 4px 4px 2px 10px; font-size: 12px; color: var(--hata, #B3261E); }
.akis-bloke-hata small { color: var(--ikinci); }
/* Onaylanan bloke satırı · kısa tik animasyonu (2026.1465) */
@keyframes akis-tik { 0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(46, 107, 74, .5); }
  35% { transform: scale(1.04); background: rgba(46, 107, 74, .22); box-shadow: 0 0 0 6px rgba(46, 107, 74, .15); }
  100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(46, 107, 74, 0); } }
.akis-kasa.akis-tik-anim { animation: akis-tik 1.4s ease-out; }
.akis-kasa.akis-tik-anim .akis-kasa-hal { animation: akis-tik 1.4s ease-out; }

/* ---- BÖLÜM SAYFASI · 3D uygulama ikonları (2026.1465) ----
   Kabarık, ışıklı, gölgeli kare: üstte parlama, altta koyuluk, dışta
   renkli gölge. İkon beyaz çizgi, hafif gölgeli. */
.ikon3d { position: relative; flex: none; width: 76px; height: 76px; border-radius: 22px; display: grid; place-items: center; color: #fff;
  background:
    radial-gradient(120% 80% at 30% 0%, rgba(255, 255, 255, .55) 0%, rgba(255, 255, 255, 0) 55%),
    linear-gradient(155deg, var(--i1) 0%, var(--i2) 100%);
  box-shadow:
    inset 0 2px 1px rgba(255, 255, 255, .55),
    inset 0 -6px 10px rgba(0, 0, 0, .22),
    0 12px 22px -8px var(--i2),
    0 3px 6px rgba(58, 42, 29, .18);
  transition: transform .18s ease, box-shadow .18s ease; }
.ikon3d::after { content: ""; position: absolute; inset: 5px 8px auto 8px; height: 38%; border-radius: 16px 16px 40% 40%;
  background: linear-gradient(180deg, rgba(255, 255, 255, .38), rgba(255, 255, 255, 0)); pointer-events: none; }
.ikon3d svg { position: relative; z-index: 1; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .28)); }
.ikon3d svg * { stroke: #fff; }

.bolum-izgara { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 16px; max-width: 1100px; }
.bolum-kart { position: relative; display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 22px 12px 18px;
  border-radius: 20px; border: 1px solid var(--altin-soluk, #e6d8bc); background: #fff; cursor: pointer; font: inherit; color: var(--metin);
  box-shadow: 0 2px 0 rgba(154, 123, 69, .18); transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.bolum-kart:hover { transform: translateY(-3px); border-color: var(--altin, #C2A268); box-shadow: 0 14px 26px -12px rgba(58, 42, 29, .35); }
.bolum-kart:hover .ikon3d { transform: scale(1.06) rotate(-2deg); }
.bolum-kart:focus-visible { outline: 2px solid var(--vurgu, #8F2D22); outline-offset: 2px; }
.bolum-ad { font-size: 14px; font-weight: 700; text-align: center; line-height: 1.25; }
.bolum-yakinda { position: absolute; top: 10px; right: 10px; font-size: 10px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  padding: 2px 8px; border-radius: 999px; background: var(--oyuk, #f3ead8); color: var(--ikinci); }
@media (max-width: 600px) {
  .bolum-izgara { grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 12px; }
  .ikon3d { width: 64px; height: 64px; border-radius: 18px; }
  .bolum-kart { padding: 16px 8px 14px; }
}
.ikon3d svg { width: 40px; height: 40px; }
@media (max-width: 600px) { .ikon3d svg { width: 34px; height: 34px; } }
/* 3D ikonun kendisi (2026.1465) · çerçeve yok, kabartma süzgeci */
.ikon3d-k { display: grid; place-items: center; width: 92px; height: 92px; transition: transform .2s ease; }
.ikon3d-k svg { width: 84px; height: 84px; filter: url(#ns-kabart); overflow: visible; }
.bolum-kart:hover .ikon3d-k { transform: translateY(-3px) scale(1.06) rotate(-2deg); }
.bolum-izgara { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
@media (max-width: 600px) {
  .bolum-izgara { grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); }
  .ikon3d-k { width: 74px; height: 74px; } .ikon3d-k svg { width: 66px; height: 66px; }
}
/* Kartlar çerçeveli (2026.1531) */
.bolum-kart { border: 1.5px solid var(--altin, #C2A268); box-shadow: 0 3px 0 rgba(154, 123, 69, .28); }
.bolum-kart:hover { border-color: var(--vurgu, #8F2D22); }
/* Bölüm sayfası · Günlük / Haftalık / Aylık başlıkları (2026.1531) */
.bolum-grup { margin: 0 0 26px; }
.bolum-grup-bas { display: flex; align-items: center; gap: 12px; margin: 0 0 12px; font: 600 19px/1.2 var(--yazi-baslik, Georgia), serif; color: var(--vurgu, #8F2D22); max-width: 1100px; }
.bolum-grup-bas::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, var(--altin, #C2A268), transparent); }
.bolum-grup-bos { margin: 0; padding: 18px; max-width: 1100px; border: 1.5px dashed var(--altin-soluk, #e6d8bc); border-radius: 16px; color: var(--ikinci); font-size: 13.5px; text-align: center; background: rgba(255, 255, 255, .45); }
.bolum-grup-bos { background: rgba(255, 253, 248, .92); }
/* Kontrol rozeti (2026.1531) */
.bolum-kart-bekliyor { border-color: var(--hata, #B3261E); box-shadow: 0 3px 0 rgba(179, 38, 30, .25); }
.bolum-rozet-uyari { order: 3; margin-top: -4px; padding: 3px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 700; line-height: 1.3; text-align: center;
  background: color-mix(in srgb, var(--hata, #B3261E) 12%, #fff); color: var(--hata, #B3261E); animation: bolum-nabiz 2.4s ease-in-out infinite; }
.bolum-rozet-tamam { position: absolute; top: 10px; right: 10px; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center;
  font-size: 13px; font-weight: 800; color: #fff; background: var(--basari, #2F6B4A); box-shadow: 0 2px 4px rgba(0, 0, 0, .2); }
@keyframes bolum-nabiz { 0%, 100% { box-shadow: 0 0 0 0 rgba(179, 38, 30, .0); } 50% { box-shadow: 0 0 0 4px rgba(179, 38, 30, .12); } }
/* Uyarı rozeti kartın üstünde (2026.1465 · kullanıcı: "sayım bekleniyor
   üstte olsun, kartların boyu ilk açılışta küçük sonra genişliyor, öyle
   olmasın"). Kartın akışına girmez, kart boyu değişmez. */
.bolum-rozet-uyari { position: absolute; top: 9px; left: 50%; transform: translateX(-50%); order: 0; margin: 0;
  max-width: calc(100% - 16px); box-sizing: border-box; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 11px; padding: 2px 9px; z-index: 1; }
/* Yalnız Admin'in gördüğü kart · sol üstte yıldız (2026.1465) */
.bolum-admin { position: absolute; top: 9px; left: 10px; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center;
  font-size: 14px; line-height: 1; color: #fff; background: var(--altin, #C2A268); box-shadow: 0 2px 4px rgba(0, 0, 0, .18); }
/* Sürüm sol altta (2026.1531) */
.yan-surum { margin-top: auto; padding: 14px 20px 12px; font-size: 10.5px; letter-spacing: .04em; color: var(--ikinci); opacity: .7; }
/* Yetkiniz yok kartı (2026.1465) */
.yetkisiz-kart { max-width: 420px; margin: 40px auto; padding: 28px 24px; text-align: center; display: grid; gap: 10px; justify-items: center;
  border: 1.5px solid var(--altin, #C2A268); border-radius: 20px; background: #fffdf8; box-shadow: 0 3px 0 rgba(154, 123, 69, .25); }
.yetkisiz-simge { font-size: 38px; }
.yetkisiz-kart b { font: 600 22px/1.2 var(--yazi-baslik, Georgia), serif; color: var(--vurgu, #8F2D22); }
.yetkisiz-kart p { margin: 0 0 6px; color: var(--ikinci); font-size: 14px; }
/* Sürüm sol altta (2026.1465) */
.yan-surum { margin-top: auto; padding: 14px 20px 12px; font-size: 10.5px; letter-spacing: .04em; color: var(--ikinci); opacity: .7; }
/* Yetkiniz yok kartı (2026.1465) */
.yetkisiz-kart { max-width: 420px; margin: 40px auto; padding: 28px 24px; text-align: center; display: grid; gap: 10px; justify-items: center;
  border: 1.5px solid var(--altin, #C2A268); border-radius: 20px; background: #fffdf8; box-shadow: 0 3px 0 rgba(154, 123, 69, .25); }
.yetkisiz-simge { font-size: 38px; }
.yetkisiz-kart b { font: 600 22px/1.2 var(--yazi-baslik, Georgia), serif; color: var(--vurgu, #8F2D22); }
.yetkisiz-kart p { margin: 0 0 6px; color: var(--ikinci); font-size: 14px; }

/* ===== TELEFON · üst kısım (2026.1465) =====
   Kullanıcı: "mobilde özellikle üst menüler çok kötü duruyor".
   1 · Sayfa adı tepe çubuğunda (logonun yerinde); Dashboard'da logo kalır.
       Ayrı başlık kartı (sayfa-kusak) telefonda çıkmaz.
   2 · Üst şerit tek satır: sığmayan yazılı düğmeler "⋯" menüsünde
       (kabuk.js · seritSigdir); Ayarlar düğmesi yalnız simge. */
@media (max-width: 899.98px) {
  body:not([data-sayfa="panel"]) .ust-logo { display: none; }
  body:not([data-sayfa="panel"]) .ust-sayfa-adi { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font: 600 18px/1.2 var(--yazi-baslik, Georgia), serif; color: var(--vurgu, #8F2D22); }
  body:not([data-sayfa="panel"]) .ust-kimlik { display: flex; flex: 1; min-width: 0; }
  body:not([data-sayfa="panel"]) .ust-alt-satir { min-width: 0; }
  body:not([data-sayfa="panel"]) .sayfa > .sayfa-kusak { display: none; }
  body:not([data-sayfa="panel"]) .sayfa > .sayfa-kusak + .sayfa-kusak-serit { margin-top: 10px; border-top: var(--kart-cerceve, 1px solid #e6d8bc); border-radius: var(--kose-kart, 16px); }
}
@media (max-width: 640px) {
  .rs-serit { row-gap: 6px; }
  .rs-serit > .rs-ozet { order: 99; flex-basis: 100%; }
  .rs-serit .rs-ayarlar span { display: none; }
  .rs-serit .rs-ayarlar { padding: 0 9px; gap: 0; }
  .serit-gizli { display: none !important; }
  .serit-daha { min-width: 38px; font-size: 18px; font-weight: 800; line-height: 1; letter-spacing: 1px; }
}
/* "⋯" menüsü · alttan açılır */
.serit-menu-perde { position: fixed; inset: 0; z-index: 900; background: rgba(40, 26, 18, 0); transition: background .2s ease; display: flex; align-items: flex-end; }
.serit-menu-perde.acik { background: rgba(40, 26, 18, .38); }
.serit-menu { width: 100%; box-sizing: border-box; padding: 8px 14px calc(14px + env(safe-area-inset-bottom)); display: grid; gap: 8px;
  background: #fbf7ef; border-radius: 22px 22px 0 0; box-shadow: 0 -12px 30px -14px rgba(58, 42, 29, .5);
  transform: translateY(100%); transition: transform .26s cubic-bezier(.2, .9, .3, 1.15); }
.serit-menu-perde.acik .serit-menu { transform: translateY(0); }
.serit-menu-tutamak { justify-self: center; width: 42px; height: 5px; border-radius: 3px; background: #d9c9a8; margin: 2px 0 6px; }
.serit-menu-oge { min-height: 50px; padding: 0 16px; text-align: left; font: 600 15.5px/1.2 inherit; font-family: inherit; color: var(--metin);
  background: #fff; border: 1.5px solid #eadfca; border-radius: 14px; box-shadow: 0 2px 0 rgba(154, 123, 69, .18); }
.serit-menu-oge:active { transform: scale(.98); }
.serit-menu-vazgec { min-height: 46px; border: 0; background: none; font: 700 15px/1 inherit; font-family: inherit; color: var(--vurgu, #8F2D22); }
/* Şerit · kutular önce daralır, sonra "⋯"a gider (2026.1531 · kullanıcı:
   "üst menü tek satır kalsın ama bazı yerlerde yine iki satır olmuş"). */
@media (max-width: 640px) {
  .rs-serit > *:not(.rs-ozet) { min-width: 0; flex-shrink: 1; }
  .rs-serit .arama, .rs-serit .sec, .rs-serit .aranan, .rs-serit .trh, .rs-serit select {
    flex: 1 1 110px !important; min-width: 96px; width: auto !important; max-width: 100%; }
  .rs-serit .rs-secim { min-width: 0; flex: 1 1 auto; }
  .rs-serit .arama { min-height: 36px; }
  .rs-serit .arama .arama-kutu { min-width: 0; width: 100%; }
  .rs-serit .na-esneyen { flex: 0 0 0; }
  /* Fatura / Kredi kartı aktarımı özet kutuları · dört küçük hücre tek satırda */
  .fatura-oz-izgara { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
  .fatura-oz-hucre:not(.fatura-oz-sekme) { padding: 8px 4px !important; min-height: 0 !important; text-align: center; }
  .fatura-oz-hucre:not(.fatura-oz-sekme) .fatura-oz-simge { display: none !important; }
  .fatura-oz-hucre:not(.fatura-oz-sekme) .fatura-oz-sayi { font-size: 14px; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .fatura-oz-hucre:not(.fatura-oz-sekme) .fatura-oz-ad { font-size: 9.5px; letter-spacing: .03em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .fatura-oz-sekme { grid-column: 1 / -1 !important; }
  .fatura-oz-alt { display: flex !important; align-items: center; gap: 8px; flex-wrap: nowrap; }
  .fatura-oz-alt .fatura-oz-notlar { flex: 1; min-width: 0; overflow: hidden; }
  .fatura-oz-alt .fatura-arsiv { width: auto !important; flex: none; padding: 0 12px; }
}
@media (max-width: 640px) {
  .rs-serit .rs-secim { flex: 1 1 0 !important; min-width: min-content !important; }
}

/* Alt menü · 4 sekme + Diğer (2026.1465) */
.alt-menu-fazla { display: none !important; }
.alt-menu-diger-simge { display: grid; place-items: center; width: 22px; height: 22px; font-size: 20px; font-weight: 800; line-height: 1; letter-spacing: 1px; }
.alt-menu-sekme span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.alt-diger-oge { display: flex; align-items: center; gap: 12px; }
.alt-diger-oge svg { width: 26px; height: 26px; flex: none; }

/* Sekme düğmeleri telefonda tek satır, yana kayar (2026.1465) */
@media (max-width: 640px) {
  .stk-sekmeler, .bk-sekmeler, .secim-serit {
    flex-wrap: nowrap !important; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none;
    -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; padding-bottom: 2px;
    -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); }
  .stk-sekmeler::-webkit-scrollbar, .bk-sekmeler::-webkit-scrollbar, .secim-serit::-webkit-scrollbar { display: none; }
  .stk-sekmeler > *, .bk-sekmeler > *, .secim-serit > * { flex: none !important; white-space: nowrap; scroll-snap-align: start; }
}

/* ===== TELEFON · animasyonlar (2026.1465) =====
   Sayfa hafifçe kayarak gelir (solma yok · 2026.748); kartlar ve satırlar
   dokununca hafifçe küçülür; aşağı çekip yenileme göstergesi. Hareket
   azaltma açıksa hiçbiri çalışmaz. */
@media (max-width: 899.98px) and (prefers-reduced-motion: no-preference) {
  .sayfa-gir { animation: sayfa-sagdan .28s cubic-bezier(.2, .8, .25, 1); }
  .sayfa-gir-geri { animation: sayfa-soldan .28s cubic-bezier(.2, .8, .25, 1); }
  @keyframes sayfa-sagdan { from { transform: translateX(28px); } to { transform: none; } }
  @keyframes sayfa-soldan { from { transform: translateX(-28px); } to { transform: none; } }
}
@media (hover: none) and (prefers-reduced-motion: no-preference) {
  .bolum-kart, .gk-satir, .ak-satir, .alt-menu-sekme, .rs-tus, .dugme-birincil, .dugme-ikincil, .ayarlar-geri, .serit-menu-oge, .nt-satir2, .bk-kk {
    transition: transform .12s ease; -webkit-tap-highlight-color: transparent; }
  .bolum-kart:active, .bk-kk:active { transform: scale(.96); }
  .gk-satir:active, .ak-satir:active, .nt-satir2:active { transform: scale(.985); }
  .rs-tus:active, .dugme-birincil:active, .dugme-ikincil:active, .ayarlar-geri:active, .alt-menu-sekme:active { transform: scale(.94); }
  .alt-menu-sekme-secili svg { animation: alt-sekme-zipla .35s cubic-bezier(.3, 1.6, .5, 1); }
  @keyframes alt-sekme-zipla { 0% { transform: scale(.7); } 100% { transform: scale(1); } }
}
/* Aşağı çekip yenile göstergesi */
.cek-yenile { position: fixed; top: 64px; left: 50%; z-index: 950; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  background: #fff; border: 1.5px solid var(--altin, #C2A268); box-shadow: 0 6px 14px -6px rgba(58, 42, 29, .45); color: var(--vurgu, #8F2D22);
  font-size: 20px; font-weight: 800; transform: translate(-50%, -44px); opacity: 0; transition: opacity .15s ease; pointer-events: none; }
.cek-yenile.gorunur { opacity: 1; }
.cek-yenile.hazir { background: var(--vurgu, #8F2D22); color: #fff; border-color: var(--vurgu, #8F2D22); }
.cek-yenile.donuyor .cek-yenile-ok { animation: cek-don .6s linear infinite; }
@keyframes cek-don { to { transform: rotate(360deg); } }

/* ===== TELEFON · tablolar (2026.1465) ===== */
/* Geniş tablo · yana kayar, ilk sütun sabit (kabuk.js · tablolariSigdir) */
.mob-kaydir { width: 100%; overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; scrollbar-width: thin; position: relative; }
.mob-kaydir > table { min-width: 100%; }
.mob-kaydir th:first-child, .mob-kaydir td:first-child,
.mob-kaydir-var th:first-child, .mob-kaydir-var td:first-child {
  position: sticky; left: 0; z-index: 1; background: var(--kart-kagit, #fffdf8); box-shadow: 1px 0 0 var(--altin-soluk, #e6d8bc); }
.mob-kaydir th:first-child, .mob-kaydir-var th:first-child { z-index: 2; }

/* Kontrol listeleri (gk-liste · Kasa Fark, Günlük İşlemler, 120'li, Zam …)
   telefonda satır kartı: tarih solda, kutular yan yana, açıklama altta tam
   genişlik. Başlık satırı gizli (kutuların kendi yazısı var). */
@media (max-width: 640px) {
  table.gk-liste, table.gk-liste tbody { display: block; width: 100%; }
  table.gk-liste thead { display: none; }
  table.gk-liste tr.gk-satir { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; padding: 9px 10px; margin: 0 0 8px; }
  table.gk-liste tr.gk-satir > td { display: block; padding: 0 !important; border: 0 !important; width: auto !important; min-width: 0; }
  table.gk-liste tr.gk-satir > td.gk-tarih { flex: 0 0 52px; }
  table.gk-liste tr.gk-satir > td:not(.gk-tarih):not(.gk-ack) { flex: 1 1 auto; }
  table.gk-liste tr.gk-satir > td.kfr-ay-sag { flex: 0 0 auto; text-align: right; }
  table.gk-liste tr.gk-satir > td.gk-ack { flex: 1 1 100%; order: 9; }
  table.gk-liste .gk-tik-mini { width: 100%; }
  table.gk-liste tr:not(.gk-satir) { display: block; }
  table.gk-liste tr:not(.gk-satir) > td { display: block; }
}
@media (max-width: 640px) {
  table.gk-liste tr.gk-satir { background: #fffdf8; border: 1px solid var(--altin-soluk, #e6d8bc); border-radius: 12px; }
  table.gk-liste tr.gk-satir.gk-satir-secili { background: #fff6e6; border-color: var(--vurgu, #8F2D22); }
  table.gk-liste tr.gk-satir > td { background: transparent !important; border-radius: 0 !important; }
}
@media (max-width: 640px) {
  table.gk-liste tr.gk-satir > td.gk-tarih { flex: 1 1 55%; display: flex; align-items: baseline; gap: 6px; min-width: 0; }
  table.gk-liste tr.gk-satir > td.gk-tarih b { flex: none; font-size: 15px; }
  table.gk-liste tr.gk-satir > td.gk-tarih small { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  table.gk-liste tr.gk-satir > td:not(.gk-tarih):not(.gk-ack):not(.kfr-ay-sag) { flex: 1 1 140px; }
}

/* Hesap defteri (Hareketler) telefonda sıkı · iki satır (2026.1465 · kullanıcı:
   "burayı da ayarla, bankalardaki gibi olsun, çok geniş geniş").
   1. satır: tarih · açıklama   2. satır: borç / alacak · bakiye */
@media (max-width: 640px) {
  .hd-defter .tablo tbody tr { display: flex !important; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; padding: 9px 12px !important; min-height: 0 !important; height: auto !important; }
  .hd-defter .tablo tbody td { height: auto !important; min-height: 0 !important; padding: 0 !important; line-height: 1.3 !important; }
  .hd-defter .tablo tbody td.tablo-kimlik { flex: none; font-size: 12.5px; font-weight: 700; color: var(--ikinci); }
  .hd-defter .tablo tbody td.tablo-yardimci { flex: 1 1 calc(100% - 96px); min-width: 0; font-size: 13.5px; opacity: 1; color: var(--metin);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .hd-defter .tablo tbody td.tablo-ek { order: 2; flex: 1 1 auto; font-size: 13px; opacity: .85; }
  .hd-defter .tablo tbody td.tablo-tutar { order: 3; margin-left: auto; font-size: 14.5px; font-weight: 800; }
  .hd-defter .tablo tbody td.tablo-tutar::before { content: "Bakiye "; font-size: 10.5px; font-weight: 600; letter-spacing: .03em; color: var(--ikinci); }
  .hd-defter .tablo tbody td.tablo-yardimci svg { width: 14px; height: 14px; vertical-align: -2px; }
}

/* ---------- YÜZEN ALT MENÜ (2026.1466 · kullanıcı: "WhatsApp'taki şekil olsun,
   havada uçuyor gibi") ----------
   Çubuk ekranın dibine yapışmaz: kenarlardan ve alttan boşluklu, tam
   yuvarlak köşeli, gölgeli bir kapsül. Seçili sekmenin arkasında yumuşak
   vurgu renginde bir kapsül durur (alt çizgi kalktı). Renkler programın kendi
   renkleri. --alt-menu sayfaların altta bıraktığı paydır: kapsül + boşluk. */
@media (max-width: 899.98px) {
  :root { --alt-menu: 84px; }
  .alt-menu,
  .alt-menu[class] {
    left: 12px;
    right: 12px;
    bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    height: 64px;
    padding: 5px;
    gap: 2px;
    border: 1px solid var(--kenar);
    border-radius: 999px;
    background: color-mix(in srgb, var(--yuzey) 96%, transparent);
    box-shadow: 0 10px 28px rgba(70, 20, 25, .18), 0 2px 6px rgba(70, 20, 25, .10);
  }
  .alt-menu-sekme { border-radius: 999px; gap: 1px; transition: background-color .18s ease-out, color .18s ease-out; }
  .alt-menu-sekme-secili { background: color-mix(in srgb, var(--vurgu) 12%, transparent); }
  .alt-menu-sekme-secili::after { display: none; }
}
@media (max-width: 899.98px) and (not (display-mode: standalone)) {
  .alt-menu { height: 64px; padding: 5px; }
}

/* ---------- Ayarlar → Mobil görünüm ---------- */
.mm-bolum { display: grid; gap: 14px; max-width: 640px; }
.mm-kime { display: grid; gap: 6px; font-weight: 600; }
.mm-durum { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 10px 12px; border: 1px solid var(--kenar); border-radius: 12px; background: var(--oyuk); }
.mm-onizleme { padding: 18px 10px 14px; border-radius: 16px; background: var(--oyuk); }
.mm-cubuk { display: flex; gap: 2px; padding: 5px; height: 64px; border: 1px solid var(--kenar); border-radius: 999px;
  background: var(--yuzey); box-shadow: 0 10px 28px rgba(70, 20, 25, .18), 0 2px 6px rgba(70, 20, 25, .10); }
.mm-sekme { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  border-radius: 999px; font-size: var(--etiket-boy); color: var(--metin); }
.mm-sekme > span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mm-sekme-secili { color: var(--vurgu); background: color-mix(in srgb, var(--vurgu) 12%, transparent); }
.mm-liste { display: grid; border: 1px solid var(--kenar); border-radius: 14px; overflow: hidden; background: var(--yuzey); }
.mm-kilitli { opacity: .55; }
.mm-satir { display: flex; align-items: center; gap: 10px; padding: 10px 12px; }
.mm-satir + .mm-satir { border-top: 1px solid var(--ayirici); }
.mm-satir-secili { background: color-mix(in srgb, var(--vurgu) 5%, transparent); }
.mm-sec { flex: 1; display: flex; align-items: center; gap: 10px; cursor: pointer; min-width: 0; }
.mm-sec input { width: 18px; height: 18px; accent-color: var(--vurgu); }
.mm-simge { display: grid; place-items: center; width: 30px; }
.mm-ad small { display: block; color: var(--metin-soluk, #8a7d70); font-weight: 400; font-size: 12px; }
.mm-sira { display: flex; gap: 4px; }
.mm-ok { width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--kenar); background: var(--yuzey); color: var(--vurgu); font-size: 11px; }
.mm-ok:disabled { opacity: .35; }

/* ---------- YÜZEN BÖLÜM PANELİ (2026.1466 · kullanıcı: "a ve b olsun") ----------
   Alt menüde bir bölüme basınca açılan panel ekranın dibine yapışmaz:
   alt menünün hemen üstünde, kenarlardan boşluklu, her köşesi yuvarlak,
   gölgeli bir kart. Alt menü perdenin üstünde kalır (görünür, basılır). */
@media (max-width: 899.98px) {
  .obek-panel,
  .obek-panel[class] {
    left: 12px;
    right: 12px;
    bottom: calc(84px + env(safe-area-inset-bottom, 0px));
    max-height: calc(100dvh - 190px);
    padding-bottom: calc(var(--bosluk) * 1.5);
    border: 1px solid var(--kenar);
    border-radius: 24px;
    box-shadow: 0 16px 40px rgba(70, 20, 25, .24), 0 3px 10px rgba(70, 20, 25, .10);
  }
  body:has(.obek-panel) .alt-menu { z-index: 52; }
}
.mm-alt-baslik { margin: 8px 0 0; font-size: 17px; }
.mm-panel { border: 1px solid var(--kenar); border-radius: 14px; background: var(--yuzey); overflow: hidden; }
.mm-panel-bas { display: flex; align-items: center; gap: 8px; padding: 10px 12px; background: var(--oyuk); }
.mm-panel-bas small { margin-left: auto; color: var(--metin-soluk, #8a7d70); }
.mm-panel-oge { display: flex; align-items: center; gap: 10px; padding: 9px 12px; cursor: pointer; }
.mm-panel-oge + .mm-panel-oge { border-top: 1px solid var(--ayirici); }
.mm-panel-oge input { width: 18px; height: 18px; accent-color: var(--vurgu); }

/* YÜZEN PANEL · ÖRNEKTEKİ GİBİ (2026.1466 · kullanıcı: "renkler, boy falan
   buradaki gibi olsun"). Tek kart: krem yüzey, iç içe kart yok; başlık
   serif ve küçük, kapatma vurgu renginde ✕; satırlar kartın içinde tam genişlik
   çizgiyle ayrılır; simge kutusu 34 px, yazı 15 px, ok soluk. */
@media (max-width: 899.98px) {
  .obek-panel,
  .obek-panel[class] { background: #fbf7ef; border-color: #d9c9ad; padding-bottom: 4px; }
  .obek-panel .obek-panel-baslik { padding: 14px 16px 6px; }
  .obek-panel .obek-panel-ad { font-family: var(--yazi-baslik); font-size: 19px; line-height: 1.25; font-weight: 700; color: var(--metin); }
  .obek-panel .obek-panel-baslik .simge-dugme { color: var(--vurgu); width: 32px; height: 32px; }
  .obek-panel .obek-kart,
  .obek-panel .obek-panel-baslik + .obek-kart,
  .obek-panel .obek-kart + .obek-kart { margin: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
  .obek-panel .obek-kart + .obek-kart { border-top: 1px solid #eadfcb; }
  .obek-panel .obek-kart .liste-satir { min-height: 0; padding: 12px 14px; gap: 12px; }
  .obek-panel .obek-kart .liste-satir:not(:first-child)::after { left: 0; border-top-color: #eadfcb; }
  .obek-panel .obek-kart .liste-satir-simge {
    flex: 0 0 34px; width: 34px; height: 34px; border-radius: 10px;
    background: #f3ead9; border: 1px solid #e1d2b5; box-shadow: none;
  }
  .obek-panel .obek-kart .liste-satir-baslik { font-size: 15px; font-weight: 400; color: var(--metin); }
  .obek-panel .obek-satir-ok { color: #b8a48a; opacity: 1; font-size: 18px; }
  .obek-panel .obek-panel-bolum { margin: 10px 0 4px; padding: 0 16px; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: #9a7a4a; }
}
@media (max-width: 899.98px) {
  .alt-menu-sekme-acik { color: var(--vurgu); background: color-mix(in srgb, var(--vurgu) 12%, transparent); }
  .alt-menu:has(.alt-menu-sekme-acik) .alt-menu-sekme-secili:not(.alt-menu-sekme-acik) { color: var(--metin); background: none; }
}

/* LOGO RENGİNDE ŞEFFAF ZEMİN (2026.1632 · kullanıcı: "işaretlediğim yerdeki
   şeffaf kırmızı, logodaki vurgu renginin şeffaf dokulu hali
   olsun"). Logo harfleri #5F4400 (logo.png); üst çubuktaki yuvarlak
   düğmelerin ve alt menüde seçili sekmenin zemini bu rengin şeffafı. */
:root { --logo-saydam: rgba(95, 68, 0, .10); }
@media (max-width: 899.98px) {
  .ust-geri,
  .ust-akis,
  .ust-sube,
  .ust-avatar { background: var(--logo-saydam); }
  .ust-akis-acik { background: var(--vurgu); }
  .alt-menu-sekme-secili,
  .alt-menu-sekme-acik { background: var(--logo-saydam); }
}
.mm-sekme-secili { background: var(--logo-saydam); }

/* ŞUBE SEÇİCİ TELEFONDA YOK (2026.1466 · kullanıcı: "şube seçim kısmını
   kaldıralım" · "b: telefonda hiçbir sayfada görünmesin, bilgisayarda
   dursun · şu an tüm şubeler"). Seçili şube olduğu gibi kalır. */
@media (max-width: 899.98px) {
  .ust-sube { display: none !important; }
}