/* v77 — giriş paneli yenilendi + şifre göster/gizle */
.pw-wrap { position: relative; display: block; }
.pw-wrap > input { width: 100%; padding-right: 46px; }
.pw-toggle { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; display: grid; place-items: center; border: 0; border-radius: 8px; background: transparent; color: var(--muted, #6b5b4b); cursor: pointer; transition: background .15s, color .15s; }
.pw-toggle svg { width: 20px; height: 20px; }
.pw-toggle:hover { background: color-mix(in srgb, var(--accent) 10%, transparent); color: var(--accent); }
.pw-toggle[aria-pressed="true"] { color: var(--accent); }
.pw-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* kart: pembe bantlar (tekrarlayan radyal degrade) kalktı */
.auth.auth-v77 { max-width: 880px; }
.auth-v77 .panel.lg-card { padding: 0; display: grid; grid-template-columns: 5fr 6fr; overflow: hidden; border-top: 0; background: var(--card, #fffdf6); background-image: none; border-radius: 14px; box-shadow: 0 18px 44px rgba(43, 26, 15, .16); }
.auth-v77 h1::before { content: none; }
.auth-v77 .lg-main { padding: 34px 38px 30px; }
.auth-v77 .lg-main h1 { margin-top: 0; }

.lg-side { position: relative; display: flex; flex-direction: column; padding: 34px 30px 0; color: #f6ead3; overflow: hidden;
  background: linear-gradient(165deg, #7d1b13 0%, #a8241a 55%, #8a1d15 100%); }
.lg-side::before { content: ""; position: absolute; inset: 10px; border: 1px solid rgba(226, 190, 110, .55); border-radius: 8px; pointer-events: none; }
.lg-mark { width: 56px; height: 56px; padding: 6px; border-radius: 50%; background: #fffdf6; box-shadow: 0 0 0 3px rgba(226, 190, 110, .7); }

.lg-sub { margin: 0 0 16px; opacity: .88; font-size: .95rem; line-height: 1.5; }
.lg-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: .92rem; }
.lg-list li { padding-left: 22px; position: relative; }
.lg-list li::before { content: ""; position: absolute; left: 4px; top: .45em; width: 7px; height: 7px; transform: rotate(45deg); background: #e2be6e; }
.lg-shelf { margin-top: auto; padding-top: 26px; display: flex; align-items: flex-end; gap: 4px; height: 118px; border-bottom: 5px solid #4a1008; box-sizing: content-box; }
.lg-shelf i { display: block; width: 100%; max-width: 26px; border-radius: 3px 3px 0 0; background: #e2be6e; box-shadow: inset -3px 0 rgba(0, 0, 0, .18), inset 0 6px rgba(255, 255, 255, .15); }
.lg-shelf i:nth-child(1) { height: 70px; background: #f1e3c4; }
.lg-shelf i:nth-child(2) { height: 92px; background: #c9953a; }
.lg-shelf i:nth-child(3) { height: 60px; background: #2f5d4e; }
.lg-shelf i:nth-child(4) { height: 100px; background: #f1e3c4; }
.lg-shelf i:nth-child(5) { height: 78px; background: #1f4f86; }
.lg-shelf i:nth-child(6) { height: 88px; background: #e2be6e; transform-origin: bottom left; transform: rotate(-9deg); }
.lg-shelf i:nth-child(7) { height: 66px; background: #f1e3c4; }
.lg-shelf i:nth-child(8) { height: 96px; background: #5b2a6e; }
.lg-shelf i:nth-child(9) { height: 74px; background: #c9953a; }
@media (prefers-reduced-motion: no-preference) {
  .lg-shelf i { animation: lg-rise .6s cubic-bezier(.2, .8, .2, 1) both; }
  .lg-shelf i:nth-child(2) { animation-delay: .06s; } .lg-shelf i:nth-child(3) { animation-delay: .12s; } .lg-shelf i:nth-child(4) { animation-delay: .18s; }
  .lg-shelf i:nth-child(5) { animation-delay: .24s; } .lg-shelf i:nth-child(6) { animation-delay: .3s; } .lg-shelf i:nth-child(7) { animation-delay: .36s; }
  .lg-shelf i:nth-child(8) { animation-delay: .42s; } .lg-shelf i:nth-child(9) { animation-delay: .48s; }
}
@keyframes lg-rise { from { transform: translateY(40px); opacity: 0; } }
@media (max-width: 760px) {
  .auth-v77 .panel.lg-card { grid-template-columns: 1fr; }
  .lg-side { padding: 18px 20px 0; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 12px; }
  .lg-sub, .lg-list, .lg-shelf { display: none; }
  .lg-hello { margin: 0; font-size: 1.3rem; }
  .lg-mark { width: 44px; height: 44px; }
  .lg-side { padding-bottom: 18px; }
  .auth-v77 .lg-main { padding: 24px 20px 22px; }
}
:root[data-theme="dark"] .auth-v77 .panel.lg-card { box-shadow: 0 18px 44px rgba(0, 0, 0, .5); }
:root[data-theme="dark"] .lg-side { background: linear-gradient(165deg, #4b0f0a 0%, #6d1810 55%, #54100a 100%); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .auth-v77 .panel.lg-card { box-shadow: 0 18px 44px rgba(0, 0, 0, .5); }
  :root:not([data-theme="light"]) .lg-side { background: linear-gradient(165deg, #4b0f0a 0%, #6d1810 55%, #54100a 100%); }
}

.auth .field .pw-wrap > input[data-pw77] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a5e0f' stroke-width='1.8'%3E%3Crect x='5' y='11' width='14' height='9' rx='2'/%3E%3Cpath d='M8 11V8a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: 14px 50%; background-size: 20px; padding-left: 46px; }

/* v77b: başlık sol alanda, logo ile raf arasında ortalı */
.lg-side { align-items: center; }
.lg-title { margin: auto 0; text-align: center; position: relative; }
.lg-title h1 { margin: 0 0 6px; color: #fff4dc; font-size: 2.3rem; }
.lg-title .ornament { color: #e2be6e; }
.lg-mark { margin-top: 0; }
.lg-shelf { width: 100%; margin-top: 0; }
.auth-v77 .lg-main { display: flex; flex-direction: column; justify-content: center; }
@media (max-width: 760px) {
  .lg-side { flex-direction: column; padding-bottom: 16px; gap: 8px; }
  .lg-title { margin: 0; }
  .lg-title h1 { font-size: 1.6rem; }
  .lg-title .ornament { display: none; }
}

/* v77c: tüm form kırmızı alanın içinde, tek sütun */
.auth.auth-v77 { max-width: 500px; }
.auth-v77 .panel.lg-card { grid-template-columns: 1fr; background: none; }
.lg-side { padding: 36px 34px 0; }
.lg-title { margin: 14px 0 18px; }
.lg-title h1 { font-size: 2rem; }
.auth-v77 .lg-main { width: 100%; padding: 0 0 26px; display: block; position: relative; }
.auth-v77 .lg-main .field label { color: #f6ead3; }
.auth-v77 .lg-main .errors { background: rgba(0, 0, 0, .25); color: #ffe3dc; border-radius: 8px; padding: 10px 14px; margin-bottom: 14px; }
.auth-v77 .lg-main .auth-forgot { background: rgba(255, 244, 220, .16); color: #fff4dc; }
.auth-v77 .lg-main .auth-forgot:hover { background: rgba(255, 244, 220, .28); }
.auth-v77 .lg-main form .btn.block { background: #e2be6e; color: #4a1008; border-color: #e2be6e; box-shadow: 0 4px 12px rgba(0, 0, 0, .25); }
.auth-v77 .lg-main form .btn.block:hover { background: #f0d28a; }
.auth-v77 .lg-main .auth-alt { border-top-color: rgba(226, 190, 110, .5); }
.auth-v77 .lg-main .auth-alt .muted { color: #f6ead3; opacity: .9; }
.auth-v77 .lg-main .auth-alt .btn.ghost { background: transparent; color: #fff4dc; border-color: rgba(255, 244, 220, .6); }
.auth-v77 .lg-main .auth-alt .btn.ghost:hover { background: rgba(255, 244, 220, .14); }
.auth-v77 .lg-main .demo-note { background: rgba(0, 0, 0, .22); border-color: rgba(226, 190, 110, .5); color: #f6ead3; }
.auth-v77 .lg-main .demo-note code { color: #fff4dc; background: transparent; }
.lg-shelf { margin-left: -4px; }
@media (max-width: 760px) {
  .lg-side { flex-direction: column; padding: 22px 18px 0; }
  .lg-title .ornament { display: block; }
  .lg-shelf { display: flex; height: 70px; padding-top: 10px; }
  .lg-shelf i { transform: scale(.7); transform-origin: bottom; }
}

/* v77d: yatay dikdörtgen — sol: logo/başlık/raf, sağ: form (kaydırma gerekmesin) */
@media (min-width: 761px) {
  .auth.auth-v77 { max-width: 880px; margin: 24px auto; }
  .lg-side { display: grid; grid-template-columns: 5fr 6fr; grid-template-areas: "head main" "shelf main"; column-gap: 34px; padding: 30px 34px 0; align-items: stretch; }
  .lg-mark { grid-area: head; justify-self: center; align-self: start; }
  .lg-title { grid-area: head; align-self: center; margin: 90px 0 0; }
  .auth-v77 .lg-main { grid-area: main; align-self: center; padding: 0 0 30px; }
  .lg-shelf { grid-area: shelf; align-self: end; width: 100%; }
  .auth-v77 .lg-main .field { margin-bottom: 12px; }
  .auth-v77 .lg-main .demo-note { font-size: .78rem; padding: 8px 10px; margin-top: 12px; }
  .auth-v77 .lg-main .auth-alt { margin-top: 12px; padding-top: 12px; gap: 6px; }
}
@media (min-width: 761px) {
  .auth.auth-v77 { margin: 14px auto; }
  .lg-side { padding: 20px 30px 0; }
  .lg-title { margin-top: 70px; }
  .lg-shelf { height: 92px; padding-top: 0; transform: scale(.78); transform-origin: bottom left; width: 128%; }
  .auth-v77 .lg-main { padding-bottom: 18px; }
  .auth-v77 .lg-main .field { margin-bottom: 8px; }
  .auth-v77 .lg-main .field input { padding-top: 9px; padding-bottom: 9px; }
  .auth .btn.block.lg { padding-top: 11px; padding-bottom: 11px; }
}

/* çerez izni çubuğu */
.ads-consent { position: fixed; left: 12px; right: 12px; bottom: 74px; z-index: 90; max-width: 560px; margin: 0 auto; display: flex; gap: 14px; align-items: center; justify-content: space-between; flex-wrap: wrap; padding: 12px 16px; border-radius: 12px; background: #2b1a0f; color: #f6ead3; box-shadow: 0 10px 30px rgba(0, 0, 0, .35); font-size: .9rem; }
.ads-consent p { margin: 0; flex: 1 1 220px; }
.ads-consent a { color: #e2be6e; text-decoration: underline; }
.ads-consent div { display: flex; gap: 8px; }
.ads-consent .btn { padding: 8px 16px; }
.ads-consent .btn.ghost { background: transparent; color: #f6ead3; border-color: rgba(246, 234, 211, .5); }
@media (min-width: 761px) { .ads-consent { bottom: 18px; } }


/* ── Mevsim ve önemli gün temaları, genişletilmiş set (lib/seasons.js anahtarları) ── */
html[data-season="ilkbahar"] .hero::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='420'%3E%3Cpath transform='translate%2840 60%29 rotate%2830%29' d='M0 0C6 -9 18 -9 22 0C18 9 6 9 0 0Z' fill='%23f4b6c8'/%3E%3Cpath transform='translate%28230 20%29 rotate%28-40%29' d='M0 0C6 -9 18 -9 22 0C18 9 6 9 0 0Z' fill='%23fbd9e3'/%3E%3Cpath transform='translate%28330 170%29 rotate%2870%29' d='M0 0C6 -9 18 -9 22 0C18 9 6 9 0 0Z' fill='%23b7d98c'/%3E%3Cpath transform='translate%28120 230%29 rotate%28110%29' d='M0 0C6 -9 18 -9 22 0C18 9 6 9 0 0Z' fill='%23f4b6c8'/%3E%3Cpath transform='translate%28300 340%29 rotate%28-20%29' d='M0 0C6 -9 18 -9 22 0C18 9 6 9 0 0Z' fill='%23fbd9e3'/%3E%3Cpath transform='translate%2830 370%29 rotate%28150%29' d='M0 0C6 -9 18 -9 22 0C18 9 6 9 0 0Z' fill='%23b7d98c'/%3E%3C/svg%3E"); background-size: 420px 420px; animation: season-fall 80s linear infinite; opacity: .4; }
html[data-season="ilkbahar"] .hero { box-shadow: inset 0 0 160px rgba(120,190,120,.22); }
html[data-season="ilkbahar"] .season-greet { background: rgba(74,140,84,.55); }
html[data-season="yaz"] .hero::after { background-image: radial-gradient(circle at 88% 8%, rgba(255,214,102,.55), rgba(255,214,102,0) 38%), radial-gradient(circle at 12% 100%, rgba(255,160,70,.22), rgba(255,160,70,0) 45%); opacity: .8; animation: none; }
html[data-season="yaz"] .hero { box-shadow: inset 0 0 180px rgba(255,190,80,.22); }
html[data-season="yaz"] .season-greet { background: rgba(201,130,43,.6); }
html[data-season="kis"] .hero::after, html[data-season="yilbasi"] .hero::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='360'%3E%3Ccircle cx='30' cy='40' r='2.5' fill='white' fill-opacity='.8'/%3E%3Ccircle cx='120' cy='90' r='1.8' fill='white' fill-opacity='.8'/%3E%3Ccircle cx='210' cy='30' r='3' fill='white' fill-opacity='.8'/%3E%3Ccircle cx='300' cy='120' r='2' fill='white' fill-opacity='.8'/%3E%3Ccircle cx='70' cy='180' r='2.2' fill='white' fill-opacity='.8'/%3E%3Ccircle cx='180' cy='210' r='3' fill='white' fill-opacity='.8'/%3E%3Ccircle cx='270' cy='260' r='1.8' fill='white' fill-opacity='.8'/%3E%3Ccircle cx='40' cy='300' r='2.8' fill='white' fill-opacity='.8'/%3E%3Ccircle cx='150' cy='330' r='2' fill='white' fill-opacity='.8'/%3E%3Ccircle cx='330' cy='330' r='2.5' fill='white' fill-opacity='.8'/%3E%3Ccircle cx='240' cy='160' r='1.5' fill='white' fill-opacity='.8'/%3E%3C/svg%3E"); background-size: 360px 360px; animation: season-fall 40s linear infinite; opacity: .55; }
html[data-season="kis"] .hero { box-shadow: inset 0 0 160px rgba(120,160,220,.24); }
html[data-season="kis"] .season-greet { background: rgba(60,100,160,.55); }
html[data-season="nisan23"] .hero::after, html[data-season="mayis19"] .hero::after, html[data-season="zafer30"] .hero::after, html[data-season="temmuz15"] .hero::after, html[data-season="canakkale"] .hero::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='260'%3E%3Cpath d='M40 40a22 22 0 1 0 22 34a18 18 0 1 1 -22 -34z' fill='white' fill-opacity='.5'/%3E%3Cpath transform='translate%2878 52%29' d='M0 -7L2 -2L7 -2L3 1L4.5 6L0 3L-4.5 6L-3 1L-7 -2L-2 -2Z' fill='white' fill-opacity='.5'/%3E%3C/svg%3E"); background-size: 300px 260px; opacity: .4; }
html[data-season="nisan23"] .hero { box-shadow: inset 0 0 160px rgba(200,30,40,.3); }
html[data-season="nisan23"] .season-greet, html[data-season="mayis19"] .season-greet, html[data-season="zafer30"] .season-greet { background: #b3202a; border-color: rgba(255,255,255,.5); }
html[data-season="mayis19"] .hero { box-shadow: inset 0 0 160px rgba(200,30,40,.3), inset 0 -60px 120px rgba(255,255,255,.08); }
html[data-season="zafer30"] .hero { box-shadow: inset 0 0 160px rgba(200,30,40,.32), inset 0 0 60px rgba(217,164,65,.25); }
html[data-season="temmuz15"] .hero { box-shadow: inset 0 0 170px rgba(120,20,30,.45); }
html[data-season="temmuz15"] .hero::after { opacity: .2; }
html[data-season="temmuz15"] .season-greet { background: #6e141c; border-color: rgba(255,255,255,.4); }
html[data-season="canakkale"] .hero { filter: grayscale(.5); box-shadow: inset 0 0 170px rgba(60,40,40,.45); }
html[data-season="canakkale"] .hero::after { opacity: .18; }
html[data-season="canakkale"] .season-greet { background: #3a2a2a; border-color: rgba(255,255,255,.4); }
html[data-season="kadinlar"] .hero::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='420'%3E%3Cpath transform='translate%2840 60%29 rotate%2830%29' d='M0 0C6 -9 18 -9 22 0C18 9 6 9 0 0Z' fill='%23b57edc'/%3E%3Cpath transform='translate%28230 20%29 rotate%28-40%29' d='M0 0C6 -9 18 -9 22 0C18 9 6 9 0 0Z' fill='%23e0b8f2'/%3E%3Cpath transform='translate%28330 170%29 rotate%2870%29' d='M0 0C6 -9 18 -9 22 0C18 9 6 9 0 0Z' fill='%23f4b6c8'/%3E%3Cpath transform='translate%28120 230%29 rotate%28110%29' d='M0 0C6 -9 18 -9 22 0C18 9 6 9 0 0Z' fill='%23b57edc'/%3E%3Cpath transform='translate%28300 340%29 rotate%28-20%29' d='M0 0C6 -9 18 -9 22 0C18 9 6 9 0 0Z' fill='%23e0b8f2'/%3E%3Cpath transform='translate%2830 370%29 rotate%28150%29' d='M0 0C6 -9 18 -9 22 0C18 9 6 9 0 0Z' fill='%23f4b6c8'/%3E%3C/svg%3E"); background-size: 420px 420px; animation: season-fall 80s linear infinite; opacity: .45; }
html[data-season="kadinlar"] .hero { box-shadow: inset 0 0 160px rgba(150,90,190,.3); }
html[data-season="kadinlar"] .season-greet { background: #7a3f9e; border-color: rgba(255,255,255,.5); }
html[data-season="ramazanbayrami"] .hero::after, html[data-season="kurbanbayrami"] .hero::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='300'%3E%3Cpath d='M60 40a26 26 0 1 0 26 40a21 21 0 1 1 -26 -40z' fill='%23e5c46b' fill-opacity='.85'/%3E%3Cpath transform='translate%28130 60%29 scale%281%29' d='M0 -7L2 -2L7 -2L3 1L4.5 6L0 3L-4.5 6L-3 1L-7 -2L-2 -2Z' fill='%23f3dc95' fill-opacity='.8'/%3E%3Cpath transform='translate%28240 30%29 scale%280.8%29' d='M0 -7L2 -2L7 -2L3 1L4.5 6L0 3L-4.5 6L-3 1L-7 -2L-2 -2Z' fill='%23f3dc95' fill-opacity='.8'/%3E%3Cpath transform='translate%28310 110%29 scale%281.2%29' d='M0 -7L2 -2L7 -2L3 1L4.5 6L0 3L-4.5 6L-3 1L-7 -2L-2 -2Z' fill='%23f3dc95' fill-opacity='.8'/%3E%3Cpath transform='translate%28190 150%29 scale%280.7%29' d='M0 -7L2 -2L7 -2L3 1L4.5 6L0 3L-4.5 6L-3 1L-7 -2L-2 -2Z' fill='%23f3dc95' fill-opacity='.8'/%3E%3Cpath transform='translate%2870 200%29 scale%280.9%29' d='M0 -7L2 -2L7 -2L3 1L4.5 6L0 3L-4.5 6L-3 1L-7 -2L-2 -2Z' fill='%23f3dc95' fill-opacity='.8'/%3E%3Cpath transform='translate%28280 240%29 scale%280.8%29' d='M0 -7L2 -2L7 -2L3 1L4.5 6L0 3L-4.5 6L-3 1L-7 -2L-2 -2Z' fill='%23f3dc95' fill-opacity='.8'/%3E%3C/svg%3E"); background-size: 360px 300px; opacity: .5; animation: season-twinkle 6s ease-in-out infinite alternate; }
html[data-season="ramazanbayrami"] .hero { box-shadow: inset 0 0 180px rgba(217,164,65,.3); }
html[data-season="ramazanbayrami"] .season-greet { background: #8a5a14; border-color: rgba(255,230,160,.6); }
html[data-season="kurbanbayrami"] .hero { box-shadow: inset 0 0 180px rgba(40,120,80,.3); }
html[data-season="kurbanbayrami"] .season-greet { background: #1f6b46; border-color: rgba(255,230,160,.6); }
html[data-season="ogretmenler"] .hero { box-shadow: inset 0 0 160px rgba(30,90,70,.38); }
html[data-season="ogretmenler"] .season-greet { background: #1f4d3d; border-color: rgba(255,255,255,.5); }
html[data-season="ogretmenler"] .hero::after { background-image: repeating-linear-gradient(135deg, rgba(255,255,255,.06) 0 2px, transparent 2px 26px); opacity: .6; animation: none; }
html[data-season="anneler"] .hero { box-shadow: inset 0 0 160px rgba(214,86,120,.34); }
html[data-season="anneler"] .season-greet { background: #b3355a; border-color: rgba(255,255,255,.5); }
html[data-season="babalar"] .hero { box-shadow: inset 0 0 160px rgba(40,80,150,.36); }
html[data-season="babalar"] .season-greet { background: #26468f; border-color: rgba(255,255,255,.5); }
@media (prefers-reduced-motion: reduce) { html[data-season] .hero::after { animation: none !important; } }

/* ── v79: giriş ve üye ol sayfaları "Açık kitap" (iki sayfa, sağda ayraç, solda yazı; masa üstü sahnesi) ── */
.bk-stage { position: relative; min-height: calc(100vh - 150px); padding: 48px 16px 64px; display: grid; place-items: center; overflow: hidden;
  background: radial-gradient(ellipse at 50% 30%, #d9b98a, #b88d58 75%); }
.bk-stage::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(100deg, rgba(90, 55, 25, .05) 0 3px, transparent 3px 14px); pointer-events: none; }
:root[data-theme="dark"] .bk-stage { background: radial-gradient(ellipse at 50% 30%, #6b4a2c, #3b2616 75%); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .bk-stage { background: radial-gradient(ellipse at 50% 30%, #6b4a2c, #3b2616 75%); } }
.bk-book { position: relative; width: min(1020px, 100%); display: grid; grid-template-columns: 1fr 1fr; border-radius: 8px;
  box-shadow: 0 40px 60px rgba(60, 35, 15, .45), 0 0 0 10px #7c2d26, 0 0 0 13px #5a1c17; margin: 10px 0; }
.bk-book::after { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 60px; margin-left: -30px; background: linear-gradient(90deg, transparent, rgba(80, 50, 20, .22) 50%, transparent); pointer-events: none; }
.bk-pg { position: relative; padding: 46px 52px 54px; color: #2b1d16; }
.bk-pg.l { border-radius: 6px 0 0 6px; background: linear-gradient(90deg, #f1e5c6, #faf2df 85%, #e9dbb8); }
.bk-pg.r { border-radius: 0 6px 6px 0; background: linear-gradient(270deg, #f1e5c6, #faf2df 85%, #e9dbb8); }
.bk-rib { position: absolute; right: 86px; top: -13px; width: 26px; height: 130px; z-index: 2; background: linear-gradient(#c43a2a, #8e1f14); clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 88%, 0 100%); filter: drop-shadow(0 6px 5px rgba(0, 0, 0, .3)); }
.bk-no { position: absolute; bottom: 22px; left: 0; right: 0; text-align: center; font: .8rem 'Special Elite', 'Courier New', monospace; color: #9a8868; letter-spacing: .1em; }
.bk-mark { display: block; width: 52px; height: 52px; }
.bk-quote { font: italic 600 1.85rem/1.3 var(--serif, Lora, serif); color: #7c2d26; margin: 24px 0 14px; }
.bk-text { color: #5f4f3e; line-height: 1.7; margin: 0; max-width: 340px; }
.bk-text::first-letter { font: 700 3.6rem/.85 var(--serif, Lora, serif); float: left; color: #a62a1d; margin: 6px 10px 0 0; }
.bk-pg h1 { font: 700 2.1rem var(--serif, Lora, serif); color: #2b1d16; margin: 0 0 4px; }
.bk-pg h1::before { content: none; }
.bk-sub { margin: 0 0 22px; font: .95rem 'Special Elite', 'Courier New', monospace; color: #7a6a58; }
.bk-side { font: italic 600 1.25rem var(--serif, Lora, serif); color: #7c2d26; margin: 4px 0 18px; }
.bk-pg .field { margin-bottom: 18px; }
.bk-pg .field label, .bk-pg .seg label { font: .86rem 'Special Elite', 'Courier New', monospace; color: #7c2d26; letter-spacing: 0; text-transform: none; margin-bottom: 0; }
.bk-pg .field input[type="text"], .bk-pg .field input[type="email"], .bk-pg .field input[type="password"] { width: 100%; background: transparent; border: 0; border-bottom: 1.5px solid #8d7d68; border-radius: 0; box-shadow: none; padding: 8px 0 6px; font: 1.05rem 'Special Elite', 'Courier New', monospace; color: #2b1d16; }
.bk-pg .field input:focus, .bk-pg .field input:focus-visible { outline: 0; border-bottom-color: #a62a1d; box-shadow: 0 2px 0 -1px #a62a1d; background: rgba(166, 42, 29, .04); }
.bk-pg .field input:-webkit-autofill { -webkit-text-fill-color: #2b1d16; box-shadow: 0 0 0 40px #f6ecd3 inset; }
.bk-pg .field input::placeholder { color: #a99a80; }
.bk-pg .pw-toggle { color: #7c2d26; right: 0; }
.bk-pg .pw-toggle:hover { background: rgba(124, 45, 38, .1); }
.bk-pg .hint { font: .78rem 'Special Elite', 'Courier New', monospace; color: #8d7d68; }
.bk-forgot { margin: -8px 0 20px; text-align: right; }
.bk-pg a.auth-forgot, .bk-pg .bk-link { font: .9rem 'Special Elite', 'Courier New', monospace; color: #7c2d26; background: none; padding: 0; text-decoration: underline; }
.bk-pg .btn.block { background: #a62a1d; color: #fff6df; border: 0; border-radius: 4px; box-shadow: 0 6px 0 #6d1a12; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; transition: transform .1s, box-shadow .1s; }
.bk-pg .btn.block:hover { background: #b5301f; }
.bk-pg .btn.block:active { transform: translateY(4px); box-shadow: 0 2px 0 #6d1a12; }
.bk-alt { margin-top: 26px; text-align: center; color: #7a6a58; }
.bk-alt a { color: #7c2d26; font-weight: 700; text-decoration: none; margin-left: 4px; }
.bk-alt a:hover { text-decoration: underline; }
.bk-pg .errors { background: #f6d9d2; color: #7a1d12; border-left: 4px solid #a62a1d; border-radius: 4px; padding: 10px 14px; margin: 0 0 16px; list-style: none; }
.bk-pg .errors li { margin: 0; padding: 0; }
.bk-pg .seg { border: 1.5px solid #8d7d68; border-radius: 4px; margin-bottom: 20px; }
.bk-pg .seg label { background: transparent; color: #5f4f3e; padding: 10px; }
.bk-pg .seg label:has(input:checked) { background: #a62a1d; color: #fff6df; }
.bk-pg .check { font-size: .92rem; color: #4a3a2c; margin-bottom: 10px; }
.bk-pg .check input { accent-color: #a62a1d; }
.bk-pg .check a { color: #7c2d26; }
.bk-pg .demo-note { margin-top: 16px; background: rgba(124, 45, 38, .07); border: 1px dashed #b9a67f; color: #6b5a48; font-size: .78rem; padding: 8px 10px; border-radius: 6px; }
.bk-pg .demo-note code { background: transparent; color: #2b1d16; }
.bk-pg .muted { color: #7a6a58; }
@media (prefers-reduced-motion: no-preference) { .bk-rib { transform-origin: top; animation: bk-sway 6s ease-in-out infinite alternate; } }
@keyframes bk-sway { from { transform: rotate(-1.2deg); } to { transform: rotate(1.2deg); } }
@media (max-width: 800px) {
  .bk-stage { padding: 28px 12px 40px; }
  .bk-book { grid-template-columns: 1fr; box-shadow: 0 24px 40px rgba(60, 35, 15, .4), 0 0 0 6px #7c2d26; }
  .bk-book::after { display: none; }
  .bk-pg { padding: 32px 24px 44px; }
  .bk-pg.l { border-radius: 6px 6px 0 0; background: linear-gradient(180deg, #f1e5c6, #faf2df 30%); }
  .bk-pg.r { border-radius: 0 0 6px 6px; background: linear-gradient(0deg, #f1e5c6, #faf2df 70%); }
  .bk-rib { right: 40px; height: 100px; }
  .bk-text, .bk-intro-hide { display: none; }
  .bk-quote { font-size: 1.4rem; margin: 14px 0 0; }
  .bk-pg.l .bk-no { display: none; }
}
.bk-rib.bk-rib-edge { right: 16px; width: 22px; height: 96px; }
@media (max-width: 800px) { .bk-rib.bk-rib-edge { right: 14px; height: 70px; } }

/* ── v80: ana sayfa raflarının "renkli pano" görünümü (kapağı öne dönük kitaplar + sırtlar) ── */
.cat-shelf { --pa: #2e7d84; --pb: #1b5560; }
.cat-shelf[data-tone="1"] { --pa: #a62a1d; --pb: #6d1a12; }
.cat-shelf[data-tone="2"] { --pa: #e0a02e; --pb: #b87a14; }
.cat-shelf[data-tone="3"] { --pa: #3f8a5c; --pb: #235a3a; }
.cat-shelf[data-tone="4"] { --pa: #5a4a9a; --pb: #3a2e6e; }
.cat-shelf[data-tone="5"] { --pa: #d5703a; --pb: #a14a1c; }
.cat-shelf .cs-box { position: relative; border-radius: 14px 14px 0 0; padding: 26px 14px 0; overflow: hidden; background: linear-gradient(160deg, var(--pa), var(--pb)); }
.cat-shelf .cs-box::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(circle at 85% 0, rgba(255, 255, 255, .26), transparent 55%), repeating-linear-gradient(90deg, rgba(255, 255, 255, .05) 0 2px, transparent 2px 22px); }
.cat-shelf .vx-shelf-row { position: relative; background: transparent; border: 0; border-radius: 0; min-height: 190px; padding: 0 4px; gap: 4px; align-items: flex-end;
  scrollbar-width: none; -ms-overflow-style: none; scroll-behavior: smooth; scroll-snap-type: none; }
.cat-shelf .vx-shelf-row::-webkit-scrollbar { display: none; }
.cat-shelf .cs-board { height: 16px; background: #fffaf0; border-radius: 0 0 10px 10px; box-shadow: 0 12px 20px -8px rgba(60, 30, 10, .45), inset 0 -4px 0 rgba(0, 0, 0, .08); }
:root[data-theme="dark"] .cat-shelf .cs-board { background: #3a2e22; }
.cat-shelf .spine { border-radius: 4px 4px 0 0; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .88), 0 4px 8px rgba(0, 0, 0, .25); }
.cat-shelf .spine::before, .cat-shelf .spine::after { left: 6px; right: 6px; }
.cat-shelf .cs-cover { flex: none; position: relative; display: block; width: 112px; margin: 0 6px; scroll-snap-align: start; transition: transform .18s ease; }
.cat-shelf .cs-cover img { display: block; width: 112px; height: 160px; object-fit: cover; border-radius: 3px 5px 5px 3px; background: #efe3c8;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, .92), 0 6px 12px rgba(0, 0, 0, .35); }
.cat-shelf .cs-cover.lean { transform: rotate(-4deg); transform-origin: bottom left; margin-left: 10px; }
.cat-shelf .cs-cover:hover, .cat-shelf .cs-cover:focus-visible { transform: translateY(-8px) rotate(0); outline: none; }
.cat-shelf .cs-pr { position: absolute; right: -6px; top: 10px; background: #a62a1d; color: #fff6df; font: 700 .76rem var(--text, sans-serif); padding: 3px 8px; border-radius: 3px 0 0 3px; box-shadow: 0 2px 4px rgba(0, 0, 0, .4); }
.cat-shelf .cs-nav { position: absolute; top: 50%; z-index: 3; width: 34px; height: 34px; margin-top: -17px; border: 0; border-radius: 50%; background: rgba(255, 250, 240, .92); color: #7c2d26; box-shadow: 0 3px 8px rgba(0, 0, 0, .35); cursor: pointer; font: 700 1.2rem/1 var(--text, sans-serif); display: grid; place-items: center; }
.cat-shelf .cs-nav.prev { left: 6px; } .cat-shelf .cs-nav.next { right: 6px; }
.cat-shelf .cs-nav[hidden] { display: none; }
@media (max-width: 760px) { .cat-shelf .cs-cover, .cat-shelf .cs-cover img { width: 96px; } .cat-shelf .cs-cover img { height: 138px; } .cat-shelf .vx-shelf-row { min-height: 170px; } }
@media (prefers-reduced-motion: reduce) { .cat-shelf .cs-cover { transition: none; } .cat-shelf .vx-shelf-row { scroll-behavior: auto; } }

/* v106: Raflara göz atın renkleri ana sayfanın diğer bölümlerinde; kapaklar normal görsel, raf tahtası yok */
.cat-shelf .cs-box { border-radius: 14px; padding-bottom: 22px; }
.cat-shelf .cs-cover.lean { transform: none; margin-left: 6px; }
.cat-shelf .cs-board { display: none; }
.tone-box { --pa: #2e7d84; --pb: #1b5560; position: relative; border-radius: 14px; padding: 22px 16px; background: linear-gradient(160deg, var(--pa), var(--pb)); }
.tone-box[data-tone="1"] { --pa: #a62a1d; --pb: #6d1a12; }
.tone-box[data-tone="2"] { --pa: #e0a02e; --pb: #b87a14; }
.tone-box[data-tone="3"] { --pa: #3f8a5c; --pb: #235a3a; }
.tone-box[data-tone="4"] { --pa: #5a4a9a; --pb: #3a2e6e; }
.tone-box[data-tone="5"] { --pa: #d5703a; --pb: #a14a1c; }
.tone-box { isolation: isolate; }
.tone-box:not(.shelf-row)::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; background: radial-gradient(circle at 85% 0, rgba(255, 255, 255, .22), transparent 55%), repeating-linear-gradient(90deg, rgba(255, 255, 255, .05) 0 3px, transparent 3px 30px); }
.shelf-row.tone-box { margin: 0; padding: 22px 12px; }
.shelf-row.tone-box::before { background: linear-gradient(to right, var(--pa), transparent); }
.shelf-row.tone-box::after { background: linear-gradient(to left, var(--pb), transparent); }
.grid-cards.tone-box { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; }
.grid-cards.tone-box::-webkit-scrollbar { display: none; }
.grid-cards.tone-box > * { flex: 0 0 200px; scroll-snap-align: start; min-width: 0; }