/* Cəzəri Nəşrləri — 3D kitab rəfi
 * One full-screen shelf; the tabs filter it. Shelf geometry is driven from JS (js/app.js);
 * everything here scales from --H.
 */
:root{
  --paper:#EDEBE6;
  --sheet:#F4F2ED;
  --ink:#141414;
  --muted:#6D6A63;
  --brand:#21028E;          /* Cəzəri indigo (logo) */
  --brand-2:#FFFF54;        /* Cəzəri yellow (logo) */
  --rule:rgba(20,20,20,.9);
  --ease:cubic-bezier(.2,.8,.2,1);
  --H:min(46vh,31vw);
  --sans:"Inter Tight",system-ui,sans-serif;
  --serif:"Newsreader",Georgia,serif;
  color-scheme:light;
}
*{box-sizing:border-box}
html,body{margin:0}
html{background:var(--paper)}
body{background:var(--paper);color:var(--ink);overflow:hidden;user-select:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:var(--sans)}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
a{color:inherit;text-decoration:none}
@media (pointer:fine){html,body,button,a,.tape{cursor:none}}
:focus-visible{outline:2px solid var(--brand);outline-offset:3px}

/* ---- Label system ---- */
.lbl{font:600 10.5px/1 var(--sans);letter-spacing:.09em;text-transform:uppercase;white-space:nowrap}
.box{display:inline-flex;align-items:center;height:21px;padding:0 8px;border:1px solid var(--rule)}

/* ---- 1. Top bar ---- */
.top{position:fixed;inset:0 0 auto 0;height:84px;padding:0 32px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;z-index:20;
  background:linear-gradient(var(--paper) 70%,rgba(237,235,230,0))}
.top-left{justify-self:start;display:flex;gap:8px}
.top-left .box:hover,.foot-links button:hover{color:var(--brand)}
.foot-links button{cursor:pointer;font:inherit;letter-spacing:inherit;text-transform:inherit}
.top-right{justify-self:end;display:inline-flex;align-items:center;gap:7px}
.top-wa{width:15px;height:15px;flex:none;color:var(--brand)}
.top-right:hover{color:var(--brand)}
.logo{display:flex;align-items:center;gap:11px;color:var(--brand)}
.logo-mark{width:26px;height:26px;color:var(--brand)}
.logo-text{display:flex;flex-direction:column;gap:5px}
.logo-1{font:400 22px/1 var(--serif);letter-spacing:-.005em}
.logo-2{font:600 8.5px/1 var(--sans);letter-spacing:.3em;text-transform:uppercase}

/* ---- 2. Filter tabs ---- */
.tabs{position:fixed;left:50%;transform:translateX(-50%);top:calc(50% - var(--H)/2 - 86px);display:flex;z-index:20}
.tab-n{font:600 8px/1 var(--sans);letter-spacing:0;margin-left:4px;vertical-align:3px;opacity:.75}
.tab{position:relative;z-index:1;height:23px;padding:0 11px;border:1px solid var(--rule);margin-left:-1px;transition:color .45s var(--ease)}
.tab.on{color:#fff}
.tab-ind{position:absolute;left:0;top:0;height:23px;width:0;background:var(--brand);transition:width .6s var(--ease),transform .6s var(--ease)}

/* ---- 3. Bays and shelves ---- */
.bay{position:relative;height:100vh;height:100svh;overflow:hidden}
.shelf{position:absolute;left:0;right:0;top:calc(50% - var(--H)/2 - 40px);height:calc(var(--H) + 80px);perspective:2200px;perspective-origin:50% 50%;touch-action:pan-y;z-index:10}
.stage{position:absolute;left:50%;top:50%;width:0;height:0;transform-style:preserve-3d}
.tape{position:absolute;left:0;top:0;width:0;height:0;transform-style:preserve-3d;will-change:transform}
.face{position:absolute;top:calc(var(--h)/-2);height:var(--h);backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:2px;overflow:hidden}
.face::after{content:"";position:absolute;inset:0;background:#000;opacity:var(--shade,0);pointer-events:none}
.sp{width:var(--ws);left:calc(var(--ws)/-2);transform:translateZ(calc(var(--d)/2))}
.cv{width:var(--d);left:calc(var(--d)/-2);transform:rotateY(90deg) translateZ(calc(var(--ws)/2));background:#ddd center/cover no-repeat;
  box-shadow:0 30px 60px -28px rgba(20,16,10,.55);border-radius:2px 4px 4px 2px}
/* subtle binding crease on the cover's left edge */
.cv::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.22),rgba(255,255,255,.18) 1.4%,rgba(0,0,0,.08) 3%,transparent 6%);pointer-events:none}

