/* Kendi sunucumuzda barindirilan yazi tipleri (Google Fonts yerine).
   Alt kumeler: latin + Latin Extended-A (Turkce dahil tum Avrupa dilleri). */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("./assets/fonts/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("./assets/fonts/inter-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-017F;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("./assets/fonts/inter-lira.woff2") format("woff2");
  unicode-range: U+20BA;
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("./assets/fonts/ibm-plex-mono-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("./assets/fonts/ibm-plex-mono-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-017F;
}

/* <picture> sarmalayicisi duzen kutusu olusturmasin; img dogrudan ebeveynin cocugu gibi yerlesir. */
picture {
  display: contents;
}

:root {
  color-scheme: light;
  --bg: #f5f2ec;
  --surface: #e2e8e9;
  --surface-strong: #6b6e70;
  --ink: #0b1113;
  --muted: #6b6e70;
  --line: rgb(107 110 112 / 35%);
  --accent: #f04d21;
  --secondary: #6d6e71;
  --secondary-tint: rgb(109 110 113 / 7%);
  --hover-tint: rgb(109 110 113 / 4%);
  --hover-tint-faint: rgb(109 110 113 / 1%);
  --secondary-line: rgb(109 110 113 / 28%);
  --accent-hover: #0b1113;
  --accent-ink: #0b1113;
  --dark: #0b1113;
  --dark-ink: #e2e8e9;
  --max: 1240px;
  --gutter: clamp(1rem, 4vw, 3rem);
  --section: clamp(5rem, 9vw, 9rem);

  /* Tipografi olcegi - DESIGN.md 3. bolum */
  --text-display: clamp(2.35rem, 3.6vw, 3.25rem);
  --text-h2: clamp(1.75rem, 2.6vw, 2.5rem);
  --text-h3: clamp(1.25rem, 1.6vw, 1.5rem);
  --text-lead: clamp(1.0625rem, 1.2vw, 1.25rem);
  --text-body: 1rem;
  --text-sm: 0.875rem;
  --text-label: 0.75rem;
  --text-numeral: clamp(2.25rem, 3.2vw, 3.75rem);

  --lh-display: 1;
  --lh-h2: 1.05;
  --lh-h3: 1.2;
  --lh-lead: 1.45;
  --lh-body: 1.55;
  --lh-label: 1.3;
  --lh-numeral: 0.85;

  --tracking-display: -0.035em;
  --tracking-h2: -0.025em;
  --tracking-h3: -0.015em;
  --tracking-lead: -0.01em;
  --tracking-label: 0.06em;
  --tracking-numeral: -0.05em;

  --weight-body: 400;
  --weight-label: 500;
  --weight-strong: 600;
  --weight-heading: 700;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

::selection {
  background: var(--accent);
  color: var(--accent-ink);
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: var(--text-body);
  font-weight: var(--weight-body);
  line-height: var(--lh-body);
  font-optical-sizing: auto;
}

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

a {
  color: inherit;
}

.shell {
  width: min(var(--max), calc(100% - (var(--gutter) * 2)));
  margin-inline: auto;
}

.site-header {
  position: sticky;
  top: -42px;
  z-index: 20;
  background: var(--bg);
}

.announcement {
  min-height: 42px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  padding: 0.65rem var(--gutter);
  background: linear-gradient(90deg, var(--bg), var(--accent));
  color: var(--accent-ink);
  font-size: var(--text-sm);
  font-weight: var(--weight-strong);
  text-align: center;
  text-decoration: none;
}

.announcement-copy {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  transform: translateY(2px);
}

.announcement:hover .announcement-arrow {
  transform: translateX(3px);
}

.announcement-arrow {
  display: inline-block;
  transition: transform 120ms ease;
}

.nav-icon,
.nav-chevron {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  overflow: visible;
}

.nav-chevron {
  width: 14px;
  height: 14px;
  transition: transform 180ms ease;
}

.nav-shell {
  width: min(1360px, calc(100% - (var(--gutter) * 2)));
  margin-inline: auto;
}

.nav {
  position: relative;
  display: flex;
  flex-direction: column;
  margin-block: 0.65rem;
  border: 1px solid var(--line);
  background: var(--bg);
}

.nav-main {
  min-height: 48px;
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr) auto;
  align-items: center;
}

.brand {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  padding-inline: 1.25rem;
  border-right: 1px solid var(--line);
}

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

.nav-links {
  align-self: stretch;
  display: flex;
  align-items: stretch;
  gap: clamp(1.25rem, 2.5vw, 2.25rem);
  margin: 0;
  padding: 0 2rem;
  list-style: none;
}

.nav-links > li,
.nav-links details,
.nav-link,
.nav-links summary {
  height: 100%;
}

.nav-links summary,
.nav-link {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding-inline: 1.1rem;
  margin-inline: -1.1rem;
  color: var(--ink);
  cursor: pointer;
  font-size: var(--text-sm);
  font-weight: var(--weight-label);
  list-style: none;
  text-decoration: none;
  transition: color 160ms ease, background 160ms ease;
}

.nav-links summary::-webkit-details-marker {
  display: none;
}

.nav-links details[open] .nav-chevron {
  transform: rotate(180deg);
}

.nav-links summary:hover,
.nav-link:hover {
  background: var(--hover-tint);
  color: var(--accent);
}

.nav-links > li:first-child summary {
  padding-inline-start: 2rem;
  margin-inline-start: -2rem;
}

.mega-menu {
  position: absolute;
  top: 100%;
  left: 189px;
  z-index: 30;
  display: grid;
  grid-template-columns: repeat(2, 260px);
  border: 1px solid var(--line);
  background: var(--bg);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-4px) scale(0.97);
  transform-origin: top left;
  transition:
    transform 250ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 250ms cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0s linear 250ms;
}

.nav-links details[open] > .mega-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0) scale(1);
  transition-delay: 0s;
}

.nav-links details:hover > .mega-menu,
.nav-links details:focus-within > .mega-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0) scale(1);
  transition-delay: 0s;
}

.nav-links details:hover .nav-chevron,
.nav-links details:focus-within .nav-chevron {
  transform: translateY(1px) rotate(180deg);
}

.mega-menu-wide {
  grid-template-columns: repeat(3, 260px);
}

.mega-menu-services {
  grid-template-rows: auto auto;
}

.mega-menu-services .mega-column:first-child {
  grid-row: 1 / span 2;
}

.mega-column {
  min-height: 290px;
  display: flex;
  flex-direction: column;
  padding: 1.5rem;
}

.mega-column + .mega-column {
  border-left: 1px solid var(--line);
}

.mega-promo {
  grid-column: 2 / span 2;
  grid-row: 2;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.1rem 1.5rem;
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
  background: color-mix(in srgb, var(--accent) 10%, var(--bg));
  color: inherit;
  text-decoration: none;
  transition: background 120ms ease;
}

.mega-promo:hover {
  background: color-mix(in srgb, var(--accent) 18%, var(--bg));
}

.mega-promo-icon {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  color: var(--accent);
}

.mega-promo-copy {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  flex: 1;
}

.mega-promo-copy strong {
  font-size: var(--text-sm);
  font-weight: var(--weight-heading);
}

.mega-promo-copy span {
  color: var(--muted);
  font-size: var(--text-sm);
}

.mega-promo-arrow {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 120ms ease;
}

.mega-promo:hover .mega-promo-arrow {
  transform: translateX(3px);
}

.mega-column-feature {
  justify-content: center;
  gap: 0.65rem;
  background: color-mix(in srgb, var(--accent) 10%, var(--bg));
  color: inherit;
  text-decoration: none;
  transition: background 120ms ease;
}

.mega-column-feature:hover {
  background: color-mix(in srgb, var(--accent) 18%, var(--bg));
}

.mega-column-feature .mega-feature-icon {
  width: 26px;
  height: 26px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  color: var(--accent);
}

.mega-column-feature strong {
  font-size: var(--text-body);
  font-weight: var(--weight-heading);
}

.mega-column-feature > span:not(.mega-feature-cta) {
  color: var(--muted);
  font-size: var(--text-sm);
}

.mega-feature-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.5rem;
  color: var(--accent);
  font-size: var(--text-sm);
  font-weight: var(--weight-heading);
}

.mega-column-feature:hover .mega-feature-cta .mega-promo-arrow {
  transform: translateX(3px);
}

.mega-column p {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.75rem;
  color: var(--muted);
  font-size: var(--text-label);
  font-weight: var(--weight-label);
  line-height: var(--lh-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

.mega-column a {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding-block: 0.72rem;
  padding-inline: 0.5rem;
  margin-inline: -0.5rem;
  border-top: 1px solid var(--line);
  color: inherit;
  font-size: var(--text-sm);
  font-weight: var(--weight-body);
  text-decoration: none;
  transition: color 120ms ease, padding-left 180ms ease, background 160ms ease;
}

.mega-option-icon {
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  color: var(--accent);
  transform-origin: center;
}

.mega-option-icon > * {
  transform-box: view-box;
  transform-origin: center;
}

@keyframes bank-cog-turn {
  to { transform: rotate(180deg); }
}

@keyframes bank-line-draw {
  from { stroke-dashoffset: 120; opacity: 0.35; }
  to { stroke-dashoffset: 0; opacity: 1; }
}

@keyframes bank-arrow-forward {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(4px); }
}

@keyframes bank-phone-ring {
  0%, 100% { transform: rotate(0) scale(1); }
  20% { transform: rotate(10deg) scale(1.05); }
  40% { transform: rotate(-9deg) scale(1.1); }
  65% { transform: rotate(7deg) scale(1.05); }
}

@keyframes bank-audio-line {
  0%, 100% { transform: scaleY(1); }
  50% { transform: scaleY(0.3); }
}

@keyframes bank-device-buzz {
  0%, 100% { transform: translateX(0) rotate(0); }
  20%, 60% { transform: translateX(-1px) rotate(-3deg); }
  40%, 80% { transform: translateX(1px) rotate(3deg); }
}

@keyframes bank-paper-feed {
  0% { transform: scaleY(0.15); }
  72% { transform: scaleY(1.06); }
  100% { transform: scaleY(1); }
}

@keyframes bank-route-draw {
  from { stroke-dashoffset: 32; opacity: 0; }
  to { stroke-dashoffset: 0; opacity: 1; }
}

@keyframes bank-pin-hop {
  0% { transform: translateY(0); }
  60% { transform: translateY(-5px); }
  100% { transform: translateY(-3px); }
}

@keyframes bank-message-pop {
  0%, 100% { transform: rotate(0) scale(1); }
  35% { transform: rotate(-7deg) scale(1.05); }
  70% { transform: rotate(7deg) scale(1.05); }
}

@keyframes bank-key-sway {
  0%, 100% { transform: rotate(0) scale(1); }
  35% { transform: rotate(-2deg) scale(1.02); }
  70% { transform: rotate(2deg) scale(1.02); }
}

@keyframes bank-dot-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.8); }
}

@keyframes bank-slash-blink {
  0%, 100% { opacity: 1; stroke-dashoffset: 0; }
  50% { opacity: 0.4; stroke-dashoffset: 24; }
}

@keyframes bank-signal-in {
  from { opacity: 0; transform: scale(0.72); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes bank-server-top {
  0%, 100% { transform: translateY(0); }
  45%, 55% { transform: translateY(12px); }
}

@keyframes bank-server-bottom {
  0%, 100% { transform: translateY(0); }
  45%, 55% { transform: translateY(-12px); }
}

@keyframes bank-bot-blink {
  0%, 35%, 100% { transform: scaleY(1); }
  50% { transform: scaleY(0.08); }
}

@keyframes bank-check-draw {
  from { stroke-dashoffset: 18; opacity: 0; }
  to { stroke-dashoffset: 0; opacity: 1; }
}

@keyframes bank-search-scan {
  0%, 100% { transform: translate(0, 0); }
  35% { transform: translate(0, -4px); }
  70% { transform: translate(-3px, 0); }
}

:is(.mega-option-icon, .service-icon)[data-icon="cloud-cog"] > :is(path:nth-child(2), circle) {
  transform-origin: 12px 17px;
}

:is(.mega-column a, .service-card a, .service-tab):is(:hover, :focus-visible)
  :is(.mega-option-icon, .service-icon)[data-icon="cloud-cog"] > :is(path:nth-child(2), circle) {
  animation: bank-cog-turn 700ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

:is(.mega-column a, .service-card a, .service-tab):is(:hover, :focus-visible)
  :is(.mega-option-icon, .service-icon)[data-icon="headset"] path:first-child {
  stroke-dasharray: 240;
  animation: bank-line-draw 750ms ease-out;
}

:is(.mega-column a, .service-card a, .service-tab):is(:hover, :focus-visible)
  :is(.mega-option-icon, .service-icon)[data-icon="headset"] path:last-child {
  stroke-dasharray: 100;
  animation: bank-line-draw 600ms 100ms ease-out both;
}

:is(.mega-column a, .service-card a, .service-tab):is(:hover, :focus-visible)
  :is(.mega-option-icon, .service-icon)[data-icon="phone-forwarded"] > :is(path:nth-child(1), path:nth-child(2)) {
  animation: bank-arrow-forward 600ms ease-in-out;
}

:is(.mega-column a, .service-card a, .service-tab):is(:hover, :focus-visible)
  :is(.mega-option-icon, .service-icon)[data-icon="phone-forwarded"] > path:nth-child(3),
:is(.mega-column a, .service-card a, .service-tab):is(:hover, :focus-visible)
  :is(.mega-option-icon, .service-icon)[data-icon="phone-call"] {
  animation: bank-phone-ring 800ms ease-in-out;
}

:is(.mega-option-icon, .service-icon)[data-icon="audio-lines"] > path {
  transform-origin: center;
}

:is(.mega-column a, .service-card a, .service-tab):is(:hover, :focus-visible)
  :is(.mega-option-icon, .service-icon)[data-icon="audio-lines"] > path:nth-child(2) {
  animation: bank-audio-line 1.5s ease-in-out infinite;
}

:is(.mega-column a, .service-card a, .service-tab):is(:hover, :focus-visible)
  :is(.mega-option-icon, .service-icon)[data-icon="audio-lines"] > path:nth-child(3) {
  animation: bank-audio-line 1s ease-in-out infinite;
}

:is(.mega-column a, .service-card a, .service-tab):is(:hover, :focus-visible)
  :is(.mega-option-icon, .service-icon)[data-icon="audio-lines"] > path:nth-child(4) {
  animation: bank-audio-line 800ms ease-in-out infinite reverse;
}

:is(.mega-column a, .service-card a, .service-tab):is(:hover, :focus-visible)
  :is(.mega-option-icon, .service-icon)[data-icon="audio-lines"] > path:nth-child(5) {
  animation: bank-audio-line 1.3s ease-in-out infinite;
}

:is(.mega-column a, .service-card a, .service-tab):is(:hover, :focus-visible)
  :is(.mega-option-icon, .service-icon)[data-icon="smartphone"] {
  animation: bank-device-buzz 500ms ease-in-out;
}

:is(.mega-option-icon, .service-icon)[data-icon="printer"] > rect {
  transform-origin: center top;
}

:is(.mega-column a, .service-card a, .service-tab):is(:hover, :focus-visible)
  :is(.mega-option-icon, .service-icon)[data-icon="printer"] > rect {
  animation: bank-paper-feed 800ms cubic-bezier(0.16, 1, 0.3, 1);
}

:is(.mega-column a, .service-card a, .service-tab):is(:hover, :focus-visible)
  :is(.mega-option-icon, .service-icon)[data-icon="waypoints"] > * {
  stroke-dasharray: 32;
  animation: bank-route-draw 430ms ease-out both;
}

:is(.mega-column a, .service-card a, .service-tab):is(:hover, :focus-visible)
  :is(.mega-option-icon, .service-icon)[data-icon="waypoints"] > :nth-child(2) { animation-delay: 60ms; }
:is(.mega-column a, .service-card a, .service-tab):is(:hover, :focus-visible)
  :is(.mega-option-icon, .service-icon)[data-icon="waypoints"] > :nth-child(3) { animation-delay: 120ms; }
:is(.mega-column a, .service-card a, .service-tab):is(:hover, :focus-visible)
  :is(.mega-option-icon, .service-icon)[data-icon="waypoints"] > :nth-child(4) { animation-delay: 180ms; }
:is(.mega-column a, .service-card a, .service-tab):is(:hover, :focus-visible)
  :is(.mega-option-icon, .service-icon)[data-icon="waypoints"] > :nth-child(5) { animation-delay: 240ms; }
:is(.mega-column a, .service-card a, .service-tab):is(:hover, :focus-visible)
  :is(.mega-option-icon, .service-icon)[data-icon="waypoints"] > :nth-child(6) { animation-delay: 300ms; }
:is(.mega-column a, .service-card a, .service-tab):is(:hover, :focus-visible)
  :is(.mega-option-icon, .service-icon)[data-icon="waypoints"] > :nth-child(7) { animation-delay: 360ms; }

:is(.mega-column a, .service-card a, .service-tab):is(:hover, :focus-visible)
  :is(.mega-option-icon, .service-icon)[data-icon="map-pin"] {
  animation: bank-pin-hop 500ms ease-out both;
}

:is(.mega-column a, .service-card a, .service-tab):is(:hover, :focus-visible)
  :is(.mega-option-icon, .service-icon)[data-icon="map-pin"] > circle {
  stroke-dasharray: 20;
  animation: bank-route-draw 420ms 180ms ease-out both;
}

:is(.mega-column a, .service-card a, .service-tab):is(:hover, :focus-visible)
  :is(.mega-option-icon, .service-icon)[data-icon="message-square"] {
  animation: bank-message-pop 500ms ease-in-out;
}

:is(.mega-column a, .service-card a, .service-tab):is(:hover, :focus-visible)
  :is(.mega-option-icon, .service-icon)[data-icon="key-round"] {
  animation: bank-key-sway 700ms ease-in-out;
}

:is(.mega-column a, .service-card a, .service-tab):is(:hover, :focus-visible)
  :is(.mega-option-icon, .service-icon)[data-icon="key-round"] > path {
  stroke-dasharray: 140;
  animation: bank-line-draw 750ms ease-in-out;
}

:is(.mega-column a, .service-card a, .service-tab):is(:hover, :focus-visible)
  :is(.mega-option-icon, .service-icon)[data-icon="key-round"] > circle {
  animation: bank-dot-pulse 550ms 300ms ease-in-out;
}

:is(.mega-column a, .service-card a, .service-tab):is(:hover, :focus-visible)
  :is(.mega-option-icon, .service-icon)[data-icon="code-xml"] > path {
  stroke-dasharray: 30;
  animation: bank-route-draw 650ms ease-in-out;
}

:is(.mega-column a, .service-card a, .service-tab):is(:hover, :focus-visible)
  :is(.mega-option-icon, .service-icon)[data-icon="code-xml"] > path:nth-child(2) {
  animation-delay: 90ms;
}

:is(.mega-column a, .service-card a, .service-tab):is(:hover, :focus-visible)
  :is(.mega-option-icon, .service-icon)[data-icon="code-xml"] > path:nth-child(3) {
  animation: bank-slash-blink 850ms ease-in-out;
}

:is(.mega-column a, .service-card a, .service-tab):is(:hover, :focus-visible)
  :is(.mega-option-icon, .service-icon)[data-icon="router"] > :is(path:nth-child(5), path:nth-child(6)),
:is(.mega-column a, .service-card a, .service-tab):is(:hover, :focus-visible)
  :is(.mega-option-icon, .service-icon)[data-icon="radio-tower"] > :is(path:nth-child(1), path:nth-child(2), path:nth-child(4), path:nth-child(5)) {
  animation: bank-signal-in 420ms ease-out both;
}

:is(.mega-column a, .service-card a, .service-tab):is(:hover, :focus-visible)
  :is(.mega-option-icon, .service-icon)[data-icon="router"] > path:nth-child(6),
:is(.mega-column a, .service-card a, .service-tab):is(:hover, :focus-visible)
  :is(.mega-option-icon, .service-icon)[data-icon="radio-tower"] > :is(path:nth-child(1), path:nth-child(5)) {
  animation-delay: 140ms;
}

:is(.mega-column a, .service-card a, .service-tab):is(:hover, :focus-visible)
  :is(.mega-option-icon, .service-icon)[data-icon="server"] > :is(rect:nth-child(1), path:nth-child(3)) {
  animation: bank-server-top 900ms ease-in-out;
}

:is(.mega-column a, .service-card a, .service-tab):is(:hover, :focus-visible)
  :is(.mega-option-icon, .service-icon)[data-icon="server"] > :is(rect:nth-child(2), path:nth-child(4)) {
  animation: bank-server-bottom 900ms ease-in-out;
}

:is(.mega-column a, .service-card a, .service-tab):is(:hover, :focus-visible)
  :is(.mega-option-icon, .service-icon)[data-icon="bot"] > :is(path:nth-child(5), path:nth-child(6)) {
  animation: bank-bot-blink 500ms ease-in-out;
}

:is(.mega-column a, .service-card a, .service-tab):is(:hover, :focus-visible)
  :is(.mega-option-icon, .service-icon)[data-icon="calendar-check"] > path:last-child,
:is(.mega-column a, .service-card a, .service-tab):is(:hover, :focus-visible)
  :is(.mega-option-icon, .service-icon)[data-icon="shield-check"] > path:last-child {
  stroke-dasharray: 18;
  animation: bank-check-draw 430ms ease-out;
}

:is(.mega-column a, .service-card a, .service-tab):is(:hover, :focus-visible)
  :is(.mega-option-icon, .service-icon)[data-icon="search"] {
  animation: bank-search-scan 620ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.mega-column a:hover {
  padding-left: 0.9rem;
  background: var(--hover-tint);
  color: var(--accent);
}

.nav-actions {
  align-self: stretch;
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.3rem;
  border-left: 1px solid var(--line);
}

.nav-primary,
.nav-secondary {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.45rem 0.9rem;
  font-size: var(--text-label);
  font-weight: var(--weight-label);
  letter-spacing: var(--tracking-label);
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
}

.nav-primary {
  gap: 0.7rem;
}

.nav-secondary {
  gap: 0.6rem;
  border: 1px solid var(--line);
}

.nav-primary {
  border: 1px solid var(--dark);
  background: var(--dark);
  color: var(--dark-ink);
}

.mobile-nav {
  display: none;
}

@keyframes nav-dock {
  from {
    width: min(1360px, calc(100% - (var(--gutter) * 2)));
    margin-block: 0.65rem;
    border-inline-width: 0.5px;
  }

  to {
    width: 100%;
    margin-block: 0;
    border-inline-width: 0;
  }
}

@supports (animation-timeline: scroll()) {
  .nav {
    animation: nav-dock linear both;
    animation-timeline: scroll(root block);
    animation-range: 0 42px;
  }
}

@keyframes icon-ring {
  0%, 100% { transform: rotate(0) scale(1); }
  25% { transform: rotate(12deg) scale(1.08); }
  55% { transform: rotate(-9deg) scale(1.08); }
}

@keyframes icon-wobble {
  0%, 100% { transform: rotate(0) scale(1); }
  35% { transform: rotate(-7deg) scale(1.06); }
  70% { transform: rotate(7deg) scale(1.06); }
}

@keyframes icon-bounce {
  0%, 100% { transform: translateY(0); }
  45% { transform: translateY(-3px); }
}

@keyframes icon-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.12); opacity: 0.65; }
}

@keyframes icon-arrow {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(3px); }
}

