/* ==========================================================================
   CloudPDKS — site.css
   Tasarım sistemi: docs/05-tasarim-sistemi.md
   Bağımlılık yok. Mobile-first değil, desktop referansından aşağı kırılımlı.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Yazı tipi — kurum içinden sunulur (KVKK: harici font CDN'i yok)
   woff2 dosyaları assets/fonts/ altına konur; yoksa sistem yığını devreye girer.
   -------------------------------------------------------------------------- */
/* Türkçe ğ ş İ latin-ext altkümesinde, ı ve Ç Ö Ü latin altkümesinde.
   Tarayıcı yalnız gereken dosyayı indirir (unicode-range). Toplam 10 dosya, 80 KB. */
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('../fonts/poppins-400-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('../fonts/poppins-400-lat.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('../fonts/poppins-500-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('../fonts/poppins-500-lat.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('../fonts/poppins-600-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('../fonts/poppins-600-lat.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('../fonts/poppins-700-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('../fonts/poppins-700-lat.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 800; font-display: swap;
  src: url('../fonts/poppins-800-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 800; font-display: swap;
  src: url('../fonts/poppins-800-lat.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* --------------------------------------------------------------------------
   2. Token'lar
   -------------------------------------------------------------------------- */
:root {
  /* Marka renkleri */
  --brand-green-900: #0a4228;
  --brand-green-800: #0d4d2f;
  --brand-green-700: #0f5132;
  --brand-green-600: #1a6b45;
  --brand-green-300: #8cc4a6;
  --brand-green-100: #e6f2eb;
  --brand-green-50: #f1f8f4;

  --accent-orange-600: #e06a10;
  --accent-orange-500: #f47b20;
  --accent-orange-300: #f9b57c;
  --accent-orange-100: #fdeee2;

  /* Metin ve yüzeyler */
  --ink-900: #14201a;
  --ink-700: #2f3a34;
  --ink-500: #6b7770;
  --ink-400: #93a09a;
  --ink-300: #d6ded9;
  --ink-200: #e8eeea;

  --surface-0: #ffffff;
  --surface-50: #f6f7f7;

  --on-dark: #ffffff;
  --on-dark-muted: #cadbd1;

  /* Tipografi */
  --font-sans: 'Poppins', 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;

  --fs-h1: clamp(2.0081rem, 1.3834rem + 1.9635vw, 2.6775rem);
  --fs-h2: clamp(1.5619rem, 1.1156rem + 1.428vw, 2.2313rem);
  --fs-h3: 1.004rem;
  --fs-lead: clamp(0.8925rem, 0.8479rem + 0.2231vw, 0.9483rem);
  --fs-body: 0.8367rem;
  --fs-small: 0.7251rem;
  --fs-eyebrow: 0.6694rem;

  /* Ölçü */
  --container: 1320px;
  --gutter: 2rem;
  --section-y: 2.75rem;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  --shadow-sm: 0 2px 8px rgba(20, 32, 26, 0.06);
  --shadow-md: 0 8px 24px rgba(20, 32, 26, 0.09);
  --shadow-lg: 0 16px 40px rgba(20, 32, 26, 0.14);

  --header-h: 66px;
  --ring: 0 0 0 3px rgba(244, 123, 32, 0.35);
}

/* --------------------------------------------------------------------------
   3. Temel
   -------------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

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

body {
  margin: 0;
  background: var(--surface-0);
  color: var(--ink-700);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  margin: 0;
  color: var(--ink-900);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.015em;
}

h1 { font-size: var(--fs-h1); font-weight: 800; line-height: 1.16; }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); font-weight: 600; letter-spacing: -0.005em; }

p { margin: 0 0 1rem; }
p:last-child { margin-bottom: 0; }

a { color: var(--brand-green-700); text-decoration: none; }
a:hover { text-decoration: underline; }

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

ul, ol { margin: 0; padding: 0; list-style: none; }

button { font: inherit; color: inherit; }

:where(a, button, input, select, textarea, summary):focus-visible {
  outline: 2px solid var(--accent-orange-500);
  outline-offset: 2px;
  border-radius: 4px;
}

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: 1rem;
  top: -4rem;
  z-index: 200;
  padding: 0.75rem 1.25rem;
  background: var(--brand-green-700);
  color: #fff;
  border-radius: var(--radius-sm);
  transition: top 0.15s ease;
}
.skip-link:focus { top: 1rem; text-decoration: none; }

/* --------------------------------------------------------------------------
   4. Düzen
   -------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--section-y); }
.section--tight { padding-block: 1.25rem; }
.section--alt { background: var(--surface-50); }
.section--dark,
.final-cta {
  background: var(--brand-green-900);
  color: var(--on-dark-muted);
}
.section--dark h2,
.section--dark h3,
.final-cta h2,
.final-cta h3 { color: var(--on-dark); }
.final-cta > .container > div > p { color: var(--on-dark-muted); }

.section-head { max-width: 46rem; }

/* Referanstaki turuncu dikey aksanlı not satırı */
.note-accent {
  position: relative;
  padding-left: 0.9rem;
  color: var(--ink-500);
}
.note-accent::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.35em;
  bottom: 0.35em;
  width: 3px;
  border-radius: 2px;
  background: var(--accent-orange-500);
}
.section-head p { color: var(--ink-500); font-size: var(--fs-lead); }
.section--dark .section-head p { color: var(--on-dark-muted); }

.eyebrow {
  display: block;
  margin-bottom: 0.875rem;
  color: var(--brand-green-600);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.section--dark .eyebrow { color: var(--brand-green-300); }

.grid { display: grid; gap: 1.5rem; }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--6 { grid-template-columns: repeat(6, 1fr); }

/* --------------------------------------------------------------------------
   5. Butonlar
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  padding: 0.75rem 1.375rem;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font-size: var(--fs-body);
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn .btn__arrow { transition: transform 0.15s ease; }
.btn:hover .btn__arrow { transform: translateX(3px); }

.btn--primary {
  background: var(--accent-orange-500);
  color: #fff;
}
.btn--primary:hover { background: var(--accent-orange-600); }

.btn--outline {
  background: var(--surface-0);
  border-color: var(--ink-300);
  color: var(--ink-900);
}
.btn--outline:hover { border-color: var(--ink-500); }

.btn--green {
  background: var(--brand-green-700);
  color: #fff;
}
.btn--green:hover { background: var(--brand-green-800); }

.btn--on-dark {
  background: var(--surface-0);
  color: var(--ink-900);
}
.btn--on-dark:hover { background: var(--surface-50); }

.btn--ghost {
  background: transparent;
  color: var(--ink-900);
  padding-inline: 0.75rem;
}
.btn--ghost:hover { color: var(--brand-green-700); }

.btn--block { width: 100%; justify-content: center; }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 600;
  color: var(--brand-green-700);
}
.link-arrow svg { color: var(--accent-orange-500); }
.section--dark .link-arrow { color: var(--on-dark); }

/* --------------------------------------------------------------------------
   6. Header
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--surface-0);
  border-bottom: 1px solid var(--ink-200);
}

.site-header__inner {
  display: flex;
  align-items: center;
  gap: 2rem;
  min-height: var(--header-h);
}

.brand {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}
.brand:hover { text-decoration: none; }
.brand__logo {
  height: 38px;
  width: auto;
  flex-shrink: 0;
}
.site-footer .brand__logo { height: 42px; }

.primary-nav { margin-inline-end: auto; }
.primary-nav__list { display: flex; align-items: center; gap: 0.25rem; }

.primary-nav__link {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.5rem 0.55rem;
  border-radius: var(--radius-sm);
  color: var(--ink-700);
  font-size: var(--fs-body);
  font-weight: 500;
}
.primary-nav__link:hover { background: var(--surface-50); color: var(--ink-900); text-decoration: none; }
.primary-nav__link[aria-current='page'] { color: var(--brand-green-700); font-weight: 600; }
.primary-nav__caret { color: var(--ink-400); }

.has-dropdown { position: relative; }
.dropdown {
  position: absolute;
  top: calc(100% + 0.5rem);
  left: 0;
  min-width: 15rem;
  padding: 0.5rem;
  background: var(--surface-0);
  border: 1px solid var(--ink-200);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
}
.has-dropdown:hover .dropdown,
.has-dropdown:focus-within .dropdown,
.dropdown[data-open='true'] {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.dropdown a {
  display: block;
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius-sm);
  color: var(--ink-700);
  font-size: var(--fs-body);
}
.dropdown a:hover { background: var(--brand-green-50); color: var(--brand-green-700); text-decoration: none; }

/* Başlık bağlantı, yanındaki ok düğme: ikisi bir arada tek bir menü başlığı gibi görünür. */
.primary-nav__list > li { display: flex; align-items: center; }
.primary-nav__list > li.has-dropdown > .primary-nav__link { padding-inline-end: 0.15rem; }
.primary-nav__toggle {
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 32px;
  padding: 0;
  background: none;
  border: 0;
  border-radius: var(--radius-sm);
  color: var(--ink-400);
  cursor: pointer;
}
.primary-nav__toggle:hover { color: var(--ink-900); }
.primary-nav__caret { transition: transform 0.15s ease; }

/* Sütunlu (mega) panel: başlığın değil, üst barın genişliğine yayılır.
   Zemin beyazdan çok açık yeşile inen bir geçiş; solda koyu yeşil vitrin kartı (başlığın tanıtımı,
   sayfasına düğme ve telefon), sağda simgeli sütunlar, altta bağlantı bandı. */
.site-header__inner { position: relative; }
.has-mega { position: static; }
.dropdown.mega {
  left: 0;
  right: 0;
  top: calc(100% - 1px);
  padding: 0;
  overflow: hidden;
  background:
    radial-gradient(60rem 18rem at 100% 0%, rgb(244 123 32 / 0.06), transparent 60%),
    linear-gradient(180deg, #fff 0%, var(--brand-green-50) 100%);
  border: 1px solid var(--ink-200);
  border-top: 3px solid var(--brand-green-600);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  box-shadow: var(--shadow-lg);
}
.mega__body { display: block; }
.mega__body--feature { display: grid; grid-template-columns: minmax(15rem, 17.5rem) 1fr; }

.mega__feature {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin: 1rem 0 1rem 1rem;
  padding: 1.5rem 1.35rem;
  overflow: hidden;
  color: #fff;
  background:
    radial-gradient(14rem 10rem at 110% 110%, rgb(244 123 32 / 0.45), transparent 70%),
    radial-gradient(12rem 8rem at -10% -10%, rgb(140 196 166 / 0.35), transparent 70%),
    linear-gradient(150deg, var(--brand-green-600) 0%, var(--brand-green-900) 100%);
  border-radius: var(--radius-md);
}
.mega__feature::after {
  content: "";
  position: absolute;
  inset: auto -2.5rem -2.5rem auto;
  width: 8rem;
  height: 8rem;
  border: 1px solid rgb(255 255 255 / 0.14);
  border-radius: 50%;
  box-shadow: 0 0 0 1.25rem rgb(255 255 255 / 0.05);
  pointer-events: none;
}
.mega__feature-title { margin: 0; font-size: 1.125rem; font-weight: 700; line-height: 1.3; }
.mega__feature-text { margin: 0; font-size: var(--fs-small); line-height: 1.55; color: rgb(255 255 255 / 0.82); }
.dropdown .mega__feature-cta {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.25rem;
  padding: 0.55rem 1rem;
  background: var(--accent-orange-500);
  border-radius: 999px;
  color: #fff;
  font-size: var(--fs-small);
  font-weight: 700;
}
.dropdown .mega__feature-cta:hover { background: var(--accent-orange-600); color: #fff; }
.dropdown .mega__feature-call {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: auto;
  padding: 0.85rem 0 0;
  border-top: 1px solid rgb(255 255 255 / 0.16);
  border-radius: 0;
  color: #fff;
  font-weight: 700;
  font-size: var(--fs-small);
}
.dropdown .mega__feature-call:hover { background: none; color: var(--accent-orange-300); }
.mega__feature-call small { display: block; font-weight: 500; font-size: 0.72rem; color: rgb(255 255 255 / 0.7); }

.mega__cols {
  display: grid;
  grid-template-columns: repeat(var(--mega-cols, 3), minmax(0, 1fr));
  gap: 0.75rem 1.25rem;
  padding: 1.5rem 1.5rem 1.25rem;
}
.mega__heading {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  margin: 0 0 0.6rem;
  padding: 0 0.5rem 0.6rem;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--ink-200);
  color: var(--ink-900);
  font: inherit;
  font-size: var(--fs-small);
  font-weight: 700;
  text-align: left;
  pointer-events: none;
}
.mega__heading .primary-nav__caret { display: none; margin-left: auto; }
.mega__icon {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 32px;
  height: 32px;
  color: var(--brand-green-700);
  background: linear-gradient(135deg, var(--brand-green-100), #fff);
  border: 1px solid var(--brand-green-100);
  border-radius: 9px;
}
.mega__icon--sm { width: 28px; height: 28px; border-radius: 8px; }
/* Tek sütunlu panel (Sektörler): bağlantılar simgeli kutucuklar olarak üç sütuna dizilir. */
.mega__cols--single .mega__links { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; }
.mega__cols--single .mega__links a { padding: 0.65rem 1.5rem 0.65rem 0.65rem; background: rgb(255 255 255 / 0.75); border: 1px solid var(--ink-200); border-radius: var(--radius-md); font-weight: 600; color: var(--ink-900); }
.mega__links a {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.42rem 1.5rem 0.42rem 0.5rem;
  color: var(--ink-700);
  font-size: var(--fs-small);
  transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.mega__links a::after {
  content: "→";
  position: absolute;
  right: 0.5rem;
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity 0.15s ease, transform 0.15s ease;
  color: var(--accent-orange-500);
}
.mega__links a:hover {
  background: #fff;
  color: var(--brand-green-700);
  box-shadow: 0 2px 10px rgb(20 32 26 / 0.07);
}
.mega__links a:hover::after { opacity: 1; transform: none; }
.mega__band {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  background: rgb(255 255 255 / 0.7);
  border-top: 1px solid var(--ink-200);
}
.dropdown .mega__band a {
  padding: 0.35rem 0.85rem;
  background: #fff;
  border: 1px solid var(--brand-green-100);
  border-radius: 999px;
  color: var(--brand-green-700);
  font-size: var(--fs-small);
  font-weight: 600;
}
.dropdown .mega__band a:hover { background: var(--brand-green-600); border-color: var(--brand-green-600); color: #fff; }
@media (prefers-reduced-motion: reduce) {
  .mega__links a, .mega__links a::after { transition: none; }
}

.primary-nav__actions { display: none; }

/* Telefon: başlığın birincil eylemi. Numara açık yazılı; dar ekranda yalnız simge kalır (767 px). */
.header-call {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 44px;
  padding: 0.35rem 1rem 0.35rem 0.8rem;
  background: var(--brand-green-600);
  border-radius: 999px;
  color: #fff;
  text-decoration: none;
  white-space: nowrap;
}
.header-call:hover,
.header-call:focus-visible { background: var(--brand-green-700); color: #fff; text-decoration: none; }
.header-call svg { flex: none; }
.header-call__text { display: grid; line-height: 1.15; }
.header-call__text small { font-size: 0.7rem; font-weight: 500; opacity: 0.9; }
.header-call__text strong { font-size: var(--fs-small); font-weight: 700; }

/* Mobil alt çubuk: yalnız 767 px altında görünür. */
.mobile-cta { display: none; }

.header-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-shrink: 0;
}

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  color: var(--ink-700);
  cursor: pointer;
}
.icon-btn:hover { background: var(--surface-50); color: var(--ink-900); }

.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.45rem 0.6rem;
  background: transparent;
  border: 1px solid var(--ink-200);
  border-radius: var(--radius-sm);
  color: var(--ink-700);
  font-size: var(--fs-small);
  font-weight: 600;
  cursor: pointer;
}

.nav-toggle { display: none; }

/* Arama paneli */
.search-panel {
  display: none;
  padding-block: 1rem 1.25rem;
  border-top: 1px solid var(--ink-200);
}
.search-panel[data-open='true'] { display: block; }
.search-form { display: flex; gap: 0.75rem; }
.search-form input {
  flex: 1;
  min-height: 46px;
  padding: 0.6rem 0.9rem;
  border: 1px solid var(--ink-300);
  border-radius: var(--radius-sm);
  font: inherit;
  color: var(--ink-900);
}

/* --------------------------------------------------------------------------
   7. Hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  overflow: hidden;
  /* Fotoğraf arkada; soldaki metin alanı beyazla örtülerek kontrast korunuyor. */
  background-color: var(--brand-green-50);
  background-image:
    linear-gradient(95deg,
      rgba(255, 255, 255, 0.92) 0%,
      rgba(255, 255, 255, 0.86) 32%,
      rgba(255, 255, 255, 0.5) 52%,
      rgba(255, 255, 255, 0.14) 100%),
    url('../img/hero-bg.jpg');
  background-size: cover;
  background-position: center 38%;
}
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(55% 50% at 80% 35%, rgba(26, 107, 69, 0.1), transparent 72%);
  pointer-events: none;
}
.hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 0.94fr) minmax(0, 1.06fr);
  gap: 2rem;
  align-items: center;
  /* docs/07 §6 madde 4: hero referanstan ~50 px uzundu. 32/36 px'ten 20/24 px'e
     indi (−24 px); kalanı .hero__stand yüksekliğinden geldi. */
  padding-block: 1.25rem 1.5rem;
}
.hero__title { margin-bottom: 1.25rem; max-width: 21ch; }
.hero__title em { font-style: normal; color: var(--accent-orange-500); }
.hero__lead {
  max-width: 34rem;
  margin-bottom: 2rem;
  color: var(--ink-700);
  font-size: var(--fs-lead);
  line-height: 1.65;
}
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.875rem;
  margin-bottom: 1.5rem;
}

.check-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem 1.75rem;
}
.check-row li,
.check-list li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--fs-body);
  font-weight: 500;
  color: var(--ink-700);
}
.check-row svg,
.check-list svg { flex-shrink: 0; color: var(--brand-green-600); }
.check-list { display: grid; gap: 0.875rem; }
.check-list--orange svg { color: var(--accent-orange-500); }
.section--dark .check-list li { color: var(--on-dark); }

