/* ==========================================================================
   Öz Anadolu Teknik - tema stil katmanı
   oat-theme.css
   --------------------------------------------------------------------------
   Katman sırası:
     1. Token'lar          (marka paketindeki tokens.css ile birebir)
     2. Reset / temel
     3. Layout             .oat-container / .oat-section / .oat-grid
     4. Tipografi bloğu    .oat-eyebrow / .oat-sec-*
     5. Bileşenler         .oat-btn / .oat-card / .oat-badge / .oat-form ...
     6. Bölümler           header, hero, hizmetler, süreç, sss, footer ...
     7. Yardımcılar        .oat-u-*
     8. Duyarlı kırılımlar
   Kural: yeni bir sayfada aynı görünümü istiyorsan aynı class'ı kullan.
   Sayfaya özel istisna yazma; gerekiyorsa buraya varyant class'ı ekle.
   ========================================================================== */

/* 1. TOKEN'LAR ============================================================ */
:root {
  /* renk */
  --brand-charcoal: #20252A;
  --brand-charcoal-2: #2B3238;
  --brand-orange: #F26A21;
  --brand-orange-dark: #D95412;
  --brand-orange-text: #B8430C;
  --brand-orange-tint: #FDEEE5;
  --brand-cream: #F2F3F5;
  --brand-white: #FFFFFF;
  --brand-text-muted: #667078;
  --brand-text-on-dark: #9AA4AC;
  --brand-border: #DDE1E4;
  --brand-border-strong: #C3CBD1;
  --brand-success: #17784A;
  --brand-success-tint: #E8F3ED;
  --brand-error: #B3261E;
  --brand-error-tint: #FBEAE8;
  --brand-warning: #8F5A00;
  --brand-warning-tint: #FDF3E0;
  --brand-info: #1A6396;
  --brand-info-tint: #E9F0F7;
  --brand-whatsapp: #1FA855;

  /* sprite / inline svg renk değişkenleri */
  --oat-dark: var(--brand-charcoal);
  --oat-orange: var(--brand-orange);

  /* boşluk (4px tabanlı) */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px;
  --space-9: 96px; --space-10: 128px;

  /* köşe */
  --radius-sm: 6px; --radius-md: 8px; --radius-lg: 12px; --radius-pill: 999px;

  /* gölge */
  --shadow-sm: 0 1px 2px rgba(32,37,42,.05);
  --shadow-md: 0 4px 14px rgba(32,37,42,.06);
  --shadow-lg: 0 10px 28px rgba(32,37,42,.08);
  --shadow-orange: none;

  /* tipografi */
  --font-sans: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fs-display: 64px;  --lh-display: 1.05;  --fw-display: 700;  --ls-display: -0.02em;
  --fs-h1: 56px;  --lh-h1: 1.1;  --fw-h1: 700;  --ls-h1: -0.01em;
  --fs-h2: 40px;  --lh-h2: 1.2;  --fw-h2: 700;  --ls-h2: -0.01em;
  --fs-h3: 24px;  --lh-h3: 1.3;  --fw-h3: 600;  --ls-h3: 0;
  --fs-h4: 20px;  --lh-h4: 1.4;  --fw-h4: 600;  --ls-h4: 0;
  --fs-body-lg: 18px;  --lh-body-lg: 1.7;
  --fs-body: 16px;  --lh-body: 1.7;
  --fs-small: 14px;  --lh-small: 1.6;
  --fs-eyebrow: 13px; --lh-eyebrow: 1.4; --ls-eyebrow: 0.06em;
  --fs-caption: 12px; --lh-caption: 1.5; --ls-caption: 0.02em;

  /* layout — Panelix: clamp(... 1680px) */
  --container: 1680px;
  --gutter: 32px;
  --section-y: 96px;
  --header-h: 84px;
  --topbar-h: 40px;
}

@media (max-width: 768px) {
  :root {
    --fs-display: 38px; --fs-h1: 36px; --fs-h2: 30px; --fs-h3: 22px; --fs-h4: 18px;
    --fs-body-lg: 17px;
    --section-y: 64px; --gutter: 16px; --header-h: 64px;
  }
}

/* 2. RESET / TEMEL ======================================================== */
*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--brand-white);
  color: var(--brand-charcoal);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-wrap: pretty;
  overflow-x: hidden;
}

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

h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: 700; }
h1 { font-size: var(--fs-h1); line-height: var(--lh-h1); letter-spacing: var(--ls-h1); }
h2 { font-size: var(--fs-h2); line-height: var(--lh-h2); letter-spacing: var(--ls-h2); }
h3 { font-size: var(--fs-h3); line-height: var(--lh-h3); font-weight: 600; }
h4 { font-size: var(--fs-h4); line-height: var(--lh-h4); font-weight: 600; }
p  { margin: 0 0 var(--space-4); }
p:last-child { margin-bottom: 0; }
ul, ol { margin: 0; padding: 0; }
li { list-style: none; }

a { color: var(--brand-orange-text); text-decoration: none; transition: color .15s ease; }
a:hover { color: var(--brand-orange); }

button { font-family: inherit; }

:focus-visible {
  outline: 3px solid var(--brand-orange);
  outline-offset: 2px;
  border-radius: 4px;
}

::selection { background: var(--brand-orange); color: #fff; }

.oat-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
  pointer-events: none;
}