/* Spine artwork (built in CSS from data.js) */
.sp{background:var(--bg);color:var(--fg);display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:calc(var(--h)*.035) 0 calc(var(--h)*.03)}
.sp::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(0,0,0,.20),rgba(255,255,255,.10) 18%,rgba(255,255,255,0) 45%,rgba(0,0,0,.06) 80%,rgba(0,0,0,.22));}
.sp-grade{font:800 calc(var(--h)*.028)/1 var(--sans);letter-spacing:.06em;border:1px solid currentColor;padding:.28em .32em .22em;min-height:1.6em;opacity:.92}
.sp-grade:empty{border-color:transparent}
.sp-title{flex:1;display:flex;align-items:center;justify-content:center;writing-mode:vertical-rl;font-weight:800;font-family:var(--sans);
  font-size:calc(var(--h)*var(--k));line-height:1.02;letter-spacing:.01em;text-transform:uppercase;white-space:nowrap;padding:calc(var(--h)*.03) 0;text-align:center}
.sp-auth{writing-mode:vertical-rl;font:600 calc(var(--h)*.019)/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;opacity:.8;margin-bottom:calc(var(--h)*.03)}
.sp-mark{width:calc(var(--ws)*.42);height:calc(var(--ws)*.42);color:var(--fg)}
.sp.light{--mark-3:#1A1A1A}

/* ---- 4. Ring ---- */
.ring{position:absolute;z-index:30;width:42px;height:42px;margin:-21px 0 0 -21px;border-radius:50%;border:1px solid var(--brand);color:var(--brand);background:rgba(237,235,230,.78);
  display:flex;align-items:center;justify-content:center;transform:scale(0);left:calc(50% - var(--d)/2 - 6px);top:calc(50% + var(--H)*.36)}
.ring svg{width:16px;height:16px}

/* ---- 5. Caption ---- */
.caption{position:absolute;left:0;right:0;top:calc(50% + var(--H)/2 + 30px);display:flex;flex-direction:column;align-items:center;gap:9px;pointer-events:none;z-index:20}
.caption .mask{position:relative;overflow:hidden;width:min(92vw,760px);text-align:center}
.caption .mask>span{display:block}
.caption .mask>span+span{position:absolute;left:0;right:0;top:0}
.m-title{font:400 31px/1.12 var(--serif);letter-spacing:-.01em}
.m-sub{color:var(--brand)}
.m-sub span{font:500 10.5px/1.3 var(--sans);letter-spacing:.09em;text-transform:uppercase}
.m-price span{font:500 11px/1.3 var(--sans);letter-spacing:.08em;text-transform:uppercase}
.m-price .soon{display:inline-block;background:var(--brand-2);padding:3px 6px 2px}

/* ---- 6. Arrows ---- */
.arrow{position:absolute;z-index:20;top:calc(50% + var(--H)/2 + 26px);width:44px;height:44px;display:flex;align-items:center;justify-content:center}
.arrow-l{left:20px}.arrow-r{right:20px}
.arrow:hover{color:var(--brand)}
.arrow:disabled{visibility:hidden}   /* at a shelf end the bookend says "end"; no dead arrow pointing onward */

/* Finite shelf: bookends hold the category's books */
.bookend .face{top:calc(var(--h)/2 - var(--h)*.6);height:calc(var(--h)*.6)}
.bookend .end-front{width:calc(var(--ws)*.6);left:calc(var(--ws)*-.3);background:var(--brand);display:flex;align-items:flex-end;justify-content:center;padding-bottom:calc(var(--h)*.04);--mark-3:#fff}
.bookend .end-front::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(255,255,255,.14),transparent 40%,rgba(0,0,0,.25))}
.bookend .end-front .sp-mark{width:calc(var(--ws)*.34);height:calc(var(--ws)*.34);color:#fff;position:relative}
.bookend .end-side{background:#150060;box-shadow:none;transform:rotateY(90deg) translateZ(calc(var(--ws)*.3))}  /* flush with the narrower front (0.6 × spine) */
.bookend .end-side::before{display:none}
/* while the shelf restocks, books sink below / rise from the shelf line */
.shelf.restocking{clip-path:polygon(-50% -100%,150% -100%,150% calc(100% - 38px),-50% calc(100% - 38px))}

/* ---- 7. Footer ---- */
.foot{position:absolute;left:32px;right:32px;bottom:26px;display:flex;justify-content:space-between;z-index:20}
.foot a:hover{color:var(--brand)}

/* ---- Paper grain ---- */
.grain{position:fixed;inset:0;z-index:40;pointer-events:none;opacity:.55;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .42 0 0 0 0 .38 0 0 0 .22 0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ---- Sheets (detail / about / viewer) ---- */
.sheet{position:fixed;inset:0;z-index:60;background:var(--sheet);visibility:hidden;overflow:hidden;user-select:text}
.sheet-scroll{position:absolute;inset:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.sheet.open{visibility:visible}
.sheet-close{position:absolute;left:32px;top:31px;z-index:3;background:var(--sheet)}
.sheet-logo{position:absolute;z-index:2;left:0;right:0;top:0;height:84px;background:var(--sheet);display:flex;align-items:center;justify-content:center;pointer-events:none}
.d-grid{min-height:100%;display:grid;grid-template-columns:1fr 1fr;gap:4vw;padding:110px 6vw 56px 7vw;align-items:center}
.d-text{display:flex;flex-direction:column;gap:18px;max-width:540px}
.d-text .mask{overflow:hidden;padding-bottom:2px}
.rise{will-change:transform}
.d-tag{color:var(--brand);font-weight:500}
.d-title{margin:0;font:400 clamp(44px,5.4vw,84px)/1 var(--serif);letter-spacing:-.025em}
.d-title.long{font-size:clamp(38px,4.2vw,62px);line-height:1.04}
.d-aka{margin:0;padding-top:2px;font:italic 400 21px/1.3 var(--serif);color:var(--muted)}
.d-text .mask:has(> .d-aka){margin-top:-10px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.d-meta{color:var(--muted);white-space:normal;line-height:1.5}
.d-body{font:400 17px/1.55 var(--serif);max-width:44ch}
.d-body p{margin:0 0 .7em}
.d-body p:last-child{margin-bottom:0}
.d-story{margin:0;font:italic 400 15.5px/1.5 var(--serif);color:var(--muted);max-width:44ch}
.d-story:empty,.d-note:empty{display:none}
.d-story a{color:var(--brand);text-decoration:underline;text-underline-offset:2px}
.d-note{margin:0;font:500 11.5px/1.5 var(--sans);color:var(--muted);max-width:52ch;border-left:2px solid var(--brand-2);padding-left:10px}
.d-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px;align-items:center}
.btn{display:inline-flex;align-items:center;gap:9px;height:44px;padding:0 20px;border:1px solid var(--brand);color:var(--brand);font:600 10.5px/1 var(--sans);letter-spacing:.09em;text-transform:uppercase;white-space:nowrap;transition:background .35s var(--ease),color .35s var(--ease)}
.btn:hover{background:var(--brand);color:#fff}
.btn.primary{background:var(--brand);color:#fff}
.btn.primary:hover{background:#14005c}
.btn svg{width:15px;height:15px;flex:none}
.btn-hint{flex-basis:100%;font:500 11px/1.4 var(--sans);color:var(--muted);letter-spacing:.02em}
.d-poster{height:min(100%,78vh);display:flex;align-items:center;justify-content:center}
.d-poster svg{height:min(78vh,100%);max-height:78vh;aspect-ratio:1000/1414;width:auto;filter:drop-shadow(0 30px 40px rgba(20,16,10,.28))}
.detail .d-poster{height:78vh}

/* About */
.a-cols{display:grid;grid-template-columns:1fr 1fr;gap:28px;font:400 15px/1.5 var(--serif)}
.a-cols p,.a-cols ol{margin:8px 0 0}
.a-cols ol{padding-left:1.2em}
.a-cols li{margin-bottom:4px}
.a-h{color:var(--brand)}
.a-poster img{width:min(420px,80%);height:auto;aspect-ratio:1/1;object-fit:cover;border-radius:2px;filter:grayscale(.15) contrast(1.02);box-shadow:0 30px 60px -28px rgba(20,16,10,.55)}

/* Viewer */
.viewer{background:#E6E3DC}
.v-head{position:sticky;top:0;z-index:2;background:#E6E3DC;padding:84px 6vw 18px;display:flex;flex-direction:column;align-items:center;gap:10px;border-bottom:1px solid rgba(20,20,20,.12)}
.v-title{margin:0;font:400 34px/1.1 var(--serif);letter-spacing:-.01em;text-align:center}
.v-tabs{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin-top:6px}
.v-tabs .box{height:25px;cursor:pointer;transition:background .3s var(--ease),color .3s var(--ease)}
.v-tabs .box.on{background:var(--brand);color:#fff;border-color:var(--brand)}
.v-pages{display:flex;flex-direction:column;align-items:center;gap:22px;padding:28px 16px 40px}
.v-pages img{display:block;width:min(900px,100%);height:auto;background:#fff;box-shadow:0 18px 40px -22px rgba(20,16,10,.5);user-select:none;-webkit-user-drag:none}
.v-foot{display:flex;justify-content:center;padding:0 16px 70px}

/* ---- Cursor ---- */
.cursor{position:fixed;left:0;top:0;width:58px;height:58px;margin:-29px 0 0 -29px;z-index:100;pointer-events:none;display:none}
@media (pointer:fine){.cursor.live{display:block}}
.c-ring{position:absolute;inset:0;border:1.5px solid var(--ink);border-radius:50%;transition:transform .5s var(--ease),background-color .4s var(--ease),border-color .4s var(--ease)}
.c-dot{position:absolute;left:50%;top:50%;width:6px;height:6px;margin:-3px 0 0 -3px;border-radius:50%;background:var(--ink);transition:transform .4s var(--ease)}
.c-lbl{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font:600 11px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:#fff;transform:scale(0);transition:transform .45s var(--ease)}
.cursor.spine .c-ring{transform:scale(.72)}
.cursor.btn .c-ring{transform:scale(.55)}
.cursor.btn .c-dot{transform:scale(0)}
.cursor.open .c-ring{transform:scale(1.75);background:var(--brand);border-color:var(--brand)}
.cursor.open .c-dot{transform:scale(0)}
.cursor.open .c-lbl{transform:scale(1)}
.cursor.text .c-ring{transform:scale(.4)}
.cursor.text .c-dot{transform:scale(.6)}

/* ---- Responsive ---- */
@media (max-width:767px){
  :root{--H:min(60vw,40svh)}
  .top{height:64px;padding:0 16px}
  .logo-mark{width:20px;height:20px}
  .logo-1{font-size:17px}.logo-2{font-size:7px;letter-spacing:.22em}
  .lbl{font-size:9px}
  .top-txt{display:none}
  .top-wa{width:22px;height:22px}
  .tabs{top:calc(50% - var(--H)/2 - 70px)}
  .tab{padding:0 7px}
  .m-title{font-size:24px}
  .arrow-l{left:6px}.arrow-r{right:6px}
  .foot{left:16px;right:16px;bottom:18px}
  .sheet-close{left:16px;top:21px}
  .sheet-logo{height:64px}
  .d-grid{grid-template-columns:1fr;padding:84px 22px 40px;gap:24px;align-items:start}
  .d-poster,.detail .d-poster{order:-1;height:46svh}
  .d-poster svg{height:46svh;max-height:none}
  .d-title{font-size:42px}
  .d-title.long{font-size:34px}
  .d-aka{font-size:18px}
  .d-body{font-size:16px}
  .a-cols{grid-template-columns:1fr}
  .a-poster img{width:min(260px,70%)}
  .v-head{padding:70px 16px 14px}
  .v-title{font-size:26px}
}
/* very short portrait phones: no room for the tabs above the shelf */
@media (max-width:767px) and (max-height:520px){
  .tabs{display:none}
}
/* portrait tablets: the vw-based height would leave the shelf tiny */
@media (min-width:768px) and (orientation:portrait){
  :root{--H:min(40vh,50vw)}
}
@media (max-width:360px){
  .top .logo-mark{display:none}
}
/* small phones (iPhone SE): footer links only, centred */
@media (max-width:420px){
  .foot{justify-content:center}
  .foot>.lbl:first-child{display:none}
  .top>.box{padding:0 6px}
  .logo{gap:8px}
}
/* phones in landscape: shorter shelf, compact bar, no tabs/footer */
@media (max-height:500px) and (orientation:landscape){
  .top{background:none}
  :root{--H:min(46vh,31vw)}
  .top{height:52px;padding:0 16px}
  .logo-mark{width:18px;height:18px}
  .logo-1{font-size:16px}.logo-2{font-size:7px;letter-spacing:.22em}
  .tabs,.foot{display:none}
  .caption{top:calc(50% + var(--H)/2 + 16px);gap:5px}
  .m-title{font-size:20px}
  .arrow{top:calc(50% + var(--H)/2 + 6px)}
  .sheet-close{left:16px;top:14px}
  .sheet-logo{height:52px}
  .d-grid{padding:64px 5vw 32px 6vw;gap:5vw;align-items:start}
  .d-title{font-size:38px}
  .d-body{font-size:15px}
  /* long text scrolls past; the poster stays in view */
  .d-poster,.detail .d-poster{position:sticky;top:60px;height:calc(100vh - 84px)}
  .d-poster svg{height:100%;max-height:none}
  .a-poster img{width:auto;height:100%;max-height:calc(100vh - 84px)}
  .v-head{padding:56px 16px 12px}
  .v-title{font-size:24px}
}
.viewer .sheet-close{background:#E6E3DC}

/* ---- Order block (CTA) at the end of every detail page and sample viewer ---- */
.d-text .mask:has(> .rise:empty){display:none}
.cta{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:14px 26px;max-width:540px;
  margin:12px 0 22px;padding-top:24px;border-top:1px solid var(--rule)}
.cta-price{display:flex;align-items:baseline;gap:7px;white-space:nowrap}
.cta-amt{font:400 54px/1 var(--serif);letter-spacing:-.025em}
.cta-cur{font:600 11px/1 var(--sans);letter-spacing:.14em}
.cta-soon{display:inline-block;background:var(--brand-2);font:600 11px/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;padding:8px 10px 7px}
.cta-btn{position:relative;display:flex;align-items:center;height:62px;background:var(--brand);color:#fff;
  box-shadow:0 20px 32px -20px rgba(33,2,142,.75);transition:background .35s var(--ease),box-shadow .35s var(--ease)}
.cta-btn:hover{background:#14005c;box-shadow:0 24px 36px -18px rgba(33,2,142,.85)}
.cta-ico{display:flex;align-items:center;justify-content:center;flex:none;width:62px;height:62px;background:var(--brand-2);color:var(--ink)}
.cta-ico svg{width:23px;height:23px}
.cta-txt{flex:1;padding:0 16px 0 20px;font:600 12px/1.2 var(--sans);letter-spacing:.11em;text-transform:uppercase}
.cta-arrow{display:flex;margin-right:22px}
.cta-arrow svg{width:20px;height:11px;transition:transform .45s var(--ease)}
.cta-btn:hover .cta-arrow svg{transform:translateX(6px)}
.cta-hint{grid-column:1/-1;margin:0;font:500 11.5px/1.5 var(--sans);color:var(--muted);letter-spacing:.01em}
.v-foot .cta{width:min(620px,100%);margin-top:10px}
@media (max-width:767px){
  .cta{grid-template-columns:1fr;gap:12px}
  .cta-amt{font-size:44px}
  .cta-btn{width:100%}
}



/* ---- FAQ ("Suallar") ---- */
.faq-wrap{max-width:760px;margin:0 auto;padding:110px 22px 80px;display:flex;flex-direction:column;gap:18px}
.faq-wrap .mask{overflow:hidden;padding-bottom:2px}
.faq-list{display:flex;flex-direction:column;border-top:1px solid var(--rule)}
.faq-list details{border-bottom:1px solid rgba(20,20,20,.18)}
.faq-list summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:18px;padding:18px 2px;font:400 21px/1.3 var(--serif)}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::after{content:"+";font:400 26px/1 var(--sans);color:var(--brand);transition:transform .35s var(--ease);flex:none}
.faq-list details[open] summary::after{transform:rotate(45deg)}
.faq-list summary:hover{color:var(--brand)}
.faq-list p{margin:0 0 20px;font:400 16.5px/1.6 var(--serif);color:#2b2a27;max-width:62ch}
.faq-list a{color:var(--brand);text-decoration:underline;text-underline-offset:2px}
/* six tabs: scroll sideways on narrow screens instead of overflowing */
@media (max-width:767px){
  .tabs{max-width:calc(100vw - 24px);overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .tabs::-webkit-scrollbar{display:none}
  .tab{flex:none}
  .faq-wrap{padding:84px 18px 60px}
  .faq-list summary{font-size:18px}
}
@media (max-width:420px){
  .top-left{gap:5px}
  .top-left .box{padding:0 5px}
}
/* the reveal mask clips anything above the cap height at line-height 1: room for İ, Ə dots/rings */
.d-title{padding-top:.14em}
@media (max-width:420px){ #faqBtn{display:none} }   /* "Suallar" stays in the footer */