/* Hero görsel kompozisyonu */
.hero__visual { position: relative; }
.hero__screen {
  /* Rozet buna göre konumlanır; relative olmadan .hero__visual'a kayıyordu. */
  position: relative;
  border-radius: 6px;
  overflow: hidden;
  background: var(--surface-0);
}
.hero__badge {
  position: absolute;
  left: 0.75rem;
  bottom: 0.75rem;
  padding: 0.25rem 0.6rem;
  background: rgba(255, 255, 255, 0.92);
  color: var(--ink-700);
  border-radius: var(--radius-pill);
  font-size: 0.6136rem;
  font-weight: 600;
  letter-spacing: 0.04em;
}
/* Referansta görsel sağ kenara taşıyor, pano bir monitör çerçevesinin içinde
   duruyor ve önünde bir telefon var. */
.hero__visual { margin-right: -11rem; }

/* Monitör: koyu çerçeve + alt çene + ayak */
.hero__device {
  position: relative;
  margin-right: 8rem;
  padding: 8px 8px 0;
  background: linear-gradient(160deg, #26332c, #16211b);
  border-radius: 14px 14px 4px 4px;
  box-shadow: 0 26px 60px rgba(11, 26, 19, 0.35), 0 2px 0 rgba(255, 255, 255, 0.12) inset;
}
.hero__device::after {
  content: '';
  display: block;
  height: 16px;
  margin: 8px -10px 0;
  background: linear-gradient(180deg, #1d2922, #131c17);
  border-radius: 0 0 6px 6px;
}
/* Ayak: boyun + taban */
.hero__stand {
  position: absolute;
  left: 50%;
  /* docs/07 §6 madde 4'ün kalan payı: ayak 34 px'ten 22 px'e indi (−12 px),
     monitörün alt çenesiyle birlikte hero'nun toplam kısalması ~50 px oluyor. */
  bottom: -22px;
  width: 76px;
  height: 22px;
  transform: translateX(-50%);
  pointer-events: none;
}
.hero__stand::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 0;
  width: 54px;
  height: 22px;
  transform: translateX(-50%);
  background: linear-gradient(180deg, #202c25, #18221c);
  clip-path: polygon(16% 0, 84% 0, 100% 100%, 0 100%);
}
.hero__stand::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 150px;
  height: 12px;
  transform: translateX(-50%);
  background: linear-gradient(180deg, #232f28, #151e19);
  border-radius: 6px;
  box-shadow: 0 10px 22px rgba(11, 26, 19, 0.3);
}

/* Telefon: monitörün önünde, solda */
.hero__phone {
  position: absolute;
  left: -2.5rem;
  bottom: -2rem;
  width: 10.5rem;
  z-index: 2;
}
.hero__float {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 15.5rem;
  padding: 1rem;
  background: var(--surface-0);
  border: 1px solid var(--ink-200);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}
.feature-row {
  display: flex;
  gap: 0.75rem;
  padding-block: 0.6rem;
}
.feature-row + .feature-row { border-top: 1px solid var(--ink-200); }
.feature-row__title {
  margin: 0 0 0.1rem;
  font-size: 0.781rem;
  font-weight: 600;
  color: var(--ink-900);
}
.feature-row p { font-size: var(--fs-small); color: var(--ink-500); line-height: 1.45; }

/* --------------------------------------------------------------------------
   8. İkon çipi
   -------------------------------------------------------------------------- */
.icon-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  border-radius: 11px;
  background: var(--brand-green-100);
  color: var(--brand-green-700);
}
.icon-chip--orange { background: var(--accent-orange-100); color: var(--accent-orange-600); }
.icon-chip--sm { width: 34px; height: 34px; border-radius: 9px; }

/* --------------------------------------------------------------------------
   9. Uyumluluk şeridi
   -------------------------------------------------------------------------- */
/* Referanstaki güven şeridi: beyaz zemin, markalar tüm genişliğe eşit dağılmış,
   sağda yeşil bağlantı. İnce bir bant — hero ile avantajları ayırır. */
.compat {
  /* 0deg: gradien aşağıdan yukarı okunur — yeşil tint alt kenarda, yukarı
     doğru hızla beyaza açılıyor. */
  background: linear-gradient(0deg,
    var(--brand-green-50) 0%,
    #f7fbf9 15%,
    var(--surface-0) 100%);
  border-bottom: 1px solid var(--ink-200);
}
.compat__inner {
  display: flex;
  align-items: center;
  gap: 2rem;
  padding-block: 1rem;
}
.compat__label {
  flex-shrink: 0;
  max-width: 9.5rem;
  color: #5e6a64;
  font-size: 0.6694rem;
  font-weight: 600;
  line-height: 1.35;
}
.compat__list {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  flex: 1;
}
.compat__item {
  color: #5e6a64;
  font-size: 0.9483rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.compat .link-arrow { flex-shrink: 0; font-size: var(--fs-body); }

/* --------------------------------------------------------------------------
   10. Avantaj şeridi
   -------------------------------------------------------------------------- */
/* Avantaj şeridi: kart yok, kutu yok — maddeler dikey ayraçla bölünür.
   Şerit hareketli: aynı anda 3 madde görünür, 6 maddenin tamamı sırayla geçer.
   Liste iki kez yazılır (ikinci kopya aria-hidden); izleme -50%'de başa döndüğü
   için döngü dikişsizdir. */
/* Referanstaki avantaj şeridi: beyaz zemin, altı madde tek sırada,
   ayraç yok, kart yok — ikon + başlık + tek satır açıklama. */
/* docs/07 §6 madde 5: fayda şeridi referansta daha ferah duruyor; bant ~14 px
   yükseldi (iki yana 7 px).

   Taban .section--tight'in 1.25rem'i, --section-y değil: ilk yazımda --section-y
   kullanılmıştı ve bant 73 px yerine 151 px çıktı. Ölçüm prototiple yan yana
   koyunca görüldü. */
.benefits-band { background: var(--surface-0); padding-block: calc(1.25rem + 0.4375rem); }
.benefits-viewport { overflow: visible; }

.benefits {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1.5rem;
}
.benefit { display: flex; gap: 0.75rem; align-items: flex-start; }
.benefit[aria-hidden='true'] { display: none; }

/* Referansta bu ikonların arkasında çip yok: düz yeşil çizgi ikon. */
.benefit .icon-chip {
  width: auto;
  height: auto;
  margin-top: 1px;
  background: none;
  border-radius: 0;
  color: var(--brand-green-600);
}
.benefit .icon-chip svg { width: 26px; height: 26px; }
.benefit h3 { margin-bottom: 0.1rem; font-size: 0.8367rem; }
.benefit p { font-size: var(--fs-small); color: var(--ink-500); line-height: 1.4; }

/* --------------------------------------------------------------------------
   11. Kartlar
   -------------------------------------------------------------------------- */
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 1.5rem;
  background: var(--surface-0);
  border: 1px solid var(--ink-200);
  border-radius: var(--radius-md);
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.card:hover { border-color: var(--brand-green-300); box-shadow: var(--shadow-sm); transform: translateY(-2px); }
.card h3 { margin: 0.875rem 0 0.3rem; }
.card p { color: var(--ink-500); font-size: var(--fs-small); line-height: 1.5; }
.card__arrow { margin-top: auto; padding-top: 0.875rem; color: var(--accent-orange-500); }
.card__link::after { content: ''; position: absolute; inset: 0; }

/* docs/07 §6 madde 3: platform bandı referanstan ~84 px uzundu; dikey dolgu
   32/42 px'e indi. Bandın kendi sınıfı var çünkü ölçüm bu banda özgü —
   .section'ın ortak değeri değişirse öteki bantlar da kısalırdı. */
.platform-band { padding-block: 2rem 2.625rem; }

/* Referanstaki üçlü band: solda anlatı, ortada 6 özellik kartı,
   sağda sektör tanıtım kartı. */
.platform__layout {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: 2rem;
  align-items: stretch;
}
.platform__layout .section-head { align-self: center; }

/* Sektör bölümü: solda 3 kolonluk ızgara, sağda anlatı kartı */
/* Kolon oranı ve boşluk platform bandıyla aynı; yalnız sıra terstir. */
.sectors__layout {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: 2rem;
  align-items: stretch;
}
.sectors__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; order: 1; }

/* Sağ kolon: bina fotoğraflı koyu yeşil kart (DOM'da önce gelir) */
.sectors__intro {
  order: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 2rem;
  border-radius: var(--radius-lg);
  overflow: hidden;
  color: var(--on-dark-muted);
  background-color: var(--brand-green-900);
  background-image:
    linear-gradient(135deg, rgba(10, 66, 40, 0.96) 0%, rgba(10, 66, 40, 0.86) 55%, rgba(10, 66, 40, 0.68) 100%),
    url('../img/cta-bg.jpg');
  background-size: cover;
  background-position: center;
}
.sectors__intro h2 { color: var(--on-dark); }
.sectors__intro .eyebrow { color: var(--brand-green-300); }
.sectors__intro p { color: var(--on-dark-muted); }
.sectors__intro .note-accent { color: var(--on-dark); }
/* Sektör grupları: koyu kartın altında, her grup kendi sayfasına giden yarı saydam bir hap. */
.sector-groups { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 1.25rem 0 0; padding: 0; list-style: none; }
.sector-groups a {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.4rem 0.3rem 0.75rem;
  border: 1px solid rgb(255 255 255 / 0.22);
  border-radius: 999px;
  background: rgb(255 255 255 / 0.08);
  color: var(--on-dark);
  font-size: var(--fs-small);
  font-weight: 600;
  text-decoration: none;
}
.sector-groups a:hover { background: var(--accent-orange-500); border-color: var(--accent-orange-500); color: #fff; }
.sector-groups span {
  display: inline-grid;
  place-items: center;
  min-width: 1.5rem;
  height: 1.5rem;
  padding: 0 0.35rem;
  border-radius: 999px;
  background: rgb(255 255 255 / 0.16);
  font-size: 0.72rem;
}
.platform__cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.75rem; align-content: center; }
.platform__cards .card { padding: 0.625rem; }
.platform__cards .icon-chip { width: 24px; height: 24px; border-radius: 7px; }
.platform__cards .icon-chip svg { width: 16px; height: 16px; }
.platform__cards h3 { margin: 0.35rem 0 0.1rem; }
.platform__cards .card__arrow { padding-top: 0.3rem; }
.platform__cards .card__arrow svg { width: 16px; height: 16px; }
.platform__cards .card p { font-size: 0.7251rem; line-height: 1.3; }


/* Sektör kartı */
.sector-card {
  overflow: hidden;
  padding: 0;
}
/* İllüstrasyonlar 3:2 çizildi; kart yüksekliğini kısmak için üstteki boş
   gökyüzü CSS ile kırpılır (object-position: yatay merkez, dikeyde alta
   yakın) — görsellerin yeniden çizilmesi gerekmez. */
.sector-card__media {
  position: relative;
  aspect-ratio: 41 / 20;
  overflow: hidden;
  background: var(--brand-green-700);
}
.sector-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 70%;
  transition: transform 0.35s ease;
}
.sector-card:hover .sector-card__media img { transform: scale(1.04); }
.sector-card__body {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 1.1rem 1rem;
}
.sector-card__body h3 { margin: 0 0 0.15rem; }
.sector-card__body p { font-size: var(--fs-small); color: var(--ink-500); }
.sector-card__body .card__arrow { padding-top: 0; }

