:root {
  --bg: #0d0f10;
  --fg: #f4f7f8;
  --muted: rgba(244, 247, 248, 0.62);
  --line: rgba(244, 247, 248, 0.14);
  --card: #151718;
  --paper: #eceff1;
  --paper-ink: #111214;
  --cyan: #d7f5fb;
  --red: #e7eaec;
  --electric: #35d8ff;
  --pulse: #ff3d6e;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

/* Keyboard focus: visible on every interactive element, in every theme */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
  border-radius: 2px;
}

.skip-link {
  position: absolute;
  top: -100px;
  left: 16px;
  z-index: 100;
  padding: 12px 20px;
  background: #fff;
  color: #111214;
  font-size: 14px;
  font-weight: 900;
  text-decoration: none;
  transition: top 150ms ease;
}

.skip-link:focus {
  top: 16px;
}

.honeypot-field {
  position: absolute;
  left: -9999px;
}

body {
  margin: 0;
  min-height: 100%;
  background: var(--bg);
  color: var(--fg);
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  letter-spacing: 0;
  transition: background-color 700ms cubic-bezier(0.22, 1, 0.36, 1),
    color 700ms cubic-bezier(0.22, 1, 0.36, 1);
}

body[data-theme="paper"] {
  background: var(--paper);
  color: var(--paper-ink);
}

body[data-theme="cyan"] {
  background: var(--cyan);
  color: var(--paper-ink);
}

body[data-theme="red"] {
  background: var(--red);
  color: var(--paper-ink);
}

body[data-theme="graphite"] {
  background: #151718;
  color: var(--fg);
}

body.menu-open {
  overflow: hidden;
}

img {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 26px max(22px, calc((100vw - 1380px) / 2));
  background: rgba(13, 15, 16, 0.92);
  backdrop-filter: blur(18px);
}

.brand img {
  width: 148px;
  height: auto;
}

.desktop-nav {
  display: flex;
  gap: 28px;
  font-family: "DM Sans", Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0.01em;
  color: #fff;
}

.desktop-nav a,
.footer a {
  position: relative;
}

.desktop-nav a::after,
.footer a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: -5px;
  height: 1px;
  background: currentColor;
  transition: right 220ms ease;
}

.desktop-nav a:hover::after,
.desktop-nav a:focus-visible::after,
.footer a:hover::after,
.footer a:focus-visible::after {
  right: 0;
}

.menu-toggle {
  display: none;
  width: 44px;
  height: 44px;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.menu-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  margin: 6px auto;
  background: #fff;
  transition: transform 220ms ease, opacity 220ms ease;
}

.menu-open .menu-toggle span:first-child {
  transform: translateY(4px) rotate(45deg);
}

.menu-open .menu-toggle span:last-child {
  transform: translateY(-4px) rotate(-45deg);
}

.menu-overlay {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 42px;
  padding: 40px;
  background: rgba(9, 10, 11, 0.96);
  color: #fff;
  opacity: 0;
  visibility: hidden;
  transform: scale(1.03);
  transition: opacity 260ms ease, visibility 260ms ease, transform 260ms ease;
}

.menu-open .menu-overlay {
  opacity: 1;
  visibility: visible;
  transform: scale(1);
}

.menu-overlay nav {
  display: grid;
  gap: 8px;
  text-align: center;
}

.menu-overlay a {
  font-size: clamp(48px, 9vw, 112px);
  line-height: 0.96;
  font-weight: 900;
}

