/* ==========================================================================
   VERKA Bilgi Teknolojileri - Tasarım Sistemi
   Tek dosya, saf CSS, harici import yok. Koyu tema odaklı, mobil öncelikli.
   Sahip: Ekip üyesi A. Sınıf sözleşmesi: CONTRACT.md bölüm 4.
   --------------------------------------------------------------------------
   İÇİNDEKİLER
   01. Design token'lar (:root)
   02. Reset ve temel tipografi
   03. Yerleşim (container, section, grid)
   04. Başlık ve metin blokları
   05. Buton
   06. Kart, adım, istatistik, rozet, etiket, not
   07. SSS (details/summary)
   08. Header, logo, masaüstü menü, mega menü
   09. Burger ve mobil menü
   10. Hero, breadcrumb, CTA bandı
   11. Form
   12. Footer
   13. Yardımcı sınıflar ve reveal animasyonu
   14. Kırılma noktaları (640 / 900 / 1200)
   15. Hareket azaltma ve yazdırma
   ========================================================================== */

/* ==========================================================================
   01. DESIGN TOKEN'LAR
   ========================================================================== */

:root {
  /* --- Marka renkleri (CONTRACT bölüm 2, değişmez) --- */
  --v-navy: #061225;          /* Gece Laciverti - ana zemin */
  --v-blue: #069BDE;          /* Elektrik Mavisi - vurgu */
  --v-blue-deep: #0B4EA2;     /* Derin Mavi - ikincil vurgu */
  --v-silver: #C8D0D8;        /* Metalik Gümüş - gövde metni */
  --v-white: #FFFFFF;

  /* --- Türetilmiş lacivert yüzey tonları --- */
  --v-surface-1: #0A1B33;     /* Yükseltilmiş yüzey (kart, panel) */
  --v-surface-2: #0D2340;     /* Daha yüksek yüzey (hover, alt bölüm) */
  --v-surface-3: #123055;     /* En yüksek yüzey / kenarlık dolgusu */
  --v-navy-deep: #030B18;     /* Footer, en derin zemin */

  /* --- Metin renkleri (kontrast oranları #061225 zemine karşı) --- */
  --v-text: var(--v-silver);        /* 11.9:1  - gövde */
  --v-text-strong: var(--v-white);  /* 17.8:1  - başlık */
  --v-text-dim: #93A2B4;            /*  7.1:1  - ikincil metin */
  --v-text-muted: #7C8CA0;          /*  5.4:1  - meta/etiket, AA sınırının üstünde */
  --v-link: var(--v-blue);          /*  6.0:1  - bağlantı */
  --v-link-hover: #4CBDF0;

  /* --- Kenarlık --- */
  --v-border: rgba(200, 208, 216, 0.12);
  --v-border-strong: rgba(200, 208, 216, 0.2);
  --v-border-accent: rgba(6, 155, 222, 0.45);

  /* --- Gradyanlar (elektrik mavisi + derin mavi birlikte) --- */
  --v-grad-accent: linear-gradient(135deg, var(--v-blue) 0%, var(--v-blue-deep) 100%);
  --v-grad-btn: linear-gradient(135deg, #0B4EA2 0%, #0A78B8 100%);
  --v-grad-surface: linear-gradient(160deg, var(--v-surface-1) 0%, var(--v-navy) 100%);
  --v-grad-line: linear-gradient(90deg, transparent, var(--v-border-accent), transparent);

  /* --- Arka plan dokuları: logodaki devre çizgisi (circuit) motifi --- */
  --v-tex-circuit: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cg fill='none' stroke='%23069BDE' stroke-width='1.2' stroke-linecap='round'%3E%3Cpath d='M0 36h34l16 16h44'/%3E%3Cpath d='M160 108h-30l-18-18H74'/%3E%3Cpath d='M52 160v-34l14-14V70'/%3E%3Cpath d='M108 0v28l-14 14v34'/%3E%3Cpath d='M0 128h22l14-14'/%3E%3C/g%3E%3Cg fill='%23069BDE'%3E%3Ccircle cx='94' cy='52' r='3'/%3E%3Ccircle cx='74' cy='90' r='3'/%3E%3Ccircle cx='66' cy='70' r='3'/%3E%3Ccircle cx='94' cy='76' r='3'/%3E%3Ccircle cx='36' cy='114' r='3'/%3E%3C/g%3E%3C/svg%3E");
  /* Kalkan silueti - bölüm arka planında çok soluk filigran */
  --v-tex-shield: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='280' viewBox='0 0 240 280'%3E%3Cpath d='M120 8 232 46v96c0 66-46 108-112 130C54 250 8 208 8 142V46Z' fill='none' stroke='%23069BDE' stroke-width='2'/%3E%3Cpath d='M120 40 200 68v72c0 48-34 79-80 95-46-16-80-47-80-95V68Z' fill='none' stroke='%23069BDE' stroke-width='1'/%3E%3C/svg%3E");

  /* --- Boşluk ölçeği (4px tabanlı) --- */
  --v-sp-1: 0.25rem;
  --v-sp-2: 0.5rem;
  --v-sp-3: 0.75rem;
  --v-sp-4: 1rem;
  --v-sp-5: 1.5rem;
  --v-sp-6: 2rem;
  --v-sp-7: 2.5rem;
  --v-sp-8: 3rem;
  --v-sp-9: 4rem;
  --v-sp-10: 5rem;
  /* Akıcı bölüm boşluğu */
  --v-section-y: clamp(3rem, 2rem + 5vw, 6.5rem);
  --v-gutter: clamp(1rem, 0.65rem + 1.6vw, 2rem);

  /* --- Kapsayıcı genişlikleri --- */
  --v-container: 1200px;
  --v-container-wide: 1400px;
  --v-measure: 68ch; /* okunabilir satır uzunluğu */

  /* --- Yazı tipi --- */
  --v-font-head: "Montserrat", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --v-font-body: "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;

  /* --- Yazı ölçeği (clamp ile akıcı) --- */
  --v-fs-xs: 0.75rem;
  --v-fs-sm: 0.8125rem;
  --v-fs-base: clamp(1rem, 0.97rem + 0.13vw, 1.0625rem);
  --v-fs-md: clamp(1.0625rem, 1.02rem + 0.2vw, 1.125rem);
  --v-fs-lead: clamp(1.0625rem, 0.99rem + 0.45vw, 1.3125rem);
  --v-fs-h3: clamp(1.1875rem, 1.09rem + 0.5vw, 1.5rem);
  --v-fs-h2: clamp(1.625rem, 1.32rem + 1.45vw, 2.5rem);
  --v-fs-h1: clamp(2rem, 1.55rem + 2.2vw, 3.375rem);

  --v-lh-tight: 1.15;
  --v-lh-head: 1.22;
  --v-lh-body: 1.7;

  /* --- Köşe yarıçapı --- */
  --v-r-xs: 4px;
  --v-r-sm: 8px;
  --v-r-md: 12px;
  --v-r-lg: 18px;
  --v-r-xl: 26px;
  --v-r-pill: 999px;

  /* --- Gölge ve kontrollü glow --- */
  --v-shadow-sm: 0 2px 8px rgba(2, 8, 18, 0.4);
  --v-shadow-md: 0 10px 28px -8px rgba(2, 8, 18, 0.65);
  --v-shadow-lg: 0 26px 60px -20px rgba(2, 8, 18, 0.8);
  --v-glow: 0 0 0 1px rgba(6, 155, 222, 0.28), 0 8px 28px -10px rgba(6, 155, 222, 0.45);
  --v-glow-strong: 0 0 0 1px rgba(6, 155, 222, 0.45), 0 14px 40px -12px rgba(6, 155, 222, 0.55);
  --v-ring: 0 0 0 2px var(--v-navy), 0 0 0 4px var(--v-blue);

  /* --- Geçiş --- */
  --v-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --v-t-fast: 140ms;
  --v-t: 220ms;
  --v-t-slow: 420ms;

  /* --- Yapısal --- */
  --v-header-h: 64px;
  --v-z-header: 100;
  --v-z-mega: 110;
  --v-z-mobile: 200;

  color-scheme: dark;
}

/* ==========================================================================
   02. RESET VE TEMEL TİPOGRAFİ
   ========================================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--v-header-h) + var(--v-sp-5));
  /* Mobil menü açılıp gövde kilitlendiğinde kaydırma çubuğu kaybolup
     sayfanın yana sıçramaması için yer sabit tutulur (JS ile inline stil
     yazmaya gerek kalmaz - sıkı CSP uyumlu). */
  scrollbar-gutter: stable;
}

body {
  margin: 0;
  /* 360px'te yatay kaydırma olmaması için taban güvenlik */
  min-width: 0;
  overflow-x: hidden;
  background-color: var(--v-navy);
  background-image:
    radial-gradient(1100px 620px at 78% -8%, rgba(11, 78, 162, 0.28), transparent 62%),
    radial-gradient(760px 520px at 4% 6%, rgba(6, 155, 222, 0.12), transparent 60%);
  background-repeat: no-repeat;
  background-attachment: scroll;
  color: var(--v-text);
  font-family: var(--v-font-body);
  font-size: var(--v-fs-base);
  font-weight: 400;
  line-height: var(--v-lh-body);
  /* Uzun e-posta/URL gibi bölünemeyen metinler 360px'te taşmasın */
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Mobil menü açıkken arka plan kaydırması kilitlenir (JS ekler) */
body.v-scroll-lock {
  overflow: hidden;
  touch-action: none;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0 0 var(--v-sp-4);
  font-family: var(--v-font-head);
  font-weight: 700;
  line-height: var(--v-lh-head);
  color: var(--v-text-strong);
  letter-spacing: -0.015em;
  text-wrap: balance;
}

p { margin: 0 0 var(--v-sp-4); }
p:last-child { margin-bottom: 0; }

a {
  color: var(--v-link);
  text-decoration: none;
  transition: color var(--v-t) var(--v-ease);
}
a:hover { color: var(--v-link-hover); }

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

ul, ol { margin: 0 0 var(--v-sp-4); padding-left: 1.25rem; }
li { margin-bottom: var(--v-sp-2); }

strong, b { color: var(--v-text-strong); font-weight: 600; }

hr {
  height: 1px;
  margin: var(--v-sp-7) 0;
  border: 0;
  background: var(--v-grad-line);
}

code, pre, kbd, samp {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.9em;
}

button, input, select, textarea { font: inherit; color: inherit; }

table { width: 100%; border-collapse: collapse; }
th, td {
  padding: var(--v-sp-3);
  border-bottom: 1px solid var(--v-border);
  text-align: left;
}
th { color: var(--v-text-strong); font-family: var(--v-font-head); font-weight: 600; }

::selection { background: rgba(6, 155, 222, 0.35); color: var(--v-white); }

/* Odak halkası - yalnızca klavye ile gezinmede görünür (WCAG) */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--v-blue);
  outline-offset: 3px;
  border-radius: var(--v-r-xs);
}