.oat-skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--brand-orange); color: #fff; padding: 12px 20px;
  font-weight: 600; border-radius: 0 0 var(--radius-sm) 0;
}
.oat-skip:focus { left: 0; color: #fff; }

/* 3. LAYOUT =============================================================== */
.oat-container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.oat-container--narrow { max-width: 920px; }

.oat-section { padding-block: var(--section-y); position: relative; }
.oat-section--tight { padding-block: calc(var(--section-y) * .62); }
.oat-section--flush-top { padding-top: 0; }
.oat-section--cream { background: var(--brand-cream); }
.oat-section--dark { background: var(--brand-charcoal); color: #fff; }
.oat-section--dark p, .oat-section--dark .oat-sec-lede { color: var(--brand-text-on-dark); }
.oat-section--dark .oat-eyebrow { color: var(--brand-orange); }

/* köşegen kesim kaldırıldı — fazla “şablon site” hissi veriyordu */
.oat-section--notch { clip-path: none; }

.oat-grid { display: grid; gap: var(--space-5); }
.oat-grid--2 { grid-template-columns: repeat(2, 1fr); }
.oat-grid--3 { grid-template-columns: repeat(3, 1fr); }
.oat-grid--4 { grid-template-columns: repeat(4, 1fr); }
.oat-grid--auto { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.oat-grid--split { grid-template-columns: 1.05fr .95fr; gap: var(--space-8); align-items: center; }

.oat-row { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
.oat-row--between { justify-content: space-between; }
.oat-stack { display: flex; flex-direction: column; gap: var(--space-4); }

/* 4. TİPOGRAFİ BLOĞU ===================================================== */
.oat-eyebrow {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-size: var(--fs-eyebrow); font-weight: 600; letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase; color: var(--brand-orange-text);
  margin: 0 0 var(--space-3);
}

.oat-sec-head { max-width: 820px; margin-bottom: var(--space-7); }
.oat-sec-head--center { margin-inline: auto; text-align: center; }
.oat-sec-head--center .oat-eyebrow { justify-content: center; }
.oat-sec-title { font-size: var(--fs-h2); line-height: var(--lh-h2); letter-spacing: var(--ls-h2); margin: 0; }
.oat-sec-title em { font-style: normal; color: var(--brand-orange); }
.oat-sec-lede { color: var(--brand-text-muted); font-size: var(--fs-body-lg); margin: var(--space-4) 0 0; }

.oat-headrow {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--space-5); margin-bottom: var(--space-7); flex-wrap: wrap;
}
.oat-headrow .oat-sec-head { margin-bottom: 0; }

.oat-prose { max-width: 72ch; color: var(--brand-text-muted); font-size: var(--fs-body); line-height: var(--lh-body); }
.oat-prose > *:first-child { margin-top: 0; }
.oat-prose h2, .oat-prose h3, .oat-prose h4 {
  color: var(--brand-charcoal); font-weight: 700; letter-spacing: -.01em;
}
.oat-prose h2 { font-size: var(--fs-h3); margin: var(--space-7) 0 var(--space-4); }
.oat-prose h3 { font-size: var(--fs-h4); margin: var(--space-6) 0 var(--space-3); }
.oat-prose h4 { font-size: var(--fs-body); margin: var(--space-5) 0 var(--space-2); }
.oat-prose p { margin: 0 0 var(--space-4); }
.oat-prose a { color: var(--brand-orange-text); text-decoration: underline; text-underline-offset: 2px; }
.oat-prose a:hover { color: var(--brand-orange); }
.oat-prose ul, .oat-prose ol { display: grid; gap: var(--space-2); margin: 0 0 var(--space-4); padding: 0; }
.oat-prose ul li { position: relative; padding-left: 26px; list-style: none; }
.oat-prose ul li::before {
  content: ""; position: absolute; left: 6px; top: 11px;
  width: 7px; height: 7px; border-radius: 2px; background: var(--brand-orange);
}
.oat-prose ol { padding-left: 22px; }
.oat-prose ol li { padding-left: 6px; }
.oat-prose blockquote {
  margin: var(--space-5) 0; padding: var(--space-4) var(--space-5);
  border-left: 3px solid var(--brand-orange);
  background: var(--brand-cream); border-radius: 0 var(--radius-md) var(--radius-md) 0;
  color: var(--brand-charcoal); font-weight: 500;
}
.oat-prose figure { margin: var(--space-6) 0; }
.oat-prose figure img { width: 100%; border-radius: var(--radius-md); }
.oat-prose figcaption { margin-top: var(--space-2); font-size: var(--fs-caption); color: var(--brand-text-muted); }
.oat-prose table { width: 100%; border-collapse: collapse; margin: var(--space-5) 0; font-size: var(--fs-small); }
.oat-prose th, .oat-prose td { padding: 12px 14px; border: 1px solid var(--brand-border); text-align: left; }
.oat-prose th { background: var(--brand-cream); color: var(--brand-charcoal); font-weight: 600; }

.oat-list { display: grid; gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.oat-list__item {
  display: flex; gap: var(--space-3); align-items: flex-start;
  padding: var(--space-4); background: #fff;
  border: 1px solid var(--brand-border); border-radius: var(--radius-md);
}
.oat-list__mark {
  width: 28px; height: 28px; flex: none; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--brand-orange-tint); color: var(--brand-orange-text);
  font-size: 14px; font-weight: 700; line-height: 1;
}
.oat-list--check .oat-list__mark { background: var(--brand-success-tint); color: var(--brand-success); }
.oat-list__item b { display: block; color: var(--brand-charcoal); margin-bottom: 2px; }
.oat-list__item span { color: var(--brand-text-muted); font-size: var(--fs-small); }

.oat-layout { display: grid; gap: var(--space-7); }
.oat-layout--content-aside { grid-template-columns: minmax(0, 1.4fr) minmax(260px, .7fr); align-items: start; }
.oat-layout--narrow { max-width: 820px; margin-inline: auto; }
.oat-aside {
  position: sticky; top: calc(var(--header-h) + var(--space-5));
  display: grid; gap: var(--space-5);
}
.oat-aside__card {
  background: #fff; border: 1px solid var(--brand-border);
  border-radius: var(--radius-lg); padding: var(--space-5);
  box-shadow: var(--shadow-sm);
}
.oat-aside__title {
  margin: 0 0 var(--space-4); font-size: var(--fs-caption);
  letter-spacing: var(--ls-eyebrow); text-transform: uppercase; font-weight: 700;
}

.oat-entry__meta {
  display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center;
  margin: var(--space-4) 0 0; color: var(--brand-text-on-dark); font-size: var(--fs-small);
}
.oat-entry__cover { margin-top: calc(var(--section-y) * -.35); margin-bottom: var(--space-7); }
.oat-entry__cover .oat-media { border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); }

.oat-map {
  border-radius: var(--radius-lg); overflow: hidden;
  border: 1px solid var(--brand-border); background: var(--brand-cream);
  aspect-ratio: 16 / 10;
}
.oat-map iframe { width: 100%; height: 100%; border: 0; display: block; }

.oat-pager {
  display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2);
  margin-top: var(--space-8);
}
.oat-pager__item {
  min-width: 44px; height: 44px; padding-inline: 14px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--brand-border); border-radius: var(--radius-sm);
  background: #fff; color: var(--brand-charcoal); font-weight: 600; font-size: var(--fs-small);
}
.oat-pager__item:hover { border-color: var(--brand-orange); color: var(--brand-orange-text); }
.oat-pager__item.is-current {
  background: var(--brand-orange); border-color: var(--brand-orange); color: #fff;
}
.oat-pager__item.is-disabled { opacity: .4; pointer-events: none; }

.oat-channels {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4);
  margin-bottom: var(--space-8);
}
.oat-channel {
  display: flex; flex-direction: column; gap: var(--space-3);
  padding: var(--space-5); border-radius: var(--radius-lg);
  background: #fff; border: 1px solid var(--brand-border);
  box-shadow: none; transition: border-color .2s ease;
}
.oat-channel:hover { transform: none; box-shadow: none; border-color: var(--brand-orange); }
.oat-channel__ic {
  width: 48px; height: 48px; border-radius: var(--radius-md);
  display: grid; place-items: center;
  background: var(--brand-orange-tint); color: var(--brand-orange);
}
.oat-channel__ic .oat-icon { width: 24px; height: 24px; }
.oat-channel__title { margin: 0; font-size: var(--fs-h4); color: var(--brand-charcoal); }
.oat-channel__text { margin: 0; flex: 1; color: var(--brand-text-muted); font-size: var(--fs-small); }

.oat-legal__meta {
  display: flex; flex-wrap: wrap; gap: var(--space-4);
  margin: var(--space-4) 0 0; color: var(--brand-text-on-dark); font-size: var(--fs-small);
}
.oat-legal__note {
  margin-bottom: var(--space-6); padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-md); background: var(--brand-warning-tint);
  color: var(--brand-warning); font-size: var(--fs-small); font-weight: 500;
}
.oat-related { display: grid; gap: var(--space-5); }

/* 5. BİLEŞENLER =========================================================== */

/* 5.0 Carousel ----------------------------------------------------------- */
.oat-carousel { position: relative; }
.oat-carousel__nav { display: none; }

/* 5.1 İkon --------------------------------------------------------------- */
.oat-icon {
  width: 20px; height: 20px; flex: none;
  fill: none; stroke: currentColor;
  stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round;
}
.oat-icon--sm { width: 16px; height: 16px; }
.oat-icon--lg { width: 28px; height: 28px; }
.oat-icon--xl { width: 36px; height: 36px; }
/* dolgu kullanan sosyal ikonlar */
.oat-icon:has(use[href="#ic-whatsapp"]),
.oat-icon:has(use[href="#ic-facebook"]),
.oat-icon:has(use[href="#ic-youtube"]) {
  fill: currentColor; stroke: none;
}

/* 5.2 Buton -------------------------------------------------------------- */
.oat-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: 48px; padding-inline: var(--space-5);
  border: 1px solid transparent; border-radius: var(--radius-sm);
  font: 600 16px/1 var(--font-sans); letter-spacing: .01em;
  cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background .15s ease, border-color .15s ease, color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.oat-btn:active { transform: translateY(1px); }
.oat-btn .oat-icon { width: 20px; height: 20px; }

