/* Temel bileşenler — nizam/tasarim.md §5.
   Önekler: dgm- (düğme), krt- (kart), lst- (liste), bos- (boş durum),
   acp- (açılır panel), rzt- (rozet), bol- (bölüm başlığı), srm- (sürüm etiketi). */

/* ── Düğme ─────────────────────────────────────────────────── */
.dgm {
  min-height: var(--dugme-y);
  padding: 0 var(--b4);
  border-radius: var(--kose-k);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--b2);
  font-size: var(--govde);
  line-height: var(--govde-satir);
  font-weight: 600;
  transition: transform var(--sure-kisa) var(--egri);
}
.dgm:active:not(:disabled) { transform: scale(var(--kucul-orta)); }
.dgm:disabled { opacity: .45; pointer-events: none; }

.dgm-birincil { background: var(--vurgu); color: var(--yazi-ters); }
.dgm-ikincil { background: var(--yuzey); color: var(--yazi); border: 1px solid var(--cizgi-guclu); }
.dgm-sade { color: var(--vurgu); }
.dgm-tehlike { background: var(--yuzey); color: var(--hata); border: 1px solid var(--hata); }
.dgm-tam { width: 100%; }
.dgm-tam:active:not(:disabled) { transform: scale(var(--kucul-buyuk)); }

/* ── Kart ──────────────────────────────────────────────────── */
.krt {
  background: var(--yuzey);
  border: 1px solid var(--cizgi);
  border-radius: var(--kose-o);
  box-shadow: var(--golge-1);
}
.krt + .krt, .bol + .krt { margin-top: var(--b3); }
.krt + .bol { margin-top: var(--b5); }

/* ── Bölüm başlığı ─────────────────────────────────────────── */
.bol {
  margin: 0 0 var(--b2);
  font-size: var(--baslik-3);
  line-height: var(--baslik-3-satir);
  font-weight: 600;
}

