/* Ayarlar (30.09.2026) — tek bileşen ailesi: SettingsPage, SettingsSection, SettingsRow,
 * SettingsTableSection, Switch, StatusBadge, EmptyState, Dialog, DropdownMenu, Toast.
 * Renkler yalnız tema değişkenlerinden (foundation.css); koyu tema kendiliğinden doğru olur.
 * Yoğunluk: sayfa başlığı 20px, bölüm başlığı 15px, gövde/kontrol 13-14px, yardımcı 12px. */

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

#view-settings {
  --ay-kontrol: 36px;
  --ay-kontrol-genislik: 280px;
  --ay-yaricap: 10px;
  --ay-secili-zemin: var(--brand-tint);
  --ay-secili-yazi: var(--brand);
  font-size: 14px;
}

/* ── Kabuk: menü sabit, içerik tek doğal kaydırma kabı ─────────────────── */
/* Rol görünürlüğü (.manager-only.role-visible) display:block!important verir; ızgara korunur. */
.ay-kabuk.manager-only.role-visible { display: grid !important; }
.ay-kabuk { display: grid; grid-template-columns: 248px minmax(0, 1fr); flex: 1; min-height: 0; background: var(--surface); }
.ay-nav { display: flex; flex-direction: column; gap: 12px; min-height: 0; padding: 16px 12px; border-right: 1px solid var(--line); overflow-y: auto; scrollbar-width: thin; scrollbar-color: transparent transparent; }
.ay-nav:hover { scrollbar-color: var(--line-strong) transparent; }
.ay-icerik { position: relative; min-width: 0; min-height: 0; overflow-y: auto; padding: 20px 32px 48px; scroll-padding-top: 16px; }
.ay-sayfa, .ay-yasak { max-width: 1080px; margin: 0 auto; }

.ay-menu { display: flex; flex-direction: column; gap: 16px; }
.ay-menu-grup { display: flex; flex-direction: column; gap: 1px; }
.ay-menu-baslik { padding: 0 10px 6px; font-size: 12px; font-weight: 500; color: var(--ink-3); }
.ay-menu-oge { display: flex; align-items: center; min-height: 32px; padding: 0 10px; border: 0; border-radius: 7px; background: transparent; color: var(--ink-2); font: 400 13px/1.3 var(--font); text-align: left; cursor: pointer; transition: background .12s, color .12s; }
.ay-menu-oge:hover { background: var(--hover); color: var(--ink); }
.ay-menu-oge.active { background: var(--ay-secili-zemin); color: var(--ay-secili-yazi); font-weight: 500; }
.ay-menu-oge:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
.ay-mobil-secim { display: none; }

/* ── Ayar arama (Command benzeri) ───────────────────────────────────────── */
.ay-ara { position: relative; }
.ay-ara > svg { position: absolute; left: 10px; top: 50%; width: 15px; height: 15px; transform: translateY(-50%); color: var(--ink-3); pointer-events: none; }
.ay-ara > .ay-girdi { width: 100%; }
#view-settings :is(.ay-ara, .ay-arama) > .ay-girdi { padding-left: 32px; }
.ay-ara-sonuc { position: absolute; z-index: 40; top: calc(100% + 6px); left: 0; width: max(100%, 320px); max-height: 360px; overflow-y: auto; padding: 4px; border: 1px solid var(--line-strong); border-radius: var(--ay-yaricap); background: var(--surface); box-shadow: var(--shadow-overlay, 0 12px 32px rgb(0 0 0 / .12)); }
.ay-ara-oge { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; padding: 8px 10px; border: 0; border-radius: 7px; background: transparent; color: var(--ink); text-align: left; cursor: pointer; font: inherit; }
.ay-ara-oge strong { font-size: 13px; font-weight: 500; }
.ay-ara-oge small { font-size: 12px; color: var(--ink-2); }
.ay-ara-oge.active, .ay-ara-oge:hover { background: var(--hover); }
.ay-ara-bos { margin: 0; padding: 12px 10px; font-size: 13px; color: var(--ink-2); }

