/* =====================================================================
   LikedWin — ORTAK KARŞILAŞTIRMA TABLOSU (lct-*)
   Şablon: includes/compare-table.php · Davranış: assets/js/cmp-table.js

   • Mobilde alt alta DİZİLMEZ: tablo kendi kutusunda yana kayar, özellik
     sütunu sabit kalır; kaydırma çubuğu + oklar + ilk açılışta "göz kırpma".
   • LikedWin sütunu tek parça bir "spot" kartla vurgulanır (JS konumlar);
     JS yoksa hücre zeminleri aynı vurguyu verir.
   • Görünür olunca: spot yukarıdan iner, satırlar kademeli belirir,
     işaretler çizilerek gelir, skor sayılır ve çubuk dolar.
   • Gradyan / ışık halesi yok; renkler site.css token'larından.
   ===================================================================== */

.lct {
    --lct-feat-w: 30%;          /* özellik sütunu genişliği */
    --lct-feat-min: 220px;      /* tablo min-genişliği hesabı için */
    --lct-col-min: 200px;       /* değer sütunu alt sınırı */
    --lct-pad-x: clamp(14px, 1.8vw, 24px);
    --lct-pad-y: 17px;
    --lct-radius: 22px;
    --lct-on-ok: #fff;          /* yeşil rozet üstündeki tik */
    --lct-edge: rgba(16, 24, 40, .16);
    --lct-ease: cubic-bezier(.2, .8, .2, 1);
    --lct-pop: cubic-bezier(.34, 1.56, .64, 1);
    position: relative;
    max-width: 1040px;
    margin: 0 auto;
}
.lct--mark {
    --lct-feat-w: 27%;
    --lct-feat-min: 210px;
    --lct-col-min: 112px;
    max-width: 1120px;
}
:root[data-theme="dark"] .lct { --lct-on-ok: #0b1f17; --lct-edge: rgba(0, 0, 0, .55); }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme]) .lct { --lct-on-ok: #0b1f17; --lct-edge: rgba(0, 0, 0, .55); }
}

.lct__sr {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- Kart + kaydırma kutusu ---------- */
.lct__card {
    position: relative;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--lct-radius);
    box-shadow: var(--shadow-md);
    overflow: hidden;
}
/* Sağ kenar gölgesi: "devamı var" işareti (yalnız taşarken ve sonda değilken) */
.lct__card::after {
    content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 28px; z-index: 6;
    box-shadow: inset -16px 0 16px -16px var(--lct-edge);
    pointer-events: none; opacity: 0; transition: opacity .25s ease;
}
.lct.is-more .lct__card::after { opacity: 1; }

.lct__scroll {
    overflow-x: auto; overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    scroll-padding-left: var(--lct-feat-w);
}
.lct__scroll::-webkit-scrollbar { display: none; }
.lct__scroll:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; border-radius: var(--lct-radius); }

.lct__inner { position: relative; min-width: 100%; }

.lct__table {
    position: relative; z-index: 1;
    width: 100%;
    min-width: calc(var(--lct-feat-min) + var(--lct-cols) * var(--lct-col-min));
    border-collapse: separate; border-spacing: 0;
    table-layout: fixed;
}

/* ---------- LikedWin spot kartı ---------- */
.lct__spot {
    position: absolute; z-index: 0;
    top: 8px; bottom: 8px;
    left: calc(var(--lct-sx, 0px) + 5px);
    width: calc(var(--lct-sw, 0px) - 10px);
    border-radius: 16px;
    background: var(--ok-bg);
    border: 1px solid var(--ok-line);
    box-shadow: var(--shadow-md);
    transform-origin: 50% 0;
    display: none;
}
.lct__spot::before {   /* üst şerit */
    content: ""; position: absolute; left: 18px; right: 18px; top: -1px; height: 4px;
    border-radius: 0 0 4px 4px; background: var(--ok-fg);
}
.lct.has-spot .lct__spot { display: block; }

/* ---------- Hücreler (ortak) ---------- */
.lct__table th,
.lct__table td {
    padding: var(--lct-pad-y) var(--lct-pad-x);
    text-align: left; vertical-align: middle;
    background-clip: padding-box;
}
.lct__table tbody tr + tr > *,
.lct__table tfoot tr > * { border-top: 1px solid var(--line); }