@keyframes menu-enter {
  from { opacity: 0; transform: translateY(-4px) scale(0.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

:is(summary, .nav-link, .mega-column, .mobile-menu a):hover .icon-phone {
  animation: icon-ring 650ms ease-in-out;
}

:is(summary, .mega-column, .mobile-menu a):hover .icon-message {
  animation: icon-wobble 500ms ease-in-out;
}

:is(summary, .mega-column, .mobile-menu a):hover .icon-bot,
:is(.nav-link, .mega-column, .mobile-menu a):hover .icon-server {
  animation: icon-bounce 480ms ease-in-out;
}

:is(summary, .mega-column, .mobile-menu a):hover .icon-shield,
:is(.mega-column, .mobile-menu a):hover .icon-radio {
  animation: icon-pulse 520ms ease-in-out;
}

:is(.announcement, .nav-primary, .mobile-menu a):hover .icon-arrow {
  animation: icon-arrow 420ms ease-in-out;
}

.button {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 1.2rem;
  border: 1px solid var(--accent);
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: var(--weight-heading);
  text-decoration: none;
  white-space: nowrap;
  transition: background 160ms ease, border-color 160ms ease,
    transform 160ms ease;
}

.button:hover {
  border-color: var(--accent-hover);
  background: var(--accent-hover);
  color: var(--dark-ink);
}

.button:active {
  transform: translateY(1px);
}

.button:focus-visible,
a:focus-visible,
summary:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}

.button-small {
  min-height: 40px;
  padding: 0.55rem 0.9rem;
  font-size: 0.9rem;
}

.hero {
  height: clamp(400px, calc(100svh - 300px), 500px);
  display: grid;
  grid-template-columns: minmax(0, 2.05fr) minmax(300px, 0.95fr);
  gap: 2px;
  padding-block: 0;
  border: 1px solid var(--line);
}

.hero-primary,
.hero-panel {
  position: relative;
  overflow: hidden;
}

.hero-primary {
  min-width: 0;
  background: var(--bg);
  border-right: 1px solid var(--line);
}

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

.hero-side {
  display: grid;
  grid-template-rows: 3fr 2fr;
  gap: 2px;
  min-width: 0;
}

.hero-panel {
  color: var(--accent-ink);
}

.hero-agent-panel {
  background: var(--accent);
  border-bottom: 1px solid var(--line);
}

.hero-infra-panel {
  background: var(--dark);
  color: var(--dark-ink);
}


.proof {
  border-block: 1px solid var(--line);
}

.proof-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.proof-grid > div {
  min-height: 132px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 1.5rem clamp(1rem, 2.5vw, 2rem);
  border-left: 1px solid var(--line);
}

.proof-grid > div:last-child {
  border-right: 1px solid var(--line);
}

.proof strong {
  margin-bottom: 0.35rem;
  font-size: clamp(1.35rem, 2.3vw, 2rem);
  letter-spacing: -0.04em;
}

.proof span {
  color: var(--muted);
  font-size: 0.9rem;
}

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

.section-heading {
  max-width: 760px;
  margin-bottom: clamp(2.5rem, 5vw, 5rem);
}

.section-heading h2,
.infrastructure h2,
.governance h2,
.sectors h2,
.cta h2 {
  margin-bottom: 1.25rem;
  font-size: var(--text-h2);
  font-weight: var(--weight-heading);
  letter-spacing: var(--tracking-h2);
  line-height: var(--lh-h2);
  text-wrap: balance;
}

.section-heading p,
.infrastructure p,
.governance p,
.sectors p,
.cta p {
  max-width: 62ch;
  margin-bottom: 0;
  color: var(--muted);
  font-size: var(--text-lead);
  line-height: var(--lh-lead);
  letter-spacing: var(--tracking-lead);
  text-wrap: pretty;
}

.flow-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(320px, 0.92fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}

.flow {
  display: grid;
  gap: 0;
  border-top: 3px solid var(--line);
}

.flow-step,
.flow-result {
  position: relative;
  display: grid;
  grid-template-columns: 0.75fr 1.25fr;
  gap: 1rem;
  padding: 1.4rem 0;
  border-bottom: 1px solid var(--line);
}

.flow-step span,
.flow-result span,
.flow-branch span {
  color: var(--accent);
  font-family: Inter, sans-serif;
  font-size: 0.76rem;
  font-weight: var(--weight-heading);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.flow-step strong,
.flow-result strong,
.flow-branch strong {
  font-size: 1.05rem;
}

.flow-decision {
  padding: 1.5rem;
  background: var(--ink);
  color: var(--bg);
  font-size: clamp(1.1rem, 1.7vw, 1.35rem);
  font-weight: var(--weight-heading);
  text-align: center;
}

.flow-branches {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.flow-branch {
  min-height: 190px;
  padding: 1.5rem;
  border-bottom: 1px solid var(--line);
}

.flow-branch + .flow-branch {
  border-left: 1px solid var(--line);
}

.flow-branch strong {
  display: block;
  margin: 0.8rem 0 0.5rem;
}

.flow-branch p {
  margin-bottom: 0;
  color: var(--muted);
  font-size: 0.9rem;
}

.handoff-media {
  position: sticky;
  top: 104px;
  margin: 0;
}

.handoff-media img {
  aspect-ratio: 4 / 5;
  width: 100%;
  object-fit: cover;
}

.handoff-media figcaption {
  padding-top: 1rem;
  color: var(--muted);
  font-size: 0.85rem;
}

.services {
  --section: clamp(3rem, 5vw, 5rem);
  border-block: 1px solid var(--line);
  background: var(--bg);
}

.services .section-head-row {
  padding-top: 0;
  margin-bottom: clamp(1.5rem, 2.6vw, 2.25rem);
  border-top: 0;
}

/* §4.4 section header pattern: auto 1fr over a 1px top rule */
.section-head-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: end;
  gap: clamp(1.5rem, 4vw, 3rem);
  padding-top: 1.1rem;
  margin-bottom: clamp(2.5rem, 5vw, 5rem);
  border-top: 1px solid var(--ink);
}

.services .section-heading {
  margin-bottom: 0;
}

/* Kategori seçici: üç düğüm üstte, altındaki kart ızgarasını süzer.
   Seçim göstergesi tek parçadır ve seçilen düğüme kayar (data/filter-grid). */
.service-switch {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-bottom: -1px;
  border: 1px solid var(--line);
  background: rgb(109 110 113 / 8%);
}

.service-tab {
  display: flex;
  align-items: center;
  gap: clamp(0.75rem, 1.4vw, 1.1rem);
  min-height: 78px;
  padding: clamp(0.85rem, 1.5vw, 1.15rem) clamp(1rem, 2vw, 1.6rem);
  border: 0;
  border-inline-start: 1px solid var(--line);
  background: transparent;
  color: var(--secondary);
  font: inherit;
  text-align: start;
  cursor: pointer;
  position: relative;
  transition: background 160ms ease, color 160ms ease;
}

.service-tab:first-child {
  border-inline-start: 0;
}

.service-switch-thumb {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  z-index: 0;
  block-size: var(--thumb-height, 100%);
  inline-size: var(--thumb-width, 33.33%);
  background: var(--bg);
  border-block-start: 2px solid var(--accent);
  transform: translate(var(--thumb-x, 0px), var(--thumb-y, 0px));
  transition: transform 420ms cubic-bezier(0.23, 1, 0.32, 1),
    inline-size 420ms cubic-bezier(0.23, 1, 0.32, 1),
    block-size 420ms cubic-bezier(0.23, 1, 0.32, 1);
  pointer-events: none;
}

.service-switch-thumb[data-ready="false"] {
  transition: none;
}

.service-tab::after {
  content: "";
  position: absolute;
  inset-block-start: -1px;
  inset-inline: -1px;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 160ms ease;
}

.service-tab {
  z-index: 1;
}

.service-tab:hover {
  background: rgb(109 110 113 / 6%);
  color: var(--ink);
}

.service-tab:hover::after,
.service-tab:focus-visible::after {
  transform: scaleX(1);
}

.service-tab:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -3px;
}

.service-tab[aria-checked="true"] {
  background: transparent;
  color: var(--ink);
}

.service-tab-node {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  inline-size: 42px;
  block-size: 42px;
  border: 1.5px solid var(--secondary-line);
  border-radius: 50%;
  color: currentColor;
  transition: border-color 160ms ease, color 160ms ease;
}

.service-tab-node .service-icon {
  inline-size: 22px;
  block-size: 22px;
  stroke-width: 1.8;
}

.service-tab[aria-checked="true"] .service-tab-node {
  border-color: var(--accent);
  color: var(--accent);
}

.service-tab-text {
  display: grid;
  gap: 0.2rem;
  min-width: 0;
}

.service-tab-title {
  font-size: var(--text-body);
  font-weight: var(--weight-strong);
  letter-spacing: var(--tracking-lead);
  color: inherit;
}

/* Kart ızgarası: süzme sırasında kartlar sıçramaz, yerlerine taşınır. */
.service-cards-wrap {
  overflow: hidden;
}

.service-status {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.service-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1px;
  margin: 0;
  padding: 0;
  list-style: none;
  background: var(--line);
  border: 1px solid var(--line);
}

.service-card {
  display: block;
  min-height: 100%;
  will-change: transform;
}

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

.service-card a {
  display: grid;
  align-content: start;
  gap: 0.55rem;
  height: 100%;
  min-height: 190px;
  padding: clamp(1.4rem, 2.2vw, 1.8rem);
  background: var(--bg);
  color: inherit;
  text-decoration: none;
  position: relative;
  transition: background 160ms ease, transform 160ms ease;
}

.service-card a::after {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 160ms ease;
}

.service-card a:hover,
.service-card a:focus-visible {
  background: var(--surface, #fffdf8);
}

.service-card a:hover::after,
.service-card a:focus-visible::after {
  transform: scaleX(1);
}

.service-card a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -3px;
}

.services .service-icon {
  overflow: visible;
  transform-origin: center;
}

.services .service-icon > * {
  transform-origin: center;
}

.service-card .service-icon {
  inline-size: 34px;
  block-size: 34px;
  margin-bottom: 0.35rem;
  color: var(--secondary);
  stroke-width: 1.7;
  transition: color 160ms ease;
}

.service-card a:hover .service-icon,
.service-card a:focus-visible .service-icon {
  color: var(--accent);
}

.service-card .row-label {
  font-size: var(--text-body);
  font-weight: var(--weight-heading);
  letter-spacing: var(--tracking-lead);
  line-height: var(--lh-h3);
  text-wrap: balance;
}

.service-card p {
  margin: 0;
  max-width: 48ch;
  color: var(--muted);
  font-size: var(--text-sm);
  line-height: var(--lh-body);
  text-wrap: pretty;
}


.scenario-list {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 0 5vw;
  border-top: 3px solid var(--line);
}

.scenario-list article {
  min-height: 150px;
  padding: 1.5rem 0;
  border-bottom: 1px solid var(--line);
}

.scenario-list h3 {
  margin-bottom: 0.65rem;
  font-size: 1.25rem;
}

.scenario-list p {
  max-width: 46ch;
  margin-bottom: 0;
  color: var(--muted);
}

.infrastructure {
  padding-block: clamp(3rem, 5vw, 5rem) clamp(2rem, 3vw, 3rem);
  background: var(--bg);
}

.infrastructure-grid {
  display: grid;
  grid-template-areas: "copy map";
  grid-template-columns: minmax(260px, 0.65fr) minmax(0, 1.35fr);
  gap: 2rem clamp(3rem, 6vw, 6rem);
  align-items: start;
}

.infrastructure-grid > div {
  grid-area: copy;
}

.infrastructure h2 {
  max-width: 18ch;
}

.infrastructure p {
  margin-inline-start: clamp(0.5rem, 1.5vw, 1.25rem);
  color: var(--muted);
}

.infrastructure-link {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  margin-top: 1.5rem;
  margin-inline-start: clamp(0.5rem, 1.5vw, 1.25rem);
  padding-bottom: 0.35rem;
  border-bottom: 1px solid var(--accent);
  font-size: var(--text-sm);
  font-weight: var(--weight-heading);
  text-decoration: none;
}

.infrastructure-link:hover {
  color: var(--accent);
}

.infrastructure-link:hover svg {
  transform: translateX(3px);
}

.datacenter-map {
  grid-area: map;
  margin: 0;
  border: 1px solid var(--line);
  background: var(--bg);
}

.datacenter-map img {
  width: 100%;
  height: auto;
}

.datacenter-poster {
  display: grid;
  place-items: center;
  background: var(--accent);
}

.datacenter-poster img {
  width: auto;
  max-width: 100%;
  max-height: 720px;
}

.datacenter-map figcaption {
  padding: 0.75rem 1rem;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: var(--text-label);
  line-height: var(--lh-label);
}

.location-list {
  grid-area: list;
  margin: 0;
  border-top: 1px solid var(--line);
}

.location-list div {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1rem;
  padding: 1.25rem 0;
  border-bottom: 1px solid var(--line);
}

.location-list dt {
  font-size: 1.2rem;
  font-weight: var(--weight-heading);
}

.location-list dd {
  margin: 0;
  color: var(--muted);
  font-size: 0.9rem;
}

/* tarife CTA — ses / internet / mesaj gruplarina yonlendiren kart bandi.
   Karti dolduran sey paket sayisi (dev rakam) ve kartin dibinde akan paket
   adi seridi; fiyat ve kosul detayi tarife sayfasinda kalir. */

.tariff-cta {
  padding-block: clamp(3rem, 5vw, 5rem);
  background: var(--bg);
}

.tariff-cta-inner {
  display: grid;
  gap: clamp(2rem, 4vw, 3.5rem);
}

.tariff-cta-head {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
  grid-template-areas:
    "title lead"
    "title action";
  align-content: start;
  gap: clamp(0.75rem, 1.5vw, 1.25rem) clamp(2rem, 5vw, 4.5rem);
  padding-top: 1.1rem;
  border-top: 1px solid var(--ink);
}

.tariff-cta-head h2 {
  grid-area: title;
  margin: 0;
  max-width: 16ch;
  font-size: var(--text-h2);
  font-weight: var(--weight-heading);
  letter-spacing: var(--tracking-h2);
  line-height: var(--lh-h2);
  text-wrap: balance;
}

.tariff-cta-head h2 em {
  color: var(--accent);
  font-style: normal;
}

.tariff-cta-lead {
  grid-area: lead;
  margin: 0;
  max-width: 44ch;
  align-self: start;
  color: var(--muted);
  font-size: var(--text-sm);
  line-height: var(--lh-body);
  text-wrap: pretty;
}

.tariff-cta-button {
  grid-area: action;
  justify-self: start;
  align-self: start;
  margin-top: 0.5rem;
}

.tariff-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
  list-style: none;
}

.tariff-card {
  min-width: 0;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.tariff-card-link {
  container-type: inline-size;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: clamp(1.5rem, 2.6vw, 2.25rem) clamp(1.25rem, 2.4vw, 2rem) 0;
  color: inherit;
  text-decoration: none;
  transition:
    background 160ms cubic-bezier(0.2, 0, 0, 1),
    transform 160ms cubic-bezier(0.2, 0, 0, 1);
}

.tariff-card-link:hover,
.tariff-card-link:focus-visible {
  background: var(--hover-tint);
  outline: none;
  transform: translateY(-3px);
}

.tariff-card-link:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: -2px;
}

/* servis plakalari — world-landing index.html'deki service plate cizimlerinden
   tasindi. Her plaka o servisin uzerinde calistigi tek objeyi cizer; turuncu
   yalnizca trafigin gectigi hatti isaretler. Karti hover'da o an olur:
   ahize kalkar, kod duser, modem lambalari yanar. */

.tariff-plate {
  --plate-surface: var(--bg);
  --plate-ink: var(--ink);
  --plate-hair: rgb(11 17 19 / 44%);
  --plate-grid: rgb(11 17 19 / 10%);
  --plate-live: var(--accent);
  width: calc(100% + 2 * clamp(1.25rem, 2.4vw, 2rem));
  margin-inline: clamp(-2rem, -2.4vw, -1.25rem);
  margin-top: calc(-1 * clamp(1.5rem, 2.6vw, 2.25rem));
  margin-bottom: clamp(1.25rem, 2.2vw, 1.75rem);
  aspect-ratio: 400 / 250;
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}

.tariff-plate svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* Dolgu + saç teli kenar: ust uste binen parcalar birbirini kapatir, cizim
   iki ayri kontur degil montaj gibi okunur. */
.tariff-plate-body {
  fill: var(--plate-surface);
  stroke: var(--plate-ink);
  stroke-width: 1.6;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.tariff-plate-seam {
  fill: none;
  stroke: var(--plate-hair);
  stroke-width: 1;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}

.tariff-plate-live {
  fill: none;
  stroke: var(--plate-live);
  stroke-width: 2;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}

.tariff-plate-socket {
  fill: var(--plate-surface);
  stroke: var(--plate-hair);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.tariff-plate-lamp {
  fill: var(--plate-live);
  opacity: 0.22;
  transition: opacity 200ms cubic-bezier(0.2, 0, 0, 1);
}

/* Mesaj plakasi: telefon govdesi + tek kullanimlik kod alani. Kutular
   input-otp (rodz.dev) keycap varyantindaki gibi ayri hucreler; imlec ve aktif
   hucre cercevesi turuncu, rakamlar mürekkep. Rakamlari otp-plate.mjs doldurur. */

.tariff-plate-screen {
  fill: var(--surface);
  stroke: var(--plate-hair);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.tariff-plate-island {
  fill: var(--plate-ink);
}

.tariff-plate-indicator {
  fill: none;
  stroke: var(--plate-ink);
  stroke-width: 3.5;
  stroke-linecap: round;
  opacity: 0.35;
  vector-effect: non-scaling-stroke;
}

.tariff-plate-well {
  fill: var(--plate-surface);
  stroke: var(--plate-hair);
  stroke-width: 1.2;
  vector-effect: non-scaling-stroke;
  transition:
    stroke 160ms cubic-bezier(0.2, 0, 0, 1),
    fill 160ms cubic-bezier(0.2, 0, 0, 1);
}

.tariff-plate-slot[data-otp-active] .tariff-plate-well {
  stroke: var(--plate-live);
  stroke-width: 2;
}

.tariff-plate-slot[data-otp-filled] .tariff-plate-well {
  stroke: var(--plate-ink);
}

.tariff-plate-caret {
  fill: var(--plate-live);
  opacity: 0;
}

.tariff-plate-slot[data-otp-active] .tariff-plate-caret {
  animation: tariff-caret 1s steps(1, end) infinite;
}

@keyframes tariff-caret {
  0%,
  50% {
    opacity: 1;
  }
  50.01%,
  100% {
    opacity: 0;
  }
}

.tariff-plate-key {
  fill: var(--plate-surface);
  stroke: var(--plate-ink);
  stroke-width: 1.4;
  vector-effect: non-scaling-stroke;
  transition: fill 220ms cubic-bezier(0.2, 0, 0, 1);
}

.tariff-plate-otp[data-otp-complete] .tariff-plate-key {
  fill: var(--plate-live);
  stroke: var(--plate-live);
}

.tariff-plate-keylabel {
  fill: var(--plate-ink);
  font-size: 11px;
  font-weight: var(--weight-strong);
  letter-spacing: 0.02em;
  text-anchor: middle;
  transition: fill 220ms cubic-bezier(0.2, 0, 0, 1);
}

.tariff-plate-otp[data-otp-complete] .tariff-plate-keylabel {
  fill: var(--plate-surface);
}

.tariff-plate-code {
  fill: var(--plate-ink);
  font-size: 17px;
  font-weight: var(--weight-strong);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
  text-anchor: middle;
}

.tariff-plate-sender,
.tariff-plate-status,
.tariff-plate-msisdn,
.tariff-plate-hint {
  fill: var(--plate-ink);
}

.tariff-plate-sender {
  font-size: 12px;
  font-weight: var(--weight-strong);
  letter-spacing: 0.1em;
}

.tariff-plate-status {
  font-size: 8px;
  font-weight: var(--weight-strong);
  letter-spacing: 0.02em;
}

.tariff-plate-msisdn {
  font-size: 10px;
  font-weight: var(--weight-label);
  letter-spacing: 0.06em;
  text-anchor: middle;
  opacity: 0.7;
}

.tariff-plate-hint {
  font-size: 8.5px;
  font-weight: var(--weight-label);
  letter-spacing: 0.04em;
  text-anchor: middle;
  opacity: 0.55;
}

.tariff-plate-lift,
.tariff-plate-drop {
  transition: transform 220ms cubic-bezier(0.2, 0, 0, 1);
}

.tariff-plate-otp {
  transform: translateY(4px);
  opacity: 0.72;
  transition:
    transform 260ms cubic-bezier(0.2, 0, 0, 1),
    opacity 260ms cubic-bezier(0.2, 0, 0, 1);
}

.tariff-card-link:hover .tariff-plate-otp,
.tariff-card-link:focus-visible .tariff-plate-otp {
  transform: translateY(0);
  opacity: 1;
}

/* Dokunmatikte hover yok; alan bekleme durumunda kalmasin. */
@media (hover: none) {
  .tariff-plate-otp {
    transform: none;
    opacity: 1;
  }
}

.tariff-plate-drop {
  transform: translateY(-8px);
  opacity: 0.55;
  transition:
    transform 220ms cubic-bezier(0.2, 0, 0, 1),
    opacity 220ms cubic-bezier(0.2, 0, 0, 1);
}

.tariff-card-link:hover .tariff-plate-lift,
.tariff-card-link:focus-visible .tariff-plate-lift {
  transform: translate(-6px, -14px) rotate(-4deg);
}

.tariff-card-link:hover .tariff-plate-drop,
.tariff-card-link:focus-visible .tariff-plate-drop {
  transform: translateY(0);
  opacity: 1;
}

.tariff-card-link:hover .tariff-plate-lamp,
.tariff-card-link:focus-visible .tariff-plate-lamp {
  opacity: 1;
}

.tariff-plate-lamp ~ .tariff-plate-lamp {
  transition-delay: 90ms;
}

.tariff-plate-lamp ~ .tariff-plate-lamp ~ .tariff-plate-lamp {
  transition-delay: 180ms;
}

.tariff-card h3 {
  margin: 0;
  font-size: var(--text-h3);
  font-weight: var(--weight-strong);
  letter-spacing: var(--tracking-h3);
  line-height: var(--lh-h3);
}

/* kartin ana gorsel olayi giris ucreti — rakam turuncu ve baslıktan buyuk */
.tariff-card-price {
  margin: 0.65rem 0 0.9rem;
  color: var(--muted);
  font-size: var(--text-label);
  font-weight: var(--weight-strong);
  letter-spacing: 0.04em;
  line-height: 1;
  text-transform: uppercase;
}

.tariff-card-num {
  margin-inline-end: 0.08em;
  color: var(--accent);
  font-size: var(--text-numeral);
  font-weight: var(--weight-heading);
  letter-spacing: -0.05em;
  line-height: var(--lh-numeral);
  vertical-align: -0.06em;
}

/* not satiri tek satirda kalsin; dar kartta yazi kart genisligine gore kuculur */
.tariff-card-note {
  margin: 0;
  color: var(--muted);
  font-size: min(var(--text-sm), 4.2cqi);
  line-height: var(--lh-body);
  white-space: nowrap;
}

@media (max-width: 1023px) {
  .tariff-cta-head {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "title"
      "lead"
      "action";
  }

  .tariff-cta-head h2 {
    max-width: 24ch;
  }

  .tariff-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 639px) {
  .tariff-cards {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  .tariff-card-link {
    transition: none;
  }

  .tariff-plate-lift,
  .tariff-plate-drop,
  .tariff-plate-otp,
  .tariff-plate-caret,
  .tariff-plate-well,
  .tariff-plate-key,
  .tariff-plate-keylabel,
  .tariff-plate-lamp {
    transition: none;
  }

    .tariff-card-link:hover,
  .tariff-card-link:focus-visible {
    transform: none;
  }
}

.governance {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(3rem, 8vw, 8rem);
}

.standards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-content: start;
  border-top: 3px solid var(--line);
}

.standards div {
  min-height: 140px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 1.25rem;
  border-bottom: 1px solid var(--line);
}

.standards div:nth-child(odd) {
  border-right: 1px solid var(--line);
}

.standards strong {
  font-size: clamp(1.4rem, 2.2vw, 2rem);
  letter-spacing: -0.04em;
}

.standards span {
  color: var(--muted);
  font-size: 0.85rem;
}

.sectors {
  border-block: 1px solid var(--line);
  background: var(--bg);
}

.sectors-grid {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 5vw;
  align-items: start;
}

.sectors h2 {
  font-size: clamp(2rem, 3.5vw, 3.5rem);
}

.sectors p {
  color: var(--ink);
  font-size: clamp(1.15rem, 2vw, 1.6rem);
  line-height: 1.55;
}

.cta {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 3rem;
  align-items: end;
  padding-block: var(--section);
}

.cta h2 {
  max-width: 16ch;
}

.footer {
  padding-block: 2rem;
  border-top: 1px solid var(--line);
}


@media (max-width: 920px) {
  .nav-links,
  .nav-actions {
    display: none;
  }

  .mobile-nav {
    align-self: stretch;
    display: block;
  }

  .mobile-nav > summary {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding-inline: 1.25rem;
    cursor: pointer;
    font-size: var(--text-sm);
    font-weight: var(--weight-strong);
    letter-spacing: var(--tracking-label);
    list-style: none;
    text-transform: uppercase;
  }

  .mobile-nav > summary::-webkit-details-marker {
    display: none;
  }

  .mobile-menu {
    position: absolute;
    top: 100%;
    right: -1px;
    z-index: 30;
    width: min(340px, calc(100vw - 2rem));
    display: flex;
    flex-direction: column;
    border: 1px solid var(--line);
    background: var(--bg);
    transform-origin: top right;
    animation: menu-enter 250ms cubic-bezier(0.22, 1, 0.36, 1);
  }

  .mobile-menu a {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--line);
    font-weight: var(--weight-heading);
    text-decoration: none;
  }

  .mobile-menu a:last-child {
    justify-content: space-between;
    border-bottom: 0;
    background: var(--dark);
    color: var(--dark-ink);
  }

  .mobile-menu-icons {
    position: relative;
    width: 20px;
    height: 20px;
  }

  .mobile-menu-icons .nav-icon {
    position: absolute;
    inset: 1px;
    transition: opacity 180ms ease, transform 220ms ease;
  }

  .mobile-menu-close-icon {
    opacity: 0;
    transform: rotate(-45deg) scale(0.7);
  }

  .mobile-nav[open] .mobile-menu-open-icon {
    opacity: 0;
    transform: rotate(45deg) scale(0.7);
  }

  .mobile-nav[open] .mobile-menu-close-icon {
    opacity: 1;
    transform: rotate(0) scale(1);
  }

  .hero {
    height: auto;
    min-height: auto;
    grid-template-columns: 1fr;
  }

  .hero-primary {
    min-height: 680px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .hero-side {
    min-height: 520px;
    grid-template-columns: 3fr 2fr;
    grid-template-rows: 1fr;
  }

  .hero-agent-panel {
    border-bottom: 0;
    border-right: 1px solid var(--line);
  }

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

  .proof-grid > div:nth-child(2) {
    border-right: 1px solid var(--line);
  }

  .proof-grid > div:nth-child(-n + 2) {
    border-bottom: 1px solid var(--line);
  }

  .flow-layout,
  .infrastructure-grid,
  .governance {
    grid-template-columns: 1fr;
  }

  .handoff-media {
    position: static;
  }

  .handoff-media img {
    aspect-ratio: 16 / 9;
  }

  .infrastructure-grid {
    grid-template-areas: "copy" "map";
  }

}

@media (max-width: 680px) {
  .nav {
    grid-template-columns: 1fr auto;
    gap: 0;
  }

  .brand {
    max-width: 190px;
  }

  .hero {
    min-height: auto;
  }

  .hero-primary {
    min-height: 650px;
  }

  .hero-side {
    min-height: 720px;
    grid-template-columns: 1fr;
    grid-template-rows: 3fr 2fr;
  }

  .hero-agent-panel {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .proof-grid,
  .flow-branches,
  .scenario-list,
  .standards,
  .sectors-grid,
  .cta {
    grid-template-columns: 1fr;
  }

  .proof-grid > div {
    min-height: 104px;
    border-right: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
  }

  .flow-step,
  .flow-result {
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }

  .flow-branch + .flow-branch,
  .standards div:nth-child(odd) {
    border-left: 0;
    border-right: 0;
  }

  .location-list div {
    grid-template-columns: 1fr;
    gap: 0.25rem;
  }

  .cta {
    align-items: start;
  }

  .cta .button {
    justify-self: start;
  }

}

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

  .nav {
    animation: none;
  }

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

.nav,
.brand,
.mega-menu,
.mega-column + .mega-column,
.mega-column a,
.nav-actions,
.nav-secondary,
.mobile-menu,
.mobile-menu a,
.hero,
.hero-primary,
.hero-agent-panel {
  border-width: 0.5px;
}

/* Hero workflow */
.hero {
  height: auto;
  min-height: clamp(680px, calc(100svh - 118px), 780px);
  grid-template-columns: minmax(0, 1fr) minmax(300px, 0.35fr);
  gap: 0;
}

.hero-primary {
  display: grid;
  grid-template-rows: auto auto;
  align-content: space-between;
  padding: clamp(2rem, 3vw, 3rem) clamp(2rem, 3.2vw, 3.5rem) 1.5rem;
  background-color: var(--bg);
  background-image:
    linear-gradient(rgb(245 242 236 / 72%), rgb(245 242 236 / 82%)),
    url("./assets/hero-signal-texture.webp");
  /* AVIF destekleyen tarayicilar ayni dokuyu yarisi kadar bayt ile alir;
     desteklemeyenler yukaridaki webp bildirimini kullanmayi surdurur. */
  background-image:
    linear-gradient(rgb(245 242 236 / 72%), rgb(245 242 236 / 82%)),
    image-set(
      url("./assets/hero-signal-texture.avif") type("image/avif"),
      url("./assets/hero-signal-texture.webp") type("image/webp")
    );
  background-position: center;
  background-size: cover;
}

.hero-copy {
  position: relative;
  z-index: 1;
  min-width: 0;
  max-width: 720px;
}

.hero-copy h1 {
  max-width: none;
  margin: 0 0 1rem;
  font-size: var(--text-display);
  font-weight: var(--weight-heading);
  letter-spacing: var(--tracking-display);
  line-height: var(--lh-display);
  text-wrap: balance;
}

.hero-copy > p {
  max-width: 59ch;
  margin-bottom: 1.35rem;
  color: var(--muted);
  font-size: var(--text-lead);
  line-height: var(--lh-lead);
  letter-spacing: var(--tracking-lead);
  text-wrap: pretty;
}

.hero-actions,
.hero-link {
  display: flex;
  align-items: center;
}

.hero-actions {
  gap: 1.4rem;
}

.hero-link {
  gap: 0.65rem;
  font-size: var(--text-sm);
  font-weight: var(--weight-heading);
  text-decoration: none;
}

.hero-link:hover {
  color: var(--accent);
}

.hero-link:hover svg {
  transform: translateX(3px);
}

.flow-showcase {
  min-width: 0;
  min-height: 0;
  align-self: end;
  margin-top: 0.9rem;
  border-top: 1px solid var(--line);
}

.flow-tabs {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  border-bottom: 1px solid var(--line);
}

.flow-tabs button {
  min-width: 0;
  min-height: 50px;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.65rem 0.45rem;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font: inherit;
  font-size: clamp(0.64rem, 0.78vw, 0.76rem);
  text-align: left;
  transition: color 160ms ease, border-color 160ms ease;
}

.flow-tabs button + button {
  border-left: 1px solid rgb(107 110 112 / 18%);
}

.flow-tabs button svg {
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
}

.flow-tabs button:is(:hover, [aria-selected="true"]) {
  border-bottom-color: var(--accent);
  color: var(--ink);
}

.flow-tabs button[aria-selected="true"] svg {
  color: var(--accent);
}

.flow-tabs button:focus-visible {
  position: relative;
  z-index: 2;
  outline: 3px solid var(--accent);
  outline-offset: -3px;
}

.flow-intro {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(240px, 0.9fr);
  gap: 2rem;
  align-items: end;
  padding: 0.85rem 0 0.35rem;
}

.flow-intro div {
  min-width: 0;
}

.flow-intro strong {
  display: block;
  overflow: hidden;
  font-size: clamp(0.95rem, 1.2vw, 1.15rem);
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.flow-intro p {
  margin: 0;
  color: var(--muted);
  font-size: 0.72rem;
  line-height: 1.4;
}

.flow-stage {
  position: relative;
  height: clamp(220px, 18vw, 250px);
  min-height: 0;
  overflow: hidden;
}

.flow-connectors,
.flow-nodes {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.flow-connectors {
  overflow: visible;
}

.flow-connectors > g > path {
  fill: none;
  stroke: var(--muted);
  stroke-width: 0.38;
  marker-end: url(#flow-arrow);
  vector-effect: non-scaling-stroke;
}

.flow-connectors marker path {
  fill: var(--muted);
}

.flow-nodes {
  margin: 0;
  padding: 0;
  list-style: none;
}

.flow-node {
  position: absolute;
  top: calc(var(--flow-y) * 1%);
  left: calc(var(--flow-x) * 1%);
  width: clamp(7rem, 10vw, 8.6rem);
  min-height: 78px;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.55rem;
  align-items: start;
  padding: 0.72rem;
  border: 1px solid var(--line);
  background: rgb(245 242 236 / 94%);
  box-shadow: 0 8px 24px rgb(11 17 19 / 5%);
  transform: translate(-50%, -50%);
}

.flow-node-decision {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--dark-ink);
}

.flow-node-result {
  border-color: rgb(240 77 33 / 65%);
}

.flow-node-icon {
  width: 22px;
  height: 22px;
  margin-top: 0.1rem;
  color: var(--accent);
}

.flow-node-copy,
.flow-node-copy strong,
.flow-node-copy span {
  display: block;
}

.flow-node-copy {
  min-width: 0;
}

.flow-node-copy strong {
  padding-right: 0.3rem;
  font-size: 0.69rem;
  line-height: 1.18;
}

.flow-node-copy span {
  margin-top: 0.24rem;
  color: var(--muted);
  font-size: 0.56rem;
  line-height: 1.25;
}

.flow-node-decision .flow-node-copy span {
  color: rgb(226 232 233 / 68%);
}

.hero-side {
  grid-template-rows: 1.05fr 0.95fr;
  gap: 0;
}

.hero-blank-panel {
  border-bottom: 1px solid var(--line);
  background: var(--bg);
}

/* Tek yüzeyli ana sayfa hero'su */
.hero.hero-unified {
  position: relative;
  display: flex;
  min-height: calc(clamp(440px, calc(100svh - 280px), 520px) + 71px);
  align-items: center;
  overflow: hidden;
  margin-top: -71px;
  padding: calc(clamp(2rem, 3vw, 3rem) + 71px) clamp(2rem, 3.2vw, 3.5rem) clamp(2rem, 3vw, 3rem);
  border: 1px solid var(--line);
  border-top: 0;
  background: radial-gradient(ellipse 55% 105% at 62% 48%, rgb(240 77 33 / 22%), transparent 68%), var(--bg);
}

.home .site-header {
  background: transparent;
}

.home .nav {
  background: rgb(245 242 236 / 86%);
  backdrop-filter: blur(12px);
}

.hero-unified-noise {
  position: absolute;
  inset: 0;
  background: url("./assets/textures/paper-grain-muted.webp") center / cover;
  mix-blend-mode: multiply;
  opacity: 0.12;
  pointer-events: none;
}

.hero.hero-unified .hero-copy {
  width: min(62%, 720px);
}

.hero.hero-unified .hero-visual {
  inset: 61px 0 0 auto;
  width: 43%;
  height: calc(100% - 61px);
  object-fit: contain;
  object-position: right center;
}

@media (max-width: 920px) {
  .hero.hero-unified {
    display: block;
    min-height: 0;
    padding: calc(2.2rem + 71px) 1.15rem 1.15rem;
    background: radial-gradient(ellipse 105% 68% at 50% 76%, rgb(240 77 33 / 22%), transparent 72%), var(--bg);
  }

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

  .hero.hero-unified > picture {
    display: block;
    width: min(100%, 420px);
    margin: 1.75rem auto 0;
  }

  .hero.hero-unified .hero-visual {
    position: static;
    inset: auto;
    width: 100%;
    height: auto;
    object-fit: contain;
  }
}

/* Hero gorseli — image-gen ile uretilmis gecici placeholder.
   Gercek urun kesiti hazir oldugunda §5 uyarinca inline SVG ile degistirilir. */
.hero-visual {
  position: absolute;
  inset: 0;
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  object-position: center;
  user-select: none;
  pointer-events: none;
}

.hero-proof-panel {
  display: grid;
  grid-template-rows: repeat(3, 1fr);
  padding: 0 clamp(1.25rem, 2.5vw, 2.25rem);
  background: var(--dark);
  color: var(--dark-ink);
}

.hero-proof-item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.15rem;
  align-items: center;
}

.hero-proof-item + .hero-proof-item {
  border-top: 1px solid rgb(226 232 233 / 22%);
}

.hero-proof-item > svg {
  width: 34px;
  height: 34px;
  color: var(--accent);
}

.hero-proof-item strong,
.hero-proof-item span {
  display: block;
}

.hero-proof-item strong {
  font-size: clamp(1.35rem, 2.2vw, 2.3rem);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.05em;
  line-height: 1;
}

.hero-proof-item span {
  margin-top: 0.35rem;
  color: rgb(226 232 233 / 72%);
  font-size: 0.75rem;
}

@media (max-width: 1100px) {
  .hero {
    grid-template-columns: minmax(0, 1.75fr) minmax(280px, 0.75fr);
  }

  .hero-primary {
    padding: 2rem;
  }

  .flow-tabs button {
    justify-content: center;
  }

  .flow-tabs button span {
    display: none;
  }

  .flow-tabs button svg {
    width: 20px;
    height: 20px;
  }
}

@media (max-width: 920px) {
  .hero {
    height: auto;
    min-height: 0;
    grid-template-columns: 1fr;
  }

  .hero-primary {
    min-height: 760px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .hero-side {
    min-height: auto;
    grid-template-columns: 1fr;
    grid-template-rows: 220px auto;
  }

  .hero-blank-panel {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .hero-proof-panel {
    min-height: 360px;
  }

  .flow-tabs button span {
    display: block;
  }
}

@media (max-width: 680px) {
  .hero-primary {
    min-height: 0;
    padding: 1.5rem 1.15rem 2rem;
  }

  .hero-copy h1 {
    font-size: var(--text-display);
  }

  .hero-copy h1 br {
    display: none;
  }

  .hero-actions {
    align-items: flex-start;
    flex-direction: column;
    gap: 1rem;
  }

  .flow-showcase {
    margin-top: 2.5rem;
  }

  .flow-tabs {
    display: flex;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: thin;
  }

  .flow-tabs button {
    min-width: max-content;
    justify-content: flex-start;
    padding-inline: 0.85rem;
  }

  .flow-intro {
    grid-template-columns: 1fr;
    gap: 0.55rem;
    padding-block: 1rem;
  }

  .flow-intro strong {
    overflow: visible;
    white-space: normal;
  }

  .flow-stage {
    height: auto;
    overflow: visible;
  }

  .flow-connectors {
    display: none;
  }

  .flow-nodes {
    position: static;
    display: grid;
    gap: 0;
  }

  .flow-node {
    position: relative;
    top: auto;
    left: auto;
    width: 100%;
    min-height: 82px;
    grid-template-columns: 26px minmax(0, 1fr);
    padding: 0.9rem 2.4rem 0.9rem 0.9rem;
    box-shadow: none;
    transform: none;
  }

  .flow-node + .flow-node {
    border-top: 0;
  }

  .flow-node-copy strong {
    font-size: 0.82rem;
  }

  .flow-node-copy span {
    font-size: 0.68rem;
  }

  .hero-side {
    grid-template-rows: 180px auto;
  }

  .hero-proof-panel {
    min-height: 330px;
  }
}

/* Semantic workflow modules */
.hero {
  min-height: clamp(780px, calc(100svh - 108px), 850px);
}

.hero-primary {
  grid-template-rows: auto minmax(0, 1fr);
  align-content: stretch;
  padding-bottom: 1.35rem;
}

.flow-showcase {
  align-self: end;
  margin-top: 1.5rem;
}

.flow-tabs button {
  min-height: 54px;
  justify-content: center;
  padding-inline: 0.65rem;
  border-bottom-width: 3px;
  font-size: clamp(0.65rem, 0.78vw, 0.77rem);
  font-weight: var(--weight-heading);
}

.flow-tabs button[aria-selected="true"] {
  background: var(--accent);
  color: var(--ink);
}

.flow-tabs button[aria-selected="true"] svg {
  color: var(--ink);
}

.flow-tabs button svg {
  width: 19px;
  height: 19px;
  overflow: visible;
}

.flow-intro {
  min-height: 58px;
  padding-block: 0.7rem 0.2rem;
}

.flow-intro strong {
  font-size: clamp(0.88rem, 1.05vw, 1.06rem);
}

.flow-intro p {
  max-width: 56ch;
  justify-self: end;
}

.flow-stage {
  height: 340px;
  overflow: hidden;
}

.flow-connectors,
.flow-modules {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.flow-connectors > g > path {
  stroke: rgb(107 110 112 / 72%);
  stroke-width: 1.15;
  marker-end: url(#flow-arrow);
}

.flow-connectors marker path {
  fill: var(--accent);
}

.flow-modules {
  margin: 0;
  padding: 0;
  list-style: none;
}

.flow-module {
  position: absolute;
  top: calc(var(--flow-y) * 0.294117647%);
  left: calc(var(--flow-x) * 0.1%);
  width: calc(var(--flow-w) * 0.1%);
  height: calc(var(--flow-h) * 0.294117647%);
  color: var(--ink);
  font-style: normal;
}

.flow-module svg {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  overflow: visible;
  color: var(--accent);
}

.module-heading,
.agent-heading,
.module-phone-head {
  display: flex;
  align-items: center;
}

.module-heading {
  gap: 0.45rem;
}

.module-heading strong {
  min-width: 0;
  font-size: clamp(0.58rem, 0.78vw, 0.73rem);
  line-height: 1.15;
}

.flow-wave {
  height: 34px;
  display: flex;
  align-items: center;
  gap: 2px;
  color: var(--accent);
}

.flow-wave i {
  width: 2px;
  height: var(--wave);
  display: block;
  border-radius: 2px;
  background: currentcolor;
  transform: scaleY(0.72);
  transform-origin: center;
  animation: flow-signal 1.8s ease-in-out infinite alternate;
}

.flow-wave i:nth-child(2n) {
  animation-delay: -0.65s;
}

.flow-wave i:nth-child(3n) {
  animation-delay: -1.1s;
}

.flow-module-phone,
.flow-module-phone-out {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(0.55rem, 0.9vw, 0.85rem);
  border: 1px solid var(--line);
  background: rgb(250 248 243 / 88%);
  box-shadow: 0 10px 28px rgb(11 17 19 / 5%);
}

.module-phone-head {
  justify-content: space-between;
  gap: 0.4rem;
  margin-bottom: 0.25rem;
}

.module-phone-head svg {
  width: 28px;
  height: 28px;
}

.module-phone-head .flow-wave {
  height: 30px;
  transform: scale(0.62);
  transform-origin: right center;
}

.flow-module-phone > strong,
.flow-module-phone-out > strong {
  font-size: clamp(0.62rem, 0.82vw, 0.78rem);
  line-height: 1.1;
}

.flow-module-phone > span,
.flow-module-phone-out > span {
  margin-top: 0.22rem;
  color: var(--muted);
  font-size: clamp(0.49rem, 0.63vw, 0.61rem);
}

.flow-module-phone > em,
.flow-module-phone-out > em {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.55rem;
  color: var(--muted);
  font-size: clamp(0.47rem, 0.58vw, 0.56rem);
  font-style: normal;
}

.flow-module-phone > em::before,
.flow-module-phone-out > em::before {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  content: "";
}

.flow-module-voice-line {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  text-align: center;
}

.flow-module-voice-line svg {
  width: 38px;
  height: 38px;
  margin-bottom: 0.25rem;
}

.flow-module-voice-line strong {
  font-size: clamp(0.56rem, 0.75vw, 0.7rem);
  line-height: 1.12;
}

.flow-module-voice-line span {
  max-width: 11ch;
  margin-top: 0.24rem;
  color: var(--muted);
  font-size: clamp(0.42rem, 0.55vw, 0.52rem);
  line-height: 1.2;
}

.flow-module-cloud-pbx {
  padding: clamp(0.55rem, 0.8vw, 0.75rem);
  border: 1px solid var(--line);
  background: rgb(245 242 236 / 94%);
  box-shadow: 0 12px 30px rgb(11 17 19 / 6%);
}

.pbx-rack {
  display: grid;
  gap: 4px;
  margin-block: 0.5rem 0.45rem;
  padding: 0.45rem;
  background: var(--dark);
}

.pbx-rack > span {
  min-height: 11px;
  display: flex;
  align-items: center;
  gap: 4px;
  padding-inline: 4px;
  border: 1px solid rgb(226 232 233 / 16%);
  background: rgb(11 17 19 / 6%);
}

.pbx-rack i {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--accent);
}

.pbx-rack b {
  height: 2px;
  flex: 1;
  margin-left: 3px;
  background: repeating-linear-gradient(90deg, rgb(107 110 112 / 42%) 0 3px, transparent 3px 6px);
}

.flow-module-cloud-pbx small {
  display: block;
  color: var(--muted);
  font-size: clamp(0.43rem, 0.53vw, 0.51rem);
  line-height: 1.2;
}

.flow-module-voice-agent {
  padding: clamp(0.75rem, 1vw, 1rem);
  background: var(--dark);
  color: var(--dark-ink);
  box-shadow: 0 18px 36px rgb(11 17 19 / 14%);
}

.agent-heading {
  gap: 0.55rem;
}

.agent-heading > svg {
  width: 28px;
  height: 28px;
  padding: 5px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--dark-ink);
}

.agent-heading strong {
  font-size: clamp(0.72rem, 0.95vw, 0.9rem);
}

.agent-heading .flow-wave {
  height: 26px;
  margin-left: auto;
  transform: scale(0.48);
  transform-origin: right center;
}

.agent-request {
  margin-top: 0.75rem;
  padding: 0.65rem 0.7rem;
  border: 1px solid rgb(226 232 233 / 22%);
  background: rgb(11 17 19 / 6%);
  color: var(--dark-ink);
  font-size: clamp(0.6rem, 0.77vw, 0.72rem);
  font-weight: var(--weight-heading);
}

.agent-actions {
  display: grid;
  gap: 0.4rem;
  margin-top: 0.55rem;
}

.agent-actions span {
  min-height: 31px;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.5rem;
  border-top: 1px solid rgb(226 232 233 / 15%);
}

.agent-actions svg {
  width: 16px;
  height: 16px;
}

.agent-actions b {
  color: rgb(226 232 233 / 78%);
  font-size: clamp(0.48rem, 0.62vw, 0.58rem);
  font-weight: var(--weight-label);
}

.flow-module-calendar,
.flow-module-lookup,
.flow-module-ticket,
.flow-module-crm,
.flow-module-automation,
.flow-module-human {
  padding: clamp(0.65rem, 0.9vw, 0.85rem);
}

.flow-module-calendar {
  border: 1px solid var(--line);
  background: rgb(250 248 243 / 92%);
  box-shadow: 0 12px 28px rgb(11 17 19 / 5%);
}

.flow-module-lookup {
  background: rgb(250 248 243 / 94%);
}

.flow-module-ticket {
  border: 1px dashed rgb(240 77 33 / 70%);
  background: rgb(245 242 236 / 94%);
  clip-path: polygon(8px 0, calc(100% - 8px) 0, 100% 8px, 100% calc(100% - 8px), calc(100% - 8px) 100%, 8px 100%, 0 calc(100% - 8px), 0 8px);
}

.flow-module-crm {
  border-block: 1px solid var(--ink);
  background: rgb(250 248 243 / 92%);
}

.flow-module-automation {
  border: 1px solid rgb(240 77 33 / 52%);
  background: rgb(250 248 243 / 94%);
  box-shadow: 0 10px 24px rgb(11 17 19 / 5%);
}

.flow-module-human {
  border-block: 1px solid var(--line);
  background: rgb(250 248 243 / 94%);
}

.business-detail {
  display: block;
  margin-top: 0.35rem;
  color: var(--muted);
  font-size: clamp(0.43rem, 0.54vw, 0.52rem);
  line-height: 1.2;
}

.flow-module dl {
  margin: 0.55rem 0 0;
}

.flow-module dl > div {
  min-height: 26px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.35rem;
  border-top: 1px solid rgb(107 110 112 / 22%);
}

.flow-module dt,
.flow-module dd {
  margin: 0;
  font-size: clamp(0.43rem, 0.55vw, 0.52rem);
}

.flow-module dt {
  font-weight: var(--weight-heading);
}

.flow-module dd {
  color: var(--muted);
  text-align: right;
}

.flow-module-output {
  display: flex;
  flex-direction: column;
  padding: clamp(0.65rem, 0.8vw, 0.8rem) clamp(0.45rem, 0.6vw, 0.6rem) 1rem;
  background: rgb(250 248 243 / 96%);
  box-shadow: 0 12px 28px rgb(11 17 19 / 7%);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 7px), 90% 100%, 80% calc(100% - 7px), 70% 100%, 60% calc(100% - 7px), 50% 100%, 40% calc(100% - 7px), 30% 100%, 20% calc(100% - 7px), 10% 100%, 0 calc(100% - 7px));
}

.flow-module-output > strong {
  font-size: clamp(0.55rem, 0.72vw, 0.68rem);
  line-height: 1.15;
}

.flow-module-output > span {
  margin-top: 0.25rem;
  color: var(--muted);
  font-size: clamp(0.4rem, 0.5vw, 0.48rem);
}

.flow-module-output ul {
  display: grid;
  gap: 0.5rem;
  margin: 0.7rem 0 0;
  padding: 0;
  list-style: none;
}

.flow-module-output li {
  display: grid;
  grid-template-columns: 15px minmax(0, 1fr);
  gap: 0.3rem;
  align-items: center;
}

.flow-module-output li svg {
  width: 14px;
  height: 14px;
}

.flow-module-output li b {
  font-size: clamp(0.4rem, 0.51vw, 0.49rem);
  font-weight: var(--weight-strong);
  line-height: 1.12;
}

@keyframes flow-signal {
  to { transform: scaleY(1); }
}

@media (max-width: 1100px) {
  .hero {
    grid-template-columns: 1fr;
  }

  .hero-primary {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .flow-tabs button span {
    display: block;
  }

  .hero-side {
    min-height: 250px;
    grid-template-columns: minmax(240px, 0.65fr) minmax(0, 1.35fr);
    grid-template-rows: 1fr;
  }

  .hero-blank-panel {
    border-right: 1px solid var(--line);
    border-bottom: 0;
  }

  .hero-proof-panel {
    min-height: 250px;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: 1fr;
  }

  .hero-proof-item + .hero-proof-item {
    border-top: 0;
    border-left: 1px solid rgb(226 232 233 / 22%);
    padding-left: 1rem;
  }
}

@media (max-width: 920px) {
  .hero-primary {
    min-height: 0;
  }

  .hero-side {
    grid-template-columns: 1fr;
    grid-template-rows: 180px auto;
  }

  .hero-blank-panel {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .hero-proof-panel {
    min-height: 330px;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(3, 1fr);
  }

  .hero-proof-item + .hero-proof-item {
    border-top: 1px solid rgb(226 232 233 / 22%);
    border-left: 0;
    padding-left: 0;
  }

  .flow-stage {
    height: auto;
    overflow: visible;
  }

  .flow-connectors {
    display: none;
  }

  .flow-modules {
    position: static;
    display: grid;
    gap: 12px;
    height: auto;
  }

  .flow-module {
    position: relative;
    inset: auto;
    width: 100%;
    height: auto;
    min-height: 116px;
  }

  .flow-module:not(:last-child)::after {
    position: absolute;
    bottom: -13px;
    left: 50%;
    z-index: 2;
    width: 1px;
    height: 13px;
    background: var(--accent);
    content: "";
  }

  .flow-module-voice-line {
    min-height: 110px;
  }

  .flow-module-cloud-pbx,
  .flow-module-calendar,
  .flow-module-lookup,
  .flow-module-ticket,
  .flow-module-crm,
  .flow-module-automation,
  .flow-module-human,
  .flow-module-output {
    padding: 1rem;
  }

  .flow-module-voice-agent {
    min-height: 230px;
    padding: 1.15rem;
  }

  .flow-module-output {
    min-height: 190px;
  }

  .module-heading strong,
  .flow-module-phone > strong,
  .flow-module-phone-out > strong,
  .agent-heading strong,
  .flow-module-output > strong {
    font-size: 0.88rem;
  }

  .flow-module-phone > span,
  .flow-module-phone-out > span,
  .business-detail,
  .flow-module-cloud-pbx small,
  .flow-module-output > span,
  .flow-module dt,
  .flow-module dd,
  .agent-actions b,
  .flow-module-output li b {
    font-size: 0.7rem;
  }
}

@media (max-width: 680px) {
  .flow-tabs button {
    min-height: 52px;
  }

  .flow-intro {
    min-height: 0;
  }
}

/* Full-width workflow row: the orange panel remains above it. */
.hero {
  height: auto;
  min-height: clamp(790px, calc(100svh - 108px), 870px);
  grid-template-columns: minmax(0, 2.05fr) minmax(300px, 0.95fr);
  grid-template-rows: minmax(300px, 0.82fr) minmax(430px, 1.18fr);
  gap: 0;
}

.hero-primary {
  grid-column: 1;
  grid-row: 1;
  display: flex;
  align-items: center;
  padding: clamp(2rem, 3vw, 3rem) clamp(2rem, 3.2vw, 3.5rem);
  border-right: 1px solid var(--line);
  border-bottom: 0;
}

.hero-blank-panel {
  grid-column: 2;
  grid-row: 1;
  min-height: 0;
  border-right: 0;
  border-bottom: 0;
  background: var(--accent);
}

.flow-showcase {
  grid-column: 1 / -1;
  grid-row: 2;
  align-self: stretch;
  min-width: 0;
  margin-top: 0;
  padding: 0 clamp(2rem, 3.2vw, 3.5rem) 1.25rem;
  border-top: 1px solid var(--line);
  background-color: var(--bg);
  background-image:
    linear-gradient(rgb(245 242 236 / 75%), rgb(245 242 236 / 84%)),
    url("./assets/hero-signal-texture.webp");
  /* AVIF destekleyen tarayicilar ayni dokuyu yarisi kadar bayt ile alir;
     desteklemeyenler yukaridaki webp bildirimini kullanmayi surdurur. */
  background-image:
    linear-gradient(rgb(245 242 236 / 75%), rgb(245 242 236 / 84%)),
    image-set(
      url("./assets/hero-signal-texture.avif") type("image/avif"),
      url("./assets/hero-signal-texture.webp") type("image/webp")
    );
  background-position: center 54%;
  background-size: cover;
}

.flow-intro {
  grid-template-columns: minmax(0, 1fr) minmax(300px, 0.7fr);
}

.flow-stage {
  height: 340px;
}

@media (max-width: 920px) {
  .hero {
    grid-template-columns: 1fr;
    grid-template-rows: auto 170px auto;
  }

  .hero-primary {
    grid-column: 1;
    grid-row: 1;
    min-height: 470px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .hero-blank-panel {
    grid-column: 1;
    grid-row: 2;
    border-bottom: 1px solid var(--line);
  }

  .flow-showcase {
    grid-column: 1;
    grid-row: 3;
    padding-bottom: 2rem;
  }

  .flow-intro {
    grid-template-columns: 1fr;
  }

  .flow-stage {
    height: auto;
  }
}

@media (max-width: 680px) {
  .hero {
    grid-template-rows: auto 140px auto;
  }

  .hero-primary {
    min-height: 0;
    padding: 2.2rem 1.15rem;
  }

  .flow-showcase {
    padding-inline: 1.15rem;
  }
}

/* Single operational flow */
.flow-heading {
  min-height: 58px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--line);
  font-size: clamp(0.95rem, 1.3vw, 1.2rem);
  font-weight: var(--weight-heading);
  letter-spacing: -0.025em;
}

.flow-readouts {
  position: absolute;
  inset: 0;
  z-index: 3;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.flow-readout {
  position: absolute;
  top: calc(var(--readout-y) * 0.294117647%);
  left: calc(var(--readout-x) * 0.1%);
  min-height: 24px;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.25rem 0.42rem;
  border: 1px solid rgb(107 110 112 / 42%);
  background: rgb(250 248 243 / 96%);
  box-shadow: 0 5px 14px rgb(11 17 19 / 7%);
  color: var(--ink);
  transform: translate(-50%, -50%);
  white-space: nowrap;
}

.flow-readout i,
.pbx-heading span::before {
  width: 6px;
  height: 6px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--accent);
  content: "";
}

.flow-readout b {
  font-size: clamp(0.42rem, 0.55vw, 0.52rem);
  font-weight: var(--weight-heading);
}

.flow-module-cloud-pbx {
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: rgb(250 248 243 / 94%);
}

.pbx-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.pbx-heading strong {
  font-size: clamp(0.72rem, 0.9vw, 0.86rem);
}

.pbx-heading span {
  display: flex;
  align-items: center;
  gap: 0.32rem;
  color: var(--muted);
  font-size: clamp(0.43rem, 0.52vw, 0.5rem);
}

.pbx-routes {
  display: grid;
  gap: 0.55rem;
  margin-block: 0.8rem 0.65rem;
}

.pbx-routes > div {
  display: grid;
  grid-template-columns: auto minmax(14px, 1fr) auto;
  gap: 0.4rem;
  align-items: center;
}

.pbx-routes b,
.pbx-routes em,
.flow-module-cloud-pbx small {
  font-size: clamp(0.43rem, 0.54vw, 0.52rem);
  font-style: normal;
}

.pbx-routes b {
  font-weight: var(--weight-heading);
}

.pbx-routes em,
.flow-module-cloud-pbx small {
  color: var(--muted);
}

.pbx-routes i {
  height: 1px;
  position: relative;
  background: var(--line);
}

.pbx-routes i::after {
  position: absolute;
  top: -2px;
  right: 0;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
  content: "";
}

.flow-module-voice-agent {
  border: 1.5px solid var(--accent);
  background: rgb(255 249 242 / 96%);
  color: var(--ink);
  box-shadow: 0 18px 36px rgb(240 77 33 / 12%);
}

.agent-heading > svg {
  color: white;
}

.agent-request {
  border: 0;
  background: var(--accent);
  color: var(--ink);
}

.agent-actions span {
  border-top-color: rgb(107 110 112 / 23%);
}

.agent-actions b {
  color: var(--muted);
}

.flow-module-automation {
  background: rgb(255 249 242 / 96%);
}

.flow-module-human {
  background: rgb(250 248 243 / 94%);
}

@media (max-width: 920px) {
  .flow-heading {
    padding-block: 0.95rem;
  }

  .flow-readouts {
    display: none;
  }
}

/* The workflow is retained for later use, but removed from the hero.
   Scoped above 920px: below it the hero stacks and the orange panel keeps
   its own row (it was previously forced into row 1 on top of the copy). */
@media (min-width: 921px) {
  .hero {
    height: clamp(440px, calc(100svh - 280px), 520px);
    min-height: 440px;
    grid-template-rows: 1fr;
  }

  .hero-primary,
  .hero-blank-panel {
    grid-row: 1;
  }
}

@media (max-width: 920px) {
  .hero {
    grid-template-rows: auto minmax(300px, 46vh);
  }

  .hero-primary {
    min-height: 0;
  }

  .hero-blank-panel {
    grid-row: 2;
    border-bottom: 0;
  }
}

.flow-showcase[hidden] {
  display: none !important;
}

/* Metrics band — mirrors the hero grid: figures left, dark block under the orange. */
.metrics-band {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2px;
  border: 1px solid var(--line);
}

.metrics-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0;
  background: var(--bg);
}

.metric {
  display: grid;
  align-content: start;
  gap: 0.5rem;
  min-block-size: 132px;
  padding: clamp(1.15rem, 1.9vw, 1.65rem) clamp(1.1rem, 1.8vw, 1.6rem);
  border-inline-start: 1px solid var(--line);
}

.metric:first-child {
  border-inline-start: 0;
}

.metric dt {
  order: 2;
  color: var(--secondary);
  max-width: 28ch;
  font-size: var(--text-label);
  line-height: var(--lh-label);
  text-wrap: balance;
}

.metric dd {
  order: 1;
  display: flex;
  align-items: baseline;
  gap: 0.35rem;
  margin: 0;
}

.metric-value {
  font-size: var(--text-numeral);
  font-weight: var(--weight-heading);
  letter-spacing: var(--tracking-numeral);
  line-height: var(--lh-numeral);
  font-variant-numeric: tabular-nums;
}

.metric-unit {
  color: var(--muted);
  font-size: var(--text-label);
  font-weight: var(--weight-strong);
  letter-spacing: 0.02em;
}

.metric--lead .metric-value {
  color: var(--accent);
}

.metric-meter {
  order: 3;
  display: block;
  margin-block-start: auto;
  block-size: 4px;
  background: var(--secondary-line);
}

.metric-meter i {
  display: block;
  block-size: 100%;
  background: var(--accent);
}

@media (max-width: 920px) {
  .metrics-band {
    grid-template-columns: 1fr;
  }

  .metrics-grid {
    border-inline-end: 0;
  }
}

@media (max-width: 620px) {
  .metrics-grid {
    grid-template-columns: 1fr;
  }

  .metric {
    min-block-size: 0;
    border-inline-start: 0;
  }

  .metric + .metric {
    border-block-start: 1px solid var(--line);
  }
}

/* Blocks are separated by one gap value; the page guides run through the gaps. */
main {
  --block-gap: clamp(8px, 0.9vw, 14px);
  --split: 68.33%;
  gap: var(--block-gap);
}

/* Page rails continue the hero grid through every section. */
main,
.footer {
  --rail-offset: max(var(--gutter), calc((100% - var(--max)) / 2));
  --rail-line: rgb(107 110 112 / 16%);
  position: relative;
}

main::before,
.footer::before {
  position: absolute;
  inset-block: 0;
  left: var(--rail-offset);
  right: var(--rail-offset);
  z-index: 3;
  border-inline: 1px solid var(--rail-line);
  content: "";
  pointer-events: none;
}

main > section:not(.hero) {
  position: relative;
}

main > section:not(.hero)::before {
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 3;
  width: 100vw;
  border-top: 1px solid var(--rail-line);
  content: "";
  pointer-events: none;
  transform: translateX(-50%);
}

/* Customer reference rail, adapted from UI Bank's content/logo-marquee. */
main {
  display: flex;
  flex-direction: column;
}

/* Bolum sirasi DOM sirasidir. Burada `order` kullanilmaz: flex `order` yalnizca
   gorsel sirayi degistirir, sekme ve ekran okuyucu sirasi DOM'da kalir; ikisi
   ayrisinca klavye kullanicisi sayfayi gordugunden farkli sirada gezer. Sirayi
   degistirmek icin `index.html` icindeki <section> bloklari tasinir. */

.customer-carousel {
  margin-top: 0;
  background: var(--secondary-tint);
  border-block: 1px solid var(--secondary-line);
  min-height: 250px;
  display: grid;
  grid-template-columns: minmax(220px, 0.55fr) minmax(0, 1.45fr);
  grid-template-rows: 148px 102px;
  overflow: hidden;
  border-inline: 1px solid var(--line);
  background: var(--bg);
}

.customer-carousel-heading {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 1.5rem clamp(1.25rem, 2.8vw, 2.35rem);
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.customer-carousel-heading h2 {
  margin-bottom: 0.45rem;
  font-size: var(--text-h3);
  font-weight: var(--weight-heading);
  letter-spacing: var(--tracking-h3);
  line-height: var(--lh-h3);
  text-wrap: balance;
}

.customer-carousel-heading p {
  margin: 0;
  max-width: 56ch;
  color: var(--muted);
  font-size: var(--text-sm);
  line-height: var(--lh-body);
  text-wrap: pretty;
}

.customer-marquee {
  min-width: 0;
  overflow: hidden;
  outline: none;
}

.customer-carousel > .customer-marquee:not(.customer-marquee-secondary) {
  border-bottom: 1px solid var(--line);
}

.customer-marquee-secondary {
  grid-column: 1 / -1;
  border-top: 0;
}

.customer-marquee-secondary .customer-track {
  animation-direction: reverse;
  animation-duration: 75s;
}

.customer-marquee:focus-visible {
  box-shadow: inset 0 0 0 2px var(--accent);
}

.customer-track {
  width: max-content;
  min-height: 100%;
  display: flex;
  align-items: stretch;
  animation: customer-scroll 120s linear infinite;
  will-change: transform;
}

.customer-marquee:is(:hover, :focus-within) .customer-track {
  animation-play-state: paused;
}

.customer-list {
  display: flex;
  align-items: stretch;
  margin: 0;
  padding: 0;
  list-style: none;
}

.customer-list li {
  min-width: clamp(170px, 15vw, 220px);
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  gap: 0.45rem;
  padding: 0.75rem 1.5rem;
  border-right: 1px solid var(--line);
  color: var(--ink);
  font-size: var(--text-sm);
  font-weight: var(--weight-heading);
  letter-spacing: var(--tracking-lead);
  text-align: center;
  white-space: nowrap;
}

.customer-list img {
  width: 138px;
  height: 58px;
  object-fit: contain;
}

.customer-list span {
  max-width: 170px;
  overflow: hidden;
  color: var(--muted);
  font-size: var(--text-label);
  font-weight: var(--weight-label);
  line-height: var(--lh-label);
  text-overflow: ellipsis;
}

@keyframes customer-scroll {
  to {
    transform: translateX(-50%);
  }
}

@media (max-width: 680px) {
  .customer-carousel {
    grid-template-columns: 1fr;
    grid-template-rows: auto 82px 82px;
  }

  .customer-carousel-heading {
    padding-block: 1.2rem;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .customer-carousel > .customer-marquee:not(.customer-marquee-secondary) {
    border-bottom: 1px solid var(--line);
  }

  .customer-marquee-secondary {
    grid-column: 1;
  }

  .customer-list li {
    min-height: 82px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .customer-marquee {
    overflow-x: auto;
  }

  .customer-track {
    animation: none;
    will-change: auto;
  }

  .customer-list[aria-hidden="true"] {
    display: none;
  }
}

.skip-link {
  position: fixed;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 100;
  padding: 0.7rem 1rem;
  background: var(--ink);
  color: var(--bg);
  text-decoration: none;
  transform: translateY(-160%);
}

.skip-link:focus {
  transform: translateY(0);
}

.product-page main {
  display: block;
}

.product-page main > section {
  position: relative;
}

.product-page h2 {
  margin-bottom: clamp(1.75rem, 3vw, 3rem);
  font-size: clamp(2rem, 3.4vw, 3.35rem);
  letter-spacing: -0.055em;
  line-height: 1;
  text-wrap: balance;
}

.product-hero {
  padding: 0;
  border-inline: 1px solid var(--line);
}

.product-breadcrumbs {
  min-height: 48px;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding-inline: clamp(1.25rem, 2.8vw, 2.35rem);
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.76rem;
}

.product-breadcrumbs a {
  text-underline-offset: 0.2em;
}

.product-hero-grid {
  min-height: min(610px, calc(100dvh - 140px));
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(360px, 0.92fr);
}

.product-hero-copy {
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  justify-content: center;
  padding: clamp(2.25rem, 5.5vw, 5.5rem);
  border-right: 1px solid var(--line);
}

.product-hero-copy h1 {
  max-width: 18ch;
  margin: 0 0 1.35rem;
  font-size: clamp(2.55rem, 4vw, 4.25rem);
  font-weight: var(--weight-heading);
  letter-spacing: -0.07em;
  line-height: 0.98;
  text-wrap: balance;
}

.product-hero-copy > p {
  max-width: 52ch;
  margin-bottom: 2rem;
  color: var(--muted);
  font-size: clamp(0.96rem, 1.2vw, 1.08rem);
}

.product-hero-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1.25rem;
}

.product-text-link,
.product-related a {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--ink);
  font-size: 0.88rem;
  font-weight: var(--weight-heading);
  text-decoration-color: var(--accent);
  text-underline-offset: 0.25em;
}

.product-hero-visual {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  background: var(--surface);
}

.product-hero-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.product-hero-visual img[src$="/bulut-faks.webp"],
.product-hero-visual img[src$="/fct.webp"],
.product-hero-visual img[src$="/sip-trunk.webp"],
.product-hero-visual img[src$="/virtual-numbers.webp"],
.product-hero-visual img[src$="/auto-dialer.webp"],
.product-hero-visual img[src$="/enterprise-xdsl.webp"],
.product-hero-visual img[src$="/metro-ethernet.webp"] {
  object-fit: contain;
}

.product-hero-visual:has(img[src$="/auto-dialer.webp"]),
.product-hero-visual:has(img[src$="/enterprise-xdsl.webp"]),
.product-hero-visual:has(img[src$="/metro-ethernet.webp"]) {
  background: linear-gradient(90deg, #f24806, #e23d04 52%, #b82b01);
}

.product-hero-visual:has(img[src$="/sip-trunk.webp"]) {
  background: linear-gradient(90deg, #f23e05, #f04202 50%, #c72f01);
}

.product-hero-visual:has(img[src$="/virtual-numbers.webp"]) {
  background: linear-gradient(90deg, #fa490a, #df3807 50%, #9b2001);
}

.product-page--messaging .product-hero-grid {
  grid-template-columns: minmax(360px, 0.88fr) minmax(0, 1.12fr);
}

.product-page--messaging .product-hero-visual img {
  object-position: 62% center;
}

.product-page--connectivity .product-hero-copy {
  background-image: linear-gradient(135deg, var(--bg) 0 74%, rgb(240 77 33 / 10%) 74%);
}

.product-section-nav {
  min-height: 56px;
  display: flex;
  align-items: stretch;
  overflow-x: auto;
  border-inline: 1px solid var(--line);
}

.product-section-nav a {
  min-width: max-content;
  display: flex;
  align-items: center;
  padding: 0.85rem clamp(1rem, 2vw, 1.75rem);
  border-right: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: var(--weight-heading);
  text-decoration: none;
}

.product-section-nav a:hover {
  background: var(--ink);
  color: var(--bg);
}

.product-definition,
.product-capabilities,
.product-deployment,
.product-faq,
.product-related {
  padding: var(--section) clamp(1.25rem, 4vw, 4.5rem);
  border-inline: 1px solid var(--line);
}

.product-definition {
  display: grid;
  grid-template-columns: minmax(240px, 0.7fr) minmax(0, 1.3fr);
  gap: clamp(2.5rem, 7vw, 7rem);
}

.product-definition h2 {
  max-width: 11ch;
}

.product-prose {
  max-width: 68ch;
}

.product-prose p,
.product-operation p {
  color: var(--muted);
  font-size: clamp(1rem, 1.25vw, 1.12rem);
  line-height: 1.75;
}

.product-prose p + p,
.product-operation p + p {
  margin-top: 1.25rem;
}

.product-capability-grid,
.product-fit-list,
.product-step-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.product-capability-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  border: 1px solid var(--line);
}

.product-capability-grid li {
  min-height: 112px;
  display: flex;
  align-items: center;
  padding: 1.25rem clamp(1.25rem, 3vw, 2.5rem);
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-weight: var(--weight-strong);
}

.product-capability-grid li:nth-child(odd) {
  border-right: 1px solid var(--line);
  color: var(--ink);
}

.product-capability-grid li:nth-child(4n + 2),
.product-capability-grid li:nth-child(4n + 3) {
  background: rgb(226 232 233 / 35%);
}

.product-fit {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(360px, 1.1fr);
  border-inline: 1px solid var(--line);
}

.product-fit > div {
  padding: var(--section) clamp(1.25rem, 4vw, 4.5rem);
  border-right: 1px solid var(--line);
}

.product-fit-list {
  border-top: 3px solid var(--accent);
}

.product-fit-list li {
  padding: 1.1rem 0;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
}

.product-fit figure {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  background: var(--surface);
}

.product-fit img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 70% center;
  filter: grayscale(0.78) contrast(1.04);
  transform: scale(1.08);
}

.product-step-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 3px solid var(--line);
}

.product-step-list li {
  min-height: 190px;
  padding: 1.5rem;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  color: var(--muted);
}

.product-step-list li::before {
  width: 42px;
  height: 3px;
  display: block;
  margin-bottom: 2.5rem;
  background: var(--accent);
  content: "";
}

.product-operation {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-inline: 1px solid var(--line);
}

.product-operation article {
  min-height: 360px;
  padding: var(--section) clamp(1.25rem, 4vw, 4.5rem);
}

.product-operation article + article {
  border-left: 1px solid var(--line);
  background: rgb(226 232 233 / 35%);
}

.product-operation h2 {
  max-width: 10ch;
}

.product-faq {
  display: grid;
  grid-template-columns: minmax(240px, 0.7fr) minmax(0, 1.3fr);
  gap: clamp(2.5rem, 7vw, 7rem);
}

.product-faq details {
  border-bottom: 1px solid var(--line);
}

.product-faq details:first-child {
  border-top: 3px solid var(--line);
}

.product-faq summary {
  padding: 1.35rem 2.25rem 1.35rem 0;
  color: var(--ink);
  font-weight: var(--weight-heading);
  cursor: pointer;
}

.product-faq details p {
  max-width: 62ch;
  padding: 0 2rem 1.35rem 0;
  color: var(--muted);
}

.product-related > div {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  border: 1px solid var(--line);
}

.product-related article {
  min-height: 220px;
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  padding: clamp(1.5rem, 3vw, 2.75rem);
}

.product-related article + article {
  border-left: 1px solid var(--line);
  background: rgb(240 77 33 / 8%);
}

.product-related h3 {
  max-width: 20ch;
  margin-bottom: 0.8rem;
  font-size: clamp(1.45rem, 2.4vw, 2.2rem);
  letter-spacing: -0.045em;
}

.product-related p {
  max-width: 52ch;
  color: var(--muted);
}

.product-related a {
  margin-top: auto;
}

.product-cta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2rem;
  align-items: end;
  padding: clamp(3rem, 6vw, 6rem) clamp(1.25rem, 4vw, 4.5rem);
  border-inline: 1px solid var(--line);
}

.product-cta h2 {
  max-width: 20ch;
  margin-bottom: 1rem;
}

.product-cta p {
  margin-bottom: 0;
  color: var(--muted);
}

@media (max-width: 920px) {
  .product-hero-grid,
  .product-page--messaging .product-hero-grid,
  .product-definition,
  .product-fit,
  .product-faq {
    grid-template-columns: 1fr;
  }

  .product-hero-grid {
    min-height: auto;
  }

  .product-hero-copy {
    min-height: 480px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .product-hero-visual {
    min-height: 420px;
  }

  .product-fit > div {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .product-fit figure {
    min-height: 460px;
  }

  .product-step-list {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 680px) {
  .product-hero-copy {
    min-height: 420px;
    padding: 2rem 1.25rem 2.5rem;
  }

  .product-hero-copy h1 {
    font-size: clamp(2.35rem, 12vw, 3.3rem);
  }

  .product-hero-visual {
    min-height: 300px;
  }

  .product-definition,
  .product-faq,
  .product-cta {
    grid-template-columns: 1fr;
  }

  .product-capability-grid,
  .product-step-list,
  .product-operation,
  .product-related > div {
    grid-template-columns: 1fr;
  }

  .product-capability-grid li:nth-child(odd),
  .product-step-list li,
  .product-operation article + article,
  .product-related article + article {
    border-right: 0;
    border-left: 0;
  }

  .product-step-list li {
    min-height: 150px;
  }

  .product-operation article {
    min-height: auto;
  }

  .product-fit figure {
    min-height: 320px;
  }

  .product-cta {
    align-items: start;
  }

  .product-cta .button {
    justify-self: start;
  }
}

/* Logo grey as the secondary surface and structural colour. */
.sectors {
  background: var(--secondary-tint);
  border-block: 1px solid var(--secondary-line);
}

.governance {
  border-block-start: 1px solid var(--secondary-line);
}

.governance-copy h2 {
  border-inline-start: 3px solid var(--secondary);
  padding-inline-start: clamp(0.9rem, 1.4vw, 1.35rem);
}

.footer {
  background: var(--secondary-tint);
  border-block-start: 1px solid var(--secondary-line);
}

.section-heading p,
.sectors-grid p,
.governance-copy p {
  color: var(--secondary);
}

.customer-carousel-heading {
  border-right-color: var(--secondary-line);
  border-bottom-color: var(--secondary-line);
}

/* Hero orange panel carries a dithered signal object: a wave surface displaced
   by two emitters, shaded per pixel with an authored key light, reduced to
   luminance and quantised through an 8x8 ordered Bayer matrix on a fixed 2px
   screen-space grid. Two levels only — ink on accent. Baked offline by
   scripts/generate-hero-dither.py; the page pays no runtime cost. */
.hero-blank-panel {
  position: relative;
  overflow: hidden;
}

.hero-dither {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  image-rendering: pixelated;
  user-select: none;
  pointer-events: none;
}

@media (max-width: 920px) {
  /* Landscape crop of the portrait field: hold the interference centre. */
  .hero-dither {
    object-position: center 34%;
  }
}

/* Services: kategori sekmeleri dar ekranda dikey yığılır (§11). */
@media (max-width: 820px) {
  .service-switch {
    grid-template-columns: minmax(0, 1fr);
  }

  .service-tab {
    min-height: 72px;
    border-inline-start: 0;
    border-block-start: 1px solid var(--line);
  }

  .service-tab:first-child {
    border-block-start: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .services [data-icon],
  .services [data-icon] > * {
    animation: none !important;
  }

  .service-switch-thumb,
  .service-tab,
  .service-tab::after,
  .service-card a,
  .service-card a::after,
  .service-card .service-icon {
    transition: none;
  }
}

/* ---------------------------------------------------------------------------
   Footer — accent call band + hairline directory grid (DESIGN.md §2.2, §4.1)
   The footer is the page's full-blooded surface: one accent band carries the
   ask, the light directory below it sits on the page rails as hairline cells.
--------------------------------------------------------------------------- */
.footer {
  --footer-inset: clamp(1.1rem, 2vw, 2rem);

  padding-block: 0;
  border-block-start: 1px solid var(--line);
  background: var(--bg);
}

.footer-call {
  position: relative;
  z-index: 1;
  background: var(--accent);
  color: var(--accent-ink);
  padding-block: clamp(2.25rem, 3.4vw, 3.25rem);
  overflow: hidden;
}

.footer-call::after {
  position: absolute;
  z-index: -1;
  inset-block-start: -40%;
  inset-inline-end: -10%;
  width: min(46rem, 70%);
  aspect-ratio: 1;
  background: radial-gradient(circle, rgb(255 247 244 / 26%), transparent 62%);
  content: "";
  pointer-events: none;
}

.footer-call-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  align-items: end;
  gap: clamp(1.5rem, 3vw, 3rem);
  padding-inline: var(--footer-inset);
}

.footer-call-copy h2 {
  margin: 0 0 clamp(1.25rem, 1.8vw, 1.65rem);
  max-width: 22ch;
  font-size: var(--text-h2);
  font-weight: var(--weight-heading);
  line-height: var(--lh-h2);
  letter-spacing: var(--tracking-h2);
  text-wrap: balance;
}

.footer-call-button {
  border-color: var(--ink);
  background: var(--ink);
  color: #fff7f4;
  padding-inline: 1.6rem;
}

.footer-call-button:hover {
  border-color: #fff7f4;
  background: #fff7f4;
  color: var(--ink);
}

.footer-call-lines {
  display: grid;
  margin: 0;
  gap: 1.25rem;
  border-block-start: 1px solid rgb(11 17 19 / 32%);
  padding-block-start: 1.25rem;
}

.footer-call-lines dt {
  font-size: var(--text-label);
  font-weight: var(--weight-label);
  line-height: var(--lh-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: rgb(11 17 19 / 72%);
}

.footer-call-lines dd {
  margin: 0.35rem 0 0;
  font-size: var(--text-lead);
  font-weight: var(--weight-heading);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  overflow-wrap: break-word;
}

.footer-call-lines a {
  color: rgb(11 17 19 / 88%);
  text-decoration: none;
  border-block-end: 2px solid transparent;
  transition: border-color 160ms ease;
}

.footer-call-lines a:hover {
  border-block-end-color: rgb(11 17 19 / 88%);
}

.footer-directory {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr));
  border-block-end: 1px solid var(--line);
}

.footer-cell {
  min-width: 0;
  padding: clamp(1.75rem, 2.6vw, 2.5rem) clamp(1rem, 1.8vw, 1.75rem);
  border-inline-start: 1px solid var(--line);
  transition: background 160ms ease;
}

.footer-cell:first-child {
  border-inline-start: 0;
  padding-inline-start: var(--footer-inset);
}

.footer-cell:hover {
  background: var(--hover-tint);
}

.footer-cell h3 {
  margin: 0 0 1.1rem;
  font-size: var(--text-label);
  font-weight: var(--weight-label);
  line-height: var(--lh-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--muted);
}

.footer-brand img {
  width: clamp(150px, 16vw, 200px);
  height: auto;
}

.footer-kunye {
  display: grid;
  margin: clamp(1.5rem, 2.4vw, 2.25rem) 0 0;
  gap: 0.9rem;
}

.footer-kunye dt {
  font-size: var(--text-label);
  font-weight: var(--weight-label);
  line-height: var(--lh-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--muted);
}

.footer-kunye dd {
  margin: 0.25rem 0 0;
  max-width: 38ch;
  font-size: var(--text-sm);
  line-height: var(--lh-body);
  font-variant-numeric: tabular-nums;
  overflow-wrap: break-word;
}

.footer-nav {
  display: flex;
  flex-direction: column;
  align-items: start;
}

.footer-nav a {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding-block: 0.42rem;
  font-size: var(--text-sm);
  font-weight: var(--weight-strong);
  text-decoration: none;
  transition: color 160ms ease;
}

.footer-nav a span {
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity 160ms ease, transform 160ms ease;
}

.footer-nav a:hover {
  color: var(--accent);
}

.footer-nav a:hover span,
.footer-nav a:focus-visible span {
  opacity: 1;
  transform: translateX(0);
}

.footer-social-links {
  display: flex;
  gap: 0.5rem;
}

.footer-social-links a {
  display: inline-flex;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  color: var(--ink);
  transition: background 160ms ease, border-color 160ms ease,
    color 160ms ease, transform 160ms ease;
}

.footer-social-links svg {
  width: 18px;
  height: 18px;
  fill: currentcolor;
}

.footer-social-links a:hover {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--accent-ink);
  transform: translateY(-2px);
}

.footer-authorization {
  display: flex;
  padding-inline: var(--footer-inset);
  align-items: center;
  justify-content: space-between;
  gap: clamp(1rem, 3vw, 3rem);
  padding-block: 1.25rem;
  border-block-end: 1px solid var(--line);
}

.footer-authorization p {
  margin: 0;
  text-align: left;
  max-width: 68ch;
  color: var(--muted);
  font-size: var(--text-sm);
  line-height: var(--lh-body);
  text-wrap: pretty;
}

.footer-status {
  display: flex;
  flex-shrink: 0;
  gap: 0.4rem;
}

.footer-status span {
  border: 1px solid var(--line);
  padding: 0.3rem 0.6rem;
  color: var(--ink);
  font-size: var(--text-label);
  font-weight: var(--weight-label);
  line-height: var(--lh-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

.footer-legal {
  padding: clamp(1.5rem, 3vw, 2.5rem) var(--footer-inset) clamp(2rem, 3.5vw, 3rem);
}

.footer-legal p {
  margin: 0;
  max-width: 56ch;
  color: var(--muted);
  font-size: 32px;
  font-weight: var(--weight-body);
  line-height: var(--lh-body);
  letter-spacing: normal;
  text-align: left;
  text-wrap: pretty;
  font-variant-numeric: tabular-nums;
  overflow-wrap: break-word;
}

.footer-legal strong {
  color: var(--accent);
}

@media (max-width: 1024px) {
  .footer-call-inner {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
  }

  .footer-directory {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .footer-cell-brand {
    grid-column: 1 / -1;
    border-block-end: 1px solid var(--line);
  }

  .footer-cell:nth-child(2) {
    border-inline-start: 0;
    padding-inline-start: 0;
  }
}

/* --------------------------------------------------------------------------
   Sessiz kilavuzlar ve metin girisleri

   Kolonlar ayni sanal raylara oturur; sayfa boyunca uzanan dikey cizgiler
   boyanmaz. Yatay hairline'lar ile hucrelerin kendi yerel ayiricilari kalir.
   Okuma metni de dis raya sifir baslamak yerine kisa bir optik inset alir. */

main {
  --content-inset: clamp(2rem, 4vw, 4rem);
}

main::before,
.footer::before {
  border-inline-color: transparent;
}

main .shell,
.footer .shell {
  border-inline-color: transparent !important;
}

.ab-page .ab-guides::before,
.career-page .career-lower::before,
.contact-page .contact-lower::before,
.online-page .online-body::before {
  border-inline-color: transparent;
}

.ab-page .ab-guides::after,
.career-page .career-lower::after,
.contact-page .contact-lower::after,
.online-page .online-body::after {
  background: transparent;
}

.resellers-page .bayi-rules {
  display: none;
}

.infrastructure-grid > :first-child,
.whyus-head,
.tariff-cta-head,
.section-head-row,
.faq-rail,
.ab-page .ab-open-head,
.ab-page .ab-scope > h2,
.ab-page .ab-scope > .ab-scope-lede,
.ab-page .ab-infra-head,
.ab-page .ab-team > h2,
.ab-page .ab-team > .ab-team-answer,
.ab-page .ab-scale-grid > h2,
.ab-page .ab-integration-head,
.ab-page .ab-clients-intro,
.ab-page .ab-auth-head,
.ab-page .ab-docs > h2,
.ab-page .ab-legal > h2,
.career-page .career-intro > h1,
.career-page .role-head,
.career-page .role-copy,
.career-page .pending-row > h2,
.career-page .apply-head,
.contact-page .contact-info,
.contact-page .contact-registry > h2,
.online-page .online-choice-head,
.online-page .online-head-row,
.online-page .online-lead,
.online-page .online-banks-head,
.pricing-page .tar-open-inner > h1,
.pricing-page .tar-open-inner > .tar-lead,
.pricing-page .sheet-head > h2,
.resellers-page .bayi-cover-head,
.resellers-page .bayi-filter > legend,
.resellers-page .bayi-filter-help,
.resellers-page .bayi-plan-list,
.resellers-page .bayi-region-head {
  padding-inline: var(--content-inset);
}

@media (max-width: 640px) {
  .footer-directory {
    grid-template-columns: minmax(0, 1fr);
  }

  .footer-cell {
    border-inline-start: 0;
    border-block-end: 1px solid var(--line);
    padding-inline: var(--footer-inset);
  }

  .footer-cell:last-child {
    border-block-end: 0;
  }

  .footer-authorization {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (prefers-reduced-motion: reduce) {
  .footer-nav a span,
  .footer-social-links a,
  .footer-call-lines a {
    transition: none;
  }
}

/* ---------------------------------------------------------------------------
   Neden CloudCell — dort hucreli bento (DESIGN.md 4.3 capa kurali)

   Referans kompozisyon koyu kartlardan olusuyordu; 2.2 geregi burada light
   yuzeyde kuruldu. "Uzayda duran isikli obje" hissi koyu zeminle degil,
   objenin altina dusen turuncu isik lekesiyle uretiliyor (2.4, opacity <= .14).
   Radius 0 ve gap 0: hucreler paylasilan 1px hairline ile ayriliyor, kap
   kenarlari sayfanin kilavuz cizgilerine oturuyor (11b.3).

   Capa A hucresidir: en genis sutun, en uzun satir, en yogun obje.
   --------------------------------------------------------------------------- */

.whyus {
  position: relative;
  isolation: isolate;
}

/* 6.3: prosedurel izgara degil, uretilmis doku. Sayfada 2-3 yerde kullanilir. */
.whyus::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url("./assets/textures/topo-wash-muted.webp") center / cover no-repeat;
  background-image: image-set(
    url("./assets/textures/topo-wash-muted.avif") type("image/avif"),
    url("./assets/textures/topo-wash-muted.webp") type("image/webp")
  );
  opacity: 0.16;
  pointer-events: none;
}

.whyus-inner {
  display: grid;
  gap: clamp(2rem, 4vw, 3.5rem);
}

/* baslik ------------------------------------------------------------------ */

.whyus-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1rem, 2.5vw, 1.75rem);
  padding-top: 1.1rem;
  border-top: 1px solid var(--ink);
}

.whyus-head h2 {
  margin: 0;
  font-size: var(--text-h2);
  font-weight: var(--weight-heading);
  letter-spacing: var(--tracking-h2);
  line-height: var(--lh-h2);
  text-wrap: balance;
}

/* 3. bolum vurgu bandi: harflerin arkasindan gecen kalin turuncu band. */
.whyus-title-mark {
  display: inline;
  background-image: linear-gradient(var(--accent), var(--accent));
  background-repeat: no-repeat;
  background-size: 100% 0.25em;
  background-position: 0 calc(100% - 0.1em);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.whyus-lead {
  margin: 0;
  max-width: 62ch;
  color: var(--muted);
  font-size: var(--text-lead);
  line-height: var(--lh-lead);
  letter-spacing: var(--tracking-lead);
  text-wrap: pretty;
}

.whyus-lead strong {
  display: block;
  margin-bottom: 0.55rem;
  color: var(--ink);
  font-weight: var(--weight-strong);
}

.whyus-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.75rem;
}

.whyus-secondary {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  color: var(--ink);
  font-size: var(--text-sm);
  font-weight: var(--weight-strong);
  text-decoration: none;
  border-bottom: 1px solid var(--line);
  transition: border-color 160ms cubic-bezier(0.2, 0, 0, 1);
}

.whyus-secondary:hover,
.whyus-secondary:focus-visible {
  border-bottom-color: var(--ink);
}

.whyus-secondary:hover .whyus-arrow,
.whyus-secondary:focus-visible .whyus-arrow {
  transform: translateX(4px);
}

/* bento ------------------------------------------------------------------- */

.whyus-bento {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}

.wb-cell {
  --wb-pad: clamp(1.35rem, 2.2vw, 2.25rem);
  position: relative;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  min-width: 0;
  min-height: 420px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  transition: background 160ms cubic-bezier(0.2, 0, 0, 1);
}

.wb-cell:hover,
.wb-cell:focus-visible {
  background: var(--hover-tint);
  outline: none;
}

.wb-cell:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: -2px;
}

.wb-text {
  padding: var(--wb-pad) var(--wb-pad) 0;
  max-width: 58ch;
}

.wb-text h3 {
  margin: 0 0 0.55rem;
  font-size: var(--text-h3);
  font-weight: var(--weight-strong);
  letter-spacing: var(--tracking-h3);
  line-height: var(--lh-h3);
  text-wrap: balance;
}

.wb-text p {
  margin: 0;
  font-size: var(--text-sm);
  line-height: var(--lh-body);
  text-wrap: pretty;
}

.wb-vs {
  margin-top: 0.9rem !important;
  padding-top: 0.7rem;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: var(--text-label);
  line-height: 1.5;
}

/* obje sahnesi ------------------------------------------------------------ */

.wb-object {
  position: relative;
  min-height: 0;
  overflow: hidden;
  display: grid;
  align-content: stretch;
  transition: transform 240ms cubic-bezier(0.2, 0, 0, 1);
}

.wb-cell:hover .wb-object,
.wb-cell:focus-visible .wb-object {
  transform: translateY(-4px);
}

.wb-object svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* 6.1 cizgi agirligi: ana hat 2-2.5px, ic detay 1px — her objede iki kalinlik */
.wb-object .s-ink { stroke: var(--ink); }
.wb-object .s-accent { stroke: var(--accent); }
.wb-object .s-hair { stroke: var(--line); }
.wb-object .w1 { stroke-width: 1; }
.wb-object .w15 { stroke-width: 1.5; }
.wb-object .w2 { stroke-width: 2; }
.wb-object .w25 { stroke-width: 2.5; }
.wb-object .w3 { stroke-width: 3; }
.wb-object .dash { stroke-dasharray: 4 5; }
.wb-object .dash-fine { stroke-dasharray: 2 7; }
.wb-object .f-bg { fill: var(--bg); }
.wb-object .f-accent { fill: var(--accent); }
.wb-object .f-accent-tint { fill: rgb(240 77 33 / 8%); }
/* outline filtresi SourceAlpha'dan besleniyor: isaret once dolu cizilir */
.wb-object .wb-mark path { fill: #0b1113; }

.wb-object text {
  fill: var(--muted);
  stroke: none;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.06em;
}

.wb-fig {
  margin: 0;
  padding: 0.85rem var(--wb-pad) var(--wb-pad);
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: var(--text-label);
  line-height: var(--lh-label);
  letter-spacing: 0.04em;
}

.wb-fig span {
  color: var(--ink);
}

/* A — santral cekirdegi ---------------------------------------------------- */

.wb-object--core {
  padding-inline: clamp(0.5rem, 1.5vw, 1.25rem);
}

.wb-core {
  transform-origin: 340px 170px;
  animation: wb-float 7s ease-in-out infinite;
}

@keyframes wb-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-9px); }
}

/* B — yorunge: hizmet ikonlari CloudCell isaretinin cevresinde doner ------- */

.wb-object--net { padding-inline: clamp(0.25rem, 1vw, 1rem); }

.wb-object .ic { stroke-width: 2; }

.wb-orbit {
  transform-box: view-box;
  transform-origin: 310px 210px;
  animation: wb-spin 64s linear infinite;
}

/* her ikon kendi merkezi etrafinda ters doner, boylece dik kalir */
.wb-orbit-icon {
  transform-box: view-box;
  animation: wb-spin-rev 64s linear infinite;
}

@keyframes wb-spin { to { transform: rotate(360deg); } }
@keyframes wb-spin-rev { to { transform: rotate(-360deg); } }

/* C — uc belge tek sozlesmede birlesir ------------------------------------ */

.wb-object--bill { padding-inline: clamp(0.25rem, 1vw, 0.75rem); }

.wb-object .wb-sheet-label {
  font-size: 13px;
  letter-spacing: 0.09em;
}

.wb-object .wb-sheet-head {
  font-size: 13px;
  letter-spacing: 0.09em;
  fill: var(--ink);
}

.wb-object .wb-sheet-row {
  font-family: inherit;
  font-size: 15px;
  font-weight: var(--weight-strong);
  letter-spacing: -0.01em;
  fill: var(--ink);
}

/* D — yetkilendirme kaydi -------------------------------------------------- */

.wb-object--auth {
  padding: 0 var(--wb-pad);
  align-content: center;
}

.wb-auth-stage {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  align-items: center;
}

.wb-object .wb-seal {
  width: 100%;
  height: auto;
  max-width: 290px;
}

.wb-object .wb-seal-code {
  font-size: 15px;
  fill: var(--ink);
}

.wb-records {
  display: grid;
  gap: 0.85rem;
  margin: 0 0 0 -3.5rem;
  padding: 0;
  list-style: none;
}

.wb-record {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: baseline;
  gap: 0.15rem 0.7rem;
  padding: 0.85rem 1rem;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgb(11 17 19 / 10%);
  transition: transform 240ms cubic-bezier(0.2, 0, 0, 1);
}

.wb-records li:first-child { transform: translateX(-1.6rem); }

.wb-cell--auth:hover .wb-records li:first-child,
.wb-cell--auth:focus-visible .wb-records li:first-child {
  transform: translateX(-2.4rem);
}

.wb-cell--auth:hover .wb-records li:last-child,
.wb-cell--auth:focus-visible .wb-records li:last-child {
  transform: translateX(0.6rem);
}

.wb-rec-code {
  grid-column: 1;
  margin: 0;
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.08em;
}

.wb-rec-name {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--muted);
  font-size: var(--text-label);
  line-height: 1.45;
  text-wrap: pretty;
}

/* E — agent seridi: parlak yuzey (2.2 geregi renk blogu degil, isik) ------ */

.wb-cell--agent {
  background:
    radial-gradient(120% 130% at 22% -10%, #ffffff 0%, rgb(255 255 255 / 0%) 58%),
    radial-gradient(90% 120% at 78% 110%, rgb(240 77 33 / 6%) 0%, rgb(240 77 33 / 0%) 62%);
}

.wb-cell--agent::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(104deg, rgb(255 255 255 / 0%) 26%, rgb(255 255 255 / 55%) 42%, rgb(255 255 255 / 0%) 58%);
  pointer-events: none;
}

.wb-cell--agent > * { position: relative; z-index: 1; }

.wb-cell--agent:hover,
.wb-cell--agent:focus-visible { background-color: transparent; }

.wb-object--brain { padding-inline: 0.5rem; }

.wb-brain {
  transform-box: view-box;
  transform-origin: 3300px 2140px;
  animation: wb-float-brain 8s ease-in-out infinite;
}

/* obje kendi kullanici birimlerinde hareket eder: 90 birim ~ 6 CSS px */
@keyframes wb-float-brain {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-90px); }
}



.wb-flow-dot {
  animation: wb-flow 1.6s linear infinite;
}

@keyframes wb-flow {
  0% { transform: translateX(0); opacity: 0; }
  12% { opacity: 1; }
  84% { opacity: 1; }
  100% { transform: translateX(3320px); opacity: 0; }
}

/* mobil menudeki ok isareti bu bolumden geliyor, sinif korunuyor ---------- */

.whyus-arrow {
  display: inline-block;
  transition: transform 160ms cubic-bezier(0.2, 0, 0, 1);
}

/* ------------------------------------------------------------- responsive - */

@media (min-width: 1024px) {
  .whyus-head {
    grid-template-columns: repeat(24, minmax(0, 1fr));
    column-gap: clamp(1.5rem, 3vw, 3rem);
  }

  .whyus-head h2 {
    grid-column: 1 / span 11;
  }

  .whyus-lead {
    grid-column: 13 / span 12;
    padding-top: 0.35rem;
  }

  .whyus-actions {
    grid-column: 1 / span 11;
    align-self: end;
  }

  .whyus-bento {
    grid-template-columns: repeat(24, minmax(0, 1fr));
  }

  .wb-cell--core { grid-column: span 13; height: clamp(560px, 46vw, 660px); }
  .wb-cell--net  { grid-column: span 11; height: clamp(560px, 46vw, 660px); }
  .wb-cell--bill { grid-column: span 9;  height: clamp(500px, 39vw, 580px); }
  .wb-cell--auth { grid-column: span 15; height: clamp(500px, 39vw, 580px); }

  .wb-cell--agent {
    grid-column: span 24;
    grid-template-columns: repeat(24, minmax(0, 1fr));
    grid-template-rows: minmax(0, 1fr) auto;
    height: clamp(430px, 34vw, 520px);
  }

  .wb-cell--agent .wb-text {
    grid-column: 1 / span 7;
    grid-row: 1;
    align-self: center;
    padding-bottom: var(--wb-pad);
  }

  .wb-object--brain { grid-column: 8 / span 17; grid-row: 1; }

  .wb-cell--agent .wb-fig { grid-column: 1 / span 24; grid-row: 2; }
}

@media (max-width: 1023px) {
  .wb-cell--net .wb-object {
    max-height: 420px;
  }

  /* yetki kayitlari tek kolona indiginde kirpilmamali */
  .wb-cell--auth .wb-object {
    overflow: visible;
  }

  .wb-auth-stage {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  }

  .wb-records {
    margin-left: -1.5rem;
  }

  /* tek kolonda akis raylari kirpilir, beyin okunur boyutta kalir */
  .wb-object--brain svg {
    width: 170%;
    margin-left: -35%;
  }
}

@media (max-width: 639px) {
  .wb-auth-stage {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    gap: 1rem;
  }

  .wb-records {
    margin-left: 0;
    width: 100%;
  }

  .wb-records li:first-child,
  .wb-cell--auth:hover .wb-records li:first-child,
  .wb-cell--auth:hover .wb-records li:last-child {
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .wb-cell,
  .wb-object,
    .wb-core,
  .wb-brain,
  .wb-flow-dot,
  .wb-orbit,
  .wb-orbit-icon,
  .wb-cell--agent::after {
    display: none;
  }

  .wb-cell:hover .wb-object,
  .wb-cell:focus-visible .wb-object {
    transform: none;
  }

  .whyus-arrow {
    transition: none;
  }
}

/* Ops konsolu — hero'daki turuncu alanda duran arayuz kesiti.
   Turuncu zemin objenin arkasindaki isik alanidir (DESIGN.md 2.4); kesit
   panelin sag ve alt kenarindan tasip kirpilir (5. bolum: kirpilma devami var
   hissi verir). Panel .hero-blank-panel'de zaten position:relative ve
   overflow:hidden tasiyor, kirpma oradan gelir.

   Yuzey ve radius 8. ve 2.2. bolumlere uyar: light yuzey, kademe 3 golge,
   arayuz kesiti icin 12px radius. */

:root {
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.ops-console {
  --ops-surface: #fff;
  --ops-ink: var(--ink);
  --ops-muted: rgb(11 17 19 / 60%);
  --ops-line: rgb(11 17 19 / 12%);
  --ops-line-strong: rgb(11 17 19 / 28%);
  --ops-grid: var(--ops-line);
  --ops-track: rgb(11 17 19 / 9%);

  position: absolute;
  inset-block-start: 32px;
  inset-inline-start: 24px;
  inline-size: 404px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border-radius: 12px;
  background: var(--ops-surface);
  color: var(--ops-ink);
  box-shadow: 0 24px 64px rgb(11 17 19 / 16%);
  transition: transform 160ms cubic-bezier(0.23, 1, 0.32, 1);
}

.ops-console:hover {
  transform: translateY(-2px);
}

.ops-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.4rem;
  padding: 0.7rem 1rem;
  border-bottom: 1px solid var(--ops-line);
  font-family: var(--font-mono);
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ops-muted);
}

.ops-mark {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  white-space: nowrap;
}

/* Dugum kunyesi kasitli olarak tasar: sag kirpma cizgisi surekli bir metin
   dizisinin uzerine duser, bir etiketin ortasina degil. */
.ops-nodes {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.ops-live {
  inline-size: 6px;
  block-size: 6px;
  border-radius: 50%;
  background: var(--accent);
  animation: ops-pulse 2s cubic-bezier(0.2, 0, 0, 1) infinite;
}

@keyframes ops-pulse {
  0%, 60%, 100% { opacity: 1; transform: scale(1); }
  30% { opacity: 0.35; transform: scale(0.7); }
}

.ops-lead {
  display: grid;
  gap: 0.25rem;
  padding: 0.9rem 1rem 0.55rem;
}

.ops-lead-label {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ops-muted);
}

.ops-lead-value {
  font-size: 2.75rem;
  font-weight: var(--weight-heading);
  line-height: 0.9;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
}

/* Grafik konsolun tam genisligine oturur; yan bosluk birakmaz ki zaman serisi
   sag kenarda kesilirken "devam ediyor" okunsun. */
.ops-plot {
  border-inline-start: 1px solid var(--ops-line-strong);
  border-block-end: 1px solid var(--ops-line-strong);
}

.ops-plot svg {
  display: block;
  inline-size: 100%;
  block-size: auto;
}

/* Etiketler ceyreklerin basina hizalanir; space-between sonuncuyu sag kenara
   iterdi ve kirpma onu ortadan keserdi. */
.ops-axis {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  padding: 0.4rem 1rem 0.85rem;
  border-bottom: 1px solid var(--ops-line);
  font-family: var(--font-mono);
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  white-space: nowrap;
  color: var(--ops-muted);
}

.ops-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin: 0;
  background: var(--ops-line);
  border-bottom: 1px solid var(--ops-line);
}

.ops-cell {
  display: grid;
  gap: 0.3rem;
  min-inline-size: 0;
  padding: 0.7rem 0.75rem 0.6rem;
  background: var(--ops-surface);
}

.ops-cell dt {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--ops-muted);
}

.ops-cell dd {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: var(--weight-strong);
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}

.ops-spark svg {
  display: block;
  inline-size: 100%;
  block-size: auto;
}

.ops-log {
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.ops-log li {
  display: grid;
  grid-template-columns: 4.4rem 3.6rem minmax(0, 1fr) 4.6rem;
  gap: 0.6rem;
  align-items: center;
  padding: 0.42rem 1rem;
  border-bottom: 1px solid var(--ops-line);
  white-space: nowrap;
}

.ops-log time,
.ops-node {
  color: var(--ops-muted);
}

.ops-event {
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: Inter, system-ui, sans-serif;
  font-size: 0.75rem;
  font-weight: var(--weight-body);
  letter-spacing: -0.005em;
}

.ops-log b {
  font-weight: 500;
  text-align: end;
}

/* Mobilde panel tam genislige oturur; konsolun sol kenari basligin sol
   kenariyla ayni kilavuza gelir (11b.3). Deger .hero-primary padding'iyle
   ayni ifadedir, birlikte kaysinlar. */
@media (max-width: 920px) {
  .ops-console {
    inset-block-start: 22px;
    inset-inline-start: clamp(2rem, 3.2vw, 3.5rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  .ops-live {
    animation: none;
  }

  .ops-console {
    transition: none;
  }
}

/* Mobilde panel yatay bir kutuya doner. Onceki 300px'lik alt sinir kesiti
   olcu seridinin ortasindan kesiyordu; bir etiketi ortadan boluyordu, bu
   kirpilma degil bozukluk gibi okunur. Yukseklik kesme cizgisi kayit
   satirlarinin icine dusecek sekilde acilir (11. bolum: kesit mobilde
   kucultulmez, kirpilir). */
@media (max-width: 920px) {
  .hero {
    grid-template-rows: auto minmax(440px, 52vh);
  }
}

/* Urun sayfasi varyanti. Konsol, "Kimler icin uygundur" bolumundeki
   figur hucresine girer; o hucre bugune kadar hero fotografinin grayscale
   kopyasini tasiyordu. Zemin hero'daki gibi turuncudur: ayni obje ailesi
   ayni isik alani uzerinde durur, kesit her iki yerde de ayni sey oldugunu
   soyler. Hucre bir bolum zemini degil, tek bir grid gozudur. */
.product-fit figure.product-fit-console {
  position: relative;
  min-inline-size: 0;
  margin: 0;
  overflow: hidden;
  background: var(--accent);
}

.product-fit-console .ops-console {
  inset-block-start: clamp(28px, 6%, 56px);
  inset-inline-start: clamp(28px, 6%, 56px);
  inline-size: 660px;
}

/* Genis konsolda kayit satiri bir kolon daha tasir. */
.ops-console--wide .ops-log li {
  grid-template-columns: 4.4rem 4.2rem minmax(0, 1fr) 7rem 5rem;
}

@media (max-width: 920px) {
  /* 11. bolum: kesit mobilde kucultulmez. Genis konsol kirpilirsa degerler
     tamamen kaybolurdu, bu yuzden hucre kendi icinde yatay kayar. */
  .product-fit figure.product-fit-console {
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-inline: contain;
  }

  .product-fit-console .ops-console {
    position: static;
    margin: 28px;
  }
}

/* SSS ---------------------------------------------------------------------
   Iki kolon asimetrik. Solda takvim objesi sticky durur, sagda kayit listesi
   akar. Ustundeki .services tam genislikte sekme + kart izgarasi kullaniyor;
   4.1 geregi ayni iskelet tekrar etmiyor.

   Kolon ayraci gercek bir kilavuz cizgisidir (11b.3): liste kolonunun sol
   kenarligi bolum boyunca surekli, iki kap da o cizgiye oturuyor. */

.faq {
  --faq-gap: clamp(2rem, 4vw, 4rem);
  position: relative;
  isolation: isolate;
}

/* 6.3: prosedurel izgara degil, uretilmis doku. Sayfadaki ikinci kullanim. */
.faq::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url("./assets/textures/paper-grain-muted.webp") center / cover no-repeat;
  background-image: image-set(
    url("./assets/textures/paper-grain-muted.avif") type("image/avif"),
    url("./assets/textures/paper-grain-muted.webp") type("image/webp")
  );
  opacity: 0.1;
  pointer-events: none;
}

.faq-inner {
  display: grid;
  grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr);
  gap: 0;
  align-items: start;
}

.faq-rail {
  min-width: 0;
  padding-inline-end: var(--faq-gap);
  position: sticky;
  top: 104px;
}

.faq-rail h2 {
  margin-bottom: 1.25rem;
  font-size: var(--text-h2);
  font-weight: var(--weight-heading);
  letter-spacing: var(--tracking-h2);
  line-height: var(--lh-h2);
  text-wrap: balance;
}

.faq-lead {
  margin-bottom: clamp(1.75rem, 3vw, 2.5rem);
  max-width: 46ch;
  color: var(--muted);
  font-size: var(--text-lead);
  line-height: var(--lh-lead);
  letter-spacing: var(--tracking-lead);
  text-wrap: pretty;
}

/* Kunye rayi — sessiz key/value listesi (7. bolum spec rail).
   Bolumun agirligi sagdaki kayit listesinde; sol ray sakin kalir. */

.faq-help {
  margin: 0;
  display: grid;
  gap: 0;
  border-block-start: 1px solid var(--ink);
}

.faq-help > div {
  display: grid;
  gap: 0.35rem;
  padding-block: clamp(0.9rem, 1.6vw, 1.2rem) 0;
  border-block-end: 1px solid var(--line);
}

.faq-help dt {
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: var(--text-label);
  font-weight: 500;
  letter-spacing: var(--tracking-label);
  line-height: var(--lh-label);
  text-transform: uppercase;
}

.faq-help dd {
  margin: 0;
  font-size: var(--text-h3);
  font-weight: var(--weight-strong);
  letter-spacing: var(--tracking-h3);
  line-height: var(--lh-h3);
}

.faq-help a {
  display: inline-block;
  padding-block: 0.65rem;
  color: inherit;
  text-decoration: none;
  box-shadow: inset 0 -1px 0 var(--secondary-line);
  transition: box-shadow 160ms cubic-bezier(0.2, 0, 0, 1);
}

.faq-help a:hover {
  box-shadow: inset 0 -2px 0 var(--accent);
}

.faq-help a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Kayit listesi ----------------------------------------------------------- */

.faq-list {
  min-width: 0;
  border-inline-start: 1px solid var(--line);
  border-block-start: 1px solid var(--ink);
}

/* 7. bolum akordiyon: satir basina 1px ayirici, acik satir dolgu alir. */
.faq-item {
  position: relative;
  border-block-end: 1px solid var(--line);
  transition: background-color 160ms cubic-bezier(0.2, 0, 0, 1);
}

.faq-item::before {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: -1px;
  border-inline-start: 2px solid transparent;
  transition: border-color 160ms cubic-bezier(0.2, 0, 0, 1);
  pointer-events: none;
}

.faq-item[open] {
  background: var(--secondary-tint);
}

.faq-item[open]::before {
  border-inline-start-color: var(--accent);
}

.faq-item summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 1.5rem;
  min-height: 44px;
  padding-block: clamp(1rem, 1.8vw, 1.35rem);
  padding-inline: var(--faq-gap) clamp(0.5rem, 1.4vw, 1rem);
  cursor: pointer;
  list-style: none;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-q {
  font-size: var(--text-h3);
  font-weight: var(--weight-strong);
  letter-spacing: var(--tracking-h3);
  line-height: var(--lh-h3);
  text-wrap: balance;
}

.faq-item summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.faq-item summary:active .faq-sign {
  transform: scale(0.94);
}

.faq-item[open] summary:active .faq-sign {
  transform: rotate(180deg) scale(0.94);
}

.faq-sign {
  display: grid;
  place-items: center;
  inline-size: 28px;
  block-size: 28px;
  border: 1px solid var(--line);
  border-radius: 50%;
  transition:
    border-color 160ms cubic-bezier(0.2, 0, 0, 1),
    transform 240ms cubic-bezier(0.2, 0, 0, 1);
}

.faq-sign svg {
  inline-size: 14px;
  block-size: 14px;
}

.faq-sign-bar {
  fill: none;
  stroke: var(--ink);
  stroke-width: 1.5;
  stroke-linecap: round;
}

/* Ac/kapa durumu ikonun kendisiyle okunur: arti eksiye doner. */
.faq-sign-bar--v {
  transform-origin: 50% 50%;
  transition: transform 240ms cubic-bezier(0.2, 0, 0, 1);
}

.faq-item[open] .faq-sign {
  border-color: var(--accent);
  transform: rotate(180deg);
}

.faq-item[open] .faq-sign-bar--v {
  transform: scaleY(0);
}

.faq-item summary:hover .faq-sign {
  border-color: var(--accent);
}

.faq-item summary:hover .faq-sign-bar {
  stroke: var(--accent);
}

/* 2.5: metin rengi turuncuya donmez — turuncu govde metninde 4.5:1'i saglamaz.
   Hover isareti kap ve ikon uzerinden verilir. */
.faq-item:has(summary:hover)::before {
  border-inline-start-color: var(--secondary-line);
}

.faq-item[open]:has(summary:hover)::before {
  border-inline-start-color: var(--accent);
}

.faq-a {
  padding-block: 0 clamp(1.25rem, 2.2vw, 1.75rem);
  padding-inline: var(--faq-gap) clamp(2rem, 6vw, 5rem);
}

.faq-a p {
  max-width: 62ch;
}

.faq-a p {
  margin-bottom: 0;
  color: var(--muted);
  line-height: var(--lh-body);
  text-wrap: pretty;
}

.faq-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1rem;
  margin-inline-end: 1.5rem;
  min-height: 44px;
  color: var(--ink);
  font-size: var(--text-sm);
  font-weight: var(--weight-strong);
  text-decoration: none;
  box-shadow: inset 0 -1px 0 var(--secondary-line);
  transition: color 160ms cubic-bezier(0.2, 0, 0, 1), box-shadow 160ms cubic-bezier(0.2, 0, 0, 1);
}

.faq-link:hover {
  box-shadow: inset 0 -2px 0 var(--accent);
}

.faq-link:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.faq-arrow {
  display: inline-block;
  transition: transform 160ms cubic-bezier(0.2, 0, 0, 1);
}

.faq-link:hover .faq-arrow {
  transform: translateX(4px);
}

@media (max-width: 1024px) {
  .faq-inner {
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(2rem, 5vw, 3rem);
  }

  .faq-rail {
    position: static;
    padding-inline-end: 0;
  }

  .faq-list {
    border-inline-start: 0;
  }

  .faq-item summary,
  .faq-a {
    padding-inline-start: 0;
  }

  .faq-item::before {
    inset-inline-start: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .faq-item,
  .faq-item::before,
  .faq-sign,
  .faq-sign-bar--v,
  .faq-link,
  .faq-arrow,
  .faq-help a {
    transition: none;
  }
}

/* Uzun kolon ayraçları boyanmaz; boşluk ve yatay kurallar iskeleti taşır. */
.hero-primary,
.whyus-bento,
.wb-cell,
.tariff-cards,
.tariff-card,
.faq-list,
.ab-page .ab-legal-block li ul,
.online-page .online-bank-wall li + li,
.product-hero-copy,
.product-fit > div,
.product-operation article + article,
.product-capability-grid li:nth-child(odd) {
  border-inline-color: transparent !important;
}

.whyus-bento,
.tariff-cards,
.online-page .online-bank-wall,
.product-capability-grid,
.product-operation {
  column-gap: var(--block-gap);
}

.faq-inner {
  gap: var(--faq-gap);
}

.faq-rail {
  padding-inline-end: 0;
}