/* Advenway Hesaplayıcılar — koşu / yürüyüş / bisiklet kalori + VO2 max arayüzü
 *
 * Görsel dil "Advenway Kalori Hesaplama.dc.html" tasarımından alındı ve
 * Advenway temasının (v0.6+) diliyle hizalandı.
 *
 * ⚠️ 21 AĞUSTOS 2026'DA PALET TERSİNE DÖNDÜ.
 * Önceki sürüm AÇIK temalıydı: beyaz kart + solda girdi paneli + sağda
 * yapışkan lacivert sonuç kartı. Yeni tasarımda araç TEK KOYU KART:
 * başlık satırı → hairline ızgarada girdiler → sonuç + formül → tablo → not.
 * Bu yüzden buradaki renkler "koyu zemin üzerinde" varsayımıyla yazılmıştır;
 * açık zemin varsayan eski değerler geri getirilmemeli.
 *
 * Bilinçli sapmalar (öncekilerden devralındı, hâlâ geçerli):
 *  - Google Fonts YÜKLENMİYOR. Tema üç aileyi zaten basıyor; burada
 *    `inherit` ve `--advhk-mono` ile ona bağlanılır. Harici istek yok.
 *  - Segment düğmeleri <button> değil radio: klavye ve ekran okuyucu için.
 *  - Tüm kurallar .advhk / .advvo altına kapsanmıştır; temayla çakışmaz.
 */

.advhk {
  /* Yüzeyler — tasarımdaki koyu kart ve iç kutular */
  --advhk-kart: #1B2027;          /* aracın gövdesi */
  --advhk-ic-zemin: #12161B;      /* girdi, tablo başlığı, formül bloğu */
  --advhk-zemin: rgba(239, 237, 231, .04);

  /* Çizgiler — hairline ızgara bu iki değerle kuruluyor */
  --advhk-cizgi: rgba(239, 237, 231, .14);
  --advhk-cizgi-2: rgba(239, 237, 231, .10);
  --advhk-cizgi-girdi: rgba(239, 237, 231, .26);

  /* Metin kademeleri */
  --advhk-metin: #EFEDE7;
  --advhk-metin-2: #B9BEB7;
  --advhk-soluk: #8E958F;
  --advhk-soluk-2: #6E756F;

  /* Turuncu — koyu zemin üzerinde okunan tonlar */
  --advhk-marka: oklch(0.66 0.19 45);
  --advhk-marka-acik: oklch(0.72 0.17 45);
  --advhk-marka-parlak: oklch(0.82 0.15 45);
  --advhk-halka: rgba(232, 120, 45, .28);

  /* Durum */
  --advhk-hata: oklch(0.68 0.19 25);

  --advhk-r: 16px;
  --advhk-golge: 0 14px 44px rgba(18, 22, 27, .2);
  --advhk-mono: 'JetBrains Mono', ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --advhk-serif: 'Newsreader', Georgia, serif;

  font-family: inherit;
  color: var(--advhk-metin);
  line-height: 1.6;
  font-size: 16px;
  margin: 0 0 34px;

  /* Aracın tamamı tek kart. overflow:hidden zorunlu — iç ızgaralar
     köşeyi taşırıyor. */
  background: var(--advhk-kart);
  border-radius: var(--advhk-r);
  overflow: hidden;
  box-shadow: var(--advhk-golge);
}

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

/* ---------- Düzen ----------
   Eski sürümde .advhk-grid iki sütundu (girdi | yapışkan sonuç). Yeni
   tasarımda dikey akış var: başlık → girdiler → sonuç+formül → tablo. */

.advhk-grid { display: block; }

.advhk-kart {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.advhk-panel { padding: 0; }

/* Başlık satırı — tasarımda kartın üstünde ince çizgiyle ayrılıyor. */
.advhk-kart-baslik {
  font-family: var(--advhk-serif);
  font-weight: 600;
  font-size: 24px;
  letter-spacing: 0;
  color: var(--advhk-metin);
  text-transform: none;
  display: flex;
  align-items: center;
  gap: 11px;
  margin: 0;
  padding: 18px 26px;
  border-bottom: 1px solid var(--advhk-cizgi);
  line-height: 1.25;
}

.advhk-ic {
  width: 26px;
  height: 26px;
  flex: none;
  border-radius: 8px;
  background: rgba(232, 120, 45, .16);
  color: var(--advhk-marka-parlak);
  display: grid;
  place-items: center;
}

/* ---------- Alanlar ----------
   Girdiler hairline ızgarada. Sabit 4 sütun DEĞİL: alan sayısı araca göre
   değişiyor (yürüyüşte adım ve boy da var, bazıları moda göre gizleniyor).
   auto-fit sabit sütun sayısının bıraktığı boş hücreleri önler. */

.advhk-form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1px;
  background: var(--advhk-cizgi);
}

.advhk-alan {
  margin: 0;
  background: var(--advhk-kart);
  padding: 18px 22px 20px;
  min-width: 0;
}

.advhk-alan:last-child { margin-bottom: 0; }
.advhk-alan[hidden] { display: none; }

/* Mod seçimi ve tam genişlik isteyen alanlar satırı kaplar. */
.advhk-alan[data-advhk="mod-kutusu"],
.advhk-alan--genis {
  grid-column: 1 / -1;
  border: 0;
}

.advhk-lbl {
  display: block;
  font-family: var(--advhk-mono);
  font-weight: 600;
  font-size: 9.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--advhk-soluk);
  margin: 0 0 7px;
  padding: 0;
}

.advhk-ipucu {
  font-size: 11.5px;
  color: var(--advhk-soluk-2);
  margin: 7px 0 0;
  line-height: 1.45;
}

.advhk-ipucu:empty { display: none; }
.advhk-ipucu-marka { color: var(--advhk-marka-acik); }

.advhk-girdi {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--advhk-cizgi-girdi);
  border-radius: 0;
  overflow: hidden;
  background: var(--advhk-ic-zemin);
  transition: border-color .15s, box-shadow .15s;
}

.advhk-girdi:focus-within {
  border-color: var(--advhk-marka);
  box-shadow: 0 0 0 3px var(--advhk-halka);
}

.advhk-girdi input {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 44px;
  border: 0;
  outline: 0;
  padding: 0 12px;
  font: inherit;
  font-family: var(--advhk-mono);
  font-size: 16px;
  font-weight: 500;
  color: var(--advhk-metin);
  background: transparent;
}

.advhk-birim {
  display: grid;
  place-items: center;
  padding: 0 13px;
  background: rgba(239, 237, 231, .06);
  color: var(--advhk-soluk);
  font-family: var(--advhk-mono);
  font-weight: 500;
  font-size: 12px;
  border-left: 1px solid var(--advhk-cizgi-2);
  white-space: nowrap;
}

.advhk-sel {
  width: 100%;
  min-height: 44px;
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid var(--advhk-cizgi-girdi);
  border-radius: 0;
  padding: 0 40px 0 12px;
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  color: var(--advhk-metin);
  background: var(--advhk-ic-zemin) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' stroke='%238E958F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>") no-repeat right 12px center;
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s;
}

.advhk-sel:focus-visible {
  outline: 0;
  border-color: var(--advhk-marka);
  box-shadow: 0 0 0 3px var(--advhk-halka);
}

/* ---------- Segment (radio) ---------- */

/* Sütun sayısı seçenek sayısına göre AÇIKÇA verilir; taban 3'tür.
   Sınıf unutulursa fazladan sütun boş kalır, haplar daralır ve metin
   satır kırar — VO2 max aracında (2 seçenek) tam bu yaşandı.
   --2: yan yana iki hap · --4: 2×2 ızgara (dörtlü tek sırada dar kalıyor) */
.advhk-seg--2 { grid-template-columns: repeat(2, 1fr) !important; }
.advhk-seg--4 { grid-template-columns: repeat(4, 1fr) !important; }

