/* ==========================================================================
   NECCAR BRANDING — Tasarım Sistemi / Temel Katman
   Kimlik: lacivert #081C4D + altın #C39248 (logodan ölçüldü) üzerine
   mat siyah metal, yönlü ışık ve altın rim light dili.
   ========================================================================== */

/* ------------------------------------------------------------------ Token */
:root {
  /* Zemin — lacivert eğilimli mat siyah */
  --void:    #04060C;
  --ink:     #070B15;
  --ink-2:   #0A1020;
  --ink-3:   #0F1729;
  --ink-4:   #16203A;

  /* Marka */
  --navy:      #081C4D;
  --navy-lit:  #123163;

  /* Metal */
  --gold:      #C39248;
  --gold-lit:  #E8CB94;
  --gold-pale: #F2E3BD;
  --gold-deep: #8C6428;

  /* Nötrler — koyu dünya */
  --platinum:  #E9ECF3;
  --steel:     #96A2B8;
  --steel-dim: #626E85;

  /* Aydınlık dünya (kâğıt bölümleri) */
  --pearl:   #F7F6F2;
  --pearl-2: #EEEBE3;
  --pearl-3: #E2DED2;

  /* Anlamsal — koyu bağlam varsayılan */
  --bg:        var(--ink);
  --surface:   var(--ink-2);
  --fg:        var(--platinum);
  --fg-soft:   rgba(233, 236, 243, 0.64);
  --fg-faint:  rgba(233, 236, 243, 0.56);   /* WCAG AA: koyu zeminde 5.5:1 */
  --rule:      rgba(233, 236, 243, 0.11);
  --rule-2:    rgba(233, 236, 243, 0.22);
  --accent:    var(--gold);
  --accent-lit:var(--gold-lit);

  /* Fırçalanmış altın — vurgu kelimeleri ve çizgiler için */
  --metal: linear-gradient(96deg,
      #8C6428 0%, #E8CB94 20%, #C39248 40%,
      #F2E3BD 58%, #B07F38 78%, #E2BE82 100%);
  /* Düğme zemini için aynı metal, alt ucu yükseltilmiş: #8C6428 üzerinde
     #14100A metin 3.58:1 kalıyordu; bu duraklarla en kötü durum 4.9:1. */
  --metal-btn: linear-gradient(96deg,#A67A34 0%,#E8CB94 20%,#C39248 40%,#F2E3BD 58%,#B07F38 78%,#E2BE82 100%);
  --metal-line: linear-gradient(90deg,
      transparent, rgba(195,146,72,.25) 12%, #C39248 42%,
      #F2E3BD 52%, #C39248 62%, rgba(195,146,72,.25) 88%, transparent);

  /* Tipografi */
  --display: "Plus Jakarta Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --sans:    "Plus Jakarta Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --text:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  /* Akışkan ölçek */
  --t-hero:    clamp(2.9rem, 8.4vw, 8.5rem);
  --t-display: clamp(2.4rem, 6.2vw, 6rem);
  --t-h2:      clamp(1.95rem, 4.3vw, 3.9rem);
  --t-h3:      clamp(1.4rem, 2.3vw, 2.15rem);
  --t-h4:      clamp(1.08rem, 1.35vw, 1.3rem);
  --t-lead:    clamp(1.02rem, 1.3vw, 1.32rem);
  --t-body:    clamp(0.96rem, 0.98vw, 1.05rem);
  --t-small:   0.86rem;
  --t-micro:   0.6875rem;

  /* Ritim */
  --gutter:    clamp(1.15rem, 4.4vw, 5rem);
  --section-y: clamp(5.5rem, 12vh, 11rem);
  --maxw:      1720px;
  --col-gap:   clamp(0.9rem, 2vw, 2.25rem);
  --header-h:  86px;

  /* Hareket */
  --ease:    cubic-bezier(.22, 1, .36, 1);
  --ease-io: cubic-bezier(.65, 0, .35, 1);
}

/* Aydınlık (kâğıt) bağlam */
.tone-pearl {
  --bg: var(--pearl);
  --surface: #fff;
  --fg: #0B1426;
  --fg-soft: rgba(11, 20, 38, .70);
  --fg-faint: rgba(11, 20, 38, .62);        /* WCAG AA: kâğıt zeminde 5.1:1 */
  --rule: rgba(8, 28, 77, .13);
  --rule-2: rgba(8, 28, 77, .28);
  --accent: #A8762F;
  --accent-lit: var(--gold-deep);
  background: var(--bg);
  color: var(--fg);
}
/* Derin lacivert bağlam */
.tone-navy {
  --bg: #061029;
  --surface: #08163A;
  --rule: rgba(233, 236, 243, .13);
  background: var(--bg);
  color: var(--fg);
}

/* ------------------------------------------------------------------ Reset */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  background: var(--ink);
  color: var(--platinum);
  font-family: var(--text);
  font-size: var(--t-body);
  line-height: 1.65;
  letter-spacing: -0.003em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  font-feature-settings: "kern" 1, "liga" 1;
}
body.is-locked { overflow: hidden; }

img, svg, video, canvas { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; background: none; border: 0; }
button { cursor: pointer; }
ul, ol { list-style: none; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--gold); color: var(--ink); }

:focus-visible {
  outline: 1.5px solid var(--gold-lit);
  outline-offset: 4px;
  border-radius: 2px;
}

.skip-link {
  position: fixed; top: 0; left: 0; z-index: 999;
  padding: .9rem 1.4rem; background: var(--gold); color: var(--ink);
  font-family: var(--sans); font-size: var(--t-micro);
  letter-spacing: .16em; text-transform: uppercase;
  transform: translateY(-130%); transition: transform .3s var(--ease);
}
.skip-link:focus { transform: translateY(0); }

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

/* ------------------------------------------------------------- Tipografi */
h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 600;
  line-height: 1.04;
  letter-spacing: -0.032em;
  text-wrap: balance;
}

