/* Hesap (/hesap), oda (/oda) ve yönetici (/yonetici) sayfalarının ortak dili: gövde zemini, üst
   çubuk (marka, sağında TR | EN seçicisinin yeri), içerik sütunu ve kartlar, formlar ve düğme
   türleri, iletiler, model durum rozetleri, sayı kutuları, kod satırları ve dar ekranda karta
   dönen tablolar. Sayfaya özgü parçalar sayfa/hesap.css, sayfa/yonetici.css, sayfa/oda.css. */

html, body.s-govde { height: auto; min-height: 100%; }
.s-govde {
  background: var(--zemin-alt);
}

/* üst çubuk */
.s-ust {
  position: sticky; top: 0; z-index: 5;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 10px max(16px, env(safe-area-inset-left));
  padding-right: calc(max(16px, env(safe-area-inset-right)) + 96px);   /* dil seçicisinin yeri */
  background: var(--kaplama); border-bottom: 1px solid var(--cizgi);
}
.s-marka { display: inline-flex; align-items: center; gap: 7px; color: var(--yazi-1);
  font-size: 14px; }
.s-marka b { font-weight: 800; }
.s-marka i { font-style: normal; font-weight: 700; color: var(--vurgu-acik); }
.s-baslik { padding-left: 12px; border-left: 1px solid var(--cizgi); color: var(--yazi-2);
  font-weight: 600; letter-spacing: .02em; }
.s-bag { margin-left: auto; display: flex; gap: 8px; }
.s-bag .dugme, .s-bag button { min-height: var(--dokunma); padding: 5px 11px; font-size: 12.5px; }
.s-marka { min-height: var(--dokunma); }
/* sola bakan ok: "sag" simgesinin aynası (geri bağlantıları, oda sayfasıyla ortak) */
.simge.sol { transform: scaleX(-1); }
/* dil seçici (css/sayfa/dil.css `.dil-secici.sabit`: pencerenin sağ üstünde sabit) üst
   çubuğun dikey ortasında, çubuğun sağ dolgusunda durur; bağlantıların üstüne binmez */
.s-govde .dil-secici.sabit { top: 8px; }

/* gövde ve kartlar */
.s-icerik { margin: 0 auto; padding: 20px 16px 48px; display: flex; flex-direction: column;
  gap: 16px; }
.s-icerik.dar { max-width: 760px; }
.s-icerik.genis { max-width: 1320px; }
.s-yukleniyor { color: var(--yazi-3); text-align: center; }
.s-yigin, .s-pano { display: flex; flex-direction: column; gap: 16px; }
.s-kart {
  background: var(--zemin-1);
  border: 1px solid var(--cizgi); border-radius: var(--yaricap-2); padding: 18px 20px;
  box-shadow: var(--golge-1); min-width: 0;
}
.s-kart h1 { margin: 0 0 6px; font-size: 22px; }
.s-kart h2 { margin: 0 0 10px; font-size: 16px; letter-spacing: .01em; }
.s-kart h3 { margin: 0; font-size: 17px; }
.s-giris { max-width: 440px; width: 100%; margin: 24px auto 0; }
.s-not { margin: 0 0 12px; color: var(--yazi-2); font-size: 12.5px; }
.s-satir-bas { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-bottom: 8px; }
.s-satir-bas h2 { margin: 0; }
.s-sayi-yazi { color: var(--yazi-3); font: 11.5px var(--aile-sans); }

