@charset "utf-8";

/* ==========================================================================
   Vizra Teknoloji A.Ş. — Kurumsal Web Sitesi
   Tek stil dosyası. Harici kütüphane / CDN / web font bağımlılığı yoktur.
   --------------------------------------------------------------------------
   MARKA RENKLERİ
   Aşağıdaki palet, resmî logo vektörü assets/logos/vizra-logo.svg dosyasından
   alınmıştır; iki değer de SVG içinde birebir bu şekilde tanımlıdır:
       --vizra-navy  #06123C  (wordmark ve ayırıcı çizgi)
       --vizra-blue  #2959DE  (logodaki mavi aksan)
   Diğer tonlar bu iki renkten türetilmiştir. Marka kimliği güncellenirse
   yalnızca aşağıdaki :root değişkenlerini değiştirmeniz yeterlidir;
   sitenin tamamı bu değişkenlerden beslenir.

   KONTRAST NOTU (WCAG AA):
     #2959DE beyaz zemin üzerinde  ~5.9:1  → normal metinde AA uygun
     beyaz metin #2959DE üzerinde  ~5.9:1  → AA uygun
     beyaz metin #1E45B8 üzerinde  ~8.0:1  → küçük metinli mavi butonlarda
                                             tercih edilen ton
     #06123C beyaz zemin üzerinde ~17.4:1  → AAA
     #55627F beyaz zemin üzerinde  ~5.1:1  → yardımcı metinde AA uygun
   ========================================================================== */

:root {
  /* --- Resmî marka renkleri (vizra-logo.svg içinden alındı) --- */
  --vizra-navy: #06123c;           /* Birincil marka rengi */
  --vizra-blue: #2959de;           /* Birincil vurgu / CTA rengi */

  /* --- Türetilmiş lacivert tonları --- */
  --vizra-navy-900: #06123c;       /* En koyu: footer, hero bitişi */
  --vizra-navy-800: #0c1f5c;       /* Hero/footer ara katmanı */
  --vizra-navy-700: #132c7d;       /* Koyu yüzey vurgusu */

  /* --- Türetilmiş mavi tonları --- */
  --vizra-blue-dark: #1e45b8;      /* Hover ve küçük metinli mavi zeminler */
  --vizra-blue-darker: #17389a;    /* Aktif/basılı durum */
  --vizra-blue-soft: #eef2fe;      /* Açık mavi zemin: ikon kutusu, rozet */
  --vizra-blue-soft-2: #dde5fd;    /* Bir tık koyu açık mavi zemin */

  /* --- Nötr renkler --- */
  --vizra-ink: #1a2440;            /* Ana gövde metni */
  --vizra-ink-2: #2b3757;          /* İkincil başlık metni */
  --vizra-muted: #55627f;          /* Yardımcı metin (beyaz üzerinde AA) */
  --vizra-surface: #ffffff;
  --vizra-bg-soft: #f5f7fc;        /* Açık bölüm zemini */
  --vizra-bg-soft-2: #e9eefa;      /* Bir tık koyu açık zemin */
  --vizra-border: #e2e7f2;
  --vizra-border-strong: #c2cce4;

  /* --- Geriye dönük uyumluluk takma adları -----------------------------
     Stil kuralları boyunca kullanılan eski değişken adları, yeni marka
     paletine bağlanmıştır. Yeni kural yazarken doğrudan yukarıdaki
     --vizra-navy / --vizra-blue değişkenlerini kullanın.
     ------------------------------------------------------------------- */
  --vizra-primary: var(--vizra-blue);
  --vizra-primary-dark: var(--vizra-blue-dark);
  --vizra-primary-darker: var(--vizra-navy-900);
  --vizra-primary-light: var(--vizra-blue);
  --vizra-primary-soft: var(--vizra-blue-soft);
  --vizra-accent: var(--vizra-blue);
  --vizra-accent-ink: var(--vizra-blue-dark);
  --vizra-accent-soft: var(--vizra-blue-soft);
  --vizra-surface-alt: var(--vizra-bg-soft);
  --vizra-surface-alt-2: var(--vizra-bg-soft-2);

  /* --- Durum renkleri --- */
  --vizra-success: #1a7f4b;
  --vizra-warning: #8a5a00;
  --vizra-danger: #b3261e;

  /* --- Tipografi --- */
  --font-sans: "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans",
    "Liberation Sans", system-ui, -apple-system, sans-serif;

  /* --- Ölçüler --- */
  --container: 1200px;
  --container-narrow: 860px;
  --radius-sm: 6px;
  --radius: 12px;
  --radius-lg: 18px;
  --header-h: 74px;
  --dropdown-gap: 6px;             /* Üst menü ile açılır panel arası boşluk */

  /* --- Gölgeler --- */
  --shadow-xs: 0 1px 2px rgba(6, 18, 60, 0.06);
  --shadow-sm: 0 2px 8px rgba(6, 18, 60, 0.07);
  --shadow: 0 6px 20px rgba(6, 18, 60, 0.09);
  --shadow-lg: 0 16px 40px rgba(6, 18, 60, 0.16);

  /* --- Hareket --- */
  --t-fast: 120ms ease;
  --t: 200ms ease;
}

/* ==========================================================================
   1. Sıfırlama ve temel
   ========================================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Sticky header'ın anchor hedeflerini kapatmaması için */
  scroll-padding-top: calc(var(--header-h) + 16px);
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.7;
  color: var(--vizra-ink);
  background: var(--vizra-surface);
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}

body.is-locked {
  overflow: hidden;
}

img,
svg,
iframe {
  max-width: 100%;
}

img {
  height: auto;
  display: block;
  border: 0;
}

iframe {
  border: 0;
}

h1,
h2,
h3,
h4 {
  margin: 0 0 0.6em;
  line-height: 1.25;
  color: var(--vizra-ink);
  font-weight: 700;
  letter-spacing: -0.01em;
}