.oat-btn--primary {
  background: var(--brand-orange); border-color: var(--brand-orange);
  color: #fff; box-shadow: none;
}
.oat-btn--primary:hover { background: var(--brand-orange-dark); border-color: var(--brand-orange-dark); color: #fff; }

.oat-btn--secondary { background: var(--brand-charcoal); border-color: var(--brand-charcoal); color: #fff; }
.oat-btn--secondary:hover { background: #161A1E; color: #fff; }

.oat-btn--outline { background: transparent; border-color: var(--brand-charcoal); color: var(--brand-charcoal); }
.oat-btn--outline:hover { background: var(--brand-charcoal); color: #fff; }

/* koyu zeminde ikincil buton */
.oat-btn--onDark { background: transparent; border-color: rgba(255,255,255,.45); color: #fff; }
.oat-btn--onDark:hover { background: #fff; border-color: #fff; color: var(--brand-charcoal); }

.oat-btn--whatsapp { background: var(--brand-whatsapp); border-color: var(--brand-whatsapp); color: #fff; }
.oat-btn--whatsapp:hover { background: #178443; border-color: #178443; color: #fff; }

.oat-btn--ghost { background: transparent; color: var(--brand-orange-text); padding-inline: var(--space-2); box-shadow: none; }
.oat-btn--ghost:hover { color: var(--brand-orange); gap: var(--space-3); }

.oat-btn--sm { min-height: 40px; font-size: 14px; padding-inline: var(--space-4); }
.oat-btn--lg { min-height: 56px; font-size: 17px; padding-inline: var(--space-6); }
.oat-btn--block { width: 100%; }
.oat-btn--pill { border-radius: var(--radius-pill); }
.oat-btn[disabled], .oat-btn.is-loading { opacity: .45; pointer-events: none; }

/* 5.3 Badge / chip ------------------------------------------------------- */
.oat-badge {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: 5px 10px; border-radius: var(--radius-sm);
  background: var(--brand-orange-tint); color: var(--brand-orange-text);
  font-size: var(--fs-caption); font-weight: 600; letter-spacing: var(--ls-caption);
}
.oat-badge--dark { background: rgba(255,255,255,.1); color: #fff; }
.oat-badge--success { background: var(--brand-success-tint); color: var(--brand-success); }
.oat-badge--outline { background: transparent; border: 1px solid var(--brand-border); color: var(--brand-text-muted); }

.oat-chip {
  display: inline-flex; align-items: center; gap: var(--space-2);
  min-height: 44px; padding: 0 var(--space-4);
  border: 1px solid var(--brand-border); border-radius: var(--radius-sm);
  background: #fff; color: var(--brand-charcoal);
  font-size: var(--fs-small); font-weight: 500;
  transition: .15s ease;
}
.oat-chip[aria-current="page"],
.oat-chip.is-current {
  background: var(--brand-orange); border-color: var(--brand-orange); color: #fff;
}
.oat-chip[aria-current="page"] .oat-icon,
.oat-chip.is-current .oat-icon { color: #fff; }
.oat-chip:hover {
  border-color: var(--brand-orange); color: var(--brand-orange-text);
  background: var(--brand-orange-tint);
}
.oat-chip .oat-icon { color: var(--brand-orange); }
.oat-chip-list { display: flex; flex-wrap: wrap; gap: var(--space-2); }

/* 5.4 Kart --------------------------------------------------------------- */
.oat-card {
  background: #fff; border: 1px solid var(--brand-border); border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: none;
  transition: border-color .2s ease, background .2s ease;
}
.oat-card--hover:hover { transform: none; box-shadow: none; border-color: var(--brand-border-strong); }
.oat-card--flat { box-shadow: none; }
.oat-card--dark { background: var(--brand-charcoal-2); border-color: rgba(255,255,255,.09); color: #fff; box-shadow: none; }
.oat-card--dark .oat-card__text { color: var(--brand-text-on-dark); }

.oat-card__ic {
  width: 52px; height: 52px; border-radius: var(--radius-md);
  background: var(--brand-orange-tint); color: var(--brand-orange-text);
  display: grid; place-items: center; margin-bottom: var(--space-5);
  transition: .2s ease;
}
.oat-card__ic .oat-icon { width: 26px; height: 26px; }
.oat-card--hover:hover .oat-card__ic { background: var(--brand-orange); color: #fff; }

.oat-card__title { font-size: var(--fs-h4); font-weight: 600; margin: 0 0 var(--space-2); }
.oat-card__meta {
  margin: 0 0 var(--space-2);
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--brand-orange-text);
  letter-spacing: .01em;
}
.oat-card__text { color: var(--brand-text-muted); font-size: var(--fs-small); margin: 0 0 var(--space-5); }
.oat-card__link {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-size: var(--fs-small); font-weight: 600; color: var(--brand-orange-text);
}
.oat-card__link:hover { gap: var(--space-3); }
.oat-card__foot { border-top: 1px solid var(--brand-border); margin-top: var(--space-5); padding-top: var(--space-4); }

/* hizmet kartı: üstte ince turuncu şerit */
.oat-card--service { position: relative; overflow: hidden; }
.oat-card--service::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 3px;
  background: var(--brand-orange); transform: scaleX(0); transform-origin: left;
  transition: transform .25s ease;
}
.oat-card--service:hover::before { transform: scaleX(1); }

/* medya kartı (proje / galeri / blog) */
.oat-card--media { padding: 0; overflow: hidden; }
.oat-card--media .oat-card__body { padding: var(--space-5) var(--space-5) var(--space-6); }
.oat-card--media .oat-card__title { font-size: var(--fs-h4); }

.oat-media { position: relative; overflow: hidden; background: var(--brand-cream); }
.oat-media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(32,37,42,0) 45%, rgba(32,37,42,.72));
  opacity: 0; transition: opacity .25s ease;
}
.oat-media--hover:hover::after { opacity: 1; }
.oat-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.oat-media--hover:hover img { transform: scale(1.05); }
.oat-media--16x9 { aspect-ratio: 16 / 9; }
.oat-media--4x3 { aspect-ratio: 4 / 3; }
.oat-media--1x1 { aspect-ratio: 1 / 1; }
.oat-media--3x4 { aspect-ratio: 3 / 4; }
.oat-media__tag {
  position: absolute; z-index: 2; left: var(--space-4); top: var(--space-4);
  background: var(--brand-orange); color: #fff;
  padding: 6px 12px; border-radius: var(--radius-sm);
  font-size: var(--fs-caption); font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
}

/* 5.5 Form --------------------------------------------------------------- */
.oat-form { display: grid; gap: var(--space-4); }
.oat-form__row { display: grid; gap: var(--space-4); grid-template-columns: 1fr 1fr; }

.oat-field { display: block; }
.oat-label { display: block; font-size: var(--fs-small); font-weight: 600; margin-bottom: var(--space-2); }
.oat-label span { color: var(--brand-orange-text); }

.oat-input, .oat-select, .oat-textarea {
  width: 100%; min-height: 48px; padding: 12px var(--space-4);
  border: 1px solid var(--brand-border); border-radius: var(--radius-sm);
  background: #fff; color: var(--brand-charcoal);
  font: 400 16px/1.5 var(--font-sans);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.oat-textarea { min-height: 120px; resize: vertical; }
.oat-select {
  appearance: none;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23667078' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; background-size: 18px;
  padding-right: 42px;
}
.oat-input::placeholder, .oat-textarea::placeholder { color: #9AA4AC; }
.oat-input:hover, .oat-select:hover, .oat-textarea:hover { border-color: var(--brand-border-strong); }
.oat-input:focus, .oat-select:focus, .oat-textarea:focus {
  outline: none; border-color: var(--brand-orange);
  box-shadow: 0 0 0 3px rgba(242,106,33,.18);
}

.oat-hint { font-size: var(--fs-small); color: var(--brand-text-muted); margin: var(--space-2) 0 0; }
.oat-field.is-error .oat-input,
.oat-field.is-error .oat-select,
.oat-field.is-error .oat-textarea { border-color: var(--brand-error); background: var(--brand-error-tint); }
.oat-field.is-error .oat-hint { color: var(--brand-error); font-weight: 500; }

.oat-check {
  display: flex; gap: var(--space-3); align-items: flex-start;
  font-size: var(--fs-small); color: var(--brand-text-muted); cursor: pointer;
}
.oat-check input {
  width: 20px; height: 20px; margin: 2px 0 0; flex: none;
  accent-color: var(--brand-orange); cursor: pointer;
}
.oat-check.is-error { color: var(--brand-error); }

.oat-note {
  border-left: 4px solid var(--brand-orange); background: #fff;
  padding: var(--space-4) var(--space-5); border-radius: 0 var(--radius-md) var(--radius-md) 0;
  box-shadow: var(--shadow-sm);
}
.oat-note--success { border-left-color: var(--brand-success); background: var(--brand-success-tint); }
.oat-note--error { border-left-color: var(--brand-error); background: var(--brand-error-tint); }
.oat-note__title { font-size: var(--fs-body); font-weight: 700; margin: 0 0 var(--space-1); }
.oat-note p { margin: 0; color: var(--brand-text-muted); font-size: var(--fs-small); }
.oat-note[hidden] { display: none; }

/* 6. BÖLÜMLER ============================================================= */

/* 6.1 Topbar ------------------------------------------------------------- */
.oat-topbar {
  background: #171B1F; color: var(--brand-text-on-dark);
  font-size: var(--fs-small); border-bottom: 1px solid rgba(255,255,255,.07);
}
.oat-topbar__inner {
  min-height: var(--topbar-h);
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-5);
}
.oat-topbar__list { display: flex; align-items: center; gap: var(--space-5); flex-wrap: wrap; }
.oat-topbar__item { display: inline-flex; align-items: center; gap: var(--space-2); color: inherit; }
.oat-topbar__item .oat-icon { width: 16px; height: 16px; color: var(--brand-orange); }
a.oat-topbar__item:hover { color: #fff; }
.oat-topbar__note { display: inline-flex; align-items: center; gap: var(--space-2); }
.oat-topbar__dot {
  width: 8px; height: 8px; border-radius: 50%; background: #35C46B;
  box-shadow: 0 0 0 3px rgba(53,196,107,.22);
}

/* 6.2 Header ------------------------------------------------------------- */
.oat-header {
  position: sticky; top: 0; z-index: 90;
  background: var(--brand-charcoal); color: #fff;
  border-bottom: 1px solid transparent;
  transition:
    background .35s ease,
    box-shadow .35s ease,
    color .35s ease,
    border-color .35s ease;
}
.oat-header.is-stuck {
  background: var(--brand-white);
  color: var(--brand-charcoal);
  border-bottom-color: var(--brand-border);
  box-shadow: 0 10px 30px rgba(32, 37, 42, .08);
}
.oat-header__inner {
  min-height: var(--header-h);
  display: flex; align-items: center; gap: var(--space-5);
}
.oat-logo { display: flex; align-items: center; flex: none; position: relative; }
.oat-logo svg, .oat-logo img { height: 42px; width: auto; }
.oat-logo__on-light { display: none; }
.oat-header.is-stuck .oat-logo__on-dark { display: none; }
.oat-header.is-stuck .oat-logo__on-light { display: block; }
.oat-logo--footer svg, .oat-logo--footer img { height: 54px; }

.oat-nav { margin-left: auto; min-width: 0; align-self: stretch; display: flex; }
.oat-nav__list { display: flex; align-items: stretch; gap: 0; flex-wrap: nowrap; height: 100%; }
.oat-nav__item { position: relative; display: flex; align-items: center; }
.oat-nav__link {
  display: inline-flex; align-items: center; gap: 6px;
  height: 44px; padding: 0 9px; border-radius: var(--radius-sm);
  color: #fff; font-size: 15px; font-weight: 500; white-space: nowrap;
  transition: color .35s ease;
}
.oat-nav__link:hover { color: var(--brand-orange); }
.oat-nav__item.is-current > .oat-nav__link { color: var(--brand-orange); font-weight: 600; }
.oat-header.is-stuck .oat-nav__link { color: var(--brand-charcoal); }
.oat-header.is-stuck .oat-nav__link:hover,
.oat-header.is-stuck .oat-nav__item.is-current > .oat-nav__link { color: var(--brand-orange); }
.oat-nav__caret { width: 14px; height: 14px; opacity: .7; transition: transform .2s ease; }
.oat-nav__item:hover .oat-nav__caret { transform: rotate(180deg); }

.oat-nav__sub {
  position: absolute; left: 0; top: calc(100% + 10px); min-width: 268px; z-index: 5;
  background: #fff; border: 1px solid var(--brand-border);
  border-radius: var(--radius-md); box-shadow: var(--shadow-lg);
  padding: var(--space-2);
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
}
/* navbar ile kutu arasındaki boşlukta imleç kaybolmasın diye köprü */
.oat-nav__sub::before {
  content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px;
}
.oat-nav__item:hover > .oat-nav__sub,
.oat-nav__item:focus-within > .oat-nav__sub { opacity: 1; visibility: visible; transform: translateY(0); }
.oat-nav__sub a {
  display: block; padding: 10px var(--space-3); border-radius: var(--radius-sm);
  color: var(--brand-charcoal); font-size: var(--fs-small); font-weight: 500;
}
.oat-nav__sub a:hover { background: var(--brand-orange-tint); color: var(--brand-orange-text); }

.oat-header__cta { display: flex; align-items: center; gap: var(--space-4); flex: none; }
.oat-header__phone {
  display: inline-flex; align-items: center; gap: var(--space-3);
  color: #fff; font-weight: 600;
  transition: color .35s ease;
}
.oat-header__phone .oat-icon { color: var(--brand-orange); }
.oat-header__phone small {
  display: block; font-size: 11px; font-weight: 500; letter-spacing: .1em;
  text-transform: uppercase; color: var(--brand-text-on-dark);
  transition: color .35s ease;
}
.oat-header.is-stuck .oat-header__phone { color: var(--brand-charcoal); }
.oat-header.is-stuck .oat-header__phone small { color: var(--brand-text-muted); }

.oat-burger {
  display: none; width: 44px; height: 44px; margin-left: auto; padding: 0;
  background: none; border: 0; color: #fff; cursor: pointer;
  align-items: center; justify-content: center; flex-direction: column; gap: 5px;
  transition: color .35s ease;
}
.oat-header.is-stuck .oat-burger { color: var(--brand-charcoal); }
.oat-burger span { display: block; width: 20px; height: 2px; background: currentColor; border-radius: 2px; transition: .2s ease; }
.oat-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.oat-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.oat-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* mobil çekmece */
.oat-drawer {
  position: fixed; inset: 0 0 0 auto; z-index: 120;
  width: min(360px, 88vw); background: var(--brand-charcoal); color: #fff;
  transform: translateX(100%); transition: transform .28s ease;
  display: flex; flex-direction: column; overflow-y: auto;
  padding: var(--space-5) var(--space-5) var(--space-8);
}
.oat-drawer.is-open { transform: none; }
.oat-drawer__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-6); }
.oat-drawer__close {
  width: 44px; height: 44px; border-radius: var(--radius-sm);
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14);
  color: #fff; font-size: 22px; line-height: 1; cursor: pointer;
}
.oat-drawer__list { display: grid; gap: 2px; }
.oat-drawer__link {
  display: flex; align-items: center; justify-content: space-between;
  min-height: 52px; padding: 0 var(--space-3); border-radius: var(--radius-sm);
  color: #fff; font-weight: 500; font-size: 16px; width: 100%;
  background: none; border: 0; cursor: pointer; text-align: left;
}
.oat-drawer__link:hover, .oat-drawer__link[aria-expanded="true"] { background: rgba(255,255,255,.06); color: var(--brand-orange); }
.oat-drawer__link .oat-icon { transition: transform .2s ease; }
.oat-drawer__link[aria-expanded="true"] .oat-icon { transform: rotate(180deg); }
.oat-drawer__sub { display: none; padding: var(--space-1) 0 var(--space-3) var(--space-4); }
.oat-drawer__sub.is-open { display: grid; gap: 2px; }
.oat-drawer__sub a {
  display: block; min-height: 44px; line-height: 44px;
  color: var(--brand-text-on-dark); font-size: var(--fs-small);
}
.oat-drawer__sub a:hover { color: #fff; }
.oat-drawer__foot { margin-top: var(--space-6); display: grid; gap: var(--space-3); }

.oat-navdim {
  position: fixed; inset: 0; z-index: 80;
  background: rgba(12,15,18,.62); backdrop-filter: blur(2px);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .18s ease, visibility .18s;
}
body:has(.oat-nav__item:hover > .oat-nav__sub) .oat-navdim,
body:has(.oat-nav__item:focus-within > .oat-nav__sub) .oat-navdim { opacity: 1; visibility: visible; }

.oat-overlay {
  position: fixed; inset: 0; z-index: 110;
  background: rgba(15,18,21,.6); backdrop-filter: blur(2px);
  opacity: 0; visibility: hidden; transition: .25s ease;
}
.oat-overlay.is-open { opacity: 1; visibility: visible; }
body.oat-locked { overflow: hidden; }

/* 6.3 Hero --------------------------------------------------------------- */
.oat-hero {
  position: relative; overflow: hidden;
  background: var(--brand-charcoal); color: #fff;
  padding-block: var(--space-6) var(--space-8);
}
.oat-hero::before { content: none; }
.oat-hero__grid-lines { display: none; }
.oat-hero__inner {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 1.06fr .94fr; gap: var(--space-8); align-items: center;
}
.oat-hero__title { font-size: var(--fs-display); line-height: var(--lh-display); font-weight: var(--fw-display); letter-spacing: var(--ls-display); margin: 0; color: #fff; }
.oat-hero__title em { font-style: normal; color: var(--brand-orange); }
.oat-hero__text { color: var(--brand-text-on-dark); font-size: var(--fs-body-lg); margin: var(--space-5) 0 var(--space-6); max-width: 56ch; }
.oat-hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.oat-hero__media { position: relative; }
.oat-hero__media img { border-radius: var(--radius-md); aspect-ratio: 4 / 4.4; object-fit: cover; width: 100%; }

/* güven rozetleri */
.oat-trust {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4);
  margin-top: var(--space-7); padding-top: var(--space-5);
  border-top: 1px solid rgba(255,255,255,.12);
}
.oat-trust__item {
  display: flex; align-items: center; gap: var(--space-3);
}
.oat-trust__ic {
  width: auto; height: auto; border-radius: 0; flex: none;
  background: none; color: var(--brand-orange);
  box-shadow: none;
  display: grid; place-items: center;
}
.oat-trust__item .oat-trust__ic { color: var(--brand-orange); }
.oat-trust__item .oat-trust__ic .oat-icon { width: 28px; height: 28px; stroke-width: 1.75; color: var(--brand-orange); }
.oat-trust__item b { display: block; font-size: var(--fs-body); font-weight: 600; margin-bottom: 2px; color: #fff; }
.oat-trust__item b + span { display: block; font-size: var(--fs-caption); color: var(--brand-text-on-dark); }

/* 6.4 Marka şeridi ------------------------------------------------------- */
.oat-brands { border-bottom: 1px solid var(--brand-border); background: #fff; }
.oat-brands__inner { padding-block: var(--space-6); }
.oat-brands__label {
  font-size: var(--fs-caption); font-weight: 600; letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase; color: var(--brand-text-muted);
  text-align: center; margin: 0 0 var(--space-5);
}
.oat-brands__list {
  display: grid; grid-template-columns: repeat(8, 1fr);
  align-items: center; gap: var(--space-5) var(--space-6);
  min-height: 48px;
}
.oat-brands__list.is-loading::before {
  content: "Markalar yükleniyor…";
  grid-column: 1 / -1;
  text-align: center;
  font-size: var(--fs-small);
  color: var(--brand-text-muted);
}
.oat-brands__item {
  display: grid; place-items: center; min-height: 44px;
  padding: 0; border: 0; background: none;
}
.oat-brands__item img {
  width: 100%; max-width: 128px; height: auto; max-height: 32px;
  object-fit: contain; display: block;
  filter: grayscale(1); opacity: .5;
  transition: filter .18s ease, opacity .18s ease;
}
a.oat-brands__item:hover img { filter: none; opacity: 1; }
.oat-brands__legal {
  margin: var(--space-5) 0 0;
  text-align: center;
  font-size: var(--fs-caption);
  color: var(--brand-text-muted);
  line-height: 1.5;
}
.oat-brands__media {
  display: flex; align-items: center; justify-content: center;
  background: #fff; padding: var(--space-5);
}
.oat-brands__media img {
  max-height: 48px; width: auto; object-fit: contain;
}
.oat-brands__single {
  display: grid; place-items: center;
  background: rgba(255,255,255,.06);
  border-radius: var(--radius-lg);
  min-height: 280px;
  padding: var(--space-7);
}
.oat-brands__single img {
  width: min(220px, 70%);
  height: auto;
  filter: brightness(0) invert(1);
  opacity: .92;
}
/* optik denge: logoların görsel ağırlığı eşitlenir */
.oat-brands__item[data-oat-brand="buderus"] img { max-height: 24px; opacity: .75; }
.oat-brands__item[data-oat-brand="baymak"] img { max-height: 36px; }
.oat-brands__item[data-oat-brand="arcelik"] img,
.oat-brands__item[data-oat-brand="fujiplus"] img { max-height: 28px; }
.oat-brands__item[data-oat-brand="vestel"] img,
.oat-brands__item[data-oat-brand="siemens"] img { max-height: 26px; }

/* 6.5 Özellik listesi (neden biz) --------------------------------------- */
.oat-feature { display: flex; gap: var(--space-4); }
.oat-feature__ic {
  width: 48px; height: 48px; flex: none; border-radius: var(--radius-md);
  background: rgba(242,106,33,.14); color: var(--brand-orange);
  display: grid; place-items: center;
}
.oat-feature__title { font-size: var(--fs-h4); font-weight: 600; margin: 0 0 var(--space-1); }
.oat-feature__text { font-size: var(--fs-small); color: var(--brand-text-muted); margin: 0; }
.oat-section--dark .oat-feature__text { color: var(--brand-text-on-dark); }

.oat-section--brandfoot {
  position: relative;
  overflow: hidden;
  padding-bottom: clamp(72px, 9vw, 120px);
}
.oat-section--brandfoot > .oat-container {
  position: relative;
  z-index: 1;
}
.oat-brand-outline {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  margin: 0;
  height: auto;
  overflow: visible;
  pointer-events: none;
  user-select: none;
  line-height: 0;
  /* üst taşmayı bölüm kesmesin diye yazıyı biraz yukarıdan başlat */
  padding-top: .22em;
}
.oat-brand-outline span {
  display: block;
  max-width: none;
  font-size: calc((100vw - 48px) / 10.4);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
  color: transparent;
  -webkit-text-stroke: 1.6px rgba(255, 255, 255, .42);
  paint-order: stroke fill;
  /* umlaut (Ö) stroke'u kesilmesin */
  padding-block: .12em .06em;
  transform: translateY(12%);
}
@media (max-width: 680px) {
  .oat-section--brandfoot { padding-bottom: 56px; }
  .oat-brand-outline span {
    font-size: calc((100vw - 24px) / 9.2);
    letter-spacing: .02em;
    -webkit-text-stroke-width: 1.1px;
    transform: translateY(10%);
  }
}

/* 6.6 Süreç adımları ---------------------------------------------------- */
.oat-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); counter-reset: oat-step; }
.oat-step {
  position: relative; background: #fff; border: 1px solid var(--brand-border);
  border-radius: var(--radius-lg); padding: var(--space-6);
  transition:
    border-color 0.85s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.85s cubic-bezier(0.22, 1, 0.36, 1),
    background-color 0.85s cubic-bezier(0.22, 1, 0.36, 1);
}
.oat-step.is-done {
  border-color: color-mix(in srgb, var(--brand-orange) 42%, var(--brand-border));
  background: color-mix(in srgb, var(--brand-orange-tint) 55%, #fff);
}
.oat-step.is-active {
  border-color: var(--brand-orange);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--brand-orange) 35%, transparent),
    0 14px 28px -18px color-mix(in srgb, var(--brand-orange) 55%, transparent);
  background: #fff;
}
.oat-step__num {
  width: 48px; height: 48px; border-radius: var(--radius-md);
  background: var(--brand-charcoal); color: #fff;
  display: grid; place-items: center; font-size: var(--fs-h4); font-weight: 700;
  margin-bottom: var(--space-4);
  transition:
    background-color 0.85s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.85s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.85s cubic-bezier(0.22, 1, 0.36, 1);
}
.oat-step.is-done .oat-step__num {
  background: color-mix(in srgb, var(--brand-orange) 78%, var(--brand-charcoal));
  transform: scale(1);
}
.oat-step.is-active .oat-step__num {
  background: var(--brand-orange);
  transform: scale(1.08);
  animation: oat-step-glow 2.2s ease-in-out infinite;
}
.oat-step__title {
  font-size: var(--fs-h4); font-weight: 600; margin: 0 0 var(--space-2);
  transition: color 0.85s cubic-bezier(0.22, 1, 0.36, 1);
}
.oat-step.is-active .oat-step__title { color: var(--brand-orange-text); }
.oat-step__text { font-size: var(--fs-small); color: var(--brand-text-muted); margin: 0; }
.oat-step::after,
.oat-step::before {
  content: "";
  position: absolute;
  top: calc(var(--space-6) + 23px);
  right: calc(var(--space-5) * -1 - 1px);
  width: var(--space-5);
  height: 2px;
  border-radius: 1px;
}
.oat-step::after { background: var(--brand-border-strong); }
.oat-step::before {
  background: var(--brand-orange);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.95s cubic-bezier(0.22, 1, 0.36, 1);
  z-index: 1;
}
.oat-step.is-done::before,
.oat-step.is-active.is-bridging::before {
  transform: scaleX(1);
}
.oat-step:last-child::after,
.oat-step:last-child::before { display: none; }

@keyframes oat-step-glow {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--brand-orange) 42%, transparent); }
  50% { box-shadow: 0 0 0 12px color-mix(in srgb, var(--brand-orange) 0%, transparent); }
}

@media (prefers-reduced-motion: reduce) {
  .oat-step, .oat-step__num, .oat-step__title, .oat-step::before { transition: none; }
  .oat-step.is-active .oat-step__num { transform: none; animation: none; }
}

/* 6.7 Bölge kartları ----------------------------------------------------- */
.oat-regions { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-3); }
.oat-region {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  padding: var(--space-4) var(--space-5); background: #fff;
  box-shadow: none;
  border: 1px solid var(--brand-border); border-radius: var(--radius-md);
  color: var(--brand-charcoal); font-weight: 600; font-size: var(--fs-small);
  transition: border-color .15s ease, color .15s ease;
}
.oat-region:hover {
  border-color: var(--brand-orange); color: var(--brand-orange-text);
  box-shadow: none; transform: none;
}
.oat-region > span:first-child {
  display: inline-flex; align-items: center; gap: var(--space-2);
  color: var(--brand-charcoal); font-weight: 600; font-size: var(--fs-body);
}
.oat-region > span + span {
  flex: none; padding: 4px 8px; border-radius: var(--radius-sm);
  background: var(--brand-orange-tint); color: var(--brand-orange-text);
  font-weight: 600; font-size: var(--fs-caption);
}
.oat-region:hover > span:first-child { color: var(--brand-orange-text); }
.oat-region .oat-icon { color: var(--brand-orange); width: 20px; height: 20px; }

/* 6.8 İstatistik --------------------------------------------------------- */
.oat-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-5); }
.oat-stat { text-align: left; padding-left: var(--space-5); border-left: 3px solid var(--brand-orange); }
.oat-stat__num { font-size: var(--fs-h2); font-weight: 700; letter-spacing: -.02em; line-height: 1; }
.oat-stat__label { font-size: var(--fs-small); color: var(--brand-text-muted); margin: var(--space-2) 0 0; }
.oat-section--dark .oat-stat__label { color: var(--brand-text-on-dark); }

/* 6.9 Galeri ------------------------------------------------------------- */
.oat-gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-3); }
.oat-gallery__item { border-radius: var(--radius-md); overflow: hidden; cursor: zoom-in; }
.oat-gallery__item--wide { grid-column: span 2; }
.oat-gallery__item--tall { grid-row: span 2; }
.oat-gallery__item img { width: 100%; height: 100%; object-fit: cover; }

