/* Shiny Sharky — ortak hareket katmanı.
   Kural: hareket yalnızca html[data-motion="on"] iken eklenir. Kapalıyken (azaltılmış hareket ya da
   "Hareketi durdur") her öğe son hâlinde, eksiksiz görünür. Yalnızca transform / opacity / clip-path /
   SVG çizgisi canlandırılır. */
:root{--e-pop:cubic-bezier(.34,1.56,.64,1);--e-out:cubic-bezier(.22,1,.36,1);--e-io:cubic-bezier(.65,0,.35,1);--paste:#7FD3FF}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
html[data-motion="on"]{scroll-behavior:smooth}

/* ---------- Hareket düğmesi ---------- */
.mt{display:inline-flex;align-items:center;gap:8px;font:800 14px/1 var(--f-body);color:#fff;background:rgba(255,255,255,.16);
  border:2px solid rgba(255,255,255,.5);border-radius:999px;padding:0 14px;min-height:44px;cursor:pointer;visibility:hidden;flex:none}
[data-js] .mt{visibility:visible}
.mt svg{width:14px;height:14px;flex:none}
.mt .lb{display:grid}
.mt .lb>span{grid-area:1/1}
.mt .off,.mt .i-play{visibility:hidden}
[data-motion="off"] .mt .on,[data-motion="off"] .mt .i-pause{visibility:hidden}
[data-motion="off"] .mt .off,[data-motion="off"] .mt .i-play{visibility:visible}
.mt .ic{display:grid}.mt .ic>svg{grid-area:1/1}
.mt:hover{background:rgba(255,255,255,.26)}
.mt.dark{color:var(--fg);background:var(--surface);border-color:var(--line)}
@media (max-width:480px){.mt .pre{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}.mt .on,.mt .off{text-transform:capitalize}}

/* ---------- Görünüme girince: tek sistem ---------- */
@keyframes rv{from{opacity:0;transform:translate3d(var(--rx,0px),var(--ry,28px),0) scale(var(--rs,1)) rotate(var(--rr,0deg))}}
[data-reveal="pop"]{--ry:14px;--rs:.92}
[data-reveal="left"]{--rx:-28px;--ry:0px}
[data-reveal="right"]{--rx:28px;--ry:0px}
@supports (animation-timeline:view()){
  [data-motion="on"] [data-reveal]{animation:rv linear both;animation-timeline:view();
    animation-range:entry calc(var(--i,0)*7%) entry calc(75% + var(--i,0)*7%)}
}
@supports not (animation-timeline:view()){
  [data-motion="on"][data-io] [data-reveal]{transition:opacity .6s var(--e-out) calc(var(--i,0)*90ms),transform .8s var(--e-pop) calc(var(--i,0)*90ms)}
  [data-motion="on"][data-io] [data-reveal]:not(.in){opacity:0;transform:translate3d(var(--rx,0px),var(--ry,28px),0) scale(var(--rs,1)) rotate(var(--rr,0deg))}
}
/* Tek seferlik sahneler: [data-play] görünüme girince .play alır; o ana kadar ilk karede bekler */
[data-motion="on"][data-js] [data-play]:not(.play),[data-motion="on"][data-js] [data-play]:not(.play) *,
[data-motion="on"][data-js] [data-play]:not(.play) *::before,[data-motion="on"][data-js] [data-play]:not(.play) *::after{animation-play-state:paused!important}
/* Sürekli küçük döngüler ekran dışındayken (.away) durur */
[data-motion="on"] .idle.away,[data-motion="on"] .idle.away *,[data-motion="on"] .idle.away::before,[data-motion="on"] .idle.away::after{animation-play-state:paused!important}

/* ---------- Diş macunu çizgisi ---------- */
.paste{font-style:normal}
.w{display:inline-block;position:relative}
.paste .w::after{content:"";position:absolute;left:-.04em;right:-.32em;bottom:.02em;height:.2em;border-radius:1em;z-index:-1;
  background:linear-gradient(180deg,#fff 0 30%,var(--paste) 30% 70%,#fff 70%);box-shadow:0 .03em 0 rgba(11,37,69,.18);transform-origin:left center}
.paste .w.last::after{right:-.04em}
.paste{position:relative;isolation:isolate}
@keyframes paste{from{transform:scaleX(0)}}
[data-motion="on"] .paste .w::after{animation:paste .34s var(--e-out) both;animation-delay:calc(var(--pd,.9s) + var(--k,0)*.15s)}
.spark{position:absolute;right:-.42em;top:-.12em;width:.42em;height:.42em;color:#FFC93C}
.spark svg{width:100%;height:100%;display:block}
@keyframes spark-pop{0%{transform:scale(0) rotate(-60deg)}60%{transform:scale(1.35) rotate(10deg)}100%{transform:none}}
@keyframes spark-tw{0%,100%{transform:none}50%{transform:scale(.7) rotate(25deg)}}
[data-motion="on"] .spark{animation:spark-pop .5s var(--e-pop) both calc(var(--pd,.9s) + var(--n,4)*.15s),spark-tw 1.2s ease-in-out calc(var(--pd,.9s) + var(--n,4)*.15s + .6s) 2}

/* ---------- Düğme mikro hareketleri ---------- */
.btn{position:relative;overflow:hidden;isolation:isolate;transition:transform .18s var(--e-out),box-shadow .18s var(--e-out)}
.btn:active{transform:translateY(2px) scale(.97)}
.btn-store:active{transform:translateY(4px);box-shadow:0 2px 0 rgba(0,0,0,.22)}
.btn-store::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.28) 50%,transparent 65%);transform:translateX(-110%)}
@keyframes shimmer{0%{transform:translateX(-110%)}35%,100%{transform:translateX(110%)}}
[data-motion="on"] .btn-store::after{animation:shimmer 3.6s var(--e-io) 1.6s 3}
.btn-ghost::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;
  background:radial-gradient(circle at 20% 30%,rgba(255,255,255,.5) 0 3px,transparent 4px),radial-gradient(circle at 70% 60%,rgba(255,255,255,.45) 0 2px,transparent 3px),radial-gradient(circle at 45% 80%,rgba(255,255,255,.4) 0 4px,transparent 5px),rgba(255,255,255,.2);
  transform:translateY(102%);transition:transform .45s var(--e-out)}
