/* =====================================================================
   LearnVocab · Defter teması (rapor 18.12). Bütün sayfalar bunu yükler
   (base/layout.html). Örnek tasarımlar: ozetler/tasarim-ornekleri/defter/.

   Kurallar:
   - El yazısı (Caveat, .lv-el) yalnızca süs ve kısa notlar içindir: tarih,
     kenar notu, ok. Asıl bilgi (anlam, tanım, düğme) hep düz yazıdır.
   - Renkler: kâğıt, mürekkep mavisi, sarı fosforlu kalem, öğretmen kırmızısı.
   - Koyu tema html.dark ile çalışır (Tailwind darkMode: 'class').
   - Tailwind'in indigo/gray/slate renkleri layout.html'deki ayarla bu
     paletlere bağlıdır; eski sınıflar da kendiliğinden defter renginde görünür.
   ===================================================================== */
:root {
  --kagit: #fbfaf5; --kagit-beyaz: #ffffff; --kare: rgba(66, 110, 190, .12); --satir: rgba(66, 110, 190, .22);
  --kenar: #e7a3a3; --murekkep: #1d3f8f; --murekkep-acik: #e9eefb; --yazi: #1b1d22; --soluk: #5f6470;
  --kalem: #ffe46b; --kirmizi: #c73a2b; --yesil: #1f7a4c; --yesil-acik: #e3f3ea; --kirmizi-acik: #fbe7e3;
  --not: #fff1a8; --not-mavi: #d9ecff; --not-pembe: #ffd9e1; --bant: rgba(255, 255, 255, .6);
  --golge: 0 1px 1px rgba(0, 0, 0, .06), 0 12px 18px -12px rgba(0, 0, 0, .28);
  --dalga: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 8' preserveAspectRatio='none'%3E%3Cpath d='M2 5c15-4 30 2 48-1s32 2 48-1' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round'/%3E%3C/svg%3E");
  --daire: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 30' preserveAspectRatio='none'%3E%3Cpath d='M8 17C5 7 30 2 48 5c12 2 12 15 0 20-14 5-38 4-42-6C4 12 14 6 22 6' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
  --el: 'Caveat', cursive; --serif: 'Fraunces', Georgia, serif; --metin: 'Source Serif 4', Georgia, serif;
  --govde: 'Inter', ui-sans-serif, system-ui, sans-serif; --yuvarlak: 'Fredoka', 'Nunito', ui-rounded, system-ui, sans-serif;
}
html.dark {
  --kagit: #16181d; --kagit-beyaz: #1d2027; --kare: rgba(130, 160, 230, .08); --satir: rgba(130, 160, 230, .16);
  --kenar: #6b3434; --murekkep: #9db8ff; --murekkep-acik: #1f2a44; --yazi: #e9e8e2; --soluk: #a3a7b0;
  --kalem: #6b5a10; --kirmizi: #ff8a78; --yesil: #6fd6a0; --yesil-acik: #13291f; --kirmizi-acik: #31170f;
  --not: #4a4314; --not-mavi: #1c3550; --not-pembe: #4a2230; --bant: rgba(255, 255, 255, .12);
  --golge: 0 12px 18px -12px rgba(0, 0, 0, .7);
}

/* ---------- Kâğıt ---------- */
/* Yazılar biraz büyük (rapor 18.12: önemli bilgi küçük yazılmaz): kök 17 px,
   Tailwind'in rem ölçüleri (text-sm, text-xs, boşluklar) birlikte büyür. */
html { font-size: 106.25%; }
html {
  background-color: var(--kagit);
  background-image: linear-gradient(var(--kare) 1px, transparent 1px), linear-gradient(90deg, var(--kare) 1px, transparent 1px);
  background-size: 24px 24px;
}
body.lv-kagit { background: transparent; color: var(--yazi); font-family: var(--govde); -webkit-font-smoothing: antialiased; }
/* Kırmızı kenar çizgisi: yalnızca geniş ekranda, içerik sütununun solunda */
@media (min-width: 1024px) {
  body.lv-kagit::before { content: ""; position: fixed; top: 0; bottom: 0; left: calc(50% - 26rem); width: 2px; background: var(--kenar); opacity: .6; z-index: 0; pointer-events: none; }
}
main { position: relative; z-index: 1; }