/* Yüzen istatistik kartı */
.stat-card {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.875rem 1.125rem;
  background: var(--surface-0);
  border: 1px solid var(--ink-200);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
}
.stat-card strong { display: block; font-size: 1.004rem; color: var(--ink-900); line-height: 1.2; }
.stat-card span { font-size: var(--fs-small); color: var(--ink-500); }

/* --------------------------------------------------------------------------
   12. Ürün özellikleri bölümü
   -------------------------------------------------------------------------- */
.features__layout {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: 3.5rem;
  align-items: center;
}
/* Referanstaki kompozisyon: büyük fotoğraf + üzerine binen beyaz kartlar */
.features__aside { position: relative; }
.features__photo {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}
.features__photo img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 5; }

.features__aside .stat-card {
  position: absolute;
  right: -1.75rem;
  width: max-content;
  max-width: 15rem;
}
/* .features__photo da bir div: stat kartları 2. ve 3. div. */
.features__aside .stat-card:nth-of-type(2) { top: 14%; }
.features__aside .stat-card:nth-of-type(3) { top: 38%; }

.proof-panel {
  position: absolute;
  left: -1.5rem;
  bottom: 1.5rem;
  width: min(18rem, 86%);
  padding: 1.25rem;
  background: var(--surface-0);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}
.proof-panel h3 { margin-bottom: 0.4rem; font-size: 0.8925rem; }
.proof-panel p { color: var(--ink-500); font-size: var(--fs-small); line-height: 1.5; }

/* --------------------------------------------------------------------------
   13. Entegrasyon bölümü
   -------------------------------------------------------------------------- */
.integrations__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr) minmax(0, 0.75fr);
  gap: 3rem;
  align-items: center;
}
/* Veri akışı: jenerik "merkez + uydular" çemberi yerine ürünün gerçek zinciri.
   Giriş yöntemleri → kural motoru → bordro/ERP hedefleri. */
.flow { display: grid; gap: 0; justify-items: stretch; }

