/* ==========================================================================
   WATER POINT — İÇERİK GÖVDESİ
   inc/icerik.php'nin ürettiği anlamsal işaretlemenin stili.

   Bu dosya, 214 ürünün içindeki 25 KB'lık yabancı satır içi tasarımın yerini
   alır. Oradaki her kutu burada tek bir dil konuşur: aynı çizgi kalınlığı,
   aynı köşe yarıçapı, aynı yuva yükseklikleri, aynı amber tick.
   ========================================================================== */

.wpt-govde{
  max-width:var(--wpt-en-dar);
  font-size:16px; line-height:1.68; color:var(--wpt-ink-2);
}
.wpt-govde > * + *{ margin-top:56px }
@media (max-width:700px){ .wpt-govde > * + *{ margin-top:40px } }

/* --------------------------------------------------------------------------
   GİRİŞ BANDI — ürünün tek cümlelik vaadi
   Koyu değil: ürün sayfasında zaten koyu bir header var, ikinci koyu blok
   sayfayı bantlara böler. Burada amber tick + sessiz zemin yeterli.
   -------------------------------------------------------------------------- */
.wpt-ic-lead{
  position:relative; background:var(--wpt-surface-2);
  border:1px solid var(--wpt-line); border-radius:var(--wpt-r-lg);
  padding:30px 30px 26px; overflow:hidden;
}
.wpt-ic-lead::before{
  content:""; position:absolute; inset:0 auto 0 0; width:var(--wpt-tick);
  background:var(--wpt-amber);
}
@media (max-width:600px){ .wpt-ic-lead{ padding:24px 22px 22px } }

.wpt-ic-lead-cip{
  display:inline-block; margin:0 0 12px;
  font-family:var(--wpt-mono); font-size:10.5px; font-weight:600;
  letter-spacing:var(--wpt-track-l); text-transform:uppercase;
  color:var(--wpt-brand); background:var(--wpt-brand-soft);
  border-radius:var(--wpt-r-hap); padding:6px 13px;
}
.wpt-ic-lead-baslik{
  margin:0; font-size:clamp(21px,3.2vw,27px); font-weight:800;
  letter-spacing:var(--wpt-track-s); color:var(--wpt-ink); text-wrap:balance;
}
.wpt-ic-lead-alt{ margin:12px 0 0; font-size:16.5px; max-width:62ch }

.wpt-ic-lead-sayi{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr));
  gap:0; margin:22px 0 0; border-top:1px solid var(--wpt-line); padding-top:18px;
}
.wpt-ic-lead-sayi > div{ padding-right:16px }
.wpt-ic-lead-sayi dt{
  font-family:var(--wpt-mono); font-size:10px; font-weight:500;
  letter-spacing:var(--wpt-track-l); text-transform:uppercase; color:var(--wpt-ink-3);
}
.wpt-ic-lead-sayi dd{
  margin:5px 0 0; font-size:17px; font-weight:700;
  letter-spacing:var(--wpt-track-s); color:var(--wpt-ink);
}

/* --------------------------------------------------------------------------
   BÖLÜM BAŞLIĞI
   Numara sıradan gelir (01…08) ve gerçek bir sıra bilgisi taşır — bu yüzden
   silinmez, ama başlığın önünde tek bir mono rakam olarak susturulur.
   -------------------------------------------------------------------------- */
.wpt-ic-bolum > * + *{ margin-top:22px }

.wpt-ic-bas{ border-top:1px solid var(--wpt-line); padding-top:22px }
.wpt-ic-eyebrow{
  display:flex; align-items:center; gap:10px; margin:0 0 8px;
  font-family:var(--wpt-mono); font-size:11px; font-weight:600;
  letter-spacing:var(--wpt-track-l); text-transform:uppercase; color:var(--wpt-ink-3);
}
/* Ayırıcı tire metinde kalır, ekranda görünmez — bkz. inc/icerik.php */
.wpt-ic-tire{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip-path:inset(50%); white-space:nowrap;
}
.wpt-ic-no{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:22px; height:22px; padding:0 6px; border-radius:var(--wpt-r-hap);
  background:var(--wpt-amber-soft); color:var(--wpt-amber-ink);
  font-size:10.5px; letter-spacing:0; font-variant-numeric:tabular-nums;
}
.wpt-ic-bas h2{
  margin:0; font-size:clamp(20px,2.8vw,25px); font-weight:800;
  letter-spacing:var(--wpt-track-s); color:var(--wpt-ink); text-wrap:balance;
}
.wpt-ic-giris-p{ margin:0; max-width:68ch }

/* --------------------------------------------------------------------------
   TEKNİK ÖZELLİK TABLOSU — üç sütun
   Üçüncü sütun ("ne işe yarar") tablonun varlık sebebi: rakamı okuyabilen
   zaten alıyor, okuyamayan çıkıp gidiyordu.
   -------------------------------------------------------------------------- */
.wpt-spec-sar{ overflow-x:auto; border:1px solid var(--wpt-line); border-radius:var(--wpt-r) }
.wpt-spec{
  width:100%; border-collapse:collapse; background:var(--wpt-surface);
  font-size:15px; text-align:left;
}
.wpt-spec thead th{
  background:var(--wpt-surface-2); color:var(--wpt-ink-3);
  font-family:var(--wpt-mono); font-size:10px; font-weight:600;
  letter-spacing:var(--wpt-track-l); text-transform:uppercase;
  padding:11px 16px; border-bottom:1px solid var(--wpt-line); white-space:nowrap;
}
.wpt-spec tbody tr + tr th,
.wpt-spec tbody tr + tr td{ border-top:1px solid var(--wpt-line-2) }
.wpt-spec tbody th{
  padding:13px 16px; font-weight:600; color:var(--wpt-ink-2);
  white-space:nowrap; width:1%;
}
.wpt-spec td{ padding:13px 16px; vertical-align:top }
.wpt-spec-d{ font-weight:700; color:var(--wpt-ink); font-variant-numeric:tabular-nums }
.wpt-spec-n{ color:var(--wpt-ink-3); font-size:14px; line-height:1.5; min-width:26ch }
.wpt-spec.has-not .wpt-spec-d{ white-space:nowrap }

