/* Bölüm: paket karşılaştırma tablosu. */

.cm-scroll {
    overflow-x: auto;
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    background: var(--surface);
}

.cm-scroll:focus-visible { outline: 3px solid var(--brand-400); outline-offset: 2px; }

.cm-table {
    width: 100%;
    min-width: 720px;
    border-collapse: collapse;
    font-size: var(--fs-sm);
}

/* Başlık satırı kaydırırken üstte kalır.

   top: 0 verilince, sayfa kaydırılınca sabitlenen site header'ının (position:
   fixed, 73 px) ALTINDA kalıyor ve paket adları görünmez oluyordu. Tablo yüz
   satırın üzerinde olduğu için bu, tablonun yarısını "hangi sütun hangi paket"
   bilgisi olmadan okumak demekti. */
.cm-table thead th {
    position: sticky;
    top: var(--header-stuck);
    z-index: 2;
    padding: var(--sp-5) var(--sp-4);
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    text-align: center;
    vertical-align: top;
}

.cm-th.is-featured { background: var(--brand-50); }

.cm-name {
    display: block;
    font-size: var(--fs-h4);
    font-weight: var(--fw-bold);
    color: var(--ink-900);
}

.cm-price-old {
    display: block;
    margin-top: var(--sp-2);
    font-size: var(--fs-xs);
    color: var(--ink-600);
    text-decoration-thickness: 1px;
}

/* Üstü çizili fiyat varken ikisi arasına iki kez boşluk girmesin */
.cm-price-old + .cm-price { margin-top: 0; }

.cm-price {
    display: block;
    margin-top: var(--sp-2);
    font-size: 1.125rem;
    font-weight: var(--fw-semibold);
    color: var(--ink-900);
}

.cm-price-note {
    display: block;
    font-size: var(--fs-xs);
    font-weight: var(--fw-regular);
    color: var(--ink-600);
}

.cm-cta { margin-top: var(--sp-3); }

/* Özellik sütunu yatay kaydırmada solda sabit kalır */
.cm-table .cm-feature,
.cm-table .cm-th-feature {
    position: sticky;
    left: 0;
    z-index: 1;
    min-width: 260px;
    padding: var(--sp-4) var(--sp-5);
    background: var(--surface);
    text-align: left;
    font-weight: var(--fw-medium);
    color: var(--ink-800);
}

.cm-table .cm-th-feature { z-index: 3; }

.cm-table td {
    padding: var(--sp-4) var(--sp-4);
    text-align: center;
    border-bottom: 1px solid var(--border);
    color: var(--ink-700);
}

.cm-table .cm-feature { border-bottom: 1px solid var(--border); }

/* Öne çıkan sütun tonu. Mor (#7c3aed) paletimizde yok — başlık hücresi
   brand-50 (turkuaz) kullanırken gövde hücrelerinin mor olması tutarsızdı. */
.cm-table td.is-featured { background: rgba(6, 182, 212, 0.05); }

.cm-table tbody tr:hover .cm-feature,
.cm-table tbody tr:hover td { background: var(--surface-soft); }

.cm-table tbody tr:hover td.is-featured { background: var(--brand-50); }

.cm-group th {
    padding: var(--sp-4) var(--sp-5);
    background: var(--surface-mute);
    border-bottom: 1px solid var(--border);
    text-align: left;
    font-size: 11px;
    font-weight: var(--fw-bold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-600);
    position: sticky;
    left: 0;
}

/* ✓ ve — tablonun asıl bilgisini taşır, dekoratif değil:
   success-600 (3.8:1) ve ink-400 (2.6:1) yetersizdi. */
.cm-yes {
    color: var(--success-700);
    font-size: 1.125rem;
    font-weight: var(--fw-bold);
}

/* "—" özelliğin O PAKETTE OLMADIĞINI söyler; dekoratif değil, karar verdirir.
   ink-500 beyaz zeminde 4,76:1 veriyordu ama öne çıkan sütunun tonlu zemininde
   4,49'a düşüp eşiğin altında kalıyordu. ink-600 ikisinde de 7:1'in üstünde.
   Görsel ağırlık sorun değil: ✓ 18 px kalın ve renkli, "—" ince bir tire. */
.cm-no { color: var(--ink-600); }

.cm-text { font-weight: var(--fw-medium); color: var(--ink-800); }

