/* ============================================================================
   Reklora — kurumsal site stil sistemi
   ---------------------------------------------------------------------------
   Kısıtlar (bilerek): tek CSS dosyası · harici font/CDN/analytics YOK ·
   build adımı YOK · JS YOK. Meta incelemesinde sayfa hızlı, bağımsız ve
   izleme kodu olmadan yüklenmeli.

   Tasarım yönü: "sıcak kâğıt üzerine mürekkep" — esnaf tabelası ve matbaa
   kültürünü çağrıştıran koyu yeşil + kiremit kırmızısı; başlıklarda sistemde
   hazır bulunan serif aile (Iowan Old Style / Georgia / Palatino / Noto Serif)
   ile font indirmeden karakter. Silikon Vadisi gradyanı yok.

   İçindekiler
     1. Token'lar (açık + koyu)
     2. Sıfırlama ve tipografik temel
     3. Yardımcılar (wrap, eyebrow, skip link, odak)
     4. Üst bar
     5. Butonlar
     6. Hero
     7. WhatsApp mockup (tamamı saf CSS)
     8. Adımlar, çipler, not kartı, iletişim
     9. Hukuki sayfa düzeni (içindekiler + prose)
    10. Alt bilgi
    11. Hareket, baskı, azaltılmış hareket
   ========================================================================= */

/* ---- 1. Token'lar -------------------------------------------------------- */
:root {
  /* yüzeyler */
  --paper:      #fbf9f5;   /* ana zemin — sıcak kırık beyaz, saf beyaz değil */
  --paper-2:    #f3efe7;   /* bant / ikincil zemin */
  --surface:    #ffffff;   /* kart */
  --line:       #e2ddd2;   /* hairline */
  --line-soft:  #ece7dd;

  /* mürekkep */
  --ink:        #17211e;   /* 15.7:1 */
  --ink-2:      #4a5551;   /* 7.4:1  */
  --ink-3:      #5f6b66;   /* 5.3:1  — küçük metin için de AA */

  /* marka */
  --brand:      #0b6b5c;   /* 6.1:1  */
  --brand-deep: #085043;   /* 8.9:1  — bağlantı rengi */
  --brand-wash: #e6f0ec;
  --accent:     #b3541c;   /* 4.8:1  — kiremit */
  --accent-ink: #9c4715;   /* renkli zeminde metin için */
  --accent-wash:#f7ece3;

  /* WhatsApp mockup */
  --wa-wall:    #efe7dd;
  --wa-out:     #d9fdd3;
  --wa-in:      #ffffff;
  --wa-ink:     #111b21;
  --wa-meta:    #5f6b66;
  --wa-tick:    #1e88b5;
  --wa-bar:     #f0f2f5;
  --phone-shell:#2b3733;

  --focus:      #b3541c;
  --shadow-sm:  0 1px 2px rgba(23, 33, 30, .06);
  --shadow-md:  0 10px 30px -18px rgba(23, 33, 30, .45);
  --shadow-lg:  0 34px 60px -34px rgba(23, 33, 30, .55);

  /* biçim */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 22px;
  --r-pill: 999px;

  /* ölçü */
  --wrap: 68rem;
  --gutter: clamp(20px, 5vw, 40px);
  --measure: 38rem;           /* ~68 karakter okunur satır */

  /* tipografi — sistemde hazır bulunan aileler, indirme yok */
  --font-display: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia,
                  "Noto Serif", "Source Serif Pro", ui-serif, serif;
  --font-text: -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text",
               "Segoe UI", "Noto Sans", "Helvetica Neue", sans-serif;

  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper:      #101513;
    --paper-2:    #161d1a;
    --surface:    #171f1c;
    --line:       #26302c;
    --line-soft:  #1e2724;

    --ink:        #ece7dd;   /* 15.0:1 */
    --ink-2:      #b3bdb8;   /*  9.6:1 */
    --ink-3:      #93a09a;   /*  6.8:1 */

    --brand:      #4fc9b0;   /*  9.1:1 */
    --brand-deep: #6fd8c1;
    --brand-wash: #14302a;
    --accent:     #e8a06a;   /*  8.5:1 */
    --accent-ink: #efb589;
    --accent-wash:#2a1f16;

    --wa-wall:    #0b141a;
    --wa-out:     #005c4b;
    --wa-in:      #202c33;
    --wa-ink:     #e9edef;
    --wa-meta:    #c9dbd4;
    --wa-tick:    #53bdeb;
    --wa-bar:     #1f2c33;
    --phone-shell:#05090b;

    --focus:      #e8a06a;
    --shadow-sm:  0 1px 2px rgba(0, 0, 0, .5);
    --shadow-md:  0 10px 30px -18px rgba(0, 0, 0, .9);
    --shadow-lg:  0 34px 60px -34px rgba(0, 0, 0, 1);
  }
}