/* ⚠️ auto-fit + minmax — DÜZ repeat(3, 1fr) DEĞİL (22 Ağustos düzeltmesi).
   `1fr` parçalarının örtük alt sınırı içeriğin KENDİ genişliğidir; uzun
   etiketli üçlü segment dar bir alanda daralmaz, kutuyu TAŞIRIR.
   VO2 max aracında canlıda ölçüldü: segment içeriği 242 px, kutusu 201 px —
   "1 mil yürüyüş" ve "Belirtmek istemiyorum" çipleri alan çerçevesinin
   dışına taşıyordu.
   auto-fit iki uçta da doğru davranıyor (ikisi de ölçüldü):
     dar kutu  (201 px) → 2 sütun, üç çip 97/97/97 olarak 2+1 dizilir
     geniş kutu (620 px) → tek satır, 187/187/187 — eski görünüm korunur
   ⚠️ minmax(0, 1fr) da taşmayı bitiriyordu ama çipleri 63 px'e sıkıştırıp
   kelimeleri ortadan kırıyordu ("İSTEMİYO|RUM"); o yüzden seçilmedi. */
.advhk-seg {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(84px, 1fr));
  gap: 6px;
  background: transparent;
  padding: 0;
  border-radius: 0;
  border: 0;
  margin: 0;
}

/* height:100% — ızgara satırı en uzun etikete göre uzuyor; çipler onu DOLDURSUN ki
   biri iki satıra kırıldığında satır tırtıklı görünmesin. */
.advhk-seg label { margin: 0; display: block; height: 100%; }

.advhk-seg input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

.advhk-seg span {
  display: flex;
  height: 100%;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 8px 12px;
  border: 1px solid var(--advhk-cizgi-girdi);
  border-radius: 0;
  font-family: var(--advhk-mono);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--advhk-metin-2);
  cursor: pointer;
  text-align: center;
  transition: color .15s, background .15s, border-color .15s;
}

.advhk-seg span:hover { color: var(--advhk-metin); border-color: var(--advhk-marka-acik); }

.advhk-seg input:checked + span {
  background: var(--advhk-marka);
  border-color: var(--advhk-marka);
  color: #12161B;
  font-weight: 700;
}

.advhk-seg input:focus-visible + span {
  outline: 2px solid var(--advhk-marka-parlak);
  outline-offset: 2px;
}

@media (max-width: 520px) {
  .advhk-seg { grid-template-columns: 1fr 1fr !important; }
  .advhk-seg span { font-size: 10.5px; padding: 8px 4px; }
}

/* ---------- Çipler (hazır değerler) ---------- */

.advhk-cipler { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }

.advhk-cip {
  flex: 1 1 auto;
  min-height: 26px;
  border: 1px solid rgba(239, 237, 231, .24);
  background: transparent;
  color: var(--advhk-metin-2);
  padding: 4px 8px;
  border-radius: 0;
  font: inherit;
  font-family: var(--advhk-mono);
  font-weight: 500;
  font-size: 10px;
  letter-spacing: .04em;
  cursor: pointer;
  transition: border-color .15s, color .15s, background .15s;
}

.advhk-cip:hover { border-color: var(--advhk-marka-acik); color: var(--advhk-marka-acik); }
.advhk-cip:focus-visible { outline: 2px solid var(--advhk-marka-parlak); outline-offset: 2px; }

.advhk-cip[aria-pressed="true"] {
  background: var(--advhk-marka);
  border-color: var(--advhk-marka);
  color: #12161B;
  font-weight: 700;
}

.advhk-sifirla {
  margin: 0;
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: none;
  border: 0;
  padding: 0;
  color: var(--advhk-soluk);
  font: inherit;
  font-family: var(--advhk-mono);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  cursor: pointer;
}

.advhk-sifirla:hover { color: var(--advhk-marka-acik); }
.advhk-sifirla:focus-visible { outline: 2px solid var(--advhk-marka-parlak); outline-offset: 3px; }

/* ---------- Sonuç ----------
   Eskiden sağ sütunda yapışkandı; artık girdilerin altında, kartın içinde.

   min-width:0 — ızgara öğesinin varsayılanı "auto" ve içerikten küçülmesini
   ENGELLİYOR. Uzun bir formül satırı (Rockport denklemi) bu yüzden sütunu
   1091px'e şişirip sayfayı 182px yatay taşırıyordu ve .advhk-eq'daki
   overflow-x:auto hiç devreye girmiyordu. Bu satır olmadan formül kutusu
   KAYDIRMAZ, GENİŞLER. */
.advhk-sonuc {
  position: static;
  min-width: 0;
  border-top: 1px solid var(--advhk-cizgi);
}

.advhk-kart-sonuc {
  background: var(--advhk-kart);
  color: var(--advhk-metin);
  border-radius: 0;
  box-shadow: none;
  overflow: hidden;
  padding: 24px 26px 26px;
}

@media (max-width: 520px) {
  .advhk-kart-sonuc { padding: 20px 18px; }
}

.advhk-rlabel {
  font-family: var(--advhk-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--advhk-marka-acik);
}

.advhk-bignum {
  font-family: var(--advhk-mono);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -1px;
  margin: 10px 0 6px;
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.advhk-bignum .n {
  font-size: clamp(40px, 8vw, 52px);
  font-variant-numeric: tabular-nums;
  color: var(--advhk-metin);
}

.advhk-bignum .u {
  font-family: var(--advhk-mono);
  font-size: 16px;
  font-weight: 500;
  color: var(--advhk-soluk);
  letter-spacing: 0;
}

.advhk-rmeta { color: var(--advhk-metin-2); font-size: 15px; font-weight: 400; }

.advhk-netbox {
  margin-top: 16px;
  background: var(--advhk-zemin);
  border-left: 3px solid var(--advhk-marka);
  border-radius: 0;
  padding: 14px 16px;
}

.advhk-netbox .t { font-weight: 400; font-size: 15px; line-height: 1.6; margin: 0 0 5px; color: var(--advhk-metin-2); }
.advhk-netbox .t b { color: var(--advhk-metin); font-weight: 700; font-variant-numeric: tabular-nums; }
.advhk-netbox .t b.beyaz { color: var(--advhk-metin); }
.advhk-netbox .d { font-size: 13px; color: var(--advhk-soluk); line-height: 1.55; margin: 0; }

.advhk-kod {
  margin-top: 16px;
  background: var(--advhk-ic-zemin);
  border: 1px solid var(--advhk-cizgi-2);
  border-radius: 0;
  padding: 14px 16px;
}

.advhk-eq {
  font-family: var(--advhk-mono);
  font-size: 13px;
  color: var(--advhk-metin-2);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  overflow-x: auto;
  white-space: nowrap;
  margin: 0;
}

.advhk-eq .op { color: var(--advhk-soluk); }

.advhk-meta { margin: 10px 0 0; font-size: 12px; color: var(--advhk-soluk); line-height: 1.6; }

.advhk-meta a {
  color: var(--advhk-marka-acik);
  text-decoration: none;
  border-bottom: 1px solid rgba(232, 120, 45, .45);
}

.advhk-meta a:hover { color: var(--advhk-marka-parlak); }
.advhk-meta a:focus-visible { outline: 2px solid var(--advhk-marka-parlak); outline-offset: 2px; }

.advhk-uyari { margin: 14px 0 0; padding: 0; list-style: none; }
.advhk-uyari:empty { display: none; }

.advhk-uyari li {
  display: flex;
  gap: 9px;
  font-size: 13px;
  color: var(--advhk-metin-2);
  line-height: 1.5;
  margin-top: 8px;
}

.advhk-uyari li::before {
  content: "";
  flex: none;
  width: 12px;
  height: 12px;
  margin-top: 4px;
  border-radius: 50%;
  border: 2px solid var(--advhk-marka);
}

.advhk-hata {
  margin: 0 26px 18px;
  background: rgba(180, 40, 30, .16);
  border: 1px solid rgba(230, 90, 70, .4);
  color: #F3C9C2;
  border-radius: 0;
  padding: 14px 16px;
  font-size: 14px;
}

.advhk-hata ul { margin: 6px 0 0; padding-left: 18px; }

/* ---------- Formül / kaynak kartı ---------- */

.advhk-formul-kart {
  margin-top: 0;
  border-top: 1px solid var(--advhk-cizgi);
  padding: 0 0 4px;
}

.advhk-formul-izgara {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 26px;
  padding: 0 26px 22px;
}

@media (max-width: 620px) {
  .advhk-formul-izgara { grid-template-columns: 1fr; padding: 0 18px 18px; }
}

.advhk-fk {
  font-family: var(--advhk-mono);
  font-weight: 600;
  font-size: 9.5px;
  color: var(--advhk-soluk);
  margin: 0 0 7px;
  text-transform: uppercase;
  letter-spacing: .16em;
}

.advhk-hap {
  display: inline-block;
  font-family: var(--advhk-mono);
  font-size: 13px;
  background: var(--advhk-ic-zemin);
  border: 1px solid var(--advhk-cizgi-2);
  color: var(--advhk-metin-2);
  padding: 8px 12px;
  border-radius: 0;
}

.advhk-hap em { color: var(--advhk-marka-acik); font-style: normal; font-weight: 600; }

.advhk-refnot {
  grid-column: 1 / -1;
  border-top: 1px solid var(--advhk-cizgi-2);
  margin-top: 6px;
  padding-top: 16px;
  font-size: 12.5px;
  color: var(--advhk-soluk);
  line-height: 1.65;
}

.advhk-refnot p { margin: 0 0 12px; }
.advhk-refnot p:last-child { margin-bottom: 0; }
.advhk-refnot b { color: var(--advhk-metin-2); }
.advhk-refnot a { color: var(--advhk-marka-acik); }

/* ---------- Tablo ---------- */

.advhk-tablo-sarmal {
  margin-top: 0;
  border-top: 1px solid var(--advhk-cizgi);
  padding: 20px 26px 24px;
}

@media (max-width: 520px) {
  .advhk-tablo-sarmal { padding: 18px; }
}

.advhk-tablo-sarmal h2 {
  font-family: var(--advhk-mono);
  font-weight: 600;
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--advhk-marka-acik);
  margin: 0 0 6px;
  line-height: 1.3;
}

