/* ═══════════════════════════════════════════════════════════════
   MyPetTaksi — Görsel Sistem v2  ·  "Emanet Protokolü"
   Palet: kalibre krem / mürekkep / kehribar · WCAG AA doğrulanmış
   Tipografi: Fraunces (opsz·SOFT·WONK) + Instrument Sans (wdth)
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* ── kağıt: açık zeminler ─────────────────────────────────── */
  --paper-0:#FFFCF5;
  --paper-1:#FAF5EA;
  --paper-2:#F0E7D6;
  --paper-3:#E3D5BC;
  --paper-4:#D3C1A2;

  /* ── mürekkep ─────────────────────────────────────────────── */
  --ink-0:#0E1F1A;
  --ink-1:#12261F;
  --ink-2:#1E3E35;
  --moss:#2C5F4C;
  --moss-1:#4A8570;

  /* ── nötr ─────────────────────────────────────────────────── */
  --muted:#5A6B62;      /* gövde metni — 5.20:1 */
  --muted-2:#767F78;    /* yalnız placeholder */

  /* ── kehribar ─────────────────────────────────────────────── */
  --amber:#E0A03C;      /* zemin/grafik — metin olarak KULLANMA */
  --amber-soft:#F5C36B;
  --amber-lite:#F0B24A; /* koyu zeminde metin — 8.45:1 */
  --amber-ink:#8F5D0E;  /* açık zeminde metin — 5.16:1 */

  /* ── terracotta ───────────────────────────────────────────── */
  --clay:#C4552F;
  --clay-ink:#B0480F;   /* açık zeminde metin — 5.11:1 */

  /* ── WhatsApp ─────────────────────────────────────────────── */
  --wa:#0E7A3C;         /* beyaz metinle 5.43:1 */
  --wa-hover:#0B6832;
  --wa-mark:#25D366;

  /* ── çizgiler ─────────────────────────────────────────────── */
  --line-hair:rgba(18,38,31,.085);
  --line:rgba(18,38,31,.14);
  --line-strong:rgba(18,38,31,.22);

  /* ── koyu bölüm ton seti ──────────────────────────────────── */
  --d-bg:#12261F;
  --d-bg-deep:#0E1F1A;
  --d-text:#F5EEDF;
  --d-text-2:#C9D6CE;
  --d-text-3:#8FA79A;
  --d-line:rgba(245,238,223,.14);
  --d-line-strong:rgba(245,238,223,.26);

  /* ── ritim ────────────────────────────────────────────────── */
  --s1:.25rem; --s2:.5rem; --s3:.75rem; --s4:1rem; --s5:1.5rem;
  --s6:2rem; --s7:3rem; --s8:4rem; --s9:6rem; --s10:8rem;

  --wrap:1240px;
  --gutter:clamp(1.25rem,4vw,2.5rem);
  --head-h:76px; --head-h-stuck:64px;

  /* ── yarıçap ──────────────────────────────────────────────── */
  --r-xs:8px; --r-sm:12px; --r:18px; --r-lg:26px; --r-xl:36px; --r-2xl:48px;

  /* ── gölge ────────────────────────────────────────────────── */
  --sh-1:0 1px 2px rgba(14,31,26,.05);
  --sh-2:0 1px 1px rgba(14,31,26,.04), 0 8px 20px -16px rgba(14,31,26,.30);
  --sh-3:0 2px 3px rgba(14,31,26,.05), 0 24px 48px -32px rgba(14,31,26,.40);
  --sh-4:0 1px 0 rgba(14,31,26,.06), 0 18px 40px -30px rgba(14,31,26,.45);
  --sh-4-up:0 -1px 0 rgba(14,31,26,.06), 0 -18px 40px -30px rgba(14,31,26,.45);
  --sh-photo:0 4px 12px -8px rgba(14,31,26,.22), 0 40px 80px -60px rgba(14,31,26,.62);
  --sh-wa:0 8px 18px -14px rgba(14,122,60,.55);
  --sh-dark:inset 0 1px 0 rgba(245,238,223,.07), 0 20px 44px -34px rgba(0,0,0,.7);

  /* ── hareket ──────────────────────────────────────────────── */
  --e-out:cubic-bezier(.22,1,.36,1);
  --e-soft:cubic-bezier(.33,1,.68,1);
  --e-inout:cubic-bezier(.65,0,.35,1);
  --t1:140ms; --t2:240ms; --t3:420ms; --t4:720ms; --t5:1100ms;

  /* ── tipografi ────────────────────────────────────────────── */
  --display:"Fraunces","Iowan Old Style",Georgia,"Times New Roman",serif;
  --body:"Instrument Sans","Segoe UI",-apple-system,"Helvetica Neue",Arial,sans-serif;
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--head-h) + 16px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  color: var(--ink-1);
  font-family: var(--body);
  font-size: clamp(1rem, .955rem + .2vw, 1.075rem);
  line-height: 1.62;
  font-weight: 400;
  background: linear-gradient(180deg, #FDF9F0 0%, var(--paper-1) 420px, var(--paper-1) 100%);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg { max-width: 100%; }
p { margin: 0; hyphens: manual; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }

.wrap { width: min(100% - (var(--gutter) * 2), var(--wrap)); margin-inline: auto; }

:focus-visible { outline: 2.5px solid var(--amber-ink); outline-offset: 3px; border-radius: 4px; }

::selection { background: var(--moss); color: var(--paper-0); }

html { scrollbar-color: var(--paper-4) var(--paper-1); scrollbar-width: thin; }
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--paper-1); }
::-webkit-scrollbar-thumb { background: var(--paper-4); border-radius: 999px; border: 3px solid var(--paper-1); }
::-webkit-scrollbar-thumb:hover { background: var(--muted-2); }