/* ── Liste ─────────────────────────────────────────────────── */
.lst { list-style: none; margin: 0; padding: 0; }
.lst > li + li { border-top: 1px solid var(--cizgi); }
.lst-satir {
  display: flex;
  align-items: center;
  gap: var(--b3);
  min-height: 56px;
  padding: var(--b2) var(--b4);
  width: 100%;
  text-align: left;
  transition: transform var(--sure-kisa) var(--egri);
}
a.lst-satir:active, button.lst-satir:active:not(:disabled) { transform: scale(var(--kucul-satir)); }
.lst-simge {
  width: 40px;
  height: 40px;
  border-radius: var(--kose-k);
  background: var(--yuzey-2);
  color: var(--yazi-2);
  display: grid;
  place-items: center;
  flex: none;
}
.lst-metin { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.lst-ad { font-size: var(--govde); line-height: var(--govde-satir); }
.lst-alt { font-size: var(--kucuk); line-height: var(--kucuk-satir); color: var(--yazi-2); }
.lst-ok { color: var(--yazi-3); flex: none; }

/* ── Boş durum ─────────────────────────────────────────────── */
.bos {
  padding: var(--b7) var(--b5);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.bos-simge { color: var(--yazi-3); }
.bos-baslik {
  margin: var(--b4) 0 0;
  font-size: var(--baslik-3);
  line-height: var(--baslik-3-satir);
  font-weight: 600;
}
.bos-metin {
  margin: var(--b2) 0 0;
  max-width: 420px;
  color: var(--yazi-2);
}
.bos .dgm { margin-top: var(--b5); }

/* ── Rozet ─────────────────────────────────────────────────── */
.rzt {
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: var(--kose-hap);
  background: var(--vurgu);
  color: var(--yazi-ters);
  font-size: var(--etiket);
  line-height: 18px;
  font-weight: 500;
  text-align: center;
}

/* ── Açılır panel (profil paneli) ──────────────────────────── */
.acp {
  position: absolute;
  top: calc(100% + var(--b1));
  right: var(--b2);
  width: 280px;
  max-width: calc(100vw - var(--b5));
  background: var(--yuzey);
  border: 1px solid var(--cizgi);
  border-radius: var(--kose-o);
  box-shadow: var(--golge-2);
  overflow: hidden;
  z-index: 30;
  animation: acp-gel var(--sure-orta) var(--egri) both;
}
@keyframes acp-gel { from { opacity: 0; } to { opacity: 1; } }
.acp-bas {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--b2);
  min-height: 48px;
  padding: 0 var(--b2) 0 var(--b4);
  border-bottom: 1px solid var(--cizgi);
}
.acp-baslik {
  display: flex;
  align-items: center;
  gap: var(--b2);
  font-weight: 600;
}
.acp-arac {
  display: flex;
  justify-content: flex-end;
  padding: 0 var(--b2);
  border-bottom: 1px solid var(--cizgi);
}
.acp-arac .dgm { min-height: var(--dokunma); padding: 0 var(--b2); font-size: var(--kucuk); white-space: nowrap; }
.acp-bos {
  padding: var(--b5) var(--b4);
  color: var(--yazi-2);
  font-size: var(--kucuk);
  line-height: var(--kucuk-satir);
  text-align: center;
}

/* ── Sürüm etiketi ─────────────────────────────────────────── */
.srm {
  margin: var(--b3) 0 0;
  text-align: center;
  font-size: var(--kucuk);
  line-height: var(--kucuk-satir);
  color: var(--yazi-3);
}

/* ── Form ── frm- ──────────────────────────────────────────── */
.frm-alan { display: flex; flex-direction: column; gap: var(--b1); min-width: 0; }
.frm-etiket {
  font-size: var(--kucuk);
  line-height: var(--kucuk-satir);
  font-weight: 500;
  color: var(--yazi-2);
}
.frm-girdi {
  width: 100%;
  min-height: var(--alan-y);
  padding: 0 var(--b3);
  background: var(--yuzey);
  border: 1px solid var(--cizgi-guclu);
  border-radius: var(--kose-k);
  color: var(--yazi);
  font: inherit;
  font-size: max(16px, var(--govde)); /* iOS kendiliğinden yakınlaştırmasın */
  -webkit-appearance: none;
  appearance: none;
}
.frm-girdi:focus { border-color: var(--odak); box-shadow: 0 0 0 1px var(--odak); }
select.frm-girdi {
  padding-right: var(--b6);
  background-image: linear-gradient(45deg, transparent 50%, var(--yazi-2) 50%), linear-gradient(135deg, var(--yazi-2) 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
  background-size: 5px 5px;
  background-repeat: no-repeat;
}
.frm-ipucu { font-size: var(--kucuk); line-height: var(--kucuk-satir); color: var(--yazi-3); }
.frm-hata { font-size: var(--kucuk); line-height: var(--kucuk-satir); color: var(--hata); }
.frm-alan-hatali .frm-girdi { border-color: var(--hata); }

/* ── Seçim çipleri ── cip- ─────────────────────────────────── */
.cip-grup { display: flex; flex-wrap: wrap; gap: var(--b1); }
.cip {
  min-height: var(--dokunma);
  display: inline-flex;
  align-items: center;
  transition: transform var(--sure-kisa) var(--egri);
}
.cip:active { transform: scale(var(--kucul-orta)); }
.cip-yuz {
  height: 36px;
  padding: 0 var(--b3);
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--cizgi-guclu);
  border-radius: var(--kose-hap);
  background: var(--yuzey);
  color: var(--yazi-2);
  font-size: var(--kucuk);
  font-weight: 500;
}
.cip[aria-pressed="true"] .cip-yuz {
  background: var(--vurgu-zemin);
  border-color: var(--vurgu-zemin);
  color: var(--vurgu);
}

/* ── Tablo ── tbl- ─────────────────────────────────────────── */
.tbl { width: 100%; border-collapse: collapse; }
.tbl th {
  background: var(--yuzey-2);
  color: var(--yazi-2);
  font-size: var(--kucuk);
  line-height: var(--kucuk-satir);
  font-weight: 500;
  text-align: left;
  padding: var(--b2) var(--b3);
  border-bottom: 1px solid var(--cizgi);
  white-space: nowrap;
}
.tbl th:first-child { border-top-left-radius: var(--kose-o); }
.tbl th:last-child { border-top-right-radius: var(--kose-o); }
.tbl td {
  padding: var(--b3);
  border-bottom: 1px solid var(--cizgi);
  vertical-align: top;
}
.tbl tr:last-child td { border-bottom: 0; }
.tbl-sag { text-align: right !important; white-space: nowrap; }
.tbl-satir { cursor: pointer; }
.tbl-alt { display: block; font-size: var(--kucuk); line-height: var(--kucuk-satir); color: var(--yazi-3); }

/* ── Tutar rengi ── ttr- ───────────────────────────────────── */
.ttr { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.ttr-giris { color: var(--olumlu); }
.ttr-eksi { color: var(--hata); }

/* ── Alttan kart (kısa mesaj) ── tst- ──────────────────────── */
.tst {
  position: fixed;
  left: var(--b4);
  right: var(--b4);
  bottom: calc(var(--altcubuk-y) + var(--guvenli-alt) + var(--b3));
  max-width: 480px;
  margin: 0 auto;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: var(--b3);
  padding: var(--b3) var(--b4);
  background: var(--yuzey);
  border: 1px solid var(--cizgi);
  border-radius: var(--kose-b);
  box-shadow: var(--golge-2);
  animation: tst-gel var(--sure-orta) var(--egri) both;
}
.tst-olumlu { color: var(--olumlu); }
.tst-hata { color: var(--hata); }
.tst-metin { color: var(--yazi); flex: 1; }
@keyframes tst-gel { from { opacity: 0; transform: translateY(100%); } to { opacity: 1; transform: none; } }
@media (min-width: 900px) {
  .tst { left: calc(var(--yanpanel-g) + var(--b4)); bottom: var(--b5); }
}

/* ── Hata ekranı ── hta- ───────────────────────────────────── */
.hta {
  min-height: 100vh;
  min-height: 100dvh;
  padding: var(--b5);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: var(--b4);
}
.hta-simge { color: var(--uyari); }
.hta-metin { margin: 0; max-width: 360px; }

/* ── Simge düğmesi (basılan alan 44px) ─────────────────────── */
.dgm-simge {
  width: var(--dokunma);
  height: var(--dokunma);
  display: inline-grid;
  place-items: center;
  flex: none;
  border-radius: var(--kose-hap);
  color: var(--yazi-2);
  transition: transform var(--sure-kisa) var(--egri);
}
.dgm-simge:active:not(:disabled) { transform: scale(var(--kucul-simge)); }
.dgm-simge:disabled { opacity: .45; }

/* ── Form düzeni ── frm- ───────────────────────────────────── */
.frm { padding: var(--b4); }
.frm-alanlar { display: grid; grid-template-columns: 1fr; gap: var(--b4); }
@media (min-width: 900px) {
  .frm { padding: var(--b5); }
  .frm-alanlar { grid-template-columns: 1fr 1fr; gap: var(--b4) var(--b5); }
  .frm-genis { grid-column: 1 / -1; }
}
.frm-uzun { min-height: 96px; padding-top: var(--b3); padding-bottom: var(--b3); resize: vertical; }
.frm-istege { font-weight: 400; color: var(--yazi-3); }
.frm-girdi:disabled { background: var(--yuzey-2); color: var(--yazi-2); }
.frm-para { position: relative; display: block; }
.frm-para .frm-girdi { text-align: right; padding-right: calc(var(--b3) + 16px); font-variant-numeric: tabular-nums; }
.frm-para-isaret { position: absolute; right: var(--b3); top: 50%; transform: translateY(-50%); color: var(--yazi-2); pointer-events: none; }
.frm-genel-hata {
  margin: 0 0 var(--b4);
  padding: var(--b3);
  display: flex;
  gap: var(--b2);
  align-items: flex-start;
  background: var(--hata-zemin);
  color: var(--hata);
  border-radius: var(--kose-k);
}
.frm-dugmeler, .dtl-dugmeler {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--b2);
  margin-top: var(--b5);
}
.frm-bosluk { flex: 1; }
.frm-sil { color: var(--hata); }
@media (max-width: 899px) {
  .frm-dugmeler .dgm-birincil, .dtl-dugmeler .dgm-birincil { flex: 1 1 100%; order: -1; }
  .frm-dugmeler .dgm-ikincil { flex: 1; }
  .frm-bosluk { display: none; }
}
.frm-anahtar-satir { display: flex; align-items: center; justify-content: space-between; gap: var(--b3); min-height: var(--dokunma); cursor: pointer; }

/* ── Anahtar ── anh- ───────────────────────────────────────── */
.anh { position: relative; width: 44px; height: 26px; flex: none; }
.anh-girdi { position: absolute; inset: -9px 0; width: 100%; height: 44px; margin: 0; opacity: 0; cursor: pointer; z-index: 1; }
.anh-yol {
  position: absolute;
  inset: 0;
  border-radius: var(--kose-hap);
  background: var(--cizgi-guclu);
  transition: background-color var(--sure-kisa) var(--egri);
}
.anh-yol::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: var(--kose-hap);
  background: var(--yuzey);
  box-shadow: var(--golge-1);
  transition: transform var(--sure-kisa) var(--egri);
}
.anh-girdi:checked + .anh-yol { background: var(--vurgu); }
.anh-girdi:checked + .anh-yol::after { transform: translateX(18px); }
.anh-girdi:focus-visible + .anh-yol { outline: 2px solid var(--odak); outline-offset: 2px; }