.advhk-tablo-not { color: var(--advhk-soluk); font-size: 12.5px; margin: 0 0 14px; max-width: 720px; }
.advhk-tablo-not b { color: var(--advhk-metin); font-weight: 600; }

.advhk-kaydir {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--advhk-cizgi-2);
  border-radius: 0;
  background: transparent;
}

.advhk-tablo { width: 100%; border-collapse: collapse; min-width: 520px; }

.advhk-tablo caption {
  caption-side: top;
  text-align: left;
  font-size: 12px;
  color: var(--advhk-soluk-2);
  padding: 12px 14px 4px;
}

.advhk-tablo th, .advhk-tablo td {
  padding: 11px 14px;
  text-align: right;
  font-size: 13.5px;
}

.advhk-tablo thead th {
  background: var(--advhk-ic-zemin);
  color: var(--advhk-soluk);
  font-family: var(--advhk-mono);
  font-weight: 600;
  font-size: 9.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--advhk-cizgi-2);
}

.advhk-tablo thead th:first-child, .advhk-tablo tbody th { text-align: left; }
.advhk-tablo tbody th { font-weight: 500; color: var(--advhk-metin-2); background: transparent; font-size: 13.5px; }
.advhk-tablo tbody tr + tr td, .advhk-tablo tbody tr + tr th { border-top: 1px solid var(--advhk-cizgi-2); }
.advhk-tablo tbody td {
  font-family: var(--advhk-mono);
  font-variant-numeric: tabular-nums;
  color: var(--advhk-metin);
  font-weight: 500;
}

/* Kullanıcının kilosuna en yakın kolon vurgulanır — tablonun asıl işlevi bu. */
.advhk-tablo tbody tr.advhk-aktif th { color: var(--advhk-marka-acik); font-weight: 700; }
.advhk-tablo tbody td.advhk-aktif {
  background: rgba(232, 120, 45, .14);
  color: var(--advhk-marka-parlak);
  font-weight: 700;
}

/* ---------- Sorumluluk notu ---------- */

.advhk-sorumluluk {
  background: transparent;
  border: 0;
  border-top: 1px solid var(--advhk-cizgi);
  border-radius: 0;
  padding: 16px 26px 20px;
  font-size: 12.5px;
  color: var(--advhk-soluk);
  margin: 0;
  line-height: 1.6;
}

.advhk-sorumluluk b { color: var(--advhk-metin-2); }

@media (max-width: 520px) {
  .advhk-sorumluluk { padding: 14px 18px 18px; }
}

/* ==========================================================================
   VO2 max aracına özel parçalar (.advvo-*)

   Kalori aracıyla aynı iskeleti kullanır; buradakiler yalnız o araçta olan
   üç şey için: belirsizlik bandı, yüzdelik çubuğu ve kaynak listesi.
   ========================================================================== */

/* Belirsizlik bandı — .advhk-netbox ile aynı kalıp, farklı içerik */
.advvo-bant {
  margin-top: 16px;
  background: var(--advhk-zemin);
  border-left: 3px solid var(--advhk-marka);
  border-radius: 0;
  padding: 14px 16px;
}

.advvo-bant .t { font-weight: 400; font-size: 15px; margin: 0 0 5px; color: var(--advhk-metin-2); }
.advvo-bant .t b { color: var(--advhk-metin); font-weight: 700; font-variant-numeric: tabular-nums; }
.advvo-bant .d { font-size: 13px; color: var(--advhk-soluk); line-height: 1.55; margin: 0; }

/* Yüzdelik dilim — aracın asıl çıktısı: çıplak sayı bir şey anlatmıyor */
.advvo-yuzdelik { margin-top: 18px; }

.advvo-y-ust {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.advvo-y-ad {
  font-size: 15px;
  font-weight: 700;
  color: var(--advhk-metin);
}

.advvo-y-sayi {
  font-family: var(--advhk-mono);
  font-size: 12px;
  color: var(--advhk-soluk);
  white-space: nowrap;
}

.advvo-y-sayi b {
  color: var(--advhk-marka-parlak);
  font-size: 15px;
  font-variant-numeric: tabular-nums;
}

.advvo-cubuk {
  position: relative;
  height: 8px;
  border-radius: 0;
  background: rgba(239, 237, 231, .12);
  overflow: hidden;
}

.advvo-cubuk-dolgu {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 0;
  background: linear-gradient(90deg, oklch(0.58 0.19 45), oklch(0.82 0.15 45));
  transition: width .25s ease;
}

/* Kullanıcı hareketten rahatsızsa animasyonu kapat */
@media (prefers-reduced-motion: reduce) {
  .advvo-cubuk-dolgu { transition: none; }
}

.advvo-y-aciklama {
  margin: 9px 0 0;
  font-size: 13px;
  color: var(--advhk-metin-2);
  line-height: 1.55;
}

.advvo-protokol {
  margin: 0;
  font-size: 14px;
  line-height: 1.65;
  color: var(--advhk-metin-2);
}

/* Kaynak listesi — aracın ayırt edici parçası, göze de öyle görünmeli */
.advvo-kaynak-giris {
  margin: 0 0 14px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--advhk-soluk);
}

.advvo-kaynaklar {
  margin: 0;
  padding-left: 20px;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--advhk-soluk);
}

.advvo-kaynaklar li { margin-bottom: 11px; }
.advvo-kaynaklar li:last-child { margin-bottom: 0; }

.advvo-atif { color: var(--advhk-metin-2); }