/* ---- 2. Sıfırlama ve tipografik temel ----------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: 1rem;
  line-height: 1.65;
  font-synthesis-weight: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.012em;
  color: var(--ink);
  margin: 0;
  text-wrap: balance;
}

h1 { font-size: clamp(1.95rem, 1.32rem + 3.1vw, 3.35rem); }
h2 { font-size: clamp(1.4rem, 1.19rem + 1.05vw, 2rem); }
h3 { font-size: clamp(1.1rem, 1.04rem + 0.3vw, 1.28rem); letter-spacing: -0.006em; }

p, li { color: var(--ink-2); margin: 0 0 1em; }
p:last-child, li:last-child { margin-bottom: 0; }

strong { color: var(--ink); font-weight: 600; }

a {
  color: var(--brand-deep);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}
a:hover { color: var(--accent-ink); }

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

::selection { background: var(--accent-wash); color: var(--ink); }

/* ---- 3. Yardımcılar ------------------------------------------------------ */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.measure { max-width: var(--measure); }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 14px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-ink);
}
.eyebrow::before {
  content: "";
  inline-size: 22px;
  block-size: 2px;
  background: var(--accent);
  border-radius: 2px;
}

.lead {
  font-size: clamp(1.06rem, 1.01rem + 0.28vw, 1.2rem);
  line-height: 1.6;
  color: var(--ink-2);
}

.sr-only {
  position: absolute;
  inline-size: 1px; block-size: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%);
  white-space: nowrap;
}

/* İçeriğe atla — klavye kullanıcısı için ilk durak.
   Gizleme `transform` ile yapılır: mantıksal inset (inset-block-start)
   geçişi Chrome'da uygulanmadığı için bağlantı odaklanınca görünmüyordu. */
.skip {
  position: absolute;
  inset-inline-start: 12px;
  inset-block-start: 12px;
  z-index: 50;
  padding: 12px 18px;
  background: var(--surface);
  color: var(--ink);
  border: 2px solid var(--accent);
  border-radius: var(--r-sm);
  font-weight: 600;
  text-decoration: none;
  transform: translateY(-200%);
  transition: transform .18s ease;
}
.skip:focus { transform: translateY(0); }

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

[id] { scroll-margin-block-start: 84px; }

/* ---- 4. Üst bar ---------------------------------------------------------- */
/* Opak zemin bilinçli: backdrop-filter düşük donanımlı Android telefonlarda
   sticky başlıkta compositing yükü ve görsel bozulma yaratıyordu. */
.site-head {
  position: sticky;
  inset-block-start: 0;
  z-index: 20;
  border-block-end: 1px solid var(--line);
  background: var(--paper);
}

.bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-block-size: 62px;
}

.logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-decoration: none;
  padding-block: 10px;
}

/* Sohbet baloncuğu işareti — saf CSS, ürünün "WhatsApp'ta yaşar" fikri */
.logo-mark {
  position: relative;
  inline-size: 26px;
  block-size: 24px;
  border-radius: 8px 8px 8px 3px;
  background: var(--brand);
  flex: none;
}
.logo-mark::before {
  content: "";
  position: absolute;
  inset-block-start: 8px;
  inset-inline-start: 6px;
  inline-size: 14px;
  block-size: 2px;
  border-radius: 2px;
  background: var(--paper);
  box-shadow: 0 5px 0 0 var(--paper);
}
.logo-mark::after {
  content: "";
  position: absolute;
  inset-block-end: -4px;
  inset-inline-start: 2px;
  border-block-start: 6px solid var(--brand);
  border-inline-end: 7px solid transparent;
}
/* Kelime markası TEK flex öğesi olmak zorunda: "Rek" çıplak metin düğümü olarak
   bırakılırsa flex `gap` araya girip marka adı "Rek lora" diye okunuyor.
   Ayrıca logoda italik KULLANILMAZ (serif italik "l" sol yan boşluğu aynı
   yanılsamayı yaratıyor) — ayrım yalnız renkle yapılır. */
