/* ==========================================================================
   1. TOKENS
   ========================================================================== */
:root {
  --blue: #1360ef; /* from the logo */
  --blue-d: #0b3fa8;
  --blue-50: #edf3fe;
  --blue-l: #7fa8ff; /* --blue's light tint, for text on navy */
  --navy: #071733; /* headings */
  --slate: #5a6a85; /* body text */
  --line: #e1e8f5;
  --mist: #f6f8fd;
  --white: #ffffff;
  --flag: #e2591f; /* flagged */
  --pass: #0c9f6e; /* cleared */

  --display: "Sora", -apple-system, "Segoe UI", system-ui, sans-serif; /* şablonun başlık fontu (2026-08-29) */
  --body: "Inter", -apple-system, "Segoe UI", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --pad: clamp(20px, 5vw, 72px);
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --maxw: 1220px;
  --nav-h: 84px; /* .nav yüksekliği; sticky'ye geçince 68'e iner */
  --bleed-max: 1800px; /* viewport genişliğindeki bant ve bentoların tavanı (ultra geniş ekranlar) */
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
}
body {
  background: var(--white);
  color: var(--navy);
  font-family: var(--body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
::selection {
  background: var(--blue);
  color: #fff;
}
a {
  color: inherit;
  text-decoration: none;
}
:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
  border-radius: 3px;
}
img,
svg {
  display: block;
}

.wrap {
  max-width: var(--maxw);
  margin: 0 auto;
  padding-inline: var(--pad);
}

/* ==========================================================================
   2. TYPOGRAPHY
   ========================================================================== */
/* Almanca bileşik sözcükler (Transaktionsüberwachung, Kundenannahmeverfahren)
   tek parça olarak kaba sığmıyor, ve anywhere bunu çözüyor: break-word'ün
   aksine min-content genişliğini de düşürür, yani sözcük artık bir grid
   kolonunu kabından geniş hale şişiremez (.mod kartları buna takılıyordu).
   Tire çizmediği için sıradan metne de dokunmuyor, sözcüğü yalnızca tek başına
   satıra sığmadığında kırıyor.

   hyphens: auto ise buradan kaldırıldı (2026-09-10). Kural bütün dillerdeki
   bütün paragraflara uygulandığı için sıradan cümleyi de ortadan bölüyordu:
   İngilizce hero açıklaması "TruvaLI au-tomates the operational load" diye
   okunuyordu. Tireleme artık yalnızca gerçekten dar kaplarda, o kabın kendi
   kuralında duruyor; bkz. .bcard__cap. */
h1,
h2,
h3,
h4,
p,
li,
dt,
dd,
figcaption,
blockquote {
  hyphens: manual;
  overflow-wrap: anywhere;
}
.eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--blue);
  font-weight: 500;
}
.eyebrow--mute {
  color: var(--slate);
}

.h-giant {
  font-family: var(--display);
  font-weight: 800;
  font-size: 60px;
  letter-spacing: -0.038em;
  line-height: 1;
}
.h-big {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.9rem, 4.4vw, 3.4rem);
  letter-spacing: -0.03em;
  line-height: 1.1;
}
.h-mid {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.25rem, 2.3vw, 1.75rem);
  letter-spacing: -0.02em;
  line-height: 1.2;
}
.lead {
  font-size: clamp(1rem, 1.35vw, 1.14rem);
  color: var(--slate);
  max-width: 56ch;
}
.small {
  font-size: 14px;
  color: var(--slate);
}

/* ==========================================================================
   3. BUTTONS
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 12px 22px;
  border-radius: 10px;
  font-family: var(--body);
  font-size: 14px;
  font-weight: 600;
  background: var(--blue);
  color: #fff;
  border: 1px solid var(--blue);
  transition:
    background 0.25s var(--ease),
    transform 0.25s var(--ease),
    box-shadow 0.25s;
  box-shadow: 0 1px 2px rgba(7, 23, 51, 0.06);
}
.btn:hover {
  background: var(--blue-d);
  border-color: var(--blue-d);
  transform: translateY(-1px);
  box-shadow: 0 8px 22px rgba(19, 96, 239, 0.24);
}
.btn--line {
  background: #fff;
  color: var(--navy);
  border-color: var(--line);
  box-shadow: none;
}
.btn--line:hover {
  background: var(--mist);
  border-color: #c9d6ee;
  color: var(--navy);
  box-shadow: none;
}
.btn--sm {
  padding: 9px 16px;
  font-size: 13px;
}
.btn svg {
  width: 14px;
  height: 14px;
}

/* ==========================================================================
   4. NAV
   ========================================================================== */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 200;
  height: 84px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-inline: var(--pad);
  background: rgba(255, 255, 255, 0);
  border-bottom: 1px solid transparent;
  transition:
    background 0.35s var(--ease),
    height 0.35s var(--ease),
    border-color 0.35s var(--ease),
    backdrop-filter 0.35s;
}
:root.is-stuck-nav {
  --nav-h: 68px;
}
.nav.is-stuck {
  height: 68px;
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: blur(18px) saturate(180%);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  border-bottom-color: var(--line);
}
/* Logo 45px yüksekliktedir ve nav içinde dikey ortalanır (84px'te 19.5px,
   yapışık 68px'te 11.5px üst/alt boşluk). Görsel <img>; eski kurallar svg'yi
   hedefleyip hiç uygulanmıyordu, logo height="50" ile ve -10px kaydırık duruyordu. */
.nav__logo {
  display: flex;
  align-items: center;
  line-height: 0;
}
/* display verilmez: .logo-mark--light'ın display:none'ı daha düşük özgüllükte
   kalır ve ezilirdi; flex öğesi zaten blok gibi davranır. */
.nav__logo img {
  height: 45px;
  width: auto;
}
@media (max-width: 520px) {
  .nav__logo img {
    height: 36px;
  }
}

/* Koyu hero görünürken JS .nav--dark ekler: metin ve logo açık renge döner,
   yapışık durumda beyaz cam yerine lacivert cam kullanılır. */
.logo-mark--light {
  display: none;
}
.nav--dark .logo-mark {
  display: none;
}
.nav--dark .logo-mark--light {
  display: block;
}
.nav--dark .menu__btn {
  color: rgba(255, 255, 255, 0.78);
}
.nav--dark .menu__btn:hover,
.nav--dark .menu__item.is-open .menu__btn {
  color: #fff;
  background: rgba(255, 255, 255, 0.09);
}
.nav--dark .langsw__btn,
.nav--dark .burger {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.86);
}
.nav--dark .langsw__btn:hover {
  border-color: rgba(255, 255, 255, 0.45);
  color: #fff;
}
.nav--dark .burger svg {
  stroke: #fff;
}
.nav--dark.is-stuck {
  background: rgba(7, 23, 51, 0.84);
  border-bottom-color: rgba(255, 255, 255, 0.1);
}

/* reading progress */
.readbar {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  width: 100%;
  z-index: 201;
  background: var(--blue);
  transform-origin: 0 50%;
  transform: scaleX(0);
}

/* ==========================================================================
   5. HERO — koyu zemin, ortalanmış metin, altında bento kart ızgarası
   Aynı isimli .tick kuralları ticker kartında yeniden kullanılır; kart içi
   renk farkları .bcard--live altında verilir.
   ========================================================================== */
.hero {
  position: relative;
  padding: 176px 0 48px;
  overflow: hidden;
  color: #fff;
  background: linear-gradient(180deg, #040d22 0%, var(--navy) 42%, #08214a 100%);
  border-radius: 0 0 28px 28px;
}
/* iki renkli ışıma: soldan marka mavisi, sağdan "cleared" yeşilinin turkuazı */
.hero__glow {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(38% 34% at 27% 74%, rgba(19, 96, 239, 0.62) 0%, transparent 70%),
    radial-gradient(30% 30% at 74% 66%, rgba(12, 159, 110, 0.38) 0%, transparent 70%),
    radial-gradient(70% 36% at 50% 104%, rgba(19, 96, 239, 0.22) 0%, transparent 70%);
}
.hero__grid {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px);
  background-size: 76px 76px;
  mask-image: radial-gradient(70% 46% at 50% 18%, #000 0%, transparent 78%);
  -webkit-mask-image: radial-gradient(70% 46% at 50% 18%, #000 0%, transparent 78%);
}
.hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 22px;
  justify-items: center;
  text-align: center;
}
.hero .eyebrow {
  color: var(--blue-l);
}
.hero__title {
  /* min() olmadan 21ch dar ekranda kapsayıcıdan geniş kalıyor ve başlık
     ortalandığı için sağa kaymış görünüyordu. */
  max-width: min(20ch, 100%);
  font-weight: 600;
  /* Başlık tek cümle ve dört dilde 47-54 karakter arasında. Satır sonunu
     tarayıcı seçiyor ve balance iki satırı eşitliyor; sabit bir <br> en uzun
     dilde kutudan taşıyordu. */
  text-wrap: balance;
  /* Alt sınır dar ekran için: 61 karakterlik başlık 390px'te üç satıra yayılır
     ve okunur bir puntoda kalır. Eskiden 1.7rem'de dört satıra düşüyordu. */
  font-size: clamp(2.1rem, 8.2vw, 4rem);
  line-height: 1.04;
  letter-spacing: -0.035em;
  color: #fff;
}
/* Her yarı masaüstünde tek satırda kalır: tasarım iki satırlık bir başlık.
   Mobilde bu kural ve <br> birlikte kalkar, metin üç satıra doğal akar. */
.hero__title em {
  color: var(--blue-l);
  font-style: normal;
}
.hero .lead {
  max-width: 62ch;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.72);
}
.hero .lead b {
  color: #fff;
}
.hero__cta {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 6px;
}
/* koyu zemin için çerçeveli buton — .btn--line beyaz zemin varsayar */
.btn--ghost {
  background: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, 0.28);
  box-shadow: none;
}
.btn--ghost:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.5);
  color: #fff;
  box-shadow: none;
}

/* --- bento ızgara: beş sütun, alttan hizalı, sütun yükseklikleri farklı --- */
.bento {
  position: relative;
  z-index: 1;
  max-width: 1400px;
  margin: clamp(48px, 7vw, 96px) auto 0;
  padding-inline: var(--pad);
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  align-items: end;
}
.bento__col {
  display: grid;
  gap: 12px;
  min-width: 0;
}
.bento__cell {
  position: relative;
}
/* dikey marka filigranı: canlı akış kartının içinde, sağ-alt köşeye oturur */
.bento__mark {
  position: absolute;
  z-index: 2;
  right: 3px;
  bottom: 14px;
  opacity: 0.85;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(2.6rem, 4.6vw, 6rem);
  line-height: 1;
  letter-spacing: -0.04em;
  background: linear-gradient(0deg, var(--blue) 0%, var(--blue-l) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  pointer-events: none;
  user-select: none;
}

.bcard {
  position: relative;
  overflow: hidden;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.05);
  color: #fff;
  box-shadow: 0 30px 70px -34px rgba(0, 0, 0, 0.7);
}
.bcard__cap {
  position: absolute;
  left: 22px;
  right: 22px;
  bottom: 20px;
  margin: 0;
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(1rem, 1.35vw, 1.4rem);
  line-height: 1.25;
  letter-spacing: -0.02em;
  /* Almanca bileşik sözcükler (Transaktionsüberwachung) tek başına karttan taşar */
  hyphens: auto;
  overflow-wrap: break-word;
}
.bcard__cap--top {
  top: 22px;
  bottom: auto;
}
.bcard__cap small {
  display: block;
  margin-top: 7px;
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.64);
}
.bcard__label {
  position: absolute;
  top: 18px;
  left: 20px;
  right: 20px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
}
.bcard__label i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--pass);
  box-shadow: 0 0 0 4px rgba(12, 159, 110, 0.28);
  animation: pulse-dot 1.8s ease-in-out infinite;
}
@keyframes pulse-dot {
  50% {
    box-shadow: 0 0 0 7px rgba(12, 159, 110, 0.08);
  }
}
.bcard__art {
  position: absolute;
  pointer-events: none;
}

