/* kit/cizgili.css — Çizgili defter sayfası: kareli sayfanın (kit/kagit.css) kardeşi. Hangi oyun olduğunu bilmez.
   Kullanım: <section class="sayfa cizgili">; değişkenleri Kit.cizgili.kur(el, o) yazar (ya da oyunun CSS'i):
     --satir      satır aralığı (px)           --satir-ust  ilk satır çizgisinin sayfanın üstünden uzaklığı
     --satir-alt  son çizgiden sonra boş pay    --marj-x     kırmızı marj çizgisinin yeri
     --cizgi      satır çizgisinin rengi        --delik-cap  delik çapı (0: delik yok)
   Yırtık üst kenar ayrı bir şerittir (.yirtik): clip-path sayfanın gölgesini keserdi. Şeridi Kit.cizgili.kur çizer.
   Kalemle çizilen şeyler SVG'de; burada yalnız BASILI şeyler var (satırlar, marj, delikler, gren). */

.sayfa.cizgili {
  --satir: 36px;
  --satir-ust: calc(var(--satir) * 2.4);
  --satir-alt: var(--satir);
  --marj-x: calc(var(--satir) * 2.2);
  --cizgi: rgba(70, 120, 190, .34);
  --delik-cap: calc(var(--satir) * .62);
  --delik-x: calc(var(--satir) * .42);
  background-image:
    linear-gradient(to right,
      transparent calc(var(--marj-x) - 1px), var(--marj) calc(var(--marj-x) - 1px),
      var(--marj) calc(var(--marj-x) + .6px), transparent calc(var(--marj-x) + .6px)),
    repeating-linear-gradient(to bottom, var(--cizgi) 0 1px, transparent 1px var(--satir)),
    url("gren.png");
  background-size: 100% 100%, 100% calc(100% - var(--satir-ust) - var(--satir-alt) + 1px), 256px 256px;
  background-position: 0 0, 0 var(--satir-ust), 0 0;
  background-repeat: no-repeat, no-repeat, repeat;
}

/* Delikler: kâğıt delinmiş, altından mukavva görünür; üst kenarında hafif gölge (kâğıdın kalınlığı) */
.sayfa.cizgili::before {
  content: ''; position: absolute; pointer-events: none;
  left: calc(var(--delik-x) - var(--delik-cap) / 2); top: 0; bottom: 0; width: var(--delik-cap);
  --delik: radial-gradient(circle at 50% 54%, #a48b66 0 52%, #8d7553 60%, rgba(110, 84, 50, .45) 66%, rgba(255, 255, 255, .55) 71%, transparent 76%);
  background: var(--delik), var(--delik), var(--delik);
  background-size: var(--delik-cap) var(--delik-cap);
  background-repeat: no-repeat;
  background-position: 0 18%, 0 50%, 0 82%;
}

/* Yırtık üst kenar: sayfanın üstüne yapışık, aynı kâğıttan bir şerit; tırtıklı ucu kendi gölgesini taşır */
.sayfa.cizgili > .yirtik {
  position: absolute; left: 0; right: 0; bottom: calc(100% - 1px); pointer-events: none;
  filter: drop-shadow(0 -.5px .6px rgba(60, 40, 20, .35));
}
.sayfa.cizgili > .yirtik > .yirtik-kagit {
  position: absolute; inset: 0;
  background-color: var(--kagit);
  background-image:
    linear-gradient(to right,
      transparent calc(var(--marj-x) - 1px), var(--marj) calc(var(--marj-x) - 1px),
      var(--marj) calc(var(--marj-x) + .6px), transparent calc(var(--marj-x) + .6px)),
    url("gren.png");
  background-size: 100% 100%, 256px 256px;
  background-position: 0 0, 0 var(--yirtik-h, 12px);
}
.sayfa.cizgili > .yirtik > svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }