/* Kıpır — sayfa stilleri, livanconcept teması (tasarim/maket.css'ten; maket etiketleri çıkarıldı). Yalnız degiskenler.css değişkenleri.
   Kitapçık kuralları (maket.css "Kitapçık") iş kartı 20a'da gelir; o zamana dek eski önizleme çerçevesi ve kapak kutusu kalır. */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--zemin);
  color: var(--metin);
  font-family: var(--yazi-govde);
  font-size: var(--boyut-govde);
  line-height: var(--satir-yuksekligi);
  overflow-wrap: anywhere;
}
img, svg { max-width: 100%; height: auto; display: block; }

h1, h2, h3 { font-family: var(--yazi-baslik); font-weight: 400; line-height: var(--satir-yuksekligi-baslik); margin: 0 0 var(--bosluk-3); }
h3 { font-weight: 600; }
.ust-baslik { font-family: var(--yazi-govde); font-size: var(--boyut-ust-baslik); letter-spacing: var(--ust-baslik-aralik); text-transform: uppercase; color: var(--metin-ikincil); font-weight: 500; margin: 0 0 var(--bosluk-2); }
h1 { font-size: var(--boyut-baslik-1); }
h2 { font-size: var(--boyut-baslik-2); }
h3 { font-size: var(--boyut-baslik-3); }
p { margin: 0 0 var(--bosluk-3); }

a { color: var(--vurgu); text-underline-offset: 0.2em; }
:focus-visible { outline: var(--odak-kalinlik) solid var(--odak); outline-offset: 2px; }

.atla { position: absolute; left: -999px; top: 0; background: var(--yuzey); padding: var(--bosluk-2) var(--bosluk-3); }
.atla:focus { left: var(--bosluk-3); }

.ust { padding: var(--bosluk-4); border-bottom: 1px solid var(--cizgi); background: var(--zemin); }
.ust__ic, main, .alt__ic { width: min(100%, var(--icerik-genislik)); margin-inline: auto; }
.ust__ic { display: flex; flex-wrap: wrap; gap: var(--bosluk-2) var(--bosluk-4); align-items: baseline; justify-content: space-between; }
.ad { font-family: var(--yazi-baslik); font-size: var(--boyut-baslik-3); font-weight: 600; color: var(--metin); text-decoration: none; }
/* Üst başlık (genel.ust_baslik / motor.ust_baslik): adın üstünde küçük, büyük harfli satır */
.ad small { display: block; font-family: var(--yazi-govde); font-size: var(--boyut-ust-baslik); letter-spacing: var(--ust-baslik-aralik); text-transform: uppercase; font-weight: 500; color: var(--metin-ikincil); }

main { padding: var(--bosluk-5) var(--bosluk-4) var(--bosluk-7); }

.ekran {
  background: var(--yuzey);
  border: 1px solid var(--cizgi);
  border-radius: var(--kose-buyuk);
  box-shadow: var(--golge);
  padding: var(--bosluk-5) var(--bosluk-4);
  border-color: transparent;
  margin-bottom: var(--bosluk-5);
}
.ekran--duz { background: transparent; border: 0; box-shadow: none; padding-inline: 0; }
.ekran--hero { background: var(--hero-zemin); border-radius: var(--kose-hero); padding: var(--bosluk-6) var(--bosluk-4); }

.ikincil { color: var(--metin-ikincil); font-size: var(--boyut-kucuk); }
.rakam { font-family: var(--yazi-rakam); font-variant-numeric: tabular-nums; }

/* Form öğeleri */
.alan { margin-bottom: var(--bosluk-4); }
label, legend { display: block; font-weight: 600; margin-bottom: var(--bosluk-1); }
input[type="file"], input[type="email"], input[type="text"], input[type="number"], select {
  display: block;
  width: 100%;
  min-height: var(--dokunma-alani);
  font: inherit;
  color: var(--metin);
  background: var(--kagit);
  border: 1px solid var(--metin-ikincil);
  border-radius: var(--kose);
  padding: var(--bosluk-2) var(--bosluk-3);
}
input[aria-invalid="true"], select[aria-invalid="true"] { border: 2px solid var(--hata); }
input:disabled, select:disabled, button:disabled { opacity: var(--pasif-saydamlik); cursor: not-allowed; }
fieldset { border: 0; padding: 0; margin: 0 0 var(--bosluk-4); min-width: 0; }

.kutu { display: flex; gap: var(--bosluk-3); align-items: flex-start; }
.kutu input { width: var(--kutu-boyut); height: var(--kutu-boyut); margin: 0.15rem 0 0; flex: none; accent-color: var(--vurgu); }
.kutu label { font-weight: 400; margin: 0; }

.ipucu { color: var(--metin-ikincil); font-size: var(--boyut-kucuk); margin: var(--bosluk-1) 0 0; }
.hata-metni { color: var(--hata); font-size: var(--boyut-kucuk); font-weight: 600; margin: var(--bosluk-1) 0 0; }
.bilgi { border-radius: var(--kose); padding: var(--bosluk-3); margin: var(--bosluk-3) 0; }
.bilgi--hata { background: var(--hata-zemin); color: var(--hata-ust); }
.bilgi--hata .hata-metni { color: var(--hata-ust); } /* --hata, --hata-zemin üstünde ≈4,1:1 (eşik altı); kutu içinde --hata-ust 7,71:1 */
.bilgi--uyari { background: var(--uyari-zemin); color: var(--uyari); }
.bilgi--not { background: var(--yuzey-ikincil); color: var(--metin); }
.basari { color: var(--basari); font-weight: 600; }