/* sütun 1 — yaptırım taraması: radar halkaları */
.bcard--screen {
  aspect-ratio: 365 / 569;
  background: linear-gradient(205deg, #2b74ff 0%, #1360ef 30%, #0b3fa8 62%, #071733 100%);
}
.bcard--screen .bcard__art {
  top: -14%;
  right: -34%;
  width: 124%;
  fill: none;
  stroke: rgba(255, 255, 255, 0.2);
  stroke-width: 0.8;
}
.bcard--screen .bcard__art .hit {
  fill: var(--flag);
  stroke: none;
  filter: drop-shadow(0 0 6px rgba(226, 89, 31, 0.9));
}
.bcard--screen .bcard__art .sweep {
  fill: rgba(255, 255, 255, 0.09);
  stroke: none;
}

/* sütun 2 — canlı akış kartı + oran kartı */
.bcard--live {
  aspect-ratio: 365 / 499;
  background: linear-gradient(180deg, #0c2352 0%, #071733 100%);
}
.bcard__feed {
  position: absolute;
  inset: 50px 12px 0;
  overflow: hidden;
  mask-image: linear-gradient(180deg, transparent, #000 14%, #000 82%, transparent);
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 14%, #000 82%, transparent);
}
.ticker__rail {
  display: grid;
  width: 100%;
  will-change: transform;
  animation: rail-up 46s linear infinite;
}
@keyframes rail-up {
  to {
    transform: translate3d(0, -50%, 0);
  }
}
.bcard--live .tick {
  margin-bottom: 8px;
  gap: 6px;
  padding: 7px 8px;
  font-size: 10px;
  border-radius: 10px;
  border-color: rgba(255, 255, 255, 0.09);
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.6);
  overflow: hidden;
}
.bcard--live .tick b {
  color: #fff;
}
/* dar kartta yalnızca kimlik ve tutar kalır; durum, renk ve noktayla okunur */
.bcard--live .tick s,
.bcard--live .tick em {
  display: none;
}
.bcard--live .tick.is-flag {
  border-color: rgba(226, 89, 31, 0.42);
  background: rgba(226, 89, 31, 0.14);
  color: #ffb08c;
}
.bcard--live .tick.is-flag b {
  color: #ffb08c;
}
.bcard--stat {
  aspect-ratio: 365 / 275;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 22px;
  background: linear-gradient(129deg, #3d7dff 0%, #1360ef 48%, #0b3fa8 100%);
}
.bcard--stat b {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(2rem, 3.4vw, 3.6rem);
  line-height: 0.95;
  letter-spacing: -0.045em;
}
.bcard--stat > span {
  display: block;
  margin-top: 9px;
  max-width: 18ch;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.82);
}

/* sütun 3 — gecikme kartı + çizgili izleme kartı */
.bcard--latency {
  aspect-ratio: 365 / 274;
  padding: 20px 22px;
}
.bcard--latency b {
  display: block;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.3rem, 2vw, 2rem);
  letter-spacing: -0.035em;
  line-height: 1;
}
.bcard--latency span {
  display: block;
  margin-top: 6px;
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.62);
}
.bcard--latency .bcard__art {
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 46%;
  fill: none;
  stroke: var(--blue-l);
  stroke-width: 1.6;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.bcard--latency .bcard__art .fill {
  fill: url(#heroSparkFill);
  stroke: none;
}
.bcard--lines {
  aspect-ratio: 365 / 376;
  background:
    repeating-linear-gradient(112deg, transparent 0 15px, rgba(255, 255, 255, 0.075) 15px 17px),
    radial-gradient(60% 50% at 88% 6%, rgba(127, 168, 255, 0.45) 0%, transparent 70%),
    linear-gradient(170deg, #1a5ee0 0%, #0b3fa8 45%, #071733 100%);
}

/* sütun 4 — kimlik doğrulama + modül çipleri */
.bcard--id {
  aspect-ratio: 365 / 499;
  background:
    radial-gradient(70% 40% at 50% 0%, rgba(61, 125, 255, 0.5) 0%, transparent 70%),
    linear-gradient(180deg, #123a86 0%, #0b2a66 50%, #071733 100%);
}
.bcard--id .bcard__art {
  top: 14%;
  left: 12%;
  width: 76%;
  fill: none;
  stroke: rgba(255, 255, 255, 0.72);
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.bcard--id .bcard__art .frame {
  stroke: var(--blue-l);
  stroke-width: 2.2;
}
.bcard--id .bcard__art .ok {
  fill: var(--pass);
  stroke: none;
}
.bcard--id .bcard__art .ok-tick {
  stroke: #fff;
  stroke-width: 2.4;
}
.bcard--chips {
  aspect-ratio: 365 / 228;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-end;
  gap: 6px;
  padding: 15px;
}
.bcard--chips span {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: rgba(255, 255, 255, 0.82);
  white-space: nowrap;
}
.bcard--chips span.is-on {
  border-color: transparent;
  background: var(--blue);
  color: #fff;
}

/* sütun 5 — agentic AI: turkuazdan maviye, altta eğik çizgi deseni */
.bcard--agent {
  aspect-ratio: 365 / 564;
  background: linear-gradient(160deg, #0fae8a 0%, #1497c9 45%, #1360ef 100%);
}
.bcard__slashes {
  position: absolute;
  left: 22px;
  right: 22px;
  bottom: 22px;
  height: 44%;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='30'%3E%3Cpath d='M9 23L25 7' stroke='%23fff' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") 0 0 / 34px 30px repeat;
  mask-image: linear-gradient(0deg, #000 55%, transparent 100%);
  -webkit-mask-image: linear-gradient(0deg, #000 55%, transparent 100%);
}

@media (max-width: 1100px) {
  .bento {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .bento__col--1,
  .bento__col--5 {
    display: none;
  }
}
@media (max-width: 680px) {
  .hero {
    padding-top: 128px;
    border-radius: 0 0 20px 20px;
  }
  .bento {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  .bento__col {
    gap: 10px;
  }
  .bento__col--3 {
    display: none;
  }
  .bento__mark {
    font-size: 2.6rem;
  }
  .bcard {
    border-radius: 18px;
  }
  .bcard__cap {
    left: 16px;
    right: 16px;
    bottom: 14px;
  }
  .bcard__cap--top {
    top: 16px;
  }
  .bcard__label {
    top: 14px;
    left: 16px;
  }
  .bcard__feed {
    inset: 42px 10px 0;
  }
  .bcard--stat,
  .bcard--latency,
  .bcard--chips {
    padding: 16px;
  }
  /* overflow:hidden oranlı kutunun içerik tabanlı en küçük yüksekliğini sıfırlar; çipler sığsın */
  .bcard--chips {
    aspect-ratio: auto;
    min-height: 120px;
  }
  .bcard--chips span {
    font-size: 9.5px;
    padding: 5px 8px;
  }
}

.tick {
  display: flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--slate);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px 13px;
}
.tick i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--pass);
  flex: none;
}
.tick.is-flag i {
  background: var(--flag);
}
.tick.is-flag {
  border-color: rgba(226, 89, 31, 0.34);
  color: var(--flag);
  background: #fff7f3;
}
.tick b {
  color: var(--navy);
  font-weight: 500;
}
.tick.is-flag b {
  color: var(--flag);
}

/* ==========================================================================
   6. STEP DOTS — shared progress marks (blog carousel)
   ========================================================================== */
.stepdots {
  display: flex;
  gap: 7px;
  align-items: center;
  padding-top: 8px;
}
.stepdots i {
  width: 26px;
  height: 3px;
  border-radius: 2px;
  background: var(--line);
  transition:
    background 0.35s var(--ease),
    width 0.35s var(--ease);
}
.stepdots i.is-on {
  background: var(--blue);
  width: 40px;
}

/* ==========================================================================
   9. VERIFIED BADGE — demo thank-you page
   ========================================================================== */
.verified {
  display: grid;
  place-items: center;
  gap: 9px;
  padding: 14px 0 4px;
  text-align: center;
}
.verified__badge {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--blue);
  box-shadow: 0 0 0 8px rgba(19, 96, 239, 0.12);
}
.verified__badge svg {
  width: 28px;
  height: 28px;
  stroke: #fff;
  stroke-width: 2.6;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.verified b {
  font-family: var(--display);
  font-size: 18px;
  font-weight: 700;
  color: var(--navy);
}

/* ==========================================================================
   11. ALONGSIDE THE COMPLIANCE OFFICER  (prompt → rule / report)
   ========================================================================== */
.stats {
  /* Komşu bantlarla (agentic, value, on-premise) aynı ritim. Eskiden 15vh ve
     kendine ait bir border-block'u vardı; iki komşusunun da olmadığı o çizgi
     bölümü sayfadan kopuk gösteriyordu. */
  padding: 12vh 0;
  background: var(--mist);
}
.copilot__lead {
  margin-top: 18px;
  max-width: 62ch;
}

.copilot__demos {
  display: grid;
  gap: 18px;
  margin-top: 52px;
  grid-template-columns: repeat(auto-fit, minmax(min(330px, 100%), 1fr));
}
/* Sayfanın diğer resimli kartlarıyla aynı dil: görsel, üstünde koyu geçiş,
   25px köşe, sağ altta beyaz halkalı yuvarlak ok (bkz. .sanc-box, .value-box,
   .reg-card). Önceki hâli ince çerçeveli beyaz bir kutuydu ve bölüm bu yüzden
   sayfanın geri kalanına ait görünmüyordu. */
.cop {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 30px;
  min-height: 430px;
  padding: 26px 26px 78px;
  border-radius: 25px;
  color: #fff;
  background: var(--navy);
  transition:
    transform 0.3s var(--ease),
    box-shadow 0.3s;
}
.cop:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 50px rgba(7, 23, 51, 0.22);
}
.cop__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cop::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(7, 23, 51, 0.52) 0%, rgba(7, 23, 51, 0.78) 30%, rgba(7, 23, 51, 0.92) 62%);
}
.cop__body {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 14px;
}
.cop__tag {
  position: relative;
  z-index: 1;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
}
.cop__who {
  display: block;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  margin-bottom: 8px;
}
.cop__who--ai {
  color: #8fb6ff;
}

/* The sentence the visitor typed: it should read as genuinely typed. */
.cop__prompt {
  background: rgba(255, 255, 255, 0.09);
  border: 1px solid rgba(255, 255, 255, 0.17);
  border-radius: 14px;
  padding: 16px 18px;
}
.cop__prompt p {
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.6;
  color: #fff;
}
.cop__prompt p::before {
  content: "\201C";
}
.cop__prompt p::after {
  content: "\201D";
}

.cop__flow {
  display: grid;
  place-items: center;
}
.cop__flow svg {
  width: 20px;
  height: 20px;
  stroke: #8fb6ff;
  stroke-width: 2;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.8;
}

.cop__out ul {
  list-style: none;
  display: grid;
  gap: 10px;
}
.cop__out li {
  position: relative;
  padding-left: 24px;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.82);
  line-height: 1.5;
}
.cop__out li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 5px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.32);
}
.cop__out li::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 9px;
  width: 6px;
  height: 3px;
  border-left: 1.6px solid #fff;
  border-bottom: 1.6px solid #fff;
  transform: rotate(-45deg);
}
/* .value-box__go ile aynı: koyu kartın üstünde beyaz halkalı koyu daire. */
.cop__go {
  position: absolute;
  right: 18px;
  bottom: 18px;
  z-index: 2;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--navy);
  color: #fff;
  box-shadow: 0 0 0 6px #fff;
  transition:
    transform 0.25s var(--ease),
    background 0.25s;
}
.cop__go:hover {
  transform: scale(1.07);
  background: var(--blue);
}
.cop__go svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.copilot__notes {
  display: grid;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 25px;
  overflow: hidden;
  margin-top: 18px;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
}
.note {
  background: #fff;
  padding: 28px 26px;
  display: grid;
  gap: 9px;
  align-content: start;
}
.note h3 {
  font-family: var(--display);
  font-size: 1.04rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--navy);
}
.note p {
  font-size: 14px;
  color: var(--slate);
  line-height: 1.55;
}

@media (max-width: 720px) {
  .copilot__demos {
    margin-top: 36px;
  }
  .cop {
    min-height: 380px;
    padding: 22px 22px 74px;
  }
}

/* ==========================================================================
   12. PRICING + CTA + FOOTER
   ========================================================================== */
.pricing {
  padding: 5vh 0;
}
.price__grid {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  margin-top: 44px;
}
.price {
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 30px;
  display: grid;
  gap: 14px;
  align-content: start;
  background: #fff;
  transition:
    border-color 0.3s,
    box-shadow 0.3s,
    transform 0.3s var(--ease);
}
.price:hover {
  border-color: #c4d5f5;
  box-shadow: 0 14px 40px rgba(7, 23, 51, 0.07);
  transform: translateY(-3px);
}
.price--hero {
  border-color: var(--blue);
  box-shadow: 0 14px 44px rgba(19, 96, 239, 0.14);
}
.price h3 {
  font-family: var(--display);
  font-size: 1.06rem;
  font-weight: 700;
}
.price__amt {
  font-family: var(--display);
  font-size: 2.1rem;
  font-weight: 800;
  letter-spacing: -0.035em;
  color: var(--navy);
}
.price__amt span {
  font-size: 0.86rem;
  font-weight: 500;
  color: var(--slate);
  letter-spacing: 0;
}
.price ul {
  list-style: none;
  display: grid;
  gap: 8px;
  font-size: 13.5px;
  color: var(--slate);
}
.price li {
  display: flex;
  gap: 9px;
  align-items: flex-start;
}
.price li::before {
  content: "+";
  color: var(--blue);
  font-family: var(--mono);
  flex: none;
}

footer {
  border-top: 1px solid var(--line);
  padding: 46px 0;
}
/* Footer'ın üst şeridi: solda marka, sağda LinkedIn. Site haritası altta tam
   genişliği alsın diye ayrıldı; sütunları daraltan marka bloğu kalkınca her
   menü bağlantısı görünebiliyor, ilk beşi değil. */
/* Site haritası sayfanın son bandı: içerik sütunundan daha geniştir, çünkü
   dört panelin 68 bağlantısı 1220px'e sığdırıldığında etiketler üç satıra
   sarıyor ve footer iki katına çıkıyordu. Ana sayfadaki tam genişlik bantlarla
   aynı tavanı (--bleed-max) kullanır. */
.foot__top,
.foot,
.foot__bottom {
  max-width: var(--bleed-max);
}
.foot__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 26px 40px;
  padding-bottom: 30px;
  border-bottom: 1px solid var(--line);
}
.foot__brand {
  display: grid;
  gap: 12px;
  max-width: 52ch;
}
.foot__brand > img {
  height: 42px;
  width: auto;
  justify-self: start;
}
.foot__tagline {
  font-size: 13px;
  line-height: 1.6;
  color: var(--slate);
}
/* İletişim sayfasındaki ofis satırının bayrağı. Footer'ın bayrak sırası ve adres
   değiştiricisi 2026-08-30'da kaldırıldı; .flag'in kendisi burada yaşamayı sürdürür. */
.flag {
  width: 32px;
  height: 30px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--mist);
}
.foot__li {
  width: fit-content;
}
.foot__li svg {
  height: 16px;
  width: 16px;
  fill: currentColor;
}
/* Site haritası. Sütun genişliği panelin taşıdığı bağlantı sayısını izler:
   Çözümler diğerlerinin iki katını taşıdığı için iki kat yer alır ve
   gruplarını iki alt sütuna akıtır. */