.skip {
  position: absolute; left: 50%; top: -70px; transform: translateX(-50%);
  background: var(--ink-1); color: var(--paper-0); padding: .7rem 1.2rem;
  border-radius: 0 0 var(--r-sm) var(--r-sm); z-index: 200; transition: top var(--t2) var(--e-out);
}
.skip:focus { top: 0; }

/* ═══ TİPOGRAFİ ════════════════════════════════════════════════ */
h1, h2, h3 {
  margin: 0; font-family: var(--display);
  font-optical-sizing: none; text-wrap: balance;
}

.hero-copy h1 {
  font-size: clamp(2.85rem, 1.35rem + 6.2vw, 5.5rem);
  line-height: 1.06; letter-spacing: -.032em; font-weight: 550;
  font-variation-settings: "opsz" 144, "SOFT" 58, "WONK" 1;
}
.sec-title {
  font-size: clamp(2rem, 1.15rem + 3.4vw, 3.4rem);
  line-height: 1.09; letter-spacing: -.026em; font-weight: 550;
  font-variation-settings: "opsz" 120, "SOFT" 50, "WONK" 1;
}
.cta h2, .step-body h3 {
  font-size: clamp(1.62rem, 1.1rem + 2.05vw, 2.3rem);
  line-height: 1.16; letter-spacing: -.02em; font-weight: 600;
  font-variation-settings: "opsz" 72, "SOFT" 40, "WONK" 0;
}
.card h3, .region h3, .quote-title, .faq summary, .proto-item h3 {
  font-size: clamp(1.14rem, 1.02rem + .48vw, 1.36rem);
  line-height: 1.28; letter-spacing: -.012em; font-weight: 600;
  font-variation-settings: "opsz" 36, "SOFT" 24, "WONK" 0;
}
.brand-word {
  font-family: var(--display); font-size: 1.28rem; line-height: 1;
  letter-spacing: -.03em; font-weight: 700;
  font-variation-settings: "opsz" 48, "SOFT" 34, "WONK" 1;
}
.brand-word em { font-style: italic; font-weight: 400; color: var(--moss); }

.lede, .sec-lede {
  font-size: clamp(1.06rem, .98rem + .4vw, 1.22rem);
  line-height: 1.56; letter-spacing: -.004em;
}
.card p, .trust p, .faq-body p, .proto-item p {
  font-size: .955rem; line-height: 1.6; letter-spacing: .002em;
}
.quote-sub, .quote-note, .price-factors span, .foot-base, .photo-cap {
  font-size: .855rem; line-height: 1.5; letter-spacing: .004em;
}

.eyebrow {
  font-family: var(--body); font-size: .775rem; font-weight: 600;
  letter-spacing: .14em; font-stretch: 90%; color: var(--moss);
  text-transform: none; line-height: 1;
  display: flex; align-items: center; gap: .65rem; margin-bottom: 1.15rem;
}
.dash { width: 26px; height: 2px; background: var(--amber); border-radius: 2px; flex: none; }
.sec-dark .eyebrow, .cta .eyebrow { color: var(--amber-lite); }
.sec-dark .dash, .cta .dash { background: var(--amber-lite); }

.num { font-variant-numeric: tabular-nums lining-nums; font-feature-settings: "tnum" 1, "lnum" 1; }

/* ═══ BÖLÜM RİTMİ ══════════════════════════════════════════════ */
.sec { position: relative; z-index: 2; padding-block: clamp(5rem, 9vw, 8.5rem); }
.sec--tight { padding-block: clamp(3.5rem, 6vw, 5.5rem); }
.sec--air { padding-block: clamp(7rem, 13vw, 12rem); }
.sec-head { max-width: 660px; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.sec-lede { margin-top: 1.15rem; color: var(--muted); max-width: 55ch; }
.sec-tint { background: var(--paper-2); }

/* ═══ DOKU (L1) ════════════════════════════════════════════════ */
.grain {
  position: fixed; inset: 0; z-index: 1; pointer-events: none;
  opacity: .15; mix-blend-mode: multiply;
  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='.62' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
  background-size: 220px 220px;
}
.sec-dark, .cta, .site-foot { position: relative; isolation: isolate; }
.sec-dark::after, .cta::after, .site-foot::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  opacity: .055; mix-blend-mode: screen;
  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='.62' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
  background-size: 220px 220px;
  border-radius: inherit;
}

/* ═══ MARKA ════════════════════════════════════════════════════ */
.brand { display: inline-flex; align-items: center; gap: .6rem; }
.brand-mark {
  width: 30px; height: 30px; fill: var(--ink-1); flex: none;
  transition: transform 420ms var(--e-out);
}
.brand:hover .brand-mark { transform: rotate(-8deg) scale(1.05); }

