/* Bilesen: Karsilastirma tablosu
   16 hizmet sayfasindaki "biz vs digerleri" tablolari. Kapsayiciya
   .ar-compare-table sinifini verin. Dar ekranda yatay kaydirilir. */

.ar-compare-table {
  overflow-x: auto;
}

.ar-compare-table table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}

.ar-compare-table th,
.ar-compare-table td {
  padding: var(--ar-space-sm);
  border-bottom: 1px solid var(--ar-border);
  text-align: left;
}

.ar-compare-table thead th {
  background: var(--ar-navy);
  color: #fff;
  font-family: var(--ar-font-heading);
}

.ar-compare-table thead th:first-child { border-top-left-radius: var(--ar-radius-md); }
.ar-compare-table thead th:last-child { border-top-right-radius: var(--ar-radius-md); }

/* =========================================================================
   SARMALSIZ TABLOLAR (inc/content-standardize.php)
   -------------------------------------------------------------------------
   Yukaridaki .ar-compare-table elle isaretlenmis 45 tablo icin.
   Aktarilan icerikteki 1.300'den fazla tablo ise SARMALSIZ geliyor;
   cizim sirasinda .ar-tablo-kap ile sarmalaniyorlar.

   Sarmalsiz genis tablo dar ekranda SAYFANIN TAMAMINI yatay
   kaydirtiyor; kapsayici kaydirmayi tablonun icine hapsediyor.
   ========================================================================= */

.ar-tablo-kap {
  overflow-x: auto;
  max-width: 100%;
  margin: clamp(20px, 3vw, 32px) 0;
  border: 1px solid var(--ar-border);
  border-radius: var(--ar-radius-md);
  /* Klavyeyle kaydırılabilsin diye odaklanabilir; odak halkası
     kutunun dışına taşmasın. */
  outline-offset: -2px;
}

.ar-tablo-kap:focus-visible {
  outline: 2px solid var(--ar-green);
}

.ar-tablo-kap table,
.ar-icerik table,
.ar-yazi-icerik table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
  /* Sütunlar içeriğe göre daralmasın; okunabilir bir taban genişlik. */
  min-width: 520px;
}

.ar-tablo-kap th,
.ar-tablo-kap td {
  padding: 12px 16px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--ar-border);
}

.ar-tablo-kap thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  font-family: var(--ar-font-heading);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--ar-navy);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  background: var(--ar-silver-soft);
}

.ar-tablo-kap tbody tr:last-child th,
.ar-tablo-kap tbody tr:last-child td {
  border-bottom: 0;
}

.ar-tablo-kap tbody tr:nth-child(even) {
  background: color-mix(in srgb, var(--ar-silver-soft) 45%, #fff);
}

.ar-tablo-kap td {
  line-height: 1.6;
  color: var(--ar-muted);
}

/* İlk sütun genelde satır etiketi; vurgulanıyor. */
.ar-tablo-kap tbody td:first-child {
  font-weight: 600;
  color: var(--ar-navy);
}

/* Koyu bölüm içinde tablo açık kalmalı — dark.css'in genel kuralı
   metni beyaza çevirip beyaz zeminde görünmez bırakıyordu. */
.ar-sahne.ar-sahne .ar-tablo-kap :is(th, td) {
  color: var(--ar-muted);
}

.ar-sahne.ar-sahne .ar-tablo-kap thead th,
.ar-sahne.ar-sahne .ar-tablo-kap tbody td:first-child {
  color: var(--ar-navy);
}

/* Kaydırma ipucu: dar ekranda sağ kenarda yumuşak bir gölge. */
@media (max-width: 780px) {
  .ar-tablo-kap {
    background:
      linear-gradient(to right, #fff 30%, rgb(255 255 255 / 0%)) left / 28px 100% no-repeat,
      linear-gradient(to left, #fff 30%, rgb(255 255 255 / 0%)) right / 28px 100% no-repeat,
      radial-gradient(farthest-side at 0 50%, rgb(15 27 70 / 12%), transparent) left / 12px 100% no-repeat,
      radial-gradient(farthest-side at 100% 50%, rgb(15 27 70 / 12%), transparent) right / 12px 100% no-repeat;
    background-attachment: local, local, scroll, scroll;
  }
}