/* Yeşil Yelken – açılış animasyonu */
#yy-intro{--cream:#FBF7F0;--ink:#12302A;--green:#4E8A3E;--leaf:#7DB25A;--orange:#E8673A;--sun:#F2A93B;--lilac:#CDBDF2;--wood:#8B5A33;
  position:fixed;inset:0;z-index:99999;pointer-events:auto;overflow:hidden;cursor:pointer}
html.yy-lock,html.yy-lock body{overflow:hidden!important}
#yy-intro *{box-sizing:border-box}

/* Çıkış katmanları (dalgalı perdeler) */
#yy-intro .yy-layer{position:absolute;left:0;right:0;top:0;height:100%;will-change:transform}
#yy-intro .yy-layer svg.yy-edge{position:absolute;left:0;top:calc(100% - 1px);width:100%;height:90px;display:block}
#yy-intro .l3{background:var(--ink);color:var(--ink);z-index:1}
#yy-intro .l2{background:var(--orange);color:var(--orange);z-index:2}
#yy-intro .l1{background:var(--cream);color:var(--cream);z-index:3}
#yy-intro .yy-edge path{fill:currentColor}

/* Sahne */
#yy-intro .yy-stage{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:4}
#yy-intro .yy-boat{width:min(300px,62vw);height:auto;overflow:visible}
#yy-intro .yy-boat *{transform-box:fill-box}

/* Dalgalar çizilir */
#yy-intro .wave{fill:none;stroke-linecap:round;stroke-dasharray:240;stroke-dashoffset:240;animation:yyDraw .9s cubic-bezier(.6,0,.2,1) forwards}
#yy-intro .w1{stroke:var(--green);stroke-width:5;animation-delay:.2s}
#yy-intro .w2{stroke:var(--leaf);stroke-width:4;animation-delay:.35s;opacity:.8}
#yy-intro .waves-move{animation:yyWaveSlide 2.4s ease-in-out 1.2s infinite alternate}

/* Gövde suyun içinden çıkar */
#yy-intro .hull{transform-origin:50% 100%;transform:translateY(40px) scaleY(.3);opacity:0;animation:yyRise .75s cubic-bezier(.34,1.56,.64,1) .5s forwards}
#yy-intro .mast{stroke:var(--wood);stroke-width:4;stroke-linecap:round;stroke-dasharray:110;stroke-dashoffset:110;animation:yyDraw .45s ease-out .9s forwards}
/* Yelkenler yaprak gibi açılır */
#yy-intro .sail{transform-origin:100% 100%;transform:scale(0) rotate(-25deg);animation:yyGrow .8s cubic-bezier(.34,1.7,.5,1) 1.1s forwards}
#yy-intro .sail2{transform-origin:0% 100%;transform:scale(0) rotate(25deg);animation-delay:1.25s}
#yy-intro .vein{fill:none;stroke:#BFE09A;stroke-width:2;stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:100;animation:yyDraw .6s ease-out 1.6s forwards;opacity:.9}
#yy-intro .flag{transform-origin:0% 50%;transform:scaleX(0);animation:yyFlag .5s cubic-bezier(.34,1.7,.5,1) 1.5s forwards, yyFlutter .6s ease-in-out 2s infinite alternate}

/* Güneş */
#yy-intro .sun{transform-origin:50% 50%;transform:scale(0);animation:yyPop .7s cubic-bezier(.34,1.8,.5,1) 1.3s forwards}
#yy-intro .rays{transform-origin:50% 50%;opacity:0;animation:yyFade .4s ease 1.6s forwards, yySpin 10s linear 1.6s infinite}
#yy-intro .rays line{stroke:var(--sun);stroke-width:3;stroke-linecap:round}

/* Kuşlar */
#yy-intro .bird{fill:none;stroke:var(--ink);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;opacity:0;transform:translate(-60px,20px);animation:yyBird 1.1s cubic-bezier(.2,.8,.2,1) forwards}
#yy-intro .b1{animation-delay:1.6s}#yy-intro .b2{animation-delay:1.75s}

/* Tekne sallanması */
#yy-intro .boat-bob{transform-origin:50% 90%;animation:yyBob 2.2s ease-in-out 1.3s infinite}

