/* istanbulanahtar.css — İstanbul Elektronik Anahtar proje stilleri (tek dosya).
   Her BÖLÜM eski dosyasının adını taşır. "Kapsam" satırı olan bölümler yalnızca
   o sayfalarda geçerlidir: seçiciler :where(html.p-<sayfa>) ile sınırlandırılmıştır.
   :where() özgüllük eklemez; <html> etiketindeki p-<sayfa> sınıfını silmeyin. */

/* ============================================================
   BÖLÜM: home  (eski: assets/css/home.css)
   Kapsam: p-index
   ============================================================ */
:root:where(.p-index){
  /* Açık tema — istanbulanahtar.com paleti */
  --bg: #ffffff;
  --bg-soft: #f5f8fc;
  --panel: #ffffff;
  --panel-soft: #edf4fb;
  --line: rgba(13, 71, 161, 0.14);
  --line-strong: rgba(13, 71, 161, 0.28);
  --text: #0f172a;
  --muted: #526276;
  --dim: #4a5568;
  /* marka: koyu kobalt mavi */
  --red: #0d47a1;
  --red-dark: #093372;
  --red-solid: #0d47a1;
  --accent: #0d47a1;
  --accent-soft: rgba(13, 71, 161, 0.09);
  --blue-soft: #eaf2fb;
  --blue-pale: #f4f8fd;
  --on-blue: #ffffff;
  --shadow: 0 20px 60px rgba(13, 71, 161, 0.1);
  --yellow: #fbbd00;
  --display: "Plus Jakarta Sans", "Helvetica Neue", Arial, sans-serif;
  --body: "Plus Jakarta Sans", "Helvetica Neue", Arial, sans-serif;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* Ortak bileşen köprüsü — site.css adları home.css değerlerine bağlanır. */
:root:where(.p-index){
  --white: var(--text);
  --bg2: var(--bg-soft);
  --panel2: var(--panel-soft);
  --line2: var(--line-strong);
  --red2: var(--red-dark);
  --font-display: var(--display);
  --font-body: var(--body);
}

:where(html.p-index) *,*:where(.p-index){
  box-sizing: border-box;
}

html:where(.p-index){
  scroll-behavior: smooth;
  background: var(--bg);
}

:where(html.p-index) body{
  margin: 0;
  overflow-x: hidden;
  background: var(--bg);
  color: var(--text);
  font-family: var(--body);
  font-size: 18px;
  -webkit-font-smoothing: antialiased;
}

:where(html.p-index) body:before{
  content: "";
  position: fixed;
  inset: 0;
  z-index: 999;
  pointer-events: none;
  opacity: 0.018;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.78' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

:where(html.p-index) a{
  color: inherit;
  text-decoration: none;
}

:where(html.p-index) button{
  color: inherit;
  font: inherit;
}

:where(html.p-index) img{
  display: block;
  max-width: 100%;
}

:where(html.p-index) .i-nav{
  position: fixed;
  z-index: 150;
  top: 0;
  left: 0;
  width: 100%;
  height: 82px;
  padding: 0 clamp(24px, 5vw, 78px);
  display: grid;
  grid-template-columns: 270px 1fr 270px;
  align-items: center;
  transition:
    background 0.45s,
    border-color 0.45s,
    transform 0.45s var(--ease);
}

:where(html.p-index) .i-nav.scrolled{
  background: rgba(255, 255, 255, 0.9);
  border-bottom: 1px solid rgba(13, 71, 161, 0.08);
  backdrop-filter: blur(18px);
}

:where(html.p-index) .i-logo{
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 14px;
}

:where(html.p-index) .i-logo img{
  width: 90px;
  height: 31px;
  object-fit: contain;
}

:where(html.p-index) .i-logo span{
  max-width: 104px;
  color: #21282e;
  font-size: 12px;
  line-height: 1.3;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

:where(html.p-index) .i-nav-links{
  display: flex;
  justify-content: center;
  gap: clamp(18px, 2.2vw, 34px);
}

:where(html.p-index) .i-nav-links a{
  position: relative;
  color: #3d4954;
  font-size: 15px;
  transition: color 0.25s;
}

:where(html.p-index) .i-nav-links a:after{
  content: "";
  position: absolute;
  left: 0;
  bottom: -9px;
  width: 100%;
  height: 1px;
  background: var(--red);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.35s var(--ease);
}

:where(html.p-index) .i-nav-links a:hover{
  color: #1e2430;
}

:where(html.p-index) .i-nav-links a:hover:after{
  transform: scaleX(1);
  transform-origin: left;
}

:where(html.p-index) .i-mobile-only{
  display: none;
}

:where(html.p-index) .i-nav-actions{
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 22px;
}

:where(html.p-index) .i-language{
  color: #4f5f6e;
  font-size: 14px;
}

:where(html.p-index) .i-language b{
  color: var(--red);
}

:where(html.p-index) .i-nav-cta{
  padding: 11px 16px;
  border: 1px solid rgba(13, 71, 161, 0.17);
  border-radius: 100px;
  font-size: 14px;
  transition: 0.3s;
}

:where(html.p-index) .i-nav-cta:hover{
  border-color: var(--red);
  background: var(--red);
}

:where(html.p-index) .i-menu{
  display: none;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line);
  background: transparent;
}

:where(html.p-index) .i-menu span{
  display: block;
  width: 18px;
  height: 1px;
  margin: 6px auto;
  background: #1e2430;
  transition: 0.3s;
}

:where(html.p-index) .i-kicker{
  color: var(--red);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

/* Hero — long scrub stage */
:where(html.p-index) .i-hero{
  position: relative;
  height: 300vh;
  min-height: 2100px;
}

:where(html.p-index) .i-hero-stage{
  --hero-progress: 0;
  position: sticky;
  top: 0;
  height: 100vh;
  min-height: 700px;
  overflow: hidden;
  background:
    radial-gradient(
      circle at 70% 55%,
      rgba(13, 71, 161, 0.18),
      transparent 33%
    ),
    linear-gradient(145deg, #f7f7f7, #fcfcfd 70%);
}

/* Hero arka plan: tam ekran urun gorseli + bulaniklik + vignette
   (kaydirma ilerledikce netlesir/yakinlasir) */
:where(html.p-index) .i-hero-bg{
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background:
    radial-gradient(
      ellipse 70% 55% at 50% 82%,
      rgba(13, 71, 161, 0.1),
      transparent 62%
    ),
    linear-gradient(160deg, #ffffff 0%, #f7f9fc 58%, #eef3f9 100%);
}

:where(html.p-index) .i-hero-bg img{
  /* urunun tamami gorunsun: kirpilmaz, sahnenin alt yarisina oturur */
  position: absolute;
  left: 50%;
  bottom: 0;
  width: min(96vw, 1180px);
  height: auto;
  max-height: 74vh;
  object-fit: contain;
  object-position: center bottom;
  transform: translateX(-50%)
    scale(calc(1.05 - var(--hero-progress) * 0.05));
  transform-origin: center bottom;
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0%,
    #ffffff 9%,
    #ffffff 91%,
    transparent 100%
  );
  mask-image: linear-gradient(
    to right,
    transparent 0%,
    #ffffff 9%,
    #ffffff 91%,
    transparent 100%
  );
  filter: contrast(0.98) saturate(1.02) brightness(1.06);
  will-change: transform;
}

:where(html.p-index) .i-hero-blur{
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  backdrop-filter: blur(26px) saturate(1.1);
  -webkit-backdrop-filter: blur(26px) saturate(1.1);
  /* urun ortaya cikarken bulaniklik cekilir */
  opacity: max(0, calc(1 - var(--hero-progress) * 2.1));
}

/* ara kademe: tam netlige gecmeden once yumusak bir hafif bulaniklik */
:where(html.p-index) .i-hero-blur-soft{
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);
  /* kaydirma ilerledikce tamamen cekilir; urun son karede net kalir */
  opacity: max(0, calc(1 - var(--hero-progress) * 2.6));
}

:where(html.p-index) .i-hero-vignette{
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(
      ellipse at center,
      transparent 0%,
      rgba(255, 255, 255, calc(0.55 - var(--hero-progress) * 0.3)) 100%
    ),
    linear-gradient(
      to bottom,
      rgba(255, 255, 255, 0.55) 0%,
      transparent 26%,
      transparent 64%,
      rgba(255, 255, 255, 0.8) 100%
    );
}

:where(html.p-index) .i-hero-scrim{
  z-index: 3;
  opacity: clamp(.44, calc((var(--hero-progress) - .52) * 3.4), 1);
}

/* ust ortadaki kucuk kaydirma noktasi */
:where(html.p-index) .i-scroll-dot{
  position: absolute;
  z-index: 6;
  left: 50%;
  top: clamp(104px, 15vh, 150px);
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(13, 71, 161, 0.32);
  border-radius: 50%;
  transform: translateX(-50%);
  opacity: calc(1 - var(--hero-progress) * 2.2);
  transition: border-color 0.3s var(--ease);
}

:where(html.p-index) .i-scroll-dot i{
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #1e2430;
  animation: i-dot-pulse 2.4s ease-in-out infinite;
}

:where(html.p-index) .i-scroll-dot:hover{
  border-color: var(--red);
}

@keyframes i-dot-pulse {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.45;
    transform: scale(0.8);
  }
}

:where(html.p-index) .i-grid-lines{
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: 0.07;
  background:
    linear-gradient(
      90deg,
      transparent 49.85%,
      rgba(13, 71, 161, 0.08) 50%,
      transparent 50.15%
    ),
    linear-gradient(
      0deg,
      transparent 49.85%,
      rgba(13, 71, 161, 0.05) 50%,
      transparent 50.15%
    );
  background-size: 160px 160px;
  mask-image: radial-gradient(circle at 70% 50%, #ffffff, transparent 68%);
}

:where(html.p-index) .i-hero-glow{
  position: absolute;
  left: 57%;
  top: 51%;
  width: 700px;
  height: 700px;
  border-radius: 50%;
  z-index: 1;
  background: radial-gradient(circle, rgba(13, 71, 161, 0.16), transparent 66%);
  filter: blur(25px);
  transform: translate(-50%, -50%);
}

:where(html.p-index) .i-hero-copy{
  position: absolute;
  z-index: 4;
  left: clamp(36px, 7vw, 110px);
  bottom: clamp(70px, 11vh, 120px);
  width: min(760px, 59vw);
  transform: translateY(calc(var(--hero-progress) * -28px));
  opacity: calc(1 - var(--hero-progress) * 1.45);
}

:where(html.p-index) .i-hero-copy h1{
  margin: 18px 0 30px;
  font-family: var(--display);
  font-size: clamp(68px, 7.6vw, 118px);
  font-weight: 500;
  line-height: 1.06;
  letter-spacing: -0.0406em;
  text-transform: uppercase;
}

:where(html.p-index) .i-hero-copy h1 > span{
  display: block;
  overflow: hidden;
  width: calc(100% + 0.1em);
  padding-right: 0.1em;
  padding-bottom: 0.14em;
  margin-bottom: -0.14em;
}

:where(html.p-index) .i-hero-copy h1 > span > span{
  display: block;
  transform: translateY(112%);
}

:where(html.p-index) .i-hero.title-active .i-hero-copy h1 > span > span{
  animation: i-title-in 1.05s var(--ease) forwards;
}

:where(html.p-index) .i-hero-copy h1 > span:nth-child(2) > span{
  animation-delay: 0.11s;
}

:where(html.p-index) .i-hero-copy h1 > span:nth-child(3) > span{
  animation-delay: 0.22s;
}

:where(html.p-index) .i-hero-copy h1 .accent{
  color: var(--red);
  font-weight: 700;
}

:where(html.p-index) .i-hero-row{
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 45px;
}

:where(html.p-index) .i-hero-row p{
  max-width: 470px;
  margin: 0;
  color: #485764;
  font-size: 18px;
  line-height: 1.75;
}

:where(html.p-index) .i-scroll-hint{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  color: #5b6d7e;
  font-size: 13px;
  letter-spacing: 0.22em;
}

:where(html.p-index) .i-scroll-hint i{
  display: block;
  width: 1px;
  height: 52px;
  background: linear-gradient(var(--red), transparent);
  animation: i-scroll-line 1.8s ease-in-out infinite;
}

/* Hero sonu: ortada buyuk gradyan baslik + hap buton (referans duzeni) */
:where(html.p-index) .i-hero-scrim{
  position: absolute;
  z-index: 5;
  inset: 0;
  opacity: max(0, calc((var(--hero-progress) - 0.6) * 3.4));
  background: linear-gradient(
    to right,
    rgba(255, 255, 255, 0.94) 0%,
    rgba(255, 255, 255, 0.86) 30%,
    rgba(255, 255, 255, 0.5) 52%,
    transparent 70%
  );
  pointer-events: none;
}

:where(html.p-index) .i-hero-hook{
  position: relative;
  z-index: 1;
  max-width: 15ch;
  margin: 0;
  color: var(--text);
  font-family: var(--display);
  font-size: clamp(32px, 4.4vw, 62px);
  font-weight: 600;
  line-height: 1.06;
  letter-spacing: -0.032em;
  text-transform: uppercase;
}

:where(html.p-index) .i-hero-hook b{
  color: var(--red);
  font-weight: 600;
}

:where(html.p-index) .i-hero-end > .i-kicker{
  position: relative;
  z-index: 1;
  margin-bottom: -8px;
}

:where(html.p-index) .i-hero-sub{
  position: relative;
  z-index: 1;
  max-width: 46ch;
  margin: -6px 0 0;
  color: var(--muted);
  font-size: 17px;
  line-height: 1.7;
}

:where(html.p-index) .i-hero-end a,:where(html.p-index) .i-footer-top > a,:where(html.p-index) .i-stack-content a,:where(html.p-index) .i-product-body > a{
  display: inline-flex;
  align-items: center;
  gap: 24px;
  font-size: 17px;
  font-weight: 700;
}

:where(html.p-index) .i-hero-end a{
  position: relative;
  z-index: 1;
  padding: 15px 20px;
  border: 1px solid var(--line);
  border-radius: 100px;
}

:where(html.p-index) .i-hero-end a:hover{
  border-color: var(--red);
  background: var(--red);
}

/* Manifesto */
:where(html.p-index) .i-manifesto{
  min-height: 88vh;
  padding: clamp(120px, 18vh, 210px) max(7vw, 32px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(54px, 8vh, 90px);
  text-align: center;
  background: #fcfcfd;
}

:where(html.p-index) .i-manifesto p{
  max-width: 1180px;
  margin: 0;
  font-family: var(--display);
  font-size: clamp(30px, 3.8vw, 58px);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.0203em;
}

:where(html.p-index) .i-manifesto-word{
  display: inline-block;
  white-space: nowrap;
}

:where(html.p-index) .i-manifesto-char{
  display: inline;
  color: #1c2126;
  opacity: 0;
  transition: opacity 0.12s linear;
}

:where(html.p-index) .i-manifesto-char.accent{
  color: var(--red);
}

:where(html.p-index) .i-manifesto small{
  align-self: center;
  color: #5a5e63;
  font-size: 14px;
  letter-spacing: 0.2em;
  text-align: center;
}

/* Full screen statement */
:where(html.p-index) .i-statement{
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  background: #f6f7f7;
}

:where(html.p-index) .i-statement > img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: scale(1.07);
  transition: transform 1.8s var(--ease);
}

:where(html.p-index) .i-statement.visible > img{
  transform: scale(1);
}

:where(html.p-index) .i-statement-shade{
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(20, 30, 48, 0.160), rgba(20, 30, 48, 0.042) 69%),
    linear-gradient(0deg, rgba(20, 30, 48, 0.160), transparent 60%);
}

:where(html.p-index) .i-statement-copy{
  position: absolute;
  z-index: 2;
  left: max(7vw, 34px);
  bottom: 10vh;
}

:where(html.p-index) .i-statement-copy h2{
  margin: 20px 0 0;
  font-family: var(--display);
  font-size: clamp(54px, 6.2vw, 98px);
  font-weight: 500;
  line-height: 1.06;
  letter-spacing: -0.0319em;
}

:where(html.p-index) .i-statement-copy h2 span{
  display: block;
  color: #595f63;
}

:where(html.p-index) .i-statement-copy h2 b{
  color: #1e2430;
  font-weight: 600;
}

:where(html.p-index) .i-statement-copy i{
  display: block;
  width: 130px;
  height: 2px;
  margin-top: 34px;
  background: var(--red);
}

/* Product gallery */
:where(html.p-index) .i-products{
  max-width: 1400px;
  margin: auto;
  padding: 140px clamp(24px, 5vw, 72px) 170px;
}

:where(html.p-index) .i-section-head{
  margin-bottom: 58px;
}

:where(html.p-index) .i-section-head h2{
  max-width: 800px;
  margin: 17px 0 0;
  font-family: var(--display);
  font-size: clamp(50px, 5vw, 78px);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.029em;
}

:where(html.p-index) .i-product-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  align-items: start;
}

:where(html.p-index) .i-product-card{
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #f4f5f5;
  opacity: 0;
  transform: translateY(48px);
  transition:
    opacity 0.8s var(--ease),
    transform 0.8s var(--ease),
    border-color 0.35s;
}

:where(html.p-index) .i-product-card:nth-child(2){
  transition-delay: 0.12s;
}

:where(html.p-index) .i-product-card:nth-child(3){
  transition-delay: 0.24s;
}

:where(html.p-index) .i-product-grid.visible .i-product-card{
  opacity: 1;
  transform: none;
}

:where(html.p-index) .i-product-card.featured{
  margin-top: -28px;
}

:where(html.p-index) .i-product-card:hover{
  border-color: rgba(13, 71, 161, 0.6);
}

:where(html.p-index) .i-product-media{
  position: relative;
  display: block;
  height: 430px;
  overflow: hidden;
  background:
    radial-gradient(
      circle at 50% 62%,
      rgba(13, 71, 161, 0.17),
      transparent 38%
    ),
    #f5f5f5;
}

:where(html.p-index) .i-product-media:after{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(20, 30, 48, 0.160), transparent 45%);
}

:where(html.p-index) .i-product-media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition:
    transform 0.75s var(--ease),
    filter 0.5s;
}

:where(html.p-index) .i-product-card:first-child .i-product-media img{
  object-fit: contain;
  padding: 24px;
}

:where(html.p-index) .i-product-card:hover .i-product-media img{
  transform: scale(1.035);
  filter: saturate(1.08);
}

:where(html.p-index) .i-product-media > span{
  position: absolute;
  z-index: 2;
  left: 22px;
  top: 22px;
  padding: 7px 9px;
  border: 1px solid rgba(13, 71, 161, 0.2);
  border-radius: 100px;
  background: rgba(255, 255, 255, 0.9);
  color: #22292f;
  font-size: 13px;
  letter-spacing: 0.15em;
  backdrop-filter: blur(8px);
}

:where(html.p-index) .i-product-body{
  min-height: 220px;
  padding: 28px;
}

:where(html.p-index) .i-product-body h3{
  margin: 0;
  font-family: var(--display);
  font-size: 27px;
}

:where(html.p-index) .i-product-body p{
  min-height: 50px;
  margin: 12px 0 30px;
  color: var(--muted);
  font-size: 17px;
  line-height: 1.65;
}

:where(html.p-index) .i-product-body > a{
  width: max-content;
  padding: 11px 15px;
  border: 1px solid var(--line);
  border-radius: 100px;
  transition: 0.3s;
}

:where(html.p-index) .i-product-body > a:hover{
  border-color: var(--red);
  background: var(--red);
}

/* Sticky technical showcase */
:where(html.p-index) .i-showcase{
  height: 280vh;
  min-height: 2100px;
  background: #fcfcfd;
}

:where(html.p-index) .i-showcase-sticky{
  --show-progress: 0;
  position: sticky;
  top: 0;
  height: 100vh;
  min-height: 720px;
  overflow: hidden;
  padding: 86px max(5vw, 30px) 35px;
}

:where(html.p-index) .i-showcase-head{
  position: relative;
  z-index: 5;
  max-width: 650px;
  margin: 0 auto;
  text-align: center;
}

:where(html.p-index) .i-showcase-head h2{
  margin: 14px 0 0;
  font-family: var(--display);
  font-size: clamp(42px, 4vw, 64px);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.029em;
}

:where(html.p-index) .i-showcase-stage{
  position: relative;
  width: min(1200px, 94vw);
  height: min(620px, 66vh);
  margin: 14px auto 0;
  display: grid;
  grid-template-columns: minmax(180px, 0.5fr) minmax(500px, 1.15fr) minmax(180px, 0.5fr);
  grid-template-rows: 1fr 1fr;
  align-items: center;
  column-gap: clamp(18px, 3vw, 52px);
  transform: scale(calc(0.94 + var(--show-progress) * 0.06));
}

/* cihaz gorseli ortada, kendi kolonunda */
:where(html.p-index) .i-showcase-stage > img{
  grid-column: 2;
  grid-row: 1 / span 2;
  justify-self: center;
  align-self: center;
  width: 100%;
  max-width: 560px;
  max-height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 24px 48px rgba(20, 30, 48, 0.160));
}

/* isaret cizgileri gorselin ustunde */
:where(html.p-index) .i-showcase-stage > svg{
  position: absolute;
  inset: 0;
  z-index: 3;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

:where(html.p-index) .i-showcase-stage line{
  stroke: var(--red);
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
  opacity: max(0.8, var(--show-progress));
}

:where(html.p-index) .i-dot{
  position: absolute;
  z-index: 4;
  width: 12px;
  height: 12px;
  margin: -6px 0 0 -6px;
  border: 2px solid var(--red);
  border-radius: 50%;
  background: #f1f2f3;
  box-shadow:
    0 0 0 5px rgba(13, 71, 161, 0.16),
    0 0 14px rgba(13, 71, 161, 0.55);
  opacity: max(0.9, var(--show-progress));
}

/* noktalar cihazdaki gerçek işlev bölgelerine oturur */
:where(html.p-index) .i-dot.d1{
  left: 37%;
  top: 49%;
}
:where(html.p-index) .i-dot.d2{
  left: 37%;
  top: 64%;
}
:where(html.p-index) .i-dot.d3{
  left: 61%;
  top: 47%;
}
:where(html.p-index) .i-dot.d4{
  left: 69%;
  top: 54%;
}

:where(html.p-index) .i-callout{
  position: relative;
  z-index: 4;
  width: 100%;
  max-width: 250px;
  opacity: calc(var(--show-progress) * 1.5);
  transform: translateY(calc((1 - var(--show-progress)) * 16px));
  transition: opacity 0.3s linear;
}

:where(html.p-index) .i-callout b{
  display: block;
  color: #1e2430;
  font-family: var(--display);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.015em;
}

/* başlığın üstünde ince kırmızı işaret */
:where(html.p-index) .i-callout b::before{
  content: "";
  display: block;
  width: 26px;
  height: 2px;
  margin-bottom: 12px;
  background: var(--red);
}

:where(html.p-index) .i-callout.c3 b::before,:where(html.p-index) .i-callout.c4 b::before{
  margin-left: auto;
}

:where(html.p-index) .i-callout p{
  margin: 9px 0 0;
  color: #44525e;
  font-size: 15px;
  line-height: 1.65;
}

/* sol sutun: ust ve alt */
:where(html.p-index) .i-callout.c1,:where(html.p-index) .i-callout.c2{
  grid-column: 1;
  justify-self: end;
  text-align: right;
}

:where(html.p-index) .i-callout.c1{
  grid-row: 1;
  align-self: center;
  margin-top: 0;
}

:where(html.p-index) .i-callout.c2{
  grid-row: 2;
  align-self: center;
  margin-bottom: 0;
}

/* sag sutun: ust ve alt */
:where(html.p-index) .i-callout.c3,:where(html.p-index) .i-callout.c4{
  grid-column: 3;
  justify-self: start;
  text-align: left;
}

:where(html.p-index) .i-callout.c3{
  grid-row: 1;
  align-self: center;
  margin-top: 0;
}

:where(html.p-index) .i-callout.c4{
  grid-row: 2;
  align-self: center;
  margin-bottom: 0;
}

/* Full image line */
:where(html.p-index) .i-final-image{
  position: relative;
  min-height: 100vh;
  overflow: hidden;
}

:where(html.p-index) .i-final-image > img{
  position: absolute;
  left: 0;
  top: -5%;
  width: 100%;
  height: 110%;
  object-fit: cover;
  object-position: center;
  transform: translateY(var(--final-y, 0)) scale(1.02);
  transition: transform 0.12s linear;
}

:where(html.p-index) .i-final-image > div{
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(20, 30, 48, 0.160), transparent 70%),
    linear-gradient(0deg, rgba(20, 30, 48, 0.160), transparent 55%);
}

:where(html.p-index) .i-final-image h2{
  position: absolute;
  z-index: 2;
  left: max(8vw, 36px);
  bottom: 12vh;
  margin: 0;
  font-family: var(--display);
  font-size: clamp(60px, 7vw, 108px);
  font-weight: 500;
  line-height: 1.06;
  letter-spacing: -0.0348em;
}

:where(html.p-index) .i-final-image h2 span{
  display: block;
}

:where(html.p-index) .i-final-image h2 b{
  color: var(--red);
  font-weight: 600;
}

/* Stacked engineering cards */
:where(html.p-index) .i-stack{
  padding: 0 max(2.2vw, 20px) 160px;
  background:
    radial-gradient(
      circle at 50% 15%,
      rgba(13, 71, 161, 0.09),
      transparent 26%
    ),
    #fcfcfd;
}

:where(html.p-index) .i-stack-intro{
  min-height: 92vh;
  max-width: 1100px;
  margin: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
}

:where(html.p-index) .i-stack-intro h2{
  margin: 20px auto;
  font-family: var(--display);
  font-size: clamp(58px, 7vw, 106px);
  font-weight: 500;
  line-height: 1.06;
  letter-spacing: -0.0348em;
}

:where(html.p-index) .i-stack-intro h2 b{
  color: var(--red);
  font-weight: 600;
}

:where(html.p-index) .i-stack-intro p{
  max-width: 690px;
  margin: 0 auto;
  color: var(--muted);
  font-size: 18px;
  line-height: 1.75;
}

:where(html.p-index) .i-stack-deck{
  max-width: 1680px;
  margin: auto;
}

:where(html.p-index) .i-stack-card{
  position: sticky;
  top: 96px;
  height: calc(100vh - 128px);
  min-height: 620px;
  margin-bottom: 14vh;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 1px solid rgba(13, 71, 161, 0.15);
  border-radius: 24px;
  background: #f0f1f1;
  box-shadow: 0 -26px 70px rgba(20, 30, 48, 0.158);
}

:where(html.p-index) .i-stack-card:nth-child(2){
  top: 108px;
}
:where(html.p-index) .i-stack-card:nth-child(3){
  top: 120px;
}
:where(html.p-index) .i-stack-card:nth-child(4){
  top: 132px;
  margin-bottom: 0;
}

:where(html.p-index) .i-stack-visual{
  position: relative;
  overflow: hidden;
  min-height: 100%;
}

:where(html.p-index) .i-stack-visual:after{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(20, 30, 48, 0.160), transparent 45%);
}

:where(html.p-index) .i-stack-visual img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1s var(--ease);
}

:where(html.p-index) .i-stack-card:hover .i-stack-visual img{
  transform: scale(1.025);
}

:where(html.p-index) .i-stack-visual > span{
  position: absolute;
  z-index: 2;
  left: 28px;
  bottom: 26px;
  color: #2f3840;
  font-size: 14px;
  letter-spacing: 0.18em;
}

:where(html.p-index) .i-stack-content{
  padding: clamp(45px, 6vw, 88px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  background:
    radial-gradient(circle at 80% 20%, rgba(13, 71, 161, 0.1), transparent 32%),
    #f0f1f1;
}

:where(html.p-index) .i-stack-content small{
  color: var(--red);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.18em;
}

:where(html.p-index) .i-stack-content h3{
  margin: 22px 0 18px;
  font-family: var(--display);
  font-size: clamp(44px, 4.5vw, 70px);
  line-height: 1.08;
  letter-spacing: -0.0319em;
}

:where(html.p-index) .i-stack-content p{
  max-width: 560px;
  margin: 0;
  color: #50606f;
  font-size: 18px;
  line-height: 1.75;
}

:where(html.p-index) .i-stack-content a{
  width: max-content;
  margin-top: 34px;
  padding: 13px 18px;
  border-radius: 100px;
  background: #1c2126;
  color: #f5f5f5;
  transition: 0.3s;
}

:where(html.p-index) .i-stack-content a:hover{
  background: var(--red);
  color: #1e2430;
}

/* Footer */
:where(html.p-index) .i-footer{
  padding: 130px max(6vw, 28px) 30px;
  border-top: 1px solid var(--line);
  background:
    radial-gradient(
      circle at 72% 18%,
      rgba(13, 71, 161, 0.13),
      transparent 30%
    ),
    #fcfcfd;
}

:where(html.p-index) .i-footer-top{
  max-width: 1060px;
  padding-bottom: 130px;
}

:where(html.p-index) .i-footer-top h2{
  margin: 20px 0 25px;
  font-family: var(--display);
  font-size: clamp(64px, 8vw, 122px);
  font-weight: 500;
  line-height: 1.06;
  letter-spacing: -0.0377em;
}

:where(html.p-index) .i-footer-top h2 b{
  color: var(--red);
  font-weight: 600;
}

:where(html.p-index) .i-footer-top p{
  max-width: 600px;
  color: #4f5f6d;
  font-size: 18px;
  line-height: 1.75;
}

:where(html.p-index) .i-footer-top > a{
  margin-top: 30px;
  padding: 16px 22px;
  border-radius: 100px;
  background: var(--red);
}

:where(html.p-index) .i-footer-grid{
  display: grid;
  grid-template-columns: 1.6fr repeat(3, 0.75fr);
  gap: 60px;
  padding: 65px 0;
  border-top: 1px solid var(--line);
}

:where(html.p-index) .i-footer-brand img{
  width: 104px;
}

:where(html.p-index) .i-footer-brand p{
  max-width: 320px;
  margin: 24px 0;
  color: #4f5f6e;
  font-size: 17px;
  line-height: 1.65;
}

:where(html.p-index) .i-footer-brand > span{
  color: #5c6e7e;
  font-size: 14px;
  letter-spacing: 0.15em;
}

:where(html.p-index) .i-footer-brand i,:where(html.p-index) .i-footer-bottom i{
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 8px;
  border-radius: 50%;
  background: var(--red);
  box-shadow: 0 0 12px var(--red);
}

:where(html.p-index) .i-footer-grid > div:not(:first-child){
  display: flex;
  flex-direction: column;
  gap: 12px;
}

:where(html.p-index) .i-footer-grid > div > b{
  margin-bottom: 10px;
  color: #4f5f6e;
  font-size: 14px;
  letter-spacing: 0.18em;
}

:where(html.p-index) .i-footer-grid > div > a,:where(html.p-index) .i-footer-grid > div > span{
  color: #455360;
  font-size: 17px;
}

:where(html.p-index) .i-footer-grid > div > a:hover{
  color: var(--red);
}

:where(html.p-index) .i-footer-bottom{
  display: flex;
  justify-content: space-between;
  padding-top: 25px;
  border-top: 1px solid var(--line);
  color: #5a5e63;
  font-size: 14px;
  letter-spacing: 0.14em;
}

/* Motion */
@keyframes i-title-in {
  to {
    transform: translateY(0);
  }
}

@keyframes i-scroll-line {
  0%,
  100% {
    transform: scaleY(0.35);
    transform-origin: top;
    opacity: 0.45;
  }
  50% {
    transform: scaleY(1);
    transform-origin: top;
    opacity: 1;
  }
}

@media (max-width: 1100px) {
  :where(html.p-index) .i-nav{
    grid-template-columns: 200px 1fr 200px;
    padding: 0 clamp(16px, 2.5vw, 32px);
  }

  :where(html.p-index) .i-nav-links{
    gap: 14px;
  }

  :where(html.p-index) .i-nav-links a{
    font-size: 13px;
  }

  :where(html.p-index) .i-nav-cta{
    padding: 9px 12px;
    font-size: 12px;
  }

  :where(html.p-index) .i-language{
    font-size: 12px;
  }

  :where(html.p-index) .i-product-media{
    height: 350px;
  }

  :where(html.p-index) .i-showcase-stage{
    width: 94vw;
    grid-template-columns: minmax(150px, 0.5fr) minmax(380px, 1.1fr) minmax(150px, 0.5fr);
    column-gap: clamp(12px, 2vw, 28px);
  }

  :where(html.p-index) .i-showcase-stage > img{
    max-width: 500px;
  }

  :where(html.p-index) .i-callout{
    max-width: 210px;
  }

  :where(html.p-index) .i-callout b{
    font-size: 18px;
  }

  :where(html.p-index) .i-callout p{
    font-size: 14px;
  }
}

@media (max-width: 860px) {
  :where(html.p-index) .i-nav{
    grid-template-columns: 1fr auto;
    height: 76px;
    padding: 0 20px;
  }

  :where(html.p-index) .i-logo span,:where(html.p-index) .i-nav-actions{
    display: none;
  }

  :where(html.p-index) .i-menu{
    display: block;
    position: relative;
    z-index: 3;
  }

  :where(html.p-index) .i-menu.active span:first-child{
    transform: translateY(3.5px) rotate(45deg);
  }

  :where(html.p-index) .i-menu.active span:last-child{
    transform: translateY(-3.5px) rotate(-45deg);
  }

  :where(html.p-index) .i-nav-links{
    position: fixed;
    inset: 0;
    z-index: 2;
    padding: 120px 28px 40px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 24px;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(20px);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-18px);
    transition: 0.4s var(--ease);
  }

  :where(html.p-index) .i-nav-links.open{
    opacity: 1;
    visibility: visible;
    transform: none;
  }

  :where(html.p-index) .i-nav-links a{
    font-family: var(--display);
    font-size: 34px;
    font-weight: 600;
  }

  :where(html.p-index) .i-nav-links .i-mobile-only{
    display: block;
  }

  :where(html.p-index) .i-nav-links .i-mobile-languages{
    margin-top: 8px;
    color: var(--muted);
    font-size: 14px;
    letter-spacing: .14em;
  }

  :where(html.p-index) .i-mobile-languages b{
    color: var(--red);
  }

  :where(html.p-index) .i-hero{
    height: 210vh;
    min-height: 1450px;
  }

  :where(html.p-index) .i-hero-stage{
    min-height: 620px;
  }

  /* dar ekranda urun alt yariya sigsin, metinle cakismasin */
  :where(html.p-index) .i-hero-bg img{
    width: min(104vw, 640px);
    max-height: 46vh;
    bottom: 6vh;
    transform: translateX(-50%)
      scale(calc(1.03 - var(--hero-progress) * 0.03));
  }

  :where(html.p-index) .i-hero-copy{
    left: 22px;
    right: 22px;
    bottom: 86px;
    width: auto;
  }

  :where(html.p-index) .i-hero-copy h1{
    font-size: clamp(54px, 15vw, 78px);
  }

  :where(html.p-index) .i-hero-row{
    align-items: flex-end;
  }

  :where(html.p-index) .i-hero-row p{
    max-width: 300px;
    font-size: 17px;
  }

  :where(html.p-index) .i-hero-end{
    left: 22px;
    right: 22px;
    top: clamp(112px, 15vh, 150px);
    bottom: auto;
    gap: 18px;
  }

  :where(html.p-index) .i-hero-hook{
    max-width: 12ch;
    font-size: clamp(34px, 10vw, 52px);
  }

  :where(html.p-index) .i-hero-sub{
    max-width: 34ch;
    font-size: 16px;
  }

  :where(html.p-index) .i-hero-end a{
    padding: 12px 22px;
  }

  :where(html.p-index) .i-manifesto{
    min-height: 90vh;
  }

  :where(html.p-index) .i-manifesto p{
    font-size: clamp(30px, 7vw, 48px);
  }

  :where(html.p-index) .i-statement{
    min-height: 85vh;
  }

  :where(html.p-index) .i-statement-copy h2{
    font-size: clamp(46px, 11vw, 72px);
  }

  :where(html.p-index) .i-product-grid{
    grid-template-columns: 1fr;
  }

  :where(html.p-index) .i-product-card.featured{
    margin-top: 0;
  }

  :where(html.p-index) .i-product-media{
    height: min(460px, 62vh);
  }

  :where(html.p-index) .i-showcase{
    height: auto;
    min-height: 0;
    padding: 110px 0;
  }

  :where(html.p-index) .i-showcase-sticky{
    position: relative;
    height: auto;
    min-height: 0;
    padding: 0 22px;
  }

  :where(html.p-index) .i-showcase-stage{
    display: block;
    grid-template-columns: none;
    grid-template-rows: none;
    column-gap: 0;
    width: 100%;
    height: auto;
    margin-top: 40px;
    transform: none;
  }

  :where(html.p-index) .i-showcase-stage > img{
    position: relative;
    grid-column: auto;
    grid-row: auto;
    left: auto;
    top: auto;
    width: 100%;
    max-width: none;
    max-height: none;
    transform: none;
    border-radius: 15px;
  }

  :where(html.p-index) .i-showcase-stage > svg,:where(html.p-index) .i-dot{
    display: none;
  }

  :where(html.p-index) .i-callout{
    position: relative;
    grid-column: auto !important;
    grid-row: auto !important;
    justify-self: stretch !important;
    align-self: auto !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    width: auto;
    max-width: none;
    margin: 0 !important;
    padding: 22px 0;
    border-bottom: 1px solid var(--line);
    text-align: left !important;
    opacity: 1;
    transform: none;
  }

  :where(html.p-index) .i-final-image{
    min-height: 82vh;
  }

  :where(html.p-index) .i-final-image h2{
    font-size: clamp(52px, 13vw, 78px);
  }

  :where(html.p-index) .i-stack{
    padding-bottom: 100px;
  }

  :where(html.p-index) .i-stack-intro{
    min-height: 75vh;
  }

  :where(html.p-index) .i-stack-card,:where(html.p-index) .i-stack-card:nth-child(n){
    position: relative;
    top: auto;
    height: auto;
    min-height: 0;
    margin-bottom: 22px;
    grid-template-columns: 1fr;
    border-radius: 18px;
  }

  :where(html.p-index) .i-stack-visual{
    min-height: 380px;
  }

  :where(html.p-index) .i-stack-card.reverse .i-stack-content{
    order: 2;
  }

  :where(html.p-index) .i-stack-card.reverse .i-stack-visual{
    order: 1;
  }

  :where(html.p-index) .i-stack-content{
    min-height: 420px;
    padding: 44px 28px;
  }

  :where(html.p-index) .i-footer-grid{
    grid-template-columns: 1.2fr 1fr;
  }
}

@media (max-width: 560px) {
  :where(html.p-index) .i-logo img{
    width: 82px;
  }

  :where(html.p-index) .i-hero-copy h1{
    font-size: 53px;
    line-height: 1.06;
  }

  :where(html.p-index) .i-hero-row{
    display: block;
  }

  :where(html.p-index) .i-scroll-hint{
    display: none;
  }

  :where(html.p-index) .i-manifesto,:where(html.p-index) .i-products{
    padding-left: 22px;
    padding-right: 22px;
  }

  :where(html.p-index) .i-products{
    padding-top: 100px;
    padding-bottom: 110px;
  }

  :where(html.p-index) .i-section-head h2{
    font-size: 46px;
  }

  :where(html.p-index) .i-product-media{
    height: 320px;
  }

  :where(html.p-index) .i-product-body{
    min-height: 205px;
    padding: 24px;
  }

  :where(html.p-index) .i-statement-copy{
    left: 22px;
    right: 22px;
    bottom: 8vh;
  }

  :where(html.p-index) .i-statement-copy h2{
    font-size: 48px;
  }

  :where(html.p-index) .i-showcase-head h2{
    font-size: 42px;
  }

  :where(html.p-index) .i-stack{
    padding-left: 12px;
    padding-right: 12px;
  }

  :where(html.p-index) .i-stack-intro{
    padding: 0 14px;
  }

  :where(html.p-index) .i-stack-intro h2{
    font-size: 52px;
  }

  :where(html.p-index) .i-stack-visual{
    min-height: 290px;
  }

  :where(html.p-index) .i-stack-content{
    min-height: 390px;
  }

  :where(html.p-index) .i-stack-content h3{
    font-size: 44px;
  }

  :where(html.p-index) .i-footer{
    padding: 100px 22px 25px;
  }

  :where(html.p-index) .i-footer-top{
    padding-bottom: 90px;
  }

  :where(html.p-index) .i-footer-top h2{
    font-size: 57px;
  }

  :where(html.p-index) .i-footer-grid{
    grid-template-columns: 1fr;
    gap: 42px;
  }

  :where(html.p-index) .i-footer-bottom{
    gap: 30px;
    line-height: 1.5;
  }
}









@media (prefers-reduced-motion: reduce) {
  html:where(.p-index){
    scroll-behavior: auto;
  }

  :where(html.p-index) *,*:where(.p-index),:where(html.p-index) *:before,*:before:where(.p-index),:where(html.p-index) *:after,*:after:where(.p-index){
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  :where(html.p-index) .i-hero-copy,:where(html.p-index) .i-showcase-stage{
    transform: none !important;
    opacity: 1 !important;
  }

  :where(html.p-index) .i-hero-bg img{
    transform: none !important;
  }

  :where(html.p-index) .i-hero-end{
    transform: none !important;
  }

  :where(html.p-index) .i-manifesto-char{
    opacity: 1 !important;
  }

  
}

/* =========================================================
   INFORMATION ARCHITECTURE 2026 — HOMEPAGE NAVIGATION
   ========================================================= */
:where(html.p-index) .i-nav-links{
  gap: 6px;
}

:where(html.p-index) .i-nav-links .nav-group{
  position: relative;
}

:where(html.p-index) .i-nav-links .nav-trigger{
  position: relative;
  min-height: 44px;
  padding: 0 17px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  border: 0;
  background: transparent;
  color: #364657;
  font-family: var(--display);
  font-size: 14px;
  font-weight: 650;
  cursor: pointer;
}

:where(html.p-index) .i-nav-links .nav-direct{
  position: relative;
  min-height: 44px;
  padding: 0 17px;
  display: inline-flex;
  align-items: center;
  color: #364657;
  font-family: var(--display);
  font-size: 14px;
  font-weight: 650;
  white-space: nowrap;
}

:where(html.p-index) .i-nav-links .nav-direct::after{
  left: 17px;
  right: 17px;
  bottom: 2px;
  width: auto;
  height: 2px;
}

:where(html.p-index) .i-nav-links .nav-direct:hover{
  color: var(--red);
}

:where(html.p-index) .i-nav-links .nav-trigger::after{
  content: "";
  position: absolute;
  left: 17px;
  right: 17px;
  bottom: 2px;
  height: 2px;
  border-radius: 2px;
  background: var(--red);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .3s var(--ease);
}

:where(html.p-index) .i-nav-links .nav-group.open > .nav-trigger,:where(html.p-index) .i-nav-links .nav-trigger:hover{
  color: var(--red);
}

:where(html.p-index) .i-nav-links .nav-group.open > .nav-trigger::after{
  transform: scaleX(1);
  transform-origin: left;
}

:where(html.p-index) .i-nav-links .nav-trigger > i{
  width: 7px;
  height: 7px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform .25s;
}

:where(html.p-index) .i-nav-links .nav-group.open > .nav-trigger > i{
  transform: translateY(2px) rotate(225deg);
}

:where(html.p-index) .i-nav-links .nav-dropdown{
  position: fixed;
  z-index: 155;
  left: 50%;
  top: 80px;
  width: min(860px, calc(100vw - 48px));
  padding: 12px;
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 12px;
  border: 1px solid rgba(13,71,161,.14);
  border-radius: 16px;
  background: rgba(255,255,255,.98);
  box-shadow: 0 24px 75px rgba(20,54,96,.17);
  backdrop-filter: blur(22px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate(-50%, 12px);
  transition: none;
}

:where(html.p-index) .i-nav-links .nav-group.open > .nav-dropdown{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(-50%, 0);
}

:where(html.p-index) .i-nav-links .nav-dropdown-intro{
  min-height: 206px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 12px;
  color: #fff;
  background-image:
    linear-gradient(180deg, rgba(4,24,61,.02) 0%, rgba(4,24,61,.18) 38%, rgba(4,25,66,.96) 78%),
    var(--nav-intro-image),
    linear-gradient(145deg, #eaf3ff, #0d47a1);
  background-size: cover;
  background-position: center;
  box-shadow: inset 0 -1px 0 rgba(255,255,255,.1);
}

:where(html.p-index) .i-nav-links .nav-dropdown-intro small{
  margin-bottom: auto;
  width: max-content;
  padding: 6px 8px;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 999px;
  color: #e3f1ff;
  background: rgba(4,25,66,.48);
  backdrop-filter: blur(8px);
  font-size: 10px;
  font-weight: 750;
  letter-spacing: .18em;
}

:where(html.p-index) .i-nav-links .nav-dropdown-intro b{
  font-size: 23px;
  line-height: 1.08;
  letter-spacing: -.03em;
  text-shadow: 0 2px 18px rgba(0,0,0,.35);
}

:where(html.p-index) .i-nav-links .nav-dropdown-intro span{
  max-width: 22ch;
  margin-top: 7px;
  color: rgba(255,255,255,.82);
  font-size: 12px;
  line-height: 1.45;
  text-shadow: 0 1px 10px rgba(0,0,0,.42);
}

:where(html.p-index) .i-nav-links .nav-dropdown-links{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

@media (min-width: 861px) {
  :where(html.p-index) .i-nav-links .nav-count-2 > .nav-dropdown{
    width: min(720px, calc(100vw - 48px));
    grid-template-columns: 205px 1fr;
  }

  :where(html.p-index) .i-nav-links .nav-count-3 .nav-dropdown-links{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

:where(html.p-index) .i-nav-links .nav-dropdown-links a{
  min-width: 0;
  padding: 19px 42px 19px 18px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border: 1px solid transparent;
  border-radius: 9px;
  color: var(--text);
  background: #f7faff;
  font-size: 14px;
  transition: background .25s, border-color .25s, transform .25s;
}

:where(html.p-index) .i-nav-links .nav-dropdown-links a::after{
  display: none;
}

:where(html.p-index) .i-nav-links .nav-dropdown-links a:hover{
  border-color: rgba(13,71,161,.16);
  background: #edf5ff;
  transform: translateY(-1px);
}

:where(html.p-index) .i-nav-links .nav-dropdown-links a b{
  color: #102038;
  font-size: 14px;
}

:where(html.p-index) .i-nav-links .nav-dropdown-links a small{
  margin-top: 5px;
  color: #718197;
  font-size: 11px;
  line-height: 1.45;
}

:where(html.p-index) .i-nav-links .nav-dropdown-links a i{
  position: absolute;
  right: 17px;
  top: 50%;
  color: var(--red);
  font-style: normal;
  transform: translateY(-50%);
}

:where(html.p-index) .i-nav-links .mobile-nav-tools{
  display: none;
}

@media (min-width: 861px) {
  :where(html.p-index) .i-nav-links .nav-group:hover > .nav-dropdown,:where(html.p-index) .i-nav-links .nav-group:focus-within > .nav-dropdown{
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translate(-50%, 0);
  }
}

@media (max-width: 860px) {
  :where(html.p-index) .i-nav-links.open{
    overflow-y: auto;
    gap: 0;
  }

  :where(html.p-index) .i-nav-links .nav-group{
    width: 100%;
    border-bottom: 1px solid var(--line);
  }

  :where(html.p-index) .i-nav-links .nav-direct{
    width: 100%;
    min-height: 68px;
    padding: 0 2px;
    border-bottom: 1px solid var(--line);
    font-size: 24px;
  }

  :where(html.p-index) .i-nav-links .nav-direct::after{
    display: none;
  }

  :where(html.p-index) .i-nav-links .nav-trigger{
    width: 100%;
    min-height: 68px;
    padding: 0 2px;
    justify-content: space-between;
    font-size: 24px;
  }

  :where(html.p-index) .i-nav-links .nav-trigger::after{
    display: none;
  }

  :where(html.p-index) .i-nav-links .nav-dropdown{
    position: static;
    width: 100%;
    max-height: 0;
    padding: 0;
    display: block;
    overflow: hidden;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
    opacity: 1;
    visibility: visible;
    pointer-events: none;
    transform: none;
    transition: max-height .45s var(--ease), padding .3s;
  }

  :where(html.p-index) .i-nav-links .nav-group.open > .nav-dropdown{
    max-height: 620px;
    padding: 0 0 16px;
    pointer-events: auto;
    transform: none;
  }

  :where(html.p-index) .i-nav-links .nav-dropdown-intro{
    display: none;
  }

  :where(html.p-index) .i-nav-links .nav-dropdown-links{
    grid-template-columns: 1fr;
    gap: 5px;
  }

  :where(html.p-index) .i-nav-links .nav-dropdown-links a{
    min-height: 62px;
    padding: 12px 42px 12px 14px;
    border: 1px solid rgba(13,71,161,.08);
    border-radius: 8px;
    background: #fff;
    font-size: 14px;
  }

  :where(html.p-index) .i-nav-links .nav-dropdown-links a b{
    font-size: 14px;
  }

  :where(html.p-index) .i-nav-links .nav-dropdown-links a small{
    font-size: 11px;
  }

  :where(html.p-index) .i-nav-links .mobile-nav-tools{
    padding-top: 18px;
    display: grid;
    gap: 10px;
  }

  :where(html.p-index) .i-nav-links .mobile-nav-tools > a,:where(html.p-index) .i-nav-links .mobile-nav-tools > div{
    min-height: 67px;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border: 1px solid rgba(13,71,161,.12);
    border-radius: 9px;
    background: #fff;
  }

  :where(html.p-index) .i-nav-links .mobile-nav-tools > a{
    color: var(--red);
  }

  :where(html.p-index) .i-nav-links .mobile-nav-tools > a::after{
    display: none;
  }

  :where(html.p-index) .i-nav-links .mobile-nav-tools b{
    font-size: 14px;
  }

  :where(html.p-index) .i-nav-links .mobile-nav-tools span,:where(html.p-index) .i-nav-links .mobile-nav-tools small{
    margin-top: 4px;
    color: #718197;
    font-size: 11px;
  }
}

/* Yeni mavi ürün fotoğrafına göre hero kontrastı */
:where(html.p-index) .i-hero-blur{
  opacity: max(0, calc(.18 - var(--hero-progress) * .65));
}

:where(html.p-index) .i-hero-blur-soft{
  opacity: max(0, calc(.1 - var(--hero-progress) * .5));
}

:where(html.p-index) .i-hero-scrim{
  opacity: clamp(.68, calc((var(--hero-progress) - .45) * 3.2), 1);
  background: linear-gradient(90deg, #fff 0%, rgba(255,255,255,.96) 30%, rgba(255,255,255,.38) 45%, transparent 58%);
}

:where(html.p-index) .i-audience-card img,:where(html.p-index) .i-statement > img,:where(html.p-index) .i-product-media img,:where(html.p-index) .i-showcase-stage > img,:where(html.p-index) .i-final-image > img,:where(html.p-index) .i-stack-visual img,:where(html.p-index) .i-film-media img{
  filter: hue-rotate(185deg) saturate(.72) contrast(.96);
}

:where(html.p-index) .i-showcase-stage > img,:where(html.p-index) .i-product-card:first-child .i-product-media img{
  filter: hue-rotate(185deg) saturate(.72) contrast(.96) drop-shadow(0 24px 42px rgba(13,71,161,.14));
}

:where(html.p-index) .i-product-card:first-child:hover .i-product-media img{
  filter: hue-rotate(0deg) saturate(1.12) contrast(1.02) drop-shadow(0 24px 42px rgba(218,38,38,.18));
}

@media (max-width: 860px) {
  :where(html.p-index) .i-hero-scrim{
    opacity: .7;
    background: linear-gradient(180deg, #fff 0%, rgba(255,255,255,.96) 54%, rgba(255,255,255,.18) 76%, transparent 100%);
  }
}

/* ═══════════════════════════════════════════════════
   ARAÇ UYUMLULUK MOTORU
   ═══════════════════════════════════════════════════ */
:where(html.p-index) .i-coverage{
  padding: clamp(90px, 12vh, 150px) max(5vw, 24px);
  background: linear-gradient(#f7f7f7, var(--bg) 60%);
  border-top: 1px solid var(--line);
}

:where(html.p-index) .i-coverage-inner{
  max-width: 1180px;
  margin: 0 auto;
}

:where(html.p-index) .i-coverage-head{
  max-width: 720px;
  margin-bottom: 42px;
}

:where(html.p-index) .i-coverage-head h2{
  margin: 16px 0 14px;
  font-family: var(--display);
  font-size: clamp(34px, 4vw, 56px);
  font-weight: 600;
  line-height: 1.06;
  letter-spacing: -0.032em;
}

:where(html.p-index) .i-coverage-head p{
  margin: 0;
  max-width: 56ch;
  color: var(--muted);
  font-size: 17px;
  line-height: 1.7;
}

:where(html.p-index) .i-coverage-form{
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 14px;
}

:where(html.p-index) .i-cov-field{
  flex: 1 1 230px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

:where(html.p-index) .i-cov-field > span{
  color: var(--dim);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.16em;
}

:where(html.p-index) .i-cov-field select{
  min-width: 0;
  width: 100%;
  height: 56px;
  padding: 0 42px 0 16px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: #e7e8e9;
  color: var(--text);
  font-size: 16px;
  appearance: none;
  cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, #50606f 50%),
    linear-gradient(135deg, #50606f 50%, transparent 50%);
  background-position:
    calc(100% - 21px) 25px,
    calc(100% - 15px) 25px;
  background-size:
    6px 6px,
    6px 6px;
  background-repeat: no-repeat;
  transition:
    border-color 0.25s var(--ease),
    background-color 0.25s var(--ease);
}

:where(html.p-index) .i-cov-field select:hover:not(:disabled),:where(html.p-index) .i-cov-field select:focus-visible{
  border-color: var(--red);
  outline: none;
}

:where(html.p-index) .i-cov-field select:disabled{
  opacity: 0.45;
  cursor: not-allowed;
}

:where(html.p-index) .i-cov-field select option{
  background: #ecedee;
  color: var(--text);
}

:where(html.p-index) .i-cov-arrow{
  padding-bottom: 18px;
  color: var(--dim);
  font-size: 18px;
}

/* sonuç kartı: yarı saydam cam */
:where(html.p-index) .i-cov-result{
  margin-top: 26px;
}

:where(html.p-index) .i-cov-card{
  padding: clamp(24px, 3vw, 36px);
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #e7e8e9;
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  animation: i-cov-in 0.45s var(--ease) both;
}

@keyframes i-cov-in {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

:where(html.p-index) .i-cov-status{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
  padding: 8px 14px;
  border-radius: 100px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

:where(html.p-index) .i-cov-status i{
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 4px rgba(13, 71, 161, 0.08);
}

:where(html.p-index) .i-cov-card.is-supported .i-cov-status{
  border: 1px solid rgba(74, 200, 120, 0.4);
  background: rgba(74, 200, 120, 0.1);
  color: #63d68e;
}

:where(html.p-index) .i-cov-card.is-conditional .i-cov-status{
  border: 1px solid rgba(226, 168, 62, 0.42);
  background: rgba(226, 168, 62, 0.1);
  color: #edb954;
}

:where(html.p-index) .i-cov-card.is-planned .i-cov-status{
  border: 1px solid var(--line);
  background: rgba(13, 71, 161, 0.04);
  color: var(--muted);
}

:where(html.p-index) .i-cov-title{
  margin: 0 0 22px;
  font-family: var(--display);
  font-size: clamp(24px, 2.6vw, 34px);
  font-weight: 600;
  letter-spacing: -0.025em;
}

:where(html.p-index) .i-cov-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 22px 30px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
}

:where(html.p-index) .i-cov-grid > div > span{
  display: block;
  margin-bottom: 7px;
  color: var(--dim);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
}

:where(html.p-index) .i-cov-grid > div > b{
  font-size: 16px;
  font-weight: 600;
  line-height: 1.45;
}

:where(html.p-index) .i-cov-hint{
  margin: 0;
  padding: 22px 2px;
  color: var(--dim);
  font-size: 15px;
}

/* ═══════════════════════════════════════════════════
   CANLI YAZILIM EKOSİSTEMİ PANELİ
   ═══════════════════════════════════════════════════ */
:where(html.p-index) .i-live{
  padding: clamp(90px, 12vh, 150px) max(5vw, 24px);
  border-top: 1px solid var(--line);
}

:where(html.p-index) .i-live-inner{
  max-width: 1180px;
  margin: 0 auto;
}

:where(html.p-index) .i-live-head{
  max-width: 720px;
  margin-bottom: 46px;
}

:where(html.p-index) .i-live-badge{
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 7px 13px;
  border: 1px solid rgba(74, 200, 120, 0.4);
  border-radius: 100px;
  background: rgba(74, 200, 120, 0.1);
  color: #63d68e;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.16em;
}

:where(html.p-index) .i-live-badge i{
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #63d68e;
  animation: i-live-pulse 2s ease-in-out infinite;
}

@keyframes i-live-pulse {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.35;
    transform: scale(0.75);
  }
}

:where(html.p-index) .i-live-head h2{
  margin: 18px 0 14px;
  font-family: var(--display);
  font-size: clamp(34px, 4vw, 56px);
  font-weight: 600;
  line-height: 1.06;
  letter-spacing: -0.032em;
}

:where(html.p-index) .i-live-head p{
  margin: 0;
  max-width: 58ch;
  color: var(--muted);
  font-size: 17px;
  line-height: 1.7;
}

:where(html.p-index) .i-live-stats{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1px;
  margin-bottom: 34px;
  border: 1px solid var(--line);
  background: var(--line);
}

:where(html.p-index) .i-live-stat{
  padding: 30px 26px;
  background: var(--bg);
}

:where(html.p-index) .i-live-stat b{
  display: block;
  font-family: var(--display);
  font-size: clamp(38px, 4.4vw, 58px);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.03em;
}

:where(html.p-index) .i-live-stat span{
  display: block;
  margin-top: 10px;
  color: var(--muted);
  font-size: 15px;
}

:where(html.p-index) .i-live-latest{
  margin-bottom: 30px;
  padding: 26px 28px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: #e7e8e9;
}

:where(html.p-index) .i-live-latest .i-live-ver{
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 10px;
}

:where(html.p-index) .i-live-latest b{
  font-family: var(--display);
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.02em;
}

:where(html.p-index) .i-live-latest .i-live-mod{
  color: #39444f;
  font-size: 15px;
}

:where(html.p-index) .i-live-latest .i-live-date{
  margin-left: auto;
  color: var(--dim);
  font-size: 14px;
}

:where(html.p-index) .i-live-latest p{
  margin: 0;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.65;
}

:where(html.p-index) .i-live-feed{
  margin: 0 0 30px;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);
}

:where(html.p-index) .i-live-feed li{
  display: grid;
  grid-template-columns: minmax(190px, 1fr) 110px minmax(240px, 2fr) 110px;
  gap: 18px;
  align-items: baseline;
  padding: 18px 2px;
  border-bottom: 1px solid var(--line);
  font-size: 15px;
}

:where(html.p-index) .i-live-feed .mod{
  font-weight: 600;
}

:where(html.p-index) .i-live-feed .ver{
  color: var(--red);
  font-weight: 700;
}

:where(html.p-index) .i-live-feed .note{
  color: var(--muted);
  line-height: 1.55;
}

:where(html.p-index) .i-live-feed .date{
  color: var(--dim);
  text-align: right;
}

:where(html.p-index) .i-live-more{
  display: inline-flex;
  align-items: center;
  gap: 22px;
  padding: 15px 22px;
  border: 1px solid var(--line);
  border-radius: 100px;
  font-size: 16px;
  font-weight: 700;
  transition: 0.3s;
}

:where(html.p-index) .i-live-more:hover{
  border-color: var(--red);
  background: var(--red);
}

@media (max-width: 860px) {
  :where(html.p-index) .i-cov-arrow{
    display: none;
  }

  :where(html.p-index) .i-cov-field{
    flex: 1 1 100%;
  }

  :where(html.p-index) .i-live-feed li{
    grid-template-columns: 1fr auto;
    gap: 6px 14px;
  }

  :where(html.p-index) .i-live-feed .note{
    grid-column: 1 / -1;
  }

  :where(html.p-index) .i-live-feed .date{
    text-align: left;
    grid-column: 1;
  }

  :where(html.p-index) .i-live-feed .ver{
    text-align: right;
  }
}

/* ═══════════════════════════════════════════════════
   IEA EKOSİSTEMİ · YATAY SCROLL HİKÂYESİ
   ═══════════════════════════════════════════════════ */
:where(html.p-index) .i-stack{
  --story-progress: 0;
  padding: 0 0 140px;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 12%, rgba(13, 71, 161, 0.11), transparent 28%),
    #f2f3f4;
}

:where(html.p-index) .i-stack-intro{
  min-height: 0;
  padding: clamp(90px, 9vw, 126px) max(6vw, 24px) clamp(42px, 5vw, 68px);
}

:where(html.p-index) .i-stack-intro h2{
  max-width: 1050px;
  margin: 14px auto 16px;
  font-size: clamp(48px, 5.4vw, 82px);
  line-height: 1.02;
  text-wrap: balance;
}

:where(html.p-index) .i-stack-intro p{
  max-width: 570px;
  font-family: var(--body);
  font-size: clamp(16px, 1.25vw, 19px);
  line-height: 1.65;
}

:where(html.p-index) .i-horizontal-shell{
  position: relative;
  width: 100%;
  overflow: hidden;
  isolation: isolate;
  border-top: 1px solid rgba(13, 71, 161, 0.08);
  border-bottom: 1px solid rgba(13, 71, 161, 0.08);
  background:
    linear-gradient(rgba(13, 71, 161, 0.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(13, 71, 161, 0.018) 1px, transparent 1px),
    radial-gradient(circle at 82% 18%, rgba(13, 71, 161, 0.1), transparent 28%),
    #eff0f0;
  background-size: 72px 72px, 72px 72px, auto, auto;
}

:where(html.p-index) .i-horizontal-shell::before{
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(20, 30, 48, 0.160), transparent 18%, transparent 82%, rgba(20, 30, 48, 0.160));
}

:where(html.p-index) .i-horizontal-ui{
  position: relative;
  z-index: 4;
  max-width: 1680px;
  margin: 0 auto;
  padding: 32px max(5vw, 28px) 18px;
  display: grid;
  grid-template-columns: auto auto minmax(140px, 1fr) auto;
  gap: 26px;
  align-items: center;
  color: #4f5f6e;
  font-family: var(--body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
}

:where(html.p-index) .i-horizontal-counter{
  display: inline-flex;
  align-items: baseline;
  gap: 9px;
  letter-spacing: 0.1em;
}

:where(html.p-index) .i-horizontal-counter b{
  color: #1c2126;
  font-family: var(--display);
  font-size: 23px;
  font-weight: 600;
}

:where(html.p-index) .i-horizontal-counter > i{
  width: 26px;
  height: 1px;
  background: rgba(13, 71, 161, 0.18);
}

:where(html.p-index) .i-horizontal-progress{
  height: 1px;
  overflow: hidden;
  background: rgba(13, 71, 161, 0.12);
}

:where(html.p-index) .i-horizontal-progress i{
  display: block;
  width: 100%;
  height: 100%;
  background: var(--red);
  transform: scaleX(var(--story-progress));
  transform-origin: left center;
  will-change: transform;
}

:where(html.p-index) .i-horizontal-hint{
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

:where(html.p-index) .i-horizontal-hint i{
  color: var(--red);
  font-size: 15px;
  font-style: normal;
}

:where(html.p-index) .i-horizontal-viewport{
  position: relative;
  width: 100%;
  overflow: hidden;
}

:where(html.p-index) .i-stack-deck{
  width: min(1680px, calc(100% - 48px));
  max-width: none;
  margin: 0 auto;
  padding: 18px 0 60px;
  display: grid;
  gap: 28px;
}

:where(html.p-index) .i-stack-card,:where(html.p-index) .i-stack-card:nth-child(n){
  position: relative;
  top: auto;
  height: auto;
  min-height: 600px;
  margin: 0;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(380px, 0.88fr);
  border: 1px solid rgba(13, 71, 161, 0.08);
  border-radius: 2px;
  background: #eeeff0;
  box-shadow: none;
}

:where(html.p-index) .i-stack-card::before{
  content: attr(data-step);
  position: absolute;
  z-index: 3;
  right: 28px;
  top: 22px;
  color: rgba(13, 71, 161, 0.035);
  font-family: var(--display);
  font-size: clamp(86px, 9vw, 142px);
  font-weight: 700;
  line-height: 0.8;
  letter-spacing: -0.07em;
  pointer-events: none;
}

:where(html.p-index) .i-stack-visual{
  min-height: 600px;
  background: #f5f5f5;
}

:where(html.p-index) .i-stack-visual::after{
  background:
    linear-gradient(90deg, transparent 62%, rgba(20, 30, 48, 0.122)),
    linear-gradient(0deg, rgba(20, 30, 48, 0.160), transparent 42%);
}

:where(html.p-index) .i-stack-visual img{
  filter: saturate(0.88) contrast(1.06);
}

:where(html.p-index) .i-stack-visual > span{
  left: 30px;
  bottom: 28px;
  color: #1c2126;
  font-family: var(--body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
}

:where(html.p-index) .i-stack-visual > span::before{
  content: "";
  display: inline-block;
  width: 28px;
  height: 1px;
  margin: 0 12px 3px 0;
  background: var(--red);
}

:where(html.p-index) .i-stack-content{
  position: relative;
  z-index: 2;
  min-height: 600px;
  padding: clamp(42px, 5vw, 78px);
  background:
    radial-gradient(circle at 85% 15%, rgba(13, 71, 161, 0.09), transparent 30%),
    #eeeff0;
}

:where(html.p-index) .i-stack-content small{
  font-family: var(--body);
  font-size: 12px;
  letter-spacing: 0.2em;
}

:where(html.p-index) .i-stack-content h3{
  max-width: 570px;
  margin: 24px 0 20px;
  font-size: clamp(42px, 4.25vw, 68px);
  font-weight: 600;
  line-height: 1.02;
  text-wrap: balance;
}

:where(html.p-index) .i-stack-content p{
  max-width: 520px;
  color: #404d59;
  font-family: var(--body);
  font-size: clamp(16px, 1.3vw, 18px);
  line-height: 1.7;
}

:where(html.p-index) .i-stack-facts{
  width: 100%;
  max-width: 520px;
  margin-top: 30px;
  padding-top: 24px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  border-top: 1px solid rgba(13, 71, 161, 0.09);
}

:where(html.p-index) .i-stack-facts span{
  color: #4f5f6d;
  font-family: var(--body);
  font-size: 12px;
  line-height: 1.45;
}

:where(html.p-index) .i-stack-facts b{
  display: block;
  margin-bottom: 6px;
  color: #1c2126;
  font-family: var(--display);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.02em;
}

:where(html.p-index) .i-stack-content a{
  margin-top: 34px;
  padding: 14px 22px;
  border: 1.5px solid var(--red);
  border-radius: 100px;
  background: rgba(13, 71, 161, 0.08);
  color: #1e2430;
  font-family: var(--body);
  font-size: 15px;
  font-weight: 700;
  transition:
    background 0.28s var(--ease),
    border-color 0.28s var(--ease),
    transform 0.28s var(--ease);
}

:where(html.p-index) .i-stack-content a:hover{
  border-color: var(--red);
  background: var(--red);
  transform: translateY(-2px);
}

:where(html.p-index) .i-stack-content a span{
  margin-left: 16px;
  color: var(--red);
}

:where(html.p-index) .i-stack-content a:hover{
  border-color: var(--red);
  background: var(--red);
}

:where(html.p-index) .i-stack-content a:hover span{
  color: #1e2430;
}

@media (min-width: 861px) and (prefers-reduced-motion: no-preference) {
  :where(html.p-index) .has-horizontal-story .i-stack{
    padding-bottom: 0;
  }

  :where(html.p-index) .has-horizontal-story .i-horizontal-shell{
    --story-gutter: clamp(36px, 5vw, 96px);
    --story-card-width: min(1440px, calc(100vw - (var(--story-gutter) * 2)));
    --story-side-space: calc((100vw - var(--story-card-width)) / 2);
    height: 100svh;
    min-height: 720px;
    margin-top: 0;
    padding-top: 0;
    display: flex;
    flex-direction: column;
  }

  :where(html.p-index) .has-horizontal-story .i-horizontal-ui{
    position: relative;
    width: 100%;
    flex: 0 0 auto;
  }

  :where(html.p-index) .has-horizontal-story .i-horizontal-viewport{
    min-height: 0;
    flex: 1 1 auto;
  }

  :where(html.p-index) .has-horizontal-story .i-stack-deck{
    width: max-content;
    height: 100%;
    margin: 0;
    padding: 18px var(--story-side-space) 40px;
    display: flex;
    gap: 0;
    align-items: center;
    will-change: transform;
  }

  :where(html.p-index) .has-horizontal-story .i-stack-card,:where(html.p-index) .has-horizontal-story .i-stack-card:nth-child(n){
    flex: 0 0 var(--story-card-width);
    width: var(--story-card-width);
    height: min(68svh, 680px);
    min-height: 540px;
    margin-right: calc(100vw - var(--story-card-width));
    grid-template-columns: minmax(0, 1.13fr) minmax(390px, 0.87fr);
    opacity: 0.62;
    transform: scale(0.985);
    transform-origin: center center;
    transition: opacity 0.45s ease, border-color 0.45s ease, transform 0.45s ease;
  }

  :where(html.p-index) .has-horizontal-story .i-stack-card:last-child{
    margin-right: 0;
  }

  :where(html.p-index) .has-horizontal-story .i-stack-card.is-active{
    opacity: 1;
    border-color: rgba(13, 71, 161, 0.18);
    transform: scale(1);
  }

  :where(html.p-index) .has-horizontal-story .i-stack-visual,:where(html.p-index) .has-horizontal-story .i-stack-content{
    min-height: 0;
    height: 100%;
  }
}

@media (max-width: 860px), (prefers-reduced-motion: reduce) {
  :where(html.p-index) .i-stack{
    padding-bottom: 90px;
  }

  :where(html.p-index) .i-stack-intro{
    min-height: 0;
    padding: 86px 24px 46px;
  }

  :where(html.p-index) .i-stack-intro h2{
    font-size: clamp(46px, 12vw, 78px);
  }

  :where(html.p-index) .i-horizontal-shell{
    padding: 0 18px;
    overflow: hidden;
    border-bottom: 0;
    background-size: 48px 48px, 48px 48px, auto, auto;
  }

  :where(html.p-index) .i-horizontal-ui{
    padding: 26px 0 18px;
    grid-template-columns: auto 1fr;
    gap: 14px 22px;
  }

  :where(html.p-index) .i-horizontal-caption{
    text-align: right;
  }

  :where(html.p-index) .i-horizontal-progress{
    grid-column: 1 / -1;
  }

  :where(html.p-index) .i-horizontal-hint{
    display: none;
  }

  :where(html.p-index) .i-stack-deck{
    width: 100%;
    padding: 12px 0 0;
    gap: 18px;
  }

  :where(html.p-index) .i-stack-card,:where(html.p-index) .i-stack-card:nth-child(n){
    min-height: 0;
    grid-template-columns: 1fr;
    border-radius: 2px;
  }

  :where(html.p-index) .i-stack-card::before{
    font-size: 92px;
  }

  :where(html.p-index) .i-stack-visual{
    min-height: clamp(280px, 62vw, 430px);
  }

  :where(html.p-index) .i-stack-content{
    min-height: 0;
    padding: clamp(34px, 7vw, 54px) clamp(24px, 6vw, 46px) 42px;
  }

  :where(html.p-index) .i-stack-content h3{
    font-size: clamp(38px, 8vw, 58px);
  }

  :where(html.p-index) .i-stack-content p{
    font-size: 16px;
  }
}

@media (max-width: 520px) {
  :where(html.p-index) .i-stack-intro h2{
    font-size: clamp(43px, 13vw, 58px);
  }

  :where(html.p-index) .i-horizontal-shell{
    padding: 0 12px;
  }

  :where(html.p-index) .i-horizontal-caption{
    font-size: 9px;
    letter-spacing: 0.12em;
  }

  :where(html.p-index) .i-stack-visual{
    min-height: 260px;
  }

  :where(html.p-index) .i-stack-content{
    padding: 34px 24px 38px;
  }

  :where(html.p-index) .i-stack-content h3{
    font-size: clamp(36px, 11vw, 48px);
  }

  :where(html.p-index) .i-stack-facts{
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

/* ═══════════════════════════════════════════════════
   CUALLADÓ REFERANSLI SERBEST EDİTORYAL SAHNE
   Ana şerit ve görsel ters hızlarda ilerler.
   ═══════════════════════════════════════════════════ */
:where(html.p-index) .i-story-nav{
  display: none;
}

@media (min-width: 861px) and (prefers-reduced-motion: no-preference) {
  :where(html.p-index) .has-horizontal-story .i-horizontal-shell{
    --story-card-width: 100vw;
    --story-side-space: 0px;
    background:
      linear-gradient(rgba(13, 71, 161, 0.014) 1px, transparent 1px),
      linear-gradient(90deg, rgba(13, 71, 161, 0.014) 1px, transparent 1px),
      radial-gradient(circle at 72% 28%, rgba(13, 71, 161, 0.09), transparent 27%),
      #f4f5f5;
    background-size: 80px 80px, 80px 80px, auto, auto;
  }

  :where(html.p-index) .has-horizontal-story .i-horizontal-shell::after{
    content: "";
    position: absolute;
    z-index: 2;
    left: 0;
    right: 0;
    top: 49%;
    height: 1px;
    pointer-events: none;
    background: linear-gradient(90deg, transparent 4%, rgba(13, 71, 161, 0.5) 24%, rgba(13, 71, 161, 0.1) 24%, rgba(13, 71, 161, 0.1) 96%, transparent);
  }

  :where(html.p-index) .has-horizontal-story .i-horizontal-ui{
    position: absolute;
    z-index: 8;
    left: 14vw;
    right: 2vw;
    bottom: 14px;
    width: auto;
    padding: 0;
    grid-template-columns: auto auto minmax(130px, 1fr) auto;
  }

  :where(html.p-index) .has-horizontal-story .i-horizontal-viewport{
    height: 100%;
    flex: 1 1 auto;
  }

  :where(html.p-index) .has-horizontal-story .i-stack-deck{
    width: max-content;
    height: 100%;
    padding: 0;
    align-items: stretch;
  }

  :where(html.p-index) .has-horizontal-story .i-stack-card,:where(html.p-index) .has-horizontal-story .i-stack-card:nth-child(n){
    position: relative;
    flex: 0 0 100%;
    width: 100%;
    height: 100%;
    min-height: 0;
    margin: 0;
    display: block;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    opacity: 1;
    transform: none;
  }

  :where(html.p-index) .has-horizontal-story .i-stack-card::before{
    z-index: 1;
    left: 19vw;
    right: auto;
    top: 8%;
    color: rgba(13, 71, 161, 0.025);
    font-size: clamp(150px, 17vw, 310px);
    line-height: 1;
  }

  :where(html.p-index) .has-horizontal-story .i-stack-visual{
    position: absolute;
    z-index: 2;
    left: 14vw;
    top: 0;
    width: 72vw;
    height: 89%;
    min-height: 0;
    overflow: hidden;
    border: 1px solid rgba(13, 71, 161, 0.1);
    background: #fcfcfd;
  }

  :where(html.p-index) .has-horizontal-story .i-stack-card:nth-child(2) .i-stack-visual{
    left: 17vw;
    top: 0;
    width: 70vw;
    height: 90%;
  }

  :where(html.p-index) .has-horizontal-story .i-stack-card:nth-child(3) .i-stack-visual{
    left: 12vw;
    top: 2%;
    width: 74vw;
    height: 87%;
  }

  :where(html.p-index) .has-horizontal-story .i-stack-card:nth-child(4) .i-stack-visual{
    left: 15vw;
    top: 0;
    width: 72vw;
    height: 89%;
  }

  :where(html.p-index) .has-horizontal-story .i-stack-visual::after{
    background:
      linear-gradient(90deg, rgba(20, 30, 48, 0.147), transparent 40%, rgba(20, 30, 48, 0.160)),
      linear-gradient(0deg, rgba(20, 30, 48, 0.160), transparent 46%);
  }

  :where(html.p-index) .has-horizontal-story .i-stack-visual img,:where(html.p-index) .has-horizontal-story .i-stack-card:hover .i-stack-visual img{
    width: calc(100% + 190px);
    max-width: none;
    margin-left: -95px;
    filter: saturate(0.76) contrast(1.1);
    transform: translate3d(var(--image-parallax, 0px), 0, 0) scale(1.06);
    transition: none;
    will-change: transform;
  }

  :where(html.p-index) .has-horizontal-story .i-stack-visual > span{
    left: 28px;
    bottom: 24px;
  }

  :where(html.p-index) .has-horizontal-story .i-stack-content{
    position: absolute;
    z-index: 5;
    inset: 0;
    width: 100%;
    height: 100%;
    min-height: 0;
    padding: 0;
    display: block;
    pointer-events: none;
    background: transparent;
  }

  :where(html.p-index) .has-horizontal-story .i-stack-content > small,:where(html.p-index) .has-horizontal-story .i-stack-content > h3,:where(html.p-index) .has-horizontal-story .i-stack-content > p,:where(html.p-index) .has-horizontal-story .i-stack-content > .i-stack-facts,:where(html.p-index) .has-horizontal-story .i-stack-content > a{
    position: absolute;
    opacity: var(--scene-opacity, 1);
    transform: translate3d(var(--copy-shift, 0px), 0, 0);
    transition: opacity 0.12s linear;
    will-change: transform, opacity;
  }

  :where(html.p-index) .has-horizontal-story .i-stack-content > small{
    left: 15vw;
    top: 20%;
    padding: 7px 10px;
    background: #f4f5f5;
  }

  :where(html.p-index) .has-horizontal-story .i-stack-content h3{
    left: 15vw;
    top: 25%;
    width: 56vw;
    max-width: 900px;
    margin: 0;
    color: #1c2126;
    font-size: clamp(58px, 6.3vw, 112px);
    font-weight: 600;
    line-height: 0.94;
    letter-spacing: -0.055em;
    text-shadow: 0 5px 28px rgba(20, 30, 48, 0.160);
  }

  :where(html.p-index) .has-horizontal-story .i-stack-content > p{
    left: 75vw;
    top: 25%;
    width: 22vw;
    max-width: 390px;
    color: #3a4651;
    font-size: clamp(14px, 1.05vw, 17px);
    line-height: 1.7;
  }

  :where(html.p-index) .has-horizontal-story .i-stack-facts{
    left: 75vw;
    top: 49%;
    width: 22vw;
    max-width: 390px;
    margin: 0;
    padding-top: 20px;
    grid-template-columns: 1fr;
    gap: 13px;
  }

  :where(html.p-index) .has-horizontal-story .i-stack-facts b{
    margin-bottom: 3px;
  }

  :where(html.p-index) .has-horizontal-story .i-stack-content > a{
    left: 75vw;
    top: 68%;
    margin: 0;
    pointer-events: auto;
  }

  :where(html.p-index) .has-horizontal-story .i-story-nav{
    position: absolute;
    z-index: 9;
    left: max(3vw, 28px);
    top: 50%;
    width: 170px;
    padding: 18px 0 18px 24px;
    display: grid;
    gap: 15px;
    transform: translateY(-50%);
  }

  :where(html.p-index) .has-horizontal-story .i-story-nav::before{
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 1px;
    background: rgba(13, 71, 161, 0.2);
  }

  :where(html.p-index) .has-horizontal-story .i-story-nav button{
    position: relative;
    padding: 0;
    display: grid;
    grid-template-columns: 24px 1fr;
    gap: 8px;
    border: 0;
    background: transparent;
    color: #5a5f63;
    font-family: var(--body);
    text-align: left;
    text-transform: uppercase;
    cursor: pointer;
    transition: color 0.3s ease, transform 0.3s ease;
  }

  :where(html.p-index) .has-horizontal-story .i-story-nav button::before{
    content: "";
    position: absolute;
    left: -28px;
    top: 7px;
    width: 8px;
    height: 8px;
    border: 1px solid var(--red);
    border-radius: 50%;
    background: #f4f5f5;
    opacity: 0;
  }

  :where(html.p-index) .has-horizontal-story .i-story-nav button b{
    font-size: 11px;
    font-weight: 700;
  }

  :where(html.p-index) .has-horizontal-story .i-story-nav button span{
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.13em;
  }

  :where(html.p-index) .has-horizontal-story .i-story-nav button.is-active{
    color: #1c2126;
    transform: translateX(5px);
  }

  :where(html.p-index) .has-horizontal-story .i-story-nav button.is-active::before{
    opacity: 1;
    background: var(--red);
    box-shadow: 0 0 18px rgba(13, 71, 161, 0.55);
  }
}

@media (min-width: 861px) and (max-width: 1100px) and (prefers-reduced-motion: no-preference) {
  :where(html.p-index) .has-horizontal-story .i-story-nav{
    display: none;
  }

  :where(html.p-index) .has-horizontal-story .i-stack-visual,:where(html.p-index) .has-horizontal-story .i-stack-card:nth-child(n) .i-stack-visual{
    left: 0;
    top: 1%;
    width: 74vw;
    height: 88%;
  }

  :where(html.p-index) .has-horizontal-story .i-stack-content > small,:where(html.p-index) .has-horizontal-story .i-stack-content h3{
    left: 4vw;
  }

  :where(html.p-index) .has-horizontal-story .i-stack-content h3{
    width: 64vw;
    font-size: clamp(53px, 6.5vw, 72px);
  }

  :where(html.p-index) .has-horizontal-story .i-stack-content > p,:where(html.p-index) .has-horizontal-story .i-stack-facts,:where(html.p-index) .has-horizontal-story .i-stack-content > a{
    left: 67vw;
    width: 30vw;
  }

  :where(html.p-index) .has-horizontal-story .i-horizontal-ui{
    left: 4vw;
  }

  :where(html.p-index) .has-horizontal-story .i-stack-facts{
    top: 52%;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  :where(html.p-index) .has-horizontal-story .i-stack-content > a{
    top: 69%;
  }
}

/* ═══════════════════════════════════════════════════════
   IEA EKOSİSTEMİ — dikey scroll ile yatay kaydırma
   ═══════════════════════════════════════════════════════ */


/* yatay mod kapalıyken (mobil / hareket azalt) gizli kalsın */

/* Panel: görsel arka planda tam kaplar, yazılar üstünde durur */


/* ═══════════════════════════════════════════════════
   IEA EKOSİSTEMİ — ok kontrollü sonsuz döngü
   ═══════════════════════════════════════════════════ */
:where(html.p-index) .i-stack-viewport{
  position: relative;
  height: min(72svh, 660px);
  min-height: 480px;
  overflow: hidden;
}

:where(html.p-index) .i-stack-deck{
  position: relative;
  width: 100%;
  height: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  display: block;
}

/* paneller üst üste, sadece aktif görünür */
:where(html.p-index) .i-stack-card,:where(html.p-index) .i-stack-card:nth-child(n){
  position: absolute;
  inset: 0;
  top: auto;
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  margin: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: #fcfcfd;
  opacity: 0;
  visibility: hidden;
  transform: translateX(0);
  transition:
    opacity 0.55s var(--ease),
    transform 0.6s var(--ease),
    visibility 0s linear 0.6s;
}

:where(html.p-index) .i-stack-card.is-active{
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
  transition:
    opacity 0.55s var(--ease),
    transform 0.6s var(--ease),
    visibility 0s;
  z-index: 2;
}

/* giriş/çıkış yönleri */
:where(html.p-index) .i-stack-card.is-entering-right{
  opacity: 0;
  visibility: visible;
  transform: translateX(60px);
  transition: none;
}

:where(html.p-index) .i-stack-card.is-entering-left{
  opacity: 0;
  visibility: visible;
  transform: translateX(-60px);
  transition: none;
}

:where(html.p-index) .i-stack-card.is-leaving-left{
  opacity: 0;
  visibility: visible;
  transform: translateX(-60px);
  z-index: 1;
}

:where(html.p-index) .i-stack-card.is-leaving-right{
  opacity: 0;
  visibility: visible;
  transform: translateX(60px);
  z-index: 1;
}

/* görsel arka planda, yazılar üstünde */
:where(html.p-index) .i-stack-visual{
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  min-height: 0;
}

:where(html.p-index) .i-stack-visual img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  opacity: 0.55;
}

:where(html.p-index) .i-stack-visual::after{
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      90deg,
      rgba(20, 30, 48, 0.160) 0%,
      rgba(20, 30, 48, 0.160) 44%,
      rgba(20, 30, 48, 0.098) 100%
    ),
    linear-gradient(0deg, rgba(20, 30, 48, 0.160), transparent 55%);
}

:where(html.p-index) .i-stack-visual > span{
  z-index: 3;
  left: auto;
  right: clamp(36px, 6vw, 92px);
  bottom: 26px;
}

:where(html.p-index) .i-stack-content{
  position: relative;
  z-index: 2;
  height: 100%;
  max-width: 760px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(40px, 6vh, 70px) clamp(36px, 6vw, 92px);
  background: none;
}

/* kontroller */
:where(html.p-index) .i-stack-controls{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(18px, 2.6vw, 32px);
  margin: 26px auto 0;
  padding: 0 24px;
}

:where(html.p-index) .i-stack-prev,:where(html.p-index) .i-stack-next{
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border: 1.5px solid var(--red);
  border-radius: 50%;
  background: rgba(13, 71, 161, 0.08);
  color: var(--red);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(20, 30, 48, 0.158);
  transition:
    border-color 0.28s var(--ease),
    background 0.28s var(--ease),
    color 0.28s var(--ease),
    transform 0.28s var(--ease);
}

:where(html.p-index) .i-stack-prev:hover,:where(html.p-index) .i-stack-next:hover{
  border-color: var(--red);
  background: var(--red);
  color: #1e2430;
  transform: scale(1.07);
}

:where(html.p-index) .i-stack-prev:active,:where(html.p-index) .i-stack-next:active{
  transform: scale(0.96);
}

:where(html.p-index) .i-stack-prev:focus-visible,:where(html.p-index) .i-stack-next:focus-visible{
  outline: 2px solid var(--red);
  outline-offset: 3px;
}

:where(html.p-index) .i-stack-prev:hover,:where(html.p-index) .i-stack-next:hover{
  border-color: var(--red);
  background: var(--red);
  color: #1e2430;
}

:where(html.p-index) .i-stack-dots{
  display: flex;
  align-items: center;
  gap: 10px;
}

:where(html.p-index) .i-stack-dot{
  width: 10px;
  height: 10px;
  padding: 0;
  border: 1px solid rgba(13, 71, 161, 0.45);
  border-radius: 50%;
  background: rgba(13, 71, 161, 0.22);
  cursor: pointer;
  transition: 0.3s var(--ease);
}

:where(html.p-index) .i-stack-dot:hover{
  border-color: #1e2430;
  background: rgba(13, 71, 161, 0.5);
}

:where(html.p-index) .i-stack-dot.is-active{
  border-color: var(--red);
  background: var(--red);
  transform: scale(1.25);
}

:where(html.p-index) .i-stack-count{
  min-width: 78px;
  color: #37424c;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-align: center;
}

:where(html.p-index) .i-stack-count b{
  color: var(--text);
}

@media (max-width: 860px) {
  /* mobilde de paneller üst üste; viewport kendi yüksekliğini korur */
  :where(html.p-index) .i-stack-viewport{
    height: min(84svh, 640px);
    min-height: 500px;
  }

  :where(html.p-index) .i-stack-content{
    max-width: none;
    padding: 40px 24px;
  }
}

/* ok kontrollü modda bölüm tek ekrana sığsın */
@media (min-width: 861px) {
  :where(html.p-index) .i-stack-intro{
    min-height: 0;
    padding: clamp(70px, 9vh, 96px) 24px clamp(16px, 2.4vh, 26px);
  }

  :where(html.p-index) .i-stack-intro h2{
    margin: 8px 0 0;
    font-size: clamp(30px, 3.2vw, 48px);
    line-height: 1.06;
  }

  :where(html.p-index) .i-stack-intro p{
    display: none;
  }

  :where(html.p-index) .i-stack-viewport{
    height: min(62svh, 620px);
    min-height: 470px;
  }

  :where(html.p-index) .i-stack-controls{
    margin-top: 18px;
    padding-bottom: clamp(28px, 4vh, 48px);
  }
}

/* sürüklerken metin seçilmesin */
:where(html.p-index) .i-stack-viewport{
  touch-action: pan-y;
  -webkit-user-select: none;
  user-select: none;
}

/* mobilde etiket işaretleri hep solda */
@media (max-width: 860px) {
  :where(html.p-index) .i-callout.c3 b::before,:where(html.p-index) .i-callout.c4 b::before{
    margin-left: 0;
  }
}

/* Açık temada logo beyaz olduğu için görünmüyor -> koyu maviye çevir */
:where(html.p-index) .i-logo img{
  filter: brightness(0) saturate(100%) invert(19%) sepia(72%) saturate(2496%)
    hue-rotate(207deg) brightness(93%) contrast(94%);
}

/* =========================================================
   IEA BLUE / WHITE THEME
   Kaynak palet: istanbulanahtar.com/zed-full-plus
   ========================================================= */
:where(html.p-index) .immersive-home{
  background:
    linear-gradient(180deg, #ffffff 0%, #f5f8fc 48%, #ffffff 100%);
  color: var(--text);
}

:where(html.p-index) .i-nav{
  color: var(--text);
}

:where(html.p-index) .i-nav.scrolled{
  background: rgba(255, 255, 255, 0.92);
  border-bottom-color: var(--line);
  box-shadow: 0 8px 32px rgba(13, 71, 161, 0.08);
}

:where(html.p-index) .i-nav-cta{
  border-color: rgba(13, 71, 161, 0.28);
  background: rgba(255, 255, 255, 0.72);
  color: var(--red);
}

:where(html.p-index) .i-nav-cta:hover,:where(html.p-index) .i-hero-end a:hover,:where(html.p-index) .i-product-body > a:hover,:where(html.p-index) .i-live-more:hover,:where(html.p-index) .i-stack-content a:hover,:where(html.p-index) .i-stack-prev:hover,:where(html.p-index) .i-stack-next:hover{
  color: var(--on-blue);
}

:where(html.p-index) .i-menu{
  border-color: var(--line-strong);
  background: rgba(255, 255, 255, 0.82);
}

:where(html.p-index) .i-hero-stage{
  background:
    radial-gradient(circle at 72% 52%, rgba(13, 71, 161, 0.18), transparent 34%),
    linear-gradient(145deg, #ffffff 0%, #f3f7fc 72%, #eaf2fb 100%);
}

:where(html.p-index) .i-hero-bg{
  background:
    radial-gradient(ellipse 70% 55% at 50% 82%, rgba(13, 71, 161, 0.14), transparent 62%),
    linear-gradient(160deg, #ffffff 0%, #f5f9fd 58%, #e8f1fb 100%);
}

:where(html.p-index) .i-hero-copy h1,:where(html.p-index) .i-hero-hook,:where(html.p-index) .i-section-head h2,:where(html.p-index) .i-showcase-head h2,:where(html.p-index) .i-stack-intro h2{
  color: var(--text);
}

:where(html.p-index) .i-hero-end{
  position: absolute;
  z-index: 6;
  left: clamp(36px, 7vw, 110px);
  top: 50%;
  width: min(510px, 42vw);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 22px;
  opacity: clamp(0, calc((var(--hero-progress) - 0.58) * 3.6), 1);
  visibility: hidden;
  transform: translateY(calc(-42% + (1 - var(--hero-progress)) * 34px));
  pointer-events: none;
  transition: visibility 0s linear 0.25s;
  will-change: opacity, transform;
}

:where(html.p-index) .i-hero.hero-end-active .i-hero-end{
  visibility: visible;
  pointer-events: auto;
  transition: visibility 0s;
}

:where(html.p-index) .i-hero-end a,:where(html.p-index) .i-product-body > a,:where(html.p-index) .i-live-more{
  border-color: rgba(13, 71, 161, 0.24);
  background: rgba(255, 255, 255, 0.74);
  color: var(--red);
}

:where(html.p-index) .i-manifesto,:where(html.p-index) .i-showcase{
  background: #ffffff;
}

:where(html.p-index) .i-statement-shade{
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.96) 0%, rgba(255, 255, 255, 0.8) 42%, rgba(255, 255, 255, 0.08) 76%),
    linear-gradient(0deg, rgba(236, 244, 252, 0.84), transparent 62%);
}

:where(html.p-index) .i-statement-copy h2 b{
  color: var(--text);
}

:where(html.p-index) .i-statement-copy h2 span{
  color: #4f5d6e;
}

:where(html.p-index) .i-products,:where(html.p-index) .i-coverage,:where(html.p-index) .i-live{
  background: #ffffff;
}

:where(html.p-index) .i-product-card{
  border-color: var(--line);
  background: #ffffff;
  box-shadow: 0 16px 48px rgba(13, 71, 161, 0.08);
}

:where(html.p-index) .i-product-card:hover{
  border-color: rgba(13, 71, 161, 0.42);
  box-shadow: 0 22px 64px rgba(13, 71, 161, 0.14);
}

:where(html.p-index) .i-product-media{
  background:
    radial-gradient(circle at 50% 62%, rgba(13, 71, 161, 0.14), transparent 42%),
    var(--blue-pale);
}

:where(html.p-index) .i-product-media > span{
  border-color: rgba(13, 71, 161, 0.2);
  background: rgba(255, 255, 255, 0.86);
  color: var(--text);
}

:where(html.p-index) .i-dot{
  background: #ffffff;
}

:where(html.p-index) .i-final-image > div{
  background:
    linear-gradient(90deg, rgba(4, 28, 64, 0.84) 0%, rgba(4, 28, 64, 0.46) 48%, transparent 76%),
    linear-gradient(0deg, rgba(4, 28, 64, 0.6), transparent 58%);
}

:where(html.p-index) .i-final-image h2{
  color: #ffffff;
  text-shadow: 0 10px 34px rgba(4, 28, 64, 0.28);
}

:where(html.p-index) .i-final-image h2 b{
  color: #0d47a1;
}

:where(html.p-index) .i-stack{
  background:
    radial-gradient(circle at 50% 12%, rgba(13, 71, 161, 0.12), transparent 30%),
    var(--blue-pale);
}

:where(html.p-index) .i-horizontal-shell{
  border-color: var(--line);
  background:
    linear-gradient(rgba(13, 71, 161, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(13, 71, 161, 0.025) 1px, transparent 1px),
    radial-gradient(circle at 82% 18%, rgba(13, 71, 161, 0.12), transparent 30%),
    #edf4fb;
  background-size: 72px 72px, 72px 72px, auto, auto;
}

:where(html.p-index) .i-horizontal-shell::before{
  background: linear-gradient(90deg, rgba(13, 71, 161, 0.06), transparent 18%, transparent 82%, rgba(13, 71, 161, 0.06));
}

:where(html.p-index) .i-stack-card,:where(html.p-index) .i-stack-card:nth-child(n){
  border-color: rgba(13, 71, 161, 0.14);
  background: #ffffff;
  box-shadow: var(--shadow);
}

:where(html.p-index) .i-stack-content{
  background:
    radial-gradient(circle at 85% 15%, rgba(13, 71, 161, 0.1), transparent 32%),
    #ffffff;
}

:where(html.p-index) .i-stack-visual > span{
  color: #ffffff;
  text-shadow: 0 2px 14px rgba(4, 28, 64, 0.8);
}

:where(html.p-index) .i-stack-visual::after{
  background:
    linear-gradient(90deg, transparent 58%, rgba(4, 28, 64, 0.16)),
    linear-gradient(0deg, rgba(4, 28, 64, 0.7), transparent 46%);
}

:where(html.p-index) .i-stack-content a{
  background: #ffffff;
  color: var(--red);
}

:where(html.p-index) .i-cov-field select,:where(html.p-index) .i-cov-card,:where(html.p-index) .i-live-latest,:where(html.p-index) .i-live-stat{
  border-color: var(--line);
  background: var(--blue-pale);
}

:where(html.p-index) .i-live-stats{
  border-color: var(--line);
  background: var(--line);
}

:where(html.p-index) .i-cov-card.is-supported .i-cov-status,:where(html.p-index) .i-live-badge{
  color: #147a45;
}

:where(html.p-index) .i-footer{
  border-top-color: rgba(255, 255, 255, 0.14);
  background:
    radial-gradient(circle at 74% 12%, rgba(64, 151, 255, 0.2), transparent 32%),
    #0d47a1;
  color: #ffffff;
}

:where(html.p-index) .i-footer-top h2,:where(html.p-index) .i-footer-top h2 b,:where(html.p-index) .i-footer-grid > div > a,:where(html.p-index) .i-footer-grid > div > span,:where(html.p-index) .i-footer-brand p,:where(html.p-index) .i-footer-brand > span,:where(html.p-index) .i-footer-bottom{
  color: #ffffff;
}

:where(html.p-index) .i-footer-grid > div > b,:where(html.p-index) .i-footer-top p{
  color: rgba(255, 255, 255, 0.68);
}

:where(html.p-index) .i-footer-grid > div > a:hover{
  color: #b9dcff;
}

:where(html.p-index) .i-footer-top > a{
  border-color: #ffffff;
  background: #ffffff;
  color: var(--red);
}

:where(html.p-index) .i-footer-top > a:hover{
  border-color: #ffffff;
  background: transparent;
  color: #ffffff;
}

:where(html.p-index) .i-footer-grid,:where(html.p-index) .i-footer-bottom{
  border-color: rgba(255, 255, 255, 0.16);
}

:where(html.p-index) .i-footer-brand img{
  filter: none;
}

@media (max-width: 860px) {
  :where(html.p-index) .i-nav-links{
    background: rgba(255, 255, 255, 0.97);
    box-shadow: inset 0 1px 0 var(--line);
  }
}

/* Toplantı kapsamı: içerik sırası ve iki kullanıcı yolculuğu */
:where(html.p-index) .immersive-home main{
  display: block;
}

:where(html.p-index) .immersive-home main > section,:where(html.p-index) .immersive-home main [id]{
  scroll-margin-top: 96px;
}

:where(html.p-index) .i-live{ display: none; }

:where(html.p-index) .i-audience,:where(html.p-index) .i-film,:where(html.p-index) .i-platform{
  width: 100%;
}

:where(html.p-index) .i-audience{
  padding: clamp(64px, 7vw, 100px) max(5vw, 24px);
  scroll-margin-top: 82px;
  background: #fff;
  border-block: 1px solid var(--line);
}

:where(html.p-index) .i-audience-head,:where(html.p-index) .i-platform-head{
  max-width: 1320px;
  margin: 0 auto 48px;
}

:where(html.p-index) .i-platform-head h2,:where(html.p-index) .i-film-copy h2{
  margin: 14px 0 18px;
  color: var(--text);
  font-family: var(--display);
  font-size: clamp(42px, 5vw, 76px);
  font-weight: 600;
  line-height: 1.04;
  letter-spacing: -0.04em;
}

:where(html.p-index) .i-audience-head p{
  max-width: 700px;
  margin: 0;
  color: var(--muted);
  font-size: 18px;
  line-height: 1.7;
}

:where(html.p-index) .i-audience-grid{
  max-width: 1320px;
  margin: auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

:where(html.p-index) .i-audience-card{
  position: relative;
  min-height: 560px;
  padding: clamp(30px, 4vw, 58px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #0b3b84;
  color: #ffffff;
  box-shadow: var(--shadow);
}

:where(html.p-index) .i-audience-card::after{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(4, 28, 64, 0.95), rgba(4, 28, 64, 0.1) 70%);
}

:where(html.p-index) .i-audience-card img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s var(--ease);
}

:where(html.p-index) .i-audience-card:hover img{ transform: scale(1.04); }

:where(html.p-index) .i-audience-card > span,:where(html.p-index) .i-audience-card > h3,:where(html.p-index) .i-audience-card > p,:where(html.p-index) .i-audience-card > b{
  position: relative;
  z-index: 2;
}

:where(html.p-index) .i-audience-card > span{
  color: #9dccff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
}

:where(html.p-index) .i-audience-card h3{
  max-width: 620px;
  margin: 16px 0 12px;
  font: 600 clamp(32px, 3.4vw, 52px)/1.08 var(--display);
  letter-spacing: -0.035em;
}

:where(html.p-index) .i-audience-card p{
  max-width: 500px;
  margin: 0 0 28px;
  color: rgba(255, 255, 255, 0.76);
  font-size: 17px;
  line-height: 1.65;
}

:where(html.p-index) .i-audience-card b{ font-size: 15px; }

:where(html.p-index) .i-film{
  min-height: 82vh;
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  background: #ffffff;
}

:where(html.p-index) .i-film-media{
  position: relative;
  min-height: 620px;
  overflow: hidden;
}

:where(html.p-index) .i-film-media::after{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 62%, rgba(255,255,255,.72));
}

:where(html.p-index) .i-film-media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

:where(html.p-index) .i-film-play{
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 50%;
  width: 82px;
  height: 82px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,.7);
  border-radius: 50%;
  background: rgba(13,71,161,.86);
  color: #fff;
  transform: translate(-50%, -50%);
}

:where(html.p-index) .i-film-copy{
  padding: clamp(54px, 7vw, 110px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

:where(html.p-index) .i-film-copy h2{ font-size: clamp(38px, 4.4vw, 66px); }

:where(html.p-index) .i-film-copy > p{
  margin: 0;
  color: var(--muted);
  font-size: 17px;
  line-height: 1.75;
}

:where(html.p-index) .i-film-note{
  margin: 30px 0;
  padding: 20px 0;
  border-block: 1px solid var(--line);
}

:where(html.p-index) .i-film-note b,:where(html.p-index) .i-film-note span{ display: block; }
:where(html.p-index) .i-film-note b{ color: var(--red); font-size: 13px; letter-spacing: .14em; }
:where(html.p-index) .i-film-note span{ margin-top: 7px; color: var(--muted); font-size: 14px; }
:where(html.p-index) .i-film-copy > a{ color: var(--red); font-weight: 700; }

:where(html.p-index) .i-platform{
  padding: clamp(100px, 12vw, 160px) max(5vw, 24px);
  background: #ffffff;
}

:where(html.p-index) .i-platform-grid{
  max-width: 1320px;
  margin: auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

:where(html.p-index) .i-platform-grid:not(.i-plat-accordion){
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}

:where(html.p-index) .i-platform-grid:not(.i-plat-accordion) a{
  position: relative;
  min-height: 250px;
  padding: 32px;
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  transition: .35s var(--ease);
}

:where(html.p-index) .i-platform-grid:not(.i-plat-accordion) a:hover{ background: var(--blue-pale); }
:where(html.p-index) .i-platform-grid:not(.i-plat-accordion) small{ color: var(--red); font-weight: 700; letter-spacing: .14em; }
:where(html.p-index) .i-platform-grid b{ margin-top: auto; font: 600 25px/1.2 var(--display); }
:where(html.p-index) .i-platform-grid span{ max-width: 310px; margin-top: 10px; color: var(--muted); font-size: 15px; line-height: 1.55; }
:where(html.p-index) .i-platform-grid i{ position: absolute; right: 28px; top: 28px; color: var(--red); font-style: normal; font-size: 22px; }

@media (max-width: 860px) {
  :where(html.p-index) .i-audience-grid,:where(html.p-index) .i-film{ grid-template-columns: 1fr; }
  :where(html.p-index) .i-audience-card{ min-height: 470px; }
  :where(html.p-index) .i-film-media{ min-height: 420px; }
  :where(html.p-index) .i-film-media::after{ background: linear-gradient(0deg, rgba(255,255,255,.8), transparent 45%); }
  :where(html.p-index) .i-platform-grid{ grid-template-columns: 1fr 1fr; }
}

@media (max-width: 560px) {
  :where(html.p-index) .i-audience{ padding-inline: 16px; }
  :where(html.p-index) .i-audience-card{ min-height: 430px; padding: 28px 24px; }
  :where(html.p-index) .i-audience-card h3{ font-size: 34px; }
  :where(html.p-index) .i-film-media{ min-height: 320px; }
  :where(html.p-index) .i-film-copy{ padding: 58px 22px 80px; }
  :where(html.p-index) .i-platform-grid{ grid-template-columns: 1fr; }
}

/* =========================================================
   HOMEPAGE STABILITY PASS
   Daha kısa sahneler, net hero ve tekrarlanan bölüm geçişleri.
   ========================================================= */
:where(html.p-index) .i-hero{
  height: 225vh;
  min-height: 1650px;
}

:where(html.p-index) .i-hero-blur{
  backdrop-filter: blur(5px) saturate(1.03);
  -webkit-backdrop-filter: blur(5px) saturate(1.03);
  opacity: max(0, calc(.16 - var(--hero-progress) * .55));
}

:where(html.p-index) .i-hero-blur-soft{
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  opacity: max(0, calc(.06 - var(--hero-progress) * .3));
}

:where(html.p-index) .i-hero-vignette{
  background:
    radial-gradient(ellipse at center, transparent 24%, rgba(255, 255, 255, calc(.14 - var(--hero-progress) * .08)) 100%),
    linear-gradient(to bottom, rgba(255, 255, 255, .12) 0%, transparent 30%, transparent 72%, rgba(255, 255, 255, .24) 100%);
}

:where(html.p-index) .i-hero-scrim{
  z-index: 3;
  opacity: clamp(.68, calc((var(--hero-progress) - .45) * 3.2), 1);
  background: linear-gradient(
    to right,
    #ffffff 0%,
    rgba(255,255,255,.96) 34%,
    rgba(255,255,255,.46) 49%,
    rgba(255,255,255,.07) 62%,
    transparent 100%
  );
}

@media (min-width: 861px) {
  :where(html.p-index) .i-hero-bg img{
    left: 57%;
  }
}

:where(html.p-index) .i-showcase{
  height: 220vh;
  min-height: 1700px;
}

:where(html.p-index) .i-coverage{
  min-height: 0;
}

/* JS yoksa içerik görünür kalır; JS hazır olduğunda yalnızca ekrana girecek
   bölüm hazırlanır. Sınıf çıkışta silindiği için yukarı kaydırmada da yinelenir. */
.i-ready:where(.p-index) main > section:not(.i-hero):not(.i-manifesto) .i-section-head,.i-ready:where(.p-index) main > section:not(.i-hero):not(.i-manifesto) .i-coverage-inner,.i-ready:where(.p-index) main > section:not(.i-hero):not(.i-manifesto) .i-audience-head,.i-ready:where(.p-index) main > section:not(.i-hero):not(.i-manifesto) .i-audience-card,.i-ready:where(.p-index) main > section:not(.i-hero):not(.i-manifesto) .i-showcase-head,.i-ready:where(.p-index) main > section:not(.i-hero):not(.i-manifesto) .i-final-image h2,.i-ready:where(.p-index) main > section:not(.i-hero):not(.i-manifesto) .i-stack-intro,.i-ready:where(.p-index) main > section:not(.i-hero):not(.i-manifesto) .i-film-media,.i-ready:where(.p-index) main > section:not(.i-hero):not(.i-manifesto) .i-film-copy,.i-ready:where(.p-index) main > section:not(.i-hero):not(.i-manifesto) .i-platform-head,.i-ready:where(.p-index) main > section:not(.i-hero):not(.i-manifesto) .i-platform-grid{
  opacity: 0;
  transform: translateY(30px);
  transition: opacity .78s var(--ease), transform .78s var(--ease);
}

.i-ready:where(.p-index) main > section.section-inview:not(.i-hero):not(.i-manifesto) .i-section-head,.i-ready:where(.p-index) main > section.section-inview:not(.i-hero):not(.i-manifesto) .i-coverage-inner,.i-ready:where(.p-index) main > section.section-inview:not(.i-hero):not(.i-manifesto) .i-audience-head,.i-ready:where(.p-index) main > section.section-inview:not(.i-hero):not(.i-manifesto) .i-audience-card,.i-ready:where(.p-index) main > section.section-inview:not(.i-hero):not(.i-manifesto) .i-showcase-head,.i-ready:where(.p-index) main > section.section-inview:not(.i-hero):not(.i-manifesto) .i-final-image h2,.i-ready:where(.p-index) main > section.section-inview:not(.i-hero):not(.i-manifesto) .i-stack-intro,.i-ready:where(.p-index) main > section.section-inview:not(.i-hero):not(.i-manifesto) .i-film-media,.i-ready:where(.p-index) main > section.section-inview:not(.i-hero):not(.i-manifesto) .i-film-copy,.i-ready:where(.p-index) main > section.section-inview:not(.i-hero):not(.i-manifesto) .i-platform-head,.i-ready:where(.p-index) main > section.section-inview:not(.i-hero):not(.i-manifesto) .i-platform-grid{
  opacity: 1;
  transform: none;
}

.i-ready:where(.p-index) .i-audience-card:nth-child(2),.i-ready:where(.p-index) .i-film-copy,.i-ready:where(.p-index) .i-platform-grid{
  transition-delay: .1s;
}

@media (min-width: 861px) and (max-width: 1220px) {
  :where(html.p-index) .i-nav{
    grid-template-columns: 190px 1fr 132px;
    padding-inline: 24px;
  }

  :where(html.p-index) .i-nav-links{ gap: 13px; }
  :where(html.p-index) .i-nav-links a{ font-size: 12px; }
  :where(html.p-index) .i-language{ display: none; }
  :where(html.p-index) .i-nav-actions{ gap: 0; }
}

@media (max-width: 860px) {
  :where(html.p-index) .i-hero{
    height: 185vh;
    min-height: 1320px;
  }

  :where(html.p-index) .i-showcase{
    height: auto;
    min-height: 0;
  }

  :where(html.p-index) .i-hero-copy{
    top: clamp(150px, 19vh, 180px);
    bottom: auto;
  }

  :where(html.p-index) .i-hero-bg img{
    bottom: 0;
    max-height: 42vh;
  }

  :where(html.p-index) .i-hero-scrim{
    z-index: 3;
    opacity: clamp(.78, calc((var(--hero-progress) - .45) * 3.5), 1);
    background: linear-gradient(
      to bottom,
      rgba(255,255,255,.98) 0%,
      rgba(255,255,255,.9) 47%,
      rgba(255,255,255,.14) 67%,
      transparent 100%
    );
  }

  .i-ready:where(.p-index) .i-showcase .i-showcase-head,.i-ready:where(.p-index) .i-showcase.section-inview .i-showcase-head{
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .i-ready:where(.p-index) main > section:not(.i-hero):not(.i-manifesto) *{
    animation: none !important;
    transition-duration: .01ms !important;
  }
}

/* Sadece KOYU fotoğraf üzerindeki metinler beyaz kalır */
:where(html.p-index) .i-stack-visual > span,:where(html.p-index) .i-statement-copy h2,:where(html.p-index) .i-final-image h2{
  color: #ffffff;
}

:where(html.p-index) .i-statement-copy h2 b,:where(html.p-index) .i-final-image h2 b{
  color: #7fb2ff;
}

/* Hero açık zeminli -> koyu metin */
:where(html.p-index) .i-hero-copy h1,:where(html.p-index) .i-hero-end .i-hero-hook{
  color: var(--text);
}

:where(html.p-index) .i-hero-copy .i-kicker{
  color: var(--red);
}

:where(html.p-index) .i-hero-row p{
  color: var(--muted);
}

:where(html.p-index) .i-hero-copy h1 .accent{
  color: var(--red);
}

:where(html.p-index) .i-showcase-stage .i-callout b{
  color: var(--text);
}

/* ok butonları: mavi kenar, koyu panel üstünde beyaz ok */
:where(html.p-index) .i-stack-prev,:where(html.p-index) .i-stack-next{
  border-color: var(--red);
  background: rgba(13, 71, 161, 0.1);
  color: var(--red);
}

:where(html.p-index) .i-stack-prev:hover,:where(html.p-index) .i-stack-next:hover{
  background: var(--red);
  color: #fff;
}

/* ═══════════════════════════════════════════════════
   ETKİLEŞİMLİ ÜRÜN ANATOMİSİ
   ═══════════════════════════════════════════════════ */
:where(html.p-index) .i-anatomy{
  width: min(1240px, 94vw);
  margin: 26px auto 0;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(360px, 0.85fr);
  align-items: stretch;
  gap: clamp(20px, 3vw, 48px);
}

:where(html.p-index) .i-anatomy-stage{
  position: relative;
  display: grid;
  place-items: center;
  min-height: 350px;
  overflow: hidden;
  border: 1px solid rgba(13, 71, 161, 0.12);
  border-radius: 7px;
  background: #edf5fe;
}

:where(html.p-index) .i-anatomy-stage img{
  width: 100%;
  max-width: none;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
  filter: drop-shadow(0 18px 40px rgba(13, 71, 161, 0.14));
}

/* + noktaları */
:where(html.p-index) .i-hot{
  position: absolute;
  left: var(--hx);
  top: var(--hy);
  z-index: 3;
  width: 30px;
  height: 30px;
  padding: 0;
  display: grid;
  place-items: center;
  border: 1.5px solid var(--red);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(6px);
  cursor: pointer;
  transform: translate(-50%, -50%);
  transition:
    transform 0.3s var(--ease),
    background 0.3s var(--ease),
    box-shadow 0.3s var(--ease);
}

/* artı işareti */
:where(html.p-index) .i-hot i{
  position: relative;
  width: 11px;
  height: 11px;
}

:where(html.p-index) .i-hot i::before,:where(html.p-index) .i-hot i::after{
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  background: var(--red);
  transition: background 0.3s var(--ease);
}

:where(html.p-index) .i-hot i::before{
  width: 11px;
  height: 1.5px;
  transform: translate(-50%, -50%);
}

:where(html.p-index) .i-hot i::after{
  width: 1.5px;
  height: 11px;
  transform: translate(-50%, -50%);
}

/* nabız halkası */
:where(html.p-index) .i-hot::after{
  content: "";
  position: absolute;
  inset: -6px;
  border: 1px solid var(--red);
  border-radius: 50%;
  opacity: 0;
  animation: i-hot-pulse 2.6s ease-out infinite;
}

@keyframes i-hot-pulse {
  0% {
    opacity: 0.5;
    transform: scale(0.85);
  }
  70%,
  100% {
    opacity: 0;
    transform: scale(1.5);
  }
}

:where(html.p-index) .i-hot:hover,:where(html.p-index) .i-hot:focus-visible{
  background: var(--red);
  transform: translate(-50%, -50%) scale(1.14);
  outline: none;
  box-shadow: 0 6px 18px rgba(13, 71, 161, 0.32);
}

:where(html.p-index) .i-hot:hover i::before,:where(html.p-index) .i-hot:hover i::after,:where(html.p-index) .i-hot:focus-visible i::before,:where(html.p-index) .i-hot:focus-visible i::after,:where(html.p-index) .i-hot.is-active i::before,:where(html.p-index) .i-hot.is-active i::after{
  background: #fff;
}

:where(html.p-index) .i-hot.is-active{
  background: var(--red);
  box-shadow: 0 6px 20px rgba(13, 71, 161, 0.38);
}

:where(html.p-index) .i-hot.is-active::after{
  animation: none;
  opacity: 0;
}

/* bilgi paneli */
:where(html.p-index) .i-anatomy-panel{
  padding: clamp(24px, 3vw, 34px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--bg-soft, #fafafa);
}

:where(html.p-index) .i-anatomy-index{
  display: block;
  margin-bottom: 14px;
  color: var(--dim);
  font-size: 13px;
  letter-spacing: 0.14em;
}

:where(html.p-index) .i-anatomy-index b{
  color: var(--red);
  font-size: 15px;
}

:where(html.p-index) .i-anatomy-panel h3{
  margin: 0 0 12px;
  font-family: var(--display);
  font-size: clamp(22px, 2.2vw, 30px);
  font-weight: 700;
  line-height: 1.14;
  letter-spacing: -0.02em;
}

:where(html.p-index) .i-anatomy-panel p{
  margin: 0;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.7;
}

:where(html.p-index) .i-anatomy-facts{
  margin: 20px 0 0;
  padding: 18px 0 0;
  list-style: none;
  border-top: 1px solid var(--line);
  display: grid;
  gap: 12px;
}

:where(html.p-index) .i-anatomy-facts li{
  display: flex;
  justify-content: space-between;
  gap: 16px;
  font-size: 14px;
}

:where(html.p-index) .i-anatomy-facts b{
  color: var(--dim);
  font-weight: 600;
  letter-spacing: 0.08em;
}

:where(html.p-index) .i-anatomy-facts span{
  color: var(--text);
  font-weight: 600;
  text-align: right;
}

/* panel içerik değişince yumuşak geçiş */
:where(html.p-index) .i-anatomy-panel.is-swapping{
  opacity: 0;
  transform: translateY(6px);
}

:where(html.p-index) .i-anatomy-panel{
  transition:
    opacity 0.22s var(--ease),
    transform 0.22s var(--ease);
}

@media (max-width: 860px) {
  :where(html.p-index) .i-anatomy{
    grid-template-columns: 1fr;
    gap: 22px;
  }

  :where(html.p-index) .i-hot{
    width: 26px;
    height: 26px;
  }
}

/* anatomi bölümü fazla boşluk bırakmasın */
:where(html.p-index) .i-showcase{
  height: auto;
  min-height: 0;
  scroll-margin-top: 80px;
  padding-bottom: clamp(52px, 7vh, 84px);
}

:where(html.p-index) .i-showcase-sticky{
  position: static;
  height: auto;
  min-height: 0;
  padding-top: clamp(58px, 7vh, 78px);
}

:where(html.p-index) .i-showcase-head{
  max-width: 760px;
}

:where(html.p-index) .i-showcase-head h2{
  font-size: clamp(36px, 3.5vw, 52px);
}

/* ═══════════════════════════════════════════════════
   SİNEMATİK TİYATRO MODU
   ═══════════════════════════════════════════════════ */
:where(html.p-index) .i-film-media{
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  border-radius: 10px;
  overflow: hidden;
  background: none;
  cursor: pointer;
}

:where(html.p-index) .i-film-media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s var(--ease), filter 0.5s var(--ease);
}

:where(html.p-index) .i-film-media:hover img{
  transform: scale(1.035);
  filter: brightness(0.92);
}

/* oynat düğmesi */
:where(html.p-index) .i-film-play{
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 2;
  width: 78px;
  height: 78px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  transform: translate(-50%, -50%);
  box-shadow: 0 10px 34px rgba(13, 71, 161, 0.28);
  transition: transform 0.35s var(--ease), background 0.35s var(--ease);
}

:where(html.p-index) .i-film-play i{
  width: 0;
  height: 0;
  margin-left: 5px;
  border-top: 11px solid transparent;
  border-bottom: 11px solid transparent;
  border-left: 18px solid var(--red);
  transition: border-left-color 0.35s var(--ease);
}

:where(html.p-index) .i-film-media:hover .i-film-play{
  background: var(--red);
  transform: translate(-50%, -50%) scale(1.07);
}

:where(html.p-index) .i-film-media:hover .i-film-play i{
  border-left-color: #fff;
}

/* nabız halkası */
:where(html.p-index) .i-film-play::after{
  content: "";
  position: absolute;
  inset: -10px;
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 50%;
  animation: i-film-pulse 2.6s ease-out infinite;
}

@keyframes i-film-pulse {
  0% {
    opacity: 0.6;
    transform: scale(0.9);
  }
  70%,
  100% {
    opacity: 0;
    transform: scale(1.35);
  }
}

:where(html.p-index) .i-film-hint{
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: 26px;
  padding: 8px 16px;
  border-radius: 100px;
  background: rgba(13, 71, 161, 0.9);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  transform: translateX(-50%) translateY(8px);
  opacity: 0;
  transition: opacity 0.35s var(--ease), transform 0.35s var(--ease);
}

:where(html.p-index) .i-film-media:hover .i-film-hint{
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* tiyatro katmanı: sayfa kararır, video ortada büyür */
:where(html.p-index) .i-theater{
  position: fixed;
  inset: 0;
  z-index: 400;
  display: grid;
  place-items: center;
  padding: clamp(20px, 5vw, 60px);
  background: rgba(6, 10, 18, 0.94);
  backdrop-filter: blur(10px);
  opacity: 0;
  transition: opacity 0.45s var(--ease);
}

:where(html.p-index) .i-theater[hidden]{
  display: none;
}

:where(html.p-index) .i-theater.is-open{
  opacity: 1;
}

:where(html.p-index) .i-theater-stage{
  width: min(1180px, 100%);
  transform: scale(0.94);
  opacity: 0;
  transition:
    transform 0.5s var(--ease),
    opacity 0.5s var(--ease);
}

:where(html.p-index) .i-theater.is-open .i-theater-stage{
  transform: scale(1);
  opacity: 1;
}

:where(html.p-index) .i-theater-frame{
  position: relative;
  aspect-ratio: 16 / 9;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  background: #0b1018;
  overflow: hidden;
  box-shadow: 0 40px 120px rgba(0, 0, 0, 0.6);
}

:where(html.p-index) .i-theater-frame iframe,:where(html.p-index) .i-theater-frame video{
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

:where(html.p-index) .i-theater-soon{
  display: grid;
  gap: 12px;
  padding: 30px;
  text-align: center;
}

:where(html.p-index) .i-theater-soon b{
  color: #7eb2ff;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.2em;
}

:where(html.p-index) .i-theater-soon span{
  color: rgba(255, 255, 255, 0.72);
  font-size: 16px;
}

:where(html.p-index) .i-theater-close{
  position: absolute;
  z-index: 2;
  right: clamp(18px, 3vw, 40px);
  top: clamp(18px, 3vw, 34px);
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.3s var(--ease), transform 0.3s var(--ease);
}

:where(html.p-index) .i-theater-close:hover{
  background: var(--red);
  transform: rotate(90deg);
}

/* tiyatro açıkken sayfa kaymasın */
:where(html.p-index) body.theater-open{
  overflow: hidden;
}

/* ═══════════════════════════════════════════════════
   AKORDEON PLATFORM KARTLARI (01–06)
   ═══════════════════════════════════════════════════ */
:where(html.p-index) .i-plat-accordion{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: start;
  gap: 14px;
}

:where(html.p-index) .i-plat-row{
  position: relative;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--bg);
  overflow: hidden;
  transition:
    border-color 0.35s var(--ease),
    box-shadow 0.35s var(--ease),
    transform 0.35s var(--ease);
}

:where(html.p-index) .i-plat-row:hover,:where(html.p-index) .i-plat-row:focus-within{
  border-color: var(--red);
  box-shadow: 0 14px 34px rgba(13, 71, 161, 0.12);
  transform: translateY(-2px);
}

:where(html.p-index) .i-plat-main{
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-areas:
    "no title arrow"
    "no desc arrow";
  align-items: start;
  gap: 6px 16px;
  padding: 22px;
  text-decoration: none;
  color: inherit;
}

:where(html.p-index) .i-plat-main small{
  grid-area: no;
  align-self: start;
  color: var(--red);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
}

:where(html.p-index) .i-plat-main b{
  grid-area: title;
  font-family: var(--display);
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.015em;
}

:where(html.p-index) .i-plat-main span{
  grid-area: desc;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.55;
}

:where(html.p-index) .i-plat-main i{
  grid-area: arrow;
  color: var(--red);
  font-size: 17px;
  font-style: normal;
  transition: transform 0.3s var(--ease);
}

:where(html.p-index) .i-plat-row:hover .i-plat-main i{
  transform: translateX(4px);
}

/* çekmece: hover'da aşağı doğru esner */
:where(html.p-index) .i-plat-drawer{
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.4s var(--ease);
}

:where(html.p-index) .i-plat-row:hover .i-plat-drawer,:where(html.p-index) .i-plat-row:focus-within .i-plat-drawer{
  grid-template-rows: 1fr;
}

:where(html.p-index) .i-plat-drawer > *{
  min-height: 0;
}

:where(html.p-index) .i-plat-drawer{
  overflow: hidden;
}

:where(html.p-index) .i-plat-link{
  display: block;
  margin: 0 22px;
  padding: 10px 0;
  line-height: 1.3;
  border-top: 1px solid var(--line);
  color: var(--red);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  opacity: 0;
  transform: translateY(-4px);
  transition:
    opacity 0.3s var(--ease) 0.06s,
    transform 0.3s var(--ease) 0.06s,
    color 0.2s var(--ease);
}

:where(html.p-index) .i-plat-link:last-child{
  margin-bottom: 18px;
}

:where(html.p-index) .i-plat-row:hover .i-plat-link,:where(html.p-index) .i-plat-row:focus-within .i-plat-link{
  opacity: 1;
  transform: translateY(0);
}

:where(html.p-index) .i-plat-link:hover{
  color: var(--red-dark, #093372);
  text-decoration: underline;
}

@media (max-width: 1100px) {
  :where(html.p-index) .i-plat-accordion{
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 700px) {
  :where(html.p-index) .i-plat-accordion{
    grid-template-columns: 1fr;
  }

  /* dokunmatikte hover yok -> linkler hep görünür */
  :where(html.p-index) .i-plat-drawer{
    grid-template-rows: 1fr;
  }

  :where(html.p-index) .i-plat-link{
    opacity: 1;
    transform: none;
  }
}

/* çekmece içeriği tek sarmalayıcıda -> 0fr/1fr düzgün çalışır */
:where(html.p-index) .i-plat-drawer-in{
  min-height: 0;
  overflow: hidden;
  display: block;
}

/* ═══════════════════════════════════════════════════
   SABİT HIZLI İŞLEM BUTONU
   ═══════════════════════════════════════════════════ */
:where(html.p-index) .i-fab{
  position: fixed;
  z-index: 300;
  right: clamp(16px, 2.5vw, 32px);
  bottom: clamp(16px, 2.5vw, 32px);
  display: grid;
  justify-items: end;
  gap: 14px;
}

:where(html.p-index) .i-fab-btn{
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  border: 1.5px solid var(--red);
  border-radius: 50%;
  background: var(--red);
  cursor: pointer;
  box-shadow: 0 12px 30px rgba(13, 71, 161, 0.34);
  transition:
    transform 0.3s var(--ease),
    background 0.3s var(--ease);
}

:where(html.p-index) .i-fab-btn:hover{
  transform: scale(1.06);
}

/* ikon: üç çizgi -> çarpı */
:where(html.p-index) .i-fab-ico{
  position: relative;
  width: 20px;
  height: 2px;
  border-radius: 2px;
  background: #fff;
  transition: background 0.2s var(--ease);
}

:where(html.p-index) .i-fab-ico::before,:where(html.p-index) .i-fab-ico::after{
  position: absolute;
  left: 0;
  width: 20px;
  height: 2px;
  border-radius: 2px;
  background: #fff;
  transition: transform 0.3s var(--ease);
}

:where(html.p-index) .i-fab-ico::before{
  content: "";
  left: 0;
  transform: translateY(-7px);
}

:where(html.p-index) .i-fab-ico::after{
  content: "";
  left: 0;
  transform: translateY(7px);
}

:where(html.p-index) .i-fab.is-open .i-fab-ico{
  background: transparent;
}

:where(html.p-index) .i-fab.is-open .i-fab-ico::before{
  transform: rotate(45deg);
}

:where(html.p-index) .i-fab.is-open .i-fab-ico::after{
  transform: rotate(-45deg);
}

/* panel */
:where(html.p-index) .i-fab-panel{
  width: min(320px, calc(100vw - 40px));
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 24px 60px rgba(13, 71, 161, 0.2);
  opacity: 0;
  transform: translateY(10px) scale(0.98);
  transform-origin: bottom right;
  transition:
    opacity 0.3s var(--ease),
    transform 0.3s var(--ease);
}

:where(html.p-index) .i-fab-panel[hidden]{
  display: none;
}

:where(html.p-index) .i-fab.is-open .i-fab-panel{
  opacity: 1;
  transform: translateY(0) scale(1);
}

:where(html.p-index) .i-fab-title{
  display: block;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
  color: var(--dim);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

:where(html.p-index) .i-fab-item{
  display: grid;
  grid-template-columns: 38px 1fr;
  align-items: center;
  gap: 12px;
  padding: 11px 10px;
  border-radius: 8px;
  color: inherit;
  text-decoration: none;
  transition: background 0.25s var(--ease);
}

:where(html.p-index) .i-fab-item:hover{
  background: rgba(13, 71, 161, 0.07);
}

:where(html.p-index) .i-fab-item i{
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 8px;
  background: rgba(13, 71, 161, 0.1);
  color: var(--red);
  font-size: 17px;
  font-style: normal;
}

:where(html.p-index) .i-fab-item b{
  display: block;
  font-size: 14px;
  font-weight: 700;
}

:where(html.p-index) .i-fab-item em{
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  line-height: 1.4;
}

/* tiyatro açıkken gizlen */
:where(html.p-index) body.theater-open .i-fab{
  display: none;
}

@media (max-width: 560px) {
  :where(html.p-index) .i-fab-btn{
    width: 52px;
    height: 52px;
  }
}

:where(html.p-index) .i-fab-item i svg{
  display: block;
}

/* Footer sütun başlıkları ve CTA açıklaması okunabilirlik */
:where(html.p-index) .i-footer-grid > div > b{
  color: #ffffff;
  opacity: 1;
  font-weight: 700;
}

:where(html.p-index) .i-footer-top p{
  color: #dbe8fb;
}

:where(html.p-index) .i-footer-brand p,:where(html.p-index) .i-footer-brand > span{
  color: #e4edfc;
}

/* Footer CTA etiketi koyu mavi zeminde mavi kalıyordu */
:where(html.p-index) .i-footer-top .i-kicker{
  color: #9ec8ff;
}

/* Header eşitlemesi ve site içi dil seçici */
@media (min-width: 1221px) {
  :where(html.p-index) .i-nav{
    height: 70px;
    grid-template-columns: 310px 1fr 310px;
  }
}

:where(html.p-index) .i-logo span{
  max-width: 175px;
  font-size: 12px;
  line-height: 1.34;
  letter-spacing: .1em;
}

:where(html.p-index) .i-nav-cta{
  min-height: 38px;
  padding: 0 16px;
  display: inline-flex;
  align-items: center;
  border-color: #0d47a1;
  border-radius: 4px;
  color: #fff;
  background: #0d47a1;
}

:where(html.p-index) .i-nav-cta:hover{
  border-color: #083878;
  color: #fff;
  background: #083878;
}

:where(html.p-index) .language-switcher{
  position: relative;
  z-index: 180;
  display: inline-flex;
}

:where(html.p-index) .language-toggle{
  min-width: 52px;
  height: 38px;
  padding: 0 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border: 0;
  border-radius: 4px;
  color: #123d78;
  background: transparent;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

:where(html.p-index) .language-toggle:hover,:where(html.p-index) .language-toggle[aria-expanded="true"]{
  background: #eef5fd;
}

:where(html.p-index) .language-toggle i{
  width: 7px;
  height: 7px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform .22s;
}

:where(html.p-index) .language-toggle[aria-expanded="true"] i{
  transform: translateY(2px) rotate(225deg);
}

:where(html.p-index) .language-menu{
  position: absolute;
  z-index: 190;
  top: calc(100% + 10px);
  right: 0;
  width: 210px;
  padding: 8px;
  display: grid;
  gap: 3px;
  border: 1px solid rgba(13, 71, 161, .14);
  border-radius: 12px;
  background: rgba(255, 255, 255, .98);
  box-shadow: 0 20px 55px rgba(20, 54, 96, .18);
  backdrop-filter: blur(18px);
}

:where(html.p-index) .language-menu[hidden]{
  display: none;
}

:where(html.p-index) .language-menu button{
  width: 100%;
  min-height: 42px;
  padding: 0 10px;
  display: grid;
  grid-template-columns: 25px 1fr auto;
  align-items: center;
  gap: 9px;
  border: 0;
  border-radius: 7px;
  color: #203149;
  background: transparent;
  text-align: left;
  cursor: pointer;
}

:where(html.p-index) .language-menu button:hover,:where(html.p-index) .language-menu button.active{
  color: #0d47a1;
  background: #edf5ff;
}

:where(html.p-index) .language-menu button b{
  font-size: 12px;
  font-weight: 700;
}

:where(html.p-index) .language-menu button small{
  color: #7a899c;
  font-size: 9px;
  font-weight: 800;
}

:where(html.p-index) .language-flag{
  position: relative;
  width: 19px;
  height: 13px;
  display: block;
  overflow: hidden;
  border: 1px solid rgba(24, 45, 72, .16);
  border-radius: 2px;
  box-shadow: 0 1px 2px rgba(18, 42, 70, .08);
}

:where(html.p-index) .flag-tr{ background: #e30a17; }
:where(html.p-index) .flag-tr::before{
  content: "";
  position: absolute;
  left: 4px;
  top: 2px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #fff;
}
:where(html.p-index) .flag-tr::after{
  content: "";
  position: absolute;
  left: 6px;
  top: 2px;
  width: 6px;
  height: 7px;
  border-radius: 50%;
  background: #e30a17;
}
:where(html.p-index) .flag-en{
  background:
    linear-gradient(33deg, transparent 43%, #cf142b 43% 49%, transparent 49%),
    linear-gradient(-33deg, transparent 43%, #cf142b 43% 49%, transparent 49%),
    linear-gradient(33deg, transparent 51%, #cf142b 51% 57%, transparent 57%),
    linear-gradient(-33deg, transparent 51%, #cf142b 51% 57%, transparent 57%),
    linear-gradient(33deg, transparent 39%, #fff 39% 61%, transparent 61%),
    linear-gradient(-33deg, transparent 39%, #fff 39% 61%, transparent 61%),
    linear-gradient(90deg, transparent 40%, #fff 40% 60%, transparent 60%),
    linear-gradient(transparent 34%, #fff 34% 66%, transparent 66%),
    linear-gradient(90deg, transparent 45%, #cf142b 45% 55%, transparent 55%),
    linear-gradient(transparent 41%, #cf142b 41% 59%, transparent 59%),
    #21468b;
}
:where(html.p-index) .flag-it{ background: linear-gradient(90deg, #009246 0 33.33%, #fff 33.33% 66.66%, #ce2b37 66.66%); }
:where(html.p-index) .flag-fr{ background: linear-gradient(90deg, #0055a4 0 33.33%, #fff 33.33% 66.66%, #ef4135 66.66%); }
:where(html.p-index) .flag-es{ background: linear-gradient(#aa151b 0 25%, #f1bf00 25% 75%, #aa151b 75%); }


@media (max-width: 860px) {
  :where(html.p-index) .mobile-nav-tools .language-switcher{
    width: 100%;
  }

  :where(html.p-index) .mobile-nav-tools .language-toggle{
    width: 100%;
    justify-content: space-between;
  }

  :where(html.p-index) .mobile-nav-tools .language-menu{
    position: static;
    width: 100%;
    margin-top: 6px;
    box-shadow: none;
  }
}

/* =========================================================
   RAKAMLARLA IEA — tek sıra, kompakt
   ========================================================= */
:where(html.p-index) .i-numbers{
  max-width: 1280px;
  margin: auto;
  padding: 104px clamp(24px, 5vw, 72px) 112px;
  background: #ffffff;
}

/* başlık solda, açıklama + değiştirici sağda */
:where(html.p-index) .i-num-top{
  display: grid;
  grid-template-columns: 1fr minmax(320px, 380px);
  gap: 64px;
  align-items: end;
  margin-bottom: 52px;
}

:where(html.p-index) .i-num-head h2{
  margin: 14px 0 0;
  font-family: var(--display);
  font-size: clamp(34px, 3.2vw, 48px);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--text);
}

:where(html.p-index) .i-num-aside{
  text-align: left;
}

:where(html.p-index) .i-num-aside p{
  margin: 0;
  max-width: 360px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--muted);
}

:where(html.p-index) .i-num-switch{
  display: inline-flex;
  gap: 24px;
  margin-top: 18px;
}

:where(html.p-index) .i-num-switch button{
  padding: 0 0 6px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: none;
  color: var(--muted);
  font: inherit;
  font-size: 14.5px;
  font-weight: 600;
  cursor: pointer;
  transition:
    color 0.28s var(--ease),
    border-color 0.28s var(--ease);
}

:where(html.p-index) .i-num-switch button:hover{
  color: var(--text);
}

:where(html.p-index) .i-num-switch button.is-on{
  border-bottom-color: var(--red);
  color: var(--red);
}

:where(html.p-index) .i-num-switch button:focus-visible{
  outline: 2px solid var(--red);
  outline-offset: 4px;
  border-radius: 2px;
}

/* --- tek sıra, dikey ayırıcılarla --- */
:where(html.p-index) .i-num-rows{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--line);
}

:where(html.p-index) .i-num-row{
  display: flex;
  flex-direction: column;
  padding: 34px 30px 32px 0;
}

:where(html.p-index) .i-num-row + .i-num-row{
  padding-left: 30px;
  border-left: 1px solid var(--line);
}

:where(html.p-index) .i-num-fig{
  font-family: var(--display);
  font-size: clamp(38px, 3.2vw, 50px);
  font-weight: 400;
  line-height: 0.96;
  letter-spacing: -0.04em;
  color: var(--red);
  font-variant-numeric: tabular-nums;
}

:where(html.p-index) .i-num-row h3{
  margin: 16px 0 0;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.32;
  letter-spacing: -0.01em;
  color: var(--text);
}

:where(html.p-index) .i-num-row p{
  margin: 10px 0 0;
  font-size: 14.5px;
  line-height: 1.62;
  color: var(--muted);
}

:where(html.p-index) .i-num-link{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding-top: 20px;
  font-size: 14px;
  font-weight: 600;
  color: var(--red);
  text-decoration: none;
}

:where(html.p-index) .i-num-link span{
  transition: transform 0.3s var(--ease);
}

:where(html.p-index) .i-num-link:hover span{
  transform: translateX(4px);
}

:where(html.p-index) .i-num-link:focus-visible{
  outline: 2px solid var(--red);
  outline-offset: 3px;
  border-radius: 3px;
}

@media (max-width: 1000px) {
  :where(html.p-index) .i-num-top{
    grid-template-columns: 1fr;
    gap: 24px;
    align-items: start;
    margin-bottom: 40px;
  }

  :where(html.p-index) .i-num-aside{
    text-align: left;
  }

  :where(html.p-index) .i-num-rows{
    grid-template-columns: repeat(2, 1fr);
  }

  /* 2 sütunda soldaki sütunun kenarlığı olmasın */
  :where(html.p-index) .i-num-row:nth-child(odd){
    padding-left: 0;
    border-left: 0;
  }

  :where(html.p-index) .i-num-row:nth-child(n + 3){
    border-top: 1px solid var(--line);
  }
}

@media (max-width: 620px) {
  :where(html.p-index) .i-numbers{
    padding: 76px clamp(20px, 5vw, 40px) 84px;
  }

  :where(html.p-index) .i-num-rows{
    grid-template-columns: 1fr;
  }

  :where(html.p-index) .i-num-row{
    padding: 26px 0 24px;
  }

  :where(html.p-index) .i-num-row + .i-num-row{
    padding-left: 0;
    border-left: 0;
    border-top: 1px solid var(--line);
  }

  :where(html.p-index) .i-num-switch{
    gap: 20px;
  }
}

/* =========================================================
   CONTAINER HİZASI
   İç sayfalar .container ile 1240px'e hizalanıyor.
   Ana sayfa bölümleri de aynı dikey hatta otursun diye
   her bölümün iç sarmalayıcısı tek bir ölçüye bağlanır.
   Tam genişlik kalması gereken bölümler (hero, görsel bant,
   yatay şerit) bu kuralın dışında bırakılmıştır.
   ========================================================= */
:root:where(.p-index){
  /* Akışkan genişlik: ekranın %88'i, üst sınır 1720px.
     Geniş ekranda kenar boşluğu azalır, hiza tek hatta kalır. */
  --container: min(88vw, 1720px);
  --gutter: clamp(24px, 6vw, 110px);
}

/* bölümün kendisi kenardan kenara; iç sarmalayıcı hizalar */
:where(html.p-index) .i-audience,:where(html.p-index) .i-coverage,:where(html.p-index) .i-live,:where(html.p-index) .i-manifesto,:where(html.p-index) .i-numbers,:where(html.p-index) .i-products,:where(html.p-index) .i-footer{
  max-width: none;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

/* tek ve ortak ölçü: 1240px */
:where(html.p-index) .i-audience-head,:where(html.p-index) .i-audience > .i-paths,:where(html.p-index) .i-audience > .i-split,:where(html.p-index) .i-coverage > *,:where(html.p-index) .i-live > *,:where(html.p-index) .i-manifesto > p,:where(html.p-index) .i-manifesto > small,:where(html.p-index) .i-numbers > *,:where(html.p-index) .i-products > *,:where(html.p-index) .i-footer > *{
  width: min(var(--container), 100%);
  margin-inline: auto;
}

/* .i-numbers kendi max-width'ini birakip container'a uysun */
:where(html.p-index) .i-numbers{
  max-width: none;
}

:where(html.p-index) .i-products{
  max-width: none;
}

/* manifesto ortalanmis metin — genisligi container'i asmasin */
:where(html.p-index) .i-manifesto > p{
  max-width: min(var(--container), 100%);
}

/* kendi ölçüsünü dayatan iç sarmalayıcılar da container'a bağlanır */
:where(html.p-index) .i-coverage-inner,:where(html.p-index) .i-live-inner,:where(html.p-index) .i-audience-head,:where(html.p-index) .i-audience > .i-paths,:where(html.p-index) .i-audience > .i-split{
  max-width: var(--container);
  width: 100%;
  margin-inline: auto;
}

/* audience kendi padding'ini birakip ortak gutter'i kullansin */
:where(html.p-index) .i-audience{
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

/* audience: kendi 72px padding'i ortak gutter ile degistirilir */
:where(html.p-index) .i-audience{
  padding-left: var(--gutter) !important;
  padding-right: var(--gutter) !important;
}

:where(html.p-index) .i-audience > .i-paths{
  max-width: var(--container);
  width: 100%;
  margin-inline: auto;
}

/* Tam genişlikte kalan bölümlerin metin blokları da
   aynı 1240px hattına otursun (hero, statement, stack, final-image) */
:where(html.p-index) .i-stack-intro{
  width: min(var(--container), calc(100% - var(--gutter) * 2));
  max-width: var(--container);
  padding-left: 0;
  padding-right: 0;
  margin-inline: auto;
}

/* hero ve statement metni position:absolute; left'i container hattina sabitle.
   Sol kenar = (100vw - 1240px) / 2, dar ekranda gutter'a duser. */
:where(html.p-index) .i-hero-copy,:where(html.p-index) .i-statement-copy{
  left: max(var(--gutter), (100% - var(--container)) / 2);
  width: min(var(--container), calc(100% - var(--gutter) * 2));
  max-width: var(--container);
}

/* final-image h2 da position:absolute — ayni hatta sabitle */
:where(html.p-index) .i-final-image h2{
  left: max(var(--gutter), (100% - var(--container)) / 2);
  max-width: min(var(--container), calc(100% - var(--gutter) * 2));
}

/* hero / statement / final-image bölümleri de ortak gutter'ı kullansın ki
   iç metin bloğu diğer bölümlerle birebir aynı sol kenardan başlasın */


/* showcase (ortalanmış) ve film (iki kolonlu) kendi düzenlerini korur,
   yalnızca dış kenarları container hattına oturur */
:where(html.p-index) .i-showcase-sticky{
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

:where(html.p-index) .i-showcase-sticky > .i-showcase-head,:where(html.p-index) .i-showcase-sticky > .i-anatomy{
  max-width: var(--container);
  margin-inline: auto;
}

:where(html.p-index) .i-film{
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

/* =========================================================
   İSTİSNASIZ HİZA
   Kalan üç bölüm de aynı container hattına alınır.
   ========================================================= */

/* showcase başlığı ortalanmıştı -> sola, container hattına */
:where(html.p-index) .i-showcase-head{
  max-width: var(--container);
  margin-left: 0;
  margin-right: auto;
  text-align: left;
}

:where(html.p-index) .i-showcase-head h2,:where(html.p-index) .i-showcase-head p{
  max-width: 760px;
  margin-left: 0;
  margin-right: 0;
}

/* film iki kolonluydu, metni sağdaydı -> tek kolon, metin solda */
:where(html.p-index) .i-film{
  display: block;
  padding-top: clamp(90px, 12vh, 140px);
  padding-bottom: clamp(90px, 12vh, 140px);
}

:where(html.p-index) .i-film-copy,:where(html.p-index) .i-film-media{
  width: min(var(--container), 100%);
  margin-inline: auto;
  padding-left: 0;
  padding-right: 0;
}

/* metin görselden önce gelsin */
:where(html.p-index) .i-film-copy{
  order: 1;
  margin-bottom: 40px;
}

:where(html.p-index) .i-film-media{
  order: 2;
}

:where(html.p-index) .i-film{
  display: flex;
  flex-direction: column;
}

:where(html.p-index) .i-film-media{
  min-height: 0;
  aspect-ratio: 16 / 8;
  max-height: 60vh;
  border-radius: 18px;
  overflow: hidden;
}

:where(html.p-index) .i-film-media img,:where(html.p-index) .i-film-media video{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* stack: 2.2vw padding -> ortak gutter */
:where(html.p-index) .i-stack{
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

:where(html.p-index) .i-stack-intro{
  margin-left: auto;
  margin-right: auto;
}

/* hero alt metin bloğu ve stack kart içeriği de aynı hatta */
:where(html.p-index) .i-hero-end{
  left: max(var(--gutter), (100% - var(--container)) / 2);
}

:where(html.p-index) .i-stack-content{
  padding-left: 0;
  margin-left: max(0px, (100% - var(--container)) / 2);
}

/* stack-intro: section zaten gutter uyguluyor, ikinci kez ekleme */
:where(html.p-index) .i-stack-intro{
  width: 100%;
  max-width: var(--container);
  margin-left: auto;
  margin-right: auto;
  padding-left: 0;
  padding-right: 0;
}

/* Akışkan genişlikte metin satırları aşırı uzamasın.
   Blok container'a hizalı kalır, yalnızca metin okunabilir
   uzunlukta tutulur (~75 karakter). */
:where(html.p-index) .i-film-copy p,:where(html.p-index) .i-num-head > p,:where(html.p-index) .i-num-aside p,:where(html.p-index) .i-coverage-head p,:where(html.p-index) .i-audience-head p,:where(html.p-index) .i-showcase-head p,:where(html.p-index) .i-stack-intro p,:where(html.p-index) .i-section-head p{
  max-width: 68ch;
}

:where(html.p-index) .i-manifesto > p{
  max-width: min(var(--container), 22ch * 3);
}

/* =========================================================
   NASIL BAŞLIYORSUNUZ — 4 adım
   ========================================================= */
:where(html.p-index) .i-steps{
  padding: clamp(96px, 12vh, 140px) var(--gutter);
  background: var(--blue-pale);
  border-top: 1px solid var(--line);
}

:where(html.p-index) .i-steps > *{
  width: min(var(--container), 100%);
  margin-inline: auto;
}

:where(html.p-index) .i-steps-head{
  margin-bottom: 64px;
}

:where(html.p-index) .i-steps-head h2{
  margin: 16px 0 0;
  font-family: var(--display);
  font-size: clamp(34px, 3.2vw, 50px);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--text);
}

:where(html.p-index) .i-steps-head p{
  margin: 20px 0 0;
  max-width: 62ch;
  font-size: 17.5px;
  line-height: 1.65;
  color: var(--muted);
}

/* --- adımlar --- */
:where(html.p-index) .i-steps-list{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
  border-top: 1px solid var(--line-strong);
}

:where(html.p-index) .i-step{
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 34px 30px 34px 0;
}

:where(html.p-index) .i-step + .i-step{
  padding-left: 30px;
  border-left: 1px solid var(--line);
}

/* üstte ilerleme noktası */
:where(html.p-index) .i-step::before{
  content: "";
  position: absolute;
  top: -5px;
  left: 0;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--red);
}

:where(html.p-index) .i-step + .i-step::before{
  left: 30px;
}

:where(html.p-index) .i-step-no{
  font-family: var(--display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--red);
}

:where(html.p-index) .i-step h3{
  margin: 18px 0 0;
  font-size: 19px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.012em;
  color: var(--text);
}

:where(html.p-index) .i-step p{
  margin: 12px 0 0;
  font-size: 15.5px;
  line-height: 1.66;
  color: var(--muted);
}

:where(html.p-index) .i-step-meta{
  margin-top: auto;
  padding-top: 22px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted);
  opacity: 0.85;
}

/* --- alt bağlantılar --- */
:where(html.p-index) .i-steps-foot{
  display: flex;
  flex-wrap: wrap;
  gap: 14px 34px;
  align-items: center;
  margin-top: 52px;
}

:where(html.p-index) .i-steps-cta{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 28px;
  border-radius: 999px;
  background: var(--red);
  color: #ffffff;
  font-size: 15.5px;
  font-weight: 600;
  text-decoration: none;
  transition:
    background 0.3s var(--ease),
    box-shadow 0.3s var(--ease);
}

:where(html.p-index) .i-steps-cta:hover{
  background: var(--red-dark);
  box-shadow: 0 10px 26px rgba(13, 71, 161, 0.3);
}

:where(html.p-index) .i-steps-alt{
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 15.5px;
  font-weight: 600;
  color: var(--red);
  text-decoration: none;
}

:where(html.p-index) .i-steps-cta span,:where(html.p-index) .i-steps-alt span{
  transition: transform 0.3s var(--ease);
}

:where(html.p-index) .i-steps-cta:hover span,:where(html.p-index) .i-steps-alt:hover span{
  transform: translateX(4px);
}

:where(html.p-index) .i-steps-cta:focus-visible,:where(html.p-index) .i-steps-alt:focus-visible{
  outline: 2px solid var(--red);
  outline-offset: 4px;
}

@media (max-width: 980px) {
  :where(html.p-index) .i-steps-list{
    grid-template-columns: repeat(2, 1fr);
  }

  :where(html.p-index) .i-step:nth-child(odd){
    padding-left: 0;
    border-left: 0;
  }

  :where(html.p-index) .i-step:nth-child(odd)::before{
    left: 0;
  }

  :where(html.p-index) .i-step:nth-child(n + 3){
    border-top: 1px solid var(--line);
    margin-top: -1px;
  }
}

@media (max-width: 600px) {
  :where(html.p-index) .i-steps{
    padding-top: 78px;
    padding-bottom: 86px;
  }

  :where(html.p-index) .i-steps-head{
    margin-bottom: 44px;
  }

  :where(html.p-index) .i-steps-list{
    grid-template-columns: 1fr;
  }

  :where(html.p-index) .i-step{
    padding: 28px 0 26px;
  }

  :where(html.p-index) .i-step + .i-step{
    padding-left: 0;
    border-left: 0;
    border-top: 1px solid var(--line);
  }

  :where(html.p-index) .i-step + .i-step::before{
    left: 0;
  }

  :where(html.p-index) .i-step-meta{
    padding-top: 16px;
  }
}

/* =========================================================
   HEADER HİZASI
   Logo ve sağ aksiyonlar, sayfa içeriğiyle aynı hatta otursun.
   Header tam genişlikte kalır; yalnız iç ızgara container'a bağlanır.
   ========================================================= */
:where(html.p-index) .i-nav{
  padding-left: max(var(--gutter), (100% - var(--container)) / 2);
  padding-right: max(var(--gutter), (100% - var(--container)) / 2);
  justify-content: center;
}

:where(html.p-index) .i-nav > *{
  min-width: 0;
}

/* Eşit yan sütunlar ana menüyü header'ın merkezinde tutar. */
@media (min-width: 861px) {
  :where(html.p-index) .i-nav{
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  }

  :where(html.p-index) .i-nav-links{ justify-self: center; }
  :where(html.p-index) .i-nav-actions{ justify-self: end; }
}

@media (min-width: 861px) and (max-width: 1220px) {
  :where(html.p-index) .i-nav{ padding-inline: 24px; }
  :where(html.p-index) .i-logo span{ display: none; }
  :where(html.p-index) .i-nav-links{ gap: 2px; }
  :where(html.p-index) .i-nav-links .nav-trigger,:where(html.p-index) .i-nav-links .nav-direct{ padding-inline: 6px; font-size: 12px; }
}

@media (min-width: 1221px) and (max-width: 1400px) {
  :where(html.p-index) .i-logo{ gap: 10px; }
  :where(html.p-index) .i-logo img{ width: 80px; }
  :where(html.p-index) .i-logo span{ font-size: 11px; }
  :where(html.p-index) .i-nav-links .nav-trigger,:where(html.p-index) .i-nav-links .nav-direct{ padding-inline: 11px; }
}

/* ============================================================
   BÖLÜM: sections/audience  (eski: assets/css/sections/audience.css)
   Kapsam: p-index
   ============================================================ */
/* İhtiyaç seçimi: mavi ürün parlaması, etkileşimli kartlar ve kapsül bağlantılar. */
:where(html.p-index) .i-help{
  --help-copy-size: 16px;
  padding: clamp(72px,7vw,112px) var(--gutter);
  background: #fff;
}
:where(html.p-index) .i-help-inner{
  display: grid;
  grid-template-columns: minmax(0,.85fr) minmax(0,1.35fr);
  align-items: start;
  gap: clamp(40px,5.5vw,88px);
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
}
:where(html.p-index) .i-help-intro{ padding-top: 16px; }
:where(html.p-index) .i-help-intro .i-kicker{ font-size: 11px; letter-spacing: .15em; }
:where(html.p-index) .i-help-intro h2{
  margin: 23px 0 22px;
  color: #0c1628;
  font: 800 calc(var(--help-copy-size) * 3)/1.12 var(--display);
  letter-spacing: -.055em;
}
:where(html.p-index) .i-help-intro h2 span{ color: inherit; }
:where(html.p-index) .i-help-intro > p{ max-width: 365px; margin: 0; color: #697487; font-size: var(--help-copy-size); line-height: 1.8; }
/* A full photographic scene connects the device to its working environment. */
:where(html.p-index) .i-help-product{
  position: relative;
  width: min(100%,480px);
  aspect-ratio: 4 / 3;
  height: auto;
  margin: 32px 0 0;
  overflow: hidden;
  border-radius: 22px;
  background: #122237;
  box-shadow: 0 18px 40px -22px rgb(12 30 54 / 40%);
  isolation: isolate;
}
:where(html.p-index) .i-help-product::before,:where(html.p-index) .i-help-product::after{ content: none; }
:where(html.p-index) .i-help-product img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: none;
  filter: none;
  mix-blend-mode: normal;
}
:where(html.p-index) .i-help-options{ display: grid; gap: 24px; }
:where(html.p-index) .i-help-option{
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 30px 34px;
  border: 1px solid #e0e5ec;
  border-radius: 22px;
  background: #f8f9fb;
  transition: transform .32s cubic-bezier(.2,.7,.2,1),border-color .25s,box-shadow .32s,background .25s;
}
:where(html.p-index) .i-help-option-label{ display: flex; align-items: center; gap: 12px; min-height: 32px; padding-right: 64px; margin-bottom: 24px; }
:where(html.p-index) .i-help-option-label > span{ color: #6c7a8d; font-size: 12px; font-weight: 500; letter-spacing: .04em; }
:where(html.p-index) .i-help-option-label b{ padding: 7px 10px; border: 1px solid #e0e5ec; border-radius: 6px; background: #edf0f5; color: #526177; font-size: 9px; font-weight: 600; line-height: 1.4; letter-spacing: .07em; }
:where(html.p-index) .i-help-option h3{ margin: 0; }
:where(html.p-index) .i-help-main-link{ display: block; color: #142139; font: 600 clamp(27px,2.35vw,36px)/1.24 var(--display); letter-spacing: -.04em; }
:where(html.p-index) .i-help-main-link::after{ content: ''; position: absolute; z-index: 1; inset: 0; border-radius: 22px; }
:where(html.p-index) .i-help-go{
  position: absolute;
  top: 26px;
  right: 30px;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 1px solid #cdd5e0;
  border-radius: 50%;
  background: transparent;
  color: #7d899a;
  transition: background .25s,color .25s,border-color .25s;
}
:where(html.p-index) .i-help-go svg{ width: 21px; height: 21px; transition: transform .25s; }
:where(html.p-index) .i-help-option p{ max-width: 510px; margin: 16px 0 25px; color: #697587; font-size: 14px; line-height: 1.8; }
:where(html.p-index) .i-help-shortcuts{ position: relative; z-index: 2; display: flex; flex-wrap: wrap; align-items: center; gap: 9px; width: fit-content; max-width: 100%; margin-top: auto; }
:where(html.p-index) .i-help-shortcuts a{ display: inline-flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 40px; padding: 10px 14px; border: 1px solid #e4e8ee; border-radius: 999px; background: #eceff3; color: #465870; font-size: 11px; font-weight: 600; line-height: 1.5; transition: background .2s,color .2s,border-color .2s; }
:where(html.p-index) .i-help-shortcuts a span{ font-size: 16px; font-weight: 400; line-height: 1; }
:where(html.p-index) .i-help-shortcuts a:hover{ background: #e0eafb; color: #0d47a1; border-color: #bcd1ef; }
:where(html.p-index) .i-help-main-link:focus-visible{ outline: none; }
:where(html.p-index) .i-help-main-link:focus-visible::after{ outline: 3px solid #609ff2; outline-offset: 5px; }
:where(html.p-index) .i-help-shortcuts a:focus-visible{ outline: 3px solid #609ff2; outline-offset: 3px; }
@media(hover:hover) and (pointer:fine) {
  :where(html.p-index) .i-help-option:hover{ transform: translateY(-12px); border-color: var(--accent); background: #fafcff; box-shadow: 0 20px 38px -14px #0d47a130; }
  :where(html.p-index) .i-help-option:hover .i-help-go{ background: var(--accent); border-color: var(--accent); color: #fff; }
  :where(html.p-index) .i-help-option:hover .i-help-go svg{ transform: translate(2px,-2px); }
}
:where(html.p-index) .i-help-option:focus-within{ transform: translateY(-12px); border-color: var(--accent); box-shadow: 0 20px 38px -14px #0d47a130; }
:where(html.p-index) .i-help-option:focus-within .i-help-go{ background: var(--accent); border-color: var(--accent); color: #fff; }
:where(html.p-index) .i-help-option:focus-within .i-help-go svg{ transform: translate(2px,-2px); }
@media(max-width:1050px) {
  :where(html.p-index) .i-help-inner{ grid-template-columns: 1fr; gap: 36px; }
  :where(html.p-index) .i-help-intro{ display: grid; grid-template-columns: minmax(0,1fr) minmax(220px,.7fr); column-gap: 24px; align-items: center; padding-top: 0; }
  :where(html.p-index) .i-help-intro .i-kicker{ grid-column: 1; }
  :where(html.p-index) .i-help-intro h2{ grid-column: 1; margin-top: 20px; }
  :where(html.p-index) .i-help-intro > p{ grid-column: 1; }
  :where(html.p-index) .i-help-product{ grid-column: 2; grid-row: 1 / 4; height: auto; margin: 0; }
}
@media(max-width:620px) {
  :where(html.p-index) .i-help{ --help-copy-size: 14px; }
  :where(html.p-index) .i-help-intro{ display: block; }
  :where(html.p-index) .i-help-product{ width: min(100%,440px); height: auto; margin: 28px 0 0; border-radius: 18px; }
  :where(html.p-index) .i-help-options{ gap: 22px; }
  :where(html.p-index) .i-help-option{ padding: 24px; border-radius: 18px; }
  :where(html.p-index) .i-help-main-link{ font-size: 27px; }
  :where(html.p-index) .i-help-main-link::after{ border-radius: 18px; }
  :where(html.p-index) .i-help-option-label{ gap: 9px; padding-right: 45px; margin-bottom: 22px; }
  :where(html.p-index) .i-help-option-label b{ padding: 6px 8px; font-size: 8px; letter-spacing: .03em; }
  :where(html.p-index) .i-help-go{ top: 22px; right: 22px; width: 39px; height: 39px; }
  :where(html.p-index) .i-help-shortcuts{ gap: 8px; }
  :where(html.p-index) .i-help-shortcuts a{ min-height: 42px; padding: 10px 12px; font-size: 10px; }
}
@media(max-width:380px) {
  :where(html.p-index) .i-help{ --help-copy-size: 13px; }
  :where(html.p-index) .i-help-option{ padding: 22px 19px; }
  :where(html.p-index) .i-help-main-link{ font-size: 25px; }
  :where(html.p-index) .i-help-go{ right: 18px; }
  :where(html.p-index) .i-help-option p{ font-size: 13px; }
}
@media(prefers-reduced-motion:reduce) {
  :where(html.p-index) .i-help-option,:where(html.p-index) .i-help-go,:where(html.p-index) .i-help-go svg,:where(html.p-index) .i-help-shortcuts a{ transition: none; }
  :where(html.p-index) .i-help-option:hover,:where(html.p-index) .i-help-option:focus-within{ transform: none; }
}

/* ============================================================
   BÖLÜM: site  (eski: assets/css/site.css)
   Kapsam: şunlar hariç: p-index
   ============================================================ */
:root:where(:not(.p-index)){
  --font-body: "Plus Jakarta Sans", "Helvetica Neue", Arial, sans-serif;
  --font-display: "Plus Jakarta Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  /* Açık tema — istanbulanahtar.com paleti */
  --bg: #ffffff;
  --bg2: #f5f8fc;
  --panel: #ffffff;
  --panel2: #edf4fb;
  --line: #dce6f2;
  --line2: #c7d7ea;
  --red: #0d47a1;
  --red2: #093372;
  --red-solid: #0d47a1;
  --accent: #0d47a1;
  --yellow: #fbbd00;
  --white: #0f172a;
  --muted: #526276;
  --dim: #4a5568;
  --blue-soft: #eaf2fb;
  --blue-pale: #f4f8fd;
  --on-blue: #ffffff;
  --shadow: 0 18px 55px rgba(13, 71, 161, 0.1);
  --container: 1240px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* Ortak bileşen köprüsü — assets/css/components/*.css her iki sayfa grubunda da yüklenir.
   Aynı rolün iki adı vardır; burada home.css adları site.css değerlerine bağlanır.
   Değerler değiştirilmez, yalnızca eksik adlar tanımlanır. */
:root:where(:not(.p-index)){
  --gutter: 24px;
  --text: var(--white);
  --bg-soft: var(--bg2);
  --panel-soft: var(--panel2);
  --line-strong: var(--line2);
  --red-dark: var(--red2);
  --accent-soft: rgba(13, 71, 161, 0.09);
  --display: var(--font-display);
  --body: var(--font-body);
}
:where(html:not(.p-index)) *,*:where(:not(.p-index)){
  box-sizing: border-box;
}
html:where(:not(.p-index)){
  scroll-behavior: smooth;
  scroll-padding-top: 78px;
}
:where(html:not(.p-index)) body{
  margin: 0;
  background: var(--bg);
  color: var(--white);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
:where(html:not(.p-index)) h1,:where(html:not(.p-index)) h2,:where(html:not(.p-index)) h3,:where(html:not(.p-index)) .page-title{
  font-family: var(--font-display);
  font-weight: 800;
}
:where(html:not(.p-index)) body:before{
  content: "";
  position: fixed;
  inset: 0;
  z-index: 20;
  pointer-events: none;
  opacity: 0.018;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.78' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
:where(html:not(.p-index)) a{
  text-decoration: none;
  color: inherit;
}
:where(html:not(.p-index)) button,:where(html:not(.p-index)) input,:where(html:not(.p-index)) select,:where(html:not(.p-index)) textarea{
  font: inherit;
}
:where(html:not(.p-index)) .container{
  width: min(var(--container), calc(100% - 48px));
  margin: auto;
}
:where(html:not(.p-index)) .header{
  height: 78px;
  position: fixed;
  z-index: 100;
  top: 0;
  left: 0;
  width: 100%;
  background: rgba(255, 255, 255, 0.88);
  border-bottom: 1px solid rgba(13, 71, 161, 0.12);
  backdrop-filter: blur(18px) saturate(1.4);
}
:where(html:not(.p-index)) .header-inner{
  height: 100%;
  display: flex;
  align-items: center;
}
:where(html:not(.p-index)) .logo{
  display: flex;
  align-items: center;
  gap: 13px;
  min-width: 235px;
}
:where(html:not(.p-index)) .logo img{
  width: 88px;
  height: 29px;
  object-fit: contain;
}
:where(html:not(.p-index)) .logo span{
  font-size: 11px;
  text-transform: uppercase;
  line-height: 1.25;
  letter-spacing: 0.08em;
  color: #1f252a;
}
:where(html:not(.p-index)) .nav{
  display: flex;
  justify-content: center;
  gap: 28px;
  flex: 1;
}
:where(html:not(.p-index)) .nav a{
  font-size: 15px;
  color: #3c4752;
  position: relative;
  transition: 0.25s;
}
:where(html:not(.p-index)) .nav a:after{
  content: "";
  position: absolute;
  height: 1px;
  width: 100%;
  left: 0;
  bottom: -13px;
  background: var(--red);
  transform: scaleX(0);
  transition: 0.25s;
}
:where(html:not(.p-index)) .nav a:hover,:where(html:not(.p-index)) .nav a.active{
  color: #1e2430;
}
:where(html:not(.p-index)) .nav a.active:after,:where(html:not(.p-index)) .nav a:hover:after{
  transform: scaleX(1);
}
:where(html:not(.p-index)) .header-actions{
  min-width: 260px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 18px;
}
:where(html:not(.p-index)) .language{
  font-size: 13px;
  color: #4f5f6d;
}
:where(html:not(.p-index)) .language b{
  color: var(--red);
}
:where(html:not(.p-index)) .header-button{
  height: 36px;
  padding: 0 14px;
  display: flex;
  align-items: center;
  gap: 9px;
  background: linear-gradient(#0d48a0, #0d48a0);
  font-size: 12px;
  border-radius: 3px;
}
:where(html:not(.p-index)) .header-button i{
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #1e2430;
  box-shadow: 0 0 0 3px rgba(13, 71, 161, 0.15);
}
:where(html:not(.p-index)) .menu-button{
  display: none;
}
:where(html:not(.p-index)) .eyebrow{
  display: block;
  color: var(--red);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.17em;
}
:where(html:not(.p-index)) .hero{
  min-height: 165vh;
  padding-top: 78px;
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(
      circle at 73% 37%,
      rgba(13, 71, 161, 0.13),
      transparent 31%
    ),
    linear-gradient(#f3f4f5, #f7f7f7);
}
:where(html:not(.p-index)) .hero:after{
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, transparent, #c2c5c8, transparent);
}
:where(html:not(.p-index)) .tech-pattern{
  position: absolute;
  right: -4%;
  top: 110px;
  width: 62%;
  height: 500px;
  opacity: 0.2;
  background: linear-gradient(
      25deg,
      transparent 47%,
      #0b3b84 48%,
      transparent 49%
    )
    0 0/130px 66px;
  mask-image: linear-gradient(90deg, transparent, #ffffff);
  clip-path: inset(0 100% 0 0);
  animation: circuit-draw 4s 0.65s var(--ease) forwards;
}
:where(html:not(.p-index)) .hero-layout{
  min-height: calc(165vh - 213px);
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  align-items: start;
  position: relative;
  z-index: 2;
}
:where(html:not(.p-index)) .hero-copy{
  padding-top: clamp(115px, 15vh, 165px);
}
:where(html:not(.p-index)) .hero-copy h1{
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 68px;
  line-height: 1.06;
  letter-spacing: -0.0319em;
  text-transform: uppercase;
  margin: 24px 0 27px;
}
:where(html:not(.p-index)) .hero-title .title-line{
  display: block;
  overflow: hidden;
  color: inherit;
  padding-bottom: 0.04em;
  margin-bottom: -0.04em;
}
:where(html:not(.p-index)) .hero-title .title-line > span{
  display: block;
  color: inherit;
  transform: translateY(115%);
  animation: title-reveal 0.9s var(--ease) forwards;
}
:where(html:not(.p-index)) .hero-title .title-line:nth-child(2) > span{
  animation-delay: 0.12s;
}
:where(html:not(.p-index)) .hero-title .title-line:nth-child(3) > span{
  animation-delay: 0.24s;
}
:where(html:not(.p-index)) .hero-title b{
  color: var(--red);
}
:where(html:not(.p-index)) .hero-copy > .eyebrow,:where(html:not(.p-index)) .hero-copy > p{
  opacity: 0;
  animation: soft-reveal 0.8s 0.48s var(--ease) forwards;
}
:where(html:not(.p-index)) .hero-copy > p{
  animation-delay: 0.68s;
}
:where(html:not(.p-index)) .hero-actions{
  opacity: 0;
  transform: translateY(14px);
  animation: soft-reveal 0.8s 0.92s var(--ease) forwards;
}
:where(html:not(.p-index)) .hero-copy p{
  font-size: 17px;
  line-height: 1.75;
  color: var(--muted);
  margin: 0;
  max-width: 590px;
}
:where(html:not(.p-index)) .actions{
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 30px;
}
:where(html:not(.p-index)) .button{
  height: 47px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 25px;
  border: 1px solid #b4b8bc;
  padding: 0 21px;
  font-size: 15px;
  font-weight: 700;
  border-radius: 3px;
  transition: 0.25s;
}
:where(html:not(.p-index)) .button.primary{
  background: var(--red);
  border-color: var(--red);
  box-shadow: 0 12px 34px rgba(13, 71, 161, 0.15);
}
:where(html:not(.p-index)) .button.primary:hover{
  background: #0d48a0;
  transform: translateY(-2px);
}
:where(html:not(.p-index)) .button.secondary:hover{
  background: #1c2126;
  border-color: #1c2126;
  color: #f6f6f6;
}
:where(html:not(.p-index)) .hero-product{
  height: 610px;
  position: sticky;
  top: 96px;
  display: grid;
  place-items: center;
}
:where(html:not(.p-index)) .hero-product > img{
  --mx: 0px;
  --my: -12px;
  --scroll-y: 0px;
  --scroll-scale: 1;
  position: relative;
  z-index: 3;
  width: 105%;
  max-width: 700px;
  filter: drop-shadow(0 35px 30px rgba(20, 30, 48, 0.160));
  transform: translate3d(var(--mx), calc(var(--my) + var(--scroll-y)), 0)
    scale(var(--scroll-scale));
  transition: 0.18s ease-out;
  animation: device-enter 1.15s 0.42s var(--ease) both;
}
:where(html:not(.p-index)) .intro-done .hero-product > img{
  animation: none;
}
:where(html:not(.p-index)) .product-glow{
  position: absolute;
  width: 520px;
  height: 520px;
  border: 1px solid rgba(13, 71, 161, 0.22);
  border-radius: 50%;
  box-shadow:
    inset 0 0 90px rgba(13, 71, 161, 0.03),
    0 0 130px rgba(13, 71, 161, 0.06);
  opacity: 0;
  animation: glow-enter 1.8s 0.8s var(--ease) forwards;
}
:where(html:not(.p-index)) .product-glow:before,:where(html:not(.p-index)) .product-glow:after{
  content: "";
  position: absolute;
  inset: 45px;
  border: 1px dashed rgba(13, 71, 161, 0.08);
  border-radius: 50%;
  animation: rotate 35s linear infinite;
}
:where(html:not(.p-index)) .product-glow:after{
  inset: 95px;
  border-style: solid;
  border-color: rgba(13, 71, 161, 0.08);
  animation-direction: reverse;
}
:where(html:not(.p-index)) .platform{
  position: absolute;
  z-index: 1;
  bottom: 55px;
  width: 620px;
  height: 108px;
  border-radius: 50%;
  border: 1px solid #c0c3c6;
  background: radial-gradient(ellipse, #c3c6c8, #ebecec 46%, #fcfcfd 70%);
  box-shadow: 0 30px 70px #ffffff;
}
:where(html:not(.p-index)) .platform:after{
  content: "";
  position: absolute;
  inset: 15px 30px;
  border: 1px solid rgba(13, 71, 161, 0.55);
  border-radius: 50%;
  box-shadow: 0 0 25px rgba(13, 71, 161, 0.2);
}
:where(html:not(.p-index)) .platform i{
  position: absolute;
  bottom: 17px;
  left: 15%;
  width: 70%;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--red), transparent);
  box-shadow: 0 0 11px var(--red);
}
:where(html:not(.p-index)) .product-label{
  position: absolute;
  z-index: 5;
  right: 0;
  top: 68px;
  padding: 12px 15px;
  background: rgba(255, 255, 255, 0.9);
}
:where(html:not(.p-index)) .product-label b,:where(html:not(.p-index)) .product-label span{
  display: block;
}
:where(html:not(.p-index)) .product-label b{
  font-size: 15px;
}
:where(html:not(.p-index)) .product-label span{
  font-size: 12px;
  color: #595f63;
  text-transform: uppercase;
  margin-top: 4px;
}
:where(html:not(.p-index)) .trust-grid{
  height: 135px;
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--line);
  background: #f2f3f4;
}
:where(html:not(.p-index)) .trust-grid > div{
  display: grid;
  grid-template-columns: 47px 1fr;
  grid-template-rows: auto auto;
  align-content: center;
  padding: 0 25px;
  border-right: 1px solid var(--line);
}
:where(html:not(.p-index)) .trust-grid > div:last-child{
  border: 0;
}
:where(html:not(.p-index)) .metric-icon{
  grid-row: 1/3;
  font-style: normal;
  color: var(--red);
  font-size: 24px;
  align-self: center;
}
:where(html:not(.p-index)) .trust-grid b{
  font-size: 24px;
  letter-spacing: -0.0174em;
}
:where(html:not(.p-index)) .trust-grid b em{
  font-style: normal;
}
:where(html:not(.p-index)) .trust-grid span{
  font-size: 13px;
  color: #4f5f6d;
  margin-top: 5px;
}
:where(html:not(.p-index)) .section-space{
  padding: 120px 0;
}
:where(html:not(.p-index)) .section-head{
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 52px;
}
/* Ürünler / Teknoloji sayfalarında başlık blokları dikey dizilir */
:where(html:not(.p-index)) .page-stacked-head .section-head,:where(html:not(.p-index)) .section-head:has(> p){
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}

:where(html:not(.p-index)) .section-head > p{
  max-width: 60ch;
  margin: 0;
  color: var(--muted);
  line-height: 1.7;
}
:where(html:not(.p-index)) .section-head h2{
  font-size: 50px;
  line-height: 1.04;
  letter-spacing: -0.0261em;
  text-transform: uppercase;
  margin: 14px 0 0;
}
:where(html:not(.p-index)) .section-head > p{
  width: 420px;
  color: var(--muted);
  font-size: 17px;
  line-height: 1.7;
  margin: 0 0 3px;
}
:where(html:not(.p-index)) .capability-section{
  background: #f4f5f5;
}
:where(html:not(.p-index)) .capability-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}
:where(html:not(.p-index)) .capability-card{
  min-height: 265px;
  padding: 30px;
  position: relative;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: #f2f3f4;
  transition: 0.35s;
}
:where(html:not(.p-index)) .capability-card:after{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(13, 71, 161, 0.1), transparent 48%);
  opacity: 0;
  transition: 0.35s;
}
:where(html:not(.p-index)) .capability-card:hover{
  z-index: 2;
  transform: translateY(-4px);
  background: #e9ebec;
}
:where(html:not(.p-index)) .capability-card:hover:after{
  opacity: 1;
}
:where(html:not(.p-index)) .capability-card > *{
  position: relative;
  z-index: 1;
}
:where(html:not(.p-index)) .capability-card > i{
  height: 48px;
  color: var(--red);
  font-size: 27px;
  font-style: normal;
  font-weight: 600;
}
:where(html:not(.p-index)) .capability-card > span{
  position: absolute;
  top: 27px;
  right: 28px;
  color: #5d7081;
  font-size: 13px;
}
:where(html:not(.p-index)) .capability-card h3{
  font-size: 19px;
  margin: 18px 0 11px;
}
:where(html:not(.p-index)) .capability-card p{
  max-width: 250px;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.65;
}
:where(html:not(.p-index)) .capability-card > b{
  position: absolute;
  bottom: 25px;
  font-size: 13px;
}
:where(html:not(.p-index)) .flagship{
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: linear-gradient(90deg, #f6f7f7, #f0f1f1);
}
:where(html:not(.p-index)) .flagship-layout{
  display: grid;
  grid-template-columns: 1.08fr 0.92fr;
  align-items: center;
  gap: 75px;
}
:where(html:not(.p-index)) .flagship-visual{
  height: 565px;
  border: 1px solid var(--line);
  background:
    radial-gradient(circle, rgba(13, 71, 161, 0.19), transparent 42%), #f4f5f5;
  display: grid;
  place-items: center;
  position: relative;
  overflow: hidden;
}
:where(html:not(.p-index)) .flagship-visual:before{
  content: "";
  position: absolute;
  inset: 25px;
  border: 1px solid rgba(13, 71, 161, 0.05);
}
:where(html:not(.p-index)) .flagship-visual img{
  z-index: 2;
  width: 94%;
  filter: drop-shadow(0 30px 25px #ffffff);
}
:where(html:not(.p-index)) .flagship-visual small{
  position: absolute;
  z-index: 3;
  bottom: 20px;
  left: 24px;
  font-size: 11px;
  letter-spacing: 0.13em;
  color: #4f5f6d;
}
:where(html:not(.p-index)) .orbit{
  position: absolute;
  width: 470px;
  height: 470px;
  border: 1px solid rgba(13, 71, 161, 0.3);
  border-radius: 50%;
}
:where(html:not(.p-index)) .orbit:after{
  content: "";
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--red);
  top: 44px;
  right: 63px;
  box-shadow: 0 0 17px var(--red);
}
:where(html:not(.p-index)) .flagship-copy h2{
  font-size: 58px;
  text-transform: uppercase;
  letter-spacing: -0.029em;
  margin: 13px 0 5px;
}
:where(html:not(.p-index)) .flagship-copy h2 em{
  font-style: normal;
  color: var(--red);
}
:where(html:not(.p-index)) .flagship-copy > h3{
  font-size: 24px;
  line-height: 1.35;
  font-weight: 500;
  color: #37424d;
  max-width: 520px;
  margin: 0 0 28px;
}
:where(html:not(.p-index)) .feature-list{
  border-top: 1px solid var(--line);
}
:where(html:not(.p-index)) .feature-list > div{
  display: grid;
  grid-template-columns: 55px 1fr;
  padding: 17px 0;
  border-bottom: 1px solid var(--line);
}
/* ikon ilk kolonda, başlık ve açıklama ikinci kolonda alt alta */
:where(html:not(.p-index)) .feature-list > div > i{
  grid-column: 1;
  grid-row: 1 / span 2;
}
:where(html:not(.p-index)) .feature-list > div > b,:where(html:not(.p-index)) .feature-list > div > small{
  grid-column: 2;
}
:where(html:not(.p-index)) .feature-list i{
  align-self: start;
  margin-top: 5px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--red);
  font-style: normal;
}
:where(html:not(.p-index)) .feature-list b,:where(html:not(.p-index)) .feature-list small{
  display: block;
}
:where(html:not(.p-index)) .feature-list b{
  font-size: 15px;
  text-transform: uppercase;
}
:where(html:not(.p-index)) .feature-list small{
  font-size: 14px;
  color: #4f5f6d;
  margin-top: 5px;
}
:where(html:not(.p-index)) .text-link{
  font-size: 14px;
  font-weight: 700;
}
:where(html:not(.p-index)) .coverage-preview{
  background: #f3f4f4;
  position: relative;
}
:where(html:not(.p-index)) .coverage-preview:after{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.12;
  background: linear-gradient(
      25deg,
      transparent 47%,
      #acb0b3 48%,
      transparent 49%
    )
    100% 20%/120px 65px no-repeat;
}
:where(html:not(.p-index)) .search-panel{
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(4, 1fr) 120px;
  gap: 9px;
  padding: 21px;
  border: 1px solid var(--line2);
  background: #eff0f0;
}
:where(html:not(.p-index)) .search-panel label{
  height: 70px;
  padding: 12px 14px;
  background: #e9ebec;
  border: 1px solid #ccced0;
}
:where(html:not(.p-index)) .search-panel label > span{
  display: block;
  color: #5a6c7d;
  font-size: 12px;
  letter-spacing: 0.13em;
  margin-bottom: 8px;
}
:where(html:not(.p-index)) .search-panel select{
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  color: #191e22;
  font-size: 14px;
}
:where(html:not(.p-index)) .search-panel select option{
  background: #e9ebec;
}
:where(html:not(.p-index)) .search-panel .button{
  height: 70px;
}
:where(html:not(.p-index)) .sample-result{
  position: relative;
  z-index: 2;
  min-height: 78px;
  display: grid;
  grid-template-columns: 1.3fr 0.8fr 1.1fr 1fr 0.65fr;
  align-items: center;
  padding: 0 23px;
  border: 1px solid var(--line);
  border-top: 0;
  background: #f1f2f2;
  font-size: 14px;
}
:where(html:not(.p-index)) .sample-result > div{
  display: flex;
  align-items: center;
  gap: 12px;
}
:where(html:not(.p-index)) .sample-result > div > i{
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--red);
  box-shadow: 0 0 12px var(--red);
}
:where(html:not(.p-index)) .sample-result small,:where(html:not(.p-index)) .sample-result b{
  display: block;
}
:where(html:not(.p-index)) .sample-result small{
  font-size: 11px;
  color: #4f5f6d;
  letter-spacing: 0.12em;
  margin-bottom: 5px;
}
:where(html:not(.p-index)) .sample-result > a{
  font-weight: 700;
}
:where(html:not(.p-index)) .updates{
  background: #f6f7f7;
  border-top: 1px solid var(--line);
}
:where(html:not(.p-index)) .section-head.compact{
  align-items: center;
}
:where(html:not(.p-index)) .section-head.compact h2{
  font-size: 42px;
}
:where(html:not(.p-index)) .update-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
:where(html:not(.p-index)) .update-grid article{
  min-height: 255px;
  padding: 27px;
  border: 1px solid var(--line);
  background: linear-gradient(135deg, #eceded, #f3f4f5);
  position: relative;
}
:where(html:not(.p-index)) .update-grid article > span{
  display: inline-block;
  padding: 5px 7px;
  background: var(--red);
  font-size: 11px;
}
:where(html:not(.p-index)) .update-grid article > small{
  float: right;
  color: #4f5f6d;
  font-size: 12px;
}
:where(html:not(.p-index)) .update-grid h3{
  font-size: 18px;
  line-height: 1.35;
  margin: 28px 0 12px;
  max-width: 290px;
}
:where(html:not(.p-index)) .update-grid p{
  color: #4f5f6e;
  font-size: 15px;
  line-height: 1.6;
}
:where(html:not(.p-index)) .update-grid a{
  position: absolute;
  bottom: 25px;
  font-size: 13px;
  font-weight: 700;
}
:where(html:not(.p-index)) .support-preview{
  background: #f2f3f4;
  border-top: 1px solid var(--line);
}
:where(html:not(.p-index)) .support-grid{
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}
:where(html:not(.p-index)) .support-grid > a{
  min-height: 205px;
  padding: 25px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  transition: 0.3s;
}
:where(html:not(.p-index)) .support-grid > a:hover{
  background: #e7e8e9;
  transform: translateY(-3px);
}
:where(html:not(.p-index)) .support-grid i{
  width: 42px;
  height: 42px;
  border: 1px solid rgba(13, 71, 161, 0.45);
  display: grid;
  place-items: center;
  color: var(--red);
  font-style: normal;
  font-size: 19px;
}
:where(html:not(.p-index)) .support-grid b{
  font-size: 15px;
  text-transform: uppercase;
  margin-top: 30px;
}
:where(html:not(.p-index)) .support-grid span{
  font-size: 13px;
  color: #505f6d;
  margin-top: 7px;
}
:where(html:not(.p-index)) .global-section{
  background: #f7f7f7;
  border-top: 1px solid var(--line);
}
:where(html:not(.p-index)) .global-layout{
  display: grid;
  grid-template-columns: 1.45fr 0.55fr;
  gap: 75px;
  align-items: center;
}
:where(html:not(.p-index)) .map{
  height: 460px;
  border: 1px solid var(--line);
  position: relative;
  overflow: hidden;
  background: radial-gradient(
    circle at 53% 48%,
    rgba(13, 71, 161, 0.07),
    transparent 43%
  );
}
:where(html:not(.p-index)) .world-shape{
  position: absolute;
  inset: 40px;
  background: #e3e4e5;
  clip-path: polygon(
    2% 28%,
    10% 13%,
    23% 8%,
    30% 20%,
    27% 36%,
    19% 39%,
    18% 55%,
    12% 62%,
    8% 48%,
    2% 45%,
    20% 68%,
    26% 72%,
    31% 88%,
    26% 99%,
    21% 82%,
    34% 20%,
    43% 8%,
    52% 14%,
    59% 9%,
    71% 16%,
    85% 12%,
    98% 31%,
    90% 47%,
    77% 48%,
    70% 61%,
    61% 56%,
    56% 76%,
    48% 97%,
    42% 83%,
    43% 58%,
    35% 47%,
    75% 70%,
    84% 67%,
    96% 82%,
    91% 94%,
    81% 91%,
    75% 80%
  );
}
:where(html:not(.p-index)) .map:after{
  content: "";
  position: absolute;
  inset: 40px;
  background: radial-gradient(circle, #acb0b3 0.8px, transparent 1px) 0 0/8px
    8px;
  opacity: 0.3;
  mask-image: linear-gradient(#ffffff, #ffffff);
}
:where(html:not(.p-index)) .map > span{
  position: absolute;
  z-index: 2;
  left: 25px;
  top: 23px;
  color: #4f5f6d;
  font-size: 12px;
  letter-spacing: 0.16em;
}
:where(html:not(.p-index)) .pin{
  position: absolute;
  z-index: 3;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--red);
  box-shadow:
    0 0 0 5px rgba(13, 71, 161, 0.13),
    0 0 16px var(--red);
}
:where(html:not(.p-index)) .pin:after{
  content: "";
  position: absolute;
  inset: -8px;
  border: 1px solid rgba(13, 71, 161, 0.5);
  border-radius: 50%;
  animation: pulse 2.5s infinite;
}
:where(html:not(.p-index)) .p1{
  left: 20%;
  top: 38%;
}
:where(html:not(.p-index)) .p2{
  left: 47%;
  top: 31%;
}
:where(html:not(.p-index)) .p3{
  left: 55%;
  top: 42%;
}
:where(html:not(.p-index)) .p4{
  left: 67%;
  top: 36%;
}
:where(html:not(.p-index)) .p5{
  left: 77%;
  top: 43%;
}
:where(html:not(.p-index)) .p6{
  left: 50%;
  top: 66%;
}
:where(html:not(.p-index)) .global-copy h2{
  font-size: 52px;
  text-transform: uppercase;
  line-height: 1.02;
  letter-spacing: -0.0261em;
  margin: 14px 0 22px;
}
:where(html:not(.p-index)) .global-copy p{
  font-size: 16px;
  line-height: 1.7;
  color: var(--muted);
}
:where(html:not(.p-index)) .global-copy > div{
  display: flex;
  align-items: baseline;
  gap: 11px;
  padding: 20px 0;
  margin: 23px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
:where(html:not(.p-index)) .global-copy > div b{
  font-size: 34px;
}
:where(html:not(.p-index)) .global-copy > div span{
  font-size: 13px;
  color: #4f5f6d;
}
:where(html:not(.p-index)) .cta{
  padding: 110px 0;
  background:
    radial-gradient(circle at center, rgba(13, 71, 161, 0.1), transparent 50%),
    #f5f6f6;
  border-top: 1px solid var(--line);
  text-align: center;
}
:where(html:not(.p-index)) .cta-inner h2{
  font-size: 55px;
  text-transform: uppercase;
  letter-spacing: -0.0261em;
  margin: 15px 0;
}
:where(html:not(.p-index)) .cta-inner p{
  font-size: 16px;
  color: var(--muted);
}
:where(html:not(.p-index)) .cta-inner .button{
  margin-top: 20px;
}
:where(html:not(.p-index)) .footer{
  background: #fcfcfd;
  border-top: 1px solid var(--line);
  padding: 62px 0 20px;
}
:where(html:not(.p-index)) .footer-main{
  display: grid;
  grid-template-columns: 1.2fr 1fr 0.7fr 0.7fr;
  gap: 60px;
  padding-bottom: 55px;
}
:where(html:not(.p-index)) .footer-main > p{
  font-size: 15px;
  line-height: 1.7;
  color: #4f5f6d;
}
:where(html:not(.p-index)) .footer-main > div{
  display: flex;
  flex-direction: column;
  gap: 10px;
}
:where(html:not(.p-index)) .footer-main > div b{
  font-size: 12px;
  color: #4f5f6d;
  letter-spacing: 0.13em;
  margin-bottom: 8px;
}
:where(html:not(.p-index)) .footer-main > div a{
  font-size: 14px;
  color: #44515d;
}
:where(html:not(.p-index)) .footer-bottom{
  display: flex;
  justify-content: space-between;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  font-size: 11px;
  color: #5a5e63;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
:where(html:not(.p-index)) .footer-bottom i{
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--red);
  margin-left: 6px;
}
:where(html:not(.p-index)) .reveal{
  opacity: 1;
  transform: none;
  animation: fade-up 0.7s var(--ease) both;
}
:where(html:not(.p-index)) .reveal.visible{
  opacity: 1;
  transform: none;
}
:where(html:not(.p-index)) .delay-1{
  transition-delay: 0.1s;
}
:where(html:not(.p-index)) .delay-2{
  transition-delay: 0.2s;
}
@keyframes rotate {
  to {
    transform: rotate(360deg);
  }
}
@keyframes pulse {
  0%,
  100% {
    transform: scale(0.5);
    opacity: 0.8;
  }
  70% {
    transform: scale(1.3);
    opacity: 0;
  }
}
@keyframes fade-up {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes title-reveal {
  from {
    transform: translateY(115%);
  }
  to {
    transform: translateY(0);
  }
}
@keyframes soft-reveal {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes device-enter {
  from {
    opacity: 0;
    transform: translate3d(0, 40px, 0) scale(0.94);
  }
  to {
    opacity: 1;
    transform: translate3d(0, -12px, 0) scale(1);
  }
}
@keyframes glow-enter {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes circuit-draw {
  from {
    clip-path: inset(0 100% 0 0);
    opacity: 0;
  }
  to {
    clip-path: inset(0 0 0 0);
    opacity: 0.2;
  }
}
/* inner pages */
:where(html:not(.p-index)) .page-hero{
  padding: 150px 0 75px;
  border-bottom: 1px solid var(--line);
  background:
    radial-gradient(
      circle at 80% 20%,
      rgba(13, 71, 161, 0.09),
      transparent 35%
    ),
    #f5f6f6;
}
:where(html:not(.p-index)) .breadcrumbs{
  font-size: 13px;
  color: #5b6d7d;
  margin-bottom: 28px;
}
:where(html:not(.p-index)) .breadcrumbs b{
  color: var(--red);
}
:where(html:not(.p-index)) .page-hero h1{
  font-size: 62px;
  line-height: 1.08;
  letter-spacing: -0.029em;
  text-transform: uppercase;
  margin: 0;
}
:where(html:not(.p-index)) .page-hero p{
  max-width: 650px;
  font-size: 17px;
  line-height: 1.7;
  color: var(--muted);
  margin: 22px 0 0;
}
:where(html:not(.p-index)) .page-section{
  padding: 90px 0;
}
:where(html:not(.p-index)) .page-section.alt{
  background: #f2f3f4;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
:where(html:not(.p-index)) .page-title{
  font-size: 38px;
  text-transform: uppercase;
  letter-spacing: -0.0232em;
  margin: 0 0 35px;
}
:where(html:not(.p-index)) .subnav{
  position: sticky;
  z-index: 50;
  top: 78px;
  background: rgba(255, 255, 255, 0.9);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(15px);
}
:where(html:not(.p-index)) .subnav .container{
  height: 55px;
  display: flex;
  gap: 32px;
  align-items: center;
}
:where(html:not(.p-index)) .subnav a{
  font-size: 14px;
  color: #5b6d7e;
}
:where(html:not(.p-index)) .subnav a.active{
  height: 100%;
  display: flex;
  align-items: center;
  color: #1e2430;
  border-bottom: 2px solid var(--red);
}
:where(html:not(.p-index)) .product-page-hero{
  padding: 130px 0 70px;
  min-height: 720px;
  display: flex;
  align-items: center;
  background:
    radial-gradient(
      circle at 72% 45%,
      rgba(13, 71, 161, 0.17),
      transparent 32%
    ),
    #f5f6f6;
}
:where(html:not(.p-index)) .product-page-layout{
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  align-items: center;
}
:where(html:not(.p-index)) .product-page-copy h1{
  font-size: 62px;
  margin: 0;
}
:where(html:not(.p-index)) .product-page-copy h1 em{
  color: var(--red);
  font-style: normal;
}
:where(html:not(.p-index)) .product-page-copy > p{
  font-size: 22px;
  color: #404d59;
  line-height: 1.4;
}
:where(html:not(.p-index)) .product-page-benefits{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin: 35px 0;
}
:where(html:not(.p-index)) .product-page-benefits > div{
  padding-right: 18px;
}
:where(html:not(.p-index)) .product-page-benefits i{
  color: var(--red);
  font-style: normal;
  font-size: 27px;
}
:where(html:not(.p-index)) .product-page-benefits b,:where(html:not(.p-index)) .product-page-benefits small{
  display: block;
}
:where(html:not(.p-index)) .product-page-benefits b{
  font-size: 14px;
  margin: 13px 0 6px;
}
:where(html:not(.p-index)) .product-page-benefits small{
  font-size: 13px;
  line-height: 1.5;
  color: #4f5f6d;
}
:where(html:not(.p-index)) .product-page-visual{
  height: 540px;
  display: grid;
  place-items: center;
  position: relative;
}
:where(html:not(.p-index)) .product-page-visual img{
  z-index: 2;
  width: 100%;
  filter: drop-shadow(0 35px 30px #ffffff);
}
:where(html:not(.p-index)) .product-page-visual:after{
  content: "";
  position: absolute;
  bottom: 35px;
  width: 88%;
  height: 90px;
  border-radius: 50%;
  background: radial-gradient(ellipse, #bfc2c5, #f5f6f6 70%);
  border-bottom: 1px solid var(--red);
}
:where(html:not(.p-index)) .content-grid-3{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
:where(html:not(.p-index)) .content-card{
  border: 1px solid var(--line);
  background: #eff0f0;
  padding: 28px;
  min-height: 200px;
}
:where(html:not(.p-index)) .content-card i{
  color: var(--red);
  font-style: normal;
  font-size: 28px;
}
:where(html:not(.p-index)) .content-card h3{
  font-size: 17px;
  margin: 22px 0 11px;
}
:where(html:not(.p-index)) .content-card p{
  font-size: 14px;
  line-height: 1.65;
  color: #5d6f80;
}
:where(html:not(.p-index)) .download-layout{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 15px;
}
:where(html:not(.p-index)) .download-card{
  border: 1px solid var(--line);
  padding: 25px;
  background: #eff0f0;
}
:where(html:not(.p-index)) .download-card > h3{
  font-size: 16px;
  text-transform: uppercase;
}
:where(html:not(.p-index)) .download-card > p{
  display: flex;
  justify-content: space-between;
  padding: 13px 0;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
  color: #475663;
}
:where(html:not(.p-index)) .download-card button{
  border: 1px solid #babec1;
  background: transparent;
  color: #1e2430;
  padding: 10px 14px;
  font-size: 13px;
}
:where(html:not(.p-index)) .accessory-product{
  height: 150px;
  width: 100%;
  object-fit: contain;
}
:where(html:not(.p-index)) .about-intro{
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 80px;
  align-items: center;
}
:where(html:not(.p-index)) .about-intro h2{
  font-size: 46px;
  text-transform: uppercase;
  line-height: 1.08;
  letter-spacing: -0.0232em;
}
:where(html:not(.p-index)) .about-intro p{
  font-size: 17px;
  line-height: 1.8;
  color: #4b5a67;
}
:where(html:not(.p-index)) .timeline-full{
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  position: relative;
  padding-top: 30px;
}
:where(html:not(.p-index)) .timeline-full:before{
  content: "";
  position: absolute;
  top: 44px;
  left: 0;
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, var(--red), #c3c6c9);
}
:where(html:not(.p-index)) .timeline-full article{
  position: relative;
  padding: 48px 22px 0 0;
}
:where(html:not(.p-index)) .timeline-full article:before{
  content: "";
  position: absolute;
  top: 8px;
  left: 0;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #f2f3f4;
  border: 1px solid var(--red);
}
:where(html:not(.p-index)) .timeline-full article:first-child:before,:where(html:not(.p-index)) .timeline-full article:last-child:before{
  background: var(--red);
  box-shadow: 0 0 14px var(--red);
}
:where(html:not(.p-index)) .timeline-full b{
  display: block;
  color: var(--red);
  font-size: 22px;
}
:where(html:not(.p-index)) .timeline-full span{
  display: block;
  font-size: 15px;
  margin: 10px 0;
}
:where(html:not(.p-index)) .timeline-full p{
  font-size: 13px;
  line-height: 1.5;
  color: #505f6d;
}
:where(html:not(.p-index)) .filter-page{
  padding: 125px 0 90px;
}
:where(html:not(.p-index)) .advanced-search{
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 9px;
  padding: 20px;
  border: 1px solid var(--line);
  background: #f0f1f1;
}
:where(html:not(.p-index)) .advanced-search label{
  height: 70px;
  padding: 11px 13px;
  border: 1px solid #c9cccf;
  background: #e9ebec;
}
:where(html:not(.p-index)) .advanced-search label span{
  display: block;
  color: #5a5e63;
  font-size: 12px;
  margin-bottom: 10px;
}
:where(html:not(.p-index)) .advanced-search select{
  width: 100%;
  background: transparent;
  border: 0;
  color: #1d2227;
  font-size: 14px;
}
:where(html:not(.p-index)) .advanced-actions{
  grid-column: 1/-1;
  display: flex;
  justify-content: flex-end;
  gap: 9px;
}
:where(html:not(.p-index)) .advanced-actions button{
  width: 120px;
}
:where(html:not(.p-index)) .quick-tags{
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 20px 0 28px;
}
:where(html:not(.p-index)) .quick-tags button{
  padding: 8px 11px;
  border: 1px solid #c7cacd;
  background: transparent;
  color: #546575;
  font-size: 13px;
}
:where(html:not(.p-index)) .quick-tags button.active{
  border-color: var(--red);
  color: #fff;
  background: var(--red);
}
:where(html:not(.p-index)) .data-table{
  border: 1px solid var(--line);
  overflow-x: auto;
}
:where(html:not(.p-index)) .data-row{
  min-width: 1160px;
  display: grid;
  grid-template-columns: 1.25fr 0.8fr 1.4fr 1fr 0.8fr 1fr 1fr;
  align-items: center;
  min-height: 69px;
  padding: 0 20px;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
}
:where(html:not(.p-index)) .data-row.head{
  min-height: 42px;
  color: #5b6d7d;
  font-size: 12px;
  background: #f1f2f2;
}
:where(html:not(.p-index)) .data-row:last-child{
  border: 0;
}
:where(html:not(.p-index)) .data-row b,:where(html:not(.p-index)) .data-row small{
  display: block;
}
:where(html:not(.p-index)) .data-row small{
  color: #595f63;
  margin-top: 4px;
}
:where(html:not(.p-index)) .badge{
  display: inline-block;
  padding: 5px 7px;
  font-size: 12px;
  border: 1px solid #0b3b84;
  color: #e3a83e;
}
:where(html:not(.p-index)) .badge.green{
  border-color: #295b3d;
  color: #59bc7d;
}
:where(html:not(.p-index)) .support-page-search{
  display: flex;
  max-width: 720px;
  height: 55px;
  margin-top: 30px;
}
:where(html:not(.p-index)) .support-page-search input{
  flex: 1;
  background: #e9ebec;
  border: 1px solid #c2c5c7;
  color: #1e2430;
  padding: 0 17px;
}
:where(html:not(.p-index)) .support-page-search button{
  width: 60px;
  border: 0;
  background: var(--red);
  color: #1e2430;
}
:where(html:not(.p-index)) .support-modules{
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
}
:where(html:not(.p-index)) .support-module{
  min-height: 170px;
  padding: 22px;
  border: 1px solid var(--line);
  background: #eff0f0;
}
:where(html:not(.p-index)) .support-module i{
  color: var(--red);
  font-style: normal;
  font-size: 25px;
}
:where(html:not(.p-index)) .support-module b,:where(html:not(.p-index)) .support-module small{
  display: block;
}
:where(html:not(.p-index)) .support-module b{
  font-size: 14px;
  text-transform: uppercase;
  margin-top: 24px;
}
:where(html:not(.p-index)) .support-module small{
  font-size: 13px;
  color: #4f5f6d;
  margin-top: 7px;
}
:where(html:not(.p-index)) .document-list{
  margin-top: 25px;
  border: 1px solid var(--line);
}
:where(html:not(.p-index)) .document-row{
  display: grid;
  grid-template-columns: 1.7fr 0.7fr 1fr 0.7fr 1fr;
  align-items: center;
  min-height: 68px;
  padding: 0 20px;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
}
:where(html:not(.p-index)) .document-row.head{
  min-height: 40px;
  color: #5d7081;
  font-size: 12px;
}
:where(html:not(.p-index)) .document-row:last-child{
  border: 0;
}
:where(html:not(.p-index)) .document-row button{
  padding: 7px 10px;
  border: 1px solid #c4c7c9;
  background: #e9ebec;
  color: #1e2430;
  font-size: 12px;
  margin-right: 5px;
}
:where(html:not(.p-index)) .contact-page-grid{
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 20px;
}
:where(html:not(.p-index)) .department-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
:where(html:not(.p-index)) .department-card{
  min-height: 180px;
  padding: 25px;
  border: 1px solid var(--line);
  background: #eff0f0;
}
:where(html:not(.p-index)) .department-card.active{
  border-color: var(--red);
  background: linear-gradient(135deg, rgba(13, 71, 161, 0.1), #eff0f0);
}
:where(html:not(.p-index)) .department-card i{
  color: var(--red);
  font-style: normal;
  font-size: 27px;
}
:where(html:not(.p-index)) .department-card h3{
  font-size: 16px;
  text-transform: uppercase;
  margin: 18px 0 8px;
}
:where(html:not(.p-index)) .department-card p{
  font-size: 13px;
  line-height: 1.6;
  color: #4f5f6d;
}
:where(html:not(.p-index)) .form-panel{
  padding: 34px;
  border: 1px solid var(--line);
  background: #eff0f0;
}
:where(html:not(.p-index)) .form-panel h2{
  font-size: 28px;
  text-transform: uppercase;
  margin: 0 0 28px;
}
:where(html:not(.p-index)) .form-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
:where(html:not(.p-index)) .field.full{
  grid-column: 1/-1;
}
:where(html:not(.p-index)) .field label{
  display: block;
  color: #595f63;
  font-size: 12px;
  letter-spacing: 0.11em;
  margin-bottom: 8px;
}
:where(html:not(.p-index)) .field input,:where(html:not(.p-index)) .field select,:where(html:not(.p-index)) .field textarea{
  width: 100%;
  padding: 11px 0;
  border: 0;
  border-bottom: 1px solid #bcc0c3;
  background: transparent;
  color: #1e2430;
  outline: 0;
}
:where(html:not(.p-index)) .field textarea{
  resize: none;
}
:where(html:not(.p-index)) .field input:focus,:where(html:not(.p-index)) .field textarea:focus{
  border-color: var(--red);
}
:where(html:not(.p-index)) .consent{
  grid-column: 1/-1;
  font-size: 13px;
  color: #4f5f6d;
}
:where(html:not(.p-index)) .consent input{
  accent-color: var(--red);
}
:where(html:not(.p-index)) .form-message{
  font-size: 14px;
  color: #63bd82;
}
:where(html:not(.p-index)) .distributor-layout{
  display: grid;
  grid-template-columns: 1.45fr 0.55fr;
  gap: 18px;
}
:where(html:not(.p-index)) .distributor-map{
  height: 520px;
  border: 1px solid var(--line);
  position: relative;
  background: #f0f1f1;
  overflow: hidden;
}
:where(html:not(.p-index)) .distributor-map .world-shape{
  inset: 55px;
}
:where(html:not(.p-index)) .distributor-list{
  display: flex;
  flex-direction: column;
  gap: 10px;
}
:where(html:not(.p-index)) .distributor-card{
  padding: 22px;
  border: 1px solid var(--line);
  background: #eff0f0;
}
:where(html:not(.p-index)) .distributor-card h3{
  font-size: 16px;
  margin: 0 0 8px;
}
:where(html:not(.p-index)) .distributor-card p{
  font-size: 13px;
  color: #4f5f6d;
}
:where(html:not(.p-index)) .distributor-card a{
  font-size: 13px;
  font-weight: 700;
}
/* Motion system */
.motion-ready:where(:not(.p-index)) .reveal{
  opacity: 0;
  transform: translateY(20px);
  animation: none;
  transition:
    opacity 0.75s var(--ease),
    transform 0.75s var(--ease);
}
.motion-ready:where(:not(.p-index)) .reveal.visible{
  opacity: 1;
  transform: none;
}
.motion-ready:where(:not(.p-index)) .trust-grid > div{
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity 0.55s var(--ease),
    transform 0.55s var(--ease);
}
.motion-ready:where(:not(.p-index)) .trust-grid.visible > div{
  opacity: 1;
  transform: none;
}
:where(html:not(.p-index)) .trust-grid.visible > div:nth-child(2){
  transition-delay: 0.1s;
}
:where(html:not(.p-index)) .trust-grid.visible > div:nth-child(3){
  transition-delay: 0.2s;
}
:where(html:not(.p-index)) .trust-grid.visible > div:nth-child(4){
  transition-delay: 0.3s;
}
:where(html:not(.p-index)) .capability-card:hover{
  transform: none;
  outline: 1px solid var(--red);
  outline-offset: -1px;
}
:where(html:not(.p-index)) .capability-card:hover > i{
  animation: icon-live 0.65s var(--ease);
  text-shadow: 0 0 16px rgba(13, 71, 161, 0.65);
}
:where(html:not(.p-index)) .capability-card:before{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(
    110deg,
    transparent 20%,
    rgba(13, 71, 161, 0.08) 48%,
    transparent 72%
  );
  transform: translateX(-60%);
}
:where(html:not(.p-index)) .capability-card:hover:before{
  opacity: 1;
  transform: translateX(60%);
  transition:
    transform 1.1s var(--ease),
    opacity 0.2s;
}
@keyframes icon-live {
  0% {
    transform: scale(0.92);
  }
  50% {
    transform: scale(1.06);
  }
  100% {
    transform: scale(1);
  }
}

/* Sticky Zed-FULL capability storytelling */
:where(html:not(.p-index)) .capability-story{
  padding: 100px 0;
  background: #f4f5f5;
  border-top: 1px solid var(--line);
}
:where(html:not(.p-index)) .story-layout{
  display: grid;
  grid-template-columns: 0.82fr 1.18fr;
  gap: 90px;
  align-items: start;
}
:where(html:not(.p-index)) .story-copy > .page-title{
  margin-bottom: 70px;
}
:where(html:not(.p-index)) .story-step{
  min-height: 58vh;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: center;
  opacity: 0.28;
  transition: opacity 0.45s var(--ease);
}
:where(html:not(.p-index)) .story-step.active{
  opacity: 1;
}
:where(html:not(.p-index)) .story-step > i{
  font-style: normal;
  color: var(--red);
  font-size: 14px;
  padding-top: 5px;
}
:where(html:not(.p-index)) .story-step span{
  color: var(--red);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.16em;
}
:where(html:not(.p-index)) .story-step h3{
  max-width: 460px;
  font-size: 30px;
  line-height: 1.15;
  text-transform: uppercase;
  letter-spacing: -0.0203em;
  margin: 14px 0;
}
:where(html:not(.p-index)) .story-step p{
  max-width: 430px;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.75;
}
:where(html:not(.p-index)) .story-device{
  position: sticky;
  top: 115px;
  height: calc(100vh - 145px);
  min-height: 590px;
  display: grid;
  place-items: center;
  overflow: hidden;
}
:where(html:not(.p-index)) .story-device img{
  position: relative;
  z-index: 3;
  width: 96%;
  filter: drop-shadow(0 34px 30px #ffffff);
}
:where(html:not(.p-index)) .story-ring{
  position: absolute;
  width: min(42vw, 570px);
  height: min(42vw, 570px);
  border: 1px solid rgba(13, 71, 161, 0.22);
  border-radius: 50%;
}
:where(html:not(.p-index)) .story-ring:after{
  content: "";
  position: absolute;
  inset: 55px;
  border: 1px dashed rgba(13, 71, 161, 0.08);
  border-radius: 50%;
}
:where(html:not(.p-index)) .story-ring i{
  position: absolute;
  z-index: 4;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border: 1px solid #c3c6c9;
  border-radius: 50%;
  background: #f2f3f4;
  color: #5b6d7d;
  font-style: normal;
  font-size: 14px;
  transition: 0.4s;
}
:where(html:not(.p-index)) .story-ring i:nth-child(1){
  left: -23px;
  top: 45%;
}
:where(html:not(.p-index)) .story-ring i:nth-child(2){
  top: -23px;
  left: 45%;
}
:where(html:not(.p-index)) .story-ring i:nth-child(3){
  right: -23px;
  top: 45%;
}
:where(html:not(.p-index)) .story-ring i:nth-child(4){
  bottom: -23px;
  left: 45%;
}
:where(html:not(.p-index)) .story-ring i.active{
  color: #1e2430;
  border-color: var(--red);
  background: rgba(13, 71, 161, 0.18);
  box-shadow: 0 0 24px rgba(13, 71, 161, 0.35);
}
:where(html:not(.p-index)) .story-status{
  position: absolute;
  z-index: 4;
  right: 3%;
  bottom: 12%;
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.9);
}
:where(html:not(.p-index)) .story-status small,:where(html:not(.p-index)) .story-status b{
  display: block;
}
:where(html:not(.p-index)) .story-status small{
  color: #5b6d7d;
  font-size: 11px;
  letter-spacing: 0.14em;
}
:where(html:not(.p-index)) .story-status b{
  font-size: 15px;
  margin-top: 5px;
}

/* Vehicle coverage guided demo */
.motion-ready:where(:not(.p-index)) .coverage-preview .search-panel{
  clip-path: inset(0 100% 0 0);
  opacity: 0.3;
  transition:
    clip-path 1s var(--ease),
    opacity 0.6s;
}
.motion-ready:where(:not(.p-index)) .coverage-preview.demo-active .search-panel{
  clip-path: inset(0 0 0 0);
  opacity: 1;
}
:where(html:not(.p-index)) .search-panel label.demo-selected{
  border-color: var(--red);
  box-shadow: inset 0 -2px 0 var(--red);
  transition: 0.3s;
}
:where(html:not(.p-index)) .search-panel .button.demo-search{
  animation: search-hit 0.7s var(--ease);
}
.motion-ready:where(:not(.p-index)) .sample-result{
  opacity: 0;
  transform: translateY(-12px);
  max-height: 0;
  min-height: 0;
  overflow: hidden;
  transition:
    opacity 0.5s var(--ease),
    transform 0.5s var(--ease),
    max-height 0.5s,
    min-height 0.5s;
}
.motion-ready:where(:not(.p-index)) .sample-result.demo-result{
  opacity: 1;
  transform: none;
  max-height: 90px;
  min-height: 78px;
}
@keyframes search-hit {
  50% {
    box-shadow:
      0 0 0 7px rgba(13, 71, 161, 0.14),
      0 12px 34px rgba(13, 71, 161, 0.25);
  }
}

/* Result to solutions bridge */
:where(html:not(.p-index)) .solutions-section{
  background: #f5f6f6;
  border-top: 1px solid var(--line);
  position: relative;
}
:where(html:not(.p-index)) .solution-bridge{
  width: 1px;
  height: 75px;
  margin: -120px auto 40px;
  background: linear-gradient(var(--red), transparent);
  position: relative;
}
:where(html:not(.p-index)) .solution-bridge i{
  position: absolute;
  top: -6px;
  left: -5px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--red);
  box-shadow: 0 0 18px var(--red);
}
:where(html:not(.p-index)) .solution-bridge span{
  position: absolute;
  left: 15px;
  top: 12px;
  width: max-content;
  font-size: 11px;
  color: #4f5f6e;
  letter-spacing: 0.15em;
}
:where(html:not(.p-index)) .solution-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}
:where(html:not(.p-index)) .solution-grid a{
  min-height: 230px;
  padding: 27px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  position: relative;
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity 0.6s var(--ease),
    transform 0.6s var(--ease),
    background 0.3s;
}
:where(html:not(.p-index)) .solution-grid.visible a{
  opacity: 1;
  transform: none;
}
:where(html:not(.p-index)) .solution-grid.visible a:nth-child(2){
  transition-delay: 0.1s;
}
:where(html:not(.p-index)) .solution-grid.visible a:nth-child(3){
  transition-delay: 0.2s;
}
:where(html:not(.p-index)) .solution-grid.visible a:nth-child(4){
  transition-delay: 0.3s;
}
:where(html:not(.p-index)) .solution-grid a:hover{
  background: #e9ebec;
}
:where(html:not(.p-index)) .solution-grid i{
  color: var(--red);
  font-style: normal;
  font-size: 24px;
}
:where(html:not(.p-index)) .solution-grid > a > span{
  position: absolute;
  right: 24px;
  top: 24px;
  color: #5d7081;
  font-size: 12px;
}
:where(html:not(.p-index)) .solution-grid h3{
  font-size: 17px;
  margin: 28px 0 10px;
}
:where(html:not(.p-index)) .solution-grid p{
  font-size: 14px;
  color: var(--muted);
}
:where(html:not(.p-index)) .solution-grid b{
  position: absolute;
  bottom: 25px;
  font-size: 13px;
}

/* Quiet update motion */
:where(html:not(.p-index)) .update-grid article:after{
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background: var(--red);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.55s var(--ease);
}
:where(html:not(.p-index)) .update-grid article:hover:after{
  transform: scaleX(1);
}
.motion-ready:where(:not(.p-index)) .update-grid article > span,.motion-ready:where(:not(.p-index)) .update-grid article > small{
  opacity: 0;
  transition: opacity 0.4s 0.38s;
}
.motion-ready:where(:not(.p-index)) .update-grid article.visible > span,.motion-ready:where(:not(.p-index)) .update-grid article.visible > small{
  opacity: 1;
}

/* Support focus choreography */
.motion-ready:where(:not(.p-index)) .support-page-search{
  opacity: 0;
  transform: scaleX(0.86);
  transition:
    opacity 0.7s var(--ease),
    transform 0.7s var(--ease);
  transform-origin: center;
}
:where(html:not(.p-index)) .support-page-search.search-ready{
  opacity: 1;
  transform: scaleX(1);
}
.motion-ready:where(:not(.p-index)) .support-module{
  opacity: 0;
  transform: translate(0, 12px);
  transition:
    opacity 0.55s var(--ease),
    transform 0.55s var(--ease);
}
:where(html:not(.p-index)) .support-modules.modules-ready .support-module{
  opacity: 1;
  transform: none;
}
:where(html:not(.p-index)) .support-modules.modules-ready .support-module:nth-child(2){
  transition-delay: 0.08s;
}
:where(html:not(.p-index)) .support-modules.modules-ready .support-module:nth-child(3){
  transition-delay: 0.16s;
}
:where(html:not(.p-index)) .support-modules.modules-ready .support-module:nth-child(4){
  transition-delay: 0.24s;
}
:where(html:not(.p-index)) .support-modules.modules-ready .support-module:nth-child(5){
  transition-delay: 0.32s;
}
:where(html:not(.p-index)) .support-searching .support-module{
  opacity: 0.65;
  transition: opacity 0.35s;
}
:where(html:not(.p-index)) .support-searching .support-page-search{
  opacity: 1;
}
:where(html:not(.p-index)) .document-row:not(.head){
  transition:
    opacity 0.4s var(--ease),
    transform 0.4s var(--ease);
}
.motion-ready:where(:not(.p-index)) .document-row:not(.head){
  opacity: 0;
  transform: translateY(8px);
}
:where(html:not(.p-index)) .support-modules.modules-ready + .document-list .document-row:not(.head){
  opacity: 1;
  transform: none;
}
:where(html:not(.p-index)) .support-modules.modules-ready + .document-list .document-row:nth-child(3){
  transition-delay: 0.1s;
}
:where(html:not(.p-index)) .support-modules.modules-ready + .document-list .document-row:nth-child(4){
  transition-delay: 0.2s;
}
:where(html:not(.p-index)) .support-modules.modules-ready + .document-list .document-row:nth-child(5){
  transition-delay: 0.3s;
}

/* Scroll-driven history */
:where(html:not(.p-index)) .timeline-full{
  grid-template-columns: repeat(5, 1fr);
  --timeline-progress: 0;
}
:where(html:not(.p-index)) .timeline-full:before{
  background: #c3c6c9;
}
:where(html:not(.p-index)) .timeline-full:after{
  content: "";
  position: absolute;
  top: 44px;
  left: 0;
  width: calc(var(--timeline-progress) * 100%);
  height: 1px;
  background: var(--red);
  box-shadow: 0 0 10px rgba(13, 71, 161, 0.4);
}
:where(html:not(.p-index)) .timeline-full article{
  opacity: 0.34;
  transition: opacity 0.35s;
}
:where(html:not(.p-index)) .timeline-full article.active{
  opacity: 1;
}
:where(html:not(.p-index)) .timeline-full article.active:before{
  background: var(--red);
  box-shadow: 0 0 14px var(--red);
}
:where(html:not(.p-index)) .timeline-full article.active b{
  color: var(--red);
}
:where(html:not(.p-index)) .timeline-product-preview{
  height: 210px;
  margin-top: 45px;
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 38px;
  overflow: hidden;
  background:
    radial-gradient(circle at 80%, rgba(13, 71, 161, 0.12), transparent 35%),
    #f1f2f2;
}
:where(html:not(.p-index)) .timeline-product-preview small,:where(html:not(.p-index)) .timeline-product-preview b{
  display: block;
}
:where(html:not(.p-index)) .timeline-product-preview small{
  font-size: 11px;
  color: #5d7081;
  letter-spacing: 0.15em;
}
:where(html:not(.p-index)) .timeline-product-preview b{
  font-size: 19px;
  margin-top: 8px;
}
:where(html:not(.p-index)) .timeline-product-preview img{
  width: 290px;
  align-self: flex-start;
  transform: translateY(5px);
  opacity: 0.12;
  transition:
    opacity 0.5s,
    transform 0.5s;
}
:where(html:not(.p-index)) .timeline-product-preview.product-visible img{
  opacity: 1;
  transform: translateY(-12px);
}

/* One-shot global map */
:where(html:not(.p-index)) .map .pin,:where(html:not(.p-index)) .distributor-map .pin,:where(html:not(.p-index)) .istanbul-pin{
  opacity: 0;
  transform: scale(0.3);
}
:where(html:not(.p-index)) .map.map-animated .pin,:where(html:not(.p-index)) .map.map-animated .istanbul-pin,:where(html:not(.p-index)) .distributor-map.map-animated .pin,:where(html:not(.p-index)) .distributor-map.map-animated .istanbul-pin{
  opacity: 1;
  transform: scale(1);
  transition:
    opacity 0.35s,
    transform 0.5s var(--ease);
}
:where(html:not(.p-index)) .map.map-animated .pin:nth-of-type(2),:where(html:not(.p-index)) .distributor-map.map-animated .p1{
  transition-delay: 0.15s;
}
:where(html:not(.p-index)) .map.map-animated .pin:nth-of-type(3),:where(html:not(.p-index)) .distributor-map.map-animated .p2{
  transition-delay: 0.3s;
}
:where(html:not(.p-index)) .map.map-animated .pin:nth-of-type(4),:where(html:not(.p-index)) .distributor-map.map-animated .p3{
  transition-delay: 0.45s;
}
:where(html:not(.p-index)) .map.map-animated .pin:nth-of-type(5),:where(html:not(.p-index)) .distributor-map.map-animated .p4{
  transition-delay: 0.6s;
}
:where(html:not(.p-index)) .map.map-animated .pin:nth-of-type(6),:where(html:not(.p-index)) .distributor-map.map-animated .p5{
  transition-delay: 0.75s;
}
:where(html:not(.p-index)) .pin:after{
  animation: none;
}
:where(html:not(.p-index)) .map-animated .pin:after{
  animation: pulse 1.4s 1 0.45s both;
}
:where(html:not(.p-index)) .map-routes{
  position: absolute;
  z-index: 2;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
:where(html:not(.p-index)) .map-routes path{
  fill: none;
  stroke: rgba(13, 71, 161, 0.55);
  stroke-width: 1.5;
  stroke-dasharray: 620;
  stroke-dashoffset: 620;
}
:where(html:not(.p-index)) .map-animated .map-routes path{
  animation: route-draw 2s var(--ease) forwards;
}
:where(html:not(.p-index)) .map-animated .map-routes path:nth-child(2){
  animation-delay: 0.25s;
}
:where(html:not(.p-index)) .map-animated .map-routes path:nth-child(3){
  animation-delay: 0.5s;
}
@keyframes route-draw {
  to {
    stroke-dashoffset: 0;
  }
}
:where(html:not(.p-index)) .istanbul-pin{
  position: absolute;
  z-index: 4;
  left: 53.5%;
  top: 39%;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--red);
  box-shadow: 0 0 20px var(--red);
}

/* Map to contact / calm closing */
:where(html:not(.p-index)) .map-contact-transition{
  padding: 120px 0;
  position: relative;
  background: linear-gradient(#f6f7f7, #f4f5f5);
  border-top: 1px solid var(--line);
}
:where(html:not(.p-index)) .transition-beam{
  position: absolute;
  top: -80px;
  left: 50%;
  width: 1px;
  height: 140px;
  background: linear-gradient(transparent, var(--red));
}
:where(html:not(.p-index)) .transition-beam i{
  position: absolute;
  bottom: -6px;
  left: -6px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--red);
  box-shadow: 0 0 20px var(--red);
}
:where(html:not(.p-index)) .transition-departments{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}
:where(html:not(.p-index)) .transition-departments a{
  min-height: 170px;
  padding: 25px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  opacity: 0;
  transform: translateY(16px);
  transition: 0.6s var(--ease);
}
:where(html:not(.p-index)) .transition-departments.visible a{
  opacity: 1;
  transform: none;
}
:where(html:not(.p-index)) .transition-departments.visible a:nth-child(2){
  transition-delay: 0.1s;
}
:where(html:not(.p-index)) .transition-departments.visible a:nth-child(3){
  transition-delay: 0.2s;
}
:where(html:not(.p-index)) .transition-departments.visible a:nth-child(4){
  transition-delay: 0.3s;
}
:where(html:not(.p-index)) .transition-departments i{
  font-style: normal;
  color: var(--red);
  font-size: 24px;
}
:where(html:not(.p-index)) .transition-departments b{
  font-size: 15px;
  text-transform: uppercase;
  margin-top: 28px;
}
:where(html:not(.p-index)) .transition-departments span{
  font-size: 13px;
  color: #4f5f6e;
  margin-top: 6px;
}
:where(html:not(.p-index)) .contact-page main{
  background:
    linear-gradient(135deg, rgba(13, 71, 161, 0.025), transparent 45%), #f5f6f6;
}
:where(html:not(.p-index)) .contact-page .page-section{
  position: relative;
}
:where(html:not(.p-index)) .contact-page .page-section:after{
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  opacity: 0.12;
  background: linear-gradient(
      25deg,
      transparent 47%,
      #bcbfc2 48%,
      transparent 49%
    )
    100% 0/160px 80px;
  mask-image: linear-gradient(#ffffff, transparent);
}
:where(html:not(.p-index)) .contact-page-grid{
  position: relative;
  z-index: 2;
}
:where(html:not(.p-index)) .contact-page .footer{
  background: #fcfcfd;
}

@media (max-width: 1050px) {
  :where(html:not(.p-index)) .nav{
    gap: 14px;
  }
  :where(html:not(.p-index)) .nav a{
    font-size: 13px;
  }
  :where(html:not(.p-index)) .header-actions{
    min-width: 170px;
  }
  :where(html:not(.p-index)) .header-button{
    display: none;
  }
  :where(html:not(.p-index)) .hero-copy h1{
    font-size: 55px;
  }
  :where(html:not(.p-index)) .hero-product{
    height: 550px;
  }
  :where(html:not(.p-index)) .support-grid,:where(html:not(.p-index)) .support-modules{
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 800px) {
  :where(html:not(.p-index)) .container{
    width: calc(100% - 30px);
  }
  :where(html:not(.p-index)) .header{
    height: 68px;
  }
  :where(html:not(.p-index)) .logo{
    min-width: 0;
  }
  :where(html:not(.p-index)) .logo img{
    width: 75px;
  }
  :where(html:not(.p-index)) .logo span,:where(html:not(.p-index)) .header-actions{
    display: none;
  }
  :where(html:not(.p-index)) .menu-button{
    display: block;
    margin-left: auto;
    width: 42px;
    height: 42px;
    border: 1px solid #c5c8cb;
    background: transparent;
    position: relative;
  }
  :where(html:not(.p-index)) .menu-button i{
    position: absolute;
    left: 11px;
    width: 18px;
    height: 1px;
    background: #1e2430;
    transition: 0.25s;
  }
  :where(html:not(.p-index)) .menu-button i:first-child{
    top: 16px;
  }
  :where(html:not(.p-index)) .menu-button i:last-child{
    top: 24px;
  }
  :where(html:not(.p-index)) .menu-button.open i:first-child{
    transform: translateY(4px) rotate(45deg);
  }
  :where(html:not(.p-index)) .menu-button.open i:last-child{
    transform: translateY(-4px) rotate(-45deg);
  }
  :where(html:not(.p-index)) .nav{
    position: fixed;
    top: 68px;
    left: 0;
    width: 100%;
    height: calc(100vh - 68px);
    background: #f5f6f6;
    padding: 35px 24px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 0;
    transform: translateX(100%);
    transition: 0.4s var(--ease);
  }
  :where(html:not(.p-index)) .nav.open{
    transform: none;
  }
  :where(html:not(.p-index)) .nav a{
    width: 100%;
    padding: 15px 0;
    border-bottom: 1px solid var(--line);
    font-size: 25px;
  }
  :where(html:not(.p-index)) .nav a:after{
    display: none;
  }
  :where(html:not(.p-index)) .hero{
    padding-top: 90px;
    min-height: auto;
  }
  :where(html:not(.p-index)) .hero-layout{
    display: block;
    min-height: auto;
  }
  :where(html:not(.p-index)) .hero-copy{
    padding-top: 55px;
  }
  :where(html:not(.p-index)) .hero-copy h1{
    font-size: 49px;
  }
  :where(html:not(.p-index)) .hero-copy p{
    font-size: 17px;
  }
  :where(html:not(.p-index)) .actions{
    align-items: stretch;
    flex-direction: column;
  }
  :where(html:not(.p-index)) .button{
    width: 100%;
  }
  :where(html:not(.p-index)) .hero-product{
    height: 460px;
    position: relative;
    top: auto;
  }
  :where(html:not(.p-index)) .hero-product > img{
    width: 112%;
  }
  :where(html:not(.p-index)) .product-glow{
    width: 360px;
    height: 360px;
  }
  :where(html:not(.p-index)) .platform{
    width: 420px;
    bottom: 40px;
  }
  :where(html:not(.p-index)) .product-label{
    right: 5px;
  }
  :where(html:not(.p-index)) .trust-grid{
    height: auto;
    grid-template-columns: 1fr 1fr;
    margin-bottom: 15px;
  }
  :where(html:not(.p-index)) .trust-grid > div{
    height: 115px;
  }
  :where(html:not(.p-index)) .trust-grid > div:nth-child(2){
    border-right: 0;
  }
  :where(html:not(.p-index)) .trust-grid > div:nth-child(-n + 2){
    border-bottom: 1px solid var(--line);
  }
  :where(html:not(.p-index)) .section-space{
    padding: 85px 0;
  }
  :where(html:not(.p-index)) .section-head{
    display: block;
  }
  :where(html:not(.p-index)) .section-head h2{
    font-size: 38px;
  }
  :where(html:not(.p-index)) .section-head > p{
    width: auto;
    margin-top: 22px;
  }
  :where(html:not(.p-index)) .capability-grid{
    grid-template-columns: 1fr 1fr;
  }
  :where(html:not(.p-index)) .flagship-layout{
    grid-template-columns: 1fr;
    gap: 50px;
  }
  :where(html:not(.p-index)) .flagship-visual{
    height: 450px;
  }
  :where(html:not(.p-index)) .search-panel{
    grid-template-columns: 1fr 1fr;
  }
  :where(html:not(.p-index)) .search-panel .button{
    grid-column: 1/-1;
  }
  :where(html:not(.p-index)) .sample-result{
    grid-template-columns: 1.2fr 0.8fr 1fr;
  }
  :where(html:not(.p-index)) .sample-result > span:nth-child(4),:where(html:not(.p-index)) .sample-result > a{
    display: none;
  }
  :where(html:not(.p-index)) .update-grid{
    grid-template-columns: 1fr;
  }
  :where(html:not(.p-index)) .support-grid{
    grid-template-columns: 1fr 1fr;
  }
  :where(html:not(.p-index)) .global-layout{
    grid-template-columns: 1fr;
  }
  :where(html:not(.p-index)) .global-copy{
    order: -1;
  }
  :where(html:not(.p-index)) .map{
    height: 350px;
  }
  :where(html:not(.p-index)) .footer-main{
    grid-template-columns: 1fr 1fr;
  }
  :where(html:not(.p-index)) .footer-main > div{
    grid-row: 2;
  }
  :where(html:not(.p-index)) .page-hero{
    padding: 120px 0 60px;
  }
  :where(html:not(.p-index)) .page-hero h1{
    font-size: 45px;
  }
  :where(html:not(.p-index)) .product-page-layout,:where(html:not(.p-index)) .about-intro,:where(html:not(.p-index)) .contact-page-grid,:where(html:not(.p-index)) .distributor-layout{
    grid-template-columns: 1fr;
  }
  :where(html:not(.p-index)) .product-page-visual{
    height: 460px;
  }
  :where(html:not(.p-index)) .content-grid-3,:where(html:not(.p-index)) .download-layout{
    grid-template-columns: 1fr 1fr;
  }
  :where(html:not(.p-index)) .timeline-full{
    grid-template-columns: 1fr;
    padding-left: 35px;
  }
  :where(html:not(.p-index)) .timeline-full:before{
    left: 5px;
    top: 0;
    width: 1px;
    height: 100%;
  }
  :where(html:not(.p-index)) .timeline-full article{
    padding: 0 0 30px;
  }
  :where(html:not(.p-index)) .timeline-full article:before{
    top: 2px;
    left: -35px;
  }
  :where(html:not(.p-index)) .advanced-search{
    grid-template-columns: 1fr 1fr;
  }
  :where(html:not(.p-index)) .support-modules{
    grid-template-columns: 1fr 1fr;
  }
  :where(html:not(.p-index)) .document-row{
    grid-template-columns: 1.5fr 0.7fr 1fr;
  }
  :where(html:not(.p-index)) .document-row > *:nth-child(4),:where(html:not(.p-index)) .document-row > *:nth-child(5){
    display: none;
  }
  :where(html:not(.p-index)) .distributor-list{
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
}
@media (prefers-reduced-motion: reduce) {
  :where(html:not(.p-index)) *,*:where(:not(.p-index)),:where(html:not(.p-index)) *::before,*:where(:not(.p-index))::before,:where(html:not(.p-index)) *::after,*:where(:not(.p-index))::after{
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}

/* Contact center — compact departments and structured form */
:where(html:not(.p-index)) .contact-page .page-section{
  padding: clamp(82px, 9vw, 124px) 0;
}

:where(html:not(.p-index)) .contact-section-head{
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(300px, 0.85fr);
  align-items: end;
  gap: 70px;
  margin-bottom: 44px;
}

:where(html:not(.p-index)) .contact-section-head h2{
  max-width: 680px;
  margin: 14px 0 0;
  font-size: clamp(34px, 4vw, 56px);
  line-height: 0.98;
  letter-spacing: -0.05em;
  text-transform: uppercase;
}

:where(html:not(.p-index)) .contact-section-head > p{
  max-width: 460px;
  margin: 0;
  color: #4f5f6e;
  font-size: 15px;
  line-height: 1.75;
}

:where(html:not(.p-index)) .contact-page-grid{
  grid-template-columns: minmax(320px, 0.72fr) minmax(0, 1.28fr);
  align-items: stretch;
  gap: 18px;
}

:where(html:not(.p-index)) .department-grid{
  display: flex;
  flex-direction: column;
  gap: 10px;
}

:where(html:not(.p-index)) .department-card{
  position: relative;
  min-height: 0;
  padding: 23px 22px;
  display: grid;
  grid-template-columns: 50px 1fr;
  grid-template-rows: auto auto;
  align-items: center;
  border-radius: 12px;
  cursor: pointer;
  overflow: hidden;
  transition:
    border-color 0.35s,
    background 0.35s,
    transform 0.35s var(--ease);
}

:where(html:not(.p-index)) .department-card:hover,:where(html:not(.p-index)) .department-card:focus-visible{
  border-color: rgba(13, 71, 161, 0.65);
  background: #e9ebec;
  outline: none;
  transform: translateX(5px);
}

:where(html:not(.p-index)) .department-card.active{
  border-color: var(--red);
  background:
    linear-gradient(100deg, rgba(13, 71, 161, 0.13), transparent 70%),
    #eceded;
}

:where(html:not(.p-index)) .department-card > *{
  position: relative;
  z-index: 2;
}

:where(html:not(.p-index)) .department-card i{
  grid-row: 1 / 3;
  align-self: center;
  font-size: 23px;
}

:where(html:not(.p-index)) .department-card h3{
  margin: 0 0 5px;
  font-size: 15px;
}

:where(html:not(.p-index)) .department-card p{
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
}

:where(html:not(.p-index)) .form-panel{
  position: relative;
  padding: clamp(30px, 4vw, 54px);
  overflow: hidden;
  border-radius: 14px;
  background:
    radial-gradient(circle at 100% 0%, rgba(13, 71, 161, 0.09), transparent 30%),
    linear-gradient(145deg, #ebecec, #f1f2f2);
}

:where(html:not(.p-index)) .form-panel::before{
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 120px;
  height: 2px;
  background: var(--red);
  box-shadow: 0 0 22px rgba(13, 71, 161, 0.65);
}

:where(html:not(.p-index)) .contact-form-head{
  margin-bottom: 34px;
}

:where(html:not(.p-index)) .contact-form-head h2{
  margin: 12px 0 9px;
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1;
}

:where(html:not(.p-index)) .contact-form-head p{
  max-width: 540px;
  margin: 0;
  color: #596b7c;
  font-size: 14px;
  line-height: 1.65;
}

:where(html:not(.p-index)) .form-grid{
  gap: 16px;
}

:where(html:not(.p-index)) .field label{
  margin: 0 0 8px 2px;
  font-size: 10px;
  font-weight: 700;
}

:where(html:not(.p-index)) .field input,:where(html:not(.p-index)) .field select,:where(html:not(.p-index)) .field textarea{
  padding: 14px 15px;
  border: 1px solid #c7cacc;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.9);
  transition:
    border-color 0.25s,
    background 0.25s,
    box-shadow 0.25s;
}

:where(html:not(.p-index)) .field input,:where(html:not(.p-index)) .field select{
  min-height: 50px;
}

:where(html:not(.p-index)) .field textarea{
  min-height: 155px;
}

:where(html:not(.p-index)) .field input:focus,:where(html:not(.p-index)) .field select:focus,:where(html:not(.p-index)) .field textarea:focus{
  border-color: var(--red);
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 0 0 3px rgba(13, 71, 161, 0.08);
}

:where(html:not(.p-index)) .contact-submit-row{
  grid-column: 1 / -1;
  padding-top: 4px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

:where(html:not(.p-index)) .contact-submit-row .consent{
  grid-column: auto;
  display: flex;
  align-items: flex-start;
  gap: 9px;
  line-height: 1.5;
}

:where(html:not(.p-index)) .contact-submit-row .consent input{
  margin-top: 3px;
}

:where(html:not(.p-index)) .contact-submit-row .button{
  min-width: 190px;
  border-radius: 8px;
}

:where(html:not(.p-index)) .contact-submit-row .button span{
  transition: transform 0.3s var(--ease);
}

:where(html:not(.p-index)) .contact-submit-row .button:hover span{
  transform: translateX(5px);
}

:where(html:not(.p-index)) .form-message.full{
  grid-column: 1 / -1;
  min-height: 21px;
}

:where(html:not(.p-index)) .contact-direct{
  position: relative;
  z-index: 2;
  margin-top: 18px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.9);
}

:where(html:not(.p-index)) .contact-direct > *{
  min-height: 92px;
  padding: 22px 26px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 7px;
  border-right: 1px solid var(--line);
  transition: background 0.3s;
}

:where(html:not(.p-index)) .contact-direct > *:last-child{
  border-right: 0;
}

:where(html:not(.p-index)) .contact-direct > a:hover{
  background: rgba(13, 71, 161, 0.07);
}

:where(html:not(.p-index)) .contact-direct span{
  color: var(--red);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.16em;
}

:where(html:not(.p-index)) .contact-direct b{
  font-size: 14px;
}

@media (max-width: 900px) {
  :where(html:not(.p-index)) .contact-section-head{
    grid-template-columns: 1fr;
    align-items: start;
    gap: 22px;
  }

  :where(html:not(.p-index)) .contact-page-grid{
    grid-template-columns: 1fr;
  }

  :where(html:not(.p-index)) .department-grid{
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  :where(html:not(.p-index)) .contact-direct{
    grid-template-columns: 1fr;
  }

  :where(html:not(.p-index)) .contact-direct > *{
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  :where(html:not(.p-index)) .contact-direct > *:last-child{
    border-bottom: 0;
  }
}

@media (max-width: 600px) {
  :where(html:not(.p-index)) .department-grid{
    grid-template-columns: 1fr;
  }

  :where(html:not(.p-index)) .form-panel{
    padding: 28px 20px;
  }

  :where(html:not(.p-index)) .form-grid{
    grid-template-columns: 1fr;
  }

  :where(html:not(.p-index)) .field.full,:where(html:not(.p-index)) .contact-submit-row,:where(html:not(.p-index)) .form-message.full{
    grid-column: auto;
  }

  :where(html:not(.p-index)) .contact-submit-row{
    align-items: stretch;
    flex-direction: column;
  }

  :where(html:not(.p-index)) .contact-submit-row .button{
    width: 100%;
  }
}

/* Zed-FULL plus: gerçek ürün içeriği ve kaynak merkezi */
:where(html:not(.p-index)) .product-detail-visual-hero{
  position: relative;
  isolation: isolate;
  min-height: 760px;
  overflow: hidden;
  background:
    radial-gradient(circle at 78% 46%, rgba(27, 105, 202, .15), transparent 29%),
    linear-gradient(135deg, #fff 0%, #f7faff 58%, #eaf3fe 100%);
}

:where(html:not(.p-index)) .product-detail-visual-hero::before{
  background:
    linear-gradient(90deg, rgba(13, 71, 161, .045) 1px, transparent 1px),
    linear-gradient(rgba(13, 71, 161, .045) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: linear-gradient(90deg, transparent 15%, #000 62%, transparent);
  opacity: .62;
}

:where(html:not(.p-index)) .product-detail-visual-hero::after{
  inset: auto 0 0;
  height: 170px;
  background: linear-gradient(transparent, #f5f9fe);
}

:where(html:not(.p-index)) .product-detail-visual-hero .product-page-layout{
  display: grid;
  grid-template-columns: minmax(420px, .86fr) minmax(540px, 1.14fr);
  gap: clamp(24px, 4vw, 70px);
  align-items: center;
}

:where(html:not(.p-index)) .product-detail-visual-hero .product-page-copy{
  max-width: 620px;
}

:where(html:not(.p-index)) .product-detail-visual-hero .product-page-visual{
  height: min(54vw, 650px);
  display: grid;
}

:where(html:not(.p-index)) .product-detail-visual-hero .product-page-visual img{
  width: min(100%, 760px);
  max-height: 620px;
  object-fit: contain;
  filter: drop-shadow(0 34px 30px rgba(26, 49, 78, .2));
}

:where(html:not(.p-index)) .product-detail-visual-hero .product-page-visual::after{
  bottom: 54px;
  width: 84%;
  height: 72px;
  border: 0;
  background: radial-gradient(ellipse, rgba(17, 61, 115, .23), transparent 68%);
}

:where(html:not(.p-index)) .product-detail-hub{
  overflow: clip;
  background:
    radial-gradient(circle at 88% 4%, rgba(33, 104, 196, .1), transparent 28%),
    linear-gradient(180deg, #f6f9fd 0%, #fff 34%, #f3f7fc 100%);
}

:where(html:not(.p-index)) .product-detail-hub > .container{
  max-width: 1320px;
}

:where(html:not(.p-index)) .product-detail-heading{
  margin-bottom: 34px;
  align-items: end;
}

:where(html:not(.p-index)) .product-detail-heading > div{
  max-width: 760px;
}

:where(html:not(.p-index)) .product-detail-heading h2{
  margin-top: 10px;
}

:where(html:not(.p-index)) .product-detail-heading > p{
  max-width: 440px;
  margin: 0 0 5px;
  color: #5f7085;
  font-size: 15px;
  line-height: 1.7;
}

:where(html:not(.p-index)) .product-tabs{
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  padding: 6px;
  border: 1px solid #d7e2ef;
  border-radius: 14px;
  background: rgba(255, 255, 255, .86);
  box-shadow: 0 16px 44px rgba(19, 62, 114, .08);
}

:where(html:not(.p-index)) .product-tabs button{
  min-height: 54px;
  padding: 11px 16px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: #52647a;
  font: 700 13px/1.25 var(--font-display);
  cursor: pointer;
  transition: color .22s, background .22s, box-shadow .22s;
}

:where(html:not(.p-index)) .product-tabs button:hover{
  color: #0d47a1;
  background: #f0f6ff;
}

:where(html:not(.p-index)) .product-tabs button.active{
  color: #fff;
  background: linear-gradient(135deg, #0d47a1, #1976d2);
  box-shadow: 0 8px 20px rgba(13, 71, 161, .22);
}

:where(html:not(.p-index)) .product-panel{
  padding: clamp(34px, 5vw, 66px) 0 12px;
  animation: productPanelIn .42s var(--ease) both;
}

:where(html:not(.p-index)) .product-panel[hidden]{
  display: none !important;
}

@keyframes productPanelIn {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

:where(html:not(.p-index)) .product-overview-copy{
  max-width: 880px;
  margin-bottom: 36px;
}

:where(html:not(.p-index)) .product-overview-copy > span,:where(html:not(.p-index)) .panel-title > span{
  color: #0d5fc2;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .17em;
}

:where(html:not(.p-index)) .product-overview-copy h3,:where(html:not(.p-index)) .panel-title h3{
  max-width: 850px;
  margin: 10px 0 12px;
  color: #101d32;
  font-size: clamp(30px, 4.2vw, 56px);
  line-height: 1.06;
  letter-spacing: -.045em;
}

:where(html:not(.p-index)) .product-overview-copy p,:where(html:not(.p-index)) .panel-title p{
  max-width: 760px;
  margin: 0;
  color: #607188;
  font-size: 16px;
  line-height: 1.72;
}

:where(html:not(.p-index)) .product-feature-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid #d7e2ef;
  border-left: 1px solid #d7e2ef;
}

:where(html:not(.p-index)) .product-feature-grid article{
  position: relative;
  min-height: 210px;
  padding: 32px clamp(25px, 3vw, 42px);
  border-right: 1px solid #d7e2ef;
  border-bottom: 1px solid #d7e2ef;
  background: rgba(255, 255, 255, .62);
}

:where(html:not(.p-index)) .product-feature-grid article:hover{
  background: #fff;
}

:where(html:not(.p-index)) .product-feature-grid i{
  color: #1b68c7;
  font: 700 12px/1 var(--font-display);
  font-style: normal;
  letter-spacing: .12em;
}

:where(html:not(.p-index)) .product-feature-grid h4{
  margin: 30px 0 10px;
  color: #111f34;
  font-size: 20px;
  letter-spacing: -.025em;
}

:where(html:not(.p-index)) .product-feature-grid p,:where(html:not(.p-index)) .software-grid p,:where(html:not(.p-index)) .accessory-grid p{
  margin: 0;
  color: #68798d;
  font-size: 14px;
  line-height: 1.68;
}

:where(html:not(.p-index)) .panel-title{
  margin-bottom: 32px;
}

:where(html:not(.p-index)) .software-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

:where(html:not(.p-index)) .software-grid article{
  min-width: 0;
  overflow: hidden;
  border: 1px solid #d7e2ef;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 18px 48px rgba(23, 62, 110, .07);
}

:where(html:not(.p-index)) .software-grid img{
  width: 100%;
  height: 220px;
  padding: 24px;
  display: block;
  object-fit: contain;
  background: linear-gradient(145deg, #eef4fb, #fff);
}

:where(html:not(.p-index)) .software-grid article > div{
  padding: 25px;
}

:where(html:not(.p-index)) .software-grid small,:where(html:not(.p-index)) .accessory-grid small{
  color: #1760b9;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .14em;
}

:where(html:not(.p-index)) .software-grid h4,:where(html:not(.p-index)) .accessory-grid h4{
  margin: 9px 0 11px;
  color: #14223a;
  font-size: 19px;
  line-height: 1.25;
}

:where(html:not(.p-index)) .software-grid a{
  width: fit-content;
  margin-top: 24px;
  display: inline-flex;
  color: #0d51a8;
  font-size: 13px;
  font-weight: 800;
}

:where(html:not(.p-index)) .dependency-list{
  margin-top: 16px;
  padding: 18px 22px;
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 16px;
  align-items: center;
  border: 1px solid #d7e2ef;
  border-radius: 12px;
  background: #fff;
}

:where(html:not(.p-index)) .dependency-list > div{
  display: flex;
  flex-direction: column;
  gap: 4px;
}

:where(html:not(.p-index)) .dependency-list b{ color: #17253a; font-size: 14px; }
:where(html:not(.p-index)) .dependency-list span{ color: #748398; font-size: 12px; }
:where(html:not(.p-index)) .dependency-list a{
  padding: 11px 14px;
  border: 1px solid #ccdae9;
  border-radius: 8px;
  color: #0d51a8;
  font-size: 12px;
  font-weight: 750;
}

:where(html:not(.p-index)) .product-list-search{
  max-width: 620px;
  margin-bottom: 24px;
  padding: 12px 18px;
  display: flex;
  align-items: center;
  gap: 18px;
  border: 1px solid #cbd9e9;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 12px 35px rgba(21, 61, 111, .06);
}

:where(html:not(.p-index)) .product-list-search span{
  flex: 0 0 auto;
  color: #1a5eb3;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .16em;
}

:where(html:not(.p-index)) .product-list-search input{
  width: 100%;
  min-width: 0;
  padding: 7px 0;
  border: 0;
  outline: 0;
  color: #15243a;
  background: transparent;
  font: 500 15px/1.3 var(--font-display);
}

:where(html:not(.p-index)) .product-brand-list{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

:where(html:not(.p-index)) .product-brand-list a{
  min-height: 64px;
  padding: 15px 17px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid #d7e2ef;
  border-radius: 8px;
  color: #26374d;
  background: rgba(255, 255, 255, .8);
  font-size: 13px;
  font-weight: 700;
  transition: .2s;
}

:where(html:not(.p-index)) .product-brand-list a:hover{
  border-color: #73a5df;
  color: #0d51a8;
  background: #fff;
  transform: translateY(-1px);
}

:where(html:not(.p-index)) .product-brand-list a[hidden]{ display: none; }
:where(html:not(.p-index)) .product-brand-list i{
  color: #668099;
  font-size: 9px;
  font-style: normal;
  letter-spacing: .1em;
}

:where(html:not(.p-index)) .product-list-empty{
  padding: 30px;
  border: 1px dashed #bbcde1;
  border-radius: 10px;
  color: #68798e;
  text-align: center;
}

:where(html:not(.p-index)) .product-video-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

:where(html:not(.p-index)) .product-video-grid a{
  padding: 9px 9px 22px;
  overflow: hidden;
  border: 1px solid #d7e2ef;
  border-radius: 13px;
  color: #142238;
  background: #fff;
  box-shadow: 0 16px 42px rgba(18, 58, 105, .065);
  transition: transform .25s, box-shadow .25s;
}

:where(html:not(.p-index)) .product-video-grid a:hover{
  transform: translateY(-4px);
  box-shadow: 0 22px 50px rgba(18, 58, 105, .12);
}

:where(html:not(.p-index)) .product-video-grid img{
  width: 100%;
  aspect-ratio: 16 / 9;
  display: block;
  object-fit: cover;
  border-radius: 8px;
}

:where(html:not(.p-index)) .product-video-grid span,:where(html:not(.p-index)) .product-video-grid b,:where(html:not(.p-index)) .product-video-grid i{
  margin-inline: 13px;
  display: block;
}

:where(html:not(.p-index)) .product-video-grid span{
  margin-top: 18px;
  color: #1760ba;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .13em;
  text-transform: uppercase;
}

:where(html:not(.p-index)) .product-video-grid b{
  margin-top: 8px;
  font-size: 17px;
  line-height: 1.35;
}

:where(html:not(.p-index)) .product-video-grid i{
  margin-top: 17px;
  color: #597087;
  font-size: 12px;
  font-style: normal;
}

:where(html:not(.p-index)) .accessory-grid{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

:where(html:not(.p-index)) .accessory-grid article{
  overflow: hidden;
  border: 1px solid #d7e2ef;
  border-radius: 12px;
  background: #fff;
}

:where(html:not(.p-index)) .accessory-grid img{
  width: 100%;
  height: 205px;
  padding: 20px;
  display: block;
  object-fit: contain;
  background: #fff;
  border-bottom: 1px solid #e5edf6;
}

:where(html:not(.p-index)) .accessory-grid article > div{
  padding: 21px;
}

:where(html:not(.p-index)) .accessory-catalog{
  margin-top: 16px;
  border: 1px solid #d7e2ef;
  border-radius: 12px;
  background: #fff;
}

:where(html:not(.p-index)) .accessory-catalog summary{
  padding: 20px 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #18304f;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  list-style: none;
}

:where(html:not(.p-index)) .accessory-catalog summary::-webkit-details-marker{ display: none; }
:where(html:not(.p-index)) .accessory-catalog summary span{ color: #0d5fc2; font-size: 20px; }
:where(html:not(.p-index)) .accessory-catalog[open] summary span{ transform: rotate(45deg); }
:where(html:not(.p-index)) .accessory-catalog > div{
  padding: 3px 22px 22px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 30px;
  color: #63758a;
  font-size: 13px;
  line-height: 1.65;
}

@media (max-width: 980px) {
  :where(html:not(.p-index)) .product-detail-visual-hero .product-page-layout{
    grid-template-columns: minmax(330px, .9fr) minmax(390px, 1.1fr);
    gap: 15px;
  }
  :where(html:not(.p-index)) .product-detail-heading{ display: block; }
  :where(html:not(.p-index)) .product-detail-heading > p{ margin-top: 16px; }
  :where(html:not(.p-index)) .product-tabs{
    display: flex;
    overflow-x: auto;
    scrollbar-width: none;
  }
  :where(html:not(.p-index)) .product-tabs::-webkit-scrollbar{ display: none; }
  :where(html:not(.p-index)) .product-tabs button{ min-width: max-content; }
  :where(html:not(.p-index)) .software-grid,:where(html:not(.p-index)) .product-video-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  :where(html:not(.p-index)) .accessory-grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
  :where(html:not(.p-index)) .product-brand-list{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
  :where(html:not(.p-index)) .dependency-list{ grid-template-columns: 1fr 1fr; }
  :where(html:not(.p-index)) .dependency-list > div{ grid-column: 1 / -1; }
}

@media (max-width: 680px) {
  :where(html:not(.p-index)) .product-detail-visual-hero{
    min-height: 0;
    padding: 118px 0 54px;
  }
  :where(html:not(.p-index)) .product-detail-visual-hero::before{
    background:
      linear-gradient(90deg, rgba(13, 71, 161, .04) 1px, transparent 1px),
      linear-gradient(rgba(13, 71, 161, .04) 1px, transparent 1px);
    background-size: 34px 34px;
    mask-image: linear-gradient(#000 45%, transparent 94%);
  }
  :where(html:not(.p-index)) .product-detail-visual-hero::after{ height: 90px; }
  :where(html:not(.p-index)) .product-detail-visual-hero .product-page-layout{
    display: flex;
    flex-direction: column;
    gap: 18px;
  }
  :where(html:not(.p-index)) .product-detail-visual-hero .product-page-copy{ max-width: none; }
  :where(html:not(.p-index)) .product-detail-visual-hero .product-page-visual{
    width: 100%;
    height: 330px;
    order: 2;
  }
  :where(html:not(.p-index)) .product-detail-visual-hero .product-page-visual img{
    width: 112%;
    max-width: none;
    max-height: 360px;
  }
  :where(html:not(.p-index)) .product-detail-visual-hero .product-page-visual::after{ bottom: 15px; }
  :where(html:not(.p-index)) .product-detail-hub{ padding-block: 68px; }
  :where(html:not(.p-index)) .product-detail-heading{ margin-bottom: 24px; }
  :where(html:not(.p-index)) .product-tabs{ margin-inline: -5px; }
  :where(html:not(.p-index)) .product-tabs button{ min-height: 48px; font-size: 12px; }
  :where(html:not(.p-index)) .product-panel{ padding-top: 38px; }
  :where(html:not(.p-index)) .product-overview-copy h3,:where(html:not(.p-index)) .panel-title h3{ font-size: clamp(29px, 9.5vw, 42px); }
  :where(html:not(.p-index)) .product-feature-grid,:where(html:not(.p-index)) .software-grid,:where(html:not(.p-index)) .product-video-grid,:where(html:not(.p-index)) .accessory-grid,:where(html:not(.p-index)) .product-brand-list,:where(html:not(.p-index)) .accessory-catalog > div{ grid-template-columns: 1fr; }
  :where(html:not(.p-index)) .product-feature-grid article{ min-height: 0; padding: 25px 22px; }
  :where(html:not(.p-index)) .product-feature-grid h4{ margin-top: 20px; }
  :where(html:not(.p-index)) .software-grid img{ height: 190px; }
  :where(html:not(.p-index)) .accessory-grid img{ height: 220px; }
  :where(html:not(.p-index)) .dependency-list{ grid-template-columns: 1fr; }
  :where(html:not(.p-index)) .dependency-list > div{ grid-column: auto; }
  :where(html:not(.p-index)) .dependency-list a{ text-align: center; }
  :where(html:not(.p-index)) .product-list-search{ align-items: flex-start; flex-direction: column; gap: 5px; }
}
@media (max-width: 800px) {
  :where(html:not(.p-index)) .story-layout{
    grid-template-columns: 1fr;
    gap: 20px;
  }
  :where(html:not(.p-index)) .story-step{
    min-height: 320px;
  }
  :where(html:not(.p-index)) .story-device{
    position: relative;
    top: auto;
    height: 480px;
    min-height: 0;
    grid-row: 1;
  }
  :where(html:not(.p-index)) .story-copy{
    grid-row: 2;
  }
  :where(html:not(.p-index)) .story-ring{
    width: 380px;
    height: 380px;
  }
  :where(html:not(.p-index)) .solution-grid,:where(html:not(.p-index)) .transition-departments{
    grid-template-columns: 1fr 1fr;
  }
  :where(html:not(.p-index)) .solution-bridge{
    margin-top: -85px;
  }
  :where(html:not(.p-index)) .timeline-product-preview{
    height: 170px;
  }
  :where(html:not(.p-index)) .timeline-product-preview img{
    width: 220px;
  }
}
@media (max-width: 520px) {
  :where(html:not(.p-index)) .story-device{
    height: 360px;
  }
  :where(html:not(.p-index)) .story-ring{
    width: 280px;
    height: 280px;
  }
  :where(html:not(.p-index)) .story-step{
    min-height: 290px;
  }
  :where(html:not(.p-index)) .story-step h3{
    font-size: 26px;
  }
  :where(html:not(.p-index)) .solution-grid,:where(html:not(.p-index)) .transition-departments{
    grid-template-columns: 1fr;
  }
  :where(html:not(.p-index)) .timeline-product-preview{
    padding: 18px;
  }
  :where(html:not(.p-index)) .timeline-product-preview img{
    width: 160px;
  }
  :where(html:not(.p-index)) .hero-copy h1{
    font-size: 40px;
  }
  :where(html:not(.p-index)) .hero-product{
    height: 380px;
  }
  :where(html:not(.p-index)) .product-glow{
    width: 280px;
    height: 280px;
  }
  :where(html:not(.p-index)) .platform{
    width: 330px;
    height: 75px;
  }
  :where(html:not(.p-index)) .trust-grid{
    grid-template-columns: 1fr;
  }
  :where(html:not(.p-index)) .trust-grid > div{
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
  :where(html:not(.p-index)) .section-head h2,:where(html:not(.p-index)) .flagship-copy h2,:where(html:not(.p-index)) .global-copy h2{
    font-size: 31px;
  }
  :where(html:not(.p-index)) .capability-grid,:where(html:not(.p-index)) .support-grid,:where(html:not(.p-index)) .content-grid-3,:where(html:not(.p-index)) .download-layout,:where(html:not(.p-index)) .support-modules,:where(html:not(.p-index)) .department-grid{
    grid-template-columns: 1fr;
  }
  :where(html:not(.p-index)) .flagship-visual{
    height: 340px;
  }
  :where(html:not(.p-index)) .search-panel{
    grid-template-columns: 1fr;
  }
  :where(html:not(.p-index)) .sample-result{
    grid-template-columns: 1fr;
  }
  :where(html:not(.p-index)) .sample-result > span{
    display: none;
  }
  :where(html:not(.p-index)) .map{
    height: 280px;
  }
  :where(html:not(.p-index)) .footer-main{
    grid-template-columns: 1fr;
  }
  :where(html:not(.p-index)) .footer-main > div{
    grid-row: auto;
  }
  :where(html:not(.p-index)) .footer-bottom{
    gap: 20px;
    line-height: 1.5;
  }
  :where(html:not(.p-index)) .page-hero h1{
    font-size: 36px;
  }
  :where(html:not(.p-index)) .subnav{
    overflow: auto;
  }
  :where(html:not(.p-index)) .subnav .container{
    width: max-content;
    padding: 0 15px;
  }
  :where(html:not(.p-index)) .product-page-copy h1{
    font-size: 44px;
  }
  :where(html:not(.p-index)) .product-page-benefits{
    grid-template-columns: 1fr;
    gap: 20px;
  }
  :where(html:not(.p-index)) .product-page-visual{
    height: 350px;
  }
  :where(html:not(.p-index)) .advanced-search{
    grid-template-columns: 1fr;
  }
  :where(html:not(.p-index)) .form-grid{
    grid-template-columns: 1fr;
  }
  :where(html:not(.p-index)) .field.full,:where(html:not(.p-index)) .consent{
    grid-column: auto;
  }
  :where(html:not(.p-index)) .distributor-list{
    grid-template-columns: 1fr;
  }
}

/* Readability pass — keep interface copy legible across every page. */
:where(html:not(.p-index)) body{
  font-size: 16px;
  line-height: 1.6;
}

:where(html:not(.p-index)) .nav a{
  font-size: 15px;
}
:where(html:not(.p-index)) .logo span,:where(html:not(.p-index)) .language,:where(html:not(.p-index)) .eyebrow,:where(html:not(.p-index)) .header-button{
  font-size: 13px;
}
:where(html:not(.p-index)) .button{
  font-size: 14px;
}
:where(html:not(.p-index)) .hero-copy p,:where(html:not(.p-index)) .page-hero p,:where(html:not(.p-index)) .section-head > p,:where(html:not(.p-index)) .global-copy p,:where(html:not(.p-index)) .cta-inner p,:where(html:not(.p-index)) .about-intro p{
  font-size: 17px;
}

:where(html:not(.p-index)) .product-label b,:where(html:not(.p-index)) .trust-grid span,:where(html:not(.p-index)) .capability-card > span,:where(html:not(.p-index)) .capability-card > b,:where(html:not(.p-index)) .feature-list i,:where(html:not(.p-index)) .search-panel label > span,:where(html:not(.p-index)) .sample-result small,:where(html:not(.p-index)) .update-grid article > small,:where(html:not(.p-index)) .global-copy > div span,:where(html:not(.p-index)) .footer-main > div b,:where(html:not(.p-index)) .breadcrumbs,:where(html:not(.p-index)) .advanced-search label span,:where(html:not(.p-index)) .data-row.head,:where(html:not(.p-index)) .badge,:where(html:not(.p-index)) .document-row.head,:where(html:not(.p-index)) .field label,:where(html:not(.p-index)) .story-step span,:where(html:not(.p-index)) .story-status small,:where(html:not(.p-index)) .map > span,:where(html:not(.p-index)) .timeline-product-preview small{
  font-size: 13px;
}

:where(html:not(.p-index)) .product-label span,:where(html:not(.p-index)) .flagship-visual small,:where(html:not(.p-index)) .update-grid article > span,:where(html:not(.p-index)) .footer-bottom,:where(html:not(.p-index)) .story-step > i,:where(html:not(.p-index)) .solution-grid > article > span{
  font-size: 13px;
}

:where(html:not(.p-index)) .capability-card p,:where(html:not(.p-index)) .feature-list small,:where(html:not(.p-index)) .search-panel select,:where(html:not(.p-index)) .sample-result,:where(html:not(.p-index)) .update-grid p,:where(html:not(.p-index)) .support-grid span,:where(html:not(.p-index)) .footer-main > p,:where(html:not(.p-index)) .footer-main > div a,:where(html:not(.p-index)) .subnav a,:where(html:not(.p-index)) .product-page-benefits small,:where(html:not(.p-index)) .content-card p,:where(html:not(.p-index)) .download-card li,:where(html:not(.p-index)) .timeline-full p,:where(html:not(.p-index)) .quick-tags button,:where(html:not(.p-index)) .data-row,:where(html:not(.p-index)) .support-module small,:where(html:not(.p-index)) .document-row,:where(html:not(.p-index)) .department-card p,:where(html:not(.p-index)) .consent,:where(html:not(.p-index)) .distributor-card p,:where(html:not(.p-index)) .distributor-card a,:where(html:not(.p-index)) .solution-grid p,:where(html:not(.p-index)) .transition-departments span{
  font-size: 15px;
}

:where(html:not(.p-index)) .feature-list b,:where(html:not(.p-index)) .text-link,:where(html:not(.p-index)) .update-grid a,:where(html:not(.p-index)) .support-grid b,:where(html:not(.p-index)) .product-page-benefits b,:where(html:not(.p-index)) .download-card > h3,:where(html:not(.p-index)) .download-card button,:where(html:not(.p-index)) .support-module b,:where(html:not(.p-index)) .document-row button,:where(html:not(.p-index)) .form-message,:where(html:not(.p-index)) .distributor-card h3,:where(html:not(.p-index)) .story-status b,:where(html:not(.p-index)) .solution-grid b,:where(html:not(.p-index)) .transition-departments b{
  font-size: 15px;
}

:where(html:not(.p-index)) .timeline-full span,:where(html:not(.p-index)) .department-card h3{
  font-size: 17px;
}
:where(html:not(.p-index)) .story-step p{
  font-size: 16px;
}
:where(html:not(.p-index)) .advanced-search select,:where(html:not(.p-index)) .advanced-search input,:where(html:not(.p-index)) .story-ring i{
  font-size: 15px;
}
:where(html:not(.p-index)) .solution-bridge span{
  font-size: 13px;
}
:where(html:not(.p-index)) .content-card h3{
  font-size: 17px;
}

:where(html:not(.p-index)) .capability-card p,:where(html:not(.p-index)) .feature-list small,:where(html:not(.p-index)) .update-grid p,:where(html:not(.p-index)) .support-grid span,:where(html:not(.p-index)) .content-card p,:where(html:not(.p-index)) .timeline-full p,:where(html:not(.p-index)) .support-module small,:where(html:not(.p-index)) .department-card p,:where(html:not(.p-index)) .distributor-card p,:where(html:not(.p-index)) .solution-grid p,:where(html:not(.p-index)) .transition-departments span{
  color: #4e5d6b;
}

:where(html:not(.p-index)) .capability-card{
  min-height: 290px;
}
:where(html:not(.p-index)) .update-grid article{
  min-height: 280px;
}
:where(html:not(.p-index)) .support-grid > a{
  min-height: 230px;
}
:where(html:not(.p-index)) .data-row,:where(html:not(.p-index)) .document-row{
  min-height: 76px;
}

@media (max-width: 900px) {
  :where(html:not(.p-index)) .nav a{
    font-size: 15px;
  }
  :where(html:not(.p-index)) .hero-copy p,:where(html:not(.p-index)) .page-hero p,:where(html:not(.p-index)) .section-head > p,:where(html:not(.p-index)) .global-copy p,:where(html:not(.p-index)) .cta-inner p,:where(html:not(.p-index)) .about-intro p,:where(html:not(.p-index)) .story-step p{
    font-size: 16px;
  }
}
/* Contextual imagery */
:where(html:not(.p-index)) .section-visual{
  position: relative;
  height: 275px;
  margin: 0 0 30px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: #f1f2f3;
}
:where(html:not(.p-index)) .section-visual:after{
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(20, 30, 48, 0.160), rgba(20, 30, 48, 0.063) 66%),
    linear-gradient(0deg, rgba(20, 30, 48, 0.158), transparent 58%);
  pointer-events: none;
}
:where(html:not(.p-index)) .section-visual img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.82) contrast(1.05);
  transition:
    transform 1.1s var(--ease),
    filter 0.5s;
}
:where(html:not(.p-index)) .section-visual:hover img{
  transform: scale(1.025);
  filter: saturate(1) contrast(1.06);
}
:where(html:not(.p-index)) .section-visual figcaption{
  position: absolute;
  z-index: 2;
  left: 34px;
  bottom: 30px;
  max-width: 440px;
}
:where(html:not(.p-index)) .section-visual figcaption b{
  display: block;
  margin-top: 10px;
  font-family: var(--font-display);
  font-size: 25px;
  line-height: 1.15;
  text-transform: uppercase;
}
:where(html:not(.p-index)) .coverage-visual img{
  object-position: center 58%;
}
:where(html:not(.p-index)) .support-visual img{
  object-position: center 56%;
}

:where(html:not(.p-index)) .solution-grid a{
  min-height: 360px;
  overflow: hidden;
}
:where(html:not(.p-index)) .solution-thumb{
  display: block;
  width: 100%;
  height: 105px;
  margin-top: 22px;
  border: 1px solid rgba(13, 71, 161, 0.08);
  object-fit: cover;
  object-position: center;
  filter: saturate(0.72) brightness(0.76);
  transition: 0.45s var(--ease);
}
:where(html:not(.p-index)) .solution-grid a:first-child .solution-thumb{
  object-fit: contain;
  padding: 5px;
  background: radial-gradient(circle at center, #d6d8da, #f4f5f5 70%);
}
:where(html:not(.p-index)) .solution-grid a:hover .solution-thumb{
  filter: saturate(1) brightness(0.95);
  transform: scale(1.025);
}
:where(html:not(.p-index)) .solution-grid h3{
  margin-top: 18px;
}

:where(html:not(.p-index)) .update-grid article{
  min-height: 390px;
}
:where(html:not(.p-index)) .update-thumb{
  display: block;
  width: 100%;
  height: 112px;
  margin-top: 24px;
  border: 1px solid rgba(13, 71, 161, 0.08);
  object-fit: cover;
  filter: saturate(0.75) brightness(0.78);
  transition: 0.45s var(--ease);
}
:where(html:not(.p-index)) .update-grid article:hover .update-thumb{
  filter: saturate(1) brightness(0.95);
}
:where(html:not(.p-index)) .update-grid h3{
  margin-top: 20px;
}

:where(html:not(.p-index)) .content-card{
  min-height: 365px;
  padding: 20px;
  overflow: hidden;
}
:where(html:not(.p-index)) .content-card-image{
  display: block;
  width: 100%;
  height: 130px;
  margin-bottom: 22px;
  border: 1px solid rgba(13, 71, 161, 0.08);
  object-fit: cover;
  filter: saturate(0.74) brightness(0.78);
  transition: 0.45s var(--ease);
}
:where(html:not(.p-index)) .content-card:last-child .content-card-image{
  object-fit: contain;
  padding: 6px;
  background: radial-gradient(circle, #d7d9db, #f5f6f6 70%);
}
:where(html:not(.p-index)) .content-card:hover .content-card-image{
  filter: saturate(1) brightness(0.95);
  transform: scale(1.02);
}
:where(html:not(.p-index)) .content-card h3{
  margin-top: 14px;
}

:where(html:not(.p-index)) .download-visual{
  display: block;
  width: 100%;
  height: 92px;
  margin: 12px 0 8px;
  border: 1px solid rgba(13, 71, 161, 0.08);
  object-fit: cover;
  filter: saturate(0.72) brightness(0.76);
}

:where(html:not(.p-index)) .department-card.active{
  position: relative;
  overflow: hidden;
}
:where(html:not(.p-index)) .department-card.active:after{
  content: "";
  position: absolute;
  right: -22px;
  top: -12px;
  width: 118px;
  height: 82px;
  background:
    linear-gradient(90deg, #eff0f0 0%, transparent 40%),
    url("../img/real/ford-obd.webp") center/cover;
  opacity: 0.3;
  pointer-events: none;
}

@media (max-width: 700px) {
  :where(html:not(.p-index)) .section-visual{
    height: 220px;
  }
  :where(html:not(.p-index)) .section-visual figcaption{
    left: 22px;
    right: 22px;
    bottom: 22px;
  }
  :where(html:not(.p-index)) .section-visual figcaption b{
    font-size: 20px;
  }
  :where(html:not(.p-index)) .solution-grid a,:where(html:not(.p-index)) .update-grid article{
    min-height: 360px;
  }
  :where(html:not(.p-index)) .content-card{
    min-height: 340px;
  }
}

/* Immersive inner-page scroll system */
:where(html:not(.p-index)) .header,:where(html:not(.p-index)) .subnav{
  transition:
    transform 0.5s var(--ease),
    background 0.4s,
    border-color 0.4s;
}

:where(html:not(.p-index)) .header.scrolled{
  background: rgba(255, 255, 255, 0.9);
  border-color: rgba(13, 71, 161, 0.07);
}

:where(html:not(.p-index)) .header.header-hidden{
  transform: translateY(-100%);
}

:where(html:not(.p-index)) .subnav.header-hidden{
  transform: translateY(-78px);
}

:where(html:not(.p-index)) .page-hero{
  min-height: 72vh;
  display: flex;
  align-items: center;
}

:where(html:not(.p-index)) .product-page-hero{
  min-height: 92vh;
}

:where(html:not(.p-index)) main > .scroll-scene{
  --scene-progress: 0;
  position: relative;
  isolation: isolate;
}

:where(html:not(.p-index)) main > .scroll-scene::after{
  content: "";
  position: absolute;
  z-index: 8;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(13, 71, 161, 0.72) 38%,
    rgba(13, 71, 161, 0.2) 58%,
    transparent
  );
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1.3s var(--ease);
}

:where(html:not(.p-index)) main > .scroll-scene.scene-active::after{
  transform: scaleX(1);
}

.motion-ready:where(:not(.p-index)) .scroll-reveal-item{
  opacity: 0;
  filter: blur(5px);
  transform: translate3d(0, 42px, 0) scale(0.985);
  transition:
    opacity 0.78s var(--ease) var(--reveal-delay, 0ms),
    filter 0.78s var(--ease) var(--reveal-delay, 0ms),
    transform 0.9s var(--ease) var(--reveal-delay, 0ms);
  will-change: opacity, filter, transform;
}

.motion-ready:where(:not(.p-index)) .scroll-reveal-item.in-view{
  opacity: 1;
  filter: none;
  transform: translate3d(0, 0, 0) scale(1);
}

.motion-ready:where(:not(.p-index)) .page-hero h1.scroll-reveal-item,.motion-ready:where(:not(.p-index)) .product-page-copy h1.scroll-reveal-item,.motion-ready:where(:not(.p-index)) .page-title.scroll-reveal-item,.motion-ready:where(:not(.p-index)) .section-head h2.scroll-reveal-item{
  clip-path: none;
  transform: translate3d(0, 54px, 0);
  transition: none;
}

.motion-ready:where(:not(.p-index)) .page-hero h1.scroll-reveal-item.in-view,.motion-ready:where(:not(.p-index)) .product-page-copy h1.scroll-reveal-item.in-view,.motion-ready:where(:not(.p-index)) .page-title.scroll-reveal-item.in-view,.motion-ready:where(:not(.p-index)) .section-head h2.scroll-reveal-item.in-view{
  animation: scroll-title-reveal 1.05s var(--ease) var(--reveal-delay, 0ms)
    both;
}

@keyframes scroll-title-reveal {
  from {
    opacity: 0;
    filter: blur(7px);
    transform: translate3d(0, 54px, 0);
  }
  to {
    opacity: 1;
    filter: none;
    transform: none;
  }
}

:where(html:not(.p-index)) .scroll-parallax{
  --parallax-y: 0px;
  transform: translate3d(0, var(--parallax-y), 0) scale(1.075);
  transition:
    filter 0.5s,
    transform 0.18s linear;
  will-change: transform;
}

:where(html:not(.p-index)) .section-visual:hover .scroll-parallax,:where(html:not(.p-index)) .content-card:hover .scroll-parallax{
  transform: translate3d(0, var(--parallax-y), 0) scale(1.105);
}









@media (max-width: 800px) {
  :where(html:not(.p-index)) .page-hero{
    min-height: 68vh;
  }

  :where(html:not(.p-index)) .product-page-hero{
    min-height: 82vh;
  }

  .motion-ready:where(:not(.p-index)) .scroll-reveal-item{
    filter: blur(3px);
    transform: translate3d(0, 30px, 0);
  }

  .motion-ready:where(:not(.p-index)) .scroll-reveal-item.in-view{
    filter: none;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .motion-ready:where(:not(.p-index)) .scroll-reveal-item,.motion-ready:where(:not(.p-index)) .scroll-reveal-item.in-view{
    opacity: 1 !important;
    filter: none !important;
    clip-path: none !important;
    transform: none !important;
    transition: none !important;
  }

  :where(html:not(.p-index)) .scroll-parallax{
    transform: none !important;
  }

  
}

/* Araç kapsamı: sonuç sayacı ve boş durum */
:where(html:not(.p-index)) .cov-count{
  margin: 16px 0 0;
  color: var(--dim);
  font-size: 14px;
}

:where(html:not(.p-index)) .data-row.cov-empty{
  display: block;
  min-width: 0;
  padding: 30px 20px;
  color: var(--muted);
  font-size: 15px;
  text-align: center;
}

/* Araç kapsamı — kompakt, üç sayfalı sonuç alanı */
:where(html:not(.p-index)) .coverage-table-shell{
  scroll-margin-top: 105px;
}

:where(html:not(.p-index)) .coverage-table-shell .data-table{
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.9);
}

:where(html:not(.p-index)) .coverage-table-shell .data-row{
  min-height: 62px;
  padding: 9px 16px;
  font-size: 14px;
  line-height: 1.42;
}

:where(html:not(.p-index)) .coverage-table-shell .data-row.head{
  min-height: 42px;
  padding-block: 7px;
}

:where(html:not(.p-index)) .coverage-row{
  animation: coverage-row-in 0.42s var(--ease) both;
}

:where(html:not(.p-index)) .coverage-row:nth-child(2){ animation-delay: 0.035s; }
:where(html:not(.p-index)) .coverage-row:nth-child(3){ animation-delay: 0.07s; }
:where(html:not(.p-index)) .coverage-row:nth-child(4){ animation-delay: 0.105s; }
:where(html:not(.p-index)) .coverage-row:nth-child(5){ animation-delay: 0.14s; }
:where(html:not(.p-index)) .coverage-row:nth-child(6){ animation-delay: 0.175s; }
:where(html:not(.p-index)) .coverage-row:nth-child(7){ animation-delay: 0.21s; }

@keyframes coverage-row-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

:where(html:not(.p-index)) .coverage-table-footer{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  min-height: 68px;
  padding: 14px 0 0;
}

:where(html:not(.p-index)) .coverage-table-footer .cov-count{
  margin: 0;
  font-variant-numeric: tabular-nums;
}

:where(html:not(.p-index)) .coverage-pagination{
  display: flex;
  align-items: center;
  gap: 7px;
}

:where(html:not(.p-index)) .coverage-pagination[hidden]{
  display: none;
}

:where(html:not(.p-index)) .coverage-pagination button{
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 1px solid #c7cacd;
  border-radius: 6px;
  background: #f0f1f1;
  color: #44525f;
  font: 600 13px/1 var(--font-body);
  cursor: pointer;
  transition: 0.25s var(--ease);
}

:where(html:not(.p-index)) .coverage-pagination button:hover:not(:disabled),:where(html:not(.p-index)) .coverage-pagination button:focus-visible{
  border-color: var(--red);
  color: #1e2430;
  outline: none;
  transform: translateY(-2px);
}

:where(html:not(.p-index)) .coverage-pagination button.active{
  border-color: var(--red);
  background: var(--red);
  color: #1e2430;
  box-shadow: 0 8px 24px rgba(13, 71, 161, 0.22);
}

:where(html:not(.p-index)) .coverage-pagination button:disabled{
  opacity: 0.3;
  cursor: default;
}

@media (max-width: 800px) {
  :where(html:not(.p-index)) .filter-page{
    padding: 80px 0 70px;
  }

  :where(html:not(.p-index)) .coverage-table-shell .data-row{
    min-height: 58px;
    padding: 8px 14px;
  }

  :where(html:not(.p-index)) .coverage-table-footer{
    align-items: flex-start;
    flex-direction: column;
    gap: 12px;
    padding-top: 16px;
  }

  :where(html:not(.p-index)) .coverage-pagination{
    width: 100%;
  }

  :where(html:not(.p-index)) .coverage-pagination button{
    flex: 1;
    max-width: 46px;
  }
}

@media (prefers-reduced-motion: reduce) {
  :where(html:not(.p-index)) .coverage-row{
    animation: none;
  }
}

/* Ürünler — özgün ürün görselleri ve teknik detay kartları */
:where(html:not(.p-index)) .product-family-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

:where(html:not(.p-index)) .product-family-card{
  position: relative;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: linear-gradient(145deg, #eceded, #f5f6f6 72%);
  transition:
    border-color 0.4s,
    transform 0.5s var(--ease),
    box-shadow 0.4s;
}

:where(html:not(.p-index)) .product-family-card:hover{
  z-index: 2;
  border-color: rgba(13, 71, 161, 0.52);
  transform: translateY(-5px);
  box-shadow: 0 22px 55px rgba(20, 30, 48, 0.112);
}

:where(html:not(.p-index)) .product-family-media{
  position: relative;
  height: 315px;
  margin: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
  background:
    linear-gradient(120deg, rgba(13, 71, 161, 0.08), transparent 42%),
    radial-gradient(circle at 50% 52%, #d9dbdc 0, #f1f2f2 48%, #f6f7f7 76%);
}

:where(html:not(.p-index)) .product-family-media::before,:where(html:not(.p-index)) .product-family-media::after{
  content: "";
  position: absolute;
  pointer-events: none;
}

:where(html:not(.p-index)) .product-family-media::before{
  inset: 22px;
  border: 1px solid rgba(13, 71, 161, 0.045);
}

:where(html:not(.p-index)) .product-family-media::after{
  left: 8%;
  right: 8%;
  bottom: 24px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--red), transparent);
  box-shadow: 0 0 25px rgba(13, 71, 161, 0.45);
}

:where(html:not(.p-index)) .product-family-media img{
  position: relative;
  z-index: 2;
  width: 82%;
  height: 82%;
  object-fit: contain;
  filter: drop-shadow(0 25px 24px rgba(20, 30, 48, 0.160));
  transition: transform 0.75s var(--ease);
}

:where(html:not(.p-index)) .product-family-card:hover .product-family-media img{
  transform: scale(1.045) translateY(-3px);
}

:where(html:not(.p-index)) .product-media-ir-prog img{
  width: 92%;
  height: 88%;
}

:where(html:not(.p-index)) .product-media-test-kit img{
  width: 90%;
}

:where(html:not(.p-index)) .product-media-zed-bull img{
  width: 78%;
}

:where(html:not(.p-index)) .product-state{
  position: absolute;
  z-index: 3;
  top: 20px;
  left: 20px;
  padding: 7px 9px;
  border: 1px solid rgba(13, 71, 161, 0.62);
  background: rgba(255, 255, 255, 0.9);
  color: #1e2430;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.15em;
  backdrop-filter: blur(8px);
}

:where(html:not(.p-index)) .product-state.legacy{
  border-color: #5a5f63;
  color: #404d59;
}

:where(html:not(.p-index)) .product-family-content{
  padding: 30px;
}

:where(html:not(.p-index)) .product-index{
  display: block;
  color: var(--red);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
}

:where(html:not(.p-index)) .product-family-content h3{
  margin: 10px 0 12px;
  font-family: var(--font-display);
  font-size: clamp(27px, 2.7vw, 38px);
  line-height: 1;
  letter-spacing: -0.035em;
  text-transform: uppercase;
}

:where(html:not(.p-index)) .product-family-content > p{
  max-width: 520px;
  margin: 0;
  color: #4c5b68;
  font-size: 15px;
  line-height: 1.7;
}

:where(html:not(.p-index)) .product-highlights{
  margin: 24px 0;
  padding: 0;
  display: grid;
  gap: 10px;
  list-style: none;
}

:where(html:not(.p-index)) .product-highlights li{
  position: relative;
  padding-left: 18px;
  color: #21282e;
  font-size: 13px;
  line-height: 1.5;
}

:where(html:not(.p-index)) .product-highlights li::before{
  content: "";
  position: absolute;
  left: 0;
  top: 0.68em;
  width: 7px;
  height: 1px;
  background: var(--red);
  box-shadow: 0 0 8px rgba(13, 71, 161, 0.65);
}

:where(html:not(.p-index)) .product-details{
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

:where(html:not(.p-index)) .product-details summary{
  min-height: 54px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  color: #1c2126;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  list-style: none;
}

:where(html:not(.p-index)) .product-details summary::-webkit-details-marker{
  display: none;
}

:where(html:not(.p-index)) .product-details summary i{
  color: var(--red);
  font-size: 20px;
  font-style: normal;
  font-weight: 400;
  transition: transform 0.35s var(--ease);
}

:where(html:not(.p-index)) .product-details[open] summary i{
  transform: rotate(45deg);
}

:where(html:not(.p-index)) .product-details > div{
  padding: 0 0 18px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 9px;
}

:where(html:not(.p-index)) .product-details > div span{
  min-width: 0;
  padding: 12px;
  border: 1px solid rgba(13, 71, 161, 0.065);
  background: rgba(13, 71, 161, 0.018);
  color: #566777;
  font-size: 11px;
  line-height: 1.5;
}

:where(html:not(.p-index)) .product-details > div b{
  display: block;
  margin-bottom: 4px;
  color: #1c2126;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

:where(html:not(.p-index)) .product-card-actions{
  margin-top: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

:where(html:not(.p-index)) .product-card-actions a{
  color: #546473;
  font-size: 12px;
  font-weight: 600;
  transition: color 0.25s;
}

:where(html:not(.p-index)) .product-card-actions a:last-child{
  color: #1e2430;
}

:where(html:not(.p-index)) .product-card-actions a:hover{
  color: var(--red);
}

:where(html:not(.p-index)) .legacy-product{
  background: linear-gradient(145deg, #ecedee, #f6f6f6 72%);
}

@media (max-width: 960px) {
  :where(html:not(.p-index)) .product-family-grid{
    grid-template-columns: 1fr;
  }

  :where(html:not(.p-index)) .product-family-card{
    display: grid;
    grid-template-columns: minmax(280px, 0.8fr) minmax(0, 1.2fr);
  }

  :where(html:not(.p-index)) .product-family-media{
    height: auto;
    min-height: 420px;
    border-right: 1px solid var(--line);
    border-bottom: 0;
  }
}

@media (max-width: 700px) {
  :where(html:not(.p-index)) .product-family-card{
    display: block;
  }

  :where(html:not(.p-index)) .product-family-media{
    height: 280px;
    min-height: 0;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  :where(html:not(.p-index)) .product-family-content{
    padding: 25px 20px;
  }

  :where(html:not(.p-index)) .product-details > div{
    grid-template-columns: 1fr;
  }

  :where(html:not(.p-index)) .product-card-actions{
    align-items: flex-start;
    flex-direction: column;
    gap: 10px;
  }
}

/* Açık temada logo koyu maviye çevrilir */
:where(html:not(.p-index)) .logo img,:where(html:not(.p-index)) .footer-brand img{
  filter: brightness(0) saturate(100%) invert(19%) sepia(72%) saturate(2496%)
    hue-rotate(207deg) brightness(93%) contrast(94%);
}

/* =========================================================
   IEA BLUE / WHITE THEME
   Kaynak palet: istanbulanahtar.com/zed-full-plus
   ========================================================= */
:where(html:not(.p-index)) body{
  background: #ffffff;
  color: var(--white);
}

:where(html:not(.p-index)) .header,:where(html:not(.p-index)) .header.scrolled{
  background: rgba(255, 255, 255, 0.94);
  border-bottom-color: var(--line);
  box-shadow: 0 8px 30px rgba(13, 71, 161, 0.07);
}

:where(html:not(.p-index)) .header-button,:where(html:not(.p-index)) .button.primary,:where(html:not(.p-index)) .support-page-search button,:where(html:not(.p-index)) .coverage-pagination button.active{
  border-color: var(--red);
  background: var(--red);
  color: var(--on-blue);
}

:where(html:not(.p-index)) .header-button i{
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.22);
}

:where(html:not(.p-index)) .button.primary:hover{
  border-color: var(--red2);
  background: var(--red2);
  color: #ffffff;
}

:where(html:not(.p-index)) .button.secondary{
  border-color: rgba(13, 71, 161, 0.3);
  background: #ffffff;
  color: var(--red);
}

:where(html:not(.p-index)) .button.secondary:hover{
  border-color: var(--red);
  background: var(--red);
  color: #ffffff;
}

:where(html:not(.p-index)) .hero,:where(html:not(.p-index)) .page-hero,:where(html:not(.p-index)) .product-page-hero{
  background:
    radial-gradient(circle at 76% 34%, rgba(13, 71, 161, 0.16), transparent 34%),
    linear-gradient(145deg, #ffffff 0%, #f4f8fd 62%, #eaf2fb 100%);
}

:where(html:not(.p-index)) .page-section{
  background: #ffffff;
}

:where(html:not(.p-index)) .page-section.alt,:where(html:not(.p-index)) .capability-section,:where(html:not(.p-index)) .capability-story,:where(html:not(.p-index)) .coverage-preview,:where(html:not(.p-index)) .updates,:where(html:not(.p-index)) .support-preview,:where(html:not(.p-index)) .global-section,:where(html:not(.p-index)) .solutions-section,:where(html:not(.p-index)) .map-contact-transition,:where(html:not(.p-index)) .contact-page main{
  background: var(--blue-pale);
}

:where(html:not(.p-index)) .subnav{
  background: rgba(255, 255, 255, 0.94);
  border-bottom-color: var(--line);
  box-shadow: 0 10px 30px rgba(13, 71, 161, 0.05);
}

:where(html:not(.p-index)) .subnav a.active{
  color: var(--red);
}

:where(html:not(.p-index)) .trust-grid,:where(html:not(.p-index)) .capability-card,:where(html:not(.p-index)) .content-card,:where(html:not(.p-index)) .download-card,:where(html:not(.p-index)) .support-module,:where(html:not(.p-index)) .department-card,:where(html:not(.p-index)) .distributor-card,:where(html:not(.p-index)) .search-panel,:where(html:not(.p-index)) .sample-result,:where(html:not(.p-index)) .advanced-search,:where(html:not(.p-index)) .data-table,:where(html:not(.p-index)) .document-list,:where(html:not(.p-index)) .form-panel,:where(html:not(.p-index)) .contact-direct,:where(html:not(.p-index)) .coverage-table-shell .data-table,:where(html:not(.p-index)) .product-family-card{
  border-color: var(--line);
  background: #ffffff;
}

:where(html:not(.p-index)) .capability-card,:where(html:not(.p-index)) .content-card,:where(html:not(.p-index)) .download-card,:where(html:not(.p-index)) .support-module,:where(html:not(.p-index)) .department-card,:where(html:not(.p-index)) .distributor-card,:where(html:not(.p-index)) .form-panel,:where(html:not(.p-index)) .product-family-card{
  box-shadow: 0 14px 42px rgba(13, 71, 161, 0.07);
}

:where(html:not(.p-index)) .capability-card:hover,:where(html:not(.p-index)) .support-grid > a:hover,:where(html:not(.p-index)) .solution-grid a:hover,:where(html:not(.p-index)) .department-card:hover,:where(html:not(.p-index)) .department-card:focus-visible{
  background: #edf4fb;
}

:where(html:not(.p-index)) .department-card.active{
  border-color: var(--red);
  background:
    linear-gradient(105deg, rgba(13, 71, 161, 0.12), transparent 72%),
    #ffffff;
}

:where(html:not(.p-index)) .search-panel label,:where(html:not(.p-index)) .advanced-search label,:where(html:not(.p-index)) .support-page-search input,:where(html:not(.p-index)) .document-row button,:where(html:not(.p-index)) .field input,:where(html:not(.p-index)) .field select,:where(html:not(.p-index)) .field textarea,:where(html:not(.p-index)) .coverage-pagination button{
  border-color: var(--line2);
  background: var(--blue-pale);
  color: var(--white);
}

:where(html:not(.p-index)) .field input:focus,:where(html:not(.p-index)) .field select:focus,:where(html:not(.p-index)) .field textarea:focus{
  border-color: var(--red);
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(13, 71, 161, 0.1);
}

:where(html:not(.p-index)) .data-row.head,:where(html:not(.p-index)) .document-row.head{
  background: #edf4fb;
  color: #526276;
}

:where(html:not(.p-index)) .data-row:not(.head):nth-child(even),:where(html:not(.p-index)) .document-row:not(.head):nth-child(even){
  background: #f8fbff;
}

:where(html:not(.p-index)) .flagship{
  background: linear-gradient(90deg, #ffffff, #edf4fb);
}

:where(html:not(.p-index)) .flagship-visual,:where(html:not(.p-index)) .product-page-visual:after,:where(html:not(.p-index)) .story-device,:where(html:not(.p-index)) .product-family-media,:where(html:not(.p-index)) .distributor-map,:where(html:not(.p-index)) .map,:where(html:not(.p-index)) .section-visual{
  background:
    radial-gradient(circle at center, rgba(13, 71, 161, 0.15), transparent 48%),
    var(--blue-pale);
}

:where(html:not(.p-index)) .product-label,:where(html:not(.p-index)) .story-status{
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 10px 30px rgba(13, 71, 161, 0.08);
}

:where(html:not(.p-index)) .update-grid article{
  border-color: var(--line);
  background: linear-gradient(145deg, #ffffff, #edf4fb);
  box-shadow: 0 14px 42px rgba(13, 71, 161, 0.07);
}

:where(html:not(.p-index)) .update-grid article > span{
  color: #ffffff;
}

:where(html:not(.p-index)) .world-shape{
  background: #b8cee8;
}

:where(html:not(.p-index)) .map:after{
  background: radial-gradient(circle, #6e97c3 0.8px, transparent 1px) 0 0/8px 8px;
}

:where(html:not(.p-index)) .badge{
  border-color: #d39a1e;
  background: #fff8e8;
  color: #946500;
}

:where(html:not(.p-index)) .badge.green{
  border-color: #8bc9a8;
  background: #eefaf3;
  color: #147a45;
}

:where(html:not(.p-index)) .story-ring i.active{
  color: var(--red);
  background: #e2effc;
}

:where(html:not(.p-index)) .cta{
  border-top-color: rgba(255, 255, 255, 0.16);
  background:
    radial-gradient(circle at 50% 0%, rgba(88, 169, 255, 0.28), transparent 48%),
    #0d47a1;
  color: #ffffff;
}

:where(html:not(.p-index)) .cta .eyebrow,:where(html:not(.p-index)) .cta-inner h2,:where(html:not(.p-index)) .cta-inner p{
  color: #ffffff;
}

:where(html:not(.p-index)) .cta .button.primary{
  border-color: #ffffff;
  background: #ffffff;
  color: var(--red);
}

:where(html:not(.p-index)) .cta .button.primary:hover{
  background: transparent;
  color: #ffffff;
}

:where(html:not(.p-index)) .footer,:where(html:not(.p-index)) .contact-page .footer{
  border-top-color: rgba(255, 255, 255, 0.15);
  background: #0b3b84;
  color: #ffffff;
}

:where(html:not(.p-index)) .footer-main > p,:where(html:not(.p-index)) .footer-main > div b,:where(html:not(.p-index)) .footer-main > div a,:where(html:not(.p-index)) .footer-bottom{
  color: rgba(255, 255, 255, 0.74);
}

:where(html:not(.p-index)) .footer-main > div a:hover{
  color: #ffffff;
}

:where(html:not(.p-index)) .footer-bottom{
  border-top-color: rgba(255, 255, 255, 0.16);
}

:where(html:not(.p-index)) .footer-brand img{
  filter: none;
}



@media (max-width: 800px) {
  :where(html:not(.p-index)) .nav{
    background: #ffffff;
  }

  :where(html:not(.p-index)) .menu-button{
    border-color: var(--line2);
    background: var(--blue-pale);
  }
}

/* =========================================================
   MEETING SCOPE — PRODUCTS, APPLICATIONS, RESOURCES, SHOP
   ========================================================= */
:where(html:not(.p-index)) .product-index-hero,:where(html:not(.p-index)) .application-hero{ min-height: 76vh; }

:where(html:not(.p-index)) .current-product-feature{
  min-height: 620px;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  align-items: center;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: linear-gradient(135deg, #ffffff, var(--blue-pale));
  box-shadow: var(--shadow);
}

:where(html:not(.p-index)) .current-product-copy{
  padding: clamp(42px, 6vw, 80px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

:where(html:not(.p-index)) .current-product-copy > span,:where(html:not(.p-index)) .legacy-grid small,:where(html:not(.p-index)) .resource-path-grid article > span{
  color: var(--red);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .16em;
}

:where(html:not(.p-index)) .current-product-copy h3{
  margin: 16px 0;
  font: 600 clamp(36px, 4vw, 58px)/1.08 var(--font-display);
  letter-spacing: -.04em;
}

:where(html:not(.p-index)) .current-product-copy p{ color: var(--muted); font-size: 17px; line-height: 1.7; }
:where(html:not(.p-index)) .current-product-copy ul{ margin: 18px 0 30px; padding: 0; list-style: none; }
:where(html:not(.p-index)) .current-product-copy li{ padding: 9px 0; border-bottom: 1px solid var(--line); }
:where(html:not(.p-index)) .current-product-copy li::before{ content: "✓"; margin-right: 10px; color: var(--red); font-weight: 800; }
:where(html:not(.p-index)) .current-product-copy .button{ width: max-content; }
:where(html:not(.p-index)) .current-product-feature figure{ margin: 0; display: grid; place-items: center; background: radial-gradient(circle, rgba(13,71,161,.18), transparent 58%); }
:where(html:not(.p-index)) .current-product-feature figure img{ width: 92%; filter: drop-shadow(0 30px 32px rgba(13,71,161,.16)); }

:where(html:not(.p-index)) .legacy-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

:where(html:not(.p-index)) .legacy-grid article{
  min-height: 430px;
  overflow: hidden;
  display: grid;
  grid-template-rows: 250px 1fr;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 14px 42px rgba(13,71,161,.07);
}
:where(html:not(.p-index)) .legacy-grid img{ width: 100%; height: 250px; object-fit: contain; padding: 25px; background: var(--blue-pale); }
:where(html:not(.p-index)) .legacy-grid article > div{ padding: 28px; }
:where(html:not(.p-index)) .legacy-grid h3{ margin: 8px 0 12px; font-size: 28px; }
:where(html:not(.p-index)) .legacy-grid p{ color: var(--muted); }
:where(html:not(.p-index)) .legacy-grid a{ color: var(--red); font-weight: 700; }
:where(html:not(.p-index)) .legacy-grid .legacy-text{ grid-template-rows: 1fr; background: linear-gradient(145deg, #fff, var(--blue-soft)); }
:where(html:not(.p-index)) .legacy-grid .legacy-text > div{ display: flex; flex-direction: column; justify-content: flex-end; }

:where(html:not(.p-index)) .application-database{ background: var(--blue-pale); }
:where(html:not(.p-index)) .application-filter{
  position: sticky;
  z-index: 10;
  top: 78px;
  padding: 18px;
  display: grid;
  grid-template-columns: 1.7fr repeat(3, 1fr) auto;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255,255,255,.95);
  box-shadow: 0 14px 40px rgba(13,71,161,.1);
  backdrop-filter: blur(16px);
}
:where(html:not(.p-index)) .application-filter label{ min-width: 0; padding: 11px 13px; border: 1px solid var(--line); border-radius: 8px; background: var(--blue-pale); }
:where(html:not(.p-index)) .application-filter label span{ display: block; margin-bottom: 7px; color: var(--dim); font-size: 10px; font-weight: 700; letter-spacing: .13em; }
:where(html:not(.p-index)) .application-filter input,:where(html:not(.p-index)) .application-filter select{ width: 100%; border: 0; outline: 0; background: transparent; color: var(--white); }
:where(html:not(.p-index)) .application-filter > button{ padding: 0 18px; border: 1px solid var(--line2); border-radius: 8px; background: #fff; color: var(--red); cursor: pointer; }
:where(html:not(.p-index)) .application-result-head{ padding: 32px 2px 20px; display: flex; align-items: center; justify-content: space-between; color: var(--muted); }
:where(html:not(.p-index)) .application-result-head p{ margin: 0; }
:where(html:not(.p-index)) .application-result-head b,:where(html:not(.p-index)) .application-result-head a{ color: var(--red); }

:where(html:not(.p-index)) .application-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
:where(html:not(.p-index)) .application-grid > article{ min-height: 510px; overflow: hidden; display: grid; grid-template-columns: .86fr 1.14fr; border: 1px solid var(--line); border-radius: 14px; background: #fff; box-shadow: 0 14px 42px rgba(13,71,161,.07); }
:where(html:not(.p-index)) .application-grid > article[hidden]{ display: none; }
:where(html:not(.p-index)) .application-grid img{ width: 100%; height: 100%; object-fit: cover; }
:where(html:not(.p-index)) .application-grid article > div{ padding: 34px 28px; display: flex; flex-direction: column; }
:where(html:not(.p-index)) .application-grid article span{ color: var(--red); font-size: 11px; font-weight: 700; letter-spacing: .12em; }
:where(html:not(.p-index)) .application-grid h2{ margin: 14px 0 12px; font-size: 27px; line-height: 1.15; }
:where(html:not(.p-index)) .application-grid p{ color: var(--muted); line-height: 1.65; }
:where(html:not(.p-index)) .application-grid ul{ margin: auto 0 22px; padding: 18px 0 0; border-top: 1px solid var(--line); list-style: none; color: #526276; font-size: 13px; }
:where(html:not(.p-index)) .application-grid li{ margin-top: 8px; }
:where(html:not(.p-index)) .application-grid button{ width: max-content; padding: 11px 15px; border: 1px solid var(--line2); border-radius: 6px; background: #fff; color: var(--red); cursor: pointer; font-weight: 700; }
:where(html:not(.p-index)) .application-empty{ padding: 70px 20px; text-align: center; color: var(--muted); }

:where(html:not(.p-index)) .application-dialog{ width: min(620px, calc(100% - 30px)); padding: 48px; border: 1px solid var(--line); border-radius: 16px; background: #fff; color: var(--white); box-shadow: 0 30px 100px rgba(4,28,64,.28); }
:where(html:not(.p-index)) .application-dialog::backdrop{ background: rgba(4,28,64,.55); backdrop-filter: blur(6px); }
:where(html:not(.p-index)) .application-dialog h2{ margin: 14px 0; font-size: 36px; }
:where(html:not(.p-index)) .application-dialog p,:where(html:not(.p-index)) .application-dialog div span{ color: var(--muted); line-height: 1.7; }
:where(html:not(.p-index)) .application-dialog div{ margin: 25px 0; padding: 20px; background: var(--blue-pale); }
:where(html:not(.p-index)) .application-dialog div b,:where(html:not(.p-index)) .application-dialog div span{ display: block; }
:where(html:not(.p-index)) .application-dialog-close{ position: absolute; right: 18px; top: 14px; border: 0; background: none; color: var(--red); font-size: 30px; cursor: pointer; }

:where(html:not(.p-index)) .resource-paths{ padding: 100px 0; background: var(--blue-pale); }
:where(html:not(.p-index)) .resource-path-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
:where(html:not(.p-index)) .resource-path-grid article{ min-height: 430px; padding: clamp(34px, 5vw, 64px); display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 16px; background: #fff; }
:where(html:not(.p-index)) .resource-path-grid article:last-child{ background: #0d47a1; color: #fff; }
:where(html:not(.p-index)) .resource-path-grid article:last-child > span{ color: #acd4ff; }
:where(html:not(.p-index)) .resource-path-grid h2{ margin: 18px 0; font-size: clamp(34px, 4vw, 52px); line-height: 1.08; }
:where(html:not(.p-index)) .resource-path-grid p{ color: var(--muted); line-height: 1.75; }
:where(html:not(.p-index)) .resource-path-grid article:last-child p{ color: rgba(255,255,255,.75); }
:where(html:not(.p-index)) .resource-path-grid a{ margin-top: auto; color: var(--red); font-weight: 700; }
:where(html:not(.p-index)) .resource-path-grid article:last-child a{ color: #fff; }
:where(html:not(.p-index)) .resource-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
:where(html:not(.p-index)) .resource-grid article{ overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: #fff; box-shadow: 0 14px 42px rgba(13,71,161,.07); }
:where(html:not(.p-index)) .resource-grid img{ width: 100%; height: 230px; object-fit: cover; }
:where(html:not(.p-index)) .resource-grid article > :not(img){ margin-inline: 26px; }
:where(html:not(.p-index)) .resource-grid article > span{ display: block; margin-top: 25px; color: var(--red); font-size: 11px; font-weight: 700; letter-spacing: .12em; }
:where(html:not(.p-index)) .resource-grid h3{ margin-top: 12px; font-size: 24px; }
:where(html:not(.p-index)) .resource-grid p{ color: var(--muted); line-height: 1.65; }
:where(html:not(.p-index)) .resource-grid a{ display: block; margin-block: 24px 28px; color: var(--red); font-weight: 700; }
:where(html:not(.p-index)) .resource-directory{ display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
:where(html:not(.p-index)) .resource-directory a{ position: relative; min-height: 180px; padding: 28px; display: flex; flex-direction: column; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); background: #fff; }
:where(html:not(.p-index)) .resource-directory b{ margin-top: auto; font-size: 20px; }
:where(html:not(.p-index)) .resource-directory span{ margin-top: 8px; color: var(--muted); font-size: 14px; }
:where(html:not(.p-index)) .resource-directory i{ position: absolute; right: 24px; top: 22px; color: var(--red); font-style: normal; }

:where(html:not(.p-index)) .shop-page{ min-height: 100vh; background: linear-gradient(145deg, #fff, var(--blue-soft)); }
:where(html:not(.p-index)) .shop-hero{ padding: 170px 0 110px; }
:where(html:not(.p-index)) .shop-hero > .container > h1{ max-width: 950px; margin: 18px 0; font: 600 clamp(48px, 6vw, 86px)/1.02 var(--font-display); letter-spacing: -.05em; }
:where(html:not(.p-index)) .shop-hero > .container > p{ max-width: 680px; color: var(--muted); font-size: 18px; line-height: 1.7; }
:where(html:not(.p-index)) .shop-grid{ margin-top: 56px; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
:where(html:not(.p-index)) .shop-grid a{ min-height: 360px; padding: clamp(34px, 5vw, 60px); display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 16px; background: #fff; box-shadow: var(--shadow); }
:where(html:not(.p-index)) .shop-grid a:last-child{ background: #0d47a1; color: #fff; }
:where(html:not(.p-index)) .shop-grid small{ color: var(--red); font-weight: 700; letter-spacing: .14em; }
:where(html:not(.p-index)) .shop-grid a:last-child small{ color: #acd4ff; }
:where(html:not(.p-index)) .shop-grid h2{ margin: 18px 0; font-size: 34px; }
:where(html:not(.p-index)) .shop-grid p{ color: var(--muted); line-height: 1.65; }
:where(html:not(.p-index)) .shop-grid a:last-child p{ color: rgba(255,255,255,.72); }
:where(html:not(.p-index)) .shop-grid b{ margin-top: auto; }
:where(html:not(.p-index)) .shop-note{ font-size: 13px !important; }

@media (max-width: 1050px) {
  :where(html:not(.p-index)) .application-filter{ position: relative; top: auto; grid-template-columns: 1fr 1fr; }
  :where(html:not(.p-index)) .application-search{ grid-column: 1 / -1; }
  :where(html:not(.p-index)) .application-filter > button{ min-height: 54px; }
  :where(html:not(.p-index)) .application-grid > article{ grid-template-columns: 1fr; }
  :where(html:not(.p-index)) .application-grid img{ height: 240px; }
}

@media (max-width: 800px) {
  :where(html:not(.p-index)) .current-product-feature,:where(html:not(.p-index)) .resource-path-grid,:where(html:not(.p-index)) .shop-grid{ grid-template-columns: 1fr; }
  :where(html:not(.p-index)) .current-product-feature figure{ min-height: 400px; grid-row: 1; }
  :where(html:not(.p-index)) .legacy-grid,:where(html:not(.p-index)) .resource-grid,:where(html:not(.p-index)) .resource-directory{ grid-template-columns: 1fr 1fr; }
}

@media (max-width: 560px) {
  :where(html:not(.p-index)) .application-filter,:where(html:not(.p-index)) .application-grid,:where(html:not(.p-index)) .legacy-grid,:where(html:not(.p-index)) .resource-grid,:where(html:not(.p-index)) .resource-directory{ grid-template-columns: 1fr; }
  :where(html:not(.p-index)) .application-search{ grid-column: auto; }
  :where(html:not(.p-index)) .application-result-head{ align-items: flex-start; flex-direction: column; gap: 8px; }
  :where(html:not(.p-index)) .application-grid > article{ min-height: 0; }
  :where(html:not(.p-index)) .application-dialog{ padding: 40px 24px 28px; }
  :where(html:not(.p-index)) .current-product-copy .button{ width: 100%; }
  :where(html:not(.p-index)) .shop-hero{ padding-top: 130px; }
}

/* =========================================================
   IEA VISUAL SYSTEM 2026
   Tüm içerik sayfalarında sabit tipografi ve sayfaya özel banner dili.
   ========================================================= */
html:where(:not(.p-index)),:where(html:not(.p-index)) body,:where(html:not(.p-index)) button,:where(html:not(.p-index)) input,:where(html:not(.p-index)) select,:where(html:not(.p-index)) textarea{
  font-family: var(--font-body);
}

:where(html:not(.p-index)) h1,:where(html:not(.p-index)) h2,:where(html:not(.p-index)) h3,:where(html:not(.p-index)) .page-title,:where(html:not(.p-index)) .nav a,:where(html:not(.p-index)) .button{
  font-family: var(--font-display);
}

:where(html:not(.p-index)) .page-hero.visual-hero{
  --page-banner: none;
  position: relative;
  min-height: clamp(570px, 72vh, 760px);
  overflow: hidden;
  isolation: isolate;
  padding: 148px 0 86px;
  display: flex;
  align-items: center;
  background: linear-gradient(135deg, #ffffff, #edf5ff);
}

:where(html:not(.p-index)) .page-hero.visual-hero::before{
  content: "";
  position: absolute;
  z-index: -2;
  inset: 0;
  background-image:
    linear-gradient(90deg, #fff 0%, rgba(255,255,255,.97) 31%, rgba(255,255,255,.72) 47%, rgba(255,255,255,.08) 67%, transparent 100%),
    var(--page-banner);
  background-position: center;
  background-size: cover;
  filter: saturate(.94) contrast(.98);
  transform: scale(1.015);
}

:where(html:not(.p-index)) .page-hero.visual-hero::after{
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(90deg, #fff 0%, rgba(255,255,255,.97) 31%, rgba(255,255,255,.72) 47%, rgba(255,255,255,.08) 67%, transparent 100%);
}

:where(html:not(.p-index)) .page-hero.visual-hero .container{
  position: relative;
  z-index: 1;
}

:where(html:not(.p-index)) .page-hero.visual-hero h1{
  max-width: 720px;
  font-size: clamp(48px, 5vw, 72px);
  line-height: 1.04;
  text-wrap: balance;
}

:where(html:not(.p-index)) .page-hero.visual-hero p{
  max-width: 610px;
  font-size: 18px;
}

:where(html:not(.p-index)) .page-hero.products-visual-hero{ --page-banner: url("../img/real/ford-obd.webp"); }
:where(html:not(.p-index)) .page-hero.applications-visual-hero{ --page-banner: url("../img/real/ford-obd.webp"); }
:where(html:not(.p-index)) .page-hero.support-visual-hero{ --page-banner: url("../img/real/ford-obd.webp"); }
:where(html:not(.p-index)) .page-hero.resources-visual-hero{ --page-banner: url("../img/real/ford-obd.webp"); }
:where(html:not(.p-index)) .page-hero.company-visual-hero{ --page-banner: url("../img/official/official-iea-building.jpg"); }
:where(html:not(.p-index)) .page-hero.distributor-visual-hero{ --page-banner: url("../img/official/official-iea-building.jpg"); }
:where(html:not(.p-index)) .page-hero.contact-visual-hero{ --page-banner: url("../img/real/ford-obd.webp"); }
:where(html:not(.p-index)) .page-hero.coverage-visual-hero{ --page-banner: url("../img/real/ford-obd.webp"); }
:where(html:not(.p-index)) .coverage-visual-hero::before{ filter: hue-rotate(185deg) saturate(.72) brightness(1.35); }

:where(html:not(.p-index)) .product-detail-visual-hero{
  position: relative;
  min-height: clamp(680px, 88vh, 860px);
  overflow: hidden;
  isolation: isolate;
  background: #f4f8fd;
}

:where(html:not(.p-index)) .product-detail-visual-hero::before{
  content: "";
  position: absolute;
  z-index: -2;
  inset: 0;
  background:
    linear-gradient(90deg, #fff 0%, rgba(255,255,255,.98) 33%, rgba(255,255,255,.72) 48%, transparent 70%),
    url("../img/real/ford-obd.webp") center / cover no-repeat;
}

:where(html:not(.p-index)) .product-detail-visual-hero::after{
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(90deg, #fff 0%, rgba(255,255,255,.98) 33%, rgba(255,255,255,.72) 48%, transparent 70%);
}

:where(html:not(.p-index)) .product-detail-visual-hero .product-page-layout{
  display: block;
  position: relative;
  z-index: 1;
}

:where(html:not(.p-index)) .product-detail-visual-hero .product-page-copy{
  max-width: 620px;
}

:where(html:not(.p-index)) .product-detail-visual-hero .product-page-visual{
  display: none;
}

:where(html:not(.p-index)) .shop-visual-hero{
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: linear-gradient(180deg, transparent 0, transparent 520px, #f4f8fd 780px);
}

:where(html:not(.p-index)) .shop-visual-hero::before{
  content: "";
  position: absolute;
  z-index: -2;
  inset: 0 0 auto;
  height: 700px;
  background:
    linear-gradient(90deg, #fff 0%, rgba(255,255,255,.97) 34%, rgba(255,255,255,.46) 55%, transparent 76%),
    linear-gradient(0deg, #f4f8fd 0%, transparent 36%),
    url("../img/real/ford-obd.webp") center top / cover no-repeat;
}

:where(html:not(.p-index)) .shop-visual-hero::after{
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0 0 auto;
  height: 720px;
  background: linear-gradient(90deg, #fff 0%, rgba(255,255,255,.97) 34%, rgba(255,255,255,.46) 55%, transparent 76%), linear-gradient(0deg, #f4f8fd 0%, transparent 36%);
}

:where(html:not(.p-index)) .shop-visual-hero > .container{
  position: relative;
  z-index: 1;
}

:where(html:not(.p-index)) .support-visual,:where(html:not(.p-index)) .coverage-visual{
  display: none;
}

:where(html:not(.p-index)) .advanced-search input{
  color: var(--white) !important;
}

:where(html:not(.p-index)) .mobile-nav-extra{
  display: none;
}

@media (max-width: 1050px) and (min-width: 801px) {
  :where(html:not(.p-index)) .logo{ min-width: 188px; }
  :where(html:not(.p-index)) .header-actions{ min-width: 105px; }
  :where(html:not(.p-index)) .language{ display: none; }
  :where(html:not(.p-index)) .nav{ gap: 13px; }
  :where(html:not(.p-index)) .nav a{ font-size: 12px; }
}

@media (max-width: 800px) {
  :where(html:not(.p-index)) .page-hero.visual-hero{
    min-height: 650px;
    padding: 116px 0 72px;
    align-items: flex-start;
  }

  :where(html:not(.p-index)) .page-hero.visual-hero::before{
    background-image:
      linear-gradient(180deg, rgba(255,255,255,.99) 0%, rgba(255,255,255,.97) 60%, rgba(255,255,255,.7) 82%, rgba(255,255,255,.2) 100%),
      var(--page-banner);
    background-position: 64% center;
    opacity: .86;
  }

  :where(html:not(.p-index)) .page-hero.visual-hero::after{
    background: linear-gradient(180deg, rgba(255,255,255,.99) 0%, rgba(255,255,255,.94) 52%, rgba(255,255,255,.55) 76%, rgba(255,255,255,.18) 100%);
  }

  :where(html:not(.p-index)) .page-hero.visual-hero h1{
    max-width: 11ch;
    font-size: clamp(42px, 11vw, 60px);
    overflow-wrap: anywhere;
  }

  :where(html:not(.p-index)) .product-detail-visual-hero{
    min-height: 900px;
    padding: 130px 0 285px;
    align-items: flex-start;
  }

  :where(html:not(.p-index)) .product-detail-visual-hero::before{
    background:
      linear-gradient(180deg, #fff 0%, rgba(255,255,255,.99) 54%, rgba(255,255,255,.82) 66%, rgba(255,255,255,.08) 77%, transparent 100%),
      url("../img/real/ford-obd.webp") 68% bottom / auto 330px no-repeat;
    background-color: #f4f8fd;
  }

  :where(html:not(.p-index)) .product-detail-visual-hero::after{
    background: linear-gradient(180deg, rgba(255,255,255,.99) 0%, rgba(255,255,255,.96) 55%, rgba(255,255,255,.12) 78%, transparent 100%);
  }

  :where(html:not(.p-index)) .product-detail-visual-hero .product-page-benefits{
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin: 26px 0;
  }

  :where(html:not(.p-index)) .product-detail-visual-hero .product-page-benefits > div{
    padding-right: 6px;
  }

  :where(html:not(.p-index)) .product-detail-visual-hero .product-page-benefits i{
    font-size: 23px;
  }

  :where(html:not(.p-index)) .product-detail-visual-hero .product-page-benefits b{
    margin: 8px 0 5px;
    font-size: 13px;
    line-height: 1.35;
  }

  :where(html:not(.p-index)) .product-detail-visual-hero .product-page-benefits small{
    font-size: 12px;
    line-height: 1.45;
  }

  :where(html:not(.p-index)) .product-detail-visual-hero .actions{
    flex-direction: row;
    align-items: stretch;
    gap: 8px;
    margin-top: 24px;
  }

  :where(html:not(.p-index)) .product-detail-visual-hero .actions .button{
    width: auto;
    flex: 1;
    padding-inline: 12px;
    font-size: 12px;
  }

  :where(html:not(.p-index)) .shop-visual-hero::before{
    height: 580px;
    background:
      linear-gradient(180deg, rgba(255,255,255,.98) 0%, rgba(255,255,255,.94) 54%, rgba(244,248,253,.62) 80%, #f4f8fd 100%),
      url("../img/real/ford-obd.webp") 66% top / cover no-repeat;
    opacity: .9;
  }

  :where(html:not(.p-index)) .shop-visual-hero::after{
    height: 620px;
    background: linear-gradient(180deg, #fff 0%, rgba(255,255,255,.95) 46%, rgba(244,248,253,.72) 75%, #f4f8fd 100%);
  }

  :where(html:not(.p-index)) .nav .mobile-nav-extra{
    display: block;
  }

  :where(html:not(.p-index)) .nav .mobile-nav-languages{
    padding-top: 24px;
    color: var(--muted);
    font-size: 13px;
    letter-spacing: .14em;
  }
}

/* =========================================================
   INFORMATION ARCHITECTURE 2026
   Üç ana menü grubu, açıklamalı alt menüler ve sayfa içi rota.
   ========================================================= */
html:where(:not(.p-index)){
  scroll-behavior: smooth;
  scroll-padding-top: 150px;
}

:where(html:not(.p-index)) .header-inner{
  position: relative;
}

:where(html:not(.p-index)) .header .nav{
  gap: 6px;
}

:where(html:not(.p-index)) .nav-group{
  position: relative;
}

:where(html:not(.p-index)) .nav-trigger{
  position: relative;
  min-height: 44px;
  padding: 0 17px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  border: 0;
  background: transparent;
  color: #364657;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 650;
  cursor: pointer;
}

:where(html:not(.p-index)) .nav .nav-direct{
  position: relative;
  min-height: 44px;
  padding: 0 17px;
  display: inline-flex;
  align-items: center;
  color: #364657;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 650;
  white-space: nowrap;
}

:where(html:not(.p-index)) .nav .nav-direct::after{
  left: 17px;
  right: 17px;
  bottom: 2px;
  width: auto;
  height: 2px;
  border-radius: 2px;
}

:where(html:not(.p-index)) .nav .nav-direct:hover,:where(html:not(.p-index)) .nav .nav-direct.active{
  color: var(--red);
}

:where(html:not(.p-index)) .nav-trigger::after{
  content: "";
  position: absolute;
  left: 17px;
  right: 17px;
  bottom: 2px;
  height: 2px;
  border-radius: 2px;
  background: var(--red);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .3s var(--ease);
}

:where(html:not(.p-index)) .nav-group.active > .nav-trigger,:where(html:not(.p-index)) .nav-group.open > .nav-trigger,:where(html:not(.p-index)) .nav-trigger:hover{
  color: var(--red);
}

:where(html:not(.p-index)) .nav-group.active > .nav-trigger::after,:where(html:not(.p-index)) .nav-group.open > .nav-trigger::after{
  transform: scaleX(1);
  transform-origin: left;
}

:where(html:not(.p-index)) .nav-trigger > i{
  width: 7px;
  height: 7px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform .25s;
}

:where(html:not(.p-index)) .nav-group.open > .nav-trigger > i{
  transform: translateY(2px) rotate(225deg);
}

:where(html:not(.p-index)) .nav-dropdown{
  position: fixed;
  z-index: 120;
  left: 50%;
  top: 76px;
  width: min(860px, calc(100vw - 48px));
  padding: 12px;
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 12px;
  border: 1px solid rgba(13, 71, 161, .14);
  border-radius: 16px;
  background: rgba(255,255,255,.98);
  box-shadow: 0 24px 75px rgba(20, 54, 96, .17);
  backdrop-filter: blur(22px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate(-50%, 12px);
  transition: opacity .25s, visibility .25s, transform .35s var(--ease);
}

:where(html:not(.p-index)) .nav-group.open > .nav-dropdown{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(-50%, 0);
}

:where(html:not(.p-index)) .nav-dropdown-intro{
  min-height: 206px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 12px;
  color: #fff;
  background-image:
    linear-gradient(180deg, rgba(4,24,61,.02) 0%, rgba(4,24,61,.18) 38%, rgba(4,25,66,.96) 78%),
    var(--nav-intro-image),
    linear-gradient(145deg, #eaf3ff, #0d47a1);
  background-size: cover;
  background-position: center;
  box-shadow: inset 0 -1px 0 rgba(255,255,255,.1);
}

:where(html:not(.p-index)) .nav-dropdown-intro small{
  margin-bottom: auto;
  width: max-content;
  padding: 6px 8px;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 999px;
  color: #e3f1ff;
  background: rgba(4,25,66,.48);
  backdrop-filter: blur(8px);
  font-size: 10px;
  font-weight: 750;
  letter-spacing: .18em;
}

:where(html:not(.p-index)) .nav-dropdown-intro b{
  font-size: 23px;
  line-height: 1.08;
  letter-spacing: -.03em;
  text-shadow: 0 2px 18px rgba(0,0,0,.35);
}

:where(html:not(.p-index)) .nav-dropdown-intro span{
  max-width: 22ch;
  margin-top: 7px;
  color: rgba(255,255,255,.82);
  font-size: 12px;
  line-height: 1.45;
  text-shadow: 0 1px 10px rgba(0,0,0,.42);
}

:where(html:not(.p-index)) .nav-dropdown-links{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

@media (min-width: 801px) {
  :where(html:not(.p-index)) .nav-count-2 > .nav-dropdown{
    width: min(720px, calc(100vw - 48px));
    grid-template-columns: 205px 1fr;
  }

  :where(html:not(.p-index)) .nav-count-3 > .nav-dropdown-links,:where(html:not(.p-index)) .nav-count-3 .nav-dropdown-links{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

:where(html:not(.p-index)) .nav .nav-dropdown-links a{
  min-width: 0;
  padding: 19px 42px 19px 18px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border: 1px solid transparent;
  border-radius: 9px;
  color: var(--white);
  background: #f7faff;
  transition: background .25s, border-color .25s, transform .25s;
}

:where(html:not(.p-index)) .nav .nav-dropdown-links a::after{
  display: none;
}

:where(html:not(.p-index)) .nav .nav-dropdown-links a:hover,:where(html:not(.p-index)) .nav .nav-dropdown-links a.active{
  border-color: rgba(13, 71, 161, .16);
  background: #edf5ff;
  transform: translateY(-1px);
}

:where(html:not(.p-index)) .nav-dropdown-links a b{
  color: #102038;
  font-size: 14px;
}

:where(html:not(.p-index)) .nav-dropdown-links a small{
  margin-top: 5px;
  color: #718197;
  font-size: 11px;
  line-height: 1.45;
}

:where(html:not(.p-index)) .nav-dropdown-links a i{
  position: absolute;
  right: 17px;
  top: 50%;
  color: var(--red);
  font-style: normal;
  transform: translateY(-50%);
}

:where(html:not(.p-index)) .mobile-nav-tools{
  display: none;
}

:where(html:not(.p-index)) .page-local-nav{
  position: sticky;
  z-index: 65;
  top: 78px;
  height: 66px;
  border-block: 1px solid var(--line);
  background: rgba(255,255,255,.94);
  box-shadow: 0 8px 28px rgba(13,71,161,.055);
  backdrop-filter: blur(18px);
}

:where(html:not(.p-index)) .page-local-nav > .container{
  height: 100%;
  display: flex;
  align-items: center;
  gap: 34px;
}

:where(html:not(.p-index)) .page-local-label{
  flex: 0 0 auto;
  color: #8190a2;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .18em;
}

:where(html:not(.p-index)) .page-local-links{
  display: flex;
  align-items: center;
  gap: 8px;
}

:where(html:not(.p-index)) .page-local-links a{
  padding: 9px 14px;
  border: 1px solid transparent;
  border-radius: 100px;
  color: #4d5f73;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  transition: .25s;
}

:where(html:not(.p-index)) .page-local-links a:hover,:where(html:not(.p-index)) .page-local-links a.active{
  border-color: rgba(13,71,161,.16);
  background: var(--blue-pale);
  color: var(--red);
}

:where(html:not(.p-index)) .section-editorial{
  position: relative;
  min-height: clamp(320px, 36vw, 480px);
  margin: 0 0 48px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--blue-pale);
  box-shadow: 0 22px 65px rgba(13,71,161,.09);
}

:where(html:not(.p-index)) .section-editorial img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

:where(html:not(.p-index)) .section-editorial::after{
  content: "";
  position: absolute;
  inset: 45% 0 0;
  background: linear-gradient(transparent, rgba(4,25,55,.82));
}

:where(html:not(.p-index)) .section-editorial figcaption{
  position: absolute;
  z-index: 2;
  left: clamp(24px, 4vw, 52px);
  right: clamp(24px, 4vw, 52px);
  bottom: clamp(24px, 4vw, 44px);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  color: #fff;
}

:where(html:not(.p-index)) .section-editorial figcaption span{
  color: #b9d9ff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .16em;
}

:where(html:not(.p-index)) .section-editorial figcaption b{
  max-width: 600px;
  font-size: clamp(22px, 3vw, 38px);
  line-height: 1.12;
  letter-spacing: -.035em;
  text-align: right;
}

@media (min-width: 801px) {
  :where(html:not(.p-index)) .nav-group:hover > .nav-dropdown,:where(html:not(.p-index)) .nav-group:focus-within > .nav-dropdown{
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translate(-50%, 0);
  }
}

@media (max-width: 800px) {
  html:where(:not(.p-index)){
    scroll-padding-top: 126px;
  }

  :where(html:not(.p-index)) .header .nav{
    padding: 22px 20px 34px;
    overflow-y: auto;
    align-items: stretch;
    background: rgba(248,251,255,.98);
  }

  :where(html:not(.p-index)) .nav-group{
    width: 100%;
    border-bottom: 1px solid var(--line);
  }

  :where(html:not(.p-index)) .nav .nav-direct{
    width: 100%;
    min-height: 67px;
    padding: 0 2px;
    border-bottom: 1px solid var(--line);
    font-size: 24px;
  }

  :where(html:not(.p-index)) .nav .nav-direct::after{
    display: none;
  }

  :where(html:not(.p-index)) .nav-trigger{
    width: 100%;
    min-height: 67px;
    padding: 0 2px;
    justify-content: space-between;
    font-size: 24px;
  }

  :where(html:not(.p-index)) .nav-trigger::after{
    display: none;
  }

  :where(html:not(.p-index)) .nav-dropdown{
    position: static;
    width: 100%;
    max-height: 0;
    padding: 0;
    display: block;
    overflow: hidden;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
    opacity: 1;
    visibility: visible;
    pointer-events: none;
    transform: none;
    transition: max-height .45s var(--ease), padding .3s;
  }

  :where(html:not(.p-index)) .nav-group.open > .nav-dropdown{
    max-height: 620px;
    padding: 0 0 16px;
    pointer-events: auto;
    transform: none;
  }

  :where(html:not(.p-index)) .nav-dropdown-intro{
    display: none;
  }

  :where(html:not(.p-index)) .nav-dropdown-links{
    display: grid;
    grid-template-columns: 1fr;
    gap: 5px;
  }

  :where(html:not(.p-index)) .nav .nav-dropdown-links a{
    min-height: 62px;
    padding: 12px 42px 12px 14px;
    border: 1px solid rgba(13,71,161,.08);
    border-radius: 8px;
    background: #fff;
  }

  :where(html:not(.p-index)) .nav .nav-dropdown-links a b{
    font-size: 14px;
  }

  :where(html:not(.p-index)) .nav .nav-dropdown-links a small{
    font-size: 11px;
  }

  :where(html:not(.p-index)) .mobile-nav-tools{
    padding-top: 18px;
    display: grid;
    gap: 10px;
  }

  :where(html:not(.p-index)) .nav .mobile-nav-tools > a,:where(html:not(.p-index)) .mobile-nav-tools > div{
    min-height: 67px;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border: 1px solid rgba(13,71,161,.12);
    border-radius: 9px;
    background: #fff;
  }

  :where(html:not(.p-index)) .nav .mobile-nav-tools > a{
    color: var(--red);
  }

  :where(html:not(.p-index)) .nav .mobile-nav-tools > a::after{
    display: none;
  }

  :where(html:not(.p-index)) .mobile-nav-tools b{
    font-size: 14px;
  }

  :where(html:not(.p-index)) .mobile-nav-tools span,:where(html:not(.p-index)) .mobile-nav-tools small{
    margin-top: 4px;
    color: #718197;
    font-size: 11px;
  }

  :where(html:not(.p-index)) .page-local-nav{
    top: 68px;
    height: 58px;
  }

  :where(html:not(.p-index)) .page-local-nav > .container{
    width: 100%;
    padding-inline: 15px;
    gap: 0;
    overflow-x: auto;
    scrollbar-width: none;
  }

  :where(html:not(.p-index)) .page-local-nav > .container::-webkit-scrollbar{
    display: none;
  }

  :where(html:not(.p-index)) .page-local-label{
    display: none;
  }

  :where(html:not(.p-index)) .page-local-links{
    min-width: max-content;
  }

  :where(html:not(.p-index)) .page-local-links a{
    padding: 8px 12px;
    font-size: 11px;
  }

  :where(html:not(.p-index)) .section-editorial{
    min-height: 360px;
    margin-bottom: 34px;
    border-radius: 12px;
  }

  :where(html:not(.p-index)) .section-editorial img{
    object-position: center;
  }

  :where(html:not(.p-index)) .section-editorial figcaption{
    display: block;
  }

  :where(html:not(.p-index)) .section-editorial figcaption b{
    display: block;
    margin-top: 9px;
    text-align: left;
  }
}

/* ═══════════════════════════════════════════════════
   DİSTRİBÜTÖR HARİTASI
   ═══════════════════════════════════════════════════ */
:where(html:not(.p-index)) .dist-tools{
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 22px;
}

:where(html:not(.p-index)) .dist-filters{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

:where(html:not(.p-index)) .dist-chip{
  padding: 9px 16px;
  border: 1px solid var(--line);
  border-radius: 100px;
  background: transparent;
  color: var(--muted);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: 0.25s var(--ease);
}

:where(html:not(.p-index)) .dist-chip span{
  opacity: 0.7;
  font-weight: 500;
}

:where(html:not(.p-index)) .dist-chip:hover{
  border-color: var(--red);
  color: var(--red);
}

:where(html:not(.p-index)) .dist-chip.is-active{
  border-color: var(--red);
  background: var(--red);
  color: #fff;
}

:where(html:not(.p-index)) .dist-search{
  flex: 0 1 320px;
  display: block;
}

:where(html:not(.p-index)) .dist-search input{
  width: 100%;
  height: 44px;
  padding: 0 16px;
  border: 1px solid var(--line);
  border-radius: 100px;
  background: var(--bg);
  color: var(--white);
  font-family: inherit;
  font-size: 15px;
}

:where(html:not(.p-index)) .dist-search input:focus{
  outline: none;
  border-color: var(--red);
}

/* düzen */
:where(html:not(.p-index)) .dist-layout{
  display: grid;
  grid-template-columns: 1.35fr 0.65fr;
  gap: 24px;
  align-items: start;
}

/* harita */
:where(html:not(.p-index)) .dist-map{
  position: relative;
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  background: #f2f7fc;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

:where(html:not(.p-index)) .dist-world{
  display: block;
  width: 100%;
  height: auto;
}

:where(html:not(.p-index)) .dist-sea{
  fill: url(#distSeaGrad);
}

:where(html:not(.p-index)) .dist-grid line{
  stroke: rgba(13, 71, 161, 0.07);
  stroke-width: 0.8;
}

:where(html:not(.p-index)) .dist-land path{
  fill: #bfd0e4;
  stroke: #a4bad4;
  stroke-width: 0.4;
  stroke-linejoin: round;
  transition: fill 0.3s var(--ease);
}

:where(html:not(.p-index)) .dist-map:hover .dist-land path{
  fill: #b6c9e0;
}

:where(html:not(.p-index)) .dist-links line{
  stroke: rgba(13, 71, 161, 0.3);
  stroke-width: 0.8;
  stroke-dasharray: 2.5 3.5;
  stroke-linecap: round;
}

/* pinler */
:where(html:not(.p-index)) .dist-pin{
  cursor: pointer;
}

:where(html:not(.p-index)) .dist-pin circle{
  fill: var(--red);
  stroke: #fff;
  stroke-width: 1.8;
  transition:
    r 0.25s var(--ease),
    fill 0.25s var(--ease);
  filter: drop-shadow(0 2px 3px rgba(9, 40, 95, 0.35));
}

:where(html:not(.p-index)) .dist-pin.is-hq circle{
  fill: #0b2f6b;
  stroke-width: 2.4;
}

:where(html:not(.p-index)) .dist-pin .halo{
  fill: rgba(13, 71, 161, 0.14);
  stroke: rgba(13, 71, 161, 0.22);
  stroke-width: 0.6;
}

/* merkez nabız */
:where(html:not(.p-index)) .dist-pin.is-hq .halo{
  animation: dist-pulse 2.8s ease-out infinite;
  transform-box: fill-box;
  transform-origin: center;
}

@keyframes dist-pulse {
  0% {
    opacity: 0.7;
    transform: scale(0.7);
  }
  70%,
  100% {
    opacity: 0;
    transform: scale(1.9);
  }
}

:where(html:not(.p-index)) .dist-pin:hover circle,:where(html:not(.p-index)) .dist-pin.is-active circle{
  r: 7;
  fill: #062a63;
}

:where(html:not(.p-index)) .dist-pin.is-dim{
  opacity: 0.18;
  pointer-events: none;
}

/* baloncuk */
:where(html:not(.p-index)) .dist-tip{
  position: absolute;
  z-index: 4;
  min-width: 210px;
  max-width: 280px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 16px 40px rgba(13, 71, 161, 0.18);
  pointer-events: none;
  transform: translate(-50%, calc(-100% - 14px));
}

:where(html:not(.p-index)) .dist-tip[hidden]{
  display: none;
}

:where(html:not(.p-index)) .dist-tip b{
  display: block;
  margin-bottom: 5px;
  color: var(--red);
  font-size: 14px;
}

:where(html:not(.p-index)) .dist-tip span{
  display: block;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

/* yan liste */
:where(html:not(.p-index)) .dist-side{
  position: sticky;
  top: 100px;
}

:where(html:not(.p-index)) .dist-count{
  margin-bottom: 12px;
  color: var(--dim);
  font-size: 14px;
}

:where(html:not(.p-index)) .dist-list{
  margin: 0;
  padding: 0;
  list-style: none;
  max-height: 560px;
  overflow-y: auto;
  border: 1px solid var(--line);
  border-radius: 10px;
}

:where(html:not(.p-index)) .dist-item{
  padding: 15px 16px;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  transition: background 0.2s var(--ease);
}

:where(html:not(.p-index)) .dist-item:last-child{
  border-bottom: 0;
}

:where(html:not(.p-index)) .dist-item:hover,:where(html:not(.p-index)) .dist-item.is-active{
  background: rgba(13, 71, 161, 0.06);
}

:where(html:not(.p-index)) .dist-item-top{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
}

:where(html:not(.p-index)) .dist-item b{
  font-size: 15px;
  font-weight: 700;
}

:where(html:not(.p-index)) .dist-item em{
  color: var(--dim);
  font-size: 11px;
  font-style: normal;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

:where(html:not(.p-index)) .dist-item p{
  margin: 0 0 8px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
}

:where(html:not(.p-index)) .dist-item a{
  color: var(--red);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
}

:where(html:not(.p-index)) .dist-item a:hover{
  text-decoration: underline;
}

:where(html:not(.p-index)) .dist-empty{
  padding: 26px 18px;
  color: var(--muted);
  font-size: 14px;
  text-align: center;
}

@media (max-width: 960px) {
  :where(html:not(.p-index)) .dist-layout{
    grid-template-columns: 1fr;
  }

  :where(html:not(.p-index)) .dist-side{
    position: static;
  }

  :where(html:not(.p-index)) .dist-list{
    max-height: 420px;
  }
}

/* Ürün sayfası: öne çıkan ürün bloğu */
:where(html:not(.p-index)) .current-product-copy h3{
  font-size: clamp(26px, 2.5vw, 36px);
  line-height: 1.12;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

:where(html:not(.p-index)) .current-product-copy p{
  max-width: 46ch;
}

@media (max-width: 900px) {
  :where(html:not(.p-index)) .current-product-feature{
    grid-template-columns: 1fr;
    min-height: 0;
  }

  :where(html:not(.p-index)) .current-product-feature figure{
    order: -1;
    padding: 28px 24px 0;
  }
}

/* Önceki ürün kartları eşit yükseklikte olsun */
:where(html:not(.p-index)) .legacy-grid{
  align-items: stretch;
}

:where(html:not(.p-index)) .legacy-grid article{
  display: flex;
  flex-direction: column;
}

:where(html:not(.p-index)) .legacy-grid article > div{
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}

:where(html:not(.p-index)) .legacy-grid article p{
  flex: 1 1 auto;
  margin: 8px 0 14px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.6;
}

/* görseli olmayan kart için yer tutucu */
:where(html:not(.p-index)) .legacy-ph{
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 10;
  background:
    radial-gradient(circle at 50% 45%, rgba(13, 71, 161, 0.12), transparent 62%),
    linear-gradient(150deg, #f4f8fd, #e9f0f9);
  color: rgba(13, 71, 161, 0.32);
  font-family: var(--font-display);
  font-size: clamp(28px, 3vw, 42px);
  font-weight: 800;
  letter-spacing: -0.02em;
}

/* =========================================================
   FOOTER OKUNABİLİRLİK
   Koyu mavi zeminde metin ve logo kontrastı
   ========================================================= */
:where(html:not(.p-index)) .footer,:where(html:not(.p-index)) .contact-page .footer{
  background: #0b3b84;
  color: #ffffff;
  padding: 70px 0 24px;
}

/* Logo koyu mavi filtresiyle zemine karışıyordu; footer'da beyaza çevir */
:where(html:not(.p-index)) .footer .logo img,:where(html:not(.p-index)) .footer-brand img{
  filter: brightness(0) invert(1);
  opacity: 1;
}

:where(html:not(.p-index)) .footer-main > p{
  color: #e8eefa;
  font-size: 16px;
  line-height: 1.75;
}

:where(html:not(.p-index)) .footer-main > div b{
  color: #ffffff;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  opacity: 1;
}

:where(html:not(.p-index)) .footer-main > div a{
  color: #d6e2f6;
  font-size: 16px;
  line-height: 1.6;
  transition: color 0.18s ease;
}

:where(html:not(.p-index)) .footer-main > div a:hover,:where(html:not(.p-index)) .footer-main > div a:focus-visible{
  color: #ffffff;
  text-decoration: underline;
  text-underline-offset: 3px;
}

:where(html:not(.p-index)) .footer-bottom,:where(html:not(.p-index)) .footer-bottom span{
  color: #cfddf4;
  font-size: 13px;
  letter-spacing: 0.09em;
}

:where(html:not(.p-index)) .footer-bottom{
  border-top-color: rgba(255, 255, 255, 0.28);
  padding-top: 24px;
}

:where(html:not(.p-index)) .footer-bottom i{
  background: #ffffff;
}

/* Footer logo yanındaki kurum adı koyu gri kalmıştı */
:where(html:not(.p-index)) .footer .logo,:where(html:not(.p-index)) .footer .logo span,:where(html:not(.p-index)) .footer .logo b{
  color: #ffffff;
}

/* =========================================================
   UYGULAMA KARTLARI — KOMPAKT, TUTARLI VE OKUNAKLI
   ========================================================= */
:where(html:not(.p-index)) .application-database .application-grid{
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

:where(html:not(.p-index)) .application-database .application-grid > article{
  min-height: 0;
  display: flex;
  flex-direction: column;
  border-radius: 16px;
  background: #ffffff;
  box-shadow: 0 14px 34px rgba(13, 71, 161, 0.07);
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

:where(html:not(.p-index)) .application-database .application-grid > article:hover{
  transform: translateY(-4px);
  border-color: rgba(13, 71, 161, 0.3);
  box-shadow: 0 20px 44px rgba(13, 71, 161, 0.12);
}

:where(html:not(.p-index)) .application-database .application-grid > article > img{
  width: 100%;
  height: 180px;
  aspect-ratio: 16 / 9;
  flex: 0 0 auto;
  object-fit: cover;
  object-position: center;
  border-bottom: 1px solid var(--line);
}

:where(html:not(.p-index)) .application-database .application-grid article > div{
  min-width: 0;
  flex: 1 1 auto;
  padding: 20px 22px 22px;
}

:where(html:not(.p-index)) .application-database .application-grid article span{
  font-size: 11px;
  line-height: 1.4;
}

:where(html:not(.p-index)) .application-database .application-grid h2{
  margin: 9px 0 9px;
  font-size: clamp(20px, 1.55vw, 24px);
  line-height: 1.2;
  text-wrap: balance;
}

:where(html:not(.p-index)) .application-database .application-grid p{
  margin: 0 0 16px;
  font-size: 14px;
  line-height: 1.6;
}

:where(html:not(.p-index)) .application-database .application-grid ul{
  width: 100%;
  margin: auto 0 16px;
  padding-top: 14px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px 12px;
  font-size: 13px;
  line-height: 1.45;
}

:where(html:not(.p-index)) .application-database .application-grid li{
  margin-top: 0;
}

:where(html:not(.p-index)) .application-database .application-grid button{
  padding: 10px 14px;
}

@media (max-width: 1100px) {
  :where(html:not(.p-index)) .application-database .application-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  :where(html:not(.p-index)) .application-database .application-grid > article > img{
    height: 195px;
  }
}

@media (max-width: 650px) {
  :where(html:not(.p-index)) .application-database .application-grid{
    grid-template-columns: 1fr;
  }

  :where(html:not(.p-index)) .application-database .application-grid > article{
    display: grid;
    grid-template-columns: 132px minmax(0, 1fr);
  }

  :where(html:not(.p-index)) .application-database .application-grid > article > img{
    width: 100%;
    height: 100%;
    min-height: 270px;
    aspect-ratio: auto;
    border-right: 1px solid var(--line);
    border-bottom: 0;
  }

  :where(html:not(.p-index)) .application-database .application-grid article > div{
    padding: 19px 18px 20px;
  }

  :where(html:not(.p-index)) .application-database .application-grid ul{
    grid-template-columns: 1fr;
  }

  :where(html:not(.p-index)) .application-database .application-grid h2{
    font-size: 19px;
  }

  :where(html:not(.p-index)) .application-database .application-grid p{
    font-size: 13px;
    line-height: 1.55;
  }
}

@media (max-width: 430px) {
  :where(html:not(.p-index)) .application-database .application-grid > article{
    display: flex;
  }

  :where(html:not(.p-index)) .application-database .application-grid > article > img{
    height: 185px;
    min-height: 0;
    aspect-ratio: 16 / 9;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
}

/* =========================================================
   BLOG VE KARİYER SAYFALARI
   ========================================================= */
:where(html:not(.p-index)) .blog-hero,:where(html:not(.p-index)) .career-hero{
  min-height: clamp(520px, 68vh, 690px);
  color: #ffffff;
  background:
    linear-gradient(90deg, rgba(5, 28, 66, 0.98) 0%, rgba(7, 48, 108, 0.91) 54%, rgba(13, 71, 161, 0.68) 100%),
    radial-gradient(circle at 82% 32%, rgba(97, 177, 255, 0.58), transparent 26%),
    #082c62;
}

:where(html:not(.p-index)) .career-hero{
  background:
    linear-gradient(90deg, rgba(5, 28, 66, 0.98) 0%, rgba(7, 48, 108, 0.88) 58%, rgba(13, 71, 161, 0.6) 100%),
    repeating-linear-gradient(135deg, transparent 0 38px, rgba(255,255,255,.05) 39px 40px),
    #082c62;
}

:where(html:not(.p-index)) .blog-hero .breadcrumbs,:where(html:not(.p-index)) .career-hero .breadcrumbs,:where(html:not(.p-index)) .blog-hero p,:where(html:not(.p-index)) .career-hero p{
  color: rgba(255,255,255,.76);
}

:where(html:not(.p-index)) .blog-hero .eyebrow,:where(html:not(.p-index)) .career-hero .eyebrow{
  color: #9ecbff;
}

:where(html:not(.p-index)) .blog-feature{
  display: grid;
  grid-template-columns: minmax(320px, .85fr) 1.15fr;
  min-height: 410px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #ffffff;
  box-shadow: 0 20px 56px rgba(13,71,161,.09);
}

:where(html:not(.p-index)) .blog-feature > div:last-child{
  padding: clamp(34px, 5vw, 70px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

:where(html:not(.p-index)) .blog-feature h2{
  max-width: 680px;
  margin: 14px 0;
  font-size: clamp(30px, 4vw, 54px);
  line-height: 1.06;
  letter-spacing: -.045em;
}

:where(html:not(.p-index)) .blog-feature p{
  max-width: 610px;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.75;
}

:where(html:not(.p-index)) .blog-feature a,:where(html:not(.p-index)) .blog-grid a{
  margin-top: 22px;
  color: var(--red);
  font-weight: 750;
}

:where(html:not(.p-index)) .blog-art{
  position: relative;
  min-height: 210px;
  overflow: hidden;
  background: linear-gradient(145deg, #061b3b, #0d47a1);
}

:where(html:not(.p-index)) .blog-art::before,:where(html:not(.p-index)) .blog-art::after{
  content: "";
  position: absolute;
}

:where(html:not(.p-index)) .blog-art::before{
  inset: 10%;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 50%;
  box-shadow: 0 0 0 38px rgba(255,255,255,.025), 0 0 0 78px rgba(255,255,255,.018);
}

:where(html:not(.p-index)) .blog-art::after{
  left: 12%;
  right: 12%;
  top: 50%;
  height: 1px;
  background: linear-gradient(90deg, transparent, #58a9ff, transparent);
  box-shadow: 0 -68px 0 rgba(88,169,255,.18), 0 68px 0 rgba(88,169,255,.18);
}

:where(html:not(.p-index)) .blog-art span{
  position: absolute;
  z-index: 2;
  left: 9%;
  bottom: 5%;
  color: rgba(255,255,255,.1);
  font-size: clamp(110px, 15vw, 210px);
  font-weight: 800;
  line-height: 1;
}

:where(html:not(.p-index)) .blog-grid{
  margin-top: 20px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

:where(html:not(.p-index)) .blog-grid article{
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: #ffffff;
  box-shadow: 0 14px 38px rgba(13,71,161,.06);
}

:where(html:not(.p-index)) .blog-grid article > span,:where(html:not(.p-index)) .blog-grid article > h3,:where(html:not(.p-index)) .blog-grid article > p,:where(html:not(.p-index)) .blog-grid article > a{
  margin-left: 24px;
  margin-right: 24px;
}

:where(html:not(.p-index)) .blog-grid article > span{
  display: block;
  margin-top: 24px;
  color: var(--red);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .13em;
}

:where(html:not(.p-index)) .blog-grid h3{
  margin-top: 10px;
  margin-bottom: 9px;
  font-size: 22px;
  line-height: 1.24;
}

:where(html:not(.p-index)) .blog-grid p{
  color: var(--muted);
  font-size: 14px;
  line-height: 1.65;
}

:where(html:not(.p-index)) .blog-grid article > a{
  display: inline-block;
  margin-bottom: 26px;
  font-size: 13px;
}

:where(html:not(.p-index)) .blog-art-chip{
  background: linear-gradient(145deg, #0a2a59, #1473cf);
}

:where(html:not(.p-index)) .blog-art-obd{
  background: linear-gradient(145deg, #071a35, #2c65a8);
}

:where(html:not(.p-index)) .blog-art-service{
  background: linear-gradient(145deg, #0c3979, #76b8ed);
}

:where(html:not(.p-index)) .blog-categories,:where(html:not(.p-index)) .career-grid{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

:where(html:not(.p-index)) .blog-categories a,:where(html:not(.p-index)) .career-grid article{
  min-height: 175px;
  padding: 25px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #ffffff;
  transition: transform .25s, border-color .25s, box-shadow .25s;
}

:where(html:not(.p-index)) .blog-categories a:hover{
  transform: translateY(-3px);
  border-color: rgba(13,71,161,.25);
  box-shadow: 0 14px 34px rgba(13,71,161,.08);
}

:where(html:not(.p-index)) .blog-categories b{
  color: #102038;
  font-size: 17px;
}

:where(html:not(.p-index)) .blog-categories span{
  margin-top: 8px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

:where(html:not(.p-index)) .career-grid article{
  justify-content: flex-start;
}

:where(html:not(.p-index)) .career-grid article > span{
  color: var(--red);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .14em;
}

:where(html:not(.p-index)) .career-grid h3{
  margin: auto 0 8px;
  font-size: 20px;
}

:where(html:not(.p-index)) .career-grid p{
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.6;
}

:where(html:not(.p-index)) .career-apply{
  display: grid;
  grid-template-columns: .78fr 1.22fr;
  gap: clamp(36px, 7vw, 90px);
  align-items: start;
}

:where(html:not(.p-index)) .career-apply-copy{
  position: sticky;
  top: 175px;
}

:where(html:not(.p-index)) .career-apply-copy h2{
  margin: 15px 0;
  font-size: clamp(36px, 5vw, 64px);
  line-height: 1.02;
  letter-spacing: -.045em;
}

:where(html:not(.p-index)) .career-apply-copy > p{
  color: var(--muted);
  font-size: 16px;
  line-height: 1.75;
}

:where(html:not(.p-index)) .career-apply-copy > div{
  margin-top: 30px;
  padding-top: 22px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-top: 1px solid var(--line);
}

:where(html:not(.p-index)) .career-apply-copy > div b{
  font-size: 14px;
}

:where(html:not(.p-index)) .career-apply-copy > div span{
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
}

@media (max-width: 900px) {
  :where(html:not(.p-index)) .blog-feature,:where(html:not(.p-index)) .career-apply{
    grid-template-columns: 1fr;
  }

  :where(html:not(.p-index)) .blog-grid,:where(html:not(.p-index)) .blog-categories,:where(html:not(.p-index)) .career-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  :where(html:not(.p-index)) .career-apply-copy{
    position: static;
  }
}

@media (max-width: 600px) {
  :where(html:not(.p-index)) .blog-grid,:where(html:not(.p-index)) .blog-categories,:where(html:not(.p-index)) .career-grid{
    grid-template-columns: 1fr;
  }

  :where(html:not(.p-index)) .blog-feature{
    min-height: 0;
  }

  :where(html:not(.p-index)) .blog-feature > div:last-child{
    padding: 30px 24px 34px;
  }

  :where(html:not(.p-index)) .blog-categories a,:where(html:not(.p-index)) .career-grid article{
    min-height: 145px;
  }
}

/* Son ürün kahraman alanı: üretilmiş banner yerine gerçek cihaz fotoğrafı */
:where(html:not(.p-index)) .product-detail-visual-hero{
  position: relative;
  isolation: isolate;
  min-height: 760px;
  overflow: hidden;
  background:
    radial-gradient(circle at 78% 46%, rgba(27, 105, 202, .15), transparent 29%),
    linear-gradient(135deg, #fff 0%, #f7faff 58%, #eaf3fe 100%);
}

:where(html:not(.p-index)) .product-detail-visual-hero::before{
  background:
    linear-gradient(90deg, rgba(13, 71, 161, .045) 1px, transparent 1px),
    linear-gradient(rgba(13, 71, 161, .045) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: linear-gradient(90deg, transparent 15%, #000 62%, transparent);
  opacity: .62;
}

:where(html:not(.p-index)) .product-detail-visual-hero::after{
  inset: auto 0 0;
  height: 170px;
  background: linear-gradient(transparent, #f5f9fe);
}

:where(html:not(.p-index)) .product-detail-visual-hero .product-page-layout{
  display: grid;
  grid-template-columns: minmax(420px, .86fr) minmax(540px, 1.14fr);
  gap: clamp(24px, 4vw, 70px);
  align-items: center;
}

:where(html:not(.p-index)) .product-detail-visual-hero .product-page-copy{
  max-width: 620px;
}

:where(html:not(.p-index)) .product-detail-visual-hero .product-page-visual{
  height: min(54vw, 650px);
  display: grid;
}

:where(html:not(.p-index)) .product-detail-visual-hero .product-page-visual img{
  width: min(100%, 760px);
  max-height: 620px;
  object-fit: contain;
  filter: drop-shadow(0 34px 30px rgba(26, 49, 78, .2));
}

:where(html:not(.p-index)) .product-detail-visual-hero .product-page-visual::after{
  bottom: 54px;
  width: 84%;
  height: 72px;
  border: 0;
  background: radial-gradient(ellipse, rgba(17, 61, 115, .23), transparent 68%);
}

@media (max-width: 980px) and (min-width: 681px) {
  :where(html:not(.p-index)) .product-detail-visual-hero .product-page-layout{
    grid-template-columns: minmax(330px, .9fr) minmax(390px, 1.1fr);
    gap: 15px;
  }
}

@media (max-width: 680px) {
  :where(html:not(.p-index)) .product-detail-visual-hero{
    min-height: 0;
    padding: 118px 0 54px;
  }

  :where(html:not(.p-index)) .product-detail-visual-hero::before{
    background:
      linear-gradient(90deg, rgba(13, 71, 161, .04) 1px, transparent 1px),
      linear-gradient(rgba(13, 71, 161, .04) 1px, transparent 1px);
    background-size: 34px 34px;
    mask-image: linear-gradient(#000 45%, transparent 94%);
  }

  :where(html:not(.p-index)) .product-detail-visual-hero::after{ height: 90px; }

  :where(html:not(.p-index)) .product-detail-visual-hero .product-page-layout{
    display: flex;
    flex-direction: column;
    gap: 18px;
  }

  :where(html:not(.p-index)) .product-detail-visual-hero .product-page-copy{ max-width: none; }

  :where(html:not(.p-index)) .product-detail-visual-hero .product-page-visual{
    width: 100%;
    height: 330px;
    display: grid;
    order: 2;
  }

  :where(html:not(.p-index)) .product-detail-visual-hero .product-page-visual img{
    width: 112%;
    max-width: none;
    max-height: 360px;
  }

  :where(html:not(.p-index)) .product-detail-visual-hero .product-page-visual::after{ bottom: 15px; }
}

/* Zed ürün ailesi detay sayfaları */
:where(html:not(.p-index)) .catalog-product-hero .product-page-copy > p{
  max-width: 590px;
  font-size: clamp(18px, 1.7vw, 23px);
}

:where(html:not(.p-index)) .catalog-product-hero .product-page-copy h1{
  font-size: clamp(56px, 6.2vw, 92px);
  line-height: .96;
  letter-spacing: -.065em;
}

:where(html:not(.p-index)) .catalog-product-status{
  width: fit-content;
  margin-top: 24px;
  padding: 8px 11px;
  display: block;
  border: 1px solid rgba(13, 71, 161, .2);
  border-radius: 5px;
  color: #155cb4;
  background: rgba(255, 255, 255, .7);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .15em;
}

:where(html:not(.p-index)) .catalog-product-hero .product-page-benefits{
  gap: 10px;
}

:where(html:not(.p-index)) .catalog-product-hero .product-page-benefits i{
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .12em;
}

:where(html:not(.p-index)) .catalog-product-hero .product-page-benefits small{
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

:where(html:not(.p-index)) .catalog-product-hero .product-page-visual img{
  max-height: 560px;
}

:where(html:not(.p-index)) .zed-family-hub{
  border-top: 1px solid #d9e5f2;
}

:where(html:not(.p-index)) .zed-family-tabs{
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

:where(html:not(.p-index)) .zed-hardware-grid{
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

:where(html:not(.p-index)) .zed-hardware-grid img{
  height: 245px;
}

:where(html:not(.p-index)) .zed-resource-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

:where(html:not(.p-index)) .zed-resource-grid > a{
  min-height: 220px;
  padding: 27px;
  display: flex;
  flex-direction: column;
  border: 1px solid #d7e2ef;
  border-radius: 12px;
  color: #142238;
  background:
    linear-gradient(145deg, rgba(235, 244, 255, .5), transparent 60%),
    #fff;
  transition: transform .24s, border-color .24s, box-shadow .24s;
}

:where(html:not(.p-index)) .zed-resource-grid > a:hover{
  border-color: #7ba9df;
  box-shadow: 0 18px 44px rgba(18, 62, 114, .1);
  transform: translateY(-3px);
}

:where(html:not(.p-index)) .zed-resource-grid small{
  color: #1761bb;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .15em;
}

:where(html:not(.p-index)) .zed-resource-grid h4{
  margin: 28px 0 10px;
  font-size: 20px;
  line-height: 1.3;
  letter-spacing: -.025em;
}

:where(html:not(.p-index)) .zed-resource-grid p{
  margin: 0 0 25px;
  color: #68798d;
  font-size: 14px;
  line-height: 1.65;
}

:where(html:not(.p-index)) .zed-resource-grid b{
  margin-top: auto;
  color: #0d55ae;
  font-size: 12px;
}

:where(html:not(.p-index)) .zed-link-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

:where(html:not(.p-index)) .zed-link-grid > a{
  min-height: 92px;
  padding: 20px 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  border: 1px solid #d7e2ef;
  border-radius: 10px;
  color: #17263b;
  background: #fff;
  transition: .22s;
}

:where(html:not(.p-index)) .zed-link-grid > a:hover{
  border-color: #77a9e2;
  background: #f7fbff;
  transform: translateX(3px);
}

:where(html:not(.p-index)) .zed-link-grid span,:where(html:not(.p-index)) .zed-link-grid b,:where(html:not(.p-index)) .zed-link-grid small{
  display: block;
}

:where(html:not(.p-index)) .zed-link-grid b{
  font-size: 15px;
}

:where(html:not(.p-index)) .zed-link-grid small{
  margin-top: 6px;
  color: #718197;
  font-size: 12px;
  line-height: 1.45;
}

:where(html:not(.p-index)) .zed-link-grid i{
  flex: 0 0 auto;
  color: #0d5dbd;
  font-size: 18px;
  font-style: normal;
}

:where(html:not(.p-index)) .zed-official-source{
  width: fit-content;
  margin-top: 24px;
  padding: 12px 16px;
  display: inline-flex;
  border: 1px solid #b9cde4;
  border-radius: 7px;
  color: #0d55ae;
  background: #fff;
  font-size: 12px;
  font-weight: 800;
}

:where(html:not(.p-index)) .zed-family-switch{
  border-top: 1px solid rgba(255, 255, 255, .14);
  background: #0d47a1;
}

:where(html:not(.p-index)) .zed-family-switch > .container{
  min-height: 108px;
  display: flex;
  align-items: center;
  gap: 10px;
}

:where(html:not(.p-index)) .zed-family-switch span{
  margin-right: auto;
  color: #bcd8fa;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .17em;
}

:where(html:not(.p-index)) .zed-family-switch a{
  padding: 11px 14px;
  border: 1px solid rgba(255, 255, 255, .24);
  border-radius: 7px;
  color: #fff;
  font-size: 12px;
  font-weight: 750;
}

:where(html:not(.p-index)) .zed-family-switch a:hover{
  color: #0d47a1;
  background: #fff;
}

@media (max-width: 900px) {
  :where(html:not(.p-index)) .zed-hardware-grid,:where(html:not(.p-index)) .zed-resource-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 680px) {
  :where(html:not(.p-index)) .catalog-product-hero .product-page-copy h1{
    font-size: clamp(49px, 15vw, 68px);
  }

  :where(html:not(.p-index)) .catalog-product-hero .product-page-benefits{
    grid-template-columns: 1fr;
  }

  :where(html:not(.p-index)) .catalog-product-hero .product-page-benefits small{
    -webkit-line-clamp: 2;
  }

  :where(html:not(.p-index)) .zed-family-tabs{
    grid-template-columns: none;
  }

  :where(html:not(.p-index)) .zed-hardware-grid,:where(html:not(.p-index)) .zed-resource-grid,:where(html:not(.p-index)) .zed-link-grid{
    grid-template-columns: 1fr;
  }

  :where(html:not(.p-index)) .zed-hardware-grid img{
    height: 220px;
  }

  :where(html:not(.p-index)) .zed-resource-grid > a{
    min-height: 185px;
  }

  :where(html:not(.p-index)) .zed-family-switch > .container{
    padding-block: 26px;
    flex-wrap: wrap;
  }

  :where(html:not(.p-index)) .zed-family-switch span{
    width: 100%;
    margin: 0 0 8px;
  }
}

/* Complete official PDF document catalogue */
:where(html:not(.p-index)) .support-visual-hero .support-page-search{
  max-width: 790px;
  height: 58px;
}

:where(html:not(.p-index)) .support-visual-hero .support-page-search input{
  min-width: 0;
  padding-inline: 19px;
  border-radius: 8px 0 0 8px;
  font: 600 14px/1 "Plus Jakarta Sans", sans-serif;
}

:where(html:not(.p-index)) .support-visual-hero .support-page-search button{
  width: auto;
  min-width: 205px;
  padding: 0 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  border-radius: 0 8px 8px 0;
  color: #fff;
  font: 750 12px/1 "Plus Jakarta Sans", sans-serif;
  cursor: pointer;
}

:where(html:not(.p-index)) .support-visual-hero .support-page-search button span{
  font-size: 16px;
}

:where(html:not(.p-index)) .support-search-hint{
  max-width: 790px;
  margin-top: 11px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  color: #6b7d91;
  font-size: 11px;
  line-height: 1.5;
}

:where(html:not(.p-index)) .support-search-hint b{
  color: #145bad;
  white-space: nowrap;
}

:where(html:not(.p-index)) .support-modules .support-module{
  width: 100%;
  color: #17263b;
  text-align: left;
  font-family: inherit;
  cursor: pointer;
  border-radius: 10px;
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}

:where(html:not(.p-index)) .support-modules .support-module:hover,:where(html:not(.p-index)) .support-modules .support-module:focus-visible{
  border-color: #8fb6e2;
  box-shadow: 0 16px 38px rgba(13, 71, 161, .1);
  transform: translateY(-3px);
}

:where(html:not(.p-index)) .documents-catalog{
  margin-top: 46px;
  scroll-margin-top: 104px;
}

:where(html:not(.p-index)) .documents-heading{
  padding: 0 2px 25px;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(300px, .75fr);
  align-items: end;
  gap: 50px;
}

:where(html:not(.p-index)) .documents-heading h2{
  margin: 8px 0 0;
  color: #111d30;
  font-size: clamp(34px, 4vw, 58px);
  line-height: 1.02;
  letter-spacing: -.055em;
}

:where(html:not(.p-index)) .documents-heading p{
  max-width: 550px;
  margin: 0;
  color: #617287;
  font-size: 15px;
  line-height: 1.7;
}

:where(html:not(.p-index)) .document-filters{
  padding: 18px;
  display: grid;
  grid-template-columns: minmax(270px, 1.8fr) repeat(3, minmax(145px, 1fr)) auto;
  align-items: end;
  gap: 10px;
  border: 1px solid #cfdeee;
  border-radius: 12px 12px 0 0;
  background: #fff;
  box-shadow: 0 16px 46px rgba(18, 62, 114, .07);
}

:where(html:not(.p-index)) .document-filters label{
  min-width: 0;
}

:where(html:not(.p-index)) .document-filters label > span{
  display: block;
  margin: 0 0 8px 2px;
  color: #60758d;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .15em;
}

:where(html:not(.p-index)) .document-filters input,:where(html:not(.p-index)) .document-filters select{
  width: 100%;
  height: 48px;
  padding: 0 14px;
  border: 1px solid #d4e0ec;
  border-radius: 7px;
  outline: 0;
  color: #17263b;
  background: #f7faff;
  font: 600 12px/1 "Plus Jakarta Sans", sans-serif;
  transition: border-color .2s, box-shadow .2s, background .2s;
}

:where(html:not(.p-index)) .document-filters input:focus,:where(html:not(.p-index)) .document-filters select:focus{
  border-color: #286ebe;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(31, 104, 188, .1);
}

:where(html:not(.p-index)) .document-filters input::placeholder{
  color: #8391a3;
}

:where(html:not(.p-index)) .document-filters > button{
  height: 48px;
  padding: 0 17px;
  border: 1px solid #bfd2e8;
  border-radius: 7px;
  color: #1657a5;
  background: #fff;
  font: 750 11px/1 "Plus Jakarta Sans", sans-serif;
  white-space: nowrap;
  cursor: pointer;
}

:where(html:not(.p-index)) .document-filters > button:hover{
  border-color: #286ebe;
  background: #eef6ff;
}

:where(html:not(.p-index)) .document-result-bar{
  min-height: 54px;
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  border-inline: 1px solid #cfdeee;
  background: #f3f7fc;
}

:where(html:not(.p-index)) .document-result-bar b{
  color: #14243a;
  font-size: 13px;
}

:where(html:not(.p-index)) .document-result-bar span{
  color: #718196;
  font-size: 11px;
}

:where(html:not(.p-index)) .documents-catalog .document-list{
  margin-top: 0;
  border-color: #cfdeee;
  border-radius: 0 0 12px 12px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 18px 50px rgba(18, 62, 114, .06);
}

:where(html:not(.p-index)) .documents-catalog .document-row{
  grid-template-columns: minmax(320px, 2.1fr) minmax(74px, .48fr) minmax(125px, .8fr) minmax(90px, .55fr) minmax(118px, .58fr);
  min-height: 84px;
  padding: 0 20px;
  gap: 16px;
  color: #44566c;
  font-size: 12px;
}

:where(html:not(.p-index)) .documents-catalog .document-row:not(.head){
  opacity: 1;
  transform: none;
  background: #fff;
}

:where(html:not(.p-index)) .documents-catalog .document-row:not(.head):hover{
  background: #f8fbff;
}

:where(html:not(.p-index)) .documents-catalog .document-row.head{
  min-height: 43px;
  color: #66798f;
  background: #edf4fb;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .12em;
}

:where(html:not(.p-index)) .document-title{
  min-width: 0;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  align-items: center;
  column-gap: 13px;
}

:where(html:not(.p-index)) .document-title > i{
  grid-row: 1 / 3;
  width: 38px;
  height: 45px;
  display: grid;
  place-items: center;
  border: 1px solid #8fb6e2;
  border-radius: 5px;
  color: #145bad;
  background: #eef6ff;
  font-size: 9px;
  font-style: normal;
  font-weight: 800;
  letter-spacing: .04em;
}

:where(html:not(.p-index)) .document-title b{
  overflow: hidden;
  color: #17263b;
  font-size: 13px;
  line-height: 1.4;
  text-overflow: ellipsis;
}

:where(html:not(.p-index)) .document-title small{
  margin-top: 3px;
  color: #75869a;
  font-size: 10px;
}

:where(html:not(.p-index)) .document-action a{
  min-height: 38px;
  padding: 0 13px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border: 1px solid #b8cee7;
  border-radius: 6px;
  color: #1157a8;
  background: #fff;
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
  transition: .2s;
}

:where(html:not(.p-index)) .document-action a:hover{
  border-color: #0f5eb9;
  color: #fff;
  background: #0f5eb9;
}

:where(html:not(.p-index)) .document-action i{
  font-style: normal;
}

:where(html:not(.p-index)) .document-empty{
  margin: 0;
  padding: 55px 25px;
  color: #617287;
  text-align: center;
  font-size: 14px;
}

:where(html:not(.p-index)) .document-pagination{
  min-height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

:where(html:not(.p-index)) .document-pagination button{
  width: 38px;
  height: 38px;
  border: 1px solid #c8d8ea;
  border-radius: 6px;
  color: #34506f;
  background: #fff;
  font: 700 11px/1 "Plus Jakarta Sans", sans-serif;
  cursor: pointer;
}

:where(html:not(.p-index)) .document-pagination button:hover:not(:disabled),:where(html:not(.p-index)) .document-pagination button.active{
  border-color: #145bad;
  color: #fff;
  background: #145bad;
}

:where(html:not(.p-index)) .document-pagination button:disabled{
  opacity: .35;
  cursor: default;
}

:where(html:not(.p-index)) .document-pagination span{
  padding: 0 3px;
  color: #7c8da0;
}

@media (max-width: 1080px) {
  :where(html:not(.p-index)) .document-filters{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  :where(html:not(.p-index)) .document-search-field{
    grid-column: 1 / -1;
  }

  :where(html:not(.p-index)) .document-filters > button{
    align-self: end;
  }

  :where(html:not(.p-index)) .documents-catalog .document-row{
    grid-template-columns: minmax(280px, 1.7fr) 70px minmax(110px, .8fr) 90px 112px;
    gap: 11px;
  }
}

@media (max-width: 760px) {
  :where(html:not(.p-index)) .documents-catalog{
    margin-top: 34px;
  }

  :where(html:not(.p-index)) .documents-heading{
    grid-template-columns: 1fr;
    gap: 14px;
  }

  :where(html:not(.p-index)) .documents-heading p{
    font-size: 13px;
  }

  :where(html:not(.p-index)) .document-result-bar{
    padding-block: 13px;
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
  }

  :where(html:not(.p-index)) .documents-catalog .document-row.head{
    display: none;
  }

  :where(html:not(.p-index)) .documents-catalog .document-row{
    min-height: 0;
    padding: 19px;
    grid-template-columns: 1fr 1fr;
    gap: 15px 20px;
  }

  :where(html:not(.p-index)) .documents-catalog .document-row > *:nth-child(4),:where(html:not(.p-index)) .documents-catalog .document-row > *:nth-child(5){
    display: block;
  }

  :where(html:not(.p-index)) .documents-catalog .document-row > span:not(.document-title):not(.document-action)::before{
    content: attr(data-label);
    margin-bottom: 5px;
    display: block;
    color: #8290a0;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .13em;
    text-transform: uppercase;
  }

  :where(html:not(.p-index)) .document-title,:where(html:not(.p-index)) .document-action{
    grid-column: 1 / -1;
  }

  :where(html:not(.p-index)) .document-action a{
    width: 100%;
  }
}

@media (max-width: 520px) {
  :where(html:not(.p-index)) .support-visual-hero .support-page-search{
    height: auto;
    align-items: stretch;
    flex-direction: column;
    gap: 8px;
  }

  :where(html:not(.p-index)) .support-visual-hero .support-page-search input,:where(html:not(.p-index)) .support-visual-hero .support-page-search button{
    width: 100%;
    min-width: 0;
    height: 52px;
    border-radius: 7px;
  }

  :where(html:not(.p-index)) .support-search-hint{
    align-items: flex-start;
    flex-direction: column;
    gap: 5px;
  }

  :where(html:not(.p-index)) .document-filters{
    padding: 14px;
    grid-template-columns: 1fr;
  }

  :where(html:not(.p-index)) .document-search-field{
    grid-column: auto;
  }

  :where(html:not(.p-index)) .document-filters > button{
    width: 100%;
  }

  :where(html:not(.p-index)) .document-result-bar span{
    line-height: 1.5;
  }
}

/* Partnership / commercial enquiry page */
:where(html:not(.p-index)) .partnership-page{
  background: #fff;
}

:where(html:not(.p-index)) .partnership-hero{
  min-height: clamp(600px, 78vh, 790px);
  background:
    linear-gradient(90deg, rgba(4, 27, 62, .98) 0%, rgba(7, 48, 108, .93) 55%, rgba(13, 71, 161, .68) 100%),
    radial-gradient(circle at 78% 38%, rgba(111, 184, 255, .52), transparent 30%),
    repeating-linear-gradient(135deg, transparent 0 46px, rgba(255, 255, 255, .035) 47px 48px),
    #082c62;
}

:where(html:not(.p-index)) .partnership-hero h1{
  max-width: 940px;
  font-size: clamp(48px, 6.4vw, 94px);
  line-height: .98;
  letter-spacing: -.058em;
}

:where(html:not(.p-index)) .partnership-hero p{
  max-width: 730px;
  font-size: 16px;
  line-height: 1.75;
}

:where(html:not(.p-index)) .partnership-hero-cta{
  width: fit-content;
  margin-top: 25px;
  border-radius: 8px;
}

:where(html:not(.p-index)) .partnership-section-head{
  align-items: end;
}

:where(html:not(.p-index)) .partnership-section-head h2{
  max-width: 750px;
}

:where(html:not(.p-index)) .partnership-section-head > p{
  max-width: 470px;
}

:where(html:not(.p-index)) .partnership-grid article{
  min-height: 260px;
  position: relative;
  padding: 26px;
  overflow: hidden;
  background:
    linear-gradient(145deg, rgba(237, 246, 255, .78), transparent 58%),
    #fff;
  cursor: pointer;
}

:where(html:not(.p-index)) .partnership-grid article::after{
  content: "";
  position: absolute;
  right: -45px;
  top: -45px;
  width: 130px;
  height: 130px;
  border: 1px solid rgba(13, 71, 161, .1);
  border-radius: 50%;
}

:where(html:not(.p-index)) .partnership-grid article:hover,:where(html:not(.p-index)) .partnership-grid article:focus-visible,:where(html:not(.p-index)) .partnership-grid article.selected{
  border-color: #8fb7e5;
  box-shadow: 0 18px 42px rgba(13, 71, 161, .1);
  transform: translateY(-4px);
  outline: 0;
}

:where(html:not(.p-index)) .partnership-grid article.selected{
  border-color: #0d5bb6;
  background: #eef6ff;
}

:where(html:not(.p-index)) .partnership-card-icon{
  width: 48px;
  height: 48px;
  margin-top: 24px;
  display: grid;
  place-items: center;
  border: 1px solid #bfd4eb;
  border-radius: 50%;
  color: #0d5bb6;
  background: #eef6ff;
  font-size: 20px;
}

:where(html:not(.p-index)) .partnership-grid h3{
  margin-top: auto;
}

:where(html:not(.p-index)) .partnership-apply-section{
  background:
    linear-gradient(135deg, rgba(13, 71, 161, .035), transparent 46%),
    #f4f8fd;
}

:where(html:not(.p-index)) .partnership-apply{
  grid-template-columns: minmax(300px, .72fr) minmax(0, 1.28fr);
}

:where(html:not(.p-index)) .partnership-process{
  padding-top: 0 !important;
  border-top: 0 !important;
  gap: 0 !important;
}

:where(html:not(.p-index)) .career-apply-copy .partnership-process > span{
  position: relative;
  padding: 18px 0 18px 54px;
  display: grid;
  gap: 4px;
  border-top: 1px solid #d8e4f1;
}

:where(html:not(.p-index)) .partnership-process i{
  position: absolute;
  left: 0;
  top: 17px;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: #0d5bb6;
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
}

:where(html:not(.p-index)) .career-apply-copy .partnership-process b{
  color: #14243a;
  font-size: 13px;
}

:where(html:not(.p-index)) .career-apply-copy .partnership-process small{
  color: #66778b;
  font-size: 12px;
  line-height: 1.55;
}

:where(html:not(.p-index)) .partnership-form{
  background:
    radial-gradient(circle at 100% 0%, rgba(30, 113, 204, .11), transparent 30%),
    #fff;
}

:where(html:not(.p-index)) .partnership-form .field textarea{
  min-height: 170px;
}

/* Contact page: direct icon-led channels + focused form */
:where(html:not(.p-index)) .contact-page-grid{
  grid-template-columns: minmax(360px, .8fr) minmax(0, 1.2fr);
  gap: 20px;
}

:where(html:not(.p-index)) .contact-info-panel{
  padding: 28px;
  border: 1px solid #d4e1ef;
  border-radius: 14px;
  background:
    radial-gradient(circle at 0 0, rgba(13, 71, 161, .1), transparent 30%),
    #fff;
  box-shadow: 0 16px 46px rgba(13, 71, 161, .07);
}

:where(html:not(.p-index)) .contact-info-head{
  padding: 4px 3px 23px;
}

:where(html:not(.p-index)) .contact-info-head h3{
  margin: 10px 0 8px;
  color: #132139;
  font-size: 25px;
  line-height: 1.15;
  letter-spacing: -.03em;
}

:where(html:not(.p-index)) .contact-info-head p{
  margin: 0;
  color: #65768a;
  font-size: 12px;
  line-height: 1.65;
}

:where(html:not(.p-index)) .contact-info-list{
  display: grid;
  gap: 8px;
}

:where(html:not(.p-index)) .contact-info-item{
  min-height: 74px;
  padding: 13px 14px;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: center;
  gap: 13px;
  border: 1px solid #dce7f2;
  border-radius: 9px;
  color: #17263b;
  background: #f8fbff;
  transition: border-color .22s, background .22s, transform .22s;
}

:where(html:not(.p-index)) a.contact-info-item:hover{
  border-color: #7eade2;
  background: #eef6ff;
  transform: translateX(3px);
}

:where(html:not(.p-index)) .contact-info-item > i{
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #0d5bb6;
  background: #eaf3fd;
  font-style: normal;
}

:where(html:not(.p-index)) .contact-info-item svg{
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

:where(html:not(.p-index)) .contact-info-item span,:where(html:not(.p-index)) .contact-info-item small,:where(html:not(.p-index)) .contact-info-item b{
  min-width: 0;
  display: block;
}

:where(html:not(.p-index)) .contact-info-item small{
  margin-bottom: 5px;
  color: #6d8095;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .14em;
}

:where(html:not(.p-index)) .contact-info-item b{
  overflow-wrap: anywhere;
  font-size: 12px;
  line-height: 1.5;
}

:where(html:not(.p-index)) .contact-info-item em{
  color: #1762b7;
  font-size: 15px;
  font-style: normal;
}

:where(html:not(.p-index)) .contact-info-address{
  align-items: start;
  background: #fff;
}

:where(html:not(.p-index)) .contact-info-address > i{
  margin-top: 1px;
}

:where(html:not(.p-index)) .contact-page .form-panel{
  padding: clamp(30px, 3.4vw, 48px);
  background:
    radial-gradient(circle at 100% 0%, rgba(13, 71, 161, .09), transparent 30%),
    #fff;
}

:where(html:not(.p-index)) .contact-page .field textarea{
  min-height: 170px;
}

@media (max-width: 960px) {
  :where(html:not(.p-index)) .partnership-apply,:where(html:not(.p-index)) .contact-page-grid{
    grid-template-columns: 1fr;
  }

  :where(html:not(.p-index)) .contact-info-list{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  :where(html:not(.p-index)) .contact-info-address,:where(html:not(.p-index)) .contact-info-wide{
    grid-column: 1 / -1;
  }
}

@media (max-width: 650px) {
  :where(html:not(.p-index)) .partnership-hero{
    min-height: 650px;
  }

  :where(html:not(.p-index)) .partnership-hero h1{
    font-size: clamp(43px, 13vw, 62px);
  }

  :where(html:not(.p-index)) .partnership-grid article{
    min-height: 210px;
  }

  :where(html:not(.p-index)) .contact-info-panel{
    padding: 20px;
  }

  :where(html:not(.p-index)) .contact-info-list{
    grid-template-columns: 1fr;
  }

  :where(html:not(.p-index)) .contact-info-address,:where(html:not(.p-index)) .contact-info-wide{
    grid-column: auto;
  }
}

/* =========================================================
   ZED-FULL PLUS — ORBIT DÜĞÜM İKONLARI
   Karakter (⌁ OBD ▦ ◉) yerine gerçek SVG ikon
   ========================================================= */
:where(html:not(.p-index)) .story-ring i{
  width: 62px;
  height: 62px;
  border: 1.6px solid rgba(13, 71, 161, 0.3);
  background: #ffffff;
  color: var(--red);
  box-shadow:
    0 2px 10px rgba(13, 71, 161, 0.1),
    0 12px 28px rgba(13, 71, 161, 0.09);
  transition:
    color 0.35s ease,
    background 0.35s ease,
    border-color 0.35s ease,
    box-shadow 0.35s ease,
    transform 0.35s ease;
}

:where(html:not(.p-index)) .story-ring i svg{
  width: 30px;
  height: 30px;
  display: block;
}

/* konumlar daire büyüdüğü için yeniden ortalanır */
:where(html:not(.p-index)) .story-ring i:nth-child(1){
  left: -31px;
  top: calc(50% - 31px);
}

:where(html:not(.p-index)) .story-ring i:nth-child(2){
  top: -31px;
  left: calc(50% - 31px);
}

:where(html:not(.p-index)) .story-ring i:nth-child(3){
  right: -31px;
  top: calc(50% - 31px);
}

:where(html:not(.p-index)) .story-ring i:nth-child(4){
  bottom: -31px;
  left: calc(50% - 31px);
}

:where(html:not(.p-index)) .story-ring i.active{
  color: #ffffff;
  border-color: var(--red);
  background: var(--red);
  box-shadow: 0 12px 30px rgba(13, 71, 161, 0.42);
  transform: scale(1.06);
}

@media (max-width: 980px) {
  :where(html:not(.p-index)) .story-ring i{
    width: 52px;
    height: 52px;
  }

  :where(html:not(.p-index)) .story-ring i svg{
    width: 25px;
    height: 25px;
  }

  :where(html:not(.p-index)) .story-ring i:nth-child(1){
    left: -26px;
    top: calc(50% - 26px);
  }

  :where(html:not(.p-index)) .story-ring i:nth-child(2){
    top: -26px;
    left: calc(50% - 26px);
  }

  :where(html:not(.p-index)) .story-ring i:nth-child(3){
    right: -26px;
    top: calc(50% - 26px);
  }

  :where(html:not(.p-index)) .story-ring i:nth-child(4){
    bottom: -26px;
    left: calc(50% - 26px);
  }
}

@media (max-width: 620px) {
  :where(html:not(.p-index)) .story-ring i{
    width: 42px;
    height: 42px;
  }

  :where(html:not(.p-index)) .story-ring i svg{
    width: 21px;
    height: 21px;
  }

  :where(html:not(.p-index)) .story-ring i:nth-child(1){
    left: -21px;
    top: calc(50% - 21px);
  }

  :where(html:not(.p-index)) .story-ring i:nth-child(2){
    top: -21px;
    left: calc(50% - 21px);
  }

  :where(html:not(.p-index)) .story-ring i:nth-child(3){
    right: -21px;
    top: calc(50% - 21px);
  }

  :where(html:not(.p-index)) .story-ring i:nth-child(4){
    bottom: -21px;
    left: calc(50% - 21px);
  }
}

/* Halka: cihazı kapsayacak kadar geniş, kolondan taşmayacak kadar dar.
   Genişlik kolonun kendi ölçüsünden türetilir, viewport'tan değil. */
:where(html:not(.p-index)) .story-device{
  overflow: visible;
}

:where(html:not(.p-index)) .story-device img{
  width: 82%;
}

:where(html:not(.p-index)) .story-ring{
  width: min(92%, 560px);
  height: min(92%, 560px);
  aspect-ratio: 1;
  height: auto;
}

:where(html:not(.p-index)) .story-ring:after{
  inset: 58px;
}

@media (max-width: 1180px) {
  :where(html:not(.p-index)) .story-device img{
    width: 78%;
  }

  :where(html:not(.p-index)) .story-ring{
    width: min(84%, 470px);
  }

  :where(html:not(.p-index)) .story-ring:after{
    inset: 50px;
  }
}

/* 860px altında kolon tek sütuna düşer; halka görselden büyük kalmalı */
@media (max-width: 860px) {
  :where(html:not(.p-index)) .story-device img{
    width: 62%;
  }

  :where(html:not(.p-index)) .story-ring{
    width: min(74vw, 430px);
  }

  :where(html:not(.p-index)) .story-ring:after{
    inset: 42px;
  }
}

@media (max-width: 560px) {
  :where(html:not(.p-index)) .story-device img{
    width: 60%;
  }

  :where(html:not(.p-index)) .story-ring{
    width: min(78vw, 330px);
  }

  :where(html:not(.p-index)) .story-ring:after{
    inset: 32px;
  }
}

/* Aksu Clinic referansındaki gibi kompakt, bayraklı dil menüsü */
:where(html:not(.p-index)) .language-switcher{
  position: relative;
  z-index: 180;
  display: inline-flex;
}

:where(html:not(.p-index)) .language-toggle{
  min-width: 52px;
  height: 38px;
  padding: 0 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border: 0;
  border-radius: 4px;
  color: #123d78;
  background: transparent;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

:where(html:not(.p-index)) .language-toggle:hover,:where(html:not(.p-index)) .language-toggle[aria-expanded="true"]{
  background: #eef5fd;
}

:where(html:not(.p-index)) .language-toggle i{
  width: 7px;
  height: 7px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform .22s;
}

:where(html:not(.p-index)) .language-toggle[aria-expanded="true"] i{
  transform: translateY(2px) rotate(225deg);
}

:where(html:not(.p-index)) .language-menu{
  position: absolute;
  z-index: 190;
  top: calc(100% + 10px);
  right: 0;
  width: 210px;
  padding: 8px;
  display: grid;
  gap: 3px;
  border: 1px solid rgba(13, 71, 161, .14);
  border-radius: 12px;
  background: rgba(255, 255, 255, .98);
  box-shadow: 0 20px 55px rgba(20, 54, 96, .18);
  backdrop-filter: blur(18px);
}

:where(html:not(.p-index)) .language-menu[hidden]{
  display: none;
}

:where(html:not(.p-index)) .language-menu button{
  width: 100%;
  min-height: 42px;
  padding: 0 10px;
  display: grid;
  grid-template-columns: 25px 1fr auto;
  align-items: center;
  gap: 9px;
  border: 0;
  border-radius: 7px;
  color: #203149;
  background: transparent;
  text-align: left;
  cursor: pointer;
}

:where(html:not(.p-index)) .language-menu button:hover,:where(html:not(.p-index)) .language-menu button.active{
  color: #0d47a1;
  background: #edf5ff;
}

:where(html:not(.p-index)) .language-menu button b{
  font-size: 12px;
  font-weight: 700;
}

:where(html:not(.p-index)) .language-menu button small{
  color: #7a899c;
  font-size: 9px;
  font-weight: 800;
}

:where(html:not(.p-index)) .language-flag{
  position: relative;
  width: 19px;
  height: 13px;
  display: block;
  overflow: hidden;
  border: 1px solid rgba(24, 45, 72, .16);
  border-radius: 2px;
  box-shadow: 0 1px 2px rgba(18, 42, 70, .08);
}

:where(html:not(.p-index)) .flag-tr{ background: #e30a17; }
:where(html:not(.p-index)) .flag-tr::before{
  content: "";
  position: absolute;
  left: 4px;
  top: 2px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #fff;
}
:where(html:not(.p-index)) .flag-tr::after{
  content: "";
  position: absolute;
  left: 6px;
  top: 2px;
  width: 6px;
  height: 7px;
  border-radius: 50%;
  background: #e30a17;
}
:where(html:not(.p-index)) .flag-en{
  background:
    linear-gradient(33deg, transparent 43%, #cf142b 43% 49%, transparent 49%),
    linear-gradient(-33deg, transparent 43%, #cf142b 43% 49%, transparent 49%),
    linear-gradient(33deg, transparent 51%, #cf142b 51% 57%, transparent 57%),
    linear-gradient(-33deg, transparent 51%, #cf142b 51% 57%, transparent 57%),
    linear-gradient(33deg, transparent 39%, #fff 39% 61%, transparent 61%),
    linear-gradient(-33deg, transparent 39%, #fff 39% 61%, transparent 61%),
    linear-gradient(90deg, transparent 40%, #fff 40% 60%, transparent 60%),
    linear-gradient(transparent 34%, #fff 34% 66%, transparent 66%),
    linear-gradient(90deg, transparent 45%, #cf142b 45% 55%, transparent 55%),
    linear-gradient(transparent 41%, #cf142b 41% 59%, transparent 59%),
    #21468b;
}
:where(html:not(.p-index)) .flag-it{ background: linear-gradient(90deg, #009246 0 33.33%, #fff 33.33% 66.66%, #ce2b37 66.66%); }
:where(html:not(.p-index)) .flag-fr{ background: linear-gradient(90deg, #0055a4 0 33.33%, #fff 33.33% 66.66%, #ef4135 66.66%); }
:where(html:not(.p-index)) .flag-es{ background: linear-gradient(#aa151b 0 25%, #f1bf00 25% 75%, #aa151b 75%); }


@media (max-width: 800px) {
  :where(html:not(.p-index)) .mobile-nav-tools .language-switcher{
    width: 100%;
  }

  :where(html:not(.p-index)) .mobile-nav-tools .language-toggle{
    width: 100%;
    justify-content: space-between;
  }

  :where(html:not(.p-index)) .mobile-nav-tools .language-menu{
    position: static;
    width: 100%;
    margin-top: 6px;
    box-shadow: none;
  }
}

/* ============================================================
   BÖLÜM: sections/start  (eski: assets/css/sections/start.css)
   Kapsam: p-index
   ============================================================ */
/* Kaydırma bölümü: stiller içerikle aynı yanıtta yüklenir. */
:where(html.p-index) .i-start{ --start-top: 100px; --start-height: min(620px, calc(100svh - 136px)); padding: clamp(64px,7vw,110px) clamp(20px,5vw,96px); background: #f4f8fd; border-top: 1px solid var(--line); scroll-margin-top: 84px; }
:where(html.p-index) .i-start-wrap{ max-width: 1440px; margin: auto; }
:where(html.p-index) .i-start-head{ margin-bottom: 42px; }
:where(html.p-index) .i-start-head .i-kicker{ font-size: 12px; letter-spacing: .17em; }
:where(html.p-index) .i-start-head h2{ margin: 18px 0 0; font: 500 clamp(32px,3.2vw,48px)/1.15 var(--display); letter-spacing: -.045em; color: var(--text); }
:where(html.p-index) .i-start-head h2 span{ color: var(--accent); }
:where(html.p-index) .i-start-board{ display: grid; grid-template-columns: .9fr 1.1fr; align-items: start; gap: clamp(28px,4vw,64px); }
:where(html.p-index) .i-start-product{ position: relative; isolation: isolate; min-width: 0; height: var(--start-height); overflow: hidden; border-radius: 24px; background: radial-gradient(ellipse at 65% 50%,#174b87 0%,#0b2548 50%,#07182e 100%); color: #fff; }
:where(html.p-index) .i-start.is-scroll-ready .i-start-product{ position: sticky; top: var(--start-top); }
:where(html.p-index) .i-start-product-top{ position: absolute; z-index: 4; inset: 30px 32px auto; display: flex; align-items: center; justify-content: space-between; gap: 16px; pointer-events: none; }
:where(html.p-index) .i-start-label{ color: #c4dcfb; font-size: 10px; font-weight: 600; letter-spacing: .15em; }
:where(html.p-index) .i-start-scene{ position: absolute; inset: 0; margin: 0; opacity: 0; visibility: hidden; transition: opacity .45s ease, visibility .45s; }
:where(html.p-index) .i-start-scene.is-active{ opacity: 1; visibility: visible; z-index: 2; }
:where(html.p-index) .i-start-scene > img{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--scene-position,center); }
:where(html.p-index) .i-start-scene::after{ content: ''; position: absolute; inset: 0; background: linear-gradient(180deg,#06182fed 0%,#06182f9c 28%,#06182f0a 55%,#06182fd6 90%,#06182ff5 100%); }
:where(html.p-index) .i-start-scene figcaption{ position: absolute; z-index: 2; top: 80px; left: 32px; right: 32px; }
:where(html.p-index) .i-start-scene h3{ margin: 0; color: #fff; font-size: clamp(27px,2.7vw,38px); line-height: 1.15; font-weight: 500; letter-spacing: -.035em; }
:where(html.p-index) .i-start-scene h3 em{ color: #a6ccff; font-weight: 400; }
:where(html.p-index) .i-start-scene figcaption p{ margin: 12px 0 0; color: #d3e0f0; font-size: 14px; line-height: 1.6; }
:where(html.p-index) .i-start-scene.is-device::after{ background: linear-gradient(180deg,#07182e55,transparent 35%,transparent 75%,#07182e99); }
:where(html.p-index) .i-start-scene.is-device > img{ inset: 30% 8% 12%; width: 84%; height: 58%; object-fit: contain; transform: rotate(-7deg); filter: drop-shadow(0 24px 18px #0005); }
:where(html.p-index) .i-start-orbit{ position: absolute; width: 82%; aspect-ratio: 1; top: 29%; left: 9%; border: 1px solid #80b9ff24; border-radius: 50%; }
:where(html.p-index) .i-start-orbit::before,:where(html.p-index) .i-start-orbit::after{ content: ''; position: absolute; inset: 24px; border: 1px solid #80b9ff18; border-radius: 50%; }
:where(html.p-index) .i-start-orbit::after{ inset: -24px; }
:where(html.p-index) .i-start-scene-foot{ position: absolute; z-index: 3; bottom: 50px; left: 32px; right: 32px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 16px; border-top: 1px solid #aecfff40; }
:where(html.p-index) .i-start-scene-foot > span{ color: #c4d9ef; font-size: 9px; letter-spacing: .09em; }
:where(html.p-index) .i-start-scene-foot a{ color: #fff; font-size: 12px; font-weight: 600; }
:where(html.p-index) .i-start-scene-foot a span{ margin-left: 8px; }
:where(html.p-index) .i-start-progress{ position: absolute; z-index: 4; inset: auto 32px 26px; display: grid; grid-template-columns: repeat(4,1fr); gap: 8px; }
:where(html.p-index) .i-start-progress span{ height: 3px; background: #bad6ff38; border-radius: 2px; transition: background .3s ease; }
:where(html.p-index) .i-start-progress span.is-active{ background: #9bc9ff; }
:where(html.p-index) .i-start-flow{ list-style: none; margin: 0; padding: 0; }
:where(html.p-index) .i-start-step{ position: relative; display: grid; grid-template-columns: 48px minmax(0,1fr); align-content: center; gap: 24px; padding: 34px 0; }
:where(html.p-index) .i-start.is-scroll-ready .i-start-step{ min-height: var(--start-height); }
:where(html.p-index) .i-start-step:not(:last-child)::after{ content: ''; position: absolute; top: calc(50% + 28px); bottom: calc(-50% + 28px); left: 23px; width: 1px; background: #d6e2f1; }
:where(html.p-index) .i-start-number{ position: relative; z-index: 1; display: grid; place-items: center; width: 48px; height: 48px; border: 1px solid #cedced; border-radius: 50%; background: #f4f8fd; color: var(--accent); font-size: 13px; font-weight: 700; letter-spacing: .03em; align-self: center; transition: background .3s,color .3s,border-color .3s; }
:where(html.p-index) .i-start-step.is-active .i-start-number{ color: #fff; border-color: var(--accent); background: var(--accent); box-shadow: 0 0 0 7px #0d47a10a; }
:where(html.p-index) .i-start-detail{ position: relative; min-width: 0; padding: 30px; border: 1px solid #dce5f0; border-radius: 18px; background: #ffffff80; transition: border-color .3s,background .3s; }
:where(html.p-index) .i-start-step.is-active .i-start-detail{ background: #fff; border-color: #b6cce8; }
:where(html.p-index) .i-start-step-top{ display: flex; align-items: center; justify-content: space-between; gap: 12px; }
:where(html.p-index) .i-start-symbol{ display: inline-flex; color: var(--accent); }
:where(html.p-index) .i-start-symbol svg{ width: 27px; height: 27px; }
:where(html.p-index) .i-start-meta{ padding: 6px 10px; border-radius: 5px; background: #edf4fc; color: #536780; font-size: 10px; font-weight: 500; line-height: 1.3; }
:where(html.p-index) .i-start-detail h3{ margin: 20px 0 12px; font-size: clamp(22px,2vw,29px); line-height: 1.25; font-weight: 600; letter-spacing: -.03em; color: var(--text); }
:where(html.p-index) .i-start-detail p{ max-width: 45ch; margin: 0; font-size: 15px; line-height: 1.8; color: var(--muted); }
:where(html.p-index) .i-start-footer{ display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 32px; padding-top: 28px; border-top: 1px solid var(--line); }
:where(html.p-index) .i-start-footer > p{ margin: 0; font-size: 13px; color: var(--muted); line-height: 1.6; }
:where(html.p-index) .i-start-footer > p > span{ margin-right: 9px; color: var(--accent); }
:where(html.p-index) .i-start-footer strong{ font-weight: 600; color: var(--text); }
:where(html.p-index) .i-start-actions{ display: flex; align-items: center; gap: 26px; }
:where(html.p-index) .i-start-actions a{ display: inline-flex; align-items: center; gap: 20px; font-size: 12px; font-weight: 600; }
:where(html.p-index) .i-start-secondary{ color: var(--accent); }
:where(html.p-index) .i-start-primary{ padding: 16px 22px; border-radius: 8px; background: var(--accent); color: #fff; }
:where(html.p-index) .i-start-primary:hover{ background: #093372; }
:where(html.p-index) .i-start-secondary:hover,:where(html.p-index) .i-start-scene-foot a:hover{ text-decoration: underline; text-underline-offset: 5px; }
:where(html.p-index) .i-start a:focus-visible{ outline: 3px solid #4b94ed; outline-offset: 5px; }
@media (max-width: 1050px) {
 :where(html.p-index) .i-start-board{ gap: 28px; }
 :where(html.p-index) .i-start-step{ gap: 16px; }
 :where(html.p-index) .i-start-detail{ padding: 24px; }
 :where(html.p-index) .i-start-footer{ flex-wrap: wrap; }
 :where(html.p-index) .i-start-scene-foot{ flex-wrap: wrap; }
}
@media (max-width: 760px) {
 :where(html.p-index) .i-start{ --start-top: 76px; --start-height: clamp(200px,35svh,280px); }
 :where(html.p-index) .i-start-head{ margin-bottom: 30px; }
 :where(html.p-index) .i-start-board{ display: block; }
 :where(html.p-index) .i-start-product{ z-index: 5; border-radius: 16px; box-shadow: 0 0 0 8px #f4f8fd; }
 :where(html.p-index) .i-start-product-top{ inset: 18px 20px auto; }
 :where(html.p-index) .i-start-label{ font-size: 9px; }
 :where(html.p-index) .i-start-scene figcaption{ top: 52px; left: 20px; right: 20px; }
 :where(html.p-index) .i-start-scene h3{ max-width: 75%; font-size: 25px; }
 :where(html.p-index) .i-start-scene figcaption p{ display: none; }
 :where(html.p-index) .i-start-scene.is-device h3{ max-width: 52%; }
 :where(html.p-index) .i-start-scene.is-device > img{ inset: 20% 2% 15% 43%; width: 55%; height: 65%; }
 :where(html.p-index) .i-start-orbit{ width: 55%; top: 10%; left: 45%; }
 :where(html.p-index) .i-start-scene::after{ background: linear-gradient(180deg,#06182fe6 0%,#06182f66 40%,#06182f22 60%,#06182ff2 100%); }
 :where(html.p-index) .i-start-scene-foot{ inset: auto 20px 35px; padding-top: 10px; flex-wrap: nowrap; }
 :where(html.p-index) .i-start-scene-foot > span{ font-size: 8px; max-width: 53%; line-height: 1.5; }
 :where(html.p-index) .i-start-scene-foot a{ font-size: 11px; }
 :where(html.p-index) .i-start-progress{ inset: auto 20px 18px; }
 :where(html.p-index) .i-start-flow{ padding: 12px 0 0; }
 :where(html.p-index) .i-start-step{ grid-template-columns: 36px minmax(0,1fr); gap: 16px; padding: 30px 0; }
 :where(html.p-index) .i-start.is-scroll-ready .i-start-step{ min-height: max(330px,52svh); }
 :where(html.p-index) .i-start-number{ width: 36px; height: 36px; font-size: 11px; }
 :where(html.p-index) .i-start-step:not(:last-child)::after{ left: 17px; top: calc(50% + 23px); bottom: calc(-50% + 23px); }
 :where(html.p-index) .i-start-detail{ padding: 22px 20px; }
 :where(html.p-index) .i-start-detail h3{ font-size: 23px; }
 :where(html.p-index) .i-start-detail p{ font-size: 14px; line-height: 1.75; }
 :where(html.p-index) .i-start-meta{ font-size: 9px; padding: 5px 7px; }
 :where(html.p-index) .i-start-symbol svg{ width: 24px; height: 24px; }
 :where(html.p-index) .i-start-footer{ align-items: flex-start; }
 :where(html.p-index) .i-start-actions{ width: 100%; flex-wrap: wrap; gap: 20px; }
 :where(html.p-index) .i-start-primary{ order: -1; }
}
@media (max-width: 380px) {
 :where(html.p-index) .i-start{ padding-inline: 16px; }
 :where(html.p-index) .i-start-head h2{ font-size: 30px; }
 :where(html.p-index) .i-start-step{ gap: 10px; }
 :where(html.p-index) .i-start-detail{ padding-inline: 16px; }
 :where(html.p-index) .i-start-detail h3{ font-size: 21px; }
 :where(html.p-index) .i-start-scene-foot > span{ letter-spacing: 0; }
}
@media (max-width: 760px) and (max-height: 600px) {
 :where(html.p-index) .i-start{ --start-height: 160px; }
 :where(html.p-index) .i-start-scene figcaption{ top: 40px; }
 :where(html.p-index) .i-start-scene h3{ font-size: 22px; }
 :where(html.p-index) .i-start-scene-foot{ bottom: 24px; padding-top: 6px; }
 :where(html.p-index) .i-start-progress{ bottom: 12px; }
}
@media (prefers-reduced-motion: reduce) {
 :where(html.p-index) .i-start-scene,:where(html.p-index) .i-start-number,:where(html.p-index) .i-start-detail,:where(html.p-index) .i-start-progress span{ transition: none; }
}

/* Doğrulanmış kaynak görselleri: tamamını göster, arayüzleri kırpma. */
:where(html.p-index) .i-start-scene.is-source::after{ display: none; }
:where(html.p-index) .i-start-scene.is-source > img{ inset: 31% 6% auto; width: 88%; height: 49%; object-fit: contain; object-position: center; transform: none; filter: none; }
:where(html.p-index) .i-start-scene.is-key > img{ inset: 30% 20% auto; width: 60%; height: 52%; }
:where(html.p-index) .i-start-scene.is-source figcaption{ top: 80px; }
:where(html.p-index) .i-start-scene.is-source h3{ font-size: clamp(25px,2.4vw,34px); }
@media (max-width: 760px) {
 :where(html.p-index) .i-start-scene.is-source figcaption{ top: 45px; }
 :where(html.p-index) .i-start-scene.is-source h3{ max-width: 100%; font-size: 19px; }
 :where(html.p-index) .i-start-scene.is-source > img{ inset: 27% 10% auto; width: 80%; height: 47%; }
 :where(html.p-index) .i-start-scene.is-key > img{ inset: 27% 30% auto; width: 40%; height: 47%; }
}
@media (max-width: 760px) and (max-height: 600px) {
 :where(html.p-index) .i-start-scene.is-source figcaption{ top: 35px; }
 :where(html.p-index) .i-start-scene.is-source h3{ font-size: 16px; }
 :where(html.p-index) .i-start-scene.is-source > img{ top: 33%; height: 38%; }
}

:where(html.p-index) #baslangic-adimlari{scroll-margin-top:calc(var(--anchor-header-height,72px) + 20px);outline:none}
@media(min-width:861px){:where(html.p-index) .i-start{--start-height:min(620px,max(340px,calc(100svh - 310px)))}}

/* Preserve the scrolling sequence; shorten only the initial empty lead-in. */
@media(min-width:861px){
 :where(html.p-index) .i-start.is-scroll-ready .i-start-step:first-child{min-height:max(260px,calc(var(--start-height) - 200px))}
 :where(html.p-index) .i-start-step:first-child::after{bottom:calc(var(--start-height) * -.5 + 28px)}
}

/* ============================================================
   BÖLÜM: sections/ecosystem  (eski: assets/css/sections/ecosystem.css)
   Kapsam: p-index
   ============================================================ */
/* IEA ekosistemi — içerikle birlikte yüklenen bölüm stilleri. */
:where(html.p-index) .i-ecosystem{ padding: clamp(64px,7vw,108px) clamp(20px,5vw,96px); background: #fff; border-top: 1px solid #e5ecf4; scroll-margin-top: 90px; }
:where(html.p-index) .i-eco-inner{ max-width: 1440px; margin: auto; }
:where(html.p-index) .i-eco-heading{ margin-bottom: 32px; }
:where(html.p-index) .i-eco-heading .i-kicker{ font-size: 12px; letter-spacing: .17em; }
:where(html.p-index) .i-eco-heading h2{ margin: 18px 0 0; color: var(--text); font: 500 clamp(32px,3.2vw,48px)/1.16 var(--display); letter-spacing: -.045em; }
:where(html.p-index) .i-eco-heading h2 span{ color: var(--accent); }
:where(html.p-index) .i-eco-tabs{ display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; margin-bottom: 24px; }
:where(html.p-index) .i-eco-tab{ display: flex; align-items: center; gap: 14px; min-width: 0; padding: 20px 22px; border: 1px solid #e1e8f1; border-radius: 10px; background: #f8fafc; color: #526276; font-size: 14px; font-weight: 600; cursor: pointer; transition: background .2s,border-color .2s,color .2s; }
:where(html.p-index) .i-eco-tab > svg{ margin-left: auto; width: 22px; height: 22px; flex-shrink: 0; }
:where(html.p-index) .i-eco-tab:hover{ border-color: #a9c2e2; color: var(--accent); }
:where(html.p-index) .i-eco-tab[aria-selected="true"]{ background: var(--accent); border-color: var(--accent); color: #fff; }
:where(html.p-index) .i-eco-stage{ display: grid; border: 1px solid #dce5f0; border-radius: 24px; background: #f7f9fc; overflow: hidden; }
:where(html.p-index) .i-eco-panel{ grid-area: 1 / 1; display: grid; grid-template-columns: 1fr 1fr; min-width: 0; min-height: 510px; }
:where(html.p-index) .i-eco-panel[hidden]{ display: none; }
:where(html.p-index) .i-eco-copy{ display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding: clamp(30px,4vw,58px); }
:where(html.p-index) .i-eco-eyebrow{ display: flex; align-items: center; gap: 10px; color: var(--accent); font-size: 10px; font-weight: 700; letter-spacing: .15em; }
:where(html.p-index) .i-eco-eyebrow::before{ content: ''; width: 22px; height: 2px; background: currentColor; }
:where(html.p-index) .i-eco-copy h3{ margin: 24px 0 18px; max-width: 12ch; font-size: clamp(34px,3.1vw,46px); line-height: 1.13; font-weight: 500; letter-spacing: -.045em; color: var(--text); }
:where(html.p-index) .i-eco-copy > p{ max-width: 43ch; margin: 0; color: var(--muted); font-size: 15px; line-height: 1.8; }
:where(html.p-index) .i-eco-tags{ display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 24px 0 30px; list-style: none; }
:where(html.p-index) .i-eco-tags li{ padding: 6px 10px; border: 1px solid #dae4f0; border-radius: 5px; color: #4d6380; font-size: 10px; line-height: 1.4; }
:where(html.p-index) .i-eco-link{ display: inline-flex; align-items: center; gap: 28px; padding-bottom: 8px; border-bottom: 1px solid #adbfda; font-size: 13px; font-weight: 700; color: var(--accent); }
:where(html.p-index) .i-eco-link:hover{ border-color: var(--accent); }
:where(html.p-index) .i-eco-link span{ font-size: 19px; font-weight: 400; }
:where(html.p-index) .i-eco-visual{ position: relative; min-width: 0; margin: 16px 16px 16px 0; overflow: hidden; border-radius: 16px; background: #edf3fa; }
:where(html.p-index) .i-eco-visual > img{ display: block; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
:where(html.p-index) .i-eco-building > img{ object-position: center 5%; }
:where(html.p-index) .i-eco-caption{ position: absolute; z-index: 2; left: 22px; right: 22px; bottom: 20px; display: flex; justify-content: space-between; align-items: center; gap: 12px; color: #fff; font-size: 10px; line-height: 1.6; letter-spacing: .06em; }
:where(html.p-index) .i-eco-caption b{ font-weight: 600; }
:where(html.p-index) .i-eco-caption span{ font-size: 9px; }
:where(html.p-index) .i-eco-building::after{ content: ''; position: absolute; inset: 65% 0 0; background: linear-gradient(transparent,#06182fbd); }
:where(html.p-index) .i-eco-screen{ background: #eaf1f9; }
:where(html.p-index) .i-eco-screen > img{ inset: 12% 6%; width: 88%; height: 76%; object-fit: contain; }
:where(html.p-index) .i-eco-screen .i-eco-caption,:where(html.p-index) .i-eco-device .i-eco-caption{ color: #4d6380; }
:where(html.p-index) .i-eco-device{ background: radial-gradient(ellipse at 50% 45%,#fff,#e6eef8); }
:where(html.p-index) .i-eco-device > img{ inset: 8% 6% 13%; width: 88%; height: 79%; object-fit: contain; }
:where(html.p-index) .i-eco-network{ display: grid; place-items: center; background: #0b2548; color: #fff; }
:where(html.p-index) .i-eco-network::before{ content: ''; position: absolute; inset: 0; background-image: linear-gradient(#99b9e10d 1px,transparent 1px),linear-gradient(90deg,#99b9e10d 1px,transparent 1px); background-size: 36px 36px; }
:where(html.p-index) .i-eco-network-lines{ position: absolute; width: 88%; height: 88%; color: #749ed04d; }
:where(html.p-index) .i-eco-network-center{ position: absolute; left: 50%; top: 44%; transform: translate(-50%,-50%); display: grid; place-items: center; width: 146px; height: 146px; border-radius: 50%; background: #154f99; box-shadow: 0 0 0 16px #b3d2ff08,0 0 0 36px #b3d2ff06; }
:where(html.p-index) .i-eco-network-center img{ width: 86px; height: auto; }
:where(html.p-index) .i-eco-network-center span{ position: absolute; bottom: 28px; color: #d5e6ff; font-size: 8px; letter-spacing: .13em; }
:where(html.p-index) .i-eco-node{ position: absolute; padding: 9px 12px; border: 1px solid #6a8fbd55; border-radius: 7px; background: #143457; color: #d7e6fb; font-size: 11px; }
:where(html.p-index) .i-eco-node-a{ left: 10%; top: 20%; }
:where(html.p-index) .i-eco-node-b{ right: 8%; top: 29%; }
:where(html.p-index) .i-eco-node-c{ left: 12%; bottom: 25%; }
:where(html.p-index) .i-eco-node-d{ right: 9%; bottom: 22%; }
:where(html.p-index) .i-eco-network .i-eco-caption{ border-top: 1px solid #a3c6f12e; padding-top: 17px; color: #c5d8ef; }
:where(html.p-index) .i-eco-controls{ position: relative; display: flex; align-items: center; justify-content: center; gap: 20px; margin-top: 22px; }
:where(html.p-index) .i-eco-arrows{ display: flex; gap: 10px; }
:where(html.p-index) .i-eco-arrows button{ display: grid; place-items: center; width: 46px; height: 46px; border: 1px solid #d1ddec; border-radius: 50%; background: #fff; color: var(--accent); font-size: 21px; cursor: pointer; transition: background .2s,color .2s; }
:where(html.p-index) .i-eco-arrows button:hover{ background: var(--accent); border-color: var(--accent); color: #fff; }
:where(html.p-index) .i-ecosystem button:focus-visible,:where(html.p-index) .i-ecosystem a:focus-visible,:where(html.p-index) .i-eco-panel:focus-visible{ outline: 3px solid #4b94ed; outline-offset: 4px; }
:where(html.p-index) .i-eco-ready .i-eco-panel:not([hidden]){ animation: eco-panel-in .32s ease both; }
@keyframes eco-panel-in { from { opacity: .25; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (max-width: 1050px) {
 :where(html.p-index) .i-eco-tab{ padding: 18px 14px; gap: 9px; font-size: 13px; }
 :where(html.p-index) .i-eco-copy{ padding: 32px; }
 :where(html.p-index) .i-eco-panel{ min-height: 490px; }
 :where(html.p-index) .i-eco-node{ font-size: 9px; padding: 7px 9px; }
 :where(html.p-index) .i-eco-network-center{ width: 116px; height: 116px; }
 :where(html.p-index) .i-eco-network-center img{ width: 74px; }
 :where(html.p-index) .i-eco-network-center span{ bottom: 17px; }
}
@media (max-width: 760px) {
 :where(html.p-index) .i-eco-heading{ display: block; margin-bottom: 28px; }
 :where(html.p-index) .i-eco-tabs{ gap: 8px; grid-template-columns: repeat(2,minmax(0,1fr)); margin-bottom: 16px; }
 :where(html.p-index) .i-eco-tab{ padding: 14px 12px; font-size: 12px; }
 :where(html.p-index) .i-eco-tab > svg{ width: 18px; height: 18px; }
 :where(html.p-index) .i-eco-stage{ border-radius: 18px; }
 :where(html.p-index) .i-eco-panel{ grid-template-columns: 1fr; min-height: 0; }
 :where(html.p-index) .i-eco-copy{ padding: 28px 26px; min-height: 375px; }
 :where(html.p-index) .i-eco-copy h3{ font-size: 34px; max-width: 15ch; margin: 18px 0 14px; }
 :where(html.p-index) .i-eco-copy > p{ font-size: 14px; }
 :where(html.p-index) .i-eco-tags{ margin: 20px 0 24px; }
 :where(html.p-index) .i-eco-visual{ margin: 0 12px 12px; height: 300px; border-radius: 12px; }
 :where(html.p-index) .i-eco-building > img{ object-position: center 5%; }
 :where(html.p-index) .i-eco-caption{ left: 16px; right: 16px; bottom: 16px; }
 :where(html.p-index) .i-eco-controls{ margin-top: 18px; }
 :where(html.p-index) .i-eco-arrows button{ width: 40px; height: 40px; }
 :where(html.p-index) .i-eco-network-center{ width: 100px; height: 100px; }
 :where(html.p-index) .i-eco-network-center img{ width: 65px; }
 :where(html.p-index) .i-eco-network-center span{ bottom: 15px; font-size: 7px; }
 :where(html.p-index) .i-eco-node-a{ top: 15%; left: 6%; }
 :where(html.p-index) .i-eco-node-b{ top: 22%; right: 4%; }
 :where(html.p-index) .i-eco-node-c{ bottom: 28%; left: 5%; }
 :where(html.p-index) .i-eco-node-d{ bottom: 25%; right: 5%; }
}
@media (prefers-reduced-motion: reduce) {
 :where(html.p-index) .i-eco-ready .i-eco-panel:not([hidden]){ animation: none; }
 :where(html.p-index) .i-eco-tab,:where(html.p-index) .i-eco-arrows button{ transition: none; }
}
/* Ortak grid satırı, sekmeler arasında panel yüksekliğini sabit tutar. */
:where(html.p-index) .i-eco-ready .i-eco-panel[hidden]{ display: grid; visibility: hidden; pointer-events: none; }
:where(html.p-index) .i-eco-ready .i-eco-stage{ cursor: grab; touch-action: pan-y pinch-zoom; }
:where(html.p-index) .i-eco-ready .i-eco-stage img{ -webkit-user-drag: none; user-select: none; }
:where(html.p-index) .i-eco-stage.is-dragging{ cursor: grabbing; user-select: none; }
:where(html.p-index) .i-eco-ready .i-eco-stage.is-dragging .i-eco-panel:not([hidden]),:where(html.p-index) .i-eco-ready .i-eco-stage.is-settling .i-eco-panel:not([hidden]){ animation: none; }
:where(html.p-index) .i-eco-stage.is-settling .i-eco-panel:not([hidden]){ transition: transform .2s ease; }
:where(html.p-index) .i-eco-stage a{ cursor: pointer; }
@media (prefers-reduced-motion: reduce) {
 :where(html.p-index) .i-eco-stage.is-settling .i-eco-panel:not([hidden]){ transition: none; }
}
/* Yeni iki bölüm sitenin ortak container ve gutter ölçülerini izler. */
:where(html.p-index) .i-ecosystem,:where(html.p-index) .i-start{ padding-inline: var(--gutter); }
:where(html.p-index) .i-eco-inner,:where(html.p-index) .i-start-wrap{ width: 100%; max-width: var(--container); margin-inline: auto; }

/* ============================================================
   BÖLÜM: pages/bulletins  (eski: assets/css/pages/bulletins.css)
   Kapsam: p-archive
   ============================================================ */
/* Official PDF archive; shared typography, container, buttons and navigation. */
:where(html.p-archive) .bulletin-page{ padding-top: 78px; }
:where(html.p-archive) .bulletin-page h1,:where(html.p-archive) .bulletin-page h2,:where(html.p-archive) .bulletin-page h3{ text-transform: none; font-family: var(--font-display); }
:where(html.p-archive) .bulletin-page h2{ margin: 12px 0 0; font-size: clamp(28px,3vw,38px); line-height: 1.25; font-weight: 500; letter-spacing: -.04em; }
:where(html.p-archive) .bulletin-page p{ color: var(--muted); font-size: 15px; line-height: 1.8; }
:where(html.p-archive) .bulletin-page [hidden]{ display: none !important; }
:where(html.p-archive) .bulletin-page a:focus-visible,:where(html.p-archive) .bulletin-page input:focus-visible,:where(html.p-archive) .bulletin-page select:focus-visible{ outline: 2px solid #1760c5; outline-offset: 4px; }
:where(html.p-archive) .bulletin-hero{ padding: 34px 0 64px; background: linear-gradient(120deg,#fff 25%,#eff5fd); border-bottom: 1px solid var(--line); }
:where(html.p-archive) .bulletin-breadcrumbs{ display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 42px; font-size: 12px; color: var(--muted); }
:where(html.p-archive) .bulletin-breadcrumbs a{ color: inherit; text-decoration: none; }
:where(html.p-archive) .bulletin-hero-grid{ display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 60px; align-items: center; }
:where(html.p-archive) .bulletin-hero h1{ margin: 20px 0; font-size: clamp(38px,4vw,58px); line-height: 1.16; letter-spacing: -.05em; font-weight: 500; }
:where(html.p-archive) .bulletin-hero h1 em{ font-style: normal; color: var(--accent); }
:where(html.p-archive) .bulletin-hero-copy > p{ max-width: 540px; }
:where(html.p-archive) .bulletin-stats{ display: flex; gap: 28px; padding-block: 24px; margin: 26px 0; border-block: 1px solid var(--line); }
:where(html.p-archive) .bulletin-stats > div{ display: flex; flex-direction: column; gap: 10px; min-width: 0; }
:where(html.p-archive) .bulletin-stats b{ color: var(--accent); font-size: clamp(22px,2.2vw,30px); font-weight: 500; line-height: 1.2; letter-spacing: -.04em; white-space: nowrap; }
:where(html.p-archive) .bulletin-stats span{ font-size: 11px; line-height: 1.6; color: var(--muted); }
:where(html.p-archive) .bulletin-feature{ display: grid; grid-template-columns: minmax(0,.75fr) minmax(0,1fr); gap: 26px; align-items: center; padding: 30px; background: #fff; border: 1px solid #d4e2f4; border-radius: 22px; box-shadow: 0 16px 50px rgb(13 71 161 / 6%); }
:where(html.p-archive) .bulletin-feature-cover{ padding: 14px; border-radius: 12px; background: #eef3fa; }
:where(html.p-archive) .bulletin-feature-cover img{ display: block; width: 100%; height: auto; max-height: 320px; object-fit: contain; box-shadow: 0 6px 18px rgb(11 32 61 / 12%); }
:where(html.p-archive) .bulletin-feature .eyebrow{ font-size: 10px; letter-spacing: .1em; line-height: 1.8; }
:where(html.p-archive) .bulletin-feature time{ display: block; margin-top: 12px; font-size: 13px; color: var(--muted); }
:where(html.p-archive) .bulletin-feature h2{ margin-top: 14px; font-size: clamp(23px,2vw,28px); line-height: 1.35; }
:where(html.p-archive) .bulletin-feature p{ margin: 14px 0 22px; font-size: 13px; line-height: 1.7; }
:where(html.p-archive) .bulletin-feature .button{ width: 100%; }
:where(html.p-archive) .bulletin-archive{ padding: 64px 0 80px; }
:where(html.p-archive) .bulletin-archive-heading{ display: flex; align-items: end; justify-content: space-between; gap: 30px; margin-bottom: 32px; }
:where(html.p-archive) .bulletin-archive-heading p{ max-width: 300px; margin: 0; font-size: 13px; }
:where(html.p-archive) .bulletin-filters{ display: grid; grid-template-columns: minmax(0,1fr) 160px 180px auto; gap: 16px; align-items: end; padding: 24px; background: #f4f7fc; border: 1px solid var(--line); border-radius: 14px; }
:where(html.p-archive) .bulletin-filters label{ display: flex; flex-direction: column; gap: 9px; min-width: 0; font-size: 12px; color: var(--muted); }
:where(html.p-archive) .bulletin-filters input,:where(html.p-archive) .bulletin-filters select{ box-sizing: border-box; width: 100%; height: 46px; margin: 0; padding: 10px 12px; background: #fff; border: 1px solid #ccd9eb; border-radius: 9px; font: inherit; font-size: 14px; color: var(--white); }
:where(html.p-archive) .bulletin-filters input::placeholder{ color: #65768a; }
:where(html.p-archive) .bulletin-filters .button{ min-height: 46px; }
:where(html.p-archive) .bulletin-status{ margin: 24px 0 14px; font-size: 13px !important; }
:where(html.p-archive) .bulletin-list{ border-top: 1px solid var(--line); }
:where(html.p-archive) .bulletin-row{ display: grid; grid-template-columns: 64px minmax(0,1fr) auto; gap: 24px; align-items: center; padding: 22px 8px; border-bottom: 1px solid var(--line); }
:where(html.p-archive) .bulletin-cover-link{ display: grid; place-items: center; width: 64px; min-height: 90px; border: 1px solid var(--line); background: #fff; border-radius: 4px; overflow: hidden; }
:where(html.p-archive) .bulletin-cover-link img{ display: block; width: 64px; height: 90px; object-fit: contain; }
:where(html.p-archive) .bulletin-row-label{ color: var(--accent); font-size: 11px; line-height: 1.5; }
:where(html.p-archive) .bulletin-row h3{ margin: 7px 0; font-size: 22px; line-height: 1.3; font-weight: 500; letter-spacing: -.03em; }
:where(html.p-archive) .bulletin-row p{ margin: 0; font-size: 12px; line-height: 1.6; }
:where(html.p-archive) .bulletin-actions{ display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
:where(html.p-archive) .bulletin-actions .button{ white-space: nowrap; }
:where(html.p-archive) .bulletin-missing-icon{ display: grid; place-items: center; width: 64px; height: 90px; border: 1px dashed #b9c8dd; border-radius: 4px; color: #65768a; font-size: 12px; background: #f5f7fa; }
:where(html.p-archive) .bulletin-pagination{ display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 22px; margin-top: 30px; }
:where(html.p-archive) .bulletin-pagination .button{ flex: none; min-width: 100px; white-space: nowrap; }
:where(html.p-archive) .bulletin-pagination > span{ min-width: 50px; text-align: center; font-size: 13px; color: var(--muted); }
:where(html.p-archive) .bulletin-empty{ padding: 50px 20px; text-align: center; background: #f6f9fd; border: 1px solid var(--line); border-radius: 14px; }
:where(html.p-archive) .bulletin-empty h3{ font-weight: 500; font-size: 22px; }
:where(html.p-archive) .bulletin-source{ display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; text-align: center; margin-top: 34px; font-size: 12px !important; }
:where(html.p-archive) .bulletin-source a{ color: var(--accent); text-underline-offset: 4px; }
@media (max-width: 1100px) {
 :where(html.p-archive) .bulletin-hero-grid{ gap: 30px; }
 :where(html.p-archive) .bulletin-feature{ grid-template-columns: minmax(0,1fr); gap: 20px; padding: 24px; }
 :where(html.p-archive) .bulletin-feature-cover{ display: none; }
 :where(html.p-archive) .bulletin-filters{ grid-template-columns: minmax(0,1fr) 140px 160px; }
 :where(html.p-archive) .bulletin-filters > button{ grid-column: 3; }
}
@media (max-width: 760px) {
 :where(html.p-archive) .bulletin-page{ padding-top: 100px; }
 :where(html.p-archive) .bulletin-hero{ padding: 26px 0 40px; }
 :where(html.p-archive) .bulletin-breadcrumbs{ gap: 8px; margin-bottom: 28px; font-size: 11px; }
 :where(html.p-archive) .bulletin-hero-grid{ grid-template-columns: minmax(0,1fr); gap: 32px; }
 :where(html.p-archive) .bulletin-stats{ gap: 22px; }
 :where(html.p-archive) .bulletin-feature{ grid-template-columns: minmax(0,1fr); }
 :where(html.p-archive) .bulletin-feature-cover{ display: block; max-width: 170px; width: 100%; margin: 0 auto; }
 :where(html.p-archive) .bulletin-archive{ padding: 42px 0 56px; }
 :where(html.p-archive) .bulletin-archive-heading{ display: block; margin-bottom: 24px; }
 :where(html.p-archive) .bulletin-archive-heading p{ margin-top: 16px; }
 :where(html.p-archive) .bulletin-filters{ grid-template-columns: minmax(0,1fr) minmax(0,1fr); padding: 18px; gap: 16px 12px; }
 :where(html.p-archive) .bulletin-search{ grid-column: 1 / -1; }
 :where(html.p-archive) .bulletin-filters > button{ grid-column: 1 / -1; }
 :where(html.p-archive) .bulletin-row{ grid-template-columns: 54px minmax(0,1fr); gap: 14px; padding: 20px 0; }
 :where(html.p-archive) .bulletin-cover-link,:where(html.p-archive) .bulletin-cover-link img,:where(html.p-archive) .bulletin-missing-icon{ width: 54px; height: 76px; min-height: 76px; }
 :where(html.p-archive) .bulletin-actions{ grid-column: 1 / -1; }
 :where(html.p-archive) .bulletin-actions .button{ flex: 1; }
 :where(html.p-archive) .bulletin-row h3{ font-size: 21px; }
 :where(html.p-archive) .bulletin-pagination{ gap: 12px; }
 :where(html.p-archive) .bulletin-pagination .button{ min-width: 90px; }
}

/* ============================================================
   BÖLÜM: pages/about  (eski: assets/css/pages/about.css)
   Kapsam: p-hakkimizda
   ============================================================ */
/* About IEA: genuine company imagery, balanced layouts, shared site container. */
:where(html.p-hakkimizda) .about-page{ color: var(--white); padding-top: 78px; }
:where(html.p-hakkimizda) .about-page h1,:where(html.p-hakkimizda) .about-page h2,:where(html.p-hakkimizda) .about-page h3{ font-family: var(--font-display); text-transform: none; }
:where(html.p-hakkimizda) .about-page h2{ margin: 14px 0 0; font-size: clamp(30px, 3.2vw, 44px); font-weight: 500; line-height: 1.22; letter-spacing: -.045em; }
:where(html.p-hakkimizda) .about-page h3{ margin: 0 0 12px; font-size: 20px; font-weight: 600; line-height: 1.45; letter-spacing: -.025em; }
:where(html.p-hakkimizda) .about-page p{ margin: 0; color: var(--muted); font-size: 15px; line-height: 1.85; }
:where(html.p-hakkimizda) .about-page figure{ margin: 0; }
:where(html.p-hakkimizda) .about-page a:focus-visible{ outline: 2px solid #1760c5; outline-offset: 5px; }
:where(html.p-hakkimizda) .about-hero{ padding: 36px 0 76px; background: linear-gradient(125deg, #fff 35%, #f0f5fc); }
:where(html.p-hakkimizda) .about-breadcrumbs{ display: flex; gap: 12px; align-items: center; margin-bottom: 34px; font-size: 12px; color: var(--muted); }
:where(html.p-hakkimizda) .about-breadcrumbs a{ color: inherit; text-decoration: none; }
:where(html.p-hakkimizda) .about-breadcrumbs a:hover{ color: var(--accent); }
:where(html.p-hakkimizda) .about-hero-grid{ display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: center; gap: clamp(40px, 6vw, 90px); }
:where(html.p-hakkimizda) .about-hero h1{ max-width: 650px; margin: 22px 0; font-size: clamp(42px, 4.5vw, 64px); font-weight: 500; line-height: 1.14; letter-spacing: -.055em; }
:where(html.p-hakkimizda) .about-hero h1 em{ display: block; color: var(--accent); font-style: normal; }
:where(html.p-hakkimizda) .about-hero-copy > p{ max-width: 530px; font-size: 16px; }
:where(html.p-hakkimizda) .about-hero-copy > .button{ margin-top: 28px; }
:where(html.p-hakkimizda) .about-hero-signature{ display: flex; align-items: center; gap: 22px; margin-top: 45px; padding-top: 26px; border-top: 1px solid var(--line); }
:where(html.p-hakkimizda) .about-hero-signature b{ color: var(--accent); font-size: 40px; font-weight: 500; letter-spacing: -.05em; }
:where(html.p-hakkimizda) .about-hero-signature span{ max-width: 210px; font-size: 13px; line-height: 1.65; color: var(--muted); }
:where(html.p-hakkimizda) .about-building{ position: relative; overflow: hidden; border-radius: 22px; background: #c9def5; }
:where(html.p-hakkimizda) .about-building img{ display: block; width: 100%; height: 570px; object-fit: cover; object-position: 50% 12%; }
:where(html.p-hakkimizda) .about-building figcaption{ position: absolute; inset: auto 0 0; padding: 60px 26px 24px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; color: #fff; background: linear-gradient(transparent, rgb(7 29 56 / 88%)); font-size: 12px; }
:where(html.p-hakkimizda) .about-building figcaption > span:first-child{ font-weight: 600; letter-spacing: .1em; }
:where(html.p-hakkimizda) .about-section{ padding: 80px 0; scroll-margin-top: 0; }
:where(html.p-hakkimizda) .about-soft{ background: #f4f7fc; border-block: 1px solid var(--line); }
:where(html.p-hakkimizda) .about-page .about-section-head{ display: grid; grid-template-columns: minmax(0,1fr) minmax(0, .8fr); gap: 60px; align-items: end; margin: 0 0 40px; }
:where(html.p-hakkimizda) .about-timeline{ list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); }
:where(html.p-hakkimizda) .about-story-detail{ display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: clamp(28px,5vw,72px); margin-bottom: 48px; }
:where(html.p-hakkimizda) .about-story-detail p{ max-width: 65ch; }
:where(html.p-hakkimizda) .about-timeline li{ position: relative; padding: 32px 28px 4px 0; border-top: 1px solid #c7d7ea; }
:where(html.p-hakkimizda) .about-timeline li + li{ padding-left: 30px; }
:where(html.p-hakkimizda) .about-timeline li::before{ content: ''; position: absolute; width: 9px; height: 9px; border-radius: 50%; background: var(--accent); top: -5px; left: 0; }
:where(html.p-hakkimizda) .about-timeline li + li::before{ left: 30px; }
:where(html.p-hakkimizda) .about-year{ display: block; margin-bottom: 18px; font-size: 40px; line-height: 1; letter-spacing: -.04em; font-weight: 500; color: var(--accent); }
:where(html.p-hakkimizda) .about-timeline h3{ min-height: 3em; font-size: 16px; }
:where(html.p-hakkimizda) .about-timeline .about-year{ font-size: clamp(28px, 2.6vw, 34px); line-height: 1.2; }
:where(html.p-hakkimizda) .about-milestone-current::before{ box-shadow: 0 0 0 5px #e4eefc; }
:where(html.p-hakkimizda) .about-timeline .about-milestone-current h3{ color: var(--accent); }
:where(html.p-hakkimizda) .about-timeline p{ font-size: 14px; }
:where(html.p-hakkimizda) .about-research-grid{ display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 50px; align-items: center; }
:where(html.p-hakkimizda) .about-device{ border: 1px solid #d8e4f3; border-radius: 20px; padding: 30px; background: #fff; }
:where(html.p-hakkimizda) .about-device-image{ display: grid; place-items: center; min-height: 330px; }
:where(html.p-hakkimizda) .about-device-image img{ display: block; width: 100%; max-width: 420px; height: 340px; object-fit: contain; }
:where(html.p-hakkimizda) .about-device figcaption{ display: flex; gap: 16px; flex-wrap: wrap; align-items: center; justify-content: space-between; padding-top: 24px; margin-top: 20px; border-top: 1px solid var(--line); font-weight: 600; }
:where(html.p-hakkimizda) .about-capabilities article{ display: flex; gap: 22px; padding-block: 24px; border-bottom: 1px solid #d5e0ef; }
:where(html.p-hakkimizda) .about-capabilities article:first-child{ padding-top: 0; }
:where(html.p-hakkimizda) .about-step{ flex: 0 0 28px; padding-top: 4px; color: var(--accent); font-size: 12px; letter-spacing: .1em; }
:where(html.p-hakkimizda) .about-capabilities p{ font-size: 14px; }
:where(html.p-hakkimizda) .about-text-link{ display: inline-flex; align-items: center; gap: 20px; min-height: 44px; margin-top: 18px; color: var(--accent); font-size: 14px; font-weight: 600; text-decoration: none; }
:where(html.p-hakkimizda) .about-text-link:hover{ text-decoration: underline; text-underline-offset: 5px; }
:where(html.p-hakkimizda) .about-locations{ display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 20px; }
:where(html.p-hakkimizda) .about-locations article{ padding: 30px; background: #f7f9fc; border: 1px solid var(--line); border-radius: 14px; }
:where(html.p-hakkimizda) .about-location-label{ display: block; margin-bottom: 24px; color: var(--accent); font-size: 11px; letter-spacing: .12em; font-weight: 600; }
:where(html.p-hakkimizda) .about-locations p{ font-size: 14px; }
:where(html.p-hakkimizda) .about-support{ margin-top: 48px; display: grid; grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr); gap: 60px; padding: 48px; border-radius: 20px; background: #0b203d; color: #fff; }
:where(html.p-hakkimizda) .about-support .eyebrow{ color: #9fc2f5; }
:where(html.p-hakkimizda) .about-support h2{ font-size: clamp(30px,3vw,40px); color: #fff; margin-bottom: 22px; }
:where(html.p-hakkimizda) .about-support p{ color: #b7c7dc; font-size: 14px; }
:where(html.p-hakkimizda) .about-support h3{ color: #fff; font-size: 18px; }
:where(html.p-hakkimizda) .about-support .about-text-link{ color: #aaccff; margin-top: 10px; }
:where(html.p-hakkimizda) .about-support-channels article + article{ margin-top: 24px; padding-top: 24px; border-top: 1px solid rgb(178 200 231 / 22%); }
:where(html.p-hakkimizda) .about-quality{ padding-top: 24px; }
:where(html.p-hakkimizda) .about-quality-grid{ display: grid; grid-template-columns: minmax(0,.8fr) minmax(0,1fr); gap: 80px; align-items: stretch; }
:where(html.p-hakkimizda) .about-certificate{ justify-content: center; display: flex; flex-direction: column; align-items: center; gap: 20px; padding: 28px; border: 1px solid var(--line); border-radius: 20px; background: #f4f7fc; text-decoration: none; color: var(--accent); font-size: 13px; }
:where(html.p-hakkimizda) .about-certificate img{ display: block; width: auto; max-width: 100%; height: 340px; object-fit: contain; box-shadow: 0 8px 24px rgb(11 32 61 / 9%); }
:where(html.p-hakkimizda) .about-certificate > span{ display: inline-flex; align-items: center; gap: 24px; min-height: 30px; }
:where(html.p-hakkimizda) .about-quality-copy{ display: flex; flex-direction: column; align-items: flex-start; }
:where(html.p-hakkimizda) .about-quality-copy > .button{ margin-top: auto; }
:where(html.p-hakkimizda) .about-quality-copy > p{ margin-top: 22px; }
:where(html.p-hakkimizda) .about-certificate-facts{ width: 100%; margin: 24px 0; }
:where(html.p-hakkimizda) .about-certificate-facts > div{ display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding: 13px 0; border-bottom: 1px solid var(--line); font-size: 13px; line-height: 1.6; }
:where(html.p-hakkimizda) .about-certificate-facts dt{ color: var(--muted); }
:where(html.p-hakkimizda) .about-certificate-facts dd{ margin: 0; text-align: right; font-weight: 500; }
@media (max-width: 1000px) {
  :where(html.p-hakkimizda) .about-hero-grid{ gap: 36px; }
  :where(html.p-hakkimizda) .about-building img{ height: 520px; }
  :where(html.p-hakkimizda) .about-page .about-section-head{ gap: 35px; }
  :where(html.p-hakkimizda) .about-research-grid{ gap: 30px; }
  :where(html.p-hakkimizda) .about-device{ padding: 20px; }
  :where(html.p-hakkimizda) .about-device-image{ min-height: 260px; }
  :where(html.p-hakkimizda) .about-device-image img{ height: 280px; }
  :where(html.p-hakkimizda) .about-support{ gap: 35px; padding: 35px; }
  :where(html.p-hakkimizda) .about-quality-grid{ gap: 40px; }
}
@media (max-width: 760px) {
  :where(html.p-hakkimizda) .about-story-detail{ grid-template-columns: minmax(0,1fr); gap: 22px; margin-bottom: 36px; }
  :where(html.p-hakkimizda) .about-page{ padding-top: 100px; }
  :where(html.p-hakkimizda) .about-hero{ padding: 26px 0 48px; }
  :where(html.p-hakkimizda) .about-breadcrumbs{ margin-bottom: 28px; }
  :where(html.p-hakkimizda) .about-hero-grid,:where(html.p-hakkimizda) .about-page .about-section-head,:where(html.p-hakkimizda) .about-research-grid,:where(html.p-hakkimizda) .about-support,:where(html.p-hakkimizda) .about-quality-grid{ grid-template-columns: minmax(0,1fr); gap: 30px; }
  :where(html.p-hakkimizda) .about-hero h1{ font-size: clamp(38px,7vw,54px); }
  :where(html.p-hakkimizda) .about-hero-signature{ margin-top: 28px; padding-top: 20px; }
  :where(html.p-hakkimizda) .about-building img{ height: clamp(340px,75vw,480px); object-position: 50% 12%; }
  :where(html.p-hakkimizda) .about-building figcaption{ padding: 50px 20px 20px; }
  :where(html.p-hakkimizda) .about-section{ padding: 52px 0; }
  :where(html.p-hakkimizda) .about-page .about-section-head{ margin-bottom: 30px; gap: 20px; }
  :where(html.p-hakkimizda) .about-locations{ grid-template-columns: minmax(0,1fr); gap: 12px; }
  :where(html.p-hakkimizda) .about-locations article{ padding: 24px; }
  :where(html.p-hakkimizda) .about-location-label{ margin-bottom: 14px; }
  :where(html.p-hakkimizda) .about-support{ padding: 28px; margin-top: 30px; }
  :where(html.p-hakkimizda) .about-quality{ padding-top: 0; }
  :where(html.p-hakkimizda) .about-quality-copy{ grid-row: 1; }
  :where(html.p-hakkimizda) .about-certificate{ padding: 22px; }
}

@media (max-width: 1100px) {
  :where(html.p-hakkimizda) .about-timeline{ grid-template-columns: minmax(0,1fr); }
  :where(html.p-hakkimizda) .about-timeline li,:where(html.p-hakkimizda) .about-timeline li + li{ padding: 0 0 32px 26px; border-top: 0; border-left: 1px solid #c7d7ea; }
  :where(html.p-hakkimizda) .about-timeline li:last-child{ padding-bottom: 0; }
  :where(html.p-hakkimizda) .about-timeline li::before,:where(html.p-hakkimizda) .about-timeline li + li::before{ left: -5px; top: 7px; }
  :where(html.p-hakkimizda) .about-year{ font-size: 34px; margin-bottom: 12px; }
  :where(html.p-hakkimizda) .about-timeline h3{ min-height: 0; }
}

/* The original certificate opens above the current page. */
:where(html.p-hakkimizda) .certificate-dialog{
  position: fixed; inset: 0; margin: auto; width: fit-content;
  max-width: calc(100vw - 24px); max-height: calc(100dvh - 24px);
  padding: 60px 16px 16px; box-sizing: border-box;
  border: 1px solid var(--line); border-radius: 16px;
  background: #fff; box-shadow: 0 24px 80px rgb(7 29 56 / 25%);
}
:where(html.p-hakkimizda) .certificate-dialog::backdrop{ background: rgb(7 22 43 / 72%); }
:where(html.p-hakkimizda) .certificate-dialog > img{
  display: block; width: auto; height: auto; object-fit: contain;
  max-width: 100%; max-height: calc(100dvh - 102px); margin: auto;
}
:where(html.p-hakkimizda) .certificate-dialog-close{
  position: absolute; top: 8px; right: 12px; display: grid; place-items: center;
  width: 44px; height: 44px; padding: 0; border: 1px solid var(--line);
  border-radius: 10px; background: #f4f7fc; color: var(--accent);
  font: 28px/1 var(--font-display); cursor: pointer;
}
:where(html.p-hakkimizda) .certificate-dialog-close:hover{ background: var(--accent); color: #fff; }
:where(html.p-hakkimizda) .certificate-dialog-close:focus-visible{ outline: 2px solid var(--accent); outline-offset: 2px; }

:where(html.p-hakkimizda) .certificate-dialog-close > svg{ display: block; width: 20px; height: 20px; margin: 0; transform: none; }

/* ============================================================
   BÖLÜM: pages/distributors  (eski: assets/css/pages/distributors.css)
   Kapsam: p-distributor
   ============================================================ */
/* Distributor finder: shared container and buttons, no nested list scrolling. */
:where(html.p-distributor) .network-page{ --network-ink: #142239; --network-blue: #0d47a1; color: var(--network-ink); }
:where(html.p-distributor) .network-page [hidden]{ display: none !important; }
:where(html.p-distributor) .network-page .eyebrow{ font-size: 11px; letter-spacing: .15em; }
:where(html.p-distributor) .network-hero{ padding: 116px 0 62px; background: linear-gradient(120deg,#fff 40%,#f0f5fc); border-bottom: 1px solid #e0e8f3; }
:where(html.p-distributor) .network-hero .breadcrumbs{ margin-bottom: 38px; font-size: 12px; color: #67768c; }
:where(html.p-distributor) .network-hero-row{ display: flex; justify-content: space-between; align-items: end; gap: 48px; }
:where(html.p-distributor) .network-hero h1{ margin: 16px 0 20px; font-size: clamp(38px,4.4vw,62px); line-height: 1.12; letter-spacing: -.05em; font-weight: 600; }
:where(html.p-distributor) .network-hero h1 span{ color: var(--network-blue); }
:where(html.p-distributor) .network-hero p{ margin: 0; font-size: 16px; line-height: 1.8; color: #5c6d83; }
:where(html.p-distributor) .network-stats{ display: flex; gap: 34px; padding: 0 0 7px; margin: 0; flex-shrink: 0; }
:where(html.p-distributor) .network-stats > div{ display: flex; flex-direction: column-reverse; gap: 8px; border-left: 1px solid #cfdaeb; padding-left: 24px; }
:where(html.p-distributor) .network-stats dt{ font-size: 12px; color: #60728a; }
:where(html.p-distributor) .network-stats dd{ margin: 0; font-size: 42px; line-height: 1; letter-spacing: -.04em; color: var(--network-blue); font-weight: 600; }
:where(html.p-distributor) .network-section{ padding: 60px 0 80px; }
:where(html.p-distributor) .network-section-head,:where(html.p-distributor) .network-directory-head{ display: flex; align-items: end; justify-content: space-between; gap: 28px; margin-bottom: 28px; }
:where(html.p-distributor) .network-section-head h2,:where(html.p-distributor) .network-directory-head h2{ margin: 10px 0 0; font-size: clamp(26px,2.6vw,36px); font-weight: 600; letter-spacing: -.04em; line-height: 1.25; }
:where(html.p-distributor) .network-section-head > p{ margin: 0; color: #68798d; font-size: 13px; line-height: 1.8; }
:where(html.p-distributor) .network-overview{ display: grid; grid-template-columns: minmax(0,1.9fr) minmax(0,1fr); align-items: stretch; gap: 20px; scroll-margin-top: 110px; }
:where(html.p-distributor) .network-overview.is-empty{ grid-template-columns: minmax(0,1fr); }
:where(html.p-distributor) .network-map-panel{ min-width: 0; display: flex; flex-direction: column; border: 1px solid #dae5f3; border-radius: 20px; background: radial-gradient(ellipse at 45% 45%,#fff,#eff5fc); }
:where(html.p-distributor) .network-map-top{ display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 22px 0; }
:where(html.p-distributor) .network-map-top > span{ display: flex; align-items: center; gap: 9px; font-size: 12px; color: #556b88; }
:where(html.p-distributor) .network-map-top i,:where(html.p-distributor) .network-map-bottom i{ width: 7px; height: 7px; display: inline-block; flex-shrink: 0; border-radius: 50%; background: #5284be; }
:where(html.p-distributor) .network-map-tools{ display: flex; gap: 6px; }
html:root:where(.p-distributor) body .network-map-tools .button{ padding: 0 12px; min-width: 44px; }
html:root:where(.p-distributor) body .network-map-tools .button:is(#networkZoomIn,#networkZoomOut){ width: 44px; padding: 0; font-size: 22px; }
:where(html.p-distributor) .network-map{ display: block; width: 100%; height: auto; aspect-ratio: 1060 / 460; margin: auto 0; border-radius: 8px; }
:where(html.p-distributor) .network-land{ fill: #d0dfef; stroke: #b8cee4; stroke-width: .6; stroke-linejoin: round; }
:where(html.p-distributor) .network-pin{ cursor: pointer; outline: none; }
:where(html.p-distributor) .network-pin-halo{ fill: #0d47a11a; stroke: transparent; }
:where(html.p-distributor) .network-pin-dot{ fill: #437ab8; stroke: #fff; stroke-width: 1.8; }
:where(html.p-distributor) .network-pin:hover .network-pin-dot,:where(html.p-distributor) .network-pin[aria-pressed="true"] .network-pin-dot{ fill: #0d47a1; stroke-width: 2; }
:where(html.p-distributor) .network-pin[aria-pressed="true"] .network-pin-halo{ fill: #0d47a126; stroke: #0d47a1; stroke-width: 1.2; }
:where(html.p-distributor) .network-pin:focus-visible .network-pin-halo{ stroke: #083878; stroke-width: 2.5; fill: #8ab8fa80; }
:where(html.p-distributor) .network-map-bottom{ display: flex; align-items: center; flex-wrap: wrap; gap: 16px; padding: 14px 22px 20px; color: #697c96; font-size: 10px; }
:where(html.p-distributor) .network-map-bottom > span{ display: inline-flex; align-items: center; gap: 6px; }
:where(html.p-distributor) .network-map-bottom i.selected{ background: #0d47a1; box-shadow: 0 0 0 3px #0d47a11a; }
:where(html.p-distributor) .network-map-bottom a{ margin-left: auto; color: var(--network-blue); font-size: 11px; }
:where(html.p-distributor) .network-selected{ display: flex; flex-direction: column; min-width: 0; padding: 30px; border: 1px solid #cfdbef; border-radius: 20px; background: #f6f8fc; box-shadow: none; }
:where(html.p-distributor) .network-selected-label{ color: #526c90; font-size: 9px; letter-spacing: .14em; }
:where(html.p-distributor) .network-selected-title{ margin: 26px 0 20px; }
:where(html.p-distributor) .network-selected-title > span{ font-size: 11px; color: #617792; }
:where(html.p-distributor) .network-selected-title h2{ margin: 6px 0 0; font-size: clamp(28px,2.6vw,38px); font-weight: 600; line-height: 1.2; letter-spacing: -.035em; }
:where(html.p-distributor) .network-contact address{ font-size: 14px; font-style: normal; line-height: 1.8; overflow-wrap: anywhere; color: #5c6e84; }
:where(html.p-distributor) .network-phone{ margin: 16px 0 0; font-size: 14px; line-height: 1.7; color: #163f79; overflow-wrap: anywhere; }
:where(html.p-distributor) .network-selected .network-card-actions{ margin-top: auto; padding-top: 26px; }
:where(html.p-distributor) .network-card-actions{ display: flex; flex-wrap: wrap; gap: 8px; }
html:root:where(.p-distributor) body .network-card-actions .button{ flex: 1 1 auto; width: auto; padding-inline: 12px; }
:where(html.p-distributor) .network-directory{ margin-top: 64px; scroll-margin-top: 110px; }
:where(html.p-distributor) .network-search{ display: block; width: min(390px,100%); }
:where(html.p-distributor) .network-search > span:first-child{ display: block; margin-bottom: 9px; font-size: 11px; color: #596f8c; }
:where(html.p-distributor) .network-search-field{ display: flex; align-items: center; gap: 10px; padding: 0 15px; border: 1px solid #cbd9eb; border-radius: 10px; background: #fff; }
:where(html.p-distributor) .network-search-field:focus-within{ outline: 3px solid #4989e72a; border-color: var(--network-blue); }
:where(html.p-distributor) .network-search-field svg{ width: 20px; height: 20px; flex-shrink: 0; color: #52729b; }
:where(html.p-distributor) .network-search input{ width: 100%; min-width: 0; height: 48px; border: 0; background: transparent; outline: none; font: inherit; font-size: 14px; color: var(--network-ink); }
:where(html.p-distributor) .network-search input::placeholder{ color: #7d8b9c; }
:where(html.p-distributor) .network-filters{ display: flex; flex-wrap: wrap; gap: 8px; padding-bottom: 24px; border-bottom: 1px solid #e1e8f2; }
:where(html.p-distributor) .network-results{ min-height: 74px; display: flex; align-items: center; justify-content: space-between; gap: 18px; }
:where(html.p-distributor) .network-results p{ margin: 0; font-size: 13px; color: #64778f; }
:where(html.p-distributor) .network-list{ display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 18px; padding: 0; margin: 0; list-style: none; }
:where(html.p-distributor) .network-card{ display: flex; flex-direction: column; min-width: 0; padding: 25px; border: 1px solid #dce5f1; border-radius: 16px; background: #fff; transition: border-color .2s,box-shadow .2s; }
:where(html.p-distributor) .network-card:hover,:where(html.p-distributor) .network-card.is-selected{ border-color: #8dadde; box-shadow: 0 8px 26px #0d47a10a; }
:where(html.p-distributor) .network-card.is-selected{ background: #f7faff; }
:where(html.p-distributor) .network-card-top{ display: flex; justify-content: space-between; align-items: center; gap: 15px; color: #647c9a; font-size: 10px; }
:where(html.p-distributor) .network-card-number{ font-variant-numeric: tabular-nums; color: #95a5ba; }
:where(html.p-distributor) .network-card h3{ margin: 18px 0 14px; font-size: 25px; font-weight: 600; line-height: 1.2; letter-spacing: -.03em; }
:where(html.p-distributor) .network-card .network-contact{ flex: 1; }
:where(html.p-distributor) .network-card .network-card-actions{ margin-top: 22px; }
html:root:where(.p-distributor) body .network-card .network-show{ margin-top: 10px; width: 100%; background: #fff; }
:where(html.p-distributor) .network-empty{ padding: 42px 24px; border: 1px dashed #b8cce7; background: #f6f9fd; border-radius: 16px; text-align: center; }
:where(html.p-distributor) .network-empty h3{ font-size: 22px; font-weight: 600; }
:where(html.p-distributor) .network-empty p{ max-width: 60ch; margin: 0 auto 24px; color: #61758c; line-height: 1.8; }
:where(html.p-distributor) .network-pagination{ display: flex; justify-content: center; flex-wrap: wrap; gap: 4px; margin-top: 28px; }
html:root:where(.p-distributor) body .network-pagination .button{ width: 44px; min-width: 44px; padding-inline: 0; }
:where(html.p-distributor) .network-assistance{ display: flex; justify-content: space-between; align-items: center; gap: 32px; padding: 36px; margin-top: 64px; border: 1px solid #dbe5f3; border-radius: 18px; background: #f4f7fc; }
:where(html.p-distributor) .network-assistance h2{ max-width: 27ch; margin: 12px 0; font-size: 28px; line-height: 1.3; letter-spacing: -.035em; font-weight: 600; }
:where(html.p-distributor) .network-assistance p{ max-width: 65ch; margin: 0; font-size: 14px; line-height: 1.8; color: #65788f; }
:where(html.p-distributor) .network-assistance > a{ flex-shrink: 0; }
@media (max-width: 1100px) {
 :where(html.p-distributor) .network-stats{ gap: 20px; }
 :where(html.p-distributor) .network-stats > div{ padding-left: 16px; }
 :where(html.p-distributor) .network-stats dd{ font-size: 34px; }
 :where(html.p-distributor) .network-overview{ grid-template-columns: minmax(0,1.6fr) minmax(0,1fr); }
 :where(html.p-distributor) .network-selected{ padding: 24px; }
 :where(html.p-distributor) .network-list{ grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 800px) {
 :where(html.p-distributor) .network-hero{ padding: 100px 0 40px; }
 :where(html.p-distributor) .network-hero-row{ display: block; }
 :where(html.p-distributor) .network-stats{ margin-top: 30px; padding: 24px 0 0; border-top: 1px solid #dbe5f3; gap: 32px; }
 :where(html.p-distributor) .network-stats > div{ padding: 0; border: 0; }
 :where(html.p-distributor) .network-stats dd{ font-size: 32px; }
 :where(html.p-distributor) .network-section{ padding: 40px 0 56px; }
 :where(html.p-distributor) .network-overview{ grid-template-columns: minmax(0,1fr); gap: 16px; }
 :where(html.p-distributor) .network-map-panel{ min-height: 0; }
 :where(html.p-distributor) .network-selected-title{ margin: 20px 0 14px; }
 :where(html.p-distributor) .network-section-head > p{ display: none; }
 :where(html.p-distributor) .network-directory{ margin-top: 42px; }
 :where(html.p-distributor) .network-directory-head{ align-items: stretch; flex-direction: column; gap: 24px; }
 :where(html.p-distributor) .network-search{ width: 100%; }
 :where(html.p-distributor) .network-assistance{ align-items: flex-start; flex-direction: column; padding: 28px; margin-top: 42px; }
}
@media (max-width: 540px) {
 :where(html.p-distributor) .network-hero .breadcrumbs{ margin-bottom: 28px; }
 :where(html.p-distributor) .network-hero h1{ font-size: clamp(32px,8.3vw,44px); }
 :where(html.p-distributor) .network-hero p{ font-size: 14px; }
 :where(html.p-distributor) .network-stats{ justify-content: space-between; gap: 12px; }
 :where(html.p-distributor) .network-stats dt{ font-size: 10px; }
 :where(html.p-distributor) .network-map-top{ padding: 16px 14px 0; flex-wrap: wrap; gap: 12px; }
 :where(html.p-distributor) .network-map-top > span{ font-size: 11px; }
 :where(html.p-distributor) .network-map-tools{ margin-left: auto; }
 :where(html.p-distributor) .network-map-bottom{ padding: 14px; gap: 12px; }
 :where(html.p-distributor) .network-map-bottom a{ width: 100%; margin: 0; }
 :where(html.p-distributor) .network-list{ grid-template-columns: minmax(0,1fr); }
 :where(html.p-distributor) .network-card{ padding: 24px; }
 :where(html.p-distributor) .network-filters{ gap: 8px; }
html:root:where(.p-distributor) body .network-filters .dist-chip{ flex: 1 1 auto; padding-inline: 12px; }
 :where(html.p-distributor) .network-results{ align-items: flex-start; flex-direction: column; gap: 12px; padding: 18px 0; }
 :where(html.p-distributor) .network-assistance h2{ font-size: 25px; }
html:root:where(.p-distributor) body .network-assistance > a{ width: 100%; }
}
@media (prefers-reduced-motion: reduce) { :where(html.p-distributor) .network-card{ transition: none; } }

/* Search belongs beside the map heading; detail cards stay inside the map. */
:where(html.p-distributor) .network-section-head{ display: grid; grid-template-columns: minmax(0,1.9fr) minmax(0,1fr); gap: 20px; }
:where(html.p-distributor) .network-section-head .network-search{ width: 100%; min-width: 0; }
:where(html.p-distributor) .network-map-stage{ position: relative; min-width: 0; width: 100%; margin-block: auto; }
:where(html.p-distributor) .network-map-stage .network-map{ margin: 0; }
:where(html.p-distributor) .network-map-popup{ position: absolute; z-index: 3; width: 250px; max-width: calc(100% - 20px); max-height: calc(100% - 20px); overflow-y: auto; overscroll-behavior: contain; box-sizing: border-box; padding: 18px; border: 1px solid #c6d7ed; border-radius: 14px; background: #fff; box-shadow: 0 10px 32px #17345224; }
:where(html.p-distributor) .network-map-popup h3{ margin: 4px 26px 12px 0; font-size: 19px; line-height: 1.3; color: var(--network-ink); font-weight: 600; letter-spacing: -.025em; }
:where(html.p-distributor) .network-popup-region{ display: block; margin-right: 26px; color: #637a95; font-size: 10px; line-height: 1.5; }
:where(html.p-distributor) .network-map-popup address{ font-size: 12px; line-height: 1.7; font-style: normal; color: #5c6e84; overflow-wrap: anywhere; }
:where(html.p-distributor) .network-popup-links{ display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 10px; }
:where(html.p-distributor) .network-popup-links a{ display: inline-flex; align-items: center; min-height: 36px; font-size: 12px; color: var(--network-blue); text-decoration: none; overflow-wrap: anywhere; }
:where(html.p-distributor) .network-popup-links a:hover{ text-decoration: underline; }
:where(html.p-distributor) .network-map-popup .network-popup-close{ position: absolute; top: 5px; right: 5px; display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 8px; background: transparent; color: var(--network-blue); cursor: pointer; }
:where(html.p-distributor) .network-popup-close:hover{ background: #edf3fb; }
:where(html.p-distributor) .network-popup-close svg{ display: block; width: 16px; height: 16px; }
:where(html.p-distributor) .network-map-popup :is(a,button):focus-visible{ outline: 2px solid #377ae0; outline-offset: 2px; }
@media (max-width: 1100px) { :where(html.p-distributor) .network-section-head{ grid-template-columns: minmax(0,1.6fr) minmax(0,1fr); } }
@media (max-width: 800px) {
 :where(html.p-distributor) .network-section-head{ grid-template-columns: minmax(0,1fr); gap: 22px; }
 :where(html.p-distributor) .network-map-popup{ position: relative; inset: auto !important; width: auto; max-width: none; max-height: none; margin: 0 14px 12px; box-shadow: none; }
 :where(html.p-distributor) .network-map-popup .network-popup-close{ width: 44px; height: 44px; }
 :where(html.p-distributor) .network-popup-links a{ min-height: 44px; }
}

/* ============================================================
   BÖLÜM: pages/privacy  (eski: assets/css/pages/privacy.css)
   Kapsam: p-kvkk
   ============================================================ */
:where(html.p-kvkk) .privacy-page{padding:110px 0 90px;background:linear-gradient(180deg,#f3f7fd 0,#fff 480px);color:#141e32}
:where(html.p-kvkk) .privacy-page .container{max-width:1240px}
:where(html.p-kvkk) .privacy-breadcrumb{display:flex;align-items:center;gap:12px;font-size:13px;color:#61738e;margin:0 0 36px}
:where(html.p-kvkk) .privacy-breadcrumb a{color:#164ca5;text-decoration:none}
:where(html.p-kvkk) .privacy-heading{padding-bottom:40px;border-bottom:1px solid #d9e3f1;margin-bottom:42px}
:where(html.p-kvkk) .privacy-heading h1{font-size:clamp(36px,5vw,62px);font-weight:600;line-height:1.12;letter-spacing:-.045em;margin:18px 0 28px}
:where(html.p-kvkk) .privacy-heading .eyebrow{color:#164ca5;font-size:12px;letter-spacing:.16em}
:where(html.p-kvkk) .privacy-layout{display:grid;grid-template-columns:250px minmax(0,1fr);gap:64px;align-items:start}
:where(html.p-kvkk) .privacy-contents{position:sticky;top:104px;display:grid;gap:4px;padding:22px 18px;background:#f4f7fc;border:1px solid #dce5f1;border-radius:16px}
:where(html.p-kvkk) .privacy-contents b{font-size:11px;letter-spacing:.13em;color:#61738e;margin:0 10px 12px}
:where(html.p-kvkk) .privacy-contents a{display:block;padding:10px;border-radius:7px;color:#234168;font-size:13px;line-height:1.5;text-decoration:none}
:where(html.p-kvkk) .privacy-contents a:hover{color:#124ba5;background:#e6eefe}
:where(html.p-kvkk) .privacy-text{min-width:0;font-size:15px;line-height:1.9;color:#455670;overflow-wrap:anywhere}
:where(html.p-kvkk) .privacy-text p{margin:0 0 20px}
:where(html.p-kvkk) .privacy-text h2{font-size:24px;line-height:1.4;font-weight:600;color:#17243b;margin:40px 0 16px;scroll-margin-top:110px;letter-spacing:-.025em}
:where(html.p-kvkk) .privacy-text h3{font-size:17px;line-height:1.5;color:#17243b;margin:28px 0 12px}
:where(html.p-kvkk) .privacy-text a{color:#164ca5;text-decoration:underline;text-underline-offset:3px}
:where(html.p-kvkk) .privacy-text ol{padding-left:24px;margin:16px 0 24px}
:where(html.p-kvkk) .privacy-text li{padding-left:6px;margin-bottom:9px}
:where(html.p-kvkk) .privacy-page a:focus-visible{outline:3px solid #3878d8;outline-offset:4px}
@media(max-width:800px){:where(html.p-kvkk) .privacy-page{padding:94px 0 56px}:where(html.p-kvkk) .privacy-layout{grid-template-columns:1fr;gap:30px}:where(html.p-kvkk) .privacy-contents{position:static;grid-template-columns:1fr 1fr;gap:3px}:where(html.p-kvkk) .privacy-contents b{grid-column:1/-1}:where(html.p-kvkk) .privacy-heading{margin-bottom:26px;padding-bottom:28px}:where(html.p-kvkk) .privacy-breadcrumb{margin-bottom:24px}:where(html.p-kvkk) .privacy-text h2{font-size:22px}:where(html.p-kvkk) .privacy-text{font-size:14px;line-height:1.85}}
@media(max-width:400px){:where(html.p-kvkk) .privacy-contents{grid-template-columns:1fr}:where(html.p-kvkk) .privacy-heading h1{font-size:34px}}
:where(html.p-kvkk) .privacy-updated{margin:-12px 0 24px;font-size:13px;color:#61738e}
:where(html.p-kvkk) .privacy-text ul{padding-left:22px;margin:12px 0 24px}
:where(html.p-kvkk) .privacy-text ul li{padding-left:4px;margin-bottom:10px}
:where(html.p-kvkk) .privacy-text strong{color:#17243b;font-weight:600}
:where(html.p-kvkk) .privacy-facts{display:grid;gap:0;margin:0 0 28px;border:1px solid #dce5f1;border-radius:14px;overflow:hidden}
:where(html.p-kvkk) .privacy-facts>div{display:grid;grid-template-columns:150px minmax(0,1fr);gap:16px;padding:12px 18px;border-top:1px solid #e6edf6}
:where(html.p-kvkk) .privacy-facts>div:first-child{border-top:0}
:where(html.p-kvkk) .privacy-facts dt{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#61738e;line-height:1.9}
:where(html.p-kvkk) .privacy-facts dd{margin:0;color:#17243b}
:where(html.p-kvkk) .privacy-activity{margin:0 0 18px;padding:22px 24px 8px;background:#f8fafd;border:1px solid #e1e8f2;border-radius:14px}
:where(html.p-kvkk) .privacy-activity h3{margin:0 0 10px;scroll-margin-top:110px}
:where(html.p-kvkk) .privacy-activity p{margin-bottom:14px}
:where(html.p-kvkk) .privacy-activity dl{margin:0 0 14px}
:where(html.p-kvkk) .privacy-activity dl>div{display:grid;grid-template-columns:120px minmax(0,1fr);gap:14px;padding:8px 0;border-top:1px solid #e6edf6}
:where(html.p-kvkk) .privacy-activity dt{font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:#61738e;line-height:1.9}
:where(html.p-kvkk) .privacy-activity dd{margin:0}
:where(html.p-kvkk) .privacy-table-wrap{margin:8px 0 22px;border:1px solid #dce5f1;border-radius:14px;overflow:hidden}
:where(html.p-kvkk) .privacy-table{width:100%;border-collapse:collapse;font-size:14px;line-height:1.6}
:where(html.p-kvkk) .privacy-table th{background:#f4f7fc;text-align:left;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#61738e;padding:12px 14px}
:where(html.p-kvkk) .privacy-table td{padding:12px 14px;border-top:1px solid #e6edf6;vertical-align:top}
:where(html.p-kvkk) .privacy-table code{font-size:12.5px;color:#17243b;background:#eef3fa;padding:2px 6px;border-radius:5px;overflow-wrap:anywhere}
@media(max-width:800px){:where(html.p-kvkk) .privacy-facts>div,:where(html.p-kvkk) .privacy-activity dl>div{grid-template-columns:1fr;gap:2px}:where(html.p-kvkk) .privacy-activity{padding:18px 16px 4px}:where(html.p-kvkk) .privacy-table thead{display:none}:where(html.p-kvkk) .privacy-table,:where(html.p-kvkk) .privacy-table tbody,:where(html.p-kvkk) .privacy-table tr,:where(html.p-kvkk) .privacy-table td{display:block;width:100%}:where(html.p-kvkk) .privacy-table tr{border-top:1px solid #dce5f1;padding:8px 0}:where(html.p-kvkk) .privacy-table tr:first-child{border-top:0}:where(html.p-kvkk) .privacy-table td{border:0;padding:4px 14px;display:grid;grid-template-columns:70px minmax(0,1fr);gap:10px}:where(html.p-kvkk) .privacy-table td::before{content:attr(data-label);font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#61738e;line-height:1.9}}

/* ============================================================
   BÖLÜM: sections/anatomy  (eski: assets/css/sections/anatomy.css)
   Kapsam: p-index
   ============================================================ */
/* Ürün detayları: ortak container, iki eşit sütun. */
:where(html.p-index) .i-showcase-sticky{ padding-inline: var(--gutter); }
:where(html.p-index) .i-showcase-sticky > .i-showcase-head,:where(html.p-index) .i-showcase-sticky > .i-anatomy{ width: 100%; max-width: var(--container); margin-inline: auto; }
:where(html.p-index) .i-showcase-head h2{ max-width: 1080px; font-size: clamp(32px,3.2vw,48px); line-height: 1.16; letter-spacing: -.04em; }
:where(html.p-index) .i-showcase-sticky > .i-anatomy{ grid-template-columns: repeat(2,minmax(0,1fr)); gap: 24px; align-items: stretch; margin-top: 32px; }
:where(html.p-index) .i-anatomy-stage{ display: flex; flex-direction: column; align-items: stretch; min-width: 0; min-height: clamp(380px,30vw,510px); border-radius: 16px; background: radial-gradient(ellipse at 50% 40%,#fff,#eaf1fa); }
:where(html.p-index) .i-anatomy-device{ position: absolute; inset: 6% 8%; container-type: size; }
:where(html.p-index) .i-anatomy-photo{ position: absolute; top: 50%; left: 50%; width: min(100cqw,calc(100cqh * 1082 / 936)); aspect-ratio: 1082 / 936; transform: translate(-50%,-50%); }
:where(html.p-index) .i-anatomy-device img{ display: block; width: 100%; height: 100%; object-fit: contain; filter: none; border-radius: 0; }
:where(html.p-index) .i-anatomy-points{ position: absolute; inset: 0; pointer-events: none; }
:where(html.p-index) .i-anatomy-points .i-hot{ position: absolute; left: var(--hx); top: var(--hy); width: 30px; height: 30px; transform: translate(-50%,-50%); border: 1px solid var(--accent); background: #fff; box-shadow: 0 2px 10px #10244930; backdrop-filter: none; color: var(--accent); pointer-events: auto; }
:where(html.p-index) .i-anatomy-points .i-hot i::before,:where(html.p-index) .i-anatomy-points .i-hot i::after{ background: currentColor; }
:where(html.p-index) .i-anatomy-points .i-hot::after{ display: none; }
:where(html.p-index) .i-anatomy-points .i-hot.is-active,:where(html.p-index) .i-anatomy-points .i-hot:hover{ background: var(--accent); border-color: var(--accent); color: #fff; transform: translate(-50%,-50%); }
:where(html.p-index) .i-anatomy-points .i-hot:focus-visible{ outline: 3px solid #6aa4ee; outline-offset: 3px; transform: translate(-50%,-50%); }
:where(html.p-index) .i-anatomy-panel{ min-width: 0; padding: clamp(28px,3.4vw,50px); border-radius: 16px; border: 1px solid #dce5f0; background: #f7f9fc; }
:where(html.p-index) .i-anatomy-panel h3{ font-size: clamp(25px,2.2vw,34px); font-weight: 600; line-height: 1.25; }
:where(html.p-index) .i-anatomy-facts{ margin-top: 26px; padding-top: 22px; gap: 16px; }
:where(html.p-index) .i-anatomy-facts li{ align-items: baseline; }
:where(html.p-index) .i-anatomy-facts b{ letter-spacing: .02em; }
:where(html.p-index) .i-anatomy-facts span{ max-width: 65%; }
@media (max-width: 860px) {
 :where(html.p-index) .i-showcase-sticky > .i-anatomy{ grid-template-columns: 1fr; gap: 18px; }
 :where(html.p-index) .i-anatomy-stage{ min-height: 340px; }
 :where(html.p-index) .i-anatomy-panel{ min-height: 340px; padding: 28px 24px; }
 :where(html.p-index) .i-anatomy-panel p{ font-size: 15px; }
 :where(html.p-index) .i-anatomy-facts li{ font-size: 13px; }
}

/* ============================================================
   BÖLÜM: theme style.css (404, arama)  (eski: style.css)
   Kapsam: p-404, p-default, p-search
   ============================================================ */
:where(html.p-404,html.p-default,html.p-search) .not-found-page{padding:150px 0 110px;background:linear-gradient(180deg,#f3f7fd 0,#fff 520px);color:#141e32}
:where(html.p-404,html.p-default,html.p-search) .not-found-page .container{max-width:900px}
:where(html.p-404,html.p-default,html.p-search) .not-found-page .eyebrow{color:#164ca5;font-size:12px;letter-spacing:.16em}
:where(html.p-404,html.p-default,html.p-search) .not-found-page h1{font-size:clamp(38px,6vw,68px);font-weight:600;line-height:1.1;letter-spacing:-.045em;margin:18px 0 22px}
:where(html.p-404,html.p-default,html.p-search) .not-found-page p{max-width:560px;font-size:16px;line-height:1.8;color:#455670;margin:0 0 30px}
:where(html.p-404,html.p-default,html.p-search) .not-found-actions{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:44px}
:where(html.p-404,html.p-default,html.p-search) .not-found-links{display:flex;flex-wrap:wrap;gap:10px;padding-top:28px;border-top:1px solid #d9e3f1}
:where(html.p-404,html.p-default,html.p-search) .not-found-links a{padding:9px 16px;border:1px solid #d6e1f0;border-radius:999px;color:#234168;font-size:14px;text-decoration:none;background:#fff}
:where(html.p-404,html.p-default,html.p-search) .not-found-links a:hover{color:#124ba5;border-color:#a9c3ea;background:#eef4fd}
:where(html.p-404,html.p-default,html.p-search) .not-found-page a:focus-visible{outline:3px solid #3878d8;outline-offset:3px}
@media(max-width:600px){:where(html.p-404,html.p-default,html.p-search) .not-found-page{padding:110px 0 70px}:where(html.p-404,html.p-default,html.p-search) .not-found-actions .button{flex:1 1 100%}}

/* search.html — arama sonuçları */
:where(html.p-404,html.p-default,html.p-search) .search-page{padding:150px 0 110px;background:linear-gradient(180deg,#f3f7fd 0,#fff 520px);color:#141e32}
:where(html.p-404,html.p-default,html.p-search) .search-page .container{max-width:900px}
:where(html.p-404,html.p-default,html.p-search) .search-page .eyebrow{color:#164ca5;font-size:12px;letter-spacing:.16em}
:where(html.p-404,html.p-default,html.p-search) .search-page h1{font-size:clamp(34px,5vw,56px);font-weight:600;line-height:1.12;letter-spacing:-.04em;margin:16px 0 26px}
:where(html.p-404,html.p-default,html.p-search) .search-form{display:flex;gap:10px;margin-bottom:18px}
:where(html.p-404,html.p-default,html.p-search) .search-form input{flex:1;min-width:0;height:52px;padding:0 16px;border:1px solid #cbd9ed;border-radius:12px;background:#fff;font:inherit;font-size:16px;color:#141e32}
:where(html.p-404,html.p-default,html.p-search) .search-form input:focus{outline:3px solid #3878d8;outline-offset:2px}
:where(html.p-404,html.p-default,html.p-search) .search-status{font-size:14px;color:#61738e;margin:0 0 22px}
:where(html.p-404,html.p-default,html.p-search) .search-results{display:grid;gap:12px;list-style:none;margin:0;padding:0}
:where(html.p-404,html.p-default,html.p-search) .search-results a{display:block;padding:18px 20px;border:1px solid #dce5f1;border-radius:14px;background:#fff;text-decoration:none;color:inherit}
:where(html.p-404,html.p-default,html.p-search) .search-results a:hover{border-color:#a9c3ea;background:#f6f9fe}
:where(html.p-404,html.p-default,html.p-search) .search-results b{display:block;font-size:17px;color:#17243b;margin-bottom:6px}
:where(html.p-404,html.p-default,html.p-search) .search-results span{display:block;font-size:14px;line-height:1.7;color:#455670}
@media(max-width:600px){:where(html.p-404,html.p-default,html.p-search) .search-page{padding:110px 0 70px}:where(html.p-404,html.p-default,html.p-search) .search-form{flex-direction:column}:where(html.p-404,html.p-default,html.p-search) .search-form .button{width:100%}}
:where(html.p-404,html.p-default,html.p-search) .visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ============================================================
   BÖLÜM: components/buttons  (eski: assets/css/components/buttons.css)
   Kapsam: tüm sayfalar
   ============================================================ */
/* Shared button system. Load after page/section styles on every page.
   Action links, filter tabs and icon controls share tokens; navigation and
   interactive cards retain their layout. Product hotspots retain coordinates.
   New action: class="button primary" or class="button secondary". */
:root {
  --button-blue: #0d47a1;
  --button-hover: #083878;
  --button-border: #ccd9eb;
  --button-surface: #f4f7fc;
  --button-radius: 10px;
  --button-height: 44px;
  --button-font: "Plus Jakarta Sans", sans-serif;
}
html:root body :is(
.button, .header-button, .i-nav-cta,
.i-hero-end a, .i-product-body > a, .i-footer-top > a, .i-live-more,
.i-help-shortcuts a, .i-num-link, .i-eco-link,
.i-start-actions a, .i-start-scene-foot a,
.support-page-search button, .document-filters > button, .document-action a,
.download-card button, .document-row button, .application-filter > button,
.application-grid button, .application-result-head a,
.software-grid a, .dependency-list a, .legacy-grid a, .product-card-actions a,
.blog-feature a, .blog-grid a, .resource-path-grid a, .resource-grid a,
.zed-family-switch a,
.quick-tags button, .dist-chip, .product-tabs button,
.i-num-switch button, .i-eco-tab, .page-local-links a,
.i-eco-arrows button, .application-dialog-close,
.coverage-pagination button, .document-pagination button
) {
  box-sizing: border-box;
  min-height: var(--button-height);
  height: auto;
  max-width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 11px 18px;
  border: 1px solid var(--button-border);
  border-radius: var(--button-radius);
  background: var(--button-surface);
  color: var(--button-blue);
  font: 600 14px/20px var(--button-font);
  letter-spacing: 0;
  text-transform: none;
  text-decoration: none;
  text-align: center;
  box-shadow: none;
  cursor: pointer;
  vertical-align: middle;
  transition: background-color .2s ease, border-color .2s ease,
    color .2s ease, box-shadow .2s ease;
}
html:root body :is(
.button, .header-button, .i-nav-cta,
.i-hero-end a, .i-product-body > a, .i-footer-top > a, .i-live-more,
.i-help-shortcuts a, .i-num-link, .i-eco-link,
.i-start-actions a, .i-start-scene-foot a,
.support-page-search button, .document-filters > button, .document-action a,
.download-card button, .document-row button, .application-filter > button,
.application-grid button, .application-result-head a,
.software-grid a, .dependency-list a, .legacy-grid a, .product-card-actions a,
.blog-feature a, .blog-grid a, .resource-path-grid a, .resource-grid a,
.zed-family-switch a,
.quick-tags button, .dist-chip, .product-tabs button,
.i-num-switch button, .i-eco-tab, .page-local-links a,
.i-eco-arrows button, .application-dialog-close,
.coverage-pagination button, .document-pagination button
):hover:not(:disabled):not([aria-disabled="true"]) {
  background: #e8f0fb;
  border-color: var(--button-blue);
  color: var(--button-blue);
  text-decoration: none;
  transform: none;
  box-shadow: 0 4px 12px rgb(13 71 161 / 10%);
}
html:root body :is(
.button.primary, .header-button, .i-nav-cta,
.i-start-primary, .i-hero-end a, .support-page-search button,
.quick-tags button.active, .dist-chip.is-active,
.product-tabs button.active, .i-num-switch button.is-on,
.i-eco-tab[aria-selected="true"], .page-local-links a.active,
.coverage-pagination button.active, .document-pagination button.active
) {
  background: var(--button-blue);
  border-color: var(--button-blue);
  color: #fff;
}
html:root body :is(
.button.primary, .header-button, .i-nav-cta,
.i-start-primary, .i-hero-end a, .support-page-search button,
.quick-tags button.active, .dist-chip.is-active,
.product-tabs button.active, .i-num-switch button.is-on,
.i-eco-tab[aria-selected="true"], .page-local-links a.active,
.coverage-pagination button.active, .document-pagination button.active
):hover:not(:disabled) {
  background: var(--button-hover);
  border-color: var(--button-hover);
  color: #fff;
}
/* Light action on dark photography/footer; identical geometry. */
html:root body :is(
.cta .button.primary, .i-footer-top > a,
.i-start-scene-foot a, .zed-family-switch a, .resource-path-grid article:last-child a
) {
  background: #fff;
  border-color: #fff;
  color: var(--button-blue);
}
html:root body :is(
.cta .button.primary, .i-footer-top > a,
.i-start-scene-foot a, .zed-family-switch a, .resource-path-grid article:last-child a
):hover {
  background: #e8f0fb;
  border-color: #e8f0fb;
  color: var(--button-blue);
}
html:root body :is(
.i-eco-arrows button, .application-dialog-close,
.coverage-pagination button, .document-pagination button
) {
  width: var(--button-height);
  height: var(--button-height);
  min-width: var(--button-height);
  padding: 0;
  flex: 0 0 var(--button-height);
}
/* Header geometry must not enable the desktop-hidden mobile control. */
html:root body :is(a.header-button, a.i-nav-cta) { white-space: nowrap; padding-inline: 16px; }
html:root body :is(.menu-button, .i-menu, .language-toggle) {
  min-height: 44px;
  border-radius: var(--button-radius);
}
html:root body :is(.menu-button, .i-menu) {
  width: 44px; height: 44px;
  border: 1px solid var(--button-border);
  background: var(--button-surface);
  color: var(--button-blue);
}
html:root body :is(.nav-trigger, .language-toggle, .language-menu button) {
  font-family: var(--button-font);
  font-weight: 600;
}
/* Large clickable cards and circular markers keep their function and size. */
html:root body .support-module { border-radius: var(--button-radius); }
html:root body :is(.i-fab-btn, .i-hot.is-active) {
  background: var(--button-blue); border-color: var(--button-blue); color: #fff;
}
html:root body .i-help-go {
  width: 44px; height: 44px;
  background: var(--button-surface); border-color: var(--button-border);
  color: var(--button-blue);
}
html:root body :is(.i-help-option:hover, .i-help-option:focus-within) .i-help-go {
  background: var(--button-blue); border-color: var(--button-blue); color: #fff;
}
/* Wrapping actions fit narrow columns, while existing horizontal tab scrollers remain. */
html:root body :is(.i-num-link, .legacy-grid a, .resource-grid a) { width: fit-content; }
html:root body .i-num-link { margin-top: 20px; }
html:root body button.i-eco-tab { justify-content: flex-start; }
html:root body .i-eco-tab > span { color: inherit; }
html:root body .i-start-actions { flex-wrap: wrap; }
html:root body .i-start-scene-foot a span { margin-left: 0; }
html:root body .support-page-search { gap: 10px; align-items: center; }
html:root body .support-page-search input { border-radius: var(--button-radius); }
html:root body .support-page-search button { width: auto; min-width: 0; flex-shrink: 0; }
html:root body button.application-dialog-close { font-size: 24px; }
html:root body .i-eco-arrows button { font-size: 20px; }
html:root body .product-card-actions { flex-wrap: wrap; gap: 10px; }
html:root body .product-detail-visual-hero .actions .button { font-size: 14px; }
html:root body :is(.i-hero-end a, .i-product-body > a, .i-start-actions a,
  .i-footer-top > a, .button) > span { color: inherit; }
/* Explicit keyboard focus and disabled feedback, including generated controls. */
html:root body :is(button, a):focus-visible {
  outline: 3px solid #4989e7;
  outline-offset: 4px;
}
html:root body :is(
.button, .header-button, .i-nav-cta,
.i-hero-end a, .i-product-body > a, .i-footer-top > a, .i-live-more,
.i-help-shortcuts a, .i-num-link, .i-eco-link,
.i-start-actions a, .i-start-scene-foot a,
.support-page-search button, .document-filters > button, .document-action a,
.download-card button, .document-row button, .application-filter > button,
.application-grid button, .application-result-head a,
.software-grid a, .dependency-list a, .legacy-grid a, .product-card-actions a,
.blog-feature a, .blog-grid a, .resource-path-grid a, .resource-grid a,
.zed-family-switch a,
.quick-tags button, .dist-chip, .product-tabs button,
.i-num-switch button, .i-eco-tab, .page-local-links a,
.i-eco-arrows button, .application-dialog-close,
.coverage-pagination button, .document-pagination button
):is(:disabled, [aria-disabled="true"]) {
  opacity: .42; cursor: not-allowed; box-shadow: none; transform: none;
}
@media (max-width: 1050px) {
  html:root body a.header-button { display: none; }
}
@media (min-width: 861px) and (max-width: 1000px) {
  html:root body a.i-nav-cta { padding-inline: 10px; }
}
@media (max-width: 600px) {
  html:root body .product-detail-visual-hero .actions .button { flex: 1 1 100%; width: 100%; }
  html:root body .i-help-shortcuts a { flex: 1 1 auto; }
  html:root body .i-start-actions a { width: 100%; }
  html:root body .support-page-search button { width: 100%; }
  html:root body button.i-eco-tab { padding-inline: 12px; }
}
@media (prefers-reduced-motion: reduce) {
html:root body :is(
.button, .header-button, .i-nav-cta,
.i-hero-end a, .i-product-body > a, .i-footer-top > a, .i-live-more,
.i-help-shortcuts a, .i-num-link, .i-eco-link,
.i-start-actions a, .i-start-scene-foot a,
.support-page-search button, .document-filters > button, .document-action a,
.download-card button, .document-row button, .application-filter > button,
.application-grid button, .application-result-head a,
.software-grid a, .dependency-list a, .legacy-grid a, .product-card-actions a,
.blog-feature a, .blog-grid a, .resource-path-grid a, .resource-grid a,
.zed-family-switch a,
.quick-tags button, .dist-chip, .product-tabs button,
.i-num-switch button, .i-eco-tab, .page-local-links a,
.i-eco-arrows button, .application-dialog-close,
.coverage-pagination button, .document-pagination button
) { transition: none; }
}

/* Lucide arrow-right, served locally; directional controls share the same shape. */
html:root body .site-arrow {
  display: inline-block;
  position: static;
  width: 20px; height: 20px; min-width: 20px;
  flex: 0 0 20px;
  margin: 0; padding: 0;
  border: 0; border-radius: 0;
  background: currentColor;
  box-shadow: none;
  vertical-align: middle;
  -webkit-mask: url('../img/icons/lucide/arrow-right.svg') center / contain no-repeat;
  mask: url('../img/icons/lucide/arrow-right.svg') center / contain no-repeat;
  transform: none;
  pointer-events: none;
}
html:root body .site-arrow--left { transform: rotate(180deg); }

/* ============================================================
   BÖLÜM: components/footer  (eski: assets/css/components/footer.css)
   Kapsam: tüm sayfalar
   ============================================================ */
/* Shared, continuous footer: one background, one layout, one bottom divider. */
footer.site-footer {
  --footer-gutter: var(--gutter, 24px);
  --footer-line: rgb(178 200 231 / 17%);
  margin: 0;
  padding: 64px 0 18px;
  border: 0;
  background: #0b203d;
  color: #fff;
  font-family: "Plus Jakarta Sans", sans-serif;
  isolation: isolate;
}
.site-footer .footer-container {
  width: min(var(--container, 1240px), calc(100% - var(--footer-gutter) * 2));
  max-width: none;
  margin-inline: auto;
}
.site-footer .footer-layout {
  display: grid;
  grid-template-columns: minmax(300px, 1fr) minmax(0, 2fr);
  gap: clamp(40px, 5vw, 80px);
  align-items: start;
  padding-bottom: 48px;
}
.site-footer .footer-intro { min-width: 0; }
.site-footer .footer-brand-link {
  display: inline-flex;
  align-items: center;
  gap: 22px;
  max-width: 100%;
  color: #fff;
  text-decoration: none;
}
.site-footer .footer-brand-link img {
  display: block;
  width: 142px;
  height: auto;
  filter: brightness(0) invert(1);
}
.site-footer .footer-brand-name {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  font: 400 17px/1.35 "Plus Jakarta Sans", sans-serif;
  letter-spacing: .01em;
  color: #fff;
}
.site-footer .footer-brand-name > span { display: block; white-space: nowrap; }
.site-footer .footer-invitation { margin-top: 30px; }
.site-footer .footer-invitation h2 {
  margin: 0 0 24px;
  color: #fff;
  font: 500 clamp(24px, 2.1vw, 30px)/1.35 "Plus Jakarta Sans", sans-serif;
  letter-spacing: -.035em;
  text-wrap: balance;
}
.site-footer .footer-invitation h2 strong { color: #b8d1f3; font-weight: 400; }
.site-footer .footer-invitation .button { width: fit-content; }
.site-footer .footer-invitation .button span { margin-left: 10px; font-size: 18px; }
.site-footer .footer-navigation {
  display: grid;
  grid-template-columns: 1fr 1fr 1.35fr;
  align-items: start;
  gap: clamp(24px, 3vw, 44px);
  padding-top: 6px;
}
.site-footer .footer-links { min-width: 0; }
.site-footer .footer-links > b {
  display: block;
  margin: 0 0 20px;
  color: #8fadd4;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: .12em;
}
.site-footer .footer-link-list { display: grid; gap: 3px; }
.site-footer .footer-links a {
  position: relative;
  display: block;
  width: fit-content;
  max-width: 100%;
  padding-block: 9px;
  color: #e2eaf6;
  font-size: 14px;
  line-height: 1.5;
  text-decoration: none;
  overflow-wrap: anywhere;
  transition: color .3s ease;
}
.site-footer .footer-links a::after {
  content: '';
  position: absolute;
  inset: auto 0 4px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .3s var(--ease, ease);
}
.site-footer .footer-links a:is(:hover,:focus-visible) { color: #91bcff; }
.site-footer .footer-links a:is(:hover,:focus-visible)::after { transform: scaleX(1); transform-origin: left; }
.site-footer .footer-contact .footer-phone {
  color: #fff;
  font-size: clamp(18px, 1.5vw, 23px);
  line-height: 1.35;
  letter-spacing: -.03em;
  font-weight: 500;
}
.site-footer .footer-contact .footer-email { font-size: 13px; }
.site-footer .footer-hours { display: block; margin-top: 8px; color: #98aecb; font-size: 12px; line-height: 1.7; }
.site-footer .footer-contact .footer-store { display: inline-flex; align-items: center; gap: 16px; margin-top: 17px; color: #b8d1f3; }
.site-footer .footer-store > span { font-size: 18px; }
.site-footer .footer-social { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.site-footer .footer-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid rgb(178 200 231 / 28%);
  border-radius: 50%;
  background: rgb(255 255 255 / 4%);
  color: #e2eaf6;
  transition: color .3s ease, background-color .3s ease, border-color .3s ease;
}
.site-footer .footer-social a::after { content: none; }
.site-footer .footer-social a:is(:hover, :focus-visible) { color: #fff; background: #174fb3; border-color: #699bdf; }
.site-footer .footer-social svg { display: block; width: 20px; height: 20px; flex: none; }
.site-footer .footer-bottom {
  display: grid;
  grid-template-columns: minmax(0,1fr) 100px;
  align-items: center;
  gap: 24px;
  padding-top: 16px;
  border-top: 1px solid var(--footer-line);
  text-transform: none;
  letter-spacing: 0;
}
.site-footer .footer-copyright { color: #a5b7cf; font: 400 12px/1.8 "Plus Jakarta Sans", sans-serif; letter-spacing: 0; text-transform: none; }
.site-footer .footer-bottom > .scroll-reveal-item { opacity: 1; transform: none; filter: none; will-change: auto; }
.site-footer .footer-agency { display: flex; align-items: center; justify-content: flex-end; position: relative; min-height: 44px; width: 100px; }
.site-footer a:focus-visible { outline: 2px solid #8ebaff; outline-offset: 5px; border-radius: 3px; }
@media (max-width: 1100px) {
  .site-footer .footer-layout { grid-template-columns: 1fr; gap: 40px; }
  .site-footer .footer-intro { display: flex; align-items: center; justify-content: space-between; gap: 40px; }
  .site-footer .footer-invitation { margin: 0; }
  .site-footer .footer-invitation h2 { font-size: 24px; margin-bottom: 18px; }
  .site-footer .footer-navigation { grid-template-columns: 1fr 1fr 1.35fr; padding: 0; }
}
@media (max-width: 680px) {
  footer.site-footer { padding-top: 36px; }
  .site-footer .footer-layout { gap: 34px; padding-bottom: 28px; }
  .site-footer .footer-intro { display: block; }
  .site-footer .footer-brand-link { gap: 20px; }
  .site-footer .footer-brand-link img { width: 124px; }
  .site-footer .footer-brand-name { font-size: 16px; }
  .site-footer .footer-invitation { margin-top: 24px; }
  .site-footer .footer-invitation h2 { font-size: 25px; }
  .site-footer .footer-navigation { grid-template-columns: 1fr 1fr; gap: 28px 24px; }
  .site-footer .footer-links > b { font-size: 10px; letter-spacing: .1em; margin-bottom: 12px; }
  .site-footer .footer-links a { font-size: 13px; }
  .site-footer .footer-contact { grid-column: 1 / -1; }
  .site-footer .footer-contact .footer-phone { font-size: 23px; }
  .site-footer .footer-contact .footer-store { margin-top: 12px; }
  .site-footer .footer-bottom { grid-template-columns: minmax(0,1fr) 100px; gap: 12px; }
  .site-footer .footer-copyright { grid-column: 1 / -1; font-size: 11px; }
  .site-footer .footer-agency { grid-column: 2; }
}
@media (max-width: 360px) {
  .site-footer .footer-brand-link img { width: 110px; }
  .site-footer .footer-brand-link { gap: 16px; }
  .site-footer .footer-brand-name { font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) {
  .site-footer *, .site-footer *::after { transition: none !important; }
}
/* Leave the credit clear of the homepage quick-action control. */
body.footer-in-view #quickFab { opacity: 0; visibility: hidden; pointer-events: none; }

/* Legal notice shares the copyright column; the agency mark keeps its position. */
.site-footer .footer-legal { display:flex;align-items:center;flex-wrap:wrap;gap:8px 24px;min-width:0; }
.site-footer .footer-privacy { color:#b8cce6;font-size:12px;line-height:1.8;min-height:44px;display:inline-flex;align-items:center; }
.site-footer .footer-privacy:hover { color:#fff;text-decoration:underline; }
.contact-submit-row .consent a { text-decoration:underline;text-underline-offset:3px; }

/* Verified regional accounts and store links. */
.footer-digital{display:grid;grid-template-columns:1fr 1.5fr;gap:44px;padding:32px 0;border-top:1px solid #ffffff24;margin-top:32px}
.footer-digital h3{font-size:13px;font-weight:500;color:#d6e7fb;margin:0 0 16px}
.footer-social-regions{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.footer-social-group .footer-social{margin:0;gap:8px;flex-wrap:wrap}
.footer-app-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.footer-app>b{font-size:13px;color:white;font-weight:500}
.footer-app>div{display:flex;flex-direction:column;gap:7px;margin-top:12px}
.footer-app a{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:38px;padding:8px 12px;border:1px solid #ffffff30;border-radius:7px;color:#e1ebfa;text-decoration:none;font-size:12px}
.footer-app a:hover{background:#ffffff12;border-color:#95b9ef}
.footer-app a:focus-visible{outline:2px solid #aacdff;outline-offset:3px}
.footer-email{overflow-wrap:anywhere}
@media(max-width:1000px){.footer-digital{grid-template-columns:1fr;gap:28px}.footer-social-regions{max-width:460px}}
@media(max-width:480px){.footer-app-list{grid-template-columns:1fr;gap:20px}.footer-app>div{flex-direction:row;flex-wrap:wrap}.footer-app a{min-width:120px}.footer-digital{margin-top:20px}}

/* Brand colours and original store download badges. */
.site-footer .footer-social a.social-facebook{background:#1877f2;border-color:#5097f4;color:#fff}
.site-footer .footer-social a.social-instagram{background:radial-gradient(circle at 28% 106%,#feda75 0%,#fa7e1e 28%,#d62976 54%,#962fbf 76%,#4f5bd5 100%);border-color:#dc729c;color:#fff}
.site-footer .footer-social a.social-youtube{background:#f00;border-color:#ff6767;color:#fff}
.site-footer .footer-social a.social-linkedin{background:#0a66c2;border-color:#4c9be9;color:#fff}
.site-footer .footer-social a:is(:hover,:focus-visible){transform:translateY(-2px);box-shadow:0 5px 16px #0003;filter:brightness(1.1)}
.footer-app>div{gap:0;margin:4px 0 0 -10px}
.site-footer .footer-app a.footer-store-badge{display:flex;align-items:center;justify-content:center;width:170px;max-width:100%;height:64px;min-height:64px;min-width:0;border:0;padding:0;border-radius:9px;background:transparent;transition:opacity .18s,transform .18s}
.footer-store-badge img{display:block;height:auto;max-width:100%;object-fit:contain}
.footer-store-badge.badge-google img{width:170px}
.footer-store-badge.badge-apple img{width:132px}
.site-footer .footer-app a.footer-store-badge:hover{background:transparent;transform:translateY(-2px);opacity:.88}
@media(max-width:480px){.footer-app>div{flex-wrap:nowrap}.site-footer .footer-app a.footer-store-badge{width:150px;flex:0 1 150px}.footer-store-badge.badge-google img{width:150px}.footer-store-badge.badge-apple img{width:117px}}
@media(prefers-reduced-motion:reduce){.site-footer .footer-social a:is(:hover,:focus-visible),.site-footer .footer-app a.footer-store-badge:hover{transform:none}}
/* Consistent visible badge widths: Google supplies transparent padding in its PNG. */
.footer-app{--footer-badge-width:148px}
.footer-app>div{gap:8px;margin:10px 0 0}
.site-footer .footer-app a.footer-store-badge{width:var(--footer-badge-width);height:54px;min-height:54px;flex:none}
.footer-store-badge.badge-google img{width:calc(var(--footer-badge-width) * 646 / 564);max-width:none;flex:none}
.footer-store-badge.badge-apple img{width:var(--footer-badge-width);max-width:none;flex:none}
.footer-social-group[hidden]{display:none!important}
.footer-social-regions{display:block}
.footer-digital{grid-template-columns:minmax(180px,.6fr) minmax(0,2fr)}
.site-footer .footer-privacy{color:#e2eaf6;font-size:13px;text-decoration:underline;text-underline-offset:4px}
@media(max-width:1000px){.footer-digital{grid-template-columns:1fr}}
@media(max-width:680px){.site-footer .footer-legal{grid-column:1/-1;gap:4px 20px}}
@media(max-width:480px){.footer-app{--footer-badge-width:128px}.site-footer .footer-app a.footer-store-badge{width:var(--footer-badge-width);height:48px;min-height:48px;flex:none}}

/* ============================================================
   BÖLÜM: components/i18n  (eski: assets/css/components/i18n.css)
   Kapsam: tüm sayfalar
   ============================================================ */
/* Keep translated headings and labels within their existing components. */
html:not([lang="tr"]) .i-footer-top h2 { font-size: clamp(44px, 6.5vw, 104px); }
html:not([lang="tr"]) .footer-navigation .footer-links > b { letter-spacing: .07em; }
html:not([lang="tr"]) .i-start-label { white-space: normal; }
@media (min-width: 981px) {
  html:not([lang="tr"]) #heroTitle { font-size: clamp(64px, 6.2vw, 108px); }
}
@media (max-width: 760px) {
  html:not([lang="tr"]) #heroTitle { font-size: clamp(30px, 8vw, 60px); }
  html:not([lang="tr"]) .i-help-option h3 { font-size: clamp(25px, 6vw, 36px); }
}

/* Long localized words must fit the compact layouts without clipping. */
@media (max-width: 480px) {
  .page-hero.blog-hero h1 { font-size: clamp(30px,8.5vw,40px); line-height: 1.15; overflow-wrap: anywhere; }
}
@media (max-width: 400px) {
  html:root body .i-eco-tabs button.i-eco-tab { padding-inline: 10px; gap: 6px; font-size: 12px; }
  .i-eco-tabs .i-eco-tab > svg { display: none; }
}

/* The selected language uses the same flag as the choices below it. */
.language-toggle > .language-current-flag { flex: 0 0 19px; width: 19px; height: 13px; }
.language-flag.flag-tr { background: #e30a17 url('../img/icons/flags/tr.svg') center / cover no-repeat; }
.language-flag.flag-tr::before,.language-flag.flag-tr::after { display: none; }
/* Keep the flag and language control inside compact tablet headers. */
@media (min-width: 801px) and (max-width: 1050px) {
  .header .logo { min-width: 88px; }
  .header .logo > span { display: none; }
  .header .header-actions { flex-shrink: 0; }
}
.language-flag.flag-en { background: #012169 url('../img/icons/flags/en.svg') center / 100% 100% no-repeat; }

/* ============================================================
   BÖLÜM: sections/product-features  (eski: assets/css/sections/product-features.css)
   Kapsam: p-zed-full-plus
   ============================================================ */
/* Zed-FULL plus: original device photo and grouped, accessible feature details. */
:where(html.p-zed-full-plus) .feature-explorer{
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.2fr);
  align-items: start;
  gap: clamp(32px, 5vw, 72px);
}
:where(html.p-zed-full-plus) .feature-explorer .feature-product{
  position: sticky;
  top: 112px;
  margin: 0;
  border: 1px solid #dce6f4;
  border-radius: 20px;
  background: radial-gradient(ellipse at 48% 40%, #dae8ff 0%, #edf4ff 42%, #f7faff 75%);
  overflow: hidden;
}
:where(html.p-zed-full-plus) .feature-product-image{
  display: grid;
  place-items: center;
  aspect-ratio: 1.15;
  padding: clamp(28px, 3vw, 44px);
}
:where(html.p-zed-full-plus) .feature-explorer .feature-product-image img{
  display: block;
  width: 100%;
  height: auto;
  max-height: 340px;
  object-fit: contain;
  mix-blend-mode: multiply;
}
:where(html.p-zed-full-plus) .feature-explorer .feature-product figcaption{
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding: 22px 28px;
  border-top: 1px solid #dce6f4;
  color: #1a3152;
  background: rgb(255 255 255 / 55%);
}
:where(html.p-zed-full-plus) .feature-product figcaption > span{ font-size: 11px; color: #5e7698; }
:where(html.p-zed-full-plus) .feature-product figcaption > strong{ font-size: 16px; font-weight: 600; letter-spacing: -.025em; }
:where(html.p-zed-full-plus) .feature-explorer .feature-accordion{ min-width: 0; }
:where(html.p-zed-full-plus) .feature-explorer .feature-group + .feature-group{ margin-top: 26px; }
:where(html.p-zed-full-plus) .feature-explorer .feature-group > h4{
  margin: 0 0 12px;
  color: #55749d;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: .08em;
}
:where(html.p-zed-full-plus) .feature-explorer .feature-detail{
  margin: 0;
  border: 0;
  border-bottom: 1px solid #dae4f1;
  border-radius: 0;
  background: transparent;
}
:where(html.p-zed-full-plus) .feature-explorer .feature-detail > summary{
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 68px;
  padding: 14px 18px;
  list-style: none;
  cursor: pointer;
  color: #172943;
  border-radius: 10px;
  transition: color .2s ease, background .2s ease;
}
:where(html.p-zed-full-plus) .feature-explorer .feature-detail > summary::-webkit-details-marker{ display: none; }
:where(html.p-zed-full-plus) .feature-explorer .feature-title{ flex: 1; min-width: 0; font-size: 16px; line-height: 1.5; font-weight: 600; letter-spacing: -.025em; }
:where(html.p-zed-full-plus) .feature-explorer .feature-icon{ display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; flex: 0 0 28px; color: #6a85a9; }
:where(html.p-zed-full-plus) .feature-explorer .feature-icon svg{ display: block; width: 24px; height: 24px; }
:where(html.p-zed-full-plus) .feature-explorer .feature-toggle{ position: relative; display: block; width: 28px; height: 28px; flex: 0 0 28px; border: 1px solid #cbd9ec; border-radius: 50%; color: #56779f; transition: transform .2s ease; }
:where(html.p-zed-full-plus) .feature-toggle::before,:where(html.p-zed-full-plus) .feature-toggle::after{ content: ''; position: absolute; background: currentColor; top: 50%; left: 50%; width: 10px; height: 1px; transform: translate(-50%,-50%); }
:where(html.p-zed-full-plus) .feature-toggle::after{ transform: translate(-50%,-50%) rotate(90deg); }
:where(html.p-zed-full-plus) .feature-explorer .feature-detail[open]{ background: #eef5ff; border-bottom-color: transparent; border-radius: 12px; box-shadow: none; }
:where(html.p-zed-full-plus) .feature-explorer .feature-detail[open] > summary{ color: #164c9f; }
:where(html.p-zed-full-plus) .feature-detail[open] .feature-icon{ color: #1c56ae; }
:where(html.p-zed-full-plus) .feature-detail[open] .feature-toggle{ color: #fff; border-color: #1c56ae; background: #1c56ae; transform: rotate(45deg); }
:where(html.p-zed-full-plus) .feature-explorer .feature-detail > summary:hover{ background: rgb(228 237 250 / 60%); }
:where(html.p-zed-full-plus) .feature-explorer .feature-detail > summary:focus-visible{ outline: 2px solid #2465bd; outline-offset: 3px; }
:where(html.p-zed-full-plus) .feature-explorer .feature-description{ padding: 0 26px 23px 62px; }
:where(html.p-zed-full-plus) .feature-explorer .feature-description p{ margin: 0; color: #59718f; font-size: 14px; line-height: 1.8; }
:where(html.p-zed-full-plus) .feature-detail[open] .feature-description{ animation: feature-description-in .2s ease; }
@keyframes feature-description-in { from { opacity: 0; } to { opacity: 1; } }
@media(max-width:800px) {
  :where(html.p-zed-full-plus) .feature-explorer{ grid-template-columns: 1fr; gap: 30px; }
  :where(html.p-zed-full-plus) .feature-explorer .feature-product{ position: static; width: min(100%,480px); margin-inline: auto; }
  :where(html.p-zed-full-plus) .feature-product-image{ aspect-ratio: auto; height: 270px; padding: 24px 40px; }
  :where(html.p-zed-full-plus) .feature-explorer .feature-product-image img{ width: auto; max-width: 100%; max-height: 220px; }
  :where(html.p-zed-full-plus) .feature-explorer .feature-product figcaption{ padding: 18px 24px; }
}
@media(max-width:420px) {
  :where(html.p-zed-full-plus) .feature-product-image{ height: 230px; padding: 24px; }
  :where(html.p-zed-full-plus) .feature-explorer .feature-product-image img{ max-height: 190px; }
  :where(html.p-zed-full-plus) .feature-explorer .feature-detail > summary{ gap: 10px; padding-inline: 12px; }
  :where(html.p-zed-full-plus) .feature-explorer .feature-title{ font-size: 14px; }
  :where(html.p-zed-full-plus) .feature-explorer .feature-description{ padding: 0 18px 22px 50px; }
  :where(html.p-zed-full-plus) .feature-explorer .feature-description p{ font-size: 13px; }
}
@media(prefers-reduced-motion:reduce) {
  :where(html.p-zed-full-plus) .feature-explorer *,:where(html.p-zed-full-plus) .feature-explorer *::before,:where(html.p-zed-full-plus) .feature-explorer *::after{ animation: none !important; transition: none !important; }
}

/* ============================================================
   BÖLÜM: pages/partnership  (eski: assets/css/pages/partnership.css)
   Kapsam: p-kariyer
   ============================================================ */
/* Commercial enquiry hero: readable hierarchy with space for Turkish accents. */
:where(html.p-kariyer) .partnership-page .partnership-hero{
  min-height: auto;
  padding: clamp(124px, 10vw, 150px) 0 clamp(64px, 6vw, 88px);
}
:where(html.p-kariyer) .partnership-hero .breadcrumbs{
  margin-bottom: 36px;
  line-height: 1.7;
}
:where(html.p-kariyer) .partnership-hero .breadcrumbs b{ color: #b4d4ff; }
:where(html.p-kariyer) .partnership-hero > .container > .eyebrow{
  margin-bottom: 20px;
  font-size: 12px;
  line-height: 1.6;
  letter-spacing: .14em;
}
:where(html.p-kariyer) .partnership-page .partnership-hero h1{
  max-width: 960px;
  margin: 0;
  font-size: clamp(34px, 4.6vw, 64px);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -.035em;
  text-transform: none;
  overflow-wrap: break-word;
}
:where(html.p-kariyer) .partnership-page .partnership-hero p{
  max-width: 710px;
  margin-top: 28px;
  font-size: 16px;
  line-height: 1.85;
}
:where(html.p-kariyer) .partnership-hero .partnership-hero-cta{ margin-top: 30px; }
@media (max-width: 650px) {
  :where(html.p-kariyer) .partnership-page .partnership-hero{ padding: 112px 0 56px; }
  :where(html.p-kariyer) .partnership-hero .breadcrumbs{ margin-bottom: 28px; font-size: 12px; }
  :where(html.p-kariyer) .partnership-hero > .container > .eyebrow{ margin-bottom: 18px; }
  :where(html.p-kariyer) .partnership-page .partnership-hero h1{
    font-size: clamp(30px, 7.4vw, 44px);
    line-height: 1.24;
    letter-spacing: -.03em;
  }
  :where(html.p-kariyer) .partnership-page .partnership-hero p{ margin-top: 22px; font-size: 15px; }
  :where(html.p-kariyer) .partnership-hero .partnership-hero-cta{ margin-top: 26px; }
}

/* ============================================================
   BÖLÜM: pages/application-coverage  (eski: assets/css/pages/application-coverage.css)
   Kapsam: p-arac-kapsami
   ============================================================ */
:where(html.p-arac-kapsami) .applications-page{padding:122px 0 76px;background:linear-gradient(135deg,#f3f7fd,#fff 80%);color:#15233b}:where(html.p-arac-kapsami) .app-heading{padding-bottom:32px}:where(html.p-arac-kapsami) .app-heading .breadcrumbs{display:flex;gap:10px;font-size:12px;color:#617590;margin-bottom:32px}:where(html.p-arac-kapsami) .app-heading h1{font-size:clamp(34px,4vw,58px);font-weight:500;line-height:1.16;letter-spacing:-.045em;margin:16px 0}:where(html.p-arac-kapsami) .app-heading>p{max-width:680px;color:#60738d;font-size:15px;line-height:1.8}:where(html.p-arac-kapsami) .app-selection{display:grid;grid-template-columns:1fr 1fr;gap:22px;padding:24px;background:#fff;border:1px solid #d9e4f2;border-radius:18px;box-shadow:0 10px 32px #15386306}:where(html.p-arac-kapsami) .application-browser label{display:block;min-width:0}:where(html.p-arac-kapsami) .application-browser label>span{display:block;margin-bottom:10px;font-size:11px;letter-spacing:.06em;color:#526986;font-weight:600}:where(html.p-arac-kapsami) .application-browser select,:where(html.p-arac-kapsami) .application-browser input{display:block;width:100%;max-width:100%;min-height:48px;border:1px solid #cedceb;border-radius:9px;background:#f7faff;color:#173858;font:500 14px/1.5 "Plus Jakarta Sans",sans-serif;padding:12px}:where(html.p-arac-kapsami) .application-browser input{font-weight:400}:where(html.p-arac-kapsami) .application-browser select:focus-visible,:where(html.p-arac-kapsami) .application-browser input:focus-visible{outline:2px solid #638ed0;outline-offset:2px}:where(html.p-arac-kapsami) .app-panel{margin-top:40px}:where(html.p-arac-kapsami) .app-panel[hidden],:where(html.p-arac-kapsami) .application-browser [hidden]{display:none!important}:where(html.p-arac-kapsami) .app-section-heading{display:flex;justify-content:space-between;align-items:center;gap:22px;margin-bottom:24px}:where(html.p-arac-kapsami) .app-section-heading h2{font-size:clamp(25px,2.8vw,37px);line-height:1.2;font-weight:500;letter-spacing:-.035em;margin:12px 0}:where(html.p-arac-kapsami) .app-section-heading p{font-size:14px;color:#62758d;line-height:1.7;max-width:620px;margin:0}:where(html.p-arac-kapsami) .app-count{color:#5a7593;font-size:12px;white-space:nowrap}:where(html.p-arac-kapsami) .app-brand-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}:where(html.p-arac-kapsami) .app-brand-card{border:1px solid #d9e4f2;border-radius:15px;background:#fff;text-align:left;padding:22px;color:#17324f;cursor:pointer;min-width:0;transition:transform .2s,border-color .2s,box-shadow .2s}:where(html.p-arac-kapsami) .app-brand-card:hover{transform:translateY(-3px);border-color:#789fd4;box-shadow:0 10px 28px #18446c0c}:where(html.p-arac-kapsami) .app-brand-card>header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px}:where(html.p-arac-kapsami) .app-brand-card h3{font-size:20px;line-height:1.3;letter-spacing:-.025em;margin:0;overflow-wrap:anywhere}:where(html.p-arac-kapsami) .app-brand-card .site-arrow{flex-shrink:0;color:#174fa4}:where(html.p-arac-kapsami) .app-brand-fields{display:flex;flex-wrap:wrap;gap:6px}:where(html.p-arac-kapsami) .app-brand-fields span{padding:5px 8px;border-radius:5px;background:#f1f6fc;color:#536f90;font-size:10px;line-height:1.5}:where(html.p-arac-kapsami) .app-brand-card small{display:block;font-size:11px;color:#6b7e95;margin-top:16px}:where(html.p-arac-kapsami) .app-pdf-list{border-top:1px solid #dce6f2;border-bottom:1px solid #dce6f2;margin-bottom:24px;padding:14px 0}:where(html.p-arac-kapsami) .app-pdf-list summary{color:#164ea4;font-size:13px;font-weight:600;cursor:pointer}:where(html.p-arac-kapsami) .app-pdf-links{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px 20px;padding-top:20px}:where(html.p-arac-kapsami) .app-pdf-links a{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:12px;color:#335e91;padding:9px 0;border-bottom:1px solid #e4ebf4}:where(html.p-arac-kapsami) .app-button{display:inline-flex;align-items:center;justify-content:center;gap:16px;background:#174fa4;color:#fff;border:0;border-radius:9px;padding:13px 18px;font:600 13px/1.5 "Plus Jakarta Sans",sans-serif;cursor:pointer;flex-shrink:0}:where(html.p-arac-kapsami) .app-button.secondary{background:#f0f5fb;color:#174fa4;border:1px solid #c9daef}:where(html.p-arac-kapsami) .app-button:disabled{opacity:.4;cursor:default}:where(html.p-arac-kapsami) .app-empty,:where(html.p-arac-kapsami) .app-loading{padding:35px 24px;text-align:center;color:#617590;border:1px dashed #c6d8ed;border-radius:14px;margin-top:24px;font-size:14px;line-height:1.8}:where(html.p-arac-kapsami) .app-module-filters{display:grid;grid-template-columns:.65fr 1.25fr 1fr;gap:16px;margin-bottom:26px;padding:20px;background:white;border:1px solid #d9e4f2;border-radius:14px}:where(html.p-arac-kapsami) .app-module-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}:where(html.p-arac-kapsami) .app-module-card{min-width:0;background:#fff;border:1px solid #b8cbe3;border-radius:16px;overflow:hidden;box-shadow:0 4px 16px #15386306}:where(html.p-arac-kapsami) .app-module-photo{position:relative;display:block;width:100%;height:220px;padding:18px;border:0;border-bottom:1px solid #e5ecf5;background:#f5f7fa;cursor:pointer}:where(html.p-arac-kapsami) .app-module-photo img{display:block;width:100%;height:100%;object-fit:contain}:where(html.p-arac-kapsami) .app-module-photo>span{position:absolute;bottom:12px;right:14px;font-size:11px;color:#174fa4;background:#ffffffec;padding:7px 11px;border:1px solid #d9e4f2;border-radius:22px}:where(html.p-arac-kapsami) .app-module-noimage{height:220px;background:#f1f5fa;display:grid;place-content:center;text-align:center;padding:24px;color:#63758b;font-size:13px}:where(html.p-arac-kapsami) .app-module-noimage a{display:block;color:#174fa4;margin-top:12px}:where(html.p-arac-kapsami) .app-module-copy{padding:22px}:where(html.p-arac-kapsami) .app-module-copy h3{margin:0 0 8px;font-size:26px;font-weight:700;line-height:1.3;color:#142b4d;letter-spacing:-.025em}:where(html.p-arac-kapsami) .app-module-name{color:#385271;font-size:15px;font-weight:500;line-height:1.65;margin:0 0 20px}:where(html.p-arac-kapsami) .app-module-copy dl{margin:0;display:grid;gap:0;border:1px solid #bccde2;border-radius:10px;overflow:hidden}:where(html.p-arac-kapsami) .app-module-copy dl>div{display:grid;grid-template-columns:minmax(140px,38%) minmax(0,1fr);gap:0;border-top:1px solid #cbd8e8}:where(html.p-arac-kapsami) .app-module-copy dl>div:first-child{border-top:0}:where(html.p-arac-kapsami) .app-module-copy dt{margin:0;padding:12px 14px;background:#edf3fb;border-right:1px solid #cbd8e8;font-size:14px;font-weight:700;color:#233f64;line-height:1.65;overflow-wrap:anywhere}:where(html.p-arac-kapsami) .app-module-copy dd{margin:0;padding:12px 14px;font-size:14px;line-height:1.75;color:#263e5a;overflow-wrap:anywhere}:where(html.p-arac-kapsami) .app-pagination{display:flex;align-items:center;justify-content:center;gap:18px;margin-top:30px;font-size:13px;color:#5d7490}:where(html.p-arac-kapsami) .app-cloning-table{width:100%;border-collapse:separate;border-spacing:0;background:#fff;border:1px solid #d9e4f2;border-radius:14px;overflow:hidden}:where(html.p-arac-kapsami) .app-cloning-table th{text-align:left;color:#fff;background:#174fa4;padding:18px 24px;font-size:13px;font-weight:600}:where(html.p-arac-kapsami) .app-cloning-table td{padding:20px 24px;border-top:1px solid #e4ecf5;font-size:13px;line-height:1.8;vertical-align:top;color:#38526e}:where(html.p-arac-kapsami) .app-cloning-table td:first-child{font-weight:600;color:#1d3857;width:55%}:where(html.p-arac-kapsami) .app-cloning-table tr:nth-child(even) td{background:#f7faff}:where(html.p-arac-kapsami) .app-dialog{width:min(1160px,calc(100% - 48px));max-width:none;max-height:calc(100dvh - 48px);padding:0;border:1px solid #ccdbee;border-radius:20px;color:#18334f;background:#fff;box-shadow:0 30px 100px #071d404d;overflow:auto}:where(html.p-arac-kapsami) .app-dialog::backdrop{background:#071b38a6;backdrop-filter:blur(5px)}:where(html.p-arac-kapsami) .app-dialog-top{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:24px 28px;border-bottom:1px solid #e1e9f4;position:sticky;top:0;background:#fff;z-index:3}:where(html.p-arac-kapsami) .app-dialog-top h2{font-size:28px;line-height:1.2;letter-spacing:-.03em;margin:10px 0 0}:where(html.p-arac-kapsami) .app-dialog-close{display:grid;place-items:center;width:44px;height:44px;border:1px solid #d2dfef;border-radius:50%;background:#f5f8fc;color:#22466f;font:300 28px/1 sans-serif;cursor:pointer;flex-shrink:0}:where(html.p-arac-kapsami) .app-dialog-body{padding:24px 28px 28px}:where(html.p-arac-kapsami) .app-dialog-tools{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:20px}:where(html.p-arac-kapsami) .app-dialog-tools p{font-size:13px;color:#617590;margin:0}:where(html.p-arac-kapsami) .app-table-scroll{overflow:auto;border:1px solid #dce6f2;border-radius:10px;max-height:60dvh;overscroll-behavior:contain}:where(html.p-arac-kapsami) .app-obd-table{width:100%;border-collapse:separate;border-spacing:0;font-size:12px;line-height:1.65}:where(html.p-arac-kapsami) .app-obd-table th{position:sticky;top:0;background:#edf3fb;color:#315880;text-align:left;white-space:nowrap;z-index:1;font-size:11px;padding:13px 14px}:where(html.p-arac-kapsami) .app-obd-table td{border-top:1px solid #e5ecf5;padding:13px 14px;vertical-align:top;min-width:90px}:where(html.p-arac-kapsami) .app-obd-table tr:nth-child(even) td{background:#fafcff}:where(html.p-arac-kapsami) .app-obd-table td:first-child{font-weight:600;color:#1b3f66}:where(html.p-arac-kapsami) .app-row-note{display:block;color:#718398;font-weight:400;font-size:10px;max-width:220px;margin-top:6px}:where(html.p-arac-kapsami) .app-source-link{font-size:11px;color:#607d9c;display:inline-block;margin-top:18px}:where(html.p-arac-kapsami) .app-gallery{width:min(1000px,calc(100% - 48px))}:where(html.p-arac-kapsami) .app-gallery-stage{position:relative;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:20px;background:#f4f7fb}:where(html.p-arac-kapsami) .app-gallery-stage>img{width:calc(100% - 116px);height:min(56dvh,550px);object-fit:contain}:where(html.p-arac-kapsami) .app-gallery-arrow{display:grid;place-items:center;flex-shrink:0;width:44px;height:44px;background:white;border:1px solid #cbdcf0;border-radius:50%;color:#174fa4;cursor:pointer}:where(html.p-arac-kapsami) .app-gallery-arrow:disabled{opacity:.35;cursor:default}:where(html.p-arac-kapsami) .app-gallery-bottom{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:16px 24px;color:#60748f;font-size:12px}:where(html.p-arac-kapsami) .app-gallery-bottom a{color:#174fa4;display:flex;align-items:center;gap:15px}:where(html.p-arac-kapsami) .app-gallery-thumbs{display:flex;gap:10px;overflow:auto;padding:0 24px 20px}:where(html.p-arac-kapsami) .app-gallery-thumbs button{width:76px;height:60px;flex-shrink:0;background:#f8faff;border:2px solid transparent;border-radius:8px;padding:4px;cursor:pointer}:where(html.p-arac-kapsami) .app-gallery-thumbs button[aria-current=true]{border-color:#174fa4}:where(html.p-arac-kapsami) .app-gallery-thumbs img{width:100%;height:100%;object-fit:contain}:where(html.p-arac-kapsami) .application-browser button:focus-visible,:where(html.p-arac-kapsami) .app-dialog button:focus-visible,:where(html.p-arac-kapsami) .app-dialog a:focus-visible{outline:3px solid #78a1de;outline-offset:3px}:where(html.p-arac-kapsami) .app-table-scroll:focus-visible{outline:2px solid #174fa4;outline-offset:2px}:where(html.p-arac-kapsami) .app-gallery img.is-error{opacity:.2}
@media(max-width:1000px){:where(html.p-arac-kapsami) .app-brand-grid{grid-template-columns:repeat(2,minmax(0,1fr))}:where(html.p-arac-kapsami) .app-pdf-links{grid-template-columns:repeat(3,minmax(0,1fr))}:where(html.p-arac-kapsami) .app-module-copy dl>div{grid-template-columns:1fr;gap:0}:where(html.p-arac-kapsami) .app-module-copy dt{border-right:0;border-bottom:1px solid #d8e2ef;padding:10px 12px}:where(html.p-arac-kapsami) .app-module-copy dd{padding:10px 12px}}
@media(max-width:650px){:where(html.p-arac-kapsami) .applications-page{padding-top:90px}:where(html.p-arac-kapsami) .app-selection{grid-template-columns:1fr;padding:18px;gap:18px}:where(html.p-arac-kapsami) .app-section-heading{align-items:flex-start;flex-wrap:wrap}:where(html.p-arac-kapsami) .app-panel{margin-top:30px}:where(html.p-arac-kapsami) .app-brand-grid{gap:10px}:where(html.p-arac-kapsami) .app-brand-card{padding:16px 12px}:where(html.p-arac-kapsami) .app-brand-card h3{font-size:16px}:where(html.p-arac-kapsami) .app-brand-fields{gap:4px}:where(html.p-arac-kapsami) .app-brand-fields span{font-size:9px;padding:4px 6px}:where(html.p-arac-kapsami) .app-brand-card small{font-size:10px}:where(html.p-arac-kapsami) .app-pdf-links{grid-template-columns:1fr 1fr}:where(html.p-arac-kapsami) .app-module-filters{grid-template-columns:1fr;padding:16px}:where(html.p-arac-kapsami) .app-module-grid{grid-template-columns:1fr}:where(html.p-arac-kapsami) .app-module-photo{height:200px}:where(html.p-arac-kapsami) .app-module-copy{padding:18px}:where(html.p-arac-kapsami) .app-count{white-space:normal}:where(html.p-arac-kapsami) .app-dialog{width:calc(100% - 20px);max-height:calc(100dvh - 24px);border-radius:14px}:where(html.p-arac-kapsami) .app-dialog-top{padding:16px}:where(html.p-arac-kapsami) .app-dialog-top h2{font-size:23px}:where(html.p-arac-kapsami) .app-dialog-body{padding:16px 12px}:where(html.p-arac-kapsami) .app-dialog-tools{align-items:flex-start;flex-wrap:wrap}:where(html.p-arac-kapsami) .app-obd-table th,:where(html.p-arac-kapsami) .app-obd-table td{padding:10px;font-size:11px}:where(html.p-arac-kapsami) .app-table-scroll{max-height:62dvh}:where(html.p-arac-kapsami) .app-gallery-stage{padding:12px;gap:6px}:where(html.p-arac-kapsami) .app-gallery-stage>img{width:calc(100% - 84px);height:45dvh}:where(html.p-arac-kapsami) .app-gallery-arrow{width:36px;height:44px}:where(html.p-arac-kapsami) .app-gallery-bottom{padding:14px 16px}:where(html.p-arac-kapsami) .app-gallery-thumbs{padding:0 16px 16px}:where(html.p-arac-kapsami) .app-cloning-table thead{display:none}:where(html.p-arac-kapsami) .app-cloning-table tr{display:block;padding:18px;border-top:1px solid #e1eaf5}:where(html.p-arac-kapsami) .app-cloning-table td{display:block;padding:0;border:0;width:100%!important;background:transparent!important}:where(html.p-arac-kapsami) .app-cloning-table td+td{margin-top:12px}:where(html.p-arac-kapsami) .app-cloning-table td::before{content:attr(data-label);display:block;color:#73869d;font-size:10px;font-weight:400;margin-bottom:4px}:where(html.p-arac-kapsami) .app-cloning-table tr:nth-child(even){background:#f7faff}:where(html.p-arac-kapsami) .app-button{padding:12px 15px;font-size:12px}:where(html.p-arac-kapsami) .app-pagination{gap:12px}}
@media(prefers-reduced-motion:reduce){:where(html.p-arac-kapsami) .app-brand-card{transition:none}}

:where(html.p-arac-kapsami) .app-table-hint{display:none}@media(max-width:650px){:where(html.p-arac-kapsami) .app-table-hint{display:block;font-size:11px;line-height:1.6;color:#617590;margin:0 0 12px}:where(html.p-arac-kapsami) .app-section-heading h2{scroll-margin-top:90px}}

/* Consistent dropdowns with a clearly inset disclosure control. */
html:root:where(.p-arac-kapsami) body .application-browser .site-select-trigger{min-height:52px;padding:12px 18px;gap:16px;background:#f7faff;border-radius:10px}
:where(html.p-arac-kapsami) .application-browser .site-select-trigger>i{position:relative;width:28px;height:28px;margin:0;border:0;border-radius:7px;background:#e9f0fa;transform:none;color:#24538e}
:where(html.p-arac-kapsami) .application-browser .site-select-trigger>i::after{content:"";position:absolute;left:10px;top:8px;width:7px;height:7px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);transition:transform .15s}
:where(html.p-arac-kapsami) .application-browser .site-select-trigger[aria-expanded=true]>i::after{transform:translateY(4px) rotate(225deg)}
html:root:where(.p-arac-kapsami) body .application-browser .site-select-trigger:is(:focus-visible,[aria-expanded=true]){outline:2px solid #83a7da;outline-offset:2px;border-color:#83a7da}
:where(html.p-arac-kapsami) .app-pdf-links{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
:where(html.p-arac-kapsami) .app-pdf-item{min-width:0;padding:16px;background:#fff;border:1px solid #dce6f2;border-radius:10px}
:where(html.p-arac-kapsami) .app-pdf-item>span{font-size:14px;font-weight:600;overflow-wrap:anywhere}
:where(html.p-arac-kapsami) .app-pdf-item>div{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:8px}
:where(html.p-arac-kapsami) .app-pdf-links .app-pdf-item a{min-height:44px;padding:8px 0;border:0;font-size:11px;font-weight:600;justify-content:flex-start}
:where(html.p-arac-kapsami) .app-pdf-item a:hover{text-decoration:underline}
:where(html.p-arac-kapsami) .app-pdf-footer{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:24px;padding:20px;border:1px solid #dce6f2;border-radius:12px;background:#f7faff}
:where(html.p-arac-kapsami) .app-pdf-footer strong{font-size:14px;line-height:1.6;font-weight:600}:where(html.p-arac-kapsami) .app-pdf-footer p{margin:6px 0 0;font-size:12px;line-height:1.7;color:#617590}
@media(max-width:800px){:where(html.p-arac-kapsami) .app-pdf-links{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:650px){:where(html.p-arac-kapsami) .app-pdf-footer{align-items:flex-start;flex-direction:column;padding:16px;gap:14px}:where(html.p-arac-kapsami) .app-pdf-footer .app-button{width:100%}:where(html.p-arac-kapsami) .app-pdf-links{grid-template-columns:1fr}:where(html.p-arac-kapsami) .application-browser .site-select-trigger>span{font-size:14px}}
@media(prefers-reduced-motion:reduce){:where(html.p-arac-kapsami) .application-browser .site-select-trigger>i::after{transition:none}}

:where(html.p-arac-kapsami) .app-module-pdf{display:flex;align-items:center;flex-wrap:wrap;gap:12px 18px;margin-top:24px;padding-top:18px;border-top:1px solid #e1e9f4}:where(html.p-arac-kapsami) .app-module-pdf small{font-size:10px;line-height:1.6;color:#70849d}

/* ============================================================
   BÖLÜM: pages/catalog  (eski: assets/css/pages/catalog.css)
   Kapsam: p-urunler
   ============================================================ */
:where(html.p-urunler) .catalog-page{ background: #f8fafd; padding: 120px 0 64px; }
:where(html.p-urunler) .catalog-heading{ padding-block: 30px 38px; }
:where(html.p-urunler) .catalog-heading .breadcrumbs{ display: flex; gap: 12px; align-items: center; margin: 0 0 32px; font-size: 12px; color: #697c96; }
:where(html.p-urunler) .catalog-heading .breadcrumbs b{ font-weight: 500; }
:where(html.p-urunler) .catalog-heading h1{ margin: 14px 0 18px; font-size: clamp(40px,5vw,64px); font-weight: 500; line-height: 1.12; letter-spacing: -.05em; color: #122037; }
:where(html.p-urunler) .catalog-heading > p{ max-width: 660px; margin: 0; color: #5d708b; font-size: 16px; line-height: 1.8; }
:where(html.p-urunler) .catalog-grid{ display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 24px; }
:where(html.p-urunler) .catalog-card{ min-width: 0; background: #fff; border: 1px solid #dce5f1; border-radius: 16px; overflow: hidden; scroll-margin-top: 120px; transition: border-color .25s, box-shadow .25s; }
:where(html.p-urunler) .catalog-card:hover{ border-color: #aac4e7; box-shadow: 0 10px 30px rgb(15 50 95 / 6%); }
:where(html.p-urunler) .catalog-image{ display: flex; align-items: center; justify-content: center; height: 240px; padding: 24px; background: #f2f6fc; }
:where(html.p-urunler) .catalog-image img{ display: block; width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; transition: transform .3s ease; }
:where(html.p-urunler) .catalog-image:hover img{ transform: scale(1.035); }
:where(html.p-urunler) .catalog-copy{ display: flex; flex-direction: column; align-items: flex-start; padding: 26px; height: calc(100% - 240px); }
:where(html.p-urunler) .catalog-category{ color: #23559e; font-size: 11px; font-weight: 600; letter-spacing: .06em; }
:where(html.p-urunler) .catalog-copy h2{ margin: 12px 0; color: #122037; font-size: 28px; letter-spacing: -.04em; font-weight: 600; }
:where(html.p-urunler) .catalog-copy p{ margin: 0 0 20px; color: #65758b; font-size: 14px; line-height: 1.8; }
:where(html.p-urunler) .catalog-tags{ display: flex; flex-wrap: wrap; gap: 6px; list-style: none; padding: 0; margin: auto 0 24px; }
:where(html.p-urunler) .catalog-tags li{ background: #f3f6fa; color: #546b88; border-radius: 5px; padding: 5px 8px; font-size: 10px; line-height: 1.6; }
:where(html.p-urunler) .catalog-copy .button{ width: 100%; justify-content: space-between; }
:where(html.p-urunler) .catalog-support{ display: flex; align-items: center; justify-content: space-between; gap: 32px; margin-top: 36px; padding-block: 36px; border-top: 1px solid #dce5f1; }
:where(html.p-urunler) .catalog-support h2{ font-size: 24px; font-weight: 500; margin: 0 0 12px; letter-spacing: -.03em; }
:where(html.p-urunler) .catalog-support p{ font-size: 14px; color: #65758b; margin: 0; }
:where(html.p-urunler) .catalog-support .button{ width: fit-content; flex-shrink: 0; }
@media(max-width:1000px) { :where(html.p-urunler) .catalog-grid{ grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media(max-width:600px) { :where(html.p-urunler) .catalog-page{ padding-top: 80px; } :where(html.p-urunler) .catalog-grid{ grid-template-columns: 1fr; gap: 20px; } :where(html.p-urunler) .catalog-image{ height: 230px; } :where(html.p-urunler) .catalog-copy{ height: auto; padding: 24px; } :where(html.p-urunler) .catalog-support{ flex-direction: column; align-items: flex-start; } }
@media(prefers-reduced-motion:reduce) { :where(html.p-urunler) .catalog-card,:where(html.p-urunler) .catalog-image img{ transition: none; } }

/* ============================================================
   BÖLÜM: components/mobile-navigation  (eski: assets/css/components/mobile-navigation.css)
   Kapsam: tüm sayfalar
   ============================================================ */
/* Consistent mobile menu; desktop dropdowns keep their existing design. */
header.mobile-nav-header { height: 68px; background: #fff; transform: none; }
header.i-nav.mobile-nav-header { padding: 0 20px; }
header.mobile-nav-header .header-inner { height: 68px; }
header.mobile-nav-header :is(.i-logo,.logo) { position: relative; z-index: 3; }
header.mobile-nav-header :is(.i-menu,.menu-button) { position: relative; z-index: 3; flex: none; }
header :is(.nav,.i-nav-links).is-mobile-menu {
  position: fixed;
  inset: 68px 0 auto auto;
  width: min(50vw, 320px);
  height: auto;
  max-height: calc(100dvh - 80px);
  margin: 0;
  padding: 8px 12px max(16px, env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  touch-action: pan-y pinch-zoom;
  -webkit-overflow-scrolling: touch;
  background: #fff;
  border-top: 1px solid #dce6f2;
  border-radius: 0 0 0 16px;
  box-shadow: -12px 16px 32px rgb(13 40 76 / 12%);
  backdrop-filter: none;
  z-index: 2;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: none;
  clip-path: inset(0 0 0 100%);
  transition: opacity .2s ease, clip-path .2s ease, visibility .2s ease;
}
header :is(.nav,.i-nav-links).is-mobile-menu.open { opacity: 1; visibility: visible; pointer-events: auto; transform: none; clip-path: inset(0); }
header :is(.nav,.i-nav-links).is-mobile-menu > .nav-group { width: 100%; flex: none; margin: 0; border-bottom: 1px solid #e3eaf4; }
header :is(.nav,.i-nav-links).is-mobile-menu :is(.nav-trigger,.nav-direct) {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 48px;
  height: auto;
  padding: 12px 2px;
  font: 600 14px/1.5 "Plus Jakarta Sans",sans-serif;
  letter-spacing: -.025em;
  text-transform: none;
  color: #25364d;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  flex: none;
}
header :is(.nav,.i-nav-links).is-mobile-menu > .nav-direct { border-bottom: 1px solid #e3eaf4; }
header :is(.nav,.i-nav-links).is-mobile-menu :is(.nav-trigger,.nav-direct)::after { display: none; }
header :is(.nav,.i-nav-links).is-mobile-menu :is(.nav-group.open,.nav-group.active) > .nav-trigger,
header :is(.nav,.i-nav-links).is-mobile-menu .nav-direct.active { color: #0d47a1; }
header :is(.nav,.i-nav-links).is-mobile-menu .nav-trigger > i { margin-right: 4px; width: 7px; height: 7px; flex: 0 0 7px; }
header :is(.nav,.i-nav-links).is-mobile-menu .nav-dropdown {
  position: static;
  inset: auto;
  display: none;
  width: 100%;
  max-height: none;
  padding: 0 0 14px;
  overflow: visible;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: none;
  transition: none;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}
header :is(.nav,.i-nav-links).is-mobile-menu .nav-group.open > .nav-dropdown { display: block; max-height: none; padding: 0 0 14px; transform: none; }
header :is(.nav,.i-nav-links).is-mobile-menu .nav-dropdown-intro { display: none; }
header :is(.nav,.i-nav-links).is-mobile-menu .nav-dropdown-links { display: grid; grid-template-columns: minmax(0,1fr); gap: 6px; padding-left: 0;  }
header :is(.nav,.i-nav-links).is-mobile-menu .nav-dropdown-links a { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 4px; position: relative; min-height: 44px; width: 100%; padding: 10px 8px; background: #f4f7fc; border: 1px solid transparent; border-radius: 8px; text-align: left; }
header :is(.nav,.i-nav-links).is-mobile-menu .nav-dropdown-links a b { font-size: 12px; line-height: 1.5; font-weight: 600; color: #172b49; overflow-wrap: anywhere; }
header :is(.nav,.i-nav-links).is-mobile-menu .nav-dropdown-links a small { display: none; font-size: 11px; line-height: 1.6; font-weight: 400; color: #60718a; }
header :is(.nav,.i-nav-links).is-mobile-menu .nav-dropdown-links a i { display: none; position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: #0d47a1; font-size: 16px; }
header :is(.nav,.i-nav-links).is-mobile-menu .nav-dropdown-links a:is(:hover,:focus-visible,.active) { background: #eaf2ff; border-color: #ccddf7; }
header :is(.nav,.i-nav-links).is-mobile-menu .mobile-nav-tools { display: grid; flex: none; gap: 20px; width: 100%; padding-top: 24px; margin-top: auto; }
header :is(.nav,.i-nav-links).is-mobile-menu .mobile-nav-tools > a { display: flex; align-items: center; justify-content: center; min-height: 46px; padding: 10px 8px; color: #fff; background: #0d47a1; border: 1px solid #0d47a1; border-radius: 10px; text-decoration: none; }
header :is(.nav,.i-nav-links).is-mobile-menu .mobile-nav-tools > a b { font-size: 12px; line-height: 1.5; color: inherit; }
header :is(.nav,.i-nav-links).is-mobile-menu .mobile-nav-tools > a span { display: none; }
header :is(.nav,.i-nav-links).is-mobile-menu :is(a,button):focus-visible { outline: 2px solid #377ae0; outline-offset: 2px; }
body.mobile-navigation-open #quickFab { visibility: hidden; opacity: 0; pointer-events: none; }
body.mobile-navigation-open :is(.header,.i-nav) { transform: none !important; background: #fff; }
@media (prefers-reduced-motion: reduce) { header :is(.nav,.i-nav-links).is-mobile-menu { transition: none; } }

header.mobile-nav-header :is(a,button) { touch-action: manipulation; }

/* Language selection stays beside the menu button, outside the drawer. */
header.i-nav.mobile-nav-header { display: flex; justify-content: flex-start; }
header.mobile-nav-header .mobile-header-language {
  display: inline-flex; flex: none; margin-left: auto; margin-right: 10px; z-index: 4;
}
header.mobile-nav-header :is(.i-menu,.menu-button) { margin-left: 0; }
header.mobile-nav-header .mobile-header-language .language-toggle {
  min-width: 56px; height: 44px; padding: 0 8px; gap: 8px;
  font-size: 12px; border-radius: 10px;
}
header.mobile-nav-header .mobile-header-language .language-menu {
  width: min(210px, calc(100vw - 32px)); max-height: calc(100dvh - 86px);
  overflow-y: auto; overscroll-behavior: contain;
}
header.mobile-nav-header .mobile-header-language .language-menu button { min-height: 44px; }
.mobile-nav-backdrop { position: fixed; inset: 68px 0 auto; height: calc(100dvh - 68px); z-index: 1; background: rgb(15 35 65 / 16%); }
.mobile-nav-backdrop[hidden] { display: none; }

/* ============================================================
   BÖLÜM: sections/video-hero  (eski: assets/css/sections/video-hero.css)
   Kapsam: p-index
   ============================================================ */
/* One cinematic banner: native background video and a 45% navy overlay. */
:where(html.p-index) .i-intro-film-hero{
  --film-header-height: 82px;
  --film-overlay-opacity: .45;
  position: relative;
  isolation: isolate;
  min-height: 100svh;
  min-height: 100dvh;
  margin-top: 0;
  overflow: hidden;
  background: #071a34;
  color: #fff;
}
:where(html.p-index) .i-intro-film-media,:where(html.p-index) .i-intro-film-overlay{ position: absolute; inset: 0; pointer-events: none; }
:where(html.p-index) .i-intro-film-media{ z-index: -2; }
:where(html.p-index) .i-intro-film-media :is(img,video){ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
:where(html.p-index) .i-intro-film-media video{ opacity: 0; transition: opacity .7s ease; }
:where(html.p-index) .i-intro-film-hero.is-video-ready video{ opacity: 1; }
:where(html.p-index) .i-intro-film-overlay{ z-index: -1; opacity: var(--film-overlay-opacity); background: #04152d; }
:where(html.p-index) .i-intro-film-container{ position: relative; display: flex; align-items: center; justify-content: flex-start; width: calc(100% - var(--gutter) * 2); max-width: var(--container); min-height: inherit; margin-inline: auto; padding-block: calc(var(--film-header-height) + 60px) 140px; }
:where(html.p-index) .i-intro-film-copy{ width: 100%; max-width: 780px; text-align: left; }
:where(html.p-index) .i-intro-film-eyebrow{ display: flex; justify-content: flex-start; align-items: center; gap: 12px; margin-bottom: 26px; color: #c0d4ef; font: 600 11px/1.8 var(--body); letter-spacing: .16em; }
:where(html.p-index) .i-intro-film-eyebrow i{ width: 22px; height: 1px; background: #a1c4f1; }
:where(html.p-index) .i-intro-film-copy h1{ margin: 0; color: #fff; font: 500 clamp(46px,4.5vw,68px)/1.1 var(--display); letter-spacing: -.045em; text-transform: none; text-wrap: balance; text-shadow: 0 2px 24px #0006; }
:where(html.p-index) .i-intro-film-copy h1 > span{ display: block; color: #fff; font-weight: 700; }
:where(html.p-index) .i-intro-film-copy p{ max-width: 580px; margin: 26px 0 0; color: #fff; font: 400 16px/1.8 var(--body); text-shadow: 0 1px 12px #0009; }
:where(html.p-index) .i-intro-film-actions{ display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 12px; margin-top: 32px; }
html:root:where(.p-index) body .i-intro-film-actions .button{ min-width: 184px; min-height: 48px; padding: 13px 22px; }
html:root:where(.p-index) body .i-intro-film-actions .button.primary{ gap: 24px; background: #125bea; border-color: #125bea; color: #fff; box-shadow: 0 8px 28px #0352e940; }
html:root:where(.p-index) body .i-intro-film-actions .button.primary:hover{ background: #084bd0; border-color: #084bd0; color: #fff; }
html:root:where(.p-index) body .i-intro-film-actions .button.secondary{ gap: 12px; background: #ffffff0b; border-color: #ffffff70; color: #fff; backdrop-filter: blur(10px); }
html:root:where(.p-index) body .i-intro-film-actions .button.secondary:hover{ background: #ffffff24; border-color: #fff; }
:where(html.p-index) .i-intro-film-bottom{ position: absolute; inset: auto 0 26px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 20px; min-height: 88px; }
:where(html.p-index) .i-intro-film-hero :is(a,button):focus-visible{ outline: 2px solid #c3ddff; outline-offset: 5px; }
@media (min-width: 1221px) { :where(html.p-index) .i-intro-film-hero{ --film-header-height: 70px; } }
@media (max-width: 860px) {
  :where(html.p-index) .i-intro-film-hero{ --film-header-height: 68px; }
  :where(html.p-index) .i-intro-film-container{ padding-block: calc(var(--film-header-height) + 48px) 130px; }
  :where(html.p-index) .i-intro-film-copy h1{ font-size: clamp(42px,6.2vw,60px); }
}
@media (max-width: 560px) {
  :where(html.p-index) .i-intro-film-container{ width: calc(100% - 40px); max-width: none; padding-block: calc(var(--film-header-height) + 40px) 140px; }
  :where(html.p-index) .i-intro-film-eyebrow{ max-width: 280px; margin: 0 0 24px; gap: 9px; font-size: 9px; letter-spacing: .11em; }
  :where(html.p-index) .i-intro-film-eyebrow i{ width: 16px; flex: 0 0 16px; }
  :where(html.p-index) .i-intro-film-copy h1{ font-size: clamp(32px,8.5vw,46px); line-height: 1.1; }
  :where(html.p-index) .i-intro-film-copy p{ margin-top: 22px; font-size: 14px; line-height: 1.85; }
  :where(html.p-index) .i-intro-film-actions{ flex-direction: column; align-items: stretch; max-width: 260px; margin: 28px 0 0; gap: 10px; }
  html:root:where(.p-index) body .i-intro-film-actions .button{ min-width: 0; }
  :where(html.p-index) .i-intro-film-bottom{ grid-template-columns: 1fr auto; bottom: 22px; gap: 12px; }
}

/* Home header blends into the film, then returns to the shared white theme. */
:where(html.p-index) body.immersive-home:not(.mobile-navigation-open) header.i-nav.is-over-hero{
  background: transparent;
  border-bottom-color: transparent;
  box-shadow: none;
  backdrop-filter: none;
  color: #fff;
}
:where(html.p-index) body.immersive-home:not(.mobile-navigation-open) .i-nav.is-over-hero .i-logo img{ filter: brightness(0) saturate(100%) invert(19%) sepia(72%) saturate(2496%) hue-rotate(207deg) brightness(93%) contrast(94%); }
:where(html.p-index) body.immersive-home:not(.mobile-navigation-open) .i-nav.is-over-hero :is(.i-logo span,.nav-trigger,.nav-direct,.language-toggle,.i-language){ color: #fff; }
:where(html.p-index) body.immersive-home:not(.mobile-navigation-open) .i-nav.is-over-hero :is(.nav-trigger,.nav-direct)::after{ background: #fff; }
:where(html.p-index) body.immersive-home:not(.mobile-navigation-open) .i-nav.is-over-hero .language-toggle:is(:hover,[aria-expanded="true"]){ background: #ffffff1a; }
:where(html.p-index) body.immersive-home:not(.mobile-navigation-open) .i-nav.is-over-hero .i-menu{ background: #ffffff0b; border-color: #ffffff60; }
:where(html.p-index) body.immersive-home:not(.mobile-navigation-open) .i-nav.is-over-hero .i-menu span{ background: #fff; }
:where(html.p-index) body.immersive-home:not(.mobile-navigation-open) .i-nav.is-over-hero :is(.i-logo,.nav-trigger,.nav-direct,.language-toggle):focus-visible{ outline: 2px solid #fff; outline-offset: 4px; }

/* The scrolling cue links to the next section and supports keyboard/touch activation. */
:where(html.p-index) .i-intro-film-scroll-cue{ position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 8px; color: #fff; pointer-events: auto; cursor: pointer; min-width: 48px; text-decoration: none; border-radius: 20px; filter: drop-shadow(0 2px 5px #0008); }
:where(html.p-index) .i-intro-film-scroll-mouse{ display: block; position: relative; width: 30px; height: 48px; border: 2px solid #fff; border-radius: 16px; }
:where(html.p-index) .i-intro-film-scroll-mouse i{ position: absolute; top: 9px; left: 12px; width: 2px; height: 9px; background: #fff; border-radius: 2px; animation: iea-film-scroll 1.8s ease-in-out infinite; }
:where(html.p-index) .i-intro-film-scroll-cue svg{ width: 24px; height: 24px; stroke-width: 2; animation: iea-film-chevron 1.8s ease-in-out infinite; }
@keyframes iea-film-scroll { 0%,100% { transform: translateY(0); opacity: .35; } 50% { transform: translateY(8px); opacity: 1; } }
@keyframes iea-film-chevron { 0%,100% { transform: translateY(0); opacity: .5; } 50% { transform: translateY(3px); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { :where(html.p-index) .i-intro-film-media video{ transition: none; } :where(html.p-index) .i-intro-film-scroll-cue :is(i,svg){ animation: none; } }

:where(html.p-index) .i-intro-film-actions > .button svg{ width: 20px; height: 20px; flex: 0 0 20px; }
:where(html.p-index) .i-hero-partner-link{ color: #fff; font-size: 14px; padding: 12px 0; text-decoration: underline; text-underline-offset: 5px; }
:where(html.p-index) .i-hero-partner-link:focus-visible{ outline: 2px solid #fff; outline-offset: 5px; }

/* ============================================================
   BÖLÜM: components/scroll-reveal  (eski: assets/css/components/scroll-reveal.css)
   Kapsam: tüm sayfalar
   ============================================================ */
/* Visible by default; only offscreen items registered by JS are deferred. */
.site-scroll-pending { opacity: 0 !important; }
@media (prefers-reduced-motion: reduce) {
  .site-scroll-pending { opacity: 1 !important; }
}
@media print {
  .site-scroll-pending { opacity: 1 !important; }
}

/* ============================================================
   BÖLÜM: sections/numbers  (eski: assets/css/sections/numbers.css)
   Kapsam: p-index
   ============================================================ */
/* Numbers share a single heading and a consistent action baseline. */
:where(html.p-index) .i-numbers .i-num-top{ display: block; margin-bottom: 44px; }
:where(html.p-index) .i-numbers .i-num-head h2{ max-width: 920px; }
:where(html.p-index) .i-numbers .i-num-row{ min-width: 0; }
:where(html.p-index) .i-numbers .i-num-row p{ margin-bottom: 24px; }
html:root:where(.p-index) body .i-numbers .i-num-link{ align-self: flex-start; flex-shrink: 0; width: 180px; max-width: 100%; min-height: 44px; margin-top: auto; justify-content: space-between; }
@media (min-width: 621px) and (max-width: 1200px) {
  :where(html.p-index) .i-numbers .i-num-rows{ grid-template-columns: repeat(2,minmax(0,1fr)); }
  :where(html.p-index) .i-numbers .i-num-row:nth-child(odd){ padding-left: 0; border-left: 0; }
  :where(html.p-index) .i-numbers .i-num-row:nth-child(n+3){ border-top: 1px solid var(--line); }
}
@media (max-width: 620px) { :where(html.p-index) .i-numbers .i-num-top{ margin-bottom: 30px; } }

:where(html.p-index) .i-num-source{ margin: 24px 0 0; max-width: 850px; font-size: 13px; line-height: 1.7; color: var(--muted, #5c6f8b); }

/* ============================================================
   BÖLÜM: sections/product-story  (eski: assets/css/sections/product-story.css)
   Kapsam: p-zed-full-plus
   ============================================================ */
/* Full-bleed scenes composed around the real product, with a clear copy area. */
:where(html.p-zed-full-plus) .product-story{position:relative;isolation:isolate;display:flex;align-items:center;min-height:clamp(520px,43vw,760px);padding:80px max(6vw,24px);overflow:hidden;scroll-margin-top:82px;background:#e9edf1}
:where(html.p-zed-full-plus) .product-story-background{display:block;position:absolute;inset:0;z-index:-2}
:where(html.p-zed-full-plus) .product-story-background img{display:block;width:100%;height:100%;object-fit:cover;object-position:center;border-radius:0;filter:none;transform:none}
:where(html.p-zed-full-plus) .product-story::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none}
:where(html.p-zed-full-plus) .product-story--technology::before{background:linear-gradient(90deg,rgba(243,246,249,.94),rgba(243,246,249,.78) 29%,rgba(243,246,249,.2) 48%,transparent 59%)}
:where(html.p-zed-full-plus) .product-story-copy{position:relative;width:44%;max-width:660px;min-width:0}
:where(html.p-zed-full-plus) .product-story-copy .i-kicker{display:block;margin-bottom:24px;color:#174da5}
:where(html.p-zed-full-plus) .product-story h2{margin:0;font-family:var(--display);font-size:clamp(38px,4.45vw,76px);font-weight:400;line-height:1.2;letter-spacing:-.035em;color:#172433;text-wrap:balance}
:where(html.p-zed-full-plus) .product-story h2>span{display:block}
:where(html.p-zed-full-plus) .product-story h2 b{font-weight:500;color:#1756b9}
:where(html.p-zed-full-plus) .product-story--field{background:#0c1722}
:where(html.p-zed-full-plus) .product-story--field::before{background:linear-gradient(90deg,rgba(7,18,31,.86),rgba(7,18,31,.58) 35%,rgba(7,18,31,.08) 59%,transparent 75%)}
:where(html.p-zed-full-plus) .product-story--field h2{color:#fff}
:where(html.p-zed-full-plus) .product-story--field h2 b{color:#8dbaff}
@media(min-width:861px) and (max-width:1100px){:where(html.p-zed-full-plus) .product-story{min-height:480px;padding-inline:5%}:where(html.p-zed-full-plus) .product-story-copy{width:43%}:where(html.p-zed-full-plus) .product-story h2{font-size:42px}}
@media(max-width:860px){
 :where(html.p-zed-full-plus) .product-story{align-items:flex-end;min-height:clamp(560px,145vw,700px);padding:360px 28px 40px}
 :where(html.p-zed-full-plus) .product-story-background{bottom:auto;height:min(100vw,480px)}
 :where(html.p-zed-full-plus) .product-story-background img{object-position:85% center}
 :where(html.p-zed-full-plus) .product-story-background::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 76%,#e9edf1)}
 :where(html.p-zed-full-plus) .product-story::before{display:none}
 :where(html.p-zed-full-plus) .product-story-copy{width:100%;max-width:640px}
 :where(html.p-zed-full-plus) .product-story-copy .i-kicker{margin-bottom:18px;font-size:12px}
 :where(html.p-zed-full-plus) .product-story h2{font-size:clamp(34px,6vw,48px);line-height:1.18;letter-spacing:-.025em}
 :where(html.p-zed-full-plus) .product-story--field .product-story-background img{object-position:81% center}
 :where(html.p-zed-full-plus) .product-story--field .product-story-background::after{background:linear-gradient(180deg,transparent 65%,#0c1722)}
 :where(html.p-zed-full-plus) .product-story--field{min-height:clamp(530px,138vw,650px)}
}
@media(max-width:420px){:where(html.p-zed-full-plus) .product-story{padding:310px 24px 34px;min-height:560px}:where(html.p-zed-full-plus) .product-story--field{min-height:520px}:where(html.p-zed-full-plus) .product-story h2{font-size:35px}:where(html.p-zed-full-plus) .product-story-copy .i-kicker{font-size:11px}}
/* Retain a visible word gap when translation splits accent text into nodes. */
:where(html.p-zed-full-plus) .product-story h2 b{margin-inline:.08em}

/* ============================================================
   BÖLÜM: components/zed-premium  (eski: assets/css/components/zed-premium.css)
   Kapsam: p-index, p-zed-full-plus
   ============================================================ */
/* Keep the studio photograph's original colors, proportions and soft shadow. */
:where(html.p-index,html.p-zed-full-plus) .i-product-card:first-child .zed-premium-media{
  background: #f4f7fc;
}
:where(html.p-index,html.p-zed-full-plus) .i-product-card:first-child .zed-premium-media img,:where(html.p-index,html.p-zed-full-plus) .i-product-card:first-child:hover .zed-premium-media img{
  padding: 0;
  object-fit: contain;
  filter: none;
}
:where(html.p-index,html.p-zed-full-plus) .zed-premium-media::after{
  display: none;
}
:where(html.p-index,html.p-zed-full-plus) .product-detail-visual-hero .zed-premium-visual{
  height: auto;
  min-width: 0;
}
:where(html.p-index,html.p-zed-full-plus) .product-detail-visual-hero .zed-premium-visual img{
  width: 100%;
  max-width: 100%;
  height: auto;
  max-height: 100%;
  object-fit: contain;
  filter: none;
  border-radius: 20px;
}
:where(html.p-index,html.p-zed-full-plus) .product-detail-visual-hero .zed-premium-visual::after{
  display: none;
}
/* Longer descriptive titles must fit the narrowest translated layouts. */
:where(html.p-index,html.p-zed-full-plus) .capability-story .story-copy{
  min-width: 0;
}
:where(html.p-index,html.p-zed-full-plus) .capability-story .story-copy > .page-title{
  overflow-wrap: anywhere;
}
:where(html.p-index,html.p-zed-full-plus) .product-detail-visual-hero:has(.zed-premium-visual) .product-page-copy > p{
  font-size: clamp(16px, 1.4vw, 20px);
  line-height: 1.65;
}

/* ============================================================
   BÖLÜM: pages/partnership-form  (eski: assets/css/pages/partnership-form.css)
   Kapsam: p-kariyer
   ============================================================ */
:where(html.p-kariyer) .partnership-trap{ position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
:where(html.p-kariyer) .partnership-form .form-message{ display:block; min-height:1.5em; line-height:1.6; }
:where(html.p-kariyer) .partnership-form [data-state="accepted"]{ color:#176445; }
:where(html.p-kariyer) .partnership-form [data-state="invalid"],:where(html.p-kariyer) .partnership-form [data-state="unavailable"],:where(html.p-kariyer) .partnership-form [data-state="rate"],:where(html.p-kariyer) .partnership-form [data-state="session"]{ color:#9b2733; }
:where(html.p-kariyer) .partnership-form [data-state="network"]{ color:#9b2733; }

/* ============================================================
   BÖLÜM: components/select-menu  (eski: assets/css/components/select-menu.css)
   Kapsam: p-arac-kapsami, p-archive, p-index, p-kariyer
   ============================================================ */
:where(html.p-arac-kapsami,html.p-archive,html.p-index,html.p-kariyer) select[data-select-menu][hidden]{ display:none !important; }
html:root:where(.p-arac-kapsami,.p-archive,.p-index,.p-kariyer) body .site-select-trigger{ box-sizing:border-box;display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-width:0;min-height:48px;margin:0;padding:12px 15px;border:1px solid #cbd9ed;border-radius:10px;background:#f7f9fd;color:#1a2d47;font:400 14px/1.5 "Plus Jakarta Sans",sans-serif;text-align:start;text-transform:none;letter-spacing:normal;cursor:pointer; }
:where(html.p-arac-kapsami,html.p-archive,html.p-index,html.p-kariyer) .site-select-trigger > span{ min-width:0;overflow-wrap:anywhere; }
:where(html.p-arac-kapsami,html.p-archive,html.p-index,html.p-kariyer) .site-select-trigger > i{ flex:none;width:7px;height:7px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);margin:0 3px 4px; }
html:root:where(.p-arac-kapsami,.p-archive,.p-index,.p-kariyer) body .site-select-trigger:disabled{ opacity:.5;cursor:default; }
html:root:where(.p-arac-kapsami,.p-archive,.p-index,.p-kariyer) body .site-select-trigger:is(:focus-visible,[aria-expanded=true]){ border-color:#164cad;outline:2px solid #164cad;outline-offset:2px; }
html:root:where(.p-arac-kapsami,.p-archive,.p-index,.p-kariyer) body .site-select-trigger[aria-invalid=true]{ border-color:#a32d35; }
:where(html.p-arac-kapsami,html.p-archive,html.p-index,html.p-kariyer) .site-select-panel{ position:fixed;z-index:1200;box-sizing:border-box;padding:6px;background:#fff;color:#1a2d47;border:1px solid #cbd9ed;border-radius:12px;box-shadow:0 14px 40px rgb(20 48 90 / 18%);overflow:hidden; }
:where(html.p-arac-kapsami,html.p-archive,html.p-index,html.p-kariyer) .site-select-panel[hidden],:where(html.p-arac-kapsami,html.p-archive,html.p-index,html.p-kariyer) .site-select-search[hidden],:where(html.p-arac-kapsami,html.p-archive,html.p-index,html.p-kariyer) .site-select-empty[hidden]{ display:none !important; }
html:root:where(.p-arac-kapsami,.p-archive,.p-index,.p-kariyer) body .site-select-search{ box-sizing:border-box;display:block;width:100%;height:42px;min-height:42px;margin:0 0 8px;padding:8px 12px;border:1px solid #cad8ec;border-radius:7px;font:400 16px/1.5 "Plus Jakarta Sans",sans-serif;color:#1a2d47;background:#f6f9fd; }
:where(html.p-arac-kapsami,html.p-archive,html.p-index,html.p-kariyer) .site-select-options{ position:relative;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#9cb3d3 #f1f5fb;touch-action:pan-y; }
:where(html.p-arac-kapsami,html.p-archive,html.p-index,html.p-kariyer) .site-select-option{ box-sizing:border-box;position:relative;display:flex;align-items:center;min-height:44px;padding:10px 32px 10px 12px;border-radius:6px;font:400 14px/1.5 "Plus Jakarta Sans",sans-serif;overflow-wrap:anywhere;cursor:pointer; }
:where(html.p-arac-kapsami,html.p-archive,html.p-index,html.p-kariyer) .site-select-option:is(.is-active,:hover){ background:#edf3fc; }
:where(html.p-arac-kapsami,html.p-archive,html.p-index,html.p-kariyer) .site-select-option[aria-selected=true]{ background:#e3edfd;color:#164cad;font-weight:600; }
:where(html.p-arac-kapsami,html.p-archive,html.p-index,html.p-kariyer) .site-select-option[aria-selected=true]::after{ content:'✓';position:absolute;right:12px; }
:where(html.p-arac-kapsami,html.p-archive,html.p-index,html.p-kariyer) .site-select-option[aria-disabled=true]{ opacity:.45;cursor:default; }
:where(html.p-arac-kapsami,html.p-archive,html.p-index,html.p-kariyer) .site-select-empty{ margin:10px;font-size:14px; }
@media(max-width:860px){html:root:where(.p-arac-kapsami,.p-archive,.p-index,.p-kariyer) body .site-select-trigger,:where(html.p-arac-kapsami,html.p-archive,html.p-index,html.p-kariyer) .site-select-option{ font-size:16px; }}

:where(html.p-arac-kapsami,html.p-archive,html.p-index,html.p-kariyer) .partnership-form .field[hidden]{ display:none; }

/* ============================================================
   BÖLÜM: pages/blog-article  (eski: assets/css/pages/blog-article.css)
   Kapsam: p-blog-article
   ============================================================ */
:where(html.p-blog-article) .guide-main{ padding-top:78px; }
@media(max-width:800px){:where(html.p-blog-article) .guide-main{ padding-top:68px; }}
:where(html.p-blog-article) .guide-heading{ padding:clamp(32px,5vw,72px) 0 36px; background:linear-gradient(120deg,#f2f6fc,#fff); border-bottom:1px solid #dce6f5; }
:where(html.p-blog-article) .guide-breadcrumbs{ display:flex;flex-wrap:wrap;gap:10px;margin-bottom:32px;font-size:13px;color:#5d6f89; }
:where(html.p-blog-article) .guide-heading h1{ max-width:980px;font-size:clamp(32px,4.2vw,64px);line-height:1.16;letter-spacing:-.04em;text-transform:none;font-weight:600;margin:20px 0 24px;overflow-wrap:break-word; }
:where(html.p-blog-article) .guide-heading p{ max-width:800px;font-size:18px;line-height:1.8;color:#5d6f89; }
:where(html.p-blog-article) .guide-layout{ display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:56px;padding-top:48px;align-items:start; }
:where(html.p-blog-article) .guide-article{ min-width:0; }
:where(html.p-blog-article) .guide-article figure{ margin:0 0 40px; }
:where(html.p-blog-article) .guide-article figure img{ display:block;width:100%;height:auto;border-radius:20px; }
:where(html.p-blog-article) .guide-article figcaption{ font-size:12px;line-height:1.5;color:#65768d;padding:12px 0;border-bottom:1px solid #dce6f5; }
:where(html.p-blog-article) .guide-body{ max-width:760px; }
:where(html.p-blog-article) .guide-body section{ margin-bottom:42px;scroll-margin-top:100px; }
:where(html.p-blog-article) .guide-body h2{ font-size:clamp(24px,2.3vw,32px);line-height:1.35;letter-spacing:-.025em;text-transform:none;margin:0 0 18px; }
:where(html.p-blog-article) .guide-body p{ font-size:17px;line-height:1.9;color:#455771;margin:0 0 18px; }
:where(html.p-blog-article) .guide-aside{ position:sticky;top:110px; }
:where(html.p-blog-article) .guide-toc{ border:1px solid #dce6f5;background:#f5f8fd;padding:24px;border-radius:16px; }
:where(html.p-blog-article) .guide-toc h2{ font-size:15px;margin:0 0 14px; }
:where(html.p-blog-article) .guide-toc a,:where(html.p-blog-article) .guide-sources a{ display:block;min-height:44px;padding:12px 0;line-height:1.6;color:#1549a8;border-bottom:1px solid #dce6f5;font-size:14px;overflow-wrap:anywhere; }
:where(html.p-blog-article) .guide-toc .guide-back{ margin-top:12px;border:0; }
:where(html.p-blog-article) .guide-related{ padding:48px 0 72px;background:#f5f8fd; }
:where(html.p-blog-article) .guide-related h2{ font-size:32px;line-height:1.3;margin:16px 0 28px; }
:where(html.p-blog-article) .guide-related .container>div{ display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px; }
:where(html.p-blog-article) .guide-related a{ display:flex;justify-content:space-between;gap:18px;align-items:start;padding:28px;background:#fff;border:1px solid #dce6f5;border-radius:16px;font-size:18px;line-height:1.6;color:#173252; }
:where(html.p-blog-article) .guide-related a:hover{ border-color:#1549a8; }
:where(html.p-blog-article) .guide-related a span{ flex:none;color:#1549a8; }
:where(html.p-blog-article) .guide-main a:focus-visible{ outline:2px solid #1549a8;outline-offset:4px; }
@media(max-width:900px){:where(html.p-blog-article) .guide-layout{grid-template-columns:minmax(0,1fr);gap:28px}:where(html.p-blog-article) .guide-aside{position:static;grid-row:1}:where(html.p-blog-article) .guide-toc{padding:20px}:where(html.p-blog-article) .guide-toc a{font-size:15px}:where(html.p-blog-article) .guide-related .container>div{grid-template-columns:minmax(0,1fr)}:where(html.p-blog-article) .guide-heading p{font-size:16px}:where(html.p-blog-article) .guide-body p{font-size:16px}:where(html.p-blog-article) .guide-article figure img{border-radius:14px}}

:where(html.p-blog-article) .guide-heading h1,:where(html.p-blog-article) .guide-body h2{ text-wrap:balance; }

/* ============================================================
   BÖLÜM: components/mobile-layout  (eski: assets/css/components/mobile-layout.css)
   Kapsam: tüm sayfalar
   ============================================================ */
/* Shared mobile refinements. Load after page styles for consistent localizations. */
@media (max-width: 900px) {
  .i-ecosystem .i-eco-tabs { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
}
@media (max-width: 860px) {
  /* Keep editable controls readable across page-specific font shorthands. */
  input:is([type="search"],[type="text"],[type="email"],[type="tel"],[type="number"],[type="url"],:not([type])),
  select, textarea { font-size: 16px !important; line-height: 1.4; }
  input:is([type="search"],[type="text"],[type="email"],[type="tel"],[type="number"],[type="url"],:not([type])),
  select { min-height: 44px; }
  .i-testimonials-dots button { width: 44px; height: 44px; }
  html:root body .i-eco-arrows button { width: 44px; min-width: 44px; height: 44px; }
}
@media (hover: none) and (pointer: coarse) {
  .i-help-option:focus-within { transform: none; }
}

/* Short statements need space around the copy, not an empty viewport. */
.i-manifesto {
  min-height: 0;
  padding-block: clamp(64px,6vw,104px);
  gap: 28px;
}

@media (max-width: 860px) {
  /* A single reading rhythm, including translated headings and card copy. */
  .page-section,
  .partnership-page .page-section,
  .product-detail-hub,
  .capability-story { padding-block: 52px; }
  .page-hero:not(.partnership-hero) { min-height: 0; padding-top: 108px; padding-bottom: 44px; }
  .product-detail-visual-hero { min-height: 0; padding-block: 108px 44px; }
  .page-section .section-head { margin-bottom: 28px; }
  main :is(.section-head,.product-page-copy,.story-copy,.form-panel) { min-width: 0; }
  main :is(h1,h2,h3) { overflow-wrap: anywhere; }

  .i-help,.i-coverage,.i-live,.i-numbers,.i-products,.i-ecosystem,.i-start,.i-testimonials { padding-block: 52px; }
  .i-manifesto { padding: 52px var(--gutter); gap: 24px; }
  .i-manifesto p { font-size: clamp(27px,6.4vw,38px); line-height: 1.3; }
  .i-manifesto small { max-width: 34ch; font-size: 11px; line-height: 1.7; letter-spacing: .13em; }
  .i-manifesto .i-manifesto-char { opacity: 1 !important; }
  .i-help-inner { gap: 28px; }
  .i-help-intro h2 { font-size: clamp(34px,8vw,44px); }
  .i-help-intro > p { max-width: none; }
  .i-help-product { margin-top: 24px; }
  .i-numbers .i-num-head h2 { font-size: clamp(30px,7vw,42px); }
  .i-numbers .i-num-row { min-height: 0; padding-block: 24px; }
  .i-numbers .i-num-row p { margin-bottom: 18px; }
  .i-products .i-section-head { margin-bottom: 28px; }
  .i-products .i-product-media { height: auto; aspect-ratio: 16 / 10; }
  .i-products .i-product-card:first-child .i-product-media { aspect-ratio: 4 / 3; }
  .i-products .i-product-body { min-height: 0; padding: 24px; }
  .i-products .i-product-body p { min-height: 0; }

  /* Preserve the entire landscape photograph. Copy flows underneath it. */
  .i-statement,.i-final-image { display: block; min-height: 0; height: auto; }
  .i-statement { background: #f2f6fb; }
  .i-final-image { background: #081c35; }
  .i-statement > img,.i-final-image > img {
    display: block; position: relative; inset: auto;
    width: 100%; height: auto; max-width: 100%; object-fit: contain;
    transform: none !important; filter: none; transition: none;
  }
  .i-statement-shade,.i-final-image > div { display: none; }
  .i-statement-copy,.i-final-image h2 {
    position: relative; inset: auto; width: auto; max-width: none;
    margin: 0; padding: 28px var(--gutter) 36px;
  }
  .i-statement-copy h2 { margin-top: 16px; font-size: clamp(32px,7.6vw,46px); line-height: 1.14; }
  .i-statement-copy h2 b { color: #0d47a1; }
  .i-statement-copy h2 span { color: #182c44; }
  .i-statement-copy > i { display: none; }
  .i-final-image h2 { font-size: clamp(34px,8vw,48px); line-height: 1.15; text-shadow: none; }
  .i-final-image h2 b { color: #8dbaff; }

  .i-showcase { height: auto; min-height: 0; padding-block: 52px; }
  .i-showcase-sticky { position: relative; top: auto; height: auto; min-height: 0; padding-block: 0; }
  .i-showcase-head h2 { font-size: clamp(30px,6.8vw,40px); }
  .i-showcase-sticky .i-anatomy-stage { height: auto; min-height: 0; aspect-ratio: 4 / 3; }
  .i-showcase-sticky .i-anatomy-panel { min-height: 0; padding: 24px; }

  .i-eco-ready .i-eco-panel[hidden] { display: none; }
  .i-eco-panel { min-height: 0; }
  .i-eco-copy { min-height: 0; padding: 24px; }
  .i-eco-copy h3 { max-width: none; font-size: 30px; }
  .i-eco-building > img { object-fit: contain; object-position: center; }
  .i-eco-building { background: #dfe8f2; }
  .i-eco-building::after { display: none; }
  .i-eco-building .i-eco-caption { background: #071d37d9; padding: 10px 12px; border-radius: 8px; }

  /* Keep the step animation without the old half-screen spacer per step. */
  .i-start { --start-height: 270px; }
  .i-start.is-scroll-ready .i-start-step { min-height: 0; padding-block: 14px; }
  .i-start-detail { padding: 22px 18px; }
  .i-start-detail h3 { margin-top: 14px; }
  .i-start-footer { margin-top: 24px; padding-top: 24px; }
  .i-start-actions { gap: 10px; }

  .capability-story .story-layout { gap: 24px; }
  .capability-story .story-device { position: relative; top: auto; height: clamp(280px,80vw,360px); min-height: 0; }
  .capability-story .story-ring { width: min(84%,320px); height: auto; aspect-ratio: 1; }
  .capability-story .story-copy > .page-title { margin-bottom: 24px; font-size: clamp(28px,6vw,36px); }
  .capability-story .story-step { min-height: 0; padding-block: 24px; opacity: 1; border-bottom: 1px solid #dce5f0; }
  .capability-story .story-step:last-child { border-bottom: 0; }
  .capability-story .story-step h3 { font-size: 25px; line-height: 1.25; }
  .capability-story .story-step p { margin-bottom: 0; font-size: 15px; }

  /* Editorial photos and original building photos keep their full framing. */
  .section-editorial { min-height: 0; margin-bottom: 28px; }
  .section-editorial img { display: block; position: relative; inset: auto; height: auto; object-fit: contain; transform: none; }
  .section-editorial::after { display: none; }
  .section-editorial figcaption { position: relative; inset: auto; padding: 22px; background: #0b2548; color: #fff; }
  .section-editorial figcaption b { color: #fff; font-size: 26px; }
  .about-building { background: #eaf0f6; }
  .about-building img { height: auto; max-height: 520px; object-fit: contain; object-position: center; }
  .about-building figcaption { position: relative; inset: auto; padding: 20px; background: #0b2548; }
  .about-building::after { display: none; }
  .about-page .about-section-head h2 { font-size: clamp(30px,6.5vw,40px); }
}

@media (max-width: 620px) {
  /* Show the whole film above the copy instead of cropping 75% of its width. */
  .i-intro-film-hero { --mobile-film-height: calc(100vw * 9 / 16); }
  .i-intro-film-media { inset: var(--film-header-height) 0 auto; height: var(--mobile-film-height); }
  .i-intro-film-media :is(img,video) { object-fit: contain; }
  .i-intro-film-overlay { opacity: 1; background: linear-gradient(180deg,#04152d00 0%,#04152d00 calc(var(--film-header-height) + var(--mobile-film-height) - 28px),#071a34 calc(var(--film-header-height) + var(--mobile-film-height))); }
  .i-intro-film-container { display: block; padding-top: calc(var(--film-header-height) + var(--mobile-film-height) + 24px); padding-bottom: 112px; }
  .i-intro-film-copy .i-intro-film-eyebrow { margin-bottom: 16px; }
  .i-intro-film-copy h1 { font-size: clamp(30px,7.8vw,42px); line-height: 1.14; }
  .i-intro-film-copy p { margin-top: 18px; line-height: 1.7; }
  .i-intro-film-actions { margin-top: 22px; max-width: none; }
  .i-intro-film-actions .button { width: 100%; }
  .i-intro-film-bottom { min-height: 72px; bottom: 18px; }
  .i-eco-copy { padding: 24px 20px; }
  .i-start-step { gap: 12px; }
  .i-start-detail p { line-height: 1.65; }
}
@media (max-width: 860px) and (max-height: 600px) {
  .i-start.is-scroll-ready .i-start-product { position: relative; top: auto; }
}
@media (max-width: 860px) {
  .i-start-board { display: block; }
  .i-start { --start-top: 76px; --start-height: 300px; }
  .i-start-product { max-width: 520px; margin: 0 auto 14px; }
  .i-start-product-top { inset: 18px 20px auto; }
  .i-start-scene.is-source figcaption { top: 48px; left: 20px; right: 20px; }
  .i-start-scene.is-source h3 { max-width: none; font-size: 22px; }
  .i-start-scene figcaption p { display: none; }
  .i-start-scene.is-source > img { inset: 28% 10% auto; width: 80%; height: 40%; }
  .i-start-scene.is-key > img { left: 30%; width: 40%; }
  .i-start-scene-foot { inset: auto 20px 35px; }
  .i-start-progress { inset: auto 20px 18px; }
}

/* Recent product and editorial sections: mobile photos stay with their copy. */
.i-start-mobile-visual{display:none}
@media(max-width:860px){
  .i-start.is-scroll-ready .i-start-product{display:none;position:relative;top:auto}
  .i-start.is-scroll-ready .i-start-step{min-height:0;padding-block:12px;align-items:start}
  .i-start-number{align-self:start;margin-top:24px}
  .i-start-step:not(:last-child)::after{top:64px;bottom:-36px}
  .i-start-mobile-visual{display:block;margin:22px 0 0;aspect-ratio:4/3;border:1px solid #dce5f0;border-radius:12px;overflow:hidden;background:#edf2f7}
  .i-start-mobile-visual img{display:block;width:100%;height:100%;object-fit:contain}
  .i-start-flow{padding-top:0}
  .product-detail-hub .product-tabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;overflow:visible;margin-inline:0;padding:6px}
  .product-detail-hub .product-tabs button{min-width:0;width:100%;min-height:48px;white-space:normal;line-height:1.45;padding:10px 12px;overflow-wrap:anywhere}
}
@media(max-width:620px){
  .i-intro-film-hero,.i-intro-film-container{min-height:0}
  .products-revised .product-flagship{row-gap:28px}
}

/* Full mobile audit: retain the whole headquarters photo in the final tab. */
@media(max-width:860px){
  .i-ecosystem .i-eco-panel{grid-template-columns:minmax(0,1fr)}
  .i-ecosystem .i-eco-building{height:auto;min-height:0;margin:0 12px 12px}
  .i-ecosystem .i-eco-building>img{position:relative;inset:auto;display:block;width:100%;height:auto;max-height:420px;object-fit:contain;object-position:center}
  .i-ecosystem .i-eco-building .i-eco-caption{position:relative;inset:auto;margin:0;border-radius:0;padding:12px 16px;background:#0b2548;flex-wrap:wrap;gap:4px 12px}
}

/* Mobil kontrol revizesi — 02.10.2026 */
/* Büyük harfli başlıklarda Türkçe İ noktası üst satıra değmesin. */
html body :is(.hero-copy h1,.page-hero h1,.section-head h2,.flagship-copy h2,.global-copy h2,.cta-inner h2,.about-intro h2,.form-panel h2,.contact-section-head h2){line-height:1.14}
/* Form onay kutusu parmakla rahat işaretlenebilsin. */
html body .consent{display:flex;align-items:center;gap:10px;min-height:44px}
html body .consent input[type=checkbox]{flex:none;width:22px;height:22px;margin:0;accent-color:#164ca5;cursor:pointer}
@media (max-width:600px){
  /* Bülten filtreleri: etiketler aynı hizada, seçili değer tek satırda. */
  .bulletin-filters{align-items:start}
  html:root body .bulletin-filters .site-select-trigger{padding-inline:12px;gap:6px}
  .bulletin-filters .site-select-trigger>span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  /* Blog kategori kartlarında boş üst alan kalmasın. */
  html body .blog-categories a{min-height:0;padding:20px 22px}
}
@media (max-width:380px){html:root body .bulletin-filters .site-select-trigger{font-size:13px;padding-inline:10px}}

/* ============================================================
   BÖLÜM: pages/car-key  (eski: assets/css/pages/car-key.css)
   Kapsam: p-otomobil-anahtari
   ============================================================ */
:where(html.p-otomobil-anahtari) .key-hero{ padding: 132px 0 60px; background: #f2f6fc; border-bottom: 1px solid #d7e2f3; }
:where(html.p-otomobil-anahtari) .key-hero .breadcrumbs{ margin-bottom: 32px; }
:where(html.p-otomobil-anahtari) .key-hero h1{ max-width: 850px; margin: 18px 0 24px; font-size: clamp(36px,4.7vw,64px); line-height: 1.12; letter-spacing: -.045em; text-transform: none; }
:where(html.p-otomobil-anahtari) .key-hero p{ max-width: 700px; margin-bottom: 28px; color: #5c6f8b; font-size: 18px; line-height: 1.75; }
:where(html.p-otomobil-anahtari) .car-key-page svg{ width: 24px; height: 24px; flex: 0 0 24px; }
:where(html.p-otomobil-anahtari) .key-options{ padding: 52px 0; }
:where(html.p-otomobil-anahtari) .key-section-title{ margin: 0 0 24px; font-size: 30px; line-height: 1.25; }
:where(html.p-otomobil-anahtari) .key-request-grid{ display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 20px; }
:where(html.p-otomobil-anahtari) .key-request-card{ display: flex; flex-direction: column; align-items: flex-start; position: relative; padding: 30px; border: 1px solid #d7e2f3; border-radius: 18px; color: #12233c; background: #fff; transition: border-color .2s, background-color .2s; }
:where(html.p-otomobil-anahtari) .key-request-card:hover,:where(html.p-otomobil-anahtari) .key-request-card[aria-current="true"]{ border-color: #0d47a1; background: #f4f8ff; }
:where(html.p-otomobil-anahtari) .key-request-card:focus-visible{ outline: 2px solid #0d47a1; outline-offset: 4px; }
:where(html.p-otomobil-anahtari) .key-request-icon,:where(html.p-otomobil-anahtari) .key-form-icon{ display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px; color: #0d47a1; background: #eaf1fc; margin-bottom: 26px; }
:where(html.p-otomobil-anahtari) .key-request-card h2{ margin: 0 0 12px; font-size: 23px; line-height: 1.3; }
:where(html.p-otomobil-anahtari) .key-request-card p{ margin: 0; font-size: 15px; line-height: 1.75; color: #5c6f8b; }
:where(html.p-otomobil-anahtari) .key-request-arrow{ position: absolute; right: 28px; top: 28px; font-size: 25px; color: #0d47a1; }
:where(html.p-otomobil-anahtari) .key-contact{ padding: 20px 0 80px; }
:where(html.p-otomobil-anahtari) .key-contact-grid{ display: grid; grid-template-columns: minmax(0,.8fr) minmax(0,1.2fr); gap: 64px; align-items: start; }
:where(html.p-otomobil-anahtari) .key-contact-grid > aside{ padding-top: 28px; min-width: 0; }
:where(html.p-otomobil-anahtari) .key-contact-grid > aside h2{ margin: 18px 0 22px; font-size: clamp(30px,3vw,40px); line-height: 1.2; letter-spacing: -.04em; }
:where(html.p-otomobil-anahtari) .key-contact-grid > aside p{ color: #5c6f8b; line-height: 1.8; }
:where(html.p-otomobil-anahtari) .key-phone{ display: flex; align-items: center; gap: 16px; margin: 28px 0; padding: 22px 0; border-block: 1px solid #d7e2f3; color: #0d47a1; }
:where(html.p-otomobil-anahtari) .key-phone small,:where(html.p-otomobil-anahtari) .key-phone b{ display: block; }
:where(html.p-otomobil-anahtari) .key-phone small{ color: #5c6f8b; font-size: 13px; margin-bottom: 6px; }
:where(html.p-otomobil-anahtari) .key-phone b{ font-size: clamp(18px,2vw,22px); }
:where(html.p-otomobil-anahtari) .key-phone > span:last-child{ margin-left: auto; }
:where(html.p-otomobil-anahtari) .key-form-note{ font-size: 14px; }
:where(html.p-otomobil-anahtari) .car-key-page .form-panel{ min-width: 0; width: 100%; scroll-margin-top: 96px; }
:where(html.p-otomobil-anahtari) .car-key-page .contact-form-head h2{ font-size: clamp(26px,2.5vw,32px); line-height: 1.25; letter-spacing: -.035em; text-transform: none; }
:where(html.p-otomobil-anahtari) .car-key-page .form-panel::before{ display: none; }
:where(html.p-otomobil-anahtari) .car-key-page .contact-form-head{ margin-bottom: 24px; }
@media (max-width: 860px) {
  :where(html.p-otomobil-anahtari) .key-hero{ padding: 108px 0 40px; }
  :where(html.p-otomobil-anahtari) .key-hero p{ font-size: 16px; }
  :where(html.p-otomobil-anahtari) .key-request-grid{ grid-template-columns: 1fr; gap: 14px; }
  :where(html.p-otomobil-anahtari) .key-request-card{ padding: 24px; }
  :where(html.p-otomobil-anahtari) .key-request-icon{ margin-bottom: 20px; }
  :where(html.p-otomobil-anahtari) .key-contact-grid{ grid-template-columns: 1fr; gap: 28px; }
  :where(html.p-otomobil-anahtari) .key-contact-grid > aside{ padding-top: 0; }
  :where(html.p-otomobil-anahtari) .key-contact{ padding: 0 0 52px; }
  :where(html.p-otomobil-anahtari) .key-options{ padding: 36px 0; }
  :where(html.p-otomobil-anahtari) .car-key-page .form-panel{ padding: 24px 20px; }
}
@media (prefers-reduced-motion: reduce) { :where(html.p-otomobil-anahtari) .key-request-card{ transition: none; } }

/* ============================================================
   BÖLÜM: components/real-product-revision  (eski: assets/css/components/real-product-revision.css)
   Kapsam: tüm sayfalar
   ============================================================ */
/* Authentic product imagery and readable product navigation. */
.nav-products .nav-product-feature{display:flex;flex-direction:column;justify-content:center;gap:16px;padding:18px;background:#f4f7fb;border:1px solid #e0e7f1;border-radius:10px;color:#13223b;text-decoration:none;position:relative}
.nav-product-feature img{display:block;width:100%;height:140px;object-fit:contain;mix-blend-mode:multiply}
.nav-product-feature b{display:block;font-size:20px;letter-spacing:-.04em}.nav-product-feature small{display:block;margin-top:6px;color:#53647c;font-size:12px}.nav-product-feature i{position:absolute;right:15px;bottom:20px;color:#104ba4;font-style:normal}
.nav-products .nav-dropdown-links>a:first-child{display:none}.nav-products .nav-dropdown-links{grid-template-columns:1fr 1fr}
.products-revised{padding:126px 0 80px}.products-intro h1{font-size:clamp(34px,4.5vw,64px);letter-spacing:-.055em;line-height:1.1;margin:20px 0 36px}.products-intro h1 span{color:#134ba4}
.store-category-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}.store-category-grid>a{position:relative;padding:26px 24px;border:1px solid #d7e2f2;border-radius:16px;background:#f7f9fc;color:#17243b;text-decoration:none;transition:background .2s,border-color .2s}.store-category-grid>a:hover{background:#edf3ff;border-color:#376bb4}.store-category-icon{display:block;font-size:28px;color:#134ba4;margin-bottom:24px}.store-category-grid h2{font-size:19px;line-height:1.4;margin:0 0 12px;letter-spacing:-.03em}.store-category-grid p{font-size:13px;line-height:1.7;color:#53647c;margin:0}.store-category-arrow{position:absolute;right:20px;top:22px;color:#134ba4}
.product-flagship{display:grid;grid-template-columns:1fr 1fr;gap:7%;align-items:center;margin-top:56px;padding-top:40px;padding-bottom:40px;border-top:1px solid #dbe3ee}.flagship-image{background:#f5f8fc;border-radius:22px;padding:32px}.flagship-image img{width:100%;height:auto;display:block;mix-blend-mode:multiply}.product-flagship h2{font-size:clamp(32px,4vw,54px);letter-spacing:-.05em;margin:18px 0}.product-flagship p{font-size:17px;line-height:1.8;color:#53647c}.product-flagship .actions{flex-wrap:wrap}
.hardware-discovery{max-width:1440px;margin:auto;padding:80px 4%}.hardware-heading{margin-bottom:28px}.hardware-heading h2{font-size:clamp(29px,3.5vw,48px);line-height:1.15;letter-spacing:-.05em;margin:18px 0}.hardware-heading p{color:#53647c;line-height:1.7}.hardware-explorer{display:grid;grid-template-columns:1.3fr 1fr;gap:48px;align-items:center}.hardware-stage{position:relative;background:#f3f6fa;border:1px solid #d7e2f2;border-radius:22px;min-width:0;overflow:hidden;padding:24px 24px 72px;touch-action:pan-y}.hardware-main-image{display:block;width:100%;height:350px;object-fit:contain;mix-blend-mode:multiply;user-select:none;transition:height .4s ease,opacity .2s}.hardware-stage.is-expanded .hardware-main-image{height:245px}.hardware-expand{position:absolute;bottom:18px;left:50%;transform:translateX(-50%);white-space:nowrap;border:1px solid #b8cde9;background:#fff;color:#124ba5;border-radius:9px;padding:12px 18px;display:flex;gap:20px;align-items:center;cursor:pointer}.hardware-parts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-bottom:18px}.hardware-parts[hidden]{display:none}.hardware-part{border:1px solid #dce5f1;background:white;border-radius:10px;padding:8px;min-width:0;color:#233a5d;cursor:pointer;animation:part-enter .4s ease both}.hardware-part:nth-child(even){animation-delay:.06s}.hardware-part img{width:100%;height:65px;object-fit:contain;mix-blend-mode:multiply}.hardware-part span{font-size:10px;display:block;overflow-wrap:anywhere}.hardware-part[aria-pressed=true]{border-color:#124ba5;background:#eaf2ff}.hardware-category{display:block;color:#134ba4;font-size:12px;letter-spacing:.12em}.hardware-copy h3{font-size:clamp(26px,2.7vw,36px);letter-spacing:-.04em;line-height:1.2;margin:18px 0}.hardware-copy p{color:#53647c;font-size:16px;line-height:1.9}.hardware-content{min-height:270px}.hardware-source{display:inline-block;margin-top:12px;font-size:12px;color:#134ba4}.hardware-controls{display:flex;align-items:center;gap:22px;margin:24px 0}.hardware-controls button{display:grid;place-items:center;width:46px;height:46px;border:1px solid #c8d8ed;color:#124ba5;background:white;border-radius:50%;font-size:22px;cursor:pointer}.hardware-controls button:hover{background:#134ba4;color:white}.hardware-count{font-size:13px;color:#53647c}.hardware-stage:focus-visible,.hardware-controls button:focus-visible,.hardware-part:focus-visible{outline:3px solid #5397f2;outline-offset:3px}
@keyframes part-enter{from{opacity:0;transform:translateY(25px) scale(.85)}to{opacity:1;transform:none}}
.i-products .i-product-media img,.product-detail-visual-hero .product-page-visual img{object-fit:contain;background:#f5f7fa;height:100%;width:100%}.i-help-product img{object-fit:contain;transform:none!important}.i-eco-visual img{object-fit:contain}.i-eco-building img{object-fit:cover}.i-eco-device img{padding:0!important;object-fit:contain!important;transform:none!important}
.real-start .i-start-scene>img{inset:31% 5% auto!important;width:90%!important;height:46%!important;object-fit:contain!important;transform:none!important;filter:none!important}.real-start .i-start-scene::after{display:none}.real-start .i-start-product::before{display:none}
.product-technical-guide{padding:72px 0;background:#f5f8fc}.product-technical-guide .guide-heading{max-width:850px;margin-bottom:35px}.product-technical-guide h2{font-size:clamp(30px,3.2vw,44px);line-height:1.2;letter-spacing:-.04em;margin:16px 0}.technical-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}.technical-grid article{padding:30px;background:white;border:1px solid #dbe4f1;border-radius:16px;min-width:0}.technical-grid h3{font-size:22px;line-height:1.4;margin:0 0 16px;letter-spacing:-.03em}.technical-grid p,.guide-heading p{font-size:15px;line-height:1.95;color:#53647c}.technical-grid dl{margin:20px 0 0}.technical-grid dl div{display:grid;grid-template-columns:1fr 1fr;gap:15px;padding:12px 0;border-top:1px solid #e1e7ef}.technical-grid dt{font-size:13px;color:#63718a}.technical-grid dd{font-size:14px;margin:0}.technical-source{display:block;margin-top:24px;color:#134ba4;font-size:13px}.accessory-grid p{line-height:1.85}.application-card img,.guide-article figure img{object-fit:contain!important;background:#f4f7fa}
@media(max-width:860px){.hardware-discovery{padding:52px 24px}.hardware-explorer{grid-template-columns:1fr;gap:26px}.hardware-content{min-height:0}.hardware-main-image{height:300px}.hardware-stage.is-expanded .hardware-main-image{height:220px}.store-category-grid{grid-template-columns:1fr 1fr}.product-flagship{gap:30px}.technical-grid{grid-template-columns:1fr}.product-technical-guide{padding:48px 0}.real-start .i-start-scene>img{inset:31% 5% auto!important;height:40%!important}.hardware-controls{justify-content:space-between}}
@media(max-width:620px){.products-revised{padding:98px 0 48px}.products-intro h1{margin-bottom:28px}.store-category-grid{gap:10px}.store-category-grid>a{padding:20px 16px}.store-category-grid h2{font-size:16px}.store-category-grid p{font-size:12px}.product-flagship{grid-template-columns:1fr;margin-top:32px;padding-top:28px}.flagship-image{padding:20px}.hardware-stage{padding:18px 12px 70px}.hardware-main-image{height:245px}.hardware-stage.is-expanded .hardware-main-image{height:200px}.hardware-parts{gap:5px}.hardware-part{padding:5px}.hardware-part img{height:46px}.hardware-copy p{font-size:15px}.technical-grid article{padding:23px}.technical-grid dl div{grid-template-columns:1fr}.nav-product-feature{display:none!important}.nav-products .nav-dropdown-links>a:first-child{display:flex}.nav-products .nav-dropdown-links{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.hardware-main-image,.hardware-part,.store-category-grid>a{transition:none;animation:none}}
.app-card-visual img{object-fit:contain!important;background:#f4f7fa}.i-statement,.i-final-image,.hardware-discovery,[data-product-panel]{scroll-margin-top:95px}.story-device>img{object-fit:contain!important}.i-statement img,.i-final-image>img{filter:none!important}
@media(min-width:861px){.i-statement{display:grid!important;grid-template-columns:1fr 1.1fr!important;gap:35px!important;min-height:0!important;height:auto!important;padding:65px 5%!important;align-items:center}.i-statement>img{position:static!important;width:100%!important;height:auto!important;transform:none!important;grid-column:2;grid-row:1;border-radius:18px}.i-statement>div{position:static!important;grid-column:1;grid-row:1;padding:0!important;background:none!important}.i-statement h2{font-size:clamp(35px,4.6vw,68px)!important}.i-statement::before,.i-statement::after{display:none!important}.i-final-image{display:grid!important;grid-template-columns:1.1fr 1fr!important;align-items:center;gap:45px;min-height:0!important;height:auto!important;padding:65px 5%!important;background:#0b1f39}.i-final-image>img{position:static!important;width:100%!important;height:auto!important;transform:none!important;border-radius:18px}.i-final-image>div{display:none}.i-final-image>h2{position:static!important;font-size:clamp(35px,4.6vw,68px)!important;transform:none!important;margin:0!important}.i-final-image::before,.i-final-image::after{display:none!important}}
.i-statement>.i-statement-shade{display:none!important}.product-detail-visual-hero .product-page-visual{aspect-ratio:4/3}.product-detail-visual-hero .product-page-visual img{display:block;height:100%!important;width:100%!important;object-fit:contain!important;transform:none!important}.product-page-visual::before,.product-page-visual::after{display:none!important}
.i-products{padding-block:72px}.i-product-grid{align-items:stretch}.i-product-grid .i-product-card{display:flex;flex-direction:column;opacity:1!important;transform:none!important;transition:border-color .2s,box-shadow .2s}.i-product-card.featured{margin-top:0}.i-products .i-product-media{height:auto!important;aspect-ratio:4/3!important}.i-products .i-product-media img{filter:none!important;transform:none!important;padding:20px!important;object-fit:contain!important}.i-product-media:after{display:none}.i-product-body{display:flex;flex-direction:column;flex:1}.i-product-body>a{align-self:flex-start;margin-top:auto}.i-products .i-section-head h2{font-size:clamp(32px,4vw,54px)}
@media(min-width:861px){.i-statement .i-statement-copy h2{font-size:clamp(32px,3.7vw,54px)!important}}
@media(max-width:860px){.i-products{padding-block:52px}.i-products .i-product-media img{padding:18px!important}}

@media(min-width:861px){.blog-categories{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* User-supplied product photography and proportionate editorial scenes. */
.i-help-product img{border-radius:16px;box-shadow:none!important;filter:none!important}
.i-products .i-product-media:has(img[src*="/editorial/"]){aspect-ratio:3/2!important}
.i-products .i-product-media img[src*="/editorial/"]{padding:0!important;object-fit:contain!important}
.i-eco-visual img[src*="zed-full-plus-internal"]{object-fit:contain!important;background:#e9edef}
.i-eco-device img[src*="/editorial/"]{object-fit:contain!important}
.product-anatomy-photo{aspect-ratio:4/3}

.technical-photo{margin:24px 0 0}.technical-photo img{display:block;width:100%;height:auto;border-radius:12px}.technical-photo figcaption{font-size:12px;color:#53647c;margin-top:10px}

/* Word wrappers need explicit spacing even after translated character animation. */
.i-manifesto p{line-height:1.4!important;letter-spacing:-.01em!important;word-spacing:.08em;max-width:1120px}
.i-manifesto-word{margin-inline:.07em}
.i-manifesto small{line-height:1.65}

/* Balanced technical guide: authentic photos and software captures in every card. */
.technical-grid article{display:flex;flex-direction:column}
.technical-grid .technical-photo{margin-top:auto;padding-top:24px}
.technical-media{width:100%;aspect-ratio:16/10;display:flex;align-items:center;justify-content:center;overflow:hidden;border:1px solid #e2e8f2;border-radius:12px;background:#f7f9fc}
.technical-photo .technical-media img{width:100%;height:100%;object-fit:contain;border-radius:0}
.technical-media--screen{padding:12px;background:#fff}
.technical-accessories{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;padding:16px;background:#fff}
.technical-accessories>div{min-width:0;display:flex;flex-direction:column;align-items:center;gap:12px}
.technical-photo .technical-accessories img{width:100%;height:auto;aspect-ratio:1;object-fit:contain}
.technical-accessories span{font-size:11px;line-height:1.5;color:#53647c;white-space:nowrap}
@media(max-width:420px){.technical-accessories{padding:10px;gap:6px}.technical-accessories span{font-size:9px}.technical-media--screen{padding:6px}}

/* ============================================================
   BÖLÜM: sections/hardware-hotspots  (eski: assets/css/sections/hardware-hotspots.css)
   Kapsam: p-index
   ============================================================ */
:where(html.p-index) .product-anatomy{max-width:1440px;margin:auto;padding:76px 4%;scroll-margin-top:90px}:where(html.p-index) .product-anatomy-heading{margin-bottom:32px}:where(html.p-index) .product-anatomy-heading h2{font-size:clamp(30px,3.4vw,48px);font-weight:500;letter-spacing:-.05em;line-height:1.17;margin:18px 0 0}:where(html.p-index) .product-anatomy-layout{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:40px;align-items:stretch}:where(html.p-index) .product-anatomy-view{min-width:0;padding:26px 28px 20px;background:radial-gradient(ellipse at 50% 40%,#fff,#edf3fb);border:1px solid #d2dfef;border-radius:20px;display:flex;flex-direction:column;justify-content:center}:where(html.p-index) .product-anatomy-stage{width:100%;touch-action:pan-y;outline-offset:4px;user-select:none}:where(html.p-index) .product-anatomy-photo{position:relative;width:100%;margin:auto;aspect-ratio:500/373}:where(html.p-index) .product-anatomy-photo>img{display:block;width:100%;height:auto;mix-blend-mode:multiply;pointer-events:none}:where(html.p-index) .product-anatomy-points{position:absolute;inset:0;pointer-events:none}:where(html.p-index) .product-anatomy-hotspot{position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-50%);display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;border-radius:50%;background:transparent;pointer-events:auto;cursor:pointer;color:#134ba4}:where(html.p-index) .product-anatomy-hotspot>span{display:grid;place-items:center;box-sizing:border-box;width:32px;height:32px;border:1px solid #b3c8e8;border-radius:50%;background:#fff;box-shadow:0 2px 10px #10244924;line-height:1;font-size:23px;font-weight:400;transition:background .18s,color .18s,box-shadow .18s}:where(html.p-index) .product-anatomy-hotspot:hover>span,:where(html.p-index) .product-anatomy-hotspot.is-active>span{color:#fff;background:#134ba4;border-color:#134ba4;box-shadow:0 0 0 5px #4c8cf52b}:where(html.p-index) .product-anatomy-hotspot:focus-visible{outline:2px solid #3284f0;outline-offset:2px}:where(html.p-index) .product-anatomy-controls{display:flex;align-items:center;justify-content:center;gap:26px;padding-top:22px}:where(html.p-index) .product-anatomy-controls button{display:grid;place-items:center;width:45px;height:45px;background:#fff;border:1px solid #b9cfea;border-radius:50%;color:#134ba4;cursor:pointer}:where(html.p-index) .product-anatomy-controls button:hover{background:#134ba4;color:#fff}:where(html.p-index) .product-anatomy-controls svg{width:22px;height:22px;overflow:visible}:where(html.p-index) .product-anatomy-position{font-size:12px;color:#59718f;font-variant-numeric:tabular-nums;min-width:35px;text-align:center}:where(html.p-index) .product-anatomy-panel{padding:38px;border:1px solid #dae4f2;border-radius:20px;background:#f8fafd;display:flex;flex-direction:column;justify-content:center;min-width:0}:where(html.p-index) .product-anatomy-panel h3{font-size:clamp(25px,2.5vw,34px);line-height:1.25;letter-spacing:-.035em;margin:18px 0}:where(html.p-index) .product-anatomy-panel p{color:#526883;font-size:16px;line-height:1.9;margin:0}:where(html.p-index) .product-anatomy-facts{display:grid;gap:0;margin:24px 0 0}:where(html.p-index) .product-anatomy-facts div{display:grid;grid-template-columns:1fr 1.3fr;gap:16px;padding:15px 0;border-top:1px solid #d9e3f0}:where(html.p-index) .product-anatomy-facts dt{font-size:12px;color:#65758a}:where(html.p-index) .product-anatomy-facts dd{font-size:13px;color:#1d304e;margin:0;line-height:1.6}:where(html.p-index) .product-anatomy-stage:focus-visible,:where(html.p-index) .product-anatomy-controls button:focus-visible{outline:3px solid #5296ef;outline-offset:4px}
@media(max-width:860px){:where(html.p-index) .product-anatomy{padding:52px 24px}:where(html.p-index) .product-anatomy-layout{grid-template-columns:1fr;gap:20px}:where(html.p-index) .product-anatomy-heading{margin-bottom:26px}:where(html.p-index) .product-anatomy-view{padding:24px 22px 18px}:where(html.p-index) .product-anatomy-photo{max-width:580px}:where(html.p-index) .product-anatomy-panel{padding:26px;min-height:310px}:where(html.p-index) .product-anatomy-panel p{font-size:15px}}
@media(max-width:420px){:where(html.p-index) .product-anatomy{padding-inline:18px}:where(html.p-index) .product-anatomy-view{padding:24px 12px 16px}:where(html.p-index) .product-anatomy-heading h2{font-size:30px}:where(html.p-index) .product-anatomy-hotspot>span{width:29px;height:29px;font-size:21px}:where(html.p-index) .product-anatomy-panel{padding:23px;min-height:345px}:where(html.p-index) .product-anatomy-facts div{gap:12px;grid-template-columns:1fr 1.25fr}}
@media(prefers-reduced-motion:reduce){:where(html.p-index) .product-anatomy-hotspot>span{transition:none}}
:where(html.p-index) .product-anatomy-controls[hidden]{display:none}

:where(html.p-index) .product-anatomy-photo{aspect-ratio:4/3;perspective:900px}
:where(html.p-index) .product-anatomy-angle{position:absolute;inset:0;opacity:0;visibility:hidden;transform:translateY(9px) rotateX(5deg);transition:opacity .38s ease,transform .38s ease,visibility .38s;pointer-events:none}
:where(html.p-index) .product-anatomy-angle.is-visible{opacity:1;visibility:visible;transform:none;pointer-events:auto}
:where(html.p-index) .product-anatomy-angle>img{display:block;width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply;pointer-events:none}
:where(html.p-index) .product-anatomy-angle:not(.is-visible) .product-anatomy-hotspot{pointer-events:none}
:where(html.p-index) .product-anatomy-views{display:flex;justify-content:center;gap:8px;padding-top:20px}
:where(html.p-index) .product-anatomy-views button{padding:11px 18px;border:1px solid #c8d8ed;border-radius:9px;background:#fff;color:#134ba4;font:inherit;font-size:13px;cursor:pointer;min-height:44px}
:where(html.p-index) .product-anatomy-views button[aria-pressed=true]{background:#134ba4;border-color:#134ba4;color:white}
:where(html.p-index) .product-anatomy-views button:focus-visible{outline:3px solid #5296ef;outline-offset:3px}
:where(html.p-index) .top-point::before{content:"";position:absolute;left:50%;width:1px;background:#3971b8;pointer-events:none;z-index:-1;height:calc(var(--photo-height,300px) * .12)}
:where(html.p-index) .top-point[style*="--y:24%"]::before{top:50%}
:where(html.p-index) .top-point[style*="--y:48%"]::before{bottom:50%}
@media(max-width:600px){:where(html.p-index) .top-point{width:36px;height:36px}:where(html.p-index) .top-point>span{width:27px;height:27px;font-size:20px}:where(html.p-index) .product-anatomy-views button{padding-inline:14px}:where(html.p-index) .product-anatomy-panel{min-height:345px}}
@media(prefers-reduced-motion:reduce){:where(html.p-index) .product-anatomy-angle{transition:none;transform:none}}
/* Draw the plus geometrically; font baselines vary between platforms. */
:where(html.p-index) .product-anatomy-hotspot>span{font-size:0!important;position:relative}
:where(html.p-index) .product-anatomy-hotspot>span::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:12px;transform:translate(-50%,-50%);background:linear-gradient(currentColor,currentColor) center/12px 1.5px no-repeat,linear-gradient(currentColor,currentColor) center/1.5px 12px no-repeat}
/* Keep image layers in a flat painting context across mobile browsers. */
:where(html.p-index) .product-anatomy-photo{perspective:none}
:where(html.p-index) .product-anatomy-angle{transform:none;transition:none}
:where(html.p-index) .product-anatomy-angle:not(.is-visible){display:none}
:where(html.p-index) .product-anatomy-angle.is-visible{animation:hardware-angle-in .38s ease both}
:where(html.p-index) .product-anatomy-angle>img{mix-blend-mode:normal}
@keyframes hardware-angle-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){:where(html.p-index) .product-anatomy-angle.is-visible{animation:none}}

/* Photo previews keep the angle selector visual, with existing swipe controls. */
:where(html.p-index) .hardware-swipe-hint{text-align:center;margin:15px auto 0;max-width:430px;font-size:12px;line-height:1.7;color:#59718f}:where(html.p-index) .product-anatomy-views{padding-top:14px;gap:12px}:where(html.p-index) .product-anatomy-views button{width:126px;max-width:42%;padding:6px 6px 10px;border-radius:12px;color:#254876;background:#fff;display:flex;flex-direction:column;gap:8px;align-items:center}:where(html.p-index) .product-anatomy-views button img{display:block;width:100%;height:66px;object-fit:contain;border-radius:7px}:where(html.p-index) .product-anatomy-views button span{font-size:11px;line-height:1.5}:where(html.p-index) .product-anatomy-views button[aria-pressed=true]{background:#eaf2ff;color:#104eaa;box-shadow:0 0 0 1px #104eaa}:where(html.p-index) .product-anatomy-stage{cursor:grab}:where(html.p-index) .product-anatomy-stage:active{cursor:grabbing}

/* Real side-port photo; callouts stay beside the sockets to keep pins visible. */
:where(html.p-index) .hardware-side-lines{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
:where(html.p-index) .hardware-side-lines path{fill:none;stroke:#2866b4;stroke-width:1.25;vector-effect:non-scaling-stroke}
:where(html.p-index) .product-anatomy-views button{min-width:0;flex:0 1 126px;max-width:calc((100% - 24px)/3)}
:where(html.p-index) .product-anatomy-views button span{overflow-wrap:anywhere}
@media(max-width:420px){:where(html.p-index) .product-anatomy-views{gap:8px}:where(html.p-index) .product-anatomy-views button{max-width:calc((100% - 16px)/3);padding:6px 5px 9px}:where(html.p-index) .product-anatomy-views button img{height:54px}}

/* The real menu sits inside the front display, below the feature controls. */
:where(html.p-index) .product-anatomy-angle>.hardware-menu-screen{position:absolute;z-index:1;left:28.5%;top:34%;width:43%;height:34.6%;object-fit:fill;border-radius:1px;pointer-events:none}
:where(html.p-index) .product-anatomy-points{z-index:2}

/* Match the menu to the upper-view display perspective. */
:where(html.p-index) .hardware-top-screen{position:absolute;z-index:1;left:28.1%;top:56.9%;width:43.2%;height:18.5%;container-type:inline-size;pointer-events:none}
:where(html.p-index) .hardware-top-screen img{display:block;width:100%;height:100%;object-fit:fill;transform-origin:50% 0;transform:perspective(100cqw) rotateX(-12deg);pointer-events:none}

/* Side-view menu uses the same photo coordinate space and a four-corner projection. */
:where(html.p-index) .hardware-side-screen{position:absolute;inset:0;z-index:1;width:100%;height:100%;pointer-events:none}
:where(html.p-index) .hardware-side-screen foreignObject>div{position:relative;width:1536px;height:1024px}
:where(html.p-index) .hardware-side-screen img{position:absolute;left:0;top:0;display:block;width:763px;height:448px;max-width:none;transform-origin:0 0;transform:matrix3d(0.289746601231,0.0612732357818,0,-0.000243894300655,0.167447141064,0.876555967355,0,4.54922658753e-05,0,0,1,0,76,243,0,1);pointer-events:none}

/* Visible against the device's dark shell as well as the pale photography. */
:where(html.p-index) .product-anatomy-hotspot>span{width:34px;height:34px;color:#fff;background:#175ac4;border:2px solid #fff;box-shadow:0 0 0 2px #175ac4,0 4px 12px #071a3b66;transition:background .18s,box-shadow .18s,transform .18s}
:where(html.p-index) .product-anatomy-hotspot>span::after{background:linear-gradient(currentColor,currentColor) center/12px 2px no-repeat,linear-gradient(currentColor,currentColor) center/2px 12px no-repeat}
:where(html.p-index) .product-anatomy-hotspot:hover>span{background:#08449c;border-color:#fff;transform:scale(1.08);box-shadow:0 0 0 3px #175ac4,0 5px 15px #071a3b66}
:where(html.p-index) .product-anatomy-hotspot.is-active>span{background:#073776;border-color:#fff;transform:scale(1.1);box-shadow:0 0 0 3px #4ba4ff,0 0 0 7px #398bf438,0 5px 15px #071a3b66}
:where(html.p-index) .product-anatomy-hotspot:focus-visible{outline:3px solid #fff;outline-offset:2px;box-shadow:0 0 0 5px #175ac4}
@media(max-width:420px){:where(html.p-index) .product-anatomy-hotspot>span{width:30px;height:30px}}
@media(prefers-reduced-motion:reduce){:where(html.p-index) .product-anatomy-hotspot>span{transition:none}}

/* ============================================================
   BÖLÜM: sections/product-story  (eski: assets/css/sections/product-story.css)
   Kapsam: p-index
   ============================================================ */
/* Full-bleed scenes composed around the real product, with a clear copy area. */
:where(html.p-index) .product-story{position:relative;isolation:isolate;display:flex;align-items:center;min-height:clamp(520px,43vw,760px);padding:80px max(6vw,24px);overflow:hidden;scroll-margin-top:82px;background:#e9edf1}
:where(html.p-index) .product-story-background{display:block;position:absolute;inset:0;z-index:-2}
:where(html.p-index) .product-story-background img{display:block;width:100%;height:100%;object-fit:cover;object-position:center;border-radius:0;filter:none;transform:none}
:where(html.p-index) .product-story::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none}
:where(html.p-index) .product-story--technology::before{background:linear-gradient(90deg,rgba(243,246,249,.94),rgba(243,246,249,.78) 29%,rgba(243,246,249,.2) 48%,transparent 59%)}
:where(html.p-index) .product-story-copy{position:relative;width:44%;max-width:660px;min-width:0}
:where(html.p-index) .product-story-copy .i-kicker{display:block;margin-bottom:24px;color:#174da5}
:where(html.p-index) .product-story h2{margin:0;font-family:var(--display);font-size:clamp(38px,4.45vw,76px);font-weight:400;line-height:1.2;letter-spacing:-.035em;color:#172433;text-wrap:balance}
:where(html.p-index) .product-story h2>span{display:block}
:where(html.p-index) .product-story h2 b{font-weight:500;color:#1756b9}
:where(html.p-index) .product-story--field{background:#0c1722}
:where(html.p-index) .product-story--field::before{background:linear-gradient(90deg,rgba(7,18,31,.86),rgba(7,18,31,.58) 35%,rgba(7,18,31,.08) 59%,transparent 75%)}
:where(html.p-index) .product-story--field h2{color:#fff}
:where(html.p-index) .product-story--field h2 b{color:#8dbaff}
@media(min-width:861px) and (max-width:1100px){:where(html.p-index) .product-story{min-height:480px;padding-inline:5%}:where(html.p-index) .product-story-copy{width:43%}:where(html.p-index) .product-story h2{font-size:42px}}
@media(max-width:860px){
 :where(html.p-index) .product-story{align-items:flex-end;min-height:clamp(560px,145vw,700px);padding:360px 28px 40px}
 :where(html.p-index) .product-story-background{bottom:auto;height:min(100vw,480px)}
 :where(html.p-index) .product-story-background img{object-position:85% center}
 :where(html.p-index) .product-story-background::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 76%,#e9edf1)}
 :where(html.p-index) .product-story::before{display:none}
 :where(html.p-index) .product-story-copy{width:100%;max-width:640px}
 :where(html.p-index) .product-story-copy .i-kicker{margin-bottom:18px;font-size:12px}
 :where(html.p-index) .product-story h2{font-size:clamp(34px,6vw,48px);line-height:1.18;letter-spacing:-.025em}
 :where(html.p-index) .product-story--field .product-story-background img{object-position:81% center}
 :where(html.p-index) .product-story--field .product-story-background::after{background:linear-gradient(180deg,transparent 65%,#0c1722)}
 :where(html.p-index) .product-story--field{min-height:clamp(530px,138vw,650px)}
}
@media(max-width:420px){:where(html.p-index) .product-story{padding:310px 24px 34px;min-height:560px}:where(html.p-index) .product-story--field{min-height:520px}:where(html.p-index) .product-story h2{font-size:35px}:where(html.p-index) .product-story-copy .i-kicker{font-size:11px}}
/* Retain a visible word gap when translation splits accent text into nodes. */
:where(html.p-index) .product-story h2 b{margin-inline:.08em}

/* ============================================================
   BÖLÜM: components/service-banners  (eski: assets/css/components/service-banners.css)
   Kapsam: p-iletisim, p-otomobil-anahtari
   ============================================================ */
/* Full-width editorial service banners; separate image and reading areas on mobile. */
:where(html.p-iletisim,html.p-otomobil-anahtari) .service-banner{position:relative;isolation:isolate;display:flex;align-items:center;min-height:520px;margin-top:78px;padding:58px 0;background:#f2f5fa;overflow:hidden}
:where(html.p-iletisim,html.p-otomobil-anahtari) .service-banner-art{position:absolute;inset:0;z-index:-2;display:block}
:where(html.p-iletisim,html.p-otomobil-anahtari) .service-banner-art img{display:block;width:100%;height:100%;object-fit:cover;object-position:center}
:where(html.p-iletisim,html.p-otomobil-anahtari) .service-banner::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(247,249,252,.6),rgba(247,249,252,.1) 52%,transparent 68%);pointer-events:none}
:where(html.p-iletisim,html.p-otomobil-anahtari) .service-banner>.container{width:min(var(--container,1240px),calc(100% - 48px));margin-inline:auto}
:where(html.p-iletisim,html.p-otomobil-anahtari) .service-banner-copy{width:53%;max-width:640px}
:where(html.p-iletisim,html.p-otomobil-anahtari) .service-banner .breadcrumbs{margin:0 0 30px;font-size:13px;line-height:1.6}
:where(html.p-iletisim,html.p-otomobil-anahtari) .service-banner .eyebrow{display:block;margin-bottom:18px;color:#174ba8;font-size:13px;font-weight:700;letter-spacing:.16em}
:where(html.p-iletisim,html.p-otomobil-anahtari) .service-banner h1{margin:0 0 22px;color:#10192c;font-size:clamp(36px,4.2vw,60px);font-weight:700;line-height:1.14;letter-spacing:-.045em;text-transform:none}
:where(html.p-iletisim,html.p-otomobil-anahtari) .service-banner p{max-width:560px;margin:0 0 28px;color:#526783;font-size:17px;line-height:1.8}
:where(html.p-iletisim,html.p-otomobil-anahtari) .service-banner p:last-child{margin-bottom:0}
:where(html.p-iletisim,html.p-otomobil-anahtari) .service-banner .button{gap:12px;min-height:48px}
:where(html.p-iletisim,html.p-otomobil-anahtari) .service-banner .button svg{width:21px;height:21px;flex:0 0 21px}
@media(min-width:1800px){:where(html.p-iletisim,html.p-otomobil-anahtari) .service-banner{min-height:580px}}
@media(max-width:1050px) and (min-width:801px){:where(html.p-iletisim,html.p-otomobil-anahtari) .service-banner{min-height:460px}:where(html.p-iletisim,html.p-otomobil-anahtari) .service-banner-copy{width:56%}:where(html.p-iletisim,html.p-otomobil-anahtari) .service-banner h1{font-size:42px}:where(html.p-iletisim,html.p-otomobil-anahtari) .service-banner p{font-size:16px}:where(html.p-iletisim,html.p-otomobil-anahtari) .service-banner-art img{object-position:60% center}}
@media(max-width:800px){
:where(html.p-iletisim,html.p-otomobil-anahtari) .service-banner{display:block;min-height:0;margin-top:68px;padding:0 0 38px;overflow:hidden}
:where(html.p-iletisim,html.p-otomobil-anahtari) .service-banner-art{position:relative;inset:auto;z-index:0;height:clamp(220px,58vw,390px)}
:where(html.p-iletisim,html.p-otomobil-anahtari) .service-banner-art img{object-position:84% center}
:where(html.p-iletisim,html.p-otomobil-anahtari) .service-banner--key .service-banner-art img{object-position:83% center}
:where(html.p-iletisim,html.p-otomobil-anahtari) .service-banner::after{display:none}
:where(html.p-iletisim,html.p-otomobil-anahtari) .service-banner-art::after{content:"";position:absolute;inset:65% 0 0;background:linear-gradient(transparent,#f2f5fa);pointer-events:none}
:where(html.p-iletisim,html.p-otomobil-anahtari) .service-banner>.container{position:relative;width:100%;padding:18px 24px 0}
:where(html.p-iletisim,html.p-otomobil-anahtari) .service-banner-copy{width:100%;max-width:650px;margin:auto}
:where(html.p-iletisim,html.p-otomobil-anahtari) .service-banner .breadcrumbs{margin-bottom:22px;font-size:12px}
:where(html.p-iletisim,html.p-otomobil-anahtari) .service-banner .eyebrow{margin-bottom:14px;font-size:11px}
:where(html.p-iletisim,html.p-otomobil-anahtari) .service-banner h1{font-size:clamp(32px,6.5vw,46px);line-height:1.18;letter-spacing:-.035em;margin-bottom:18px}
:where(html.p-iletisim,html.p-otomobil-anahtari) .service-banner p{max-width:100%;font-size:15px;line-height:1.8;margin-bottom:24px}
}
@media(max-width:360px){:where(html.p-iletisim,html.p-otomobil-anahtari) .service-banner>.container{padding-right:20px;padding-left:20px}:where(html.p-iletisim,html.p-otomobil-anahtari) .service-banner-art{height:210px}:where(html.p-iletisim,html.p-otomobil-anahtari) .service-banner h1{font-size:30px}}

/* İletişim: kompakt banner + hızlı arama/WhatsApp/e-posta; bilgiler kaydırmadan görünür. */
:where(html.p-iletisim,html.p-otomobil-anahtari) .service-banner--contact{min-height:340px;padding:36px 0}
:where(html.p-iletisim,html.p-otomobil-anahtari) .service-banner--contact .breadcrumbs{margin-bottom:16px}
:where(html.p-iletisim,html.p-otomobil-anahtari) .service-banner--contact h1{margin-bottom:10px}
:where(html.p-iletisim,html.p-otomobil-anahtari) .service-banner--contact p{margin-bottom:22px;font-size:16px;line-height:1.6}
:where(html.p-iletisim,html.p-otomobil-anahtari) .contact-quick-actions{display:flex;flex-wrap:wrap;gap:10px}
:where(html.p-iletisim,html.p-otomobil-anahtari) .contact-quick{display:inline-flex;align-items:center;gap:12px;min-height:58px;padding:9px 18px 9px 10px;border:1px solid rgba(13,71,161,.18);border-radius:12px;background:rgba(255,255,255,.94);color:#10192c;text-decoration:none;box-shadow:0 10px 26px rgba(13,71,161,.1);transition:transform .2s,box-shadow .2s,border-color .2s}
:where(html.p-iletisim,html.p-otomobil-anahtari) .contact-quick:hover{transform:translateY(-2px);border-color:#0d47a1;box-shadow:0 14px 30px rgba(13,71,161,.16)}
:where(html.p-iletisim,html.p-otomobil-anahtari) .contact-quick i{display:grid;place-items:center;width:38px;height:38px;flex:0 0 38px;border-radius:10px;background:#edf4fb;color:#0d47a1}
:where(html.p-iletisim,html.p-otomobil-anahtari) .contact-quick svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
:where(html.p-iletisim,html.p-otomobil-anahtari) .contact-quick span{display:flex;flex-direction:column;line-height:1.25}
:where(html.p-iletisim,html.p-otomobil-anahtari) .contact-quick small{color:#65768a;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
:where(html.p-iletisim,html.p-otomobil-anahtari) .contact-quick b{font-size:15px;font-weight:700;white-space:nowrap}
:where(html.p-iletisim,html.p-otomobil-anahtari) .contact-quick--call{border-color:#0d47a1;background:#0d47a1;color:#fff}
:where(html.p-iletisim,html.p-otomobil-anahtari) .contact-quick--call i{background:rgba(255,255,255,.16);color:#fff}
:where(html.p-iletisim,html.p-otomobil-anahtari) .contact-quick--call small{color:rgba(255,255,255,.78)}
:where(html.p-iletisim,html.p-otomobil-anahtari) .contact-quick--call:hover{background:#093372}
:where(html.p-iletisim,html.p-otomobil-anahtari) .contact-quick--whatsapp i{background:#e7f8ee;color:#1a9e52}
:where(html.p-iletisim,html.p-otomobil-anahtari) .contact-page .page-section{padding-top:clamp(36px,4vw,56px)}
@media(min-width:1800px){:where(html.p-iletisim,html.p-otomobil-anahtari) .service-banner--contact{min-height:380px}}
@media(max-width:1050px) and (min-width:801px){:where(html.p-iletisim,html.p-otomobil-anahtari) .service-banner--contact{min-height:320px}:where(html.p-iletisim,html.p-otomobil-anahtari) .service-banner--contact .service-banner-copy{width:62%}}
@media(max-width:800px){
:where(html.p-iletisim,html.p-otomobil-anahtari) .service-banner--contact{padding-bottom:26px}
:where(html.p-iletisim,html.p-otomobil-anahtari) .service-banner--contact .service-banner-art{height:clamp(130px,34vw,220px)}
:where(html.p-iletisim,html.p-otomobil-anahtari) .service-banner--contact .breadcrumbs{margin-bottom:12px}
:where(html.p-iletisim,html.p-otomobil-anahtari) .service-banner--contact h1{margin-bottom:8px}
:where(html.p-iletisim,html.p-otomobil-anahtari) .service-banner--contact p{margin-bottom:18px;font-size:15px}
:where(html.p-iletisim,html.p-otomobil-anahtari) .contact-quick-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}
:where(html.p-iletisim,html.p-otomobil-anahtari) .contact-quick--call{grid-column:1/-1;justify-content:center;min-height:56px}
:where(html.p-iletisim,html.p-otomobil-anahtari) .contact-quick{padding-right:12px}
:where(html.p-iletisim,html.p-otomobil-anahtari) .contact-quick b{font-size:14px}
:where(html.p-iletisim,html.p-otomobil-anahtari) .contact-page .page-section{padding-top:28px}
}
@media(max-width:360px){:where(html.p-iletisim,html.p-otomobil-anahtari) .contact-quick-actions{grid-template-columns:1fr}:where(html.p-iletisim,html.p-otomobil-anahtari) .service-banner--contact .service-banner-art{height:120px}}

/* ============================================================
   BÖLÜM: components/product-commerce  (eski: assets/css/components/product-commerce.css)
   Kapsam: p-index, p-urunler, p-zed-full-plus
   ============================================================ */
:where(html.p-index,html.p-urunler,html.p-zed-full-plus) .purchase-actions{display:flex;align-items:center;flex-wrap:wrap;gap:12px;margin-top:24px}
:where(html.p-index,html.p-urunler,html.p-zed-full-plus) .i-product-body .purchase-actions>a{margin:0}
:where(html.p-index,html.p-urunler,html.p-zed-full-plus) .zfp-development,:where(html.p-index,html.p-urunler,html.p-zed-full-plus) .zfp-downloads,:where(html.p-index,html.p-urunler,html.p-zed-full-plus) .zfp-purchase{padding:72px 0;scroll-margin-top:96px}
:where(html.p-index,html.p-urunler,html.p-zed-full-plus) .zfp-development{background:#f5f8fc;border-block:1px solid #dce6f2}
:where(html.p-index,html.p-urunler,html.p-zed-full-plus) .development-heading{max-width:920px;margin-bottom:36px}
:where(html.p-index,html.p-urunler,html.p-zed-full-plus) .development-heading h2,:where(html.p-index,html.p-urunler,html.p-zed-full-plus) .zfp-purchase h2{font-size:clamp(30px,3.2vw,44px);line-height:1.22;letter-spacing:-.04em;font-weight:500;margin:16px 0 20px;color:#13233a}
:where(html.p-index,html.p-urunler,html.p-zed-full-plus) .development-heading>p,:where(html.p-index,html.p-urunler,html.p-zed-full-plus) .development-grid p,:where(html.p-index,html.p-urunler,html.p-zed-full-plus) .zfp-purchase p{font-size:15px;line-height:1.85;color:#53647c;margin:0}
:where(html.p-index,html.p-urunler,html.p-zed-full-plus) .development-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}
:where(html.p-index,html.p-urunler,html.p-zed-full-plus) .development-grid article{min-width:0;padding:24px 0 0;border-top:1px solid #c6d7ed}
:where(html.p-index,html.p-urunler,html.p-zed-full-plus) .development-number{display:block;color:#1755aa;font-size:12px;margin-bottom:18px}
:where(html.p-index,html.p-urunler,html.p-zed-full-plus) .development-grid h3{font-size:21px;line-height:1.4;color:#13233a;margin:0 0 12px}
:where(html.p-index,html.p-urunler,html.p-zed-full-plus) .zfp-downloads{background:#fff}
:where(html.p-index,html.p-urunler,html.p-zed-full-plus) .zfp-downloads .software-grid{margin-top:0}
:where(html.p-index,html.p-urunler,html.p-zed-full-plus) .zfp-downloads .software-grid article{display:flex;flex-direction:column;align-items:flex-start;min-width:0}
:where(html.p-index,html.p-urunler,html.p-zed-full-plus) .zfp-downloads .software-grid article>div{display:flex;flex-direction:column;flex:1;width:100%;align-items:flex-start}
:where(html.p-index,html.p-urunler,html.p-zed-full-plus) .zfp-downloads .software-grid a{margin-top:auto}
:where(html.p-index,html.p-urunler,html.p-zed-full-plus) .zfp-downloads .software-grid p{margin-bottom:24px}
:where(html.p-index,html.p-urunler,html.p-zed-full-plus) .zfp-purchase{background:#edf3fc;border-top:1px solid #dce6f2}
:where(html.p-index,html.p-urunler,html.p-zed-full-plus) .zfp-purchase>.container{display:flex;align-items:center;justify-content:space-between;gap:40px}
:where(html.p-index,html.p-urunler,html.p-zed-full-plus) .zfp-purchase>.container>div:first-child{max-width:700px}
:where(html.p-index,html.p-urunler,html.p-zed-full-plus) .zfp-purchase .purchase-actions{flex-shrink:0;margin:0}
:where(html.p-index,html.p-urunler,html.p-zed-full-plus) .product-detail-visual-hero .actions{flex-wrap:wrap;gap:12px}
:where(html.p-index,html.p-urunler,html.p-zed-full-plus) .product-credit-note{display:flex;flex-wrap:wrap;gap:8px 20px;align-items:center;margin-top:22px;padding:16px 18px;border-left:3px solid #1755aa;background:#eaf2fc;border-radius:0 10px 10px 0;font-size:14px;line-height:1.6;color:#17447d}
:where(html.p-index,html.p-urunler,html.p-zed-full-plus) .product-credit-note strong{font-weight:700}
:where(html.p-index,html.p-urunler,html.p-zed-full-plus) .product-credit-note+ .purchase-actions{margin-top:18px}
:where(html.p-index,html.p-urunler,html.p-zed-full-plus) .zfp-downloads .software-grid article>.zfp-download-art{flex:none;display:flex;align-items:center;justify-content:center;width:100%;height:190px;padding:18px;background:#f2f6fc}
:where(html.p-index,html.p-urunler,html.p-zed-full-plus) .zfp-downloads .zfp-download-art img{width:100%;max-width:250px;height:100%;object-fit:contain;margin:0;padding:0;background:transparent}
:where(html.p-index,html.p-urunler,html.p-zed-full-plus) .zfp-download-art--icon svg{width:64px;height:64px;color:#1755aa}
@media(max-width:860px){:where(html.p-index,html.p-urunler,html.p-zed-full-plus) .zfp-development,:where(html.p-index,html.p-urunler,html.p-zed-full-plus) .zfp-downloads,:where(html.p-index,html.p-urunler,html.p-zed-full-plus) .zfp-purchase{padding:48px 0}:where(html.p-index,html.p-urunler,html.p-zed-full-plus) .development-grid{grid-template-columns:1fr;gap:24px}:where(html.p-index,html.p-urunler,html.p-zed-full-plus) .development-heading{margin-bottom:28px}:where(html.p-index,html.p-urunler,html.p-zed-full-plus) .zfp-purchase>.container{flex-direction:column;align-items:flex-start;gap:24px}:where(html.p-index,html.p-urunler,html.p-zed-full-plus) .zfp-downloads .software-grid{grid-template-columns:1fr}}
@media(max-width:480px){:where(html.p-index,html.p-urunler,html.p-zed-full-plus) .purchase-actions{align-items:stretch}:where(html.p-index,html.p-urunler,html.p-zed-full-plus) .purchase-actions>.button{flex:1 1 100%;width:100%}:where(html.p-index,html.p-urunler,html.p-zed-full-plus) .zfp-purchase .purchase-actions{width:100%}}

@media(max-width:860px){:where(html.p-index,html.p-urunler,html.p-zed-full-plus) .zfp-downloads .software-grid article>.zfp-download-art--icon{height:112px}:where(html.p-index,html.p-urunler,html.p-zed-full-plus) .zfp-download-art--icon svg{width:52px;height:52px}}

/* ============================================================
   BÖLÜM: components/site-search  (eski: assets/css/components/site-search.css)
   Kapsam: tüm sayfalar
   ============================================================ */
.site-search-toggle{display:inline-flex;align-items:center;justify-content:center;flex:0 0 42px;width:42px;height:44px;padding:10px;border:1px solid #d3e0f1;border-radius:10px;background:#f4f8fd;color:#164c9d;cursor:pointer}
.site-search-toggle svg{width:21px;height:21px;flex:none}
.site-search-toggle:hover{background:#e7effa;border-color:#7da5de}
.site-search-toggle:focus-visible,.site-search-dialog :focus-visible:not(input){outline:3px solid #4287e3;outline-offset:3px}
.i-nav.is-over-hero .site-search-toggle{color:#fff;background:#ffffff16;border-color:#ffffff55}
header.mobile-nav-header .site-search-toggle{position:relative;z-index:4;margin-right:8px}
.site-search-dialog{box-sizing:border-box;width:min(700px,calc(100% - 32px));max-width:none;max-height:calc(100dvh - 48px);margin:24px auto;padding:28px;border:1px solid #d6e3f2;border-radius:20px;background:#fff;color:#14223a;box-shadow:0 24px 90px #07172d40;overflow:auto;overscroll-behavior:contain;font-family:var(--body,"Plus Jakarta Sans",sans-serif)}
.site-search-dialog::backdrop{background:#071b3c80;backdrop-filter:blur(5px)}
.site-search-top{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:26px}
.site-search-top h2{margin:0;font-size:27px;line-height:1.3;font-weight:600;letter-spacing:-.035em}
.site-search-close{display:grid;place-items:center;width:44px;height:44px;flex:0 0 44px;border:1px solid #d4e0ef;border-radius:10px;background:#f4f8fd;color:#164c9d;cursor:pointer}
.site-search-close svg{width:22px;height:22px}
.site-search-form label{display:block;font-size:13px;font-weight:600;margin-bottom:10px}
.site-search-input-wrap{display:flex;align-items:center;gap:12px;border:1px solid #b9cde8;border-radius:12px;padding:0 14px;background:#f7faff}
.site-search-input-wrap:focus-within{border-color:#1958b6;box-shadow:none}
.site-search-input-wrap>svg{width:21px;height:21px;flex:0 0 21px;color:#1755a8}
.site-search-input-wrap input{width:100%;min-width:0;min-height:54px;margin:0;padding:12px 0;border:0;background:transparent;color:#14223a;font:inherit;font-size:16px;outline:0;box-shadow:none}
.site-search-form p{margin:12px 0 0;color:#62748c;font-size:12px;line-height:1.7}
.site-search-suggestions{display:flex;gap:8px;flex-wrap:wrap;margin-top:24px}
.site-search-suggestions button,.site-search-retry{border:1px solid #cbdcf0;border-radius:9px;padding:10px 14px;min-height:44px;background:#f1f6fc;color:#174c9b;font:inherit;font-size:13px;cursor:pointer}
.site-search-status{font-size:13px;line-height:1.7;color:#52667f;margin:22px 0 12px}
.site-search-status:empty{display:none}
.site-search-results{display:grid;gap:10px;list-style:none;padding:0;margin:0}
.site-search-results a{position:relative;display:block;padding:18px 48px 18px 18px;border:1px solid #dce6f2;border-radius:12px;background:#f8fafd;color:#122844;text-decoration:none;overflow-wrap:anywhere}
.site-search-results a:hover{background:#edf4fd;border-color:#9dbce5}
.site-search-results strong{display:block;font-size:16px;font-weight:600;line-height:1.45}
.site-search-results a>span{display:block;font-size:13px;line-height:1.75;color:#5a6f88;margin-top:7px}
.site-search-results .site-arrow{position:absolute!important;right:16px;top:21px;color:#1755aa}
.site-search-dialog [hidden]{display:none!important}
.contact-info-item .contact-map-label{display:block;margin-top:7px;color:#164c9d;font-size:12px;font-weight:600;line-height:1.5}
a.contact-info-address{grid-template-columns:auto minmax(0,1fr) auto}
@media(max-width:600px){.site-search-dialog{width:calc(100% - 20px);margin:10px auto;max-height:calc(100dvh - 20px);padding:20px 16px;border-radius:16px}.site-search-top{margin-bottom:22px}.site-search-top h2{font-size:24px}.site-search-results a{padding:16px 40px 16px 14px}.site-search-results strong{font-size:15px}}
@media(max-width:380px){header.mobile-nav-header .site-search-toggle{width:36px;flex-basis:36px;padding:7px;margin-right:6px}header.mobile-nav-header .mobile-header-language{margin-right:6px}}

.site-search-dialog .site-search-input-wrap input:focus-visible{outline:none;box-shadow:none}

/* ============================================================
   BÖLÜM: components/career-revision  (eski: assets/css/components/career-revision.css)
   Kapsam: p-index, p-otomobil-anahtari
   ============================================================ */
/* Shared, scoped additions for the approved September 30 revisions. */
:where(html.p-index,html.p-otomobil-anahtari) .career-hero-benefits{display:flex;flex-wrap:wrap;gap:12px 24px;padding:0;margin:24px 0 0;list-style:none;color:#fff;font-size:13px;line-height:1.6}
:where(html.p-index,html.p-otomobil-anahtari) .career-hero-benefits li{display:flex;gap:8px;align-items:center}:where(html.p-index,html.p-otomobil-anahtari) .career-hero-benefits li::before{content:'';width:5px;height:5px;border-radius:50%;background:#8bbaff;flex:none}
:where(html.p-index,html.p-otomobil-anahtari) .career-home{max-width:1440px;margin:auto;padding:64px var(--gutter,32px) 80px;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:32px 64px;align-items:center}
:where(html.p-index,html.p-otomobil-anahtari) .career-home-intro h2,:where(html.p-index,html.p-otomobil-anahtari) .career-assurance h2{margin:16px 0 22px;font-size:clamp(30px,3.3vw,46px);line-height:1.2;letter-spacing:-.045em;color:#121d31}
:where(html.p-index,html.p-otomobil-anahtari) .career-home-intro>p{line-height:1.8;color:#526780;margin-bottom:26px}:where(html.p-index,html.p-otomobil-anahtari) .career-benefit-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
:where(html.p-index,html.p-otomobil-anahtari) .career-benefit-grid article{display:flex;flex-direction:column;align-items:flex-start;border-top:1px solid #c9d9f0;padding:24px 0 0;min-width:0}
:where(html.p-index,html.p-otomobil-anahtari) .career-benefit-number{font-size:13px;color:#1752a8;margin-bottom:28px;font-weight:600}:where(html.p-index,html.p-otomobil-anahtari) .career-benefit-grid h3{margin:0 0 14px;font-size:20px;line-height:1.4;letter-spacing:-.025em;color:#142139}:where(html.p-index,html.p-otomobil-anahtari) .career-benefit-grid p{color:#526780;font-size:14px;line-height:1.85;margin:0 0 24px}
:where(html.p-index,html.p-otomobil-anahtari) .career-inline-link{display:inline-flex;align-items:center;gap:12px;margin-top:auto;color:#1550a7;font-size:14px;line-height:1.6;font-weight:600}
:where(html.p-index,html.p-otomobil-anahtari) .career-assurance{padding:64px 0 76px;background:#f3f7fc}:where(html.p-index,html.p-otomobil-anahtari) .career-assurance .career-benefit-grid{margin-top:38px;gap:40px}
:where(html.p-index,html.p-otomobil-anahtari) .i-products .i-product-media img[src*="iea-technical-support-v2"]{object-fit:cover!important;object-position:50% 38%!important}

@media(max-width:620px){:where(html.p-index,html.p-otomobil-anahtari) .career-home{padding:38px 24px 48px;gap:28px}:where(html.p-index,html.p-otomobil-anahtari) .career-benefit-grid{grid-template-columns:1fr;gap:22px}:where(html.p-index,html.p-otomobil-anahtari) .career-benefit-grid article{position:relative;padding:22px 0 0 42px}:where(html.p-index,html.p-otomobil-anahtari) .career-benefit-number{position:absolute;left:0;top:25px;margin:0}:where(html.p-index,html.p-otomobil-anahtari) .career-benefit-grid h3{font-size:21px}:where(html.p-index,html.p-otomobil-anahtari) .career-benefit-grid p{margin-bottom:12px}:where(html.p-index,html.p-otomobil-anahtari) .career-assurance{padding:42px 0}:where(html.p-index,html.p-otomobil-anahtari) .career-assurance .career-benefit-grid{gap:22px}:where(html.p-index,html.p-otomobil-anahtari) .career-hero-benefits{gap:9px 18px;font-size:12px}}

/* Homepage invitation: product preview and three service benefits. */
:where(html.p-index,html.p-otomobil-anahtari) .career-home-intro{max-width:620px}
:where(html.p-index,html.p-otomobil-anahtari) .career-home-intro>p{font-size:17px;max-width:540px}
:where(html.p-index,html.p-otomobil-anahtari) .career-home-preview{position:relative;isolation:isolate;display:flex;align-items:center;justify-content:center;min-width:0;aspect-ratio:1.4;border-radius:26px;overflow:hidden;background:radial-gradient(ellipse at 55% 55%,#255fa9 0%,#11345e 52%,#0b213d 100%);color:#fff;box-shadow:0 20px 42px -30px #123b73}
:where(html.p-index,html.p-otomobil-anahtari) .career-home-preview::before,:where(html.p-index,html.p-otomobil-anahtari) .career-home-preview::after{content:"";position:absolute;z-index:-1;width:85%;aspect-ratio:1;border:1px solid #9bc6ff26;border-radius:50%;transform:translate(15%,20%)}
:where(html.p-index,html.p-otomobil-anahtari) .career-home-preview::after{width:115%}
:where(html.p-index,html.p-otomobil-anahtari) .career-preview-heading{position:absolute;inset:23px 25px auto;display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:13px;color:#e1edff}
:where(html.p-index,html.p-otomobil-anahtari) .career-preview-tag{display:inline-flex;align-items:center;gap:8px;padding:9px 13px;border:1px solid #fff;border-radius:30px;background:#fff;color:#123b73;font-size:14px;font-weight:600;line-height:1.4;white-space:nowrap;box-shadow:0 3px 12px #03112724}
:where(html.p-index,html.p-otomobil-anahtari) .career-preview-tag::before{content:"";width:7px;height:7px;flex:none;border-radius:50%;background:#2463c8}
:where(html.p-index,html.p-otomobil-anahtari) .career-preview-device{position:relative;display:block;width:82%;aspect-ratio:4/3;margin-top:48px;filter:drop-shadow(0 18px 14px #03112766);transition:transform .35s ease}
:where(html.p-index,html.p-otomobil-anahtari) .career-preview-body{display:block;width:100%;height:auto}
:where(html.p-index,html.p-otomobil-anahtari) .career-preview-screen{position:absolute;z-index:2;left:28.5%;top:34%;width:43%;height:34.6%;object-fit:fill;border-radius:1px}
:where(html.p-index,html.p-otomobil-anahtari) .career-preview-arrow{position:absolute;right:23px;bottom:22px;display:grid;place-items:center;width:44px;height:44px;border:1px solid #ffffff55;border-radius:50%;background:#ffffff12;transition:background .2s ease}
:where(html.p-index,html.p-otomobil-anahtari) .career-home-preview:hover .career-preview-device{transform:translateY(-5px)}
:where(html.p-index,html.p-otomobil-anahtari) .career-home-preview:hover .career-preview-arrow{background:#ffffff2b}
:where(html.p-index,html.p-otomobil-anahtari) .career-home-preview:focus-visible{outline:3px solid #2463c8;outline-offset:5px}
:where(html.p-index,html.p-otomobil-anahtari) .career-home .career-benefit-grid{grid-column:1/-1;gap:18px;align-self:stretch}
:where(html.p-index,html.p-otomobil-anahtari) .career-home .career-benefit-grid article{border:1px solid #d2dff1;border-radius:18px;background:linear-gradient(135deg,#fff,#f3f7fd);padding:24px 26px;position:relative}
:where(html.p-index,html.p-otomobil-anahtari) .career-benefit-top{display:flex;align-items:center;justify-content:space-between;width:100%;margin-bottom:19px}
:where(html.p-index,html.p-otomobil-anahtari) .career-benefit-icon{display:grid;place-items:center;width:44px;height:44px;border:1px solid #d9e5f7;border-radius:13px;background:#edf4ff;color:#1851ad}
:where(html.p-index,html.p-otomobil-anahtari) .career-benefit-icon svg{width:25px;height:25px}
:where(html.p-index,html.p-otomobil-anahtari) .career-home .career-benefit-number{position:static;margin:0;color:#7a91af;font-size:12px;letter-spacing:.08em}
:where(html.p-index,html.p-otomobil-anahtari) .career-home .career-benefit-grid h3{font-size:20px;margin-bottom:10px}
:where(html.p-index,html.p-otomobil-anahtari) .career-home .career-benefit-grid p{margin:0;font-size:14px;line-height:1.75}
@media(max-width:1100px){:where(html.p-index,html.p-otomobil-anahtari) .career-home{gap:28px 32px}:where(html.p-index,html.p-otomobil-anahtari) .career-home-intro h2{font-size:36px}:where(html.p-index,html.p-otomobil-anahtari) .career-preview-heading{inset:18px 18px auto}:where(html.p-index,html.p-otomobil-anahtari) .career-home .career-benefit-grid article{padding:22px}}
@media(max-width:760px){:where(html.p-index,html.p-otomobil-anahtari) .career-home{grid-template-columns:1fr;gap:26px;padding-top:40px;padding-bottom:48px}:where(html.p-index,html.p-otomobil-anahtari) .career-home-intro{max-width:620px}:where(html.p-index,html.p-otomobil-anahtari) .career-home-preview{width:100%;max-width:540px;justify-self:center;aspect-ratio:1.4}:where(html.p-index,html.p-otomobil-anahtari) .career-home .career-benefit-grid{grid-template-columns:1fr;gap:12px}:where(html.p-index,html.p-otomobil-anahtari) .career-home .career-benefit-grid article{padding:22px 22px 22px 84px}:where(html.p-index,html.p-otomobil-anahtari) .career-benefit-top{position:absolute;top:23px;left:22px;width:44px;margin:0}:where(html.p-index,html.p-otomobil-anahtari) .career-home .career-benefit-number{display:none}:where(html.p-index,html.p-otomobil-anahtari) .career-home .career-benefit-grid h3{font-size:19px}:where(html.p-index,html.p-otomobil-anahtari) .career-home .career-benefit-grid p{font-size:14px}:where(html.p-index,html.p-otomobil-anahtari) .career-home-intro h2{font-size:clamp(30px,6vw,38px)}}
@media(prefers-reduced-motion:reduce){:where(html.p-index,html.p-otomobil-anahtari) .career-preview-device,:where(html.p-index,html.p-otomobil-anahtari) .career-preview-arrow{transition:none}:where(html.p-index,html.p-otomobil-anahtari) .career-home-preview:hover .career-preview-device{transform:none}}

@media(max-width:420px){:where(html.p-index,html.p-otomobil-anahtari) .career-preview-heading{inset:14px 14px auto;gap:8px;font-size:11px}:where(html.p-index,html.p-otomobil-anahtari) .career-preview-tag{gap:6px;padding:8px 10px}}

/* ============================================================
   BÖLÜM: sections/engineering-layers  (eski: assets/css/sections/engineering-layers.css)
   Kapsam: p-index
   ============================================================ */
:where(html.p-index) .eco-photo-engineering{background:radial-gradient(ellipse at 50% 35%,#f7f8fa,#e1e7ee);min-height:0;padding:22px;display:flex;flex-direction:column;gap:14px;color:#18334d}:where(html.p-index) .eco-art-top{display:flex;justify-content:space-between;align-items:center;gap:16px;font-size:12px;z-index:2}:where(html.p-index) .eco-explode{border:1px solid #9db0c7;background:#ffffffb0;color:#24456b;border-radius:25px;padding:10px 14px;font:inherit;cursor:pointer}:where(html.p-index) .eco-photo-stage{position:relative;width:100%;max-width:480px;margin-inline:auto;flex-shrink:0;height:auto;aspect-ratio:4/3;overflow:hidden;border-radius:12px;isolation:isolate}:where(html.p-index) .eco-photo-stage img{display:block;width:100%;height:100%;object-fit:contain!important;transform-origin:50% 50%;transition:transform .8s cubic-bezier(.2,.7,.2,1);will-change:transform}:where(html.p-index) .eco-photo-stage.is-focused img{transform:scale(1.85) translate(var(--focus-x,0%),var(--focus-y,0%))}:where(html.p-index) .eco-photo-stage.is-revealed:not(.is-focused) img{animation:hardware-reveal 1.2s ease both}:where(html.p-index) .eco-layer-list{display:grid;grid-template-columns:1fr 1fr;gap:7px}:where(html.p-index) .eco-layer-list button{display:flex;align-items:center;gap:9px;min-height:44px;padding:10px 12px;border:1px solid #b7c8db;border-radius:8px;background:#ffffffb3;color:#284865;font-size:11px;line-height:1.4;text-align:left;cursor:pointer}:where(html.p-index) .eco-layer-list button>span{color:#547b9e;font-size:10px}:where(html.p-index) .eco-layer-list button[aria-pressed=true]{background:#174fa4;color:#fff;border-color:#174fa4}:where(html.p-index) .eco-layer-list button[aria-pressed=true]>span{color:#cbdfff}:where(html.p-index) .eco-art-note{color:#526e87;font-size:10px;line-height:1.6;margin:0}:where(html.p-index) .eco-software-photo{min-height:0;aspect-ratio:4/3;align-self:center;background:#d4dde4}:where(html.p-index) .eco-software-photo>img{inset:0;width:100%;height:100%;object-fit:contain!important;object-position:center}:where(html.p-index) .i-eco-panel:has(.eco-software-photo){grid-template-columns:.82fr 1.18fr}
:where(html.p-index) .i-start-footer{padding-top:38px;gap:32px}:where(html.p-index) .i-start-footer>p{font-size:clamp(25px,3vw,43px);line-height:1.28;letter-spacing:-.04em;color:#243b56;max-width:660px}:where(html.p-index) .i-start-footer>p>span:first-child{display:none}:where(html.p-index) .i-start-footer>p .start-slogan-line{display:block;margin:0;color:inherit}:where(html.p-index) .i-start-footer strong{display:block;color:#174eac;font-weight:600}:where(html.p-index) .i-start-actions{flex-shrink:0}
:where(html.p-index) .real-start .i-start-scene.is-support>img{inset:0!important;width:100%!important;height:100%!important;object-fit:cover!important;object-position:53% center!important}:where(html.p-index) .real-start .i-start-scene.is-support:after{display:block;position:absolute;inset:0;background:linear-gradient(180deg,#06182fe6 0%,#06182f9c 22%,#06182f00 48%,#06182f22 65%,#06182ff0 100%)}:where(html.p-index) .i-start-scene.is-support figcaption{top:78px}:where(html.p-index) .i-start-scene.is-support h3{max-width:15ch}:where(html.p-index) .i-start-step:last-child .i-start-mobile-visual img{object-fit:cover!important;object-position:53% center!important}
@keyframes hardware-reveal{from{opacity:0;transform:translateY(16px) scale(.94)}to{opacity:1;transform:none}}
@media(max-width:1050px){:where(html.p-index) .i-start-footer{align-items:flex-start;flex-direction:column}:where(html.p-index) .eco-photo-engineering{padding:16px}:where(html.p-index) .eco-layer-list button{font-size:10px}:where(html.p-index) .eco-art-top{font-size:10px}}
@media(max-width:760px){:where(html.p-index) .eco-photo-engineering{height:auto;min-height:0;padding:16px 12px}:where(html.p-index) .eco-photo-stage{height:auto;aspect-ratio:4/3}:where(html.p-index) .eco-layer-list button{min-height:48px;padding:8px}:where(html.p-index) .eco-explode{font-size:10px;padding:9px}:where(html.p-index) .eco-art-top{gap:7px}:where(html.p-index) .i-eco-panel:has(.eco-software-photo){grid-template-columns:1fr}:where(html.p-index) .eco-software-photo{min-height:0;height:auto;aspect-ratio:4/3}:where(html.p-index) .eco-software-photo>img{object-fit:contain!important}:where(html.p-index) .i-start-footer>p{font-size:29px}:where(html.p-index) .i-start-actions{flex-wrap:wrap;max-width:100%}}
@media(prefers-reduced-motion:reduce){:where(html.p-index) .eco-photo-stage img{transition:none;animation:none!important}}

:where(html.p-index) .i-eco-panel:has(.eco-photo-engineering){grid-template-columns:1fr 1fr}:where(html.p-index) .eco-photo-engineering{background:radial-gradient(ellipse at 45% 35%,#fff,#edf1f6);padding:18px;gap:12px;justify-content:center}:where(html.p-index) .eco-photo-engineering .eco-layer-list{grid-template-columns:repeat(3,minmax(0,1fr))}:where(html.p-index) .eco-photo-stage img{filter:drop-shadow(0 14px 12px #182f4514)}@media(max-width:1050px){:where(html.p-index) .eco-photo-engineering .eco-layer-list{grid-template-columns:1fr 1fr}}@media(max-width:760px){:where(html.p-index) .i-eco-panel:has(.eco-photo-engineering){grid-template-columns:1fr}:where(html.p-index) .eco-photo-engineering{padding:16px 10px}:where(html.p-index) .eco-photo-stage{max-width:400px;margin-inline:auto}:where(html.p-index) .eco-photo-engineering .eco-layer-list{grid-template-columns:1fr 1fr}}

@media(max-width:860px){:where(html.p-index) .i-eco-panel:has(.eco-photo-engineering){grid-template-columns:minmax(0,1fr)}:where(html.p-index) .eco-photo-engineering{margin:0 12px 12px;height:auto}}

/* ============================================================
   BÖLÜM: pages/locksmith-career  (eski: assets/css/pages/locksmith-career.css)
   Kapsam: p-index, p-otomobil-anahtari
   ============================================================ */
/* Interactive introduction using original device menu captures and real vehicle photography. */
:where(html.p-index,html.p-otomobil-anahtari) .car-key-page{background:#fff}:where(html.p-index,html.p-otomobil-anahtari) .career-opening{padding:122px 0 52px;background:linear-gradient(125deg,#fff 35%,#eef4fe)}
:where(html.p-index,html.p-otomobil-anahtari) .career-opening .breadcrumbs{margin-bottom:36px}:where(html.p-index,html.p-otomobil-anahtari) .career-opening-grid{display:grid;grid-template-columns:minmax(0,850px);gap:0;align-items:center}
:where(html.p-index,html.p-otomobil-anahtari) .career-opening h1{font-size:clamp(36px,4.4vw,62px);line-height:1.13;letter-spacing:-.045em;margin:20px 0 24px;text-transform:none;max-width:850px}:where(html.p-index,html.p-otomobil-anahtari) .career-opening p{font-size:17px;line-height:1.85;color:#526780;max-width:680px;margin:0 0 28px}

:where(html.p-index,html.p-otomobil-anahtari) .career-demo-section{padding:64px 0 50px;scroll-margin-top:90px}:where(html.p-index,html.p-otomobil-anahtari) .career-section-head{display:flex;align-items:end;gap:44px;justify-content:space-between;margin-bottom:28px}:where(html.p-index,html.p-otomobil-anahtari) .career-section-head h2{font-size:clamp(28px,3.2vw,43px);line-height:1.2;letter-spacing:-.04em;margin:14px 0 0}:where(html.p-index,html.p-otomobil-anahtari) .career-section-head>p{max-width:310px;line-height:1.8;color:#526780;font-size:14px;margin:0}
:where(html.p-index,html.p-otomobil-anahtari) .career-demo{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);border:1px solid #d4e1f4;border-radius:24px;overflow:hidden;background:#fff}
:where(html.p-index,html.p-otomobil-anahtari) .career-scene{position:relative;aspect-ratio:900/610;align-self:center;background:radial-gradient(ellipse at 70% 35%,#fff,#edf3fb 75%);isolation:isolate;overflow:hidden}
:where(html.p-index,html.p-otomobil-anahtari) .career-scene-tag{position:absolute;top:22px;left:24px;display:flex;align-items:center;gap:9px;color:#344e70;font-size:14px;font-weight:600;line-height:1.3;z-index:2}:where(html.p-index,html.p-otomobil-anahtari) .career-scene-tag i{width:7px;height:7px;flex:none;border-radius:50%;background:#1d57ad}
:where(html.p-index,html.p-otomobil-anahtari) .car-key-page .career-car{position:absolute;left:24%;top:10%;width:76%;height:auto;overflow:visible}:where(html.p-index,html.p-otomobil-anahtari) .career-door{transform-origin:330px 190px;transition:transform .7s ease,opacity .7s}:where(html.p-index,html.p-otomobil-anahtari) .career-lock{opacity:0;transform-origin:564px 110px;transition:opacity .3s}:where(html.p-index,html.p-otomobil-anahtari) .career-headlight{transition:fill .3s}
:where(html.p-index,html.p-otomobil-anahtari) .career-device{position:absolute;width:41%;left:3%;bottom:8%;}:where(html.p-index,html.p-otomobil-anahtari) .career-device>img{display:block;width:100%;height:auto;mix-blend-mode:multiply}:where(html.p-index,html.p-otomobil-anahtari) .career-device-screen{position:absolute;left:28.5%;top:34%;width:43%;height:34.6%;background:#102844;color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:5%;gap:7px;opacity:0;transition:opacity .35s;font-size:clamp(8px,.9vw,12px);line-height:1.3;text-align:center}:where(html.p-index,html.p-otomobil-anahtari) .career-screen-symbol{font-size:20px;color:#a5ceff}:where(html.p-index,html.p-otomobil-anahtari) .career-screen-progress{height:3px;width:100%;background:#ffffff30;position:relative;border-radius:9px;overflow:hidden}:where(html.p-index,html.p-otomobil-anahtari) .career-screen-progress:after{content:'';display:block;width:0;height:100%;background:#7eafff}
:where(html.p-index,html.p-otomobil-anahtari) .car-key-page .career-wire{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}:where(html.p-index,html.p-otomobil-anahtari) .career-wire path{fill:none;stroke-width:7;stroke-linecap:round;stroke-dasharray:520;stroke-dashoffset:520;transition:stroke-dashoffset .8s ease}:where(html.p-index,html.p-otomobil-anahtari) .career-wire-base{stroke:#304861}:where(html.p-index,html.p-otomobil-anahtari) .career-wire-flow{stroke:#82b7ff;stroke-width:2!important;opacity:0}:where(html.p-index,html.p-otomobil-anahtari) .career-wire rect{fill:#1c3757;opacity:0;transition:opacity .5s}
:where(html.p-index,html.p-otomobil-anahtari) .career-scene-control{position:absolute;left:48%;bottom:14%;display:flex;gap:10px;align-items:center;min-height:48px;padding:12px 16px;background:#fff;color:#174fa4;border:1px solid #b8ceed;border-radius:12px;font-family:inherit;font-size:13px;font-weight:600;line-height:1.5;box-shadow:0 8px 22px #203e7010;cursor:pointer;max-width:46%;text-align:left}
:where(html.p-index,html.p-otomobil-anahtari) .car-key-page .career-scene-control svg{width:26px;height:26px;flex:none}:where(html.p-index,html.p-otomobil-anahtari) .career-power-control{left:43%;bottom:14%}:where(html.p-index,html.p-otomobil-anahtari) .career-scene button:focus-visible,:where(html.p-index,html.p-otomobil-anahtari) .career-demo-content button:focus-visible{outline:2px solid #1755b5;outline-offset:4px}:where(html.p-index,html.p-otomobil-anahtari) .career-scene-control:hover{background:#eaf2ff;border-color:#1755b5}
:where(html.p-index,html.p-otomobil-anahtari) .career-remote{position:absolute;right:9%;bottom:6%;border:0;color:#dbeaff;background:transparent;display:grid;justify-items:center;gap:2px;cursor:pointer;font:inherit;max-width:40%;}:where(html.p-index,html.p-otomobil-anahtari) .car-key-page .career-remote svg{width:58px;height:90px;filter:drop-shadow(0 7px 10px #102b4930);transition:transform .2s}:where(html.p-index,html.p-otomobil-anahtari) .career-remote:hover svg{transform:translateY(-4px)}:where(html.p-index,html.p-otomobil-anahtari) .career-remote span{font-size:12px;color:#184e99;background:#fff;border:1px solid #bed2ee;padding:8px 14px;border-radius:20px}
:where(html.p-index,html.p-otomobil-anahtari) .career-scene-result{position:absolute;left:48%;bottom:17%;font-size:14px;color:#154b95;display:flex;align-items:center;gap:10px}:where(html.p-index,html.p-otomobil-anahtari) .career-result-check{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;color:white;background:#1b61b5}
:where(html.p-index,html.p-otomobil-anahtari) .career-demo-content{padding:36px 32px;border-left:1px solid #d4e1f4;align-self:stretch;display:flex;flex-direction:column;justify-content:center;min-width:0}:where(html.p-index,html.p-otomobil-anahtari) .career-step-dots{display:flex;gap:8px;padding:0;margin:0 0 30px;list-style:none}:where(html.p-index,html.p-otomobil-anahtari) .career-step-dots button{display:grid;place-items:center;min-width:36px;min-height:36px;border-radius:50%;border:1px solid #cfddf0;background:#f4f7fc;color:#45607f;cursor:pointer;font-family:inherit;font-size:11px;font-weight:500;line-height:1}:where(html.p-index,html.p-otomobil-anahtari) .career-step-dots button[aria-current]{background:#1553b1;border-color:#1553b1;color:#fff;box-shadow:0 0 0 4px #e5eefb}:where(html.p-index,html.p-otomobil-anahtari) .career-step-dots button:disabled{color:#77899f;background:#fff;cursor:default}:where(html.p-index,html.p-otomobil-anahtari) .career-demo-panels{min-height:228px}:where(html.p-index,html.p-otomobil-anahtari) .career-demo-panels h3{font-size:clamp(26px,2.5vw,36px);line-height:1.18;letter-spacing:-.035em;margin:16px 0 18px}:where(html.p-index,html.p-otomobil-anahtari) .career-demo-panels p{font-size:15px;line-height:1.85;color:#526780;margin:0 0 24px}:where(html.p-index,html.p-otomobil-anahtari) .career-demo-panels .eyebrow{font-size:11px;letter-spacing:.12em}:where(html.p-index,html.p-otomobil-anahtari) .career-demo-actions{display:flex;align-items:center;flex-wrap:wrap;gap:16px;margin-top:auto}:where(html.p-index,html.p-otomobil-anahtari) .career-demo-actions .button{gap:18px;white-space:normal;text-align:left;line-height:1.5;min-height:48px}:where(html.p-index,html.p-otomobil-anahtari) .career-text-button{padding:10px 0;color:#516780;border:0;background:none;font-family:inherit;font-size:12px;font-weight:500;line-height:1.5;text-decoration:underline;text-underline-offset:4px;cursor:pointer}:where(html.p-index,html.p-otomobil-anahtari) .career-demo-status{font-size:12px;line-height:1.6;color:#1755a9;margin:14px 0 0;min-height:19px}:where(html.p-index,html.p-otomobil-anahtari) .career-demo-note{font-size:12px;line-height:1.8;color:#64748b;max-width:890px;margin:18px 0 0}
:where(html.p-index,html.p-otomobil-anahtari) .career-demo [hidden]{display:none!important}:where(html.p-index,html.p-otomobil-anahtari) .career-demo[data-step]:not([data-step="0"]) .career-wire-base{stroke-dashoffset:0}:where(html.p-index,html.p-otomobil-anahtari) .career-demo[data-step]:not([data-step="0"]) .career-wire rect{opacity:1}
:where(html.p-index,html.p-otomobil-anahtari) .career-demo[data-step="2"] .career-device-screen,:where(html.p-index,html.p-otomobil-anahtari) .career-demo[data-step="3"] .career-device-screen,:where(html.p-index,html.p-otomobil-anahtari) .career-demo[data-step="4"] .career-device-screen,:where(html.p-index,html.p-otomobil-anahtari) .career-demo[data-step="5"] .career-device-screen{opacity:1}
:where(html.p-index,html.p-otomobil-anahtari) .career-demo.is-busy .career-screen-progress:after{animation:career-progress 1.4s linear forwards}:where(html.p-index,html.p-otomobil-anahtari) .career-demo.is-busy .career-wire-flow{opacity:1;animation:career-current .7s linear infinite;stroke-dasharray:12 20;stroke-dashoffset:0}
:where(html.p-index,html.p-otomobil-anahtari) .career-demo[data-step="4"] .career-screen-progress:after,:where(html.p-index,html.p-otomobil-anahtari) .career-demo[data-step="5"] .career-screen-progress:after{width:100%}:where(html.p-index,html.p-otomobil-anahtari) .career-demo[data-step="5"] .career-door{transform:scaleX(.02);opacity:0}:where(html.p-index,html.p-otomobil-anahtari) .career-demo[data-step="5"] .career-lock{opacity:1}:where(html.p-index,html.p-otomobil-anahtari) .career-demo[data-step="5"] .career-headlight{animation:career-flash .8s ease 2}
:where(html.p-index,html.p-otomobil-anahtari) .car-key-page .key-contact{padding:64px 0 80px}
@keyframes career-progress{to{width:100%}}@keyframes career-current{to{stroke-dashoffset:-32}}@keyframes career-flash{50%{fill:#ffce69}}
@media(max-width:1100px){:where(html.p-index,html.p-otomobil-anahtari) .career-demo-content{padding:28px 24px}:where(html.p-index,html.p-otomobil-anahtari) .career-demo-panels{min-height:250px}:where(html.p-index,html.p-otomobil-anahtari) .career-opening-grid{gap:32px}:where(html.p-index,html.p-otomobil-anahtari) .career-step-dots{gap:6px}:where(html.p-index,html.p-otomobil-anahtari) .career-step-dots button{min-width:32px;min-height:32px}}
@media(max-width:860px){:where(html.p-index,html.p-otomobil-anahtari) .career-opening{padding:104px 0 36px}:where(html.p-index,html.p-otomobil-anahtari) .career-opening-grid{grid-template-columns:1fr;gap:28px}:where(html.p-index,html.p-otomobil-anahtari) .career-opening h1{max-width:640px}:where(html.p-index,html.p-otomobil-anahtari) .career-opening p{font-size:16px}:where(html.p-index,html.p-otomobil-anahtari) .career-section-head{display:block}:where(html.p-index,html.p-otomobil-anahtari) .career-section-head>p{max-width:100%;margin-top:16px}:where(html.p-index,html.p-otomobil-anahtari) .career-demo-section{padding:38px 0}:where(html.p-index,html.p-otomobil-anahtari) .career-demo{grid-template-columns:1fr}:where(html.p-index,html.p-otomobil-anahtari) .career-scene{width:100%;max-height:480px;aspect-ratio:900/610}:where(html.p-index,html.p-otomobil-anahtari) .career-demo-content{border-left:0;border-top:1px solid #d4e1f4;padding:28px}:where(html.p-index,html.p-otomobil-anahtari) .career-demo-panels{min-height:0}:where(html.p-index,html.p-otomobil-anahtari) .career-demo-panels h3{font-size:30px}:where(html.p-index,html.p-otomobil-anahtari) .career-step-dots{gap:12px;margin-bottom:28px}:where(html.p-index,html.p-otomobil-anahtari) .career-step-dots button{min-width:40px;min-height:40px}:where(html.p-index,html.p-otomobil-anahtari) .career-device-screen{font-size:clamp(8px,1.5vw,12px)}:where(html.p-index,html.p-otomobil-anahtari) .car-key-page .key-contact{padding:40px 0 50px}}
@media(max-width:480px){:where(html.p-index,html.p-otomobil-anahtari) .career-opening h1{font-size:36px}:where(html.p-index,html.p-otomobil-anahtari) .career-opening .breadcrumbs{font-size:11px;margin-bottom:28px}:where(html.p-index,html.p-otomobil-anahtari) .career-demo{border-radius:18px}:where(html.p-index,html.p-otomobil-anahtari) .career-scene-tag{top:14px;left:16px;font-size:12px}:where(html.p-index,html.p-otomobil-anahtari) .career-scene{aspect-ratio:1.25}:where(html.p-index,html.p-otomobil-anahtari) .car-key-page .career-car{left:13%;top:13%;width:88%}:where(html.p-index,html.p-otomobil-anahtari) .career-device{width:49%;left:1%;bottom:9%}:where(html.p-index,html.p-otomobil-anahtari) .career-scene-control{font-size:11px;left:52%;bottom:13%;padding:9px;gap:5px;max-width:46%;min-height:44px}:where(html.p-index,html.p-otomobil-anahtari) .car-key-page .career-scene-control svg{width:19px;height:19px}:where(html.p-index,html.p-otomobil-anahtari) .career-device-screen{gap:2px;font-size:8px}:where(html.p-index,html.p-otomobil-anahtari) .career-screen-symbol{font-size:13px}:where(html.p-index,html.p-otomobil-anahtari) .career-scene-result{left:53%;bottom:18%;font-size:11px;max-width:44%;gap:6px}:where(html.p-index,html.p-otomobil-anahtari) .career-result-check{width:23px;height:23px;flex:none}:where(html.p-index,html.p-otomobil-anahtari) .career-demo-content{padding:24px 18px}:where(html.p-index,html.p-otomobil-anahtari) .career-step-dots{gap:8px;justify-content:space-between}:where(html.p-index,html.p-otomobil-anahtari) .career-demo-panels h3{font-size:27px}:where(html.p-index,html.p-otomobil-anahtari) .career-demo-panels p{font-size:14px}:where(html.p-index,html.p-otomobil-anahtari) .career-demo-actions{gap:10px 18px}:where(html.p-index,html.p-otomobil-anahtari) .career-demo-actions .button{font-size:13px;padding:13px 16px}:where(html.p-index,html.p-otomobil-anahtari) .career-remote{right:4%;bottom:4%}:where(html.p-index,html.p-otomobil-anahtari) .car-key-page .career-remote svg{width:40px;height:62px}:where(html.p-index,html.p-otomobil-anahtari) .career-remote span{font-size:10px;padding:6px 10px}:where(html.p-index,html.p-otomobil-anahtari) .career-demo-status{font-size:11px}}
@media(prefers-reduced-motion:reduce){:where(html.p-index,html.p-otomobil-anahtari) .career-demo *{transition:none!important;animation:none!important}:where(html.p-index,html.p-otomobil-anahtari) .career-demo.is-busy .career-screen-progress:after{width:100%}}
/* Keep the device and car silhouettes separate at every viewport. */
:where(html.p-index,html.p-otomobil-anahtari) .car-key-page .career-car{top:0}
@media(max-width:480px){:where(html.p-index,html.p-otomobil-anahtari) .career-scene{aspect-ratio:1.1}:where(html.p-index,html.p-otomobil-anahtari) .career-device{width:45%;bottom:6%}:where(html.p-index,html.p-otomobil-anahtari) .career-scene-control{bottom:13%}:where(html.p-index,html.p-otomobil-anahtari) .career-scene-result{bottom:17%}}

:where(html.p-index,html.p-otomobil-anahtari) .career-demo.is-reset .career-wire{opacity:0}:where(html.p-index,html.p-otomobil-anahtari) .career-demo.is-reset :is(.career-door,.career-lock,.career-device-screen){transition:none}:where(html.p-index,html.p-otomobil-anahtari) .career-demo .career-wire{transition:opacity .2s}
/* Real vehicle photography and direct interaction on the original device menus. */
:where(html.p-index,html.p-otomobil-anahtari) .career-scene{aspect-ratio:1.25;background:#f0f5fb;min-height:0}
:where(html.p-index,html.p-otomobil-anahtari) .career-car-photo{position:absolute;inset:0 0 auto;width:100%;height:66%;object-fit:cover;object-position:50% 60%;transition:opacity .5s,transform .7s}
:where(html.p-index,html.p-otomobil-anahtari) .career-scene-tag{background:none;border-radius:0;padding:0;left:16px;top:16px;z-index:4;color:#fff;text-shadow:0 1px 5px #071b3acf,0 0 12px #071b3a80}
:where(html.p-index,html.p-otomobil-anahtari) .career-photo-caption{position:absolute;right:18px;top:58%;font-size:14px;font-weight:600;color:#fff;text-shadow:0 1px 5px #000;letter-spacing:.02em}
:where(html.p-index,html.p-otomobil-anahtari) .career-device{width:53%;left:2%;bottom:0;transition:width .7s ease,left .7s ease,bottom .7s ease;z-index:2}
:where(html.p-index,html.p-otomobil-anahtari) .career-device>img{mix-blend-mode:normal}
:where(html.p-index,html.p-otomobil-anahtari) .career-device-screen{opacity:1;display:block;padding:0;background:#fff;border-radius:1px;overflow:visible}
:where(html.p-index,html.p-otomobil-anahtari) .career-device-screen>img{width:100%;height:100%;display:block;object-fit:fill}
:where(html.p-index,html.p-otomobil-anahtari) .career-cable-photo{position:absolute;right:10%;bottom:4%;width:27%;padding:8px;border:1px solid #b5cae6;border-radius:50%;background:#fff;cursor:pointer;box-shadow:0 0 0 7px #dbe8fa70;z-index:3;transition:box-shadow .2s}
:where(html.p-index,html.p-otomobil-anahtari) .career-cable-photo img{width:100%;height:auto;display:block;border-radius:50%;pointer-events:none}
:where(html.p-index,html.p-otomobil-anahtari) .career-cable-photo:hover{box-shadow:0 0 0 10px #c0d7f6}
:where(html.p-index,html.p-otomobil-anahtari) .career-power-hotspot,:where(html.p-index,html.p-otomobil-anahtari) .career-menu-hotspot{position:absolute;transform:translate(-50%,-50%);background:transparent;border:2px solid #1b62bb;border-radius:6px;padding:0;cursor:pointer;min-width:24px;min-height:24px;box-shadow:0 0 0 5px #4383db24;animation:career-target 1.8s ease-in-out infinite}
:where(html.p-index,html.p-otomobil-anahtari) .career-power-hotspot{left:83.5%;top:35.8%;width:6%;height:6%;min-width:40px;min-height:40px}
:where(html.p-index,html.p-otomobil-anahtari) .career-menu-hotspot:hover,:where(html.p-index,html.p-otomobil-anahtari) .career-power-hotspot:hover{background:#4383db18}
:where(html.p-index,html.p-otomobil-anahtari) .career-menu-hotspot:focus-visible,:where(html.p-index,html.p-otomobil-anahtari) .career-power-hotspot:focus-visible{outline:2px solid #fff!important;outline-offset:2px!important;box-shadow:0 0 0 5px #174fa4}
:where(html.p-index,html.p-otomobil-anahtari) .career-demo[data-step="1"] .career-device{width:100%;left:0;bottom:0}
:where(html.p-index,html.p-otomobil-anahtari) .career-demo[data-step="1"] .career-car-photo{opacity:.12}
:where(html.p-index,html.p-otomobil-anahtari) .career-demo:is([data-step="2"],[data-step="3"],[data-step="4"]) .career-device{width:192%;left:-46%;bottom:-39%}
:where(html.p-index,html.p-otomobil-anahtari) .career-demo:is([data-step="2"],[data-step="3"],[data-step="4"]) .career-car-photo{opacity:0;transform:scale(1.06)}
:where(html.p-index,html.p-otomobil-anahtari) .career-demo:is([data-step="1"],[data-step="2"],[data-step="3"],[data-step="4"]) .career-photo-caption{display:none}
:where(html.p-index,html.p-otomobil-anahtari) .career-demo-content{min-height:500px}:where(html.p-index,html.p-otomobil-anahtari) .career-demo-panels{min-height:218px}
@keyframes career-target{50%{box-shadow:0 0 0 8px #4383db10}}
@media(max-width:860px){:where(html.p-index,html.p-otomobil-anahtari) .career-scene{aspect-ratio:1.25;max-height:none}:where(html.p-index,html.p-otomobil-anahtari) .career-demo-content{min-height:0}:where(html.p-index,html.p-otomobil-anahtari) .career-demo-panels{min-height:0}}
@media(max-width:480px){:where(html.p-index,html.p-otomobil-anahtari) .career-scene{aspect-ratio:1.1}:where(html.p-index,html.p-otomobil-anahtari) .career-scene-tag{font-size:12px;top:10px;left:10px}:where(html.p-index,html.p-otomobil-anahtari) .career-step-dots button{min-width:32px;min-height:36px}:where(html.p-index,html.p-otomobil-anahtari) .career-demo:is([data-step="2"],[data-step="3"],[data-step="4"]) .career-device{bottom:-29%}:where(html.p-index,html.p-otomobil-anahtari) .career-photo-caption{font-size:12px}:where(html.p-index,html.p-otomobil-anahtari) .career-power-hotspot{min-width:32px;min-height:32px}}
@media(prefers-reduced-motion:reduce){:where(html.p-index,html.p-otomobil-anahtari) .career-demo *{transition:none!important;animation:none!important}}
/* Localised door layers preserve the photograph's fixed body and camera. */
:where(html.p-index,html.p-otomobil-anahtari) .career-vehicle{position:absolute;left:0;top:0;width:100%;aspect-ratio:16/9;perspective:1000px;transition:opacity .5s;isolation:isolate}
:where(html.p-index,html.p-otomobil-anahtari) .career-vehicle .career-car-photo,:where(html.p-index,html.p-otomobil-anahtari) .career-car-open{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;transform:none!important;opacity:1!important}
:where(html.p-index,html.p-otomobil-anahtari) .career-car-open{clip-path:polygon(34% 27%,54% 27%,54% 67%,34% 67%);opacity:0!important;pointer-events:none}
:where(html.p-index,html.p-otomobil-anahtari) .career-demo:is([data-door="opening"],[data-door="open"],[data-door="closing"]) .career-car-open{opacity:1!important}
:where(html.p-index,html.p-otomobil-anahtari) .career-door-video{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;opacity:0;pointer-events:none}
:where(html.p-index,html.p-otomobil-anahtari) .career-demo:is([data-door="opening"],[data-door="open"]) .career-door-video-open,:where(html.p-index,html.p-otomobil-anahtari) .career-demo:is([data-door="closing"],[data-step="7"]) .career-door-video-close{opacity:1}
:where(html.p-index,html.p-otomobil-anahtari) .career-door-video.is-unavailable{display:none}
:where(html.p-index,html.p-otomobil-anahtari) .career-door-hotspot{position:absolute;left:49%;top:45%;transform:translate(-50%,-50%);width:44px;height:44px;border:0;border-radius:50%;background:#ffffff12;cursor:pointer;display:grid;place-items:center;z-index:4;animation:career-target 1.8s ease-in-out infinite;color:#1456ae}
:where(html.p-index,html.p-otomobil-anahtari) .career-door-hotspot>span{width:13px;height:13px;border:2px solid white;border-radius:50%;background:#1763ba;box-shadow:0 0 0 5px #ffffff6b}
:where(html.p-index,html.p-otomobil-anahtari) .career-door-hotspot:hover{background:#ffffff40}:where(html.p-index,html.p-otomobil-anahtari) .career-demo[data-step="5"] .career-door-hotspot{left:40%;top:46%}
:where(html.p-index,html.p-otomobil-anahtari) .career-demo[data-step="1"] .career-vehicle{opacity:.12}
:where(html.p-index,html.p-otomobil-anahtari) .career-demo:is([data-step="2"],[data-step="3"],[data-step="4"]) .career-vehicle{opacity:0;pointer-events:none}
:where(html.p-index,html.p-otomobil-anahtari) .career-indicator{position:absolute;width:3%;height:3%;border-radius:50%;background:#ffbf40;filter:blur(1px);box-shadow:0 0 12px 4px #ffb62f;opacity:0;pointer-events:none}
:where(html.p-index,html.p-otomobil-anahtari) .career-indicator-front{left:21%;top:48%}:where(html.p-index,html.p-otomobil-anahtari) .career-indicator-rear{left:76%;top:43%}
:where(html.p-index,html.p-otomobil-anahtari) .career-demo.has-lock-feedback[data-door="locked"] .career-indicator{animation:career-lock-flash .38s ease 2}
@keyframes career-lock-flash{0%,100%{opacity:0}40%,65%{opacity:1}}
:where(html.p-index,html.p-otomobil-anahtari) .career-lock-badge{position:absolute;right:14%;top:28%;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:#fff;color:#1654ae;box-shadow:0 4px 16px #162b4526;opacity:0;transform:translateY(7px);transition:opacity .3s,transform .3s}
:where(html.p-index,html.p-otomobil-anahtari) .career-lock-badge svg{width:21px;height:21px}:where(html.p-index,html.p-otomobil-anahtari) .career-demo[data-door="locked"] .career-lock-badge{opacity:1;transform:translateY(0)}
:where(html.p-index,html.p-otomobil-anahtari) .career-demo[data-door="opening"] .career-cable-photo{opacity:0}:where(html.p-index,html.p-otomobil-anahtari) .career-demo[aria-busy="true"] .career-step-dots button{cursor:wait}
:where(html.p-index,html.p-otomobil-anahtari) .career-photo-caption{top:auto;bottom:43%;right:15px;color:#fff;text-shadow:0 1px 5px #000c;font-size:14px}
@media(max-width:480px){:where(html.p-index,html.p-otomobil-anahtari) .career-photo-caption{bottom:43%}:where(html.p-index,html.p-otomobil-anahtari) .career-lock-badge{width:28px;height:28px}:where(html.p-index,html.p-otomobil-anahtari) .career-lock-badge svg{width:18px;height:18px}}
@media(prefers-reduced-motion:reduce){:where(html.p-index,html.p-otomobil-anahtari) .career-vehicle,:where(html.p-index,html.p-otomobil-anahtari) .career-car-open,:where(html.p-index,html.p-otomobil-anahtari) .career-lock-badge{transition:none!important}:where(html.p-index,html.p-otomobil-anahtari) .career-door-video{display:none}:where(html.p-index,html.p-otomobil-anahtari) .career-demo[data-door="locked"] .career-indicator{animation:none}}
:where(html.p-index,html.p-otomobil-anahtari) .career-photo-caption{color:#fff;text-shadow:0 1px 5px #000c}
@media(max-width:480px){:where(html.p-index,html.p-otomobil-anahtari) .career-photo-caption{font-size:12px}}
/* Transparent cutouts sit directly in the scene, without a white tile. */
:where(html.p-index,html.p-otomobil-anahtari) .career-device>img{background:transparent;filter:drop-shadow(0 4px 5px #14263d20)}
:where(html.p-index,html.p-otomobil-anahtari) .career-cable-photo{padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;filter:drop-shadow(0 4px 5px #14263d24);transition:transform .2s ease,filter .2s ease}
:where(html.p-index,html.p-otomobil-anahtari) .career-cable-photo img{border-radius:0;background:transparent}
:where(html.p-index,html.p-otomobil-anahtari) .career-cable-photo:hover{background:transparent;box-shadow:none;transform:translateY(-3px);filter:drop-shadow(0 6px 7px #14263d38)}
:where(html.p-index,html.p-otomobil-anahtari) .career-cable-photo:focus-visible{outline:2px solid #1755b5;outline-offset:6px;border-radius:8px}
/* Explicit, repeatable lock/unlock controls; physical POWER switch callout. */
:where(html.p-index,html.p-otomobil-anahtari) .career-lock-controls{position:absolute;right:5%;bottom:4%;width:36%;display:grid;gap:9px;z-index:4}
:where(html.p-index,html.p-otomobil-anahtari) .career-lock-controls button{display:flex;align-items:center;justify-content:center;gap:10px;min-height:46px;padding:10px 12px;border:1px solid #174fa4;border-radius:10px;background:#174fa4;color:#fff;font:inherit;font-size:14px;line-height:1.3;cursor:pointer;box-shadow:0 4px 12px #13396616}
:where(html.p-index,html.p-otomobil-anahtari) .career-lock-controls button svg{width:21px;height:21px;flex:none}
:where(html.p-index,html.p-otomobil-anahtari) .career-lock-controls button:hover:not(:disabled){background:#0d3e89;transform:translateY(-1px)}
:where(html.p-index,html.p-otomobil-anahtari) .career-lock-controls button:disabled{background:#dfe8f36b;border-color:#b6c7dc;color:#536b86;box-shadow:none;cursor:default}
:where(html.p-index,html.p-otomobil-anahtari) .career-lock-state{font-size:11px;line-height:1.4;color:#345473;text-align:center;min-height:16px}
:where(html.p-index,html.p-otomobil-anahtari) .career-demo:is([data-door="unlocked"],[data-door="opening"],[data-door="open"]) .career-lock-badge{opacity:1;transform:translateY(0);color:#126850}
:where(html.p-index,html.p-otomobil-anahtari) .career-demo.has-lock-feedback[data-door="unlocking"] .career-indicator{animation:career-lock-flash .38s ease 1}
:where(html.p-index,html.p-otomobil-anahtari) .career-power-hotspot{border:3px solid #fff;border-radius:10px;background:transparent;box-shadow:0 0 0 3px #145bbf,0 0 0 9px #72aff34d;min-width:48px;min-height:48px;animation:none;z-index:5}
:where(html.p-index,html.p-otomobil-anahtari) .career-power-ring{position:absolute;inset:-9px;border:2px solid #2a76d1;border-radius:16px;pointer-events:none;animation:career-power-pulse 1.5s ease-out infinite}
:where(html.p-index,html.p-otomobil-anahtari) .career-power-callout{position:absolute;bottom:calc(100% + 28px);right:-9px;display:flex;align-items:center;justify-content:center;gap:9px;width:max-content;max-width:185px;padding:11px 14px;background:#164da2;color:#fff;border-radius:10px;box-shadow:0 6px 18px #173a6630;font-family:inherit;font-size:13px;font-weight:600;line-height:1.4;text-align:left}
:where(html.p-index,html.p-otomobil-anahtari) .career-power-callout svg{width:21px;height:21px;flex:none}
:where(html.p-index,html.p-otomobil-anahtari) .career-power-callout::after{content:'';position:absolute;right:24px;top:100%;height:22px;border-right:2px solid #164da2}
:where(html.p-index,html.p-otomobil-anahtari) .career-power-callout::before{content:'';position:absolute;right:20px;top:calc(100% + 17px);width:8px;height:8px;border-right:2px solid #164da2;border-bottom:2px solid #164da2;transform:rotate(45deg)}
@keyframes career-power-pulse{0%{transform:scale(.96);opacity:.8}100%{transform:scale(1.24);opacity:0}}
@media(max-width:480px){:where(html.p-index,html.p-otomobil-anahtari) .career-lock-controls{right:4%;width:40%;bottom:3%;gap:7px}:where(html.p-index,html.p-otomobil-anahtari) .career-lock-controls button{min-height:44px;padding:8px 6px;font-size:12px;gap:7px}:where(html.p-index,html.p-otomobil-anahtari) .career-lock-controls button svg{width:18px;height:18px}:where(html.p-index,html.p-otomobil-anahtari) .career-lock-state{font-size:10px}:where(html.p-index,html.p-otomobil-anahtari) .career-power-callout{font-size:11px;max-width:160px;padding:10px 12px}:where(html.p-index,html.p-otomobil-anahtari) .career-power-callout svg{width:18px;height:18px}}
@media(prefers-reduced-motion:reduce){:where(html.p-index,html.p-otomobil-anahtari) .career-power-ring{animation:none;opacity:.65}:where(html.p-index,html.p-otomobil-anahtari) .career-demo.has-lock-feedback .career-indicator{animation:none}}

/* Emphasize the real on-device page arrow without replacing its artwork. */
:where(html.p-index,html.p-otomobil-anahtari) .career-menu-hotspot.is-next-page{min-width:44px;min-height:52px;border:3px solid #fff;border-radius:9px;background:transparent;box-shadow:0 0 0 3px #145bbf,0 0 0 9px #72aff34d;animation:none;z-index:6}
:where(html.p-index,html.p-otomobil-anahtari) .career-menu-hotspot.is-next-page:after{content:'';position:absolute;inset:-10px;border:2px solid #2a76d1;border-radius:15px;pointer-events:none;animation:career-power-pulse 1.5s ease-out infinite}
:where(html.p-index,html.p-otomobil-anahtari) .career-next-callout{position:absolute;bottom:calc(100% + 24px);right:-2px;display:block;width:max-content;max-width:180px;padding:12px 16px;border-radius:10px;background:#164da2;color:#fff;font:600 13px/1.4 "Plus Jakarta Sans",sans-serif;text-align:center;box-shadow:0 5px 18px #102f6633}
:where(html.p-index,html.p-otomobil-anahtari) .career-next-callout[hidden]{display:none}
:where(html.p-index,html.p-otomobil-anahtari) .career-next-callout:after{content:'';position:absolute;right:15px;top:100%;height:17px;border-right:2px solid #164da2}
:where(html.p-index,html.p-otomobil-anahtari) .career-next-callout:before{content:'';position:absolute;right:11px;top:calc(100% + 10px);width:8px;height:8px;border-right:2px solid #164da2;border-bottom:2px solid #164da2;transform:rotate(45deg)}
@media(max-width:480px){:where(html.p-index,html.p-otomobil-anahtari) .career-next-callout{max-width:150px;padding:10px 12px;font-size:11px}:where(html.p-index,html.p-otomobil-anahtari) .career-menu-hotspot.is-next-page{min-height:44px}}
@media(prefers-reduced-motion:reduce){:where(html.p-index,html.p-otomobil-anahtari) .career-menu-hotspot.is-next-page:after{animation:none;opacity:.65}}

/* Shared interactive experience in the homepage content column. */
:where(html.p-index,html.p-otomobil-anahtari) .career-home-demo{padding:24px var(--gutter,32px) 64px;background:linear-gradient(180deg,#f5f8fc,#fff)}
:where(html.p-index,html.p-otomobil-anahtari) .career-home-demo>.container{max-width:1240px;margin-inline:auto}
:where(html.p-index,html.p-otomobil-anahtari) .career-home-demo .eyebrow{color:#1553b1;font-weight:700;font-size:12px;letter-spacing:.16em}
:where(html.p-index,html.p-otomobil-anahtari) .career-home-demo .career-demo-panels .eyebrow{font-size:11px;letter-spacing:.12em}
:where(html.p-index,html.p-otomobil-anahtari) .career-home-demo .career-section-head{display:block;margin-bottom:32px}
:where(html.p-index,html.p-otomobil-anahtari) .career-home-demo .career-section-head h2{color:#121d31;font-weight:700;font-size:clamp(30px,3.4vw,46px);line-height:1.2;letter-spacing:-.045em}
:where(html.p-index,html.p-otomobil-anahtari) .career-home-demo .career-section-head h2>span{display:block}
:where(html.p-index,html.p-otomobil-anahtari) .career-home-demo .career-section-head h2>span:first-child>span:last-child{text-transform:uppercase}
:where(html.p-index,html.p-otomobil-anahtari) .career-home-demo .career-heading-accent{color:#1553b1}
@media(max-width:620px){:where(html.p-index,html.p-otomobil-anahtari) .career-home-demo{padding:16px 24px 48px}}

:where(html.p-index,html.p-otomobil-anahtari) .career-home-demo .career-section-head h2{margin-top:0}
:where(html.p-index,html.p-otomobil-anahtari) .career-heading-emoji{display:inline-block;font-size:.82em;vertical-align:.04em;margin-right:.12em}

/* Full-width career link in the homepage demo panel. */
:where(html.p-index,html.p-otomobil-anahtari) .career-home-demo .career-join-link{display:flex;flex:0 0 100%;width:100%;min-width:0;justify-content:flex-start;gap:12px;padding:15px 18px;min-height:52px;white-space:nowrap}
:where(html.p-index,html.p-otomobil-anahtari) .career-home-demo .career-join-link>svg{width:21px;height:21px;flex:0 0 21px}
:where(html.p-index,html.p-otomobil-anahtari) .career-home-demo .career-join-link>span:last-child{margin-left:auto;flex-shrink:0}
@media(max-width:420px){:where(html.p-index,html.p-otomobil-anahtari) .career-home-demo .career-join-link{padding:14px 12px;gap:8px;font-size:12px}}

/* Confirmation and completion stay inside the device until the visitor continues. */
:where(html.p-index,html.p-otomobil-anahtari) .career-programming{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(5px,1vw,12px);padding:5%;background:#f4f7fc;color:#152a46;text-align:center;overflow:auto;container-type:inline-size}
:where(html.p-index,html.p-otomobil-anahtari) .career-programming[hidden],:where(html.p-index,html.p-otomobil-anahtari) .career-programming [hidden],:where(html.p-index,html.p-otomobil-anahtari) .career-device-screen>img[hidden],:where(html.p-index,html.p-otomobil-anahtari) .career-menu-hotspot[hidden]{display:none!important}
:where(html.p-index,html.p-otomobil-anahtari) .career-programming-label{font-size:clamp(9px,3.5cqw,13px);font-weight:700;letter-spacing:.08em;color:#1854a4}
:where(html.p-index,html.p-otomobil-anahtari) .career-programming p{margin:0;max-width:28ch;font-size:clamp(12px,5.5cqw,21px);line-height:1.35;font-weight:600;color:#152a46}
:where(html.p-index,html.p-otomobil-anahtari) .career-programming button{border:1px solid #174fa4;border-radius:6px;min-height:36px;padding:7px 14px;max-width:100%;background:#174fa4;color:#fff;font:600 clamp(11px,4cqw,15px)/1.3 "Plus Jakarta Sans",sans-serif;cursor:pointer}
:where(html.p-index,html.p-otomobil-anahtari) .career-programming button:focus-visible{outline:2px solid #0d47a1;outline-offset:3px}
:where(html.p-index,html.p-otomobil-anahtari) .career-programming button:hover{background:#103c83}
:where(html.p-index,html.p-otomobil-anahtari) .career-programming-progress{height:4px;width:80%;overflow:hidden;border-radius:4px;background:#d5e2f4}
:where(html.p-index,html.p-otomobil-anahtari) .career-programming-progress>span{display:block;height:100%;width:100%;background:#1755ac;transform-origin:left;animation:career-programming-fill 1.8s linear both}
@keyframes career-programming-fill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
:where(html.p-index,html.p-otomobil-anahtari) .career-demo[data-programming="done"] .career-programming-label{color:#147044}
@media(max-width:480px){:where(html.p-index,html.p-otomobil-anahtari) .career-programming{padding:3%;gap:4px}:where(html.p-index,html.p-otomobil-anahtari) .career-programming p{font-size:clamp(11px,5.5cqw,14px);line-height:1.25}:where(html.p-index,html.p-otomobil-anahtari) .career-programming button{min-height:32px;padding:5px 10px}}

/* ============================================================
   BÖLÜM: sections/career-cabin  (eski: assets/css/sections/career-cabin.css)
   Kapsam: p-index, p-otomobil-anahtari
   ============================================================ */
/* Camera journey: exterior → cockpit → driver's lower-left diagnostic socket. */
:where(html.p-index,html.p-otomobil-anahtari) .career-demo .career-vehicle{transform-origin:44.5% 47%;transition:transform 1.6s cubic-bezier(.18,.66,.25,1),opacity .9s ease;will-change:transform}
:where(html.p-index,html.p-otomobil-anahtari) .career-demo .career-device{transition:width .8s ease,left .8s ease,bottom .8s ease,opacity .5s ease,transform .8s ease}
:where(html.p-index,html.p-otomobil-anahtari) .career-cabin{position:absolute;inset:0;z-index:1;background:#10161d;visibility:hidden;clip-path:circle(0% at 44.5% 47%);overflow:hidden;transition:clip-path 1.15s cubic-bezier(.2,.7,.27,1),visibility 1.15s;pointer-events:none;will-change:clip-path}
:where(html.p-index,html.p-otomobil-anahtari) .career-doorway-photo,:where(html.p-index,html.p-otomobil-anahtari) .career-cabin-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;will-change:transform,opacity}
:where(html.p-index,html.p-otomobil-anahtari) .career-doorway-photo{object-position:45% center;transform:translateY(5%) scale(1.03);opacity:1;transition:transform 1.35s cubic-bezier(.18,.66,.25,1),opacity .32s ease,filter .6s}
:where(html.p-index,html.p-otomobil-anahtari) .career-cabin-photo{object-position:0% 50%;transform-origin:50% 50%;transform:translateY(4%) scale(1.13);opacity:0;transition:transform 1.4s cubic-bezier(.18,.66,.25,1),filter .8s,opacity .5s ease}
:where(html.p-index,html.p-otomobil-anahtari) .career-footwell{position:absolute;inset:0;opacity:0;transform:translateY(8%) scale(.91);transition:opacity 1s ease,transform 1.2s cubic-bezier(.18,.66,.25,1)}
:where(html.p-index,html.p-otomobil-anahtari) .career-footwell-plane{position:absolute;top:0;left:50%;height:100%;aspect-ratio:3/2;transform:translateX(-50%)}
:where(html.p-index,html.p-otomobil-anahtari) .career-footwell-plane>img{display:block;width:100%;height:100%;object-fit:fill}
:where(html.p-index,html.p-otomobil-anahtari) .car-key-page .career-interior-cable{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;filter:drop-shadow(3px 8px 5px #0009)}
:where(html.p-index,html.p-otomobil-anahtari) .career-interior-wire-shadow,:where(html.p-index,html.p-otomobil-anahtari) .career-interior-wire,:where(html.p-index,html.p-otomobil-anahtari) .career-interior-wire-shine{fill:none;stroke-linecap:round}
:where(html.p-index,html.p-otomobil-anahtari) .career-interior-wire-shadow{stroke:#0009;stroke-width:27;transform:translate(5px,6px)}
:where(html.p-index,html.p-otomobil-anahtari) .career-interior-wire{stroke:#172330;stroke-width:19}
:where(html.p-index,html.p-otomobil-anahtari) .career-interior-wire-shine{stroke:#64707d;stroke-width:3;transform:translateX(-4px);opacity:.6}
:where(html.p-index,html.p-otomobil-anahtari) .career-demo[data-journey="approach"] .career-vehicle{transform:scale(2.45);animation:career-walk-to-door 2.05s cubic-bezier(.24,.57,.3,1) both}
:where(html.p-index,html.p-otomobil-anahtari) .career-demo[data-journey="threshold"] .career-vehicle{transform:scale(3.3)}
:where(html.p-index,html.p-otomobil-anahtari) .career-demo:is([data-journey="entering"],[data-journey="cabin"],[data-journey="lookdown"],[data-journey="port"],[data-journey="seating"],[data-journey="connected"],[data-journey="device"]) .career-vehicle{opacity:0;transform:scale(4.1)}
:where(html.p-index,html.p-otomobil-anahtari) .career-demo[data-journey="approach"] .career-device{opacity:1;transform:scale(.58);transform-origin:bottom left;pointer-events:none}
:where(html.p-index,html.p-otomobil-anahtari) .career-demo:is([data-journey="threshold"],[data-journey="entering"],[data-journey="cabin"],[data-journey="lookdown"],[data-journey="port"],[data-journey="seating"],[data-journey="connected"]) .career-device{opacity:0;transform:translateY(30px);pointer-events:none}
:where(html.p-index,html.p-otomobil-anahtari) .career-demo[data-journey="threshold"] .career-device{z-index:0}
:where(html.p-index,html.p-otomobil-anahtari) .career-demo:is([data-journey="threshold"],[data-journey="entering"],[data-journey="cabin"],[data-journey="lookdown"],[data-journey="port"],[data-journey="seating"],[data-journey="connected"],[data-journey="device"]) .career-cabin{visibility:visible;clip-path:circle(115% at 44.5% 47%)}
:where(html.p-index,html.p-otomobil-anahtari) .career-demo[data-journey="threshold"] .career-doorway-photo{transform:translateY(0) scale(1.1)}
:where(html.p-index,html.p-otomobil-anahtari) .career-demo:is([data-journey="entering"],[data-journey="cabin"],[data-journey="lookdown"],[data-journey="port"],[data-journey="seating"],[data-journey="connected"],[data-journey="device"]) .career-doorway-photo{transform:translate(-4%,-3%) scale(1.28);opacity:0}
:where(html.p-index,html.p-otomobil-anahtari) .career-demo:is([data-journey="entering"],[data-journey="cabin"],[data-journey="device"]) .career-cabin-photo{transform:scale(1);opacity:1}
:where(html.p-index,html.p-otomobil-anahtari) .career-demo:is([data-journey="lookdown"],[data-journey="port"],[data-journey="seating"],[data-journey="connected"]) .career-cabin-photo{transform:translateY(-8%) scale(1.23);opacity:0}
:where(html.p-index,html.p-otomobil-anahtari) .career-demo[data-journey="lookdown"] .career-footwell{opacity:1;transform:translateY(3%) scale(1.08)}
:where(html.p-index,html.p-otomobil-anahtari) .career-demo:is([data-journey="port"],[data-journey="seating"],[data-journey="connected"]) .career-footwell{opacity:1;transform:scale(1)}
:where(html.p-index,html.p-otomobil-anahtari) .career-demo:not([data-journey="outside"]) .career-photo-caption{display:none}
:where(html.p-index,html.p-otomobil-anahtari) .career-demo[data-journey="device"] .career-cabin-photo{transform:scale(1.05);filter:blur(4px) brightness(.38)}
:where(html.p-index,html.p-otomobil-anahtari) .career-demo[data-journey="device"] .career-cabin:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#0a224c33,#08224755)}
:where(html.p-index,html.p-otomobil-anahtari) .career-demo[data-journey="device"] .career-device{opacity:1;transform:none}
:where(html.p-index,html.p-otomobil-anahtari) .career-obd-target{position:absolute;z-index:5;left:var(--socket-x,40%);top:33.8%;width:var(--socket-width,15%);min-width:58px;height:12%;min-height:44px;transform:translate(-50%,-50%);padding:0;background:transparent;border:2px solid #e5f4ff;border-radius:10px;cursor:pointer;box-shadow:0 0 0 5px #3b8eea65}
:where(html.p-index,html.p-otomobil-anahtari) .career-obd-ring{position:absolute;inset:-10px;border:1px solid #b1d9ff;border-radius:15px;animation:cabin-socket-pulse 1.7s ease-out infinite;pointer-events:none}
:where(html.p-index,html.p-otomobil-anahtari) .career-obd-callout{position:absolute;bottom:calc(100% + 24px);left:50%;transform:translateX(-50%);display:block;width:max-content;max-width:220px;background:#fff;color:#123d77;border-radius:10px;padding:11px 14px;font:600 13px/1.45 var(--body,"Plus Jakarta Sans",sans-serif);box-shadow:0 6px 24px #0004}
:where(html.p-index,html.p-otomobil-anahtari) .career-obd-callout:after{content:"";position:absolute;top:100%;left:50%;height:18px;border-left:1px solid #fff}
:where(html.p-index,html.p-otomobil-anahtari) .career-obd-target:focus-visible{outline:3px solid #fff!important;outline-offset:7px!important}
:where(html.p-index,html.p-otomobil-anahtari) .career-journey-caption{position:absolute;z-index:6;right:20px;bottom:20px;width:min(42%,270px);padding:12px 15px;border:1px solid #ffffff2e;border-radius:14px;background:#061b32de;backdrop-filter:blur(12px);color:#fff;pointer-events:none;box-shadow:0 12px 30px #0003}
:where(html.p-index,html.p-otomobil-anahtari) .career-journey-count{display:block;color:#abcfff;font-size:10px;letter-spacing:.15em;margin-bottom:7px;font-variant-numeric:tabular-nums}
:where(html.p-index,html.p-otomobil-anahtari) .career-journey-caption strong{display:block;font-size:clamp(14px,1.4vw,19px);font-weight:500;line-height:1.4}
:where(html.p-index,html.p-otomobil-anahtari) .career-journey-track{display:block;height:2px;margin-top:13px;background:#ffffff25;border-radius:4px;overflow:hidden}
:where(html.p-index,html.p-otomobil-anahtari) .career-journey-track i{display:block;height:100%;width:var(--journey-progress,25%);background:#83bbff;transition:width .8s ease}
:where(html.p-index,html.p-otomobil-anahtari) .career-obd-success{position:absolute;left:50%;bottom:8%;transform:translateX(-50%);z-index:6;display:flex;align-items:center;gap:10px;padding:12px 18px;border:1px solid #8acbb24d;border-radius:30px;background:#102a27ed;color:#effff8;font-size:13px;white-space:nowrap;box-shadow:0 8px 24px #0003}
:where(html.p-index,html.p-otomobil-anahtari) .career-obd-success>span:first-child{display:grid;place-items:center;width:25px;height:25px;background:#a1e9c9;color:#174838;border-radius:50%;font-weight:700}
:where(html.p-index,html.p-otomobil-anahtari) .career-demo[data-journey="device"] .career-obd-success{left:auto;right:15px;top:15px;bottom:auto;transform:none;font-size:10px;padding:8px 11px;gap:7px}
:where(html.p-index,html.p-otomobil-anahtari) .career-demo[data-journey="device"] .career-obd-success>span:first-child{width:18px;height:18px}
@keyframes cabin-socket-pulse{0%{transform:scale(.96);opacity:.8}100%{transform:scale(1.18);opacity:0}}
@keyframes career-walk-to-door{0%{transform:scale(1) translateY(0)}19%{transform:scale(1.29) translateY(-.5%)}38%{transform:scale(1.54) translateY(.5%)}60%{transform:scale(1.9) translateY(-.35%)}79%{transform:scale(2.2) translateY(.35%)}100%{transform:scale(2.45) translateY(0)}}
@media(max-width:480px){:where(html.p-index,html.p-otomobil-anahtari) .career-journey-caption{right:10px;bottom:10px;width:52%;padding:9px 11px}:where(html.p-index,html.p-otomobil-anahtari) .career-journey-caption strong{font-size:11px}:where(html.p-index,html.p-otomobil-anahtari) .career-journey-count{font-size:8px;margin-bottom:3px}:where(html.p-index,html.p-otomobil-anahtari) .career-journey-track{margin-top:7px}:where(html.p-index,html.p-otomobil-anahtari) .career-obd-callout{font-size:11px;padding:9px 11px;max-width:185px;bottom:calc(100% + 20px)}:where(html.p-index,html.p-otomobil-anahtari) .career-obd-success{font-size:11px;padding:10px 13px}:where(html.p-index,html.p-otomobil-anahtari) .career-demo[data-journey="device"] .career-obd-success{font-size:9px;right:10px;top:10px}}

/* Keep the device and its connected cable with the visitor through the cabin. */
:where(html.p-index,html.p-otomobil-anahtari) .career-enter-control,:where(html.p-index,html.p-otomobil-anahtari) .career-exit-control{position:absolute;right:5%;bottom:5%;z-index:6;display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:48px;max-width:48%;padding:11px 15px;border:1px solid #d5e7ff;border-radius:11px;background:#164da2;color:#fff;font:600 13px/1.3 "Plus Jakarta Sans",sans-serif;box-shadow:0 10px 25px #061a3a38;cursor:pointer;text-align:left}
:where(html.p-index,html.p-otomobil-anahtari) .career-enter-control:hover,:where(html.p-index,html.p-otomobil-anahtari) .career-exit-control:hover{background:#0e3f8c}
:where(html.p-index,html.p-otomobil-anahtari) .career-enter-control>span:last-child,:where(html.p-index,html.p-otomobil-anahtari) .career-exit-control>span:last-child{font-size:21px;font-weight:400;line-height:1}
:where(html.p-index,html.p-otomobil-anahtari) .career-enter-control:focus-visible,:where(html.p-index,html.p-otomobil-anahtari) .career-exit-control:focus-visible{outline:3px solid #fff;outline-offset:3px}
:where(html.p-index,html.p-otomobil-anahtari) .career-demo[data-journey="approach"] .career-device{transform:scale(.66)}
:where(html.p-index,html.p-otomobil-anahtari) .career-demo:is([data-journey="threshold"],[data-journey="entering"]) .career-device{z-index:3;opacity:1;transform:scale(.66);transform-origin:bottom left;pointer-events:none}
:where(html.p-index,html.p-otomobil-anahtari) .career-demo[data-journey="cabin"] .career-device{z-index:3;left:15%;bottom:-10%;width:70%;opacity:1;transform:none;pointer-events:none}
:where(html.p-index,html.p-otomobil-anahtari) .career-demo:is([data-journey="exit-door"],[data-journey="exit-seat"],[data-journey="exiting"]) .career-device{z-index:3;left:2%;bottom:0;width:53%;opacity:1;transform:scale(.66);transform-origin:bottom left;pointer-events:none}
:where(html.p-index,html.p-otomobil-anahtari) .career-demo:is([data-journey="lookdown"],[data-journey="port"],[data-journey="seating"],[data-journey="connected"],[data-journey="unplug"],[data-journey="removing"],[data-journey="removed"]) .career-device{opacity:0;transform:translateY(30px);pointer-events:none}
:where(html.p-index,html.p-otomobil-anahtari) .career-demo:is([data-journey="ready-exit"],[data-journey="device"]) .career-device{opacity:1;transform:none;pointer-events:auto}
:where(html.p-index,html.p-otomobil-anahtari) .career-demo[data-journey="device"][data-step="1"] .career-device{left:14%;bottom:-11%;width:72%}
:where(html.p-index,html.p-otomobil-anahtari) .career-demo[data-journey="device"]:is([data-step="2"],[data-step="3"],[data-step="4"]) .career-device{left:-12%;bottom:-29%;width:124%}
:where(html.p-index,html.p-otomobil-anahtari) .career-demo[data-journey="ready-exit"] .career-device{left:14%;bottom:-11%;width:72%}
:where(html.p-index,html.p-otomobil-anahtari) .career-demo[data-step="7"] .career-device{width:46%;left:2%;bottom:0}
:where(html.p-index,html.p-otomobil-anahtari) .career-demo:is([data-journey="unplug"],[data-journey="removing"],[data-journey="removed"],[data-journey="ready-exit"],[data-journey="exit-seat"],[data-journey="exit-door"]) .career-cabin{visibility:visible;clip-path:circle(115% at 44.5% 47%)}
:where(html.p-index,html.p-otomobil-anahtari) .career-demo:is([data-journey="unplug"],[data-journey="removing"],[data-journey="removed"]) .career-cabin-photo{transform:translateY(-8%) scale(1.23);opacity:0}
:where(html.p-index,html.p-otomobil-anahtari) .career-demo:is([data-journey="unplug"],[data-journey="removing"],[data-journey="removed"]) .career-footwell{opacity:1;transform:scale(1)}
:where(html.p-index,html.p-otomobil-anahtari) .career-demo:is([data-journey="unplug"],[data-journey="removing"],[data-journey="removed"],[data-journey="ready-exit"],[data-journey="exit-seat"]) .career-doorway-photo{opacity:0;transform:translate(-4%,-3%) scale(1.28)}
:where(html.p-index,html.p-otomobil-anahtari) .career-demo:is([data-journey="ready-exit"],[data-journey="exit-seat"]) .career-cabin-photo{opacity:1;transform:scale(1)}
:where(html.p-index,html.p-otomobil-anahtari) .career-demo[data-journey="exit-door"] .career-doorway-photo{opacity:1;transform:scale(1.08)}
:where(html.p-index,html.p-otomobil-anahtari) .career-demo[data-journey="exit-door"] .career-cabin-photo{opacity:0;transform:translateY(4%) scale(1.13)}
:where(html.p-index,html.p-otomobil-anahtari) .career-demo[data-journey="exit-door"] .career-vehicle{opacity:1;transform:scale(1.35)}
:where(html.p-index,html.p-otomobil-anahtari) .career-demo[data-journey="exiting"] .career-vehicle{opacity:1;transform:scale(1)}
:where(html.p-index,html.p-otomobil-anahtari) .career-demo[data-journey="device"] .career-cabin-photo{filter:blur(1px) brightness(.82)}
:where(html.p-index,html.p-otomobil-anahtari) .career-demo[data-journey="device"] .career-cabin:after{background:linear-gradient(180deg,#0a224c0a 20%,#07152b50 100%)}
:where(html.p-index,html.p-otomobil-anahtari) .career-demo:is([data-journey="ready-exit"],[data-journey="exit-seat"],[data-journey="exit-door"]) .career-vehicle{pointer-events:none}
:where(html.p-index,html.p-otomobil-anahtari) .career-step-dots span[data-demo-step]{display:grid;place-items:center;min-width:32px;min-height:34px;border-radius:50%;border:1px solid #cfddf0;background:#f4f7fc;color:#45607f;font:500 11px/1 "Plus Jakarta Sans",sans-serif}
:where(html.p-index,html.p-otomobil-anahtari) .career-step-dots span[data-demo-step].is-complete{background:#e8f0fc;color:#174fa4;border-color:#b9ccec}
:where(html.p-index,html.p-otomobil-anahtari) .career-step-dots span[data-demo-step][aria-current]{background:#1553b1;border-color:#1553b1;color:#fff;box-shadow:0 0 0 4px #e5eefb}
:where(html.p-index,html.p-otomobil-anahtari) .career-step-dots{gap:6px;flex-wrap:wrap}
@media(max-width:480px){:where(html.p-index,html.p-otomobil-anahtari) .career-enter-control,:where(html.p-index,html.p-otomobil-anahtari) .career-exit-control{max-width:51%;font-size:10px;min-height:42px;padding:7px 9px;gap:6px}:where(html.p-index,html.p-otomobil-anahtari) .career-step-dots{gap:5px}:where(html.p-index,html.p-otomobil-anahtari) .career-step-dots span[data-demo-step]{min-width:32px;min-height:32px;font-size:10px}:where(html.p-index,html.p-otomobil-anahtari) .career-demo[data-journey="device"][data-step="1"] .career-device,:where(html.p-index,html.p-otomobil-anahtari) .career-demo[data-journey="ready-exit"] .career-device{left:7%;bottom:-8%;width:86%}:where(html.p-index,html.p-otomobil-anahtari) .career-demo[data-journey="device"]:is([data-step="2"],[data-step="3"],[data-step="4"]) .career-device{left:-12%;bottom:-28%;width:124%}:where(html.p-index,html.p-otomobil-anahtari) .career-demo[data-journey="cabin"] .career-device{left:7%;bottom:-8%;width:86%}}

/* Connect the OBD2 cable to the labelled device port from the driver's seat. */
:where(html.p-index,html.p-otomobil-anahtari) .career-demo:is([data-journey="device-setup"],[data-journey="device-attaching"],[data-journey="device-attached"]) .career-vehicle{opacity:.16;transform:scale(1)}
:where(html.p-index,html.p-otomobil-anahtari) .career-demo:is([data-journey="device-setup"],[data-journey="device-attaching"],[data-journey="device-attached"]) .career-device{z-index:3;left:2%;bottom:-5%;width:96%;opacity:1;transform:none;pointer-events:auto}
:where(html.p-index,html.p-otomobil-anahtari) .career-first-cable-photo{position:absolute;z-index:4;right:1%;bottom:1%;width:23%;height:auto;opacity:0;filter:drop-shadow(0 9px 12px #101d3266);pointer-events:none;transition:opacity .35s ease}
:where(html.p-index,html.p-otomobil-anahtari) .career-demo[data-journey="device-setup"] .career-first-cable-photo{opacity:1}
:where(html.p-index,html.p-otomobil-anahtari) .career-device-cable{position:absolute;inset:0;width:100%;height:100%;overflow:visible;opacity:0;pointer-events:none;filter:drop-shadow(3px 6px 4px #0008)}
:where(html.p-index,html.p-otomobil-anahtari) .career-device-cable-shadow,:where(html.p-index,html.p-otomobil-anahtari) .career-device-cable-wire,:where(html.p-index,html.p-otomobil-anahtari) .career-device-cable-highlight{fill:none;stroke-linecap:round}
:where(html.p-index,html.p-otomobil-anahtari) .career-device-cable-shadow{stroke:#0009;stroke-width:27;transform:translate(5px,7px)}
:where(html.p-index,html.p-otomobil-anahtari) .career-device-cable-wire{stroke:#192633;stroke-width:19}
:where(html.p-index,html.p-otomobil-anahtari) .career-device-cable-highlight{stroke:#788390;stroke-width:3;transform:translateX(-4px);opacity:.55}
:where(html.p-index,html.p-otomobil-anahtari) .career-demo:is([data-journey="device-attaching"],[data-journey="device-attached"],[data-journey="approach"],[data-journey="threshold"],[data-journey="entering"],[data-journey="cabin"]) .career-device-cable,:where(html.p-index,html.p-otomobil-anahtari) .career-demo[data-journey="device"][data-step="1"] .career-device-cable{opacity:1}
:where(html.p-index,html.p-otomobil-anahtari) .career-device-port{position:absolute;z-index:7;left:42.8%;top:35.8%;width:11%;height:7%;min-width:48px;min-height:36px;transform:translate(-50%,-50%);padding:0;border:2px solid #f4faff;border-radius:8px;background:#1257ac22;box-shadow:0 0 0 5px #2470dc75;cursor:pointer}
:where(html.p-index,html.p-otomobil-anahtari) .career-device-port:hover{background:#2382e64a}
:where(html.p-index,html.p-otomobil-anahtari) .career-device-port:focus-visible{outline:3px solid #fff;outline-offset:7px}
:where(html.p-index,html.p-otomobil-anahtari) .career-device-port-callout{position:absolute;left:50%;bottom:calc(100% + 18px);transform:translateX(-50%);min-width:165px;padding:9px 11px;border-radius:9px;background:#fff;color:#123d77;box-shadow:0 8px 22px #0003;font:600 11px/1.35 "Plus Jakarta Sans",sans-serif;white-space:nowrap}
:where(html.p-index,html.p-otomobil-anahtari) .career-device-port-callout:after{content:"";position:absolute;top:100%;left:50%;height:13px;border-left:1px solid #fff}
@media(max-width:480px){:where(html.p-index,html.p-otomobil-anahtari) .career-demo:is([data-journey="device-setup"],[data-journey="device-attaching"],[data-journey="device-attached"]) .career-device{left:-8%;bottom:0;width:112%}:where(html.p-index,html.p-otomobil-anahtari) .career-first-cable-photo{width:29%;right:-2%;bottom:4%}:where(html.p-index,html.p-otomobil-anahtari) .career-device-port{min-width:40px;min-height:32px}:where(html.p-index,html.p-otomobil-anahtari) .career-device-port-callout{min-width:145px;font-size:10px}}

/* One continuous first-person camera move in and out of the car. */
:where(html.p-index,html.p-otomobil-anahtari) .career-demo[data-journey="camera-enter"] .career-vehicle,:where(html.p-index,html.p-otomobil-anahtari) .career-demo[data-journey="camera-exit"] .career-vehicle{animation:career-camera-car 5.6s linear both;transition:none}
:where(html.p-index,html.p-otomobil-anahtari) .career-demo[data-journey="camera-exit"] .career-vehicle{animation-direction:reverse}
:where(html.p-index,html.p-otomobil-anahtari) .career-demo:is([data-journey="camera-enter"],[data-journey="camera-exit"]) .career-cabin{visibility:visible;clip-path:circle(115% at 44.5% 47%);animation:career-camera-cabin 5.6s linear both;transition:none}
:where(html.p-index,html.p-otomobil-anahtari) .career-demo[data-journey="camera-exit"] .career-cabin{animation-direction:reverse}
:where(html.p-index,html.p-otomobil-anahtari) .career-demo:is([data-journey="camera-enter"],[data-journey="camera-exit"]) .career-doorway-photo{opacity:0;animation:none;transition:none}
:where(html.p-index,html.p-otomobil-anahtari) .career-demo:is([data-journey="camera-enter"],[data-journey="camera-exit"]) .career-cabin-photo{opacity:1;transform:scale(1.08);animation:none;transition:none}
:where(html.p-index,html.p-otomobil-anahtari) .career-demo:is([data-journey="camera-enter"],[data-journey="camera-exit"]) .career-device{z-index:3;transition:none;pointer-events:none;transform-origin:top left}
:where(html.p-index,html.p-otomobil-anahtari) .career-demo[data-journey="camera-enter"] .career-device{width:62%;left:19%;bottom:-8%;animation:career-camera-device-enter 5.6s linear both}
:where(html.p-index,html.p-otomobil-anahtari) .career-demo[data-journey="camera-exit"] .career-device{width:72%;left:14%;bottom:-11%;animation:career-camera-device-exit 5.6s linear both}
@keyframes career-camera-car{0%{transform:scale(1);opacity:1}52%{transform:scale(2.524);opacity:1}57.99%{transform:scale(2.7);opacity:1}58%,100%{transform:scale(2.7);opacity:0}}
@keyframes career-camera-cabin{0%,57.99%{opacity:.01}58%,100%{opacity:1}}
@keyframes career-camera-device-enter{from{transform:translate(-5%,1%) scale(.855)}to{transform:none}}
@keyframes career-camera-device-exit{from{transform:none}to{transform:translate(-17%,20%) scale(.64)}}

/* The visitor can look around before either cable connection. */
:where(html.p-index,html.p-otomobil-anahtari) .career-demo:is([data-journey="device-setup"],[data-journey="device-attaching"],[data-journey="device-attached"],[data-journey="camera-lookdown"]) .career-vehicle{opacity:0;transform:scale(4);pointer-events:none}
:where(html.p-index,html.p-otomobil-anahtari) .career-demo:is([data-journey="device-setup"],[data-journey="device-attaching"],[data-journey="device-attached"],[data-journey="camera-lookdown"],[data-journey="raising"]) .career-cabin{visibility:visible;clip-path:circle(115% at 44.5% 47%);opacity:1}
:where(html.p-index,html.p-otomobil-anahtari) .career-demo:is([data-journey="device-setup"],[data-journey="device-attaching"],[data-journey="device-attached"],[data-journey="camera-lookdown"],[data-journey="raising"]) .career-doorway-photo{opacity:0}
:where(html.p-index,html.p-otomobil-anahtari) .career-demo:is([data-journey="device-setup"],[data-journey="device-attaching"],[data-journey="device-attached"]) .career-cabin-photo{opacity:1;transform:translateX(var(--look-shift,0px)) scale(1.08);transition:transform .25s ease-out,opacity 1.4s ease}
:where(html.p-index,html.p-otomobil-anahtari) .career-demo:is([data-journey="device-setup"],[data-journey="device-attaching"],[data-journey="device-attached"]) .career-device{z-index:3;left:19%;bottom:-8%;width:62%;opacity:1;transform:none;pointer-events:auto}
:where(html.p-index,html.p-otomobil-anahtari) .career-demo[data-journey="device-setup"] .career-first-cable-photo{opacity:1;right:3%;bottom:0;width:24%}
:where(html.p-index,html.p-otomobil-anahtari) .career-demo[data-journey="device-attaching"] .career-first-cable-photo{opacity:0}
:where(html.p-index,html.p-otomobil-anahtari) .career-demo:is([data-journey="device-attaching"],[data-journey="device-attached"]) .career-device-cable{opacity:1}
:where(html.p-index,html.p-otomobil-anahtari) .career-demo[data-journey="camera-lookdown"] .career-cabin-photo,:where(html.p-index,html.p-otomobil-anahtari) .career-demo:is([data-journey="port"],[data-journey="seating"],[data-journey="connected"],[data-journey="unplug"],[data-journey="removing"],[data-journey="removed"]) .career-cabin-photo{opacity:0;transform:translateY(-8%) scale(1.23);transition:transform 1.55s ease-in-out,opacity 1.3s ease-in-out}
:where(html.p-index,html.p-otomobil-anahtari) .career-demo:is([data-journey="camera-lookdown"],[data-journey="port"],[data-journey="seating"],[data-journey="connected"]) .career-footwell{opacity:1;transform:none;transition:opacity 1.45s ease-in-out,transform 1.55s ease-in-out}
:where(html.p-index,html.p-otomobil-anahtari) .career-demo[data-journey="camera-lookdown"] .career-device{opacity:0;transform:translateY(16%);pointer-events:none}
:where(html.p-index,html.p-otomobil-anahtari) .career-demo:is([data-journey="port"],[data-journey="unplug"]) .career-scene{touch-action:pan-y}
:where(html.p-index,html.p-otomobil-anahtari) .career-demo:is([data-journey="device-setup"],[data-journey="device-attached"]) .career-scene{touch-action:pan-y}
:where(html.p-index,html.p-otomobil-anahtari) .career-demo:is([data-journey="port"],[data-journey="unplug"]) .career-footwell-plane{transform:translateX(calc(-50% + var(--look-shift,0px)));transition:transform .25s ease-out}
:where(html.p-index,html.p-otomobil-anahtari) .career-demo:is([data-journey="port"],[data-journey="unplug"]) .career-obd-target{left:calc(var(--socket-x,40%) + var(--look-shift,0px));transition:left .25s ease-out}
:where(html.p-index,html.p-otomobil-anahtari) .career-demo[data-journey="raising"] .career-footwell{opacity:0;transform:translateY(8%) scale(.93);transition:opacity 1.4s ease,transform 1.5s ease}
:where(html.p-index,html.p-otomobil-anahtari) .career-demo[data-journey="raising"] .career-cabin-photo,:where(html.p-index,html.p-otomobil-anahtari) .career-demo[data-journey="ready-exit"] .career-cabin-photo{opacity:1;transform:scale(1.08);transition:opacity 1.4s ease,transform 1.5s ease}
:where(html.p-index,html.p-otomobil-anahtari) .career-demo[data-journey="raising"] .career-device{z-index:3;left:14%;bottom:-11%;width:72%;opacity:1;transform:none;transition:opacity 1.4s ease,transform 1.5s ease}
:where(html.p-index,html.p-otomobil-anahtari) .career-demo[data-journey="raising"] .career-vehicle{opacity:0}
:where(html.p-index,html.p-otomobil-anahtari) .career-demo[data-journey="camera-exit"] .career-footwell{opacity:0}
:where(html.p-index,html.p-otomobil-anahtari) .career-demo[data-journey="camera-exit"] .career-vehicle{pointer-events:none}
@media(max-width:480px){:where(html.p-index,html.p-otomobil-anahtari) .career-demo:is([data-journey="device-setup"],[data-journey="device-attaching"],[data-journey="device-attached"]) .career-device{left:11%;bottom:-8%;width:77%}:where(html.p-index,html.p-otomobil-anahtari) .career-demo[data-journey="device-setup"] .career-first-cable-photo{right:0;bottom:1%;width:28%}:where(html.p-index,html.p-otomobil-anahtari) .career-demo[data-journey="camera-enter"] .career-device{left:11%;bottom:-8%;width:77%;animation-name:career-camera-device-enter-mobile}:where(html.p-index,html.p-otomobil-anahtari) .career-demo[data-journey="camera-exit"] .career-device{left:7%;bottom:-8%;width:86%;animation-name:career-camera-device-exit-mobile}@keyframes career-camera-device-enter-mobile{from{transform:translate(5%,20%) scale(.675)}to{transform:none}}@keyframes career-camera-device-exit-mobile{from{transform:none}to{transform:translate(-6%,35%) scale(.535)}}}
@media(prefers-reduced-motion:reduce){:where(html.p-index,html.p-otomobil-anahtari) .career-demo:is([data-journey="camera-enter"],[data-journey="camera-exit"]) :is(.career-vehicle,.career-cabin,.career-doorway-photo,.career-cabin-photo,.career-device){animation-duration:.01ms!important}:where(html.p-index,html.p-otomobil-anahtari) .career-demo .career-cabin-photo,:where(html.p-index,html.p-otomobil-anahtari) .career-demo .career-footwell{transition-duration:.01ms!important}}
:where(html.p-index,html.p-otomobil-anahtari) .career-demo[data-step="7"][data-journey="outside"] .career-cabin{visibility:hidden;opacity:0;clip-path:circle(0% at 44.5% 47%);transition:none}
:where(html.p-index,html.p-otomobil-anahtari) .career-demo:is([data-journey="camera-enter"],[data-journey="camera-exit"]) .career-journey-track i{animation:career-camera-progress 5.6s linear both}
@keyframes career-camera-progress{from{width:0}to{width:100%}}
@media(prefers-reduced-motion:reduce){:where(html.p-index,html.p-otomobil-anahtari) .career-demo:is([data-journey="camera-enter"],[data-journey="camera-exit"]) .career-journey-track i{animation-duration:.01ms}}
:where(html.p-index,html.p-otomobil-anahtari) .career-demo[data-journey="camera-enter"] .career-first-cable-photo{right:3%;bottom:0;width:24%;animation:career-cable-carry 5.6s linear both;transition:none}
@keyframes career-cable-carry{0%,58%{opacity:0}80%,100%{opacity:1}}
@media(max-width:480px){:where(html.p-index,html.p-otomobil-anahtari) .career-demo[data-journey="camera-enter"] .career-first-cable-photo{right:0;bottom:1%;width:28%}}
@media(prefers-reduced-motion:reduce){:where(html.p-index,html.p-otomobil-anahtari) .career-demo[data-journey="camera-enter"] .career-first-cable-photo{animation-duration:.01ms}}

/* Unlocking keeps the door shut; the visitor walks up and opens it at the handle. */
:where(html.p-index,html.p-otomobil-anahtari) .career-demo[data-journey="approach"] .career-vehicle{animation:career-approach-door 2.8s linear both;transition:none}
:where(html.p-index,html.p-otomobil-anahtari) .career-demo:is([data-journey="at-door"],[data-journey="door-opening"]) .career-vehicle{opacity:1;transform:scale(2.45);transition:none}
:where(html.p-index,html.p-otomobil-anahtari) .career-demo:is([data-journey="approach"],[data-journey="at-door"],[data-journey="door-opening"]) .career-device{z-index:3;left:19%;bottom:-8%;width:62%;opacity:1;transform:translate(-5%,1%) scale(.855);transform-origin:top left;pointer-events:none}
@keyframes career-approach-door{from{transform:scale(1)}to{transform:scale(2.45)}}
:where(html.p-index,html.p-otomobil-anahtari) .career-door-open-control{position:absolute;z-index:8;left:55.5%;top:30%;width:88px;height:48px;transform:translate(-50%,-50%);border:1px solid transparent;border-radius:24px;background:transparent;color:#fff;cursor:pointer}
:where(html.p-index,html.p-otomobil-anahtari) .career-door-open-control:hover,:where(html.p-index,html.p-otomobil-anahtari) .career-door-open-control:focus-visible{border-color:#ffffffd9;background:#ffffff24;box-shadow:0 0 0 5px #1663bf55}
:where(html.p-index,html.p-otomobil-anahtari) .career-door-open-control:focus-visible{outline:2px solid #fff;outline-offset:5px}
:where(html.p-index,html.p-otomobil-anahtari) .career-door-open-control span{position:absolute;left:50%;bottom:calc(100% + 14px);transform:translateX(-50%);min-width:max-content;padding:10px 14px;border-radius:10px;background:#fff;color:#123d77;box-shadow:0 8px 24px #061a3a66;font:600 12px/1.3 "Plus Jakarta Sans",sans-serif;pointer-events:none}
:where(html.p-index,html.p-otomobil-anahtari) .career-door-open-control span:after{content:"";position:absolute;top:100%;left:50%;height:12px;border-left:2px solid #fff}
:where(html.p-index,html.p-otomobil-anahtari) .career-demo[data-journey="camera-enter"] .career-vehicle{animation:career-camera-car-from-door 3.1s linear both}
:where(html.p-index,html.p-otomobil-anahtari) .career-demo[data-journey="camera-enter"] .career-cabin{animation-duration:3.1s}
:where(html.p-index,html.p-otomobil-anahtari) .career-demo[data-journey="camera-enter"] .career-device{animation-duration:3.1s}
:where(html.p-index,html.p-otomobil-anahtari) .career-demo[data-journey="camera-enter"] .career-first-cable-photo{animation-duration:3.1s}
:where(html.p-index,html.p-otomobil-anahtari) .career-demo[data-journey="camera-enter"] .career-journey-track i{animation-duration:3.1s}
@keyframes career-camera-car-from-door{0%{transform:scale(2.45);opacity:1}57.99%{transform:scale(2.7);opacity:1}58%,100%{transform:scale(2.7);opacity:0}}
@media(max-width:480px){:where(html.p-index,html.p-otomobil-anahtari) .career-demo:is([data-journey="approach"],[data-journey="at-door"],[data-journey="door-opening"]) .career-device{left:11%;bottom:-8%;width:77%;transform:translate(5%,20%) scale(.675)}:where(html.p-index,html.p-otomobil-anahtari) .career-door-open-control{left:49%;top:26%;width:70px;height:42px}:where(html.p-index,html.p-otomobil-anahtari) .career-door-open-control span{top:calc(100% + 10px);bottom:auto;font-size:11px;padding:9px 11px}:where(html.p-index,html.p-otomobil-anahtari) .career-door-open-control span:after{top:auto;bottom:100%}}
@media(prefers-reduced-motion:reduce){:where(html.p-index,html.p-otomobil-anahtari) .career-demo[data-journey="approach"] .career-vehicle{animation-duration:.01ms}:where(html.p-index,html.p-otomobil-anahtari) .career-demo[data-journey="camera-enter"] :is(.career-vehicle,.career-cabin,.career-device,.career-first-cable-photo,.career-journey-track i){animation-duration:.01ms!important}}

/* Keep the complete device in view while seated, including its bottom controls. */
:where(html.p-index,html.p-otomobil-anahtari) .career-demo[data-journey="device"]:is([data-step="1"],[data-step="2"],[data-step="3"],[data-step="4"]) .career-device,:where(html.p-index,html.p-otomobil-anahtari) .career-demo:is([data-journey="device-setup"],[data-journey="device-attaching"],[data-journey="device-attached"],[data-journey="raising"],[data-journey="ready-exit"]) .career-device{left:3%;bottom:2%;width:94%;transform:none}
@media(max-width:480px){
 :where(html.p-index,html.p-otomobil-anahtari) .career-demo[data-journey="device"]:is([data-step="1"],[data-step="2"],[data-step="3"],[data-step="4"]) .career-device,:where(html.p-index,html.p-otomobil-anahtari) .career-demo:is([data-journey="device-setup"],[data-journey="device-attaching"],[data-journey="device-attached"],[data-journey="raising"],[data-journey="ready-exit"]) .career-device{left:0;bottom:3%;width:100%}
 :where(html.p-index,html.p-otomobil-anahtari) .career-demo .career-programming{padding:3%;gap:3px}
 :where(html.p-index,html.p-otomobil-anahtari) .career-demo .career-programming-label{display:none}
 :where(html.p-index,html.p-otomobil-anahtari) .career-demo .career-programming p{font-size:11px;line-height:1.2}
 :where(html.p-index,html.p-otomobil-anahtari) .career-demo .career-programming button{min-height:26px;padding:4px 6px;font-size:10px}
}

/* Photographic straight-on view outdoors; front view remains aligned to the live menu inside. */
:where(html.p-index,html.p-otomobil-anahtari) .career-demo[data-device-view="photo"][data-journey="outside"] .career-device{width:60%;left:0;bottom:1%;transform:none}
:where(html.p-index,html.p-otomobil-anahtari) .career-demo[data-device-view="photo"] .career-device>img{filter:drop-shadow(2px 8px 6px #14263d24)}
:where(html.p-index,html.p-otomobil-anahtari) .career-demo[data-device-view="photo"][data-journey="outside"] .career-device:before{content:"";position:absolute;z-index:-1;left:13%;right:13%;bottom:5.7%;height:5%;border-radius:50%;background:radial-gradient(ellipse,#15213140,transparent 70%);filter:blur(4px);pointer-events:none}
:where(html.p-index,html.p-otomobil-anahtari) .career-demo[data-device-view="photo"][data-journey="outside"] .career-scene{background:linear-gradient(180deg,#f1f5fa 65%,#eef2f7 66%,#e4eaf2 100%)}
@media(max-width:480px){:where(html.p-index,html.p-otomobil-anahtari) .career-demo[data-device-view="photo"][data-journey="outside"] .career-device{width:62%;left:-1%;bottom:1%}}

/* Each user action owns a numbered, keyboard-accessible step. */
:where(html.p-index,html.p-otomobil-anahtari) .career-step-dots{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:9px;max-width:390px;justify-content:start;margin-bottom:24px}
:where(html.p-index,html.p-otomobil-anahtari) .career-step-dots button{width:100%;min-width:0;min-height:38px;border-radius:9px;font-size:12px}
:where(html.p-index,html.p-otomobil-anahtari) .career-step-dots button.is-visited{background:#e8f0fc;color:#174fa4;border-color:#b9ccec}
:where(html.p-index,html.p-otomobil-anahtari) .career-step-dots button[aria-current]{background:#1553b1;color:white;border-color:#1553b1}
:where(html.p-index,html.p-otomobil-anahtari) .career-step-dots button:focus-visible{outline:3px solid #568feb;outline-offset:3px}
:where(html.p-index,html.p-otomobil-anahtari) .career-demo-panels article:focus{outline:none}
:where(html.p-index,html.p-otomobil-anahtari) .career-demo.is-step-jump *{transition:none!important;animation:none!important}

/* ============================================================
   BÖLÜM: components/announcement  (eski: assets/css/components/announcement.css)
   Kapsam: p-index
   ============================================================ */
:where(html.p-index) .site-announcement{width:min(680px,calc(100% - 32px));max-height:calc(100dvh - 40px);padding:0;border:1px solid #d4e1f3;border-radius:22px;background:#fff;color:#162137;box-shadow:0 28px 100px #0a21485e;overflow:auto}
:where(html.p-index) .site-announcement::backdrop{background:#081d3dcc}
:where(html.p-index) .announcement-close{position:absolute;z-index:2;top:14px;right:14px;display:grid;place-items:center;width:44px;height:44px;border:1px solid #cbd9ec;border-radius:50%;background:#fff;color:#153e78;font-family:inherit;font-size:30px;line-height:1;cursor:pointer}
:where(html.p-index) .announcement-close:focus-visible{outline:3px solid #357be1;outline-offset:3px}
:where(html.p-index) .announcement-visual{display:block;background:linear-gradient(130deg,#eef4fc,#f8faff)}
:where(html.p-index) .announcement-visual img{display:block;width:100%;max-height:42dvh;object-fit:contain}
:where(html.p-index) .announcement-content{padding:28px 32px 32px}
:where(html.p-index) .announcement-content h2{margin:0 0 14px;font-size:clamp(24px,3vw,34px);line-height:1.2;letter-spacing:-.035em}
:where(html.p-index) .announcement-content p{margin:0 0 24px;color:#526780;line-height:1.7;font-size:15px}
:where(html.p-index) .announcement-preview{display:block;color:#1755a9;font-size:12px;margin-bottom:12px}
@media(max-width:480px){:where(html.p-index) .announcement-content{padding:22px}:where(html.p-index) .site-announcement{border-radius:16px}}

/* ============================================================
   BÖLÜM: pages/drivers  (eski: assets/css/pages/drivers.css)
   Kapsam: p-suruculer
   ============================================================ */
:where(html.p-suruculer) .drivers-page{padding:130px 0 70px;background:linear-gradient(135deg,#f3f7fd,#fff 50%);color:#142139}:where(html.p-suruculer) .drivers-heading{padding-bottom:40px}:where(html.p-suruculer) .drivers-heading .eyebrow{display:block;margin:36px 0 18px;color:#174eac}:where(html.p-suruculer) .drivers-heading h1{font-size:clamp(36px,4.5vw,64px);line-height:1.13;letter-spacing:-.045em;margin:0 0 24px}:where(html.p-suruculer) .drivers-heading h1 span{color:#174eac}:where(html.p-suruculer) .drivers-heading p{max-width:650px;color:#617189;line-height:1.8}:where(html.p-suruculer) .drivers-jump{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}:where(html.p-suruculer) .drivers-jump a{padding:12px 20px;border:1px solid #d4e0ef;border-radius:30px;background:white;color:#164ba2;font-size:14px}:where(html.p-suruculer) .drivers-jump a:hover{background:#164ba2;color:white}:where(html.p-suruculer) .drivers-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}:where(html.p-suruculer) .driver-card{scroll-margin-top:100px;border:1px solid #dbe5f1;border-radius:22px;background:white;overflow:hidden}:where(html.p-suruculer) .driver-product{display:flex;flex-direction:column;align-items:center;background:linear-gradient(#f5f8fc,#fff);padding:24px}:where(html.p-suruculer) .driver-product img{height:210px;width:100%;object-fit:contain;mix-blend-mode:multiply}:where(html.p-suruculer) .driver-product h2{font-size:26px;margin:18px 0 0;letter-spacing:-.03em}:where(html.p-suruculer) .driver-links{padding:0 28px 28px;display:grid;gap:8px}:where(html.p-suruculer) .driver-links a{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:15px 18px;border:1px solid #dce7f5;border-radius:10px;color:#164ba2;font-size:14px;min-height:52px;transition:background .2s}:where(html.p-suruculer) .driver-links a:hover{background:#eef5ff}:where(html.p-suruculer) .driver-links svg{width:21px;height:21px;flex-shrink:0}:where(html.p-suruculer) .drivers-help{display:flex;align-items:center;justify-content:space-between;gap:25px;margin-top:40px;padding-top:30px;border-top:1px solid #dce7f5}:where(html.p-suruculer) .drivers-help h2{font-size:22px}:where(html.p-suruculer) .drivers-help p{line-height:1.8;color:#617189}:where(html.p-suruculer) .drivers-help .header-button{flex-shrink:0;gap:20px}:where(html.p-suruculer) .drivers-page a:focus-visible{outline:3px solid #729de2;outline-offset:4px}@media(max-width:700px){:where(html.p-suruculer) .drivers-page{padding-top:105px}:where(html.p-suruculer) .drivers-grid{grid-template-columns:1fr}:where(html.p-suruculer) .driver-product img{height:185px}:where(html.p-suruculer) .driver-links{padding:0 18px 20px}:where(html.p-suruculer) .drivers-help{flex-direction:column;align-items:flex-start}:where(html.p-suruculer) .drivers-jump a{font-size:12px;padding:12px 16px}}