/* azatech – AYARLAR 2: bölümlü ayar sayfası (ayar2.js ile).
 * Sol içindekiler, sağ bölümler; etiket solda / alan sağda; altta yapışık kaydet çubuğu; satır tabanlı liste ve kur defteri.
 * Yalnız yerleşim: renk tanımlamaz, mevcut değişkenler (--navy, --ink, --mut, --line, --panel, --r-lg). Sınıf öneki: a2-, kd- (kur defteri). */

.a2 { --a2-sol: 232px; --a2-et: 232px; --a2-alan: 520px; padding: 16px var(--sayfa-px, 18px) 40px; max-width: var(--sayfa-w, 1240px); margin-inline: auto; box-sizing: border-box; width: 100%; }

/* ---- kabuk: içindekiler + bölümler ---- */
#app .a2-kabuk { display: grid; grid-template-columns: var(--a2-sol) minmax(0, 1fr); gap: 0 32px; align-items: start; }
#app .a2-sol { position: sticky; top: 72px; display: flex; flex-direction: column; gap: 20px; min-width: 0; }
#app .a2-ust:empty { display: none; }
#app .a2-nav { display: flex; flex-direction: column; gap: 2px; }
#app .a2-nav a { display: block; padding: 8px 12px; border-radius: 8px; border-inline-start: 3px solid transparent; font-size: 14px; font-weight: 550; line-height: 1.35; color: var(--mut); text-decoration: none; overflow-wrap: anywhere; }
#app .a2-nav a:hover { background: color-mix(in srgb, var(--navy) 5%, transparent); color: var(--ink); }
#app .a2-nav a.on { background: color-mix(in srgb, var(--navy) 8%, var(--panel, #fff)); border-inline-start-color: var(--navy); color: var(--navy); font-weight: 650; }
#app .a2-nav a:focus-visible { outline: 2px solid var(--navy); outline-offset: 1px; }
#app .a2-ana { display: flex; flex-direction: column; gap: 24px; min-width: 0; }

/* kısayol şeridi (Ayarlar): içindekinin üstünde, dikey kısa satırlar */
#app .a2-ust .y2-hizli { display: flex; flex-direction: column; gap: 8px; margin: 0; }
#app .a2-ust .y2-hk { padding: 10px 12px; gap: 10px; border-radius: 10px; box-shadow: none; }
#app .a2-ust .y2-hk-ik { width: 32px; height: 32px; border-radius: 8px; }
#app .a2-ust .y2-hk small { display: none; }
#app .a2-ust .y2-hk b { font-size: 13px; }

/* ---- bölüm: tek kutu, başlık bandı, gövde ---- */
#app .a2-bolum.ay-card, #app .a2-bolum { padding: 0 24px 24px; margin: 0; border-radius: var(--r-lg, 12px); border: 1px solid var(--line); background: var(--panel, #fff); box-shadow: none; overflow: visible; min-width: 0; }
#app .a2-bolum[hidden] { display: none; }
#app .a2-bolum > .a2-bas { margin: 0 -24px; padding: 20px 24px 16px; border-bottom: 1px solid var(--line); }
#app .a2-bas h2 { margin: 0; padding: 0; border: 0; font-size: 17px; font-weight: 650; line-height: 1.3; color: var(--ink); }
#app .a2-bas p { margin: 4px 0 0; font-size: 13px; line-height: 1.45; color: var(--mut); max-width: 68ch; }
#app .a2-bolum > .a2-bas + * { margin-top: 20px; }
#app .a2-bolum > h3 { margin-top: 28px; margin-bottom: 8px; font-size: 14px; font-weight: 650; color: var(--ink); }
#app .a2-bolum .help { max-width: 68ch; font-size: 13px; line-height: 1.5; color: var(--mut); margin-block: 8px; }

