/* ===================================================================== KARAM SAFETY — enhance.css (premium polish layer) tsrmkrm.acarnet.com.tr · style.css'TEN SONRA yüklenir, üzerine ekler. Amaç: kurumsal/endüstriyel kimliği koruyarak daha renkli, canlı, premium görünüm — marka turuncusu (#FF5A1F) türevleriyle. ===================================================================== */ :root{ /* marka türevi destek renkleri */ --e-amber:#ff8a4c; /* yumuşak amber */ --e-ember:#c23a10; /* derin kor */ --e-peach:#fff4ee; /* sıcak açık ton */ --e-anthracite:#151512; --e-glow:rgba(255,90,31,.10); --e-grad-warm:linear-gradient(135deg,#ff7a3d 0%,#FF5A1F 55%,#e8480f 100%); --e-grad-soft:linear-gradient(135deg,#ff9a5f,#FF5A1F); /* tutarlı sistem */ --e-radius:18px; --e-shadow-sm:0 12px 30px -18px rgba(21,21,18,.30); --e-shadow-md:0 28px 54px -30px rgba(21,21,18,.42); --e-shadow-orange:0 26px 54px -26px rgba(255,90,31,.42); --e-ease:cubic-bezier(.16,.84,.34,1); --e-dur:.45s; /* scrollbar (marka renkleri) */ --scrollbar-track:#eceef1; --scrollbar-thumb-start:#ff7a3d; --scrollbar-thumb-end:#e8480f; } /* --------------------------------------------------------------------- 0) Yatay taşma garantisi — document seviyesinde x-clip (sticky/fixed'i bozmaz) --------------------------------------------------------------------- */ html{overflow-x:clip} /* --------------------------------------------------------------------- 1) SCROLLBAR — marka renkli, ince, kurumsal --------------------------------------------------------------------- */ html{scrollbar-width:thin;scrollbar-color:var(--scrollbar-thumb-start) var(--scrollbar-track)} ::-webkit-scrollbar{width:11px;height:11px} ::-webkit-scrollbar-track{background:var(--scrollbar-track)} ::-webkit-scrollbar-thumb{ background:linear-gradient(180deg,var(--scrollbar-thumb-start),var(--scrollbar-thumb-end)); border-radius:20px;border:3px solid var(--scrollbar-track); } ::-webkit-scrollbar-thumb:hover{filter:brightness(.92)} @media(max-width:680px){::-webkit-scrollbar{width:7px;height:7px}} /* --------------------------------------------------------------------- 2) GENEL — focus-visible, premium eyebrow, gradient vurgu --------------------------------------------------------------------- */ :where(a,button,input,textarea,select,summary,[tabindex]):focus-visible{ outline:2px solid var(--orange);outline-offset:3px;border-radius:6px; } /* premium eyebrow: gradient çizgi + ışıltı noktası */ .eyebrow::before{ background:linear-gradient(90deg,var(--orange),var(--e-amber)); height:2px;border-radius:2px;box-shadow:0 0 10px rgba(255,90,31,.35); } /* başlık vurgusunda kontrollü gradient text */ .sec-title .hl,.hero h1 .hl,.about-quote .hl{ background:linear-gradient(120deg,#ff7a3d,#FF5A1F 55%,#e8480f); -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:var(--orange); } /* --------------------------------------------------------------------- 3) BÖLÜM ARKA PLANLARI — düşük opaklıklı radial ışımalar + teknik doku --------------------------------------------------------------------- */ .about{ background: radial-gradient(46% 38% at 92% -4%,rgba(255,90,31,.06),transparent 60%), radial-gradient(42% 42% at -6% 106%,rgba(255,138,76,.06),transparent 60%), #ffffff; } .products{ background: radial-gradient(52% 42% at 100% 0,rgba(255,90,31,.05),transparent 58%), radial-gradient(40% 50% at 0 100%,rgba(255,138,76,.05),transparent 60%), #f3f4f6; } .docs{ background: radial-gradient(46% 46% at 2% 0,rgba(255,90,31,.05),transparent 60%), #ffffff; } /* docs: ince mühendislik gridi (dekoratif) */ .docs::before{ content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.55; background-image: linear-gradient(rgba(21,21,18,.04) 1px,transparent 1px), linear-gradient(90deg,rgba(21,21,18,.04) 1px,transparent 1px); background-size:50px 50px; -webkit-mask-image:radial-gradient(72% 70% at 14% 22%,#000,transparent 76%); mask-image:radial-gradient(72% 70% at 14% 22%,#000,transparent 76%); } .docs .container{position:relative;z-index:1} .blog{ background: radial-gradient(46% 40% at 100% 100%,rgba(255,138,76,.06),transparent 60%), radial-gradient(38% 40% at 0 0,rgba(255,90,31,.04),transparent 60%), #f3f4f6; } /* --------------------------------------------------------------------- 4) HEADER + NAV — scroll blur, underline hover, premium CTA --------------------------------------------------------------------- */ .site-header{transition:background .4s var(--e-ease),box-shadow .4s var(--e-ease),height .4s var(--e-ease)} .site-header.scrolled{-webkit-backdrop-filter:blur(14px) saturate(1.1);backdrop-filter:blur(14px) saturate(1.1)} /* nav underline (pill içi, hover'da gradient çizgi) NOT: ".nav-mega-trigger" hariç — onun ::after'ı "Ürünler" dropdown chevron'u (enhance.css §mega); underline ::after (özgüllük 0,1,2) chevron'u (0,1,1) eziyordu → chevron kayboluyordu (2px çizgi). */ .nav-pill a{position:relative} .nav-pill a:not(.nav-mega-trigger)::after{ content:"";position:absolute;left:16px;right:16px;bottom:7px;height:2px;border-radius:2px; background:linear-gradient(90deg,var(--orange),var(--e-amber)); transform:scaleX(0);transform-origin:center;opacity:0;transition:transform .35s var(--e-ease),opacity .35s var(--e-ease); } .nav-pill a:not(.nav-mega-trigger):hover::after{transform:scaleX(1);opacity:1} .nav-pill a:not(.nav-mega-trigger).active::after,.site-header.scrolled .nav-pill a:not(.nav-mega-trigger).active::after{opacity:0} /* premium "İletişime Geç" — kurumsal turuncu gradient + shine */ .get-touch,.site-header.scrolled .get-touch{ background:var(--e-grad-warm);border:none;color:#fff; box-shadow:0 12px 28px -14px rgba(255,90,31,.55);position:relative;overflow:hidden; } .get-touch::before{ content:"";position:absolute;top:0;left:-130%;width:60%;height:100%;pointer-events:none; background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent); transform:skewX(-18deg);transition:left .7s var(--e-ease); } .get-touch:hover::before{left:140%} .get-touch:hover,.site-header.scrolled .get-touch:hover{ background:var(--ink);color:#fff;transform:translateY(-2px);box-shadow:0 18px 36px -14px rgba(255,90,31,.6); } /* --------------------------------------------------------------------- 5) HERO — overlay, yavaş gradient bloblar, scroll-tab animasyonu, butonlar --------------------------------------------------------------------- */ .hero-video::after{ background: linear-gradient(100deg,rgba(10,10,8,.6) 0%,rgba(12,12,9,.34) 44%,rgba(255,90,31,.06) 100%), linear-gradient(0deg,rgba(10,10,8,.5),transparent 54%), radial-gradient(120% 80% at 80% 20%,transparent 50%,rgba(10,10,8,.28)); } .hero::before,.hero::after{ content:"";position:absolute;z-index:1;pointer-events:none;border-radius:50%;filter:blur(10px); } .hero::before{ width:52vw;height:52vw;top:-16vw;inset-inline-end:-12vw; background:radial-gradient(closest-side,rgba(255,90,31,.24),transparent 70%); animation:eFloat 17s var(--e-ease) infinite; } .hero::after{ width:34vw;height:34vw;bottom:-12vw;inset-inline-start:-8vw; background:radial-gradient(closest-side,rgba(255,138,76,.18),transparent 70%); animation:eFloat 22s var(--e-ease) infinite reverse; } @keyframes eFloat{0%,100%{transform:translate(0,0)}50%{transform:translate(-24px,30px)}} /* scroll-tab: yumuşak sürekli ipucu */ .scroll-tab{position:relative;animation:eBob 2.6s var(--e-ease) infinite;box-shadow:0 10px 24px -14px rgba(0,0,0,.5)} @keyframes eBob{0%,100%{transform:translateY(0)}50%{transform:translateY(7px)}} /* hero butonları premium hover */ .hero-cta .btn-primary{box-shadow:0 16px 34px -16px rgba(255,90,31,.6);position:relative;overflow:hidden} .hero-cta .btn-primary::before{ content:"";position:absolute;top:0;left:-130%;width:55%;height:100%;pointer-events:none; background:linear-gradient(100deg,transparent,rgba(255,255,255,.4),transparent);transform:skewX(-18deg);transition:left .7s var(--e-ease); } .hero-cta .btn-primary:hover::before{left:150%} .hero-cta .btn:hover{transform:translateY(-3px)} /* hero pagination bullet: ışıltı */ .hero-pag .swiper-pagination-bullet-active{box-shadow:0 0 14px rgba(255,90,31,.6)} /* --------------------------------------------------------------------- 6) ABOUT — quote modern, 1999 vurgu, dekoratif derinlik --------------------------------------------------------------------- */ .about-quote{position:relative;z-index:1} .about-quote::before{ content:"\201C";position:absolute;top:-.34em;inset-inline-start:-.05em;z-index:-1; font-family:var(--font-serif);font-size:3.4em;line-height:1;color:rgba(255,90,31,.13);pointer-events:none; } .about-sign .sign{ background:linear-gradient(120deg,#FF5A1F,#ff8a4c);-webkit-background-clip:text;background-clip:text; -webkit-text-fill-color:transparent;color:var(--orange); } /* 1999 bloğu: yumuşak iç gradient + ışıltı + ince çerçeve */ .year-block{ background:linear-gradient(150deg,#ff7a3d 0%,#FF5A1F 52%,#e8480f 100%); box-shadow:0 30px 60px -34px rgba(255,90,31,.6),inset 0 0 0 1px rgba(255,255,255,.08); } .year-block::after{ content:"";position:absolute;inset:0;pointer-events:none;opacity:.5; background-image: linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px), linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px); background-size:38px 38px; -webkit-mask-image:radial-gradient(80% 80% at 70% 20%,#000,transparent 78%);mask-image:radial-gradient(80% 80% at 70% 20%,#000,transparent 78%); } .year-block .yr{position:relative;z-index:1;text-shadow:0 10px 40px rgba(0,0,0,.18)} .year-photos figure{box-shadow:var(--e-shadow-sm);transition:transform .5s var(--e-ease),box-shadow .5s var(--e-ease)} .year-photos figure:hover{transform:translateY(-4px);box-shadow:var(--e-shadow-md)} /* about-stage parallax (enhance.js inline translate uygular) */ .about-stage .year-block,.about-stage .year-photos{transition:transform .3s var(--e-ease)} /* --------------------------------------------------------------------- 7) PRODUCTS (neu cinematic slider) — derinlik, premium oklar, CTA shine --------------------------------------------------------------------- */ .neu{box-shadow:var(--e-shadow-md);transition:box-shadow .5s var(--e-ease)} .neu:hover{box-shadow:var(--e-shadow-orange)} .neu-slide{transition:transform .6s var(--e-ease)} .neu-stage img{transition:transform .6s var(--e-ease)} .neu-slide:hover .neu-stage img{transform:scale(1.04)} .neu-arrow{transition:transform .35s var(--e-ease),background .35s var(--e-ease),color .35s var(--e-ease),box-shadow .35s var(--e-ease)} .neu-arrow .c{transition:background .35s var(--e-ease),border-color .35s var(--e-ease),color .35s var(--e-ease)} .neu-arrow:hover .c{background:var(--e-grad-warm);border-color:transparent;color:#fff;box-shadow:0 12px 26px -12px rgba(255,90,31,.6)} .neu-arrow:hover{transform:scale(1.04)} .neu-num{transition:color .3s var(--e-ease),transform .3s var(--e-ease)} .neu-num:hover{transform:translateY(-2px)} .neu-num.on b{text-shadow:0 0 16px rgba(255,90,31,.45)} .neu-cta{position:relative;overflow:hidden} .neu-cta::before{ content:"";position:absolute;top:0;left:-130%;width:55%;height:100%;pointer-events:none; background:linear-gradient(100deg,transparent,rgba(255,255,255,.5),transparent);transform:skewX(-18deg);transition:left .7s var(--e-ease); } .neu-cta:hover::before{left:150%} /* --------------------------------------------------------------------- 8) DOCS / CERTIFICATES — prestij, sayaç, kart hover --------------------------------------------------------------------- */ .docs-seal-n{ background:linear-gradient(120deg,#151512,#3a3a30);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent; } .docs-seal-n em{-webkit-text-fill-color:var(--orange)} .cert-frame{transition:transform .45s var(--e-ease),box-shadow .45s var(--e-ease),outline-color .45s var(--e-ease);outline:2px solid transparent;outline-offset:-2px} .cert-card:hover .cert-frame{transform:translateY(-6px);box-shadow:var(--e-shadow-orange);outline-color:rgba(255,90,31,.45)} .cert-badge{box-shadow:0 8px 20px -10px rgba(255,90,31,.55)} /* CE/ISO/EN mini badge şeridi (enhance.js ekler) */ .docs-badges{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px} .docs-badge{ font-size:.66rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--orange-d); background:linear-gradient(135deg,#fff,var(--e-peach));border:1px solid rgba(255,90,31,.28); padding:.5em 1em;border-radius:40px;box-shadow:0 6px 16px -10px rgba(255,90,31,.4); transition:transform .3s var(--e-ease),box-shadow .3s var(--e-ease)} .docs-badge:hover{transform:translateY(-2px);box-shadow:0 12px 22px -10px rgba(255,90,31,.55)} /* --------------------------------------------------------------------- 9) BLOG — kart yüzeyi, hover yükselme, "Tüm Yazılar" --------------------------------------------------------------------- */ .brow{border-radius:18px;padding:clamp(14px,1.6vw,22px);transition:background .4s var(--e-ease),box-shadow .4s var(--e-ease),transform .4s var(--e-ease)} .brow:hover{background:rgba(255,255,255,.7);box-shadow:var(--e-shadow-sm);transform:translateY(-3px)} .brow-img{box-shadow:var(--e-shadow-sm)} .brow-img::after{ content:"";position:absolute;inset:0;pointer-events:none; background:linear-gradient(180deg,transparent 55%,rgba(255,90,31,.0),rgba(21,21,18,.18)); opacity:0;transition:opacity .45s var(--e-ease); } .brow:hover .brow-img::after{opacity:1} .blog-tools .btn-dark{background:var(--e-grad-warm);position:relative;overflow:hidden} .blog-tools .btn-dark:hover{background:var(--ink)} /* --------------------------------------------------------------------- 10) CTA + FOOTER — güçlü dönüşüm alanı, shine, gradient çizgi --------------------------------------------------------------------- */ .cta-foot{ background: radial-gradient(40% 70% at 0 0,rgba(255,90,31,.20),transparent 62%), radial-gradient(46% 80% at 100% 120%,rgba(255,138,76,.16),transparent 60%), var(--ink); position:relative; } .cta-foot::before{ content:"";position:absolute;top:0;left:0;right:0;height:3px; background:linear-gradient(90deg,transparent,var(--orange),var(--e-amber),transparent);opacity:.85; } .cta-foot .lets h2{text-shadow:0 14px 50px rgba(255,90,31,.18)} .cta-foot .lets .sq{position:relative;overflow:hidden;box-shadow:0 22px 46px -20px rgba(255,90,31,.6)} .cta-foot .lets .sq::before{ content:"";position:absolute;top:0;left:-130%;width:60%;height:100%;pointer-events:none; background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-18deg);transition:left .7s var(--e-ease); } .cta-foot .lets a.sq:hover::before{left:150%} .cta-foot .lets a.sq:hover{transform:translateY(-3px)} /* footer üst gradient çizgi + ince doku */ .site-footer{position:relative;border-top:1px solid rgba(255,255,255,.06)} .foot-links a svg,.foot-contact a svg{transition:transform .3s var(--e-ease),color .3s var(--e-ease)} .foot-links a:hover svg{transform:translate(3px,-3px)} [dir=rtl] .foot-links a:hover svg{transform:translate(-3px,-3px)} .foot-contact a:hover{color:var(--orange)} .foot-contact a:hover svg{transform:scale(1.12)} /* --------------------------------------------------------------------- 11) MİKRO ETKİLEŞİMLER + butonlar --------------------------------------------------------------------- */ .btn{position:relative} .btn-primary{box-shadow:0 14px 30px -16px rgba(255,90,31,.5)} .btn-primary:hover{transform:translateY(-2px);box-shadow:0 20px 40px -16px rgba(255,90,31,.6)} .btn-dark:hover{transform:translateY(-2px)} .btn:active,.emp-cta:active,.get-touch:active{transform:translateY(0) scale(.985)} .to-top{background:var(--e-grad-warm);box-shadow:0 16px 34px -16px rgba(255,90,31,.6)} .to-top:hover{background:var(--ink);transform:translateY(-3px)} .burger svg{transition:transform .4s var(--e-ease)} .burger:hover svg{transform:rotate(90deg)} /* marquee yıldız ayraç turuncu ışıltı zaten beyaz; hafif premium */ .marquee-track span::after{color:rgba(255,255,255,.85)} /* --------------------------------------------------------------------- 12) MOBİL DRAWER — sıralı (staggered) açılış animasyonu --------------------------------------------------------------------- */ .drawer nav>*,.drawer .drawer-contact{opacity:0;transform:translateX(18px)} [dir=rtl] .drawer nav>*,[dir=rtl] .drawer .drawer-contact{transform:translateX(-18px)} .drawer.open nav>*{animation:eDrawerIn .5s var(--e-ease) forwards} .drawer.open .drawer-contact{animation:eDrawerIn .5s var(--e-ease) .48s forwards} .drawer.open nav>*:nth-child(1){animation-delay:.10s} .drawer.open nav>*:nth-child(2){animation-delay:.16s} .drawer.open nav>*:nth-child(3){animation-delay:.22s} .drawer.open nav>*:nth-child(4){animation-delay:.28s} .drawer.open nav>*:nth-child(5){animation-delay:.34s} .drawer.open nav>*:nth-child(6){animation-delay:.40s} .drawer.open nav>*:nth-child(7){animation-delay:.46s} @keyframes eDrawerIn{to{opacity:1;transform:translateX(0)}} /* --------------------------------------------------------------------- 13) SCROLL REVEAL — ek varyant (scale-in) + stagger (mevcut data-reveal'i bozmadan) --------------------------------------------------------------------- */ [data-reveal][data-anim="scale"]{transform:scale(.94);opacity:0} [data-reveal][data-anim="scale"].in{transform:scale(1);opacity:1} /* --------------------------------------------------------------------- 15) FOOTER + CTA RENGİ — derin petrol/teal (turuncuyla tamamlayıcı, canlı ama kurumsal) --------------------------------------------------------------------- */ :root{ --foot-1:#151512; --foot-2:#151512; --foot-3:#0c0c0a; } .cta-foot{ background: radial-gradient(42% 70% at 0 0,rgba(255,90,31,.22),transparent 60%), radial-gradient(48% 82% at 100% 118%,rgba(255,138,76,.15),transparent 60%), linear-gradient(158deg,var(--foot-1) 0%,var(--foot-2) 58%,var(--foot-3) 100%); } footer.site-footer{ background:linear-gradient(180deg,var(--foot-2),var(--foot-3)); color:#c4d2d2; } .foot-col h4{color:#ffffff} .foot-col a{color:#bccccd} .foot-links a{border-top-color:rgba(255,255,255,.09);color:#e5e7eb} .foot-bottom{border-top-color:rgba(255,255,255,.09);color:#8fa8a8} .foot-contact a,.foot-contact span{color:#c4d2d2} .site-footer{border-top-color:rgba(255,255,255,.06)} /* seal halkası teal zeminde okunur kalsın */ .foot-seal .seal text{fill:#6f9092} /* --------------------------------------------------------------------- 16) MOBİL + TİPOGRAFİ DÜZENİ — Anton Türkçe satır aralığı, taşma/binme önleme --------------------------------------------------------------------- */ /* Anton büyük başlıklarda TR diyakritik üst üste binmesini önle (line-height >=1.18) */ .brow-title{line-height:1.2} .neu-title{line-height:1.22} .neu-name{line-height:1.3} .cta-foot .lets h2{line-height:1.14} /* kelime kırılması taşmayı engelle */ .sec-title,.hero h1,.about-quote,.brow-title,.neu-title,.cta-foot .lets h2{overflow-wrap:break-word} @media(max-width:560px){ /* blog satırı: tarih + başlık dikey, ferah aralık */ .brow{gap:14px;padding:14px 2px} .brow-title{font-size:clamp(1.35rem,6vw,1.7rem)} /* docs badge şeridi taşmasın */ .docs-badges{gap:7px} .docs-badge{font-size:.62rem;padding:.45em .85em} /* bölüm başlıkları kenara yapışmasın */ .sec-head{gap:18px} } @media(max-width:400px){ .docs-badge{padding:.42em .75em;letter-spacing:.04em} } /* --------------------------------------------------------------------- 17) MEGA MENU — "Ürünler" (masaüstü >1180px) kreatif UX/UI panel --------------------------------------------------------------------- */ .nav-mega{display:inline-flex;align-items:center} .nav-mega-trigger{display:inline-flex;align-items:center;gap:.4em} .nav-mega-trigger::after{content:"";width:8px;height:8px;border-inline-end:2px solid currentColor;border-bottom:2px solid currentColor; transform:rotate(45deg) translateY(-2px);transition:transform .35s var(--e-ease);opacity:.8} /* Kullanıcı talebi: mega açılınca chevron yukarı DÖNMESİN, sabit (aşağı) kalsın */ .nav-mega.open .nav-mega-trigger::after{transform:rotate(45deg) translateY(-2px)} .mega{ position:fixed;left:var(--pad);right:var(--pad);top:120px;transform:translateY(12px); width:auto;z-index:60; background:rgba(255,255,255,.98);-webkit-backdrop-filter:blur(18px) saturate(1.1);backdrop-filter:blur(18px) saturate(1.1); border:1px solid var(--line);border-radius:24px;box-shadow:0 44px 100px -44px rgba(21,21,18,.5); padding:clamp(16px,1.5vw,24px); opacity:0;visibility:hidden;pointer-events:none; transition:opacity .3s var(--e-ease),transform .3s var(--e-ease),visibility .3s; } .mega.open{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0)} .mega-inner{display:grid;grid-template-columns:minmax(0,1fr) clamp(240px,22vw,300px);gap:clamp(14px,1.4vw,24px)} .mega-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px} .mega-card{display:flex;gap:13px;align-items:center;padding:12px 14px;border-radius:14px; border:1px solid transparent;position:relative;transition:background .3s var(--e-ease),border-color .3s var(--e-ease),transform .3s var(--e-ease),box-shadow .3s var(--e-ease)} .mega-card:hover{background:linear-gradient(135deg,#fff,var(--e-peach));border-color:rgba(255,90,31,.25);transform:translateY(-2px);box-shadow:var(--e-shadow-sm)} .mega-ico{width:44px;height:44px;flex:none;border-radius:12px;display:grid;place-items:center; background:linear-gradient(135deg,#fff,#f3f4f6);border:1px solid var(--line);color:var(--orange);transition:.3s var(--e-ease)} .mega-ico svg{width:26px;height:26px} .mega-card:hover .mega-ico{background:var(--e-grad-warm);border-color:transparent;color:#fff;transform:scale(1.07) rotate(-3deg)} .mega-tx{min-width:0;flex:1} .mega-name{display:block;font-weight:700;font-size:.9rem;color:var(--ink);line-height:1.22} .mega-sub{display:block;font-size:.72rem;color:var(--muted);line-height:1.3;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .mega-go{flex:none;color:var(--orange);opacity:0;transform:translateX(-5px);transition:.3s var(--e-ease)} .mega-go svg{width:18px;height:18px} .mega-card:hover .mega-go{opacity:1;transform:translateX(0)} [dir=rtl] .mega-go svg{transform:scaleX(-1)} .mega-feat{position:relative;border-radius:18px;overflow:hidden;min-height:100%;display:flex;flex-direction:column;justify-content:flex-end;padding:22px;color:#fff} .mega-feat img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0} .mega-feat::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(155deg,rgba(255,90,31,.42),rgba(10,10,8,.82))} .mega-feat>*{position:relative;z-index:2} .mega-feat .mega-eyebrow{display:inline-flex;align-items:center;gap:.5em;font-size:.68rem;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:#ffc9a8} .mega-feat .mega-eyebrow::before{content:"";width:20px;height:2px;background:var(--orange)} .mega-feat h4{font-family:var(--font-display);text-transform:uppercase;font-size:1.45rem;line-height:1.2;margin:10px 0 16px} .mega-cta{display:inline-flex;align-items:center;gap:.5em;align-self:flex-start;background:var(--e-grad-warm);color:#fff;font-weight:700;font-size:.84rem;letter-spacing:.02em;text-transform:uppercase;padding:11px 20px;border-radius:40px;box-shadow:0 12px 28px -12px rgba(255,90,31,.6);transition:transform .3s var(--e-ease)} .mega-cta svg{width:16px;height:16px;transition:transform .3s var(--e-ease)} .mega-cta:hover{transform:translateY(-2px)} .mega-cta:hover svg{transform:translate(3px,-3px)} [dir=rtl] .mega-cta svg{transform:scaleX(-1)} @media(min-width:1560px){.mega-grid{grid-template-columns:repeat(4,minmax(0,1fr))}} @media(max-width:1280px){.mega-grid{grid-template-columns:repeat(2,minmax(0,1fr))}} /* --------------------------------------------------------------------- 18) DRAWER ACCORDION — "Ürünler" alt menüsü (mobil <=1180px) --------------------------------------------------------------------- */ .drawer-acc-trigger{display:flex;align-items:center;justify-content:space-between;width:100%; padding:1em 0;border-bottom:1px solid var(--line-d);color:#fff;font-weight:600; text-transform:uppercase;font-size:1rem;letter-spacing:.02em;text-align:start} .drawer-acc-chev{width:20px;height:20px;flex:none;transition:transform .35s var(--e-ease)} .drawer-acc.open .drawer-acc-trigger{color:var(--orange)} .drawer-acc.open .drawer-acc-chev{transform:rotate(180deg);color:var(--orange)} .drawer-sub{display:grid;grid-template-rows:0fr;transition:grid-template-rows .42s var(--e-ease)} .drawer-acc.open .drawer-sub{grid-template-rows:1fr} .drawer-sub-inner{overflow:hidden;min-height:0} .drawer .drawer-sub a{display:flex;align-items:center;gap:11px;padding:.62em 0 .62em 4px; color:#cfcdc4;font-size:.9rem;text-transform:none;font-weight:500;border-bottom:1px solid rgba(255,255,255,.06)} .drawer .drawer-sub a:hover{color:var(--orange);padding-inline-start:8px} .drawer-sub .ds-ico{width:24px;height:24px;flex:none;color:var(--orange)} .drawer-sub .ds-ico svg{width:100%;height:100%} .drawer-sub .ds-all{color:var(--orange);font-weight:700;text-transform:uppercase;font-size:.82rem;letter-spacing:.04em} /* --------------------------------------------------------------------- 19) KULLANICI DÜZELTMELERİ (2026-06-19/2) --------------------------------------------------------------------- */ /* (a) Türkçe Anton başlıklarda satır binmesini kesin önle (line-height artırıldı) */ .sec-title{line-height:1.26} .hero h1{line-height:1.24} .cta-foot .lets h2{line-height:1.2} .mega-feat h4{line-height:1.26} .brow-title{line-height:1.24} .about-quote{line-height:1.3} .neu-title{line-height:1.26} .neu-name{line-height:1.34} /* (b) Docs swiper/nav butonları arası mesafe */ .docs-nav{gap:16px} .docs-nav button{margin:2px} /* (c) Mobilde TOP BAR gizle + header'ı yukarı al */ @media(max-width:768px){ .topbar{display:none} .site-header{top:0} } /* (d) Mobilde logo kaynaklı yatay taşmayı önle */ .site-header .container{min-width:0} .brand{min-width:0} @media(max-width:560px){ .brand img{height:46px} .header-actions{gap:10px} } @media(max-width:400px){ .brand img{height:40px} } /* (e) Mobil menüde "Ürünler" (accordion) fontunu diğer menü öğeleriyle AYNI yap */ .drawer-acc-trigger{ font-family:var(--font-display);font-size:1.5rem;font-weight:400; text-transform:uppercase;letter-spacing:.02em;line-height:1.2;color:#fff; padding:1em 0; } .drawer-acc-chev{width:24px;height:24px} /* (f) Mega kart: alt-başlık kaldırıldı → isim ikonla dikey ortalı, biraz büyüt */ .mega-name{font-size:.96rem;line-height:1.25} .mega-card{padding:13px 14px} /* --------------------------------------------------------------------- 20) KULLANICI DÜZELTMELERİ (2026-06-19/3) --------------------------------------------------------------------- */ /* (#3) Butonlardaki ikonlar görünmüyordu — .btn .ico svg boyut kuralı yoktu */ .btn .ico{width:18px;height:18px} .btn .ico svg{width:18px;height:18px;display:block} .btn-primary .ico,.btn-dark .ico{width:17px;height:17px} .btn-primary .ico svg,.btn-dark .ico svg{width:17px;height:17px} /* (#4) Site geneli swiper okları AYNI görünüm (beyaz zemin, ince çizgi, turuncu hover) */ .year-arrows button,.docs-nav button,.nav-arrow,.neu-arrow .c{ width:52px;height:52px;border-radius:50%;border:1.5px solid var(--line); background:#fff;color:var(--ink);display:grid;place-items:center;cursor:pointer; transition:background .3s var(--e-ease),border-color .3s var(--e-ease),color .3s var(--e-ease),transform .3s var(--e-ease); box-shadow:0 10px 24px -16px rgba(21,21,18,.4); } .year-arrows button:hover,.docs-nav button:hover,.nav-arrow:hover,.neu-arrow:hover .c{ background:var(--orange);border-color:var(--orange);color:#fff;transform:translateY(-2px); } .year-arrows svg,.docs-nav button svg,.nav-arrow svg,.neu-arrow .c svg{width:20px;height:20px} /* (#1) About swiper okları: SADECE mobilde solda, masaüstünde eskisi gibi (sağda) */ @media(max-width:768px){ .year-arrows{order:-1;margin-inline-start:0;margin-inline-end:18px} } /* (#5) Docs swiper okları docs-badges altında belirgin ayrı dursun (bitişik değil) */ .docs-nav{gap:clamp(16px,3vw,28px);margin-top:18px} .docs-nav button{margin:0} /* (#2) Docs sertifikaları TAM görünsün (kesik değil) — cover → contain */ .cert-shot{background:#fff} .cert-shot img{object-fit:contain;object-position:center} /* --------------------------------------------------------------------- 21) İHRACAT DÜNYA HARİTASI (interaktif, docs üstü) --------------------------------------------------------------------- */ .xmap{position:relative;overflow:hidden;color:#dde0e6; background: radial-gradient(55% 80% at 100% 0,rgba(255,90,31,.14),transparent 55%), radial-gradient(45% 70% at 0 100%,rgba(255,138,76,.10),transparent 55%), linear-gradient(158deg,var(--foot-1) 0%,var(--foot-2) 60%,var(--foot-3) 100%);} .xmap-bg{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.5; background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px); background-size:54px 54px; -webkit-mask-image:radial-gradient(80% 80% at 70% 30%,#000,transparent 78%);mask-image:radial-gradient(80% 80% at 70% 30%,#000,transparent 78%)} .xmap>*{position:relative;z-index:1} .xmap-grid{display:grid;grid-template-columns:.82fr 1.18fr;gap:clamp(28px,4vw,60px);align-items:center} /* info */ .xmap-eyebrow{display:inline-flex;align-items:center;gap:.6em;font-size:.78rem;font-weight:800;letter-spacing:.22em;text-transform:uppercase;color:#ff9a5f} .xmap-eyebrow::before{content:"";width:26px;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--orange),var(--e-amber))} .xmap-title{font-family:var(--font-display);text-transform:uppercase;line-height:1.2;letter-spacing:.01em; font-size:clamp(1.9rem,3.6vw,3.2rem);color:#fff;margin:14px 0 16px} .xmap-title em{font-style:normal;background:linear-gradient(120deg,#ff7a3d,#FF5A1F);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:var(--orange)} .xmap-lead{color:#a9bcbc;font-size:clamp(.96rem,1.1vw,1.06rem);line-height:1.6;max-width:46ch;margin-bottom:26px} .xmap-stats{display:flex;flex-wrap:wrap;gap:clamp(18px,2.4vw,40px);padding:20px 0;border-top:1px solid rgba(255,255,255,.12);border-bottom:1px solid rgba(255,255,255,.12);margin-bottom:24px} .xmap-stat{display:flex;flex-direction:column;gap:3px} .xmap-num{font-family:var(--font-display);font-size:clamp(1.9rem,2.8vw,2.6rem);line-height:1;color:#fff;display:flex;align-items:baseline} .xmap-num .suf{color:var(--orange);font-size:.6em;margin-inline-start:.04em} .xmap-stat-l{font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#8fa8a8} .xmap-reg-label{display:block;font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#8fa8a8;margin-bottom:12px} .xmap-regions{display:flex;flex-wrap:wrap;gap:8px} .xreg{display:inline-flex;align-items:center;gap:.5em;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.05); color:#d3e2e2;font-weight:600;font-size:.82rem;padding:.55em 1.05em;border-radius:999px;cursor:pointer; transition:background .3s var(--e-ease),border-color .3s var(--e-ease),color .3s var(--e-ease),transform .3s var(--e-ease)} .xreg .xreg-dot{width:8px;height:8px;border-radius:50%;background:var(--orange);flex:none} .xreg:hover{border-color:rgba(255,90,31,.5);transform:translateY(-2px)} .xreg.on{background:var(--e-grad-warm);border-color:transparent;color:#fff} .xreg.on .xreg-dot{background:#fff} .xreg:focus-visible{outline:2px solid var(--orange);outline-offset:3px} /* stage / map */ .xmap-stage{min-width:0;display:flex;flex-direction:column} .xmap-frame{position:relative;width:100%;aspect-ratio:1/1;max-height:min(74vh,620px);margin-inline:auto} .xmap-canvas{width:100%;height:100%;display:block;cursor:grab;touch-action:pan-y;border-radius:8px} .xmap-canvas.grabbing{cursor:grabbing} /* tooltip */ .xmap-tip{position:absolute;z-index:5;pointer-events:none;transform:translate(-50%,-135%);left:0;top:0; background:#fff;color:var(--ink);font-weight:700;font-size:.78rem;padding:.4em .8em;border-radius:8px;white-space:nowrap; box-shadow:0 14px 30px -12px rgba(0,0,0,.6);opacity:0;transition:opacity .2s var(--e-ease)} .xmap-tip::after{content:"";position:absolute;left:50%;bottom:-5px;transform:translateX(-50%);border:5px solid transparent;border-top-color:#fff;border-bottom:0} .xmap-tip.show{opacity:1} .xmap-hint{margin-top:6px;font-size:.78rem;color:#7e9898;display:flex;align-items:center;gap:.5em;justify-content:center} .xmap-hint::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--orange);box-shadow:0 0 0 4px rgba(255,90,31,.25)} @media(max-width:900px){ .xmap-grid{grid-template-columns:1fr;gap:clamp(20px,5vw,32px)} .xmap-info{order:-1} .xmap-frame{max-width:440px} } /* --------------------------------------------------------------------- 14) REDUCED MOTION — hareket hassasiyeti --------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce){ *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; } .hero::before,.hero::after,.scroll-tab,.marquee-track{animation:none !important} } /* ===== Header ürün arama overlay (ana sayfa + iç sayfalar ortak) — v10 ===== */ .search-ov{position:fixed;inset:0;z-index:140;visibility:hidden;opacity:0;transition:.3s} .search-ov.open{visibility:visible;opacity:1} .search-ov-bg{position:absolute;inset:0;background:rgba(12,12,10,.6);backdrop-filter:blur(8px)} .search-ov-panel{position:relative;max-width:740px;margin:9vh auto 0;background:#fff;border-radius:24px;box-shadow:0 40px 80px -40px rgba(21,21,18,.45);overflow:hidden;transform:translateY(-16px) scale(.98);transition:.4s cubic-bezier(.16,.84,.34,1)} .search-ov.open .search-ov-panel{transform:none} .search-ov-form{display:flex;align-items:center;gap:14px;padding:20px 22px;border-bottom:1px solid var(--line,#dde0e6)} .search-ov-form svg{width:24px;height:24px;color:var(--orange,#FF5A1F);flex:0 0 auto} .search-ov-form input{flex:1;border:0;outline:0;font-size:1.15rem;font-family:'Inter',sans-serif;background:transparent;color:var(--ink,#151512)} .search-ov-close{font-size:1.9rem;line-height:1;color:#5d626b;width:42px;height:42px;flex:0 0 auto;transition:.25s} .search-ov-close:hover{color:var(--orange,#FF5A1F);transform:rotate(90deg)} .search-ov-results{max-height:62vh;overflow-y:auto;-webkit-overflow-scrolling:touch} .sres-empty{padding:46px 24px;text-align:center;color:#5d626b} .sres-head{padding:13px 22px;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:#8a8f99;border-bottom:1px solid var(--line,#dde0e6)} .sres-item{display:flex;gap:15px;align-items:center;padding:13px 22px;border-bottom:1px solid var(--line,#dde0e6);transition:.22s} .sres-item:hover{background:var(--cream,#f3f4f6)} .sres-item img{width:56px;height:56px;object-fit:contain;background:#fff;border:1px solid var(--line,#dde0e6);border-radius:12px;flex:0 0 auto;padding:5px} .sres-item .m{min-width:0} .sres-item .nm{font-weight:700;color:var(--ink,#151512);font-size:.95rem;line-height:1.25;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .sres-item .cd{font-size:.76rem;color:var(--orange,#FF5A1F);font-weight:700;margin-top:2px} .sres-item mark{background:rgba(255,90,31,.2);color:inherit;border-radius:3px;padding:0 2px} .sres-all{display:block;text-align:center;padding:15px;font-weight:700;color:var(--orange,#FF5A1F);transition:.2s} .sres-all:hover{background:var(--cream,#f3f4f6)} .search-ov .chip{display:inline-flex;align-items:center;padding:.5em 1em;border-radius:50px;border:1px solid var(--line,#dde0e6);background:#fff;font-size:.8rem;font-weight:600;color:var(--ink,#151512);transition:.25s} .search-ov .chip:hover{border-color:var(--orange,#FF5A1F);color:var(--orange,#FF5A1F)} /* ===== SVG dil bayrakları (emoji yerine) ===== */ .flagi{width:22px;height:15px;border-radius:3px;display:inline-block;vertical-align:middle;box-shadow:0 0 0 1px rgba(0,0,0,.1);flex:0 0 auto} .lang-btn .flag,.lang-menu .flag{display:inline-flex;align-items:center;flex:0 0 auto} .lang-menu .flagi{width:24px;height:16px;margin-inline-end:2px} /* Dil menüsü öğeleri header.php'de (eski statik ana sayfada