h1 {
  font-size: clamp(1.85rem, 1.25rem + 2.4vw, 2.9rem);
}

h2 {
  font-size: clamp(1.45rem, 1.1rem + 1.5vw, 2.1rem);
}

h3 {
  font-size: clamp(1.14rem, 1rem + 0.6vw, 1.35rem);
}

h4 {
  font-size: 1.02rem;
}

p {
  margin: 0 0 1.05em;
}

ul,
ol {
  margin: 0 0 1.05em;
  padding-left: 1.35em;
}

li {
  margin-bottom: 0.4em;
}

a {
  color: var(--vizra-primary-light);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color var(--t-fast);
}

a:hover {
  color: var(--vizra-primary-dark);
}

strong {
  font-weight: 700;
  color: var(--vizra-ink);
}

hr {
  border: 0;
  border-top: 1px solid var(--vizra-border);
  margin: 2rem 0;
}

address {
  font-style: normal;
}

table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 1.2em;
  font-size: 0.96rem;
}

th,
td {
  border: 1px solid var(--vizra-border);
  padding: 0.7rem 0.85rem;
  text-align: left;
  vertical-align: top;
}

th {
  background: var(--vizra-surface-alt);
  font-weight: 700;
  color: var(--vizra-ink-2);
}

code {
  font-family: Consolas, "Courier New", monospace;
  font-size: 0.92em;
  background: var(--vizra-surface-alt-2);
  border-radius: 4px;
  padding: 0.1em 0.35em;
}

/* Odak görünürlüğü — klavye erişilebilirliği için zorunlu */
:focus-visible {
  outline: 3px solid var(--vizra-accent);
  outline-offset: 2px;
  border-radius: 3px;
}

@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;
  }
}

/* ==========================================================================
   2. Yardımcı sınıflar
   ========================================================================== */

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

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

.visually-hidden {
  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;
}

.skip-link {
  position: absolute;
  left: 12px;
  top: -100px;
  z-index: 1200;
  background: var(--vizra-navy-900);
  color: #fff;
  padding: 0.7rem 1.1rem;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  text-decoration: none;
  font-weight: 600;
  transition: top var(--t);
}

.skip-link:focus {
  top: 0;
  color: #fff;
}

.section {
  padding: clamp(3rem, 2rem + 4vw, 5.25rem) 0;
}

.section-tight {
  padding: clamp(2.25rem, 1.5rem + 3vw, 3.5rem) 0;
}

.section-alt {
  background: var(--vizra-surface-alt);
}

.section-dark {
  background: linear-gradient(160deg, var(--vizra-primary-dark), var(--vizra-primary-darker));
  color: #dbe3f7;
}

.section-dark h2,
.section-dark h3 {
  color: #fff;
}

.section-head {
  max-width: 780px;
  margin-bottom: 2.5rem;
}

.section-head.is-centered {
  margin-inline: auto;
  text-align: center;
}

.section-head p {
  color: var(--vizra-muted);
  font-size: 1.06rem;
  margin-bottom: 0;
}

.section-dark .section-head p {
  color: #b7c4e6;
}

.eyebrow {
  display: inline-block;
  font-size: 0.79rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--vizra-accent-ink);
  background: var(--vizra-accent-soft);
  border-radius: 999px;
  padding: 0.32rem 0.85rem;
  margin-bottom: 1rem;
}

.section-dark .eyebrow {
  color: #9fb8ff;
  background: rgba(41, 89, 222, 0.24);
}

.lead {
  font-size: 1.1rem;
  color: var(--vizra-muted);
}

.text-muted {
  color: var(--vizra-muted);
}

.mb-0 {
  margin-bottom: 0;
}

/* ==========================================================================
   3. Butonlar
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  /* Dokunma hedefi: min 44px yükseklik */
  min-height: 46px;
  padding: 0.7rem 1.4rem;
  border-radius: var(--radius-sm);
  border: 2px solid transparent;
  font: inherit;
  font-weight: 600;
  font-size: 0.97rem;
  line-height: 1.3;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--t-fast), color var(--t-fast),
    border-color var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast);
}

.btn:hover {
  transform: translateY(-1px);
}

.btn:active {
  transform: translateY(0);
}

.btn-primary {
  background: var(--vizra-primary);
  border-color: var(--vizra-primary);
  color: #fff;
  box-shadow: var(--shadow-xs);
}

.btn-primary:hover {
  background: var(--vizra-primary-dark);
  border-color: var(--vizra-primary-dark);
  color: #fff;
}

.btn-accent {
  background: var(--vizra-accent-ink);
  border-color: var(--vizra-accent-ink);
  color: #fff;
}

.btn-accent:hover {
  background: #17389a;
  border-color: #17389a;
  color: #fff;
}

.btn-outline {
  background: transparent;
  border-color: var(--vizra-primary);
  color: var(--vizra-primary);
}

.btn-outline:hover {
  background: var(--vizra-primary);
  color: #fff;
}

.btn-light {
  background: #fff;
  border-color: #fff;
  color: var(--vizra-primary-dark);
}

.btn-light:hover {
  background: #dde5fd;
  border-color: #dde5fd;
  color: var(--vizra-primary-darker);
}

.btn-ghost-light {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.65);
  color: #fff;
}

.btn-ghost-light:hover {
  background: rgba(255, 255, 255, 0.14);
  border-color: #fff;
  color: #fff;
}

.btn-sm {
  min-height: 40px;
  padding: 0.45rem 1rem;
  font-size: 0.9rem;
}

.btn-block {
  width: 100%;
}

.btn-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.btn-group.is-centered {
  justify-content: center;
}

/* ==========================================================================
   4. İkonlar
   ========================================================================== */