@media (max-width:760px){
  /* Üçüncü sütun mobilde satır altına iner — yatay kaydırma kimse yapmıyor. */
  .wpt-spec-sar{ overflow-x:visible }
  .wpt-spec, .wpt-spec tbody, .wpt-spec tr{ display:block }
  .wpt-spec thead{ display:none }
  .wpt-spec tbody tr{ padding:13px 16px; border-top:1px solid var(--wpt-line-2) }
  .wpt-spec tbody tr:first-child{ border-top:0 }
  /* ⚠ MASAÜSTÜ ÇİZGİSİ MOBİLDE İPTAL EDİLMELİ.
     Üstteki masaüstü kuralı `tr + tr th` ve `tr + tr td`ye üst çizgi
     veriyor. Mobilde satır blok düzenine geçtiği için o çizgi ARTIK
     HÜCRENİN ÜSTÜNDE çıkıyor: her satırda biri etiketin biri değerin
     üstünde olmak üzere İKİ yarım çizgi. Ekranda tablo bozuk görünüyordu.
     Ayırıcı artık yalnızca satırın kendisinde. */
  .wpt-spec tbody tr + tr th,
  .wpt-spec tbody tr + tr td{ border-top:0 }
  .wpt-spec tbody th, .wpt-spec td{ display:block; padding:0; width:auto; white-space:normal }
  .wpt-spec tbody th{
    font-family:var(--wpt-mono); font-size:10px; letter-spacing:var(--wpt-track-l);
    text-transform:uppercase; color:var(--wpt-ink-3);
  }
  .wpt-spec-d{ margin-top:3px; font-size:16px; white-space:normal }
  .wpt-spec.has-not .wpt-spec-d{ white-space:normal }
  .wpt-spec-n{ margin-top:5px; min-width:0 }
  .wpt-spec-n span{ display:none }
}

/* --------------------------------------------------------------------------
   SORUN / ÇÖZÜM İKİLİSİ
   -------------------------------------------------------------------------- */
.wpt-ic-ikili{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:1px;
  background:var(--wpt-surface); border:1px solid var(--wpt-line); border-radius:var(--wpt-r);
  overflow:hidden;
}
.wpt-ic-ikili > div{ background:var(--wpt-surface); padding:22px 22px 24px; box-shadow:0 0 0 1px var(--wpt-line);}
/* Çözüm kartı marka tonuyla ayrılır — koyu yüzeyle ayrılsaydı koyu temada
   iki kart aynı görünürdü. Marka tonu her iki temada da ayrışıyor. */
.wpt-ic-ikili > .is-cozum{
  background:var(--wpt-brand-soft);
  box-shadow:inset var(--wpt-tick) 0 0 var(--wpt-brand);
}
.wpt-ic-ikili > .is-cozum .wpt-ic-kart-et{ color:var(--wpt-brand) }

.wpt-ic-kart-et{
  margin:0 0 8px; font-family:var(--wpt-mono); font-size:10px; font-weight:600;
  letter-spacing:var(--wpt-track-l); text-transform:uppercase; color:var(--wpt-ink-3);
}
.wpt-ic-ikili h3, .wpt-ic-kartlar h3{
  margin:0 0 8px; font-size:17px; font-weight:700;
  letter-spacing:-.015em; color:var(--wpt-ink); line-height:1.3;
}
.wpt-ic-ikili p:not(.wpt-ic-kart-et),
.wpt-ic-kartlar p:not(.wpt-ic-kart-et){ margin:0; font-size:15px; line-height:1.6 }

/* --------------------------------------------------------------------------
   ÖZELLİK KARTLARI
   -------------------------------------------------------------------------- */
/* ⚠ AYIRICI ÇİZGİYİ KAP DEĞİL HÜCRE ÇİZER.
   Önce çizgiler `gap:1px` + kabın `background:var(--wpt-line)` ile
   çiziliyordu. Kart sayısı sütun sayısının katı değilse (4 kart / 3 sütun)
   son satırdaki BOŞ HÜCRELER kabın grisini gösteriyor ve ızgaranın yanında
   koca gri bir blok kalıyordu. Artık kap kart yüzeyi renginde; çizgiyi her
   hücre kendi `box-shadow`u ile çiziyor, boş hücre hiçbir şey çizmiyor.
   Kap `overflow:hidden` olduğu için dış kenardaki gölge kırpılıyor. */
.wpt-ic-kartlar{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:1px;
  background:var(--wpt-surface); border:1px solid var(--wpt-line); border-radius:var(--wpt-r);
  overflow:hidden;
}
.wpt-ic-kartlar > div{
  position:relative; background:var(--wpt-surface); padding:22px 20px 24px;
  box-shadow:0 0 0 1px var(--wpt-line);
  transition:background var(--wpt-gecis);
}
.wpt-ic-kartlar > div::before{
  content:""; position:absolute; top:0; left:0; right:0; height:var(--wpt-tick);
  background:var(--wpt-amber); transform:scaleX(0); transform-origin:left;
  transition:transform var(--wpt-gecis);
}
.wpt-ic-kartlar > div:hover{ background:var(--wpt-surface-2) }
.wpt-ic-kartlar > div:hover::before{ transform:scaleX(1) }

/* --------------------------------------------------------------------------
   NUMARALI ADIMLAR — gerçek bir sıra, numara meşru
   -------------------------------------------------------------------------- */