/* İçeriğe atla bağlantısı - HTML .v-skip üretir; .v-skip-link eski ad (alias) */
.v-skip,
.v-skip-link {
  position: absolute;
  top: var(--v-sp-2);
  left: var(--v-sp-2);
  z-index: 500;
  padding: var(--v-sp-3) var(--v-sp-4);
  border-radius: var(--v-r-sm);
  background: var(--v-surface-2);
  color: var(--v-white);
  font-weight: 600;
  transform: translateY(-200%);
  transition: transform var(--v-t) var(--v-ease);
}
.v-skip:focus,
.v-skip:focus-visible,
.v-skip-link:focus,
.v-skip-link:focus-visible { transform: translateY(0); }

/* ==========================================================================
   03. YERLEŞİM
   ========================================================================== */

.v-container {
  width: 100%;
  max-width: var(--v-container);
  margin-inline: auto;
  padding-inline: var(--v-gutter);
}

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

.v-section {
  position: relative;
  padding-block: var(--v-section-y);
}

/* Hafif farklı zeminli bölüm + çok soluk devre dokusu */
.v-section--alt {
  background-color: var(--v-surface-1);
  border-block: 1px solid var(--v-border);
  isolation: isolate;
}
.v-section--alt::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: var(--v-tex-circuit);
  background-size: 320px 320px;
  opacity: 0.05;
  pointer-events: none;
}

/* Izgara - mobil öncelikli: tek sütun, sonra çoğalır */
.v-grid {
  display: grid;
  gap: var(--v-sp-5);
  grid-template-columns: 1fr;
  /* Uzun kelimelerin taşmasını engelle (360px güvenliği) */
  min-width: 0;
}
.v-grid > * { min-width: 0; }

/* Tek sütunda kalan ızgara - dar kolonlarda (ör. teklif sayfası süreç listesi)
   her kırılma noktasında tek sütun kalır. */
.v-grid--1 { grid-template-columns: minmax(0, 1fr); }

/* ==========================================================================
   04. BAŞLIK VE METİN BLOKLARI
   ========================================================================== */

.v-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--v-sp-2);
  margin: 0 0 var(--v-sp-3);
  font-family: var(--v-font-head);
  font-size: var(--v-fs-sm);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--v-blue);
}
.v-eyebrow::before {
  content: "";
  width: 22px;
  height: 2px;
  border-radius: var(--v-r-pill);
  background: var(--v-grad-accent);
  flex: none;
}

.v-h1 {
  margin: 0 0 var(--v-sp-4);
  font-family: var(--v-font-head);
  font-size: var(--v-fs-h1);
  font-weight: 800;
  line-height: var(--v-lh-tight);
  letter-spacing: -0.025em;
  color: var(--v-text-strong);
  text-wrap: balance;
}

.v-h2 {
  margin: 0 0 var(--v-sp-4);
  font-family: var(--v-font-head);
  font-size: var(--v-fs-h2);
  font-weight: 700;
  line-height: var(--v-lh-head);
  letter-spacing: -0.02em;
  color: var(--v-text-strong);
  text-wrap: balance;
}

.v-h3 {
  margin: 0 0 var(--v-sp-3);
  font-family: var(--v-font-head);
  font-size: var(--v-fs-h3);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--v-text-strong);
}

.v-lead {
  max-width: var(--v-measure);
  margin: 0 0 var(--v-sp-5);
  font-size: var(--v-fs-lead);
  font-weight: 300;
  line-height: 1.6;
  color: var(--v-text-dim);
}

/* Serbest metin bloğu - sayfa içeriği için varsayılan ritim */
.v-prose {
  max-width: var(--v-measure);
  font-size: var(--v-fs-md);
  color: var(--v-text);
}
.v-prose > * + * { margin-top: var(--v-sp-4); }
.v-prose p { margin: 0; }
.v-prose h2 { margin: var(--v-sp-7) 0 var(--v-sp-3); font-size: var(--v-fs-h2); }
.v-prose h3 { margin: var(--v-sp-6) 0 var(--v-sp-2); font-size: var(--v-fs-h3); }
.v-prose > :first-child { margin-top: 0; }
.v-prose ul,
.v-prose ol { margin: 0; padding-left: 1.35rem; }
.v-prose ul { list-style: none; padding-left: 0; }
.v-prose ul > li {
  position: relative;
  padding-left: 1.6rem;
  margin-bottom: var(--v-sp-3);
}
.v-prose ul > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.66em;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: var(--v-grad-accent);
  box-shadow: 0 0 0 3px rgba(6, 155, 222, 0.12);
}
.v-prose ol > li { margin-bottom: var(--v-sp-3); padding-left: 0.25rem; }
.v-prose ol > li::marker { color: var(--v-blue); font-weight: 600; }
.v-prose a { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.v-prose blockquote {
  margin: 0;
  padding: var(--v-sp-4) var(--v-sp-5);
  border-left: 3px solid var(--v-blue);
  border-radius: 0 var(--v-r-md) var(--v-r-md) 0;
  background: var(--v-surface-1);
  color: var(--v-text-dim);
}

/* ==========================================================================
   05. BUTON
   ========================================================================== */

.v-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--v-sp-2);
  min-height: 46px;
  padding: 0.7rem 1.35rem;
  border: 1px solid transparent;
  border-radius: var(--v-r-pill);
  background: transparent;
  color: var(--v-text-strong);
  font-family: var(--v-font-head);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.2;
  max-width: 100%;
  text-align: center;
  text-decoration: none;
  /* 360px'te uzun Türkçe etiketler taşmasın diye sarma serbest */
  white-space: normal;
  overflow-wrap: break-word;
  cursor: pointer;
  transition:
    transform var(--v-t) var(--v-ease),
    box-shadow var(--v-t) var(--v-ease),
    background-color var(--v-t) var(--v-ease),
    border-color var(--v-t) var(--v-ease),
    color var(--v-t) var(--v-ease);
}
.v-btn:hover { color: var(--v-white); }
.v-btn:active { transform: translateY(1px); }
.v-btn:focus-visible { outline: 2px solid var(--v-blue); outline-offset: 3px; }
.v-btn[disabled],
.v-btn[aria-disabled="true"] { opacity: 0.55; pointer-events: none; }
.v-btn .v-icon { width: 1.15em; height: 1.15em; }

/* Birincil - derin mavi/elektrik mavisi gradyan, kontrollü glow */
.v-btn--primary {
  background-image: var(--v-grad-btn);
  color: var(--v-white);
  box-shadow: var(--v-shadow-sm), inset 0 1px 0 rgba(255, 255, 255, 0.16);
}
.v-btn--primary:hover {
  color: var(--v-white);
  transform: translateY(-2px);
  box-shadow: var(--v-glow-strong), inset 0 1px 0 rgba(255, 255, 255, 0.22);
}
.v-btn--primary:active { transform: translateY(0); }

/* Hayalet - ince kenarlıklı, cam etkili */
.v-btn--ghost {
  border-color: var(--v-border-strong);
  background-color: rgba(200, 208, 216, 0.04);
  color: var(--v-text-strong);
}
.v-btn--ghost:hover {
  border-color: var(--v-border-accent);
  background-color: rgba(6, 155, 222, 0.1);
  transform: translateY(-2px);
  box-shadow: var(--v-glow);
}

.v-btn--lg {
  min-height: 54px;
  padding: 0.95rem 1.9rem;
  font-size: 1.0625rem;
}

.v-btn--sm {
  min-height: 38px;
  padding: 0.4rem 0.95rem;
  font-size: 0.8125rem;
}

/* ==========================================================================
   06. KART, ADIM, İSTATİSTİK, ROZET, ETİKET, NOT
   ========================================================================== */

.v-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--v-sp-3);
  padding: var(--v-sp-5);
  border: 1px solid var(--v-border);
  border-radius: var(--v-r-lg);
  background-color: var(--v-surface-1);
  background-image: linear-gradient(160deg, rgba(18, 48, 85, 0.55) 0%, rgba(10, 27, 51, 0) 60%);
  box-shadow: var(--v-shadow-sm);
  overflow: hidden;
}
/* Üst kenarda ince mavi ışık şeridi */
.v-card::before {
  content: "";
  position: absolute;
  inset-inline: 12%;
  top: 0;
  height: 1px;
  background: var(--v-grad-line);
  opacity: 0.7;
}

.v-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 48px;
  height: 48px;
  margin-bottom: var(--v-sp-1);
  border: 1px solid var(--v-border-accent);
  border-radius: var(--v-r-md);
  background-image: linear-gradient(140deg, rgba(6, 155, 222, 0.22), rgba(11, 78, 162, 0.28));
  color: var(--v-blue);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.v-card__icon .v-icon { width: 24px; height: 24px; }

.v-card__title {
  margin: 0;
  font-family: var(--v-font-head);
  font-size: var(--v-fs-h3);
  font-weight: 700;
  line-height: 1.3;
  color: var(--v-text-strong);
}

.v-card__body {
  margin: 0;
  color: var(--v-text-dim);
}
.v-card__body > :last-child { margin-bottom: 0; }

/* Tıklanabilir kart - hover'da hafif yükselme + mavi kenar vurgusu */
.v-card--link {
  color: inherit;
  text-decoration: none;
  transition:
    transform var(--v-t) var(--v-ease),
    border-color var(--v-t) var(--v-ease),
    box-shadow var(--v-t) var(--v-ease),
    background-color var(--v-t) var(--v-ease);
}
.v-card--link:hover,
.v-card--link:focus-visible {
  transform: translateY(-4px);
  border-color: var(--v-border-accent);
  background-color: var(--v-surface-2);
  box-shadow: var(--v-shadow-md), var(--v-glow);
  color: inherit;
}
.v-card--link:focus-visible { outline: 2px solid var(--v-blue); outline-offset: 3px; }
.v-card--link .v-card__title { transition: color var(--v-t) var(--v-ease); }
.v-card--link:hover .v-card__title { color: var(--v-blue); }
/* Kart sonundaki "Detay →" ipucu - HTML gerçek bir <span class="v-card__more">
   ürettiği için ::after oku kaldırıldı (yoksa iki ok üst üste binerdi). */