.menu-overlay p {
  margin: 0;
  color: rgba(255, 255, 255, 0.58);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.color-section {
  transition: background-color 700ms cubic-bezier(0.22, 1, 0.36, 1),
    color 700ms cubic-bezier(0.22, 1, 0.36, 1);
}

.hero {
  position: relative;
  min-height: 100svh;
  padding: 112px 22px 94px;
  overflow: hidden;
  background: linear-gradient(180deg, #0d0f10 0%, #090a0b 74%, #0d0f10 100%);
  color: #fff;
}


/* Ambient loop rule kept for reuse, but no longer wired into the hero markup:
   the featured band below it is static, so the hero now uses the same
   static gradient (above) at all times for visual parity between the two
   sections instead of one moving and one static. */
.hero-ambient {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .hero-ambient {
    display: none;
  }
}

.hero-inner {
  position: relative;
  z-index: 2;
  width: min(1020px, 100%);
  margin: 0 auto 58px;
  text-align: center;
}

.eyebrow {
  margin: 0 0 18px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1 {
  margin-bottom: 48px;
  font-size: clamp(96px, 24vw, 334px);
  line-height: 0.72;
  font-weight: 900;
  text-transform: uppercase;
}

.hero-payoff {
  display: block;
  margin: 26px auto 0;
  text-align: center;
  max-width: 640px;
  font-size: clamp(18px, 2.4vw, 28px);
  line-height: 1.2;
  font-weight: 700;
  text-transform: none;
  color: rgba(255, 255, 255, 0.72);
}

.hero-actions {
  display: flex;
  justify-content: center;
  margin: 30px auto 40px;
}

.cta-button {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 30px;
  border-radius: 999px;
  background: #fff;
  color: #0c0e10;
  font-weight: 800;
  font-size: clamp(14px, 1.3vw, 17px);
  letter-spacing: 0.01em;
  text-decoration: none;
  transition: transform var(--duration-fast, 150ms) ease, background var(--duration-fast, 150ms) ease;
}

.cta-button:hover,
.cta-button:focus-visible {
  background: #e8ecef;
  transform: translateY(-2px);
}

.hero-media {
  position: relative;
  width: 100vw;
  min-height: clamp(680px, 74vw, 1000px);
  margin: 0 calc(50% - 50vw) -94px;
  /* `hidden` bu bandı bir KAYDIRMA KABI yapıyordu; içindeki
     `animation-timeline: view()` belgeye değil ona bağlanıyor, o kap da hiç
     kaydırılmadığı için sökülüm çizimi tek karede donuyordu. `clip` aynı kırpmayı
     yapar ama kaydırma kabı yaratmaz. */
  overflow: clip;
  background: #b8bcc0;
  isolation: isolate;
}

/* Cursor-follow spotlight across the whole band (not per-card): script.js
   tracks pointermove on .hero-media itself and writes --x/--y, this paints
   it. Sits behind .media-row (z-index 3) via plain paint order — no
   explicit z-index needed since .hero-media isolates its own stacking
   context and ::before always paints before in-flow children. */
.hero-media::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at var(--x, 50%) var(--y, 50%), rgba(255, 255, 255, 0.55), transparent 38%);
  opacity: 0;
  transition: opacity 260ms ease;
  pointer-events: none;
}

.hero-media:hover::before,
.hero-media:focus-within::before {
  opacity: 1;
}

.media-row {
  position: relative;
  z-index: 3;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-end;
  gap: clamp(24px, 4vw, 64px);
  width: 100%;
  height: 100%;
}

.media-card {
  position: relative;
  flex: 1 1 320px;
  min-height: clamp(680px, 74vw, 1000px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(20px, 3vw, 40px);
}

.media-card[hidden] {
  display: none;
}

/* With both cards visible above the mobile stacking breakpoint, each card's
   max-width (560px) is narrower than the model-name type and specs row were
   sized for (both were tuned for the old full-band-width single card), so
   they overflow into the neighboring card. Scoped to the two-card case via
   :has() so the single-card band stays pixel-identical to today. The 560px
   cap itself is also scoped here (rather than applied unconditionally to
   .media-card) so a single visible card can grow to the full band width. */
@media (min-width: 841px) {
  .media-row:has(.media-card[data-featured-band="2"]:not([hidden])) .media-card {
    max-width: 560px;
  }

  .media-row:has(.media-card[data-featured-band="2"]:not([hidden])) .media-copy strong {
    font-size: clamp(30px, 4.8vw, 56px);
  }
}

.media-copy {
  width: 100%;
  display: grid;
  gap: 10px;
  justify-items: center;
  text-align: center;
  font-family: "Space Grotesk", Inter, system-ui, sans-serif;
}

.media-copy span {
  color: rgba(17, 18, 20, 0.6);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.media-copy strong {
  color: #111214;
  font-size: clamp(44px, 6.8vw, 108px);
  line-height: 0.88;
  font-weight: 700;
  letter-spacing: -0.03em;
}

.media-copy .band-slogan {
  color: rgba(17, 18, 20, 0.7);
  font-size: clamp(16px, 1.7vw, 24px);
  font-weight: 600;
  letter-spacing: 0.01em;
  text-transform: none;
  max-width: 720px;
}

.media-copy .text-link {
  color: #111214;
}

/* Featured product plate — paper surface so any catalog photo (JPG,
   white background) reads as intentional on the dark band */
.media-plate {
  position: relative;
  width: min(38vw, 500px);
  aspect-ratio: 1 / 1;
  display: grid;
  padding: clamp(14px, 2vw, 30px);
  background: var(--paper);
  border: 1px solid rgba(17, 18, 20, 0.16);
  will-change: transform;
}

.media-badge {
  position: absolute;
  top: clamp(10px, 1.4vw, 18px);
  left: clamp(10px, 1.4vw, 18px);
  z-index: 4;
  padding: 6px 12px;
  background: #111214;
  color: #f4f7f8;
  font-family: "Space Grotesk", Inter, system-ui, sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-radius: 999px;
}

.media-plate img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Transparent product photos (black OR white products) skip the paper
   plate: a mid-tone spotlight halo keeps either extreme legible against
   the gray band, no ground/drop shadow. */
.media-plate.is-cutout {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
}

.media-plate.is-cutout::before {
  content: "";
  position: absolute;
  inset: -14%;
  z-index: -1;
  background: radial-gradient(
    circle at 50% 46%,
    rgba(158, 168, 173, 0.42) 0%,
    rgba(158, 168, 173, 0.12) 46%,
    transparent 70%
  );
}

.media-plate.is-cutout img {
  filter: drop-shadow(0 0 26px rgba(244, 247, 248, 0.17));
}

.media-specs {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  max-width: min(90vw, 640px);
  padding-top: 8px;
}

.media-spec-row {
  /* Etiket sabit sütunda durur; uzun değer sarınca etikete karışmaz */
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 4px 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(17, 18, 20, 0.18);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 250ms ease, transform 250ms ease;
}

.media-specs.is-revealed .media-spec-row {
  opacity: 1;
  transform: translateY(0);
}

.media-spec-value {
  font-family: "Space Grotesk", Inter, system-ui, sans-serif;
  font-weight: 700;
  font-size: 15px;
  color: #111214;
  min-width: 0;
  text-align: left;
}

.media-spec-label {
  font-size: 12px;
  color: rgba(17, 18, 20, 0.62);
  text-align: right;
  white-space: nowrap;
}

@media (max-width: 560px) {
  /* Dar ekranda etiket kısalır ama sütununda kalır; alt satıra düşerse değerle
     tek cümleye dönüşüyordu. Kart yüksekliği sabit kalsın diye istifleme yok. */
  .media-spec-label { font-size: 11px; }
  .media-spec-value { font-size: 14px; }
  /* 320px'te uzun etiket (BOTTOM RADIATOR SUPPORT) tek satıra sığmıyor; nowrap
     onu değer sütununa itiyor ve değerle üst üste biniyordu (BL #74). Değer en
     çok yarıyı alır, kalan etiketin; etiket yalnız sığmadığında alt satıra sarar. */
  .media-spec-row { grid-template-columns: fit-content(50%) minmax(0, 1fr); }
  .media-spec-label { white-space: normal; }
}

[data-parallax] {
  will-change: transform;
}


.manifest {
  display: grid;
  justify-items: center;
  padding: 136px 22px 150px;
  background: var(--paper);
  color: var(--paper-ink);
}

.manifest > p {
  width: min(860px, 100%);
  margin: 0;
  color: #76786f;
  font-size: clamp(23px, 2.45vw, 40px);
  line-height: 1.22;
  font-weight: 900;
}

.metrics {
  width: min(1180px, 100%);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  margin-top: 86px;
}

.metric-card {
  min-height: clamp(320px, 27vw, 430px);
  display: grid;
  grid-template-rows: auto 1fr auto;
  align-content: stretch;
  padding: clamp(28px, 3.5vw, 48px);
  border-radius: 8px;
  color: #f4f7f8;
  border: 1px solid rgba(244, 247, 248, 0.12);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  transform: translateZ(0);
}

.metric-lilac {
  background: #15181b;
}

.metric-cyan {
  margin-top: 38px;
  background: linear-gradient(145deg, #0f252c, #112024);
}

.metric-rose {
  background: linear-gradient(145deg, #241216, #16181b);
}

.metric-sage {
  margin-top: 38px;
  background: #e8edf0;
  color: #111214;
  border-color: rgba(17, 18, 20, 0.14);
}

.metric-card strong {
  font-size: clamp(68px, 7.2vw, 116px);
  line-height: 1;
  font-weight: 900;
  letter-spacing: -0.04em;
}

.metric-card strong span {
  font-size: 0.48em;
  letter-spacing: 0;
  vertical-align: 0.42em;
}

.metric-card i {
  align-self: end;
  display: block;
  height: 1px;
  margin: 28px 0 24px;
  background: rgba(244, 247, 248, 0.2);
}

.metric-sage i {
  background: rgba(17, 18, 20, 0.22);
}

.metric-card p {
  max-width: 210px;
  margin: 0;
  font-size: clamp(13px, 1.05vw, 17px);
  line-height: 1.22;
  font-weight: 900;
  color: rgba(244, 247, 248, 0.78);
}

.metric-sage p {
  color: rgba(17, 18, 20, 0.64);
}

.showcase {
  padding: 118px 0 150px;
  background: #101213;
  color: #fff;
}

.showcase-head {
  width: min(1296px, calc(100% - 44px));
  margin: 0 auto 70px;
  display: grid;
  grid-template-columns: 0.38fr 1fr;
  gap: 48px;
  align-items: end;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  padding-top: 32px;
}

.showcase-head h2 {
  max-width: 1040px;
  margin: 0;
  font-size: clamp(48px, 7.4vw, 126px);
  line-height: 0.88;
  font-weight: 900;
}

.portfolio-stack {
  display: grid;
  gap: clamp(24px, 4vw, 54px);
  width: min(1296px, calc(100% - 44px));
  margin: 0 auto;
}

.portfolio-card {
  position: relative;
  min-height: clamp(560px, 72vw, 820px);
  display: grid;
  /* Üstteki iki satır (etiket, başlık) tepeye toplanır, açıklama alta yaslanır.
     `space-between` boşluğu iki aralığa bölüyordu, o yüzden başlığın üst marjını
     kısmak boşluğun ancak yarısını geri veriyordu. */
  grid-template-rows: auto auto 1fr;
  align-content: space-between;
  padding: clamp(28px, 4.6vw, 72px);
  overflow: hidden;
  border-radius: 28px;
  isolation: isolate;
  color: #fff;
  background: #17191a;
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.34);
  transform: translateZ(0);
  transition: transform 260ms ease, border-radius 260ms ease;
}

.portfolio-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  opacity: 0.92;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), transparent 52%),
    radial-gradient(circle at 78% 30%, rgba(88, 221, 255, 0.22), transparent 32%);
}

.portfolio-card::after {
  content: "";
  position: absolute;
  inset: -36%;
  z-index: -1;
  background: radial-gradient(circle at var(--x, 62%) var(--y, 38%), rgba(255, 255, 255, 0.2), transparent 24%);
  opacity: 0;
  transition: opacity 260ms ease;
}

.portfolio-card:hover,
.portfolio-card:focus-within {
  transform: translateY(-10px);
  border-radius: 36px;
}

.portfolio-card:hover::after,
.portfolio-card:focus-within::after {
  opacity: 1;
}

.card-monitor {
  background: #101316;
}

.card-case {
  background: #202326;
  color: #f4f7f8;
}

.card-case::before {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.08), transparent 52%),
    radial-gradient(circle at 74% 28%, rgba(255, 61, 110, 0.2), transparent 34%);
}

.card-cooling {
  background: #11181c;
}

.card-accessories {
  background: #e7edf0;
  color: #111214;
}

.card-accessories::before {
  background: linear-gradient(135deg, rgba(17, 18, 20, 0.08), transparent 52%),
    radial-gradient(circle at 78% 32%, rgba(53, 216, 255, 0.26), transparent 34%);
}

.portfolio-meta {
  order: 1;
  display: flex;
  justify-content: space-between;
  gap: 22px;
  padding-bottom: 30px;
  border-bottom: 1px solid currentColor;
  color: currentColor;
  opacity: 0.82;
  font-size: clamp(14px, 1.2vw, 18px);
  font-weight: 900;
}

.portfolio-card h3 {
  /* Baslik en altta: 1fr satirinin dibine yaslanir, karti model kodu kapatir. */
  order: 3;
  align-self: end;
  position: relative;
  z-index: 2;
  max-width: 58%;
  margin: 0;
  /* --kart-baslik panelden gelen punto TAVANI; alt sınır ve viewport ölçeği
     korunur, böylece elle girilen bir sayı dar ekranı taşırmaz. */
  font-size: clamp(48px, 8vw, var(--kart-baslik, 128px));
  line-height: 0.84;
  font-weight: 900;
  text-wrap: balance;
}

.portfolio-card p {
  order: 2;
  align-self: start;
  position: relative;
  z-index: 3;
  max-width: 460px;
  margin: clamp(22px, 2.6vw, 38px) 0 0;
  color: currentColor;
  opacity: 0.62;
  font-size: clamp(17px, 1.6vw, 24px);
  line-height: 1.22;
  font-weight: 900;
}