/* ═══ HEADER ═══════════════════════════════════════════════════ */
.site-head {
  position: sticky; top: 0; z-index: 100;
  contain: layout;
  background: rgba(250,245,234,.72);
  backdrop-filter: blur(16px) saturate(1.35);
  -webkit-backdrop-filter: blur(16px) saturate(1.35);
  transition: box-shadow var(--t2) var(--e-soft), background-color var(--t2) var(--e-soft);
}
.site-head.stuck { background: rgba(250,245,234,.88); box-shadow: var(--sh-4); }

.head-in {
  min-height: var(--head-h); display: flex; align-items: center; gap: 1.5rem;
  transition: min-height var(--t2) var(--e-inout);
}
.site-head.stuck .head-in { min-height: var(--head-h-stuck); }

.nav { display: flex; gap: 1.7rem; margin-left: auto; }
.nav a {
  position: relative; padding: .35rem 0; color: var(--ink-2);
  font-size: .925rem; font-weight: 500; letter-spacing: .002em;
  font-stretch: 92%; line-height: 1;
  transition: color var(--t1) var(--e-soft);
}
.nav a::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: 0;
  height: 2px; background: var(--amber); border-radius: 2px;
  transition: right var(--t2) var(--e-out);
}
.nav a:hover { color: var(--ink-1); }
.nav a:hover::after { right: 0; }

.head-cta { display: flex; align-items: center; gap: .85rem; margin-left: auto; flex: none; }
.nav + .head-cta { margin-left: 0; }

.tel-link {
  display: inline-flex; align-items: center; gap: .45rem;
  font-weight: 600; font-size: .95rem; white-space: nowrap;
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
  transition: color var(--t1) var(--e-soft);
}
.tel-link svg { width: 17px; height: 17px; fill: var(--moss); flex: none; }
.tel-link:hover { color: var(--moss); }

/* ═══ BUTONLAR ═════════════════════════════════════════════════ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  font-family: var(--body); font-weight: 600; font-size: .955rem; line-height: 1.1;
  letter-spacing: .004em;
  padding: .78rem 1.2rem; border-radius: 999px; border: 1.5px solid transparent;
  cursor: pointer; white-space: nowrap;
  transition: background-color var(--t2) var(--e-soft), color var(--t2) var(--e-soft),
              box-shadow var(--t2) var(--e-soft), border-color var(--t2) var(--e-soft);
}
.btn svg { width: 17px; height: 17px; fill: currentColor; flex: none; }
.btn:active { transform: scale(.985); transition: transform 90ms linear; }
.btn-lg { font-size: 1.02rem; padding: 1rem 1.7rem; }

.btn-wa { background: var(--wa); color: #fff; box-shadow: var(--sh-wa); }
.btn-wa:hover { background: var(--wa-hover); }

.btn-solid { background: var(--ink-1); color: var(--paper-0); box-shadow: var(--sh-2); }
.btn-solid:hover { background: var(--ink-2); box-shadow: var(--sh-3); }

.btn-ghost { background: transparent; color: var(--ink-1); border-color: var(--line-strong); }
.btn-ghost:hover { background: var(--paper-2); border-color: var(--ink-1); }

.btn-outline {
  background: transparent; color: var(--d-text); border-color: rgba(245,238,223,.42);
  font-variant-numeric: tabular-nums lining-nums;
}
.btn-outline:hover { background: rgba(245,238,223,.12); border-color: var(--d-text); }

/* ═══ FOTOĞRAF SİSTEMİ ═════════════════════════════════════════ */
.photo {
  position: relative; z-index: 2; overflow: hidden;
  border-radius: var(--r-lg); background: var(--paper-3);
}
/* <picture> varsayılan olarak inline'dır; .photo ile img arasına girince
   img'nin height:100% değeri .photo yerine ona göre çözümlenir ve görsel
   sıfır yüksekliğe düşebilir. Blok yaparak kapsayıcı zinciri korunuyor. */
.photo picture { display: block; width: 100%; height: 100%; }
.photo img {
  display: block; width: 100%; height: 100%; object-fit: cover;
  filter: saturate(.94) contrast(.98);
}
.photo--shadow { box-shadow: var(--sh-photo); }
.photo-cap {
  margin-top: .85rem; color: var(--muted); display: flex; gap: .5rem; align-items: baseline;
}
.photo-cap b { color: var(--ink-2); font-weight: 600; }

/* ═══ HERO ═════════════════════════════════════════════════════ */
.hero {
  position: relative; z-index: 2; isolation: isolate; overflow: hidden;
  padding-block: clamp(3rem, 6vw, 5.5rem) clamp(4rem, 8vw, 7rem);
}
.hero::before {
  content: ""; position: absolute; top: -24%; right: -10%;
  width: min(64vw, 880px); aspect-ratio: 1; pointer-events: none; z-index: 0;
  background: radial-gradient(circle at 50% 50%,
    rgba(224,160,60,.24) 0%, rgba(224,160,60,.11) 34%, rgba(224,160,60,0) 64%);
}
.hero::after {
  content: ""; position: absolute; left: -8%; bottom: -6%;
  width: min(44vw, 560px); aspect-ratio: 1; pointer-events: none; z-index: 0;
  background: radial-gradient(circle at 50% 50%, rgba(44,95,76,.14) 0%, rgba(44,95,76,0) 66%);
}