/* "Yakında" — henüz yazılmamış özellik. Ne ✓ (var) ne — (yok); ikisinden de
   ayrışsın diye kehribar rozet. warning-50 üstünde warning-700 → 4,9:1. */
.cm-soon {
    display: inline-block;
    padding: 3px 9px;
    background: var(--warning-50);
    border-radius: var(--r-full);
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    line-height: 1.3;
    white-space: nowrap;
    color: #b45309;
}

/* ============================================================
   Araç çubuğu — arama ve "yalnız farklılıklar" filtresi

   Yüz satırlık tabloda aranan özelliği gözle bulmak zor; ayrıca satırların
   üçte ikisi dört pakette de aynı olduğu için karar verdiren bilgi aradan
   kayboluyor. Çubuk tablonun hemen üstünde durur.
   ============================================================ */

.cm-tools {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3) var(--sp-5);
    /* Başlık hücresinin içindeyiz; ekran-okuyucu başlığı ile paket adları
       arasında kendi boşluğunu taşır. */
    margin-top: var(--sp-1);
}

.cm-tools[hidden] { display: none; }

/* --- Arama --- */

.cm-search {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    flex: 1 1 280px;
    max-width: 420px;
    padding: 0 var(--sp-4);
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: var(--r-full);
    color: var(--ink-500);
    transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.cm-search:focus-within {
    border-color: var(--brand-500);
    box-shadow: 0 0 0 4px var(--brand-100);
}

.cm-search svg { flex: none; }

.cm-search__input {
    width: 100%;
    padding: 11px 0;
    border: 0;
    background: transparent;
    font-size: var(--fs-sm);
    color: var(--ink-900);
}

.cm-search__input:focus { outline: none; }
.cm-search__input::placeholder { color: var(--ink-500); }

/* --- Anahtar --- */

.cm-switch {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-3);
    cursor: pointer;
    font-size: var(--fs-sm);
    color: var(--ink-800);
}

/* Girdi görsel olarak gizli ama ODAKLANABİLİR kalır; klavye kullanıcısı
   anahtarı sekmeyle bulabilsin diye display:none kullanılmaz. */
.cm-switch__input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.cm-switch__track {
    position: relative;
    flex: none;
    width: 42px;
    height: 24px;
    background: var(--ink-200);
    border-radius: var(--r-full);
    transition: background var(--dur) var(--ease);
}

.cm-switch__dot {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 18px;
    height: 18px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.3);
    transition: transform var(--dur) var(--ease);
}

.cm-switch__input:checked + .cm-switch__track { background: var(--brand-700); }
.cm-switch__input:checked + .cm-switch__track .cm-switch__dot { transform: translateX(18px); }

.cm-switch__input:focus-visible + .cm-switch__track {
    outline: 3px solid var(--brand-400);
    outline-offset: 2px;
}

/* --- Sonuç yok --- */

.cm-empty {
    margin-bottom: var(--sp-5);
    padding: var(--sp-5);
    background: var(--surface-soft);
    border-radius: var(--r-lg);
    text-align: center;
    font-size: var(--fs-sm);
    color: var(--ink-700);
}

.cm-empty[hidden] { display: none; }

/* Filtre gizlediği satırlar */
.cm-table tr[data-cm-row].is-hidden,
.cm-table tr[data-cm-group].is-hidden { display: none; }