.wordmark { white-space: nowrap; }
.logo em { font-style: normal; color: var(--brand); }

/* Üst bardaki bağlantı grubu: panel girişi + dil.
   `gap` 10px: 320px'te logo + iki hap yan yana sığmalı, 12px'te taşıyor. */
.bar-links {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: none;
}

/* Panel girişi bilerek "hayalet" düğme: ana eylem hâlâ pilot başvurusu (hero'daki dolu
   düğme). Onunla aynı ağırlıkta çizilirse ziyaretçi hangisine basacağını bilemez. */
.panel-link {
  display: inline-flex;
  align-items: center;
  min-block-size: 44px;
  padding: 0 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--ink-2);
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: border-color .18s ease, color .18s ease;
}
.panel-link:hover { border-color: var(--brand); color: var(--brand-deep); }

/* 25rem (400px) altında logo + iki hap yan yana sığmıyor. Hiçbirini gizlemiyoruz —
   panel girişi de dil de yeni kullanıcının aradığı şey; ikisini de daraltıyoruz.
   Dokunma hedefi 44px korunur, yalnız yatay iç boşluk kısılır. */
@media (max-width: 25rem) {
  .bar-links { gap: 6px; }
  .panel-link, .lang { padding: 0 11px; font-size: 0.8125rem; }
  .lang { gap: 6px; }
}

.lang {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-block-size: 44px;
  padding: 0 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--ink-2);
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: border-color .18s ease, color .18s ease;
}
.lang:hover { border-color: var(--brand); color: var(--brand-deep); }
.lang::before {
  content: "";
  inline-size: 15px; block-size: 15px;
  flex: none;
  border: 1.5px solid currentColor;
  border-radius: 50%;
  background:
    linear-gradient(currentColor, currentColor) center/100% 1.5px no-repeat,
    linear-gradient(currentColor, currentColor) center/1.5px 100% no-repeat;
  opacity: .65;
}

/* ---- 5. Butonlar --------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-block-size: 52px;
  padding: 0 24px;
  border: 1.5px solid transparent;
  border-radius: var(--r-pill);
  font-family: var(--font-text);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: transform .18s ease, background-color .18s ease,
              border-color .18s ease, color .18s ease;
}

.btn-primary {
  background: var(--brand);
  color: #ffffff;
  box-shadow: var(--shadow-md);
}
.btn-primary:hover { background: var(--brand-deep); color: #ffffff; transform: translateY(-1px); }
.btn-primary:active { transform: translateY(0); }

@media (prefers-color-scheme: dark) {
  .btn-primary { color: #08110e; }
  .btn-primary:hover { color: #08110e; }
}

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

.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-block-start: 28px;
}
.cta-row .btn { flex: 1 1 auto; min-inline-size: min(100%, 15rem); }

@media (min-width: 40rem) {
  .cta-row .btn { flex: 0 0 auto; min-inline-size: 0; }
}

/* ---- 6. Hero ------------------------------------------------------------- */
/* YALNIZ ana sayfa bölümleri. Çıplak `section` seçicisi kullanılmaz: hukuki
   sayfalarda madde sarmalayıcıları da <section> ve dolgu oraya sızıyordu. */
main > section { padding-block: clamp(52px, 8vw, 104px); }

.hero {
  position: relative;
  padding-block: clamp(38px, 6vw, 84px) clamp(52px, 8vw, 96px);
  overflow: hidden;
}
/* Sıcak ışık — düz gradyan yerine iki yumuşak radyal katman */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(60rem 34rem at 78% -12%, var(--brand-wash), transparent 62%),
    radial-gradient(40rem 26rem at 4% 8%, var(--accent-wash), transparent 60%);
  opacity: .85;
  pointer-events: none;
}
.hero > * { position: relative; }

.hero-grid { display: grid; gap: clamp(38px, 7vw, 60px); }