/* Sayfa içine gömülü SVG sembol deposu. Hiçbir zaman doğrudan görüntülenmez;
   ikonlar <use href="#i-..."> ile buradan çağrılır. Harici ikon kütüphanesi
   kullanılmadığı için sprite her sayfaya gömülüdür. */
.svg-sprite {
  display: none;
}

.icon {
  width: 1.25em;
  height: 1.25em;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.icon-box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  flex: none;
  border-radius: var(--radius-sm);
  background: var(--vizra-primary-soft);
  color: var(--vizra-primary);
  margin-bottom: 1rem;
}

.icon-box .icon {
  width: 26px;
  height: 26px;
}

.icon-box.is-accent {
  background: var(--vizra-accent-soft);
  color: var(--vizra-accent-ink);
}

.icon-box.is-light {
  background: rgba(255, 255, 255, 0.12);
  color: #9fb8ff;
}

/* ==========================================================================
   5. Başlık / Header ve navigasyon
   ========================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 900;
  background: #fff;
  border-bottom: 1px solid var(--vizra-border);
  box-shadow: var(--shadow-xs);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: var(--header-h);
}

/* --- Marka / logo -------------------------------------------------------
   Resmî logo: assets/logos/vizra-logo.svg (vektör, viewBox 619.91 × 135.28,
   oran 4.5824:1). Oran korunur: yükseklik sabitlenir, genişlik otomatik
   hesaplanır; HTML'deki width/height attribute'ları da aynı oranı taşır (CLS).
   Logo germe, döndürme veya renk değişikliği UYGULANMAZ.
   ---------------------------------------------------------------------- */
.brand {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  padding: 0.35rem 0;
  flex: none;
}

.brand-logo {
  display: block;
  height: 40px;
  width: auto;
  max-width: 62vw;
}

/* --- Hamburger --- */
.nav-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  min-width: 44px;
  padding: 0.5rem 0.8rem;
  background: #fff;
  border: 1px solid var(--vizra-border-strong);
  border-radius: var(--radius-sm);
  color: var(--vizra-primary-dark);
  font: inherit;
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
}

.nav-toggle:hover {
  background: var(--vizra-surface-alt);
}

.nav-toggle-bars {
  position: relative;
  display: block;
  width: 20px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: background-color var(--t-fast);
}

.nav-toggle-bars::before,
.nav-toggle-bars::after {
  content: "";
  position: absolute;
  left: 0;
  width: 20px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: transform var(--t), top var(--t);
}

.nav-toggle-bars::before {
  top: -6px;
}

.nav-toggle-bars::after {
  top: 6px;
}

.nav-toggle[aria-expanded="true"] .nav-toggle-bars {
  background: transparent;
}

.nav-toggle[aria-expanded="true"] .nav-toggle-bars::before {
  top: 0;
  transform: rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle-bars::after {
  top: 0;
  transform: rotate(-45deg);
}

/* --- Menü (mobil öncelikli) --- */
.site-nav {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  background: #fff;
  border-bottom: 1px solid var(--vizra-border);
  box-shadow: var(--shadow);
  max-height: calc(100vh - var(--header-h));
  overflow-y: auto;
  display: none;
}

.site-nav.is-open {
  display: block;
}

.nav-list {
  list-style: none;
  margin: 0;
  padding: 0.5rem 20px 1.1rem;
  max-width: var(--container);
  margin-inline: auto;
}

.nav-list li {
  margin: 0;
}

.nav-list > li > a,
.nav-dropdown-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem;
  width: 100%;
  min-height: 48px;
  padding: 0.7rem 0.5rem;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--vizra-border);
  border-radius: 0;
  font: inherit;
  font-weight: 600;
  font-size: 1rem;
  color: var(--vizra-ink-2);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.nav-list > li > a:hover,
.nav-dropdown-toggle:hover {
  color: var(--vizra-primary);
}

.nav-caret {
  width: 14px;
  height: 14px;
  transition: transform var(--t);
}

.nav-dropdown-toggle[aria-expanded="true"] .nav-caret {
  transform: rotate(180deg);
}

.dropdown {
  list-style: none;
  margin: 0;
  padding: 0.25rem 0 0.6rem 0.75rem;
  display: none;
}

.dropdown.is-open {
  display: block;
}

.dropdown a {
  display: block;
  min-height: 44px;
  padding: 0.6rem 0.5rem;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--vizra-muted);
  text-decoration: none;
  border-radius: var(--radius-sm);
}

.dropdown a:hover {
  color: var(--vizra-primary);
  background: var(--vizra-surface-alt);
}

.nav-cta {
  margin-top: 0.9rem;
}

.nav-cta a {
  border-bottom: 0;
}

.nav-cta .btn {
  width: 100%;
}

/* --- Aktif sayfa işaretleme --------------------------------------------
   Header markup'ı tüm sayfalarda birebir aynıdır. Aktif sayfa yalnızca
   <body data-page="..."> özniteliği ile CSS üzerinden belirlenir; bu sayede
   JavaScript kapalıyken de aktif menü öğesi görünür durumdadır.
   ---------------------------------------------------------------------- */
body[data-page="index"] .nav-list > li > a[href="index.html"],
body[data-page="hakkimizda"] #nav-kurumsal-toggle,
body[data-page="hizmetlerimiz"] .nav-list > li > a[href="hizmetlerimiz.html"],
body[data-page="iletisim"] .nav-list > li:not(.nav-cta) > a[href="iletisim.html"],
body[data-page="yasal"] #nav-yasal-toggle {
  color: var(--vizra-primary);
}

body[data-page="hakkimizda"] .dropdown a[href="hakkimizda.html"],
body[data-page="hizmetlerimiz"] .dropdown a[href="hizmetlerimiz.html"] {
  color: var(--vizra-primary);
  font-weight: 700;
}

/* ==========================================================================
   6. Hero
   ========================================================================== */