.flow__node {
  padding: 1rem 1.125rem;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--radius-md);
  text-align: center;
}
.flow__node--core {
  background: var(--surface-0);
  border-color: var(--surface-0);
  box-shadow: var(--shadow-lg);
}
.flow__label {
  display: block;
  margin-bottom: 0.45rem;
  color: var(--brand-green-300);
  font-size: 0.6136rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.flow__node--core .flow__label { color: var(--accent-orange-600); }
.flow__node strong {
  display: block;
  color: var(--on-dark);
  font-size: 0.8925rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.flow__node--core strong { color: var(--ink-900); font-size: 0.9483rem; }
.flow__chain {
  display: block;
  margin-top: 0.3rem;
  color: var(--ink-500);
  font-size: var(--fs-small);
}
.flow__items {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.35rem 0.5rem;
  margin-top: 0.5rem;
}
.flow__items li {
  padding: 0.2rem 0.55rem;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: var(--radius-pill);
  color: var(--on-dark-muted);
  font-size: 0.6694rem;
  font-weight: 600;
}
.flow__link {
  display: grid;
  justify-items: center;
  gap: 0;
  padding-block: 0.35rem;
  color: var(--accent-orange-500);
}
.flow__link::before {
  content: '';
  width: 2px;
  height: 14px;
  background: linear-gradient(var(--brand-green-300), var(--accent-orange-500));
  border-radius: 2px;
}
.flow__link svg { margin-top: -2px; }

/* --------------------------------------------------------------------------
   14. Güven bölümü (hesap doğruluğu)
   -------------------------------------------------------------------------- */
.assurance {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
.assurance-card {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  padding: 1.75rem;
  background: var(--surface-0);
  border: 1px solid var(--ink-200);
  border-radius: var(--radius-md);
}
.assurance-card h3 { margin: 0; }
.assurance-card p { color: var(--ink-500); font-size: var(--fs-body); }
.assurance-card__step {
  align-self: flex-start;
  padding: 0.2rem 0.6rem;
  background: var(--accent-orange-100);
  border-radius: var(--radius-pill);
  color: var(--accent-orange-600);
  font-size: 0.6136rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   15. Son CTA
   -------------------------------------------------------------------------- */
.final-cta {
  background-color: var(--brand-green-900);
  background-image:
    linear-gradient(90deg,
      rgba(10, 66, 40, 0.97) 0%,
      rgba(10, 66, 40, 0.92) 45%,
      rgba(10, 66, 40, 0.74) 100%),
    url('../img/cta-bg.jpg');
  background-size: cover;
  background-position: center;
}
.final-cta__layout {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: 3rem;
  align-items: center;
}
.final-cta__actions { display: flex; flex-wrap: wrap; gap: 0.875rem; margin-top: 1.75rem; }
.final-cta__card {
  padding: 1.75rem;
  background: var(--surface-0);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}
.final-cta__card li { color: var(--ink-700); }

/* --------------------------------------------------------------------------
   16. Formlar
   -------------------------------------------------------------------------- */
.form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.125rem; }
.field { display: flex; flex-direction: column; gap: 0.4rem; }
.field--full { grid-column: 1 / -1; }
.field label { font-size: var(--fs-small); font-weight: 600; color: var(--ink-900); }
.field .hint { font-size: var(--fs-small); color: var(--ink-500); }
.field .req { color: var(--accent-orange-600); }

.field input,
.field select,
.field textarea {
  min-height: 46px;
  padding: 0.65rem 0.85rem;
  background: var(--surface-0);
  border: 1px solid var(--ink-300);
  border-radius: var(--radius-sm);
  font: inherit;
  font-size: var(--fs-body);
  color: var(--ink-900);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.field textarea { min-height: 8rem; resize: vertical; }
.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--brand-green-600);
  box-shadow: var(--ring);
  outline: none;
}

.consent {
  display: flex;
  gap: 0.65rem;
  align-items: flex-start;
  padding: 1rem;
  background: var(--surface-50);
  border: 1px solid var(--ink-200);
  border-radius: var(--radius-sm);
}
.consent input { width: 20px; height: 20px; min-height: 0; margin-top: 2px; flex-shrink: 0; accent-color: var(--brand-green-700); }
.consent label { font-weight: 400; font-size: var(--fs-small); line-height: 1.5; color: var(--ink-700); }

.honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* İletişim sayfası */
.page-hero {
  padding-block: 3.5rem;
  background: var(--brand-green-50);
  border-bottom: 1px solid var(--brand-green-100);
}
.breadcrumb { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1rem; font-size: var(--fs-small); color: var(--ink-500); }
.breadcrumb a { color: var(--ink-500); }
.breadcrumb li:not(:last-child)::after { content: '›'; margin-left: 0.5rem; color: var(--ink-400); }

.contact__layout {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
  gap: 3rem;
  align-items: start;
}
.contact-card {
  padding: 1.5rem;
  background: var(--surface-50);
  border: 1px solid var(--ink-200);
  border-radius: var(--radius-md);
}
.contact-card + .contact-card { margin-top: 1.25rem; }
.contact-list { display: grid; gap: 1.125rem; margin-top: 1rem; }
.contact-list li { display: flex; gap: 0.75rem; align-items: flex-start; }
.contact-list dt { font-size: var(--fs-small); font-weight: 600; color: var(--ink-900); }
.contact-list dd { margin: 0; font-size: var(--fs-body); color: var(--ink-700); }

.placeholder-token {
  display: inline-block;
  padding: 0.1rem 0.45rem;
  background: var(--accent-orange-100);
  border: 1px dashed var(--accent-orange-300);
  border-radius: 4px;
  color: var(--accent-orange-600);
  font-size: 0.7251rem;
  font-weight: 600;
}

.faq-item {
  padding: 1.125rem 0;
  border-bottom: 1px solid var(--ink-200);
}
.faq-item summary {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  cursor: pointer;
  font-weight: 600;
  color: var(--ink-900);
  list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: '+'; color: var(--accent-orange-500); font-size: 1.1156rem; line-height: 1; }
.faq-item[open] summary::after { content: '–'; }
.faq-item p { margin-top: 0.75rem; color: var(--ink-500); }

/* --------------------------------------------------------------------------
   17. Footer
   -------------------------------------------------------------------------- */
.site-footer {
  background: var(--brand-green-900);
  color: var(--on-dark-muted);
  padding-block: 4rem 0;
}
.site-footer__top {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) repeat(4, minmax(0, 0.8fr)) minmax(0, 1.2fr);
  gap: 2.5rem;
  padding-bottom: 3rem;
}
.site-footer h3 {
  margin-bottom: 1rem;
  color: var(--on-dark);
  font-size: 0.781rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.site-footer a { color: var(--on-dark-muted); font-size: var(--fs-body); }
.site-footer a:hover { color: var(--on-dark); }
.site-footer__links { display: grid; gap: 0.6rem; }
.site-footer__tagline { margin: 1rem 0 1.5rem; font-size: var(--fs-body); max-width: 18rem; }

.social { display: flex; gap: 0.6rem; }
.social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--radius-sm);
}
.social a:hover { background: rgba(255, 255, 255, 0.1); }

.newsletter__form { display: flex; gap: 0.5rem; margin-top: 0.875rem; }
.newsletter__form input {
  flex: 1;
  min-width: 0;
  min-height: 46px;
  padding: 0.6rem 0.85rem;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: var(--radius-sm);
  color: #fff;
  font: inherit;
  font-size: var(--fs-body);
}
.newsletter__form input::placeholder { color: rgba(255, 255, 255, 0.55); }
.newsletter__submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  flex-shrink: 0;
  background: var(--accent-orange-500);
  border: 0;
  border-radius: var(--radius-sm);
  color: #fff;
  cursor: pointer;
}
.newsletter__submit:hover { background: var(--accent-orange-600); }
.newsletter .consent {
  margin-top: 0.875rem;
  padding: 0.75rem;
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.16);
}
.newsletter .consent label { color: var(--on-dark-muted); }
.newsletter .consent a { text-decoration: underline; }

/* Kurumsal künye: ürünün arkasındaki şirket görünür olsun. */
.site-footer__corp {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  padding-block: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}
.site-footer__corp img { height: 34px; width: auto; }
.site-footer__corp p {
  max-width: 34rem;
  color: var(--on-dark-muted);
  font-size: var(--fs-small);
  line-height: 1.5;
}

.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  font-size: var(--fs-small);
}
.legal-links { display: flex; flex-wrap: wrap; gap: 1.25rem; }

/* --------------------------------------------------------------------------
   18. Responsive
   -------------------------------------------------------------------------- */
/* Header yoğunluğu: 6 menü + 3 aksiyon + dil seçici 1440'ın altında sığmıyor.
   Sırayla eleniyor — en az kritik olan önce. */
/* Header sadeleşmesi kademeli: önce boşluk, sonra dil seçici, en son "Giriş Yap".
   Ölçülmüş eşikler — logo 44 px ve Poppins ile tam set ancak ~1520 px'te sığıyor. */
@media (max-width: 1620px) {
  .site-header__inner { gap: 1.25rem; }
  .primary-nav__link { padding-inline: 0.45rem; font-size: 0.8367rem; }
  .header-actions { gap: 0.5rem; }
  .header-actions .btn { padding-inline: 1rem; }
}

@media (max-width: 1560px) {
  .brand__logo { height: 40px; }
  .primary-nav__link { padding-inline: 0.35rem; font-size: 0.781rem; }
  .header-actions .btn { padding-inline: 0.85rem; font-size: 0.781rem; }
  .lang-switch { display: none; }
}

@media (max-width: 1200px) {
  :root { --gutter: 2rem; }
  .benefits { grid-template-columns: repeat(3, 1fr); row-gap: 2rem; }
  .site-footer__top { grid-template-columns: repeat(3, 1fr); }
}

/* Üst menü altı başlıkla (Özellikler, Yöntemler, Sektörler, Kurumsal, Fiyatlar, Kaynaklar), telefon ve
   panel girişiyle 1100 px'e kadar tek satıra sığıyor; altında hamburgere geçer. Eşik site.js'teki
   mobileQuery ile aynı olmalı ve sayfa düzeninin kırılımıyla aynıdır.

   Mobil menüde başlık bir bağlantı, yanındaki ok bir düğmedir: başlık sayfasına da, alt menüye de
   ayrı ayrı dokunulur. Sütunlu panelin sütun başlıkları ikinci kademe akordeondur, aynı anda biri
   açık kalır (site.js). Satırlar 44 px dokunma hedefinin altına inmez. */
@media (max-width: 1100px) {
  .primary-nav { display: none; }
  .nav-toggle { display: inline-flex; }
  body.nav-open { overflow: hidden; }

  .primary-nav[data-open='true'] {
    position: absolute;
    top: var(--header-h);
    left: 0;
    right: 0;
    display: block;
    max-height: calc(100vh - var(--header-h));
    max-height: calc(100dvh - var(--header-h));
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 0.5rem var(--gutter) 1.5rem;
    background: var(--surface-0);
    border-bottom: 1px solid var(--ink-200);
    box-shadow: var(--shadow-md);
  }
  .primary-nav[data-open='true'] .primary-nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .primary-nav[data-open='true'] .primary-nav__list > li {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    border-bottom: 1px solid var(--ink-200);
  }
  .primary-nav[data-open='true'] .primary-nav__link { min-height: 48px; padding: 0.75rem 0.25rem; font-size: var(--fs-body); }
  .primary-nav[data-open='true'] .primary-nav__toggle { width: 48px; height: 48px; }
  .primary-nav[data-open='true'] .primary-nav__toggle[aria-expanded='true'] .primary-nav__caret { transform: rotate(180deg); }
  .primary-nav[data-open='true'] .dropdown {
    grid-column: 1 / -1;
    position: static;
    display: none;
    min-width: 0;
    margin: 0 0 0.75rem;
    padding: 0.25rem 0 0.25rem 0.75rem;
    border: 0;
    border-left: 2px solid var(--brand-green-100);
    border-radius: 0;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    transform: none;
  }
  .primary-nav[data-open='true'] .dropdown[data-open='true'] { display: block; }
  .primary-nav[data-open='true'] .dropdown a { min-height: 44px; display: flex; align-items: center; }

  .primary-nav[data-open='true'] .mega__cols { display: block; padding: 0; }
  .primary-nav[data-open='true'] .dropdown.mega { background: none; border: 0; border-left: 2px solid var(--brand-green-100); border-radius: 0; box-shadow: none; overflow: visible; }
  .primary-nav[data-open='true'] .mega__body--feature { display: block; }
  .primary-nav[data-open='true'] .mega__cols--single .mega__links { grid-template-columns: 1fr; }
  .primary-nav[data-open='true'] .mega__feature { display: none; }
  .primary-nav[data-open='true'] .mega__heading { border-bottom: 0; margin: 0; gap: 0.6rem; }
  .primary-nav[data-open='true'] .mega__heading-text { flex: 1; }
  .primary-nav[data-open='true'] .mega__links a { font-size: var(--fs-body); padding-block: 0.5rem; }
  .primary-nav[data-open='true'] .mega__band { background: none; border: 0; padding: 0.75rem 0 0.25rem; flex-direction: row; }
  .primary-nav[data-open='true'] .mega__heading {
    display: flex;
    width: 100%;
    min-height: 44px;
    justify-content: space-between;
    pointer-events: auto;
    cursor: pointer;
    padding: 0.5rem 0.75rem;
    font-size: var(--fs-body);
    text-transform: none;
    letter-spacing: 0;
    color: var(--ink-900);
  }
  .primary-nav[data-open='true'] .mega__heading .primary-nav__caret { display: inline; }
  .primary-nav[data-open='true'] .mega__heading[aria-expanded='true'] .primary-nav__caret { transform: rotate(180deg); }
  .primary-nav[data-open='true'] .mega__links { display: none; padding-left: 0.5rem; }
  .primary-nav[data-open='true'] .mega__links[data-open='true'] { display: block; }
  .primary-nav[data-open='true'] .mega__col:not(:has(.mega__heading)) .mega__links { display: block; }

  .primary-nav[data-open='true'] .primary-nav__actions { display: grid; gap: 0.75rem; margin-top: 1.25rem; }
  .primary-nav__actions .btn { justify-content: center; min-height: 48px; }

  .header-panel { display: none; }
}