.hero h1 { margin-block-end: 18px; }
.hero h1 em {
  font-style: italic;
  color: var(--brand);
}
.hero .lead { max-inline-size: 34rem; }

.assurances {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin: 30px 0 0;
  padding: 0;
}
.assurances li {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--ink-2);
}
/* onay işareti — saf CSS */
.assurances li::before {
  content: "";
  inline-size: 6px;
  block-size: 11px;
  flex: none;
  border: solid var(--brand);
  border-width: 0 2px 2px 0;
  transform: rotate(42deg) translateY(-1px);
}

@media (min-width: 60rem) {
  .hero-grid {
    grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
    align-items: center;
  }
}

/* ---- 7. WhatsApp mockup — tamamı saf CSS, görsel dosyası yok ------------- */
.showcase {
  margin: 0;
  display: flex;
  justify-content: center;
  position: relative;
}
.showcase::before {                 /* zemine oturtan yumuşak gölge lekesi */
  content: "";
  position: absolute;
  inset-block-end: 2%;
  inline-size: 78%;
  block-size: 42%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(11, 107, 92, .18), transparent 70%);
  filter: blur(8px);
  pointer-events: none;
}

.phone {
  position: relative;
  inline-size: min(100%, 19.5rem);
  border: 9px solid var(--phone-shell);
  border-radius: 34px;
  background: var(--wa-wall);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  transform: rotate(-1.2deg);
}
@media (min-width: 60rem) {
  .phone { inline-size: min(100%, 20.5rem); transform: rotate(-1.8deg); }
}

/* sohbet başlığı */
.wa-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 13px;
  background: var(--wa-bar);
  border-block-end: 1px solid rgba(0, 0, 0, .06);
}
.wa-avatar {
  inline-size: 32px; block-size: 32px;
  flex: none;
  border-radius: 50%;
  background: var(--brand);
  position: relative;
}
.wa-avatar::before {                /* avatar içinde küçük baloncuk */
  content: "";
  position: absolute;
  inset: 9px 8px 11px 8px;
  border-radius: 5px 5px 5px 2px;
  background: rgba(255, 255, 255, .92);
}
.wa-title { display: flex; flex-direction: column; line-height: 1.25; min-inline-size: 0; }
.wa-title b { font-size: 0.875rem; font-weight: 600; color: var(--wa-ink); }
.wa-title span { font-size: 0.7rem; color: var(--wa-meta); }

/* sohbet zemini — WhatsApp duvar kâğıdını anıştıran hafif doku */
.chat {
  padding: 14px 11px 18px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  background-color: var(--wa-wall);
  background-image: radial-gradient(currentColor 1px, transparent 1px);
  background-size: 22px 22px;
  color: rgba(120, 100, 70, .10);
  /* Yükseklik içerikten gelir: kullanıcı yazı tipi büyütünce son baloncuk
     ("Onaylıyorum") kırpılmasın diye sabit yükseklik bilerek kullanılmadı. */
}
@media (prefers-color-scheme: dark) { .chat { color: rgba(255, 255, 255, .05); } }

.msg {
  position: relative;
  max-inline-size: 84%;
  padding: 7px 9px 5px;
  border-radius: 9px;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--wa-ink);
  box-shadow: 0 1px 1px rgba(0, 0, 0, .13);
  animation: msg-in .45s cubic-bezier(.2, .75, .3, 1) backwards;
}
.msg p { color: inherit; margin: 0; }
.msg.in  { align-self: flex-start; background: var(--wa-in);  border-end-start-radius: 2px; }
.msg.out { align-self: flex-end;   background: var(--wa-out); border-end-end-radius: 2px; }

.msg:nth-child(1) { animation-delay: .10s; }
.msg:nth-child(2) { animation-delay: .45s; }
.msg:nth-child(3) { animation-delay: .80s; }
.msg:nth-child(4) { animation-delay: 1.05s; }
.msg:nth-child(5) { animation-delay: 1.40s; }

@keyframes msg-in {
  from { opacity: 0; transform: translateY(9px) scale(.97); }
  to   { opacity: 1; transform: none; }
}

