/* =====================================================================
   KARAM SAFETY — detail.css   ·  Ürün Detay iyileştirmeleri  ·  v1
   ---------------------------------------------------------------------
   Yalnız body.catalog-detail sayfalarında yüklenir. catalog.css TABAN
   olarak kalır (kx-hero stilleri oradan gelir) ve DEĞİŞTİRİLMEZ; bu dosya
   yalnız hero'nun ALTINDAKİ bileşenleri düzeltir/geliştirir.

   ⚠ Hiçbir seçici .kx-hero ve alt öğelerini hedeflemez.

   Kapsam:
     1. .kx-plead  — özet paragrafı (eski .kx-sub çip stiliyle çakışıp taşıyordu)
     2. .kx-doc    — uzun dosya adlarında taşma
     3. .kx-stage  — arka plan beyaz
     4. .kx-tbl    — CMS tablolarının premium görünümü (inline stiller ezilir)
     5. .kx-rel-*  — İlgili Ürünler karuseli
   ===================================================================== */

/* ═══════ 1 · ÖZET PARAGRAFI ═══════
   catalog.css'te .kx-sub iki farklı bileşen için kullanılıyor: hem "lead"
   paragrafı hem de alt-kategori çipi (flex + white-space:nowrap + pill).
   Ürün detayındaki özet metni çip stilini alıp satır kırmadığı için
   taşıyordu. Artık kendi sınıfını kullanıyor. */
.catalog-detail .kx-plead{
  display:block;margin:0 0 22px;padding:0;border:0;background:none;
  color:var(--muted);font-weight:400;font-size:clamp(.98rem,1.15vw,1.06rem);
  line-height:1.75;max-width:64ch;
  white-space:normal;overflow-wrap:break-word;word-break:normal;hyphens:auto;
}

/* ═══════ 2 · BELGE KARTLARI — uzun dosya adları taşmasın ═══════ */
.catalog-detail .kx-docs{grid-template-columns:repeat(auto-fill,minmax(290px,1fr))}
.catalog-detail .kx-doc{align-items:flex-start;gap:13px;min-width:0}
.catalog-detail .kx-doc-b{min-width:0;flex:1 1 auto;overflow:hidden}
.catalog-detail .kx-doc-t{
  display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  margin-bottom:3px;
}
/* tek satır + "…" yerine en çok 2 satır: bilgi kaybolmaz, taşma da olmaz */
.catalog-detail .kx-doc-n{
  white-space:normal;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  overflow-wrap:anywhere;word-break:break-word;line-height:1.35;
}
.catalog-detail .kx-doc-go{align-self:center}
@media (max-width:420px){
  .catalog-detail .kx-docs{grid-template-columns:minmax(0,1fr)}
  .catalog-detail .kx-doc{padding:14px}
}