/* ---- form: etiket solda, alan sağda ---- */
#app .a2 .ay-grid, #app .a2 .dt-form, #app .a2 .ay-pf .ay-grid { display: flex; flex-direction: column; align-items: stretch; gap: 0; margin-block: 0; }
#app .a2 .ay-grid > .w2 { width: 100%; }
#app .a2 .a2-satir { display: grid; grid-template-columns: minmax(150px, var(--a2-et)) minmax(0, 1fr); gap: 4px 24px; align-items: start; padding: 14px 0; border-bottom: 1px solid color-mix(in srgb, var(--line) 60%, transparent); margin: 0; }
#app .a2 .a2-satir > .a2-et { grid-column: 1; grid-row: 1; }
#app .a2 .a2-satir > .fx-z { grid-column: 1; grid-row: 1; justify-self: end; padding-top: 10px; margin-inline-end: -14px; }
#app .a2 .a2-satir > :not(.a2-et):not(.fx-z) { grid-column: 2; grid-row: 1; max-width: var(--a2-alan); width: 100%; margin: 0; }
#app .a2 .a2-satir > .fx-z ~ :not(.a2-et):not(.fx-z) { grid-row: 1; }
#app .a2 .a2-satir > textarea { max-width: none; }
#app .a2 .a2-et { font-size: 13px; font-weight: 600; color: var(--ink); line-height: 1.4; padding-top: 10px; }
#app .a2 .a2-et .a2-not, #app .a2 .a2-et small { display: block; margin-top: 2px; font-size: 12px; font-weight: 400; color: var(--mut); line-height: 1.4; }
#app .a2 .a2-satir input:not([type=checkbox]):not([type=radio]), #app .a2 .a2-satir select { height: 40px; box-sizing: border-box; padding: 0 12px; margin: 0; border: 1px solid var(--line); border-radius: 8px; background: var(--panel, #fff); font: inherit; font-size: 14px; color: var(--ink); }
#app .a2 .a2-satir textarea { box-sizing: border-box; padding: 10px 12px; margin: 0; border: 1px solid var(--line); border-radius: 8px; font: inherit; font-size: 14px; background: var(--panel, #fff); color: var(--ink); }
#app .a2 .a2-satir :is(input, #main select, #main textarea):focus { outline: 2px solid color-mix(in srgb, var(--navy) 35%, transparent); outline-offset: 1px; border-color: var(--navy); }
#app .a2 .a2-satir.ay-hata-satir, #app .a2 .ay-hata-alan { border-color: var(--red); }
#app .a2 form > label:not(.a2-satir):not(.chk):not(.ay-ac) { display: block; margin-top: 12px; }
#app .a2 .chk, #app .a2 .ay-ac { display: flex; align-items: flex-start; gap: 10px; padding: 8px 0; font-size: 14px; font-weight: 400; line-height: 1.4; margin: 0; }
#app .a2 .chk input, #app .a2 .ay-ac input { margin: 2px 0 0; flex: none; width: 16px; height: 16px; }
#app .a2 .chk small { display: block; color: var(--mut); font-size: 12px; }

/* seçenek grupları (para birimi, diller, bildirim olayları): iki sütunlu onay listesi */
#app .a2 #fParaDil { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px; }
#app .a2 #fParaDil > div:not(.ay-a) { padding: 0; border: 0; background: none; }
#app .a2 .ay-ol { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px; margin: 12px 0 0; }
#app .a2 .ay-ol .chk { border: 0; background: none; padding: 8px 0; }

/* ---- kaydet çubuğu: bölümün altına yapışır, değişiklik olunca uyarı gösterir ---- */
#app .a2 .ay-a, #app .a2 .a2-kayit { position: sticky; bottom: 0; z-index: 3; display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 8px 12px; margin: 16px -24px -24px; width: calc(100% + 48px); max-width: none; align-self: stretch; box-sizing: border-box; padding: 12px 24px; border: 0; border-top: 1px solid var(--line); border-radius: 0 0 var(--r-lg, 12px) var(--r-lg, 12px); background: color-mix(in srgb, var(--panel, #fff) 94%, transparent); backdrop-filter: blur(6px); }
#app .a2 form .ay-a { grid-column: auto; }
#app .a2-kirli-not { margin-inline-end: auto; display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--amber, #8a5a00); }
#app .a2-kirli-not::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
#app .a2 form:not(.a2-kirli) > .ay-a .primary { box-shadow: none; }