.wpt-ic-adimlar{
  list-style:none; margin:0; padding:0;
  border:1px solid var(--wpt-line); border-radius:var(--wpt-r); overflow:hidden;
}
.wpt-ic-adimlar li{
  display:flex; gap:18px; align-items:flex-start;
  background:var(--wpt-surface); padding:20px 22px;
}
.wpt-ic-adimlar li + li{ border-top:1px solid var(--wpt-line-2) }
.wpt-ic-adim-no{
  flex:none; display:inline-flex; align-items:center; justify-content:center;
  width:30px; height:30px; border-radius:var(--wpt-r-hap);
  background:var(--wpt-brand); color:#fff;
  font-family:var(--wpt-mono); font-size:13px; font-weight:600;
  font-variant-numeric:tabular-nums;
}
.wpt-ic-adimlar h3{
  margin:4px 0 6px; font-size:16.5px; font-weight:700;
  letter-spacing:-.015em; color:var(--wpt-ink); line-height:1.3;
}
.wpt-ic-adimlar p{ margin:0; font-size:15px; line-height:1.6 }

/* --------------------------------------------------------------------------
   ÇİP LİSTESİ — kullanım alanları
   -------------------------------------------------------------------------- */
.wpt-ic-cipler{
  display:flex; flex-wrap:wrap; gap:8px; list-style:none; margin:0; padding:0;
}
.wpt-ic-cipler li{
  padding:9px 16px; border-radius:var(--wpt-r-hap);
  background:var(--wpt-surface-2); border:1px solid var(--wpt-line);
  font-size:14.5px; font-weight:600; color:var(--wpt-ink-2);
}

/* --------------------------------------------------------------------------
   FİYAT PAKETLERİ — 39 ilçe servis sayfasının tek ticari bloğu
   -------------------------------------------------------------------------- */
.wpt-ic-paketler{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:14px;
}
.wpt-ic-paket{
  position:relative; display:flex; flex-direction:column;
  background:var(--wpt-surface); border:1px solid var(--wpt-line);
  border-radius:var(--wpt-r); padding:24px 22px 22px;
}
.wpt-ic-paket.is-one{ border-color:var(--wpt-brand); box-shadow:var(--wpt-golge) }
.wpt-ic-paket-rozet{
  position:absolute; top:0; left:22px; transform:translateY(-50%);
  margin:0; padding:5px 12px; border-radius:var(--wpt-r-hap);
  background:var(--wpt-brand); color:#fff;
  font-family:var(--wpt-mono); font-size:9.5px; font-weight:600;
  letter-spacing:var(--wpt-track-l); text-transform:uppercase;
}
.wpt-ic-paket h3{
  margin:0; font-size:17px; font-weight:700; letter-spacing:-.015em; color:var(--wpt-ink);
}
.wpt-ic-paket-fiyat{
  margin:10px 0 16px; font-size:27px; font-weight:800;
  letter-spacing:var(--wpt-track-s); color:var(--wpt-ink);
  font-variant-numeric:tabular-nums;
}
.wpt-ic-paket-liste,
.wpt-ic-paket-dip{ list-style:none; margin:0; padding:0 }
.wpt-ic-paket-liste li{ padding:6px 0; font-size:14.5px; color:var(--wpt-ink-2) }
.wpt-ic-paket-dip{
  margin-top:auto; padding-top:14px; border-top:1px solid var(--wpt-line-2);
}
.wpt-ic-paket-dip li{ padding:4px 0; font-size:12.5px; color:var(--wpt-ink-3) }

/* --------------------------------------------------------------------------
   İKON KARTLARI — hizmet kalemleri
   -------------------------------------------------------------------------- */
.wpt-ic-ikonlar{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:1px;
  list-style:none; margin:0; padding:0;
  background:var(--wpt-surface); border:1px solid var(--wpt-line);
  border-radius:var(--wpt-r); overflow:hidden;
}
.wpt-ic-ikonlar li{
  display:flex; align-items:center; gap:11px;
  background:var(--wpt-surface); padding:16px 18px;
  font-size:14.5px; font-weight:600; color:var(--wpt-ink-2); box-shadow:0 0 0 1px var(--wpt-line);}
.wpt-ic-simge{ font-size:19px; line-height:1; flex:none }
.wpt-ic-paket > .wpt-ic-simge{ font-size:22px; margin-bottom:10px }

/* Sınıflandırılamayan yaprak satır — metin asla düşmez, sade akar. */
.wpt-ic-satir{ margin:0; font-size:15.5px }

/* --------------------------------------------------------------------------
   NOT LİSTESİ — bakım maddeleri
   -------------------------------------------------------------------------- */
.wpt-ic-liste{
  list-style:none; margin:0; padding:20px 22px;
  background:var(--wpt-surface-2); border:1px solid var(--wpt-line);
  border-radius:var(--wpt-r);
}
.wpt-ic-liste li{ position:relative; padding:11px 0 11px 24px; font-size:15.5px }
.wpt-ic-liste li + li{ border-top:1px solid var(--wpt-line-2) }
.wpt-ic-liste li::before{
  content:""; position:absolute; left:2px; top:19px;
  width:8px; height:8px; border-radius:2px; background:var(--wpt-amber);
}
ol.wpt-ic-liste{ counter-reset:wpt-l }
ol.wpt-ic-liste li{ counter-increment:wpt-l; padding-left:30px }
ol.wpt-ic-liste li::before{
  content:counter(wpt-l); left:0; top:11px; width:auto; height:auto; background:none;
  font-family:var(--wpt-mono); font-size:12px; font-weight:600; color:var(--wpt-amber-ink);
}

/* --------------------------------------------------------------------------
   UYARI KUTUSU — kesik çizgiden düz sol tick'e
   -------------------------------------------------------------------------- */
