/* ============================================================================ ECK LAB — blueprint.css ---------------------------------------------------------------------------- TASARIM DNA'SI — "Teknik Föy" ECK LAB'in gerçek işi sistem kurmak: stok, otopark, aidat, randevu, servis. Bu dünyanın dili teknik çizim ve kontrol panelidir — ölçü çizgileri, kot işaretleri, revizyon numaraları, durum ledleri, monospace veri. Sayfa bir web sitesi gibi değil, bir PAFTA gibi kurulur. Bilinçli olarak KAÇINILANLAR (yaygın AI klişeleri): · krem zemin + serif başlık + terracotta vurgu · siyaha yakın zemin + tek parlak neon vurgu ← eski sürüm buydu · gazete tarzı ince cetveller + sıfır köşe yarıçapı Bunun yerine: porselen mavi föy zemini, iki vurgu (ultramarin + sinyal turuncusu), ölçü çizgileriyle kurulmuş asimetrik ızgara. ---------------------------------------------------------------------------- 00 Token 04 Föy ızgarası 08 Projeler 12 İletişim 01 Reset 05 Başlık 09 Yorumlar 13 Footer 02 Tipografi 06 Hero 10 Blog 14 Dock 03 Buton 07 Hizmetler 11 Teklif 15 Hareket / Responsive ========================================================================== */ /* ---------- 00 TOKEN ---------- */ :root{ /* — föy — Zemin porselen mavi: teknik çizim kâğıdı. Krem değil, beyaz değil. */ --paper:#0c1b30; /* siyanotip kâğıdı — siyah değil, Prusya mavisi */ --paper-2:#0f2138; --sheet:#14243d; /* pafta yüzeyi / kart */ --ink:#eaf1fb; /* çizgi rengi — beyaza yakın */ --ink-2:#b7c8e0; --ink-3:#93a8c6; --ink-4:#7d93b4; /* iki vurgu korunuyor, koyu zemine göre açıldı */ --ultra:#7d9bff; /* ultramarin */ --ultra-d:#5f7ef0; --signal:#e0821f; /* sinyal turuncusu */ --signal-l:#f0a04b; /* ECK CORE görselleştirmesi için sınırlı ek palet: elektrik mavisi + neon cyan + az mor */ --pk1:#7d9bff; --pk2:#49e8ff; --pk3:#9b7dff; --line:rgba(190,215,255,.14); --line-2:rgba(190,215,255,.26); --grid:rgba(150,195,255,.085); /* koyu bant — pafta kesiti */ --dark:#07111f; /* kesit bandı: tabandan daha derin */ --dark-2:#0a1626; /* ölçüler — çizim ölçeği gibi kademeli */ --u:8px; --r-l:4px; /* köşe yarıçapı çok küçük: teknik his */ --r:3px; --r-s:2px; --ff-d:'Bricolage Grotesque','Arial Black',sans-serif; --ff:'IBM Plex Sans',system-ui,sans-serif; --ff-m:'IBM Plex Mono',ui-monospace,monospace; --nav-h:70px; --pad:clamp(18px,3.6vw,44px); --maxw:1440px; --ease:cubic-bezier(.2,.7,.3,1); --ease-o:cubic-bezier(.33,1,.68,1); } /* ---------- 01 RESET ---------- */ *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%;overflow-x:clip} @supports not (overflow:clip){html,body{overflow-x:hidden}} body{ margin:0;background:var(--paper);color:var(--ink); font-family:var(--ff);font-size:16px;line-height:1.6; -webkit-font-smoothing:antialiased;overflow-x:clip; } body.lock{overflow:hidden} img,svg,canvas{display:block;max-width:100%} a{color:inherit;text-decoration:none} button{font:inherit;color:inherit;background:none;border:0;cursor:pointer} ul,ol{margin:0;padding:0;list-style:none} input,select,textarea{font:inherit;color:inherit} ::selection{background:var(--ultra);color:#0a1729} :focus-visible{outline:3px solid var(--ultra);outline-offset:2px} [hidden]{display:none !important} .wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad)} /* ---------- 02 TİPOGRAFİ ---------- */ .d1{font-family:var(--ff-d);font-weight:800;font-size:clamp(2.6rem,6.4vw,5.6rem); line-height:.95;letter-spacing:-.035em;margin:0} .d2{font-family:var(--ff-d);font-weight:700;font-size:clamp(1.9rem,4vw,3.2rem); line-height:1.02;letter-spacing:-.028em;margin:0} .d3{font-family:var(--ff-d);font-weight:700;font-size:clamp(1.2rem,2vw,1.7rem); line-height:1.12;letter-spacing:-.02em;margin:0} .lead{font-size:clamp(1rem,1.35vw,1.14rem);line-height:1.66;color:var(--ink-2);margin:0;max-width:56ch} .tiny{font-family:var(--ff-m);font-size:.72rem;letter-spacing:.06em;color:var(--ink-3)} /* revizyon etiketi — bölüm numarası gerçek bir sıra bilgisi taşır */ .rev{display:inline-flex;align-items:center;gap:10px;font-family:var(--ff-m); font-size:.72rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)} .rev b{font-weight:600;color:var(--ultra)} .rev::after{content:"";width:clamp(26px,4vw,60px);height:1px;background:var(--line-2)} /* ---------- 03 BUTON ---------- */ .btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px; min-height:52px;padding:0 24px;border-radius:var(--r); font-family:var(--ff);font-size:.95rem;font-weight:600;letter-spacing:-.005em;white-space:nowrap; border:1.5px solid var(--ink);color:var(--ink);background:transparent; transition:background .22s var(--ease),color .22s,border-color .22s,transform .3s var(--ease),box-shadow .3s} .btn svg{transition:transform .35s var(--ease)} .btn:hover svg{transform:translateX(3px)} .btn--solid{background:var(--ink);color:var(--sheet);box-shadow:4px 4px 0 0 var(--ultra)} .btn--solid:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 0 var(--ultra)} .btn--solid:active{transform:translate(1px,1px);box-shadow:2px 2px 0 0 var(--ultra)} .btn--ghost:hover{background:var(--ink);color:var(--sheet)} .btn--sm{min-height:44px;padding:0 18px;font-size:.88rem} .btn--block{width:100%} /* koyu bant içinde */ .dark .btn{border-color:rgba(255,255,255,.4);color:var(--sheet)} .dark .btn--solid{background:#f2f5fa;color:#0e1a2d;box-shadow:4px 4px 0 0 var(--signal-l)} .dark .btn--solid:hover{box-shadow:6px 6px 0 0 var(--signal)} .dark .btn--ghost:hover{background:rgba(255,255,255,.12);color:#fff} .ico{display:grid;place-items:center;width:46px;height:46px;border-radius:var(--r); border:1.5px solid var(--line-2);color:var(--ink-2);background:var(--sheet); transition:background .22s,color .22s,border-color .22s,transform .3s var(--ease)} .ico:hover{background:var(--ink);color:var(--sheet);border-color:var(--ink)} .dark .ico{border-color:rgba(255,255,255,.28);color:#f2f5fa;background:rgba(255,255,255,.06)} .dark .ico:hover{background:#f2f5fa;color:#0e1a2d} /* ---------- 04 FÖY IZGARASI ---------- */ /* Izgara ekrana değil KÂĞIDA ait: belge yüksekliğince uzanır, içerikle kayar. Üç ölçek kademesi — yukarıda ince taksimat, aşağı indikçe kabalaşan kare. Teknik çizimde uzaklaştıkça detayın azalması gibi. */ body{position:relative} .sheet-grid{position:absolute;top:0;left:0;right:0;height:100%;z-index:0;pointer-events:none;overflow:hidden} .g{position:absolute;inset:0;display:block} .g--fine{ background-image:linear-gradient(var(--grid) 1px,transparent 1px), linear-gradient(90deg,var(--grid) 1px,transparent 1px); background-size:var(--u) var(--u); -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 16%,transparent 34%); mask-image:linear-gradient(180deg,#000 0%,#000 16%,transparent 34%)} .g--mid{ background-image:linear-gradient(rgba(150,195,255,.10) 1px,transparent 1px), linear-gradient(90deg,rgba(150,195,255,.10) 1px,transparent 1px); background-size:calc(var(--u)*3) calc(var(--u)*3); -webkit-mask-image:linear-gradient(180deg,transparent 14%,#000 30%,#000 62%,transparent 78%); mask-image:linear-gradient(180deg,transparent 14%,#000 30%,#000 62%,transparent 78%)} .g--coarse{ background-image:linear-gradient(rgba(150,195,255,.14) 1px,transparent 1px), linear-gradient(90deg,rgba(150,195,255,.14) 1px,transparent 1px); background-size:calc(var(--u)*8) calc(var(--u)*8); -webkit-mask-image:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.55) 40%,#000 72%,#000 100%); mask-image:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.55) 40%,#000 72%,#000 100%)} /* Kâğıt lifi — yüzeyi ekran rengi olmaktan çıkarır. %3'ü geçmemeli: fazlası kirli görünür ve tam da kaçındığımız "yapay" hissi yaratır. */ .fiber{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.05;mix-blend-mode:soft-light; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23f)'/%3E%3C/svg%3E")} /* Pafta kenar cetveli — teknik çizimin kenar taksimatı. Kaydırma derinliğini ve bulunulan bölümü gösterir. */ .ruler{position:fixed;left:0;top:var(--nav-h);bottom:0;width:38px;z-index:300;pointer-events:none; display:flex;flex-direction:column;align-items:center;padding:22px 0 26px} .ruler__track{position:relative;flex:1;width:100%; background-image:repeating-linear-gradient(180deg,var(--line-2) 0 1px,transparent 1px 12px), repeating-linear-gradient(180deg,var(--line-2) 0 1px,transparent 1px 60px); background-size:9px 12px, 15px 60px;background-position:right top,right top;background-repeat:repeat-y; -webkit-mask-image:linear-gradient(180deg,transparent,#000 8%,#000 92%,transparent); mask-image:linear-gradient(180deg,transparent,#000 8%,#000 92%,transparent)} .ruler__mark{position:absolute;right:0;top:0;width:26px;height:2px;background:var(--signal); transition:transform .12s linear} .ruler__mark::after{content:"";position:absolute;right:-1px;top:-3px;width:8px;height:8px; background:var(--signal);border-radius:50%} .ruler__tag{writing-mode:vertical-rl;transform:rotate(180deg);margin-top:14px; font-family:var(--ff-m);font-size:.6rem;letter-spacing:.22em;color:var(--ink-4);white-space:nowrap} .ruler__tag b{color:var(--ultra);font-weight:500} .ruler__tag i{font-style:normal;color:var(--ink-3)} @media (max-width:1240px){.ruler{display:none}} main,.nav,.foot{position:relative;z-index:2} .sec{position:relative;padding:clamp(64px,8vw,124px) 0} .sec--tight{padding:clamp(44px,5vw,76px) 0} /* bölüm ayracı: ölçü çizgisi + kot işareti */ .sec+.sec::before{content:"";position:absolute;top:0;left:var(--pad);right:var(--pad);height:1px; background:repeating-linear-gradient(90deg,var(--line-2) 0 6px,transparent 6px 12px)} .head{display:grid;grid-template-columns:minmax(0,auto) minmax(0,1fr);gap:clamp(20px,4vw,64px); align-items:end;margin-bottom:clamp(34px,4.4vw,64px)} .head__l{max-width:none} .head .rev{margin-bottom:18px} .head__r{justify-self:end;text-align:right;max-width:38ch} @media (max-width:860px){ .head{grid-template-columns:1fr;gap:18px} .head__r{justify-self:start;text-align:left} } /* koyu kesit bantları */ .dark{background:var(--dark);color:#f2f5fa; --ink:#f2f5fa;--ink-2:#b9c6da;--ink-3:#8fa0ba;--ink-4:#8496b0; --line:rgba(255,255,255,.14);--line-2:rgba(255,255,255,.26); --panel:#152439} /* yüzey ayrı: --sheet metin için bozulmasın */ .dark .d1,.dark .d2,.dark .d3,.dark .rev,.dark .lead{color:#f2f5fa} .dark .lead{color:#c3cfe2} .dark .rev b{color:#7f9bff} /* ---------- 05 NAV ---------- */ .nav{position:fixed;top:0;left:0;right:0;z-index:400; transition:transform .5s var(--ease),background .3s,border-color .3s} .nav::after{content:"";position:absolute;inset:0;z-index:-1;background:rgba(12,27,48,.82); -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px); border-bottom:1px solid transparent;opacity:0;transition:opacity .35s,border-color .35s} .nav.stuck::after{opacity:1;border-bottom-color:var(--line)} .nav.hide{transform:translateY(-108%)} .nav__in{display:flex;align-items:center;gap:16px;height:var(--nav-h)} .brand{display:inline-flex;align-items:center;gap:10px;margin-right:auto} .brand__m{width:32px;height:27px;overflow:visible;color:var(--ink); transition:transform .5s var(--ease)} .brand:hover .brand__m{transform:translateX(2px)} .brand__t{font-family:var(--ff-d);font-weight:800;font-size:1.1rem;letter-spacing:-.02em} .brand__t i{font-style:normal;color:var(--ultra)} .brand__c{font-family:var(--ff-m);font-size:.6rem;letter-spacing:.2em;color:var(--ink-4); padding-left:10px;margin-left:2px;border-left:1px solid var(--line-2)} .nav__links{display:flex;gap:2px} .nav__links a{position:relative;padding:10px 13px;font-size:.88rem;color:var(--ink-2); transition:color .22s} .nav__links a::after{content:"";position:absolute;left:13px;right:13px;bottom:4px;height:2px; background:var(--ultra);transform:scaleX(0);transform-origin:0 50%;transition:transform .4s var(--ease)} .nav__links a:hover,.nav__links a.on{color:var(--ink)} .nav__links a:hover::after,.nav__links a.on::after{transform:scaleX(1)} .burger{display:none;width:46px;height:46px;border:1.5px solid var(--line-2);border-radius:var(--r); place-items:center;background:var(--sheet)} .burger i{display:block;width:18px;height:1.8px;background:var(--ink);transition:transform .45s var(--ease),opacity .25s} .burger i+i{margin-top:5px} .nav.open .burger i:nth-child(1){transform:translateY(6.8px) rotate(45deg)} .nav.open .burger i:nth-child(2){opacity:0} .nav.open .burger i:nth-child(3){transform:translateY(-6.8px) rotate(-45deg)} .menu{position:fixed;inset:0;z-index:390;background:var(--paper); display:flex;flex-direction:column;justify-content:center; padding:calc(var(--nav-h) + 24px) var(--pad) 40px; opacity:0;visibility:hidden;transition:opacity .35s var(--ease-o),visibility .35s} .menu.open{opacity:1;visibility:visible} .menu a{display:flex;align-items:baseline;gap:16px;padding:10px 0;border-bottom:1px solid var(--line); font-family:var(--ff-d);font-weight:700;font-size:clamp(1.7rem,7.5vw,2.5rem);letter-spacing:-.03em; opacity:0;transform:translateY(18px);transition:opacity .5s var(--ease),transform .5s var(--ease)} .menu.open a{opacity:1;transform:none} .menu a span{font-family:var(--ff-m);font-size:.7rem;font-weight:400;color:var(--ultra)} .menu__f{margin-top:28px;display:flex;flex-wrap:wrap;gap:10px} /* ---------- 06 HERO ---------- */ .hero{position:relative;padding-top:calc(var(--nav-h) + clamp(26px,4vw,54px)); padding-bottom:clamp(40px,5vw,72px)} .hero__in{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.5fr); gap:clamp(26px,3.4vw,56px);align-items:center} .hero__badge{display:inline-flex;align-items:center;gap:10px;margin-bottom:22px; font-family:var(--ff-m);font-size:.72rem;letter-spacing:.08em;color:var(--ink-3)} .hero__badge i{width:7px;height:7px;border-radius:50%;background:var(--signal);flex:0 0 auto; box-shadow:0 0 0 0 rgba(194,97,10,.5);animation:blip 2.6s ease-out infinite} @keyframes blip{0%{box-shadow:0 0 0 0 rgba(194,97,10,.5)}70%{box-shadow:0 0 0 8px rgba(194,97,10,0)}100%{box-shadow:0 0 0 0 rgba(194,97,10,0)}} .hero h1{margin-bottom:22px} .hero h1 em{font-style:normal;color:var(--ultra);position:relative;white-space:nowrap} /* ölçü çizgisi: vurgulu kelimenin altına kot işareti */ .hero h1 em::after{content:"";position:absolute;left:0;right:0;bottom:-.08em;height:6px; border:1.5px solid var(--ultra);border-top:0;opacity:.5} .hero__pill{display:inline-flex;align-items:center;gap:9px;margin-bottom:20px;padding:11px 16px; border:1.5px solid rgba(125,155,255,.45);border-radius:999px;background:rgba(18,32,56,.6); backdrop-filter:blur(4px);font-family:var(--ff-m);font-size:.72rem;font-weight:600; letter-spacing:.04em;color:var(--ink);text-decoration:none;box-shadow:0 0 0 0 rgba(125,155,255,.35); transition:border-color .3s,box-shadow .3s,transform .3s var(--ease)} .hero__pill:hover{border-color:#49e8ff;box-shadow:0 0 22px -4px rgba(73,232,255,.5);transform:translateY(-1px)} .hero__pill-spark{color:var(--signal-l);flex:0 0 auto;animation:pillSpark 2.2s ease-in-out infinite} @keyframes pillSpark{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.6;transform:scale(.82)}} .hero__pill s{color:var(--ink-4);text-decoration:none;margin:0 1px} .hero__pill svg:last-child{flex:0 0 auto;color:var(--ultra)} .hero__lead{margin-bottom:30px} .hero__cta{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:34px} .hero__play{flex:0 0 auto} /* künye tablosu — hero istatistikleri teknik föy künyesi gibi */ .plate{border:1.5px solid var(--line-2);border-radius:var(--r);overflow:hidden;background:var(--sheet)} .plate__r{display:grid;grid-template-columns:repeat(4,1fr)} .plate__c{padding:14px 16px;border-right:1px solid var(--line)} .plate__c:last-child{border-right:0} .plate__c b{display:block;font-family:var(--ff-d);font-weight:700;font-size:clamp(1.3rem,2.2vw,1.9rem); line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums} .plate__c span{display:block;margin-top:5px;font-family:var(--ff-m);font-size:.63rem; letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)} /* SİGNATÜR: canlı sistem şeması */ .eck{position:relative;border:1.5px solid var(--line-2);border-radius:var(--r-l);background:#06101d; overflow:hidden;box-shadow:10px 10px 0 0 rgba(125,155,255,.12)} .schema__bar{display:flex;align-items:center;gap:10px;padding:9px 14px; border-bottom:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.04)} .schema__bar b{font-family:var(--ff-m);font-size:.66rem;letter-spacing:.1em;color:#93a5c2;font-weight:400} .schema__led{width:7px;height:7px;border-radius:50%;background:#3ddc84;flex:0 0 auto; box-shadow:0 0 8px rgba(61,220,132,.7)} .schema__meta{margin-left:auto;font-family:var(--ff-m);font-size:.64rem;color:#6f819c} .schema__hint{position:absolute;left:14px;bottom:12px;font-family:var(--ff-m);font-size:.62rem; color:#6f819c;letter-spacing:.05em;pointer-events:none;z-index:7} /* ---------- ECK CORE — canlı ekosistem görselleştirmesi ---------- */ .eck__stage{position:relative;aspect-ratio:1.1/1;overflow:hidden;isolation:isolate; background:radial-gradient(circle at 50% 46%,#0a1830,#050d18 70%)} .eck__stage::before{content:"";position:absolute;inset:-10%;pointer-events:none;z-index:1; background:radial-gradient(circle at 50% 46%,rgba(125,155,255,.18),transparent 62%)} .eck__grid{position:absolute;inset:0;z-index:1; background-image:linear-gradient(rgba(125,155,255,.07) 1px,transparent 1px), linear-gradient(90deg,rgba(125,155,255,.07) 1px,transparent 1px); background-size:7.5% 7.5%; mask-image:radial-gradient(circle at 50% 46%,#000 55%,transparent 92%); -webkit-mask-image:radial-gradient(circle at 50% 46%,#000 55%,transparent 92%)} .eck__map{position:absolute;inset:0;z-index:1;opacity:.55;pointer-events:none; background-image:radial-gradient(rgba(125,155,255,.55) 1px,transparent 1.5px); background-size:4.2% 4.2%; mask-image:radial-gradient(ellipse 46% 30% at 22% 72%,#000 55%,transparent 100%), radial-gradient(ellipse 30% 24% at 50% 88%,#000 55%,transparent 100%), radial-gradient(ellipse 30% 34% at 70% 48%,#000 50%,transparent 100%); -webkit-mask-image:radial-gradient(ellipse 46% 30% at 22% 72%,#000 55%,transparent 100%), radial-gradient(ellipse 30% 24% at 50% 88%,#000 55%,transparent 100%), radial-gradient(ellipse 30% 34% at 70% 48%,#000 50%,transparent 100%)} .eck__arcs{position:absolute;inset:0;width:100%;height:100%;z-index:1;overflow:visible;pointer-events:none} .eck__arc{fill:none;vector-effect:non-scaling-stroke;transform-box:fill-box;transform-origin:50% 50%} .eck__arc--a{stroke:rgba(73,232,255,.22);stroke-width:.45;stroke-dasharray:60 180; transform:rotate(-35deg);animation:eckArcSpin 60s linear infinite} .eck__arc--b{stroke:rgba(155,125,255,.17);stroke-width:.35;stroke-dasharray:44 220; transform:rotate(150deg);animation:eckArcSpin 80s linear infinite reverse} .eck__parallax{position:absolute;inset:0;z-index:2;transform-style:preserve-3d;will-change:transform; transition:transform .5s var(--ease-o)} .eck__lines{position:absolute;inset:0;width:100%;height:100%;overflow:visible} .eck__path{fill:none;stroke:rgba(125,155,255,.28);stroke-width:.32;vector-effect:non-scaling-stroke; transition:stroke .4s,stroke-width .4s} .eck__path.lit{stroke:#49e8ff;stroke-width:.6} .eck__pk{fill:var(--c,var(--pk1));filter:drop-shadow(0 0 2.5px currentColor)} /* çekirdek */ .eck__core{position:absolute;left:50%;top:46%;transform:translate(-50%,-50%);z-index:5; width:21%;aspect-ratio:1/1;display:grid;place-items:center; animation:eckFloat 6.5s ease-in-out infinite} .eck__burst{position:absolute;inset:-170%;z-index:-1;border-radius:50%;pointer-events:none; background:repeating-conic-gradient(from 0deg,rgba(125,155,255,.22) 0deg 1.1deg,transparent 1.1deg 15deg); mask-image:radial-gradient(circle,#000 16%,transparent 58%); -webkit-mask-image:radial-gradient(circle,#000 16%,transparent 58%); animation:eckSpin 45s linear infinite} .eck__glow{position:absolute;inset:-65%;border-radius:50%;z-index:0; background:radial-gradient(circle,rgba(125,155,255,.55),rgba(73,232,255,.22) 48%,transparent 74%); filter:blur(5px);animation:eckBreathe 4.2s ease-in-out infinite} .eck__ring{position:absolute;border-radius:50%;z-index:0;pointer-events:none} .eck__ring--a{inset:-22%;border:1px dashed rgba(73,232,255,.4);animation:eckSpin 16s linear infinite} .eck__ring--b{inset:-42%;border:1px solid rgba(155,125,255,.28);animation:eckSpin 26s linear infinite reverse} .eck__dais{position:absolute;left:0;bottom:-20%;z-index:0;width:100%;pointer-events:none; display:flex;flex-direction:column;align-items:center;gap:3px} .eck__dais i{display:block;border-radius:50%;background:rgba(125,155,255,.16); border:1px solid rgba(125,155,255,.32)} .eck__dais i:nth-child(1){width:112%;height:7px} .eck__dais i:nth-child(2){width:140%;height:6px;opacity:.6;background:rgba(125,155,255,.1)} .eck__dais i:nth-child(3){width:168%;height:5px;opacity:.38;background:rgba(125,155,255,.06)} .eck__core-in{position:relative;z-index:2;width:76%;aspect-ratio:1/1;border-radius:50%; display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;color:#fff; background:radial-gradient(circle at 34% 28%,#3a5be0,#0e1a3c 74%); border:1.5px solid rgba(255,255,255,.4); box-shadow:0 0 34px rgba(125,155,255,.6),inset 0 0 18px rgba(255,255,255,.14)} .eck__core-in b{font-family:var(--ff-m);font-size:.56rem;letter-spacing:.07em;white-space:nowrap} /* modül düğümleri */ .eck__node{position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-50%);z-index:4; display:flex;flex-direction:column;align-items:center;gap:4px;padding:9px 11px;min-width:62px; border:1px solid rgba(125,155,255,.3);border-radius:var(--r);background:rgba(14,26,45,.78); backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);color:#dbe4f0;text-align:center; animation:eckNodeFloat 5.4s ease-in-out infinite;animation-delay:var(--delay); transition:transform .4s var(--ease),border-color .3s,box-shadow .4s,background .3s} .eck__node i{display:grid;place-items:center;color:var(--ultra);transition:color .3s} .eck__node b{font-family:var(--ff-m);font-size:.56rem;font-weight:500;letter-spacing:.03em;white-space:nowrap} .eck__node s{position:absolute;top:5px;right:6px;width:5px;height:5px;border-radius:50%; background:#3ddc84;box-shadow:0 0 5px #3ddc84} @media (hover:hover){ .eck__node:hover{transform:translate(-50%,-50%) scale(1.12);border-color:#49e8ff;z-index:6; box-shadow:0 0 22px rgba(73,232,255,.5);background:rgba(20,36,61,.92)} .eck__node:hover i{color:#49e8ff} } /* veri panelleri */ .eck__panel{position:absolute;z-index:6;padding:10px 12px;border-radius:var(--r);max-width:172px; border:1px solid rgba(125,155,255,.26);background:rgba(10,20,36,.72); backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);box-shadow:0 10px 26px -12px rgba(0,0,0,.6)} .eck__panel b{display:block;font-family:var(--ff-m);font-size:.54rem;letter-spacing:.08em; color:#8fa6d6;margin-bottom:7px;font-weight:400} .eck__panel-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:7px} .eck__panel-head b{margin-bottom:0} .eck__pct{font-family:var(--ff-m);font-size:.6rem;font-weight:600;color:#3ddc84} .eck__panel--feed{left:2%;top:3%} .eck__panel--status{right:2%;top:3%} .eck__panel--code{left:1.5%;top:41%;max-width:158px} .eck__panel--sat{right:1.5%;top:29%;text-align:right} .eck__panel--visit{right:1.5%;top:52%;text-align:right} .eck__panel--int{left:1.5%;bottom:3%} .eck__panel--growth{right:1.5%;bottom:3%;max-width:222px} #eckFeed{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:5px;width:148px} #eckFeed li{display:flex;align-items:baseline;gap:6px;font-family:var(--ff-m);font-size:.6rem; color:#b9c6da;opacity:0;animation:eckFeedIn .5s var(--ease) forwards} #eckFeed li i{font-style:normal;color:#5c7196;flex:0 0 auto} #eckFeed li em{font-style:normal;flex:1 1 auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #eckFeed li s{font-style:normal;text-decoration:none;color:#3ddc84;flex:0 0 auto;font-weight:600} .eck__status{display:flex;align-items:center;gap:6px;font-family:var(--ff);font-size:.68rem;color:#dbe4f0} .eck__status i{width:7px;height:7px;border-radius:50%;background:#3ddc84;box-shadow:0 0 6px #3ddc84; flex:0 0 auto;animation:eckPulse 1.8s ease-in-out infinite} .eck__meter{display:block;margin-top:9px;height:4px;width:100%;border-radius:2px; background:rgba(255,255,255,.1);overflow:hidden} .eck__meter em{display:block;height:100%;width:40%;border-radius:2px; background:linear-gradient(90deg,#49e8ff,#7d9bff);animation:eckMeter 2.8s ease-in-out infinite} .eck__eq{display:flex;align-items:flex-end;gap:3px;height:22px;margin-top:9px} .eck__eq em{display:block;width:4px;height:var(--h);border-radius:2px; background:linear-gradient(180deg,#49e8ff,#7d9bff);animation:eckEq 1.4s ease-in-out infinite alternate} .eck__eq em:nth-child(2){animation-delay:.08s} .eck__eq em:nth-child(3){animation-delay:.16s} .eck__eq em:nth-child(4){animation-delay:.24s} .eck__eq em:nth-child(5){animation-delay:.32s} .eck__eq em:nth-child(6){animation-delay:.4s} .eck__eq em:nth-child(7){animation-delay:.48s} .eck__num{display:block;font-family:var(--ff-d);font-weight:700;font-size:1.02rem;color:#fff} .eck__num--sm{font-size:.86rem} .eck__num i{display:block;font-style:normal;font-family:var(--ff-m);font-size:.6rem; color:#3ddc84;margin-top:3px;font-weight:400} .eck__spark{display:block;width:58px;height:20px;margin:8px 0 0 auto} .eck__spark polyline{fill:none;stroke:#3ddc84;stroke-width:1.8;vector-effect:non-scaling-stroke; stroke-linecap:round;stroke-linejoin:round} .eck__bars{display:flex;align-items:flex-end;justify-content:flex-end;gap:4px;height:26px;margin-top:8px} .eck__bars em{display:block;width:7px;height:var(--h);border-radius:2px 2px 0 0; background:linear-gradient(180deg,#9b7dff,#5a3fd6)} .eck__tags{display:flex;flex-wrap:wrap;gap:5px;max-width:155px} .eck__tags i{font-style:normal;padding:3px 8px;border:1px solid rgba(125,155,255,.3); border-radius:999px;font-family:var(--ff-m);font-size:.54rem;color:#b9c6da} .eck__code{margin:0;font-family:var(--ff-m);font-size:.56rem;line-height:1.65;color:#8fa6d6;white-space:pre} .eck__code em{color:#49e8ff;font-style:normal} .eck__code i{color:#f0a04b;font-style:normal} .eck__growth-chart{display:block;width:100%;height:46px;margin-top:2px;overflow:visible} .gl{fill:none;stroke-width:2.2;vector-effect:non-scaling-stroke;stroke-linecap:round;stroke-linejoin:round} .gl--a{stroke:#3ddc84} .gl--b{stroke:#9b7dff} .gl--c{stroke:#f0a04b} .eck__legend{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px;font-family:var(--ff-m); font-size:.52rem;color:#8fa6d6} .eck__legend i{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--c); margin-right:4px;vertical-align:middle} @keyframes eckFloat{0%,100%{transform:translate(-50%,-50%) translateY(0)}50%{transform:translate(-50%,-50%) translateY(-6%)}} @keyframes eckBreathe{0%,100%{opacity:.7;transform:scale(.94)}50%{opacity:1;transform:scale(1.07)}} @keyframes eckSpin{to{transform:rotate(360deg)}} @keyframes eckArcSpin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}} @keyframes eckNodeFloat{0%,100%{transform:translate(-50%,-50%) translateY(0)}50%{transform:translate(-50%,-50%) translateY(-4px)}} @keyframes eckFeedIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}} @keyframes eckPulse{0%,100%{opacity:1}50%{opacity:.35}} @keyframes eckMeter{0%{transform:translateX(-120%)}50%{transform:translateX(150%)}100%{transform:translateX(-120%)}} @keyframes eckEq{0%{opacity:.5;transform:scaleY(.72)}100%{opacity:1;transform:scaleY(1)}} @media (max-width:760px){ .eck__panel--feed,.eck__panel--int,.eck__panel--code,.eck__panel--visit,.eck__panel--growth{display:none} .eck__panel{padding:8px 10px;max-width:124px} .eck__node{min-width:50px;padding:6px 7px} .eck__node b{font-size:.48rem} .eck__core-in b{font-size:.5rem} } @media (max-width:480px){ .eck__panel--status,.eck__panel--sat{display:none} } @media (prefers-reduced-motion:reduce){ .eck__core,.eck__glow,.eck__ring--a,.eck__ring--b,.eck__node,.eck__status i,.eck__meter em, .eck__burst,.eck__arc--a,.eck__arc--b,.eck__eq em{animation:none!important} .eck__pk{display:none} .eck__parallax{transition:none} } /* ---------- ŞERİT ---------- */ .strip{position:relative;overflow:hidden;border-block:1.5px solid var(--line-2);background:var(--dark); padding:13px 0} .strip__row{display:flex;gap:26px;width:max-content;will-change:transform} .strip__i{display:inline-flex;align-items:center;gap:26px;white-space:nowrap; font-family:var(--ff-m);font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;color:#8fa0ba} .strip__i b{font-weight:500;color:#e8edf5} .strip__i i{width:4px;height:4px;background:var(--signal-l);flex:0 0 auto;transform:rotate(45deg)} /* ---------- 07 HAKKIMIZDA ---------- */ .sec--sand{background:radial-gradient(120% 80% at 22% 50%,rgba(214,168,96,.09),transparent 62%)} .about{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(26px,4vw,64px); align-items:start} .about__fig{position:relative;border:1.5px solid var(--line-2);border-radius:var(--r-l); aspect-ratio:5/4;overflow:hidden;background:#0a1729} /* fotoğraf: siyanotip paftaya oturması için hafif soğutulur, üzerine ölçü katmanı gelir */ .about__ph{position:absolute;inset:0;width:100%;height:100%;object-fit:cover; filter:saturate(.82) contrast(1.06) brightness(.92); transform:scale(1.02);transition:transform 1.1s var(--ease),filter .6s} .about__fig:hover .about__ph{transform:scale(1.05);filter:saturate(.95) contrast(1.04) brightness(1)} /* mavi baskı örtüsü + köşe kotları */ .about__fig::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none; background:linear-gradient(180deg,rgba(10,23,41,.28) 0%,rgba(10,23,41,.05) 38%,rgba(10,23,41,.72) 100%), radial-gradient(120% 90% at 78% 22%,rgba(224,130,31,.13),transparent 58%)} .about__fig::after{content:"";position:absolute;inset:14px;z-index:2;pointer-events:none; border:1px solid rgba(190,220,255,.18); -webkit-mask-image:linear-gradient(90deg,#000 0 26px,transparent 26px calc(100% - 26px),#000 calc(100% - 26px)), linear-gradient(180deg,#000 0 26px,transparent 26px calc(100% - 26px),#000 calc(100% - 26px)); mask-image:linear-gradient(90deg,#000 0 26px,transparent 26px calc(100% - 26px),#000 calc(100% - 26px)), linear-gradient(180deg,#000 0 26px,transparent 26px calc(100% - 26px),#000 calc(100% - 26px)); -webkit-mask-composite:source-over;mask-composite:add} .about__cap{position:absolute;left:0;right:0;bottom:0;z-index:3;display:flex;justify-content:space-between;gap:12px; padding:11px 15px;border-top:1px solid rgba(190,220,255,.16);background:rgba(7,17,31,.72); -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px); font-family:var(--ff-m);font-size:.62rem;letter-spacing:.1em;color:#b7c8e0} /* madde listesi: ölçü tablosu */ .spec{border-top:1.5px solid var(--ink);margin-top:26px} .spec li{display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:baseline; padding:16px 2px;border-bottom:1px solid var(--line); transition:padding-left .4s var(--ease),background .3s} .spec li:hover{padding-left:12px;background:rgba(125,155,255,.07)} .spec__n{font-family:var(--ff-m);font-size:.7rem;color:var(--ultra)} .spec b{display:block;font-size:1rem;font-weight:600;letter-spacing:-.01em} .spec span{display:block;margin-top:3px;font-size:.86rem;color:var(--ink-3)} .spec__t{font-family:var(--ff-m);font-size:.66rem;color:var(--ink-4);white-space:nowrap} /* ---------- NEDEN — dört sütunlu kesit ---------- */ .why{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1.5px solid var(--line-2)} .why__c{padding:28px 22px 30px;border-right:1px solid var(--line);position:relative; transition:background .35s} .why__c:last-child{border-right:0} .why__c::before{content:"";position:absolute;top:-1.5px;left:0;width:100%;height:2px;background:var(--ultra); transform:scaleX(0);transform-origin:0 50%;transition:transform .55s var(--ease)} .why__c:hover::before{transform:scaleX(1)} .why__c:hover{background:var(--sheet)} .why__n{font-family:var(--ff-m);font-size:.7rem;color:var(--ink-4);letter-spacing:.1em} .why__i{display:grid;place-items:center;width:46px;height:46px;margin:20px 0 18px; border:1.5px solid var(--line-2);border-radius:var(--r);color:var(--ink); transition:background .3s,color .3s,transform .5s var(--ease)} .why__c:hover .why__i{background:var(--ink);color:var(--sheet);transform:rotate(-6deg)} .why__c h3{font-family:var(--ff-d);font-weight:700;font-size:1.06rem;letter-spacing:-.02em;margin:0 0 10px} .why__c p{margin:0;font-size:.88rem;line-height:1.6;color:var(--ink-3)} /* ---------- NEDEN ECK LAB — v4 (referans birebir: başlık+istatistik | demo kartı | laptop | 4 adım) ---------- */ .neden2{display:flex;flex-direction:column;gap:clamp(28px,3.4vw,48px)} .neden2__top{display:grid;grid-template-columns:minmax(0,1.32fr) minmax(0,1fr) minmax(0,1fr);gap:clamp(16px,2vw,30px);align-items:start} .neden2__l .d2{font-size:clamp(2.1rem,3.4vw,3.5rem);line-height:1.04;margin:14px 0 18px} .neden2__l .lead{max-width:34em;margin:0 0 clamp(20px,2.4vw,32px)} .neden2__stats{display:flex;flex-wrap:nowrap;gap:18px 0;list-style:none;margin:0;padding:0} .neden2__stats li{display:flex;align-items:center;gap:12px;padding:0 clamp(8px,1vw,16px);border-left:1px solid var(--line-2)} .neden2__stats li:first-child{padding-left:0;border-left:0} .neden2__stats svg{width:24px;height:24px} .neden2__stats i{display:grid;place-items:center;flex:0 0 auto;color:#5a8cff;filter:drop-shadow(0 0 8px rgba(90,140,255,.45))} .neden2__stats b{display:block;font-family:var(--ff-d);font-weight:800;font-size:clamp(1.25rem,1.8vw,1.55rem);letter-spacing:-.03em;color:#8fb0ff} .neden2__stats span{display:block;font-size:.74rem;color:var(--ink-3);white-space:nowrap} .gift{position:relative;z-index:2;margin-top:clamp(0px,2.4vw,36px);padding:clamp(22px,2.4vw,34px); border:1.5px solid rgba(120,160,255,.3);border-radius:22px; background:linear-gradient(160deg,rgba(22,40,84,.72),rgba(10,20,44,.78)); backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px); box-shadow:0 24px 60px -24px rgba(0,0,0,.7),inset 0 0 40px rgba(70,110,255,.08)} .gift__head{display:flex;align-items:center;gap:clamp(14px,1.6vw,22px);margin:-6px 0 18px} .gift__ic{flex:0 0 auto;position:relative;width:clamp(58px,4.6vw,78px);aspect-ratio:1;display:grid;place-items:center;border-radius:50%; background:radial-gradient(circle at 34% 26%,#8fb0ff,#3a63ff 58%,#1c2f9a);color:#fff; box-shadow:0 0 0 2px rgba(150,180,255,.35),0 0 38px rgba(70,110,255,.75),inset 0 -6px 14px rgba(10,20,90,.45)} .gift__ring{position:absolute;inset:-9px;border-radius:50%;border:1px dashed rgba(120,160,255,.5);animation:giftSpin 15s linear infinite} .gift__burst{position:absolute;top:-16px;left:-14px;width:24px;height:24px;pointer-events:none} .gift__burst::before,.gift__burst::after{content:"";position:absolute;background:#6f9bff;border-radius:2px} .gift__burst::before{top:0;left:12px;width:2px;height:12px;transform:rotate(-24deg)} .gift__burst::after{top:10px;left:0;width:12px;height:2px;transform:rotate(18deg)} @keyframes giftSpin{to{transform:rotate(360deg)}} .gift__t{font-family:var(--ff-d);font-weight:800;font-size:clamp(1.05rem,1.45vw,1.5rem);line-height:1.06;letter-spacing:-.02em;color:#fff;text-transform:uppercase;white-space:nowrap} .gift__t em{font-style:normal;background:linear-gradient(90deg,#7fa2ff,#4f7dff);-webkit-background-clip:text;background-clip:text;color:transparent} .gift__arrow{position:absolute;right:16px;top:14px;opacity:.9;width:34px;height:26px} .gift p{margin:0 0 22px;font-size:clamp(.92rem,1.15vw,1.05rem);line-height:1.6;color:#c3d0ea} .gift__btn{display:flex;align-items:center;justify-content:space-between;gap:16px;width:min(100%,290px);padding:15px 26px;border-radius:999px; background:linear-gradient(180deg,#4a78ff,#2f56ff);color:#fff;font-weight:600;font-size:1rem;text-decoration:none; box-shadow:0 10px 30px -8px rgba(60,100,255,.8),inset 0 1px 0 rgba(255,255,255,.35); transition:transform .3s var(--ease),box-shadow .3s} .gift__btn:hover{transform:translateY(-2px);box-shadow:0 14px 36px -8px rgba(60,100,255,.95),inset 0 1px 0 rgba(255,255,255,.4)} /* laptop */ .device{position:relative;z-index:1;margin-left:clamp(-40px,-2vw,-10px);perspective:1600px} .laptop{transform:rotateY(-12deg) rotateX(3deg) rotateZ(1deg);transform-origin:50% 60%;transition:transform .7s var(--ease-o); filter:drop-shadow(26px 34px 40px rgba(0,0,0,.55))} @media (hover:hover){.device:hover .laptop{transform:rotateY(-5deg) rotateX(2deg)}} .laptop__lid{padding:9px 9px 11px;border-radius:14px 14px 4px 4px;background:linear-gradient(160deg,#2a3246,#0d1220); border:1.5px solid #3b4660} .laptop__scr{position:relative;overflow:hidden;border-radius:7px;aspect-ratio:16/10.2;padding:5% 5% 4%; background:radial-gradient(ellipse at 75% 40%,#13306e,#081431 70%)} .lp__nav{display:flex;align-items:center;gap:clamp(4px,.8vw,12px);font-size:clamp(.34rem,.62vw,.56rem);color:#9db4e6;margin-bottom:6%} .lp__nav b{display:inline-flex;align-items:center;gap:3px;color:#fff;font-family:var(--ff-d);margin-right:auto;font-size:1.15em} .lp__nav em{font-style:normal;padding:.35em .9em;border-radius:99px;background:#3a63ff;color:#fff} .lp__body{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:4%;align-items:center} .lp__txt h4{margin:0 0 6%;font-family:var(--ff-d);font-weight:800;font-size:clamp(.6rem,1.1vw,1.05rem);line-height:1.12;color:#fff;letter-spacing:-.02em} .lp__txt p{margin:0 0 8%;font-size:clamp(.3rem,.56vw,.52rem);line-height:1.5;color:#9db4e6} .lp__cta{display:inline-flex;align-items:center;gap:4px;padding:.55em 1.1em;border-radius:99px;background:linear-gradient(180deg,#4a78ff,#2f56ff); color:#fff;font-size:clamp(.3rem,.56vw,.5rem);font-weight:600} .lp__tiles{position:relative;aspect-ratio:1/.92;transform:rotateY(-18deg) rotateX(8deg) rotateZ(-4deg);transform-style:preserve-3d} .lp__t{position:absolute;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4%;width:41%;aspect-ratio:1.1;border-radius:11%; background:linear-gradient(150deg,rgba(90,130,255,.5),rgba(20,40,110,.75));border:1px solid rgba(150,180,255,.45); box-shadow:0 8px 20px -6px rgba(40,80,255,.6),inset 0 0 14px rgba(120,160,255,.25);color:#cfe0ff;font-style:normal} .lp__t b{font-size:clamp(.28rem,.52vw,.48rem);font-weight:600;text-align:center;line-height:1.2;color:#fff} .lp__t svg{width:26%;height:auto} .lp__t--1{left:30%;top:0;animation:lpFloat 5s ease-in-out infinite} .lp__t--2{left:58%;top:22%;animation:lpFloat 5s ease-in-out -1.2s infinite} .lp__t--3{left:6%;top:30%;animation:lpFloat 5s ease-in-out -2.4s infinite} .lp__t--4{left:46%;top:56%;animation:lpFloat 5s ease-in-out -3.4s infinite} .lp__dash{position:absolute;left:-6%;bottom:-2%;display:flex;align-items:flex-end;gap:3%;width:36%;height:30%;padding:4%;border-radius:8%; background:rgba(8,18,50,.8);border:1px solid rgba(120,160,255,.3)} .lp__dash i{flex:1;height:var(--h);border-radius:2px 2px 0 0;background:linear-gradient(180deg,#49e8ff,#4f7dff)} @keyframes lpFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-6%)}} .laptop__base{position:relative;height:clamp(9px,1.1vw,15px);margin:0 -4%;border-radius:0 0 14px 14px; background:linear-gradient(180deg,#aab3c6,#5c6578 60%,#2a3040)} .laptop__base::before{content:"";position:absolute;left:50%;top:0;width:18%;height:42%;transform:translateX(-50%); border-radius:0 0 8px 8px;background:#1b2130} /* 4 adım */ .steps{position:relative;display:flex;gap:0;background:none;border:0} .steps__c{position:relative;flex:1 1 0;min-width:0;padding:clamp(20px,2vw,28px);border:1px solid rgba(120,160,255,.24);border-radius:22px; background:linear-gradient(160deg,rgba(18,32,66,.6),rgba(9,18,40,.66));z-index:1; box-shadow:inset 0 0 40px rgba(60,100,230,.05)} .steps__n{display:block;font-family:var(--ff-d);font-weight:700;font-size:clamp(1.5rem,2.2vw,2.1rem);color:#5a8cff;line-height:1} .steps__i{position:absolute;left:36%;top:clamp(16px,1.6vw,22px);display:grid;place-items:center;width:clamp(78px,7vw,104px);aspect-ratio:1; border-radius:24%;transform:rotate(-8deg) skewX(-4deg);color:#9bc0ff; background:linear-gradient(145deg,rgba(100,140,255,.55),rgba(14,28,78,.95) 70%); border:1.5px solid color-mix(in srgb,var(--g) 60%,transparent); box-shadow:0 0 34px -4px color-mix(in srgb,var(--g) 70%,transparent),inset 0 0 20px rgba(130,170,255,.3),12px 14px 18px -8px rgba(0,0,0,.6)} .steps__i svg{width:46%;height:auto;filter:drop-shadow(0 0 8px currentColor)} .steps__c h3{font-family:var(--ff-d);font-weight:700;font-size:clamp(1.15rem,1.55vw,1.45rem);letter-spacing:-.02em;margin:clamp(40px,4.6vw,62px) 0 10px;color:#fff} .steps__c p{margin:0 0 18px;font-size:clamp(.86rem,1vw,.97rem);line-height:1.6;color:#b9c6e0} .steps__tags{display:flex;flex-wrap:wrap;gap:8px} .steps__tags i{font-style:normal;padding:7px 15px;border:1px solid rgba(120,160,255,.3);border-radius:999px;background:rgba(255,255,255,.03); font-family:var(--ff);font-size:.82rem;color:#d3def2} .steps__join{flex:0 0 auto;display:none;align-items:center;justify-content:center;width:30px;height:30px;margin:0 6px; margin-top:calc(clamp(16px,1.6vw,22px) + clamp(78px,7vw,104px) / 2 + 40px - 15px); border-radius:50%;background:linear-gradient(180deg,#3aa0ff,#2f6bff);color:#fff;z-index:3;box-shadow:0 0 18px rgba(60,140,255,.8)} @media (min-width:901px){ .steps__join{display:flex} .steps__c:not(:last-child)::after,.steps__c:not(:first-child)::before{content:"";position:absolute;height:40px;z-index:2;pointer-events:none; top:calc(clamp(16px,1.6vw,22px) + clamp(78px,7vw,104px) / 2)} .steps__c:not(:last-child)::after{left:calc(36% + clamp(78px,7vw,104px) - 8px);right:-21px; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 40' preserveAspectRatio='none'%3E%3Cpath d='M0 0 C 45 0 55 40 100 40' fill='none' stroke='%235a8cff' stroke-width='1.6'/%3E%3C/svg%3E") center/100% 100% no-repeat} .steps__c:not(:first-child)::before{left:-21px;width:calc(36% + 14px); background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 40' preserveAspectRatio='none'%3E%3Cpath d='M0 40 C 45 40 55 0 100 0' fill='none' stroke='%235a8cff' stroke-width='1.6'/%3E%3C/svg%3E") center/100% 100% no-repeat} } @media (max-width:1100px){ .neden2__top{grid-template-columns:minmax(0,1fr) minmax(0,1fr)} .neden2__l{grid-column:1/-1} .gift{margin-top:0} .device{margin-left:0} } @media (max-width:900px){ .steps{flex-direction:column;gap:14px} .steps__i{left:auto;right:22px} } @media (max-width:700px){ .neden2__top{grid-template-columns:1fr} .neden2__stats{flex-wrap:wrap} .neden2__stats li{padding:0 14px} .neden2__stats span{white-space:normal} } /* ---------- 07 HİZMETLER ---------- */ .svc{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(24px,3vw,52px); align-items:start} .svc__list{border-top:1.5px solid var(--line-2)} .svc__i{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:18px;align-items:center; width:100%;text-align:left;padding:22px 4px;border-bottom:1px solid var(--line); transition:padding-left .45s var(--ease),background .3s} .svc__i:hover,.svc__i.on{padding-left:14px;background:rgba(125,155,255,.08)} .svc__k{font-family:var(--ff-m);font-size:.72rem;color:var(--ink-4);transition:color .3s} .svc__i.on .svc__k{color:var(--ultra)} .svc__n{font-family:var(--ff-d);font-weight:700;font-size:clamp(1.1rem,1.8vw,1.5rem); letter-spacing:-.025em;line-height:1.16;display:block} .svc__d{display:block;margin-top:5px;font-size:.85rem;color:var(--ink-3);max-width:46ch; max-height:0;opacity:0;overflow:hidden;transition:max-height .5s var(--ease),opacity .35s} .svc__i.on .svc__d{max-height:64px;opacity:1} .svc__p{font-family:var(--ff-m);font-size:.8rem;color:var(--ink-2);white-space:nowrap} .svc__p s{display:block;font-size:.68rem;color:var(--ink-4)} .svc__view{position:sticky;top:calc(var(--nav-h) + 20px);border:1.5px solid var(--ink); border-radius:var(--r-l);overflow:hidden;background:var(--dark)} .svc__shot{position:relative;aspect-ratio:4/3;background:var(--dark)} .svc__shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover; opacity:0;transform:scale(1.03);transition:opacity .6s var(--ease-o),transform .9s var(--ease)} .svc__shot img.on{opacity:1;transform:none} .svc__foot{display:flex;align-items:center;justify-content:space-between;gap:14px; padding:12px 16px;border-top:1px solid rgba(255,255,255,.14); font-family:var(--ff-m);font-size:.68rem;color:#93a5c2} .svc__foot b{color:#e8edf5;font-weight:500} /* ---------- TEKNOLOJİ ---------- */ .tech{position:relative;overflow:hidden} .tech__rows{display:flex;flex-direction:column;gap:10px} .tech__row{display:flex;gap:10px;width:max-content;will-change:transform} .chip{display:inline-flex;align-items:center;gap:9px;min-height:44px;padding:0 16px; border:1.5px solid var(--line-2);border-radius:var(--r);background:var(--sheet); font-family:var(--ff-m);font-size:.78rem;letter-spacing:.01em;color:var(--ink-2);white-space:nowrap; transition:border-color .3s,background .3s,transform .35s var(--ease)} .chip svg{color:var(--b,var(--ultra));flex:0 0 auto} .chip:hover{transform:translateY(-3px);border-color:var(--ultra);background:#1a2d4a} .fade-l,.fade-r{position:absolute;top:0;bottom:0;width:12%;z-index:2;pointer-events:none} .fade-l{left:0;background:linear-gradient(90deg,var(--paper),transparent)} .fade-r{right:0;background:linear-gradient(270deg,var(--paper),transparent)} .dark .fade-l{background:linear-gradient(90deg,var(--dark),transparent)} .dark .fade-r{background:linear-gradient(270deg,var(--dark),transparent)} /* şerit durdurma kontrolü */ .mq{position:relative} .mq-btn{position:absolute;right:var(--pad);bottom:8px;z-index:6;display:inline-flex;align-items:center; gap:7px;min-height:44px;padding:0 15px;border-radius:var(--r); font-family:var(--ff-m);font-size:.68rem;letter-spacing:.06em;color:var(--ink-3); background:var(--sheet);border:1.5px solid var(--line-2); opacity:0;transform:translateY(4px);transition:opacity .3s,transform .35s var(--ease),color .25s,border-color .25s} .mq:hover .mq-btn,.mq:focus-within .mq-btn,.mq-btn:focus-visible,.mq-btn.paused{opacity:1;transform:none} .mq-btn:hover{color:var(--ink);border-color:var(--ink)} .mq-btn.paused{color:var(--ultra);border-color:var(--ultra)} .dark .mq-btn{background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.34);color:#dbe4f0} .dark .mq-btn:hover{color:#fff;border-color:#fff} @media (hover:none){.mq-btn{opacity:1;transform:none}} /* ---------- 08 PROJELER ---------- */ .filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:28px} .fchip{min-height:44px;padding:0 18px;border-radius:var(--r);font-family:var(--ff-m);font-size:.76rem; letter-spacing:.04em;color:var(--ink-2);border:1.5px solid var(--line-2);background:transparent; transition:background .25s,color .25s,border-color .25s} .fchip:hover{border-color:var(--ink)} .fchip.on{background:var(--ink);color:var(--sheet);border-color:var(--ink)} .dark .fchip.on{background:#f2f5fa;color:#0e1a2d} .work{display:grid;grid-template-columns:repeat(12,1fr);gap:14px} /* tüm kartlar aynı ölçüde */ .wc{grid-column:span 4;position:relative;border:1.5px solid var(--line-2);border-radius:var(--r-l); background:var(--sheet);overflow:hidden;cursor:pointer; transition:border-color .35s,transform .5s var(--ease),box-shadow .45s} .wc:hover{transform:translate(-3px,-3px);border-color:var(--ultra);box-shadow:7px 7px 0 0 rgba(125,155,255,.22)} .wc.hide{display:none} .wc__s{position:relative;aspect-ratio:16/10;overflow:hidden;background:#0a1729; display:grid;place-items:center} .wc__s img{width:100%;height:100%;object-fit:contain;object-position:center center; transition:transform .8s var(--ease)} .wc:hover .wc__s img{transform:scale(1.035)} .wc__k{position:absolute;top:0;left:0;z-index:2;padding:5px 10px;background:var(--ink);color:var(--sheet); font-family:var(--ff-m);font-size:.64rem;letter-spacing:.08em} .wc__b{padding:16px 18px 18px;display:flex;align-items:flex-start;justify-content:space-between;gap:14px; border-top:1.5px solid var(--line-2)} .wc__t{font-family:var(--ff-d);font-weight:700;font-size:1.02rem;letter-spacing:-.02em;margin:0 0 4px} .wc__m{margin:0;font-size:.8rem;color:var(--ink-3)} .wc__d{margin:10px 0 0;font-size:.82rem;line-height:1.55;color:var(--ink-2);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;min-height:calc(3 * 1.55em)} .wc__go{flex:0 0 auto;width:34px;height:34px;display:grid;place-items:center;border-radius:var(--r-s); border:1.5px solid var(--line-2);color:var(--ink-3); transition:background .3s,color .3s,border-color .3s,transform .4s var(--ease)} .wc:hover .wc__go{background:var(--ultra);border-color:var(--ultra);color:#0a1729;transform:rotate(-45deg)} .wc__tag{position:absolute;right:10px;top:10px;z-index:2;font-family:var(--ff-m);font-size:.62rem; padding:4px 8px;background:rgba(10,23,41,.85);border:1px solid var(--line);border-radius:var(--r-s);color:var(--ink-2)} /* ---------- ÖLÇÜM BANDI ---------- */ .gauge{display:grid;grid-template-columns:repeat(4,1fr);border:1.5px solid var(--line-2); border-radius:var(--r-l);overflow:hidden;background:var(--sheet)} .gauge__c{padding:clamp(22px,3vw,36px) clamp(16px,2vw,26px);border-right:1px solid var(--line); position:relative;overflow:hidden} .gauge__c:last-child{border-right:0} .gauge__c b{display:block;font-family:var(--ff-d);font-weight:800; font-size:clamp(1.9rem,3.6vw,3rem);line-height:1;letter-spacing:-.04em;font-variant-numeric:tabular-nums} .gauge__c span{display:block;margin-top:9px;font-family:var(--ff-m);font-size:.66rem; letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)} /* alt kenarda dolan ölçü çubuğu */ .gauge__bar{position:absolute;left:0;bottom:0;height:3px;background:var(--ultra);width:0; transition:width 1.4s var(--ease-o)} /* ---------- 09 YORUMLAR ---------- */ .says{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px; height:min(600px,78vh);overflow:hidden; -webkit-mask-image:linear-gradient(180deg,transparent,#000 11%,#000 89%,transparent); mask-image:linear-gradient(180deg,transparent,#000 11%,#000 89%,transparent)} .says__col{display:flex;flex-direction:column;gap:14px;will-change:transform} .say{border:1.5px solid var(--line-2);border-radius:var(--r-l);padding:20px;background:var(--sheet); transition:border-color .3s,transform .4s var(--ease)} .say:hover{border-color:var(--ink);transform:translateY(-2px)} .say__s{display:flex;gap:2px;color:var(--signal);margin-bottom:11px} .say b{display:block;font-size:.94rem;font-weight:600;letter-spacing:-.01em;margin-bottom:7px} .say p{margin:0;font-size:.86rem;line-height:1.6;color:var(--ink-3)} .score{display:inline-flex;align-items:center;gap:14px;padding:12px 20px;border:1.5px solid var(--line-2); border-radius:var(--r);background:var(--sheet)} .score b{font-family:var(--ff-d);font-weight:800;font-size:1.5rem;letter-spacing:-.03em} .score span{font-size:.85rem;color:var(--ink-3)} /* ---------- 10 BLOG ---------- */ .posts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px} .post{position:relative;display:flex;flex-direction:column;padding:22px; border:1.5px solid var(--line-2);border-radius:var(--r-l);background:var(--sheet); transition:border-color .35s,transform .5s var(--ease),box-shadow .45s} .post:hover{transform:translate(-3px,-3px);border-color:var(--ultra);box-shadow:7px 7px 0 0 rgba(125,155,255,.22)} .post a.abs{position:absolute;inset:0;z-index:3} .post__h{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px; font-family:var(--ff-m);font-size:.68rem;color:var(--ink-3)} .post__h span{display:inline-flex;align-items:center;gap:6px} .post h3{font-family:var(--ff-d);font-weight:700;font-size:1.04rem;line-height:1.26;letter-spacing:-.02em; margin:0 0 10px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .post p{margin:0 0 18px;font-size:.86rem;line-height:1.6;color:var(--ink-3); display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden} .post__f{display:flex;align-items:center;gap:12px;margin-top:auto;padding-top:14px; border-top:1px solid var(--line);font-family:var(--ff-m);font-size:.68rem;color:var(--ink-4)} .post__f i{margin-left:auto;width:30px;height:30px;display:grid;place-items:center;border-radius:var(--r-s); border:1.5px solid var(--line-2);color:var(--ink-3);transition:background .3s,color .3s,border-color .3s} .post:hover .post__f i{background:var(--ultra);border-color:var(--ultra);color:#0a1729} /* ---------- KURUMLAR ---------- */ .marks__rows{display:flex;flex-direction:column;gap:12px} .marks__row{display:flex;gap:12px;width:max-content;will-change:transform} .marks__rows{position:relative;z-index:1} .mark{flex:0 0 auto;width:250px;height:132px;padding:20px 26px;overflow:hidden; border:1.5px solid rgba(255,255,255,.16);border-radius:var(--r-l);background:#fff; display:flex;align-items:center;justify-content:center; transition:border-color .35s,transform .45s var(--ease),box-shadow .4s} .mark img{width:100%;height:100%;object-fit:contain;object-position:center;display:block} .mark:hover{border-color:var(--signal-l);transform:translateY(-5px); box-shadow:0 10px 0 -4px rgba(0,0,0,.25)} /* ---------- 11 TEKLİF ---------- */ .quote{border:1.5px solid var(--line-2);border-radius:var(--r-l);overflow:hidden;background:var(--dark)} .quote__in{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr)} .quote__l{padding:clamp(28px,3.4vw,52px);border-right:1px solid rgba(255,255,255,.14)} .quote__r{padding:clamp(28px,3.4vw,52px)} .quote__ul{margin-top:24px;border-top:1px solid rgba(255,255,255,.14)} .quote__ul li{display:flex;align-items:center;gap:12px;padding:13px 0; border-bottom:1px solid rgba(255,255,255,.14);font-size:.9rem;color:#c3cfe2} .quote__ul svg{color:var(--signal-l);flex:0 0 auto} .f-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px} .field{position:relative;margin-bottom:12px} .field label{position:absolute;left:14px;top:16px;font-size:.88rem;color:#8fa0ba;pointer-events:none; transform-origin:0 0;transition:transform .3s var(--ease),color .25s} .field input,.field select,.field textarea{width:100%;min-height:56px;padding:23px 14px 8px; border-radius:var(--r);background:rgba(255,255,255,.06);border:1.5px solid rgba(255,255,255,.2); color:#f2f5fa;font-size:.92rem;transition:border-color .25s,background .25s} .field textarea{min-height:112px;padding-top:26px;resize:vertical} .field select{appearance:none;cursor:pointer; background-image:linear-gradient(45deg,transparent 50%,#8fa0ba 50%),linear-gradient(135deg,#8fa0ba 50%,transparent 50%); background-position:calc(100% - 20px) 60%,calc(100% - 15px) 60%;background-size:5px 5px;background-repeat:no-repeat} .field select option{background:#152439} .field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--signal-l); background:rgba(255,255,255,.1)} .field input:focus+label,.field textarea:focus+label, .field input:not(:placeholder-shown)+label,.field textarea:not(:placeholder-shown)+label, .field select:focus+label,.field select.has+label{transform:translateY(-9px) scale(.76);color:var(--signal-l)} .field.bad input,.field.bad select,.field.bad textarea{border-color:#ff8b6b} .field__e{display:block;margin-top:5px;font-family:var(--ff-m);font-size:.68rem;color:#ff8b6b} .f-note{margin:12px 0 0;font-family:var(--ff-m);font-size:.74rem;color:#7fd6a4;min-height:20px;text-align:center} /* ---------- 12 İLETİŞİM ---------- */ .contact{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:14px} .cbox{border:1.5px solid var(--line-2);border-radius:var(--r-l);padding:clamp(24px,3vw,38px); background:var(--sheet)} .cbox__l{border-top:1.5px solid var(--line-2);margin:24px 0} .cbox__l li{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:start;padding:15px 0; border-bottom:1px solid var(--line)} .cbox__l i{display:grid;place-items:center;width:38px;height:38px;border:1.5px solid var(--line-2); border-radius:var(--r);color:var(--ink)} .cbox__l b{display:block;font-family:var(--ff-m);font-size:.64rem;letter-spacing:.12em; text-transform:uppercase;color:var(--ink-4);margin-bottom:3px} .cbox__l span,.cbox__l a,.cbox__l address{font-size:.95rem;font-style:normal;color:var(--ink)} .cbox__l a:hover{color:var(--ultra)} .socs{display:flex;flex-wrap:wrap;gap:10px} .soc{width:46px;height:46px;border-radius:var(--r);display:grid;place-items:center;color:#fff; transition:transform .4s var(--ease),filter .3s} .soc:hover{transform:translateY(-4px);filter:brightness(1.08)} .soc--ig{background:linear-gradient(45deg,#f9a825,#f58529 26%,#dc2743 62%,#bc1888)} .soc--in{background:#0a2f6b} .soc--fb{background:#1877f2} .soc--yt{background:#ff0000} .map{position:relative;border:1.5px solid var(--line-2);border-radius:var(--r-l);overflow:hidden; min-height:330px;background:var(--sheet)} .map iframe{width:100%;height:100%;min-height:330px;border:0;display:block;filter:saturate(.9) brightness(.97)} .map__p{position:absolute;left:16px;bottom:16px;z-index:2;display:inline-flex;align-items:center;gap:8px; min-height:44px;padding:0 16px;border-radius:var(--r);background:var(--ink);color:var(--sheet); font-family:var(--ff-m);font-size:.72rem;letter-spacing:.05em;transition:transform .35s var(--ease)} .map__p:hover{transform:translateY(-2px)} /* ---------- 13 FOOTER ---------- */ .foot{border-top:1.5px solid var(--line-2);background:var(--dark);color:var(--sheet); --ink:#f2f5fa;--ink-2:#b9c6da;--ink-3:#8fa0ba;--ink-4:#8496b0;--line:rgba(255,255,255,.14)} .foot__g{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.3fr;gap:30px; padding-block:clamp(40px,5vw,68px) 34px} .foot h4{font-family:var(--ff-m);font-size:.66rem;font-weight:400;letter-spacing:.14em; text-transform:uppercase;color:#7f90ac;margin:0 0 16px} .foot__c a{display:block;padding:6px 0;font-size:.9rem;color:#b9c6da; transition:color .25s,transform .35s var(--ease)} .foot__c a:hover{color:#fff;transform:translateX(4px)} .foot__b p{max-width:30ch;margin:14px 0 0;font-size:.86rem;color:#8fa0ba} .news{display:flex;gap:8px;margin-top:12px} .news input{flex:1;min-width:0;min-height:46px;padding:0 13px;border-radius:var(--r); background:rgba(255,255,255,.06);border:1.5px solid rgba(255,255,255,.2);color:#f2f5fa;font-size:.88rem} .news input:focus{outline:none;border-color:var(--signal-l)} .news button{width:46px;flex:0 0 auto;border-radius:var(--r);background:var(--sheet);color:var(--ink); display:grid;place-items:center;transition:transform .35s var(--ease)} .news button:hover{transform:translateY(-2px)} .foot__bar{display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between;align-items:center; padding:18px 0 30px;border-top:1px solid rgba(255,255,255,.14); font-family:var(--ff-m);font-size:.7rem;color:#7f90ac} /* ---------- 14 SHEET / LIGHTBOX / DOCK ---------- */ .sheet{position:fixed;inset:0;z-index:600;display:flex;align-items:flex-end;justify-content:center; pointer-events:none} .sheet__sc{position:absolute;inset:0;background:rgba(14,26,45,.6);opacity:0;transition:opacity .4s} .sheet__p{position:relative;width:min(1120px,100%);max-height:92svh;overflow-y:auto;overscroll-behavior:contain; background:var(--paper-2);border:1.5px solid var(--line-2);border-bottom:0;border-radius:var(--r-l) var(--r-l) 0 0; transform:translateY(100%);transition:transform .62s var(--ease)} .sheet.open{pointer-events:auto} .sheet.open .sheet__sc{opacity:1} .sheet.open .sheet__p{transform:none} .sheet__x{position:absolute;top:14px;right:14px;z-index:3} .sheet__in{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(20px,3vw,40px); padding:clamp(22px,3vw,40px)} .sheet__m{border:1.5px solid var(--line-2);border-radius:var(--r);overflow:hidden;background:var(--dark)} .sheet__m img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;background:var(--dark);display:block} .sheet__nav{display:flex;align-items:center;gap:14px;margin-top:12px} .sheet__c{font-family:var(--ff-m);font-size:.76rem;color:var(--ink-3)} .sheet__c b{color:var(--ultra)} .feats{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:20px 0} .feat{display:flex;align-items:center;gap:11px;padding:12px;border:1.5px solid var(--line); border-radius:var(--r);background:var(--sheet);transition:border-color .3s,transform .35s var(--ease)} .feat:hover{border-color:var(--ink);transform:translateY(-2px)} .feat i{display:grid;place-items:center;width:32px;height:32px;flex:0 0 auto;color:var(--ultra)} .feat span{font-size:.8rem;font-weight:500;line-height:1.35} .buy{display:flex;flex-wrap:wrap;align-items:center;gap:16px;padding:18px; border:1.5px solid var(--line-2);border-radius:var(--r);background:var(--sheet)} .buy .p{flex:1 1 170px} .buy s{font-family:var(--ff-m);font-size:.84rem;color:var(--ink-4)} .buy strong{display:block;font-family:var(--ff-d);font-weight:800; font-size:clamp(1.6rem,2.8vw,2.2rem);letter-spacing:-.035em;line-height:1.05} .buy em{font-style:normal;font-family:var(--ff-m);font-size:.68rem;color:var(--ink-3)} .promo{display:inline-flex;align-items:center;gap:7px;margin-top:9px;padding:6px 11px;border-radius:var(--r-s); font-family:var(--ff-m);font-size:.68rem;color:#2a1405;background:var(--signal-l)} .lb{position:fixed;inset:0;z-index:700;display:grid;place-items:center;padding:clamp(14px,3vw,42px); background:rgba(14,26,45,.9);opacity:0;transition:opacity .4s} .lb.open{opacity:1} .lb__b{position:relative;width:min(1100px,100%);border:1.5px solid rgba(255,255,255,.3); border-radius:var(--r-l);overflow:hidden;background:var(--dark-2); transform:scale(.95) translateY(14px);transition:transform .6s var(--ease)} .lb.open .lb__b{transform:none} .lb__b img{width:100%;max-height:64svh;object-fit:contain;background:#0b1526} .lb__c{padding:18px 24px 24px;text-align:center;border-top:1px solid rgba(255,255,255,.16);color:#f2f5fa} .lb__c h3{font-family:var(--ff-d);font-weight:700;font-size:clamp(1.1rem,2.2vw,1.5rem); letter-spacing:-.025em;margin:0 0 5px} .lb__c p{margin:0;font-size:.85rem;color:#b9c6da} .lb__x{position:absolute;top:14px;right:14px;z-index:3} .lb__a{position:absolute;top:50%;transform:translateY(-50%);z-index:3} .lb__a--p{left:clamp(6px,2vw,22px)} .lb__a--n{right:clamp(6px,2vw,22px)} .lb .ico{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.3);color:#fff} .lb .ico:hover{background:#fff;color:var(--ink)} .dock{position:fixed;right:20px;bottom:20px;z-index:520;display:flex;flex-direction:column;gap:10px; padding-bottom:env(safe-area-inset-bottom,0)} .dock__b{position:relative;width:52px;height:52px;border-radius:var(--r);display:grid;place-items:center; color:#fff;border:1.5px solid var(--line-2); transition:transform .4s var(--ease),box-shadow .3s,opacity .3s} .dock__b:hover{transform:translate(-2px,-2px)} .dock__wa{background:#25d366;color:#08331a;box-shadow:4px 4px 0 0 rgba(0,0,0,.55)} .dock__wa:hover{box-shadow:6px 6px 0 0 rgba(0,0,0,.55)} .dock__up{background:var(--ink);color:var(--sheet);box-shadow:4px 4px 0 0 var(--ultra); opacity:0;visibility:hidden;transform:translateY(8px);pointer-events:none} .dock__up.on{opacity:1;visibility:visible;transform:none;pointer-events:auto} .dock__up:hover{box-shadow:6px 6px 0 0 var(--ultra)} .dock__t{position:absolute;right:calc(100% + 10px);top:50%;transform:translateY(-50%) translateX(5px); white-space:nowrap;font-family:var(--ff-m);font-size:.7rem;padding:7px 11px;border-radius:var(--r-s); background:var(--ink);color:var(--sheet);opacity:0;pointer-events:none;transition:opacity .25s,transform .3s} @media (hover:hover){.dock__b:hover .dock__t{opacity:1;transform:translateY(-50%)}} .prog{position:fixed;top:0;left:0;height:2px;width:100%;transform:scaleX(0);transform-origin:0 50%; background:var(--ultra);z-index:600;pointer-events:none} /* ---------- 15 HAREKET ---------- */ /* Tek bir açılış dili: alttan yükselme + maskeli kırpma. Dağınık efekt yerine bölüm içi kademeli sıra. */ .rv{opacity:0;transform:translateY(20px);transition:opacity .7s var(--ease-o),transform .8s var(--ease)} .rv.in{opacity:1;transform:none} .d1s{transition-delay:.06s}.d2s{transition-delay:.12s}.d3s{transition-delay:.18s} .d4s{transition-delay:.24s}.d5s{transition-delay:.3s} .clip{clip-path:inset(0 0 100% 0);transition:clip-path 1s var(--ease)} .clip.in{clip-path:inset(0 0 0 0)} /* satır maskesi — başlıklar aşağıdan yukarı açılır */ .ln{display:block;overflow:hidden} .ln>span{display:block;transform:translateY(105%);transition:transform .95s var(--ease)} .in .ln>span,.ln.in>span{transform:none} @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.001ms !important;transition-duration:.001ms !important} .rv{opacity:1;transform:none}.clip{clip-path:none}.ln>span{transform:none} } /* ---------- RESPONSIVE ---------- */ @media (max-width:1180px){ .work{grid-template-columns:repeat(8,1fr)} .wc{grid-column:span 4} .wc:nth-child(6n+1),.wc:nth-child(6n+4){grid-column:span 4} .posts{grid-template-columns:repeat(2,minmax(0,1fr))} .says{grid-template-columns:repeat(2,minmax(0,1fr))} .foot__g{grid-template-columns:1.4fr 1fr 1fr;row-gap:26px} } @media (max-width:1024px){ .hero__in{grid-template-columns:1fr;gap:34px} .hero__v{order:2} .about,.svc,.quote__in,.contact{grid-template-columns:1fr} .quote__l{border-right:0;border-bottom:1px solid rgba(255,255,255,.14)} .svc__view{position:relative;top:auto;order:-1} .why{grid-template-columns:repeat(2,minmax(0,1fr))} .why__c:nth-child(2n){border-right:0} .why__c:nth-child(-n+2){border-bottom:1px solid var(--line)} .sheet__in{grid-template-columns:1fr} } @media (max-width:860px){ .nav__links{display:none} .nav__cta{display:none} .burger{display:grid} .work{grid-template-columns:repeat(4,1fr)} .wc,.wc:nth-child(6n+1),.wc:nth-child(6n+4){grid-column:span 4} .posts{grid-template-columns:1fr} .says{grid-template-columns:1fr;height:min(520px,70vh)} .f-row{grid-template-columns:1fr} .plate__r{grid-template-columns:repeat(2,1fr)} .plate__c:nth-child(2n){border-right:0} .plate__c:nth-child(-n+2){border-bottom:1px solid var(--line)} .gauge{grid-template-columns:repeat(2,1fr)} .gauge__c:nth-child(2n){border-right:0} .gauge__c:nth-child(-n+2){border-bottom:1px solid var(--line)} .foot__g{grid-template-columns:1fr 1fr} } @media (max-width:640px){ body{font-size:15px} .sec{padding:clamp(48px,11vw,72px) 0} .why{grid-template-columns:1fr} .why__c{border-right:0;border-bottom:1px solid var(--line)} .svc__i{grid-template-columns:auto minmax(0,1fr);gap:12px} .svc__p{display:none} .feats{grid-template-columns:1fr} .mark{width:158px;height:88px;padding:12px 14px} .foot__g{grid-template-columns:1fr} .foot__bar{padding-bottom:92px} .dock{right:13px;bottom:13px} .dock__b{width:48px;height:48px} .dock__t{display:none} .mq-btn{right:14px} .strip .mq-btn{padding:0;width:44px;justify-content:center} .strip .mq-btn span{display:none} .lb__b img{max-height:52svh} } @media (max-width:400px){ .gauge{grid-template-columns:1fr} .gauge__c{border-right:0;border-bottom:1px solid var(--line)} .btn{min-height:48px;padding:0 18px;font-size:.9rem} } /* ============================================================= 16 ÇİZİM LAMBASI — imleçle gezen ışık Karanlık paftanın üzerinde hareket eden bir masa lambası. İmleç nereye giderse kâğıt orada aydınlanır, ızgara belirginleşir. Süs değil: föy metaforunun devamı. ============================================================= */ :root{--lx:50vw;--ly:40vh;--gx:50vw;--gy:40vh;--lamp-on:0} /* sıcak ışık havuzu — ekrana sabit, imleci takip eder */ .lamp{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:var(--lamp-on); transition:opacity .6s var(--ease-o); background: radial-gradient(360px circle at var(--lx) var(--ly),rgba(224,130,31,.11),transparent 66%), radial-gradient(620px circle at var(--lx) var(--ly),rgba(125,155,255,.09),transparent 70%)} /* ışığın altında beliren ince taksimat — kâğıda ait, sayfayla kayar */ .g--lamp{ background-image:linear-gradient(rgba(190,220,255,.34) 1px,transparent 1px), linear-gradient(90deg,rgba(190,220,255,.34) 1px,transparent 1px); background-size:var(--u) var(--u); opacity:var(--lamp-on);transition:opacity .6s var(--ease-o); -webkit-mask-image:radial-gradient(230px circle at var(--gx) var(--gy),#000 0%,rgba(0,0,0,.35) 45%,transparent 72%); mask-image:radial-gradient(230px circle at var(--gx) var(--gy),#000 0%,rgba(0,0,0,.35) 45%,transparent 72%)} /* dokunmatik ve hareket hassasiyetinde kapalı */ @media (hover:none),(prefers-reduced-motion:reduce){ .lamp,.g--lamp{display:none} } /* vurgu kelimesi — d2 başlıklarda tek bir kelimeyi öne çıkarmak için */ .d2 em{font-style:normal;color:var(--ultra)} /* ============================================================= 17 İŞ BİRLİKLERİMİZ — hizmetlerin hemen altında güven şeridi Aşağıdaki koyu "kurumlar" bandından bilinçli olarak farklı: burada kart durağan ve açık zeminli — ilk izlenimde hızlı bir güven onayı, kaydırmalı vitrin değil. ============================================================= */ .collab__grid{display:grid;grid-template-columns:repeat(6,1fr);gap:12px} .collab__card{min-height:92px;padding:16px 18px;display:flex;align-items:center;gap:12px; border:1.5px solid var(--line-2);border-radius:var(--r-l);background:#f4f7fc;color:#15202e; transition:border-color .3s,transform .4s var(--ease),box-shadow .35s} .collab__card img{flex:0 0 auto;width:auto;height:auto;max-width:72px;max-height:28px;object-fit:contain} .collab__card:not(:has(b)) img{max-width:128px;max-height:32px} .collab__card b{font-family:var(--ff-d);font-weight:700;font-size:.86rem;letter-spacing:-.01em;line-height:1.2} .collab__card:hover{border-color:var(--ultra);transform:translateY(-4px);box-shadow:0 10px 0 -5px rgba(0,0,0,.3)} @media (max-width:900px){ .collab__grid{grid-template-columns:repeat(3,1fr)} } @media (max-width:640px){ .collab__grid{grid-template-columns:repeat(2,1fr)} .collab__card{padding:12px 14px;min-height:76px} } /* ---------- SEKTÖRLER ŞERİDİ ---------- */ .sekt__rows{display:flex;flex-direction:column;gap:10px} .sekt__row{display:flex;gap:10px;width:max-content;will-change:transform} .sekt__c{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:0 18px; border:1.5px solid rgba(255,255,255,.16);border-radius:999px;background:rgba(255,255,255,.04); font-family:var(--ff);font-weight:500;font-size:.86rem;color:#dbe4f0;white-space:nowrap; transition:border-color .3s,background .3s,transform .35s var(--ease)} .sekt__c i{display:grid;place-items:center;color:var(--ultra)} .sekt__c:hover{transform:translateY(-3px);border-color:var(--ultra);background:rgba(125,155,255,.12)} .sekt__c--more{color:var(--signal-l);border-color:rgba(240,160,75,.35)} .sekt__c--more i{color:var(--signal-l)} /* ============================================================= 18 AÇILIŞ TERMİNALİ Site arka planda yüklenirken önde bir kontrol paneli çalışır. Bekleme süresi boşa geçmez: hizmetler tanıtılır, görseller yüklenir. ============================================================= */ .boot{position:fixed;inset:0;z-index:9000;background:#08111f; display:grid;place-items:center;padding:clamp(16px,4vw,40px); opacity:1;transition:opacity .55s var(--ease-o),visibility .55s} .boot.done{opacity:0;visibility:hidden;pointer-events:none} body.booting{overflow:hidden} body.booting .dock{opacity:0;pointer-events:none} .dock{transition:opacity .5s var(--ease-o) .2s} body.booting .cookie{opacity:0;pointer-events:none} /* ---------- ÇEREZ ONAYI ---------- */ .cookie{position:fixed;left:0;right:0;bottom:0;z-index:540;padding:16px; transform:translateY(110%);transition:transform .5s var(--ease-o),opacity .4s} .cookie.on{transform:none} .cookie__in{max-width:760px;margin:0 auto;display:flex;flex-wrap:wrap;align-items:center;gap:16px 20px; padding:18px 22px;border:1.5px solid var(--line-2);border-radius:var(--r-l); background:var(--paper-2);box-shadow:0 14px 0 -8px rgba(0,0,0,.35)} .cookie__ic{flex:0 0 auto;display:grid;place-items:center;width:42px;height:42px; border:1.5px solid var(--line-2);border-radius:var(--r);color:var(--ultra)} .cookie__in p{flex:1 1 240px;margin:0;font-size:.82rem;line-height:1.55;color:var(--ink-2)} .cookie__in p a{color:var(--ultra);text-decoration:underline;text-underline-offset:2px} .cookie__b{display:flex;gap:10px;flex:0 0 auto} @media (max-width:560px){ .cookie{padding:10px} .cookie__in{padding:16px} .cookie__b{width:100%} .cookie__b .btn{flex:1} } .boot{background:radial-gradient(ellipse 80% 70% at 50% 45%,#0b1a3a 0,#060d1d 62%,#040914 100%)} .boot::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5; background-image:linear-gradient(rgba(70,110,220,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(70,110,220,.08) 1px,transparent 1px); background-size:64px 64px; -webkit-mask-image:radial-gradient(ellipse at 50% 100%,#000 0,transparent 65%);mask-image:radial-gradient(ellipse at 50% 100%,#000 0,transparent 65%)} .boot__scan{position:absolute;inset:0;pointer-events:none;opacity:.35; background:repeating-linear-gradient(180deg,rgba(125,155,255,.04) 0 1px,transparent 1px 3px)} .boot__arc{position:absolute;left:50%;top:-34vmin;width:92vmin;height:92vmin;transform:translateX(-50%); border:1px solid rgba(90,140,255,.22);border-radius:50%;pointer-events:none; box-shadow:0 0 60px rgba(60,110,255,.12),inset 0 0 60px rgba(60,110,255,.08)} .boot__arc::after{content:"";position:absolute;left:50%;bottom:-3px;width:5px;height:5px;border-radius:50%; background:#5a8cff;box-shadow:0 0 12px 2px #5a8cff} .boot__side{position:absolute;top:26%;margin:0;padding:0;list-style:none;display:flex;flex-direction:column; gap:clamp(34px,8.5vh,68px);font-family:var(--ff-m);font-size:.66rem;letter-spacing:.2em; text-transform:uppercase;color:#4a68a8;pointer-events:none} .boot__side li{position:relative;padding-left:0} .boot__side li::after{content:"";display:block;width:14px;height:1px;background:#3a5590;margin-top:8px} .boot__side li::before{content:"";position:absolute;top:2px;width:5px;height:5px;background:#2f6bff} .boot__side li:nth-child(odd)::before{background:#2f6bff} .boot__side li:nth-child(1)::before,.boot__side li:nth-child(4)::before{background:#f0a04b} .boot__side--l{left:3.6%} .boot__side--l li{padding-left:0} .boot__side--l li::before{left:-32px} .boot__side--r{right:3.6%;text-align:left} .boot__side--r li::before{right:-30px} .boot__side--r li:nth-child(1)::before,.boot__side--r li:nth-child(4)::before{background:#2f6bff} .boot__side--r li:nth-child(3)::before{background:#f0a04b} .boot__side li{animation:bootTag 3.6s ease-in-out infinite} .boot__side li:nth-child(2){animation-delay:.4s}.boot__side li:nth-child(3){animation-delay:.8s}.boot__side li:nth-child(4){animation-delay:1.2s} @keyframes bootTag{0%,100%{opacity:.55}50%{opacity:1}} .boot__code{position:absolute;margin:0;font-family:var(--ff-m);font-size:.62rem;line-height:1.7;color:#27406e;pointer-events:none} .boot__code--a{right:4%;top:9%} .boot__code--b{left:5%;bottom:9%} .boot__win{position:relative;width:min(960px,100%);border:1.5px solid #2a57c8; border-radius:22px;background:rgba(7,14,30,.92);overflow:hidden; box-shadow:0 0 0 1px rgba(80,130,255,.15),0 0 60px rgba(40,90,255,.25),0 30px 90px rgba(0,0,0,.6); animation:bootIn .5s var(--ease-o) both} @keyframes bootIn{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}} .boot__bar{display:flex;align-items:center;gap:22px;padding:16px 26px; border-bottom:1px solid #16306a;background:rgba(10,20,44,.6); font-family:var(--ff-m);font-size:.82rem;letter-spacing:.14em;color:#8fa6d6} .boot__bar b{font-weight:500;color:#e6eefc;text-transform:uppercase} .boot__bar u{text-decoration:none;color:#3a5590;margin:0 6px} .boot__bar em{font-style:normal;color:#5a8cff} .boot__meta{margin-left:auto;color:#5a8cff;font-variant-numeric:tabular-nums;letter-spacing:.1em} .boot__dots{display:flex;gap:11px} .boot__dots i{width:15px;height:15px;border-radius:50%;background:#2f5bd8;box-shadow:0 0 10px rgba(47,91,216,.6)} .boot__dots i:first-child{background:#f5b041;box-shadow:0 0 10px rgba(245,176,65,.6)} .boot__body{padding:clamp(20px,3.4vw,38px) clamp(20px,4vw,58px) clamp(20px,3vw,32px)} .boot__log{margin:0;font-family:var(--ff-m);font-size:clamp(.78rem,1.45vw,1.08rem);line-height:1.8; color:#eaf1fb;white-space:pre-wrap;min-height:12.6em} .boot__log b{color:#f0a04b;font-weight:500} .boot__log em{color:#5a8cff;font-style:normal} .boot__log .hl{color:#5aa0ff} .boot__cur{display:inline-block;width:.6em;height:3px;vertical-align:-2px;margin-left:2px; background:#f0a04b;animation:bootBlink .9s steps(1,end) infinite} @keyframes bootBlink{50%{opacity:0}} .boot__brand{display:flex;align-items:center;gap:clamp(14px,2.6vw,32px);margin:clamp(8px,2vw,22px) 0 0;color:#eaf1fb; opacity:0;transform:translateY(8px);transition:opacity .5s var(--ease-o),transform .5s var(--ease-o)} .boot__brand.on{opacity:1;transform:none} .boot__brand svg{width:clamp(64px,11vw,150px);height:auto;flex:0 0 auto;filter:drop-shadow(0 0 18px rgba(70,120,255,.55))} .boot__name{display:block;font-family:var(--ff-d);font-weight:800;font-size:clamp(2.2rem,6.2vw,4.4rem);letter-spacing:-.02em;line-height:1; text-shadow:0 0 28px rgba(80,130,255,.35)} .boot__name i{font-style:normal;color:#4f84ff} .boot__thanks{margin:12px 0 0;font-size:clamp(.9rem,1.9vw,1.4rem);line-height:1.4;color:#e1eaf8; opacity:0;transform:translateY(8px);transition:opacity .5s var(--ease-o) .12s,transform .5s var(--ease-o) .12s} .boot__thanks.on{opacity:1;transform:none} .boot__sub{margin:10px 0 0;font-family:var(--ff-m);font-size:clamp(.74rem,1.5vw,1.1rem);color:#4f6fd0;letter-spacing:.04em; opacity:0;transition:opacity .5s var(--ease-o)} .boot__sub.on{opacity:1} .boot__sub s{text-decoration:none;color:#34498a;margin:0 4px} .boot__progw{display:flex;align-items:center;gap:20px;margin-top:clamp(18px,3vw,34px);padding:6px 10px; border:1px solid #16306a;border-radius:999px;background:rgba(8,16,36,.7)} .boot__prog{flex:1;height:8px;background:#10224a;border-radius:999px;overflow:hidden} .boot__prog i{display:block;height:100%;width:0;border-radius:999px; background:linear-gradient(90deg,#3a6bff,#6f9bff 55%,#f5b041);box-shadow:0 0 14px rgba(90,140,255,.7); transition:width .3s linear} .boot__pct{font-family:var(--ff-m);font-size:clamp(.8rem,1.4vw,1.05rem);color:#e6eefc;font-variant-numeric:tabular-nums;min-width:3.2em;text-align:right} .boot__skip{position:absolute;right:clamp(14px,3vw,48px);bottom:clamp(14px,4vh,44px); display:inline-flex;align-items:center;gap:10px;padding:14px 22px;min-height:48px; border:1.5px solid #2a57c8;border-radius:12px;background:rgba(10,20,44,.6);cursor:pointer; font-family:var(--ff);font-size:.9rem;letter-spacing:.02em;color:#8fb0ff; transition:background .25s,color .25s,border-color .25s} .boot__skip:hover{background:#2f5bff;border-color:#2f5bff;color:#fff} .boot__skip:focus-visible{outline:2px solid var(--signal);outline-offset:2px} @media (max-width:1180px){.boot__side,.boot__code{display:none}} @media (max-width:600px){ .boot{place-items:start center;padding-top:9vh} .boot__win{border-radius:16px} .boot__bar{padding:12px 16px;gap:12px;font-size:.66rem} .boot__dots i{width:11px;height:11px} .boot__log{min-height:11em} .boot__brand{flex-direction:column;align-items:flex-start} .boot__skip{left:clamp(14px,3vw,28px);right:clamp(14px,3vw,28px);justify-content:center} } @media (prefers-reduced-motion:reduce){ .boot__win,.boot__side li{animation:none} } /* ============================================================= 19 S.S.S. + DESTEK PANOSU Sorular bir teknik föyün madde listesi gibi: numara, başlık, açılır cevap. Sağdaki pano paftanın kenarındaki iletişim kutusu. ============================================================= */ .faq{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.62fr); gap:clamp(24px,3.2vw,52px);align-items:start} .faq__list{border-top:1.5px solid var(--line-2)} .fq{border-bottom:1.5px solid var(--line-2)} .fq summary{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:16px;align-items:center; padding:20px 4px;cursor:pointer;list-style:none; transition:background .3s,padding-left .3s var(--ease)} .fq summary::-webkit-details-marker{display:none} .fq summary:hover{background:rgba(125,155,255,.06);padding-left:12px} .fq summary:focus-visible{outline:2px solid var(--ultra);outline-offset:-2px} .fq__n{font-family:var(--ff-m);font-size:.72rem;color:var(--ink-4);letter-spacing:.06em} .fq[open] .fq__n{color:var(--ultra)} .fq__q{font-family:var(--ff-d);font-weight:700;font-size:clamp(1rem,1.5vw,1.18rem); letter-spacing:-.02em;color:var(--ink);line-height:1.35} .fq__i{position:relative;flex:0 0 auto;width:28px;height:28px;border:1.5px solid var(--line-2); border-radius:var(--r-s);transition:background .3s,border-color .3s,transform .4s var(--ease)} .fq__i::before,.fq__i::after{content:"";position:absolute;left:50%;top:50%;background:var(--ink-2); transition:transform .35s var(--ease),background .3s} .fq__i::before{width:11px;height:1.5px;transform:translate(-50%,-50%)} .fq__i::after{width:1.5px;height:11px;transform:translate(-50%,-50%)} .fq summary:hover .fq__i{border-color:var(--ultra)} .fq[open] .fq__i{background:var(--ultra);border-color:var(--ultra);transform:rotate(180deg)} .fq[open] .fq__i::before,.fq[open] .fq__i::after{background:#0a1729} .fq[open] .fq__i::after{transform:translate(-50%,-50%) scaleY(0)} .fq__a{padding:0 4px 22px 56px;animation:fqIn .38s var(--ease-o) both} .fq__a p{margin:0;font-size:.95rem;line-height:1.72;color:var(--ink-3);max-width:62ch} @keyframes fqIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}} /* --- destek panosu --- */ .faqbn{position:relative;overflow:hidden;border:1.5px solid #1f7a52;border-radius:var(--r-l); background:linear-gradient(160deg,#0f3d2c 0%,#0d2b3f 58%,#12233d 100%)} .faqbn__grid{position:absolute;inset:0;pointer-events:none;opacity:.5; background-image:linear-gradient(rgba(120,235,180,.09) 1px,transparent 1px), linear-gradient(90deg,rgba(120,235,180,.09) 1px,transparent 1px); background-size:26px 26px; -webkit-mask-image:radial-gradient(120% 90% at 82% 6%,#000,transparent 72%); mask-image:radial-gradient(120% 90% at 82% 6%,#000,transparent 72%)} .faqbn__in{position:relative;padding:clamp(24px,3vw,34px)} .faqbn__tag{display:inline-block;font-family:var(--ff-m);font-size:.63rem;letter-spacing:.2em; color:#7fe6b0;border:1px solid rgba(127,230,176,.34);border-radius:var(--r-s);padding:5px 10px} .faqbn__ic{display:grid;place-items:center;width:56px;height:56px;margin:20px 0 16px; border-radius:16px;background:#25d366;color:#0a2a1a} .faqbn h3{margin:0 0 12px;font-family:var(--ff-d);font-weight:700;color:#eefaf3; font-size:clamp(1.25rem,2.1vw,1.6rem);letter-spacing:-.03em;line-height:1.15} .faqbn p{margin:0 0 22px;font-size:.9rem;line-height:1.66;color:#a8ccbb;max-width:40ch} .faqbn .btn--solid{background:#25d366;border-color:#25d366;color:#06281a} .faqbn .btn--solid:hover{background:#1fbb5a;border-color:#1fbb5a} .faqbn__tel{display:flex;align-items:center;justify-content:center;gap:9px;margin-top:12px; padding:11px;border:1.5px solid rgba(127,230,176,.3);border-radius:var(--r-s); font-family:var(--ff-m);font-size:.86rem;letter-spacing:.05em;color:#cdeede; transition:background .25s,border-color .25s} .faqbn__tel:hover{background:rgba(127,230,176,.1);border-color:rgba(127,230,176,.6)} .faqbn__ul{list-style:none;margin:22px 0 0;padding:18px 0 0;display:grid;gap:11px; border-top:1px solid rgba(127,230,176,.2)} .faqbn__ul li{display:flex;align-items:center;gap:10px;font-size:.84rem;color:#9dc4b3} .faqbn__ul svg{flex:0 0 auto;color:#7fe6b0} @media (max-width:1024px){ .faq{grid-template-columns:1fr} .faqbn{order:-1} } @media (max-width:600px){ .fq summary{gap:11px;padding:17px 2px} .fq__i{width:24px;height:24px} .fq__a{padding-left:38px} } /* ===================================================================== v5 — Hakkımızda / Başlangıç / İletişim / Footer (referans birebir) ===================================================================== */ /* ---- HAKKIMIZDA ---- */ .ab2__grid{display:grid;grid-template-columns:minmax(0,1.38fr) minmax(0,1fr);grid-template-areas:"head quote" "fig list" "stats list"; gap:clamp(18px,2.2vw,32px) clamp(24px,3vw,56px);align-items:start} .ab2__head{grid-area:head} .ab2__head .d2{font-size:clamp(2.1rem,3.9vw,3.6rem);line-height:1.06;margin:14px 0 18px} .ab2__head .d2 em,.ct2__head .d2 em{font-style:normal;background:linear-gradient(90deg,#49a0ff,#6f8fff);-webkit-background-clip:text;background-clip:text;color:transparent} .ab2__q{grid-area:quote;position:relative;margin:0;padding:clamp(22px,2.4vw,34px);min-height:200px;align-self:stretch; border:1.5px solid rgba(120,160,255,.3);border-radius:20px;overflow:hidden;background:#0a1630} .ab2__q img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:80% 30%;opacity:.55;filter:saturate(.8)} .ab2__q::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(8,16,36,.97) 38%,rgba(8,16,36,.2))} .ab2__q>:not(img){position:relative;z-index:2} .ab2__qm{color:#5a8cff;display:block} .ab2__q p{font-style:italic;font-size:clamp(1.05rem,1.5vw,1.4rem);line-height:1.5;color:#eaf1fb;margin:14px 0 18px} .ab2__ul{display:block;width:46px;height:3px;border-radius:3px;background:#3a63ff} .ab2__fig{grid-area:fig;position:relative;aspect-ratio:16/9.3;border-radius:20px;overflow:hidden; border:1.5px solid rgba(90,140,255,.55);box-shadow:0 0 44px -8px rgba(60,100,255,.5)} .ab2__ph{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform-origin:50% 50%; transition:transform 1.3s var(--ease-o),transform-origin 1.3s var(--ease-o)} .ab2__fig[data-v="1"] .ab2__ph{transform:scale(1.6);transform-origin:16% 42%} .ab2__fig[data-v="2"] .ab2__ph{transform:scale(1.5);transform-origin:76% 70%} .ab2__fig::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,transparent 55%,rgba(5,10,24,.72))} .ab2__cap{position:absolute;left:16px;bottom:16px;z-index:3;display:flex;align-items:center;gap:14px;padding:12px 24px 12px 12px; border-radius:14px;background:rgba(8,16,36,.64);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.14)} .ab2__play{width:52px;height:52px;flex:0 0 auto;border-radius:50%;display:grid;place-items:center;color:#fff;cursor:pointer; background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.28);transition:background .3s,transform .3s} .ab2__play:hover{background:#3a63ff;transform:scale(1.06)} .ab2__fig.play .ab2__play{background:#3a63ff} .ab2__cap b{display:block;color:#fff;font-size:1rem} .ab2__cap span{display:block;color:#b9c6e0;font-size:.86rem;margin-top:2px} .ab2__ctl{position:absolute;right:16px;bottom:16px;z-index:3;display:flex;align-items:center;gap:10px} .ab2__dots{display:flex;gap:14px;margin-right:30px} .ab2__dots button{font-family:var(--ff-m);font-size:.62rem;color:rgba(255,255,255,.5);padding:6px 0 4px;border-bottom:2px solid transparent;cursor:pointer} .ab2__dots button.on{color:#fff;border-bottom-color:#5a8cff} .ab2__a{width:50px;height:50px;border-radius:50%;display:grid;place-items:center;color:#fff;cursor:pointer; background:rgba(8,16,36,.6);border:1px solid rgba(255,255,255,.25);transition:background .3s,color .3s} .ab2__a:last-child{background:#fff;color:#0a1630} .ab2__a:hover{background:#3a63ff;color:#fff} .ab2__stats{grid-area:stats;display:grid;grid-template-columns:repeat(4,auto);justify-content:space-between;list-style:none;margin:0;padding:6px 0 0} .ab2__stats li{display:flex;align-items:center;gap:12px;padding:0 clamp(8px,1.2vw,22px);border-left:1px solid rgba(255,255,255,.12)} .ab2__stats li:first-child{padding-left:0;border-left:0} .ab2__stats i{display:grid;place-items:center;color:#5a8cff;filter:drop-shadow(0 0 8px rgba(90,140,255,.5))} .ab2__stats b{display:block;font-family:var(--ff-d);font-size:clamp(1.15rem,1.6vw,1.45rem);color:#fff;font-weight:700} .ab2__stats span{display:block;font-size:.78rem;color:#a8b8d8;white-space:nowrap} .spec2{grid-area:list;list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px;align-self:stretch;justify-content:space-between} .spec2 li{display:grid;grid-template-columns:auto auto minmax(0,1fr) auto;align-items:center;gap:clamp(12px,1.4vw,20px); padding:clamp(14px,1.4vw,22px) clamp(16px,1.6vw,24px) clamp(14px,1.4vw,22px) 0;position:relative;overflow:hidden; border:1px solid rgba(120,160,255,.22);border-radius:16px;background:rgba(14,26,56,.55);cursor:default;flex:1; transition:background .35s,border-color .35s,box-shadow .35s} .s2__n{align-self:stretch;display:grid;place-items:center;width:clamp(44px,4vw,66px);font-family:var(--ff-m);font-size:1.02rem;color:#9db4e6; background:rgba(255,255,255,.03);border-right:1px solid rgba(120,160,255,.15)} .s2__i{width:clamp(50px,4.4vw,62px);aspect-ratio:1;border-radius:16px;display:grid;place-items:center;color:#fff;background:rgba(255,255,255,.06)} .spec2 b{display:block;font-size:clamp(1rem,1.25vw,1.18rem);color:#fff;font-weight:600} .spec2 li div span{display:block;font-size:clamp(.82rem,.95vw,.92rem);line-height:1.5;color:#a8b8d8;margin-top:4px} .s2__a{color:#5a8cff;transition:transform .35s var(--ease)} .spec2 li.on,.spec2 li:hover{background:linear-gradient(90deg,#3a63ff,#2c4fd6);border-color:#7da2ff;box-shadow:0 0 36px -6px rgba(60,100,255,.7)} .spec2 li.on .s2__n,.spec2 li:hover .s2__n{background:rgba(255,255,255,.12);color:#fff} .spec2 li.on .s2__i,.spec2 li:hover .s2__i{background:rgba(255,255,255,.14)} .spec2 li.on div span,.spec2 li:hover div span{color:#e2eaff} .spec2 li.on .s2__a,.spec2 li:hover .s2__a{color:#fff;transform:translateX(4px)} .spec2:has(li:hover) li.on:not(:hover){background:rgba(14,26,56,.55);border-color:rgba(120,160,255,.22);box-shadow:none} .spec2:has(li:hover) li.on:not(:hover) .s2__n{background:rgba(255,255,255,.03);color:#9db4e6} .spec2:has(li:hover) li.on:not(:hover) .s2__i{background:rgba(255,255,255,.06)} .spec2:has(li:hover) li.on:not(:hover) div span{color:#a8b8d8} .spec2:has(li:hover) li.on:not(:hover) .s2__a{color:#5a8cff;transform:none} @media (max-width:1000px){ .ab2__grid{grid-template-columns:1fr;grid-template-areas:"head" "quote" "fig" "stats" "list"} .ab2__stats{grid-template-columns:repeat(2,1fr);gap:18px 0} .ab2__stats li:nth-child(3){padding-left:0;border-left:0} } @media (max-width:560px){.ab2__dots{display:none}.ab2__cap{right:16px}.ab2__ctl{bottom:84px;right:auto;left:16px}} /* ---- BAŞLANGIÇ ---- */ .tk{position:relative;overflow:hidden;background:#050c1c} .tk__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:25% 50%;opacity:.3;filter:saturate(.7)} .tk::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none; background:radial-gradient(ellipse 55% 70% at 78% 50%,rgba(40,80,220,.3),transparent 70%),linear-gradient(90deg,rgba(5,12,28,.55) 0,rgba(5,12,28,.82) 55%,#050c1c)} .tk .wrap{position:relative;z-index:2} .tk__grid{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:clamp(24px,4vw,72px);align-items:center} .tk__l .d2{font-size:clamp(2.3rem,4.3vw,3.9rem);line-height:1.05;margin:18px 0 16px;color:#fff} .tk__l .d2 em{font-style:normal;background:linear-gradient(90deg,#49a0ff,#2f8cff);-webkit-background-clip:text;background-clip:text;color:transparent} .tk__f{list-style:none;margin:28px 0 0;padding:0;display:flex;flex-direction:column;gap:14px} .tk__f li{display:flex;align-items:center;gap:16px} .tk__f i{width:60px;height:60px;border-radius:14px;display:grid;place-items:center;color:#7da2ff;flex:0 0 auto; background:rgba(20,40,90,.6);border:1.5px solid rgba(90,140,255,.45);box-shadow:0 0 24px -8px rgba(60,100,255,.6)} .tk__f b{display:block;color:#fff;font-size:1.1rem;font-weight:600} .tk__f span{color:#a8b8d8;font-size:.92rem} .tk__s{display:flex;list-style:none;margin:30px 0 0;padding:24px 0 0;border-top:1px solid rgba(255,255,255,.14)} .tk__s li{padding:0 clamp(14px,2.2vw,38px);border-left:1px solid rgba(255,255,255,.14)} .tk__s li:first-child{padding-left:0;border-left:0} .tk__s b{display:block;font-family:var(--ff-d);font-size:clamp(1.3rem,1.9vw,1.7rem);color:#fff;font-weight:700} .tk__s span{font-size:.86rem;color:#a8b8d8} .tk__card{position:relative;padding:clamp(24px,3vw,44px);border-radius:26px;border:1.5px solid rgba(80,140,255,.6); background:linear-gradient(160deg,rgba(18,36,86,.78),rgba(8,18,46,.84));backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px); box-shadow:0 0 60px -10px rgba(50,110,255,.55),inset 0 0 50px rgba(60,100,255,.08)} .tk__send{position:absolute;right:clamp(18px,2.4vw,36px);top:clamp(18px,2.4vw,36px);width:clamp(60px,6vw,84px);aspect-ratio:1;border-radius:50%; display:grid;place-items:center;color:#cfe0ff;border:1px solid rgba(120,160,255,.4); background:radial-gradient(circle,rgba(60,110,255,.35),rgba(10,20,60,.5));box-shadow:0 0 30px -4px rgba(60,110,255,.6)} .tk__eye{display:flex;align-items:center;gap:10px;font-family:var(--ff-m);font-size:.78rem;letter-spacing:.14em;color:#cfe0ff} .tk__eye i{width:11px;height:11px;border-radius:50%;background:#2f8cff;box-shadow:0 0 12px #2f8cff} .tk__card h3{font-family:var(--ff-d);font-weight:800;font-size:clamp(1.7rem,2.6vw,2.4rem);color:#fff;margin:10px 0 8px;letter-spacing:-.02em} .tk__sub{margin:0 0 26px;color:#b9c6e0;max-width:34em} .tk__card .f-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px} .tk__card .field{position:relative;margin-bottom:12px} .tk__card .field input,.tk__card .field select,.tk__card .field textarea{width:100%;min-height:58px;padding:22px 14px 8px 48px;border-radius:12px; border:1px solid rgba(120,160,255,.28);background:rgba(8,16,40,.6);color:#fff;font-size:.95rem; background-image:none} .tk__card .field textarea{min-height:140px;padding-top:30px;padding-bottom:30px} .tk__card .field input:focus,.tk__card .field select:focus,.tk__card .field textarea:focus{border-color:#5a8cff;background:rgba(14,28,70,.7);box-shadow:0 0 0 3px rgba(60,110,255,.2)} .tk__card .field label{left:48px;top:19px;font-size:.92rem;color:#9db4e6} .tk__card .field input:focus+label,.tk__card .field textarea:focus+label, .tk__card .field input:not(:placeholder-shown)+label,.tk__card .field textarea:not(:placeholder-shown)+label, .tk__card .field select:focus+label,.tk__card .field select.has+label{transform:translateY(-11px) scale(.76);color:#7da2ff} .field__i{position:absolute;left:15px;top:19px;color:#9db4e6;z-index:1;pointer-events:none} .field__d{position:absolute;right:14px;top:21px;color:#cfe0ff;pointer-events:none} .field__c{position:absolute;right:14px;bottom:12px;font-size:.78rem;color:#7f92b8;pointer-events:none} .tk__btn{display:flex;align-items:center;justify-content:center;gap:12px;width:100%;min-height:56px;margin-top:6px;border-radius:12px;cursor:pointer; background:linear-gradient(180deg,#38a6ff,#2a8cff);color:#fff;font-weight:600;font-size:1rem; box-shadow:0 12px 34px -10px rgba(40,140,255,.8),inset 0 1px 0 rgba(255,255,255,.35);transition:transform .3s var(--ease),box-shadow .3s} .tk__btn:hover{transform:translateY(-2px);box-shadow:0 16px 40px -10px rgba(40,140,255,.95),inset 0 1px 0 rgba(255,255,255,.4)} .tk__lock{display:flex;align-items:center;justify-content:center;gap:8px;margin:16px 0 0;font-size:.82rem;color:#8fa4cc;text-align:center} @media (max-width:980px){.tk__grid{grid-template-columns:1fr}.tk__card .f-row{grid-template-columns:1fr}} /* ---- İLETİŞİM ---- */ .ct2__head{display:flex;justify-content:space-between;align-items:flex-start;gap:30px;margin-bottom:clamp(22px,3vw,40px)} .ct2__head .d2{font-size:clamp(2.2rem,4.3vw,3.9rem);line-height:1.04;margin:14px 0 18px} .ct2__head .lead{max-width:36em} .ct2__script{margin:clamp(10px,3vw,40px) clamp(0px,6vw,120px) 0 0;font-family:"Dancing Script","Segoe Script","Snell Roundhand","Brush Script MT",cursive; font-size:clamp(1.5rem,2.6vw,2.4rem);line-height:1.25;color:#cfe0ff;transform:rotate(-5deg);text-align:left;padding-bottom:14px; border-bottom:2px solid #3a63ff;border-radius:0 0 40px 0;white-space:nowrap} .ct2__main{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);gap:clamp(16px,2vw,28px)} .cbox2{border:1.5px solid rgba(90,140,255,.5);border-radius:22px;background:linear-gradient(160deg,rgba(16,32,76,.7),rgba(8,16,40,.8)); padding:clamp(8px,1vw,12px) clamp(20px,2.4vw,34px) clamp(20px,2.4vw,30px);box-shadow:0 0 50px -14px rgba(50,110,255,.5)} .cbox2__l{list-style:none;margin:0;padding:0} .cbox2__l li+li{border-top:1px solid rgba(120,160,255,.16)} .cbox2__l a{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:18px;padding:clamp(16px,1.8vw,24px) 0;color:inherit;text-decoration:none} .cbox2__l i{width:62px;height:62px;border-radius:50%;display:grid;place-items:center;color:#cfe0ff; background:radial-gradient(circle at 35% 30%,rgba(70,120,255,.45),rgba(14,28,70,.9));border:1.5px solid rgba(110,150,255,.5);box-shadow:0 0 24px -6px rgba(60,110,255,.7)} .cbox2__l b{display:block;font-family:var(--ff-m);font-size:.7rem;letter-spacing:.16em;color:#9db4e6;font-weight:500} .cbox2__l .cv{display:block;font-size:clamp(1.1rem,1.5vw,1.35rem);color:#fff;font-weight:600;margin:3px 0 2px} .cbox2__l .cs{display:block;font-size:.88rem;color:#a8b8d8} .cbox2__l .cc{color:#9db4e6;transition:transform .3s var(--ease),color .3s} .cbox2__l a:hover .cc{transform:translateX(4px);color:#fff} .cbox2__soc{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;padding-top:20px;border-top:1px solid rgba(120,160,255,.16)} .cbox2__soc b{font-family:var(--ff-m);font-size:.72rem;letter-spacing:.16em;color:#5a8cff;font-weight:500} .cbox2__soc p{margin:8px 0 0;font-size:.88rem;color:#a8b8d8;max-width:24em;line-height:1.5} .cbox2 .socs{gap:12px} .cbox2 .soc{width:56px;height:56px;border-radius:14px} .map2{position:relative;border:1.5px solid rgba(90,140,255,.5);border-radius:22px;overflow:hidden;min-height:380px;background:#0e1730;box-shadow:0 0 50px -14px rgba(50,110,255,.5)} .map2 iframe{position:absolute;inset:0;width:100%;height:100%;border:0;filter:invert(.92) hue-rotate(180deg) saturate(.6) brightness(.95) contrast(.95)} .map2__info{position:absolute;left:16px;top:16px;z-index:2;display:flex;align-items:center;gap:14px;padding:12px 22px 12px 12px;border-radius:14px; background:rgba(8,16,36,.82);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.14)} .map2__info i{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;color:#7da2ff;background:rgba(40,70,160,.4);border:1px solid rgba(110,150,255,.4)} .map2__info b{display:block;color:#fff;font-size:.98rem} .map2__info span{display:block;color:#b9c6e0;font-size:.84rem;line-height:1.4} .map2__open{position:absolute;left:16px;bottom:16px;z-index:2;display:inline-flex;align-items:center;gap:10px;padding:13px 20px;border-radius:12px; background:rgba(8,16,36,.85);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.16);color:#fff;font-weight:600;text-decoration:none; transition:transform .3s var(--ease),border-color .3s} .map2__open:hover{transform:translateY(-2px);border-color:#5a8cff} .ct2__ben{list-style:none;margin:clamp(22px,3vw,40px) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr) 1.2fr;align-items:center;gap:0} .ct2__ben li{display:flex;align-items:center;gap:16px;padding:0 clamp(12px,1.8vw,28px)} .ct2__ben li:first-child{padding-left:0} .ct2__ben li+li{border-left:1px solid rgba(255,255,255,.12)} .ct2__ben i{flex:0 0 auto;width:68px;height:68px;border-radius:50%;display:grid;place-items:center;color:#cfe0ff; border:1.5px solid rgba(110,150,255,.5);background:radial-gradient(circle at 35% 30%,rgba(70,120,255,.3),rgba(14,28,70,.8))} .ct2__ben b{display:block;color:#fff;font-size:1rem} .ct2__ben span{display:block;color:#a8b8d8;font-size:.86rem;line-height:1.5;margin-top:3px} .ct2__quote{justify-content:flex-end;align-items:flex-start;gap:12px;color:#5a8cff} .ct2__quote p{margin:0;font-family:"Dancing Script","Segoe Script","Snell Roundhand","Brush Script MT",cursive;font-size:clamp(1.15rem,1.7vw,1.6rem);line-height:1.3;color:#cfe0ff; padding-bottom:10px;border-bottom:2px solid #3a63ff} @media (max-width:1000px){ .ct2__main{grid-template-columns:1fr} .ct2__ben{grid-template-columns:1fr 1fr;gap:20px 0} .ct2__ben li:nth-child(3),.ct2__quote{padding-left:0;border-left:0} .ct2__script{display:none} } @media (max-width:560px){.ct2__ben{grid-template-columns:1fr}.ct2__ben li{border-left:0!important;padding:0}} /* ---- FOOTER ---- */ .ft2{position:relative;overflow:hidden;border-top:0;background:linear-gradient(180deg,#050d1e,#04091a)} .ft2__wave{position:absolute;inset:0;pointer-events:none; background:radial-gradient(ellipse 40% 60% at 0 100%,rgba(30,80,255,.3),transparent 70%),radial-gradient(ellipse 36% 50% at 100% 0,rgba(30,80,255,.25),transparent 70%)} .ft2 .wrap{position:relative;z-index:1} .ft2 .foot__g{grid-template-columns:1.25fr .9fr 1fr 1.15fr;gap:clamp(20px,3vw,56px);padding-block:clamp(44px,5vw,72px) 34px} .ft2__brand{display:flex;flex-direction:column;align-items:flex-start;gap:0;color:#fff;text-decoration:none} .ft2__m{width:clamp(70px,7vw,96px);height:auto;filter:drop-shadow(0 0 16px rgba(60,120,255,.5))} .ft2__n{font-family:var(--ff-d);font-weight:800;font-size:clamp(2rem,3.4vw,3rem);letter-spacing:-.01em;line-height:1;margin-top:4px} .ft2__n i{font-style:normal;color:#2f8cff} .ft2__t{font-family:var(--ff-m);font-size:.74rem;letter-spacing:.34em;color:#b9c6e0;margin-top:6px} .ft2__script{margin:22px 0 0;font-family:"Dancing Script","Segoe Script","Snell Roundhand","Brush Script MT",cursive;font-size:clamp(1.25rem,1.9vw,1.75rem);color:#fff;max-width:none} .ft2__script em{font-style:normal;color:#49a0ff;border-bottom:2px solid #3a63ff;padding-bottom:4px} .ft2__d{margin:18px 0 0;max-width:30ch;font-size:.95rem;color:#c3d0ea} .ft2__soc{display:flex;gap:12px;margin-top:24px} .ft2__soc a{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;color:#fff;border:1.5px solid rgba(80,130,255,.55); background:rgba(8,18,44,.6);transition:background .3s,transform .3s var(--ease)} .ft2__soc a:hover{background:#2f5bff;transform:translateY(-3px)} .ft2 .foot__c{position:relative;padding-left:clamp(14px,2.4vw,40px);border-left:1px solid rgba(120,160,255,.18)} .ft2 .foot h4,.ft2 h4{display:flex;align-items:center;gap:12px;font-family:var(--ff);font-size:1.15rem;font-weight:700;letter-spacing:0;text-transform:none;color:#fff;margin:0 0 28px;position:relative} .ft2 h4 svg{color:#2f8cff} .ft2 h4::after{content:"";position:absolute;left:0;bottom:-12px;width:38px;height:3px;border-radius:3px;background:#2f8cff} .ft2 .foot__c>a{display:flex;align-items:center;gap:14px;padding:9px 0;font-size:1rem;color:#d3def2} .ft2 .foot__c>a svg{color:#2f8cff;flex:0 0 auto} .ft2 .foot__c>a:hover{color:#fff;transform:translateX(4px)} .ft2__news p{margin:0;font-size:1rem;line-height:1.55;color:#c3d0ea} .ft2 .news{display:flex;gap:0;margin-top:20px} .news__f{flex:1;min-width:0;display:flex;align-items:center;gap:10px;padding:0 14px;border-radius:12px 0 0 12px;background:rgba(30,46,80,.7);color:#7da2ff} .ft2 .news input{flex:1;min-width:0;min-height:54px;padding:0;background:transparent;border:0;color:#fff;font-size:.98rem} .ft2 .news input::placeholder{color:#8fa4cc} .ft2 .news input:focus{outline:none;box-shadow:none} .ft2 .news button{width:60px;min-height:54px;border-radius:0 12px 12px 0;background:linear-gradient(180deg,#38a6ff,#2a7cff);color:#fff} .ft2__ghost{position:absolute;right:-14%;bottom:-70px;width:78%;height:auto;color:rgba(40,90,200,.2);pointer-events:none;z-index:-1} .ft2__div{position:relative;height:1px;background:linear-gradient(90deg,rgba(47,140,255,.2),#2f8cff 50%,rgba(47,140,255,.2));margin-top:8px} .ft2__div span{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:52px;height:52px;border-radius:50%;display:grid;place-items:center; background:#071230;border:1.5px solid #2f8cff;box-shadow:0 0 24px rgba(47,140,255,.6)} .ft2 .foot__bar{border-top:0;padding:30px 0 34px;font-size:inherit;color:#c3d0ea} .ft2__sig{font-family:"Dancing Script","Segoe Script","Snell Roundhand","Brush Script MT",cursive;font-size:clamp(1.1rem,1.7vw,1.5rem);color:#fff;font-style:italic; padding-bottom:10px;border-bottom:2px solid #3a63ff} .ft2__meta{display:flex;align-items:center;gap:0;font-family:var(--ff);font-size:1rem} .ft2__meta>span{display:inline-flex;align-items:center;gap:10px;padding:0 22px} .ft2__meta>span+span{border-left:1px solid rgba(255,255,255,.18)} .ft2__meta>span:last-child{padding-right:0} .ft2__meta svg{color:#2f8cff} @media (max-width:1000px){ .ft2 .foot__g{grid-template-columns:1fr 1fr} .ft2 .foot__c:nth-of-type(odd){border-left:0;padding-left:0} } @media (max-width:620px){ .ft2 .foot__g{grid-template-columns:1fr} .ft2 .foot__c{border-left:0;padding-left:0} .ft2__meta{flex-wrap:wrap;gap:8px}.ft2__meta>span{padding:0 14px 0 0;border-left:0!important} } /* v5 ince ayarlar */ .tk__bg{opacity:.18;filter:saturate(.6) blur(2px);object-position:55% 60%} .cbox2__l .cv{font-size:clamp(1rem,1.2vw,1.2rem)} .ct2__ben i{width:60px;height:60px} .ct2__ben li{gap:14px} .ct2__ben{grid-template-columns:repeat(3,minmax(0,1fr)) minmax(0,1.1fr)} .ft2 .ft2__script{font-size:clamp(1.3rem,2vw,1.8rem);max-width:none;margin-top:22px;color:#fff} .ft2 .ft2__d{font-size:.95rem;max-width:30ch;margin-top:18px;color:#c3d0ea} .ft2 .foot__c>a{font-size:.95rem} @media (max-width:1000px){ .ct2__ben{grid-template-columns:1fr 1fr;gap:22px 0} .ct2__ben li:nth-child(3),.ct2__ben .ct2__quote{padding-left:0;border-left:0} } @media (max-width:560px){ .ct2__ben{grid-template-columns:1fr} .ct2__ben li{border-left:0!important;padding:0} .ab2__ctl{top:12px;bottom:auto;right:12px;left:auto} } /* referans logo/tabela tasarımları */ .mark--photo{width:calc(132px * var(--r,2));padding:0;background:#0b1424;border-color:rgba(255,255,255,.2)} .mark--photo img{object-fit:cover} @media (max-width:600px){.mark--photo{width:calc(88px * var(--r,2));padding:0}} /* v6: statik hero görseli */ .eck-img{position:relative;width:100%;margin:0;border-radius:var(--r-l);overflow:hidden; -webkit-mask-image:radial-gradient(ellipse 98% 96% at 52% 50%,#000 72%,transparent 100%);mask-image:radial-gradient(ellipse 98% 96% at 52% 50%,#000 72%,transparent 100%)} .eck-img img{display:block;width:100%;height:auto;transition:transform .6s var(--ease-o),filter .4s var(--ease);will-change:transform} .eck-img:hover img{transform:scale(1.025);filter:brightness(1.08) saturate(1.06)} @media (prefers-reduced-motion:reduce){.eck-img img{transition:none}.eck-img:hover img{transform:none}} .mark--photo[style*="--r:1.2"]{width:calc(132px * 1.2)} /* v7: ana sayfa — referans düzeni */ .hero__in{grid-template-columns:minmax(0,.86fr) minmax(0,1.5fr);gap:clamp(20px,2.6vw,44px);align-items:center} .hero h1{font-size:clamp(2.9rem,5.6vw,5.1rem);line-height:.98;letter-spacing:-.045em} .hero__v{margin-right:calc(-1 * clamp(0px,3vw,48px))} .eck-img{-webkit-mask-image:radial-gradient(ellipse 100% 100% at 50% 50%,#000 78%,transparent 100%);mask-image:radial-gradient(ellipse 100% 100% at 50% 50%,#000 78%,transparent 100%)} .hero__plate{grid-column:1/-1;margin-top:clamp(8px,1.6vw,22px);border-radius:14px;background:rgba(10,20,38,.72);border:1.5px solid var(--line-2)} .hero__plate .plate__c{display:flex;align-items:center;gap:18px;padding:22px clamp(16px,2.4vw,40px)} .hero__plate .plate__i{flex:0 0 auto;display:grid;place-items:center;width:56px;height:56px;border-radius:50%; border:1.5px solid var(--line-2);background:rgba(125,155,255,.08);color:var(--ultra);transition:background .25s,border-color .25s,transform .25s} .hero__plate .plate__c:hover .plate__i{background:rgba(125,155,255,.2);border-color:var(--ultra);transform:translateY(-2px)} .hero__plate .plate__c b{font-size:clamp(1.5rem,2.4vw,2.1rem)} .hero__plate .plate__c span{font-size:.78rem;margin-top:6px;color:var(--ink-2)} @media (max-width:1100px){.hero__v{margin-right:0}.hero__plate .plate__c{padding:16px}.hero__plate .plate__i{width:44px;height:44px}} @media (max-width:900px){.hero__plate{grid-column:auto;order:3}} .eck-img{-webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 94%,transparent),linear-gradient(180deg,transparent,#000 10%,#000 90%,transparent);-webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent,#000 9%,#000 94%,transparent),linear-gradient(180deg,transparent,#000 10%,#000 90%,transparent);mask-composite:intersect} .hero__cta{flex-wrap:nowrap}.hero__cta .btn{white-space:nowrap;padding-inline:clamp(14px,1.3vw,22px)} @media (max-width:600px){.hero__cta{flex-wrap:wrap}} @media (max-width:1100px){.hero__in{grid-template-columns:1fr;gap:28px}.hero__v{order:2}.hero__plate{order:3}.hero__plate .plate__r{grid-template-columns:repeat(2,1fr)}.hero__plate .plate__c:nth-child(2n){border-right:0}.hero__plate .plate__c:nth-child(-n+2){border-bottom:1px solid var(--line)}.hero h1{font-size:clamp(2.4rem,9vw,4.2rem)}} @media (max-width:520px){.hero__plate .plate__c{gap:10px;padding:14px 12px}.hero__plate .plate__i{width:38px;height:38px}.hero__plate .plate__i svg{width:20px;height:20px}.hero__plate .plate__c b{font-size:1.3rem}.hero__plate .plate__c span{font-size:.62rem;letter-spacing:.04em}} /* v8: hareketli paneller */ .eck-img{position:relative} .eck-img:hover img.hp-base{transform:none;filter:none} .eck-img img.hp-base{transition:none} .eck-img .hp{position:absolute;height:auto;z-index:2;filter:drop-shadow(0 10px 18px rgba(2,8,30,.55)); animation:hpF var(--d,7s) ease-in-out infinite alternate;animation-delay:var(--dl,0s);transition:filter .3s;will-change:transform} .eck-img:hover img.hp{transform:none} .eck-img .hp:hover{filter:drop-shadow(0 12px 22px rgba(60,120,255,.6)) brightness(1.12)} .hp--feed{--x:-9px;--y:-8px;--d:7.5s} .hp--code{--x:10px;--y:8px;--d:8.5s;--dl:-2s} .hp--sys{--x:-10px;--y:9px;--d:6.5s;--dl:-1s} .hp--sat{--x:9px;--y:-10px;--d:7s;--dl:-3s} .hp--vis{--x:-8px;--y:10px;--d:8s;--dl:-4s} .hp--gr{--x:10px;--y:-8px;--d:9s;--dl:-2.5s} @keyframes hpF{0%{transform:translate(0,0)}33%{transform:translate(var(--x),calc(var(--y) * -.5))}66%{transform:translate(calc(var(--x) * -.6),var(--y))}100%{transform:translate(calc(var(--x) * .5),calc(var(--y) * -1))}} @media (prefers-reduced-motion:reduce){.eck-img .hp{animation:none}} .eck-img .hp-int{position:absolute;height:auto;z-index:2;transition:filter .3s} .eck-img .hp-int:hover{filter:brightness(1.12) drop-shadow(0 0 14px rgba(70,130,255,.45))} /* v9: blog */ .blg__top{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:clamp(20px,3vw,48px);align-items:center;margin-bottom:clamp(26px,3vw,40px)} .blg__eye{display:flex;align-items:center;gap:14px;margin-bottom:14px;font-family:var(--ff-m);font-size:.78rem;letter-spacing:.14em;color:var(--ultra)} .blg__eye::after{content:"";width:86px;height:1px;background:var(--line-2)} .blg .d2{font-size:clamp(2.3rem,4.6vw,3.9rem);line-height:.98;letter-spacing:-.045em;margin:0} .blg .d2 em{font-style:normal;color:var(--ultra)} .blg__p{margin:0;padding-left:clamp(18px,2.4vw,36px);border-left:1px solid var(--line-2);max-width:440px;color:var(--ink-2);font-size:.98rem;line-height:1.7} .blg__r{position:relative;display:flex;flex-direction:column;align-items:flex-end;gap:10px;color:var(--ultra)} .blg__script{font-family:"Dancing Script","Segoe Script","Snell Roundhand","Brush Script MT",cursive;font-weight:600;font-size:1.45rem;line-height:1.15;text-align:center;transform:rotate(-6deg);margin-right:10px} .blg__arr{position:absolute;left:-52px;top:2px} .blg__btn{display:inline-flex;align-items:center;gap:10px;margin-top:14px;padding:13px 22px;border:1.5px solid var(--ultra);border-radius:10px; background:rgba(125,155,255,.1);color:#fff;font-weight:600;font-size:.92rem;box-shadow:0 0 22px -6px rgba(125,155,255,.6);transition:background .25s,transform .25s} .blg__btn:hover{background:rgba(125,155,255,.25);transform:translateY(-2px)} .blg__ghost{position:absolute;right:23%;top:6px;font-family:var(--ff-d);font-weight:800;font-size:clamp(5rem,11vw,9rem);line-height:1;letter-spacing:-.04em;color:rgba(125,155,255,.05);pointer-events:none;user-select:none} .bps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.4vw,22px)} .bp{position:relative;display:flex;border:1px solid var(--line-2);border-radius:14px;overflow:hidden;background:linear-gradient(180deg,rgba(18,34,70,.7),rgba(10,22,46,.8));transition:transform .3s var(--ease-o),border-color .3s,box-shadow .3s} .bp:hover{transform:translateY(-4px);border-color:var(--ultra);box-shadow:0 14px 34px -14px rgba(60,110,255,.55)} .bp a.abs{position:absolute;inset:0;z-index:3} .bp__i{flex:0 0 36%;max-width:230px;overflow:hidden} .bp__i img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s var(--ease-o)} .bp:hover .bp__i img{transform:scale(1.06)} .bp__b{display:flex;flex-direction:column;flex:1;min-width:0;padding:18px 18px 16px} .bp__h{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:12px} .bp__h time{font-family:var(--ff-m);font-size:.68rem;letter-spacing:.06em;color:var(--ink-3);white-space:nowrap} .bp__t{--c:#7d9bff;display:inline-flex;align-items:center;gap:5px;padding:4px 9px;border-radius:999px;font-family:var(--ff-m);font-weight:600;font-size:.6rem;letter-spacing:.05em;white-space:nowrap; color:var(--c);background:color-mix(in srgb,var(--c) 16%,transparent);border:1px solid color-mix(in srgb,var(--c) 40%,transparent)} .bp__t--b{--c:#6fa0ff}.bp__t--o{--c:#ffa24a}.bp__t--p{--c:#b58cff}.bp__t--g{--c:#3ddc9a}.bp__t--r{--c:#ff6b7a}.bp__t--t{--c:#3dd6c6} .bp h3{margin:0 0 9px;font-family:var(--ff-d);font-weight:700;font-size:1.02rem;line-height:1.28;letter-spacing:-.015em;color:#fff} .bp p{margin:0 0 12px;font-size:.8rem;line-height:1.55;color:var(--ink-3);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden} .bp__f{display:flex;align-items:center;margin-top:auto;font-family:var(--ff-m);font-size:.66rem;letter-spacing:.06em;color:var(--ink-3)} .bp__f span{display:inline-flex;align-items:center;gap:7px} .bp__f i{margin-left:auto;width:30px;height:30px;display:grid;place-items:center;border-radius:50%;border:1.5px solid var(--ultra);color:#fff;transition:background .25s} .bp:hover .bp__f i{background:var(--ultra);color:#0a1729} @media (max-width:1280px){.bps{grid-template-columns:repeat(2,minmax(0,1fr))}.blg__ghost{display:none}} @media (max-width:900px){.blg__top{grid-template-columns:1fr}.blg__p{border-left:0;padding-left:0}.blg__r{align-items:flex-start}.blg__arr,.blg__script{display:none}} @media (max-width:640px){.bps{grid-template-columns:1fr}.bp__i{flex-basis:34%}} /* v10: Fırsat Kampanya pop-up */ .kmp{position:fixed;inset:0;z-index:530;display:grid;place-items:center;padding:14px;background:rgba(3,8,20,.72);backdrop-filter:blur(6px);opacity:0;transition:opacity .35s var(--ease)} .kmp.on{opacity:1} .promo__box{position:relative;width:min(94vw,calc((100vh - 70px) * 1254 / 1158),820px);transform:translateY(18px) scale(.96);transition:transform .45s var(--ease-o);border-radius:14px;overflow:hidden;box-shadow:0 30px 80px -20px rgba(0,0,0,.8)} .kmp.on .promo__box{transform:none} .promo__box img{display:block;width:100%;height:auto} .promo__x,.promo__a{position:absolute;display:block;background:transparent;border:0;padding:0;cursor:pointer;border-radius:999px;transition:box-shadow .25s,background .25s} .promo__x:hover{background:rgba(255,255,255,.14);box-shadow:0 0 18px rgba(120,170,255,.8)} .promo__a:hover{background:rgba(255,255,255,.1);box-shadow:0 0 26px rgba(120,190,255,.75)} .promo__a:focus-visible,.promo__x:focus-visible{outline:2px solid #fff;outline-offset:2px} html.promo-open{overflow:hidden} @media (prefers-reduced-motion:reduce){.kmp,.promo__box{transition:none}} body:has(.cookie.on) .kmp{padding-bottom:120px} body:has(.cookie.on) .promo__box{width:min(94vw,calc((100vh - 190px) * 1254 / 1158),820px)} @media (max-width:600px){body:has(.cookie.on) .kmp{padding-bottom:170px}body:has(.cookie.on) .promo__box{width:min(94vw,calc((100vh - 230px) * 1254 / 1158))}} .promo__wrap{display:flex;flex-direction:column;align-items:center;gap:12px;width:100%} .promo__wrap .promo__box{flex:0 0 auto} .promo__box{touch-action:pan-y;background:#06122e} .promo__track{display:flex;align-items:flex-start;transition:transform .5s var(--ease-o);will-change:transform} .promo__s{position:relative;flex:0 0 100%;min-width:0} .promo__s img{display:block;width:100%;height:auto;-webkit-user-drag:none;user-select:none} .promo__nav{position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;cursor:pointer; background:rgba(6,16,42,.72);border:1.5px solid rgba(140,180,255,.6);color:#fff;backdrop-filter:blur(4px);transition:background .25s,opacity .25s} .promo__nav:hover{background:rgba(60,110,255,.85)} .promo__nav--l{left:8px}.promo__nav--l svg{transform:rotate(180deg)} .promo__nav--r{right:8px} .promo__box[data-i="0"] .promo__nav--l,.promo__box[data-i="1"] .promo__nav--r{opacity:0;pointer-events:none} .promo__dots{display:flex;gap:8px} .promo__dots button{width:9px;height:9px;padding:0;border:0;border-radius:99px;background:rgba(255,255,255,.35);cursor:pointer;transition:width .3s,background .3s} .promo__dots button.on{width:26px;background:#7fb0ff} @media (max-width:600px){.promo__nav{width:32px;height:32px}} @media (prefers-reduced-motion:reduce){.promo__track{transition:none}} /* v11: mobil iyileştirmeler */ .bp__h{flex-wrap:wrap} @media (max-width:560px){ .bp{flex-direction:column} .bp__i{flex:0 0 auto;max-width:none;height:168px;width:100%} .bp__b{padding:16px} } .promo__x2{display:none;align-self:flex-end;width:42px;height:42px;border-radius:50%;place-items:center;cursor:pointer;color:#fff;background:rgba(6,16,42,.85);border:1.5px solid rgba(140,180,255,.7)} @media (max-width:700px){ .promo__x2{display:grid} .promo__wrap{gap:10px} .hero__pill{font-size:.64rem;padding:10px 12px;gap:7px} .foot .ft2__cols,.ft2 .ft2__grid{gap:24px} } @media (max-width:420px){.hero__cta .btn{width:100%;justify-content:center}} /* v12: Referans (yorumlar) + SSS — referans tasarımlar */ .yr,.fx{--ora:#ff8a2a;--ora2:#ffb25a;position:relative} .yr em,.fx em{font-style:normal;color:var(--ora)} .yr__top{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:clamp(18px,2.6vw,40px);align-items:center;margin-bottom:clamp(20px,2.4vw,30px)} .yr__eye{display:flex;align-items:center;gap:12px;margin-bottom:12px;font-family:var(--ff-m);font-size:.74rem;letter-spacing:.12em;color:var(--ink-2)} .yr__eye b{color:var(--ultra)}.yr__eye::after{content:"";width:60px;height:1px;background:var(--line-2)} .yr .d2{margin:0;font-size:clamp(2.4rem,4.6vw,4rem);line-height:.96;letter-spacing:-.045em} .yr__p{margin:0;padding-left:clamp(16px,2vw,30px);border-left:1px solid var(--line-2);max-width:380px;color:var(--ink-2);font-size:.92rem;line-height:1.65} .yr__p b{color:#fff} .yr__score{display:flex;align-items:center;gap:20px;padding:18px 26px;border:1.5px solid var(--line-2);border-radius:14px;background:rgba(14,28,58,.7)} .yr__score>b{font-family:var(--ff-d);font-weight:800;font-size:clamp(2.2rem,3.6vw,3.2rem);letter-spacing:-.04em;line-height:1;color:#fff} .yr__sl{display:flex;flex-direction:column;gap:5px;padding-right:22px;border-right:1px solid var(--line-2);font-size:.86rem;color:#fff} .yr__sl i{width:32px;height:2px;background:var(--ora)}.yr__sl small{font-size:.7rem;color:var(--ink-3)} .yr__av{display:flex;align-items:center} .yr__av i,.yr__av em{display:grid;place-items:center;width:36px;height:36px;margin-left:-8px;border-radius:50%;border:2px solid #0e1c3a;background:linear-gradient(135deg,#27427f,#1a2c58);font:700 .8rem var(--ff-d);font-style:normal;color:#cfe0ff} .yr__av i:first-child{margin-left:0}.yr__av em{background:var(--ora);color:#fff;font-size:.72rem} /* öne çıkan */ .rf{position:relative;margin-bottom:clamp(14px,1.6vw,22px);border:1.5px solid var(--line-2);border-radius:14px;overflow:hidden;background:linear-gradient(100deg,rgba(14,28,58,.95),rgba(10,22,46,.95))} .rf__s{display:none;position:relative;min-height:clamp(210px,18vw,262px)} .rf__s.on{display:block;animation:rfIn .5s var(--ease-o)} @keyframes rfIn{from{opacity:0;transform:translateX(14px)}to{opacity:1;transform:none}} .rf__ph{position:absolute;inset:0 0 0 38%} .rf__ph img{width:100%;height:100%;object-fit:cover;display:block} .rf__ph::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#0d1c3c 0%,rgba(13,28,60,.55) 28%,transparent 62%)} .rf__sc{position:absolute;right:3%;bottom:14%;z-index:2;font-family:"Dancing Script","Segoe Script","Snell Roundhand","Brush Script MT",cursive;font-style:italic;font-weight:600;font-size:clamp(1.8rem,3.4vw,3.2rem);color:#f4e6d0;text-shadow:0 2px 14px rgba(0,0,0,.6)} .rf__t{position:relative;z-index:2;max-width:58%;padding:clamp(20px,2.4vw,32px) clamp(20px,2.6vw,36px) clamp(18px,2vw,26px) clamp(78px,8vw,122px)} .rf__q{position:absolute;left:clamp(22px,2.6vw,36px);top:clamp(6px,1vw,16px);font-family:Georgia,serif;font-weight:700;font-size:clamp(5rem,8vw,8rem);line-height:1;color:var(--ora);opacity:.95} .rf__s5,.rc__s{display:flex;gap:4px;color:var(--ora)} .rf__s5 svg,.rc__s svg{fill:currentColor} .rf__t p{margin:12px 0 18px;font-size:clamp(.95rem,1.25vw,1.12rem);line-height:1.6;color:#e7eeff} .rf__by{display:flex;align-items:center;gap:16px;padding-top:14px;border-top:1px solid var(--line-2);position:relative} .rf__by::before{content:"";position:absolute;left:0;top:-1px;width:36px;height:2px;background:var(--ora)} .rf__mono{font-family:Georgia,serif;font-size:2.6rem;line-height:1;color:var(--ora2)} .rf__by b{display:block;color:#fff;font-size:1rem}.rf__by span span{display:block;margin-top:2px;font-size:.82rem;color:var(--ink-3)} .rf__nav{position:absolute;right:20px;top:18px;z-index:3;display:flex;gap:10px} .rf__nav button,.rc__go{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;border:1.5px solid var(--ora);background:rgba(8,16,36,.55);color:#fff;cursor:pointer;transition:background .25s,transform .25s} .rf__nav button:first-child svg{transform:rotate(180deg)} .rf__nav button:hover,.rc__go:hover{background:var(--ora);transform:translateY(-2px)} /* kartlar */ .rcs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.6vw,26px)} .rc{display:none;flex-direction:column;border:1.5px solid var(--line-2);border-radius:14px;overflow:hidden;background:linear-gradient(180deg,rgba(16,32,66,.92),rgba(9,20,44,.95));transition:transform .3s var(--ease-o),border-color .3s,box-shadow .3s} .rc.on{display:flex;animation:rfIn .45s var(--ease-o)} .rc:hover{transform:translateY(-4px);border-color:var(--ora);box-shadow:0 16px 34px -16px rgba(255,138,42,.35)} .rc__ph{height:clamp(110px,9vw,140px);overflow:hidden;background:#0a1729} .rc__ph img{width:100%;height:100%;object-fit:cover;object-position:center top;display:block;transition:transform .5s var(--ease-o)} .rc:hover .rc__ph img{transform:scale(1.05)} .rc__b{display:flex;flex-direction:column;flex:1;padding:18px 22px 20px} .rc__b p{margin:12px 0 16px;font-size:.88rem;line-height:1.6;color:#d4dff5;flex:1} .rc__f{display:flex;align-items:center;gap:14px} .rc__lg{flex:0 0 auto;display:grid;place-items:center;width:64px;height:40px;border-radius:8px;background:#fff;padding:4px} .rc__lg img{max-width:100%;max-height:100%;object-fit:contain} .rc__mono{flex:0 0 auto;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;border:1.5px solid var(--ora);font:700 1.05rem var(--ff-d);color:var(--ora2)} .rc__n{flex:1;min-width:0}.rc__n b{display:block;color:#fff;font-size:.92rem}.rc__n span{display:block;font-size:.76rem;color:var(--ink-3)} .rc__go{width:34px;height:34px;flex:0 0 auto} .rbar{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:clamp(18px,2vw,28px)} .rdots{display:flex;gap:10px;margin:0 auto} .rdots button{width:clamp(46px,7vw,118px);height:3px;padding:0;border:0;border-radius:2px;background:rgba(150,180,255,.3);cursor:pointer;transition:background .3s} .rdots button.on{background:var(--ora)} .rbar__a{display:inline-flex;align-items:center;gap:8px;color:#fff;font-size:.9rem;border-bottom:1px solid var(--ora);padding-bottom:3px;white-space:nowrap} .rbar__a svg{color:var(--ora)} @media (max-width:1100px){.yr__top{grid-template-columns:1fr 1fr}.yr__score{grid-column:1/-1;justify-self:start}.yr__p{max-width:none}.rcs{grid-template-columns:repeat(2,minmax(0,1fr))}.rf__t{max-width:68%}} @media (max-width:760px){ .yr__top{grid-template-columns:1fr}.yr__p{border-left:0;padding-left:0}.yr__score{flex-wrap:wrap;gap:14px;padding:16px}.yr__sl{border-right:0;padding-right:0} .rf__s{min-height:0}.rf__ph{position:relative;inset:auto;height:170px}.rf__ph::after{background:linear-gradient(0deg,#0d1c3c,transparent 70%)} .rf__t{max-width:none;padding:18px 18px 20px}.rf__q{position:static;display:block;font-size:3.6rem;height:44px;margin-bottom:4px} .rf__nav{top:12px;right:12px}.rf__sc{bottom:46%;right:5%;font-size:1.9rem} .rcs{grid-template-columns:1fr}.rbar{flex-direction:column-reverse;align-items:flex-start}.rdots{margin:0}.rdots button{width:34px} } /* ---------- SSS ---------- */ .fx__top{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:clamp(18px,2vw,28px);font-family:var(--ff-m);font-size:.74rem;letter-spacing:.12em;color:var(--ink-2)} .fx__eye{display:flex;align-items:center;gap:10px;flex:0 1 460px}.fx__eye b{color:var(--ultra)}.fx__eye::after{content:"";flex:1;height:1px;background:var(--line-2)} .fx__tr{display:flex;align-items:center;gap:14px;font-size:.62rem;color:var(--ink-3)}.fx__tr::before{content:"";width:50px;height:1px;background:var(--line-2)}.fx__tr::after{content:"";width:20px;height:2px;background:var(--ora)} .fx__g{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.6fr);gap:clamp(24px,4vw,64px);align-items:start} .fx .d2{margin:0;font-size:clamp(2.4rem,4.6vw,4rem);line-height:1;letter-spacing:-.045em} .fx__u{display:block;width:90px;height:3px;margin:22px 0 22px;background:var(--ora)} .fx__p{margin:0 0 28px;max-width:420px;color:var(--ink-2);font-size:1rem;line-height:1.7} .fx__tabs{display:flex;flex-direction:column;gap:14px} .qt{display:flex;align-items:center;gap:16px;width:100%;padding:16px 20px;text-align:left;cursor:pointer;color:#fff;border:1.5px solid var(--line-2);border-radius:10px;background:rgba(14,28,58,.6);transition:border-color .25s,background .25s,transform .25s} .qt>svg:first-child{flex:0 0 auto;color:#cfe0ff} .qt span{flex:1;min-width:0}.qt b{display:block;font-size:1.02rem}.qt small{display:block;margin-top:3px;font-size:.8rem;color:var(--ink-3)} .qt__c{flex:0 0 auto;color:#cfe0ff} .qt:hover{border-color:rgba(255,138,42,.6);transform:translateX(3px)} .qt.on{border-color:var(--ora);background:linear-gradient(90deg,rgba(255,138,42,.16),rgba(14,28,58,.6));box-shadow:inset 4px 0 0 var(--ora)} .qt.on>svg:first-child,.qt.on .qt__c{color:var(--ora)} .fx__gh{display:block;margin-top:34px;font-family:var(--ff-d);font-weight:700;font-size:1.3rem;letter-spacing:.18em;color:rgba(125,155,255,.25)} .fx__gh small{display:block;font-family:var(--ff-m);font-weight:500;font-size:.58rem;letter-spacing:.2em} .fx__r{display:flex;flex-direction:column;gap:10px} .qa{border:1.5px solid var(--line-2);border-radius:10px;background:rgba(12,26,54,.72);overflow:hidden;transition:border-color .3s,background .3s,box-shadow .3s} .qa[hidden]{display:none} .qa:hover{border-color:rgba(255,138,42,.5)} .qa.open{border-color:var(--ora);background:linear-gradient(110deg,rgba(18,36,76,.95),rgba(8,18,40,.95));box-shadow:0 -1px 0 var(--ora) inset,0 12px 34px -18px rgba(255,138,42,.35)} .qa__h{display:flex;align-items:center;gap:20px;width:100%;padding:18px 20px;text-align:left;cursor:pointer;color:#fff} .qa__n{flex:0 0 auto;padding-right:20px;border-right:1px solid var(--line-2);font-family:var(--ff-m);font-weight:600;font-size:.95rem;color:var(--ultra)} .qa__q{flex:1;font-family:var(--ff-d);font-weight:600;font-size:clamp(1rem,1.3vw,1.18rem);letter-spacing:-.01em} .qa__i{position:relative;flex:0 0 auto;width:40px;height:40px;border-radius:50%;border:1.5px solid rgba(190,205,240,.5);transition:border-color .25s} .qa__i::before,.qa__i::after{content:"";position:absolute;left:50%;top:50%;width:14px;height:2px;margin:-1px 0 0 -7px;background:#fff;transition:transform .3s,background .3s} .qa__i::after{transform:rotate(90deg)} .qa.open .qa__i{border-color:var(--ora)}.qa.open .qa__i::before{background:var(--ora)}.qa.open .qa__i::after{transform:rotate(0);background:var(--ora)} .qa__a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s var(--ease-o)} .qa.open .qa__a{grid-template-rows:1fr} .qa__a>div{position:relative;overflow:hidden;min-height:0} .qa__a p{margin:0;padding:2px 90px 22px 86px;font-size:.92rem;line-height:1.75;color:#c9d6f0;max-width:100%} .qa__art{position:absolute;right:26px;bottom:14px;font-family:var(--ff-m);font-size:.7rem;letter-spacing:.2em;color:rgba(255,138,42,.4);transform:rotate(-10deg);pointer-events:none} .fx__bn{display:flex;align-items:center;gap:24px;margin-top:clamp(20px,2.4vw,32px);padding:0 clamp(16px,2vw,32px) 0 0;border:1.5px solid var(--line-2);border-radius:12px;overflow:hidden;background:linear-gradient(100deg,rgba(14,28,58,.9),rgba(8,18,40,.9) 70%,rgba(60,40,20,.5))} .fx__wa{display:grid;place-items:center;align-self:stretch;width:100px;color:var(--ora);background:rgba(255,255,255,.03);border-right:1px solid var(--line-2)} .fx__bn>div{flex:1;min-width:0;padding:16px 0}.fx__bn b{display:block;font-size:1.15rem;color:#fff}.fx__bn span{font-size:.9rem;color:var(--ink-2)} .fx__btn{display:inline-flex;align-items:center;gap:10px;flex:0 0 auto;padding:15px 40px;border-radius:8px;background:linear-gradient(180deg,#ff9a3c,#f07a14);color:#1a0f05;font-weight:700;font-size:1rem;box-shadow:0 8px 24px -8px rgba(255,138,42,.7);transition:transform .25s,box-shadow .25s} .fx__btn:hover{transform:translateY(-2px);box-shadow:0 12px 30px -8px rgba(255,138,42,.9)} @media (max-width:1000px){.fx__g{grid-template-columns:1fr}.fx__tabs{flex-direction:row;flex-wrap:wrap}.qt{flex:1 1 220px;width:auto}.fx__gh{display:none}.fx__tr{display:none}} @media (max-width:640px){ .fx__top{margin-bottom:14px}.fx__tabs{gap:10px}.qt{flex-basis:100%;padding:13px 16px} .qa__h{gap:12px;padding:14px}.qa__n{padding-right:12px}.qa__i{width:34px;height:34px} .qa__a p{padding:2px 16px 18px;font-size:.88rem}.qa__art{display:none} .fx__bn{flex-wrap:wrap;gap:0;padding:0}.fx__wa{width:64px;height:64px;align-self:auto}.fx__bn>div{flex:1 1 calc(100% - 80px);padding:12px 14px} .fx__btn{width:calc(100% - 28px);margin:6px 14px 16px;justify-content:center} } .rc__lg img{width:100%;height:100%;max-width:none;max-height:none;object-fit:contain} .rf__sc{bottom:6%} /* v13: Hizmetlerimiz + Teknoloji ortakları (referans tasarım) */ .sv2 .sv2__g{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.9fr);gap:clamp(24px,3.4vw,56px);align-items:start} .sv2__eye{display:flex;align-items:center;gap:12px;margin-bottom:14px;font-family:var(--ff-m);font-size:.76rem;letter-spacing:.14em;color:var(--ink-2)} .sv2__eye b{color:var(--ultra)}.sv2__eye::after{content:"";width:110px;height:1px;background:var(--line-2)} .sv2 .d2{margin:0 0 18px;font-size:clamp(2.5rem,4.8vw,4.2rem);line-height:.98;letter-spacing:-.045em} .sv2 .d2 em{display:inline-block;font-style:normal;margin-left:.55em;background:linear-gradient(90deg,#7da6ff,#3b7bff);-webkit-background-clip:text;background-clip:text;color:transparent} .sv2__lead{margin:0 0 26px;max-width:600px;color:var(--ink-2);font-size:1.02rem;line-height:1.65} .sv2 .svc__list{display:flex;flex-direction:column;gap:8px;border:0} .sv2 .svc__i{display:grid;grid-template-columns:34px 62px minmax(0,1fr) auto 44px;align-items:center;gap:16px;width:100%;padding:10px 18px 10px 16px;text-align:left;cursor:pointer; border:1.5px solid var(--line-2);border-radius:10px;background:rgba(10,22,46,.78);color:#fff;transition:border-color .25s,background .25s,box-shadow .25s,transform .25s} .sv2 .svc__i:hover,.sv2 .svc__i.on{padding-left:16px;background:linear-gradient(90deg,rgba(37,84,214,.36),rgba(14,30,70,.7));border-color:#3b7bff;box-shadow:0 0 0 1px rgba(59,123,255,.35),0 10px 30px -14px rgba(59,123,255,.7)} .sv2 .svc__i:hover{transform:translateX(3px)} .sv2 .svc__k{font-family:var(--ff-m);font-size:.82rem;color:var(--ink-3)} .sv2 .svc__i.on .svc__k{color:#cfe0ff} .svc__t{display:grid;place-items:center;width:62px;height:58px;border-radius:12px;color:#fff;background:#1d2a45} .svc__t--b{background:linear-gradient(145deg,#2d86ff,#1550d8)}.svc__t--d{background:linear-gradient(145deg,#2a3550,#1a2238)} .svc__t--p{background:linear-gradient(145deg,#6a4be0,#3b2a99)}.svc__t--o{background:linear-gradient(145deg,#4a3326,#2b1d17);color:#ff9a3c} .svc__t--v{background:linear-gradient(145deg,#5a2f8f,#321a5c);color:#e9a8ff} .svc__t img{display:block;width:32px;height:auto} .sv2 .svc__m{min-width:0} .sv2 .svc__n{display:block;font-family:var(--ff-d);font-weight:700;font-size:clamp(1rem,1.35vw,1.2rem);letter-spacing:-.01em} .sv2 .svc__d{display:block;max-height:none;opacity:1;margin-top:4px;font-size:.84rem;color:#a9b9dc;max-width:none} .sv2 .svc__p{text-align:right;font-family:var(--ff-d);font-weight:700;font-size:1.02rem;color:#fff;white-space:nowrap} .sv2 .svc__p s{display:block;font-size:.7rem;font-weight:500;color:var(--ink-4)} .svc__a{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;border:1.5px solid rgba(190,205,240,.5);color:#fff;transition:background .25s,border-color .25s} .sv2 .svc__i.on .svc__a,.sv2 .svc__i:hover .svc__a{background:#2f7bff;border-color:#2f7bff} .sv2__bt{display:flex;align-items:center;gap:22px;margin-top:22px;flex-wrap:wrap} .sv2__all{display:inline-flex;align-items:center;gap:14px;padding:15px 26px;border:1.5px solid #3b7bff;border-radius:10px;background:rgba(37,84,214,.14);color:#fff;font-weight:600;transition:background .25s,transform .25s} .sv2__all:hover{background:rgba(37,84,214,.38);transform:translateY(-2px)} .sv2__bt>span{padding-left:22px;border-left:1px solid var(--line-2);font-size:.85rem;color:var(--ink-3)} .sv2__r{display:flex;flex-direction:column;gap:22px} .sv2__stats{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:20px 26px;border:1px solid var(--line-2);border-radius:14px;background:rgba(14,28,58,.5)} .sv2__st{display:flex;align-items:center;gap:14px;color:#8fb2ff} .sv2__st+.sv2__st{padding-left:20px;border-left:1px solid var(--line-2)} .sv2__st b{display:block;font-family:var(--ff-d);font-size:1.5rem;line-height:1;color:#fff} .sv2__st span span{display:block;margin-top:5px;font-size:.78rem;color:#c5d3f0} .sv2__ph{position:relative;border:1.5px solid var(--line-2);border-radius:16px;overflow:hidden;background:#07101f} .sv2__ph>img{display:block;width:100%;height:auto;transition:transform .6s var(--ease-o)} .sv2__ph:hover>img{transform:scale(1.03)} .sv2__feats{display:grid;grid-template-columns:repeat(3,1fr);background:rgba(8,16,34,.9);border-top:1px solid var(--line-2)} .sv2__f{display:flex;align-items:center;gap:14px;padding:18px 18px;color:#8fb2ff;font-size:.82rem;line-height:1.35} .sv2__f+.sv2__f{border-left:1px solid var(--line-2)}.sv2__f span{color:#dbe6ff} @media (max-width:1100px){.sv2 .sv2__g{grid-template-columns:1fr}.sv2__r{order:2}.sv2 .d2 em{margin-left:0}} @media (max-width:640px){ .sv2 .svc__i{grid-template-columns:44px minmax(0,1fr) 36px;gap:10px;padding:10px} .sv2 .svc__k,.sv2 .svc__p{display:none} .svc__t{width:44px;height:44px;border-radius:10px}.svc__t svg{width:22px;height:22px}.svc__t img{width:24px} .svc__a{width:34px;height:34px}.sv2 .svc__d{font-size:.78rem} .sv2__bt>span{border:0;padding:0}.sv2__stats{flex-wrap:wrap;padding:16px}.sv2__st+.sv2__st{padding-left:0;border:0} .sv2__feats{grid-template-columns:1fr}.sv2__f+.sv2__f{border-left:0;border-top:1px solid var(--line-2)} } /* teknoloji ortakları */ .cl2s{position:relative;overflow:hidden} .cl2s__bg{position:absolute;top:0;right:0;width:min(58vw,880px);pointer-events:none; -webkit-mask-image:linear-gradient(90deg,transparent,#000 28%),linear-gradient(180deg,#000 70%,transparent);-webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent,#000 28%),linear-gradient(180deg,#000 70%,transparent);mask-composite:intersect} .cl2s__bg img{display:block;width:100%;height:auto} .cl2s .wrap{position:relative;z-index:1} .cl2s__eye{display:flex;align-items:center;gap:12px;margin-bottom:16px;font-family:var(--ff-m);font-size:.76rem;letter-spacing:.14em;color:var(--ink-2)} .cl2s__eye b{color:var(--ultra)}.cl2s__eye::after{content:"";width:90px;height:1px;background:var(--line-2)} .cl2s .d2{margin:0 0 14px;font-size:clamp(2.4rem,4.6vw,4.1rem);line-height:1;letter-spacing:-.045em} .cl2s .d2 em{font-style:normal;color:#2f7bff} .cl2s__head p{margin:0 0 clamp(26px,3vw,46px);max-width:580px;color:var(--ink-2);font-size:1.05rem;line-height:1.65} .cl2g{display:grid;gap:clamp(10px,1.2vw,18px);margin-bottom:clamp(10px,1.2vw,18px)} .cl2g--t{grid-template-columns:repeat(5,minmax(0,1fr))} .cl2g--b{grid-template-columns:repeat(6,minmax(0,1fr))} .cl2{--c:#4f8bff;position:relative;display:flex;flex-direction:column;gap:14px;padding:22px 22px 24px;border-radius:12px;overflow:hidden; border:1.5px solid color-mix(in srgb,var(--c) 55%,transparent); background:radial-gradient(120% 90% at 0% 0%,color-mix(in srgb,var(--c) 22%,transparent),transparent 62%),linear-gradient(180deg,rgba(12,26,58,.92),rgba(7,16,38,.95)); transition:transform .3s var(--ease-o),border-color .3s,box-shadow .3s} .cl2:hover{transform:translateY(-4px);border-color:var(--c);box-shadow:0 16px 36px -16px var(--c)} .cl2--t{min-height:174px}.cl2--b{min-height:174px;padding:20px 18px} .cl2__h{display:flex;align-items:center;gap:12px} .cl2__lg{flex:0 0 auto;display:grid;place-items:center;width:52px;height:48px} .cl2__lg img,.cl2__lg svg{max-width:100%;max-height:100%;width:auto;height:auto} .cl2__lg img{max-width:50px;max-height:46px} .cl2__h b{flex:1;min-width:0;font-family:var(--ff-d);font-weight:700;font-size:1.02rem;color:#fff;line-height:1.15} .cl2__h i{flex:0 0 auto;display:grid;place-items:center;width:38px;height:38px;border-radius:50%;border:1.5px solid rgba(220,230,250,.6);color:#fff;transition:background .25s,border-color .25s} .cl2__h i svg{width:16px;height:16px} .cl2:hover .cl2__h i{background:var(--c);border-color:var(--c)} .cl2__d{font-size:.9rem;line-height:1.55;color:#c9d6f0} @media (max-width:1280px){.cl2g--t{grid-template-columns:repeat(3,minmax(0,1fr))}.cl2g--b{grid-template-columns:repeat(3,minmax(0,1fr))}} @media (max-width:900px){.cl2s__bg{width:100%;opacity:.5;-webkit-mask-image:linear-gradient(180deg,#000 40%,transparent);mask-image:linear-gradient(180deg,#000 40%,transparent)}.cl2g--t,.cl2g--b{grid-template-columns:repeat(2,minmax(0,1fr))}} @media (max-width:520px){.cl2g--t,.cl2g--b{grid-template-columns:1fr}.cl2{min-height:0!important;padding:16px}} .cl2--b{padding:20px 14px}.cl2--b .cl2__h{gap:8px}.cl2--b .cl2__lg{width:42px;height:42px}.cl2--b .cl2__lg img{max-width:40px;max-height:40px} .cl2--b .cl2__h b{font-size:.9rem;overflow-wrap:anywhere}.cl2--b .cl2__h i{width:32px;height:32px}.cl2--b .cl2__h i svg{width:14px;height:14px} @media (max-width:1280px){.cl2--b .cl2__h b{font-size:1rem}.cl2--b .cl2__h i{width:36px;height:36px}} @media (max-width:900px){.cl2s__bg{opacity:.28}} /* v14: tek tip logo mockup + proje kartları */ .mark,.mark--photo,.mark--photo[style]{width:250px!important;height:143px!important;padding:0!important;border-radius:10px;overflow:hidden;border:1px solid rgba(255,255,255,.18);background:#e9e1cd;box-shadow:0 10px 24px -12px rgba(0,0,0,.7),inset 0 0 0 1px rgba(255,255,255,.25)} .mark img,.mark--photo img{width:100%;height:100%;object-fit:cover;display:block} @media (max-width:600px){.mark,.mark--photo,.mark--photo[style]{width:166px!important;height:95px!important}} .wc{background:linear-gradient(180deg,rgba(14,28,60,.92),rgba(8,17,38,.96));border-radius:14px} .wc__s{aspect-ratio:16/9.4;background:radial-gradient(120% 100% at 50% 0%,#14284d,#0a1426)} .wc__s img{object-fit:contain!important;padding:0} .wc__k{background:rgba(37,84,214,.85);color:#fff;border-radius:0 0 8px 0} .wc__tag{background:rgba(8,16,34,.85);border-radius:6px;color:#e6eeff} .wc__b{position:relative;align-items:center;gap:14px;padding:14px 16px 16px;border-top:0} .wc__lg{flex:0 0 auto;display:grid;place-items:center;width:84px;height:56px;margin-top:-34px;border-radius:10px;overflow:hidden;background:#e9e1cd;border:2px solid rgba(255,255,255,.7);box-shadow:0 8px 20px -8px rgba(0,0,0,.7);position:relative;z-index:3} .wc__lg img{width:100%;height:100%;object-fit:cover} .wc__lg--m{background:linear-gradient(145deg,#2d86ff,#1550d8);color:#fff;border-color:rgba(255,255,255,.3)}.wc__lg--m b{font-family:var(--ff-d);font-size:1.1rem} .wc__tx{flex:1;min-width:0;align-self:flex-start;padding-top:2px} .wc__t{font-size:1.05rem;color:#fff} .wc__m{color:#a9b9dc;font-size:.82rem} .wc__d{display:none} .wc__go{width:38px;height:38px;border-radius:50%;border:1.5px solid #3b7bff;color:#7da6ff;align-self:center} .wc:hover .wc__go{background:#2f7bff;color:#fff;border-color:#2f7bff;transform:none} .wc:hover{box-shadow:0 18px 40px -20px rgba(59,123,255,.7);transform:translateY(-4px)} @media (max-width:640px){.wc__lg{width:68px;height:46px;margin-top:-28px}.wc__t{font-size:.98rem}} .hero .d1{font-size:clamp(2.6rem,min(7.2vw,5.4vw + .6rem),5.2rem)} .hero .d1 em{white-space:nowrap} @media (min-width:1101px){.hero .d1{white-space:nowrap;font-size:clamp(3.4rem,4.7vw,5.1rem)}} @media (max-width:1100px){.hero .d1{font-size:clamp(2.2rem,9.2vw,4.6rem)}} /* v15 stabilizasyon */ .wc__s img{position:absolute;inset:0;width:100%;height:100%;max-width:none} .ct2 *,.cbox2,.cbox2__l a>span,.map2{min-width:0} .cbox2__l a{grid-template-columns:auto minmax(0,1fr) auto} .cbox2__l .cv,.cbox2__l .cs{overflow-wrap:anywhere} @media (max-width:420px){.cbox2__l a{gap:12px}.cbox2__l i{width:48px;height:48px}.cbox2{padding-left:16px;padding-right:16px}} @media (max-width:900px){.ct2__main{grid-template-columns:minmax(0,1fr)}} .hpf{position:absolute!important;left:-9999px!important;top:auto!important;width:1px!important;height:1px!important;opacity:0!important;pointer-events:none!important}