/* ── Detay ── dtl- ─────────────────────────────────────────── */
.dtl { padding: var(--b2) var(--b4); }
.dtl-liste { margin: 0; }
.dtl-satir {
  display: flex;
  justify-content: space-between;
  gap: var(--b4);
  padding: var(--b3) 0;
  border-bottom: 1px solid var(--cizgi);
}
.dtl-satir:last-child { border-bottom: 0; }
.dtl-satir dt { color: var(--yazi-2); flex: none; }
.dtl-satir dd { margin: 0; text-align: right; word-break: break-word; }

/* ── Liste sayfası ── lsy- ─────────────────────────────────── */
.lsy-ust { display: flex; flex-wrap: wrap; align-items: center; gap: var(--b2); margin-bottom: var(--b4); }
.lsy-daha { margin-top: var(--b3); }
.lsy-satir { display: flex; align-items: center; }
.lsy-satir > .lst-satir { flex: 1; min-width: 0; }
.lsy-duzenle { margin-right: var(--b2); }
@media (max-width: 899px) {
  .lsy-ust > .dgm-birincil { flex: 1 1 100%; }
}

/* ── Form altı ek bağlantı ─────────────────────────────────── */
.frm-ek { margin-top: var(--b3); display: flex; justify-content: flex-start; }