.advvo-pmid {
  display: inline-block;
  margin-left: 4px;
  padding: 1px 7px;
  border-radius: 0;
  background: rgba(232, 120, 45, .16);
  border: 1px solid rgba(232, 120, 45, .3);
  color: var(--advhk-marka-parlak);
  font-family: var(--advhk-mono);
  font-size: 10.5px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.advvo-pmid:hover { background: rgba(232, 120, 45, .28); }

/* Örneklem bilgisi ayrı satırda: künyeden ayrı okunmalı, çünkü aracın
   sınırlarını asıl bu belirliyor (kaç kişi, kim). */
.advvo-ornek {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  color: var(--advhk-soluk-2);
}

.advvo-ornek::before { content: "Örneklem: "; }

/* Etiket içindeki "(isteğe bağlı)" ibaresi. Önce satır içi #6e6e77 ile
   yazılıyordu; koyu zeminde okunmuyordu, sınıfa alındı. */
.advhk-ops {
  font-weight: 400;
  letter-spacing: .06em;
  color: var(--advhk-soluk-2);
}

/* ---------- "Varsayılana dön" ızgaradan çıkarıldı (22 Ağustos) ----------
   HATA: düğme `<form class="advhk-form">`in DOĞRUDAN çocuğu, yani bir
   ızgara hücresi. `auto-fit` sütun sayısını öğe sayısına göre ürettiği
   için 4 görünür alan + 1 düğme = 5 sütun oluyordu; düğmenin arka planı
   olmadığından hücresi "boş koyu kutu" gibi duruyor ve alanlar sola
   sıkışmış görünüyordu. Canlıda ölçüldü: alanlar 4×249 px, sağda
   250 px ölü alan. Kullanıcı buna "kaymış" dedi, haklıydı.

   ⚠️ `grid-column: 1 / -1` ÇÖZMÜYOR: düğme son sütunu da işgal ettiği
   için `auto-fit` onu çökertemiyor, boşluk kalmaya devam ediyor.
   Düğmeyi ızgaradan tamamen çıkarmak gerekiyor.

   Sonuç (ölçüldü): alanlar 4×311 px, sağdaki boşluk **0**, düğme panelin
   sağ altında ve bir sonraki bölümle çakışmıyor.
   ⚠️ `:has()` ile sınırlı: `.advhk-panel` kaynaklar kartında da kullanılıyor,
   oraya alt boşluk eklemek gereksiz yer açardı.
   ------------------------------------------------------------------------ */
.advhk-panel:has(.advhk-sifirla) {
  position: relative;
  padding-bottom: 46px;
}
.advhk-sifirla {
  position: absolute;
  right: 22px;
  bottom: 12px;
  margin: 0;
}

/* ---------- <fieldset> varsayılan çerçevesi sıfırlanmamıştı (22 Ağustos) --
   Alanların ikisi `<div>`, ikisi `<fieldset>` (segmentli olanlar). `.advhk-alan`
   kuralı `border` sıfırlamıyordu; tarayıcı fieldset'lere kendi varsayılanını
   basıyordu: **2px groove #F0F0F0**. Sonuç: dört alandan ikisinin etrafında
   açık renk bir çerçeve, `<legend>` metni de o çerçevenin üstünü kesiyordu.
   Kullanıcının "kaymış" dediği görüntünün ASIL sebebi buydu — ızgara zaten
   doğruydu. Canlıda ölçüldü: FIELDSET 2px, DIV 0px.
   `min-inline-size: 0` da şart: fieldset'in varsayılanı `min-content`,
   dar alanda daralmayı engelliyor. */
.advhk-alan {
  border: 0;
  min-inline-size: 0;
}

/* ---------- Kaynaklar listesi: ölçü, boyut ve kontrast (22 Ağustos) ------
   Üç ayrı kusur ölçüldü ve üçü de düzeltildi:

   ① SATIR ÇOK UZUN. Liste kartın tam genişliğine yayılıyordu: 1226 px,
      yaklaşık **136 karakter**. Okunabilir sınır 65–75; künyeler bu yüzden
      "duvar" gibi görünüyordu. Ölçü 74ch'e alındı.
   ② BOYUT TEMADAN SIZIYORDU. Buradaki `font-size: 12.5px` uygulanmıyordu:
      temanın `.adv-makale__govde .adv-prose ol > li` kuralı (0,2,2)
      `li`'yi doğrudan hedefleyip 18 px basıyordu — `.advvo-kaynaklar`
      (0,1,0) yalnız KALITIM verdiği için yarışa bile giremiyordu.
      Tema tarafında kural `:where()` ile sarıldı; burada da `li` açıkça
      hedefleniyor ki eklenti kendi ölçüsünü garantiye alsın.
   ③ "ÖRNEKLEM" NOTU OKUNMUYORDU: `--advhk-soluk-2` ile kontrast **3,46**
      (eşik 4,5). Bir ton açılıp `--advhk-soluk`a alındı → 5,34.
      Not küçük punto olduğu için burada eşiğin altına düşmek kabul edilemez;
      aracın SINIRLARINI (kaç kişi, kim üzerinde ölçüldü) tam olarak bu
      satır anlatıyor.
   ------------------------------------------------------------------------ */
.advvo-kaynaklar {
  max-width: 74ch;
}
.advvo-kaynaklar li {
  font-size: 13.5px;
  line-height: 1.6;
}
.advvo-kaynak-giris {
  max-width: 74ch;
}
.advvo-ornek {
  color: var(--advhk-soluk);
}

/* ---------- Kaynaklar akordiyon içinde: AÇIK zemin (22 Ağustos) ---------
   Liste koyu araç kartından çıkıp temanın akordiyon grubuna taşındı.
   Oradaki zemin AÇIK, dolayısıyla koyu zemin için seçilmiş krem/gri
   mürekkepler orada okunmaz — renkler açık zemine göre yeniden veriliyor.
   ⚠️ Ölçü sınırı burada da duruyor: akordiyon gövdesi geniş, künyeler
   yine tam genişliğe yayılırdı. */
.adv-akordiyon__govde .advvo-kaynaklar {
  max-width: 74ch;
  padding-left: 20px;
  color: var(--adv-govde, #22262A);
}
.adv-akordiyon__govde .advvo-kaynaklar li {
  font-size: 15px;
  line-height: 1.6;
  margin-bottom: 12px;
}
.adv-akordiyon__govde .advvo-atif { color: var(--adv-baslik, #14181C); }
.adv-akordiyon__govde .advvo-ornek {
  color: var(--adv-ikincil, #4A4F55);
  font-size: 13px;
}
.adv-akordiyon__govde .advvo-pmid {
  background: rgba(232, 120, 45, .12);
  border-color: rgba(232, 120, 45, .45);
  color: #A8471C;
}

/* ---------- Sağlık notu: sitenin tıbbi uyarı dili (22 Ağustos) ----------
   Not, koyu araç kartının içinden çıkarıldı; kart artık yalnız girdi ve
   sonuç taşıyor. Kutunun görünümü Yardımcı eklentisinin antrenman
   yazılarında kullandığı `advenway-uyari` ile birebir aynı — site genelinde
   TEK bir uyarı dili olsun diye sınıf adı da bilerek aynı.
   ⚠️ O eklenti biçimi yalnız `is_singular('post')` iken basıyor; araç
   sayfaları `page` olduğundan burada da tanımlı olmak ZORUNDA, yoksa kutu
   biçimsiz düz metin olarak görünür. */
.advenway-uyari {
  margin: 2.4em 0 0;
  padding: 1.05em 1.2em;
  border: 1px solid rgba(0, 0, 0, .1);
  border-left: 3px solid #E5732A;
  border-radius: 3px;
  background: rgba(0, 0, 0, .025);
  font-size: .93em;
  line-height: 1.65;
}
.advenway-uyari p { margin: 0; }
.advenway-uyari-baslik {
  font-weight: 700;
  margin-bottom: .4em !important;
  letter-spacing: .01em;
}

/* Protokol metni akordiyon içinde: açık zemin, gövde ölçüsü. */
.adv-akordiyon__govde .advvo-protokol {
  max-width: 74ch;
  margin: 0;
}

/* ---------- Sonuç kartı: sayı ve güven aralığı YAN YANA (22 Ağustos) ----
   Büyük sayı ile "gerçek değer şu aralıkta" kutusu alt alta duruyordu ve
   kart gereksiz uzuyordu. Geniş ekranda ikisi yan yana: sol sütunda etiket
   + sayı + künye, sağ sütunda aralık kutusu. Yüzdelik çubuğu, formül ve
   uyarı listesi tam genişlikte kalıyor.
   Ölçüldü: kart yüksekliği 593 → 496 px (~97 px kazanç).

   ⚠️ `> * { grid-column: 1 / -1 }` ŞART. İlk denemede yalnız dört çocuk
   yerleştirilmişti; kartta beşinci bir çocuk daha var (`.advhk-uyari`) ve
   yerleştirilmeyince otomatik akışa girip fazladan satır açıyor, üstelik
   geniş içeriğiyle SOL sütunu 1041 px'e şişiriyordu — kart kısalacağına
   771 px'e ÇIKMIŞTI. Önce hepsi tam genişlik yapılıyor, sonra dördü
   tek tek yerine konuyor.
   ⚠️ Kolonlarda `minmax(0, …)`: `auto`/`1fr`'nin örtük alt sınırı içerik
   genişliği olduğu için aralık kutusu 125 px'e sıkışıp 385 px yüksekliğe
   çıkmıştı — segmentlerdeki tuzağın aynısı.
   ------------------------------------------------------------------------ */
@media (min-width: 860px) {
  [data-advvo="kart"] {
    display: grid;
    grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
    column-gap: 32px;
    align-items: start;
  }
  [data-advvo="kart"] > * { grid-column: 1 / -1; }
  [data-advvo="kart"] .advhk-rlabel { grid-column: 1; grid-row: 1; }
  [data-advvo="kart"] .advhk-bignum { grid-column: 1; grid-row: 2; }
  [data-advvo="kart"] .advhk-rmeta  { grid-column: 1; grid-row: 3; }
  [data-advvo="kart"] .advvo-bant {
    grid-column: 2;
    grid-row: 1 / 4;
    align-self: start;
    margin: 0;
  }
}

/* ---------- Izgara: eksik son satır GRİ BLOK bırakıyordu (22 Ağustos) ---
   Alanlar "gap:1px + kapsayıcı zemini çizgi rengi" tekniğiyle ayrılıyordu:
   hücreler kart rengini basar, aradaki 1px'lik boşluklardan çizgi rengi
   görünür. Bu teknik son satır TAM DOLU olduğu sürece çalışıyor.

   VO2 max "1 mil yürüyüş" moduna geçince alan sayısı 4'ten 6'ya çıkıyor,
   ızgara ise 5 sütun üretiyor (auto-fit, 1248 px). 6. alan alt satıra
   düşüyor ve yanındaki DÖRT BOŞ SÜTUN, kapsayıcının çizgi rengini
   gösterip kocaman gri bir blok oluyordu. Canlıda ölçüldü: boş alan
   998 px genişliğinde. Kullanıcı "sayfa tamamen kayıyor" dedi.

   ÇÖZÜM: hairline artık kapsayıcıdan değil HÜCRELERDEN geliyor.
   Boşluk kalmadığı için hücre olmayan yerde çizilecek bir şey de yok;
   eksik son satır kart zeminiyle aynı, yani görünmez.
   ⚠️ Alan sayısı moda göre değiştiği (4 / 6) ve sütun sayısı ekrana göre
   çözüldüğü için "son satırı doldur" gibi bir çözüm mümkün değil —
   sorunu kaynağında kesmek gerekiyordu.
   ------------------------------------------------------------------------ */
.advhk-form {
  gap: 0;
  background: transparent;
}
.advhk-alan {
  border-right: 1px solid var(--advhk-cizgi);
  border-bottom: 1px solid var(--advhk-cizgi);
}

/* ---------- Cinsiyet notu: katman, akış DEĞİL (22 Ağustos) --------------
   "Belirtmek istemiyorum" seçilince açıklama alanın içinde açılıyor ve
   kutuyu büyütüyordu: ölçüldü, alan 156 → 261 px. Izgara satırı da onunla
   birlikte uzayıp yerleşimi bozuyordu.

   Not artık mutlak konumda bir katman: içerik akışını hiç etkilemiyor,
   alan 156 px'te kalıyor. Başka bir seçenek işaretlenince JS notu yine
   gizliyor, yani ayrıca kapatma düğmesi gerekmiyor.
   ⚠️ Yalnız `[data-advvo="cinsiyet-not"]` hedefleniyor: aynı `advhk-ipucu`
   sınıfını taşıyan diğer ipuçları (parkur tarifi, 1 mil açıklamaları)
   akışta KALMALI, onlar girdinin hemen altında okunuyor.
   ------------------------------------------------------------------------ */
.advhk-alan { position: relative; }

[data-advvo="cinsiyet-not"] {
  position: absolute;
  left: 14px;
  right: 14px;
  top: calc(100% - 16px);
  z-index: 6;
  margin: 0;
  padding: 12px 14px;
  background: #0F1318;
  border: 1px solid rgba(239, 237, 231, .22);
  box-shadow: 0 10px 28px rgba(0, 0, 0, .55);
  color: var(--advhk-metin-2);
}

/* =========================================================================
 * GENİŞ ŞABLONDA ÖLÜ ALAN — 22 Ağustos 2026, ikinci tur
 *
 * Kullanıcı bisiklet kalori sayfası için "kaymış, gereksiz boşluklar var"
 * dedi. Aynı gün yapılan ilk tur (sıfırla düğmesini ızgaradan çıkarma,
 * fieldset çerçevesi) doğru düzeltmelerdi ama ASIL sebep başkaydı ve canlıda
 * ölçüldü:
 *
 *   .advhk-form  → repeat(auto-fit, minmax(220px, 1fr))
 *   araç genişliği 1248 px → 5 iz (5 × 249,6)
 *   satır başına 2 alan → 3., 4., 5. izler boş → sağda ~750 px ölü alan
 *
 * `auto-fit` boş izleri çökertip kalanları genişletir; burada çökertemiyor
 * çünkü segment alanı (`grid-column: 1 / -1`) BÜTÜN izleri işgal ediyor,
 * yani hiçbir iz "boş" sayılmıyor. Sıfırla düğmesi için not düşülen tuzağın
 * aynısı, bu kez segment alanında.
 *
 * İkinci ölçülen kusur: uzun `-marka` ipucu 205 px'lik hücrede 4 satıra
 * kırılıyor, satırın yüksekliğini 179 px'e çıkarıyor; komşu "Kilon" hücresi
 * de o yüksekliğe geriliyor ve içeriğinin altında ~118 px boşluk kalıyordu.
 *
 * ÇÖZÜM: geniş şablonda düzen ikiye ayrılıyor — solda tek kolon girdi paneli,
 * sağda sonuç. Vites ve windsurf araçlarındaki düzenin aynısı. Tek kolonda
 * boş iz kalmıyor, ipucu ~430 px'e yayılıp 2 satıra iniyor, çipler tek sıraya
 * sığıyor ve sağdaki 750 px sonuç bloğuna gidiyor.
 *
 * ⚠️ Ölçüt VIEWPORT değil KAPSAYICI genişliği. Araç dar bir yazı sütununa
 * gömülürse (kenar çubuklu şablon) tek kolonda kalmalı; `@media` kullanmak
 * 1100 px'lik ekranda 700 px'lik sütunu ikiye bölerdi.
 * ====================================================================== */

.advhk {
	container-type: inline-size;
}

@container (min-width: 1000px) {
	.advhk-grid {
		display: grid;
		grid-template-columns: minmax(400px, 460px) minmax(0, 1fr);
		gap: 22px;
		align-items: start;
	}

	/* Sol sütunda alanlar alt alta: 460 px'i ikiye bölmek ipucunu ve çip
	   sırasını yeniden kırardı — asıl kazanç tek kolonda. */
	.advhk-grid > .advhk-panel .advhk-form {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ---------- Tek başına kalan çip satırı geriyordu ----------
   `.advhk-cip { flex: 1 1 auto }` yüzünden sıraya sığmayan son çip
   ("100 km") kendi satırında tam genişliğe uzuyordu; dördü aynı boyda
   olmadığı için sıra kaymış görünüyordu. Artık doğal genişliğinde kalıyor. */
.advhk-cipler .advhk-cip {
	flex: 0 1 auto;
}

/* =========================================================================
 * TABLO OKUNURLUĞU + NEFES ARALIĞI + AÇILIR KART — 22 Ağustos 2026
 *
 * ① TEMA ZEBRASI TABLOYA SIZDI (dördüncü kez, bu kez hesaplayıcılarda).
 *    Canlıda ölçüldü: 7 hücrenin zemini **#F3F1EB** (krem), metni #EFEDE7 —
 *    kontrast ≈ 1, sayılar tamamen okunamıyordu. Kaynak temanın
 *    `makale.css` kuralı:
 *        :where(.adv-makale__govde .adv-prose tbody tr:nth-child(even)) td
 *    `:where()` yalnız ATALARI sarıyor, sondaki `td` özgüllüğe (0,0,1)
 *    katkı yapıyor. Eklentinin `.advhk-tablo tbody td` kuralı (0,1,2) daha
 *    güçlü AMA arka plan tanımlamıyordu — yani yarışa hiç girmiyordu.
 *    `tbody th` zaten `background: transparent` dediği için başlık sütunu
 *    temiz kalmış, sadece `td`ler kremlenmişti; teşhisi bu asimetri verdi.
 *    Teşhis yöntemi: stil sayfalarını tek tek `disabled` yapıp kremli hücre
 *    saymak — kural aramaktan hızlı ve kesin sonuç veriyor.
 *
 * ② SINIRLAR BELİRSİZDİ. Satırlar yalnız üst çizgiyle ayrılıyordu, sütun
 *    ayrımı yoktu; kullanıcı "renk karışıklığı ve sınırlar belli olmuyor"
 *    dedi. Koyu zeminde çalışan çok hafif bir zebra + ince sütun çizgisi
 *    eklendi. Aktif satır ve aktif hücre iki farklı turuncu yoğunluğunda.
 *
 * ③ ÇİZGİ–METİN MESAFESİ. `.advhk-formul-izgara` üst dolgusu 0'dı; başlık
 *    şeridinin alt çizgisiyle "FORMÜL" etiketi dip dibeydi.
 * ====================================================================== */

/* ---------- ① + ② Tablo ---------- */
.advhk .advhk-tablo tbody td,
.advhk .advhk-tablo tbody th {
	background: transparent;
}

.advhk .advhk-tablo tbody tr:nth-child(even) td,
.advhk .advhk-tablo tbody tr:nth-child(even) th {
	background: rgba( 239, 237, 231, 0.035 );
}

.advhk .advhk-tablo td + td,
.advhk .advhk-tablo thead th + th,
.advhk .advhk-tablo tbody th + td {
	border-left: 1px solid rgba( 239, 237, 231, 0.07 );
}

.advhk .advhk-tablo tbody tr.advhk-aktif td,
.advhk .advhk-tablo tbody tr.advhk-aktif th {
	background: rgba( 232, 120, 45, 0.07 );
}

/* Aktif hücre satırdan da ayrışsın — sıra önemli, satır kuralından SONRA. */
.advhk .advhk-tablo tbody td.advhk-aktif {
	background: rgba( 232, 120, 45, 0.20 );
	box-shadow: inset 0 0 0 1px rgba( 232, 120, 45, 0.45 );
}

/* ---------- ③ Nefes aralığı ---------- */
.advhk .advhk-formul-izgara {
	padding-top: 20px;
}

.advhk .advhk-refnot {
	margin-top: 10px;
	padding-top: 18px;
}

.advhk .advhk-tablo-sarmal {
	padding-top: 22px;
}

/* ---------- Açılır kapanır formül kartı ---------- */
.advhk-formul-kart > summary.advhk-kart-baslik {
	cursor: pointer;
	list-style: none;
}

.advhk-formul-kart > summary.advhk-kart-baslik::-webkit-details-marker {
	display: none;
}

/* Artı/eksi işareti sağ uçta; ikon ve metin solda kalsın diye margin-left:auto.
   `content` değişimi `[open]` ile — JS yok. */
.advhk-formul-kart > summary.advhk-kart-baslik::after {
	content: "+";
	margin-left: auto;
	font-family: var(--advhk-mono);
	font-size: 20px;
	font-weight: 400;
	line-height: 1;
	color: var(--advhk-soluk);
	transition: color .14s ease-out;
}

.advhk-formul-kart[open] > summary.advhk-kart-baslik::after {
	content: "–";
	color: var(--advhk-marka-acik);
}

.advhk-formul-kart > summary.advhk-kart-baslik:hover::after {
	color: var(--advhk-marka-acik);
}

/* Kapalıyken alt çizgi bir sonraki bölümün üst çizgisiyle çakışıyordu. */
.advhk-formul-kart:not([open]) > summary.advhk-kart-baslik {
	border-bottom: 0;
}

.advhk-formul-kart > summary.advhk-kart-baslik:focus-visible {
	outline: 2px solid var(--advhk-marka);
	outline-offset: -2px;
}

/* =========================================================================
 * TABLO TİPOGRAFİSİ VİTES ARACINA HİZALANDI — 22 Ağustos 2026
 *
 * Kullanıcı "metin boyutları ve renkleri arasında tutarsızlık var" dedi ve
 * ölçüt olarak vites aracını gösterdi ("misal güzel örnek"). Canlıda iki araç
 * yan yana ölçüldü:
 *
 *              VİTES (ölçüt)                 KALORİ (önce)
 *   başlık     Newsreader 22px, MÜREKKEP     Newsreader 31px, TURUNCU
 *   thead th   Mono 12px/500, mürekkep       Mono 9.5px/600, soluk
 *   tbody td   Mono 14.5px/700               Mono 13.5px/500
 *   hücre içi  12/16 px ve 16 px             11/14 px
 *
 * Yani kalori tablosunda başlık gereğinden büyük ve turuncu, sütun başlıkları
 * okunamayacak kadar küçük ve soluk, sayılar ise vurgusuzdu — "renk karışıklığı"
 * tam olarak bu. Ölçüler vites değerlerine çekildi.
 *
 * ⚠️ BAŞLIK ÖZGÜLLÜĞÜ: temanın `.adv-makale__govde .adv-prose h2` kuralı (0,2,1)
 * ve eklentiden SONRA yükleniyor; eklentinin `.advhk-tablo-sarmal h2` kuralı
 * (0,1,1) olduğu için yalnız RENGİ geçebiliyordu, boyut ve yazı tipi temadan
 * geliyordu (31px Newsreader). Bu yüzden h2'ye sınıf eklendi ve kural
 * `.advhk .advhk-tablo-sarmal h2.advhk-bolum-baslik` (0,3,1) ile yazıldı.
 *
 * ⚠️ TABLO ALTINDAKİ 30 px BOŞ ŞERİT: tablonun `margin-bottom: 30px` değeri
 * (yazı gövdesi kuralı) kaydırma kabının içinde boş bir bant bırakıyordu —
 * kullanıcının şikâyet ettiği "alt boşluk" buydu. Sıfırlandı.
 * ====================================================================== */

/* ---------- Bölüm başlığı ---------- */
.advhk .advhk-tablo-sarmal h2.advhk-bolum-baslik {
	margin: 0 0 6px;
	font-family: var(--advhk-serif);
	font-size: 24px;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: -0.014em;
	text-transform: none;
	color: var(--advhk-metin);
}

/* ---------- Kaydırma kabı ve tablo gövdesi ---------- */
.advhk .advhk-kaydir > .advhk-tablo {
	margin: 0;
}

.advhk .advhk-tablo caption {
	padding: 13px 16px 11px;
	font-size: 12.5px;
	color: var(--advhk-soluk-2);
	border-bottom: 1px solid var(--advhk-cizgi-2);
}

/* ---------- Sütun başlıkları: 9.5px soluk → 12px mürekkep ---------- */
.advhk .advhk-tablo thead th {
	padding: 12px 16px;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.08em;
	color: var(--advhk-metin);
}

/* ---------- Satır etiketi ve değerler ---------- */
.advhk .advhk-tablo tbody th {
	padding: 14px 16px;
	font-size: 13.5px;
	font-weight: 500;
	color: var(--advhk-metin-2);
}

.advhk .advhk-tablo tbody td {
	padding: 14px 16px;
	font-size: 14.5px;
	font-weight: 700;
}

/* Aktif satırın etiketi turuncu kalıyor (hangi satırdayız), ama artık
   değerlerle aynı ölçüde — önceki halinde etiket 13,5 değerler 13,5 idi ve
   vurgu yalnız renkteydi; şimdi değerler kalın olduğu için etiket de kalın. */
.advhk .advhk-tablo tbody tr.advhk-aktif th {
	font-weight: 700;
}

/* ---------- Tablo üstü not: caption ile aynı ailede olsun ---------- */
.advhk .advhk-tablo-not {
	font-size: 12.5px;
	color: var(--advhk-soluk);
	margin: 0 0 14px;
}


/* =========================================================================
 * SAĞ SÜTUNDAKİ BOŞ ALAN — 23 Ağustos 2026
 *
 * Sonuç paneli (sağ) form panelinden (sol) kısa kaldığı için modülün sağ alt
 * köşesinde 300 px'e varan boş koyu alan kalıyordu; sonuç metni sürüş türüne
 * göre uzayıp kısaldığı için boşluk da değişiyordu. Kullanıcı işaretledi.
 *
 * Çözüm: boşluğu kapatmak değil DOLDURMAK. Hazır tablo `advhk-grid` kabının
 * içine alındı (PHP tarafında) ve sağ sütunda sonucun altına yerleşti.
 * Sonuç YUKARIDA kalıyor — kullanıcı "toplam harcanan kaloriyi aşağı alma"
 * dedi, o yüzden satır sırası: sonuç row 1, tablo row 2, form iki satır boyu.
 *
 * ⚠️ İLK DENEMEDE YAPILAN HATA, tekrar etme: ızgara `.advhk`ın kendisine
 * taşınıp `.advhk-grid` `display:contents` yapılmıştı. `@container` sorgusu
 * KAPSAYICININ KENDİSİNE uygulanmaz — `.advhk` container-type taşıdığı için
 * o kural hiç çalışmadı, ama `display:contents` çalıştı ve düzen tek kolona
 * çöktü (sonuç formun altına düştü). Izgara `.advhk-grid`te kalmalı.
 * ====================================================================== */

@container (min-width: 1000px) {
	.advhk-grid > .advhk-panel {
		grid-column: 1;
		grid-row: 1 / span 2;
	}

	.advhk-grid > .advhk-sonuc {
		grid-column: 2;
		grid-row: 1;
	}

	.advhk-grid > .advhk-tablo-sarmal {
		grid-column: 2;
		grid-row: 2;
		padding-left: 0;
		padding-right: 0;
	}
}

/* ======================================================================
 * ZONE 2 — nabız bölgesi hesaplayıcısı (.advz-*)
 *
 * ⚠️ TABLO: kendi tablo sınıfını UYDURMA, `.advhk-tablo` kullan.
 * İlk sürümde `.advz-tablo` diye ayrı bir tablo yazılmıştı ve canlıda iki
 * hata birden verdi: ① `tbody th` rengi temanın gri değerine (rgb 74,79,85)
 * düşüp koyu zeminde okunmaz oldu, ② temanın MAKALE tablosuna ait açık tema
 * zebra şeridi (`rgb 243,241,235`) Zone 4 satırını beyaza boyadı, üstündeki
 * açık metin tamamen kayboldu. `.advhk-tablo` ikisini de zaten nötrlüyor
 * (kendi jetonları + `background: transparent` + kendi zebrası).
 * Vurgulu satır sınıfı da hazır: `advhk-aktif`.
 *
 * ⚠️ Bu araç YAZI SÜTUNUNA gömülüyor (756 px ölçüldü), araç sayfasına
 * (1193 px) değil. Genişlik kararları @container ile; @media kullanmak
 * 1100 px'lik ekranda 756 px'lik sütunu ikiye bölerdi.
 *
 * ⚠️ 756 px TUZAĞI: `.advhk-form` auto-fit/minmax(220px) olduğu için 756'da
 * ÜÇ sütuna bölünüyor, `@container (min-width:1000px)` ise henüz girmiyor.
 * Uzun etiketli alan satırın tamamına yayılmazsa hap iki satıra kırılıyor
 * (ölçüldü: 53 px, oysa 1193'te ve 360'ta 36 px). 360 px'te sorun YOK.
 * ====================================================================== */

.advz .advhk-alan.advz-tamgenis { grid-column: 1 / -1; }

/* --- ileri seçenekler: modülü kısaltmak için katlanıyor --- */
.advz-ileri {
	grid-column: 1 / -1;
	border-top: 1px solid var(--advhk-cizgi, #d3dbd1);
	margin: 2px 0 0;
	padding: 10px 0 0;
}
.advz-ileri > summary {
	cursor: pointer;
	list-style: none;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	line-height: 1.7;
	color: var(--advhk-metin-2, #495449);
	display: flex;
	align-items: center;
	gap: 7px;
}
.advz-ileri > summary::-webkit-details-marker { display: none; }
.advz-ileri > summary::after {
	content: "+";
	font-size: 15px;
	line-height: 1;
	opacity: .7;
}
.advz-ileri[open] > summary::after { content: "−"; }
.advz-ileri > summary:hover { color: var(--advhk-marka, #b94e26); }
.advz-ileri > summary:focus-visible { outline: 2px solid var(--advhk-marka, #b94e26); outline-offset: 3px; }
.advz-ileri .advhk-alan { margin-top: 12px; }

/* --- Karvonen ikinci sonuç --- */
.advz-karvonen {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px;
	flex-wrap: wrap;
	margin: 9px 0 0;
	padding: 8px 12px;
	border-left: 3px solid var(--advhk-marka, #b94e26);
}
.advz-k-ad { font-size: 13px; letter-spacing: .02em; color: var(--advhk-metin-2, #495449); }
.advz-k-sayi { font-variant-numeric: tabular-nums; }
.advz-k-sayi b { font-size: 18px; font-weight: 700; }

.advz-ozet {
	margin: 10px 0 0;
	font-size: 13.5px;
	line-height: 1.5;
	color: var(--advhk-metin-2, #495449);
}

/* --- sapma bandı: tek satır görünür, gerekçesi katlı --- */
.advz-sapma { margin: 11px 0 0; }
.advz-sapma > summary {
	cursor: pointer;
	list-style: none;
	font-size: 14.5px;
	line-height: 1.5;
	padding: 8px 11px;
	border: 1px dashed var(--advhk-cizgi, #d3dbd1);
}
.advz-sapma > summary::-webkit-details-marker { display: none; }
.advz-sapma > summary b { font-variant-numeric: tabular-nums; white-space: nowrap; }
.advz-sapma > summary .neden {
	display: inline-block;
	margin-left: 4px;
	font-size: 12.5px;
	color: var(--advhk-marka, #b94e26);
	white-space: nowrap;
}
.advz-sapma[open] > summary .neden { visibility: hidden; }
.advz-sapma > summary:focus-visible { outline: 2px solid var(--advhk-marka, #b94e26); outline-offset: 2px; }
.advz-sapma .d {
	margin: 0;
	padding: 9px 11px 0;
	font-size: 13.5px;
	line-height: 1.6;
	color: var(--advhk-metin-2, #495449);
}

/* --- kaynak künyeleri --- */
.advz-kaynak-ac { margin: 14px 0 0; font-size: 13.5px; }
.advz-kaynak-ac > summary {
	cursor: pointer;
	padding: 5px 0;
	line-height: 1.5;
	color: var(--advhk-metin-2, #495449);
}
.advz-kaynak-ac > summary:hover { color: var(--advhk-marka, #b94e26); }
.advz-kaynak-not {
	margin: 9px 0 0;
	font-size: 13px;
	line-height: 1.6;
	color: var(--advhk-metin-2, #495449);
}

/* ⚠️ Zone 2 aracında bölüm başlığı `h2` DEĞİL `p` — tema İçindekiler listesini
   render edilmiş gövdedeki h2'lerden üretiyor (single.php:37), araç bir YAZIYA
   gömülü olduğu için h2 yazarsak "Beş bölge, senin değerlerinle" okurun
   içindekiler listesine sızar. Paylaşılan h2 kuralı etiket-bağımlı olduğundan
   (`h2.advhk-bolum-baslik`) aynı görünüm burada tekrarlanıyor. */
.advhk.advz .advhk-tablo-sarmal p.advhk-bolum-baslik {
	margin: 0 0 6px;
	font-family: var(--advhk-serif);
	font-size: 24px;
	font-weight: 600;
	line-height: 1.25;
	letter-spacing: -0.014em;
	text-transform: none;
	color: var(--advhk-metin);
}

/* ---------- 0.14.2: hizalama + cevabi formun bos hucresine tasima ----------
   ⚠️ ÖLÇÜLMÜŞ HİZA HATASI: `.advz-ileri` yatay dolgusuz yazılmıştı; özeti
   399 px'ten, formdaki her etiket ise 421 px'ten başlıyordu (`.advhk-alan`
   dolgusu `18px 22px 20px`). Kullanıcı "çok kenara sıkışmış" dedi, haklıydı.
   Yeni bir blok eklerken dolguyu `.advhk-alan` ile eşle, sıfır bırakma. */
.advz-ileri { padding: 12px 22px 16px; }

/* Sonuç kartının yatay dolgusu 26 px'ti, form etiketleri 22 px'te başlıyordu;
   4 px'lik kayma tek sütunlu dizilimde göze çarpıyor. Yalnız bu araçta eşitlenir. */
.advz .advhk-kart-sonuc { padding-left: 22px; padding-right: 22px; }

/* --- Cevap, formun üçüncü (boş) hücresinde --- */
.advz .advhk-alan.advz-cevap { align-content: start; }
/* ⚠️ PUNTO CANLIDA ÖLÇÜLDÜ, ÖNİZLEMEDE DEĞİL.
   Hücre içi 208 px. `.advhk-bignum` flex + 10 px boşluk + 25 px'lik "bpm".
   Canlıda "108-126" 44 px'te 178 px sürüyor → 178+10+25 = 213 > 208, sayı
   "108-" / "126" diye İKİ SATIRA kırılıyordu.
   🚨 Bağımsız önizleme bunu YAKALAMADI: orada sitenin yazı tipi yüklü değil,
   aynı metin 162 px ölçülmüştü. Punto/genişlik kararını CANLI sayfada ölç.
   40 px'te 162+8+25 = 195 px, 13 px pay kalıyor. `nowrap` da güvenlik kemeri:
   bir daha kırılacaksa taşsın, sayının ortasından bölünmesin. */
.advz .advz-cevap .advhk-bignum { margin: 6px 0 0; gap: 8px; }
.advz .advz-cevap .advhk-bignum .n { font-size: 40px; line-height: 1.08; white-space: nowrap; }
.advz .advz-cevap .advhk-bignum .u { font-size: 14px; }
.advz-cevap-not {
	margin: 4px 0 0;
	font-size: 13px;
	line-height: 1.45;
	color: var(--advhk-metin-2, #495449);
}
/* Tek sütuna düşünce (mobil) cevap girdilerin altına iner; üstünde ayırıcı. */
@container (max-width: 700px) {
	.advz .advhk-alan.advz-cevap { border-top: 1px solid var(--advhk-cizgi, #d3dbd1); }
	.advz .advz-cevap .advhk-bignum .n { font-size: 52px; }
}

/* ⚠️ 80 px'LİK BOŞ BANT: büyük sonuç formun içine taşınınca sonuç kartının
   başındaki dolgu boşta kaldı. Ölçüldü: panel alt dolgusu 46 + kart üst
   dolgusu 24 + Karvonen üst boşluğu 9 = 80 px hiçlik. Yalnız bu araçta kısılır. */
.advz .advhk-panel { padding-bottom: 20px; }
.advz .advhk-kart-sonuc { padding-top: 0; }
.advz .advhk-kart-sonuc > .advz-karvonen:first-child,
.advz .advhk-kart-sonuc > .advz-ozet:first-child { margin-top: 0; }

/* ---------- 0.14.4: okunabilirlik + sifirla dugmesi ----------------------
 * 🚨 KONTRAST ÖLÇÜLDÜ (canlı sayfa, zemin rgb(27,32,39)):
 *   .advhk-ipucu  → --advhk-soluk-2 (#6E756F) = 3,46:1  ⛔ WCAG AA eşiği 4,5
 *   .advhk-lbl    → --advhk-soluk   (#8E958F) = 5,34:1  (11,5/9,5 px'te zayıf)
 * Kullanıcı "yazılar çok koyu" dedi, ölçüm doğruladı. Diğer her şey zaten
 * 6,5-14 bandındaydı; sorun yalnız bu iki jetondaydı.
 *
 * Çözüm tek tek kural yazmak DEĞİL, jetonu modül içinde yükseltmek: aynı
 * jetonu kullanan bütün alt öğeler (ipucu, birim, yer tutucu…) birden düzelir
 * ve hiyerarşi korunur (etiket 7,47 > ipucu 6,5).
 * Araç koyu-tek-temalı, açık tema bloğu yok — sabit değer güvenli.
 * ⚠️ Bu jetonlar PAYLAŞIMLI; kalori/VO2 max araçlarında da aynı düşük kontrast
 * var. Orası ayrı bir karar, bilerek DOKUNULMADI (bkz. memory). */
.advz {
	--advhk-soluk-2: #9EA59F;  /* 3,46 → 6,50 : 1 */
	--advhk-soluk:   #AAB1AB;  /* 5,34 → 7,47 : 1 */
}
/* 11,5 px bu metin için küçük; ipucu asıl açıklamayı taşıyor. */
.advz .advhk-ipucu { font-size: 12.5px; line-height: 1.5; }

/* ⚠️ `.advhk-sifirla` PAYLAŞILAN KURALDA `position: absolute` — formun sağ alt
 * köşesine oturmak için yazılmış. Düğmeyi `<details>` içine alınca konumlandırma
 * hâlâ ESKİ kapsayıcıya göre çözülüyor ve düğme, üstündeki alanın alt çizgisiyle
 * çakışıp details'in 8 px dışına taşıyordu (ölçüldü: düğme 5051-5087, alan alt
 * kenarı 5063, details alt kenarı 5079).
 * Çözüm: bu araçta akışa geri al; alanların altında, onlarla aynı sol hizada.
 * ⚠️ `margin-left: auto` ile SAĞA yaslamayı deneme — paylaşılan kural düğmeyi
 * `display: inline-flex` yapıyor, satır içi kutuda `auto` kenar boşluğu
 * hizalama yapmaz (denendi, sessizce 0 hesaplandı). Sağa yaslamak gerekirse
 * önce `display: flex` (blok düzeyi) vermek şart. Sol hiza burada zaten
 * doğrusu: formdaki her şey 421 px'ten başlıyor, düğme de öyle. */
.advz .advz-ileri .advhk-sifirla {
	position: static;
	margin: 16px 0 0;
}

/* ---------- 0.14.6: modulun TAMAMI tek sol hizada (421 px) ----------------
 * Kullanıcı üçüncü kez hiza bildirdi. Kök sebep hep aynı: bu araçta bloklar
 * `.advz` kökünün (399 px) doğrudan çocuğu, oysa okunan hiza `.advhk-alan`
 * dolgusundan gelen 421 px. Dolgusu olmayan her yeni blok 22 px sola kaçıyor.
 *
 * Ölçülen sapmalar:
 *   .advz-kaynak-ac      → 399 px  (dolgu yok)          = 22 px SOLA
 *   .advhk-tablo-sarmal  → 425 px  (paylaşılan 26 px)   =  4 px SAĞA
 *
 * 📌 KURAL: bu araca eklenen her üst düzey blok 22 px yatay dolgu alır.
 * Kontrol: bütün blokların sol kenarı 421 px olmalı. */
.advz .advz-kaynak-ac { padding-left: 22px; padding-right: 22px; }
.advz .advhk-tablo-sarmal { padding-left: 22px; padding-right: 22px; }