/* Temel sifirlama ve kabuk duzeni. Mobile-first (Mobil raporu §3.1). */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--asv-bg-void);
  color: var(--asv-tx);
  font-family: var(--asv-font-mono);
  font-size: var(--asv-text-base);
  line-height: var(--asv-line-height);
}

/* Atlama baglantisi · 9 ogelik kenar menuyu her sayfada gecmemek icin */
.asv-atla {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--asv-cyan);
  color: var(--asv-bg-void);
  padding: var(--asv-space-sm) var(--asv-space-md);
  z-index: 999;
}
.asv-atla:focus { left: 0; }

/* ---- KABUK · mobile-first ---- */
/* [hidden] ozniteligini display kurallari EZER.
   .asv-kabuk display:grid, .asv-alt-sekme display:flex tanimliyor; bunlar
   tarayicinin varsayilan [hidden]{display:none} kuralindan daha ozgul.
   Bu satir olmadan hidden ozniteligi HICBIR SEY yapmaz. */
[hidden] { display: none !important; }

.asv-kabuk {
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: 100dvh;
}

.asv-kenar   { display: none; }                 /* telefonda gizli */
.asv-icerik  { padding: var(--asv-space-md); }
.asv-panel   { display: none; }                 /* telefonda katman olur */

/* Alt sekme cubugu · basparmak erisim bolgesi (Mobil raporu §3.3) */
.asv-alt-sekme {
  display: flex;
  justify-content: space-around;
  border-top: var(--asv-border) solid var(--asv-line);
  background: var(--asv-bg-panel);
  position: sticky;
  bottom: 0;
}
.asv-alt-sekme a {
  min-height: var(--asv-target-touch);
  min-width: var(--asv-target-touch);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--asv-tx-dim);
  text-decoration: none;
  font-size: var(--asv-text-xs);
}

/* ---- Tablet: 768px ---- */
@media (min-width: 768px) {
  /* [hidden] ozniteligini display kurallari EZER.
   .asv-kabuk display:grid, .asv-alt-sekme display:flex tanimliyor; bunlar
   tarayicinin varsayilan [hidden]{display:none} kuralindan daha ozgul.
   Bu satir olmadan hidden ozniteligi HICBIR SEY yapmaz. */
[hidden] { display: none !important; }

.asv-kabuk {
    grid-template-columns: 72px 1fr;
    grid-template-rows: 1fr auto;
  }
  .asv-kenar { display: block; border-right: var(--asv-border) solid var(--asv-line); }
  .asv-alt-sekme { display: none; }
}

/* ---- Masaustu: 1280px · mockup duzeni ---- */
@media (min-width: 1280px) {
  /* [hidden] ozniteligini display kurallari EZER.
   .asv-kabuk display:grid, .asv-alt-sekme display:flex tanimliyor; bunlar
   tarayicinin varsayilan [hidden]{display:none} kuralindan daha ozgul.
   Bu satir olmadan hidden ozniteligi HICBIR SEY yapmaz. */
[hidden] { display: none !important; }

.asv-kabuk { grid-template-columns: 220px 1fr 300px; }

  /*
   * KENAR CUBUGU DARALTILABILIR.
   *
   * ⚠ GIZLENMEZ, DARALTILIR (220px -> 64px). Tamamen gizlemek gezinmeyi
   * erisilemez yapardi; dar halde simgeler duruyor ve `title` ipucu adi
   * tasiyor. Toplanti gibi genislik isteyen ekranlarda 156 piksel geri
   * kazanmak icin var.
   *
   * Tercih `localStorage`da tutuluyor (`kabuk/gezinme.js`): kabuk her
   * rotada yeniden ciziliyor ve hatirlanmasaydi menu her gecişte tekrar
   * genislerdi.
   */
  body[data-kenar="dar"] .asv-kabuk { grid-template-columns: 64px 1fr 300px; }

  body[data-kenar="dar"] .asv-kenar .asv-menu-etiket,
  body[data-kenar="dar"] .asv-kenar .asv-sirket-karti,
  body[data-kenar="dar"] .asv-kenar .asv-marka span { display: none; }

  body[data-kenar="dar"] .asv-kenar { overflow: hidden; }
}

