/* Kafkas: favourites, comparison, and small site-wide touches (nav icon, reading bar). */

/* ---- Toggle buttons ------------------------------------------------------ */
.kafkas-list-btn { background: #f8fafc; color: #64748b; box-shadow: inset 0 0 0 1px #e2e8f0; transition: background .15s, color .15s, box-shadow .15s, transform .15s; -webkit-tap-highlight-color: transparent; }
.kafkas-list-btn:hover { background: #fff; color: #0f172a; box-shadow: inset 0 0 0 1px #cbd5e1; }
.kafkas-list-btn:active { transform: scale(.9); }
.kafkas-list-btn[data-fav].is-on { background: #fff1f2; color: #e11d48; box-shadow: inset 0 0 0 1px #fecdd3; }
.kafkas-list-btn[data-fav].is-on svg { fill: currentColor; }
.kafkas-list-btn[data-compare].is-on { background: #e0f2fe; color: #0369a1; box-shadow: inset 0 0 0 1px #bae6fd; }
.kafkas-list-btn.is-pop svg { animation: kafkasListPop .35s ease-out; }
@keyframes kafkasListPop { 0% { transform: scale(1); } 45% { transform: scale(1.45); } 100% { transform: scale(1); } }
/* On the coloured product header */
.kafkas-list-btns--hero .kafkas-list-btn { background: rgba(255, 255, 255, .1); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25); }
.kafkas-list-btns--hero .kafkas-list-btn:hover { background: rgba(255, 255, 255, .2); color: #fff; }
.kafkas-list-btns--hero .kafkas-list-btn[data-fav].is-on { background: #fff; color: #e11d48; }
.kafkas-list-btns--hero .kafkas-list-btn[data-compare].is-on { background: #fff; color: #0369a1; }
@media (max-width: 639px) {
    html body .product-card .kafkas-list-btn { width: 1.75rem; height: 1.75rem; }
    html body .product-card .kafkas-list-btns { gap: .25rem; }
}

/* ---- List pages ---------------------------------------------------------- */
[data-list-body].is-loading { opacity: .5; pointer-events: none; transition: opacity .2s; }
html body ul.products.kafkas-fav-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .625rem; margin: 0; padding: 0; list-style: none; }
@media (min-width: 640px) { html body ul.products.kafkas-fav-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; } }
@media (min-width: 1280px) { html body ul.products.kafkas-fav-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ---- Comparison ---------------------------------------------------------- */
.kafkas-cmp { border: 1px solid #e2e8f0; border-radius: 1rem; background: #fff; box-shadow: 0 1px 2px rgba(15, 23, 42, .05); overflow: hidden; }
.kafkas-cmp__scroll { overflow-x: auto; overscroll-behavior-x: contain; }
.kafkas-cmp__grid { display: grid; grid-template-columns: 13rem repeat(var(--kafkas-cmp-n), minmax(13rem, 1fr)); min-width: calc(13rem * (var(--kafkas-cmp-n) + 1)); }
.kafkas-cmp__label { position: sticky; left: 0; z-index: 2; display: flex; align-items: center; padding: .85rem 1rem; background: #f8fafc; border-right: 1px solid #e2e8f0; font-size: .75rem; font-weight: 800; letter-spacing: .02em; color: #475569; }
.kafkas-cmp__corner { flex-direction: column; align-items: flex-start; justify-content: flex-end; }
.kafkas-cmp__row { border-top: 1px solid #f1f5f9; }
.kafkas-cmp__row:nth-child(odd) .kafkas-cmp__value { background: #fcfdfe; }
.kafkas-cmp__value { padding: .85rem 1rem; font-size: .875rem; font-weight: 600; line-height: 1.45; color: #0f172a; border-right: 1px solid #f1f5f9; }
.kafkas-cmp__value.is-empty { color: #cbd5e1; font-weight: 400; }
.kafkas-cmp__row:not(.is-same) .kafkas-cmp__value:not(.is-empty) { color: #0369a1; }
.kafkas-cmp.is-diff .kafkas-cmp__row.is-same { display: none; }
.kafkas-cmp__product { position: relative; display: flex; flex-direction: column; padding: 1rem; border-right: 1px solid #f1f5f9; }
.kafkas-cmp__remove { position: absolute; right: .6rem; top: .6rem; z-index: 1; display: flex; width: 1.75rem; height: 1.75rem; align-items: center; justify-content: center; border-radius: 999px; background: #f1f5f9; color: #64748b; transition: background .15s, color .15s; }
.kafkas-cmp__remove:hover { background: #fee2e2; color: #dc2626; }
.kafkas-cmp__image { position: relative; display: block; height: 11rem; border: 1px solid #e2e8f0; border-radius: .875rem; background: #fff; overflow: hidden; }
.kafkas-cmp__image img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: .75rem; }
html body .kafkas-cmp__name { margin-top: .75rem; display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .8125rem; font-weight: 700; line-height: 1.25rem; color: #0f172a; }
html body .kafkas-cmp__name:hover { color: #0284c7; }
.kafkas-cmp__price { margin: .4rem 0 0; font-size: .95rem; font-weight: 900; color: #0f172a; }
.kafkas-cmp__price.is-quote { font-size: .75rem; font-weight: 700; color: #0284c7; }
.kafkas-cmp__add { margin-top: .75rem; display: flex; align-items: center; justify-content: center; gap: .4rem; border-radius: .75rem; background: #0f172a; padding: .6rem .5rem; font-size: .75rem; font-weight: 800; color: #fff; transition: background .15s; }
.kafkas-cmp__add:hover { background: #334155; }

/* Phones: two products per screen, the row name becomes a strip above its values. */
@media (max-width: 767px) {
    .kafkas-cmp { border-radius: .875rem; }
    .kafkas-cmp__scroll { scroll-snap-type: x proximity; }
    .kafkas-cmp__grid { grid-template-columns: repeat(var(--kafkas-cmp-n), 44vw); width: max-content; min-width: 100%; }
    .kafkas-cmp__product { scroll-snap-align: start; }
    .kafkas-cmp__image { height: 8.5rem; }
    .kafkas-cmp__label { grid-column: 1 / -1; justify-self: start; left: 0; width: calc(100vw - 2rem - 2px); box-sizing: border-box; padding: .4rem .75rem; border-right: 0; background: #f1f5f9; font-size: .6875rem; text-transform: uppercase; letter-spacing: .05em; }
    .kafkas-cmp__corner { flex-direction: row; align-items: center; justify-content: space-between; gap: .75rem; padding: .625rem .75rem; text-transform: none; letter-spacing: 0; }
    .kafkas-cmp__corner label { margin-top: 0; white-space: nowrap; }
    .kafkas-cmp__value { padding: .625rem .75rem; font-size: .8125rem; }
    .kafkas-cmp__product { padding: .75rem; }
}

/* ---- Header: the solution finder icon twinkles --------------------------- */
#kafkas-navbar a[href*="akilli-cozum-bulucu"] svg { transform-origin: center; animation: kafkasFinderStar 2.6s ease-in-out infinite; }
#kafkas-navbar a[href*="akilli-cozum-bulucu"]:hover svg { animation-duration: 1s; }
@keyframes kafkasFinderStar {
    0%, 55%, 100% { transform: rotate(0) scale(1); filter: drop-shadow(0 0 0 rgba(14, 165, 233, 0)); }
    65% { transform: rotate(-14deg) scale(1.25); filter: drop-shadow(0 0 5px rgba(14, 165, 233, .7)); }
    78% { transform: rotate(10deg) scale(1.12); filter: drop-shadow(0 0 3px rgba(14, 165, 233, .45)); }
    90% { transform: rotate(0) scale(1); }
}

/* ---- Blog: cover pictures fill their frame ------------------------------- */
html body .kafkas-cover img, html body img.kafkas-cover { width: 100%; height: 100%; object-fit: cover; object-position: center; padding: 0; }

/* ---- Blog post: reading bar and contents --------------------------------- */
#kafkas-reading-bar { position: fixed; left: 0; top: 0; z-index: 10050; width: 100%; height: 4px; background: transparent; pointer-events: none; }
#kafkas-reading-bar > span { display: block; height: 100%; width: 0; border-radius: 0 999px 999px 0; background: linear-gradient(90deg, #0284c7, #22d3ee); transition: width .1s linear; }
.kafkas-toc a { display: block; padding: .4rem .75rem; border-left: 2px solid #e2e8f0; font-size: .8125rem; font-weight: 600; line-height: 1.35; color: #64748b; transition: color .15s, border-color .15s; }
.kafkas-toc a:hover { color: #0f172a; }
.kafkas-toc a.is-sub { padding-left: 1.5rem; font-weight: 500; }
.kafkas-toc a.is-active { border-left-color: #0284c7; color: #0369a1; font-weight: 700; }
html body .kafkas-post .kafkas-prose { font-size: 1.0625rem; }
html body .kafkas-post .kafkas-prose h2 { margin-top: 2.5rem; scroll-margin-top: 11rem; }
html body .kafkas-post .kafkas-prose h3 { scroll-margin-top: 11rem; }
html body .kafkas-post .kafkas-prose img { border-radius: 1rem; }
html body .kafkas-post .kafkas-prose blockquote { margin: 1.5rem 0; padding: 1rem 1.25rem; border-left: 4px solid #0ea5e9; border-radius: 0 .75rem .75rem 0; background: #f0f9ff; color: #0c4a6e; font-style: normal; }
html body .kafkas-post .kafkas-prose table { display: block; overflow-x: auto; }

@media (prefers-reduced-motion: reduce) {
    #kafkas-navbar a[href*="akilli-cozum-bulucu"] svg, .kafkas-list-btn.is-pop svg { animation: none; }
}

/* ---- Home cards: actions appear on hover --------------------------------- */
.kafkas-card-actions > div { opacity: 0; transform: translateY(.5rem); transition: opacity .2s ease, transform .2s ease; }
.group\/item:hover .kafkas-card-actions > div, .group\/item:focus-within .kafkas-card-actions > div { opacity: 1; transform: none; }
/* Touch screens have no hover: the actions stay visible, compact. */
@media (hover: none) {
    .kafkas-card-actions > div { opacity: 1; transform: none; gap: .25rem; padding: .25rem; }
    html body .kafkas-card-actions .kafkas-list-btn, html body .kafkas-card-actions [data-add-to-cart] { width: 1.75rem; height: 1.75rem; padding: 0; }
}

/* ---- Counters on the favourites / comparison icons: number dead centre ---- */
html body [data-list-badge]:not(.hidden) { display: flex; align-items: center; justify-content: center; box-sizing: border-box; padding: 0 .25rem; line-height: 1 !important; text-align: center; font-variant-numeric: tabular-nums; }

/* ---- Home category table: every brand mark in one colour ------------------ */
img.kafkas-brand-mark { filter: brightness(0); opacity: .72; transition: opacity .2s; }
span.kafkas-brand-mark { color: #000; opacity: .72; line-height: 1; transition: opacity .2s; }
.kafkas-cat-cell:hover .kafkas-brand-mark, .group\/brand:hover .kafkas-brand-mark { opacity: 1; }

/* ---- Main menu: logo links -------------------------------------------------
   A link with a logo reads as text. Hovering or focusing it, or being on its
   page, swaps the text for the logo in its own colours. Text and logo share
   one grid cell as wide as the wider of the two, so the menu never shifts. */
#kafkas-navbar a.kafkas-nav-logo img { display: block; height: 1rem; width: auto; max-width: 3.9rem; object-fit: contain; }
#kafkas-navbar .kafkas-nav-logo__swap { display: inline-grid; align-items: center; justify-items: center; }
#kafkas-navbar .kafkas-nav-logo__swap > * { grid-area: 1 / 1; transition: opacity .2s ease, transform .2s ease; }
#kafkas-navbar .kafkas-nav-logo__swap img { opacity: 0; transform: scale(.94); }
#kafkas-navbar a.kafkas-nav-logo:hover .kafkas-nav-logo__swap img, #kafkas-navbar a.kafkas-nav-logo:focus-visible .kafkas-nav-logo__swap img, #kafkas-navbar a.kafkas-nav-logo.is-active .kafkas-nav-logo__swap img { opacity: 1; transform: none; }
#kafkas-navbar a.kafkas-nav-logo:hover .kafkas-nav-logo__text, #kafkas-navbar a.kafkas-nav-logo:focus-visible .kafkas-nav-logo__text, #kafkas-navbar a.kafkas-nav-logo.is-active .kafkas-nav-logo__text { opacity: 0; }
@media (prefers-reduced-motion: reduce) { #kafkas-navbar .kafkas-nav-logo__swap > * { transition: none; } }
/* The page of the logo is open: the logo stays, with a line under it. */
#kafkas-navbar a.kafkas-nav-logo.is-active { position: relative; }
#kafkas-navbar a.kafkas-nav-logo.is-active::after { content: ""; position: absolute; left: .375rem; right: .375rem; bottom: .375rem; height: 2px; border-radius: 2px; background: currentColor; opacity: .55; }

/* Comparison: a vehicle type the product fits */
html body .kafkas-cmp__yes { display: inline-flex; align-items: center; gap: .35rem; color: #047857; font-weight: 700; }
.kafkas-cmp__yes svg { width: .9rem; height: .9rem; flex: none; }

/* A logo that always keeps its own colours (badge with a filled background) */
#kafkas-navbar a.kafkas-nav-logo.is-colour img { filter: none; height: 1.375rem; max-width: 6rem; border-radius: .25rem; }

/* Main menu from 1440 px up: the logo links are shown. The bar sits in a fixed-width container,
   so the room is the same on every wider screen and the links sit a little closer. */
@media (min-width: 1440px) {
    html body #kafkas-navbar nav { gap: 0; }
    html body #kafkas-navbar nav > a, html body #kafkas-navbar nav > div > a { padding-left: .4rem; padding-right: .9rem; }
    html body #kafkas-navbar a.kafkas-nav-logo.is-colour img { height: 1.25rem; max-width: 5rem; }
}

/* ---- Alert box (favourites, comparison, cart) -------------------------------
   Sized by its content and pinned to the bottom centre. Position and size are
   set here with a strong selector: a general rule on fixed elements used to
   stretch the box over the whole screen and push the message out of view.
   Hidden, it takes no clicks. Phones: template-parts/mobile-tabbar.php lifts
   it above the tab bar. */
html body #kafkas-toast { position: fixed; inset: auto auto 1.5rem 50%; z-index: 10060; width: calc(100% - 2rem); max-width: 27rem; height: auto; margin: 0; padding: 0; opacity: 0; visibility: hidden; pointer-events: none; transform: translate(-50%, .75rem); transition: opacity .22s ease, transform .22s ease, visibility 0s linear .22s; }
html body #kafkas-toast.is-open { opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%, 0); transition: opacity .22s ease, transform .22s ease, visibility 0s; }
.kafkas-alert { display: flex; align-items: center; gap: .75rem; padding: .75rem .625rem .75rem .75rem; border: 1px solid #e2e8f0; border-radius: 1rem; background: #fff; box-shadow: 0 20px 45px -14px rgba(15, 23, 42, .38), 0 2px 6px rgba(15, 23, 42, .06); color: #0f172a; font-size: .875rem; font-weight: 700; line-height: 1.25rem; }
.kafkas-alert__icon { display: flex; flex: none; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; border-radius: .75rem; background: #ecfdf5; color: #059669; }
.kafkas-alert__icon svg { width: 1.125rem; height: 1.125rem; }
.kafkas-alert.is-fav .kafkas-alert__icon { background: #fff1f2; color: #e11d48; }
.kafkas-alert.is-cmp .kafkas-alert__icon { background: #e0f2fe; color: #0369a1; }
.kafkas-alert.is-off .kafkas-alert__icon { background: #f1f5f9; color: #64748b; }
.kafkas-alert.is-error { border-color: #fecaca; }
.kafkas-alert.is-error .kafkas-alert__icon { background: #fef2f2; color: #dc2626; }
.kafkas-alert__text { flex: 1 1 auto; min-width: 0; }
.kafkas-alert__link { flex: none; padding: .4rem .75rem; border-radius: .625rem; background: #0284c7; color: #fff; font-size: .75rem; font-weight: 800; white-space: nowrap; transition: background-color .15s; }
.kafkas-alert__link:hover { background: #0369a1; color: #fff; }
.kafkas-alert__close { display: flex; flex: none; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: .625rem; color: #94a3b8; transition: background-color .15s, color .15s; }
.kafkas-alert__close:hover { background: #f1f5f9; color: #0f172a; }
.kafkas-alert__close svg { width: .875rem; height: .875rem; }
@media (prefers-reduced-motion: reduce) { html body #kafkas-toast, html body #kafkas-toast.is-open { transition: none; transform: translate(-50%, 0); } }