/* — Koleksiyon Kitabı · modern tema, dark/light — */
@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;
  src:url('../fonts/inter-latin.woff2') format('woff2')}
@font-face{font-family:'Libre Baskerville';font-style:normal;font-weight:700;font-display:swap;
  src:url('../fonts/libre-baskerville-700.woff2') format('woff2')}
@font-face{font-family:'Playfair Display';font-style:normal;font-weight:700;font-display:swap;
  src:url('../fonts/playfair-display-700.woff2') format('woff2')}
:root{--title-font:'Playfair Display',Georgia,serif}
:root{
  --bg:#0A0A0C; --bg2:#0E0E12; --surface:#141418; --surface2:#1C1C22; --panel-bg:#141418;
  --topbar-bg:#141418;
  --text:#F5F5F7; --muted:#8E8E93; --line:#26262C;
  --accent:#C5A059; --accent-ink:#1A1408; --progress:#C5A059;
  --art-bg:#060608;
  --topbar-h:56px;
}
html[data-theme="light"]{
  --bg:#F5F5F7; --bg2:#EDEDF0; --surface:#FFFFFF; --surface2:#F1F1F4; --panel-bg:#FFFFFF;
  --topbar-bg:#FFFFFF;
  --text:#1D1D1F; --muted:#6E6E73; --line:#E5E5EA;
  --accent:#A17F3B; --accent-ink:#fff; --progress:#C5A059;
  --art-bg:#E9E9EC;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{height:100%}
html,body{margin:0;padding:0}
body.gallery{
  font-family:'Inter',system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  color:var(--text); background:linear-gradient(var(--bg),var(--bg2));
  height:100dvh; overflow:hidden; display:flex; flex-direction:column;
  -webkit-font-smoothing:antialiased;
}
.vignette{position:fixed;inset:0;pointer-events:none;z-index:1;
  background:radial-gradient(120% 90% at 50% 40%, transparent 60%, rgba(0,0,0,.35) 100%)}
html[data-theme="light"] .vignette{display:none}
.grain{display:none}

/* üst bar */
.topbar{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:10px 16px;z-index:5;border-bottom:1px solid var(--line);
  background:var(--topbar-bg);backdrop-filter:blur(12px);
  max-height:200px;overflow:hidden;transition:max-height .3s ease, padding .3s ease, border .3s ease}
body.toolbar-hidden .topbar{max-height:0;padding-top:0;padding-bottom:0;border-bottom:none}
.brand{min-width:0;flex:1 1 auto;display:flex;align-items:center;gap:10px}
.brand::before{content:'';width:2px;align-self:stretch;background:var(--accent);border-radius:2px}
.brand-t{display:block;font-family:var(--title-font);font-size:clamp(19px,2.4vw,25px);font-weight:600;letter-spacing:.3px;
  text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.brand-sub{display:block;font-size:10px;letter-spacing:2.5px;text-transform:uppercase;color:var(--muted);font-weight:600}
.actions{display:flex;gap:8px;align-items:center}
.actions button{font-family:inherit;font-size:13px;font-weight:600;padding:8px 14px;border-radius:999px;cursor:pointer;
  border:1px solid var(--line);background:transparent;color:var(--text)}
.actions button:hover{border-color:var(--accent);color:var(--accent)}
.actions button.icon{width:36px;height:36px;padding:0;display:grid;place-items:center;font-size:16px}
/* progress kaldirildi */

/* sahne: tam ekran */
.stage{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;padding:14px 16px 6px;z-index:2;width:100%;margin:0 auto}
body.cozy .stage{max-width:1120px;padding:16px 18px 8px}
.book-wrap{flex:1 1 auto;min-height:0;display:flex;align-items:stretch;gap:0;position:relative}
.book{position:relative;flex:1 1 auto;min-width:0;min-height:0;display:grid;grid-template-columns:1.15fr 1fr;
  background:var(--surface);color:var(--text);
  border:1px solid var(--line);border-radius:20px;overflow:hidden;
  box-shadow:0 24px 70px rgba(0,0,0,.35)}
body.cozy .book{border-radius:20px}
.book.flip .page-left{animation:turn .45s ease}
.book.flip .page-right{animation:fadein .45s ease}
@keyframes turn{0%{transform:rotateY(0)}35%{transform:rotateY(-10deg)}100%{transform:rotateY(0)}}
@keyframes fadein{from{opacity:.3}to{opacity:1}}
.page{min-height:0;min-width:0;overflow:auto;padding:clamp(14px,2.4vw,32px);scrollbar-width:thin}
.page-left{background:var(--art-bg);display:flex;flex-direction:column;border-right:1px solid var(--line)}
.page-right{background:var(--panel-bg);display:flex;flex-direction:column}
.plate{margin:2px 0 12px;font-size:11px;line-height:1.6;letter-spacing:2px;color:var(--muted);font-variant-numeric:tabular-nums;
  border:1px solid var(--line);border-radius:999px;padding:4px 12px;display:inline-flex;align-items:center}
.plate::before{content:none}
.plate .ic.gold{width:12px;height:12px;color:var(--accent);margin-right:7px}
.actions .pill-gold{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;
  color:var(--accent);border:1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  background:color-mix(in srgb, var(--accent) 12%, transparent);border-radius:999px;padding:8px 14px;cursor:pointer;font-family:inherit}
.actions .pill-gold:hover{background:color-mix(in srgb, var(--accent) 22%, transparent)}
.mat{flex:1 1 auto;min-height:0;min-width:0;max-width:100%;display:flex;align-items:center;justify-content:center;
  padding:0 clamp(10px,2.5vw,28px)}
.frame-gold{width:100%;max-width:100%;min-width:0;max-height:100%;display:flex;justify-content:center;
  background:transparent;cursor:zoom-in;border-radius:0;overflow:visible;box-shadow:none}
body.cozy .frame-gold{border-radius:0}
.frame-gold img{display:block;max-width:100%;margin:0 auto;max-height:calc(100dvh - 250px);object-fit:contain;background:var(--art-bg);
  border-radius:0;box-shadow:none;transition:transform .5s ease;cursor:zoom-in}
.frame-gold:hover img{transform:scale(1.015)}
body.cozy .frame-gold img{border-radius:8px}
html[data-theme="light"] .book{box-shadow:0 16px 45px rgba(0,0,0,.12)}
.frame-gold img.loading{opacity:0}
.art-caption{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:10px;
  font-size:12px;color:var(--muted)}
.hint-inline{display:inline-flex;align-items:center;gap:6px;min-width:0}
.ic{width:14px;height:14px;flex:0 0 auto}
.linklike{display:inline-flex;align-items:center;gap:6px;background:none;border:none;cursor:pointer;
  color:var(--muted);font-family:inherit;font-size:12px;font-weight:600;padding:4px}
.linklike:hover{color:var(--accent)}
.page-right h1{margin:0;font-family:var(--title-font);font-size:clamp(26px,3.4vw,38px);line-height:1.15;font-weight:700;letter-spacing:0;color:var(--muted)}
.kicker{margin:0 0 8px;font-size:16px;font-weight:400;color:var(--accent)}
.specs{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:0 0 6px;padding:12px 0}
.spec{background:var(--surface2);border:1px solid var(--line);border-radius:12px;padding:10px 12px;min-width:0}
.spec span{display:block;font-size:10px;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted);font-weight:600;margin-bottom:4px}
.spec b{display:block;min-height:2.8em;font-size:14px;font-weight:600;line-height:1.4;overflow-wrap:anywhere;word-break:break-word;white-space:pre-line}
.spec.full{grid-column:1 / -1}
.desc-label{margin:14px 0 6px;font-size:12px;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted);font-weight:700}
.artist{margin:6px 0 0;font-size:clamp(14px,1.8vw,19px);color:var(--muted)}
.rule{height:1px;background:var(--line);margin:14px 0}
.meta{display:grid;margin:0 0 8px}
.meta div{display:grid;grid-template-columns:96px 1fr;gap:10px;padding:7px 0;border-bottom:1px solid var(--line);font-size:14.5px}
.meta div:last-child{border-bottom:none}
.meta dt{color:var(--muted);font-size:11.5px;text-transform:uppercase;letter-spacing:1.2px;padding-top:2px}
.meta dd{margin:0}
.desc{line-height:1.7;font-size:13px;color:var(--muted);overflow-wrap:anywhere;word-break:break-word;white-space:pre-line}
.meta dd{overflow-wrap:anywhere;word-break:break-word}
.row{display:flex;gap:10px;margin-top:auto;padding-top:16px;border-top:1px solid var(--line);padding-bottom:6px}
.btn-inspect{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:13px 18px;border-radius:12px;background:var(--text);color:var(--bg);
  border:none;cursor:pointer;font-family:inherit;font-size:14px;font-weight:600}
