/* ============================================================================
   hizmet.css — HIZMET (servis) DETAY SAYFASI katmani
   ----------------------------------------------------------------------------
   site.css'ten SONRA yuklenir. Tum renk/bosluk/yaricap degerleri site.css
   :root'undan gelir — burada tek bir ham hex YOK (P3 TOKENS kurali).
   Ana sayfanin site.css'i bu dosyadan HABERSIZDIR; boylece iki sayfa tipi
   birbirini bozmadan gelisebilir (paralel oturum korumasi).
   ============================================================================ */

:root {
  --hz-header: 76px;          /* .site-header min-height */
  --hz-bar: 58px;             /* yapiskan bolum cubugu */
}

/* ---------------------------------------------------------------- ekmek kirintisi */
.hz-yol { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); font-size: 13px; color: #A9C0E0; }
.hz-yol a { color: #A9C0E0; }
.hz-yol a:hover { color: var(--gold-400); }
.hz-yol svg { width: 13px; height: 13px; opacity: .6; flex: none; }
.hz-yol [aria-current] { color: #fff; font-weight: 600; }

/* ---------------------------------------------------------------- kahraman */
.hz-hero {
  background: linear-gradient(155deg, var(--navy-800) 0%, var(--navy-900) 100%);
  color: #fff; padding-block: var(--s-6) var(--s-9); position: relative; overflow: hidden;
}
.hz-hero::after {                              /* altin isik lekesi — dekoratif */
  content: ""; position: absolute; inset: auto -180px -260px auto; width: 620px; height: 620px;
  background: radial-gradient(circle, rgba(237, 190, 92, .16), transparent 62%); pointer-events: none;
}
.hz-hero__duzen { display: grid; grid-template-columns: minmax(0, 1.04fr) minmax(0, .96fr); gap: var(--s-8); align-items: center; margin-top: var(--s-6); }
/* OLCULDU 14.09.2026: baslikta acik renk KALITILMAZ — site.css basliklara
   kendi rengini (navy-900) veriyor, ust ogedeki color:#fff ona ulasmiyor.
   Koyu kahramanda H1 beyaz yerine lacivert cikiyordu (kontrast 1.07). */
.hz-hero .h1, .hz-hero h1 { color: #fff; line-height: 1.04; margin-top: var(--s-4); }
/* Ayni sebep: --gold-700 acik zemin rengi; koyu zeminde 2.77 veriyor. */
.hz-hero .accent-gold { color: var(--gold-400); }
.hz-hero .accent-blue { color: var(--blue-500); }
.hz-hero__lead { margin-top: var(--s-5); font-size: 18px; line-height: 1.62; color: #C6D6EE; max-width: 62ch; }
.hz-hero .eyebrow { color: var(--gold-400); margin-bottom: 0; }

/* Kutu sayisi sayfaya gore degisir: her sayfa icin DOGRULANMIS olgu sayisi
   farkli (kas ekiminde "6-8 saat" yazamayiz, canli metinde boyle bir bilgi
   yok). Sabit dort sutun yerine icerige uyan izgara. */
.hz-hero__olgu { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--s-3); margin-top: var(--s-6); }
.hz-hero__olgu > div {
  background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12);
  border-radius: var(--r-md); padding: var(--s-4);
}
.hz-hero__olgu svg { width: 18px; height: 18px; color: var(--gold-400); }
.hz-hero__olgu b { display: block; margin-top: var(--s-2); font-family: var(--font-head); font-size: 15px; font-weight: 700; line-height: 1.2; }
.hz-hero__olgu span { display: block; margin-top: var(--s-1); font-size: 12.5px; color: #A9C0E0; line-height: 1.4; }

.hz-hero__cta { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-6); }
.hz-hero__not { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4); margin-top: var(--s-4); font-size: 12.5px; color: #A9C0E0; }
.hz-hero__not span { display: inline-flex; align-items: center; gap: 6px; }
.hz-hero__not svg { width: 14px; height: 14px; color: var(--green-500); }

.hz-hero__gorsel { position: relative; }
/* HIZMET HERO GORSELI KIRPILIYORDU (olculdu 18.09.2026, 1366px):
   kutu `aspect-ratio: 5/4` (1,25) idi, fotograflar ise genis (2,29) ->
   `object-fit: cover` her iki yandan %83 kirpiyordu. Hamza ayni sikayeti
   koordinator fotografi icin de yapmisti ("golge koyma, tam gorsel net
   olsun"); ayni ilke burada da gecerli: gorsel KENDI oraniyla gosterilir.
   Kirpma yerine kutu gorsele uyar. */
.hz-hero__gorsel > img { width: 100%; height: auto; border-radius: var(--r-xl); display: block; background: #fff; }
/* Rozet GORSELIN USTUNDE degil ALTINDA (olculdu 14.09.2026): gercek hasta
   fotografinda kutu ikinci kisinin cenesine biniyordu ve 4:3 kirpma fotografin
   altini kesiyordu. Altta dururken fotograf tam gorunuyor, metin de temiz. */
.hz-hero__rozet {
  margin-top: var(--s-4);
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .14); border-radius: var(--r-lg); padding: var(--s-4) var(--s-5);
  display: flex; align-items: center; gap: var(--s-4);
}
.hz-hero__rozet img { width: 34px; height: 34px; object-fit: contain; flex: none; }
.hz-hero__rozet b { display: block; font-family: var(--font-head); font-size: 14px; }
.hz-hero__rozet span { font-size: 12px; color: #A9C0E0; }

/* ---------------------------------------------------------------- yapiskan bolum cubugu */
.hz-bar {
  position: sticky; top: var(--hz-header); z-index: 40;
  background: rgba(255, 255, 255, .94); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.hz-bar .container { display: flex; align-items: center; gap: var(--s-5); min-height: var(--hz-bar); }
.hz-bar nav { display: flex; gap: var(--s-2); overflow-x: auto; scrollbar-width: none; flex: 1 1 auto; min-width: 0; }
.hz-bar nav::-webkit-scrollbar { display: none; }
/* SECICI `nav` ILE DARALTILDI (olculdu 14.09.2026): `.hz-bar a` (0,1,1)
   `.btn--gold`in (0,1,0) rengini eziyordu — cubuktaki altin dugmenin yazisi
   gri-mavi cikiyor, kontrast 3.41'e dusuyordu. */
.hz-bar nav a {
  white-space: nowrap; font-size: 13.5px; font-weight: 600; color: var(--muted);
  padding: 8px var(--s-3); border-radius: var(--r-pill); border: 1px solid transparent;
}
.hz-bar nav a:hover { color: var(--blue-ink); background: var(--blue-50); text-decoration: none; }
.hz-bar nav a.is-active { color: var(--blue-ink); background: var(--blue-50); border-color: var(--blue-100); }
.hz-bar__cta { flex: none; }

/* ---------------------------------------------------------------- iki kolonlu govde */
.hz-duzen { display: grid; grid-template-columns: minmax(0, 1fr) 396px; gap: var(--s-8); align-items: start; }
.hz-govde { min-width: 0; }
.hz-blok { scroll-margin-top: calc(var(--hz-header) + var(--hz-bar) + var(--s-5)); }
.hz-blok + .hz-blok { margin-top: var(--s-9); }
.hz-blok > .h2 { font-size: clamp(27px, 2.3vw, 38px); line-height: 1.1; }
.hz-blok > p { margin-top: var(--s-4); font-size: 16.5px; line-height: 1.72; color: var(--ink); }
.hz-blok > p.lead { font-size: 18px; color: var(--muted); }
.hz-blok .h3 { margin-top: var(--s-6); }
.hz-blok .h3 + p { margin-top: var(--s-3); }
.hz-blok .eyebrow { margin-bottom: var(--s-3); }

/* ---------------------------------------------------------------- hizli cevap kutusu (AI motorlarinin alintiladigi blok) */
.hz-cevap {
  margin-top: var(--s-5); padding: var(--s-5) var(--s-6); border-radius: var(--r-lg);
  background: var(--gold-50); border: 1px solid var(--gold-200); border-left: 4px solid var(--gold-500);
}
.hz-cevap__et {
  display: inline-flex; align-items: center; gap: var(--s-2);
  font-family: var(--font-body); font-size: 11.5px; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--gold-700);
}
.hz-cevap__et svg { width: 15px; height: 15px; }
.hz-cevap p { margin-top: var(--s-3); font-size: 17px; line-height: 1.66; color: var(--ink); }
.hz-cevap p b { font-weight: 700; }

/* ---------------------------------------------------------------- kunye tablosu (at a glance) */
.hz-spec { border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; background: var(--card); }
.hz-spec__ust {
  display: flex; align-items: center; gap: var(--s-3); padding: var(--s-4) var(--s-5);
  background: var(--navy-800); color: #fff;
}
.hz-spec__ust svg { width: 18px; height: 18px; color: var(--gold-400); }
.hz-spec__ust b { font-family: var(--font-head); font-size: 15px; }
.hz-spec table { width: 100%; border-collapse: collapse; }
.hz-spec th, .hz-spec td { padding: var(--s-3) var(--s-5); text-align: left; font-size: 14.5px; vertical-align: top; border-top: 1px solid var(--line); }
.hz-spec tr:first-child th, .hz-spec tr:first-child td { border-top: 0; }
.hz-spec th { width: 38%; font-weight: 600; color: var(--muted); white-space: nowrap; }
.hz-spec td { color: var(--ink); font-weight: 600; }
.hz-spec tbody tr:nth-child(even) { background: var(--bg); }

/* ---------------------------------------------------------------- adim adim islem */
.hz-adimlar { counter-reset: hzadim; margin-top: var(--s-6); display: grid; gap: var(--s-4); }
.hz-adim {
  position: relative; display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: var(--s-5);
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: var(--s-5); box-shadow: var(--shadow-sm);
}
.hz-adim::before {
  counter-increment: hzadim; content: counter(hzadim, decimal-leading-zero);
  width: 56px; height: 56px; border-radius: var(--r-md);
  background: linear-gradient(150deg, var(--navy-700), var(--navy-500));
  color: var(--gold-400); font-family: var(--font-head); font-weight: 800; font-size: 18px;
  display: grid; place-items: center;
}
.hz-adim h3 { font-family: var(--font-head); font-size: 18px; font-weight: 700; line-height: 1.25; }
.hz-adim p { margin-top: var(--s-2); font-size: 15px; line-height: 1.66; color: var(--muted); }
.hz-adim__sure {
  display: inline-flex; align-items: center; gap: 6px; margin-top: var(--s-3);
  font-size: 12px; font-weight: 600; color: var(--blue-ink); background: var(--blue-50);
  border-radius: var(--r-pill); padding: 4px var(--s-3);
}
.hz-adim__sure svg { width: 13px; height: 13px; }

/* ---------------------------------------------------------------- aday / aday degil */
.hz-aday { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5); margin-top: var(--s-6); }
.hz-aday__kut { border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s-6); background: var(--card); }
.hz-aday__kut--evet { border-color: rgba(12, 158, 92, .32); background: linear-gradient(180deg, rgba(12, 158, 92, .05), transparent 58%); }
.hz-aday__kut--hayir { border-color: var(--gold-200); background: linear-gradient(180deg, var(--gold-50), transparent 58%); }
.hz-aday__bas { display: flex; align-items: center; gap: var(--s-3); }
.hz-aday__bas > span { width: 40px; height: 40px; border-radius: var(--r-pill); display: grid; place-items: center; flex: none; }
.hz-aday__kut--evet .hz-aday__bas > span { background: rgba(12, 158, 92, .12); color: var(--green-600); }
.hz-aday__kut--hayir .hz-aday__bas > span { background: var(--gold-200); color: var(--gold-700); }
.hz-aday__bas svg { width: 20px; height: 20px; }
.hz-aday__bas b { font-family: var(--font-head); font-size: 18px; line-height: 1.2; }
.hz-aday ul { margin-top: var(--s-5); display: grid; gap: var(--s-3); }
.hz-aday li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: var(--s-3); font-size: 15px; line-height: 1.6; color: var(--ink); }
.hz-aday li svg { width: 18px; height: 18px; margin-top: 2px; }
.hz-aday__kut--evet li svg { color: var(--green-600); }
.hz-aday__kut--hayir li svg { color: var(--gold-700); }
.hz-aday li b { display: block; }
.hz-aday li span { color: var(--muted); font-size: 14px; }

