/* ============================================================ KÖYLÜM ODAK — Giriş animasyonu (uçan eski kitap → sayfa çevirme) ------------------------------------------------------------ Yalnız /odak landing'de, oturum başına BİR KEZ oynar (JS: odak-intro.js). prefers-reduced-motion açıksa hiç gösterilmez. Dekoratif katman: gerçek sayfa arkada hazırdır, JS çalışmasa bile içerik normal görünür. Çakışmayı önlemek için tüm sınıflar 'oi-' önekli ve .odak-intro altında. ============================================================ */ .odak-intro{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center; perspective:1500px;perspective-origin:50% 42%;opacity:0;visibility:hidden;pointer-events:none; background:#0d0b07;transition:opacity .45s} /* tam opak zemin üstünde yumuşak vinyet (sayfa asla arkadan sızmaz) */ .odak-intro::before{content:"";position:absolute;inset:0;pointer-events:none; background:radial-gradient(circle at 50% 44%,rgba(60,44,20,.55),rgba(8,6,4,1) 72%)} /* Boot script (head) 'e bu sınıfı ekleyince overlay İLK KAREDE görünür */ html.odak-intro-on .odak-intro{opacity:1;visibility:visible;pointer-events:auto} .oi-halo{position:absolute;top:50%;left:50%;width:620px;height:620px;transform:translate(-50%,-52%);pointer-events:none;background:radial-gradient(circle,rgba(201,160,90,.15),transparent 62%);opacity:1} .oi-flash{position:absolute;inset:0;background:radial-gradient(circle at 50% 46%,rgba(255,244,214,.85),transparent 55%);opacity:0;pointer-events:none} .oi-flash.pop{animation:oi-flash .45s ease-out forwards} @keyframes oi-flash{0%{opacity:0;transform:scale(.7)}28%{opacity:.8}100%{opacity:0;transform:scale(1.35)}} /* sarmalayıcı: perspektif ataların .odak-intro'sundan gelir (preserve-3d ile geçer); masaüstünde transform yok → görünüm birebir aynı. Mobil konumlama buradan yapılır. */ .oi-book-wrap{transform-style:preserve-3d} /* uçan eski kitap (portre, tek kapak) */ .oi-book{position:relative;width:clamp(200px,22vw,264px);height:clamp(270px,30vw,356px); transform-style:preserve-3d;will-change:transform; transform:translateY(52vh) translateZ(-760px) rotateX(52deg) rotateZ(-10deg)} .oi-book.oi-flyin{animation:oi-flyin .62s cubic-bezier(.2,.8,.25,1) forwards} @keyframes oi-flyin{0%{transform:translateY(52vh) translateZ(-760px) rotateX(52deg) rotateZ(-10deg);opacity:0} 40%{opacity:1}100%{transform:translateY(0) rotateX(12deg) rotateY(-22deg) rotateZ(-1deg)}} .oi-book.oi-floating{animation:oi-floaty 4s ease-in-out infinite} @keyframes oi-floaty{0%{transform:translateY(0) rotateX(12deg) rotateY(-22deg) rotateZ(-1deg)} 50%{transform:translateY(-18px) rotateX(9deg) rotateY(-15deg) rotateZ(1deg)} 100%{transform:translateY(0) rotateX(12deg) rotateY(-22deg) rotateZ(-1deg)}} .oi-book.oi-vanish{animation:none!important;transition:transform .3s cubic-bezier(.5,0,.75,.2),opacity .3s,filter .3s; transform:translateY(-44px) translateZ(240px) rotateX(12deg) rotateY(-22deg) scale(1.12);opacity:0;filter:blur(11px)} .oi-leather{background: radial-gradient(circle at 28% 22%,rgba(0,0,0,.20),transparent 42%), radial-gradient(circle at 72% 78%,rgba(0,0,0,.24),transparent 46%), radial-gradient(circle at 82% 18%,rgba(255,220,160,.10),transparent 30%), radial-gradient(circle at 15% 82%,rgba(255,220,160,.06),transparent 28%), linear-gradient(150deg,#6a4f2c,#4d3a20 55%,#382916); background-color:#4a3721;box-shadow:inset 0 0 26px rgba(20,12,4,.6)} .oi-back{position:absolute;inset:0;transform:translateZ(-26px);border-radius:3px 8px 8px 3px; background:linear-gradient(150deg,#2c2114,#211810);border:1px solid #241a0e;box-shadow:0 40px 60px -30px rgba(0,0,0,.8)} .oi-spine{position:absolute;left:0;top:0;height:100%;width:26px;transform-origin:left center;transform:rotateY(-90deg); background:linear-gradient(90deg,#22190d,#3d2c16);border-radius:3px 0 0 3px} .oi-pages{position:absolute;inset:5px 5px 5px 7px;transform:translateZ(-2px);border-radius:2px 6px 6px 2px; background:radial-gradient(circle at 70% 30%,rgba(150,120,60,.10),transparent 26%),linear-gradient(90deg,#d8c69c,#e7d7ae 8%); box-shadow:2px 0 0 #ded0a6,4px 0 0 #e7d7ae,6px 0 0 #d8c69c,8px 0 0 #e7d7ae,10px 0 0 #d3c396,12px 0 0 #e7d7ae} .oi-pages .oi-lines{position:absolute;inset:18px 16px 18px 16px;background:repeating-linear-gradient(transparent,transparent 13px,rgba(120,95,45,.12) 13px,rgba(120,95,45,.12) 14px)} .oi-leaves{position:absolute;inset:5px 5px 5px 7px;transform-style:preserve-3d;transform:translateZ(20px)} .oi-leaf{position:absolute;inset:0;transform-origin:left center;transform:rotateY(0deg); background:radial-gradient(circle at 65% 40%,rgba(150,120,60,.08),transparent 24%),linear-gradient(100deg,#ecdcb6,#dccca0); border:1px solid #cdb884;border-radius:2px 6px 6px 2px;box-shadow:4px 0 12px -6px rgba(80,55,20,.45)} .oi-leaf::after{content:"";position:absolute;inset:18px 14px 18px 12px;background:repeating-linear-gradient(transparent,transparent 13px,rgba(120,95,45,.11) 13px,rgba(120,95,45,.11) 14px)} .oi-leaf .oi-glow{position:absolute;inset:0;border-radius:inherit;background:linear-gradient(90deg,transparent 40%,rgba(60,40,10,.22));opacity:0} .oi-book.oi-go .oi-leaf{animation:oi-riffle var(--oi-dur,.62s) linear infinite} .oi-book.oi-go .oi-leaf .oi-glow{animation:oi-gl calc(var(--oi-dur,.62s)/2) ease-in-out infinite} @keyframes oi-riffle{0%{transform:rotateY(0deg)}100%{transform:rotateY(-360deg)}} @keyframes oi-gl{0%,100%{opacity:0}50%{opacity:.5}} .oi-front{position:absolute;inset:0;transform-origin:left center;transform:rotateY(0deg) translateZ(22px); transform-style:preserve-3d;z-index:9;transition:transform .5s cubic-bezier(.45,.05,.25,1)} .oi-book.oi-open .oi-front{transform:rotateY(-162deg) translateZ(22px)} .oi-front .oi-fc{position:absolute;inset:0;border-radius:3px 8px 8px 3px;backface-visibility:hidden;border:1px solid #2e2113} .oi-front .oi-fc.oi-in{transform:rotateY(180deg);border-radius:8px 3px 3px 8px; background:radial-gradient(circle at 30% 30%,rgba(150,120,60,.10),transparent 26%),linear-gradient(#e7d7ae,#d6c088); box-shadow:inset 12px 0 20px -12px rgba(90,65,25,.4)} .oi-emboss{position:absolute;inset:13px 14px 13px 20px;border:1px solid rgba(185,149,78,.42);border-radius:2px;pointer-events:none} .oi-ornament{position:absolute;top:50%;left:52%;width:54px;height:54px;transform:translate(-50%,-50%) rotate(45deg); border:1px solid rgba(185,149,78,.5);box-shadow:0 0 0 6px transparent,0 0 0 7px rgba(185,149,78,.25);pointer-events:none} .oi-ornament::after{content:"";position:absolute;inset:9px;border:1px solid rgba(185,149,78,.4)} /* MOBİL: kitabı küçült + hafif sağa al, açılan kapağı daha az yatır → dar ekranda sola taşma/eksik görünme olmaz (masaüstü etkilenmez). */ @media (max-width: 600px){ .oi-book-wrap{transform:translateX(6vw) scale(.82)} .oi-book.oi-open .oi-front{transform:rotateY(-122deg) translateZ(22px)} } @media (max-width: 380px){ .oi-book-wrap{transform:translateX(7vw) scale(.72)} } @media (prefers-reduced-motion: reduce){ .odak-intro{display:none!important} }