/* ===========================================================================
   ÖDEVLER BÖLÜMÜ — odevler.html + odev-*.html
   ---------------------------------------------------------------------------
   TASARIM KARARI (10 Eyl 2026, Tahsin: "grafik gibi şeyler kullanma,
   gerçekçi bir şey istiyorum"):

   1) Defter kâğıdı ÇİZİM DEĞİL. site/images/defter-kagit.webp, öğrencinin
      kendi defterinin BOŞ bir sayfasından kesildi (ödev PDF'inin 3. sayfası).
      Tam iki çizgi aralığı (171 piksel) yüksekliğinde olduğu için dikey
      döşendiğinde kusursuz devam eder. Yani sayfadaki kâğıt, ödevin gerçek
      kâğıdıdır.
      (10 Eyl 2026 düzeltmesi — Tahsin: "arkada kullandığın defteri
      beğenmedim, Yağmur'un defteriyle uyumlu olsun çizgiler": eski kesim
      çizgiyi tam y=0'a denk getirdiği için her döşeme ekinde ÇİFT çizgi
      çıkıyor ve aralık 84.5/86.5 diye gidip geliyordu. Yeni kesim
      11.5 + 85.5·k ızgarasına oturuyor; aralık her yerde tam 85.5 —
      yani Yağmur'un taramasındaki aralığın aynısı.)

   2) İkinci bölümde el yazısı TAKLİT DEĞİL. Yazı tipi kullanılmıyor;
      Yağmur'un taranmış gerçek mürekkebi satır satır soldan sağa açılıyor,
      kalem de açılan kenarda ilerliyor.

   3) Kalem, gradyanlarla kurulmuş metalik bir gövde + çelik uçtur; kâğıda
      gerçek bir gölge düşürür. Karikatür/ikon çizimi yok.
   =========================================================================== */

/* --olcek: taramanın 1785 piksellik genişliğinin ekranda kaç kat durduğu.
   c-odev.js her genişlik değişiminde yeniden hesaplar. Bütün ölçüler buna
   bağlı olduğu için kâğıdın çizgileri ile yazının satırları hep çakışır. */
.odev-sayfa{--olcek:.5;--satir:calc(85.5 * var(--olcek) * 1px);
  /* Kâğıdın döşeme fazı: B bölümünün (Yağmur'un taraması) ilk çizgisi kendi
     üst kenarından 11.5 px aşağıda. Döşemeyi 11.25 px kaydırınca iki bölümün
     çizgileri tek bir kesintisiz ızgara oluyor. */
  --kagit-faz:11.25;
  /* A bölümündeki yazının çizgiye oturması için gereken düşey kaydırma
     (tarama pikseli). Ölçülerek bulundu; bkz. aşağıdaki .odev-a kuralı. */
  --yazi-kay:41.34}

.odev-sayfa{max-width:var(--kap,1180px);margin:0 auto;padding:0 var(--u4,20px) var(--u8,64px)}