@media (max-width: 1100px) {
  .benefits { grid-template-columns: repeat(2, 1fr); row-gap: 1.75rem; }
  :root { --section-y: 2.25rem; --gutter: 2rem; }

  /* docs/07 §6 madde 7: bu kırılımda ikon düğmeleri dokunmayla kullanılıyor ve
     40 px, WCAG'ın 44 px'lik dokunma hedefi alt sınırının altında kalıyordu.
     Ölçüm 1100–768 px arasında yapıldı; 767 px altında düzen tümden değişiyor. */
  .icon-btn { width: 44px; height: 44px; }

  .hero__inner { grid-template-columns: 1fr; gap: 2.5rem; padding-block: 3rem 4rem; }
  .hero__title { max-width: none; }
  .hero__visual { margin-right: 0; }
  .hero__device { margin-right: 0; }
  .hero__phone { position: static; width: 100%; max-width: 9rem; margin: 1rem auto 0; }
  .hero__stand { display: none; }
  .hero__float { position: static; transform: none; width: 100%; margin-top: 1.25rem; box-shadow: var(--shadow-md); }

  .features__layout,
  .integrations__layout,
  .final-cta__layout,
  .platform__layout,
  .sectors__layout,
  .contact__layout { grid-template-columns: 1fr; gap: 2.5rem; }

  .platform__cards { grid-template-columns: repeat(3, 1fr); }
  /* Tek kolona inince anlatı kartı yine başa döner. */
  .sectors__intro { order: 0; }
  .sectors__grid { grid-template-columns: repeat(2, 1fr); order: 0; }

  .grid--3 { grid-template-columns: repeat(2, 1fr); }
  .assurance { grid-template-columns: 1fr; }
  .compat__inner { flex-direction: column; align-items: flex-start; gap: 1.25rem; }
}

@media (max-width: 767px) {
  :root { --gutter: 1.25rem; --section-y: 3.25rem; --header-h: 68px; }

  /* Header'da yalnız marka, arama ve menü kalır: birincil CTA hemen altta,
     hero'nun ilk ekranında zaten var. */
  .header-actions .btn--primary { display: none; }

  .header-call { width: 44px; padding: 0; justify-content: center; }
  .header-call__text { display: none; }

  .mobile-cta {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 90;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: 0.5rem;
    padding: 0.5rem var(--gutter) calc(0.5rem + env(safe-area-inset-bottom));
    background: var(--surface-0);
    border-top: 1px solid var(--ink-200);
    box-shadow: 0 -4px 16px rgb(0 0 0 / 0.06);
  }
  .mobile-cta a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    min-height: 48px;
    border-radius: var(--radius-sm);
    font-weight: 700;
    text-decoration: none;
  }
  .mobile-cta__call { background: var(--brand-green-600); color: #fff; }
  .mobile-cta__signup { background: var(--accent-orange-500); color: #fff; }
  body { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
  body .whatsapp-fab { bottom: calc(76px + env(safe-area-inset-bottom)); }
  body.nav-open .mobile-cta { display: none; }
  .icon-btn { width: 44px; height: 44px; }
  .brand { font-size: 0.9483rem; }

  .benefits { grid-template-columns: 1fr; row-gap: 1.5rem; }
  .grid--2,
  .grid--3 { grid-template-columns: 1fr; }
  .platform__cards { grid-template-columns: repeat(2, 1fr); }
  .sectors__grid { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .site-footer__top { grid-template-columns: 1fr; gap: 2rem; }

  .hero__actions .btn,
  .final-cta__actions .btn { flex: 1 1 100%; justify-content: center; }

  /* Dar ekranda metin fotoğrafın üstüne iniyor: örtü dikeye çevrilir. */
  .hero {
    background-image:
      linear-gradient(180deg,
        rgba(255, 255, 255, 0.96) 0%,
        rgba(255, 255, 255, 0.92) 58%,
        rgba(255, 255, 255, 0.6) 100%),
      url('../img/hero-bg.jpg');
  }

  .compat__inner { width: 100%; }
  .compat__list {
    width: 100%;
    max-width: 100%;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 0.5rem;
    gap: 1.5rem;
    /* Yeşil zeminde açık renk kaydırma çubuğu çizgi gibi görünüyordu. */
    scrollbar-width: none;
  }
  .compat__list::-webkit-scrollbar { display: none; }
  .compat__label { max-width: none; }

  .flow__node { padding: 0.875rem 1rem; }
  .flow__chain { font-size: 0.6694rem; }

  .site-footer__corp { flex-direction: column; align-items: flex-start; }
  .site-footer__bottom { flex-direction: column; align-items: flex-start; }
}

/* --------------------------------------------------------------------------
   19. Yazdırma
   -------------------------------------------------------------------------- */
@media print {
  .site-header, .site-footer, .final-cta, .hero__visual { display: none; }
  body { color: #000; }
}

/* ==========================================================================
   12. Platform yüzeyleri

   Yukarıdaki her şey tasarım prototipinden geldi ve onaylanmış hâliyle duruyor.
   Bu bölüm, platformun kendi görünümlerinin (Listing, Article, Error, widget
   partial dosyaları) kullandığı sınıfları aynı tasarım diline bağlar.

   Ayrı bir bölüm olmasının sebebi: o görünümler platformun malı ve sınıf
   adlarını onlar belirliyor. Prototipin sınıflarını onlara dayatmak, platform
   güncellendiğinde kırılacak bir bağ kurmak olurdu.
   ========================================================================== */

/* Kırıntı yolu: prototipin .breadcrumb kuralı doğrudan flex kapsayıcı
   varsayıyor, platformun görünümü ise <nav class="breadcrumb"><ol>. Liste
   flex'e burada çevriliyor; prototipin kendi kuralları (ayırıcı, renk)
   olduğu gibi işliyor. */
.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* ── İçerik sayfası iskeleti ─────────────────────────────────────────── */

.page {
  width: min(100% - (2 * var(--gutter)), var(--container));
  margin: 2.5rem auto 3.5rem;
}
.page-body { margin-block: 2.5rem 3rem; }

/* Okuma genişliği: uzun metin satırı 65-75 karakterden sonra izlenmesi zorlaşır. */
.prose > * + * { margin-top: 1rem; }
.prose h2 { margin-top: 2.25rem; font-size: var(--fs-h3); }
.prose h3 {
  margin-top: 1.75rem;
  font-size: var(--fs-body);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-700);
}
.prose ul, .prose ol { padding-left: 1.25rem; }
.prose li + li { margin-top: 0.4rem; }
.prose img { border-radius: var(--radius-sm); }
.prose a { color: var(--brand-green-700); text-decoration: underline; text-underline-offset: 2px; }
.prose a:hover { color: var(--accent-orange-600); }

/* Sayfa gövdesindeki karşılaştırma tabloları (yöntemler, web/masaüstü). Dar ekranda tablo kendi
   içinde yatay kayar; sayfa taşmaz. */
.prose table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-small);
  border: 1px solid var(--ink-200);
  border-radius: var(--radius-sm);
}
.prose th, .prose td {
  padding: 0.6rem 0.8rem;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--ink-200);
}
.prose thead th { background: var(--brand-green-50); color: var(--brand-green-700); font-weight: 600; }
.prose tbody td:first-child { font-weight: 600; color: var(--ink-900); }
.prose tbody tr:last-child td { border-bottom: 0; }
@media (max-width: 720px) {
  .prose table { display: block; overflow-x: auto; white-space: nowrap; }
}

.empty { color: var(--ink-500); }
.notice {
  margin-block: 1rem;
  padding: 0.85rem 1.1rem;
  background: var(--brand-green-50);
  border-left: 3px solid var(--brand-green-600);
  border-radius: var(--radius-sm);
  font-size: var(--fs-small);
}

/* ── Platformun düğme sınıfları ──────────────────────────────────────── */
/* Platform ve modüller .button yazıyor, prototip .btn. İkisini aynı yere
   bağlamak, her iki tarafı da değiştirmeden tek bir görünüm verir. */