.hero-grid {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: 1.12fr .88fr;
  gap: clamp(2rem, 5vw, 4.5rem); align-items: center;
}
.hero-copy h1 { margin-bottom: 1.4rem; }

/* Hero fotoğrafı — teklif kartının ARKASINDAN taşan bir kompozisyon
   denendi, ölçüldü (kart üstünde 35px, altında 3px, sağında 55px boşluk
   çıktı — canlı sitede fotoğraf neredeyse tamamen kartın altında
   kayboldu). O yaklaşım terk edildi. Bunun yerine hero-copy sütununun
   KENDİ İÇİNDE, lede/butonların yanında normal akışta duruyor — hiçbir
   örtüşme/z-index riski yok, her ekran genişliğinde garanti çalışır.
   Sürücü/insan YOK — kasıtlı: "bu bizim ekibimiz" iddiası taşımıyor. */
.hero-split { display: flex; gap: clamp(1.2rem, 3vw, 2rem); align-items: flex-start; }
.hero-split-text { flex: 1 1 auto; min-width: 0; }

.hero-photo {
  flex: none; width: clamp(112px, 13vw, 168px); aspect-ratio: 4 / 5;
  border-radius: var(--r-lg); overflow: hidden;
  box-shadow: var(--sh-photo);
  background: var(--paper-3);
  transform: rotate(-3deg);
}
.hero-photo img {
  display: block; width: 100%; height: 100%; object-fit: cover;
  filter: saturate(.94) contrast(.98);
}

.hl { position: relative; font-style: italic; font-weight: 400; color: var(--moss); white-space: nowrap; }
.hl-brush {
  position: absolute; left: -.03em; right: -.03em; bottom: .02em; height: .3em;
  z-index: -1; pointer-events: none; transform-origin: left center;
}
.js .hl-brush { transform: scaleX(0); transition: transform 620ms var(--e-out) 320ms; }
.js .hero-copy.is-in .hl-brush { transform: scaleX(1); }
.hl-brush svg { display: block; width: 100%; height: 100%; }

.lede { color: var(--ink-2); max-width: 46ch; }
.hero-btns { display: flex; flex-wrap: wrap; align-items: center; gap: 1.1rem; margin-top: 2rem; }

.chips { display: flex; flex-wrap: wrap; gap: .5rem .6rem; margin-top: 2.2rem; }
.chips li {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .845rem; font-weight: 500; letter-spacing: .006em; font-stretch: 88%;
  line-height: 1.35; color: var(--ink-2);
  background: var(--paper-0); border: 1px solid var(--line-hair);
  padding: .45rem .9rem .45rem .72rem; border-radius: 999px;
  box-shadow: var(--sh-1);
}
.chips svg { width: 13px; height: 13px; fill: var(--amber-ink); flex: none; }

/* ═══ HIZLI TEKLİF KARTI ═══════════════════════════════════════ */
.quote {
  position: relative; z-index: 3;
  background: var(--paper-0); border: 1px solid var(--line);
  border-radius: var(--r-xl); padding: clamp(1.6rem, 2.6vw, 2.25rem);
  box-shadow: var(--sh-3), inset 0 1px 0 rgba(255,255,255,.72);
}
.quote::before {
  content: ""; position: absolute; inset: 8px; border-radius: 28px;
  border: 1px dashed var(--line-hair); pointer-events: none;
}
.quote-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.quote-meta {
  font-size: .775rem; font-weight: 600; letter-spacing: .14em;
  font-stretch: 90%; color: var(--moss); white-space: nowrap;
}
.quote-sub { color: var(--muted); margin-top: .4rem; }
.quote-form { display: grid; gap: .95rem; margin-top: 1.5rem; }

.fld { display: grid; gap: .4rem; border: 0; padding: 0; margin: 0; min-width: 0; }
.fld legend, .lbl {
  font-size: .775rem; font-weight: 600; letter-spacing: .12em;
  font-stretch: 90%; color: var(--moss); padding: 0; text-transform: none;
}
.row { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }

.quote-form input[type="text"], .quote-form select {
  font-family: var(--body); font-size: .98rem; color: var(--ink-1);
  background: var(--paper-1); border: 1.5px solid var(--line);
  border-radius: var(--r-sm); padding: .72rem .85rem; width: 100%;
  box-shadow: var(--sh-1); caret-color: var(--moss);
  transition: border-color var(--t1) var(--e-soft), background-color var(--t1) var(--e-soft);
}
.quote-form input::placeholder { color: var(--muted-2); }
.quote-form input:focus, .quote-form select:focus {
  outline: none; border-color: var(--moss); background: var(--paper-0);
}
.quote-form select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%232C5F4C' stroke-width='1.8' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .9rem center; background-size: 12px;
  padding-right: 2.4rem;
}

.quote-form input.is-invalid { border-color: var(--clay-ink); background: var(--paper-0); }
.fld-err {
  display: flex; align-items: center; gap: .5rem;
  font-size: .85rem; font-weight: 500; color: var(--clay-ink);
  margin-top: -.3rem;
}