/* ---------- Yazı ---------- */
.lv-el { font-family: var(--el); color: var(--murekkep); }
.lv-serif { font-family: var(--serif); }
.lv-metin { font-family: var(--metin); }
.lv-yuvarlak { font-family: var(--yuvarlak); }
.lv-soluk { color: var(--soluk); }
.lv-isaret { background: linear-gradient(104deg, transparent 1%, var(--kalem) 3%, var(--kalem) 95%, transparent 98%) 0 62% / 100% 50% no-repeat; padding: 0 3px; }
.lv-tarih { display: block; font: 600 26px var(--el); color: var(--murekkep); transform: rotate(-1.5deg); transform-origin: left; }
.lv-baslik { font: 900 44px/1.02 var(--serif); letter-spacing: -.035em; margin: 0; }
.lv-alt-baslik { display: inline-block; font: 600 28px/1.15 var(--el); color: var(--murekkep); transform: rotate(-1deg); }
.lv-bolum { font: 900 32px/1.05 var(--serif); letter-spacing: -.03em; margin: 0; }
.lv-bolum-notu { display: inline-block; font: 600 23px/1.2 var(--el); color: var(--murekkep); transform: rotate(-1deg); }
.lv-sayfa-basligi { font: 900 32px/1.05 var(--serif); letter-spacing: -.03em; }
@media (min-width: 700px) {
  .lv-baslik { font-size: 72px; } .lv-bolum { font-size: 44px; } .lv-tarih { font-size: 30px; }
  .lv-alt-baslik { font-size: 34px; } .lv-sayfa-basligi { font-size: 40px; }
}

/* ---------- Düğmeler ---------- */
.lv-dugme { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 0 24px;
  background: var(--murekkep); color: var(--kagit); font: 600 17px var(--govde); border-radius: 3px; box-shadow: 4px 4px 0 var(--kalem);
  text-decoration: none; transition: transform .1s, box-shadow .1s; cursor: pointer; border: 0; }
.lv-dugme:hover { transform: translate(-1px, -1px); box-shadow: 5px 5px 0 var(--kalem); }
.lv-dugme:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--kalem); }
.lv-dugme.lv-ikincil { background: var(--kagit-beyaz); color: var(--murekkep); border: 1.5px solid var(--murekkep); box-shadow: 4px 4px 0 var(--murekkep-acik); }
.lv-dugme.lv-kucuk { min-height: 42px; padding: 0 16px; font-size: 15px; }
.lv-el-bag { font: 700 24px var(--el); color: var(--murekkep); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; }

/* ---------- Kâğıt parçaları ---------- */
.lv-not { background: var(--not); padding: 26px 22px 22px; position: relative; transform: rotate(-1.5deg); box-shadow: var(--golge); }
.lv-not.lv-mavi { background: var(--not-mavi); transform: rotate(1.2deg); }
.lv-not.lv-pembe { background: var(--not-pembe); transform: rotate(-1deg); }
.lv-not.lv-duz { transform: none; }
.lv-bantli::before { content: ""; position: absolute; top: -12px; left: 50%; width: 90px; height: 24px; margin-left: -45px; background: var(--bant); transform: rotate(3deg); border: 1px solid rgba(0, 0, 0, .05); pointer-events: none; }
.lv-kupur { background: var(--kagit-beyaz); padding: 18px 18px 22px; position: relative; box-shadow: var(--golge);
  clip-path: polygon(0 2%, 6% 0, 14% 2%, 22% 0, 31% 1%, 40% 0, 50% 2%, 60% 0, 70% 1%, 80% 0, 90% 2%, 100% 0, 100% 98%, 93% 100%, 84% 98%, 75% 100%, 65% 98%, 55% 100%, 45% 98%, 35% 100%, 25% 98%, 15% 100%, 6% 98%, 0 100%); }
.lv-sayfa { background: var(--kagit-beyaz); box-shadow: var(--golge); position: relative; }
.lv-fis { background: var(--kagit-beyaz); border-radius: 6px; box-shadow: var(--golge); position: relative;
  background-image: linear-gradient(var(--kirmizi), var(--kirmizi)), repeating-linear-gradient(transparent 0 31px, var(--satir) 31px 32px);
  background-size: 100% 2px, 100% 100%; background-position: 0 54px, 0 56px; background-repeat: no-repeat, no-repeat; }

/* ---------- Kenar notu ---------- */
.lv-kenar-notu { font: 600 22px/1.15 var(--el); color: var(--murekkep); transform: rotate(-2deg); display: flex; gap: 8px; align-items: flex-start; }
.lv-kenar-notu svg { flex: none; width: 46px; height: 30px; margin-top: -4px; }

/* ---------- Seviye: el ile çizilmiş daire ---------- */
/* Az kullanılan kelime (Word.az_kullanilan): seviye rozeti yerine el yazısıyla not */
.lv-az { display: inline-block; font: 600 20px/1 var(--el); color: var(--soluk); transform: rotate(-2deg); white-space: nowrap; }
.lv-seviye { position: relative; display: inline-grid; place-items: center; min-width: 40px; height: 30px; padding: 0 6px; font: 700 14px var(--govde); color: var(--murekkep); flex: none; }
.lv-seviye::before { content: ""; position: absolute; inset: 0; background: var(--murekkep); -webkit-mask: var(--daire) center/100% 100% no-repeat; mask: var(--daire) center/100% 100% no-repeat; }