.portfolio-card img {
  position: absolute;
  right: clamp(16px, 6vw, 90px);
  bottom: clamp(18px, 5vw, 72px);
  width: min(48vw, 620px);
  max-height: 560px;
  object-fit: contain;
  opacity: 0.64;
  filter: drop-shadow(0 34px 40px rgba(0, 0, 0, 0.42));
  transform: translateY(18px) scale(0.98);
  transition: opacity 260ms ease, transform 260ms ease;
}

.card-case img,
.card-cooling img {
  right: clamp(-12px, 2vw, 34px);
  bottom: clamp(16px, 3vw, 42px);
  width: min(43vw, 590px);
  max-height: 620px;
  object-fit: contain;
  opacity: 0.82;
  box-shadow: none;
}

.card-cooling img {
  right: clamp(-8px, 2.6vw, 42px);
  width: min(42vw, 570px);
}

.portfolio-card:hover img,
.portfolio-card:focus-within img {
  opacity: 0.86;
  transform: translateY(0) scale(1.025);
}

.split {
  display: grid;
  grid-template-columns: 1fr 0.86fr;
  gap: 48px;
  align-items: end;
  padding: clamp(86px, 12vw, 168px) clamp(22px, 6vw, 96px);
  background: #11181c;
  color: #f4f7f8;
}

.split h2 {
  margin: 0;
  font-size: clamp(58px, 8vw, 136px);
  line-height: 0.88;
  font-weight: 900;
}

.split p:not(.eyebrow) {
  margin: 0;
  color: rgba(244, 247, 248, 0.62);
  font-size: clamp(20px, 2.4vw, 34px);
  line-height: 1.22;
  font-weight: 900;
}

.expertise {
  width: 100%;
  margin: 0 auto;
  padding: 120px max(22px, calc((100vw - 1120px) / 2)) 104px;
  background: var(--paper);
  color: var(--paper-ink);
}

.expertise .eyebrow {
  color: #5f605b;
}

.expertise-row {
  display: grid;
  grid-template-columns: 62px 230px 1fr;
  gap: 26px;
  padding: 26px 0;
  border-top: 1px solid rgba(17, 18, 20, 0.14);
}

.expertise-row:last-child {
  border-bottom: 1px solid rgba(17, 18, 20, 0.14);
}

.expertise-row span,
.expertise-row strong,
.expertise-row p {
  margin: 0;
  font-size: 15px;
  line-height: 1.5;
  font-weight: 900;
}

.expertise-row p {
  color: #5f605b;
  font-weight: 800;
}

.support-hub {
  padding: clamp(86px, 12vw, 168px) clamp(22px, 6vw, 96px);
  background: #e7eaec;
  color: var(--paper-ink);
}

.support-head {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 48px;
  align-items: end;
  margin-bottom: 58px;
}

.support-head h2 {
  max-width: 820px;
  margin: 0;
  font-size: clamp(48px, 6.8vw, 112px);
  line-height: 0.92;
  font-weight: 900;
  text-wrap: balance;
}

.support-hub .eyebrow {
  color: rgba(17, 18, 20, 0.72);
}

.support-grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr 1fr;
  gap: 1px;
  background: rgba(17, 18, 20, 0.22);
  border: 1px solid rgba(17, 18, 20, 0.22);
}

.support-card {
  min-height: 330px;
  display: grid;
  align-content: space-between;
  padding: clamp(24px, 4vw, 46px);
  background: #f4f7f8;
  transition: background 220ms ease, transform 220ms ease;
}

.support-card.primary {
  grid-row: span 2;
  min-height: 661px;
  background: #111314;
  color: #fff;
}

.support-card:hover,
.support-card:focus-visible {
  background: #ffffff;
}

.support-card.primary:hover,
.support-card.primary:focus-visible {
  background: #171a1c;
}