.pills { display: flex; gap: .45rem; flex-wrap: wrap; }
.pill { flex: 1 1 auto; }
.pill input { position: absolute; opacity: 0; width: 0; height: 0; }
.pill span {
  display: flex; align-items: center; justify-content: center; gap: .4rem;
  font-size: .9rem; font-weight: 600; cursor: pointer;
  border: 1.5px solid var(--line); border-radius: var(--r-sm);
  padding: .6rem .5rem; background: var(--paper-1);
  transition: background-color var(--t1) var(--e-soft), border-color var(--t1) var(--e-soft),
              color var(--t1) var(--e-soft);
}
.pill svg { width: 17px; height: 17px; fill: currentColor; flex: none; opacity: .85; }
.pill span:hover { border-color: var(--moss); }
.pill input:checked + span { background: var(--ink-1); color: var(--paper-0); border-color: var(--ink-1); }
.pill input:focus-visible + span { outline: 2.5px solid var(--amber-ink); outline-offset: 2px; }

.quote-note { color: var(--muted); text-align: center; }
.quote-form .btn { width: 100%; }

/* ═══ HİZMET KARTLARI ══════════════════════════════════════════ */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 1.1rem; }
.card {
  position: relative; background: var(--paper-1);
  border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 1.9rem 1.7rem 1.75rem;
  box-shadow: var(--sh-2), inset 0 1px 0 rgba(255,255,255,.72);
  transition: background-color var(--t2) var(--e-soft), border-color var(--t2) var(--e-soft),
              box-shadow var(--t3) var(--e-soft);
}
.card:hover { background: var(--paper-0); border-color: var(--line-strong); box-shadow: var(--sh-3); }
.card-ico { width: 30px; height: 30px; margin-bottom: 1rem; display: block; }
.card-ico svg { width: 100%; height: 100%; fill: none; stroke: var(--moss); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.card-ico .acc { stroke: var(--amber-ink); }
.card h3 { margin-bottom: .6rem; }
.card p { color: var(--muted); }

.tag {
  display: inline-block; vertical-align: middle;
  font-family: var(--body); font-size: .72rem; font-weight: 600; letter-spacing: .06em;
  font-stretch: 88%; background: var(--clay-ink); color: #fff;
  padding: .22rem .55rem; border-radius: 999px; margin-left: .45rem;
  position: relative; top: -2px;
  font-variant-numeric: tabular-nums lining-nums;
}
.card-urgent { background: linear-gradient(172deg, #FBEDE4, var(--paper-1) 58%); }

/* ═══ PROTOKOL / KABİN ŞEMASI ══════════════════════════════════ */
.proto-grid {
  display: grid; grid-template-columns: 1.25fr .75fr;
  gap: clamp(2rem, 4vw, 3.5rem); align-items: center;
}
.proto-fig { margin: 0; }
.proto-fig .photo { background: var(--paper-1); border: 1px solid var(--line); }
.proto-fig img { object-fit: contain; filter: none; }
.proto-list { display: grid; gap: 1.4rem; }
.proto-item { display: grid; grid-template-columns: auto 1fr; gap: 1rem; align-items: start; }
.proto-key {
  width: 30px; height: 30px; border-radius: 50%; flex: none;
  background: var(--amber); color: var(--ink-1);
  display: grid; place-items: center;
  font-size: .82rem; font-weight: 700; line-height: 1;
  font-variant-numeric: tabular-nums lining-nums;
}
.proto-item h3 { margin-bottom: .35rem; }
.proto-item p { color: var(--muted); }

/* ═══ NASIL ÇALIŞIR (koyu levha) ═══════════════════════════════ */
.sec-dark {
  color: var(--d-text);
  border-radius: var(--r-2xl);
  width: min(100% - 1.5rem, 1420px); margin-inline: auto;
  background: radial-gradient(120% 70% at 50% -10%, rgba(74,133,112,.13), transparent 52%), var(--ink-1);
}
.sec-dark .sec-lede { color: var(--d-text-2); }

/* ═══ YOLCULUK — sinematik sahne dizisi ════════════════════════
   Taban: sade dikey liste (JS'siz, mobilde, hareket azaltmada da
   budur). ≥761px + hareket izni varsa CSS-only sticky yığın —
   scroll-linked hesap yok, sadece position:sticky + kademeli top. */
.journey-track {
  max-width: 720px; margin-inline: auto;
  display: flex; flex-direction: column; gap: 1.4rem;
}
.journey-scene { position: relative; }

/* .photo SINIFINI KULLANMIYOR — kaydırmayla-açılan clip-path maskesi
   sitede TAMAMEN kaldırıldı (main.js'e bakın): maskelenmiş bir öğenin
   görünür alanı sıfırken IntersectionObserver'ın onu "kesişmiyor"
   sayıp asla açmadığı, kendi kendini kilitleyen bir döngü canlı
   tarayıcıda ölçümle doğrulandı. Bu görseller hep doğrudan görünür —
   zaten bölümün tek premium hareketi sticky-yığının kendisi. */
.journey-photo {
  position: relative; z-index: 2; overflow: hidden;
  border-radius: var(--r-lg); background: var(--paper-3);
  aspect-ratio: 16 / 9;
}
.journey-photo picture { display: block; width: 100%; height: 100%; }
.journey-photo img {
  display: block; width: 100%; height: 100%; object-fit: cover;
  filter: saturate(.94) contrast(.98);
}

/* Görsel üzerine metin okunabilirlik katmanı — en kötü durumda
   (bembeyaz görsel) bile normal metinde AA'yı geçen hesaplanmış
   scrim (bkz. görsel sistem spec §6.3, alt kenar .78 → 7.30:1). */
.journey-photo::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  border-radius: inherit;
  background:
    linear-gradient(to top,
      rgba(14,31,26,.78) 0%, rgba(14,31,26,.66) 18%,
      rgba(14,31,26,.34) 42%, rgba(14,31,26,.08) 66%, rgba(14,31,26,0) 84%),
    linear-gradient(to right,
      rgba(14,31,26,.42) 0%, rgba(14,31,26,.12) 38%, rgba(14,31,26,0) 62%);
}

.journey-cap {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 3;
  display: flex; align-items: flex-start; gap: 1rem;
  padding: clamp(1.1rem, 4vw, 1.8rem);
}
.journey-cap .proto-key { flex: none; margin-top: .15rem; }
/* h3/p tipografisi trust-cap ile PAYLAŞILIYOR (aşağıda tanımlı) —
   ikisi de aynı mekanizma: fotoğraf üstü scrim + başlık. Önceden
   journey-cap h3 hiç font tanımı almıyordu, global h1/h2/h3 kuralından
   Fraunces miras alıp trust-cap'ten (Instrument Sans) farklı bir ağızla
   konuşuyordu — canlı sitede ölçümle doğrulandı. */

.sec-dark .photo-cap { color: var(--d-text-3); }
.sec-dark .photo-cap b { color: var(--d-text-2); }

@media (min-width: 761px) {
  @media (prefers-reduced-motion: no-preference) {
    .journey-scene {
      position: sticky; background: var(--paper-1);
      border-radius: var(--r-2xl); padding: 10px;
      box-shadow: var(--sh-3), inset 0 1px 0 rgba(255,255,255,.5);
    }
    .journey-scene:nth-child(1) { z-index: 1; top: calc(var(--head-h-stuck) +  8px); transform: rotate(-1.1deg); }
    .journey-scene:nth-child(2) { z-index: 2; top: calc(var(--head-h-stuck) + 26px); transform: rotate(.8deg); }
    .journey-scene:nth-child(3) { z-index: 3; top: calc(var(--head-h-stuck) + 44px); transform: rotate(-.6deg); }
    .journey-scene:nth-child(4) { z-index: 4; top: calc(var(--head-h-stuck) + 62px); transform: rotate(.9deg); }
  }
}

/* ═══ GÜVEN ızgarası + fotoğraf hücresi ════════════════════════ */
.grid-trust {
  display: grid; grid-template-columns: repeat(3, 1fr);
  /* Fotoğraf hücreleri kare (1:1) olduğu için satırı doğal yüksekliğe
     bırakırsak metin kartlarını da o yüksekliğe gerer, altlarında
     büyük boşluk kalır. minmax(x,auto) işe yaramıyor — "auto" yine
     en uzun hücreye büyüyor. Satırı SABİT yükseklikte tutuyoruz;
     fotoğraf object-fit:cover ile kırpılarak sığar. */
  grid-auto-rows: 260px;
  gap: 1px;
  background: var(--line); border: 1px solid var(--line);
  border-radius: var(--r-lg); overflow: hidden;
}
.trust { background: var(--paper-1); padding: 1.9rem 1.7rem; transition: background-color var(--t2) var(--e-soft); }
.trust:hover { background: var(--paper-0); }
.trust h3 {
  font-family: var(--body); font-size: 1.06rem; font-weight: 700;
  line-height: 1.35; letter-spacing: -.01em; margin-bottom: .55rem;
  padding-left: 1.6rem; position: relative;
}
.trust h3 svg { position: absolute; left: 0; top: .28em; width: 14px; height: 14px; fill: var(--moss); }
.trust p { color: var(--muted); }
.trust--photo { padding: 0; background: var(--paper-3); position: relative; }
.trust--photo .photo { border-radius: 0; height: 100%; min-height: 240px; position: relative; }

/* Fotoğraf üzerine başlık — journey-photo'daki hesaplanmış scrim ile
   aynı değerler (görsel sistem spec §6.3, alt kenar .78 → 7.30:1). */
.trust--photo .photo::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(to top,
      rgba(14,31,26,.78) 0%, rgba(14,31,26,.66) 18%,
      rgba(14,31,26,.34) 42%, rgba(14,31,26,.08) 66%, rgba(14,31,26,0) 84%),
    linear-gradient(to right,
      rgba(14,31,26,.42) 0%, rgba(14,31,26,.12) 38%, rgba(14,31,26,0) 62%);
}
.trust-cap {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 3;
  padding: 1.1rem 1.2rem 1.2rem;
}
.trust-cap h3, .journey-cap h3 {
  color: var(--d-text); font-family: var(--body); font-weight: 700;
  font-size: 1rem; line-height: 1.3; margin-bottom: .25rem;
}
.trust-cap p, .journey-cap p { color: var(--d-text-2); font-size: .85rem; max-width: 42ch; }

/* ═══ FİYAT ════════════════════════════════════════════════════ */
.price-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.price-copy .btn { margin-top: 1.8rem; }
.price-factors { display: grid; gap: .8rem; }
.price-factors li {
  background: var(--paper-0); border: 1px solid var(--line); border-radius: var(--r);
  padding: 1.1rem 1.3rem; display: grid; gap: .2rem;
  box-shadow: var(--sh-1);
  transition: border-color var(--t2) var(--e-soft), box-shadow var(--t2) var(--e-soft);
}
.price-factors li:hover { border-color: var(--line-strong); box-shadow: var(--sh-2); }
.price-factors strong {
  font-family: var(--display); font-size: 1.08rem; line-height: 1.3;
  letter-spacing: -.008em; font-weight: 600;
  font-variation-settings: "opsz" 30, "SOFT" 20, "WONK" 0;
}
.price-factors span { color: var(--muted); }

/* ═══ BÖLGELER + harita ════════════════════════════════════════ */
.regions-grid { display: grid; grid-template-columns: .95fr 1.05fr; gap: clamp(2rem, 4vw, 3.5rem); align-items: center; }
.map-fig { margin: 0; }
.map-fig .photo { background: var(--paper-1); border: 1px solid var(--line); aspect-ratio: 3 / 2; }
.map-fig img { object-fit: cover; filter: none; }
.regions { display: grid; gap: 1.6rem; }
.region h3 { margin-bottom: 1rem; padding-bottom: .85rem; border-bottom: 1.5px dashed var(--line); }
.region ul { display: flex; flex-wrap: wrap; gap: .45rem; }
.region li {
  font-size: .845rem; font-weight: 500; letter-spacing: .006em; font-stretch: 88%;
  line-height: 1.35; color: var(--ink-2);
  background: var(--paper-2); border-radius: 999px; padding: .38rem .82rem;
  transition: background-color var(--t1) var(--e-soft), color var(--t1) var(--e-soft);
}
.region li:hover { background: var(--ink-1); color: var(--paper-0); }

/* ═══ SAKİNLİK bandı (kedi portresi) ═══════════════════════════ */
.calm { position: relative; z-index: 2; }
.calm-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.calm-fig { margin: 0; }
.calm-fig .photo { aspect-ratio: 3 / 4; box-shadow: var(--sh-photo); }
.calm blockquote {
  margin: 0; font-family: var(--display);
  font-size: clamp(1.5rem, 1rem + 1.9vw, 2.15rem); line-height: 1.24;
  letter-spacing: -.018em; font-weight: 500;
  font-variation-settings: "opsz" 90, "SOFT" 46, "WONK" 1;
  text-wrap: balance;
}
.calm-note { margin-top: 1.5rem; color: var(--muted); max-width: 52ch; }

/* ═══ SSS ══════════════════════════════════════════════════════ */
.faq-wrap { max-width: 880px; }
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  list-style: none; cursor: pointer; position: relative;
  padding: 1.4rem 3rem 1.4rem 0;
  transition: color var(--t1) var(--e-soft);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover, .faq details[open] summary { color: var(--moss); }
.faq summary::after {
  content: ""; position: absolute; right: 4px; top: 50%;
  width: 15px; height: 15px; margin-top: -7px;
  background: linear-gradient(var(--moss),var(--moss)) center/100% 2px no-repeat,
              linear-gradient(var(--moss),var(--moss)) center/2px 100% no-repeat;
  transition: transform 300ms var(--e-inout);
}
.faq details[open] summary::after { transform: rotate(135deg); }
.faq-body { padding: 0 3rem 1.5rem 0; }
.faq-body p { color: var(--muted); max-width: 56ch; }
@keyframes fadeDown { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: none; } }
.faq details[open] .faq-body { animation: fadeDown 240ms var(--e-out) both; }