.wpt-ic-not{
  border-left:var(--wpt-tick) solid var(--wpt-amber);
  background:var(--wpt-amber-soft); border-radius:0 var(--wpt-r-sm) var(--wpt-r-sm) 0;
  padding:16px 20px; font-size:15px; color:var(--wpt-ink-2);
}
.wpt-ic-not h3{
  margin:0 0 8px; font-size:16px; font-weight:700;
  letter-spacing:var(--wpt-track-m); color:var(--wpt-amber-ink);
}
.wpt-ic-not p{ margin:0 }
.wpt-ic-not p + p{ margin-top:8px }

/* --------------------------------------------------------------------------
   SSS — açılır kapanır
   -------------------------------------------------------------------------- */
.wpt-ic-sss{
  background:var(--wpt-surface); border:1px solid var(--wpt-line);
  border-radius:var(--wpt-r-sm);
}
.wpt-ic-bolum .wpt-ic-sss + .wpt-ic-sss{ margin-top:8px }
.wpt-ic-sss > summary{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:15px 18px; cursor:pointer; list-style:none;
  font-size:16px; font-weight:700; letter-spacing:-.015em; color:var(--wpt-ink);
}
.wpt-ic-sss > summary::-webkit-details-marker{ display:none }
.wpt-ic-sss > summary::after{
  content:""; flex:none; width:10px; height:10px; margin-right:2px;
  border-right:2px solid var(--wpt-ink-3); border-bottom:2px solid var(--wpt-ink-3);
  transform:rotate(45deg) translateY(-2px); transition:transform var(--wpt-gecis);
}
.wpt-ic-sss[open] > summary::after{ transform:rotate(-135deg) translateY(-2px) }
.wpt-ic-sss[open] > summary{ border-bottom:1px solid var(--wpt-line-2) }
.wpt-ic-sss > summary:hover{ background:var(--wpt-surface-2) }
.wpt-ic-sss > summary:focus-visible{ outline:2px solid var(--wpt-brand); outline-offset:-2px }
.wpt-ic-sss-c{ padding:14px 18px 18px; font-size:15.5px; line-height:1.65 }

@media (prefers-reduced-motion:reduce){
  .wpt-ic-sss > summary::after,
  .wpt-ic-kartlar > div,
  .wpt-ic-kartlar > div::before{ transition:none }
}

/* --------------------------------------------------------------------------
   KAPANIŞ BANDI
   -------------------------------------------------------------------------- */
.wpt-ic-kapanis{
  position:relative; background:var(--wpt-koyu); color:var(--wpt-koyu-ink-2);
  border-radius:var(--wpt-r); padding:32px 30px; overflow:hidden;
}
.wpt-ic-kapanis::before{
  content:""; position:absolute; top:0; left:0; width:88px; height:var(--wpt-tick);
  background:var(--wpt-amber);
}
.wpt-ic-kapanis h2{
  margin:0 0 10px; color:#fff; font-size:clamp(19px,2.6vw,23px);
  font-weight:800; letter-spacing:var(--wpt-track-s); text-wrap:balance;
}
.wpt-ic-kapanis p{ margin:0; font-size:16px; max-width:62ch; line-height:1.62 }

/* --------------------------------------------------------------------------
   İçerik içindeki serbest metin
   -------------------------------------------------------------------------- */
.wpt-govde a{ color:var(--wpt-brand); text-decoration:underline; text-underline-offset:2px }
.wpt-govde a:hover{ color:var(--wpt-brand-d) }
.wpt-govde strong{ color:var(--wpt-ink); font-weight:700 }
.wpt-govde img{ max-width:100%; height:auto; border-radius:var(--wpt-r-sm) }
.wpt-govde table:not(.wpt-spec){ width:100%; border-collapse:collapse; font-size:15px }
.wpt-govde table:not(.wpt-spec) th,
.wpt-govde table:not(.wpt-spec) td{
  padding:11px 14px; border:1px solid var(--wpt-line); text-align:left;
}

/* --------------------------------------------------------------------------
   TABLO İÇİ ÜRÜN BAĞLANTILARI

   Düz mavi altı çizili bağlantı tabloda "tıklanabilir" hissi vermiyordu;
   fiyat sütununun yanında sıradan metin gibi duruyordu. Artık bir hedef
   gibi davranıyor: hap zemin, üstüne gelince marka rengi ve sağa kayan ok,
   basılınca 1px aşağı iniyor.

   ⚠ OK CSS İLE ÇİZİLİYOR, KARAKTER DEĞİL. "→" karakteri fonta göre farklı
   yükseklikte oturuyor ve bazı sistemlerde emoji olarak çiziliyor; iki
   kenarlıktan yapılan şevron her yerde aynı.

   ⚠ `margin-inline:-11px` HÜCRE HİZASINI KORUR. Bağlantıya iç boşluk
   verilince metin sütun kenarından içeri kayıyordu; negatif dış boşluk onu
   diğer hücrelerle aynı hizaya geri getiriyor. */
.wpt-govde table:not(.wpt-spec) td a{
  display:inline-flex; align-items:center; gap:7px;
  margin-inline:-11px; padding:4px 11px;
  border-radius:var(--wpt-r-hap);
  color:var(--wpt-brand); font-weight:650; text-decoration:none;
  transition:background var(--wpt-gecis), color var(--wpt-gecis), transform var(--wpt-gecis);
}
.wpt-govde table:not(.wpt-spec) td a::after{
  content:""; flex:0 0 auto; width:5px; height:5px;
  border-right:1.7px solid currentColor; border-top:1.7px solid currentColor;
  transform:rotate(45deg);
  transition:transform var(--wpt-gecis);
}
.wpt-govde table:not(.wpt-spec) td a:hover{
  background:var(--wpt-brand-soft); color:var(--wpt-brand-d);
}
.wpt-govde table:not(.wpt-spec) td a:hover::after{ transform:rotate(45deg) translate(2px,-2px) }
.wpt-govde table:not(.wpt-spec) td a:active{ transform:translateY(1px) }
.wpt-govde table:not(.wpt-spec) td a:focus-visible{
  outline:2px solid var(--wpt-brand); outline-offset:2px;
}