.button,
.button-light {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.62rem 1.15rem;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  font-size: var(--fs-small);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.button {
  background: var(--accent-orange-500);
  color: var(--on-dark);
}
.button:hover { background: var(--accent-orange-600); color: var(--on-dark); }
.button-light {
  background: var(--surface-0);
  color: var(--brand-green-700);
  border-color: var(--ink-300);
}
.button-light:hover { border-color: var(--brand-green-600); }

.text-link { color: var(--brand-green-700); font-weight: 600; font-size: var(--fs-small); }
.text-link:hover { color: var(--accent-orange-600); }

/* ── Liste görünümü (platform: Listing.cshtml) ───────────────────────── */

.listing-grid {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}
.listing-card a {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  color: inherit;
  text-decoration: none;
  background: var(--surface-0);
  border: 1px solid var(--ink-200);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.listing-card a:hover {
  border-color: var(--brand-green-300);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
.listing-image {
  display: block;
  aspect-ratio: 16 / 10;
  background: var(--brand-green-50) center / cover no-repeat;
}
/*
   Kart metinleri. Önceden yalnız .listing-title tanımlıydı ve o da --fs-small ile yazılıyordu: kartın
   başlığı gövde metninden küçüktü. Tarih ve özet için hiç kural yoktu, yani tarayıcı varsayılanıyla
   geliyor ve kartın kenarına yapışıyorlardı — yan dolgusu olan tek öğe başlıktı. Özellik kartlarında
   tarih ve özet bulunmadığı için bu yalnız blog listesinde görünüyordu.

   Sıralama kartta da hiyerarşidir: tarih en küçük ve soluk, başlık en belirgin, özet arada.
*/
.listing-date {
  display: block;
  padding: 0.85rem 1.1rem 0;
  color: var(--ink-500);
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.04em;
}
.listing-title {
  display: block;
  padding: 0.9rem 1.1rem;
  font-weight: 600;
  font-size: var(--fs-lead);
  line-height: 1.35;
  color: var(--ink-900);
}
/* Tarih varsa başlık ona yaklaşır: ikisi tek bir blok okunmalı. */
.listing-date + .listing-title { padding-top: 0.3rem; }

.listing-summary {
  display: block;
  padding: 0 1.1rem 1.1rem;
  color: var(--ink-500);
  font-size: var(--fs-small);
  line-height: 1.55;
}
/* Özet varsa başlığın alt dolgusu ona bırakılır. */
.listing-title:has(+ .listing-summary) { padding-bottom: 0.4rem; }

/* ── Detay görünümü (platform: Article.cshtml) ───────────────────────── */

.detail-image {
  aspect-ratio: 16 / 7;
  margin-bottom: 1.75rem;
  background: var(--brand-green-50) center / cover no-repeat;
  border-radius: var(--radius-md);
}
.detail-image-contain { background-size: contain; background-repeat: no-repeat; }

.detail-layout {
  display: grid;
  gap: 2.5rem;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}
.detail-layout aside {
  padding-top: 1.25rem;
  border-top: 1px solid var(--ink-200);
}
.detail-layout aside a {
  display: block;
  padding: 0.4rem 0;
  color: var(--ink-700);
  font-size: var(--fs-small);
  text-decoration: none;
}
.detail-layout aside a:hover,
.detail-layout aside a.current { color: var(--brand-green-700); }

@media (min-width: 62rem) {
  .detail-layout { grid-template-columns: minmax(0, 1fr) 16rem; }
  .detail-layout aside {
    padding: 0 0 0 1.75rem;
    border-top: 0;
    border-left: 1px solid var(--ink-200);
  }
}

/* ── Widget yüzeyleri ────────────────────────────────────────────────── */

.widget { margin-block: 2.5rem; }
.widget-heading { margin-bottom: 1.1rem; font-size: var(--fs-h3); }
.widget-band {
  margin-block: 2.5rem;
  padding-block: 2.25rem;
  background: var(--surface-50);
}

.widget-menu-list,
.widget-menu-list ul { margin: 0; padding: 0; list-style: none; }
.widget-menu-list > li { padding: 0.4rem 0; border-bottom: 1px solid var(--ink-200); }
.widget-menu-list a { color: var(--ink-900); font-size: var(--fs-small); text-decoration: none; }
.widget-menu-list a:hover { color: var(--brand-green-700); }
.widget-menu-list ul { padding-left: 1rem; }
.widget-menu-list ul a { color: var(--ink-500); }

.widget-columns-grid { display: grid; gap: 1.75rem; }
.widget-columns-grid[data-columns='2'] { grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
.widget-columns-grid[data-columns='3'] { grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); }

/* Çağrı bandı (site widget): marka yeşili zemin, turuncu düğme. */
.cta {
  padding: 1.75rem;
  background: var(--brand-green-900);
  color: var(--on-dark-muted);
  border-radius: var(--radius-lg);
}
.cta h2 { margin-bottom: 0.9rem; color: var(--on-dark); }
.cta-actions { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; }
.cta-actions a:not(.button) { color: var(--on-dark); font-weight: 600; }

.contact-info .social { display: flex; gap: 1rem; list-style: none; margin: 0; padding: 0; }

/* İlgili sayfalar (site widget): iç linklemenin gövde içindeki yüzeyi. */
.related-links {
  display: grid;
  gap: 0.6rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}
.related-links a {
  display: block;
  padding: 0.75rem 1rem;
  background: var(--brand-green-50);
  border: 1px solid var(--brand-green-100);
  border-radius: var(--radius-sm);
  color: var(--brand-green-800);
  font-size: var(--fs-small);
  font-weight: 600;
  text-decoration: none;
}
.related-links a:hover {
  background: var(--brand-green-100);
  border-color: var(--brand-green-300);
}

/* Hesaplama araçları (site widget). */
.calculator {
  margin-block: 2rem;
  padding: 1.5rem;
  background: var(--surface-50);
  border: 1px solid var(--ink-200);
  border-radius: var(--radius-md);
}
.calculator h2 { margin-bottom: 1.25rem; font-size: var(--fs-h3); }
.calculator-fields {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  margin-bottom: 1.25rem;
}
.calculator-fields p { display: flex; flex-direction: column; gap: 0.35rem; margin: 0; }
.calculator-fields label { font-size: var(--fs-small); font-weight: 600; color: var(--ink-900); }
.calculator-fields input,
.calculator-fields select {
  padding: 0.55rem 0.7rem;
  background: var(--surface-0);
  border: 1px solid var(--ink-300);
  border-radius: var(--radius-sm);
  font: inherit;
  font-size: var(--fs-small);
  color: var(--ink-900);
}
.calculator-fields input:focus-visible,
.calculator-fields select:focus-visible {
  outline: 0;
  box-shadow: var(--ring);
  border-color: var(--brand-green-600);
}
/* ink-500, kutunun surface-50 zemininde 4,35:1 veriyordu; AA 4,5 istiyor (olculdu). */
.field-help { font-size: var(--fs-small); color: var(--ink-700); }

.calculator-result { display: block; margin-top: 1.25rem; }
.calculator-result:empty { display: none; }
.calculator-result p {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem;
  margin: 0;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--ink-200);
  font-size: var(--fs-small);
  color: var(--ink-700);
}
.calculator-result p:last-child { border-bottom: 0; color: var(--ink-500); }
.calculator-result strong { color: var(--ink-900); }
/* ink-500, kutunun surface-50 zemininde 4,35:1 veriyordu; AA 4,5 istiyor (olculdu). */
.calculator-note { margin-top: 1rem; font-size: var(--fs-small); color: var(--ink-700); }

/* ── Form yüzeyleri (platformun form widget ve iletişim sayfası) ─────── */

.contact-layout {
  display: grid;
  gap: 2.5rem;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}
@media (min-width: 58rem) {
  .contact-layout { grid-template-columns: 18rem minmax(0, 1fr); }
}
.contact-details h2 {
  font-size: var(--fs-body);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-700);
}

/* Prototipin .field kuralı bir ızgara içinde yaşıyor; platformun formları onu
   tek kolonda basıyor. Genişlik sınırı burada, prototipe dokunmadan. */
.contact-form .field,
.widget .field { max-width: 32rem; }

.field-choice { margin-bottom: 1rem; padding: 0; border: 0; }
.field-choice legend { margin-bottom: 0.35rem; padding: 0; font-size: var(--fs-small); font-weight: 600; }
.field-choice label { display: inline-flex; gap: 0.4rem; align-items: center; margin-right: 1rem; font-weight: 400; }
.field-choice input { width: auto; }

.field-consent label { display: flex; gap: 0.5rem; align-items: flex-start; font-weight: 400; }
.field-consent input { width: auto; margin-top: 0.2rem; }

.field span.field-validation-error,
.validation-summary { color: #b3261e; font-size: var(--fs-small); }
.validation-summary ul { margin: 0; padding-left: 1.1rem; }

.consent-links { font-size: var(--fs-small); color: var(--ink-500); }
.consent-links a { color: var(--brand-green-700); }

/* Alt bilgideki e-bulten formu, prototipte yalniz bir alan ve bir dugmeden olusan tek satirdi.
   Platformun form sozlesmesi iki sey daha getiriyor: bal kupu alani ve ayri duran acik riza kutusu
   (R-10). Bal kupu zaten konumlandirilmis durumda ve akistan cikiyor; riza kutusu ise flex ogesi
   oldugu icin yan yana diziliyor ve formun min-content genisligini 471 px'e cikariyordu --
   375 px'te olculen yatay tasmanin tek sebebi buydu. Satir sarmali yapiliyor ve riza bloguna tam
   genislik veriliyor. */
.newsletter__form { flex-wrap: wrap; }
.newsletter__form .consent { flex: 0 0 100%; }


/* ==========================================================================
   13. Dokunma hedefleri

   R-07 dokunma hedefi alt sınırını 44 px koyuyor. Ölçüm 375 ve 768 px'te
   yapıldı ve dört yüzey sınırın altında kaldı: alt bilgi menüsü, yasal metin
   satırı, menü widget listesi ve logo bağlantısı. Dördü de navigasyon, yani
   parmakla kullanılacak şeyler.

   Metin akışının içindeki bağlantılar (gövde metni, kırıntı yolu, rıza
   satırındaki metin bağlantıları, ilgili sayfalar kartlarının içi) bilerek
   dışarıda: onları 44 px'e çıkarmak satır aralığını bozar ve WCAG 2.5.8 bu
   bağlantıları zaten muaf tutuyor ("inline" istisnası).
   ========================================================================== */

/* Alt bilgi kolonları ve yasal metin satırı. */
.site-footer__links a,
.legal-links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

/* Menü widget listesi: bağlantı blok hâline geliyor, dolgu li yerine onda. */
.widget-menu-list > li { padding: 0; }
.widget-menu-list a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding-block: 0.25rem;
}

/* Logo bağlantısı: görsel 38 px, kutusu 40 px idi. */
.brand { min-height: 44px; }

/* Sosyal hesap ikonları. */
.social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
}

/* Ölçümde kalan iki yüzey. */

/* Platformun .button kutusu 40 px yüksekliğindeydi. */
.button,
.button-light { min-height: 44px; }

/* İletişim sayfasındaki telefon ve e-posta bağlantıları: metin gibi görünüyorlar
   ama parmakla kullanılan ilk iki şey onlar. */
.contact-details a[href^='tel:'],
.contact-details a[href^='mailto:'] {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

/* Alt bilgi koyu zeminde: oradaki rıza satırı ve metin bağlantıları, §12'de açık
   zemin için verilen renkleri devralıyordu ve ölçümde 1,23–1,44 kontrast oranı
   çıktı (AA alt sınırı 4,5). Koyu zemin değerleri burada. */
.site-footer .consent,
.site-footer .consent label { color: var(--on-dark-muted); }
.site-footer .consent-links { color: var(--on-dark-muted); }
.site-footer .consent-links a { color: var(--on-dark); text-decoration: underline; text-underline-offset: 2px; }
.site-footer .consent-links a:hover { color: var(--accent-orange-300); }

/* Turuncu düğmenin metni koyu.

   Ölçüm: #f47b20 üzerine beyaz metin 2,73:1 veriyor ve AA'nın normal metin için
   istediği 4,5:1'in altında kalıyor (R-08). Turuncuyu AA'ya çıkaracak kadar
   koyulaştırmak markayı değiştirirdi — #b35200 civarına inmesi gerekirdi.
   Koyu metin aynı turuncuda 6,6:1 veriyor ve marka rengi yerinde kalıyor.

   Beyaz metin yalnız koyu yeşil düğmelerde kalıyor; orada oran zaten yüksek. */
.btn--primary,
.button {
  color: var(--ink-900);
}
.btn--primary:hover,
.button:hover {
  color: var(--ink-900);
}
.btn--primary .btn__arrow { color: inherit; }

/* ==========================================================================
   14. Modül widget yüzeyleri

   Kurulu modüllerin widget'ları kendi HTML'ini getiriyor, görünüşü siteye
   bırakıyor ("the module brings the markup and the site brings the look").
   Hizmetler ve Projeler zaten §12'deki .listing-* sınıflarını kullanıyor;
   geri kalan dördünün sınıfları burada.

   SSS widget'ı prototipte zaten tanımlı olan .faq-item kuralını kullanıyor;
   yalnız cevabın kendisi eksikti.
   ========================================================================== */

/* Modül widget'ları kendi HTML'ini getirirken .container yazmıyor; ana sayfada doğrudan
   main'in çocuğu olduklarında içeriği ızgaraya oturtmak sitenin işi. İç sayfalarda zaten
   .prose içinde geldikleri için bu kural onlara değmiyor. Dolgu container'ın kendisiyle
   aynı hesabı yapar, böylece çocukların kendi max-width'leri (örneğin .section-head)
   bozulmadan kalır. */
main > .widget {
  padding-inline: max(var(--gutter), calc((100% - var(--container)) / 2 + var(--gutter)));
}

.faq-answer {
  margin-top: 0.75rem;
  color: var(--ink-700);
  font-size: var(--fs-small);
  line-height: 1.6;
}
.faq-answer > * + * { margin-top: 0.75rem; }
.faq-answer p { margin: 0; }

/*
   Görseli olmayan bir liste kartı. Düz bir zemin yerine markanın kendi kapağı: 16/10, yani .listing-image
   ile aynı oran — cover kırpmıyor, logo ortada kalıyor. Logo %38 saydam, çünkü kapağın işi kartın
   başlığını bastırmak değil, boş kutuyu kapatmak.

   Bir kayda görsel girildiği an bu kural devreye girmiyor: Listing.cshtml o zaman .listing-image-empty
   sınıfını hiç yazmıyor. */
.listing-image-empty {
  /*
     Logo kapağın YÜZDESİ olarak boyutlanıyor, kapağı kaplayan bir görsel olarak değil. Önce cover ile
     denendi: kapak oranı 16/10'dan birazcık kayınca görsel ölçekleniyor ve logo kartı dolduruyordu.
     "46% auto" ile oran ne olursa olsun logo kapağın %46'sı kalıyor ve hiç kırpılmıyor.

     Solukluk (%38) görselin içinde gömülü, çünkü arka plan katmanına ayrı opacity verilemez.
  */
  background: var(--brand-green-50) url("../img/kart-logo.png") center / 46% auto no-repeat;
  border-bottom: 3px solid rgb(244 123 32 / 0.45);
}

/* ── Paketler ────────────────────────────────────────────────────────── */

.package-grid {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
}
.package {
  display: flex;
  flex-direction: column;
  padding: 1.5rem;
  background: var(--surface-0);
  border: 1px solid var(--ink-200);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}
.package-name {
  margin-bottom: 0.35rem;
  font-size: var(--fs-h3);
  font-weight: 700;
  color: var(--brand-green-800);
}
.package-price {
  margin-bottom: 0.75rem;
  font-size: 1.5619rem;
  font-weight: 800;
  color: var(--ink-900);
  line-height: 1.2;
}
.package-lead {
  margin-bottom: 1rem;
  color: var(--ink-700);
  font-size: var(--fs-small);
  line-height: 1.5;
}
.package-body { font-size: var(--fs-small); color: var(--ink-700); }
.package-body ul { margin: 0; padding-left: 1.1rem; }
.package-body li + li { margin-top: 0.4rem; }

/* ── Müşteri görüşleri ───────────────────────────────────────────────── */

.quote-grid {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
}
.quote {
  padding: 1.5rem;
  background: var(--brand-green-50);
  border-left: 3px solid var(--brand-green-600);
  border-radius: var(--radius-sm);
  font-size: var(--fs-small);
  line-height: 1.6;
  color: var(--ink-700);
}
.quote-author {
  display: block;
  margin-top: 0.9rem;
  font-weight: 600;
  color: var(--ink-900);
}

/* ── Referanslar ─────────────────────────────────────────────────────── */

.logo-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr));
  align-items: center;
}
.logo-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  padding: 1rem;
  background: var(--surface-0);
  border: 1px solid var(--ink-200);
  border-radius: var(--radius-sm);
}
.logo-card img { max-height: 46px; width: auto; }
.logo-name { font-size: var(--fs-small); color: var(--ink-500); text-align: center; }

