/* ==========================================================================
   TheWhiteRussian · «Defter» katmanı — giriş sonrası sayfalar (2026-10-13)

   Ana ekranın dili (çizgili yaprak, tükenmez mavi, öğretmenin kırmızı kalemi,
   yaşayan Rusça) giriş sonrası her sayfaya taşınır. Ana ekran bu dosyayı
   YÜKLEMEZ (`home.html` → `desk_styles` boş); her kural `body.desk` altında.

   Nesneler:
   - ödev   → defter yaprağı (öğrencinin sınıf sayfası);
   - teslim → mürekkep mührü «СДАНО» (makbuz);
   - not    → kırmızı kalemle daire içine alınmış sayı (sonuç, teslim tablosu).
   Mavi mürekkep öğrencinin, kırmızı kalem öğretmenindir (renk kuralı değişmez).

   Hareket yalnız `transform`, `opacity`, `mask` ve kayıtlı özelliklerle; hepsi
   `prefers-reduced-motion: no-preference` içinde ya da classroom.css'teki küresel
   azaltma kuralıyla son hâline atlar. `position: fixed/sticky` taşıyan bir atanın
   üstüne transform KONMAZ (bulmaca dokunu, düzeltme penceresi, quiz alt çubuğu).
   ========================================================================== */

@property --sweep { syntax: "<angle>"; inherits: false; initial-value: 360deg; }
@property --pct { syntax: "<percentage>"; inherits: true; initial-value: 0%; }
@property --grade { syntax: "<number>"; inherits: true; initial-value: 0; }