/* ═══ CTA ══════════════════════════════════════════════════════ */
.cta {
  position: relative; z-index: 2; color: var(--d-text); overflow: hidden;
  background: radial-gradient(90% 100% at 50% -25%, rgba(224,160,60,.16), transparent 56%), var(--moss);
}
.cta-in { position: relative; z-index: 1; text-align: center; max-width: 640px; margin-inline: auto; }
.cta-paw { width: 44px; height: 44px; fill: var(--amber-soft); margin-bottom: 1.4rem; transform: rotate(-10deg); }
.cta h2 { margin-bottom: 1rem; }
.cta p { color: rgba(245,238,223,.82); font-size: 1.06rem; }
.cta-btns { display: flex; flex-wrap: wrap; gap: .8rem; justify-content: center; margin-top: 2.2rem; }

/* ═══ FOOTER ═══════════════════════════════════════════════════ */
.site-foot {
  position: relative; z-index: 2; background: var(--d-bg-deep);
  color: var(--d-text-2); padding: clamp(3rem, 6vw, 4.5rem) 0 2rem; font-size: .93rem;
}
.site-foot .wrap { position: relative; z-index: 1; }
.site-foot .brand-mark { fill: var(--d-text); }
.site-foot .brand-word { color: var(--d-text); }
.site-foot .brand-word em { color: var(--amber-lite); }