/* formlar */
.s-form { display: flex; flex-direction: column; gap: 12px; }
.alan { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.alan label { font-weight: 600; font-size: 12.5px; }
.alan small { color: var(--yazi-3); font-size: 11.5px; }
.s-govde input:not([type=radio]):not([type=range]), .s-govde textarea, .s-govde select {
  width: 100%; font: inherit; font-size: 14px; color: var(--yazi-1); background: var(--zemin-alt);
  border: 1px solid var(--cizgi); border-radius: var(--yaricap-1); padding: 8px 10px;
  min-height: var(--dokunma); }
.s-govde textarea { resize: vertical; min-height: 44px; }
.s-govde input:focus, .s-govde textarea:focus, .s-govde select:focus {
  outline: 2px solid var(--odak); outline-offset: 0; border-color: var(--odak); }
.s-eylem { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.s-govde button.kucuk { min-height: var(--dokunma); padding: 4px 9px; font-size: 12px; }
.s-govde button:disabled { opacity: .5; cursor: progress; }
button.soruyor { border-color: var(--kotu); background: var(--kotu-zemin); color: var(--yazi-1); }

/* iletiler */
.s-ileti { margin: 0; padding: 7px 10px; border-radius: var(--yaricap-1); font-size: 12.5px; }
.s-ileti.hata { background: var(--kotu-zemin); color: var(--kotu-yazi);
  border: 1px solid var(--kotu-kenar); }
.s-ileti.tamam { background: var(--iyi-zemin); color: var(--iyi);
  border: 1px solid var(--iyi-kenar); }
.s-uyari { margin: 0; padding: 8px 10px; border-radius: var(--yaricap-1); font-size: 12.5px;
  background: var(--uyari-zemin); color: var(--uyari); border: 1px solid var(--uyari-kenar); }

/* model durumu rozetleri */
.m-rozet { display: inline-block; padding: 2px 9px; border-radius: var(--yaricap-hap);
  white-space: nowrap;
  font: 700 11px/1.5 var(--aile-sans); letter-spacing: .02em; border: 1px solid;
  background: var(--zemin-2); color: var(--yazi-2); border-color: var(--cizgi-guclu); }
.m-beklemede { background: var(--uyari-zemin); color: var(--uyari);
  border-color: var(--uyari-kenar); }
.m-onayli, .m-canli { background: var(--iyi-zemin); color: var(--iyi);
  border-color: var(--iyi-kenar); }
.m-reddedildi { background: var(--kotu-zemin); color: var(--kotu-yazi);
  border-color: var(--kotu-kenar); }
.m-durduruldu { background: var(--bilgi-zemin); color: var(--bilgi);
  border-color: var(--bilgi-kenar); }
.m-geri_cekildi, .m-harabe { background: var(--zemin-2); color: var(--yazi-3);
  border-color: var(--cizgi); }

/* kod satırları */
.s-kod { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.s-kod-satir { display: flex; gap: 6px; align-items: flex-start; }
.s-kod code { flex: 1; min-width: 0; padding: 7px 9px; border-radius: var(--yaricap-1);
  background: var(--zemin-alt);
  border: 1px solid var(--cizgi); color: var(--yazi-1); overflow-wrap: break-word;
    user-select: all; }

/* sayı kutuları */
.s-kutular { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px;
  margin-bottom: 12px; }
.s-kutular.cok { grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); }
.s-kutu { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px;
  border-radius: var(--yaricap-2);
  background: var(--zemin-alt); border: 1px solid var(--cizgi); min-width: 0; }
.s-kutu b { font: 700 16px var(--aile-sans); color: var(--yazi-1); overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.s-kutu.genis { grid-column: span 2; }
.s-kutu.kirmizi { border-color: var(--kotu-kenar); background: var(--kotu-zemin); }
.s-kutu.kirmizi b { color: var(--kotu-yazi); font-size: 12px; white-space: normal; }
.s-kutu.sari { border-color: var(--uyari-kenar); background: var(--uyari-zemin); }
.s-kutu.sari b { color: var(--vurgu-acik); }

/* tablolar: geniş ekranda tablo, dar ekranda satır başına kart */
.s-tablo-kap { overflow-x: auto; }
.s-tablo { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.s-tablo th { text-align: left; font-weight: 600; color: var(--yazi-3); font-size: 10.5px;
  letter-spacing: .04em; padding: 0 8px 6px; border-bottom: 1px solid var(--cizgi); }
.s-tablo td { padding: 8px; border-bottom: 1px solid var(--cizgi-ince); vertical-align: top; }
.s-tablo tr.askida td { opacity: .7; }
.s-alt { margin-top: 2px; color: var(--yazi-2); font-size: 11.5px; }

/* alt bilgi: atıflar (simge, yazı tipi lisansları) */
.s-dip { max-width: 760px; margin: 0 auto; padding: 0 16px 28px; text-align: center;
  color: var(--yazi-3); font-size: 12px; line-height: 1.6; }
.s-dip b { font: 600 var(--boy-4) var(--aile-serif); color: var(--yazi-2); }
.s-dip a { color: var(--yazi-2); text-decoration: underline;
  text-decoration-color: var(--cizgi-guclu); text-underline-offset: 2px; }
.s-dip a:hover { color: var(--vurgu-acik); }

/* dokunmatik ekran: girişler, düğmeler, dil seçici en az 40 px */
@media (pointer: coarse) {
  .s-govde input:not([type=radio]):not([type=range]):not([type=checkbox]), .s-govde select,
  .s-govde textarea, .s-govde button, .s-govde button.kucuk, .s-govde .dugme, .s-marka {
    min-height: var(--dokunma-mobil); }
  .s-govde input[type=range] { min-height: var(--dokunma-mobil); }
  .s-ust { padding-right: calc(max(16px, env(safe-area-inset-right)) + 112px); }
}

@media (max-width: 760px) {
  .s-kart { padding: 14px; }
  .s-baslik { display: none; }
  .s-kutular { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .s-tablo thead { display: none; }
  .s-tablo, .s-tablo tbody, .s-tablo tr, .s-tablo td { display: block; width: 100%; }
  .s-tablo tr { padding: 8px 0; border-bottom: 1px solid var(--cizgi); }
  .s-tablo td { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 8px;
    padding: 4px 0; border: 0; }
  .s-tablo td::before { content: attr(data-etiket); color: var(--yazi-3); font-size: 11px; }
  .s-tablo td[colspan]::before { content: none; }
}