.v-card__more {
  display: inline-flex;
  align-items: center;
  gap: var(--v-sp-2);
  margin-top: auto;
  padding-top: var(--v-sp-2);
  color: var(--v-blue);
  font-family: var(--v-font-head);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: color var(--v-t) var(--v-ease);
}
.v-card__more .v-icon {
  width: 1.15em;
  height: 1.15em;
  transition: transform var(--v-t) var(--v-ease);
}
.v-card--link:hover .v-card__more { color: var(--v-link-hover); }
.v-card--link:hover .v-card__more .v-icon { transform: translateX(4px); }

/* --- Süreç adımı --- */
.v-step {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--v-sp-2);
  padding: var(--v-sp-5) var(--v-sp-5) var(--v-sp-5) var(--v-sp-5);
  border: 1px solid var(--v-border);
  border-radius: var(--v-r-lg);
  background-color: var(--v-surface-1);
}
.v-step__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  margin-bottom: var(--v-sp-2);
  border-radius: var(--v-r-pill);
  background-image: var(--v-grad-accent);
  color: var(--v-white);
  font-family: var(--v-font-head);
  font-size: 1.0625rem;
  font-weight: 800;
  letter-spacing: 0;
  box-shadow: 0 6px 18px -8px rgba(6, 155, 222, 0.7);
}
.v-step__title {
  margin: 0;
  font-family: var(--v-font-head);
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--v-text-strong);
}
.v-step__body { margin: 0; color: var(--v-text-dim); }

/* --- İstatistik --- */
.v-stat {
  display: flex;
  flex-direction: column;
  gap: var(--v-sp-1);
  padding: var(--v-sp-5);
  border: 1px solid var(--v-border);
  border-radius: var(--v-r-lg);
  background-color: rgba(10, 27, 51, 0.7);
  text-align: center;
}
.v-stat__value {
  font-family: var(--v-font-head);
  font-size: clamp(1.75rem, 1.4rem + 1.6vw, 2.75rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--v-white);
}
.v-stat p { margin: 0; }
.v-stat__label {
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--v-text-dim);
}
.v-stat__note {
  margin-top: var(--v-sp-1);
  font-family: var(--v-font-head);
  font-size: var(--v-fs-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--v-blue);
}
/* İstatistik ızgarası - kartlar aynı yükseklikte hizalansın */
.v-stats { align-items: stretch; }
.v-stats > .v-stat { height: 100%; justify-content: center; }

/* --- Rozet --- */
.v-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--v-sp-1);
  padding: 0.2rem 0.6rem;
  border: 1px solid var(--v-border-accent);
  border-radius: var(--v-r-pill);
  background-color: rgba(6, 155, 222, 0.12);
  color: var(--v-blue);
  font-family: var(--v-font-head);
  font-size: var(--v-fs-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.6;
  white-space: nowrap;
}
/* VERKAGUARD "Yakında" rozeti - amber tonlu ayrım */
.v-badge--soon {
  border-color: rgba(240, 185, 90, 0.45);
  background-color: rgba(240, 185, 90, 0.12);
  color: #F0C070;
}

/* --- Küçük etiket --- */
.v-tag {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.7rem;
  border: 1px solid var(--v-border);
  border-radius: var(--v-r-sm);
  background-color: rgba(200, 208, 216, 0.05);
  color: var(--v-text-dim);
  font-size: var(--v-fs-sm);
  font-weight: 500;
  line-height: 1.7;
  white-space: nowrap;
}
a.v-tag:hover {
  border-color: var(--v-border-accent);
  background-color: rgba(6, 155, 222, 0.1);
  color: var(--v-white);
}

/* --- Bilgi kutusu --- */
.v-note {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: var(--v-sp-3);
  padding: var(--v-sp-4) var(--v-sp-5);
  border: 1px solid var(--v-border);
  border-left: 3px solid var(--v-blue);
  border-radius: var(--v-r-md);
  background-color: rgba(6, 155, 222, 0.07);
  color: var(--v-text);
  font-size: 0.9375rem;
}
.v-note > :last-child { margin-bottom: 0; }
.v-note strong { color: var(--v-white); }
.v-note > .v-icon {
  width: 22px;
  height: 22px;
  margin-top: 2px;
  flex: none;
  color: var(--v-blue);
}
.v-note > div { min-width: 0; }
.v-note__title {
  margin: 0 0 var(--v-sp-2);
  font-family: var(--v-font-head);
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--v-white);
}

/* --- Inline SVG sarmalayıcı --- */
.v-icon {
  display: inline-block;
  width: 1.25em;
  height: 1.25em;
  flex: none;
  vertical-align: middle;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  color: inherit;
}
.v-icon--fill { fill: currentColor; stroke: none; }

/* ==========================================================================
   06b. BÖLÜM BAŞLIĞI, LİSTELER, PROMO VE İLETİŞİM BLOKLARI
   ========================================================================== */

/* Bölüm başlığı bloğu - eyebrow + h2 + lead sarmalayıcısı */
.v-section__head {
  max-width: var(--v-measure);
  margin: 0 0 var(--v-sp-7);
}
.v-section__head > :last-child { margin-bottom: 0; }
.v-section__head .v-lead { margin-bottom: 0; }
.v-section__head.v-center { margin-inline: auto; }

/* Süreç adımı ızgarası - <ol> olduğu için liste biçimi sıfırlanır */
.v-steps {
  margin: 0;
  padding-left: 0;
  list-style: none;
}
.v-steps > li { margin: 0; }

/* Onay işaretli liste */
.v-checklist {
  display: grid;
  gap: var(--v-sp-3);
  margin: 0 0 var(--v-sp-5);
  padding: 0;
  list-style: none;
}
.v-checklist > li {
  display: flex;
  align-items: flex-start;
  gap: var(--v-sp-3);
  margin: 0;
  line-height: 1.55;
  color: var(--v-text);
}
.v-checklist > li > .v-icon {
  width: 22px;
  height: 22px;
  margin-top: 2px;
  flex: none;
  color: var(--v-blue);
}

/* İki sütunlu varyant - 640px altında tek sütun kalır */
.v-checklist--2 { gap: var(--v-sp-3); }

/* Kart içi bağlantı listesi */
.v-linklist {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.v-linklist > li { margin: 0; }
.v-linklist a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--v-sp-3);
  padding: 0.45rem 0.6rem;
  border-radius: var(--v-r-sm);
  color: var(--v-text);
  font-size: 0.9375rem;
  line-height: 1.4;
  text-decoration: none;
  transition: background-color var(--v-t) var(--v-ease), color var(--v-t) var(--v-ease);
}
.v-linklist a:hover,
.v-linklist a:focus-visible {
  background-color: rgba(6, 155, 222, 0.12);
  color: var(--v-white);
}
.v-linklist .v-icon {
  width: 1.1em;
  height: 1.1em;
  flex: none;
  opacity: 0.5;
  color: var(--v-blue);
  transition: transform var(--v-t) var(--v-ease), opacity var(--v-t) var(--v-ease);
}
.v-linklist a:hover .v-icon { transform: translateX(3px); opacity: 1; }

/* --- Ürün tanıtım bloğu (VERKAGUARD) --- */
.v-promo {
  display: grid;
  gap: var(--v-sp-6);
  align-items: center;
}
.v-promo__body { min-width: 0; }
.v-promo__body > :last-child { margin-bottom: 0; }
.v-promo__body .v-badge { margin-bottom: var(--v-sp-4); }
.v-promo__note {
  margin: var(--v-sp-5) 0 0;
  font-size: 0.8125rem;
  color: var(--v-text-muted);
}
.v-promo__aside {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
}
.v-promo__aside img {
  width: clamp(120px, 28vw, 220px);
  height: auto;
  filter: drop-shadow(0 18px 40px rgba(6, 155, 222, 0.28));
}

/* --- Yasal metin sayfaları --- */
.v-legal .v-prose { max-width: 76ch; }
.v-legal .v-prose h2 { font-size: var(--v-fs-h3); }

/* --- İletişim bölümü --- */
.v-contact { align-items: start; }
.v-contact__info { min-width: 0; }
.v-contact__info > :last-child { margin-bottom: 0; }
.v-contact__form { min-width: 0; }

.v-contact__list {
  display: grid;
  gap: var(--v-sp-5);
  margin: 0 0 var(--v-sp-5);
  padding: 0;
  list-style: none;
}
.v-contact__list > li {
  display: flex;
  align-items: flex-start;
  gap: var(--v-sp-3);
  margin: 0;
}
.v-contact__list > li > .v-icon {
  width: 22px;
  height: 22px;
  margin-top: 3px;
  flex: none;
  color: var(--v-blue);
}
.v-contact__list > li > div { min-width: 0; }
.v-contact__list p { margin: 0 0 var(--v-sp-1); }
.v-contact__list p:last-child { margin-bottom: 0; }
.v-contact__list .v-icon { vertical-align: -0.2em; }

.v-contact__label {
  font-family: var(--v-font-head);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--v-text-muted);
}

/* ==========================================================================
   07. SSS - <details>/<summary>
   ========================================================================== */

.v-faq {
  display: flex;
  flex-direction: column;
  gap: var(--v-sp-3);
  max-width: 880px;
}

.v-faq__item {
  border: 1px solid var(--v-border);
  border-radius: var(--v-r-md);
  background-color: var(--v-surface-1);
  overflow: hidden;
  transition: border-color var(--v-t) var(--v-ease), background-color var(--v-t) var(--v-ease);
}
.v-faq__item:hover { border-color: var(--v-border-strong); }
.v-faq__item[open] {
  border-color: var(--v-border-accent);
  background-color: var(--v-surface-2);
}

.v-faq__q {
  display: flex;
  align-items: flex-start;
  gap: var(--v-sp-4);
  padding: var(--v-sp-4) var(--v-sp-5);
  cursor: pointer;
  font-family: var(--v-font-head);
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.45;
  color: var(--v-text-strong);
  list-style: none;
  user-select: none;
}
/* Tarayıcı varsayılan üçgenini kaldır */
.v-faq__q::-webkit-details-marker { display: none; }
.v-faq__q::marker { content: ""; }
.v-faq__q:focus-visible { outline: 2px solid var(--v-blue); outline-offset: -2px; }
.v-faq__q:hover { color: var(--v-blue); }