.foot-grid { display: grid; grid-template-columns: 1.7fr 1fr 1fr 1fr; gap: 2.5rem; }
.foot-brand p { margin-top: 1rem; max-width: 34ch; }
.foot-col h3 {
  font-family: var(--body); font-size: .775rem; font-weight: 600;
  letter-spacing: .14em; font-stretch: 90%; color: var(--amber-lite);
  margin-bottom: .9rem; text-transform: none;
}
.foot-col h3.mt { margin-top: 1.6rem; }
.foot-col li { margin-bottom: .5rem; }
.foot-col strong { color: var(--d-text); }
.foot-col a { transition: color var(--t1) var(--e-soft); }
.foot-col a:hover { color: var(--amber-lite); }
.foot-base {
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: .6rem;
  margin-top: 3rem; padding-top: 1.6rem;
  border-top: 1px solid var(--d-line); color: var(--d-text-3);
}

/* ═══ MOBİL ÇUBUK ══════════════════════════════════════════════ */
.mobile-bar { display: none; }

/* ═══ ANİMASYON ════════════════════════════════════════════════ */
/* Giriş animasyonları da yalnızca JS varken. `.js` sınıfı <head>'deki
   satır içi script ile eklenir; JS kapalıysa her şey doğrudan görünür. */
@keyframes rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.js .a1, .js .a2, .js .a3 { animation: rise var(--t4) var(--e-out) both; }
.js .a1 { animation-delay: 0ms; }
.js .a2 { animation-delay: 90ms; }
.js .a3 { animation-delay: 180ms; }

