/**
 * Araç sayfaları — başlık bloğu, akordiyonlar ve SSS.
 *
 * makale.css'in ÜSTÜNE yüklenir; kırıntı, paylaşım rayı ve gövde
 * tipografisi oradan gelir. Burada yalnızca araç sayfasına özgü olanlar
 * var + makale genişlik kısıtlarının geri alınması.
 */

/* ---------- 1. Gövde genişliği ------------------------------------------ */

/* Makalede gövde 760px'e kilitli; hesaplayıcı kartı ve akordiyonlar daha
   geniş bir sahne istiyor, kısıt burada kalkıyor. */
.adv-arac__govde {
  max-width: var(--adv-min);
  margin: 0 auto;
  padding: 0 var(--adv-yan) 26px;
}

/* Makalede ilk paragraf bir punto büyük gelir. Akordiyon gövdelerinin her
   biri kendi `.adv-prose`u olduğu için bu kural sayfada onlarca kez
   tetikleniyordu — araç sayfasında kapalı. */
.adv-arac__govde .adv-prose > p:first-of-type {
  font-size: 18px;
  line-height: 1.78;
  color: var(--adv-govde);
}

/* ---------- 2. Başlık bloğu --------------------------------------------- */

.adv-arac__basi {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 52px;
  align-items: end;
  max-width: var(--adv-min);
  margin: 0 auto;
  padding: 22px var(--adv-yan) 26px;
}

.adv-arac__etiket {
  display: inline-flex;
  align-items: center;
  padding: 5px 11px;
  margin-bottom: 16px;
  background: var(--adv-turuncu);
  color: var(--adv-murekkep);
  font-family: var(--adv-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.adv-arac__baslik {
  margin: 0 0 18px;
  font-family: var(--adv-serif);
  font-size: 52px;
  line-height: 1.04;
  font-weight: 600;
  letter-spacing: -0.022em;
  color: var(--adv-baslik);
}

.adv-arac__tanim {
  margin: 0;
  font-size: 17.5px;
  line-height: 1.68;
  color: var(--adv-govde);
}
.adv-arac__tanim strong,
.adv-arac__tanim b { font-weight: 700; }
.adv-arac__tanim a { border-bottom: 1px solid var(--adv-cizgi-koyu); }

.adv-arac__sag {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Üçlü künye şeridi: hücreler arasındaki 1px'lik boşluk zeminden gelir. */
.adv-arac__serit {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  margin: 0;
  background: var(--adv-cizgi-koyu);
  border: 1px solid var(--adv-cizgi-koyu);
}

.adv-arac__hucre {
  background: var(--adv-kagit);
  padding: 13px 15px;
}
.adv-arac__hucre dt {
  display: block;
  margin-bottom: 5px;
  font-family: var(--adv-mono);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--adv-ikincil);
}
.adv-arac__hucre dd {
  display: block;
  margin: 0;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--adv-baslik);
}

.adv-arac__alt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--adv-cizgi-koyu);
}
/* Canlı veri araçlarında "Güncelleme" satırı hiç basılmıyor ve şeritte tek
   çocuk kalıyor; `space-between` onu sola yapıştırırdı. Bu satır paylaş
   ikonlarını her iki durumda da sağda tutuyor — boş bir yer tutucu span
   koymaktansa böyle, o mobil sütun düzeninde fazladan boşluk üretiyordu. */
.adv-arac__alt .adv-paylas { margin-left: auto; }

.adv-arac__guncelleme {
  font-family: var(--adv-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--adv-ikincil);
}

/* ---------- 3. Akordiyonlar --------------------------------------------- */

/* İKİ SÜTUN — 21 Ağustos 2026, tasarımdaki `.acc-grid` düzeni.
 *
 * Neden ölçüyle karar verildi: tek 900 px'lik sütunda paragraf satırı
 * 90 KARAKTER çıkıyordu; rahat okuma aralığı 45–75. İki sütunda kolon
 * 602 px ve satır 60 karaktere iniyor. Vites ve kalori sayfalarında
 * simüle edildi: tablo, liste, görsel — hiçbirinde taşma ya da sıkışma
 * yok, belge genişliği değişmiyor.
 *
 * `align-items: start` şart: biri açılınca satır arkadaşı esnemesin,
 * kendi yüksekliğinde kalsın.
 */