.oat-lightbox {
  position: fixed; inset: 0; z-index: 140; display: none;
  background: rgba(15,18,21,.92); padding: var(--space-6);
  align-items: center; justify-content: center;
}
.oat-lightbox.is-open { display: flex; }
.oat-lightbox img { max-width: 92vw; max-height: 86vh; border-radius: var(--radius-md); }
.oat-lightbox__close {
  position: absolute; top: var(--space-5); right: var(--space-5);
  width: 48px; height: 48px; border-radius: var(--radius-sm);
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.2);
  color: #fff; font-size: 24px; cursor: pointer;
}

/* 6.10 Yorum ------------------------------------------------------------- */
.oat-quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }
.oat-quote {
  background: #fff; border: 1px solid var(--brand-border); border-radius: var(--radius-lg);
  padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-4);
  box-shadow: none;
}
.oat-quote__stars { display: flex; gap: 3px; color: var(--brand-orange); font-size: 15px; letter-spacing: 2px; }
.oat-quote__text { color: var(--brand-text-muted); font-size: var(--fs-small); margin: 0; flex: 1; }
.oat-quote__author { display: flex; align-items: center; gap: var(--space-3); border-top: 1px solid var(--brand-border); padding-top: var(--space-4); }
.oat-quote__avatar {
  width: 44px; height: 44px; border-radius: 50%; flex: none;
  background: var(--brand-charcoal); color: #fff;
  display: grid; place-items: center; font-weight: 700; font-size: var(--fs-small);
}
.oat-quote__author b { display: block; font-size: var(--fs-small); }
.oat-quote__author span { font-size: var(--fs-caption); color: var(--brand-text-muted); }