.time {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 3px;
  margin-block-start: 2px;
  font-size: 0.625rem;
  color: var(--wa-meta);
}
/* çift tik — iki adet döndürülmüş köşe */
.tick {
  position: relative;
  inline-size: 15px; block-size: 10px;
  flex: none;
}
.tick::before, .tick::after {
  content: "";
  position: absolute;
  inset-block-start: 1px;
  inline-size: 4px; block-size: 8px;
  border: solid var(--wa-tick);
  border-width: 0 1.5px 1.5px 0;
  transform: rotate(40deg);
}
.tick::before { inset-inline-start: 1px; }
.tick::after  { inset-inline-start: 6px; }

/* ÖNCE: esnafın çektiği ham fotoğraf */
.tile {
  display: block;
  inline-size: min(100%, 8.5rem);
  aspect-ratio: 4 / 3;
  border-radius: 6px;
  margin-block-end: 5px;
  position: relative;
  overflow: hidden;
  background: linear-gradient(#cbb79a, #ab9578);
}
.tile::before {                      /* tabak */
  content: "";
  position: absolute;
  inset-inline: 22%;
  inset-block-end: 22%;
  block-size: 30%;
  border-radius: 50%;
  background: #f3ece2;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .22);
}
.tile::after {                       /* ürün */
  content: "";
  position: absolute;
  inset-inline-start: 34%;
  inset-block-end: 30%;
  inline-size: 32%;
  block-size: 26%;
  border-radius: 40% 40% 34% 34%;
  background: linear-gradient(#c08247, #8f5526);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .3);
}

/* SONRA: üretilen reklam görseli */
.pv {
  display: block;
  inline-size: min(100%, 10.5rem);
  aspect-ratio: 4 / 3;
  border-radius: 6px;
  margin-block-end: 5px;
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 18% 0%, rgba(255, 246, 224, .95), transparent 58%),
    linear-gradient(160deg, #21403a, #0d211d 70%);
}
.pv::before {                        /* spot ışığı hüzmesi */
  content: "";
  position: absolute;
  inset-block-start: -34%;
  inset-inline-start: -8%;
  inline-size: 62%;
  block-size: 128%;
  background: linear-gradient(rgba(255, 240, 205, .5), transparent 72%);
  transform: rotate(19deg);
  filter: blur(5px);
}
.pv::after {                         /* ürün + tabak, ışıkta */
  content: "";
  position: absolute;
  inset-inline-start: 32%;
  inset-block-end: 30%;
  inline-size: 34%;
  block-size: 30%;
  border-radius: 42% 42% 34% 34%;
  background: linear-gradient(155deg, #e6a75f, #a35e22);
  box-shadow:
    0 8px 14px -6px rgba(0, 0, 0, .75),
    0 0 0 6px rgba(255, 244, 222, .10);
}
.pv-caption {                        /* reklam metni yerleşimi */
  position: absolute;
  inset-block-end: 7px;
  inset-inline-start: 8px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  z-index: 1;
}
.pv-caption i {
  display: block;
  block-size: 4px;
  border-radius: 2px;
  background: rgba(255, 250, 240, .92);
}
.pv-caption i:first-child { inline-size: 62px; }
.pv-caption i:last-child  { inline-size: 38px; opacity: .6; }
.pv-badge {
  position: absolute;
  inset-block-start: 7px;
  inset-inline-end: 7px;
  z-index: 1;
  padding: 2px 7px;
  border-radius: var(--r-pill);
  background: rgba(11, 107, 92, .92);
  color: #fff;
  font-size: 0.5625rem;
  font-weight: 600;
  letter-spacing: .04em;
}

/* şablon / eylem düğmeleri */
.wa-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-block-start: 6px;
}
.wa-chips b {
  padding: 3px 9px;
  border: 1px solid rgba(11, 107, 92, .32);
  border-radius: var(--r-pill);
  font-size: 0.6875rem;
  font-weight: 500;
  color: var(--brand-deep);
}
@media (prefers-color-scheme: dark) {
  .wa-chips b { color: #7fe0c8; border-color: rgba(127, 224, 200, .4); }
}
.wa-chips b.sel {
  background: rgba(11, 107, 92, .1);
  border-color: var(--brand);
  font-weight: 600;
}

.wa-actions {
  display: flex;
  gap: 5px;
  margin-block-start: 7px;
  padding-block-start: 6px;
  border-block-start: 1px solid rgba(0, 0, 0, .1);
}
.wa-actions b {
  flex: 1;
  padding: 5px 4px;
  border-radius: 5px;
  text-align: center;
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--brand-deep);
  background: rgba(11, 107, 92, .07);
}
@media (prefers-color-scheme: dark) {
  .wa-actions   { border-block-start-color: rgba(255, 255, 255, .12); }
  .wa-actions b { color: #7fe0c8; background: rgba(127, 224, 200, .1); }
}

/* mockup altı açıklama */
.showcase-note {
  margin-block-start: 18px;
  font-size: 0.8125rem;
  color: var(--ink-3);
  text-align: center;
}

/* ---- 8. Adımlar, çipler, not, iletişim ---------------------------------- */
.band { background: var(--paper-2); border-block: 1px solid var(--line); }

.section-head { max-inline-size: 40rem; margin-block-end: clamp(28px, 4vw, 44px); }
.section-head p { margin-block-start: 12px; }

.steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 4px;
}
.steps li {
  position: relative;
  margin: 0;
  padding: 22px 0 26px 58px;
}
/* dikey bağlantı çizgisi — akışın sürekliliği */
.steps li::before {
  content: "";
  position: absolute;
  inset-block: 46px -4px;
  inset-inline-start: 19px;
  inline-size: 2px;
  background: var(--line);
}
.steps li:last-child::before { display: none; }

.step-n {
  position: absolute;
  inset-block-start: 18px;
  inset-inline-start: 0;
  inline-size: 40px;
  block-size: 40px;
  display: grid;
  place-items: center;
  border: 1.5px solid var(--accent);
  border-radius: 50%;
  background: var(--paper);
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--accent-ink);
}
.band .step-n { background: var(--paper-2); }
.steps h3 { margin-block-end: 7px; }
.steps p { color: var(--ink-2); max-inline-size: 34rem; }

@media (min-width: 52rem) {
  .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 34px; }
  .steps li { padding: 0; }
  .steps li::before {
    inset-block: 20px auto;
    inset-inline: 52px -34px;
    inline-size: auto;
    block-size: 2px;
  }
  .step-n { position: static; margin-block-end: 20px; }
}

