/* Ödemeler ve Prim › Ödenecekler (PLAN-odemeler-prim-sade.md §1, §4, §5; Sercan 2026-11-04). Yalnız app.css değişkenleri; yeni renk ve yazı tipi yok.
   Renk sözlüğü: bekliyor/bekleniyor gri · gecikti kırmızı (--satildi) · hazır mavi (--onay) · geldi/ödendi yeşil (--musait). 1280'de satır tek sıra dört kutu,
   telefonda (≤ 640 px) kutular alt alta. :hover yalnız @media (hover: hover) içinde. */

/* durum rozeti */
.od-d { display: inline-flex; align-items: center; gap: 4px; border-radius: 99px; padding: 3px 10px; font-size: 0.84rem; font-weight: 600; white-space: nowrap; background: #f1f3f2; color: var(--gri); }
.od-d.ok { background: color-mix(in srgb, var(--musait) 12%, #fff); color: var(--musait-yazi); }
.od-d.gec { background: color-mix(in srgb, var(--satildi) 12%, #fff); color: var(--satildi); }
.od-d.hazir { background: color-mix(in srgb, var(--onay) 12%, #fff); color: var(--onay); }
.od-bos { color: var(--gri); }

/* üst şerit: 4 (ya da 3) rakam */
.od-serit { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 0 0 14px; }
.od-serit.od-n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.od-ozet { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-height: 76px; padding: 12px 14px; background: #fff; border: 1px solid var(--cizgi); border-left: 4px solid var(--yok); border-radius: var(--r); font: inherit; text-align: left; color: var(--murekkep); cursor: pointer; min-width: 0; }
.od-ozet small { font-size: 0.8rem; color: var(--gri); font-weight: 600; }
.od-ozet b { font-size: 1.3rem; line-height: 1.2; font-variant-numeric: tabular-nums; }
.od-ozet span { font-size: 0.86rem; color: var(--gri); }
.od-ozet.kirmizi { border-left-color: var(--satildi); }
.od-ozet.kirmizi b { color: var(--satildi); }
.od-ozet.mavi { border-left-color: var(--onay); }
.od-ozet.secili { outline: 2px solid var(--altin); outline-offset: 1px; }
.od-ozet:focus-visible, .od-ac:focus-visible { outline: 2px solid var(--altin); outline-offset: 2px; }

/* araç satırı */
.od-eylem { display: inline-flex; align-items: center; gap: 8px; }
.od-suz { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 16px; }
.od-secim .secenek { min-height: 44px; }
.od-menu { position: relative; }
.od-menu > summary { list-style: none; cursor: pointer; min-width: 44px; min-height: 44px; font-size: 1.2rem; }
.od-menu > summary::-webkit-details-marker { display: none; }
.od-menu-liste { position: absolute; right: 0; top: calc(100% + 6px); z-index: var(--z-menu); display: flex; flex-direction: column; gap: 6px; min-width: 220px; padding: 10px; background: #fff; border: 1px solid var(--cizgi); border-radius: var(--r); box-shadow: var(--golge-buyuk); }
.od-menu-liste .dugme { justify-content: flex-start; width: 100%; }

/* satır: dört kutu */
.od-liste { display: flex; flex-direction: column; gap: 10px; }
.od-satir { background: #fff; border: 1px solid var(--cizgi); border-left: 4px solid var(--yok); border-radius: var(--r); min-width: 0; }
.od-satir.gec { border-left-color: var(--satildi); }
.od-satir.tamam { border-left-color: var(--musait); }
.od-satir.acik { box-shadow: var(--golge); }
.od-kutular { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: start; }
.od-kutular.od-n3 { grid-template-columns: 1.2fr 1.6fr 1fr; }
.od-kutular.od-n2 { grid-template-columns: 1fr 2fr; }
.od-kutular.od-n4 { grid-template-columns: 1.2fr 1.6fr 1fr 1fr; }
.od-kutular.od-ilet { grid-template-columns: 1.2fr 1.6fr 1fr auto; }
.od-kutu { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 12px 14px; min-width: 0; }
.od-kutu + .od-kutu { border-left: 1px solid var(--cizgi); }
.od-kutu-ad { font-size: 0.72rem; font-weight: 700; color: var(--gri); text-transform: uppercase; letter-spacing: 0.04em; }
.od-kutu > small:not(.od-kutu-ad) { font-size: 0.82rem; color: var(--gri); }
.od-ac { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-height: 44px; padding: 0; border: 0; background: none; font: inherit; color: var(--murekkep); text-align: left; cursor: pointer; }
.od-ac b { font-size: 1rem; }
.od-ac span { font-size: 0.86rem; color: var(--gri); }
.od-ac::after { content: "▸ ayrıntı"; font-size: 0.78rem; color: var(--gri); }
.od-ac[aria-expanded="true"]::after { content: "▾ kapat"; }
.od-cipler, .od-paylar { display: flex; flex-wrap: wrap; gap: 6px; }
.od-pay { font-size: 0.9rem; }
.od-tutar { font-size: 1rem; font-variant-numeric: tabular-nums; }
.od-iletisim { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; border-left: 1px solid var(--cizgi); }
@media (hover: hover) { .od-ac:hover b { text-decoration: underline; } .od-ozet:hover { background: var(--kagit); } }

/* açık satır */
.od-ayrinti { border-top: 1px solid var(--cizgi); padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 10px; }
.od-kalemler { display: flex; flex-direction: column; gap: 6px; }
.od-kalem { display: grid; grid-template-columns: minmax(120px, 1fr) 120px 130px auto auto; align-items: center; gap: 8px 12px; padding: 8px 10px; border: 1px solid var(--cizgi); border-radius: var(--r-kucuk); background: var(--kagit); }
.od-kalem.gec { border-color: color-mix(in srgb, var(--satildi) 45%, transparent); }
.od-liste > .od-kalem { grid-template-columns: minmax(160px, 1.4fr) minmax(100px, 1fr) 110px 120px auto auto; background: #fff; }
.od-k-kim { display: flex; flex-direction: column; min-width: 0; }
.od-k-kim small, .od-k-vade small { display: block; font-size: 0.78rem; color: var(--gri); }
.od-k-ad { font-weight: 600; }
.od-k-tl { font-variant-numeric: tabular-nums; }
.od-k-eylem { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.od-form { margin: 0 0 4px; }
.od-taksit > summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; font-weight: 600; color: var(--yesil-koyu); }
.od-taksit[open] > summary { margin-bottom: 6px; }
.od-taksit .od-kalem + .od-kalem { margin-top: 6px; }
.od-alt { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }

/* Prim › Ödenecekler */
.po-uc { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0 0 14px; }
.po-uc > div { padding: 12px 14px; background: #fff; border: 1px solid var(--cizgi); border-left: 4px solid var(--altin); border-radius: var(--r); }
.po-uc small { display: block; font-size: 0.8rem; color: var(--gri); font-weight: 600; }
.po-uc b { font-size: 1.3rem; font-variant-numeric: tabular-nums; }
.po-serit { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 12px; }
.po-tablo td, .po-tablo th { vertical-align: top; }
.po-kisi { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-height: 44px; padding: 0; border: 0; background: none; font: inherit; color: var(--murekkep); text-align: left; cursor: pointer; font-weight: 700; }
.po-kisi::after { content: "▸ satışlar"; font-size: 0.76rem; font-weight: 500; color: var(--gri); }
.po-kisi[aria-expanded="true"]::after { content: "▾ kapat"; }
.po-ayri small { display: block; color: var(--gri); font-size: 0.8rem; white-space: nowrap; }
.po-satislar { display: flex; flex-direction: column; gap: 8px; padding: 6px 0; }
.po-satis { display: grid; grid-template-columns: minmax(160px, 1.4fr) 120px auto auto; align-items: center; gap: 8px 12px; padding: 8px 10px; border: 1px solid var(--cizgi); border-radius: var(--r-kucuk); background: var(--kagit); }
.po-satis small { display: block; color: var(--gri); font-size: 0.8rem; }
.po-satis details { grid-column: 1 / -1; }
.po-satis summary { cursor: pointer; font-size: 0.86rem; color: var(--yesil-koyu); min-height: 32px; display: flex; align-items: center; }

@media (max-width: 1100px) {
  .od-kutular, .od-kutular.od-n4, .od-kutular.od-ilet { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .od-kutu:nth-child(odd) { border-left: 0; }
  .od-kutu:nth-child(n + 3) { border-top: 1px solid var(--cizgi); }
  .od-iletisim { flex-direction: row; border-left: 0; border-top: 1px solid var(--cizgi); grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .od-serit, .od-serit.od-n3 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .od-ozet { min-height: 64px; padding: 10px 12px; }
  .od-ozet b { font-size: 1.1rem; }
  .od-kutular, .od-kutular.od-n2, .od-kutular.od-n3, .od-kutular.od-n4, .od-kutular.od-ilet { grid-template-columns: 1fr; }
  .od-kutu + .od-kutu, .od-kutu:nth-child(n + 3) { border-left: 0; border-top: 1px solid var(--cizgi); }
  .od-iletisim .dugme { flex: 1 1 0; }
  .od-kalem, .od-liste > .od-kalem, .po-satis { grid-template-columns: 1fr auto; }
  .od-k-eylem, .od-k-kim { grid-column: 1 / -1; }
  .od-k-eylem { justify-content: stretch; }
  .od-k-eylem .dugme { flex: 1 1 0; }
  .od-eylem { width: 100%; justify-content: space-between; }
  .po-uc { grid-template-columns: 1fr; }
}
@media print { .od-serit, .od-arac, .od-menu { display: none; } }