.adv-akordiyonlar {
  max-width: 1180px;
  margin: 30px auto 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 44px;
  align-items: start;
}
/* İki sütunda ÜST çizgi ilk İKİ öğeye gerekiyor: ikisi de kendi sütununun
   başında duruyor. `:first-child` tek başına sağ sütunu başlıksız bırakır. */
.adv-akordiyonlar > .adv-akordiyon:nth-child(-n + 2) {
  border-top: 1px solid var(--adv-cizgi-koyu);
}

.adv-akordiyon {
  border-bottom: 1px solid var(--adv-cizgi-koyu);
  scroll-margin-top: 16px;
}

.adv-akordiyon__basi {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 16px 0;
  cursor: pointer;
  font-family: var(--adv-serif);
  font-size: 22px;
  line-height: 1.25;
  font-weight: 600;
  color: var(--adv-baslik);
  list-style: none;
}
.adv-akordiyon__basi::-webkit-details-marker { display: none; }
.adv-akordiyon__basi::after {
  content: '+';
  font-family: var(--adv-mono);
  font-size: 20px;
  font-weight: 400;
  color: var(--adv-meta);
  flex-shrink: 0;
}
.adv-akordiyon[open] > .adv-akordiyon__basi::after {
  content: '\2013';
  color: var(--adv-turuncu-acik);
}
.adv-akordiyon__basi:hover { color: var(--adv-turuncu-acik); }

.adv-akordiyon__govde { padding: 0 0 22px; }
.adv-akordiyon__govde > *:last-child { margin-bottom: 0; }

/* Akordiyon içindeki H3'ler makale ölçüsünde çok iri kalıyor. */
.adv-arac__govde .adv-akordiyon__govde h3 {
  margin: 18px 0 9px;
  font-size: 19px;
  line-height: 1.22;
}

.adv-akordiyon__ust {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  padding: 8px 14px;
  border: 1px solid var(--adv-cizgi-koyu);
  font-family: var(--adv-mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--adv-ikincil);
  text-decoration: none;
}
.adv-akordiyon__ust:hover {
  background: var(--adv-turuncu);
  border-color: var(--adv-turuncu);
  color: var(--adv-murekkep);
}

/* ---------- 4. SSS (akordiyon içinde akordiyon) -------------------------- */

.adv-sss {
  border: 1px solid var(--adv-cizgi-koyu);
  background: var(--adv-kagit);
  margin-bottom: 16px;
}

.adv-sss__oge { border-bottom: 1px solid var(--adv-cizgi); }
.adv-sss__oge:last-child { border-bottom: 0; }

.adv-sss__soru {
  display: grid;
  grid-template-columns: 30px 1fr 24px;
  align-items: baseline;
  gap: 14px;
  padding: 18px 24px;
  cursor: pointer;
  list-style: none;
  transition: background 0.16s ease-out;
}
.adv-sss__soru::-webkit-details-marker { display: none; }
.adv-sss__soru:hover { background: var(--adv-kagit-3); }

.adv-sss__no {
  font-family: var(--adv-mono);
  font-size: 11px;
  color: var(--adv-meta);
}
.adv-sss__metin {
  font-family: var(--adv-serif);
  font-size: 20px;
  line-height: 1.25;
  font-weight: 600;
  color: var(--adv-baslik);
}
.adv-sss__soru:hover .adv-sss__metin { color: var(--adv-turuncu-acik); }

.adv-sss__ikon {
  justify-self: end;
  font-family: var(--adv-mono);
  font-size: 19px;
  color: var(--adv-meta);
}
.adv-sss__oge[open] .adv-sss__ikon,
.adv-sss__oge[open] .adv-sss__metin { color: var(--adv-turuncu-derin); }
.adv-sss__oge[open] .adv-sss__ikon::after { content: ''; }

.adv-sss__cevap {
  padding: 0 24px 20px 68px;
  max-width: 760px;
}
.adv-arac__govde .adv-sss__cevap p {
  margin: 0 0 12px;
  font-size: 16px;
  line-height: 1.72;
}
.adv-arac__govde .adv-sss__cevap p:last-child { margin-bottom: 0; }