/* ---------- Arama satırı ---------- */
.lv-arama { display: flex; align-items: center; gap: 10px; border-bottom: 2px solid var(--murekkep); padding: 6px 0; }
.lv-arama svg { width: 20px; height: 20px; color: var(--murekkep); flex: none; }
.lv-arama input { flex: 1; min-width: 0; border: 0; outline: none; background: transparent; font: 600 20px var(--govde); color: var(--yazi); padding: 4px 0; box-shadow: none; }
.lv-arama input::placeholder { color: var(--soluk); font-weight: 400; }

/* ---------- Üst çubuk ve alt menü ---------- */
.lv-ust { background: color-mix(in srgb, var(--kagit) 92%, transparent); border-bottom: 1.5px solid var(--satir); }
.lv-logo { font: 900 21px var(--serif); letter-spacing: -.02em; color: var(--yazi); }
.lv-logo span { background: linear-gradient(transparent 55%, var(--kalem) 55%); }
.lv-menu-bag { position: relative; color: var(--soluk); font-weight: 600; }
.lv-menu-bag:hover { color: var(--yazi); }
.lv-menu-bag[aria-current="page"] { color: var(--yazi); }
.lv-menu-bag[aria-current="page"]::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: 0; height: 8px; background: var(--murekkep);
  -webkit-mask: var(--dalga) center/100% 100% no-repeat; mask: var(--dalga) center/100% 100% no-repeat; }
/* Alt menü (20 Ekim): yüzen yuvarlak çubuk, açık sekmenin arkasında kayan kapsül (base/_mobileTabBar.html) */
.lv-alt-menu { padding: 0 10px max(8px, calc(env(safe-area-inset-bottom) - 10px)); pointer-events: none; }
.lv-alt-hap { position: relative; max-width: 480px; margin: 0 auto; padding: 5px; border-radius: 999px; pointer-events: auto;
  background: color-mix(in srgb, var(--kagit-beyaz) 84%, transparent); -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4);
  border: 1.5px solid var(--satir); box-shadow: 0 8px 24px rgba(29, 63, 143, .16), 0 1px 3px rgba(0, 0, 0, .08); }
html.dark .lv-alt-hap { box-shadow: 0 8px 28px rgba(0, 0, 0, .55); }
.lv-alt-kapsul { position: absolute; top: 5px; bottom: 5px; left: 5px; width: calc((100% - 10px) / 5); border-radius: 999px;
  background: var(--murekkep-acik); border: 1.5px solid color-mix(in srgb, var(--murekkep) 28%, transparent);
  transform: translateX(calc(var(--i, 0) * 100%)); transition: transform .38s cubic-bezier(.33, 1, .68, 1), opacity .2s; }
.lv-alt-kapsul:not([style]) { opacity: 0; }
.lv-alt-bag { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  padding: 6px 2px; color: var(--soluk); -webkit-tap-highlight-color: transparent; transition: color .25s; }
.lv-alt-bag span { font: 600 12px/1.2 var(--govde); letter-spacing: -.01em; text-align: center; white-space: nowrap; }
.lv-alt-bag svg { transition: transform .25s cubic-bezier(.33, 1, .68, 1); }
.lv-alt-bag.lv-secili { color: var(--murekkep); }
.lv-alt-bag.lv-secili span { font-weight: 700; }
.lv-alt-bag.lv-secili svg { transform: scale(1.08); stroke-width: 2.1; }
.lv-alt-bag:active svg { transform: scale(.9); }

/* =====================================================================
   Ana sayfa (pages/index.html)
   ===================================================================== */
/* Katlanan defter tablosu */
.lv-tablo-basliklar { display: grid; grid-template-columns: 38% minmax(0, 1fr); font: 600 24px var(--el); color: var(--murekkep); border-bottom: 2px solid var(--murekkep); padding-bottom: 2px; }
.lv-tablo-basliklar span:last-child { padding-left: 14px; }
.lv-satir { display: grid; grid-template-columns: 38% minmax(0, 1fr); min-height: 76px; border-bottom: 1px solid var(--satir); position: relative; }
.lv-satir-kelime { font: 700 23px/1.2 var(--serif); padding: 14px 10px 14px 0; letter-spacing: -.01em; align-self: start; }
.lv-satir-kelime a { color: var(--yazi); text-decoration: none; }
.lv-satir-kelime small { display: block; font: 500 14px var(--govde); color: var(--soluk); letter-spacing: 0; margin-top: 4px; }
.lv-satir-sag { position: relative; padding: 12px 0 12px 14px; border-left: 1px dashed var(--satir); }
.lv-satir-anlam { font-weight: 700; font-size: 20px; color: var(--murekkep); line-height: 1.25; }
.lv-satir-cumle { font-size: 16px; color: var(--soluk); margin-top: 4px; }
.lv-satir:not(.lv-acik) .lv-satir-anlam, .lv-satir:not(.lv-acik) .lv-satir-cumle { display: none; }
.lv-kat { position: absolute; inset: 4px -4px 4px 0; width: auto; text-align: left; background-color: var(--kagit);
  background-image: linear-gradient(var(--kare) 1px, transparent 1px), linear-gradient(90deg, var(--kare) 1px, transparent 1px); background-size: 24px 24px;
  box-shadow: -6px 0 10px -6px rgba(0, 0, 0, .25); display: flex; align-items: center; padding-left: 16px; border: 0;
  font: 600 22px var(--el); color: var(--soluk); transform-origin: left center; transition: transform .45s cubic-bezier(.3, .7, .2, 1), opacity .45s; cursor: pointer; }