.foot {
  display: grid;
  grid-template-columns:
    minmax(0, 1.3fr) minmax(0, 3fr)
    minmax(0, 1fr) minmax(0, 1fr);
  gap: 0 32px;
  /* align-items: start değil: sütunlar aynı boya uzasın ki aralarındaki dikey
     hatlar bağlantı sayısına göre kesik kesik bitmesin. */
  align-items: stretch;
  margin-top: 32px;
}
.foot__col + .foot__col {
  border-left: 1px solid var(--line);
  padding-left: 32px;
}
.foot__col-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 13px;
  font-weight: 700;
  color: var(--navy);
}
.foot__groups {
  display: grid;
  gap: 20px;
  margin-top: 16px;
}
/* Çözümler diğer üç panelin toplamı kadar bağlantı taşıyor. Tek sütunda
   kalırsa footer'ın boyunu iki katına çıkarıyor, o yüzden üç alt sütuna akar. */
.foot__col--solutions .foot__groups {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px 28px;
}
.foot__group-title {
  margin-bottom: 10px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--slate);
}
.foot__col-links {
  display: grid;
  gap: 8px;
}
.foot__col-links a {
  font-size: 13px;
  line-height: 1.4;
  color: var(--slate);
}
.foot__col-links a:hover {
  color: var(--blue);
}
/* Açma düğmesi yalnızca dar ekranda var. display:none onu erişilebilirlik
   ağacından da çıkarır, böylece masaüstünde başlık düz bir başlık kalır. */
.foot__col-toggle {
  all: unset;
  display: none;
}
.foot__links {
  display: flex;
  gap: 22px;
  font-size: 13px;
  color: var(--slate);
  flex-wrap: wrap;
}
.foot__links a:hover {
  color: var(--blue);
}
.foot__bottom {
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 13px;
  color: var(--slate);
}
@media (max-width: 1180px) {
  .foot {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 34px 40px;
  }
  .foot__col--solutions .foot__groups {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .foot__col + .foot__col {
    border-left: 0;
    padding-left: 0;
  }
}
@media (max-width: 720px) {
  .foot {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .foot__col {
    border-top: 1px solid var(--line);
  }
  .foot__col-title {
    padding: 15px 0;
    cursor: pointer;
  }
  .foot__col-toggle {
    display: block;
    position: relative;
    flex: none;
    width: 20px;
    height: 20px;
    cursor: pointer;
  }
  .foot__col-toggle::before,
  .foot__col-toggle::after {
    content: "";
    position: absolute;
    inset: calc(50% - 1px) 0 auto 0;
    height: 1.5px;
    border-radius: 2px;
    background: var(--navy);
    transition: transform 0.2s ease;
  }
  .foot__col-toggle::after {
    transform: rotate(90deg);
  }
  .foot__col.is-open .foot__col-toggle::after {
    transform: rotate(0);
  }
  .foot__groups {
    display: none;
    margin-top: 0;
    padding-bottom: 18px;
  }
  .foot__col.is-open .foot__groups {
    display: grid;
  }
  .foot__col--solutions .foot__groups {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   4b. MEGA MENU
   Hover + keyboard on desktop, a <details>-based drawer on mobile.
   ========================================================================== */
.menu {
  display: flex;
  gap: 2px;
  list-style: none;
}
.menu__btn {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  padding: 9px 14px;
  border: 0;
  border-radius: 9px;
  background: none;
  font-family: var(--body);
  font-size: 14px;
  font-weight: 500;
  color: var(--slate);
  transition:
    color 0.2s,
    background 0.2s;
}
.menu__btn svg {
  width: 10px;
  height: 10px;
  stroke: currentColor;
  stroke-width: 2.6;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.25s var(--ease);
}
.menu__btn:hover,
.menu__item.is-open .menu__btn {
  color: var(--navy);
  background: var(--mist);
}
.menu__item.is-open .menu__btn svg {
  transform: rotate(180deg);
}

.mega {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  /* Kutu görünen kartla aynı genişlikte olmalı. left/right ile viewport'u
     kaplayınca kartın iki yanında görünmeyen ama fareyi yakalayan birer şerit
     kalıyordu (1680px'de 230px, ultra geniş ekranda 670px): fare menünün
     sağına ya da soluna çıktığında mouseleave hiç tetiklenmiyor, panel açık
     kalıyordu. Mutlak konumlu bir kutuda left/right ikisi de verilip genişlik
     sabitlenince margin-inline:auto onu ortalar. */
  width: min(100% - 2 * var(--pad), var(--maxw));
  margin-inline: auto;
  padding: 8px 0 20px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  pointer-events: none;
  transition:
    opacity 0.22s var(--ease),
    transform 0.22s var(--ease),
    visibility 0.22s;
}
.mega.is-open {
  opacity: 1;
  visibility: visible;
  transform: none;
  pointer-events: auto;
}
.mega__inner {
  max-width: var(--maxw);
  margin: 0 auto;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 30px 70px rgba(7, 23, 51, 0.14);
}
.mega__panel {
  display: none;
  grid-template-columns: minmax(0, 1fr) 292px;
}
.mega__panel.is-on {
  display: grid;
}
.mega__panel--wide {
  grid-template-columns: minmax(0, 1fr);
}
.mega__cols {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 26px;
  padding: 26px 28px;
}
.mega__cols--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
/* Çözümler dört eksene ayrıldı: senaryo, ekip, mevzuat, sektör. Eksenler
   12/4/6/12 taşıdığı için eşit dört sütun 10'a karşı 2 satırlık bir boşluk
   bırakıyordu. Grid yerine çok sütun (multicol) kullanılıyor: tarayıcı blokları
   üç tutara kendisi dengeli dağıtıyor, iki kısa eksen aynı tutarda üst üste
   biniyor ve başlıkları ayrı kaldığı için eksenler yine ayırt ediliyor. */
.mega__cols--4 {
  display: block;
  columns: 3;
  column-gap: 26px;
}
.mega__cols--4 .mcol {
  break-inside: avoid;
}
.mega__cols--4 .mcol + .mcol {
  margin-top: 22px;
}
.mcol h4 {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #9aa9c2;
  margin-bottom: 10px;
  padding-left: 9px;
}
.mlink {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 11px;
  align-items: start;
  padding: 9px;
  border-radius: 10px;
  transition: background 0.2s;
}
.mlink:hover {
  background: var(--blue-50);
}
.mlink__ic {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: var(--blue-50);
  display: grid;
  place-items: center;
  transition: background 0.2s;
}
.mlink:hover .mlink__ic {
  background: #fff;
}
.mlink__ic svg {
  width: 15px;
  height: 15px;
  stroke: var(--blue);
  stroke-width: 1.9;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.mlink b {
  display: block;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--navy);
}
/* excludes the icon box: its display:grid + place-items:center must survive */
.mlink span:not(.mlink__ic) {
  display: block;
  font-size: 12px;
  color: var(--slate);
  line-height: 1.45;
  margin-top: 1px;
}
.mlink em {
  font-style: normal;
  font-family: var(--mono);
  font-size: 8.5px;
  letter-spacing: 0.12em;
  color: var(--blue);
  background: var(--blue-50);
  padding: 2px 5px;
  border-radius: 4px;
  margin-left: 6px;
  vertical-align: middle;
}
.mlink em.em--new {
  color: var(--flag);
  background: rgba(226, 89, 31, 0.12);
}

.chipgrid {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  padding-left: 9px;
}
.chiplink {
  font-size: 12.5px;
  padding: 7px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--slate);
  transition:
    border-color 0.2s,
    color 0.2s,
    background 0.2s;
}
.chiplink:hover {
  border-color: var(--blue);
  color: var(--blue);
  background: var(--blue-50);
}

.mega__rail {
  background: var(--mist);
  border-left: 1px solid var(--line);
  padding: 26px;
  display: grid;
  gap: 12px;
  align-content: start;
}
.mega__rail h5 {
  font-family: var(--display);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.015em;
}
.mega__rail p {
  font-size: 12.5px;
  color: var(--slate);
}
.railpost {
  display: grid;
  gap: 4px;
  padding: 12px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 11px;
  transition:
    border-color 0.2s,
    transform 0.2s var(--ease);
}
.railpost:hover {
  border-color: #c4d5f5;
  transform: translateY(-2px);
}
.railpost small {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--blue);
}
.railpost b {
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--navy);
}

/* mobile drawer */
.burger {
  display: none;
  width: 42px;
  height: 42px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  cursor: pointer;
  place-items: center;
}
.burger svg {
  width: 17px;
  height: 17px;
  stroke: var(--navy);
  stroke-width: 2;
  fill: none;
  stroke-linecap: round;
}
.drawer {
  position: fixed;
  inset: var(--nav-h) 0 0 0;
  transition: top 0.35s var(--ease);
  z-index: 190;
  background: #fff;
  overflow-y: auto;
  padding: 14px var(--pad) 60px;
  display: none;
}
.drawer.is-open {
  display: block;
}
.drawer details {
  border-bottom: 1px solid var(--line);
}
.drawer summary {
  list-style: none;
  cursor: pointer;
  padding: 16px 2px;
  font-family: var(--display);
  font-size: 16px;
  font-weight: 600;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.drawer summary::-webkit-details-marker {
  display: none;
}
.drawer summary::after {
  content: "+";
  color: var(--blue);
  font-family: var(--mono);
  font-size: 19px;
}
.drawer details[open] summary::after {
  content: "–";
}
.drawer .dgroup {
  padding: 0 0 16px;
  display: grid;
  gap: 3px;
}
.drawer .dgroup a {
  padding: 2px 9px;
  font-size: 14px;
  color: var(--slate);
}
.drawer .dgroup a:hover {
  color: var(--blue);
}
.drawer .dgroup h6 {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #9aa9c2;
  margin: 12px 0 2px;
}
/* Çekmece bağlantıları: mega menünün .mlink düzeninin mobil karşılığı,
   ikon kutusu ve açıklama dahil. */
.drawer .dlink {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 11px;
  align-items: start;
  padding: 10px 2px;
}
.drawer .dlink__ic {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: var(--blue-50);
  display: grid;
  place-items: center;
}
.drawer .dlink__ic svg {
  width: 15px;
  height: 15px;
  stroke: var(--blue);
  stroke-width: 1.9;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.drawer .dlink b {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--navy);
}
.drawer .dlink b em {
  font-family: var(--mono);
  font-style: normal;
  font-size: 8.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--blue);
  margin-left: 6px;
  vertical-align: 2px;
}
.drawer .dlink span:not(.dlink__ic) > span {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  line-height: 1.45;
  color: var(--slate);
}
/* Çözümler sütunları chips düzeninde: masaüstünde olduğu gibi yalnızca etiket. */
.drawer .dchips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  padding: 4px 0 2px;
}
.drawer .dchip {
  padding: 7px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 12.5px;
  color: var(--navy);
}
.drawer .dchip:active {
  background: var(--blue-50);
  border-color: var(--blue);
}
.drawer__cta {
  display: grid;
  gap: 10px;
  margin-top: 24px;
}

@media (max-width: 1140px) {
  .menu,
  .mega {
    display: none;
  }
  .burger {
    display: grid;
  }
}
@media (max-width: 520px) {
  /* Telefonda başlıkta yalnızca dil değiştirici ve hamburger kalır: demo
     butonu gizlenir, sayfa içindeki CTA'lar bu işi zaten görüyor. */
  .nav__actions .btn {
    display: none;
  }
}
.nav__actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* ==========================================================================
   11b. TRUST & CERTIFICATIONS
   ========================================================================== */
.trust-sec {
  padding: 15vh 0;
}
/* Certification seals.
   A milled-edge medallion drawn entirely in CSS, so every standard carries the
   same mark and only the glyph inside it changes. Nothing here reproduces an
   issuing body's official logo — see templates/core/sections/_trust.html. */