.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: #e7ecfb;
  background-color: var(--vizra-navy-900);
  background-image: linear-gradient(145deg, var(--vizra-blue) 0%, var(--vizra-navy-800) 52%, var(--vizra-navy-900) 100%);
  padding: clamp(3.25rem, 2rem + 6vw, 6.5rem) 0;
}

/* Opsiyonel hero fotoğrafı için hazır kanca.
   assets/images/hero.webp dosyasını ekledikten sonra .hero elementine
   "has-hero-image" sınıfını vermeniz yeterlidir. */
.hero.has-hero-image {
  background-image: linear-gradient(145deg, rgba(41, 89, 222, 0.92), rgba(6, 18, 60, 0.96)),
    url("../assets/images/hero.webp");
  background-size: cover;
  background-position: center;
}

/* Görselsiz de teknolojik doku veren ince grid deseni */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.055) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 85% 75% at 72% 25%, #000 25%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 85% 75% at 72% 25%, #000 25%, transparent 78%);
}

.hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  width: 620px;
  height: 620px;
  right: -180px;
  top: -260px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(41, 89, 222, 0.40), transparent 68%);
}

.hero-grid {
  display: grid;
  gap: 2.5rem;
  align-items: center;
}

.hero h1 {
  color: #fff;
  margin-bottom: 1rem;
}

.hero-lead {
  font-size: clamp(1rem, 0.95rem + 0.35vw, 1.13rem);
  color: #c3cdea;
  max-width: 62ch;
  margin-bottom: 1.9rem;
}

.hero-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 2.25rem 0 0;
  padding: 0;
  list-style: none;
}

.hero-badges li {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0;
  padding: 0.4rem 0.85rem;
  font-size: 0.86rem;
  font-weight: 600;
  color: #d3daf3;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
}

.hero-badges .icon {
  width: 15px;
  height: 15px;
  color: #9fb8ff;
}

/* Hero yan panel — teknoloji altyapısını çağrıştıran soyut görsel blok */
.hero-panel {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  backdrop-filter: blur(2px);
}

.hero-panel h2 {
  font-size: 1.05rem;
  color: #fff;
  margin-bottom: 1rem;
}

.hero-stats {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.75rem;
}

.hero-stats li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin: 0;
  padding: 0.85rem 0.95rem;
  background: rgba(6, 18, 60, 0.46);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-sm);
}

.hero-stats .icon {
  width: 22px;
  height: 22px;
  color: #9fb8ff;
  margin-top: 2px;
}

.hero-stats strong {
  display: block;
  color: #fff;
  font-size: 0.98rem;
}

.hero-stats span {
  display: block;
  font-size: 0.86rem;
  color: #b7c4e6;
  line-height: 1.5;
}

/* ==========================================================================
   7. Sayfa başlığı (iç sayfalar)
   ========================================================================== */

.page-hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(145deg, var(--vizra-blue-darker), var(--vizra-navy-900));
  color: #dbe3f7;
  padding: clamp(2.5rem, 1.8rem + 3.5vw, 4.25rem) 0;
}

.page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 52px 52px;
  mask-image: radial-gradient(ellipse 80% 90% at 80% 15%, #000 20%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 80% 90% at 80% 15%, #000 20%, transparent 75%);
  pointer-events: none;
}

.page-hero .container {
  position: relative;
}

.page-hero h1 {
  color: #fff;
  margin-bottom: 0.6rem;
}

.page-hero p {
  max-width: 68ch;
  color: #b7c4e6;
  margin-bottom: 0;
}

/* Breadcrumb */
.breadcrumb {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 0 0 1rem;
  padding: 0;
  font-size: 0.86rem;
}

.breadcrumb li {
  margin: 0;
  color: #a3b1d6;
}

.breadcrumb li + li::before {
  content: "/";
  margin-right: 0.35rem;
  color: #6b7aa3;
}

.breadcrumb a {
  color: #ccd6f2;
  text-decoration: none;
}

.breadcrumb a:hover {
  color: #fff;
  text-decoration: underline;
}

/* ==========================================================================
   8. Izgara sistemleri ve kartlar
   ========================================================================== */

.grid {
  display: grid;
  gap: 1.25rem;
}

.grid-2,
.grid-3,
.grid-4 {
  display: grid;
  gap: 1.25rem;
}

.card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--vizra-border);
  border-radius: var(--radius);
  padding: 1.5rem;
  box-shadow: var(--shadow-xs);
  transition: box-shadow var(--t), border-color var(--t), transform var(--t);
}

.card:hover {
  box-shadow: var(--shadow);
  border-color: var(--vizra-border-strong);
  transform: translateY(-2px);
}

.card h3 {
  font-size: 1.09rem;
  margin-bottom: 0.5rem;
}

.card p {
  color: var(--vizra-muted);
  font-size: 0.95rem;
  margin-bottom: 1.1rem;
}

.card-link {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  align-self: flex-start;
  min-height: 32px;
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--vizra-primary);
  text-decoration: none;
}

.card-link .icon {
  width: 15px;
  height: 15px;
  transition: transform var(--t-fast);
}

.card-link:hover {
  color: var(--vizra-primary-dark);
  text-decoration: underline;
}

.card-link:hover .icon {
  transform: translateX(3px);
}

/* Basit özellik kutusu (Neden Vizra) */
.feature {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  background: #fff;
  border: 1px solid var(--vizra-border);
  border-radius: var(--radius);
  padding: 1.25rem;
}

.feature .icon-box {
  width: 44px;
  height: 44px;
  margin-bottom: 0;
}

.feature .icon-box .icon {
  width: 22px;
  height: 22px;
}

.feature h3 {
  font-size: 1rem;
  margin-bottom: 0.3rem;
}

.feature p {
  font-size: 0.92rem;
  color: var(--vizra-muted);
  margin-bottom: 0;
}