/* ---------- Üst başlık ---------- */
.odev-yol{font-size:var(--t-sm,.86rem);color:var(--muted,#6a6f7e);margin:var(--u5,28px) 0 var(--u3,12px)}
.odev-yol a{color:inherit;text-decoration:none;border-bottom:1px solid rgba(20,22,51,.18)}
.odev-yol a:hover{color:var(--cobalt,#2140f0);border-color:currentColor}

.odev-ust{max-width:74ch;margin:0 0 var(--u6,36px)}
.odev-etiket{font-family:var(--font-d,inherit);font-size:var(--t-sm,.86rem);font-weight:800;
  letter-spacing:.16em;color:var(--cobalt,#2140f0);margin:0 0 var(--u2,8px)}
.odev-ust h1{font-family:var(--font-d,inherit);font-size:clamp(1.75rem,4.2vw,2.75rem);font-weight:800;
  letter-spacing:-.02em;line-height:1.12;margin:0 0 var(--u3,12px);color:var(--ink,#141633)}
.odev-kunye{font-size:var(--t-md,1rem);color:var(--ink-2,#3a3f55);margin:0 0 var(--u3,12px)}
.odev-giris{font-size:var(--t-md,1rem);line-height:1.75;color:var(--ink-2,#3a3f55);margin:0 0 var(--u3,12px)}

.odev-rozet{list-style:none;display:flex;flex-wrap:wrap;gap:8px;padding:0;margin:0 0 var(--u4,20px)}
.odev-rozet li{border:var(--kenar,1px solid rgba(20,22,51,.14));border-radius:var(--r-tam,999px);
  padding:4px 13px;font-size:var(--t-sm,.86rem);font-weight:700;background:var(--paper,#fff);
  color:var(--ink-2,#3a3f55)}

/* ---------- Sayfa düzeni: sahne + Tahsin'in notu ---------- */
.odev-duzen{display:grid;gap:var(--u6,36px);grid-template-columns:minmax(0,1fr)}
@media (min-width:1000px){
  .odev-duzen{grid-template-columns:minmax(0,1.65fr) minmax(300px,.9fr);gap:var(--u7,48px);align-items:start}
  .odev-not{position:sticky;top:calc(var(--nav-h,72px) + 20px)}
}

/* ===========================================================================
   SAHNE — defter
   =========================================================================== */
.odev-sahne{min-width:0}

.odev-defter{position:relative;border-radius:6px;overflow:hidden;
  /* Kâğıdın kendi gölgesi: masaya konmuş bir defter sayfası gibi */
  box-shadow:0 1px 2px rgba(60,50,20,.14),0 10px 26px -8px rgba(60,50,20,.28),
             0 30px 60px -30px rgba(60,50,20,.35);
  background:#FFFEEA}
/* Sağ kenarda hafif bir sayfa kıvrımı gölgesi — kâğıdı düz bir dikdörtgen
   olmaktan çıkarır. Ayrı bir görsel gerekmez. */
.odev-defter::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:3;
  background:linear-gradient(90deg,rgba(120,100,50,.10),transparent 5%,transparent 94%,rgba(120,100,50,.09));
  border-radius:inherit}
/* Alt kenarda okuma alanının bittiğini gösteren yumuşak solma */
.odev-defter::before{content:"";position:absolute;left:0;right:0;bottom:0;height:64px;z-index:2;
  pointer-events:none;background:linear-gradient(transparent,rgba(255,254,234,.96))}

.odev-govde{position:relative;height:clamp(360px,62vh,620px);overflow:hidden}

/* GERÇEK KÂĞIT: öğrencinin defterinin boş sayfasından kesilmiş döşeme.
   background-size:100% auto → çizgi aralığı kâğıdın genişliğiyle ölçeklenir,
   yani her ekranda taramadaki oranın aynısı. */
.odev-kagit{position:relative;padding:calc(var(--satir) * .5) 0 calc(var(--satir) * 2);
  background-image:url(../images/defter-kagit.webp);background-repeat:repeat-y;
  background-size:100% auto;background-position:0 calc(var(--kagit-faz) * var(--olcek) * 1px);
  will-change:transform}

/* ---------- Bölüm 1: harfler havadan düşer ----------
   transform ile kaydırma DÜZENİ bozmaz: alttaki ayraç ve B bölümü yerinde
   kalır, sadece yazı çizginin üstüne oturur. Deftere elle yazarken harfler
   çizginin ÜSTÜNDE durur, çizgi de yazının tabanıdır; burada olan tam bu. */
.odev-a{padding:0 3.2%;transform:translateY(calc(var(--yazi-kay) * var(--olcek) * 1px))}

/* Künye tam 2 satır yer kaplamak zorunda: aksi hâlde altındaki bütün satırlar
   kâğıdın çizgilerinden kayar (10 Eyl 2026'da kaymanın sebebi buydu). */
.odev-kaynak{margin:0 0 var(--satir);opacity:0;transition:opacity .8s ease}
.odev-kaynak.gor{opacity:1}
.odev-kaynak-ad{display:block;font-family:Georgia,'Times New Roman',serif;font-style:italic;
  font-size:calc(var(--satir) * .52);line-height:var(--satir);color:#2b2a20;letter-spacing:.01em}
.odev-kaynak-yz{display:block;font-family:Georgia,'Times New Roman',serif;
  font-size:calc(var(--satir) * .36);line-height:var(--satir);color:#6d6a55;margin-top:0}

.odev-a .kita{margin:0 0 var(--satir)}
.odev-a .kita:last-child{margin-bottom:0}

/* Satır yüksekliği = kâğıdın çizgi aralığı. Yazı böylece çizginin üstüne oturur. */
.sata{height:var(--satir);line-height:var(--satir);white-space:nowrap;
  font-family:Georgia,'Times New Roman',serif;
  font-size:calc(var(--satir) * .46);color:#23221a;letter-spacing:.005em}

.kel{display:inline-block;white-space:nowrap}
.bsl{display:inline-block;width:.32em}

/* Harfin havadan düşüşü: yukarıdan, hafif dönerek, bulanıklıktan netleşerek.
   Yayla oturma (cubic-bezier'in 1'i aşan değeri) düşen bir cismin ufak
   sekmesini verir — düz bir kayma "grafik" gibi durur. */
.hrf{display:inline-block;opacity:0;filter:blur(3px);
  transform:translate3d(var(--dx,0),calc(var(--satir) * -1.6),0) rotate(var(--r,0deg)) scale(1.12);
  transition:opacity .3s ease,filter .34s ease,transform .46s cubic-bezier(.18,1.42,.4,1)}
.hrf.dus{opacity:1;filter:none;transform:translate3d(0,0,0) rotate(0) scale(1)}

/* ---------- Ayraç (defterdeki elle çizilen çizginin karşılığı) ---------- */
.odev-ayrac{display:flex;align-items:center;justify-content:center;gap:14px;
  height:calc(var(--satir) * 2);padding:0 3.2%;opacity:0;transition:opacity .9s ease}
.odev-ayrac.gor{opacity:1}
.odev-ayrac i{flex:0 1 26%;height:1.5px;background:#2f2e26;border-radius:2px}
.odev-ayrac b{width:26px;height:15px;border:1.5px solid #2f2e26;border-radius:50%}

/* ---------- Bölüm 2: Yağmur'un gerçek el yazısı ---------- */
/* Ölçüler taramanın piksel koordinatlarıdır (--eng x --yuk); hepsi --olcek
   ile çarpılarak ekrana taşınır. */
/* B bölümünün zemini, genel döşeme değil, AYNI DEFTERİN BOŞ SAYFASININ tam
   aynı y aralığıdır. Böylece kâğıdın çizgileri taramadakilerle birebir
   çakışır; yazının ilerlediği kenarda çift çizgi görünmez. */
.odev-b{position:relative;height:calc(var(--yuk) * var(--olcek) * 1px);
  background-image:url(../images/yagmur-kagit.webp);background-repeat:no-repeat;
  background-size:100% 100%}

.satb{position:absolute;left:0;right:0;
  top:calc(var(--y) * var(--olcek) * 1px);
  height:calc(var(--h) * var(--olcek) * 1px);
  overflow:hidden}
/* Pencere: satırın soldan sağa açılan kısmı. Genişliğini c-odev.js yazar. */
.satb-pencere{position:absolute;left:0;top:0;bottom:0;width:0;overflow:hidden}
.satb-pencere img{position:absolute;left:0;
  top:calc(var(--y) * var(--olcek) * -1px);
  width:calc(var(--eng) * var(--olcek) * 1px);height:auto;max-width:none}

/* ---------- KALEM ----------
   Fotoğraf yok; gövde metalik gradyanlarla kuruluyor. Dönme merkezi ucun
   kendisi (sol alt), böylece uç tam olarak yazının ilerlediği noktada durur. */
.odev-kalem{position:absolute;left:0;top:0;width:0;height:0;z-index:4;
  opacity:0;transition:opacity .35s ease;pointer-events:none}
.odev-kalem.gor{opacity:1}
.odev-kalem>*{position:absolute;transform-origin:0 100%;
  filter:drop-shadow(4px 7px 5px rgba(70,58,24,.30))}

/* Gövde: uçtan yukarı-sağa uzanan, üzerinde ışık yansıyan koyu bir kalem */
.odev-kalem-govde{left:0;bottom:0;width:calc(var(--satir) * 2.9);height:calc(var(--satir) * .30);
  transform:rotate(-34deg) translate(calc(var(--satir) * .17),0);
  border-radius:2px calc(var(--satir) * .16) calc(var(--satir) * .16) 2px;
  background:
    linear-gradient(178deg,
      rgba(255,255,255,.34) 0 8%,
      rgba(255,255,255,.06) 16%,
      rgba(0,0,0,0) 30%,
      rgba(0,0,0,.30) 78%,
      rgba(0,0,0,.46) 100%),
    linear-gradient(90deg,#1b2530 0 6%,#2d3a49 22%,#46586b 40%,#22303d 66%,#141c25 100%)}
/* Metal bilezik */
.odev-kalem-bant{left:0;bottom:0;width:calc(var(--satir) * .34);height:calc(var(--satir) * .32);
  transform:rotate(-34deg) translate(calc(var(--satir) * .62),calc(var(--satir) * .01));
  border-radius:1px;
  background:linear-gradient(178deg,#fdfbf3 0 12%,#cfc6a8 34%,#8d8464 62%,#efe7c9 82%,#9a9068 100%)}
/* Çelik uç: sivrilen bir üçgen, ortasında yarık */
.odev-kalem-uc{left:0;bottom:0;width:calc(var(--satir) * .62);height:calc(var(--satir) * .26);
  transform:rotate(-34deg);
  clip-path:polygon(0 100%,100% 8%,100% 92%);
  background:linear-gradient(178deg,#e9e6dc 0 18%,#a9a698 42%,#5d5c54 72%,#2c2b26 100%)}

/* ---------- Denetimler ---------- */
.odev-kumanda{display:flex;align-items:center;flex-wrap:wrap;gap:12px;margin:0 0 var(--u3,12px)}

.odev-dugme{display:inline-flex;align-items:center;gap:9px;border:var(--kenar,1px solid rgba(20,22,51,.14));
  border-radius:var(--r-tam,999px);padding:10px 20px;font:inherit;font-weight:700;font-size:var(--t-sm,.86rem);
  background:var(--paper,#fff);color:var(--ink,#141633);cursor:pointer;box-shadow:var(--e1,0 1px 2px rgba(20,22,51,.08));
  transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease}
.odev-dugme:hover{transform:translateY(-2px);box-shadow:var(--e2,0 6px 18px -6px rgba(20,22,51,.28))}
.odev-dugme:focus-visible{outline:2px solid var(--cobalt,#2140f0);outline-offset:2px}
.odev-oynat{background:var(--ink,#141633);color:#fff;border-color:transparent}

/* Oynat / duraklat üçgeni ve çubukları — saf CSS */
.odev-ikon{width:0;height:0;border-left:9px solid currentColor;
  border-top:6px solid transparent;border-bottom:6px solid transparent;margin-left:1px}
.odev-oynat.calisiyor .odev-ikon{width:9px;height:12px;border:0;margin-left:0;
  background:linear-gradient(90deg,currentColor 0 34%,transparent 34% 66%,currentColor 66%)}

.odev-ilerle{flex:1 1 140px;min-width:120px;height:5px;border-radius:3px;
  background:rgba(20,22,51,.10);overflow:hidden}
.odev-ilerle-dolu{height:100%;width:0;border-radius:3px;background:var(--cobalt,#2140f0);
  transition:width .12s linear}
.odev-bolumad{flex:0 0 auto;margin:0;font-size:var(--t-sm,.86rem);font-weight:700;
  color:var(--muted,#6a6f7e)}

.odev-ipucu{margin:var(--u3,12px) 0 0;font-size:var(--t-sm,.86rem);color:var(--muted,#6a6f7e);line-height:1.6}

/* ===========================================================================
   TAHSİN'İN NOTU
   =========================================================================== */
.odev-not{background:var(--paper,#fff);border:var(--kenar,1px solid rgba(20,22,51,.14));
  border-radius:var(--r-lg,18px);padding:var(--u5,28px);box-shadow:var(--e1,0 1px 2px rgba(20,22,51,.08))}
.odev-not h2{font-family:var(--font-d,inherit);font-size:var(--t-h3,1.3rem);font-weight:800;
  letter-spacing:-.01em;margin:0 0 var(--u3,12px);color:var(--ink,#141633)}
.odev-not p{font-size:calc(var(--t-md,1rem) * .96);line-height:1.78;color:var(--ink-2,#3a3f55);margin:0 0 var(--u3,12px)}
.odev-not i{color:#4a4636}
.odev-imza{font-weight:700;color:var(--ink,#141633) !important;margin-top:var(--u4,20px) !important}

/* ===========================================================================
   METİNLER + ORİJİNAL TARAMA
   =========================================================================== */
.odev-metinler{display:grid;gap:var(--u6,36px);margin:var(--u8,64px) 0 0;grid-template-columns:minmax(0,1fr)}
@media (min-width:820px){.odev-metinler{grid-template-columns:repeat(2,minmax(0,1fr))}}

.odev-metin{background:#FFFEEA;border:1px solid rgba(120,100,50,.18);border-radius:var(--r-lg,18px);
  padding:var(--u5,28px)}
.odev-metin h2{font-family:var(--font-d,inherit);font-size:var(--t-h3,1.3rem);font-weight:800;
  margin:0 0 4px;color:var(--ink,#141633)}
.odev-metin-kunye{font-size:var(--t-sm,.86rem);color:var(--muted,#6a6f7e);margin:0 0 var(--u4,20px)}
.odev-metin p{font-family:Georgia,'Times New Roman',serif;font-size:1.02rem;line-height:1.9;
  color:#23221a;margin:0 0 1.2em}
.odev-telif{font-family:inherit !important;font-size:var(--t-sm,.86rem) !important;
  color:var(--muted,#6a6f7e) !important;line-height:1.6 !important;margin:var(--u4,20px) 0 0 !important;
  padding-top:var(--u3,12px);border-top:1px solid rgba(120,100,50,.18)}

.odev-orijinal{margin:var(--u8,64px) 0 0;max-width:74ch}
.odev-orijinal h2{font-family:var(--font-d,inherit);font-size:var(--t-h2,1.7rem);font-weight:800;
  margin:0 0 var(--u2,8px);color:var(--ink,#141633)}
.odev-orijinal>p{color:var(--ink-2,#3a3f55);margin:0 0 var(--u4,20px)}
.odev-orijinal figure{margin:0}
.odev-orijinal img{display:block;width:100%;height:auto;border-radius:6px;
  box-shadow:0 1px 2px rgba(60,50,20,.14),0 14px 34px -12px rgba(60,50,20,.34)}
.odev-orijinal figcaption{margin-top:var(--u3,12px);font-size:var(--t-sm,.86rem);color:var(--muted,#6a6f7e)}

.odev-alt-gezinti{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;
  margin:var(--u8,64px) 0 0;padding-top:var(--u4,20px);border-top:var(--kenar,1px solid rgba(20,22,51,.14))}
.odev-alt-gezinti a{font-weight:700;text-decoration:none;color:var(--cobalt,#2140f0)}
.odev-alt-gezinti a:hover{text-decoration:underline;text-underline-offset:3px}

/* ===========================================================================
   ÖDEVLER LİSTESİ (hub)
   =========================================================================== */
.odev-ust-hub{max-width:70ch}
.odev-liste{display:grid;gap:var(--u5,28px);grid-template-columns:minmax(0,1fr);margin:0 0 var(--u8,64px)}
@media (min-width:760px){.odev-liste{grid-template-columns:repeat(auto-fill,minmax(340px,1fr))}}

.odev-kart{display:flex;flex-direction:column;text-decoration:none;color:inherit;overflow:hidden;
  background:var(--paper,#fff);border:var(--kenar,1px solid rgba(20,22,51,.14));border-radius:var(--r-lg,18px);
  box-shadow:var(--e1,0 1px 2px rgba(20,22,51,.08));
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.odev-kart:hover{transform:translateY(-3px);box-shadow:var(--e2,0 10px 28px -10px rgba(20,22,51,.30));
  border-color:rgba(20,22,51,.24)}
/* Kapak: ödevin gerçek el yazısının üst kısmı — uydurma illüstrasyon değil */
.odev-kart-gorsel{height:170px;overflow:hidden;background:#FFFEEA;border-bottom:1px solid rgba(120,100,50,.18)}
.odev-kart-gorsel img{display:block;width:100%;height:auto}
.odev-kart-govde{padding:var(--u4,20px)}
.odev-kart-kunye{font-size:var(--t-sm,.86rem);color:var(--muted,#6a6f7e);margin:0 0 6px}
.odev-kart h2{font-family:var(--font-d,inherit);font-size:1.22rem;font-weight:800;letter-spacing:-.01em;
  margin:0 0 8px;color:var(--ink,#141633)}
.odev-kart-ozet{font-size:calc(var(--t-md,1rem) * .94);line-height:1.65;color:var(--ink-2,#3a3f55);margin:0 0 var(--u3,12px)}
.odev-kart .odev-rozet{margin:0}

.odev-tanitim{max-width:74ch}
.odev-tanitim h2{font-family:var(--font-d,inherit);font-size:var(--t-h2,1.7rem);font-weight:800;
  margin:0 0 var(--u3,12px);color:var(--ink,#141633)}
.odev-tanitim p{font-size:var(--t-md,1rem);line-height:1.78;color:var(--ink-2,#3a3f55);margin:0 0 var(--u3,12px)}
.odev-tanitim a{color:var(--cobalt,#2140f0);text-decoration:underline;text-underline-offset:3px}

/* ===========================================================================
   HAREKETİ AZALT: animasyon tamamen kapanır, her şey yerinde durur.
   Sayfanın metinleri zaten aşağıda tam hâliyle duruyor.
   =========================================================================== */
/* "Hareketi azalt" açıkken gösterim KENDİLİĞİNDEN başlamaz; şiir düz metin gibi
   durur. Ama ziyaretçi Başlat'a basarsa .hareketli sınıfı gelir ve animasyon
   normal çalışır — bu yüzden buradaki kurallar .hareketli'ye kapalıdır.
   (10 Eyl 2026: eskiden kumanda da gizleniyordu, Başlat'a basmak bile mümkün
   değildi; Tahsin'in "animasyon yok" dediği durum buydu.) */
@media (prefers-reduced-motion:reduce){
  .odev-sayfa:not(.hareketli) .hrf{opacity:1 !important;filter:none !important;transform:none !important;transition:none !important}
  .odev-sayfa:not(.hareketli) .odev-kaynak,
  .odev-sayfa:not(.hareketli) .odev-ayrac{opacity:1 !important}
  .odev-sayfa:not(.hareketli) .satb-pencere{width:100% !important}
  .odev-sayfa:not(.hareketli) .odev-kalem{display:none}
  .odev-sayfa:not(.hareketli) .odev-govde{height:auto;overflow:visible}
  .odev-kart,.odev-dugme{transition:none}
}
/* Ses künyesi: seslerin kime ait olduğu ve müziğin lisansı */
.odev-ses-kunye{margin:6px 0 0;font-size:.78rem;line-height:1.5;opacity:.6}
/* Hareket kapalıyken çıkan küçük uyarı (JS gösterir) */
.odev-azalt-not{display:none;margin-top:8px;font-size:.9rem;opacity:.75;line-height:1.45}
.odev-azalt-not.gor{display:block}