/* ── SettingsPage ───────────────────────────────────────────────────────── */
.ay-sayfa-bas { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 36px; margin-bottom: 20px; }
.ay-sayfa-bas h1 { margin: 0; font-size: 20px; font-weight: 600; letter-spacing: -.01em; color: var(--ink); }
.ay-sayfa-govde { display: flex; flex-direction: column; gap: 20px; }
.ay-kayit-durumu { position: sticky; top: 0; z-index: 5; float: right; height: 0; overflow: visible; font-size: 12px; color: var(--ink-2); }
.ay-kayit-durumu:not(:empty) { transform: translateY(-4px); }
.ay-kayit-durumu[data-durum="kaydedildi"] { color: var(--success); }
.ay-kayit-durumu[data-durum="hata"] { color: var(--danger); }

/* ── SettingsSection ────────────────────────────────────────────────────── */
.ay-bolum, .ay-acilir { border: 1px solid var(--line-strong); border-radius: var(--ay-yaricap); background: var(--surface); overflow: hidden; scroll-margin-top: 16px; }
.ay-bolum-bas { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 14px 16px 12px; border-bottom: 1px solid var(--line); }
.ay-bolum-bas h3 { margin: 0; font-size: 15px; font-weight: 600; color: var(--ink); }
.ay-bolum-bas p { margin: 3px 0 0; font-size: 12.5px; line-height: 1.45; color: var(--ink-2); max-width: 640px; }
.ay-bolum-eylem { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; flex-shrink: 0; }
.ay-bolum-govde { display: flex; flex-direction: column; }
.ay-bolum.ay-vurgu, .ay-acilir.ay-vurgu { animation: ay-vurgu 1.6s ease; }
@keyframes ay-vurgu { 0%, 40% { box-shadow: 0 0 0 3px var(--brand-line); } 100% { box-shadow: 0 0 0 0 transparent; } }
.ay-alt-baslik { margin: 0; padding: 12px 16px 4px; font-size: 12px; font-weight: 500; color: var(--ink-3); border-top: 1px solid var(--line); }
.ay-alt-baslik:first-child { border-top: 0; }

/* Açılır bölüm (Gelişmiş teknik bilgiler / Teknik ayrıntılar) */
.ay-acilir > summary { display: flex; align-items: center; justify-content: space-between; min-height: 48px; padding: 0 16px; cursor: pointer; list-style: none; font-size: 14px; font-weight: 500; color: var(--ink); }
.ay-acilir > summary::-webkit-details-marker { display: none; }
.ay-acilir > summary svg { width: 16px; height: 16px; color: var(--ink-3); transition: transform .18s; }
.ay-acilir[open] > summary { border-bottom: 1px solid var(--line); }
.ay-acilir[open] > summary svg { transform: rotate(180deg); }
.ay-acilir > summary:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; border-radius: var(--ay-yaricap); }
.ay-not { margin: 0; padding: 12px 16px; font-size: 12.5px; line-height: 1.5; color: var(--ink-2); border-top: 1px solid var(--line); }

