/* azatech – Finans ekranları düzeni: Muhasebe aktarımı (.mh-*) ve Pazarlama harcamaları (.hh-*) için ortak, simetrik yerleşim.
 * Tek aralık ölçeği (4 / 8 / 12 / 16 / 20): bloklar arası 16, kutu iç boşluğu 20, alanlar arası 16 (satır ve sütun AYNI), etiket-giriş arası 6.
 * Tüm giriş alanları, seçimler ve düğmeler aynı yükseklikte (40) ve aynı ızgara sütununda hizalanır. Renk TANIMLAMAZ: yalnız tema değişkenleri.
 * Kutu / istatistik kartı / tablo kutusu kutu.css ve app.css'teki standart sınıflardır (.kutu, .stat-grid, .stat, .tbl-x, .tk). */

.fe-sayfa {
  --fe-1: 4px; --fe-2: 8px; --fe-3: 12px; --fe-4: 16px; --fe-5: 20px; --fe-h: 40px;
  display: flex; flex-direction: column; gap: var(--fe-4);
}
/* bloklar arası boşluğu yalnız "gap" verir: eski kardeş-kutu kenar boşlukları sıfırlanır */
.tk-app.fe-sayfa > .hd-baslik, .tk-app.fe-sayfa > .kutu, .tk-app.fe-sayfa > .stat-grid, .tk-app.fe-sayfa > .fe-sonuc { margin: 0; }
.fe-sonuc { display: flex; flex-direction: column; gap: var(--fe-4); min-width: 0; }
.fe-sonuc > .stat-grid, .fe-sonuc > .kutu { margin: 0; }
.fe-sonuc > .loading { margin: 0; }

/* ---- kutu: her yanda eşit 20 px ---- */
.fe-kutu { padding: var(--fe-5); }
.fe-kutu-bas { display: flex; align-items: baseline; justify-content: space-between; gap: var(--fe-2) var(--fe-4); flex-wrap: wrap; margin: 0 0 var(--fe-4); }
.fe-kutu-bas h3 { margin: 0; font-size: var(--yz-lg, 16px); font-weight: 650; line-height: 1.3; color: var(--ink); }
.fe-kutu-bas small { font-size: var(--yz-xs, 12px); color: var(--mut); }

/* ---- form ızgarası: sütun sayısı --fe-sut ile; satır ve sütun boşluğu eşit ---- */
.fe-izgara { display: grid; grid-template-columns: repeat(var(--fe-sut, 4), minmax(0, 1fr)); gap: var(--fe-4); align-items: end; margin: 0; }
.fe-izgara > .fe-tam { grid-column: 1 / -1; }
.fe-izgara > .fe-iki { grid-column: span 2; }
.fe-izgara > .fe-uc { grid-column: span 3; }   /* uzun alan + yanında düğme: 3 + 1 = 4 sütun */

