/* =====================================================================
   KARŞILAŞTIRMA TABLOSU — ORTAK dosya (2026-09-25)
   Murat: "dördüncü resim alanı da diğer sayfalarda yaptığımız formattaki
   gibi olsun." Paket kartlarında olduğu gibi tablo da tek kaynaktan
   yönetilir: her ürün sayfası bu dosyayı <link> eder, kendi CSS'inde
   karşılaştırma tablosunu YENİDEN TANIMLAMAZ.

   Kapsam: `.vl-compare-tabs` (altı çizgili sekme çubuğu — hap butonlar
   2026-09-23'te beğenilmedi) ve `.vl-compare-table` (kendi çizgilerini
   çizen ızgara). Temanın style.css'teki eski dolgu-başlıklı tablo stili
   burada devre dışı bırakılıyor.
   Sütun sayısı: varsayılan 3 ürün; 4 ürünlü sayfalar tabloya `grid-5`
   sınıfını ekler (Kurumsal Hosting). Vurgulu sütun = "en çok tercih
   edilen" paket: 3 üründe 3., 4 üründe 4. hücre.
   ===================================================================== */
.vl-compare-tabs, .vl-compare-table {
    --kt-ink: #161B33;
    --kt-ink-soft: #454B6B;
    --kt-muted: #7D839F;
    --kt-line: #E6E8F2;
    --kt-purple: #4553C7;
    --kt-mint: #0E9F6E;
}

/* --- Sekme çubuğu --- */
.vl-compare-tabs {
    margin: 0 auto 22px; max-width: 1080px;
    border-bottom: 1px solid var(--kt-line);
}
.vl-compare-tabs ul {
    display: flex; flex-wrap: wrap; gap: 4px 28px; padding: 0; margin: 0;
    justify-content: center;
}
.vl-compare-tabs li { list-style: none; margin: 0; }
.vl-compare-tabs .link {
    position: relative; display: inline-flex; align-items: center; gap: 8px;
    padding: 12px 2px 14px; border: 0; background: none; border-radius: 0;
    font-size: 14px; font-weight: 600; color: var(--kt-muted); text-decoration: none;
    transition: color .15s;
}
.vl-compare-tabs .link i { font-size: 13px; color: currentColor; opacity: .75; }
.vl-compare-tabs .link::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
    background: var(--kt-purple); border-radius: 2px 2px 0 0;
    transform: scaleX(0); transform-origin: center; transition: transform .18s ease;
}
/* ⚠️ Temanın style.css'i `.vl-compare-tabs .link.active, …:hover` için mor dolgu
   veriyor ve aynı özgüllükte; dolgu burada açıkça sıfırlanmalı, yoksa aktif sekme
   yine hap buton gibi görünüyor (2026-09-25 vakası). */
.vl-compare-tabs .link:hover,
.vl-compare-tabs .link.active {
    background: none; background-color: transparent; border-radius: 0;
}
.vl-compare-tabs .link:hover { color: var(--kt-ink); }
.vl-compare-tabs .link.active { color: var(--kt-purple); }
.vl-compare-tabs .link.active i { opacity: 1; }
.vl-compare-tabs .link.active::after { transform: scaleX(1); }

/* --- Tablo --- */
.vl-compare-table {
    max-width: 1080px; margin: 0 auto; overflow: hidden;
    background: #fff; border: 1px solid var(--kt-line); border-radius: 16px;
}
.vl-compare-table .grid {
    display: grid; grid-template-columns: minmax(150px, 1.4fr) repeat(3, minmax(0, 1fr));
}
.vl-compare-table.grid-5 { max-width: 1120px; }
.vl-compare-table.grid-5 .grid {
    grid-template-columns: minmax(150px, 1.4fr) repeat(4, minmax(0, 1fr));
}
/* 5 ürünlü tablo (ör. Sanal Sunucular). Varsayılan vurgulu sütun yok;
   gerekirse tabloya `vurgu-1..4` eklenir. */