/* hedef kitle çipleri */
.tags {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin: 26px 0 0;
  padding: 0;
}
.tags li {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 8px 15px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--surface);
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--ink);
}
.tags li::before {
  content: "";
  inline-size: 7px; block-size: 7px;
  border-radius: 50%;
  background: var(--accent);
  flex: none;
}

/* güven notu */
.note {
  position: relative;
  margin: 0;
  padding: 24px 24px 24px 28px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.note::before {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  inline-size: 5px;
  background: var(--brand);
}
.note h3 { margin-block-end: 9px; }
.note p { max-inline-size: 42rem; }

.note-grid { display: grid; gap: 16px; }
@media (min-width: 52rem) { .note-grid { grid-template-columns: 1fr 1fr; } }

/* iletişim levhası */
.plaque {
  display: grid;
  gap: 20px;
  padding: clamp(26px, 4vw, 40px);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}
.plaque h2 { margin-block-end: 10px; }
.plaque p { max-inline-size: 36rem; }
@media (min-width: 52rem) {
  .plaque { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 32px; }
}

.operator {
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--ink-3);
}
.operator strong { color: var(--ink-2); }

/* ---- 9. Hukuki sayfa düzeni --------------------------------------------- */
.page-head {
  padding-block: clamp(34px, 5vw, 60px) clamp(22px, 3vw, 34px);
  border-block-end: 1px solid var(--line);
  background: var(--paper-2);
}
.page-head h1 { max-inline-size: 22ch; }
/* Bağımsız gezinme bağlantısı — metin içi değil, bu yüzden 44px hedef. */
.crumb {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-block-size: 44px;
  margin-block-end: 4px;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--ink-3);
  text-decoration: none;
}
.crumb:hover { color: var(--brand-deep); }
.crumb::before {
  content: "";
  inline-size: 6px; block-size: 6px;
  border: solid currentColor;
  border-width: 0 0 1.5px 1.5px;
  transform: rotate(45deg);
}
.updated {
  margin: 16px 0 0;
  font-size: 0.8125rem;
  color: var(--ink-3);
}