.js .reveal {
  opacity: 0; transform: translateY(14px);
  transition: opacity var(--t3) var(--e-out), transform var(--t3) var(--e-out);
}
.js .reveal.is-in { opacity: 1; transform: none; }

/* ═══ RESPONSIVE ═══════════════════════════════════════════════ */
@media (max-width: 1060px) {
  .nav { display: none; }
  .hero-grid { grid-template-columns: 1fr; }
  .quote { max-width: 540px; }
  .price-wrap, .proto-grid, .regions-grid, .calm-grid { grid-template-columns: 1fr; }
  .grid-trust { grid-template-columns: repeat(2, 1fr); }
  .foot-grid { grid-template-columns: 1fr 1fr; gap: 2rem; }
  .calm-fig { max-width: 420px; }
}

@media (max-width: 760px) {
  :root { --head-h: 66px; --head-h-stuck: 60px; }
  h1 br, .sec-title br { display: none; }
  .hl { white-space: normal; }
  .head-cta .tel-link, .hero-btns .tel-link { display: none; }
  .hero-btns .btn { flex: 1 1 100%; }
  .hero-split { flex-direction: column; }
  .hero-photo { align-self: center; width: min(56vw, 210px); transform: none; }
  .row { grid-template-columns: 1fr; }
  .grid-trust { grid-template-columns: 1fr; }
  /* Tek sütunda satır paylaşımı yok — her hücre kendi doğal boyutuna
     dönsün. Masaüstündeki 260px sabiti burada metin kartlarının
     altında büyük boşluk bırakıyordu (ölçümle doğrulandı). */
  .grid-trust { grid-auto-rows: auto; }
  .trust--photo .photo { aspect-ratio: 4 / 3; min-height: 0; height: auto; }
  .sec-dark { border-radius: var(--r-lg); }
  /* 16:9, dar mobil genişlikte çok kısa kalıyor; başlık+açıklama
     görüntünün yarısından fazlasını kaplayıp konuyu (sürücü/kedi)
     örtebiliyordu (ölçümle doğrulandı). Daha dikey oran nefes payı verir. */
  .journey-photo { aspect-ratio: 4 / 3; }
  .foot-grid { grid-template-columns: 1fr; }
  .faq summary { padding-right: 2.4rem; }
  .faq-body { padding-right: 1rem; }

  body { padding-bottom: 76px; }
  .mobile-bar {
    display: grid; grid-template-columns: auto 1fr; gap: .6rem;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 150;
    padding: .7rem .9rem calc(.7rem + env(safe-area-inset-bottom, 0px));
    background: rgba(250,245,234,.92);
    backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
    border-top: 1px solid var(--line); box-shadow: var(--sh-4-up);
  }
  .mobile-bar a {
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    font-weight: 600; font-size: .97rem; border-radius: 999px; padding: .85rem 1rem;
  }
  .mobile-bar svg { width: 19px; height: 19px; fill: currentColor; }
  .mb-tel { background: var(--ink-1); color: var(--paper-0); padding-inline: 1.15rem !important; }
  .mb-wa { background: var(--wa); color: #fff; box-shadow: var(--sh-wa); }
}

@media (max-width: 380px) { .pills { flex-direction: column; } }

/* ═══ ERİŞİLEBİLİRLİK ══════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-property: opacity, background-color, color, border-color, box-shadow !important;
    transition-duration: 120ms !important;
  }
  .reveal, .a1, .a2, .a3 { opacity: 1 !important; transform: none !important; }
  .hl-brush { transform: scaleX(1) !important; }
  .head-in { min-height: var(--head-h) !important; }
}

@media print {
  .site-head, .mobile-bar, .grain, .quote-form .btn { display: none; }
  body { background: #fff; }
}