@media (hover:hover) and (pointer:fine){
  .btn:hover{transform:translateY(-2px)}
  .btn-store:hover{box-shadow:0 8px 0 rgba(0,0,0,.22)}
  .btn-ghost:hover::before{transform:none}
  .btn:active{transform:translateY(2px) scale(.97)}
  .btn-store:active{transform:translateY(4px);box-shadow:0 2px 0 rgba(0,0,0,.22)}
}
[data-motion="off"] .btn,[data-motion="off"] .btn::before{transition:none}
.arrow-link{display:inline-flex;align-items:center;gap:6px}
.arrow-link svg{width:18px;height:18px;transition:transform .25s var(--e-pop)}
.arrow-link:hover svg{transform:translateX(4px)}

/* Kart eğimi (yalnızca fare) */
@media (hover:hover) and (pointer:fine){
  [data-motion="on"] .tilt{transform:perspective(900px) rotateX(var(--tx,0deg)) rotateY(var(--ty,0deg)) translateY(var(--tz,0px));transition:transform .5s var(--e-out)}
  [data-motion="on"] .tilt.hov{transition:transform .12s linear;--tz:-4px}
  .tilt{position:relative}
  .tilt::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .3s;
    background:radial-gradient(circle at var(--gx,50%) var(--gy,50%),rgba(255,255,255,.35),transparent 55%)}
  [data-motion="on"] .tilt.hov::after{opacity:1}
}