/* Özellik sütunu — yatay kaydırmada sabit */
.lct__feat {
    position: sticky; left: 0; z-index: 3;
    width: var(--lct-feat-w);
    background: var(--surface);
    transition: background-color var(--ease), box-shadow .25s ease;
}
.lct.is-overflow .lct__feat { box-shadow: 1px 0 0 var(--line); }
.lct.is-scrolled .lct__feat { box-shadow: 1px 0 0 var(--line), 12px 0 16px -14px var(--lct-edge); }

.lct__feat-in { display: flex; align-items: center; gap: 12px; }
.lct__ico {
    flex: none; display: grid; place-items: center;
    width: 34px; height: 34px; border-radius: 10px;
    background: var(--brand-soft); color: var(--brand); font-size: 14px;
    transition: background-color var(--ease), color var(--ease), transform .35s var(--lct-pop);
}
.lct__ico--sum { background: var(--warn-bg); color: var(--warn-fg); }
.lct__feat-t {
    font-size: 15px; font-weight: 700; line-height: 1.3; color: var(--ink);
    letter-spacing: -.005em;
}

/* Başlık satırı */
.lct__table thead th {
    padding-top: 26px; padding-bottom: 20px;
    vertical-align: bottom;
}
.lct__feat--head { z-index: 4; }
.lct__feat-lbl {
    display: block;
    font-size: 11.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
    color: var(--muted);
}
.lct__feat-n { display: block; margin-top: 4px; font-size: 13px; font-weight: 600; color: var(--muted-2); }

.lct__col { position: relative; }
.lct__badge {
    display: inline-flex; align-items: center; gap: 6px;
    margin-bottom: 10px; padding: 5px 10px 5px 9px; border-radius: 999px;
    background: var(--ok-fg); color: var(--lct-on-ok);
    font-size: 10.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
    line-height: 1;
}
.lct__badge i { font-size: 10px; }
.lct__brand {
    display: flex; align-items: center; gap: 9px;
    font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
    font-size: clamp(17px, 1.8vw, 21px); font-weight: 800; letter-spacing: -.02em;
    color: var(--ink);
}
.lct__logo { width: 1.05em; height: 1.05em; flex: none; color: var(--ok-fg); }
.lct__rival { display: flex; align-items: center; gap: 10px; }
.lct__rival-ico {
    flex: none; display: grid; place-items: center;
    width: 32px; height: 32px; border-radius: 10px;
    background: var(--surface-2); border: 1px solid var(--line);
    color: var(--muted-2); font-size: 13px;
}
.lct__rival-t {
    font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
    font-size: 16px; font-weight: 800; letter-spacing: -.01em; line-height: 1.2;
    color: var(--muted);
}
.lct__more {
    display: inline-flex; align-items: center; gap: 6px;
    margin-top: 8px; font-size: 12.5px; font-weight: 700; color: var(--brand);
}
.lct__more i { font-size: 10px; transition: transform var(--ease); }
.lct__more:hover i { transform: translateX(3px); }

/* Değer hücreleri */
.lct__cell { position: relative; }
.lct__cell-in { display: flex; align-items: flex-start; gap: 12px; }
.lct__txt {
    min-width: 0; padding-top: 2px;
    font-size: 15px; font-weight: 600; line-height: 1.45; color: var(--muted);
}
.lct__cell--win .lct__txt { color: var(--ink); }

/* LikedWin sütununda satır çizgileri spot kartın içinde kalsın */
.lct.has-spot .lct__table tbody tr + tr > .lct__cell--win,
.lct.has-spot .lct__table tfoot tr > .lct__cell--win { border-top-color: transparent; }
.lct.has-spot .lct__table tbody tr + tr > .lct__cell--win::before,
.lct.has-spot .lct__table tfoot tr > .lct__cell--win::before {
    content: ""; position: absolute; top: -1px; left: 20px; right: 20px; height: 1px;
    background: var(--ok-line);
}
/* JS yoksa: klasik zemin vurgusu */
.lct:not(.has-spot) .lct__cell--win,
.lct:not(.has-spot) .lct__col--win { background: var(--ok-bg); }
.lct:not(.has-spot) .lct__col--win { box-shadow: inset 0 3px 0 var(--ok-fg); }