/* Cevap gövdesi `.adv-prose` sınıfını taşımıyor (sorular zaten kendi
   ölçüsünde), o yüzden bağlantı ve liste biçimleri burada tanımlı. */
.adv-sss__cevap a {
  color: var(--adv-turuncu-derin);
  border-bottom: 1px solid var(--adv-cizgi-koyu);
}
.adv-sss__cevap a:hover { border-bottom-color: var(--adv-turuncu); }
.adv-sss__cevap ul,
.adv-sss__cevap ol {
  margin: 0 0 12px;
  padding-left: 20px;
  font-size: 16px;
  line-height: 1.66;
  color: var(--adv-govde);
}
.adv-sss__cevap li { margin-bottom: 4px; }

/* Makale başlığındaki künye şeridi (araç olarak yayınlanmış yazılar).
   Orada 1180px'lik sağ kolon yok; şerit içeriğe göre daralır. */
.adv-arac__serit--makale {
  max-width: 520px;
  margin: 0 0 20px;
}

/* ---------- 5. Katlanmayan bölüm ---------------------------------------- */

/* Araç tablosunda "katlamaz" denen bölümler (örn. Pace'in "Sonuç"u)
   akordiyonların altında açık durur. */
.adv-arac-serbest {
  max-width: 900px;
  margin: 30px auto 0;
}
.adv-arac__govde .adv-arac-serbest h2 {
  margin: 0 0 12px;
  font-family: var(--adv-serif);
  font-size: 26px;
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: -0.016em;
  color: var(--adv-baslik);
}
.adv-arac__govde .adv-arac-serbest h3 {
  margin: 22px 0 9px;
  font-size: 19px;
  line-height: 1.22;
}

/* ---------- 6. İlgili araçlar kutusu ------------------------------------ */

.adv-arac-ilgili {
  max-width: var(--adv-min);
  margin: 26px auto 0;
  padding: 24px 28px;
  background: var(--adv-kagit-2);
  border-left: 3px solid var(--adv-turuncu);
}
.adv-arac-ilgili__basi {
  display: block;
  margin-bottom: 10px;
  font-family: var(--adv-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--adv-turuncu-derin);
}
.adv-arac-ilgili p {
  margin: 0 0 12px;
  font-size: 16.5px;
  line-height: 1.72;
  color: var(--adv-govde);
}
.adv-arac-ilgili p:last-child { margin-bottom: 0; }
.adv-arac-ilgili a { border-bottom: 1px solid var(--adv-cizgi-koyu); }

/* ---------- 7. Dar ekran ------------------------------------------------ */

@media (max-width: 1000px) {
  /* Dar ekranda tek sütun: 1000 px'in altında iki kolon 470 px'e iner ve
     satır 45 karakterin altına düşer — okuma bu kez ters yönden bozulur. */
  .adv-akordiyonlar {
    display: block;
    max-width: 900px;
  }
  .adv-akordiyonlar > .adv-akordiyon:nth-child(2) { border-top: 0; }

  .adv-arac__basi {
    grid-template-columns: 1fr;
    gap: 26px;
    align-items: start;
  }
  .adv-arac__baslik { font-size: 40px; }
}

@media (max-width: 700px) {
  .adv-arac__basi { padding: 16px 16px 20px; }
  .adv-arac__govde { padding: 0 16px 20px; }
  .adv-arac__baslik { font-size: 32px; }
  .adv-arac__tanim { font-size: 16px; }

  .adv-arac__serit { grid-template-columns: 1fr; }

  .adv-arac__alt {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .adv-akordiyon__basi { font-size: 19px; }

  /* Numara sütunu dar ekranda yer yiyor; soru metni tam genişlik alsın. */
  .adv-sss__soru {
    grid-template-columns: 1fr 24px;
    padding: 15px 16px;
  }
  .adv-sss__no { display: none; }
  .adv-sss__metin { font-size: 17px; }
  .adv-sss__cevap { padding: 0 16px 16px; }

  .adv-arac-ilgili { padding: 18px 20px; }
}