/* Ortak durum bileşeni (Ortak.durum / Ortak.hata): yükleniyor iskeleti, boş durum, hata durumu.
 * Tek görünüm: ikon + başlık + açıklama + eylem. Renkler mevcut değişkenlerden (tema, koyu mod, RTL kendiliğinden uyar). */
.durum { display: grid; justify-items: center; align-content: center; gap: 6px; padding: 36px 20px; text-align: center; color: var(--mut); min-width: 0; }
.durum .durum-ik { display: grid; place-items: center; width: 56px; height: 56px; margin-bottom: 6px; border-radius: 50%; color: var(--navy); background: color-mix(in srgb, var(--navy) 8%, var(--panel, #fff)); }
.durum.hata .durum-ik { color: var(--red); background: color-mix(in srgb, var(--red) 10%, var(--panel, #fff)); }
.durum > b, .durum.hata > b { color: var(--ink); font-size: 16px; line-height: 1.35; overflow-wrap: anywhere; }
.durum > p { margin: 0; max-width: 46ch; font-size: 14px; line-height: 1.55; overflow-wrap: anywhere; }
.durum .durum-detay { max-width: 46ch; font-size: 12px; line-height: 1.4; color: var(--mut); overflow-wrap: anywhere; opacity: .9; }
.durum .durum-d { margin-top: 10px; display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.durum .durum-d button { min-height: 36px; }
.durum.hata .durum-d button[aria-busy="true"] { opacity: .6; cursor: progress; }

/* kutu görünümü: ekranın doğrudan çocuğu ya da üstteki uyarı; kart / tablo / pencere içinde çıplak kalır */
#main > .durum, .durum.durum-ust { background: var(--panel, #fff); border: 1px solid var(--line); border-radius: var(--r-lg, 12px); }
#main > .durum.hata, .durum.hata.durum-ust { border-color: color-mix(in srgb, var(--red) 30%, var(--line)); }
.durum.durum-ust { margin: 0 0 16px; padding: 24px 20px; }
.card .durum, .box .durum, .ay-card .durum, .tbl-x .durum, td .durum, dialog .durum { border: 0; background: none; border-radius: 0; }
.durum.yukleniyor { justify-items: stretch; text-align: start; padding: 16px 4px; }
#main > .durum.yukleniyor { padding: 20px; }

/* R2 (rapor / ayar) HTML parçaları aynı bileşeni kullanır; eski kutu biçimleri sıfırlanır */
.r2-app .r2-kg > .durum { padding: 24px 12px; border: 0; background: none; }
.r2-app .r2-sayfa > .durum, .r2-app > .durum { background: var(--panel, #fff); border: 1px dashed var(--line); border-radius: var(--r-lg, 12px); }
.r2-app .r2-sayfa > .durum.hata, .r2-app > .durum.hata { border-style: solid; border-color: color-mix(in srgb, var(--red) 30%, var(--line)); }
.r2-app .durum.yukleniyor { background: none; border: 0; }

@media (max-width: 760px) {
  .durum { padding: 28px 16px; }
  .durum .durum-d button { min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) { .durum .durum-d button[aria-busy="true"] { cursor: default; } }

/* Yeniden yazılan ekranlar (onaylar, değişiklik onayları, korumalar, mükerrer, veri kalitesi): kart içi tablo + altta eylem */
.r2-app .mk-eylem { padding: 12px 16px 16px; justify-content: flex-end; }
.r2-app .r2-kart .r2-kg > .tbl-x { margin: 0; }
.r2-app .r2-kart > header .r2-pil { white-space: nowrap; }

/* ---- Ayarlar (ayarlar.js): telefonda kaydet çubuğu kart kenarını aşmaz, alt çubuğun üstünde durur, içeriği örtmez; Projeler tablosu karta sığar ---- */
html { scroll-padding-bottom: 150px; }
#app .a2 .ay-a, #app .a2 .a2-kayit { flex: 0 0 auto; }   /* kaydet çubuğu esnek formda daralıp karta oturmuyordu (sağ kenarı 33 px içeride kalıyordu) */
#app .a2 .ay-grid > .w2.ay-a { width: calc(100% + 48px); }   /* ayar2: ".ay-grid > .w2 {width:100%}" kuralını geçer */
@media (max-width: 720px) { #app .a2 .ay-grid > .w2.ay-a { width: calc(100% + 32px); } }
@media (max-width: 720px) {
  #app .a2 .ay-a, #app .a2 .a2-kayit { margin: 16px -16px -16px; width: calc(100% + 32px); padding: 12px 16px; bottom: calc(58px + env(safe-area-inset-bottom)); border-bottom: 1px solid var(--line); box-shadow: 0 -6px 12px -10px rgba(0, 0, 0, .35); }
  #app .a2 .ay-a > button, #app .a2 .a2-kayit > button { flex: 1 1 auto; min-height: 44px; }
  #app .a2 .a2-bolum { padding-bottom: 16px; scroll-margin-bottom: 150px; }
}
@media (max-width: 640px) {
  #app .a2 table.ay-pr, #app .a2 table.ay-pr tbody { display: block; width: 100%; min-width: 0; }
  #app .a2 table.ay-pr thead { display: none; }
  #app .a2 table.ay-pr tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; padding: 12px; margin: 0 0 8px; border: 1px solid var(--line); border-radius: var(--r-md, 10px); }
  #app .a2 table.ay-pr td { display: block; padding: 0; border: 0; min-width: 0; max-width: none; overflow-wrap: anywhere; }
  #app .a2 table.ay-pr td:nth-child(1) { grid-column: 1; } #app .a2 table.ay-pr td:nth-child(2) { grid-column: 2; text-align: end; }
  #app .a2 table.ay-pr td:nth-child(3), #app .a2 table.ay-pr td:nth-child(4), #app .a2 table.ay-pr td.acts { grid-column: 1 / -1; }
  #app .a2 table.ay-pr td.acts { display: flex; flex-wrap: wrap; gap: 4px 16px; text-align: start; }
  #app .a2 table.ay-pr td.acts > * { margin: 0; min-height: 36px; }
}

/* ---- Roller ve gruplar (gruplar.js): kök öğe #erIc kendisi .grp-app; ayar.css'in "#erIc .grp-app" kuralları ona uymuyordu, dar ekranda sütun içeriğe göre 464 px oluyordu ---- */
#erIc.grp-app { grid-template-columns: 300px minmax(0, 1fr); height: auto; gap: var(--b-3, 12px); align-items: start; }
#erIc.grp-app > * { min-width: 0; box-sizing: border-box; }
@media (max-width: 900px) { #erIc.grp-app { grid-template-columns: minmax(0, 1fr); } #erIc.grp-app .grp-side { position: static; } #erIc.grp-app .grp-ed { padding: 16px; } }

/* ---- Dokunma hedefi: onay / seçim kutuları (yetkiler, acenta hesapları, otomasyon, fiyat geçmişi, tablolar) en az 24 px, etiketli olanlar telefonda 44 px ---- */
#app input[type=checkbox], #app input[type=radio] { width: 20px; height: 20px; }
#app table input[type=checkbox], #app table input[type=radio] { width: 24px; height: 24px; margin: 0; }
#app label:has(> input[type=checkbox]), #app label:has(> input[type=radio]) { min-height: 32px; }
@media (pointer: coarse), (max-width: 720px) {
  #app label:has(> input[type=checkbox]), #app label:has(> input[type=radio]), #app .yt3-pc, #app .yt3-yetki, #app .yt3-gchip { min-height: 44px; }
  #app table td:has(> input[type=checkbox]:only-child), #app table td:has(> input[type=radio]:only-child) { padding-block: 10px; }
}
/* Ziyaretçi defteri gün gezgini */
#app #rsOnce, #app #rsSonra { min-width: 36px; min-height: 36px; font-size: 18px; line-height: 1; }
@media (pointer: coarse), (max-width: 720px) { #app #rsOnce, #app #rsSonra { min-width: 44px; min-height: 44px; } }