.cert__seal {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--blue-50);
  display: grid;
  place-items: center;
  margin-bottom: 10px;
  position: relative;
  isolation: isolate;
}
/* the milled rim: repeating wedges masked down to a thin outer annulus */
.cert__seal::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: repeating-conic-gradient(
    from 0deg,
    var(--blue) 0deg 3deg,
    transparent 3deg 15deg
  );
  -webkit-mask: radial-gradient(closest-side, transparent 0 80%, #000 82%);
  mask: radial-gradient(closest-side, transparent 0 80%, #000 82%);
  opacity: 0.55;
}
/* hairline inner ring */
.cert__seal::after {
  content: "";
  position: absolute;
  inset: 6px;
  border-radius: 50%;
  border: 1px solid rgba(19, 96, 239, 0.22);
}
.cert__seal svg {
  width: 21px;
  height: 21px;
  stroke: var(--blue);
  stroke-width: 1.55;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  z-index: 1;
}
/* Ters çevrilmiş madalyon: koyu kartlardaki iki öne çıkan standart (ve genel
   olarak sertifika değil tasdik niteliğindeki SOC 2) için. */
.cert__seal--attest {
  background: var(--blue);
}
.cert__seal--attest::before {
  background: repeating-conic-gradient(
    from 0deg,
    #fff 0deg 3deg,
    transparent 3deg 15deg
  );
  opacity: 0.7;
}
.cert__seal--attest::after {
  border-color: rgba(255, 255, 255, 0.38);
}
.cert__seal--attest svg {
  stroke: #fff;
}
/* Sertifika bentosu (2026-08-30): viewport genişliğinde üç kutu — iki koyu kart
   (ISO/IEC 27001, SOC 2 Type II) ve kalan altı yönetim sistemi için geniş kart. */
.certs-bento {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 3fr) minmax(0, 6fr);
  gap: 18px;
  margin: 44px auto 0;
  width: min(100% - 2 * clamp(12px, 1.5vw, 20px), var(--bleed-max));
}
.cert-box {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 28px;
  min-height: 380px;
  padding: 28px;
  border-radius: 25px;
  transition:
    transform 0.3s var(--ease),
    box-shadow 0.3s;
}
.cert-box:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 60px rgba(7, 23, 51, 0.16);
}
.cert-box--dark {
  color: #fff;
  background: linear-gradient(180deg, #040d22 0%, var(--navy) 42%, #08214a 100%);
}
.cert-box__glow {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(62% 42% at 18% 100%, rgba(19, 96, 239, 0.7) 0%, transparent 70%),
    radial-gradient(46% 36% at 92% 58%, rgba(12, 159, 110, 0.3) 0%, transparent 70%);
}
.cert-box--dark > .cert__seal {
  width: 56px;
  height: 56px;
  margin: 0;
}
.cert-box--dark > .cert__seal svg {
  width: 26px;
  height: 26px;
}
.cert-box__body {
  display: grid;
  gap: 10px;
}
.cert-box h3 {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.7rem, 2.8vw, 2.5rem);
  line-height: 1.05;
  letter-spacing: -0.03em;
}
.cert-box--dark p {
  font-size: 14px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.8);
  max-width: 34ch;
}
.cert-box__tag {
  justify-self: start;
  font: 500 11px/1 var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 9px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.06);
  color: #c9d8f5;
}
.cert-box--wide {
  justify-content: flex-start;
  gap: 26px;
  color: var(--navy);
  background: linear-gradient(160deg, #f7f9fe 0%, #e6efff 100%);
}
.cert-box__head p {
  margin-top: 8px;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--slate);
  max-width: 52ch;
}
.cert-box__list {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px 20px;
}
.cert-box__list li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.cert-box__list .cert__seal {
  flex: none;
  width: 40px;
  height: 40px;
  margin: 0;
}
.cert-box__list .cert__seal svg {
  width: 18px;
  height: 18px;
}
.cert-box__list b {
  display: block;
  font-family: var(--display);
  font-size: 14.5px;
  font-weight: 700;
  letter-spacing: -0.01em;
}
/* Yalnızca metin sütunundaki açıklama span'i. Seçici `.cert-box__list span`
   olarak yazılınca <span class="cert__seal"> de eşleşiyor ve mührün
   `display: grid`'ini ezip ikonu 11px yukarı kaydırıyordu. */
.cert-box__list div span {
  display: block;
  margin-top: 3px;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--slate);
}
@media (max-width: 980px) {
  .certs-bento {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .cert-box--wide {
    grid-column: 1 / -1;
  }
  .cert-box__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 600px) {
  .certs-bento {
    grid-template-columns: 1fr;
  }
  .cert-box {
    min-height: 0;
  }
  .cert-box__list {
    grid-template-columns: 1fr;
  }
}

/* ---- compliance & regulation: iki sütunlu başlık satırı, altında dört resimli
   kart. Görseller satır içi SVG ve CSS deseni; bitmap yok. ---- */
.reg {
  margin-top: 56px;
}
.reg__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 28px 48px;
  flex-wrap: wrap;
}
.reg__lead {
  display: grid;
  gap: 14px;
  flex: 1 1 auto;
}
/* bölümün ana h2'sinin bir kademe altı: aynı aile, daha küçük */
.reg__title {
  max-width: 16ch;
  font-size: clamp(1.7rem, 3.2vw, 2.6rem);
}
.reg__aside {
  display: flex;
  align-items: center;
  gap: 22px;
  flex: 0 1 auto;
  margin-left: auto;
  flex-wrap: wrap;
  padding-bottom: 6px;
}
.reg__aside p {
  font-size: 14.5px;
  color: var(--slate);
  max-width: 24ch;
}
.reg__aside .btn svg {
  width: 13px;
  height: 13px;
}
.reg__grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 40px;
}
@media (max-width: 980px) {
  .reg__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 560px) {
  .reg__grid {
    grid-template-columns: 1fr;
  }
  .reg__aside {
    margin-left: 0;
    padding-bottom: 0;
  }
}
.reg-card {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 372px;
  padding: 24px 24px 78px;
  border-radius: 24px;
  color: #fff;
  transition:
    transform 0.3s var(--ease),
    box-shadow 0.3s;
}
.reg-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 24px 46px -24px rgba(7, 23, 51, 0.45);
}
.reg-card__art {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
/* koyu kartlarda metnin oturduğu alt yarıyı hafifçe koyulaştır */
.reg-card--masak::after,
.reg-card--kvkk::after,
.reg-card--amla::after {
  content: "";
  position: absolute;
  inset: 35% 0 0;
  z-index: 0;
  background: linear-gradient(180deg, transparent, rgba(7, 23, 51, 0.32));
}
.reg-card__body {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 10px;
}
.reg-card h4 {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(1.7rem, 2.8vw, 2.5rem);
  letter-spacing: -0.03em;
  line-height: 1.05;
}
.reg-card p {
  font-size: 13.5px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.86);
}
/* sağ alttaki ok: sayfa zemini renginde bir halka onu köşeye "gömer" */
.reg-card__go {
  position: absolute;
  right: 18px;
  bottom: 18px;
  z-index: 2;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--navy);
  color: #fff;
  box-shadow: 0 0 0 6px #fff;
  transition:
    transform 0.25s var(--ease),
    background 0.25s;
}
.reg-card__go:hover {
  transform: scale(1.07);
  background: var(--blue);
}
.reg-card__go svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.reg-card--masak {
  background: linear-gradient(135deg, #0fae8a 0%, #1497c9 45%, #1360ef 100%);
}
.reg-card--kvkk {
  background: linear-gradient(160deg, #1a5ee0 0%, #0b3fa8 100%);
}
.reg-card--kvkk::before {
  content: "";
  position: absolute;
  inset: 34% 0 0;
  z-index: 0;
  background: radial-gradient(rgba(255, 255, 255, 0.34) 1.2px, transparent 1.8px) 0 0 / 18px 18px;
  mask-image: linear-gradient(180deg, transparent, #000 30%);
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 30%);
}
.reg-card--gdpr {
  background: linear-gradient(160deg, #f7f9fe 0%, #e6efff 100%);
  color: var(--navy);
}
.reg-card--gdpr p {
  color: var(--slate);
}
.reg-card--amla {
  background:
    radial-gradient(80% 60% at 80% 10%, rgba(19, 96, 239, 0.45) 0%, transparent 70%),
    linear-gradient(160deg, #0b2a66 0%, #071733 100%);
}
.cert__flag {
  position: absolute;
  top: 18px;
  right: 18px;
  font-family: var(--mono);
  font-size: 8.5px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--flag);
  background: #fff3ed;
  border: 1px solid rgba(226, 89, 31, 0.25);
  padding: 3px 7px;
  border-radius: 5px;
}
/* Running line — the template's marquee. Two copies of the track scroll by
   half their width, so the loop closes without a seam. Reduced-motion users
   get the first copy standing still (the global animation kill switch). */
.runline {
  margin-top: 64px;
  overflow: hidden;
  padding: 6px 0;
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.runline__track {
  display: flex;
  width: max-content;
  will-change: transform;
  animation: runline 42s linear infinite;
}
@keyframes runline {
  to {
    transform: translate3d(-50%, 0, 0);
  }
}
.runline span {
  display: inline-flex;
  align-items: center;
  gap: 0.32em;
  padding-right: 0.32em;
  white-space: nowrap;
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(2.6rem, 7.2vw, 6.8rem);
  letter-spacing: -0.035em;
  line-height: 1.05;
  color: var(--navy);
}
.runline i {
  font-style: normal;
  font-weight: 300;
  color: var(--blue);
}

/* ==========================================================================
   11c. NEWSROOM / BLOG
   ========================================================================== */
.news {
  padding: 0 0 25px 0;
  background: var(--mist);
  border-block: 1px solid var(--line);
}
.news__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  flex-wrap: wrap;
}
.news__li {
  margin-top: 18px;
  width: fit-content;
}
.news__li svg {
  height: 16px;
  width: 16px;
  fill: currentColor;
}

.news__filters {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 30px;
}
.filt {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  padding: 8px 13px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--slate);
  cursor: pointer;
  transition:
    border-color 0.2s,
    color 0.2s,
    background 0.2s;
}
.filt:hover {
  border-color: #c4d5f5;
}
.filt.is-on {
  border-color: var(--blue);
  color: var(--blue);
  background: var(--blue-50);
}

.news__grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
  margin-top: 22px;
}
.news__grid.news__carousel {
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 760px) {
  .news__grid.news__carousel {
    grid-template-columns: 1fr;
  }
}
[data-news-grid] .post.is-hidden {
  display: none;
}
.news__nav {
  display: flex;
  gap: 10px;
  align-items: center;
}
.news__nav.is-hidden,
.news__dots.is-hidden {
  display: none;
}
.news__nav-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  flex: none;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition:
    opacity 0.2s,
    border-color 0.2s,
    background 0.2s;
}
.news__nav-btn--prev {
  background: var(--white);
  border: 1px solid var(--line);
}
.news__nav-btn--prev svg {
  stroke: var(--blue);
}
.news__nav-btn--prev:hover:not(:disabled) {
  border-color: var(--blue);
}
.news__nav-btn--next {
  background: var(--blue);
  border: 1px solid var(--blue);
}
.news__nav-btn--next svg {
  stroke: var(--white);
}
.news__nav-btn--next:hover:not(:disabled) {
  opacity: 0.88;
}
.news__nav-btn svg {
  width: 15px;
  height: 15px;
  stroke-width: 2;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.news__nav-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.news__dots {
  justify-content: center;
  margin-top: 30px;
}
.news__dots i {
  cursor: pointer;
}
.post {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 24px;
  display: grid;
  gap: 10px;
  align-content: start;
  transition:
    border-color 0.25s,
    box-shadow 0.25s,
    transform 0.25s var(--ease);
}
.post:hover {
  border-color: #c4d5f5;
  box-shadow: 0 14px 36px rgba(7, 23, 51, 0.07);
  transform: translateY(-3px);
}
.post--lead {
  grid-column: span 2;
}
@media (max-width: 760px) {
  .post--lead {
    grid-column: span 1;
  }
}
.post__meta {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--slate);
}
.post__cat {
  color: var(--blue);
  background: var(--blue-50);
  padding: 4px 8px;
  border-radius: 5px;
}
.post h3 {
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.25;
  font-size: 1.05rem;
  color: var(--navy);
}
.post--lead h3 {
  font-size: 1.5rem;
}
.post p {
  font-size: 13.5px;
  color: var(--slate);
}
.post__foot {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 2px;
  font-size: 12.5px;
  color: var(--blue);
  font-weight: 600;
}
.post__foot svg {
  width: 13px;
  height: 13px;
  stroke: currentColor;
  stroke-width: 2.2;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.news__more {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 26px;
}

/* ==========================================================================
   13. ENTRANCE ANIMATION
   ========================================================================== */
.rise {
  opacity: 0;
  transform: translateY(26px);
  transition:
    opacity 0.8s var(--ease),
    transform 0.8s var(--ease);
}
.rise.is-in {
  opacity: 1;
  transform: none;
}
.rise[data-delay="1"] {
  transition-delay: 0.08s;
}
.rise[data-delay="2"] {
  transition-delay: 0.16s;
}
.rise[data-delay="3"] {
  transition-delay: 0.24s;
}
.rise[data-delay="4"] {
  transition-delay: 0.32s;
}

/* ==========================================================================
   14. REDUCED MOTION — accessibility
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation: none !important;
    transition-duration: 0.01ms !important;
  }
  .rise {
    opacity: 1;
    transform: none;
  }
}
/* ==========================================================================
   15. LANGUAGE SWITCHER
   ========================================================================== */
.langsw {
  position: relative;
}
.langsw__btn {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  padding: 8px 11px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #fff;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--slate);
  transition:
    border-color 0.2s,
    color 0.2s;
}
.langsw__btn:hover {
  border-color: #c4d5f5;
  color: var(--navy);
}
.langsw__btn svg {
  width: 13px;
  height: 13px;
  stroke: currentColor;
  stroke-width: 1.7;
  fill: none;
}
.langsw__list {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 210;
  min-width: 172px;
  list-style: none;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 18px 44px rgba(7, 23, 51, 0.14);
  padding: 6px;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition:
    opacity 0.18s var(--ease),
    transform 0.18s var(--ease),
    visibility 0.18s;
}
.langsw.is-open .langsw__list {
  opacity: 1;
  visibility: visible;
  transform: none;
}
.langsw__list button {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  cursor: pointer;
  padding: 9px 11px;
  border: 0;
  border-radius: 8px;
  background: none;
  text-align: left;
  font-family: var(--body);
  font-size: 13.5px;
  color: var(--slate);
  transition:
    background 0.18s,
    color 0.18s;
}
.langsw__list button:hover {
  background: var(--blue-50);
  color: var(--navy);
}
.langsw__list button b {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--blue);
}
.langsw__list button.is-on {
  background: var(--blue-50);
  color: var(--navy);
  font-weight: 600;
}

/* ==========================================================================
   17. PRICING — question/answer
   ========================================================================== */
/* Fiyatlandırma iki sütun: solda sorular, sağda başlık ve iki liste. Sorular
   kart değil, ince ayraçlı satırlar; bölüm bu sayede belirgin biçimde kısalıyor. */