/* İçerik kutusu (kurumsal metinler) */
.panel {
  background: #fff;
  border: 1px solid var(--vizra-border);
  border-radius: var(--radius);
  padding: clamp(1.25rem, 1rem + 1vw, 2rem);
}

.panel-alt {
  background: var(--vizra-surface-alt);
  border-color: var(--vizra-border);
}

.panel-accent {
  border-left: 4px solid var(--vizra-accent);
}

/* Uyarı / bilgi kutusu */
.notice {
  display: flex;
  gap: 0.85rem;
  align-items: flex-start;
  background: var(--vizra-accent-soft);
  border: 1px solid #c6d3fb;
  border-left: 4px solid var(--vizra-accent-ink);
  border-radius: var(--radius-sm);
  padding: 1rem 1.15rem;
  margin: 0 0 1.5rem;
  font-size: 0.94rem;
}

.notice .icon {
  width: 20px;
  height: 20px;
  color: var(--vizra-accent-ink);
  margin-top: 3px;
}

.notice p:last-child {
  margin-bottom: 0;
}

.notice-warning {
  background: #fdf6e6;
  border-color: #eddaa8;
  border-left-color: var(--vizra-warning);
}

.notice-warning .icon {
  color: var(--vizra-warning);
}

/* Placeholder vurgusu — şirket tarafından doldurulacak alanlar */
.placeholder {
  display: inline-block;
  background: #fdf6e6;
  border: 1px dashed #d3ab4e;
  border-radius: 4px;
  padding: 0.05em 0.4em;
  font-weight: 600;
  color: #6d4a00;
  font-size: 0.94em;
}

/* İşaretli liste */
.list-check {
  list-style: none;
  padding: 0;
  margin: 0 0 1.05em;
}

.list-check li {
  position: relative;
  padding-left: 1.75rem;
  margin-bottom: 0.55rem;
}

.list-check li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--vizra-accent);
  box-shadow: 0 0 0 4px var(--vizra-accent-soft);
}

.list-plain {
  list-style: none;
  padding: 0;
}

.list-inline {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0;
  margin: 0;
}

.tag {
  display: inline-block;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  background: var(--vizra-primary-soft);
  color: var(--vizra-primary);
  font-size: 0.83rem;
  font-weight: 600;
}

/* ==========================================================================
   9. Hizmet detay bölümleri (hizmetlerimiz.html)
   ========================================================================== */

.service-block {
  scroll-margin-top: calc(var(--header-h) + 20px);
  background: #fff;
  border: 1px solid var(--vizra-border);
  border-radius: var(--radius);
  padding: clamp(1.35rem, 1rem + 1.2vw, 2.1rem);
  margin-bottom: 1.5rem;
  box-shadow: var(--shadow-xs);
}

.service-block:target {
  border-color: var(--vizra-accent);
  box-shadow: 0 0 0 3px var(--vizra-accent-soft);
}

.service-block-head {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  margin-bottom: 1rem;
}

.service-block-head .icon-box {
  margin-bottom: 0;
}

.service-block-head h2 {
  font-size: clamp(1.2rem, 1.05rem + 0.6vw, 1.5rem);
  margin-bottom: 0.25rem;
}

.service-block-head p {
  color: var(--vizra-muted);
  margin-bottom: 0;
  font-size: 0.95rem;
}

.service-cols {
  display: grid;
  gap: 1.25rem;
  margin-bottom: 1.25rem;
}

.service-col h3 {
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--vizra-accent-ink);
  margin-bottom: 0.6rem;
}

.service-col ul,
.service-col p {
  font-size: 0.94rem;
  color: var(--vizra-ink-2);
  margin-bottom: 0;
}

.service-block-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
  padding-top: 1.15rem;
  border-top: 1px solid var(--vizra-border);
}

/* Hizmet içindekiler tablosu */
.toc {
  background: var(--vizra-surface-alt);
  border: 1px solid var(--vizra-border);
  border-radius: var(--radius);
  padding: 1.25rem 1.5rem;
  margin-bottom: 2rem;
}

.toc h2 {
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--vizra-muted);
  margin-bottom: 0.85rem;
}

.toc ol {
  columns: 1;
  column-gap: 2rem;
  margin: 0;
  padding-left: 1.2rem;
  font-size: 0.94rem;
}

.toc li {
  break-inside: avoid;
}

.toc a {
  color: var(--vizra-primary);
  text-decoration: none;
}

.toc a:hover {
  text-decoration: underline;
}

/* ==========================================================================
   10. Teknokent / Ar-Ge bölümü
   ========================================================================== */

.rnd-grid {
  display: grid;
  gap: 2rem;
  align-items: center;
}

.rnd-visual {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 240px;
  border-radius: var(--radius-lg);
  background: linear-gradient(150deg, rgba(41, 89, 222, 0.20), rgba(41, 89, 222, 0.16));
  border: 1px solid rgba(255, 255, 255, 0.14);
  padding: 2rem;
}

.rnd-visual .icon {
  width: 96px;
  height: 96px;
  color: #9fb8ff;
  stroke-width: 1.2;
}

/* ==========================================================================
   11. İletişim sayfası
   ========================================================================== */

.contact-grid {
  display: grid;
  gap: 1.75rem;
  align-items: start;
}

/* 5651 tanıtıcı bilgiler tablosu */
.info-table {
  margin-bottom: 0;
}

.info-table th {
  width: 38%;
  white-space: normal;
}

.contact-quick {
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem;
  display: grid;
  gap: 0.65rem;
}

.contact-quick li {
  margin: 0;
}

.contact-quick a,
.contact-quick .contact-quick-static {
  display: flex;
  gap: 0.8rem;
  align-items: flex-start;
  min-height: 48px;
  padding: 0.8rem 1rem;
  background: #fff;
  border: 1px solid var(--vizra-border);
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: var(--vizra-ink);
}