/* Dönen ok işareti */
.v-faq__q::after {
  content: "";
  flex: none;
  width: 10px;
  height: 10px;
  margin-top: 0.42em;
  margin-left: auto;
  border-right: 2px solid var(--v-blue);
  border-bottom: 2px solid var(--v-blue);
  transform: rotate(45deg);
  transform-origin: 60% 60%;
  transition: transform var(--v-t) var(--v-ease);
}
.v-faq__item[open] > .v-faq__q::after { transform: rotate(-135deg); }

.v-faq__a {
  padding: 0 var(--v-sp-5) var(--v-sp-5);
  color: var(--v-text-dim);
}
.v-faq__a > :last-child { margin-bottom: 0; }

/* ==========================================================================
   08. HEADER, LOGO, MASAÜSTÜ MENÜ, MEGA MENÜ
   ========================================================================== */

.v-header {
  position: sticky;
  top: 0;
  z-index: var(--v-z-header);
  border-bottom: 1px solid transparent;
  transition:
    border-color var(--v-t) var(--v-ease),
    box-shadow var(--v-t) var(--v-ease);
}
/* KRİTİK: buzlu cam katmanı header'ın KENDİSİNDE değil, sözde ögesinde durur.
   `backdrop-filter` uygulanan bir öge, içindeki position:fixed torunlar için
   kapsayan blok hâline gelir; efekt header üzerindeyken içindeki
   .v-mobile-nav (fixed, inset:0) tüm ekran yerine yalnızca header
   yüksekliği kadar açılıyordu. Sözde ögeye taşınınca hem cam etkisi hem de
   tam ekran mobil panel birlikte çalışır. */
.v-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-color: rgba(6, 18, 37, 0.82);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  transition: background-color var(--v-t) var(--v-ease);
  pointer-events: none;
}
/* Sayfa kaydırıldığında JS .is-scrolled ekler */
.v-header.is-scrolled { border-bottom-color: var(--v-border); box-shadow: var(--v-shadow-md); }
.v-header.is-scrolled::before { background-color: rgba(6, 18, 37, 0.95); }

.v-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--v-sp-4);
  min-height: var(--v-header-h);
  transition: min-height var(--v-t) var(--v-ease);
  width: 100%;
  max-width: var(--v-container-wide);
  margin-inline: auto;
  padding-inline: var(--v-gutter);
}

.v-logo {
  display: inline-flex;
  align-items: center;
  gap: var(--v-sp-3);
  flex: none;
  color: var(--v-white);
  font-family: var(--v-font-head);
  font-weight: 800;
  letter-spacing: 0.02em;
  text-decoration: none;
  border-radius: var(--v-r-sm);
}
.v-logo img,
.v-logo svg {
  width: auto;
  height: 44px;
  flex: none;
  filter: drop-shadow(0 2px 10px rgba(6, 155, 222, 0.28));
}
.v-logo:hover { color: var(--v-white); }
/* Not: genel `.v-logo span` kuralı kaldırıldı - 0,1,1 özgüllüğüyle aşağıdaki
   .v-logo__name / .v-logo__sub bildirimlerini eziyor ve iki satırlık kelime
   markasını yan yana diziyordu. */
.v-logo small {
  display: block;
  font-family: var(--v-font-body);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--v-text-muted);
}

/* Logo alt parçaları - kalkan işareti + iki satırlık kelime markası */
.v-logo__mark {
  width: auto;
  height: 46px;
  flex: none;
  filter: drop-shadow(0 3px 14px rgba(6, 155, 222, 0.42));
  transition: height var(--v-t) var(--v-ease);
}
.v-logo__text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1px;
  min-width: 0;
  line-height: 1.1;
}
.v-logo__name {
  display: block;
  font-family: var(--v-font-head);
  font-size: 1.0625rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1.1;
  color: var(--v-white);
}
.v-logo__sub {
  display: block;
  font-family: var(--v-font-body);
  font-size: 0.5625rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  line-height: 1.2;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--v-text-muted);
}

/* Masaüstü menü - 900px altında gizli, mobil panel devrede.
   Yatay dizilim <nav> üzerinde değil, gerçek liste olan .v-nav__list
   üzerinde kurulur (HTML: <nav class="v-nav"><ul class="v-nav__list">). */
.v-nav { display: none; }

.v-nav__list {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: var(--v-sp-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

.v-nav__item {
  position: relative;
  display: flex;
  align-items: center;
  margin: 0;
}

/* Mega menüsü olan öge - panel .v-header'a göre konumlansın diye static */
.v-nav__item--has-mega { position: static; }

.v-nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--v-sp-2);
  padding: 0.55rem 0.8rem;
  border-radius: var(--v-r-sm);
  color: var(--v-text);
  font-family: var(--v-font-head);
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--v-t) var(--v-ease), background-color var(--v-t) var(--v-ease);
}
.v-nav__link:hover,
.v-nav__item:hover > .v-nav__link,
.v-nav__item:focus-within > .v-nav__link {
  color: var(--v-white);
  background-color: rgba(6, 155, 222, 0.1);
}
/* Aktif sayfa - JS aria-current ekler */
.v-nav__link[aria-current="page"] { color: var(--v-blue); }
.v-nav__link[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 0.8rem;
  right: 0.8rem;
  bottom: 0.1rem;
  height: 2px;
  border-radius: var(--v-r-pill);
  background: var(--v-grad-accent);
}
/* Aktif bölüm (alt sayfadayken üst başlık) - daha silik işaret */
.v-nav__link[aria-current="true"] { color: var(--v-white); }
.v-nav__link[aria-current="true"]::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0.25rem;
  width: 5px;
  height: 5px;
  margin-left: -2.5px;
  border-radius: var(--v-r-pill);
  background-color: var(--v-blue);
}
/* Vurgulu bağlantı (VERKAGUARD) - ekstra sınıf */
.v-nav__link--highlight {
  border: 1px solid var(--v-border-accent);
  background-color: rgba(6, 155, 222, 0.1);
  color: var(--v-white);
}
.v-nav__link--highlight:hover { box-shadow: var(--v-glow); }
/* Mega menü olan bağlantıdaki küçük ok - HTML gerçek bir <span> üretiyor,
   bu yüzden ::before yerine sınıfın kendisi stillenir (çift ok olmasın). */
.v-nav__caret {
  display: block;
  order: 2;
  width: 7px;
  height: 7px;
  flex: none;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  opacity: 0.65;
  transition: transform var(--v-t) var(--v-ease);
}
.v-nav__item:hover > .v-nav__link .v-nav__caret,
.v-nav__item:focus-within > .v-nav__link .v-nav__caret,
.v-nav__item.is-open > .v-nav__link .v-nav__caret {
  transform: translateY(1px) rotate(-135deg);
  opacity: 1;
}
.v-nav__item.is-closed > .v-nav__link .v-nav__caret {
  transform: translateY(-2px) rotate(45deg);
}

/* Aktif sayfa - sunucuda üretilen .is-active durumu */
.v-nav__link.is-active { color: var(--v-blue); }
.v-nav__link.is-active::after {
  content: "";
  position: absolute;
  left: 0.8rem;
  right: 0.8rem;
  bottom: 0.1rem;
  height: 2px;
  border-radius: var(--v-r-pill);
  background: var(--v-grad-accent);
}
.v-nav__link--highlight.is-active { color: var(--v-white); }
.v-mega__link.is-active,
.v-mobile-nav__link.is-active { color: var(--v-blue); font-weight: 600; }

/* --- Mega menü paneli ---
   HTML: <div class="v-mega v-mega--wide" hidden>
           <div class="v-container v-container--wide v-mega__inner"> … </div>
         </div>
   Panel tam genişlikte bir banttır; ızgara içteki .v-mega__inner üzerindedir.
   `hidden` özniteliği HTML'de duruyor; açık `display` bildirimi onu geçersiz
   kılar, panel görünürlüğü opacity/visibility ile yönetilir. */
.v-mega {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: var(--v-z-mega);
  display: block;
  padding-block: var(--v-sp-6);
  border-top: 1px solid var(--v-border);
  border-bottom: 1px solid var(--v-border-strong);
  background-color: rgba(10, 27, 51, 0.98);
  background-image: linear-gradient(160deg, rgba(18, 48, 85, 0.75), rgba(6, 18, 37, 0.97));
  box-shadow: var(--v-shadow-lg), 0 0 0 1px rgba(6, 155, 222, 0.08);
  /* Kapalı durum */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-8px);
  /* visibility anında açılır, kapanırken geçişten sonra gizlenir */
  transition:
    opacity var(--v-t) var(--v-ease),
    transform var(--v-t) var(--v-ease),
    visibility 0s linear var(--v-t);
}
/* Fare ile menü arasındaki boşlukta hover kopmasın */
.v-mega::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -14px;
  height: 14px;
}
/* Açılış: hover, klavye (focus-within) ve JS (.is-open) */
.v-nav__item:hover > .v-mega,
.v-nav__item:focus-within > .v-mega,
.v-nav__item.is-open > .v-mega {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
  transition:
    opacity var(--v-t) var(--v-ease),
    transform var(--v-t) var(--v-ease),
    visibility 0s linear 0s;
}

/* Escape ile kapatıldığında focus-within'i geçersiz kılan durum (JS ekler) */
.v-nav__item.is-closed > .v-mega {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-8px);
}

/* İç ızgara - .v-container--wide olduğu için ortalama ve gutter hazır gelir */
.v-mega__inner {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: var(--v-sp-5) var(--v-sp-6);
  align-items: start;
}

/* Geniş varyant (Çözümler) - tam genişlik bant, beş sütun */
.v-mega--wide { border-radius: 0; }

/* Tek sütunlu varyant (Kurumsal) - bant yerine sağa yaslı küçük panel */
/* Tek sutunlu panel, kendi basliginin altina hizalanir.
   Onceden header kenarina (right: var(--v-gutter)) yaslaniyordu; baslik
   menunun ortasindayken fare panele giderken oge disina cikip menu
   kapaniyordu. Konumlandirma baglami artik .v-nav__item--single. */
.v-nav__item--single { position: relative; }