/* Yazı */
#yy-intro .yy-title{font-family:"Baloo 2",Nunito,sans-serif;font-weight:800;color:var(--ink);font-size:clamp(40px,8vw,76px);line-height:1;margin:6px 0 0;display:flex;letter-spacing:-.5px}
#yy-intro .yy-title span{display:inline-block;opacity:0;transform:translateY(40px) scale(.6) rotate(-8deg);animation:yyLetter .7s cubic-bezier(.34,1.7,.5,1) forwards}
#yy-intro .yy-title span.sp{width:.28em}
#yy-intro .yy-sub{display:flex;align-items:center;gap:12px;margin-top:6px;font:700 clamp(12px,1.6vw,15px) Nunito,sans-serif;letter-spacing:.55em;color:var(--green);opacity:0;animation:yyFade .6s ease 2.35s forwards}
#yy-intro .yy-sub i{display:block;height:2px;width:46px;background:var(--green);border-radius:2px;transform:scaleX(0);animation:yyLine .6s cubic-bezier(.6,0,.2,1) 2.45s forwards}
#yy-intro .yy-sub i:first-child{transform-origin:100% 50%}#yy-intro .yy-sub i:last-child{transform-origin:0 50%}
#yy-intro .yy-tag{margin-top:22px;font:600 clamp(15px,2vw,19px) Nunito,sans-serif;color:#4a5a55;opacity:0;transform:translateY(12px);animation:yyUp .7s ease 2.7s forwards;position:relative}
#yy-intro .yy-tag b{color:var(--orange);font-weight:800;position:relative;white-space:nowrap}
#yy-intro .yy-tag svg{position:absolute;left:-4px;right:-4px;bottom:-9px;width:calc(100% + 8px);height:12px}
#yy-intro .yy-tag path{fill:none;stroke:var(--orange);stroke-width:4;stroke-linecap:round;stroke-dasharray:140;stroke-dashoffset:140;animation:yyDraw .6s ease 3.1s forwards}

/* Uçuşan süsler */
#yy-intro .yy-deco{position:absolute;opacity:0;animation:yyPopIn .7s cubic-bezier(.34,1.8,.5,1) forwards, yyFloat 4s ease-in-out infinite alternate}
#yy-intro .yy-deco svg{display:block;width:100%;height:100%}

#yy-intro .yy-skip{position:absolute;bottom:22px;right:26px;font:700 12px Nunito,sans-serif;letter-spacing:.15em;color:#8a9692;opacity:0;animation:yyFade .5s ease 1.5s forwards;z-index:5}

/* ---------- ÇIKIŞ ---------- */
#yy-intro.yy-out{pointer-events:none}
#yy-intro.yy-out .boat-sail{animation:yySailAway 1s cubic-bezier(.55,0,.3,1) forwards}
#yy-intro.yy-out .yy-text,#yy-intro.yy-out .yy-skip{animation:yyOutUp .6s cubic-bezier(.6,0,.4,1) forwards}
#yy-intro.yy-out .yy-deco{animation:yyOutDeco .5s ease forwards}
#yy-intro.yy-out .yy-stage{animation:yyLift 1.05s cubic-bezier(.76,0,.24,1) .45s forwards}
#yy-intro.yy-out .l1{animation:yyLift 1.05s cubic-bezier(.76,0,.24,1) .45s forwards}
#yy-intro.yy-out .l2{animation:yyLift 1.05s cubic-bezier(.76,0,.24,1) .6s forwards}
#yy-intro.yy-out .l3{animation:yyLift 1.05s cubic-bezier(.76,0,.24,1) .75s forwards}

@keyframes yyDraw{to{stroke-dashoffset:0}}
@keyframes yyFade{to{opacity:1}}
@keyframes yyUp{to{opacity:1;transform:none}}
@keyframes yyRise{to{opacity:1;transform:none}}
@keyframes yyGrow{to{transform:none}}
@keyframes yyFlag{to{transform:none}}
@keyframes yyFlutter{from{transform:skewY(0)}to{transform:skewY(-10deg) scaleX(.85)}}
@keyframes yyPop{to{transform:none}}
@keyframes yySpin{to{transform:rotate(360deg)}}
@keyframes yyBird{to{opacity:1;transform:none}}
@keyframes yyBob{0%,100%{transform:rotate(0) translateY(0)}50%{transform:rotate(-2.5deg) translateY(-3px)}}
@keyframes yyWaveSlide{to{transform:translateX(-10px)}}
@keyframes yyLetter{to{opacity:1;transform:none}}
@keyframes yyLine{to{transform:none}}
@keyframes yyPopIn{from{opacity:0;scale:0}to{opacity:1;scale:1}}
@keyframes yyFloat{to{translate:0 -14px;rotate:12deg}}
@keyframes yySailAway{0%{transform:none}25%{transform:translateX(-14px) rotate(3deg)}100%{transform:translateX(120vw) rotate(-6deg)}}
@keyframes yyOutUp{to{opacity:0;transform:translateY(-30px)}}
@keyframes yyOutDeco{to{opacity:0;scale:.3}}
@keyframes yyLift{to{transform:translateY(calc(-100% - 100px))}}

@media (prefers-reduced-motion:reduce){
  #yy-intro *{animation-duration:.01s!important;animation-delay:0s!important;animation-iteration-count:1!important}
}