:root{--ink:#0F1712;--ink2:#17221B;--ink3:#22302A;--lime:#D4EC4F;--red:#FF5E3A;--paper:#F2F0E9;--mut:#97A39A;--ease:cubic-bezier(.2,.8,.2,1)}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Outfit',system-ui,sans-serif;background:var(--ink);color:var(--paper);overflow-x:hidden;-webkit-font-smoothing:antialiased}
body.loading{overflow:hidden}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
::selection{background:var(--lime);color:var(--ink)}
.wrap{width:min(1280px,92vw);margin:0 auto}
.kicker{display:inline-flex;align-items:center;gap:10px;font-size:13px;font-weight:600;letter-spacing:.28em;text-transform:uppercase;color:var(--lime)}
.kicker::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--red);animation:ping 2s infinite}
.light .kicker{color:#5b780a}
h2.title{font-size:clamp(40px,6vw,88px);font-weight:800;line-height:.98;letter-spacing:-.035em;margin:18px 0 0}
.mut{color:var(--mut)}
.btn{display:inline-flex;align-items:center;gap:12px;padding:18px 30px;border-radius:999px;font-weight:700;font-size:17px;border:0;cursor:pointer;transition:background .3s,color .3s,transform .3s var(--ease);will-change:transform}
.btn-lime{background:var(--lime);color:var(--ink)}
.btn-lime:hover{background:var(--paper)}
.btn-ghost{background:transparent;border:1.5px solid #3c4b42;color:var(--paper)}
.btn-ghost:hover{border-color:var(--lime);color:var(--lime)}
.btn .arr{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--ink);color:var(--lime);font-size:14px;transition:transform .3s var(--ease)}
.btn:hover .arr{transform:rotate(-45deg)}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(255,94,58,.7)}70%{box-shadow:0 0 0 12px rgba(255,94,58,0)}100%{box-shadow:0 0 0 0 rgba(255,94,58,0)}}

/* LOADER */
#loader{position:fixed;inset:0;z-index:100;background:var(--ink);display:grid;place-items:center;transition:transform 1s var(--ease)}
#loader.done{transform:translateY(-100%)}
#loader .box{position:relative;width:140px;height:140px;border-radius:38px;background:var(--ink2);display:grid;place-items:center;transform:scale(.6);opacity:0;animation:pop .6s var(--ease) .1s forwards}
#loader path{stroke-dasharray:200;stroke-dashoffset:200;animation:draw 1s var(--ease) .5s forwards}
#loader .dot{position:absolute;right:-10px;top:-10px;width:40px;height:40px;border-radius:50%;background:var(--red);border:8px solid var(--ink);transform:scale(0);animation:pop2 .5s var(--ease) 1.4s forwards}
#loader .pct{position:absolute;bottom:40px;left:50%;transform:translateX(-50%);font-size:13px;letter-spacing:.3em;color:var(--mut)}
@keyframes pop{to{transform:scale(1);opacity:1}}
@keyframes pop2{0%{transform:scale(0)}70%{transform:scale(1.25)}100%{transform:scale(1)}}
@keyframes draw{to{stroke-dashoffset:0}}

/* CURSOR */

