/* Kütüphanecim: gece, ceviz ve pirinç */
@view-transition { navigation: auto; }

:root {
  --nav-h: 68px;
  --grain-v: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='520' height='520'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.32 .007' numOctaves='4' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1.1 0 0 0 -.34'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  --grain-h: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='520' height='120'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.007 .4' numOctaves='4' seed='3'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1.1 0 0 0 -.34'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .06 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --sans: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --gold-grad: linear-gradient(135deg, #F0D79F 0%, #D2A95D 48%, #A97F38 100%);
  --r: 14px;

  --bg: #0F0C09;
  --bg-2: #17120C;
  --card: rgba(255, 240, 214, .045);
  --card-solid: #1C160F;
  --card-2: rgba(255, 240, 214, .08);
  --ink: #F2E8D5;
  --muted: #A3967F;
  --line: rgba(226, 192, 136, .16);
  --gold: #DDB875;
  --gold-ink: #241805;
  --danger: #E58A7C;
  --ok: #7FCFA5;
  --field: rgba(255, 240, 214, .05);
  --shadow: 0 24px 60px -24px rgba(0, 0, 0, .8);
  color-scheme: dark;
}
:root[data-theme="light"] {
  --bg: #F3EBDB;
  --bg-2: #EADFCA;
  --card: rgba(255, 252, 245, .78);
  --card-solid: #FFFBF3;
  --card-2: rgba(120, 90, 40, .08);
  --ink: #2A1F12;
  --muted: #7A6C57;
  --line: rgba(120, 90, 40, .22);
  --gold: #94702C;
  --danger: #9B2C2C;
  --ok: #2F7D5B;
  --field: #FFFCF5;
  --shadow: 0 24px 50px -26px rgba(70, 45, 10, .45);
  color-scheme: light;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; min-height: 100vh; color: var(--ink); font: 15.5px/1.6 var(--sans); background: var(--noise), radial-gradient(120% 70% at 50% -10%, var(--bg-2), var(--bg) 70%) fixed, var(--bg); -webkit-font-smoothing: antialiased; }
[hidden] { display: none !important; }
h1, h2, h3 { font-family: var(--serif); font-weight: 600; line-height: 1.12; margin: 0; letter-spacing: -.005em; }
h1 { font-size: clamp(34px, 4.4vw, 52px); }
h2 { font-size: 28px; }
h3 { font-size: 22px; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.icon { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.icon.fill { fill: currentColor; }
.muted { color: var(--muted); }
.small { font-size: 13.5px; }
.center { text-align: center; }
.eyebrow { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); font-weight: 600; display: flex; align-items: center; gap: 6px; }
.eyebrow .icon { width: 14px; height: 14px; }
.stack { display: grid; gap: 16px; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 24px; backdrop-filter: blur(10px); }
.wrap { max-width: 1320px; margin: 0 auto; padding: 0 clamp(16px, 3.4vw, 44px); }
.wrap--top { padding-top: 6px; }

/* Düğmeler */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; padding: 10px 18px; border-radius: 11px; border: 1px solid var(--line); background: var(--card); font-weight: 600; font-size: 14.5px; white-space: nowrap; cursor: pointer; transition: border-color .2s, background .2s, transform .14s, box-shadow .2s, filter .2s; }
.btn:hover { border-color: var(--gold); }
.btn:active { transform: translateY(1px) scale(.99); }
.btn:disabled { opacity: .55; cursor: wait; }
.btn--gold { background: var(--gold-grad); border-color: transparent; color: var(--gold-ink); box-shadow: 0 10px 26px -10px rgba(216, 170, 90, .7), inset 0 1px 0 rgba(255, 255, 255, .45); }
.btn--gold:hover { filter: brightness(1.07); box-shadow: 0 14px 34px -10px rgba(216, 170, 90, .9), inset 0 1px 0 rgba(255, 255, 255, .45); }
.btn--ghost { background: rgba(255, 240, 214, .06); backdrop-filter: blur(10px); }
.btn--glass { background: rgba(20, 15, 9, .55); color: #F2E8D5; border-color: rgba(226, 192, 136, .26); backdrop-filter: blur(14px); }
.btn--glass.is-on { background: var(--gold-grad); color: var(--gold-ink); border-color: transparent; }
.btn--danger { color: var(--danger); }
.btn--danger:hover { border-color: var(--danger); }
.modal .btn--danger { background: #A33A32; border-color: #A33A32; color: #fff; }
.btn--wide { width: 100%; }
.btn--sm { padding: 6px 12px; font-size: 13px; border-radius: 9px; }
.btn--lg { padding: 14px 26px; font-size: 16px; border-radius: 13px; }
.iconbtn { width: 38px; height: 38px; display: inline-grid; place-items: center; border: 0; background: transparent; border-radius: 10px; color: inherit; transition: background .2s; }
.iconbtn:hover { background: var(--card-2); }
.iconbtn--line { border: 1px solid var(--line); }
.iconbtn.is-fav { color: #E0675D; }
.iconbtn.is-fav .icon { fill: currentColor; }
.link { background: none; border: 0; padding: 0; color: var(--gold); font-weight: 600; font-size: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.link--danger { color: var(--danger); }

/* Form */
.field { display: grid; gap: 7px; }
.field > span { font-size: 13.5px; font-weight: 600; display: flex; align-items: center; gap: 6px; }
.field em { color: var(--danger); font-style: normal; }
.field small { font-size: 12.5px; }
input:not([type=checkbox]):not([type=color]):not([type=file]):not([type=range]), select, textarea { width: 100%; padding: 11px 13px; background: var(--field); border: 1px solid var(--line); border-radius: 10px; transition: border-color .2s, box-shadow .2s; }
select option, select optgroup { background: var(--card-solid); color: var(--ink); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 20%, transparent); }
input:disabled { opacity: .6; }
textarea { resize: vertical; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.row2--tight { margin-top: 8px; }
.row3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.check { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; accent-color: var(--gold); }
.alert { padding: 11px 14px; border-radius: 10px; font-size: 14.5px; }
.alert--error { background: color-mix(in srgb, var(--danger) 14%, transparent); color: var(--danger); }
.chipinput { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; background: var(--field); border: 1px solid var(--line); border-radius: 10px; padding: 5px 6px; }
.chipinput:focus-within { border-color: var(--gold); }
.chipinput__items { display: contents; }
.chipinput input { flex: 1; min-width: 150px; border: 0 !important; background: transparent !important; padding: 6px !important; box-shadow: none !important; }
.tagchip { display: inline-flex; align-items: center; gap: 4px; background: var(--card-2); border: 1px solid var(--line); border-radius: 7px; padding: 3px 4px 3px 10px; font-size: 13.5px; }
.tagchip button { background: none; border: 0; display: grid; place-items: center; padding: 2px; color: var(--muted); }
.tagchip .icon { width: 13px; height: 13px; }

/* Üst menü */
.nav { position: fixed; inset: 0 0 auto; height: var(--nav-h); z-index: 50; display: flex; align-items: center; gap: 22px; padding: 0 clamp(14px, 2.6vw, 34px); transition: background .3s, box-shadow .3s; background: linear-gradient(rgba(10, 7, 4, .78), rgba(10, 7, 4, 0)); color: #F2E8D5; }
.is-scrolled .nav, body:not(.immersive) .nav { background: rgba(14, 10, 6, .82); backdrop-filter: blur(18px) saturate(1.3); box-shadow: 0 1px 0 rgba(226, 192, 136, .14); }
.brand { display: flex; align-items: center; gap: 11px; color: #F2E8D5; }
.brand__mark { display: flex; align-items: flex-end; gap: 2px; height: 26px; }
.brand__mark i { width: 5px; border-radius: 1.5px 1.5px 0 0; background: #D9B36C; }
.brand__mark i:nth-child(1) { height: 17px; }
.brand__mark i:nth-child(2) { height: 26px; background: #F5EFE3; }
.brand__mark i:nth-child(3) { height: 20px; background: #B5543F; }
.brand__mark i:nth-child(4) { height: 23px; transform: rotate(8deg); transform-origin: bottom; }
.brand__name { font: 600 23px var(--serif); letter-spacing: .005em; }
.nav__links { display: flex; gap: 2px; }
.nav__links a { padding: 7px 13px; border-radius: 9px; font-size: 14.5px; font-weight: 500; color: #BDB19B; position: relative; transition: color .2s; }
.nav__links a:hover { color: #F2E8D5; }
.nav__links a.is-active { color: #F3DFB4; }
.nav__links a.is-active::after { content: ""; position: absolute; left: 13px; right: 13px; bottom: 1px; height: 1.5px; background: var(--gold-grad); border-radius: 2px; }
.nav__search { flex: 1; max-width: 340px; margin-left: auto; position: relative; display: flex; align-items: center; }
.nav__search .icon { position: absolute; left: 12px; color: #A99C85; width: 16px; height: 16px; }
.nav .nav__search input { padding: 8px 12px 8px 36px; background: rgba(255, 240, 214, .07); border-color: rgba(226, 192, 136, .18); border-radius: 999px; color: #F2E8D5; font-size: 14px; }
.nav__tools { display: flex; align-items: center; gap: 8px; }
.nav__tools .btn { padding: 8px 14px; }
.avatar { width: 36px; height: 36px; flex: none; border-radius: 50%; background: var(--gold-grad); color: var(--gold-ink); display: grid; place-items: center; font-weight: 700; font-size: 13px; }
.avatar--soft { background: var(--c); color: #F7F1E5; width: 44px; height: 44px; }
.tabbar { display: none; }
.content { padding-top: calc(var(--nav-h) + 18px); padding-bottom: 60px; }
.immersive .content { padding: 0; }
body:not(.immersive) .content { max-width: 1320px; margin: 0 auto; padding-inline: clamp(16px, 3.4vw, 44px); }
.skeleton { padding: 80px 20px; text-align: center; color: var(--muted); font: italic 500 22px var(--serif); }

/* Sayfa başlıkları */
.pagehead { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 24px; }
.pagehead__tools { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.back { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 14px; margin-bottom: 10px; transition: color .2s; }
.back:hover { color: var(--gold); }
.back .icon { width: 16px; height: 16px; }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 11px; background: var(--card); padding: 3px; backdrop-filter: blur(10px); }
.seg a, .seg button { display: grid; place-items: center; padding: 6px 12px; border: 0; background: none; border-radius: 8px; color: var(--muted); font-weight: 600; font-size: 14px; }
.seg .is-on { background: var(--gold-grad); color: var(--gold-ink); }

/* Dekoratif kitap duvarı ve ışık */
.swall { position: absolute; inset: -8px; display: grid; grid-auto-rows: 1fr; overflow: hidden; background: #120C07; }
.swall__row { display: flex; align-items: flex-end; gap: 2px; padding: 0 2px 0; border-bottom: 16px solid; border-image: linear-gradient(#6B4728, #3B2413) 1; box-shadow: inset 0 14px 22px -8px #000; overflow: hidden; min-height: 0; }
.swall .s { flex: none; background: linear-gradient(90deg, rgba(0, 0, 0, .5), rgba(255, 255, 255, .14) 22%, rgba(255, 255, 255, .02) 55%, rgba(0, 0, 0, .42)), var(--c); border-radius: 2px 2px 0 0; animation: rise .7s var(--d) both cubic-bezier(.2, .8, .2, 1); position: relative; }
.swall .s.g::after { content: ""; position: absolute; left: 0; right: 0; top: 14%; height: 8%; border-block: 1px solid rgba(230, 198, 130, .7); }
@keyframes rise { from { transform: translateY(24px); opacity: 0; } }
.spot { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(620px circle at var(--mx, 30%) var(--my, 35%), rgba(255, 196, 110, .1), rgba(10, 7, 4, .55) 42%, rgba(10, 7, 4, .94) 78%); transition: background .1s; }

/* Giriş */
.gate { position: relative; min-height: 100vh; display: grid; grid-template-columns: 1.2fr minmax(340px, 440px); align-items: center; gap: clamp(20px, 5vw, 80px); padding: clamp(24px, 5vw, 80px); overflow: hidden; color: #F2E8D5; }
.gate__copy, .gate__card { position: relative; z-index: 2; }
.gate__copy .brand { margin-bottom: 44px; }
.gate__lead { font: 500 clamp(44px, 6.4vw, 92px)/1.02 var(--serif); letter-spacing: -.01em; text-shadow: 0 4px 40px rgba(0, 0, 0, .7); animation: fadeup 1s .25s both; }
.gate__lead em { font-style: italic; background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.gate__sub { max-width: 520px; margin-top: 24px; font-size: 17px; color: #CFC3AD; text-shadow: 0 2px 20px #000; animation: fadeup 1s .45s both; }
.gate__card { display: grid; gap: 14px; padding: 34px; border-radius: 20px; background: rgba(24, 18, 11, .72); border: 1px solid rgba(226, 192, 136, .24); backdrop-filter: blur(22px) saturate(1.3); box-shadow: 0 40px 90px -30px #000, inset 0 1px 0 rgba(255, 240, 214, .1); animation: fadeup 1s .6s both; --muted: #B4A68E; --line: rgba(226, 192, 136, .24); --field: rgba(255, 240, 214, .06); --gold: #DDB875; --danger: #E58A7C; }
.gate__card h1 { font-size: 36px; }
.gate__card a { color: #DDB875; font-weight: 600; }
@keyframes fadeup { from { transform: translateY(20px); opacity: 0; } }
.center-page { min-height: 100vh; display: grid; place-items: center; padding: 16px; }
.center-page .gate__card { width: min(440px, 100%); }

/* Kapılar */
.doors { display: none; position: fixed; inset: 0; z-index: 200; perspective: 1800px; background: radial-gradient(60% 70% at 50% 50%, #FFD99A, #C98A3A 45%, #2B1A0B 100%); cursor: pointer; }
[data-enter] .doors { display: block; }
.doors__leaf { position: absolute; top: 0; bottom: 0; width: 50.2%; padding: 7vh 5vw; display: grid; grid-template-rows: 1.5fr 1fr; gap: 5vh; background: var(--grain-v), linear-gradient(90deg, #3A2414, #5A3A22 50%, #3A2414); background-blend-mode: multiply; transition: transform 1.75s cubic-bezier(.55, .05, .25, 1), filter 1.75s; backface-visibility: hidden; }
.doors__leaf--l { left: 0; transform-origin: left center; box-shadow: inset -2px 0 0 #1b1008; }
.doors__leaf--r { right: 0; transform-origin: right center; box-shadow: inset 2px 0 0 #1b1008; }
.doors__leaf span { display: block; border-radius: 4px; box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .4), inset 0 0 0 10px rgba(255, 220, 170, .05), inset 0 0 0 12px rgba(0, 0, 0, .35), inset 0 0 40px rgba(0, 0, 0, .55); }
.doors__handle { position: absolute; top: 50%; width: 15px; height: 118px; margin-top: -59px; border-radius: 10px; background: linear-gradient(90deg, #8A6425, #F0D79F 45%, #A97F38); box-shadow: 0 8px 18px rgba(0, 0, 0, .6); }
.doors__leaf--l .doors__handle { right: 3.2vw; }
.doors__leaf--r .doors__handle { left: 3.2vw; }
.doors__sign { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); text-align: center; padding: 26px 56px; background: var(--grain-v), linear-gradient(#20160D, #120C07); border: 1px solid rgba(226, 192, 136, .55); border-radius: 6px; box-shadow: 0 30px 70px rgba(0, 0, 0, .7), inset 0 0 0 5px #17100A, inset 0 0 0 6px rgba(226, 192, 136, .3); color: #F2E8D5; transition: opacity .5s, transform .5s; animation: fadeup .8s both; white-space: nowrap; }
.doors__sign small { display: block; font-size: 12px; letter-spacing: .22em; text-transform: uppercase; color: #DDB875; margin-bottom: 6px; }
.doors__sign b { font: 600 clamp(28px, 4vw, 46px) var(--serif); }
.doors.is-open { background: radial-gradient(60% 70% at 50% 50%, rgba(255, 217, 154, 0), rgba(0, 0, 0, 0)); transition: background 1.6s .5s; }
.doors.is-open .doors__leaf--l { transform: rotateY(108deg); filter: brightness(.45); }
.doors.is-open .doors__leaf--r { transform: rotateY(-108deg); filter: brightness(.45); }
.doors.is-open .doors__sign { opacity: 0; transform: translate(-50%, -50%) scale(.94); }

/* Karşılama */
.foyer { position: relative; min-height: min(86vh, 800px); display: flex; align-items: flex-end; overflow: hidden; color: #F2E8D5; }
.foyer__wall .s { animation: none; }
.foyer .spot { background: radial-gradient(680px circle at var(--mx, 62%) var(--my, 34%), rgba(255, 196, 110, .12), rgba(10, 7, 4, .5) 44%, rgba(10, 7, 4, .9) 80%), linear-gradient(90deg, rgba(10, 7, 4, .86), transparent 62%), linear-gradient(transparent 50%, var(--bg)); }
.foyer__inner { position: relative; z-index: 2; width: 100%; max-width: 1320px; margin: 0 auto; padding: 120px clamp(16px, 3.4vw, 44px) 56px; display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; flex-wrap: wrap; }
.foyer__copy h1 { font-size: clamp(56px, 8.4vw, 118px); line-height: .98; margin: 12px 0 18px; text-shadow: 0 6px 50px rgba(0, 0, 0, .7); animation: fadeup .9s .1s both; }
.foyer__copy h1 em { font-style: italic; background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; color: transparent; padding-right: .06em; }
.foyer__lead { font-size: 18px; color: #D6CAB3; max-width: 520px; text-shadow: 0 2px 20px #000; animation: fadeup .9s .25s both; }
.foyer__cta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 28px; animation: fadeup .9s .4s both; }
.foyer .btn--ghost { color: #F2E8D5; border-color: rgba(226, 192, 136, .3); background: rgba(20, 15, 9, .45); }
.resume { display: flex; align-items: center; gap: 22px; width: min(440px, 100%); padding: 20px 24px; background: rgba(24, 18, 11, .68); border: 1px solid rgba(226, 192, 136, .24); border-radius: 18px; backdrop-filter: blur(20px) saturate(1.3); box-shadow: 0 30px 70px -28px #000; transition: border-color .25s, transform .25s; animation: fadeup .9s .55s both; --muted: #B4A68E; }
.resume:hover { border-color: #DDB875; transform: translateY(-3px); }
.resume .cover { width: 92px; height: 138px; }
.resume__t { display: grid; gap: 3px; min-width: 0; flex: 1; }
.resume__t b { font: 600 25px/1.1 var(--serif); }
.resume .eyebrow { margin-bottom: 4px; color: #DDB875; }
.book3d { display: inline-block; flex: none; perspective: 900px; }
.book3d .cover { transform: rotateY(-22deg); transform-origin: left center; transition: transform .45s cubic-bezier(.2, .8, .2, 1); }
.book3d:hover .cover, a:hover > .book3d .cover { transform: rotateY(-6deg) translateY(-4px); }
.book3d--open .cover { animation: bookopen .6s both cubic-bezier(.2, .8, .2, 1); }
@keyframes bookopen { from { transform: rotateY(-70deg) translateX(20px); opacity: 0; } }

.ledger { display: grid; grid-template-columns: repeat(6, 1fr); border-block: 1px solid var(--line); margin: 6px 0 46px; }
.ledger a { padding: 20px 14px 16px; display: grid; gap: 0; border-left: 1px solid var(--line); text-align: center; transition: background .25s; }
.ledger a:first-child { border-left: 0; }
.ledger a:hover { background: var(--card); }
.ledger b { font: 600 44px/1 var(--serif); background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
:root[data-theme="light"] .ledger b { background: none; color: var(--gold); }
.ledger span { color: var(--muted); font-size: 13px; letter-spacing: .06em; margin-top: 5px; }
.block { margin-bottom: 52px; }
.block > h2 { margin-bottom: 18px; font-size: 34px; }
.block__h { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 18px; }
.block__h h2 { font-size: 34px; }
.block__h a { display: inline-flex; align-items: center; gap: 2px; color: var(--muted); font-size: 14px; transition: color .2s; }
.block__h a:hover { color: var(--gold); }
.block__h .icon { width: 15px; height: 15px; }
.showcase { position: relative; }
.showcase__row { display: flex; align-items: flex-end; gap: 26px; overflow-x: auto; padding: 18px 34px 0; scrollbar-width: none; position: relative; z-index: 2; }
.showcase__row::-webkit-scrollbar { display: none; }
.showcase__row .cover { width: 132px; height: 198px; }
.showcase__board { height: 20px; margin-top: -1px; border-radius: 3px; background: var(--grain-h), linear-gradient(#9A6E44, #5B3A24 45%, #3A2414); background-blend-mode: multiply; box-shadow: 0 22px 34px -8px rgba(0, 0, 0, .75), inset 0 1px 0 rgba(255, 228, 180, .32); }
.reading { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.reading__item { display: flex; gap: 16px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 14px; transition: border-color .2s, transform .2s; }
.reading__item:hover { border-color: var(--gold); transform: translateY(-2px); }
.reading__item .cover { width: 66px; height: 99px; flex: none; }
.reading__t { display: grid; align-content: center; gap: 2px; min-width: 0; flex: 1; }
.reading__t b { font: 600 20px var(--serif); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.reading__t small { color: var(--muted); font-size: 13px; }
.bar { height: 4px; background: rgba(226, 192, 136, .18); border-radius: 3px; overflow: hidden; margin: 8px 0 4px; display: block; }
.bar i { display: block; height: 100%; background: var(--gold-grad); transition: width .3s; }
.onboard { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 10px 0 50px; }
.onboard__step { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 26px; display: grid; gap: 4px; transition: border-color .2s, transform .2s; }
.onboard__step:hover { border-color: var(--gold); transform: translateY(-3px); }
.onboard__step span { font: italic 500 38px var(--serif); color: var(--gold); }
.onboard__step b { font: 600 24px var(--serif); }
.onboard__step small { color: var(--muted); font-size: 14.5px; }
.chips { display: flex; flex-wrap: wrap; gap: 9px; }
.chip { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; background: var(--card); border: 1px solid var(--line); border-radius: 999px; font-size: 14px; transition: border-color .2s, color .2s; }
.chip:hover { border-color: var(--gold); color: var(--gold); }
.chip em { font-style: normal; color: var(--muted); font-size: 12.5px; }

/* Kapaklar */
.cover { display: block; object-fit: cover; border-radius: 2px 6px 6px 2px; background: var(--card-2); box-shadow: inset 5px 0 7px -3px rgba(0, 0, 0, .4), 1px 0 0 rgba(255, 255, 255, .16), 3px 2px 0 -1px #E8DFCB, 5px 3px 0 -2px #CFC4AC, 18px 26px 40px -14px rgba(0, 0, 0, .75); }
.cover--blank { background: linear-gradient(100deg, rgba(0, 0, 0, .34) 0, rgba(0, 0, 0, 0) 7%), radial-gradient(120% 80% at 70% 10%, rgba(255, 255, 255, .13), transparent), var(--c); color: #F7F1E5; display: flex; flex-direction: column; justify-content: space-between; padding: 12% 10% 10% 15%; overflow: hidden; }
.cover--blank span { font: 600 18px/1.12 var(--serif); display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
.cover--blank small { font-size: 11px; opacity: .8; }
.cover--large { width: 100%; aspect-ratio: 2/3; height: auto; }
.cover--large.cover--blank span { font-size: 34px; }

/* Kitap listesi */
.filters { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 28px; padding: 10px 12px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r); backdrop-filter: blur(10px); }
.filters select { width: auto; max-width: 190px; padding: 7px 10px; font-size: 14px; }
.bgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)); gap: 36px 26px; }
.bcard { display: grid; gap: 2px; min-width: 0; }
.bcard__cover { position: relative; display: block; margin-bottom: 12px; perspective: 900px; }
.bcard .cover { width: 100%; aspect-ratio: 2/3; height: auto; transform-origin: left center; transition: transform .4s cubic-bezier(.2, .8, .2, 1); }
.bcard:hover .cover { transform: rotateY(-16deg) translateY(-6px); }
.bcard__t { font: 600 19px/1.15 var(--serif); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.bcard__a { color: var(--muted); font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bcard__fav { position: absolute; top: 8px; right: 8px; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: rgba(20, 15, 8, .62); color: #F2A79E; backdrop-filter: blur(6px); }
.bcard__fav .icon { width: 14px; height: 14px; }
.bcard__pdf { position: absolute; left: 8px; top: 8px; background: rgba(20, 15, 8, .7); color: #F0D79F; font-size: 10.5px; font-weight: 700; letter-spacing: .08em; padding: 2px 7px; border-radius: 5px; backdrop-filter: blur(6px); }
.bcard__lent { position: absolute; left: 0; bottom: 10px; background: var(--gold-grad); color: var(--gold-ink); font-size: 11.5px; font-weight: 700; padding: 2px 9px; border-radius: 0 5px 5px 0; }
.blist { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.blist__row { display: grid; grid-template-columns: 44px minmax(0, 2fr) minmax(0, 1.6fr) auto; gap: 16px; align-items: center; padding: 10px 16px; border-top: 1px solid var(--line); transition: background .2s; }
.blist__row:first-child { border-top: 0; }
.blist__row:hover { background: var(--card-2); }
.blist__row .cover { width: 44px; height: 64px; }
.blist__row .cover--blank span { font-size: 7px; }
.blist__row .cover--blank small { display: none; }
.blist__main { display: grid; min-width: 0; }
.blist__main b { font: 600 19px var(--serif); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.blist__main small { color: var(--muted); font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.blist__loc { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 13.5px; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.blist__loc .icon { width: 14px; height: 14px; }
.pill { display: inline-block; padding: 2px 11px; border-radius: 999px; font-size: 12.5px; font-weight: 600; background: var(--card-2); border: 1px solid var(--line); }
.pill--read { color: var(--ok); border-color: currentColor; }
.pill--reading { color: var(--gold); border-color: currentColor; }
.pager { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 40px; }
.empty { text-align: center; padding: 80px 20px; display: grid; gap: 10px; justify-items: center; }
.empty--inline { padding: 40px 20px; }
.empty__icon { width: 46px; height: 46px; color: var(--gold); stroke-width: 1.2; }
.empty__code { font: italic 500 92px/1 var(--serif); color: var(--gold); }
.empty .btn { margin-top: 8px; }

/* Ekleme */
.tabs { display: flex; gap: 26px; border-bottom: 1px solid var(--line); margin-bottom: 26px; overflow-x: auto; scrollbar-width: none; }
.tab { display: inline-flex; align-items: center; gap: 8px; background: none; border: 0; padding: 8px 2px 13px; color: var(--muted); font-weight: 600; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.tab.is-on { color: var(--ink); border-bottom-color: var(--gold); }
.websearch { display: flex; align-items: center; gap: 10px; position: relative; max-width: 760px; margin-bottom: 10px; }
.websearch > .icon { position: absolute; left: 15px; color: var(--muted); }
.websearch input { padding: 14px 14px 14px 44px !important; font-size: 17px; border-radius: 13px !important; }
.websearch .btn { padding: 14px 28px; border-radius: 13px; }
.results { margin-top: 20px; }
.rgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; }
.result { display: flex; gap: 16px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 14px; transition: border-color .2s; }
.result:hover { border-color: var(--gold); }
.result .cover { width: 86px; height: 129px; flex: none; }
.result .cover--blank span { font-size: 13px; }
.result__b { display: flex; flex-direction: column; gap: 2px; min-width: 0; align-items: flex-start; }
.result h3 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 21px; }
.result p { font-size: 14px; }
.result small { color: var(--muted); font-size: 13px; }
.result .btn { margin-top: auto; }
.dropzone { display: grid; justify-items: center; gap: 6px; padding: 56px 24px; text-align: center; border: 1.5px dashed var(--line); border-radius: 18px; background: var(--card); cursor: pointer; transition: border-color .2s, background .2s, transform .2s; }
.dropzone:hover, .dropzone.is-over { border-color: var(--gold); background: var(--card-2); }
.dropzone.is-over { transform: scale(1.01); }
.dropzone .icon { width: 34px; height: 34px; color: var(--gold); margin-bottom: 6px; stroke-width: 1.4; }
.dropzone b { font: 600 27px var(--serif); }
.dropzone small { color: var(--muted); font-size: 14px; max-width: 480px; }
.uploads { display: grid; gap: 10px; margin-top: 18px; }
.upload { display: flex; align-items: center; gap: 14px; padding: 12px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r); }
.upload__thumb { width: 44px; height: 62px; flex: none; display: grid; place-items: center; background: var(--card-2); border-radius: 3px; color: var(--gold); overflow: hidden; }
.upload__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.upload__b { flex: 1; min-width: 0; display: grid; }
.upload__b b { font: 600 19px var(--serif); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.upload__b small { color: var(--muted); font-size: 13px; }
.upload__act { display: flex; gap: 6px; }
.upload.is-failed small { color: var(--danger); }
.upload.is-failed .bar, .upload.is-done .bar { display: none; }
.bform { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 36px; max-width: 1000px; }
.bform__cover { display: grid; gap: 10px; align-content: start; justify-items: center; position: sticky; top: 90px; align-self: start; }
.coverpick { width: 100%; aspect-ratio: 2/3; border-radius: 3px 8px 8px 3px; overflow: hidden; background: var(--card); border: 1px dashed var(--line); }
.coverpick img { width: 100%; height: 100%; object-fit: cover; display: block; }
.coverpick__empty { height: 100%; display: grid; place-content: center; justify-items: center; gap: 8px; color: var(--muted); font-size: 14px; }
.bform__fields { display: grid; gap: 16px; }
.field--shelf { padding: 16px; background: var(--card-2); border: 1px solid var(--line); border-radius: var(--r); }
.bform__actions { display: flex; justify-content: flex-end; gap: 10px; }

/* Kitap detay */
.show__bg { position: fixed; inset: 0; z-index: -1; background-size: cover; background-position: center; filter: blur(70px) saturate(1.3) brightness(.32); transform: scale(1.2); }
:root[data-theme="light"] .show__bg { filter: blur(80px) saturate(1.1) brightness(1.1); opacity: .35; }
.show { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 54px; margin-top: 6px; }
.show__cover { display: grid; gap: 22px; align-content: start; }
.show__loc { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 16px; display: grid; gap: 8px; backdrop-filter: blur(14px); }
.show__loc a { display: grid; }
.show__loc a b { font: 600 22px var(--serif); }
.show__loc a:hover b { color: var(--gold); }
.show__loc small { color: var(--muted); font-size: 13.5px; }
.show__loc select { padding: 8px 10px; font-size: 14px; }
.show__body { display: grid; gap: 20px; align-content: start; max-width: 740px; }
.show__body h1 { font-size: clamp(40px, 5.4vw, 68px); line-height: 1.02; }
.show__sub { font: italic 500 23px var(--serif); color: var(--muted); margin-top: -12px; }
.show__authors { font-size: 18px; margin-top: -8px; }
.show__authors a { border-bottom: 1px solid var(--line); transition: border-color .2s, color .2s; }
.show__authors a:hover { border-color: var(--gold); color: var(--gold); }
.readbox { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.readbox__meta { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 14px; }
.show__controls { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.stars { display: inline-flex; }
.stars button { background: none; border: 0; padding: 3px; color: var(--line); transition: transform .15s; }
.stars button:hover { transform: scale(1.15); }
.stars .icon { width: 23px; height: 23px; }
.stars .is-on { color: var(--gold); }
.stars .is-on .icon { fill: currentColor; }
.progress { display: flex; align-items: center; gap: 8px; font-size: 14.5px; }
.progress input { width: 90px !important; padding: 6px 8px !important; margin-left: 6px; }
.prose { font-size: 17.5px; line-height: 1.72; }
.prose h2 { margin-bottom: 8px; }
.prose--note { padding: 18px 20px; background: var(--card); border-left: 3px solid var(--gold); border-radius: 0 var(--r) var(--r) 0; font-size: 16px; }
.meta { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 14px; margin: 0; padding-block: 18px; border-block: 1px solid var(--line); }
.meta dt { color: var(--muted); font-size: 13px; }
.meta dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.lend h2 { margin-bottom: 8px; }
.lend .btn { margin-top: 8px; }
.lend__form { display: flex; gap: 8px; max-width: 440px; }
.lend__form .btn { margin-top: 0; }
.show__actions { display: flex; gap: 10px; }

/* Oda sahnesi */
.scene { position: relative; height: 100vh; min-height: 620px; overflow: hidden; color: #F2E8D5; }
.stage { position: absolute; inset: 0; }
.hud { position: absolute; z-index: 12; left: clamp(14px, 2.6vw, 34px); right: clamp(14px, 2.6vw, 34px); top: calc(var(--nav-h) + 6px); display: grid; grid-template-columns: 1fr auto; gap: 10px 16px; align-items: center; pointer-events: none; }
.hud > * { pointer-events: auto; }
.hud h1 { font-size: clamp(32px, 4vw, 48px); text-shadow: 0 3px 24px rgba(0, 0, 0, .7); }
.hud p { color: #E0D4BD; text-shadow: 0 2px 14px #000; font-size: 15px; }
.hud__r { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.roomtabs { grid-column: 1 / -1; display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 2px; justify-self: start; max-width: 100%; }
.roomtab { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; background: rgba(20, 15, 9, .55); border: 1px solid rgba(226, 192, 136, .24); color: #F2E8D5; border-radius: 999px; font-weight: 600; font-size: 14px; white-space: nowrap; backdrop-filter: blur(12px); cursor: pointer; }
.roomtab em { font-style: normal; font-weight: 500; font-size: 12.5px; opacity: .7; }
.roomtab.is-on { background: var(--gold-grad); color: var(--gold-ink); border-color: transparent; }
.roomtab--add { border-style: dashed; color: #CFC3AD; }
.roomtab--add .icon { width: 15px; height: 15px; }

.room { position: absolute; inset: 0; display: grid; grid-template-rows: 58px 1fr clamp(96px, 19vh, 190px); }
.room__ceiling { position: relative; z-index: 4; background: var(--grain-h), linear-gradient(#2A1C10, #1B1209); background-blend-mode: multiply; box-shadow: 0 6px 0 -1px #6B4728, 0 7px 0 -1px rgba(255, 220, 170, .35), 0 18px 26px rgba(0, 0, 0, .5); }
.lamp { position: absolute; top: 100%; width: 74px; height: 96px; z-index: 6; }
.lamp::before { content: ""; position: absolute; left: 50%; top: 0; width: 2px; height: 52px; background: #000; margin-left: -1px; }
.lamp::after { content: ""; position: absolute; left: 0; right: 0; top: 50px; height: 34px; border-radius: 50% 50% 8% 8% / 100% 100% 10% 10%; background: linear-gradient(90deg, #6B4A1C, #E2BC74 45%, #7D5820); box-shadow: 0 2px 0 #3a2a10; }
.lamp--a { left: 16%; } .lamp--b { right: 16%; }
.room__wall { position: relative; display: flex; align-items: flex-end; justify-content: center; background: linear-gradient(rgba(0, 0, 0, .15), transparent 30%), var(--wall); overflow: visible; }
.room__wains { position: absolute; left: 0; right: 0; bottom: 0; height: 26%; background: repeating-linear-gradient(90deg, rgba(0, 0, 0, 0) 0 150px, rgba(0, 0, 0, .28) 150px 152px, rgba(255, 255, 255, .06) 152px 154px), linear-gradient(rgba(0, 0, 0, .16), rgba(0, 0, 0, .3)); border-top: 7px solid rgba(0, 0, 0, .28); box-shadow: inset 0 3px 0 rgba(255, 255, 255, .08); }
.room__dim { position: absolute; inset: 0; background: rgba(10, 6, 2, 0); pointer-events: none; transition: background .7s; }
.room.is-night .room__dim { background: radial-gradient(70% 90% at 50% 40%, rgba(16, 9, 3, .4), rgba(10, 6, 2, .82)); }
.room__plane { position: relative; z-index: 2; }
.room__floor { position: relative; overflow: hidden; perspective: 460px; background: #1b1008; z-index: 1; }
.room__floor i { position: absolute; left: -55%; right: -55%; top: 0; height: 230%; transform: rotateX(66deg); transform-origin: top; background: var(--grain-h), repeating-linear-gradient(90deg, rgba(0, 0, 0, .34) 0 2px, transparent 2px 96px), repeating-linear-gradient(0deg, rgba(0, 0, 0, .26) 0 2px, transparent 2px 80px), var(--floor); background-blend-mode: multiply, normal, normal, normal; }
.room__floor::after { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(0, 0, 0, .55), transparent 40%, rgba(0, 0, 0, .3)); transition: background .7s; }
.room.is-night .room__floor::after { background: radial-gradient(60% 120% at 50% 0, rgba(255, 190, 110, .1), rgba(8, 4, 1, .74)); }
.deco { position: absolute; z-index: 6; pointer-events: none; bottom: clamp(26px, 6vh, 64px); filter: drop-shadow(0 18px 18px rgba(0, 0, 0, .6)); transition: filter .7s, opacity .3s; }
.deco--chair { right: 2.6%; width: clamp(110px, 15vw, 220px); }
.deco--plant { left: 1.8%; width: clamp(80px, 9.4vw, 138px); }
.room.is-night .deco { filter: brightness(.6) drop-shadow(0 18px 18px rgba(0, 0, 0, .6)); }
.room.is-design .deco, .room.is-design .motes { opacity: 0; }

.lamp, .room__wall { --glow: 0; }
.room.is-night .lamp { filter: drop-shadow(0 30px 40px rgba(255, 196, 110, .55)); }
.placed { position: absolute; cursor: pointer; transition: filter .25s, transform .25s; transform-origin: bottom center; }
.placed:hover { transform: translateY(-3px) scale(1.012); filter: brightness(1.14); }
.placed__spot { position: absolute; left: -30%; right: -30%; bottom: 58%; top: -46%; pointer-events: none; opacity: 0; background: radial-gradient(50% 58% at 50% 62%, rgba(255, 201, 124, .5), rgba(255, 180, 90, .14) 58%, transparent); transition: opacity .7s; mix-blend-mode: screen; }
.room.is-night .placed__spot { opacity: 1; }
.placed::before { content: ""; position: absolute; left: 34%; right: 34%; top: -18px; height: 7px; border-radius: 6px; background: linear-gradient(90deg, #7D5820, #EAC989, #7D5820); box-shadow: 0 4px 16px rgba(255, 200, 120, .75); z-index: 3; }
.room.is-design .placed { cursor: grab; touch-action: none; outline: 1px dashed rgba(221, 184, 117, .9); outline-offset: 4px; }
.room.is-design .placed:hover { transform: none; }
.room:not(.is-design) .placed { touch-action: auto; }
.placed.is-drag { cursor: grabbing; z-index: 5; filter: drop-shadow(0 22px 26px rgba(0, 0, 0, .55)); }
.placed__name { position: absolute; left: 50%; top: -48px; transform: translateX(-50%) translateY(5px); background: rgba(16, 11, 6, .86); color: #F5EFE3; font: 600 16px var(--serif); padding: 3px 12px; border-radius: 8px; white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity .2s, transform .2s; border: 1px solid rgba(226, 192, 136, .3); z-index: 6; }
.placed__name em { font: 500 12px var(--sans); color: #DDB875; margin-left: 8px; }
.placed:hover .placed__name, .room.is-design .placed__name { opacity: 1; transform: translateX(-50%); }
.placed__resize { position: absolute; right: -8px; top: -8px; width: 18px; height: 18px; background: var(--gold-grad); border: 2px solid #fff; border-radius: 5px; cursor: nesw-resize; touch-action: none; z-index: 7; }
.room__empty { position: absolute; inset: 0; display: grid; place-items: center; font: italic 500 26px/1.3 var(--serif); padding: 20px; text-align: center; color: #F2E8D5; text-shadow: 0 2px 16px #000; }
.motes { position: absolute; inset: 0; pointer-events: none; z-index: 8; overflow: hidden; opacity: 0; transition: opacity 1s; }
.room.is-night .motes { opacity: 1; }
.motes b { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: rgba(255, 224, 170, .7); box-shadow: 0 0 6px rgba(255, 210, 140, .9); animation: drift 16s linear infinite; }
.motes b:nth-child(1) { left: 12%; top: 40%; animation-delay: -2s; } .motes b:nth-child(2) { left: 24%; top: 62%; animation-delay: -7s; } .motes b:nth-child(3) { left: 36%; top: 30%; animation-delay: -4s; } .motes b:nth-child(4) { left: 48%; top: 55%; animation-delay: -11s; } .motes b:nth-child(5) { left: 58%; top: 25%; animation-delay: -1s; } .motes b:nth-child(6) { left: 68%; top: 66%; animation-delay: -9s; } .motes b:nth-child(7) { left: 78%; top: 38%; animation-delay: -13s; } .motes b:nth-child(8) { left: 86%; top: 58%; animation-delay: -5s; } .motes b:nth-child(9) { left: 18%; top: 22%; animation-delay: -15s; } .motes b:nth-child(10) { left: 42%; top: 72%; animation-delay: -3s; } .motes b:nth-child(11) { left: 62%; top: 44%; animation-delay: -8s; } .motes b:nth-child(12) { left: 74%; top: 20%; animation-delay: -12s; } .motes b:nth-child(13) { left: 30%; top: 50%; animation-delay: -6s; } .motes b:nth-child(14) { left: 90%; top: 30%; animation-delay: -10s; }
@keyframes drift { 0% { transform: translate(0, 0); opacity: 0; } 15% { opacity: .9; } 85% { opacity: .6; } 100% { transform: translate(46px, -140px); opacity: 0; } }

.mini { width: 100%; height: 100%; display: flex; flex-direction: column; position: relative; filter: drop-shadow(0 16px 22px rgba(0, 0, 0, .55)); }
.mini__crown { height: 3.2%; min-height: 6px; margin: 0 -2.4%; border-radius: 2px 2px 0 0; background: var(--grain-h), linear-gradient(rgba(255, 228, 180, .22), rgba(0, 0, 0, .28)), var(--frame); background-blend-mode: multiply, normal, normal; }
.mini__body { flex: 1; min-height: 0; display: flex; gap: 2%; padding: 1.8%; background: var(--grain-v), linear-gradient(90deg, rgba(0, 0, 0, .26), transparent 8% 92%, rgba(0, 0, 0, .26)), var(--frame); background-blend-mode: multiply, normal, normal; }
.mini__plinth { height: 3%; min-height: 5px; background: linear-gradient(rgba(0, 0, 0, .3), rgba(0, 0, 0, .55)), var(--frame); }
.mini__col { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3%; }
.mini__shelf { display: flex; align-items: flex-end; gap: 0; min-height: 0; padding: 0 2px; overflow: hidden; background: linear-gradient(rgba(255, 196, 120, .24), rgba(0, 0, 0, 0) 16%), linear-gradient(rgba(0, 0, 0, .3), rgba(0, 0, 0, .1)), var(--back); transition: box-shadow .15s, background .15s; }
.mini__shelf i { display: block; flex: none; min-width: 1.5px; background-image: linear-gradient(90deg, rgba(0, 0, 0, .4), rgba(255, 255, 255, .14) 40%, rgba(0, 0, 0, .34)); }
.mini__shelf.is-over { box-shadow: inset 0 0 0 2px #E8C47F, 0 0 18px rgba(232, 196, 127, .8); }

/* Tasarım paneli */
.designer { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; align-items: start; }
.designer.has-panel { grid-template-columns: minmax(0, 1fr) 300px; }
.panel { background: rgba(24, 18, 11, .86); color: #F2E8D5; border: 1px solid rgba(226, 192, 136, .24); border-radius: 16px; padding: 20px; display: grid; gap: 14px; backdrop-filter: blur(22px) saturate(1.3); box-shadow: var(--shadow); max-height: calc(100vh - 110px); overflow-y: auto; --muted: #B4A68E; --line: rgba(226, 192, 136, .24); --field: rgba(255, 240, 214, .06); --gold: #DDB875; --card-solid: #1C160F; --ink: #F2E8D5; }
.scene .panel { position: absolute; z-index: 14; right: clamp(14px, 2.6vw, 34px); top: calc(var(--nav-h) + 62px); width: 300px; max-height: calc(100vh - 150px); }
.atelier .panel { position: sticky; top: 84px; }
.swatches { display: flex; flex-wrap: wrap; gap: 8px; }
.swatch { width: 32px; height: 32px; border-radius: 50%; border: 2px solid rgba(20, 15, 9, .9); box-shadow: 0 0 0 1px rgba(226, 192, 136, .3); padding: 0; cursor: pointer; transition: transform .15s; }
.swatch:hover { transform: scale(1.1); }
.swatch--split { background: linear-gradient(180deg, var(--a) 62%, var(--b) 62%); }
.swatch.is-on { box-shadow: 0 0 0 2px #E8C47F; }
.colorfield { display: flex; align-items: center; gap: 8px; font-size: 13.5px; }
.colorfield input { width: 32px; height: 32px; border: 1px solid var(--line); padding: 0; background: none; border-radius: 7px; }
.stepper { display: inline-flex; align-items: center; gap: 4px; justify-self: start; border: 1px solid var(--line); border-radius: 10px; }
.stepper button { width: 38px; height: 38px; background: none; border: 0; display: grid; place-items: center; }
.stepper b { min-width: 28px; text-align: center; }
.templates { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.template { display: grid; gap: 3px; justify-items: center; padding: 10px 4px; background: var(--card-2); border: 1px solid var(--line); border-radius: 10px; }
.template.is-on { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold); }
.template__art { display: grid; gap: 2px; width: 48px; height: 58px; padding: 2px; background: #5B3A24; border-radius: 2px; }
.template__art i { background: #2C1B10; }
.template b { font-size: 12.5px; }
.template small { font-size: 11px; color: var(--muted); }

/* Kitaplık içi */
.atelier { position: relative; min-height: 100vh; padding: calc(var(--nav-h) + 12px) clamp(14px, 2.6vw, 34px) 230px; color: #F2E8D5; --muted: #B4A68E; background: radial-gradient(70% 55% at 50% 22%, rgba(255, 190, 110, .13), transparent 72%), linear-gradient(rgba(8, 5, 2, .6), rgba(8, 5, 2, .9)), var(--wall, #2A1E14); }
.atelier__hud { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; max-width: 1500px; margin: 0 auto 30px; }
.atelier__hud h1 { font-size: clamp(36px, 4.6vw, 58px); }
.atelier__hud p { color: #CFC3AD; }
.atelier .designer { max-width: 1500px; margin: 0 auto; }
.atelier .seg { background: rgba(20, 15, 9, .55); --line: rgba(226, 192, 136, .24); }
.casewrap { overflow-x: auto; padding: 22px 12px 34px; scrollbar-width: thin; scrollbar-color: rgba(226, 192, 136, .3) transparent; }
.case { position: relative; min-width: max-content; padding: 16px 16px 0; background: var(--grain-v), linear-gradient(90deg, rgba(0, 0, 0, .34), rgba(255, 228, 180, .06) 2%, transparent 6% 94%, rgba(255, 228, 180, .06) 98%, rgba(0, 0, 0, .34)), var(--frame); background-blend-mode: multiply, normal, normal; box-shadow: 0 50px 90px -30px #000, 0 0 120px rgba(255, 190, 110, .08); }
.case__crown { position: absolute; left: -14px; right: -14px; top: -18px; height: 20px; border-radius: 3px 3px 0 0; background: var(--grain-h), linear-gradient(rgba(255, 228, 180, .3), rgba(0, 0, 0, .18) 45%, rgba(0, 0, 0, .46)), var(--frame); background-blend-mode: multiply, normal, normal; box-shadow: 0 8px 12px -4px rgba(0, 0, 0, .6); }
.case__cols { display: flex; gap: 16px; }
.case__col { flex: 1; min-width: 350px; display: grid; gap: 0; align-content: start; }
.shelf { position: relative; background: linear-gradient(rgba(6, 3, 1, .72), rgba(6, 3, 1, .1) 34%, rgba(6, 3, 1, .32)), var(--back); box-shadow: inset 14px 0 18px -14px #000, inset -14px 0 18px -14px #000; transition: box-shadow .18s; }
.shelf.is-over { box-shadow: inset 0 0 0 2px rgba(232, 196, 127, .9), inset 0 0 60px rgba(232, 196, 127, .22); }
.shelf.just-landed .shelf__led { animation: flash .7s ease-out; }
@keyframes flash { 30% { opacity: 1; height: 6px; box-shadow: 0 0 60px 26px rgba(255, 205, 130, .5); } }
.shelf__led { position: absolute; left: 3%; right: 3%; top: 0; height: 2px; z-index: 1; opacity: .85; background: linear-gradient(90deg, transparent, #FFD9A0 18% 82%, transparent); box-shadow: 0 0 34px 12px rgba(255, 196, 120, .3); pointer-events: none; }
.shelf__label { position: absolute; left: 10px; top: 8px; z-index: 4; font-size: 11.5px; font-weight: 600; color: #F5EFE3; background: rgba(15, 11, 5, .55); padding: 1px 8px; border-radius: 5px; display: inline-flex; gap: 6px; pointer-events: none; backdrop-filter: blur(4px); }
.shelf__label em { font-style: normal; color: #DDB875; }
.shelf__books { position: absolute; inset: 30px 0 14px; display: flex; align-items: flex-end; gap: 1.5px; padding: 0 12px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; z-index: 2; }
.shelf__books::-webkit-scrollbar { display: none; }
.shelf__board { position: absolute; left: -2px; right: -2px; bottom: 0; height: 14px; z-index: 3; background: var(--grain-h), linear-gradient(rgba(255, 228, 180, .34), rgba(255, 228, 180, .04) 22%, rgba(0, 0, 0, .34)), var(--frame); background-blend-mode: multiply, normal, normal; box-shadow: 0 6px 10px -2px rgba(0, 0, 0, .55); pointer-events: none; }

.spine { flex: none; position: relative; display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 12px 0 10px; border: 0; color: var(--ink); background: linear-gradient(90deg, rgba(0, 0, 0, .55) 0, rgba(255, 255, 255, .2) 16%, rgba(255, 255, 255, .05) 42%, rgba(0, 0, 0, .1) 72%, rgba(0, 0, 0, .55) 100%), var(--noise), var(--c); border-radius: 3px 3px 0 0; cursor: grab; touch-action: manipulation; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; overflow: hidden; transition: transform .2s cubic-bezier(.2, .8, .2, 1), filter .2s; transform-origin: bottom; box-shadow: 1px 0 2px rgba(0, 0, 0, .5); }
.spine:hover { transform: translateY(-11px); filter: brightness(1.13); }
.spine__t, .spine__a { writing-mode: vertical-rl; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-height: 100%; }
.spine__t { font: 600 15px var(--serif); letter-spacing: .01em; flex: 1 1 auto; min-height: 0; text-shadow: 0 1px 1px rgba(0, 0, 0, .3); }
.spine__a { font-size: 10px; letter-spacing: .05em; opacity: .85; flex: 0 1 auto; max-height: 30%; min-height: 0; }
.spine__rule { display: block; flex: none; width: 100%; height: 0; }
.spine--v0 .spine__rule, .spine--v3 .spine__rule { height: 5px; border-block: 1px solid var(--gold); opacity: .85; }
.spine--v0 .spine__t, .spine--v0 .spine__a { color: var(--gold); }
.spine--v1 .spine__t { font-family: "Playfair Display", var(--serif); font-size: 13.5px; font-weight: 700; }
.spine--v2 .spine__t { font: 700 12.5px var(--sans); letter-spacing: .08em; text-transform: uppercase; }
.spine--v3::before, .spine--v3::after { content: ""; position: absolute; left: 0; right: 0; height: 6px; background: rgba(0, 0, 0, .18); box-shadow: 0 1px 0 rgba(255, 255, 255, .14); }
.spine--v3::before { top: 26%; } .spine--v3::after { top: 66%; }
.spine__pdf { position: absolute; right: 3px; top: 4px; width: 5px; height: 5px; border-radius: 50%; background: #F0D79F; box-shadow: 0 0 5px #F0D79F; }
.front { flex: none; padding: 0; border: 0; background: none; aspect-ratio: 2/3; cursor: grab; touch-action: manipulation; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; margin-right: 10px; transition: transform .2s cubic-bezier(.2, .8, .2, 1); transform-origin: bottom; }
.front:hover { transform: translateY(-9px) scale(1.03); }
.front img, .front__blank { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 1px 4px 4px 1px; box-shadow: inset 3px 0 5px -2px rgba(0, 0, 0, .45), 6px 8px 16px -4px rgba(0, 0, 0, .7); pointer-events: none; }
.front__blank { background: var(--c); color: var(--ink); font: 600 13px/1.15 var(--serif); padding: 10% 8%; overflow: hidden; text-align: left; }
.case__plinth { height: 24px; margin: 0 -16px; background: var(--grain-h), linear-gradient(rgba(0, 0, 0, .2), rgba(0, 0, 0, .55)), var(--frame); background-blend-mode: multiply, normal, normal; }
.case.is-design .shelf { outline: 1px dashed rgba(221, 184, 117, .55); outline-offset: -1px; }
.case.is-design .spine, .case.is-design .front { cursor: default; }
.shelf__tools { position: absolute; right: 8px; top: 6px; z-index: 5; display: flex; gap: 4px; }
.shelf__tools button { width: 28px; height: 28px; display: grid; place-items: center; background: rgba(15, 11, 5, .7); color: #F5EFE3; border: 0; border-radius: 7px; }
.shelf__tools .icon { width: 14px; height: 14px; }
.shelf__resize { position: absolute; left: 0; right: 0; bottom: -7px; height: 16px; z-index: 6; display: flex; align-items: center; justify-content: center; cursor: ns-resize; touch-action: none; }
.shelf__resize i { width: 52px; height: 5px; border-radius: 3px; background: var(--gold-grad); }
.shelf__resize span { position: absolute; right: 10px; font-size: 11px; font-weight: 700; background: var(--gold-grad); color: var(--gold-ink); padding: 0 7px; border-radius: 5px; }
.case__add { display: inline-flex; align-items: center; justify-content: center; gap: 6px; margin-top: 10px; padding: 10px; background: rgba(255, 240, 214, .07); color: #F5EFE3; border: 1px dashed rgba(226, 192, 136, .45); border-radius: 6px; font-size: 13.5px; font-weight: 600; }
.case__add .icon { width: 15px; height: 15px; }

.ghost { position: fixed !important; left: 0; top: 0; z-index: 150; pointer-events: none; margin: 0 !important; transition: none !important; box-shadow: 0 30px 44px -8px rgba(0, 0, 0, .75), 0 0 0 1px rgba(232, 196, 127, .5); filter: brightness(1.1); }
.is-source { display: none !important; }
.holder { flex: none; display: block; align-self: flex-end; border-radius: 3px 3px 0 0; background: linear-gradient(rgba(232, 196, 127, .34), rgba(232, 196, 127, .12)); box-shadow: inset 0 0 0 1px rgba(232, 196, 127, .75), 0 0 22px rgba(232, 196, 127, .28); transition: width .16s cubic-bezier(.2, .8, .2, 1); overflow: hidden; }
body.is-dragging, body.is-dragging * { cursor: grabbing !important; user-select: none; }
body.is-dragging .spine:hover, body.is-dragging .front:hover { transform: none; filter: none; }
.is-focus { animation: pulse 1.15s ease-in-out 3; z-index: 2; }
@keyframes pulse { 50% { transform: translateY(-20px); box-shadow: 0 0 0 3px #E8C47F, 0 16px 26px rgba(0, 0, 0, .6), 0 0 34px rgba(232, 196, 127, .8); } }

.peek { position: fixed; z-index: 60; width: 150px; padding: 10px; display: grid; gap: 2px; pointer-events: none; background: rgba(20, 15, 9, .94); border: 1px solid rgba(226, 192, 136, .3); border-radius: 12px; color: #F2E8D5; box-shadow: 0 24px 50px -10px #000; animation: fadeup .16s both; }
.peek img { width: 100%; aspect-ratio: 2/3; object-fit: cover; border-radius: 2px 5px 5px 2px; margin-bottom: 7px; }
.peek b { font: 600 17px/1.15 var(--serif); }
.peek small { font-size: 12px; color: #B4A68E; }

.cart { position: fixed; z-index: 30; left: 50%; bottom: 14px; transform: translateX(-50%); width: min(1120px, calc(100% - 24px)); background: rgba(22, 16, 10, .84); color: #F2E8D5; border: 1px solid rgba(226, 192, 136, .28); border-radius: 18px; backdrop-filter: blur(22px) saturate(1.35); box-shadow: 0 30px 70px -18px #000, inset 0 1px 0 rgba(255, 240, 214, .1); transition: box-shadow .2s; }
.cart.is-over { box-shadow: 0 0 0 2px #E8C47F, 0 30px 70px -18px #000; }
.cart__head { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 16px; background: none; border: 0; color: inherit; text-align: left; }
.cart__head b { font: 600 19px var(--serif); }
.cart__head span { min-width: 22px; padding: 0 7px; text-align: center; border-radius: 999px; background: var(--gold-grad); color: var(--gold-ink); font-size: 12px; font-weight: 700; }
.cart__head span:empty { display: none; }
.cart__head small { color: #B4A68E; font-size: 13px; margin-right: auto; }
.cart__chev { transform: rotate(90deg); transition: transform .25s; width: 16px; height: 16px; }
.cart.is-closed .cart__chev { transform: rotate(-90deg); }
.cart__books { display: flex; align-items: flex-end; gap: 2px; height: 120px; padding: 0 16px 12px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
.cart__books::-webkit-scrollbar { display: none; }
.cart.is-closed .cart__books { display: none; }
.cart__books .spine, .cart__books .holder { height: 104px !important; }
.cart__books .front { height: 104px !important; }
.cart__empty { margin: auto; color: #B4A68E; font: italic 500 18px var(--serif); }

.drawer { position: fixed; inset: 0; z-index: 70; }
.drawer__scrim { position: absolute; inset: 0; background: rgba(8, 5, 2, .6); backdrop-filter: blur(4px); }
.drawer__body { position: absolute; right: 0; top: 0; bottom: 0; width: min(400px, 100vw); background: var(--card-solid); border-left: 1px solid var(--line); padding: 34px 28px; overflow-y: auto; display: grid; gap: 10px; align-content: start; justify-items: start; animation: slidein .26s cubic-bezier(.2, .8, .2, 1); color: var(--ink); }
.drawer__body .book3d { justify-self: center; margin-bottom: 14px; }
.drawer__body .cover { width: 170px; height: 255px; }
.drawer__body h2 { font-size: 32px; }
.drawer__x { position: absolute; top: 10px; right: 10px; }
.drawer__text { font-size: 15.5px; line-height: 1.65; }
@keyframes slidein { from { transform: translateX(40px); opacity: 0; } }

/* Diğer */
.coll { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.coll__item { display: flex; align-items: center; gap: 13px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 12px 14px; transition: border-color .2s, transform .2s; }
.coll__item:hover { border-color: var(--gold); transform: translateY(-2px); }
.coll__item > .icon { color: var(--muted); width: 16px; height: 16px; }
.coll__t { display: grid; flex: 1; min-width: 0; }
.coll__t b { font: 600 20px var(--serif); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.coll__t small { color: var(--muted); }
.settings { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 18px; align-items: start; }
.settings h2 { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
.settings h3 { margin: 18px 0 8px; }
.settings .btn { justify-self: start; }
.addr { display: block; margin: 8px 0; padding: 10px 12px; background: var(--card-2); border: 1px solid var(--line); border-radius: 9px; font-size: 14px; overflow-wrap: anywhere; }
.devices { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.devices li { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.devices span { display: grid; }
.devices small { color: var(--muted); font-size: 12.5px; }

/* Bildirim ve pencere */
.toasts { position: fixed; left: 50%; bottom: 170px; transform: translateX(-50%); z-index: 160; display: grid; gap: 8px; justify-items: center; width: max-content; max-width: calc(100vw - 32px); }
.toast { display: flex; align-items: center; gap: 14px; background: #F3E6CB; color: #231A0D; padding: 11px 18px; border-radius: 12px; font-size: 14.5px; font-weight: 500; box-shadow: 0 16px 40px rgba(0, 0, 0, .5); animation: toastin .24s cubic-bezier(.2, .8, .2, 1); transition: opacity .3s; }
.toast button { background: none; border: 0; padding: 0; font-weight: 700; color: #7A2230; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.toast--err { background: #8E2A2A; color: #fff; }
.toast.is-out { opacity: 0; }
@keyframes toastin { from { transform: translateY(12px); opacity: 0; } }
.modal { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 16px; }
.modal__scrim { position: absolute; inset: 0; background: rgba(8, 5, 2, .62); backdrop-filter: blur(4px); }
.modal__box { position: relative; background: var(--card-solid); border: 1px solid var(--line); border-radius: 16px; padding: 24px; width: min(480px, 100%); max-height: calc(100vh - 32px); overflow-y: auto; box-shadow: 0 40px 90px rgba(0, 0, 0, .55); display: grid; gap: 14px; animation: toastin .2s ease-out; }
.modal__body { display: grid; gap: 14px; }
.modal__actions { display: flex; justify-content: flex-end; gap: 8px; }

@media (max-width: 1180px) {
  .nav__links { display: none; }
  .nav__search { margin-left: 8px; max-width: none; }
  .tabbar { display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; background: rgba(14, 10, 6, .92); backdrop-filter: blur(18px); border-top: 1px solid rgba(226, 192, 136, .16); padding-bottom: env(safe-area-inset-bottom); color: #BDB19B; }
  .tabbar a { display: grid; justify-items: center; gap: 1px; padding: 8px 2px 7px; font-size: 11px; font-weight: 500; }
  .tabbar a.is-active { color: #F3DFB4; }
  .content { padding-bottom: 90px; }
  .cart { bottom: 66px; }
  .toasts { bottom: 230px; }
  .scene { height: calc(100vh - 56px); }
  .designer.has-panel { grid-template-columns: minmax(0, 1fr); }
  .atelier .panel { position: static; max-height: none; }
  .ledger { grid-template-columns: repeat(3, 1fr); }
  .ledger a:nth-child(4) { border-left: 0; }
  .ledger a:nth-child(n+4) { border-top: 1px solid var(--line); }
}
@media (max-width: 820px) {
  :root { --nav-h: 60px; }
  .brand__name { display: none; }
  .nav { gap: 10px; }
  .nav__tools .btn { display: none; }
  .gate { grid-template-columns: minmax(0, 1fr); align-content: center; }
  .gate__copy .brand { margin-bottom: 18px; }
  .gate__copy .brand__name { display: inline; }
  .gate__sub { display: none; }
  .gate__lead { font-size: 42px; }
  .foyer { min-height: 76vh; }
  .foyer__inner { padding-top: 100px; padding-bottom: 36px; }
  .onboard { grid-template-columns: minmax(0, 1fr); }
  .bform, .show { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .bform__cover { position: static; }
  .coverpick { max-width: 180px; }
  .show__cover .cover--large { max-width: 210px; justify-self: center; }
  .row3 { grid-template-columns: 1fr 1fr; }
  .blist__row { grid-template-columns: 44px minmax(0, 1fr) auto; }
  .blist__loc { display: none; }
  .bgrid { grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 24px 16px; }
  .bcard__t { font-size: 16px; }
  .rgrid, .settings { grid-template-columns: minmax(0, 1fr); }
  .case__col { min-width: 286px; }
  .templates { grid-template-columns: 1fr 1fr; }
  .filters select { flex: 1 1 42%; max-width: none; }
  .websearch .btn { padding-inline: 16px; }
  .hud { grid-template-columns: 1fr; }
  .hud__r { justify-content: flex-start; }
  .hud p { display: none; }
  .cart__head small { display: none; }
  .cart__head b { margin-right: auto; }
  .cart__books { height: 96px; }
  .cart__books .spine, .cart__books .holder, .cart__books .front { height: 82px !important; }
  .room { grid-template-rows: 44px 1fr 130px; }
  .lamp { display: none; }
  .deco--chair { display: none; }
  .scene .panel { left: 12px; right: 12px; width: auto; top: auto; bottom: 8px; max-height: 46vh; }
  .atelier { padding-bottom: 240px; }
  .doors__sign { padding: 20px 26px; }
  .upload { flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .doors { display: none !important; }
}

/* Kurulum */
.setup { max-width: 1120px; margin: 0 auto; padding: 28px clamp(16px, 3vw, 32px) 60px; }
.setup__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 34px; }
.setup__head .brand { color: var(--ink); }
.setup__head nav { display: flex; gap: 18px; color: var(--gold); font-weight: 600; font-size: 14.5px; }
.setup__lead { max-width: 640px; margin: 8px 0 26px; }
.setup__msg { margin-bottom: 18px; }
.alert--ok { background: color-mix(in srgb, var(--ok) 14%, transparent); color: var(--ok); }
.setup__grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 20px; align-items: start; margin-top: 18px; }
.setup__form { display: grid; gap: 18px; }
.setup__form .btn { justify-self: start; }
.setup__form .btn--wide { justify-self: stretch; }
.setup__login { max-width: 420px; margin: 8vh auto 0; display: grid; gap: 12px; }
.setup__login h1 { font-size: 36px; }
.checks { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 10px; }
.checks li { display: grid; grid-template-columns: 24px 1fr; column-gap: 8px; align-items: center; }
.checks i { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; font-style: normal; font-weight: 700; font-size: 13px; grid-row: span 2; }
.checks .is-ok i { color: var(--ok); background: color-mix(in srgb, var(--ok) 16%, transparent); }
.checks .is-bad i { color: var(--danger); background: color-mix(in srgb, var(--danger) 18%, transparent); }
.checks b { font-size: 14.5px; font-weight: 600; }
.checks small { color: var(--muted); font-size: 12.5px; }

/* Yönetici paneli */
.adm-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 14px; flex-wrap: wrap; margin-bottom: 16px; }
.adm-head h1 { margin-top: 3px; }
.adm-tabs { display: flex; gap: 24px; border-bottom: 1px solid var(--line); margin-bottom: 26px; overflow-x: auto; scrollbar-width: none; }
.adm-tabs a { padding: 8px 2px 12px; color: var(--muted); font-weight: 600; font-size: 14.5px; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; display: inline-flex; align-items: center; gap: 7px; }
.adm-tabs a.is-on { color: var(--ink); border-bottom-color: var(--gold); }
.adm-tabs__end { margin-left: auto; }
.adm-tabs .icon { width: 15px; height: 15px; }
.adm-sub { margin-bottom: 18px; }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(165px, 1fr)); gap: 12px; margin-bottom: 20px; }
.kpis div { display: grid; gap: 1px; padding: 16px 18px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r); }
.kpis span { color: var(--muted); font-size: 13px; }
.kpis b { font: 600 36px/1.08 var(--serif); }
.kpis small { color: var(--muted); font-size: 12.5px; }
.adm-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.adm-grid h2, .adm-recent h2 { font-size: 24px; }
.adm-grid .small { margin-bottom: 8px; }
.adm-recent { margin-top: 16px; }
.adm-search { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.adm-search input[type=search] { max-width: 340px; }
.adm-user { display: grid; }
.adm-user b { font-weight: 600; }
.adm-user em { font-style: normal; font-size: 11px; color: var(--gold-ink); background: var(--gold-grad); padding: 0 6px; border-radius: 4px; margin-left: 4px; }
.adm-user small { color: var(--muted); }
.tbl-wrap { padding: 8px 12px; overflow-x: auto; }
.adm-recent.tbl-wrap { padding: 18px; }
.tbl { width: 100%; border-collapse: collapse; font-size: 14px; }
.tbl--wide { min-width: 760px; }
.tbl th { text-align: left; font-size: 12.5px; font-weight: 600; color: var(--muted); padding: 10px 10px; white-space: nowrap; }
.tbl th a.is-sorted { color: var(--gold); }
.tbl td { padding: 9px 10px; border-top: 1px solid var(--line); vertical-align: middle; }
.tbl td a { color: var(--gold); }
.tbl td a.adm-user { color: inherit; }
.tbl .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tbl code { font-size: 12.5px; color: var(--muted); }
.chart__none { color: var(--muted); padding: 32px 0; text-align: center; font: italic 500 19px var(--serif); }
.chart__table { margin-top: 8px; font-size: 13px; color: var(--muted); }
.chart__table summary { cursor: pointer; }
.chart__table .tbl { margin-top: 6px; max-width: 320px; }
.cc { margin: 12px 0 0; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px; }
.cc__y { height: 170px; display: flex; flex-direction: column; justify-content: space-between; text-align: right; font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.cc__y span { line-height: 1; }
.cc__plot { height: 170px; display: flex; align-items: flex-end; gap: 2px; background: linear-gradient(var(--line) 1px, transparent 1px) 0 0 / 100% 50%; border-bottom: 1px solid var(--line); }
.cc__col { flex: 1; min-width: 0; height: 100%; display: flex; align-items: flex-end; position: relative; outline: none; }
.cc__col span { display: block; width: 100%; max-width: 18px; margin: 0 auto; min-height: 0; background: var(--gold); border-radius: 4px 4px 0 0; transition: filter .15s; }
.cc__col:hover span, .cc__col:focus span { filter: brightness(1.2); }
.cc__col:hover::after, .cc__col:focus::after { content: attr(data-tip); position: absolute; left: 50%; bottom: calc(100% - 26px); transform: translateX(-50%); z-index: 5; padding: 4px 9px; border-radius: 7px; background: var(--card-solid); border: 1px solid var(--line); color: var(--ink); font-size: 12px; white-space: nowrap; box-shadow: var(--shadow); pointer-events: none; }
.cc__col:first-child:hover::after, .cc__col:nth-child(2):hover::after { left: 0; transform: none; }
.cc__col:last-child:hover::after, .cc__col:nth-last-child(2):hover::after { left: auto; right: 0; transform: none; }
.cc__x { display: flex; gap: 2px; margin-top: 5px; font-size: 11.5px; color: var(--muted); }
.cc__x span { flex: 1; min-width: 0; white-space: nowrap; overflow: visible; }
.hb { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 9px; }
.hb li { display: grid; grid-template-columns: minmax(0, 150px) minmax(0, 1fr) auto; gap: 10px; align-items: center; font-size: 14px; }
.hb__l { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hb__t { height: 8px; }
.hb__t i { display: block; height: 100%; min-width: 3px; background: var(--gold); border-radius: 0 4px 4px 0; }
.hb__v { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.hb__v small { color: var(--muted); margin-left: 3px; }
@media (max-width: 900px) {
  .setup__grid, .adm-grid { grid-template-columns: minmax(0, 1fr); }
}