.lv-satir.lv-acik .lv-kat { transform: perspective(600px) rotateY(-80deg); opacity: 0; pointer-events: none; }
.lv-karar { display: none; flex-wrap: wrap; gap: 4px 8px; margin-top: 10px; }
.lv-satir.lv-acik:not(.lv-bitti) .lv-karar { display: flex; }
.lv-karar button { font: 700 22px var(--el); padding: 2px 8px; border-radius: 6px; white-space: nowrap; background: none; border: 0; cursor: pointer; }
.lv-karar [data-evet] { color: var(--yesil); } .lv-karar [data-hayir] { color: var(--kirmizi); }
.lv-karar button:hover { background: var(--kare); }
.lv-w { position: relative; display: inline-block; }
.lv-cizgi { position: absolute; left: -4px; top: 52%; height: 3px; width: 0; background: var(--murekkep); border-radius: 3px; transform: rotate(-3deg); transition: width .4s; }
.lv-satir.lv-biliyor .lv-cizgi { width: calc(100% + 8px); }
.lv-satir.lv-biliyor .lv-satir-kelime a { color: var(--soluk); }
.lv-daire { position: absolute; left: -14px; top: -10px; width: calc(100% + 28px); height: calc(100% + 20px); pointer-events: none; }
.lv-daire path { stroke: var(--kirmizi); stroke-dasharray: 400; stroke-dashoffset: 400; transition: stroke-dashoffset .6s; }
.lv-satir.lv-bilmiyor .lv-daire path { stroke-dashoffset: 0; }
.lv-tekrar-notu { position: absolute; right: 0; bottom: 8px; font: 700 20px var(--el); color: var(--kirmizi); transform: rotate(-4deg); opacity: 0; transition: opacity .3s .3s; }
.lv-satir.lv-bilmiyor .lv-tekrar-notu { opacity: 1; }
@media (max-width: 520px) {
  .lv-satir, .lv-tablo-basliklar { grid-template-columns: 42% minmax(0, 1fr); }
  .lv-satir-kelime { font-size: 20px; } .lv-tekrar-notu { display: none; }
}

/* Seri örneği takvimi */
.lv-takvim { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; text-align: center; }
.lv-takvim b { font-size: 13px; color: var(--soluk); font-weight: 600; }
.lv-takvim span { position: relative; height: 40px; display: grid; place-items: center; font-size: 15px; color: var(--soluk); }
.lv-takvim .lv-tik { color: transparent; }
.lv-takvim .lv-tik::after { content: "✓"; position: absolute; font: 700 30px var(--el); color: var(--murekkep); transform: rotate(-8deg); }
.lv-takvim .lv-bugun { color: var(--yazi); font-weight: 700; }
.lv-takvim .lv-bugun::before { content: ""; position: absolute; inset: 2px 0; background: var(--kirmizi); -webkit-mask: var(--daire) center/100% 100% no-repeat; mask: var(--daire) center/100% 100% no-repeat; }
.lv-takvim .lv-gelecek { opacity: .35; }

/* Defterin yapamadıkları */
.lv-eksikler { list-style: none; padding: 0; margin: 0; counter-reset: s; }
.lv-eksikler > li { counter-increment: s; display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 6px; padding: 22px 0; border-bottom: 1px solid var(--satir); }
.lv-eksikler > li::before { content: counter(s) "."; font: 700 32px/1 var(--el); color: var(--murekkep); }
.lv-eksikler b { font-size: 20px; display: block; }
.lv-eksikler p { margin: 4px 0 0; color: var(--soluk); font-size: 17px; }
.lv-dokun { background: var(--kalem); padding: 0 2px; border-radius: 2px; cursor: pointer; position: relative; font: inherit; color: inherit; border: 0; }
.lv-balon { display: none; position: absolute; left: 0; top: calc(100% + 8px); z-index: 5; background: var(--kagit-beyaz); border: 1.5px solid var(--murekkep);
  padding: 8px 12px; white-space: nowrap; font: 700 16px var(--govde); color: var(--murekkep); box-shadow: 3px 3px 0 var(--murekkep); }