.vl-compare-table.grid-6 { max-width: 100%; }
.vl-compare-table.grid-6 .grid {
    grid-template-columns: minmax(130px, 1.2fr) repeat(5, minmax(0, 1fr));
}
.vl-compare-table.grid-6 .item:nth-child(3) { background: none; }
.vl-compare-table.grid-6 .head .item:nth-child(3) { color: var(--kt-ink); }
.vl-compare-table.grid-6 .item { padding: 13px 10px; font-size: 13px; }
.vl-compare-table.grid-6 .head .item { font-size: 14px; }
.vl-compare-table .head .grid { background: #F4F6FD; }
.vl-compare-table .head .item {
    padding: 16px 14px; text-align: center;
    font-size: 15px; font-weight: 800; color: var(--kt-ink);
}
.vl-compare-table .list .grid { border-top: 1px solid var(--kt-line); }
.vl-compare-table .list:nth-child(even) .grid { background: #FBFCFF; }
.vl-compare-table .item { padding: 13px 14px; text-align: center; font-size: 13.5px; color: var(--kt-ink-soft); }
.vl-compare-table .item:first-child { text-align: left; font-weight: 600; color: var(--kt-ink); }

/* Vurgulu sütun (popüler paket) */
.vl-compare-table .item:nth-child(3) { background: rgba(69,83,199,.04); }
.vl-compare-table .head .item:nth-child(3) { color: var(--kt-purple); }
.vl-compare-table.grid-5 .item:nth-child(3) { background: none; }
.vl-compare-table.grid-5 .head .item:nth-child(3) { color: var(--kt-ink); }
.vl-compare-table.grid-5 .item:nth-child(4) { background: rgba(69,83,199,.04); }
.vl-compare-table.grid-5 .head .item:nth-child(4) { color: var(--kt-purple); }

/* Vurgulu sütun varsayılanı yetmiyorsa tabloya `vurgu-1..4` eklenir
   (1 = ilk ürün). ⚠️ Vurgulanan sütun, kartlardaki "En çok tercih edilen"
   rozetiyle AYNI paket olmalı — 2026-09-25'te SEO sayfasında rozet 2.,
   tablo 3. pakedi gösteriyordu. */
.vl-compare-table[class*="vurgu-"] .item:nth-child(3),
.vl-compare-table[class*="vurgu-"] .item:nth-child(4),
.vl-compare-table[class*="vurgu-"] .item:nth-child(5) { background: none; }
.vl-compare-table[class*="vurgu-"] .head .item { color: var(--kt-ink); }
.vl-compare-table.vurgu-1 .item:nth-child(2),
.vl-compare-table.vurgu-2 .item:nth-child(3),
.vl-compare-table.vurgu-3 .item:nth-child(4),
.vl-compare-table.vurgu-4 .item:nth-child(5) { background: rgba(69,83,199,.04); }
.vl-compare-table.vurgu-1 .head .item:nth-child(2),
.vl-compare-table.vurgu-2 .head .item:nth-child(3),
.vl-compare-table.vurgu-3 .head .item:nth-child(4),
.vl-compare-table.vurgu-4 .head .item:nth-child(5) { color: var(--kt-purple); }

.vl-compare-table .fa-check, .vl-compare-table .fa-times { font-size: 13px; }
.vl-compare-table .fa-check { color: var(--kt-mint); font-size: 14px; }
.vl-compare-tabs-content { display: none; }
.vl-compare-tabs-content.active { display: block; }

/* ⚠️ Temanın eski tablo stili (style.css: gri/mor dolgu başlıklar, her hücrede
   kenarlıklı iç kutu) devre dışı — ızgara zaten kendi çizgilerini çiziyor. */
.vl-compare-table .head .text,
.vl-compare-table .head .text:first-child,
.vl-compare-table .head .item:nth-child(3) .text,
.vl-compare-table .head .item:nth-child(4) .text,
.vl-compare-table .head .item:nth-child(5) .text {
    background: none; color: inherit; padding: 0; text-align: inherit;
}
.vl-compare-table .list .text,
.vl-compare-table .list:first-child .text,
.vl-compare-table .list .item:first-child .text {
    padding: 0; border: 0; height: auto; text-align: inherit; font-weight: inherit;
}
.vl-compare-table .list .item:first-child .text { font-weight: 600; }

/* --- Mobil --- */
@media (max-width: 767.98px) {
    .vl-compare-tabs ul { justify-content: flex-start; gap: 4px 18px; overflow-x: auto; flex-wrap: nowrap; }
    .vl-compare-tabs .link { white-space: nowrap; font-size: 13px; }
    .vl-compare-table { overflow-x: auto; }
    .vl-compare-table .grid { grid-template-columns: minmax(124px, 1.2fr) repeat(3, minmax(74px, 1fr)); }
    .vl-compare-table.grid-5 .grid { grid-template-columns: minmax(110px, 1.2fr) repeat(4, minmax(64px, 1fr)); }
    .vl-compare-table.grid-6 .grid { grid-template-columns: minmax(104px, 1.1fr) repeat(5, minmax(62px, 1fr)); }
    .vl-compare-table .item { padding: 11px 8px; font-size: 12.5px; }
}