.doc { padding-block: clamp(30px, 5vw, 56px) clamp(48px, 7vw, 88px); }
.doc-grid { display: grid; gap: clamp(26px, 4vw, 48px); }

@media (min-width: 58rem) {
  .doc-grid {
    grid-template-columns: 13.5rem minmax(0, var(--measure));
    justify-content: start;
    gap: clamp(40px, 6vw, 76px);
  }
}

.toc { min-inline-size: 0; }
.toc h2 {
  font-family: var(--font-text);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-block-end: 12px;
}
.toc ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  counter-reset: toc;
}
.toc li { margin: 0; }
.toc a {
  display: block;
  padding: 7px 13px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--surface);
  font-size: 0.8125rem;
  color: var(--ink-2);
  text-decoration: none;
}
.toc a:hover { border-color: var(--brand); color: var(--brand-deep); }

@media (min-width: 58rem) {
  .toc { position: sticky; inset-block-start: 84px; align-self: start; }
  .toc ol { flex-direction: column; gap: 1px; }
  .toc a {
    padding: 6px 0 6px 13px;
    border: 0;
    border-inline-start: 2px solid var(--line);
    border-radius: 0;
    background: none;
  }
  .toc a:hover { border-inline-start-color: var(--brand); background: none; }
}

.prose { min-inline-size: 0; max-inline-size: var(--measure); }
.prose > p, .prose > ul, .prose > ol { margin-block: 0 1.1em; }
.prose h2 {
  font-size: clamp(1.2rem, 1.11rem + 0.45vw, 1.45rem);
  margin-block: 2.2em 0.55em;
  padding-block-start: 1.1em;
  border-block-start: 1px solid var(--line);
}
.prose section:first-of-type > h2 { margin-block-start: 1.6em; }
.prose h3 { margin-block: 1.6em 0.4em; }
.prose ul, .prose ol { padding-inline-start: 1.25em; }
.prose li { margin-block-end: 0.5em; }
.prose li::marker { color: var(--accent); }
.prose .intro {
  font-size: 1.06rem;
  color: var(--ink);
  padding: 18px 20px;
  border-radius: var(--r-md);
  background: var(--paper-2);
  border: 1px solid var(--line-soft);
}
.prose .note { margin-block: 1.6em; }
.prose .note h3 { margin-block-start: 0; }

/* “Süre” gibi sayısal taahhütler için vurgu şeridi */
.terms-list {
  list-style: none;
  padding: 0 !important;
  margin-block-end: 1.2em;
  display: grid;
  gap: 8px;
}
.terms-list li {
  margin: 0;
  padding: 12px 15px;
  border: 1px solid var(--line);
  border-inline-start: 3px solid var(--accent);
  border-radius: var(--r-sm);
  background: var(--surface);
  font-size: 0.95rem;
}

/* ---- 10. Alt bilgi ------------------------------------------------------- */
.site-foot {
  border-block-start: 1px solid var(--line);
  background: var(--paper-2);
  padding-block: clamp(34px, 5vw, 52px) clamp(30px, 4vw, 44px);
}
.foot-grid { display: grid; gap: 28px; }
@media (min-width: 52rem) {
  .foot-grid { grid-template-columns: minmax(0, 1fr) auto; gap: 48px; align-items: start; }
}

.site-foot nav {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 22px;
}
.site-foot nav a {
  display: inline-flex;
  align-items: center;
  min-block-size: 44px;      /* dokunma hedefi */
  font-size: 0.9rem;
  color: var(--ink-2);
  text-decoration: none;
}
.site-foot nav a:hover { color: var(--brand-deep); text-decoration: underline; }

.foot-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-size: 1.1rem;
  color: var(--ink);
  text-decoration: none;
  margin-block-end: 14px;
}
.foot-brand em { font-style: normal; color: var(--brand); }

.copyright {
  margin-block-start: 22px;
  padding-block-start: 18px;
  border-block-start: 1px solid var(--line);
  font-size: 0.8125rem;
  color: var(--ink-3);
}

/* ---- 11. Hareket, baskı, azaltılmış hareket ----------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .phone { transform: none; }
}

@media print {
  .site-head, .toc, .skip, .site-foot nav, .showcase { display: none; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .prose { max-inline-size: none; }
  .prose h2 { break-after: avoid; }
  a { color: #000; text-decoration: underline; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; }
}