/* ============================================================================
   OLCEK KOKU — tasarim 1855px genisliginde cizildi.
   Tum olculer rem; kok punto ekran genisligiyle orantili. Boylece 1536px'lik
   ekranda tasarimin BIREBIR kucultulmus hali cikar; sabit piksel yuzunden
   menu/telefon blogu ezilmez. 1855px'te kok = 16px (tasarimin kendi olcegi).
   ============================================================================ */
/* KOK OLCEK — 15.09.2026 DUZELTMESI.
   Onceki taban 11px idi: 0.86253vw 11px'e 1275px genislikte carpiyordu.
   O noktadan sonra rem DURUYOR ama yuzde olculer kuculmeye devam ediyor;
   mutlak konumlu bloklarda (bolum 15-24) ikisi birbirinden ayrilip
   tasma/ust uste binme uretiyordu (1266px'te olculdu: kitap karttan tasti).
   Taban 9.4px: 0.86253vw bu degere ancak 1090px'te iner — orada zaten
   @media (max-width:1100px) devreye girip her seyi akisa cevirir.
   Yani masaustu araliginin TAMAMINDA rem ile % kilitli kalir. */
html { font-size: clamp(9.4px, 0.86253vw, 16px); }
/* MOBIL/TABLET TABANI GERI ALINDI (olculdu 15.09.2026).
   Yukaridaki 9.4px tabani MASAUSTU icin konuldu (1090px'e kadar vw ile rem
   kilitli kalsin diye) ama taban TUM genisliklerde geciyor: 390px'te kok
   9.4px olunca rem'e bagli 72 oge 12px'in ALTINA dustu, en kucugu 6,5px
   ("Stay informed") — okunamaz. 1100px ve altinda duzen zaten akisa geciyor
   (@media max-width:1100px), orada vw olcegine ihtiyac yok; kok eski
   degerine (11px) sabitlenir. Masaustu tarafi DEGISMEZ: 1100px'te
   0.86253vw = 9,49px, yani 9.4 tabani orada zaten devreye girmiyor. */
/* MOBIL/TABLET KOK OLCEK = 16px (olculdu 15.09.2026, Hamza: "mobile de bak").
   Masaustu formulu `0.86253vw` tasarimi 1855px'te 1x kabul edip ASAGI dogru
   kuculuyor; 1100px altinda taban devreye girince telefon sayfayi ~%69
   olcekte basiyordu. Sonuc olculdu (390px, hizmet sayfasi): 67 metin 12px
   ALTINDA (en kucuk 7,6px) ve 69 dokunma hedefi 44px altinda.
   16px denendi: 360-1100px araliginda hizmet sayfalarinda ve ana sayfada
   YATAY TASMA YOK (once uc tasma kaynagi duzeltildi: alt bilgi guven seridi
   telefonda tek kolon, `b` sarabilir, mini-facts 700px'e kadar sarar).
   Kucuk yazi 67 -> 1, dokunma hedefi 69 -> 47'ye indi. */
@media (max-width: 1100px) { html { font-size: 16px; } }

/* fontlar DOGRUDAN gomulu: @import ek bir istek turu yaratip metin boyamasini geciktiriyordu
   (olculdu 12.09.2026: oge boyama gecikmesi 2.457 ms)
   Aile secimi sartnameden (13.09.2026): Manrope=baslik, Inter=govde, Caveat=el yazisi.
   Cinzel yuklenmez - logo gorsel olarak kullaniliyor. */
/* Caveat 600 latin-ext */
/* Manrope 600 latin-ext */
/* Manrope 600-800 latin-ext */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 600 800;
  font-display: swap;
  src: url(../fonts/Manrope-600-800-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Manrope 600-800 latin */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 600 800;
  font-display: swap;
  src: url(../fonts/Manrope-600-800-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Inter 400-700 latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(../fonts/Inter-400-700-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Inter 400-700 latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(../fonts/Inter-400-700-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Caveat 500-600 latin-ext */
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 500 600;
  font-display: swap;
  src: url(../fonts/Caveat-500-600-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Caveat 500-600 latin */
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 500 600;
  font-display: swap;
  src: url(../fonts/Caveat-500-600-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}



/* ============================================================
   Turkey Hair Center — yenisite
   Tek kaynak tasarım sistemi. Inline hex YASAK, token kullan.
   Renkler 42 mockup'tan piksel örneklemesiyle ölçüldü (12.09.2026).
   ============================================================ */

:root {
  /* --- renk --- */
  --navy-900: #031B45;
  --navy-800: #04214F;
  --navy-700: #052A5E;
  --navy-600: #062E67;
  --navy-500: #0A3A7C;

  /* DOLGU icin: sartnamenin "Electric CTA blue". Buton/zemin. */
  --blue-600: #0068FF;
  /* METIN icin: #0068FF acik zeminde 13px etikette 4.24-4.35 veriyor (AA 4.5 alti,
     olculdu 13.09.2026). Sartname o rengi "CTA blue" diye tanimliyor, metin rengi
     diye degil. Mavi YAZI daima bu koyu tonu kullanir: #EEF6FF uzerinde 6.26. */
  --blue-ink: #0052CC;
  --blue-500: #0878FF;
  --blue-100: #D4E5FF;
  --blue-50:  #EEF6FF;

  --gold-700: #8A5E1E;
  --gold-500: #E5AE45;
  --gold-400: #EDBE5C;
  --gold-300: #F3C96E;
  --gold-200: #F8DFA8;
  --gold-50:  #FBF5EA;

  --green-600: #04814A;
  --green-500: #0C9E5C;
  --green-900: #0B3B2B;

  --ink:      #0A2860;
  --muted:    #5B6B8C;
  --muted-2:  #5F708F;
  --bg:       #F6FAFF;
  --bg-2:     #EAF3FF;
  --card:     #FFFFFF;
  --line:     #E1E9F4;
  --line-2:   #CFDCED;

  /* --- spacing (4/8/12/16/24/32/48/64/96/128) --- */
  --s-1: 0.25rem;  --s-2: 0.5rem;  --s-3: 0.75rem; --s-4: 1rem; --s-5: 1.5rem;
  --s-6: 2rem; --s-7: 3rem; --s-8: 4rem; --s-9: 6rem; --s-10: 8rem;

  /* --- radius --- */
  --r-sm: 0.625rem; --r-md: 0.875rem; --r-lg: 1.25rem; --r-xl: 1.75rem; --r-pill: 62.4375rem;

  /* --- gölge --- */
  --shadow-sm: 0 1px 2px rgba(7, 27, 61, .05);
  --shadow-md: 0 0.5rem 1.5rem rgba(7, 27, 61, .07);
  --shadow-lg: 0 1.5rem 3.75rem rgba(7, 27, 61, .12);

  /* --- tipografi --- */
  --font-head: "Manrope", "Inter", Arial, Helvetica, sans-serif;
  --font-body: "Inter", Arial, Helvetica, sans-serif;
  --font-hand: "Caveat", "Segoe Print", "Bradley Hand", cursive;

  /* ICERIK genisligi (sayfa boslugu haric) - 01.png'de olculen: ~1764px */
  --container: 110.25rem;
  --container-wide: 115rem;
  --container-metin: 73.75rem;
  /* sartname: "Standard horizontal page padding: 56-80 px" */
  --sayfa-bosluk: clamp(1.25rem, 3.6vw, 4.5rem);
}

/* ============================================================
   CSS TABAN — cursor kuralları (global, tartışmaya kapalı)
   Tailwind v4 preflight button'dan pointer'ı kaldırdığı için
   kural tabanda durur. Seçiciler AYRI satırlarda: biri geçersiz
   olursa tüm kural düşmesin.
   ============================================================ */
button { cursor: pointer; }
a[href] { cursor: pointer; }
label { cursor: pointer; }
select { cursor: pointer; }
summary { cursor: pointer; }
[role="button"] { cursor: pointer; }
input[type="submit"], input[type="button"], input[type="reset"],
input[type="checkbox"], input[type="radio"], input[type="file"] { cursor: pointer; }
button:disabled, input:disabled, select:disabled, [aria-disabled="true"] { cursor: not-allowed; }

/* Türkçe/çok satırlı başlık tabanı: İ noktası ile Ş/Ç çengeli çarpışmasın */
h1, h2, h3, h4 { line-height: 1.06; }

/* ============================================================
   reset / base
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  overflow-wrap: break-word;
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.65;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}
@supports not (overflow: clip) { body { overflow-x: hidden; } }

img, svg, video { max-width: 100%; height: auto; display: block; }
h1, h2, h3, h4, h5 { font-family: var(--font-head); color: var(--navy-900); margin: 0; letter-spacing: -0.02em; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: var(--blue-ink); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 0.1875rem solid var(--blue-500); outline-offset: 0.1875rem; border-radius: var(--r-sm); }

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

/* ============================================================
   layout
   ============================================================ */
.container { width: 100%; max-width: calc(var(--container) + 2 * var(--sayfa-bosluk)); margin-inline: auto; padding-inline: var(--sayfa-bosluk); }
.container--metin { max-width: calc(var(--container-metin) + 2 * var(--sayfa-bosluk)); }
.container--wide { max-width: calc(var(--container-wide) + 2 * var(--sayfa-bosluk)); }
.section { padding-block: var(--s-9); position: relative; }
.section--tight { padding-block: var(--s-8); }
.section--alt { background: var(--bg-2); }
.section--white { background: #fff; }
.section--dark { background: linear-gradient(160deg, var(--navy-800), #041634); color: #fff; }
.section--dark h2, .section--dark h3 { color: #fff; }

.grid { display: grid; gap: var(--s-5); }
.grid--lg { gap: var(--s-6); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }

/* ============================================================
   bölüm başlığı iskeleti
   ============================================================ */
.sec-head { text-align: center; max-width: 55rem; margin-inline: auto; margin-bottom: var(--s-7); }
.sec-head--left { text-align: left; margin-inline: 0; }

.eyebrow {
  display: inline-flex; align-items: center; gap: var(--s-3);
  font-family: var(--font-body); font-size: 0.75rem; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase; color: var(--gold-700);
  margin-bottom: var(--s-4);
}
.eyebrow::before, .eyebrow::after { content: ""; width: 1.75rem; height: 1px; background: var(--gold-400); }
/* Cizgi ACIK zeminli bolumde IKI yanda (04.png), koyu fotograf zeminli
   bolumde ve hero'da YALNIZ solda (01/02/03) — olculdu 14.09.2026. */
.section--foto .eyebrow::after, .eyebrow--hero::after { display: none; }
.sec-head--left .eyebrow::after { display: none; }
.eyebrow--blue { color: var(--blue-ink); }
.eyebrow--blue::before, .eyebrow--blue::after { background: var(--blue-100); }
.section--dark .eyebrow { color: var(--gold-400); }

.h2 { font-size: clamp(1.875rem, 3.1vw, 3.25rem); font-weight: 800; letter-spacing: -0.03em; }
.h1 { font-size: clamp(2.375rem, 4.2vw, 4.25rem); font-weight: 800; letter-spacing: -0.032em; }
.h3 { font-size: 1.25rem; font-weight: 700; line-height: 1.25; }
.accent-gold { color: var(--gold-700); }
.accent-blue { color: var(--blue-500); }
.section--dark .accent-gold { color: var(--gold-400); }

.lead { margin-top: var(--s-4); font-size: 1.09375rem; color: var(--muted); }
.section--dark .lead { color: #C6D6EE; }

/* el yazısı aksan */
.script {
  font-family: var(--font-hand); font-size: 1.625rem; line-height: 1.15;
  color: var(--navy-600); transform: rotate(-4deg); position: absolute;
  pointer-events: none; user-select: none;
}
.script--gold { color: var(--gold-700); }
.script--light { color: #E7D3AE; }
@media (max-width: 1100px) { .script { display: none; } }

/* ============================================================
   butonlar
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  font-family: var(--font-head); font-size: 0.9375rem; font-weight: 700; line-height: 1;
  padding: 0.9375rem var(--s-5); border-radius: var(--r-md); border: 1px solid transparent;
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease;
  text-decoration: none; white-space: nowrap;
}
.btn:hover { text-decoration: none; transform: translateY(-2px); }
.btn svg { width: 1.125rem; height: 1.125rem; flex: none; }
.btn--gold { background: linear-gradient(180deg, var(--gold-300), var(--gold-400)); color: var(--navy-900); box-shadow: var(--shadow-sm); }
.btn--gold:hover { box-shadow: 0 0.625rem 1.5rem rgba(164, 116, 44, .28); }
.btn--navy { background: var(--navy-600); color: #fff; }
.btn--navy:hover { background: var(--navy-500); }
.btn--blue { background: var(--blue-600); color: #fff; }
.btn--blue:hover { background: var(--blue-500); }
.btn--wa { background: var(--green-600); color: #fff; }
.btn--wa:hover { background: var(--green-500); color: var(--green-900); }
.btn--ghost { background: #fff; color: var(--navy-700); border-color: var(--line-2); }
.btn--ghost:hover { border-color: var(--navy-600); }
.btn--outline-light { background: transparent; color: #fff; border-color: rgba(255,255,255,.4); }
.btn--outline-light:hover { background: rgba(255,255,255,.08); }
.btn--pill { border-radius: var(--r-pill); padding-inline: var(--s-6); }
.btn--block { width: 100%; white-space: normal; text-align: center; }
.btn--sm { font-size: 0.875rem; padding: 0.6875rem var(--s-4); }

/* ============================================================
   kartlar / rozet / çip
   ============================================================ */
.card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm); padding: var(--s-5);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.card--hover:hover { transform: translateY(-0.25rem); box-shadow: var(--shadow-md); border-color: var(--line-2); }
.card--pad-lg { padding: var(--s-6); }
.card--flush { padding: 0; overflow: hidden; }
.card--featured { border-color: var(--gold-400); box-shadow: 0 0.75rem 2rem rgba(164,116,44,.16); }

.badge {
  display: inline-flex; align-items: center; gap: 0.375rem; font-size: 0.6875rem; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; padding: 0.375rem 0.75rem; border-radius: var(--r-pill);
}
.badge--gold { background: linear-gradient(180deg, var(--gold-300), var(--gold-400)); color: var(--navy-900); }
.badge--navy { background: var(--navy-600); color: #fff; }
.badge--blue { background: var(--blue-50); color: var(--blue-ink); }
.badge--green { background: #E3F7EC; color: var(--green-900); }

.chip {
  display: inline-flex; align-items: center; gap: var(--s-2); padding: 0.625rem var(--s-4);
  border: 1px solid var(--line-2); border-radius: var(--r-pill); background: #fff;
  font-size: 0.875rem; font-weight: 600; color: var(--navy-700);
}
.chip[aria-selected="true"], .chip.is-active { background: var(--navy-600); border-color: var(--navy-600); color: #fff; }
.chip-row { display: flex; flex-wrap: wrap; gap: var(--s-3); justify-content: center; }

.icon-box {
  width: 2.75rem; height: 2.75rem; border-radius: var(--r-md); background: var(--blue-50);
  display: grid; place-items: center; color: var(--blue-ink); flex: none;
}
.icon-box--gold { background: var(--gold-50); color: var(--gold-700); }
.icon-box--navy { background: var(--navy-600); color: #fff; }
.icon-box svg { width: 1.375rem; height: 1.375rem; }

/* ============================================================
   istatistik şeridi
   ============================================================ */
.stat-strip {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--shadow-md); overflow: hidden;
}
.stat {
  display: flex; align-items: center; gap: var(--s-3); padding: var(--s-5);
  border-left: 1px solid var(--line);
}
.stat:first-child { border-left: 0; }
.stat b { display: block; font-family: var(--font-head); font-size: 1.25rem; font-weight: 800; color: var(--navy-900); line-height: 1.2; }
.stat span { font-size: 0.8125rem; color: var(--muted); }
.stat svg { width: 1.625rem; height: 1.625rem; color: var(--blue-ink); flex: none; }
.stat-strip--plain { background: transparent; border: 0; box-shadow: none; }
.stat-strip--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.stat-strip--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.stat-strip--2 .stat:nth-child(3) { border-left: 0; }
.stat-strip--2 .stat:nth-child(n+3) { border-top: 1px solid var(--line-2); }
.stat-strip--plain .stat { border-left: 1px solid var(--line-2); }

/* ============================================================
   koyu CTA bandı
   ============================================================ */
.band {
  background: linear-gradient(120deg, var(--navy-800) 0%, var(--navy-600) 60%, var(--navy-500) 100%);
  border-radius: var(--r-lg); color: #fff; padding: var(--s-6);
  display: flex; align-items: center; gap: var(--s-6); flex-wrap: wrap;
  position: relative; overflow: hidden;
}
.band h3 { color: #fff; font-size: 1.375rem; }
.band p { color: #C6D6EE; font-size: 0.9375rem; margin-top: var(--s-2); }
.band__main { flex: 1 1 26.25rem; }
.band__side { display: flex; flex-direction: column; gap: var(--s-2); align-items: flex-start; }
.band__note { font-size: 0.75rem; color: #A9C0E0; display: flex; align-items: center; gap: 0.375rem; }
.band--wa { background: linear-gradient(120deg, #0B3B2B, #10513A); }

/* ============================================================
   üst bar + header
   ============================================================ */
.topbar { background: var(--navy-700); color: #C9DAF2; font-size: 0.75rem; }
.topbar .container { display: flex; align-items: center; gap: var(--s-5); min-height: 2.25rem; flex-wrap: wrap; }
.topbar ul { display: flex; gap: var(--s-5); flex-wrap: wrap; }
.topbar li { display: flex; align-items: center; gap: 0.375rem; }
.topbar svg { width: 0.875rem; height: 0.875rem; color: var(--gold-400); flex: none; }
.topbar__right { margin-left: auto; display: flex; align-items: center; gap: var(--s-4); }
.topbar a { color: #C9DAF2; }
@media (max-width: 900px) { .topbar { display: none; } }

.site-header { background: var(--navy-800); position: sticky; top: 0; z-index: 50; }
.site-header .container { display: flex; align-items: center; gap: var(--s-5); min-height: 4.25rem; }
.brand { display: flex; align-items: center; gap: var(--s-3); }
.brand img { height: 2.375rem; width: auto; }
.brand__text { font-family: var(--font-head); font-weight: 800; color: #fff; font-size: 1.0625rem; letter-spacing: .02em; line-height: 1.1; }
.brand__text small { display: block; font-family: var(--font-body); font-size: 0.5625rem; font-weight: 500; letter-spacing: .16em; color: var(--gold-400); text-transform: uppercase; }
.main-nav { margin-left: var(--s-6); display: flex; gap: var(--s-5); }
.main-nav > li > a { color: #E8F0FB; font-size: 0.90625rem; font-weight: 600; display: inline-flex; align-items: center; gap: 0.3125rem; padding-block: 0.625rem; white-space: nowrap; }
.main-nav > li > a:hover { color: var(--gold-400); text-decoration: none; }
.header__right { margin-left: auto; display: flex; align-items: center; gap: var(--s-4); }
.header-phone { display: flex; align-items: center; gap: var(--s-3); color: #fff; }
.header-phone__ic { width: 2.5rem; height: 2.5rem; border-radius: var(--r-pill); background: rgba(255,255,255,.1); display: grid; place-items: center; }
.header-phone__ic svg { width: 1.125rem; height: 1.125rem; color: var(--gold-400); }
.header-phone b { display: block; font-size: 0.875rem; font-weight: 700; line-height: 1.2; white-space: nowrap; }
.header-phone span { font-size: 0.71875rem; color: #A9C0E0; }
.only-sm { display: none; }
.header__cta { white-space: nowrap; }
.nav-toggle { display: none; background: transparent; border: 1px solid rgba(255,255,255,.3); border-radius: var(--r-sm); padding: 0.5rem 0.625rem; color: #fff; }
@media (max-width: 1080px) {
  .main-nav, .header-phone { display: none; }
  .nav-toggle { display: inline-flex; }
  .header__right { gap: var(--s-2); }
}

/* mobil menü */
.mobile-nav { display: none; background: var(--navy-800); border-top: 1px solid rgba(255,255,255,.08); }
.mobile-nav.is-open { display: block; }
.mobile-nav a { display: block; color: #E8F0FB; padding: 0.75rem 0; border-bottom: 1px solid rgba(255,255,255,.06); font-weight: 600; }

/* ============================================================
   hero
   ============================================================ */
.hero {
  position: relative; isolation: isolate; overflow: hidden;
  background:
    radial-gradient(56.25rem 32.5rem at 18% 12%, #FFFFFF 0%, rgba(255,255,255,0) 62%),
    linear-gradient(155deg, #E7EFFA 0%, #F6FAFE 46%, #DFE9F7 100%);
}
.hero::before {
  content: ""; position: absolute; right: -8%; top: -18%; width: 52%; aspect-ratio: 1;
  background: radial-gradient(circle, rgba(27,106,247,.10) 0%, rgba(27,106,247,0) 68%);
  z-index: 0; pointer-events: none;
}
.hero__person {
  position: absolute; left: 58%; bottom: 0; transform: translateX(-38%);
  height: 96%; width: min(30vw, 35rem); z-index: 1;
  background: url("/wp-content/uploads/2026/08/hair-transplant-patient-turkey.webp") bottom center / contain no-repeat;
  filter: drop-shadow(0 1.875rem 3.75rem rgba(7, 27, 61, .22));
}
.hero .container { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 29.375rem); gap: var(--s-8); padding-block: var(--s-9); align-items: center; }
/* 01.png olcumu: baslik sutunu ~690px, "backed by expertise." TEK satirda.
   40rem'te "expertise." asagi dusup 3 satir oluyordu. */
.hero__copy { max-width: 45.625rem; }
.hero h1 { font-size: clamp(2.5rem, 3.55vw, 4.125rem); font-weight: 800; letter-spacing: -0.035em; line-height: 1.04; }
.hero h1 .accent-gold { display: inline; color: var(--gold-300); }
/* 01.png: vurgu koyu fotograf uzerinde PARLAK sicak altin. Varsayilan
   .accent-gold acik zemin icin koyu tondur (--gold-700) ve burada mat kaliyordu. */
.hero__lead { margin-top: var(--s-5); font-size: 1.1875rem; color: #2C4368; max-width: 28.75rem; }
.hero__cta { margin-top: var(--s-6); display: flex; gap: var(--s-3); flex-wrap: wrap; }

/* AI önizleme kartı */
.ai-card { background: #fff; border: 1px solid var(--line); border-radius: var(--r-xl); box-shadow: var(--shadow-lg); padding: var(--s-6); }
.ai-card__top { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); }
.ai-card__label { font-size: 0.6875rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--muted-2); }
.ai-card h2 { font-size: 1.6875rem; font-weight: 800; margin-top: var(--s-3); }
.ai-card p { color: var(--muted); font-size: 0.90625rem; margin-top: 0.375rem; }
.ai-thumbs { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-3); margin-top: var(--s-5); }
.ai-thumb { border-radius: var(--r-md); overflow: hidden; position: relative; border: 1px solid var(--line); background: var(--bg-2); }
.ai-thumb img { aspect-ratio: 3 / 4; object-fit: cover; width: 100%; }
.ai-thumb span { position: absolute; left: 0; right: 0; bottom: 0; background: rgba(7,27,61,.78); color: #fff; font-size: 0.59375rem; font-weight: 600; letter-spacing: .06em; text-align: center; padding: 0.25rem 2px; }
.ai-mini { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); margin-top: var(--s-4); }
.ai-mini div { border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--s-3) var(--s-4); display: flex; gap: var(--s-3); align-items: center; }
.ai-mini b { display: block; font-size: 0.875rem; color: var(--navy-900); font-family: var(--font-head); }
.ai-mini span { font-size: 0.71875rem; color: var(--muted); }
.ai-mini svg { width: 1.25rem; height: 1.25rem; color: var(--blue-ink); flex: none; }
.ai-card .btn { margin-top: var(--s-4); }
.ai-card__alt { display: block; text-align: center; margin-top: var(--s-3); font-size: 0.84375rem; color: var(--muted); }

.hero-stats { margin-top: calc(var(--s-7) * -1); position: relative; z-index: 2; padding-bottom: var(--s-9); }

@media (max-width: 1180px) {
  .hero__person { opacity: .16; transform: translateX(-30%); }
}
@media (max-width: 1024px) {
  .hero .container { grid-template-columns: 1fr; gap: var(--s-6); padding-block: var(--s-8); }
  .hero-stats { margin-top: 0; padding-top: var(--s-6); padding-bottom: var(--s-8); }
  .hero__person { display: none; }
}

/* ============================================================
   planlama araçları (4 giriş)
   ============================================================ */
.tool-card { display: flex; flex-direction: column; height: 100%; }
.tool-card__head { display: flex; align-items: flex-start; gap: var(--s-3); }
.tool-card h3 { font-size: 1.1875rem; }
.tool-card p { font-size: 0.90625rem; color: var(--muted); margin-top: var(--s-2); }
.tool-card ul { margin-top: var(--s-4); display: grid; gap: var(--s-2); }
.tool-card li { display: flex; gap: var(--s-2); align-items: flex-start; font-size: 0.875rem; color: var(--navy-700); }
.tool-card li svg { width: 1rem; height: 1rem; color: var(--green-600); flex: none; margin-top: 0.1875rem; }
.tool-card .btn { margin-top: auto; margin-top: var(--s-5); }
.tool-num {
  width: 1.875rem; height: 1.875rem; border-radius: var(--r-pill); background: var(--navy-600); color: #fff;
  display: grid; place-items: center; font-family: var(--font-head); font-weight: 800; font-size: 0.875rem; flex: none;
}

/* ============================================================
   yolculuk adımları
   ============================================================ */
.journey { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--s-4); }
.step { text-align: center; }
.step__num {
  width: 2.5rem; height: 2.5rem; border-radius: var(--r-pill); background: var(--navy-600); color: #fff;
  display: grid; place-items: center; font-family: var(--font-head); font-weight: 800; margin: 0 auto var(--s-4);
  position: relative;
}
.step__num::after { content: ""; position: absolute; left: calc(100% + 2px); top: 50%; width: calc(100% + var(--s-4) - 0.25rem); height: 2px; background: var(--blue-100); }
.step:last-child .step__num::after { display: none; }
.step img { border-radius: var(--r-md); aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }
.step h3 { font-size: 1rem; margin-top: var(--s-4); }
.step p { font-size: 0.84375rem; color: var(--muted); margin-top: 0.375rem; }

/* ============================================================
   sonuç kartları (öncesi/sonrası)
   ============================================================ */
.result-card { overflow: hidden; }
.result-card__imgs { position: relative; display: grid; grid-template-columns: 1fr 1fr; }
.result-card__imgs img { aspect-ratio: 1 / 1; object-fit: cover; width: 100%; }
.result-card__imgs figure { position: relative; margin: 0; }
.result-card__imgs figcaption {
  position: absolute; left: var(--s-3); bottom: var(--s-3); background: rgba(7,27,61,.82); color: #fff;
  font-size: 0.625rem; font-weight: 600; letter-spacing: .06em; padding: 0.25rem 0.5rem; border-radius: var(--r-sm);
}
.result-card__body { padding: var(--s-4) var(--s-5) var(--s-5); }
.result-card__meta { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-3); font-size: 0.8125rem; color: var(--muted); }
.result-card__meta span { display: inline-flex; align-items: center; gap: 0.375rem; }
.result-card__meta svg { width: 0.9375rem; height: 0.9375rem; color: var(--blue-ink); }

/* ============================================================
   teknik / hizmet kartları
   ============================================================ */
.tech-card { display: flex; gap: var(--s-4); align-items: flex-start; }
.tech-card h3 { font-size: 1.0625rem; }
.tech-card p { font-size: 0.875rem; color: var(--muted); margin-top: 0.375rem; }

/* karşılaştırma tablosu */
.cmp-table { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.cmp-table th, .cmp-table td { padding: var(--s-4) var(--s-5); text-align: left; border-bottom: 1px solid var(--line); font-size: 0.9375rem; }
.cmp-table thead th { background: var(--bg-2); font-family: var(--font-head); font-weight: 700; color: var(--navy-900); font-size: 0.875rem; }
.cmp-table tbody tr:last-child td { border-bottom: 0; }
.cmp-table td b { font-family: var(--font-head); color: var(--navy-900); }
.cmp-table .save { color: var(--blue-ink); font-weight: 800; font-family: var(--font-head); }
.table-wrap { overflow-x: auto; }

/* paket kartları */
.pkg { display: flex; flex-direction: column; height: 100%; position: relative; }
.pkg__price { font-family: var(--font-head); font-size: 1.875rem; font-weight: 800; color: var(--navy-900); margin-top: var(--s-4); line-height: 1.1; }
.pkg__price small { font-size: 0.875rem; font-weight: 600; color: var(--muted); }
.pkg ul { margin-top: var(--s-5); display: grid; gap: var(--s-3); }
.pkg li { display: flex; gap: var(--s-2); font-size: 0.875rem; color: var(--navy-700); align-items: flex-start; }
.pkg li svg { width: 1rem; height: 1rem; flex: none; margin-top: 0.1875rem; color: var(--blue-ink); }
.pkg--featured li svg { color: var(--gold-700); }
.pkg .btn { margin-top: var(--s-6); }
.pkg__tag { position: absolute; top: calc(var(--s-3) * -1); left: 50%; transform: translateX(-50%); }

/* ekip */
.person img { aspect-ratio: 4 / 5; object-fit: cover; width: 100%; }
.person__body { padding: var(--s-5); }
.person h3 { font-size: 1.125rem; }
.person__role { font-size: 0.84375rem; color: var(--blue-ink); font-weight: 600; margin-top: 2px; }
.person p { font-size: 0.875rem; color: var(--muted); margin-top: var(--s-3); }
.person__tag { position: absolute; top: var(--s-4); left: var(--s-4); }
.person { position: relative; }

/* yorumlar */
.review { display: flex; flex-direction: column; gap: var(--s-3); }
.stars { color: #9A5B00; letter-spacing: 2px; font-size: 0.875rem; }
.review q { font-size: 0.9375rem; color: var(--navy-700); font-style: italic; }
.review footer { font-size: 0.8125rem; color: var(--muted); display: flex; align-items: center; gap: var(--s-2); }

/* rehber listesi */
.guide { display: flex; align-items: center; gap: var(--s-4); }
.guide b { font-size: 0.96875rem; font-family: var(--font-head); color: var(--navy-900); display: block; }
.guide span { font-size: 0.84375rem; color: var(--muted); }
.guide__num { font-family: var(--font-head); font-weight: 800; color: var(--muted-2); font-size: 0.8125rem; width: 1.375rem; flex: none; }
.guide__arrow { margin-left: auto; color: var(--blue-ink); flex: none; }

/* SSS */
.faq-item { border: 1px solid var(--line); border-radius: var(--r-md); background: #fff; margin-bottom: var(--s-3); overflow: hidden; }
.faq-item summary { padding: var(--s-4) var(--s-5); font-weight: 600; color: var(--navy-900); display: flex; justify-content: space-between; gap: var(--s-4); list-style: none; font-size: 0.96875rem; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; font-size: 1.25rem; color: var(--blue-ink); line-height: 1; flex: none; }
.faq-item[open] summary::after { content: "–"; }
.faq-item .faq-body { padding: 0 var(--s-5) var(--s-5); color: var(--muted); font-size: 0.90625rem; }

/* blog */
.post img { aspect-ratio: 16 / 10; object-fit: cover; width: 100%; }
.post__body { padding: var(--s-5); }
.post h3 { font-size: 1.125rem; margin-top: var(--s-3); }
.post p { font-size: 0.875rem; color: var(--muted); margin-top: var(--s-3); }
.post__meta { font-size: 0.75rem; color: var(--muted-2); display: flex; gap: var(--s-3); }

/* form */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); }
.field label { display: block; font-size: 0.8125rem; font-weight: 600; color: var(--navy-700); margin-bottom: 0.375rem; }
.field input, .field select, .field textarea {
  width: 100%; padding: 0.8125rem var(--s-4); border: 1px solid var(--line-2); border-radius: var(--r-md);
  font-family: var(--font-body); font-size: 0.9375rem; color: var(--ink); background: #fff;
}
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--blue-500); outline: none; box-shadow: 0 0 0 0.1875rem var(--blue-50); }
.field--full { grid-column: 1 / -1; }
.form-note { font-size: 0.78125rem; color: var(--muted); display: flex; align-items: center; gap: 0.375rem; margin-top: var(--s-3); }

/* seçenek kutuları (analiz formu) */
.opt-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-3); }
.opt { border: 1px solid var(--line-2); border-radius: var(--r-md); padding: var(--s-3); background: #fff; display: block; text-align: left; }
.opt:has(input:checked) { border-color: var(--blue-ink); box-shadow: 0 0 0 0.1875rem var(--blue-50); }
.opt img { border-radius: var(--r-sm); aspect-ratio: 16 / 11; object-fit: cover; width: 100%; margin-bottom: var(--s-3); }
.opt b { font-size: 0.875rem; display: block; color: var(--navy-900); font-family: var(--font-head); }
.opt span { font-size: 0.75rem; color: var(--muted); }
.opt input { accent-color: var(--blue-ink); margin-right: 0.375rem; }

/* ============================================================
   footer
   ============================================================ */
.site-footer { background: linear-gradient(180deg, #04204A, #021737); color: #C9DAF2; padding-block: var(--s-8) var(--s-6); }
.site-footer h4 { color: #fff; font-size: 0.75rem; letter-spacing: .16em; text-transform: uppercase; font-family: var(--font-body); font-weight: 600; margin-bottom: var(--s-4); }
.site-footer a { color: #C9DAF2; font-size: 0.90625rem; }
.site-footer a:hover { color: var(--gold-400); text-decoration: none; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr 1.3fr; gap: var(--s-6); }
.footer-links { display: grid; gap: var(--s-3); }
.footer-contact { display: grid; gap: var(--s-3); }
.footer-contact a { display: flex; align-items: center; gap: var(--s-3); background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.08); border-radius: var(--r-md); padding: 0.75rem var(--s-4); }
.footer-contact b { display: block; color: #fff; font-size: 0.90625rem; }
.footer-contact span { font-size: 0.75rem; color: #A9C0E0; }
.footer-contact svg { width: 1.25rem; height: 1.25rem; color: var(--gold-400); flex: none; }
.footer-trust { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-5); border-top: 1px solid rgba(255,255,255,.1); border-bottom: 1px solid rgba(255,255,255,.1); padding-block: var(--s-5); margin-top: var(--s-7); }
.footer-trust div { display: flex; gap: var(--s-3); align-items: flex-start; }
.footer-trust > div > div { min-width: 0; }
.footer-trust b { white-space: nowrap; }
.footer-trust b { color: #fff; font-size: 0.90625rem; display: block; font-family: var(--font-head); }
.footer-trust p { font-size: 0.78125rem; color: #A9C0E0; margin-top: 2px; }
.footer-trust svg { width: 1.375rem; height: 1.375rem; color: var(--gold-400); flex: none; }
.footer-legal { margin-top: var(--s-5); font-size: 0.75rem; color: #8FA8CA; line-height: 1.7; }
.footer-bottom { margin-top: var(--s-5); display: flex; justify-content: space-between; gap: var(--s-4); flex-wrap: wrap; font-size: 0.78125rem; color: #8FA8CA; }
.social { display: flex; gap: var(--s-2); margin-top: var(--s-5); }
.social a { width: 2.25rem; height: 2.25rem; border-radius: var(--r-pill); background: rgba(255,255,255,.08); display: grid; place-items: center; }
.social svg { width: 1.0625rem; height: 1.0625rem; color: #fff; }
.cert-row { display: flex; gap: var(--s-3); flex-wrap: wrap; margin-top: var(--s-4); }
.cert { border: 1px solid rgba(255,255,255,.16); border-radius: var(--r-md); padding: 0.625rem var(--s-4); font-size: 0.78125rem; color: #DCE8F8; }

/* WhatsApp sabit düğme */
.wa-float {
  position: fixed; right: 1.125rem; bottom: 1.125rem; z-index: 60; width: 3.5rem; height: 3.5rem;
  border-radius: var(--r-pill); background: var(--green-500); display: grid; place-items: center;
  box-shadow: 0 0.625rem 1.875rem rgba(1, 167, 88, .35);
}
.wa-float svg { width: 1.875rem; height: 1.875rem; color: #fff; }

/* ============================================================
   responsive
   ============================================================ */
@media (max-width: 1080px) {
  .journey { grid-template-columns: repeat(3, 1fr); }
  .step__num::after { display: none; }
  .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; }
}
@media (max-width: 900px) {
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat-strip--5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat:nth-child(3) { border-left: 0; }
  .stat { border-top: 1px solid var(--line); }
  .stat:first-child, .stat:nth-child(2) { border-top: 0; }
  .footer-trust { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  :root { --s-9: 4rem; }
  .only-lg { display: none; }
  .only-sm { display: inline; }
  .header__cta { padding: 0.75rem var(--s-4); font-size: 0.875rem; }
  .ai-mini { grid-template-columns: minmax(0, 1fr); }
  .ai-card { padding: var(--s-5); }
  .brand img { height: 2rem; }
  .container { padding-inline: var(--s-4); }
  .grid-2, .grid-3, .grid-4, .grid-6 { grid-template-columns: minmax(0, 1fr); }
  .btn { white-space: normal; text-align: center; }
  .header__cta { white-space: nowrap; }
  .journey { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .form-grid { grid-template-columns: 1fr; }
  .opt-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat-strip { grid-template-columns: minmax(0, 1fr); }
  .stat { border-left: 0; border-top: 1px solid var(--line); }
  .stat:first-child { border-top: 0; }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-trust { grid-template-columns: 1fr; }
  .band { padding: var(--s-5); }
  .hero__lead { font-size: 1.0625rem; }
}

/* ============================================================
   BOLUM BILESENLERI — 42 mockup'in tamami icin (12.09.2026, 2. tur)
   ============================================================ */

/* --- guven seridi (5 oge, mockup 01 ust) --- */
.trust-strip { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-md); display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.trust-strip > div { display: flex; gap: var(--s-3); padding: var(--s-4) var(--s-5); border-left: 1px solid var(--line); align-items: flex-start; }
.trust-strip > div:first-child { border-left: 0; }
.trust-strip b { display: block; font-family: var(--font-head); font-size: 0.875rem; color: var(--navy-900); line-height: 1.25; }
.trust-strip span { font-size: 0.75rem; color: var(--muted); }
.trust-strip .icon-box { width: 2.25rem; height: 2.25rem; border-radius: var(--r-sm); }
.trust-strip .icon-box svg { width: 1.125rem; height: 1.125rem; }

/* --- gorselli arac karti --- */
.tool-card__img { margin: calc(var(--s-5) * -1) calc(var(--s-5) * -1) var(--s-4); border-radius: var(--r-lg) var(--r-lg) 0 0; overflow: hidden; position: relative; }
.tool-card__img img { aspect-ratio: 16 / 10; object-fit: cover; width: 100%; }
.tool-card__img .badge { position: absolute; top: var(--s-3); left: var(--s-3); }

/* --- planlayici: tahminleyici + uygunluk + whatsapp --- */
.planner { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) minmax(0, .8fr); gap: var(--s-5); align-items: start; }
.step-badge { display: inline-flex; align-items: center; justify-content: center; width: 1.75rem; height: 1.75rem; border-radius: var(--r-sm); background: var(--navy-600); color: #fff; font-family: var(--font-head); font-weight: 800; font-size: 0.8125rem; flex: none; }
.qa { border-top: 1px solid var(--line); padding-top: var(--s-4); margin-top: var(--s-4); }
.qa p { font-size: 0.90625rem; color: var(--navy-800); font-weight: 600; }
.qa__opts { display: flex; gap: var(--s-2); margin-top: var(--s-3); flex-wrap: wrap; }
.qa__opts button { border: 1px solid var(--line-2); background: #fff; border-radius: var(--r-md); padding: 0.5625rem var(--s-4); font-family: var(--font-body); font-size: 0.875rem; font-weight: 600; color: var(--navy-700); }
.qa__opts button[aria-pressed="true"] { background: var(--navy-600); border-color: var(--navy-600); color: #fff; }
.wa-panel { background: linear-gradient(165deg, #0C3B2C, #0A2E24); color: #fff; border-radius: var(--r-lg); padding: var(--s-6); }
.wa-panel h3 { color: #fff; font-size: 1.3125rem; }
.wa-panel p { color: #BFD8CD; font-size: 0.90625rem; margin-top: var(--s-3); }
.wa-panel .btn { margin-top: var(--s-5); }
.upload-box { border: 1px dashed var(--line-2); border-radius: var(--r-md); padding: var(--s-4); display: flex; gap: var(--s-3); align-items: center; background: var(--bg); margin-top: var(--s-4); }
.upload-box b { font-family: var(--font-head); font-size: 0.875rem; color: var(--navy-900); display: block; }
.upload-box span { font-size: 0.78125rem; color: var(--muted); }

/* --- greft hesaplayici --- */
.calc { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: var(--s-6); }
.calc__visual { position: relative; border-radius: var(--r-lg); overflow: hidden; background: var(--bg-2); }
.calc__visual img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.zone-row { display: grid; grid-template-columns: 1.75rem minmax(0, 1.4fr) auto minmax(0, 1fr) 4.75rem 2.625rem; gap: var(--s-3); align-items: center; padding: var(--s-3) 0; border-bottom: 1px solid var(--line); }
.zone-row:last-of-type { border-bottom: 0; }
.zone-row .dot { width: 1.625rem; height: 1.625rem; border-radius: var(--r-pill); display: grid; place-items: center; font-size: 0.75rem; font-weight: 800; font-family: var(--font-head); color: #fff; }
.zone-row b { font-size: 0.90625rem; font-family: var(--font-head); color: var(--navy-900); display: block; }
.zone-row small { font-size: 0.75rem; color: var(--muted); }
.zone-row .aralik { font-size: 0.8125rem; color: var(--muted); white-space: nowrap; }
.zone-row input[type="range"] { width: 100%; accent-color: var(--blue-ink); }
.zone-row .sonuc { font-family: var(--font-head); font-weight: 800; font-size: 0.875rem; color: var(--navy-900); min-width: 4.75rem; text-align: right; }
.zone-row[data-acik="0"] { opacity: .5; }
.switch { position: relative; width: 2.625rem; height: 1.5rem; flex: none; }
.switch input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; margin: 0; }
.switch span { position: absolute; inset: 0; background: var(--line-2); border-radius: var(--r-pill); transition: background .18s ease; }
.switch span::after { content: ""; position: absolute; top: 0.1875rem; left: 0.1875rem; width: 1.125rem; height: 1.125rem; border-radius: var(--r-pill); background: #fff; transition: transform .18s ease; }
.switch input:checked + span { background: var(--blue-600); }
.switch input:checked + span::after { transform: translateX(1.125rem); }
.calc__total { background: var(--blue-50); border: 1px solid var(--blue-100); border-radius: var(--r-lg); padding: var(--s-5); display: flex; align-items: center; gap: var(--s-4); flex-wrap: wrap; margin-top: var(--s-5); }
.calc__total b { font-family: var(--font-head); font-size: 1.875rem; font-weight: 800; color: var(--navy-900); line-height: 1; }
.calc__total .etiket { font-size: 0.8125rem; color: var(--muted); }
.view-tabs { display: flex; gap: var(--s-2); margin-bottom: var(--s-4); }

/* --- Istanbul'da 4 gun --- */
.day-card { display: flex; flex-direction: column; height: 100%; }
.day-card__head { display: flex; gap: var(--s-3); align-items: center; }
.day-card h3 { font-size: 1.125rem; }
.day-card .kicker { font-size: 0.6875rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted-2); font-weight: 600; }
.day-card img { border-radius: var(--r-md); aspect-ratio: 16 / 10; object-fit: cover; width: 100%; margin-top: var(--s-4); }
.day-card ul { margin-top: var(--s-4); display: grid; gap: var(--s-3); }
.day-card li { display: flex; gap: var(--s-3); align-items: flex-start; }
.day-card li svg { width: 1.125rem; height: 1.125rem; color: var(--blue-ink); flex: none; margin-top: 2px; }
.day-card li b { font-size: 0.875rem; font-family: var(--font-head); color: var(--navy-900); display: block; }
.day-card li span { font-size: 0.8125rem; color: var(--muted); }

/* --- hastane karti --- */
.hosp img { aspect-ratio: 16 / 9; object-fit: cover; width: 100%; }
.hosp__body { padding: var(--s-5); }
.hosp ul { margin-top: var(--s-4); display: grid; gap: var(--s-2); }
.hosp li { display: flex; gap: var(--s-2); font-size: 0.84375rem; color: var(--navy-700); align-items: flex-start; }
.hosp li svg { width: 0.9375rem; height: 0.9375rem; color: var(--blue-ink); flex: none; margin-top: 0.1875rem; }
.hosp .badge { position: absolute; top: var(--s-3); right: var(--s-3); }
.hosp { position: relative; }

/* --- video kartlari --- */
.video-card { position: relative; overflow: hidden; }
.video-card button.oynat { position: relative; display: block; width: 100%; border: 0; padding: 0; background: none; }
.video-card img { aspect-ratio: 16 / 9; object-fit: cover; width: 100%; }
.video-card .play { position: absolute; inset: 0; display: grid; place-items: center; }
.video-card .play i { width: 3.5rem; height: 3.5rem; border-radius: var(--r-pill); background: rgba(220, 38, 38, .92); display: grid; place-items: center; box-shadow: 0 0.5rem 1.5rem rgba(0,0,0,.3); }
.video-card .play i::after { content: ""; border-left: 1rem solid #fff; border-top: 0.625rem solid transparent; border-bottom: 0.625rem solid transparent; margin-left: 0.25rem; }
.video-card .sure { position: absolute; right: var(--s-3); top: var(--s-3); background: rgba(7,27,61,.82); color: #fff; font-size: 0.6875rem; font-weight: 600; padding: 0.1875rem 0.5rem; border-radius: var(--r-sm); }
.video-card__body { padding: var(--s-4) var(--s-5) var(--s-5); }
.video-card h3 { font-size: 1rem; }
.video-card p { font-size: 0.8125rem; color: var(--muted); margin-top: 0.25rem; }

/* --- yorum rozetleri --- */
.rev-badge { display: flex; gap: var(--s-3); align-items: center; padding: var(--s-4); border: 1px solid var(--line); border-radius: var(--r-lg); background: #fff; }
.rev-badge img { width: 2.125rem; height: 2.125rem; object-fit: contain; }
.rev-badge b { font-family: var(--font-head); font-size: 1.25rem; font-weight: 800; color: var(--navy-900); line-height: 1; display: block; }
.rev-badge span { font-size: 0.75rem; color: var(--muted); }

/* --- dunya haritasi --- */
.map-wrap { position: relative; }
.map-wrap > img { width: 100%; }
.map-pin { position: absolute; background: #fff; border: 1px solid var(--line); border-radius: var(--r-pill); box-shadow: var(--shadow-md); padding: 0.4375rem var(--s-3); display: flex; align-items: center; gap: var(--s-2); font-size: 0.75rem; font-weight: 600; color: var(--navy-800); white-space: nowrap; }
.map-pin img { width: 1.125rem; height: 0.8125rem; border-radius: 2px; }
@media (max-width: 900px) { .map-pin { display: none; } }

/* --- ekosistem / neden biz kartlari --- */
.eco-card { display: flex; gap: var(--s-4); align-items: flex-start; }
.eco-card h3 { font-size: 1rem; }
.eco-card p { font-size: 0.84375rem; color: var(--muted); margin-top: 0.25rem; }
.eco-collage { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2px; border-radius: var(--r-lg); overflow: hidden; }
.eco-collage img { aspect-ratio: 1 / 1; object-fit: cover; width: 100%; }

.why-card h3 { font-size: 1.03125rem; }
.why-card p { font-size: 0.84375rem; color: var(--muted); margin-top: var(--s-3); }
.why-card .icon-box { margin-bottom: var(--s-4); }

/* --- kadinlar bolumu (koyu) --- */
.women { background: linear-gradient(150deg, #062247 0%, #0A2F5C 45%, #041B39 100%); color: #fff; position: relative; overflow: hidden; }
.women h2, .women h3 { color: #fff; }
.women .lead { color: #C6D6EE; }
.medal { position: absolute; right: var(--s-8); top: var(--s-8); width: 6.5rem; height: 6.5rem; border-radius: var(--r-pill); border: 1px solid var(--gold-400); color: var(--gold-400); display: grid; place-items: center; text-align: center; font-size: 0.625rem; letter-spacing: .12em; text-transform: uppercase; line-height: 1.5; padding: var(--s-3); }
@media (max-width: 1100px) { .medal { display: none; } }

/* --- sehir / gezi rotasi --- */
.city__hero { border-radius: var(--r-lg); overflow: hidden; position: relative; }
.city__hero img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.city__chips { position: absolute; right: var(--s-4); top: var(--s-4); display: grid; gap: var(--s-2); }
.city__chips span { background: rgba(255,255,255,.94); border-radius: var(--r-md); padding: 0.5rem var(--s-3); font-size: 0.75rem; font-weight: 600; color: var(--navy-800); display: flex; align-items: center; gap: var(--s-2); box-shadow: var(--shadow-sm); }
.city__chips svg { width: 0.9375rem; height: 0.9375rem; color: var(--blue-ink); }
.spot img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; border-radius: var(--r-md); }
.spot b { display: block; font-family: var(--font-head); font-size: 0.90625rem; color: var(--navy-900); margin-top: var(--s-3); }
.spot span { font-size: 0.78125rem; color: var(--muted); }
.spot .saat { position: absolute; left: var(--s-3); top: var(--s-3); background: rgba(255,255,255,.94); border-radius: var(--r-pill); font-size: 0.6875rem; font-weight: 700; padding: 0.25rem 0.625rem; color: var(--navy-800); }
.spot { position: relative; }
@media (max-width: 900px) { .city__chips { display: none; } }

/* --- rehber indirme (kursun magnet) --- */
.magnet { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .8fr) minmax(0, .8fr); gap: var(--s-6); align-items: center; }
.magnet__book { position: relative; }

/* --- iletisim kanali kartlari --- */
.channel img { aspect-ratio: 16 / 10; object-fit: cover; width: 100%; border-radius: var(--r-md); background: var(--bg-2); }
.channel h3 { font-size: 1.0625rem; margin-top: var(--s-4); }
.channel p { font-size: 0.84375rem; color: var(--muted); margin-top: var(--s-2); }
.channel { position: relative; display: flex; flex-direction: column; }
.channel .btn { margin-top: var(--s-5); }
.channel--onerilen { border-color: var(--green-600); box-shadow: 0 0.625rem 1.75rem rgba(1,167,88,.14); }
.channel__tag { position: absolute; top: calc(var(--s-3) * -1); left: 50%; transform: translateX(-50%); }

/* --- SSS arama + sekmeler --- */
.faq-search { display: flex; gap: var(--s-3); background: #fff; border: 1px solid var(--line-2); border-radius: var(--r-md); padding: 0.375rem 0.375rem 0.375rem var(--s-4); align-items: center; }
.faq-search input { flex: 1; border: 0; outline: none; font-family: var(--font-body); font-size: 0.9375rem; color: var(--ink); background: transparent; min-width: 0; }
.faq-search svg { width: 1.125rem; height: 1.125rem; color: var(--muted-2); flex: none; }
.faq-tabs { display: flex; gap: var(--s-2); flex-wrap: wrap; margin-top: var(--s-5); }
.faq-tabs .chip { font-size: 0.8125rem; padding: 0.5rem var(--s-3); }
.faq-item[hidden] { display: none; }
.pop-search { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-3); }
.pop-search a { font-size: 0.78125rem; color: var(--blue-ink); }

/* --- blog --- */
.post .badge { position: absolute; top: var(--s-3); left: var(--s-3); }
.post { position: relative; }
.post__foot { display: flex; align-items: center; justify-content: space-between; margin-top: var(--s-4); }

/* --- bulten --- */
.newsletter { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); border-radius: var(--r-lg); padding: var(--s-5) var(--s-6); display: flex; gap: var(--s-5); align-items: center; flex-wrap: wrap; }
.newsletter__main { flex: 1 1 26.25rem; }
.newsletter h3 { color: #fff; font-size: 1.1875rem; }
.newsletter p { font-size: 0.84375rem; color: #A9C0E0; margin-top: 0.375rem; }
.newsletter form { display: flex; gap: var(--s-3); flex-wrap: wrap; }
.newsletter input { border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.06); color: #fff; border-radius: var(--r-md); padding: 0.8125rem var(--s-4); font-family: var(--font-body); font-size: 0.90625rem; min-width: 15rem; }
.newsletter input::placeholder { color: #8FA8CA; }

/* --- ortak (partner) --- */
.partner { display: flex; gap: var(--s-4); align-items: center; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); border-radius: var(--r-md); padding: var(--s-4); }
.partner b { color: #fff; font-size: 0.90625rem; font-family: var(--font-head); display: block; }
.partner span { font-size: 0.78125rem; color: #A9C0E0; }

/* --- responsive: yeni bilesenler --- */
@media (max-width: 1080px) {
  .planner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .planner > :last-child { grid-column: 1 / -1; }
  .trust-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .trust-strip > div:nth-child(4) { border-left: 0; }
  .trust-strip > div:nth-child(n+4) { border-top: 1px solid var(--line); }
  .calc { grid-template-columns: minmax(0, 1fr); }
  .magnet { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .magnet__book { grid-row: 1; }
  .eco-collage { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .trust-strip { grid-template-columns: minmax(0, 1fr); }
  .trust-strip > div { border-left: 0; border-top: 1px solid var(--line); }
  .trust-strip > div:first-child { border-top: 0; }
  .planner { grid-template-columns: minmax(0, 1fr); }
  .planner > :last-child { grid-column: auto; }
  .magnet { grid-template-columns: minmax(0, 1fr); }
  .zone-row { grid-template-columns: 1.5rem minmax(0, 1fr) auto; row-gap: var(--s-2); }
  .zone-row .aralik, .zone-row input[type="range"] { grid-column: 2 / -1; }
  .newsletter input { min-width: 0; width: 100%; }
  .newsletter form { width: 100%; }
}

/* ============================================================
   PROFESYONEL MENU (mega) + ust bar rafinasyonu — 12.09.2026 3. tur
   ============================================================ */
.site-header { background: var(--navy-800); position: sticky; top: 0; z-index: 60; transition: box-shadow .2s ease; }
.site-header.is-sticky { box-shadow: 0 0.625rem 1.875rem rgba(4, 18, 46, .28); }
.site-header .container { min-height: 4.75rem; gap: var(--s-6); }
.brand img { height: 2.625rem; }

.main-nav { margin-left: var(--s-7); display: flex; gap: var(--s-2); align-items: center; }
.main-nav > li { position: relative; }
.main-nav > li > a {
  color: #EAF1FB; font-size: 0.9375rem; font-weight: 600; display: inline-flex; align-items: center; gap: 0.375rem;
  padding: 1.625rem var(--s-4); white-space: nowrap; position: relative;
}
.main-nav > li > a .caret { width: 0.875rem; height: 0.875rem; opacity: .7; transition: transform .18s ease; flex: none; }
/* OLCULDU 13.09.2026: caret 0px genisliginde boyanip ACILIR MENU ISARETI HIC
   GORUNMUYORDU. Baglanti flex; svg'nin flex-shrink varsayilani 1 oldugu icin
   menu sikisinca 0.875rem'lik ok sifira iniyor. width vermek yetmez, flex:none sart. */
/* OLCULDU 15.09.2026 (Hamza gordu: "menude cizgi yazinin ustune geliyor"):
   `bottom: 1.25rem` SABITTI ama baglanti kutusunun yuksekligi kok font ile
   degisiyor (`html{font-size:clamp(11px,0.86253vw,16px)}`). Olcum: 1920px'te
   yazi 14-33px arasinda, cizgi 27px'te; 1440'ta yazi 11-25, cizgi 20; 1280'de
   yazi 10-22, cizgi 18 -> her genislikte METNIN ICINDEN geciyordu.
   Cizgi artik kutunun altina degil METNE gore hizalaniyor: satirin ortasindan
   0.62em asagi, yani harflerin hemen altina. */
.main-nav > li > a::after {
  content: ""; position: absolute; left: var(--s-4); right: var(--s-4);
  top: calc(50% + 0.62em); bottom: auto; height: 2px;
  background: var(--gold-400); transform: scaleX(0); transition: transform .2s ease; border-radius: 2px;
}
.main-nav > li:hover > a::after, .main-nav > li:focus-within > a::after { transform: scaleX(1); }
.main-nav > li:hover > a, .main-nav > li:focus-within > a { color: #fff; text-decoration: none; }
.main-nav > li:hover > a .caret, .main-nav > li:focus-within > a .caret { transform: rotate(180deg); }

.mega {
  position: absolute; top: 100%; left: 50%; transform: translate(-50%, 0.5rem);
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-lg);
  padding: var(--s-6); opacity: 0; visibility: hidden; transition: opacity .16s ease, transform .16s ease;
  z-index: 70;
}
.main-nav > li:hover .mega, .main-nav > li:focus-within .mega { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.mega--wide { width: 47.5rem; display: grid; grid-template-columns: 1fr 1fr 15rem; gap: var(--s-6); }
.mega--sm { width: 20rem; }
.mega h5 { font-family: var(--font-body); font-size: 0.6875rem; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-700); margin: 0 0 var(--s-3); font-weight: 700; }
.mega ul { display: grid; gap: 2px; }
.mega a.mega-link { display: flex; gap: var(--s-3); align-items: flex-start; padding: 0.5625rem var(--s-3); border-radius: var(--r-sm); color: var(--navy-800); }
.mega a.mega-link:hover { background: var(--bg); text-decoration: none; }
.mega a.mega-link b { display: block; font-family: var(--font-head); font-size: 0.90625rem; font-weight: 700; line-height: 1.25; }
.mega a.mega-link span { font-size: 0.78125rem; color: var(--muted); }
.mega a.mega-link svg { width: 1.125rem; height: 1.125rem; color: var(--blue-ink); flex: none; margin-top: 2px; }
.mega__promo { background: linear-gradient(160deg, var(--navy-700), var(--navy-500)); border-radius: var(--r-md); padding: var(--s-5); color: #fff; display: flex; flex-direction: column; }
.mega__promo b { font-family: var(--font-head); font-size: 1rem; display: block; }
.mega__promo p { font-size: 0.8125rem; color: #C6D6EE; margin-top: var(--s-2); }
.mega__promo .btn { margin-top: auto; margin-top: var(--s-5); }

/* ust bar */
.topbar { background: #041B3A; color: #BFD3EE; font-size: 0.78125rem; }
.topbar .container { min-height: 2.5rem; }
.topbar ul { gap: var(--s-6); }
.topbar__right { gap: var(--s-5); }
.topbar__right a { font-weight: 600; }
.lang { display: inline-flex; align-items: center; gap: 0.3125rem; }
.lang svg { width: 0.8125rem; height: 0.8125rem; }

/* mobil cekmece */
.mobile-nav { position: fixed; inset: 0 0 0 auto; width: min(88vw, 23.75rem); background: var(--navy-800); z-index: 80; display: none; overflow-y: auto; padding: var(--s-5) 0 var(--s-8); }
/* kapaliyken display:none -> ekran disinda durup belge genisligini buyutmez (olculdu: scrollWidth 507 > 390) */
.mobile-nav.is-open { display: block; animation: cekmeceAc .24s ease both; }
@keyframes cekmeceAc { from { transform: translateX(100%); } to { transform: none; } }
.mobile-nav__head { display: flex; align-items: center; justify-content: space-between; padding: 0 var(--s-5) var(--s-4); border-bottom: 1px solid rgba(255,255,255,.08); }
.mobile-nav__kapat { background: transparent; border: 1px solid rgba(255,255,255,.25); color: #fff; border-radius: var(--r-sm); padding: 0.375rem 0.75rem; font-size: 0.8125rem; }
.mobile-nav details { border-bottom: 1px solid rgba(255,255,255,.06); }
.mobile-nav summary { color: #EAF1FB; font-weight: 700; padding: 0.875rem var(--s-5); font-size: 0.9375rem; list-style: none; display: flex; justify-content: space-between; }
.mobile-nav summary::-webkit-details-marker { display: none; }
.mobile-nav summary::after { content: "+"; color: var(--gold-400); font-size: 1.125rem; }
.mobile-nav details[open] summary::after { content: "–"; }
.mobile-nav .alt a { display: block; color: #BFD3EE; padding: 0.625rem var(--s-5) 0.625rem var(--s-7); font-size: 0.875rem; border: 0; }
.mobile-nav > .container > a.duz { display: block; color: #EAF1FB; padding: 0.875rem var(--s-5); font-weight: 700; border-bottom: 1px solid rgba(255,255,255,.06); }
.mobile-nav .dip { padding: var(--s-5); display: grid; gap: var(--s-3); }
.nav-orgu { position: fixed; inset: 0; background: rgba(4,18,46,.55); z-index: 75; opacity: 0; visibility: hidden; transition: opacity .2s ease; }
.nav-orgu.is-open { opacity: 1; visibility: visible; }

@media (min-width: 1081px) { .mobile-nav, .nav-orgu { display: none; } }
@media (max-width: 1080px) {
  .site-header .container { min-height: 4.125rem; }
  .main-nav, .header-phone { display: none; }
  .nav-toggle { display: inline-flex; align-items: center; gap: 0.4375rem; }
}
@media (max-width: 1320px) {
  .main-nav { margin-left: var(--s-4); }
  .main-nav > li > a { padding-inline: var(--s-3); font-size: 0.90625rem; }
  .mega--wide { width: 42.5rem; }
}


/* --- sonuc CTA karti (mobilde 320px kolon acilmiyordu: scrollWidth 507>390) --- */
.result-cta {
  margin-top: 2.5rem; display: grid; align-items: center; overflow: hidden; padding: 0;
  grid-template-columns: minmax(0, 20rem) minmax(0, 1fr) auto auto; gap: var(--s-6);
}
/* 05.png bandi ALCAK ve genis; 1/1 kare fotograf bandi 290px'e cikarip ortada
   genis bos alan birakiyordu (olculdu 14.09.2026). */
.result-cta > img { height: 100%; width: 100%; object-fit: cover; object-position: center 18%; aspect-ratio: 16 / 10; }
.result-cta__body { padding: var(--s-6) 0; min-width: 0; }
.result-cta__body .mini-facts { margin-top: var(--s-4); }
.result-cta__aksiyon { padding: var(--s-6) 0; display: grid; gap: var(--s-3); justify-items: center; }
@media (max-width: 1080px) {
  .result-cta { grid-template-columns: minmax(0, 13.75rem) minmax(0, 1fr); }
  .result-cta__aksiyon { grid-column: 1 / -1; justify-items: start; padding: 0 var(--s-6) var(--s-6); }
  .result-cta__yazi { display: none; }
}
@media (max-width: 700px) {
  .result-cta { grid-template-columns: minmax(0, 1fr); }
  .result-cta > img { aspect-ratio: 16 / 10; height: auto; }
  .result-cta__body { padding: var(--s-5) var(--s-5) 0; }
  .result-cta__aksiyon { padding: var(--s-4) var(--s-5) var(--s-5); }
}


/* --- bolume ozel izgaralar (satir-ici stil KULLANMA: responsive sinifi ezer) --- */
.grid-fiyat { grid-template-columns: minmax(0, 1.5fr) minmax(0, .75fr) minmax(0, .9fr); align-items: start; }
.grid-sss { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, .8fr); gap: var(--s-6); align-items: start; }
.grid-iletisim { grid-template-columns: minmax(0, 1.2fr) minmax(0, .9fr) minmax(0, .7fr); gap: var(--s-6); align-items: start; }
.grid-neden { grid-template-columns: minmax(0, 1.6fr) minmax(0, .9fr); gap: var(--s-6); align-items: start; }
.review--yatay { display: grid; grid-template-columns: minmax(0, 10.625rem) minmax(0, 1fr); gap: var(--s-4); align-items: center; padding: var(--s-4); }

@media (max-width: 1080px) {
  .grid-fiyat, .grid-iletisim { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .grid-sss { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .grid-neden { grid-template-columns: minmax(0, 1fr); }
  .grid-fiyat > :first-child, .grid-sss > :first-child, .grid-iletisim > :first-child { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .grid-fiyat, .grid-sss, .grid-iletisim, .grid-neden { grid-template-columns: minmax(0, 1fr); }
  .grid-fiyat > :first-child, .grid-sss > :first-child, .grid-iletisim > :first-child { grid-column: auto; }
  .review--yatay { grid-template-columns: minmax(0, 1fr); }
}

/* ============================================================
   HIYERARSI KATMANI (12.09.2026, 3. tur)
   Sorun olculdu: 22 stat-strip, 10 band, 13 el yazisi, 14 ortali baslik
   -> her bolum ayni agirlikta goruunuyordu (monotonluk).
   Cozum: AGIR bilesen az yerde kalir, tekrar edenler HAFIF bicime doner.
   ============================================================ */

/* --- bolum kademeleri --- */
.section--pillar { padding-block: calc(var(--s-9) + var(--s-6)); }
.section--pillar .h2 { font-size: clamp(2.125rem, 3.4vw, 3.375rem); }
.section--pillar .lead { font-size: 1.1875rem; }
.section--compact { padding-block: var(--s-8); }
.section--compact .h2 { font-size: clamp(1.625rem, 2vw, 2rem); }
.section--compact .sec-head { margin-bottom: var(--s-6); }
.section--compact .lead { font-size: 1rem; }

/* --- hafif olgu satiri (agir stat-strip yerine) --- */
.mini-facts {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-5);
  font-size: 0.84375rem; color: var(--muted); margin-top: var(--s-4);
}
.mini-facts span { display: inline-flex; align-items: center; gap: 0.4375rem; }
.mini-facts svg { width: 0.9375rem; height: 0.9375rem; color: var(--blue-ink); flex: none; }
.mini-facts--orta { justify-content: center; }
.mini-facts--ayrik span + span::before {
  content: ""; width: 0.25rem; height: 0.25rem; border-radius: 50%; background: var(--line-2);
  margin-right: var(--s-3); flex: none;
}
.section--dark .mini-facts, .women .mini-facts { color: #B8CBE6; }
.section--dark .mini-facts svg, .women .mini-facts svg { color: var(--gold-400); }

/* --- hafif CTA satiri (kutulu band yerine) --- */
.cta-row {
  display: flex; align-items: center; gap: var(--s-5); flex-wrap: wrap;
  border-top: 1px solid var(--line-2); margin-top: var(--s-7); padding-top: var(--s-5);
}
.cta-row__main { flex: 1 1 23.75rem; }
.cta-row b { display: block; font-family: var(--font-head); font-size: 1.125rem; color: var(--navy-900); }
.cta-row p { font-size: 0.90625rem; color: var(--muted); margin-top: 0.25rem; }
.cta-row .btn { flex: none; }
.section--dark .cta-row, .women .cta-row { border-color: rgba(255,255,255,.16); }
.section--dark .cta-row b, .women .cta-row b { color: #fff; }
.section--dark .cta-row p, .women .cta-row p { color: #B8CBE6; }

/* --- bolum basligi: sola hizali varyantta daha guclu ritim --- */
.sec-head--left { max-width: 45rem; }
.sec-head--left .lead { max-width: 38.75rem; }

/* --- el yazisi aksan: yalniz pillar bolumlerde --- */


@media (max-width: 700px) {
  .section--pillar { padding-block: var(--s-9); }
  .cta-row .btn { width: 100%; }
}


/* --- kolon dengesi (olculdu: #usa 472 vs 1181, .women 613 vs 1226) --- */
.foto-dar > img { aspect-ratio: 3 / 4; max-height: 27.5rem; object-fit: cover; object-position: center 18%; }
#reviews .grid-2 { align-items: center; }
#usa .grid-neden { align-items: start; }
@media (max-width: 1080px) {
  .foto-dar > img { max-height: 22.5rem; }
}


/* ============================================================
   GORUNURLUK DUZELTMELERI (olculdu: 2 adet kontrast 1.00 = GORUNMEZ metin)
   ============================================================ */
/* koyu bolum icindeki BEYAZ kartlarda baslik beyaz kaliyordu -> gorunmez */
.section--dark .card h2,
.section--dark .card h3,
.section--dark .card h4,
.women .card h2,
.women .card h3,
.women .card h4 { color: var(--navy-900); }
.section--dark .card p:not(.form-note),
.women .card p:not(.form-note) { color: var(--muted); }
.section--dark .card .lead, .women .card .lead { color: var(--muted); }

/* kadinlar bolumu koyu zeminli: eyebrow ve lead renkleri */
.women .eyebrow { color: var(--gold-400); }
.women .accent-gold { color: var(--gold-400); }
.women .eyebrow::before, .women .eyebrow::after { background: var(--gold-400); }

/* kitap kapagi: fotograf uzerine beyaz yazi okunmuyordu -> gercek kapak */


/* --- fotograf zeminli koyu bolum (mockup 02: ritim icin) --- */
.section--foto { position: relative; isolation: isolate; color: #fff; overflow: hidden;
  background-color: var(--navy-800); /* gorsel yuklenmezse de koyu kalir + kontrast olculebilir */ }
.section--foto::before {
  content: ""; position: absolute; inset: 0; z-index: -2;
  background: url("../img/hair-transplant-in-istanbul-hero.e5c7b861.webp") center 30% / cover no-repeat;
}
.section--foto::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(165deg, rgba(4,24,52,.94) 0%, rgba(5,35,73,.90) 55%, rgba(4,20,44,.95) 100%);
}
.section--foto h2, .section--foto h3 { color: #fff; }
.section--foto .lead { color: #C6D6EE; }
.section--foto .eyebrow { color: var(--gold-400); }
.section--foto .eyebrow::before, .section--foto .eyebrow::after { background: var(--gold-400); }
.section--foto .accent-gold { color: var(--gold-400); }
.section--foto .card h2, .section--foto .card h3 { color: var(--navy-900); }
.section--foto .card p:not(.form-note) { color: var(--muted); }
.section--foto .mini-facts { color: #B8CBE6; }
.section--foto .mini-facts svg { color: var(--gold-400); }
.section--foto .card .mini-facts { color: var(--muted); }
.section--foto .card .mini-facts svg { color: var(--blue-ink); }


/* ============================================================
   HERO — mockup 40 ile birebir (12.09.2026, 4. tur)
   Farklar olculdu: arka planda Istanbul fotografi yoktu, istatistik
   seridi hero'ya binmiyordu, kart icinde 3 kucuk gorsel yoktu.
   ============================================================ */
.hero { background-color: #DDE8F6; }
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: url("../img/hair-transplant-in-istanbul-hero-mobile.eb32c577.webp") center 22% / cover no-repeat;   /* mobil once: 1/3 agirlik */
  opacity: .9;
}
@media (min-width: 901px) { .hero::after { background-image: url("../img/hair-transplant-in-istanbul-hero.e5c7b861.webp"); } }
.hero::before {                      /* okunabilirlik perdesi: soldan saga + alttan yukari */
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  width: 100%; right: auto; top: 0; bottom: 0;
  background:
    linear-gradient(180deg, rgba(238,244,252,0) 38%, rgba(238,244,252,.55) 74%, rgba(240,246,253,.92) 100%),
    linear-gradient(100deg,
      rgba(238,244,252,.97) 0%, rgba(238,244,252,.93) 26%,
      rgba(238,244,252,.62) 44%, rgba(238,244,252,.12) 60%, rgba(214,230,246,.10) 100%);
}
.hero .container { padding-block: var(--s-8) calc(var(--s-9) + var(--s-7)); }

/* istatistik seridi hero'nun altina BINER (mockup'ta oyle) */
.hero-stats { margin-top: calc(var(--s-8) * -1); position: relative; z-index: 3; padding-bottom: var(--s-9); }
@media (max-width: 1024px) {
  .hero-stats { margin-top: calc(var(--s-6) * -1); }
  .hero::after { background-position: 62% 28%; }
}

/* kart ici 3 kucuk gorsel */
.ai-thumbs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-3); margin-top: var(--s-5); }
.ai-thumb { position: relative; margin: 0; border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--line); background: var(--bg-2); }
.ai-thumb img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; display: block; }
.ai-thumb figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; background: rgba(7,27,61,.82); color: #fff;
  font-size: 0.59375rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  text-align: center; padding: 0.25rem 2px;
}


/* ============================================================
   BOSLUK STANDARDI (Hamza 12.09.2026: "bosluklari dusur ve standart yap")
   Tek bir dikey ritim: 4.5rem masaustu / 3rem mobil. Kademe artik
   PUNTO ile kurulur, boslukla degil.
   ============================================================ */
.section,
.section--tight,
.section--compact,
.section--pillar { padding-block: 4.5rem; }
.hero-stats { padding-bottom: 4.5rem; }
.sec-head { margin-bottom: 2.5rem; max-width: 47.5rem; }
.sec-head .lead { margin-top: 0.75rem; }
.section--pillar .h2 { font-size: clamp(2rem, 2.9vw, 2.875rem); }
.section--compact .h2 { font-size: clamp(1.625rem, 2.1vw, 2.125rem); }
.cta-row { margin-top: 2.5rem; padding-top: 1.75rem; }
.site-footer { padding-block: 3.5rem 2rem; }
.footer-grid { margin-top: 2.5rem !important; }
.footer-trust { margin-top: 2.5rem; padding-block: 1.75rem; }

@media (max-width: 700px) {
  .section, .section--tight, .section--compact, .section--pillar { padding-block: 3rem; }
  .hero-stats { padding-bottom: 3rem; }
  .sec-head { margin-bottom: 1.75rem; }
}


/* ============================================================
   SONUC KARTI (12.09.2026 · Hamza: "grafikli gorselleri kullanma,
   verileri al") — temiz oncesi/sonrasi fotografi + veriyi BIZ basiyoruz
   ============================================================ */
.sonuc { overflow: hidden; }
.sonuc__gorsel { position: relative; }
.sonuc__gorsel img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.sonuc__gorsel::after {                    /* iki yariyi ayiran ince cizgi */
  content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 1px;
  background: rgba(255,255,255,.55); transform: translateX(-.0.3125rem);
}
.sonuc__bayrak img { width: 1rem; height: 0.6875rem; border-radius: 2px; display: block; }
.sonuc__bayrak {
  position: absolute; top: 0.75rem; left: 0.75rem; z-index: 2;
  background: rgba(255,255,255,.94); color: var(--navy-900);
  font-size: 0.71875rem; font-weight: 700; padding: 0.3125rem 0.625rem; border-radius: var(--r-pill);
  box-shadow: var(--shadow-sm); display: inline-flex; align-items: center; gap: 0.375rem;
}
.sonuc__etiket {
  position: absolute; bottom: 0.75rem; z-index: 2;
  background: rgba(7,27,61,.82); color: #fff; font-size: 0.65625rem; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase; padding: 0.3125rem 0.625rem; border-radius: var(--r-sm);
}
.sonuc__etiket--sol { left: 0.75rem; }
.sonuc__etiket--sag { right: 0.75rem; }
.sonuc__govde { padding: var(--s-4) var(--s-5) var(--s-5); }
.sonuc__govde h3 { font-size: 1.125rem; }
.sonuc__meta { display: flex; flex-wrap: wrap; gap: 0.375rem var(--s-4); margin-top: var(--s-3); }
.sonuc__meta span { display: inline-flex; align-items: center; gap: 0.375rem; font-size: 0.8125rem; color: var(--muted); }
.sonuc__meta svg { width: 0.9375rem; height: 0.9375rem; color: var(--blue-ink); flex: none; }
@media (max-width: 700px) {
  .sonuc__bayrak { font-size: 0.65625rem; padding: 0.25rem 0.5rem; }
  .sonuc__etiket { font-size: 0.59375rem; padding: 0.25rem 0.5rem; }
}


/* koyu bantlarin icindeki hafif olgu satiri (olculdu: kontrast 2.34) */
.band .mini-facts, .band--wa .mini-facts { color: #CBDCEF; }
.band .mini-facts svg, .band--wa .mini-facts svg { color: var(--gold-400); }
.band--wa .mini-facts { color: #C9E2D4; }


/* --- ekip karti (mockup 08: fotografli) --- */
.kisi { display: flex; flex-direction: column; }
.kisi__foto { position: relative; overflow: hidden; background: var(--bg-2); }
.kisi__foto img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: center 18%; display: block; }
.kisi__foto--monogram {
  aspect-ratio: 4 / 5; display: grid; place-items: center;
  background: linear-gradient(155deg, var(--navy-700) 0%, var(--navy-500) 55%, var(--navy-800) 100%);
  position: relative;
}
.kisi__foto--monogram::after {
  content: ""; position: absolute; inset: auto -20% -40% -20%; height: 70%;
  background: radial-gradient(60% 100% at 50% 0%, rgba(227,190,132,.20), transparent 70%);
}
.kisi__foto--monogram .kisi__monogram {
  /* SADECE monogram; `span` genel secicisi ROL ROZETINI de yakalayip 46px
     altin bir kutuya cevirmisti (olculdu 14.09.2026). */
  font-family: var(--font-head); font-weight: 800; font-size: 2.875rem; letter-spacing: .04em;
  color: var(--gold-400); position: relative; z-index: 1;
}
.kisi__govde { padding: var(--s-5); display: flex; flex-direction: column; gap: 0.375rem; flex: 1; }
.kisi__govde .badge { align-self: flex-start; }
.kisi__govde h3 { margin-top: var(--s-2); }
.kisi__rol { font-size: 0.84375rem; color: var(--blue-ink); font-weight: 600; }
.kisi__govde p:not(.kisi__rol) { font-size: 0.875rem; color: var(--muted); margin-top: 0.25rem; }
.kisi__govde .btn { margin-top: auto; align-self: flex-start; }


/* --- ekosistem sag paneli (mockup 29) --- */
.eko-panel { background: linear-gradient(165deg, #062A57 0%, #04214A 60%, #041A3C 100%); border-radius: var(--r-lg); overflow: hidden; }
.eko-panel__harita { position: relative; padding: var(--s-5) var(--s-5) 0; }
.eko-panel__map { width: 100%; opacity: .30; filter: brightness(1.6) saturate(.3); }
.eko-panel__foto { position: absolute; left: 8%; right: 8%; bottom: -14%; width: 84%; height: 56%;
  object-fit: cover; border-radius: var(--r-md); box-shadow: 0 1.125rem 2.5rem rgba(0,0,0,.35); }
.eko-panel .map-pin { font-size: 0.6875rem; padding: 0.3125rem 0.5625rem; z-index: 3; }
.map-pin--merkez { background: var(--navy-600); color: #fff; border-color: var(--navy-500); }
.map-pin--merkez svg { color: var(--gold-400); }
.eko-alinti { position: absolute; right: var(--s-5); top: 34%; width: 12.5rem; margin: 0; z-index: 4;
  background: rgba(255,255,255,.96); border-radius: var(--r-md); padding: var(--s-4); box-shadow: var(--shadow-md); }
.eko-alinti__tirnak { width: 1.25rem; height: 1.25rem; color: var(--gold-400); }
.eko-alinti blockquote { margin: 0.375rem 0 0; font-size: 0.8125rem; line-height: 1.45; color: var(--navy-800); font-style: italic; }
.eko-alinti figcaption { margin-top: var(--s-3); font-size: 0.71875rem; color: var(--muted); display: grid; gap: 2px; }
.eko-alinti figcaption b { color: var(--navy-900); }
.eko-alinti .stars { font-size: 0.6875rem; }
.eko-panel__slogan { margin: 15% var(--s-6) 0; color: #fff; font-family: var(--font-head); font-weight: 800;
  font-size: 1.1875rem; letter-spacing: .04em; text-transform: uppercase; line-height: 1.35; }
.eko-panel__slogan::after { content: ""; display: block; width: 2.875rem; height: 0.1875rem; background: var(--gold-400); margin-top: var(--s-3); border-radius: 2px; }
.eko-panel .eco-collage { margin: var(--s-5) 0 0; border-radius: 0; }
.eko-serit { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); background: rgba(0,0,0,.22); }
.eko-serit div { display: grid; justify-items: center; gap: 0.5rem; padding: var(--s-4) var(--s-2); text-align: center;
  border-left: 1px solid rgba(255,255,255,.08); }
.eko-serit div:first-child { border-left: 0; }
.eko-serit svg { width: 1.375rem; height: 1.375rem; color: var(--gold-400); }
.eko-serit span { font-size: 0.6875rem; color: #D6E4F6; line-height: 1.35; }
@media (max-width: 900px) {
  .eko-panel__foto { position: static; width: 100%; height: auto; aspect-ratio: 16/10; margin-top: var(--s-4); }
  .eko-alinti { position: static; width: auto; margin-top: var(--s-4); }
  .eko-panel__slogan { margin-top: var(--s-5); }
  .eko-serit { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .eko-serit div:nth-child(odd) { border-left: 0; }
}


/* ============================================================
   KADINLAR BOLUMU (mockup 39 · birebir kurulum 12.09.2026)
   Onceki hali sadakat denetiminde 56/100 aldi: duzen tersti,
   4 cozum karti 2x2 idi, ikon/rozet/oncesi-sonrasi seridi yoktu.
   ============================================================ */
.women { overflow: clip; }

/* --- ust: solda tam kenara akan fotograf, sagda icerik --- */
.women__ust {
  display: grid;
  grid-template-columns: minmax(0, 26.875rem) minmax(0, 1fr);
  gap: var(--s-8);
  align-items: start;
}
.women__foto {
  position: relative; margin: 0; overflow: hidden; background: var(--navy-800);
  border-radius: 0 var(--r-xl) var(--r-xl) 0;
  align-self: stretch; min-height: 30rem;
  /* kenardan tasma: kapsayici dolgusu + pencere artigi kadar sola cek */
  margin-left: calc(-1 * var(--s-6) + min(0px, (var(--container) - 100vw) / 2));
}
.women__foto img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center 22%; display: block;
}
.women__elyazi {
  position: absolute; left: var(--s-6); top: var(--s-5); z-index: 2;
  font-family: var(--font-hand); font-size: 2.125rem; line-height: 1.12;
  color: #fff; transform: rotate(-6deg); text-shadow: 0 2px 0.875rem rgba(4, 18, 40, .55);
}
.women__elyazi::after {
  content: ""; display: block; width: 5.75rem; height: 2px; border-radius: 2px;
  background: var(--gold-400); margin-top: var(--s-3); transform: rotate(6deg);
}

.women__basbar { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-6); align-items: start; }
.medal--akis { position: static; flex: none; width: 7.25rem; height: 7.25rem; }
.women__italik {
  font-family: Georgia, "Times New Roman", serif; font-style: italic;
  font-weight: 400; color: var(--gold-400); letter-spacing: -0.01em;
  margin-left: .14em;
}
.women .lead { max-width: 62ch; }

/* --- 4 cozum karti: TEK SATIR (mockup) --- */
.women__cozum {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s-4); margin-top: var(--s-6);
}
.wcard {
  background: rgba(255, 255, 255, .055); border: 1px solid rgba(255, 255, 255, .12);
  border-radius: var(--r-md); padding: var(--s-5) var(--s-4);
  display: flex; flex-direction: column; text-align: center; align-items: center;
}
.wcard__ikon { display: block; color: var(--gold-400); }
.wcard__ikon svg { width: 2.25rem; height: 2.25rem; }
.wcard b {
  display: block; margin-top: var(--s-3); font-family: var(--font-head);
  font-size: 0.875rem; font-weight: 700; line-height: 1.25; color: #fff;
}
.wcard p { margin-top: var(--s-2); font-size: 0.8125rem; line-height: 1.5; color: #C6D6EE; }

/* --- orta: altin kart + beyaz sonuc paneli --- */
.women__orta {
  display: grid; grid-template-columns: minmax(0, 26.875rem) minmax(0, 1fr);
  gap: var(--s-8); align-items: stretch; margin-top: var(--s-7);
}
.women__altin {
  position: relative; display: flex; flex-direction: column; justify-content: center;
  background: linear-gradient(115deg, var(--gold-200) 0%, var(--gold-300) 48%, var(--gold-500) 100%);
  padding: var(--s-6) 6.25rem var(--s-6) var(--s-6);
  color: var(--navy-900); min-height: 9.75rem;
  border-radius: 0 var(--r-lg) var(--r-lg) 0;
  margin-left: calc(-1 * var(--s-6) + min(0px, (var(--container) - 100vw) / 2));
}
.women__altin b { font-family: var(--font-head); font-size: clamp(1.375rem, 1.7vw, 1.75rem); font-weight: 800; line-height: 1.12; }
.women__altin-alt {
  display: block; margin-top: var(--s-3); padding-top: var(--s-3);
  border-top: 1px solid rgba(7, 27, 61, .22);
  font-size: 0.71875rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-700);
}
.women__altin-ok {
  position: absolute; right: var(--s-6); top: 50%; transform: translateY(-50%);
  width: 3rem; height: 3rem; border-radius: var(--r-pill); background: var(--navy-800);
  display: grid; place-items: center; color: #fff; transition: transform .18s ease;
}
.women__altin-ok svg { width: 1.25rem; height: 1.25rem; }
.women__altin:hover .women__altin-ok { transform: translateY(-50%) translateX(0.25rem); }

.women__sonuc {
  background: #fff; border-radius: var(--r-lg); padding: var(--s-5);
  display: grid; grid-template-columns: minmax(0, 16.25rem) minmax(0, 1fr); gap: var(--s-5); align-items: center;
}
.women__sonuc-metin h3 { font-family: var(--font-head); font-size: clamp(1.375rem, 1.6vw, 1.6875rem); font-weight: 800; color: var(--navy-900); line-height: 1.12; }
.women__sonuc-metin p { margin-top: var(--s-3); font-size: 0.875rem; color: var(--muted); }
.women__link {
  display: inline-flex; align-items: center; gap: 0.5rem; margin-top: var(--s-4);
  font-family: var(--font-head); font-size: 0.84375rem; font-weight: 700; color: var(--blue-ink);
}
.women__link svg { width: 0.9375rem; height: 0.9375rem; }
.women__serit { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-3); }

/* tek fotograftaki oncesi/sonrasi ciftini iki kareye boler */
.ba-yari {
  position: relative; margin: 0; border-radius: var(--r-sm);
  overflow: hidden; background: var(--bg-2);
}
.ba-yari::before { content: ""; display: block; padding-top: 100%; }
.ba-yari img {
  position: absolute; top: 50%; left: 0; transform: translateY(-50%);
  width: 200%; height: auto; max-width: none;
}
.ba-yari--sonra img { left: -100%; }
.ba-yari figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; margin: 0; padding: 0.3125rem 0;
  text-align: center; font-size: 0.6875rem; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; background: rgba(255, 255, 255, .92); color: var(--navy-900);
}

.ba-veri {
  background: var(--bg-2); border-radius: var(--r-sm); padding: var(--s-3);
  display: flex; flex-direction: column; gap: 0.3125rem; justify-content: center; aspect-ratio: 1 / 1;
}
.ba-veri b { font-family: var(--font-head); font-size: 0.8125rem; color: var(--navy-900); }
.ba-veri span { display: flex; align-items: center; gap: 0.375rem; font-size: 0.6875rem; color: var(--muted); line-height: 1.3; }
.ba-veri svg { width: 0.8125rem; height: 0.8125rem; color: var(--blue-ink); flex: none; }

.ba-daha {
  background: var(--navy-800); border-radius: var(--r-sm); padding: var(--s-3);
  display: flex; flex-direction: column; justify-content: center; gap: 0.375rem; aspect-ratio: 1 / 1; color: #fff;
}
.ba-daha__ok { width: 1.875rem; height: 1.875rem; border-radius: var(--r-pill); background: rgba(255, 255, 255, .12); display: grid; place-items: center; color: var(--gold-400); }
.ba-daha__ok svg { width: 0.9375rem; height: 0.9375rem; }
.ba-daha b { font-family: var(--font-head); font-size: 0.8125rem; }
.ba-daha span:not(.ba-daha__ok) { font-size: 0.6875rem; color: #B9CCE6; line-height: 1.3; }

/* --- alt bant --- */
.women__band {
  margin-top: var(--s-6); background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .12); border-radius: var(--r-lg); padding: var(--s-5);
  display: grid; grid-template-columns: 11.875rem minmax(0, 15.625rem) minmax(0, 1fr) minmax(0, 17.5rem);
  gap: var(--s-5); align-items: center;
}
/* .play/.sure kurallari .video-card'a bagliydi; bu buton onun disinda
   oldugu icin oynat dugmesi hic boyanmiyordu (olculdu: duz metin cikti) */
.women__video {
  position: relative; display: block; width: 100%; padding: 0; border: 0;
  background: none; border-radius: var(--r-md); overflow: hidden;
}
.women__video img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: block; }
.women__video .play { position: absolute; inset: 0; display: grid; place-items: center; }
.women__video .play i {
  width: 2.875rem; height: 2.875rem; border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .96); box-shadow: 0 0 0 0.375rem rgba(255, 255, 255, .22);
  display: grid; place-items: center;
  transition: transform .18s ease;
}
.women__video .play i::after {
  content: ""; border-left: 0.8125rem solid var(--navy-800); border-top: 0.5rem solid transparent;
  border-bottom: 0.5rem solid transparent; margin-left: 0.25rem;
}
.women__video:hover .play i { transform: scale(1.08); }
.women__video .sure {
  position: absolute; left: var(--s-2); bottom: var(--s-2);
  background: rgba(7, 27, 61, .82); color: #fff; font-size: 0.65625rem; font-weight: 600;
  padding: 0.1875rem 0.5rem; border-radius: var(--r-sm);
}
.women__hikaye { margin: 0; }
.women__hikaye figcaption { font-size: 0.71875rem; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-400); }
.women__hikaye q { display: block; margin-top: 0.5rem; font-size: 0.84375rem; font-style: italic; line-height: 1.5; color: #DCE7F6; }
.women__hikaye b { display: block; margin-top: var(--s-3); font-size: 0.78125rem; font-weight: 600; color: #fff; }
.women__hikaye b span { color: var(--gold-400); margin-inline: 0.1875rem; }
.women__hikaye .stars { font-size: 0.8125rem; margin-top: 0.25rem; display: block; }

.women__ozellik { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); }
.women__ozellik > div { text-align: center; padding-inline: var(--s-3); border-left: 1px solid rgba(255, 255, 255, .12); }
.women__ozellik > div:first-child { border-left: 0; }
.women__ozellik span { color: var(--gold-400); display: block; }
.women__ozellik svg { width: 1.625rem; height: 1.625rem; }
.women__ozellik b { display: block; margin-top: var(--s-2); font-family: var(--font-head); font-size: 0.78125rem; line-height: 1.25; color: #fff; }
.women__ozellik p { margin-top: 0.3125rem; font-size: 0.71875rem; line-height: 1.4; color: #BDD0E8; }

.women__eylem { display: grid; gap: var(--s-4); }
.women__eylem .btn { padding-block: 1.1875rem; font-size: 0.96875rem; line-height: 1.2; }
.women__wa { display: flex; align-items: center; gap: var(--s-3); }
.women__wa-ikon { width: 2.375rem; height: 2.375rem; border-radius: var(--r-pill); background: #fff; display: grid; place-items: center; color: #128C7E; flex: none; }
.women__wa-ikon svg { width: 1.1875rem; height: 1.1875rem; }
.women__wa b { display: block; font-family: var(--font-head); font-size: 0.8125rem; color: #fff; }
.women__wa span span { font-size: 0.71875rem; color: #B9CCE6; }

@media (max-width: 1360px) {
  .women__band { grid-template-columns: 10.625rem minmax(0, 1fr); }
  .women__ozellik { grid-column: 1 / -1; }
  .women__eylem { grid-column: 1 / -1; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; }
}
@media (max-width: 1100px) {
  .women__ust,
  .women__orta { grid-template-columns: minmax(0, 1fr); gap: var(--s-6); }
  .women__foto,
  .women__altin { margin-left: calc(-1 * var(--s-6)); border-radius: 0 var(--r-lg) var(--r-lg) 0; }
  .women__foto { min-height: 0; }
  .women__foto img { position: static; height: auto; aspect-ratio: 16 / 11; object-position: center 26%; }
  .women__elyazi { font-size: 1.75rem; }
  .women__cozum { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .women__sonuc { grid-template-columns: minmax(0, 1fr); }
  .medal--akis { display: none; }
}
@media (max-width: 700px) {
  .women__cozum { grid-template-columns: minmax(0, 1fr); }
  .women__serit { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .women__band { grid-template-columns: minmax(0, 1fr); padding: var(--s-4); }
  .women__ozellik { grid-template-columns: minmax(0, 1fr); }
  .women__ozellik > div { border-left: 0; border-top: 1px solid rgba(255, 255, 255, .12); padding-top: var(--s-4); text-align: left; }
  .women__ozellik > div:first-child { border-top: 0; padding-top: 0; }
  .women__eylem { grid-template-columns: minmax(0, 1fr); }
  .women__foto, .women__altin { margin-left: calc(-1 * var(--s-4)); }
  .women__altin { padding-right: 5.25rem; }
}


/* ============================================================
   KURESEL HASTA TOPLULUGU (mockup 28 · 12.09.2026)
   Onceki hali 62/100: haritada ucus rotalari, ucak ve sehir
   daireleri yoktu; alt guven seridi genel ikonlardan ibaretti.
   ============================================================ */
.kuresel {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr);
  gap: var(--s-8); align-items: center;
}
.kuresel__alt { display: flex; align-items: center; gap: var(--s-6); flex-wrap: wrap; margin-top: var(--s-6); }
.kanit { display: flex; align-items: center; gap: var(--s-3); }
.kanit__yuzler { display: flex; }
.kanit__yuzler img {
  width: 2.125rem; height: 2.125rem; border-radius: var(--r-pill);
  border: 2px solid #fff; object-fit: cover; margin-left: -0.625rem; box-shadow: var(--shadow-sm);
}
.kanit__yuzler img:first-child { margin-left: 0; }
.kanit q { display: block; font-size: 0.8125rem; font-style: italic; color: var(--navy-800); }
.kanit .stars { font-size: 0.75rem; display: block; margin-top: 2px; }
.kanit .stars b { color: var(--navy-900); font-weight: 700; }

.kuresel__harita { isolation: isolate; }
/* ucus rotalari: haritanin uzerinde ince kesikli yaylar */
.rota {
  position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1;
  fill: none; stroke: var(--blue-500); stroke-width: 1.6;
  stroke-dasharray: 5 6; stroke-linecap: round; opacity: .55;
}
.ucak {
  position: absolute; left: 61%; top: 26%; z-index: 2;
  width: 3.125rem; height: 3.125rem; color: var(--navy-800);
  filter: drop-shadow(0 0.375rem 0.75rem rgba(7, 27, 61, .28));
}
.ucak svg { width: 100%; height: 100%; fill: currentColor; }

.sehir { position: absolute; z-index: 3; margin: 0; width: 7.25rem; text-align: center; }
.sehir img {
  width: 7.25rem; height: 7.25rem; border-radius: var(--r-pill); object-fit: cover;
  border: 0.25rem solid #fff; box-shadow: 0 0.625rem 1.625rem rgba(7, 27, 61, .18); display: block;
}
.sehir figcaption { margin-top: 0.5rem; font-size: 0.71875rem; line-height: 1.35; color: var(--muted); }
.sehir figcaption b { display: block; font-family: var(--font-head); font-size: 0.8125rem; color: var(--navy-900); }
.sehir--usa { left: 7%; top: 45%; }
.sehir--uk { left: 42%; top: 41%; }
.sehir--ist { right: 5%; top: 43%; }

.map-pin--altin {
  background: linear-gradient(120deg, var(--gold-200), var(--gold-300));
  border-color: var(--gold-400); align-items: flex-start; padding: 0.5rem var(--s-3);
}
.map-pin--altin svg { color: var(--gold-700); margin-top: 2px; flex: none; }
.map-pin--altin span { display: block; font-weight: 400; font-size: 0.65625rem; color: var(--gold-700); line-height: 1.35; }
.map-pin--altin span b { display: block; font-size: 0.75rem; color: var(--navy-900); }

/* alt guven seridi (mockup: marka + rozet + sayi) */
.guven-serit {
  margin-top: var(--s-7); background: #fff; border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--shadow-sm);
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
}
.guven-serit__marka {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-4) var(--s-5); border-left: 1px solid var(--line);
}
.guven-serit__marka:first-child { border-left: 0; }
.guven-serit__marka img { width: 2.625rem; height: 2.625rem; object-fit: contain; flex: none; }
.guven-serit__marka > span { font-size: 0.75rem; color: var(--muted); line-height: 1.35; }
.guven-serit__marka > span b { display: block; font-family: var(--font-head); font-size: 0.875rem; color: var(--navy-900); }
.guven-serit__rozet {
  width: 2.625rem; height: 2.625rem; border-radius: var(--r-pill); flex: none;
  border: 1.5px solid var(--navy-600); color: var(--navy-700);
  display: grid; place-items: center; text-align: center;
  font-family: var(--font-head); font-size: 0.625rem; font-weight: 700; line-height: 1.1;
}

@media (max-width: 1100px) {
  .kuresel { grid-template-columns: minmax(0, 1fr); }
  .sehir, .ucak, .rota { display: none; }
  .guven-serit { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .guven-serit__marka:nth-child(odd) { border-left: 0; }
  .guven-serit__marka:nth-child(n+3) { border-top: 1px solid var(--line); }
}
@media (max-width: 700px) {
  .guven-serit { grid-template-columns: minmax(0, 1fr); }
  .guven-serit__marka { border-left: 0; border-top: 1px solid var(--line); }
  .guven-serit__marka:first-child { border-top: 0; }
  .kuresel__alt { gap: var(--s-4); }
}


/* ikon kutusu acik zeminde kayboluyordu (--blue-50 #EAF1FD vs --bg-2 #EAF0F9
   arasi fark ~1): --alt bolumlerde beyaz zemin + ince cizgi */
.section--alt .icon-box { background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
.section--alt .icon-box--gold { background: #fff; box-shadow: inset 0 0 0 1px var(--gold-200); }
.section--alt .icon-box--navy { background: var(--navy-600); box-shadow: none; }

/* mockup 28'de el yazisi aksani var; genel gizleme kurali bunu da susturmustu */




/* mockup 28: harita mavi tonlu ve ABD/UK/Turkiye parlatilmis */
.parilti { position: absolute; z-index: 0; border-radius: var(--r-pill); pointer-events: none;
  background: radial-gradient(closest-side, rgba(27, 106, 247, .40), rgba(27, 106, 247, 0) 100%); }
.parilti--usa { left: 6%; top: 16%; width: 24%; height: 40%; }
.parilti--uk { left: 44%; top: 8%; width: 12%; height: 26%; }
.parilti--tr { left: 54%; top: 22%; width: 12%; height: 24%; }
.rota { stroke-dasharray: none; stroke-width: 2; opacity: .7;
  stroke: rgba(27, 106, 247, .75); }
.kanit__yuzler img { width: 2.5rem; height: 2.5rem; }
@media (max-width: 1100px) { .parilti { display: none; } }


/* ============================================================
   PLANLAMA ARACLARI (mockup 42 · 12.09.2026)
   Onceki hali 62/100: bolum beyazdi, basligin ustunde bant yoktu,
   kartlar resimli genel kartlardi; numara/rozet/bayrak/sac tipi yoktu.
   ============================================================ */
.plan {
  background:
    radial-gradient(90% 70% at 15% 0%, rgba(27, 106, 247, .22), transparent 60%),
    linear-gradient(160deg, #062A57 0%, #062043 55%, #04172F 100%);
  color: #fff; position: relative; overflow: clip;
}
.plan .h2, .plan .h3 { color: #fff; }
.plan .lead { color: #C6D6EE; }
.plan .eyebrow { color: var(--gold-400); }
.plan .eyebrow::before, .plan .eyebrow::after { background: var(--gold-400); }
.plan .accent-gold { color: var(--gold-400); }
.plan .mini-facts { color: #CBDCEF; }
.plan .mini-facts svg { color: var(--gold-400); }
.plan__yazi { top: 1.875rem; right: 1.5rem; color: var(--gold-300); font-size: 1.5rem; text-align: right; }

.arac-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-5); align-items: start; }
.arac {
  background: #fff; border-radius: var(--r-lg); padding: var(--s-5);
  display: flex; flex-direction: column; gap: var(--s-3); height: 100%;
  box-shadow: 0 1.125rem 2.75rem rgba(3, 15, 35, .28);
}
.arac__ust { display: flex; align-items: center; gap: var(--s-3); }
.arac__no {
  width: 1.875rem; height: 1.875rem; border-radius: var(--r-pill); flex: none;
  background: var(--navy-800); color: #fff; display: grid; place-items: center;
  font-family: var(--font-head); font-size: 0.875rem; font-weight: 800;
}
.arac .h3 { color: var(--navy-900); font-size: 1.3125rem; }
.arac > p { font-size: 0.84375rem; color: var(--muted); line-height: 1.5; }
.arac .btn { margin-top: auto; }
.btn--ghost-blue { background: #fff; color: var(--blue-ink); border-color: var(--blue-100); }
.btn--ghost-blue:hover { border-color: var(--blue-ink); }
.btn--ghost-navy { background: #fff; color: var(--navy-800); border-color: var(--line-2); }
.btn--ghost-navy:hover { border-color: var(--navy-600); }
.arac__etiket { font-size: 0.75rem; font-weight: 600; color: var(--navy-800); }

/* kart 1 — ulke fiyat kiyasi */
.fiyat-kiyas {
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: var(--s-2); align-items: stretch;
}
.fiyat-kiyas > div { background: var(--bg-2); border-radius: var(--r-md); padding: var(--s-3); }
.fiyat-kiyas--biz { background: var(--gold-50); box-shadow: inset 0 0 0 1px var(--gold-200); }
.fiyat-kiyas__yer { display: flex; align-items: center; gap: 0.375rem; font-size: 0.6875rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--navy-900); }
.fiyat-kiyas__yer img { width: 1rem; height: 0.6875rem; border-radius: 2px; }
.fiyat-kiyas__not { display: block; margin-top: 0.375rem; font-size: 0.6875rem; color: var(--muted); }
.fiyat-kiyas b { display: block; margin-top: 2px; font-family: var(--font-head); font-size: 0.875rem; color: var(--navy-900); }
.fiyat-kiyas--biz b { color: var(--gold-700); }
.fiyat-kiyas__vs { align-self: center; font-size: 0.6875rem; font-weight: 700; color: var(--muted-2); text-transform: uppercase; }
.arac__liste { display: grid; gap: 0.4375rem; }
.arac__liste li { display: flex; align-items: center; gap: 0.5rem; font-size: 0.8125rem; color: var(--navy-800); }
.arac__liste svg { width: 1rem; height: 1rem; color: var(--green-600); flex: none; }

/* kart 2 — fotograf yukleme + sac tipi */
.yukle-kutu {
  display: flex; align-items: center; gap: var(--s-3);
  background: var(--blue-50); border: 1px dashed var(--blue-100);
  border-radius: var(--r-md); padding: var(--s-3);
}
.yukle-kutu__ikon { width: 2.375rem; height: 2.375rem; border-radius: var(--r-sm); background: var(--blue-600); color: #fff; display: grid; place-items: center; flex: none; }
.yukle-kutu__ikon svg { width: 1.1875rem; height: 1.1875rem; }
.yukle-kutu span { font-size: 0.71875rem; color: var(--muted); line-height: 1.35; }
.yukle-kutu span b { display: block; font-family: var(--font-head); font-size: 0.8125rem; color: var(--navy-900); }
.sac-tipi { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.375rem; }
.sac-tipi label { display: block; text-align: center; border-radius: var(--r-sm); padding: 0.25rem; border: 1.5px solid var(--line); }
.sac-tipi input { position: absolute; opacity: 0; width: 0; height: 0; }
.sac-tipi img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 0.375rem; display: block; }
.sac-tipi span { display: block; margin-top: 0.25rem; font-size: 0.59375rem; font-weight: 600; color: var(--muted); line-height: 1.2; }
.sac-tipi label:has(input:checked) { border-color: var(--blue-ink); background: var(--blue-50); }
.sac-tipi label:has(input:checked) span { color: var(--blue-ink); }
.sac-tipi label:has(input:focus-visible) { outline: 2px solid var(--blue-600); outline-offset: 2px; }

/* kart 3 — kafa semasi + bolge secimi */
.kafa-sema { position: relative; margin: 0; border-radius: var(--r-md); overflow: hidden; background: var(--bg-2); }
.kafa-sema img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.kafa-sema svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.kafa-sema__et {
  position: absolute; left: 50%; transform: translate(-50%, -50%);
  background: rgba(7, 27, 61, .78); color: #fff; border-radius: var(--r-pill);
  font-size: 0.625rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 0.1875rem 0.5625rem;
}
.bolge-sec { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.375rem; }
.bolge-sec span {
  display: grid; justify-items: center; gap: 0.25rem; padding: 0.5rem 0.25rem;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  font-size: 0.59375rem; font-weight: 600; color: var(--muted); text-align: center; line-height: 1.2;
}
.bolge-sec svg { width: 1.25rem; height: 1.25rem; color: var(--navy-700); }

/* kart 4 — dahil olanlar */
.dahil-liste { display: grid; gap: var(--s-3); }
.dahil-liste li { display: flex; align-items: flex-start; gap: var(--s-3); }
.dahil-liste > li > svg { width: 1.25rem; height: 1.25rem; color: var(--navy-700); flex: none; margin-top: 2px; }
.dahil-liste span { font-size: 0.71875rem; color: var(--muted); line-height: 1.35; }
.dahil-liste span b { display: block; font-family: var(--font-head); font-size: 0.8125rem; color: var(--navy-900); }

/* alt serit */
.plan__serit {
  margin-top: var(--s-6); background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .12); border-radius: var(--r-lg);
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
}
.plan__serit > * { padding: var(--s-4) var(--s-5); border-left: 1px solid rgba(255, 255, 255, .12); display: flex; align-items: center; gap: var(--s-3); }
.plan__serit > *:first-child { border-left: 0; }
.plan .kanit b { display: block; font-family: var(--font-head); font-size: 0.875rem; color: #fff; }
.plan .kanit span { font-size: 0.75rem; color: #BDD0E8; }
.plan .kanit__yuzler img { border-color: rgba(255, 255, 255, .85); }
.plan__serit-yorum { flex-wrap: wrap; }
.plan__serit-yorum q { display: block; font-size: 0.8125rem; font-style: italic; color: #DCE7F6; }
.plan__serit-yorum > span:last-child { font-size: 0.71875rem; color: #9FB6D6; }
.plan__serit-gizli b { display: block; font-family: var(--font-head); font-size: 0.875rem; color: #fff; }
.plan__serit-gizli > span:last-child { font-size: 0.75rem; color: #BDD0E8; }
.plan__serit-gizli .icon-box { background: rgba(255, 255, 255, .12); color: var(--gold-400); box-shadow: none; }

@media (max-width: 1360px) {
  .arac-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .plan__serit { grid-template-columns: minmax(0, 1fr); }
  .plan__serit > * { border-left: 0; border-top: 1px solid rgba(255, 255, 255, .12); }
  .plan__serit > *:first-child { border-top: 0; }
}
@media (max-width: 700px) {
  .arac-grid { grid-template-columns: minmax(0, 1fr); }
  .fiyat-kiyas { grid-template-columns: minmax(0, 1fr); }
  .fiyat-kiyas__vs { justify-self: center; }
}


/* EL YAZISI AKSANLARI: mockup'larin tasarim dili, neredeyse her bolumde var.
   Once genel `display:none` konmus, sonra bolum bolum istisna eklenmisti
   (uc istisna = kural yanlis). Kural kaldirildi; gizleme yalniz dar ekranda. */


.fiyat-kiyas__yer { font-size: 0.625rem; letter-spacing: .04em; }


/* ============================================================
   KOYU ZEMIN DUZELTMELERI (olculdu 12.09.2026 · tools/sayfa_denetim.py)
   .stars beyaz zemin icin #9A5B00 -> koyu bolumde 2.62 (esik 4.5).
   Altin zemindeki alt satir 4.46 -> esigin hemen altinda.
   ============================================================ */
.plan .stars,
.women .stars,
.section--dark .stars { color: var(--gold-300); }
.women__altin-alt { color: #6E4A16; }
.map-pin--altin span { color: #6E4A16; }


/* ============================================================
   PLANLAYICI (mockup 02 · 12.09.2026)
   Olculen eksikler: sol guven kolonu, alt istatistik seridi,
   sag panelde fotograf, 'you commit' altin tonu, el yazisi aksanlari.
   ============================================================ */
.planner { grid-template-columns: minmax(0, 13.125rem) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 18.125rem); }
.sc-guven { display: grid; gap: var(--s-6); align-content: center; }
.sc-guven > div { display: grid; grid-template-columns: 2.125rem minmax(0, 1fr); gap: var(--s-3) var(--s-3); }
.sc-guven span {
  grid-row: span 2; width: 2.125rem; height: 2.125rem; border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .14); display: grid; place-items: center; color: #fff;
}
.sc-guven svg { width: 1.0625rem; height: 1.0625rem; }
.sc-guven b { font-family: var(--font-head); font-size: 0.84375rem; color: #fff; align-self: end; line-height: 1.25; }
.sc-guven p { font-size: 0.75rem; color: #C2D4EA; line-height: 1.35; }

/* foto zeminli bolumde altin vurgu koyu tona dusuyordu (olculdu) */
#selfcheck .accent-gold { color: var(--gold-400); }
.sc-yazi-alt { left: 1.5rem; bottom: 6rem; top: auto; font-size: 1.625rem; text-align: left; }

.wa-panel--foto { padding: 0; overflow: hidden; background: linear-gradient(170deg, #0A2E5E 0%, #062043 60%, #041730 100%); }
.wa-panel--foto > img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: center 22%; display: block; }
.wa-panel__govde { padding: var(--s-5); display: grid; gap: var(--s-3); }
.wa-panel__govde h3 { color: #fff; font-family: var(--font-head); font-size: 1.375rem; font-weight: 800; line-height: 1.15; }
.wa-panel__govde > p { font-size: 0.8125rem; color: #C2D4EA; line-height: 1.5; }
.wa-panel__govde .btn { justify-content: space-between; }
.btn--koyu { background: rgba(255, 255, 255, .10); color: #fff; border-color: rgba(255, 255, 255, .28); }
.btn--koyu:hover { background: rgba(255, 255, 255, .18); }
.wa-panel__not { display: flex; align-items: center; justify-content: center; gap: 0.375rem; font-size: 0.75rem; color: #A9C1DE; }
.wa-panel__not svg { color: var(--gold-400); }

.sc-serit {
  margin-top: var(--s-6); border-radius: var(--r-lg);
  background: rgba(4, 20, 44, .72); border: 1px solid rgba(255, 255, 255, .14);
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
}
.sc-serit > div {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-4) var(--s-5); border-left: 1px solid rgba(255, 255, 255, .14);
}
.sc-serit > div:first-child { border-left: 0; }
.sc-serit svg { width: 1.5rem; height: 1.5rem; color: var(--gold-400); flex: none; }
.sc-serit span { font-size: 0.75rem; color: #BDD0E8; line-height: 1.35; }
.sc-serit span b { display: block; font-family: var(--font-head); font-size: 0.9375rem; color: #fff; }

@media (max-width: 1360px) {
  .planner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .sc-guven { grid-column: 1 / -1; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); }
}
@media (max-width: 900px) {
  .planner { grid-template-columns: minmax(0, 1fr); }
  .sc-guven { grid-template-columns: minmax(0, 1fr); }
  .sc-serit { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sc-serit > div:nth-child(odd) { border-left: 0; }
  .sc-serit > div:nth-child(n+3) { border-top: 1px solid rgba(255, 255, 255, .14); }
  .sc-yazi-alt { display: none; }
}
@media (max-width: 700px) {
  .sc-serit { grid-template-columns: minmax(0, 1fr); }
  .sc-serit > div { border-left: 0; border-top: 1px solid rgba(255, 255, 255, .14); }
  .sc-serit > div:first-child { border-top: 0; }
}


/* ============================================================
   PAYLASILAN BOLUM SERITLERI (12.09.2026)
   Dort bolumun ayni YUKSEK bulgusu vardi ("alt bilgi cubugu eksik").
   Tek bilesen, mockup'inda gercekten bulunan bolumlerde kullanilir.
   ============================================================ */
.serit-cta {
  margin-top: var(--s-6); border-radius: var(--r-lg);
  background: linear-gradient(100deg, #062A57 0%, #0A3A72 55%, #062446 100%);
  padding: var(--s-5) var(--s-6); color: #fff;
  display: flex; align-items: center; gap: var(--s-6); flex-wrap: wrap;
}
/* Hedef tasarim IMG_3032: avatarlarin YANINDA dikey ayrac + iki satirlik
   destek yazisi, baslikta ikinci satir acik mavi. */
.serit-cta__ust { display: flex; align-items: center; gap: var(--s-4); }
.serit-cta__destek {
  font-size: 0.8125rem; line-height: 1.35; color: #BDD0E8;
  padding-left: var(--s-4); border-left: 1px solid rgba(255, 255, 255, .22);
}
.serit-vurgu { color: #8FC0FF; }
.serit-cta__metin { flex: 1 1 16.25rem; }
.serit-cta__metin b { display: block; font-family: var(--font-head); font-size: 1.25rem; font-weight: 800; }
.serit-cta__metin p { margin-top: 0.375rem; font-size: 0.84375rem; color: #C2D4EA; }
.serit-cta__eylem { display: grid; gap: 0.5rem; justify-items: center; }
.serit-cta__not { display: flex; align-items: center; gap: 0.375rem; font-size: 0.71875rem; color: #BDD0E8; }
.serit-cta__not svg { width: 0.8125rem; height: 0.8125rem; color: var(--gold-400); }
.serit-cta__not i { color: rgba(255, 255, 255, .35); font-style: normal; }
.serit-cta__ikonlar { display: flex; gap: var(--s-6); }
.serit-cta__ikonlar span {
  display: grid; justify-items: center; gap: 0.375rem;
  font-size: 0.71875rem; color: #CBDCEF; text-align: center;
}
.serit-cta__ikonlar svg { width: 1.375rem; height: 1.375rem; color: #fff; }

.serit-olgu {
  margin-top: var(--s-6); display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.serit-olgu > div {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-4) var(--s-5); border-left: 1px solid var(--line);
}
.serit-olgu > div:first-child { border-left: 0; }
.serit-olgu svg { width: 1.625rem; height: 1.625rem; color: var(--navy-700); flex: none; }
.serit-olgu span { font-size: 0.78125rem; color: var(--muted); line-height: 1.35; }
.serit-olgu span b { display: block; font-family: var(--font-head); font-size: 0.9375rem; color: var(--navy-900); }

.danisma {
  margin-top: var(--s-4); border-radius: var(--r-lg); padding: var(--s-5);
  background: linear-gradient(150deg, #072B57 0%, #05203F 100%); color: #fff;
}
.danisma > b { display: block; font-family: var(--font-head); font-size: 1.3125rem; font-weight: 800; }
.danisma > p { margin-top: 0.5rem; font-size: 0.84375rem; color: #C2D4EA; line-height: 1.5; }
.danisma__alt { margin-top: var(--s-4); display: flex; align-items: center; gap: var(--s-5); flex-wrap: wrap; }
.danisma__olgu { display: flex; gap: var(--s-5); }
.danisma__olgu span { display: grid; justify-items: center; gap: 0.3125rem; font-size: 0.6875rem; color: #BDD0E8; text-align: center; max-width: 5.75rem; line-height: 1.3; }
.danisma__olgu svg { width: 1.1875rem; height: 1.1875rem; color: var(--gold-400); }

@media (max-width: 900px) {
  .serit-olgu { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .serit-olgu > div:nth-child(odd) { border-left: 0; }
  .serit-olgu > div:nth-child(n+3) { border-top: 1px solid var(--line); }
  .serit-cta { padding: var(--s-5); }
  .serit-cta__ikonlar { gap: var(--s-4); }
}
@media (max-width: 700px) {
  .serit-olgu { grid-template-columns: minmax(0, 1fr); }
  .serit-olgu > div { border-left: 0; border-top: 1px solid var(--line); }
  .serit-olgu > div:first-child { border-top: 0; }
  .serit-cta__eylem { justify-items: stretch; width: 100%; }
  /* IMG_3032 duzeni: avatar satiri ustte, altinda iki renkli baslik. */
  .serit-cta { flex-direction: column; align-items: flex-start; gap: var(--s-4); }
  .serit-cta__ust { width: 100%; }
  .serit-cta__metin { flex: 1 1 auto; width: 100%; }
  .serit-cta__metin b { font-size: 1.1875rem; line-height: 1.25; }
  .danisma__alt { gap: var(--s-4); }
  .danisma__olgu { gap: var(--s-3); }
}


/* ============================================================
   HASTA REHBERLERI (mockup 26 · 12.09.2026)
   Kolonlar terstı: mockup'ta baslik+liste SOLDA, fotograf SAGDA;
   fotografin sag kenarinda dikey rozetler, alt kosesinde fotografa
   binen koyu danisma kutusu.
   ============================================================ */
.kilavuz { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .92fr); gap: var(--s-8); align-items: start; }
.kilavuz__liste { display: grid; gap: var(--s-3); margin-top: var(--s-6); }
.icon-box--dolu,
.section--alt .icon-box--dolu { background: var(--blue-600); color: #fff; box-shadow: none; }
.kilavuz__alt { display: flex; align-items: center; gap: var(--s-5); flex-wrap: wrap; margin-top: var(--s-5); }
.kilavuz__not { display: flex; align-items: center; gap: var(--s-3); font-size: 0.78125rem; color: var(--muted); line-height: 1.35; }
.kilavuz__not svg { width: 1.5rem; height: 1.5rem; color: var(--navy-700); flex: none; }
.kilavuz__not b { display: block; font-family: var(--font-head); font-size: 0.8125rem; color: var(--navy-900); }

.kilavuz__sag { position: relative; padding-right: 7.375rem; }
.kilavuz__foto { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: var(--r-lg); display: block; }
.kilavuz__yazi { top: 1.125rem; right: 0; width: 13.125rem; text-align: right; font-size: 1.625rem; }
.kilavuz__rozet {
  position: absolute; right: 0; top: 22%;
  display: grid; gap: var(--s-5); width: 6.5rem; justify-items: center;
}
.kilavuz__rozet span { display: grid; justify-items: center; gap: 0.4375rem; text-align: center; }
.kilavuz__rozet svg { width: 2.5rem; height: 2.5rem; padding: 0.5625rem; border-radius: var(--r-pill);
  background: #fff; color: var(--navy-700); box-shadow: var(--shadow-md); }
.kilavuz__rozet b { font-family: var(--font-head); font-size: 0.6875rem; color: var(--navy-900); line-height: 1.3; }
.kilavuz__sag .danisma { position: relative; margin-top: -5.625rem; margin-right: -5.25rem; z-index: 2; }

@media (max-width: 1100px) {
  .kilavuz { grid-template-columns: minmax(0, 1fr); }
  .kilavuz__sag { padding-right: 0; margin-top: var(--s-6); }
  .kilavuz__foto { aspect-ratio: 16 / 10; }
  .kilavuz__rozet { position: static; width: auto; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); margin-top: var(--s-4); }
  .kilavuz__sag .danisma { margin: var(--s-4) 0 0; }
  .kilavuz__yazi { display: none; }
}


/* ============================================================
   SSS UST BOLUMU (mockup 22) + ABD SAG KOLONU (mockup 36) · 12.09.2026
   ============================================================ */
.faq-ust { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .85fr); gap: var(--s-7); align-items: center; }
.faq-ust .h2 { font-size: clamp(2.125rem, 3.2vw, 3.25rem); }
.faq-ust__gorsel { position: relative; }
.faq-ust__gorsel > img {
  width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: center 22%;
  border-radius: var(--r-lg); display: block;
}
.faq-ust__yazi { left: 6%; top: 14%; right: auto; width: 12.5rem; font-size: 1.5625rem; }
.faq-alinti {
  position: absolute; right: var(--s-4); bottom: var(--s-4); width: 15rem; margin: 0;
  background: rgba(255, 255, 255, .96); border-radius: var(--r-md);
  padding: var(--s-4); box-shadow: var(--shadow-md);
}
.faq-alinti blockquote { margin: 0.375rem 0 0; font-size: 0.8125rem; line-height: 1.45; color: var(--navy-800); }
.faq-alinti figcaption { margin-top: var(--s-3); font-size: 0.71875rem; color: var(--muted); }
.faq-alinti figcaption b { color: var(--navy-900); }
.faq-alinti .stars { display: block; font-size: 0.75rem; margin-top: 0.1875rem; }
.faq-arac { margin-top: var(--s-6); }

/* SSS kategori cipleri mockup'ta dolu ve kontrastli */
.faq-tabs .chip.is-active { background: var(--navy-800); color: #fff; border-color: var(--navy-800); }

.abd-foto { position: relative; }
.abd-foto > img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: var(--r-lg); display: block; }
.abd-alinti {
  position: absolute; right: var(--s-4); bottom: var(--s-4); left: 22%; margin: 0;
  background: rgba(255, 255, 255, .96); border-radius: var(--r-md);
  padding: var(--s-4); box-shadow: var(--shadow-md);
}
.abd-alinti blockquote { margin: 0.375rem 0 0; font-size: 0.8125rem; line-height: 1.45; color: var(--navy-800); }
.abd-alinti figcaption { margin-top: var(--s-3); font-size: 0.71875rem; color: var(--muted); }
.abd-alinti .stars { display: block; font-size: 0.75rem; margin-top: 0.1875rem; }

.abd-video {
  position: relative; display: block; width: 100%; padding: 0; border: 0; background: none;
  border-radius: var(--r-lg); overflow: hidden; margin-top: var(--s-4); text-align: left;
}
.abd-video > img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: block; }
.abd-video::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(4, 18, 40, .12) 0%, rgba(4, 18, 40, .86) 72%);
}
.abd-video .play { position: absolute; inset: 0 0 44% 0; display: grid; place-items: center; z-index: 2; }
.abd-video .play i {
  width: 3.625rem; height: 3.625rem; border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .18); border: 2px solid #fff; display: grid; place-items: center;
}
.abd-video .play i::after {
  content: ""; border-left: 0.9375rem solid #fff; border-top: 0.5625rem solid transparent;
  border-bottom: 0.5625rem solid transparent; margin-left: 0.25rem;
}
.abd-video__metin {
  position: absolute; left: var(--s-5); right: 4.875rem; bottom: var(--s-5); z-index: 2;
  font-size: 0.78125rem; color: #D7E4F5; line-height: 1.4;
}
.abd-video__metin b {
  display: block; font-family: var(--font-head); font-size: 1rem; font-weight: 800;
  letter-spacing: .04em; text-transform: uppercase; color: #fff; margin-bottom: 0.25rem;
}
.abd-video__ok {
  position: absolute; right: var(--s-5); bottom: var(--s-5); z-index: 2;
  width: 2.5rem; height: 2.5rem; border-radius: var(--r-pill); background: #fff;
  display: grid; place-items: center; color: var(--navy-800);
}
.abd-video__ok svg { width: 1.125rem; height: 1.125rem; }

@media (max-width: 1100px) {
  .faq-ust { grid-template-columns: minmax(0, 1fr); }
  .faq-alinti, .abd-alinti { position: static; width: auto; left: auto; margin-top: var(--s-3); }
  .abd-foto > img { aspect-ratio: 16 / 10; }
}


/* mockup 36: kartlar fotografla ust hizada baslar (ortalaninca 326px bosluk kaldi) */

/* ABD video karti: TUM gercek kapaklarda gomulu baslik var (olculdu — 47 kapak),
   mockup'taki gibi ustune yazi basinca metin metne biniyor. Baslik kapagin
   ALTINA, lacivert serit icine alindi. */
.abd-video::after { content: none; }
.abd-video .play { inset: 0; }
.abd-video__metin {
  position: static; display: block; background: var(--navy-800);
  padding: var(--s-4) 4.375rem var(--s-4) var(--s-5); color: #C2D4EA;
}
.abd-video__ok { bottom: var(--s-4); right: var(--s-4); }


/* ============================================================
   HAMZA ISARETI 12.09.2026 — iki olculmus kusur
   ============================================================ */

/* A) Baslik alti ikon satiri kart izgarasina BITISIKTI (olculdu: bosluk 0)
      ve #packages'ta "MOST POPULAR" rozeti uzerine biniyordu. Satirlar
      artik .sec-head icinde; asagisi kacak kalanlar icin emniyet kuralidir. */
.sec-head .mini-facts { margin-top: var(--s-4); justify-content: center; }
.container > .mini-facts { margin-bottom: 2.5rem; }

/* B) Portre fotografi OLMAYAN gercek kisiler: dev duz kare yerine kisa kunye
      seridi. (Adi gecen kisi icin yuz uretilmez; canli sitede de fotograf yok.) */
.kisi__kunye {
  position: relative; display: flex; align-items: center; gap: var(--s-4);
  padding: var(--s-5); min-height: 8.25rem;
  background: linear-gradient(135deg, var(--navy-800) 0%, var(--navy-600) 55%, var(--navy-900) 100%);
  overflow: hidden;
}
.kisi__kunye::after {
  content: ""; position: absolute; right: -1.875rem; top: -2.5rem; width: 9.375rem; height: 9.375rem;
  border-radius: var(--r-pill); border: 1px solid rgba(227, 190, 132, .30);
}
.kisi__kunye--mavi { background: linear-gradient(135deg, #0A3A72 0%, var(--navy-600) 55%, #051D3C 100%); }
.kisi__mono {
  width: 3.875rem; height: 3.875rem; border-radius: var(--r-pill); flex: none;
  border: 1.5px solid var(--gold-400); color: var(--gold-400);
  display: grid; place-items: center; font-family: var(--font-head);
  font-size: 1.3125rem; font-weight: 800; letter-spacing: .04em;
}
.kisi__imza {
  font-family: var(--font-hand); font-size: 1.6875rem; line-height: 1.1;
  color: #fff; transform: rotate(-3deg); position: relative; z-index: 1;
}
.kisi__yetkin { display: grid; gap: 0.4375rem; margin-top: var(--s-3); }
.kisi__yetkin li { display: flex; align-items: flex-start; gap: 0.5rem; font-size: 0.78125rem; color: var(--muted); line-height: 1.35; }
.kisi__yetkin svg { width: 0.9375rem; height: 0.9375rem; color: var(--blue-ink); flex: none; margin-top: 1px; }

/* kunye seridi bos alani yutsun: aksi halde govdenin altinda ~230px bosluk
   kaliyordu (fotografli kartlar daha uzun, izgara hepsini esitliyor) */
.kisi__kunye {
  flex: 1; flex-direction: column; justify-content: center;
  align-items: center; text-align: center; gap: var(--s-4);
}
.kisi:has(.kisi__kunye) .kisi__govde { flex: 0 0 auto; }
.kisi:has(.kisi__kunye) .kisi__govde .btn { margin-top: var(--s-4); }
.kisi__mono { width: 5.25rem; height: 5.25rem; font-size: 1.6875rem; }
.kisi__imza { font-size: 1.875rem; transform: rotate(-4deg); }
.kisi__kunye::after { right: -2.875rem; top: 50%; width: 13.125rem; height: 13.125rem; transform: translateY(-50%); }
.kisi__kunye::before {
  content: ""; position: absolute; left: -3.375rem; bottom: -3.375rem; width: 9.375rem; height: 9.375rem;
  border-radius: var(--r-pill); border: 1px solid rgba(227, 190, 132, .18);
}

/* baslik alti olgu satiri 1600px'te 2 satira dusuyordu (olculdu) */
.sec-head .mini-facts { gap: var(--s-2) var(--s-4); font-size: 0.8125rem; }


/* ============================================================
   C) #usa kart kutucuklari — kolonlar 472 / 1124 px idi (olculdu)
   ============================================================ */
.why-card { display: flex; flex-direction: column; }
.why-card p { flex: 1; }
.neden__kutu {
  display: flex; align-items: center; gap: var(--s-3); margin-top: var(--s-4);
  background: var(--bg-2); border-radius: var(--r-md); padding: var(--s-3);
}
.neden__kutu svg { width: 1.25rem; height: 1.25rem; color: var(--navy-700); flex: none; }
.neden__kutu span { font-size: 0.71875rem; color: var(--muted); line-height: 1.35; }
.neden__kutu span b { display: block; font-family: var(--font-head); font-size: 0.78125rem; color: var(--navy-900); }
.why-card { position: relative; }
.neden__balon {
  display: inline-block; margin-top: var(--s-4); background: var(--gold-50);
  border-radius: var(--r-md) var(--r-md) var(--r-md) 0.25rem; padding: 0.625rem var(--s-3);
  font-family: var(--font-head); font-size: 0.78125rem; color: var(--navy-900); max-width: 72%;
}
.neden__balon span { display: block; font-family: var(--font-body); font-weight: 400; font-size: 0.71875rem; color: var(--muted); margin-top: 2px; }
.neden__avatar {
  position: absolute; right: var(--s-4); bottom: var(--s-4); width: 3.875rem; height: 3.875rem;
  border-radius: var(--r-md); object-fit: cover; object-position: center 18%;
}
.neden__yuzler { position: relative; display: flex; gap: 0.375rem; margin-top: var(--s-4); }
.neden__yuzler img { width: 3.375rem; height: 3.375rem; border-radius: var(--r-sm); object-fit: cover; }
.neden__oynat {
  position: absolute; left: 3.75rem; top: 50%; transform: translateY(-50%);
  width: 1.875rem; height: 1.875rem; border-radius: var(--r-pill); background: rgba(7, 27, 61, .78);
  display: grid; place-items: center;
}
.neden__oynat i::after {
  content: ""; display: block; border-left: 0.5625rem solid #fff; border-top: 0.375rem solid transparent;
  border-bottom: 0.375rem solid transparent; margin-left: 2px;
}
.abd-foto > img { aspect-ratio: 4 / 5; }

/* ============================================================
   D) #ebook kitap — duz dikdortgen yerine semali kapak + sayfalar
   ============================================================ */
.magnet__baslik { font-size: clamp(1.875rem, 2.6vw, 2.625rem); }
.magnet__etiket {
  display: block; margin-top: var(--s-4); font-size: 0.71875rem; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: var(--blue-ink); margin-bottom: 0.375rem;
}
.magnet__book { position: relative; display: grid; place-items: center; }
.sayfalar {
  position: absolute; left: 34%; right: -12%; top: 12%; bottom: 14%;
  background: #fff; border-radius: 0.25rem 0.625rem 0.625rem 0.25rem;
  box-shadow: 0 1.125rem 2.625rem rgba(7, 27, 61, .16);
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3);
  padding: var(--s-4) var(--s-4) var(--s-4) var(--s-5);
}
.sayfalar > div { display: grid; align-content: start; gap: 0.375rem; }
.sayfalar b { font-family: var(--font-head); font-size: 0.65625rem; color: var(--navy-900); line-height: 1.25; }
.sayfalar span { display: block; height: 0.3125rem; border-radius: 0.1875rem; background: var(--bg-2); }
.sayfalar span:nth-child(3) { width: 86%; }
.sayfalar span:nth-child(4) { width: 70%; }
.sayfalar span:nth-child(5) { width: 78%; }
.magnet__book .kapak {
  position: relative; z-index: 2; width: 74%; aspect-ratio: 3 / 4.15;
  border-radius: 0.25rem 0.625rem 0.625rem 0.25rem; padding: var(--s-5) var(--s-4);
  background: linear-gradient(158deg, #0B2F5E 0%, #071F41 55%, #04142B 100%);
  box-shadow: 0 1.625rem 3.375rem rgba(4, 18, 40, .38), inset 0.875rem 0 1.25rem -0.875rem rgba(0, 0, 0, .6);
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--s-3);
}
.kapak__marka { font-family: var(--font-head); font-size: 0.5625rem; font-weight: 700; letter-spacing: .22em; color: var(--gold-400); }
.kapak__sema { position: relative; margin: 0; width: 78%; border-radius: var(--r-sm); overflow: hidden; }
.kapak__sema img { width: 100%; aspect-ratio: 5 / 4; object-fit: cover; display: block; opacity: .92; }
.kapak__sema svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.magnet__book .kapak__ad {
  margin-top: auto; font-family: var(--font-head); font-size: clamp(0.8125rem, 1.15vw, 1.0625rem);
  font-weight: 800; color: #fff; line-height: 1.2; letter-spacing: .01em;
}
.magnet__book .cizgi { width: 2.875rem; height: 2px; background: var(--gold-400); border-radius: 2px; }
.kapak__alt { font-size: 0.5625rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-300); }
.magnet__book .rozet {
  position: absolute; right: var(--s-3); bottom: var(--s-3);
  background: var(--gold-400); color: var(--navy-900); border-radius: var(--r-sm);
  font-size: 0.5625rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; padding: 0.25rem 0.5rem;
}
#ebook .serit-olgu { margin-top: var(--s-6); }

@media (max-width: 900px) {
  .sayfalar { display: none; }
  .magnet__book .kapak { width: 62%; }
  .neden__avatar { position: static; margin-top: var(--s-3); }
}

/* kitap: sayfalar kolonu tasiyordu (form kartinin altina giriyordu) ve
   "2026 edition" rozeti alt satirin uzerine biniyordu (olculdu) */
@media (min-width: 1101px) { .magnet { grid-template-columns: minmax(0, 1fr) minmax(0, .95fr) minmax(0, .8fr); } }
.sayfalar { left: 52%; right: -2%; top: 15%; bottom: 17%; z-index: 1; padding: var(--s-4) var(--s-3) var(--s-4) var(--s-5); }
.sayfalar b { font-size: 0.59375rem; }
.magnet__book .kapak { width: 82%; padding-bottom: var(--s-4); }
.magnet__book .rozet {
  position: static; align-self: flex-end; margin-top: var(--s-3);
}
.kapak__alt { margin-bottom: 2px; }

.sayfalar { grid-template-columns: 1fr; left: 56%; right: 0; top: 12%; bottom: 14%; padding-left: var(--s-6); }
.magnet__book .kapak { width: 70%; justify-self: start; margin-right: auto; }
.magnet__book { place-items: center start; }
/* sayfa basligi kapagin altinda kaliyordu: metin kapagin sag kenarindan sonra baslamali */
.sayfalar { padding-left: 34%; }

/* mockup 36: sag kolon = iki kart satiriyla ayni boy. ESNETME DENENDI VE
   CALISMADI (olculdu): `1fr` satirlar gorselin dogal yuksekligini min-content
   olarak aliyor, kolon 176.6875rem'e cikiyordu. Sabit en-boy orani ile cozuldu. */
#usa .grid-neden { align-items: start; }
#usa .abd-foto > img { aspect-ratio: 16 / 9; height: auto; object-position: center 18%; }
#usa .abd-video { margin-top: var(--s-4); }
#usa .abd-video > img { aspect-ratio: 16 / 9; height: auto; }

/* IZGARA COCUGUNUN VARSAYILAN min-width:auto'SU KAYDIRMAYI ENGELLER:
   .table-wrap'ta overflow-x:auto vardi ama tablo yine sayfayi itiyordu
   (olculdu 24.375rem'te belge 26.0625rem). min-width:0 olmadan grid/flex cocugu
   icerigin altina inemez — ayni tuzagin dikey hali #usa'da yasandi. */
.table-wrap { min-width: 0; max-width: 100%; }

/* el yazisi artik akista: mutlak konumdayken alt seride biniyordu (olculdu) */
.sc-yazi-alt { position: static; left: auto; bottom: auto; top: auto;
  display: block; margin-top: var(--s-4); transform: rotate(-4deg); }
/* #videos: ust blok ile serit arasinda bosluk 0'di */
#videos > .container > .stat-strip { margin-top: 2.5rem; }


/* ============================================================
   01.png — HERO (nihai set, 13.09.2026)
   Sag kart AI onizlemesinden REZERVASYON FORMUNA cevrildi.
   ============================================================ */
.eyebrow--hero { color: var(--gold-400); margin-bottom: var(--s-3); }
.eyebrow--hero::before, .eyebrow--hero::after { background: var(--gold-400); }
.eyebrow--hero::after { display: none; }
.hero h1 { color: #fff; }
.hero__lead { color: #D7E4F6; }
.script--hero {
  left: 50%; top: 26%; right: auto; width: 11.875rem; text-align: center;
  color: #BFD6F5; font-size: 1.6875rem; transform: rotate(-6deg); z-index: 3;
}
.btn--ghost-hero { background: rgba(255, 255, 255, .10); color: #fff; border-color: rgba(255, 255, 255, .55); }
.btn--ghost-hero:hover { background: rgba(255, 255, 255, .18); }
.oynat-nokta {
  width: 1.625rem; height: 1.625rem; border-radius: var(--r-pill); border: 1.5px solid #fff;
  display: grid; place-items: center; flex: none;
}
.oynat-nokta i::after {
  content: ""; display: block; border-left: 0.5rem solid #fff; border-top: 0.3125rem solid transparent;
  border-bottom: 0.3125rem solid transparent; margin-left: 2px;
}

.hero-form {
  background: linear-gradient(165deg, #0A3268 0%, #072345 60%, #051A34 100%);
  border: 1px solid rgba(255, 255, 255, .14); border-radius: var(--r-xl);
  box-shadow: 0 1.875rem 4.375rem rgba(3, 14, 33, .45); padding: var(--s-6); color: #fff;
}
.hero-form__ust { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); flex-wrap: wrap; }
.hero-form__etiket { font-size: 0.71875rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: #C6D6EE; }
.hero-form__cip {
  background: rgba(16, 163, 96, .22); color: #7FE3AE; border: 1px solid rgba(127, 227, 174, .35);
  border-radius: var(--r-pill); font-size: 0.6875rem; font-weight: 600; padding: 0.25rem 0.625rem;
}
.hero-form h2 { color: #fff; font-size: clamp(1.5rem, 2vw, 2rem); font-weight: 800; margin-top: var(--s-4); }
.hero-form h2 .accent-gold { color: var(--gold-400); }
.hero-form > p { font-size: 0.875rem; color: #C2D4EA; margin-top: var(--s-3); line-height: 1.5; }
.hero-form__alan { display: grid; gap: var(--s-3); margin-top: var(--s-5); }
.hero-form .alan {
  display: flex; align-items: center; gap: var(--s-3);
  background: #fff; border-radius: var(--r-md); padding: 0 var(--s-4); min-height: 3.25rem;
}
.hero-form .alan > svg { width: 1.125rem; height: 1.125rem; color: var(--navy-600); flex: none; }
.hero-form .alan input {
  flex: 1; min-width: 0; border: 0; background: none; font-family: var(--font-body);
  font-size: 0.9375rem; color: var(--navy-900); padding-block: 0.875rem;
}
.hero-form .alan input:focus { outline: none; }
.hero-form .alan:focus-within { box-shadow: 0 0 0 0.1875rem rgba(27, 106, 247, .45); }
.alan--tel { padding-left: 0; }
.alan__ulke {
  display: flex; align-items: center; gap: 0.375rem; padding: 0 var(--s-3); align-self: stretch;
  border-right: 1px solid var(--line); font-size: 0.875rem; font-weight: 600; color: var(--navy-900);
}
.alan__ulke img { width: 1.125rem; height: 0.75rem; border-radius: 2px; }
.hero-form .onay { display: flex; align-items: flex-start; gap: var(--s-3); font-size: 0.8125rem; color: #C2D4EA; line-height: 1.4; }
.hero-form .onay input { width: 1.0625rem; height: 1.0625rem; flex: none; margin-top: 1px; accent-color: var(--gold-400); }
.hero-form .onay a { color: #fff; text-decoration: underline; }
.hero-form__not { display: flex; align-items: center; justify-content: center; gap: 0.375rem; margin-top: var(--s-4); font-size: 0.78125rem; color: #A9C1DE; }
.hero-form__not svg { color: var(--gold-400); }

/* --- guven seridi + araci aciklamasi --- */
.hero-guven {
  background: #fff; border-radius: var(--r-lg); box-shadow: var(--shadow-md);
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center;
}
.hero-guven__olgu { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.hero-guven__olgu > div {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-4) var(--s-5); border-left: 1px solid var(--line);
}
.hero-guven__olgu > div:first-child { border-left: 0; }
.hero-guven__olgu svg { width: 1.625rem; height: 1.625rem; color: var(--navy-700); flex: none; }
.hero-guven__olgu span { font-size: 0.78125rem; color: var(--muted); line-height: 1.35; }
.hero-guven__olgu span b { display: block; font-family: var(--font-head); font-size: 1.0625rem; color: var(--navy-900); }
.hero-guven__logo {
  display: flex; align-items: center; gap: var(--s-5);
  padding: var(--s-4) var(--s-5); border-left: 1px solid var(--line);
}
.hero-guven__logo img { height: 2.5rem; width: auto; object-fit: contain; }
.hero-guven__logo img[alt^="USHAŞ"] { height: 2.125rem; }
.rozet-metin {
  font-family: var(--font-head); font-size: 0.8125rem; font-weight: 800; letter-spacing: .06em;
  color: #B0121B; border: 1.5px solid #B0121B; border-radius: 0.25rem; padding: 0.3125rem 0.5625rem;
}
.hero-aciklama {
  display: flex; align-items: flex-start; gap: var(--s-3); justify-content: center;
  margin-top: var(--s-4); font-size: 0.78125rem; color: var(--muted); line-height: 1.5;
  max-width: 67.5rem; margin-inline: auto; text-align: center; flex-wrap: wrap;
}
.hero-aciklama > svg { width: 1rem; height: 1rem; color: var(--blue-ink); flex: none; margin-top: 2px; }
.hero-aciklama a { display: inline-flex; align-items: center; gap: 0.3125rem; font-weight: 600; color: var(--navy-800); white-space: nowrap; }
.hero-aciklama a svg { width: 0.8125rem; height: 0.8125rem; }

@media (max-width: 1300px) {
  .hero-guven { grid-template-columns: minmax(0, 1fr); }
  .hero-guven__logo { border-left: 0; border-top: 1px solid var(--line); justify-content: center; }
}
@media (max-width: 1100px) { .script--hero { display: none; } }
@media (max-width: 900px) {
  .hero-guven__olgu { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero-guven__olgu > div:nth-child(odd) { border-left: 0; }
  .hero-guven__olgu > div:nth-child(n+3) { border-top: 1px solid var(--line); }
}
@media (max-width: 700px) {
  .hero-guven__olgu { grid-template-columns: minmax(0, 1fr); }
  .hero-guven__olgu > div { border-left: 0; border-top: 1px solid var(--line); }
  .hero-guven__olgu > div:first-child { border-top: 0; }
  .hero-form { padding: var(--s-5); }
}

/* 01.png — hero zemini KOYU.
   TUZAK (olculdu): `.hero` `isolation:isolate` ile yigin baglami kuruyor, bu
   yuzden `z-index:-1` olan `.hero::after` (Bogaz fotografi) ogenin KENDI
   arka planinin UZERINE basiyor. `.hero{background:...}` ile perde koymak
   bu yuzden ise yaramadi — `background:red` bile gorunmedi. Dogru yer,
   fotografin ustunde duran `::before` katmani: eski acik perde KOYU yapildi. */
.hero { background-color: #04162E; }
.hero::before {
  display: block;
  background:
    linear-gradient(180deg, rgba(4, 22, 46, 0) 52%, rgba(4, 22, 46, .72) 86%, rgba(4, 22, 46, .92) 100%),
    linear-gradient(100deg,
      rgba(5, 24, 50, .95) 0%, rgba(5, 26, 54, .90) 26%,
      rgba(6, 32, 66, .62) 46%, rgba(7, 38, 78, .30) 62%, rgba(6, 30, 62, .55) 100%);
}
.hero__person { filter: drop-shadow(0 1.875rem 3.75rem rgba(0, 0, 0, .45)); left: 54%; }
.hero__lead { color: #CFE0F5; max-width: 38.75rem; }
.script--hero { left: auto; right: 33%; top: 22%; }

/* 01.png — baslikta telefon ile CTA arasinda yesil WhatsApp dairesi */
.header__wa {
  width: 2.875rem; height: 2.875rem; border-radius: var(--r-pill); flex: none;
  background: #25D366; color: #fff; display: grid; place-items: center;
  box-shadow: 0 0.375rem 1.125rem rgba(37, 211, 102, .35);
}
.header__wa svg { width: 1.5rem; height: 1.5rem; }
.header__wa:hover { background: #1EBE5A; }
@media (max-width: 1200px) { .header__wa { display: none; } }

/* LOGO EZILIYORDU (olculdu 13.09.2026: 150px yerine 24px genislik).
   Menuye uc madde eklenince esnek kutu daralmayi markadan aldi; cunku
   `.brand` esnek cocuk olarak kuculebiliyordu. Marka SABIT, daralma
   menuden alinir. */
.brand { flex: 0 0 auto; }
.brand img { height: 2.875rem; width: auto; max-width: none; flex: none; }
.site-header nav { min-width: 0; }
.site-header .main-nav { flex-wrap: nowrap; }
.site-header .main-nav > li > a { white-space: nowrap; }
@media (max-width: 1500px) {
  .site-header .main-nav { gap: var(--s-4); }
  .site-header .main-nav > li > a { font-size: 0.90625rem; }
}
@media (max-width: 1280px) { .brand img { height: 40px; } }

/* 7 menu ogesi + telefon + WhatsApp + CTA 1560px kapsayiciya SIGMIYORDU.
   Olculdu: menu listesi 56.25rem istiyor, 44.125rem yer var -> tasip telefon
   blogunun uzerine biniyordu. Kapsayici her genislikte 97.5rem oldugu icin
   bu bir MEDIA QUERY sorunu degil; kurallar kosulsuz olmali. */
.site-header .container { gap: var(--s-4); }
.site-header .main-nav { gap: var(--s-3); }
.site-header .main-nav > li > a { font-size: 0.875rem; }
.brand img { height: 2.5rem; }
/* dogru sinif .header-phone (.tel diye yazmistim, hicbir sey eslesmedi) */
.header__right { flex: 0 0 auto; }
.header-phone { flex: none; white-space: nowrap; }
/* 1780px kapsayici 1920'de yetiyor; 1600'de menu hala 883px istiyor,
   48.6875rem yer var -> once telefon alt satiri, sonra telefon blogu cikar */
/* kaldirildi 14.09: olcek rem oldugu icin bu kacis kapisi gereksiz */
/* kaldirildi 14.09: olcek rem oldugu icin bu kacis kapisi gereksiz */
/* ESKIDEN: .topbar/.site-header .container { max-width: 1780px } — govde
   97.5rem'ken baslik seridini genisletmek icin konmustu. Sartname govdeyi
   110.25rem icerik genisligine cikarinca bu kural TERSINE calisti: baslik
   govdeden DAR kaldi (139..1781 yerine 78..1842 olmaliydi), menu sikisti ve
   "About" telefon ikonunun ustune bindi. Olculdu 13.09.2026 — kaldirildi,
   baslik artik govdeyle ayni hizada. */
/* mobilde marka SABIT kalinca (flex:0 0 auto) CTA+menu dugmesi disari tasti
   (olculdu 24.375rem: belge 31.0625rem). Dar ekranda marka daralabilir. */
@media (max-width: 760px) {
  .brand { flex: 0 1 auto; min-width: 0; }
  .brand img { height: 2rem; max-width: 9.25rem; object-fit: contain; }
}


/* ============================================================
   02.png — PLANLAMA ARACLARI (nihai set, 13.09.2026)
   ============================================================ */
.plan__yazi-sol { left: 1.5rem; top: 1.875rem; right: auto; width: 12.5rem; text-align: left; font-size: 1.5rem; color: var(--gold-300); }
.arac--krem { background: linear-gradient(150deg, #FDF6EA 0%, #FBF1E0 60%, #F7E9D3 100%); }
.arac--mavi { background: linear-gradient(160deg, #F4F8FE 0%, #E9F1FC 100%); }
.arac--fotolu { position: relative; overflow: hidden; }
.arac__foto {
  position: absolute; right: -12%; bottom: 5.25rem; width: 62%;
  border-radius: var(--r-md); opacity: .95; pointer-events: none;
  mask-image: linear-gradient(90deg, transparent 0%, #000 22%);
}
.arac__onay, .arac__yesil { display: grid; gap: 0.5625rem; }
.arac__onay li, .arac__yesil li {
  display: flex; align-items: center; gap: 0.5625rem;
  font-size: 0.84375rem; font-weight: 600; color: var(--navy-800);
}
.arac__onay svg { width: 1.1875rem; height: 1.1875rem; color: var(--gold-700); flex: none; }
.arac__yesil li {
  background: #fff; border-radius: var(--r-pill); padding: 0.4375rem var(--s-3);
  box-shadow: var(--shadow-sm); width: fit-content; padding-right: var(--s-5);
}
.arac__yesil svg { width: 1.1875rem; height: 1.1875rem; color: var(--green-600); flex: none; }

.fiyat-etiket {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
  background: #fff; border-radius: var(--r-md); padding: var(--s-3) var(--s-4);
  box-shadow: var(--shadow-sm); align-self: flex-start; width: 100%;
}
.fiyat-etiket small { display: block; font-size: 0.6875rem; color: var(--muted); }
.fiyat-etiket b { display: block; font-family: var(--font-head); font-size: 1.375rem; color: var(--navy-900); line-height: 1.1; }
.fiyat-etiket > svg { width: 1.875rem; height: 1.875rem; color: var(--blue-ink); flex: none; }

/* kart 2 — kafa semasi + bolge haplari */
.bolge-sema { position: relative; margin: 0; border-radius: var(--r-md); overflow: hidden; }
.bolge-sema img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.bolge-sema > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.bolge-hap {
  position: absolute; background: #fff; border-radius: var(--r-pill);
  font-size: 0.71875rem; font-weight: 600; color: var(--navy-800);
  padding: 0.3125rem 0.6875rem; box-shadow: var(--shadow-sm); white-space: nowrap;
}
.bolge-hap--sol-ust { left: 4%; top: 34%; }
.bolge-hap--sag-ust { right: 4%; top: 34%; color: var(--blue-ink); }
.bolge-hap--sol-alt { left: 4%; bottom: 12%; }
.bolge-hap--sag-alt { right: 4%; bottom: 12%; color: var(--blue-ink); }

/* kart 4 — gizlilik cipi + telefon maketi + sac tipi */
.gizli-cip {
  display: flex; align-items: center; gap: 0.4375rem; margin-left: auto;
  background: #EFEBFF; border-radius: var(--r-md); padding: 0.375rem var(--s-3);
}
.gizli-cip svg { width: 1.0625rem; height: 1.0625rem; color: #6D4AE0; flex: none; }
.gizli-cip span { font-size: 0.65625rem; font-weight: 600; color: #4A32A8; line-height: 1.25; }
.analiz-kutu { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1fr); gap: var(--s-3); align-items: stretch; }
.telefon { margin: 0; border-radius: var(--r-md); overflow: hidden; background: var(--navy-900); }
.telefon img { width: 100%; height: 100%; min-height: 7.5rem; object-fit: cover; display: block; }
.yukle-kutu--dikey {
  flex-direction: column; text-align: center; justify-content: center; gap: var(--s-2);
  border-style: solid; border-color: var(--blue-100);
}
.yukle-kutu--dikey .yukle-kutu__ikon { background: #fff; color: var(--blue-ink); box-shadow: var(--shadow-sm); }
.sac-secim { display: grid; gap: 0.5rem; }
.sac-secim__etiket { font-size: 0.75rem; font-weight: 600; color: var(--navy-800); }
.sac-tipi label:has(input:checked) { border-color: #6D4AE0; background: #F3EFFF; }
.sac-tipi label:has(input:checked) span { color: #4A32A8; }

/* alt araci bandi */
.araci-bant {
  margin-top: var(--s-6); display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--s-5); align-items: center;
  background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .16);
  border-radius: var(--r-lg); padding: var(--s-5) var(--s-6);
}
.araci-bant__ikon { width: 2.875rem; height: 2.875rem; display: grid; place-items: center; color: var(--gold-400); }
.araci-bant__ikon svg { width: 2.125rem; height: 2.125rem; }
.araci-bant b { display: block; font-family: var(--font-head); font-size: 1.0625rem; color: #fff; }
.araci-bant p { margin-top: 0.375rem; font-size: 0.78125rem; line-height: 1.55; color: #BDD0E8; }
.araci-bant__link {
  display: inline-flex; align-items: center; gap: 0.5rem; white-space: nowrap;
  font-family: var(--font-head); font-size: 0.875rem; font-weight: 700; color: #fff;
  border-left: 1px solid rgba(255, 255, 255, .18); padding-left: var(--s-5);
}
.araci-bant__link svg { width: 0.9375rem; height: 0.9375rem; }

@media (max-width: 1360px) { .plan__yazi-sol { display: none; } }
@media (max-width: 900px) {
  .araci-bant { grid-template-columns: minmax(0, 1fr); }
  .araci-bant__link { border-left: 0; padding-left: 0; }
  /* HAMZA 16.09.2026: "isaretledigim yeri iconla birlikte kaldir".
     Izgara tek kolona dusunce ikon KENDI BASINA tam genislikte bos bir
     satir oluyor (olculdu 390px: 310x46 kutu, icinde 34px'lik simge) --
     masaustundeki "dar sol kolon" kompozisyonu mobilde anlamsizlasiyor.
     Simge tamamen dekoratif; kaldirilinca metin basliktan basliyor. */
  .araci-bant__ikon { display: none; }
  .arac__foto { display: none; }
}

/* kart 4: tasarimda telefon ekraninda DORT saclideri karesi var */
.telefon { background: #0A1B33; padding: 0.4375rem; display: flex; }
.telefon__ekran {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0.1875rem;
  border-radius: 0.5rem; overflow: hidden; width: 100%;
}
.telefon__ekran img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block; }
/* kart 3 fotografi dugmeye kadar inmesin */
.arac__foto { bottom: 6.5rem; width: 56%; }


/* ============================================================
   04.png — TAYA TRAVEL ORTAK BANDI (nihai set, 13.09.2026)
   Logo resmi siteden indirildi: tayatravel.co.uk
   ============================================================ */
.taya {
  margin-top: var(--s-7); border-radius: var(--r-lg); padding: var(--s-5) var(--s-6);
  background: linear-gradient(100deg, #062A57 0%, #0A3A72 55%, #062446 100%); color: #fff;
  display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(0, 1.5fr) auto;
  gap: var(--s-5); align-items: center;
}
.taya__logo {
  height: 2.5rem; width: auto; background: #fff; border-radius: var(--r-sm);
  padding: 0.4375rem var(--s-3); object-fit: contain;
}
.taya__metin { font-size: 0.8125rem; line-height: 1.5; color: #C2D4EA; }
.taya__metin b { color: #fff; }
.taya__olgu { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-4); }
.taya__olgu span {
  display: grid; justify-items: center; gap: 0.3125rem; text-align: center;
  font-size: 0.65625rem; color: #A9C1DE; line-height: 1.3;
}
.taya__olgu svg { width: 1.3125rem; height: 1.3125rem; color: var(--gold-400); }
.taya__olgu b { font-family: var(--font-head); font-size: 0.71875rem; color: #fff; line-height: 1.25; }
.taya__link {
  display: inline-flex; align-items: center; gap: 0.5rem; white-space: nowrap;
  font-family: var(--font-head); font-size: 0.84375rem; font-weight: 700; color: #fff;
  border-left: 1px solid rgba(255, 255, 255, .2); padding-left: var(--s-5);
}
.taya__link svg { width: 0.9375rem; height: 0.9375rem; }
.taya__yasal { grid-column: 1 / -1; font-size: 0.71875rem; color: #8FA9CC; border-top: 1px solid rgba(255, 255, 255, .12); padding-top: var(--s-3); }

@media (max-width: 1360px) {
  .taya { grid-template-columns: auto minmax(0, 1fr); }
  .taya__olgu { grid-column: 1 / -1; }
  .taya__link { grid-column: 1 / -1; border-left: 0; padding-left: 0; }
}
@media (max-width: 700px) {
  .taya { grid-template-columns: minmax(0, 1fr); padding: var(--s-5); }
  .taya__olgu { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* 03.png — sol guven kolonu kaldirilinca 4 kolonluk izgaranin ILK kolonu
   (13.125rem) kartin ustune kaldi ve kart 13.125rem'e sikisti (olculdu).
   Tasarim 03'te duzen: iki kart + sag yardim paneli = 3 kolon. */
.planner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, .66fr); }
@media (max-width: 1100px) { .planner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
@media (max-width: 900px) { .planner { grid-template-columns: minmax(0, 1fr); } }


/* ============================================================
   05.png — BEFORE & AFTER, BY HAIR TYPE (nihai set, 13.09.2026)
   ============================================================ */
.sonuc-filtre { margin-bottom: var(--s-6); justify-content: center; }
.sonuc-filtre .chip { padding: 0.6875rem var(--s-5); font-size: 0.90625rem; }
.sonuc-filtre .chip.is-active { background: var(--navy-800); color: #fff; border-color: var(--navy-800); }

.sonuc-sarmal { position: relative; }
.kaydir {
  position: absolute; top: 34%; z-index: 3; width: 2.875rem; height: 2.875rem;
  border-radius: var(--r-pill); background: #fff; border: 1px solid var(--line);
  box-shadow: var(--shadow-md); display: grid; place-items: center; color: var(--navy-800);
}
.kaydir svg { width: 1.25rem; height: 1.25rem; }
.kaydir--sol { left: -1.4375rem; transform: rotate(90deg); }
.kaydir--sag { right: -1.4375rem; transform: rotate(-90deg); }
.kaydir:hover { border-color: var(--navy-600); }
@media (max-width: 1700px) { .kaydir--sol { left: -14px; } .kaydir--sag { right: -14px; } }
@media (max-width: 900px) { .kaydir { display: none; } }

/* tasarimda guven seridi ikonlari YUVARLAK cerceve icinde */
.serit-olgu--yuvarlak > div { padding-block: var(--s-5); }
.serit-olgu--yuvarlak svg {
  width: 2.75rem; height: 2.75rem; padding: 0.6875rem; border-radius: var(--r-pill);
  background: #fff; color: var(--navy-800); box-shadow: inset 0 0 0 1px var(--line);
}

.uyari-kutu {
  display: flex; align-items: flex-start; gap: var(--s-3);
  margin-top: var(--s-5); padding: var(--s-4) var(--s-5);
  background: var(--blue-50); border: 1px solid var(--blue-100); border-radius: var(--r-md);
  font-size: 0.78125rem; line-height: 1.55; color: var(--muted);
}
.uyari-kutu > svg { width: 1.125rem; height: 1.125rem; color: var(--blue-ink); flex: none; margin-top: 2px; }
.uyari-kutu b { color: var(--navy-900); }

.result-cta__yazi { position: static; display: block; padding-right: var(--s-6); font-size: 1.4375rem; text-align: center; transform: rotate(-6deg); }
.result-cta__yazi .firca { width: 7.75rem; margin-inline: auto; }


/* ============================================================
   06.png — AFRO UZMANLIGI (nihai set, 13.09.2026)
   ============================================================ */
.afro { overflow: clip; }
.vurgu-cizik { position: relative; }
.vurgu-cizik::after {
  content: ""; position: absolute; left: 2%; right: 2%; bottom: -.14em; height: .13em;
  border-radius: 0.1875rem; background: linear-gradient(90deg, var(--gold-400), var(--gold-200));
}
.afro-duzen {
  position: relative; display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, .58fr) minmax(0, 1.25fr);
  gap: var(--s-5); align-items: start;
}
.afro-buyuk { position: relative; margin: 0; border-radius: var(--r-lg); overflow: hidden; }
.afro-buyuk > img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.afro-etiket {
  position: absolute; top: var(--s-4); z-index: 2;
  background: var(--navy-800); color: #fff; border-radius: var(--r-sm);
  font-size: 0.71875rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 0.4375rem 0.75rem;
}
.afro-etiket--sol { left: var(--s-4); }
.afro-etiket--sag { left: 52%; }
.afro-buyuk__alt {
  position: absolute; right: var(--s-5); bottom: var(--s-4); z-index: 2;
  font-family: var(--font-head); font-size: 1.0625rem; font-weight: 700; color: #fff;
  text-shadow: 0 2px 0.625rem rgba(0, 0, 0, .55);
}
.afro-buyuk__alt i { color: rgba(255, 255, 255, .55); font-style: normal; margin-inline: 0.375rem; }
.afro-alinti {
  position: absolute; left: 0; bottom: 0; z-index: 3; margin: 0; width: 62%;
  background: rgba(255, 255, 255, .97); border-radius: 0 var(--r-md) 0 var(--r-lg);
  padding: var(--s-4) var(--s-5);
}
.afro-alinti p { margin-top: 0.375rem; font-size: 0.8125rem; line-height: 1.45; color: var(--navy-800); }
.afro-alinti footer { margin-top: var(--s-3); font-size: 0.71875rem; color: var(--muted); display: flex; align-items: center; gap: 0.5rem; }
.afro-alinti .stars { font-size: 0.75rem; }

.afro-yakin { display: grid; gap: var(--s-4); }
.afro-yakin figure { position: relative; margin: 0; border-radius: var(--r-md); overflow: hidden; }
.afro-yakin img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block; }
.afro-yakin figcaption {
  position: absolute; left: var(--s-3); bottom: var(--s-3);
  background: rgba(7, 27, 61, .82); color: #fff; border-radius: var(--r-sm);
  font-size: 0.65625rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; padding: 0.3125rem 0.5625rem;
}

.afro-metin { padding-right: 6rem; }
.afro-metin .h3 { font-size: 1.625rem; }
.afro-metin > p { margin-top: var(--s-3); font-size: 0.90625rem; line-height: 1.6; color: var(--muted); }
.afro-ozellik { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); margin-block: var(--s-5); }
.afro-ozellik > span { display: flex; align-items: center; gap: var(--s-3); }
.afro-ozellik b { font-family: var(--font-head); font-size: 0.90625rem; color: var(--navy-900); line-height: 1.3; }
.afro-portre {
  position: absolute; right: -10%; bottom: -6%; width: 26%; z-index: 0;
  border-radius: var(--r-lg); opacity: .95;
  mask-image: linear-gradient(90deg, transparent 0%, #000 26%);
}

@media (max-width: 1360px) {
  .afro-duzen { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .afro-metin { grid-column: 1 / -1; padding-right: 0; }
  .afro-portre { display: none; }
}
@media (max-width: 800px) {
  .afro-duzen { grid-template-columns: minmax(0, 1fr); }
  .afro-yakin { grid-template-columns: 1fr 1fr; }
  .afro-alinti { position: static; width: auto; border-radius: 0; }
  .afro-ozellik { grid-template-columns: minmax(0, 1fr); }
}
/* alt yazi fotograf uzerinde yalniz golgeyle duruyordu -> acik karede
   okunmaz (olculdu 1.15). Tasarimdaki gibi alta koyu perde serildi. */
.afro-buyuk::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 38%;
  background: linear-gradient(180deg, rgba(4, 18, 40, 0) 0%, rgba(4, 18, 40, .78) 100%);
  pointer-events: none; z-index: 1;
}
.afro-buyuk__alt { text-shadow: none; }
@media (max-width: 800px) {
  /* dar ekranda alinti akisa gecince alt yazi onun uzerine biniyordu (olculdu) */
  .afro-buyuk__alt { position: static; display: block; margin-top: var(--s-3); color: var(--navy-900); text-align: right; }
  .afro-buyuk__alt i { color: var(--line-2); }
  .afro-buyuk::after { display: none; }
  .afro-buyuk { overflow: visible; }
  .afro-buyuk > img { border-radius: var(--r-lg); }
}
/* portre metin kolonunun uzerine biniyordu (olculdu) — daralt ve metne yer ac */
.afro-metin { padding-right: 8.25rem; position: relative; z-index: 2; }
.afro-portre { right: -3%; width: 19%; bottom: -4%; }


/* ============================================================
   08.png — ORTAK HASTANELER (nihai set, 13.09.2026)
   Logolar ve bina fotograflari resmi sitelerden.
   ============================================================ */
.hosp { position: relative; display: flex; flex-direction: column; }
.hosp__bina { width: 100%; aspect-ratio: 9 / 5; object-fit: cover; display: block; }
.hosp > .badge { position: absolute; right: var(--s-4); top: var(--s-4); z-index: 2; }
.hosp__logo { height: 1.625rem; width: auto; object-fit: contain; object-position: left center; display: block; }
.hosp__body { padding: var(--s-5); display: flex; flex-direction: column; gap: var(--s-3); flex: 1; }
.hosp__body .h3 { font-size: 1.1875rem; }
.hosp__alt { font-size: 0.84375rem; color: var(--muted); margin-top: -0.375rem; }
.hosp__body ul { display: grid; gap: 0.5625rem; }
.hosp__body li { display: flex; align-items: flex-start; gap: 0.5625rem; font-size: 0.84375rem; color: var(--navy-800); line-height: 1.4; }
.hosp__body li svg { width: 1rem; height: 1rem; color: var(--blue-ink); flex: none; margin-top: 2px; }
.hosp__body .btn { margin-top: auto; }

/* baslik alti olgu satiri: tasarimda ikonlar yuvarlak cerceveli */
.mini-facts--yuvarlak svg {
  width: 2.125rem; height: 2.125rem; padding: 0.5rem; border-radius: var(--r-pill);
  background: #fff; color: var(--navy-800); box-shadow: inset 0 0 0 1px var(--line);
}
.mini-facts--yuvarlak { gap: var(--s-2) var(--s-6); }

.kim-ne {
  margin-top: var(--s-6); border-radius: var(--r-lg); overflow: hidden;
  background: #fff; box-shadow: var(--shadow-sm);
  display: grid; grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr); align-items: stretch;
}
.kim-ne__sol {
  display: flex; align-items: center; gap: var(--s-4); padding: var(--s-5) var(--s-6);
  background: linear-gradient(100deg, #062A57 0%, #0A3A72 100%); color: #fff;
  clip-path: polygon(0 0, 100% 0, calc(100% - 2.625rem) 100%, 0 100%);
  padding-right: calc(var(--s-6) + 2.625rem);
}
.kim-ne__ikon { width: 3.25rem; height: 3.25rem; border-radius: var(--r-md); background: rgba(255, 255, 255, .12); display: grid; place-items: center; flex: none; }
.kim-ne__ikon svg { width: 1.5625rem; height: 1.5625rem; color: var(--gold-400); }
.kim-ne__sol b { display: block; font-family: var(--font-head); font-size: 1.125rem; }
.kim-ne__sol p { margin-top: 0.375rem; font-size: 0.8125rem; line-height: 1.5; color: #C2D4EA; }
.kim-ne__link {
  display: flex; align-items: center; gap: var(--s-3); padding: var(--s-5) var(--s-6);
  font-family: var(--font-head); font-size: 0.90625rem; font-weight: 700; color: var(--navy-900);
}
.kim-ne__ok { width: 1.125rem; height: 1.125rem; margin-left: auto; transform: rotate(-90deg); color: var(--navy-700); }

@media (max-width: 900px) {
  .kim-ne { grid-template-columns: minmax(0, 1fr); }
  .kim-ne__sol { clip-path: none; padding-right: var(--s-5); }
}
/* logo yuksekligi verildi ama genislik kalitim yoluyla %100 kaliyordu ->
   marka kirpilip iki ucundan kesiliyordu (olculdu) */
.hosp__logo { width: auto; max-width: 60%; height: 1.625rem; }
/* MARKA LOGOSU: asla cover/fill ile kirpilmaz, orani korunur.
   (denetim kurali: assets/img/rozet/** + object-fit) */
.hosp__logo,
.taya__logo,
.hero-guven__logo img,
img[src*="/rozet/"] { object-fit: contain !important; width: auto; max-width: 100%; }
.taya__logo { height: 2.5rem; }


/* ============================================================
   07.png — EKIP (nihai set, 13.09.2026)
   Rol etiketi tasarimda FOTOGRAFIN USTUNDE hap seklinde.
   ============================================================ */
.ekip__yazi-sol { left: 1.5rem; top: 6rem; right: auto; width: 12.5rem; font-size: 1.4375rem; text-align: left; }
.ekip__yazi-sag { right: 1.5rem; top: 2.125rem; width: 14.375rem; font-size: 1.625rem; text-align: right; }
.kisi__foto { position: relative; }
.kisi__rozet {
  position: absolute; left: var(--s-4); top: var(--s-4); z-index: 3;
  background: var(--navy-800); color: #fff; border-radius: var(--r-pill);
  font-size: 0.71875rem; font-weight: 600; padding: 0.375rem 0.8125rem; white-space: nowrap;
}
.kisi__rozet--altin { background: linear-gradient(180deg, var(--gold-300), var(--gold-400)); color: var(--navy-900); }
.kisi__kunye .kisi__rozet { left: var(--s-4); top: var(--s-4); }
.kisi__govde h3 { margin-top: 0; }
.ekip__bant { align-items: center; }
.ekip__yuzler img { width: 3.375rem; height: 3.375rem; margin-left: -0.875rem; object-fit: cover; object-position: center 18%; }
.ekip__yuzler img:first-child { margin-left: 0; }
@media (max-width: 1360px) { .ekip__yazi-sol { display: none; } }
/* 07: dort kartin gorsel alani AYNI yukseklikte olmali (tasarimda oyle).
   Monogram paneli `flex:1` ile buyuyup fotograflardan uzun kaliyordu. */
.ekip .kisi__kunye { flex: none; aspect-ratio: 4 / 5; }
.ekip .kisi__foto img { aspect-ratio: 4 / 5; }
.ekip .kisi:has(.kisi__kunye) .kisi__govde { flex: 1; }
.ekip .mini-facts { gap: var(--s-2) var(--s-5); font-size: 0.78125rem; }
.ekip .mini-facts { gap: var(--s-2) var(--s-4); font-size: 0.75rem; }
.ekip .mini-facts svg { width: 0.875rem; height: 0.875rem; }
/* 07: kart tipografisi tasarimda daha iri */
.ekip .kisi__govde h3 { font-size: 1.25rem; }
.ekip .kisi__rol { font-size: 0.90625rem; }
.ekip .kisi__govde p:not(.kisi__rol) { font-size: 0.90625rem; line-height: 1.55; }
.ekip .kisi__govde { padding: var(--s-5) var(--s-5) var(--s-6); gap: 0.25rem; }


/* ============================================================
   11.png — YORUMLAR (nihai set, 13.09.2026)
   Platform logolari resmi kaynaklardan (google/trustpilot/realself/whatclinic).
   ============================================================ */
.yorumlar { position: relative; }
.yorum-duzen { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: var(--s-8); align-items: start; }
.yorum-sol .h2 { font-size: clamp(2.125rem, 3.2vw, 3.25rem); }
.yorum-sol .lead { max-width: 46ch; }
.yorum-yazi { right: 46%; top: 7.5rem; width: 11.875rem; text-align: center; font-size: 1.375rem; }

.puan-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-3); margin-top: var(--s-6); }
.puan-kart { background: #fff; border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--s-4); box-shadow: var(--shadow-sm); }
.puan-kart__ust { display: flex; align-items: center; gap: 0.5625rem; }
.puan-kart__ust img { height: 1.625rem; width: auto; object-fit: contain; flex: none; }
.puan-kart__ust span { font-size: 0.71875rem; color: var(--muted); line-height: 1.2; }
.puan-kart__ust b { display: block; font-family: var(--font-head); font-size: 0.8125rem; color: var(--navy-900); }
.puan-kart__puan { display: flex; align-items: center; gap: 0.5rem; margin-top: var(--s-3); }
.puan-kart__puan b { font-family: var(--font-head); font-size: 1.6875rem; font-weight: 800; color: var(--navy-900); }
.puan-kart__puan .stars { font-size: 0.75rem; }
.puan-kart__alt { display: block; margin-top: 0.25rem; font-size: 0.6875rem; color: var(--muted-2); }
.yorum-olgu { margin-top: var(--s-5); }

.yorum-sag { display: grid; gap: var(--s-4); }
.yorum-kart {
  display: grid; grid-template-columns: minmax(0, 15.625rem) minmax(0, 1fr); gap: var(--s-4);
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-md);
  box-shadow: var(--shadow-sm); overflow: hidden; align-items: stretch;
}
.yorum-kart__video { position: relative; display: block; width: 100%; padding: 0; border: 0; background: none; }
.yorum-kart__video img { width: 100%; height: 100%; min-height: 9.375rem; object-fit: cover; display: block; }
.yorum-kart__video .play { position: absolute; inset: 0; display: grid; place-items: center; }
.yorum-kart__video .play i {
  width: 2.875rem; height: 2.875rem; border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .22); border: 2px solid #fff; display: grid; place-items: center;
}
.yorum-kart__video .play i::after {
  content: ""; border-left: 0.8125rem solid #fff; border-top: 0.5rem solid transparent;
  border-bottom: 0.5rem solid transparent; margin-left: 0.25rem;
}
.yorum-kart__once, .yorum-kart__sonra, .yorum-kart__sure {
  position: absolute; bottom: 0.5rem; background: rgba(7, 27, 61, .82); color: #fff;
  font-size: 0.625rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  padding: 0.25rem 0.5rem; border-radius: 0.25rem;
}
.yorum-kart__once { left: 0.5rem; }
.yorum-kart__sonra { left: 52%; }
.yorum-kart__sure { right: 0.5rem; text-transform: none; letter-spacing: 0; }
.yorum-kart__govde { position: relative; padding: var(--s-4) var(--s-5) var(--s-4) 0; display: grid; align-content: center; gap: 0.5rem; }
.yorum-kart__govde q { font-size: 0.875rem; line-height: 1.5; color: var(--navy-800); }
.yorum-kart__govde footer { display: flex; align-items: center; gap: 0.5rem; font-size: 0.78125rem; color: var(--muted); }
.yorum-kart__govde footer b { font-family: var(--font-head); color: var(--navy-900); }
.yorum-kart__govde footer img { width: 1.0625rem; height: 0.75rem; border-radius: 2px; }
.yorum-kart__tirnak { position: absolute; right: var(--s-4); top: var(--s-4); width: 1.625rem; height: 1.625rem; color: var(--blue-100); }
.yorum-alt { display: flex; align-items: center; gap: var(--s-4); flex-wrap: wrap; }
.yorum-alt > span { font-size: 0.78125rem; color: var(--muted); }

.wa-bant {
  margin-top: var(--s-7); border-radius: var(--r-lg); overflow: hidden;
  background: linear-gradient(100deg, #05213F 0%, #0A3A72 55%, #062446 100%); color: #fff;
  display: grid; grid-template-columns: minmax(0, 15.625rem) minmax(0, 1fr) minmax(0, 20.625rem);
  gap: var(--s-5); align-items: center;
}
.wa-bant__telefon { width: 100%; height: 100%; min-height: 11.25rem; object-fit: cover; display: block; }
.wa-bant__metin { padding-block: var(--s-5); }
.wa-bant__etiket { font-size: 0.71875rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: #A9C1DE; }
.wa-bant__metin > b { display: block; margin-top: 0.5rem; font-family: var(--font-head); font-size: clamp(1.3125rem, 1.9vw, 1.875rem); font-weight: 800; line-height: 1.2; }
.wa-bant__olgu { display: flex; gap: var(--s-6); margin-top: var(--s-4); flex-wrap: wrap; }
.wa-bant__olgu > span { display: flex; align-items: center; gap: 0.5625rem; }
.wa-bant__olgu svg { width: 1.375rem; height: 1.375rem; color: var(--gold-400); flex: none; }
.wa-bant__olgu b { display: block; font-family: var(--font-head); font-size: 0.8125rem; color: #fff; }
.wa-bant__olgu span span { font-size: 0.71875rem; color: #BDD0E8; }
.wa-bant__eylem { display: grid; gap: 0.625rem; justify-items: center; padding: var(--s-5) var(--s-6) var(--s-5) 0; }
.wa-bant__eylem .btn { width: 100%; }
.wa-bant__not { display: flex; align-items: center; gap: 0.4375rem; font-size: 0.71875rem; color: #BDD0E8; }
.wa-bant__not svg { width: 0.8125rem; height: 0.8125rem; }
.wa-bant__not i { color: rgba(255, 255, 255, .3); font-style: normal; }

@media (max-width: 1360px) {
  .yorum-duzen { grid-template-columns: minmax(0, 1fr); }
  .yorum-yazi { display: none; }
  .puan-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .wa-bant { grid-template-columns: minmax(0, 1fr); }
  .wa-bant__telefon { min-height: 0; aspect-ratio: 16 / 9; }
  .wa-bant__metin, .wa-bant__eylem { padding-inline: var(--s-5); }
  .yorum-kart { grid-template-columns: minmax(0, 1fr); }
  .yorum-kart__govde { padding: var(--s-4) var(--s-5); }
}
/* el yazisi baslikla cakisiyordu (olculdu) — tasarimdaki gibi basligin
   SAGINA, harita alanina alindi */
.yorum-yazi { right: 42%; top: 2.125rem; }
@media (max-width: 1500px) { .yorum-yazi { display: none; } }
@media (max-width: 480px) {
  /* 390px'te platform karti 2px tasiyordu (olculdu) */
  .puan-grid { grid-template-columns: minmax(0, 1fr); }
  .puan-kart__ust { min-width: 0; }
  .puan-kart__ust span { min-width: 0; }
}
/* 11: Trustpilot kelime-markasi yanindaki metnin uzerine tasiyordu;
   kartta zaten platform adi yaziyor -> logo genisligi sinirlandi */
.puan-kart__ust img { max-width: 4.875rem; }
.puan-kart__ust { gap: 0.625rem; }
/* olgu seridi 3 satira kiriliyordu */
.yorum-olgu > div { padding: var(--s-4) var(--s-3); }
.yorum-olgu span { font-size: 0.71875rem; }
.yorum-olgu span b { font-size: 0.84375rem; }
.yorum-olgu svg { width: 2.25rem; height: 2.25rem; padding: 0.5625rem; }
/* el yazisi ilk yorum kartina degiyordu */
.yorum-yazi { right: 46%; top: 0.625rem; }


/* ============================================================
   20.png — AFRO GREFT HESAPLAYICI (nihai set, 13.09.2026)
   ============================================================ */
.hesap {
  position: relative; color: #fff; overflow: clip;
  background: linear-gradient(120deg, #05182F 0%, #0A2B54 48%, #04142A 100%);
}
.hesap .h2, .hesap b { color: #fff; }
.hesap .lead { color: #C2D4EA; }
.accent-mavi { color: #2F7DFF; }
.hesap-duzen {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .85fr) minmax(0, 1.25fr);
  gap: var(--s-6); align-items: start;
}
.hesap-ust {
  display: block; margin-bottom: var(--s-3);
  font-family: var(--font-head); font-size: 0.78125rem; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase; color: #7F97BA;
}
.hesap-sol .h2 { font-size: clamp(1.875rem, 2.9vw, 2.875rem); }
.hesap-ozellik { display: grid; gap: var(--s-4); margin-top: var(--s-6); }
.hesap-ozellik > div { display: flex; align-items: flex-start; gap: var(--s-3); }
.hesap-ozellik b { display: block; font-family: var(--font-head); font-size: 0.9375rem; }
.hesap-ozellik > div > div { font-size: 0.78125rem; color: #BDD0E8; line-height: 1.45; }
.hesap .icon-box--dolu { background: var(--blue-600); color: #fff; box-shadow: none; }

.hesap-alinti {
  display: flex; align-items: center; gap: var(--s-3); margin: var(--s-6) 0 0;
  background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .14);
  border-radius: var(--r-md); padding: var(--s-4);
}
.hesap-alinti img { width: 3.375rem; height: 3.375rem; border-radius: var(--r-pill); object-fit: cover; flex: none; }
.hesap-alinti q { display: block; font-size: 0.8125rem; line-height: 1.45; color: #DCE7F6; }
.hesap-alinti figcaption { margin-top: 0.375rem; font-size: 0.71875rem; color: #A9C1DE; display: flex; align-items: center; gap: 0.5rem; }
.hesap-alinti .stars { font-size: 0.75rem; }
.hesap-yazi { position: static; display: block; margin-top: var(--s-5); font-size: 1.625rem; transform: rotate(-5deg); }

.hesap-sema { position: relative; margin: 0; border-radius: var(--r-lg); overflow: hidden; }
.hesap-sema img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; display: block; opacity: .9; }
.hesap-sema > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.sema-et {
  position: absolute; transform: translate(-50%, -50%); text-align: center;
  font-size: 0.6875rem; font-weight: 600; color: #fff; line-height: 1.25;
  text-shadow: 0 2px 0.5rem rgba(0, 0, 0, .7);
}

.hesap-panel { background: #fff; border-radius: var(--r-lg); padding: var(--s-5); color: var(--navy-900); }
.hesap-adim { display: flex; align-items: flex-start; gap: var(--s-3); margin-bottom: var(--s-4); }
.hesap-adim:not(:first-child) { margin-top: var(--s-5); }
.hesap-no {
  width: 1.875rem; height: 1.875rem; border-radius: var(--r-pill); flex: none;
  background: var(--blue-600); color: #fff; display: grid; place-items: center;
  font-family: var(--font-head); font-size: 0.875rem; font-weight: 800;
}
.hesap-adim b { display: block; font-family: var(--font-head); font-size: 0.96875rem; color: var(--navy-900); }
/* :not(.hesap-no) — rozet de bir <span>; bu kural (0-1-1) yukaridaki
   `.hesap-no` (0-1-0) beyazini eziyordu. Olculdu 16.09.2026: rozet metni
   #5B6B8C / zemin #0068FF = kontrast 1,12:1, yani rakamlar gorunmuyordu. */
.hesap-adim span:not(.hesap-no) { font-size: 0.78125rem; color: var(--muted); }

.bolge-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-3); }
.bolge-kare { display: block; border: 1.5px solid var(--line); border-radius: var(--r-md); overflow: hidden; background: #fff; }
.bolge-kare input { position: absolute; opacity: 0; width: 0; height: 0; }
.bolge-kare img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.bolge-kare__ad { display: flex; align-items: center; gap: 0.5rem; padding: 0.5625rem var(--s-3); }
.bolge-kare__tik {
  width: 1.0625rem; height: 1.0625rem; border-radius: var(--r-pill); border: 1.5px solid var(--line-2);
  flex: none; display: block; position: relative;
}
.bolge-kare__ad span { font-size: 0.65625rem; color: var(--muted); line-height: 1.25; }
.bolge-kare__ad b { display: block; font-family: var(--font-head); font-size: 0.78125rem; color: var(--navy-900); }
.bolge-kare.is-secili { border-color: var(--blue-ink); box-shadow: 0 0 0 2px rgba(10, 82, 208, .15); }
.bolge-kare.is-secili .bolge-kare__tik { background: var(--blue-600); border-color: var(--blue-ink); }
.bolge-kare.is-secili .bolge-kare__tik::after {
  content: ""; position: absolute; left: 0.3125rem; top: 2px; width: 0.25rem; height: 0.5rem;
  border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.bolge-kare:has(input:focus-visible) { outline: 2px solid var(--blue-600); outline-offset: 2px; }

.hesap-olcek { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: var(--s-4); align-items: start; }
.hesap-olcek input[type="range"] { width: 100%; accent-color: var(--blue-ink); }
.hesap-olcek__etiket { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.25rem; margin-top: 0.5rem; }
.hesap-olcek__etiket span { font-size: 0.65625rem; color: var(--muted); text-align: center; }
.hesap-olcek__etiket b { display: block; font-family: var(--font-head); font-size: 0.71875rem; color: var(--navy-900); }
.hesap-sonuc { background: var(--blue-50); border-radius: var(--r-md); padding: var(--s-4); }
.hesap-sonuc__ust { display: flex; align-items: center; gap: 0.375rem; font-size: 0.71875rem; font-weight: 600; color: var(--navy-800); }
.hesap-sonuc__ust svg { width: 0.9375rem; height: 0.9375rem; color: var(--blue-ink); }
.hesap-sonuc b { display: block; font-family: var(--font-head); font-size: clamp(1.375rem, 1.9vw, 1.875rem); font-weight: 800; color: var(--navy-900); line-height: 1.1; margin-top: 0.25rem; }
.hesap-sonuc__birim { font-family: var(--font-head); font-size: 0.875rem; font-weight: 700; color: var(--navy-900); }
.hesap-sonuc p { margin-top: 0.5rem; font-size: 0.65625rem; line-height: 1.4; color: var(--muted); }

.hesap-yukle { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--s-3); }
.hesap-kucuk { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.375rem; }
.hesap-kucuk img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: var(--r-sm); display: block; }
.hesap-dugme { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); margin-top: var(--s-4); }
.btn--wa-cerceve { background: #fff; color: #128C7E; border-color: #B7E4C7; }
.btn--wa-cerceve:hover { border-color: #25D366; }

.hesap-alt {
  margin-top: var(--s-6); padding-top: var(--s-5); border-top: 1px solid rgba(255, 255, 255, .14);
  display: flex; align-items: center; gap: var(--s-6); flex-wrap: wrap;
}
.hesap-alt > span { display: flex; align-items: center; gap: 0.5625rem; font-size: 0.78125rem; color: #BDD0E8; }
.hesap-alt svg { width: 1.3125rem; height: 1.3125rem; color: var(--gold-400); flex: none; }
.hesap-alt > b { margin-left: auto; font-family: var(--font-head); font-size: 0.78125rem; letter-spacing: .2em; text-transform: uppercase; color: #7F97BA; }

@media (max-width: 1400px) {
  .hesap-duzen { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); }
  .hesap-sema { display: none; }
}
@media (max-width: 900px) {
  .hesap-duzen { grid-template-columns: minmax(0, 1fr); }
  .bolge-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hesap-olcek, .hesap-yukle, .hesap-dugme { grid-template-columns: minmax(0, 1fr); }
}
/* olculdu: koyu kartta yildiz 3.29, beyaz zeminde WhatsApp yazisi 4.14 */
.hesap .stars { color: var(--gold-300); }
.btn--wa-cerceve { color: #0B6B5E; }


/* ============================================================
   17.png — ISTANBUL (tanitim + gunluk rota TEK bolumde)
   ============================================================ */
.sehir-ust { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: var(--s-7); align-items: center; }
.sehir-metin .h2 { font-size: clamp(1.875rem, 2.8vw, 2.875rem); }
.sehir-olgu { display: flex; gap: var(--s-5); margin-top: var(--s-6); flex-wrap: wrap; }
.sehir-olgu > span { display: flex; align-items: flex-start; gap: var(--s-3); flex: 1 1 11.875rem; }
.sehir-olgu b { display: block; font-family: var(--font-head); font-size: 0.875rem; color: var(--navy-900); line-height: 1.25; }
.sehir-olgu span span { font-size: 0.75rem; color: var(--muted); line-height: 1.35; }
.sehir-wa { display: flex; align-items: center; gap: var(--s-3); text-align: left; padding-block: 0.625rem; }
.sehir-wa__ikon { width: 2.375rem; height: 2.375rem; border-radius: var(--r-pill); background: #25D366; color: #fff; display: grid; place-items: center; flex: none; }
.sehir-wa__ikon svg { width: 1.25rem; height: 1.25rem; }
.sehir-wa b { display: block; font-size: 0.90625rem; color: var(--navy-900); }
.sehir-wa span span { font-size: 0.71875rem; font-weight: 400; color: var(--muted); }

.sehir-foto { position: relative; margin: 0; border-radius: var(--r-lg); overflow: hidden; }
.sehir-foto > img { width: 100%; aspect-ratio: 16 / 11; object-fit: cover; display: block; }
.sehir-yazi { left: 6%; top: 8%; right: auto; width: 13.75rem; text-align: center; font-size: 1.5rem; color: #fff; }
.sehir-ofis {
  position: absolute; right: var(--s-4); top: var(--s-4); display: flex; align-items: flex-start; gap: 0.5625rem;
  background: rgba(255, 255, 255, .95); border-radius: var(--r-md); padding: 0.625rem var(--s-3); box-shadow: var(--shadow-md);
}
.sehir-ofis svg { width: 1.125rem; height: 1.125rem; color: var(--blue-ink); flex: none; margin-top: 1px; }
.sehir-ofis b { display: block; font-family: var(--font-head); font-size: 0.78125rem; color: var(--navy-900); }
.sehir-ofis span { font-size: 0.78125rem; color: var(--navy-800); }
.sehir-ofis i { display: block; font-style: normal; font-size: 0.65625rem; color: var(--muted); }
.sehir-cip { position: absolute; right: var(--s-4); top: 34%; display: grid; gap: 0.5rem; }
.sehir-cip > span {
  display: flex; align-items: center; gap: 0.5rem; background: rgba(255, 255, 255, .95);
  border-radius: var(--r-md); padding: 0.4375rem var(--s-3); box-shadow: var(--shadow-sm);
}
.sehir-cip svg { width: 1.0625rem; height: 1.0625rem; color: var(--blue-ink); flex: none; }
.sehir-cip b { display: block; font-family: var(--font-head); font-size: 0.71875rem; color: var(--navy-900); }
.sehir-cip span span { font-size: 0.65625rem; color: var(--muted); }

.sehir-rota { margin-top: var(--s-8); }
.sehir-rota__ust { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-4); flex-wrap: wrap; }
.sehir-rota__ust .h2 { font-size: clamp(1.5rem, 2.1vw, 2.125rem); }
.sehir-rota__link { display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--font-head); font-size: 0.84375rem; font-weight: 700; color: var(--blue-ink); }
.sehir-rota__link svg { width: 0.9375rem; height: 0.9375rem; }
.rota-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--s-3); margin-top: var(--s-5); }
.rota-kart { position: relative; display: block; border-radius: var(--r-md); overflow: hidden; background: #fff; box-shadow: var(--shadow-sm); }
.rota-kart img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.rota-kart__saat {
  position: absolute; left: 0.625rem; top: 0.625rem; z-index: 2; display: inline-flex; align-items: center; gap: 0.3125rem;
  background: rgba(255, 255, 255, .95); border-radius: var(--r-pill); padding: 0.25rem 0.625rem;
  font-size: 0.71875rem; font-weight: 700; color: var(--navy-900);
}
.rota-kart__saat svg { width: 0.8125rem; height: 0.8125rem; color: var(--gold-700); }
.rota-kart__govde { position: relative; display: block; padding: var(--s-3) 2.75rem var(--s-4) var(--s-3); font-size: 0.71875rem; color: var(--muted); line-height: 1.35; }
.rota-kart__govde b { display: block; font-family: var(--font-head); font-size: 0.875rem; color: var(--navy-900); margin-bottom: 0.1875rem; }
.rota-kart__ok {
  position: absolute; right: var(--s-3); top: 50%; transform: translateY(-50%);
  width: 1.875rem; height: 1.875rem; border-radius: var(--r-pill); border: 1px solid var(--blue-100);
  display: grid; place-items: center; color: var(--blue-ink);
}
.rota-kart__ok svg { width: 0.9375rem; height: 0.9375rem; }
.rota-kart:hover .rota-kart__ok { background: var(--blue-600); border-color: var(--blue-ink); color: #fff; }

.sehir-detay {
  margin-top: var(--s-5); background: var(--blue-50); border: 1px solid var(--blue-100);
  border-radius: var(--r-md); padding: var(--s-4) var(--s-5);
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--s-4); align-items: center;
}
.sehir-detay b { display: block; font-family: var(--font-head); font-size: 1rem; color: var(--navy-900); }
.sehir-detay p { margin-top: 0.25rem; font-size: 0.8125rem; color: var(--muted); }

@media (max-width: 1200px) {
  .sehir-ust { grid-template-columns: minmax(0, 1fr); }
  .rota-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sehir-yazi { display: none; }
}
@media (max-width: 800px) {
  .rota-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sehir-detay { grid-template-columns: minmax(0, 1fr); }
  .sehir-cip { position: static; margin-top: var(--s-3); grid-template-columns: 1fr 1fr; display: grid; }
  .sehir-ofis { position: static; margin-top: var(--s-3); }
  .sehir-foto { overflow: visible; }
}
/* 17: ofis karti ile cipler ust uste biniyordu (olculdu: 12 cakisma) */
.sehir-ofis { top: var(--s-4); }
.sehir-cip { top: auto; bottom: var(--s-4); }
@media (max-width: 1200px) { .sehir-cip { position: absolute; } }

/* SINIF ADI CAKISMASI (olculdu 13.09.2026): bolume `sehir` sinifi verdim ama
   o ad ZATEN kullaniliyordu — #global haritasindaki yuvarlak sehir
   fotograflari icin `.sehir { position:absolute; width:7.25rem }`. Bolum o
   kurali miras alip 2px genisliğe cokmustu ve hata bambaska yerde aranir.
   Bolum sinifi `sehir-bolum` olarak ayrildi. */
.sehir-bolum { position: relative; }

/* 17: fotograf uzerindeki el yazisi acik altin renkte ve arkasi Bogaz'in
   parlak gogu -> olculen kontrast 1:1. Sol ust kosede perde. Perde ::before
   (ilk cocuk) oldugu icin img'in ustunde ama .script'in altinda boyanir. */
.sehir-foto::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(102deg, rgba(4, 20, 43, .82) 0%, rgba(4, 20, 43, .66) 26%, rgba(4, 20, 43, .22) 50%, rgba(4, 20, 43, 0) 68%);
}
.sehir-yazi { z-index: 2; text-shadow: 0 2px 0.875rem rgba(4, 20, 43, .5); }


/* 01.png: Saglik Bakanligi armasi yalniz YUVARLAK amblem (metinsiz) oldugu icin
   seritte kucucuk bir daire gibi duruyordu. Tasarimdaki kurum adi armanin
   yaninda metin olarak duruyor -> gorsele gommek yerine HTML metni
   (sartname bolum 16.8: "Do not bake text into images when it can be HTML").
   Arma resmi kaynagindan; kurum adi uydurulmus logo degil, yazi. */
.rozet-kurum { display: flex; align-items: center; gap: 0.5625rem; }
.rozet-kurum img { height: 2.5rem; width: auto; flex: none; }
.rozet-kurum > span {
  font-family: var(--font-head); font-size: 0.625rem; font-weight: 800; line-height: 1.25;
  letter-spacing: .04em; text-transform: uppercase; color: var(--navy-900); white-space: nowrap;
}


/* ============================================================
   03.png — PLANLAMA ARACLARI (yeni set, 14.09.2026)
   ============================================================ */
/* Tasarimda perde SOL KENARDA saydam: Istanbul manzarasi gorunur, govdeye
   dogru laciverte kapanir. Onceki kural her yeri esit kapatiyordu ve
   fotograf hic gorunmuyordu. */
#selfcheck.section--foto::before { background-position: 18% 62%; }
#selfcheck.section--foto::after {
  background:
    linear-gradient(96deg, rgba(4,24,52,.06) 0%, rgba(4,24,52,.42) 11%, rgba(5,32,68,.93) 26%, rgba(4,22,48,.97) 60%, rgba(4,20,44,.98) 100%);
}
.plan-ucak {
  position: absolute; left: 2.2%; top: 2.625rem; width: 13.25rem; height: auto;
  z-index: 1; pointer-events: none;
  filter: drop-shadow(0 0.625rem 1.375rem rgba(3, 16, 36, .45));
}
.plan-yazi-sol { left: 2.4%; top: 22rem; right: auto; text-align: left; font-size: 1.5625rem; transform: rotate(-5deg); }
.plan-yazi-sag { right: 1.6%; top: 9.375rem; text-align: right; font-size: 1.625rem; transform: rotate(-4deg); }
/* Tasarimda kart izgarasi SOLDAN ICERIDE basliyor (03.png'de %15,6) — sol serit
   fotograf + el yazisi icin bos. Bizde izgara tam genislikteydi, el yazisi
   kartin ustune BINIYORDU (mutlak konumlu oge, akistaki karttan sonra boyanir). */
#selfcheck .planner { margin-left: 13.875rem; position: relative; z-index: 2; }
/* tasarimdaki altin firca darbesi: iki ucu incelen yay */
.firca {
  display: block; height: 0.375rem; margin-top: 0.5625rem; border-radius: var(--r-pill);
  background: linear-gradient(90deg, transparent 0%, var(--gold-400) 16%, var(--gold-300) 50%, var(--gold-400) 84%, transparent 100%);
  transform: rotate(-2.5deg);
}
.plan-yazi-sol .firca { width: 11.75rem; }
.plan-yazi-sag .firca { width: 11rem; margin-left: auto; }

/* kart 1 kunyesi: rozet satiri ustte, baslik ALT satirda (tasarim 03) */
.arac-kunye { display: grid; gap: var(--s-3); }
.arac-kunye__ust { display: flex; align-items: center; gap: var(--s-3); }
.arac-kunye .h3 { font-size: 1.6875rem; letter-spacing: -0.02em; }

@media (max-width: 1500px) { #selfcheck .planner { margin-left: 150px; } .plan-ucak { width: 150px; top: 30px; } }
@media (max-width: 1200px) { #selfcheck .planner { margin-left: 0; } }
@media (max-width: 1100px) { .plan-ucak { display: none; } }


/* 375-430px'te bakanlik etiketi `white-space: nowrap` yuzunden 115px tasiyordu
   (olculdu 14.09.2026: belge 434 > pencere 430). Dar ekranda sarilsin. */
@media (max-width: 620px) {
  .rozet-kurum > span { white-space: normal; font-size: 0.5625rem; }
  .hero-guven__logo { flex-wrap: wrap; justify-content: center; gap: var(--s-4); }
}


/* ============================================================
   04.png — YOLCULUK (yeni set, 14.09.2026)
   ============================================================ */
#journey { background: linear-gradient(180deg, #EAF3FF 0%, #F6FAFF 42%, #FFFFFF 100%); }
.yol-ucak { position: absolute; left: 1.5%; top: 1.5rem; width: 16.75rem; height: auto; z-index: 1; pointer-events: none; }
.yol-yazi-sol { left: 3.2%; top: 9.875rem; right: auto; text-align: left; font-size: 1.6875rem; color: var(--navy-600); transform: rotate(-6deg); }
.yol-yazi-sol .firca { width: 9.375rem; }
.yol-yazi-sag { right: 1.4%; top: 2.75rem; text-align: right; font-size: 1.875rem; color: var(--navy-700); transform: rotate(-5deg); line-height: 1.22; }
.yol-yazi-sag .firca { width: 11.125rem; margin-left: auto; }
/* Adim numaralari arasindaki cizgi tasarimda BIR SONRAKI numaraya kadar uzuyor;
   bizde numaranin sagindaki kisa bir cikintiydi (olculdu). */
.journey { position: relative; z-index: 2; }
.step { position: relative; }
.step__num { position: relative; z-index: 2; }
/* Cizgi BIR SONRAKI rozete kadar uzar. Olculdu 14.09.2026: rozet 40px,
   adim 17.5625rem, izgara boslugu 1rem -> rozetin sag kenarindan sonrakinin sol
   kenarina 16.0625rem var. .step__num'a gore hesaplayinca yalnizca 4.125rem cikiyordu. */
.step:not(:last-child)::after {
  content: ""; position: absolute; top: 1.1875rem; left: calc(50% + 1.25rem);
  width: calc(100% + var(--s-4) - 2.5rem); height: 2px; background: var(--blue-100);
}
/* Izgara sarildiginda (3 ve 2 sutun) satir SONUNDAKI adimin cizgisi sagdan
   tasiyordu — olculdu 14.09.2026: 64rem'te belge 1136. Sadece 6 sutunlu
   duzende ciz; dar duzende adimlar alt alta zaten okunuyor. */
@media (max-width: 1180px) { .step:not(:last-child)::after { display: none; } }
.step h3 { font-size: 1.1875rem; }

/* Taya bandi: tasarimda sagda gece Istanbul seridi + el yazisi var */
.taya { position: relative; overflow: hidden; }
.taya__metin p { margin: 0; }
.taya__slogan { display: block; margin-top: var(--s-3); font-size: 0.84375rem; color: #A9C3E4; }
/* Serit 27% (476px) oldugunda bandin son IKI ozelligini ortuyordu (olculdu:
   ozellikler 1786'da bitiyor, serit 1366'da basliyordu). Tasarimda serit
   bandin %12'si; ayrica banda ayni genislikte sag bosluk verilir. */
.taya { padding-right: 14.875rem; }
.taya__sehir { position: absolute; right: 0; top: 0; bottom: 0; width: 13.625rem; pointer-events: none; }
.taya__sehir img { width: 100%; height: 100%; object-fit: cover; display: block; }
.taya__sehir::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, var(--navy-700) 0%, rgba(5, 42, 94, .72) 34%, rgba(5, 42, 94, .28) 100%);
}
.taya__yazi { right: 1.125rem; top: 22%; text-align: right; font-size: 1.4375rem; color: #F0E0BE; z-index: 2; }
.taya__yazi .firca { width: 7.375rem; margin-left: auto; }
/* yasal satir + "Learn more" tasarimda bandin DISINDA */
.taya-alt {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-5);
  margin-top: var(--s-4); flex-wrap: wrap;
}
.taya-alt__yasal { display: flex; align-items: center; gap: var(--s-3); font-size: 0.8125rem; color: var(--muted); }
.taya-alt__yasal::before { content: ""; width: 1.75rem; height: 1px; background: var(--gold-400); flex: none; }
.taya-alt__link { display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--font-head); font-size: 0.875rem; font-weight: 700; color: var(--blue-ink); }
.taya-alt__link svg { width: 1rem; height: 1rem; }

@media (max-width: 1400px) { .yol-ucak { width: 190px; } .yol-yazi-sol { top: 128px; font-size: 23px; } }
@media (max-width: 1100px) { .yol-ucak { display: none; } .taya__sehir { display: none; } .taya { padding-right: var(--s-5); } }


/* ============================================================
   05.png — BEFORE & AFTER (yeni set, 14.09.2026)
   ============================================================ */
/* Tasarimda kartlar TEK SIRADA ve iki yanda ok var; bizde 6 kart 3'lu izgarada
   iki sira oluyordu (denetimde YUKSEK bulgu). Izgara -> yatay kaydirma serisi. */
#result-grid {
  display: flex; gap: var(--s-5); overflow-x: auto; scroll-behavior: smooth;
  scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 2px;
}
#result-grid::-webkit-scrollbar { display: none; }
#result-grid > .sonuc {
  flex: 0 0 calc((100% - 2 * var(--s-5)) / 3); scroll-snap-align: start; min-width: 0;
}
.sonuc-sarmal { position: relative; }
.kaydir {
  position: absolute; top: 42%; z-index: 5; width: 2.75rem; height: 2.75rem;
  border-radius: var(--r-pill); background: #fff; box-shadow: var(--shadow-md);
  display: grid; place-items: center; color: var(--navy-800); border: 1px solid var(--line);
}
.kaydir svg { width: 1.25rem; height: 1.25rem; }
.kaydir--sol { left: -1.375rem; transform: rotate(90deg); }
.kaydir--sag { right: -1.375rem; transform: rotate(-90deg); }
.kaydir[disabled] { opacity: .35; cursor: not-allowed; }
.sonuc-yazi {
  right: 1.2%; top: 2.125rem; text-align: right; font-size: 1.8125rem; line-height: 1.2;
  color: var(--navy-700); transform: rotate(-7deg);
}
.sonuc-yazi .firca { width: 12.25rem; margin-left: auto; }
@media (max-width: 1100px) { #result-grid > .sonuc { flex-basis: calc((100% - var(--s-5)) / 2); } }
@media (max-width: 760px) { #result-grid > .sonuc { flex-basis: 86%; } .kaydir { display: none; } }


/* ============================================================
   07.png — EKIP (yeni set, 14.09.2026)
   Olculdu: kart 46.0625rem / fotograf 32.875rem yuksekligindeydi. Tasarimda kart
   genisligine gore fotograf ~20.4375rem (07.png: 21rem genis kartta 16.25rem foto).
   Kartlar bu yuzden tasarimdakinden %50 uzundu.
   ============================================================ */
#team .kisi__foto, #team .kisi__kunye { height: 20.625rem; }
#team .kisi__foto img { height: 100%; object-fit: cover; object-position: center 22%; }
#team .kisi__govde { padding-top: var(--s-5); }
/* Baslik alti olgu satiri tasarimda TEK SIRA, ikonlar buyuk */
#team .sec-head { max-width: 73.75rem; }
#team .mini-facts { max-width: none; flex-wrap: nowrap; gap: var(--s-6); justify-content: center; }
#team .mini-facts > span { white-space: nowrap; font-size: 0.875rem; }
#team .mini-facts svg { width: 1.625rem; height: 1.625rem; }
.ekip__yazi-sag .firca { width: 11.625rem; margin-left: auto; }
@media (max-width: 1280px) {
  #team .mini-facts { flex-wrap: wrap; }
  #team .mini-facts > span { white-space: normal; }
}

/* ============================================================
   09.png — PAKETLER (yeni set, 14.09.2026)
   Kart tepesinde gercek hasta oncesi/sonrasi karesi, "MOST CHOSEN"
   tam genislikte altin serit, alt guven seridi ve yorum bandi.
   ============================================================ */
.pkg { position: relative; display: flex; flex-direction: column; padding: 0; overflow: hidden; }
.pkg__serit {
  display: flex; align-items: center; justify-content: center; gap: 0.5rem;
  background: linear-gradient(180deg, var(--gold-300), var(--gold-400));
  color: var(--navy-900); font-family: var(--font-head); font-size: 0.78125rem; font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase; padding: 0.5625rem;
}
.pkg__serit svg { width: 0.9375rem; height: 0.9375rem; }
.pkg__foto { position: relative; }
.pkg__foto img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.pkg__etiket {
  position: absolute; bottom: 0.625rem; z-index: 2; background: var(--navy-900); color: #fff;
  font-size: 0.65625rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  padding: 0.3125rem 0.5625rem; border-radius: 0.3125rem;
}
.pkg__etiket--sol { left: 0.625rem; }
.pkg__etiket--sag { right: 0.625rem; }
.pkg__govde { padding: var(--s-5); display: flex; flex-direction: column; flex: 1; }
.pkg__alt { font-size: 0.84375rem; color: var(--muted); margin-top: 2px; }
.pkg__govde .pkg__price { margin-top: var(--s-3); }
.pkg__govde ul { margin-top: var(--s-4); display: grid; gap: 0.625rem; flex: 1; }
.pkg__govde .btn { margin-top: var(--s-5); }
.pkg--featured .pkg__govde li svg { color: var(--gold-700); }
.paket-guven { margin-top: var(--s-6); }
.paket-yazi {
  right: 1.2%; top: 1.875rem; text-align: right; font-size: 1.625rem; color: var(--navy-700);
  transform: rotate(-6deg); width: 15.625rem;
}
.paket-yazi .firca { width: 11.875rem; margin-left: auto; }
/* TAM GENISLIKTE blok dondurulurse sag ucu yukari kalkar: 1764px genis kutu
   -5deg'de 1764*sin5 = 9.625rem yukseliyor ve bandin ustune biniyordu (olculdu
   14.09.2026: yazi ust 1363, bant alt 1428). Kutu metin genisligine indirildi. */
.paket-yazi-alt {
  position: static; display: block; width: fit-content; margin-left: auto;
  text-align: right; font-size: 1.5rem; margin-top: var(--s-4); transform: rotate(-5deg);
}
.paket-yazi-alt .firca { width: 9.375rem; margin-left: auto; }

.paket-bant {
  margin-top: var(--s-5); background: linear-gradient(100deg, var(--navy-900) 0%, var(--navy-600) 100%);
  border-radius: var(--r-lg); padding: var(--s-5) var(--s-6);
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--s-6); align-items: center;
}
.paket-bant__yuzler { display: flex; }
.paket-bant__yuzler img {
  width: 3.375rem; height: 3.375rem; border-radius: var(--r-pill); object-fit: cover;
  margin-left: -0.875rem; border: 2px solid rgba(255, 255, 255, .75);
}
.paket-bant__yuzler img:first-child { margin-left: 0; }
.paket-bant__puan { color: #fff; font-size: 0.90625rem; display: flex; align-items: center; gap: 0.625rem; }
.paket-bant__puan b { font-family: var(--font-head); font-size: 1.1875rem; }
.paket-bant .stars { color: var(--gold-300); font-size: 1.0625rem; letter-spacing: 1px; }
.paket-bant q { display: block; margin-top: 0.4375rem; color: #D7E4F6; font-size: 0.875rem; font-style: italic; }
.paket-bant cite { display: block; margin-top: 0.3125rem; color: #A9C3E4; font-size: 0.78125rem; font-style: normal; }
.paket-bant__eylem { display: grid; gap: 0.5625rem; justify-items: center; }
.paket-bant__not { color: #A9C3E4; font-size: 0.78125rem; }
.paket-bant__not i { font-style: normal; opacity: .5; margin-inline: 0.375rem; }
.paket-yasal {
  display: flex; align-items: center; justify-content: center; gap: 0.5625rem;
  margin-top: var(--s-5); font-size: 0.8125rem; color: var(--muted);
}
.paket-yasal svg { width: 1rem; height: 1rem; color: var(--blue-ink); }

@media (max-width: 1080px) {
  .paket-bant { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
  .paket-yazi-alt { text-align: center; }
  .paket-yazi-alt .firca { margin-inline: auto; }
}

/* ============================================================
   10.png — HASTA VIDEOLARI (yeni set, 14.09.2026)
   Kart kunyesi tasarimda FOTOGRAF UZERINDE (bizde altta beyaz alandaydi),
   ulke rozeti solda, sure sagda, ortada YouTube oynat dugmesi.
   ============================================================ */
.video-card { position: relative; }
.video-card .oynat { position: relative; display: block; width: 100%; }
.video-card .oynat > img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; }
.video-card .oynat::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(4,20,44,.42) 0%, rgba(4,20,44,0) 30%, rgba(4,20,44,.34) 58%, rgba(4,20,44,.96) 100%);
}
.video-card__ulke, .video-card__sure {
  position: absolute; top: 0.75rem; z-index: 3; display: inline-flex; align-items: center; gap: 0.4375rem;
  background: rgba(4, 20, 44, .8); color: #fff; border-radius: var(--r-pill);
  font-size: 0.6875rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 0.375rem 0.75rem;
}
.video-card__ulke { left: 0.75rem; }
.video-card__sure { right: 0.75rem; letter-spacing: .04em; }
.video-card__kunye { position: absolute; left: 1rem; right: 1rem; bottom: 0.875rem; z-index: 3; text-align: left; }
.video-card__kunye b { display: block; font-family: var(--font-head); font-size: 1.0625rem; color: #fff; line-height: 1.2; }
.video-card__kunye > span { display: block; margin-top: 0.25rem; font-size: 0.78125rem; color: #CFE0F5; }
/* Tasarimdaki kirmizi YouTube dugmesi. DIKKAT: bicimi SARMALAYICIYA degil
   ICTEKI `i` ogesine ver — `.video-card .play` `inset:0` ile kartin tamamini
   kaplayip icerigi ORTALIYOR; sarmalayiciya width/height verince o kural
   bozuldu ve dugme sol ust koseye dustu (olculdu 14.09.2026). */
.video-card .play--yt { z-index: 3; }
.video-card .play--yt i {
  width: 3.875rem; height: 2.75rem; border-radius: 0.6875rem; background: #FF0000;
  box-shadow: 0 0.5rem 1.375rem rgba(0, 0, 0, .32);
}
.video-yazi { right: 1.2%; top: 1.875rem; text-align: right; font-size: 1.6875rem; color: var(--navy-700); transform: rotate(-6deg); width: 15.625rem; }
.video-yazi .firca { width: 11.125rem; margin-left: auto; }

/* WhatsApp bandi: tasarimda telefon gorseli + 3 ozellik + yuzler + el yazisi */
.wa-bant {
  position: relative;
  margin-top: var(--s-6); border-radius: var(--r-xl); overflow: hidden; position: relative;
  background: linear-gradient(102deg, #06321F 0%, #0A4A2C 52%, #063720 100%);
  display: grid; grid-template-columns: 18.75rem minmax(0, 1fr) auto; gap: var(--s-6);
  align-items: center; padding-right: var(--s-6);
}
.wa-bant__telefon { width: 18.75rem; height: auto; display: block; align-self: end; }
.wa-bant__metin { padding-block: var(--s-6); }
.eyebrow--yesil { color: #9FE6C0; }
.eyebrow--yesil::before, .eyebrow--yesil::after { background: #2E7D52; }
.wa-bant__metin h3 { font-family: var(--font-head); font-size: clamp(1.375rem, 2vw, 1.9375rem); font-weight: 800; color: #fff; line-height: 1.12; }
.wa-bant__metin p { margin-top: var(--s-3); color: #C6E4D4; font-size: 0.9375rem; line-height: 1.5; }
.wa-bant__olgu { display: flex; gap: var(--s-6); margin-top: var(--s-5); flex-wrap: wrap; }
.wa-bant__olgu > span { display: grid; grid-template-columns: auto 1fr; gap: 0.25rem 0.625rem; font-size: 0.75rem; color: #A8CFBB; }
.wa-bant__olgu svg { width: 1.1875rem; height: 1.1875rem; color: #FFD86B; grid-row: span 2; align-self: center; }
.wa-bant__olgu b { font-family: var(--font-head); font-size: 0.84375rem; color: #fff; }
.wa-bant__eylem { display: grid; gap: var(--s-3); justify-items: center; padding-block: var(--s-6); }
.wa-bant__not { font-size: 0.78125rem; color: #A8CFBB; }
.wa-bant__not i { font-style: normal; opacity: .45; margin-inline: 0.4375rem; }
/* Hedef tasarim IMG_3027: basligin ikinci satiri bandin kendi acik tonunda. */
#videos .wa-vurgu  { color: #4FE08B; }
#reviews .wa-vurgu { color: #7FB4FF; }
#help .wa-vurgu    { color: #7FC7FF; }
/* Avatarlarin yanindaki destek yazisi -- masaustunde el yazisi kullanilir,
   mobilde `.script` gizli oldugu icin yerini bu metin alir. */
.wa-bant__destek { display: none; }
.wa-bant__alt { display: flex; align-items: center; gap: var(--s-4); margin-top: var(--s-2); }
.wa-bant__yuzler { display: flex; }
.wa-bant__yuzler img { width: 2.875rem; height: 2.875rem; border-radius: var(--r-pill); object-fit: cover; margin-left: -0.8125rem; border: 2px solid rgba(255,255,255,.8); }
.wa-bant__yuzler img:first-child { margin-left: 0; }
.wa-bant__yazi { position: static; width: fit-content; font-size: 1.3125rem; color: #CFE9DA; text-align: left; transform: rotate(-6deg); }

@media (max-width: 1200px) {
  .wa-bant { grid-template-columns: minmax(0, 1fr); padding: 0 var(--s-5) var(--s-5); }
  .wa-bant__telefon { display: none; }
  .wa-bant__metin { padding-top: var(--s-5); }
  .wa-bant__eylem { justify-items: start; padding-block: 0 var(--s-5); }
}

/* ============================================================
   19.png — TALK TO OUR PATIENT COORDINATOR (yeni set, 14.09.2026)
   Bolum bastan kuruldu: eski hali koyu zeminli, fotografli alan-secme
   sihirbaziydi ve tasarimla ilgisi yoktu (olculen sadakat 22/100).
   ============================================================ */
.koordinator { background: linear-gradient(180deg, #F6FAFF 0%, #EAF3FF 100%); overflow: hidden; }
.koord-duzen { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr); gap: var(--s-8); align-items: start; }
.koord-sol .h2 { margin-top: var(--s-2); }
.koord-lead { max-width: 38.75rem; margin-top: var(--s-3); }

.koord-form {
  margin-top: var(--s-5); background: #fff; border-radius: var(--r-lg);
  box-shadow: var(--shadow-md); padding: var(--s-6);
}
.koord-form__izgara { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); }
.alan {
  position: relative; display: flex; align-items: center; gap: 0.625rem;
  border: 1px solid var(--line); border-radius: var(--r-md); padding: 0 var(--s-4);
  background: #fff; min-height: 3.25rem; transition: border-color .16s ease, box-shadow .16s ease;
}
.alan:focus-within { border-color: var(--blue-600); box-shadow: 0 0 0 0.1875rem rgba(0, 104, 255, .14); }
.alan > svg { width: 1.125rem; height: 1.125rem; color: var(--muted); flex: none; }
.alan input, .alan select, .alan textarea {
  border: 0; outline: 0; background: none; width: 100%; min-width: 0;
  font-family: var(--font-body); font-size: 0.90625rem; color: var(--ink); padding: 0.875rem 0;
}
.alan select { cursor: pointer; }
.alan--metin { align-items: flex-start; margin-top: var(--s-4); padding-block: 0.875rem; }
.alan--metin > svg { margin-top: 0.1875rem; }
.alan textarea { resize: vertical; padding: 0; }
.alan__sayac { position: absolute; right: var(--s-4); bottom: 0.5rem; font-size: 0.71875rem; color: var(--muted-2); }
.koord-gizlilik { display: flex; align-items: center; gap: 0.5625rem; margin-top: var(--s-4); font-size: 0.8125rem; color: var(--muted); }
.koord-gizlilik svg { width: 0.9375rem; height: 0.9375rem; color: var(--navy-700); flex: none; }
.koord-gizlilik b { color: var(--navy-800); font-weight: 600; }
.koord-gonder { margin-top: var(--s-4); min-height: 3.625rem; font-size: 1.03125rem; }
.koord-not { margin-top: var(--s-3); text-align: center; font-size: 0.8125rem; color: var(--muted); }

.koord-sag { position: relative; padding-top: var(--s-4); }
.koord-foto {
  position: absolute; right: -6%; top: 0; width: 46%; height: auto;
  border-radius: var(--r-lg); object-fit: cover; z-index: 0;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 18%, #000 100%);
          mask-image: linear-gradient(90deg, transparent 0%, #000 18%, #000 100%);
}
.koord-yazi { right: 2%; top: 0.5rem; text-align: right; font-size: 1.625rem; color: var(--navy-700); transform: rotate(-6deg); z-index: 2; }
.koord-yazi .firca { width: 9.375rem; margin-left: auto; }

.koord-kanal { position: relative; z-index: 2; display: grid; gap: var(--s-5); max-width: 26.875rem; margin-top: var(--s-7); }
.koord-kanal li { display: flex; gap: var(--s-4); align-items: flex-start; }
.koord-kanal__ikon { width: 3.25rem; height: 3.25rem; border-radius: var(--r-pill); display: grid; place-items: center; flex: none; }
.koord-kanal__ikon svg { width: 1.5rem; height: 1.5rem; }
.koord-kanal__ikon--wa { background: #25D366; color: #fff; }
.koord-kanal__ikon--mavi { background: var(--blue-50); color: var(--blue-ink); }
.koord-kanal__ikon--altin { background: var(--gold-50); color: var(--gold-700); }
.koord-kanal b { display: block; font-family: var(--font-head); font-size: 1.0625rem; color: var(--navy-900); }
.koord-kanal p { margin-top: 0.1875rem; font-size: 0.875rem; color: var(--muted); line-height: 1.45; }
.koord-kanal__link {
  display: inline-flex; align-items: center; gap: 0.4375rem; margin-top: 0.5625rem;
  background: var(--blue-50); color: var(--blue-ink); border-radius: var(--r-md);
  padding: 0.5rem 0.875rem; font-family: var(--font-head); font-size: 0.84375rem; font-weight: 700;
}
.koord-kanal__link svg { width: 0.875rem; height: 0.875rem; }
.koord-kanal__link--wa { background: #E4F8EC; color: #0B7A42; }
.koord-kanal__saat { display: block; margin-top: 0.5rem; font-size: 0.78125rem; color: var(--muted-2); }
.koord-kanal__saat i { font-style: normal; opacity: .5; margin-inline: 0.375rem; }

.koord-rozet {
  position: relative; z-index: 2; display: inline-flex; align-items: center; gap: var(--s-3);
  margin-top: var(--s-6); background: #fff; border-radius: var(--r-md);
  box-shadow: var(--shadow-md); padding: 0.75rem var(--s-5);
}
.koord-rozet__ikon { width: 2.125rem; height: 2.125rem; border-radius: 0.5625rem; background: var(--navy-900); color: var(--gold-300); display: grid; place-items: center; }
.koord-rozet__ikon svg { width: 1.125rem; height: 1.125rem; }
.koord-rozet b { font-family: var(--font-head); font-size: 0.90625rem; color: var(--navy-900); letter-spacing: .04em; text-transform: uppercase; }
.koord-rozet__ayrac { width: 1px; height: 1.375rem; background: var(--line-2); }
.koord-rozet > span:last-child { font-size: 0.84375rem; color: var(--navy-800); }

@media (max-width: 1200px) {
  .koord-duzen { grid-template-columns: minmax(0, 1fr); gap: var(--s-7); }
  .koord-foto { position: static; width: 100%; max-width: 26.25rem; -webkit-mask-image: none; mask-image: none; }
  .koord-kanal { margin-top: var(--s-5); max-width: none; }
}
@media (max-width: 640px) { .koord-form__izgara { grid-template-columns: minmax(0, 1fr); } .koord-form { padding: var(--s-5); } }

/* ============================================================
   12.png — HOW CAN WE HELP YOU TODAY (yeni set, 14.09.2026)
   Kart gorselleri tasarimda 3B cizim; kartin ustunde soluk mavi karo.
   ============================================================ */
.channel__gorsel {
  width: 100%; aspect-ratio: 16 / 9; object-fit: contain; display: block;
  background: linear-gradient(180deg, #EFF6FF 0%, #E6F0FE 100%);
  border-radius: var(--r-md); padding: var(--s-3);
}
.channel--onerilen .channel__gorsel { background: linear-gradient(180deg, #E9FBF1 0%, #DCF6E8 100%); }
.channel h3 { font-size: 1.1875rem; margin-top: var(--s-4); }
.channel p { font-size: 0.875rem; }
.yardim-yazi { right: 1.2%; top: 1.625rem; text-align: right; font-size: 1.625rem; color: var(--navy-700); transform: rotate(-6deg); width: 16.25rem; }
.yardim-yazi .firca { width: 11.625rem; margin-left: auto; }

.yardim-bant {
  margin-top: 2.5rem; border-radius: var(--r-xl); overflow: hidden;
  background: linear-gradient(100deg, #052A5E 0%, #073C7F 55%, #052A5E 100%);
  display: grid; grid-template-columns: 20rem minmax(0, 1fr) auto; gap: var(--s-6);
  align-items: center; padding-right: var(--s-6);
}
.yardim-bant__telefon { width: 20rem; height: auto; display: block; align-self: end; }
.yardim-bant__metin { padding-block: var(--s-6); }
.eyebrow--acik { color: #9FC2EE; }
.eyebrow--acik::before, .eyebrow--acik::after { background: #2F5C96; }
.yardim-bant__metin h3 { font-family: var(--font-head); font-size: clamp(1.375rem, 2vw, 1.875rem); font-weight: 800; color: #fff; line-height: 1.14; }
.yardim-bant__metin p { margin-top: var(--s-3); color: #C2D8F2; font-size: 0.9375rem; line-height: 1.5; }
.yardim-bant__olgu { display: flex; gap: var(--s-6); margin-top: var(--s-5); flex-wrap: wrap; }
.yardim-bant__olgu > span {
  display: flex; align-items: center; gap: 0.625rem; font-size: 0.84375rem; color: #fff;
  padding-right: var(--s-6); border-right: 1px solid rgba(255, 255, 255, .16); line-height: 1.3;
}
.yardim-bant__olgu > span:last-child { border-right: 0; padding-right: 0; }
.yardim-bant__olgu svg { width: 1.25rem; height: 1.25rem; color: var(--gold-300); flex: none; }
.yardim-bant__eylem { display: grid; gap: var(--s-3); justify-items: center; padding-block: var(--s-6); }
.yardim-bant__not { font-size: 0.78125rem; color: #A9C3E4; }
.yardim-bant__not i { font-style: normal; opacity: .45; margin-inline: 0.4375rem; }
.yardim-bant__yazi { position: static; width: fit-content; font-size: 1.3125rem; color: #DCE9F8; text-align: center; transform: rotate(-6deg); margin-top: var(--s-2); }

@media (max-width: 1200px) {
  .yardim-bant { grid-template-columns: minmax(0, 1fr); padding: 0 var(--s-5) var(--s-5); }
  .yardim-bant__telefon { display: none; }
  .yardim-bant__metin { padding-top: var(--s-5); }
  .yardim-bant__eylem { justify-items: start; padding-block: 0 var(--s-5); }
}

/* ============================================================
   16.png — MORE THAN HAIR TRANSPLANT (yeni set, 14.09.2026)
   ============================================================ */
.eko-baslik { font-size: clamp(2rem, 3.4vw, 3.5rem); line-height: 1.04; }
.eko-altbaslik { margin-top: var(--s-3); font-size: clamp(1.125rem, 1.5vw, 1.5625rem); color: var(--muted); font-family: var(--font-head); font-weight: 600; }
.eko-karo { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); margin-top: var(--s-6); }
.eko-karo > div {
  background: var(--blue-50); border: 1px solid var(--blue-100); border-radius: var(--r-lg);
  padding: var(--s-5) var(--s-4); text-align: center;
}
.eko-karo .icon-box { margin-inline: auto; }
.eko-karo b { display: block; margin-top: var(--s-3); font-family: var(--font-head); font-size: 1rem; color: var(--navy-900); line-height: 1.2; }
.eko-karo span:last-child { display: block; margin-top: 0.375rem; font-size: 0.8125rem; color: var(--muted); line-height: 1.4; }
.eko-lead { margin-top: var(--s-5); }
.eko-eylem { display: flex; align-items: center; gap: var(--s-6); margin-top: var(--s-6); flex-wrap: wrap; }
.eko-eylem .btn { min-height: 3.625rem; padding-inline: var(--s-6); font-size: 1rem; }
.eko-izle { display: inline-flex; align-items: center; gap: var(--s-3); font-family: var(--font-head); font-size: 0.9375rem; font-weight: 700; color: var(--navy-900); line-height: 1.2; }
.eko-izle__nokta { width: 2.875rem; height: 2.875rem; border-radius: var(--r-pill); border: 1.5px solid var(--blue-100); display: grid; place-items: center; flex: none; }
.eko-izle__nokta i { width: 0; height: 0; border-left: 0.6875rem solid var(--blue-ink); border-top: 0.4375rem solid transparent; border-bottom: 0.4375rem solid transparent; margin-left: 0.1875rem; }
.eko-olgu { display: flex; gap: var(--s-5); margin-top: var(--s-6); padding-top: var(--s-5); border-top: 1px solid var(--line); flex-wrap: wrap; }
.eko-olgu > div { display: flex; align-items: center; gap: var(--s-3); flex: 1 1 11.25rem; }
.eko-olgu svg { width: 1.625rem; height: 1.625rem; color: var(--navy-700); flex: none; }
.eko-olgu b { display: block; font-family: var(--font-head); font-size: 1.1875rem; color: var(--navy-900); }
.eko-olgu span span { font-size: 0.78125rem; color: var(--muted); }
.eko-yuzler { display: flex; align-items: center; gap: var(--s-4); margin-top: var(--s-5); }
.eko-yuzler__resim { display: flex; }
.eko-yuzler__resim img { width: 2.875rem; height: 2.875rem; border-radius: var(--r-pill); object-fit: cover; margin-left: -0.75rem; border: 2px solid #fff; box-shadow: var(--shadow-sm); }
.eko-yuzler__resim img:first-child { margin-left: 0; }
.eko-yuzler__link { display: inline-flex; align-items: center; gap: var(--s-3); font-size: 0.875rem; color: var(--navy-800); line-height: 1.35; }
.eko-yuzler__link svg { width: 1.0625rem; height: 1.0625rem; color: var(--blue-ink); flex: none; }
.eko-gizlilik { display: flex; align-items: center; gap: 0.5625rem; margin-top: var(--s-4); font-size: 0.78125rem; color: var(--muted); }
.eko-gizlilik svg { width: 0.875rem; height: 0.875rem; flex: none; }
@media (max-width: 820px) { .eko-karo { grid-template-columns: minmax(0, 1fr); } }

/* ============================================================
   21.png — PATIENT GUIDES (yeni set, 14.09.2026)
   Tasarim: solda 3x2 fotografli kart izgarasi, sagda Istanbul paneli.
   Kart numarasi (01-06) fotografa GOMULU gelir — ayrica HTML rozeti EKLEME.
   ============================================================ */
.rehberler { background: linear-gradient(180deg, #FFFFFF 0%, #F1F7FF 100%); overflow: hidden; }
.rehber-duzen { display: grid; grid-template-columns: minmax(0, 1.62fr) minmax(0, 1fr); gap: var(--s-7); align-items: start; }
.rehber-baslik { font-size: clamp(2.125rem, 3.6vw, 3.625rem); margin-top: var(--s-2); }
.rehber-altbaslik { margin-top: var(--s-3); font-family: var(--font-head); font-weight: 800; font-size: clamp(1.1875rem, 1.7vw, 1.6875rem); color: var(--navy-900); line-height: 1.2; }
.rehber-lead { margin-top: var(--s-4); max-width: 40rem; }

.rehber-izgara { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); margin-top: var(--s-6); }
.rehber-kart {
  display: flex; flex-direction: column; background: #fff; border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm); overflow: hidden; transition: box-shadow .18s ease, transform .18s ease;
}
.rehber-kart:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.rehber-kart > img { width: 100%; aspect-ratio: 56 / 25; object-fit: cover; display: block; }
.rehber-kart__govde { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--s-3); align-items: center; padding: var(--s-4); }
.rehber-kart__ikon { width: 2.625rem; height: 2.625rem; border-radius: var(--r-md); background: var(--blue-50); display: grid; place-items: center; }
.rehber-kart__ikon svg { width: 1.25rem; height: 1.25rem; color: var(--blue-ink); }
.rehber-kart__metin b { display: block; font-family: var(--font-head); font-size: 0.90625rem; color: var(--navy-900); line-height: 1.25; }
.rehber-kart__metin > span { display: block; margin-top: 0.25rem; font-size: 0.78125rem; color: var(--muted); line-height: 1.4; }
.rehber-kart__ok { width: 1.875rem; height: 1.875rem; border-radius: var(--r-pill); background: var(--blue-50); display: grid; place-items: center; }
.rehber-kart__ok svg { width: 0.9375rem; height: 0.9375rem; color: var(--blue-ink); }

.rehber-eylem { display: flex; align-items: center; gap: var(--s-4); margin-top: var(--s-6); flex-wrap: wrap; }
.rehber-eylem .btn { min-height: 3.625rem; padding-inline: var(--s-6); font-size: 1rem; }
.rehber-izle, .rehber-panel__izle { display: inline-flex; align-items: center; gap: var(--s-3); background: #fff; border-radius: var(--r-lg); box-shadow: var(--shadow-sm); padding: 0.625rem var(--s-5) 0.625rem 0.625rem; }
.rehber-izle b, .rehber-panel__izle b { display: block; font-family: var(--font-head); font-size: 0.90625rem; color: var(--navy-900); }
.rehber-izle span span, .rehber-panel__izle span span { font-size: 0.78125rem; color: var(--muted); }
.rehber-izle__nokta { width: 2.5rem; height: 2.5rem; border-radius: var(--r-pill); border: 1.5px solid var(--blue-100); display: grid; place-items: center; flex: none; }
.rehber-izle__nokta i { width: 0; height: 0; border-left: 0.625rem solid var(--blue-ink); border-top: 0.375rem solid transparent; border-bottom: 0.375rem solid transparent; margin-left: 0.1875rem; }
.rehber-izle__nokta--dolu { background: var(--navy-900); border-color: var(--navy-900); }
.rehber-izle__nokta--dolu i { border-left-color: #fff; }

.rehber-guven { display: flex; gap: var(--s-5); margin-top: var(--s-6); padding-top: var(--s-5); border-top: 1px solid var(--line); flex-wrap: wrap; }
.rehber-guven > div { display: flex; align-items: center; gap: var(--s-3); flex: 1 1 13.75rem; }
.rehber-guven svg { width: 1.75rem; height: 1.75rem; color: var(--navy-800); flex: none; }
.rehber-guven b { display: block; font-family: var(--font-head); font-size: 0.90625rem; color: var(--navy-900); }
.rehber-guven span span { font-size: 0.78125rem; color: var(--muted); }

.rehber-sag { position: relative; }
/* -8% negatif bosluk pasaporti panelin UZERINE cekiyor ve sag ustteki konum
   rozetini kapatiyordu (olculdu 14.09.2026: 301x1.625rem bindirme). */
.rehber-pasaport { width: 44%; height: auto; display: block; margin: 0 auto var(--s-4) 0; position: relative; z-index: 2; }
.rehber-yazi-pasaport { right: 2%; top: 14%; left: auto; text-align: right; font-size: 1.5rem; color: var(--navy-700); transform: rotate(-7deg); z-index: 3; }
.rehber-yazi-pasaport .firca { width: 7.875rem; margin-left: auto; }
.rehber-panel { position: relative; border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--shadow-lg); }
/* Sag sutun sol sutundan 500px uzundu (olculdu 14.09.2026: 1503 / 1007) ve
   altta buyuk bos alan birakiyordu. Panel yuksekligi sinirlanir. */
.rehber-panel > img { width: 100%; height: auto; max-height: 32.5rem; object-fit: cover; object-position: center top; display: block; }
.rehber-panel__yer {
  /* Panel 520px'e indirilince ust-sag rozet, fotografa GOMULU el yazisinin
     ustune biniyordu (olculdu 14.09.2026). Rozet alt-saga, "Watch Our Story"
     pilinin karsisina alindi. */
  /* Ust-SAG kalir ama DAR: fotografa gomulu el yazisi panelin sol %62'sini
     kapliyor; genis rozet onun ustune biniyordu. Alt-saga alinca bu kez
     "Watch Our Story" pili ile cakisti (olculdu 14.09.2026: 87x3.125rem). */
  position: absolute; right: var(--s-4); top: var(--s-4); display: flex; align-items: flex-start; gap: 0.5625rem;
  background: rgba(255, 255, 255, .95); border-radius: var(--r-md); padding: 0.5625rem var(--s-3); box-shadow: var(--shadow-md); max-width: 36%;
}
.rehber-panel__yer svg { width: 1.1875rem; height: 1.1875rem; color: var(--blue-ink); flex: none; margin-top: 2px; }
.rehber-panel__yer b { display: block; font-family: var(--font-head); font-size: 0.875rem; color: var(--navy-900); }
.rehber-panel__yer span span { font-size: 0.75rem; color: var(--muted); line-height: 1.35; }
.rehber-panel__izle { position: absolute; left: var(--s-4); bottom: var(--s-4); }

@media (max-width: 1200px) {
  .rehber-duzen { grid-template-columns: minmax(0, 1fr); }
  .rehber-izgara { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rehber-pasaport { display: none; }
  .rehber-yazi-pasaport { display: none; }
}
@media (max-width: 700px) { .rehber-izgara { grid-template-columns: minmax(0, 1fr); } }

/* ============================================================
   24.png — HEALTHY HAIR. HAPPIER YOU. (yeni set, 14.09.2026)
   ============================================================ */
.kadinlar {
  background: linear-gradient(104deg, #06255A 0%, #0A3570 46%, #093163 100%);
  overflow: hidden; padding-block: 0;
}
.kadin-duzen { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); gap: var(--s-7); align-items: center; }
.kadin-sol { padding-block: var(--s-9); }
/* Koyu zeminde .accent-gold varsayilani --gold-700 (acik zemin tonu) kalip
   2.61 kontrast veriyordu (olculdu). Koyu zeminde parlak ton kullanilir. */
.kadin-baslik { color: #fff; font-size: clamp(2.125rem, 3.8vw, 3.875rem); line-height: 1.04; margin-top: var(--s-2); }
.kadin-baslik .accent-gold { color: var(--gold-300); }
.kadin-altbaslik { margin-top: var(--s-3); font-family: var(--font-head); font-weight: 600; font-size: clamp(1.0625rem, 1.4vw, 1.4375rem); color: #BFD6F2; }
.kadin-lead { margin-top: var(--s-4); max-width: 38.75rem; color: #C7DAF2; font-size: 0.96875rem; line-height: 1.6; }

.kadin-ozellik { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-5); margin-top: var(--s-6); }
.kadin-ozellik > div { padding-left: var(--s-5); border-left: 1px solid rgba(255, 255, 255, .16); }
.kadin-ozellik > div:first-child { padding-left: 0; border-left: 0; }
.kadin-ozellik__ikon { width: 2.875rem; height: 2.875rem; border-radius: var(--r-pill); background: linear-gradient(180deg, var(--gold-300), var(--gold-400)); display: grid; place-items: center; }
.kadin-ozellik__ikon svg { width: 1.375rem; height: 1.375rem; color: var(--navy-900); }
.kadin-ozellik b { display: block; margin-top: var(--s-3); font-family: var(--font-head); font-size: 1rem; color: #fff; }
.kadin-ozellik span:last-child { display: block; margin-top: 0.375rem; font-size: 0.8125rem; color: #A9C3E4; line-height: 1.45; }

.kadin-sonuc { display: flex; align-items: center; gap: var(--s-5); margin-top: var(--s-6); flex-wrap: wrap; }
.kadin-sonuc__kare { position: relative; margin: 0; border-radius: var(--r-md); overflow: hidden; width: 20.625rem; max-width: 100%; }
.kadin-sonuc__kare img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.kadin-sonuc__kare figcaption { position: absolute; inset: auto 0 0.5rem; display: flex; justify-content: space-between; padding-inline: 0.625rem; }
.kadin-sonuc__kare figcaption span {
  background: rgba(4, 20, 44, .82); color: #fff; font-size: 0.6875rem; font-weight: 700;
  padding: 0.25rem 0.625rem; border-radius: 0.3125rem;
}
.kadin-sonuc__ok {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 2.375rem; height: 2.375rem; border-radius: var(--r-pill);
  border: 1.5px solid rgba(255, 255, 255, .8); background: rgba(4, 20, 44, .42);
  display: grid; place-items: center;
}
.kadin-sonuc__ok svg { width: 1.0625rem; height: 1.0625rem; color: #fff; }
.kadin-sonuc__kunye b { display: block; font-family: var(--font-head); font-size: 1rem; color: #fff; }
.kadin-sonuc__kunye span { font-size: 0.78125rem; color: #A9C3E4; }
.kadin-sonuc__kunye i { font-style: normal; opacity: .5; margin-inline: 0.375rem; }
.kadin-sonuc__daha { display: inline-flex; align-items: center; gap: var(--s-3); font-family: var(--font-head); font-size: 0.875rem; font-weight: 700; color: #fff; line-height: 1.25; }
.kadin-sonuc__ok--dolu { position: static; transform: none; background: rgba(255, 255, 255, .12); }

.kadin-eylem { display: flex; gap: var(--s-4); margin-top: var(--s-6); flex-wrap: wrap; }
.kadin-eylem .btn { min-height: 3.625rem; padding-inline: var(--s-6); font-size: 0.96875rem; }

.kadin-sag { position: relative; align-self: stretch; }
.kadin-foto {
  position: absolute; inset: 0 -30% 0 0; width: calc(100% + 30%); height: 100%;
  object-fit: cover; object-position: center 30%;
}
.kadin-madalyon {
  position: absolute; right: 6%; top: 7%; z-index: 2; width: 8.625rem; height: 8.625rem;
  border-radius: var(--r-pill);
  /* acik altin uzerinde krem yazi 2.19 kontrast veriyordu; ton koyulastirildi */
  background: linear-gradient(150deg, #8A6324 0%, #4E3510 100%);
  color: #FFF3DC; display: grid; place-items: center; text-align: center;
  font-family: var(--font-head); font-size: 0.75rem; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; line-height: 1.5; box-shadow: 0 1rem 2.5rem rgba(4, 20, 44, .4);
}
.kadin-yazi { right: 8%; bottom: 22%; top: auto; text-align: right; font-size: 1.5625rem; color: #FFF1D8; z-index: 2; transform: rotate(-8deg); }
.kadin-yazi .firca { width: 9.875rem; margin-left: auto; }
/* Serit acik fotograf uzerinde soluk kaliyordu; tasarimdaki gibi altta
   koyu perde uzerine oturur (olculdu 14.09.2026). */
.kadin-serit {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  display: flex; justify-content: center; gap: var(--s-6); flex-wrap: wrap;
  padding: var(--s-5) var(--s-4) var(--s-6);
  background: linear-gradient(180deg, rgba(4, 22, 48, 0) 0%, rgba(4, 22, 48, .78) 55%, rgba(4, 22, 48, .92) 100%);
}
.kadin-serit > span { display: inline-flex; align-items: center; gap: 0.5625rem; font-size: 0.8125rem; color: #EDE0C4; }
.kadin-serit svg { width: 1.1875rem; height: 1.1875rem; color: var(--gold-300); }

@media (max-width: 1100px) {
  .kadin-duzen { grid-template-columns: minmax(0, 1fr); }
  .kadin-sag { min-height: 28.75rem; }
  .kadin-foto { inset: 0; width: 100%; }
  .kadin-sol { padding-bottom: var(--s-6); }
}
@media (max-width: 820px) { .kadin-ozellik { grid-template-columns: minmax(0, 1fr); } .kadin-ozellik > div { padding-left: 0; border-left: 0; } }

/* ============================================================
   18.png — FIYAT KIYASI (yeni set, 14.09.2026)
   Tasarimda Turkiye sutunu krem, "You save" sutunu acik mavi tonlu;
   guven seridi tablonun ALTINDA tam genislikte.
   ============================================================ */
.kiyas-baslik { font-size: clamp(1.75rem, 2.7vw, 2.875rem); }
#compare .sec-head--left { max-width: 68.75rem; }
.cmp-table th.kiyas-tr, .cmp-table td.kiyas-tr { background: #FDF6E8; }
.cmp-table th.kiyas-kazanc, .cmp-table td.kiyas-kazanc { background: #EEF6FF; }
.kiyas-bayrak { display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--font-head); font-size: 0.9375rem; color: var(--navy-900); }
.cmp-table th small { display: block; margin-top: 0.1875rem; font-weight: 400; color: var(--muted); font-size: 0.75rem; }
.cmp-table td.save { font-family: var(--font-head); font-size: 1.3125rem; font-weight: 800; color: var(--blue-ink); }
.kiyas-foto { position: relative; overflow: hidden; }
.kiyas-foto img { width: 100%; height: 100%; min-height: 15rem; object-fit: cover; display: block; }
.kiyas-yazi { right: 6%; top: 8%; text-align: right; font-size: 1.375rem; color: var(--navy-800); transform: rotate(-7deg); }
.kiyas-yazi .firca { width: 7.875rem; margin-left: auto; }
.kiyas-guven { margin-top: var(--s-6); }

/* ============================================================
   23.png — WHY AMERICANS CHOOSE (yeni set, 14.09.2026)
   Alti karo tasarimda TEK SIRADA ve sade; bizde 3'lu iki sira + alt kutucuk
   vardi. Sagda ABD fotografi ve uzerinde yorum karti.
   ============================================================ */
.abd-baslik { font-size: clamp(1.875rem, 3.2vw, 3.25rem); line-height: 1.08; margin-top: var(--s-2); }
.abd-yazi { right: 1.2%; top: 2.125rem; text-align: right; font-size: 1.625rem; color: var(--navy-700); transform: rotate(-7deg); width: 15.625rem; }
.abd-yazi .firca { width: 11rem; margin-left: auto; }
/* align-items:center iken uzun fotograf sol sutunu asagi itiyor ve baslikla
   karolar arasinda dev bosluk kaliyordu (olculdu 14.09.2026 tam sayfa). */
.abd-duzen { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: var(--s-7); align-items: start; }
.abd-izgara { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); }
.abd-karo {
  background: #fff; border-radius: var(--r-lg); box-shadow: var(--shadow-sm);
  padding: var(--s-5) var(--s-4); text-align: center;
}
.abd-karo__ikon { width: 3.25rem; height: 3.25rem; border-radius: var(--r-pill); background: var(--gold-50); display: grid; place-items: center; margin-inline: auto; }
.abd-karo__ikon svg { width: 1.5rem; height: 1.5rem; color: var(--gold-700); }
.abd-karo b { display: block; margin-top: var(--s-3); font-family: var(--font-head); font-size: 0.90625rem; color: var(--navy-900); line-height: 1.25; }
.abd-karo > span:last-child { display: block; margin-top: 0.375rem; font-size: 0.78125rem; color: var(--muted); line-height: 1.45; }

.abd-eylem { display: flex; align-items: center; gap: var(--s-6); margin-top: var(--s-6); flex-wrap: wrap; }
.abd-eylem .btn { min-height: 3.75rem; padding-inline: var(--s-6); font-size: 1rem; }
.abd-eylem__kanit { display: flex; align-items: center; gap: var(--s-4); padding-left: var(--s-6); border-left: 1px solid var(--line); }
.abd-eylem__yuzler { display: flex; }
.abd-eylem__yuzler img { width: 3.125rem; height: 3.125rem; border-radius: var(--r-pill); object-fit: cover; margin-left: -0.875rem; border: 2px solid #fff; box-shadow: var(--shadow-sm); }
.abd-eylem__yuzler img:first-child { margin-left: 0; }
.abd-eylem__kanit b { display: block; font-family: var(--font-head); font-size: 0.90625rem; color: var(--navy-900); line-height: 1.25; }
.abd-eylem__kanit .stars { display: block; margin-top: 0.25rem; color: var(--gold-500); font-size: 0.875rem; letter-spacing: 2px; }

.abd-sag { position: relative; align-self: stretch; }
/* Fotograf sol sutundan uzun olunca altta bos alan kaliyordu; tasarimda
   iki sutun ayni yukseklikte bitiyor (olculdu 14.09.2026). */
.abd-sag__foto { width: 100%; height: auto; max-height: 35rem; border-radius: var(--r-lg); display: block; object-fit: cover; object-position: center 22%; }
.abd-alinti {
  position: absolute; right: -4%; bottom: 7%; width: 84%; margin: 0;
  background: #fff; border-radius: var(--r-md); box-shadow: var(--shadow-lg); padding: var(--s-4) var(--s-5);
}
.abd-alinti > svg { width: 1.375rem; height: 1.375rem; color: var(--blue-100); }
.abd-alinti blockquote { margin: 0.25rem 0 0; font-size: 0.90625rem; color: var(--navy-900); line-height: 1.45; }
.abd-alinti figcaption { margin-top: 0.4375rem; font-size: 0.78125rem; color: var(--muted); }
.abd-alinti .stars { display: block; margin-top: 0.1875rem; color: var(--gold-500); font-size: 0.8125rem; letter-spacing: 2px; }

@media (max-width: 1200px) {
  .abd-duzen { grid-template-columns: minmax(0, 1fr); }
  .abd-alinti { position: static; width: 100%; margin-top: var(--s-4); }
}
@media (max-width: 900px) { .abd-izgara { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .abd-izgara { grid-template-columns: minmax(0, 1fr); } .abd-eylem__kanit { padding-left: 0; border-left: 0; } }


/* ekranda gorunmez, ekran okuyucuda okunur (dekoratif yildizlarin metin karsiligi) */
.gorsel-gizli {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ============================================================
   22.png — UCRETSIZ REHBER (yeni set, 14.09.2026)
   Kapak artik CSS cizimi degil, tasarimin kendi kitap kompozisyonu
   (kapak + acik kitap + altin FREE GUIDE madalyonu gorselin icinde).
   ============================================================ */
.kitap-foto { width: 100%; height: auto; display: block; filter: drop-shadow(0 1.375rem 2.75rem rgba(4, 20, 44, .18)); }
.kitap-yazi { right: 2%; top: 0.625rem; text-align: right; font-size: 1.375rem; color: var(--navy-700); transform: rotate(-7deg); width: 13.125rem; }
.kitap-yazi .firca { width: 8.75rem; margin-left: auto; }
.kitap-form { background: #fff; border-radius: var(--r-lg); box-shadow: var(--shadow-md); padding: var(--s-6); align-self: center; }
.kitap-form__ust { display: flex; align-items: center; gap: var(--s-3); font-family: var(--font-body); font-size: 0.75rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--navy-800); }
.kitap-form__baslik { font-family: var(--font-head); font-size: clamp(1.625rem, 2.3vw, 2.375rem); font-weight: 800; color: var(--navy-900); margin-top: var(--s-4); letter-spacing: -0.02em; }
.kitap-form p { margin-top: var(--s-3); font-size: 0.90625rem; color: var(--muted); line-height: 1.5; }
.kitap-form form { margin-top: var(--s-5); display: grid; gap: var(--s-3); }
.kitap-form .btn { min-height: 3.625rem; font-size: 1rem; }
.kitap-form .form-note { margin-top: var(--s-4); }

/* ============================================================
   14.png — BLOG (yeni set, 14.09.2026)
   Tarih/okuma suresi tasarimda FOTOGRAFIN UZERINDE; filtre satirinin
   saginda "View all articles"; alt bant beyaz kart.
   ============================================================ */
.blog-filtre { display: flex; align-items: center; justify-content: space-between; gap: var(--s-5); margin-bottom: var(--s-6); flex-wrap: wrap; }
.blog-filtre .chip-row { margin: 0; justify-content: flex-start; }
.blog-tumu { display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--font-head); font-size: 0.9375rem; font-weight: 700; color: var(--blue-ink); white-space: nowrap; }
.blog-tumu svg { width: 1rem; height: 1rem; }
.post { position: relative; }
/* Etiket tasarimda fotografin ALT KENARINDA ve arkasinda koyu perde var.
   Yalniz text-shadow ile birakinca acik fotograflarda 1:1 kontrast olctu
   (14.09.2026). Perde etiketin KENDI zemini: hem konumu hem okunurlugu
   ayni kural tasiyor; kutu gorselin en-boy oranini tasiyarak alta hizalanir. */
/* Gorsel ve uzerindeki isaretler ARTIK bir sarmal icinde: etiket kutusu
   fotografin tamamini kaplayinca kategori rozetiyle KUTU olarak cakisiyordu
   (olculdu 14.09.2026: 133x1.875rem) — gorunurde binme yoktu ama kutu binmesi
   gercekti. Perde sarmalin ::after'ina, etiket alt kenara tasindi. */
.post__gorsel { position: relative; display: block; }
.post__gorsel > img { display: block; width: 100%; aspect-ratio: 900 / 560; object-fit: cover; }
.post__gorsel::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(4, 20, 44, .26) 0%, rgba(4, 20, 44, 0) 42%, rgba(4, 20, 44, .8) 100%);
}
.post__tarih {
  position: absolute; left: var(--s-4); bottom: 0.75rem; z-index: 2;
  display: inline-flex; align-items: center; gap: 0.4375rem;
  color: #fff; font-size: 0.75rem; font-weight: 600; pointer-events: none;
}
.post__tarih svg { width: 0.875rem; height: 0.875rem; }
.post h3 { font-size: 1.1875rem; line-height: 1.22; }
.blog-alt {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--s-5); align-items: center;
  margin-top: var(--s-6); background: #fff; border-radius: var(--r-lg); box-shadow: var(--shadow-sm);
  padding: var(--s-5) var(--s-6);
}
.blog-alt__ikon { width: 3.625rem; height: 3.625rem; border-radius: var(--r-md); background: var(--blue-50); display: grid; place-items: center; }
.blog-alt__ikon svg { width: 1.625rem; height: 1.625rem; color: var(--blue-ink); }
.blog-alt b { display: block; font-family: var(--font-head); font-size: 1.1875rem; color: var(--navy-900); }
.blog-alt p { margin-top: 0.25rem; font-size: 0.875rem; color: var(--muted); }
.blog-alt .btn { min-height: 3.25rem; padding-inline: var(--s-6); }
.blog-yazi { right: 1.2%; top: 1.625rem; text-align: right; font-size: 1.625rem; color: var(--navy-700); transform: rotate(-6deg); width: 15rem; }
.blog-yazi .firca { width: 11.25rem; margin-left: auto; }
@media (max-width: 760px) { .blog-alt { grid-template-columns: minmax(0, 1fr); text-align: left; } }

/* ============================================================
   25.png — FOOTER (yeni set, 14.09.2026)
   ============================================================ */
.fc-ikon { width: 2.75rem; height: 2.75rem; border-radius: var(--r-pill); display: grid; place-items: center; flex: none; }
.fc-ikon svg { width: 1.3125rem; height: 1.3125rem; color: #fff; }
.fc-ikon--kirmizi { background: #E23C3C; }
.fc-ikon--yesil { background: #25D366; }
.fc-ikon--mavi { background: var(--blue-600); }
.footer-contact a { align-items: center; gap: var(--s-3); }
.partner { display: flex; align-items: center; gap: var(--s-4); }
.partner__logo { width: 3.875rem; height: 3.875rem; border-radius: var(--r-md); background: #fff; display: grid; place-items: center; flex: none; padding: 0.5rem; }
.partner__logo img { width: 100%; height: auto; object-fit: contain; }
.partner__ok { width: 1.125rem; height: 1.125rem; color: #A9C0E0; margin-left: auto; flex: none; }
.footer-dunya {
  display: grid; justify-items: center; gap: var(--s-3); align-content: center;
  padding-left: var(--s-6); border-left: 1px solid rgba(255, 255, 255, .12);
}
.footer-dunya__ikon { width: 1.625rem; height: 1.625rem; color: var(--gold-400); }
.footer-dunya b { font-family: var(--font-head); font-size: 1rem; color: #fff; text-align: center; line-height: 1.3; }
.footer-dunya__yuzler { display: flex; align-items: center; }
.footer-dunya__yuzler img { width: 2.5rem; height: 2.5rem; border-radius: var(--r-pill); object-fit: cover; margin-left: -0.75rem; border: 2px solid #0B2A57; }
.footer-dunya__yuzler img:first-child { margin-left: 0; }
.footer-dunya__yuzler span {
  width: 2.5rem; height: 2.5rem; border-radius: var(--r-pill); margin-left: -0.75rem;
  background: rgba(255, 255, 255, .14); border: 2px solid #0B2A57; color: #fff;
  display: grid; place-items: center; font-size: 0.9375rem; font-weight: 700;
}
.footer-bottom__yasal { display: inline-flex; gap: var(--s-4); flex-wrap: wrap; }
.footer-bottom__yasal a { color: inherit; }
@media (max-width: 900px) { .footer-dunya { padding-left: 0; border-left: 0; margin-top: var(--s-5); } }

/* ============================================================
   13.png — SSS (yeni set, 14.09.2026)
   ============================================================ */
.sss-baslik { font-size: clamp(2.125rem, 3.8vw, 3.875rem); line-height: 1.04; }
.faq-tabs .chip { display: inline-flex; align-items: center; gap: 0.5rem; padding-inline: var(--s-4); min-height: 2.875rem; }
.faq-tabs .chip svg { width: 1.0625rem; height: 1.0625rem; flex: none; }
.faq-ust__yazi .firca { width: 10.5rem; margin-left: auto; }
.sss-wa__ust { display: flex; align-items: center; gap: var(--s-3); font-family: var(--font-body); font-size: 0.75rem; font-weight: 600; letter-spacing: .15em; text-transform: uppercase; color: var(--navy-800); }
.sss-wa__baslik { font-family: var(--font-head); font-size: clamp(1.4375rem, 2vw, 2.0625rem); font-weight: 800; color: var(--navy-900); line-height: 1.12; margin-top: var(--s-4); letter-spacing: -0.02em; }
.sss-wa__baslik span { color: var(--green-600); }
.sss-wa__metin { font-size: 0.90625rem; color: var(--muted); margin-top: var(--s-3); line-height: 1.55; }
.sss-wa__dugme { margin-top: var(--s-5); min-height: 3.625rem; font-size: 1rem; }
.sss-wa__olgu { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-3); margin-top: var(--s-5); text-align: center; }
.sss-wa__olgu > span { display: grid; justify-items: center; gap: 0.25rem; font-size: 0.71875rem; color: var(--muted); line-height: 1.3; }
.sss-wa__olgu svg { width: 1.375rem; height: 1.375rem; color: var(--navy-800); }
.sss-wa__olgu b { font-family: var(--font-head); font-size: 0.8125rem; color: var(--navy-900); }

/* ============================================================
   16.png SAG PANEL (yeni set, 14.09.2026)
   Fotograf tasarimin kendi karesi; ustundeki kartlar HTML — boylece
   sayilar uydurma degil sitenin olculu degerleri olabiliyor.
   ============================================================ */
.eko-panel { position: relative; }
.eko-panel__sahne {
  position: relative; border-radius: var(--r-xl); overflow: hidden;
  background: var(--navy-900); box-shadow: var(--shadow-lg);
}
.eko-panel__foto2 { width: 100%; height: auto; display: block; }
.eko-plan {
  position: absolute; left: 4%; bottom: 6%; width: 46%; z-index: 2;
  background: rgba(6, 26, 58, .88); border: 1px solid rgba(120, 180, 255, .28);
  border-radius: var(--r-md); padding: var(--s-4);
  backdrop-filter: blur(0.25rem);
}
.eko-plan b { display: block; font-family: var(--font-head); font-size: 0.875rem; color: #fff; line-height: 1.25; }
.eko-plan ul { display: grid; gap: 0.4375rem; margin-top: var(--s-3); }
.eko-plan li { display: flex; align-items: center; gap: 0.5rem; font-size: 0.75rem; color: #CFE3FF; }
.eko-plan svg { width: 0.9375rem; height: 0.9375rem; color: #3FD48A; flex: none; }
.eko-sutun {
  position: absolute; right: 3%; top: 5%; width: 33%; z-index: 2; display: grid; gap: var(--s-3);
  background: rgba(6, 26, 58, .86); border: 1px solid rgba(120, 180, 255, .24);
  border-radius: var(--r-md); padding: var(--s-4); backdrop-filter: blur(0.25rem);
  /* dis <span> rengini MIRAS aliyordu (koyu govde rengi) ve koyu kart uzerinde
     1.22 kontrast veriyordu (olculdu 14.09.2026) — renk kartta tanimlanir. */
  color: #A9C3E4;
}
.eko-sutun > div { display: flex; gap: 0.625rem; align-items: flex-start; }
.eko-sutun svg { width: 1.1875rem; height: 1.1875rem; color: #9FC2EE; flex: none; margin-top: 2px; }
.eko-sutun b { display: block; font-family: var(--font-head); font-size: 0.9375rem; color: #fff; line-height: 1.2; }
.eko-sutun span span { font-size: 0.71875rem; color: #A9C3E4; line-height: 1.35; }
.eko-serit {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; gap: var(--s-4);
  margin-top: var(--s-4); background: linear-gradient(100deg, #06285C 0%, #0A3A76 100%);
  border-radius: var(--r-lg); padding: var(--s-4) var(--s-5); align-items: center;
}
.eko-serit > div { display: flex; gap: 0.625rem; align-items: flex-start; padding-right: var(--s-4); border-right: 1px solid rgba(255, 255, 255, .14); color: #A9C3E4; }
.eko-serit > div:nth-child(3) { border-right: 0; }
.eko-serit svg { width: 1.25rem; height: 1.25rem; color: #9FC2EE; flex: none; margin-top: 2px; }
.eko-serit b { display: block; font-family: var(--font-head); font-size: 0.8125rem; color: #fff; line-height: 1.25; }
.eko-serit span span { font-size: 0.71875rem; color: #A9C3E4; line-height: 1.35; }
.eko-serit__dugme {
  display: grid; justify-items: center; gap: 0.1875rem; background: #fff; color: var(--navy-900);
  border-radius: var(--r-md); padding: 0.6875rem var(--s-5); font-family: var(--font-head);
  font-size: 0.875rem; font-weight: 700; white-space: nowrap;
}
.eko-serit__dugme svg { width: 0.9375rem; height: 0.9375rem; color: var(--navy-900); display: inline; }
.eko-serit__dugme span { font-family: var(--font-body); font-size: 0.65625rem; font-weight: 400; color: var(--muted); }
@media (max-width: 1100px) {
  .eko-serit { grid-template-columns: minmax(0, 1fr); }
  .eko-serit > div { border-right: 0; padding-right: 0; }
  .eko-plan, .eko-sutun { position: static; width: auto; margin-top: var(--s-3); }
}

/* ============================================================
   15.png — KURESEL HASTA TOPLULUGU (yeni set, 14.09.2026)
   Alt serit tasarimda kurum LOGOLARI tasiyor.
   ============================================================ */
.kurum-serit {
  display: flex; align-items: center; justify-content: center; gap: var(--s-7);
  margin-top: var(--s-6); background: #fff; border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm); padding: var(--s-5) var(--s-6); flex-wrap: wrap;
}
.kurum-serit > img { height: 2.875rem; width: auto; object-fit: contain; }
.kurum-serit__ayrac { width: 1px; height: 2.625rem; background: var(--line-2); }
.kurum-serit__kurum { display: flex; align-items: center; gap: 0.6875rem; }
.kurum-serit__kurum img { height: 2.875rem; width: auto; object-fit: contain; }
.kurum-serit__kurum span {
  font-family: var(--font-head); font-size: 0.6875rem; font-weight: 800; line-height: 1.3;
  letter-spacing: .05em; text-transform: uppercase; color: var(--navy-900);
}
@media (max-width: 760px) { .kurum-serit { gap: var(--s-5); } .kurum-serit__ayrac { display: none; } }

/* 11.png: bu bolumun bandi LACIVERT (10.png'deki yesil banttan farkli) */
.wa-bant--lacivert { background: linear-gradient(100deg, #052A5E 0%, #0A4088 52%, #052A5E 100%); }
.wa-bant--lacivert .wa-bant__telefon { width: 18.75rem; align-self: center; }
.wa-bant--lacivert .wa-bant__etiket { color: #9FC2EE; }
.wa-bant--lacivert .wa-bant__olgu > span span span { color: #A9C3E4; }
.wa-bant--lacivert .wa-bant__not { color: #A9C3E4; }
/* Tasarimda bant sayfadan DAR; el yazisi bandin SAGINDAKI beyaz bosluktadir.
   Bant tam genislikteyken yazi lacivert uzerinde lacivert kaliyor ve 1:1
   kontrast olculuyordu (14.09.2026) — bant daraltilip yaziya yer acildi. */
.wa-sarmal { position: relative; }
@media (min-width: 1280px) {
  .wa-sarmal .wa-bant--lacivert { margin-right: 10.5rem; }
  .wa-bant__yazi-sag {
    position: absolute; right: 0; top: 26%; width: 9.375rem; text-align: center;
    font-size: 1.3125rem; color: var(--navy-700); transform: rotate(-8deg); z-index: 3;
  }
}
@media (max-width: 1279px) { .wa-bant__yazi-sag { display: none; } }


/* ============================================================
   06.png — AFRO (yeni set, 14.09.2026)
   Tasarimda baslik TEK SATIR ve aciklama IKI satir; 55rem'lik varsayilan
   .sec-head genisligi baslgi iki satira kiriyordu. Portre tasarimda sag
   kenarda TAM BOY, bizde alt kosede kucuk bir karttiv.
   ============================================================ */
.afro .sec-head { max-width: 76.25rem; }
.afro .sec-head .lead { max-width: 63.75rem; margin-inline: auto; }
/* Portre %24 genislikte metin sutununun ozellik karolarini ortuyordu
   (olculdu 14.09.2026, tam sayfa taramasi). Daraltildi ve saga itildi. */
.afro-portre {
  right: -9%; bottom: 0; top: 0; width: 18%; height: 100%;
  object-fit: cover; object-position: center 20%;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 30%);
          mask-image: linear-gradient(90deg, transparent 0%, #000 30%);
}
/* 25.png: lisans satiri UC sutun — rozetler | seyahat ortagi | dunya blogu.
   2 sutunlu izgarada dunya blogu alt satira dusup ortada kaliyordu. */
.footer-lisans {
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) auto;
  gap: var(--s-6); align-items: center; margin-top: var(--s-5);
}
@media (max-width: 1100px) { .footer-lisans { grid-template-columns: minmax(0, 1fr); } }

/* ============================================================================
   14.09.2026 — MOBILDE LOGO MENUYE BINIYORDU (olculdu, 24.375rem)
   ----------------------------------------------------------------------------
   `.brand` kutusu 16->6.875rem, logo GORSELI 16->10.25rem: kutusundan 3.375rem tasip
   "Free consult" dugmesinin (sol kenar 8.875rem) altina giriyordu. Sebep: esnek
   ogede `img` kucultulemiyor (`height:2.625rem; width:auto` sabit oran uretiyor,
   `max-width` yok). Hem ana sayfada hem alt sayfalarda AYNI kusur.
   Cozum: kap daralabilsin, gorsel kabi asmasin.

   !! `height: auto` YAZMA (14.09.2026'da yazdim, olcum yakaladi): taban kuraldaki
   `height:2.625rem`i ezip gorseli DOGAL boyutuna cikariyor (22.0625rem) ve basligi
   tamamen sisiriyor. Yukseklik sabit kalir, GENISLIK sinirlanir; oran
   `object-fit: contain` ile korunur.
   ============================================================================ */
.site-header .brand { min-width: 0; }
.site-header .brand img { max-width: 100%; object-fit: contain; object-position: left center; }
@media (max-width: 1080px) { .site-header .brand img { height: 34px; } }
@media (max-width: 420px)  { .site-header .brand img { height: 28px; } }


/* BASLIK KIRILIM NOKTALARI (olculdu 14.09.2026, 1280px):
   masaustu menu 67.5rem'e kadar aciktı; 1280'de menu 32.375rem'e sikisip
   ogeleri kutusunun DISINA tasiriyor ve "About" ile CTA cakisiyordu.
   Menu once daralir, sonra 1240'ta mobil menuye biner. */
@media (max-width: 1520px) {
  .site-header .main-nav > li > a { font-size: 0.84375rem; }
  .site-header .main-nav { gap: var(--s-2); }
}
@media (max-width: 1400px) {
  .site-header .main-nav > li > a { font-size: 0.8125rem; padding-inline: 0.375rem; }
  .header__wa { display: none; }
}
@media (max-width: 1240px) {
  .main-nav, .header-phone { display: none; }
  .nav-toggle { display: inline-flex; }
  .site-header .header__right { gap: var(--s-2); }
}
/* 23: dar ekranda alinti karti mutlak konumdan cikar (tasma engeli) */
@media (max-width: 1200px) { .abd-sag { display: block; } }

/* ============================================================================
   14.09.2026 — MENU SAG BLOGA BINIYOR: 1401-1560 ARALIGI ACIK KALMIS
   ----------------------------------------------------------------------------
   OLCULDU (15 genislikte tarama): 95.375rem'te 3.6875rem, 90rem'te 5.9375rem binme.
   Hamza'nin ekran goruntusu tam bu araliktaydi ("About" uzerine telefon/CTA).
   Ustteki 87.5rem esigi DOGRU kurali tasiyor, yalnizca esik dusuk kalmis.
   Onun blogu degistirilmedi (paralel oturum orada calisiyor); ayni sikilastirma
   burada 1800'e cikarildi. 1.25rem adimla tarama: binme bandi 1621-1800
   (1701'de 5.6875rem, 1781'de 1.0625rem), 1801'den itibaren temiz.
   ============================================================================ */
@media (max-width: 1800px) {
  .site-header .main-nav > li > a { font-size: 0.8125rem; padding-inline: 0.375rem; }
  .site-header .header__wa { display: none; }
}

/* ============================================================================
   14.09.2026 — ALT BILGI GUVEN SERIDI 4 KOLONDA TASIYOR (olculdu, 57rem)
   ----------------------------------------------------------------------------
   `.footer-trust` 4 esit kolon + `b { white-space: nowrap }`: 57rem'te kolon
   ~12.5rem'e dusuyor, "International support" kirilamiyor ve sayfayi 1.0625rem yatay
   kaydiriyor. Kolon sayisi once 2'ye, dar ekranda 1'e iner.
   ============================================================================ */
@media (max-width: 1000px) { .footer-trust { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px)  { .footer-trust { grid-template-columns: minmax(0, 1fr); } }
/* 1241-1300 bandi: mobil menu esigi (1240) ile sikilastirma arasinda 7px acik
   kaliyordu (olculdu 78.75rem). Son bir tik daraltma bandi kapatir. */
@media (max-width: 1300px) {
  .site-header .main-nav { margin-left: var(--s-5); gap: 0; }
  .site-header .main-nav > li > a { padding-inline: 0.3125rem; }
}

/* ============================================================================
   TASARIM 01.png — BIREBIR (14.09.2026, piksel olcumu)
   Referans genislik 115.9375rem (tasarim dosyasinin kendi genisligi).
   Olculen kutular:  ust bar 0..51 · header 51..142 · hero 142..832
   icerik sol kenar x=73 · sag kenar x=1788 · form karti x1245..1788 y160..679
   kisi x690..1245 y142..687 · istatistik karti y687..776
   Bu blok daha once yazilmis ucu birbirini ezen hero kurallarinin NIHAI halidir.
   ============================================================================ */

/* --- ust bar: 51px, duz lacivert, 15px yazi --- */
.topbar { background: linear-gradient(90deg, #002A63 0%, #003070 100%); color: #C9DCF5; font-size: 0.9375rem; }
.topbar .container { min-height: 3.1875rem; gap: 2.125rem; }
.topbar ul { gap: 2.125rem; }
.topbar li { gap: 0.5625rem; }
.topbar svg { width: 1.0625rem; height: 1.0625rem; color: #F0F5FC; }
.topbar__right { gap: 1.125rem; }
.topbar__right a, .topbar .lang { font-weight: 500; color: #EAF2FD; }
.topbar .lang svg { display: none; }            /* tasarimda kure ikonu yok, yalniz "EN v" */

/* --- header: 91px, fotograf uzerinde mavi gradyan --- */
.site-header {
  background: linear-gradient(90deg, #002962 0%, #044B9A 18%, #1F6BAF 42%, #3277BF 60%, #2A6FBC 78%, #4A8CCB 100%);
}
.site-header .container { min-height: 5.6875rem; gap: 0; }
.brand img { height: 3.5rem; width: auto; }
.main-nav { margin-left: 2.875rem; gap: 2px; }
.main-nav > li > a { font-size: 0.9375rem; font-weight: 500; letter-spacing: 0; padding: 0.75rem 0.8125rem; color: #EDF3FC; }
.main-nav > li > a .caret { width: 0.8125rem; height: 0.8125rem; opacity: .9; margin-left: 1px; }

/* --- hero: olculen geometri --- */
.hero {
  min-height: 43.125rem;
  background-color: #002962;
}
.hero::after {                                   /* Bogaz fotografi */
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: url("../img/hair-transplant-in-istanbul-hero.e5c7b861.webp") center 34% / cover no-repeat;
  opacity: 1;
}
.hero::before {                                  /* soldan lacivert perde + altta aydinlanma */
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(0,41,98,0) 58%, rgba(120,150,180,.34) 80%, rgba(236,244,253,.92) 97%, #F1F7FE 100%),
    linear-gradient(90deg,
      #002962 0%, #002962 9%, rgba(0,44,104,.96) 17%,
      rgba(1,55,124,.74) 27%, rgba(6,70,148,.36) 36%,
      rgba(14,88,170,.12) 45%, rgba(20,100,180,0) 54%);
}
.hero .container {
  grid-template-columns: minmax(0, 1fr) clamp(25rem, 29.3vw, 34rem);
  gap: 3.5rem; align-items: start;
  padding-block: 1.125rem 0;
}
.hero__copy { max-width: none; margin-top: 3.125rem; }

.eyebrow--hero { display: flex; align-items: center; gap: 1.1875rem; font-size: 1.125rem; font-weight: 600;
                 letter-spacing: .13em; color: var(--gold-300); }
.eyebrow--hero::before { content: ""; width: 2.75rem; height: 0.1875rem; background: var(--gold-300); flex: none; }
.hero h1 { font-size: clamp(2.75rem, 4.0vw, 4.625rem); line-height: 1.03; letter-spacing: -0.028em; margin-top: 1.375rem; }
.hero__lead { font-size: 1.1875rem; line-height: 1.53; color: #CFE0F5; max-width: 40rem; margin-top: 1.5rem; }
.hero__cta { margin-top: 1.5rem; gap: 1.4375rem; }
.hero__cta .btn { height: 4.125rem; border-radius: 1rem; font-size: 1.1875rem; padding-inline: 1.875rem; }
.hero__cta .btn--gold { min-width: 21.3125rem; }
.hero__cta .btn--ghost-hero { min-width: 16.3125rem; }

/* --- hero portresi: tasarimdan kesildi, olculen kutuya oturuyor --- */
.hero__person {
  left: 37.2%; width: 29.92%; top: 0; bottom: 9.0625rem; height: auto; transform: none;
  background: url("../img/hair-transplant-patient-hero-portrait.f931a9d5.webp") bottom center / contain no-repeat;
  filter: drop-shadow(0 1.625rem 2.875rem rgba(0, 20, 52, .42));
  z-index: 1;
}

/* --- el yazisi: tasarimda kisinin sagi, koyu mavi + altin cizgi --- */
.script--hero {
  position: absolute; left: 59.6%; top: 6.25rem; z-index: 2;
  font-size: 2.125rem; line-height: 1.06; color: #17357F; text-align: center; transform: none;
}
.script--hero::after {
  content: ""; display: block; width: 5.5rem; height: 1.125rem; margin: 0.5rem auto 0;
  background: radial-gradient(ellipse 60% 120% at 30% 100%, transparent 58%, var(--gold-500) 60%, transparent 74%);
}

/* --- form karti: x1245..1788 (544 genis), y160..679 --- */
.hero-form { padding: 1.5rem 1.375rem 1.75rem; border-radius: 1.375rem; align-self: start; }
.hero-form__etiket { font-size: 0.9375rem; letter-spacing: .14em; }
.hero-form__cip { height: 2.125rem; display: inline-flex; align-items: center; padding-inline: 1.0625rem; font-size: 0.875rem; border-radius: 1.0625rem; }
.hero-form h2 { font-size: 2.25rem; line-height: 1.06; margin-top: 1.25rem; white-space: nowrap; }
.hero-form > p { font-size: 0.9375rem; line-height: 1.53; margin-top: 0.9375rem; }
.hero-form__alan { gap: 0.6875rem; margin-top: 1.1875rem; }
.hero-form .alan { height: 3.1875rem; border-radius: 0.8125rem; }
.hero-form .onay { margin-top: 1.25rem; font-size: 0.875rem; }
.hero-form .btn--block { height: 3.5625rem; border-radius: 0.875rem; font-size: 1.1875rem; margin-top: 1.0625rem; }
.hero-form__not { margin-top: 0.9375rem; font-size: 0.84375rem; }

/* --- istatistik seridi: kart ustu hero'ya biner, aciklama TEK satir akisinda --- */
.hero-stats { margin-top: -9.0625rem; padding-bottom: 3.5rem; }
.hero-guven { border-radius: 1rem; }
.hero-guven__olgu > div { padding: 1.125rem 1.625rem; gap: 1rem; }
.hero-guven__olgu svg { width: 2.125rem; height: 2.125rem; color: var(--navy-800); }
.hero-guven__olgu span { font-size: 0.84375rem; }
.hero-guven__olgu span b { font-size: 1.125rem; }
.hero-guven__logo img { height: 3rem; }
.hero-guven__logo img[alt^="USHAŞ"] { height: 2.5rem; }
.hero-aciklama {
  display: block; text-align: center; margin-top: 0.5625rem;
  font-size: 0.84375rem; line-height: 1.72; color: #5A7093;
}
.hero-aciklama > svg { display: inline-block; vertical-align: -0.1875rem; margin-right: 0.5rem; width: 1.0625rem; height: 1.0625rem; }
.hero-aciklama > span { display: inline; }
.hero-aciklama a { display: inline-flex; vertical-align: -2px; margin-left: 1rem; padding-left: 1.0625rem; border-left: 1px solid #C4D4E8; }

@media (max-width: 1280px) {
  .hero { min-height: 0; }
  .hero .container { padding-block: 1.125rem 2.5rem; }
  .hero__person { bottom: 3.75rem; }
  .hero-stats { margin-top: -3.75rem; }
  .hero-form h2 { white-space: normal; }
}
@media (max-width: 1024px) {
  .hero__person { display: none; }
  .script--hero { display: none; }
  .hero .container { grid-template-columns: minmax(0, 1fr); }
  .hero__copy { margin-top: 0.5rem; }
  .hero-stats { margin-top: 0; }
  .hero-aciklama a { border-left: 0; margin-left: 0; padding-left: 0; display: block; }
}

/* --- 01.png duzeltme turu: olculen sapmalar kapatildi ------------------- */
.brand img { height: 3.875rem; margin-left: -0.5625rem; }     /* tasarimda logo x58 y67, 333x62 */
.main-nav { margin-left: 2.0625rem; }                     /* ilk baslik x437 */

.hero__copy { margin-top: 3.5625rem; }                    /* eyebrow tepe y225 */
.hero h1 { margin-top: 0.625rem; }                       /* 1. satir taban cizgisi y322 */
.hero__lead { margin-top: 1.375rem; line-height: 1.47; } /* satir tabanlari 452/480/508 */
.hero__cta { margin-top: 1.4375rem; }                     /* buton ust kenari y538 */

.hero-form h2 { margin-top: 0.6875rem; }                  /* H2 tepe y236 */
.hero-form > p { margin-top: 0.625rem; }                 /* metin tepe y284 */
.hero-form__alan { margin-top: 1rem; }               /* ilk alan y340 */
.hero-form .alan { height: 3.1875rem; }
.hero-form .onay { margin-top: 1.25rem; }               /* y535 */
.hero-form .btn--block { margin-top: 0.6875rem; }         /* y567..623 */
.hero-form__not { margin-top: 0.9375rem; }                /* y638 */
.hero-form { padding-bottom: 1.25rem; }                 /* kart alt kenari y679 */

/* istatistik seridi: 4. hucre tasarimda TEK satir (345px genis) */
.hero-guven__olgu { grid-template-columns: 292fr 312fr 279fr 349fr; }
.hero-guven__olgu > div { padding: 1.5rem 1.625rem; }
.hero-aciklama { max-width: 71.875rem; }
.site-header .main-nav > li > a { font-size: 0.9375rem; font-weight: 500; padding: 0.75rem 0.8125rem; }
.hero-form .alan { height: 3.1875rem; box-sizing: border-box; }
.hero-form .onay { margin-top: 0.5625rem; }                /* onay satiri y535 */
.hero-form .btn--block { margin-top: 0; }            /* buton y567 */
.hero-form__not { margin-top: 0.875rem; }                /* not y638 */

/* --- 01.png: menu genisligi ve sag blok tasarimdaki yerlerine ------------- */
.main-nav { margin-left: 2.1875rem; gap: 0; }
.site-header .main-nav > li > a { padding-inline: 0.6875rem; }   /* basliklar arasi 1.375rem, "About" x1205'te biter */
.header__right { gap: 1.625rem; margin-left: auto; }
.header-phone__ic {                                          /* tasarimda dolu lacivert daire */
  width: 3rem; height: 3rem; border-radius: 50%;
  background: #0B3D8C; color: #fff; display: grid; place-items: center;
}
.header-phone__ic svg { width: 1.3125rem; height: 1.3125rem; }
.header-phone b { font-size: 1.0625rem; }
.header-phone span span { font-size: 0.78125rem; }
.header__wa { width: 3.125rem; height: 3.125rem; }
.header__cta { height: 3.25rem; min-width: 15rem; border-radius: 0.875rem; font-size: 1.0625rem; }
.site-header .main-nav { gap: 0; }
.site-header .main-nav > li > a { padding-inline: 0.5625rem; }   /* "About" x1205'te biter */
.header__right { gap: 1.375rem; }
/* ust bar: tasarimdaki ince dikey ayiraclar */
.topbar ul { gap: 0; }
.topbar li + li { margin-left: 1.625rem; padding-left: 1.625rem; border-left: 1px solid rgba(214, 230, 250, .3); }
.topbar .lang { display: inline-flex; align-items: center; gap: 0.375rem; padding-left: 1.125rem; border-left: 1px solid rgba(214,230,250,.3); }
.topbar .lang .caret { width: 0.75rem; height: 0.75rem; flex: none; display: inline; }
/* TUZAK: eski .hero::before kuralindan gelen `aspect-ratio:1` yuzunden perde
   43.125rem yerine 115.9375rem yuksekliginde kuruluyordu; dikey gecis hic gorunmuyordu. */
.hero::before { aspect-ratio: auto; }
.hero { background-image: none; }

/* 01.png olculeri masaustu icindir; dar ekranda sabit genislikler kaldirilir */
@media (max-width: 1024px) {
  .site-header .container { min-height: 4.25rem; }
  .brand img { height: 2.75rem; margin-left: 0; }
  .header__right { gap: 0.75rem; }
  .header__cta { min-width: 0; height: 2.75rem; font-size: 0.875rem; }
  .header__wa { width: 2.625rem; height: 2.625rem; }
  .header-phone__ic { width: 2.5rem; height: 2.5rem; }
  .header-phone b { font-size: 0.9375rem; }
  .topbar li + li { margin-left: 1rem; padding-left: 1rem; }
  .hero__cta .btn { height: 3.5rem; font-size: 1rem; }
  .hero__cta .btn--gold, .hero__cta .btn--ghost-hero { min-width: 0; }
}
@media (max-width: 760px) {
  .topbar { font-size: 0.78125rem; }
  .topbar li + li { margin-left: 0.75rem; padding-left: 0.75rem; }
  .brand img { height: 2.375rem; }
  .hero-form h2 { font-size: 1.625rem; }
  .hero-form__etiket { font-size: 0.75rem; }
}
/* 4 hucreli olcu yalniz genis ekranda; dar ekranda alttaki eski kirilim gecerli */
@media (max-width: 1300px) { .hero-guven__olgu { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px)  { .hero-guven__olgu { grid-template-columns: minmax(0, 1fr); } }
/* H1 kutusu tum kolonu kapliyor ama metin kisa; el yazisi ile SAHTE cakisma
   uretiyordu. Kutuyu metne daralt. */
.hero h1 { width: fit-content; max-width: 100%; }

/* ============================================================================
   TASARIM 02.png — BIREBIR (olculdu)
   Bolum yuksekligi 848 · kartlar y223..698 (h476), 4 sutun, bosluk 16
   baslik 4.25rem · lead 21/28 · kart basligi 1.875rem · kart butonu h63
   ============================================================================ */
.plan {
  padding-block: 2.125rem 1.875rem;
  background:
    radial-gradient(48.75rem 26.875rem at -3% -8%, rgba(216,236,248,.96) 0%, rgba(118,174,220,.6) 33%, rgba(10,70,140,0) 72%),
    radial-gradient(61.25rem 45rem at 103% 16%, rgba(58,128,200,.52) 0%, rgba(0,60,130,0) 64%),
    radial-gradient(38.75rem 26.25rem at 98% 78%, rgba(150,165,185,.36) 0%, rgba(0,50,110,0) 70%),
    linear-gradient(180deg, #002A63 0%, #00306F 44%, #002960 100%);
}
.plan .sec-head { max-width: 51.25rem; margin-inline: auto; text-align: center; margin-bottom: 1.625rem; }
.plan .eyebrow { font-size: 1.03125rem; letter-spacing: .18em; justify-content: center; }
.plan .h2 { font-size: clamp(2.375rem, 3.7vw, 4.25rem); line-height: 1.06; letter-spacing: -0.03em; margin-top: 0.875rem; }
.plan .lead { font-size: 1.3125rem; line-height: 1.35; margin-top: 1.25rem; color: #CEDFF4; }

.arac-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; align-items: stretch; }
.arac {
  min-height: 29.75rem; border-radius: 1.375rem; padding: 1.6875rem; gap: 0;
  display: flex; flex-direction: column; position: relative; overflow: hidden;
}
.arac__ust { gap: 0.875rem; }
.arac__no { width: 2.625rem; height: 2.625rem; font-size: 1.25rem; }
.arac .badge--gold { height: 1.75rem; padding-inline: 1rem; font-size: 0.8125rem; border-radius: 0.875rem; }
.arac .h3 { font-size: clamp(1.3125rem, 1.62vw, 1.875rem); line-height: 1.07; letter-spacing: -0.022em; margin-top: 1rem; }
.arac > p { font-size: 1.0625rem; line-height: 1.42; color: #4A6187; margin-top: 0.8125rem; }
.arac__onay, .arac__yesil { gap: 0.8125rem; margin-top: 2.125rem; }
.arac__onay li, .arac__yesil li { font-size: 1.0625rem; gap: 0.8125rem; }
.arac__onay svg, .arac__yesil svg { width: 1.625rem; height: 1.625rem; }
.arac .btn--block { margin-top: auto; height: 3.9375rem; border-radius: 0.875rem; font-size: 1.25rem; }
.arac .btn--block + * { margin-top: 0; }

/* kart 1: fiyat etiketi tasarimda saga yatik kucuk kart */
.fiyat-etiket {
  position: absolute; right: 1.125rem; top: 11rem; width: 12.25rem; transform: rotate(-4deg);
  background: #fff; border-radius: 0.875rem; box-shadow: 0 0.875rem 1.875rem rgba(10,40,90,.16);
  padding: 0.875rem 1rem; z-index: 2;
}
.fiyat-etiket b { font-size: 1.875rem; }
.fiyat-etiket small { font-size: 0.875rem; }

/* kart 2: kafa semasi karti dolduruyor */
.bolge-sema { margin-top: 1.125rem; flex: 1; border-radius: 1rem; }
.bolge-sema img { width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; }
.bolge-hap { font-size: 0.875rem; padding: 0.4375rem 0.9375rem; border-radius: 1rem; }

/* kart 3: portre saga, basligin hizasindan asagi */
.arac--fotolu .arac__foto { right: -6%; bottom: 6rem; width: 62%; }

/* alt serit */
.araci-bant { border-radius: 1rem; padding: 1.375rem 1.625rem; margin-top: 1.125rem; gap: 1.375rem; }
.araci-bant b { font-size: 1.25rem; }
.araci-bant p { font-size: 0.9375rem; line-height: 1.6; margin-top: 0.4375rem; }
.araci-bant__link { font-size: 1.0625rem; padding-left: 2.125rem; border-left: 1px solid rgba(255,255,255,.22); }
.araci-bant__ikon svg { width: 2.625rem; height: 2.625rem; }

/* el yazisi susler */
.plan-yazi-sol, .plan__yazi-sol { font-size: 1.875rem; color: #EAF2FD; left: 1.625rem; top: 1.625rem; width: 15rem; }
.plan-yazi-sag, .plan__yazi { font-size: 1.875rem; color: #EAF2FD; right: 1.625rem; top: 2.875rem; }

@media (max-width: 1300px) { .arac-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px)  { .arac-grid { grid-template-columns: minmax(0, 1fr); } .arac { min-height: 0; } }
/* 02: kart yuksekligi tasarimda SABIT 476px; icerik ona sigar */
.arac-grid { grid-auto-rows: 29.75rem; }
.arac { height: 100%; min-height: 0; }
.plan .lead { max-width: 51.875rem; margin-inline: auto; }
.plan .sec-head { max-width: 56.25rem; }
/* kart 4: tasarimda telefon + sac tipi seridi daha alcak */
.analiz-kutu { margin-top: 0.875rem; grid-template-columns: minmax(0, .9fr) minmax(0, 1fr); gap: 0.75rem; }
.telefon__ekran img { aspect-ratio: 1 / 1; }
.analiz-kutu .telefon { max-height: 9.25rem; }
.yukle-kutu--dikey { padding: 0.75rem; }
.yukle-kutu span { font-size: 0.78125rem; }
.yukle-kutu span b { font-size: 0.875rem; }
.sac-secim { margin-top: 0.75rem; gap: 0.375rem; }
.sac-secim__etiket { font-size: 0.8125rem; }
.sac-tipi span { font-size: 0.65625rem; }
.arac--fotolu .arac__yesil { margin-top: 1.375rem; }
/* 02 dikey ritim: olculen hedefler — eyebrow 35 · h2 73 · lead 152 · kart 223 · serit 715 */
.plan { padding-block: 2.0625rem 1.75rem; }
.plan .eyebrow { line-height: 1; }
.plan .h2 { margin-top: 0.75rem; }
.plan .lead { margin-top: 0.75rem; max-width: 55rem; }
.plan .sec-head { margin-bottom: 1.3125rem; }
.araci-bant { margin-top: 1rem; padding: 0.875rem 1.625rem; }
.plan { padding-block: 1.4375rem 1.75rem; }
.plan .h2 { margin-top: -0.25rem; }          /* 4.25rem baslikta satir kutusu optik hizayi kaydiriyor */
.araci-bant { padding: 0.9375rem 1.625rem; }
.araci-bant p { font-size: 0.9375rem; line-height: 1.5; }
/* 02 kart ici: tasarimda icerik 476px'e sigiyor */
.arac { padding: 1.375rem 1.5rem 1.3125rem; }
.arac .h3 { margin-top: 0.875rem; }
.arac > p { margin-top: 0.75rem; }
.arac__onay, .arac__yesil { margin-top: 1.625rem; gap: 0.75rem; }
.arac .btn--block { margin-top: auto; }
.bolge-sema { margin-top: 1rem; min-height: 0; }
.arac--fotolu .arac__foto { right: -4%; bottom: 0; width: 54%; z-index: 1; }
.arac--fotolu .btn--block, .arac--fotolu .arac__yesil, .arac--fotolu .h3,
.arac--fotolu > p, .arac--fotolu .arac__ust { position: relative; z-index: 2; }
.arac--fotolu > p { max-width: 60%; }
/* kart 4 */
.analiz-kutu { margin-top: 0.75rem; }
.analiz-kutu .telefon { max-height: 7.75rem; }
.telefon { padding: 0.3125rem; }
.yukle-kutu--dikey { padding: 0.625rem; gap: 0.4375rem; }
.yukle-kutu__ikon { width: 2rem; height: 2rem; }
.sac-secim { margin-top: 0.625rem; }
.sac-tipi label { padding: 0.1875rem; }
/* 02: tasarimdan kesilen kart gorselleri */
.arac__kolaj { position: absolute; right: -0.625rem; bottom: 4.625rem; width: 56%; height: auto; z-index: 1; pointer-events: none; }
.arac--krem .fiyat-etiket { z-index: 2; top: 10.5rem; right: 0.75rem; }
.arac--krem .arac__onay { position: relative; z-index: 2; }
.plan-telefon { width: 100%; height: auto; align-self: center; }
.analiz-kutu { align-items: center; }
.sac-secim { display: flex; align-items: center; gap: 0.75rem; }
.sac-secim__etiket { flex: none; }
.sac-tipi { flex: 1; }
/* 02 ince ayar: olculen kutulara oturt */
.fiyat-etiket { top: 11.3125rem; right: -0.5rem; width: 12.125rem; }
.arac--krem .arac__onay li { max-width: 13.4375rem; }
.arac__kolaj { right: -0.75rem; bottom: 4.875rem; width: 44%; }
.bolge-sema img { object-fit: contain; object-position: center bottom; }
.bolge-sema { background: linear-gradient(180deg, #EFF5FD 0%, #E3EDFA 100%); }
.sac-tipi span { font-size: 0.6875rem; white-space: nowrap; }
.sac-tipi label { padding: 2px; }
.analiz-kutu { grid-template-columns: minmax(0, .78fr) minmax(0, 1fr); }
/* el yazisi susleri: altin firca / ok */
.plan__yazi-sol::after {
  content: ""; display: block; width: 9.375rem; height: 0.875rem; margin-top: 0.375rem; margin-left: 2.625rem;
  background: radial-gradient(ellipse 62% 130% at 34% 100%, transparent 58%, var(--gold-500) 60%, transparent 76%);
}
.plan__yazi::before {
  content: ""; position: absolute; left: -5.75rem; top: 2.625rem; width: 4.625rem; height: 6rem;
  border-left: 0.1875rem solid var(--gold-500); border-bottom: 0.1875rem solid var(--gold-500);
  border-radius: 0 0 0 4.375rem; opacity: .95;
}
.plan__yazi { position: absolute; }
/* 02 kart 2: kafa gorseli kartin zeminine oturur, haplar olculen yerlerde */
.bolge-sema { background: none; position: relative; }
/* Yeni gorsel saydam ve boyun cerceve dibinde DUZ kesiliyor; kartin
   zeminine yumusak baglansin diye alt %14'te maske ile soner. */
.bolge-sema img {
  object-fit: contain; object-position: center;
  -webkit-mask-image: linear-gradient(180deg, #000 86%, transparent 100%);
          mask-image: linear-gradient(180deg, #000 86%, transparent 100%);
}
.bolge-hap { font-size: 0.90625rem; padding: 0.4375rem 0.9375rem; }
/* HAMZA 16.09.2026 yeni kafa gorseli: baglanti cizgileri gorselin ICINDE.
   Uc noktalari gorselden olculdu (kare cerceve, oran olarak):
     ust cizgiler  y=0.213  (sol uc x=0.111 · sag mavi nokta x=0.818)
     alt cizgiler  y=0.660  (sol uc x=0.112 · sag uc x=0.886)
   Hap yuksekligi cizim alaninin ~%23'u, yarisi ~%11,5 -> ust=%10,
   alt icin taban payi = 1 - (0.660 + 0.115) = %22,5. */
.bolge-hap--sol-ust { left: 5%; top: 10%; }
.bolge-hap--sag-ust { right: 6%; top: 10%; }
.bolge-hap--sol-alt { left: 4%; bottom: 22.5%; }
.bolge-hap--sag-alt { right: 5%; bottom: 22.5%; }
/* liste punto olcumu: "Transparent pricing" 135px -> 15,5px */
.arac__onay li, .arac__yesil li { font-size: 0.96875rem; gap: 0.6875rem; }
.arac__onay svg, .arac__yesil svg { width: 1.75rem; height: 1.75rem; }
.arac--krem .arac__onay li { max-width: none; }
/* 02 kart 4: icerik 476px'e sigsin */
.analiz-kutu { max-height: 7rem; margin-top: 0.625rem; }
.analiz-kutu .telefon, .plan-telefon { max-height: 7rem; width: auto; margin-inline: auto; }
.yukle-kutu--dikey { padding: 0.5rem; gap: 0.3125rem; }
.yukle-kutu__ikon { width: 1.75rem; height: 1.75rem; }
.yukle-kutu__ikon svg { width: 0.9375rem; height: 0.9375rem; }
.yukle-kutu span { font-size: 0.71875rem; line-height: 1.3; }
.yukle-kutu span b { font-size: 0.8125rem; }
.sac-secim { margin-top: 0.5rem; }
.sac-tipi img { aspect-ratio: 6 / 5; }
.sac-tipi span { margin-top: 2px; }
.arac .btn--block { flex: none; }
.analiz-kutu, .analiz-kutu .telefon, .plan-telefon { max-height: 6.375rem; }
/* 02 son rotus */
.fiyat-etiket { top: 10.75rem; right: -0.875rem; width: 11.875rem; }
.arac--krem .arac__onay { max-width: 13.625rem; }
.bolge-sema { margin-top: 0.625rem; }
.arac--mavi > p { margin-top: 0.625rem; }
.arac--fotolu .arac__foto { width: 58%; right: -6%; }
/* sag el yazisinin altin oku */
.plan__yazi::before {
  left: -5.375rem; top: 2.25rem; width: 4.125rem; height: 5.375rem;
  border-left: 0.1875rem solid var(--gold-500); border-bottom: 0; border-radius: 0;
  background: none;
  -webkit-mask: none;
  transform: rotate(-8deg);
}
.plan__yazi::after {
  content: ""; position: absolute; left: -6rem; top: 7.375rem; width: 1rem; height: 1rem;
  border-left: 0.1875rem solid var(--gold-500); border-bottom: 0.1875rem solid var(--gold-500);
  transform: rotate(-28deg);
}
.fiyat-etiket { top: 11.625rem; }
.arac--krem > p { max-width: 15rem; }

/* Header gradyani 01.png'den nokta nokta olculdu (y=135 satiri).
   Onceki tahmini gradyan sagda fazla acikti: telefon yazisi 2,7 kontrasta
   dusuyordu. Olculen degerler hem tasarima uygun hem okunur. */
.site-header {
  background: linear-gradient(90deg,
    #002961 0%, #013B83 9%, #044B9A 17%, #0A4E98 25%, #1A5DA6 33%,
    #21669F 41%, #266DAF 50%, #2870B4 58%, #2468AC 66%,
    #1B5EA8 74%, #1A5FAC 82%, #2468B2 90%, #3E7CB8 100%);
}
/* Telefon numarasi tasarimda BEYAZ ve kalin; `.header-phone span` kurali
   yuzunden acik gri miras aliyordu (kontrast 3,3). */
.header-phone b { color: #fff; }
.header-phone span span { color: #DCE8F8; }
/* Gercek marka logosu (canli sitedeki logo.svg). Tasarimdaki altin surumu
   markanin logosu DEGIL — Hamza 14.09.2026 duzeltti. Olcu tasarimdaki
   kutuya oturtuldu: 333x62, x58. */
.brand img { height: 3.875rem; width: auto; margin-left: -0.5625rem; }

/* ============================================================================
   TASARIM 03.png — BIREBIR (olculdu, referans genislik 1855)
   bolum 0..848 · kartlar y227..721 (h494) · kart genislikleri 616/511/357,
   bosluk 16 · kart dizisi x292'de basliyor (solda Istanbul fotografi var)
   serit y742..828 · icerik kenari x62..1804
   ============================================================================ */
#selfcheck {
  padding-block: 1.4375rem 1.75rem;
  position: relative; isolation: isolate; overflow: hidden;
  background: #00234F;
}
#selfcheck::after {                       /* solda Istanbul, saga dogru lacivert */
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: url("../img/istanbul/istanbul-city-guide.1b49c0c9.webp") left 38% / auto 100% no-repeat, #00234F;
}
#selfcheck::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(90deg,
    rgba(0,35,79,0) 0%, rgba(0,35,79,.12) 10%, rgba(0,35,79,.55) 20%,
    rgba(0,35,79,.9) 30%, #00234F 40%, #002A5E 70%, #00284F 100%);
}
#selfcheck > .container { position: relative; z-index: 1; max-width: none; padding-inline: 3.875rem; }

#selfcheck .sec-head { max-width: 56.25rem; margin-inline: auto; text-align: center; margin-bottom: 0; }
#selfcheck .eyebrow { font-size: 1.03125rem; letter-spacing: .18em; justify-content: center; line-height: 1; }
#selfcheck .h2 { font-size: clamp(2.375rem, 3.7vw, 4.25rem); line-height: 1.06; letter-spacing: -0.03em; margin-top: -0.25rem; }
#selfcheck .lead { font-size: 1.3125rem; line-height: 1.35; margin-top: 0.75rem; color: #CEDFF4; max-width: 55rem; margin-inline: auto; }

/* kart dizisi: solda fotograf icin bosluk birakir */
.planner {
  grid-template-columns: 616fr 511fr 357fr; gap: 1rem; align-items: stretch;
  margin-left: 10.5rem; margin-top: 1.8125rem;
}
.planner > * { min-height: 30.875rem; }
.planner .card { padding: 1.625rem; border-radius: 1.25rem; }
.step-badge { width: 2.9375rem; height: 2.9375rem; font-size: 1.25rem; }
.planner .arac-kunye__ust { gap: 0.875rem; }
.planner .badge--gold { height: 1.875rem; padding-inline: 1rem; font-size: 0.875rem; border-radius: 0.9375rem; }
.planner .h3 { font-size: 2.1875rem; line-height: 1.08; letter-spacing: -0.02em; margin-top: 0.75rem; }
.planner .icon-box { width: 3.375rem; height: 3.375rem; border-radius: 1rem; }
.planner .icon-box svg { width: 1.75rem; height: 1.75rem; }
.planner .chip { height: 2.625rem; padding-inline: 1.375rem; font-size: 1.0625rem; border-radius: 0.8125rem; }
.upload-box { padding: 1rem 1.25rem; border-radius: 0.875rem; gap: 1rem; min-height: 5.5625rem; align-items: center; }
.upload-box .icon-box { width: 3.125rem; height: 3.125rem; background: #fff; color: var(--blue-600); box-shadow: 0 0.25rem 0.75rem rgba(10,50,120,.12); }
.upload-box b { font-size: 1.0625rem; }
.upload-box span span { font-size: 1rem; }
.planner .btn--block { height: 4rem; font-size: 1.3125rem; border-radius: 0.875rem; margin-top: 1.125rem; }
.planner .mini-facts { margin-top: 1.125rem; gap: 1.5rem; font-size: 1rem; }
.planner .mini-facts svg { width: 1.5rem; height: 1.5rem; color: var(--blue-600); }
.planner .qa { border-top: 0; padding-top: 0; margin-top: 1.125rem; }
.planner .qa p { font-size: 1.0625rem; font-weight: 600; }
.planner .qa__opts button { height: 2.5rem; min-width: 5.5rem; font-size: 1.0625rem; border-radius: 0.75rem; }

/* 3. kart: fotograf + lacivert panel */
.wa-panel--foto { border-radius: 1.25rem; overflow: hidden; position: relative; background: #00376F; }
.wa-panel--foto > img { width: 100%; height: 15.4375rem; object-fit: cover; object-position: center 32%; display: block; }
.wa-panel__govde { padding: 1.3125rem; }
.wa-panel__govde h3 { font-size: 2.0625rem; line-height: 1.1; }
.wa-panel__govde > p { font-size: 1.0625rem; line-height: 1.36; margin-top: 0.75rem; color: #C7DAF2; }
.wa-panel__govde .btn--block { height: 2.875rem; border-radius: 1.4375rem; font-size: 1.125rem; margin-top: 0.9375rem; }
.wa-panel__not { font-size: 0.9375rem; margin-top: 0.75rem; }

@media (max-width: 1300px) {
  .planner { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-left: 0; }
  #selfcheck::after { background-position: left 30%; }
}
@media (max-width: 860px) { .planner { grid-template-columns: minmax(0, 1fr); } .planner > * { min-height: 0; } }
/* 03 kart ici dikey ritim — tasarimdan olculen bosluklar
   (daire 253 · h3 300 · metin 338 · etiket 377 · haplar 409 · yukleme 468
    · buton 578 · alt isaretler 668 · kart sonu 721) */
.planner .card { padding: 1.625rem 1.625rem 1.9375rem; }
.planner .h3 { margin-top: 0; }
.planner .arac-kunye { gap: 0; }
.planner .card > p:nth-of-type(1) { font-size: 1.0625rem; line-height: 1.32; color: #4A6187; margin-top: 0; }
.planner .card > p:nth-of-type(2) { font-size: 1.0625rem; font-weight: 700; color: var(--navy-900); margin-top: 0.8125rem; }
.chip-row { margin-top: 0.8125rem !important; }
.upload-box { margin-top: 1.0625rem; }
.planner .btn--block { margin-top: 1.3125rem; }
.planner .mini-facts { margin-top: 1.4375rem; gap: 1.375rem; flex-wrap: nowrap; white-space: nowrap; }
.planner .mini-facts span { gap: 0.5rem; }
.planner .mini-facts svg { width: 1.375rem; height: 1.375rem; }
/* 2. kart */
.planner .qa { margin-top: 1.125rem; }
.planner .qa__opts { margin-top: 0.75rem; gap: 0.625rem; }
.planner .card .form-note { margin-top: 1.125rem; font-size: 0.9375rem; }
/* 3. kart: metin fotografin altina biner */
.wa-panel__govde { margin-top: -3.125rem; position: relative;
  background: linear-gradient(180deg, rgba(0,40,86,0) 0%, rgba(0,40,86,.92) 34%, #002856 100%); }
.tool-card__head--ayri { justify-content: space-between; align-items: flex-start; }
.planner .arac-kunye__ust { display: flex; align-items: center; gap: 0.875rem; }
.planner .card .chip-row { justify-content: flex-start; }
.planner .card .form-note { justify-content: center; }
/* 03 · 2. kart: soru bloklari tasarimda 70px (bizde 108 idi) */
.planner .card > p:nth-of-type(1) { font-size: 1rem; }
.planner .qa { margin-top: 1.1875rem; }
.planner .qa p { font-size: 1.0625rem; line-height: 1.3; }
.planner .qa__opts { margin-top: 0.8125rem; }
.planner .qa__opts button { height: 2.5rem; padding-inline: 1.375rem; }
/* 3. kart: govde tasarimda 311px */
.wa-panel__govde h3 { font-size: 2.0625rem; line-height: 1.08; }
.wa-panel__govde > p { margin-top: 0.75rem; line-height: 1.3; }
.wa-panel__govde .btn--block { margin-top: 0.8125rem; }
.wa-panel__not { margin-top: 0.6875rem; }
/* 03 · 2. kart: metinler tasarimda TEK satir (16px), buton 52px */
.planner .card:nth-child(2) > p { font-size: 0.9375rem; }
.planner .qa p { font-size: 1rem; }
.planner .btn--ghost.btn--block { height: 3.25rem; font-size: 1.1875rem; }
.planner .card .form-note { margin-top: 1.125rem; font-size: 0.875rem; }
/* 03 · sus ogeleri tasarimdaki yerlerine (ucak x55..305 y100..190,
   sol el yazisi x62 y330, sag el yazisi x1505 y35) */
.plan-ucak { left: 2.96rem; top: 6.25rem; width: 15.625rem; }
.plan-yazi-sol { left: 3.875rem; top: 20.625rem; font-size: 1.6875rem; transform: rotate(-4deg); }
.plan-yazi-sag { right: 4rem; top: 2.1875rem; font-size: 1.75rem; transform: rotate(-4deg); }
/* 3. kart fotografi: tasarimda 193px, metin fotografin ALTINDA basliyor */
.wa-panel--foto > img { height: 12.0625rem; object-position: center 28%; }
.wa-panel__govde { margin-top: -1.5rem; }
/* ikonlar tasarimda DOLU mavi */
.planner .icon-box { background: #E7F0FE; color: var(--blue-600); box-shadow: none; }
.planner .mini-facts svg { color: var(--blue-600); }
/* 03 · arka plan fotografi tasarimda soldan x~600'e kadar aciktan gelir */
#selfcheck::after { background-position: left 30%; }
#selfcheck::before {
  background: linear-gradient(90deg,
    rgba(0,35,79,0) 0%, rgba(0,35,79,.06) 14%, rgba(0,35,79,.42) 24%,
    rgba(0,35,79,.82) 33%, #00234F 42%, #002A5E 72%, #00284F 100%);
}
/* 03 · kart ici sikistirma (tasarim: kart 494px) */
.planner .step-badge { width: 2.5rem; height: 2.5rem; font-size: 1.125rem; }
.planner .card > p:nth-of-type(1) { font-size: 0.9375rem; }
.planner .qa { margin-top: 0.8125rem; }
.planner .qa p { font-size: 0.9375rem; }
.planner .btn--ghost.btn--block { margin-top: 0.8125rem; }
.planner .card .form-note { margin-top: 1rem; }
/* tasarimdaki DOLU mavi onay ikonlari */
.planner .mini-facts svg { background: var(--blue-600); color: #fff; border-radius: 50%; padding: 0.1875rem; }
/* 03 · 3. kart govdesi tasarimda 311px (bizde 414 idi) */
.planner .wa-panel--foto .wa-panel__govde { padding: 1.25rem 1.3125rem 1rem; }
.planner .wa-panel--foto .wa-panel__govde h3 { font-size: 1.9375rem; line-height: 1.02; margin: 0; }
.planner .wa-panel--foto .wa-panel__govde > p { font-size: 1.0625rem; line-height: 1.28; margin-top: 0.75rem; }
.planner .wa-panel--foto .wa-panel__govde .btn--block { margin-top: 0.75rem; height: 2.75rem; font-size: 1.0625rem; }
.planner .wa-panel--foto .wa-panel__not { margin-top: 0.625rem; font-size: 0.875rem; white-space: nowrap; }

/* ============================================================================
   TASARIM 04.png — BIREBIR (olculdu)
   bolum 848 · H2 tepe 83 (68px) · lead 21/29 · daireler y270 (44px)
   gorseller y322..487 (165) · basliklar y502 · aciklamalar y535
   Taya seridi y623..780 · alt satir y795
   ============================================================================ */
#journey {
  padding-block: 2.125rem 1.75rem;
  background:
    radial-gradient(46.875rem 25rem at 0% 0%, #C4E3FD 0%, rgba(196,227,253,0) 62%),
    radial-gradient(50rem 28.125rem at 100% 4%, #D8EDFD 0%, rgba(216,237,253,0) 64%),
    linear-gradient(180deg, #EFF6FE 0%, #F6FAFE 46%, #EDF7FE 100%);
}
#journey .sec-head { max-width: 56.25rem; margin-inline: auto; text-align: center; margin-bottom: 0; }
#journey .eyebrow { line-height: 1; font-size: 1.03125rem; letter-spacing: .18em; justify-content: center; }
#journey .h2 { font-size: clamp(2.375rem, 3.7vw, 4.25rem); line-height: 1.06; letter-spacing: -0.03em; margin-top: -0.25rem; }
#journey .lead { font-size: 1.3125rem; line-height: 1.38; margin-top: 0.75rem; max-width: 53rem; margin-inline: auto; }

#journey .adimlar, #journey .steps, .step-row { margin-top: 2.5rem; }
.step__num { width: 2.75rem; height: 2.75rem; font-size: 1.0625rem; }
.step img { height: 10.3125rem; width: 100%; object-fit: cover; margin-top: 1.5rem; border-radius: 0.875rem; }
.step h3 { font-size: 1.25rem; line-height: 1.2; margin-top: 0.9375rem; }
.step p { font-size: 0.9375rem; line-height: 1.55; margin-top: 0.625rem; }
.taya { min-height: 9.8125rem; margin-top: 1.5625rem; border-radius: 1.125rem; }
.journey { margin-top: 4.3125rem; }        /* daireler tasarimda y270 */
.step img { margin-top: 1.5rem; }
/* 04 · ucak ve Taya seridi tasarim olculerine */
.yol-ucak { left: 1.5rem; top: 1.25rem; width: 16.25rem; }
.yol-yazi-sol { left: 3rem; top: 6.5rem; font-size: 1.625rem; }
.yol-yazi-sag { right: 3.5rem; top: 2rem; font-size: 1.6875rem; }
.taya { padding: 1.5rem 1.75rem; }
.taya img { height: 3rem; width: auto; }
.taya p, .taya > div > p { font-size: 1.0625rem; line-height: 1.45; }
.taya b { font-size: 1.0625rem; }
.taya__ozellik b, .taya .ozellik b { font-size: 0.9375rem; }
.taya__ozellik span, .taya .ozellik span { font-size: 0.8125rem; }
.step__num { border: 0; }
.journey .step:not(:last-child)::after { height: 0.1875rem; background: #2C6BB8; opacity: .55; }
.step p { color: #4A6187; }                       /* acik mavi zeminde 4,32 -> 5,6 */
.taya__ozellik b, .taya .ozellik b { font-size: 0.875rem; }
.taya__ozellik span, .taya .ozellik span { font-size: 0.75rem; }
.taya { padding-right: 15.5rem; }                 /* sagdaki Istanbul karesi icin yer */

/* ============================================================================
   TASARIM 05.png — BIREBIR (1536'lik dosya, 1855 olcegine cevrildi ×1,2077)
   eyebrow y37 · H2 tepe 85 (66px) · lead y161 TEK satir · filtre y209
   kartlar y278..784 (gorsel 387 + govde 106) · guven satiri y814
   uyari bandi y888..965 · CTA bandi y966..1219
   ============================================================================ */
#results { padding-block: 2.125rem 1.75rem; }
#results .sec-head { max-width: 78rem; margin-inline: auto; text-align: center; margin-bottom: 0; }
#results .eyebrow { line-height: 1; font-size: 1.0625rem; letter-spacing: .18em; justify-content: center; }
#results .h2 { font-size: clamp(2.375rem, 3.6vw, 4.125rem); line-height: 1.06; letter-spacing: -0.03em; margin-top: -0.25rem; }
#results .lead { font-size: 1.1875rem; line-height: 1.4; margin-top: 0.75rem; max-width: 70rem; margin-inline: auto; }
.sonuc-filtre { margin-top: 1.8125rem; justify-content: center; gap: 0.875rem; }
.sonuc-filtre .chip { height: 2.75rem; padding-inline: 1.5rem; font-size: 1.0625rem; border-radius: 1.375rem; }
.sonuc-sarmal { margin-top: 1rem; }
.sonuc__gorsel { height: 24.1875rem; }
.sonuc__gorsel img { width: 100%; height: 100%; object-fit: cover; }
.sonuc__govde { padding: 1.125rem 1.25rem; }
.sonuc__govde .h3, .sonuc__govde h3 { font-size: 1.375rem; }
.sonuc__meta { margin-top: 0.75rem; font-size: 1.0625rem; gap: 1.25rem; }
.sonuc__meta svg { width: 1.25rem; height: 1.25rem; }

/* ============================================================================
   TASARIM 06.png — BIREBIR (1987'lik dosya, 1855 olcegine ×0,9336)
   eyebrow y27 (18px) · H2 tepe y64 (61px) · lead y128 (20/29)
   duzen y201..685 · sutunlar 609 / 281 / 612 (bosluk 21 ve 33)
   sag baslik y215 (38px) · paragraf y263 (18/27) · 2x2 y373
   altin buton y553 (h64) · alt satir y640 · portre x1550..1855
   bolum yuksekligi 739
   ============================================================================ */
#afro { padding-block: 1.6875rem 0; overflow: hidden; }
#afro .sec-head { max-width: 78rem; margin-inline: auto; text-align: center; margin-bottom: 0; }
#afro .eyebrow { line-height: 1; font-size: 1.125rem; letter-spacing: .18em; justify-content: center; }
#afro .h2 { font-size: clamp(2.25rem, 3.35vw, 3.8125rem); line-height: 1.06; letter-spacing: -0.03em; margin-top: -0.1875rem; }
#afro .lead { font-size: 1.25rem; line-height: 1.45; margin-top: 0.75rem; max-width: 66rem; margin-inline: auto; }

.afro-duzen {
  position: relative;
  grid-template-columns: 38.0625rem 17.5625rem 38.25rem;
  gap: 1.3125rem; margin-top: 1.5625rem; padding-right: 10.4375rem;
  align-items: start;
}
.afro-buyuk, .afro-yakin { height: 30.25rem; }
.afro-yakin { display: grid; grid-template-rows: 14.125rem 1fr; gap: 1rem; }
.afro-yakin figure, .afro-yakin img { height: 100%; width: 100%; object-fit: cover; }
.afro-metin h3.h3 { font-size: 2.375rem; line-height: 1.1; letter-spacing: -0.02em; }
.afro-metin > p { font-size: 1.125rem; line-height: 1.5; margin-top: 0.875rem; }
.afro-ozellik { margin-top: 1.25rem; gap: 1rem 1.5rem; }
.afro-ozellik b { font-size: 1.125rem; line-height: 1.25; }
.afro-ozellik .icon-box { width: 3.3125rem; height: 3.3125rem; border-radius: 0.875rem; }
#afro .btn--gold { height: 4rem; font-size: 1.3125rem; border-radius: 0.875rem; margin-top: 1.25rem; }
#afro .afro-metin .mini-facts { margin-top: 1.3125rem; font-size: 1.0625rem; gap: 1.75rem; }
#afro .afro-metin .mini-facts svg { width: 1.5rem; height: 1.5rem; color: var(--blue-600); }
.afro-portre { position: absolute; right: -4.1875rem; top: -0.6875rem; width: 19.0625rem; height: auto; bottom: auto; }
@media (max-width: 1400px) {
  .afro-duzen { grid-template-columns: 1fr 1fr; padding-right: 0; }
  .afro-portre { display: none; }
}
@media (max-width: 900px) { .afro-duzen { grid-template-columns: 1fr; } .afro-buyuk, .afro-yakin { height: auto; } }
.afro-portre { width: 19.0625rem; height: auto; right: -4.1875rem; top: -3.4375rem; }
#afro .afro-metin .btn--gold { width: 100%; max-width: none; }
/* 06 · sag sutun tasarimda TEK satir basliklar */
.afro-metin h3.h3 { font-size: 2.125rem; white-space: nowrap; }
#afro .afro-metin .btn--gold { font-size: 1.1875rem; white-space: nowrap; }
#afro .afro-metin .mini-facts { flex-wrap: nowrap; white-space: nowrap; gap: 1.375rem; font-size: 1rem; }
.afro-alinti p { font-size: 1.0625rem; line-height: 1.35; }
.afro-alinti footer { font-size: 0.9375rem; }

/* ============================================================================
   TASARIM 07.png — BIREBIR (1637'lik dosya, 1855 olcegine ×1,1332)
   eyebrow y37 · H2 tepe y77 (74px) · lead y161 (20/29) · guven satiri y245
   kartlar y300..883 (4 sutun, 389 genis, bosluk 14) · alt bant y887..1037
   ============================================================================ */
#team { padding-block: 2.3125rem 1.75rem; }
#team .sec-head { max-width: 78rem; margin-inline: auto; text-align: center; margin-bottom: 0; }
#team .eyebrow { line-height: 1; font-size: 1.0625rem; letter-spacing: .18em; justify-content: center; }
#team .h2 { font-size: clamp(2.375rem, 4vw, 4.625rem); line-height: 1.06; letter-spacing: -0.03em; margin-top: -0.25rem; }
#team .lead { font-size: 1.25rem; line-height: 1.45; margin-top: 0.75rem; max-width: 62rem; margin-inline: auto; }
#team .mini-facts { margin-top: 1.4375rem; font-size: 1.0625rem; gap: 2.25rem; justify-content: center; flex-wrap: wrap; }
#team .mini-facts svg { width: 1.75rem; height: 1.75rem; color: var(--navy-800); }
#team .grid-4 { gap: 0.875rem; margin-top: 1.125rem; }
.kisi { border-radius: 1.125rem; }
.kisi__foto img { width: 100%; height: 20rem; object-fit: cover; display: block; }
.kisi__rozet { font-size: 1rem; padding: 0.5rem 1.125rem; border-radius: 1.125rem; }
.kisi__govde { padding: 1.25rem 1.375rem 1.5rem; }
.kisi__govde .h3 { font-size: 1.5rem; }
.kisi__rol { font-size: 1.125rem; margin-top: 0.25rem; color: var(--blue-ink); }
.kisi__govde > p:last-child { font-size: 1.0625rem; line-height: 1.42; margin-top: 1.125rem; }
.ekip-bant, .ekip__bant { min-height: 9.4375rem; border-radius: 1.125rem; margin-top: 0.25rem; }

/* ============================================================================
   BOLUM BASLIGI ORTAK OLCEGI — 01..25 tasarimlarinin hepsinde ayni desen:
   eyebrow ~17px/satir-yuksekligi 1 · H2 62-74px · lead 20-21px/1,45
   Onceki hal: H2 34-52px, lead 15-19px -> tasarimin yarisi kadar.
   ============================================================================ */
.section .sec-head { margin-bottom: 1.5rem; }
.section .sec-head .eyebrow { line-height: 1; font-size: 1.0625rem; letter-spacing: .18em; }
.section .sec-head .h2 { font-size: clamp(2.25rem, 3.6vw, 4.125rem); line-height: 1.06; letter-spacing: -0.03em; margin-top: -0.25rem; }
.section .sec-head .lead { font-size: 1.25rem; line-height: 1.45; margin-top: 0.75rem; }
.section--compact .sec-head .h2 { font-size: clamp(2.125rem, 3.3vw, 3.75rem); }
.section--pillar .sec-head .h2 { font-size: clamp(2.375rem, 3.9vw, 4.375rem); }
/* tasarimda bolum ic bosluklari 34/28 — 72px degil */
.section, .section--tight, .section--compact, .section--pillar { padding-block: 2.375rem 2rem; }
.plan .lead { color: #D7E5F7; }               /* 4,29 -> 5,3 */
#team .serit-cta.ekip__bant { margin-top: 0.875rem; }   /* 4px bosluk cok sikti */
/* Baslik blogu 760px'e sikismisti; tasarimda basliklar TEK satir. */
.section .sec-head { max-width: 78rem; }
.section .sec-head .h2 { max-width: none; }
.section .sec-head .lead { max-width: 62rem; }
.sec-head[style*="center"] .lead, .section .sec-head.orta .lead { margin-inline: auto; }

/* 09 · paket kartlari (tasarim: gorsel 221 · kart dizisi y256..918) */
.paket-izgara { gap: 0.875rem; }
.pkg__foto img { width: 100%; height: 13.8125rem; object-fit: cover; display: block; }
.pkg__govde { padding: 1.125rem 1.25rem 1.375rem; }
.pkg__govde .h3 { font-size: 1.625rem; }
.pkg__alt { font-size: 1.0625rem; margin-top: 0.125rem; }
.pkg__price { font-size: 2.6875rem; margin-top: 0.5rem; line-height: 1.1; }
.pkg__price small { font-size: 1.125rem; }
.pkg__govde ul { margin-top: 0.75rem; gap: 0.4375rem; }
.pkg__govde li { font-size: 1rem; gap: 0.625rem; }
.pkg__govde li svg { width: 1.125rem; height: 1.125rem; }
.pkg__govde .btn { height: 3.125rem; font-size: 1.0625rem; margin-top: 1rem; }
/* Baslik blogu dikey ritmi tasarima gore (eyebrow 40 · H2 70 · lead 133 · olgu 187) */
.section .sec-head .lead { margin-top: 0.5rem; }
.section .sec-head .mini-facts { margin-top: 0.875rem; font-size: 1.0625rem; gap: 2rem; }
.section .sec-head .mini-facts svg { width: 1.625rem; height: 1.625rem; }
.section .sec-head { margin-bottom: 1.125rem; }

/* ============================================================================
   HERO DUZELTME (Hamza 14.09.2026: "hero cok birbirine girmis")
   1) El yazisi form kartinin ALTINA giriyordu (1907'de 34px, 1536'da 42px
      cakisma). Artik saga gore konumlaniyor -> her genislikte kartin solunda
      kaliyor.
   2) Hero'nun sol-alti duz lacivert bir olu alandi; tasarimda orada deniz/
      sehir fotografi goruluyor. Perde elips yapildi: ust-sol koyu, alt-sol acik.
   ============================================================================ */
.script--hero {
  left: auto; right: 35%; top: 6.25rem;
  width: max-content; text-align: right; font-size: 1.75rem;
}
.script--hero::after { margin: 0.375rem 0 0 auto; }

.hero::before {
  background:
    linear-gradient(180deg, rgba(0,41,98,0) 58%, rgba(120,150,180,.3) 80%,
                    rgba(236,244,253,.92) 97%, #F1F7FE 100%),
    radial-gradient(118% 88% at -2% 20%,
      #002962 0%, #002962 24%, rgba(0,44,104,.88) 38%,
      rgba(1,55,124,.5) 52%, rgba(6,70,148,.16) 66%, rgba(20,100,180,0) 80%);
}
/* 06 · alinti karti tasarimda YALNIZ sol (once) fotografinin ustunde durur */
.afro-alinti { max-width: 23.75rem; left: -1.25rem; bottom: 1.5625rem; }
.afro-buyuk__alt { right: 1.25rem; bottom: 1.25rem; font-size: 1.0625rem; }
.afro-ozellik .icon-box--koyu { background: var(--navy-800); color: #fff; }
/* Hero fotografi tasarimda daha aydinlik; bizimki koyu/bulutlu duruyordu. */
.hero::after { filter: brightness(1.14) saturate(1.06) contrast(.96); background-position: 62% 30%; }
/* 02 · icerik butona 0 px kala bitiyordu ("kesilmis" gorunuyordu).
   Tasarim olculeri: hap 33px/bosluk 8 · kafa semasi 165 · sac seridi 65. */
.arac--fotolu .arac__yesil { gap: 0.5rem; }
.arac--fotolu .arac__yesil li { padding-block: 0.3125rem; font-size: 1rem; min-height: 2.0625rem; }
.arac--mavi .bolge-sema { max-height: 10.3125rem; }
.sac-secim { max-height: 4.0625rem; }
.sac-tipi img { aspect-ratio: 5 / 4; }
.sac-tipi span { font-size: 0.6875rem; }
.sac-secim__etiket { font-size: 0.8125rem; }
/* 02 · sag el yazisinin altin oku: duz bir cizgi gibi duruyordu (Hamza
   isaretledi). Tasarimda asagi-sola kivrilan bir ok var. */
.plan__yazi::before {
  left: -5.375rem; top: 2rem; width: 4.5rem; height: 5.5rem;
  border-left: 0.1875rem solid var(--gold-500);
  border-bottom: 0.1875rem solid var(--gold-500);
  border-right: 0; border-top: 0;
  border-radius: 0 0 0 4.375rem;
  transform: rotate(6deg);
}
.plan__yazi::after {
  left: -5.625rem; top: 6.5rem; width: 0.875rem; height: 0.875rem;
  border-left: 0.1875rem solid var(--gold-500);
  border-bottom: 0.1875rem solid var(--gold-500);
  transform: rotate(-10deg);
}
/* kalan bitisiklikler */
.sac-secim { max-height: 3.75rem; }
.sac-tipi span { font-size: 0.625rem; }
.packages .script--gold, #packages .script--gold { margin-top: 1.5rem; }
.result-cta { overflow: visible; }
@media (max-width: 900px) {
  .planner .mini-facts { flex-wrap: wrap; white-space: normal; }
  .afro-buyuk, .afro-yakin { height: auto; }
}
/* Mobilde 18px altina dusen `.accent-blue` 4,08 kontrast veriyordu (AA 4,5). */
@media (max-width: 900px) {
  .accent-blue { color: #0052CC; }
  .koord-kanal__saat { color: #4A6187; }
}
/* mobilde afro gorseli sabit yukseklikte kaliyor, resim kesiliyordu */
@media (max-width: 900px) {
  .afro-buyuk { height: auto !important; overflow: visible; }
  .afro-buyuk img { height: auto; }
}
/* portre mobilde zaten gizli; `overflow:hidden` gereksiz ve gorseli kesiyordu */
@media (max-width: 900px) { #afro { overflow: visible; } }
/* `1fr` en-az-icerik genisligini korur; dar ekranda kutu tasiyordu */
@media (max-width: 1400px) { .afro-duzen { grid-template-columns: minmax(0,1fr) minmax(0,1fr); } }
@media (max-width: 900px)  { .afro-duzen { grid-template-columns: minmax(0,1fr); } }
/* sonuc karuseli mobilde kendi icinde kaydirir; belgeye tasmaz */
@media (max-width: 900px) {
  .sonuc-sarmal { overflow: hidden; }
  #result-grid { overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; }
  #result-grid > * { scroll-snap-align: start; }
}
/* 375px'te belge 4px tasiyordu; kaynak kutu bazinda bulunamadi (hicbir oge
   pencereyi asmiyor). `clip` kaydirma baglami KURMAZ, yapiskan basligi bozmaz. */
@media (max-width: 430px) { main { overflow-x: clip; } }
.sac-tipi span { font-size: 0.5625rem; letter-spacing: -0.01em; }

/* Bolum ustundeki standart etiket KALDIRILDI (Hamza 14.09.2026).
   Etiketin kapladigi dikey bosluk padding'e aktarildi; yoksa baslik
   bolumun tepesine yapisiyor. */
.section, .section--tight, .section--compact, .section--pillar { padding-block: 3.625rem 2.25rem; }
#plan, #selfcheck { padding-block: 3.25rem 1.875rem; }
#journey { padding-block: 3.375rem 1.75rem; }
#results, #team { padding-block: 3.5rem 1.75rem; }
#afro { padding-block: 2.9375rem 0; }
.section .sec-head .h2 { margin-top: 0; }

/* ============================================================================
   06.png ICE OLCUM (native 1987 -> 1855 olcegi ×0,9336)
   blok x51..659 y201..685 · foto kutuyu TAM doldurur (bizde altta 27px
   lacivert serit kaliyordu) · BEFORE/AFTER hapi h40 · alinti karti
   x21..373 y574..705 (352×131) · "FUE | ..." x518..747 y588..621
   zemin #F3F8FD (bizdeki lila-mavi degil)
   ============================================================================ */
#afro { background: linear-gradient(180deg, #EDF4FD 0%, #F4F9FD 30%, #F4F8FD 100%); }
.afro-buyuk img { width: 100%; height: 100%; object-fit: cover; display: block; }
.afro-etiket { font-size: 0.9375rem; padding: 0.5rem 0.9375rem; border-radius: 0.625rem; top: 1.125rem; }
.afro-etiket--sol { left: 1rem; }
.afro-etiket--sag { left: 50.5%; margin-left: 1rem; }
.afro-alinti {
  left: -1.625rem; bottom: -1.25rem; width: 22rem; padding: 1.125rem 1.25rem 1rem;
  border-radius: 1.125rem;
}
.afro-alinti p { font-size: 1.0625rem; line-height: 1.36; margin-top: 0.5rem; }
.afro-alinti footer { margin-top: 0.75rem; font-size: 1rem; gap: 0.75rem; }
.afro-alinti .stars { font-size: 1.125rem; }
.afro-alinti .eko-alinti__tirnak { width: 1.875rem; height: 1.875rem; }
.afro-buyuk__alt { right: 1.75rem; bottom: 4rem; font-size: 1.375rem; font-weight: 700; }

/* ============================================================================
   BASLIK PUNTOLARI — tasarimdaki METIN GENISLIGINDEN hesaplandi.
   (Harf yuksekliginden hesaplamak yanlisti: olcume y/g/p kuyruklari karisiyor
    ve punto %20 buyuk cikiyordu — Hamza'nin "fontlar kocaman" uyarisi.)
   olculen genislik (1855 olcegi) -> punto:
     02 plan 745 -> 68   ·  04 journey 855 -> 66  ·  06 afro 968 -> 51
     07 team 504 -> 75   ·  12 help   726 -> 56   ·  18 compare 922 -> 82
   ============================================================================ */
#plan .sec-head .h2     { font-size: clamp(2.25rem, 3.7vw, 4.25rem); }
#journey .sec-head .h2  { font-size: clamp(2.25rem, 3.6vw, 4.125rem); }
#afro .sec-head .h2     { font-size: clamp(2rem, 2.78vw, 3.1875rem); }
#team .sec-head .h2     { font-size: clamp(2.375rem, 4.05vw, 4.6875rem); }
#help .sec-head .h2     { font-size: clamp(2rem, 3.05vw, 3.5rem); }
#compare .sec-head .h2 { font-size: 3.625rem; line-height: 1.1; }

/* 06 · alinti karti figurun DISINA tasiyor; `overflow:hidden` onu kesiyordu.
   Kose yuvarlakligi artik gorselin kendisinde. */
.afro-buyuk { overflow: visible; }
.afro-buyuk img { border-radius: 1.25rem; }
/* 06 · "Exosome FUE | 5,300 grafts" etiketinin basi alinti kartinin altinda
   kaliyordu (44x36 ortusme). Tasarimda etiket x411..653, kart x21..373. */
.afro-buyuk__alt { font-size: 1.0625rem; right: 1.5rem; bottom: 0.875rem; }
/* 02 kart 1: fiyat etiketi dar ekranda aciklama metninin USTUNE biniyordu
   (1536'da 199x40 px metin gizleniyordu). */
.arac--krem > p { max-width: 52%; }
/* alinti karti bolumun 20px disina tasiyordu (tasarimda bolum icinde kalir) */
#afro { padding-bottom: 1.75rem; }
/* 07 · portreler tasarimdaki TAM kutudan kesildi (y265..538); onceki kesim
   y332'den basliyordu ve KAFALARI KESIYORDU. Rol etiketi gorselde basili. */
.kisi__foto img { height: 20.9375rem; object-fit: cover; object-position: center top; }
/* Mobilde paket karti fotografi rem olcegiyle 152px'e iniyor ve 4:3 kaynakta
   YUZU ALTTAN KESIYORDU (gorsel denetimi 390px'te yakaladi). */
@media (max-width: 900px) {
  .pkg__foto img { height: auto; aspect-ratio: 16 / 11; }
  .sonuc__gorsel { height: auto; aspect-ratio: 4 / 3; }
}
/* Kurucunun portresi canli sitede YOK — uydurma fotograf yerine marka
   monogrami. Fotograf gelince bu blok kaldirilir, <img> konur. */
.kisi__foto--monogram {
  height: 20.9375rem; display: grid; place-items: center;
  background: linear-gradient(160deg, #04295F 0%, #0A4290 55%, #06306E 100%);
}
.kisi__monogram {
  font-family: var(--font-head); font-size: 5.5rem; font-weight: 800;
  letter-spacing: .04em; color: var(--gold-300); line-height: 1;
}
.kisi__foto--monogram { aspect-ratio: auto; }
.kisi__foto--monogram .kisi__monogram { font-size: 5rem; }
/* 08 · kart rozeti tek (fotografta basili rozet yok, gercek fotograf) */
.hosp__alt { display: flex; align-items: center; gap: 0.5rem; }
.hosp__alt svg { width: 1.0625rem; height: 1.0625rem; color: var(--blue-ink); flex: none; }
#hospitals .mini-facts b { display: block; font-family: var(--font-head); color: var(--navy-900); }
#hospitals .mini-facts span { align-items: flex-start; line-height: 1.3; }
/* 08 · dort olgu tek satir — ama `nowrap` 410px TASMA uretti (denetci yakaladi).
   Dogru cozum: puntoyu ve boslugu kucult, sarmaya izin ver. */
#hospitals .mini-facts { flex-wrap: wrap; gap: 0.75rem 1.375rem; font-size: 0.9375rem; }
#hospitals .mini-facts span { white-space: normal; }
#hospitals .mini-facts b { display: inline; margin-right: 0.25rem; }
/* 11 · tasarimdaki dunya haritasi filigrani */
#reviews { position: relative; isolation: isolate; }
#reviews::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: url("../img/international-patient-network-map.1fa37e62.webp") center 38% / 78% auto no-repeat;
  opacity: .16;
}
#reviews .serit-olgu { margin-top: 1.5rem; }

/* ============================================================================
   12.png — kanal kartlari. Bizdeki punto tasarimin ~%65'i idi (baslik 17px /
   tasarim 26px · govde 13,5 / 17 · buton 14 / 17). 3B ikon alani da fazla
   uzundu ve gorseli altta kesiyordu.
   ============================================================================ */
.channel { padding: 1.375rem 1.375rem 1.5rem; }
.channel__gorsel { height: 9.0625rem; width: 100%; object-fit: contain; object-position: center; background: #F2F6FC; border-radius: 0.875rem; }
.channel h3 { font-size: 1.625rem; line-height: 1.15; margin-top: 1.125rem; letter-spacing: -0.02em; }
.channel p { font-size: 1.0625rem; line-height: 1.42; margin-top: 0.625rem; color: #4A6187; }
.channel .btn { height: 2.875rem; font-size: 1.0625rem; margin-top: 1.125rem; }
/* alt WhatsApp bandi tasarimda daha uzun ve punto buyuk */
#help .wa-bant, #help .serit-wa, #help .wa-serit { min-height: 11.875rem; }
#help .wa-bant h3, #help .serit-wa h3 { font-size: 2.125rem; }
/* 3B ikon KIRPILMAMALI — baska bir kural `cover` uyguluyordu */
#help .channel .channel__gorsel {
  height: 9.0625rem; width: 100%; object-fit: contain; object-position: center;
  background: #F1F6FD; border-radius: 0.875rem; padding: 0.5rem; aspect-ratio: auto;
}
/* "RECOMMENDED" rozeti ikonun ustune biniyordu */
.channel--onerilen { padding-top: 2.25rem; }
.channel--onerilen .kanal-rozet, .channel--onerilen .badge { top: 0.625rem; }

/* ============================================================================
   13.png — SSS. Tasarimda: baslik sol ustte, kisi fotografi SAG UST'te
   KART ICINDE DEGIL, bolume tasarak duruyor; arama cubugu basligin hemen
   altinda tam genislikte. Bizde sol sutunda 300px bos alan kaliyordu.
   ============================================================================ */
#faq { position: relative; overflow: hidden; }
#faq .sss-ust, #faq .faq-ust { align-items: start; }
#faq .sss-foto, #faq .faq-foto {
  border-radius: 1.25rem; overflow: hidden; margin-top: -1.5rem;
}
#faq .sss-ust > div:first-child, #faq .faq-ust > div:first-child { padding-top: 0.5rem; }
#faq .chip { height: 2.625rem; padding-inline: 1.125rem; font-size: 1rem; }
#faq .faq-item summary, #faq .faq-item > summary { font-size: 1.0625rem; }

/* ============================================================================
   14.png — blog kartlari. Punto tasarimin ~%70'i idi (baslik 17 / tasarim 24,
   govde 13 / 17, cip 12 / 15). Kapak gorsellerinin uzerinde YAZI var ve
   ortadan kirpilinca bas harfleri kesiliyordu -> sola hizali kirpma.
   ============================================================================ */
.post__gorsel img { object-position: left center; }
.post__body .h3, .post__body h3 { font-size: 1.5rem; line-height: 1.2; letter-spacing: -0.02em; }
.post__body p { font-size: 1.0625rem; line-height: 1.45; margin-top: 0.625rem; color: #4A6187; }
.post__devam, .post__body a { font-size: 1.0625rem; }
.post__tarih { font-size: 0.9375rem; }
#blog .chip { height: 2.625rem; padding-inline: 1.25rem; font-size: 1rem; }
#blog .blog-tumu { font-size: 1.0625rem; }
#blog .serit-cta b, #blog .blog-bant b { font-size: 1.375rem; }
#blog .serit-cta p, #blog .blog-bant p { font-size: 1.0625rem; }
/* SVG bayraklar: her olcekte keskin (polylang PNG'leri 16x11 idi) */
.bayrak { width: 1.375rem; height: 0.9375rem; border-radius: 0.125rem; flex: none;
          box-shadow: 0 0 0 1px rgba(10,30,70,.14); display: inline-block; vertical-align: -0.1875rem; }
.alan__ulke .bayrak { width: 1.5rem; height: 1rem; }
/* Alan hapinin ANINDA gorunur sonucu */
.alan-sonuc {
  display: flex; align-items: center; gap: 0.75rem; margin-top: 0.8125rem;
  padding: 0.75rem 1rem; border-radius: 0.875rem;
  background: #E9F1FE; color: var(--navy-900); font-size: 1.0625rem;
}
.alan-sonuc svg { width: 1.375rem; height: 1.375rem; color: var(--blue-600); flex: none; }
.alan-sonuc b { font-family: var(--font-head); }
.alan-sonuc.is-vurgu { animation: sonucParla .45s ease; }
@keyframes sonucParla { from { background: #CFE2FF; } to { background: #E9F1FE; } }
/* Ulke kodu artik GERCEK secici (eskiden tiklanamaz bir span'di) */
.alan__ulke { display: inline-flex; align-items: center; gap: 0.5rem; cursor: pointer; position: relative; }
.alan__ulke select {
  appearance: none; -webkit-appearance: none; border: 0; background: transparent;
  font: inherit; color: inherit; font-weight: 600; cursor: pointer;
  padding: 0 1.125rem 0 0; max-width: 4.5rem; text-overflow: ellipsis;
}
.alan__ulke::after {
  content: ""; position: absolute; right: 0.125rem; top: 50%; width: 0.4375rem; height: 0.4375rem;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: translateY(-70%) rotate(45deg); opacity: .6; pointer-events: none;
}
.alan__ulke select:focus-visible { outline: 2px solid var(--blue-600); outline-offset: 2px; border-radius: 0.25rem; }
.btn.is-gonderiliyor { opacity: .85; pointer-events: none; }

/* ============================================================================
   ULKE KODU SECICI — ozel panel.
   Tarayicinin yerlesik <select>'i sistem yazi tipiyle aciliyor, listesi karti
   asiyor ve dugmede "+90 T..." diye kirpiliyordu (Hamza 14.09.2026).
   ============================================================================ */
.alan__ulke { position: relative; display: inline-flex; align-items: center; }
.ulke-dugme {
  display: inline-flex; align-items: center; gap: 0.5rem; cursor: pointer;
  background: transparent; border: 0; font: inherit; color: inherit; font-weight: 700;
  padding: 0.25rem 0.375rem 0.25rem 0; border-radius: 0.5rem; white-space: nowrap;
}
.ulke-dugme:hover { background: rgba(10, 40, 96, .06); }
.ulke-dugme:focus-visible { outline: 2px solid var(--blue-600); outline-offset: 2px; }
.ulke-ok {
  width: 0.4375rem; height: 0.4375rem; border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg);
  opacity: .55; transition: transform .16s ease;
}
.ulke-dugme[aria-expanded="true"] .ulke-ok { transform: translateY(1px) rotate(225deg); }

.ulke-panel {
  position: absolute; left: -0.625rem; top: calc(100% + 0.625rem); z-index: 40;
  width: 19.375rem; max-width: min(19.375rem, 80vw);
  background: #fff; color: var(--navy-900);
  border-radius: 0.875rem; box-shadow: 0 1.375rem 2.75rem rgba(4, 20, 50, .26);
  border: 1px solid #E2EAF5; overflow: hidden;
}
.ulke-ara { display: flex; align-items: center; gap: 0.5rem; padding: 0.6875rem 0.875rem;
            border-bottom: 1px solid #EDF2F9; }
.ulke-ara svg { width: 1.0625rem; height: 1.0625rem; color: #7B8CA8; flex: none; }
.ulke-ara input { border: 0; outline: 0; font: inherit; font-size: 1rem; width: 100%;
                  background: transparent; color: inherit; }
.ulke-liste { max-height: 16.5rem; overflow-y: auto; margin: 0; padding: 0.3125rem; list-style: none; }
.ulke-liste li {
  display: flex; align-items: center; gap: 0.6875rem; cursor: pointer;
  padding: 0.5rem 0.625rem; border-radius: 0.5rem; font-size: 1rem; line-height: 1.2;
}
.ulke-liste li:hover, .ulke-liste li.is-odak { background: #EFF5FE; }
.ulke-liste li[aria-selected="true"] { background: #E2EDFD; font-weight: 600; }
.ulke-ad { flex: 1; }
.ulke-kod { color: #62779A; font-variant-numeric: tabular-nums; }
@media (max-width: 560px) { .ulke-panel { left: 0; width: 17rem; } }
/* TUZAK 1: `li.hidden = true` -> [hidden]{display:none} kurali, benim
   `.ulke-liste li{display:flex}` kuralim tarafindan EZILIYORDU; arama
   suzgeci DOM'da calisiyor ama ekranda hicbir sey degismiyordu. */
.ulke-liste li[hidden] { display: none !important; }
/* TUZAK 2: panel istatistik kartinin ARKASINDA kaliyordu (hero yigin
   baglami). Kart z-index:3, panel 40 idi ama farkli baglamdaydi. */
.hero-form { overflow: visible; position: relative; z-index: 6; }
.hero .container { overflow: visible; }
.alan--tel { position: relative; z-index: 8; }
.ulke-panel { z-index: 80; }
.hero { position: relative; z-index: 1; }
.hero.ulke-panel-acik { z-index: 30; }
/* eski select'ten kalan ikinci ok isareti kaldirildi (cift ok goruntusu) */
.alan__ulke::after { content: none; }

/* SSS arama alani vurgusu: bos alanla Search'e basilinca (15.09.2026) */
.faq-search:has(input.vurgu) { border-color: var(--blue-600); box-shadow: 0 0 0 0.1875rem rgba(37,99,235,.18); }
.faq-search input.vurgu::placeholder { color: var(--blue-600); }

/* ============================================================
   15. BOLUM (#global) — 15.png uzerinden olculdu (15.09.2026)
   Tasarim 2170px genislikte; olcek 1855/2170 = 0.85484.
   Harita blogu tasarimda x 860-2170 / y 0-570 -> 1855'te 1120x487,
   bolumun SAG KENARINA dayali (tam tasma) ve METNIN ALTINDA.
   Rozet seridi tasarimda x 896-2099, y 572-685 -> 1855'te
   x 766 / en 1028 / ust 489 / yukseklik 97: butonla AYNI satirda,
   kapsayicinin sagina yasli, tam genislik DEGIL.
   Bolum yuksekligi tasarimda 620.
   ============================================================ */
#global { position: relative; overflow: hidden; }
#global > .container { position: relative; }

.kuresel { display: block; }
/* Metin kolonu haritanin UZERINDE kalmali; harita blogunun sol kenari
   opak, altta kalirsa satir sonlari kirpiliyor (olculdu 15.09.2026). */
.kuresel > div:first-child { position: relative; z-index: 1; max-width: 42.5rem; }
.kuresel .lead { max-width: 40rem; }

.kuresel__harita {
  position: absolute; top: 0; right: 0; width: 60.4%;
  z-index: 0; pointer-events: none;
}
.kuresel__harita img { display: block; width: 100%; height: auto; }

.kanit__not { display: block; margin-top: 2px; font-size: 0.75rem; color: var(--muted); }

#global .kurum-serit {
  position: absolute; right: 4.1875rem; bottom: 2.125rem;
  width: 64.25rem; min-height: 6.0625rem; margin: 0; z-index: 1;
}
/* Rozet logolari 15.png'den KESILDI: tasarimdaki oranlar ve kirmizi
   tonlari birebir; onceki varliklar farkli surumlerdi (TURSAB'da 50. yil
   amblemi vardi, tasarimda yok). Yukseklikler tasarim olculeri. */
#global .kurum-serit { justify-content: space-evenly; gap: var(--s-6); padding-inline: var(--s-7); }
#global .kurum-serit > img:nth-of-type(1) { height: 4.375rem; }
#global .kurum-serit > img:nth-of-type(2) { height: 3.6875rem; }
#global .kurum-serit > img:nth-of-type(3) { height: 3.5625rem; }
#global .kurum-serit > img { width: auto; object-fit: contain; }
#global .kurum-serit__ayrac { height: 3.25rem; }

/* Tasarimda buton 279x60 (1855 olcekte); varsayilan 50 idi. */
#global .kuresel__alt .btn { min-height: 3.75rem; padding-inline: 1.5rem; }
#global .kuresel__alt { margin-bottom: 3.3125rem; }

@media (max-width: 1100px) {
  #global { overflow: visible; }
  .kuresel > div:first-child { max-width: none; }
  .kuresel__harita { position: static; width: 100%; margin-top: var(--s-6); }
  #global .kurum-serit { position: static; width: 100%; margin-top: var(--s-6); }
  #global .kuresel__alt { margin-bottom: 0; }
}

/* ============================================================
   16. BOLUM (#ecosystem) — 16.png uzerinden olculdu (15.09.2026)
   Tasarim 1774px genis / 887px yuksek; olcek 1855/1774 = 1.0457.
   Panel gorseli tasarimdan kesildi (x 693-1774 / y 0-887) ve
   tasarimdaki gibi bolumun SAG UST KOSESINE dayanir (tam tasma);
   sol kenarindaki capraz gecis gorselin kendi icinde.
   UYARI: kesilen gorselin uzerinde tasarimcinin uydurdugu sehir
   basina hasta sayilari ("New York 2,400+") ve oncesi/sonrasi sac
   kupurleri var. Ikisi de yayinlanamaz (dogrulanamayan sayi +
   Reklam Kurulu). Asagidaki katmanlar onlari TAM ORTER; olculeri
   kucultme, altindaki iddia gorunur hale gelir.
   ============================================================ */
#ecosystem { position: relative; overflow: hidden; padding-block: 0; }
/* Tasarimda sol kolon metni 56-692 (1855 olcekte, en 636), panel 725'te
   basliyor. Kolonlar buna gore: 38.4% + 61.6%, bosluk yok. */
#ecosystem > .container > .grid-2 {
  grid-template-columns: 38.4% 61.6%; gap: 0; align-items: start;
}
#ecosystem > .container > .grid-2 > div:first-child { padding-block: 4rem; padding-right: 1.5rem; }
#ecosystem .eko-panel { margin-right: -4.1875rem; }
#ecosystem .eko-panel__sahne { border-radius: 0; box-shadow: none; background: #04203f; }

.eko-etiket {
  position: absolute; z-index: 3; display: flex; align-items: center; gap: 0.5rem;
  min-width: 11.25rem; min-height: 3.125rem; padding: 0 0.875rem;
  background: #fff; border-radius: var(--r-pill); box-shadow: 0 0.5rem 1.25rem rgba(4, 22, 52, .35);
  font-family: var(--font-head); font-size: 0.8125rem; font-weight: 700;
  color: var(--navy-900); white-space: nowrap;
}
.eko-etiket .bayrak { width: 1.5rem; height: 1rem; border-radius: 2px; flex: none; }
.eko-etiket svg:not(.bayrak) { width: 1.125rem; height: 1.125rem; color: var(--blue-600); flex: none; }
.eko-etiket--ny    { left: 29.3%; top: 14.1%; }
.eko-etiket--ldn   { left: 57.1%; top: 13.8%; }
.eko-etiket--tor   { left: 29.9%; top: 35.3%; }
.eko-etiket--dunya { left: 58.0%; top: 34.0%; }

#ecosystem .eko-plan {
  left: 52.4%; top: 47.5%; bottom: auto; width: 21.5%; min-height: 33%;
  background: rgba(6, 26, 58, .96); backdrop-filter: blur(0.375rem);
}
/* Tasarimda kart y 40-469 => ust %4.5, yukseklik %48.4. Daha kisa yaparsan
   altindaki "Dedicated patient support" baski metni gorunur kaliyor. */
#ecosystem .eko-sutun { right: 2.2%; top: 4.5%; width: 24%; min-height: 48.4%;
  align-content: stretch; gap: 0; padding: var(--s-5) var(--s-4); }
/* Tasarimda satirlar ince cizgiyle ayriliyor ve karta esit dagiliyor. */
#ecosystem .eko-sutun > div { align-items: center; padding-block: var(--s-4);
  border-top: 1px solid rgba(146, 185, 236, .22); }
#ecosystem .eko-sutun > div:first-child { border-top: 0; padding-top: 0; }
#ecosystem .eko-sutun > div:last-child { padding-bottom: 0; }
#ecosystem .eko-sutun b { font-size: 1.125rem; }
#ecosystem .eko-sutun svg { width: 1.4375rem; height: 1.4375rem; }
#ecosystem .eko-serit {
  position: absolute; left: 1.85%; top: 81.4%; width: 95.3%; z-index: 3;
  background: rgba(6, 26, 58, .93); border: 1px solid rgba(120, 180, 255, .22);
  border-radius: var(--r-lg); backdrop-filter: blur(0.375rem);
}

@media (max-width: 1100px) {
  #ecosystem { overflow: visible; padding-block: var(--s-8); }
  #ecosystem > .container > .grid-2 { grid-template-columns: minmax(0, 1fr); gap: var(--s-7); }
  #ecosystem > .container > .grid-2 > div:first-child { padding-block: 0; }
  #ecosystem .eko-panel { margin-right: 0; }
  #ecosystem .eko-panel__sahne { border-radius: var(--r-xl); }
  #ecosystem .eko-serit { position: static; width: auto; margin-top: var(--s-5); }
}

/* Tasarimda ozellik kartlari BEYAZ + ince cerceve, baslik 2 satir kalin lacivert. */
#ecosystem .eko-karo > div { background: #fff; border: 1px solid var(--line-2); box-shadow: var(--shadow-sm); padding: var(--s-5) var(--s-3); }
#ecosystem .eko-karo b { font-size: 1.0625rem; }
#ecosystem .eko-karo .icon-box { width: 2.75rem; height: 2.75rem; }
#ecosystem .eko-karo .icon-box svg { width: 1.5rem; height: 1.5rem; color: var(--blue-600); }
#ecosystem .eko-karo .icon-box { background: var(--blue-50); border: 1px solid var(--blue-100); }

/* ============================================================
   17. BOLUM (#istanbul) — 17.png uzerinden olculdu (15.09.2026)
   Tasarim 1536px genis; olcek 1855/1536 = 1.2077.
   Ust blok TAM TASMA bir panorama: tasarimda y 0-621 (1855'te 750)
   ve sag kenara dayali. Sol tarafta beyaz metin alani panoramaya
   YUMUSAK GECISLE bagliniyor — o gecis CSS gradyaniyla surdurulur
   (kesim sutunu 690: 667'ye kadar panel metni, 720'den el yazisi).
   ============================================================ */
#istanbul { position: relative; overflow: hidden; padding-top: 0; }
#istanbul .sehir-ust {
  /* Tasarimda sol kolon metni x 65-805 (1855 olcekte) = 740px genis. */
  grid-template-columns: minmax(0, 43%) minmax(0, 57%);
  gap: 0; align-items: start; position: relative;
  /* Panorama mutlak konumlu: bolum yuksekligine katkisi yok. Tasarimdaki
     750px'lik ust blok yuksekligi buradan verilir. */
  min-height: 46.875rem;
}
/* Tasarimda baslik ustu y=106 (1855 olcekte); merkezlenince 189'a dusuyordu. */
#istanbul .sehir-metin { padding-top: 10rem; padding-bottom: 0; position: relative; z-index: 2; }

#istanbul .sehir-foto {
  position: absolute; top: 0; right: -4.1875rem; width: 59.4%;
  border-radius: 0; overflow: visible; z-index: 0;
}
#istanbul .sehir-foto > img { width: 100%; height: auto; aspect-ratio: auto; }
/* Panoramanin sol kenarini beyaza baglayan perde (tasarimdaki gecis). */
.sehir-foto__perde {
  position: absolute; inset: 0 auto 0 0; width: 13%;
  background: linear-gradient(to right, #fff 0%, rgba(255, 255, 255, .55) 45%, rgba(255, 255, 255, 0) 100%);
  pointer-events: none; z-index: 1;
}
#istanbul .sehir-ofis { left: 47.6%; right: auto; top: 17.1%; min-width: 13.875rem; z-index: 2; }
/* Tasarimda hap yuksekligi 59px, aralari 1-8px: siki bir yigin. */
#istanbul .sehir-cip  { left: 61.8%; right: auto; top: 28.9%; gap: 0.1875rem; z-index: 2; }
#istanbul .sehir-cip > span { min-height: 3.6875rem; min-width: 10.25rem; padding-inline: 0.75rem; }
#istanbul .sehir-cip b { font-size: 0.78125rem; }
#istanbul .sehir-cip span span { font-size: 0.71875rem; }
#istanbul .sehir-ofis b { font-size: 0.875rem; }
#istanbul .sehir-ofis span { font-size: 0.875rem; }
#istanbul .sehir-cip > span { min-width: 9.6875rem; }

@media (max-width: 1100px) {
  #istanbul { overflow: visible; padding-top: var(--s-8); }
  #istanbul .sehir-ust { grid-template-columns: minmax(0, 1fr); gap: var(--s-7); }
  #istanbul .sehir-metin { padding-block: 0; padding-right: 0; }
  #istanbul .sehir-foto { position: static; width: auto; border-radius: var(--r-lg); overflow: hidden; }
  .sehir-foto__perde { display: none; }
  #istanbul .sehir-ofis { left: auto; right: var(--s-4); top: var(--s-4); }
  #istanbul .sehir-cip { left: auto; right: var(--s-4); top: auto; bottom: var(--s-4); }
}

/* Tasarimda gezi blogu panoramanin hemen altinda basliyor (y 750) ve
   bolum onunla biter; fazladan bosluk yok. */
#istanbul .sehir-rota { margin-top: 0; }
#istanbul { padding-bottom: 0; }

/* ============================================================
   18. BOLUM (#compare) — 18.png uzerinden olculdu (15.09.2026)
   Tasarim 1983px genis / 793 yuksek; olcek 1855/1983 = 0.93545.
   1855 olcekte: baslik TEK SATIR, murekkep eni 1001, y 74-117.
   Tablo x 69-990 · ornek kart x 1011-1335 · fotograf x 1340-1832
   ve y 24-583 (yani basligin USTUNDEN baslar, akista degil).
   Guven seridi y 548-601 · buton y 651-685 · bolum 742.
   ============================================================ */
#compare { position: relative; overflow: hidden; }
#compare .sec-head { max-width: 66rem; }
#compare .kiyas-baslik { font-size: 3.625rem; line-height: 1.1; }
#compare .grid-fiyat {
  display: grid; grid-template-columns: 53.5% 18.8%; gap: 1.2%; align-items: start;
}
#compare .kiyas-foto {
  position: absolute; right: 1.4375rem; top: 1.5rem; width: 30.75rem;
  margin: 0; z-index: 1; border-radius: var(--r-lg); overflow: hidden;
}
#compare .kiyas-foto img { width: 100%; height: 28rem; object-fit: cover; display: block; }
/* Tasarim: tablo alti 470 -> guven seridi 548 (78px). Bizde ayrica
   "gosterge araligi" uyarisi var (mevzuat), o yuzden bosluk sifir. */
#compare .kiyas-guven { margin-top: 2.3125rem; }
#compare { padding-top: 4.625rem; padding-bottom: 3rem; }
#compare .grid-fiyat { margin-top: 1.125rem; }

@media (max-width: 1100px) {
  #compare { overflow: visible; }
  #compare .grid-fiyat { grid-template-columns: minmax(0, 1fr); gap: var(--s-6); }
  #compare .kiyas-foto { position: static; width: auto; margin-top: var(--s-6); }
  #compare .kiyas-foto img { height: auto; }
}

/* Ornek paket karti: tasarimda satirlar TEK satir ve "From $2,500" tek satir.
   324px'lik kartta bizim punto tasiyordu (olculdu 15.09.2026). */
#compare .grid-fiyat > .card { padding: 1.5rem 1.375rem; }
#compare .pkg li { font-size: 0.8125rem; line-height: 1.5; }
#compare .pkg__price { font-size: 2rem; white-space: nowrap; }
#compare .h3 { font-size: 1.0625rem; }
/* Tasarimda buton daha iri: murekkep eni 398, yuksekligi 34 -> kutu ~62. */
#compare .btn--gold { min-height: 3.875rem; padding-inline: 2rem; font-size: 1rem; }
#compare .kiyas-guven svg { width: 1.75rem; height: 1.75rem; }

/* ============================================================
   19. BOLUM (#free-analysis) — 19.png (1983x793, olcek 0.93545)
   1855 olcekte: fotograf x 1138-1855, y 0-741 => bolumun SAG
   KENARINA ve UST/ALT kenarlarina dayali, tam yukseklik.
   Form karti y 194-617. El yazisi fotografin icinde kesili
   oldugu icin HTML kopyasi kaldirildi (hayalet cift yazi).
   ============================================================ */
#free-analysis { position: relative; overflow: hidden; }
#free-analysis > .container { position: relative; }
#free-analysis .koord-duzen,
#free-analysis .koord-sag { position: static; }
#free-analysis .koord-foto {
  position: absolute; right: 0; top: 0; width: 38.65%; height: 100%;
  object-fit: cover; object-position: center; border-radius: 0; z-index: 0;
}
#free-analysis .koord-kanal,
#free-analysis .koord-rozet { position: relative; z-index: 1; }
#free-analysis { min-height: 46.375rem; display: grid; align-items: center; }
#free-analysis .koord-duzen { align-items: center; }

@media (max-width: 1100px) {
  #free-analysis { overflow: visible; }
  #free-analysis .koord-foto { position: static; width: 100%; height: auto; border-radius: var(--r-lg); }
}

/* Tasarimda kanal metni dar sarar (x 982-1290) ve gizlilik rozeti fotografin
   SAG ALTINDA durur (x 1410-1810, y 584-674). Genis kolon metni kadinin
   sacina tasiriyordu (olculdu 15.09.2026). */
#free-analysis .koord-kanal { max-width: 20.5rem; }
#free-analysis .koord-rozet {
  position: absolute; left: 76%; bottom: 4.25rem; width: 25rem; z-index: 2;
}
@media (max-width: 1100px) {
  #free-analysis .koord-kanal { max-width: none; }
  #free-analysis .koord-rozet { position: static; width: auto; }
}

/* ============================================================
   20. BOLUM (#calculator) — 20.png (1536x1024, olcek 1.2077)
   1855 olcekte: sema kafasi x 399-1021 / y 223-1093 (622x870) ve
   HEM sol metnin HEM panelin ARKASINDA durur. Sol metin x 66-680,
   panel x 1018-1799. Bolum 1237.
   ============================================================ */
#calculator { position: relative; overflow: hidden; }
#calculator > .container { position: relative; }
#calculator .hesap-duzen {
  display: grid; grid-template-columns: 35.6% 45.4%; gap: 19%; align-items: start;
}
#calculator .hesap-sol { position: relative; z-index: 2; }
#calculator .hesap-panel { position: relative; z-index: 2; }
/* Kesit tasarimda x 345-836 / y 205-905 => 1855'te x 417, ust 248, en 593. */
#calculator .hesap-sema {
  position: absolute; left: 22.5%; top: 15.5rem; width: 32%;
  margin: 0; z-index: 1; pointer-events: none;
}
#calculator .hesap-sema img { width: 100%; height: auto; display: block; }

@media (max-width: 1100px) {
  #calculator { overflow: visible; }
  #calculator .hesap-duzen { grid-template-columns: minmax(0, 1fr); gap: var(--s-7); }
  #calculator .hesap-sema { position: static; width: 100%; max-width: 32rem; margin-inline: auto; }
}

/* Tasarim: yorum karti x 42-495 (453 genis), el yazisi x 66-320 / y 1044-1159
   ve acik mavi, altinda mavi cizgi. */
#calculator .hesap-alinti { max-width: 21rem; }  /* kafa semasinin "Temple (Left)" etiketini ortuyordu */
#calculator .hesap-yazi { font-size: 2.25rem; line-height: 1.18; color: #BFD9FF; }
/* 20.png: yazinin altinda uclari incelen MAVI firca darbesi. Duz renk
   uclari kesik gosteriyordu; sitenin altin firca idiyomunun mavisi. */
#calculator .hesap-yazi .firca {
  height: 0.1875rem; width: 88%; margin-top: 0.4375rem;
  background: linear-gradient(90deg, transparent 0%, #2F7DF6 14%, #6FA8FF 50%, #2F7DF6 86%, transparent 100%);
}

/* ============================================================
   21. BOLUM (#guides) — 21.png (1536x1024, olcek 1.2077)
   Sag blok tasarimdan TEK PARCA kesildi (native x 560-1536, y 0-1024)
   ve bolumun sag kenarina dayanir; capraz beyaz kama gorselin icinde.
   Baskili "Watch Our Story" hapinin uzerine saydam baglanti konur:
   gorsel birebir kalir, alan tiklanabilir olur.
   ============================================================ */
/* Panorama mutlak konumlu: bolum yuksekligini tasarimdan (1237) veririz. */
#guides { position: relative; overflow: hidden; min-height: 77.3125rem; }
#guides > .container { position: relative; }
#guides .rehber-duzen { display: block; }
#guides .rehber-sol { position: relative; z-index: 2; max-width: 59.2%; }
#guides .rehber-sag { position: static; pointer-events: none; }
/* Panorama tasarimda native x 930-1536 -> bolumun sag kenarina dayali, %39.5. */
#guides .rehber-sag__gorsel {
  /* Kart kolonu 1086'da bitiyor; panorama 1122'de basliyordu ve arada
     36px beyaz bir serit kaliyordu. Sol kenar kartlara dayanir. */
  position: absolute; top: 0; right: 0; width: 38.15%; height: auto; z-index: 1; display: block;
}
/* Pasaport/binis karti kamasi kartlarin UZERINDE: native x 560-960, y 0-300. */
#guides .rehber-pasaport {
  /* Tasarimda pasaport blogu native x 590-800 / y 0-250 -> 1855'te 253x302. */
  /* Tasarimda pasaport blogu 1855 olcekte x 713-966 (253px). %19.5
     verilince 362px oluyor ve 03 numarali kartin gorselini komple
     ortuyordu (olculdu 15.09.2026). */
  position: absolute; left: 38.4%; top: 0; width: 13.7%; height: auto; z-index: 3;
}
#guides .rehber-sag__izle {
  /* Gorsel: en %39.5 (733px) -> boy 1239px. Hap y 1032, boy 90. */
  position: absolute; left: 80.3%; right: auto; top: 64.5rem; width: 16.7%; height: 5.625rem;
  border-radius: var(--r-pill); pointer-events: auto;
}
#guides .rehber-sag__izle:focus-visible { outline: 2px solid var(--gold-400); outline-offset: 3px; }

@media (max-width: 1100px) {
  #guides { overflow: visible; }
  #guides .rehber-sol { max-width: none; }
  #guides .rehber-sag__gorsel { position: static; width: 100%; margin-top: var(--s-7); }
  #guides .rehber-pasaport { position: static; width: 60%; margin-inline: auto; }
}

/* ============================================================
   22. BOLUM (#ebook) — 22.png (1983x793, olcek 0.93545)
   1855 olcekte: baslik satir1 ust 90 / satir2 ust 136 (satir araligi
   46 => punto ~42). Kitap gorseli x 608-1215 / y 0-680 ve kartin
   UST KENARINDAN TASAR. El yazisi x 590+ / y 76, yani kitabin
   solunda ve YUKARIDA (bizde sag uste dusmustu).
   ============================================================ */
#ebook { position: relative; overflow: hidden; }
#ebook > .container { position: relative; }
#ebook .magnet { align-items: start; }
#ebook .magnet__baslik { font-size: 2.625rem; line-height: 1.1; margin-top: 0; }
#ebook .magnet > div:first-of-type { padding-top: 0; }
#ebook .kitap-yazi {
  /* Tasarimda el yazisi 140 native (=131px) genislikte ve kitabin SOL
     ustunde duruyor. Bizde 22px punto ile 221px olmus, kitabin uzerine
     tasip adamin yuzune biniyordu (olculdu 1920'de). */
  position: absolute; left: 31.8%; right: auto; top: 2rem;
  font-size: 1rem; line-height: 1.3; text-align: left; z-index: 3;
}
#ebook .magnet__book { position: static; }
#ebook .kitap-foto {
  /* Kitap 42px SOLDA duruyordu: 4. ozellik kutusunun metnini kesiyordu.
     Tasarimdaki hizaya cekildi (kitabin fiziksel sol kenari 730px). */
  position: absolute; left: 37.25%; top: 0; width: 32%; height: auto; z-index: 2;
}

@media (max-width: 1100px) {
  #ebook { overflow: visible; }
  #ebook .kitap-foto { position: static; width: 100%; }
  #ebook .kitap-yazi { position: static; }
}

/* ============================================================
   23. BOLUM (#usa) — 23.png (1774x887, olcek 1.0457)
   Fotograf tasarimda native x 950-1774 / y 0-887 => bolumun SAG
   kenarina ve ust/alt kenarlarina dayali (%46.4). El yazisi gorselin
   icinde kesili; HTML kopyasi kaldirildi. Kartlar TEK SATIR 6 sutun
   ve sonuncusu fotografin uzerine biner. Yorum karti baskili
   kartin uzerine birebir oturur.
   ============================================================ */
#usa { position: relative; overflow: hidden; min-height: 58rem; }
#usa > .container { position: relative; }
#usa .abd-duzen { display: block; }
#usa .abd-sol { position: relative; z-index: 2; }
#usa .abd-izgara { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0.625rem; }
#usa .abd-karo { padding: var(--s-4) 0.75rem; text-align: center; }
#usa .abd-karo__ikon { margin-inline: auto; }
#usa .abd-karo b { font-size: 0.8125rem; line-height: 1.25; }
#usa .abd-karo span:last-child { font-size: 0.71875rem; }
#usa .abd-sag { position: static; }
#usa .abd-sag__foto {
  /* Kesim YENIDEN yapildi (15.09.2026): eski kesim tasarimin BASKILI 6.
     kartini ve el yazisinin yarisini iceriyordu; ayrica dar oldugu icin
     kart satirinin son iki kutusu adamin YUZUNE biniyordu. Yeni kesim
     native x 1270-1774 (504x887) -> 527x928, yani %28.4.
     Sol kenar tasarimdaki gibi yumusasin diye maske ile eritilir. */
  position: absolute; top: 0; right: 0; width: 28.4%; height: 100%; max-height: none;
  border-radius: 0; z-index: 1; display: block; object-fit: cover; object-position: right center;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16%);
          mask-image: linear-gradient(90deg, transparent 0, #000 16%);
}
/* Kart satiri tasarimda native x 55-1140 = %61,2; tam genislige yayilinca
   son iki kart fotografin NET alanina biniyordu (olculdu 1920'de). */
#usa .abd-izgara { max-width: 61.5%; }
#usa .abd-alinti {
  /* Tasarim: y 625 (bolum 928). Yuzde KAPSAYICI yuksekligine gore
     cozuldugu icin sabit olcu verilir. */
  /* Kart, gorseldeki BASKILI kartin tam kutusunu ortmeli: ekranda y 655-838. */
  /* Baskili kart native x 1374-1742 / y 598-782 (olculdu). Yeni kesime
     gore: %77,5 sol, %20,8 en, 39,1rem ust, 12rem boy. */
  position: absolute; left: 77.5%; right: auto; top: 35.5rem; bottom: auto;
  width: 20.8%; min-height: 12rem; z-index: 3; margin: 0;
  display: flex; flex-direction: column; justify-content: center;
}

@media (max-width: 1100px) {
  #usa { overflow: visible; min-height: 0; }
  #usa .abd-izgara { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #usa .abd-sag__foto { position: static; width: 100%; margin-top: var(--s-6); }
  #usa .abd-alinti { position: static; width: auto; margin-top: var(--s-5); }
}

/* El yazisi HTML'de: kesim sutunu yuzunden gorselde yarim kalan kismi
   gokyuzu rengiyle kapatildi, tam yazi buraya konumlandirilir. */
#usa .abd-yazi {
  position: absolute; left: 59.3%; right: auto; top: 4.75rem;
  font-size: 1.5rem; line-height: 1.35; text-align: left; z-index: 3;
}
@media (max-width: 1100px) {
  #usa .abd-sag__perde { display: none; }
  #usa .abd-yazi { position: static; }
}

/* ============================================================
   24. BOLUM (#women) — 24.png (1672x941, olcek 1.1095)
   Fotograf bolumun SAG YARISINI kaplar ve ust/alt/sag kenarlara
   dayanir (1855 olcekte x 910-1855, y 0-1044). Madalyon, el yazisi
   ve guven seridi fotografin ICINDE baskili - HTML kopyalari
   kaldirildi (ust uste biniyordu).
   ============================================================ */
#women { position: relative; overflow: hidden; min-height: 65.25rem; }
#women > .container { position: static; }
#women .kadin-duzen { display: block; }
#women .kadin-sol { position: relative; z-index: 2; max-width: 48%; padding-block: 3rem; }
#women .kadin-sag { position: static; }
#women .kadin-foto {
  /* Taban kuralda `inset: 0 -30% 0 0` var; sadece right vermek yetmiyor,
     left:0 hala gecerli kaliyordu ve fotograf SOLA yapisiyordu (15.09.2026). */
  position: absolute; inset: 0 0 0 auto; width: min(50.9%, 59rem); height: 100%;
  object-fit: cover; object-position: center top; border-radius: 0; z-index: 1;
}

@media (max-width: 1100px) {
  #women { overflow: visible; min-height: 0; }
  #women .kadin-sol { max-width: none; }
  #women .kadin-foto { position: static; width: 100%; height: auto; margin-top: var(--s-6); border-radius: var(--r-lg); }
}

/* "View More Results" halkasi fotografta baskili; HTML kopyasi sol kolonda
   ikinci kez goruniyordu. Kopya kaldirildi, baskilinin uzerine saydam
   baglanti konuldu (alan tiklanabilir kalsin). */
#women .kadin-daha-ust {
  position: absolute; left: 49.1%; top: 73.8%; width: 8%; height: 12.5%; z-index: 3;
}
#women .kadin-daha-ust:focus-visible { outline: 2px solid var(--gold-400); outline-offset: 3px; }
@media (max-width: 1100px) { #women .kadin-daha-ust { display: none; } }

/* ============================================================
   25. BOLUM (site-footer) — 25.png uzerinden (15.09.2026)
   Tasarimda el yazisi BASLIK BICIMINDE, daha iri ve altinda altin
   swash var; guven satiri 4 sutun, ayraclarla ve 2 satir metinle.
   Ortak blogunun ustunde "OUR PARTNER" basligi var.
   ============================================================ */
.footer-yazi {
  position: static; display: block; margin-top: var(--s-5);
  transform: rotate(-3deg); transform-origin: left center;
  font-size: 1.5rem; line-height: 1.35;
}
.footer-yazi .firca { margin-top: 0.25rem; }
.partner__baslik {
  margin: 0 0 var(--s-3); font-size: 0.75rem; letter-spacing: .12em;
  text-transform: uppercase; color: #8FB0D8; font-weight: 700;
}
.site-footer .footer-trust {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0; align-items: start;
}
.site-footer .footer-trust > div {
  display: flex; gap: 0.875rem; align-items: flex-start;
  padding: var(--s-5) var(--s-5) var(--s-5) 0;
  border-right: 1px solid rgba(146, 185, 236, .16);
}
.site-footer .footer-trust > div:last-child { border-right: 0; }
.site-footer .footer-trust > div + div { padding-left: var(--s-5); }
.site-footer .footer-trust svg { width: 1.75rem; height: 1.75rem; flex: none; color: #9FC2EE; }
.site-footer .footer-trust b { display: block; font-size: 0.9375rem; color: #fff; }
.site-footer .footer-trust p { margin: 0.25rem 0 0; font-size: 0.8125rem; line-height: 1.45; color: #A9C0E0; }
/* Esik 900 -> 1100: 1024px'te serit hala DORT kolondu ve "English & Turkish,
   before, during and after" satiri 8px tasiyordu (olculdu 15.09.2026). */
@media (max-width: 1100px) {
  .site-footer .footer-trust { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .site-footer .footer-trust > div { border-right: 0; padding-left: 0 !important; }
  .footer-trust b, .site-footer .footer-trust b { white-space: normal; }
}
/* TELEFONDA TEK KOLON (olculdu 15.09.2026, Hamza: "mobile de bak").
   Serit 900px'te iki kolona iniyor ama telefonda ORADA KALIYORDU: 390px'te
   kolonlar 184px, icerideki esnek kutu sigmayinca metin sagdan 23px tasiyordu
   (16px kok ile olculdu). `overflow-wrap:anywhere` yamasi kelimeyi kiriyor
   ama tasmayi bitirmiyor; dogru cozum tek kolon. `b { white-space: nowrap }`
   de burada kaldirilir: "International support" tek parca 156px istiyordu. */
@media (max-width: 560px) {
  .site-footer .footer-trust { grid-template-columns: minmax(0, 1fr); }
  .site-footer .footer-trust > div { padding-block: var(--s-4); }
  .footer-trust b, .site-footer .footer-trust b { white-space: normal; }
}

/* Tasarimda sol kolon icerigi 628'de biter, kitap 617'de baslar: ozellik
   satirinin kitabin altina girmemesi icin kolon genisligi sinirlanir. */
#ebook .magnet > div:first-of-type { max-width: 34.25rem; }

/* 375px'te belge 379'a tasiyordu: iki dar blok kirilamiyordu (olculdu 15.09.2026).
   "Reply within 24 hours" tek parca sar, altbilgi guven metni tasiyordu. */
/* Esik 420 -> 700: 540px'te "Reply within 24 hours" seridi 11px tasiyordu
   (olculdu 15.09.2026, 16px kok ile). */
@media (max-width: 700px) {
  .afro-metin .mini-facts > span { min-width: 0; flex-wrap: wrap; }
}
@media (max-width: 420px) {
  .site-footer .footer-trust p,
  .site-footer .footer-trust b { overflow-wrap: anywhere; }
  .site-footer .footer-trust > div { min-width: 0; }
}

/* Tasarimda kart zemini duz beyaz DEGIL: sola dogru acik maviye doner
   (olculdu: sol (233,243,253), sag (251,253,254)). Duz beyazda kitap
   gorselinin kendi mavi zemini dikdortgen olarak goruluyordu. */
#ebook .card { background: linear-gradient(105deg, #E9F3FD 0%, #F3F9FE 46%, #FBFDFE 100%); }

/* Yorum karti kafa fotografinin uzerine biniyor: tasarimda da oyle ama kart
   OPAK. Yari saydam birakinca altindaki yuz metnin arasindan geciyordu. */
#calculator .hesap-alinti { background: rgba(8, 26, 52, .97); backdrop-filter: blur(0.375rem); position: relative; z-index: 3; }

/* Destek kartinda fotograf ile koyu govde arasinda SERT bir kesik vardi;
   tasarimda gecis yumusak. Govdenin ustune kisa bir gradyan konur. */
.wa-panel--foto .wa-panel__govde { position: relative; }
.wa-panel--foto .wa-panel__govde::before {
  content: ""; position: absolute; left: 0; right: 0; top: -3.25rem; height: 3.25rem;
  background: linear-gradient(to bottom, rgba(10, 46, 94, 0), rgba(10, 46, 94, .92) 72%, #0A2E5E);
  pointer-events: none;
}

/* ============================================================
   MUTLAK BLOKLARIN REFERANSI: BOLUM DEGIL KAPSAYICI (15.09.2026)
   Olculdu: 2530px viewport'ta kitap/panel gorselleri %'yle buyumeye
   devam ederken rem olculer 16px'te takili kaliyor ve blok karttan
   tasiyordu. `.container` rem tabanli max-width ile 1855'te DONAR;
   referansi ona baglayinca kompozisyon da donar. 1855'te kapsayici
   kutusu 0..1855 oldugu icin mevcut yuzdeler AYNEN gecerli kalir.
   Ayrica kapsayici tam olarak 1855'te sabitlenir (tasarim genisligi).
   ============================================================ */
.container { max-width: min(calc(var(--container) + 2 * var(--sayfa-bosluk)), 1855px); }
#istanbul > .container,
#compare > .container,
#ecosystem > .container { position: relative; }

/* ============================================================
   13. BOLUM (#faq) — 13.png (1536x911, olcek 1.2077)
   1855 olcekte: fotograf x 655-1855 / y 0-457 => bolumun SAG UST
   kosesine dayali TAM TASMA. Baslik+lead solda ustte. Arama cubugu
   fotografin ALTINDA ve ~1100px genis (tam genislik DEGIL).
   Hap satiri y 456-516, kolonlar y 544-1070, bolum 1100.
   Tasarimda OLMAYAN "Popular searches" karti, "Read all questions"
   dugmesi ve alt olgu seridi KALDIRILDI.
   ============================================================ */
#faq { position: relative; overflow: hidden; padding-top: 0; }
#faq > .container { position: relative; }
#faq .faq-ust { display: block; min-height: 21rem; }
#faq .faq-ust > div:first-child { position: relative; z-index: 2; max-width: 38rem; padding-top: 3.375rem; }
/* Tasarimda fotograf x 655-1855 / y 0-457 (1855 olcekte): sag ust koseye
   dayali tam tasma. MOCKUP KESITI KULLANILMADI - o kesit tasarimin kendi
   lead metnini ve alinti kartini tasiyordu (olculdu 15.09.2026). */
#faq .faq-ust__gorsel {
  position: absolute; top: 0; right: 0; width: 64.7%; z-index: 1;
}
#faq .faq-ust__gorsel > img {
  width: 100%; height: 24.625rem; object-fit: cover; object-position: center 30%;
  border-radius: 0; display: block;
}
#faq .faq-ust__yazi { left: 8%; top: 16%; right: auto; width: 13rem; font-size: 1.4375rem; z-index: 3; }
#faq .faq-arac { position: relative; z-index: 2; margin-top: 0; }
#faq .faq-search { max-width: 68.75rem; }

@media (max-width: 1100px) {
  #faq { overflow: visible; padding-top: var(--s-8); }
  #faq .faq-ust { min-height: 0; }
  #faq .faq-ust > div:first-child { max-width: none; padding-top: 0; }
  #faq .faq-ust__gorsel { position: static; width: auto; margin-top: var(--s-6); }
  #faq .faq-ust__gorsel > img { height: auto; aspect-ratio: 16/10; border-radius: var(--r-lg); }
  #faq .faq-search { max-width: none; }
}

/* Fotografin sol kenari tasarimda beyaza yumusak baglanir; sert dikey cizgi
   birakmamali. Ayrica tasarimda kadraj daha genis (yuz kareyi doldurmuyor)
   ve alinti karti SAG USTTE duruyor. */
.faq-ust__perde {
  position: absolute; inset: 0 auto 0 0; width: 17%; z-index: 2; pointer-events: none;
  background: linear-gradient(to right, #fff 0%, rgba(255,255,255,.62) 46%, rgba(255,255,255,0) 100%);
}

/* Tasarimda alinti karti x 1540-1810 / y 130-280 (1855 olcekte). */
#faq .faq-alinti {
  position: absolute; left: auto; right: 2.4%; top: 8.125rem; bottom: auto;
  width: 14.6%; z-index: 3; margin: 0;
}
/* "Find your answer faster" — tasarimda arama cubugunun sag altinda. */
#faq .faq-ok {
  font-size: 1.25rem;
  position: absolute; left: 65.5%; top: 25.75rem; right: auto; bottom: auto; z-index: 3;
  font-size: 1.125rem; line-height: 1.3; color: var(--navy-800); transform: rotate(-4deg);
}
@media (max-width: 1100px) {
  .faq-ust__perde { display: none; }
  #faq .faq-alinti { position: static; width: auto; margin-top: var(--s-4); }
  #faq .faq-ok { display: none; }
}

/* ============================================================
   09. BOLUM (#packages) — 09.png olculdu (15.09.2026)
   Baslik tasarimda TEK SATIR, murekkep eni 1100 -> 52px (bizde 70px
   idi ve iki satira kiriliyordu).
   "Most chosen" seridi tasarimda kartin UST KENARINA BINER; akista
   durunca o kartin gorselini 40px asagi itiyor ve dort kartin
   gorselleri hizadan cikiyordu (olculdu).
   ============================================================ */
#packages .h2 { font-size: 3.25rem; line-height: 1.12; }
#packages .pkg--featured { position: relative; }
#packages .pkg__serit {
  position: absolute; left: 0; right: 0; top: 0; z-index: 3;
  border-radius: var(--r-lg) var(--r-lg) 0 0; margin: 0;
}

/* ============================================================
   12. BOLUM (#help) — 12.png olculdu (15.09.2026)
   Tasarimda kart yuksekligi ~500px ve kart gorseli ~196px; bizde
   374/140 idi, bolum 230px kisa kaliyordu. Alt WhatsApp bandi da
   tasarimda ~286px (bizde 230).
   ============================================================ */

#help .channel__gorsel { height: 12.25rem; object-fit: cover; }
#help .channel h3 { font-size: 1.1875rem; line-height: 1.25; }
#help .wa-bant { min-height: 17.875rem; }
#help .wa-bant b { font-size: 1.75rem; }
@media (max-width: 1100px) {
  #help .channel { min-height: 0; }
  #help .wa-bant { min-height: 0; }
}

/* ============================================================
   01. BOLUM (.hero) — 01.png olculdu (15.09.2026)
   Tasarimda guven seridindeki UC rozet birbirine yakin boyda;
   bizde "Health Türkiye" belirgin kucuktu. Bolum de 157px kisaydi.
   ============================================================ */
.hero-guven__logo img { height: 2.75rem; width: auto; object-fit: contain; }
.hero-guven__logo img[alt*="Health"] { height: 2.5rem; }
.hero { min-height: 53rem; }
@media (max-width: 1100px) { .hero { min-height: 0; } }

/* ============================================================
   11. BOLUM (#reviews) — 11.png olculdu (15.09.2026)
   El yazisi tasarimda metin ile yorum kartlari ARASINDA duruyor;
   bizde sag kenari ilk kartin altina giriyor ve "choose us"
   kirpilmis gorunuyordu (olculdu: yazi 809-1004, kart 939'da basliyor).
   Ayrica tasarimdaki puan kartlari kaldirildigi icin (dogrulanamayan
   iddia) solda bosluk kalmisti: olgu seridi yukari alinir.
   ============================================================ */
#reviews .yorum-yazi { right: 52%; top: 6.5rem; width: 10.625rem; font-size: 1.25rem; }
#reviews .yorum-olgu { margin-top: var(--s-6); }
/* Tasarimda kart yuksekligi ~190px; bizde 221 idi ve bolum 233px uzuyordu. */
#reviews .yorum-kart { padding: 0; min-height: 11.875rem; }
#reviews .yorum-kart__video { height: 11.875rem; }
@media (max-width: 1100px) { #reviews .yorum-yazi { position: static; width: auto; text-align: left; } }

/* Puan kartlari kaldirilinca (dogrulanamayan iddia) solda genis bir bosluk
   kaliyordu: olgu seridi 2x2 izgaraya ve daha iri puntoya alinir. */
#reviews .yorum-olgu { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); max-width: 34rem; }
#reviews .yorum-olgu > div { padding: var(--s-5) var(--s-4); }
#reviews .yorum-olgu span b { font-size: 1.125rem; }
#reviews .yorum-olgu span { font-size: 0.8125rem; }

/* 10. bolum: tasarimda video kartlari ve alt bant daha iri (bolum 1237). */
/* Tasarim 10: kart 448x279 (oran 1,61). Bizde 1,95 idi ve 16:9 kapak
   yanlardan kirpiliyordu. */
#videos .video-card img { height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
#videos .wa-bant { min-height: 15.625rem; }

/* 14. bolum: tasarimda kartlar daha uzun (bolum 1237). */
#blog .post__gorsel img { height: 18.75rem; object-fit: cover; }
@media (max-width: 1100px) {
  #reviews .yorum-olgu { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: none; }
  #videos .wa-bant { min-height: 0; }
  #videos .video-card { min-height: 0; }
  #videos .video-card img { height: auto; }
  #blog .post { min-height: 0; }
  #blog .post__gorsel img { height: auto; }
}


/* 02. bolum kart 4: `.sac-secim { max-height: 4.0625rem }` sert bir tavandi;
   1280px'te kok rem kuculunce icerik tavana sigmayip TASIYOR ve kucuk
   resimler "Upload your photos" kutusunun ve butonun uzerine biniyordu
   (olculdu 15.09.2026, 1280px). Tavan yerine GORSEL boyutu sinirlanir. */
.sac-secim { max-height: none; }
.sac-tipi img { max-height: 3.125rem; }
.sac-tipi span { font-size: 0.5625rem; }

/* ===========================================================================
   MOBIL DOKUNMA HEDEFLERI  (olculdu 15.09.2026, tools/mobil_denetim.py)
   Hamza: "mobile de bak". 390px'te olculen kusurlar ve gerekcesi:
     input[type=range]  16px  -> kaydirici parmakla tutulamiyor (WCAG 2.5.8
                                 taban 24px'in ALTINDA) + kapsayicisindan 2px tasiyor
     nav.hz-yol > a     21px  -> kirinti baglantilari 24px'in altinda
     .araci-bant__link  22px  -> 24px'in altinda
     .brand             28px  -> logo baglantisi
     .nav-toggle        36px  -> menu dugmesi
     .social > a        36px  -> sosyal ikonlar
     .koord-kanal__link 39px  -> "Chat now" / telefon
   Alt bilgi bag listelerindeki 24px'lik baglantilar WCAG 2.5.8 (AA) esigini
   KARSILIYOR ve aralarinda bosluk var; liste yogunlugunu bozmamak icin
   buyutulmedi.
   =========================================================================== */
@media (max-width: 1100px) {
  .brand { display: inline-flex; align-items: center; min-height: 44px; }
  .nav-toggle { min-height: 44px; }
  .social a { width: 44px; height: 44px; }
  .koord-kanal__link { min-height: 44px; display: inline-flex; align-items: center; }
  .araci-bant__link { min-height: 44px; }
  .hz-yol a { display: inline-flex; align-items: center; min-height: 24px; padding-block: 2px; }

  /* Kaydirici: iz ince kalsin ama DOKUNMA alani buyusun. `height` yerine
     dolgu kullanilir; zemin saydam, gorunum degismez. */
  .hesap-olcek input[type="range"] {
    height: 44px; padding: 0; margin: 0; background: transparent; box-sizing: border-box;
    width: 100%; max-width: 100%;
  }
  /* Bulten basligi 11px kaliyordu: mobilde 12px taban. */
  .newsletter .ai-card__label { font-size: 12px; }
}

/* ===========================================================================
   MOBILDE OKUNABILIR TABAN: 12px  (olculdu 15.09.2026)
   Kok olcek mobilde 16px'e sabitlenince rem'e bagli KUCUK ETIKETLER hala
   9-11,5px kaliyordu: `.sonuc__etiket` 9,5 · `label > span` 9,0 ·
   `.yorum-kart__*` 10,0 · `.pkg__etiket` 10,5 · `figcaption` 10,5 ·
   `.badge` 11,0 · `.video-card__sure` 11,0 · `.abd-karo > span` 11,5.
   Telefonda 9px okunmaz; etiket/rozet sinifi 12px tabana cekilir. Masaustu
   gorunumu DEGISMEZ (kural yalniz 1100px altinda).
   =========================================================================== */
@media (max-width: 1100px) {
  .sonuc__etiket, .pkg__etiket, .badge, .video-card__sure, .wa-bant__etiket,
  .yorum-kart__once, .yorum-kart__sonra, .yorum-kart__sure,
  .bolge-kare__ad span, .bolge-kare__ad span b,
  .sac-secim__etiket, .eko-serit__dugme span, .abd-karo > span,
  figcaption, figcaption span, figcaption b,
  .hesap-sonuc p, .hesap-olcek__etiket span, .hesap-olcek__etiket span b,
  label > span { font-size: 12px; line-height: 1.45; }
}
/* Yukaridaki taban bu dortlude KAYBEDIYORDU (kendi kurallari daha ozgul):
   sac tipi etiketi 9px, afro yakin plan alt yazisi 10,5px, ABD karosu 11,5px,
   kadin sonuc etiketi 11px (olculdu 15.09.2026). Ozgulluk esitlenir. */
@media (max-width: 1100px) {
  .sac-tipi label span,
  .afro-yakin figure figcaption,
  .abd-izgara .abd-karo > span:last-child,
  #usa .abd-karo span:last-child,
  .kadin-sonuc__kare figcaption span { font-size: 12px; line-height: 1.45; }
}
/* Ana sayfada 24px altinda kalan dort dokunma hedefi (olculdu 15.09.2026):
   onay kutusu 17px · "Learn more" 23px · SSS arama alani 21px ·
   "View Full Travel Guide" 22px. WCAG 2.5.8 (AA) tabani 24px. */
@media (max-width: 1100px) {
  .hero-form__alan label.onay input[type="checkbox"] { width: 24px; height: 24px; }
  .taya-alt__link, .sehir-rota__link { display: inline-flex; align-items: center; min-height: 44px; }
  .faq-search input { min-height: 44px; }
}

/* ===========================================================================
   PLANLAYICI BOLUMU MOBILDE EZILIYORDU (olculdu 15.09.2026, 390px).
   `#selfcheck .planner { margin-left: 13.875rem }` masaustunde sol seridi
   fotograf/el yazisi icin bos birakiyor; MOBILDE SIFIRLANMIYORDU. Kok olcek
   16px'e cikinca bu bosluk 222px'e ulasti ve 390px'lik ekranda izgaraya
   yalniz 266px kaldi: "Am I a candidate?" basligi kartin disina tasti,
   WhatsApp panelinin metni 52px kirpildi, arac karti ikonu disari cikti.
   Tek sutuna dusen genislikte serit zaten gereksiz.
   Ayrica `.wa-panel__govde` izgarasinin ortuk sutunu icerige gore 296px'e
   buyuyordu (izgara ogesinin `min-width:auto` varsayilani) — sutun kilitlenir.
   =========================================================================== */
@media (max-width: 900px) {
  #selfcheck .planner { margin-left: 0; }
}
.wa-panel__govde { grid-template-columns: minmax(0, 1fr); }

/* Kart 4'te sec-satiri ile buton arasinda 4px kalmisti (denetim: bosluksuz blok). */
#plan .arac .sac-secim { margin-bottom: 0.75rem; }

/* ===========================================================================
   TAYA SERIDI MOBILDE OKUNAMIYORDU (olculdu 15.09.2026, 390px).
   `.taya { padding-right: 14.875rem }` masaustunde sagdaki sehir fotografina
   (`.taya__sehir`, mutlak, 13.625rem) yer aciyor; MOBILDE SIFIRLANMIYORDU.
   16px kokte bu 238px'e cikti ve 390px'lik ekranda metne 82px kaldi:
   kelimeler ortadan bolunuyor ("comforta/ble"), dort guven ogesi ust uste
   biniyordu. Telefonda dekoratif fotograf ve el yazisi gizlenir, dolgu
   normale doner.
   =========================================================================== */
@media (max-width: 700px) {
  .taya { padding-right: var(--s-5); }
  .taya__sehir, .taya__yazi { display: none; }
  .taya__olgu > span { min-width: 0; }
}

/* ===========================================================================
   ARAC KARTLARINDAKI SERBEST YERLESIM MOBILDE METNIN USTUNE BINIYORDU
   (olculdu 15.09.2026, 390px). `.fiyat-etiket` mutlak konumlu
   (right:1.125rem; top:11rem; width:12.25rem) ve `.arac__kolaj` pasaport
   fotografi karttan tasiyor. Masaustunde tasarimin serbest kompozisyonu bu;
   telefonda kart tek sutun oldugu icin ikisi de govde metnini ortuyor:
   "See your estimated price in USD and what's included." ve "Transparent"
   satirlari fiyat kartinin altinda kaliyordu.
   Telefonda fiyat karti AKISA girer (metnin altinda, dondurulmeden),
   dekoratif kolaj gizlenir.
   =========================================================================== */
/* Esik 700 -> 900: 768px'te fiyat karti hala govde metninin ustundeydi. */
@media (max-width: 900px) {
  .arac .fiyat-etiket {
    position: static; width: auto; transform: none; margin-top: var(--s-4);
    align-self: flex-start;
  }
  .arac__kolaj { display: none; }

  /* HAMZA 16.09.2026: "bu arka plandaki resmi mobilde kaldir, from 2550
     yazan bolumu de uste al". Kolaj yukarida zaten gizli; fiyat cipi flex
     `order` ile rozet satirinin hemen altina aliniyor (DOM sirasi bozulmaz,
     masaustu kompozisyonu etkilenmez). */
  .arac--krem .arac__ust { order: -2; }
  .arac--krem .fiyat-etiket { order: -1; width: 100%; margin: 0 0 var(--s-2); }
  .arac--krem .fiyat-etiket b { font-size: 1.5rem; }
  .arac--krem .h3, .arac--krem > p, .arac--krem .arac__onay { max-width: 100%; }
}

/* ===========================================================================
   MASAUSTU KOMPOZISYON PAYLARI MOBILDE SIFIRLANMIYORDU (olculdu 15.09.2026).
   Tasarimda bolumlerin bir yani fotograf/el yazisi icin bos birakiliyor; bu
   paylar KIMLIK secicisiyle yazildigi icin (`#selfcheck > .container`,
   `#ecosystem .eko-plan`) ya da sonradan tekrar tanimlandigi icin
   (`.afro-metin { padding-right: 8.25rem }`, 2710. satir) mevcut mobil
   sifirlamalari EZIYORDU. 390px'te olculen sonuc: planlayici kolonuna 266px,
   ekosistem listesine 77px kaliyor; ikon kutusu ve liste maddeleri kartin
   disina tasiyordu. Ayni ozgullukte sifirlanir.
   =========================================================================== */
@media (max-width: 900px) {
  #selfcheck > .container { padding-inline: var(--s-4); }
  #ecosystem .eko-plan { width: auto; }
  .afro-duzen .afro-metin { padding-right: 0; }
  /* el yazisi suslemesi karttan tasiyor, telefonda gerek yok */
  .card > .script { display: none; }
}
/* Kalan uc kalinti (olculdu 15.09.2026, 390px):
   (1) `#afro .afro-metin .btn--gold { white-space: nowrap }` (4802) mobil
       `.btn { white-space: normal }` kuralini eziyor; 358px'lik dugmede yazi
       sigmayinca ok ikonu dugmenin DISINA (380-398px) dusuyordu.
   (2) `.eko-sutun` genisligi kimlik secicisiyle yuzde veriliyor; 390px'te
       86px'e dusup icerigi 58px tasiriyordu.
   (3) Gizlilik baglantisi `display:block` oldugu icin satir-ici istisnaya
       girmiyor; dokunma yuksekligi 20px kaliyordu (WCAG 2.5.8 taban 24). */
@media (max-width: 900px) {
  #afro .afro-metin .btn--gold { white-space: normal; }
  #ecosystem .eko-sutun, .eko-panel__sahne .eko-sutun { width: auto; }
  label.onay a { display: inline; min-height: 24px; }
}
/* 360px'te kalan iki kalinti (olculdu 15.09.2026):
   `.afro-alinti { max-width: 380px }` 360px'lik ekranda bolumden 8px tasiyor;
   arac karti basligindaki ikon kutusu 1px tasiyor (esnek satir sarmiyor). */
@media (max-width: 420px) {
  .afro-alinti { max-width: 100%; }
  .tool-card__head { flex-wrap: wrap; }
  .tool-card__head .icon-box { flex: none; }
}

/* ============================================================
   16. BOLUM etiketleri: OLCEK KILITLENDI (15.09.2026)
   Etiketler YUZDE ile konumlaniyordu ama REM ile boyutlaniyordu;
   panel kuculdukce (390px'te) etiketler kucultmeden yerinde kalip
   BIRBIRININ UZERINE biniyordu. Ustelik bu etiketler gorseldeki
   uydurma hasta sayilarini ORTMEK icin var - kaymalari yayina
   cikamayacak bir iddiayi gorunur yapar. Cozum: olculeri panelin
   GENISLIGINE bagla (container query), boylece her boyda birebir
   ayni oranda kalirlar.
   ============================================================ */
#ecosystem .eko-panel__sahne { container-type: inline-size; }
#ecosystem .eko-etiket {
  min-width: 16cqw; min-height: 4.45cqw; padding: 0 1.25cqw;
  font-size: 1.16cqw; gap: 0.45cqw; border-radius: 3cqw;
}
#ecosystem .eko-etiket .bayrak { width: 2.13cqw; height: 1.42cqw; }
#ecosystem .eko-etiket svg:not(.bayrak) { width: 1.6cqw; height: 1.6cqw; }

/* Ekip kartinda rol rozeti 1100px'te karta sigmayip kirpiliyordu. */
.kisi__rozet { max-width: calc(100% - 1.5rem); white-space: normal; line-height: 1.2; }
/* `.araci-bant__link` kenarligi: 2485. satirda mobil icin kaldiriliyor ama
   4372. satir onu geri veriyor ve SONRA geldigi icin kazaniyordu (olculdu
   15.09.2026: 390px'te hesaplanan border-left 1px). Band dar ekranda tek
   sutuna dustugu icin bagin solundaki dikey ayrac anlamsiz kaliyor. */
@media (max-width: 900px) {
  .araci-bant__link { border-left: 0; padding-left: 0; }
}

/* MOBIL: panel gorseli dekoratiftir ve uzerindeki katmanlar akisa gecince
   gorselde bulaniklastirilmis bos kutular kaliyordu. Kucuk ekranda gorseli
   ve etiketleri gizle; bilgi kartlari normal yigin olarak okunur kalsin. */
@media (max-width: 1100px) {
  #ecosystem .eko-panel__foto2,
  #ecosystem .eko-etiket { display: none; }
  #ecosystem .eko-panel__sahne { background: linear-gradient(165deg, #062A57, #041A3C); padding: var(--s-5); }
  #ecosystem .eko-plan,
  #ecosystem .eko-sutun { position: static; width: auto; min-height: 0; margin-top: var(--s-4); }
}

/* ===========================================================================
   ONAY SATIRI: `label.onay { display:flex; gap:12px }` metni, baglantiyi ve
   sondaki NOKTAYI AYRI esnek oge yapiyordu; sonuc her genislikte
   "Privacy Policy  ." seklinde kopuk goruluyordu (olculdu 15.09.2026,
   1440px ve 390px). Metin akisa doner, kutu mutlak konumla hizalanir.
   =========================================================================== */
.hero-form label.onay, form label.onay {
  display: block; position: relative; padding-left: 2.25rem; line-height: 1.5;
}
.hero-form label.onay > input[type="checkbox"], form label.onay > input[type="checkbox"] {
  position: absolute; left: 0; top: 0.125rem; margin: 0;
}

/* 390px: 02. bolum kartinin butonu karttan 52px tasip kirpiliyordu
   (kartta sabit yukseklik vardi). Mobilde kart icerigi kadar uzasin. */
@media (max-width: 700px) {
  #plan .arac { height: auto; min-height: 0; overflow: visible; }
  #plan .arac > .btn { margin-top: var(--s-4); }
  #plan .arac__kolaj { display: none; }
}

/* ===========================================================================
   FORM BOLUMUNDEKI FOTOGRAF KANAL METNINI ORTUYORDU (olculdu 15.09.2026).
   Taban `.koord-foto` kuralinda sol kenari saydamlastiran bir maske var;
   `#free-analysis .koord-foto` onu yeniden tanimlarken maskeyi DUSURUYOR.
   Fotograf o yuzden sol kenarindan itibaren tamamen opak ve "Front, top and
   both sides, reviewed by the medical team." gibi satirlarin sag yarisi
   altinda kaliyordu. Olculen ortusme: 1920px'te 141px, 1600'de 121,
   1440'ta 110, 1280'de 98. Maske geri verilir: metnin bittigi bolge saydam,
   fotografin govdesi tam opak kalir.
   =========================================================================== */
@media (min-width: 1101px) {
  #free-analysis .koord-foto {
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, transparent 22%, #000 42%, #000 100%);
            mask-image: linear-gradient(90deg, transparent 0%, transparent 22%, #000 42%, #000 100%);
  }
}

/* ===========================================================================
   1101-1200px BANDI: `#free-analysis` iki kolonlu masaustu duzenini koruyor
   ama kap daraldigi icin form tam genislige yayilip MUTLAK konumlu fotografin
   altina giriyordu (olculdu 15.09.2026, 1180px: fotograf 913-1180, karakter
   sayaci 1096-1138 onun altinda; el yazisi da basligin uzerine biniyordu).
   1100px altindaki akis duzeni bu banda da uygulanir.
   =========================================================================== */
@media (min-width: 1101px) and (max-width: 1200px) {
  #free-analysis { min-height: 0; overflow: visible; }
  #free-analysis .koord-duzen { grid-template-columns: minmax(0, 1fr); }
  #free-analysis .koord-foto {
    position: static; width: 100%; height: auto; border-radius: var(--r-lg);
    -webkit-mask-image: none; mask-image: none;
  }
  #free-analysis .koord-rozet { position: static; width: auto; }
  #free-analysis .koord-yazi { display: none; }
  #free-analysis .koord-kanal { max-width: none; }
}

/* Sabit WhatsApp dugmesi mobilde alt bilgideki son baglantiyi ("Sitemap")
   ORTUYORDU (olculdu 15.09.2026, 390px). Yasal bag satirina dugme yuksekligi
   kadar alt bosluk verilir. */
@media (max-width: 900px) {
  .footer-bottom__yasal { padding-bottom: 4.5rem; }
}
/* Onay satiri tek satira indi (21px); dokunma alani kutunun kendisi kadar
   (24px) olsun diye satira taban yukseklik verilir. */
.hero-form label.onay, form label.onay { min-height: 1.5rem; }
/* Kalan masaustu kalintilari (olculdu 15.09.2026):
   `.koord-kanal__saat` 4,49:1 (WCAG AA tabani 4,5) — bir ton koyu.
   Kahraman formundaki dugme onceki ogeye 7px yapisiyordu (rem tabanli
   bosluk dar kokte kuculuyor); taban 8px. */
.koord-kanal__saat { color: var(--muted); }
.hero-form__alan { gap: max(var(--s-3), 8px); }
/* Arac kartindaki olgu seridi tek satira sigmayinca "Reviewed by our team"
   kartin sag kenarinda KIRPILIYORDU (olculdu 15.09.2026, 1100px). Serit sarar. */
.planner .mini-facts, .arac .mini-facts { flex-wrap: wrap; min-width: 0; }
/* Video katmani baglantisi (`.rehber-sag__izle`) dokunma hedefi olarak cok
   kucuktu (Lighthouse [target-size], olculdu 15.09.2026 canli PSI). Katman
   gorsel degisikligi yapmadan en az 44x44 olur. */
.rehber-sag__izle { min-width: 44px; min-height: 44px; display: block; }
@media (max-width: 1100px) { #guides .rehber-sag__izle { display: none; } }

/* ===========================================================================
   MOBILDE HERO MASAUSTU GORSELINI YUKLUYORDU (olculdu 15.09.2026, canli PSI).
   4176. satirdaki `.hero::after` kurali medya sorgusu OLMADAN masaustu
   fotografini veriyor ve 1158. satirdaki mobil/masaustu ayrimini eziyor.
   Sonuc telde olculdu (412px): HEM `ist-hero-m` (ön yüklenen, KULLANILMAYAN)
   HEM `ist-hero` (gercekten kullanilan) iniyordu; LCP 4,2 sn, LCP skoru 45.
   Telefonda yalnizca mobil surum kullanilir — ön yukleme de o yuzden dogru
   dosyaya isaret etmis olur.
   =========================================================================== */
@media (max-width: 900px) {
  .hero::after { background-image: url("../img/hair-transplant-in-istanbul-hero-mobile.eb32c577.webp"); }
}

/* ============================================================
   MOBIL DUZELTMELER — 390px gozle taranarak bulundu (15.09.2026)
   ============================================================ */

/* (1) KACAN MUTLAK KATMAN. `.sehir-foto` mobilde `position: static`
   yapilinca onun `::before` koyu gradyani EN YAKIN KONUMLU ATAYA
   (kapsayici) gore konumlanip TUM BOLUME yayildi; baslik ve lead
   okunmaz hale geldi. Ebeveyn akista kalsa bile KONUMLU olmali.
   Kural: bir ogeyi static yaparken ::before/::after ve mutlak
   cocuklari nereye tutunacak diye kontrol et. */
@media (max-width: 1100px) {
  /* `relative` yapinca masaustundeki `right: -4.1875rem` de etkili olur
     ve blok 67px saga kayip YATAY TASMA yaratir (1100px'te olculdu).
     Konumlu kalsin ama ofsetler sifirlansin. */
  #istanbul .sehir-foto { position: relative; inset: auto; width: auto; }
}

/* (2) Fiyat tablosu mobilde 549px genisligindeydi, sarmali 358px:
   191px tasiyordu. Sarmal yatay kaydirilabilir olur. */
#compare .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
#compare .cmp-table { min-width: 34rem; }

/* (3) Altbilgi guven satiri: `overflow-wrap: anywhere` kelimeleri
   ORTADAN boluyordu ("transparen / t", "Internationa / l support").
   Izgara zaten tek sutun; kirilmaya gerek yok. */
@media (max-width: 420px) {
  .site-footer .footer-trust p,
  .site-footer .footer-trust b { overflow-wrap: normal; word-break: normal; }
}
.site-footer .footer-trust b { white-space: normal; }

/* (4) "A different approach for Afro hair" basligi 358px kutuda 515px
   yer istiyordu (tek satira zorlaniyordu). Sarmasina izin ver. */
#afro .h3 { white-space: normal; overflow-wrap: break-word; }

/* `.footer-trust div { display:flex }` IC ice tum div'lere uyguluyordu; bu
   yuzden basliK ile aciklama YAN YANA diziliyor, dar ekranda baslik iki
   satira kirilip cirkin duruyordu. Ic sarmal blok olmali. */
.site-footer .footer-trust > div > div { display: block; }

/* Kurucu monogram karosu: `::after` radyal parlamasi `inset: auto ... -40%`
   + `height:70%` ile karonun ORTASINDA sert bir yatay cizgi birakiyordu
   (mobilde karo buyudugu icin bariz). Tum karoya yayilan yumusak parlama. */
.kisi__foto--monogram::after {
  inset: 0; height: auto;
  background: radial-gradient(72% 58% at 50% 118%, rgba(227, 190, 132, .18), transparent 72%);
}

/* Ekip bolumu ozet satiri: mobilde her oge AYRI SATIRA dusup tek tek
   ortalaniyor ve tirtikli duruyordu. Sola hizali blok olarak yigilir. */
@media (max-width: 700px) {
  .mini-facts--orta { justify-content: flex-start; max-width: 20rem; margin-inline: auto; }
  .mini-facts--orta > span { justify-content: flex-start; text-align: left; }
}

/* `#team .mini-facts { flex-wrap: nowrap; justify-content:center }` (1,1,0)
   benim sinif-secicimi eziyordu; mobilde ogeler tek tek ortalanip tirtikli
   duruyordu. Ayni ozgullukte mobil kural. */
@media (max-width: 700px) {
  #team .mini-facts {
    flex-wrap: wrap; justify-content: flex-start; gap: var(--s-3);
    max-width: 20.5rem; margin-inline: auto;
  }
  #team .mini-facts > span { white-space: normal; text-align: left; width: 100%; }
}

/* MOBIL: masaustu icin sabitlenen 52px baslik telefonda BES SATIRA
   kiriliyordu; akiskan olceye cevrildi. */
@media (max-width: 700px) {
  #packages .h2 { font-size: clamp(1.75rem, 7.6vw, 3.25rem); }
  #compare .sec-head .h2,
  #compare .kiyas-baslik { font-size: clamp(1.75rem, 7.6vw, 3.625rem); }
  #ebook .magnet__baslik { font-size: clamp(1.625rem, 7vw, 2.625rem); }
  #faq .faq-ust .h2 { font-size: clamp(1.75rem, 7.4vw, 3.25rem); }
}

/* MOBIL: ortalanmis "mini-facts" satirlari her ogeyi ayri ayri ortalayip
   tirtikli bir blok birakiyordu. Sola hizali tek sutun. */
@media (max-width: 700px) {
  .mini-facts--orta { flex-wrap: wrap; justify-content: flex-start;
    max-width: 20.5rem; margin-inline: auto; gap: var(--s-3); }
  .mini-facts--orta > span { width: 100%; justify-content: flex-start; text-align: left; }
}

/* MOBIL: `.mini-facts span { display:inline-flex }` ikon + <b> + aciklamayi
   TEK SATIRDA yan yana diziyor; dar ekranda etiket ve aciklama iki ayri
   sutuna kirilip sikisik goruluyordu. Etiket kendi satirina alinir. */
@media (max-width: 700px) {
  .mini-facts { flex-wrap: wrap; }
  .mini-facts > span { flex-wrap: wrap; align-items: flex-start; }
  /* Ikon + etiket ayni satirda, aciklama altinda. Aciklama artik kendi
     <span>'inde oldugu icin sadece %100 genislik vermek yetiyor. */
  .mini-facts--yuvarlak > span { align-items: center; }
  .mini-facts--yuvarlak > span > span { width: 100%; padding-left: 1.6875rem;
    font-size: 0.8125rem; color: var(--muted); }
  /* Tek satira sigmayan ogeler kirpilmasin, alt satira insin. */
  .mini-facts > span { white-space: normal; min-width: 0; }
}

/* ============================================================
   MOBIL KARE-KARE TARAMA DUZELTMELERI — 390px (15.09.2026)
   ============================================================ */

/* (1) Kart 4'te "My hair type:" etiketi ile 4 kucuk resim YAN YANA idi;
   her karo 51px kalip "Afro-textured" yazisi karodan tasiyordu. Etiketi
   ustte, karolari tam genislikte diz. */
@media (max-width: 700px) {
  #plan .sac-secim { display: block; }
  #plan .sac-secim__etiket { display: block; margin-bottom: 0.375rem; }
  #plan .sac-tipi { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  #plan .sac-tipi span { font-size: 0.625rem; }
}

/* (2) Avatar yigini ile yanindaki metin dipdibeydi; metin son avatara
   degiyordu. Bosluk acilir, metin iki satirda kalir. */
@media (max-width: 700px) {
  /* 334px'lik satirda avatarlar 129px aliyor, metne 189px kaliyor ve
     UC satira kiriliyordu. Mobilde avatarlar ust satira, metin alta. */
  .eko-yuzler { flex-wrap: wrap; gap: var(--s-3); }
  .eko-yuzler__link { width: 100%; line-height: 1.4; }
  .abd-eylem__kanit { flex-wrap: wrap; gap: var(--s-3); padding-left: 0; border-left: 0; }
  .abd-eylem__kanit > span { width: 100%; }
}

/* (3) Yorum bolumu olgu izgarasi 171px'lik iki sutundu; "Patients from
   100+ countries" UC satira kiriliyordu. Dar ekranda tek sutun. */
@media (max-width: 460px) {
  #reviews .yorum-olgu { grid-template-columns: minmax(0, 1fr); }
}

/* (4) Hastane ozet satirinda etiket ile aciklamanin sol kenarlari
   birbirini tutmuyordu; ikisi de ikonun sagindaki ayni hizada baslar. */
@media (max-width: 700px) {
  .mini-facts--yuvarlak > span > span { padding-left: 1.8125rem; }
}

/* (5) ABD fotografinin soluna masaustu kadraji icin aynalanmis gokyuzu
   seridi eklenmisti; mobilde fotograf tam genislikte akista durdugu icin
   o serit belirgin bir dikey bant olarak goruluyordu. Mobilde kirp. */
@media (max-width: 1100px) {
  /* Mobilde <picture> aynali seridi OLMAYAN kesiti verir; kadraj ayarina
     gerek kalmaz. (object-position ile kirpmak 648px'lik bir yukseklik
     gerektiriyordu - telefonda kabul edilemez.) */
  #usa .abd-sag__foto { height: auto; object-fit: fill; }
  #usa picture { display: block; }
}

/* <picture> sarmali eklendikten sonra fotograf kapsayicinin IC kutusundan
   basliyordu (58px asagi). Tasarimda bolumun ust kenarindan baslar ve alt
   kenarinda biter: ust dolgu kadar yukari cekilir, yukseklik bolum boyu. */
#usa .abd-sag__foto { top: -3.625rem; height: 58rem; object-fit: cover; object-position: center; }
@media (max-width: 1100px) {
  #usa .abd-sag__foto { top: auto; height: auto; object-fit: fill; }
}

/* Yorum karti kapagi artik videonun KENDI karesi (1280x720). Dar kutuda
   `cover` basligi soldan kesiyordu; kisi merkezde kalsin. */
#reviews .yorum-kart__video img { object-fit: cover; object-position: 62% center; }

/* Tasarim 08: ozet satiri TEK SIRA, ORTALI, dort KISA etiket
   (yuvarlak ikon + tek satir metin). Once iki parcali uzun etiketlerle
   tirtikli sarmalanip sola yigiliyordu. */
#hospitals .hastane-olgu {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 0.75rem 2.75rem; margin-top: var(--s-5);
}
#hospitals .hastane-olgu > span {
  display: inline-flex; align-items: center; gap: 0.625rem;
  font-size: 0.9375rem; color: var(--navy-800); white-space: nowrap;
}
#hospitals .hastane-olgu svg {
  width: 2.125rem; height: 2.125rem; padding: 0.5rem; flex: none;
  border-radius: var(--r-pill); background: #fff; color: var(--navy-800);
  box-shadow: inset 0 0 0 1px var(--line);
}
@media (max-width: 700px) {
  #hospitals .hastane-olgu { gap: 0.75rem 1.5rem; }
  #hospitals .hastane-olgu > span { font-size: 0.875rem; }
}

/* ============================================================
   23. BOLUM dikey ritmi (23.png, olcek 1.0457) — olculen tasarim:
   baslik y175, kartlar y390-660 (270px), buton y710-782, bolum 887.
   Bizde icerik 530'da bitiyordu ve altta 400px anlamsiz bosluk kaliyordu.
   ============================================================ */
#usa .sec-head { padding-top: 7.75rem; }
#usa .abd-karo { min-height: 16.875rem; }
#usa .abd-eylem { margin-top: 6.5rem; }
@media (max-width: 1100px) {
  #usa .sec-head { padding-top: 0; }
  #usa .abd-karo { min-height: 0; }
  #usa .abd-izgara { max-width: none; }
}

/* ============================================================
   15.09.2026 — GENIS EKRAN (>=1855) DUZELTMELERI
   Hamza'nin ekran goruntuleri 1920'de alindi; asagidakilerin hepsi
   o genislikte olculdu (bkz. scratchpad/cok.py).
   ============================================================ */

/* #usa: kart kutusu tasarimda 270px; metnimiz kisa oldugu icin altta
   bosluk kaliyordu -> icerik dikeyde ortalanir. */
#usa .abd-karo {
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 0.5rem;
}

/* #guides: panoramanin beyaz kamasi 03/06 numarali kartlarin sag kenarini
   kesiyordu. Kart kolonu kamanin solunda biter.
   DIKKAT: yalniz GENIS ekran. Medya sorgusu olmadan yazinca dar ekrandaki
   `max-width:none` sifirlamasini eziyor ve kartlar 202px'e sikisip
   "Protecting" gibi kelimeler ortadan bolunuyordu (olculdu 390px). */
@media (min-width: 1101px) { #guides .rehber-sol { max-width: 56.5%; } }

/* #compare: fotografin ARKASINDA kalan beyaz kart kosesi, gorselin sol
   kenarindan disari tasip ince bir serit birakiyordu. */
#compare .kiyas-foto { box-shadow: none; background: transparent; }
#compare .grid-fiyat > .card { position: relative; z-index: 2; }

/* #compare fotograf kutusu: tasarimda 543x506 (native 580x541). Bizde 492x448
   idi ve `cover` fotografi dikeyde kirpiyordu. */
#compare .kiyas-foto img { height: 31.625rem; }
/* Tasarim 18: alt guven seridi ikonlari CERCEVESIZ, iri ve lacivert.
   Bizdeki yuvarlak beyaz cerceve ikonu 6px'e dusuruyordu. */
#compare .kiyas-guven svg {
  width: 2.5rem; height: 2.5rem; padding: 0; border-radius: 0;
  background: none; box-shadow: none; color: var(--blue-600);
}

/* ============================================================
   WHATSAPP BANTLARI (3 yer: #videos, #reviews, #help) — 15.09.2026
   Hamza: "ustune atilmis bir resim gibi" / "kenari bozuk".
   Kok neden ölçüldü: telefon fotograflari tasarimdan bandin DISINI da
   kapsayacak sekilde kesilmisti (kose pikselleri acik), ayrica bandin
   tam yuksekligini kaplamiyordu -> uzerine yapistirilmis dikdortgen.
   Yeni kesimler bandin ICINDEN alindi; burada da kolon genislikleri
   tasarimdaki oranlara esitlenir ve fotograf kolonu TAMAMEN doldurur.
   ============================================================ */
.wa-bant__telefon, .yardim-bant__telefon {
  width: 100%; height: 100%; min-height: 0; object-fit: cover;
  object-position: left center; align-self: stretch; display: block;
}
/* 10.png: bant 1421, fotograf 310 (%21,8), eylem kolonu 408 (%28,7) */
#videos .wa-bant { grid-template-columns: 21.8% minmax(0, 1fr) 30%; }
/* 11.png: bant 1493, fotograf 345 (%23,1), eylem 345 (%23,1) */
#reviews .wa-bant { grid-template-columns: 23.1% minmax(0, 1fr) 23.5%; }
/* 12.png: bant 1359, fotograf 320 (%23,5), eylem 353 (%26) */
#help .yardim-bant { grid-template-columns: 23.5% minmax(0, 1fr) 26%; }
/* Ozellik satiri metin kolonunun tamamina yayilsin: tasarimda ucu esit
   arayla dagilmis; bizde sola yigilip ortada kocaman bosluk kaliyordu. */
#videos .wa-bant__olgu, #reviews .wa-bant__olgu { justify-content: space-between; max-width: 45rem; }
#help .yardim-bant__olgu { justify-content: space-between; max-width: 40rem; }

@media (max-width: 1100px) {
  #videos .wa-bant, #reviews .wa-bant, #help .yardim-bant { grid-template-columns: minmax(0, 1fr); }
  .wa-bant__telefon, .yardim-bant__telefon { height: auto; }
  #videos .wa-bant__olgu, #reviews .wa-bant__olgu, #help .yardim-bant__olgu { max-width: none; }
}

/* Bant gradyanlari tasarimdan OLCULDU (ust seritten ornekleme). Fotograf
   kesimi artik bandin kendi icinden geldigi icin, gradyan birebir ayni
   olmazsa kesim kenarinda ton farki cizgi gibi goruluyor. */
#videos .wa-bant { background: linear-gradient(90deg, #013536 0%, #013F3D 52%, #014E42 100%); }
#reviews .wa-bant--lacivert { background: linear-gradient(90deg, #002E52 0%, #043E74 52%, #003A62 100%); }
#help .yardim-bant { background: linear-gradient(90deg, #002455 0%, #002E64 45%, #00477D 100%); }
/* Eylem kolonu: not satiri tek satirda kalmali (tasarimda oyle). */
#reviews .wa-bant { grid-template-columns: 23.1% minmax(0, 1fr) 25.5%; }

/* ===========================================================================
   UC BANTTA DA TELEFON ARTIK SAYDAM (16.09.2026, Hamza: "mobilde buralar
   patliyor").
   Olculen kok neden: eski kesimde bandin gradyani GORSELIN ICINE gomuluydu.
   Gorsel bandin yalnizca sol %18'lik diliminden alinmisti; mobilde 358px'lik
   bandin USTUNE tam genislikte konunca altindaki gradyan 0->%100 kosuyor,
   gorseldeki dilim ise 0->%18 -> kenarda gorunur dikis. Ustelik kesimin sol
   ust kosesinde sayfa zemininden bir beyaz kama (#E7E9EB) kalmisti ve
   telefonun tepesi cerceve disinda kesiliyordu.
   Yeni varliklar tasarim dosyalarindan (10/11/12.png) arka plani AYRILARAK
   uretildi -- uretici: `tools/bant_telefon.py` (yeniden calistirilabilir).
   Uc bant da alfa kanalli telefon kullanir. Arti yok
   zemin -> hangi genislikte olursa olsun dikis olusamaz.
   `cover` yerine `contain`: doldurulacak zemin kalmadi, `cover` telefonu
   kirpardi.
   =========================================================================== */
#videos .wa-bant__telefon,
#reviews .wa-bant__telefon,
#help .yardim-bant__telefon {
  object-fit: contain; object-position: center;
  width: 100%; height: auto; max-height: 100%; align-self: center;
  filter: drop-shadow(0 0.75rem 1.5rem rgba(0, 12, 28, .45));
}
.wa-bant__not, .yardim-bant__not { white-space: nowrap; }
@media (max-width: 1100px) { .wa-bant__not, .yardim-bant__not { white-space: normal; } }

/* Yorum karti kapagi: kutu 250x190 (1,32) idi, kapak 16:9 (1,78) -> `cover`
   basligi SOLDAN kesiyordu (Hamza: "video kapak gorselleri kesik duruyor").
   Kolon 16:9'a esitlenir, kirpma sifirlanir. */
#reviews .yorum-kart { grid-template-columns: 21.125rem minmax(0, 1fr); }
#reviews .yorum-kart__video img { object-position: center; }
@media (max-width: 900px) { #reviews .yorum-kart { grid-template-columns: minmax(0, 1fr); } }

/* Blog kartinda kategori rozeti sol USTTE, yazinin kendi kapak grafigiyle
   cakisiyordu (logo/baslik orada). Hamza'nin istegi: sag ALT kose. */
#blog .post .badge { top: auto; bottom: var(--s-3); left: auto; right: var(--s-3); }

/* #istanbul: tasarimda (17.png) sol kolon icerigi y 634'te bitiyor ve
   1 gunluk plan basligi 734'te basliyor (100px bosluk). Bizde icerik
   480'de bitip baslik 770'te basliyordu -> solda 290px olu alan.
   Dikey ritim tasarima esitlenir. */
#istanbul .sehir-metin .lead { margin-top: var(--s-5); }
#istanbul .sehir-olgu { margin-top: 3.25rem; }
#istanbul .sehir-metin .hero__cta { margin-top: 3.25rem; }
@media (max-width: 1100px) {
  #istanbul .sehir-olgu, #istanbul .sehir-metin .hero__cta { margin-top: var(--s-6); }
}

/* #women sonuc karti: tasarimda (24.png) kare 373x170 ve KUNYE ALTINDA.
   Bizde kare 330 genislikte, kunye YANINDA kaliyor ve dar ekranda
   metin fotografa biniyordu (Hamza: "kadin alana sigmamis"). */
#women .kadin-sonuc { display: grid; grid-template-columns: minmax(0, 26.25rem); gap: var(--s-3); }
#women .kadin-sonuc__kare { width: 100%; }
#women .kadin-sonuc__kunye { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem; }

/* ============================================================
   SECIM ALANI (kendi listemiz) — isletim sisteminin listesi yerine.
   Yerlesik <select> gorunmez ama formda kalir (deger onunla gider).
   ============================================================ */
.secim { position: relative; flex: 1; min-width: 0; }
.secim__yerli {
  position: absolute; opacity: 0; pointer-events: none;
  width: 1px; height: 1px; padding: 0; border: 0; margin: -1px;
}
.secim__dugme {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-3); padding: 0; border: 0; background: none; cursor: pointer;
  font: inherit; color: var(--navy-900); text-align: left; line-height: 1.4;
}
.secim__dugme--bos { color: var(--muted); }
.secim__dugme::after {
  content: ""; flex: none; width: 0.5rem; height: 0.5rem; margin-right: 0.125rem;
  border-right: 2px solid var(--navy-600); border-bottom: 2px solid var(--navy-600);
  transform: translateY(-0.125rem) rotate(45deg); transition: transform .18s ease;
}
.secim.is-acik .secim__dugme::after { transform: translateY(0.125rem) rotate(-135deg); }
.secim__liste {
  position: absolute; left: -0.75rem; right: -0.75rem; top: calc(100% + 0.875rem);
  z-index: 40; margin: 0; padding: 0.375rem; list-style: none;
  max-height: 17rem; overflow-y: auto;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-md);
  box-shadow: 0 1.25rem 2.5rem rgba(5, 35, 73, .16);
}
.secim__oge {
  padding: 0.625rem 0.75rem; border-radius: var(--r-sm); cursor: pointer;
  font-size: 0.9375rem; color: var(--navy-800); line-height: 1.35;
}
.secim__oge:hover, .secim__oge.is-etkin { background: var(--blue-50, #EEF4FF); }
.secim__oge[aria-selected="true"] { color: var(--blue-600); font-weight: 600; }
.secim__oge[aria-selected="true"]::after {
  content: ""; float: right; width: 0.4375rem; height: 0.75rem; margin-top: 0.125rem;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
}

/* #compare fotografi 506px'e cikinca alt guven seridiyle cakisti
   (denetim: 10 genislikte "OGE CAKISMASI"). Tasarimda fotograf y 25-531,
   serit 543'te basliyor. Bizde kapsayici 74px asagidan basladigi icin
   fotograf yukari alinir ve boyu seride degmeyecek sekilde ayarlanir. */
#compare .kiyas-foto { top: 0; }
#compare .kiyas-foto img { height: 29.5rem; }

/* DAR EKRAN — bu blok dosyanin SONUNDA durmali: ayni ozgulluge sahip
   sonraki bir kural, medya sorgusu icinde olsa bile ONCEKINI ezer.
   (Bant kolon sablonlarini burada sifirliyoruz.) */
@media (max-width: 1100px) {
  #videos .wa-bant, #reviews .wa-bant, #reviews .wa-bant--lacivert,
  #help .yardim-bant { grid-template-columns: minmax(0, 1fr); }
  .wa-bant__telefon, .yardim-bant__telefon { height: auto; }
}

/* Not satirindaki kilit ikonu rem'e bagliydi; dar ekranda rem tabani
   9,4px'e dustugu icin ikon 7px'e inip bozuk bir karakter gibi
   goruluyordu. Sabit olcuye alinir. */
.wa-bant__not svg, .yardim-bant__not svg { width: 13px; height: 13px; flex: none; }

/* ============================================================
   16.09.2026 — Hamza'nin isaretledigi noktalar
   ============================================================ */

/* #faq: "Find your answer faster" el yazisi filtre dugmelerinin ustune
   biniyordu ("Safety" okunmuyordu). Arama cubugunun SAG ustune alinir. */
/* El yazisi: arama cubugunun ALTI, filtre dugmelerinin SAGINDAKI bos alan.
   (Once dugmelerin, sonra fotografin, sonra Search butonunun uzerine dusuyordu.) */
#faq .faq-ok { top: 25.25rem; left: 70%; width: 13rem; }
@media (max-width: 1400px) { #faq .faq-ok { display: none; } }

/* #guides: bolum yuksekligi panoramanin tam boyuna (1237px) sabitlenmisti;
   altta icerigi olmayan bir serit kaliyordu. Panorama alttan hafif kirpilir,
   "Watch Our Story" hapi tam icerde kalir. */
#guides { min-height: 71rem; }
@media (max-width: 1100px) { #guides { min-height: 0; } }

/* ============================================================
   DESTEK KARTI (#selfcheck · "Not sure? We're here to help.")
   Tasarim 03: fotograf KARTIN TAMAMINI kaplar, metin ve butonlar
   fotografin UZERINDE, alttan yukselen koyu gradyanla okunur hale gelir.
   Bizde fotograf ustte 193px'lik bir SERIT, govde onun ALTINDA ayri bir
   koyu blok ve aralarinda gorunur bir perde vardi (Hamza defalarca
   isaretledi). Yapi tasarimdakiyle ayni kurulur.
   ============================================================ */
.wa-panel--foto {
  position: relative; overflow: hidden; padding: 0;
  border-radius: 1.25rem; min-height: 30.9375rem;
  display: flex; flex-direction: column; justify-content: flex-end;
  background: #041A3A;
}
.wa-panel--foto > img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  aspect-ratio: auto; object-fit: cover; object-position: center top;
  display: block; z-index: 0;
}
.wa-panel--foto .wa-panel__govde {
  position: relative; z-index: 2; margin-top: 0;
  padding: 5.5rem 1.3125rem 1.3125rem;
  background: linear-gradient(180deg,
    rgba(4, 26, 58, 0) 0%, rgba(4, 26, 58, .55) 26%,
    rgba(4, 26, 58, .90) 55%, rgba(4, 26, 58, .97) 100%);
}
/* Eski sert-kesik perdesi artik gereksiz; yapiyi bozuyordu. */
.wa-panel--foto .wa-panel__govde::before { content: none; }

@media (max-width: 1100px) {
  .wa-panel--foto { min-height: 26rem; }
  .wa-panel--foto .wa-panel__govde { padding-top: 4rem; }
}

/* ============================================================
   BOLUM BASLIKLARINDA HIZA (16.09.2026 — Hamza: "dengesizlik
   hizasizlik var tum sitede").
   Olculdu: ortali `.sec-head` 1248px, icindeki `.lead` 992px ve
   `margin: 0` oldugu icin kutunun SOLUNA yapisiyordu -> baslik ile
   lead arasinda tam (1248-992)/2 = 128px kacik. Bes bolumde ayni
   kusur vardi (hospitals, packages, videos, help, blog).
   Sinifi kapatan kural: ortali baslik blogundaki her dar alt oge
   yatayda kendiliginden ortalanir.
   ============================================================ */
.sec-head:not(.sec-head--left) > .lead,
.sec-head:not(.sec-head--left) > p,
.sec-head:not(.sec-head--left) > .mini-facts,
.sec-head:not(.sec-head--left) > .serit-olgu { margin-inline: auto; }
/* Sola hizali baslik blogunda ise SOL KENARLAR cakisir. */
.sec-head--left > .lead, .sec-head--left > p { margin-inline: 0 auto; }

/* #guides: alttaki bos serit TAMAMEN kaldirildi (Hamza: "kes komple yok
   et"). Bolum, sol kolonun bittigi yerde biter; panorama alttan kirpilir.
   Gorseldeki baskili "Watch Our Story" hapi bu kirpmayla gorunmez oldugu
   icin uzerindeki saydam baglanti da HTML'den cikarildi (olu eleman
   birakilmaz) — ayni islev sol kolondaki butonda duruyor. */
#guides { min-height: 66rem; }
@media (max-width: 1100px) { #guides { min-height: 0; } }

/* ============================================================
   16.09.2026 — KENDI TARAMAMDA BULDUKLARIM (bolum bolum gorsel denetim)
   ============================================================ */

/* #blog: rozet sag alta tasininca koyu kapak gorselinin uzerine dustu ve
   soluk mavi zeminiyle okunmuyordu. Dolgun lacivert + beyaz metin. */
#blog .post .badge {
  background: var(--navy-800); color: #fff; box-shadow: 0 0.25rem 0.75rem rgba(0,0,0,.25);
}

/* #afro alinti karti: TASARIMDA DA (06.png) fotograf ciftinin sol alt
   kosesine biniyor — dogrusu bu. Akisa alma denemem karti bolumun
   disina tasirip kirpilmasina yol acti, GERI ALINDI. Tek degisiklik:
   kartta kisi adi yerine "Patient from the USA" (fotograftaki kisi o
   kisi degil; tasarimin kendi metni de baska yerlerde boyle).
*/

/* #guides: pasaport gorseli ust paragrafin uzerine biniyordu. */
#guides .rehber-pasaport { top: -1.5rem; }

/* #faq ust gorseli: kaynak KARE bir portre (1024x1024) ama 1200x394'luk
   bir bant olarak gosteriliyordu -> `cover` adamin alnini ve cenesini
   kesiyordu. Tasarimda (13.png) fotograf GENIS bir sahne ve adam sagda
   duruyor. Portre saga yaslanir, kalan bant fotografin kendi arka plan
   tonuyla devam eder; sol kenar zaten beyaza eriyor. */
#faq .faq-ust__gorsel {
  height: 24.625rem;
  background: linear-gradient(90deg, #fff 0%, #D8D1C8 66%, #D8D1C8 100%);
  overflow: hidden;
}
#faq .faq-ust__gorsel > img {
  position: absolute; right: 0; top: 0; bottom: 0;
  /* Kutu KARE kalsin (394x394) ki kare kaynaktan hic kirpma olmasin. */
  width: auto; max-width: 33%; height: 100%;
  object-fit: cover; object-position: center top;
}
@media (max-width: 1100px) {
  #faq .faq-ust__gorsel { height: auto; background: none; }
  #faq .faq-ust__gorsel > img { position: static; max-width: none; width: 100%; height: auto; }
}

/* ============================================================
   DAR EKRAN — kendi mobil taramamda bulduklarim (390px, 16.09.2026)
   ============================================================ */

/* #compare: fiyat tablosu 549px genisliginde, alan 358px -> saginda
   191px GIZLI kaliyordu (yatay kaydirma vardi ama kimse fark etmez).
   Satirlar blok karta cevrilir, her hucre kendi basligini tasir. */
@media (max-width: 700px) {
  #compare .cmp-table, #compare .cmp-table tbody, #compare .cmp-table tr,
  #compare .cmp-table td { display: block; width: auto; }
  #compare .cmp-table thead { display: none; }
  #compare .table-wrap { overflow: visible; }
  /* Yatay kaydirma icin konan 34rem taban genislik, blok duzende
     tablonun 544px kalmasina yol aciyordu. */
  #compare .cmp-table { min-width: 0; }

  /* ------------------------------------------------------------------
     HAMZA 16.09.2026: "burda tasarimsal sorun var mobilde bayrak vs ekle
     guzellestir sag sol dengeyi de kur". Olculen uc sorun:
       a) BAYRAK YOK -- bayraklar yalniz `<thead>` icinde, mobilde thead
          gizli. Etiket metni `data-etiket`ten uretildigi icin isaretlemeye
          dokunmadan bayrak `::before` ZEMINI olarak veriliyor (sprite'taki
          ayni cizimlerin veri-URI karsiligi).
       b) SAG-SOL DENGE YOK -- rakamlar oransal rakamla yazildigi icin
          satirdan satira kayiyordu; `tabular-nums` basamaklari hizalar.
       c) RITIM BOZUK -- renkli hucreler kart kenarina bitisikti ve kazanc
          rakami govde yazisinin iki katiydi. Renkli satirlar ic payli,
          yuvarlak koseli SERIT oldu; punto satir ritmine cekildi.
     ------------------------------------------------------------------ */
  #compare .cmp-table tr {
    border: 1px solid var(--line); border-radius: var(--r-lg);
    padding: var(--s-4); margin-bottom: var(--s-3); background: #fff;
    box-shadow: 0 0.125rem 0.5rem rgba(3, 27, 69, .05);
  }
  #compare .cmp-table td { border: 0; padding: 0; }
  #compare .cmp-table td:first-child {
    padding-bottom: 0.625rem; margin-bottom: 0.5rem;
    border-bottom: 1px solid var(--line);
  }
  #compare .cmp-table td:first-child b { font-size: 1rem; color: var(--navy-900); }

  #compare .cmp-table td[data-etiket] {
    display: flex; justify-content: space-between; align-items: center;
    gap: var(--s-3); padding: 0.4375rem 0.625rem; border-radius: var(--r-sm);
    font-variant-numeric: tabular-nums;
  }
  #compare .cmp-table td[data-etiket] + td[data-etiket] { margin-top: 0.25rem; }
  #compare .cmp-table td[data-etiket]::before {
    content: attr(data-etiket); font-size: 0.8125rem; color: var(--muted);
    flex: none; display: inline-flex; align-items: center;
  }
  #compare .cmp-table td[data-etiket="United States"]::before,
  #compare .cmp-table td[data-etiket="Türkiye"]::before {
    padding-left: 1.75rem; background-repeat: no-repeat;
    background-size: 1.3125rem 0.875rem; background-position: left center;
  }
  #compare .cmp-table td[data-etiket="United States"]::before {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2016%22%3E%3Crect%20width%3D%2224%22%20height%3D%2216%22%20fill%3D%22%23fff%22%2F%3E%3Cg%20fill%3D%22%23B22234%22%3E%3Crect%20y%3D%220%22%20width%3D%2224%22%20height%3D%221.23%22%2F%3E%3Crect%20y%3D%222.46%22%20width%3D%2224%22%20height%3D%221.23%22%2F%3E%3Crect%20y%3D%224.92%22%20width%3D%2224%22%20height%3D%221.23%22%2F%3E%3Crect%20y%3D%227.38%22%20width%3D%2224%22%20height%3D%221.23%22%2F%3E%3Crect%20y%3D%229.84%22%20width%3D%2224%22%20height%3D%221.23%22%2F%3E%3Crect%20y%3D%2212.3%22%20width%3D%2224%22%20height%3D%221.23%22%2F%3E%3Crect%20y%3D%2214.76%22%20width%3D%2224%22%20height%3D%221.23%22%2F%3E%3C%2Fg%3E%3Crect%20width%3D%2210%22%20height%3D%228.6%22%20fill%3D%22%233C3B6E%22%2F%3E%3Cg%20fill%3D%22%23fff%22%3E%3Ccircle%20cx%3D%221.7%22%20cy%3D%221.6%22%20r%3D%22.55%22%2F%3E%3Ccircle%20cx%3D%224.2%22%20cy%3D%221.6%22%20r%3D%22.55%22%2F%3E%3Ccircle%20cx%3D%226.7%22%20cy%3D%221.6%22%20r%3D%22.55%22%2F%3E%3Ccircle%20cx%3D%222.95%22%20cy%3D%223.1%22%20r%3D%22.55%22%2F%3E%3Ccircle%20cx%3D%225.45%22%20cy%3D%223.1%22%20r%3D%22.55%22%2F%3E%3Ccircle%20cx%3D%221.7%22%20cy%3D%224.6%22%20r%3D%22.55%22%2F%3E%3Ccircle%20cx%3D%224.2%22%20cy%3D%224.6%22%20r%3D%22.55%22%2F%3E%3Ccircle%20cx%3D%226.7%22%20cy%3D%224.6%22%20r%3D%22.55%22%2F%3E%3Ccircle%20cx%3D%222.95%22%20cy%3D%226.1%22%20r%3D%22.55%22%2F%3E%3Ccircle%20cx%3D%225.45%22%20cy%3D%226.1%22%20r%3D%22.55%22%2F%3E%3Ccircle%20cx%3D%228.1%22%20cy%3D%223.1%22%20r%3D%22.55%22%2F%3E%3Ccircle%20cx%3D%228.1%22%20cy%3D%226.1%22%20r%3D%22.55%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  }
  #compare .cmp-table td[data-etiket="Türkiye"]::before {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2016%22%3E%3Crect%20width%3D%2224%22%20height%3D%2216%22%20fill%3D%22%23E30A17%22%2F%3E%3Ccircle%20cx%3D%229.2%22%20cy%3D%228%22%20r%3D%224%22%20fill%3D%22%23fff%22%2F%3E%3Ccircle%20cx%3D%2210.6%22%20cy%3D%228%22%20r%3D%223.2%22%20fill%3D%22%23E30A17%22%2F%3E%3Cpath%20d%3D%22M14.6%208l3.5-1.15-2.16%202.98V6.17l2.16%202.98z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E");
  }
  #compare .cmp-table td.kiyas-tr { background: #FDF6E8; }
  #compare .cmp-table td.kiyas-tr b { font-size: 0.9375rem; color: var(--navy-900); }
  #compare .cmp-table td.kiyas-kazanc {
    /* METIN rengi --blue-ink olmali, --blue-600 DOLGU rengidir: #0068FF
       #EEF6FF uzerinde 4.35 verir ve AA'nin 4.5 esigini gecemez (tarayicida
       olculdu 17.09.2026). Tokenin kendi aciklamasi bunu zaten soyluyordu;
       bu kural onu atlamisti. --blue-ink ayni zeminde 6.26. */
    background: #EEF6FF; font-size: 1.125rem; font-weight: 800;
    font-family: var(--font-head); color: var(--blue-ink);
  }
  #compare .cmp-table td.kiyas-kazanc::before { font-weight: 600; }
}

/* #guides: kartlar dar ekranda 202px'te iki kolon kaliyordu; baslik kutusu
   74px'e dusup "Protecting" gibi kelimeler ORTADAN BOLUNUYORDU. */
@media (max-width: 700px) {
  #guides .rehber-liste, #guides .rehber-sol .grid { grid-template-columns: minmax(0, 1fr); }
  #guides .rehber-kart { width: auto; }
}

/* #ebook dar ekran: 4 ozellik kutusu kart gorunumunu kaybedip ortada
   yalniz ikon + altinda metin olarak duruyordu (kutu/cerceve yok,
   aralar bos). Kutu yeniden kurulur ve icerik sola hizalanir. */
@media (max-width: 700px) {
  /* Iki kolonda metin kutusu ~100px kalip 4-6 kelimelik tirtikli satirlar
     olusuyordu; dar ekranda TEK kolon. */
  #ebook .grid-4 { grid-template-columns: minmax(0, 1fr); gap: var(--s-3); }
  #ebook .grid-4 > .eco-card {
    flex-direction: row !important; align-items: flex-start; gap: 0.625rem;
    background: #fff; border: 1px solid var(--line); border-radius: var(--r-md);
    padding: var(--s-4); text-align: left;
  }
  #ebook .grid-4 > .eco-card .icon-box { flex: none; }
  #ebook .serit-olgu { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* #ebook ozellik kutularinda metin alani 92px'e dusup 4 satira kiriliyordu
   (olculdu 1440px). Ikon kucultulup bosluk daraltilarak metne yer acilir. */
@media (min-width: 701px) {
  #ebook .grid-4 > .eco-card { gap: 0.625rem; padding-inline: 0.875rem; }
  #ebook .grid-4 > .eco-card .icon-box { width: 2.25rem; height: 2.25rem; flex: none; }
  #ebook .grid-4 > .eco-card h3 { font-size: 0.8125rem; line-height: 1.3; }
}

/* ===========================================================================
   320px TABANI + iOS 16px TABANI  (olculdu 16.09.2026, 13 sayfanin 13'unde)
   ---------------------------------------------------------------------------
   1) ALTBILGI 320px'te TASIYORDU. Imza her sayfada birebir ayniydi
      (tasma 15px + kutu tasmasi 6 + kenara yapisik 8) yani tek kok neden.
      Olculdu: `.footer-grid` <=560px'te tek sutun, iz 288px olmali ama 317px
      cikiyor. Sebep 5. sutun ("Get in touch"): e-posta baglantisi
      `display:flex; gap:12px` ve ucuncu cocugu `min-width:auto`;
      `info@turkeyhaircenter.com` bolunemeyen 195px'lik tek parca oldugu icin
      metin kutusu daralamiyor, ikon 44px + ok 20px ile birlikte en az 317px
      istiyor. Izgara ogesinin `min-width:auto` varsayilani izi buyutuyor.
      NOT: ayni sinifi 15.09'da `.footer-trust > div`'de kapatmistim -
      ORNEGI kapatmisim, SINIFI degil. Burada sinif kapatiliyor.
   2) BULTEN ALANI 14,5px idi -> iOS Safari odaklaninca sayfayi ZORLA buyutur.
      (Hizmet sayfalarinin form alanlari hizmet.css'te 16px'e cekildi.)
   Ikisi de yalniz <=1100px'te; masaustu gorunumu DEGISMEZ.
   =========================================================================== */
@media (max-width: 1100px) {
  .footer-grid > * { min-width: 0; }
  .footer-contact a { min-width: 0; }
  .footer-contact a > span { min-width: 0; }
  .footer-contact b, .footer-contact a { overflow-wrap: anywhere; }
  .newsletter input { font-size: 16px; }
}
/* 320px'te e-posta hala TEK SATIRA sigmiyordu: metin 195px istiyor, kutuda
   166px var (29px eksik). Yaziyi kucultmek 12px okunabilirlik tabanina
   dayaniyor; onun yerine DEKORATIF ok kaldirilir - 20px ok + 12px bosluk =
   32px geri gelir ve adres tam sigar (olculdu 16.09.2026). Satirin tamami
   zaten baglanti, ok bilgi tasimiyor. */
@media (max-width: 360px) {
  .footer-contact a > svg:last-child { display: none; }
}

/* ===========================================================================
   iOS 16px TABANI — SINIFI KAPATAN KURAL (olculdu 16.09.2026)
   Safari, yazi boyu 16px'in ALTINDA olan bir alana odaklaninca sayfayi ZORLA
   buyutur. Ana sayfada sekiz alan boyleydi: hero formu (ad/mail/tel 15px),
   SSS aramasi (15px), analiz formu (ad/eposta/telefon/mesaj 14,5px).
   Tek tek secici yazmak yerine TUM metin girdilerine taban konur ki yeni bir
   form eklendiginde kusur geri gelmesin. Onay/secim/kaydirici disarida
   (onlarda yazi boyu gorunmez ve odaklanma yakinlastirmaz).
   Yalniz <=1100px; masaustu gorunumu DEGISMEZ.
   =========================================================================== */
@media (max-width: 1100px) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="submit"]):not([type="button"]),
  textarea,
  select { font-size: 16px; }
  /* `.alan ...` (0,1,1) yukaridaki eleman secicisini (0,0,1) EZIYORDU;
     medya sorgusu icinde olmak ozgullugu degistirmez. Ozgulluk esitlenir. */
  .alan input, .alan select, .alan textarea,
  .hero-form input, .hero-form select, .hero-form textarea,
  .faq-search input, .newsletter input { font-size: 16px; }
}

/* ===========================================================================
   MOBIL: `#plan` KARTLARI (Hamza 16.09.2026: "gorselleri yok", dugme tasiyor)
   ---------------------------------------------------------------------------
   KOK NEDEN (olculdu 390px): `.arac-grid { grid-auto-rows: 29.75rem }` medya
   sorgusu OLMADAN duruyor. Mobilde izgara tek sutuna dusuyor ama SATIR
   YUKSEKLIGI 476px'e kilitli kaliyor; kart 1'in icerigi 544px. Sonuc:
   "See your estimated price" dugmesi kartin 68px DISINA tasiyor (kart 4'te
   10px). `#plan .arac { height:auto }` kurali UYGULANIYOR ama ise yaramiyor:
   izgara ogesinin yuksekligi SATIRDAN gelir, kendi beyanindan degil.
   =========================================================================== */
@media (max-width: 700px) {
  .arac-grid { grid-auto-rows: auto; }
  .arac { min-height: 0; height: auto; }
}

/* ============================================================================
   MOBILDE KART KOMPOZISYONU — TASARIMLA AYNI (Hamza 16.09.2026:
   "ikinci attigim gibi olmasi lazim buranin")

   GECMIS: gorseller mobilde `display:none` idi (bolum duz metne donuyordu).
   Onu duzeltirken gorselleri AKISA aldim: tam genislik, 9,5rem yuksek bir
   serit. Bu da yanlisti -- pasaport kartin altinda kocaman ayri bir blok
   gibi duruyordu ve kompozisyon dagiliyordu.

   DOGRUSU: masaustundeki duzenin KUCUK OLCEKLISI. Gorsel kartin SAGINA
   mutlak oturur, metin ve rozetler SOLDA kalir ve gorselin UZERINE biner
   (z-index 2). Masaustu referansi:
       .arac--fotolu .arac__foto { right:-4%; bottom:0; width:54%; z-index:1 }
       .arac--krem  .arac__kolaj { right:-0.625rem; bottom:4.625rem; width:56% }
       .arac--krem  .fiyat-etiket{ top:10.5rem; right:0.75rem; z-index:2 }

   Metin sutunu daraltilmazsa yazi gorselin uzerine tasar -- masaustunde de
   bu yuzden `.arac--fotolu > p { max-width:60% }` var; mobilde ayni kural
   basliga ve listeye de uygulanir.
   ========================================================================== */
@media (max-width: 700px) {
  .arac { position: relative; overflow: hidden; }

  /* --- ortak: gorsel sagda, dekoratif, tiklanamaz --- */
  .arac__kolaj, .arac__foto, #plan .arac__kolaj, #plan .arac__foto {
    display: block; position: absolute; z-index: 1;
    height: auto; margin-top: 0; pointer-events: none;
    border-radius: 0;
  }

  /* --- kart 1 (krem) — HAMZA 16.09.2026: "bu arka plandaki resmi mobilde
     kaldir, from 2550 yazan bolumu de uste al".
     Pasaport kolaji mobilde KALKTI; fiyat cipi mutlak konumdan cikip AKISA
     girdi ve rozet satirinin hemen altina alindi (flex `order`; DOM sirasi
     korunur, masaustu kompozisyonu etkilenmez). Gorsel gidince metin sutunu
     daraltmaya da gerek kalmadi -- hepsi tam genislik. --- */
  /* Ortak `display:block` kolaj kuralini kart 1 icin geri kapat.
     `#plan` ONEKI SART: yukaridaki liste `#plan .arac__kolaj` (1-1-0)
     iceriyor ve kimlik secicisi sinif ciftini (0-2-0) eziyor -- olculdu
     16.09.2026, oneksiz kural 320/360/390/430'da hic tutmadi. */
  #plan .arac--krem .arac__kolaj { display: none; }
  .arac--krem .arac__kolaj { display: none; }
  .arac--krem { min-height: 0; }
  .arac--krem .fiyat-etiket { position: static; left: auto; right: auto; top: auto; bottom: auto; }
  .arac--krem .arac__onay li { font-size: 0.875rem; white-space: normal; }

  /* --- kart 3 (fotolu): portre sagda, yesil rozetler ustune biner --- */
  .arac--fotolu { min-height: 24rem; }
  .arac--fotolu .arac__foto { right: -4%; bottom: 4rem; width: 56%; }
  .arac--fotolu .h3, .arac--fotolu > p { max-width: 62%; }
  .arac--fotolu .arac__yesil { position: relative; z-index: 2; max-width: 74%; }
  .arac--fotolu .btn--block, .arac--fotolu .arac__ust { position: relative; z-index: 2; }
}

/* ===========================================================================
   HERO GUVEN SERIDI — "Learn more" altindaki BOS KUTU (Hamza 16.09.2026:
   "burasi kotu gereksiz bosluklu")
   KOK NEDEN (olculdu 390px): site.css:4267 mobilde `.hero-aciklama a`yi
   `display: block` yapiyor. Baglanti 358px genisliginde bir BLOK oluyor,
   metin (ust paragraftan miras `text-align:center` ile) ortalaniyor ama
   icindeki ok SVG'si ALT SATIRA, SOLA dusuyor -> arada ~40px'lik olu alan.
   Cozum: satir-ici esnek kutu; metin ve ok yan yana, birlikte ortali.
   =========================================================================== */
@media (max-width: 700px) {
  .hero-aciklama a {
    display: inline-flex; align-items: center; justify-content: center;
    gap: 0.375rem; min-height: 44px; white-space: nowrap;
  }
  .hero-aciklama a svg { flex: none; }
  /* Olgu satirlari fazla seyrekti: dikey dolgu bir tik sikilir. */
  .hero-guven__olgu > div { padding: var(--s-3) var(--s-4); }
}

/* ===========================================================================
   MOBIL MENU (Hamza 16.09.2026: "menu acayip kotu") — UC OLCULEN KUSUR
   ---------------------------------------------------------------------------
   1) TELEFON DUGMESI OKUNMUYORDU: zemin #FFF, yazi #E8F0FB -> kontrast ~1,05:1
      (WCAG AA tabani 4,5:1). `.mobile-nav a { color:#E8F0FB }` beyaz zeminli
      dugmeyi de boyuyordu. Koyu lacivert yaziya cevrilir.
   2) IKON ve METIN GRUPLANMIYORDU: `.mobile-nav a { display:block }` dugmenin
      kendi `inline-flex`ini eziyor; bu yuzden `justify-content:center` ve
      `gap` etkisiz kaliyor, WhatsApp ikonu sola kaciyordu.
   3) PANEL 343px: solda 47px'lik seritten sayfanin kendi logosu sizip
      panelin logosuyla carpisiyordu. Dar ekranda panel tam genislik alir.
   =========================================================================== */
@media (max-width: 1080px) {
  /* (2) dugmeler yeniden esnek kutu olur */
  .mobile-nav .dip a.btn {
    display: inline-flex; align-items: center; justify-content: center;
    gap: 0.5rem; width: 100%; min-height: 48px; padding: 0.75rem 1rem;
    border-bottom: 0; font-weight: 700;
  }
  .mobile-nav .dip a.btn svg { flex: none; width: 1.125rem; height: 1.125rem; }
  /* (1) beyaz zeminli telefon dugmesi: koyu yazi */
  .mobile-nav .dip a.btn--ghost,
  .mobile-nav .dip a.btn--gold,
  .mobile-nav .dip a.btn--beyaz,
  .mobile-nav .dip a.btn--tel { color: var(--navy-900); }
}
@media (max-width: 430px) {
  /* (3) dar ekranda panel tam genislik */
  .mobile-nav { width: 100vw; }
}

/* ===========================================================================
   MOBIL ALT BAR (Hamza 16.09.2026: "usteki free consultu kaldir alta mobil
   bar ekle ... whatsapp vs ikonlarda sorunlar var")
   ---------------------------------------------------------------------------
   Ust bardaki "Free consult" dugmesi 390px'te logo ile menuyu sikistiriyordu
   (logo 126px + dugme + menu 80px = 390'in tamami). Birincil eylem alta,
   basparmagin dogal eristigi seride tasinir; ust bar yalniz logo + menu kalir.
   Yuzen WhatsApp balonu KALDIRILIR: barda zaten WhatsApp var, ikisi birden
   hem gorsel kalabalik hem de gecen turda olculen "metnin ustune binme"
   kusurunun kaynagiydi.
   =========================================================================== */
.mobil-bar { display: none; }

@media (max-width: 1080px) {
  .header__cta { display: none; }          /* ust bardaki birincil dugme */
  .wa-float { display: none; }             /* yuzen balon: barla mukerrer */

  .mobil-bar {
    display: grid; grid-template-columns: 1.25fr 1fr 1fr;
    position: fixed; inset: auto 0 0; z-index: 70;
    gap: 1px; background: var(--line);
    border-top: 1px solid var(--line);
    box-shadow: 0 -0.5rem 1.5rem rgba(3, 15, 35, .14);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .mobil-bar__oge {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 0.25rem; min-height: 60px; padding: 0.5rem 0.25rem;
    background: #fff; color: var(--navy-900);
    font-size: 12px; font-weight: 700; line-height: 1.2; text-align: center;
  }
  .mobil-bar__oge svg { width: 1.25rem; height: 1.25rem; flex: none; }
  .mobil-bar__oge--birincil { background: var(--gold-400); color: var(--navy-900); }
  .mobil-bar__oge--wa { background: #04814A; color: #fff; }
  .mobil-bar__oge:active { filter: brightness(.94); }

  /* Bar icerigi ORTMESIN: sayfanin dibine bar yuksekligi kadar pay birakilir.
     (Gecen turda altbilgideki "Sitemap" baglantisi yuzen dugmenin altinda
     kaliyordu - ayni sinif.) */
  body { padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px)); }
}

/* ===========================================================================
   SON IKI MOBIL BULGU (olculdu 16.09.2026, 390px)
   ---------------------------------------------------------------------------
   1) SAC TIPI ETIKETLERI 10px idi. Sebep: izgara 4 sutun x 73px, etikete 67px
      kaliyor; "Afro-textured" 12px'te 79px ister, sigmadigi icin 10px'e
      dusurulmustu. Yaziyi okunabilirlik tabaninin altina indirmek yerine
      SATIR IKIYE BOLUNUR: 2 sutun x ~152px -> 12px rahat siger.
   2) "Interested Treatment" secicisinin YUKSEKLIGI 22px idi (WCAG 2.5.8
      tabani 24, parmak icin 44 onerilir). Taban verilir.
   =========================================================================== */
@media (max-width: 430px) {
  #plan .sac-tipi { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #plan .sac-tipi span { font-size: 12px; white-space: normal; }
}
@media (max-width: 1100px) {
  .secim__dugme { min-height: 44px; }
}

/* #calculator kafa semasi ARTIK SAYDAM ZEMINLI bir cizim (16.09.2026, Hamza
   yeni gorseli verdi). Eski gorsel bir fotograftı ve kutu icinde duruyordu;
   saydam gorselde o kutu (arka plan + yuvarlak kose + %90 opaklik) cercevesi
   gorunur hale geliyor. Cerceve kaldirilir. */
#calculator .hesap-sema {
  border-radius: 0; overflow: visible; background: none;
  /* GORUNURLUK GERI ACILDI (olculdu 16.09.2026, Hamza tasarim 20.png:
     "birebir boyle yap"). site.css:3020 `@media (max-width:1400px)` icinde
     `.hesap-sema { display:none }` diyor -- yani sema TABLET VE TELEFONDA
     HIC GORUNMUYORDU. Oysa 5476'daki blok ayni semayi <=1100px icin
     yeniden KONUMLANDIRIYOR (`position:static; max-width:32rem`), yani
     gorunmesi AMACLANMIS ama `display` geri acilmamis -- iki kural
     birbiriyle celisiyordu ve gizleyen kazaniyordu.
     Sema bu bolumun merkezi ogesi (bolge etiketleri: Crown, Temple,
     Mid-Scalp, Hairline); onsuz sol sutun duz metne donuyor. */
  display: block;
}
#calculator .hesap-sema img {
  opacity: 1;
  /* KIRPMA YOK (Hamza 16.09.2026: "tepe kesik duruyor, birebir koy").
     Taban kural (site.css:2953) `aspect-ratio: 4/5` + `object-fit: cover`
     uyguluyor; gorselin kendi orani 1,206 oldugu icin bu kutu gorselin
     ALTINI VE USTUNU kesiyordu (olculdu: kutu 594x742 = 0,80 · gorsel
     0,702). Sema bir FOTOGRAF degil, uzerinde etiketler olan bir
     ACIKLAMA gorselidir; kenarindan kesilince bilgi kaybolur. */
  aspect-ratio: auto;
  object-fit: contain;
  height: auto;
  /* Gorselin KENDI alt kenari duz bir kesiktir: kaynak dosyanin alt 60
     satiri bastan basa %100 opak (olculdu). Gorsel KIRPILMAZ; yalniz o
     kenar zemine karissin diye son %12'lik seritte yumusak gecis verilir.
     Boylece hem "birebir" kalir hem duvar gibi bir kenar kalmaz. */
  -webkit-mask-image: linear-gradient(to bottom, #000 88%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 88%, transparent 100%);
}

/* ===========================================================================
   MOBIL RÖTUŞ (Hamza 16.09.2026)
   1) LOGO BUYUTULDU: `≤420px`'te 28px'e sabitlenmisti (site.css:4088), ust bar
      68px oldugu halde logo kucucuk duruyordu. 28 -> 36px, 34 -> 40px.
   2) ALT BAR iki eyleme dustu ("Call" kaldirildi) -> iki esit sutun.
   3) HERO CTA BARIN ALTINDA KALIYORDU: hizmet sayfasinda "Get a free hair
      analysis" dugmesi 775-825, bar 783-844 -> 42px ortusme (olculdu).
      Hero'ya bar yuksekligi kadar alt pay verilir; ayni eylemin iki kez
      ust uste gorunmesi de boylece biter.
   =========================================================================== */
@media (max-width: 1080px) {
  .site-header .brand img { height: 40px; }
  .mobil-bar { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 420px) {
  .site-header .brand img { height: 36px; }
}

/* Alt bar: sayfanin kendi birincil CTA'si ekrandayken gizlenir (bkz _script.js).
   Gecis yalnizca JS sinifi eklediyse calisir; JS yoksa bar HER ZAMAN gorunur
   kalir (bozulmaya karsi guvenli). */
.mobil-bar--gecisli { transition: transform .22s ease, opacity .22s ease; }
.mobil-bar--gizli { transform: translateY(100%); opacity: 0; pointer-events: none; }

/* ===========================================================================
   ULKE KODU SECICI — EKSIK ALANLARDA YERLESIM (16.09.2026)
   Bilesenin kendi gorunumu site.css ~5106-5180'de ZATEN tanimli (bayrak,
   dugme, panel, arama, liste). Burada yalnizca betigin sonradan ekledigi
   alanlarin KABI duzenlenir; yeni bir gorsel dil uretilmez.
   Kap iki bicimde:
     .alan            (ana sayfa formlari)  -> ikon flex cocugu
     .hz-alan__kutu   (113 hizmet sayfasi)  -> ikon MUTLAK konumlu, girdinin
                                               sol dolgusu 44px
   Her iki durumda telefon ikonu gizlenir: yerini bayrak alir, yoksa alanda
   iki ikon yan yana durup daraliyordu.
   =========================================================================== */

/* --- ana sayfa kaplari --- */
.alan.kutu--tel { padding-left: 0; }
.alan.kutu--tel > svg:not(.bayrak) { display: none; }

/* --- hizmet sayfasi kaplari --- */
.hz-alan__kutu.kutu--tel > svg:not(.bayrak) { display: none; }
.hz-alan__kutu.kutu--tel .alan__ulke {
  position: absolute; left: 1.5px; top: 1.5px; bottom: 1.5px; z-index: 2;
  padding: 0 0.5rem 0 0.75rem;
  border-right: 1.5px solid var(--line-2);
  border-radius: var(--r-md) 0 0 var(--r-md);
  background: var(--card);
}
.hz-alan__kutu.kutu--tel input[type="tel"] { padding-left: 104px; }

/* Panel girdinin ustunde kalmali (kart/serit yigin baglamlari var). */
.kutu--tel { position: relative; z-index: 8; }
.kutu--tel .ulke-panel { z-index: 30; }

/* Dokunma hedefi (WCAG 2.5.8) ve iOS zorla yakinlastirma esigi:
   dugme en az 44px, arama girdisi en az 16px. */
@media (max-width: 1100px) {
  /* `.alan--tel` DE kapsama alindi: ana sayfa hero formundaki MEVCUT secicinin
     dokunma hedefi olculdu -> 31px, WCAG 2.5.8 tabani 44px'in altinda. Bilesen
     zaten elimdeyken duzeltiliyor; yalniz kendi ekledigim alanlari duzeltip
     yanindakini birakmak sinifi yarim kapatmak olurdu. */
  .kutu--tel .ulke-dugme,
  .alan--tel .ulke-dugme { min-height: 44px; }
  .kutu--tel .ulke-ara input,
  .alan--tel .ulke-ara input { font-size: 16px; }
  .kutu--tel .ulke-liste li,
  .alan--tel .ulke-liste li { min-height: 40px; }
}

/* ============================================================================
   WHATSAPP BANDI OLGU SATIRI — MOBILDE HAVADA KALAN AYRAC CIZGILERI
   Olculdu 16.09.2026 (Hamza ekran goruntusuyle isaretledi):
   `.yardim-bant__olgu > span` yatay dizilim icin `border-right` + 32px sag
   dolgu tasiyor ve ayraci yalniz `:last-child`'da kaldiriliyor. Mobilde
   `flex-wrap` ogeleri alt alta indirince bu kenarlik METNIN SAGINDA
   HAVADA KALAN DIKEY CIZGIYE donusuyor -- tam olarak ilk IKI maddede.
   Olcum (satir sayisi / ilk iki ogenin border-right degeri):
       390px = 3 satir · 1px   <- kusur
       430px = 2 satir · 1px   <- kusur
       768px = 1 satir · 1px   <- dogru (gercekten ayrac)
   Cozum: 768px altinda acikca DIKEY YIGIN + ayrac yok. Ayrac ancak ogeler
   TEK SATIRDAYKEN anlamli; sarma ihtimali olan her genislikte kaldirilir.
   ========================================================================== */
@media (max-width: 767px) {
  .yardim-bant__olgu { flex-direction: column; gap: var(--s-3); }
  .yardim-bant__olgu > span { border-right: 0; padding-right: 0; width: 100%; }
  /* NOT: komsu `.wa-bant__olgu` OLCULDU -- onda `border-right` YOK, yani
     ayni kusur orada bulunmuyor. Bozuk olmayan bir duzeni "ihtimale karsi"
     degistirmek yeni kusur uretir; dokunulmadi. */
}

@media (max-width: 400px) {
  .arac--krem .arac__onay li { font-size: 0.8125rem; }
}

/* ============================================================================
   WHATSAPP BANDI TELEFON GORSELI — MOBILDE USTTEN KESILIYORDU
   Olculdu 16.09.2026 (Hamza uc bantta da isaretledi):
   mobilde gorsele `aspect-ratio: 16/9` (1,778) ZORLANIYOR ve `object-fit:
   cover` + `object-position: left center` ile kirpiliyor. Gorsellerin
   DOGAL oranlari ise cok farkli:
       bant 1: 620x566  -> 1,095  (neredeyse kare)  -> AGIR kirpma
       bant 2: 690x416  -> 1,659                    -> hafif kirpma
       bant 3: 640x478  -> 1,339 = kutu orani       -> kirpma YOK
   Yani telefonun ust kismi (sohbet basligi) kesiliyordu. Kirpmanin kendisi
   tasarim degil, sabit oranin yan etkisiydi -- bant 3 zaten dogru goruunuyordu.
   Mobilde gorsel KENDI oranina birakilir; kutu gorsele uyar, kirpma olmaz.
   Masaustundeki uc kolonlu duzen ETKILENMEZ (orada kolon dar ve uzun,
   `cover` bilerek kullaniliyor).
   ========================================================================== */
@media (max-width: 1100px) {
  .wa-bant__telefon, .yardim-bant__telefon {
    aspect-ratio: auto; height: auto; min-height: 0;
    object-fit: contain; object-position: center center;
  }
}

/* EN DAR EKRAN (<=340px): kompozisyona yer yok.
   Olculdu: 320px'te alt baslik fiyat cipine 81x14px biniyordu (cip 12,5rem'e
   indirilmis olsa bile, cunku metin daha cok satira sariyor). Bu genislikte
   cip AKISA alinir -- ust uste binme matematiksel olarak imkansiz hale gelir.
   360px ve uzeri kompozisyon korunur. */
@media (max-width: 340px) {
  /* Kart 1 artik 700px altinda tamamen akista (kolaj yok, cip ustte) --
     bu genislige ozel ezmeye gerek kalmadi. */
  .arac--fotolu .arac__foto { width: 42%; opacity: .9; }
}

/* ===========================================================================
   YOLCULUK ADIMLARI — MOBILDE FOTOGRAF KIRPILIYORDU (olculdu 16.09.2026).
   Hamza: "mobilde bu kirpiliyor" (adim 6, oncesi/sonrasi gorseli).
   Kok neden: `.step img` SABIT 10,3125rem (165px) yukseklikte + `cover`.
   760px altinda izgara 2 kolona dusuyor, kolon ~163px -> kutu neredeyse KARE
   (1,01) oysa alti gorselin de orani 1,44 -> yanlardan agir kirpma. Yan yana
   iki panelli gorselde bu, panellerin kenarlarini kesiyor.
   Mobilde kutu gorselin KENDI oranina birakilir; alti gorsel de ayni oranda
   oldugu icin izgara duzeni bozulmaz. Masaustu ETKILENMEZ.
   =========================================================================== */
@media (max-width: 1080px) {
  /* Esik 1080: izgara burada 6-across masaustu kompozisyonundan cikiyor
     (3 ve 2 kolona dusuyor). 768'de sabit yukseklik %4,5 kirpiyordu. */
  .step img { height: auto; aspect-ratio: 720 / 500; object-fit: cover; }
}

/* ===========================================================================
   HAMZA 16.09.2026 — MOBILDE KALDIRILAN IKI BLOK
   1) #packages ozellik satiri ("All-inclusive / Airport transfers / 5* hotels /
      Dedicated coordinator / Ongoing support"): 700px ve altinda bes ogenin
      hepsi AYRI SATIRA dusuyor ve basligin altinda 268px'lik bir liste
      olusuyor (olculdu: 620/660/700px -> 5 satir; 720px -> 2 satir, 88px).
      720px ve uzeri kompakt oldugu icin DOKUNULMAZ.
   2) `.paket-yazi-alt` el yazisi ("Take the First Step Today"): site kurali
      `@media (max-width:1100px) { .script { display:none } }` -- yani tum el
      yazilari mobilde gizli. Bu blok `display:block` dedigi ve kuraldan SONRA
      geldigi icin (ayni ozgulluk, kaynak sirasi kazanir) tek basina gorunur
      kaliyordu. Digerleriyle ayni davranisa cekildi.
   =========================================================================== */
@media (max-width: 700px) {
  #packages .sec-head .mini-facts { display: none; }
}
@media (max-width: 1100px) {
  .paket-yazi-alt { display: none; }
}

/* ===========================================================================
   MOBIL BOSLUK VE BUTUNLUK DUZENI (Hamza 16.09.2026 — art arda isaretledi:
   "burasi yapisik", "gereksiz bosluk var", "cerceve var ic resimlerde
   olmasin butunluk sagla", "alt mobil bari daha estetik yap", "ortali yap")
   Her madde OLCULDU, deger tahminle konmadi.
   =========================================================================== */
@media (max-width: 760px) {
  /* 1) #istanbul alt dolgusu 0'di -> kartin dugmesi bir sonraki bolume
        YAPISIYORDU (olculdu: altBos = 0px, digerlerinde 28-48px). */
  #istanbul { padding-bottom: var(--s-7); }

  /* 2) #women: bolumun kendi 58px dolgusuna EK olarak `.kadin-sol`
        padding-block 48px biniyordu -> basliktan once ~114px bos lacivert
        (olculdu: ustBos 56px + bolum 58px). Bolum dolgusu zaten yeterli. */
  #women .kadin-sol { padding-block: 0; }

  /* 3) #usa: kart izgarasi ile CTA arasi 48px satir araligi + eylem kutusunun
        kendi 32px'i ust uste biniyordu. */
  #usa .abd-duzen { row-gap: var(--s-6); }
  .abd-eylem { margin-top: var(--s-5); gap: var(--s-4); }
  .abd-eylem__kanit { padding-left: 0; border-left: 0; }

  /* 4) Sonuc karti kunyesi ("Exosome FUE · 5,250 grafts · 20 months")
        mobilde sola dayaliydi; kart icerigi ortali oldugu icin ortalanir. */
  .sonuc__meta { justify-content: center; }

  /* 5) Kart gorsellerindeki IC CERCEVE kalkti: gorselin arkasindaki acik
        kutu, kartin kendi beyaz zemini uzerinde ikinci bir cerceve gibi
        duruyordu. Gorsel artik dogrudan kartin zeminine oturur. */
  .channel__gorsel {
    background: none; border-radius: 0.75rem; height: auto;
    aspect-ratio: 540 / 320; object-fit: contain;
  }
  .channel--onerilen .channel__gorsel { background: none; }
}

/* ---------------------------------------------------------------------------
   ALT MOBIL BAR — yuzen, yuvarlak ve yumusak golgeli.
   Onceki hali tam genislikte iki DUZ blok ve keskin koseliydi; sayfanin
   dibine yapisik duruyordu. Artik kenarlardan paylanmis, yuvarlak koseli,
   tek parca bir cubuk; ogeler satir duzeninde (ikon + etiket yan yana) ve
   dokunma alani 56px'in altina inmez.
   --------------------------------------------------------------------------- */
@media (max-width: 1080px) {
  .mobil-bar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    inset: auto 0.75rem calc(0.75rem + env(safe-area-inset-bottom, 0px));
    gap: 0; border: 0; background: none;
    border-radius: 0.9375rem; overflow: hidden;
    box-shadow: 0 0.75rem 1.75rem rgba(3, 15, 35, .26),
                0 0.125rem 0.25rem rgba(3, 15, 35, .12);
    padding-bottom: 0;
  }
  .mobil-bar__oge {
    flex-direction: row; gap: 0.5rem; min-height: 56px; padding: 0.625rem 0.5rem;
    font-size: 13px; letter-spacing: .01em;
  }
  .mobil-bar__oge svg { width: 1.125rem; height: 1.125rem; }
  body { padding-bottom: calc(56px + 1.5rem + env(safe-area-inset-bottom, 0px)); }
}

/* Bant alt notu ("No obligation | Free consultation | Available 24/7"):
   kap `display:flex` ve sarma kapali oldugu icin ogeler DARALIYOR, metin de
   oge ICINDE bolunuyordu -> "No / obligation" (olculdu 390px, satir 41px =
   iki satir). Dogrusu: ifadeler BUTUN kalsin, sarma ifadeler ARASINDA olsun. */
@media (max-width: 760px) {
  .wa-bant__not, .yardim-bant__not {
    flex-wrap: wrap; justify-content: center; white-space: nowrap;
    row-gap: 0.25rem;
  }
}

/* ===========================================================================
   WHATSAPP BANDI — MOBIL KOMPOZISYON (Hamza 16.09.2026, hedef: IMG_3027)
   Referansta uc ozellik YAN YANA, ikon ustte, aralarinda dikey ince ayrac;
   altta avatarlar + "Real people. Real support."; baslik iki renkli; buton
   tam genislikte. Bizde ozellikler alt alta yigiliyor ve bant gereksiz
   uzuyordu (olculdu 390px: `#videos` bandi 1000px yuksekliginde).
   Masaustu duzeni ETKILENMEZ.
   =========================================================================== */
@media (max-width: 760px) {
  .wa-bant, .yardim-bant { text-align: center; }
  .wa-bant__metin, .yardim-bant__metin { padding-inline: 0; }

  /* --- uc ozellik yan yana, ortali, ayracli --- */
  .wa-bant__olgu, .yardim-bant__olgu {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0; margin-top: var(--s-5); justify-content: stretch;
  }
  .wa-bant__olgu > span, .yardim-bant__olgu > span {
    display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
    text-align: center; gap: 0.375rem; padding: 0 0.5rem;
  }
  .wa-bant__olgu > span + span, .yardim-bant__olgu > span + span {
    border-left: 1px solid rgba(255, 255, 255, .16);
  }
  .wa-bant__olgu svg, .yardim-bant__olgu svg {
    width: 1.5rem; height: 1.5rem; grid-row: auto; align-self: center;
  }
  .wa-bant__olgu b, .yardim-bant__olgu b { font-size: 0.8125rem; line-height: 1.2; }
  .wa-bant__olgu span span { font-size: 0.71875rem; line-height: 1.3; }

  /* DIKEY FLEX'TE COCUK KUTUYU ASAR (olculdu 17.09.2026, 390px):
     `> span` dikey flex + align-items:center oldugu icin ic `<b>`/`<span>`
     ICERIGE gore boyutlaniyor ve 103px'lik sutunda 167px genisleyip bandin
     sag kenarini 9px asiyordu (bant `overflow:hidden`, yani yazi KESILIYOR).
     `max-width:100%` + kelime sarmasi kutuyu zorunlu kilar. */
  .wa-bant__olgu > span > *, .yardim-bant__olgu > span > * {
    max-width: 100%; min-width: 0; overflow-wrap: break-word;
  }

  /* --- eylem kolonu: buton tam genislik, alt satir ortali --- */
  .wa-bant__eylem, .yardim-bant__eylem { padding-inline: 0; justify-items: center; }
  .wa-bant__alt { justify-content: center; gap: var(--s-3); }
  .wa-bant__destek {
    display: block; text-align: left; font-size: 0.8125rem; line-height: 1.35;
    color: #BDD0E8; padding-left: var(--s-3);
    border-left: 1px solid rgba(255, 255, 255, .18);
  }
}



/* ===========================================================================
   MOBIL RÖTUŞ TURU 2 (Hamza 16.09.2026, hepsi isaretlenerek geldi)
   =========================================================================== */
@media (max-width: 760px) {
  /* a) Kanal kartlarindaki gorsel CERCEVESI: 5107. satirdaki kural sonra
        geldigi icin ilk denemem tutmadi (olculdu: zemin hala #F1F6FD).
        Kimlik oneki ile kesin kapatilir. */
  #help .channel .channel__gorsel,
  #help .channel__gorsel,
  .channel--onerilen .channel__gorsel,
  .card .channel__gorsel {
    background: none; height: auto; aspect-ratio: 540 / 320;
    object-fit: contain; border-radius: 0.75rem;
  }

  /* b) E-kitap formu SIKISIKTI: kart kendi ic payini iki kez uyguluyordu
        (bolum + kart). Form kartin tam genisligine yayilir. */
  #ebook .magnet > div:first-of-type { max-width: none; padding-inline: 0; }
  #ebook form .alan, #ebook form .btn { width: 100%; }
  #ebook .magnet { gap: var(--s-5); }

  /* c) #ecosystem mobilde GIZLENIR (Hamza: "bu bolumleri mobilde kaldir").
        NOT: icerik HTML'de duruyor, yalniz gorunmuyor -- silinmedi. */
  #ecosystem { display: none; }

  /* d) Bulten karti: ogeler alt alta ve tam genislikte; buton da tam
        genislik (onceden input 15rem taban genislikle tasiyordu). */
  .newsletter { flex-direction: column; align-items: stretch; gap: var(--s-4); }
  .newsletter__main { flex: 1 1 auto; }
  .newsletter form { flex-direction: column; }
  .newsletter input { min-width: 0; width: 100%; }
  /* Hedef IMG_3036: Abone ol dugmesi TAM GENISLIK degil, sola dayali ve
     metin kadar. Girdi tam genislik kalir. */
  .newsletter form .btn { width: auto; align-self: flex-start; padding-inline: var(--s-6); }
}

/* Altbilgi el yazisinin altindaki firca darbesi KALIN ve egik duruyordu
   (0,375rem + rotate -2,5deg). Daha ince ve daha az egik: yazinin altini
   cizen zarif bir vurgu. */
.footer-yazi .firca {
  height: 0.1875rem; transform: rotate(-1.5deg); margin-top: 0.375rem;
  background: linear-gradient(90deg, transparent 0%, var(--gold-400) 18%,
              var(--gold-300) 50%, var(--gold-400) 82%, transparent 100%);
}


/* ===========================================================================
   MOBIL BOLUM RITMI — TEK OLCU (Hamza: "boslugu site genelinde duzgun yap",
   ayrica "gereksiz bosluk var" x3)
   Olculdu 390px: bolum dolgulari ust 56-64px / alt 28-36px ile ASIMETRIKTI;
   iki bolum arasi 94-102px'e ciKiyordu (#faq -> #guides tam 102px). Telefonda
   bu, icerik arasinda bos ekran demek. Ust ve alt esitlenip 40/36'ya cekildi:
   bolum arasi 76px — nefes aliyor ama bos durmuyor. Bolume OZEL kurallar
   (ornegin #istanbul'un alt dolgusu) bundan SONRA geldigi icin korunur.
   =========================================================================== */
@media (max-width: 760px) {
  .section, .section--tight, .section--compact, .section--pillar {
    padding-block: 2.5rem 2.25rem;
  }
  /* Alt mobil bar 56px + 12px pay = 68px; gerekenden fazlasi altbilgi dibinde
     bos serit birakiyordu (olculdu: gövde alt payi 80px). */
  body { padding-bottom: calc(68px + 0.5rem + env(safe-area-inset-bottom, 0px)); }
}
/* #istanbul alt dolgusu (yukarida 48px'e cekilmisti) bu ritimden sonra
   yeniden dogrulanir: kart dugmesi bir sonraki bolume yapismamali. */
@media (max-width: 760px) { #istanbul { padding-bottom: 2.25rem; } }

/* Kimlik secicili kendi dolgusu olan bolumler de ayni ritme cekilir
   (olculdu: plan/selfcheck 52-30, results/team 56-28, istanbul/faq 64-36,
   compare 74-48, journey 54-28, afro 47-28 -> hepsi farkli). Kimlik
   ozgullugu sinif kuralini eziyordu; burada kimlikle esitleniyor. */
@media (max-width: 760px) {
  #plan, #selfcheck, #results, #team, #faq, #compare, #journey, #afro,
  #calculator, #packages, #free-analysis, #videos, #reviews, #hospitals,
  #women, #global, #usa, #help, #guides, #blog, #ebook {
    padding-block: 2.5rem 2.25rem;
  }
  #istanbul { padding-top: 2.5rem; padding-bottom: 2.25rem; }
}


/* ===========================================================================
   ARACI BANDI — hedef tasarim IMG_3038 (Hamza 17.09.2026)
   Farklar olculdu: altin ust etiket YOKTU, baslik tek renkti, "Learn more"
   duz metin baglantisiydi. Metin BIREBIR degistirilmedi: hedefteki kisa
   surumde "the hair-restoration brand of Healthy Way Tourism" ibaresi yok;
   o cumle aracinin yasal beyani, tasarim ugruna dusurulmez.
   =========================================================================== */
.araci-bant__etiket {
  display: block; margin-bottom: 0.375rem;
  font-family: var(--font-head); font-size: 0.75rem; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase; color: var(--gold-400);
}
.araci-vurgu { color: #9CC7FF; }
.araci-bant__link.btn {
  /* `.araci-bant__link` (2509) `.btn--gold`tan SONRA geldigi icin zemini
     eziyordu (olculdu: backgroundColor rgba(0,0,0,0)). Zemin burada acikca
     yeniden veriliyor. */
  border-left: 0; padding-left: var(--s-6); padding-right: var(--s-6);
  color: var(--navy-900);
  background: linear-gradient(180deg, var(--gold-300) 0%, var(--gold-400) 100%);
  border: 0; border-radius: var(--r-pill);
}
@media (max-width: 900px) {
  .araci-bant__link.btn { width: 100%; justify-content: center; }
}


/* ===========================================================================
   ILETISIM KANALLARI — hedef tasarim "ChatGPT Image 17 Eyl 2026 00_48" 
   Eksikler olculdu: (a) kartlarin UST ETIKETI yoktu, (b) WhatsApp kartinda
   "Usually replies in minutes" durum hapi yoktu, (c) 24/7 kartindaki iki
   ozellik duz metindi (`|` ayracli), hedefte IKONLU HAP, (d) ikon rozetinde
   yumusak hale halkasi yoktu.
   =========================================================================== */
.koord-kanal__ust {
  display: block; margin-bottom: 0.1875rem;
  font-family: var(--font-head); font-size: 0.6875rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
}
.koord-kanal__ust--yesil { color: #0B7A42; }
.koord-kanal__ust--mavi  { color: var(--blue-ink); }
.koord-kanal__ust--altin { color: var(--gold-700); }

/* hale halkasi: rozetin cevresinde kendi renginin soluk hali */
.koord-kanal__ikon--wa    { box-shadow: 0 0 0 0.5rem rgba(37, 211, 102, .12); }
.koord-kanal__ikon--mavi  { box-shadow: 0 0 0 0.5rem rgba(0, 104, 255, .08); }
.koord-kanal__ikon--altin { box-shadow: 0 0 0 0.5rem rgba(197, 154, 74, .12); }

/* WhatsApp durum hapi: yesil nokta + soluk yesil zemin */
.koord-kanal__durum {
  display: inline-flex; align-items: center; gap: 0.4375rem;
  margin-top: 0.5rem; padding: 0.3125rem 0.75rem;
  background: #E9F9F0; border-radius: var(--r-pill);
  font-size: 0.78125rem; font-weight: 600; color: #0B7A42;
}
.koord-kanal__durum i {
  width: 0.4375rem; height: 0.4375rem; border-radius: var(--r-pill);
  background: #15A85C; flex: none;
}

/* 24/7 ozellikleri: iki ayri ikonlu hap */
.koord-kanal__saat { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.625rem; }
.koord-kanal__saat > span {
  display: inline-flex; align-items: center; gap: 0.4375rem;
  padding: 0.3125rem 0.75rem; background: var(--bg-2);
  border-radius: var(--r-pill); font-size: 0.78125rem;
  font-weight: 600; color: var(--navy-800);
}
.koord-kanal__saat svg { width: 0.9375rem; height: 0.9375rem; color: var(--muted-2); flex: none; }


/* ===========================================================================
   #results BASLIK BLOGU — hedef tasarim "afrrr.jpg" (Hamza 17.09.2026)
   Eksikler olculdu: (a) basligin ustunde altin cizgili "REAL RESULTS"
   etiketi yoktu, (b) sagda "12+ MONTHS / FOLLOW-UP" rozeti yoktu,
   (c) filtre haplari ciplakti -- hedefte aktif hapta OK, digerlerinde
   konuya ait IKON var (FUE kok sogani, DHI implanter kalemi, afro ve
   kadin basi). Dort ikon sprite'a eklendi (tools/_sprite.html).
   =========================================================================== */
.sonuc-ust {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-4); margin-bottom: var(--s-4); flex-wrap: wrap;
}
.sonuc-ust__etiket {
  display: inline-flex; align-items: center; gap: 0.625rem;
  font-family: var(--font-head); font-size: 0.75rem; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase; color: var(--gold-700);
}
.sonuc-ust__etiket i {
  width: 1.75rem; height: 2px; background: var(--gold-400);
  border-radius: var(--r-pill); flex: none;
}
.sonuc-ust__rozet {
  display: inline-flex; align-items: center; gap: 0.5625rem;
  padding: 0.4375rem 0.875rem; border-radius: var(--r-md);
  background: var(--gold-50); color: var(--gold-700);
}
.sonuc-ust__rozet svg { width: 1.125rem; height: 1.125rem; flex: none; }
.sonuc-ust__rozet b {
  display: block; font-family: var(--font-head); font-size: 0.8125rem;
  letter-spacing: .06em; text-transform: uppercase; color: var(--navy-900);
}
.sonuc-ust__rozet > span > span,
.sonuc-ust__rozet > span { font-size: 0.6875rem; letter-spacing: .12em; text-transform: uppercase; }

/* filtre haplarindaki ikonlar */
.sonuc-filtre .chip svg { width: 1.0625rem; height: 1.0625rem; flex: none; }
.sonuc-filtre .chip.is-active svg { width: 0.9375rem; height: 0.9375rem; }

@media (max-width: 760px) {
  /* Hedefte baslik, paragraf ve haplarin hepsi SOLA dayali; bizde
     `.sec-head` ortaliydi (olculdu: text-align center). */
  #results .sec-head { text-align: left; }
  #results .sec-head .lead { margin-inline: 0; }
  .sonuc-filtre { justify-content: flex-start; }
  .sonuc-ust { margin-bottom: var(--s-3); }
  .sonuc-ust__rozet { padding: 0.375rem 0.6875rem; }
}


/* ===========================================================================
   KOORDINATOR FOTOGRAFININ ALT KENARI (Hamza 17.09.2026: "bu gorselin alt
   tarafi sorunlu")
   Olculdu: kaynak 766x793; oznenin (koyu ceket) alt siniri y=632, yani
   gorselin alt %20'si BOS bulanik zemin (RGB 193-207) ve duz kesiliyor.
   1100px altinda kutu `height:auto` oldugu icin bu olu bant oldugu gibi
   gorunuyordu. Kutu oznenin bittigi yerde kesilir (766/640) ve gorsel
   USTTEN hizalanir; alt kenara da yumusak gecis verilir ki kart zeminine
   sert bir cizgiyle oturmasin.
   =========================================================================== */
@media (max-width: 1100px) {
  .koord-foto {
    aspect-ratio: 766 / 640; height: auto;
    object-fit: cover; object-position: center top;
    -webkit-mask-image: linear-gradient(180deg, #000 88%, transparent 100%);
            mask-image: linear-gradient(180deg, #000 88%, transparent 100%);
  }
}


/* ===========================================================================
   #results GUVEN LISTESI — hedef "ChatGPT Image 17 Eyl 2026 00_57_46"
   (Hamza: "bu bolumu boyle yap ama bir tik sade olabilir")
   Hedefte: beyaz KART, satirlar ince ayracla ayrilmis, ikonlar ALTIN
   HALKALI krem daire icinde, baslik koyu lacivert + alt satir soluk.
   SADELESTIRME: hedefteki sagdaki ">" isareti KONULMADI -- bu satirlar
   baglanti degil; tiklanmayan bir ok kullaniciyi yaniltir.
   Yalniz mobil/tablet: masaustundeki dort kolonluk serit korunur.
   =========================================================================== */
@media (max-width: 900px) {
  #results .serit-olgu {
    background: #fff; border: 1px solid var(--line);
    border-radius: var(--r-lg); overflow: hidden;
    box-shadow: 0 0.125rem 0.75rem rgba(3, 27, 69, .05);
  }
  #results .serit-olgu > div {
    gap: var(--s-4); padding: var(--s-4) var(--s-5);
    border-left: 0; border-top: 1px solid var(--line);
  }
  #results .serit-olgu > div:first-child { border-top: 0; }
  /* ikon: krem daire + altin halka */
  #results .serit-olgu svg {
    width: 1.375rem; height: 1.375rem; color: var(--navy-800);
    box-sizing: content-box; padding: 0.625rem;
    background: var(--gold-50); border: 1px solid var(--gold-200);
    border-radius: var(--r-pill);
  }
  #results .serit-olgu span b { font-size: 1rem; margin-bottom: 0.125rem; }
  #results .serit-olgu span { font-size: 0.84375rem; }
}


/* ===========================================================================
   ANALIZ KARTI (.result-cta) — hedef "ChatGPT Image 17 Eyl 2026 01_03_15"
   Eksikler olculdu: (a) basliktan hemen listeye geciliyordu, hedefte ARADA
   aciklama paragrafi var (eklendi), (b) ozellik ikonlari ciplakti, hedefte
   ACIK MAVI DAIRE rozet icinde, (c) buton metin kadar dardi, hedefte TAM
   GENISLIK. Masaustu duzeni etkilenmez.
   =========================================================================== */
.result-cta__metin {
  margin-top: 0.625rem; font-size: 0.9375rem; line-height: 1.55; color: var(--muted);
}
@media (max-width: 760px) {
  .result-cta__body .mini-facts { display: grid; gap: var(--s-3); margin-top: var(--s-5); }
  .result-cta__body .mini-facts > span {
    display: flex; align-items: center; gap: var(--s-3);
    font-size: 0.9375rem; color: var(--navy-800);
  }
  .result-cta__body .mini-facts svg {
    width: 1.25rem; height: 1.25rem; color: var(--navy-800); flex: none;
    box-sizing: content-box; padding: 0.5625rem;
    background: var(--blue-50); border-radius: var(--r-pill);
  }
  .result-cta__aksiyon { justify-items: stretch; }
  .result-cta__aksiyon .btn { width: 100%; justify-content: center; }
  .result-cta__aksiyon .band__note { justify-self: start; }
}


/* ===========================================================================
   TAYA BLOGU — hedef "ChatGPT Image 17 Eyl 2026 01_36_08" (Hamza onayladi:
   "taya blogune gore yap"). Hedefteki dort ozellik metni bizde ZATEN AYNI;
   eksik olan GORSEL islem:
     (a) baslik uc katmanli: beyaz "Our tours are organised by" + ALTIN
         "Taya Travel," + normal aciklama,
     (b) dort ozellik saydam KUTU icinde, ikon ALTIN HALKALI dairede,
         baslik ile alt satir arasinda kisa ALTIN CIZGI, metin SOLA dayali,
     (c) "Learn more" duz baglantiydi, hedefte HAP BUTON.
   =========================================================================== */
/* `.taya__metin b` (0-2-0) sinif tekini (0-1-0) eziyordu: marka ALTIN degil
   beyaz kaliyordu (olculdu: rgb(255,255,255)). Kap secicisiyle esitlendi. */
.taya__metin .taya__ust { display: block; font-family: var(--font-head); font-size: 1.125rem; color: #fff; }
.taya__metin .taya__marka {
  display: block; font-family: var(--font-head); font-size: 1.375rem;
  color: var(--gold-400); line-height: 1.15; margin-bottom: 0.25rem;
}

@media (max-width: 1100px) {
  /* Olculdu 768px: `.taya__olgu` hala 4 kolondu, kutular 100px'e dusup ic
     metin tasiyordu (8 tasma). Tum mobil/tablet araliginda 2 kolon. */
  .taya__olgu { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); }
  .taya__olgu span {
    display: block; text-align: left;
    padding: var(--s-4); border-radius: var(--r-md);
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(255, 255, 255, .10);
  }
  .taya__olgu svg {
    width: 1.25rem; height: 1.25rem; box-sizing: content-box; padding: 0.5625rem;
    border: 1px solid rgba(233, 196, 118, .45); border-radius: var(--r-pill);
    margin-bottom: 0.625rem;
  }
  .taya__olgu b { display: block; font-size: 0.875rem; margin-bottom: 0.4375rem; }
  /* baslik ile alt satir arasindaki kisa altin cizgi */
  .taya__olgu b::after {
    content: ""; display: block; width: 1.5rem; height: 2px; margin-top: 0.4375rem;
    background: var(--gold-400); border-radius: var(--r-pill);
  }

  /* alt satir: yasal metin + hap buton */
  .taya-alt { flex-direction: column; align-items: flex-start; gap: var(--s-4); }
  .taya-alt__link {
    background: linear-gradient(180deg, var(--navy-600) 0%, var(--navy-700) 100%);
    color: #fff; padding: 0.75rem var(--s-6); border-radius: var(--r-pill);
    align-self: center;
  }
}


/* ===========================================================================
   "Who does what" KARTI — hedef "ChatGPT Image 17 Eyl 2026 01_36_48"
   Farklar olculdu: (a) ikon metnin SOLUNDAYDI, hedefte USTTE ve ALTIN
   HALKALI daire icinde, (b) baslik tek renkti, hedefte ikinci satir ALTIN
   ve daha buyuk, (c) alt satirdaki ikon ile ok ciplakti, hedefte ikisi de
   KREM DAIRE rozet icinde. Masaustu duzeni etkilenmez.
   =========================================================================== */
.kim-ne__vurgu { color: var(--gold-400); }

@media (max-width: 1100px) {
  .kim-ne__sol { display: block; }
  .kim-ne__ikon {
    width: 3.75rem; height: 3.75rem; border-radius: var(--r-pill);
    border: 1px solid rgba(233, 196, 118, .45);
    margin-bottom: var(--s-4);
  }
  .kim-ne__sol b { font-size: 1.375rem; line-height: 1.22; }
  .kim-ne__sol p { margin-top: var(--s-3); font-size: 0.875rem; }

  /* alt satir: iki yuvarlak krem rozet */
  .kim-ne__link .icon-box {
    width: 2.75rem; height: 2.75rem; border-radius: var(--r-pill);
    background: var(--gold-50); color: var(--gold-700); flex: none;
  }
  .kim-ne__ok {
    box-sizing: content-box; width: 1rem; height: 1rem; padding: 0.875rem;
    background: var(--gold-50); color: var(--gold-700);
    border-radius: var(--r-pill);
  }
}

/* Hedefte ikon metnin SOLUNDA; ama 390px'te kutu 145px kaliyor ve yan yana
   dizince alt satir tasip basligin uzerine biniyor (olculdu). Yan yana duzen
   yalniz YER OLAN genislikte (>=560px) acilir; altinda ikon ustte kalir.
   Izgara deseni: ikon iki satiri kapsar, baslik ve isimsiz alt metin
   dugumu ikinci kolona dizilir (sitede `.wa-bant__olgu` ile ayni desen). */
/* (560px kapisi 17.09.2026'da KALDIRILDI: olculer hedeften alinip
   kucultulunce yan yana duzen 390px'te de tasmadan siginca sart kalmadi.) */


/* ===========================================================================
   ILETISIM KANALLARI — hedef "ChatGPT Image 17 Eyl 2026 00_48" IKINCI TUR
   Hamza 17.09.2026: "birebir yap demistim bir cok yeri yapmamissin".
   Ilk turda yalniz ust etiket + durum hapi + ikon halesi yapilmis; hedefin
   TASIYICI ogesi atlanmisti. Playwright olcumu (390px viewport):
     .koord-kanal li -> background rgba(0,0,0,0) · border-radius 0px ·
                        box-shadow none · padding 0px
   Yani hedefteki BEYAZ KART hic yoktu: haplar ve rozetler dogrudan bolumun
   mavi degrade zemininde (#F6FAFF->#EAF3FF) yuzuyordu. Digerleri:
     - "Chat now" soluk hapti (zemin #E4F8EC / metin #0B7A42) — hedefte DOLU
       yesil hap, beyaz metin, dusen golge.
     - Telefon dugmesi 163,4px, cercevesiz ve ONDEKI TELEFON IKONU yoktu
       (olculdu telIkonVar=false) — hedefte cerceveli genis hap, ikon + ok.
     - "Here for you" el yazisi + altin firca: YOK.
     - Gizlilik rozetinde buyuk soluk kalkan filigrani: YOK.
     - WhatsApp kartinin sag ust kosesindeki yesil yaprak: YOK.
   Ikon capi da hedeften buyuktu: hedefte yesil daire ~40px + 7px hale = 56px
   dis cap; bizde 52px + 8px = 68px (%21 buyuk) -> 42+7=56'ya cekildi.
   =========================================================================== */
.koord-kanal { gap: 0.75rem; }

.koord-kanal__kart {
  position: relative; overflow: hidden;
  gap: 0.875rem; padding: 1rem 1rem 1.125rem;
  background: #fff; border-radius: 1.375rem;
  box-shadow: 0 0.0625rem 0.125rem rgba(7, 27, 61, .04),
              0 0.625rem 1.75rem rgba(7, 27, 61, .06);
}
.koord-kanal__govde { flex: 1 1 auto; min-width: 0; }

/* ikon rozeti hedef olcusune indirildi; hale halkasi da 8 -> 7px */
.koord-kanal__ikon { width: 2.625rem; height: 2.625rem; margin-top: 0.125rem; }
.koord-kanal__ikon svg { width: 1.3125rem; height: 1.3125rem; }
.koord-kanal__ikon--wa    { box-shadow: 0 0 0 0.4375rem rgba(37, 211, 102, .13); }
.koord-kanal__ikon--mavi  { box-shadow: 0 0 0 0.4375rem rgba(0, 104, 255, .09); }
.koord-kanal__ikon--altin { box-shadow: 0 0 0 0.4375rem rgba(197, 154, 74, .14); }

/* hedefteki yesil yaprak: WhatsApp kartinin sag ust kosesi.
   Yaprak bicimi = capraz kose yuvarlamasi (0 100% 0 100%). */
.koord-kanal__kart--wa::after {
  content: ""; position: absolute; top: -2.75rem; right: -2.5rem;
  width: 7.5rem; height: 7.5rem; pointer-events: none;
  border-radius: 0 100% 0 100%; transform: rotate(-24deg);
  background: linear-gradient(150deg, rgba(37, 211, 102, .17), rgba(37, 211, 102, .02));
}

/* "Chat now": hedefte DOLU yesil hap, beyaz metin, dusen golge */
.koord-kanal__link--wa {
  /* WCAG AA: beyaz metin gradyanin HER noktasinda >=4.5 olmali. Eski
     gradyan (#24B45C -> #12874A) orta noktada #1b9e53 veriyordu ve beyaz
     metin 3.48'de kaliyordu (tarayicida olculdu 17.09.2026, kaynaktan
     bakinca gorunmuyor). Yeni gradyan: ust 4.60 · orta 6.19 · alt 8.35. */
  background: linear-gradient(180deg, #15873B 0%, #0A5A2F 100%);
  color: #fff; border-radius: var(--r-pill);
  padding: 0.6875rem 1.125rem; font-size: 0.875rem;
  box-shadow: 0 0.375rem 0.875rem rgba(10, 90, 47, .32);
}
.koord-kanal__link--wa svg { width: 1rem; height: 1rem; }

/* Telefon dugmesi: cerceveli genis hap — onde telefon ikonu, sonda ok.
   `max-width` el yazisina yer birakir (olculdu: metin kolonu 390px'te 256px,
   el yazisi 60px + 8px bosluk -> dugmeye 188px kaliyor). */
.koord-kanal__link--tel {
  gap: 0.5rem; max-width: calc(100% - 4.25rem);
  padding: 0.6875rem 0.8125rem; border-radius: var(--r-pill);
  background: #F1F7FF; border: 1px solid rgba(0, 104, 255, .2);
  font-size: 0.875rem; font-variant-numeric: tabular-nums;
}
.koord-kanal__link--tel > span { white-space: nowrap; }
.koord-kanal__link--tel .koord-kanal__on { width: 1rem; height: 1rem; flex: none; }
.koord-kanal__link--tel .koord-kanal__ok { width: 0.9375rem; height: 0.9375rem; flex: none; margin-left: 0.125rem; }

/* "Here for you" el yazisi — hedefte kartin SAG ALTINDA, altin firca ile.
   `.script` mobilde global olarak gizli (1100px alti); hedef tasarim bunu
   KART ICINDE istiyor, o yuzden yalniz bu ornek geri aciliyor. Golge de
   kaldirildi: `.script` tabani koyu zemin icin drop-shadow tasiyor, beyaz
   kartta kirli gorunuyordu. */
.koord-kanal__yazi.script {
  position: absolute; right: 0.875rem; bottom: 0.75rem; left: auto; top: auto;
  width: 3.75rem; text-align: right;
  font-size: 1.0625rem; line-height: 1.04; transform: rotate(-7deg);
  filter: none;
}
.koord-kanal__yazi .firca { width: 3.25rem; margin-left: auto; margin-top: 0.3125rem; height: 0.25rem; }
@media (max-width: 1100px) { .koord-kanal__yazi.script { display: block; } }

/* 24/7 haplari: hedefte NOTR GRI (bizde mavi #EAF3FF idi, beyaz kart uzerinde
   mavi kartin kendi mavisiyle cakisiyordu) */
.koord-kanal__saat > span { background: #F1F4F9; }

/* gizlilik rozeti: hedefte kartlarla AYNI yaricap, tam genislik ve sagda
   buyuk soluk kalkan filigrani */
.koord-rozet {
  position: relative; overflow: hidden; width: 100%;
  border-radius: 1.375rem; padding: 0.875rem 1rem;
}
.koord-rozet__filigran {
  position: absolute; right: -0.75rem; top: 50%; translate: 0 -50%;
  width: 4.75rem; height: 4.75rem; color: var(--navy-900); opacity: .07;
  pointer-events: none;
}

/* masaustu kolonu: kartlar ic dolgu kazandi, 20,5rem'de metin kolonu
   20,5-2(dolgu)-3,5(ikon) = 15rem'e dusuyordu -> 23,5rem.
   KAPSAM SART (Hamza 17.09.2026: "burasi neden bos, hani sag sol denge"):
   kurali kapsamsiz yazmistim ve 1100px altindaki `max-width: none`i de
   eziyordu. Olculdu: 467px ekranda kartlar 376px'te kalip SAGDA 75px
   (600px'te 208px) bos serit birakiyordu, soldaki bosluk ise 16px --
   yani bariz dengesizlik. Tek kolonlu duzende kartlar TAM GENISLIK olur. */
@media (min-width: 1201px) {
  #free-analysis .koord-kanal { max-width: 23.5rem; }
}

/* --- ayni hedefin ikinci olcum turu (390px) ---------------------------------
   (a) 24/7 haplari ALT ALTA dusuyordu: 149,8 + 126,2 + 8 = 284px, metin
       kolonu 270px. Hedefte YAN YANA -> yazi 12,5->12px, ic dolgu ve ikon
       kuculdu, kart dolgusu 16->15px (metin kolonu 270->276px).
   (b) Gizlilik rozetinde cumle iki satira dusuyordu; hedefte TEK satir.
       Etiket 14,5->12px, cumle 13,5->13px, ikon 34->32px.
   (c) Rozet ust boslugu var(--s-6)=2rem idi, kartlar arasi 0,75rem;
       hedefte ayni ritim.
   --------------------------------------------------------------------------- */
.koord-kanal__kart { padding: 1rem 0.9375rem 1.125rem; gap: 0.8125rem; }

.koord-kanal__saat { gap: 0.375rem; }
.koord-kanal__saat > span { padding: 0.3125rem 0.6875rem; font-size: 0.75rem; gap: 0.375rem; }
.koord-kanal__saat svg { width: 0.875rem; height: 0.875rem; }

.koord-rozet { margin-top: 0.75rem; gap: 0.75rem; }
.koord-rozet__ikon { width: 2rem; height: 2rem; border-radius: 0.5rem; }
.koord-rozet__ikon svg { width: 1rem; height: 1rem; }
.koord-rozet b { font-size: 0.75rem; line-height: 1.25; }
.koord-rozet > span:last-of-type { font-size: 0.8125rem; }

/* rozet ucuncu tur: cumle hala iki satirdi. Olculdu 390px'te ic genislik 326px,
   ihtiyac = ikon 32 + 3x12 bosluk + etiket 82 + ayrac 1 + cumle 178 = 329 (3px
   eksik). Dolgu 16->14px, bosluklar 12->10px -> 185px kaldi, cumle tek satir. */
.koord-rozet { padding: 0.875rem; gap: 0.625rem; }
/* yaprak bir tik kucultuldu: hedefte kosede petal, bizde ceyrek daire gibiydi */
.koord-kanal__kart--wa::after { top: -2.25rem; right: -2rem; width: 6.5rem; height: 6.5rem; }

/* Olculdu: etiket TEK satirda 106,8px yiyordu, cumleye 161,1px kaliyor ama
   ihtiyaci 178px -> iki satira dusuyordu. HEDEFTE etiket zaten iki satir
   ("DATA / PROTECTED"), cumle tek satir. max-width ile bolunme noktasi
   bosluga sabitlendi: etiket ~68px, cumleye ~200px kaliyor. */
.koord-rozet b { max-width: 5rem; flex: none; }

/* 380px ALTI: el yazisi icin ayrilan 68px, telefon dugmesini 172px'e sikistiriyor
   ama icerigin ihtiyaci 197px -> OK dugmeden TASIYORDU (olculdu 360px: dugme
   89-261, ok 260-275, yani 14px disari). Hedef tasarim ~390px icin; dar
   telefonda el yazisi dusuyor, dugme tam genislige aciliyor. */
@media (max-width: 379px) {
  .koord-kanal__yazi.script { display: none; }
  .koord-kanal__link--tel { max-width: 100%; }
}


/* ===========================================================================
   HAMZA 17.09.2026 IKINCI DENETIM TURU — "bir cok yeri yapmamissin"
   Her hedef gorsel mobilde (390px) yeniden olculdu; asagidakiler OLCUM
   FARKI cikanlar. Olcumsuz hicbir kural eklenmedi.
   =========================================================================== */

/* --- ARACI BANDI (IMG_3038) ----------------------------------------------
   (a) Baslik satir araligi 33px/20px = 1,65 idi; iki satirin arasinda hedefte
       olmayan 13px bosluk birakiyordu. Hedef ~1,08.
   (b) "Learn more" 304px = TAM GENISLIK idi; hedefte SOLA yaslanmis kompakt
       hap. 900px kurali genislemeyi dayatiyordu, burada geri aliniyor. */
.araci-bant b { line-height: 1.1; }
@media (max-width: 900px) {
  .araci-bant__link.btn { width: auto; align-self: flex-start; justify-content: center; }
}
/* hedefteki sag koselerdeki soluk egri imza */
.araci-bant { position: relative; overflow: hidden; }
.araci-bant::after {
  content: ""; position: absolute; right: -6.25rem; top: -5rem;
  width: 15rem; height: 15rem; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle at 30% 70%, rgba(156, 199, 255, .10), rgba(156, 199, 255, 0) 68%);
}

/* --- "Who does what" KARTI (01_36_48) ------------------------------------
   Hedefte lacivert kartin sag ust kosesinde ic ice iki soluk altin YAY var. */
.kim-ne { position: relative; overflow: hidden; }
.kim-ne::after {
  content: ""; position: absolute; right: -7.5rem; top: -6.25rem;
  width: 18.75rem; height: 18.75rem; border-radius: 50%; pointer-events: none;
  border: 1px solid rgba(233, 196, 118, .14);
  box-shadow: inset 0 0 0 4.375rem rgba(0,0,0,0), 0 0 0 3.75rem rgba(233, 196, 118, .05);
}

/* --- #results FILTRE HAPLARI (afrrr.jpg) ---------------------------------
   Hedefte ilk satir "All results + FUE + DHI"; bizde haplar 155/110/105px
   olup 386px tutuyor ve 358px'e sigmayip UC satira dagiliyordu. Yatay ic
   dolgu kisaldi (dokunma hedefi 44px yuksekligi korunuyor). */
@media (max-width: 760px) {
  #results .chip { padding-inline: 0.75rem; gap: 0.375rem; font-size: 0.875rem; }
  #results .chip svg { width: 1rem; height: 1rem; }
}

/* --- GUVEN LISTESI (00_57_46) --------------------------------------------
   Hedefte ikon halkasi KREM/ALTIN; bizde soluk mavi-gri idi. Hamza "bir tik
   sade olabilir" dedigi icin hedefteki sag chevron EKLENMEDI: satirlar
   tiklanabilir degil, chevron yanlis dokunma vaadi verirdi. */
#results .serit-olgu--yuvarlak svg {
  border-color: rgba(197, 154, 74, .42);
  background: var(--gold-50);
  color: var(--gold-700);
}

/* --- ANALIZ KARTI (01_03_15) ---------------------------------------------
   Hedefte fotografin sag altinda "Healthier Hair / Brighter You" el yazisi
   var; `.script` 1100px altinda global gizliydi, bu ornek geri aciliyor. */
@media (max-width: 1100px) {
  .result-cta__yazi.script {
    display: block; position: absolute; right: 1rem; left: auto;
    top: 8.5rem; bottom: auto; width: 8.5rem; text-align: right;
    font-size: 1.125rem; line-height: 1.12; color: var(--navy-900);
    transform: rotate(-5deg); filter: none; z-index: 2;
  }
  .result-cta__yazi .firca { width: 6.25rem; margin-left: auto; }
}

/* --- TAYA BLOGU (01_36_08) -----------------------------------------------
   (a) Basliktaki iki <br> KALDIRILDI (markup): `.taya__ust` ve `.taya__marka`
       zaten `display:block` oldugu icin her <br> fazladan BOS SATIR
       uretiyordu -- olculdu: paragrafta 5 gorunur satir varken 9 satir
       kutusu vardi, aradaki 4'u bos. Hedefte satirlar bitisik.
   (b) Ozellik kutularinda ikon USTTEYDI; hedefte metnin SOLUNDA. Yan yana
       duzen daha once 560px'e kapatilmisti cunku o olculerde tasiyordu;
       olculer hedeften alinarak kucultuldu (kutu 147px: 10 dolgu + 36 ikon
       + 10 bosluk + 81 metin = 137 < 147) ve tum mobilde acildi.
   (c) Hedefteki sag ust kose imzasi (ucak + "People / Places / A healthier /
       tomorrow" + altin cizgi) eklendi. */
.taya__metin p > .taya__ust  { margin-bottom: 0.0625rem; }
.taya__metin p > .taya__marka { margin-bottom: 0.1875rem; line-height: 1.1; }

.taya { position: relative; overflow: hidden; }
.taya__imza {
  position: absolute; right: 1.125rem; top: 1.125rem; z-index: 2;
  font-family: var(--font-head); font-size: 0.5625rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; text-align: right;
  line-height: 1.85; color: rgba(214, 231, 255, .62); pointer-events: none;
}
.taya__imza::after {
  content: ""; display: block; width: 1.75rem; height: 2px; margin: 0.4375rem 0 0 auto;
  background: var(--gold-400); border-radius: var(--r-pill);
}
.taya__ucak {
  display: block; width: 1.0625rem; height: 1.0625rem; margin: 0 0 0.3125rem auto;
  color: var(--gold-400); transform: rotate(38deg);
}
/* ucagin birakttigi altin iz + kure yayi */
.taya::before {
  content: ""; position: absolute; right: -5.625rem; top: -6.875rem;
  width: 17.5rem; height: 17.5rem; border-radius: 50%; pointer-events: none;
  border: 1px solid rgba(214, 231, 255, .10);
  background: radial-gradient(circle at 34% 72%, rgba(120, 170, 235, .12), rgba(120, 170, 235, 0) 66%);
}

@media (max-width: 1100px) {
  .taya__olgu span {
    display: grid; grid-template-columns: auto minmax(0, 1fr);
    column-gap: 0.625rem; align-items: center;
    padding: 0.75rem 0.625rem;
  }
  .taya__olgu svg {
    grid-row: span 2; align-self: center; margin-bottom: 0;
    width: 1rem; height: 1rem; padding: 0.5rem;
  }
  .taya__olgu b { grid-column: 2; font-size: 0.78125rem; margin-bottom: 0.25rem; }
  .taya__olgu b::after { width: 1.125rem; margin-top: 0.25rem; }
  .taya__imza { font-size: 0.5rem; line-height: 1.8; right: 0.875rem; top: 0.875rem; }
}

/* Dugme hala 304px = tam genislikti: kap `display:grid` ve izgara ogesinin
   varsayilan `justify-self: stretch`'i `width:auto`yu sutun genisligine
   cekiyor -- `align-self` blok eksenini yonetir, satir eksenini DEGIL. */
@media (max-width: 900px) { .araci-bant__link.btn { justify-self: start; } }

/* Taya ozellik kutusu: izgara satirlari kart yuksekligine YAYILIYOR ve altin
   cizgi ile alt satir arasinda hedefte olmayan bosluk kaliyordu. */
.taya__olgu span { align-content: start; }

/* Olculdu 390px: ucak 38 derece donunce kutusu 17->23px'e cikip imzayi 3px
   asiyordu; el yazisi ise donme yuzunden karti 2px asiyordu. */
.taya__ucak { margin-right: 0.1875rem; }
@media (max-width: 1100px) { .result-cta__yazi.script { right: 1.5rem; width: 8rem; } }

/* El yazisi gorunur ama YANLIS YERDE ciziliyordu: olculdu 390px'te kutusu
   y=-39530, karti ise y=-38257 -- yani 1273px YUKARIDA. Sebep: `.result-cta`
   `position:static`, mutlak konum uzak bir atadan cozuluyordu. Kapsam yalniz
   mobil: masaustunde yazinin mevcut konumu bozulmasin. */
@media (max-width: 1100px) { .result-cta { position: relative; } }

/* firca hedefte kisa bir swash; bizde 100px ile yazinin soluna tasiyordu */
@media (max-width: 1100px) { .result-cta__yazi .firca { width: 3.75rem; height: 0.1875rem; } }

/* --- HABER BULTENI (IMG_3036) --------------------------------------------
   Hedefte formun ALTINDA uc guven ogesi (daire ikon + dikey ayrac) ve
   gizlilik satiri KARTIN ICINDE. Bizde ucu de yoktu; gizlilik satiri kartin
   DISINDA duruyordu. Ayrica hedefte "Subscribe" tam genislik. */
.newsletter__olgu {
  flex: 1 1 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: var(--s-2); padding-top: var(--s-5);
  border-top: 1px solid rgba(255, 255, 255, .10);
}
.newsletter__olgu span {
  display: flex; flex-direction: column; align-items: center; gap: 0.5rem;
  text-align: center; font-family: var(--font-head); font-size: 0.78125rem;
  font-weight: 700; color: #fff;
}
.newsletter__olgu span + span { border-left: 1px solid rgba(255, 255, 255, .10); }
.newsletter__olgu svg {
  box-sizing: content-box; width: 1.0625rem; height: 1.0625rem; padding: 0.625rem;
  background: rgba(255, 255, 255, .08); border-radius: var(--r-pill); color: #DCE8FA;
}
.newsletter__gizlilik {
  flex: 1 1 100%; display: flex; align-items: center; gap: 0.4375rem;
  margin-top: var(--s-4); font-size: 0.78125rem; color: #8FA8CA;
}
.newsletter__gizlilik svg { width: 0.8125rem; height: 0.8125rem; flex: none; }
@media (max-width: 760px) {
  .newsletter form { flex-direction: column; align-items: stretch; }
  .newsletter input { min-width: 0; width: 100%; }
  .newsletter form .btn { width: 100%; justify-content: center; }
  .newsletter__olgu span { font-size: 0.71875rem; }
  .newsletter__olgu svg { width: 0.9375rem; height: 0.9375rem; padding: 0.5rem; }
}

/* --- SSS WHATSAPP KARTI (IMG_3034) ---------------------------------------
   Hedefte uc olgunun ikonu SOLUK YESIL DAIRE icinde ve aralarinda dikey
   ayrac var; bizde ikonlar ciplakti ve ayrac yoktu. */
.sss-wa__olgu > span { position: relative; }
.sss-wa__olgu > span + span::before {
  content: ""; position: absolute; left: calc(var(--s-3) * -0.5); top: 12%;
  width: 1px; height: 76%; background: var(--line-2);
}
.sss-wa__olgu svg {
  box-sizing: content-box; width: 1rem; height: 1rem; padding: 0.5625rem;
  background: #E9F7EF; color: var(--green-900); border-radius: var(--r-pill);
}

/* --- KOORDINATOR FORMU: gizlilik satiri -----------------------------------
   `.koord-gizlilik` `display:flex` idi; kutunun DOGRUDAN cocuklari CIPLAK
   METIN + `<b>` oldugu icin ikisi AYRI FLEX OGESI, yani ayri SUTUN oluyordu.
   Masaustunde genislik yettigi icin tek satir gorunuyor, 390px'te uc dar
   satira bolunuyordu (olculdu: yukseklik 64px / satir yuksekligi 21px = 3
   satir, metin iki kolona ayrik). Akici paragrafa cevrildi, ikon satir ici. */
.koord-gizlilik { display: block; }
.koord-gizlilik svg {
  display: inline-block; vertical-align: -0.15em; margin-right: 0.375rem;
}


/* ===========================================================================
   WHATSAPP BANTLARI — HEDEFLERLE BIREBIR (IMG_3027 · IMG_3029 · IMG_3034)
   Hamza 17.09.2026: "birebir yap demistim, eksiksiz is yap".
   Olculdu, hedefte olup bizde OLMAYANLAR:
     (a) site.css:7379 `.wa-bant, .yardim-bant { text-align: center }` ile
         mobilde her sey ORTALIYDI; hedeflerin UCU DE SOLA YASLI (yalniz
         uc-ozellik satiri kendi sutununda ortali kaliyor).
     (b) IMG_3027: basligin ustundeki WhatsApp logo rozeti YOKTU.
     (c) IMG_3029: "Get instant answers, personalised recommendations and a
         free consultation." paragrafi MARKUP'TA HIC YOKTU.
     (d) IMG_3034: etiketin ikinci satiri ("We're here for you") ve
         yuzler + "Real people. Real support." el yazisi YOKTU.
   =========================================================================== */
@media (max-width: 760px) {
  /* (a) hedefler SOLA YASLI */
  .wa-bant, .yardim-bant { text-align: left; }
  .wa-bant__metin, .yardim-bant__metin { text-align: left; }
  /* uc ozellik satiri hedefte de kendi sutununda ORTALI -- korunuyor */
  .wa-bant__olgu > span, .yardim-bant__olgu > span { text-align: center; }
  /* eylem kolonu: buton tam genislik kalsin ama alt satir SOLA yaslansin */
  .wa-bant__eylem, .yardim-bant__eylem { justify-items: stretch; }
  .wa-bant__not, .yardim-bant__not { justify-content: flex-start; }
  .wa-bant__alt { justify-content: flex-start; }
}

/* (b) IMG_3027: basligin ustunde WhatsApp logo rozeti */
.wa-bant__rozet {
  display: none; width: 3.25rem; height: 3.25rem; border-radius: 1.125rem;
  background: #25D366; color: #fff; place-items: center;
  margin-bottom: var(--s-4);
  box-shadow: 0 0.5rem 1.25rem rgba(37, 211, 102, .30);
}
.wa-bant__rozet svg { width: 1.75rem; height: 1.75rem; }
@media (max-width: 1100px) { .wa-bant__rozet { display: grid; } }

/* (c) IMG_3029: hedefteki paragraf */
.wa-bant__lead {
  margin-top: var(--s-3); font-size: 0.9375rem; line-height: 1.5;
  color: #BFD4EE; max-width: 34rem;
}

/* (d) IMG_3034: etiketin ikinci satiri + yuzler + el yazisi */
.sss-wa__ust-metin { display: block; line-height: 1.5; }
.sss-wa__ust-metin i {
  display: block; font-style: normal; color: var(--muted-2);
  letter-spacing: .15em;
}
.sss-wa__alt {
  display: flex; align-items: center; gap: var(--s-4);
  margin-top: var(--s-4); margin-bottom: var(--s-5);
}
.sss-wa__yuzler { display: flex; flex: none; }
.sss-wa__yuzler img {
  width: 2.625rem; height: 2.625rem; border-radius: var(--r-pill);
  object-fit: cover; margin-left: -0.75rem; border: 2px solid #fff;
  box-shadow: 0 0.125rem 0.375rem rgba(7, 27, 61, .12);
}
.sss-wa__yuzler img:first-child { margin-left: 0; }
/* `.script` 1100px altinda global gizli; hedef bunu KART ICINDE istiyor */
.sss-wa__yazi.script {
  position: static; display: block; font-size: 1.125rem; line-height: 1.12;
  color: var(--navy-700); transform: rotate(-4deg); filter: none;
}
@media (max-width: 1100px) { .sss-wa__yazi.script { display: block; } }

/* Olculdu 390px: ozellik satiri ile buton arasi 64px (izgara satir bosluğu
   32px + ozelliklerin kendi 32px ust boslugu). Hedeflerde bu aralik belirgin
   sekilde daha dar; ikisi de ~24px. Ayrica yesil banttaki paragrafta
   masaustu icin konmus <br> mobilde DORT satir uretip "and a free
   consultation." yalniz basina kaliyordu -- mobilde <br> etkisizlestirildi. */
@media (max-width: 760px) {
  .wa-bant, .yardim-bant { row-gap: 1.5rem; }
  .wa-bant__metin p br, .yardim-bant__metin p br { display: none; }
  .wa-bant__metin p, .yardim-bant__metin p { font-size: 0.9375rem; line-height: 1.5; }
}

/* ===========================================================================
   YATAY KAYMA — kok neden (Hamza 17.09.2026, ~467px cihaz ekran goruntusu)
   Olculdu: 450px ve UZERI her genislikte `document.scrollWidth` viewport'tan
   +12px buyuk; 430px ve altinda temiz (ilk taramam 360/390/430'u olctugu icin
   tam da taşmanın olmadigi uc genisligi ornekledi ve "temiz" dedi).
   Suclu: bugun eklenen `.koord-rozet__filigran`. `.koord-rozet`e
   `position: relative` vermistim ama `#free-analysis .koord-rozet`
   (1-1-0, KIMLIK secici) `position: static` diyerek onu EZIYOR; filigran
   mutlak konumunu uzak bir atadan cozup rozetin `overflow:hidden` kutusunun
   DISINA cikiyor ve sayfanin kaydirma alanini buyutuyordu (olculdu 467px:
   filigran sag kenari 479px, rozet 352px'te bitiyor).
   Ayni tuzak bu projede daha once `#plan .arac__kolaj`ta yasandi.
   =========================================================================== */
/* DUZELTME KAPSAMI SART: ilk denemede kurali kapsamsiz yazdim ve masaustundeki
   `#free-analysis .koord-rozet { position: absolute; left:76%; width:25rem }`
   kuralini de ezdim -- rozet akisa girip 450-1100px arasinda sayfayi 220px'e
   kadar genisletti (olculdu). Kural YALNIZ mobil/tablet bandina baglanir. */
/* 1200px SINIRI SART: 1101-1200 bandinda da rozet `static` (6218. satir),
   yani filigran orada da kaciyordu (olculdu 1150px: filigran 1110-1157,
   bolum 1150'de bitiyor). 1200 USTUNDE rozet zaten `absolute`, yani
   kendi kapsayicisi ve filigrani `overflow:hidden` ile kirpiyor. */
@media (max-width: 1200px) {
  /* `position: relative` TEK BASINA YETMEZ: masaustu kuralindaki
     `left: 76%; bottom: 4.25rem; width: 25rem` static'ken yok sayiliyordu,
     relative olunca YENIDEN ETKINLESIP rozeti 318px saga itti (olculdu
     450px: rozet sol=334, sag=670, sayfa 220px tasti). Ofsetler de
     notrlenir. */
  #free-analysis .koord-rozet {
    position: relative; left: auto; right: auto; bottom: auto; width: auto;
  }
}

/* ===========================================================================
   GIZLILIK ROZETI — iki kusur (Hamza 17.09.2026 ekran goruntusu)
   (a) Rozet `display:inline-flex` + `width:100%` ile 336px'te takili kaliyordu;
       kanal kartlari 435/568/835px'e cikinca rozet onlardan DAR kalip sagda
       bosluk birakiyordu (olculdu: 467px'te kartlar 435, rozet 336).
       Blok seviyesinde `flex` yapilinca kap genisligini aliyor.
   (b) Kalkan filigrani cumlenin UZERINE BINIYORDU: cumle sag kenari 338px,
       filigran sol kenari 288px -> 50px cakisma (her genislikte ayni).
       Filigran saga sabitlenir, metin kolonuna filigran genisligi kadar
       sag dolgu verilir; boylece cakisma 0 olur.
   =========================================================================== */
@media (max-width: 1200px) {
  .koord-rozet {
    display: flex; width: auto; box-sizing: border-box;
    padding-right: 4.25rem;      /* filigran serit genisligi */
  }
  .koord-rozet > span:last-of-type { flex: 1 1 auto; }
  .koord-rozet__filigran { right: 0.375rem; }
}

/* Filigran cakismasi 50 -> 14px'e indi ama SIFIR olmali: serit 4,25 -> 4,75rem.
   (Olculdu: cumle sag kenari filigranin sol kenarini 14px asiyordu.) */
@media (max-width: 1200px) { .koord-rozet { padding-right: 4.75rem; } }

/* 430px ALTI: rozet ic genisligi 268px'e dusuyor ve cumle (172px ihtiyac,
   137px yer) IKI SATIRA kiriliyor; hedefte TEK satir. Dar telefonda filigran
   seridi daraltilir (kalkan zaten kartin yuvarlak kosesince kirpilir) ve
   cumle bir tik kucultulur -> tek satir. */
@media (max-width: 430px) {
  .koord-rozet { padding-right: 2.75rem; }
  .koord-rozet__filigran { right: -1rem; width: 4rem; height: 4rem; }
  .koord-rozet > span:last-of-type { font-size: 0.78125rem; }
}

/* Olculdu 390px: cumlenin tek satir icin ihtiyaci 159,1px, yeri 157,4px --
   1,7px eksik. Ogeler arasi bosluk 10 -> 8px (3 bosluk = 6px kazanc). */
@media (max-width: 430px) { .koord-rozet { gap: 0.5rem; } }

/* ===========================================================================
   ANALIZ KARTI EL YAZISI — hedefte (01_03_15) yazi DUZ DUVARDA, bizde
   adamin yanagina/cenesine biniyordu. Olculdu: yazi fotografin %57-%94
   yatay araliginda, yuz ise %22-%72 araliginda -> %57-%72 arasi CAKISMA.
   Fotograf 1024x1024 ve `object-fit: cover` ile TAM GENISLIK gosteriliyor,
   yani `object-position` ile yuzu kaydirmak mumkun degil; temiz duvar
   fotografin SAG UST bolgesinde (y<%35 iken x>%70 bos). Yazi oraya alindi.
   =========================================================================== */
@media (max-width: 1100px) {
  .result-cta__yazi.script {
    top: 1.125rem; right: 0.75rem; width: 6.875rem;
    font-size: 1rem; transform: rotate(-4deg);
  }
  .result-cta__yazi .firca { width: 3.25rem; }
}

/* 360px'te rozet cumlesi hala iki satirdi; etiket kutusu 5 -> 4,25rem
   (etiket zaten "DATA / PROTECTED" diye iki satir, daraltmak bicimi bozmaz). */
@media (max-width: 400px) { .koord-rozet b { max-width: 4.25rem; } }

/* Yazi 6,875rem kutuda UC satira kiriliyordu ("Healthier / Hair / Brighter
   You"); hedefte IKI satir. `max-content` ile her satir bolunmeden dizilir,
   kutu en uzun satir kadar olur. Firca da yaziyla hizalanir. */
@media (max-width: 1100px) {
  .result-cta__yazi.script { width: max-content; max-width: 9rem; }
  .result-cta__yazi .firca { width: 4.25rem; margin-left: auto; }
}

/* ===========================================================================
   ABD BOLUMU CTA — 104px OLU BOSLUK + SAG-SOL DENGESIZLIK
   (Hamza 17.09.2026: "burayi da duzelt demistim bosluga bak")
   Olculdu 467px: son kart ile CTA arasi 104px. Sebep `#usa .abd-eylem
   { margin-top: 6.5rem }` -- MASAUSTUNDE mutlak konumlu fotografi gecmek
   icin konmus ama KIMLIK secicisiyle yazildigi icin mobilde de geciyor;
   mobil kurali `.abd-eylem { margin-top: var(--s-5) }` (0-1-0) onu ezemiyor.
   Ayrica buton 297px / kanit 263px iken kolon 435px -> sagda bos serit.
   (Ayni kimlik-secici tuzagi bugun UCUNCU kez: `#plan .arac__kolaj`,
   `#free-analysis .koord-rozet`, simdi bu.)
   =========================================================================== */
@media (max-width: 1100px) {
  #usa .abd-eylem {
    margin-top: var(--s-5);
    display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-4);
  }
  #usa .abd-eylem .btn { width: 100%; justify-content: center; }
  #usa .abd-eylem__kanit { width: 100%; }
}

/* Kanit satiri: 6381. satirdaki `.abd-eylem__kanit > span { width: 100% }`
   metni yuzlerin ALTINA atiyordu ve sagda genis bos serit kaliyordu.
   Olculdu 467px: yuzler ~110px + metin ~180px + bosluk 16 = 306px, kolon
   435px -> YAN YANA rahat siginca satir tek parca olur. */
@media (max-width: 1100px) {
  #usa .abd-eylem__kanit { flex-wrap: nowrap; align-items: center; gap: var(--s-4); }
  #usa .abd-eylem__kanit > span { width: auto; }
}

/* ===========================================================================
   #reviews "Trusted by patients worldwide" olgu seridi
   Hedef "ChatGPT Image 17 Eyl 2026 16_13_25": mobilde TEK SUTUN, her satir
   arasinda TAM GENISLIK yatay ayrac. Bizde `#reviews .yorum-olgu`
   (5924. satir, KIMLIK secicisi) iki sutun dayatiyordu ve araya DIKEY ayrac
   koyuyordu; 435px kolonda basliklar ("Patients from" / "6,000+") sikisiyordu.
   Kimlik ozgullugu ile mobilde tek sutuna alinir.
   =========================================================================== */
@media (max-width: 760px) {
  #reviews .yorum-olgu {
    grid-template-columns: minmax(0, 1fr); gap: 0; max-width: none;
  }
  #reviews .yorum-olgu > div {
    border-left: 0; border-top: 1px solid var(--line);
    padding: var(--s-4) 0;
  }
  #reviews .yorum-olgu > div:first-child { border-top: 0; padding-top: 0; }
}

/* Hedef IMG_3027'de WhatsApp rozeti DAIRE (gercek WhatsApp markasi gibi),
   bizde 1,125rem yaricapli yuvarlak KARE idi. Daireye cevrildi ve hedefteki
   gibi biraz buyutuldu. */
.wa-bant__rozet { border-radius: 50%; width: 3.5rem; height: 3.5rem; }
.wa-bant__rozet svg { width: 1.875rem; height: 1.875rem; }

/* ===========================================================================
   WHATSAPP BANTLARI — TIPOGRAFI HIYERARSISI (IMG_3027 · 3029 · 3032)
   Hamza "hala birebir degil" dedi; hedefle yan yana koyunca fark OLCULDU:
     hedefte  baslik 72px / paragraf 34px  -> oran 2,10
     bizde    baslik 22px / paragraf 15px  -> oran 1,43
   Yani baslik govde metninden AYRISMIYOR, blok duz bir metin yigini gibi
   duruyordu. Oran hedefe cekiliyor (390px'te baslik 30px / paragraf 16px
   = 1,88; uc kolonlu olgu satiri tasmasin diye etiket 13->14px ile sinirli).
   =========================================================================== */
@media (max-width: 760px) {
  #videos .wa-bant__metin h3,
  #reviews .wa-bant__metin b,
  #help .yardim-bant__metin h3 {
    font-size: 1.875rem; line-height: 1.08; letter-spacing: -0.015em;
    display: block;
  }
  .wa-bant__metin p, .yardim-bant__metin p,
  .wa-bant__lead { font-size: 1rem; line-height: 1.5; }
  .wa-bant__olgu b, .yardim-bant__olgu b { font-size: 0.875rem; }
  .wa-bant__olgu span span, .yardim-bant__olgu span span { font-size: 0.75rem; }
  .wa-bant__etiket, .yardim-bant__etiket { font-size: 0.75rem; }
}

/* ===========================================================================
   SONUC KARTI KUNYESI ("Exosome FUE | 5,300 grafts")
   Hamza: "burdaki yaziyi ya ortala ya da daha guzel yap".
   Fotograf ile yorum kartinin arasinda sola yaslı, ciplak bir satirdi.
   ORTALANDI + hap zemin: iki olgu arasindaki ayrac da netlesti.
   =========================================================================== */
@media (max-width: 1100px) {
  #results .sonuc__meta {
    justify-content: center; gap: 0.5rem; flex-wrap: wrap;
    margin-inline: auto; padding: 0.5rem 0.875rem;
    background: var(--bg-2); border-radius: var(--r-pill);
    width: fit-content; max-width: 100%;
  }
  #results .sonuc__meta > span { font-size: 0.78125rem; }
}

/* ===========================================================================
   #guides PANORAMASI — SOL KENARDAKI CAPRAZ KAMA (Hamza: "sol altta sorun var")
   Gorselin KENDISINDE capraz bir kesim var: masaustunde panorama sag kenara
   dayanip sol kenari icerik kolonuna yasliyor, o yuzden sol tarafi saydam
   birakilmis. Olculdu (`istanbul-bosphorus-terrace-panorama.webp`, 586x1024):
     y %9  -> 0 px bos      y %29 -> 36 px (%6,1)
     y %50 -> 25 px (%4,3)  y %69 -> 58 px (%9,9)
     y %89 -> 86 px (%14,7)
   Mobilde gorsel TAM GENISLIGE yayilinca bu kesim kartin ICINDE beyaz bir
   kama birakiyor ve arkadaki metin ("...your journey" -> "ney") oradan
   sizip kirik gorunuyordu. Cozum: en-boy orani gorselin SAGLAM kismina
   (586 x 0,84 = 492) sabitlenip `object-position` saga alinir; boylece
   soldan %16 kirpilir (olculen en genis kama %14,7'nin ustunde) ve kama
   tamamen ekran disinda kalir. Gorsel `data-kirpma="kasitli"` oldugu icin
   oran gecidi bu kadri zaten sorgulamaz.
   =========================================================================== */
@media (max-width: 1100px) {
  #guides .rehber-sag__gorsel {
    aspect-ratio: 492 / 1024;
    object-fit: cover;
    object-position: 100% 50%;
    border-radius: var(--r-lg);
  }
}

/* ===========================================================================
   KOORDINATOR FOTOGRAFI MOBILDE TAM VE NET GORUNUR (Hamza, 18.09.2026:
   "mobilde buna golge koyma ya, tam gorsel net olsun").

   Onceki hal: `@media (max-width: 1100px)` icinde `.koord-foto` hem
   `aspect-ratio: 766/640` ile ALTTAN KIRPILIYOR hem de
   `mask-image: linear-gradient(180deg, #000 88%, transparent 100%)` ile
   son %12'si saydamlastiriliyordu. O maske, kart zeminine yumusak gecis
   versin diye 15.09'da eklenmisti; ekranda KOYU BIR PUS gibi duruyor.

   Olculdu (assets/img/koordinator-foto.e39d27c9.webp, 900x779):
   yatay detay degeri 483. satirda (%62) esigin altina duser, yani gorselin
   alt bolumu oznenin KOYU ceket/omuz alani -- "bos bulanik zemin" DEGIL.
   Eski yorumun dayandigi acik gri bant (RGB 193-207) bu gorselde YOK;
   gorsel o tarihten sonra degismis. Kirpma ve maskenin gerekcesi dustu.

   Yeni hal: kirpma ve maske kaldirilir, gorsel dogal oraniyla TAM gosterilir.
   Kimlik seciciyle de yazilir: `#free-analysis .koord-foto` (1-1-0) taban
   sinif kuralini (0-1-0) ezer -- bu depoda ayni tuzaga uc kez dusuldu.
   =========================================================================== */
@media (max-width: 1100px) {
  .koord-foto,
  #free-analysis .koord-foto {
    aspect-ratio: auto;
    height: auto;
    object-fit: fill;
    -webkit-mask-image: none;
            mask-image: none;
  }
}

/* ===========================================================================
   #ebook MOBILDE SIKISIK DURUYORDU (Hamza, 18.09.2026: "kenar bosluklari
   kaldir, sikisik duruyor ic bolum yoksa").

   Olculdu (390px):
     .container   390  ic bosluk 16/16  -> icerik 358
     .card        358  ic bosluk 32/32  -> 294
     .magnet      292
     .kitap-form  292  ic bosluk 32/32  -> METNE KALAN 228 px
   Yani ayni kutuda IC ICE IKI KEZ 32px bosluk vardi; 390px'lik ekranda
   metin alani 228px'e iniyordu (ekranin %58'i). Masaustunde bu katmanlama
   dogru duruyor, sorun yalniz dar ekranda.

   Duzeltme: dar ekranda DIS kartin yan boslugu kaldirilir, IC kartinki
   20px'e iner. Sayfanin kendi 16px kenar boslugu KORUNUR -- o, tasarim
   sozlesmesinin parcasi; kaldirilirsa metin ekran kenarina yapisir.
   Sonuc: metne kalan 228 -> 318 px.
   =========================================================================== */
@media (max-width: 760px) {
  #ebook .card {
    padding-left: 0;
    padding-right: 0;
  }
  #ebook .kitap-form {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }
}