/* Son Ambalaj ve Matbaacılık · Design By Hepsi Bir Teknoloji */
body{margin:0;background:#FFFFFF;color:#1E2328;font-family:'Inter',system-ui,sans-serif}
a{color:#1E2328}a:hover{color:#2CB3A3}
h1,h2,h3,h4{font-family:'Outfit',system-ui,sans-serif}
.ph{background-color:#EEF0EC;background-image:repeating-linear-gradient(135deg,rgba(30,35,40,.05) 0 2px,transparent 2px 14px)}
.navlink{text-decoration:none;font-weight:500;font-size:15px;padding:12px 4px;position:relative}
.navlink::after{content:"";position:absolute;left:4px;right:4px;bottom:6px;height:2px;background:#F08A24;transform:scaleX(0);transform-origin:left;transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.navlink:hover::after{transform:scaleX(1)}
.btn{text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 26px;border-radius:999px;font-weight:600;font-size:15px;transition:transform .25s ease,box-shadow .25s ease,background-color .25s ease,color .25s ease}
.btn:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(30,35,40,.18)}
.card{transition:transform .45s cubic-bezier(.2,.7,.2,1),box-shadow .45s cubic-bezier(.2,.7,.2,1)}
.card:hover{transform:translateY(-8px);box-shadow:0 26px 50px rgba(30,35,40,.14)}
.zoom{overflow:hidden}
.zoom img{transition:transform 1.1s cubic-bezier(.2,.7,.2,1)}
.zoom:hover img,.card:hover .zoom img{transform:scale(1.08)}
.pov{position:absolute;inset:0;display:flex;align-items:flex-end;justify-content:center;padding:18px;background:linear-gradient(to top,rgba(30,35,40,.72),rgba(30,35,40,0) 60%);opacity:0;transition:opacity .45s ease}
.pov span{transform:translateY(16px);transition:transform .45s cubic-bezier(.2,.7,.2,1)}
.card:hover .pov{opacity:1}
.card:hover .pov span{transform:translateY(0)}
.pbar{transition:width .5s cubic-bezier(.2,.7,.2,1)}
.card:hover .pbar{width:100% !important}
.arrow{transition:transform .3s ease}
.card:hover .arrow{transform:translateX(6px)}
.sbar{position:absolute;left:0;right:0;bottom:0;height:4px;transform:scaleX(0);transform-origin:left;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.card:hover .sbar{transform:scaleX(1)}
.sicon{transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.card:hover .sicon{transform:translateY(-4px) rotate(-8deg)}
.step{transition:transform .4s ease}
.step:hover{transform:translateY(-6px)}
.ref{filter:grayscale(1);opacity:.6;transition:filter .4s ease,opacity .4s ease,transform .4s ease}
.ref:hover{filter:none;opacity:1;transform:scale(1.04)}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes rise{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
.float{animation:float 6s ease-in-out infinite}
.rise{animation:rise .9s cubic-bezier(.2,.7,.2,1) both}
.rise2{animation:rise .9s .15s cubic-bezier(.2,.7,.2,1) both}
.rise3{animation:rise .9s .3s cubic-bezier(.2,.7,.2,1) both}
.wa{transition:transform .3s ease}
.wa:hover{transform:scale(1.08)}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(37,162,68,.45)}70%{box-shadow:0 0 0 16px rgba(37,162,68,0)}100%{box-shadow:0 0 0 0 rgba(37,162,68,0)}}
.wa{animation:pulse 2.4s ease-out infinite}
.hdr{backdrop-filter:saturate(1.4) blur(10px);-webkit-backdrop-filter:saturate(1.4) blur(10px)}
.shine{position:relative;overflow:hidden}
.shine::before{content:"";position:absolute;top:0;left:-75%;width:50%;height:100%;background:linear-gradient(100deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.45) 50%,rgba(255,255,255,0) 100%);transform:skewX(-20deg);transition:left .7s ease}
.shine:hover::before{left:130%}
.arrow2{transition:transform .3s ease}
.btn:hover .arrow2{transform:translateX(5px)}
.blob{position:absolute;border-radius:50%;filter:blur(60px);opacity:.22;pointer-events:none}
@keyframes float2{0%,100%{transform:translate(0,0)}50%{transform:translate(-24px,16px)}}
@keyframes float3{0%,100%{transform:translate(0,0)}50%{transform:translate(20px,-18px)}}
.float{animation:float 9s ease-in-out infinite}
.float2{animation:float2 11s ease-in-out infinite}
.float3{animation:float3 13s ease-in-out infinite}
@keyframes kb{from{transform:scale(1)}to{transform:scale(1.07)}}
.kb{animation:kb 14s ease-in-out infinite alternate}
@keyframes marq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.marq{animation:marq 38s linear infinite}
.rv{opacity:0;transform:translateY(44px);transition:opacity 1s cubic-bezier(.2,.7,.2,1),transform 1s cubic-bezier(.2,.7,.2,1)}
.rv-r{transform:translateX(60px)}
.rv.in{opacity:1;transform:none}
.rvg .rvi{opacity:0;transform:translateY(48px);transition-property:opacity,transform;transition-duration:.9s;transition-timing-function:cubic-bezier(.2,.7,.2,1)}
.rvg.in .rvi{opacity:1;transform:none}
.wipe{clip-path:inset(0 100% 0 0 round 24px);transition:clip-path 1.3s cubic-bezier(.7,0,.2,1)}
.wipe.in{clip-path:inset(0 0 0 0 round 24px)}
.wipe img{transform:scale(1.15);transition:transform 1.6s cubic-bezier(.2,.7,.2,1)}
.wipe.in img{transform:scale(1)}
.wipe.in:hover img{transform:scale(1.08)}
.fill{transform:scaleX(0);transform-origin:left;transition:transform 1.1s cubic-bezier(.2,.7,.2,1)}
.rvg.in .fill{transform:scaleX(1)}
.stno{transition:color .3s ease,transform .3s ease;display:inline-block}
.step:hover .stno{color:#1E2328;transform:translateX(6px)}
.ring{position:absolute;border-radius:50%;border:2px solid rgba(255,255,255,.35);animation:spin 30s linear infinite;pointer-events:none}
.ring2{border-style:dashed;animation-duration:22s;animation-direction:reverse}
@keyframes spin{to{transform:rotate(360deg)}}
.hbt{position:relative;transition:color .3s ease}
.hbt::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:2px;background:linear-gradient(90deg,#F08A24,#2CB3A3,#5DB85C,#E2232A);transform:scaleX(0);transform-origin:left;transition:transform .4s cubic-bezier(.2,.7,.2,1)}
.hbt:hover{color:#F5A65A !important}
.hbt:hover::after{transform:scaleX(1)}
.hin{transition:padding .35s ease}
.hlogo{transition:height .35s cubic-bezier(.2,.7,.2,1)}
.hdr{transition:box-shadow .35s ease}
.hdr.sc{box-shadow:0 10px 30px rgba(30,35,40,.08)}
.hdr.sc .hin{padding-top:6px !important;padding-bottom:6px !important}
.hdr.sc .hlogo{height:52px !important}
.burger{display:none;width:48px;height:48px;border-radius:14px;border:1.5px solid #1E2328;background:#FFFFFF;align-items:center;justify-content:center;cursor:pointer;padding:0}
@media (max-width:900px){.burger{display:inline-flex}.hdr .btn{padding:0 18px;font-size:14px}}
@keyframes fadein{from{opacity:0}to{opacity:1}}
@keyframes slidein{from{transform:translateX(100%)}to{transform:none}}
.mback{animation:fadein .3s ease both}
.mpanel{animation:slidein .45s cubic-bezier(.2,.7,.2,1) both}
.mlink{display:flex;align-items:center;justify-content:space-between;min-height:56px;font-family:'Outfit',sans-serif;font-size:22px;font-weight:500;text-decoration:none;color:#1E2328;border-bottom:1px solid #E6E8EA}
.mlink:hover{color:#1F8A7D}
.dlg{animation:dlg .5s cubic-bezier(.2,.7,.2,1) both}
@keyframes dlg{from{opacity:0;transform:translateY(30px) scale(.97)}to{opacity:1;transform:none}}
.dimg{animation:kb 14s ease-in-out infinite alternate}
.fqa{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s cubic-bezier(.2,.7,.2,1)}
.faq.open .fqa{grid-template-rows:1fr}
.fqi{transition:transform .35s ease,background-color .35s ease}
.faq.open .fqi{transform:rotate(45deg);background:#2CB3A3}
.faq{transition:box-shadow .3s ease,border-color .3s ease}
.faq:hover,.faq.open{box-shadow:0 14px 34px rgba(30,35,40,.08);border-color:transparent !important}
@media (max-width:900px){.hide-m{display:none !important}.stack-m{flex-direction:column !important;align-items:flex-start !important}.h1m{font-size:44px !important}}
.navlink:hover::after,.navlink.active::after{transform:scaleX(1)}
.ccard{transition:transform .45s cubic-bezier(.2,.7,.2,1),box-shadow .45s cubic-bezier(.2,.7,.2,1),border-color .45s ease}
.ccard:hover{transform:translateY(-8px);box-shadow:0 26px 50px rgba(30,35,40,.12);border-color:transparent}
.cicon{transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.ccard:hover .cicon{transform:scale(1.1) rotate(-8deg)}
.fld{min-height:52px;border-radius:12px;border:1.5px solid #D5D9DD;padding:0 16px;font:15px 'Inter',sans-serif;background:#FFFFFF;color:#1E2328;transition:border-color .25s ease,box-shadow .25s ease;box-sizing:border-box;width:100%}
.fld:focus{outline:none;border-color:#2CB3A3;box-shadow:0 0 0 4px rgba(44,179,163,.18)}
textarea.fld{padding:14px 16px;min-height:130px;resize:vertical}
@keyframes pin{0%,100%{transform:translate(-50%,-100%)}50%{transform:translate(-50%,-115%)}}
.pin{animation:pin 1.8s ease-in-out infinite}
@keyframes pulse2{0%{transform:translate(-50%,-50%) scale(.4);opacity:.7}100%{transform:translate(-50%,-50%) scale(2.4);opacity:0}}
.pulse2{animation:pulse2 2s ease-out infinite}
@keyframes grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.grow{transform-origin:left;animation:grow 1.2s .4s cubic-bezier(.2,.7,.2,1) both}
@keyframes ok{from{opacity:0;transform:scale(.9)}to{opacity:1;transform:none}}
.okmsg{animation:ok .5s cubic-bezier(.2,.7,.2,1) both}
[hidden]{display:none !important}
html{scroll-behavior:smooth;scroll-padding-top:110px}
*{box-sizing:border-box}
img{max-width:100%}
body{-webkit-font-smoothing:antialiased}
:focus-visible{outline:3px solid #2CB3A3;outline-offset:3px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
body.lock{overflow:hidden}
.fbtn{transition:background-color .25s ease,color .25s ease}
.fbtn:hover{background:#1E2328 !important;color:#FFFFFF !important}
.dlg li{animation:rise .5s cubic-bezier(.2,.7,.2,1) both}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
@media (prefers-reduced-motion:reduce){*{animation:none !important;transition:none !important}.rv,.rvg .rvi{opacity:1 !important;transform:none !important}.wipe{clip-path:none !important}.fill{transform:none !important}}