.v-mega--single {
  top: calc(100% + 8px);
  left: auto;
  right: 0;
  width: max-content;
  min-width: 230px;
  max-width: min(320px, calc(100vw - 2 * var(--v-gutter)));
  padding: var(--v-sp-5);
  border: 1px solid var(--v-border-strong);
  border-radius: var(--v-r-lg);
}
.v-mega--single .v-mega__inner {
  grid-template-columns: minmax(0, 1fr);
  max-width: none;
  padding-inline: 0;
}

/* Mega menü içindeki bağlantı listesi */
.v-mega__list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.v-mega__list > li { margin: 0; }

.v-mega__col {
  display: flex;
  flex-direction: column;
  gap: var(--v-sp-2);
  min-width: 0;
}

.v-mega__title {
  display: flex;
  align-items: center;
  gap: var(--v-sp-2);
  margin: 0 0 var(--v-sp-1);
  padding-bottom: var(--v-sp-2);
  border-bottom: 1px solid var(--v-border);
  font-family: var(--v-font-head);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--v-blue);
}
.v-mega__title { flex-wrap: wrap; row-gap: var(--v-sp-1); }
.v-mega__title a { color: inherit; }
.v-mega__title .v-badge { font-size: 0.625rem; padding: 0.1rem 0.5rem; }
.v-mega__title .v-icon { width: 1.05em; height: 1.05em; }

.v-mega__link {
  display: block;
  padding: 0.45rem 0.6rem;
  border-radius: var(--v-r-sm);
  color: var(--v-text);
  font-size: 0.9375rem;
  line-height: 1.4;
  text-decoration: none;
  transition: background-color var(--v-t) var(--v-ease), color var(--v-t) var(--v-ease),
    transform var(--v-t) var(--v-ease);
}
.v-mega__link:hover,
.v-mega__link:focus-visible {
  background-color: rgba(6, 155, 222, 0.12);
  color: var(--v-white);
  transform: translateX(3px);
}
.v-mega__link[aria-current="page"] { color: var(--v-blue); font-weight: 600; }

/* --- Header sağ blok: telefon, CTA ve burger --- */
.v-header__actions {
  display: flex;
  align-items: center;
  gap: var(--v-sp-2);
  flex: none;
  margin-left: auto;
}

/* Telefon - yalnızca geniş ekranda, yer varken görünür */
.v-header__phone {
  display: none;
  align-items: center;
  gap: var(--v-sp-2);
  padding: 0.45rem 0.7rem;
  border-radius: var(--v-r-sm);
  color: var(--v-text);
  font-family: var(--v-font-head);
  font-size: 0.875rem;
  font-weight: 600;
  white-space: nowrap;
  text-decoration: none;
  transition: color var(--v-t) var(--v-ease), background-color var(--v-t) var(--v-ease);
}
.v-header__phone:hover {
  color: var(--v-white);
  background-color: rgba(6, 155, 222, 0.1);
}
.v-header__phone .v-icon { width: 1.05em; height: 1.05em; color: var(--v-blue); }

/* ==========================================================================
   09. BURGER VE MOBİL MENÜ
   ========================================================================== */

.v-burger {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  flex: none;
  padding: 0;
  border: 1px solid var(--v-border);
  border-radius: var(--v-r-sm);
  background-color: rgba(200, 208, 216, 0.04);
  cursor: pointer;
  transition: border-color var(--v-t) var(--v-ease), background-color var(--v-t) var(--v-ease);
}
.v-burger:hover { border-color: var(--v-border-accent); background-color: rgba(6, 155, 222, 0.1); }
.v-burger span,
.v-burger__bar {
  display: block;
  width: 20px;
  height: 2px;
  border-radius: var(--v-r-pill);
  background-color: var(--v-silver);
  transition: transform var(--v-t) var(--v-ease), opacity var(--v-t) var(--v-ease),
    background-color var(--v-t) var(--v-ease);
}
.v-burger[aria-expanded="true"] .v-burger__bar { background-color: var(--v-blue); }
.v-burger[aria-expanded="true"] .v-burger__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.v-burger[aria-expanded="true"] .v-burger__bar:nth-child(2) { opacity: 0; }
.v-burger[aria-expanded="true"] .v-burger__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Kayan panel - header'ın ALTINDAN başlar.
   HTML'de ayrı bir kapatma düğmesi yok; header açıkta kaldığı için burger
   (açıkken X'e dönüşür) dokunmatik cihazlarda kapatma affordance'ı olur. */
.v-mobile-nav {
  position: fixed;
  top: var(--v-header-h);
  right: 0;
  bottom: 0;
  left: 0;
  z-index: var(--v-z-mobile);
  background-color: rgba(3, 11, 24, 0.6);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  /* visibility ANINDA açılır (odak hemen panele geçebilsin), kapanırken gecikir */
  transition: opacity var(--v-t) var(--v-ease), visibility 0s linear var(--v-t);
}
.v-mobile-nav.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity var(--v-t) var(--v-ease), visibility 0s linear 0s;
}

.v-mobile-nav__panel {
  position: absolute;
  inset-block: 0;
  right: 0;
  width: min(420px, 100%);
  max-width: 100%;
  padding: var(--v-sp-5) var(--v-sp-5) var(--v-sp-9);
  border-left: 1px solid var(--v-border-strong);
  isolation: isolate;
  background-color: var(--v-navy);
  background-image: radial-gradient(560px 320px at 100% 0%, rgba(11, 78, 162, 0.35), transparent 65%);
  background-repeat: no-repeat;
  box-shadow: var(--v-shadow-lg);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  transform: translateX(100%);
  transition: transform var(--v-t-slow) var(--v-ease);
}
/* Devre dokusu - okunabilirliği bozmayacak şekilde çok soluk filigran.
   (Doğrudan background-image olarak verildiğinde tam opaklıkta çiziliyor ve
   menü metinlerini okunmaz hâle getiriyordu.) */
.v-mobile-nav__panel::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: var(--v-tex-circuit);
  background-size: 260px 260px;
  opacity: 0.05;
  pointer-events: none;
}
.v-mobile-nav.is-open .v-mobile-nav__panel { transform: translateX(0); }

/* Panel içi bağlantı ve grup düzeni */
.v-mobile-nav__panel a:not(.v-btn) {
  display: block;
  padding: 0.7rem 0.75rem;
  border-radius: var(--v-r-sm);
  color: var(--v-text);
  font-size: 1rem;
  text-decoration: none;
}
.v-mobile-nav__panel a:not(.v-btn):hover,
.v-mobile-nav__panel a:not(.v-btn):focus-visible {
  background-color: rgba(6, 155, 222, 0.12);
  color: var(--v-white);
}
.v-mobile-nav__panel a[aria-current="page"] { color: var(--v-blue); font-weight: 600; }
.v-mobile-nav__panel .v-nav__link,
.v-mobile-nav__panel .v-mega__link { width: 100%; white-space: normal; }
.v-mobile-nav__panel ul { list-style: none; margin: 0 0 var(--v-sp-4); padding: 0; }
.v-mobile-nav__panel li { margin: 0; }
.v-mobile-nav__panel details { margin-bottom: var(--v-sp-2); }
.v-mobile-nav__panel summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--v-sp-3);
  padding: 0.7rem 0.75rem;
  border-radius: var(--v-r-sm);
  cursor: pointer;
  font-family: var(--v-font-head);
  font-weight: 600;
  color: var(--v-text-strong);
  list-style: none;
}
.v-mobile-nav__panel summary::-webkit-details-marker { display: none; }
.v-mobile-nav__panel summary::marker { content: ""; }
.v-mobile-nav__panel summary::after {
  content: "";
  flex: none;
  width: 9px;
  height: 9px;
  border-right: 2px solid var(--v-blue);
  border-bottom: 2px solid var(--v-blue);
  transform: rotate(45deg);
  transition: transform var(--v-t) var(--v-ease);
}
.v-mobile-nav__panel details[open] > summary::after { transform: rotate(-135deg); }
.v-mobile-nav__panel .v-mega__title { margin-top: var(--v-sp-4); }
.v-mobile-nav__panel .v-btn { width: 100%; margin-top: var(--v-sp-3); }

/* --- Mobil panel BEM parçaları (HTML'in gerçekten ürettiği sınıflar) ---
   Akordeon <details>/<summary> ile çalışır; JS gerekmez. */
.v-mobile-nav__list {
  margin: 0 0 var(--v-sp-3);
  padding: 0;
  list-style: none;
}
.v-mobile-nav__list > li { margin: 0; }

.v-mobile-nav__link {
  display: block;
  padding: 0.7rem 0.75rem;
  border-radius: var(--v-r-sm);
  color: var(--v-text);
  font-size: 1rem;
  line-height: 1.4;
  text-decoration: none;
}
.v-mobile-nav__link:hover,
.v-mobile-nav__link:focus-visible {
  background-color: rgba(6, 155, 222, 0.12);
  color: var(--v-white);
}
.v-mobile-nav__link[aria-current="page"] { color: var(--v-blue); font-weight: 600; }

/* Hub başlığı - alt liste üstündeki grup etiketi */
.v-mobile-nav__group {
  margin: var(--v-sp-4) 0 var(--v-sp-1);
  font-family: var(--v-font-head);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--v-blue);
}
.v-mobile-nav__group a { color: inherit; }
.v-mobile-nav__group a:hover { color: var(--v-white); }

/* Akordeon */
.v-mobile-nav__acc {
  margin: 0 0 var(--v-sp-2);
  border-bottom: 1px solid var(--v-border);
}
.v-mobile-nav__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--v-sp-3);
  padding: 0.8rem 0.75rem;
  border-radius: var(--v-r-sm);
  cursor: pointer;
  font-family: var(--v-font-head);
  font-size: 1rem;
  font-weight: 600;
  color: var(--v-text-strong);
  list-style: none;
}
.v-mobile-nav__summary::-webkit-details-marker { display: none; }
.v-mobile-nav__summary::marker { content: ""; }
.v-mobile-nav__summary:hover { background-color: rgba(6, 155, 222, 0.1); }
.v-mobile-nav__summary::after {
  content: "";
  flex: none;
  width: 9px;
  height: 9px;
  border-right: 2px solid var(--v-blue);
  border-bottom: 2px solid var(--v-blue);
  transform: rotate(45deg);
  transition: transform var(--v-t) var(--v-ease);
}
.v-mobile-nav__acc[open] > .v-mobile-nav__summary::after { transform: rotate(-135deg); }