.contact-quick a:hover {
  border-color: var(--vizra-primary);
  background: var(--vizra-primary-soft);
  color: var(--vizra-ink);
}

.contact-quick .icon {
  width: 20px;
  height: 20px;
  flex: none;
  color: var(--vizra-blue);
  margin-top: 4px;
}

.contact-quick-body {
  display: block;
  min-width: 0;
}

.contact-quick-body strong {
  display: block;
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--vizra-muted);
}

.contact-quick-body span {
  display: block;
  font-size: 0.98rem;
  line-height: 1.5;
  color: var(--vizra-ink);
  font-weight: 600;
}

/* Harita — çerez onayına bağlı yüklenir */
.map-wrap {
  position: relative;
  border: 1px solid var(--vizra-border);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--vizra-surface-alt);
}

.map-frame {
  display: block;
  width: 100%;
  height: 340px;
}

.map-consent {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 0.85rem;
  min-height: 340px;
  padding: 1.75rem;
  background:
    linear-gradient(rgba(244, 247, 251, 0.92), rgba(244, 247, 251, 0.92)),
    repeating-linear-gradient(45deg, #dbe4f0 0 12px, #eef3f9 12px 24px);
}

.map-consent p {
  max-width: 52ch;
  font-size: 0.94rem;
  color: var(--vizra-muted);
  margin-bottom: 0;
}

/* ==========================================================================
   12. Formlar
   ========================================================================== */

.form-grid {
  display: grid;
  gap: 1.1rem;
}

.form-row {
  display: grid;
  gap: 1.1rem;
}

.field label,
.form-legend {
  display: block;
  font-weight: 600;
  font-size: 0.93rem;
  color: var(--vizra-ink-2);
  margin-bottom: 0.35rem;
}

.req {
  color: var(--vizra-danger);
  font-weight: 700;
}

.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: 46px;
  padding: 0.65rem 0.85rem;
  font: inherit;
  font-size: 0.97rem;
  color: var(--vizra-ink);
  background: #fff;
  border: 1px solid var(--vizra-border-strong);
  border-radius: var(--radius-sm);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}

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

.field input:hover,
.field select:hover,
.field textarea:hover {
  border-color: var(--vizra-primary-light);
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--vizra-primary);
  box-shadow: 0 0 0 3px rgba(41, 89, 222, 0.18);
  outline: none;
}

.field .hint {
  display: block;
  font-size: 0.84rem;
  color: var(--vizra-muted);
  margin-top: 0.3rem;
}

.field .error-text {
  display: none;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--vizra-danger);
  margin-top: 0.3rem;
}

.field.has-error input,
.field.has-error select,
.field.has-error textarea {
  border-color: var(--vizra-danger);
  background: #fdf3f2;
}

.field.has-error .error-text {
  display: block;
}

.field-check {
  display: flex;
  gap: 0.7rem;
  align-items: flex-start;
}

.field-check input[type="checkbox"] {
  width: 20px;
  height: 20px;
  min-height: 20px;
  margin: 3px 0 0;
  flex: none;
  accent-color: var(--vizra-primary);
}

.field-check label {
  margin-bottom: 0;
  font-weight: 500;
  font-size: 0.93rem;
  line-height: 1.6;
  color: var(--vizra-ink-2);
}

/* Honeypot — ekran dışında, ekran okuyucudan da gizli */
.hp-field {
  position: absolute !important;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-status {
  display: none;
  border-radius: var(--radius-sm);
  padding: 0.9rem 1.1rem;
  font-size: 0.94rem;
  font-weight: 600;
  margin-bottom: 0;
}

.form-status.is-visible {
  display: block;
}

.form-status.is-error {
  background: #fdf3f2;
  border: 1px solid #f0c4c0;
  color: var(--vizra-danger);
}

.form-status.is-info {
  background: var(--vizra-primary-soft);
  border: 1px solid #c6d3fb;
  color: var(--vizra-primary-dark);
}

/* ==========================================================================
   13. CTA şeridi
   ========================================================================== */

.cta-band {
  background: linear-gradient(140deg, var(--vizra-primary), var(--vizra-primary-darker));
  color: #dbe3f7;
  border-radius: var(--radius-lg);
  padding: clamp(1.75rem, 1.25rem + 2.5vw, 3rem);
  text-align: center;
}

.cta-band h2 {
  color: #fff;
}

.cta-band p {
  max-width: 62ch;
  margin-inline: auto;
  color: #b7c4e6;
}

/* ==========================================================================
   14. Footer
   ========================================================================== */

.site-footer {
  background: var(--vizra-primary-darker);
  color: #a8b4d2;
  font-size: 0.94rem;
  padding-top: clamp(2.5rem, 2rem + 2vw, 3.5rem);
}

.site-footer h2 {
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: 1rem;
}

.footer-grid {
  display: grid;
  gap: 2rem;
  padding-bottom: 2.25rem;
}

.footer-about p {
  color: #a8b4d2;
  font-size: 0.92rem;
}

/* Koyu lacivert footer zemininde logonun açık renkli sürümü kullanılır:
   assets/logos/vizra-logo-light.svg (vektör). Oran korunur. */
.footer-brand {
  display: inline-block;
  margin-bottom: 1rem;
  text-decoration: none;
}

.footer-logo {
  display: block;
  height: 46px;
  width: auto;
  max-width: 100%;
}

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

.footer-list li {
  margin-bottom: 0.15rem;
}

.footer-list a {
  display: inline-block;
  padding: 0.4rem 0;
  color: #bcc6e0;
  text-decoration: none;
  font-size: 0.93rem;
}

.footer-list a:hover {
  color: #fff;
  text-decoration: underline;
}

.footer-contact {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.92rem;
}

.footer-contact li {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  margin-bottom: 0.75rem;
  color: #a8b4d2;
}

.footer-contact .icon {
  width: 17px;
  height: 17px;
  color: #9fb8ff;
  margin-top: 4px;
  flex: none;
}

.footer-contact a {
  color: #dbe3f7;
  text-decoration: none;
}

.footer-contact a:hover {
  color: #fff;
  text-decoration: underline;
}

/* Ödeme logoları */
.footer-payments {
  border-top: 1px solid rgba(255, 255, 255, 0.11);
  padding: 1.5rem 0;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 1.5rem;
  align-items: center;
  justify-content: space-between;
}

.payment-label {
  font-size: 0.85rem;
  color: #8f9cc0;
  margin: 0;
}

.payment-logos {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin: 0;
  padding: 0;
}

.payment-logos li {
  margin: 0;
}

/* Resmî iyzico ödeme bandı (Mastercard + Visa + Troy + iyzico).
   Dosya iyzico'nun resmî logo paketinden alınmıştır; oranı 429:32'dir.
   Renk, saydamlık, filtre veya karışım modu UYGULANMAMALIDIR. */
.payment-band {
  display: block;
  width: 429px;
  max-width: 100%;
  height: auto;
}

/* Sosyal medya */
.social-list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: 1.1rem 0 0;
  padding: 0;
}