/* İşaret modu: ortalı rozetler */
.lct--mark .lct__col,
.lct--mark .lct__cell { text-align: center; }
.lct--mark .lct__cell-in { justify-content: center; }
.lct--mark .lct__rival { flex-direction: column; gap: 8px; }
.lct--mark .lct__rival-t { font-size: 14px; }
.lct--mark .lct__brand { justify-content: center; font-size: clamp(16px, 1.6vw, 19px); }
.lct--mark .lct__feat-t { font-size: 14.5px; }
.lct--mark .lct__ico { width: 30px; height: 30px; border-radius: 9px; font-size: 13px; }
.lct--mark .lct__table tbody td,
.lct--mark .lct__table tbody th { padding-top: 13px; padding-bottom: 13px; }

/* ---------- İşaret rozetleri (çizilerek beliren SVG) ---------- */
.lct__mk {
    position: relative; flex: none;
    display: inline-grid; place-items: center;
    width: 26px; height: 26px; border-radius: 50%;
    transition: transform .35s var(--lct-pop);
}
.lct--mark .lct__table .lct__mk { width: 30px; height: 30px; }
.lct__mk svg {
    width: 62%; height: 62%;
    fill: none; stroke: currentColor; stroke-width: 2.8;
    stroke-linecap: round; stroke-linejoin: round;
}
.lct__mk--yes  { background: var(--ok-fg);  color: var(--lct-on-ok); }
.lct__mk--no   { background: var(--err-bg); color: var(--err-fg); box-shadow: inset 0 0 0 1px var(--err-line); }
.lct__mk--part { background: var(--warn-bg); color: var(--warn-fg); box-shadow: inset 0 0 0 1px var(--warn-line); }

/* ---------- Skor satırı ---------- */
.lct__table tfoot th,
.lct__table tfoot td { padding-top: 18px; padding-bottom: 22px; }
.lct__sum { display: flex; flex-direction: column; gap: 9px; max-width: 220px; }
.lct--mark .lct__sum { margin: 0 auto; align-items: center; max-width: 92px; }
.lct__sum-v {
    display: flex; align-items: baseline; gap: 2px;
    font-family: 'Plus Jakarta Sans', 'Inter', sans-serif; line-height: 1;
}
.lct__sum-v b { font-size: 24px; font-weight: 800; letter-spacing: -.02em; color: var(--muted); font-variant-numeric: tabular-nums; }
.lct__sum-v small { font-size: 14px; font-weight: 700; color: var(--muted-2); }
.lct__cell--win .lct__sum-v b { color: var(--ok-fg); }
.lct__bar {
    display: block; width: 100%; height: 6px; border-radius: 99px;
    background: var(--line); overflow: hidden;
}
.lct__bar span {
    display: block; height: 100%; width: var(--p); border-radius: inherit;
    background: var(--muted-2);
}
.lct__cell--win .lct__bar { background: var(--ok-line); }
.lct__cell--win .lct__bar span { background: var(--ok-fg); }

/* ---------- Lejant ---------- */
.lct__legend {
    display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 22px;
    padding: 14px 18px; border-top: 1px solid var(--line); background: var(--surface-2);
    font-size: 12.5px; font-weight: 600; color: var(--muted);
}
.lct__legend > span { display: inline-flex; align-items: center; gap: 8px; }
.lct__legend .lct__mk { width: 20px; height: 20px; }