/* ---------- Sharky rig ---------- */
.rig *{transform-box:view-box}
.rig .sh-eye-l,.rig .sh-eye-r{transition:scale .07s ease-in,translate .25s var(--e-out)}
.rig.blink .sh-eye-l,.rig.blink .sh-eye-r{scale:1 .12}
@keyframes sh-wag{0%,100%{transform:rotate(-6deg)}50%{transform:rotate(9deg)}}
@keyframes sh-sway{0%,100%{transform:rotate(-2deg)}50%{transform:rotate(3deg)}}
@keyframes sh-flap{0%,100%{transform:rotate(0)}50%{transform:rotate(-12deg)}}
@keyframes sh-flap-r{0%,100%{transform:rotate(0)}50%{transform:rotate(12deg)}}
@keyframes sh-wave{0%,100%{transform:rotate(0)}50%{transform:rotate(-24deg)}}
@keyframes sh-tw{0%,100%{transform:scale(1)}50%{transform:scale(.6) rotate(20deg)}}
@keyframes sh-breathe{0%,100%{transform:none}50%{transform:scale(1.015,.985)}}
@keyframes sh-foam{0%,100%{transform:scale(1)}50%{transform:scale(1.25) translateY(-2px)}}
@keyframes sh-scrub{0%,100%{transform:translate(-3px,1px) rotate(-3deg)}50%{transform:translate(3px,-1px) rotate(3deg)}}
[data-motion="on"] .rig .sh-tail{animation:sh-wag 2.4s ease-in-out infinite}
[data-motion="on"] .rig .sh-dorsal{animation:sh-sway 3.2s ease-in-out infinite}
[data-motion="on"] .rig .sh-fin-l{animation:sh-flap 2.6s ease-in-out infinite}
[data-motion="on"] .rig .sh-fin-r{animation:sh-flap-r 2.6s ease-in-out .4s infinite}
[data-motion="on"] .rig .sh-body{animation:sh-breathe 3.2s ease-in-out infinite}
[data-motion="on"] .rig .sh-spark-big{animation:sh-tw 2.8s ease-in-out infinite}
[data-motion="on"] .rig .sh-spark-small{animation:sh-tw 2.8s ease-in-out 1.1s infinite}
[data-motion="on"] .rig .sh-glint{animation:sh-tw 2.8s ease-in-out .5s infinite}
[data-motion="on"] .rig[data-mood="wave"] .sh-fin-r{animation:sh-wave .9s ease-in-out 3,sh-flap-r 2.6s ease-in-out 2.7s infinite}
[data-motion="on"] .scrub .rig .sh-brush{animation:sh-scrub .4s ease-in-out infinite}
[data-motion="on"] .scrub .rig .sh-foam>*{transform-box:fill-box;transform-origin:center;animation:sh-foam .5s ease-in-out infinite}
[data-motion="on"] .scrub .rig .sh-foam>:nth-child(2n){animation-delay:-.25s}
/* Dokun: renk değiştir */
.sharky-btn{appearance:none;background:none;border:0;padding:0;margin:0;cursor:pointer;display:block;border-radius:50%;-webkit-tap-highlight-color:transparent;position:relative}
.sharky-btn svg{display:block;width:100%;height:100%}
.burst{position:absolute;left:50%;top:45%;width:0;height:0;pointer-events:none;z-index:3}
.burst i{position:absolute;left:-7px;top:-7px;width:14px;height:14px;background:var(--c,#FFC93C);
  clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%)}

/* ---------- Okyanus: kabarcık tuvali, dalgalar, ışık ---------- */
.sea-canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}
.rays{position:absolute;inset:0 0 auto 0;height:70%;pointer-events:none;z-index:0;overflow:hidden;opacity:.55}
.rays i{position:absolute;top:-20%;width:14%;height:130%;background:linear-gradient(180deg,rgba(255,255,255,.32),transparent 75%);
  transform-origin:50% 0;transform:rotate(var(--a));filter:blur(6px)}
