/* Feyzem Bilişim — ortak stil.
   Düzen: krem "duvar" üzerinde katmanlar — Feyzem Çocuk (yaprak yeşili), Feyzem Yayınları (vişne/altın), Seydapp (koyu çam yeşili).
   Renkler ve yazı karakteri pembe 3D logodan türetildi. */
:root{
  --wall:#F5EDE1; --wall-2:#EEE4D3; --wall-3:#E3D7C4; --paper:#FFFDF8;
  --ink:#2B1920; --ink-2:#5B4A52; --mute:#8D7D85; --line:rgba(43,25,32,.12);
  --rose:#C40A50; --rose-2:#E2186D; --rose-3:#8B0A3C; --rose-soft:#FBE7EF;
  --leaf:#3E8E41; --leaf-2:#2E6F31; --leaf-3:#1F4F23; --leaf-soft:#E6F1E2;
  --teal:#0F5146; --teal-2:#0B3D35; --teal-soft:#DFEDE8;
  --gold:#CBA055; --gold-2:#EAD7A1; --gold-3:#A67F37;
  --shadow:0 18px 50px -20px rgba(43,25,32,.35);
  --font-display:'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-body:'Manrope', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-arabic:'Amiri', 'Scheherazade New', 'Noto Naskh Arabic', serif;
  --gutter-l:max(16px, env(safe-area-inset-left, 0px));
  --gutter-r:max(16px, env(safe-area-inset-right, 0px));
  --nav-h:70px;
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--wall);color:var(--ink);font-family:var(--font-body);font-size:16px;line-height:1.6;overflow-x:hidden}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:60;background:var(--wall)}
img{max-width:100%;display:block}
a{color:inherit}
button{font:inherit}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:600;line-height:1.08;margin:0;text-wrap:balance;letter-spacing:-.01em}
p{margin:0}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px;border-radius:4px}
.wrap{width:min(1180px,100%);margin-inline:auto;padding-left:var(--gutter-l);padding-right:var(--gutter-r)}
.eyebrow{font-size:.74rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;display:inline-flex;align-items:center;gap:.6em}
.eyebrow::before{content:"";width:22px;height:2px;background:currentColor;border-radius:2px;opacity:.7}
.lead{color:var(--ink-2);font-size:1.08rem;max-width:62ch}
.btn{display:inline-flex;align-items:center;gap:.55em;padding:.78em 1.35em;border-radius:999px;border:1.5px solid transparent;font-weight:700;font-size:.95rem;text-decoration:none;cursor:pointer;transition:transform .2s ease,box-shadow .2s ease,background .2s ease,color .2s ease;white-space:nowrap}
.btn:hover{transform:translateY(-2px);box-shadow:0 10px 24px -12px rgba(43,25,32,.45)}
.btn:active{transform:translateY(0)}
.btn-rose{background:var(--rose);color:#fff}.btn-rose:hover{background:var(--rose-3)}
.btn-leaf{background:var(--leaf-2);color:#fff}.btn-leaf:hover{background:var(--leaf-3)}
.btn-teal{background:var(--teal);color:#fff}.btn-teal:hover{background:var(--teal-2)}
.btn-ghost{background:transparent;border-color:var(--line);color:var(--ink)}.btn-ghost:hover{border-color:var(--ink);background:var(--paper)}
.btn svg{width:1.05em;height:1.05em;flex:none}
.more-link{font-weight:700;font-size:.92rem;text-decoration:none;display:inline-flex;align-items:center;gap:.4em;color:var(--accent,var(--rose))}
.more-link:hover{text-decoration:underline}

/* ---------- Üst menü ---------- */
.nav{position:fixed;top:env(safe-area-inset-top,0px);left:0;right:0;z-index:50;height:var(--nav-h);display:flex;align-items:center;background:color-mix(in srgb,var(--wall) 78%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid transparent;transition:border-color .3s,background .3s}
.nav.scrolled{border-bottom-color:var(--line);background:color-mix(in srgb,var(--wall) 92%,transparent)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.brand{display:flex;align-items:center;text-decoration:none;height:44px}
.brand img{height:44px;width:auto}
.nav-links{display:flex;align-items:center;gap:.15rem;list-style:none;margin:0;padding:0}
.nav-links a{text-decoration:none;font-weight:600;font-size:.92rem;padding:.55em .85em;border-radius:999px;color:var(--ink-2);transition:background .2s,color .2s}
.nav-links a:hover{background:var(--paper);color:var(--ink)}
.nav-links a.is-active{color:var(--rose)}
.nav-links a.nav-cta{margin-left:.5rem;color:#fff;background:var(--rose)}
.nav-links a.nav-cta:hover{background:var(--rose-3);color:#fff}
.nav-toggle{display:none;width:44px;height:44px;border:0;background:transparent;border-radius:12px;cursor:pointer;color:var(--ink);align-items:center;justify-content:center}
.nav-toggle span{display:block;width:22px;height:2px;background:currentColor;border-radius:2px;position:relative;transition:transform .25s}
.nav-toggle span::before,.nav-toggle span::after{content:"";position:absolute;left:0;width:22px;height:2px;background:currentColor;border-radius:2px;transition:transform .25s,top .25s}
.nav-toggle span::before{top:-7px}.nav-toggle span::after{top:7px}
.nav.open .nav-toggle span{background:transparent}
.nav.open .nav-toggle span::before{top:0;transform:rotate(45deg)}
.nav.open .nav-toggle span::after{top:0;transform:rotate(-45deg)}
@media (max-width:900px){
  .nav-toggle{display:inline-flex}
  .nav-links{position:fixed;top:calc(var(--nav-h) + env(safe-area-inset-top,0px));left:0;right:0;flex-direction:column;align-items:stretch;gap:.2rem;padding:1rem var(--gutter-r) 1.2rem var(--gutter-l);background:var(--wall);border-bottom:1px solid var(--line);box-shadow:var(--shadow);transform:translateY(-8px);opacity:0;pointer-events:none;transition:opacity .22s,transform .22s}
  .nav.open .nav-links{transform:none;opacity:1;pointer-events:auto}
  .nav-links a{padding:.8em 1em;font-size:1rem}
  .nav-cta{margin:.4rem 0 0;justify-content:center}
}

/* ---------- Ana sayfa hero ---------- */
.hero{position:relative;padding-top:calc(var(--nav-h) + env(safe-area-inset-top,0px) + 1.2rem);padding-bottom:3rem;overflow:hidden;isolation:isolate}
.shadows{position:absolute;inset:-10%;z-index:-1;pointer-events:none;opacity:.9}
.shadows .leaf{position:absolute;width:38vw;max-width:520px;min-width:220px;aspect-ratio:1;background:radial-gradient(ellipse 55% 30% at 50% 50%,rgba(60,40,30,.17),transparent 70%);filter:blur(22px);animation:drift 22s ease-in-out infinite alternate}
.shadows .leaf:nth-child(1){left:-6%;top:-4%;rotate:-28deg;animation-duration:26s}
.shadows .leaf:nth-child(2){right:-8%;top:6%;rotate:34deg;animation-duration:30s;animation-delay:-9s}
.shadows .leaf:nth-child(3){left:30%;bottom:-18%;rotate:12deg;animation-duration:24s;animation-delay:-15s;opacity:.7}
@keyframes drift{from{translate:0 0}to{translate:3vw 2vh}}
.hero-logo{width:min(1100px,100%);margin-inline:auto;position:relative}
.hero-logo img{width:100%;height:auto;mix-blend-mode:multiply;-webkit-mask-image:radial-gradient(ellipse 62% 58% at 50% 50%,#000 60%,transparent 100%);mask-image:radial-gradient(ellipse 62% 58% at 50% 50%,#000 60%,transparent 100%)}
.hero-copy{text-align:center;max-width:46rem;margin:.2rem auto 0;display:grid;gap:1.1rem;justify-items:center}
.hero-copy h1{font-size:clamp(2rem,4.6vw,3.6rem);font-weight:500}
.hero-copy h1 em{font-style:italic;color:var(--rose)}
.hero-copy .lead{text-align:center}
.doors{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:1rem;width:min(1000px,100%);margin:2.2rem auto 0}
.door{position:relative;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:1rem;padding:1.1rem 1.2rem;border-radius:20px;background:var(--paper);text-decoration:none;border:1px solid var(--line);box-shadow:0 1px 0 rgba(255,255,255,.7) inset;transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;overflow:hidden;min-width:0}
.door::after{content:"";position:absolute;inset:auto -30% -60% auto;width:60%;aspect-ratio:1;border-radius:50%;background:var(--door-tint);opacity:.35;filter:blur(24px);transition:opacity .3s}
.door:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:transparent}
.door:hover::after{opacity:.7}
.door-text{min-width:0}
.door-ico{width:56px;height:56px;border-radius:16px;display:grid;place-items:center;background:var(--door-tint);color:var(--door-fg);overflow:hidden}
.door-ico svg{width:26px;height:26px}
.door-ico img{width:100%;height:100%;object-fit:cover}
.door h3{font-size:1.5rem;font-weight:600}
.door p{font-size:.88rem;color:var(--ink-2);margin-top:.15rem}
.door .arrow{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;border:1.5px solid var(--line);color:var(--ink-2);transition:background .25s,color .25s,border-color .25s}
.door:hover .arrow{background:var(--door-fg);color:#fff;border-color:transparent}
.door.leaf{--door-tint:var(--leaf-soft);--door-fg:var(--leaf-2)}
.door.rose{--door-tint:var(--rose-soft);--door-fg:var(--rose)}
.door.teal{--door-tint:var(--teal-soft);--door-fg:var(--teal)}
.scroll-cue{display:flex;justify-content:center;margin-top:2.4rem;color:var(--mute);font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700}
.scroll-cue span{display:inline-flex;flex-direction:column;align-items:center;gap:.4rem}
.scroll-cue i{width:1px;height:38px;background:linear-gradient(var(--mute),transparent);animation:cue 1.8s ease-in-out infinite}
@keyframes cue{0%,100%{transform:scaleY(.6);transform-origin:top;opacity:.4}50%{transform:scaleY(1);opacity:1}}

/* ---------- Alt sayfa hero ---------- */
.page-hero{padding-top:calc(var(--nav-h) + env(safe-area-inset-top,0px) + 3rem);padding-bottom:2.5rem;position:relative;overflow:hidden}
.page-hero .wrap{display:grid;gap:1rem;max-width:62rem}
.page-hero h1{font-size:clamp(2.3rem,5vw,4rem);font-weight:600}
.page-hero .crumbs{font-size:.8rem;color:var(--mute);display:flex;gap:.5rem;align-items:center}
.page-hero .crumbs a{text-decoration:none;color:var(--ink-2)}
.page-hero .crumbs a:hover{color:var(--ink)}
.page-hero .actions{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:.4rem}
.page-hero.leaf{background:linear-gradient(180deg,var(--wall) 0%,var(--leaf-soft) 100%)}
.page-hero.leaf .eyebrow{color:var(--leaf-2)}
.page-hero.rose{background:linear-gradient(180deg,var(--wall) 0%,var(--rose-soft) 100%)}
.page-hero.rose .eyebrow{color:var(--rose)}
.page-hero.teal{background:linear-gradient(180deg,var(--wall) 0%,var(--teal-soft) 100%)}
.page-hero.teal .eyebrow{color:var(--teal)}
.stats{display:flex;flex-wrap:wrap;gap:.6rem 1.6rem;font-size:.88rem;color:var(--ink-2)}
.stats strong{font-family:var(--font-display);font-size:1.5rem;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums;margin-right:.3em}

/* ---------- Bölüm iskeleti ---------- */
.section{padding-block:5.5rem}
.section-head{display:grid;gap:.9rem;max-width:62rem;margin-bottom:2.4rem}
.section-head h2{font-size:clamp(2.1rem,4.2vw,3.3rem)}
.head-row{display:flex;flex-wrap:wrap;gap:.8rem 1.2rem;align-items:center;justify-content:space-between}
.meta{font-size:.84rem;color:var(--mute);display:flex;flex-wrap:wrap;gap:.4rem 1rem;align-items:center}
.meta .dot{width:8px;height:8px;border-radius:50%;background:var(--leaf);box-shadow:0 0 0 4px var(--leaf-soft);display:inline-block}
.sub-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:.6rem 1rem;margin:2.6rem 0 1.1rem}
.sub-head h3{font-size:1.6rem}
.sub-head .count{font-size:.8rem;color:var(--mute);font-weight:700;letter-spacing:.06em}

/* ---------- Feyzem Çocuk ---------- */
.cocuk{background:linear-gradient(180deg,var(--wall) 0%,var(--leaf-soft) 18%,var(--leaf-soft) 82%,var(--wall) 100%);--accent:var(--leaf-2)}
.cocuk .eyebrow{color:var(--leaf-2)}
.featured{display:grid;grid-template-columns:1.35fr 1fr;gap:1.6rem;align-items:center;background:var(--paper);border-radius:24px;padding:1rem;box-shadow:var(--shadow);border:1px solid rgba(255,255,255,.7);margin-bottom:1.6rem}
.featured .thumb{border-radius:16px}
.featured-copy{display:grid;gap:.8rem;padding:.6rem 1rem .6rem .2rem;min-width:0}
.featured-copy h3{font-size:clamp(1.6rem,2.6vw,2.2rem)}
.featured-copy .btn{justify-self:start}
.thumb{position:relative;aspect-ratio:16/9;max-width:100%;overflow:hidden;border-radius:14px;background:var(--wall-3);display:block;text-decoration:none;color:#fff}
.thumb img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.thumb::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(20,10,14,.45))}
.thumb .play{position:absolute;left:50%;top:50%;translate:-50% -50%;width:64px;height:64px;border-radius:50%;background:rgba(255,255,255,.92);color:var(--rose);display:grid;place-items:center;box-shadow:0 12px 30px -10px rgba(0,0,0,.5);transition:transform .25s ease,background .25s ease;z-index:1}
.thumb .play svg{width:26px;height:26px;margin-left:3px}
.thumb:hover img{transform:scale(1.04)}
.thumb:hover .play{transform:scale(1.08);background:#fff}
.thumb .dur{position:absolute;right:.7rem;bottom:.6rem;font-size:.72rem;font-weight:700;letter-spacing:.06em;background:rgba(20,10,14,.65);padding:.25em .55em;border-radius:6px;z-index:1;font-variant-numeric:tabular-nums}
.vgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,250px),1fr));gap:1.2rem 1.1rem}
.vcard{display:grid;gap:.6rem;min-width:0;align-content:start}
.vcard .thumb .play{width:48px;height:48px}
.vcard .thumb .play svg{width:20px;height:20px}
.vcard h3{font-family:var(--font-body);font-size:1rem;font-weight:700;line-height:1.35;letter-spacing:0}
.vcard h3 a{text-decoration:none}
.vcard h3 a:hover{color:var(--leaf-2)}
.vcard .meta{font-size:.78rem}
.series{display:inline-block;font-size:.7rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--leaf-2);background:#fff;border:1px solid rgba(46,111,49,.2);padding:.2em .6em;border-radius:999px}
/* Shorts (dikey) */
.sgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,160px),1fr));gap:1.1rem .9rem}
.srail{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(150px,170px);gap:.9rem;overflow-x:auto;scroll-snap-type:x mandatory;padding:.2rem .2rem 1rem;margin:0 calc(var(--gutter-l) * -1) 0 calc(var(--gutter-r) * -1);padding-left:var(--gutter-l);padding-right:var(--gutter-r);scrollbar-width:thin}
.srail>*{scroll-snap-align:start}
.scard{display:grid;gap:.5rem;min-width:0;align-content:start}
.scard .thumb{aspect-ratio:9/16;border-radius:16px}
.scard .thumb::after{background:linear-gradient(180deg,transparent 50%,rgba(20,10,14,.7))}
.scard .thumb .play{width:44px;height:44px;top:auto;bottom:.8rem;left:.8rem;translate:0 0}
.scard .thumb .play svg{width:18px;height:18px}
.scard .thumb .cap{position:absolute;left:.8rem;right:.8rem;bottom:4rem;font-size:.86rem;font-weight:700;line-height:1.3;z-index:1;text-shadow:0 1px 8px rgba(0,0,0,.5)}
.scard .thumb .views{position:absolute;right:.8rem;bottom:1.1rem;font-size:.72rem;font-weight:700;z-index:1;opacity:.9}
.scard .thumb .badge{position:absolute;left:.7rem;top:.7rem;font-size:.62rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;background:var(--rose);padding:.3em .6em;border-radius:6px;z-index:1}
.scard .meta{font-size:.76rem}
.vmore{display:flex;justify-content:center;margin-top:1.8rem}
.hidden-extra{display:none !important}
.expanded .hidden-extra{display:grid !important}
/* sekmeler + arama */
.toolbar{display:flex;flex-wrap:wrap;gap:.8rem 1rem;align-items:center;justify-content:space-between;margin-bottom:1.6rem}
.tabs{display:flex;flex-wrap:wrap;gap:.4rem;background:var(--paper);border:1px solid var(--line);border-radius:999px;padding:.3rem}
.tab{border:0;background:transparent;color:var(--ink-2);padding:.55em 1.05em;border-radius:999px;font-weight:700;font-size:.88rem;cursor:pointer;display:inline-flex;align-items:center;gap:.5em;transition:background .2s,color .2s}
.tab .n{font-size:.72rem;background:var(--wall-2);padding:.1em .5em;border-radius:999px;color:var(--mute)}
.tab[aria-selected="true"]{background:var(--accent,var(--leaf-2));color:#fff}
.tab[aria-selected="true"] .n{background:rgba(255,255,255,.22);color:#fff}
.search{display:flex;align-items:center;gap:.5rem;background:var(--paper);border:1px solid var(--line);border-radius:999px;padding:.35rem .5rem .35rem 1rem;min-width:min(100%,280px)}
.search input{border:0;background:transparent;font:inherit;font-size:.92rem;flex:1;min-width:0;outline:none;color:var(--ink)}
.search svg{width:18px;height:18px;color:var(--mute);flex:none}
.empty{padding:3rem 1rem;text-align:center;color:var(--mute);font-family:var(--font-display);font-size:1.3rem;font-style:italic}

/* ---------- 3D kitap eşiği ---------- */
.book-section{position:relative;height:340vh;background:linear-gradient(180deg,var(--wall) 0%,var(--wall-2) 50%,var(--rose-soft) 100%)}
.book-sticky{position:sticky;top:0;height:100vh;height:100svh;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:2rem;overflow:hidden}
.book-copy{display:grid;gap:1rem;max-width:34rem;padding-top:var(--nav-h)}
.book-copy .eyebrow{color:var(--rose)}
.book-copy h2{font-size:clamp(2rem,4.2vw,3.4rem)}
.book-caption{min-height:3.2em;font-family:var(--font-display);font-size:1.35rem;font-style:italic;color:var(--ink-2);transition:opacity .3s}
.book-caption.swap{opacity:0}
.book-stage{--bw:250px;--bh:352px;--thick:26px;width:calc(var(--bw) * 2 + 40px);height:calc(var(--bh) + 120px);position:relative;perspective:1900px;perspective-origin:50% 40%;flex:none;
  --bx:calc(var(--bw) / 2);--by:0px;--rx:0deg;--ry:0deg;--rz:0deg;--bs:1;--cov:-178deg;--p1:-178deg;--p2:-178deg;--p3:-178deg;--sh:.6}
.book{position:absolute;left:50%;top:60px;width:var(--bw);height:var(--bh);margin-left:calc(var(--bw) / -2);transform-style:preserve-3d;
  transform:translate3d(var(--bx),var(--by),0) rotateX(var(--rx)) rotateY(var(--ry)) rotateZ(var(--rz)) scale(var(--bs))}
.book>*{position:absolute;inset:0;transform-style:preserve-3d}
.face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:4px 10px 10px 4px;overflow:hidden}
.face.back{transform:rotateY(180deg);border-radius:10px 4px 4px 10px}
.paper{background:var(--paper);color:var(--ink);padding:9% 9% 8%;display:grid;grid-template-rows:auto 1fr auto auto;gap:.5rem;box-shadow:inset 14px 0 24px -16px rgba(43,25,32,.35)}
.face.back.paper{box-shadow:inset -14px 0 24px -16px rgba(43,25,32,.35)}
.paper .pg-eyebrow{font-size:.58rem;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--rose)}
.paper .pg-img{position:relative;min-height:0;overflow:hidden}
.paper .pg-img img{position:absolute;left:50%;top:50%;translate:-50% -50%;max-height:100%;max-width:100%;width:auto;height:auto;filter:drop-shadow(0 10px 14px rgba(43,25,32,.25))}
.paper .pg-title{font-family:var(--font-display);font-size:1.05rem;font-weight:700;line-height:1.15}
.paper .pg-author{font-size:.68rem;color:var(--mute);font-weight:600}
.paper .pg-text{font-family:var(--font-display);font-size:.98rem;line-height:1.35;color:var(--ink-2);align-self:center}
.paper .pg-text strong{color:var(--rose);font-weight:700}
.paper .pg-foot{font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);font-weight:700}
.basmala{font-family:var(--font-arabic);font-size:1.55rem;line-height:1.6;color:var(--gold-3);text-align:center;align-self:center;direction:rtl;padding:.3em .1em}
.cover-face{background:radial-gradient(120% 90% at 20% 0%,var(--rose-2),var(--rose) 45%,var(--rose-3) 100%);color:var(--gold-2);display:grid;grid-template-rows:auto 1fr auto;padding:9%;box-shadow:inset 0 0 0 1px rgba(234,215,161,.5),inset 12px 0 26px -16px rgba(0,0,0,.5)}
.cover-face::before{content:"";position:absolute;inset:16px;border:1px solid rgba(234,215,161,.55);border-radius:3px;pointer-events:none}
.cover-face .c-top{font-size:.62rem;letter-spacing:.26em;text-transform:uppercase;font-weight:800;text-align:center;opacity:.9}
.cover-face .c-mid{display:grid;place-items:center;gap:.35rem;align-content:center}
.cover-face .c-mid .logo-svg{height:auto;width:72%;color:#FFF4E8;--logo-leaf:var(--gold-2)}
.cover-face .c-mid .c-word{font-family:var(--font-display);font-size:1.45rem;letter-spacing:.3em;text-transform:uppercase;font-weight:500;color:var(--gold-2);margin-left:.3em}
.cover-face .c-bot{text-align:center;font-family:var(--font-display);font-style:italic;font-size:.95rem;color:#FFF4E8}
.logo-svg{display:block;height:auto;width:auto;color:#EC008C;--logo-leaf:#41B23B}
.spine{position:absolute;left:0;top:0;width:var(--thick);height:100%;transform:translateZ(-14px) rotateY(-90deg);transform-origin:left center;background:linear-gradient(90deg,var(--rose-3),var(--rose) 50%,var(--rose-3));backface-visibility:hidden;display:grid;place-items:center;border-radius:3px 0 0 3px}
.spine span{writing-mode:vertical-rl;transform:rotate(180deg);font-size:.6rem;letter-spacing:.3em;text-transform:uppercase;font-weight:800;color:var(--gold-2);white-space:nowrap}
.cover{transform-origin:left center;transform:rotateY(var(--cov)) translateZ(14px)}
.cover .face{box-shadow:0 20px 40px -20px rgba(43,25,32,.6)}
.sheet{transform-origin:left center}
.sheet.s1{transform:rotateY(var(--p1)) translateZ(10px)}
.sheet.s2{transform:rotateY(var(--p2)) translateZ(7px)}
.sheet.s3{transform:rotateY(var(--p3)) translateZ(4px)}
.block{transform:translateZ(-2px)}
.block .edges{position:absolute;right:0;top:3px;bottom:3px;width:12px;transform:rotateY(90deg);transform-origin:right center;background:repeating-linear-gradient(180deg,#fff 0 2px,#e9e2d6 2px 3px);border-radius:2px}
.backcover{transform:translateZ(-14px)}
.backcover .face{background:linear-gradient(90deg,var(--rose-3),var(--rose))}
.backcover .face.back{background:var(--rose-3)}
.book-shadow{position:absolute;left:50%;bottom:14px;width:calc(var(--bw) * 2);height:44px;translate:-50% 0;border-radius:50%;background:radial-gradient(ellipse at center,rgba(43,25,32,.35),transparent 65%);filter:blur(6px);opacity:var(--sh)}
.book-hint{position:absolute;left:50%;bottom:0;translate:-50% 0;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--mute);white-space:nowrap;transition:opacity .3s}
@media (max-width:900px){
  .book-section{height:300vh}
  .book-sticky{grid-template-columns:1fr;grid-template-rows:auto 1fr;justify-items:center;gap:.5rem;align-items:start;padding-top:calc(var(--nav-h) + env(safe-area-inset-top,0px))}
  .book-copy{padding-top:1.2rem;text-align:center;justify-items:center;gap:.6rem;max-width:30rem}
  .book-copy h2{font-size:clamp(1.8rem,7vw,2.4rem)}
  .book-copy .lead{font-size:.95rem}
  .book-caption{font-size:1.1rem;min-height:2.6em}
  .book-stage{--bw:150px;--bh:212px;--thick:18px;height:calc(var(--bh) + 90px);align-self:center}
  .book{top:40px}
  .paper{padding:8% 8% 7%;gap:.3rem}
  .paper .pg-title{font-size:.78rem}
  .paper .pg-text{font-size:.72rem}
  .paper .pg-eyebrow,.paper .pg-foot{font-size:.46rem}
  .paper .pg-author{font-size:.55rem}
  .basmala{font-size:1rem}
  .cover-face .c-mid .c-word{font-size:.95rem}
  .cover-face .c-bot{font-size:.7rem}
  .cover-face .c-top{font-size:.46rem}
  .cover-face::before{inset:9px}
}
@media (max-height:620px) and (min-width:901px){.book-stage{--bw:190px;--bh:268px;--thick:20px}}

/* ---------- Kitaplık ---------- */
.kitaplik{background:linear-gradient(180deg,var(--rose-soft) 0%,var(--wall) 30%);--accent:var(--rose)}
.kitaplik .eyebrow{color:var(--rose)}
.filters{display:flex;flex-wrap:wrap;gap:.5rem}
.chip{border:1.5px solid var(--line);background:transparent;color:var(--ink-2);padding:.5em 1.05em;border-radius:999px;font-weight:700;font-size:.85rem;cursor:pointer;transition:all .2s}
.chip:hover{border-color:var(--rose);color:var(--rose)}
.chip[aria-pressed="true"]{background:var(--rose);border-color:var(--rose);color:#fff}
.bgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,230px),1fr));gap:1.6rem 1.3rem}
.bcard{display:grid;grid-template-rows:auto 1fr auto;gap:.9rem;background:var(--paper);border-radius:20px;padding:1rem 1rem 1.1rem;border:1px solid var(--line);transition:transform .3s ease,box-shadow .3s ease;min-width:0}
.bcard:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
.bcard.is-hidden{display:none}
.bcover{aspect-ratio:3/4;max-width:100%;border-radius:12px;background:#fff;display:grid;place-items:center;overflow:hidden;perspective:900px;padding:8%}
.bcover img{max-height:100%;width:auto;object-fit:contain;transition:transform .5s ease;transform-style:preserve-3d;filter:drop-shadow(0 14px 18px rgba(43,25,32,.22))}
.bcard:hover .bcover img{transform:rotateY(-14deg) rotateX(4deg) scale(1.04)}
.binfo{display:grid;gap:.3rem;min-width:0}
.binfo .cat{font-size:.68rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--rose)}
.binfo h3{font-size:1.4rem;font-weight:700;line-height:1.1}
.binfo .sub{font-family:var(--font-display);font-size:1.02rem;color:var(--ink-2);font-style:italic;line-height:1.2}
.binfo .author{font-size:.85rem;color:var(--ink-2);font-weight:600}
.binfo .blurb{font-size:.82rem;color:var(--mute);line-height:1.45}
.bbuy{display:flex;align-items:center;justify-content:space-between;gap:.6rem;border-top:1px dashed var(--line);padding-top:.9rem}
.price{font-weight:800;font-variant-numeric:tabular-nums;font-size:1.05rem}
.price small{display:block;font-size:.66rem;color:var(--mute);font-weight:600;letter-spacing:.04em}
.bbuy .btn{padding:.62em 1.05em;font-size:.86rem}
.store-note{margin-top:2.2rem;display:flex;flex-wrap:wrap;gap:.6rem 1rem;align-items:center;font-size:.86rem;color:var(--ink-2);background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:.9rem 1.1rem}
.store-note svg{width:20px;height:20px;color:var(--rose);flex:none}

/* ---------- Seydapp ---------- */
.appsec{background:linear-gradient(180deg,var(--wall) 0%,var(--teal-soft) 40%,var(--wall) 100%);--accent:var(--teal)}
.appsec .eyebrow{color:var(--teal)}
.app-hero{display:grid;grid-template-columns:1.1fr 1fr;gap:2.5rem;align-items:center}
.app-id{display:flex;align-items:center;gap:1rem;margin-bottom:1rem}
.app-id img{width:72px;height:72px;border-radius:20px;box-shadow:0 12px 30px -12px rgba(15,81,70,.5)}
.app-id h3,.app-id h2{font-size:2rem;margin:0}
.app-id .dev{font-size:.84rem;color:var(--mute)}
.app-copy{display:grid;gap:1rem;min-width:0}
.app-badges{display:flex;flex-wrap:wrap;gap:.5rem .8rem;font-size:.82rem;color:var(--ink-2)}
.app-badges span{background:var(--paper);border:1px solid var(--line);border-radius:999px;padding:.35em .8em;font-weight:600;font-variant-numeric:tabular-nums}
.app-badges span b{color:var(--teal)}
.phones{display:grid;grid-template-columns:repeat(3,1fr);gap:.9rem;align-items:end;perspective:1200px}
.phone{border-radius:22px;overflow:hidden;background:#0b2b26;padding:5px;box-shadow:0 30px 50px -28px rgba(11,61,53,.7);aspect-ratio:9/19;max-width:100%;transform:rotateY(var(--ry,0)) translateY(var(--ty,0));transition:transform .4s ease}
.phone img{width:100%;height:100%;object-fit:cover;object-position:top;border-radius:17px}
.phone:nth-child(1){--ry:12deg;--ty:14px}.phone:nth-child(3){--ry:-12deg;--ty:14px}
.phones:hover .phone{--ry:0deg}
.features{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:1rem;margin-top:2.4rem}
.feature{display:grid;gap:.4rem;padding:1.2rem 1.3rem;border-radius:18px;background:var(--paper);border:1px solid var(--line);min-width:0}
.feature h3{font-size:1.25rem}
.feature p{font-size:.9rem;color:var(--ink-2)}
.feature .fi{width:36px;height:36px;border-radius:10px;background:var(--teal-soft);color:var(--teal);display:grid;place-items:center;margin-bottom:.3rem}
.feature .fi svg{width:18px;height:18px}
.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));gap:1rem;margin-top:2rem}
.gallery .phone{--ry:0deg;--ty:0}
.gplay{display:inline-flex;align-items:center;gap:.7em;background:#111;color:#fff;border-radius:12px;padding:.55em 1em .55em .8em;text-decoration:none;font-weight:700;line-height:1.1;transition:transform .2s,box-shadow .2s}
.gplay:hover{transform:translateY(-2px);box-shadow:0 12px 26px -12px rgba(0,0,0,.6)}
.gplay small{display:block;font-size:.62rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;opacity:.75}
.gplay svg{width:26px;height:26px}
@media (max-width:900px){
  .app-hero{grid-template-columns:1fr}
  .phones{max-width:420px;margin-inline:auto}
}

/* ---------- Hakkında ---------- */
.hakkinda{padding-block:5rem 6rem}
.pillars{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:1.2rem;margin-top:2rem}
.pillar{display:grid;gap:.6rem;padding:1.4rem;border-radius:20px;border:1px solid var(--line);background:linear-gradient(180deg,rgba(255,253,248,.9),rgba(255,253,248,.5));min-width:0;align-content:start}
.pillar .pi{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;color:#fff;overflow:hidden}
.pillar .pi svg{width:22px;height:22px}
.pillar .pi img{width:100%;height:100%;object-fit:cover}
.pillar h3{font-size:1.5rem}
.pillar p{font-size:.92rem;color:var(--ink-2)}
.pillar a{font-weight:700;font-size:.9rem;text-decoration:none}
.pillar .soon{font-size:.68rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-3)}
.pillar.ghost{border-style:dashed;background:transparent}
.contact{margin-top:2.4rem;display:flex;flex-wrap:wrap;gap:.8rem;align-items:center}

/* ---------- Footer ---------- */
.footer{background:var(--ink);color:#EADFD5;padding-block:3.2rem 2.4rem}
.footer .wrap{display:grid;gap:2rem;grid-template-columns:1.3fr 1fr 1fr}
.footer .flogo{height:54px;width:auto}
.footer .tag{font-family:var(--font-display);font-style:italic;font-size:1.2rem;color:var(--gold-2);margin-top:.9rem}
.footer h4{margin:0 0 .8rem;font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-2);font-weight:800;font-family:var(--font-body)}
.footer ul{list-style:none;margin:0;padding:0;display:grid;gap:.45rem;font-size:.92rem}
.footer a{text-decoration:none;opacity:.85}
.footer a:hover{opacity:1;color:#fff}
.footer .copy{grid-column:1/-1;border-top:1px solid rgba(255,255,255,.12);padding-top:1.2rem;font-size:.78rem;opacity:.7;display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;justify-content:space-between}
@media (max-width:760px){.footer .wrap{grid-template-columns:1fr 1fr}.footer .brand-col{grid-column:1/-1}}

/* ---------- Oynatıcı ---------- */
.player{position:fixed;inset:0;z-index:80;display:none;align-items:center;justify-content:center;padding:max(16px,env(safe-area-inset-left,0px));background:rgba(20,10,14,.84);backdrop-filter:blur(8px)}
.player.open{display:flex}
.player-box{width:min(1100px,100%);display:grid;gap:.8rem}
.player.vertical .player-box{width:min(440px,100%)}
.player-frame{position:relative;aspect-ratio:16/9;max-width:100%;border-radius:16px;overflow:hidden;background:#000;box-shadow:0 40px 80px -30px rgba(0,0,0,.8)}
.player.vertical .player-frame{aspect-ratio:9/16;max-height:82vh;margin-inline:auto;width:auto}
.player-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.player-bar{display:flex;align-items:center;justify-content:space-between;gap:1rem;color:#fff}
.player-bar h3{font-family:var(--font-body);font-size:1rem;font-weight:700;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.player-close{border:0;background:rgba(255,255,255,.14);color:#fff;width:42px;height:42px;border-radius:50%;cursor:pointer;display:grid;place-items:center;flex:none}
.player-close:hover{background:rgba(255,255,255,.28)}

/* ---------- Görünme animasyonları ---------- */
.js .reveal{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s ease}
.js .reveal.in{opacity:1;transform:none}
.js .reveal[data-delay="1"]{transition-delay:.1s}.js .reveal[data-delay="2"]{transition-delay:.2s}.js .reveal[data-delay="3"]{transition-delay:.3s}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .reveal{opacity:1;transform:none;transition:none}
  .shadows .leaf,.scroll-cue i{animation:none}
  .book-section{height:auto;padding-block:4rem}
  .book-sticky{position:static;height:auto}
  .book-hint{display:none}
}
@media (max-width:900px){
  .section{padding-block:4rem}
  .featured{grid-template-columns:1fr;gap:.6rem}
  .featured-copy{padding:.4rem .4rem .6rem}
}