/* =========================================================================
   AQUA TURCO vitrin — İçerik + SEO paketi ekleri (vitrin.css'ten SONRA yüklenir; yalnız içerik sayfalarında: düzen $vt_icerik_varlik).
   Rehber (prototipi yok; mevcut tokenlar ve bileşen diliyle), yazı, il su kalitesi, araç sayfası ekleri. Yeni renk/ölçü YOK: --at-* tokenları.
   ========================================================================= */

/* --- rehber listesi */
.vt-rehber-kategoriler ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 20px; }
.vt-rehber-kategoriler [aria-current="page"] { border-color: var(--at-navy-900); background: var(--at-navy-900); color: #FFFFFF; }
.vt-rehber-kategoriler__sayi { font-weight: 400; opacity: .8; }
.vt-rehber-izgara { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.vt-rehber-kart { display: flex; flex-direction: column; height: 100%; border: 1px solid var(--at-border); border-radius: var(--at-r-lg); background: #FFFFFF; overflow: hidden; }
.vt-rehber-kart--ana { border-color: var(--at-accent); box-shadow: inset 0 3px 0 var(--at-accent); }
.vt-rehber-kart__gorsel { display: grid; place-items: center; aspect-ratio: 16 / 9; background: var(--at-surface-2); color: var(--at-accent); }
.vt-rehber-kart__gorsel img { width: 100%; height: 100%; object-fit: contain; padding: 12px; }
.vt-rehber-kart__gorsel .vt-ikon { width: 44px; height: 44px; }
.vt-rehber-kart__metin { display: flex; flex-direction: column; gap: 8px; flex: 1; padding: 16px 18px 18px; }
.vt-rehber-kart__ust { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 13px; color: var(--at-muted); }
.vt-rehber-kart__ust a { font-weight: 700; color: var(--at-accent-text); }
.vt-rehber-kart__baslik { font-size: 18px; line-height: 1.3; font-weight: 800; color: var(--at-navy-900); }
.vt-rehber-kart__baslik a { color: inherit; }
.vt-rehber-kart__ozet { font-size: 14px; line-height: 1.55; color: var(--at-text-2); }
.vt-rehber-kart__devam { margin-top: auto; }
.vt-rehber-kart__devam a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-weight: 700; }

/* --- rehber yazısı */
.vt-yazi__bas { padding-bottom: 14px; border-bottom: 1px solid var(--at-border); }
.vt-yazi__bas h1 { font-size: 32px; line-height: 1.2; font-weight: 800; color: var(--at-navy-900); }
.vt-yazi__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; margin-top: 10px; font-size: 14px; color: var(--at-muted); }
.vt-yazi__meta > span, .vt-yazi__meta > span > span { display: inline-flex; align-items: center; gap: 6px; }
.vt-yazi__meta a { font-weight: 700; }
.vt-yazi__ozet { max-width: 760px; margin-top: 12px; font-size: 17px; line-height: 1.55; color: var(--at-text); }
.vt-yazi__kapak { max-width: 760px; margin-top: 18px; border: 1px solid var(--at-border); border-radius: var(--at-r-lg); background: var(--at-surface-2); }
.vt-yazi__kapak img { display: block; width: 100%; height: auto; max-height: 420px; object-fit: contain; }
.vt-yazi__govde { margin-top: 20px; }
.vt-metin h2[id], .vt-metin h3[id] { scroll-margin-top: 16px; }
.vt-metin blockquote.vt-metin__vurgu { margin: 16px 0; padding: 12px 16px; border-left: 3px solid var(--at-accent); border-radius: var(--at-r-sm); background: var(--at-accent-soft); }
.vt-metin__gorsel { margin: 18px 0; }
.vt-metin__gorsel img { display: block; max-width: 100%; height: auto; border: 1px solid var(--at-border); border-radius: var(--at-r-sm); background: #FFFFFF; }
.vt-metin__gorsel figcaption { margin-top: 6px; font-size: 13px; color: var(--at-muted); }
.vt-yazi__ara-baslik { margin: 28px 0 10px; font-size: 22px; font-weight: 800; color: var(--at-navy-900); }
.vt-yazi__sss { max-width: 760px; }
.vt-yazi__etiketler { display: flex; flex-wrap: wrap; gap: 8px; max-width: 760px; margin-top: 22px; }
.vt-yazi__etiketler .vt-cip { height: 32px; padding: 0 12px; border-radius: var(--at-r-full); font-size: 13px; }
.vt-yazar-kutu { display: flex; gap: 14px; max-width: 760px; margin-top: 24px; padding: 18px 20px; border: 1px solid var(--at-border); border-radius: var(--at-r-lg); background: var(--at-surface-2); font-size: 14px; line-height: 1.55; color: var(--at-text-2); }
.vt-yazar-kutu__simge { display: grid; place-items: center; flex: none; width: 48px; height: 48px; border-radius: var(--at-r-full); background: var(--at-accent-soft); color: var(--at-accent-text); }
.vt-yazar-kutu__ad { font-size: 16px; font-weight: 800; color: var(--at-navy-900); }
.vt-yazar-kutu__ad span { font-weight: 400; color: var(--at-muted); }
.vt-yazi__yan { display: grid; align-content: start; gap: 20px; }
.vt-yazi__urunler { margin-top: 34px; }
.vt-kume a { align-items: flex-start; }

/* --- il su kalitesi, tablolar */
.vt-il-degerler { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 4px 0 14px; }
.vt-il-degerler > div { padding: 14px 16px; border: 1px solid var(--at-border); border-radius: var(--at-r-sm); background: var(--at-surface-2); }
.vt-il-degerler dt { font-size: 13px; color: var(--at-muted); }
.vt-il-degerler dd { margin-top: 2px; font-size: 20px; font-weight: 800; color: var(--at-navy-900); }
.vt-il-kaynak { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 16px; font-size: 14px; color: var(--at-text-2); }
.vt-il-tablo, .vt-sure-tablo { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 14px; }
.vt-il-tablo th, .vt-il-tablo td, .vt-sure-tablo th, .vt-sure-tablo td { padding: 10px 12px; border-bottom: 1px solid var(--at-border); text-align: left; vertical-align: top; }
.vt-il-tablo thead th, .vt-sure-tablo thead th { font-weight: 700; color: var(--at-navy-900); background: var(--at-surface-2); }

/* --- araç sayfası ekleri */
.vt-olcu-secim { margin-top: 26px; }
.vt-olcu-cipler { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.vt-olcu-cipler [aria-current="true"], .vt-tur-karo[aria-current="true"] { border-color: var(--at-accent); box-shadow: inset 0 0 0 1px var(--at-accent); }
.vt-arac-sayfasi .vt-arac-urunler > li { flex-direction: column; }
.vt-plan-satiri { margin-top: 6px; padding: 6px 10px; border-radius: var(--at-r-sm); background: var(--at-accent-soft); font-size: 13px; font-weight: 600; color: var(--at-accent-text); }
.vt-sihirbaz-degistir { margin-top: 18px; }
.vt-sihirbaz-degistir > form { margin-top: 12px; }
.vt-arac-sss { max-width: 860px; margin: 30px auto 0; }
.vt-yasal__yazdir { margin-top: 22px; }
.vt-sss-ara[hidden] { display: none; }

@media (max-width: 991.98px) {
  .vt-rehber-izgara { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vt-il-degerler { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vt-yazi__bas h1 { font-size: 26px; }
}
@media (max-width: 575.98px) {
  .vt-rehber-izgara { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .vt-yazar-kutu { padding: 14px; }
}
@media print {
  .vt-yasal__yazdir, .vt-yazi__yan, .vt-yazi__urunler { display: none; }
}

/* --- düzeltmeler: yazı gövdesinde okunaklı ara başlıklar (İçindekiler artık .vt-zengin__icindekiler, vitrin.css; başlık kendi numarasını taşıyorsa numarasız) */
.vt-yazi .vt-yasal__metin .vt-yazi__govde h2 { margin: 30px 0 10px; font-size: 22px; line-height: 1.3; font-weight: 800; letter-spacing: 0; text-transform: none; color: var(--at-navy-900); }
.vt-yazi .vt-yasal__metin .vt-yazi__govde h3 { margin: 22px 0 8px; font-size: 18px; font-weight: 700; text-transform: none; color: var(--at-navy-900); }
.vt-rehber-il { margin: 0 0 18px; }

/* =========================================================================
   PROTOTİP EŞİTLEME (araç, kurumsal, yasal sayfalar) — GELISTIRME §17.25. Yeni renk/ölçü yok; yalnız prototipte olup görünüme
   bağlanmamış bileşenlerin gerçek veriyle çizimi için küçük ekler.
   ========================================================================= */
/* --- Yedek Filtre Bul: plan satırı kartın tabanında tek satırlık bant (kabuk ve bant zemini vitrin.css §11); telefonda "Seçiminiz" kutusu
   listenin altında görünür */
.vt-filtre-bul-sayfasi .vt-urun-izgara__oge { flex-direction: column; }
.vt-fb-plan { flex: none; padding: 9px var(--vt-kart-ic) 10px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.vt-tur-karo[aria-current="true"] { border-color: var(--at-accent); box-shadow: inset 0 0 0 1px var(--at-accent); }
@media (max-width: 991.98px) {
  .vt-js .vt-filtre-bul-sayfasi .vt-liste__suzgec { display: block; margin-top: 24px; scroll-margin-top: 12px; }
}
/* --- araç sayfaları: süre tablosu (O23e) bilgi kutularından sonra */
.vt-arac-sureler { margin-top: 30px; }
.vt-arac-sayfasi .vt-oneri__gorsel .vt-ikon { width: 40px; height: 40px; color: var(--at-accent); }
/* --- rehber ve il sayfaları: yardim-konu.html düzeni (yan liste solda 3/12, içerik 9/12); telefonda içerik önce, yan liste altta */
.vt-rehber .vt-rehber-izgara { gap: 16px; }
.vt-rehber .vt-rehber-kart__baslik { font-size: 17px; }
.vt-yazi .vt-yazi__bas h1 { font-size: 26px; font-weight: 700; }
@media (max-width: 991.98px) {
  .vt-icerik-yan { order: 2; margin-top: 24px; }
}
/* --- Hakkımızda: metni merkez yazar (Isaretleme sınıfsız h2 üretir); ara başlıklar prototipteki .vt-metin__ara ölçüsünde */
.vt-hak-metin h2 { font-size: 17px; margin: 24px 0 6px; color: var(--at-accent-text); }
.vt-hak-metin > h2:first-child { margin-top: 0; }

/* --- Rehber ve il sayfası: ilgili ürünler ızgarası (16 Ekim 2026, kullanıcı: "ürünler çok karışık çıkıyor"). Izgara kuralları yalnız
   .vt-liste-sayfasi kapsamındaydı; burada liste sayfasıyla aynı düzen: masaüstü 4, tablet 3, telefon 2 sütun. */
.vt-yazi__urunler .vt-urun-izgara { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--vt-izgara-ara-y, 24px) var(--vt-izgara-ara-x, 16px); margin: 0; padding: 0; list-style: none; }
.vt-yazi__urunler .vt-urun-izgara__oge { min-width: 0; display: flex; }
.vt-yazi__urunler .vt-urun-izgara__oge > .vt-kart { flex: 1; min-width: 0; }
@media (max-width: 1199.98px) { .vt-yazi__urunler .vt-urun-izgara { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 767.98px) { .vt-yazi__urunler .vt-urun-izgara { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* --- Rehber yazısı: metin sütunun tam genişliğini kullanır (16 Ekim 2026, kullanıcı isteği; ürün açıklamasıyla aynı karar) */
.vt-yazi__govde.vt-metin,
.vt-yazi__ozet,
.vt-yazi__sss,
.vt-yazi__etiketler { max-width: none; }
.vt-yazi__govde .vt-zengin > p,
.vt-yazi__govde .vt-zengin > ul:not(.vt-zengin__kartlar),
.vt-yazi__govde .vt-zengin > blockquote,
.vt-yazi__govde .vt-zengin .vt-zengin__sss .vt-akordeon__icerik { max-width: none; }