/* --------------------------------------------------------------------------
   KAPSIZ EYLEM BAĞLANTILARI

   ⚠ Kategori açıklamalarının sonunda telefon / WhatsApp / e-posta bağlantıları
   HİÇBİR KAP İÇİNDE DEĞİL — üç çıplak `<a>` olarak arka arkaya basılıyor ve
   aralarında boşluk bile olmuyordu:
   "0850 304 95 25WhatsApp ile sorE-posta gönder"

   Normal metin bağlantıları her zaman `<p>`, `<li>` ya da `<td>` içindedir;
   gövdenin DOĞRUDAN çocuğu olan bir `<a>` bu yüzden her durumda bir eylem
   bağlantısıdır. İşaretlemeye dokunmadan düğme satırına çevriliyor.

   İlki birincil: bu bloklarda ilk bağlantı hep telefon ve asıl istenen eylem o. */
.wpt-govde > a{
  display:inline-flex; align-items:center; gap:8px;
  margin:0 10px 10px 0; padding:11px 19px;
  border-radius:var(--wpt-r-hap);
  background:var(--wpt-surface-2); border:1px solid var(--wpt-line);
  color:var(--wpt-ink); font-size:14.5px; font-weight:650;
  text-decoration:none; vertical-align:middle;
  transition:background var(--wpt-gecis), border-color var(--wpt-gecis),
             color var(--wpt-gecis), transform var(--wpt-gecis);
}
.wpt-govde > a::after{
  content:""; flex:0 0 auto; width:5px; height:5px;
  border-right:1.7px solid currentColor; border-top:1.7px solid currentColor;
  transform:rotate(45deg); opacity:.75;
  transition:transform var(--wpt-gecis);
}
.wpt-govde > a:first-of-type{
  background:var(--wpt-brand); border-color:var(--wpt-brand); color:#fff;
}
.wpt-govde > a:hover{ border-color:var(--wpt-brand); color:var(--wpt-brand) }
.wpt-govde > a:first-of-type:hover{ background:var(--wpt-brand-d); border-color:var(--wpt-brand-d); color:#fff }
.wpt-govde > a:hover::after{ transform:rotate(45deg) translate(2px,-2px) }
.wpt-govde > a:active{ transform:translateY(1px) }
.wpt-govde > a:focus-visible{ outline:2px solid var(--wpt-brand); outline-offset:3px }

/* Düğme satırından hemen önceki iki satır bu bloğun kendi metni — araya
   paragraf boşluğu girmesin, blok tek parça okunsun. */
.wpt-govde > p.wpt-ic-satir:has(+ a){ margin-bottom:14px }

@media (prefers-reduced-motion:reduce){
  .wpt-govde > a:active,
  .wpt-govde table:not(.wpt-spec) td a:active{ transform:none }
}

/* --------------------------------------------------------------------------
   BÖLÜM RAYI — JS ile üretilir, hap biçimli, yapışkan
   8 bölümlük gövdede "nerede ne var" bilgisi. Yoksa sayfa yine okunur.
   -------------------------------------------------------------------------- */
/* ⚠ SEKME ÇUBUĞUNUN ALTINA YAPIŞIR, ARKASINA DEĞİL.
   Önce `--wpt-head-h + 8px` yazıyordu; sekme çubuğu da neredeyse aynı
   yükseklikte yapışınca ray onun ARKASINDA kalıyor ve sayfa kaydırıldıkça
   çipler yarım görünüyordu. Artık sekme çubuğunun boyu kadar aşağıda
   duruyor ve z-index'i de onun altında — çakışma hem konumda hem
   katmanda çözüldü. */
.wpt-ic-ray{
  position:sticky;
  top:calc(var(--wpt-head-h) + var(--wpt-admin-h) + var(--wpt-usekme-h) - 6px);
  z-index:1;
  margin:0 0 8px; padding:8px 0;
  background:var(--wpt-paper);
  /* ⚠ HER GENİŞLİKTE AKAR. Önce masaüstünde sarmalatılmıştı ("sığmayan çip
     kesik görünüyor" şikâyeti yüzünden). Kullanıcı 27.08.2026'da akan hâli
     istedi ve erişim sorununu farklı çözdü: *"PC'de mouse üstüne getirip
     scroll atınca sağa doğru gidebilsin, mobilde ise dokunarak
     kaydırabilsin."* Gizlenen çip artık ULAŞILAMAZ değil — tekerlek ve
     dokunma onu getiriyor. Bu yüzden kenar solması da GEREKMİYOR;
     yarı saydam çip "bozuk" okunuyordu, düz kesim "devamı var" okunuyor. */
  /* ⚠ KAYDIRAN KAP `ul`, `nav` DEĞİL (bkz. aşağıda .wpt-ic-ray ul).
     Bir sürüm boyunca burada da `overflow-x:auto` vardı ve İKİ AYRI
     kaydırıcı oluşuyordu; JS `ul`i sürüyor, gözle görünen ise `nav`
     kayıyordu. Tekerlek hareketi bu yüzden takılıyordu. */
  overflow-x:visible; scrollbar-width:none; -webkit-overflow-scrolling:touch;
}
.wpt-ic-ray::-webkit-scrollbar{ display:none }

/* ⚠ ÇÖZÜM SOLMA DEĞİLDİ, SARMALAMAKTI.
   Önce kenara maske konmuştu: "sığmayan çip sertçe kesilmesin, devamı
   olduğu görünsün." Ama SOLAN ÇİP DE KESİK OKUNUYOR — kullanıcı iki kez
   "yarıda kesilmiş gibi" dedi ve haklıydı. Bir şeyi yarı saydam yapmak,
   orada devamı olduğunu değil, bozuk olduğunu düşündürüyor.

   Masaüstünde ray artık kaymıyor: çipler alt satıra sarmalanıyor, hepsi
   görünüyor. Saklanan bir şey yoksa "devamı var mı" sorusu da yok.

   ⚠ SIRA ÖNEMLİ: bu blok temel kuraldan SONRA gelmeli. İlk denemede
   önüne konmuştu ve `width:max-content` onu eziyordu.

   Yatay kaydırma ve maske YALNIZCA dar ekranda: orada sarmalamak rayı üç
   satıra çıkarıp içeriği aşağı itiyor. Sınıfları assets/js/product.js
   koyar; JS yoksa ray kayar, hiçbir şey kaybolmaz. */
@media (max-width:700px){
  .wpt-ic-ray{ overflow-x:auto }
  .wpt-ic-ray ul{ flex-wrap:nowrap; width:max-content }

  .wpt-ic-ray.has-sag ul,
  .wpt-ic-ray.has-sag{
    -webkit-mask-image:linear-gradient(90deg, #000 calc(100% - 96px), transparent);
            mask-image:linear-gradient(90deg, #000 calc(100% - 96px), transparent);
  }
  .wpt-ic-ray.has-sol{
    -webkit-mask-image:linear-gradient(90deg, transparent, #000 72px);
            mask-image:linear-gradient(90deg, transparent, #000 72px);
  }
  .wpt-ic-ray.has-sol.has-sag{
    -webkit-mask-image:linear-gradient(90deg, transparent, #000 72px, #000 calc(100% - 96px), transparent);
            mask-image:linear-gradient(90deg, transparent, #000 72px, #000 calc(100% - 96px), transparent);
  }
}

.wpt-ic-ray.has-sag ul,
  .wpt-ic-ray.has-sag{
  -webkit-mask-image:linear-gradient(90deg, #000 calc(100% - 96px), transparent);
          mask-image:linear-gradient(90deg, #000 calc(100% - 96px), transparent);
}
.wpt-ic-ray.has-sol{
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 72px);
          mask-image:linear-gradient(90deg, transparent, #000 72px);
}
.wpt-ic-ray.has-sol.has-sag{
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 72px, #000 calc(100% - 96px), transparent);
          mask-image:linear-gradient(90deg, transparent, #000 72px, #000 calc(100% - 96px), transparent);
}
.wpt-ic-ray ul{
  display:flex; flex-wrap:wrap; gap:7px; list-style:none; margin:0; padding:0; width:auto;
}
/* ⚠ SARMALAYINCA SIRA KAYBOLDU.
   Tek satırdayken çipler soldan sağa okunuyordu ve sıra kendiliğinden
   belliydi. İki satıra sarmalanınca dağınık bir bulut gibi göründü —
   kullanıcı "şu anda sırası çok belli olmuyor" dedi.

   Numara SÜS DEĞİL: bu çipler yazının bölümleri ve gerçekten sıralı.
   Sayaç CSS'te üretiliyor, işaretlemeye dokunulmuyor. */
.wpt-ic-ray ul{ counter-reset:wpt-ray }

.wpt-ic-ray a{
  display:flex; align-items:center; gap:8px;
  white-space:nowrap; text-decoration:none;
  padding:8px 15px 8px 9px; border-radius:var(--wpt-r-hap);
  background:var(--wpt-surface-2); border:1px solid var(--wpt-line);
  font-size:13.5px; font-weight:600; color:var(--wpt-ink-2);
  transition:background var(--wpt-gecis), color var(--wpt-gecis), border-color var(--wpt-gecis);
}
.wpt-ic-ray a::before{
  counter-increment:wpt-ray;
  content:counter(wpt-ray, decimal-leading-zero);
  flex:0 0 auto; display:grid; place-items:center;
  width:22px; height:22px; border-radius:50%;
  background:var(--wpt-surface); border:1px solid var(--wpt-line);
  font-family:var(--wpt-mono); font-size:10px; font-weight:600;
  color:var(--wpt-ink-3); font-variant-numeric:tabular-nums;
  transition:background var(--wpt-gecis), color var(--wpt-gecis), border-color var(--wpt-gecis);
}
/* ⚠ BÖLÜMÜN KENDİ NUMARASI VARSA SAYACI EZER.
   Çip numarası saf sıraydı, gövdedeki göz kaşı numarası ise içeriğin
   kendisinden geliyor. Videolu bölüm rayda sayılıp içerik numaralandırmasında
   sayılmayınca ray 06 derken gövde 05 diyordu. `data-no` product.js'te
   bölümün `.wpt-ic-no` değerinden yazılıyor; numarasız bölümlerde sayaç
   yedek olarak devrede kalsın diye `counter-increment` base kuralda duruyor. */
.wpt-ic-ray a[data-no]::before{ content:attr(data-no) }

.wpt-ic-ray a:hover{ background:var(--wpt-brand-soft); color:var(--wpt-brand); border-color:transparent }
.wpt-ic-ray a:hover::before{ border-color:var(--wpt-brand); color:var(--wpt-brand) }
.wpt-ic-ray a[aria-current]{
  background:var(--wpt-koyu); border-color:var(--wpt-koyu); color:#fff;
}
.wpt-ic-ray a[aria-current]::before{
  background:var(--wpt-amber); border-color:var(--wpt-amber); color:var(--wpt-koyu);
}
.wpt-ic-ray a:focus-visible{ outline:2px solid var(--wpt-brand); outline-offset:2px }

/* Ray varken ilk bölümün üst çizgisi gereksiz duruyor */
.wpt-ic-ray + .wpt-ic-lead{ margin-top:8px }

@media (prefers-reduced-motion:reduce){ .wpt-ic-ray a{ transition:none } }

/* --------------------------------------------------------------------------
   MAKALE TİPOGRAFİSİ
   Kategori açıklamaları (19 kategoride 50–90 KB) gerçek birer makale:
   h2/h3 hiyerarşisi, paragraf, liste, karşılaştırma tablosu, ürün bağlantısı.
   Ürün bloklarının aksine burada işi tipografi yapar, kutu değil.
   -------------------------------------------------------------------------- */
/**
 * ⚠ DOĞRUDAN ÇOCUK seçicisi şart.
 * `.wpt-govde h2` yazılırsa kapanış bandının başlığını da yakalar; özgüllük
 * eşit (0,1,1) olduğu için sonra gelen kazanır ve `.wpt-ic-kapanis h2`nin
 * beyazı ezilir — başlık koyu zeminde koyu renge düşüp görünmez olur.
 * Makale başlıkları zaten .wpt-govde'nin doğrudan çocuğudur.
 */
.wpt-govde > h2{
  margin:0; font-size:clamp(20px,2.6vw,25px); font-weight:800;
  letter-spacing:var(--wpt-track-s); color:var(--wpt-ink);
  text-wrap:balance; line-height:1.28;
  padding-top:20px; border-top:1px solid var(--wpt-line);
}
.wpt-govde > h3{
  margin:0; font-size:18px; font-weight:700; letter-spacing:-.015em;
  color:var(--wpt-ink); line-height:1.35;
}
.wpt-govde > h4{ margin:0; font-size:16px; font-weight:700; color:var(--wpt-ink) }
.wpt-govde > p{ margin:0; max-width:70ch }

/* Makale akışı ürün bloklarından daha sık nefes alır */
.wpt-govde > h2 + *{ margin-top:16px }
.wpt-govde > h3,
.wpt-govde > h4{ margin-top:34px }
.wpt-govde > h3 + *,
.wpt-govde > h4 + *{ margin-top:12px }
.wpt-govde > p + p{ margin-top:16px }

/* Serbest liste — ürün bloklarındaki kutulu listeden ayrı */
.wpt-govde > ul:not([class]),
.wpt-govde > ol:not([class]){ margin:0; padding-left:22px; max-width:70ch }
.wpt-govde > ul:not([class]) li,
.wpt-govde > ol:not([class]) li{ padding:5px 0 }
.wpt-govde > ul:not([class]) li::marker{ color:var(--wpt-amber-ink) }

/* Doğrudan metin taşıyan, sınıflandırılamayan kutu */
.wpt-ic-blok{ max-width:70ch }
.wpt-ic-blok > * + *{ margin-top:12px }

/* --------------------------------------------------------------------------
   KARŞILAŞTIRMA TABLOSU — geniş, kendi içinde kayar
   -------------------------------------------------------------------------- */
.wpt-tablo-sar{
  overflow-x:auto; border:1px solid var(--wpt-line); border-radius:var(--wpt-r);
  -webkit-overflow-scrolling:touch;
}
.wpt-tablo-sar table{
  width:100%; min-width:520px; border-collapse:collapse;
  background:var(--wpt-surface); font-size:14.5px; text-align:left;
}
.wpt-tablo-sar th,
.wpt-tablo-sar td{ padding:12px 16px; vertical-align:top }
.wpt-tablo-sar thead th{
  background:var(--wpt-surface-2); color:var(--wpt-ink-3);
  font-family:var(--wpt-mono); font-size:10px; font-weight:600;
  letter-spacing:var(--wpt-track-l); text-transform:uppercase; white-space:nowrap;
  border-bottom:1px solid var(--wpt-line);
}
.wpt-tablo-sar tbody tr + tr th,
.wpt-tablo-sar tbody tr + tr td{ border-top:1px solid var(--wpt-line-2) }
.wpt-tablo-sar tbody th{ font-weight:600; color:var(--wpt-ink); white-space:nowrap }

/* --------------------------------------------------------------------------
   İÇİNDEKİLER — kategori metinlerinin gezinme aracı
   Kaynakta aralarında hiçbir ayırıcı olmayan flex bağlantılar; burada
   iki sütuna açılan gerçek bir liste.
   -------------------------------------------------------------------------- */
.wpt-ic-icindekiler{
  list-style:none; margin:0; padding:20px 22px;
  background:var(--wpt-surface-2); border:1px solid var(--wpt-line);
  border-radius:var(--wpt-r);
  columns:2; column-gap:32px;
}
@media (max-width:680px){ .wpt-ic-icindekiler{ columns:1 } }
.wpt-ic-icindekiler li{ break-inside:avoid; padding:1px 0 }
/* ⚠ SOL ÇİZGİ KALDIRILDI. Her satırın solunda gri bir dikey çubuk vardı;
   on iki maddede on iki çizgi, kutunun içinde ikinci bir ızgara gibi
   duruyordu (kullanıcı: *"altında çizgiler olmasın"*). Ayırıcı işini
   artık satırın kendi zemini yapıyor — yalnızca üstüne gelince. */
.wpt-ic-icindekiler a{
  display:flex; align-items:baseline; gap:10px;
  padding:7px 10px; border-radius:var(--wpt-r-sm);
  font-size:14.5px; line-height:1.45;
  color:var(--wpt-ink-2); text-decoration:none;
  transition:color var(--wpt-gecis), background var(--wpt-gecis);
}
.wpt-ic-icindekiler a:hover{
  color:var(--wpt-brand); background:var(--wpt-surface); text-decoration:none;
}
.wpt-ic-icindekiler a:focus-visible{
  outline:2px solid var(--wpt-brand); outline-offset:1px;
}
/* Etiketiyle birlikte tek kutu */
.wpt-ic-icindekiler-kutu{
  background:var(--wpt-surface-2); border:1px solid var(--wpt-line);
  border-radius:var(--wpt-r); padding:20px 22px;
}
.wpt-ic-icindekiler-kutu .wpt-ic-icindekiler{
  background:none; border:0; border-radius:0; padding:0; margin-top:12px;
}
.wpt-ic-icindekiler-bas{
  margin:0; font-family:var(--wpt-mono); font-size:10px; font-weight:600;
  letter-spacing:var(--wpt-track-l); text-transform:uppercase; color:var(--wpt-ink-3);
}
/* Kutu içerikten ayrılsın; yazının başında duruyor. */
.wpt-ic-icindekiler-kutu{ margin:0 0 clamp(22px,3vw,32px) }
/* Numara sütunu sabit genişlikte — başlıklar aynı hizadan başlasın. */
.wpt-ic-icindekiler-kutu .wpt-ic-icindekiler{ margin-top:8px }

/* SIRA NUMARASI — SÜS DEĞİL, TEK SIRA İŞARETİ.
   Kutu iki sütuna açılıyor (`columns:2`), yani doğru okuma sırası sol
   sütunun tamamı sonra sağ sütun. Göz ise iki sütunlu bir kutuyu satır
   satır soldan sağa okumaya çalışıyor; iki okuma da mümkün göründüğü için
   sıra belirsiz kalıyordu. Numara bu belirsizliği kapatıyor. */
.wpt-ic-icindekiler-no{
  flex:0 0 auto; min-width:20px;
  font-family:var(--wpt-mono); font-size:var(--wpt-fs-xs); font-weight:600;
  color:var(--wpt-ink-3); font-variant-numeric:tabular-nums;
}
.wpt-ic-icindekiler a:hover .wpt-ic-icindekiler-no{ color:var(--wpt-brand) }

@media (prefers-reduced-motion:reduce){ .wpt-ic-icindekiler a{ transition:none } }

/* --------------------------------------------------------------------------
   BÖLÜM RAYI — KATLANIR

   ⚠ ÜÇ SATIRDAN BİRE. Dokuz bölümlü bir üründe çipler sarmalanıp rayı üç
   satır yapıyordu; ray yapışkan olduğu için bu üç satır sayfa boyunca
   ekranın üstünde duruyordu. Kullanıcı: *"çok yer kaplıyor aşağı
   kaydırırken ve bu kısım çok karışık duruyor."*

   ⚠ HİÇBİR ÇİP SİLİNMİYOR. Daha önce yatay kaydırma denenmiş ve "yarıda
   kesilmiş görünüyor" diye bırakılmıştı. Bu yüzden çözüm gizlemek değil,
   KATLAMAK: kapalıyken tek satır, düğmeyle tamamı açılıyor. Okunan bölüm
   `order` ile başa alınıyor, yani kapalıyken de "neredeyim" görünüyor.
   -------------------------------------------------------------------------- */
.wpt-ic-ray{ display:flex; align-items:center; gap:8px }
/* ⚠ KAPALIYKEN YATAY AKAR, ÇİPLER YER DEĞİŞTİRMEZ.
   İlk sürümde okunan bölüm `order:-1` ile başa alınıyordu; her bölüme
   girildiğinde ray yeniden diziliyor ve göz "atlıyor" olarak okuyordu.
   Sıra artık sabit — okunan çip görünür alana kaydırılıyor (akıcı).
   Kaydırma çubuğu gizli; kenar maskeleri devamı olduğunu söylüyor. */
.wpt-ic-ray ul{
  flex:1 1 auto; min-width:0;
  flex-wrap:nowrap; overflow-x:auto; overflow-y:hidden;
  /* ⚠ `scroll-behavior:smooth` KALDIRILDI — TAKILMANIN SEBEBİ BUYDU.
     Tekerlek her tıkta `scrollLeft` yazıyor; CSS smooth ise her yazım yeni
     bir animasyon başlatıp öncekini yarıda kesiyordu. Kullanıcı:
     *"çok kasarak gidiyor gibi, soft gitmiyor."* Yumuşatma artık
     assets/js/product.js içinde requestAnimationFrame ile yapılıyor;
     bölüm takibi (`rayaKaydir`) ise `scrollTo`ya behavior:'smooth'
     parametresini AÇIKÇA verdiği için etkilenmiyor. */
  scroll-behavior:auto;
  scrollbar-width:none; -webkit-overflow-scrolling:touch;
  overscroll-behavior-x:contain;
}
.wpt-ic-ray ul::-webkit-scrollbar{ display:none }
@media (prefers-reduced-motion:reduce){
  .wpt-ic-ray ul{ scroll-behavior:auto }
}

.wpt-ic-ray.is-acik ul{ flex-wrap:wrap; overflow:visible }

.wpt-ic-ray-ac{
  flex:0 0 auto;
  display:inline-flex; align-items:center; gap:5px;
  height:30px; padding:0 12px;
  background:var(--wpt-surface); color:var(--wpt-ink-2);
  border:1px solid var(--wpt-line); border-radius:var(--wpt-r-hap);
  font-family:var(--wpt-mono); font-size:var(--wpt-fs-xs);
  letter-spacing:.04em; white-space:nowrap; cursor:pointer;
  transition:border-color var(--wpt-gecis), color var(--wpt-gecis);
}
.wpt-ic-ray-ac::after{
  content:""; width:6px; height:6px;
  border-right:1.8px solid currentColor; border-bottom:1.8px solid currentColor;
  transform:rotate(45deg) translate(-1px,-1px);
  transition:transform var(--wpt-gecis);
}
.wpt-ic-ray.is-acik .wpt-ic-ray-ac::after{ transform:rotate(-135deg) translate(-2px,-2px) }
.wpt-ic-ray-ac:hover{ border-color:var(--wpt-line-2); color:var(--wpt-ink) }
.wpt-ic-ray-ac:focus-visible{ outline:2px solid var(--wpt-brand); outline-offset:2px }
@media (prefers-reduced-motion:reduce){
  .wpt-ic-ray-ac::after{ transition:none }
}