.pricing__split {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
  gap: 34px 64px;
  align-items: start;
}
@media (max-width: 980px) {
  .pricing__split {
    grid-template-columns: 1fr;
  }
  .pricing__aside {
    order: -1;
  }
}
.pricing__aside {
  display: grid;
  gap: 6px;
}
/* Yan sütunda başlık bir kademe küçük: dar kolonda üç satıra taşıp bölümü
   gereksiz uzatıyordu. */
.pricing__aside h2 {
  font-size: clamp(1.8rem, 2.6vw, 2.6rem);
}
.qa {
  display: grid;
  border-top: 1px solid var(--line);
}
.qa__card {
  position: relative;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  column-gap: 12px;
  row-gap: 5px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}
.qa__n {
  grid-row: 1 / span 2;
  padding-top: 4px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  color: var(--blue);
}
.qa__card h3 {
  grid-column: 2;
  font-family: var(--display);
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.qa__card p {
  grid-column: 2;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--slate);
}

.pfacts {
  display: grid;
  gap: 14px;
  margin-top: 20px;
}
.pfacts__col {
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 18px 22px;
  background: var(--mist);
}
.pfacts__col h4 {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--slate);
  margin-bottom: 14px;
}
.plist {
  list-style: none;
  display: grid;
  gap: 9px;
}
.plist li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 14px;
  color: var(--navy);
}
.plist li::before {
  font-family: var(--mono);
  flex: none;
}
.plist--move li::before {
  content: "↕";
  color: var(--blue);
}
.plist--inc li::before {
  content: "✓";
  color: var(--pass);
}

.pnote {
  margin-top: 22px;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 28px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 24px;
  align-items: center;
  background: linear-gradient(100deg, var(--blue-50) 0%, #fff 62%);
}
@media (max-width: 760px) {
  .pnote {
    grid-template-columns: 1fr;
  }
}
.pnote h3 {
  font-family: var(--display);
  font-size: 1.12rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.pnote p {
  font-size: 13.5px;
  color: var(--slate);
  max-width: 64ch;
  margin-top: 5px;
}

/* ==========================================================================
   18. BLOG: card image, list and article page
   ========================================================================== */
.post__img {
  display: block;
  margin: -24px -24px 4px;
  overflow: hidden;
  border-radius: 15px 15px 0 0;
  aspect-ratio: 16/9;
  background: var(--mist);
}
.post__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.post--lead .post__img {
  aspect-ratio: 21/9;
}

.page-head {
  padding: 180px 0 8vh;
}
.page-head--tight {
  padding: 150px 0 5vh;
}
.page-head .lead {
  margin-top: 16px;
}
.page-head .h-giant,
.page-head .h-big {
  margin-top: 16px;
}

.pager {
  display: flex;
  gap: 14px;
  align-items: center;
  justify-content: center;
  margin-top: 38px;
}
.pager__at {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--slate);
}

.article {
  padding: 150px 0 12vh;
}
.article__head {
  max-width: 1045px;
}
.article__head .h-big {
  margin-top: 14px;
}
.article__head .lead {
  margin-top: 16px;
}
.article__cover {
  max-width: 1060px;
  margin: 44px auto;
  padding-inline: var(--pad);
}
.article__cover img {
  width: 100%;
  border-radius: 20px;
  border: 1px solid var(--line);
}
.article__body {
  max-width: 1045px;
}
.article__body p {
  font-size: 17px;
  line-height: 1.7;
  color: #2b3b57;
  margin-bottom: 22px;
}
.article__body h2 {
  font-family: var(--display);
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: -0.025em;
  margin: 38px 0 14px;
}
.article__body h3 {
  font-family: var(--display);
  font-size: 1.22rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 30px 0 12px;
}
.article__body ul {
  margin: 0 0 22px 20px;
  color: #2b3b57;
}
.article__body li {
  margin-bottom: 8px;
  font-size: 16px;
}
/* Blog gövdesi sayfalarla aynı markdown süzgecinden geçiyor, o yüzden süzgecin
   ürettiği her yapının burada da karşılığı olmak zorunda: h4 ve kod bloğu. */
.article__body h4 {
  font-family: var(--display);
  font-size: 1.05rem;
  font-weight: 700;
  margin: 26px 0 8px;
  color: var(--navy);
}
.article__body code {
  font-family: var(--mono);
  font-size: 0.88em;
  background: var(--mist);
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 1px 5px;
}
.article__body pre {
  background: var(--mist);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 16px 18px;
  margin-bottom: 22px;
  overflow-x: auto;
}
.article__body pre code {
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.6;
  color: var(--navy);
  background: none;
  border: 0;
  border-radius: 0;
  padding: 0;
  white-space: pre;
}
.article__body .table-scroll {
  overflow-x: auto;
  margin-bottom: 22px;
}
.article__body table {
  border-collapse: collapse;
  width: 100%;
  font-size: 15px;
  color: #2b3b57;
}
.article__body th,
.article__body td {
  padding: 10px 14px;
  border: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}
.article__body th {
  background: var(--mist);
  font-weight: 700;
  color: var(--navy);
}
.article__related {
  margin-top: 8vh;
}
.article__related .news__grid {
  margin-top: 22px;
}

/* ==========================================================================
   19. DEMO FORM + CALENDAR
   ========================================================================== */
.demo {
  padding: 0 0 15vh;
}
.demo__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 36px;
  align-items: start;
}
@media (max-width: 1000px) {
  .demo__grid {
    grid-template-columns: 1fr;
  }
}

.fset {
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 30px;
  margin-bottom: 18px;
  background: #fff;
}
.fset legend {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 10px;
  margin-left: -10px;
  font-family: var(--display);
  font-size: clamp(1.24rem, 2.1vw, 1.6rem);
  font-weight: 700;
  letter-spacing: -0.02em;
}
.fset__n {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  color: var(--blue);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 4px 7px;
}
.fset__hint {
  font-size: 13.5px;
  color: var(--slate);
  margin: 10px 0 20px;
  max-width: 60ch;
}

.topics {
  display: grid;
  gap: 9px;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
}
.topics.is-muted {
  opacity: 0.38;
  pointer-events: none;
}
.topic {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  cursor: pointer;
  padding: 14px 15px;
  border: 1px solid var(--line);
  border-radius: 12px;
  transition:
    border-color 0.2s,
    background 0.2s;
}
.topic:hover {
  border-color: #c4d5f5;
}
.topic input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.topic__box {
  width: 19px;
  height: 19px;
  border: 1.5px solid var(--line);
  border-radius: 6px;
  flex: none;
  margin-top: 1px;
  display: grid;
  place-items: center;
  transition: all 0.18s;
}
.topic__box::after {
  content: "";
  width: 9px;
  height: 5px;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(-45deg) scale(0);
  transition: transform 0.18s;
}
.topic input:checked ~ .topic__box {
  background: var(--blue);
  border-color: var(--blue);
}
.topic input:checked ~ .topic__box::after {
  transform: rotate(-45deg) scale(1);
}
.topic input:checked ~ .topic__txt b {
  color: var(--blue);
}
.topic input:focus-visible ~ .topic__box {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}
.topic__txt b {
  display: block;
  font-size: 14px;
  font-weight: 600;
}
.topic__txt small {
  display: block;
  font-size: 12px;
  color: var(--slate);
  margin-top: 2px;
}
.topic--all {
  margin-bottom: 14px;
  border-color: var(--blue);
  background: var(--blue-50);
}

/* --- calendar --- */
.cal {
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 20px;
  background: var(--mist);
}
.cal.is-error {
  border-color: var(--flag);
}
.cal__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.cal__bar b {
  font-family: var(--display);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.015em;
}
.cal__nav {
  width: 32px;
  height: 32px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #fff;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: border-color 0.2s;
}
.cal__nav:hover:not(:disabled) {
  border-color: var(--blue);
}
.cal__nav:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.cal__nav svg {
  width: 15px;
  height: 15px;
  stroke: var(--navy);
  stroke-width: 2;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.cal__dow {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  margin-bottom: 5px;
}
.cal__dow span {
  text-align: center;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--slate);
}
.cal__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}
.cal__cell {
  position: relative;
  aspect-ratio: 1;
  border: 1px solid transparent;
  border-radius: 9px;
  background: #fff;
  cursor: pointer;
  font-family: var(--body);
  font-size: 13px;
  color: var(--navy);
  transition:
    border-color 0.18s,
    background 0.18s,
    color 0.18s;
}
.cal__cell.is-pad {
  background: none;
  cursor: default;
}
.cal__cell.is-off {
  background: none;
  color: #c0cbde;
  cursor: not-allowed;
}
.cal__cell:not(.is-off):not(.is-pad):hover {
  border-color: var(--blue);
}
.cal__cell.is-active {
  border-color: var(--blue);
  background: var(--blue-50);
}
.cal__cell.has-pick {
  background: var(--blue);
  color: #fff;
  border-color: var(--blue);
}
.cal__cell i {
  position: absolute;
  top: 3px;
  right: 4px;
  font-style: normal;
  font-family: var(--mono);
  font-size: 8.5px;
  opacity: 0.8;
}
.cal__times {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
.cal__times h4 {
  font-family: var(--display);
  font-size: 13.5px;
  font-weight: 700;
  margin-bottom: 10px;
}
.cal__slots {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}
.cal__slot {
  font-family: var(--mono);
  font-size: 12px;
  padding: 9px 13px;
  cursor: pointer;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #fff;
  color: var(--navy);
  transition:
    border-color 0.18s,
    background 0.18s,
    color 0.18s;
}
.cal__slot:hover:not(:disabled) {
  border-color: var(--blue);
}
.cal__slot.is-on {
  background: var(--blue);
  border-color: var(--blue);
  color: #fff;
}
.cal__slot:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.cal__picked {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
.cal__picked h4 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--display);
  font-size: 13.5px;
  font-weight: 700;
  margin-bottom: 10px;
}
.cal__count {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--slate);
}
.cal.is-short .cal__count b {
  color: var(--flag);
}
.cal__list {
  list-style: none;
  display: grid;
  gap: 6px;
}
.cal__list li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  font-size: 13px;
}
.cal__empty {
  color: var(--slate);
  font-size: 13px;
  justify-content: center;
}
.cal__rank {
  width: 20px;
  height: 20px;
  border-radius: 6px;
  background: var(--blue-50);
  color: var(--blue);
  font-family: var(--mono);
  font-size: 10px;
  display: grid;
  place-items: center;
  flex: none;
}
.cal__when {
  flex: 1;
  color: var(--slate);
}
.cal__when b {
  color: var(--navy);
  font-family: var(--mono);
  font-size: 12px;
  margin-left: 5px;
}
.cal__drop {
  width: 24px;
  height: 24px;
  border: 0;
  border-radius: 7px;
  background: none;
  cursor: pointer;
  color: var(--slate);
  font-size: 17px;
  line-height: 1;
  transition:
    background 0.18s,
    color 0.18s;
}
.cal__drop:hover {
  background: #fff3ed;
  color: var(--flag);
}
.cal__tz {
  margin-top: 11px;
  font-size: 12px;
  color: var(--slate);
}
.cal__tz b {
  font-family: var(--mono);
  color: var(--navy);
}

/* --- fields --- */
.fgrid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
}
.fld {
  display: grid;
  gap: 6px;
}
.fld--wide {
  grid-column: 1/-1;
}
.fld > span {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--slate);
}
.fld input,
.fld select,
.fld textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  font-family: var(--body);
  font-size: 14px;
  color: var(--navy);
  background: #fff;
  transition:
    border-color 0.2s,
    box-shadow 0.2s;
}
.fld input:focus,
.fld select:focus,
.fld textarea:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(19, 96, 239, 0.13);
}
.fld textarea {
  resize: vertical;
  min-height: 100px;
}
.consent {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  margin-top: 20px;
  font-size: 13.5px;
  color: var(--slate);
}
.consent input {
  margin-top: 3px;
  accent-color: var(--blue);
  width: 17px;
  height: 17px;
}
.formerr {
  color: var(--flag);
  font-size: 13px;
  margin-top: 8px;
}
.formerr ul {
  list-style: none;
}
.btn--big {
  padding: 15px 28px;
  font-size: 15px;
}

/* The contact form reuses .fgrid/.fld but, unlike the demo form, has no
   320px sidebar narrowing its container — auto-fit would pack 3 columns
   into the wider space instead of pairing fields 2 by 2. */
.contactform .fgrid {
  grid-template-columns: repeat(2, 1fr);
}
@media (max-width: 760px) {
  .contactform .fgrid {
    grid-template-columns: 1fr;
  }
}

.modal {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: grid;
  place-items: center;
  padding: 20px;
  opacity: 0;
  transition: opacity 0.2s;
}
.modal.is-open {
  opacity: 1;
}
.modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(7, 23, 51, 0.55);
  backdrop-filter: blur(2px);
}
.modal__box {
  position: relative;
  width: 100%;
  max-width: 420px;
  background: #fff;
  border-radius: 18px;
  padding: 40px 32px 32px;
  text-align: center;
  box-shadow: 0 24px 60px rgba(7, 23, 51, 0.25);
  transform: scale(0.94);
  transition: transform 0.2s;
}
.modal.is-open .modal__box {
  transform: scale(1);
}
.modal__close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: none;
  background: none;
  color: var(--slate);
  cursor: pointer;
}
.modal__close:hover {
  background: var(--line);
  color: var(--navy);
}
.modal__close svg {
  width: 16px;
  height: 16px;
}
.modal__icon {
  width: 44px;
  height: 44px;
  margin: 0 auto 16px;
  padding: 10px;
  border-radius: 50%;
  background: rgba(19, 96, 239, 0.1);
  color: var(--blue);
}
.modal__msg {
  color: var(--navy);
  font-size: 15px;
  line-height: 1.6;
  margin-bottom: 22px;
}