.btn-inspect:hover{filter:brightness(1.15)}
.btn-share{width:48px;flex:0 0 auto;display:grid;place-items:center;border-radius:12px;background:transparent;color:var(--text);
  border:1px solid var(--line);cursor:pointer;font-family:inherit}
.btn-share:hover{border-color:var(--accent);color:var(--accent)}
.btn-share .ic{width:18px;height:18px}
.btn-gold{display:inline-block;padding:11px 18px;border-radius:0;background:var(--accent);
  color:var(--accent-ink);text-decoration:none;font-weight:700;border:none;cursor:pointer;font-size:14px}
.btn-gold.sm{font-size:13.5px;padding:10px 16px}
.btn-line{background:transparent;color:var(--text);border:1px solid var(--line);border-radius:0;
  padding:11px 18px;cursor:pointer;font-family:inherit;font-size:14px;font-weight:600}
.btn-line:hover{border-color:var(--accent)}
.btn-line.sm{font-size:13.5px;padding:10px 16px}
.hint{flex:0 0 auto;text-align:center;color:var(--muted);font-size:12px;margin:8px 0 2px}
.nav{position:absolute;top:50%;transform:translateY(-50%);z-index:6;font-size:26px;width:48px;height:48px;border-radius:50%;cursor:pointer;
  border:1px solid var(--line);background:color-mix(in srgb, var(--surface) 88%, transparent);color:var(--text);user-select:none;line-height:1;backdrop-filter:blur(6px)}