.v-mobile-nav__body { padding: 0 0 var(--v-sp-3); }
.v-mobile-nav__body .v-mobile-nav__list {
  margin: 0 0 var(--v-sp-2);
  padding-left: var(--v-sp-3);
  border-left: 1px solid var(--v-border);
}
.v-mobile-nav__body .v-mobile-nav__link { font-size: 0.9375rem; }

/* Panel altındaki buton grubu */
.v-mobile-nav__actions {
  display: grid;
  gap: var(--v-sp-3);
  margin-top: var(--v-sp-5);
  padding-top: var(--v-sp-5);
  border-top: 1px solid var(--v-border);
}
.v-mobile-nav__actions .v-btn { width: 100%; margin-top: 0; }

/* ==========================================================================
   10. HERO, BREADCRUMB, CTA BANDI
   ========================================================================== */

.v-hero {
  position: relative;
  isolation: isolate;
  padding-block: clamp(3.5rem, 2rem + 8vw, 7.5rem);
  overflow: hidden;
  background-color: var(--v-navy);
  background-image:
    radial-gradient(900px 520px at 72% 12%, rgba(11, 78, 162, 0.45), transparent 62%),
    radial-gradient(620px 420px at 8% 88%, rgba(6, 155, 222, 0.16), transparent 60%);
}
/* Devre dokusu - arka planda hissedilen, okumayı bozmayan katman */
.v-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image: var(--v-tex-circuit);
  background-size: 220px 220px;
  opacity: 0.07;
  -webkit-mask-image: linear-gradient(120deg, transparent 18%, #000 62%, transparent 96%);
  mask-image: linear-gradient(120deg, transparent 18%, #000 62%, transparent 96%);
  pointer-events: none;
}
/* Kalkan filigranı */
.v-hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: 50%;
  right: -60px;
  width: clamp(240px, 34vw, 460px);
  aspect-ratio: 6 / 7;
  background-image: var(--v-tex-shield);
  background-size: contain;
  background-repeat: no-repeat;
  opacity: 0.06;
  transform: translateY(-50%);
  pointer-events: none;
}
.v-hero__content {
  position: relative;
  z-index: 1;
  max-width: 780px;
}
.v-hero__content .v-lead { color: var(--v-text); }
/* Hero içindeki buton grubu - HTML <div class="v-hero__actions"> üretiyor */
.v-hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--v-sp-3);
  margin-top: var(--v-sp-6);
}

/* Ana sayfa hero'su.
   Üst boşluk bilinçli olarak dar: header logosu 76px'e çıkınca bar ile
   "Ankara · Çankaya" satırı arasındaki mesafe gereğinden fazla açılıyordu.
   Alt boşluk ise referans şeridine yer bırakacak kadar geniş tutuldu. */
.v-hero--home {
  padding-top: clamp(1.75rem, 1rem + 2.5vw, 3rem);
  padding-bottom: clamp(3rem, 2rem + 5vw, 5.5rem);
}

/* Ana sayfa hero'sundaki devre ağı animasyonu.
   <canvas> main.js tarafından oluşturulur (HTML sahibi başka ekip üyesi);
   JS yoksa veya hareket azaltma isteniyorsa hiç eklenmez ve hero mevcut
   gradyan + doku zemininde olduğu gibi görünür.
   Yığın sırası: hero ::before (-2) ve ::after (-1) en altta, ağ 0'da,
   .v-hero__content (z-index 1) her zaman en üstte - başlık okunabilirliği
   hiçbir koşulda animasyonun altında kalmaz. */
.v-hero--home > canvas {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* İç sayfa hero'su - daha kompakt */
.v-hero--page {
  padding-block: clamp(2.5rem, 1.6rem + 4.5vw, 4.5rem);
  border-bottom: 1px solid var(--v-border);
}
.v-hero--page::after { opacity: 0.045; }

/* --- Breadcrumb --- */
.v-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--v-sp-2);
  margin: 0 0 var(--v-sp-4);
  padding: 0;
  list-style: none;
  font-size: 0.8125rem;
  color: var(--v-text-muted);
}
.v-breadcrumb li { margin: 0; display: inline-flex; align-items: center; gap: var(--v-sp-2); }
.v-breadcrumb a { color: var(--v-text-muted); text-decoration: none; }
.v-breadcrumb a:hover { color: var(--v-blue); text-decoration: underline; text-underline-offset: 3px; }
.v-breadcrumb li + li::before {
  content: "";
  width: 5px;
  height: 5px;
  border-right: 1.5px solid currentColor;
  border-top: 1.5px solid currentColor;
  transform: rotate(45deg);
  opacity: 0.6;
}
.v-breadcrumb [aria-current="page"] { color: var(--v-text-dim); }

/* --- Sayfa sonu çağrı bandı --- */
.v-cta-band {
  position: relative;
  isolation: isolate;
  padding-block: clamp(2.75rem, 2rem + 4vw, 5rem);
  overflow: hidden;
  border-block: 1px solid var(--v-border-accent);
  background-color: var(--v-surface-1);
  background-image: linear-gradient(120deg, rgba(11, 78, 162, 0.5) 0%, rgba(6, 155, 222, 0.18) 55%, rgba(6, 18, 37, 0) 100%);
  text-align: center;
}
.v-cta-band::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: var(--v-tex-circuit);
  background-size: 200px 200px;
  opacity: 0.08;
  pointer-events: none;
}
.v-cta-band .v-h2 { margin-bottom: var(--v-sp-3); }
.v-cta-band .v-lead { margin-inline: auto; margin-bottom: 0; color: var(--v-text); }

/* Bant içi yerleşim - mobilde ortalı yığın, 900px üstünde metin | butonlar */
.v-cta-band__inner {
  display: grid;
  gap: var(--v-sp-5);
  justify-items: center;
}
.v-cta-band__inner > * { min-width: 0; }
.v-cta-band__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--v-sp-3);
}

/* ==========================================================================
   11. FORM
   ========================================================================== */

.v-form {
  position: relative; /* .v-hp bal küpü alanının çıpası */
  display: grid;
  gap: var(--v-sp-4);
  padding: var(--v-sp-6);
  border: 1px solid var(--v-border);
  border-radius: var(--v-r-lg);
  background-color: var(--v-surface-1);
  box-shadow: var(--v-shadow-sm);
}
.v-form .v-btn { justify-self: start; }

.v-field {
  display: flex;
  flex-direction: column;
  gap: var(--v-sp-2);
  min-width: 0;
}

.v-field__label {
  font-family: var(--v-font-head);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--v-text-strong);
}
.v-field__label .v-req,
.v-field__label abbr {
  color: var(--v-blue);
  text-decoration: none;
  margin-left: 2px;
}

.v-field__input {
  width: 100%;
  min-width: 0;
  min-height: 48px;
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--v-border-strong);
  border-radius: var(--v-r-sm);
  background-color: rgba(3, 11, 24, 0.6);
  color: var(--v-white);
  font-family: var(--v-font-body);
  font-size: 1rem;
  line-height: 1.5;
  transition: border-color var(--v-t) var(--v-ease), box-shadow var(--v-t) var(--v-ease),
    background-color var(--v-t) var(--v-ease);
  appearance: none;
}
textarea.v-field__input { min-height: 140px; resize: vertical; }
select.v-field__input {
  /* Ok işareti - inline SVG, harici kaynak yok */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23C8D0D8' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.9rem center;
  padding-right: 2.5rem;
}
.v-field__input::placeholder { color: var(--v-text-muted); opacity: 1; }
.v-field__input:hover { border-color: var(--v-border-accent); }
.v-field__input:focus-visible {
  outline: none;
  border-color: var(--v-blue);
  background-color: rgba(3, 11, 24, 0.85);
  box-shadow: 0 0 0 3px rgba(6, 155, 222, 0.25);
}
.v-field__input[aria-invalid="true"] {
  border-color: #F4736A;
  box-shadow: 0 0 0 3px rgba(244, 115, 106, 0.16);
}

/* Hatalı alanın etiketi de belirginleşsin (JS .v-field--invalid ekler) */
.v-field--invalid .v-field__label { color: #FF9A92; }

/* Hata mesajı - JS doldurur; boşken yer kaplamaz */
.v-field__error {
  display: none;
  align-items: flex-start;
  gap: var(--v-sp-2);
  font-size: 0.8125rem;
  line-height: 1.5;
  color: #FF9A92; /* koyu zeminde AA üstü kırmızımsı ton */
}
.v-field__error:not(:empty) { display: flex; }
.v-field__error::before {
  content: "!";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 16px;
  height: 16px;
  margin-top: 2px;
  border-radius: var(--v-r-pill);
  background-color: rgba(255, 154, 146, 0.16);
  font-size: 0.6875rem;
  font-weight: 700;
}

/* Onay kutusu / radyo alanı */
.v-field--check {
  flex-direction: row;
  align-items: flex-start;
  gap: var(--v-sp-3);
}
.v-field--check input[type="checkbox"],
.v-field--check input[type="radio"] {
  width: 20px;
  height: 20px;
  margin: 3px 0 0;
  flex: none;
  accent-color: var(--v-blue);
}
.v-field--check .v-field__label { font-family: var(--v-font-body); font-weight: 400; color: var(--v-text); }

/* Alan grubu - HTML alanları <fieldset> içine sarıyor; ızgara burada kurulur */
.v-form fieldset {
  display: grid;
  gap: var(--v-sp-4);
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.v-form fieldset > .v-field { grid-column: 1 / -1; }

/* Zorunlu alan yıldızı */
.v-field__req {
  color: var(--v-blue);
  font-weight: 700;
}

/* Alan altı açıklama */
.v-field__hint {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--v-text-muted);
}

/* Onay kutusu girdisinin kendisi */
.v-field__check {
  width: 20px;
  height: 20px;
  margin: 3px 0 0;
  flex: none;
  accent-color: var(--v-blue);
}

/* Gönder satırı */
.v-form__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--v-sp-3) var(--v-sp-5);
}
.v-form__actions .v-btn { flex: none; }

.v-form__note {
  margin: 0;
  max-width: 46ch;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--v-text-muted);
}

/* Form geneli durum mesajı - JS doldurur, boşken/hidden iken yer kaplamaz */
.v-form__status { margin: 0; }
.v-form__status[hidden] { display: none; }

/* Bal küpü alanı - bot tuzağı, ekranda görünmez */
.v-form .v-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ==========================================================================
   12. FOOTER
   ========================================================================== */