.offices {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
  margin-top: 20px;
  margin-bottom: 20px;
}
.office {
  display: flex;
  gap: 12px;
}
.office .flag {
  flex-shrink: 0;
}
.office b {
  display: block;
  color: var(--navy);
}
.office span {
  display: block;
  margin-top: 4px;
  color: var(--slate);
  font-size: 14px;
  line-height: 1.55;
}
/* Same divider technique as .foot__col + .foot__col. */
.office + .office {
  border-left: 1px solid var(--line);
  padding-left: 28px;
}
@media (max-width: 640px) {
  /* Masaüstünde <br> iki satırlık dengeyi kuruyor. Dar ekranda ise iki bloğun
     her biri ikiye bölünüp başlık dört satıra çıkıyordu; zorunlu satır sonu
     kalkınca 61 karakterlik başlık büyük puntoda üç satıra oturuyor. */
  .offices {
    grid-template-columns: 1fr;
  }
  .office + .office {
    border-left: none;
    padding-left: 0;
    padding-top: 20px;
    border-top: 1px solid var(--line);
  }
}

.contact-cta h2 {
  margin: 0 0 8px;
}
.contact-cta a {
  display: inline-block;
  font-weight: 700;
  margin-top: 6px;
}

.demoside {
  display: grid;
  gap: 14px;
  position: sticky;
  top: 100px;
}
@media (max-width: 1000px) {
  .demoside {
    position: static;
  }
}
.demoside__card {
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 26px;
  background: #fff;
}
.contact-cta {
  background: none !important;
  border: none !important;
  border-radius: 0 !important;
  border-top: 1px solid var(--line) !important;
  padding: 26px 0 26px 0 !important;
}

.demoside__card h3 {
  font-family: var(--display);
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 14px;
}
.demoside__card p {
  font-size: 14px;
  color: var(--slate);
  line-height: 1.6;
}
.demoside__card a {
  color: var(--blue);
}
.steps {
  list-style: none;
  display: grid;
  gap: 16px;
  counter-reset: s;
}
.steps li {
  display: grid;
  gap: 3px;
  padding-left: 32px;
  position: relative;
  counter-increment: s;
}
.steps li::before {
  content: counter(s, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 1px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--blue);
}
.steps b {
  font-size: 14px;
  font-weight: 600;
}
.steps span {
  font-size: 13px;
  color: var(--slate);
  line-height: 1.5;
}

/* ==========================================================================
   20. THANK-YOU PAGE
   ========================================================================== */
.thanks {
  padding: 190px 0 16vh;
  text-align: center;
}
.thanks__inner {
  display: grid;
  gap: 22px;
  justify-items: center;
}
.thanks .h-big {
  margin-top: 8px;
}
.thanks__recap {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr));
  width: min(680px, 100%);
  text-align: left;
  margin-top: 12px;
}
.thanks__recap > div {
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 22px;
  background: var(--mist);
}
.thanks__recap h4 {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--slate);
  margin-bottom: 11px;
}
.thanks__recap ul {
  list-style: none;
  display: grid;
  gap: 7px;
}
.thanks__recap li {
  font-size: 14px;
  color: var(--navy);
}
.thanks__recap small {
  color: var(--slate);
}

/* ==========================================================================
   17. CONTENT PAGES  (apps.pages)
   ========================================================================== */
.doc {
  padding: calc(11svh + 60px) 0 90px;
}

.contact-doc {
  padding-bottom: 30px;
}

.crumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  align-items: center;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--slate);
  margin-bottom: 26px;
}
.crumbs a {
  color: var(--slate);
}
.crumbs a:hover {
  color: var(--blue);
}
.crumbs [aria-current] {
  color: var(--navy);
}

.doc__head {
  max-width: 760px;
}
.doc__head .eyebrow {
  display: block;
  margin-bottom: 12px;
}
.doc__lead {
  margin-top: 16px;
  font-size: clamp(1rem, 1.5vw, 1.16rem);
  margin-bottom: 36px;
}
.doc__cta {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 26px;
}

.doc__body {
  max-width: 720px;
  margin-top: 52px;
}
.doc__body h2 {
  font-family: var(--display);
  font-size: clamp(1.24rem, 2.1vw, 1.6rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 38px 0 12px;
  color: var(--navy);
}
.doc__body h3 {
  font-family: var(--display);
  font-size: 1.08rem;
  font-weight: 600;
  margin: 26px 0 9px;
  color: var(--navy);
}
.doc__body h4 {
  font-family: var(--display);
  font-size: 0.96rem;
  font-weight: 600;
  margin: 20px 0 7px;
  color: var(--navy);
}
.doc__body p {
  color: var(--slate);
  margin-bottom: 14px;
}
/* Kod blokları kendi içinde kayar: bir JSON gövdesi sayfayı genişletmemeli. */
.doc__body pre {
  background: var(--mist);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 16px;
  overflow-x: auto;
}
.doc__body pre code {
  font-family: var(--mono);
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--navy);
  background: none;
  border: 0;
  border-radius: 0;
  padding: 0;
  white-space: pre;
}
.doc__body ul,
.doc__body ol {
  margin: 0 0 16px 20px;
  color: var(--slate);
}
.doc__body li {
  margin-bottom: 7px;
}
.doc__body a {
  color: var(--blue);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.doc__body code {
  font-family: var(--mono);
  font-size: 0.88em;
  background: var(--mist);
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 1px 5px;
}
.doc__body .table-scroll {
  overflow-x: auto;
  margin-bottom: 16px;
}
.doc__body table {
  border-collapse: collapse;
  width: 100%;
  font-size: 14px;
  color: var(--slate);
}
.doc__body th,
.doc__body td {
  padding: 9px 13px;
  border: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}
/* Tablo hücresindeki kalın metin, mevzuat sayfalarında gösterge kodu oluyor
   (T-001-3.21 gibi) ve dar sütunda tirenin ortasından bölünüyordu. */
.doc__body td strong {
  white-space: nowrap;
}
.doc__body th {
  background: var(--mist);
  font-weight: 700;
  color: var(--navy);
}

.doc__faq {
  max-width: 760px;
  margin-top: 64px;
}
.doc__faq dl {
  margin-top: 20px;
  border-top: 1px solid var(--line);
}
.qa {
  border-bottom: 1px solid var(--line);
  padding: 20px 0;
}
.qa dt {
  font-family: var(--display);
  font-weight: 600;
  color: var(--navy);
  margin-bottom: 8px;
}
.qa dd {
  color: var(--slate);
  font-size: 15px;
}

/* aggregator FAQ page — two-level accordion */
.faq-group {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 22px 26px;
  margin-bottom: 14px;
}
.faq-group__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  cursor: pointer;
  list-style: none;
}
.faq-group__head::-webkit-details-marker {
  display: none;
}
.faq-group__title {
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--navy);
}
.faq-group__toggle {
  width: 28px;
  height: 28px;
  flex: none;
  border-radius: 50%;
  display: grid;
  place-items: center;
  border: 1.5px solid var(--blue-50);
  background: var(--blue-50);
  transition:
    background 0.3s var(--ease),
    border-color 0.3s var(--ease);
}
.faq-group__toggle svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: var(--blue);
  stroke-width: 2.4;
  transition:
    transform 0.3s var(--ease),
    stroke 0.3s var(--ease);
}
.faq-group[open] .faq-group__toggle {
  background: var(--blue);
  border-color: var(--blue);
}
.faq-group[open] .faq-group__toggle svg {
  stroke: var(--white);
  transform: rotate(180deg);
}
.faq-group__body {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition:
    max-height 1.15s var(--ease),
    opacity 0.9s var(--ease),
    margin 1.15s var(--ease);
}
.faq-group.is-on .faq-group__body {
  max-height: 2000px;
  opacity: 1;
  margin-top: 16px;
}
.faq-item {
  border-top: 1px solid var(--line);
  padding: 20px 0;
}
.faq-item:first-child {
  border-top: none;
  padding-top: 0;
}
.faq-item__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  cursor: pointer;
  list-style: none;
}
.faq-item__head::-webkit-details-marker {
  display: none;
}
.faq-item__q {
  font-weight: 600;
  font-size: 14.5px;
  color: var(--navy);
}
.faq-item__toggle {
  width: 17px;
  height: 17px;
  flex: none;
  color: var(--blue);
  font: 700 15px/1 var(--mono);
  display: grid;
  place-items: center;
}
.faq-item__toggle::after {
  content: "+";
}
.faq-item[open] .faq-item__toggle::after {
  content: "\00d7";
}
.faq-item__a {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  margin: 0;
  color: var(--slate);
  font-size: 13.5px;
  line-height: 1.6;
  transition:
    max-height 0.9s var(--ease),
    opacity 0.7s var(--ease),
    margin 0.9s var(--ease);
}
.faq-item.is-on .faq-item__a {
  max-height: 600px;
  opacity: 1;
  margin-top: 8px;
}

.doc__more,
.doc__foot {
  margin-top: 70px;
}
.doc__grid {
  display: grid;
  gap: 16px;
  margin-top: 22px;
  grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr));
}
.doc__grid--index {
  margin-top: 44px;
}
.doc__card {
  display: grid;
  gap: 9px;
  align-content: start;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--white);
  transition:
    border-color 0.2s,
    transform 0.2s;
}
.doc__card:hover {
  border-color: #c4d5f5;
  transform: translateY(-2px);
}
.doc__card b {
  font-family: var(--display);
  font-size: 1.02rem;
  color: var(--navy);
}
.doc__card span {
  font-size: 13.5px;
  color: var(--slate);
  line-height: 1.5;
}
.doc__card-go {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--blue);
}
.doc__foot {
  border-top: 1px solid var(--line);
  padding-top: 38px;
  display: grid;
  gap: 18px;
  justify-items: start;
}
@media (max-width: 720px) {
  .doc {
    padding-top: calc(9svh + 54px);
  }
}

/* ==========================================================================
   21. HOMEPAGE CONTENT DECK
   The sections added from static/mainpage_content.html. Nothing here restyles
   an existing component: the deck reuses the tokens, the button, the eyebrow
   and the .rise entrance, and only adds the layouts it needs.
   ========================================================================== */

/* ------------------------------------------ on-premise: full-width FAQ band */
/* Şablonun SSS düzeni: viewport genişliğinde yuvarlatılmış açık bant, solda
   resimli kart, sağda akordeon. Bant .wrap dışındadır; içerik .wrap ızgarasında
   kalır ve kart satır yüksekliğine gerilir (align-items: stretch). */
.onprem {
  position: relative;
  margin: 0 auto;
  width: min(100% - 2 * clamp(12px, 1.5vw, 20px), var(--bleed-max));
  border-radius: 25px;
  background: var(--mist);
  overflow: hidden;
  padding: clamp(64px, 8vw, 120px) 0;
}
.onprem__inner {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 48px;
}
/* Sol sütun: index3'ün resimli kartı. Zemin lacivert gradyan + hero ışıması +
   ince ızgara + parmak izi halkaları; hepsi CSS/SVG, görsel dosyası yok. */
.onprem-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 48px;
  min-height: 520px;
  padding: 30px;
  border-radius: 25px;
  color: #fff;
  background: linear-gradient(180deg, #040d22 0%, var(--navy) 42%, #08214a 100%);
}
.onprem-card__glow,
.onprem-card__grid,
.onprem-card__mark {
  position: absolute;
  z-index: -1;
  pointer-events: none;
}
.onprem-card__glow {
  inset: 0;
  background:
    radial-gradient(62% 42% at 18% 100%, rgba(19, 96, 239, 0.72) 0%, transparent 70%),
    radial-gradient(46% 36% at 92% 58%, rgba(12, 159, 110, 0.34) 0%, transparent 70%);
}
.onprem-card__grid {
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(90% 62% at 50% 0%, #000 0%, transparent 82%);
  -webkit-mask-image: radial-gradient(90% 62% at 50% 0%, #000 0%, transparent 82%);
}
.onprem-card__mark {
  right: -22%;
  bottom: -16%;
  width: 84%;
  opacity: 0.16;
}
.onprem-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.onprem-card__tags span {
  font: 500 11px/1 var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 9px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.06);
  color: #c9d8f5;
}
.onprem-card__title {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.7rem, 2.8vw, 2.5rem);
  letter-spacing: -0.03em;
  line-height: 1.05;
  max-width: 10ch;
}
.onprem-card__body p {
  margin-top: 16px;
  font-size: 15px;
  line-height: 1.6;
  color: #b9c7e2;
  max-width: 34ch;
}
.onprem-card__btn {
  margin-top: 26px;
  background: #fff;
  color: var(--navy);
  border-color: #fff;
}
.onprem-card__btn:hover {
  background: #e7eefc;
  border-color: #e7eefc;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.28);
}
.onprem__title {
  margin-top: 14px;
  max-width: 22ch;
}
.onprem__faq {
  margin-top: 36px;
  border-top: 1px solid rgba(7, 23, 51, 0.16);
}
.onprem-q {
  border-bottom: 1px solid rgba(7, 23, 51, 0.16);
  padding: 22px 0;
}
.onprem-q__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  cursor: pointer;
  list-style: none;
}
.onprem-q__head::-webkit-details-marker {
  display: none;
}
.onprem-q__q {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(1.05rem, 1.7vw, 1.4rem);
  letter-spacing: -0.02em;
  line-height: 1.25;
  color: var(--navy);
}
.onprem-q__toggle {
  width: 30px;
  height: 30px;
  flex: none;
  border-radius: 50%;
  border: 1px solid rgba(7, 23, 51, 0.16);
  display: grid;
  place-items: center;
  transition:
    background 0.3s var(--ease),
    border-color 0.3s var(--ease);
}
.onprem-q__toggle svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: var(--navy);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition:
    transform 0.3s var(--ease),
    stroke 0.3s var(--ease);
}
.onprem-q__head:hover .onprem-q__toggle {
  border-color: var(--blue);
}
.onprem-q[open] .onprem-q__toggle {
  background: var(--blue);
  border-color: var(--blue);
}
.onprem-q[open] .onprem-q__toggle svg {
  stroke: #fff;
  transform: rotate(180deg);
}
.onprem-q__a {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition:
    max-height 0.9s var(--ease),
    opacity 0.7s var(--ease),
    margin 0.9s var(--ease);
}
.onprem-q.is-on .onprem-q__a {
  max-height: 900px;
  opacity: 1;
  margin-top: 14px;
}
.onprem-q__a p {
  font-size: 15px;
  line-height: 1.7;
  color: var(--slate);
  max-width: 64ch;
}
.onprem-q__a p + p {
  margin-top: 12px;
}
.onprem__cta {
  margin-top: 34px;
}
@media (max-width: 900px) {
  .onprem__inner {
    grid-template-columns: 1fr;
  }
  .onprem-card {
    min-height: 420px;
  }
}