.social-list li {
  margin: 0;
}

.social-list a,
.social-list .social-item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: #ccd6f2;
  text-decoration: none;
}

.social-list a:hover {
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
}

/* Sosyal medya adresleri henüz tanımlanmadığı için kırık bağlantı
   oluşturmamak adına <span> olarak render edilir. Adresler geldiğinde
   HTML içindeki hazır <a> örneği kullanılmalıdır. */
.social-list .social-item {
  border-style: dashed;
  color: #8f9cc0;
  cursor: default;
}

.social-list .icon {
  width: 19px;
  height: 19px;
}

.social-note {
  font-size: 0.8rem;
  color: #8f9cc0;
  margin: 0.6rem 0 0;
}

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.11);
  padding: 1.25rem 0 1.75rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  align-items: center;
  justify-content: space-between;
  font-size: 0.86rem;
  color: #8f9cc0;
}

.footer-bottom p {
  margin: 0;
}

.footer-bottom-links {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1rem;
  margin: 0;
  padding: 0;
}

.footer-bottom-links li {
  margin: 0;
}

.footer-bottom-links a {
  color: #a8b4d2;
  text-decoration: none;
}

.footer-bottom-links a:hover {
  color: #fff;
  text-decoration: underline;
}

/* ==========================================================================
   15. Çerez bildirimi ve tercih yönetimi
   ========================================================================== */

.cookie-banner {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1000;
  background: #fff;
  border-top: 3px solid var(--vizra-primary);
  box-shadow: 0 -8px 30px rgba(6, 18, 60, 0.18);
  padding: 1.1rem 0 1.25rem;
}

.cookie-banner[hidden] {
  display: none;
}

.cookie-inner {
  display: grid;
  gap: 1rem;
  align-items: center;
}

.cookie-text h2 {
  font-size: 1.02rem;
  margin-bottom: 0.35rem;
}

.cookie-text p {
  font-size: 0.9rem;
  color: var(--vizra-muted);
  margin-bottom: 0;
}

.cookie-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.cookie-actions .btn {
  flex: 1 1 auto;
}

/* Tercih yönetimi modalı */
.modal {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgba(6, 18, 60, 0.66);
}

.modal[hidden] {
  display: none;
}

.modal-dialog {
  width: 100%;
  max-width: 640px;
  max-height: calc(100vh - 2rem);
  overflow-y: auto;
  background: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: clamp(1.25rem, 1rem + 1vw, 2rem);
}

.modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.5rem;
}

.modal-head h2 {
  margin-bottom: 0;
  font-size: 1.25rem;
}

.modal-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex: none;
  background: var(--vizra-surface-alt);
  border: 1px solid var(--vizra-border);
  border-radius: 50%;
  color: var(--vizra-ink-2);
  cursor: pointer;
}

.modal-close:hover {
  background: var(--vizra-surface-alt-2);
}

.modal-close .icon {
  width: 18px;
  height: 18px;
}

.cookie-group {
  border: 1px solid var(--vizra-border);
  border-radius: var(--radius-sm);
  padding: 0.95rem 1.1rem;
  margin-bottom: 0.75rem;
}

.cookie-group-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.cookie-group h3 {
  font-size: 0.99rem;
  margin-bottom: 0.3rem;
}

.cookie-group p {
  font-size: 0.89rem;
  color: var(--vizra-muted);
  margin-bottom: 0;
}

.cookie-switch {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  flex: none;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--vizra-muted);
  cursor: pointer;
}

.cookie-switch input {
  width: 20px;
  height: 20px;
  margin: 0;
  accent-color: var(--vizra-primary);
}

.cookie-switch input:disabled {
  cursor: not-allowed;
}

.modal-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--vizra-border);
}

/* Footer'daki "Çerez Tercihleri" yeniden açma butonu */
.cookie-reopen {
  background: none;
  border: 0;
  padding: 0.4rem 0;
  font: inherit;
  font-size: 0.93rem;
  color: #bcc6e0;
  text-decoration: none;
  cursor: pointer;
  text-align: left;
}

.cookie-reopen:hover {
  color: #fff;
  text-decoration: underline;
}

/* ==========================================================================
   16. Yasal metin sayfaları
   ========================================================================== */

.legal-body {
  max-width: 78ch;
}

.legal-body h2 {
  font-size: clamp(1.2rem, 1.05rem + 0.5vw, 1.45rem);
  margin-top: 2.25rem;
  padding-top: 0.35rem;
  scroll-margin-top: calc(var(--header-h) + 20px);
}