.hero-type { font-family: var(--display); font-weight: 600; font-size: var(--t-hero); line-height: 1.02; letter-spacing: -.04em; }
.display   { font-family: var(--display); font-weight: 600; font-size: var(--t-display); line-height: 1.04; letter-spacing: -.038em; }
.h2 { font-size: var(--t-h2); line-height: 1.06; letter-spacing: -.034em; }
.h3 { font-size: var(--t-h3); line-height: 1.2; letter-spacing: -.024em; }

/* Tek tipografik jest: vurgulu kelime italik ve fırçalanmış altın */
.em {
  /* <em> etiketinin tarayıcı varsayılanı italiktir; bu ailede gerçek italik
     yüklenmediği için tarayıcı sahte eğim üretiyordu. */
  font-style: normal;
  font-weight: 700;
  background: var(--metal);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  padding-right: .09em;
}
@supports not (background-clip: text) { .em { color: var(--gold-lit); } }
.tone-pearl .em {
  background: linear-gradient(96deg, #7A551F, #C39248 40%, #8C6428 70%, #B58A44);
  -webkit-background-clip: text; background-clip: text;
}

.lead {
  font-size: var(--t-lead); line-height: 1.55;
  color: var(--fg-soft); letter-spacing: -.008em; text-wrap: pretty;
}
.body-lg { font-size: clamp(.98rem, 1.1vw, 1.13rem); line-height: 1.68; color: var(--fg-soft); }
p { text-wrap: pretty; }
.measure { max-width: 64ch; }

/* Mikro etiket — logodaki harf aralığını yankılar */
.label {
  display: inline-flex; align-items: center; gap: .75em;
  font-family: var(--sans); font-weight: 500;
  font-size: var(--t-micro); letter-spacing: .26em;
  text-transform: uppercase; color: var(--fg-faint);
  line-height: 1.5;
}
.label::before {
  content: ""; flex: none; align-self: center;
  width: 1.75rem; height: 1px; background: var(--metal-line); opacity: .9;
}
.label--bare::before { display: none; }
.label .idx {
  font-family: var(--display); font-weight: 700;
  font-size: 1.15em; letter-spacing: -.02em;
  background: var(--metal); -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* --------------------------------------------------------------- Düzen */
.shell { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.section { position: relative; padding-block: var(--section-y); }
.section--tight { padding-block: clamp(3.5rem, 7vh, 6rem); }
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--col-gap); }
.rule { height: 1px; background: var(--rule); border: 0; width: 100%; }
.rule--metal { background: var(--metal-line); opacity: .8; }

.sec-head {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--col-gap);
  align-items: start; padding-top: clamp(1.4rem, 2.6vw, 2.5rem);
  border-top: 1px solid var(--rule);
}
.sec-head__meta { grid-column: 1 / span 3; position: sticky; top: calc(var(--header-h) + 20px); }
.sec-head__body { grid-column: 4 / -1; }
@media (max-width: 940px) {
  .sec-head__meta, .sec-head__body { grid-column: 1 / -1; }
  .sec-head__meta { position: static; margin-bottom: 1.5rem; }
}