/* Daraltma dugmesi HER genislikte kenar cubugunun tepesinde durur. */
.asv-kenar-daralt {
  display: block;
  margin: 4px 4px 0 auto;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  padding: 4px 8px;
  opacity: 0.6;
}

.asv-kenar-daralt:hover,
.asv-kenar-daralt:focus-visible { opacity: 1; }

@media (min-width: 1280px) {
  /* Bu blok yalnizca yukaridaki kurallarin kapanisini tamamlar. */
  .asv-panel { display: block; border-left: var(--asv-border) solid var(--asv-line); }
}

/* ---- Giris ekrani ---- */
/* Kabuk (kenar cubugu / panel / sekmeler) DISINDA durur - giris ekraninda
   bos gezinme alanlari gorunmez. */
.asv-giris-kok { min-height: 100dvh; display: grid; place-items: start center; }
.asv-giris { max-width: 22rem; margin: var(--asv-space-xl) auto; padding: 0 var(--asv-space-md); }
.asv-giris h1 {
  font-family: var(--asv-font-pixel);
  font-size: var(--asv-text-xl);
  color: var(--asv-cyan);
  margin-bottom: var(--asv-space-lg);
}
.asv-giris label {
  display: block;
  margin-top: var(--asv-space-md);
  margin-bottom: var(--asv-space-xs);
  color: var(--asv-tx-dim);
  font-size: var(--asv-text-sm);
}
.asv-giris input {
  width: 100%;
  /* WCAG 2.2 - 2.5.8: dokunma hedefi en az 24 CSS px. Metin girisi
     icin daha comert davraniyoruz - mobilde parmakla isabet kolaylasiyor. */
  min-height: var(--asv-target-touch);
  padding: var(--asv-space-sm);
  background: var(--asv-bg-void);
  color: var(--asv-tx);
  /* --asv-border bir GENISLIK token'idir (1px), renk degil. Renk slotuna
     konursa "solid 1px" cikar, bildirim gecersizdir ve tarayici kenarligi
     TAMAMEN atar - alan gorunmez olur. Renk daima --asv-line. */
  border: var(--asv-border) solid var(--asv-line);
  border-radius: var(--asv-radius);
  font: inherit;
}
.asv-giris input:focus-visible {
  outline: var(--asv-focus-width) solid var(--asv-focus-color);
  outline-offset: 2px;
}
.asv-giris button {
  margin-top: var(--asv-space-lg);
  width: 100%;
  min-height: var(--asv-target-touch);
  background: transparent;
  color: var(--asv-cyan);
  border: 1px solid var(--asv-cyan);
  border-radius: var(--asv-radius);
  font-family: var(--asv-font-pixel);
  font-size: var(--asv-text-base);
  cursor: pointer;
}
.asv-giris button:disabled { opacity: .6; cursor: progress; }
.asv-hata {
  margin-top: var(--asv-space-md);
  color: var(--asv-red);
  font-size: var(--asv-text-sm);
}
.asv-cikis {
  min-height: var(--asv-target-min);
  padding: 0 var(--asv-space-sm);
  background: transparent;
  color: var(--asv-tx);
  border: var(--asv-border) solid var(--asv-line);
  border-radius: var(--asv-radius);
  font: inherit;
  cursor: pointer;
}

/* Acilis hatasi - modul yuklenemezse ekran bos kalmasin. */
.asv-acilis-hatasi {
  position: fixed; inset: 0; z-index: 9999;
  padding: var(--asv-space-lg);
  background: var(--asv-bg-void);
  color: var(--asv-red);
  font-family: var(--asv-font-mono);
  font-size: var(--asv-text-sm);
  white-space: pre-wrap;
  overflow: auto;
}