@media (max-width: 620px) {
    .cm-tools { gap: var(--sp-3); }
    .cm-search { max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
    .cm-switch__track, .cm-switch__dot { transition: none; }
}

/* Araç çubuğu tablonun ÜSTÜNDE, kendi satırında durur. */
.cm-tools { margin-bottom: var(--sp-4); }

/* ============================================================
   Bölüm başlığı — marka gradyanı

   Logodaki turkuaz→indigo geçişi. Gradyan yalnız DOLGU; metnin kendisi
   yerinde durduğu için ekran okuyucu ve arama motoru etkilenmez.
   background-clip desteklenmezse color değeri geçerli kalır (brand-800,
   beyaz üstünde 6,4:1) — yani hiçbir tarayıcıda görünmez metin olmaz.
   ============================================================ */

.sc-compare .sc-head__title {
    /* AÇIKTAN KOYUYA: parlak turkuazla başlar, indigodan geçer, gece mavisinde
       biter. Daha açık bir turkuazla (brand-500) başlayamıyoruz — zemine karşı
       2,3:1 veriyor. brand-600 ile 3,49:1, ve başlık her kırılımda en az 26 px
       kalın olduğu için "büyük metin" sayılır; eşik 3:1. */
    color: var(--brand-800);
    background-image: linear-gradient(96deg,
                      var(--brand-600) 0%,
                      var(--indigo-600) 48%,
                      var(--indigo-950) 100%);
    -webkit-background-clip: text;
    background-clip: text;

    /* Logo ağır, dar aralıklı ve geometrik. Elimizdeki yazı tipiyle ona en çok
       yaklaşan ayar: en kalın kesim + sıkı harf aralığı.
       NOT: site hiçbir webfont YÜKLEMİYOR (bkz. docs/MIMARI.md §27); gerçek
       eşleşme için logo yazı tipinin siteye eklenmesi gerekir. */
    font-weight: 800;
    letter-spacing: -0.03em;
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
    .sc-compare .sc-head__title { color: transparent; }
}

/* ============================================================
   DAR EKRAN — tablo yatay kaymaz, BLOK olarak okunur

   Ölçüldü: 375 px'te tablo 720 px genişliğinde duruyordu; ziyaretçi her
   satır için yana kaydırmak zorundaydı. Özellik sütununu daraltmak da
   yetmiyordu — 148 px'lik ada "%0'dan Başlayan Hazır Sanal POS Oranı"
   sığmıyor, satır üç katına çıkıyordu.

   Dar ekranda düzen değişir: ÖZELLİK ADI kendi satırını tam kaplar,
   altında paket sayısı kadar hücre yan yana dizilir. Sütun sayısı
   içerikten geliyor (`--cm-sutun`), paket eklenince şerit ile hücreler
   kendiliğinden aynı kalıyor.

   Paket adları şeridi ÜSTTE SABİT: dört işaretin hangi pakete ait
   olduğu başka türlü anlaşılmaz. Sabitleme `thead`in kendisine veriliyor
   — blok düzende `th`e verilseydi sabit kutu kendi satırının içine
   hapsolur, tablo kayarken şerit hemen kaybolurdu.
   ============================================================ */

@media (max-width: 720px) {
    .cm-scroll { overflow: visible; }

    .cm-table { display: block; min-width: 0; }
    .cm-table thead,
    .cm-table tbody { display: block; }

    .cm-table thead {
        position: sticky;
        top: var(--header-stuck);
        z-index: 2;
        background: var(--surface);
        border-bottom: 1px solid var(--border);
    }

    .cm-table thead tr,
    .cm-table tr[data-cm-row] {
        display: grid;
        grid-template-columns: repeat(var(--cm-sutun, 4), minmax(0, 1fr));
    }

    /* Boş başlık hücresi blok düzende yer kaplamaz */
    .cm-table .cm-th-feature { display: none; }

    .cm-table thead th {
        position: static;
        padding: var(--sp-3) 4px;
        border-bottom: 0;
    }

    /* Şerit ne kadar alçaksa o kadar iyi: fiyat kartlarda zaten var,
       burada gereken tek bilgi hangi sütunun hangi paket olduğu. */
    .cm-table .cm-th .cm-price-old,
    .cm-table .cm-th .cm-price,
    .cm-table .cm-th .cm-price-note,
    .cm-table .cm-th .cm-cta { display: none; }

    .cm-name { font-size: 13px; line-height: 1.3; }

    /* Özellik adı tam satır; işaretler altında */
    .cm-table .cm-feature {
        grid-column: 1 / -1;
        position: static;
        min-width: 0;
        max-width: none;
        padding: var(--sp-4) var(--sp-4) var(--sp-2);
        border-bottom: 0;
        font-size: var(--fs-sm);
        font-weight: var(--fw-semibold);
        color: var(--ink-900);
    }

    /* Çizgi artık hücrede değil satırda: hücrede kalsaydı özellik adının
       altından da bir çizgi geçip her satır iki kez bölünmüş görünürdü. */
    .cm-table tr[data-cm-row] { border-bottom: 1px solid var(--border); }

    .cm-table td {
        padding: 0 4px var(--sp-4);
        border-bottom: 0;
    }

    .cm-table tr.cm-group { display: block; }
    .cm-group th { position: static; }
}

/* Grup başlığı satırına (tbody içindeki `th[colspan]`) geniş ekranda
   DOKUNULMADI: yalnız DİKEY sabit, `left` verilmemiş. Yatay kaydırmada
   sorun çıkarmıyor, dikeyde ise "hangi bölümdeyim" bilgisini ekranda
   tutuyor. */