/* --------------------------------------------------------- the six modules */
.modules {
  padding: 12vh 0;
}
.mods {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(min(285px, 100%), 1fr));
  margin-top: 44px;
}
.mod {
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 28px;
  background: #fff;
  display: grid;
  gap: 12px;
  align-content: start;
  transition:
    border-color 0.25s,
    box-shadow 0.25s,
    transform 0.25s var(--ease);
}
.mod:hover {
  border-color: #c4d5f5;
  box-shadow: 0 14px 40px rgba(7, 23, 51, 0.07);
  transform: translateY(-3px);
}
.mod__ico {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--blue-50);
  display: grid;
  place-items: center;
}
.mod__ico svg {
  width: 21px;
  height: 21px;
  stroke: var(--blue);
  stroke-width: 1.7;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.mod h3 {
  font-family: var(--display);
  font-size: clamp(1.7rem, 2.8vw, 2.5rem);
  line-height: 1.05;
  font-weight: 700;
  letter-spacing: -0.03em;
}
.mod p {
  font-size: 13.5px;
  color: var(--slate);
  line-height: 1.55;
}

/* ------------------------------------------------- screening: the four lists */
/* index14'ten iki fikir: üstte "step-by-step" düzeni (solda yukarıdan aşağı okunan
   metin sütunu: eyebrow, başlık, paragraf, 01/02/03; sağda dikey yazılı büyük
   resim kartı), altta sayfanın açılış bentosu gibi viewport genişliğinde dört
   kutu: koyu kart, açık resimli kart, gradyan kart, dikey yazılı büyük kart. */
.sanc {
  padding: 12vh 0 0;
}
.sanc__intro {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
  gap: 40px 72px;
  align-items: start;
}
.sanc__title {
  margin-top: 14px;
  max-width: 16ch;
}
.sanc__title em,
.value__copy h2 em {
  font-style: normal;
  color: var(--blue);
}
.sanc__lead {
  margin-top: 26px;
  font-size: 16px;
  line-height: 1.75;
  color: var(--slate);
  max-width: 56ch;
}
.sanc__steps {
  list-style: none;
  display: grid;
  gap: 26px;
  margin-top: 40px;
}
.sanc-step {
  display: grid;
  grid-template-columns: 78px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}
/* şablonun içi boş, konturlu rakamları */
.sanc-step__n {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(2.4rem, 3.4vw, 3.2rem);
  line-height: 0.95;
  letter-spacing: -0.03em;
  color: transparent;
  -webkit-text-stroke: 1.3px #9db8f2;
}
.sanc-step h3 {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: -0.02em;
  line-height: 1.25;
}
.sanc-step p {
  margin-top: 6px;
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--slate);
  max-width: 52ch;
}
.sanc-step__meta {
  display: inline-block;
  margin-top: 10px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--blue);
}
.sanc__copy > .btn {
  margin-top: 36px;
}
/* sağ sütun: tek büyük resim, sağ kenar boyunca dikey kelime, yüzen etiket */
.sanc__visual {
  position: relative;
  align-self: stretch;
  min-height: 560px;
  border-radius: 25px;
  overflow: hidden;
  isolation: isolate;
  background: var(--navy);
}
.sanc__visual img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 70% 50%;
}
.sanc__visual-word,
.sanc-box__word {
  position: absolute;
  right: 22px;
  bottom: 22px;
  z-index: 1;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(3rem, 6vw, 5.6rem);
  line-height: 1;
  letter-spacing: -0.04em;
  background: linear-gradient(180deg, var(--pass) 0%, var(--blue) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  pointer-events: none;
}
.sanc__visual-pill {
  position: absolute;
  left: 22px;
  bottom: 22px;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  color: var(--navy);
  font-size: 13px;
  font-weight: 600;
  box-shadow: 0 10px 30px rgba(7, 23, 51, 0.18);
}
.sanc__visual-pill i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--pass);
  box-shadow: 0 0 0 4px rgba(12, 159, 110, 0.2);
}
/* tam genişlik bento */
.sanc-bento {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 3fr) minmax(0, 6fr);
  /* Satır tabanı min-content, yükseklik de sabit değil alt sınır. Sabit
     yükseklikle satırlar içeriğe göre uzayamıyordu ve kutular overflow:hidden
     olduğu için metin kırpılıyordu: 1380px genişlikte İngilizce sayfada orta
     sütun 327px'e iniyor, "Adverse media, read in any language" başlığı dört
     satıra çıkıyor ve altındaki paragraf 57px, tarama kutusununki 67px taşıp
     görünmez oluyordu. Türkçe metin kısa olduğu için sorun yalnız İngilizcede
     görünüyordu. Metnin sığdığı her genişlikte ızgara yine clamp yüksekliğinde
     kalır, yalnız sığmadığında uzar. */
  grid-template-rows: repeat(2, minmax(min-content, 1fr));
  gap: 18px;
  min-height: clamp(520px, 40vw, 620px);
  margin: 72px auto 0;
  width: min(100% - 2 * clamp(12px, 1.5vw, 20px), var(--bleed-max));
}
.sanc-box {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 28px;
  border-radius: 25px;
  color: #fff;
  background: var(--navy);
  transition:
    transform 0.3s var(--ease),
    box-shadow 0.3s;
}
.sanc-box:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 60px rgba(7, 23, 51, 0.16);
}
.sanc-box--dark {
  grid-column: 1;
  grid-row: 1 / 3;
  justify-content: space-between;
}
.sanc-box--light {
  grid-column: 2;
  grid-row: 1;
  color: var(--navy);
  background: #eef3fd;
  justify-content: flex-start;
}
.sanc-box--grad {
  grid-column: 2;
  grid-row: 2;
  background: linear-gradient(135deg, #1360ef 0%, #1497c9 55%, #0fae8a 100%);
  flex-direction: row;
  align-items: center;
  gap: 18px;
  justify-content: flex-start;
}
.sanc-box--big {
  grid-column: 3;
  grid-row: 1 / 3;
  color: var(--navy);
  background: #e9eef9;
}
.sanc-box__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.sanc-box--dark .sanc-box__bg {
  object-position: left center;
}
.sanc-box--light .sanc-box__bg {
  object-position: right bottom;
}
.sanc-box--big .sanc-box__bg {
  object-position: right center;
}
/* okunabilirlik için karartma / açma katmanı */
.sanc-box--dark::after,
.sanc-box--light::after,
.sanc-box--big::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
.sanc-box--dark::after {
  background: linear-gradient(180deg, rgba(7, 23, 51, 0.25) 0%, rgba(7, 23, 51, 0.82) 100%);
}
.sanc-box--light::after {
  background: linear-gradient(90deg, rgba(238, 243, 253, 0.96) 0%, rgba(238, 243, 253, 0.55) 60%, rgba(238, 243, 253, 0.1) 100%);
}
.sanc-box--big::after {
  background: linear-gradient(90deg, rgba(233, 238, 249, 0.96) 0%, rgba(233, 238, 249, 0.6) 45%, rgba(233, 238, 249, 0) 75%);
}
.sanc-box__ico {
  flex: none;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.18);
}
.sanc-box__ico svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: #fff;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.sanc-box__body {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 10px;
}
.sanc-box h3 {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.7rem, 2.8vw, 2.5rem);
  letter-spacing: -0.03em;
  line-height: 1.05;
  max-width: 16ch;
}
.sanc-box p {
  font-size: 14px;
  line-height: 1.6;
  max-width: 40ch;
}
.sanc-box--dark p {
  color: rgba(255, 255, 255, 0.8);
}
.sanc-box--light p,
.sanc-box--big p {
  color: var(--slate);
}
.sanc-box--grad p {
  color: rgba(255, 255, 255, 0.85);
  font-size: 13px;
  margin-top: 2px;
}
.sanc-box__stats {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin-top: 8px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
}
.sanc-box__stats b {
  font-family: var(--display);
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #fff;
  text-transform: none;
  margin-right: 4px;
}
.sanc-box--big .sanc-box__body {
  max-width: 46%;
}
.sanc-box__word {
  background: linear-gradient(180deg, #7c5cff 0%, var(--blue) 100%);
  -webkit-background-clip: text;
  background-clip: text;
}
.sanc-box__go {
  position: absolute;
  right: 18px;
  bottom: 18px;
  z-index: 2;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--navy);
  color: #fff;
  box-shadow: 0 0 0 6px #fff;
  transition:
    transform 0.25s var(--ease),
    background 0.25s;
}
.sanc-box__go:hover {
  transform: scale(1.07);
  background: var(--blue);
}
.sanc-box__go svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.sanc-box--big .sanc-box__word {
  right: 96px;
}
@media (max-width: 980px) {
  .sanc__intro {
    grid-template-columns: 1fr;
  }
  .sanc__visual {
    min-height: 380px;
  }
  .sanc-bento {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: none;
    grid-auto-rows: minmax(250px, auto);
    height: auto;
  }
  .sanc-box--dark {
    grid-column: 1;
    grid-row: 1 / 3;
  }
  .sanc-box--light {
    grid-column: 2;
    grid-row: 1;
  }
  .sanc-box--grad {
    grid-column: 2;
    grid-row: 2;
  }
  .sanc-box--big {
    grid-column: 1 / -1;
    grid-row: 3;
    min-height: 340px;
  }
  .sanc-box--big .sanc-box__body {
    max-width: 60%;
  }
}
@media (max-width: 600px) {
  .sanc-bento {
    grid-template-columns: 1fr;
  }
  .sanc-box--dark,
  .sanc-box--light,
  .sanc-box--grad,
  .sanc-box--big {
    grid-column: 1;
    grid-row: auto;
  }
  .sanc-box--dark {
    min-height: 360px;
  }
  .sanc-box--big .sanc-box__body {
    max-width: 100%;
  }
  .sanc-box__word,
  .sanc__visual-word {
    display: none;
  }
}

/* ------------------------------------------------------ agentic AI, 6 steps */
/* Agentic AI: tek sözcüğü gradyanlı dev başlık, sağda tanıtım + buton, altında
   12 kolonlu karışık genişlikte kart ızgarası (4+5+3 / 3+4+5). */
.agentic {
  position: relative;
  padding: 12vh 0;
  background: var(--mist);
  overflow: hidden;
}
.agentic__glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(38% 46% at 26% 22%, rgba(19, 96, 239, 0.16) 0%, transparent 70%),
    radial-gradient(26% 36% at 62% 16%, rgba(12, 159, 110, 0.1) 0%, transparent 70%);
}
/* başlık .wrap içinde; ızgara kenardan kenara, dar bir oluk payıyla */
.agentic__head,
.agbento {
  position: relative;
}
.agentic__head {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
  gap: 32px 64px;
  align-items: center;
}
@media (max-width: 900px) {
  .agentic__head {
    grid-template-columns: 1fr;
  }
}
.agentic__title {
  margin-top: 14px;
  max-width: 13ch;
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(2.3rem, 5.4vw, 4.4rem);
  line-height: 1.02;
  letter-spacing: -0.035em;
  color: var(--navy);
}
.agentic__title em {
  font-style: normal;
  background: linear-gradient(90deg, var(--blue) 0%, #5aa0ff 55%, #21b7a3 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.agentic__intro {
  display: grid;
  gap: 22px;
  justify-items: start;
}
.agentic__intro p {
  max-width: 40ch;
  font-size: 15px;
  line-height: 1.6;
  color: var(--slate);
}
.agentic__intro .btn svg {
  width: 13px;
  height: 13px;
}

.agbento {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 16px;
  margin-top: 64px;
  padding-inline: clamp(12px, 1.6vw, 24px);
}
.agcard {
  position: relative;
  grid-column: span 4;
  display: flex;
  flex-direction: column;
  gap: 22px;
  min-height: 380px;
  padding: 26px;
  border-radius: 24px;
  background: #fff;
  color: var(--navy);
  box-shadow: 0 1px 2px rgba(7, 23, 51, 0.04);
}
.agcard--s {
  grid-column: span 3;
}
.agcard--wide {
  grid-column: span 5;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  align-items: end;
  gap: 22px 28px;
}
/* İki sütun 06 numaralı kart için var: solda gövde, sağda .agcard__stat.
   02 numaralı kartta sağ sütunu dolduran bir öge yok, sütun boş duruyor ve
   gövde kartın yarısına sıkışıyor: 1380px'de 628px'lik kartta metin alanı
   239px kalıyordu. Sağ sütunun sahibi yoksa tek sütun. */
.agcard--wide:not(:has(.agcard__stat)) {
  grid-template-columns: minmax(0, 1fr);
}
.agcard--dark {
  background: var(--navy);
  color: #fff;
}
.agcard__n {
  position: absolute;
  top: 22px;
  right: 24px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: #b9c6dd;
}
.agcard--dark .agcard__n {
  color: rgba(255, 255, 255, 0.45);
}
.agcard__body {
  display: grid;
  gap: 12px;
  align-self: start;
  padding-right: 36px;
}
.agcard h3 {
  font-family: var(--display);
  font-size: clamp(1.7rem, 2.8vw, 2.5rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.05;
}
.agcard ul {
  list-style: none;
  display: grid;
  gap: 8px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--slate);
}
.agcard--dark ul {
  color: rgba(255, 255, 255, 0.72);
}
.agcard li {
  display: flex;
  gap: 9px;
  align-items: flex-start;
}
.agcard li::before {
  content: "";
  flex: none;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--blue);
  margin-top: 8px;
}
.agcard--dark li::before {
  background: var(--blue-l);
}
/* Kart arka planları: görsel altta, üstünde okunurluk için örtü, içerik en üstte.
   Açık kartlarda örtü sol-üstten beyaz, koyu kartlarda lacivertten saydama akar. */