.lv-dokun.lv-acik .lv-balon { display: block; }
.lv-sil { text-decoration-color: var(--kirmizi); text-decoration-thickness: 2px; }
.lv-iyi { text-decoration: underline wavy var(--yesil); text-underline-offset: 5px; }
.lv-ust-not { position: relative; }
.lv-ust-not i { position: absolute; left: 0; top: -1.15em; font: 700 22px var(--el); color: var(--kirmizi); white-space: nowrap; font-style: normal; }

/* Okuma kupürleri */
.lv-kupur { text-decoration: none; }
.lv-kupur-1 { transform: rotate(-1.5deg); } .lv-kupur-2 { transform: rotate(1deg); } .lv-kupur-3 { transform: rotate(-.5deg); }

/* Seviye sekmeleri (Efe, 17 Ekim): basamaklı girinti ve sağa kayma yok; aralarında boşluk,
   blok ortada, üzerine gelince hafifçe yükselir ve ok ilerler. */
.lv-sekmeler { display: grid; gap: 10px; max-width: 640px; margin-inline: auto; }
.lv-sekme { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; align-items: center; gap: 14px; text-decoration: none; padding: 14px 16px;
  border-radius: 10px; transition: transform .15s, filter .15s, box-shadow .15s;
  box-shadow: 0 1px 0 rgba(0, 0, 0, .06), 0 8px 12px -10px rgba(0, 0, 0, .35); }
.lv-sekme:hover { transform: translateY(-3px); filter: brightness(.97);
  box-shadow: 0 1px 0 rgba(0, 0, 0, .06), 0 12px 16px -10px rgba(0, 0, 0, .4); }