/* ── SettingsRow: sol etiket, sağda sabit genişlikte kontrol bandı ─────── */
.ay-satir { display: grid; grid-template-columns: minmax(0, 1fr) var(--ay-kontrol-genislik); align-items: center; gap: 16px; min-height: 52px; padding: 8px 16px; border-bottom: 1px solid var(--line); }
.ay-bolum-govde > .ay-satir:last-child, .ay-bolum-govde > :last-child .ay-satir:last-child, #settings-system-status > .ay-satir:last-child { border-bottom: 0; }
.ay-satir-metin { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ay-etiket { font-size: 13.5px; font-weight: 450; color: var(--ink); }
.ay-yardim { font-size: 12px; line-height: 1.4; color: var(--ink-2); }
.ay-satir-kontrol { display: flex; align-items: center; justify-content: flex-end; gap: 8px; min-width: 0; }
.ay-satir-kontrol > .ay-girdi { width: 100%; }
.ay-satir.ay-alt { padding-left: 32px; }
.ay-satir.ay-alt .ay-etiket { color: var(--ink-2); }
.ay-satir.ay-pasif .ay-etiket, .ay-satir.ay-pasif .ay-yardim { color: var(--ink-3); }
.ay-satir.ay-pasif::after { content: attr(data-ay-bagli-metin); }
.ay-metin { font-size: 13.5px; color: var(--ink); text-align: right; overflow-wrap: anywhere; }
.ay-metin-soluk { font-size: 12.5px; color: var(--ink-2); }

/* Salt okunur değer: girdi gibi görünmez */
.ay-deger { width: 100%; height: auto; padding: 0; border: 0; background: transparent; color: var(--ink); font: 450 13.5px/1.4 var(--font); text-align: right; box-shadow: none; outline: 0; cursor: default; }

/* ── Kontroller: tek yükseklik ve kenarlık sistemi ──────────────────────── */
/* Masraf yapılandırma penceresinin (kullanıcı/organizasyon/kategori editörü) girdileri de BU standarda bağlı
   (05.10.2026). Eskiden pencere yalnız `height: 36px` veriyor, dikey dolgu eski `.expense-config-fields select
   { padding: 10px }` kuralından kalıyordu: 36 − 20 − 2 = 14px içerik kutusuna 13.5–16px metin sığmıyor,
   iOS WebKit yerli select metnini ("Seçiniz", "Kullanıcı", "Logosoft") alttan kırpıyordu. */
#view-settings .ay-girdi, .ay-dialog-kart .ay-girdi, .ay-ara .ay-girdi,
#view-settings .expense-config-modal.ay-dialog :is(input:where(:not([type="checkbox"]):not([type="radio"])), select:where(:not([multiple]))) {
  box-sizing: border-box; height: var(--ay-kontrol, 36px); min-height: 0; padding: 0 10px; border: 1px solid var(--line-strong); border-radius: 8px;
  background: var(--surface); color: var(--ink); font: 400 13.5px/1 var(--font); box-shadow: none; transition: border-color .12s, box-shadow .12s;
}
/* Select: yerli görünüm (appearance:auto) macOS'ta kendi yuvarlak kabuğunu çizip 8px köşeyi ve kenarlık
   jetonunu yok sayıyordu (Kullanıcılar > Tüm roller/Tüm durumlar). Masraf filtreleriyle aynı ortak çözüm. */
#view-settings select.ay-girdi, .ay-dialog-kart select.ay-girdi,
#view-settings .expense-config-modal.ay-dialog select:where(:not([multiple])) {
  -webkit-appearance: none; appearance: none; padding-right: 30px; cursor: pointer;
  background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238b919c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 10px center / 14px 14px;
}
[data-theme="dark"] :is(#view-settings, .ay-dialog-kart) select.ay-girdi {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a3a9b4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}
#view-settings .ay-girdi:hover:not(:disabled), .ay-dialog-kart .ay-girdi:hover:not(:disabled) { border-color: var(--ink-3); }
#view-settings .ay-girdi:focus-visible, .ay-dialog-kart .ay-girdi:focus-visible, .ay-ara .ay-girdi:focus-visible { outline: 0; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-line); }
#view-settings .ay-girdi:disabled, .ay-dialog-kart .ay-girdi:disabled { background: var(--inset); color: var(--ink-3); border-color: var(--line); cursor: not-allowed; }
#view-settings .ay-girdi::placeholder, .ay-dialog-kart .ay-girdi::placeholder { color: var(--ink-3); }

/* Switch: kalıcı açık/kapalı ayar */
.ay-switch { appearance: none; -webkit-appearance: none; position: relative; flex: none; width: 34px; height: 20px; margin: 0; border-radius: 999px; background: var(--line-strong); cursor: pointer; transition: background .15s; }
.ay-switch::before { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgb(0 0 0 / .25); transition: transform .15s; }
.ay-switch:checked { background: var(--brand); }
.ay-switch:checked::before { transform: translateX(14px); }
.ay-switch:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.ay-switch:disabled { opacity: .45; cursor: not-allowed; }
[data-theme="dark"] .ay-switch:not(:checked) { background: var(--hover-2); }

/* Segment (tema, dil, filtre) */
/* Segment düğmeleri eşit sütunlu; Hesap ve görünüm'de Tema ve Dil aynı sabit genişlikte, aynı hizada (02.10.2026). */
[data-ayar-sayfa="genel/hesap"] .ay-segment { width: 184px; }
.ay-segment { display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr; max-width: 100%; padding: 2px; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--inset); }
.ay-segment > button { height: 30px; min-width: 0; padding: 0 10px; text-align: center; white-space: nowrap; border: 0; border-radius: 6px; background: transparent; color: var(--ink-2); font: 450 13px/1 var(--font); cursor: pointer; }
.ay-segment > button.active { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgb(0 0 0 / .08); }
.ay-segment > button:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }

/* Düğmeler: birincil / ikincil (outline) / tehlike / ikon */
.ay-dugme { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: var(--ay-kontrol, 36px); padding: 0 12px; border: 1px solid transparent; border-radius: 8px; font: 500 13px/1 var(--font); white-space: nowrap; cursor: pointer; transition: background .12s, border-color .12s, color .12s; }
.ay-dugme svg { width: 15px; height: 15px; }
.ay-dugme:focus-visible, .ay-ikon-dugme:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.ay-dugme:disabled { opacity: .55; cursor: not-allowed; }
.ay-dugme-birincil { background: var(--brand); color: #fff; }
.ay-dugme-birincil:hover:not(:disabled) { background: var(--brand-dark); }
.ay-dugme-ikincil { background: var(--surface); border-color: var(--line-strong); color: var(--ink); }
.ay-dugme-ikincil:hover:not(:disabled) { background: var(--hover); }
.ay-dugme-tehlike { background: var(--danger); color: #fff; }
.ay-dugme-tehlike:hover:not(:disabled) { filter: brightness(.94); }
.ay-bolum-eylem .ay-dugme { height: 32px; padding: 0 10px; }
.ay-ikon-dugme { display: inline-grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 7px; background: transparent; color: var(--ink-2); cursor: pointer; }
.ay-ikon-dugme svg { width: 16px; height: 16px; }
.ay-ikon-dugme:hover { background: var(--hover); color: var(--ink); }
.ay-ikon-dugme.tehlike:hover { background: var(--danger-tint); color: var(--danger); }

/* StatusBadge: tek bileşen, anlamsal ton; renk tek başına anlam taşımaz (metin var) */
.ay-rozet { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 8px; border-radius: 999px; font-size: 12px; font-weight: 500; line-height: 1; white-space: nowrap; }
.ay-rozet::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.ay-rozet[data-ton="ok"] { background: var(--success-tint); color: var(--success); }
.ay-rozet[data-ton="uyari"] { background: var(--warning-tint); color: var(--warning); }
.ay-rozet[data-ton="hata"] { background: var(--danger-tint); color: var(--danger); }
.ay-rozet[data-ton="notr"] { background: var(--inset); color: var(--ink-2); border: 1px solid var(--line); }

/* ── Kota çubuğu ────────────────────────────────────────────────────────── */
.ay-kota { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; width: 100%; }
.ay-kota-cubuk { width: 100%; height: 6px; border-radius: 999px; background: var(--inset); box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; }
.ay-kota-cubuk > span { display: block; height: 100%; border-radius: inherit; background: var(--brand); transition: width .4s ease; }
.ay-kota-cubuk[data-ton="uyari"] > span { background: var(--warning); }
.ay-kota-cubuk[data-ton="hata"] > span { background: var(--danger); }
.ay-kota-yazi { font-size: 12px; color: var(--ink-2); }

/* ── SAP durum kartı ────────────────────────────────────────────────────── */
.ay-durum-kart { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; padding: 14px 16px; flex-wrap: wrap; }
.ay-durum-liste { display: grid; grid-template-columns: repeat(4, minmax(120px, auto)); gap: 12px 28px; margin: 0; }
.ay-durum-liste dt { margin-bottom: 4px; font-size: 12px; color: var(--ink-2); }
.ay-durum-liste dd { margin: 0; font-size: 13.5px; font-weight: 500; color: var(--ink); }
.ay-durum-eylem { display: flex; align-items: center; gap: 12px; }

/* ── Filtre çubuğu, seçim listesi, öncelik ─────────────────────────────── */
.ay-filtre { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.ay-filtre > .ay-girdi { width: auto; min-width: 150px; }
.ay-arama { position: relative; flex: 1 1 220px; max-width: 320px; }
.ay-arama > svg { position: absolute; left: 10px; top: 50%; width: 15px; height: 15px; transform: translateY(-50%); color: var(--ink-3); pointer-events: none; }
.ay-arama > .ay-girdi { width: 100%; }
.ay-secim-listesi { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 0 16px; max-height: 320px; overflow-y: auto; padding: 8px 16px 12px; }
.ay-secim { display: flex; align-items: center; gap: 10px; min-height: 36px; padding: 0 4px; border-radius: 6px; cursor: pointer; font-size: 13.5px; color: var(--ink); }
.ay-secim:hover { background: var(--hover); }
.ay-secim input { width: 16px; height: 16px; margin: 0; accent-color: var(--brand); }
.ay-secim small { margin-left: auto; font-size: 11.5px; color: var(--ink-3); }
.ay-oncelik { padding: 12px 16px; }

/* ── EmptyState / hata ──────────────────────────────────────────────────── */
.ay-bos { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 120px; padding: 20px 16px; text-align: center; }
.ay-bos strong { font-size: 13.5px; font-weight: 500; color: var(--ink); }
.ay-bos span { max-width: 460px; font-size: 12.5px; line-height: 1.45; color: var(--ink-2); }
.ay-bos-satir { display: block; padding: 18px 0; font-size: 13px; color: var(--ink-2); text-align: center; }
.ay-sayfa-govde > .ay-hata { margin: 0; }
.ay-hata { display: flex; align-items: flex-start; gap: 12px; margin: 12px 16px; padding: 12px 14px; border: 1px solid var(--danger-tint); border-radius: 8px; background: var(--danger-tint); }
.ay-hata > svg { flex: none; width: 18px; height: 18px; margin-top: 1px; color: var(--danger); }
.ay-hata > div { flex: 1; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ay-hata strong { font-size: 13.5px; color: var(--ink); }
.ay-hata span { font-size: 12.5px; color: var(--ink-2); }
.ay-hata details { margin-top: 4px; font-size: 12px; color: var(--ink-2); }
.ay-hata code { font-size: 11.5px; overflow-wrap: anywhere; }

/* ── SettingsTableSection: bölüm tek kenarlık taşır, tablo içte kenarlıksız ─ */
#view-settings .ay-tablo-kap { min-width: 0; overflow-x: auto; }
#view-settings .expense-config-table-wrap { margin: 0; border: 0; border-radius: 0; box-shadow: none; background: transparent; overflow: visible; max-height: none; }
#view-settings .expense-list-footer { padding: 10px 16px; border-top: 1px solid var(--line); }
#view-settings .expense-config-table { width: 100%; border-collapse: collapse; font-size: 13px; }
#view-settings .expense-config-table thead th { height: 36px; padding: 0 12px; background: var(--inset); border-bottom: 1px solid var(--line); color: var(--ink-2); font-size: 12px; font-weight: 500; text-align: left; text-transform: none; letter-spacing: 0; white-space: nowrap; }
#view-settings .expense-config-table thead th:first-child, #view-settings .expense-config-table td:first-child { padding-left: 16px; }
#view-settings .expense-config-table td { height: 44px; padding: 6px 12px; border-bottom: 1px solid var(--line); color: var(--ink); vertical-align: middle; }
#view-settings .expense-config-table tbody tr:last-child td { border-bottom: 0; }
#view-settings .expense-config-table tbody tr:hover td { background: var(--hover); }
#view-settings .expense-config-table td strong { font-weight: 500; }
#view-settings .expense-config-table td:last-child, #view-settings .expense-config-table th:last-child { width: 1%; padding-right: 12px; text-align: right; white-space: nowrap; }
#view-settings .expense-config-table .expense-config-empty { height: auto; padding: 0; background: transparent !important; }
#view-settings .expense-config-actions { display: inline-flex; gap: 2px; }
#view-settings .expense-config-actions > button:not(.ay-ikon-dugme) { height: 28px; padding: 0 8px; border: 0; border-radius: 6px; background: transparent; color: var(--ink-2); font: 500 12.5px/1 var(--font); cursor: pointer; }
#view-settings .expense-config-actions > button:not(.ay-ikon-dugme):hover { background: var(--hover); color: var(--ink); }
/* Tablo bölümü içindeki eski ek kutular (ödeme varsayılanı, kurulum özeti vb.) */
#view-settings #expense-payment-defaults { padding: 12px 16px; border-bottom: 1px solid var(--line); }
#view-settings #expense-payment-defaults .field { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 0; }
#view-settings #expense-payment-defaults label { font-size: 13.5px; color: var(--ink); font-weight: 450; }
#view-settings #expense-payment-defaults select { width: var(--ay-kontrol-genislik); height: var(--ay-kontrol); border: 1px solid var(--line-strong); border-radius: 8px; background: var(--surface); color: var(--ink); padding: 0 10px; }

/* ── Dialog (shadcn Dialog/AlertDialog karşılığı) ───────────────────────── */
.ay-dialog-arka { position: fixed; inset: 0; z-index: var(--layer-modal, 9100); display: grid; place-items: center; padding: 16px; background: rgb(15 23 42 / .42); animation: ay-soluk .15s ease; }
.ay-dialog-kart { display: flex; flex-direction: column; width: min(520px, 100%); max-height: calc(100dvh - 32px); border: 1px solid var(--line-strong); border-radius: 12px; background: var(--surface); color: var(--ink); box-shadow: var(--shadow-overlay, 0 24px 60px rgb(0 0 0 / .2)); animation: ay-yuksel .16s ease; }
.ay-dialog-kart.ay-onay { width: min(420px, 100%); }
.ay-dialog-bas { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 18px 20px 6px; }
.ay-dialog-bas h3 { margin: 0; font-size: 16px; font-weight: 600; }
.ay-dialog-bas p { margin: 6px 0 0; font-size: 13px; line-height: 1.5; color: var(--ink-2); }
.ay-dialog-govde { display: flex; flex-direction: column; gap: 14px; padding: 12px 20px 4px; overflow-y: auto; }
.ay-dialog-alt { display: flex; justify-content: flex-end; gap: 8px; padding: 16px 20px 18px; }
.ay-form-alan { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; border: 0; min-width: 0; }
.ay-form-alan > label, .ay-form-alan > legend { padding: 0; font-size: 13px; font-weight: 500; color: var(--ink); }
.ay-form-alan > .ay-girdi { width: 100%; }
.ay-form-alan[hidden] { display: none; }
.ay-secenekler { gap: 8px; }
.ay-secenek { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border: 1px solid var(--line-strong); border-radius: 8px; cursor: pointer; }
.ay-secenek:has(input:checked) { border-color: var(--brand); background: var(--brand-tint); }
.ay-secenek input { margin: 2px 0 0; accent-color: var(--brand); }
.ay-secenek span { display: flex; flex-direction: column; gap: 2px; }
.ay-secenek strong { font-size: 13.5px; font-weight: 500; }
.ay-secenek small { font-size: 12px; color: var(--ink-2); }
.ay-form-durum { min-height: 18px; font-size: 12.5px; color: var(--ink-2); }
.ay-form-durum.hata { color: var(--danger); }
@keyframes ay-soluk { from { opacity: 0; } }
@keyframes ay-yuksel { from { opacity: 0; transform: translateY(6px) scale(.98); } }

/* Masraf yapılandırma penceresi aynı diyalog dilini kullanır */
#view-settings .expense-config-modal.ay-dialog { background: rgb(15 23 42 / .42); }
#view-settings .expense-config-modal.ay-dialog .expense-config-dialog { border: 1px solid var(--line-strong); border-radius: 12px; background: var(--surface); color: var(--ink); box-shadow: var(--shadow-overlay, 0 24px 60px rgb(0 0 0 / .2)); }
#view-settings .expense-config-modal.ay-dialog .expense-config-dialog-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px 10px; border-bottom: 1px solid var(--line); background: transparent; }
#view-settings .expense-config-modal.ay-dialog .expense-config-dialog-head h3 { font-size: 16px; font-weight: 600; }
#view-settings .expense-config-modal.ay-dialog .expense-config-dialog-actions { display: flex; justify-content: flex-end; gap: 8px; padding: 14px 20px 16px; border-top: 1px solid var(--line); background: transparent; }
#view-settings .expense-config-modal.ay-dialog .expense-config-dialog-actions > button { height: 36px; }
#view-settings .expense-config-modal.ay-dialog select[multiple] { height: auto; }

/* ── DropdownMenu ───────────────────────────────────────────────────────── */
.ay-menu-kutu { position: fixed; z-index: calc(var(--layer-modal, 9100) + 5); min-width: 200px; padding: 4px; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--surface); box-shadow: var(--shadow-overlay, 0 12px 32px rgb(0 0 0 / .14)); animation: ay-soluk .1s ease; }
.ay-menu-satir { display: flex; align-items: center; gap: 8px; width: 100%; height: 32px; padding: 0 8px; border: 0; border-radius: 6px; background: transparent; color: var(--ink); font: 400 13px/1 var(--font); text-align: left; cursor: pointer; }
.ay-menu-satir svg { width: 15px; height: 15px; color: var(--ink-2); }
.ay-menu-satir:hover, .ay-menu-satir:focus-visible { background: var(--hover); outline: 0; }
.ay-menu-satir.tehlike, .ay-menu-satir.tehlike svg { color: var(--danger); }
.ay-menu-satir.tehlike:hover, .ay-menu-satir.tehlike:focus-visible { background: var(--danger-tint); }
.ay-menu-ayrac { height: 1px; margin: 4px -4px; background: var(--line); }

/* ── Toast ──────────────────────────────────────────────────────────────── */
.ay-bildirimler { position: fixed; right: 16px; bottom: 16px; z-index: calc(var(--layer-modal, 9100) + 10); display: flex; flex-direction: column; gap: 8px; max-width: min(380px, calc(100vw - 32px)); pointer-events: none; }
.ay-bildirim { padding: 10px 14px; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--surface); color: var(--ink); box-shadow: var(--shadow-overlay, 0 12px 32px rgb(0 0 0 / .14)); font-size: 13px; line-height: 1.45; pointer-events: auto; animation: ay-yuksel .16s ease; }
.ay-bildirim[data-tur="hata"] { border-color: var(--danger); }
.ay-bildirim.gidiyor { opacity: 0; transform: translateY(4px); transition: opacity .2s, transform .2s; }

/* ── Dar ekran ──────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .ay-kabuk { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  .ay-nav { flex-direction: row; flex-wrap: wrap; align-items: center; padding: 10px 16px; border-right: 0; border-bottom: 1px solid var(--line); overflow: visible; }
  .ay-nav > .ay-ara { flex: 1 1 200px; }
  .ay-menu { display: none; }
  .ay-mobil-secim { display: block; flex: 1 1 200px; width: auto !important; }
  .ay-icerik { padding: 16px 16px 40px; }
  .ay-durum-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .ay-satir { grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 10px 14px; }
  .ay-satir-kontrol { justify-content: flex-start; }
  .ay-satir:has(> .ay-satir-kontrol > .ay-switch) { grid-template-columns: minmax(0, 1fr) auto; }
  .ay-satir:has(> .ay-satir-kontrol > .ay-switch) .ay-satir-kontrol { justify-content: flex-end; }
  .ay-deger, .ay-metin { text-align: left; }
  .ay-kota { align-items: flex-start; }
  .ay-bolum-bas { flex-direction: column; }
  .ay-bolum-eylem { justify-content: flex-start; }
  .ay-filtre > .ay-girdi, .ay-arama { flex: 1 1 100%; max-width: none; }
  #view-settings .ay-girdi,
  #view-settings .expense-config-modal.ay-dialog :is(input:where(:not([type="checkbox"]):not([type="radio"])), select:where(:not([multiple]))) { font-size: 16px; } /* iOS yakınlaştırmasın */
  .ay-dialog-alt { flex-direction: column-reverse; }
  .ay-dialog-alt .ay-dugme { width: 100%; }
}
/* Eski .expense-config-actions button kenarlığı ikon düğmelerine binmesin */
#view-settings .expense-config-actions .ay-ikon-dugme { width: 30px; height: 30px; min-height: 0; padding: 0; border: 0; background: transparent; box-shadow: none; color: var(--ink-2); }
#view-settings .expense-config-actions .ay-ikon-dugme:hover { background: var(--hover); color: var(--ink); }
#view-settings .expense-config-actions .ay-ikon-dugme.tehlike:hover { background: var(--danger-tint); color: var(--danger); }