.v-footer {
  position: relative;
  isolation: isolate;
  margin-top: var(--v-sp-9);
  padding-top: var(--v-sp-9);
  border-top: 1px solid var(--v-border);
  background-color: var(--v-navy-deep);
  color: var(--v-text-dim);
  font-size: 0.9375rem;
}
.v-footer::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: var(--v-tex-circuit);
  background-size: 300px 300px;
  opacity: 0.04;
  pointer-events: none;
}
/* Kapsayıcı düz blok; ızgara .v-footer__inner üzerindedir.
   HTML: <footer><div class="v-container"><div class="v-footer__inner">…</div>
         <div class="v-footer__bottom">…</div></div></footer> */
.v-footer .v-container { display: block; }

.v-footer__inner {
  display: grid;
  gap: var(--v-sp-6);
  grid-template-columns: minmax(0, 1fr);
}

.v-footer__col { min-width: 0; }
.v-footer__col h2,
.v-footer__col h3,
.v-footer__col .v-footer__title {
  margin: 0 0 var(--v-sp-3);
  font-family: var(--v-font-head);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--v-white);
}
.v-footer__col ul { list-style: none; margin: 0; padding: 0; }
.v-footer__col li { margin-bottom: var(--v-sp-2); }
.v-footer__col a { color: var(--v-text-dim); text-decoration: none; }
.v-footer__col a:hover { color: var(--v-blue); }
.v-footer__col p { color: var(--v-text-muted); }

/* --- Marka sütunu --- */
.v-footer__brand { min-width: 0; }

/* Dikey kilit logo - doğal boyutu 182×200; makul yüksekliğe oturtulur */
.v-footer__logo {
  width: auto;
  height: 84px;
  margin: 0 0 var(--v-sp-4);
  filter: drop-shadow(0 6px 20px rgba(6, 155, 222, 0.2));
}

.v-footer__about {
  max-width: 40ch;
  margin: 0 0 var(--v-sp-4);
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--v-text-muted);
}

.v-footer__social {
  display: flex;
  flex-wrap: wrap;
  gap: var(--v-sp-2);
  margin: 0;
  padding: 0;
  list-style: none;
}
.v-footer__social li { margin: 0; }
.v-footer__social a {
  display: inline-flex;
  align-items: center;
  gap: var(--v-sp-2);
  padding: 0.35rem 0.85rem;
  border: 1px solid var(--v-border);
  border-radius: var(--v-r-pill);
  color: var(--v-text-dim);
  font-size: 0.8125rem;
  font-weight: 500;
  transition: border-color var(--v-t) var(--v-ease), background-color var(--v-t) var(--v-ease),
    color var(--v-t) var(--v-ease);
}
.v-footer__social a:hover {
  border-color: var(--v-border-accent);
  background-color: rgba(6, 155, 222, 0.1);
  color: var(--v-white);
}

/* --- İletişim sütunu - ikon + metin satırları --- */
.v-footer__contact ul { display: grid; gap: var(--v-sp-3); }
.v-footer__contact li {
  display: flex;
  align-items: flex-start;
  gap: var(--v-sp-3);
  margin: 0;
}
.v-footer__contact .v-icon {
  width: 18px;
  height: 18px;
  margin-top: 3px;
  flex: none;
  color: var(--v-blue);
}
.v-footer__contact .v-btn { margin-top: var(--v-sp-4); }

/* --- Alt bant: telif + yasal bağlantılar --- */
.v-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--v-sp-3) var(--v-sp-5);
  margin-top: var(--v-sp-7);
  padding-block: var(--v-sp-5);
  border-top: 1px solid var(--v-border);
  color: var(--v-text-muted);
  font-size: 0.8125rem;
}
.v-footer__copy { margin: 0; }

.v-legal-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--v-sp-2) var(--v-sp-5);
  margin: 0;
  padding: 0;
  list-style: none;
}
.v-legal-nav li { margin: 0; }
.v-legal-nav a { color: var(--v-text-muted); text-decoration: none; }
.v-legal-nav a:hover { color: var(--v-blue); text-decoration: underline; text-underline-offset: 3px; }

/* ==========================================================================
   13. YARDIMCI SINIFLAR VE REVEAL
   ========================================================================== */

/* Yalnızca ekran okuyucular için */
.v-sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
/* Odaklandığında görünür hâle gelen varyant */
.v-sr-only:focus-visible {
  position: static !important;
  width: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  clip: auto;
  clip-path: none;
  white-space: normal;
}

.v-center {
  text-align: center;
  margin-inline: auto;
}
.v-center .v-lead,
.v-center .v-eyebrow { margin-inline: auto; }

.v-mt-0 { margin-top: 0 !important; }

/* Sıkı CSP nedeniyle D inline style kullanamaz; sık gereken boşluk ve
   düzen ihtiyaçları için sınırlı sayıda yardımcı sınıf (ekstra, raporlandı) */
.v-mt-4 { margin-top: var(--v-sp-4); }
.v-mt-6 { margin-top: var(--v-sp-6); }
.v-mt-8 { margin-top: var(--v-sp-8); }
.v-mb-0 { margin-bottom: 0 !important; }
.v-mb-4 { margin-bottom: var(--v-sp-4); }
.v-mb-6 { margin-bottom: var(--v-sp-6); }

/* Buton grubu - hero ve CTA bandındaki yan yana düğmeler için */
.v-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--v-sp-3);
  align-items: center;
  margin-top: var(--v-sp-5);
}
.v-center .v-actions { justify-content: center; }

/* Dikey ritim sarmalayıcı */
.v-stack { display: flex; flex-direction: column; gap: var(--v-sp-4); }
.v-stack--lg { gap: var(--v-sp-6); }

/* Serbest kart ızgarası - sütun sayısı içeriğe göre belirlenir */
.v-grid--auto { grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); }

/* --- Scroll ile beliren ögeler ---
   KRİTİK: JS çalışmazsa içerik yine görünür olmalı.
   1) Başlangıç durumu yalnızca html.js varken uygulanır,
   2) ayrıca açık bir kaçış yolu bırakılır,
   3) tamamı prefers-reduced-motion: no-preference içindedir. */
html:not(.js) .v-reveal { opacity: 1 !important; transform: none !important; }

@media (prefers-reduced-motion: no-preference) {
  html.js .v-reveal {
    opacity: 0;
    transform: translateY(18px);
    transition:
      opacity var(--v-t-slow) var(--v-ease),
      transform var(--v-t-slow) var(--v-ease);
    will-change: opacity, transform;
  }
  html.js .v-reveal.is-visible {
    opacity: 1;
    transform: none;
    will-change: auto;
  }
  /* Izgaradaki kartlar için kademeli gecikme - JS sınıf olarak ekler
     (CSP sıkı olduğu için inline stil kullanılmaz) */
  html.js .v-reveal--d1 { transition-delay: 70ms; }
  html.js .v-reveal--d2 { transition-delay: 140ms; }
  html.js .v-reveal--d3 { transition-delay: 210ms; }
}

/* ==========================================================================
   REFERANS LOGO ŞERİDİ - ana sayfa hero'sunun altında
   ========================================================================== */

/* Şerit içerik sütununun (780px) dışındadır; hero genişliğini kullanır.
   HTML: <div class="v-refs v-refs--scroll"> > .v-refs__viewport > ul.v-refs__track */
.v-refs {
  position: relative;
  z-index: 1;
  margin-top: clamp(2.25rem, 1.5rem + 2.5vw, 3.5rem);
}

.v-refs__label {
  margin: 0 0 var(--v-sp-4);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--v-text-muted);
}

/* Kenarlarda yumuşak solma: logolar hero'nun içine girip çıkıyormuş gibi durur.
   maskeyi desteklemeyen tarayıcıda şerit düz kesilir, işlev bozulmaz. */
.v-refs__viewport {
  display: flex;
  gap: var(--v-sp-6);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
}

.v-refs__track {
  display: flex;
  flex: none;
  align-items: stretch;
  gap: var(--v-sp-6);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Kayma yalnızca 6+ referansta açılır (v-refs--scroll). İki özdeş şerit yan
   yana durur; -100% kayma ikinci şeridi tam birincinin yerine getirir ve
   döngü görünmez biçimde başa sarar. */
.v-refs--scroll .v-refs__track {
  animation: v-refs-kay 38s linear infinite;
}

@keyframes v-refs-kay {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(-100% - var(--v-sp-6))); }
}

/* İmleç üstündeyken veya klavyeyle içine girildiğinde durur: kullanıcı bir
   logoyu okumak ya da tıklamak istediğinde şerit kaçmasın. */
.v-refs__viewport:hover .v-refs__track,
.v-refs__viewport:focus-within .v-refs__track {
  animation-play-state: paused;
}

/* Az sayıda referansta şerit ortalanır */
.v-refs:not(.v-refs--scroll) .v-refs__viewport { justify-content: center; }
.v-refs:not(.v-refs--scroll) .v-refs__track { flex-wrap: wrap; justify-content: center; }

.v-refs__item { flex: none; }

.v-ref {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--v-sp-2);
  margin: 0;
  width: 168px;
}

.v-ref__link {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--v-sp-2);
  text-decoration: none;
  border-radius: var(--v-r-sm);
}

/* Logo kutusu sabit ölçüdedir: gelen görsellerin en-boy oranı ne olursa olsun
   şerit zıplamaz, logolar aynı optik ağırlıkta durur.

   Zemin BEYAZ - bilinçli bir karar. Referansların çoğu renkli belediye
   arması ve elimizdeki dosyaların bir kısmı zaten beyaz zeminli JPEG.
   Koyu hero üzerinde şeffaf bırakılsa JPEG'ler beyaz dikdörtgen gibi
   durur, griye çevrilse armalar okunamaz hâle gelir. Beyaz karo ikisini de
   çözer ve armalar kendi renkleriyle görünür. */
.v-ref__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 168px;
  height: 100px;
  padding: var(--v-sp-3);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--v-r-md);
  background-color: #fff;
  box-shadow: 0 2px 14px rgba(2, 10, 22, 0.35);
  transition:
    border-color var(--v-t) var(--v-ease),
    transform var(--v-t) var(--v-ease),
    box-shadow var(--v-t) var(--v-ease);
}

/* Beyaz karo içinde logo kendi rengiyle, ölçüsü ne olursa olsun sığdırılarak
   durur. Kare armalar ile yatay kelime markaları aynı yüksekliği paylaşır. */