.nav.prev{left:14px} .nav.next{right:14px}
/* dar (ortalı) modda yer varsa oklar kitabın dışında */
body.cozy .nav.prev{left:-64px}
body.cozy .nav.next{right:-64px}
@media (max-width:1280px){
  body.cozy .nav.prev{left:10px}
  body.cozy .nav.next{right:10px}
}
.nav:hover{border-color:var(--accent);color:var(--accent)}
.nav:active{transform:scale(.92)}
.nav:disabled{opacity:.25;cursor:default;pointer-events:none}

/* kapak */
.cover{position:fixed;inset:0;z-index:40;display:flex;align-items:center;justify-content:center;text-align:center;
  background:linear-gradient(var(--bg),var(--bg2));transition:opacity .5s ease, visibility .5s;overflow:hidden}
.cover.hide{opacity:0;visibility:hidden;pointer-events:none}
.cover-collage{position:absolute;inset:-40px;display:block}
.cover-collage img{position:absolute;object-fit:cover;opacity:.55;border-radius:4px;
  box-shadow:0 14px 40px rgba(0,0,0,.45)}
.cover-collage::after{content:'';position:absolute;inset:0;
  background:radial-gradient(closest-side,color-mix(in srgb, var(--bg) 45%, transparent),color-mix(in srgb, var(--bg) 80%, transparent))}
.cover-inner{position:relative;z-index:5;max-width:600px;padding:40px 32px;margin:16px;
  background:color-mix(in srgb, var(--bg) 80%, transparent);backdrop-filter:blur(14px);
  border:1px solid var(--line);border-radius:12px;box-shadow:0 30px 80px rgba(0,0,0,.45)}
.cover-kicker{font-size:12px;letter-spacing:3px;text-transform:uppercase;color:var(--accent);font-weight:700}
.cover h1{font-family:var(--title-font);font-weight:600;font-size:clamp(30px,6vw,54px);margin:12px 0;line-height:1.08;letter-spacing:0;text-transform:uppercase}
.cover-sub{color:var(--muted);line-height:1.6;font-size:16px}
.cover .btn-gold{margin-top:18px;font-size:15px;padding:13px 30px}
.cover .btn-gold:disabled{opacity:.55;cursor:default}