/* 6.11 SSS akordiyon ---------------------------------------------------- */
.oat-faq { display: grid; gap: var(--space-3); }
.oat-faq__item {
  background: #fff; border: 1px solid var(--brand-border);
  border-radius: var(--radius-md); overflow: hidden;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.oat-faq__item.is-open { border-color: var(--brand-orange); box-shadow: var(--shadow-sm); }
.oat-faq__q {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  padding: var(--space-5); background: none; border: 0; cursor: pointer; text-align: left;
  font: 600 var(--fs-body)/1.5 var(--font-sans); color: var(--brand-charcoal);
}
.oat-faq__q:hover { color: var(--brand-orange-text); }
.oat-faq__sign {
  width: 32px; height: 32px; flex: none; border-radius: var(--radius-sm);
  background: var(--brand-orange-tint); color: var(--brand-orange-text);
  display: grid; place-items: center; font-size: 20px; line-height: 1;
  transition: .2s ease;
}
.oat-faq__item.is-open .oat-faq__sign { background: var(--brand-orange); color: #fff; transform: rotate(45deg); }
.oat-faq__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .28s ease; }
.oat-faq__item.is-open .oat-faq__a { grid-template-rows: 1fr; }
.oat-faq__a > div { overflow: hidden; }
.oat-faq__a p {
  margin: 0; padding: 0 var(--space-5) var(--space-5);
  color: var(--brand-text-muted); font-size: var(--fs-small);
}

/* 6.12 İletişim şeridi --------------------------------------------------- */
.oat-contact { display: grid; grid-template-columns: .92fr 1.08fr; gap: var(--space-8); align-items: start; }
.oat-contact__panel {
  background: #fff; border-radius: var(--radius-lg); padding: var(--space-7);
  box-shadow: none; color: var(--brand-charcoal);
  border: 1px solid var(--brand-border);
}
.oat-contact__panel .oat-sec-title { font-size: var(--fs-h3); }
.oat-contact__list { display: grid; gap: var(--space-4); margin-top: var(--space-6); }
.oat-contact__big {
  display: inline-flex; align-items: center; gap: var(--space-3);
  font-size: clamp(28px, 3vw, 40px); font-weight: 700; letter-spacing: -.02em; color: #fff;
}
.oat-contact__big:hover { color: var(--brand-orange); }
.oat-contact__big .oat-icon { width: 34px; height: 34px; color: var(--brand-orange); }

/* 6.13 CTA bandı --------------------------------------------------------- */
.oat-cta-band {
  position: relative; overflow: hidden;
  background: var(--brand-orange);
  color: #fff;
  border-radius: var(--radius-md);
  padding: var(--space-7);
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-6); flex-wrap: wrap;
  box-shadow: none;
}
.oat-cta-band::before { content: none; }
.oat-cta-band > * { position: relative; z-index: 1; }
.oat-cta-band__body { max-width: 640px; }
.oat-cta-band__title {
  font-size: var(--fs-h3); line-height: var(--lh-h3); font-weight: var(--fw-h3);
  margin: 0 0 var(--space-2); color: #fff;
}
.oat-cta-band__text {
  margin: 0; color: rgba(255,255,255,.9); font-size: var(--fs-small); line-height: var(--lh-small);
  max-width: 48ch;
}
.oat-cta-band__actions {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); flex: none;
}
.oat-cta-band .oat-btn--secondary {
  background: var(--brand-charcoal); border-color: var(--brand-charcoal); color: #fff;
  box-shadow: none;
}
.oat-cta-band .oat-btn--secondary:hover {
  background: #161A1E; border-color: #161A1E; color: #fff;
  transform: none;
  box-shadow: none;
}
.oat-cta-band .oat-btn--onDark {
  background: transparent;
  border-color: rgba(255,255,255,.55);
  color: #fff;
  backdrop-filter: none;
}
.oat-cta-band .oat-btn--onDark:hover {
  background: #fff; border-color: #fff; color: var(--brand-orange-text);
  transform: none;
}