/* ═══════ 3 · GALERİ SAHNESİ — arka plan beyaz ═══════ */
.catalog-detail .kx-stage{background:#ffffff}
.catalog-detail .kx-stage::before{display:none}          /* turuncu glow katmanı kapatıldı */
.catalog-detail .kx-thumb{background:#ffffff}
.catalog-detail .kx-lb-img{background:#ffffff}

/* ═══════ 4 · CMS TABLOLARI — premium teknik künye ═══════
   Veritabanındaki tablolar satır içi (inline) stille geliyor: sabit px
   genişlikler, siyah kenarlıklar, #f2f2f2 zemin, "Aptos Narrow" fontu,
   white-space:nowrap. Satır içi stil YALNIZCA !important ile ezilebilir —
   bu yüzden bu blokta bilinçli olarak kullanılıyor (kapsam: yalnız
   .catalog-detail .kx-tbl__t). Veritabanı içeriğine DOKUNULMUYOR. */
/* .kx-cms 74ch ile sınırlı (düz metin için doğru), ama teknik tablo bu ölçüye
   sıkışıyordu. Ölçü sınırı artık YALNIZ metin öğelerinde; tablo nefes alıyor. */
.catalog-detail .kx-cms{max-width:none}
.catalog-detail .kx-cms p,
.catalog-detail .kx-cms li{max-width:74ch}
.catalog-detail .kx-cms .kx-tbl__t p,
.catalog-detail .kx-cms .kx-tbl__t li{max-width:none}

.catalog-detail .kx-tbl{
  position:relative;margin:1.4em 0;max-width:min(100%,1080px);
  border:1px solid var(--line);border-radius:14px;
  background:var(--white);box-shadow:0 1px 2px rgba(21,21,18,.04),0 10px 24px -18px rgba(21,21,18,.22);
  overflow:hidden;
}
.catalog-detail .kx-tbl__scroll{overflow-x:auto;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}
.catalog-detail .kx-tbl__scroll::-webkit-scrollbar{height:6px}
.catalog-detail .kx-tbl__scroll::-webkit-scrollbar-thumb{background:var(--line);border-radius:6px}
/* sağa kaydırılabildiğini gösteren yumuşak kenar */
.catalog-detail .kx-tbl.can-scroll::after{
  content:"";position:absolute;inset-block:0;inset-inline-end:0;inline-size:34px;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.96));
}
[dir=rtl] .catalog-detail .kx-tbl.can-scroll::after{background:linear-gradient(270deg,transparent,rgba(255,255,255,.96))}
.catalog-detail .kx-tbl.at-end::after{opacity:0}

.catalog-detail .kx-tbl__t{
  width:100%!important;min-width:100%!important;max-width:none!important;
  display:table!important;border-collapse:collapse!important;margin:0!important;
  table-layout:auto!important;font-family:var(--font-body)!important;
}
.catalog-detail .kx-tbl__t colgroup,
.catalog-detail .kx-tbl__t col{width:auto!important}
.catalog-detail .kx-tbl__t tbody,
.catalog-detail .kx-tbl__t tr{background:transparent!important;border:0!important}
.catalog-detail .kx-tbl__t td,
.catalog-detail .kx-tbl__t th{
  width:auto!important;height:auto!important;
  border:0!important;border-block-end:1px solid var(--line)!important;
  background:transparent!important;
  padding:13px 18px!important;
  vertical-align:top!important;text-align:start!important;
  white-space:normal!important;overflow-wrap:break-word!important;
  font-family:var(--font-body)!important;font-size:.95rem!important;line-height:1.55!important;
  color:var(--ink)!important;
}
/* içteki span/strong/font mirasları da normalize edilir */
.catalog-detail .kx-tbl__t td *,
.catalog-detail .kx-tbl__t th *{
  font-family:inherit!important;font-size:inherit!important;color:inherit!important;
  background:transparent!important;line-height:inherit!important;
}
.catalog-detail .kx-tbl__t tr:last-child td{border-block-end:0!important}
/* zebra */
.catalog-detail .kx-tbl__t tr:nth-child(even) td{background:var(--cream)!important}
.catalog-detail .kx-tbl__t tr:hover td{background:#fff4ee!important}

/* JS ile işaretlenen süs hücreleri (yalnız "•" ya da ":") gizlenir */
.catalog-detail .kx-tbl__t td.kx-tbl__deco{display:none!important}
/* anahtar sütunu */
.catalog-detail .kx-tbl__t td.kx-tbl__k{
  inline-size:38%!important;min-inline-size:150px;
  font-weight:700!important;color:var(--ink)!important;
  border-inline-end:1px solid var(--line)!important;
}
.catalog-detail .kx-tbl__t td.kx-tbl__k::before{
  content:"";display:inline-block;inline-size:3px;block-size:.85em;
  border-radius:2px;background:var(--orange);
  margin-inline-end:9px;vertical-align:-1px;
}
.catalog-detail .kx-tbl__t td.kx-tbl__v{
  color:var(--ink)!important;font-weight:500!important;
  font-variant-numeric:tabular-nums;
}
.catalog-detail .kx-tbl__t tr.kx-tbl__empty{display:none!important}
/* başlık satırı (varsa) */
.catalog-detail .kx-tbl__t thead td,
.catalog-detail .kx-tbl__t thead th{
  background:var(--ink)!important;color:#fff!important;
  font-weight:800!important;font-size:.78rem!important;
  letter-spacing:.08em!important;text-transform:uppercase!important;
}
@media (max-width:520px){
  .catalog-detail .kx-tbl__t td,.catalog-detail .kx-tbl__t th{padding:11px 13px!important;font-size:.9rem!important}
  .catalog-detail .kx-tbl__t td.kx-tbl__k{inline-size:44%!important;min-inline-size:112px}
}

/* ═══════ 5 · İLGİLİ ÜRÜNLER — blog detaydaki karusel kurgusu ═══════
   Ölçüler bilinçli olarak journal.css `.jr-relsw*` ile aynı tutuldu:
   48px yuvarlak oklar, 26px başlık boşluğu, altta ortalanmış tıklanabilir
   noktalar, 1.15 / 2 (≥600) / 3 (≥1000) slayt. Kartlar ks-card. */
.catalog-detail .kx-rel-wrap{position:relative}
.catalog-detail .kx-rel-head{
  display:flex;align-items:flex-end;justify-content:space-between;gap:20px;
  flex-wrap:wrap;margin-bottom:26px;
}
.catalog-detail .kx-rel-kicker{
  display:inline-flex;align-items:center;gap:10px;margin:0 0 16px;
  font-size:.78rem;font-weight:800;letter-spacing:.17em;text-transform:uppercase;color:var(--orange-d);
}
.catalog-detail .kx-rel-kicker::before{content:"";width:26px;height:2px;background:var(--orange);border-radius:2px}
.catalog-detail .kx-rel-head h2{
  font-family:var(--font-display);font-weight:400;text-transform:uppercase;
  font-size:clamp(1.6rem,3.4vw,2.6rem);line-height:1.2;letter-spacing:.01em;color:var(--ink);margin:0;
}
.catalog-detail .kx-rel-nav{display:flex;gap:10px;flex:none}
.catalog-detail .kx-rel-nav button{
  width:48px;height:48px;border-radius:50%;border:1px solid var(--line);background:var(--white);
  color:var(--ink);display:grid;place-items:center;cursor:pointer;
  transition:background .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease),transform .3s var(--ease),opacity .3s;
}
.catalog-detail .kx-rel-nav button svg{width:20px;height:20px}
[dir=rtl] .catalog-detail .kx-rel-nav button svg{transform:scaleX(-1)}
.catalog-detail .kx-rel-nav button:hover{background:var(--ink);color:#fff;border-color:var(--ink);transform:translateY(-2px)}
.catalog-detail .kx-rel-nav button:focus-visible{outline:2px solid var(--orange);outline-offset:2px}
.catalog-detail .kx-rel-nav button.swiper-button-disabled,
.catalog-detail .kx-rel-nav button:disabled{
  opacity:.35;cursor:default;transform:none;pointer-events:none;
  background:var(--white);color:var(--ink);border-color:var(--line);
}
.catalog-detail .kx-rel-sw{overflow:hidden;padding:6px 4px 4px}
.catalog-detail .kx-rel-sw .swiper-slide{height:auto;display:flex}
.catalog-detail .kx-rel-sw .swiper-slide>.ks-card{width:100%}
.catalog-detail .kx-rel-pag{display:flex;justify-content:center;gap:8px;margin-top:26px}
.catalog-detail .kx-rel-pag .swiper-pagination-bullet{
  width:8px;height:8px;border-radius:50%;background:var(--line);opacity:1;
  border:0;padding:0;cursor:pointer;transition:background .25s,width .25s;
}
.catalog-detail .kx-rel-pag .swiper-pagination-bullet-active{background:var(--orange);width:26px;border-radius:100px}
@media (max-width:640px){
  .catalog-detail .kx-rel-nav{display:none}      /* mobilde parmakla kaydır */
  .catalog-detail .kx-rel-head{margin-bottom:18px}
}
@media (prefers-reduced-motion:reduce){
  .catalog-detail .kx-rel-sw .swiper-wrapper{transition-duration:.01ms!important}
}