/* — Görüntüleyici — */
.lightbox{position:fixed;inset:0;z-index:50;background:rgba(41,44,49,.97);display:flex;flex-direction:column;cursor:default}
.lightbox:fullscreen{background:#292c31}
.lb-top{position:absolute;top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:center;
  padding:12px 16px;z-index:3;background:linear-gradient(rgba(0,0,0,.6),transparent);transition:opacity .3s}
.lb-count{color:#fff;font-size:13px;letter-spacing:2px;font-variant-numeric:tabular-nums}
.lb-tools{display:flex;gap:6px}
.lb-tools button{width:36px;height:36px;border-radius:8px;border:1px solid rgba(255,255,255,.25);
  background:rgba(255,255,255,.08);color:#fff;font-size:15px;cursor:pointer;display:grid;place-items:center;font-family:inherit}
.lb-tools button:hover{background:rgba(255,255,255,.22)}
.lb-tools button.on{background:var(--accent);border-color:var(--accent);color:#000}
.lb-tools button.off{opacity:.45}
.lb-stage{flex:1;min-height:0;overflow:auto;display:flex;padding:70px 84px;cursor:zoom-out}
.lb-stage img{margin:auto;max-width:100%;max-height:100%;object-fit:contain;flex:0 0 auto;cursor:default;transition:transform .15s}
.lb-stage.real img{max-width:none;max-height:none}
.lb-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:52px;height:52px;border-radius:50%;
  border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.07);color:#fff;font-size:26px;cursor:pointer;transition:opacity .3s;line-height:1}
.lb-nav:hover{background:rgba(255,255,255,.2)}
.lb-nav:disabled{opacity:.25;cursor:default;pointer-events:none}
.lb-nav.prev{left:14px} .lb-nav.next{right:14px}
.lb-cap{position:absolute;bottom:0;left:0;right:0;margin:0;text-align:center;color:#eee;font-size:14px;letter-spacing:.5px;
  padding:26px 16px 14px;background:linear-gradient(transparent,rgba(0,0,0,.65));transition:opacity .3s}
.lightbox.idle .lb-top,.lightbox.idle .lb-cap,.lightbox.idle .lb-nav{opacity:0;pointer-events:none}

/* sergi paneli */
.drawer{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:30;padding:18px;backdrop-filter:blur(8px)}
.drawer-head{display:flex;justify-content:space-between;align-items:center;max-width:1100px;margin:0 auto 12px;color:#fff}
.drawer-head strong{letter-spacing:2px;text-transform:uppercase;font-size:13px}
.drawer-head button{padding:8px 14px;border-radius:999px;border:1px solid rgba(255,255,255,.3);background:transparent;color:#fff;cursor:pointer}
.grid{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px;
  max-height:82dvh;overflow:auto;background:var(--surface);padding:16px;border-radius:14px;border:1px solid var(--line)}
.grid button{border:1px solid var(--line);background:var(--surface2);border-radius:10px;padding:6px;cursor:pointer;color:var(--text);transition:transform .15s}
.grid button:hover{transform:translateY(-3px);border-color:var(--accent)}
.grid img{width:100%;height:140px;object-fit:cover;border-radius:6px;display:block}
.grid span{font-size:13px;display:block;padding:6px 2px}

/* — Responsive — */
@media (max-width:900px){
  .brand-t{font-size:13.5px}
  .stage{padding:8px 8px 4px}
  .nav{position:fixed;top:auto;transform:none;bottom:40px;z-index:6}
  .nav.prev{left:10px} .nav.next{right:10px}
  .book{grid-template-columns:1fr;overflow-y:auto;display:block}
  .page{overflow:visible}
  .frame-gold img{max-height:50dvh;margin:0 auto}
  .page-right{border-top:1px solid var(--line)}
  .page-left{border-right:none}
  .row{display:flex}
  .hide-sm{display:none}
  .hint{display:none}
}

/* — İletişim Modalı — */
.contact-modal{position:fixed;inset:0;z-index:60;background:rgba(0,0,0,.7);display:flex;align-items:center;justify-content:center;padding:20px;opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s}
.contact-modal:not([hidden]){opacity:1;visibility:visible}
.contact-modal-content{background:var(--surface);border:1px solid var(--line);border-radius:16px;max-width:480px;width:100%;max-height:90vh;overflow-y:auto;position:relative;padding:24px;box-shadow:0 24px 60px rgba(0,0,0,.5)}
.contact-close{position:absolute;top:12px;right:12px;width:36px;height:36px;border-radius:50%;border:1px solid var(--line);background:var(--surface2);color:var(--text);font-size:18px;cursor:pointer;display:grid;place-items:center;transition:background .2s}
.contact-modal-content h2{margin:0 0 16px;font-family:var(--title-font);font-size:22px;color:var(--accent)}
.form-group{margin-bottom:16px}
.form-group label{display:block;font-size:12px;font-weight:600;color:var(--muted);margin-bottom:6px}
.form-group .req{color:var(--accent)}
.form-group input,.form-group textarea{width:100%;padding:12px;border:1px solid var(--line);border-radius:10px;background:var(--input);color:var(--text);font-family:inherit;font-size:14px}
.form-group textarea{min-height:100px;resize:vertical}
.req{color:var(--accent)}
.btn-submit{width:100%;padding:14px;border-radius:10px;background:var(--accent);color:var(--accent-ink);font-weight:700;font-size:14px;border:none;cursor:pointer;transition:filter .2s}
.btn-submit:hover{filter:brightness(1.1)}
.form-msg{margin-top:12px;font-size:13px;text-align:center;min-height:1.2em}
.form-msg.success{color:#2e7d32}
.form-msg.error{color:#c62828}