/* ==========================================================================
   ADG Yazilim Proje ve Danismanlik - Ana Stil Dosyasi
   Marka: ADG kirmizisi (#E3000C) + koyu lacivert murekkep
   Bolumler: 1) Token  2) Reset  3) Tipografi  4) Yerlesim  5) Bilesenler
             6) Header  7) Sayfa bloklari  8) Footer  9) Responsive
   ========================================================================== */

/* ---------- 1) TASARIM TOKEN'LARI ---------- */
:root {
  /* Marka */
  --red: #E3000C;
  --red-600: #C4000A;
  --red-700: #A50008;
  --red-050: #FFF1F2;
  --red-100: #FFE1E3;

  /* Murekkep / notr */
  --ink: #0B1220;
  --ink-800: #16233A;
  --ink-700: #24344F;
  --slate: #48566C;
  /* #6B7A8F beyaz üzerinde 4.37, --bg-soft üzerinde 4.11 kontrast veriyordu;
     WCAG AA (4.5) eşiğini geçmesi için koyulaştırıldı. */
  --muted: #5C6A7D;
  --line: #E3E8EF;
  --line-soft: #EEF2F7;

  /* Yuzeyler */
  --bg: #FFFFFF;
  --bg-soft: #F6F8FB;
  --bg-deep: #0B1220;

  /* Olcu */
  --wrap: 1200px;
  --wrap-narrow: 880px;
  --gut: 24px;
  --r-sm: 8px;
  --r: 14px;
  --r-lg: 20px;
  --r-pill: 999px;

  /* Golge */
  --sh-1: 0 1px 2px rgba(11,18,32,.06), 0 1px 3px rgba(11,18,32,.05);
  --sh-2: 0 4px 12px rgba(11,18,32,.07), 0 2px 4px rgba(11,18,32,.04);
  --sh-3: 0 18px 44px rgba(11,18,32,.12), 0 4px 12px rgba(11,18,32,.06);
  --sh-red: 0 10px 26px rgba(227,0,12,.26);

  /* Tipografi */
  --font: "Inter", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Manrope", "Inter", "Segoe UI", system-ui, sans-serif;

  /* Punto olcegi — 7 adim. Onceden 33 ayri deger vardi ve sekizi .90-.97rem
     arasina sikismisti; bu, olcek degil zamanla olusmus sapmaydi.
     Yeni deger eklerken once bu adimlardan biri ise yarar mi diye bakin. */
  --fs-2xs:  .78rem;   /* eyebrow, rozet, ust bar, altbilgi ust yazi */
  --fs-xs:   .86rem;   /* not, ipucu, sayfa yolu, kucuk etiket */
  --fs-sm:   .94rem;   /* ikincil govde, kart metni, menu, buton */
  --fs-base: 1rem;     /* govde metni */
  --fs-md:   1.08rem;  /* h4, vurgulu arayuz ogesi */
  --fs-lg:   1.2rem;   /* kucuk baslik (yan kart, panel) */
  --fs-lead: clamp(1.03rem, .98rem + .35vw, 1.2rem);
  --fs-h3:   clamp(1.2rem, 1.05rem + .55vw, 1.5rem);
  --fs-h2:   clamp(1.6rem, 1.15rem + 1.7vw, 2.5rem);
  --fs-h1:   clamp(2.05rem, 1.35rem + 2.6vw, 3.5rem);
  --fs-stat: clamp(2.1rem, 1.5rem + 2vw, 3.15rem);

  /* Agirlik — 3 adim. 500 ve 700 kaldirildi. */
  --fw-body: 400;      /* govde */
  --fw-ui:   600;      /* menu, buton, etiket, tablo, strong */
  --fw-disp: 800;      /* tum basliklar, eyebrow, rozet, sayi */

  /* Hareket */
  --ease: cubic-bezier(.22,.61,.36,1);
  --t: 220ms var(--ease);

  --header-h: 76px;
}

/* ---------- 2) RESET ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 20px); }
body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--fs-base);
  line-height: 1.65;
  color: var(--slate);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: var(--red); text-decoration: none; transition: color var(--t); }
a:hover { color: var(--red-700); }
button { font: inherit; cursor: pointer; }
ul, ol { margin: 0; padding: 0; }
figure { margin: 0; }
hr { border: 0; border-top: 1px solid var(--line); margin: 40px 0; }

:focus-visible { outline: 3px solid rgba(227,0,12,.5); outline-offset: 3px; border-radius: 4px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ---------- 3) TIPOGRAFI ---------- */
h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  color: var(--ink);
  margin: 0 0 .5em;
  line-height: 1.18;
  letter-spacing: -.02em;
  font-weight: var(--fw-disp);
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-md); font-weight: var(--fw-disp); }
p  { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }
strong { color: var(--ink-800); font-weight: var(--fw-disp); }

.lead { font-size: var(--fs-lead); color: var(--slate); line-height: 1.72; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: var(--fs-2xs); font-weight: var(--fw-disp); letter-spacing: .13em; text-transform: uppercase;
  color: var(--red); margin: 0 0 14px;
}
.eyebrow::before { content: ""; width: 22px; height: 2px; background: var(--red); border-radius: 2px; }
.text-center { text-align: center; }
.text-center .eyebrow { justify-content: center; }
/* Notr tonlu, ortali eyebrow — bolum ustu kucuk etiketler icin */
.eyebrow-muted { color: var(--muted); justify-content: center; width: 100%; }
.eyebrow-muted::before { display: none; }
/* Ikincil not (son guncelleme, kucuk aciklama) */
.meta-note { font-size: var(--fs-sm); color: var(--muted); }
.mb-0 { margin-bottom: 0; }

.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 999;
  background: var(--red); color: #fff; padding: 10px 18px; border-radius: 0 0 var(--r-sm) var(--r-sm);
  font-weight: var(--fw-disp); transition: top var(--t);
}
.skip-link:focus { top: 0; color: #fff; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- 4) YERLESIM ---------- */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gut); }
.wrap-narrow { max-width: var(--wrap-narrow); }
.section { padding: clamp(56px, 4vw + 34px, 96px) 0; }
.section-tight { padding: clamp(40px, 2.6vw + 26px, 64px) 0; }
.section-soft { background: var(--bg-soft); }
.section-deep { background: var(--bg-deep); color: rgba(255,255,255,.76); }
.section-deep h2, .section-deep h3, .section-deep h4 { color: #fff; }
.section-deep .lead { color: rgba(255,255,255,.74); }

.section-head { max-width: 760px; margin-bottom: clamp(32px, 3vw, 52px); }
.section-head.text-center { margin-inline: auto; }

.grid { display: grid; gap: 24px; }
.g-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.g-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.g-4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 4vw, 64px); align-items: center; }
.split-wide { grid-template-columns: 1.15fr .85fr; align-items: start; }