/* ---- alan: etiket üstte, giriş altta; tüm girişler aynı yükseklik ---- */
.fe-f { display: block; min-width: 0; margin: 0; font-size: var(--yz-xs, 12px); font-weight: 600; line-height: 16px; color: var(--mut); }   /* blok: ortak.js yildiz() zorunlu * işaretini etiket metninin yanına satır içi ekler */
.fe-f :is(input, select) {
  display: block; width: 100%; height: var(--fe-h); min-height: var(--fe-h); margin: 6px 0 0; padding: 0 12px; box-sizing: border-box;
  font: inherit; font-size: 14px; font-weight: 400; color: var(--ink); background-color: var(--panel);
  border: 1px solid var(--line); border-radius: var(--r-md, 8px);
}
.fe-f input::placeholder { color: var(--mut); opacity: .7; }
.fe-f select { appearance: none; -webkit-appearance: none; padding-inline-end: 34px; text-overflow: ellipsis;
  background-image: linear-gradient(45deg, transparent 50%, var(--mut) 50%), linear-gradient(135deg, var(--mut) 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; }
[dir="rtl"] .fe-f select { background-position: 18px 50%, 13px 50%; }
.fe-f :is(input, select):focus-visible { outline: 0; border-color: var(--navy); box-shadow: 0 0 0 3px color-mix(in srgb, var(--navy) 18%, transparent); }

/* ---- düğme: giriş alanıyla aynı yükseklik ve sütun hizası ---- */
.fe-dugme { display: flex; align-items: flex-end; min-width: 0; }
.fe-dugme > button { width: 100%; height: var(--fe-h); min-height: var(--fe-h); margin: 0; padding: 0 var(--fe-4); justify-content: center; white-space: nowrap; }

/* ---- açılır kutu (Hesap kodları): özet satırı + eşit sütunlu içerik ---- */
.fe-ac { padding: 0; }
.fe-ac > summary { display: flex; align-items: center; justify-content: space-between; gap: var(--fe-3); padding: var(--fe-4) var(--fe-5); cursor: pointer; list-style: none; font-size: var(--yz-lg, 16px); font-weight: 650; color: var(--ink); border-radius: inherit; }
.fe-ac > summary::-webkit-details-marker { display: none; }
.fe-ac > summary::after { content: ""; width: 7px; height: 7px; border-inline-end: 2px solid var(--mut); border-bottom: 2px solid var(--mut); transform: rotate(45deg); margin-inline-end: 4px; transition: transform .15s; flex: none; }
.fe-ac[open] > summary::after { transform: rotate(-135deg); }
.fe-ac > summary:focus-visible { outline: 2px solid var(--navy); outline-offset: -2px; }
.fe-ac > form { padding: var(--fe-5); border-top: 1px solid var(--line); }

/* ---- tablo kutusu: kenarlıksız tablo + alt şerit (not solda, eylem sağda) ---- */
.fe-tablo { padding: 0; overflow: clip; }   /* clip: köşeleri keser ama kaydırma kabı olmaz; sabit tablo başlığı (sticky) bozulmaz */
.fe-tablo > .tbl-x { border: 0; border-radius: 0; background: transparent; margin: 0; }
.fe-tablo .tk { width: 100%; }
.fe-tablo .tk :is(th, td) { padding: 10px var(--fe-3); }
.fe-tablo .tk :is(th, td):first-child { padding-inline-start: var(--fe-5); }
.fe-tablo .tk :is(th, td):last-child { padding-inline-end: var(--fe-5); }
.fe-tablo .tk td { vertical-align: middle; }
.fe-tablo .tk th.n, .fe-tablo .tk td.n { text-align: end; font-variant-numeric: tabular-nums; white-space: nowrap; }
.fe-alt { display: flex; align-items: center; justify-content: space-between; gap: var(--fe-3) var(--fe-4); flex-wrap: wrap; padding: var(--fe-3) var(--fe-5); border-top: 1px solid var(--line); }
.fe-alt .help { margin: 0; }
.fe-alt > button { margin-inline-start: auto; height: 36px; padding: 0 var(--fe-4); }
.fe-bos { margin: 0; padding: 28px var(--fe-5); text-align: center; color: var(--mut); font-size: 14px; }

/* ---- Muhasebe aktarımı: önizleme tablosu; açıklama sütunu sarar, diğerleri tek satır ---- */
.mh-tablo .tk td { white-space: nowrap; }
.mh-tablo .tk td.mh-acik { white-space: normal; min-width: 220px; }

/* ---- Pazarlama harcamaları: kayıt tablosu; not sütunu esner, sil eylemi sağda ---- */
.hh-tablo .tk td.hh-not { white-space: normal; overflow-wrap: anywhere; min-width: 160px; }
.hh-tablo .tk td.acts { text-align: end; white-space: nowrap; width: 1%; }
.hh-sil { padding: 6px 10px; border: 0; background: transparent; font: inherit; font-size: 13px; font-weight: 600; color: var(--red); border-radius: var(--r-sm, 6px); cursor: pointer; text-decoration: none; }
#main .hh-tablo table.mt-kart td.acts { justify-content: flex-end; }   /* telefonda kart içinde Sil sağda */
.hh-sil:hover { background: color-mix(in srgb, var(--red) 10%, transparent); }
.hh-sil:focus-visible { outline: 2px solid var(--red); outline-offset: 1px; }

/* ---- duyarlı: 1100 → 2 sütun; 560 → telefon (uzun alanlar tam satır) ---- */
@media (max-width: 1100px) {
  .fe-izgara { --fe-sut: 2; }
  .fe-izgara > .fe-iki, .fe-izgara > .fe-uc, .fe-izgara > .fe-uc-yan { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .fe-sayfa { gap: var(--fe-3); }
  .fe-sonuc { gap: var(--fe-3); }
  .fe-kutu { padding: var(--fe-4); }
  .fe-ac > summary { padding: var(--fe-3) var(--fe-4); }
  .fe-ac > form { padding: var(--fe-4); }
  .fe-izgara { gap: var(--fe-3); }
  .fe-izgara > .fe-mob-tam { grid-column: 1 / -1; }
  .fe-alt { padding: var(--fe-3) var(--fe-4); }
  .fe-alt > button { width: 100%; margin-inline-start: 0; }
  .fe-tablo { background: transparent; border: 0; box-shadow: none; }
  .fe-tablo .tk :is(th, td):first-child, .fe-tablo .tk :is(th, td):last-child { padding-inline: var(--fe-3); }
}