/* ============================================================
   FRATON TASARIM SİSTEMİ — v2
   Modern, minimal, premium endüstriyel marka arayüzü.
   Bağımlılık yok; tüm bileşenler bu dosyada tanımlıdır.
   ============================================================ */

/* ---------- Tokens ---------- */
:root {
   --color-primary: #19478b;
   --color-primary-dark: #07182c;
   --color-accent: #2f6fed;
   --color-accent-hover: #1f57c8;
   --color-text: #111827;
   --color-muted: #667085;
   --color-border: #e8e8e8;
   --color-surface: #f8f8f8;
   --color-white: #ffffff;
   --color-ink-2: #1d2939;
   --color-black: #101418;
   --color-on-dark-muted: #9fb1cc;
   --color-line-on-dark: rgba(255, 255, 255, .12);

   --container-xl: 1360px;
   --container-lg: 1280px;
   --container-copy: 760px;

   --section-space: clamp(64px, 9.5vw, 150px);
   --section-space-sm: clamp(48px, 6.5vw, 96px);

   --radius-sm: 8px;
   --radius-md: 14px;
   --radius-lg: 20px;

   --font-sans: "Manrope", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
   --font-display: "Unbounded", "Manrope", sans-serif;

   --shadow-soft: 0 1px 2px rgba(16, 24, 40, .04), 0 8px 32px rgba(16, 24, 40, .06);
   --shadow-hover: 0 6px 16px rgba(16, 24, 40, .07), 0 24px 48px rgba(16, 24, 40, .12);
   --shadow-product: drop-shadow(0 34px 44px rgba(11, 31, 58, .28));

   --ease: cubic-bezier(.22, .61, .36, 1);
   --dur: .35s;

   --header-h: 138px; /* 100px ana bar + 38px üst şerit */
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
   scroll-behavior: smooth;
   -webkit-text-size-adjust: 100%;
}

body {
   margin: 0;
   font-family: var(--font-sans);
   font-size: 18px;
   line-height: 1.7;
   color: var(--color-text);
   background: var(--color-white);
   -webkit-font-smoothing: antialiased;
   text-rendering: optimizeLegibility;
}

img, svg, video, iframe { max-width: 100%; }
img { height: auto; display: block; }

h1, h2, h3, h4, h5, h6 {
   margin: 0 0 .5em;
   font-family: var(--font-display);
   font-weight: 600;
   line-height: 1.16;
   letter-spacing: -0.01em;
   color: inherit;
   text-wrap: balance;
}

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--color-primary); text-decoration: none; transition: color var(--dur) var(--ease); }
a:hover { color: var(--color-accent); }

ul, ol { margin: 0; padding: 0; }

button {
   font: inherit;
   cursor: pointer;
   background: none;
   border: 0;
   color: inherit;
   padding: 0;
}

:focus-visible {
   outline: 2px solid var(--color-accent);
   outline-offset: 3px;
   border-radius: 6px;
}

::selection { background: rgba(47, 111, 237, .18); }

.visually-hidden {
   position: absolute !important;
   width: 1px; height: 1px;
   margin: -1px; padding: 0;
   overflow: hidden;
   clip: rect(0 0 0 0);
   white-space: nowrap; border: 0;
}

