/* Ana Sayfa: üstte başlık, altta kubbe + oyunlar (stiller css/style.css içinde) */
.page[data-page="ana-sayfa"]{justify-content:flex-end}

/* Yan notlar (js/notes.js) */
.hero{position:relative}
.notes{position:absolute;inset:0;pointer-events:none;z-index:2}
.note{position:absolute;top:var(--cy,50%);width:19.4em;font-size:clamp(9.5px,.72vw,11.5px);font-weight:400;line-height:1.618;letter-spacing:0;text-align:center;color:#000;text-rendering:geometricPrecision;transition:opacity .618s ease,filter .618s ease}
.note.l{left:var(--cx,12vw);transform:translate(-50%,-50%) skewY(-6deg)}
.note.r{right:var(--cx,12vw);transform:translate(50%,-50%) skewY(6deg)}
.note.out{opacity:0;filter:blur(3px)}
.note .bob{position:relative;animation:noteBob 3.236s ease-in-out infinite}
@keyframes noteBob{0%,100%{transform:translateY(-5px)}50%{transform:translateY(5px)}}
.note p{margin:0;text-wrap:balance}
.note .b{font-weight:300;color:rgba(0,0,0,.62)}
.note .rest{visibility:hidden}
.note .hl{position:relative;white-space:nowrap;color:#000;font-weight:400}
.note .hl.end{display:block;width:fit-content;margin:0 auto}
/* önemli cümlenin altı: soldan akar, hafif taşıp yerine oturur */
.note .ul{position:absolute;left:0;right:0;bottom:-.0618em;height:1.2px;border-radius:1px;background:#000;transform:scaleX(0);transform-origin:0 50%}
.note .ul.draw{animation:noteUl 1s cubic-bezier(.62,0,.2,1) forwards}
@keyframes noteUl{0%{transform:scaleX(0)}72%{transform:scaleX(1.04)}100%{transform:scaleX(1)}}
/* yazı bitince çevrede beliren küçük süsler */
.note .dc{position:absolute;display:block;width:calc(11px*var(--s));height:calc(11px*var(--s));margin:calc(-5.5px*var(--s)) 0 0 calc(-5.5px*var(--s));animation:dcIn .618s cubic-bezier(.34,1.56,.64,1) var(--d) backwards,dcTw 2.618s ease-in-out calc(var(--d) + .618s) infinite}
.note .dc svg{display:block;width:100%;height:100%;fill:#000}
.note .dc-dot{width:4px;height:4px;margin:-2px 0 0 -2px;border-radius:50%;background:#000}
.note .dc-ring{width:7px;height:7px;margin:-3.5px 0 0 -3.5px;border:1px solid #000;border-radius:50%;box-sizing:border-box}
.note .dc-plus::before,.note .dc-plus::after{content:"";position:absolute;background:#000}
.note .dc-plus::before{left:0;right:0;top:calc(50% - .5px);height:1px}
.note .dc-plus::after{top:0;bottom:0;left:calc(50% - .5px);width:1px}
@keyframes dcIn{from{opacity:0;transform:scale(0) rotate(-90deg)}}
@keyframes dcTw{0%,100%{transform:none;opacity:1}50%{transform:scale(.618) rotate(45deg);opacity:.382}}
@media(max-width:1180px){.notes{display:none}}