/* CBAY System – ortak stiller (ana sayfa + header/footer) */
@font-face{font-family:'CbayInter';font-style:normal;font-weight:100 900;font-display:swap;src:url(../fonts/inter-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'CbayInter';font-style:normal;font-weight:100 900;font-display:swap;src:url(../fonts/inter-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
html,body,.cb-root,body *{font-family:'CbayInter','Inter',system-ui,sans-serif}

body{margin:0;background:#FFFFFF}
a{color:#1A5E99;text-decoration:none}a:hover{color:#134773}
html{scroll-behavior:smooth}
.wrap{max-width:1240px;margin:0 auto;padding-left:40px;padding-right:40px;box-sizing:border-box}
.eyebrow{font-family:'CbayInter','Inter',sans-serif;font-size:13px;font-weight:600;letter-spacing: .06em;display:flex;align-items:center;gap:12px}
.eyebrow::before{content:"";width:28px;height:2px;background:#1F6FB2;display:block}
.navlink{color:#18212C;font-weight:600;font-size:15px;padding:12px 2px;position:relative}
.navlink::after{content:"";position:absolute;left:0;bottom:6px;height:2px;width:0;background:#1F6FB2;transition:width .3s ease}
.navlink:hover{color:#18212C}.navlink:hover::after{width:100%}
.btn{position:relative;overflow:hidden;transition:transform .25s ease, box-shadow .25s ease, background-color .25s ease}
.btn::after{content:"";position:absolute;top:0;left:-130%;width:60%;height:100%;background:linear-gradient(100deg,rgba(255,255,255,0),rgba(255,255,255,.35),rgba(255,255,255,0));transform:skewX(-20deg);transition:left .7s ease}
.btn:hover{transform:translateY(-2px)}.btn:hover::after{left:150%}
.btn-red:hover{box-shadow:0 14px 30px -12px rgba(31,111,178,.7);color:#FFFFFF}
.btn-ghost:hover{background:#FFFFFF;color:#0F1B2B !important}
.btn-dark:hover{background:#18212C !important;border-color:#18212C !important;color:#FFFFFF !important}
.card{position:relative;overflow:hidden;transition:transform .4s cubic-bezier(.2,.7,.2,1), box-shadow .4s ease, border-color .4s ease}
.card::before{content:"";position:absolute;left:0;top:0;height:3px;width:0;background:#1F6FB2;transition:width .5s ease}
.card:hover{transform:translateY(-6px);box-shadow:0 26px 50px -28px rgba(20,20,22,.45)}
.card:hover::before{width:100%}
.card .ico{transition:transform .5s cubic-bezier(.2,.7,.2,1), background-color .4s ease}
.card:hover .ico{transform:rotate(-8deg) scale(1.08)}
.sector{transition:background-color .35s ease, color .35s ease, transform .35s ease}
.sector:hover{background:#1F6FB2 !important;color:#FFFFFF;transform:translateY(-4px)}
.sector:hover svg{stroke:#FFFFFF}
.sector:hover p{color:#DCEBF8 !important}
.foot a{color:#C3CEDB;transition:color .2s, padding-left .25s}.foot a:hover{color:#FFFFFF;padding-left:4px}
.social{transition:background-color .25s, border-color .25s}.social:hover{background:#1F6FB2;border-color:#1F6FB2}
input,select,textarea{font:inherit}
input:focus,select:focus,textarea:focus{outline:2px solid #1F6FB2;outline-offset:1px;border-color:#1F6FB2 !important}

/* hero */
.hero-grid{background-color:#0C1624;background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);background-size:56px 56px}
.scan{position:absolute;left:0;right:0;height:120px;top:-120px;background:linear-gradient(180deg,rgba(31,111,178,0),rgba(31,111,178,.10),rgba(31,111,178,0));animation:scan 7s linear infinite;pointer-events:none}
.up{opacity:0;animation:fadeUp .9s cubic-bezier(.2,.7,.2,1) forwards}
.d1{animation-delay:.1s}.d2{animation-delay:.25s}.d3{animation-delay:.4s}.d4{animation-delay:.55s}.d5{animation-delay:.7s}
.flow{stroke-dasharray:6 14;animation:dash 1.6s linear infinite}
.packet{stroke-dasharray:10 400;animation:packet 3.2s linear infinite}
.p2{animation-delay:.6s}.p3{animation-delay:1.2s}.p4{animation-delay:1.8s}.p5{animation-delay:2.4s}.p6{animation-delay:3s}
.spin{transform-origin:300px 265px;animation:spin 40s linear infinite}
.spin-r{transform-origin:300px 265px;animation:spin 60s linear infinite reverse}
.node{transform-box:fill-box;transform-origin:center;animation:breathe 3.2s ease-in-out infinite}
.hub-ping{transform-box:fill-box;transform-origin:center;animation:ping 2.4s cubic-bezier(0,0,.2,1) infinite}
.blink{animation:blink 1.2s steps(2,start) infinite}
.float{animation:float 6s ease-in-out infinite}
.float2{animation:float 7s ease-in-out -2s infinite}
/* marquee */
.marquee{display:flex;width:max-content;animation:marquee 32s linear infinite}
.marquee:hover{animation-play-state:paused}
/* rack leds */
.led{animation:blink 1.1s steps(2,start) infinite}
.l2{animation-duration:.7s}.l3{animation-duration:1.7s}.l4{animation-duration:.45s}.l5{animation-duration:2.3s}
/* map */
.ripple{transform-box:fill-box;transform-origin:center;animation:ping 2.2s cubic-bezier(0,0,.2,1) infinite}
.ripple2{animation-delay:1.1s}
.pin{animation:bob 2.2s ease-in-out infinite}
/* whatsapp */
.wa{position:fixed;right:24px;bottom:24px;z-index:80;display:flex;align-items:center;gap:12px}
.wa-btn{width:62px;height:62px;border-radius:50%;background:#1FAF55;display:flex;align-items:center;justify-content:center;position:relative;box-shadow:0 12px 28px -8px rgba(0,0,0,.45);transition:transform .25s}
.wa-btn:hover{transform:scale(1.08)}
.wa-btn::before{content:"";position:absolute;inset:0;border-radius:50%;background:#1FAF55;animation:ping 2s cubic-bezier(0,0,.2,1) infinite;z-index:-1}
.wa-tip{background:#FFFFFF;color:#0F1B2B;font-weight:700;font-size:14px;padding:10px 14px;border-radius:999px;box-shadow:0 10px 24px -10px rgba(0,0,0,.35)}
.wa{flex-direction:column;align-items:flex-end;gap:14px}
.fab-row{display:flex;align-items:center;gap:12px}
.ax-btn{width:62px;height:62px;border-radius:50%;background:#FFFFFF;border:2px solid #CFE2F7;box-sizing:border-box;display:flex;align-items:center;justify-content:center;position:relative;box-shadow:0 12px 28px -8px rgba(0,0,0,.45);transition:transform .25s,background-color .25s}
.ax-btn:hover{transform:scale(1.08);background:#EEF5FD}
/* sağ alt butonlar: açıklama sadece üzerine gelince */
.fab-row .wa-tip{opacity:0;transform:translateX(10px);pointer-events:none;transition:opacity .25s ease,transform .25s ease}
.fab-row:hover .wa-tip,.fab-row:focus-within .wa-tip{opacity:1;transform:none}
.mbar{display:none}
/* mobil menü */
.burger{display:none;width:48px;height:48px;border:1px solid #DCE2E9;border-radius:6px;background:#FFFFFF;align-items:center;justify-content:center;cursor:pointer;color:#18212C;padding:0}
/* scroll reveal */
@supports (animation-timeline: view()){
.reveal{animation:fadeUp linear both;animation-timeline:view();animation-range:entry 0% cover 22%}
.grow{transform-origin:left center;animation:growX linear both;animation-timeline:view();animation-range:entry 10% cover 45%}
}
@keyframes fadeUp{from{opacity:0;transform:translateY(34px)}to{opacity:1;transform:none}}
@keyframes growX{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes dash{to{stroke-dashoffset:-40}}
@keyframes packet{from{stroke-dashoffset:410}to{stroke-dashoffset:0}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
@keyframes ping{0%{transform:scale(1);opacity:.55}100%{transform:scale(2.1);opacity:0}}
@keyframes blink{to{visibility:hidden}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes scan{to{top:100%}}
@keyframes marquee{to{transform:translateX(-50%)}}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
/* çapraz şeritler + vitrin */
.xstrips{position:relative;overflow:hidden}
.strip-b{position:absolute;left:-5%;width:110%;top:50%;margin-top:-28px;transform:rotate(2.2deg);background:#0F1B2B;color:#FFFFFF;padding:16px 0;z-index:1;overflow:hidden}
.marquee.rev{animation-direction:reverse;animation-duration:46s}
.ol{color:transparent;-webkit-text-stroke:1.2px #FFFFFF}
.slider .track{display:flex;transition:transform .9s cubic-bezier(.7,0,.2,1)}
.slide.on .st{animation:fadeUp .8s cubic-bezier(.2,.7,.2,1) both}
.slide.on .st2{animation-delay:.12s}.slide.on .st3{animation-delay:.24s}.slide.on .st4{animation-delay:.36s}
.slide.on .vis{animation:popIn 1s cubic-bezier(.2,.7,.2,1) both}
@keyframes popIn{from{opacity:0;transform:scale(.75) rotate(-12deg)}to{opacity:1;transform:none}}
.ring{transform-box:fill-box;transform-origin:center;animation:spin 26s linear infinite}
.ring.r2{animation-duration:40s;animation-direction:reverse}
.sbtn{width:52px;height:52px;border-radius:50%;border:1px solid #3A3A3F;background:transparent;color:#FFFFFF;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background-color .25s,border-color .25s,transform .25s}
.sbtn:hover{background:#FFFFFF;color:#0F1B2B;transform:scale(1.06)}
.sbtn-red{background:#1F6FB2;border-color:#1F6FB2}
.tab{position:relative;overflow:hidden;text-align:left;background:#1B1B1E;color:#9FB0C3;border:0;padding:14px 16px 18px;font-family:inherit;font-weight:700;font-size:14px;border-radius:4px;cursor:pointer;display:flex;flex-direction:column;gap:4px;min-height:44px;transition:background-color .25s,color .25s}
.tab:hover{color:#FFFFFF}
.tab.on{background:#26262A;color:#FFFFFF}
.tab .bar{position:absolute;left:0;bottom:0;height:3px;width:0;background:#1F6FB2}
.tab.on .bar{animation:fillBar 6s linear forwards}
.is-paused .tab.on .bar{animation-play-state:paused}
@keyframes fillBar{to{width:100%}}
.motion-off .tab.on .bar{width:100%}
/* cam efektli navbar */
.nav-glass .navlink{text-shadow:0 0 12px rgba(255,255,255,.9)}
.nav-glass img{filter:drop-shadow(0 0 6px rgba(255,255,255,.85))}
.nav-glass{background:rgba(250,250,251,.8);-webkit-backdrop-filter:blur(30px) saturate(150%) brightness(1.15);backdrop-filter:blur(30px) saturate(150%) brightness(1.15);border-bottom:1px solid rgba(255,255,255,.55);box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 14px 34px -20px rgba(0,0,0,.45)}
@supports (animation-timeline: scroll()){.nav-glass{animation:glassIn linear both;animation-timeline:scroll(root);animation-range:0 160px}}
@keyframes glassIn{from{background:rgba(255,255,255,1);-webkit-backdrop-filter:blur(0px) saturate(100%) brightness(1);backdrop-filter:blur(0px) saturate(100%) brightness(1);box-shadow:inset 0 1px 0 rgba(255,255,255,0),0 0 0 0 rgba(0,0,0,0);border-bottom-color:#E2E7ED}to{background:rgba(250,250,251,.8);-webkit-backdrop-filter:blur(30px) saturate(150%) brightness(1.15);backdrop-filter:blur(30px) saturate(150%) brightness(1.15);box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 14px 34px -20px rgba(0,0,0,.45);border-bottom-color:rgba(255,255,255,.55)}}
.brand-tile{height:92px;border:1px solid #E2E7ED;border-radius:6px;display:flex;align-items:center;justify-content:center;background:#FFFFFF;transition:border-color .3s,box-shadow .3s,transform .3s}
.brand-tile img{display:block;max-width:74%;max-height:46px;width:auto;height:auto;object-fit:contain;filter:grayscale(1);opacity:.5;transition:filter .35s,opacity .35s}
.brand-tile.wide img{max-width:84%;max-height:30px}
.brand-tile.sq img{max-height:50px}
.brand-tile:hover{border-color:#1F6FB2;transform:translateY(-3px);box-shadow:0 16px 30px -22px rgba(15,27,43,.5)}
.brand-tile:hover img{filter:none;opacity:1}
.ilce{font-size:15px;line-height:1.9;color:#556170}
.ilce b{color:#18212C;font-weight:700}
.tk-feat{display:flex;gap:12px;align-items:flex-start;font-size:15px;line-height:1.55;color:#C3CEDB}
.tk-feat svg{flex:none;margin-top:2px}
.ck{position:fixed;left:24px;bottom:24px;z-index:95;width:420px;max-width:calc(100% - 32px);background:#FFFFFF;border:1px solid #E2E7ED;border-radius:10px;box-shadow:0 24px 60px -24px rgba(15,27,43,.45);padding:22px 24px;box-sizing:border-box;display:flex;flex-direction:column;gap:14px;animation:fadeUp .6s 1s cubic-bezier(.2,.7,.2,1) both}
.ck p{margin:0;font-size:14px;line-height:1.6;color:#556170}
.ck button{height:42px;padding:0 18px;border-radius:4px;font-family:inherit;font-size:14px;font-weight:700;cursor:pointer}
@media (max-width: 560px){.ck{left:16px;right:16px;bottom:76px;width:auto}}
.hero-bg{transform-origin:70% 40%;animation:heroZoom 22s ease-out both}
@keyframes heroZoom{from{transform:scale(1.08)}to{transform:scale(1)}}
.motion-off .hero-bg{animation:none}
@media (max-width: 960px){.hero-photo .wrap{min-height:680px !important;padding-top:110px !important}.hero-photo .hero-shade{background:linear-gradient(90deg,rgba(8,17,28,.94),rgba(8,17,28,.7)) !important}.hero-photo .hero-h1{font-size:46px !important}}
/* fotoğraflı çözüm kutuları */
.ptiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.ptile{background:#FFFFFF;border-radius:10px;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 1px 0 #E2E7ED;transition:box-shadow .4s ease,transform .4s cubic-bezier(.2,.7,.2,1)}
.ptile:hover{box-shadow:0 30px 60px -34px rgba(15,27,43,.45);transform:translateY(-4px)}
.ptile-img{position:relative;display:block;height:230px;overflow:hidden;background:#0F1B2B}
.ptile-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.ptile:hover .ptile-img img{transform:scale(1.06)}
.ptile-img::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,17,28,0) 55%,rgba(8,17,28,.55))}
.ptile-num{position:absolute;left:24px;bottom:18px;z-index:1;font-family:'CbayInter','Inter',sans-serif;font-size:14px;font-weight:600;letter-spacing: .06em;color:#FFFFFF}
.ptile-body{padding:28px 28px 28px;display:flex;flex-direction:column;gap:12px;flex:1}
.ptile-body h3{margin:0;font-size:24px;line-height:1.15;font-weight: 700;}
.ptile-body p{margin:0;font-size:16px;line-height:1.6;color:#556170}
.ptile-links{display:flex;flex-direction:column;margin-top:8px;border-top:1px solid #E2E7ED}
.ptile-link{display:flex;justify-content:space-between;align-items:center;padding:12px 0;border-bottom:1px solid #EEF1F4;color:#18212C;font-weight:700;font-size:15px;transition:color .2s,padding-left .25s}
.ptile-link:hover{color:#1F6FB2;padding-left:6px}
.ptile-link svg{color:#1F6FB2}
.pstrip{margin-top:-28px;display:grid;grid-template-columns:220px minmax(0,1fr) auto;align-items:center;gap:32px;background:#FFFFFF;border-radius:10px;overflow:hidden;box-shadow:0 1px 0 #E2E7ED;color:#18212C;transition:box-shadow .4s ease,transform .4s cubic-bezier(.2,.7,.2,1)}
.pstrip:hover{box-shadow:0 30px 60px -34px rgba(15,27,43,.45);transform:translateY(-3px)}
.pstrip img{width:100%;height:128px;object-fit:cover;display:block}
.pstrip h3{margin:0 0 6px;font-size:21px;font-weight:700}
.pstrip p{margin:0;font-size:15px;line-height:1.55;color:#556170}
.pstrip-cta{display:inline-flex;align-items:center;gap:10px;margin-right:32px;font-size:15px;font-weight:700;color:#1F6FB2;white-space:nowrap}
.pstrip:hover .pstrip-cta svg{transform:translateX(4px)}
.pstrip-cta svg{transition:transform .25s}
@media (max-width: 960px){.pstrip{grid-template-columns:120px minmax(0,1fr);gap:18px}.pstrip img{height:100%;min-height:120px}.pstrip > div{padding:18px 18px 18px 0}.pstrip-cta{display:none}}
/* logo şeridi */
.logo-marquee{position:relative;overflow:hidden;contain:paint}
.logo-marquee::before,.logo-marquee::after{content:"";position:absolute;top:0;bottom:0;width:56px;z-index:1;pointer-events:none}
.logo-marquee::before{left:0;background:linear-gradient(90deg,#FFFFFF,rgba(255,255,255,0))}
.logo-marquee::after{right:0;background:linear-gradient(270deg,#FFFFFF,rgba(255,255,255,0))}
.logo-track{display:flex;align-items:center;width:max-content;animation:logoScroll 45s linear infinite;will-change:transform;backface-visibility:hidden}
.logo-track img{height:34px;width:auto;max-width:none;flex:none;margin-right:72px;object-fit:contain}
@media (hover: hover){.logo-marquee:hover .logo-track{animation-play-state:paused}}
@keyframes logoScroll{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
.motion-off .logo-track{animation:none}
/* destek kartları */
.sup-card{display:flex;flex-wrap:wrap;align-items:center;gap:16px 20px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:10px;padding:22px 24px;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transition:background .3s,border-color .3s}
.sup-card:hover{background:rgba(255,255,255,.1);border-color:rgba(125,184,232,.5)}
.sup-ico{width:52px;height:52px;flex:none;border-radius:10px;background:rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center}
.sup-card h3{margin:0;font-size:19px;font-weight: 700}
.sup-card p{margin:0;font-size:14px;line-height:1.55;color:#C3CEDB}
.sup-act{flex:none;background:#FFFFFF;color:#0F1B2B;font-weight: 700;font-size:14px;padding:12px 16px;border-radius:4px;white-space:nowrap;transition:background .2s}
.sup-act:hover{background:#E8F1F9;color:#0F1B2B}
.fchips-set{border:0;margin:0;padding:0;min-width:0}
.fchips-set legend{padding:0;margin:0 0 10px;font-size:14px;font-weight:600;color:#18212C}
.fchips-set legend span{font-weight:500;color:#66727F}
.fchips{display:flex;flex-wrap:wrap;gap:8px}
.fchip{position:relative;cursor:pointer}
.fchip input{position:absolute;opacity:0;width:1px;height:1px}
.fchip span{display:inline-flex;align-items:center;gap:6px;height:38px;padding:0 14px;border:1px solid #C9D2DC;border-radius:999px;font-size:14px;font-weight:600;color:#3A4654;background:#FFFFFF;transition:background .2s,border-color .2s,color .2s}
.fchip:hover span{border-color:#1F6FB2}
.fchip input:checked + span{background:#E8F1F9;border-color:#1F6FB2;color:#0F4C80}
.fchip input:checked + span::before{content:"";width:12px;height:12px;background:no-repeat center/12px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231F6FB2' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E")}
.fchip input:focus-visible + span{outline:2px solid #1F6FB2;outline-offset:2px}
.chip-s{font-size:14px;font-weight:600;padding:8px 14px;border-radius:999px;background:#FFFFFF;border:1px solid #E2E7ED;color:#18212C}
@media (max-width: 960px){.ptiles{grid-template-columns:minmax(0,1fr) !important}.ptile-img{height:220px}.about-badge{right:16px !important}.logo-track img{margin-right:44px}}
/* SSS */
.faq{border-bottom:1px solid #E2E7ED}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:24px;padding:24px 0;font-size:19px;font-weight:700;color:#18212C;transition:color .2s}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:#1A5E99}
.faq-ico{position:relative;width:30px;height:30px;flex:none;border-radius:50%;border:1.5px solid #C9D2DC;box-sizing:border-box;transition:transform .35s,background-color .35s,border-color .35s}
.faq-ico::before,.faq-ico::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:2px;margin:-1px 0 0 -6px;background:#18212C;transition:transform .35s,background-color .35s}
.faq-ico::after{transform:rotate(90deg)}
.faq[open] .faq-ico{background:#1F6FB2;border-color:#1F6FB2;transform:rotate(180deg)}
.faq[open] .faq-ico::before,.faq[open] .faq-ico::after{background:#FFFFFF}
.faq[open] .faq-ico::after{transform:rotate(0deg)}
.faq p{margin:0 0 24px;font-size:16px;line-height:1.7;color:#556170;max-width:720px;animation:fadeUp .45s ease both}
/* hero sahneleri (25 sn döngü, her sahne 5 sn) */
.scenes{position:relative;width:100%;aspect-ratio:6/5}
.scene{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible;opacity:0;animation:sceneA 25s linear infinite}
.s1{opacity:1;animation-delay:0s}.s2{animation-delay:5s}.s3{animation-delay:10s}.s4{animation-delay:15s}.s5{animation-delay:20s}
@keyframes sceneA{0%{opacity:0;transform:translateY(14px) scale(.98)}2.5%{opacity:1;transform:none}17.5%{opacity:1;transform:none}20%{opacity:0;transform:translateY(-14px) scale(.98)}100%{opacity:0}}
.sdots{display:flex;gap:8px;justify-content:center;margin-top:10px}
.sdots span{position:relative;width:38px;height:3px;border-radius:2px;background:#22344B;overflow:hidden}
.sdots span::after{content:"";position:absolute;left:0;top:0;bottom:0;width:0;background:#1F6FB2;animation:dotA 25s linear infinite}
.sdots span:nth-child(2)::after{animation-delay:5s}.sdots span:nth-child(3)::after{animation-delay:10s}.sdots span:nth-child(4)::after{animation-delay:15s}.sdots span:nth-child(5)::after{animation-delay:20s}
@keyframes dotA{0%{width:0}20%{width:100%}20.01%,100%{width:0}}
/* alarm */
.al-flash{opacity:0;animation:flashA 5s steps(1,end) 5s infinite}
@keyframes flashA{0%{opacity:0}52%{opacity:.13}58%{opacity:0}64%{opacity:.13}70%{opacity:0}76%{opacity:.13}82%{opacity:0}88%{opacity:.13}94%{opacity:0}}
.al-door{transform-box:fill-box;transform-origin:left center;animation:doorA 5s ease-in-out 5s infinite}
@keyframes doorA{0%,10%{transform:scaleX(1)}28%,88%{transform:scaleX(.16)}100%{transform:scaleX(1)}}
.al-thief{animation:thiefA 5s ease-in-out 5s infinite}
@keyframes thiefA{0%,26%{transform:translateX(0)}66%,100%{transform:translateX(170px)}}
.al-beams{opacity:0;animation:beamA 5s linear 5s infinite}
@keyframes beamA{0%,44%{opacity:0}48%{opacity:.3}58%{opacity:.12}68%{opacity:.3}78%{opacity:.12}88%,100%{opacity:.3}}
.al-blink{fill-opacity:.3;animation:sirenA 5s steps(1,end) 5s infinite}
@keyframes sirenA{0%{fill-opacity:.3}50%{fill-opacity:1}56%{fill-opacity:.3}62%{fill-opacity:1}68%{fill-opacity:.3}74%{fill-opacity:1}80%{fill-opacity:.3}86%{fill-opacity:1}92%{fill-opacity:.3}}
.al-waves{opacity:0;transform-box:fill-box;transform-origin:right center;animation:wavesA 5s ease-out 5s infinite}
@keyframes wavesA{0%,50%{opacity:0;transform:scale(.7)}56%{opacity:1;transform:scale(1)}64%{opacity:0;transform:scale(1.25)}65%{opacity:0;transform:scale(.7)}71%{opacity:1;transform:scale(1)}79%{opacity:0;transform:scale(1.25)}80%{opacity:0;transform:scale(.7)}86%{opacity:1;transform:scale(1)}94%,100%{opacity:0;transform:scale(1.25)}}
/* helpdesk (sahne 3, 10 sn gecikme) */
.hd-err{animation:hdErr 5s linear 10s infinite}
@keyframes hdErr{0%,44%{opacity:1}48%,100%{opacity:0}}
.hd-shake{animation:hdShake 5s linear 10s infinite}
@keyframes hdShake{0%,2%,6%,10%,14%,18%{transform:translateX(0)}1%,5%,9%,13%,17%{transform:translateX(-5px)}3%,7%,11%,15%{transform:translateX(5px)}20%,100%{transform:translateX(0)}}
.hd-work{opacity:0;animation:hdWork 5s linear 10s infinite}
@keyframes hdWork{0%,44%{opacity:0}48%,72%{opacity:1}76%,100%{opacity:0}}
.hd-bar{transform-box:fill-box;transform-origin:left center;animation:hdBar 5s ease-in-out 10s infinite}
@keyframes hdBar{0%,48%{transform:scaleX(.02)}72%,100%{transform:scaleX(1)}}
.hd-cursor{animation:hdCur 5s ease-in-out 10s infinite}
@keyframes hdCur{0%,48%{transform:translate(40px,40px)}56%{transform:translate(-110px,-40px)}64%{transform:translate(-30px,-20px)}72%,100%{transform:translate(60px,44px)}}
.hd-ok{opacity:0;transform-box:fill-box;transform-origin:center;animation:hdOk 5s ease-out 10s infinite}
@keyframes hdOk{0%,72%{opacity:0;transform:scale(.6)}78%{opacity:1;transform:scale(1.08)}82%,100%{opacity:1;transform:scale(1)}}
.hd-ring{opacity:0;transform-box:fill-box;transform-origin:center;animation:hdRing 5s ease-out 10s infinite}
@keyframes hdRing{0%{opacity:0;transform:scale(.8)}5%{opacity:1}14%{opacity:0;transform:scale(1.15)}15%{opacity:0;transform:scale(.8)}20%{opacity:1}29%{opacity:0;transform:scale(1.15)}30%,100%{opacity:0}}
.hd-link{opacity:0;animation:dash 1.6s linear infinite,hdLink 5s linear 10s infinite}
@keyframes hdLink{0%,24%{opacity:0}30%,74%{opacity:1}80%,100%{opacity:0}}
/* network kablolama (sahne 5, 20 sn gecikme) */
.nw-c{stroke-dasharray:1;stroke-dashoffset:0;animation-duration:5s;animation-timing-function:ease-in-out;animation-delay:20s;animation-iteration-count:infinite}
.nw-c.c1{animation-name:cb1}.nw-c.c2{animation-name:cb2}.nw-c.c3{animation-name:cb3}.nw-c.c4{animation-name:cb4}.nw-c.c5{animation-name:cb5}.nw-c.c6{animation-name:cb6}
@keyframes cb1{0%,6%{stroke-dashoffset:1}18%,94%{stroke-dashoffset:0}100%{stroke-dashoffset:1}}
@keyframes cb2{0%,15%{stroke-dashoffset:1}27%,94%{stroke-dashoffset:0}100%{stroke-dashoffset:1}}
@keyframes cb3{0%,24%{stroke-dashoffset:1}36%,94%{stroke-dashoffset:0}100%{stroke-dashoffset:1}}
@keyframes cb4{0%,33%{stroke-dashoffset:1}45%,94%{stroke-dashoffset:0}100%{stroke-dashoffset:1}}
@keyframes cb5{0%,42%{stroke-dashoffset:1}54%,94%{stroke-dashoffset:0}100%{stroke-dashoffset:1}}
@keyframes cb6{0%,51%{stroke-dashoffset:1}63%,94%{stroke-dashoffset:0}100%{stroke-dashoffset:1}}
.nw-l{fill:#34D17A;animation-duration:5s;animation-timing-function:steps(1,end);animation-delay:20s;animation-iteration-count:infinite}
.nw-l.n1{animation-name:lk1}.nw-l.n2{animation-name:lk2}.nw-l.n3{animation-name:lk3}.nw-l.n4{animation-name:lk4}.nw-l.n5{animation-name:lk5}.nw-l.n6{animation-name:lk6}
@keyframes lk1{0%{fill:#3A3A3F}18%{fill:#34D17A}96%{fill:#3A3A3F}}
@keyframes lk2{0%{fill:#3A3A3F}27%{fill:#34D17A}96%{fill:#3A3A3F}}
@keyframes lk3{0%{fill:#3A3A3F}36%{fill:#34D17A}96%{fill:#3A3A3F}}
@keyframes lk4{0%{fill:#3A3A3F}45%{fill:#34D17A}96%{fill:#3A3A3F}}
@keyframes lk5{0%{fill:#3A3A3F}54%{fill:#34D17A}96%{fill:#3A3A3F}}
@keyframes lk6{0%{fill:#3A3A3F}63%{fill:#34D17A}96%{fill:#3A3A3F}}
/* IT */
.it-pk{stroke-dasharray:14 320;animation:pkA 1.6s linear infinite}
.it-pk2{animation-delay:.8s}
@keyframes pkA{from{stroke-dashoffset:334}to{stroke-dashoffset:0}}
.it-bar{transform-box:fill-box;transform-origin:center bottom;animation:barA 1.4s ease-in-out infinite alternate}
.it-bar.b2{animation-delay:.3s}.it-bar.b3{animation-delay:.6s}.it-bar.b4{animation-delay:.15s}.it-bar.b5{animation-delay:.45s}
@keyframes barA{from{transform:scaleY(.35)}to{transform:scaleY(1)}}
.it-line{transform-box:fill-box;transform-origin:left center;animation:lineA 2.5s steps(8,end) infinite}
.it-line.t2{animation-delay:.4s}.it-line.t3{animation-delay:.8s}.it-line.t4{animation-delay:1.2s}
@keyframes lineA{0%{transform:scaleX(0)}60%,100%{transform:scaleX(1)}}
/* yangın */
.fi-smoke{opacity:0;transform-box:fill-box;transform-origin:center;animation:smokeA 3s ease-out infinite}
.fi-smoke.k2{animation-delay:.75s}.fi-smoke.k3{animation-delay:1.5s}.fi-smoke.k4{animation-delay:2.25s}
@keyframes smokeA{0%{opacity:0;transform:translateY(0) scale(.6)}15%{opacity:.45}100%{opacity:0;transform:translateY(-270px) scale(2.6)}}
.fi-flame{transform-box:fill-box;transform-origin:center bottom;animation:flameA .35s ease-in-out infinite alternate}
@keyframes flameA{from{transform:scale(1,.9)}to{transform:scale(.94,1.06)}}
.fi-blink{fill-opacity:.35;animation:sirenA 5s steps(1,end) 15s infinite}
.fi-waves{opacity:0;transform-box:fill-box;transform-origin:right center;animation:wavesA 5s ease-out 15s infinite}
/* geçiş kontrol */
.ac-card{animation:cardA 5s ease-in-out 20s infinite}
@keyframes cardA{0%{opacity:0;transform:translate(70px,-70px)}10%{opacity:1;transform:translate(70px,-70px)}26%{opacity:1;transform:translate(-46px,50px)}34%{opacity:1;transform:translate(-46px,50px)}42%,100%{opacity:0;transform:translate(-46px,50px)}}
.ac-led{animation:ledA 5s steps(1,end) 20s infinite}
@keyframes ledA{0%{fill:#5AA7E6}28%{fill:#34D17A}86%{fill:#5AA7E6}}
.ac-arm{transform-box:view-box;transform-origin:200px 320px;animation:armA 5s ease-in-out 20s infinite}
@keyframes armA{0%,32%{transform:rotate(0)}50%,80%{transform:rotate(-80deg)}96%,100%{transform:rotate(0)}}
/* hero kamera */
.cam{transform-box:view-box;transform-origin:548px 262px;animation:camPan 9s ease-in-out infinite alternate}
@keyframes camPan{from{transform:rotate(6deg)}to{transform:rotate(-8deg)}}
.ir-glow{animation:irG 2.4s ease-in-out infinite}
@keyframes irG{0%,100%{opacity:.25}50%{opacity:1}}
.det{opacity:0;animation:detA 9s ease-in-out infinite}
@keyframes detA{0%,48%{opacity:0}52%,60%{opacity:1}62%,66%{opacity:.25}68%,80%{opacity:1}86%,100%{opacity:0}}
/* hero logo + radar */
.cmark{position:relative;width:100%;max-width:520px;aspect-ratio:1/1;margin:0 auto}
.radar{position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 0deg,rgba(31,111,178,0) 0deg,rgba(31,111,178,0) 290deg,rgba(31,111,178,.32) 360deg);animation:spin 6s linear infinite}
.blip{transform-box:fill-box;transform-origin:center;opacity:0;animation:blipA 6s linear infinite}
.b2{animation-delay:2.2s}.b3{animation-delay:4.1s}
@keyframes blipA{0%{opacity:0;transform:scale(.4)}4%{opacity:1;transform:scale(1.6)}40%{opacity:0;transform:scale(1)}100%{opacity:0}}
.cbig{position:absolute;left:50%;top:50%;height:66%;width:auto;transform:translate(-50%,-50%);overflow:visible;filter:drop-shadow(0 20px 40px rgba(31,111,178,.35))}
.cdraw{fill:#1F6FB2;fill-opacity:1;stroke:#FFFFFF;stroke-width:.5;stroke-dasharray:1;stroke-dashoffset:0;stroke-opacity:.9;animation:cDraw 2.6s cubic-bezier(.6,0,.2,1) .3s both,cFill 3.2s ease .3s both}
@keyframes cDraw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes cFill{0%,62%{fill-opacity:0}100%{fill-opacity:1}}
/* hero çözüm listesi */
.hrow{position:relative;display:grid;grid-template-columns:56px minmax(0,1fr) auto;align-items:center;gap:16px;padding:26px 4px;border-bottom:1px solid #22344B;color:#8E8E94;transition:padding-left .35s cubic-bezier(.2,.7,.2,1);animation:hlRow 16s linear infinite}
.hnum{font-family:'CbayInter','Inter',sans-serif;font-size:14px;font-weight:600;color:#66727F;animation:hlNum 16s linear infinite}
.htitle{font-size:30px;line-height:1.05;font-weight: 700;}
.hsub{font-size:14px;color:#9A9AA0}
.harr{transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.hbar{position:absolute;left:0;bottom:-1px;height:2px;width:0;background:#1F6FB2;animation:hlBar 16s linear infinite}
.hrow:hover{color:#FFFFFF !important;padding-left:14px}
.hrow:hover .hnum{color:#5AA7E6 !important}
.hrow:hover .harr{transform:translate(4px,-4px);color:#5AA7E6}
@keyframes hlRow{0%,23%{color:#FFFFFF}25%,100%{color:#8E8E94}}
@keyframes hlNum{0%,23%{color:#5AA7E6}25%,100%{color:#66727F}}
@keyframes hlBar{0%{width:0;opacity:1}23%{width:100%;opacity:1}25%{width:100%;opacity:0}100%{width:0;opacity:0}}
/* ek efektler */
.progress{position:fixed;left:0;top:0;height:3px;width:100%;background:#1F6FB2;transform-origin:left center;transform:scaleX(0);z-index:120;pointer-events:none}
@supports (animation-timeline: scroll()){.progress{animation:growX linear both;animation-timeline:scroll(root)}}
@keyframes drift{to{background-position:56px 56px,56px 56px}}
.rotator{display:inline-block;height:1.1em;overflow:hidden;vertical-align:bottom;white-space:nowrap}
.rot-inner{display:block;animation:rotw 11s cubic-bezier(.7,0,.2,1) infinite}
.rot-inner span{display:block;height:1.1em;line-height:1.1em}
@keyframes rotw{0%,18%{transform:translateY(0)}25%,43%{transform:translateY(-20%)}50%,68%{transform:translateY(-40%)}75%,93%{transform:translateY(-60%)}100%{transform:translateY(-80%)}}
.hl{position:relative;display:inline-block}
.hl::after{content:"";position:absolute;left:0;bottom:4px;height:4px;width:100%;background:#FFFFFF;transform:scaleX(0);transform-origin:left center;animation:growX .9s 1.1s cubic-bezier(.2,.7,.2,1) forwards}
.card:hover .ico{background:#1F6FB2 !important}
.card:hover .ico svg{stroke:#FFFFFF}
@property --ang{syntax:'<angle>';inherits:false;initial-value:0deg}
.glow::after{content:"";position:absolute;inset:0;border-radius:8px;padding:2px;background:conic-gradient(from var(--ang),rgba(255,59,65,0) 0deg,rgba(255,59,65,0) 250deg,#5AA7E6 320deg,rgba(255,59,65,0) 360deg);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:angle 5s linear infinite;pointer-events:none}
@keyframes angle{to{--ang:360deg}}
.dl{position:relative;width:50px;height:50px;border:1px solid #DCE2E9;border-radius:6px;display:flex;align-items:center;justify-content:center;color:#18212C;background:#FFFFFF;transition:border-color .25s,color .25s,transform .25s}
.dl:hover{border-color:#1F6FB2;color:#1F6FB2;transform:translateY(-2px)}
.dl-wide{width:auto;padding:0 12px 0 7px;gap:8px}
.dl-logo{width:34px;height:34px;border-radius:6px;background:#0F1B2B;color:#FFFFFF;display:flex;align-items:center;justify-content:center;flex:none}
.dl-wide:hover .dl-logo{background:#1F6FB2}
.dl-wide .dl-dot{top:5px;left:36px;right:auto}
.dl-dot{position:absolute;top:7px;right:7px;width:8px;height:8px;border-radius:50%;background:#1FAF55}
.dl-dot::after{content:"";position:absolute;inset:0;border-radius:50%;background:#1FAF55;animation:ping 1.8s cubic-bezier(0,0,.2,1) infinite}
.dl-tip{position:absolute;top:calc(100% + 10px);right:0;background:#0F1B2B;color:#FFFFFF;font-size:12px;font-weight:700;white-space:nowrap;padding:8px 11px;border-radius:4px;opacity:0;transform:translateY(-4px);transition:opacity .2s,transform .2s;pointer-events:none}
.dl:hover .dl-tip,.dl:focus-visible .dl-tip{opacity:1;transform:none}
@supports (animation-timeline: view()){.numfill{color:transparent !important;-webkit-text-stroke:2px #1F6FB2;background-image:linear-gradient(#1F6FB2,#1F6FB2);background-repeat:no-repeat;background-size:0% 100%;-webkit-background-clip:text;background-clip:text;animation:fillText linear both;animation-timeline:view();animation-range:entry 15% cover 45%}}
@keyframes fillText{to{background-size:100% 100%}}
.motion-off .numfill{background-size:100% 100% !important}
.motion-off .hl::after{transform:scaleX(1)}
.motion-off *, .motion-off *::before, .motion-off *::after{animation:none !important}
.motion-off .up{opacity:1}
/* küçük laptop ekranları (1366px ve altı ya da kısa ekranlar) */
@media (max-width: 1366px), (max-height: 820px){
.pad-y{padding-top:88px !important;padding-bottom:88px !important}
.hero-h1{font-size:52px !important}
.sec-h2{font-size:40px !important}
.scenes{max-width:440px;margin:0 auto}
.htitle{font-size:26px}
}
@media (max-width: 1180px){
.mainnav{gap:4px 20px !important}
.navlink{font-size:14px}
}
@media (max-width: 1080px){
.burger{display:flex}
.mainnav{display:none !important;order:3;width:100%;flex-direction:column;align-items:stretch !important;gap:0 !important;padding:6px 0 4px;border-top:1px solid #E2E7ED}
.mainnav.open{display:flex !important}
.mainnav .navlink{padding:14px 0;font-size:17px;border-bottom:1px solid #EBEFF3}
.mainnav .navlink::after{display:none}
}
@media (max-width: 560px){.hero-stats span[style*="font-size: 44px"]{font-size:34px !important}}
@media (max-width: 960px){
.stack{grid-template-columns:minmax(0,1fr) !important}
.stack2{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
.wrap{padding-left:20px;padding-right:20px}
.hero-h1{font-size:38px !important}
.sec-h2{font-size:34px !important}
.pad-y{padding-top:76px !important;padding-bottom:76px !important}
.hide-md{display:none !important}
}
@media (max-width: 560px){
.stack2{grid-template-columns:minmax(0,1fr) !important}
.hide-sm{display:none !important}
.wa-tip{display:none}
.hdr-cta{display:none !important}
.wa{display:none !important}
.mbar{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));position:fixed;left:0;right:0;bottom:0;z-index:90;background:#0F1B2B;border-top:1px solid #22344B;padding-bottom:env(safe-area-inset-bottom)}
.mbar a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:60px;color:#FFFFFF;font-size:13px;font-weight:700}
.mbar a.mbar-cta{background:#1F6FB2}
footer{padding-bottom:60px}
}

.band-stat{display:flex;flex-direction:column;gap:8px;border-left:2px solid #5AA7E6;padding-left:22px}.band-n{font-family:'CbayInter','Inter',sans-serif;font-size:56px;line-height:1;font-weight:700;letter-spacing:-0.02em}.band-l{font-size:15px;color:#C3CEDB}
@media (max-width:900px){.band-n{font-size:40px}}
@property --n{syntax:'<integer>';initial-value:0;inherits:false}
.cnt{--n:0;counter-reset:n var(--n);animation:cntUp 1.8s cubic-bezier(.2,.7,.2,1) both;animation-timeline:view();animation-range:entry 20% cover 45%}
.cnt::after{content:counter(n)}
@keyframes cntUp{from{--n:0}to{--n:var(--to)}}
.band-bg{transform-origin:50% 50%;animation:bandPan 32s ease-in-out infinite alternate}
@keyframes bandPan{from{transform:scale(1.14) translate3d(-3%,1%,0)}to{transform:scale(1.14) translate3d(3%,-1%,0)}}
.band-ticker{position:relative;overflow:hidden;border-top:1px solid rgba(255,255,255,.12);padding:22px 0;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.band-track{display:flex;width:max-content;animation:logoScroll 60s linear infinite}
.band-track span{display:flex;align-items:center;font-family:'CbayInter','Inter',sans-serif;font-size:22px;font-weight:600;color:rgba(255,255,255,.62);white-space:nowrap;padding:0 28px}
.band-track span::after{content:"";width:6px;height:6px;border-radius:50%;background:#5AA7E6;margin-left:56px}
.band-ticker:hover .band-track{animation-play-state:paused}
.band-stat{transition:border-color .3s}.band-stat:hover{border-color:#FFFFFF}
/* giriş: fotoğraf geçişi */
.hs{position:absolute;inset:0;overflow:hidden}
.hs img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.08);animation:hsFade 22s linear infinite}
@keyframes hsFade{0%{opacity:0;transform:scale(1.07)}3.6%{opacity:1}25%{opacity:1}28.6%{opacity:0;transform:scale(1)}100%{opacity:0;transform:scale(1)}}
.hs-ind{margin-top:auto;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;padding-top:56px}
.hs-item{display:flex;flex-direction:column;gap:12px}
.hs-bar{display:block;height:2px;background:rgba(255,255,255,.22);overflow:hidden}
.hs-bar i{display:block;height:100%;background:#FFFFFF;transform-origin:left;transform:scaleX(0);animation:hsBar 28s linear infinite;animation-delay:var(--d)}
.hs-lbl{font-size:14px;font-weight:600;color:rgba(255,255,255,.5);animation:hsLbl 28s linear infinite;animation-delay:var(--d)}
@keyframes hsBar{0%{transform:scaleX(0)}25%{transform:scaleX(1)}25.01%,100%{transform:scaleX(0)}}
@keyframes hsLbl{0%,25%{color:#FFFFFF}25.01%,100%{color:rgba(255,255,255,.5)}}
@media (max-width:900px){.hs-ind{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}}
/* === YENİ GÖRÜNÜM (demo) === */
h1,h2,h3,h4,.hd{font-family:'CbayInter','Inter',sans-serif}
.sec-h2{font-size:40px !important;line-height:1.12 !important;letter-spacing:-0.02em !important}
.hero-h1{letter-spacing:-0.025em !important}
.btn::after{display:none !important}
.btn:hover{transform:none !important}
.btn-red:hover{background:#185C95 !important;box-shadow:none !important}
.card:hover{transform:none !important;box-shadow:none !important}.card::before{display:none !important}
.card:hover .ico{transform:none !important}
.ptile:hover{transform:none !important}
.wa-btn::before{display:none !important}
.hdr-phone{display:inline-flex;align-items:center;gap:8px;color:#18212C;font-weight:700;font-size:15px}
.hdr-sup{display:inline-flex;align-items:center;gap:8px;border:1px solid #C9D2DC;color:#18212C;font-weight:600;font-size:14px;padding:10px 16px;border-radius:4px;transition:border-color .2s,color .2s}
.hdr-sup:hover{border-color:#1F6FB2;color:#1A5E99}
.step-n{width:36px;height:36px;border-radius:50%;background:#1F6FB2;color:#FFFFFF;font-size:15px;font-weight:700;display:flex;align-items:center;justify-content:center;margin-top:-50px;margin-bottom:6px;box-shadow:0 0 0 6px #F2F5F8}
@media (max-width:900px){.hdr-phone,.hdr-sup{display:none}}
@media (max-width: 700px){.blog-row{display:flex !important;overflow-x:auto;scroll-snap-type:x mandatory;gap:14px !important;margin-right:-18px;padding-right:18px;padding-bottom:6px;scrollbar-width:none}.blog-row > *{flex:0 0 84%;min-width:0;scroll-snap-align:start}.blog-row::-webkit-scrollbar{display:none}}
.ck[hidden]{display:none !important}
.talep-ok{background:#E7F6EC;border:1px solid #9ED9B0;color:#1D5B33;border-radius:6px;padding:14px 16px;font-size:15px;font-weight:600}
.talep-err{background:#FDECEC;border:1px solid #F3B4B4;color:#8A1C1C;border-radius:6px;padding:14px 16px;font-size:15px;font-weight:600}
.hp-field{position:absolute !important;left:-9999px !important;width:1px;height:1px;overflow:hidden}
.screen-reader-text{position:absolute !important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.pager{display:flex;justify-content:center;gap:8px;padding-top:8px;flex-wrap:wrap}
.pager .page-numbers{min-width:44px;height:44px;padding:0 12px;box-sizing:border-box;border-radius:4px;border:1px solid #DCE2E9;color:#18212C;font-weight:700;display:flex;align-items:center;justify-content:center}
.pager .page-numbers.current{background:#0F1B2B;border-color:#0F1B2B;color:#FFFFFF}
.navlink.on::after{width:100%}
#chat-wrap:not(.show){display:none !important}
body.ax-open .wa{display:none !important}
/* Alpemix canlı destek penceresi – site görünümüne uyarlama */
#chat-wrap.show{right:24px !important;bottom:24px !important;border-radius:12px !important;overflow:hidden !important;box-shadow:0 30px 70px -20px rgba(8,17,28,.55),0 0 0 1px rgba(15,27,43,.08) !important;animation:fadeUp .35s cubic-bezier(.2,.7,.2,1) both}
#chat-wrap,#chat-wrap *{font-family:'CbayInter','Inter',system-ui,sans-serif !important}
.card:hover .thumb img{transform:scale(1.05)}
/* === MOBİL === */
.mbar{transform:translateY(110%);transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.mbar.on{transform:none}
@media (max-width: 700px){
 .pad-y{padding-top:56px !important;padding-bottom:56px !important}
 .wrap{padding-left:18px !important;padding-right:18px !important}
 .hero-h1{font-size:36px !important;line-height:1.1 !important}
 .sec-h2,section h2{font-size:28px !important;line-height:1.15 !important}
 .hero-photo .wrap,.hero-grid .wrap{padding-top:64px !important;padding-bottom:64px !important;min-height:0 !important}
 .hero-photo p,.hero-grid p{font-size:16px !important}
 .hero-photo .btn,.hero-grid .btn{flex:1 1 100%;justify-content:center}
 .ptile-img{height:170px !important}
 .ptile-body{padding:22px 20px 22px !important}
 .ptile-link{font-size:14px;padding:11px 0}
 .step-n{margin-top:0 !important;box-shadow:none !important}
 .band .wrap{padding-top:56px !important;padding-bottom:56px !important;gap:28px !important}
 .band .wrap > .stack{grid-template-columns:repeat(3,minmax(0,1fr)) !important;gap:10px !important}
 .band-stat{padding-left:10px !important;gap:4px !important}
 .band-n{font-size:30px !important}
 .band-l{font-size:12px !important;line-height:1.3}
 .band-track span{font-size:16px !important;padding:0 16px !important}
 .band-track span::after{margin-left:32px !important}
 .faq summary{font-size:17px !important;padding:18px 0 !important}
 .foot .stack{grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:32px 20px !important}
 .foot .stack > div:first-child,.foot .stack > div:last-child{grid-column:1/-1}
 body{padding-bottom:64px}
 .foot .stack a{display:inline-block;padding:6px 0}
 .nav-glass .wrap{padding-top:10px !important;padding-bottom:10px !important}
 .nav-glass a.og-logo img{height:44px !important}
 /* mobil: marka şeridi kaymaz, sabit ızgara (çok geniş hareketli katman telefonda takılıyordu) */
 #markalar .wrap{gap:18px !important;padding-top:28px !important;padding-bottom:28px !important}
 .logo-marquee::before,.logo-marquee::after{display:none}
 .logo-track{animation:none !important;width:auto !important;display:grid !important;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px 12px;align-items:center;justify-items:center;will-change:auto !important}
 .logo-track img{margin:0 !important;max-width:100% !important;transform:scale(.8)}
 .logo-track img[aria-hidden="true"]{display:none}
 .nav-glass{background:#FFFFFF !important;-webkit-backdrop-filter:none !important;backdrop-filter:none !important;animation:none !important}
 .nav-glass img{filter:none !important}
 .nav-glass .navlink{text-shadow:none !important}
 /* mobil hero: fotoğraf üstte net, yazı altta koyu zeminde */
 #top.hero-photo{display:flex;flex-direction:column}
 #top .hs{position:relative !important;inset:auto !important;height:230px;flex:none}
 #top .hs::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,17,28,0) 55%,#08111C 100%);z-index:1}
 #top > .hero-shade,#top > .hero-shade + div{display:none !important}
 #top > .wrap{min-height:0 !important;padding-top:20px !important;padding-bottom:48px !important}
 .hero-grid.hero-photo{display:flex;flex-direction:column;background:#08111C}
 .hero-grid.hero-photo .hp-bg{position:relative !important;inset:auto !important;width:100% !important;height:230px !important;flex:none;object-position:72% 50% !important;animation:none !important;transform:none !important}
 .hero-grid.hero-photo .hp-shade{inset:0 0 auto 0 !important;height:230px !important;background:linear-gradient(180deg,rgba(8,17,28,0) 55%,#08111C 100%) !important}
 .hero-grid.hero-photo .hp-inner{padding-top:20px !important;padding-bottom:48px !important}
}
.ck{display:none !important}
#chat-wrap #chat-header{background:#0F1B2B !important;background-image:none !important;border-radius:0 !important;border-bottom:3px solid #1F6FB2 !important;box-sizing:border-box}
#chat-wrap #chat-info,#chat-wrap #chat-info *,#chat-wrap #chat-status{color:#FFFFFF !important}
#chat-wrap #alpemixlogo{background:#FFFFFF url("../favicon/favicon.svg") center/62% no-repeat !important;box-shadow:0 0 0 3px #1F6FB2 !important}
#chat-wrap #chat-main{background:#FFFFFF !important}
#chat-wrap .text-cloud{background:#F2F5F8 !important;border:1px solid #E2E7ED !important;border-radius:10px !important;color:#18212C !important}
#chat-wrap .text-cloud *{color:inherit}
#chat-wrap img.with-border{background:#E8F1F9 !important}
#chat-wrap #chat-editor{border-top:1px solid #E2E7ED !important}
#chat-wrap #chat-text{background-image:none !important}
#chat-wrap #TextInput{color:#18212C !important;font-size:15px !important;font-weight:500 !important;padding-left:16px !important;box-sizing:border-box}
#chat-wrap #chat-footer{background:#F2F5F8 !important;color:#66727F !important;border-top:1px solid #E2E7ED}

@media (max-width: 560px){#chat-wrap.show{left:0 !important;right:0 !important;bottom:0 !important;width:100% !important;max-width:100% !important;z-index:200 !important}}
.map-frame{position:absolute;inset:0;width:100%;height:100%;border:0;z-index:2;display:block}
.map-frame[hidden]{display:none}
.map-load{position:absolute;left:50%;top:38%;transform:translate(-50%,-50%);z-index:3;display:flex;flex-direction:column;align-items:center;gap:2px;background:#FFFFFF;color:#0F1B2B;border:0;border-radius:6px;padding:12px 20px;font:inherit;font-size:15px;font-weight: 700;cursor:pointer;box-shadow:0 16px 40px -16px rgba(0,0,0,.6)}
.map-load span{font-size:12px;font-weight:600;color:#556170}
.map-load:hover{background:#E8F1F9}
#cbay-map.loaded .map-load{display:none}
#cbay-map > div:last-child{z-index:4}
.prose .lead{font-size:20px;line-height:1.65;color:#18212C}
.prose a{font-weight:700}
.prose img{max-width:100%;height:auto;border-radius:8px}