@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(../fonts/spacegrotesk-normal-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: 'Space Grotesk';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(../fonts/spacegrotesk-normal-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;
}@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(../fonts/inter-normal-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: 'Inter';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(../fonts/inter-normal-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;
}/* ===== Ortak temel + hareket altyapısı ===== */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font-body);font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer;background:none;border:0;padding:0}
input,textarea,select{font:inherit;color:inherit}
h1,h2,h3,h4{margin:0;font-family:var(--font-head);line-height:1.1;font-weight:600}
p{margin:0 0 1em}
ul{margin:0;padding:0}
.container{width:min(1240px,100% - 40px);margin-inline:auto}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
::selection{background:var(--accent);color:var(--on-accent,#fff)}

/* Perde geçişi: ilk yüklemede açılır, ayrılırken kapanır */
.curtain{position:fixed;inset:0;z-index:9999;pointer-events:none}
.curtain__panel{position:absolute;inset:0;background:var(--curtain,var(--accent));transform:translateY(0);animation:curtainOut .85s .1s cubic-bezier(.76,0,.24,1) forwards}
.curtain__panel+.curtain__panel{background:var(--curtain-2,var(--bg));animation-delay:0s}
.curtain__mark{position:absolute;inset:0;display:grid;place-items:center;animation:markOut .5s forwards}
@keyframes curtainOut{to{transform:translateY(-101%)}}
@keyframes markOut{to{opacity:0;transform:translateY(-20px)}}
.is-leaving .curtain{pointer-events:all}
.is-leaving .curtain__panel{animation:curtainIn .6s cubic-bezier(.76,0,.24,1) forwards;transform:translateY(101%)}
.is-leaving .curtain__panel+.curtain__panel{animation-delay:.08s}
.is-leaving .curtain__mark{animation:markIn .4s .25s both}
@keyframes curtainIn{from{transform:translateY(101%)}to{transform:translateY(0)}}
@keyframes markIn{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}

/* Kaydırma ilerleme çubuğu */
.progress{position:fixed;left:0;top:0;height:3px;width:100%;background:var(--accent);transform-origin:0 50%;transform:scaleX(0);z-index:1001}

/* Görünürlük animasyonları */
[data-reveal]{transition:opacity 1s cubic-bezier(.2,.7,.2,1),transform 1.1s cubic-bezier(.2,.7,.2,1),clip-path 1.2s cubic-bezier(.7,0,.2,1)}
[data-reveal]:not(.in){opacity:0;transform:translateY(38px)}
[data-reveal=left]:not(.in){transform:translateX(-50px)}
[data-reveal=right]:not(.in){transform:translateX(50px)}
[data-reveal=zoom]:not(.in){transform:scale(.92)}
[data-reveal=fade]:not(.in){transform:none}
/* Kırpma animasyonu öğenin kendisine değil içindeki görsele uygulanır; aksi halde IntersectionObserver öğeyi hiç görünür saymaz */
[data-reveal^=clip]:not(.in){opacity:1;transform:none}
[data-reveal^=clip]>img{clip-path:inset(0 0 0 0);transition:clip-path 1.3s cubic-bezier(.7,0,.2,1),transform 1.2s cubic-bezier(.2,.7,.2,1)}
[data-reveal=clip]:not(.in)>img{clip-path:inset(100% 0 0 0)}
[data-reveal=clip-x]:not(.in)>img{clip-path:inset(0 100% 0 0)}
[data-split]:not(.in){opacity:1;transform:none}
[data-split] .w{display:inline-block;overflow:hidden;vertical-align:top;padding:.32em 0 .1em;margin:-.32em 0 -.1em}
[data-split] .w>span{display:inline-block;transform:translateY(105%);transition:transform 1s cubic-bezier(.2,.8,.2,1)}
[data-split].in .w>span{transform:none}
.img-zoom{overflow:hidden}
.img-zoom img{transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.img-zoom:hover img{transform:scale(1.06)}
[data-parallax]{will-change:transform}

/* Marquee */
.marquee{overflow:hidden;white-space:nowrap;display:flex;user-select:none}
.marquee__track{display:flex;flex-shrink:0;animation:marquee var(--marquee-speed,40s) linear infinite;padding-right:0}
.marquee:hover .marquee__track{animation-play-state:paused}
@keyframes marquee{to{transform:translateX(-100%)}}

/* Akordeon */
.acc-body{max-height:0;overflow:hidden;transition:max-height .5s cubic-bezier(.2,.7,.2,1)}

/* Slayt */
[data-slider] .slide{transition:opacity .9s ease,transform .9s cubic-bezier(.2,.7,.2,1)}
[data-slider] .slide:not(.active){opacity:0;pointer-events:none;position:absolute;inset:0;transform:translateY(16px)}
[data-slider] .dots{display:flex;gap:8px}
[data-slider] .dots button{width:28px;height:4px;border-radius:4px;background:currentColor;opacity:.25;transition:opacity .3s,width .3s}
[data-slider] .dots button.active{opacity:1;width:48px}

/* Demo form */
form[data-demo-form] .form-ok{display:none}
form[data-demo-form].is-sent .form-ok{display:flex}
.is-busy{opacity:.6;pointer-events:none}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  [data-reveal]:not(.in),[data-reveal]>img,[data-split] .w>span{opacity:1!important;transform:none!important;clip-path:none!important}
}

/* hidden niteliği her zaman kazanır: display veren sınıflar gizli katmanı tıklanabilir bırakmasın */
[hidden]{display:none!important}

/* ===== Ortak galeri lightbox'ı (shared/lightbox.js) ===== */
[data-lb]{cursor:zoom-in}
/* ===== Teknosis Mekanik — çelik lacivert / marka mavisi / ısı turuncusu ===== */
:root{
  --bg:#f2f5f8;--paper:#e9eef3;--text:#142131;--muted:#5b6b7c;--line:rgba(20,33,49,.1);
  --ink:#07121f;--navy:#0b1c2e;--navy-2:#11283f;--blue:#1592e0;--cyan:#3cc8ff;--heat:#ff6a2b;--fire:#ef3b3b;
  --grad:linear-gradient(90deg,#3cc8ff,#1592e0 45%,#ff6a2b);
  --accent:var(--blue);--on-accent:#fff;--curtain:#07121f;--curtain-2:#1592e0;
  --font-head:'Space Grotesk',system-ui,sans-serif;--font-body:'Inter',system-ui,sans-serif;
  --r:16px;--ease:cubic-bezier(.2,.7,.2,1);--shadow:0 30px 60px -30px rgba(7,18,31,.45);
}
.curtain__mark img{width:210px;height:auto}
h1,h2,h3{font-weight:600;letter-spacing:-.03em}
.grad{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;background-size:200% 100%;animation:gradMove 6s ease-in-out infinite alternate}
.grad .w>span{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
@keyframes gradMove{to{background-position:100% 0}}
.section{padding:clamp(70px,9vw,130px) 0;position:relative}
.section--dark{background:var(--ink);color:#b7c4d3;overflow:hidden}
.section--dark .h2{color:#fff}
.section--paper{background:var(--paper)}
.tag{display:inline-flex;align-items:center;gap:10px;font-family:var(--font-head);font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--blue);margin-bottom:16px}
.tag::before{content:"";width:18px;height:2px;background:var(--grad)}
.tag--light{color:var(--cyan)}
.h2{font-size:clamp(34px,4.6vw,62px);line-height:1.02;color:var(--ink);margin-bottom:22px;isolation:isolate}
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;margin-bottom:clamp(34px,5vw,60px)}
.sec-head>div{max-width:720px}
.sec-head>p{max-width:430px;color:var(--muted);margin:0 0 24px}
.link-arrow{display:inline-flex;gap:10px;align-items:center;font-family:var(--font-head);font-weight:600;color:var(--ink);white-space:nowrap;padding:12px 0;border-bottom:1.5px solid var(--blue)}
.link-arrow .ic{transition:transform .35s var(--ease)}
.link-arrow:hover .ic{transform:translateX(6px)}
.link-arrow--light,.section--dark .link-arrow{color:#fff}

/* Blueprint ızgara */
.bp-grid{position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(rgba(60,200,255,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(60,200,255,.07) 1px,transparent 1px),linear-gradient(rgba(60,200,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(60,200,255,.035) 1px,transparent 1px);background-size:120px 120px,120px 120px,24px 24px,24px 24px;mask-image:radial-gradient(ellipse at 50% 40%,#000 30%,transparent 80%);-webkit-mask-image:radial-gradient(ellipse at 50% 40%,#000 30%,transparent 80%)}
.bp{position:relative;background:var(--navy);background-image:linear-gradient(rgba(60,200,255,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(60,200,255,.08) 1px,transparent 1px);background-size:20px 20px;background-position:-1px -1px}

/* İllüstrasyon çizim animasyonu */
.illus{width:100%;height:auto;display:block;stroke:#cfeaff;stroke-width:1.5;--tc:var(--cyan)}
.tone-heat .illus{--tc:var(--heat)}
.tone-fire .illus{--tc:var(--fire)}
.illus .acc{fill:var(--tc);fill-opacity:0;transition:fill-opacity 1s 1.1s}
.illus .dim{stroke:var(--tc);opacity:.55}
.illus .lbl{fill:var(--tc);stroke:none;font:600 9px var(--font-head);letter-spacing:.08em}
.illus :is(path,rect,circle,ellipse,line,polyline):not([stroke-dasharray]){stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.7s cubic-bezier(.6,0,.2,1)}
.illus [stroke-dasharray]{opacity:0;transition:opacity .8s 1.2s}
.in .illus :is(path,rect,circle,ellipse,line,polyline),.illus.in :is(path,rect,circle,ellipse,line,polyline){stroke-dashoffset:0}
.in .illus [stroke-dasharray]{opacity:.8}
.in .illus .acc{fill-opacity:.22}
.illus--big{stroke-width:1.2}

/* Butonlar */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:54px;padding:0 26px;border-radius:12px;font-family:var(--font-head);font-weight:600;font-size:15.5px;position:relative;overflow:hidden;isolation:isolate;transition:color .4s,background .4s,border-color .4s,transform .3s var(--ease),box-shadow .4s}
.btn::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--grad);opacity:0;transition:opacity .45s}
.btn:hover::before{opacity:1}
.btn .ic{transition:transform .35s var(--ease)}
.btn:hover .ic{transform:translateX(3px)}
.btn--primary{background:var(--blue);color:#fff;box-shadow:0 14px 34px -14px rgba(21,146,224,.8)}
.btn--glass{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.22);color:#fff;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.btn--line{border:1.5px solid var(--line);color:var(--ink);background:#fff}
.btn--line::before{background:var(--ink)}
.btn--line:hover{color:#fff}
.btn--sm{height:46px;padding:0 20px;font-size:14.5px}
.btn--block{width:100%}

/* Header */
.site-header{position:fixed;inset:0 0 auto;z-index:1000;padding:14px 0;transition:transform .5s var(--ease),background .4s,padding .4s,box-shadow .4s}
.site-header.is-scrolled{background:rgba(7,18,31,.82);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);padding:6px 0;box-shadow:0 1px 0 rgba(60,200,255,.15)}
.site-header.is-hidden{transform:translateY(-100%)}
.header__in{display:flex;align-items:center;gap:22px;height:64px}
.logo img{width:168px;height:auto}
.nav{display:flex;gap:2px;margin-left:auto}
.nav a{position:relative;padding:10px 14px;font-family:var(--font-head);font-weight:500;font-size:15px;color:rgba(255,255,255,.78);transition:color .3s}
.nav a::after{content:"";position:absolute;left:14px;right:14px;bottom:4px;height:2px;background:var(--grad);transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease)}
.nav a:hover,.nav a.active{color:#fff}
.nav a:hover::after,.nav a.active::after{transform:scaleX(1)}
.header__phone{display:flex;align-items:center;gap:8px;color:#fff;font-family:var(--font-head);font-weight:600;font-size:15px;white-space:nowrap}
.header__phone .ic{color:var(--cyan)}
.burger{display:none;width:48px;height:48px;border-radius:12px;border:1px solid rgba(255,255,255,.25);position:relative;margin-left:auto}
.burger i{position:absolute;left:13px;right:13px;height:2px;background:#fff;transition:transform .45s var(--ease),top .45s var(--ease)}
.burger i:first-child{top:19px}.burger i:last-child{top:27px}
.nav-open .burger i:first-child{top:23px;transform:rotate(45deg)}
.nav-open .burger i:last-child{top:23px;transform:rotate(-45deg)}
.mnav{position:fixed;inset:0;z-index:999;background:var(--ink);clip-path:inset(0 0 100% 0);transition:clip-path .7s cubic-bezier(.7,0,.2,1);visibility:hidden}
.nav-open .mnav{clip-path:inset(0);visibility:visible}
.nav-open{overflow:hidden}
.mnav__grid{position:absolute;inset:0;background-image:linear-gradient(rgba(60,200,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(60,200,255,.06) 1px,transparent 1px);background-size:32px 32px}
.mnav__in{position:relative;padding:110px 22px 30px;display:flex;flex-direction:column;min-height:100%}
.mnav__in>a{display:flex;align-items:baseline;gap:14px;font-family:var(--font-head);font-size:clamp(32px,9vw,46px);font-weight:600;color:#fff;padding:8px 0;border-bottom:1px solid rgba(255,255,255,.08);opacity:0;transform:translateY(24px);transition:opacity .5s,transform .6s var(--ease)}
.mnav__in>a span{font-size:13px;color:var(--cyan)}
.mnav__in>a.active{color:var(--cyan)}
.nav-open .mnav__in>a{opacity:1;transform:none;transition-delay:calc(.2s + var(--i)*.06s)}
.mnav__foot{margin-top:auto;padding-top:28px;display:grid;gap:14px;color:#b7c4d3}
.mnav__foot>a:not(.btn){display:flex;gap:10px;align-items:center}

/* Hero */
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;color:#fff;background:var(--ink);overflow:hidden;padding-top:120px}
.hero__bg{position:absolute;inset:0}
.hero__bg img{width:100%;height:100%;object-fit:cover;transform:scale(1.15);animation:heroZoom 14s .2s var(--ease) forwards;filter:saturate(.8)}
@keyframes heroZoom{to{transform:scale(1)}}
.hero__bg::after{content:"";position:absolute;inset:0;background:linear-gradient(95deg,rgba(7,18,31,.96) 10%,rgba(7,18,31,.75) 45%,rgba(7,18,31,.35)),linear-gradient(0deg,var(--ink),transparent 45%)}
.bp-grid--hero{mask-image:linear-gradient(90deg,#000,transparent 70%);-webkit-mask-image:linear-gradient(90deg,#000,transparent 70%)}
.hero__scan{position:absolute;left:0;right:0;top:0;height:140px;background:linear-gradient(180deg,transparent,rgba(60,200,255,.08),transparent);animation:scan 7s linear infinite;pointer-events:none}
@keyframes scan{from{transform:translateY(-140px)}to{transform:translateY(110vh)}}
.hero__grid{position:relative;display:grid;grid-template-columns:1.35fr .8fr;gap:50px;align-items:end;padding-bottom:50px}
.hero__tag{opacity:0;animation:fadeUp .8s .6s var(--ease) forwards}
.hero__tag::before{display:none}
.hero__tag i{width:8px;height:8px;border-radius:50%;background:var(--cyan);box-shadow:0 0 0 0 rgba(60,200,255,.6);animation:pulse 2.2s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 12px rgba(60,200,255,0)}100%{box-shadow:0 0 0 0 rgba(60,200,255,0)}}
@keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.hero__title{font-size:clamp(40px,5.4vw,80px);line-height:1;margin-bottom:26px;max-width:1000px}
.hero__lead{font-size:clamp(16px,1.4vw,19px);color:#c3cfdc;max-width:620px;margin-bottom:34px}
.rotator{position:relative;display:inline-block;vertical-align:bottom;height:1.5em;overflow:hidden;transition:width .5s var(--ease);color:#fff;font-weight:600}
.rotator b{position:absolute;left:0;top:0;white-space:nowrap;font-weight:600;border-bottom:2px solid var(--cyan);transform:translateY(110%);opacity:0;transition:transform .6s var(--ease),opacity .4s}
.rotator b.on{transform:none;opacity:1}
.rotator b.off{transform:translateY(-110%);opacity:0}
.hero__actions{display:flex;flex-wrap:wrap;gap:12px}
.hero__panel{background:rgba(11,28,46,.6);border:1px solid rgba(60,200,255,.18);border-radius:20px;padding:22px;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.gauge{position:relative;text-align:center}
.gauge svg{width:100%;max-width:280px;display:block;margin:0 auto}
.gauge__arc{stroke-dasharray:100;stroke-dashoffset:83;transition:stroke-dashoffset 1.2s var(--ease)}
.gauge__needle{transform-origin:100px 110px;transform:rotate(-58deg);transition:transform 1.2s cubic-bezier(.3,1.4,.5,1)}
.gauge__read{margin-top:4px;font-family:var(--font-head);line-height:1}
.gauge__read b{font-size:46px;font-weight:600}
.gauge__read span{font-size:18px;color:var(--cyan)}
.gauge__modes{display:flex;justify-content:center;gap:6px;margin-top:14px;flex-wrap:wrap}
.gauge__modes span{display:flex;align-items:center;gap:6px;padding:6px 10px;border-radius:20px;font-size:12.5px;color:#8fa3b8;border:1px solid rgba(255,255,255,.1);transition:all .4s}
.gauge__modes span.on{color:#fff;border-color:var(--cyan);background:rgba(60,200,255,.12)}
.gauge__modes span:last-child.on{border-color:var(--heat);background:rgba(255,106,43,.15)}
.hero__list{list-style:none;margin-top:18px;padding-top:16px;border-top:1px solid rgba(255,255,255,.08);display:grid;gap:10px;font-size:14.5px;color:#c3cfdc}
.hero__list li{display:flex;align-items:center;gap:10px}
.hero__list .ic{color:var(--cyan)}
.hero__stats{position:relative;border-top:1px solid rgba(255,255,255,.1);background:rgba(7,18,31,.5);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.hero__stats-in{display:grid;grid-template-columns:repeat(4,1fr)}
.hero__stats-in>div{padding:26px 24px;border-left:1px solid rgba(255,255,255,.08)}
.hero__stats-in>div:first-child{border-left:0;padding-left:0}
.hero__stats b{display:block;font-family:var(--font-head);font-size:clamp(32px,3.4vw,48px);font-weight:600;line-height:1}
.hero__stats span{font-size:13px;color:#8fa3b8;letter-spacing:.06em;text-transform:uppercase}

/* Ticker */
.ticker{background:var(--blue);color:#fff;padding:16px 0;--marquee-speed:70s}
.ticker .marquee__track{align-items:center}
.ticker span{font-family:var(--font-head);font-weight:500;font-size:19px;padding:0 20px}
.ticker i{width:8px;height:8px;border:2px solid #fff;transform:rotate(45deg);flex-shrink:0}

/* Çözüm kartları */
.sol-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.sol{position:relative;display:flex;flex-direction:column;border-radius:var(--r);background:var(--navy);overflow:hidden;isolation:isolate;color:#fff;transition:transform .5s var(--ease),box-shadow .5s}
.sol::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(360px circle at var(--mx,50%) var(--my,30%),rgba(60,200,255,.16),transparent 60%);opacity:0;transition:opacity .4s}
.sol.tone-heat::before{background:radial-gradient(360px circle at var(--mx,50%) var(--my,30%),rgba(255,106,43,.18),transparent 60%)}
.sol:hover{transform:translateY(-8px);box-shadow:var(--shadow)}
.sol:hover::before{opacity:1}
.sol__no{position:absolute;left:18px;top:14px;font-family:var(--font-head);font-size:13px;color:#6f86a0}
.sol__fig{padding:34px 18px 0;background-image:linear-gradient(rgba(60,200,255,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(60,200,255,.07) 1px,transparent 1px);background-size:20px 20px}
.sol__body{padding:18px 20px 22px}
.sol h3{font-size:21px;line-height:1.15;margin-bottom:6px}
.sol small{color:#8fa3b8;font-size:13.5px}
.sol__go{position:absolute;right:14px;top:12px;width:40px;height:40px;border-radius:10px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.14);transition:background .35s,transform .5s var(--ease),border-color .35s}
.sol:hover .sol__go{background:var(--blue);border-color:var(--blue);transform:rotate(45deg)}
.sol.tone-heat:hover .sol__go{background:var(--heat);border-color:var(--heat)}

/* Split / hakkımızda */
.split{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,7vw,100px);align-items:center}
.split p{color:var(--muted);font-size:16.5px}
.section--dark .split p{color:#a9b8c8}
.split__media{position:relative;padding:0 60px 70px 0}
.split__img{border-radius:var(--r);aspect-ratio:4/5}
.split__img img,.split__img2 img{width:100%;height:100%;object-fit:cover}
.split__img2{position:absolute;right:0;bottom:0;width:50%;aspect-ratio:1;border-radius:var(--r);border:8px solid var(--ink)}
.section:not(.section--dark) .split__img2{border-color:var(--bg)}
.badge-year{position:absolute;left:-18px;top:30px;display:flex;align-items:center;gap:12px;padding:18px 22px;border-radius:14px;background:var(--grad);color:#fff;box-shadow:var(--shadow)}
.badge-year b{font-family:var(--font-head);font-size:44px;line-height:1}
.badge-year span{font-size:12px;text-transform:uppercase;letter-spacing:.12em;line-height:1.3}
.checks{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:26px 0 30px}
.checks--col{grid-template-columns:1fr}
.checks li{display:flex;gap:10px;align-items:center;font-weight:500}
.section--dark .checks li{color:#e3ebf3}
.checks .ic{flex-shrink:0;width:28px;height:28px;padding:5px;border-radius:8px;background:rgba(21,146,224,.14);color:var(--blue)}
.section--dark .checks .ic{color:var(--cyan)}

/* Süreç */
.steps{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(6,1fr);gap:14px;position:relative}
.steps::before{content:"";position:absolute;left:0;right:0;top:28px;height:2px;background:var(--line)}
.steps li{position:relative;padding-right:8px}
.steps__ic{position:relative;z-index:1;display:grid;place-items:center;width:58px;height:58px;border-radius:14px;background:#fff;border:1px solid var(--line);color:var(--blue);margin-bottom:22px;transition:background .4s,color .4s,transform .5s var(--ease)}
.steps li.in .steps__ic{animation:stepPop .6s var(--ease) both;animation-delay:inherit}
@keyframes stepPop{from{transform:scale(.6)}}
.steps li:hover .steps__ic{background:var(--blue);color:#fff;transform:translateY(-4px)}
.steps em{font-style:normal;font-family:var(--font-head);font-size:13px;color:var(--blue);font-weight:600}
.steps h3{font-size:21px;color:var(--ink);margin:4px 0 8px}
.steps p{color:var(--muted);font-size:14.5px;margin:0}

/* Sekmeler + ürün kartları */
.tabs{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;margin-bottom:26px;padding-bottom:4px}
.tabs::-webkit-scrollbar{display:none}
.tabs button{flex-shrink:0;padding:11px 18px;border-radius:10px;background:#fff;border:1px solid var(--line);font-family:var(--font-head);font-weight:500;font-size:15px;transition:all .3s}
.tabs button:hover{border-color:var(--blue)}
.tabs button.active{background:var(--ink);color:#fff;border-color:var(--ink)}

.prod-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.tabpane:not(.active){display:none}
.prod{position:relative;display:flex;flex-direction:column;border-radius:var(--r);background:#fff;border:1px solid var(--line);overflow:hidden;transition:transform .5s var(--ease),box-shadow .5s,border-color .4s}
.prod[hidden]{display:none}
.prod:hover{transform:translateY(-6px);box-shadow:var(--shadow);border-color:transparent}
.prod__fig{padding:22px 14px 10px}
.prod__body{position:relative;padding:16px 18px 18px;display:block}
.prod__body small{display:block;font-size:12px;color:var(--blue);font-weight:600;text-transform:uppercase;letter-spacing:.06em;margin-bottom:4px}
.tone-heat .prod__body small,.prod.tone-heat .prod__body small{color:var(--heat)}
.prod.tone-fire .prod__body small{color:var(--fire)}
.prod__body b{display:block;font-family:var(--font-head);font-size:18px;font-weight:600;line-height:1.2;color:var(--ink);padding-right:40px}
.prod__go{position:absolute;right:14px;bottom:16px;width:36px;height:36px;border-radius:10px;display:grid;place-items:center;background:var(--paper);color:var(--ink);transition:background .35s,color .35s,transform .5s var(--ease)}
.prod:hover .prod__go{background:var(--blue);color:#fff;transform:rotate(45deg)}
.prod:hover .illus :is(path,rect,circle,ellipse,line){stroke:#fff}
.prod.pop{animation:pop .5s var(--ease) both}
@keyframes pop{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* Projeler (ana sayfa listesi) */
.plist{position:relative}
.prow{display:grid;grid-template-columns:60px 1.4fr 1fr .8fr;gap:20px;align-items:center;padding:26px 6px;border-top:1px solid rgba(255,255,255,.1);transition:padding .4s var(--ease),background .4s}
.prow:last-of-type{border-bottom:1px solid rgba(255,255,255,.1)}
.prow__no{font-family:var(--font-head);color:var(--cyan);font-size:14px}
.prow b{font-family:var(--font-head);font-size:clamp(20px,2.2vw,30px);font-weight:500;color:#fff;letter-spacing:-.02em}
.prow__meta{color:#8fa3b8}
.prow__city{text-align:right;color:#b7c4d3;font-family:var(--font-head)}
.prow:hover{padding-left:20px;background:linear-gradient(90deg,rgba(21,146,224,.12),transparent)}
.plist__float{position:absolute;left:0;top:0;width:300px;aspect-ratio:4/3;border-radius:14px;overflow:hidden;pointer-events:none;opacity:0;transition:opacity .35s;z-index:3;box-shadow:0 30px 60px -20px rgba(0,0,0,.6)}
.plist__float.show{opacity:1}
.plist__float img{width:100%;height:100%;object-fit:cover}
.proj-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.proj{position:relative;border-radius:var(--r);aspect-ratio:4/3.4;background:var(--ink)}
.proj img{width:100%;height:100%;object-fit:cover;opacity:.75}
.proj__over{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;padding:22px;color:#fff;background:linear-gradient(0deg,rgba(7,18,31,.95),rgba(7,18,31,.1) 65%)}
.proj__cat{align-self:flex-start;padding:5px 12px;border-radius:20px;background:rgba(21,146,224,.9);font-size:12.5px;font-weight:600;margin-bottom:auto}
.proj h3{font-size:24px;line-height:1.15;margin-bottom:6px}
.proj p{display:flex;align-items:center;gap:6px;margin:0;color:#b7c4d3;font-size:14px}
.proj__scope{margin-top:10px;font-size:12.5px;color:var(--cyan);text-transform:uppercase;letter-spacing:.08em;max-height:0;opacity:0;transition:max-height .5s,opacity .5s}
.proj:hover .proj__scope{max-height:30px;opacity:1}
.note{margin-top:20px;font-size:13px;color:var(--muted);text-align:center}

/* CTA */
.cta-band{position:relative;background:var(--navy);color:#fff;padding:clamp(70px,8vw,110px) 0;overflow:hidden}
.cta-band::after{content:"";position:absolute;width:600px;height:600px;border-radius:50%;right:-200px;top:-260px;background:radial-gradient(circle,rgba(255,106,43,.25),transparent 65%)}
.cta-band__in{position:relative;z-index:1;display:flex;justify-content:space-between;align-items:flex-end;gap:30px}
.cta-band__title{font-size:clamp(36px,5vw,70px);line-height:1;max-width:760px}
.cta-band__actions{display:flex;gap:12px;flex-wrap:wrap}

/* Sayfa başlığı */
.phero{position:relative;min-height:clamp(420px,60vh,600px);display:flex;align-items:flex-end;padding:150px 0 64px;background:var(--ink);color:#fff;overflow:hidden}
.phero__bg{position:absolute;inset:-14% 0}
.phero__bg img{width:100%;height:100%;object-fit:cover;opacity:.35;filter:saturate(.7)}
.phero::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,var(--ink),rgba(7,18,31,.3) 75%);pointer-events:none}
.phero__in{position:relative;z-index:1}
.phero h1{font-size:clamp(42px,6.4vw,90px);line-height:1;max-width:980px}
.phero p{margin:20px 0 0;color:#b7c4d3;font-size:18px;max-width:640px}
.crumbs{display:flex;flex-wrap:wrap;gap:8px;font-size:14px;color:#8fa3b8;margin-bottom:22px}
.crumbs a:hover{color:var(--cyan)}

/* Çözümler sayfası */
.sol-list{display:grid;gap:18px}
.sol-row{display:grid;grid-template-columns:380px 1fr;gap:clamp(24px,4vw,60px);align-items:center;padding:18px;border-radius:20px;background:#fff;border:1px solid var(--line);transition:transform .5s var(--ease),box-shadow .5s}
.sol-row:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.sol-row__fig{border-radius:14px;padding:20px}
.sol-row em{font-style:normal;font-family:var(--font-head);color:var(--blue);font-weight:600}
.sol-row.tone-heat em{color:var(--heat)}
.sol-row.tone-fire em{color:var(--fire)}
.sol-row h2{font-size:clamp(26px,3vw,38px);color:var(--ink);margin:6px 0 12px}
.sol-row p{color:var(--muted);margin-bottom:14px}
.sol-detail{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,6vw,90px);align-items:center}
.sol-detail__fig{border-radius:24px;padding:clamp(20px,4vw,50px)}
.lead{font-size:clamp(18px,1.6vw,21px);color:var(--text);line-height:1.6}
.row-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:10px}
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chip{display:inline-flex;align-items:center;gap:8px;padding:12px 18px;border-radius:12px;background:#fff;border:1px solid var(--line);font-family:var(--font-head);font-weight:500;transition:all .3s}
.chip:hover{background:var(--ink);color:#fff;border-color:var(--ink)}

/* Ürün listesi */
.filterbar{display:grid;gap:16px;margin-bottom:18px}
.search{display:flex;align-items:center;gap:10px;height:56px;padding:0 18px;border-radius:14px;background:#fff;border:1.5px solid var(--line);max-width:520px;transition:border-color .3s,box-shadow .3s}
.search:focus-within{border-color:var(--blue);box-shadow:0 0 0 5px rgba(21,146,224,.12)}
.search .ic{color:var(--muted)}
.search input{flex:1;border:0;outline:0;background:none;font-size:16px}
.chips--filter{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding-bottom:4px}
.chips--filter::-webkit-scrollbar{display:none}
.chips--filter button{flex-shrink:0;display:flex;align-items:center;gap:8px;padding:10px 16px;border-radius:10px;background:#fff;border:1px solid var(--line);font-family:var(--font-head);font-weight:500;transition:all .3s}
.chips--filter em{font-style:normal;font-size:12px;padding:2px 7px;border-radius:8px;background:var(--paper);color:var(--muted)}
.chips--filter button.active{background:var(--ink);color:#fff;border-color:var(--ink)}
.chips--filter button.active em{background:var(--blue);color:#fff}
.found{color:var(--muted);margin-bottom:20px}
.none{text-align:center;padding:50px;color:var(--muted)}

/* Ürün detay */
.pd{position:relative;background:var(--ink);color:#fff;padding:140px 0 clamp(60px,8vw,110px);overflow:hidden}
.pd__grid{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,6vw,90px);align-items:center}
.pd__fig{border-radius:24px;padding:clamp(20px,4vw,50px);border:1px solid rgba(60,200,255,.2)}
.pd__note{position:absolute;left:18px;bottom:14px;font-size:11.5px;color:#6f86a0;letter-spacing:.06em;text-transform:uppercase}
.pd h1{font-size:clamp(38px,5vw,72px);line-height:1;margin-bottom:20px}
.pd__desc{font-size:18px;color:#c3cfdc}
.pd__feats{list-style:none;display:grid;gap:10px;margin:24px 0 30px}
.pd__feats li{display:flex;gap:10px;align-items:center;color:#dfe8f1}
.pd__feats .ic{color:var(--cyan)}
.tone-heat .pd__feats .ic{color:var(--heat)}
.doc-link{display:inline-flex;align-items:center;gap:10px;margin-top:22px;color:var(--cyan);font-weight:500;border-bottom:1px dashed rgba(60,200,255,.5);padding-bottom:3px}

/* Kurumsal */
.mv{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:18px}
.mv__card{padding:clamp(26px,4vw,44px);border-radius:20px;background:rgba(17,40,63,.6);border:1px solid rgba(60,200,255,.15);backdrop-filter:blur(8px)}
.mv__card h2{font-size:clamp(24px,2.4vw,32px);color:#fff;line-height:1.15;margin-bottom:22px}
.mv__card ol{list-style:none;counter-reset:m;display:grid;gap:12px;padding:0;margin:0}
.mv__card li{counter-increment:m;display:flex;gap:14px;color:#b7c4d3}
.mv__card li::before{content:counter(m,decimal-leading-zero);font-family:var(--font-head);color:var(--cyan);font-weight:600}
.policy{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(30px,5vw,70px);align-items:start}
.policy__list{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.policy__list>div{display:flex;gap:12px;padding:20px;border-radius:14px;background:#fff;border:1px solid var(--line)}
.policy__list .ic{flex-shrink:0;color:var(--blue)}
.policy__list p{margin:0;font-size:15px;color:var(--text)}
.env{margin-top:clamp(30px,5vw,60px);display:flex;gap:22px;align-items:flex-start;padding:clamp(24px,4vw,40px);border-radius:20px;background:linear-gradient(135deg,#e7f4fc,#eef6ea)}
.env__ic{flex-shrink:0;width:60px;height:60px;border-radius:14px;display:grid;place-items:center;background:#fff;color:var(--blue)}
.env h3{font-size:24px;color:var(--ink);margin-bottom:8px}
.env p{margin:0;color:var(--muted)}

/* İletişim */
.contact{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,50px);align-items:start}
.cinfo{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.cinfo__item{position:relative;display:flex;flex-direction:column;gap:12px;padding:22px;border-radius:14px;background:#fff;border:1px solid var(--line);overflow:hidden;isolation:isolate;transition:border-color .3s,transform .4s var(--ease)}
.cinfo__item::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(240px circle at var(--mx,50%) var(--my,50%),rgba(21,146,224,.12),transparent 60%);opacity:0;transition:opacity .4s}
.cinfo__item:hover{border-color:var(--blue);transform:translateY(-3px)}
.cinfo__item:hover::before{opacity:1}
.cinfo__item .ic{color:var(--blue)}
.cinfo__item small{display:block;font-size:12.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.cinfo__item b{font-family:var(--font-head);font-weight:600;color:var(--ink);word-break:break-word}
.map{margin-top:12px;height:300px;border-radius:14px;overflow:hidden;border:1px solid var(--line)}
.map iframe{width:100%;height:100%;border:0}
.cform{padding:clamp(24px,4vw,40px);border-radius:20px;background:var(--ink);color:#fff;display:grid;gap:14px;background-image:linear-gradient(rgba(60,200,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(60,200,255,.05) 1px,transparent 1px);background-size:24px 24px}
.cform h2{font-size:30px;margin:-6px 0 6px}
.cform label{display:grid;gap:6px;font-size:13px;color:#8fa3b8;font-weight:500}
.cform__row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.cform input,.cform textarea{width:100%;padding:14px 16px;border-radius:12px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.05);color:#fff;outline:none;resize:vertical;transition:border-color .3s,background .3s}
.cform input:focus,.cform textarea:focus{border-color:var(--cyan);background:rgba(255,255,255,.09)}
.cform textarea::placeholder{color:#6f86a0}
.form-ok{align-items:center;gap:8px;padding:12px 16px;border-radius:12px;background:rgba(60,200,255,.12);color:var(--cyan)}

/* Footer */
.footer{background:var(--ink);color:#8fa3b8;font-size:15px}
.footer__grid{display:grid;grid-template-columns:1.4fr 1.2fr .9fr 1.2fr;gap:40px;padding:70px 0 50px}
.footer__brand img{width:180px;margin-bottom:18px}
.footer__brand p{max-width:330px}
.social{display:flex;gap:8px;margin-top:18px}
.social a{width:42px;height:42px;border-radius:10px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.12);color:#fff;transition:background .3s,border-color .3s}
.social a:hover{background:var(--blue);border-color:var(--blue)}
.footer h4{font-family:var(--font-head);font-size:17px;font-weight:600;color:#fff;margin-bottom:18px}
.footer ul{list-style:none;display:grid;gap:9px}
.footer a{transition:color .3s}
.footer a:hover{color:var(--cyan)}
.footer__contact li{display:flex;gap:10px;align-items:flex-start}
.footer__contact .ic{color:var(--cyan);flex-shrink:0;margin-top:2px}
.footer__bottom{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;padding:22px 0 28px;border-top:1px solid rgba(255,255,255,.08);font-size:13.5px}
.fab-wa{position:fixed;right:20px;bottom:20px;z-index:900;width:58px;height:58px;border-radius:50%;background:#25d366;color:#fff;display:grid;place-items:center;box-shadow:0 14px 30px -8px rgba(37,211,102,.6);transition:transform .4s var(--ease)}
.fab-wa:hover{transform:scale(1.08) rotate(-8deg)}

/* Responsive */
@media (max-width:1180px){
  .header__phone{display:none}
  .nav a{padding:10px 10px;font-size:14.5px}
  .sol-grid,.prod-grid{grid-template-columns:repeat(3,1fr)}
  .steps{grid-template-columns:repeat(3,1fr);row-gap:40px}
  .steps::before{display:none}
}
@media (max-width:980px){
  .nav,.header__cta{display:none}
  .burger{display:block}
  .hero__grid,.split,.sol-detail,.pd__grid,.mv,.policy,.contact{grid-template-columns:1fr}
  .hero__panel{max-width:440px}
  .sol-grid,.prod-grid{grid-template-columns:repeat(2,1fr)}
  .sol-row{grid-template-columns:1fr}
  .sol-row__fig{max-width:420px}
  .proj-grid{grid-template-columns:1fr 1fr}
  .prow{grid-template-columns:40px 1fr;row-gap:4px}
  .prow__meta{grid-column:2}
  .prow__city{grid-column:2;text-align:left;font-size:14px}
  .sec-head{flex-direction:column;align-items:flex-start;gap:10px}
  .cta-band__in{flex-direction:column;align-items:flex-start}
  .footer__grid{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  .container{width:calc(100% - 32px)}
  .site-header{padding:8px 0}
  .logo img{width:140px}
  .hero{padding-top:100px}
  .hero__title{font-size:clamp(38px,10.5vw,50px)}
  .hero__panel{display:none}
  .hero__actions .btn{flex:1 1 100%}
  .hero__grid{padding-bottom:30px}
  .hero__stats-in{grid-template-columns:1fr 1fr}
  .hero__stats-in>div{padding:16px 12px}
  .hero__stats-in>div:nth-child(odd){border-left:0;padding-left:0}
  .hero__stats-in>div:nth-child(-n+2){border-bottom:1px solid rgba(255,255,255,.08)}
  .ticker span{font-size:16px}
  .sol-grid,.prod-grid{grid-template-columns:1fr 1fr;gap:10px}
  .sol__fig{padding:28px 8px 0}
  .sol__body{padding:12px 14px 16px}
  .sol h3{font-size:16.5px}
  .sol small{display:none}
  .sol__go{width:32px;height:32px;right:8px;top:8px}
  .prod__fig{padding:14px 8px 4px}
  .prod__body{padding:12px 12px 14px}
  .prod__body b{font-size:15px;padding-right:0}
  .prod__body small{font-size:10px}
  .prod__go{display:none}
  .split__media{padding:0 30px 50px 0}
  .badge-year{left:-6px;top:16px;padding:12px 16px}
  .badge-year b{font-size:32px}
  .checks{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr 1fr;gap:26px 14px}
  .steps h3{font-size:18px}
  .proj-grid,.policy__list,.cinfo,.cform__row,.footer__grid{grid-template-columns:1fr}
  .env{flex-direction:column}
  .pd{padding-top:110px}
  .fab-wa{width:52px;height:52px;right:14px;bottom:14px}
}
/* ---------- lightbox: sürükle = önceki/sonraki, çift tık / iki parmak = yakınlaştır; küçük resimler fare ve parmakla kayar ---------- */
html.lbx-open, html.lbx-open body { overflow: hidden; }
.lbx-open .fab, .lbx-open .totop { opacity: 0 !important; visibility: hidden; }
.lbx { position: fixed; inset: 0; z-index: 10050; display: grid; grid-template-columns: 76px minmax(0, 1fr) 76px; grid-template-rows: auto minmax(0, 1fr) auto; align-items: center; color: #fff; font-family: var(--font-body); }
.lbx__bg { position: absolute; inset: 0; background: rgba(4, 18, 42, .95); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); opacity: 0; transition: opacity .35s; }
.lbx.is-open .lbx__bg { opacity: var(--fade, 1); }
.lbx__top { position: relative; z-index: 3; grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; padding: 14px 16px 6px 22px; opacity: 0; transition: opacity .35s .1s; }
.lbx.is-open .lbx__top, .lbx.is-open .lbx__nav, .lbx.is-open .lbx__thumbs { opacity: 1; }
.lbx__count { font: 500 13px/1 var(--font-head); letter-spacing: .14em; color: rgba(255, 255, 255, .72); }
.lbx__tools { display: flex; gap: 8px; }
.lbx__btn { position: relative; display: grid; place-items: center; width: 50px; height: 50px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .1); color: #fff; cursor: pointer; transition: background-color .25s, color .25s, transform .25s; }
.lbx__btn:hover { background: var(--cyan); color: var(--ink); transform: scale(1.05); }
.lbx__btn:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.lbx__btn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.lbx__plus { transition: opacity .2s; }
.lbx.is-zoomed .lbx__plus { opacity: 0; }
.lbx__nav { position: relative; z-index: 2; justify-self: center; opacity: 0; transition: opacity .35s .15s, background-color .25s, transform .25s; }
.lbx.is-single .lbx__nav, .lbx.is-single .lbx__thumbs { display: none; }
.lbx__prev { grid-column: 1; grid-row: 2; } .lbx__stage { grid-column: 2; grid-row: 2; } .lbx__next { grid-column: 3; grid-row: 2; }
.lbx__stage { position: relative; margin: 0; height: 100%; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 6px 0; transform: scale(.6); transform-origin: var(--ox) var(--oy); opacity: 0; transition: transform .45s cubic-bezier(.2, .8, .2, 1), opacity .3s; touch-action: none; cursor: grab; -webkit-user-select: none; user-select: none; }
.lbx.is-open .lbx__stage { transform: none; opacity: 1; }
.lbx__stage.is-grab, .lbx__stage.is-grab .lbx__img { cursor: grabbing; }
.lbx__pan { display: flex; justify-content: center; max-width: 100%; min-height: 0; will-change: transform; }
.lbx__img { max-width: 100%; max-height: calc(100vh - 220px); max-height: calc(100dvh - 220px); border-radius: 14px; box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .8); opacity: 0; cursor: zoom-in; -webkit-user-drag: none; transition: opacity .35s, transform .45s cubic-bezier(.2, .8, .2, 1); }
.lbx.is-zoomed .lbx__img { cursor: move; }
.lbx__img.from-r { transform: translateX(40px); } .lbx__img.from-l { transform: translateX(-40px); } .lbx__img.in { opacity: 1; transform: none; }
.lbx__cap { max-width: 760px; padding: 0 16px; text-align: center; font-size: 15px; color: rgba(255, 255, 255, .82); }
.lbx__cap, .lbx__thumbs, .lbx__nav { transition: opacity .3s; }
.lbx.is-zoomed .lbx__cap, .lbx.is-zoomed .lbx__thumbs, .lbx.is-zoomed .lbx__nav { opacity: 0; pointer-events: none; }
.lbx__spin { position: absolute; left: 50%; top: 50%; width: 38px; height: 38px; margin: -19px 0 0 -19px; border-radius: 50%; border: 3px solid rgba(255, 255, 255, .2); border-top-color: var(--cyan); animation: lbxSpin .8s linear infinite; opacity: 0; transition: opacity .2s; pointer-events: none; }
.lbx.is-loading .lbx__spin { opacity: 1; }
@keyframes lbxSpin { to { transform: rotate(360deg); } }
.lbx__thumbs { position: relative; grid-column: 1 / -1; display: flex; gap: 8px; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; touch-action: pan-x; padding: 10px 18px 16px; scrollbar-width: none; opacity: 0; transition: opacity .35s .2s; justify-content: safe center; cursor: grab; -webkit-user-select: none; user-select: none; }
.lbx__thumbs::-webkit-scrollbar { display: none; }
.lbx__thumbs.is-drag { cursor: grabbing; }
.lbx__thumbs button { flex-shrink: 0; width: 64px; height: 64px; padding: 0; border: 0; border-radius: 10px; overflow: hidden; opacity: .45; background: none; cursor: inherit; transition: opacity .25s, box-shadow .25s, transform .25s; }
.lbx__thumbs button:hover { opacity: .85; }
.lbx__thumbs button.is-on { opacity: 1; box-shadow: 0 0 0 2px var(--cyan); transform: translateY(-2px); }
.lbx__thumbs img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
@media (max-width: 700px) {
  .lbx { grid-template-columns: 1fr 1fr; grid-template-rows: auto minmax(0, 1fr) auto auto; }
  .lbx__stage { grid-column: 1 / -1; grid-row: 2; padding: 0 8px; }
  .lbx__img { max-height: calc(100dvh - 250px); }
  .lbx__prev { grid-column: 1; grid-row: 3; justify-self: end; margin-right: 10px; }
  .lbx__next { grid-column: 2; grid-row: 3; justify-self: start; margin-left: 10px; }
  .lbx__thumbs { grid-row: 4; }
  .lbx__thumbs button { width: 52px; height: 52px; }
}
@media (prefers-reduced-motion: reduce) { .lbx__stage, .lbx__img { transition: none; } }
/* ===== teknosismekanik.com canlı ekleri (2026-10-29): sahadan fotoğraflar, galeri, blog, SSS, iletişim düğmesi ===== */
:root{--hdr:84px}
html.hd-hid{--hdr:0px}
[data-sticky]{position:sticky;top:calc(var(--hdr) + 20px);transition:top .4s var(--ease)}
.section--tight{padding:clamp(40px,5vw,70px) 0}
.btn--wa{background:#0f7a43;color:#fff;box-shadow:0 14px 30px -14px rgba(15,122,67,.8)}
.btn--wa:hover{background:#0c6638}
.form-ok:not([hidden]){display:flex}
@media (max-width:1320px){.header__phone{display:none}}
@media (max-width:1120px){.nav a{padding:10px 8px;font-size:14px}.nav a::after{left:8px;right:8px}}

/* Hero: sahadan fotoğraf geçişi + video kartı */
.hero__slides img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;animation:none;transform:scale(1.12);transition:opacity 1.6s ease,transform 9s linear;filter:saturate(.85)}
.hero__slides img.is-on{opacity:1;transform:scale(1)}
.hero__slides{z-index:0}
.hero__slides::after{z-index:1}
.hvid{margin:0;position:relative;justify-self:end;width:min(100%,290px);aspect-ratio:9/16;max-height:60svh;border-radius:20px;overflow:hidden;background:var(--navy);border:1px solid rgba(60,200,255,.25);box-shadow:0 40px 80px -30px rgba(0,0,0,.7)}
.hvid video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hvid figcaption{position:absolute;inset:auto 0 0;padding:44px 16px 14px;display:grid;gap:4px;background:linear-gradient(0deg,rgba(7,18,31,.92),transparent);color:#fff}
.hvid figcaption b{font-family:var(--font-head);font-size:17px;font-weight:600}
.hvid figcaption a{display:inline-flex;gap:6px;align-items:center;font-size:13.5px;color:var(--cyan)}
.hvid__live{display:inline-flex;align-items:center;gap:8px;font-size:11.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--cyan)}
.hvid__live i{width:8px;height:8px;border-radius:50%;background:#ff4b4b;animation:blink 1.6s ease-in-out infinite}
@keyframes blink{50%{opacity:.25}}
.hvid--m{display:none}
.hvid--tile{width:auto;max-height:none;aspect-ratio:1;border-radius:14px;justify-self:stretch}
@media (max-width:980px){.hero .hvid{display:none}.hvid--m{display:block;margin:22px auto 0;width:min(100%,360px);max-height:none}}

/* Sahadan kare fotoğraflar */
.saha-cats{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:22px}
.saha-cat{display:inline-flex;align-items:center;gap:10px;padding:10px 16px;border-radius:40px;background:#fff;border:1px solid var(--line);font-family:var(--font-head);font-weight:600;color:var(--ink);transition:border-color .3s,transform .3s var(--ease)}
.saha-cat .ic{color:var(--blue)}
.saha-cat b{font-size:13px;color:#fff;background:var(--blue);border-radius:20px;padding:2px 9px}
.saha-cat:hover{border-color:var(--blue);transform:translateY(-2px)}
.saha-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.saha-grid--sol{grid-template-columns:repeat(6,minmax(0,1fr))}
.ph{position:relative;display:block;aspect-ratio:1;border-radius:14px;overflow:hidden;background:var(--navy)}
.ph img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.ph:hover img{transform:scale(1.07)}
.ph__zoom{position:absolute;right:10px;bottom:10px;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:rgba(7,18,31,.65);color:#fff;opacity:0;transform:scale(.8);transition:opacity .3s,transform .3s var(--ease)}
.ph:hover .ph__zoom{opacity:1;transform:none}
.ph--more,.app__thumbs a.is-more{position:absolute!important;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);opacity:0;pointer-events:none}
.saha-more{margin-top:16px;font-size:14px;color:#8fa3b8}
.center-cta{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:34px}
@media (max-width:1100px){.saha-grid--sol{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:640px){.saha-grid,.saha-grid--sol{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.saha-cat{padding:8px 12px;font-size:14px}.center-cta .btn{flex:1 1 100%}}

/* Galeri */
.gfilter{display:flex;gap:8px;overflow-x:auto;overflow-y:hidden;overscroll-behavior-y:auto;touch-action:pan-x pan-y;scrollbar-width:none;padding-bottom:4px;margin-bottom:26px}
.gfilter::-webkit-scrollbar{display:none}
.gfilter button,.gfilter a{flex:0 0 auto;display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:40px;border:1px solid var(--line);background:#fff;font-family:var(--font-head);font-weight:600;font-size:14.5px;color:var(--ink);white-space:nowrap;transition:background .3s,color .3s,border-color .3s}
.gfilter b{font-size:12px;padding:1px 8px;border-radius:20px;background:var(--paper);color:var(--muted)}
.gfilter .active{background:var(--ink);border-color:var(--ink);color:#fff}
.gfilter .active b{background:var(--blue);color:#fff}
.gal{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
.gal__vid{margin:0;position:relative;aspect-ratio:1;border-radius:14px;overflow:hidden;background:var(--navy)}
.gal__vid video{width:100%;height:100%;object-fit:cover}
.gal__vid figcaption{position:absolute;left:8px;top:8px;display:inline-flex;gap:6px;align-items:center;padding:5px 10px;border-radius:20px;background:rgba(7,18,31,.75);color:#fff;font-size:12.5px;pointer-events:none}
.gal .ph.pop{animation:galPop .5s var(--ease) both}
@keyframes galPop{from{opacity:0;transform:scale(.94)}}
.gal__note{margin-top:20px;color:var(--muted);font-size:14px}
@media (max-width:1100px){.gal{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:760px){.gal{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}}
@media (max-width:480px){.gal{grid-template-columns:repeat(2,minmax(0,1fr))}.ph{border-radius:10px}}

/* Uygulamalar */
.apps{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.app{background:#fff;border:1px solid var(--line);border-radius:20px;overflow:hidden;display:flex;flex-direction:column}
.app__cover{position:relative;display:block;aspect-ratio:16/10;overflow:hidden;background:var(--navy)}
.app__cover img{width:100%;height:100%;object-fit:cover}
.app__count{position:absolute;right:12px;top:12px;display:inline-flex;gap:6px;align-items:center;padding:6px 11px;border-radius:20px;background:rgba(7,18,31,.75);color:#fff;font-size:13px;font-weight:600}
.app__thumbs{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;padding:6px 6px 0}
.app__thumbs a{position:relative;aspect-ratio:1;border-radius:10px;overflow:hidden;display:block}
.app__thumbs img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.app__thumbs a:hover img{transform:scale(1.08)}
.app__thumbs span{position:absolute;inset:0;display:grid;place-items:center;background:rgba(7,18,31,.62);color:#fff;font-family:var(--font-head);font-size:20px;font-weight:600}
.app__body{padding:18px 20px 22px}
.app__cat{display:inline-flex;gap:6px;align-items:center;font-size:12.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--blue)}
.app h3{font-size:22px;margin:8px 0 6px;color:var(--ink)}
.app p{color:var(--muted);margin:0}
@media (max-width:900px){.apps{grid-template-columns:1fr}}

/* Çözüm: kullanım ve teklif kartları */
.uses{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.uses__card{padding:clamp(22px,3vw,34px);border-radius:20px;background:#fff;border:1px solid var(--line)}
.uses__card--alt{background:var(--paper)}
.uses__card h2{display:flex;gap:10px;align-items:center;font-size:22px;margin-bottom:16px;color:var(--ink)}
.uses__card h2 .ic{color:var(--blue)}
.uses__card ul{list-style:none;display:grid;gap:10px;margin-bottom:12px}
.uses__card li{display:flex;gap:10px;align-items:flex-start}
.uses__card li .ic{color:var(--blue);flex-shrink:0;margin-top:3px}
@media (max-width:760px){.uses{grid-template-columns:1fr}}

/* Ürün detay: fotoğraflar + yapışkan yan sütun */
.pd__gal{position:relative;min-width:0}
.pd__main{position:relative;display:block;aspect-ratio:4/3;border-radius:22px;overflow:hidden;border:1px solid rgba(60,200,255,.2);background:var(--navy)}
.pd__main img{width:100%;height:100%;object-fit:cover}
.pd__main .ph__zoom{opacity:1;transform:none}
.pd__badge{position:absolute;left:12px;top:12px;display:inline-flex;gap:6px;align-items:center;padding:6px 11px;border-radius:20px;background:rgba(7,18,31,.75);color:#fff;font-size:13px;font-weight:600}
.pd__thumbs{display:flex;gap:8px;margin-top:10px;overflow-x:auto;overflow-y:hidden;overscroll-behavior-y:auto;touch-action:pan-x pan-y;scrollbar-width:none;cursor:grab}
.pd__thumbs::-webkit-scrollbar{display:none}
.pd__thumbs a{flex:0 0 76px;aspect-ratio:1;border-radius:10px;overflow:hidden;border:1px solid rgba(255,255,255,.12)}
.pd__thumbs img{width:100%;height:100%;object-fit:cover;pointer-events:none}
.pd__thumbs.is-drag{cursor:grabbing}
.pdx{display:grid;grid-template-columns:minmax(0,380px) minmax(0,1fr);gap:clamp(28px,5vw,70px);align-items:start}
.pdx__side{display:grid;gap:16px}
.pdx__fig{position:relative;border-radius:20px;padding:26px 26px 40px}
.pdx__cta{display:grid;gap:10px;padding:22px;border-radius:20px;background:var(--paper)}
.pdx__cta b{font-family:var(--font-head);font-size:19px;color:var(--ink)}
.pdx__cta>span{color:var(--muted);font-size:14.5px;margin-bottom:4px}
.pdx__block{padding-bottom:28px;margin-bottom:28px;border-bottom:1px solid var(--line)}
.pdx__block:last-child{border:0}
.pdx__block h2{font-size:clamp(22px,2.4vw,28px);color:var(--ink);margin-bottom:14px}
.pdx__block p{color:var(--muted)}
.pdx__block .checks{margin:0}
.pdx__two{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.blist{list-style:none;display:grid;gap:8px}
.blist li{position:relative;padding-left:18px;color:var(--text)}
.blist li::before{content:"";position:absolute;left:0;top:.62em;width:7px;height:7px;border-radius:2px;background:var(--grad)}
@media (max-width:980px){.pdx{grid-template-columns:1fr}.pdx__side{position:static;order:2}.pdx__fig{display:none}}
@media (max-width:640px){.pdx__two{grid-template-columns:1fr;gap:0}}

/* SSS */
.faq-wrap{display:grid;grid-template-columns:300px minmax(0,1fr);gap:clamp(28px,5vw,70px);align-items:start}
.faq-side{display:grid;gap:16px}
.faq-nav{display:grid;gap:4px;padding:10px;border-radius:18px;background:var(--paper)}
.faq-nav a{display:flex;justify-content:space-between;align-items:center;padding:12px 14px;border-radius:12px;font-family:var(--font-head);font-weight:600;color:var(--ink);transition:background .3s}
.faq-nav a:hover{background:#fff}
.faq-nav b{font-size:12px;padding:1px 8px;border-radius:20px;background:#fff;color:var(--muted)}
.faq-ask{display:grid;gap:10px;padding:22px;border-radius:18px;background:var(--ink);color:#b7c4d3}
.faq-ask h3{color:#fff;font-size:20px}
.faq-ask p{margin:0 0 6px;font-size:14.5px}
.faq-ask .btn--line{background:transparent;color:#fff;border-color:rgba(255,255,255,.25)}
.faq-sec{margin-bottom:40px;scroll-margin-top:110px}
.faq-sec h2{font-size:clamp(24px,2.6vw,32px);color:var(--ink);margin-bottom:14px}
.faq{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;display:flex;justify-content:space-between;gap:16px;align-items:center;padding:18px 0;cursor:pointer;font-family:var(--font-head);font-weight:600;font-size:17.5px;color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
.faq__ic{flex-shrink:0;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--paper);color:var(--blue);transition:transform .4s var(--ease),background .3s}
.faq[open] .faq__ic{transform:rotate(45deg);background:var(--blue);color:#fff}
.faq__a p{margin:0 0 18px;color:var(--muted);max-width:760px}
@media (max-width:980px){.faq-wrap{grid-template-columns:1fr}.faq-side{position:static}.faq-nav{display:flex;overflow-x:auto;overflow-y:hidden;touch-action:pan-x pan-y;scrollbar-width:none}.faq-nav a{flex:0 0 auto;gap:8px}.faq-ask{display:none}}

/* Blog */
.post-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.post{display:flex;flex-direction:column;border-radius:20px;overflow:hidden;background:#fff;border:1px solid var(--line);transition:transform .5s var(--ease),box-shadow .5s}
.post:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.post__img{display:block;aspect-ratio:16/10;overflow:hidden;background:var(--navy)}
.post__img img{width:100%;height:100%;object-fit:cover}
.post__body{display:grid;gap:8px;padding:18px 20px 22px;flex:1}
.post__body small{color:var(--muted);font-size:13px}
.post__body b{font-family:var(--font-head);font-size:20px;line-height:1.2;color:var(--ink);font-weight:600}
.post__desc{color:var(--muted)}
.post__go{display:inline-flex;gap:6px;align-items:center;align-self:end;color:var(--blue);font-weight:600;font-size:14.5px}
.post--big{flex-direction:row}
.post--big .post__img{flex:0 0 55%;aspect-ratio:auto;min-height:340px}
.post--big .post__body{padding:clamp(22px,3vw,40px);align-content:center}
.post--big .post__body b{font-size:clamp(24px,2.6vw,34px)}
.post-lead{margin-bottom:22px}
.section--paper .post{background:#fff}
@media (max-width:980px){.post-grid{grid-template-columns:1fr 1fr}.post--big{flex-direction:column}.post--big .post__img{min-height:0;aspect-ratio:16/10}}
@media (max-width:640px){.post-grid{grid-template-columns:1fr}}
.readbar{position:fixed;inset:0 0 auto;height:3px;z-index:1001;pointer-events:none}
.readbar i{display:block;height:100%;background:var(--grad);transform:scaleX(0);transform-origin:left}
.art-hero{position:relative;min-height:clamp(440px,66vh,640px);display:flex;align-items:flex-end;padding:150px 0 56px;background:var(--ink);color:#fff;overflow:hidden}
.art-hero__bg{position:absolute;inset:0}
.art-hero__bg img{width:100%;height:100%;object-fit:cover;opacity:.42}
.art-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,var(--ink) 5%,rgba(7,18,31,.35) 80%);pointer-events:none}
.art-hero__in{position:relative;z-index:1}
.art-hero h1{font-size:clamp(34px,4.8vw,64px);line-height:1.04;max-width:1000px}
.art-hero__meta{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:18px;color:#b7c4d3;font-size:14.5px}
.art-hero__meta span{display:inline-flex;gap:7px;align-items:center}
.art-hero__meta .ic{color:var(--cyan)}
.art-wrap{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:clamp(30px,5vw,70px);align-items:start}
.art{max-width:760px;font-size:17.5px;line-height:1.75;color:var(--text)}
.art__lead{font-size:20px;line-height:1.6;color:var(--ink);font-weight:500;margin-bottom:26px}
.art p{margin:0 0 18px}
.art h2{font-size:clamp(24px,2.6vw,32px);line-height:1.15;color:var(--ink);margin:40px 0 14px;scroll-margin-top:110px}
.art ul{margin:0 0 22px;padding-left:0;list-style:none;display:grid;gap:10px}
.art ul li{position:relative;padding-left:22px}
.art ul li::before{content:"";position:absolute;left:0;top:.7em;width:8px;height:8px;border-radius:2px;background:var(--grad)}
.art strong{color:var(--ink)}
.art table{width:100%;border-collapse:collapse;margin:8px 0 26px;font-size:15.5px;line-height:1.45;display:block;overflow-x:auto}
.art th,.art td{padding:11px 14px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top;min-width:120px}
.art th{background:var(--ink);color:#fff;font-family:var(--font-head);font-weight:600}
.art tr:nth-child(even) td{background:var(--paper)}
.art__fig{margin:28px 0}
.art__fig a{display:block;border-radius:18px;overflow:hidden;background:var(--navy)}
.art__fig img{width:100%;max-height:560px;object-fit:cover}
.art__fig figcaption{margin-top:10px;font-size:14px;color:var(--muted)}
.art__share{display:flex;align-items:center;gap:10px;margin-top:34px;padding-top:22px;border-top:1px solid var(--line);font-weight:600;color:var(--ink)}
.art__share a{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:var(--paper);color:var(--ink);transition:background .3s,color .3s}
.art__share a:hover{background:var(--blue);color:#fff}
.art-side{display:grid;gap:16px}
.art-toc{padding:20px 22px;border-radius:18px;background:var(--paper)}
.art-toc h3{font-size:16px;letter-spacing:.08em;text-transform:uppercase;color:var(--blue);margin-bottom:10px}
.art-toc ol{padding-left:18px;display:grid;gap:8px;font-size:15px}
.art-toc a{color:var(--ink)}
.art-toc a:hover,.art-toc a.on{color:var(--blue)}
.art-sol{position:relative;display:block;border-radius:18px;overflow:hidden;aspect-ratio:4/3;background:var(--ink);color:#fff}
.art-sol img{width:100%;height:100%;object-fit:cover;opacity:.55;transition:transform .8s var(--ease)}
.art-sol:hover img{transform:scale(1.06)}
.art-sol>span{position:absolute;inset:auto 0 0;padding:18px;display:grid;gap:4px}
.art-sol small{color:var(--cyan);font-size:12px;letter-spacing:.12em;text-transform:uppercase;font-weight:600}
.art-sol b{font-family:var(--font-head);font-size:20px}
.art-sol em{font-style:normal;display:inline-flex;gap:6px;align-items:center;font-size:14px}
@media (max-width:980px){.art-wrap{grid-template-columns:1fr}.art-side{position:static}.art-toc{display:none}}
@media (max-width:640px){.art{font-size:16.5px}.art__lead{font-size:18px}}

/* İletişim formu */
.cform__send{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.cform__hint{margin:10px 0 0;font-size:13.5px;color:var(--muted)}
.cform .is-bad{border-color:var(--fire)!important}
@media (max-width:640px){.cform__send{grid-template-columns:1fr}}

/* Footer imzası */
.footer__credit{color:#8fa3b8;font-weight:600}
.footer__credit:hover{color:var(--cyan)}
.fab-wa{display:none}

/* Sol alt iletişim düğmesi: yukarı doğru açılır */
.cfab{position:fixed;left:20px;bottom:20px;z-index:950;display:flex;flex-direction:column;align-items:flex-start;gap:10px;pointer-events:none}
.cfab__btn{position:relative;pointer-events:auto;width:58px;height:58px;border-radius:50%;display:grid;place-items:center;background:var(--ink);color:#fff;border:1px solid rgba(60,200,255,.45);box-shadow:0 16px 34px -12px rgba(7,18,31,.7);transition:transform .4s var(--ease),background .3s}
.cfab__btn:hover{transform:scale(1.06)}
.cfab__btn>span:not(.cfab__ring){position:absolute;display:grid;place-items:center;transition:transform .45s var(--ease),opacity .3s}
.cfab__close{opacity:0;transform:rotate(-90deg) scale(.6)}
.cfab__open .ic{animation:cfabNod 5s ease-in-out infinite;transform-origin:50% 60%}
@keyframes cfabNod{0%,82%,100%{transform:none}86%{transform:rotate(-12deg)}90%{transform:rotate(10deg)}94%{transform:rotate(-6deg)}}
.cfab__ring{position:absolute;inset:-1px;border-radius:50%;border:2px solid var(--cyan);opacity:0;animation:cfabRing 2.8s ease-out infinite}
@keyframes cfabRing{0%{transform:scale(1);opacity:.7}100%{transform:scale(1.55);opacity:0}}
.cfab.is-open .cfab__btn{background:var(--blue)}
.cfab.is-open .cfab__open{opacity:0;transform:rotate(90deg) scale(.6)}
.cfab.is-open .cfab__close{opacity:1;transform:none}
.cfab.is-open .cfab__ring{display:none}
.cfab__menu{display:grid;gap:8px}
.cfab__menu a{display:flex;align-items:center;gap:12px;padding:8px 16px 8px 8px;border-radius:40px;background:#fff;color:var(--ink);font-weight:600;font-size:14.5px;box-shadow:0 14px 30px -14px rgba(7,18,31,.5);border:1px solid var(--line);opacity:0;visibility:hidden;transform:translateY(14px) scale(.96);transition:opacity .3s,transform .4s var(--ease),visibility 0s .4s}
.cfab__menu a>span:last-child{display:grid;line-height:1.2}
.cfab__menu small{font-size:11.5px;color:var(--muted);font-weight:500}
.cfab__ic{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:var(--paper);color:var(--blue);flex-shrink:0}
.cfab__ic--wa{background:#0f7a43;color:#fff}
.cfab.is-open .cfab__menu a{pointer-events:auto;opacity:1;visibility:visible;transform:none;transition:opacity .3s calc(var(--i)*45ms),transform .45s var(--ease) calc(var(--i)*45ms),visibility 0s}
.lbx-open .cfab,.nav-open .cfab{opacity:0;visibility:hidden}
@media (max-width:640px){.cfab{left:14px;bottom:14px}.cfab__btn{width:54px;height:54px}.footer__bottom{padding-bottom:84px}}
@media (prefers-reduced-motion:reduce){.cfab__ring,.cfab__open .ic,.hvid__live i{animation:none}.hero__slides img{transition:opacity .6s}}