.agcard {
  isolation: isolate;
  overflow: hidden;
}
.agcard__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right bottom;
}
.agcard::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.92) 0%, rgba(255, 255, 255, 0.72) 42%, rgba(255, 255, 255, 0.08) 100%),
    linear-gradient(90deg, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0) 60%);
}
.agcard--dark::after {
  background:
    linear-gradient(180deg, rgba(7, 23, 51, 0.88) 0%, rgba(7, 23, 51, 0.55) 45%, rgba(7, 23, 51, 0.1) 100%),
    linear-gradient(90deg, rgba(7, 23, 51, 0.5) 0%, rgba(7, 23, 51, 0) 60%);
}
.agcard__body,
.agcard__prompt,
.agcard__stat,
.agcard__quote {
  position: relative;
  z-index: 1;
}
.agcard__n {
  z-index: 1; /* konumu yukarıda absolute; yalnızca örtünün üstüne çıkar */
}
/* 01: istem balonu + taslak kural çipi */
.agcard__prompt {
  display: grid;
  gap: 10px;
  justify-items: start;
  margin-top: auto;
}
.agcard__bubble {
  max-width: 30ch;
  padding: 10px 13px;
  border-radius: 14px 14px 14px 4px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.08);
  font-family: var(--mono);
  font-size: 11.5px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.86);
}
.agcard__chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 11px;
  border-radius: 999px;
  background: rgba(12, 159, 110, 0.16);
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #9fe8c8;
}
.agcard__chip i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--pass);
  box-shadow: 0 0 0 4px rgba(12, 159, 110, 0.25);
}
/* 06: kontur rakam + kapanış cümlesi */
.agcard__stat {
  align-self: end;
}
.agcard__stat b {
  display: block;
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(2.6rem, 4.3vw, 4.4rem);
  line-height: 0.95;
  letter-spacing: -0.05em;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(255, 255, 255, 0.72);
}
/* Etiket kartın fotoğrafı üzerinde duruyor; %70 opaklıkta parmak izi deseninin
   açık çizgileri üzerinde okunmuyordu. Kendi zemini ve daha yüksek kontrast. */
.agcard__stat span {
  display: block;
  max-width: 24ch;
  margin-top: 10px;
  padding: 6px 10px;
  border-radius: 8px;
  background: rgba(4, 13, 34, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  font-size: 12.5px;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.92);
}
.agcard__quote {
  grid-column: 1 / -1;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1rem, 1.5vw, 1.25rem);
  letter-spacing: -0.02em;
  color: #fff;
}
@media (max-width: 980px) {
  .agbento {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .agcard,
  .agcard--s {
    grid-column: span 1;
  }
  .agcard--wide {
    grid-column: span 2;
  }
}
@media (max-width: 600px) {
  .agbento {
    grid-template-columns: 1fr;
  }
  .agcard,
  .agcard--wide {
    grid-column: span 1;
    display: flex;
  }
  .agcard {
    min-height: 0;
  }
}

/* -------------------------------------- not complex, not expensive (value) */
.value {
  padding: 12vh 0;
  background: var(--mist);
  border-block: 1px solid var(--line);
}
.value__grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 54px;
  align-items: center;
}
@media (max-width: 980px) {
  .value__grid {
    grid-template-columns: 1fr;
  }
}
/* sol sütun: yeni bölümlerin resimli kartı — marka render'ı, koyu etiket,
   tek büyük rakam, sağ kenarda dikey kelime, köşede yuvarlak ok */
.value__visual {
  align-self: stretch;
}
.value-card {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  height: 100%;
  min-height: 560px;
  border-radius: 25px;
  background: #e9eef9;
  color: var(--navy);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 28px 28px 30px;
  box-shadow: 0 24px 60px rgba(7, 23, 51, 0.1);
}
.value-card__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% 42%;
}
.value-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(233, 238, 249, 0) 38%, rgba(233, 238, 249, 0.9) 74%, rgba(233, 238, 249, 0.98) 100%);
}
.value-card__tag {
  position: absolute;
  top: 22px;
  left: 22px;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border-radius: 999px;
  background: rgba(7, 23, 51, 0.9);
  color: #fff;
  font: 500 11px/1 var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.value-card__tag i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--pass);
  box-shadow: 0 0 0 4px rgba(12, 159, 110, 0.25);
}
.value-card__word {
  position: absolute;
  right: 22px;
  bottom: 22px;
  z-index: 1;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(3rem, 6vw, 5.6rem);
  line-height: 1;
  letter-spacing: -0.04em;
  background: linear-gradient(180deg, var(--pass) 0%, var(--blue) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  pointer-events: none;
}
.value-card__body {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 10px;
  max-width: 68%;
}
.value-card__num {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(4rem, 7vw, 6.4rem);
  line-height: 0.9;
  letter-spacing: -0.05em;
}
.value-card__num small {
  font-size: 0.45em;
  color: var(--blue);
  letter-spacing: -0.03em;
}
.value-card__body p {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--slate);
  max-width: 34ch;
}
.value-card__go {
  position: absolute;
  right: 18px;
  bottom: 18px;
  z-index: 2;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--navy);
  color: #fff;
  box-shadow: 0 0 0 6px #fff;
  transition:
    transform 0.25s var(--ease),
    background 0.25s;
}
.value-card__go:hover {
  transform: scale(1.07);
  background: var(--blue);
}
.value-card__go svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.value-card__word {
  right: 84px;
}
@media (max-width: 980px) {
  .value-card {
    min-height: 440px;
  }
}
@media (max-width: 600px) {
  .value-card__word {
    display: none;
  }
  .value-card__body {
    max-width: 100%;
  }
}
.vitem {
  display: flex;
  gap: 16px;
  margin-top: 26px;
}
.vitem__ico {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: var(--blue-50);
  display: grid;
  place-items: center;
  flex: none;
}
.vitem__ico svg {
  width: 20px;
  height: 20px;
  stroke: var(--blue);
  stroke-width: 1.7;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.vitem h3 {
  font-family: var(--display);
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.vitem p {
  font-size: 13.5px;
  color: var(--slate);
  margin-top: 5px;
  line-height: 1.55;
}

/* deck 7, value'nun altında tam genişlik bento: koyu sektör kartı, gradyan
   kontrol kartı, dikey yazılı büyük entegrasyon kartı */
.value-bento {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 3fr) minmax(0, 6fr);
  gap: 18px;
  min-height: clamp(460px, 34vw, 540px);
  margin: 72px auto 0;
  width: min(100% - 2 * clamp(12px, 1.5vw, 20px), var(--bleed-max));
}
.value-box {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 24px;
  padding: 28px;
  border-radius: 25px;
  color: #fff;
  background: var(--navy);
  transition:
    transform 0.3s var(--ease),
    box-shadow 0.3s;
}
.value-box:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 60px rgba(7, 23, 51, 0.16);
}
.value-box--sectors {
  justify-content: space-between;
  background: linear-gradient(180deg, #040d22 0%, var(--navy) 42%, #08214a 100%);
}
.value-box__glow,
.value-box__grid {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
.value-box__glow {
  background:
    radial-gradient(62% 42% at 18% 100%, rgba(19, 96, 239, 0.7) 0%, transparent 70%),
    radial-gradient(46% 36% at 92% 58%, rgba(12, 159, 110, 0.32) 0%, transparent 70%);
}
.value-box__grid {
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(90% 62% at 50% 0%, #000 0%, transparent 82%);
  -webkit-mask-image: radial-gradient(90% 62% at 50% 0%, #000 0%, transparent 82%);
}
.value-box--control {
  justify-content: space-between;
  background: linear-gradient(160deg, #1a5ee0 0%, #0b3fa8 100%);
}
.value-box--integ {
  color: var(--navy);
  background: #e9eef9;
}
.value-box__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 72%;
}
.value-box--integ::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(233, 238, 249, 0.97) 0%, rgba(233, 238, 249, 0.72) 48%, rgba(233, 238, 249, 0) 78%);
}
.value-box__ico {
  flex: none;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.18);
}
.value-box__ico svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: #fff;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.value-box__body {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 14px;
}
.value-box h3 {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.7rem, 2.8vw, 2.5rem);
  letter-spacing: -0.03em;
  line-height: 1.05;
  max-width: 16ch;
}
/* Sektör kutusunun giriş cümlesi (2026-08-30). */
.value-box--sectors p {
  font-size: 13.5px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.8);
  max-width: 44ch;
}
.value-box__tags {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.value-box__tags li {
  font: 500 11px/1 var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 9px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.06);
  color: #c9d8f5;
}
.value-box__list {
  list-style: none;
  display: grid;
  gap: 12px;
}
.value-box__list li {
  display: grid;
  gap: 2px;
  padding-left: 18px;
  position: relative;
  font-size: 13.5px;
  line-height: 1.5;
}
.value-box__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--pass);
}
.value-box__list b {
  font-weight: 600;
}
.value-box--control .value-box__list span {
  color: rgba(255, 255, 255, 0.82);
}
.value-box--integ .value-box__list span {
  color: var(--slate);
}
.value-box--integ .value-box__body {
  max-width: 48%;
}
/* Canlıya geçiş adımları: madde imi yerine sıra numarası. */
.value-box__list--steps {
  counter-reset: step;
  gap: 10px;
}
.value-box__list--steps li::before {
  counter-increment: step;
  content: counter(step);
  top: 0;
  width: auto;
  height: auto;
  border-radius: 0;
  background: none;
  font: 700 11.5px/1.5 var(--mono);
  color: var(--blue);
}
.value-box__note {
  display: block;
  margin-top: 4px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--slate);
}
.value-box__word {
  position: absolute;
  right: 84px;
  bottom: 22px;
  z-index: 1;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(3rem, 6vw, 5.6rem);
  line-height: 1;
  letter-spacing: -0.04em;
  background: linear-gradient(180deg, #7c5cff 0%, var(--blue) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  pointer-events: none;
}
.value-box__go {
  position: absolute;
  right: 18px;
  bottom: 18px;
  z-index: 2;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--navy);
  color: #fff;
  box-shadow: 0 0 0 6px #fff;
  transition:
    transform 0.25s var(--ease),
    background 0.25s;
}
.value-box__go:hover {
  transform: scale(1.07);
  background: var(--blue);
}
.value-box__go svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
@media (max-width: 980px) {
  .value-bento {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    min-height: 0;
  }
  .value-box {
    min-height: 380px;
  }
  .value-box--integ {
    grid-column: 1 / -1;
  }
  .value-box--integ .value-box__body {
    max-width: 62%;
  }
}
@media (max-width: 600px) {
  .value-bento {
    grid-template-columns: 1fr;
  }
  .value-box--integ .value-box__body {
    max-width: 100%;
  }
  .value-box__word {
    display: none;
  }
}

/* ==========================================================================
   22. ONAY ÇUBUĞU (ölçüm çerezleri)
   Sınıf adı .cbar, .consent değil: .consent formlardaki KVKK onay kutusunun
   adı ve bu dosya tek düz katman olduğu için aynı adı ikinci kez tanımlamak o
   kutuyu sessizce bozardı.
   Yığın sırası dil seçicinin açılır listesinin (210) üstünde, iletişim
   modalının (300) altında: modal açıkken çubuk onun önüne geçmiyor.
   ========================================================================== */
.cbar {
  position: fixed;
  z-index: 250;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  width: min(760px, calc(100% - 28px));
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 22px;
  padding: 16px 20px;
  border-radius: 14px;
  background: var(--navy);
  color: var(--white);
  box-shadow: 0 18px 50px rgba(7, 23, 51, 0.3);
}
/* display: flex, tarayıcının kendi [hidden] kuralından daha özgül: bu satır
   olmadan sunucudan hidden gelen çubuk her sayfada görünüyor ve betiğin
   bar.hidden = true demesi de onu kapatamıyor. */
.cbar[hidden] {
  display: none;
}
.cbar__text {
  flex: 1 1 320px;
  font-size: 13.5px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.85);
}
.cbar__text a {
  color: var(--blue-l);
  text-decoration: underline;
  text-underline-offset: 2px;
  white-space: nowrap;
}
.cbar__btns {
  display: flex;
  flex: 0 0 auto;
  gap: 10px;
}
/* Beyaz zeminli varyant lacivert çubukta kabul düğmesinden daha baskın
   görünüyordu; koyu zeminde çerçeveli hale çekiliyor. */
.cbar .btn--line {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.32);
  color: var(--white);
}
.cbar .btn--line:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--white);
  color: var(--white);
}
@media (max-width: 560px) {
  .cbar {
    bottom: 10px;
    padding: 14px 16px;
  }
  .cbar__btns {
    width: 100%;
  }
  .cbar__btns .btn {
    flex: 1 1 0;
    justify-content: center;
  }
}