/* ── Sayaçlar ────────────────────────────────────────────────────────── */

.counter-grid {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
}
.counter {
  padding: 1.25rem;
  background: var(--surface-50);
  border-radius: var(--radius-md);
  text-align: center;
}
.counter-value {
  display: block;
  font-size: var(--fs-h2);
  font-weight: 800;
  color: var(--brand-green-700);
  line-height: 1.1;
}
.counter-name {
  display: block;
  margin-top: 0.4rem;
  font-weight: 600;
  font-size: var(--fs-small);
  color: var(--ink-900);
}
.counter-note {
  display: block;
  margin-top: 0.25rem;
  font-size: var(--fs-small);
  color: var(--ink-700);
}

/* ── Akış şeridi (site widget) ───────────────────────────────────────────
   Prototipin .flow kuralları koyu bant içindeki üç düğümlü kurgu için yazılmış
   (yarı saydam beyaz zemin, dikey akış). Bu widget genel amaçlı ve açık zeminde
   yaşıyor, bu yüzden kendi sınıflarını taşıyor — prototipin kurallarını
   devralsaydı koyu zemin için seçilmiş renkler beyaz üstünde okunmazdı. */

.flow-chain {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: adim;
}
.flow-node {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.flow-node__label {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 44px;
  padding: 0.5rem 0.95rem;
  background: var(--brand-green-50);
  border: 1px solid var(--brand-green-100);
  border-radius: var(--radius-pill);
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--brand-green-800);
}
.flow-node__label::before {
  counter-increment: adim;
  content: counter(adim);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  background: var(--brand-green-700);
  border-radius: 50%;
  color: var(--on-dark);
  font-size: 0.6694rem;
  font-weight: 700;
}
.flow-node__arrow { color: var(--accent-orange-500); flex-shrink: 0; }
.flow-note {
  margin-top: 1rem;
  font-size: var(--fs-small);
  color: var(--ink-700);
}

/* Görseli olmayan bir hero: metin tek kolona yayılır, boş bir kutu çizilmez. */
.hero__inner--tekkolon { grid-template-columns: minmax(0, 1fr); }

/* ── Çerez onayı (R-09) ──────────────────────────────────────────────────
   Üç düğme de aynı sınıfı taşıyor ve aynı genişlikte duruyor: hiçbiri
   ötekinden daha çağırıcı değil. Reddetmek kabul etmek kadar kolay olmalı. */

/* ── Üst bardaki telefon ──────────────────────────────────────────────
   Numara aranmak için orada: tel: bağlantısı ve 44 px dokunma hedefi. Dar ekranda yazı düşüyor,
   ikon kalıyor — telefonda aramak zaten en olası davranış ve üst barda yazıya yer yok. */
.header-phone {
  display: inline-flex;
  gap: 0.45rem;
  align-items: center;
  min-height: 44px;
  padding: 0 0.5rem;
  color: var(--ink-900);
  font-size: var(--fs-small);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.header-phone:hover,
.header-phone:focus-visible { color: var(--brand-green-700); }
.header-phone svg { flex: none; color: var(--brand-green-600); }

@media (max-width: 68rem) {
  .header-phone__text { display: none; }
}

/* Alt bilgideki iletişim satırları: koyu zeminde, kolonların yanında. */
.site-footer__contact {
  margin: 1rem 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.45rem;
}
.site-footer__contact li {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}
.site-footer__contact svg { flex: none; color: var(--brand-green-300); }
.site-footer__contact a {
  color: var(--on-dark);
  font-size: var(--fs-small);
  text-decoration: none;
}
.site-footer__contact a:hover,
.site-footer__contact a:focus-visible { text-decoration: underline; }

/* ── Giriş ekranı slaytları ───────────────────────────────────────────
   Slaytlar üst üste değil, aynı grid gözünde duruyor: hepsi akışta kaldığı için bandın yüksekliği en
   uzun slayta göre belirleniyor ve slayt değişince sayfa zıplamıyor. Mutlak konumlandırma bunu
   veremezdi — bandın yüksekliği sıfıra düşerdi.

   Görünmeyen slayt DOM'dan çıkmıyor, yalnız görünmez ve tıklanamaz oluyor: betik çalışmazsa ilk slayt
   yine okunur, çünkü .is-current ilk slayta sunucuda yazılıyor. */
.hero-slides { display: grid; }
.hero-slide {
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease;
}
.hero-slide.is-current {
  opacity: 1;
  visibility: visible;
}

.hero-dots {
  display: flex;
  gap: 0.5rem;
  justify-content: center;
  padding-bottom: 1.25rem;
}
.hero-dot {
  width: 44px;
  height: 44px;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
}
/* Dokunma hedefi 44 px, görünen nokta küçük: ikisini ayırmanın yolu düğmenin içine çizmek. */
.hero-dot::before {
  content: '';
  display: block;
  width: 9px;
  height: 9px;
  margin: auto;
  background: var(--ink-300);
  border-radius: 50%;
  transition: background-color 0.15s ease, transform 0.15s ease;
}
.hero-dot:hover::before { background: var(--brand-green-600); }
.hero-dot.is-current::before {
  background: var(--brand-green-700);
  transform: scale(1.25);
}

@media (prefers-reduced-motion: reduce) {
  .hero-slide { transition: none; }
  .hero-dot::before { transition: none; }
}

/* ── WhatsApp düğmesi ─────────────────────────────────────────────────
   Sağ altta sabit. Çerez bandı da orada duruyor, o yüzden bant açıkken düğme yukarı çıkıyor: rızanın
   sorulduğu yeri kapatan bir düğme, kapattığı şey yüzünden kötü.

   Renk WhatsApp'ın kendi paletinden, markanın yeşilinden değil: tanıdık olması işe yarıyor ve ziyaretçi
   düğmenin nereye gittiğini renkten anlıyor. Açık yeşil (#25d366) yerine koyu teal (#128c7e) seçildi,
   çünkü beyaz ikonla kontrastı ölçüldü: açık yeşilde 1,98, yani WCAG'ın grafik öğeler için istediği
   3:1'in altında. Koyu tealde 4,14. */
.whatsapp-fab {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 45;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  color: #fff;
  background: #128c7e;
  border-radius: 50%;
  box-shadow: 0 6px 20px rgb(18 140 126 / 0.38);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.whatsapp-fab:hover,
.whatsapp-fab:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgb(18 140 126 / 0.48);
}

/*
   Çerez bandı sayfadayken düğme hiç çizilmiyor. Önce bandın üstüne kaydırmak denendi ve ölçümde
   tutmadı: bandın yüksekliği 1440 px'te 92, 375 px'te 299 px — sabit bir değer dar ekranda düğmeyi
   sayfanın ortasına atıyor, çakışmayı önleyen değer ise geniş ekranda boşlukta bırakıyor.

   Gizlemek yalnız çakışmayı çözdüğü için değil, sıra doğru olduğu için de iyi: önce rıza sorulur,
   sonra iletişim kanalı açılır. Band bir kez kapandıktan sonra düğme her sayfada duruyor. */
body:has(.cookie-banner) .whatsapp-fab { display: none; }

@media (prefers-reduced-motion: reduce) {
  .whatsapp-fab { transition: none; }
  .whatsapp-fab:hover,
  .whatsapp-fab:focus-visible { transform: none; }
}

.cookie-banner {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 50;
  background: var(--brand-green-900);
  color: var(--on-dark-muted);
  box-shadow: 0 -8px 32px rgba(10, 66, 40, 0.28);
}
.cookie-banner__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  padding-block: 1rem;
}
.cookie-banner__text { flex: 1 1 24rem; }
.cookie-banner__text p { margin: 0; font-size: var(--fs-small); line-height: 1.55; }
.cookie-banner__text strong { color: var(--on-dark); }
.cookie-banner__links { margin-top: 0.4rem !important; }
.cookie-banner__links a { color: var(--on-dark); text-decoration: underline; text-underline-offset: 2px; }
.cookie-banner__links a:hover { color: var(--accent-orange-300); }

.cookie-banner__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}
/* Koyu zeminde beyaz çerçeveli düğme: üçü de aynı ağırlıkta. */
.cookie-banner__actions .btn--outline {
  min-height: 44px;
  background: transparent;
  border-color: rgba(255, 255, 255, 0.45);
  color: var(--on-dark);
}
.cookie-banner__actions .btn--outline:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: var(--on-dark);
}

@media (max-width: 767px) {
  .cookie-banner__actions { width: 100%; }
  .cookie-banner__actions .btn--outline { flex: 1 1 100%; }
}

/* ==========================================================================
   15. Bant yardımcıları

   Prototip bu boşlukları inline style ile veriyordu (style="margin-top:1rem").
   Widget çıktısında inline style kullanmak, panelden gelen bir metnin stil
   taşıması anlamına gelirdi; aynı değerler burada sınıf olarak duruyor.
   ========================================================================== */

.band-lead { margin-top: 1rem; }
.band-action { margin-top: 1.75rem; }
.assurance-head { margin-bottom: 2.5rem; }
.final-cta__lead { margin-top: 1rem; max-width: 34rem; }

/* Sektör kartı: görseli olmayan kayıtta medya kutusu hiç çizilmiyor, kart
   yalnız metinle duruyor ve ızgara bozulmuyor. */