.support-card span {
  color: rgba(17, 18, 20, 0.72);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.support-card.primary span,
.support-card.primary p {
  color: rgba(255, 255, 255, 0.58);
}

.support-card h3 {
  margin: 48px 0 18px;
  font-size: clamp(28px, 3.6vw, 58px);
  line-height: 0.98;
  font-weight: 900;
  text-wrap: balance;
}

.support-card p {
  max-width: 420px;
  margin: 0;
  color: rgba(17, 18, 20, 0.66);
  font-size: 15px;
  line-height: 1.45;
  font-weight: 800;
}

.footer {
  padding: clamp(70px, 10vw, 130px) clamp(22px, 6vw, 96px) 38px;
  background: #0f1112;
  color: #fff;
}

.footer-hero {
  display: grid;
  grid-template-columns: 0.62fr 1.38fr;
  gap: 48px;
  align-items: start;
  margin-bottom: clamp(70px, 10vw, 128px);
}

.footer-hero img {
  width: min(260px, 70%);
  height: auto;
}

.footer h2 {
  margin: 0;
  font-size: clamp(54px, 8vw, 132px);
  line-height: 0.92;
  font-weight: 900;
  text-wrap: balance;
}

.footer-columns {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
  padding-top: 34px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.footer-columns div {
  display: grid;
  align-content: start;
  gap: 12px;
}

.footer-columns span {
  margin-bottom: 14px;
  color: rgba(255, 255, 255, 0.62);
  font-family: "DM Sans", Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.footer-columns a,
.footer-bottom {
  color: rgba(255, 255, 255, 0.74);
  font-family: "DM Sans", Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0.01em;
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  margin-top: 64px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-bottom p {
  max-width: 62ch;
  margin: 0;
  line-height: 1.6;
}

.section-head {
  width: min(1120px, 100%);
  margin: 0 auto 34px;
}

.section-head h2 {
  max-width: 760px;
  margin: 0;
  font-size: clamp(38px, 7vw, 88px);
  line-height: 0.95;
  letter-spacing: 0;
}

.products-hero {
  min-height: 78svh;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.78fr);
  align-items: end;
  gap: 48px;
  padding: 132px max(22px, calc((100vw - 1380px) / 2)) 86px;
  background:
    radial-gradient(circle at 82% 16%, rgba(53, 216, 255, 0.16), transparent 26%),
    linear-gradient(180deg, #0d0f10 0%, #090a0b 100%);
  color: #fff;
  overflow: hidden;
}

.products-hero-copy {
  width: 100%;
}

/* Öne çıkan ürün kendi bölümündeydi ve listeye inmeyi bir ekran geciktiriyordu;
   kahramanın boş duran sağ yarısında duruyor. */
.products-hero-featured {
  align-self: end;
  display: grid;
  gap: 12px;
  justify-items: start;
  padding-bottom: 6px;
}

.products-hero-featured img {
  width: min(360px, 100%);
  justify-self: center;
  filter: drop-shadow(0 26px 44px rgba(0, 0, 0, 0.5));
}

.products-hero-featured .featured-product-copy {
  display: grid;
  gap: 6px;
}

.products-hero-featured h2 {
  margin: 0;
  font-size: clamp(30px, 3.4vw, 46px);
  line-height: 0.94;
  overflow-wrap: anywhere;
}

.products-hero-featured .featured-product-name {
  margin: 0;
  max-width: 40ch;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  opacity: 0.7;
}

.products-hero h1 {
  max-width: 100%;
  margin: 0 0 28px;
  font-size: clamp(66px, 13vw, 186px);
  line-height: 0.82;
}

.products-hero p:last-child {
  max-width: 650px;
  margin: 0;
  color: rgba(255, 255, 255, 0.68);
  font-size: clamp(17px, 2vw, 24px);
  line-height: 1.25;
  font-weight: 800;
}

.products-listing,
.product-specs,
.product-gallery,
.product-downloads,
.product-support {
  padding: 92px max(22px, calc((100vw - 1380px) / 2));
}

.product-gallery {
  background: var(--paper);
  color: var(--paper-ink);
}

.products-listing {
  background: #0d0f10;
  color: #fff;
}

.product-family-rail {
  width: min(1120px, 100%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.product-family-chip {
  min-height: 190px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 22px;
  border: 1px solid rgba(17, 18, 20, 0.14);
  background: rgba(255, 255, 255, 0.42);
}

.product-family-chip span {
  max-width: 180px;
  font-size: 28px;
  line-height: 0.95;
  font-weight: 900;
}

.product-family-chip small {
  color: rgba(17, 18, 20, 0.62);
  font-size: 12px;
  line-height: 1.35;
  font-weight: 900;
}



.text-link {
  display: inline-flex;
  margin-top: 10px;
  color: #fff;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border-bottom: 1px solid currentColor;
}

.products-grid {
  width: min(1240px, 100%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}

@media (max-width: 1100px) and (min-width: 841px) {
  .products-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Products page: every block uses the header's 1380px frame (the section
   padding already provides it), so logo, headings, toolbar and grid share
   one left and one right edge. */
.products-listing .section-head,
.products-listing .products-grid {
  width: 100%;
}

/* Catalog toolbar: one bar on a white band above the listing — family tabs
   on the left, search and sort on the right, all the same height. */
.products-filter-band {
  padding: 92px max(22px, calc((100vw - 1380px) / 2));
  background: var(--paper);
  color: var(--paper-ink);
}

.products-filter-band .section-head {
  width: 100%;
}

.products-filter-band .eyebrow {
  color: rgba(17, 18, 20, 0.72);
}

.catalog-toolbar {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.catalog-toolbar .catalog-chips {
  flex: 1 1 auto;
  margin-bottom: 0;
}

.catalog-toolbar .filter-chip,
.catalog-toolbar .catalog-search input,
.catalog-toolbar .catalog-sort select {
  height: 46px;
  padding: 0 16px;
  border: 1px solid rgba(17, 18, 20, 0.14);
  background-color: rgba(255, 255, 255, 0.42);
  color: var(--paper-ink);
  font-size: 14px;
}

.catalog-toolbar .filter-chip:hover {
  border-color: rgba(17, 18, 20, 0.6);
}

.catalog-toolbar .filter-chip.active {
  background: #111214;
  border-color: #111214;
  color: #fff;
}

.catalog-toolbar .catalog-search input {
  width: 240px;
}

.catalog-toolbar .catalog-search input::placeholder {
  color: rgba(17, 18, 20, 0.55);
}

.catalog-toolbar .catalog-sort {
  margin-left: 0;
  color: rgba(17, 18, 20, 0.72);
  font-size: 13px;
}

.catalog-toolbar .catalog-sort select {
  padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23111214' stroke-width='2'/%3E%3C/svg%3E");
  background-position: right 16px center;
}

.catalog-toolbar .catalog-sort option {
  color: #111214;
}

.catalog-toolbar .filter-chip:focus-visible,
.catalog-toolbar .catalog-search input:focus,
.catalog-toolbar .catalog-sort select:focus {
  outline: 2px solid #111214;
  outline-offset: 2px;
}

@media (max-width: 560px) {
  .products-filter-band {
    padding: 64px 18px;
  }

  .catalog-toolbar .catalog-chips {
    flex: 1 1 100%;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .catalog-toolbar .filter-chip {
    flex: 0 0 auto;
  }

  .catalog-toolbar .catalog-search,
  .catalog-toolbar .catalog-search input {
    width: 100%;
  }

  .catalog-toolbar .catalog-sort {
    width: 100%;
  }

  .catalog-toolbar .catalog-sort select {
    flex: 1;
  }
}

.catalog-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 16px;
}

.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 20px;
  border: 1px solid rgba(17, 18, 20, 0.14);
  border-radius: 0;
  background: rgba(255, 255, 255, 0.42);
  color: inherit;
  font: inherit;
  font-size: 15px;
  font-weight: 900;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: background 150ms ease, color 150ms ease, border-color 150ms ease;
}

.filter-chip small {
  font-size: 11px;
  font-weight: 900;
  opacity: 0.72; /* 4.5:1 contrast floor on paper background */
}

.filter-chip:hover {
  border-color: rgba(17, 18, 20, 0.6);
}

.filter-chip.active {
  background: #111214;
  border-color: #111214;
  color: #fff;
}

.filter-chip.active small {
  opacity: 0.7;
}

.catalog-search input,
.catalog-sort select {
  appearance: none;
  -webkit-appearance: none;
  padding: 14px 20px;
  border: 1px solid rgba(17, 18, 20, 0.14);
  border-radius: 0;
  background: rgba(255, 255, 255, 0.42);
  color: inherit;
  font: inherit;
  font-size: 15px;
  font-weight: 800;
}

.catalog-search input {
  width: min(340px, 100%);
}

.catalog-sort {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
  font-size: 15px;
  font-weight: 800;
}

.catalog-sort select {
  padding-right: 44px;
  background: rgba(255, 255, 255, 0.42) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23111214' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 18px center;
  cursor: pointer;
}

.catalog-search input:focus,
.catalog-sort select:focus {
  outline: 2px solid #111214;
  outline-offset: 2px;
}

.catalog-empty {
  grid-column: 1 / -1;
  padding: 48px 0;
  color: rgba(255, 255, 255, 0.7);
  font-size: 17px;
  font-weight: 800;
  text-align: center;
}

.catalog-reset {
  margin-left: 8px;
  border: none;
  border-bottom: 1px solid currentColor;
  background: none;
  color: inherit;
  font: inherit;
  font-weight: 900;
  cursor: pointer;
}

/* Compact catalog card */
.product-card.compact {
  min-height: 0;
  grid-template-rows: auto auto;
  gap: 14px;
  padding: 18px;
}

.product-card.compact img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  align-self: start;
  justify-self: center;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 12px;
  filter: none;
}

.product-card.compact .product-card-noimage {
  width: 100%;
  aspect-ratio: 1 / 1;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 12px;
}

.product-card.compact span {
  margin-bottom: 8px;
  font-size: 10px;
}

.product-card.compact strong {
  max-width: none;
  font-size: clamp(19px, 1.9vw, 24px);
  line-height: 1.02;
}

.product-card.compact p {
  margin: 8px 0 0;
  font-size: 12.5px;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.product-card.compact ul {
  margin: 10px 0 0;
  gap: 6px;
}

.product-card.compact li {
  padding: 5px 7px;
  font-size: 10px;
}

.product-card {
  position: relative;
  min-height: 560px;
  display: grid;
  grid-template-rows: auto 1fr;
  padding: 26px;
  overflow: hidden;
  background:
    radial-gradient(circle at 70% 26%, rgba(53, 216, 255, 0.15), transparent 30%),
    #151718;
  color: #fff;
}

.product-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 45%, rgba(0, 0, 0, 0.42));
  pointer-events: none;
}

.product-card-copy {
  position: relative;
  z-index: 2;
}

.product-card span {
  display: block;
  margin-bottom: 14px;
  color: rgba(255, 255, 255, 0.58);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.product-card strong {
  display: block;
  max-width: 420px;
  font-size: clamp(44px, 7vw, 94px);
  line-height: 0.82;
  font-weight: 900;
}

.product-card p {
  max-width: 420px;
  margin: 18px 0 0;
  color: rgba(255, 255, 255, 0.7);
  font-size: 15px;
  line-height: 1.35;
  font-weight: 800;
}

.product-card ul {
  display: flex;
  flex-wrap: wrap;
  align-content: start;
  gap: 8px;
  /* Kartta gosterilen ozellik sayisi urune gore degisir; yer ayrilmazsa iki
     cipli kart ile tek cipli kart farkli boyda olur. Iki satirlik cip yuksekligi. */
  min-height: 72px;
  padding: 0;
  margin: 18px 0 0;
  list-style: none;
}

/* Hicbir ozellik secilmemis urunde ayrilan yer bos bir bosluga donusurdu;
   liste bosken toplanir. Dolu kartlarda ayrilan yer durur, boylece bir
   cipli kart uc cipli komsusuyla ayni ic hizada kalir. */
.product-card ul:empty {
  min-height: 0;
  margin: 0;
}

.product-card li {
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  padding: 7px 9px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: rgba(255, 255, 255, 0.72);
  font-size: 11px;
  font-weight: 900;
}

/* Cip icindeki ad/deger. .product-card span kuralini ezer: o kural kart
   ustundeki aile etiketi icin blok ve buyuk harf, cip icinde ikisi de yanlis. */
.product-card li .spec-ad,
.product-card li .spec-deger {
  display: inline;
  margin: 0;
}

.product-card li .spec-ad {
  color: rgba(255, 255, 255, 0.45);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
}

.product-card li .spec-deger {
  color: rgba(255, 255, 255, 0.88);
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: 0;
  text-transform: none;
}

.product-card img {
  position: relative;
  z-index: 1;
  width: min(420px, 92%);
  align-self: end;
  justify-self: end;
  filter: drop-shadow(0 30px 44px rgba(0, 0, 0, 0.45));
  transition: transform 260ms ease;
}

.product-card:hover img {
  transform: translate3d(0, -8px, 0) scale(1.02);
}

.product-detail-hero {
  min-height: 88svh;
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(280px, 0.8fr);
  align-items: center;
  gap: 34px;
  padding: 112px max(22px, calc((100vw - 1380px) / 2)) 78px;
  background:
    radial-gradient(circle at 78% 25%, rgba(53, 216, 255, 0.15), transparent 28%),
    linear-gradient(180deg, #0d0f10 0%, #090a0b 100%);
  color: #fff;
  overflow: hidden;
}

.product-detail-copy .product-code {
  max-width: 680px;
  margin: 0 0 14px;
  font-size: clamp(70px, 8vw, 124px);
  line-height: 0.74;
  overflow-wrap: normal;
  font-weight: 800;
  color: #fff;
}

.product-detail-copy h1 {
  max-width: 640px;
  margin: 0 0 20px;
  font-size: clamp(20px, 2.2vw, 30px);
  line-height: 1.18;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.92);
}

.product-detail-copy p:not(.eyebrow):not(.product-code) {
  max-width: 560px;
  color: rgba(255, 255, 255, 0.7);
  font-size: clamp(18px, 2vw, 25px);
  line-height: 1.22;
  font-weight: 800;
}

.product-detail-hero img {
  width: min(540px, 100%);
  aspect-ratio: 1 / 1;
  object-fit: contain;
  justify-self: center;
  filter: drop-shadow(0 34px 58px rgba(0, 0, 0, 0.5));
}

.product-jump-nav {
  position: sticky;
  top: 84px;
  z-index: 20;
  display: flex;
  justify-content: center;
  gap: 18px;
  padding: 13px 22px;
  background: rgba(13, 15, 16, 0.88);
  backdrop-filter: blur(16px);
  color: #fff;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.product-overview {
  padding: 92px max(22px, calc((100vw - 1120px) / 2));
  background: var(--paper);
  color: var(--paper-ink);
}

/* Eyebrows on light (paper/red) detail sections — the global .eyebrow color
   is tuned for dark grounds and disappears here. */
.product-overview .eyebrow,
.product-gallery .eyebrow,
.product-support .eyebrow {
  color: rgba(17, 18, 20, 0.72);
}

/* Reserve space while products.js replaces the server-rendered hero shell,
   so the footer never jumps into view (CLS). */
article[data-product-detail] {
  min-height: 120vh;
}

.product-overview h2 {
  max-width: 940px;
  margin: 0 0 26px;
  font-size: clamp(36px, 6vw, 86px);
  line-height: 0.98;
}

.product-overview p:last-child {
  max-width: 720px;
  color: rgba(17, 18, 20, 0.66);
  font-size: 20px;
  line-height: 1.35;
  font-weight: 800;
}

.feature-highlights {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 42px;
}

.feature-highlight {
  min-height: 168px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 20px;
  border: 1px solid rgba(17, 18, 20, 0.12);
  background:
    radial-gradient(circle at 80% 18%, rgba(53, 216, 255, 0.2), transparent 32%),
    rgba(255, 255, 255, 0.52);
}

.feature-highlight span {
  color: rgba(17, 18, 20, 0.48);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.feature-highlight strong {
  max-width: 280px;
  color: var(--paper-ink);
  font-size: clamp(26px, 3.2vw, 42px);
  line-height: 0.95;
  font-weight: 900;
  overflow-wrap: anywhere;
}

.product-specs {
  background: #151718;
  color: #fff;
}

.spec-table {
  width: min(1120px, 100%);
  margin: 0 auto;
  display: grid;
  gap: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
}

.spec-list {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}

.spec-list div {
  display: grid;
  grid-template-columns: minmax(160px, 0.38fr) minmax(0, 1fr);
  gap: 22px;
  padding: 13px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.spec-list div:last-child {
  border-bottom: 0;
}

.spec-list dt {
  color: rgba(255, 255, 255, 0.58);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.spec-list dd {
  margin: 0;
  color: rgba(255, 255, 255, 0.86);
  font-size: clamp(16px, 1.8vw, 22px);
  line-height: 1.18;
  font-weight: 900;
  /* Kümelenmiş değerler satır başına bir üye taşır */
  white-space: pre-line;
}

.gallery-grid {
  width: min(1180px, 100%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 16px;
}

.gallery-grid figure {
  min-height: 360px;
  display: grid;
  place-items: center;
  margin: 0;
  overflow: hidden;
  background: #fff;
}

.gallery-grid figure:first-child {
  grid-row: span 2;
}

.gallery-grid img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.product-downloads {
  background: #0d0f10;
  color: #fff;
}

.download-group {
  width: min(1120px, 100%);
  margin: 0 auto 28px;
}

.download-group h3 {
  margin: 0 0 12px;
  color: rgba(255, 255, 255, 0.58);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.download-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.download-card {
  display: grid;
  gap: 10px;
  padding: 22px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  background: rgba(255, 255, 255, 0.05);
}

.download-card span {
  color: var(--electric);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.download-card strong {
  font-size: 23px;
  line-height: 1;
}

.download-card p {
  margin: 0;
  color: rgba(255, 255, 255, 0.62);
  font-size: 14px;
  line-height: 1.35;
  font-weight: 800;
}

.download-card small {
  color: rgba(255, 255, 255, 0.58);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.product-support {
  background: var(--red);
  color: var(--paper-ink);
}

.product-support h2 {
  max-width: 820px;
  margin: 0 0 34px;
  font-size: clamp(38px, 7vw, 92px);
  line-height: 0.94;
}

.product-support > div {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.product-missing {
  min-height: 70svh;
  display: grid;
  place-items: center;
  padding: 120px 22px;
  text-align: center;
}

.page-main {
  background: #0d0f10;
  color: #f4f7f8;
}

.page-hero {
  position: relative;
  min-height: min(76svh, 760px);
  display: grid;
  align-items: end;
  padding: clamp(86px, 12vw, 160px) max(22px, calc((100vw - 1296px) / 2)) clamp(54px, 8vw, 96px);
  overflow: hidden;
  background: #0d0f10;
}

.page-hero::before {
  content: "";
  position: absolute;
  inset: auto -12% -28% 28%;
  height: 72%;
  background: radial-gradient(circle, rgba(53, 216, 255, 0.22), transparent 58%);
  pointer-events: none;
}

.page-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.06), transparent 42%),
    linear-gradient(180deg, transparent, rgba(13, 15, 16, 0.88));
  pointer-events: none;
}

.page-hero-inner {
  position: relative;
  z-index: 1;
  display: grid;
  gap: clamp(24px, 4vw, 42px);
}

.page-hero h1 {
  max-width: 980px;
  margin: 0;
  font-size: clamp(68px, 12vw, 184px);
  line-height: 0.82;
  font-weight: 900;
  text-transform: uppercase;
  text-wrap: balance;
}

.page-hero-copy {
  max-width: 560px;
  margin: 0 0 0 auto;
  color: rgba(244, 247, 248, 0.68);
  font-size: clamp(18px, 2vw, 28px);
  line-height: 1.18;
  font-weight: 900;
}

.page-band {
  padding: clamp(72px, 10vw, 132px) max(22px, calc((100vw - 1296px) / 2));
}

.page-band.light {
  background: #eceff1;
  color: #111214;
}

.page-band.dark {
  background: #101213;
  color: #f4f7f8;
}

.page-band.ice {
  background: #e7eaec;
  color: #111214;
}

.page-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: rgba(244, 247, 248, 0.16);
  border: 1px solid rgba(244, 247, 248, 0.16);
}

.light .page-grid,
.ice .page-grid {
  background: rgba(17, 18, 20, 0.18);
  border-color: rgba(17, 18, 20, 0.18);
}

.page-tile {
  min-height: 300px;
  display: grid;
  align-content: space-between;
  gap: 36px;
  padding: clamp(24px, 4vw, 46px);
  background: #15191c;
  color: #f4f7f8;
}

.page-tile.light {
  background: #f4f7f8;
  color: #111214;
}

.page-tile.accent {
  background: linear-gradient(145deg, #0f252c, #11181c);
}

.page-tile h2,
.page-tile h3 {
  margin: 0;
  font-size: clamp(30px, 3.9vw, 58px);
  line-height: 0.94;
  font-weight: 900;
  text-wrap: balance;
  overflow-wrap: anywhere;
}

.contact-email {
  font-size: clamp(28px, 3vw, 46px);
  line-height: 1.02;
}

.page-tile p,
.page-copy p,
.page-list li {
  color: currentColor;
  opacity: 0.68;
  font-size: 15px;
  line-height: 1.55;
  font-weight: 800;
}

.page-kicker {
  margin: 0 0 22px;
  color: rgba(244, 247, 248, 0.48);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.light .page-kicker,
.ice .page-kicker {
  color: rgba(17, 18, 20, 0.48);
}

.page-copy {
  display: grid;
  gap: 22px;
  max-width: 960px;
}

.page-copy h2 {
  margin: 18px 0 0;
  font-size: clamp(34px, 5vw, 76px);
  line-height: 0.96;
  font-weight: 900;
}

.page-list {
  display: grid;
  gap: 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.page-form {
  display: grid;
  gap: 12px;
}

.form-field {
  display: grid;
  gap: 6px;
}

.page-form input,
.page-form textarea,
.page-form select {
  width: 100%;
  min-height: 54px;
  padding: 16px 18px;
  border: 1px solid rgba(17, 18, 20, 0.18);
  border-radius: 0;
  background: #fff;
  color: #111214;
  font: inherit;
  font-weight: 800;
  line-height: 1.25;
}

.page-form input:focus,
.page-form textarea:focus,
.page-form select:focus {
  outline: 2px solid rgba(17, 18, 20, 0.82);
  outline-offset: 2px;
}

.page-form input[aria-invalid="true"],
.page-form select[aria-invalid="true"] {
  border-color: #b00020;
  background: #fff8f8;
}

.page-form textarea {
  min-height: 150px;
  resize: vertical;
}

.field-error,
.form-status {
  min-height: 18px;
  margin: 0;
  color: #b00020;
  font-size: 12px;
  line-height: 1.35;
  font-weight: 900;
}

.form-status.is-success {
  color: #137333;
}

.form-check {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 10px;
  align-items: start;
  color: rgba(17, 18, 20, 0.68);
  font-size: 13px;
  line-height: 1.45;
  font-weight: 800;
}

.form-check input {
  width: 18px;
  min-height: 18px;
  margin: 2px 0 0;
  padding: 0;
  accent-color: #111214;
}

.page-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 54px;
  padding: 0 22px;
  border: 0;
  background: #111214;
  color: #fff;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.page-link-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.page-pill {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 0 14px;
  border: 1px solid rgba(244, 247, 248, 0.18);
  color: inherit;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.light .page-pill,
.ice .page-pill {
  border-color: rgba(17, 18, 20, 0.18);
}

.legal-layout {
  display: grid;
  grid-template-columns: 0.34fr 1fr;
  gap: clamp(32px, 7vw, 96px);
}

.legal-nav {
  position: sticky;
  top: 24px;
  display: grid;
  align-content: start;
  gap: 12px;
}

.legal-nav a {
  color: rgba(17, 18, 20, 0.62);
  font-size: 13px;
  font-weight: 900;
  text-transform: uppercase;
}

@media (max-width: 840px) {
  .desktop-nav {
    display: none;
  }

  .menu-toggle {
    display: block;
  }

  .site-header {
    padding: 20px 14px;
  }

  .brand img {
    width: 124px;
  }

  .menu-overlay a {
    font-size: clamp(48px, 16vw, 72px);
    overflow-wrap: anywhere;
  }

  .menu-overlay p {
    max-width: 280px;
    text-align: center;
    line-height: 1.35;
  }

  .hero {
    min-height: auto;
    /* Alt boşluk kıvılcım bandına yer açar; yoksa çizgi meta listesinin
       üstünden geçiyordu. */
    padding: 84px 14px 226px;
  }

  h1 {
    margin-bottom: 30px;
    font-size: clamp(92px, 31vw, 132px);
  }

  .hero-inner {
    margin-bottom: 32px;
  }

  .hero-media {
    min-height: 580px;
    width: 100vw;
    margin: 0 calc(50% - 50vw) -70px;
  }

  /* Force a single stacked column below the desktop side-by-side breakpoint.
     Without this, two cards (flex-basis 320px each) can still fit side by
     side down to ~665px width via natural flex-wrap, which is narrower than
     this 840px breakpoint where .media-copy/.media-plate switch to the
     near-full-bleed mobile treatment — leaving a band roughly 665-840px wide
     where two half-width cards would each try to render the mobile
     full-bleed layout in half the space, overlapping badly. Stacking here
     also restores each card to its full mobile-appropriate width instead of
     the desktop 560px cap, matching today's single-card mobile look. */
  .media-row {
    flex-direction: column;
  }

  .media-card {
    max-width: none;
    flex: none;
    width: 100%;
    /* Desktop's min-height (tuned for a 560px-capped side-by-side card) is
       far shorter than .hero-media's own mobile height, so each card was
       collapsing to that smaller box -- squeezing the near-full-bleed photo
       and the title into too little vertical space and forcing the title's
       lower half to overlap the bright photo where the white text loses all
       contrast. Match .hero-media's own mobile clamp so a card (and each
       stacked card, in the two-product case) gets the same full-band height
       the single-card design always relied on. */
    min-height: clamp(680px, 74vw, 1000px);
  }

  .media-copy {
    position: absolute;
    left: 20px;
    right: 20px;
    top: 26px;
    z-index: 3;
    max-width: calc(100% - 40px);
  }

  .media-copy strong {
    font-size: clamp(38px, 11vw, 54px);
  }

  .media-plate {
    position: absolute;
    z-index: 3;
    right: 18px;
    left: 18px;
    bottom: 34px;
    width: auto;
    padding: 16px;
  }

  /* Rozet plakanın sol ÜSTündeydi; üstteki metin bloğu uzayınca tam oraya
     taşıp rozeti kesiyordu. Alta alındı, orada çakışacak bir şey yok. */
  .media-badge {
    top: auto;
    bottom: clamp(10px, 1.4vw, 18px);
  }

  /* Below ~840px .media-copy sits at the TOP of the band while .media-plate
     becomes a near-full-bleed photo underneath it (see rules above).
     .media-specs, as the last copy child, lands directly on the product
     photo, so it needs its own local backdrop to stay readable regardless
     of what image content is behind it. Light backdrop to match the black
     spec text on the flat gray band. */
  .media-specs {
    background: rgba(184, 188, 192, 0.88);
    backdrop-filter: blur(6px);
    border-radius: 14px;
    padding: 14px 16px;
    margin-top: 4px;
  }

  .manifest {
    padding: 82px 14px 92px;
  }

  .manifest > p {
    color: #686a63;
    font-size: 22px;
    line-height: 1.18;
  }

  .metrics {
    width: 100%;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 54px;
  }

  .metric-card {
    min-height: 220px;
    padding: 20px;
    border-radius: 6px;
  }

  .metric-cyan,
  .metric-sage {
    margin-top: 20px;
  }

  .metric-card strong {
    font-size: 50px;
  }

  .metric-card i {
    margin: 20px 0 16px;
  }

  .metric-card p {
    font-size: 10px;
    line-height: 1.18;
  }

  .showcase {
    padding-top: 62px;
  }

  .showcase-head {
    width: calc(100% - 28px);
    grid-template-columns: 1fr;
    gap: 20px;
    margin-bottom: 34px;
    padding-top: 24px;
  }

  .showcase-head h2 {
    font-size: clamp(44px, 14vw, 70px);
  }

  .portfolio-stack {
    width: calc(100% - 28px);
    gap: 18px;
  }

  .portfolio-card {
    min-height: 520px;
    padding: 22px;
    border-radius: 18px;
  }

  .portfolio-card:hover,
  .portfolio-card:focus-within {
    transform: none;
    border-radius: 18px;
  }

  .portfolio-meta {
    padding-bottom: 18px;
    font-size: 12px;
  }

  .portfolio-card h3 {
    max-width: 300px;
    margin-top: 0;
    font-size: clamp(32px, 9.6vw, 44px);
    line-height: 0.94;
    overflow-wrap: anywhere;
  }

  .portfolio-card p {
    max-width: 260px;
    font-size: 15px;
  }

  .portfolio-card img {
    right: -18%;
    bottom: 18px;
    width: 104vw;
    max-height: 280px;
    opacity: 0.45;
  }

  .card-case img,
  .card-cooling img {
    right: -18%;
    bottom: -18px;
    width: 92vw;
    max-height: 300px;
    opacity: 0.52;
  }

  .split {
    grid-template-columns: 1fr;
    padding-right: 14px;
    padding-left: 14px;
  }

  .split h2 {
    font-size: clamp(50px, 15vw, 72px);
  }

  .split p:not(.eyebrow) {
    font-size: 20px;
  }

  .expertise {
    width: 100%;
    padding: 82px 14px;
  }

  .expertise-row {
    grid-template-columns: 42px 1fr;
  }

  .expertise-row p {
    grid-column: 2;
  }

  .support-head,
  .support-grid,
  .footer-hero,
  .footer-columns {
    grid-template-columns: 1fr;
  }

  .support-hub {
    padding-right: 14px;
    padding-left: 14px;
  }

  .support-head {
    gap: 24px;
    margin-bottom: 34px;
  }

  .support-head h2 {
    font-size: clamp(42px, 13vw, 62px);
  }

  .support-card {
    min-height: 260px;
  }

  .support-card.primary {
    min-height: 420px;
    grid-row: auto;
  }

  .support-card h3 {
    font-size: clamp(28px, 9vw, 42px);
  }

  .footer {
    padding-right: 14px;
    padding-left: 14px;
  }

  .footer h2 {
    font-size: clamp(46px, 14vw, 68px);
  }

  .footer div.footer-columns {
    grid-template-columns: 1fr 1fr;
    gap: 28px 18px;
  }

  .footer-hero {
    gap: 34px;
  }

  .footer-bottom {
    flex-direction: column;
  }

  .footer-columns a,
  .footer-bottom {
    line-height: 1.35;
  }

  .page-hero {
    min-height: auto;
    padding: 70px 14px 58px;
  }

  .page-hero-inner,
  .page-grid,
  .legal-layout {
    grid-template-columns: 1fr;
  }

  .page-hero h1 {
    font-size: clamp(56px, 18vw, 86px);
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  .page-hero-copy {
    margin-left: 0;
    max-width: 100%;
    font-size: 18px;
    line-height: 1.22;
  }

  .page-band {
    padding: 70px 14px;
  }

  .page-copy h2 {
    font-size: clamp(34px, 11vw, 52px);
  }

  .page-tile h2,
  .page-tile h3 {
    font-size: clamp(30px, 9vw, 42px);
  }

  .page-tile .contact-email {
    font-size: clamp(25px, 7vw, 31px);
  }

  .page-form {
    gap: 10px;
  }

  .page-button {
    width: 100%;
    min-height: 56px;
    text-align: center;
  }

  .page-tile {
    min-height: 240px;
  }

  .legal-nav {
    position: static;
    display: flex;
    flex-wrap: wrap;
    gap: 12px 18px;
  }

  .products-hero {
    min-height: auto;
    grid-template-columns: 1fr;
    gap: 34px;
    padding: 96px 18px 58px;
  }

  .products-hero-featured img {
    width: min(260px, 72%);
  }

  .products-hero-featured h2 {
    font-size: clamp(26px, 8vw, 38px);
  }

  .products-hero h1,
  .product-detail-copy .product-code {
    max-width: 100%;
    font-size: clamp(40px, 15vw, 96px);
    overflow-wrap: anywhere;
  }

  .product-detail-copy h1 {
    max-width: 100%;
    font-size: clamp(17px, 4.4vw, 24px);
    overflow-wrap: anywhere;
  }

  .products-listing,
  .product-specs,
  .product-gallery,
  .product-downloads,
  .product-support,
  .product-overview {
    padding: 64px 18px;
  }

  .product-family-rail,
  .download-list,
  .feature-highlights,
  .product-support > div {
    grid-template-columns: 1fr;
  }

  .products-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .spec-list div {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .product-detail-hero {
    min-height: auto;
    grid-template-columns: 1fr;
    padding: 82px 18px 62px;
  }

  .product-card {
    min-height: 520px;
  }

  .product-card strong {
    font-size: clamp(46px, 16vw, 76px);
  }

  .product-jump-nav {
    top: 70px;
    justify-content: start;
    overflow-x: auto;
  }

  .gallery-grid {
    grid-template-columns: 1fr;
  }

  .gallery-grid figure,
  .gallery-grid figure:first-child {
    min-height: 280px;
    grid-row: auto;
  }
}

@media (max-width: 430px) {
  .hero {
    padding-top: 64px;
  }

  h1 {
    font-size: clamp(76px, 29vw, 118px);
  }

  .eyebrow {
    font-size: 11px;
    line-height: 1.35;
  }

  .manifest > p {
    font-size: 20px;
    line-height: 1.2;
  }

  .metrics {
    grid-template-columns: 1fr;
  }

  .metric-cyan,
  .metric-sage {
    margin-top: 0;
  }

  .metric-card {
    min-height: 188px;
  }

  .metric-card p {
    max-width: 100%;
    font-size: 12px;
  }

  .portfolio-card {
    min-height: 480px;
  }

  .portfolio-meta {
    align-items: start;
    flex-direction: column;
    gap: 8px;
  }

  .footer div.footer-columns {
    grid-template-columns: 1fr;
  }

  .page-hero h1 {
    font-size: clamp(40px, 12vw, 46px);
    overflow-wrap: normal;
  }

  .page-tile {
    min-height: 220px;
  }
}

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

/* Footer language switcher */
.lang-switcher {
  display: flex;
  align-items: center;
  gap: 4px;
}

.lang-switcher a,
.lang-switcher span {
  padding: 8px 12px;
  border: 1px solid transparent;
  font-family: "DM Sans", Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.68);
  transition: color 150ms ease, border-color 150ms ease;
}

.lang-switcher a:hover,
.lang-switcher a:focus-visible {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.35);
}

.lang-switcher a::after {
  content: none; /* footer link underline animasyonu dil kutularına uygulanmaz */
}

.lang-switcher span[aria-current] {
  color: #0c0e10;
  background: #fff;
  border-color: #fff;
}


.featured-product-name {
  margin: 10px 0 0;
  max-width: 34ch;
  font-size: clamp(15px, 1.4vw, 19px);
  font-weight: 600;
  line-height: 1.25;
  opacity: 0.72;
}

/* Sıra gecikmesi CSP altında satır içi stille verilemez, kural olarak yazılır */
.media-spec-row[data-delay="0"] { transition-delay: 0ms; }
.media-spec-row[data-delay="1"] { transition-delay: 90ms; }
.media-spec-row[data-delay="2"] { transition-delay: 180ms; }
.media-spec-row[data-delay="3"] { transition-delay: 270ms; }

/* Izgara altındaki sayaç ve daha fazla düğmesi */
.catalog-more-bar {
  display: grid;
  justify-items: center;
  gap: 14px;
  width: min(1120px, 100%);
  margin: 34px auto 0;
}

.catalog-count {
  margin: 0;
  font-family: "DM Sans", Inter, system-ui, sans-serif;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.6);
}

.catalog-more {
  min-height: 46px;
  padding: 12px 30px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  background: transparent;
  color: #fff;
  font-family: "DM Sans", Inter, system-ui, sans-serif;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 200ms ease, border-color 200ms ease;
}

.catalog-more:hover,
.catalog-more:focus-visible {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.55);
}

/* ── Ürün karşılaştırma ─────────────────────────────────────────────────── */

.product-card { position: relative; }

.compare-toggle {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: 7px 12px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  background: rgba(10, 12, 13, 0.72);
  backdrop-filter: blur(8px);
  color: rgba(255, 255, 255, 0.82);
  font-family: "DM Sans", Inter, system-ui, sans-serif;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  opacity: 0;
  transition: opacity 180ms ease, background-color 180ms ease, border-color 180ms ease;
}

.product-card:hover .compare-toggle,
.product-card:focus-within .compare-toggle,
.compare-toggle.is-on,
.compare-toggle:focus-visible { opacity: 1; }

.compare-toggle.is-on {
  background: #fff;
  border-color: #fff;
  color: #0d0f10;
}

.compare-toggle[disabled] { cursor: not-allowed; opacity: 0.35; }

@media (hover: none) {
  .compare-toggle { opacity: 1; }
  .compare-toggle span { display: none; }
}

.compare-bar {
  position: fixed;
  left: 50%;
  bottom: 18px;
  z-index: 40;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  justify-content: center;
  width: min(940px, calc(100vw - 24px));
  padding: 12px 18px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 16px;
  background: rgba(13, 15, 16, 0.94);
  backdrop-filter: blur(16px);
  color: #fff;
  font-family: "DM Sans", Inter, system-ui, sans-serif;
}

.compare-bar[hidden] { display: none; }

.compare-bar-count { margin: 0; font-size: 13px; color: rgba(255, 255, 255, 0.62); }

.compare-bar-list { display: flex; gap: 8px; flex-wrap: wrap; margin: 0; padding: 0; list-style: none; }

.compare-bar-list button {
  min-height: 32px;
  padding: 6px 12px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 999px;
  background: transparent;
  color: #fff;
  font-family: inherit;
  font-size: 13px;
  cursor: pointer;
}

.compare-bar-actions { display: flex; gap: 10px; margin-left: auto; }

.compare-clear,
.compare-open {
  min-height: 40px;
  padding: 10px 20px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: transparent;
  color: #fff;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}

.compare-open { background: #fff; border-color: #fff; color: #0d0f10; }
.compare-open[disabled] { opacity: 0.4; cursor: not-allowed; }

.compare-view {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(6, 7, 8, 0.82);
  backdrop-filter: blur(6px);
}

.compare-view[hidden] { display: none; }

body.is-compare-open { overflow: hidden; }

.compare-panel {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  width: min(1100px, 100%);
  max-height: min(86vh, 900px);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 18px;
  background: #0d0f10;
  color: #fff;
  overflow: hidden;
}

.compare-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 18px 22px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.compare-diffcount { margin: 4px 0 0; font-size: 14px; color: rgba(255, 255, 255, 0.66); }

.compare-panel-actions { display: flex; align-items: center; gap: 16px; }

.compare-onlydiff {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: "DM Sans", Inter, system-ui, sans-serif;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.78);
  cursor: pointer;
}

.compare-close {
  min-width: 40px;
  min-height: 40px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 999px;
  background: transparent;
  color: #fff;
  font-size: 15px;
  cursor: pointer;
}

.compare-scroll { overflow: auto; }

.compare-table {
  width: 100%;
  border-collapse: collapse;
  font-family: "DM Sans", Inter, system-ui, sans-serif;
  font-size: 14px;
}

.compare-table th,
.compare-table td {
  padding: 12px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
  text-align: left;
  vertical-align: top;
  white-space: pre-line;
}

.compare-table thead th {
  position: sticky;
  top: 0;
  background: #141718;
  z-index: 1;
}

.compare-table tbody th {
  width: 26%;
  color: rgba(255, 255, 255, 0.6);
  font-weight: 400;
}

.compare-code { display: block; font-weight: 700; font-size: 16px; }
.compare-name { display: block; margin-top: 3px; font-size: 12px; color: rgba(255, 255, 255, 0.55); }

.compare-table tr.is-different td { color: #fff; }
.compare-table tr.is-different th { color: rgba(255, 255, 255, 0.82); }
.compare-table tr:not(.is-different) td { color: rgba(255, 255, 255, 0.45); }

.compare-loading { padding: 40px; text-align: center; color: rgba(255, 255, 255, 0.7); }

@media (max-width: 720px) {
  .compare-bar { gap: 10px; padding: 10px 12px; }
  .compare-bar-actions { margin-left: 0; width: 100%; }
  .compare-clear, .compare-open { flex: 1; }
  .compare-table tbody th { width: 34%; }
}

/* ── Kahraman: nokta alanı ──────────────────────────────────────────────────
   Söz duruyor; imleç üzerinden geçince dağılıyor, sonra tam bulunduğu yere
   dönüyor. "Keep them fazed" — cümle kendi anlamını yapıyor. Noktalar
   faze-alan.js'te ham WebGL ile çiziliyor, dış kütüphane yok.

   Her şey .hero--faze altında kapsanır: /styles.css'i g5f vitrini de yüklüyor
   ve .hero, .hero-inner, h1, .cta-button orada da kullanılıyor. */

.hero--faze {
  min-height: min(838px, 88vh);
  /* the line runs flush to the measure, so the measure needs a real inset —
     at the base .hero padding the type touched the viewport edges */
  padding: 112px clamp(22px, 6vw, 92px) 64px;
}

.hero--faze .hero-inner {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: min(1560px, 100%);
  min-height: inherit;
  margin: 0 auto;
  text-align: left;
}

.faze-alan {
  position: relative;
  width: 100%;
  flex: 1 1 auto;
  min-height: clamp(210px, 45vw, 616px);
  touch-action: none;
  cursor: crosshair;
}

.faze-alan canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* Okunabilir başlık DOM'da kalır: ekran okuyucu ve hareket azaltma için.
   Yalnız canvas'ın gerçekten çizdiği doğrulanınca saydamlaşır — WebGL yoksa
   ya da shader düşerse kahraman boş kalmaz, düz yazı görünür. */
.faze-yazi {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin: 0;
  font-size: clamp(40px, 11.5vw, 176px);
  line-height: 0.92;
  letter-spacing: -0.03em;
  font-weight: 900;
  text-transform: uppercase;
}

[data-faze-hazir] .faze-yazi {
  color: transparent;
}

.hero--faze .hero-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px 34px;
  margin-top: clamp(26px, 3.4vw, 44px);
  padding-top: clamp(22px, 3vw, 34px);
  border-top: 1px solid rgba(255, 255, 255, 0.16);
}

.hero--faze .hero-payoff {
  display: block;
  max-width: none;
  margin: 0;
  text-align: left;
  font-size: clamp(17px, 1.6vw, 24px);
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #fff;
}

@media (prefers-reduced-motion: reduce) {
  .faze-alan canvas { display: none; }
  .faze-alan { cursor: default; }
  [data-faze-hazir] .faze-yazi { color: inherit; }
}

@media (max-width: 720px) {
  .hero--faze {
    min-height: min(700px, 78vh);
    padding: 96px 20px 48px;
  }
}

/* ── Öne çıkan bant: sahne ─────────────────────────────────────────────────
   Bant verisindeki öğeler düz görsel yerine katmanlı bir çizim gösterir.
   Kaydırdıkça çizim açılıyor, bağlı açıklamalar görünür oluyor;
   kendiliğinden oynayan hiçbir şey yok. JavaScript kaydırma ilerlemesini CSS
   değişkenlerine yazar; yerleşim ve hareket burada uygulanır.

   Kapsam .has-sokulum ile sınırlı: /styles.css'i g5f vitrini de yüklüyor. */

.media-plate.has-sokulum {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
}

.media-plate.has-sokulum > img[data-featured-image] {
  display: none;
}

.sokulum {
  position: absolute;
  /* Gövde kaynak karenin ancak üçte biri; çizim plakayı doldursun diye sahne
     plakadan taşırılıyor. cqw sahneye bağlı olduğu için kaymalar da birlikte
     ölçekleniyor, etiket puntosu sabit kalıyor. */
  inset: -10%;
  --k: 1;   /* açılma mesafesi çarpanı; dar ekranda kısılır */
  /* Kaymalar sahne yüzdesi. CSS'te translate(%) elemanın KENDİ boyutuna göre
     çözülür, kabına göre değil — o yüzden sahneyi kap yapıp cqw kullanıyoruz. */
  container-type: size;
}

.sokulum-parca {
  position: absolute;
  left: var(--sol);
  top: var(--ust);
  width: var(--gen);
  z-index: var(--z, 0);
  margin: 0;
  /* başlangıç: render'ın kendi düzeni. Kaydırma parçaları dışarı açıyor. */
  transform: translate(0, 0);
}

.sokulum-parca img {
  display: block;
  width: 100%;
  height: auto;
}

.sokulum-parca figcaption {
  position: absolute;
  left: 50%;
  top: 100%;
  transform: translate(-50%, 6px);
  white-space: nowrap;
  padding-top: 6px;
  border-top: 1px solid rgba(17, 18, 20, 0.4);
  color: rgba(17, 18, 20, 0.78);
  font-family: "Space Grotesk", Inter, system-ui, sans-serif;
  font-size: 10px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0;
}

/* Hareketi JavaScript sürüyor, CSS scroll-driven animation değil.
   Sebep ölçüldü: WebKit `CSS.supports('animation-timeline: view()')` için true
   döndürüyor ama animasyonu çalıştırmıyor — Safari'de çizim hiç kıpırdamıyordu.
   Tarayıcıya göre değişen bir davranış yerine tek yol: patlatilmis.js kaydırma
   ilerlemesini hesaplayıp --p yazıyor, aşağısı onu okuyor. */

.sokulum-parca {
  transform: translate(calc(var(--dx) * var(--k) * var(--p, 0) * 1cqw),
                       calc(var(--dy) * var(--k) * var(--p, 0) * 1cqw));
}

.sokulum-yazi {
  width: max-content;
  max-width: 40%;
  color: rgba(17, 18, 20, 0.78);
  font-family: "Space Grotesk", Inter, system-ui, sans-serif;
  font-size: var(--yazi-boyut);
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-align: left;
  white-space: nowrap;
  opacity: var(--yp, 1);
  pointer-events: none;
}

.sokulum-yazi[data-hiza="center"] { translate: -50% 0; text-align: center; }
.sokulum-yazi[data-hiza="right"] { translate: -100% 0; text-align: right; }

.sokulum-cizgi {
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  opacity: var(--yp, 1);
  pointer-events: none;
}

.sokulum-cizgi line {
  stroke: rgba(17, 18, 20, 0.4);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.sokulum-parca figcaption {
  opacity: var(--yp, 0);
  transform: translate(-50%, calc(12px - 6px * var(--yp, 0)));
}

/* Yukarı açılan parçada (üst panel) alttaki ad gövdenin üstüne oturuyordu (BL #74);
   kayıtta etiket: "ust" olan parçanın adı üstte durur. */
.sokulum-parca[data-etiket="ust"] figcaption {
  top: auto;
  bottom: 100%;
  padding-top: 0;
  padding-bottom: 6px;
  border-top: none;
  border-bottom: 1px solid rgba(17, 18, 20, 0.4);
  transform: translate(-50%, calc(-12px + 6px * var(--yp, 0)));
}

/* Dar ekranda parçalar aynı mesafede açılınca bandın dışına taşıyor ve etiketler
   kesiliyor; mesafe ekranla birlikte kısılır. */
@media (max-width: 900px) {
  .sokulum { inset: -2%; --k: 0.42; }
  .sokulum-parca figcaption { font-size: 9px; letter-spacing: 0.1em; }
  .sokulum-yazi { font-size: calc(var(--yazi-boyut) * 0.9); letter-spacing: 0.1em; }
}

/* Hareket kapalıysa ya da tarayıcı desteklemiyorsa: çizim render'ın kendi
   düzeninde durur ve adlar okunur kalır — geçerli bir durgun kare. */
@media (prefers-reduced-motion: reduce) {
  .sokulum-parca figcaption { opacity: 1; }
}