.skip-link {
   position: absolute;
   left: 16px; top: -60px;
   z-index: 200;
   background: var(--color-primary-dark);
   color: #fff;
   padding: 12px 20px;
   border-radius: var(--radius-sm);
   transition: top .2s var(--ease);
}
.skip-link:focus { top: 16px; color: #fff; }

/* ---------- Layout ---------- */
.container {
   width: 100%;
   max-width: var(--container-lg);
   margin-inline: auto;
   padding-inline: clamp(20px, 4vw, 48px);
}

.container-wide { max-width: var(--container-xl); }
.container-copy { max-width: var(--container-copy); }

.section { padding-block: var(--section-space); }
.section-sm { padding-block: var(--section-space-sm); }

.section-surface { background: var(--color-surface); }

.section-dark {
   background: var(--color-primary-dark);
   color: #fff;
}
.section-dark h1, .section-dark h2, .section-dark h3, .section-dark h4 { color: #fff; }
.section-dark p { color: var(--color-on-dark-muted); }
.section-dark a:not(.btn) { color: #cdddf5; }
.section-dark a:not(.btn):hover { color: #fff; }

/* Grid yardımcıları */
.grid { display: grid; gap: clamp(24px, 4vw, 64px); }
.grid > * { min-width: 0; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: center; }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-sidebar { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); align-items: start; }
.grid-form { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); align-items: start; }
/* Teknik veriler yan paneli: başlıkla tablo hizasına inmesi için üstten itilir */
.spec-side { margin-top: 125px; display: grid; gap: 20px; }
/* Genel bakış metinlerinin altındaki eylem butonları: üçü tek satırda yan yana */
.overview-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.overview-actions .btn { height: 46px; padding-inline: 16px; font-size: 14px; gap: 8px; }
@media (max-width: 991px) {
   .grid-2, .grid-3, .grid-sidebar, .grid-form { grid-template-columns: 1fr; }
   .spec-side { margin-top: 0; }
}

/* ---------- Tipografi ---------- */
.display-hero {
   font-size: clamp(30px, 4.4vw, 62px);
   font-weight: 700;
   line-height: 1.08;
   letter-spacing: -0.015em;
}

.display-1 {
   font-size: clamp(24px, 2.9vw, 42px);
   font-weight: 600;
   letter-spacing: -0.012em;
}

.display-2 { font-size: clamp(20px, 2.2vw, 30px); font-weight: 600; }

h3, .h3 { font-size: clamp(17px, 1.6vw, 21px); }
h4, .h4 { font-size: 17px; }

.eyebrow {
   display: inline-flex;
   align-items: center;
   gap: 12px;
   font-size: 13px;
   font-weight: 700;
   letter-spacing: .14em;
   text-transform: uppercase;
   color: var(--color-accent);
   margin-bottom: 22px;
}
.eyebrow::before {
   content: "";
   width: 28px; height: 2px;
   background: var(--color-accent);
}
.section-dark .eyebrow, .hero .eyebrow, .cta-block .eyebrow,
.page-hero .eyebrow, .product-hero .eyebrow { color: #7ea6f2; }
.section-dark .eyebrow::before, .hero .eyebrow::before, .cta-block .eyebrow::before,
.page-hero .eyebrow::before, .product-hero .eyebrow::before { background: #7ea6f2; }

.lead {
   font-size: clamp(18px, 1.5vw, 21px);
   line-height: 1.65;
   color: var(--color-muted);
}
.section-dark .lead { color: var(--color-on-dark-muted); }

/* İki katmanlı bölüm başlığı: ince tanıtım satırı + gradient ana satır */
.title-stack { display: grid; gap: 8px; }
.title-stack .t-kicker {
   font-family: var(--font-sans);
   font-size: clamp(15px, 1.35vw, 18px);
   font-weight: 600;
   line-height: 1.45;
   letter-spacing: .01em;
   color: var(--color-muted);
}
.title-stack .t-main {
   font-size: clamp(34px, 3.6vw, 54px);
   font-weight: 700;
   line-height: 1.05;
   letter-spacing: -0.02em;
}
.title-stack .t-main, .text-gradient {
   color: var(--color-primary);
   width: fit-content;
   /* background-clip: text yalnızca kutu içini boyar; Ü noktaları gibi taşan
      aksanlar boyasız (görünmez) kalmasın diye boya alanı genişletilir */
   padding: .16em .04em .08em 0;
   margin: -.16em -.04em -.08em 0;
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
   .title-stack .t-main, .text-gradient {
      background: linear-gradient(95deg, var(--color-primary) 10%, var(--color-accent) 90%);
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
      color: transparent;
   }
}

.sec-head { max-width: 780px; margin-bottom: clamp(40px, 5vw, 72px); }
.sec-head.center { margin-inline: auto; text-align: center; }
.sec-head.center .eyebrow { justify-content: center; }

.copy { max-width: var(--container-copy); }
.copy p { color: var(--color-ink-2); }

/* ---------- İkonlar ---------- */
.icon {
   width: 1em; height: 1em;
   fill: none;
   stroke: currentColor;
   stroke-width: 2;
   stroke-linecap: round;
   stroke-linejoin: round;
   flex: none;
   vertical-align: -0.12em;
}
/* Marka logolari (WhatsApp, sosyal medya) kontur degil dolgu ile cizilir */
.icon-fill { fill: currentColor; stroke: none; }

/* ---------- Butonlar ---------- */
.btn {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 10px;
   height: 54px;
   padding-inline: 30px;
   border-radius: var(--radius-sm);
   font-size: 15.5px;
   font-weight: 600;
   letter-spacing: .01em;
   white-space: nowrap;
   transition: background var(--dur) var(--ease), color var(--dur) var(--ease),
               border-color var(--dur) var(--ease), transform var(--dur) var(--ease),
               box-shadow var(--dur) var(--ease);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn .icon { transition: transform var(--dur) var(--ease); font-size: 17px; }
.btn:hover .icon { transform: translateX(4px); }

.btn-primary { background: var(--color-black); color: #fff; }
.btn-primary:hover { background: var(--color-accent); color: #fff; box-shadow: 0 14px 30px rgba(47, 111, 237, .32); }

.btn-dark { background: var(--color-black); color: #fff; }
.btn-dark:hover { background: var(--color-accent); color: #fff; box-shadow: 0 14px 30px rgba(47, 111, 237, .32); }

.btn-wa { background: #25d366; color: #fff; }
.btn-wa:hover { background: #1ebe5d; color: #fff; box-shadow: 0 14px 30px rgba(37, 211, 102, .32); }

/* Koyu lacivert zeminlerde siyah buton kaybolur; birincil eylem aksan mavisine döner */
.hero .btn-primary, .product-hero .btn-primary, .cta-block .btn-primary,
.section-dark .btn-primary {
   background: var(--color-accent);
}
.hero .btn-primary:hover, .product-hero .btn-primary:hover, .cta-block .btn-primary:hover,
.section-dark .btn-primary:hover {
   background: var(--color-accent-hover);
}

.btn-ghost {
   background: transparent;
   border: 1px solid var(--color-border);
   color: var(--color-text);
}
.btn-ghost:hover { border-color: var(--color-text); color: var(--color-text); background: rgba(16, 20, 24, .04); }

.section-dark .btn-ghost,
.btn-ghost.on-dark {
   border-color: rgba(255, 255, 255, .35);
   color: #fff;
}
.section-dark .btn-ghost:hover, .btn-ghost.on-dark:hover {
   background: #fff; color: var(--color-primary-dark); border-color: #fff;
}

.btn-sm { height: 46px; padding-inline: 20px; font-size: 15px; }

.link-arrow {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   font-weight: 700;
   font-size: 16px;
   color: var(--color-primary);
}
.link-arrow .icon { transition: transform var(--dur) var(--ease); }
.link-arrow:hover { color: var(--color-accent); }
.link-arrow:hover .icon { transform: translateX(4px); }

/* ---------- Header: çift katlı kurumsal ---------- */
/* En üstte tamamen şeffaf; kaydırınca cam efektli zemine döner */
.site-header {
   position: fixed;
   inset: 0 0 auto;
   z-index: 100;
   color: #fff;
   background: transparent;
   border-radius: 0 0 var(--radius-lg) var(--radius-lg);
   transition: background .35s var(--ease), box-shadow .35s var(--ease),
               backdrop-filter .35s var(--ease), -webkit-backdrop-filter .35s var(--ease);
}
.site-header.scrolled {
   background: rgba(7, 24, 44, .84);
   backdrop-filter: blur(16px) saturate(1.4);
   -webkit-backdrop-filter: blur(16px) saturate(1.4);
   box-shadow: 0 10px 30px rgba(4, 12, 24, .35);
}
/* Şeffaf durumda üst şerit, alt çizgi ve LED de görünmez */
.site-header:not(.scrolled) .topbar { background: transparent; }
.site-header:not(.scrolled) > .container-wide { border-bottom-color: transparent; }
.site-header:not(.scrolled)::after { opacity: 0; }
.site-header::after { transition: opacity .35s var(--ease); }

/* Menü alt kenarı: footer'ın üst çizgisiyle simetrik, sabit aksan ışık hattı +
   üzerinden ara ara süzülen yumuşak LED (geçişler arasında bekleme payı var) */
.site-header::after {
   content: "";
   position: absolute;
   left: var(--radius-lg); right: var(--radius-lg); bottom: 0;
   height: 2px;
   border-radius: 2px;
   background:
      /* katman 1: hareketli yumuşak ışık bandı */
      linear-gradient(90deg,
         transparent,
         rgba(122, 166, 242, .8) 40%,
         #cfe0ff 50%,
         rgba(122, 166, 242, .8) 60%,
         transparent) no-repeat -380px 0 / 380px 100%,
      /* katman 2: sabit, ortadan sönümlenen aksan çizgisi */
      linear-gradient(90deg,
         transparent,
         rgba(47, 111, 237, .5) 22%,
         rgba(47, 111, 237, .5) 78%,
         transparent) no-repeat 0 0 / 100% 100%;
   filter: drop-shadow(0 0 5px rgba(47, 111, 237, .4));
   animation: header-led 9s linear infinite;
   pointer-events: none;
}
@keyframes header-led {
   0%   { background-position: -380px 0, 0 0; }
   62%  { background-position: calc(100% + 380px) 0, 0 0; }
   100% { background-position: calc(100% + 380px) 0, 0 0; }
}

/* Üst şerit: marka mavisi iletişim bandı */
.topbar {
   background: rgba(25, 71, 139, .55);
   font-size: 13.5px;
   font-weight: 600;
}
.topbar .container-wide {
   display: flex;
   align-items: center;
   gap: clamp(14px, 2.4vw, 30px);
   height: 38px;
}
.topbar a, .topbar .tb-loc {
   display: inline-flex;
   align-items: center;
   gap: 7px;
   color: rgba(255, 255, 255, .9);
}
.topbar a:hover { color: #fff; }
.topbar .icon { font-size: 13px; opacity: .8; }
.topbar .tb-spacer { flex: 1; }
.topbar .tb-loc { color: rgba(255, 255, 255, .72); }

/* Ana bar: 3 bölge — logo solda, menü tam ortada, Teklif Al sağda.
   Yan kolonlar eşit (1fr) olduğundan boşluklar kendiliğinden orantılı kalır. */
.site-header > .container-wide {
   display: grid;
   grid-template-columns: 1fr auto 1fr;
   align-items: center;
   gap: clamp(14px, 2vw, 36px);
   height: 100px;
   border-bottom: 1px solid rgba(255, 255, 255, .07);
}
.site-header .brand { justify-self: start; }
.site-header .nav-desktop { justify-self: center; }
.site-header .header-cta { justify-self: end; }

/* Scroll sonrası: üst şerit kapanır, menü kompaktlaşır */
.site-header .topbar {
   max-height: 38px;
   overflow: hidden;
   transition: max-height .3s var(--ease);
}
.site-header.scrolled .topbar { max-height: 0; }

.brand { display: inline-flex; align-items: center; flex: none; position: relative; transition: opacity var(--dur) var(--ease); }
.brand img { height: 56px; width: auto; max-width: none; }
.brand:hover { opacity: .82; }
/* Logonun üstünden vuran çok hafif tema mavisi ışık */
.brand::before {
   content: "";
   position: absolute;
   left: 50%;
   top: -34px;
   transform: translateX(-50%);
   width: 150%;
   height: 96px;
   background: radial-gradient(58% 100% at 50% 0%, rgba(47, 111, 237, .2), transparent 72%);
   pointer-events: none;
   z-index: 1;
}

.nav-desktop {
   display: flex;
   align-items: center;
   gap: 2px;
   margin-left: 35px;
}

.nav-item { position: relative; }

.nav-link {
   position: relative;
   display: inline-flex;
   align-items: center;
   gap: 8px;
   padding: 42px 8px; /* (100px bar − 16px metin) / 2 */
   font-size: 15.5px;
   font-weight: 700;
   line-height: 1;
   letter-spacing: .005em;
   white-space: nowrap;
   color: #fff;
   transition: color .3s var(--ease);
}
.nav-link::after {
   content: "";
   position: absolute;
   left: 8px; right: 8px; bottom: 0;
   height: 3px;
   background: var(--color-accent);
   transform: scaleX(0);
   transform-origin: left;
   transition: transform .3s var(--ease);
}
.nav-link:hover, .nav-item:hover > .nav-link, .nav-link.active {
   color: var(--color-accent);
}
.nav-link:hover::after,
.nav-item:hover > .nav-link::after,
.nav-link.active::after { transform: scaleX(1); }
.nav-link .icon { font-size: 13px; opacity: .7; transition: transform var(--dur) var(--ease); }
.nav-item:hover > .nav-link .icon,
.nav-item:focus-within > .nav-link .icon { transform: rotate(180deg); }

/* ---- Dropdown: aksan üst çizgili, geniş beyaz panel ---- */
.dropdown-panel {
   position: absolute;
   top: 100%;
   left: 0;
   min-width: 300px;
   background: #fff;
   border: 1px solid var(--color-border);
   border-top: 3px solid var(--color-accent);
   border-radius: 0 0 var(--radius-md) var(--radius-md);
   box-shadow: 0 26px 60px rgba(6, 16, 32, .22);
   padding: 12px;
   opacity: 0;
   visibility: hidden;
   transform: translateY(8px);
   transition: opacity .24s var(--ease), transform .24s var(--ease), visibility .24s;
}
.nav-item:hover > .dropdown-panel,
.nav-item:focus-within > .dropdown-panel {
   opacity: 1; visibility: visible; transform: translateY(0);
}



.dropdown-panel a {
   display: flex;
   align-items: center;
   gap: 10px;
   padding: 13px 16px;
   font-size: 15.5px;
   font-weight: 600;
   color: var(--color-ink-2);
   border-radius: 8px;
   border-bottom: 1px solid var(--color-surface);
   transition: background .25s var(--ease), color .25s var(--ease), padding-left .25s var(--ease);
}
.dropdown-panel a:last-child { border-bottom: 0; }
.dropdown-panel a:hover { padding-left: 22px; }
.dropdown-panel a:hover { background: var(--color-surface); color: var(--color-accent); }
.dropdown-panel a.active { color: var(--color-accent); }

/* ---- Mega menu (Ürünler) ---- */
.mega-panel {
   left: 50%;
   transform: translate(-50%, 8px);
   width: min(820px, calc(100vw - 48px));
   display: grid;
   grid-template-columns: 240px 1fr;
   padding: 0;
   overflow: hidden;
}
.nav-item:hover > .mega-panel,
.nav-item:focus-within > .mega-panel { transform: translate(-50%, 0); }

.mega-side {
   background: var(--color-surface);
   padding: 20px 12px;
   border-right: 1px solid var(--color-border);
   display: flex;
   flex-direction: column;
   gap: 2px;
}
.mega-side .mega-title {
   font-size: 11.5px;
   font-weight: 800;
   letter-spacing: .12em;
   text-transform: uppercase;
   color: var(--color-muted);
   padding: 0 14px 10px;
}

.mega-products {
   padding: 14px;
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 4px;
}
.mega-product {
   display: flex !important;
   align-items: center;
   gap: 14px;
   padding: 10px 12px !important;
}
.mega-product img {
   width: 108px; height: 61px;
   object-fit: contain;
   flex: none;
   transition: transform var(--dur) var(--ease);
}
.mega-product:hover img { transform: scale(1.07); }
.mega-product span { display: block; }
.mega-product .mp-model { font-weight: 700; font-size: 16px; color: var(--color-text); }
.mega-product .mp-cap { font-size: 13px; color: var(--color-muted); font-weight: 500; }

/* ---- Header sağ ---- */
.header-cta { display: flex; align-items: center; gap: 14px; flex: none; }

.lang-switch {
   display: inline-flex;
   align-items: center;
   gap: 6px;
   font-size: 14px;
   font-weight: 700;
   color: rgba(255, 255, 255, .75);
}
.lang-switch .sep { opacity: .35; font-weight: 400; }
.lang-switch .active { color: #fff; }
.lang-switch .soon { opacity: .45; cursor: not-allowed; }

.header-cta .btn-sm { height: 48px; background: var(--color-accent); }
.header-cta .btn-sm:hover { background: var(--color-accent-hover); }

/* ---- Mobil menü butonu: cam çip ---- */
.menu-toggle {
   display: none;
   width: 46px; height: 46px;
   align-items: center;
   justify-content: center;
   border: 1px solid rgba(255, 255, 255, .22);
   border-radius: 12px;
   color: #fff;
   transition: background .3s var(--ease), border-color .3s var(--ease);
}
.menu-toggle:hover { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .35); }
.menu-toggle .icon { font-size: 24px; stroke-width: 1.8; }

/* ---- Mobil menü: tam ekran cam katman ---- */
.mobile-menu {
   position: fixed;
   inset: 0;
   z-index: 150;
   background: rgba(7, 20, 36, .85);
   backdrop-filter: blur(20px);
   -webkit-backdrop-filter: blur(20px);
   color: #fff;
   display: flex;
   flex-direction: column;
   padding: 18px clamp(20px, 5vw, 36px) 40px;
   opacity: 0;
   visibility: hidden;
   transform: translateY(-8px);
   transition: opacity .3s var(--ease), transform .3s var(--ease), visibility .3s;
   overflow-y: auto;
}
.mobile-menu.open { opacity: 1; visibility: visible; transform: none; }
body.menu-locked { overflow: hidden; }

.mobile-menu-head {
   display: flex;
   align-items: center;
   justify-content: space-between;
   min-height: 56px;
   margin-bottom: 22px;
}
.mobile-menu-head img { height: 46px; width: auto; }
.mobile-menu-head .menu-toggle { display: inline-flex; }

.mobile-nav { display: flex; flex-direction: column; list-style: none; }
.mobile-nav > li { border-bottom: 1px solid rgba(255, 255, 255, .10); }

.mobile-nav .m-link,
.mobile-nav .m-toggle {
   display: flex;
   width: 100%;
   align-items: center;
   justify-content: space-between;
   padding: 17px 2px;
   font-size: 19px;
   font-weight: 700;
   color: #fff;
   text-align: left;
}
.mobile-nav .m-link:hover, .mobile-nav .m-toggle:hover { color: #9cbdf5; }
.mobile-nav .m-toggle .icon { font-size: 15px; transition: transform var(--dur) var(--ease); opacity: .65; }
.mobile-nav li.open .m-toggle .icon { transform: rotate(180deg); }

.mobile-sub {
   display: grid;
   grid-template-rows: 0fr;
   transition: grid-template-rows .32s var(--ease);
}
.mobile-sub > div { overflow: hidden; padding-bottom: 0; }
.mobile-nav li.open .mobile-sub { grid-template-rows: 1fr; }
.mobile-nav li.open .mobile-sub > div { padding-bottom: 12px; }
.mobile-sub a {
   display: block;
   padding: 11px 14px;
   margin: 2px 0;
   font-size: 16.5px;
   font-weight: 600;
   color: rgba(255, 255, 255, .72);
   border-radius: 10px;
   transition: background .25s var(--ease), color .25s var(--ease);
}
.mobile-sub a:hover { color: #fff; background: rgba(255, 255, 255, .06); }

.mobile-menu-foot { margin-top: 28px; display: grid; gap: 14px; }
.mobile-menu-foot .btn { width: 100%; }
.mobile-menu-foot a.plain {
   display: inline-flex; gap: 10px; align-items: center;
   color: rgba(255, 255, 255, .72); font-weight: 600; font-size: 16px;
}
.mobile-menu-foot a.plain:hover { color: #fff; }

@media (max-width: 1320px) {
   /* Burger modunda bar iki uçlu flex düzenine döner */
   .site-header > .container-wide { display: flex; justify-content: space-between; }
   .nav-desktop { display: none; }
   .menu-toggle { display: inline-flex; margin-left: auto; }
   .header-cta .btn { display: none; }
   .header-cta .lang-switch { display: none; }
}

@media (max-width: 767px) {
   .site-header .topbar { display: none; }
}

/* Cam efekti desteklenmeyen tarayıcıda menü opak zemine döner */
@supports not (backdrop-filter: blur(1px)) {
   .site-header.scrolled { background: var(--color-primary-dark); }
   .site-header.scrolled .topbar { background: var(--color-primary); }
   .mobile-menu { background: #071424; }
}
@media (max-width: 560px) {
   .site-header > .container-wide { height: 66px; }
   .brand img { height: 44px; }
   .menu-toggle { width: 42px; height: 42px; }
}

/* ---------- Hero ---------- */
.hero {
   position: relative;
   min-height: clamp(820px, 92vh, 1000px);
   display: flex;
   align-items: center;
   background: var(--color-primary-dark);
   color: #fff;
   overflow: hidden;
   padding-top: var(--header-h);
}

.hero::before {
   content: "";
   position: absolute;
   inset: 0;
   background:
      radial-gradient(1100px 720px at 78% 40%, rgba(47, 111, 237, .22), transparent 62%),
      radial-gradient(700px 520px at 12% 88%, rgba(25, 71, 139, .35), transparent 65%);
}

.hero::after {
   content: "";
   position: absolute;
   inset: 0;
   background-image:
      linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
   background-size: 72px 72px;
   -webkit-mask-image: radial-gradient(900px 700px at 70% 45%, #000 20%, transparent 75%);
   mask-image: radial-gradient(900px 700px at 70% 45%, #000 20%, transparent 75%);
}

.hero .container-wide {
   position: relative;
   z-index: 2;
   display: grid;
   grid-template-columns: minmax(0, 46fr) minmax(0, 54fr);
   align-items: center;
   gap: clamp(32px, 4vw, 72px);
   padding-block: clamp(48px, 6vw, 90px);
}

.hero h1 { margin-bottom: 26px; }
.hero .lead { max-width: 520px; margin-bottom: 38px; }

.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 52px; }

.hero-points {
   display: flex;
   flex-wrap: wrap;
   list-style: none;
   gap: 12px 34px;
   padding-top: 26px;
   border-top: 1px solid var(--color-line-on-dark);
}
.hero-points li {
   display: inline-flex;
   align-items: center;
   gap: 10px;
   font-size: 15.5px;
   font-weight: 600;
   color: var(--color-on-dark-muted);
}
.hero-points .icon { color: var(--color-accent); font-size: 17px; }

.hero-media { position: relative; min-width: 0; }
.hero-media img {
   width: 100%;
   object-fit: contain;
   filter: var(--shadow-product);
}
.hero-media::after {
   content: "";
   position: absolute;
   left: 8%; right: 8%; bottom: -6%;
   height: 60px;
   background: radial-gradient(50% 100% at 50% 0, rgba(47, 111, 237, .25), transparent 80%);
   filter: blur(12px);
}

@media (max-width: 991px) {
   .hero { min-height: 0; }
   .hero .container-wide { grid-template-columns: 1fr; padding-block: 56px 64px; }
   .hero-media { order: 2; max-width: 620px; }
   .hero .lead { max-width: none; }
   .hero-actions .btn { flex: 1 1 200px; }
}

/* ---------- Metrik bandı ---------- */
.metric-band { border-bottom: 1px solid var(--color-border); background: #fff; }
.metric-band .container-wide {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 16px;
   padding-block: clamp(24px, 3vw, 40px);
}
.metric {
   display: flex;
   flex-direction: column;
   justify-content: center;
   padding: clamp(22px, 2.4vw, 34px) clamp(18px, 2vw, 30px);
   background: var(--color-surface);
   border: 1px solid var(--color-border);
   border-radius: var(--radius-md);
   transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease),
               box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.metric:hover {
   background: #fff;
   border-color: #c9d4e6;
   box-shadow: var(--shadow-hover);
   transform: translateY(-4px);
}
.metric .m-value {
   font-size: clamp(26px, 2.6vw, 40px);
   font-weight: 800;
   letter-spacing: -0.02em;
   color: var(--color-primary-dark);
   line-height: 1.1;
   display: block;
}
.metric .m-label { font-size: 15px; color: var(--color-muted); font-weight: 600; margin-top: 6px; display: block; }

@media (max-width: 860px) {
   .metric-band .container-wide { grid-template-columns: 1fr 1fr; gap: 12px; }
}

/* ---------- Bento ürün grid ---------- */
.bento {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 20px;
}
.bento .b-item:first-child {
   grid-row: span 2;
   grid-column: span 2;
}

.b-item {
   position: relative;
   display: flex;
   flex-direction: column;
   background: var(--color-surface);
   border: 1px solid var(--color-border);
   border-radius: var(--radius-lg);
   padding: clamp(24px, 2.6vw, 44px);
   overflow: hidden;
   transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease),
               box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.b-item:hover {
   border-color: #c9d4e6;
   background: #eef2f8;
   box-shadow: var(--shadow-hover);
   transform: translateY(-4px);
}

.b-item .b-info { position: relative; z-index: 2; max-width: 520px; }
.b-item .b-cat {
   font-size: 12.5px; font-weight: 800; letter-spacing: .12em;
   text-transform: uppercase; color: var(--color-accent);
   display: block; margin-bottom: 10px;
}
.b-item h3 { font-size: clamp(22px, 2.2vw, 32px); margin-bottom: 6px; }
.b-item .b-cap { font-size: 15.5px; font-weight: 700; color: var(--color-primary); margin-bottom: 12px; display: block; }
.b-item .b-desc { color: var(--color-muted); font-size: 16px; margin-bottom: 0; }
.b-item:first-child .b-desc { font-size: 17px; }

.b-item .b-media {
   margin-top: auto;
   padding-top: 18px;
   display: flex;
   justify-content: center;
}
.b-item .b-media img {
   width: 100%;
   max-width: 640px;
   object-fit: contain;
   transition: transform .5s var(--ease);
}
.b-item:hover .b-media img { transform: scale(1.035); }
.b-item:not(:first-child) .b-media img { max-width: 340px; }
.b-item:not(:first-child) .b-desc { display: none; }

/* 4. öğe: tam genişlik yatay kart */
.bento .b-item:last-child {
   grid-column: span 3;
   flex-direction: row;
   align-items: center;
   gap: clamp(20px, 3vw, 56px);
}
.bento .b-item:last-child .b-media { margin: 0; padding: 0; flex: 1; }
.bento .b-item:last-child .b-media img { max-width: 520px; }
.bento .b-item:last-child .b-desc { display: block; }
.bento .b-item:last-child .b-info { flex: 1; }

@media (max-width: 991px) {
   .bento .b-item:last-child { grid-column: span 2; flex-direction: column; align-items: stretch; }
   .bento .b-item:last-child .b-media { margin-top: auto; padding-top: 18px; }
}
@media (max-width: 620px) {
   .bento .b-item:last-child { grid-column: auto; }
}

.b-item .b-arrow {
   position: absolute;
   top: clamp(22px, 2.4vw, 40px);
   right: clamp(22px, 2.4vw, 40px);
   width: 44px; height: 44px;
   display: flex; align-items: center; justify-content: center;
   border-radius: 50%;
   border: 1px solid var(--color-border);
   color: var(--color-primary-dark);
   background: #fff;
   transition: background var(--dur) var(--ease), color var(--dur) var(--ease),
               transform var(--dur) var(--ease);
}
.b-item:hover .b-arrow {
   background: var(--color-accent);
   border-color: var(--color-accent);
   color: #fff;
   transform: translate(3px, -3px);
}
.b-item > a.stretch { position: absolute; inset: 0; z-index: 3; }

@media (max-width: 991px) {
   .bento { grid-template-columns: 1fr 1fr; }
   .bento .b-item:first-child { grid-column: span 2; grid-row: auto; }
}
@media (max-width: 620px) {
   .bento { grid-template-columns: 1fr; }
   .bento .b-item:first-child { grid-column: auto; }
   .b-item:not(:first-child) .b-media img { max-width: 420px; }
}

/* ---------- Numaralı liste (üretim gücü) ---------- */
.numbered { list-style: none; counter-reset: nl; }
.numbered > li {
   counter-increment: nl;
   display: grid;
   grid-template-columns: 84px 1fr;
   gap: clamp(16px, 2vw, 34px);
   padding: clamp(22px, 2.4vw, 34px) 0;
   border-top: 1px solid var(--color-border);
   align-items: start;
}
.numbered > li:last-child { border-bottom: 1px solid var(--color-border); }
.numbered > li::before {
   content: "0" counter(nl);
   font-size: clamp(24px, 2.4vw, 34px);
   font-weight: 800;
   letter-spacing: -0.02em;
   color: #c3cfe2;
   line-height: 1.2;
   transition: color var(--dur) var(--ease);
}
.numbered > li:hover::before { color: var(--color-accent); }
.numbered h3 { font-size: 20px; margin-bottom: 6px; }
.numbered p { color: var(--color-muted); font-size: 16px; margin: 0; }

/* Ürünler vitrini (anasayfa): üstteki bölüme yaklaştırılır */
.home-showcase { margin-top: -100px; }

/* Üretim gücümüz (anasayfa) */
.home-production .grid-2 { align-items: start; }
.home-production .lead { margin-top: 15px; }
.home-production .numbered { margin-top: 75px; }
.photo-strip { margin-top: -150px; }
@media (max-width: 560px) {
   .numbered > li { grid-template-columns: 56px 1fr; }
}

/* ---------- Sektör grid ---------- */
.sector-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 20px;
}
.sector-card {
   position: relative;
   display: flex;
   flex-direction: column;
   justify-content: flex-end;
   min-height: 300px;
   border-radius: var(--radius-lg);
   padding: clamp(24px, 2.4vw, 36px);
   overflow: hidden;
   color: #fff;
   background:
      radial-gradient(420px 300px at var(--sx, 80%) var(--sy, 10%), rgba(47, 111, 237, .35), transparent 70%),
      linear-gradient(160deg, #12315e 0%, var(--color-primary-dark) 70%);
   transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.sector-card::before {
   content: "";
   position: absolute; inset: 0;
   background-image:
      linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
   background-size: 44px 44px;
   opacity: .5;
   transition: opacity var(--dur) var(--ease);
}
.sector-card:hover::before { opacity: .9; }

.sector-card .s-icon {
   position: absolute;
   top: clamp(22px, 2.4vw, 34px);
   left: clamp(24px, 2.4vw, 36px);
   font-size: 30px;
   color: #8fb3ee;
}
.sector-card h3 { font-size: 23px; margin-bottom: 8px; position: relative; }
.sector-card p {
   position: relative;
   color: var(--color-on-dark-muted);
   font-size: 15.5px;
   margin-bottom: 16px;
}
.sector-card .link-arrow { color: #fff; position: relative; font-size: 15px; }
.sector-card > a.stretch { position: absolute; inset: 0; z-index: 3; }
.sector-card:hover { transform: translateY(-6px); box-shadow: 0 28px 56px rgba(4, 14, 30, .4); }

@media (max-width: 991px) { .sector-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .sector-grid { grid-template-columns: 1fr; } .sector-card { min-height: 240px; } }

/* ---------- Servis satırları ---------- */
.service-rows { list-style: none; }
.service-rows li { border-top: 1px solid var(--color-border); }
.service-rows li:last-child { border-bottom: 1px solid var(--color-border); }
.service-rows a {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 24px;
   padding: clamp(20px, 2.4vw, 30px) clamp(4px, 1vw, 16px);
   color: var(--color-text);
   border-radius: var(--radius-md);
   transition: background var(--dur) var(--ease), padding var(--dur) var(--ease);
}
.service-rows a:hover { background: var(--color-surface); padding-left: clamp(14px, 2vw, 28px); }
.service-rows .sr-title { font-size: clamp(19px, 2vw, 24px); font-weight: 700; display: block; }
.service-rows .sr-text { color: var(--color-muted); font-size: 15.5px; display: block; margin-top: 3px; }
.service-rows .icon {
   font-size: 22px;
   color: var(--color-primary);
   transition: transform var(--dur) var(--ease);
}
.service-rows a:hover .icon { transform: translateX(6px); color: var(--color-accent); }

/* ---------- CTA bloğu ---------- */
.cta-block {
   position: relative;
   background: var(--color-primary-dark);
   color: #fff;
   overflow: hidden;
}
/* Görsel bölümün tamamını kaplar; üzerine okunabilirlik örtüsü + mavi ışık vurgusu biner */
.cta-block .cta-bg {
   position: absolute;
   inset: 0;
   width: 100%;
   height: 100%;
   object-fit: cover;
   pointer-events: none;
}
.cta-block::after {
   content: "";
   position: absolute;
   inset: 0;
   background:
      radial-gradient(900px 500px at 85% 20%, rgba(47, 111, 237, .28), transparent 65%),
      linear-gradient(180deg, rgba(7, 24, 44, .82), rgba(7, 24, 44, .68));
   pointer-events: none;
}
.cta-block .container {
   position: relative;
   z-index: 2;
   text-align: center;
   padding-block: clamp(80px, 9vw, 140px);
}
.cta-block h2 { max-width: 720px; margin-inline: auto; }
.cta-block p { max-width: 560px; margin: 18px auto 36px; color: var(--color-on-dark-muted); }
.cta-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 14px; }

/* ---------- Footer ---------- */
.site-footer {
   position: relative;
   background: var(--color-primary-dark);
   color: var(--color-on-dark-muted);
   font-size: 15.5px;
   overflow: hidden;
}
/* Üst kenarda ortadan sönümlenen aksan ışık çizgisi */
.site-footer::before {
   content: "";
   position: absolute;
   top: 0; left: 0; right: 0;
   height: 1px;
   background: linear-gradient(90deg, transparent 4%, rgba(47, 111, 237, .6) 50%, transparent 96%);
}
/* Derinlik: köşelerden vuran yumuşak ışık huzmeleri */
.site-footer::after {
   content: "";
   position: absolute;
   inset: 0;
   background:
      radial-gradient(720px 420px at 85% 0%, rgba(47, 111, 237, .13), transparent 65%),
      radial-gradient(560px 380px at 6% 100%, rgba(25, 71, 139, .3), transparent 70%);
   pointer-events: none;
}
.site-footer > .container { position: relative; z-index: 1; }
.site-footer .footer-main {
   display: grid;
   grid-template-columns: minmax(260px, 1.4fr) repeat(3, 1fr);
   gap: clamp(32px, 4vw, 72px);
   padding-block: clamp(64px, 7vw, 110px) clamp(44px, 5vw, 72px);
}
/* Logo: şeffaf cam panel içinde, hover'da yükselir */
.site-footer .f-brand > a {
   display: inline-flex;
   align-items: center;
   padding: 16px 20px;
   margin-bottom: 22px;
   background: rgba(255, 255, 255, .05);
   border: 1px solid rgba(255, 255, 255, .13);
   border-radius: var(--radius-md);
   backdrop-filter: blur(10px);
   -webkit-backdrop-filter: blur(10px);
   transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease),
               transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.site-footer .f-brand > a:hover {
   background: rgba(255, 255, 255, .09);
   border-color: rgba(255, 255, 255, .28);
   transform: translateY(-3px);
   box-shadow: 0 16px 36px rgba(47, 111, 237, .22);
}
.site-footer .f-brand img { width: 270px; max-width: 100%; height: auto; }
.site-footer .f-brand p { max-width: 340px; line-height: 1.75; }

.site-footer h3 {
   display: flex;
   align-items: center;
   gap: 10px;
   color: #fff;
   font-size: 13.5px;
   font-weight: 800;
   letter-spacing: .1em;
   text-transform: uppercase;
   white-space: nowrap;
   margin-bottom: 20px;
}
.site-footer h3::before {
   content: "";
   width: 18px; height: 2px;
   background: var(--color-accent);
   border-radius: 1px;
}
.site-footer ul { list-style: none; display: grid; gap: 11px; }
.site-footer ul a {
   color: var(--color-on-dark-muted);
   font-weight: 600;
   transition: color var(--dur) var(--ease), padding-left var(--dur) var(--ease);
}
.site-footer ul a:hover { color: #fff; padding-left: 6px; }

.f-contact { gap: 14px !important; }
.f-contact li { display: flex; gap: 12px; align-items: center; }
/* Çok satırlı adres: ikon, adresin ilk satırıyla aynı hizadan başlar */
.f-contact li:has(> span) { align-items: flex-start; }
.f-contact .icon {
   box-sizing: content-box;
   flex: none;
   padding: 8px;
   background: rgba(255, 255, 255, .06);
   border: 1px solid rgba(255, 255, 255, .12);
   border-radius: 10px;
   color: #7ea6f2;
   font-size: 15px;
}

.footer-bottom {
   border-top: 1px solid var(--color-line-on-dark);
   padding-block: 26px;
   display: grid;
   grid-template-columns: 1fr auto 1fr;
   align-items: center;
   gap: 14px;
   font-size: 14.5px;
}
.footer-bottom > p:first-child { justify-self: start; }
.footer-bottom nav { display: flex; flex-wrap: wrap; justify-self: center; gap: 8px 26px; }
.footer-bottom a { color: var(--color-on-dark-muted); font-weight: 600; }
.footer-bottom a:hover { color: #fff; }
/* Ajans kredisi: hap görünümlü, hover'da Stick yeşili ışıyan buton */
.footer-credit { justify-self: end; }
.footer-credit a {
   display: inline-flex;
   align-items: center;
   gap: 9px;
   padding: 8px 16px;
   border-radius: 999px;
   border: 1px solid rgba(255, 255, 255, .1);
   background: rgba(255, 255, 255, .04);
   color: var(--color-on-dark-muted);
   font-weight: 600;
   transition: color .3s var(--ease), border-color .3s var(--ease),
               background .3s var(--ease), box-shadow .3s var(--ease), transform .3s var(--ease);
}
.footer-credit a:hover {
   color: #fff;
   border-color: rgba(65, 181, 86, .55);
   background: rgba(65, 181, 86, .1);
   box-shadow: 0 6px 20px rgba(65, 181, 86, .25);
   transform: translateY(-2px);
}
.footer-credit img { height: 18px; width: auto; display: block; transition: transform .3s var(--ease); }
.footer-credit a:hover img { transform: scale(1.06); }
@media (max-width: 860px) {
   .footer-bottom { grid-template-columns: 1fr; justify-items: center; text-align: center; }
   .footer-bottom > p:first-child, .footer-credit { justify-self: center; }
}

@media (max-width: 1080px) {
   .site-footer .footer-main { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
   .site-footer .footer-main { grid-template-columns: 1fr; gap: 36px; }
}

/* ---------- İç sayfa hero ---------- */
.page-hero {
   background: var(--color-primary-dark);
   color: #fff;
   padding-top: var(--header-h);
   position: relative;
   overflow: hidden;
}
.page-hero::before {
   content: "";
   position: absolute; inset: 0;
   background: radial-gradient(760px 420px at 82% 30%, rgba(47, 111, 237, .22), transparent 65%);
}
.page-hero .container {
   position: relative;
   padding-block: clamp(56px, 7vw, 110px);
}
.page-hero h1 { max-width: 860px; margin-bottom: 0; }
.page-hero .lead { max-width: 640px; margin-top: 20px; }

.breadcrumb {
   display: flex;
   flex-wrap: wrap;
   list-style: none;
   gap: 10px;
   font-size: 14.5px;
   font-weight: 600;
   margin-bottom: 26px;
   color: var(--color-on-dark-muted);
}
.breadcrumb a { color: var(--color-on-dark-muted); }
.breadcrumb a:hover { color: #fff; }
.breadcrumb li + li::before { content: "/"; margin-right: 10px; opacity: .4; }
.breadcrumb [aria-current] { color: #fff; }

/* ---------- Ürün showcase (ürünler sayfası) ---------- */
.product-feature {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: clamp(28px, 4.5vw, 80px);
   align-items: center;
   padding-block: clamp(44px, 5.5vw, 84px);
   border-top: 1px solid var(--color-border);
}
.product-feature:first-of-type { border-top: 0; padding-top: 0; }
.product-feature.reverse .pf-media { order: 2; }

.pf-media {
   background:
      radial-gradient(360px 260px at 70% 25%, rgba(47, 111, 237, .10), transparent 70%),
      var(--color-surface);
   border: 1px solid var(--color-border);
   border-radius: var(--radius-lg);
   padding: clamp(24px, 3vw, 52px);
}
.pf-media img { width: 100%; object-fit: contain; transition: transform .5s var(--ease); }
.pf-media:hover img { transform: scale(1.03); }

.pf-specs {
   display: grid;
   grid-template-columns: repeat(3, auto);
   justify-content: start;
   gap: 10px 40px;
   margin: 26px 0 30px;
   padding: 20px 0;
   border-block: 1px solid var(--color-border);
   list-style: none;
}
.pf-specs .label { display: block; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--color-muted); }
.pf-specs .value { font-size: 19px; font-weight: 800; color: var(--color-primary-dark); }

@media (max-width: 860px) {
   .product-feature { grid-template-columns: 1fr; }
   .product-feature.reverse .pf-media { order: 0; }
   .pf-specs { grid-template-columns: repeat(2, auto); }
}

/* ---------- Ürün detay hero ---------- */
.product-hero {
   background: var(--color-primary-dark);
   color: #fff;
   padding-top: var(--header-h);
   position: relative;
   overflow: hidden;
}
.product-hero::before {
   content: "";
   position: absolute; inset: 0;
   background:
      radial-gradient(900px 560px at 74% 46%, rgba(47, 111, 237, .22), transparent 64%);
}
.product-hero::after {
   content: "";
   position: absolute; inset: 0;
   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: 64px 64px;
   -webkit-mask-image: radial-gradient(700px 560px at 72% 50%, #000 25%, transparent 78%);
   mask-image: radial-gradient(700px 560px at 72% 50%, #000 25%, transparent 78%);
}
.product-hero .container-wide {
   position: relative;
   z-index: 2;
   display: grid;
   grid-template-columns: minmax(0, 45fr) minmax(0, 55fr);
   gap: clamp(30px, 4vw, 70px);
   align-items: center;
   padding-block: clamp(48px, 6vw, 96px);
}
.product-hero .breadcrumb { margin-bottom: 20px; }
.product-hero .p-cat {
   font-size: 13px; font-weight: 800; letter-spacing: .14em;
   text-transform: uppercase; color: #7ea6f2;
   display: block; margin-bottom: 12px;
}
.product-hero h1 { font-size: clamp(42px, 5vw, 72px); letter-spacing: -0.03em; }
.product-hero .lead { margin: 18px 0 34px; max-width: 520px; }
.product-hero .hero-actions { margin-bottom: 0; }
.product-hero .hero-media img { filter: var(--shadow-product); }

@media (max-width: 991px) {
   .product-hero .container-wide { grid-template-columns: 1fr; }
   .product-hero .hero-media { order: 2; max-width: 640px; }
}

/* ---------- Teknik özellik tablosu ---------- */
.spec-table-wrap {
   overflow-x: auto;
   -webkit-overflow-scrolling: touch;
   border: 1px solid var(--color-border);
   border-radius: var(--radius-md);
   background: #fff;
}
.spec-table {
   width: 100%;
   min-width: 560px;
   border-collapse: collapse;
   font-size: 16px;
}
.spec-table th, .spec-table td {
   padding: 18px 26px;
   text-align: left;
   vertical-align: top;
   border-top: 1px solid var(--color-border);
   transition: background .25s var(--ease);
}
.spec-table tbody tr:hover th { background: #edf2fa; }
.spec-table tbody tr:hover td { background: #f3f7fd; }
.spec-table tr:first-child th, .spec-table tr:first-child td { border-top: 0; }
.spec-table th {
   width: 44%;
   font-weight: 700;
   color: var(--color-primary-dark);
   background: var(--color-surface);
}
.spec-table th small { display: block; font-weight: 500; color: var(--color-muted); font-size: 12.5px; letter-spacing: .02em; }
/* Satır başlığı: tema renkli ikon rozeti + etiket */
.spec-row-head { display: flex; align-items: center; gap: 12px; }
.spec-row-head > span:last-child { margin-left: 18px; }
.spec-ico {
   flex: none;
   width: 38px;
   height: 38px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   background: rgba(47, 111, 237, .08);
   border: 1px solid rgba(47, 111, 237, .16);
   border-radius: 10px;
   transition: background .25s var(--ease), border-color .25s var(--ease);
}
.spec-ico img { width: 20px; height: 20px; display: block; }
.spec-table tbody tr:hover .spec-ico { background: rgba(47, 111, 237, .14); border-color: rgba(47, 111, 237, .3); }
.spec-table td { color: var(--color-ink-2); }
.spec-table tbody tr:nth-child(even):not(:hover) td { background: rgba(245, 247, 250, .5); }

/* ---------- Karşılaştırma tablosu ---------- */
.compare-wrap {
   overflow-x: auto;
   -webkit-overflow-scrolling: touch;
   border: 1px solid var(--color-border);
   border-radius: var(--radius-md);
   background: #fff;
}
.compare-table {
   width: 100%;
   min-width: 900px;
   border-collapse: collapse;
   font-size: 15.5px;
}
.compare-table th, .compare-table td {
   padding: 16px 20px;
   border-top: 1px solid var(--color-border);
   border-left: 1px solid var(--color-border);
   text-align: center;
   vertical-align: middle;
   transition: background .25s var(--ease);
}
.compare-table tbody tr:hover td { background: #f3f7fd; }
.compare-table tbody tr:hover td:first-child { background: #edf2fa; }
.compare-table th:first-child, .compare-table td:first-child {
   border-left: 0;
   text-align: left;
   background: var(--color-surface);
   font-weight: 700;
   color: var(--color-primary-dark);
   position: sticky;
   left: 0;
   min-width: 220px;
   z-index: 1;
}
.compare-table thead th {
   border-top: 0;
   background: var(--color-primary-dark);
   color: #fff;
   font-size: 17px;
   font-weight: 800;
   padding-block: 20px;
}
.compare-table thead th:first-child { background: var(--color-primary-dark); color: #fff; }
.compare-table thead a { color: #fff; }
.compare-table thead a:hover { color: #9cbdf5; }
.compare-table img { max-height: 84px; width: auto; margin-inline: auto; }
.compare-table th small { display: block; font-weight: 500; color: var(--color-muted); font-size: 12px; }

/* ---------- Avantaj rozetleri ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; }
.chips li {
   display: inline-flex;
   align-items: center;
   gap: 9px;
   border: 1px solid var(--color-border);
   background: #fff;
   border-radius: 100px;
   padding: 10px 20px;
   font-size: 15px;
   font-weight: 600;
   color: var(--color-ink-2);
   transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease),
               transform var(--dur) var(--ease);
}
.chips li:hover { border-color: var(--color-accent); background: #f0f5ff; transform: translateY(-2px); }
.chips .icon { color: var(--color-accent); font-size: 15px; }

/* ---------- Kontrol listesi ---------- */
.checklist { list-style: none; display: grid; gap: 13px; }
.checklist li {
   display: flex;
   gap: 13px;
   align-items: flex-start;
   font-size: 16.5px;
   color: var(--color-ink-2);
}
.checklist .icon { color: var(--color-accent); font-size: 19px; margin-top: 4px; }
.section-dark .checklist li { color: var(--color-on-dark-muted); }

/* ---------- Basit kart ---------- */
.card {
   background: #fff;
   border: 1px solid var(--color-border);
   border-radius: var(--radius-md);
   padding: clamp(26px, 2.6vw, 40px);
   transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
               transform var(--dur) var(--ease);
}
.card:hover { border-color: #c9d4e6; box-shadow: var(--shadow-hover); transform: translateY(-4px); }
.card.on-surface { background: var(--color-surface); }
.card h3 { font-size: 20px; }
.card .icon-lg { font-size: 26px; color: var(--color-accent); margin-bottom: 16px; display: inline-block; }
.card p { color: var(--color-muted); font-size: 16px; }

/* ---------- Media panel (ürün görseli zemini) ---------- */
.media-panel {
   background: var(--color-surface);
   border: 1px solid var(--color-border);
   border-radius: var(--radius-md);
   padding: clamp(26px, 3.4vw, 56px);
}
.media-panel img { width: 100%; object-fit: contain; }
.media-panel.dark {
   position: relative;
   overflow: hidden;
   background: linear-gradient(165deg, #0d2342, var(--color-primary-dark));
   border-color: rgba(255, 255, 255, .06);
   transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
               transform var(--dur) var(--ease);
}
.media-panel.dark img { filter: var(--shadow-product); }

/* Hover'da cam efekti: buzlu katman + eğik ışık yansıması */
.media-panel.dark::before {
   content: "";
   position: absolute;
   top: -20%; bottom: -20%;
   left: 0;
   width: 38%;
   background: linear-gradient(105deg,
      transparent,
      rgba(255, 255, 255, .1) 45%,
      rgba(255, 255, 255, .22) 50%,
      rgba(255, 255, 255, .1) 55%,
      transparent);
   transform: translateX(-160%) skewX(-14deg);
   transition: transform .9s var(--ease);
   pointer-events: none;
   z-index: 2;
}
.media-panel.dark:hover::before { transform: translateX(320%) skewX(-14deg); }
.media-panel.dark::after {
   content: "";
   position: absolute;
   inset: 0;
   background: linear-gradient(155deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .02) 55%, rgba(47, 111, 237, .12));
   opacity: 0;
   transition: opacity var(--dur) var(--ease);
   pointer-events: none;
}
.media-panel.dark:hover::after { opacity: 1; }
.media-panel.dark:hover {
   border-color: rgba(126, 166, 242, .45);
   box-shadow: 0 24px 52px rgba(4, 14, 30, .45);
   transform: translateY(-4px);
}

/* ---------- Form ---------- */
.form-grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 22px 20px;
}
.form-grid .full { grid-column: 1 / -1; }
@media (max-width: 700px) { .form-grid { grid-template-columns: 1fr; } }

.field label {
   display: block;
   font-size: 14.5px;
   font-weight: 700;
   margin-bottom: 8px;
   color: var(--color-text);
}
.field input, .field select, .field textarea {
   width: 100%;
   font: inherit;
   font-size: 16px;
   color: var(--color-text);
   background: #fff;
   border: 1px solid var(--color-border);
   border-radius: var(--radius-sm);
   min-height: 56px;
   padding: 14px 18px;
   transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.field textarea { min-height: 140px; resize: vertical; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: #c6d0e0; }
.field input:focus, .field select:focus, .field textarea:focus {
   outline: none;
   border-color: var(--color-accent);
   box-shadow: 0 0 0 4px rgba(47, 111, 237, .12);
}
.field select {
   appearance: none;
   background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' fill='none'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%23667085' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
   background-repeat: no-repeat;
   background-position: right 18px center;
   padding-right: 46px;
}
.field input[type="file"] { padding: 13px 18px; min-height: 0; }
.field .hint { font-size: 13.5px; color: var(--color-muted); margin-top: 7px; display: block; }

.field .invalid-feedback { display: none; color: #b42318; font-size: 14px; margin-top: 7px; font-weight: 600; }
.is-invalid { border-color: #d92d20 !important; }
.is-invalid ~ .invalid-feedback { display: block; }

.consent { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; }
.consent input {
   width: 20px; height: 20px;
   margin-top: 4px;
   accent-color: var(--color-accent);
   flex: none;
}
.consent .invalid-feedback { margin-top: 4px; }

.form-status { display: none; border-radius: var(--radius-sm); padding: 15px 20px; margin-top: 18px; font-size: 15.5px; font-weight: 600; }
.form-status.error { display: block; background: #fef3f2; color: #b42318; border: 1px solid #fecdca; }
.form-status.success { display: block; background: #ecfdf3; color: #067647; border: 1px solid #abefc6; }
.form-status a { color: inherit; text-decoration: underline; }

/* ---------- Hakkımızda alt şeridi: üç sütunlu editoryal özet ---------- */
.about-strip {
   display: grid;
   grid-template-columns: repeat(3, minmax(0, 1fr));
   gap: clamp(20px, 3vw, 48px);
   margin-top: 100px;
   padding-top: clamp(28px, 3.5vw, 44px);
   border-top: 1px solid var(--color-border);
}
.about-strip > div {
   display: flex;
   flex-direction: column;
   gap: 6px;
   padding: 18px 22px;
   background: var(--color-surface);
   border: 1px solid var(--color-border);
   border-left: 3px solid var(--color-accent);
   border-radius: var(--radius-md);
   transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease),
               box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.about-strip > div:hover {
   background: #fff;
   border-color: #c9d4e6;
   border-left-color: var(--color-accent);
   box-shadow: var(--shadow-hover);
   transform: translateY(-3px);
}
.about-strip dt {
   font-size: 12px;
   font-weight: 700;
   letter-spacing: .1em;
   text-transform: uppercase;
   color: var(--color-muted);
}
.about-strip dd {
   margin: 0;
   font-size: clamp(16px, 1.4vw, 19px);
   font-weight: 700;
   letter-spacing: -.01em;
   color: var(--color-primary-dark);
}
@media (max-width: 767px) {
   .about-strip { grid-template-columns: 1fr; gap: 18px; }
}

/* ---------- Hakkımızda 3D kart: PNG görsel kutunun üstünden taşar ---------- */
.about-pop {
   position: relative;
   margin-top: calc(var(--pop, 90px) + 28px); /* taşma payı + stat ile boşluk */
   background:
      radial-gradient(340px 260px at 72% 20%, rgba(47, 111, 237, .28), transparent 70%),
      linear-gradient(165deg, #0d2342, var(--color-primary-dark));
   border: 1px solid rgba(255, 255, 255, .08);
   border-radius: var(--radius-lg);
   padding: 0 clamp(18px, 2vw, 32px);
   box-shadow: 0 26px 56px rgba(11, 31, 58, .28);
   transform-style: preserve-3d;
   transition: transform .35s var(--ease), box-shadow .35s var(--ease);
   will-change: transform;
}
.about-pop:hover { box-shadow: 0 42px 84px rgba(11, 31, 58, .42); }
.about-pop img {
   display: block;
   width: 100%;
   height: auto;
   margin-top: calc(var(--pop, 90px) * -1); /* üst kısım kutudan taşar */
   filter: drop-shadow(0 26px 38px rgba(4, 14, 30, .45));
   transform-origin: 50% 100%;
   transition: transform .35s var(--ease);
   pointer-events: none;
}
/* Hover'da devreye girer: hafif kalkış + derinlik; ölçek telafisi sayesinde
   perspektif görseli büyütmez, taban kutudan taşmaz */
.about-pop:hover img {
   transform: translateY(-12px) translateZ(60px) scale(.94);
}
/* Fareyi takip eden ışık vurgusu: kart yüzeyinde 3D cam parlaması hissi */
.about-pop::before {
   content: "";
   position: absolute;
   inset: 0;
   border-radius: inherit;
   background: radial-gradient(260px 210px at var(--mx, 50%) var(--my, 25%),
      rgba(122, 166, 242, .28), transparent 70%);
   opacity: 0;
   transition: opacity .3s var(--ease);
   pointer-events: none;
}
.about-pop:hover::before { opacity: 1; }
/* Kart zeminine ince bir iç çerçeve detayı */
.about-pop::after {
   content: "";
   position: absolute;
   inset: 12px;
   border: 1px solid rgba(255, 255, 255, .07);
   border-radius: calc(var(--radius-lg) - 8px);
   pointer-events: none;
}

/* Ürün detay "Genel Bakış": görsel paneli, açıklama metniyle aynı yükseklikte uzar;
   şeffaf ürün görseli kırpılmadan kutuya sığar */
.overview-grid { align-items: stretch; }
.overview-grid .media-panel {
   height: 100%;
   padding: clamp(20px, 2.5vw, 40px);
   position: relative;
   transition: border-color var(--dur) var(--ease);
}
.overview-grid .media-panel img {
   width: 100%;
   height: 100%;
   object-fit: contain;
}

/* Hover'da kenarlıkta tema renginde LED dolaşır (header'daki ışık hattıyla aynı dil).
   Genel bakış görsel kutusu ve "Diğer Modelleri İnceleyin" kartlarında ortak. */
@property --led-a {
   syntax: "<angle>";
   initial-value: 0deg;
   inherits: false;
}
.overview-grid .media-panel::after,
.b-item::after {
   content: "";
   position: absolute;
   inset: 0;
   border-radius: inherit;
   padding: 2px;
   background: conic-gradient(from var(--led-a),
      transparent 0deg 280deg,
      rgba(47, 111, 237, .55) 322deg,
      #cfe0ff 348deg,
      rgba(47, 111, 237, .55) 356deg,
      transparent 360deg);
   -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
   -webkit-mask-composite: xor;
   mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
   mask-composite: exclude;
   filter: drop-shadow(0 0 6px rgba(47, 111, 237, .45));
   opacity: 0;
   transition: opacity .35s var(--ease);
   pointer-events: none;
   z-index: 4;
}
/* Görsel panelinde overflow kırpması olmadığından LED, 1px'lik kenarlığın üzerine oturur */
.overview-grid .media-panel::after { inset: -1px; }
.overview-grid .media-panel:hover { border-color: rgba(47, 111, 237, .35); }
.overview-grid .media-panel:hover::after,
.b-item:hover::after {
   opacity: 1;
   animation: overview-led 2.6s linear infinite;
}
@keyframes overview-led {
   to { --led-a: 360deg; }
}

/* ---------- Kesim kalitesi: video bölümün TAMAMINI kaplar ----------
   Sinematik tam ekran sahne; metin videonun üzerinde, video fare paralaksıyla
   derinlik kazanır (hakkımızda kartındaki 3D hissiyatın bölüm ölçekli hali) */
.vq {
   position: relative;
   overflow: hidden;
   display: flex;
   align-items: center;
   min-height: clamp(540px, 88vh, 840px);
}
.vq-bg {
   position: absolute;
   inset: 0;
   width: 100%;
   height: 100%;
   object-fit: cover;
   transform: scale(1.07); /* paralaks payı: kaymada kenar boşluğu görünmez */
   transition: transform .3s ease-out;
   will-change: transform;
}
/* Metin okunabilirliği: sola doğru, videonun beyaz stüdyosuyla kaynaşan sis */
.vq::after {
   content: "";
   position: absolute;
   inset: 0;
   background: linear-gradient(90deg,
      rgba(255, 255, 255, .94) 0%,
      rgba(255, 255, 255, .78) 34%,
      rgba(255, 255, 255, 0) 62%);
   pointer-events: none;
}
.vq > .container {
   position: relative;
   z-index: 2;
   width: 100%;
   padding-block: clamp(60px, 8vw, 110px);
}
.vq-copy { max-width: 560px; }
@media (max-width: 767px) {
   .vq { min-height: 0; }
   .vq::after { background: rgba(255, 255, 255, .88); }
}

/* ---------- Numara istatistik: sol aksan çizgili, sakin editoryal blok ---------- */
.stat-xl .value {
   font-family: var(--font-display);
   font-size: clamp(32px, 3.2vw, 50px);
   font-weight: 700;
   letter-spacing: -0.02em;
   line-height: 1;
   color: var(--color-primary-dark);
   display: block;
   padding-left: 20px;
   border-left: 3px solid var(--color-accent);
}
.stat-xl .label {
   font-size: 13.5px;
   font-weight: 700;
   letter-spacing: .1em;
   text-transform: uppercase;
   color: var(--color-muted);
   display: block;
   padding: 8px 0 0 20px;
   border-left: 3px solid var(--color-accent);
}

/* ---------- Adım listesi ---------- */
.steps { list-style: none; counter-reset: st; display: grid; gap: 14px; }
.steps li {
   counter-increment: st;
   display: grid;
   grid-template-columns: 52px 1fr;
   gap: 18px;
   align-items: start;
   background: #fff;
   border: 1px solid var(--color-border);
   border-radius: var(--radius-md);
   padding: 22px 24px;
   transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
               transform var(--dur) var(--ease);
}
.steps li:hover { border-color: #c9d4e6; box-shadow: var(--shadow-hover); transform: translateY(-3px); }
.steps li::before {
   content: counter(st, decimal-leading-zero);
   font-weight: 800;
   font-size: 21px;
   color: var(--color-accent);
   line-height: 1.4;
}
.steps h3 { font-size: 18px; margin-bottom: 4px; }
.steps p { color: var(--color-muted); font-size: 15.5px; margin: 0; }

/* ---------- Video kartı ---------- */
.video-card {
   position: relative;
   display: block;
   border-radius: var(--radius-lg);
   overflow: hidden;
   background: var(--color-primary-dark);
}
.video-card img { width: 100%; opacity: .8; transition: transform .5s var(--ease); }
.video-card:hover img { transform: scale(1.03); }
.video-card .play {
   position: absolute; inset: 0;
   display: flex; align-items: center; justify-content: center;
}
.video-card .play span {
   width: 84px; height: 84px;
   border-radius: 50%;
   background: rgba(255, 255, 255, .92);
   color: var(--color-primary-dark);
   display: flex; align-items: center; justify-content: center;
   font-size: 26px;
   transition: transform var(--dur) var(--ease), background var(--dur) var(--ease);
}
.video-card:hover .play span { transform: scale(1.08); background: #fff; }

/* ---------- Reveal animasyonları ---------- */
/* Giriş animasyonu keyframe ile yapılır: transform/transition'a el konmaz,
   böylece bileşenlerin kendi hover transform ve geçişleriyle çakışmaz. */
.reveal { opacity: 0; }
.reveal.in {
   opacity: 1;
   animation: reveal-in .7s var(--ease) backwards;
   animation-delay: var(--rd, 0s);
}
@keyframes reveal-in {
   from { opacity: 0; transform: translateY(26px); }
   to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
   html { scroll-behavior: auto; }
   *, *::before, *::after {
      animation-duration: .01ms !important;
      animation-delay: 0s !important;
      animation-iteration-count: 1 !important;
      transition-duration: .01ms !important;
      transition-delay: 0s !important;
   }
   .reveal { opacity: 1; transform: none; }
}

/* ---------- Yardımcılar ---------- */
.mt-1 { margin-top: 10px; } .mt-2 { margin-top: 18px; } .mt-3 { margin-top: 28px; }
.mt-4 { margin-top: 40px; } .mt-5 { margin-top: 56px; }
.mb-0 { margin-bottom: 0; }
.text-center { text-align: center; }
.flex { display: flex; } .flex-wrap { flex-wrap: wrap; }
.items-center { align-items: center; } .justify-between { justify-content: space-between; }
.gap-2 { gap: 14px; } .gap-3 { gap: 22px; }
.text-muted { color: var(--color-muted); }
.head-row {
   display: flex;
   flex-wrap: wrap;
   align-items: flex-end;
   justify-content: space-between;
   gap: 22px;
   margin-bottom: clamp(40px, 5vw, 64px);
}
.head-row .sec-head { margin-bottom: 0; }

/* ============================================================
   ANASAYFA v3 — DESIGN-SYSTEM.md kompozisyonu
   Hairline temelli, kartsız, büyük tipografi + büyük makine.
   ============================================================ */

/* ---- Hero slider: sabit yükseklikli, kaymasız yapı ----
   Tüm slaytlar aynı grid hücresinde üst üste durur (grid-area 1/1);
   kapsayıcı yüksekliği daima en uzun slayta eşittir -> layout shift olmaz. */
/* Banner sayfanın en tepesinden başlar; şeffaf menü üzerinde yüzer */
.home-hero {
   display: block;
   min-height: 0;
   padding: 0;
}

.home-hero > .container-wide { width: 100%; }

.home-hero::before {
   background:
      radial-gradient(1000px 620px at 72% 60%, rgba(47, 111, 237, .20), transparent 62%),
      radial-gradient(640px 480px at 8% 12%, rgba(25, 71, 139, .16), transparent 65%);
}

.home-hero::after {
   -webkit-mask-image: radial-gradient(880px 640px at 70% 58%, #000 22%, transparent 76%);
   mask-image: radial-gradient(880px 640px at 70% 58%, #000 22%, transparent 76%);
}

/* Banner tam genişlik: konteyner sınırlaması kaldırılır */
.home-hero .container-wide {
   display: block;
   max-width: none;
   padding: 0;
}

.hs-track { display: grid; }

/* Görsel slayt: tam genişlik 16:9 banner, fade ile döner */
.hs { position: relative; }
.hs-slide {
   grid-area: 1 / 1;
   overflow: hidden;
   opacity: 0;
   visibility: hidden;
   transition: opacity .7s ease, visibility 0s linear .7s;
   pointer-events: none;
}
.hs-slide.active {
   opacity: 1;
   visibility: visible;
   transition: opacity .6s ease;
   pointer-events: auto;
}

/* Banner ekranı tam doldurur; oran korunur (esneme/bozulma yok),
   ekran oranı farklıysa taşan kenarlar simetrik olarak görünmez kalır */
.hs-slide img {
   display: block;
   width: 100%;
   height: 100vh;
   height: 100svh;
   object-fit: cover;
   user-select: none;
   -webkit-user-drag: none;
}

/* Fare ile kaydırılabilir olduğunu belli eden imleç */
.hs-track { cursor: grab; }
.hs-track:active { cursor: grabbing; }

/* Kontrollerin okunması için görselin altına yumuşak karartma */
.hs::after {
   content: "";
   position: absolute;
   left: 0; right: 0; bottom: 0;
   height: clamp(90px, 14vh, 140px);
   background: linear-gradient(transparent, rgba(2, 10, 22, .55));
   pointer-events: none;
}

/* Kontroller: görselin üzerine bindirilmiş alt şerit */
.hs-controls {
   position: absolute;
   left: 0; right: 0;
   bottom: clamp(16px, 3vh, 30px);
   z-index: 5;
   display: flex;
   justify-content: space-between;
   align-items: center;
   gap: 18px;
   padding-inline: clamp(20px, 4vw, 48px);
}
.hs-dots { display: flex; gap: 10px; }
.hs-dot {
   width: 34px; height: 4px;
   border-radius: 2px;
   background: rgba(255, 255, 255, .35);
   transition: background .3s var(--ease);
}
.hs-dot:hover { background: rgba(255, 255, 255, .6); }
.hs-dot[aria-current="true"] { background: var(--color-accent); }

.hs-arrows { display: flex; gap: 10px; }
.hs-arrow {
   width: 46px; height: 46px;
   display: flex; align-items: center; justify-content: center;
   border: 1px solid rgba(255, 255, 255, .28);
   border-radius: 50%;
   color: #fff;
   transition: background .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease);
}
.hs-arrow:hover { background: #fff; color: var(--color-primary-dark); border-color: #fff; }
.hs-arrow .icon { font-size: 18px; }
.hs-prev .icon { transform: rotate(180deg); }

@media (max-width: 991px) {
   .hero-actions .btn { flex: 1 1 180px; }
}

@media (max-width: 560px) {
   .hs-dot { width: 26px; }
   .hs-arrow { width: 40px; height: 40px; }
}

/* ---- Ürün vitrini: editoryal, kartsız ---- */
.sc-featured {
   display: grid;
   grid-template-columns: minmax(0, 58fr) minmax(0, 42fr);
   gap: clamp(28px, 4.5vw, 80px);
   align-items: center;
   border-top: 1px solid var(--color-border);
   padding-block: clamp(30px, 4vw, 60px);
}
.sc-media img { width: 100%; object-fit: contain; }

.sc-cat {
   font-size: 12.5px;
   font-weight: 800;
   letter-spacing: .14em;
   text-transform: uppercase;
   color: var(--color-accent);
}
.sc-info h3 {
   font-size: clamp(30px, 3.2vw, 46px);
   letter-spacing: -.025em;
   margin: 8px 0 14px;
}
.sc-info > p { color: var(--color-muted); max-width: 46ch; }

.sc-specs { margin: 26px 0 30px; }
.sc-specs > div {
   display: flex;
   justify-content: space-between;
   align-items: baseline;
   gap: 20px;
   padding: 13px 2px;
   border-top: 1px solid var(--color-border);
}
.sc-specs > div:last-child { border-bottom: 1px solid var(--color-border); }
.sc-specs dt { color: var(--color-muted); font-size: 15px; font-weight: 600; }
.sc-specs dd { margin: 0; font-weight: 800; font-size: 16.5px; letter-spacing: -.01em; color: var(--color-primary-dark); }

.sc-row {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   border-top: 1px solid var(--color-border);
}
.sc-item {
   position: relative;
   display: flex;
   flex-direction: column;
   padding: clamp(26px, 3vw, 46px) clamp(20px, 2.6vw, 44px) clamp(24px, 2.6vw, 38px);
   border-left: 1px solid var(--color-border);
   border-radius: var(--radius-md);
   transition: background .3s var(--ease);
}
.sc-item:hover { background: var(--color-surface); }
.sc-item:first-child { border-left: 0; padding-left: 0; }
.sc-item:last-child { padding-right: 0; }
.sc-item img {
   height: clamp(150px, 13vw, 200px);
   width: auto;
   max-width: 100%;
   margin: 0 auto 24px;
   object-fit: contain;
   transition: transform .45s var(--ease);
}
.sc-item:hover img { transform: scale(1.045); }
/* .stretch overlay'i span'ın kendi hover'ını engeller; ok animasyonu kart hover'ına bağlanır */
.sc-item:hover .link-arrow { color: var(--color-accent); }
.sc-item:hover .link-arrow .icon,
.sector-card:hover .link-arrow .icon { transform: translateX(4px); }
.sc-item h3 { font-size: 23px; letter-spacing: -.02em; margin-bottom: 4px; }
.sc-item .sc-cap { color: var(--color-muted); font-size: 15px; font-weight: 600; }
.sc-item .link-arrow { margin-top: 18px; font-size: 15.5px; }
.sc-item .stretch { position: absolute; inset: 0; z-index: 2; }

@media (max-width: 860px) {
   .sc-featured { grid-template-columns: 1fr; gap: 20px; }
   .sc-row { grid-template-columns: 1fr; }
   .sc-item { border-left: 0; border-top: 1px solid var(--color-border); padding-inline: 0; }
   .sc-item:first-child { border-top: 0; }
}


/* ---- Ürün kart slider'ı (anasayfa "Ürün Ailemiz") ----
   Kartlar yatay kayar (scroll-snap); oklar bir kart genişliği kaydırır. */
.pc-track {
   display: grid;
   grid-auto-flow: column;
   grid-auto-columns: calc((100% - 40px) / 3);
   gap: 20px;
   overflow-x: auto;
   scroll-snap-type: x mandatory;
   padding: 8px 2px 12px;
   scrollbar-width: none;
   -ms-overflow-style: none;
}
.pc-track::-webkit-scrollbar { display: none; }
.pc-track:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 4px; border-radius: 8px; }

.pc-card {
   position: relative;
   scroll-snap-align: start;
   display: flex;
   flex-direction: column;
   background: #fff;
   border: 1px solid var(--color-border);
   border-radius: var(--radius-lg);
   overflow: hidden;
   transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
               border-color var(--dur) var(--ease);
}
.pc-card:hover {
   transform: translateY(-4px);
   box-shadow: var(--shadow-hover);
   border-color: #c9d4e6;
}

/* Hover'da cam efekti: şeffaf ton katmanı + eğik ışık yansıması (teknoloji paneliyle aynı) */
.pc-card::before {
   content: "";
   position: absolute;
   top: -20%; bottom: -20%;
   left: 0;
   width: 38%;
   background: linear-gradient(105deg,
      transparent,
      rgba(255, 255, 255, .12) 45%,
      rgba(255, 255, 255, .26) 50%,
      rgba(255, 255, 255, .12) 55%,
      transparent);
   transform: translateX(-160%) skewX(-14deg);
   transition: transform .9s var(--ease);
   pointer-events: none;
   z-index: 2;
}
.pc-card:hover::before { transform: translateX(320%) skewX(-14deg); }
.pc-card::after {
   content: "";
   position: absolute;
   inset: 0;
   background: linear-gradient(155deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .02) 55%, rgba(47, 111, 237, .1));
   opacity: 0;
   transition: opacity var(--dur) var(--ease);
   pointer-events: none;
   z-index: 1;
}
.pc-card:hover::after { opacity: 1; }

.pc-media {
   display: flex;
   align-items: center;
   justify-content: center;
   aspect-ratio: 4 / 3;
   padding: clamp(18px, 2vw, 32px);
   background:
      radial-gradient(320px 220px at 70% 25%, rgba(47, 111, 237, .08), transparent 70%),
      var(--color-surface);
}
.pc-media img {
   width: 100%;
   height: 100%;
   object-fit: contain;
   transition: transform .5s var(--ease);
}
.pc-card:hover .pc-media img { transform: scale(1.05); }

/* Alt bant: tema mavisi gradient üzerinde çip + model adı + ok */
.pc-bar {
   display: grid;
   gap: 10px;
   padding: 16px 18px 18px;
   background: linear-gradient(130deg, var(--color-primary) 0%, var(--color-accent) 100%);
   color: #fff;
}
.pc-chip {
   justify-self: start;
   font-size: 12.5px;
   font-weight: 600;
   letter-spacing: .02em;
   padding: 4px 12px;
   background: rgba(255, 255, 255, .14);
   border: 1px solid rgba(255, 255, 255, .35);
   border-radius: 8px;
}
.pc-title {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 12px;
   font-family: var(--font-display);
   font-size: clamp(18px, 1.5vw, 23px);
   font-weight: 700;
   letter-spacing: -.01em;
}
.pc-arrow {
   flex: none;
   width: 40px; height: 40px;
   display: flex;
   align-items: center;
   justify-content: center;
   border: 1px solid rgba(255, 255, 255, .3);
   border-radius: 50%;
   background: rgba(255, 255, 255, .12);
   color: #fff;
   font-size: 16px;
   transition: background var(--dur) var(--ease), color var(--dur) var(--ease),
               transform var(--dur) var(--ease);
}
.pc-card:hover .pc-arrow { background: #fff; color: var(--color-primary); transform: translate(2px, -2px); }

.pc-controls { display: flex; gap: 10px; margin-top: 22px; }
.pc-btn {
   width: 48px; height: 48px;
   display: flex;
   align-items: center;
   justify-content: center;
   border: 1px solid var(--color-border);
   border-radius: 50%;
   color: var(--color-primary-dark);
   background: #fff;
   transition: background .3s var(--ease), border-color .3s var(--ease),
               color .3s var(--ease), transform .3s var(--ease), opacity .3s var(--ease);
}
.pc-btn:hover {
   background: var(--color-accent);
   border-color: var(--color-accent);
   color: #fff;
   transform: translateY(-2px);
}
.pc-btn:disabled { opacity: .35; pointer-events: none; }
.pc-btn .icon { font-size: 18px; }
.pc-prev .icon { transform: rotate(180deg); }

@media (max-width: 1100px) {
   .pc-track { grid-auto-columns: calc((100% - 20px) / 2); }
}
@media (max-width: 640px) {
   .pc-track { grid-auto-columns: 86%; }
}

/* ---------- Sabit yan iletişim butonları ----------
   Şeffaf cam hap: beyaz zeminde seçilebilmesi için hafif tema mavisi tonda */
.contact-rail {
   position: fixed;
   right: 10px;
   top: 50%;
   transform: translateY(-50%);
   z-index: 90;
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 8px;
   padding: 9px 7px;
   border-radius: 999px;
   background: rgba(25, 71, 139, .16);
   border: 1px solid rgba(25, 71, 139, .14);
   backdrop-filter: blur(10px) saturate(1.3);
   -webkit-backdrop-filter: blur(10px) saturate(1.3);
   box-shadow: 0 10px 28px rgba(4, 12, 24, .16);
}
.contact-rail a {
   width: 42px;
   height: 42px;
   display: flex;
   align-items: center;
   justify-content: center;
   border-radius: 50%;
   background: rgba(11, 31, 58, .5);
   color: #fff;
   font-size: 17px;
   transition: background .3s var(--ease), transform .3s var(--ease);
}
.contact-rail a:hover { background: var(--color-accent); color: #fff; transform: scale(1.08); }
.contact-rail .cr-wa { background: #25d366; }
.contact-rail .cr-wa:hover { background: #1ebe5d; }
@media (max-width: 767px) {
   .contact-rail { top: auto; bottom: 14px; transform: none; gap: 7px; padding: 8px 6px; }
   .contact-rail a { width: 38px; height: 38px; font-size: 15.5px; }
}

/* ============================================================
   GRAFİK DİL — teknik çizim / plaka estetiği
   ============================================================ */

/* Devasa anahat bölüm numaraları */
.container { position: relative; }
.sec-num {
   position: absolute;
   top: -18px;
   right: clamp(20px, 4vw, 48px);
   z-index: 0;
   font-family: var(--font-display);
   font-size: clamp(72px, 10vw, 150px);
   font-weight: 700;
   line-height: 1;
   color: transparent;
   -webkit-text-stroke: 1px rgba(16, 20, 24, .12);
   pointer-events: none;
   user-select: none;
}
.section-dark .sec-num, .cta-block .sec-num { -webkit-text-stroke: 1px rgba(255, 255, 255, .10); }

/* Hero ölçü çizgisi: makine altında Ø aralığı */
.hh-dim {
   position: relative;
   z-index: 3;
   display: flex;
   align-items: center;
   gap: 14px;
   margin-top: clamp(10px, 1.6vh, 20px);
   color: var(--color-on-dark-muted);
   font-size: 13px;
   font-weight: 700;
   letter-spacing: .08em;
}
.hh-dim i {
   flex: 1;
   height: 1px;
   background: rgba(255, 255, 255, .28);
   position: relative;
}
.hh-dim i::before, .hh-dim i::after {
   content: "";
   position: absolute;
   top: -5px;
   width: 1px; height: 11px;
   background: rgba(255, 255, 255, .38);
}
.hh-dim i::before { left: 0; }
.hh-dim i::after { right: 0; }

/* Makine plakası etiketi */
.hh-plate {
   margin: 0;
   display: inline-block;
   border: 1px solid rgba(255, 255, 255, .22);
   border-radius: 8px;
   padding: 9px 16px;
   font-size: 12px !important;
   font-weight: 700;
   letter-spacing: .14em;
   text-transform: uppercase;
   color: var(--color-on-dark-muted);
}

.home-hero .container-wide { position: relative; }

/* Testere bıçağı şeması motifi (yavaş döner) */
.blade-motif {
   position: absolute;
   right: -120px;
   top: 50%;
   width: min(38vw, 460px);
   height: min(38vw, 460px);
   margin-top: max(-19vw, -230px);
   fill: none;
   stroke: rgba(255, 255, 255, .09);
   animation: blade-spin 70s linear infinite;
   pointer-events: none;
}
@keyframes blade-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .blade-motif { animation: none; } }
@media (max-width: 767px) { .blade-motif { display: none; } }

/* Bölüm numarası dark zeminde de dursun diye z-index güvence */
.section > .container > *:not(.sec-num) { position: relative; z-index: 1; }

/* ============================================================
   FOTOĞRAF SLOTLARI — assets/images/fotograf/ (bkz. OKU-BENI.txt)
   Dosya eklendiğinde JS slotu otomatik doldurur (.has-photo).
   ============================================================ */
.photo-slot {
   position: relative;
   display: flex;
   align-items: center;
   justify-content: center;
   background-color: var(--color-surface);
   background-size: cover;
   background-position: center;
   border: 1px solid var(--color-border);
   border-radius: var(--radius-md);
   overflow: hidden;
   min-height: 220px;
}
.photo-slot .ph-info {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 8px;
   text-align: center;
   padding: 26px;
   color: var(--color-muted);
}
.photo-slot .ph-info .icon { font-size: 26px; opacity: .55; }
.photo-slot .ph-info strong {
   font-size: 12px;
   font-weight: 800;
   letter-spacing: .14em;
   text-transform: uppercase;
   color: var(--color-ink-2);
}
.photo-slot .ph-info span { font-size: 12.5px; letter-spacing: .02em; }
.photo-slot .ph-info code {
   font-family: ui-monospace, "SF Mono", Menlo, monospace;
   font-size: 12px;
   background: #fff;
   border: 1px solid var(--color-border);
   border-radius: 6px;
   padding: 3px 8px;
}
.photo-slot.has-photo .ph-info { display: none; }
.photo-slot.has-photo { border-color: transparent; }

/* Bölüm görsel slotları (hakkımızda / üretim / kalite) */
.media-photo { aspect-ratio: 16 / 10; width: 100%; }

/* Atölye foto şeridi */
.ps-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.ps-grid .photo-slot { aspect-ratio: 4 / 3; min-height: 0; }
@media (max-width: 767px) { .ps-grid { grid-template-columns: 1fr; } }

/* Hero fotoğraf zemini: dosya eklenince görünür, lacivert örtüyle karışır */
.hero-photo {
   position: absolute;
   inset: 0;
   z-index: 0;
   background-size: cover;
   background-position: center;
   opacity: 0;
   transition: opacity .8s var(--ease);
}
.hero-photo.has-photo { opacity: 1; }
.hero-photo.has-photo::after {
   content: "";
   position: absolute;
   inset: 0;
   background: linear-gradient(100deg, rgba(7, 24, 44, .92) 30%, rgba(7, 24, 44, .55) 100%);
}
.home-hero .container-wide { z-index: 2; }

/* Sektör kartları: fotoğraf gelirse koyu harmanla */
.sector-card.has-photo {
   background-size: cover;
   background-position: center;
   background-color: rgba(7, 24, 44, .82);
   background-blend-mode: multiply;
}
.sector-card.has-photo::before { opacity: .25; }

/* İç sayfa banner fotoğrafı: sayfa-<ad>.jpg yoksa sayfa-arkaplan.jpg kullanılır */
.page-hero, .product-hero { position: relative; }
.page-hero-photo {
   position: absolute;
   inset: 0;
   z-index: 0;
   background-size: cover;
   background-position: center;
   opacity: 0;
   transition: opacity .8s var(--ease);
}
.page-hero-photo.has-photo { opacity: 1; }
.page-hero-photo.has-photo::after {
   content: "";
   position: absolute;
   inset: 0;
   background: linear-gradient(100deg, rgba(7, 24, 44, .92) 25%, rgba(7, 24, 44, .62) 100%);
}
.page-hero .container { position: relative; z-index: 2; }

@media (max-width: 767px) {
   :root { --header-h: 100px; }
}
@media (max-width: 560px) {
   :root { --header-h: 66px; }
}


/* Teknoloji bölümü: makine görselinin arkasından vuran tema mavisi spot ışık —
   ürün sahneye çıkar, zeminin kalanı sade koyu kalır */
.home-tech {
   position: relative;
   overflow: hidden;
}
.home-tech::before {
   content: "";
   position: absolute;
   top: -4%;
   right: -6%;
   width: min(50vw, 740px);
   aspect-ratio: 1;
   background: radial-gradient(circle,
      rgba(47, 111, 237, .38),
      rgba(47, 111, 237, .14) 45%,
      transparent 68%);
   filter: blur(28px);
   pointer-events: none;
}
.home-tech > .container { z-index: 1; }

/* Teknoloji bölümü özellik tablosu (koyu zemin):
   "11+ Yıllık Tecrübe" bloğuyla aynı dil — sol aksan çizgili editoryal maddeler */
.tg {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 24px 28px;
   margin-top: 26px;
}
.tg > div { padding-left: 16px; border-left: 3px solid var(--color-accent); }

/* Teknoloji tanıtım metni: "11+" bloğuyla aynı sol aksan çizgisi */
.tech-intro {
   padding-left: 20px;
   border-left: 3px solid var(--color-accent);
}
.tg dt { font-size: 15px; font-weight: 700; color: #fff; margin-bottom: 4px; }
.tg dd { margin: 0; font-size: 14px; line-height: 1.55; color: var(--color-on-dark-muted); }
@media (max-width: 560px) { .tg { grid-template-columns: 1fr; } }