.sector-card:not(:has(.sector-card__media)) .sector-card__body { padding-top: 1.25rem; }

/* ==========================================================================
   16. Bant renklerinin kontrast düzeltmeleri

   Ana sayfa bantları prototipten geldiği gibi kuruldu ve ölçüm üç yerde AA'nın
   altında kaldı. Üçü de küçük punto ve turuncu: tasarımın vurgu rengi açık
   zeminde yeterli kontrast vermiyor.

   Marka turuncusu yerinde kalıyor; yalnız küçük metinde bir ton koyusu
   kullanılıyor. Düğme zeminlerinde ve ikon madalyonlarında renk değişmedi.
   ========================================================================== */

:root {
  /* Küçük metin için AA'yı geçen turuncu: beyaz üzerinde 5,2:1. */
  --accent-orange-700: #9a4a07;
}

/* Akış şeridinin ortadaki beyaz düğümü: "2 · CloudPDKS" etiketi 3,37:1 veriyordu. */
.flow__node--core .flow__label { color: var(--accent-orange-700); }

/* Geçiş süreci kartlarının "Adım 1" rozeti: 2,97:1 veriyordu. */
.assurance-card__step { color: var(--accent-orange-700); }

/* Açık gri zeminli bantta anlatı metni: ink-500 surface-50 üzerinde 4,35:1. */
.section--alt .section-head p,
.section--alt .band-lead { color: var(--ink-700); }

/* ==========================================================================
   17. Detay sayfası

   Prototipte iç sayfalar açık yeşil zeminli bir başlık bandıyla açılıyor
   (design/iletisim.html). .page-hero kuralı prototipten geldi; altındaki
   yerleşim ve yan sütun burada.
   ========================================================================== */

.page-hero__lead {
  max-width: 44rem;
  margin-top: 1rem;
  font-size: var(--fs-lead);
  color: var(--ink-700);
  line-height: 1.6;
}
.page-hero__meta {
  margin-top: 0.75rem;
  font-size: var(--fs-small);
  color: var(--ink-700);
}
.page-hero h1 { max-width: 34ch; }

/* Başlık bandı geldiği için gövdenin kendi üst boşluğu kalkıyor: iki boşluk üst üste
   binince sayfa kendi başlığından kopuyordu. */
.page-hero + .section { padding-top: 2.25rem; }

/* Yan sütun: bölümün öteki sayfaları. */
.aside-title {
  margin-bottom: 0.9rem;
  font-size: var(--fs-body);
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--ink-900);
}
.detail-layout aside a.current {
  color: var(--brand-green-700);
  font-weight: 600;
}
.aside-all {
  margin-top: 0.75rem;
  padding-top: 0.75rem !important;
  border-top: 1px solid var(--ink-200);
  color: var(--brand-green-700) !important;
  font-weight: 600;
}

/* Blog yazısındaki görsel listesi. */
.gallery {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 12rem), 1fr));
  margin: 1.5rem 0 0;
  padding: 0;
  list-style: none;
}
.gallery img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-sm);
}

/* Iletisim sayfasinin iki ek sinifi: form notu ve iletisim karti satiri.
   Prototip ikisini de inline style ile veriyordu. */
.form-note { margin-top: 0.75rem; margin-bottom: 2rem; color: var(--ink-700); font-size: var(--fs-small); }
.contact-list__row { display: flex; gap: 0.75rem; }
.contact-card p { margin-top: 0.75rem; color: var(--ink-700); font-size: var(--fs-small); line-height: 1.6; }

/* Kirinti yolu artik acik yesil zeminli baslik bandinin icinde: ink-500 orada
   4,33:1 veriyordu, AA 4,5 istiyor (olculdu). Beyaz zeminde kalan kirinti
   yollari icin ozgun renk degismiyor. */
.page-hero .breadcrumb,
.page-hero .breadcrumb a { color: var(--ink-700); }
.page-hero .breadcrumb li:not(:last-child)::after { color: var(--ink-500); }

/* ── İndirmeler modülü ───────────────────────────────────────────────────
   Modül App_Addons'tan DLL olarak kuruluyor ve statik varlık taşıyamıyor;
   HTML'ini sabit sınıf adlarıyla basıyor, görünüşü site veriyor. Düğmeler
   sitenin .btn ölçüleriyle aynı (44px dokunma hedefi, radius-sm). Seçiciler
   a.indirme-dugme: sayfa gövdesinin .prose a kuralını (0,1,1) yenmek için. */
.indirme-listesi { display: grid; gap: 0.75rem; margin: 0; padding: 0; list-style: none; }
.indirme {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.5rem 1rem;
  align-items: center;
  padding: 1rem 1.25rem;
  background: var(--surface-0);
  border: 1px solid var(--ink-200);
  border-radius: var(--radius-md);
}
.indirme-bilgi { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.indirme-etiket { color: var(--ink-900); font-size: var(--fs-body); }
.indirme-meta { color: var(--ink-500); font-size: var(--fs-small); }
.indirme-eylem { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; justify-content: flex-end; }
.indirme-dugme,
a.indirme-dugme {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 44px;
  padding: 0.7rem 1.2rem;
  border: 1px solid var(--ink-300);
  border-radius: var(--radius-sm);
  background: var(--surface-0);
  color: var(--ink-900);
  font-size: var(--fs-body);
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
a.indirme-dugme:hover { border-color: var(--ink-500); text-decoration: none; }
a.indirme-dugme--ana { background: var(--accent-orange-500); border-color: transparent; color: #fff; }
a.indirme-dugme--ana:hover { background: var(--accent-orange-600); }
.indirme-hazirlaniyor { color: var(--ink-500); border-style: dashed; cursor: default; }
.indirme-hazirlaniyor:hover { border-color: var(--ink-300); }
.indirme-komut {
  padding: 0.5rem 0.75rem;
  background: var(--surface-50);
  border: 1px solid var(--ink-200);
  border-radius: var(--radius-sm);
  font-size: var(--fs-small);
  user-select: all;
}
.indirme-sha { grid-column: 1 / -1; color: var(--ink-500); font-size: var(--fs-small); }
.indirme-sha summary { cursor: pointer; width: max-content; }
.indirme-sha code { display: block; margin-top: 0.35rem; overflow-wrap: anywhere; user-select: all; }

.surum-notu { padding-block: 0.75rem; }
.surum-notu h3 { margin: 0 0 0.5rem; font-size: var(--fs-h3); }
.surum-notu time { margin-left: 0.4rem; color: var(--ink-500); font-size: var(--fs-small); font-weight: 400; }
.surum-notu ul { margin: 0.25rem 0 0.75rem; padding-left: 1.2rem; }
.surum-notu :is(h4, h5, h6) { margin: 0.75rem 0 0.25rem; font-size: var(--fs-body); }
.surum-gecmisi { margin-top: 0.75rem; border-top: 1px solid var(--ink-200); padding-top: 0.75rem; }
.surum-gecmisi summary { cursor: pointer; font-weight: 600; color: var(--brand-green-700); }

@media (max-width: 767px) {
  .indirme { grid-template-columns: 1fr; }
  .indirme-eylem { justify-content: flex-start; }
}

/* ── Liste süzgeci ve sayfalayıcı ────────────────────────────────────────
   Platformun Listing görünümü bunları zaten basıyor; sitede bugüne kadar
   kategorili ya da çok sayfalı liste olmadığı için stili yoktu. Blog
   kategorileri (Kategoriler modülü) ile ikisi de görünür oldu. */
.listing-filters,
.listing-sorts,
.listing-pager {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
}
.listing-filters a,
.listing-sorts a,
.listing-pager a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0.45rem 1rem;
  border: 1px solid var(--ink-300);
  border-radius: var(--radius-pill);
  background: var(--surface-0);
  color: var(--ink-700);
  font-size: var(--fs-small);
  font-weight: 600;
  text-decoration: none;
}
.listing-filters a:hover,
.listing-sorts a:hover,
.listing-pager a:hover { border-color: var(--brand-green-700); color: var(--brand-green-700); }
.listing-filters a.current,
.listing-sorts a.current,
.listing-pager a.current { background: var(--brand-green-700); border-color: var(--brand-green-700); color: #fff; }
.listing-pager { justify-content: center; margin: 2rem 0 0; }
.listing-pager a { min-width: 40px; justify-content: center; padding-inline: 0.75rem; }

/* ── Hesap açılışı (docs/16, docs/17) ─────────────────────────────────────────────────────── */
.signup__layout {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
  gap: 3rem;
  align-items: start;
}
.signup__narrow { max-width: 40rem; }
.signup__aside {
  padding: 1.5rem;
  background: var(--brand-green-50);
  border: 1px solid var(--brand-green-100);
  border-radius: var(--radius-lg);
}
.signup__aside h2 { margin-top: 0; font-size: 1.25rem; }
.signup__steps { margin: 0 0 1rem; padding-left: 1.25rem; display: grid; gap: 0.75rem; }
.signup__ok { margin: 0.25rem 0 0; color: var(--brand-green-700); font-weight: 600; }
.signup__resend { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; margin-top: 1.5rem; }
.signup__resend form { margin: 0; }
.notice--error { border-color: #d14343; background: #fdf0f0; color: #8a1f1f; }
.btn--sm { padding: 0.45rem 0.9rem; font-size: var(--fs-small); }
@media (max-width: 1100px) {
  .signup__layout { grid-template-columns: 1fr; gap: 2rem; }
}
.hint--warn { display: block; margin-top: 0.35rem; padding: 0.4rem 0.6rem; border-left: 3px solid var(--accent-orange-500); background: var(--accent-orange-100); color: var(--ink-900); border-radius: 4px; }

/* Hesap açılışı bekleme ekranı (Views/Signup/Verify.cshtml) */
.signup-wait-open, .signup-wait-open body { overflow: hidden; }
.signup-wait {
  position: fixed; inset: 0; z-index: 10000;
  display: flex; align-items: center; justify-content: center; padding: 16px;
  background: rgba(15, 81, 50, 0.92);
  backdrop-filter: blur(2px);
}
.signup-wait[hidden] { display: none; }
.signup-wait__box {
  width: 100%; max-width: 30rem; padding: 2rem 1.75rem; text-align: center;
  background: #fff; border-radius: 16px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
}
.signup-wait__spinner {
  display: inline-block; width: 56px; height: 56px; margin-bottom: 1rem;
  border: 5px solid var(--brand-green-100, #dcefe4); border-top-color: var(--accent-orange-500, #f47b20);
  border-radius: 50%; animation: signup-wait-spin 0.9s linear infinite;
}
.signup-wait__title { margin: 0 0 0.5rem; font-size: 1.35rem; color: var(--brand-green-700, #0f5132); }
.signup-wait__text { margin: 0 0 1.25rem; color: var(--ink-700, #3d4a43); line-height: 1.55; }
.signup-wait__bar { height: 8px; border-radius: 99px; background: #e6eee9; overflow: hidden; }
.signup-wait__bar span { display: block; height: 100%; width: 0; background: var(--brand-green-700, #0f5132); transition: width 0.25s linear; }
@keyframes signup-wait-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .signup-wait__spinner { animation-duration: 2.5s; }
  .signup-wait__bar span { transition: none; }
}
.signup-wait__spinner[hidden], .signup-wait__text[hidden] { display: none; }
#signup-wait-queued { margin: 1rem 0 0; }
.signup-wait__box .btn[hidden] { display: none; }
#signup-wait-ok { margin-top: 1.25rem; }