:root{--kayisi:#B4441F;--kayisi-koyu:#8E3416;--kagit:#F6F0E6;--murekkep:#1F1A17;--aras:#1F4D4A;--cizgi:#E3D6C3;
--s1:8px;--s2:16px;--s3:24px;--s4:32px;--s6:48px;--s8:64px;--s12:96px;
--baslik:'Fraunces',Georgia,serif;--govde:'Inter Tight',system-ui,sans-serif}
*{box-sizing:border-box;margin:0}
body{font:400 17px/1.6 var(--govde);color:var(--murekkep);background:var(--kagit)}
a{color:inherit}
.w{max-width:1120px;margin:auto;padding:0 var(--s3)}
header{border-bottom:1px solid var(--cizgi)}
header .w{display:flex;align-items:center;justify-content:space-between;gap:var(--s2);padding-top:var(--s2);padding-bottom:var(--s2);flex-wrap:wrap}
.logo{font:700 22px var(--baslik);text-decoration:none;color:var(--kayisi-koyu)}
.logo span{color:var(--aras)}
nav{display:flex;gap:var(--s3);flex-wrap:wrap;font-size:15px}
nav a{text-decoration:none;padding:var(--s1) 0;border-bottom:2px solid transparent}
nav a:hover,nav a[aria-current]{border-color:var(--kayisi)}
h1,h2,h3{font-family:var(--baslik);line-height:1.1;letter-spacing:-.01em}
h1{font-size:clamp(40px,7vw,72px);font-weight:700}
h2{font-size:clamp(28px,4vw,40px);margin-bottom:var(--s3)}
h3{font-size:22px;margin-bottom:var(--s1)}
section{padding:var(--s8) 0}
.hero{padding:var(--s8) 0 var(--s12)}
.hero .w{display:grid;gap:var(--s6);grid-template-columns:1fr}
.lead{font-size:20px;max-width:34em;margin:var(--s3) 0 var(--s4)}
.btn{display:inline-flex;align-items:center;gap:var(--s1);padding:var(--s2) var(--s3);background:var(--kayisi);color:#fff;text-decoration:none;font-weight:600;border-radius:4px;box-shadow:0 4px 0 var(--kayisi-koyu);transition:transform .15s,box-shadow .15s}
.btn:hover{transform:translateY(2px);box-shadow:0 2px 0 var(--kayisi-koyu)}
.btn.alt{background:transparent;color:var(--aras);box-shadow:inset 0 0 0 2px var(--aras)}
.btn.alt:hover{background:var(--aras);color:#fff}
.btns{display:flex;gap:var(--s2);flex-wrap:wrap}
svg.i{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.serp{background:#fff;border:1px solid var(--cizgi);border-radius:8px;padding:var(--s3);box-shadow:8px 8px 0 var(--aras);font-size:15px}
.serp small{color:#5b524b}.serp b{display:block;color:#1a4f8b;font-size:19px;font-weight:500;margin:var(--s1) 0}
.serp .q{border:1px solid var(--cizgi);border-radius:24px;padding:var(--s1) var(--s2);margin-bottom:var(--s3);color:#5b524b}
.serp hr{border:0;border-top:1px solid var(--cizgi);margin:var(--s2) 0}
.dark{background:var(--aras);color:#fff}
.dark h2{color:#fff}
.split{display:grid;gap:var(--s4);grid-template-columns:1fr}
.card{background:#fff;border:1px solid var(--cizgi);border-radius:8px;padding:var(--s4);transition:border-color .2s,box-shadow .2s}
.card:hover{border-color:var(--kayisi);box-shadow:0 8px 24px rgba(180,68,31,.15)}
.card .i{color:var(--kayisi);width:32px;height:32px;margin-bottom:var(--s2)}
.grid{display:grid;gap:var(--s3);grid-template-columns:1fr}
.steps{list-style:none;padding:0;counter-reset:s}
.steps li{counter-increment:s;display:grid;grid-template-columns:64px 1fr;gap:var(--s2);padding:var(--s3) 0;border-top:1px solid var(--cizgi)}
.steps li:before{content:counter(s,decimal-leading-zero);font:700 40px var(--baslik);color:var(--kayisi)}
.big{font:700 clamp(28px,5vw,48px) var(--baslik);color:var(--kayisi-koyu)}
footer{background:var(--murekkep);color:#e9e0d3;padding:var(--s6) 0;font-size:15px}
footer a{color:#fff}
footer .w{display:grid;gap:var(--s3)}
.call{position:fixed;right:var(--s2);bottom:var(--s2);z-index:9}
@media(min-width:800px){
.hero .w{grid-template-columns:1.3fr .8fr;align-items:end}
.split{grid-template-columns:1fr 2fr}
.grid{grid-template-columns:1.4fr 1fr 1fr}
footer .w{grid-template-columns:2fr 1fr 1fr}
.call{display:none}}

.art{width:100%;height:auto;border-radius:8px;box-shadow:8px 8px 0 var(--aras);display:block}
.crumb{font-size:14px;color:#5b524b;margin-bottom:var(--s3)}.crumb a{color:var(--kayisi-koyu)}
.prose{max-width:42em}.prose p{margin-bottom:var(--s2)}.prose h2{margin-top:var(--s6)}
.tick{list-style:none;padding:0;display:grid;gap:var(--s2)}
.tick li{padding-left:var(--s4);position:relative}
.tick li:before{content:"";position:absolute;left:0;top:9px;width:16px;height:8px;border-left:3px solid var(--kayisi);border-bottom:3px solid var(--kayisi);transform:rotate(-45deg)}
details{border-top:1px solid var(--cizgi);padding:var(--s3) 0}
details:last-of-type{border-bottom:1px solid var(--cizgi)}
summary{font:600 20px var(--baslik);cursor:pointer}summary:hover{color:var(--kayisi)}
details p{margin-top:var(--s2);max-width:40em}
a.card{display:block;text-decoration:none}
a.card h3{color:var(--kayisi-koyu)}
.more{display:inline-flex;gap:var(--s1);align-items:center;font-weight:600;color:var(--aras);margin-top:var(--s2)}
.hero.sm{padding:var(--s6) 0}
/* ---- hareket ve efekt katmanı ---- */
header{position:sticky;top:0;z-index:20;background:rgba(246,240,230,.94);backdrop-filter:blur(8px);transition:box-shadow .3s}
header.sc{box-shadow:0 8px 24px rgba(31,26,23,.1)}
#bar{position:fixed;top:0;left:0;right:0;height:3px;background:var(--kayisi);transform-origin:0 50%;transform:scaleX(0);z-index:30}
nav a{position:relative}nav a:hover,nav a[aria-current]{border-color:transparent}
nav a:after{content:"";position:absolute;left:50%;right:50%;bottom:-2px;height:2px;background:var(--kayisi);transition:left .25s,right .25s}
nav a:hover:after,nav a[aria-current]:after{left:0;right:0}
.hero{position:relative;overflow:hidden;background:radial-gradient(800px 420px at 90% 0,rgba(180,68,31,.16),transparent 60%),radial-gradient(640px 380px at 0 100%,rgba(31,77,74,.14),transparent 60%)}
.hero:before{content:"";position:absolute;inset:0;background-image:radial-gradient(var(--cizgi) 1.5px,transparent 1.5px);background-size:24px 24px;-webkit-mask-image:linear-gradient(90deg,transparent 30%,#000);mask-image:linear-gradient(90deg,transparent 30%,#000);pointer-events:none}
.hero .w{position:relative}
@keyframes up{from{opacity:0;transform:translateY(32px)}}
@keyframes pop{from{opacity:0;transform:translateY(24px) scale(.94) rotate(-1.5deg)}}
.crumb,.hero h1,.hero .lead,.hero .btns,.hero .big{animation:up .8s cubic-bezier(.2,.7,.2,1) both}
.crumb{animation-delay:.05s}.hero h1{animation-delay:.15s}.hero .lead{animation-delay:.3s}.hero .btns{animation-delay:.45s}
.art{animation:pop 1s .3s cubic-bezier(.2,.7,.2,1) both}
mark{color:inherit;background:linear-gradient(var(--kayisi),var(--kayisi)) no-repeat 0 92%/0 .16em;animation:hl 1s 1s forwards}
@keyframes hl{to{background-size:100% .16em}}
.art *{transform-box:fill-box;transform-origin:center}
.sun{animation:sun 6s ease-in-out infinite alternate}@keyframes sun{to{transform:translateY(12px) scale(1.06)}}
.cloud{animation:cl 14s ease-in-out infinite alternate}@keyframes cl{to{transform:translateX(70px)}}
.tr{animation:sw 3s ease-in-out infinite alternate}@keyframes sw{to{transform:translateY(-5px)}}
.btn{position:relative;overflow:hidden}.btn.call{position:fixed}
.btn:after{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.4),transparent);transform:skewX(-20deg);transition:left .6s}
.btn:hover:after{left:130%}
.btn svg{transition:transform .25s}.btn:hover svg,.more:hover svg{transform:translateX(4px)}
.call{animation:pl 2.4s infinite}@keyframes pl{0%{box-shadow:0 4px 0 var(--kayisi-koyu),0 0 0 0 rgba(180,68,31,.5)}70%,100%{box-shadow:0 4px 0 var(--kayisi-koyu),0 0 0 18px rgba(180,68,31,0)}}
.ticker{overflow:hidden;background:var(--murekkep);color:var(--kagit);padding:var(--s2) 0;white-space:nowrap;font:600 15px var(--govde);letter-spacing:.12em;text-transform:uppercase}
.tk{display:flex;width:max-content;animation:tk 30s linear infinite}.ticker:hover .tk{animation-play-state:paused}
.tk span{display:inline-flex;align-items:center;gap:var(--s4);padding-right:var(--s4)}
.tk span:after{content:"";width:8px;height:8px;border-radius:50%;background:var(--kayisi)}
@keyframes tk{to{transform:translateX(-50%)}}
.card{position:relative;overflow:hidden}
.card>*{position:relative}
.card:before{content:"";position:absolute;inset:0;background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),rgba(180,68,31,.16),transparent 60%);opacity:0;transition:opacity .3s}
.card:hover{transform:translateY(-6px)}.card:hover:before{opacity:1}
.card{transition:border-color .2s,box-shadow .3s,transform .3s}
.card svg.i{transition:transform .4s}.card:hover svg.i{transform:rotate(-8deg) scale(1.15)}
.rv{opacity:0;transform:translateY(32px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
.rv.in{opacity:1;transform:none}
.card.rv.in{transition:opacity .7s,transform .3s,border-color .2s,box-shadow .3s}
.steps li:before{transition:transform .6s cubic-bezier(.3,1.6,.5,1)}
.steps li.rv:before{transform:scale(.3)}.steps li.in:before{transform:none}
.tick li.rv:before{transform:rotate(-45deg) scale(0)}.tick li.in:before{transform:rotate(-45deg);transition:transform .4s .25s}
summary{list-style:none;display:flex;justify-content:space-between;gap:var(--s2)}summary::-webkit-details-marker{display:none}
summary:after{content:"+";font-size:28px;line-height:1;color:var(--kayisi);transition:transform .3s}
details[open] summary:after{transform:rotate(45deg)}details[open] p{animation:up .4s both}
.dark{position:relative;overflow:hidden}
.dark:before,.dark:after{content:"";position:absolute;width:420px;height:420px;border-radius:50%;filter:blur(70px);opacity:.45;animation:bl 14s ease-in-out infinite alternate}
.dark:before{background:var(--kayisi);left:-120px;top:-160px}.dark:after{background:#2D6661;right:-100px;bottom:-200px;animation-delay:-7s}
@keyframes bl{to{transform:translate(120px,60px) scale(1.2)}}
.dark .w{position:relative;z-index:1}
.big a{display:inline-block;transition:transform .3s}.big a:hover{transform:scale(1.04)}

/* ---- hamburger menü ---- */
.burger{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:6px;width:48px;height:48px;padding:0;background:transparent;border:2px solid var(--kayisi);border-radius:4px;cursor:pointer;transition:background .2s}
.burger:hover{background:rgba(180,68,31,.1)}
.burger span{display:block;width:24px;height:2px;background:var(--kayisi-koyu);transition:transform .3s,opacity .2s}
header.open .burger span:nth-child(1){transform:translateY(8px) rotate(45deg)}
header.open .burger span:nth-child(2){opacity:0}
header.open .burger span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
#menu{display:none;position:absolute;left:0;right:0;top:100%;flex-direction:column;gap:0;padding:var(--s1) var(--s3) var(--s3);background:var(--kagit);border-bottom:1px solid var(--cizgi);box-shadow:0 16px 24px rgba(31,26,23,.12);font-size:18px}
header.open #menu{display:flex;animation:up .3s both}
#menu a{padding:var(--s2) 0;border-bottom:1px solid var(--cizgi)}
#menu a:after{display:none}
#menu a[aria-current]{color:var(--kayisi-koyu);font-weight:600}
@media(min-width:800px){
.burger{display:none}
#menu{display:flex;position:static;flex-direction:row;gap:var(--s3);padding:0;background:none;border:0;box-shadow:none;font-size:15px}
#menu a{padding:var(--s1) 0;border-bottom:2px solid transparent}
#menu a:after{display:block}}
/* ---- fotoğraf, ekstra hareket ---- */
.hv{position:relative;padding-bottom:var(--s4)}
.foto{margin:0;border-radius:8px;overflow:hidden;box-shadow:8px 8px 0 var(--aras);background:var(--cizgi)}
.foto img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;animation:kb 20s ease-in-out infinite alternate}
@keyframes kb{to{transform:scale(1.1)}}
.hv .foto{animation:wipe 1.3s .2s cubic-bezier(.2,.7,.2,1) both}
@keyframes wipe{from{clip-path:inset(0 100% 0 0)}}
.foto.rv{opacity:1;transform:none}
.foto.rv img{clip-path:inset(0 100% 0 0);transition:clip-path 1.2s cubic-bezier(.2,.7,.2,1)}
.foto.in img{clip-path:inset(0)}
.chip{position:absolute;display:inline-flex;align-items:center;gap:var(--s1);padding:var(--s1) var(--s2);background:#fff;border:1px solid var(--cizgi);border-radius:999px;font:600 14px var(--govde);box-shadow:0 8px 24px rgba(180,68,31,.22);animation:fl 5s ease-in-out infinite alternate,up .8s 1s both;color:var(--murekkep)}
.chip svg.i{width:18px;height:18px;color:var(--kayisi)}
.c1{top:var(--s2);left:var(--s2)}.c2{right:var(--s2);top:42%;animation-delay:-2s,1.2s}.c3{left:var(--s2);bottom:0;animation-delay:-4s,1.4s}
@keyframes fl{to{transform:translateY(-12px)}}
.mini{position:absolute;right:var(--s2);bottom:0;width:150px;padding:var(--s2);background:#fff;border:1px solid var(--cizgi);border-radius:8px;box-shadow:0 8px 24px rgba(31,26,23,.18);display:grid;gap:var(--s1);animation:fl 6s ease-in-out infinite alternate -1s}
.mini i{height:8px;width:40%;border-radius:4px;background:var(--kayisi)}
.mini b{height:8px;border-radius:4px;background:linear-gradient(90deg,var(--cizgi) 30%,#fff 50%,var(--cizgi) 70%) 0 0/200% 100%;animation:sh 1.6s linear infinite}
.mini b:nth-of-type(2){width:80%}.mini b:nth-of-type(3){width:60%}
@keyframes sh{to{background-position:-200% 0}}
.hero:after{content:"";position:absolute;right:-140px;top:-140px;width:420px;height:420px;border:2px dashed rgba(180,68,31,.3);border-radius:50%;animation:sp 40s linear infinite;pointer-events:none}
@keyframes sp{to{transform:rotate(360deg)}}
.hero{--hx:50%;--hy:50%}
.hero .w:before{content:"";position:absolute;inset:-96px -24px;background:radial-gradient(380px circle at var(--hx) var(--hy),rgba(180,68,31,.1),transparent 60%);pointer-events:none}
#tw{border-right:3px solid var(--kayisi);padding-right:4px;animation:cr .8s steps(1) infinite}
@keyframes cr{50%{border-color:transparent}}
.g2,.sp2{display:grid;gap:var(--s3)}
.tint{background:rgba(180,68,31,.06)}
.sp2{align-items:center;gap:var(--s6)}
main h2.rv:after{content:"";display:block;width:0;height:4px;margin-top:var(--s2);background:var(--kayisi);transition:width .9s .3s}
main h2.in:after{width:64px}.dark h2.rv:after{background:#fff}
.card.rv .i *{stroke-dasharray:120;stroke-dashoffset:120}
.card.in .i *{animation:dr 1.4s .3s forwards}
@keyframes dr{to{stroke-dashoffset:0}}
.rv.l{transform:translateX(-48px)}.rv.r{transform:translateX(48px)}.rv.z{transform:scale(.88)}
.rv.in.l,.rv.in.r,.rv.in.z{transform:none}
.btn{will-change:transform}
.steps li:hover:before{transform:scale(1.15) rotate(-6deg)}
.steps li{transition:background .3s,padding-left .3s}.steps li:hover{background:rgba(180,68,31,.06);padding-left:var(--s2)}
.tick li{transition:transform .25s}.tick li:hover{transform:translateX(8px)}
.logo{transition:letter-spacing .3s}.logo:hover{letter-spacing:.04em}
@media(min-width:800px){.g2{grid-template-columns:1fr 1fr}.sp2{grid-template-columns:1fr 1fr}.sp2.rev>:first-child{order:0}.hero .w{grid-template-columns:1.1fr 1fr}#menu{gap:var(--s2)}}
@media(max-width:799px){.chip{font-size:13px}.mini{width:120px}}
/* ---- ek animasyon katmanı ---- */
#cur{position:fixed;inset:0;background:var(--kayisi);z-index:100;transform:translateY(-100%);pointer-events:none;display:grid;place-items:center;color:#fff;font:700 28px var(--baslik)}
#cur.in-load{animation:cin .8s .05s cubic-bezier(.7,0,.2,1) both;transform:translateY(0)}
@keyframes cin{from{transform:translateY(0)}to{transform:translateY(-100%)}}
#cur.go{transform:translateY(0);transition:transform .45s cubic-bezier(.7,0,.2,1)}
.wd{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.08em}
.wd>span{display:inline-block;transform:translateY(115%);transition:transform .8s cubic-bezier(.2,.7,.2,1);transition-delay:calc(var(--i)*70ms)}
h2.in .wd>span{transform:none}
.card{transform-style:preserve-3d}
.card:hover{transform:perspective(800px) translateY(-6px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg))}
.rp{position:absolute;border-radius:50%;background:rgba(255,255,255,.5);width:20px;height:20px;transform:scale(0);animation:rpl .7s ease-out forwards;pointer-events:none}
@keyframes rpl{to{transform:scale(18);opacity:0}}
.top{position:fixed;left:var(--s2);bottom:var(--s2);width:48px;height:48px;border-radius:50%;border:2px solid var(--kayisi);background:var(--kagit);color:var(--kayisi-koyu);display:grid;place-items:center;cursor:pointer;opacity:0;transform:translateY(24px) scale(.6);transition:opacity .3s,transform .4s cubic-bezier(.3,1.6,.5,1);z-index:9}
.top.on{opacity:1;transform:none}.top:hover{background:var(--kayisi);color:#fff;transform:translateY(-4px)}
.top svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.pt{position:absolute;bottom:-20px;border-radius:50%;background:rgba(255,255,255,.35);animation:ptu linear infinite;pointer-events:none}
@keyframes ptu{to{transform:translateY(-420px) translateX(var(--dx,20px));opacity:0}}
.ticker.rv2{background:var(--kayisi);color:#fff}.ticker.rv2 .tk{animation-direction:reverse;animation-duration:36s}.ticker.rv2 .tk span:after{background:#fff}
.steps{position:relative}
.steps:before{content:"";position:absolute;left:31px;top:0;bottom:0;width:2px;background:var(--cizgi)}
.steps:after{content:"";position:absolute;left:31px;top:0;bottom:0;width:2px;background:var(--kayisi);transform-origin:top;transform:scaleY(var(--p,0))}
.steps li:before{background:var(--kagit);position:relative;z-index:1;text-align:center}
.prose a:not(.more):not(.btn){text-decoration:none;font-weight:600;color:var(--kayisi-koyu);background:linear-gradient(currentColor,currentColor) 0 100%/0 2px no-repeat;transition:background-size .3s}
.prose a:not(.more):not(.btn):hover{background-size:100% 2px}
.foto{position:relative}
.foto:after{content:"";position:absolute;top:0;left:-70%;width:40%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent);transform:skewX(-20deg);transition:left .8s;pointer-events:none}
.foto:hover:after{left:130%}.foto:hover img{filter:saturate(1.15)}
footer a{display:inline-block;transition:transform .2s,color .2s}footer a:hover{transform:translateX(6px);color:#F0A07F}
.g2 .card:nth-child(odd){animation:bob 7s ease-in-out infinite alternate}.g2 .card:nth-child(even){animation:bob 8s ease-in-out infinite alternate-reverse}
@keyframes bob{to{translate:0 -6px}}
.logo{background:linear-gradient(90deg,var(--kayisi-koyu),var(--aras),var(--kayisi-koyu)) 0 0/200% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:lg 6s linear infinite}
.logo span{-webkit-text-fill-color:transparent}
@keyframes lg{to{background-position:-200% 0}}
.lead{position:relative}
.chip:hover{animation-play-state:paused,running;transform:scale(1.08)}
mark{position:relative}
.tint{position:relative;overflow:hidden}.tint>.w{position:relative}
.tint:before{content:"";position:absolute;left:-80px;top:-80px;width:240px;height:240px;border-radius:50%;border:2px dashed rgba(31,77,74,.25);animation:sp 50s linear infinite reverse}
.dark{background-image:linear-gradient(120deg,rgba(255,255,255,.04) 25%,transparent 25% 50%,rgba(255,255,255,.04) 50% 75%,transparent 75%);background-size:48px 48px;animation:mv 6s linear infinite}
@keyframes mv{to{background-position:48px 0}}
details{transition:background .3s,padding-left .3s}details[open],details:hover{background:rgba(180,68,31,.05);padding-left:var(--s2)}