/* ---------- 5) BILESENLER ---------- */
/* Butonlar */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 13px 26px; border-radius: var(--r-pill); border: 1.5px solid transparent;
  font-family: var(--font-display); font-weight: var(--fw-disp); font-size: var(--fs-sm); line-height: 1.2;
  cursor: pointer; text-align: center; white-space: nowrap;
  transition: transform var(--t), box-shadow var(--t), background var(--t), color var(--t), border-color var(--t);
}
.btn svg { width: 17px; height: 17px; flex: none; }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn-primary { background: var(--red); color: #fff; box-shadow: var(--sh-red); }
.btn-primary:hover { background: var(--red-600); color: #fff; box-shadow: 0 14px 32px rgba(227,0,12,.34); }

.btn-ghost { background: #fff; color: var(--ink); border-color: var(--line); box-shadow: var(--sh-1); }
.btn-ghost:hover { color: var(--red); border-color: var(--red); box-shadow: var(--sh-2); }

.btn-outline-light { background: transparent; color: #fff; border-color: rgba(255,255,255,.34); }
.btn-outline-light:hover { color: var(--ink); background: #fff; border-color: #fff; }

.btn-lg { padding: 16px 34px; font-size: var(--fs-md); }
.btn-sm { padding: 10px 20px; font-size: var(--fs-xs); }

.btn-row { display: flex; flex-wrap: wrap; gap: 14px; }
.text-center .btn-row { justify-content: center; }

/* Metin baglantisi (ok'lu link) */
.link-arrow {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-display); font-weight: var(--fw-disp); font-size: var(--fs-sm); color: var(--red);
}
.link-arrow svg { width: 15px; height: 15px; transition: transform var(--t); }
.link-arrow:hover svg { transform: translateX(4px); }

/* Rozet */
.badge {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 14px; border-radius: var(--r-pill);
  background: var(--red-050); color: var(--red-700);
  font-size: var(--fs-2xs); font-weight: var(--fw-disp); letter-spacing: .04em; text-transform: uppercase;
  border: 1px solid var(--red-100);
}
.badge-light { background: rgba(255,255,255,.1); color: #fff; border-color: rgba(255,255,255,.22); }
.badge-dot::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }

/* Kart */
.card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r);
  padding: 28px; position: relative;
  transition: transform var(--t), box-shadow var(--t), border-color var(--t);
}
.card-link { display: flex; flex-direction: column; height: 100%; color: inherit; }
.card-link:hover { transform: translateY(-4px); box-shadow: var(--sh-3); border-color: transparent; color: inherit; }
.card-link:hover h3 { color: var(--red); }
.card h3 { transition: color var(--t); margin-bottom: .45em; }
.card p { color: var(--slate); font-size: var(--fs-sm); }
.card .link-arrow { margin-top: auto; padding-top: 18px; }

.card-icon {
  width: 52px; height: 52px; border-radius: var(--r-sm);
  display: grid; place-items: center; margin-bottom: 18px;
  background: linear-gradient(135deg, var(--red) 0%, var(--red-700) 100%);
  color: #fff; box-shadow: 0 6px 16px rgba(227,0,12,.24);
}
.card-icon svg { width: 25px; height: 25px; }

.card-top-rule::before {
  content: ""; position: absolute; inset: -1px -1px auto -1px; height: 3px;
  background: linear-gradient(90deg, var(--red), var(--red-700));
  border-radius: var(--r) var(--r) 0 0; opacity: 0; transition: opacity var(--t);
}
.card-top-rule:hover::before { opacity: 1; }

/* Ozellik listesi */
.check-list { list-style: none; display: grid; gap: 13px; }
.check-list li { position: relative; padding-left: 32px; color: var(--slate); }
.check-list li::before {
  content: ""; position: absolute; left: 0; top: .32em;
  width: 19px; height: 19px; border-radius: 50%;
  background: var(--red-050) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E3000C' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 11px no-repeat;
}
/* Koyu zemin kuralları en aşağıdaki "KOYU ZEMİN" bölümünde toplanmıştır. */

/* Istatistik */
.stat { text-align: center; padding: 8px; }
.stat-num {
  font-family: var(--font-display); font-weight: var(--fw-disp);
  font-size: var(--fs-stat); line-height: 1;
  color: var(--red); letter-spacing: -.03em;
}
.stat-label { margin-top: 10px; font-size: var(--fs-sm); color: var(--muted); }

/* Akordeon (SSS) */
.accordion { border-top: 1px solid var(--line); }
.acc-item { border-bottom: 1px solid var(--line); }
.acc-btn {
  width: 100%; display: flex; align-items: flex-start; justify-content: space-between; gap: 20px;
  background: none; border: 0; padding: 22px 0; text-align: left;
  font-family: var(--font-display); font-weight: var(--fw-disp); font-size: var(--fs-md); color: var(--ink);
  transition: color var(--t);
}
.acc-btn:hover { color: var(--red); }
.acc-icon {
  flex: none; width: 26px; height: 26px; border-radius: 50%;
  border: 1.5px solid var(--line); position: relative; margin-top: 2px;
  transition: background var(--t), border-color var(--t);
}
.acc-icon::before, .acc-icon::after {
  content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
  background: var(--ink); border-radius: 2px; transition: background var(--t), opacity var(--t);
}
.acc-icon::before { width: 11px; height: 2px; }
.acc-icon::after  { width: 2px; height: 11px; }
.acc-btn[aria-expanded="true"] .acc-icon { background: var(--red); border-color: var(--red); }
.acc-btn[aria-expanded="true"] .acc-icon::before { background: #fff; }
.acc-btn[aria-expanded="true"] .acc-icon::after { opacity: 0; }
.acc-panel { display: none; padding: 0 46px 24px 0; color: var(--slate); }
.acc-btn[aria-expanded="true"] + .acc-panel { display: block; }
.no-js .acc-panel { display: block; }

/* İki sütunlu özellik bloğu — tek sütunlu dar kalıptan ayrışsın diye.
   Başlık solda kalır, madde listesi sağda akar. */
.feature-split {
  display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: clamp(32px, 4vw, 68px); align-items: start;
}
.feature-split-head { position: sticky; top: calc(var(--header-h) + 28px); }
.feature-split-head h2 { margin-bottom: .45em; }
.check-list-lg { gap: 16px; }
.check-list-lg li { font-size: var(--fs-md); line-height: 1.6; padding-left: 36px; }
.check-list-lg li::before { width: 22px; height: 22px; background-size: 13px; top: .28em; }

/* Ürün kutusunda sıra numarası — kutuların birbirinin aynısı görünmesini kırar.
   Köşede soluk bir filigran olarak denendi ancak beyaz üzerinde 1.23 kontrastla
   okunmuyordu; rozetin yanına, marka kırmızısıyla okunur biçimde alındı. */
.product-box { position: relative; }
.product-head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.product-head .badge { margin-bottom: 0; }
.product-no {
  font-family: var(--font-display); font-weight: var(--fw-disp);
  font-size: var(--fs-md); line-height: 1; letter-spacing: -.02em;
  color: var(--red); flex: none;
}
.product-no::after {
  content: ""; display: inline-block; width: 14px; height: 2px;
  background: var(--red-100); border-radius: 2px; margin-left: 12px; vertical-align: middle;
}

/* Surec adimlari */
.steps { list-style: none; display: grid; gap: 16px; counter-reset: step; }
.step {
  position: relative; padding: 22px 24px 22px 76px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r);
  transition: box-shadow var(--t), border-color var(--t), transform var(--t);
}
.step:hover { box-shadow: var(--sh-2); border-color: var(--red-100); transform: translateX(3px); }
.step::before {
  counter-increment: step; content: counter(step, decimal-leading-zero);
  position: absolute; left: 24px; top: 21px;
  font-family: var(--font-display); font-weight: var(--fw-disp); font-size: var(--fs-lg);
  color: var(--red); letter-spacing: -.02em;
}
.step h4 { margin: 0 0 4px; color: var(--ink); }
.step p { font-size: var(--fs-sm); margin: 0; }

/* Etiket filtresi */
.filter-bar { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 34px; }
.filter-btn {
  padding: 9px 20px; border-radius: var(--r-pill);
  border: 1.5px solid var(--line); background: #fff;
  font-family: var(--font-display); font-weight: var(--fw-ui); font-size: var(--fs-xs); color: var(--slate);
  transition: background var(--t), border-color var(--t), color var(--t), box-shadow var(--t);
}
.filter-btn:hover { border-color: var(--red); color: var(--red); }
.filter-btn[aria-pressed="true"] { background: var(--red); border-color: var(--red); color: #fff; box-shadow: var(--sh-red); }
.is-hidden { display: none !important; }

/* Iletisim kutusu */
.contact-card {
  display: flex; gap: 18px; align-items: flex-start;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 26px;
  transition: box-shadow var(--t), border-color var(--t), transform var(--t);
  color: inherit; height: 100%;
}
a.contact-card:hover { transform: translateY(-3px); box-shadow: var(--sh-3); border-color: transparent; color: inherit; }
.contact-card .card-icon { margin-bottom: 0; width: 46px; height: 46px; flex: none; }
.contact-card h3 { font-size: var(--fs-md); margin-bottom: 6px; }
.contact-card p { margin: 0; font-size: var(--fs-sm); }
.contact-card .val { display: block; color: var(--ink); font-weight: var(--fw-disp); font-family: var(--font-display); font-size: var(--fs-base); }
a.contact-card:hover .val { color: var(--red); }

/* Ortak logolari */
.logo-strip { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: clamp(28px, 5vw, 68px); }
.logo-strip img {
  height: 40px; width: auto; object-fit: contain;
  filter: grayscale(1); opacity: .58; transition: filter var(--t), opacity var(--t);
}
.logo-strip img:hover { filter: none; opacity: 1; }

/* Breadcrumb */
.breadcrumb { padding: 16px 0; font-size: var(--fs-xs); color: var(--muted); }
.breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.breadcrumb a { color: var(--muted); }
.breadcrumb a:hover { color: var(--red); }
.breadcrumb li + li::before { content: "\203A"; margin-right: 8px; color: var(--line); }
.breadcrumb [aria-current] { color: var(--ink-800); font-weight: var(--fw-ui); }

/* Alinti */
.quote {
  border-left: 3px solid var(--red); padding: 6px 0 6px 26px;
  font-family: var(--font-display); font-size: var(--fs-h3);
  font-weight: var(--fw-ui); color: var(--ink-800); line-height: 1.5;
}

/* ---------- 6) HEADER ---------- */
.topbar { background: var(--ink); color: rgba(255,255,255,.68); font-size: var(--fs-2xs); }
.topbar .wrap { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 42px; }
.topbar-contact { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.topbar a { color: rgba(255,255,255,.75); display: inline-flex; align-items: center; gap: 7px; }
.topbar a:hover { color: #fff; }
.topbar svg { width: 14px; height: 14px; opacity: .7; }
.topbar-social { display: flex; align-items: center; gap: 6px; }
.topbar-social a {
  width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(255,255,255,.07); transition: background var(--t), color var(--t);
}
.topbar-social a:hover { background: var(--red); color: #fff; }
.topbar-social svg { width: 14px; height: 14px; opacity: 1; }

.site-header {
  position: sticky; top: 0; z-index: 90;
  background: rgba(255,255,255,.94); -webkit-backdrop-filter: saturate(180%) blur(14px);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--line-soft);
  transition: box-shadow var(--t);
}
.site-header.is-stuck { box-shadow: var(--sh-2); }
.nav-bar { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: var(--header-h); }

.brand { display: flex; align-items: center; gap: 12px; flex: none; }
/* Yeni logo 3 satirli bir kilit (ADG + TEKNOLOJI COZUMLERI + etiket);
   eski tek satirli logoya gore daha fazla yukseklik istiyor. */
.brand img { height: 48px; width: auto; }

.nav { display: flex; align-items: center; gap: 2px; }
/* Liste kabı yalnızca semantik içindir; öğeler .nav'ın doğrudan çocuğu gibi dizilir. */
.nav-list { display: contents; list-style: none; }
.nav-item { position: relative; }
/* Sürgü başlığı, kapatma düğmesi ve alt CTA yalnızca mobilde görünür */
.nav-head, .nav-foot, .nav-backdrop { display: none; }
.nav-link {
  display: inline-flex; align-items: center; gap: 6px; position: relative;
  padding: 10px 15px; border-radius: var(--r-sm); background: none; border: 0;
  font-family: var(--font-display); font-weight: var(--fw-ui); font-size: var(--fs-sm); color: var(--ink-800);
  transition: color var(--t), background var(--t);
}
.nav-link:hover, .nav-item:hover > .nav-link, .nav-link[aria-expanded="true"] { color: var(--red); background: var(--red-050); }
.nav-link.is-active { color: var(--red); }
.nav-link.is-active::after {
  content: ""; position: absolute; left: 15px; right: 15px; bottom: 2px; height: 2px;
  background: var(--red); border-radius: 2px;
}
.nav-caret { width: 13px; height: 13px; transition: transform var(--t); }
.nav-item:hover .nav-caret, .nav-link[aria-expanded="true"] .nav-caret { transform: rotate(180deg); }

.dropdown {
  position: absolute; top: calc(100% + 10px); left: 0; z-index: 95;
  /* İkon eklenince metne kalan alan daraldı; 250px'te uzun başlıklar
     ("İnternet Sitesi Tasarımı") ikinci satıra taşıyordu. */
  min-width: 290px; padding: 10px; list-style: none;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--sh-3);
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity var(--t), transform var(--t), visibility var(--t);
}
/* Bağlantı ile açılır menü arasındaki boşlukta imlecin menüyü kapatmaması için köprü */
.dropdown::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }
.nav-item:hover > .dropdown, .dropdown:focus-within, .nav-item.is-open > .dropdown {
  opacity: 1; visibility: visible; transform: translateY(0);
}
/* :not(.btn) şart — aksi hâlde bu kural (0,2,0) .btn-primary'yi (0,1,0) ezip
   mega menüdeki butona display:block ve koyu metin rengi dayatıyor. */
/* Tüm alt menü bağlantıları ikon + metin: ikon solda, dikeyde ortalı. */
.dropdown a:not(.btn) {
  display: flex; align-items: center; gap: 11px;
  padding: 10px 14px; border-radius: var(--r-sm);
  font-size: var(--fs-sm); font-weight: var(--fw-ui); color: var(--ink-800);
  transition: background var(--t), color var(--t);
}
.dropdown a:not(.btn) > svg { width: 17px; height: 17px; color: var(--red); flex: none; }
.dropdown a:not(.btn):hover { background: var(--red-050); color: var(--red); }

/* Mega menu */
.dropdown-mega {
  /* 920px / 250px promo iken sütunlar 282px kalıyor ve uzun çözüm adları
     ("Kurumsal Kaynak Planlama (ERP)") ikinci satıra taşıp satır yüksekliklerini
     düzensizleştiriyordu. Sütunlara nefes aldırmak için genişletildi. */
  left: 50%; width: min(1000px, calc(100vw - 48px));
  transform: translate(-50%, -8px);
  padding: 26px; display: grid; grid-template-columns: 1fr 1fr 230px; gap: 6px 22px;
}
.nav-item:hover > .dropdown-mega, .nav-item.is-open > .dropdown-mega, .dropdown-mega:focus-within {
  transform: translate(-50%, 0);
}
.mega-col { list-style: none; display: grid; gap: 2px; align-content: start; }
/* .dropdown prefiksi sart: .dropdown a:not(.btn) kurali (0,2,1) ozgullukte
   olduğu için prefikssiz .mega-col a (0,1,1) eziliyor ve display:flex
   uygulanmıyordu (ikon metnin üstüne düşüyordu). */
.dropdown .mega-col a { display: flex; align-items: center; gap: 11px; padding: 9px 12px; border-radius: var(--r-sm); font-size: var(--fs-sm); font-weight: var(--fw-ui); color: var(--ink-800); }
.dropdown .mega-col a:hover { background: var(--red-050); color: var(--red); }
.mega-col svg { width: 17px; height: 17px; color: var(--red); flex: none; }
.mega-promo { background: var(--ink); color: rgba(255,255,255,.72); border-radius: var(--r); padding: 24px; display: flex; flex-direction: column; }
.mega-promo h4 { color: #fff; margin-bottom: 8px; }
.mega-promo p { font-size: var(--fs-xs); margin-bottom: 18px; }
.mega-promo .btn { margin-top: auto; }

.nav-cta { display: flex; align-items: center; gap: 12px; flex: none; }

/* Başlıktaki birincil eylem — sayfadaki en önemli düğme olduğu için
   diğer menü öğelerinden belirgin biçimde ayrışması isteniyor:
   daha dolgun bir gövde, telefon ikonu, güçlü gölge ve hafif bir vurgu halkası. */
.btn-cta {
  padding: 12px 24px;
  font-size: var(--fs-sm);
  letter-spacing: .01em;
  box-shadow: 0 8px 20px rgba(227,0,12,.34), 0 0 0 0 rgba(227,0,12,.45);
  transition: transform var(--t), box-shadow var(--t), background var(--t);
}
.btn-cta:hover {
  box-shadow: 0 12px 28px rgba(227,0,12,.42), 0 0 0 5px rgba(227,0,12,.14);
}
.btn-cta-icon {
  display: grid; place-items: center;
  width: 24px; height: 24px; border-radius: 50%;
  background: rgba(255,255,255,.2); flex: none;
}
.btn-cta-icon svg { width: 13px; height: 13px; }

/* Sayfa yüklendiğinde bir kez dikkat çeken nabız. Sonsuz döngü değil —
   sürekli yanıp sönen bir düğme rahatsız edici olur. */
@keyframes cta-nabiz {
  0%   { box-shadow: 0 8px 20px rgba(227,0,12,.34), 0 0 0 0 rgba(227,0,12,.5); }
  70%  { box-shadow: 0 8px 20px rgba(227,0,12,.34), 0 0 0 12px rgba(227,0,12,0); }
  100% { box-shadow: 0 8px 20px rgba(227,0,12,.34), 0 0 0 0 rgba(227,0,12,0); }
}
.btn-cta { animation: cta-nabiz 2.2s var(--ease) .8s 2; }
@media (prefers-reduced-motion: reduce) { .btn-cta { animation: none; } }

/* Hamburger */
.nav-toggle { display: none; width: 44px; height: 44px; border: 1px solid var(--line); background: #fff; border-radius: var(--r-sm); padding: 0; place-items: center; }
.nav-toggle i, .nav-toggle i::before, .nav-toggle i::after {
  display: block; width: 19px; height: 2px; background: var(--ink); border-radius: 2px;
  transition: transform var(--t), opacity var(--t), background var(--t);
}
.nav-toggle i { position: relative; }
.nav-toggle i::before, .nav-toggle i::after { content: ""; position: absolute; left: 0; }
.nav-toggle i::before { top: -6px; }
.nav-toggle i::after  { top: 6px; }
.nav-toggle[aria-expanded="true"] i { background: transparent; }
.nav-toggle[aria-expanded="true"] i::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] i::after  { transform: translateY(-6px) rotate(-45deg); }

/* ---------- 7) SAYFA BLOKLARI ---------- */
/* Ana sayfa hero */
.hero {
  position: relative; overflow: hidden;
  background: linear-gradient(160deg, #0B1220 0%, #141F33 55%, #1D1116 100%);
  color: rgba(255,255,255,.78);
  padding: clamp(64px, 6vw + 30px, 118px) 0 clamp(72px, 6vw + 34px, 124px);
}
.hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(58% 62% at 88% 8%, rgba(227,0,12,.30) 0%, transparent 62%),
    radial-gradient(46% 52% at 4% 92%, rgba(227,0,12,.14) 0%, transparent 60%);
}
.hero::after {
  content: ""; position: absolute; inset: 0; opacity: .5; pointer-events: none;
  background-image: linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(70% 70% at 50% 40%, #000 30%, transparent 100%);
  mask-image: radial-gradient(70% 70% at 50% 40%, #000 30%, transparent 100%);
}
.hero .wrap { position: relative; z-index: 1; }
.hero-grid { display: grid; grid-template-columns: 1.08fr .92fr; gap: clamp(36px,4vw,64px); align-items: center; }
.hero h1 { color: #fff; margin-bottom: 20px; }
.hero h1 em { font-style: normal; color: var(--red); }
.hero .lead { color: rgba(255,255,255,.76); margin-bottom: 30px; max-width: 56ch; }
.hero .badge { margin-bottom: 20px; }
.hero-meta { display: flex; flex-wrap: wrap; gap: 10px 26px; margin-top: 34px; padding-top: 26px; border-top: 1px solid rgba(255,255,255,.12); }
.hero-meta span { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-xs); color: rgba(255,255,255,.62); }
.hero-meta svg { width: 16px; height: 16px; color: var(--red); flex: none; }

.hero-panel {
  background: rgba(255,255,255,.055); border: 1px solid rgba(255,255,255,.13);
  border-radius: var(--r-lg); padding: 30px; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.hero-panel h2 { font-size: var(--fs-lg); color: #fff; margin-bottom: 20px; }
.hero-panel-list { list-style: none; display: grid; gap: 2px; }
.hero-panel-list a {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 12px 15px; border-radius: var(--r-sm);
  color: rgba(255,255,255,.84); font-size: var(--fs-sm); font-weight: var(--fw-ui);
  transition: background var(--t), color var(--t), padding var(--t);
}
.hero-panel-list a:hover { background: rgba(255,255,255,.1); color: #fff; padding-left: 20px; }
.hero-panel-list svg { width: 15px; height: 15px; color: var(--red); flex: none; }

/* Ic sayfa hero */
.page-hero {
  position: relative; overflow: hidden;
  background: linear-gradient(150deg, #0B1220 0%, #16233A 100%);
  color: rgba(255,255,255,.76);
  padding: clamp(30px, 2vw + 20px, 44px) 0 clamp(52px, 3.6vw + 32px, 82px);
}
.page-hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(52% 78% at 92% 0%, rgba(227,0,12,.26) 0%, transparent 60%);
}
.page-hero .wrap { position: relative; z-index: 1; }
.page-hero h1 { color: #fff; margin-bottom: 16px; }
.page-hero .lead { color: rgba(255,255,255,.74); max-width: 68ch; }
.page-hero .badge { margin-bottom: 18px; }
.page-hero .breadcrumb { color: rgba(255,255,255,.5); padding: 0 0 22px; }
.page-hero .breadcrumb a { color: rgba(255,255,255,.62); }
.page-hero .breadcrumb a:hover { color: #fff; }
.page-hero .breadcrumb [aria-current] { color: rgba(255,255,255,.9); }
.page-hero .breadcrumb li + li::before { color: rgba(255,255,255,.3); }
.page-hero .btn-row { margin-top: 30px; }

/* Zengin metin */
.prose h2 { margin-top: 1.7em; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { margin-top: 1.6em; }
.prose ul, .prose ol { margin: 0 0 1.2em; padding-left: 1.3em; display: grid; gap: 9px; }
.prose li { padding-left: 4px; }

/* Urun kutusu */
.product-box {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r);
  padding: 30px; height: 100%;
  transition: box-shadow var(--t), border-color var(--t), transform var(--t);
}
.product-box:hover { box-shadow: var(--sh-3); border-color: transparent; transform: translateY(-4px); }
.product-box .badge { margin-bottom: 16px; }
.product-box h3 { margin-bottom: 12px; }
.product-box p { font-size: var(--fs-sm); }
.product-box .check-list { margin-top: 16px; }
.product-box .check-list li { font-size: var(--fs-sm); }

/* Yan panel (sticky) */
.side-card {
  background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--r);
  padding: 26px; position: sticky; top: calc(var(--header-h) + 24px);
}
.side-card h3 { font-size: var(--fs-lg); margin-bottom: 14px; }
.side-nav { list-style: none; display: grid; gap: 2px; margin-bottom: 22px; }
.side-nav a {
  display: block; padding: 9px 12px; border-radius: var(--r-sm);
  font-size: var(--fs-sm); font-weight: var(--fw-ui); color: var(--ink-800);
  transition: background var(--t), color var(--t);
}
.side-nav a:hover { background: #fff; color: var(--red); }
.side-nav a.is-active { background: var(--red); color: #fff; font-weight: var(--fw-disp); }

/* CTA seridi */
.cta-band {
  position: relative; overflow: hidden;
  background: linear-gradient(120deg, var(--red-700) 0%, var(--red) 60%, #FF3B2E 100%);
  color: rgba(255,255,255,.9);
  border-radius: var(--r-lg);
  padding: clamp(36px, 3.4vw + 20px, 62px);
}
.cta-band::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background: radial-gradient(46% 100% at 100% 0%, rgba(255,255,255,.22) 0%, transparent 62%);
}
.cta-band > * { position: relative; z-index: 1; }
.cta-band h2 { color: #fff; }
.cta-band p { color: rgba(255,255,255,.9); max-width: 62ch; }
.cta-band .btn-ghost { background: #fff; color: var(--red-700); border-color: #fff; }
.cta-band .btn-ghost:hover { color: var(--ink); }
.cta-inner { display: grid; grid-template-columns: 1fr auto; gap: 30px; align-items: center; }

/* ---------- Form ---------- */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 18px; }
.field { margin: 0; display: flex; flex-direction: column; gap: 7px; }
.field-full { grid-column: 1 / -1; }
.field label, .field-check label {
  font-family: var(--font-display); font-weight: var(--fw-ui); font-size: var(--fs-sm); color: var(--ink-800);
}
.field label span { color: var(--red); }
.field input, .field select, .field textarea {
  width: 100%; padding: 12px 14px;
  font-family: var(--font); font-size: var(--fs-sm); color: var(--ink);
  background: #fff; border: 1.5px solid var(--line); border-radius: var(--r-sm);
  transition: border-color var(--t), box-shadow var(--t);
}
.field textarea { resize: vertical; min-height: 120px; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: #C8D2DF; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--red); box-shadow: 0 0 0 3px rgba(227,0,12,.14);
}
.field input::placeholder, .field textarea::placeholder { color: #93A0B1; }
.field select {
  appearance: none; -webkit-appearance: none; cursor: pointer; padding-right: 42px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235C6A7D' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; background-size: 16px;
}

/* Hata durumu */
.field.is-invalid input, .field.is-invalid select, .field.is-invalid textarea { border-color: var(--red); }
.field-err { display: none; font-size: var(--fs-xs); font-weight: var(--fw-ui); color: var(--red-700); }
.field.is-invalid .field-err, .field-err.is-shown { display: block; }

/* Onay kutusu */
.field-check { display: flex; align-items: flex-start; gap: 11px; margin: 0 0 6px; }
.field-check input { width: 19px; height: 19px; flex: none; margin-top: 3px; accent-color: var(--red); cursor: pointer; }
.field-check label { font-weight: var(--fw-ui); font-size: var(--fs-xs); color: var(--slate); line-height: 1.6; cursor: pointer; }
.field-check.is-invalid input { outline: 2px solid var(--red); outline-offset: 2px; }

/* WhatsApp gönderim düğmesi — WhatsApp yeşili zemin üzerine beyaz metin
   yalnızca 2.0 kontrast verdiği için dış hatlı (outline) kurgu seçildi:
   koyu metin + yeşil kenarlık, ikon marka yeşilinde. */
.btn-wa {
  background: #fff; color: var(--ink);
  border-color: #25D366; box-shadow: var(--sh-1);
}
.btn-wa:hover { background: #F2FBF5; color: var(--ink); border-color: #14A94A; box-shadow: var(--sh-2); }
.btn-wa-icon { display: grid; place-items: center; width: 22px; height: 22px; flex: none; color: #14A94A; }
.btn-wa-icon svg { width: 20px; height: 20px; }

.form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 22px; }
.form-note { font-size: var(--fs-xs); color: var(--muted); }

.form-status {
  margin-top: 18px; padding: 14px 18px; border-radius: var(--r-sm);
  font-size: var(--fs-sm); font-weight: var(--fw-ui); border: 1px solid transparent;
}
.form-status.is-ok { background: #EAF7EF; color: #1B6B3A; border-color: #BFE5CD; }
.form-status.is-error { background: var(--red-050); color: var(--red-700); border-color: var(--red-100); }
.form.is-sending { opacity: .6; pointer-events: none; }

/* Bot tuzağı — ekran okuyucudan ve gözden gizli, ama display:none değil */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

/* ---------- İletişim sayfası düzeni ---------- */
/* Form ana eylem olduğu için geniş sütunda; ofis bilgisi yanında dar sütunda.
   Telefon/WhatsApp/e-posta yukarıdaki hızlı erişim kartlarında geçtiği için
   burada tekrarlanmaz. */
.contact-layout {
  display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: clamp(32px, 4vw, 56px); align-items: start;
}
.office-card {
  background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--r);
  padding: 28px; position: sticky; top: calc(var(--header-h) + 24px);
}
.office-card h3 { font-size: var(--fs-lg); margin-bottom: 20px; }
.office-list { list-style: none; display: grid; gap: 18px; margin-bottom: 22px; }
.office-list li { display: flex; gap: 13px; align-items: flex-start; font-size: var(--fs-sm); line-height: 1.6; }
.office-list svg { width: 18px; height: 18px; color: var(--red); flex: none; margin-top: 3px; }
.office-list strong { color: var(--ink); font-family: var(--font-display); }
.office-cta { width: 100%; }
.office-note {
  margin: 18px 0 0; padding-top: 18px; border-top: 1px solid var(--line);
  font-size: var(--fs-xs); color: var(--muted); line-height: 1.6;
}

/* ---------- Video oynatıcı ---------- */
/* preload="none": video yalnızca ziyaretçi oynat'a bastığında indirilir, böylece
   ana sayfanın açılış ağırlığı etkilenmez. Yerleşik `controls` niteliği markup'ta
   duruyor; JavaScript kapalıysa tarayıcının kendi denetimleri devreye girer.
   Denetimler videonun üzerine bindirilir: dikeyde yer kazandırır ve oynatıcı
   bütünlüklü görünür. */
.video-player { margin: 0; }
.video-shell {
  position: relative; aspect-ratio: 16 / 9; overflow: hidden;
  border-radius: var(--r-lg); background: #000;
  box-shadow: var(--sh-3);
}
.video-shell video {
  width: 100%; height: 100%; display: block;
  /* contain: videonun en/boy oranı 16:9 değilse içerik kırpılmasın */
  object-fit: contain; background: #000;
}
.js .video-shell video::-webkit-media-controls { display: none !important; }
.video-fallback { padding: 24px; color: rgba(255,255,255,.8); }
.js .video-shell { cursor: pointer; }

/* Yükleniyor göstergesi — 400 MB'lık dosyada oynat'a basınca ekranda bir şey
   olmazsa oynatıcı bozuk sanılır; bu yüzden durum açıkça gösteriliyor. */
.video-spinner {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 16px;
  background: rgba(11,18,32,.55); color: #fff; pointer-events: none; z-index: 2;
}
.video-spinner[hidden] { display: none; }
.video-spinner-ring {
  width: 52px; height: 52px; border-radius: 50%;
  border: 3px solid rgba(255,255,255,.22); border-top-color: var(--red);
  animation: video-spin .9s linear infinite;
}
@keyframes video-spin { to { transform: rotate(360deg); } }
.video-spinner-text {
  font-family: var(--font-display); font-weight: var(--fw-ui); font-size: var(--fs-sm);
  color: rgba(255,255,255,.88); font-variant-numeric: tabular-nums;
}
@media (prefers-reduced-motion: reduce) {
  .video-spinner-ring { animation-duration: 2.4s; }
}

.video-error {
  position: absolute; inset: auto 16px 16px; z-index: 3; margin: 0;
  padding: 14px 18px; border-radius: var(--r-sm);
  background: rgba(165,0,8,.94); color: #fff; font-size: var(--fs-sm);
}
.video-error[hidden] { display: none; }
.video-error a { color: #fff; text-decoration: underline; }

/* Poster üzerindeki büyük başlat düğmesi */
.video-start {
  position: absolute; inset: 0; width: 100%; border: 0; padding: 0; z-index: 4;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px;
  background: rgba(11,18,32,.3); color: #fff;
  transition: background var(--t);
}
.video-start:hover { background: rgba(11,18,32,.45); }
.video-start[hidden] { display: none; }
.video-start-icon {
  width: 86px; height: 86px; border-radius: 50%; display: grid; place-items: center;
  background: var(--red); box-shadow: var(--sh-red);
  transition: transform var(--t), background var(--t);
}
.video-start-icon svg { width: 34px; height: 34px; margin-left: 5px; }
.video-start:hover .video-start-icon { transform: scale(1.07); background: var(--red-600); }
.video-start-text {
  font-family: var(--font-display); font-weight: var(--fw-disp); font-size: var(--fs-md);
  text-shadow: 0 2px 12px rgba(11,18,32,.6);
}

/* Denetim katmanı */
.video-controls {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 3;
  padding: 44px 16px 14px;
  background: linear-gradient(to top, rgba(11,18,32,.92) 0%, rgba(11,18,32,.65) 45%, transparent 100%);
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity var(--t), visibility var(--t), transform var(--t);
}
.video-controls[hidden] { display: none; }
/* Duraklatılmışken, imleç üzerindeyken veya klavye odağı içerideyken görünür */
.video-shell:hover .video-controls,
.video-shell.is-active .video-controls,
.video-shell.is-paused .video-controls,
.video-controls:focus-within {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.video-shell.is-idle { cursor: none; }

/* İlerleme çubuğu: tampon (indirilen) + oynatılan + tutamak */
.video-track { position: relative; height: 18px; display: flex; align-items: center; margin-bottom: 4px; }
.video-track::before {
  content: ""; position: absolute; left: 0; right: 0; height: 5px;
  background: rgba(255,255,255,.22); border-radius: 3px;
}
.video-buffer {
  position: absolute; left: 0; height: 5px; width: 0;
  background: rgba(255,255,255,.4); border-radius: 3px; pointer-events: none;
}
.video-seek {
  position: relative; width: 100%; height: 18px; margin: 0;
  -webkit-appearance: none; appearance: none; background: transparent; cursor: pointer;
}
.video-seek::-webkit-slider-runnable-track {
  height: 5px; border-radius: 3px;
  background: linear-gradient(to right, var(--red) var(--ilerleme, 0%), transparent var(--ilerleme, 0%));
}
.video-seek::-moz-range-track { height: 5px; border-radius: 3px; background: transparent; }
.video-seek::-moz-range-progress { height: 5px; border-radius: 3px; background: var(--red); }
.video-seek::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; margin-top: -4px;
  width: 13px; height: 13px; border-radius: 50%; background: #fff;
  border: 3px solid var(--red); cursor: pointer;
  transition: transform var(--t);
}
.video-seek::-moz-range-thumb {
  width: 13px; height: 13px; border: 3px solid var(--red); border-radius: 50%;
  background: #fff; cursor: pointer;
}
.video-seek:hover::-webkit-slider-thumb { transform: scale(1.2); }

/* Düğme satırı */
.video-row { display: flex; align-items: center; gap: 8px; }
.video-spacer { flex: 1 1 auto; }
.video-btn {
  width: 38px; height: 38px; flex: none; padding: 0; border: 0; border-radius: 50%;
  display: grid; place-items: center;
  background: transparent; color: #fff;
  transition: background var(--t), color var(--t);
}
.video-btn:hover { background: rgba(255,255,255,.16); }
.video-btn[hidden] { display: none; }
.video-btn svg { width: 19px; height: 19px; }
.video-time {
  font-family: var(--font-display); font-weight: var(--fw-ui); font-size: var(--fs-xs);
  color: rgba(255,255,255,.88); flex: none; font-variant-numeric: tabular-nums;
  padding-left: 4px;
}

/* Ses: kaydırıcı normalde gizli, düğmeye yaklaşınca açılır */
.video-sound { display: flex; align-items: center; }
.video-vol {
  -webkit-appearance: none; appearance: none; height: 5px; border-radius: 3px; margin: 0 0 0 4px;
  background: rgba(255,255,255,.26); cursor: pointer;
  width: 0; opacity: 0;
  transition: width var(--t), opacity var(--t), margin var(--t);
}
.video-sound:hover .video-vol, .video-vol:focus-visible {
  width: 76px; opacity: 1; margin-left: 8px;
}
.video-vol::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 12px; height: 12px; border-radius: 50%; background: #fff;
  border: 2px solid var(--red); cursor: pointer;
}
.video-vol::-moz-range-thumb {
  width: 12px; height: 12px; border: 2px solid var(--red); border-radius: 50%;
  background: #fff; cursor: pointer;
}

/* Harita */
.map-embed { border-radius: var(--r); overflow: hidden; border: 1px solid var(--line); box-shadow: var(--sh-2); line-height: 0; background: var(--bg-soft); }
.map-embed iframe { width: 100%; height: 420px; border: 0; display: block; }
/* Tam genişlik harita: yarım sütunda 548px'e sıkışıp okunmaz hâle geliyordu */
.map-wide iframe { height: clamp(340px, 34vw, 460px); }

/* Bilgi tablosu */
.info-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.info-table th, .info-table td { padding: 15px 0; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
.info-table th { color: var(--muted); font-weight: var(--fw-ui); width: 190px; }
.info-table td { color: var(--ink-800); font-weight: var(--fw-ui); font-family: var(--font-display); }
/* Kurumsal/banka bilgisi ikincil içerik — daha düşük görsel ağırlık */
.info-table-sm { font-size: var(--fs-sm); }
.info-table-sm th, .info-table-sm td { padding: 11px 0; }
.info-table-sm th { width: 130px; font-weight: var(--fw-ui); }
.info-table-sm .iban { font-variant-numeric: tabular-nums; letter-spacing: .01em; }
.h-sm { font-size: var(--fs-md); margin-bottom: 6px; }

/* Yuzen dugmeler */
.wa-float {
  position: fixed; right: 20px; bottom: 20px; z-index: 80;
  width: 56px; height: 56px; border-radius: 50%;
  background: #25D366; color: #fff; display: grid; place-items: center;
  box-shadow: 0 10px 28px rgba(37,211,102,.42);
  transition: transform var(--t), box-shadow var(--t);
}
.wa-float:hover { transform: scale(1.07); color: #fff; box-shadow: 0 14px 34px rgba(37,211,102,.5); }
.wa-float svg { width: 29px; height: 29px; }

.to-top {
  position: fixed; right: 20px; bottom: 88px; z-index: 80;
  width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line);
  background: #fff; color: var(--ink); display: grid; place-items: center;
  box-shadow: var(--sh-2); opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: opacity var(--t), visibility var(--t), transform var(--t), color var(--t);
}
.to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.to-top:hover { color: var(--red); }
.to-top svg { width: 19px; height: 19px; }

/* Reveal */
/* Belirme animasyonu — GUVENLI VARSAYILAN: icerik gorunur baslar.
   Gizleme yalnizca `html.anim` varken uygulanir; bu sinifi sayfa basindaki
   satir ici betik ekler ve site.js 2 saniye icinde sahiplenmezse geri alir.
   Boylece site.js yuklenmezse icerik gorunmez kalmaz. */
.reveal { transition: opacity .6s var(--ease), transform .6s var(--ease); }
.anim .reveal { opacity: 0; transform: translateY(20px); }
.anim .reveal.is-in { opacity: 1; transform: none; }

/* 404 */
.err-code {
  font-family: var(--font-display); font-weight: var(--fw-disp); letter-spacing: -.04em;
  font-size: clamp(5rem, 3rem + 12vw, 11rem); line-height: .9; color: var(--red);
  margin-bottom: 10px;
}

/* ---------- 8) FOOTER ---------- */
.site-footer { background: var(--ink); color: rgba(255,255,255,.6); font-size: var(--fs-sm); }
.footer-main { padding: clamp(48px,4vw,72px) 0 44px; }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: 40px; }
/* Beyaz kutu kaldırıldı: logonun koyu zemin varyantı (alt yazısı beyaz,
   zemini şeffaf) kullanıldığı için artık taşıyıcı bir kutuya gerek yok.
   Altbilgide ortaklık satırını da içeren tam kilit kullanılır. */
.footer-brand img { height: 60px; width: auto; }
.footer-brand p { margin: 18px 0 20px; max-width: 40ch; line-height: 1.7; }
.site-footer h4 { color: #fff; font-size: var(--fs-2xs); letter-spacing: .12em; text-transform: uppercase; margin-bottom: 18px; font-weight: var(--fw-disp); }
.footer-links { list-style: none; display: grid; gap: 11px; }
.footer-links a { color: rgba(255,255,255,.6); }
.footer-links a:hover { color: #fff; }
.footer-contact { list-style: none; display: grid; gap: 15px; }
.footer-contact li { display: flex; gap: 12px; align-items: flex-start; line-height: 1.55; }
.footer-contact svg { width: 17px; height: 17px; color: var(--red); flex: none; margin-top: 3px; }
.footer-contact a { color: rgba(255,255,255,.6); }
.footer-contact a:hover { color: #fff; }
.footer-social { display: flex; gap: 9px; }
.footer-social a {
  width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(255,255,255,.07); color: rgba(255,255,255,.72);
  transition: background var(--t), color var(--t), transform var(--t);
}
.footer-social a:hover { background: var(--red); color: #fff; transform: translateY(-2px); }
.footer-social svg { width: 16px; height: 16px; }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.09); padding: 22px 0;
  display: flex; flex-wrap: wrap; gap: 14px 26px; align-items: center; justify-content: space-between;
  font-size: var(--fs-xs); color: rgba(255,255,255,.45);
}
.footer-bottom nav { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.footer-bottom a { color: rgba(255,255,255,.5); }
.footer-bottom a:hover { color: #fff; }
.footer-credit a {
  color: rgba(255,255,255,.72); font-weight: var(--fw-ui);
  border-bottom: 1px solid rgba(255,255,255,.22); padding-bottom: 1px;
  transition: color var(--t), border-color var(--t);
}
.footer-credit a:hover { color: #fff; border-color: #fff; }

/* ==========================================================================
   KOYU ZEMİN — okunabilirlik güvencesi
   Bileşenlerin çoğu açık zemin için koyu metin rengi sabitler (--slate,
   --ink gibi). Bu bileşenler koyu bir kabın içine girdiğinde lacivert
   üzerine gri gibi okunaksız birleşimler oluşuyordu. Aşağıdaki blok, koyu
   kapların tamamı için metin renklerini tek yerden güvenceye alır.
   Yeni bir koyu bölüm eklerken sınıfını buradaki listeye de ekleyin.
   ========================================================================== */
.hero, .page-hero, .section-deep, .hero-panel, .mega-promo, .cta-band, .site-footer { --on-dark: 1; }

/* Başlıklar */
.hero h1, .hero h2, .hero h3, .hero h4,
.page-hero h1, .page-hero h2, .page-hero h3, .page-hero h4,
.section-deep h1, .section-deep h2, .section-deep h3, .section-deep h4,
.hero-panel h1, .hero-panel h2, .hero-panel h3, .hero-panel h4,
.mega-promo h3, .mega-promo h4,
.cta-band h1, .cta-band h2, .cta-band h3, .cta-band h4 { color: #fff; }

/* Gövde metni ve giriş paragrafı */
.hero p, .page-hero p, .section-deep p, .hero-panel p, .mega-promo p { color: rgba(255,255,255,.76); }
.hero .lead, .page-hero .lead, .section-deep .lead, .hero-panel .lead { color: rgba(255,255,255,.76); }
.cta-band p, .cta-band .lead { color: rgba(255,255,255,.92); }

/* İşaretli liste — asıl okunaksız olan bileşendi (gri metin / lacivert zemin) */
.hero .check-list li,
.page-hero .check-list li,
.section-deep .check-list li,
.hero-panel .check-list li,
.cta-band .check-list li,
.site-footer .check-list li { color: rgba(255,255,255,.84); }

.hero .check-list li::before,
.page-hero .check-list li::before,
.section-deep .check-list li::before,
.hero-panel .check-list li::before,
.site-footer .check-list li::before { background-color: rgba(255,255,255,.16); }

.cta-band .check-list li::before { background-color: rgba(255,255,255,.24); }

/* Üst başlık etiketi — marka kırmızısı koyu lacivert üzerinde yeterli
   kontrast vermiyor (≈3.1), açık tona çekiyoruz. */
.hero .eyebrow, .page-hero .eyebrow, .section-deep .eyebrow, .hero-panel .eyebrow { color: #FF7B6E; }
.hero .eyebrow::before, .page-hero .eyebrow::before,
.section-deep .eyebrow::before, .hero-panel .eyebrow::before { background: #FF7B6E; }
.cta-band .eyebrow { color: rgba(255,255,255,.9); }
.cta-band .eyebrow::before { background: rgba(255,255,255,.9); }

/* İstatistik */
.section-deep .stat-num, .hero .stat-num, .page-hero .stat-num { color: #fff; }
.section-deep .stat-label, .hero .stat-label, .page-hero .stat-label { color: rgba(255,255,255,.68); }

/* Alıntı */
.hero .quote, .page-hero .quote, .section-deep .quote { color: #fff; border-color: #FF7B6E; }

/* Akordeon koyu zeminde (çözüm ve hizmet sayfalarındaki SSS bölümü) */
.section-deep .accordion { border-top-color: rgba(255,255,255,.15); }
.section-deep .acc-item { border-bottom-color: rgba(255,255,255,.15); }
.section-deep .acc-btn { color: #fff; }
.section-deep .acc-btn:hover { color: #FF7B6E; }
.section-deep .acc-icon { border-color: rgba(255,255,255,.3); }
.section-deep .acc-icon::before, .section-deep .acc-icon::after { background: #fff; }
.section-deep .acc-btn[aria-expanded="true"] .acc-icon { background: var(--red); border-color: var(--red); }
.section-deep .acc-panel { color: rgba(255,255,255,.78); }

/* Koyu zemindeki küçük ikonlar da aynı açık kırmızıya çekilir */
.hero-meta svg, .hero-panel-list svg, .footer-contact svg { color: #FF7B6E; }

/* Koyu zeminde kalın vurgular */
.hero strong, .page-hero strong, .section-deep strong, .hero-panel strong { color: #fff; }

/* Açık zemine oturan bileşenler koyu kabın içinde de kendi renklerini korur */
.hero .btn-ghost, .page-hero .btn-ghost, .section-deep .btn-ghost { color: var(--ink); }
.hero .btn-ghost:hover, .page-hero .btn-ghost:hover, .section-deep .btn-ghost:hover { color: var(--red); }

/* Sayfa yolu ayıracı çok açıktı; okunur bir gri tona alındı */
.breadcrumb li + li::before { color: var(--muted); }

/* ---------- 9) RESPONSIVE ---------- */
@media (max-width: 1080px) {
  .dropdown-mega { grid-template-columns: 1fr 1fr; width: min(680px, calc(100vw - 48px)); }
  .mega-promo { grid-column: 1 / -1; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 36px; }
  .footer-brand { grid-column: 1 / -1; }
  .split-wide, .feature-split { grid-template-columns: 1fr; }
  .side-card, .office-card, .feature-split-head { position: static; }
  .contact-layout { grid-template-columns: 1fr; }
  /* Tek sütuna düşünce ofis kartı formdan önce gelsin: adres ve saat bilgisi
     uzun formu kaydırmadan görünür kalır. */
  .contact-layout aside { order: -1; }
}

@media (max-width: 960px) {
  :root { --header-h: 68px; }
  .nav-toggle { display: grid; }
  .nav-cta .btn { display: none; }

  /* backdrop-filter, sabit konumlu alt öğeler için kapsayıcı blok oluşturur ve
     sürgüyü ekrana değil başlık kutusuna göre konumlandırırdı; bu yüzden kapatıyoruz. */
  .site-header { background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; }

  /* Sürgü ve perde tam ekran yükseklikte. Başlık yüksekliğine bağlı DEĞİL:
     sayfa en üstteyken üst bar da yer kapladığı için `top: var(--header-h)`
     sürgüyü başlığın üzerine bindiriyordu. Her ikisi de .site-header'ın
     yığın bağlamı içinde olduğundan perde sürgünün altında kalır. */
  .nav {
    position: fixed; inset: 0 0 0 auto; z-index: 2;
    width: min(400px, 100%); background: #fff;
    flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 0;
    padding: 0 0 32px; overflow-y: auto; overscroll-behavior: contain;
    transform: translateX(100%); visibility: hidden;
    transition: transform 300ms var(--ease), visibility 300ms var(--ease);
    box-shadow: var(--sh-3);
  }
  .nav.is-open { transform: translateX(0); visibility: visible; }

  /* Sürgü başlığı — logo + kapatma düğmesi */
  .nav-head {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    padding: 14px var(--gut); border-bottom: 1px solid var(--line);
    position: sticky; top: 0; background: #fff; z-index: 1;
  }
  .nav-head img { height: 40px; width: auto; }
  .nav-close {
    width: 42px; height: 42px; flex: none; display: grid; place-items: center;
    border: 1px solid var(--line); border-radius: var(--r-sm);
    background: #fff; color: var(--ink); padding: 0;
    transition: color var(--t), border-color var(--t);
  }
  .nav-close:hover { color: var(--red); border-color: var(--red); }
  .nav-close svg { width: 20px; height: 20px; }

  .nav-link {
    width: 100%; padding: 15px var(--gut); font-size: var(--fs-md);
    justify-content: space-between; border-radius: 0;
    border-bottom: 1px solid var(--line-soft);
  }
  .nav-link:hover, .nav-link[aria-expanded="true"] { background: none; color: var(--red); }
  .nav-link.is-active { background: var(--red-050); }
  .nav-link.is-active::after { display: none; }

  .dropdown, .dropdown-mega {
    position: static; opacity: 1; visibility: visible; transform: none; margin-left: 0;
    width: auto; min-width: 0; box-shadow: none; border: 0; border-radius: 0;
    padding: 6px 0 10px; display: none; grid-template-columns: 1fr;
    /* Masaüstündeki 8px/26px boşluk tek sütuna düşünce iki grubun arasında
       gereksiz bir kopukluk bırakıyordu; liste kesintisiz aksın. */
    gap: 0;
    background: var(--bg-soft); border-bottom: 1px solid var(--line-soft);
  }
  .nav-item.is-open > .dropdown, .nav-item.is-open > .dropdown-mega { display: grid; }
  /* Masaüstündeki açık-durum kuralı (.nav-item.is-open > .dropdown-mega, özgüllük
     0,3,0) mega menüyü translate(-50%) ile sola kaydırıyor ve yukarıdaki
     transform:none (0,1,0) kuralını eziyordu: mobilde Çözümlerimiz listesinin
     sol yarısı sürgünün dışında kalıyordu. Aynı özgüllükle, sonra gelerek sıfırla.
     :hover da dahil — dokunmatikte dokunduktan sonra hover durumu takılı kalabiliyor. */
  .nav-item:hover > .dropdown-mega,
  .nav-item.is-open > .dropdown-mega,
  .dropdown-mega:focus-within { transform: none; }
  /* Masaüstündeki görünmez hover köprüsü mobilde bir önceki menü öğesinin
     alt 12px'ini kaplayıp dokunuşları yutabiliyordu. */
  .dropdown::before { display: none; }
  .dropdown a:not(.btn), .dropdown .mega-col a { padding: 11px var(--gut) 11px calc(var(--gut) + 12px); font-size: var(--fs-sm); }
  .mega-promo { display: none; }

  /* Sürgü alt bölümü — birincil eylem ve doğrudan iletişim */
  .nav-foot {
    display: grid; gap: 10px; margin-top: 24px; padding: 0 var(--gut);
  }
  .nav-foot .btn { width: 100%; }
  .nav-foot-link {
    display: flex; align-items: center; gap: 11px;
    padding: 12px 16px; border-radius: var(--r-sm);
    background: var(--bg-soft); color: var(--ink-800);
    font-family: var(--font-display); font-weight: var(--fw-ui); font-size: var(--fs-sm);
  }
  .nav-foot-link:hover { color: var(--red); }
  .nav-foot-link svg { width: 18px; height: 18px; color: var(--red); flex: none; }

  .nav-backdrop {
    display: block;
    position: fixed; inset: 0; z-index: 1;
    background: rgba(11,18,32,.5);
    opacity: 0; visibility: hidden; transition: opacity var(--t), visibility var(--t);
  }
  body.nav-open .nav-backdrop { opacity: 1; visibility: visible; }
  /* Kaydırma kilidi JS'te body'ye position:fixed vererek kurulur (iOS'ta
     overflow:hidden güvenilir değil); .is-locked yalnızca yardımcı sınıftır. */
  body.is-locked { position: fixed; width: 100%; overflow: hidden; }

  .hero-grid, .split { grid-template-columns: 1fr; }
  .hero-panel { order: -1; }
  .g-4 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .cta-inner { grid-template-columns: 1fr; }
  .hide-sm { display: none; }
}

@media (max-width: 720px) {
  :root { --gut: 18px; }
  .g-2, .g-3, .g-4 { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .form-actions .btn { width: 100%; }
  /* Dokunmatikte hover yok; denetimler sürekli görünür ve ses kaydırıcısı gizli */
  .video-vol { display: none; }
  .video-controls { opacity: 1; visibility: visible; transform: none; padding: 36px 12px 12px; }
  .video-row { gap: 4px; }
  .video-btn { width: 36px; height: 36px; }
  .video-start-icon { width: 66px; height: 66px; }
  .video-start-icon svg { width: 26px; height: 26px; }
  .video-start-text { font-size: var(--fs-sm); }
  .video-spinner-ring { width: 42px; height: 42px; }
  .topbar .wrap { justify-content: center; }
  .topbar-social { display: none; }
  .logo-strip img { height: 32px; }
  .map-embed iframe { height: 320px; }
  .info-table th { width: 128px; }
  .acc-panel { padding-right: 0; }
  .step { padding: 20px 20px 20px 66px; }
  .step::before { left: 20px; }
  .check-list-lg li { font-size: var(--fs-base); }
}

@media (max-width: 460px) {
  .topbar { font-size: var(--fs-2xs); }
  .topbar-contact { gap: 14px; }
  .brand img { height: 38px; }
  .btn { padding: 12px 22px; font-size: var(--fs-sm); }
  .btn-lg { padding: 14px 26px; font-size: var(--fs-sm); }
  .btn-row { flex-direction: column; align-items: stretch; }
  .btn-row .btn { width: 100%; }
  .contact-card { flex-direction: column; gap: 14px; }
}

@media print {
  .topbar, .site-header, .site-footer, .wa-float, .to-top, .cta-band { display: none !important; }
  body { color: #000; }
  a { color: #000; text-decoration: underline; }
}