.v-ref__img {
  max-width: 100%;
  max-height: 72px;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* Logo dosyası henüz yokken baş harf kutusu */
.v-ref__initials {
  font-family: var(--v-font-head);
  font-size: 1.375rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--v-text-muted);
}

.v-ref__name {
  max-width: 168px;
  font-size: 0.8125rem;
  line-height: 1.35;
  text-align: center;
  color: var(--v-text-muted);
}

.v-ref__link:hover .v-ref__logo,
.v-ref__link:focus-visible .v-ref__logo {
  border-color: rgba(6, 155, 222, 0.7);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(2, 10, 22, 0.45);
}
.v-ref__link:hover .v-ref__name,
.v-ref__link:focus-visible .v-ref__name { color: var(--v-white); }

/* Hareket azaltma: animasyon durur, şerit elle kaydırılabilir listeye döner.
   İkinci (aria-hidden) kopya gizlenir, yoksa liste iki kez görünür. */
@media (prefers-reduced-motion: reduce) {
  .v-refs--scroll .v-refs__track { animation: none; }
  .v-refs--scroll .v-refs__track[aria-hidden="true"] { display: none; }
  .v-refs__viewport {
    overflow-x: auto;
    scroll-snap-type: x proximity;
  }
  .v-refs__item { scroll-snap-align: start; }
}

@media (max-width: 639px) {
  .v-ref,
  .v-ref__logo,
  .v-ref__name { width: 132px; max-width: 132px; }
  .v-ref__logo { height: 84px; }
  .v-ref__img { max-height: 58px; }
  .v-refs__viewport,
  .v-refs__track { gap: var(--v-sp-4); }
  @keyframes v-refs-kay {
    from { transform: translateX(0); }
    to   { transform: translateX(calc(-100% - var(--v-sp-4))); }
  }
}

/* ==========================================================================
   14. KIRILMA NOKTALARI - 640 / 900 / 1200
   ========================================================================== */

/* Dar ekranda header'daki "Teklif Al" gizlenir; aynı CTA mobil menüde var.
   360px'te logo + burger yan yana rahat sığsın diye. */
@media (max-width: 479px) {
  .v-header__actions > .v-btn { display: none; }
  .v-logo__sub { font-size: 0.5rem; letter-spacing: 0.1em; }
}

@media (min-width: 640px) {
  .v-grid--2,
  .v-grid--3,
  .v-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .v-card { padding: var(--v-sp-6); }
  .v-form { padding: var(--v-sp-7); }
  /* Formda yan yana gelen alanlar */
  .v-form fieldset { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .v-form fieldset > .v-field--half { grid-column: span 1; }
  .v-form--2col { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .v-form--2col .v-field--full { grid-column: 1 / -1; }

  .v-checklist--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--v-sp-6);
  }

  .v-footer__inner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .v-footer__brand { grid-column: 1 / -1; }
}

@media (min-width: 900px) {
  /* Logo one cikarildigi icin bar yukseldi: 76px kalkan + alt/ust 12px pay.
     Sayfa kaydirilinca .is-scrolled ile kuculur; boylece logo sayfa basinda
     buyuk durur ama okuma sirasinda ekranin dortte birini yemez. */
  :root { --v-header-h: 100px; }

  .v-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .v-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .v-grid { gap: var(--v-sp-6); }

  /* Masaüstü menü açılır, burger ve mobil panel gizlenir.
     Yatay dizilim <ul class="v-nav__list"> üzerindedir. */
  .v-nav { display: block; }
  .v-burger { display: none; }
  .v-mobile-nav { display: none; }

  .v-logo img,
  .v-logo svg,
  .v-logo__mark { height: 76px; }
  .v-logo__name { font-size: 1.625rem; letter-spacing: 0.09em; }
  .v-logo__sub { font-size: 0.875rem; }

  /* Kaydirilmis durumda olculu hale doner */
  .v-header.is-scrolled { --v-header-h: 76px; }
  .v-header.is-scrolled .v-logo img,
  .v-header.is-scrolled .v-logo svg,
  .v-header.is-scrolled .v-logo__mark { height: 56px; }
  .v-header.is-scrolled .v-logo__name { font-size: 1.375rem; }
  .v-header.is-scrolled .v-logo__sub { font-size: 0.75rem; }

  .v-footer__inner { grid-template-columns: 1.5fr 1fr 1fr; gap: var(--v-sp-7); }
  .v-footer__brand { grid-column: auto; }

  .v-hero__content .v-lead { font-size: var(--v-fs-lead); }
  .v-step { padding: var(--v-sp-6); }

  /* Ürün tanıtım bloğu iki sütuna açılır */
  .v-promo { grid-template-columns: minmax(0, 1.5fr) minmax(0, 0.85fr); gap: var(--v-sp-8); }

  /* CTA bandı: metin solda, butonlar sağda */
  .v-cta-band { text-align: left; }
  .v-cta-band__inner {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    justify-items: start;
    gap: var(--v-sp-7);
  }
  .v-cta-band .v-lead { margin-inline: 0; }
  .v-cta-band__actions { justify-content: flex-end; }

  /* İletişim: bilgiler | form */
  .v-contact { grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: var(--v-sp-7); }
}

@media (min-width: 1200px) {
  .v-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .v-nav__list { gap: var(--v-sp-2); }
  .v-mega { padding-block: var(--v-sp-7); }
  .v-mega--single { padding: var(--v-sp-5); }

  /* Yer açıldığında header'da telefon da görünür */
  .v-header__phone { display: inline-flex; }

  .v-footer__inner {
    grid-template-columns: 1.5fr 1fr 1fr 1fr 1.15fr;
    gap: var(--v-sp-6) var(--v-sp-7);
  }
}

/* ==========================================================================
   15. HAREKET AZALTMA VE YAZDIRMA
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  /* Yer değiştiren tüm efektler kapatılır */
  .v-card--link:hover,
  .v-btn--primary:hover,
  .v-btn--ghost:hover,
  .v-mega__link:hover { transform: none; }
  .v-reveal { opacity: 1 !important; transform: none !important; }
}

@media print {
  :root { --v-gutter: 0; }
  * {
    background: transparent !important;
    color: #000 !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }
  body {
    background: #fff !important;
    color: #000 !important;
    font-size: 11pt;
    line-height: 1.5;
  }
  .v-header,
  .v-nav,
  .v-burger,
  .v-mobile-nav,
  .v-mega,
  .v-cta-band,
  .v-footer__col ul,
  .v-skip,
  .v-skip-link,
  .v-form .v-btn { display: none !important; }
  .v-h1, .v-h2, .v-h3, .v-card__title, .v-step__title { color: #000 !important; page-break-after: avoid; }
  .v-section, .v-hero { padding-block: 0.8cm !important; }
  .v-card, .v-step, .v-note, .v-faq__item, .v-stat {
    border: 1px solid #999 !important;
    page-break-inside: avoid;
  }
  .v-faq__a { display: block !important; }
  .v-grid--2, .v-grid--3, .v-grid--4 { grid-template-columns: repeat(2, 1fr) !important; }
  a { text-decoration: underline; }
  /* Bağlantı hedeflerini yazdırılan sayfada göster */
  .v-prose a[href^="http"]::after,
  .v-prose a[href^="/"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #444 !important; }
  .v-reveal { opacity: 1 !important; transform: none !important; }
}

/* ==========================================================================
   MENUDE ONE CIKARILAN OGELER
   ========================================================================== */

/* Mega menude vurgulanan hizmet (KVK Uyum Danismanligi, Siber Guvenlik
   Danismanligi). Renk ve sol serit ile digerlerinden ayrilir. */
.v-mega__link--feature {
  position: relative;
  padding-left: var(--v-sp-3);
  color: var(--v-blue-bright, #4FC3F7);
  font-weight: 600;
}
.v-mega__link--feature::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 3px;
  height: 1.1em;
  transform: translateY(-50%);
  border-radius: 2px;
  background: linear-gradient(180deg, var(--v-blue), var(--v-blue-deep));
  box-shadow: 0 0 8px rgba(6, 155, 222, 0.55);
}
.v-mega__link--feature:hover,
.v-mega__link--feature:focus-visible {
  color: #fff;
}

/* VERKAGUARD ogesi menunun en sagina itilir. */
.v-nav__item--standalone { margin-left: auto; }

/* Vurgulanan hizmet karti (KVK Uyum Danismanligi, Siber Guvenlik Danismanligi,
   Cozumler sayfasindaki KVK & Uyumluluk alani). Menudeki --feature vurgusunun
   kart karsiligi: mavi kenarlik, ust serit ve baslik rengi. */
.v-card--feature {
  border-color: rgba(6, 155, 222, 0.55);
  background-image: linear-gradient(160deg, rgba(6, 155, 222, 0.16) 0%, rgba(10, 27, 51, 0) 62%);
  box-shadow: var(--v-shadow-sm), 0 0 0 1px rgba(6, 155, 222, 0.18);
}
.v-card--feature::before {
  inset-inline: 0;
  height: 2px;
  opacity: 1;
  background: linear-gradient(90deg, var(--v-blue-deep), var(--v-blue), var(--v-blue-deep));
}
.v-card--feature .v-card__title a { color: var(--v-blue-bright, #4FC3F7); }
.v-card--feature .v-card__title a:hover,
.v-card--feature .v-card__title a:focus-visible { color: #fff; }
.v-card--feature .v-card__icon { border-color: rgba(6, 155, 222, 0.45); }

/* ==========================================================================
   BLOG YAZISI
   ========================================================================== */

/* Uzun metin icin okuma genisligi sinirlanir; satir uzunlugu 65-75 karakteri
   asarsa goz satir basini kaybediyor. */
.v-article {
  max-width: 72ch;
}
.v-article h2 {
  margin-top: var(--v-sp-7);
  margin-bottom: var(--v-sp-3);
  padding-top: var(--v-sp-5);
  border-top: 1px solid var(--v-border);
}
.v-article h2:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}
.v-article p {
  margin-bottom: var(--v-sp-4);
  line-height: 1.75;
}

/* Kart altindaki kucuk ust veri satiri (etiket · tarih · okuma suresi) */
.v-card__meta {
  display: block;
  margin-top: var(--v-sp-3);
  color: var(--v-text-dim, #8fa3b8);
  font-size: 0.82rem;
  letter-spacing: 0.02em;
}