/* ── Detay ekleri ─────────────────────────────────────────── */
.dtl-bolum { margin-top: var(--b5); }
.dtl-bos { margin: 0; padding: var(--b4); color: var(--yazi-2); font-size: var(--kucuk); line-height: var(--kucuk-satir); }
.dtl-not { margin: var(--b3) 0 0; color: var(--yazi-2); font-size: var(--kucuk); line-height: var(--kucuk-satir); }
.dtl-bag { color: var(--vurgu); font-weight: 500; display: inline-flex; align-items: center; min-height: var(--dokunma); }

/* ── Tanım listeleri ── tnm- ───────────────────────────────── */
.tnm-durum { font-size: var(--kucuk); line-height: var(--kucuk-satir); font-weight: 600; white-space: nowrap; }
.tnm-sonuk { color: var(--yazi-3); }

/* ── Bildirim listesi ── bld- ──────────────────────────────── */
.bld { list-style: none; margin: 0; padding: 0; max-height: min(420px, 60vh); overflow-y: auto; }
.bld > li + li { border-top: 1px solid var(--cizgi); }
.bld-satir {
  width: 100%;
  display: flex;
  gap: var(--b2);
  align-items: flex-start;
  padding: var(--b3) var(--b4) var(--b3) var(--b2);
  text-align: left;
  transition: transform var(--sure-kisa) var(--egri);
}
.bld-satir:active { transform: scale(var(--kucul-satir)); }
.bld-nokta { width: 8px; height: 8px; margin-top: 7px; border-radius: var(--kose-hap); flex: none; }
.bld-yeni .bld-nokta { background: var(--vurgu); }
.bld-metin { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.bld-baslik { font-weight: 600; }
.bld-yeni .bld-baslik { color: var(--yazi); }
.bld-aciklama { font-size: var(--kucuk); line-height: var(--kucuk-satir); color: var(--yazi-2); }
.bld-zaman { font-size: var(--kucuk); line-height: var(--kucuk-satir); color: var(--yazi-3); }

/* ── Onay penceresi ── pnc- ────────────────────────────────── */
.pnc {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: var(--perde);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  animation: pnc-gel var(--sure-orta) var(--egri) both;
}
.pnc-kutu {
  width: 100%;
  max-width: 480px;
  background: var(--yuzey);
  border-radius: var(--kose-b) var(--kose-b) 0 0;
  box-shadow: var(--golge-2);
  padding: var(--b5) var(--b4) calc(var(--b4) + env(safe-area-inset-bottom, 0px));
}
.pnc-baslik { margin: 0; font-size: var(--baslik-2); line-height: var(--baslik-2-satir); font-weight: 600; }
.pnc-metin { margin: var(--b3) 0 0; color: var(--yazi-2); }
.pnc-dugmeler { display: flex; flex-wrap: wrap; gap: var(--b2); margin-top: var(--b5); }
.pnc-dugmeler .dgm { flex: 1 1 100%; }
.pnc-dugmeler [data-onay] { order: -1; }
@keyframes pnc-gel { from { opacity: 0; } to { opacity: 1; } }
/* Telefonda pencere alttan kart olarak gelir (tasarim.md §7) */
@media (max-width: 899px) {
  .pnc-kutu { animation: tst-gel var(--sure-orta) var(--egri) both; }
}
@media (min-width: 900px) {
  .pnc { align-items: center; }
  .pnc-kutu { border-radius: var(--kose-b); padding: var(--b5); }
  .pnc-dugmeler { justify-content: flex-end; }
  .pnc-dugmeler .dgm { flex: none; }
  .pnc-dugmeler [data-onay] { order: 0; }
}

/* ── İlerleme çubuğu ── ilr- (tasarim.md §5) ───────────────── */
.ilr { display: block; height: 4px; margin: var(--b1) 0; background: var(--cizgi); border-radius: var(--kose-hap); overflow: hidden; }
.ilr-dolu { display: block; height: 100%; background: var(--vurgu); border-radius: var(--kose-hap); transition: width var(--sure-orta) var(--egri); }
.ilr-asti .ilr-dolu { background: var(--uyari); }