.lv-sekme i { transition: transform .15s; }
.lv-sekme:hover i { transform: translateX(4px); }
.lv-sekme b { font: 900 26px var(--serif); color: #1b1d22; }
.lv-sekme span { color: #3a3d45; font-size: 16px; line-height: 1.3; }
.lv-sekme i { font: 700 22px var(--el); color: #1d3f8f; font-style: normal; }
.lv-sekme-1 { background: #ffd9c7; } .lv-sekme-2 { background: #ffe9a8; } .lv-sekme-3 { background: #d8f0c8; }
.lv-sekme-4 { background: #c9ecef; } .lv-sekme-5 { background: #d6dcfa; } .lv-sekme-6 { background: #ecd6f5; }
html.dark .lv-sekme { filter: brightness(.82); }
html.dark .lv-sekme:hover { filter: brightness(.76); }
@media (min-width: 700px) { .lv-sekme { grid-template-columns: 70px minmax(0, 1fr) auto; } }

/* Sık sorulanlar */
.lv-sss { display: grid; gap: 22px; }
@media (min-width: 700px) { .lv-sss { grid-template-columns: 1fr 1fr; gap: 28px 40px; } }
.lv-sss dt { font: 700 25px/1.15 var(--el); color: var(--murekkep); }
.lv-sss dd { margin: 4px 0 0; color: var(--soluk); font-size: 17px; }

/* =====================================================================
   Defter sekmeleri (Sözlük: Keşfet | Listem; diğer sekmeli sayfalar)
   ===================================================================== */
.lv-sekme-cubugu { display: flex; gap: 4px; border-bottom: 2px solid var(--murekkep); }
.lv-sekme-dugme { flex: 1; text-align: center; padding: 11px 16px 9px; font: 600 16px var(--govde); color: var(--soluk); text-decoration: none;
  border: 1.5px solid var(--satir); border-bottom: 0; border-radius: 10px 10px 0 0; background: var(--kagit); margin-bottom: -2px; }
.lv-sekme-dugme:hover { color: var(--yazi); }
.lv-sekme-dugme.lv-secili { background: var(--kagit-beyaz); color: var(--murekkep); border-color: var(--murekkep); border-bottom: 2px solid var(--kagit-beyaz); }
@media (min-width: 640px) { .lv-sekme-dugme { flex: 0 0 auto; min-width: 140px; } }

/* =====================================================================
   Learn & Pass oturumu (pages/learnpass/learnPass.html)
   ===================================================================== */
.lp-hayir, .lp-evet { min-height: 58px; padding: 0 12px; font: 600 17px var(--govde); border-radius: 3px; border: 2px solid; background: var(--kagit-beyaz); cursor: pointer; }
.lp-hayir { color: var(--kirmizi); border-color: var(--kirmizi); box-shadow: 4px 4px 0 var(--kirmizi-acik); }
.lp-evet { color: var(--yesil); border-color: var(--yesil); box-shadow: 4px 4px 0 var(--yesil-acik); }
.lp-hayir:active, .lp-evet:active { transform: translate(2px, 2px); box-shadow: none; }

/* Örnek cümlede kelime: sarı kalem (|isaretle süzgeci) */
mark.lv-vurgu { background: var(--kalem); color: inherit; padding: 0 2px; border-radius: 2px; }

/* Form girdisi: kâğıttaki çizginin üstüne yazmak (giriş, kayıt, şifre) */
.lv-girdi { display: block; width: 100%; border: 0; border-bottom: 2px solid var(--satir); background: transparent; padding: 8px 2px;
  font: 500 18px var(--govde); color: var(--yazi); border-radius: 0; box-shadow: none; }
.lv-girdi:focus { outline: none; border-bottom-color: var(--murekkep); box-shadow: 0 2px 0 var(--murekkep); }
.lv-girdi::placeholder { color: var(--soluk); opacity: .7; font-weight: 400; }
.lv-takvim .lv-buz { color: transparent; }
.lv-takvim .lv-buz::after { content: "❄"; position: absolute; font-size: 20px; color: #3b82c4; }

/* =====================================================================
   Seçim kalıpları (Ayarlar vb.)
   ===================================================================== */
/* El yazısı seçenek; seçilince kalemle daire içine alınır */
.lv-secim { position: relative; display: inline-block; font-family: var(--el); font-weight: 700; color: var(--soluk); padding: 0 10px; }
.lv-secim::before { content: ""; position: absolute; inset: -6px -4px; background: var(--murekkep); opacity: 0;
  -webkit-mask: var(--daire) center/100% 100% no-repeat; mask: var(--daire) center/100% 100% no-repeat; transition: opacity .2s; }
.peer:checked ~ .lv-secim, [aria-checked="true"] .lv-secim { color: var(--murekkep); }
.peer:checked ~ .lv-secim::before, [aria-checked="true"] .lv-secim::before { opacity: 1; }
.peer:focus-visible ~ .lv-secim { text-decoration: underline; }
/* Kalemle çizilmiş kutucuk; işaretlenince tik */
.lv-kutu { position: relative; width: 24px; height: 24px; border: 2px solid var(--murekkep); border-radius: 3px; transform: rotate(-3deg); }
.peer:checked + .lv-kutu::after { content: "✓"; position: absolute; left: 2px; top: -15px; font: 700 34px/1 var(--el); color: var(--murekkep); transform: rotate(-8deg); }
/* Tema örnek kâğıtları */
.lv-tema-kagit { display: block; aspect-ratio: 4/3; border-radius: 4px; box-shadow: var(--golge); border: 1px solid rgba(0,0,0,.08);
  background-size: 12px 12px; transition: transform .15s; }
.lv-tema-light { background-color: #fbfaf5; background-image: linear-gradient(rgba(66,110,190,.15) 1px, transparent 1px), linear-gradient(90deg, rgba(66,110,190,.15) 1px, transparent 1px); }
.lv-tema-dark { background-color: #16181d; background-image: linear-gradient(rgba(130,160,230,.15) 1px, transparent 1px), linear-gradient(90deg, rgba(130,160,230,.15) 1px, transparent 1px); }
.lv-tema-sistem { background: linear-gradient(135deg, #fbfaf5 50%, #16181d 50%); }
.lv-tema-ornek[aria-checked="true"] .lv-tema-kagit { transform: rotate(-2deg) translateY(-3px); outline: 2.5px solid var(--murekkep); outline-offset: 3px; }
/* Kaydırma çubuğu: mürekkep çizgi, sarı kalem tutamak */
.lv-aralik { -webkit-appearance: none; appearance: none; height: 4px; background: var(--murekkep); border-radius: 2px; }
.lv-aralik::-webkit-slider-thumb { -webkit-appearance: none; width: 26px; height: 26px; border-radius: 50%; background: var(--kalem); border: 2.5px solid var(--murekkep); cursor: pointer; }
.lv-aralik::-moz-range-thumb { width: 26px; height: 26px; border-radius: 50%; background: var(--kalem); border: 2.5px solid var(--murekkep); cursor: pointer; }
/* Bağlantı olarak seçenek (Listem filtreleri): seçili olan daire içinde */
.lv-secim-bag { position: relative; display: inline-block; padding: 0 8px; font-family: var(--el); font-weight: 700; color: var(--soluk); text-decoration: none; }
.lv-secim-bag[aria-current]::before { content: ""; position: absolute; inset: -6px -4px; background: var(--murekkep);
  -webkit-mask: var(--daire) center/100% 100% no-repeat; mask: var(--daire) center/100% 100% no-repeat; }
.lv-secim-bag[aria-current] { color: var(--murekkep); }

/* ---------- Kapibara (rapor 18.33; çizim: base/_kapibaraTanim.html) ---------- */
/* Açıkta çizgi defterin mavi mürekkebi. Koyuda koyu kahve kalem; karakter
   defterden kesilmiş çıkartma gibi açık bir kenarla zeminden ayrılır. */
:root {
  --kapi-cizgi: var(--murekkep); --kapi-govde: #c98a55; --kapi-karin: #e6bd8f; --kapi-burun: #8f5636;
  --kapi-agiz: #4a2219; --kapi-dil: #e88b86; --kapi-yanak: #f0a49b; --kapi-dis: #fffdf6;
  --kapi-portakal: #f39a2b; --kapi-yaprak: #6dbb5b; --kapi-sari: #ffe46b; --kapi-sayfa: #ffffff;
}
html.dark { --kapi-cizgi: #3b2519; }
.lv-kapibara { color: var(--kapi-cizgi); overflow: visible; }
html.dark .lv-kapibara {
  filter: drop-shadow(2px 0 0 #efe5d2) drop-shadow(-2px 0 0 #efe5d2) drop-shadow(0 2px 0 #efe5d2)
          drop-shadow(0 -2px 0 #efe5d2) drop-shadow(0 8px 10px rgba(0, 0, 0, .5));
}
.lv-kapi-goz-kapali { opacity: 0; }
.lv-kapibara-kirpar .lv-kapi-goz-acik { animation: lv-kapi-kirp 4.2s infinite; }
.lv-kapibara-kirpar .lv-kapi-goz-kapali { animation: lv-kapi-kirp-tersi 4.2s infinite; }
@keyframes lv-kapi-kirp { 0%, 92%, 100% { opacity: 1; } 94%, 97% { opacity: 0; } }
@keyframes lv-kapi-kirp-tersi { 0%, 92%, 100% { opacity: 0; } 94%, 97% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .lv-kapibara * { animation: none !important; } }

/* ---------- Listem (rapor 5): kelime fişleri ---------- */
/* Her kelime bantla tutturulmuş bir fiş: üstte kelime, altında kırmızı çizgi,
   anlamlar çizgili satırlarda. Bandın rengi ve üzerindeki yazı seviyeyi söyler
   (A yeşil, B1 sarı, B2 mavi, C pembe); yalnızca süs, filtre değil. */
:root { --sv-a: #cdeec0; --sv-b1: #ffe98a; --sv-b2: #c8e2ff; --sv-c: #ffc9d6; --sv-yok: #ece8dc; --sv-yazi: #3b3420; }
html.dark { --sv-a: #2e5a2a; --sv-b1: #6b5d14; --sv-b2: #22466e; --sv-c: #6a2a3e; --sv-yok: #3a3a40; --sv-yazi: #f1ecd8; }
.lv-fisler { display: grid; grid-template-columns: minmax(0, 1fr); gap: 30px 26px; list-style: none; margin: 0; padding: 14px 2px 0; }
@media (min-width: 640px) { .lv-fisler { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.lv-fisler > .lv-tam { grid-column: 1 / -1; }
.lv-kfis { --sv: var(--sv-yok); position: relative; background: var(--kagit-beyaz); border-radius: 4px; box-shadow: var(--golge);
  transform: rotate(-.6deg); transition: transform .18s, box-shadow .18s; }
.lv-kfis:nth-child(2n) { transform: rotate(.7deg); }
.lv-kfis:nth-child(3n) { transform: rotate(-.2deg); }
.lv-kfis:hover { transform: rotate(0) translateY(-3px); box-shadow: 0 1px 1px rgba(0, 0, 0, .06), 0 18px 24px -14px rgba(0, 0, 0, .35); }
.lv-kfis.lv-tam { transform: none; background: transparent; box-shadow: none; }
.lv-kfis[data-sv^="A"] { --sv: var(--sv-a); }
.lv-kfis[data-sv="B1"] { --sv: var(--sv-b1); }
.lv-kfis[data-sv="B2"] { --sv: var(--sv-b2); }
.lv-kfis[data-sv^="C"] { --sv: var(--sv-c); }
/* Bant: fişi deftere tutturur, seviye üzerine el yazısıyla yazılı. */
.lv-kfis-bant { position: absolute; top: -13px; left: 50%; min-width: 64px; height: 24px; padding: 0 10px; transform: translateX(-50%) rotate(-3deg);
  background: var(--sv); opacity: .92; color: var(--sv-yazi); font: 700 19px/24px var(--el); text-align: center;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .12); pointer-events: none; }
.lv-kfis:nth-child(2n) .lv-kfis-bant { transform: translateX(-50%) rotate(2.5deg); }
.lv-kfis-bas { display: flex; align-items: flex-start; gap: 10px; padding: 20px 16px 8px; border-bottom: 2px solid color-mix(in srgb, var(--kirmizi) 55%, transparent); }
.lv-kfis-kelime { font: 800 26px/1.1 var(--serif); letter-spacing: -.02em; color: var(--yazi); overflow-wrap: anywhere; }
.lv-kfis-anlamlar { list-style: none; margin: 0; padding: 4px 16px 12px; line-height: 36px; font-weight: 600; color: var(--murekkep);
  background: repeating-linear-gradient(transparent 0 35px, var(--satir) 35px 36px) 0 4px / 100% 100% no-repeat; }
.lv-kfis-anlamlar > li { min-height: 36px; }
.lv-listem-no { display: inline-grid; place-items: center; width: 22px; height: 22px; margin-right: 6px; border-radius: 50%;
  font: 700 18px/1 var(--el); color: var(--kirmizi); border: 1.5px solid currentColor; vertical-align: 1px; transform: rotate(-6deg); }
/* Kelime sayısı: seçim çubuğunda küçük yapışkan not. */
.lv-listem-sayac { display: inline-block; background: var(--not); padding: 4px 12px 2px; font: 700 24px/1.1 var(--el); color: var(--murekkep);
  transform: rotate(-2deg); box-shadow: var(--golge); }
@media (prefers-reduced-motion: reduce) { .lv-kfis { transition: none; } }

/* ---------- Okuma ekranı (rapor 8): sade defter sayfası ---------- */
/* Sayfanın solunda defterin kırmızı kenar çizgisi; kaldığım yer kurdelesi bu boşlukta durur. */
.lv-okuma-sayfa { padding-left: 34px !important; background-image: linear-gradient(90deg, transparent 21px, color-mix(in srgb, var(--kenar) 80%, transparent) 21px 22.5px, transparent 22.5px); }
@media (min-width: 640px) { .lv-okuma-sayfa { padding-left: 58px !important; background-image: linear-gradient(90deg, transparent 38px, color-mix(in srgb, var(--kenar) 80%, transparent) 38px 39.5px, transparent 39.5px); } }
.lv-okuma-sayfa > p { text-wrap: pretty; hyphens: manual; }
/* Bölüm şeridi: kaçıncı bölümde olduğun ince çizgiler olarak; geçtiklerin mürekkep, gerisi soluk. */
.lv-bolum-seridi { display: flex; gap: 3px; }
.lv-bolum-seridi span { flex: 1; height: 4px; border-radius: 2px; background: var(--satir); }
.lv-bolum-seridi span.lv-gecti { background: var(--murekkep); }
.lv-bolum-seridi span.lv-burada { background: var(--kalem); box-shadow: 0 0 0 1px var(--murekkep); }
/* Kaldığım yer */
.lv-isaret-serit { position: absolute; left: 4px; width: 14px; height: 28px; background: var(--kirmizi); pointer-events: none;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 76%, 0 100%); }
@media (min-width: 640px) { .lv-isaret-serit { left: 14px; } }
.lv-isaret-kipi { cursor: crosshair; outline: 2px dashed var(--kirmizi); outline-offset: 6px; }
/* Okuma sütununun içinde, ekranın altına yapışık durur (ekran kenarında değil):
   iki yan ileride reklama ayrılabilir (Efe, 17 Ekim). */
.lv-isaret-kutusu { position: sticky; bottom: calc(84px + env(safe-area-inset-bottom)); z-index: 40; margin-top: 24px;
  display: flex; justify-content: flex-end; align-items: center; gap: 8px; pointer-events: none; }
.lv-isaret-kutusu > * { pointer-events: auto; }
@media (min-width: 1024px) { .lv-isaret-kutusu { bottom: 20px; } }
.lv-isaret-dugme { display: inline-flex; align-items: center; gap: 7px; padding: 6px 14px 6px 12px; border-radius: 999px; cursor: pointer;
  background: var(--kagit-beyaz); color: var(--kirmizi); border: 1.5px solid var(--kirmizi); box-shadow: var(--golge);
  font: 700 19px/1.1 var(--el); text-decoration: none; }
.lv-isaret-dugme[aria-pressed="true"] { background: var(--kirmizi); color: var(--kagit-beyaz); }
.lv-isaret-dugme.lv-ikincil { color: var(--murekkep); border-color: var(--murekkep); }
.lv-isaret-dugme[hidden] { display: none; }

/* ---------- Learn & Pass: "Şu kelimelerle tekrar yap" (kaynakSec.html) ---------- */
.lv-kaynak { transition: background-color .15s, box-shadow .15s; }
.lv-kaynak[hidden] { display: none !important; }
.lv-kaynak:has(.lv-kaynak-radyo:checked) { background: var(--murekkep-acik); box-shadow: inset 0 0 0 2px var(--murekkep), var(--golge); }
.lv-kaynak-radyo { width: 22px; height: 22px; flex: none; accent-color: var(--murekkep); cursor: pointer; }