/* ---------------------------------------------------------------- iyilesme zaman cizgisi */
.hz-zaman { margin-top: var(--s-6); position: relative; padding-left: var(--s-7); }
.hz-zaman::before { content: ""; position: absolute; left: 15px; top: 10px; bottom: 10px; width: 2px; background: linear-gradient(var(--blue-100), var(--gold-200)); }
.hz-zaman__oge { position: relative; padding-bottom: var(--s-6); }
.hz-zaman__oge:last-child { padding-bottom: 0; }
.hz-zaman__oge::before {
  content: ""; position: absolute; left: calc(-1 * var(--s-7) + 9px); top: 6px;
  width: 14px; height: 14px; border-radius: var(--r-pill);
  background: var(--card); border: 3px solid var(--blue-500);
}
.hz-zaman__oge:last-child::before { border-color: var(--gold-500); }
.hz-zaman__ne { font-family: var(--font-head); font-size: 13px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--blue-ink); }
.hz-zaman__oge:last-child .hz-zaman__ne { color: var(--gold-700); }
.hz-zaman__oge h3 { margin-top: var(--s-1); font-family: var(--font-head); font-size: 18px; font-weight: 700; }
.hz-zaman__oge p { margin-top: var(--s-2); font-size: 15px; line-height: 1.68; color: var(--muted); }

/* ---------------------------------------------------------------- risk / guvenlik */
.hz-risk { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); margin-top: var(--s-6); }
.hz-risk > div { border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--s-5); background: var(--card); }
.hz-risk svg { width: 20px; height: 20px; color: var(--blue-ink); }
.hz-risk b { display: block; margin-top: var(--s-3); font-family: var(--font-head); font-size: 15.5px; line-height: 1.25; }
.hz-risk p { margin-top: var(--s-2); font-size: 14px; line-height: 1.62; color: var(--muted); }

/* ---------------------------------------------------------------- kaynaklar */
.hz-kaynak { margin-top: var(--s-5); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s-6); background: var(--bg); }
.hz-kaynak ol { margin-top: var(--s-4); display: grid; gap: var(--s-3); padding-left: var(--s-5); }
.hz-kaynak li { font-size: 14px; line-height: 1.62; color: var(--muted); }
.hz-kaynak li cite { font-style: normal; color: var(--ink); font-weight: 600; }
.hz-kaynak__not { margin-top: var(--s-4); font-size: 13px; color: var(--muted-2); }

/* ---------------------------------------------------------------- sag ray (yapiskan) */
.hz-ray { position: sticky; top: calc(var(--hz-header) + var(--hz-bar) + var(--s-5)); display: grid; gap: var(--s-4); }
.hz-ray__kart { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--card); box-shadow: var(--shadow-md); overflow: hidden; }
.hz-ray__ust { background: linear-gradient(150deg, var(--navy-700), var(--navy-900)); color: #fff; padding: var(--s-5) var(--s-5) var(--s-6); }
.hz-ray__ust .eyebrow { color: var(--gold-400); margin-bottom: var(--s-2); }
.hz-ray__ust b { display: block; font-family: var(--font-head); font-size: 21px; line-height: 1.2; }
.hz-ray__ust p { margin-top: var(--s-3); font-size: 13.5px; line-height: 1.6; color: #A9C0E0; }
.hz-ray__govde { padding: var(--s-5); display: grid; gap: var(--s-3); }
.hz-ray__olgu { display: grid; gap: var(--s-3); margin-top: var(--s-1); }
.hz-ray__olgu li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: var(--s-3); font-size: 13.5px; color: var(--muted); line-height: 1.5; }
.hz-ray__olgu svg { width: 16px; height: 16px; color: var(--green-600); margin-top: 1px; }
.hz-ray__fiyat { border-top: 1px dashed var(--line-2); margin-top: var(--s-2); padding-top: var(--s-4); }
.hz-ray__fiyat > span { font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--muted-2); }
.hz-ray__fiyat b { display: block; margin-top: var(--s-1); font-family: var(--font-head); font-size: 24px; font-weight: 800; color: var(--ink); }
.hz-ray__fiyat small { display: block; margin-top: var(--s-1); font-size: 12px; color: var(--muted); }
.hz-ray__mini { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--bg); padding: var(--s-5); }
.hz-ray__mini b { display: block; font-family: var(--font-head); font-size: 15px; }
.hz-ray__mini p { margin-top: var(--s-2); font-size: 13.5px; line-height: 1.6; color: var(--muted); }

/* ---------------------------------------------------------------- ilgili tedaviler */
.hz-ilgili { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-4); }
.hz-ilgili a {
  border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s-5);
  background: var(--card); display: block; transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.hz-ilgili a:hover { border-color: var(--blue-100); transform: translateY(-3px); box-shadow: var(--shadow-md); text-decoration: none; }
.hz-ilgili span.icon-box { width: 40px; height: 40px; }
.hz-ilgili b { display: block; margin-top: var(--s-4); font-family: var(--font-head); font-size: 16px; color: var(--ink); line-height: 1.25; }
.hz-ilgili p { margin-top: var(--s-2); font-size: 13.5px; line-height: 1.6; color: var(--muted); }
.hz-ilgili i { display: inline-flex; align-items: center; gap: 6px; margin-top: var(--s-4); font-style: normal; font-size: 13px; font-weight: 600; color: var(--blue-ink); }
.hz-ilgili i svg { width: 14px; height: 14px; }

/* ---------------------------------------------------------------- araci bandi, ACIK zeminde
   site.css'teki .araci-bant KOYU bolum icin tasarlanmis (beyaz yazi + %6 beyaz zemin).
   Acik bir bolume konulunca yazi neredeyse gorunmez oluyor (olculdu: 1.05 ve 1.5).
   Bu degisken kendi koyu zeminini tasir; site.css'e dokunulmaz. */
.araci-bant--koyu {
  background: linear-gradient(150deg, var(--navy-700), var(--navy-900));
  border-color: rgba(255, 255, 255, .16);
}