/* ---------- Satır üzerine gelme (fare) ---------- */
@media (hover: hover) {
    .lct__table tbody tr:hover > .lct__feat,
    .lct__table tbody tr:hover > .lct__cell:not(.lct__cell--win) { background-color: var(--surface-2); }
    .lct__table tbody tr:hover .lct__ico { background: var(--brand); color: #fff; transform: rotate(-6deg) scale(1.06); }
    .lct__table tbody tr:hover .lct__cell--win .lct__mk { transform: scale(1.14); }
    .lct__table tbody tr:hover .lct__cell:not(.lct__cell--win) .lct__txt { color: var(--text); }
}

/* ---------- Kaydırma denetimi ---------- */
.lct__nav {
    display: flex; align-items: center; gap: 14px;
    margin-top: 14px; padding: 0 4px;
}
.lct__nav[hidden] { display: none; }
.lct__hint {
    display: inline-flex; align-items: center; gap: 8px; flex: none;
    font-size: 12.5px; font-weight: 700; color: var(--muted);
    transition: opacity .3s ease, width .3s ease;
}
.lct__hint i { color: var(--brand); animation: lct-swipe 1.8s ease-in-out infinite; }
.lct.is-touched .lct__hint i { animation: none; }
.lct__track {
    position: relative; flex: 1; height: 4px; border-radius: 99px;
    background: var(--line); overflow: hidden;
}
.lct__track span {
    position: absolute; top: 0; left: 0; height: 100%;
    width: var(--lct-tw, 40%);
    border-radius: inherit; background: var(--brand);
    transform: translateX(var(--lct-tx, 0px));
}
.lct__btns { display: inline-flex; gap: 8px; flex: none; }
.lct__btn {
    display: grid; place-items: center;
    width: 36px; height: 36px; border-radius: 50%;
    border: 1px solid var(--line-strong); background: var(--surface);
    color: var(--ink); font-size: 12px; cursor: pointer;
    box-shadow: var(--shadow-sm);
    transition: background-color var(--ease), color var(--ease), border-color var(--ease), transform .15s ease, opacity var(--ease);
}
.lct__btn:hover:not(:disabled) { background: var(--brand); border-color: var(--brand); color: #fff; }
.lct__btn:active:not(:disabled) { transform: scale(.92); }
.lct__btn:disabled { opacity: .38; cursor: default; box-shadow: none; }
.lct__btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

@keyframes lct-swipe {
    0%, 100% { transform: translateX(0) rotate(0); }
    45%      { transform: translateX(-6px) rotate(-12deg); }
    70%      { transform: translateX(2px) rotate(4deg); }
}

/* =====================================================================
   GİRİŞ ANİMASYONU
   .is-armed (satır içi betik, ilk boyamadan önce) → gizli başlangıç;
   .is-in (görünür olunca) → sahne oynar. Hareketi azalt açıksa .is-armed
   hiç eklenmez, tablo doğrudan son hâliyle görünür.
   ===================================================================== */
.lct.is-armed .lct__card { opacity: 0; transform: translateY(22px); }
.lct.is-armed .lct__spot { transform: scaleY(0); opacity: 0; }
.lct.is-armed .lct__table thead th > * { opacity: 0; transform: translateY(-8px); }
.lct.is-armed .lct__feat-in,
.lct.is-armed .lct__txt { opacity: 0; transform: translateX(-10px); }
.lct.is-armed .lct__table .lct__mk { opacity: 0; transform: scale(.35); }
.lct.is-armed .lct__table .lct__mk path { stroke-dasharray: 1; stroke-dashoffset: 1; }
.lct.is-armed .lct__bar span { width: 0; }
.lct.is-armed .lct__sum-v { opacity: 0; }

.lct.is-in .lct__card {
    opacity: 1; transform: none;
    transition: opacity .6s ease, transform .7s var(--lct-ease);
}
.lct.is-in .lct__spot {
    opacity: 1; transform: none;
    transition: transform .8s var(--lct-ease) .18s, opacity .3s ease .18s;
}
.lct.is-in .lct__table thead th > * {
    opacity: 1; transform: none;
    transition: opacity .45s ease, transform .55s var(--lct-ease);
    transition-delay: calc(220ms + var(--c, -1) * 90ms + 90ms);
}
.lct.is-in .lct__feat-in,
.lct.is-in .lct__txt {
    opacity: 1; transform: none;
    transition: opacity .45s ease, transform .55s var(--lct-ease);
    transition-delay: calc(380ms + var(--r, 0) * 70ms + var(--c, -1) * 90ms + 90ms);
}
.lct.is-in .lct__table .lct__mk {
    opacity: 1; transform: none;
    transition: opacity .25s ease, transform .5s var(--lct-pop);
    transition-delay: calc(420ms + var(--r, 0) * 70ms + var(--c, 0) * 110ms);
}
.lct.is-in .lct__table .lct__mk path {
    stroke-dashoffset: 0;
    transition: stroke-dashoffset .42s cubic-bezier(.65, 0, .35, 1);
    transition-delay: calc(560ms + var(--r, 0) * 70ms + var(--c, 0) * 110ms);
}
.lct.is-in .lct__table .lct__mk path + path { transition-delay: calc(700ms + var(--r, 0) * 70ms + var(--c, 0) * 110ms); }
.lct.is-in .lct__sum-v { opacity: 1; transition: opacity .4s ease calc(var(--lct-tally-at, 1100ms) + var(--c, 0) * 110ms); }
.lct.is-in .lct__bar span {
    width: var(--p);
    transition: width 1.1s var(--lct-ease) calc(var(--lct-tally-at, 1100ms) + var(--c, 0) * 110ms);
}
/* Sahne bitince (JS .is-done ekler) hover geçişleri gecikmesiz çalışsın */
.lct.is-done .lct__table .lct__mk { transition: transform .35s var(--lct-pop); transition-delay: 0s; }
.lct.is-done .lct__ico { transition-delay: 0s; }

/* ---------- Responsive: mobilde yana kaydır ---------- */
@media (max-width: 760px) {
    .lct {
        /* özellik + LikedWin sütunu ekrana sığar, rakip sütun kenardan
           ~20px "göz atar" → yana kaydırılabildiği ilk bakışta anlaşılır */
        --lct-feat-w: 134px;
        --lct-feat-min: 134px;
        --lct-col-min: 178px;
        --lct-pad-x: 13px;
        --lct-pad-y: 14px;
        --lct-radius: 18px;
    }
    .lct--mark {
        /* özellik + LikedWin + ilk rakip sığar, ikinci rakip kenardan göz atar */
        --lct-feat-w: 140px;
        --lct-feat-min: 140px;
        --lct-col-min: 88px;
    }
    .lct__scroll { scroll-snap-type: x mandatory; }
    .lct__col, .lct__table thead th.lct__col { scroll-snap-align: start; }
    .lct__table { width: calc(var(--lct-feat-min) + var(--lct-cols) * var(--lct-col-min)); min-width: 100%; }

    .lct__table thead th { padding-top: 18px; padding-bottom: 14px; }
    .lct__feat-in { gap: 8px; }
    .lct__ico { width: 26px; height: 26px; border-radius: 8px; font-size: 11px; }
    .lct__feat-t { font-size: 12.5px; line-height: 1.28; }
    .lct--mark .lct__ico { width: 24px; height: 24px; border-radius: 7px; font-size: 10.5px; }
    .lct--mark .lct__feat-t { font-size: 12.5px; }

    .lct__badge { margin-bottom: 7px; font-size: 9.5px; padding: 4px 8px; }
    .lct__brand { font-size: 16px; gap: 7px; }
    .lct__rival { gap: 8px; }
    .lct__rival-ico { width: 26px; height: 26px; border-radius: 8px; font-size: 11px; }
    .lct__rival-t { font-size: 14px; }
    .lct--mark .lct__rival-t { font-size: 12.5px; }
    .lct__feat-lbl { font-size: 10.5px; }
    .lct__feat-n { font-size: 12px; }

    .lct--mark .lct__table .lct__col,
    .lct--mark .lct__table .lct__cell { padding-left: 6px; padding-right: 6px; }
    .lct--mark .lct__table .lct__feat { padding-left: 12px; padding-right: 10px; }
    .lct--mark .lct__brand { flex-direction: column; gap: 5px; font-size: 13.5px; }
    .lct--mark .lct__badge { font-size: 8.5px; padding: 4px 7px; letter-spacing: .06em; }
    .lct--mark .lct__badge i { display: none; }
    .lct--mark .lct__rival { gap: 6px; }
    .lct--mark .lct__rival-ico { width: 24px; height: 24px; border-radius: 7px; font-size: 10.5px; }
    .lct--mark .lct__rival-t { font-size: 12px; text-wrap: balance; }
    .lct--mark .lct__more { margin-top: 6px; font-size: 11.5px; }
    .lct--mark .lct__sum-v b { font-size: 18px; }
    .lct--mark .lct__sum-v small { font-size: 12px; }

    .lct__cell-in { gap: 9px; }
    .lct__txt { font-size: 13px; line-height: 1.38; padding-top: 1px; }
    .lct__mk { width: 22px; height: 22px; }
    .lct--mark .lct__table .lct__mk { width: 26px; height: 26px; }
    .lct__sum-v b { font-size: 20px; }
    .lct__legend { gap: 8px 14px; font-size: 11.5px; }

    .lct__spot { top: 6px; bottom: 6px; left: calc(var(--lct-sx, 0px) + 3px); width: calc(var(--lct-sw, 0px) - 6px); border-radius: 13px; }
    .lct.has-spot .lct__table tbody tr + tr > .lct__cell--win::before,
    .lct.has-spot .lct__table tfoot tr > .lct__cell--win::before { left: 13px; right: 13px; }
}

@media (prefers-reduced-motion: reduce) {
    .lct *, .lct *::before, .lct *::after { transition: none !important; animation: none !important; }
}