/* -------------------------------------------------------------- Butonlar */
.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  gap: .85em; padding: 1.08em 2.1em;
  font-family: var(--sans); font-size: var(--t-micro); font-weight: 500;
  letter-spacing: .2em; text-transform: uppercase; line-height: 1;
  border-radius: 2px; overflow: hidden; isolation: isolate;
  transition: color .45s var(--ease), border-color .45s var(--ease);
  white-space: nowrap;
}
.btn::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  /* Üzerine koyu metin geliyor: erişilebilir gradyan */
  background: var(--metal-btn); transform: translateY(101%);
  transition: transform .6s var(--ease);
}
.btn:hover::after, .btn:focus-visible::after { transform: translateY(0); }

.btn--gold { background: var(--metal-btn); color: #14100A; font-weight: 600; }
.btn--gold::after { background: var(--platinum); }
.btn--gold:hover { color: var(--ink); }

.btn--ghost { border: 1px solid var(--rule-2); color: var(--fg); }
.btn--ghost:hover, .btn--ghost:focus-visible { color: #14100A; border-color: transparent; }

.btn--solid { background: var(--fg); color: var(--bg); }
.btn--solid:hover { color: #14100A; }

.btn__arrow { transition: transform .45s var(--ease); }
.btn:hover .btn__arrow { transform: translateX(5px); }

/* Metin bağlantısı */
.tlink { position: relative; display: inline-block; padding-bottom: 3px; }
.tlink::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: right;
  transition: transform .5s var(--ease);
}
.tlink:hover::after, .tlink:focus-visible::after { transform: scaleX(1); transform-origin: left; }
.tlink--on::after { transform: scaleX(1); transform-origin: left; background: var(--metal-line); }
.tlink--on:hover::after { transform: scaleX(0); transform-origin: right; }

/* ------------------------------------------------------- Reveal / Hareket */
.r-line { display: block; overflow: hidden; }
.r-line > span {
  display: block; transform: translateY(106%);
  transition: transform 1s var(--ease); transition-delay: var(--d, 0s);
}
.is-in .r-line > span, .r-line.is-in > span { transform: translateY(0); }

.r-fade {
  opacity: 0; transform: translateY(20px);
  transition: opacity .85s var(--ease), transform .85s var(--ease);
  transition-delay: var(--d, 0s);
}
.is-in.r-fade, .is-in .r-fade { opacity: 1; transform: none; }

.r-rule {
  transform: scaleX(0); transform-origin: left;
  transition: transform 1.15s var(--ease); transition-delay: var(--d, 0s);
}
.is-in.r-rule, .is-in .r-rule { transform: scaleX(1); }

.r-img {
  clip-path: inset(0 0 100% 0);
  transition: clip-path 1.2s var(--ease); transition-delay: var(--d, 0s);
}
.is-in.r-img, .is-in .r-img { clip-path: inset(0 0 0 0); }

@media (prefers-reduced-motion: reduce) {
  .r-line > span, .r-fade, .r-rule, .r-img {
    transform: none !important; opacity: 1 !important;
    clip-path: none !important; transition: none !important;
  }
}

/* ------------------------------------------------------------- Sabitler */
.grain {
  /* Grain kaldırıldı: koyu zemin üzerinde bulanıklık hissi yaratıyordu.
     Referans ajans siteleri koyu ama düz — netlik oradan geliyor. */
  display: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.scroll-progress {
  position: fixed; top: 0; left: 0; z-index: 950; height: 2px; width: 100%;
  background: var(--metal); transform: scaleX(0); transform-origin: left; pointer-events: none;
}

/* İmleç */
.cursor { display: none; }
@media (hover: hover) and (pointer: fine) {
  .cursor {
    display: grid; place-items: center; position: fixed; top: 0; left: 0;
    width: 42px; height: 42px; margin: -21px 0 0 -21px;
    border: 1px solid rgba(233, 236, 243, .45); border-radius: 999px;
    z-index: 980; pointer-events: none; mix-blend-mode: difference;
    transition: width .4s var(--ease), height .4s var(--ease), margin .4s var(--ease),
                background-color .4s var(--ease), border-color .4s var(--ease), opacity .3s;
  }
  .cursor__label {
    font-family: var(--sans); font-size: .56rem; letter-spacing: .18em; text-transform: uppercase;
    color: #14100A; opacity: 0; transform: scale(.7); white-space: nowrap;
    transition: opacity .3s, transform .3s var(--ease);
  }
  .cursor.is-hover { width: 68px; height: 68px; margin: -34px 0 0 -34px; background: rgba(233,236,243,.13); }
  .cursor.is-label {
    width: 104px; height: 104px; margin: -52px 0 0 -52px;
    background: var(--gold); border-color: transparent; mix-blend-mode: normal;
  }
  .cursor.is-label .cursor__label { opacity: 1; transform: scale(1); }
  .cursor.is-hidden { opacity: 0; }
}

/* Yardımcılar */
.u-accent { color: var(--accent); }
.u-soft { color: var(--fg-soft); }
.u-serif { font-family: var(--display); }
.u-mt-s { margin-top: clamp(.9rem, 1.8vw, 1.6rem); }
.u-mt-m { margin-top: clamp(1.6rem, 3vw, 2.7rem); }
.u-mt-l { margin-top: clamp(2.6rem, 5.5vw, 5rem); }
.u-center { text-align: center; }
.u-nowrap { white-space: nowrap; }

/* ==========================================================================
   MOBİL — dokunmatik kullanım için ölçek, hedef boyutları ve güvenli alanlar
   Ölçüt: her dokunulabilir öğe en az 44×44 px, gövde altı metin en az 12 px.
   ========================================================================== */

/* Çentikli cihazlarda kenar boşlukları */
:root {
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
}

@media (max-width: 900px) {
  :root {
    --t-micro: 0.75rem;                 /* 11px → 12px: mobilde okunur alt sınır */
    --t-body: 1rem;
    --gutter: max(1.25rem, calc(1.25rem + var(--safe-l)));
    --header-h: 74px;
  }
  .shell { padding-right: max(var(--gutter), calc(1.25rem + var(--safe-r))); }
  .label { letter-spacing: .2em; }
  .lead { font-size: 1.05rem; line-height: 1.6; }
  .body-lg { font-size: 1rem; line-height: 1.7; }
}

/* Dokunmatik cihazlar: hedef boyutları ve geri bildirim */
@media (hover: none) {
  a, button, input, select, textarea, label {
    -webkit-tap-highlight-color: rgba(195, 146, 72, .18);
  }

  /* Butonlar — parmakla rahat basılacak yükseklik */
  .btn {
    min-height: 52px; padding: 1.1em 1.9em;
    font-size: .78rem; letter-spacing: .16em;
  }
  .btn:active { transform: scale(.985); }

  /* Satır içi bağlantılar: görünümü bozmadan dokunma alanını büyüt */
  .tlink { padding-block: .55rem; margin-block: -.55rem; }
  .tlink::after { bottom: .55rem; }

  /* Blok hâlindeki bağlantılar tam hedef yüksekliğine çıksın */
  .tlink--on,
  .footer__col a,
  .crumbs a,
  .info-card p a,
  .menu__social a {
    display: inline-flex; align-items: center; min-height: 44px;
  }
  .footer__col li + li { margin-top: .15rem; }

  /* Etiket/onay kutuları */
  .chip span { min-height: 46px; padding: .9em 1.2em; font-size: .82rem; }

  /* Form alanları — 16px altı iOS'ta otomatik yakınlaştırma yapar */
  .field input, .field textarea, .field select { font-size: 16px; padding-block: .55rem 1rem; }
  .field { padding-top: 2rem; }
  .field > label { top: 2.1rem; font-size: 1rem; }
  .field.is-filled > label, .field:focus-within > label { transform: translateY(-1.7rem) scale(.7); }

  /* Akordeon başlıkları */
  .svc__head { padding-block: 1.25rem; min-height: 64px; }
  .faq__q { padding-block: 1.15rem; min-height: 60px; }
}