/* Düğmeler */
.dugme {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--bosluk-2);
  min-height: var(--dokunma-alani);
  padding: var(--bosluk-2) var(--bosluk-5);
  font: inherit; font-weight: 600;
  border-radius: var(--kose);
  border: 1px solid var(--dugme-zemin);
  background: var(--dugme-zemin); color: var(--dugme-metin);
  text-decoration: none; cursor: pointer;
  transition: background-color var(--hareket-kisa) var(--hareket-egri), border-color var(--hareket-kisa) var(--hareket-egri);
}
.dugme:hover { border-color: var(--metin); }
.dugme--ikincil { background: transparent; color: var(--vurgu); border-color: var(--vurgu); }
.dugme--koyu { background: var(--vurgu); color: var(--vurgu-ustu); border-color: var(--vurgu); }
.dugme--tam { width: 100%; }
.dugmeler { display: flex; flex-wrap: wrap; gap: var(--bosluk-3); align-items: center; }

progress { width: 100%; height: 0.75rem; accent-color: var(--vurgu); }
input[type="range"] { width: 100%; accent-color: var(--vurgu); min-height: var(--dokunma-alani); }

/* Kitapçık önizlemesi */
.kitap { display: grid; justify-items: center; gap: var(--bosluk-3); margin: var(--bosluk-4) 0; }
.kitap__cerceve {
  width: min(100%, var(--kitap-genislik)); aspect-ratio: 4 / 3;
  border-radius: var(--kose-kucuk) var(--kose) var(--kose) var(--kose-kucuk);
  box-shadow: var(--golge-kitap);
  overflow: hidden; position: relative; background: var(--yuzey-ikincil);
  border-left: var(--kitap-sirt) solid var(--metin-ikincil); /* nötr sırt: kapak rengi yalnız V4 kapak önizlemesinde görünür */
}
.kitap__cerceve--bos { border: 2px dashed var(--metin-ikincil); box-shadow: none; display: grid; place-items: center; text-align: center; padding: var(--bosluk-4); color: var(--metin-ikincil); }
.kitap__cerceve canvas { display: block; width: 100%; height: 100%; }
.hazirlaniyor { width: 100%; }
.kitap__sayac { font-family: var(--yazi-rakam); font-variant-numeric: tabular-nums; color: var(--metin-ikincil); font-size: var(--boyut-kucuk); }
.kapak {
  width: min(100%, var(--kitap-genislik)); aspect-ratio: 4 / 3; border-radius: var(--kose-kucuk) var(--kose) var(--kose) var(--kose-kucuk);
  display: grid; place-items: center; padding: var(--bosluk-4); text-align: center;
  color: var(--kapak-yazi); font-family: var(--yazi-baslik); font-size: var(--boyut-baslik-3);
  box-shadow: var(--golge-kitap);
}
.kapak--gece { background: var(--kapak-gece); }
.kapak--nar { background: var(--kapak-nar); }
.kapak--zeytin { background: var(--kapak-zeytin); }
.kapak--deniz { background: var(--kapak-deniz); }
.kapak--pasif { opacity: var(--pasif-saydamlik); } /* V4 pasif: kutu gizlenmez, soluk görünür */

.renkler { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--bosluk-2); }
.renk { display: flex; align-items: center; gap: var(--bosluk-2); min-height: var(--dokunma-alani); padding: var(--bosluk-2); border: 1px solid var(--metin-ikincil); border-radius: var(--kose); background: var(--yuzey); }
.renk:has(input:checked) { background: var(--secili); border-color: var(--metin); }
.renk input { margin: 0; width: var(--kutu-boyut); height: var(--kutu-boyut); accent-color: var(--vurgu); flex: none; }
.renk label { margin: 0; font-weight: 400; display: flex; align-items: center; gap: var(--bosluk-2); }
.renk__ornek { width: var(--kutu-boyut); height: var(--kutu-boyut); border-radius: 50%; flex: none; border: 1px solid var(--cizgi); }

.fiyat { font-size: var(--boyut-buyuk); font-weight: 700; margin-bottom: var(--bosluk-2); }

/* Motor ızgarası */
.izgara { display: grid; gap: 0 var(--bosluk-4); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 40rem) {
  .izgara { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ekran { padding: var(--bosluk-6); }
}
.ozet { font-family: var(--yazi-rakam); font-variant-numeric: tabular-nums; background: var(--yuzey-ikincil); border-radius: var(--kose); padding: var(--bosluk-3); margin: 0 0 var(--bosluk-3); }

.alt { border-top: 1px solid var(--cizgi); padding: var(--bosluk-5) var(--bosluk-4); color: var(--metin-ikincil); font-size: var(--boyut-kucuk); }
.alt__ic { display: grid; gap: var(--bosluk-2); }
.alt a { color: var(--vurgu); }

/* Uzun metin (aydınlatma) */
.metin h2 { font-size: var(--boyut-baslik-3); margin-top: var(--bosluk-5); }
.metin ul { padding-left: var(--bosluk-5); margin: 0 0 var(--bosluk-3); }
.yer-tutucu { font-family: var(--yazi-rakam); font-weight: 600; background: var(--uyari-zemin); color: var(--uyari); padding: 0 var(--bosluk-1); border-radius: var(--kose-kucuk); }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* Gizli öğe (ekran durumları hidden niteliğiyle kurulur) */
[hidden] { display: none !important; }

/* M3 yerleşim çizimi (motor-sayfa.mjs kurar; ölçüler mm, viewBox kâğıt boyutunda) */
.cizim { margin: 0 0 var(--bosluk-3); }
.cizim svg { display: block; }
.cizim-kagit { fill: var(--yuzey); stroke: var(--cizgi); stroke-width: 1; }
.cizim-parca { fill: var(--yuzey-ikincil); stroke: var(--metin-ikincil); stroke-width: 0.6; }
.cizim-serit { fill: var(--metin-ikincil); }