.rays i:nth-child(1){left:18%;--a:18deg}.rays i:nth-child(2){left:46%;--a:10deg;width:9%}.rays i:nth-child(3){left:72%;--a:24deg;width:18%}
@keyframes ray{0%,100%{transform:rotate(var(--a))}50%{transform:rotate(calc(var(--a) - 6deg))}}
[data-motion="on"] .rays i{animation:ray 11s ease-in-out infinite}
[data-motion="on"] .rays i:nth-child(2){animation-duration:14s;animation-delay:-4s}
[data-motion="on"] .rays i:nth-child(3){animation-duration:17s;animation-delay:-9s}
.waves{position:absolute;left:0;right:0;bottom:-1px;height:70px;overflow:hidden;z-index:1;pointer-events:none;view-transition-name:wave}
.waves svg{position:absolute;bottom:0;left:0;width:200%;height:100%;display:block}
.waves .w3 path{fill:rgba(255,255,255,.12)}.waves .w3{height:100%;bottom:12px}
.waves .w2 path{fill:rgba(255,255,255,.2)}.waves .w2{bottom:5px}
.waves .w1 path{fill:var(--wave)}
@keyframes drift{to{transform:translateX(-50%)}}
[data-motion="on"] .waves .w1{animation:drift 26s linear infinite}
[data-motion="on"] .waves .w2{animation:drift 18s linear -7s infinite}
[data-motion="on"] .waves .w3{animation:drift 34s linear infinite}

/* ---------- SSS: yumuşak açılma ---------- */
summary::after{transition:transform .3s var(--e-pop)}
details[open]>summary::after{content:"+"!important;transform:rotate(45deg)}
summary{border-radius:10px}
@supports selector(::details-content){
  [data-motion="on"]{interpolate-size:allow-keywords}
  [data-motion="on"] details::details-content{block-size:0;overflow-y:clip;transition:block-size .38s var(--e-out),content-visibility .38s allow-discrete}
  [data-motion="on"] details[open]::details-content{block-size:auto}
  [data-motion="on"] details>:not(summary){transition:opacity .35s ease .05s,translate .4s var(--e-out) .05s}
  [data-motion="on"] details:not([open])>:not(summary){opacity:0;translate:0 -6px}
}
@keyframes li-in{from{opacity:0;transform:translateX(-8px)}}
[data-motion="on"] details[open] ol>li,[data-motion="on"] details[open] ul>li{animation:li-in .4s var(--e-out) both;animation-delay:calc(var(--i,0)*90ms + 80ms)}