/* Fotoğraflı CTA — hero görseli + pencere parallax */
.oat-cta-band--visual {
  background: #1a1410;
  min-height: 168px;
  isolation: isolate;
}
.oat-cta-band__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  border-radius: inherit;
}
.oat-cta-band__media img {
  position: absolute;
  left: 0;
  top: -40%;
  width: 100%;
  height: 180%;
  object-fit: cover;
  object-position: 68% center;
  display: block;
  will-change: transform;
  transform: translate3d(0, 0, 0);
}
.oat-cta-band__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      105deg,
      rgba(28, 18, 12, .78) 0%,
      rgba(42, 24, 14, .58) 36%,
      rgba(242, 106, 33, .28) 72%,
      rgba(242, 106, 33, .18) 100%
    ),
    linear-gradient(
      180deg,
      rgba(18, 22, 26, .22) 0%,
      transparent 45%,
      rgba(18, 22, 26, .35) 100%
    );
}
.oat-cta-band--visual > *:not(.oat-cta-band__media) { position: relative; z-index: 1; }
.oat-cta-band--visual .oat-cta-band__title { color: #fff; }
.oat-cta-band--visual .oat-cta-band__text { color: rgba(255, 255, 255, .88); }
.oat-cta-band--visual .oat-btn--secondary {
  background: #fff;
  border-color: #fff;
  color: var(--brand-orange-text);
  box-shadow: 0 10px 24px -12px rgba(18, 22, 26, .5);
}
.oat-cta-band--visual .oat-btn--secondary:hover {
  background: var(--brand-charcoal);
  border-color: var(--brand-charcoal);
  color: #fff;
  box-shadow: none;
}
.oat-cta-band--visual .oat-btn--onDark {
  background: rgba(18, 22, 26, .88);
  border-color: rgba(255, 255, 255, .18);
  color: #fff;
  backdrop-filter: none;
  box-shadow: 0 10px 24px -12px rgba(18, 22, 26, .45);
}
.oat-cta-band--visual .oat-btn--onDark:hover {
  background: #fff;
  border-color: #fff;
  color: var(--brand-orange-text);
}

@media (prefers-reduced-motion: reduce) {
  .oat-cta-band__media img {
    top: 0;
    height: 100%;
    will-change: auto;
    transform: none !important;
  }
}

/* 6.14 Sayfa başlığı (alt sayfalar) ------------------------------------- */
.oat-pagehead { background: var(--brand-charcoal); color: #fff; padding-block: var(--space-8); position: relative; overflow: hidden; }
.oat-pagehead::before { content: none; }
.oat-pagehead__inner { position: relative; }
.oat-pagehead h1 { font-size: var(--fs-h2); margin: var(--space-3) 0 0; }
.oat-pagehead .oat-sec-lede { color: var(--brand-text-on-dark); }
.oat-pagehead__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-6); }
.oat-pagehead--split .oat-pagehead__inner {
  display: grid; grid-template-columns: 1.1fr .9fr; gap: var(--space-7); align-items: center;
}
.oat-pagehead__media { position: relative; }
.oat-pagehead__media img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
}
.oat-crumbs { display: flex; flex-wrap: wrap; gap: var(--space-2); font-size: var(--fs-small); color: var(--brand-text-on-dark); margin: 0; padding: 0; list-style: none; }
.oat-crumbs a { color: var(--brand-text-on-dark); }
.oat-crumbs a:hover { color: var(--brand-orange); }
.oat-crumbs li + li::before { content: "/"; margin-right: var(--space-2); opacity: .5; }
.oat-crumbs li { display: inline-flex; }