/* ---- listeler: proje satırları, görseller ---- */
#app .a2 table.ay-pr { width: 100%; border: 0; }
#app .a2 table.ay-pr thead th { background: none; font-size: 12px; font-weight: 600; letter-spacing: .02em; color: var(--mut); text-transform: none; border-bottom: 1px solid var(--line); }
#app .a2 table.ay-pr td { padding: 14px 8px; border-bottom: 1px solid color-mix(in srgb, var(--line) 60%, transparent); vertical-align: middle; }
#app .a2 table.ay-pr td.acts { white-space: nowrap; text-align: end; }
#app .a2 table.ay-pr td.acts > * { margin-inline-start: 12px; }
#app .a2 #pNew { margin-top: 16px; }
#app .a2 .ay-pf { margin-top: 20px; padding: 20px; border: 1px solid var(--line); border-radius: 10px; background: color-mix(in srgb, var(--navy) 3%, var(--panel, #fff)); }
#app .a2 .ay-pf > h3 { margin: 0 0 8px; font-size: 15px; }
#app .a2 .mrow { display: grid; grid-template-columns: 1fr 1fr 1fr auto; gap: 8px; margin: 8px 0; }
#app .a2 .mrow input { height: 40px; box-sizing: border-box; padding: 0 12px; border: 1px solid var(--line); border-radius: 8px; min-width: 0; }
#app .a2 .ay-img { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 16px; margin-top: 4px; }
#app .a2 .ay-img .im { border: 1px solid var(--line); border-radius: 10px; padding: 12px; background: var(--panel, #fff); }
#app .a2 .ay-img .pv { aspect-ratio: 4 / 3; border-radius: 8px; overflow: hidden; background: color-mix(in srgb, var(--navy) 4%, var(--panel, #fff)); display: grid; place-items: center; }
#app .a2 .ay-img .pv img { max-width: 100%; max-height: 100%; object-fit: contain; }
#app .a2 .ay-img .ia { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 8px; }

/* ---- kur defteri (Döviz kurları): bir para birimi = bir satır ---- */
#app .kd { display: flex; flex-direction: column; }
#app .kd-satir { display: grid; grid-template-columns: minmax(190px, 1.1fr) minmax(150px, .9fr) minmax(190px, 1.2fr) minmax(230px, 1.4fr); gap: 16px 24px; align-items: center; padding: 18px 24px; border-bottom: 1px solid var(--line); }
#app .kd-satir:last-child { border-bottom: 0; }
#app .kd-satir.kr-uyari { background: color-mix(in srgb, var(--amber, #a86a00) 6%, var(--panel, #fff)); }
#app .kd-satir .kr-ust { min-width: 0; }
#app .kd-satir .kr-deger b { font-size: 26px; }
#app .kd-satir .kr-dl { border: 0; }
#app .kd-satir .kr-dl > div { border: 0; padding: 2px 0; justify-content: flex-start; gap: 8px; }
#app .kd-satir .kr-dl dt { min-width: 104px; }
#app .kd-satir .kr-dl dd { text-align: start; }
#app .kd-satir .kr-elle { margin: 0; gap: 8px; }
#app .kd-satir .kr-elle label { font-size: 12px; font-weight: 600; color: var(--mut); }
#app .kd-satir .kr-otoet { grid-column: 1 / -1; margin: 0; padding-top: 4px; }
#app .kd-bas { display: grid; grid-template-columns: minmax(190px, 1.1fr) minmax(150px, .9fr) minmax(190px, 1.2fr) minmax(230px, 1.4fr); gap: 24px; padding: 10px 24px; font-size: 12px; font-weight: 600; color: var(--mut); border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--navy) 3%, var(--panel, #fff)); border-radius: var(--r-lg, 12px) var(--r-lg, 12px) 0 0; }
#app .kd-sar { border: 1px solid var(--line); border-radius: var(--r-lg, 12px); background: var(--panel, #fff); overflow: hidden; }
#app .kd-sar > .kd-bas { border-radius: 0; }

/* ---- tek sütunlu sade ekranlar (a2-tek): sayfa genişliği ve çubuk ---- */
#app .a2-tek > .a2-bolum + .a2-bolum { margin-top: 24px; }

/* ---- durumlar ---- */
#app .a2 .loading, #app .a2 .y2-yukle, #app .a2 .y2-bos { padding: 40px 16px; text-align: center; color: var(--mut); font-size: 14px; }
#app .a2 .loading.err { color: var(--red); }