/* NAV */
nav{position:fixed;top:0;left:0;right:0;z-index:50;padding:22px 0;transition:padding .4s,background .4s,backdrop-filter .4s}
nav.scrolled{padding:14px 0;background:rgba(15,23,18,.75);backdrop-filter:blur(14px);border-bottom:1px solid #22302A}
nav .wrap{display:flex;align-items:center;justify-content:space-between}
.logo{display:flex;align-items:center;gap:12px;cursor:pointer}
.logo .mk{position:relative;width:42px;height:42px;border-radius:12px;background:var(--lime);display:grid;place-items:center}
.logo .mk svg{width:24px}
.logo .mk i{position:absolute;right:-4px;top:-4px;width:14px;height:14px;border-radius:50%;background:var(--red);border:3px solid var(--ink);animation:ping 2s infinite}
.logo b{font-size:24px;font-weight:800;letter-spacing:-.02em;line-height:.9}
.logo b small{display:block;font-size:9px;letter-spacing:.42em;font-weight:500;color:var(--mut);margin-top:3px}
.links{display:flex;gap:6px;align-items:center}
.links a{padding:10px 16px;border-radius:999px;font-size:15px;font-weight:500;color:#cdd3c9;transition:color .3s,background .3s;cursor:pointer}
.links a:hover{color:var(--paper);background:var(--ink3)}
.links a.on{color:var(--lime)}
.links .btn{padding:12px 22px;font-size:15px;margin-left:10px;color:var(--ink);font-weight:700}
.links .btn:hover{color:var(--ink);background:var(--paper)}
.burger{display:none;width:46px;height:46px;border-radius:50%;background:var(--ink3);border:0;cursor:pointer;position:relative}
.burger span{position:absolute;left:14px;right:14px;height:2px;background:var(--paper);transition:.3s}
.burger span:nth-child(1){top:18px}.burger span:nth-child(2){top:26px}
.burger.open span:nth-child(1){top:22px;transform:rotate(45deg)}.burger.open span:nth-child(2){top:22px;transform:rotate(-45deg)}
.mmenu{position:fixed;inset:0;background:var(--lime);color:var(--ink);z-index:45;display:flex;flex-direction:column;justify-content:center;padding:0 8vw;clip-path:circle(0 at calc(100% - 46px) 46px);transition:clip-path .7s var(--ease)}
.mmenu.open{clip-path:circle(150% at calc(100% - 46px) 46px)}
.mmenu a{font-size:48px;font-weight:800;letter-spacing:-.03em;padding:6px 0;cursor:pointer}
@media(max-width:900px){.links{display:none}.burger{display:block}}

/* HERO */
.hero{min-height:100vh;position:relative;display:flex;align-items:center;padding:140px 0 80px;overflow:hidden}
.hero .grid-bg{position:absolute;inset:0;background-image:linear-gradient(#1b2620 1px,transparent 1px),linear-gradient(90deg,#1b2620 1px,transparent 1px);background-size:80px 80px;mask-image:radial-gradient(ellipse at 50% 40%,#000 20%,transparent 70%);opacity:.6}
.hero .wrap{position:relative;z-index:2}
.hero h1{font-size:clamp(56px,10.5vw,168px);font-weight:900;line-height:.88;letter-spacing:-.05em;margin:26px 0 34px}
.hero h1 .line{display:block;overflow:hidden;padding-bottom:.06em}
.hero h1 .line span{display:inline-block;transform:translateY(110%)}
.go .hero h1 .line span{animation:rise 1s var(--ease) forwards}
.go .hero h1 .line:nth-child(2) span{animation-delay:.12s}.go .hero h1 .line:nth-child(3) span{animation-delay:.24s}
@keyframes rise{to{transform:none}}
.hero h1 em{font-style:normal;color:var(--lime);position:relative}
.hero h1 .rdot{display:inline-block;width:.2em;height:.2em;border-radius:50%;background:var(--red);vertical-align:.62em;margin-left:.04em;animation:ping 2s infinite}
.hero .sub{display:flex;gap:40px;align-items:flex-end;justify-content:space-between;flex-wrap:wrap}
.hero p.lead{font-size:clamp(18px,1.6vw,22px);line-height:1.5;color:#bfc7bc;max-width:520px}
.hero .ctas{display:flex;gap:14px;flex-wrap:wrap}
.fade{opacity:0;transform:translateY(24px)}
.go .fade{animation:up .9s var(--ease) forwards}
.go .d1{animation-delay:.45s}.go .d2{animation-delay:.6s}.go .d3{animation-delay:.9s}
@keyframes up{to{opacity:1;transform:none}}
.notif{position:absolute;z-index:3;display:flex;align-items:center;gap:12px;background:rgba(21,27,35,.85);backdrop-filter:blur(10px);border:1px solid #2a382f;border-radius:18px;padding:12px 18px 12px 12px;font-size:14px;box-shadow:0 20px 50px rgba(0,0,0,.4)}
.notif .ic{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;font-size:18px;font-weight:800}
.notif b{display:block;font-size:14px}.notif small{color:var(--mut);font-size:12px}
.n1{right:6%;top:24%;animation:float 6s ease-in-out infinite}
.n2{right:16%;top:46%;animation:float 7s ease-in-out -2s infinite}
.n3{right:4%;top:66%;animation:float 6.5s ease-in-out -4s infinite}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
.go .notif{opacity:0;animation:nin .8s var(--ease) forwards,float 6s ease-in-out 1.8s infinite}
.go .n1{animation-delay:1.1s,1.9s}.go .n2{animation-delay:1.3s,2.1s}.go .n3{animation-delay:1.5s,2.3s}
@keyframes nin{from{opacity:0;transform:translateX(40px) scale(.9)}to{opacity:1;transform:none}}
@media(max-width:1100px){.notif{display:none}}
.scroll-hint{position:absolute;left:50%;bottom:28px;transform:translateX(-50%);font-size:12px;letter-spacing:.3em;color:var(--mut);display:flex;flex-direction:column;align-items:center;gap:10px;z-index:2}
.scroll-hint i{width:1px;height:40px;background:linear-gradient(var(--lime),transparent);animation:sh 2s infinite}
@keyframes sh{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* MARQUEE */
.marquee{background:var(--lime);color:var(--ink);padding:26px 0;overflow:hidden;transform:rotate(-2deg);margin:40px -20px;position:relative;z-index:3}
.marquee .track{display:flex;width:max-content;animation:mq 28s linear infinite}
.marquee span{font-size:clamp(28px,4vw,52px);font-weight:800;letter-spacing:-.02em;white-space:nowrap;padding:0 28px;display:flex;align-items:center;gap:56px}
.marquee span::after{content:"";width:16px;height:16px;border-radius:50%;background:var(--red)}
@keyframes mq{to{transform:translateX(-50%)}}

/* SECTIONS */
section.sec{padding:140px 0}
.light{background:var(--paper);color:var(--ink)}
.light .mut{color:#556158}
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;flex-wrap:wrap;margin-bottom:70px}
.sec-head p{max-width:420px;font-size:19px;line-height:1.55}
.reveal{opacity:0;transform:translateY(50px);transition:opacity 1s var(--ease),transform 1s var(--ease)}
.reveal.in{opacity:1;transform:none}
.split .w{display:inline-block;overflow:hidden;vertical-align:top}
.split .w>span{display:inline-block;transform:translateY(105%);transition:transform .9s var(--ease)}
.split.in .w>span{transform:none}

/* SERVICES */
.svc{border-top:1.5px solid #cdd3c4}
.svc-item{display:grid;grid-template-columns:90px 1fr 1.1fr 60px;gap:30px;align-items:center;padding:38px 10px;border-bottom:1.5px solid #cdd3c4;position:relative;cursor:pointer;overflow:hidden;transition:color .4s,padding .4s var(--ease)}
.svc-item::before{content:"";position:absolute;inset:0;background:var(--ink);transform:scaleY(0);transform-origin:bottom;transition:transform .5s var(--ease);z-index:0}
.svc-item>*{position:relative;z-index:1}
.svc-item:hover{color:var(--paper);padding-left:30px}
.svc-item:hover::before{transform:scaleY(1)}
.svc-item .no{font-size:15px;font-weight:600;color:#77837a}
.svc-item h3{font-size:clamp(28px,3.4vw,48px);font-weight:800;letter-spacing:-.03em}
.svc-item p{font-size:17px;line-height:1.5;color:#556158;transition:color .4s}
.svc-item:hover p{color:#aeb8ad}
.svc-item .go-ic{width:56px;height:56px;border-radius:50%;border:1.5px solid currentColor;display:grid;place-items:center;font-size:20px;transition:.4s var(--ease)}
.svc-item:hover .go-ic{background:var(--lime);border-color:var(--lime);color:var(--ink);transform:rotate(-45deg)}
.svc-item .tags{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.svc-item .tags em{font-style:normal;font-size:13px;padding:4px 12px;border-radius:999px;border:1px solid currentColor;opacity:.6}
@media(max-width:800px){.svc-item{grid-template-columns:1fr 50px}.svc-item .no,.svc-item p{display:none}}

/* WORKS horizontal */
.works{position:relative;height:400vh}
.works .pin{position:sticky;top:0;height:100vh;height:100svh;padding-top:72px;overflow:hidden;display:flex;flex-direction:column;justify-content:center}
.works .head{padding-bottom:50px;display:flex;justify-content:space-between;align-items:flex-end;gap:30px;flex-wrap:wrap}
.works .count{font-size:15px;color:var(--mut);letter-spacing:.2em}
.works .count b{color:var(--lime);font-size:40px;letter-spacing:0}
.htrack{display:flex;gap:34px;padding-left:4vw;will-change:transform}
.work{flex:0 0 min(560px,78vw);cursor:pointer}
.work .img{height:min(400px,48vh);border-radius:28px;position:relative;overflow:hidden}
.work .img .art{position:absolute;inset:0;transition:transform 1s var(--ease)}
.work:hover .art{transform:scale(1.07)}
.work .img .lbl{position:absolute;left:20px;top:20px;padding:7px 14px;border-radius:999px;background:rgba(15,23,18,.7);backdrop-filter:blur(8px);font-size:13px;font-weight:600;color:var(--paper)}
.work .img .vw{position:absolute;right:20px;bottom:20px;width:70px;height:70px;border-radius:50%;background:var(--lime);color:var(--ink);display:grid;place-items:center;font-weight:800;font-size:13px;transform:scale(0);transition:transform .5s var(--ease)}
.work:hover .vw{transform:scale(1)}
.work h4{font-size:30px;font-weight:700;letter-spacing:-.02em;margin-top:22px}
.work .meta{display:flex;justify-content:space-between;color:var(--mut);margin-top:6px;font-size:16px}
.progress{height:2px;background:#25322b;margin-top:50px;border-radius:2px;overflow:hidden}
.progress i{display:block;height:100%;width:0;background:var(--lime)}
@media(max-width:800px){.works{height:320vh}.works .head{padding-bottom:22px}.htrack{gap:16px;padding-left:5vw}.work{flex-basis:80vw}.work .img{height:min(330px,42vh)}.work h4{font-size:24px;margin-top:16px}.progress{margin-top:28px}}

/* PROCESS */

/* STATS */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:100px}
.stat{background:var(--ink2);border:1px solid #223027;border-radius:28px;padding:36px 30px;transition:transform .5s var(--ease),border-color .4s}
.stat:hover{transform:translateY(-8px);border-color:var(--lime)}
.stat b{font-size:clamp(48px,5vw,76px);font-weight:900;letter-spacing:-.04em;line-height:1;display:block}
.stat b sup{font-size:.45em;color:var(--lime);vertical-align:.9em}
.stat span{color:var(--mut);font-size:16px;margin-top:10px;display:block}
.ph{display:inline-block;font-size:11px;letter-spacing:.15em;text-transform:uppercase;padding:3px 9px;border-radius:999px;border:1px dashed currentColor;opacity:.55;margin-top:14px}
@media(max-width:900px){.stats{grid-template-columns:1fr 1fr}}

/* TESTIMONIALS */
.tst{display:grid;grid-template-columns:1.3fr 1fr;gap:60px;align-items:center}
.quote{font-size:clamp(28px,3.4vw,46px);font-weight:600;line-height:1.2;letter-spacing:-.02em;min-height:4.8em;transition:opacity .5s,transform .5s var(--ease)}
.quote.out{opacity:0;transform:translateY(20px)}
.who{display:flex;align-items:center;gap:16px;margin-top:30px}
.who .av{width:56px;height:56px;border-radius:50%;background:var(--ink);color:var(--lime);display:grid;place-items:center;font-weight:800}
.tnav{display:flex;gap:10px;margin-top:36px}
.tnav button{width:58px;height:58px;border-radius:50%;border:1.5px solid var(--ink);background:transparent;cursor:pointer;font-size:20px;transition:.3s}
.tnav button:hover{background:var(--ink);color:var(--lime)}
.tcard{background:var(--ink);color:var(--paper);border-radius:32px;padding:44px;position:relative;overflow:hidden}
.tcard .big{font-size:110px;font-weight:900;color:var(--lime);line-height:.8;letter-spacing:-.05em}
.tcard p{color:#aeb8ad;font-size:18px;line-height:1.55;margin-top:20px}
@media(max-width:900px){.tst{grid-template-columns:1fr}}

/* CTA */
.cta{background:var(--lime);color:var(--ink);padding:150px 0;text-align:center;position:relative;overflow:hidden}
.cta h2{font-size:clamp(56px,11vw,180px);font-weight:900;letter-spacing:-.05em;line-height:.86}
.cta h2 .rdot{display:inline-block;width:.18em;height:.18em;border-radius:50%;background:var(--red);vertical-align:.6em;animation:ping 2s infinite}
.cta p{font-size:20px;margin:30px auto 44px;max-width:560px;color:#33410b}
.cta .btn{background:var(--ink);color:var(--lime);padding:24px 42px;font-size:19px}
.cta .btn .arr{background:var(--lime);color:var(--ink)}
.cta .btn:hover{background:var(--paper);color:var(--ink)}

/* BOOKING */
.book{display:grid;grid-template-columns:.9fr 1.1fr;gap:70px}
.book .info p{font-size:19px;line-height:1.6;margin:26px 0 40px}
.contact-row{display:flex;gap:16px;align-items:center;padding:20px 0;border-top:1px solid #24312a;font-size:18px}
.contact-row .ic{width:46px;height:46px;border-radius:14px;background:var(--ink3);display:grid;place-items:center;color:var(--lime);font-weight:700}
.contact-row small{display:block;color:var(--mut);font-size:13px}
form{background:var(--ink2);border:1px solid #223027;border-radius:32px;padding:44px}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.field{display:flex;flex-direction:column;gap:8px;margin-bottom:20px}
.field label{font-size:14px;font-weight:600;color:#cfd5cc}
.field input,.field select,.field textarea{background:var(--ink);border:1.5px solid #2a382f;border-radius:14px;padding:15px 16px;font-size:16px;outline:none;transition:border-color .3s,box-shadow .3s}
.field textarea{resize:vertical;min-height:100px}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--lime);box-shadow:0 0 0 4px rgba(212,236,79,.12)}
.field.err input,.field.err select{border-color:var(--red)}
.field .em{font-size:13px;color:var(--red);display:none}.field.err .em{display:block}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips button{padding:10px 16px;border-radius:999px;border:1.5px solid #2c3a31;background:transparent;cursor:pointer;font-size:15px;transition:.25s}
.chips button:hover{border-color:var(--lime)}
.chips button.on{background:var(--lime);border-color:var(--lime);color:var(--ink);font-weight:700}
.kvkk{display:flex;gap:12px;align-items:flex-start;font-size:14px;color:#aeb8ad;line-height:1.5;margin:6px 0 26px;cursor:pointer}
.kvkk input{width:20px;height:20px;accent-color:var(--lime);margin-top:1px;flex:none}
.kvkk a{color:var(--lime);text-decoration:underline}
.kvkk.err{color:var(--red)}
.hp{position:absolute;left:-9999px}
form .btn{width:100%;justify-content:center}
.ok{display:none;text-align:center;padding:40px 10px}
.ok .tick{width:90px;height:90px;border-radius:50%;background:var(--lime);color:var(--ink);display:grid;place-items:center;margin:0 auto 24px;font-size:40px;font-weight:900;animation:pop2 .6s var(--ease)}
.ok h3{font-size:34px;font-weight:800;letter-spacing:-.02em}
.ok p{color:var(--mut);margin-top:12px;line-height:1.6}
.sec-note{display:flex;gap:10px;align-items:center;font-size:13px;color:var(--mut);margin-top:16px;justify-content:center}
@media(max-width:900px){.book{grid-template-columns:1fr}.frow{grid-template-columns:1fr}form{padding:28px}}

/* FOOTER */
footer{padding:100px 0 40px;border-top:1px solid #1d2922}
.fgrid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:40px}
footer h5{font-size:13px;letter-spacing:.25em;text-transform:uppercase;color:var(--mut);margin-bottom:18px;font-weight:600}
footer ul{list-style:none}
footer li{margin-bottom:10px}
footer li a{color:#cfd5cc;transition:color .3s;cursor:pointer}
footer li a:hover{color:var(--lime)}
.fbig{font-size:clamp(70px,17vw,260px);font-weight:900;letter-spacing:-.06em;line-height:.8;margin-top:90px;color:var(--ink2);-webkit-text-stroke:1px #283629;user-select:none;white-space:nowrap}
.fbot{display:flex;justify-content:space-between;flex-wrap:wrap;gap:16px;margin-top:40px;font-size:14px;color:var(--mut)}
@media(max-width:900px){.fgrid{grid-template-columns:1fr 1fr}}

/* demo banner */
.demo{position:fixed;left:16px;bottom:16px;z-index:60;background:var(--ink2);border:1px solid #2c3a31;border-radius:999px;padding:8px 14px 8px 10px;font-size:12px;color:#cfd5cc;display:flex;align-items:center;gap:8px}
.demo i{width:8px;height:8px;border-radius:50%;background:var(--red);animation:ping 2s infinite}


/* ROUTER / PAGES */
main{position:relative;z-index:1}
.view{display:none}
.view.active{display:block}
footer,nav{position:relative;z-index:2}
nav{position:fixed}
#curtain{position:fixed;inset:0;z-index:80;background:var(--lime);transform:translateY(100%);display:grid;place-items:center;pointer-events:none}
#curtain.cover{transform:translateY(0);transition:transform .55s cubic-bezier(.7,0,.3,1)}
#curtain.leave{transform:translateY(-100%);transition:transform .6s cubic-bezier(.7,0,.3,1)}
#curtain .cn{font-size:clamp(40px,7vw,110px);font-weight:900;letter-spacing:-.04em;color:var(--ink);display:flex;align-items:center;gap:.15em}
#curtain .cn i{width:.22em;height:.22em;border-radius:50%;background:var(--red)}

.phead{position:relative;padding:190px 0 90px;overflow:hidden}
.phead .grid-bg{position:absolute;inset:0;background-image:linear-gradient(#1b2620 1px,transparent 1px),linear-gradient(90deg,#1b2620 1px,transparent 1px);background-size:80px 80px;mask-image:radial-gradient(ellipse at 30% 30%,#000 10%,transparent 65%);opacity:.6}
.phead .wrap{position:relative}
.crumb{font-size:14px;color:var(--mut);margin-bottom:26px;display:flex;gap:10px;align-items:center}
.crumb a{cursor:pointer;transition:color .3s}.crumb a:hover{color:var(--lime)}
.phead h1{font-size:clamp(60px,11vw,180px);font-weight:900;letter-spacing:-.05em;line-height:.86}
.phead h1 .rdot{display:inline-block;width:.16em;height:.16em;border-radius:50%;background:var(--red);vertical-align:.6em;margin-left:.04em;animation:ping 2s infinite}
.phead .row{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;flex-wrap:wrap;margin-top:40px}
.phead p.lead{font-size:clamp(18px,1.6vw,22px);line-height:1.55;color:#bfc7bc;max-width:560px}
.phead .idx{font-size:15px;letter-spacing:.25em;color:var(--mut)}
.phead .idx b{font-size:56px;color:var(--lime);letter-spacing:-.03em}

/* home explore */
.explore{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.ex{position:relative;border-radius:32px;padding:44px;min-height:330px;display:flex;flex-direction:column;justify-content:space-between;background:var(--ink2);border:1px solid #223027;overflow:hidden;cursor:pointer;isolation:isolate}
.ex::before{content:"";position:absolute;inset:0;background:var(--lime);clip-path:circle(0 at 90% 12%);transition:clip-path .7s var(--ease);z-index:-1}
.ex:hover::before{clip-path:circle(150% at 90% 12%)}
.ex:hover{color:var(--ink)}
.ex .top{display:flex;justify-content:space-between;align-items:flex-start}
.ex .no{font-size:15px;font-weight:600;color:var(--mut);transition:color .4s}
.ex:hover .no{color:#3b4a0d}
.ex .ar{width:62px;height:62px;border-radius:50%;border:1.5px solid #3a4a40;display:grid;place-items:center;font-size:22px;transition:.5s var(--ease)}
.ex:hover .ar{background:var(--ink);color:var(--lime);border-color:var(--ink);transform:rotate(-45deg)}
.ex h3{font-size:clamp(40px,5vw,72px);font-weight:900;letter-spacing:-.04em;line-height:.95}
.ex p{color:var(--mut);font-size:18px;line-height:1.5;margin-top:14px;max-width:420px;transition:color .4s}
.ex:hover p{color:#2c3708}
.ex .chipz{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px}
.ex .chipz em{font-style:normal;font-size:13px;padding:5px 12px;border-radius:999px;border:1px solid currentColor;opacity:.55}
@media(max-width:800px){.explore{grid-template-columns:1fr}.ex{min-height:260px;padding:30px}}

/* features / values */
.feats{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.feat{background:var(--ink2);border:1px solid #223027;border-radius:28px;padding:36px;transition:transform .5s var(--ease),border-color .4s}
.feat:hover{transform:translateY(-8px);border-color:var(--lime)}
.feat .ic{width:56px;height:56px;border-radius:16px;background:var(--lime);color:var(--ink);display:grid;place-items:center;font-size:24px;font-weight:900;margin-bottom:26px}
.feat h3{font-size:26px;font-weight:800;letter-spacing:-.02em;margin-bottom:10px}
.feat p{color:var(--mut);line-height:1.55;font-size:17px}
.light .feat{background:#fff;border-color:#dde2d4}.light .feat p{color:#556158}
@media(max-width:900px){.feats{grid-template-columns:1fr}}

/* faq */
.faq{border-top:1px solid #24312a}
.qa{border-bottom:1px solid #24312a}
.qa button{width:100%;background:none;border:0;text-align:left;padding:28px 0;font-size:clamp(20px,2vw,26px);font-weight:700;display:flex;justify-content:space-between;gap:20px;cursor:pointer;letter-spacing:-.01em}
.qa button span{width:40px;height:40px;flex:none;border-radius:50%;border:1.5px solid #3a4a40;display:grid;place-items:center;transition:.4s var(--ease)}
.qa.open button span{transform:rotate(45deg);background:var(--lime);color:var(--ink);border-color:var(--lime)}
.qa .a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s var(--ease)}
.qa.open .a{grid-template-rows:1fr}
.qa .a>div{overflow:hidden;color:var(--mut);font-size:18px;line-height:1.6;max-width:820px}
.qa.open .a>div{padding-bottom:28px}

/* mini cta */
.mcta{background:var(--lime);color:var(--ink);border-radius:36px;padding:60px;display:flex;justify-content:space-between;align-items:center;gap:30px;flex-wrap:wrap;margin:0 auto}
.mcta h3{font-size:clamp(34px,4.4vw,64px);font-weight:900;letter-spacing:-.04em;line-height:.95}
.mcta .btn{background:var(--ink);color:var(--lime)}
.mcta .btn .arr{background:var(--lime);color:var(--ink)}
.mcta .btn:hover{background:var(--paper);color:var(--ink)}
.mcta-wrap{padding:0 0 140px}
.light+.mcta-wrap,.mcta-wrap.pt{padding-top:140px}

/* ===== SOSYAL MEDYA SHOWCASE ===== */
.smm{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.checks{list-style:none;margin:34px 0 40px}
.checks li{display:flex;gap:14px;align-items:center;font-size:19px;padding:14px 0;border-bottom:1px solid #223027}
.checks li b{width:30px;height:30px;flex:none;border-radius:50%;border:1.5px solid #3a4a40;display:grid;place-items:center;font-size:14px;color:transparent;transition:.5s var(--ease)}
.checks.in li b{background:var(--lime);border-color:var(--lime);color:var(--ink)}
.checks.in li:nth-child(2) b{transition-delay:.25s}.checks.in li:nth-child(3) b{transition-delay:.5s}.checks.in li:nth-child(4) b{transition-delay:.75s}
.pstage{position:relative;height:640px;display:grid;place-items:center}
.pstage::before{content:"";position:absolute;width:440px;height:440px;border-radius:50%;border:1px dashed #2c3a31;animation:spin 40s linear infinite}
.pstage::after{content:"";position:absolute;width:580px;height:580px;border-radius:50%;border:1px solid #1b2620}
@keyframes spin{to{transform:rotate(360deg)}}
.phone{position:relative;z-index:2;width:300px;height:610px;border-radius:46px;background:#050806;padding:12px;box-shadow:0 0 0 2px #2c3a31,0 40px 80px rgba(0,0,0,.55);transform:rotate(-4deg);animation:float 7s ease-in-out infinite}
.phone .scr{width:100%;height:100%;border-radius:36px;background:#0b110d;overflow:hidden;position:relative}
.phone .isl{position:absolute;top:10px;left:50%;transform:translateX(-50%);width:90px;height:24px;border-radius:20px;background:#000;z-index:3}
.pf-top{padding:46px 16px 12px;display:flex;align-items:center;gap:14px}
.pf-av{width:62px;height:62px;border-radius:50%;padding:3px;background:conic-gradient(var(--lime),var(--red),var(--lime));flex:none}
.pf-av div{width:100%;height:100%;border-radius:50%;background:var(--paper);border:3px solid #0b110d;display:grid;place-items:center;color:var(--ink);font-weight:900;font-size:22px}
.pf-st{display:flex;flex:1;justify-content:space-around;text-align:center}
.pf-st b{display:block;font-size:16px}.pf-st small{font-size:11px;color:var(--mut)}
.pf-name{padding:0 16px;font-size:13px}.pf-name small{display:block;color:var(--mut);font-size:11px;margin-top:2px}
.pf-btn{margin:12px 16px;display:flex;gap:6px}
.pf-btn span{flex:1;text-align:center;font-size:12px;font-weight:600;padding:7px;border-radius:8px;background:#1b2620}
.pf-btn span:first-child{background:var(--lime);color:var(--ink)}
.feed{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;margin-top:6px}
.post{aspect-ratio:1;position:relative;overflow:hidden}
.post.reel::after{content:"▶";position:absolute;right:6px;top:4px;font-size:10px;color:#fff;opacity:.9}
.post.new{animation:postin .7s var(--ease)}
@keyframes postin{from{transform:scale(.3);opacity:0;filter:brightness(2)}to{transform:none;opacity:1;filter:none}}
.post .pi{position:absolute;inset:0;display:grid;place-items:center}
.post .pi i{display:block}
.sbub{position:absolute;z-index:3;background:rgba(21,27,35,.92);backdrop-filter:blur(10px);border:1px solid #2c3a31;border-radius:16px;padding:10px 14px 10px 10px;display:flex;gap:10px;align-items:center;font-size:13px;box-shadow:0 20px 40px rgba(0,0,0,.4);white-space:nowrap}
.sbub .ic{width:32px;height:32px;border-radius:10px;display:grid;place-items:center;font-weight:900;font-size:15px;flex:none}
.sbub b{display:block;font-size:13px}.sbub small{color:var(--mut);font-size:11px}
.sbub.b1{left:0;top:90px;animation:float 6s ease-in-out infinite}
.sbub.b2{right:-10px;top:230px;animation:float 7s ease-in-out -2s infinite}
.sbub.b3{left:10px;bottom:110px;animation:float 6.5s ease-in-out -4s infinite}
.sbub.flash{animation:bpop .6s var(--ease)}
@keyframes bpop{0%{transform:scale(1)}40%{transform:scale(1.12)}100%{transform:scale(1)}}
.heart{position:absolute;z-index:4;pointer-events:none;color:var(--red);font-size:22px;animation:hrt 1.6s ease-out forwards}
@keyframes hrt{0%{opacity:0;transform:translate(0,0) scale(.4)}15%{opacity:1;transform:translate(0,-10px) scale(1.1)}100%{opacity:0;transform:translate(var(--dx),-170px) scale(.8) rotate(var(--r))}}

.smm2{display:grid;grid-template-columns:1.6fr 1fr;gap:22px;margin-top:70px}
.panel{background:var(--ink2);border:1px solid #223027;border-radius:28px;padding:30px}
.panel .ph-t{display:flex;justify-content:space-between;align-items:center;margin-bottom:22px}
.panel h4{font-size:22px;font-weight:800;letter-spacing:-.01em}
.panel .ph-t small{color:var(--mut);font-size:13px}
.cal{display:grid;grid-template-columns:repeat(7,1fr);gap:8px}
.cal .day{background:var(--ink);border:1px solid #1d2922;border-radius:14px;min-height:240px;padding:10px 8px;display:flex;flex-direction:column;gap:6px;position:relative}
.cal .day.today{border-color:var(--lime)}
.cal .day.today::after{content:"BUGÜN";position:absolute;top:-9px;right:8px;font-size:9px;font-weight:800;letter-spacing:.12em;background:var(--lime);color:var(--ink);padding:2px 6px;border-radius:6px}
.cal .dn{font-size:12px;color:var(--mut);font-weight:600;margin-bottom:4px}
.chipc{font-size:11px;font-weight:700;padding:6px 7px;border-radius:8px;animation:chip .5s var(--ease) both;display:flex;align-items:center;gap:5px}
.chipc::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}
.chipc.r{background:rgba(212,236,79,.14);color:var(--lime)}
.chipc.g{background:rgba(238,240,234,.1);color:var(--paper)}
.chipc.s{background:rgba(255,94,58,.15);color:#ff8d6e}
@keyframes chip{from{opacity:0;transform:translateY(10px) scale(.8)}to{opacity:1;transform:none}}
.legend{display:flex;gap:16px;margin-top:16px;font-size:12px;color:var(--mut)}
.legend span{display:flex;gap:6px;align-items:center}.legend i{width:8px;height:8px;border-radius:50%}
.chart svg{width:100%;height:auto;display:block;overflow:visible}
.chart .ln{fill:none;stroke:var(--lime);stroke-width:3;stroke-linecap:round;stroke-dasharray:600;stroke-dashoffset:600}
.chart .ar{fill:url(#cg);opacity:0;transition:opacity 1s .9s}
.chart .gd{stroke:#223027;stroke-width:1}
.chart .pt{fill:var(--red);opacity:0;transition:opacity .4s 1.8s}
.chart.in .ln{animation:draw 2s var(--ease) .2s forwards}
.chart.in .ar,.chart.in .pt{opacity:1}
.chart .big{font-size:48px;font-weight:900;letter-spacing:-.03em;margin-top:6px}
.chart .big sup{font-size:.4em;color:var(--lime);vertical-align:1.1em}
@media(max-width:1000px){.smm,.smm2{grid-template-columns:1fr}.pstage{height:600px}.sbub{display:none}}
@media(max-width:600px){.cal{grid-template-columns:repeat(4,1fr)}.cal .day:nth-child(n+5){display:none}}

/* ===== ÜRÜN ÇEKİMİ SHOWCASE ===== */
.shoot{display:grid;grid-template-columns:1.45fr 1fr;gap:22px;align-items:stretch}
.vf{position:relative;aspect-ratio:16/11;border-radius:28px;overflow:hidden;background:#050806;color:#fff;--bg:#D4EC4F}
.vf .stage{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 35%,rgba(255,255,255,.35),transparent 60%),var(--bg);transition:background-color .2s}
.vf .lamp{position:absolute;top:-20%;left:50%;width:70%;height:90%;transform:translateX(-50%);background:radial-gradient(ellipse at top,rgba(255,255,255,.45),transparent 65%);pointer-events:none}
.table{position:absolute;left:50%;bottom:12%;width:58%;height:16%;transform:translateX(-50%);border-radius:50%;background:radial-gradient(ellipse,rgba(0,0,0,.28),rgba(0,0,0,.08) 60%,transparent 72%)}
.prod{position:absolute;left:50%;bottom:19%;width:clamp(78px,11vw,128px);transform:translateX(-50%);--pc:#FF5E3A;animation:prodf 5s ease-in-out infinite}
@keyframes prodf{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(-6px)}}
.prod .cap{width:48%;aspect-ratio:1.15;margin:0 auto;border-radius:12% 12% 6% 6%;background:linear-gradient(90deg,#11151a,#47525f 38%,#1b2028 60%,#0d1014)}
.prod .neck{width:26%;height:8px;margin:0 auto;background:linear-gradient(90deg,#9aa38f,#e6ebdd,#9aa38f)}
.prod .body{aspect-ratio:.78;border-radius:22%;background:var(--pc);position:relative;overflow:hidden;box-shadow:inset 0 0 0 2px rgba(255,255,255,.28),inset -14px 0 24px rgba(0,0,0,.25),inset 10px 0 20px rgba(255,255,255,.18);transition:background .3s}
.prod .body::before{content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-14deg);animation:sheen 3.8s ease-in-out infinite}
@keyframes sheen{0%,30%{left:-60%}70%,100%{left:130%}}
.prod .lab{position:absolute;left:50%;top:52%;transform:translate(-50%,-50%);width:46%;aspect-ratio:1;border-radius:22%;background:#0F1712;display:grid;place-items:center}
.prod .lab svg{width:58%}
.prod .refl{position:absolute;left:14%;top:10%;width:9%;height:60%;border-radius:10px;background:rgba(255,255,255,.35)}
.vf .ov{position:absolute;inset:0;pointer-events:none}
.vf .thirds{position:absolute;inset:0;background:linear-gradient(90deg,transparent calc(33.33% - .5px),rgba(255,255,255,.18) 33.33%,transparent calc(33.33% + .5px),transparent calc(66.66% - .5px),rgba(255,255,255,.18) 66.66%,transparent calc(66.66% + .5px)),linear-gradient(transparent calc(33.33% - .5px),rgba(255,255,255,.18) 33.33%,transparent calc(33.33% + .5px),transparent calc(66.66% - .5px),rgba(255,255,255,.18) 66.66%,transparent calc(66.66% + .5px))}
.vf .br{position:absolute;width:34px;height:34px;border:2.5px solid #fff}
.vf .br.a{left:22px;top:22px;border-right:0;border-bottom:0}.vf .br.b{right:22px;top:22px;border-left:0;border-bottom:0}
.vf .br.c{left:22px;bottom:22px;border-right:0;border-top:0}.vf .br.d{right:22px;bottom:22px;border-left:0;border-top:0}
.vf .hud{position:absolute;left:70px;right:70px;top:26px;display:flex;justify-content:space-between;font:600 13px/1 'Outfit',monospace;letter-spacing:.08em;text-shadow:0 1px 4px rgba(0,0,0,.5)}
.vf .hud.bt{top:auto;bottom:28px}
.vf .rec{display:flex;align-items:center;gap:7px}.vf .rec i{width:9px;height:9px;border-radius:50%;background:var(--red);animation:blink 1.2s infinite}
@keyframes blink{50%{opacity:.2}}
.vf .af{position:absolute;left:50%;top:52%;width:120px;height:140px;transform:translate(-50%,-50%);border:2px solid #fff;border-radius:6px;opacity:.85;transition:border-color .2s}
.vf .af.hunt{animation:hunt .8s ease-in-out}
.vf .af.lock{border-color:var(--lime);box-shadow:0 0 0 1px var(--lime)}
@keyframes hunt{0%{transform:translate(-50%,-50%) scale(1.3)}40%{transform:translate(-50%,-50%) scale(.92)}70%{transform:translate(-50%,-50%) scale(1.05)}100%{transform:translate(-50%,-50%) scale(1)}}
.vf .shut{position:absolute;inset:0;pointer-events:none}
.vf .shut::before,.vf .shut::after{content:"";position:absolute;left:0;right:0;height:0;background:#000;transition:height .09s}
.vf .shut::before{top:0}.vf .shut::after{bottom:0}
.vf.snap .shut::before,.vf.snap .shut::after{height:50.5%}
.vf .fl{position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none}
.vf.flash .fl{animation:fl .45s ease-out}
@keyframes fl{0%{opacity:.85}100%{opacity:0}}
.side{display:flex;flex-direction:column;gap:22px}
.light .panel{background:#fff;border-color:#dde2d4}
.ssteps{display:flex;flex-direction:column;gap:6px}
.sst{display:flex;align-items:center;gap:14px;padding:14px;border-radius:16px;transition:background .4s,color .4s}
.sst b{width:38px;height:38px;border-radius:12px;background:#F2F0E9;display:grid;place-items:center;font-size:14px;flex:none;transition:.4s}
.sst h5{font-size:17px;font-weight:700}.sst small{font-size:13px;color:#66726a}
.sst.on{background:var(--ink);color:var(--paper)}
.sst.on b{background:var(--lime);color:var(--ink)}
.sst.on small{color:#9ba69c}
.camset{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;text-align:center}
.camset div{background:#F2F0E9;border-radius:14px;padding:12px 4px}
.camset small{display:block;font-size:11px;color:#66726a;letter-spacing:.1em}
.camset b{font-size:17px}
.strip{display:flex;gap:12px;margin-top:22px;overflow:hidden;height:118px}
.thumb{flex:0 0 150px;height:110px;border-radius:16px;box-shadow:inset 0 0 0 1.5px rgba(15,23,18,.12);position:relative;overflow:hidden;animation:thin .7s var(--ease)}
.thumb .prod{width:38px;bottom:14%;animation:none}
.thumb .prod .neck{height:3px}
.thumb .prod .body::before{display:none}
.thumb .table{bottom:6%}
.thumb small{position:absolute;left:8px;top:7px;font-size:10px;font-weight:700;background:rgba(15,23,18,.65);color:#fff;padding:2px 7px;border-radius:6px}
@keyframes thin{from{opacity:0;transform:translateY(-50px) scale(.6) rotate(-8deg)}to{opacity:1;transform:none}}
.strip .empty{flex:0 0 150px;height:110px;border-radius:16px;border:1.5px dashed #c9cfbf}

.ba-row{display:grid;grid-template-columns:.8fr 1.2fr;gap:50px;align-items:center;margin-top:110px}
.ba{position:relative;aspect-ratio:16/10;border-radius:28px;overflow:hidden;cursor:ew-resize;user-select:none;touch-action:pan-y}
.ba .lay{position:absolute;inset:0}
.ba .raw{background:radial-gradient(ellipse at 40% 30%,#a5a59c,#7d7d76)}
.ba .raw .prod{filter:saturate(.35) brightness(.78) contrast(.85)}
.ba .raw .table{opacity:.4}
.ba .ed{background:radial-gradient(ellipse at 50% 30%,#d6f56a,#D4EC4F 45%,#8fbb15);clip-path:inset(0 0 0 50%)}
.ba .ed .prod{filter:saturate(1.15) contrast(1.05)}
.ba .prod{width:clamp(80px,10vw,120px);animation:none}
.ba .prod .body::before{display:none}
.ba .tagx{position:absolute;top:20px;font-size:12px;font-weight:800;letter-spacing:.2em;padding:7px 13px;border-radius:999px;background:rgba(15,23,18,.75);color:#fff;z-index:2}
.ba .tagx.l{left:20px}.ba .tagx.r{right:20px;background:var(--ink);color:var(--lime)}
.ba .hd{position:absolute;top:0;bottom:0;left:50%;width:3px;background:#fff;transform:translateX(-50%);z-index:3}
.ba .hd i{position:absolute;top:50%;left:50%;width:54px;height:54px;border-radius:50%;background:#fff;transform:translate(-50%,-50%);display:grid;place-items:center;color:var(--ink);font-style:normal;font-weight:800;box-shadow:0 8px 24px rgba(0,0,0,.3)}
@media(max-width:1000px){.shoot,.ba-row{grid-template-columns:1fr}.vf .hud{font-size:11px;left:60px;right:60px}}


/* ZIGZAG — kaydırdıkça sağdan/soldan gelen kutular */
.zz{position:relative;display:flex;flex-direction:column;gap:clamp(60px,9vw,130px);padding:20px 0}
.zz-line{position:absolute;left:50%;top:0;bottom:0;width:2px;margin-left:-1px;background:#25322b}
.zz-line i{display:block;width:100%;height:calc(var(--k,0)*100%);background:var(--lime);box-shadow:0 0 14px rgba(212,236,79,.5)}
.zz-item{position:relative;width:100%;--p:0;--s:-1}
.zz-item:nth-child(even){--s:1}
.zz-dot{position:absolute;left:50%;top:50px;width:22px;height:22px;margin-left:-11px;border-radius:50%;background:var(--ink);border:2px solid #3a4a40;z-index:2;transition:background .5s,border-color .5s,transform .5s var(--ease)}
.zz-item.on .zz-dot{background:var(--lime);border-color:var(--lime);transform:scale(1.25)}
.zz-box{position:relative;width:calc(50% - 56px);background:var(--ink2);border:1px solid #223027;border-radius:32px;padding:clamp(28px,3.4vw,46px);overflow:hidden;isolation:isolate;
  opacity:var(--p);transform:translate3d(calc((1 - var(--p))*var(--s)*-1*180px),calc((1 - var(--p))*40px),0) scale(calc(.94 + .06*var(--p)));will-change:transform,opacity}
.zz-item:nth-child(odd) .zz-box{margin-right:auto}
.zz-item:nth-child(even) .zz-box{margin-left:auto}
.zz-item:nth-child(odd) .zz-box{transform:translate3d(calc((1 - var(--p))*-180px),calc((1 - var(--p))*40px),0) scale(calc(.94 + .06*var(--p)))}
.zz-item:nth-child(even) .zz-box{transform:translate3d(calc((1 - var(--p))*180px),calc((1 - var(--p))*40px),0) scale(calc(.94 + .06*var(--p)))}
.zz-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:26px}
.zz-no{font-size:15px;font-weight:700;letter-spacing:.2em;color:var(--lime)}
.zz-ar{width:54px;height:54px;border-radius:50%;border:1.5px solid #3a4a40;display:grid;place-items:center;font-size:20px;transition:.5s var(--ease)}
.zz-h{font-size:clamp(36px,4.4vw,64px);font-weight:900;letter-spacing:-.04em;line-height:1}
.zz-h>span{display:block;overflow:hidden;padding-bottom:.08em}
.zz-h>span>span{display:inline-block;transform:translateY(calc((1 - var(--p))*110%))}
.zz-box p{color:var(--mut);font-size:18px;line-height:1.55;margin-top:16px;max-width:460px;transition:color .4s}
.zz-box .chipz{display:flex;gap:8px;flex-wrap:wrap;margin-top:20px}
.zz-box .chipz em{font-style:normal;font-size:13px;padding:5px 12px;border-radius:999px;border:1px solid currentColor;opacity:.55}
.zz-item[data-go] .zz-box{cursor:pointer}
.zz-item[data-go] .zz-box::before{content:"";position:absolute;inset:0;background:var(--lime);clip-path:circle(0 at 90% 12%);transition:clip-path .7s var(--ease);z-index:-1}
.zz-item[data-go]:hover .zz-box::before{clip-path:circle(150% at 90% 12%)}
.zz-item[data-go]:hover .zz-box{color:var(--ink);border-color:var(--lime)}
.zz-item[data-go]:hover .zz-no{color:#3b4a0d}
.zz-item[data-go]:hover .zz-box p{color:#2c3708}
.zz-item[data-go]:hover .zz-ar{background:var(--ink);color:var(--lime);border-color:var(--ink);transform:rotate(-45deg)}
@media(max-width:800px){
  .zz-line{left:11px}.zz-dot{left:11px}
  .zz-box{width:calc(100% - 44px)!important;margin-left:auto!important;margin-right:0!important}
  .zz-item:nth-child(odd) .zz-box{transform:translate3d(calc((1 - var(--p))*-120px),calc((1 - var(--p))*40px),0) scale(calc(.94 + .06*var(--p)))}
  .zz-item:nth-child(even) .zz-box{transform:translate3d(calc((1 - var(--p))*120px),calc((1 - var(--p))*40px),0) scale(calc(.94 + .06*var(--p)))}
}


/* ====== ANA SAYFA v2: 3D GİRİŞ ====== */
.hero3{display:flex;align-items:center;justify-content:center;text-align:center;perspective:1400px;padding:104px 0 96px}
.hero3-in{display:flex;flex-direction:column;align-items:center;position:relative;z-index:2}
#scene{position:absolute;inset:0;z-index:1;transform-style:preserve-3d;pointer-events:none;transform:translate3d(0,var(--sy,0px),0) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg))}
.i3{position:absolute;left:var(--x);top:var(--y);width:var(--sz,84px);height:var(--sz,84px);margin:calc(var(--sz,84px)/-2) 0 0 calc(var(--sz,84px)/-2);transform-style:preserve-3d;transform:translateZ(var(--z));opacity:0}
.go .i3{animation:i3in 1.2s var(--ease) var(--in) forwards}
@keyframes i3in{from{opacity:0;transform:translateZ(calc(var(--z) - 600px)) scale(.4)}to{opacity:1;transform:translateZ(var(--z))}}
.i3-d{width:100%;height:100%;transform-style:preserve-3d;animation:drift var(--d) ease-in-out var(--dl) infinite}
@keyframes drift{0%,100%{transform:translate3d(0,0,0)}25%{transform:translate3d(18px,-28px,50px)}50%{transform:translate3d(-10px,-46px,-30px)}75%{transform:translate3d(-20px,-16px,36px)}}
.i3-t{position:relative;width:100%;height:100%;transform-style:preserve-3d;animation:tumble var(--d) ease-in-out var(--dl) infinite}
@keyframes tumble{0%,100%{transform:rotateX(16deg) rotateY(-30deg) rotateZ(-6deg)}33%{transform:rotateX(-12deg) rotateY(24deg) rotateZ(5deg)}66%{transform:rotateX(9deg) rotateY(40deg) rotateZ(-4deg)}}
.i3-t>i,.i3-t>.fc{position:absolute;inset:0;border-radius:24px;transform:translateZ(var(--zz,8px))}
.i3-t>i{background:var(--c2)}
.i3-t>.fc{display:grid;place-items:center;color:var(--fg);background:linear-gradient(145deg,rgba(255,255,255,.35),transparent 55%),var(--c);box-shadow:inset 0 1px 0 rgba(255,255,255,.5),inset 0 -10px 20px rgba(0,0,0,.14),0 30px 50px rgba(0,0,0,.35)}
.i3-t>.fc svg{width:46%;height:46%}
.i3.card{width:236px;height:64px;margin:-32px 0 0 -118px}
.i3.card .i3-t>i,.i3.card .i3-t>.fc{border-radius:18px}
.i3.card .i3-t>.fc{display:flex;align-items:center;justify-content:flex-start;gap:12px;padding:0 16px 0 12px;text-align:left;border:1px solid #2d3c33}
.i3.card .ic{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;flex:none}
.i3.card .ic svg{width:20px;height:20px}
.i3.card .tx{display:block}.i3.card strong{display:block;font-size:14px;font-weight:700}.i3.card small{color:var(--mut);font-size:12px}
.bmw{perspective:900px;margin-bottom:8px}
.bm{position:relative;width:clamp(110px,12.5vw,170px);aspect-ratio:56/44;transform-style:preserve-3d;animation:bmf 9s ease-in-out infinite}
.bm .bl{position:absolute;inset:0;width:100%;height:100%;transform:translateZ(var(--z));overflow:visible}
.bm .bdot{position:absolute;right:-5%;top:-12%;width:21%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 35% 30%,#ff9a86,var(--red) 55%,#9a2b19);transform:translateZ(64px);animation:bdp 2s infinite}
@keyframes bdp{0%{box-shadow:0 0 0 0 rgba(255,94,58,.6)}100%{box-shadow:0 0 0 22px rgba(255,94,58,0)}}
@keyframes bmf{0%,100%{transform:translateY(0) rotateX(10deg) rotateY(-26deg)}50%{transform:translateY(-16px) rotateX(-6deg) rotateY(26deg)}}
.hero3 h1.brand{font-size:clamp(80px,14.5vw,236px);line-height:.84;letter-spacing:-.06em;margin:10px 0 0}
.hero3 h1.brand .med{font-size:.28em;letter-spacing:.46em;color:var(--lime);line-height:1;margin:.5em 0 0 .46em;padding-bottom:.12em}
.hero3 .tagl{font-size:clamp(20px,2.3vw,34px);font-weight:700;letter-spacing:-.02em;margin:30px 0 12px}
.hero3 .tagl .rdot{display:inline-block;width:.3em;height:.3em;border-radius:50%;background:var(--red);margin-left:.15em;animation:ping 2s infinite}
.hero3 p.lead{margin:0 auto 34px;text-align:center;max-width:560px}
.hero3 .ctas{justify-content:center}
@media(max-width:900px){.i3.card,.i3:nth-child(n+3){display:none}.i3{--sz:62px}}

/* ====== IŞIK ŞERİDİ YOLCULUĞU ====== */
:root{--g:clamp(200px,22vw,340px)}
.jr{position:relative;background:var(--ink)}
.jr-svg{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible;z-index:0;pointer-events:none}
.jr-svg .trk{fill:none;stroke:#1b2620;stroke-width:5;stroke-linecap:round}
.jr-svg .glw{fill:none;stroke-width:18;stroke-linecap:round;opacity:.14}
.jr-svg .lit{fill:none;stroke-width:5;stroke-linecap:round}
.jr-gap{height:var(--g)}
.jr-stop{position:relative;z-index:1;--p:0;perspective:1400px}
.jr-box{width:calc(75vw - 70px - (100vw - min(1280px,92vw))/2);max-width:100%;background:var(--ink2);border:1px solid #223027;border-radius:36px;padding:clamp(28px,3.6vw,52px);position:relative;overflow:hidden;isolation:isolate;opacity:var(--p);box-shadow:0 30px 80px rgba(0,0,0,.45);will-change:transform,opacity}
.jr-box.light{border-color:#dde2d4}
.jr-stop.L .jr-box{margin-right:auto;transform:translate3d(calc((1 - var(--p))*-240px),calc((1 - var(--p))*50px),0) rotateY(calc((1 - var(--p))*16deg)) scale(calc(.94 + .06*var(--p)))}
.jr-stop.R .jr-box{margin-left:auto;transform:translate3d(calc((1 - var(--p))*240px),calc((1 - var(--p))*50px),0) rotateY(calc((1 - var(--p))*-16deg)) scale(calc(.94 + .06*var(--p)))}
.jr-box h2.title{font-size:clamp(34px,4vw,60px)}
.jr-box .smm{gap:30px}
.jr-box .smm2{grid-template-columns:1fr;margin-top:0}
.jr-box .ba-row{margin-top:0;gap:36px}
.jr-box .sec-head{margin-bottom:40px}
.jr-card{width:min(640px,calc(75vw - 70px - (100vw - min(1280px,92vw))/2))}
.jr-stop[data-go]{cursor:pointer}
.jr-stop[data-go] .jr-box::before{content:"";position:absolute;inset:0;background:var(--lime);clip-path:circle(0 at 90% 12%);transition:clip-path .7s var(--ease);z-index:-1}
.jr-stop[data-go]:hover .jr-box::before{clip-path:circle(150% at 90% 12%)}
.jr-stop[data-go]:hover .jr-box{color:var(--ink);border-color:var(--lime)}
.jr-stop[data-go]:hover .zz-no{color:#3b4a0d}
.jr-stop[data-go]:hover .jr-box p{color:#2c3708}
.jr-stop[data-go]:hover .zz-ar{background:var(--ink);color:var(--lime);border-color:var(--ink);transform:rotate(-45deg)}
.jr-card .zz-top{margin-bottom:22px}
.jr-card p{color:var(--mut);font-size:18px;line-height:1.55;margin-top:16px;max-width:460px;transition:color .4s}
.jr-card .chipz{display:flex;gap:8px;flex-wrap:wrap;margin-top:20px}
.jr-card .chipz em{font-style:normal;font-size:13px;padding:5px 12px;border-radius:999px;border:1px solid currentColor;opacity:.55}
@media(max-width:1280px){.jr-box .smm,.jr-box .shoot,.jr-box .ba-row{grid-template-columns:1fr}}
@media(max-width:900px){
  :root{--g:70px}
  .jr-box,.jr-card{width:calc(100% - 46px);margin-left:46px!important;margin-right:0!important}
  .jr-stop.L .jr-box{transform:translate3d(calc((1 - var(--p))*-130px),calc((1 - var(--p))*40px),0) scale(calc(.94 + .06*var(--p)))}
  .jr-stop.R .jr-box{transform:translate3d(calc((1 - var(--p))*130px),calc((1 - var(--p))*40px),0) scale(calc(.94 + .06*var(--p)))}
  .jr-box{box-shadow:0 14px 30px rgba(0,0,0,.35)}
}

.jr-box .chart svg{width:min(100%,460px);margin:6px auto 0}

.hero3 .scroll-hint{left:0;right:0;width:fit-content;margin:0 auto;transform:none;bottom:20px}

@media(max-width:600px){
  .jr-box{padding:18px;border-radius:26px}
  .jr-box .pstage{height:520px}
  .jr-box .pstage::before,.jr-box .pstage::after{display:none}
  .jr-box .phone{width:236px;height:480px;border-radius:38px;padding:10px}
  .jr-box .phone .scr{border-radius:30px}
  .jr-box .vf .hud{left:44px;right:44px;font-size:10px}
}

.jr-box .smm>*,.jr-box .shoot>*,.jr-box .ba-row>*{min-width:0}
@media(max-width:1280px){.jr-box .smm,.jr-box .shoot,.jr-box .ba-row{grid-template-columns:minmax(0,1fr)}}
@media(max-width:600px){.jr-box .camset{grid-template-columns:1fr 1fr}.jr-box .strip{overflow:hidden}}

.jr-box .smm2{grid-template-columns:minmax(0,1fr)}.jr-box .panel{min-width:0}.jr-box .cal{grid-template-columns:repeat(7,minmax(0,1fr))}
@media(max-width:600px){.jr-box .cal{grid-template-columns:repeat(4,minmax(0,1fr))}.jr-box .panel{padding:20px}.jr-box .cal .day{min-height:170px}}

/* ====== DÜZELTMELER v3 ====== */
/* giriş: M sabit, ikonlar merkez noktasının çevresinde küçük, birbirinden bağımsız hareket eder */
.bm{animation:none;transform:rotateX(8deg) rotateY(-22deg)}
.bm .bdot{animation:none}
.i3-d{animation:drift var(--dd,7s) ease-in-out var(--dl,0s) infinite}
@keyframes drift{0%,100%{transform:translate3d(calc(var(--ax,0px)*-1),calc(var(--ay,0px)*-1),0)}50%{transform:translate3d(var(--ax,0px),var(--ay,0px),0)}}
.i3-t{animation:tumble var(--td,10s) ease-in-out var(--dl,0s) infinite}
@keyframes tumble{0%,100%{transform:rotateX(9deg) rotateY(-16deg) rotateZ(-2deg)}50%{transform:rotateX(-6deg) rotateY(14deg) rotateZ(2deg)}}

/* ürün çekimi: açık kutu gerçekten açık renkli olsun, yazılar okunsun */
.jr-box.light{background:var(--paper);color:var(--ink);border-color:#dde2d4}
.jr-box.light h2.title{color:var(--ink)}
.jr-box.light .mut{color:#435047}
.jr-box.light .kicker{color:#4d6a08}
.jr-box.light .panel{background:#fff;border-color:#dde2d4;color:var(--ink)}
.jr-box.light .ph-t small{color:#556158}
.vf{background:#e9e9e4}
.vf .ph{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease),filter .4s}
.vf .lamp{opacity:.35}
.vf .hud span{background:rgba(15,23,18,.72);color:#fff;padding:6px 10px;border-radius:8px;text-shadow:none}
.vf .hud .rec{gap:8px}
.vf .af{border-color:#fff;box-shadow:0 0 0 1px rgba(15,23,18,.55)}
.vf .af.lock{border-color:var(--lime);box-shadow:0 0 0 1px rgba(15,23,18,.7)}
.vf .br{border-color:#fff;filter:drop-shadow(0 0 2px rgba(15,23,18,.7))}
.thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:none}
.thumb small{background:rgba(15,23,18,.8)}
.ba .lay img{width:100%;height:100%;object-fit:cover;display:block}
.ba .raw img{filter:saturate(.4) brightness(.8) contrast(.82) sepia(.1)}
.ba .ed img{filter:saturate(1.2) contrast(1.08) brightness(1.05)}
.ba .tagx.l{background:rgba(15,23,18,.85)}
.shoot{align-items:start}

/* erişim grafiği: yan yana yerleşim */
@media(min-width:901px){
  .jr-box .chart{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);grid-template-areas:"t s" "b s" ". l";column-gap:30px;align-items:center}
  .jr-box .chart>.ph-t{grid-area:t;align-self:end}.jr-box .chart>.big{grid-area:b;align-self:start}
  .jr-box .chart>svg{grid-area:s;width:100%;margin:0}.jr-box .chart>.legend{grid-area:l}
}

/* WhatsApp butonu */
.cta .btn.wa{display:inline-flex;align-items:center;gap:14px}
.cta .btn.wa svg{flex:none;color:var(--lime)}
.cta .btn.wa:hover svg{color:var(--ink)}

/* EDIT3: hizmet satırları çerçeve + lime zemin, süreç istatistik kutuları */
.svc{border-top:0;display:flex;flex-direction:column;gap:16px}
.svc-item{background:var(--lime);border:2px solid var(--ink);border-radius:24px;padding:34px 30px;color:var(--ink)}
.svc-item .no{color:#2c3708}
.svc-item p{color:#2a3320}
.svc-item .tags em{opacity:1;border-color:var(--ink)}
.svc-item:hover{padding-left:44px;color:var(--paper)}
.svc-item:hover p{color:#cfd6dd}
.svc-item:hover .no{color:var(--lime)}
.svc-item:hover .tags em{border-color:var(--lime)}
.stat{background:var(--lime);color:var(--ink);border:2px solid var(--ink);display:flex;flex-direction:column;overflow:hidden;min-width:0}
.stat:hover{border-color:var(--paper)}
.stat b{display:flex;align-items:baseline;gap:6px;white-space:nowrap;font-size:clamp(44px,4.4vw,72px)}
.stat b sup{position:static;vertical-align:baseline;color:var(--ink);font-size:.42em;font-weight:800;line-height:1}
.stat span{color:#1b2210;font-weight:500}
.stat b span{color:inherit;font-size:inherit;margin:0;display:inline;font-weight:inherit}
.stat .ph{color:var(--ink);opacity:.7;align-self:flex-start}

/* EDIT4: taşma, üst bar, alt yazı, mobil şerit */
html,body{overflow-x:clip;max-width:100%}
@supports not (overflow:clip){body{overflow-x:hidden}}
main,.view,footer{overflow-x:clip}
nav{z-index:70;padding:16px 0;background:var(--ink);border-bottom:1px solid #22302A;backdrop-filter:none;-webkit-backdrop-filter:none}
nav.scrolled{padding:12px 0;background:var(--ink);backdrop-filter:none;-webkit-backdrop-filter:none}
nav:has(.burger.open){background:transparent;border-bottom-color:transparent}
.mmenu{z-index:65}
.hero3{padding-top:120px}
.fbig{font-size:inherit;margin-top:70px;line-height:.9;letter-spacing:-.03em;color:var(--paper);-webkit-text-stroke:0;white-space:nowrap;overflow:hidden;text-align:center;font-weight:900}
.fbig span{display:inline-block}
.fbig b{color:var(--lime);font-weight:900}
.jr-m{position:absolute;left:0;top:0;bottom:0;width:48px;pointer-events:none;z-index:0}
.jr-m .ln{position:absolute;top:0;bottom:0;width:5px;margin-left:-2.5px;border-radius:3px;background:#1b2620}
.jr-m .lt{position:absolute;inset:0;border-radius:3px;background:var(--c);transform-origin:0 0;transform:scaleY(0);will-change:transform}
.jr-m .hd{position:absolute;left:50%;top:0;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:var(--c);box-shadow:0 0 14px 4px var(--c);will-change:transform;visibility:hidden}
.cta .btn{margin:6px}

/* =====================================================================
   v5 — ÖZGÜN KATMAN
   Orman siyahı zemin, biraz daha sarıya kaçan limon, mercan bildirim
   rengi; Bricolage Grotesque başlıklar, elle çizilmiş dokunuşlar,
   küçültülmüş vitrin kutuları.
   ===================================================================== */
:root{
  --ink:#0F1712;--ink2:#17221B;--ink3:#22302A;
  --lime:#D4EC4F;--red:#FF5E3A;--paper:#F2F0E9;--mut:#97A39A;
  --forest:#1D3A2A;--sand:#EAE5D6;--line:#2c3a31;
  --disp:'Bricolage Grotesque','Instrument Sans',system-ui,sans-serif;
  --body:'Instrument Sans',system-ui,sans-serif;
  --g:clamp(110px,11vw,180px);
  --wob:cubic-bezier(.34,1.56,.64,1);
}
body{font-family:var(--body);font-size:17px}
h1,h2,h3,h4,h5,.btn,.logo b,.marquee span,.mmenu a,.qa button,.stat b,.fbig,#curtain .cn,.quote,.chart .big{font-family:var(--disp)}
h2.title,.hero h1,.phead h1,.cta h2,.zz-h,.mcta h3{font-variation-settings:"opsz" 96;letter-spacing:-.045em}

/* film grain — dijital düzlüğü kırar */
body::after{content:"";position:fixed;inset:-50%;z-index:95;pointer-events:none;opacity:.07;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 1.2s steps(6) infinite}
@keyframes grain{0%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-4%)}60%{transform:translate(-4%,-1%)}80%{transform:translate(3%,3%)}100%{transform:translate(0,0)}}

/* üst kaydırma ilerlemesi */
#sprog{position:fixed;left:0;top:0;height:3px;width:100%;z-index:75;background:var(--lime);transform-origin:0 50%;transform:scaleX(0)}

/* kicker: büyük harf + aralıklı + yanıp sönen nokta yerine el yazısı gibi bir çizgi */
.kicker{font-size:16px;letter-spacing:0;text-transform:none;font-weight:600;gap:12px}
.kicker::before{width:26px;height:10px;border-radius:0;background:currentColor;animation:none;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 10'%3E%3Cpath d='M1 6c4-5 7 3 11-1s7-4 13 0' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 10'%3E%3Cpath d='M1 6c4-5 7 3 11-1s7-4 13 0' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat}
.light .kicker,.jr-box.light .kicker{color:#3f5a06}

/* butonlar: basınca çöker, üzerine gelince alttan dolar */
.btn{position:relative;overflow:hidden;isolation:isolate;transition:color .3s,transform .35s var(--wob),box-shadow .3s}
.btn::before{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--paper);transform:translateY(102%);transition:transform .45s var(--ease);z-index:-1}
.btn-lime:hover{background:var(--lime)}
.btn-lime:hover::before{transform:none}
.btn:active{transform:scale(.95)!important}
.btn-ghost{border-color:var(--line)}
.btn-ghost::before{background:var(--lime)}
.btn-ghost:hover{color:var(--ink);border-color:var(--lime)}
.btn-ghost:hover::before{transform:none}
.cta .btn::before,.mcta .btn::before{background:var(--paper)}
.cta .btn:hover,.mcta .btn:hover{background:var(--ink)}
.cta .btn:hover::before,.mcta .btn:hover::before{transform:none}
.btn .arr{transition:transform .4s var(--wob)}
.btn:focus-visible,.spin-badge:focus-visible,[data-go]:focus-visible{outline:3px solid var(--lime);outline-offset:4px}

/* nav: logo kare yerine hafif eğik "çıkartma" */
.logo .mk{border-radius:10px;rotate:-6deg;transition:rotate .5s var(--wob)}
.logo:hover .mk{rotate:6deg}
.links a{position:relative}
.links a:not(.btn)::after{content:"";position:absolute;left:16px;right:16px;bottom:5px;height:2px;background:var(--lime);transform:scaleX(0);transform-origin:right;transition:transform .4s var(--ease)}
.links a:not(.btn):hover::after,.links a.on::after{transform:scaleX(1);transform-origin:left}
.links a:hover{background:transparent}

/* ===== GİRİŞ ===== */
.hero .grid-bg{display:none}
.hero3{text-align:center}
.hero3 h1.brand .word{display:inline-block}
.hero3 h1.brand .ch{display:inline-block;font-weight:800;transition:color .3s}
.hero3 h1.brand .ch.jump{animation:jump .7s var(--wob)}
@keyframes jump{0%{transform:none}30%{transform:translateY(-.14em) rotate(-6deg) scaleY(1.06)}60%{transform:translateY(.03em) scaleY(.94)}100%{transform:none}}
.hero3 h1.brand .ch:hover{color:var(--lime)}
.hero3 h1.brand .med{font-family:var(--body);font-weight:600;letter-spacing:.62em}
.scrib{position:relative;display:inline-block;white-space:nowrap}
.scrib svg{position:absolute;left:-4%;right:-4%;bottom:-.32em;width:108%;height:.5em;overflow:visible}
.scrib path{fill:none;stroke:var(--red);stroke-width:3.2;stroke-linecap:round;stroke-dasharray:420;stroke-dashoffset:420}
.go .scrib path{animation:draw 1.1s var(--ease) 1.5s forwards}
.i3-t>.fc{background:var(--c);box-shadow:inset 0 -6px 0 rgba(0,0,0,.14)}
.i3.card .i3-t>.fc{border-color:var(--line)}
.hero3 .ctas{align-items:center;position:relative}
.spin-badge{position:relative;width:104px;height:104px;margin-left:6px;display:grid;place-items:center;cursor:pointer;border-radius:50%;color:var(--paper)}
.spin-badge svg{position:absolute;inset:0;width:100%;height:100%;animation:spin 14s linear infinite;overflow:visible}
.spin-badge text{font:600 10.5px var(--body);fill:currentColor;letter-spacing:.04em}
.spin-badge .sb-ar{width:44px;height:44px;border-radius:50%;background:var(--red);color:#fff;display:grid;place-items:center;font-size:20px;font-weight:700;transition:transform .45s var(--wob)}
.spin-badge:hover .sb-ar{transform:rotate(-45deg) scale(1.12)}
.spin-badge:hover svg{animation-duration:4s}
.doodle{position:absolute;pointer-events:none;overflow:visible}
.doodle path{fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:3;stroke-dasharray:300;stroke-dashoffset:300}
.go .doodle path,.cta.in .doodle path{animation:draw 1.4s var(--ease) 1.9s forwards}
.d-arrow{width:96px;left:calc(50% - 330px);bottom:-46px;rotate:8deg}
.d-arrow path{stroke:var(--lime)}
.hero3-in{position:relative}
.d-star{width:34px;z-index:2}
.d-star path{stroke:var(--lime);stroke-width:2.6}
.d-star.s1{left:24%;top:22%;animation:twinkle 4s ease-in-out infinite}
.d-star.s2{right:23%;top:58%;animation:twinkle 5s ease-in-out -2s infinite}
.d-star.s2 path{stroke:var(--red)}
@keyframes twinkle{0%,100%{transform:rotate(0) scale(1)}50%{transform:rotate(25deg) scale(.8)}}
@media(max-width:900px){.d-arrow,.d-star{display:none}.spin-badge{width:88px;height:88px}}

/* ===== ÇAPRAZ BANTLAR ===== */
.tapes{position:relative;height:clamp(150px,15vw,210px);margin:10px 0 0;z-index:3}
.tapes .marquee{position:absolute;left:-30px;right:-30px;top:50%;margin:0;padding:18px 0}
.marquee.m1{transform:translateY(-50%) rotate(-3deg)}
.marquee.m2{transform:translateY(-50%) rotate(2.4deg);background:var(--red);color:var(--ink)}
.marquee.m2 .track{animation-direction:reverse;animation-duration:34s}
.marquee.m2 span{font-size:clamp(20px,2.4vw,32px);font-weight:600}
.marquee.m2 span::after{background:var(--ink);width:10px;height:10px}
.marquee span{font-weight:700}

/* ===== VİTRİN KUTULARI — küçültüldü ===== */
.jr-box{width:min(780px,calc(75vw - 70px - (100vw - min(1280px,92vw))/2));border-radius:20px;padding:clamp(22px,2.5vw,36px);
  border:1.5px solid var(--line);box-shadow:8px 8px 0 #0a100c}
.jr-box.forest{background:var(--forest);border-color:#2b4e3a}
.jr-box.forest .panel{background:rgba(15,23,18,.45);border-color:#2b4e3a}
.jr-box.light{box-shadow:8px 8px 0 var(--lime);border-color:var(--ink)}
.jr-box.sand{background:var(--sand);box-shadow:8px 8px 0 var(--red)}
.jr-card{width:min(520px,calc(75vw - 70px - (100vw - min(1280px,92vw))/2))}
.jr-box h2.title{font-size:clamp(30px,3.1vw,46px);line-height:1}
.jr-box .mut[style]{font-size:17px!important;margin-top:16px!important}
.jr-box .sec-head{margin-bottom:24px;gap:20px}
.jr-box .sec-head p{font-size:16px;max-width:300px}
@media(min-width:901px){
  .jr-stop.L .jr-box{rotate:-.6deg;transform:translate3d(calc((1 - var(--p))*-200px),calc((1 - var(--p))*50px),0) rotateY(calc((1 - var(--p))*14deg + var(--ty,0deg))) rotateX(var(--tx,0deg)) scale(calc(.94 + .06*var(--p)))}
  .jr-stop.R .jr-box{rotate:.6deg;transform:translate3d(calc((1 - var(--p))*200px),calc((1 - var(--p))*50px),0) rotateY(calc((1 - var(--p))*-14deg + var(--ty,0deg))) rotateX(var(--tx,0deg)) scale(calc(.94 + .06*var(--p)))}
  .jr-box{transition:rotate .6s var(--wob),box-shadow .4s var(--ease)}
  .jr-stop:hover .jr-box{rotate:0deg}
  .jr-box .smm{grid-template-columns:minmax(0,1fr) minmax(0,.86fr);gap:24px}
  .jr-box .shoot{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:16px}
  .jr-box .ba-row{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:28px}
}
/* sosyal medya kutusu */
.checks{margin:20px 0 24px}
.checks li{font-size:16px;padding:9px 0;border-bottom-color:var(--line)}
.checks li b{width:24px;height:24px;font-size:12px;border-radius:7px;rotate:-4deg}
.jr-box .pstage{height:500px}
.jr-box .pstage::before{width:330px;height:330px;border-color:var(--line)}
.jr-box .pstage::after{width:420px;height:420px;border-color:#1b2620}
.jr-box .phone{width:236px;height:480px;border-radius:38px;padding:9px}
.jr-box .phone .scr{border-radius:30px}
.jr-box .pf-top{padding:38px 12px 10px;gap:10px}
.jr-box .pf-av{width:50px;height:50px}
.jr-box .pf-st b{font-size:14px}
.sbub{border-radius:12px;border-color:var(--line);box-shadow:4px 4px 0 rgba(0,0,0,.35);padding:8px 12px 8px 8px}
.sbub.b1{rotate:-5deg;left:-14px;top:70px}.sbub.b2{rotate:4deg;right:-18px;top:200px}.sbub.b3{rotate:-2deg;left:-6px;bottom:80px}
.sbub .ic{border-radius:8px}
/* takvim + grafik kutusu: yan yana, kısa */
@media(min-width:901px){.jr-box .smm2{grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:16px}
  .jr-box .chart{display:block}.jr-box .chart>svg{margin-top:10px}}
.jr-box .panel{border-radius:14px;padding:18px}
.panel h4{font-size:18px}
.panel .ph-t{margin-bottom:14px}
.jr-box .cal{gap:5px}
.jr-box .cal .day{min-height:118px;border-radius:9px;padding:7px 5px;gap:4px}
.cal .day.today::after{top:-8px;right:4px;font-size:8px;rotate:6deg}
.chipc{font-size:10px;padding:4px 5px;border-radius:5px;gap:4px}
.chipc::before{width:5px;height:5px}
.jr-box .chart .big{font-size:34px}
.legend{margin-top:12px}
/* ürün çekimi kutusu */
.jr-box .vf{border-radius:12px;aspect-ratio:4/3}
.jr-box .vf .hud{left:46px;right:46px;top:16px;font-size:10px}
.jr-box .vf .hud.bt{bottom:16px}
.jr-box .vf .br{width:22px;height:22px}
.jr-box .vf .br.a,.jr-box .vf .br.b{top:12px}.jr-box .vf .br.c,.jr-box .vf .br.d{bottom:12px}
.jr-box .vf .br.a,.jr-box .vf .br.c{left:12px}.jr-box .vf .br.b,.jr-box .vf .br.d{right:12px}
.jr-box .vf .af{width:80px;height:92px}
.jr-box .strip{height:62px;gap:8px;margin-top:12px}
.jr-box .thumb,.jr-box .strip .empty{flex:0 0 84px;height:58px;border-radius:8px}
.jr-box .ssteps{gap:2px}
.jr-box .sst{padding:9px 10px;border-radius:10px;gap:10px}
.jr-box .sst b{width:30px;height:30px;border-radius:8px;font-size:12px}
.jr-box .sst h5{font-size:15px}.jr-box .sst small{font-size:12px}
.jr-box .ba{border-radius:12px}
.ba .hd i{transition:transform .4s var(--wob)}
.ba:hover .hd i{transform:translate(-50%,-50%) scale(1.15) rotate(10deg)}
/* yönlendirme kartları */
.jr-card .zz-top{margin-bottom:14px}
.jr-card .zz-no{letter-spacing:0;font-size:15px;font-weight:600}
.jr-card .zz-h{font-size:clamp(32px,3.4vw,50px)}
.jr-card p{font-size:16px;margin-top:10px}
.jr-stop[data-go]:hover .jr-box{box-shadow:14px 14px 0 var(--red)}
.zz-ar{width:46px;height:46px}
.jr-box .chipz em{opacity:.75}

/* başlıklarda keçeli kalem vurgusu */
.hl{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 40' preserveAspectRatio='none'%3E%3Cpath d='M3 22c40-8 120-12 194-6l-2 14c-70-4-140 0-190 6z' fill='%23D4EC4F'/%3E%3C/svg%3E") 0 70%/0% 52% no-repeat;transition:background-size 1s var(--ease) .5s;padding:0 .04em}
.split.in .hl{background-size:100% 52%}
.jr-box:not(.light) .hl,.cta .hl{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 40' preserveAspectRatio='none'%3E%3Cpath d='M3 22c40-8 120-12 194-6l-2 14c-70-4-140 0-190 6z' fill='%23FF5E3A'/%3E%3C/svg%3E")}
.cta .hl{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 40' preserveAspectRatio='none'%3E%3Cpath d='M3 22c40-8 120-12 194-6l-2 14c-70-4-140 0-190 6z' fill='%23F2F0E9'/%3E%3C/svg%3E")}

/* CTA */
.cta{padding:120px 0}
.cta .doodle path{stroke:var(--ink)}
.cta .c1{width:46px;left:14%;top:22%;animation:twinkle 5s ease-in-out infinite}
.cta .c2{width:110px;right:12%;top:30%}
.cta .c3{width:36px;right:22%;bottom:18%;animation:twinkle 4s ease-in-out -1s infinite}
.cta .c1 path,.cta .c3 path{stroke:var(--red)}

/* genel yüzeyler: daha küçük köşe, gölge yerine düz "çıkartma" ofseti */
.panel,.feat,.stat,.zz-box,form,.tcard,.mcta{border-radius:18px}
.feat:hover,.stat:hover{box-shadow:6px 6px 0 var(--lime)}
.zz-box{border-color:var(--line)}
.mcta{box-shadow:8px 8px 0 var(--red)}
.svc-item{border-radius:16px}
.work .img{border-radius:16px}
.phead .grid-bg{display:none}
.phead h1 .rdot,.hero3 .tagl .rdot,.cta h2 .rdot{animation:bob 2.6s var(--wob) infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-.12em)}}
footer{border-top-color:var(--line)}

@media(max-width:900px){
  .jr-box{box-shadow:5px 5px 0 #0a100c}.jr-box.light{box-shadow:5px 5px 0 var(--lime)}.jr-box.sand{box-shadow:5px 5px 0 var(--red)}
  .jr-box .vf{aspect-ratio:16/11}
}
@media(prefers-reduced-motion:reduce){body::after{animation:none}.spin-badge svg{animation:none}}
/* v5 düzeltme: vurgu kalemi yazının altından geçsin */
.hl{background-position:0 96%;background-size:0% 34%}
.split.in .hl{background-size:100% 34%}
.cta .hl{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 40' preserveAspectRatio='none'%3E%3Cpath d='M3 22c40-8 120-12 194-6l-2 14c-70-4-140 0-190 6z' fill='%23FF5E3A'/%3E%3C/svg%3E")}
.spin-badge{width:118px;height:118px}
.spin-badge text{font-size:12px}
.jr-box .vf .hud.bt{top:auto}
.cal .day{min-width:0}
.chipc{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
@media(min-width:901px){.jr-box .cal .day{min-height:150px}}
@media(max-width:900px){
  .jr-box,.jr-card{width:calc(100% - 46px)}
  .cta .c2{display:none}.cta .c1{left:6%;top:10%}.cta .c3{right:8%;bottom:8%}
  .sbub{display:none}
}
footer h5{letter-spacing:0;text-transform:none;font-size:15px;color:var(--lime)}
.phead .idx{letter-spacing:0}

/* =================== v6 =================== */
/* performans: ekran dışındaki bölümlerin animasyonları durur */
.off,.off *,.off *::before,.off *::after{animation-play-state:paused!important}
body::after{animation:none;inset:0}
.sbub,.notif,.work .img .lbl{backdrop-filter:none;-webkit-backdrop-filter:none}
.jr-box{will-change:auto}
.jr-stop:not(.off) .jr-box{will-change:transform,opacity}

/* "Hadi konuşalım": limon zemin yerine koyu orman yeşili */
.cta{background:var(--forest);color:var(--paper)}
.cta p{color:#c9d3c8}
.cta .btn{background:var(--lime);color:var(--ink)}
.cta .btn .arr{background:var(--ink);color:var(--lime)}
.cta .btn::before{background:var(--paper)}
.cta .btn:hover{background:var(--lime);color:var(--ink)}
.cta .doodle path{stroke:var(--lime)}
.cta .c1 path,.cta .c3 path{stroke:var(--red)}
.cta .hl{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 40' preserveAspectRatio='none'%3E%3Cpath d='M3 22c40-8 120-12 194-6l-2 14c-70-4-140 0-190 6z' fill='%23D4EC4F'/%3E%3C/svg%3E")}
.cta h2 .hl{color:var(--paper)}
/* alt sayfalardaki mini CTA kutuları da aynı tonda */
.mcta{background:var(--forest);color:var(--paper);box-shadow:8px 8px 0 var(--lime)}
.mcta .btn{background:var(--lime);color:var(--ink)}
.mcta .btn .arr{background:var(--ink);color:var(--lime)}
.mcta .btn:hover{background:var(--lime);color:var(--ink)}

/* ürün çekimi kutusu biraz daha küçük */
@media(min-width:901px){
  #shoot-sec .jr-box{width:min(660px,calc(75vw - 70px - (100vw - min(1280px,92vw))/2))}
  #shoot-sec .shoot{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr)}
}
#shoot-sec .sec-head{margin-bottom:18px}
#shoot-sec .sec-head p{font-size:15px}
#shoot-sec .vf{aspect-ratio:5/4}
#shoot-sec .vf .hud span{padding:4px 7px;font-size:9px}
#shoot-sec .sst{padding:7px 8px}
#shoot-sec .sst h5{font-size:14px}#shoot-sec .sst small{font-size:11px}
#shoot-sec .jr-box .strip,#shoot-sec .strip{height:50px}
#shoot-sec .thumb,#shoot-sec .strip .empty{flex-basis:66px;height:46px}

/* mobil: giriş ikonları yazının üstüne binmesin, Safari'de düz çizilsin */
@media(max-width:900px){
  .i3{--sz:54px!important}
  .i3:nth-child(1){--x:10%!important;--y:13%!important}
  .i3:nth-child(2){--x:90%!important;--y:13%!important}
  .i3-t>i{display:none}
  .i3-t,.i3-d{animation-duration:14s!important}
  #scene{transform:none!important}
  .hero3{padding-top:110px}
}

/* randevu: iletişim satırları tıklanabilir */
a.contact-row{color:inherit;transition:color .3s,padding .4s var(--ease)}
a.contact-row:hover{color:var(--lime);padding-left:8px}
.contact-row{border-top-color:var(--line)}
.contact-row .ic{border-radius:10px}
/* kaydırmalı saat penceresi */
.timepick{position:relative;border:1.5px solid var(--line);border-radius:14px;background:var(--ink);overflow:hidden}
.timepick::before,.timepick::after{content:"";position:absolute;left:0;right:0;height:26px;z-index:1;pointer-events:none}
.timepick::before{top:0;background:linear-gradient(var(--ink),transparent)}
.timepick::after{bottom:0;background:linear-gradient(transparent,var(--ink))}
.tp-list{display:grid!important;grid-template-columns:repeat(3,1fr);gap:6px!important;max-height:152px;overflow-y:auto;padding:22px 10px;scroll-snap-type:y proximity;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--lime) transparent;outline:none}
.tp-list:focus-visible{box-shadow:inset 0 0 0 2px var(--lime)}
.tp-list button{scroll-snap-align:center;padding:9px 0!important;border-radius:9px!important;font-size:14px!important;font-variant-numeric:tabular-nums;transition:background .25s,color .25s,transform .3s var(--wob)!important}
.tp-list button.on{transform:scale(1.06)}
.field.err .timepick{border-color:var(--red)}
.frow{align-items:start}

/* KVKK sayfası */
.legal{max-width:820px}
.legal-lead{font-size:20px;line-height:1.6;color:var(--paper);margin-bottom:10px}
.legal h2{font-size:clamp(22px,2.2vw,28px);font-weight:700;letter-spacing:-.02em;margin:44px 0 12px}
.legal p,.legal li{font-size:17px;line-height:1.7;color:#cfd5cc}
.legal p+p{margin-top:12px}
.legal ul{padding-left:22px;margin-top:10px}
.legal li{margin-bottom:8px}
.legal li::marker{color:var(--lime)}
.legal a:not(.btn){color:var(--lime);text-decoration:underline;text-underline-offset:3px}
.legal b{color:var(--paper)}
.legal-date{margin:44px 0 26px;color:var(--mut)!important;font-size:14px!important}
.legal{max-width:none}
.legal>*{max-width:820px}
@media(max-width:900px){.i3:nth-child(1),.i3:nth-child(2){--y:19%!important}}

/* =================== v7 =================== */
/* giriş: alt kenarda ikonları kesen çizgi olmasın */
.hero3{overflow:visible}
/* giriş: logo + yazılar ekran yüksekliğine göre küçülsün, hepsi ilk ekrana sığsın */
.hero3{min-height:100vh;min-height:100svh;padding:96px 0 70px}
.bm{width:clamp(80px,min(10vw,14vh),150px)}
.hero3 h1.brand{font-size:clamp(58px,min(12.5vw,19vh),210px);margin-top:4px}
.hero3 .tagl{font-size:clamp(18px,min(2vw,3.4vh),30px);margin:min(26px,2.6vh) 0 10px}
.hero3 p.lead{font-size:clamp(15px,min(1.4vw,2.3vh),20px);margin-bottom:min(30px,3vh)}

/* bantlar: daha çapraz, iki katman ayrı hızlarda */
.tapes{height:clamp(190px,17vw,260px)}
.tapes .marquee{will-change:transform}
.marquee.m1{transform:translateY(calc(-50% + var(--p1,0px))) rotate(calc(-4deg + var(--r1,0deg)))}
.marquee.m2{top:44%;transform:translateY(calc(-50% + var(--p2,0px))) rotate(calc(3.6deg + var(--r2,0deg)))}

/* CTA telefonları */
.cta-tel{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin-top:22px}
.cta-tel a{display:flex;flex-direction:column;align-items:flex-start;padding:12px 20px;border-radius:14px;border:1.5px solid #2f5541;background:rgba(15,23,18,.35);transition:border-color .3s,transform .4s var(--wob),background .3s;text-align:left}
.cta-tel small{font-size:13px;color:#a9b8aa}
.cta-tel b{font-family:var(--disp);font-size:20px;font-weight:700;letter-spacing:-.01em;color:var(--paper);font-variant-numeric:tabular-nums}
.cta-tel a:hover{border-color:var(--lime);transform:translateY(-3px) rotate(-1deg);background:rgba(15,23,18,.6)}
.cta-tel a:hover b{color:var(--lime)}

/* dokunmatik: ekranın ortasına gelen kart kendiliğinden renklenir */
.jr-stop[data-go].act .jr-box::before{clip-path:circle(150% at 90% 12%)}
.jr-stop[data-go].act .jr-box{color:var(--ink);border-color:var(--lime);box-shadow:10px 10px 0 var(--red)}
.jr-stop[data-go].act .zz-no{color:#3b4a0d}
.jr-stop[data-go].act .jr-box p{color:#2c3708}
.jr-stop[data-go].act .zz-ar{background:var(--ink);color:var(--lime);border-color:var(--ink);transform:rotate(-45deg)}
.jr-stop[data-go] .jr-box::before{transition:clip-path .9s var(--ease)}
.svc-item.act{color:var(--paper);padding-left:44px}
.svc-item.act::before{transform:scaleY(1)}
.svc-item.act p{color:#cfd6dd}.svc-item.act .no{color:var(--lime)}.svc-item.act .tags em{border-color:var(--lime)}
.svc-item.act .go-ic{background:var(--lime);border-color:var(--lime);color:var(--ink);transform:rotate(-45deg)}
.feat.act,.stat.act{transform:translateY(-8px);box-shadow:6px 6px 0 var(--lime)}
.work.act .art{transform:scale(1.07)}.work.act .vw{transform:scale(1)}

@media(max-width:900px){
  /* giriş ikonları mobilde de: 6 ikon kenarlarda, bildirim kartları gizli */
  .i3:nth-child(n+3){display:block}
  .i3.card{display:none!important}
  .i3{--sz:44px!important}
  .i3:nth-child(1){--x:11%!important;--y:15%!important}
  .i3:nth-child(2){--x:89%!important;--y:15%!important}
  .i3:nth-child(3){--x:8%!important;--y:36%!important}
  .i3:nth-child(4){--x:92%!important;--y:36%!important}
  .i3:nth-child(5){--x:11%!important;--y:92%!important}
  .i3:nth-child(6){--x:89%!important;--y:92%!important}
  .i3-t>.fc{border-radius:13px}
  .hero3{padding:84px 0 56px}
  .hero3 h1.brand{font-size:clamp(52px,16vw,74px)}
  .hero3 h1.brand .med{letter-spacing:.5em}
  .bm{width:72px}
  .hero3 .tagl{font-size:18px;margin:16px 0 8px}
  .hero3 p.lead{font-size:14.5px;line-height:1.5;max-width:330px;margin-bottom:20px}
  .hero3 .ctas{gap:10px}
  .hero3 .ctas .btn{padding:14px 20px;font-size:15px}
  .hero3 .ctas .btn .arr{width:24px;height:24px}
  .spin-badge{width:80px!important;height:80px!important}
  .spin-badge text{font-size:11.5px}
  .spin-badge .sb-ar{width:34px;height:34px;font-size:16px}
  .hero3 .scroll-hint{display:none}

  /* bantlar mobilde: daha çapraz, arka bant görünür ve küçük */
  .tapes{height:230px;margin-top:0}
  .tapes .marquee{left:-60px;right:-60px;padding:11px 0}
  .marquee.m1{transform:translateY(calc(-50% + var(--p1,0px))) rotate(calc(-9deg + var(--r1,0deg)))}
  .marquee.m2{top:50%;padding:7px 0;transform:translateY(calc(-50% + var(--p2,0px))) rotate(calc(8deg + var(--r2,0deg)))}
  .marquee.m1 span{font-size:24px;padding:0 16px;gap:30px}
  .marquee.m2 span{font-size:15px;padding:0 12px;gap:22px}
  .marquee.m1 span::after{width:10px;height:10px}

  /* sosyal medya kutusu mobilde ekrana sığsın */
  .jr-box{padding:18px!important}
  .jr-box h2.title{font-size:28px}
  .jr-box .mut[style]{font-size:15px!important;margin-top:10px!important;line-height:1.5!important}
  .jr-box .smm{gap:6px}
  .checks{margin:12px 0 16px}
  .checks li{font-size:14px;padding:6px 0;gap:10px}
  .checks li b{width:20px;height:20px;font-size:10px}
  .jr-box .smm .btn{padding:12px 20px;font-size:15px}
  .jr-box .pstage{height:370px!important}
  .jr-box .phone{scale:.72}
  /* ürün çekimi kutusu mobilde ekrana sığsın */
  #shoot-sec .sec-head{margin-bottom:12px;gap:8px}
  #shoot-sec .sec-head p{font-size:14px;line-height:1.5}
  #shoot-sec .vf{aspect-ratio:4/3}
  #shoot-sec .vf .hud{left:36px!important;right:36px!important;top:10px;font-size:8px!important}
  #shoot-sec .vf .hud.bt{top:auto;bottom:10px}
  #shoot-sec .vf .hud span{padding:3px 5px}
  #shoot-sec .strip{display:none}
  #shoot-sec .shoot{gap:10px}
  #shoot-sec .panel{padding:12px!important}
  #shoot-sec .panel .ph-t{margin-bottom:8px}
  #shoot-sec .panel .ph-t small{display:none}
  #shoot-sec .ssteps{display:grid;grid-template-columns:1fr 1fr;gap:6px}
  #shoot-sec .sst{padding:7px;gap:7px}
  #shoot-sec .sst b{width:24px;height:24px;font-size:10px;border-radius:7px}
  #shoot-sec .sst h5{font-size:12.5px}
  #shoot-sec .sst small{display:none}
  /* önce/sonra kutusu */
  #ba-sec .ba-row{gap:14px}
  #ba-sec .mut[style]{font-size:15px!important}
  .cta-tel b{font-size:18px}
}
.ftel{display:inline-flex;flex-direction:column;white-space:nowrap;font-variant-numeric:tabular-nums}
.ftel small{font-size:12px;color:var(--mut)}


/* ===== bantlar sabit + şeritler bandın altından başlasın ===== */
.tapes{height:clamp(150px,12vw,190px);margin-top:20px}
.tapes .marquee{padding:12px 0}
.marquee.m1{transform:translateY(-50%) rotate(-4deg)}
.marquee.m2{top:46%;padding:8px 0;transform:translateY(-50%) rotate(3.4deg)}
.marquee.m1 span{font-size:clamp(22px,2.5vw,36px);padding:0 22px;gap:40px}
.marquee.m1 span::after{width:12px;height:12px}
.marquee.m2 span{font-size:clamp(15px,1.4vw,20px);padding:0 16px;gap:28px}
/* şerit katmanı bandın ortasına kadar yukarı uzanır, bant üstte kalır */
.jr{margin-top:calc(clamp(150px,12vw,190px) / -2);padding-top:calc(clamp(150px,12vw,190px) / 2)}
@media(max-width:900px){
  .tapes{height:230px;margin-top:0}
  .tapes .marquee{padding:11px 0}
  .marquee.m1{transform:translateY(-50%) rotate(-9deg)}
  .marquee.m2{top:50%;padding:7px 0;transform:translateY(-50%) rotate(8deg)}
  .marquee.m1 span{font-size:24px;padding:0 16px;gap:30px}
  .marquee.m2 span{font-size:15px;padding:0 12px;gap:22px}
  .jr{margin-top:-115px;padding-top:115px}
}