/* ---------------------------------------------------------------- hizmet sayfasindaki iletisim formu */
.hz-alanlar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); }
.hz-alanlar .alan--tam { grid-column: 1 / -1; }
@media (max-width: 620px) { .hz-alanlar { grid-template-columns: minmax(0, 1fr); } }

/* ---------------------------------------------------------------- karsilastirma tablosu ek sutunu */
.hz-kiyas th.hz-biz, .hz-kiyas td.hz-biz { background: var(--blue-50); }
.hz-kiyas td.hz-biz { font-weight: 700; color: var(--blue-ink); }

/* ---------------------------------------------------------------- duyarli davranis */
@media (max-width: 1280px) {
  .hz-duzen { grid-template-columns: minmax(0, 1fr); }
  .hz-ray { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  .hz-ilgili { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1080px) {
  :root { --hz-header: 68px; }
  /* Tek kolona dusunce METIN ONCE gelir. Gorseli one almak (order:-1) H1'i
     telefonda ~1.150 px asagi itiyordu; ilk ekranda baslik hic gorunmuyordu. */
  .hz-hero__duzen { grid-template-columns: minmax(0, 1fr); gap: var(--s-6); }
  .hz-risk { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .hz-hero { padding-block: var(--s-5) var(--s-8); }
  .hz-hero__olgu { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hz-hero__cta .btn { width: 100%; justify-content: center; }
  .hz-bar__cta { display: none; }
  .hz-blok + .hz-blok { margin-top: var(--s-8); }
  .hz-aday, .hz-risk, .hz-ray, .hz-ilgili { grid-template-columns: minmax(0, 1fr); }
  .hz-adim { grid-template-columns: 44px minmax(0, 1fr); gap: var(--s-4); padding: var(--s-4); }
  .hz-adim::before { width: 44px; height: 44px; font-size: 15px; }
  .hz-cevap { padding: var(--s-5); }
  .hz-spec th, .hz-spec td { padding: var(--s-3) var(--s-4); font-size: 13.5px; }
  .hz-spec th { width: 44%; white-space: normal; }
}

/* ============================================================================
   14.09.2026 · 2. TUR — Hamza'nin isaretledigi kalip kaldirildi
   ----------------------------------------------------------------------------
   BANNED_PATTERNS.md "AI TELLS v2" geregi bu sayfada:
     - eyebrow (cizgi-METIN-cizgi mono-caps serit) HIC KULLANILMAZ
     - uzun tire ve orta tire ayrac olarak KULLANILMAZ (araliklar duz tire ile)
     - bir satirda en fazla bir orta nokta
   Bolumler dogrudan basligla acilir. Iskeleti eyebrow tasimadigi icin
   basligin ustunde ince bir altin cizgi ile bolum ayrimi yapilir.
   ============================================================================ */
.hz-blok > .h2 { position: relative; padding-top: var(--s-5); }
.hz-blok > .h2::before {
  content: ""; position: absolute; top: 0; left: 0;
  width: 56px; height: 3px; border-radius: 2px; background: var(--gold-500);
}
.hz-hero .h1 { margin-top: 0; }

/* ---------------------------------------------------------------- gorsel + metin blogu */
.hz-medya { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-7); align-items: center; margin-top: var(--s-6); }
.hz-medya--ters > figure { order: 2; }
.hz-medya figure { margin: 0; }
.hz-medya img { width: 100%; height: auto; border-radius: var(--r-lg); display: block; }
.hz-medya figcaption { margin-top: var(--s-3); font-size: 12.5px; color: var(--muted-2); line-height: 1.5; }
.hz-medya h3 { font-family: var(--font-head); font-size: 21px; font-weight: 700; line-height: 1.25; }
.hz-medya p { margin-top: var(--s-3); font-size: 15.5px; line-height: 1.7; color: var(--muted); }
.hz-medya ul { margin-top: var(--s-4); display: grid; gap: var(--s-3); }
.hz-medya li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: var(--s-3); font-size: 15px; line-height: 1.6; color: var(--ink); }
.hz-medya li svg { width: 18px; height: 18px; margin-top: 2px; color: var(--green-600); }
.hz-medya li b { display: block; }
.hz-medya li span { color: var(--muted); font-size: 14px; }

/* ---------------------------------------------------------------- sac dokulme tipi kartlari */
.hz-tip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-5); margin-top: var(--s-6); }
.hz-tip > article { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--card); overflow: hidden; }
.hz-tip img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: block; }
.hz-tip__govde { padding: var(--s-5); }
.hz-tip h3 { font-family: var(--font-head); font-size: 18px; font-weight: 700; line-height: 1.25; }
.hz-tip p { margin-top: var(--s-3); font-size: 14.5px; line-height: 1.65; color: var(--muted); }
.hz-tip ul { margin-top: var(--s-4); display: grid; gap: var(--s-2); }
.hz-tip li { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: var(--s-2); font-size: 13.5px; line-height: 1.55; color: var(--ink); }
.hz-tip li svg { width: 15px; height: 15px; margin-top: 2px; color: var(--blue-ink); }

/* ---------------------------------------------------------------- paketler (canli siteden) */
.hz-paket { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5); margin-top: var(--s-6); }
.hz-paket > article {
  border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--card);
  padding: var(--s-6); display: flex; flex-direction: column;
}
.hz-paket > article.is-one-cikan { border-color: var(--gold-500); box-shadow: var(--shadow-md); }
.hz-paket__ust { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-4); }
.hz-paket h3 { font-family: var(--font-head); font-size: 17px; font-weight: 800; line-height: 1.25; letter-spacing: .01em; }
.hz-paket__not { margin-top: var(--s-2); font-size: 13px; color: var(--muted); }
.hz-paket__fiyat { text-align: right; flex: none; }
.hz-paket__fiyat b { display: block; font-family: var(--font-head); font-size: 26px; font-weight: 800; color: var(--ink); line-height: 1; }
.hz-paket__fiyat span { display: block; margin-top: var(--s-1); font-size: 11.5px; color: var(--muted-2); }
/* align-content:start olmadan izgara satirlari kalan yuksekligi paylasiyor
   ve kisa kartta maddeler arasinda kocaman bosluklar aciliyordu. */
.hz-paket ul { margin-top: var(--s-5); display: grid; gap: var(--s-2); flex: 1 1 auto; align-content: start; }
.hz-paket li { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: var(--s-3); font-size: 13.5px; line-height: 1.55; color: var(--ink); }
.hz-paket li svg { width: 15px; height: 15px; margin-top: 2px; color: var(--green-600); }
.hz-paket .btn { margin-top: var(--s-5); }
.hz-paket__rozet {
  display: inline-block; margin-bottom: var(--s-3); font-size: 11px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--gold-700);
}

/* ---------------------------------------------------------------- duyarli */
@media (max-width: 1080px) {
  .hz-tip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .hz-medya { grid-template-columns: minmax(0, 1fr); gap: var(--s-5); }
  .hz-medya--ters > figure { order: 0; }
}
@media (max-width: 760px) {
  .hz-tip, .hz-paket { grid-template-columns: minmax(0, 1fr); }
  .hz-paket > article { padding: var(--s-5); }
  .hz-blok > .h2 { padding-top: var(--s-4); }
}

/* ============================================================================
   14.09.2026 · 3. TUR — FORM (Hamza: "basit burasi" + iki hata)
   ----------------------------------------------------------------------------
   Duzeltilen uc sey:
     1. Form WhatsApp'a gidiyordu -> artik GERCEK uca POST ediliyor (api/lead.php),
        kayit yonetim panelinde reklam atfiyla birlikte gorunuyor.
     2. Karakter sayaci kutunun sag kenarina binmisti (mutlak konumlu, kirpiliyordu)
        -> kutunun ALTINA, akisa alindi.
     3. Yerli acilir liste (isletim sisteminin mavi secim kutusu) tasarimla hic
        uyusmuyordu -> erisilebilir OZEL acilir liste (combobox + listbox).
   ============================================================================ */

.hz-form2 { margin-top: var(--s-6); }
.hz-form2__izgara { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4) var(--s-5); }
.hz-form2__izgara > .hz-alan--tam { grid-column: 1 / -1; }