/* ---------- Deniz tabanı altbilgi ---------- */
.sea-foot{position:relative;padding-top:70px;border-top:0!important;color:#CFE3F7!important;
  background:linear-gradient(180deg,#155FA8,#0B2545 70%);overflow:hidden;isolation:isolate}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .sea-foot{background:linear-gradient(180deg,#0E3E78,#050F1F 70%)}}
:root[data-theme="dark"] .sea-foot{background:linear-gradient(180deg,#0E3E78,#050F1F 70%)}
.sea-foot a,.sea-foot .logo{color:#F0F8FE!important}
.sea-foot .sea-top{position:absolute;top:-1px;left:0;width:200%;height:46px;display:block}
.sea-foot .sea-top path{fill:var(--foot-prev,var(--bg))}
[data-motion="on"] .sea-foot .sea-top{animation:drift 30s linear infinite}
.seabed{position:absolute;inset:auto 0 0 0;height:120px;pointer-events:none;z-index:-1}
.seabed .sand{position:absolute;bottom:0;left:0;width:100%;height:46px;display:block}
.seabed .sand path{fill:rgba(255,206,110,.2)}
.weed{position:absolute;bottom:14px;width:26px;height:var(--h,90px);transform-origin:50% 100%}
.weed svg{width:100%;height:100%;display:block}
.weed path{fill:none;stroke:var(--c,#2DD4BF);stroke-width:6;stroke-linecap:round;opacity:.55}
@keyframes weed{0%,100%{transform:rotate(-5deg)}50%{transform:rotate(6deg)}}
[data-motion="on"] .weed{animation:weed var(--d,5s) ease-in-out infinite}
.fb{position:absolute;bottom:20px;width:var(--s,8px);height:var(--s,8px);border-radius:50%;border:1.5px solid rgba(255,255,255,.45);opacity:0}
@keyframes fb{0%{transform:none;opacity:0}15%{opacity:1}100%{transform:translate(8px,-110px);opacity:0}}
[data-motion="on"] .fb{animation:fb var(--d,6s) ease-in infinite var(--dl,0s)}
.sea-foot .wrap{position:relative;padding-bottom:60px}
@keyframes swim-up{0%{transform:none}40%{transform:translateY(4px) rotate(8deg)}100%{transform:translateY(-26px) rotate(-14deg)}}

/* ---------- Sharky kaydırma rehberi ---------- */
.guide{position:fixed;z-index:20;pointer-events:none;right:14px;top:30vh;height:40vh;width:44px;opacity:0;transition:opacity .4s}
.guide.show{opacity:1}
[data-motion="off"] .guide{display:none}
.g-track{position:absolute;left:21px;top:0;bottom:0;width:2px;border-radius:2px;background:repeating-linear-gradient(180deg,rgba(42,143,224,.45) 0 4px,transparent 4px 10px)}
.g-fish{position:absolute;left:0;top:-22px;width:44px;height:44px;transform:translateY(calc(var(--p,0)*40vh))}
.g-fish svg{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity .3s}
.guide[data-mood="happy"] .gm-happy,.guide[data-mood="brushing"] .gm-brushing,.guide[data-mood="cheer"] .gm-cheer,.guide[data-mood="wave"] .gm-wave{opacity:1}
@keyframes g-move{from{transform:translateY(0)}to{transform:translateY(40vh)}}
@supports (animation-timeline:scroll()){
  .g-fish{animation:g-move linear both;animation-timeline:scroll(root)}
}
@keyframes g-wig{0%,100%{rotate:-4deg}50%{rotate:5deg}}
.g-fish>span{position:absolute;inset:0;animation:g-wig 2.2s ease-in-out infinite}
@media (max-width:1199px){
  .guide{top:auto;bottom:14px;right:10px;height:46px;width:46px;border-radius:50%;background:var(--surface);box-shadow:0 4px 14px rgba(11,37,69,.18)}
  .g-track{display:none}
  .g-fish{animation:none!important;transform:none;inset:5px;top:5px;width:36px;height:36px}
  .g-ring{display:block!important}
}
.g-ring{display:none;position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.g-ring circle{fill:none;stroke-width:3}
.g-ring .bgc{stroke:var(--line)}
.g-ring .fg{stroke:var(--ocean);stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--p,0))}
@keyframes g-ring{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@supports (animation-timeline:scroll()){.g-ring .fg{animation:g-ring linear both;animation-timeline:scroll(root)}}

/* ---------- Okuma çubuğu (gizlilik) ---------- */
.readbar{position:fixed;top:0;left:0;right:0;height:4px;z-index:30;background:linear-gradient(90deg,var(--ocean),var(--lagoon),var(--sparkle));transform-origin:0 50%;transform:scaleX(var(--p,0))}
@keyframes readbar{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@supports (animation-timeline:scroll()){.readbar{animation:readbar linear both;animation-timeline:scroll(root)}}

/* ---------- Sayfalar arası geçiş ---------- */
@view-transition{navigation:auto}
header nav .logo{view-transition-name:logo}
::view-transition-group(*){animation-duration:.45s;animation-timing-function:var(--e-out)}
@media (prefers-reduced-motion:reduce){@view-transition{navigation:none}}

/* Hareket kapalıyken kalan geçişleri de kısalt */
[data-motion="off"] *,[data-motion="off"] *::before,[data-motion="off"] *::after{transition-duration:.01ms!important;scroll-behavior:auto!important}