/* 6.15 Footer ------------------------------------------------------------ */
.oat-footer { background: var(--brand-charcoal); color: var(--brand-text-on-dark); }
.oat-footer__top { padding-block: var(--space-8) var(--space-7); }
.oat-footer__grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1.2fr; gap: var(--space-7); }
.oat-footer__title {
  color: #fff; font-size: var(--fs-caption); font-weight: 700;
  letter-spacing: var(--ls-eyebrow); text-transform: uppercase; margin: 0 0 var(--space-5);
}
.oat-footer__text { font-size: var(--fs-small); margin: var(--space-5) 0 0; }
.oat-footer__list { display: grid; gap: var(--space-3); }
.oat-footer__list a { color: var(--brand-text-on-dark); font-size: var(--fs-small); }
.oat-footer__list a:hover { color: var(--brand-orange); }
.oat-footer__contact { display: grid; gap: var(--space-4); }
.oat-footer__contact a, .oat-footer__contact div {
  display: flex; gap: var(--space-3); align-items: flex-start;
  color: var(--brand-text-on-dark); font-size: var(--fs-small);
}
.oat-footer__contact .oat-icon { color: var(--brand-orange); margin-top: 3px; }
.oat-footer__contact a:hover { color: #fff; }
.oat-social { display: flex; gap: var(--space-2); margin-top: var(--space-5); }
.oat-social a {
  width: 42px; height: 42px; border-radius: var(--radius-sm);
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12);
  display: grid; place-items: center; color: #fff;
  transition: background .15s ease, border-color .15s ease, transform .15s ease;
}
.oat-social .oat-icon { width: 20px; height: 20px; }
.oat-social a:hover { transform: none; }
.oat-social a:hover { background: var(--brand-orange); border-color: var(--brand-orange); color: #fff; }
.oat-footer__bottom {
  border-top: 1px solid rgba(255,255,255,.09); padding-block: var(--space-5);
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  flex-wrap: wrap; font-size: var(--fs-caption);
}
.oat-footer__legal {
  margin: 0 0 var(--space-4);
  font-size: var(--fs-caption);
  color: rgba(255,255,255,.5);
  text-align: center;
  line-height: 1.5;
}
.oat-footer__bottom-end {
  display: flex; align-items: center; gap: var(--space-5); flex-wrap: wrap;
}
.oat-footer__bottom nav { display: flex; gap: var(--space-4); }
.oat-footer__mark {
  display: inline-flex; align-items: center;
  opacity: .72; transition: opacity .2s ease;
}
.oat-footer__mark:hover { opacity: 1; }
.oat-footer__mark img {
  display: block; width: 70px; height: auto;
}

/* 6.16 Mobil sabit çubuk ------------------------------------------------- */
.oat-mobilebar {
  position: fixed; inset: auto 0 0; z-index: 100; display: none;
  background: var(--brand-charcoal); border-top: 1px solid rgba(255,255,255,.1);
  padding: var(--space-2) var(--space-3);
  padding-bottom: calc(var(--space-2) + env(safe-area-inset-bottom, 0px));
  grid-template-columns: 1fr 1fr; gap: var(--space-2);
}
.oat-mobilebar .oat-btn { min-height: 46px; font-size: 15px; }

.oat-fab {
  position: fixed; right: var(--space-5); bottom: var(--space-5); z-index: 95;
  display: grid; gap: var(--space-3); justify-items: end;
  transition: bottom .35s ease;
}
.oat-fab.is-lifted { bottom: 96px; }
@media (prefers-reduced-motion: reduce) {
  .oat-fab { transition: none; }
}
.oat-fab__btn {
  width: 52px; height: 52px; display: grid; place-items: center;
  border-radius: var(--radius-sm); border: 1px solid rgba(255,255,255,.14);
  background: var(--brand-charcoal); color: #fff; cursor: pointer;
  box-shadow: var(--shadow-lg);
  transition: background .15s ease, color .15s ease, opacity .2s ease, transform .2s ease;
}
.oat-fab__btn--top { opacity: 0; visibility: hidden; transform: translateY(10px); }
.oat-fab__btn--top.is-visible { opacity: 1; visibility: visible; transform: none; }
.oat-fab__btn--top:hover { background: rgba(255,255,255,.1); color: var(--brand-orange); }
.oat-fab__btn--top .oat-icon { transform: rotate(-90deg); }
.oat-fab__btn--wa { background: #25D366; color: #fff; border-color: rgba(0,0,0,.08); }
.oat-fab__btn--wa:hover { background: #1FB457; color: #fff; }
.oat-fab__btn--wa .oat-icon { width: 28px; height: 28px; }


/* 7. YARDIMCILAR ========================================================= */
.oat-u-center { text-align: center; }
.oat-u-mt-5 { margin-top: var(--space-5); }
.oat-u-mt-6 { margin-top: var(--space-6); }
.oat-u-mt-7 { margin-top: var(--space-7); }
.oat-u-mt-8 { margin-top: var(--space-8); }
.oat-u-mb-6 { margin-bottom: var(--space-6); }
.oat-u-mb-7 { margin-bottom: var(--space-7); }
.oat-u-mb-8 { margin-bottom: var(--space-8); }
.oat-sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* girişte belirme — daha kısa, daha az “demo site” efekti */
.oat-reveal { opacity: 0; transform: translateY(10px); transition: opacity .35s ease, transform .35s ease; }
.oat-reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .oat-reveal { opacity: 1; transform: none; transition: none; }
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

@media (max-width: 1720px) {
  :root { --gutter: 28px; }
}

/* 8. DUYARLI KIRILIMLAR ================================================== */
@media (max-width: 1080px) {
  .oat-hero__inner { grid-template-columns: 1fr; }
  .oat-hero__media { max-width: 520px; }
  .oat-grid--split { grid-template-columns: 1fr; gap: var(--space-7); }
  .oat-grid--4, .oat-gallery, .oat-regions { grid-template-columns: repeat(2, 1fr); }
  .oat-brands__list { grid-template-columns: repeat(4, 1fr); }
  .oat-grid--3, .oat-quotes, .oat-steps { grid-template-columns: repeat(2, 1fr); }
  .oat-stats { grid-template-columns: repeat(2, 1fr); }
  .oat-contact { grid-template-columns: 1fr; }
  .oat-footer__grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-6); }
  .oat-step::after, .oat-step::before { display: none; }
  .oat-trust { grid-template-columns: 1fr 1fr; }
  .oat-pagehead--split .oat-pagehead__inner { grid-template-columns: 1fr; }
  .oat-layout--content-aside { grid-template-columns: 1fr; }
  .oat-aside { position: static; }
  .oat-channels { grid-template-columns: 1fr; }
}

/* Header CTA yalnızca telefon; menü 5 üst öğe ile 1200px kaba sığar.
   1080px altında menü tamamen çekmeceye taşınır. */
@media (max-width: 1080px) {
  .oat-nav, .oat-header__cta { display: none; }
  .oat-burger { display: flex; }
  .oat-topbar__list--secondary { display: none; }
  .oat-topbar__list { flex-wrap: nowrap; min-width: 0; }
  .oat-topbar__list > .oat-topbar__item:not(:first-child) { display: none; }
  .oat-topbar__item {
    min-width: 0; max-width: 100%;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
}

@media (max-width: 680px) {
  .oat-grid--2, .oat-grid--3, .oat-grid--4,
  .oat-quotes, .oat-steps, .oat-regions,
  .oat-form__row { grid-template-columns: 1fr; }
  .oat-carousel__track {
    display: flex;
    align-items: stretch;
    gap: var(--space-4);
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x;
  }
  .oat-carousel__track::-webkit-scrollbar { display: none; }
  .oat-carousel__track > * {
    flex: 0 0 75%;
    min-width: 0;
    scroll-snap-align: start;
  }
  .oat-carousel__track .oat-reveal {
    opacity: 1;
    transform: none;
  }
  .oat-carousel__nav {
    position: absolute;
    top: 50%;
    right: var(--space-2);
    z-index: 2;
    display: grid;
    width: 46px;
    height: 46px;
    padding: 0;
    place-items: center;
    transform: translateY(-50%);
    border: 0;
    border-radius: 50%;
    background: var(--brand-orange);
    color: #fff;
    box-shadow: none;
    cursor: pointer;
    transition: opacity .2s ease, transform .2s ease;
  }
  .oat-carousel__nav--prev { left: var(--space-2); right: auto; }
  .oat-carousel__nav--prev .oat-icon { transform: rotate(180deg); }
  .oat-carousel__nav:focus-visible { outline: 3px solid var(--brand-charcoal); outline-offset: 3px; }
  .oat-carousel__nav.is-hidden {
    opacity: 0;
    pointer-events: none;
  }
  .oat-gallery { grid-template-columns: repeat(2, 1fr); }
  .oat-brands__list { grid-template-columns: repeat(2, 1fr); gap: var(--space-5); }
  .oat-gallery__item--wide, .oat-gallery__item--tall { grid-column: auto; grid-row: auto; }
  .oat-trust { grid-template-columns: 1fr 1fr; gap: var(--space-4); }
  .oat-footer__grid { grid-template-columns: 1fr; }
  .oat-mobilebar { display: grid; }
  .oat-navdim { display: none; }
  .oat-fab { display: none; }
  body { padding-bottom: 68px; }
  .oat-contact__panel { padding: var(--space-5); }
  .oat-cta-band { padding: var(--space-6); }
  .oat-cta-band__actions {
    width: 100%;
    flex-wrap: nowrap;
    gap: var(--space-2);
  }
  .oat-cta-band__actions .oat-btn {
    flex: 1 1 0;
    min-width: 0;
    min-height: 48px;
    font-size: 14px;
    padding-inline: var(--space-3);
  }
  .oat-entry__cover { margin-top: 0; }
  .oat-pagehead__media { max-width: 520px; }
  .oat-channels { grid-template-columns: 1fr; }
  .oat-headrow { align-items: flex-start; }
  .oat-section--notch { clip-path: none; }
  .oat-hero__actions {
    flex-wrap: nowrap;
    gap: var(--space-2);
  }
  .oat-hero__actions .oat-btn {
    flex: 1 1 0;
    min-width: 0;
    min-height: 48px;
    font-size: 14px;
    padding-inline: var(--space-3);
    gap: 6px;
  }
  .oat-hero__actions .oat-btn .oat-icon {
    width: 18px;
    height: 18px;
  }
}

@media (max-width: 680px) and (prefers-reduced-motion: reduce) {
  .oat-carousel__track { scroll-behavior: auto; }
}

/* 9. BASKI ================================================================ */
@media print {
  .oat-header, .oat-topbar, .oat-mobilebar, .oat-fab, .oat-drawer, .oat-overlay, .oat-navdim { display: none !important; }
  body { padding-bottom: 0; }
  .oat-section { padding-block: 24px; }
}