@font-face{font-family:"Satoshi";src:url(/assets/fonts/Satoshi-Black.woff2) format("woff2");font-weight:900;font-display:swap}
@font-face{font-family:"Satoshi";src:url(/assets/fonts/Satoshi-Bold.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Satoshi";src:url(/assets/fonts/Satoshi-Medium.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"General Sans";src:url(/assets/fonts/GeneralSans-Regular.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"General Sans";src:url(/assets/fonts/GeneralSans-Medium.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"General Sans";src:url(/assets/fonts/GeneralSans-Semibold.woff2) format("woff2");font-weight:600;font-display:swap}

:root{
  --domates:#FF5A36;
  --domates-koyu:#E8441F;
  --tebesir:#FBF6EC;
  --tebesir-koyu:#EFE6D4;
  --mor:#2E1A47;
  --mor-derin:#1F1131;
  --mor-yumusak:#4A3A5E;
  --lila:#CFC3DD;
  --sari:#FFCF33;
  --baslik:"Satoshi",system-ui,sans-serif;
  --metin:"General Sans",system-ui,sans-serif;
  --kenar:clamp(1rem,5vw,4.5rem);
  --ease-out:cubic-bezier(.23,1,.32,1);
  --golge:0 22px 44px -18px rgba(31,17,49,.55),0 6px 14px -6px rgba(31,17,49,.35);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--tebesir);color:var(--mor-derin);font:400 1.0625rem/1.6 var(--metin);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,video{display:block;max-width:100%;height:auto}
h1,h2,h3{font-family:var(--baslik);font-weight:900;margin:0;text-wrap:balance}
p{margin:0}
a{color:inherit}
::selection{background:var(--sari);color:var(--mor-derin)}
:focus-visible{outline:3px solid var(--sari);outline-offset:3px;border-radius:4px}
html{scrollbar-color:var(--mor) var(--tebesir-koyu)}
.gizli{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.atla{position:fixed;left:1rem;top:-4rem;z-index:100;background:var(--sari);color:var(--mor-derin);padding:.7rem 1rem;border-radius:10px;font-weight:600;text-decoration:none}
.atla:focus{top:1rem}
.kap{padding-inline:var(--kenar);max-width:1440px;margin-inline:auto}

/* Düğmeler */
.dugme{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:3.25rem;padding:.85rem 1.6rem;border-radius:999px;background:var(--mor-derin);color:var(--tebesir);font:700 1.0625rem/1 var(--baslik);text-decoration:none;border:2px solid var(--mor-derin);transition:background-color .2s ease,color .2s ease,transform .16s var(--ease-out)}
.dugme:hover{background:var(--mor)}
.dugme:active{transform:scale(.97)}
.dugme-cizgi{background:transparent;color:var(--mor-derin)}
.dugme-cizgi:hover{background:var(--mor-derin);color:var(--tebesir)}
.dugme-kucuk{min-height:2.75rem;padding:.6rem 1.15rem;font-size:.975rem;background:var(--tebesir);color:var(--mor-derin);border-color:var(--tebesir)}
.dugme-kucuk:hover{background:var(--sari);border-color:var(--sari)}

/* Bant ve kart */
.bant{position:absolute;top:-14px;left:50%;width:112px;height:32px;translate:-50% 0;rotate:-3deg;background:rgba(251,246,236,.72);box-shadow:0 1px 2px rgba(31,17,49,.15);
  clip-path:polygon(0 8%,4% 0,8% 10%,12% 2%,88% 0,92% 9%,96% 1%,100% 10%,100% 92%,96% 100%,92% 90%,88% 98%,12% 100%,8% 91%,4% 99%,0 90%);z-index:2}
.kart{position:absolute;margin:0}
.kart img{border-radius:3px;box-shadow:var(--golge)}

/* Üst menü */
.ust{position:fixed;inset:0 0 auto;z-index:50;display:flex;align-items:center;gap:2rem;padding:1rem var(--kenar);transition:background-color .3s ease,padding .3s var(--ease-out)}
.ust.dolu{background:var(--mor-derin);padding-block:.6rem}
.ust-logo img{width:58px;transition:width .3s var(--ease-out)}
.ust.dolu .ust-logo img{width:46px}
.ust-menu{display:flex;gap:1.75rem;margin-left:auto}
.ust-menu a{font:500 1rem/1 var(--baslik);color:var(--mor-derin);text-decoration:none;padding:.5rem 0;background:linear-gradient(currentColor,currentColor) 0 100%/0 2px no-repeat;transition:background-size .25s var(--ease-out),color .3s}
.ust-menu a:hover{background-size:100% 2px}
.ust.dolu .ust-menu a{color:var(--tebesir)}

/* Giriş */
.giris{position:relative;min-height:100svh;display:grid;grid-template-columns:1.05fr 1fr;align-items:center;gap:3vw;padding:6.5rem var(--kenar) 3.5rem;background:var(--domates) url(/assets/img/kagit.jpg) center/cover;overflow:hidden}
.giris-logo{width:clamp(170px,14vw,240px);margin:0 0 1.8rem -1%;filter:drop-shadow(0 10px 18px rgba(120,25,0,.28))}
.giris h1{font-size:clamp(1.9rem,3.2vw,3.4rem);line-height:1.04;letter-spacing:-.035em;max-width:17ch;color:var(--mor-derin)}
.giris-alt{margin-top:1.25rem;font-size:clamp(1.0625rem,1.3vw,1.2rem);max-width:44ch;color:var(--mor-derin)}
.giris-dugmeler{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:2rem}
.giris-sag{position:relative;height:min(80vh,700px)}
.telefon{position:absolute;left:50%;top:50%;translate:-50% -50%;width:clamp(200px,19vw,290px);aspect-ratio:9/19.3;border-radius:clamp(30px,3vw,44px);border:clamp(7px,.7vw,10px) solid var(--mor-derin);background:var(--mor-derin);overflow:hidden;box-shadow:0 40px 70px -24px rgba(31,17,49,.7);z-index:3}
.telefon video,.telefon img{width:100%;height:100%;object-fit:cover;border-radius:clamp(22px,2.3vw,34px)}
.kart-a{width:42%;left:0;top:6%;rotate:-8deg;z-index:2}
.kart-b{width:40%;right:0;bottom:4%;rotate:7deg;z-index:4}
.kart-b .bant{rotate:4deg;left:40%}

/* İşler */
.isler{background:var(--tebesir)}
.isler-sabit{display:flex;align-items:center;min-height:100vh;overflow:hidden;padding-block:6rem}
.isler-ray{display:flex;align-items:center;gap:clamp(1.5rem,3vw,3.5rem);padding-inline:var(--kenar);will-change:transform}
.isler-giris{flex:none;width:clamp(280px,30vw,440px)}
.isler-giris h2{font-size:clamp(2.4rem,5vw,4.75rem);line-height:.98;letter-spacing:-.04em}
.isler-giris p{margin-top:1.25rem;max-width:36ch;color:var(--mor-yumusak)}
.is{flex:none;width:clamp(230px,23vw,340px);margin:0}
.is img{border-radius:3px;box-shadow:var(--golge)}
.is:nth-of-type(odd){rotate:-2.2deg;translate:0 -18px}
.is:nth-of-type(even){rotate:1.8deg;translate:0 22px}
.is:nth-of-type(3n){rotate:-.8deg}
.is figcaption{margin-top:1rem;font:700 1.05rem/1.2 var(--baslik)}

/* Hizmetler */
.hizmetler{position:relative;background:var(--mor-derin);color:var(--tebesir);padding:clamp(5rem,10vw,9rem) 0}
.hizmetler h2{font-size:clamp(2.4rem,6vw,5.6rem);line-height:.98;letter-spacing:-.04em;max-width:15ch}
.bolum-alt{margin-top:1.4rem;max-width:52ch;color:var(--lila);font-size:1.125rem}
.hizmet-grup{display:grid;grid-template-columns:minmax(150px,240px) 1fr;gap:2rem;max-width:1440px;margin:clamp(3rem,6vw,5rem) auto 0;padding-inline:var(--kenar)}
.grup-ad{font:700 1.15rem/1.3 var(--baslik);color:var(--sari);padding-top:1.6rem;border-top:1px solid rgba(251,246,236,.22)}
.hizmet-liste{list-style:none;margin:0;padding:0;border-top:1px solid rgba(251,246,236,.22)}
.hizmet{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1.3fr) 6.5rem;gap:1.5rem 2rem;align-items:baseline;padding:1.5rem 0;border-bottom:1px solid rgba(251,246,236,.12)}
.hizmet-ad{font:700 clamp(1.35rem,2.2vw,2.1rem)/1.1 var(--baslik);letter-spacing:-.02em;transition:translate .35s var(--ease-out),color .25s ease}
.hizmet-ne{color:var(--lila);max-width:52ch}
.hizmet-tur{justify-self:end;font:500 .95rem/1 var(--baslik);color:var(--domates)}
@media (hover:hover){.hizmet:hover .hizmet-ad{translate:10px 0;color:var(--sari)}}
.onizleme{position:fixed;left:0;top:0;width:240px;border-radius:6px;pointer-events:none;opacity:0;z-index:40;box-shadow:0 30px 60px -20px rgba(0,0,0,.6);transition:opacity .2s ease;rotate:-4deg}
.onizleme.acik{opacity:1}

/* Vitrinler */
.vitrin{padding:clamp(5rem,10vw,9rem) 0;overflow:hidden}
.vitrin-ic{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.3fr);gap:clamp(2.5rem,6vw,6rem);align-items:center}
.vitrin h2{font-size:clamp(2.2rem,4.6vw,4.25rem);line-height:1;letter-spacing:-.04em;max-width:13ch}
.vitrin-yazi p{margin-top:1.4rem;max-width:46ch;font-size:1.125rem}
.vitrin-reels{background:var(--sari)}
.serit{display:flex;gap:12px;will-change:transform}
.serit img{flex:1 1 0;min-width:0;aspect-ratio:9/16;object-fit:cover;border-radius:12px;box-shadow:0 18px 30px -16px rgba(31,17,49,.6)}
.serit img:nth-child(even){translate:0 38px}
.vitrin-kaydirma{background:var(--tebesir)}
.vitrin-kaydirma .vitrin-ic{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.vitrin-kaydirma .vitrin-yazi{order:2}
.deste{position:relative;width:min(440px,100%);aspect-ratio:4/5;justify-self:center;cursor:pointer;outline-offset:8px}
.deste img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:6px;box-shadow:var(--golge);transition:transform .55s var(--ease-out),opacity .4s ease}
.deste-dugmeler{display:flex;align-items:center;gap:1rem;margin-top:2rem}
.deste-dugmeler button{width:3.25rem;height:3.25rem;border-radius:50%;border:0;background:var(--mor-derin);cursor:pointer;display:grid;place-items:center;transition:background-color .2s,transform .16s var(--ease-out)}
.deste-dugmeler button:hover{background:var(--domates)}
.deste-dugmeler button:active{transform:scale(.94)}
.deste-dugmeler svg{width:22px;height:22px;fill:none;stroke:var(--tebesir);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.deste-sayi{font:700 1rem/1 var(--baslik);min-width:3.2rem;text-align:center;font-variant-numeric:tabular-nums}

.vitrin-web{background:var(--mor);color:var(--tebesir)}
.vitrin-web .vitrin-yazi p{color:var(--lila)}
.site-ornekler{list-style:none;padding:0;margin:2rem 0 0;display:grid;gap:1rem}
.site-ornekler a{font:700 1.3rem/1.2 var(--baslik);color:var(--sari);text-underline-offset:5px;text-decoration-thickness:2px}
.site-ornekler a:hover{color:var(--tebesir)}
.site-ornekler span{display:block;color:var(--lila);font-size:.975rem;margin-top:.2rem}
.web-sahne{position:relative;aspect-ratio:16/12}
.tarayici{position:absolute;margin:0;background:var(--tebesir);border-radius:12px;overflow:hidden;box-shadow:0 40px 70px -28px rgba(0,0,0,.65)}
.tarayici-ust{display:flex;align-items:center;gap:6px;height:30px;padding:0 12px;background:var(--tebesir-koyu)}
.tarayici-ust i{width:9px;height:9px;border-radius:50%;background:rgba(46,26,71,.25)}
.tarayici-ust span{margin-inline:auto;translate:-14px 0;font:500 .75rem/1 var(--metin);color:var(--mor-yumusak);background:var(--tebesir);padding:.3rem .9rem;border-radius:99px}
.tarayici-arka{width:70%;top:0;right:0;rotate:2.5deg;opacity:.92}
.tarayici-on{width:80%;left:0;top:24%;z-index:2}
.telefon-web{left:auto;top:auto;right:2%;bottom:0;translate:none;width:22%;min-width:120px;rotate:4deg;border-width:7px;border-radius:26px}
.telefon-web img{border-radius:19px;object-position:top}

/* Süreç */
.surec{background:var(--domates) url(/assets/img/kagit.jpg) center/cover;padding:clamp(5rem,10vw,9rem) 0}
.surec-ic{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.3fr);grid-template-areas:"baslik kagit" "cikartma kagit";gap:2rem clamp(2.5rem,6vw,6rem);align-items:start}
.surec h2{grid-area:baslik;font-size:clamp(2.4rem,5vw,4.75rem);line-height:.98;letter-spacing:-.04em;max-width:10ch}
.kagit-kap{grid-area:kagit;position:relative;rotate:-1.2deg;filter:drop-shadow(0 26px 30px rgba(120,25,0,.35))}
.kagit{background:var(--tebesir);padding:clamp(2rem,4vw,3.5rem) clamp(1.5rem,4vw,3.5rem) clamp(3rem,5vw,4.5rem);
  -webkit-mask:linear-gradient(#000 0 0) top/100% calc(100% - 13px) no-repeat,conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) bottom/24px 13px repeat-x;
  mask:linear-gradient(#000 0 0) top/100% calc(100% - 13px) no-repeat,conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) bottom/24px 13px repeat-x}
.adimlar{list-style:none;margin:0;padding:0;counter-reset:adim}
.adimlar li{counter-increment:adim;display:grid;grid-template-columns:3.5rem 1fr;gap:0 1rem;padding:1.6rem 0;border-bottom:1.5px dashed rgba(31,17,49,.22)}
.adimlar li:last-child{border-bottom:0}
.adimlar li::before{content:counter(adim);grid-row:span 2;font:900 3rem/.9 var(--baslik);color:var(--domates)}
.adimlar h3{font-size:clamp(1.3rem,2vw,1.7rem);line-height:1.15;letter-spacing:-.02em}
.adimlar p{margin-top:.45rem;color:var(--mor-yumusak);max-width:50ch}
.cikartma{grid-area:cikartma;justify-self:start;max-width:22ch;background:var(--sari);color:var(--mor-derin);font:700 1.2rem/1.3 var(--baslik);padding:1.2rem 1.4rem;border-radius:16px;rotate:3deg;box-shadow:0 18px 30px -14px rgba(120,25,0,.5)}

/* Sorular */
.sorular{padding:clamp(5rem,10vw,9rem) 0;background:var(--tebesir)}
.sorular-ic{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.5fr);gap:clamp(2rem,6vw,6rem);align-items:start}
.sorular h2{font-size:clamp(2.4rem,5vw,4.75rem);line-height:.98;letter-spacing:-.04em;max-width:9ch;position:sticky;top:7rem}
.sss details{border-bottom:1.5px solid rgba(31,17,49,.14)}
.sss details:first-child{border-top:1.5px solid rgba(31,17,49,.14)}
.sss summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:1.5rem;padding:1.5rem 0;font:700 clamp(1.15rem,1.7vw,1.4rem)/1.25 var(--baslik)}
.sss summary::-webkit-details-marker{display:none}
.sss summary::after{content:"";flex:none;width:2.25rem;height:2.25rem;border-radius:50%;background:var(--mor-derin) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 6v12M6 12h12' stroke='%23FBF6EC' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") center/18px no-repeat;transition:rotate .3s var(--ease-out),background-color .2s}
.sss details[open] summary::after{rotate:45deg;background-color:var(--domates)}
.sss summary:hover::after{background-color:var(--domates)}
.sss details p{padding:0 3.5rem 1.6rem 0;color:var(--mor-yumusak);max-width:62ch}

/* Son */
.son{background:var(--sari);padding:clamp(5rem,12vw,10rem) var(--kenar) clamp(4rem,9vw,7rem);overflow:hidden}
.son-ust{font:700 clamp(1.2rem,2vw,1.6rem)/1.3 var(--baslik);max-width:30ch}
.son-hesap{display:inline-block;margin:.6rem 0 .4rem -.05em;font:900 clamp(3.2rem,13.5vw,13rem)/.95 var(--baslik);letter-spacing:-.04em;color:var(--mor-derin);text-decoration:none;background:linear-gradient(var(--domates),var(--domates)) 0 92%/0 .08em no-repeat;transition:background-size .5s var(--ease-out),color .25s}
.son-hesap:hover{background-size:100% .08em;color:var(--mor)}
.son-alt{color:var(--mor-yumusak);max-width:46ch}

/* Alt */
.alt{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 2rem;padding:1.6rem var(--kenar);background:var(--mor-derin);color:var(--lila);font-size:.95rem}
.alt-logo{width:44px}
.alt a{text-decoration:none}
.alt a:hover{color:var(--tebesir)}
.alt-clopify{margin-left:auto;font-size:.8rem;opacity:.75}

/* Telefon ve tablet */
@media (max-width:980px){
  .ust-menu{display:none}
  .ust .dugme-kucuk{margin-left:auto}
  .giris{grid-template-columns:1fr;padding-top:6.5rem;min-height:auto;gap:2.5rem}
  .giris-logo{width:clamp(170px,42vw,260px);margin-bottom:1.6rem}
  .giris-sag{height:clamp(440px,120vw,640px)}
  .telefon{width:clamp(180px,46vw,250px)}
  .kart-a{width:44%;top:4%}
  .kart-b{width:42%;bottom:2%}
  .isler-sabit{min-height:0;padding-block:5rem;display:block}
  .isler-ray{overflow-x:auto;scroll-snap-type:x mandatory;padding-block:2.5rem 1.5rem;scrollbar-width:none;align-items:flex-start;flex-wrap:nowrap}
  .isler-ray::-webkit-scrollbar{display:none}
  .isler-giris{width:min(78vw,340px)}
  .is{width:min(68vw,300px);scroll-snap-align:center}
  .hizmet-grup{grid-template-columns:1fr;gap:0}
  .grup-ad{border-top:0;padding-top:0;margin-bottom:.8rem}
  .hizmet{grid-template-columns:1fr auto;gap:.5rem 1rem}
  .hizmet-ne{grid-column:1/-1;grid-row:2}
  .hizmet-tur{grid-column:2;grid-row:1}
  .vitrin-ic,.vitrin-kaydirma .vitrin-ic{grid-template-columns:1fr}
  .vitrin-kaydirma .vitrin-yazi{order:0}
  .serit{overflow-x:auto;padding-bottom:44px;margin-inline:calc(var(--kenar)*-1);padding-inline:var(--kenar);scrollbar-width:none}
  .serit img{flex:0 0 38vw}
  .surec-ic{grid-template-columns:1fr;grid-template-areas:"baslik" "kagit" "cikartma"}
  .cikartma{justify-self:end;margin-top:1rem}
  .sorular-ic{grid-template-columns:1fr}
  .sorular h2{position:static}
  .sss details p{padding-right:0}
}
@media (max-width:560px){
  .giris-dugmeler .dugme{flex:1 1 100%}
  .ust{gap:1rem}
  .ust-logo img{width:48px}
  .web-sahne{aspect-ratio:auto;height:118vw}
  .tarayici-arka{width:82%}
  .tarayici-on{width:92%;top:20%}
  .telefon-web{width:34%;bottom:2%}
  .alt-clopify{margin-left:0}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important}
}