.hz-alan { display: grid; gap: var(--s-2); min-width: 0; }
.hz-alan > label, .hz-alan__etiket {
  font-family: var(--font-body); font-size: 13px; font-weight: 600; color: var(--ink);
  display: flex; align-items: center; gap: var(--s-2);
}
.hz-alan__zorunlu { color: var(--gold-700); }
.hz-alan__kutu { position: relative; display: flex; align-items: center; }
.hz-alan__kutu > svg {
  position: absolute; left: var(--s-4); width: 17px; height: 17px;
  color: var(--muted-2); pointer-events: none;
}
.hz-alan input, .hz-alan textarea {
  width: 100%; font: inherit; font-size: 15px; color: var(--ink);
  background: var(--card); border: 1.5px solid var(--line-2); border-radius: var(--r-md);
  padding: 13px var(--s-4) 13px 44px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.hz-alan textarea { padding-left: 44px; resize: vertical; min-height: 96px; line-height: 1.6; }
.hz-alan input::placeholder, .hz-alan textarea::placeholder { color: var(--muted-2); }
.hz-alan input:focus, .hz-alan textarea:focus {
  outline: none; border-color: var(--blue-600); box-shadow: 0 0 0 3px rgba(0, 104, 255, .14);
}
.hz-alan[data-hata="1"] input, .hz-alan[data-hata="1"] textarea, .hz-alan[data-hata="1"] .hz-sec__dugme {
  border-color: #B42318; box-shadow: 0 0 0 3px rgba(180, 35, 24, .10);
}
.hz-alan__uyari { font-size: 12.5px; color: #B42318; display: none; }
.hz-alan[data-hata="1"] .hz-alan__uyari { display: block; }

/* sayac: KUTUNUN ICINDE degil ALTINDA (eski hali sag kenara biniyor ve kirpiliyordu) */
.hz-sayac { justify-self: end; font-size: 12px; color: var(--muted-2); font-variant-numeric: tabular-nums; }
.hz-sayac.is-dolu { color: var(--gold-700); font-weight: 600; }

/* ---------------------------------------------------------------- ozel acilir liste */
.hz-sec { position: relative; }
.hz-sec__dugme {
  width: 100%; display: flex; align-items: center; gap: var(--s-3); text-align: left;
  font: inherit; font-size: 15px; color: var(--ink);
  background: var(--card); border: 1.5px solid var(--line-2); border-radius: var(--r-md);
  padding: 13px var(--s-4); transition: border-color .15s ease, box-shadow .15s ease;
}
.hz-sec__dugme > svg:first-child { width: 17px; height: 17px; color: var(--muted-2); flex: none; }
.hz-sec__deger { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hz-sec__deger[data-bos="1"] { color: var(--muted-2); }
.hz-sec__ok { width: 16px; height: 16px; color: var(--muted); flex: none; transition: transform .18s ease; }
.hz-sec[data-acik="1"] .hz-sec__ok { transform: rotate(180deg); }
.hz-sec__dugme:hover { border-color: var(--blue-100); }
.hz-sec__dugme:focus-visible, .hz-sec[data-acik="1"] .hz-sec__dugme {
  outline: none; border-color: var(--blue-600); box-shadow: 0 0 0 3px rgba(0, 104, 255, .14);
}
.hz-sec__liste {
  position: absolute; z-index: 30; top: calc(100% + 6px); left: 0; right: 0;
  background: var(--card); border: 1px solid var(--line-2); border-radius: var(--r-md);
  box-shadow: var(--shadow-lg); padding: var(--s-2); max-height: 272px; overflow-y: auto;
  display: none;
}
.hz-sec[data-acik="1"] .hz-sec__liste { display: block; }
.hz-sec__liste li {
  padding: 10px var(--s-3); border-radius: var(--r-sm); font-size: 14.5px; color: var(--ink);
  cursor: pointer; display: flex; align-items: center; gap: var(--s-3);
}
.hz-sec__liste li svg { width: 15px; height: 15px; color: var(--blue-ink); opacity: 0; flex: none; }
.hz-sec__liste li[aria-selected="true"] svg { opacity: 1; }
.hz-sec__liste li[aria-selected="true"] { font-weight: 600; }
.hz-sec__liste li.is-imlec { background: var(--blue-50); color: var(--blue-ink); }

/* ---------------------------------------------------------------- gonder + durum */
.hz-form2__dip { margin-top: var(--s-5); display: grid; gap: var(--s-3); }
.hz-form2__gizlilik { display: flex; align-items: flex-start; gap: var(--s-3); font-size: 13px; color: var(--muted); line-height: 1.55; }
.hz-form2__gizlilik svg { width: 15px; height: 15px; color: var(--green-600); margin-top: 2px; flex: none; }
.hz-form2__not { font-size: 12.5px; color: var(--muted); text-align: center; }
.hz-tuzak { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.hz-durum { border-radius: var(--r-md); padding: var(--s-4) var(--s-5); font-size: 14.5px; line-height: 1.6; display: none; }
.hz-durum[data-tip="hata"] { display: block; background: #FDECEA; border: 1px solid #F3B9B3; color: #7A1912; }
.hz-durum[data-tip="bekliyor"] { display: block; background: var(--blue-50); border: 1px solid var(--blue-100); color: var(--blue-ink); }

.hz-tesekkur { display: none; text-align: center; padding: var(--s-7) var(--s-5); }
.hz-tesekkur[data-acik="1"] { display: block; }
.hz-tesekkur__ikon {
  width: 62px; height: 62px; border-radius: var(--r-pill); margin-inline: auto;
  background: rgba(12, 158, 92, .12); color: var(--green-600); display: grid; place-items: center;
}
.hz-tesekkur__ikon svg { width: 30px; height: 30px; }
.hz-tesekkur h3 { margin-top: var(--s-4); font-family: var(--font-head); font-size: 24px; font-weight: 800; }
.hz-tesekkur p { margin-top: var(--s-3); font-size: 15.5px; color: var(--muted); line-height: 1.65; max-width: 46ch; margin-inline: auto; }
.hz-tesekkur__eylem { margin-top: var(--s-5); display: flex; flex-wrap: wrap; gap: var(--s-3); justify-content: center; }

@media (max-width: 620px) {
  .hz-form2__izgara { grid-template-columns: minmax(0, 1fr); }
}

/* ============================================================================
   14.09.2026 · MOBIL TURU (Hamza: "mobil kotu")
   ----------------------------------------------------------------------------
   OLCULDU (390x844):
     - yapiskan baslik + bolum cubugu = 125px, ekranin %15'i kalici olarak gidiyor
     - sayfa yuksekligi 44.039px (52 ekran) - tipografi masaustu olceginde kalmis
     - 4 kolonlu kiyas tablosu 358px'e sikisiyor, hucreler 1-2 kelimeye kiriliyor
   Asagisi bu uc olcumu duzeltir. Masaustu olcegi DEGISMEZ.
   ============================================================================ */
@media (max-width: 760px) {
  :root { --hz-bar: 46px; }

  /* --- tipografi: dar ekranda masaustu olcegi okumayi degil kaydirmayi artiriyor --- */
  .hz-hero__lead { font-size: 16px; line-height: 1.58; margin-top: var(--s-4); }
  .hz-blok > .h2 { font-size: 24px; line-height: 1.14; padding-top: var(--s-4); }
  .hz-blok > .h2::before { width: 44px; height: 3px; }
  .hz-blok > p { font-size: 15.5px; line-height: 1.62; margin-top: var(--s-3); }
  .hz-blok > p.lead { font-size: 16px; }
  .hz-blok .h3 { font-size: 18px; margin-top: var(--s-5); }
  .hz-cevap { padding: var(--s-4) var(--s-5); }
  .hz-cevap p { font-size: 15.5px; line-height: 1.58; }
  .hz-medya p { font-size: 15px; line-height: 1.6; }
  .hz-medya h3 { font-size: 19px; }
  .hz-adim p, .hz-zaman__oge p, .hz-aday li { font-size: 14.5px; line-height: 1.56; }
  .hz-tip p, .hz-risk p { font-size: 14px; line-height: 1.55; }
  .hz-blok .pkg li { font-size: 14.5px; line-height: 1.55; }

  /* --- dikey ritim: 96px bloklar arasi mobilde bosa kaydirma uretiyor --- */
  .hz-blok + .hz-blok { margin-top: var(--s-7); }
  .hz-hero__olgu { gap: var(--s-2); }
  .hz-hero__olgu > div { padding: var(--s-3); }
  .hz-hero__olgu b { font-size: 14px; }
  .hz-hero__olgu span { font-size: 11.5px; }
  .hz-zaman { padding-left: var(--s-6); }
  .hz-zaman__oge { padding-bottom: var(--s-5); }
  .hz-zaman__oge::before { left: calc(-1 * var(--s-6) + 9px); }
  .hz-aday__kut { padding: var(--s-5); }
  .hz-tip__govde { padding: var(--s-4); }

  /* --- bolum cubugu: iki katli yapiskan alani 125px'ten 112px'e --- */
  .hz-bar nav a { font-size: 13px; padding: 6px var(--s-3); }
  .hz-bar .container { gap: 0; }

  /* --- KIYAS TABLOSU: YATAY KAYDIRMA YERINE KART (16.09.2026) ---
     Onceki cozum tabloya `min-width: 620px` verip yatay kaydiriyor ve
     "Swipe the table sideways..." ipucunu basiyordu. Calisan bir cozumdu ama
     olculdu: 390px'te kabin ic genisligi 358px, yani her tabloda 262px
     kaydirma ardinda kaliyor ve ipucu okunmadan gecilirse fiyat hic
     gorulmuyor. Ana sayfadaki `#compare` tablosu ayni sebeple karta
     cevrilmisti; bu tablolar da ayni desene alindi.
     Etiketler `<thead>`ten uretiliyor (tools/sayfa_onar.py `tablo` asamasi),
     ilk hucre (`<th scope="row">`) kart basligi olur.
     NOT: bu kurallar `site.css`te DEGIL burada durmali -- `hizmet.css` alt
     sayfalarda SONRA yukleniyor ve buradaki `min-width` site.css'teki ayni
     ozgullukteki kurali eziyordu (olculdu: kartlar 620px kalip tasti). */
  .table-wrap { position: relative; overflow: visible; }
  .table-wrap .cmp-table { min-width: 0; }
  .table-wrap .cmp-table th, .table-wrap .cmp-table td { font-size: 13.5px; }

  .hz-kiyas, .hz-kiyas tbody, .hz-kiyas tr, .hz-kiyas td, .hz-kiyas tbody th {
    display: block; width: auto;
  }
  .hz-kiyas thead { display: none; }
  .hz-kiyas { border: 0; background: none; }
  .hz-kiyas 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);
  }
  .hz-kiyas tbody th {
    text-align: left; padding: 0 0 0.625rem; margin-bottom: 0.5rem;
    border-bottom: 1px solid var(--line); background: none;
    font-family: var(--font-head); font-size: 15px; color: var(--navy-900);
  }
  .hz-kiyas td[data-etiket] {
    display: flex; justify-content: space-between; align-items: baseline;
    gap: var(--s-3); padding: 0.375rem 0.625rem; border: 0;
    border-radius: var(--r-sm); font-variant-numeric: tabular-nums;
    text-align: right;
  }
  .hz-kiyas td[data-etiket] + td[data-etiket] { margin-top: 0.25rem; }
  .hz-kiyas td[data-etiket]::before {
    content: attr(data-etiket); font-size: 12px; color: var(--muted);
    flex: none; text-align: left; max-width: 48%;
  }
  .hz-kiyas td.hz-biz { background: var(--blue-50); }

  /* kunye tablosu iki kolon kaldigi icin kaydirilmaz, yalniz sikilastirilir */
  .hz-spec table { min-width: 0; }

  .hz-paket > article { padding: var(--s-5); }
  .hz-paket li { font-size: 13px; }
  .hz-kaynak { padding: var(--s-5); }
  .hz-kaynak li { font-size: 13px; }

  /* form: alanlar ve boslular dar ekrana gore */
  .hz-form2__izgara { gap: var(--s-3); }
  /* 16px TABANI ZORUNLU: altinda iOS Safari odaklaninca sayfayi zorla
     buyutur (olculdu 16.09.2026 - dort alan 15px'ti). */
  .hz-alan input, .hz-alan textarea, .hz-sec__dugme { padding-block: 12px; font-size: 16px; }
  .hz-sec__liste { max-height: 240px; }
  .hz-tesekkur { padding: var(--s-6) var(--s-4); }
  .hz-tesekkur h3 { font-size: 21px; }
  .hz-tesekkur__eylem .btn { width: 100%; justify-content: center; }
}

/* Yuzen WhatsApp dugmesi formun son alanini ortuyordu: sayfa dibine pay birak. */
@media (max-width: 760px) {
  .koordinator .araci-bant { margin-bottom: var(--s-8); }
}

/* ---------------------------------------------------------------- mobil bolum menusu
   Yatay kaydirilan cubuk 16 bolumden 3'unu gosteriyordu ve kaydirilabildigi
   belli olmuyordu (olculdu 390px). Mobilde gercek bir menuye cevrildi: tek
   dugme + acilan tam liste. Masaustunde hicbir sey degismez. */
.hz-bar__ac { display: none; }
@media (max-width: 760px) {
  .hz-bar__ac {
    display: flex; align-items: center; gap: var(--s-3); width: 100%;
    background: transparent; border: 0; padding: 0; font: inherit; text-align: left;
    min-height: var(--hz-bar);
  }
  .hz-bar__ac > svg:first-child { width: 17px; height: 17px; color: var(--gold-700); flex: none; }
  .hz-bar__ac span { flex: 1 1 auto; min-width: 0; font-size: 12px; color: var(--muted-2); line-height: 1.2; }
  .hz-bar__ac b {
    display: block; font-family: var(--font-head); font-size: 14px; font-weight: 700; color: var(--ink);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .hz-bar__ok { width: 16px; height: 16px; color: var(--muted); flex: none; transition: transform .18s ease; }
  .hz-bar[data-acik="1"] .hz-bar__ok { transform: rotate(180deg); }

  .hz-bar nav {
    position: absolute; top: 100%; left: 0; right: 0; display: none;
    flex-direction: column; gap: var(--s-1); overflow-y: auto; max-height: 62vh;
    background: var(--card); border-bottom: 1px solid var(--line); box-shadow: var(--shadow-lg);
    padding: var(--s-3) var(--sayfa-bosluk) var(--s-4);
  }
  .hz-bar[data-acik="1"] nav { display: flex; }
  .hz-bar nav a { font-size: 14.5px; padding: 11px var(--s-3); border-radius: var(--r-sm); white-space: normal; }
}

/* ---------------------------------------------------------------- erisilebilirlik duzeltmeleri (14.09.2026, Lighthouse)
   link-in-text-block: paragraf icindeki baglantilar YALNIZ renkle ayrilıyordu.
   Renk korlugunde ve dusuk kontrastli ekranda baglanti oldugu anlasilmaz;
   gövde metni icinde alti cizili olur, basliklarda/dugmelerde degil. */
.hz-govde p a:not(.btn), .hz-ray__mini p a, .faq-body a, .hz-tesekkur p a {
  text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px;
  text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
}
.hz-govde p a:not(.btn):hover, .hz-ray__mini p a:hover, .faq-body a:hover {
  text-decoration-color: currentColor;
}
/* satir basligi <th> olunca sola hizali ve normal agirlikta kalsin (gorunum degismesin) */
.cmp-table th[scope="row"] { text-align: left; font-weight: inherit; color: inherit; background: inherit; }

/* Kalin etiket ile aciklama AYNI renkti: her ikisi de disardaki span'den
   --muted miras aliyordu (olculdu 14.09.2026: b rengi rgb(91,107,140)).
   Hem gorsel hiyerarsi hem kontrast icin etiket --ink olur. */
.hz-aday li b, .hz-medya li b, .hz-ray__olgu li b { color: var(--ink); }
/* Aciklama metni altin tonlu panelin ust yarisinda --muted ile siniri zorluyor
   (detektor 2.78-3.7 raporladi; matematiksel deger 4.8 cikiyor, yani olcum
   tartismali). Tartismali biraktigimiz kontrasti savunmak yerine koyulastirdik:
   tonlu panelde aciklama da --ink, boyle her olcumde gecer. */
.hz-aday li span span { color: var(--ink); }

/* WCAG 2.2 "target-size" (Lighthouse a11y agirlik 7): govdedeki metin
   baglantilari en az 24x24 CSS px dokunma hedefi olmali. Olculdu 14.09.2026,
   telefon genisliginde: kaynakca baglantisi 22.5px, satir ici metin baglantisi
   ve "See all results" baglantisi 19px kaliyordu -> a11y 100'den 97'ye dustu.
   Satir ici ogede dikey dolgu KUTUYU buyutur ama satir akisini kaydirmaz,
   yani metnin yerlesimi degismeden hedef buyur. Dugmeler ve yapiskan cubuk
   kendi yuksekligini zaten karsiliyor, disarida birakilir. 3px yetmedi:
   daha kucuk puntolu bir baglanti 23px kaldi, olcup 4px yapildi. */
.hz-blok a:not(.btn):not([class*="hz-bar"]) { padding-block: 4px; }

/* ============================================================================
   PUNTO SABITLEME (olculdu 14.09.2026, 1440px)
   site.css:7 koku akiskan yapiyor: `html { font-size: clamp(11px, 0.86253vw, 16px) }`.
   Kok ancak 1855px ekranda 16px'e ulasiyor; 1440px'te 12,4px, 1100px'te 11px.
   `rem` ile yazilmis her bilesen o oranda kuculuyor. Hizmet sayfasinin
   GOVDESINDE 14px altinda metin tasiyan 228 oge olctum: liste maddesi 10,9px,
   SSS sorusu 12px, SSS cevabi 11,3px, tablo hucresi 11,6px, hesaplayici
   etiketi 8,2px. Okunacak metin bu boyutta olmaz.
   Koku 16px'e sabitlemeyi denedim: paylasilan BASLIK menusu buyuyup telefon
   numarasiyla cakisti (1440 ve 1536px'te olculdu), yani kok cozum degil.
   Bu yuzden yalniz GOVDE bilesenleri px'e sabitleniyor; baslik, alt bilgi ve
   ana sayfa hic etkilenmiyor.
   ========================================================================== */
.hz-duzen .pkg li,
.hz-duzen .hz-paket ul li          { font-size: 14.5px; line-height: 1.6; }
.hz-duzen .faq-item summary        { font-size: 15.5px; line-height: 1.45; }
.hz-duzen .faq-body                { font-size: 15px;   line-height: 1.65; }
.hz-duzen .cmp-table th,
.hz-duzen .cmp-table td            { font-size: 14.5px; line-height: 1.5; }
.hz-duzen .cmp-table thead th      { font-size: 13.5px; }
.hz-duzen .hz-cevap__et            { font-size: 12.5px; letter-spacing: .04em; }
.hz-duzen .sonuc__meta span        { font-size: 13px; }
.hz-duzen .serit-olgu span         { font-size: 13.5px; }
.hz-duzen .hz-ray__olgu li span    { font-size: 14px; }
.hz-duzen .hz-paket__not           { font-size: 14px; }
.hz-duzen .hz-paket__fiyat span    { font-size: 14px; }
.hz-duzen .hz-paket .btn           { font-size: 14.5px; }
.hz-duzen .bolge-kare__ad span     { font-size: 12px; }
.hz-duzen .hesap-olcek__etiket span { font-size: 12px; }
/* ic ice em zincirleri: <b> ve <span> kendi olceklerini carpiyor, px ile kes */
.hz-duzen .bolge-kare__ad span,
.hz-duzen .bolge-kare__ad span b   { font-size: 12px; }
.hz-duzen .serit-olgu span,
.hz-duzen .serit-olgu span b       { font-size: 13.5px; }
.hz-duzen .form-note               { font-size: 13px; }
.hz-duzen .hz-ray__mini p,
.hz-duzen .hz-ray__mini p a        { font-size: 14px; }
.hz-bar nav a                      { font-size: 14.5px; }

/* Yanina yazi dusmeyen gorsel: iki sutunlu duzende sagda yarim sayfa bos
   kaliyordu (olculdu 14.09.2026 afro sayfasinda). Tek sutuna alinir ve
   olcusu sinirlanir, yoksa sayfayi bir gorsel ele geciriyor. */
.hz-medya--yalin { grid-template-columns: minmax(0, 1fr); }
.hz-medya--yalin > div { display: none; }
.hz-medya--yalin > figure { max-width: 760px; margin-inline: auto; }

/* ============================================================================
   19.09.2026 · GOVDE GORSELI GENISLIGI — Hamza: "yerlesim mantigina bakar
   misin, duzgun sayfa var mi merak ediyorum" (FUE + Sapphire ekran goruntusu)
   ----------------------------------------------------------------------------
   OLCULEN KUSUR: tek sutunlu gorselde kural `max-height:520px; width:auto`
   idi. Yatay gorsel (1024x447) 760px kutuda 331px yuksekliginde kaliyor ve
   sorun cikmiyor; ama DIKEY gorsel (orn. 860x913) 760px genislikte 807px
   olurdu -> 520 sinirina takilip genisligi ~490px'e DUSUYORDU. Sonuc: ayni
   sayfada kimi gorsel kutuyu dolduruyor, kimi ortada dar duruyor, iki yaninda
   bosluk kaliyor. Ekranda "kaza" gibi gorunuyordu cunku kazaydi: karari
   yukseklik siniri veriyordu, tasarim degil.
   KARAR: yon SUNUCUDA belirlenir (`hz-medya--dikey`, `_render.php`), CSS de
   ona gore DAVRANIR:
     · yatay  -> kutuyu TAM doldurur (width:100%)
     · dikey  -> bilerek dar ve ortali bir kutu (460px), yine TAM doldurur
   Boylece iki genislik vardir ve ikisi de kuralldir; rastgele araliklar yok.
   Olcu verisi guvenilir: `tools/olcu_uyum.py` en/boy'u dosyanin kendisinden
   yaziyor (2.220 yanlis + 3.444 eksik olcu duzeltildi).
   ========================================================================== */
.hz-medya--yalin img { width: 100%; height: auto; max-width: 100%; }

/* ---------------------------------------------------------------- galeri
   Hamza 19.09.2026 (`/before-after/`): bizde 19 gorsel alt alta tam
   genislikteydi, eski sayfada AYNI gorseller 300x300 karelerle izgaradaydi.
   Oncesi/sonrasi fotograflari yan yana KARSILASTIRILIR; alt alta dizilince
   karsilastirma kaybolur ve sayfa bitmeyen bir duvara doner.
   Kare oran: gorseller zaten oncesi|sonrasi olarak birlesik ve kare cekilmis
   (canlida 300x300). `object-fit: cover` yuzleri kirpmasin diye `center top`. */
.hz-galeri {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-4);
  margin-top: var(--s-6);
}
.hz-galeri figure { margin: 0; }
.hz-galeri img {
  width: 100%; aspect-ratio: 1 / 1; object-fit: cover; object-position: center top;
  border-radius: var(--r-lg); display: block;
}
.hz-galeri figcaption {
  margin-top: var(--s-2); font-size: 12.5px; color: var(--muted-2); line-height: 1.5;
}
@media (max-width: 900px) { .hz-galeri { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .hz-galeri { gap: var(--s-3); } }
.hz-medya--yalin.hz-medya--dikey > figure { max-width: 460px; }
/* Iki sutunlu duzende de dikey gorsel kendi sutununu doldurur; kirpma yok. */
.hz-medya img { object-fit: contain; }

/* ---------------------------------------------------------------------------
   TELEFONDA PUNTO. Akiskan kok telefonda tabana (11px) oturuyor, yani `rem`
   ile yazilmis her sey masaustundekinden de kucuk cikiyor. Olculdu 14.09.2026,
   390px genislikte hizmet sayfasinda 13px ALTINDA metin tasiyan 63 oge vardi:
   sonuc etiketi 6,5px, hesaplayici olcek etiketi 8,6px, ray kart metni 9,6px,
   dugme yazisi 10,3px. Telefonda okunacak metin 14px'ten kucuk olmaz,
   yardimci etiket de 12px'ten.
   --------------------------------------------------------------------------- */
@media (max-width: 760px) {
  /* Kahraman dugmeleri `.hz-duzen` DISINDA: ilk kapsamda atlanmislardi ve
     telefonda 10,3px kaliyorlardi (olculdu 14.09.2026). */
  .hz-duzen .btn,
  .hz-hero .btn,
  .hz-ray .btn                      { font-size: 14.5px; }
  .koord-kanal li b                 { font-size: 14px; }
  .koord-kanal li p                 { font-size: 13.5px; line-height: 1.55; }
  .hz-duzen .sonuc__etiket          { font-size: 12px; }
  .hz-duzen .hesap-adim b           { font-size: 14.5px; }
  .hz-duzen .hesap-adim span        { font-size: 12.5px; }
  .hz-duzen .hz-paket__rozet        { font-size: 12.5px; }
  .hz-ray__kart li b,
  .hz-ray__kart li div b            { font-size: 14px; }
  .hz-ray__kart li p,
  .hz-ray__kart li div p            { font-size: 13.5px; line-height: 1.55; }
  .hz-hero__olgu span               { font-size: 12.5px; }
  .hz-form2 .hz-alan__uyari         { font-size: 12.5px; }
  .hz-hero__not span                { font-size: 12.5px; }
  .hz-duzen .bolge-kare__ad span,
  .hz-duzen .bolge-kare__ad span b  { font-size: 12.5px; }
}

/* ===========================================================================
   PUNTO TABANI (kesin). Yukarida once masaustu, sonra telefon icin ayri ayri
   duzeltmeye calistim ve her seferinde ayni bilesenin OBUR genislikte kucuk
   kaldigini olctum. Sebep tek: akiskan kok (`site.css:7`) 1440px'te 12,4px,
   telefonda 11px, yani `rem` yazilmis her sey her genislikte kuculuyor.
   Bu blok o bilesenlerin puntosunu GENISLIKTEN BAGIMSIZ sabitler ve dosyanin
   SONUNDA durur, yani onceki kurallari ezer. Tek olcut: okunacak metin 14px'in,
   yardimci etiket 12px'in altina inmez.
   =========================================================================== */
.hz-duzen .btn, .hz-hero .btn, .hz-ray .btn,
.hz-bar .btn, .hz-tesekkur .btn, .hz-form2 .btn   { font-size: 14.5px; }
.hesap-adim b, .hesap-sonuc strong                { font-size: 14.5px; }
.hesap-adim span, .hesap-olcek__etiket span,
.hesap-olcek__etiket span b, .hesap-sonuc__ust    { font-size: 12.5px; }
.hesap-sonuc p                                    { font-size: 13px; line-height: 1.5; }
.hz-paket__rozet                                  { font-size: 12.5px; }
.sonuc__etiket                                    { font-size: 12px; }
.koord-kanal li b, .koord-kanal__link             { font-size: 14px; }
.koord-kanal li p                                 { font-size: 13.5px; line-height: 1.55; }
.hz-ray__kart li b                                { font-size: 14px; }
.hz-ray__kart li p                                { font-size: 13.5px; line-height: 1.55; }
.hz-hero__olgu span, .hz-hero__not span,
.hz-alan__uyari, .hz-cevap__et                    { font-size: 12.5px; }
.bolge-kare__ad span, .bolge-kare__ad span b      { font-size: 12.5px; }
.koord-kanal__saat                                { font-size: 12.5px; }
.koord-rozet b                                    { font-size: 13.5px; }
.koord-rozet span                                 { font-size: 12.5px; }
.araci-bant p                                     { font-size: 13.5px; line-height: 1.6; }
/* site.css'te `.koord-rozet > span:last-child` (0,2,1) var; benim
   `.koord-rozet span` (0,1,1) onu yenemiyordu - ozgullugu esitliyoruz. */
.koord-rozet span, .koord-rozet span span,
.koord-rozet > span:last-child                    { font-size: 12.5px; line-height: 1.5; }
.araci-bant__link                                 { font-size: 13.5px; }

/* `.form-note` ana sayfada ikonsuz kullaniliyor, bu yuzden site.css'te
   `svg` olcusu yok; hizmet sayfasinda notun basina ikon koyunca SVG serbest
   kalip 220-300px'e buyudu (olculdu 14.09.2026: karsilastirma tablosunun
   altindaki "Indicative ranges" notunun yaninda dev dosya ikonu). */
.form-note svg { width: 15px; height: 15px; flex: none; color: var(--muted-2); }
.form-note { align-items: flex-start; line-height: 1.5; }
.form-note svg { margin-top: 2px; }

/* Liste maddesi: ikon + TEK metin sutunu. Metin span'i kalin terimi ve
   aciklamayi birlikte akitir, terim kendi sutununa dusmez. */
.hz-duzen .pkg li > span { min-width: 0; }
.hz-duzen .pkg li > strong:first-of-type { margin-right: .25em; }

/* ---------------------------------------------------------------------------
   ALT BILGI GUVEN SERIDI: 360px'te sayfayi 12px yatay kaydiriyordu (olculdu
   15.09.2026, davranis testi "baslik 360-2000px arasi binmiyor/tasmiyor").
   Sebep: iki sutunlu izgaranin 169px'lik hucresi icinde esnek kutu duruyor ve
   esnek ogenin varsayilan `min-width:auto` degeri metni hucreden TASIRIYOR
   ("Ministry of Health health-tourism intermediary" satiri 372px'e uzaniyordu).
   Kaynak isaretleme ana sayfa sablonunda (paralel oturumun dosyasi), o yuzden
   duzeltme burada, hizmet katmaninda yapiliyor.
--------------------------------------------------------------------------- */
.footer-trust > div, .footer-trust > div > div { min-width: 0; }
.footer-trust p, .footer-trust b { overflow-wrap: anywhere; }

/* ---------------------------------------------------------------------------
   ARACI BANDI FOTOGRAFIN ALTINDA KALIYORDU (yerlesim sistem/_parcalar2.php'de
   duzeltildi; burada yalniz seridin bosluklari). Olculdu 15.09.2026 (davranis/
   gorunus denetimi "OGE CAKISMASI", 1440-1920px): koordinator bolumunun
   `.koord-foto` gorseli MUTLAK konumlu (site.css) ve sutunun disina, bandin
   uzerine tasiyor; band konumlandirilmadigi icin BOYANMA SIRASINDA altta
   kaliyor ve "...in accordance with the Ministry of Health." satiri
   fotografin arkasinda kayboluyordu. Band one alinir.
--------------------------------------------------------------------------- */
.araci-serit { padding-block: 0 var(--s-10); }
.araci-serit .araci-bant { margin-top: 0; }
/* Band basligi blok seviyesinde ve sutunun TAMAMINI kapliyor; metni kisa
   oldugu icin bos kutusu yandaki "Data protected" rozetinin altina giriyor ve
   cakisma denetiminde her genislikte bulgu uretiyordu. Kutu metne daraltilir. */
.araci-serit .araci-bant b { width: -moz-max-content; width: max-content; max-width: 100%; }

/* Dar ekranda band tek sutuna duser ve baglanti ALTA gecer; solundaki dikey
   ayrac orada anlamsiz durur. site.css 2485'te bu kural VAR ama ayni dosyanin
   4372. satiri kenarligi yeniden veriyor ve sonra geldigi icin kazaniyor
   (olculdu 15.09.2026: 390px'te hesaplanan border-left 1px). */
@media (max-width: 900px) {
  .araci-serit .araci-bant__link { border-left: 0; padding-left: 0; }
}

/* ---------------------------------------------------------------------------
   DUGME YIGINLARINDA TABAN BOSLUK. `var(--s-3)` rem tabanli; kok olcek dar
   ekranda 11px'e inince 7px'e dusuyor ve dugmeler birbirine yapisiyor
   (olculdu 15.09.2026: dort yerde 7px). Taban 8px'e sabitlenir.
   SSS sorusu 11,7px kaliyordu; dokunmatik okunurluk icin 13px. */
.hz-hero__cta, .hz-form2__dip, .hz-ray__govde, .newsletter form { gap: max(var(--s-3), 8px); }
.faq-item summary { font-size: 13px; }
/* `.koord-kanal__saat` acik zeminde 4,48:1 olcusu verdi (WCAG AA tabani 4,5).
   Bir ton koyu degisken esigi geciyor (olculdu 15.09.2026). */
.koord-kanal__saat { color: var(--muted); }

/* ===========================================================================
   iOS OTOMATIK YAKINLASTIRMA TABANI — 16px (olculdu 16.09.2026)
   Safari, yazi boyu 16px'in ALTINDA olan bir alana odaklaninca sayfayi ZORLA
   buyutur; kullanici elle geri kucultmek zorunda kalir. Masaustu tarayicida ve
   emulasyonda GORUNMEZ, gercek telefonda/tablette her formda yasanir.
   Yukaridaki `@media (max-width: 760px)` blogu 768px'lik TABLETI kapsamiyordu;
   bu yuzden ayri ve daha genis bir taban konur (projenin mobil esigi 1100px).
   =========================================================================== */
@media (max-width: 1100px) {
  .hz-alan input, .hz-alan textarea,
  .hz-form2 input, .hz-form2 textarea,
  .hz-sec__dugme { font-size: 16px; }
}

/* ===========================================================================
   FORM ALANI DAR EKRANDA TASIYORDU (olculdu 16.09.2026, 390px)
   ---------------------------------------------------------------------------
   "Treatment you are asking about" secicisi sayfa basligiyla on-dolu geliyor;
   uzun basliklarda ("Type 1 Hair: 1A vs 1B vs 1C Straight Hair Explained")
   dugme 466px oluyor ve 390px'lik ekranin 92px DISINA tasiyordu.
   Zincir olculdu: `div.hz-alan` izgarasi 358px ama IZI 466px cikiyor, cunku
   cocugu `.hz-sec` `min-width: auto` (izgara ogesinin varsayilan en kucuk
   olcusu = min-content). Iz icerige gore buyuyor.
   NOT: ayni sinif altbilgide de vardi (`.footer-grid`) - orada kapatilmisti,
   SINIF olarak burada da kapatilir: form icindeki tum izgara/esnek ogeler
   daralabilir, secici metni sigmayinca uc nokta ile kisalir.
   =========================================================================== */
.hz-alan, .hz-form2__izgara, .hz-sec { min-width: 0; }
.hz-alan > *, .hz-form2__izgara > * { min-width: 0; }
.hz-sec__dugme { min-width: 0; }
.hz-sec__dugme > span { min-width: 0; }
.hz-sec__deger, .hz-sec__dugme > span:first-child {
  white-space: normal; overflow-wrap: anywhere; text-align: left; line-height: 1.3;
}

/* ---------------------------------------------------------------- kume (hub) kartlari
   Unlu/konu kume sayfalarinin kart izgarasi. Kanit rozeti (Confirmed /
   Reported / Rumoured) sayfanin editoryal durusudur: renk ayrimi okurun
   dogrulanmis ile soylentiyi ayirt etmesini saglar, o yuzden rozet
   gizlenmez ve uc seviye BIRBIRINDEN farkli renk alir. */
.kume-izgara {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
  gap: var(--s-4);
  margin-top: var(--s-5);
}
.kume-kart { position: relative; display: flex; flex-direction: column; text-decoration: none; overflow: hidden; }
/* KART GORSELI KIRPILIYORDU (Hamza, 18.09.2026: "blogda gorseller tam
   sigmiyor, kesik oluyor"). Olculdu: kapaklarin 9/10'u 1200x628 (oran 1,911),
   kart kutusu ise 3/2 (1,5) idi ve `object-fit: cover` her iki yandan
   %13,7 kirpiyordu -- basliktaki ilk harf bu yuzden kesiliyordu
   ("AIR TRANSPLANT" <- "HAIR TRANSPLANT"). Kutu orani kapagin KENDI oranina
   cekildi; kirpma sifirlandi, yukseklik biraz azaldi. */
.kume-kart__gorsel { display: block; aspect-ratio: 1200 / 628; overflow: hidden; background: var(--navy-800, #12243f); }
.kume-kart__gorsel img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; }
.kume-kart__rozet {
  position: absolute; top: var(--s-3); left: var(--s-3);
  padding: 4px 10px; border-radius: 999px;
  /* 11.5px -> 12px (olculdu 16.09.2026): kume kartlarindaki rozet
     ("Confirmed/Reported/Rumoured") telefonda okunabilir taban olan 12px'in
     altindaydi ve mobil denetimde sayfa basina 6 bulgu uretiyordu. Rozet
     gorselin uzerinde mutlak konumlu; 0,5px buyume kart duzenini kaydirmiyor. */
  font-size: 12px; font-weight: 700; letter-spacing: .02em;
  background: #E9EEF6; color: #1B2B45;
}
.kume-kart__rozet--confirmed { background: #0E7A4B; color: #fff; }
.kume-kart__rozet--reported  { background: #B8791A; color: #fff; }
.kume-kart__rozet--rumoured,
.kume-kart__rozet--rumored   { background: #5A6579; color: #fff; }
.kume-kart__govde { display: flex; flex-direction: column; gap: var(--s-2); padding: var(--s-4); }
.kume-kart__ad { font-family: var(--font-head); font-size: 17px; font-weight: 700; line-height: 1.2; color: var(--navy-900, #0B1B33); }
.kume-kart__kunye { font-size: 12.5px; color: #5A6579; }
.kume-kart__ozet { font-size: 14px; line-height: 1.55; color: #33415A; }
.kume-kart__cta { display: inline-flex; align-items: center; gap: 6px; margin-top: auto; padding-top: var(--s-2); font-size: 13.5px; font-weight: 600; color: var(--blue-600, #1657B8); }
.kume-kart__cta svg { width: 14px; height: 14px; }
.kume-kart:hover .kume-kart__cta { text-decoration: underline; }

@media (max-width: 560px) {
  .kume-izgara { grid-template-columns: 1fr; }
}

/* ============================================================================
   BOSLUK SABITLEME — yukaridaki PUNTO SABITLEME'nin (satir ~612) YARIM KALAN YARISI
   Olculdu 16.09.2026 (Hamza iki kez "gereksiz bosluklu" dedi; ekran goruntusunde
   bolum aralarini isaretledi).

   site.css:15 koku akiskan yapiyor: `clamp(9.4px, 0.86253vw, 16px)`; kok 16px'e
   ancak 1855px ekranda ulasiyor. 14.09.2026'da GOVDE PUNTOLARI px'e sabitlendi
   ama BOSLUKLAR `rem` kaldi -> masaustunde metin sabit dururken bosluk viewport
   ile oynuyor. Olculen bolum araligi (metin her genislikte 16,5px):
       1152px=60 · 1280px=66 · 1440px=75 · 1600px=83 · 1855px=96
   Yani bosluk/metin orani 3,6x ile 5,8x arasinda geziniyor ve 77px gibi
   OLCEK DISI degerler uretiyor (4/8/16/24/32/48/64/96 disinda).

   Bolum araligi 761px ustunde 64px'e sabitlendi (govde satiri ~28px, yani
   ~2,3 satir: uzun metinde saglikli editoryal ritim). Telefonda 48px kaldi.
   Kapsam `.hz-duzen` ile hizmet/icerik sayfalarina sinirli -- ana sayfa
   bilerek viewport ile olcekleniyor, ona DOKUNULMUYOR.
   ========================================================================== */
@media (min-width: 761px) {
  .hz-duzen .hz-blok + .hz-blok { margin-top: 64px; }
  .hz-duzen .hz-blok > .h2 { padding-top: 24px; }
}

/* ============================================================================
   TABLO HUCRESINDE SARAN BAGLANTILAR — DOKUNMA HEDEFLERI BINIYORDU
   Olculdu 16.09.2026, `hair-transplant-istanbul`, 320-768px:
   dar bir `th` icinde uc satir-ici baglanti alt alta sariyor
   ("Beard, eyebrow, moustache"). Sayilar:
     hucre satir yuksekligi 21,75px (14,5px x 1,5)
     baglanti kutusu        25,00px (17px metin + hizmet.css:610'daki 4+4 dolgu)
     -> her komsu cift 3,25px BINIYOR
   Metin binmiyor (dolgu saydam) ama DOKUNMA HEDEFLERI binisiyor: sinirdaki
   dokunus komsu baglantiya gidebilir (WCAG 2.5.8 hedeflerin ayrik olmasini
   ister). Dolguyu kucultmek cozum DEGIL -- 24px tabanini o dolgu sagliyor
   (25px). Dogru degisken satir yuksekligi: 14,5 x 1,8 = 26,1px > 25px.
   ========================================================================== */
.hz-duzen .cmp-table th,
.hz-duzen .cmp-table td { line-height: 1.8; }

/* ============================================================================
   KUNYE (yazar / tibbi inceleyen) — tools/sayfa_onar.py enjekte eder.
   Olcum 16.09.2026: canli WP'de 115 sayfanin 104'unde adiyla imza vardi,
   YENI sitede 113 sayfanin hicbirinde yoktu. YMYL/E-E-A-T icin en degerli
   alanlardan biri. Kaynak bolumunun hemen altinda, ondan bir tik sakin.
   ========================================================================== */
.thc-kunye {
  margin-top: var(--s-5);
  padding-top: var(--s-4);
  border-top: 1px solid var(--line-2);
  font-size: 13.5px; line-height: 1.7; color: var(--muted);
}
.thc-kunye a { color: var(--ink); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.thc-kunye a:hover { color: var(--blue-600); }
.thc-kunye__rol { color: var(--muted-2); }
.thc-kunye__ayrac { margin: 0 0.5rem; color: var(--line-2); }
.thc-kunye time { white-space: nowrap; }
@media (max-width: 700px) {
  /* Telefonda tek satira sigmaz: ayrac satir sonuna denk gelince "· " basta
     asili kaliyordu. Ayraclar gizlenir, her parca kendi satirina duser. */
  .thc-kunye { font-size: 13px; }
  .thc-kunye__ayrac { display: block; height: 0; overflow: hidden; margin: 0; }
}

/* Kaynakca giris cumlesi: satir ici `style="font-size:15px;color:var(--muted)"`
   yerine sinif (P3 TOKENS -- satir ici hex/olcu yasak). tools/sayfa_onar.py
   donusturuyor. */
.hz-kaynak__giris { font-size: 15px; color: var(--muted); }
.hz-kaynak ol a { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }
.hz-kaynak ol a:hover { color: var(--blue-600); }

/* ===========================================================================
   EDITORYAL HERO (`.hz-hero--yazi`) — Hamza, 18.09.2026:
   "bu kadar yazi olur mu, hero sade olmali, sagdaki resim sacma,
    iki hero alani lazim: biri hizmetler icin biri blog icin".

   Neden ayri duzen (olculdu): 35 sayfanin hero gorseli YAZI GOMULU kapak.
   Yan sutunda `object-fit: cover` ile kirpilinca basligin ilk harfleri
   kesiliyordu ("O BEARD" <- "AFRO BEARD"). Burada kapak TAM GENISLIK ve
   KENDI ORANIYLA gosterilir; kirpma yoktur, yazi okunur.

   DESIGN.md'ye uyar: container 1200 · spacing skalasi 8/16/24/32/48 ·
   radius gorsel 12px · basliklarda line-height >= 0.95 (taban kural).
   =========================================================================== */
.hz-hero--yazi .hz-hero__metin,
.hz-hero--liste .hz-hero__metin {
  max-width: 44rem;           /* ~70 karakter: okunabilir satir uzunlugu */
}

/* ===========================================================================
   LISTE HEROSU (`.hz-hero--liste`) — Hamza, 19.09.2026 (`/blog/`):
   "boyle mi sayfa herosu yapilir".
   Liste sayfasinin hemen altinda her biri KENDI gorseline sahip bir kart
   izgarasi var; ustune tam genislik bir kapak daha koymak tekrar ve gurultu.
   Olculdu: 27 liste sayfasinin dokuzunda kapak ayni genel klinik fotografiydi
   ve `/blog/`'da o gorselin alt metni BASKA bir sayfaya aitti.
   Bu yuzden gorsel YOK; alan nefes alsin diye alt bosluk kart izgarasina
   birakilir. Dikey ritim 4/8 katlarindan (--s-*) gelir.
   =========================================================================== */
.hz-hero--liste {
  padding-bottom: var(--s-6);
}
.hz-hero--liste .hz-hero__lead {
  margin-top: var(--s-4);
  font-size: 1.0625rem;
  line-height: 1.65;
  max-width: 40rem;
}
.hz-hero--liste .hz-hero__metin .btn {
  margin-top: var(--s-5);
}
/* Guven seridi liste sayfasinda da gorunur (Reklam Kurulu: "yetkili saglik
   turizmi araci kurulusu, klinik degil"). Bicim `yazi` duzeniyle AYNI. */
.hz-hero--liste .hz-hero__kimlik {
  display: flex; align-items: flex-start; gap: .5rem;
  margin-top: var(--s-5);
  font-size: .8125rem; line-height: 1.5;
  opacity: .78;
}
.hz-hero--liste .hz-hero__kimlik svg { width: 1rem; height: 1rem; flex: none; margin-top: .125rem; }
.hz-hero--liste .hz-hero__kimlik b { font-weight: 700; }
@media (max-width: 720px) {
  .hz-hero--liste .hz-hero__lead { font-size: 1rem; }
}
.hz-hero--yazi .hz-hero__lead {
  margin-top: var(--s-4);
  font-size: 1.0625rem;
  line-height: 1.65;
  max-width: 40rem;
}
.hz-hero--yazi .hz-hero__metin .btn {
  margin-top: var(--s-5);
}
.hz-hero--yazi .hz-hero__kimlik {
  display: flex; align-items: flex-start; gap: .5rem;
  margin-top: var(--s-5);
  font-size: .8125rem; line-height: 1.5;
  opacity: .78;
}
.hz-hero--yazi .hz-hero__kimlik svg { width: 1rem; height: 1rem; flex: none; margin-top: .125rem; }
.hz-hero--yazi .hz-hero__kimlik b { font-weight: 700; }

/* Kapak: tam genislik, KENDI orani, kirpma yok. */
.hz-hero__kapak { margin: var(--s-6) 0 0; }
.hz-hero__kapak img {
  display: block; width: 100%; height: auto;
  border-radius: 0.75rem;
}

@media (max-width: 760px) {
  .hz-hero--yazi .hz-hero__lead { font-size: 1rem; }
  .hz-hero__kapak { margin-top: var(--s-5); }
}