.legal-body h2:first-of-type {
  margin-top: 0;
}

.legal-body h3 {
  font-size: 1.05rem;
  margin-top: 1.5rem;
}

.legal-meta {
  font-size: 0.88rem;
  color: var(--vizra-muted);
  border-bottom: 1px solid var(--vizra-border);
  padding-bottom: 1rem;
  margin-bottom: 1.75rem;
}

.legal-nav {
  background: var(--vizra-surface-alt);
  border: 1px solid var(--vizra-border);
  border-radius: var(--radius);
  padding: 1.25rem 1.4rem;
  margin-top: 2.5rem;
}

.legal-nav h2 {
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--vizra-muted);
  margin: 0 0 0.85rem;
}

.legal-nav ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
}

.legal-nav li {
  margin: 0;
}

.legal-nav a {
  display: inline-block;
  min-height: 38px;
  padding: 0.5rem 0.9rem;
  background: #fff;
  border: 1px solid var(--vizra-border);
  border-radius: 999px;
  color: var(--vizra-primary);
  font-size: 0.89rem;
  font-weight: 600;
  text-decoration: none;
}

.legal-nav a:hover {
  background: var(--vizra-primary);
  border-color: var(--vizra-primary);
  color: #fff;
}

/* ==========================================================================
   17. Duyarlı kırılım noktaları
   ========================================================================== */

/* --- ≥ 560px --- */
@media (min-width: 35rem) {
  .grid-2,
  .grid-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .btn-group .btn {
    min-width: 190px;
  }

  .cookie-actions .btn {
    flex: 0 1 auto;
  }
}

/* --- ≥ 760px --- */
@media (min-width: 47.5rem) {
  .grid-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

  .toc ol {
    columns: 2;
  }

  .form-row.cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

  .cookie-inner {
    grid-template-columns: minmax(0, 1fr) auto;
  }
}

/* --- ≥ 980px : masaüstü menüsü devreye girer --- */
@media (min-width: 61.25rem) {
  .nav-toggle {
    display: none;
  }

  .site-nav {
    position: static;
    display: block;
    max-height: none;
    overflow: visible;
    background: none;
    border: 0;
    box-shadow: none;
  }

  .nav-list {
    display: flex;
    align-items: center;
    gap: 0.15rem;
    padding: 0;
    margin: 0;
  }

  .nav-list > li {
    position: relative;
  }

  .nav-list > li > a,
  .nav-dropdown-toggle {
    width: auto;
    min-height: 42px;
    padding: 0.5rem 0.72rem;
    border-bottom: 0;
    border-radius: var(--radius-sm);
    font-size: 0.94rem;
    white-space: nowrap;
  }

  .nav-list > li > a:hover,
  .nav-dropdown-toggle:hover {
    background: var(--vizra-surface-alt);
  }

  /* Masaüstünde aktif sayfa alt çizgi ile de belirtilir */
  body[data-page="index"] .nav-list > li > a[href="index.html"],
  body[data-page="hakkimizda"] #nav-kurumsal-toggle,
  body[data-page="hizmetlerimiz"] .nav-list > li > a[href="hizmetlerimiz.html"],
  body[data-page="iletisim"] .nav-list > li:not(.nav-cta) > a[href="iletisim.html"],
  body[data-page="yasal"] #nav-yasal-toggle {
    background: var(--vizra-primary-soft);
    box-shadow: inset 0 -3px 0 var(--vizra-primary);
  }

  .dropdown {
    position: absolute;
    top: calc(100% + var(--dropdown-gap));
    left: 0;
    min-width: 250px;
    padding: 0.45rem;
    background: #fff;
    border: 1px solid var(--vizra-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
  }

  /* Açılır menü ile üst bağlantı arasındaki görsel boşluk hiçbir öğeye ait
     olmadığı için, fare aşağı inerken imleç bu boşluğa girdiği anda menü
     kapanıyordu. Aşağıdaki saydam köprü, boşluğu tetikleyici butonun kendi
     alanına dahil eder; imleç butonun bir parçası üzerinde kaldığı için üst
     <li> öğesinde mouseleave tetiklenmez ve menü açık kalır.
     Köprü yalnızca menü açıkken ve yalnızca butonun genişliği kadar oluşturulur;
     böylece komşu menü öğelerinin tıklanabilir alanı kapatılmaz. */
  .nav-dropdown-toggle {
    position: relative;
  }

  .nav-dropdown-toggle[aria-expanded="true"]::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    height: calc(var(--dropdown-gap) + 4px);
  }

  .dropdown a {
    min-height: 40px;
    color: var(--vizra-ink-2);
  }

  .nav-cta {
    margin-top: 0;
    margin-left: 0.5rem;
  }

  .nav-cta .btn {
    width: auto;
  }

  .hero-grid {
    grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
    gap: 3rem;
  }

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

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

  .rnd-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.72fr);
    gap: 3rem;
  }

  .contact-grid {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: 2.5rem;
  }

  .service-cols {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .footer-grid {
    grid-template-columns: 1.5fr 1fr 1fr 1.25fr;
    gap: 2.5rem;
  }
}

/* --- ≥ 1200px --- */
@media (min-width: 75rem) {
  .toc ol {
    columns: 3;
  }
}

/* ==========================================================================
   18. Yazdırma
   ========================================================================== */

@media print {
  .site-header,
  .site-footer,
  .cookie-banner,
  .modal,
  .btn,
  .legal-nav,
  .skip-link {
    display: none !important;
  }

  body {
    color: #000;
    font-size: 11pt;
  }

  a {
    color: #000;
    text-decoration: underline;
  }

  .page-hero {
    background: none;
    color: #000;
    padding: 0 0 1rem;
  }

  .page-hero h1,
  .page-hero p {
    color: #000;
  }
}