/* ---- dar ekran: içindekiler üstte, etiketler alanın üstünde ---- */
@media (max-width: 960px) {
  #app .a2-kabuk { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  #app .a2-sol { position: static; gap: 12px; }
  #app .a2-nav { flex-direction: row; flex-wrap: wrap; gap: 6px; }
  #app .a2-nav a { border: 1px solid var(--line); border-radius: 999px; padding: 6px 14px; font-size: 13px; background: var(--panel, #fff); }
  #app .a2-nav a.on { border-color: var(--navy); }
  #app .a2-ust .y2-hizli { flex-direction: row; flex-wrap: wrap; }
  #app .kd-bas { display: none; }
  #app .kd-satir { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  #app .kd-satir .kr-ust { grid-column: 1 / -1; }
}
@media (max-width: 720px) {
  #app .a2 { padding-inline: 12px; }
  #app .a2-bolum.ay-card, #app .a2-bolum { padding: 0 16px 16px; }
  #app .a2-bolum > .a2-bas { margin: 0 -16px; padding: 16px; }
  #app .a2 .a2-satir { grid-template-columns: minmax(0, 1fr); padding: 12px 0; }
  #app .a2 .a2-et { padding-top: 0; }
  #app .a2 .a2-satir > :not(.a2-et) { max-width: none; }
  #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)); }
  #app .a2 .ay-a > button { flex: 1 1 auto; min-height: 44px; }
  #app .a2 #fParaDil, #app .a2 .ay-ol { grid-template-columns: minmax(0, 1fr); }
  #app .a2 .mrow { grid-template-columns: minmax(0, 1fr); }
  #app .kd-satir { grid-template-columns: minmax(0, 1fr); padding: 16px; }
}

/* kur defteri: para birimi hücresi iki satır (ad, rozet) */
#app .kd-satir .kr-ust { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 6px 12px; align-items: center; }
#app .kd-satir .kr-ust .kr-rozet { grid-column: 2; justify-self: start; }
#app .kd-satir .kr-ust > div { min-width: 0; }

/* bölüm başlığı: sol başlık + açıklama, sağda durum rozeti / düğme */
#app .a2-bas { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 16px; align-items: center; }
#app .a2-bas > h2 { grid-column: 1; grid-row: 1; }
#app .a2-bas > p { grid-column: 1 / -1; grid-row: 2; margin-top: 0; }
#app .a2-bas-ek { grid-column: 2; grid-row: 1; display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }

/* tüm sayfayı kaydeden form: çubuk sayfanın altına yapışır */
#app .a2-kayit-genel { position: sticky; bottom: 0; z-index: 3; display: flex; justify-content: flex-end; align-items: center; flex-wrap: wrap; gap: 8px 12px; margin-top: 16px; padding: 12px 16px; border: 1px solid var(--line); border-radius: var(--r-lg, 12px); background: color-mix(in srgb, var(--panel, #fff) 94%, transparent); backdrop-filter: blur(6px); box-shadow: 0 -4px 16px color-mix(in srgb, var(--navy) 8%, transparent); }
#app .a2-kayit-genel .ay-not { margin-inline-end: auto; }
#app .a2 > .hd-baslik > :is(h2, .page-head-t) { display: none; }
#app .a2 > .hd-baslik:not(:has(p, button, .bilgi)) { display: none; }
#app .a2 > .hd-baslik { margin-bottom: 16px; }
@media (max-width: 720px) { #app .a2-kayit-genel { bottom: calc(58px + env(safe-area-inset-bottom)); } #app .a2-kayit-genel > button { flex: 1 1 auto; min-height: 44px; } }

#app .a2 .ay-alanlar { display: flex; flex-direction: column; gap: 0; margin: 0; }

/* satır tabanlı liste (prim oranları): ad | oran | eylemler */
#app .pr-liste { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--r-lg, 12px); background: var(--panel, #fff); overflow: hidden; margin-top: 12px; }
#app .pr-bas, #app .pr-satir { display: grid; grid-template-columns: minmax(0, 1fr) 140px minmax(200px, auto); gap: 8px 24px; align-items: center; padding: 12px 20px; }
#app .pr-bas { font-size: 12px; font-weight: 600; color: var(--mut); background: color-mix(in srgb, var(--navy) 3%, var(--panel, #fff)); border-bottom: 1px solid var(--line); }
#app .pr-satir + .pr-satir { border-top: 1px solid color-mix(in srgb, var(--line) 60%, transparent); }
#app .pr-kim small { display: block; color: var(--mut); font-size: 12px; }
#app .pr-satir .acts { display: flex; align-items: center; gap: 12px; justify-content: flex-end; flex-wrap: wrap; }
#app .pr-satir .ay-ek input { width: 100%; }
@media (max-width: 720px) { #app .pr-bas { display: none; } #app .pr-satir { grid-template-columns: minmax(0, 1fr); } #app .pr-satir .acts { justify-content: flex-start; } }

/* belge metinleri: bölüm içinde ikinci düzey liste ve düz metin blokları (kart içinde kart yok) */
#app .a2 .bm-duzen { grid-template-columns: 220px minmax(0, 1fr); gap: 24px; margin-top: 8px; }
#app .a2 .bm-liste.kutu { border: 0; box-shadow: none; padding: 0; background: none; }
#app .a2 .bm-metin.kutu { border: 0; border-bottom: 1px solid var(--line); border-radius: 0; box-shadow: none; padding: 16px 0 20px; margin: 0; background: none; }
#app .a2 .bm-metin.kutu:last-child { border-bottom: 0; }
#app .a2 .bm-bar { margin-inline: -24px; margin-bottom: -24px; border-radius: 0 0 var(--r-lg, 12px) var(--r-lg, 12px); border-inline: 0; border-bottom: 0; }
#app .a2 .mt-ceviri-ic .tbl-x { margin-top: 12px; }
@media (max-width: 800px) { #app .a2 .bm-duzen { grid-template-columns: minmax(0, 1fr); } }

/* yedek listesi: satır = tarih/tür/boyut · denetim durumu · eylemler */
#app .yd-liste { display: flex; flex-direction: column; margin-top: 8px; }
#app .yd-satir { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) auto; gap: 8px 24px; align-items: center; padding: 14px 0; border-bottom: 1px solid color-mix(in srgb, var(--line) 60%, transparent); }
#app .yd-satir:last-child { border-bottom: 0; }
#app .yd-kim small { display: block; color: var(--mut); font-size: 12px; }
#app .yd-durum { font-size: 13px; color: var(--ink); min-width: 0; overflow-wrap: anywhere; }
#app .yd-b { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; justify-content: flex-end; }
#app .a2 .s3y { margin: 0; }
@media (max-width: 800px) { #app .yd-satir { grid-template-columns: minmax(0, 1fr); } #app .yd-b { justify-content: flex-start; } }

/* modül anahtarları: satır = onay kutusu + ad + açıklama */
#app .ia-moduller { display: flex; flex-direction: column; margin-top: 4px; }
#app .ia-satir { display: flex; align-items: flex-start; gap: 12px; padding: 14px 0; border-bottom: 1px solid color-mix(in srgb, var(--line) 60%, transparent); cursor: pointer; }
#app .ia-satir:last-child { border-bottom: 0; }
#app .ia-satir input { margin-top: 3px; width: 18px; height: 18px; flex: none; }
#app .ia-satir span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
#app .ia-satir b { font-size: 14px; }
#app .ia-satir small { font-size: 13px; color: var(--mut); line-height: 1.45; max-width: 68ch; }

/* ortak satır tabanlı liste (hesaplar, hatlar, şablonlar): başlık satırı + kayıt satırları */
#app .ls-liste { display: flex; flex-direction: column; margin-top: 4px; }
#app .ls-bas, #app .ls-satir { display: grid; grid-template-columns: var(--ls-k); gap: 8px 20px; align-items: center; padding: 12px 0; }
#app .ls-bas { padding-block: 8px; font-size: 12px; font-weight: 600; color: var(--mut); border-bottom: 1px solid var(--line); }
#app .ls-satir { border-bottom: 1px solid color-mix(in srgb, var(--line) 60%, transparent); font-size: 14px; }
#app .ls-satir:last-child { border-bottom: 0; }
#app .ls-satir > div { min-width: 0; overflow-wrap: anywhere; }
#app .ls-satir small { display: block; color: var(--mut); font-size: 12px; }
#app .ls-satir small.ls-hata { color: var(--red); }
#app .ls-satir .ym-eylem { display: flex; flex-wrap: wrap; gap: 4px 14px; justify-content: flex-end; }
#app .ls-bos { padding: 16px 0 4px; margin: 0; }
#app .a2 .ym-grid { display: flex; flex-direction: column; gap: 0; margin: 0; }
#app .a2 .ym-kart { border: 1px solid var(--line); border-radius: var(--r-lg, 12px); background: var(--panel, #fff); padding: 20px 24px; margin-top: 24px; }
#app .a2 .ym-kart .dt-acts, #app .a2 .dt-acts { display: flex; justify-content: flex-end; gap: 8px 12px; flex-wrap: wrap; margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--line); }
@media (max-width: 960px) { #app .ls-bas { display: none; } #app .ls-satir { grid-template-columns: minmax(0, 1fr); padding: 14px 0; } #app .ls-satir .ym-eylem { justify-content: flex-start; } }

/* otomatik lead: kaynak formu ve kaynak satırları */
#app .a2 .otl-form { margin-top: 20px; padding: 20px; border: 1px solid var(--line); border-radius: 10px; background: color-mix(in srgb, var(--navy) 3%, var(--panel, #fff)); }
#app .a2 .otl-form > h3 { margin: 0 0 8px; font-size: 15px; }
#app .a2 .otl-form .ay-a { margin: 16px -20px -20px; width: calc(100% + 40px); padding-inline: 20px; border-radius: 0 0 10px 10px; }
#app .a2 .otl-k { padding: 16px 0; border-bottom: 1px solid color-mix(in srgb, var(--line) 60%, transparent); }
#app .a2 .otl-k:last-child { border-bottom: 0; }
#app .a2 .tbl-w, #app .a2 .tbl-x { overflow-x: auto; }
#app .a2 table.tbl, #app .a2 table.tk { width: 100%; }

/* başka bir sayfa kabuğunun içine yerleşen ayar bölümleri: dış boşluk yok */
#app .a2.a2-ic { padding: 0; max-width: none; }
/* onay kutulu satır: kutu alan sütununa hizalanır */
#app .a2 .dt-form .cfld:has(input[type=checkbox]) { display: grid; grid-template-columns: minmax(150px, var(--a2-et)) minmax(0, 1fr); gap: 0 24px; align-self: stretch; padding: 12px 0; border-bottom: 1px solid color-mix(in srgb, var(--line) 60%, transparent); }
#app .a2 .dt-form .cfld:has(input[type=checkbox]) > span { grid-column: 2; }

/* ---- Hesabım: sol bölüm listesi + sağda form (etiket solda, alan sağda), kaydet çubuğu altta yapışık ---- */
#app .hesap-ekran { max-width: var(--sayfa-w, 1240px); padding: 16px var(--sayfa-px, 18px) 40px; }
#app .hesap-kutu { display: grid; grid-template-columns: var(--a2-sol, 232px) minmax(0, 1fr); gap: 0 32px; align-items: start; padding: 0; border: 0; background: none; }
#app .hesap-kutu > h2 { grid-column: 1 / -1; margin: 0 0 16px; font-size: 18px; }
#app .hesap-sekme { grid-column: 1; grid-row: 2 / span 6; position: sticky; top: 72px; flex-direction: column; gap: 2px; margin: 0; }
#app .hesap-sekme button { text-align: start; padding: 8px 12px; border: 0; border-inline-start: 3px solid transparent; border-radius: 8px; font-size: 14px; font-weight: 550; color: var(--mut); }
#app .hesap-sekme button:hover { background: color-mix(in srgb, var(--navy) 5%, transparent); color: var(--ink); }
#app .hesap-sekme button.on { background: color-mix(in srgb, var(--navy) 8%, var(--panel, #fff)); border-inline-start-color: var(--navy); color: var(--navy); font-weight: 650; }
#app .hesap-kutu > section[data-p] { grid-column: 2; padding: 20px 24px; border: 1px solid var(--line); border-radius: var(--r-lg, 12px); background: var(--panel, #fff); min-width: 0; }
#app .hesap-kutu > section[hidden] { display: none; }
#app .hesap-kutu > .hesap-ileti { grid-column: 2; }
#app .hesap-kutu > .hesap-alt { grid-column: 2; position: sticky; bottom: 0; z-index: 3; margin-top: 12px; padding: 12px 16px; border: 1px solid var(--line); border-radius: var(--r-lg, 12px); background: color-mix(in srgb, var(--panel, #fff) 94%, transparent); backdrop-filter: blur(6px); }
#app .hesap-g { display: flex; flex-direction: column; gap: 0; }
#app .hesap-g > label.a2-satir { display: grid; flex-direction: unset; font-size: 13px; color: var(--ink); }
#app .hesap-g input { height: 40px; box-sizing: border-box; border-radius: 8px; }
@media (max-width: 960px) {
  #app .hesap-kutu { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  #app .hesap-sekme { grid-row: auto; position: static; flex-direction: row; flex-wrap: wrap; gap: 6px; }
  #app .hesap-sekme button { border: 1px solid var(--line); border-radius: 999px; background: var(--panel, #fff); padding: 6px 14px; }
  #app .hesap-sekme button.on { border-color: var(--navy); }
  #app .hesap-kutu > section[data-p], #app .hesap-kutu > .hesap-ileti, #app .hesap-kutu > .hesap-alt { grid-column: 1; }
  #app .hesap-kutu > .hesap-alt { bottom: calc(58px + env(safe-area-inset-bottom)); }
}

/* ziyaretçi defteri: arama kutusunda simge yazıyla çakışmasın */
#app .rs-bar input[type=search] { padding-inline-start: 38px; }

/* görev otomasyonu: kural = bir satır (açık · olay · gün · metin · kime · sil), alan adları alanların üstünde */
#app .ot-liste { display: flex; flex-direction: column; }
#app .ot-satir { display: grid; grid-template-columns: 72px minmax(160px, 1.1fr) 130px minmax(200px, 2fr) minmax(140px, 1fr) auto; gap: 8px 16px; align-items: end; padding: 16px 0; border-bottom: 1px solid color-mix(in srgb, var(--line) 60%, transparent); }
#app .ot-satir:last-child { border-bottom: 0; }
#app .ot-satir.kapali .ot-a { opacity: .6; }
#app .ot-a { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
#app .ot-a > span { font-size: 12px; font-weight: 600; color: var(--mut); }
#app .ot-a :is(input:not([type=checkbox]), select) { height: 40px; box-sizing: border-box; width: 100%; padding: 0 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel, #fff); font: inherit; font-size: 14px; }
#app .ot-ac { display: flex; align-items: center; gap: 8px; height: 40px; font-size: 13px; font-weight: 600; }
#app .ot-ac input { width: 18px; height: 18px; margin: 0; }
#app .ot-satir .acts { display: flex; align-items: center; height: 40px; }
@media (max-width: 1100px) { #app .ot-satir { grid-template-columns: 72px minmax(0, 1fr) minmax(0, 1fr); } #app .ot-metin { grid-column: 1 / -1; } }
@media (max-width: 720px) { #app .ot-satir { grid-template-columns: minmax(0, 1fr); align-items: stretch; } #app .ot-ac, #app .ot-satir .acts { height: auto; } }

/* tek bölümlü sayfa: içindekiler gösterilmez */
#app .a2-kabuk.a2-tekli { grid-template-columns: minmax(0, 1fr); }
#app .a2-kabuk.a2-tekli > .a2-sol { display: none; }

/* dar ekran: etiket alanın üstünde (satır tek sütun; açık yerleşimler sıfırlanır) */
@media (max-width: 720px) {
  #app .a2 .a2-satir > .a2-et, #app .a2 .a2-satir > :not(.a2-et):not(.fx-z) { grid-column: 1; grid-row: auto; }
  #app .a2 .a2-satir > .fx-z { display: none; }
  #app .a2 .a2-et { padding-top: 0; }
  #app .a2 .dt-form .cfld:has(input[type=checkbox]) { grid-template-columns: minmax(0, 1fr); }
  #app .a2 .dt-form .cfld:has(input[type=checkbox]) > span { grid-column: 1; }
}

/* dar bir panelin içindeki bölümler: bölüm listesi üstte, yatay */
#app .a2-kabuk.a2-navust { grid-template-columns: minmax(0, 1fr); gap: 16px; }
#app .a2-navust > .a2-sol { position: static; }
#app .a2-navust .a2-nav { flex-direction: row; flex-wrap: wrap; gap: 6px; }
#app .a2-navust .a2-nav a { border: 1px solid var(--line); border-radius: 999px; padding: 6px 14px; font-size: 13px; background: var(--panel, #fff); }
#app .a2-navust .a2-nav a.on { border-color: var(--navy); }
#app .a2.a2-ic .a2-bolum { border-radius: 10px; }
#app .a2.a2-ic#gEd { padding: 20px 24px; }

/* hata ve yükleniyor durumları (ayar ekranları): kutu içinde, okunaklı */
#main[data-y2] > .loading.err, #main[data-y2] > .loading.err:only-child { max-width: 560px; margin: 40px auto; padding: 16px 20px; border: 1px solid color-mix(in srgb, var(--red) 40%, var(--line)); border-radius: var(--r-lg, 12px); background: color-mix(in srgb, var(--red) 6%, var(--panel, #fff)); color: var(--red); text-align: start; font-size: 14px; }
#main[data-y2] > .loading:not(.err) { max-width: 560px; margin: 40px auto; padding: 16px 20px; text-align: center; color: var(--mut); }