:root {

  --grid-line: rgba(49, 88, 164, .075);   /* «в клетку» kareli defter */
  --rule-faint: color-mix(in srgb, var(--line-blue) 70%, transparent);
  --hand-round: 52% 48% 55% 45% / 46% 54% 48% 52%;   /* elle çizilmiş daire */

  --dur-1: .16s;
  --dur-2: .28s;
  --dur-3: .55s;
  --ease-spring: linear(0, .006, .025 2.8%, .101 6.1%, .539 18.9%, .721 25.3%, .849 31.5%,
                        .937 38.1%, .968 41.8%, .991 45.7%, 1.006 50.1%, 1.015 55%, 1.017 63.9%,
                        1.001 85.5%, 1);
  --ease-stamp: cubic-bezier(.34, 1.56, .64, 1);

  /* Kalem çizgisi (üst menü, sekme): ince, hafif dalgalı */
  --pen-stroke-leaf: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 8' preserveAspectRatio='none'%3E%3Cpath d='M1.5 5.2C17 3.4 33 4.6 50 4c17-.6 32-2.2 48.5.3' fill='none' stroke='%23316b5e' stroke-width='2' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
  --pen-stroke-ink: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 8' preserveAspectRatio='none'%3E%3Cpath d='M1.5 5.2C17 3.4 33 4.6 50 4c17-.6 32-2.2 48.5.3' fill='none' stroke='%233158a4' stroke-width='2' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
  /* Kırmızı tik (biten aşama, teslim edilen ödev) */
  --tick-red: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 22'%3E%3Cpath d='M3 12.5l7 6.5L27 3' fill='none' stroke='%23d2433a' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  /* Yazan kalemin dalgalı satırı (Auto Quiz bekleme) */
  --scribble: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 14'%3E%3Cpath d='M2 9c6-6 9 4 14-1s7-5 11 0 8 3 12-2 9-1 12 3 7 2 11-3 9-2 12 2 8 3 12-2 8-3 11 1 9 4 13-1 7-4 11 0 9 3 14-1' fill='none' stroke='%233158a4' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* ── Kabuk ─────────────────────────────────────────────────────────────── */
body.desk {
  position: relative;
  isolation: isolate;
}
/* Sayfa başının ardında soluk kareli defter dokusu; aşağı doğru kaybolur. */
body.desk::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0 0 auto;
  height: 460px;
  background-image:
    linear-gradient(to right, var(--grid-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px);
  background-size: 24px 24px;
  background-position: center -1px;
  -webkit-mask-image: linear-gradient(to bottom, #000 0, rgba(0, 0, 0, .55) 45%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0, rgba(0, 0, 0, .55) 45%, transparent 100%);
  pointer-events: none;
}
.desk .topbar { border-bottom-color: var(--rule-strong); }

/* Etkin menü öğesi: altına kalemle çekilmiş çizgi */
.desk .topnav a { position: relative; }
.desk .topnav a[aria-current="page"] { background: transparent; color: var(--ink); }
.desk .topnav a[aria-current="page"]::after {
  content: "";
  position: absolute;
  inset: auto 12px 5px;
  height: 7px;
  background: var(--pen-stroke-leaf) center / 100% 100% no-repeat;
  transform-origin: left center;
}
.desk .topnav a:not([aria-current="page"]):hover { background: color-mix(in srgb, var(--studio-mist) 80%, transparent); }

/* Sayfa başı künyesi: geri bağlantısıyla AYNI aile ve boy (alt alta farklı yazı tipi göz yorar —
   kullanıcı 2026-10-13); büyük harf yerine cümle düzeni. Alt çizgi defter satırı. */
.desk .page-head { border-bottom-color: var(--line-blue); }
.desk .page-head .eyebrow,
.desk .form-page .eyebrow {
  margin-bottom: .35rem;
  color: var(--ink-mute);
  font: 400 .875rem/1.4 var(--sans);
  letter-spacing: 0;
  text-transform: lowercase;
}
.desk .page-head .eyebrow::first-letter,
.desk .form-page .eyebrow::first-letter { text-transform: uppercase; }
.desk .page-head h1 { letter-spacing: -.01em; }
/* Ürün adı taşıyan künye (Auto Quiz) büyük harfle kalır */
.page-autoquiz .page-head .eyebrow { text-transform: none; }
.page-autoquiz .page-head .eyebrow::first-letter { text-transform: none; }

/* Geri bağlantısı: ok kalem gibi kayar */
.desk .back { color: var(--ink-mute); }
.desk .back:hover { color: var(--ink); }

/* ── Etiketler: mürekkep mührü ─────────────────────────────────────────── */
/* Seviye rozeti: mono, çift çizgili küçük mühür */
.desk .badge {
  height: 22px;
  padding: 0 7px;
  border: 1.5px solid currentColor;
  border-radius: 4px;
  background: var(--sheet);
  box-shadow: inset 0 0 0 1.5px var(--sheet), inset 0 0 0 2.5px color-mix(in srgb, currentColor 32%, transparent);
  color: var(--accent);
  font: 700 .6875rem/1 var(--mono);
  letter-spacing: .04em;
}
/* Durum: hafif eğik damga; nokta kalır */
.desk :is(.chip.ok, .chip.off, .chip.warn, .status.is-closed) {
  border: 1.5px solid color-mix(in srgb, currentColor 70%, transparent);
  border-radius: 4px;
  background: color-mix(in srgb, currentColor 6%, var(--sheet));
  font-weight: 700;
  letter-spacing: .01em;
  transform: rotate(-1.5deg);
}
.desk .chip:not(.ok, .off, .warn, .dot) { background: var(--sheet); border: 1px solid var(--rule-strong); color: var(--ink-body); }

/* ── Alanlar: odakta altına mürekkep çizgisi akar ──────────────────────── */
.desk :is(input:not([type]), input[type="text"], input[type="email"], input[type="number"], input[type="password"],
          input[type="search"], input[type="url"], input[type="date"]):not([data-grid-cell], [readonly]) {
  background-image: linear-gradient(var(--accent), var(--accent));
  background-size: 0% 2px;
  background-position: 0 100%;
  background-repeat: no-repeat;
}
.desk :is(input:not([type]), input[type="text"], input[type="email"], input[type="number"], input[type="password"],
          input[type="search"], input[type="url"], input[type="date"]):not([data-grid-cell], [readonly]):focus {
  background-size: 100% 2px;
}

/* ── Formlar: kâğıt yaprak ────────────────────────────────────────────── */
.desk .form-card:not(.credential) {
  padding: 26px 28px 28px;
  border: 1px solid var(--rule-strong);
  border-radius: 10px;
  background: var(--sheet);
  box-shadow: var(--shadow-sheet), 0 18px 36px -30px rgba(20, 27, 43, .35);
}
.desk .create-head { margin-bottom: 18px; }
@media (max-width: 640px) {
  .desk .form-card:not(.credential) { padding: 20px 16px 22px; }
}

/* ── Kırmızı kalem dairesi (bileşen) ───────────────────────────────────── */
/* Öğretmenin verdiği not: serif italik kırmızı, kendini çizen elle daire */
.desk .cell-score strong,
.desk .paper-score strong {
  position: relative;
  display: inline-block;
  color: var(--red);
  font-family: var(--serif);
  font-style: italic;
  font-weight: 700;
}
.desk .cell-score strong { padding: 0 .3em; font-size: 1.125rem; }
.desk .cell-score strong::after,
.desk .paper-score strong::after {
  content: "";
  position: absolute;
  inset: -.32em -.3em -.26em -.36em;
  border: 1.6px solid var(--red);
  border-radius: var(--hand-round);
  transform: rotate(-5deg);
  -webkit-mask: conic-gradient(from -50deg, #000 var(--sweep, 360deg), transparent 0);
  mask: conic-gradient(from -50deg, #000 var(--sweep, 360deg), transparent 0);
  pointer-events: none;
}

/* ── Giriş koreografisi ve sayfa geçişi ────────────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
  /* Belgeler arası geçiş: üst çubuk yerinde kalır, içerik kısa bir çapraz geçişle değişir. */
  @view-transition { navigation: auto; }
  .desk .topbar { view-transition-name: desk-topbar; }
  ::view-transition-old(root) { animation: desk-fade-out .16s var(--ease) both; }
  ::view-transition-new(root) { animation: desk-fade-in .26s var(--ease) both; }

  /* Yaprak bileşenler 40 ms aralıkla süzülür (ilk 8'i); bitince transform kalkar. */
  .desk :is(.list > .row, .assignment-list > .row, .student-roster > .roster-row, .q-list > .q-card,
            .quiz-questions > .quiz-question, .games-choice > .games-card, .quiz-review > .qr,
            .essay-entries > .essay-entry, .autoquiz-progress li) {
    animation: desk-rise .35s var(--ease) backwards;
  }
  .desk :is(.list, .assignment-list, .student-roster, .q-list, .quiz-questions, .games-choice, .quiz-review,
            .essay-entries, .autoquiz-progress ol) > :nth-child(2) { animation-delay: .04s; }
  .desk :is(.list, .assignment-list, .student-roster, .q-list, .quiz-questions, .games-choice, .quiz-review,
            .essay-entries, .autoquiz-progress ol) > :nth-child(3) { animation-delay: .08s; }
  .desk :is(.list, .assignment-list, .student-roster, .q-list, .quiz-questions, .games-choice, .quiz-review,
            .essay-entries, .autoquiz-progress ol) > :nth-child(4) { animation-delay: .12s; }
  .desk :is(.list, .assignment-list, .student-roster, .q-list, .quiz-questions, .games-choice, .quiz-review,
            .essay-entries, .autoquiz-progress ol) > :nth-child(5) { animation-delay: .16s; }
  .desk :is(.list, .assignment-list, .student-roster, .q-list, .quiz-questions, .games-choice, .quiz-review,
            .essay-entries, .autoquiz-progress ol) > :nth-child(6) { animation-delay: .2s; }
  .desk :is(.list, .assignment-list, .student-roster, .q-list, .quiz-questions, .games-choice, .quiz-review,
            .essay-entries, .autoquiz-progress ol) > :nth-child(7) { animation-delay: .24s; }
  .desk :is(.list, .assignment-list, .student-roster, .q-list, .quiz-questions, .games-choice, .quiz-review,
            .essay-entries, .autoquiz-progress ol) > :nth-child(n+8) { animation-delay: .28s; }

  .desk .topnav a[aria-current="page"]::after { animation: desk-pen-line .5s var(--ease) .15s backwards; }
  .desk :is(input:not([type]), input[type="text"], input[type="email"], input[type="number"], input[type="password"],
            input[type="search"], input[type="url"], input[type="date"]):not([data-grid-cell], [readonly]) {
    transition: border-color .2s var(--ease), box-shadow .2s var(--ease), background-color .2s var(--ease),
                background-size .45s var(--ease);
  }
  .desk :is(.cell-score, .paper-score) strong::after { animation: desk-ring .7s var(--ease) .3s both; }
}

@keyframes desk-fade-out { to { opacity: 0; } }
@keyframes desk-fade-in { from { opacity: 0; } }
@keyframes desk-rise { from { opacity: 0; transform: translateY(4px); } }
@keyframes desk-pen-line { from { transform: scaleX(0); } }
@keyframes desk-ring { from { --sweep: 0deg; } to { --sweep: 360deg; } }
@keyframes desk-grow-pct { from { --pct: 0%; } }
@keyframes desk-grow-grade { from { --grade: 0; } }
@keyframes desk-tick { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes desk-pop { 0% { transform: scale(.6); } 100% { transform: scale(1); } }

/* ── Öğretmen · Sınıflar: sade liste (kapak görseli kullanıcı isteğiyle kaldırıldı, 2026-10-13) ── */
.page-dashboard .list {
  border: 1px solid var(--rule-strong);
  border-radius: 8px;
  box-shadow: var(--shadow-sheet);
  overflow: clip;
}
.page-dashboard .list > .row { padding: 20px 22px; }
.page-dashboard .row-title { font-size: 1.0625rem; }
.page-dashboard .row-meta { margin-top: 4px; }

/* ── Öğretmen · Sınıf yönetimi: sınıf defteri yaprağı ──────────────────── */
.page-manage-room .assignment-list,
.page-room .list:not(.games-entry .list) {
  position: relative;
  border: 1px solid var(--rule-strong);
  border-radius: 8px;
  box-shadow: var(--shadow-sheet);
  overflow: clip;
}
.page-manage-room .assignment-list {
  background:
    linear-gradient(to right, transparent 47px, var(--margin-red) 47px 48px, transparent 48px),
    var(--sheet);
}
.page-manage-room .assignment-list > .row { padding-left: 64px; }
.page-manage-room .assignment-list > .row--link::before { left: 47px; background: var(--red); }
/* Notları açıklanmış ödev: payda öğretmenin kırmızı tiki */
.page-manage-room .assignment-list > .row:has(.chip.ok)::after {
  content: "";
  position: absolute;
  top: 22px;
  left: 12px;
  width: 24px;
  height: 18px;
  background: var(--tick-red) center / contain no-repeat;
}

/* Tür seçici: etkin sekmenin altına kalem çizgisi */
.desk .kind-switch a { position: relative; }
.desk .kind-switch a[aria-current="page"]::after {
  content: "";
  position: absolute;
  inset: auto 14% 4px;
  height: 7px;
  background: var(--pen-stroke-leaf) center / 100% 100% no-repeat;
  transform-origin: left center;
}

/* «Yeni ödev» paneli ve öbür açılırlar yumuşak açılır (destekleyen tarayıcıda). */
@media (prefers-reduced-motion: no-preference) {
  @supports (interpolate-size: allow-keywords) {
    .desk { interpolate-size: allow-keywords; }
    .desk :is(.assignment-create, .teacher-note, .essay-entry, .roster-code, .autoquiz-request-edit, .cloze-note)::details-content {
      height: 0;
      overflow: clip;
      transition: height .38s var(--ease), content-visibility .38s allow-discrete;
    }
    .desk :is(.assignment-create, .teacher-note, .essay-entry, .roster-code, .autoquiz-request-edit, .cloze-note)[open]::details-content {
      height: auto;
    }
  }
  .desk .kind-switch a[aria-current="page"]::after { animation: desk-pen-line .45s var(--ease) .1s backwards; }
}

/* ── Öğretmen · Teslimler tablosu ──────────────────────────────────────── */
.page-assignment .submissions tbody tr { transition: background-color .15s var(--ease); }
.page-assignment .publish-panel {
  border-color: var(--rule-strong);
  background:
    linear-gradient(to right, transparent 27px, var(--margin-red) 27px 28px, transparent 28px),
    var(--sheet);
  padding-left: 44px;
}

/* ── Öğretmen · Kompozisyon incelemesi ─────────────────────────────────── */
.page-review .rubric-row::after { background-color: var(--sunk); }
.page-review .panel { border-color: var(--rule-strong); box-shadow: var(--shadow-sheet); }
@media (prefers-reduced-motion: no-preference) {
  .page-review .rubric-row { animation: desk-grow-pct 1s var(--ease) .25s backwards; }
  .page-review .rubric-row:nth-child(2) { animation-delay: .35s; }
  .page-review .rubric-row:nth-child(3) { animation-delay: .45s; }
  .page-review .rubric-row:nth-child(n+4) { animation-delay: .55s; }
}

/* ── Öğretmen · Quiz incelemesi: karar anahtarı ────────────────────────── */
.desk .verdict-switch label { transition: color .2s var(--ease), background-color .2s var(--ease); }
@media (prefers-reduced-motion: no-preference) {
  .desk .verdict-switch label:has(input:checked) > span { display: inline-block; animation: desk-pop .3s var(--ease-spring); }
}

/* ── Öğretmen · Öğrenciler ve kod fişleri ──────────────────────────────── */
/* Avatar: mürekkep damlası */
.desk .avatar {
  border-radius: 50% 46% 52% 48% / 48% 52% 46% 54%;
  background: radial-gradient(circle at 34% 30%, #6d8dcf 0, var(--accent-fill) 62%, #1f3b73 100%);
  color: #fff;
  box-shadow: 0 2px 6px -2px rgba(41, 76, 145, .55);
}
/* Kod fişi: solu delikli bilet koçanı */
.desk :is(.roster-code-body, .credential.form-card) {
  position: relative;
  padding-left: 30px;
  border: 1px solid var(--rule-strong);
  border-radius: 8px;
  background:
    linear-gradient(to bottom, var(--rule-strong) 50%, transparent 0) 17px 0 / 1.5px 8px repeat-y,
    var(--sheet);
  -webkit-mask:
    radial-gradient(circle at 0 7px, transparent 4.5px, #000 5px) 0 0 / 10px 14px repeat-y,
    linear-gradient(#000, #000) 10px 0 / calc(100% - 10px) 100% no-repeat;
  mask:
    radial-gradient(circle at 0 7px, transparent 4.5px, #000 5px) 0 0 / 10px 14px repeat-y,
    linear-gradient(#000, #000) 10px 0 / calc(100% - 10px) 100% no-repeat;
}
.desk .credential.form-card { padding-left: 40px; }
.desk .copy-row input[readonly] { font-family: var(--mono); letter-spacing: .02em; }

/* ── Öğretmen · Soru kurucu: numara kırmızı payda ──────────────────────── */
.desk .q-card {
  position: relative;
  padding-left: 66px;
  border-color: var(--rule-strong);
  background:
    linear-gradient(to right, transparent 51px, var(--margin-red) 51px 52px, transparent 52px),
    var(--sheet);
  box-shadow: var(--shadow-sheet);
}
.desk .q-card .q-number {
  position: absolute;
  top: 18px;
  left: 8px;
  width: 36px;
  height: 32px;
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  border-radius: 0;
  background: transparent;
  color: var(--red);
  font: italic 700 1.375rem/1 var(--serif);
}
.desk .q-card .q-number::after { content: "."; }
.desk .q-card:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); }

/* Takvim: seçili gün elle çizilmiş daire içinde */
.desk .deadline-calendar .flatpickr-day.selected,
.desk .deadline-calendar .flatpickr-day.selected:hover {
  position: relative;
  border-color: transparent;
  background: transparent;
  color: var(--accent);
  font-weight: 800;
}
.desk .deadline-calendar .flatpickr-day.selected::after {
  content: "";
  position: absolute;
  inset: 2px 4px;
  border: 1.75px solid var(--accent);
  border-radius: var(--hand-round);
  transform: rotate(-8deg);
  -webkit-mask: conic-gradient(from -60deg, #000 var(--sweep, 360deg), transparent 0);
  mask: conic-gradient(from -60deg, #000 var(--sweep, 360deg), transparent 0);
  pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
  .desk .deadline-calendar .flatpickr-day.selected::after { animation: desk-ring .45s var(--ease) both; }
}

/* ── Öğretmen · Auto Quiz bekleme: yazan kalem ─────────────────────────── */
.desk .autoquiz-progress ol {
  border-left: 0;
  background: linear-gradient(to right, transparent 31px, var(--margin-red) 31px 32px, transparent 32px);
}
.desk .autoquiz-progress li {
  min-height: 48px;
  padding: 12px 12px 12px 48px;
  border-bottom: 1px solid var(--line-blue);
  font-size: 1rem;
}
.desk .autoquiz-progress li::before {
  left: 12px;
  top: 21px;
  width: 8px;
  height: 8px;
  background: var(--rule-strong);
}
.desk .autoquiz-progress li.is-done::before {
  left: 7px;
  top: 15px;
  width: 20px;
  height: 15px;
  border-radius: 0;
  background: var(--tick-red) center / contain no-repeat;
}
.desk .autoquiz-progress li.is-current::before { background: var(--accent); box-shadow: 0 0 0 4px var(--accent-ring); }
.desk .autoquiz-progress li.is-current { color: var(--ink); }
.desk .autoquiz-progress li.is-current::after {
  content: "";
  display: block;
  width: min(240px, 100%);
  height: 14px;
  margin-top: 6px;
  background: var(--scribble) left center / 160px 14px repeat-x;
}
.desk .autoquiz-progress p { color: var(--ink-mute); font: 400 .8125rem/1.4 var(--mono); }
@media (prefers-reduced-motion: no-preference) {
  .desk .autoquiz-progress li.is-done::before { animation: desk-tick .4s var(--ease) both; }
  .desk .autoquiz-progress li.is-current::before { animation: desk-pulse 1.6s ease-in-out infinite; }
  .desk .autoquiz-progress li.is-current::after { animation: desk-write 2.4s cubic-bezier(.45, .05, .55, .95) infinite; }
}
@keyframes desk-write {
  0% { clip-path: inset(0 100% 0 0); }
  70% { clip-path: inset(0 0 0 0); }
  100% { clip-path: inset(0 0 0 100%); }
}
@keyframes desk-pulse { 50% { box-shadow: 0 0 0 7px transparent; } }

/* ── Öğrenci · Sınıf: her ödev bir yaprak ──────────────────────────────── */
.page-room .section > .list:not(.games-entry .list) {
  display: grid;
  gap: 14px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}
.page-room .section:not(.games-entry) .list > .row {
  padding: 20px 64px 20px 22px;
  border: 1px solid var(--rule-strong);
  border-radius: 8px;
  background:
    linear-gradient(to left, transparent 44px, var(--margin-red) 44px 45px, transparent 45px),
    var(--sheet);
  box-shadow: var(--shadow-sheet);
}
.page-room .section:not(.games-entry) .list > .row:last-child { border-bottom: 1px solid var(--rule-strong); }
/* Teslim edilen ödev: payda kırmızı tik */
.page-room .section:not(.games-entry) .list > .row:has(.chip.ok)::after {
  content: "";
  position: absolute;
  top: 20px;
  right: 9px;
  width: 26px;
  height: 20px;
  background: var(--tick-red) center / contain no-repeat;
}
/* Kapanan ödev: tarihin üstüne kırmızı çizgi */
.page-room .row:has(.status.is-closed) .row-meta {
  text-decoration: line-through;
  text-decoration-color: var(--red);
  text-decoration-thickness: 1.5px;
}
/* Oyun girişi: sade sis zemini (kayan sözcük şeridi kullanıcı isteğiyle kaldırıldı, 2026-10-13) */
.page-room .games-entry .list {
  border: 1px solid var(--rule);
  border-radius: 8px;
  background: var(--studio-mist);
  overflow: clip;
}
@media (prefers-reduced-motion: no-preference) {
  .page-room .section:not(.games-entry) .list > .row:has(.chip.ok)::after { animation: desk-tick .45s var(--ease) .45s both; }
}

/* ── Öğrenci · Kompozisyon: bantlı ödev fişi, yazarken kalkan yaprak ───── */
.page-editor .brief {
  position: relative;
  margin-top: 14px;
  border-color: var(--rule-strong);
  box-shadow: var(--shadow-sheet);
}
.page-editor .brief::before {
  content: "";
  position: absolute;
  top: -11px;
  left: 50%;
  width: 104px;
  height: 22px;
  background: rgba(199, 213, 236, .62);
  box-shadow: 0 1px 1px rgba(20, 27, 43, .05);
  transform: translateX(-50%) rotate(-2.5deg);
  -webkit-mask: conic-gradient(from -45deg at left, transparent 90deg, #000 0) left / 51% 6px repeat-y,
                conic-gradient(from 135deg at right, transparent 90deg, #000 0) right / 51% 6px repeat-y;
  mask: conic-gradient(from -45deg at left, transparent 90deg, #000 0) left / 51% 6px repeat-y,
        conic-gradient(from 135deg at right, transparent 90deg, #000 0) right / 51% 6px repeat-y;
}
.page-editor #composition-body { transition: box-shadow .3s var(--ease), border-color .3s var(--ease); }
.page-editor #composition-body:focus { box-shadow: var(--shadow-raise); }
.page-editor .composition-form { --word-progress: 0; }
.page-editor .editor-meta { position: relative; padding-top: 10px; }
.page-editor .editor-meta::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  border-radius: 2px;
  background: var(--accent);
  transform: scaleX(var(--word-progress));
  transform-origin: left center;
  transition: transform .5s var(--ease-spring), background-color .3s var(--ease);
}
.page-editor .composition-form.is-word-goal .editor-meta::before { background: var(--studio-leaf); }

/* ── Öğrenci · Quiz ────────────────────────────────────────────────────── */
/* Soru numarası payda, sağında kırmızı pay çizgisi */
.page-quiz .quiz-questions {
  background: linear-gradient(to right, transparent 43px, var(--margin-red) 43px 44px, transparent 44px);
}
.page-quiz .quiz-question { padding-left: 60px; }
.page-quiz .quiz-question::before {
  background: transparent;
  color: var(--ink-mute);
  font: italic 700 1.0625rem/1 var(--serif);
}
.page-quiz .quiz-question.is-answered::before {
  border-radius: var(--hand-round);
  background: var(--accent-fill);
  color: #fff;
}
/* Seçilen şıkkın harfi: mavi mürekkeple daire içine alınır (öğrencinin kalemi) */
.page-quiz .quiz-option::before { background: transparent; border: 1px solid var(--rule-strong); font-family: var(--sans); }
.page-quiz .quiz-option:has(input:checked) { border-color: color-mix(in srgb, var(--accent) 55%, transparent); background: var(--accent-wash); }
.page-quiz .quiz-option:has(input:checked)::before { border-color: transparent; background: transparent; color: var(--accent-fill); font-weight: 800; }
.page-quiz .quiz-option::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 9px;
  width: 38px;
  height: 34px;
  border: 1.8px solid var(--accent-fill);
  border-radius: var(--hand-round);
  transform: translateY(-50%) rotate(-10deg);
  opacity: 0;
  -webkit-mask: conic-gradient(from -70deg, #000 var(--sweep, 360deg), transparent 0);
  mask: conic-gradient(from -70deg, #000 var(--sweep, 360deg), transparent 0);
  pointer-events: none;
}
.page-quiz .quiz-option:has(input:checked)::after { opacity: 1; }
/* Alt çubuk: üst kenarında cevaplanan oran mürekkeple dolar */
.page-quiz .quiz-form { --quiz-progress: 0; }
.page-quiz .quiz-footer::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--accent);
  transform: scaleX(var(--quiz-progress));
  transform-origin: left center;
  transition: transform .5s var(--ease-spring);
}
@media (prefers-reduced-motion: no-preference) {
  .page-quiz .quiz-option:has(input:checked)::after { animation: desk-ring .42s var(--ease) both; }
  .page-quiz .quiz-question.is-answered::before { animation: desk-pop .35s var(--ease-spring); }
}

/* ── Öğrenci · Makbuz: «СДАНО» mührü ───────────────────────────────────── */
.page-receipt .receipt { position: relative; border-color: var(--rule-strong); }
.page-receipt .receipt-seal:not(.receipt-seal--lock) {
  display: inline-flex;
  gap: 8px;
  width: auto;
  height: auto;
  margin-bottom: 22px;
  padding: 10px 18px 10px 14px;
  border: 2.5px solid var(--accent-fill);
  border-radius: 6px;
  background: transparent;
  box-shadow: inset 0 0 0 2px var(--sheet), inset 0 0 0 3.5px var(--accent-fill);
  color: var(--accent-fill);
  transform: rotate(-7deg);
}
.page-receipt .receipt-seal:not(.receipt-seal--lock)::before {
  content: "Сдано" / "";
  font: 700 1.75rem/1 var(--serif);
  letter-spacing: .14em;
  text-transform: uppercase;
}
.page-receipt .receipt-seal:not(.receipt-seal--lock) .icon { width: 26px; height: 26px; stroke-width: 2.6; }
@media (prefers-reduced-motion: no-preference) {
  .page-receipt .receipt-seal:not(.receipt-seal--lock) { animation: desk-stamp .45s var(--ease) .15s both; }
  .page-receipt .receipt-seal:not(.receipt-seal--lock) .icon path {
    stroke-dasharray: 24;
    animation: desk-draw .3s var(--ease) .55s both;
  }
}
@keyframes desk-stamp {
  0% { opacity: 0; transform: scale(1.3) rotate(-11deg); }
  60% { opacity: 1; transform: scale(.98) rotate(-6.5deg); }
  100% { opacity: 1; transform: scale(1) rotate(-7deg); }
}
@keyframes desk-draw { from { stroke-dashoffset: 24; } to { stroke-dashoffset: 0; } }

/* ── Öğrenci + öğretmen · Sonuçlar ─────────────────────────────────────── */
.desk .paper-score { display: flex; align-items: baseline; gap: 4px; }
.desk .paper-score strong { margin: 0 .2em 0 .5em; font-size: 2.125rem; line-height: 1; }
.desk .paper-score strong::after { inset: -.2em -.24em -.14em -.3em; border-width: 2px; }
.desk .grade-bar { height: 5px; background: var(--rule); }
.desk .grade-bar span { background: var(--accent-fill); }
@media (prefers-reduced-motion: no-preference) {
  .desk .grade-bar span { animation: desk-grow-grade 1s var(--ease) .3s backwards; }
}

/* ── Onay penceresi: kâğıt fişi ────────────────────────────────────────── */
.desk .confirm-dialog {
  background:
    linear-gradient(to right, transparent 23px, var(--margin-red) 23px 24px, transparent 24px),
    var(--sheet);
}

/* ── Oyunlar: çerçeve uyumu ────────────────────────────────────────────── */
.page-games .games-card { transition: transform .35s var(--ease-spring), box-shadow .3s var(--ease), border-color .2s var(--ease); }

/* ── Dar ekran ─────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .page-dashboard .list > .row { padding: 18px 16px; }
  .page-manage-room .assignment-list { background: linear-gradient(to right, transparent 35px, var(--margin-red) 35px 36px, transparent 36px), var(--sheet); }
  .page-manage-room .assignment-list > .row { padding-left: 50px; }
  .page-manage-room .assignment-list > .row:has(.chip.ok)::after { left: 7px; width: 20px; height: 15px; }
  .page-manage-room .assignment-list > .row--link::before { left: 35px; }
  .page-room .section:not(.games-entry) .list > .row {
    padding: 18px 46px 18px 16px;
    background: linear-gradient(to left, transparent 32px, var(--margin-red) 32px 33px, transparent 33px), var(--sheet);
  }
  .page-room .section:not(.games-entry) .list > .row:has(.chip.ok)::after { right: 4px; width: 22px; height: 17px; }
  .page-quiz .quiz-questions { background: linear-gradient(to right, transparent 37px, var(--margin-red) 37px 38px, transparent 38px); }
  .page-quiz .quiz-question { padding-left: 50px; }
  .desk .q-card { padding-left: 54px; background: linear-gradient(to right, transparent 41px, var(--margin-red) 41px 42px, transparent 42px), var(--sheet); }
  .desk .q-card .q-number { left: 2px; font-size: 1.1875rem; }
  .desk .paper-score strong { font-size: 1.75rem; }
}