/*
 * Urun karsilastirma: kart uzerindeki dugme, urun listesinin altindaki
 * karsilastirma cubugu ve /karsilastir sayfasinin tablosu.
 *
 * Marka renkleri style.css'teki :root degiskenlerinden gelir
 * (--dikkan-color, --dikkan-antrasit-color); burada YENIDEN TANIMLANMAZ ki
 * marka rengi tek yerden degistirilebilsin (finder.css / product-filter-bar.css
 * ile ayni kural).
 *
 * Ikonlar projede zaten yuklu Line Awesome setinden gelir; bu dosya hicbir dis
 * font/ikon kaynagi cagirmaz.
 */

/* ------------------------------------------------------------------ *
 * 1) Kart uzerindeki karsilastirma dugmesi
 * ------------------------------------------------------------------ */

/* Dugme kart gorselinin ustunde durur. Gorselin tamami detay sayfasina giden
   bir baglantiyla kapli oldugu icin z-index sart: aksi halde tiklama
   .all_product_hover katmanina gider. */
/* Cerceveli bir hap degil, isaret kutucugu + her zaman
   gorunen "Compare" yazisi. */
.compare-toggle {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 2px 0;
    border: 0;
    background: transparent;
    color: var(--dikkan-antrasit-color);
    font-size: 11px;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition: color 0.15s;
}

.compare-toggle__box {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    border: 1.5px solid #9aa0a6;
    border-radius: 3px;
    background: #fff;
    color: #fff;
    transition: border-color 0.15s, background-color 0.15s;
}

.compare-toggle__box i {
    font-size: 11px;
    opacity: 0;
}

.compare-toggle:hover .compare-toggle__box {
    border-color: var(--dikkan-color);
}

/* Dugmeye BASILIR BASILMAZ kutucuk dolar: kullanici henuz hicbir varyant
   isaretlememis olsa da kartin karsilastirma kipinde oldugu ilk tiklamada
   gorunmeli. Ayni gorunum secim yapildiginda da surer (.is-selected). */
.compare-toggle.is-comparing,
.compare-toggle.is-selected {
    color: var(--dikkan-color);
}

.compare-toggle.is-comparing .compare-toggle__box,
.compare-toggle.is-selected .compare-toggle__box {
    border-color: var(--dikkan-color);
    background: var(--dikkan-color);
}

.compare-toggle.is-comparing .compare-toggle__box i,
.compare-toggle.is-selected .compare-toggle__box i {
    opacity: 1;
}

.compare-toggle.is-disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* ------------------------------------------------------------------ *
 * 2) Karsilastirma cubugu (urun listesinin alti)
 * ------------------------------------------------------------------ */

/* Ekranin altina SABITLENIR (sticky degil): cubuk sonuc listesinin altindaki
   normal akista dursa, kullanici uzun listenin ortasinda urun secerken
   "Karsilastir" dugmesi ekranin cok altinda kalirdi.
   z-index cerez onay bandinin (footer.blade.php, z-index 99999) ALTINDA
   tutulur - yasal bildirim hicbir sekilde kapatilmamali. */
.compare-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
    background: #fff;
    border-top: 3px solid var(--dikkan-color);
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.12);
}

.compare-bar[hidden] {
    display: none;
}

/*
 * Sayfayi yukari kaydiran ilerleme dugmesi (backToTop.css -> .progress-wrap)
 * ekranin sag altinda, cubugun kapladigi seritte duruyor ve z-index'i (99)
 * cubugun altinda kaldigi icin cubuk gorunurken kayboluyordu. Cubuk aciksa
 * dugme onun USTUNE alinir; pay, cubugun olculen yuksekliginden gelir
 * (--compare-bar-h, bkz. product-compare.js -> syncScrollTopButton).
 * z-index yine cerez onay bandinin (99999) altindadir.
 */
body.has-compare-bar .progress-wrap {
    bottom: calc(80px + var(--compare-bar-h, 0px));
    z-index: 1001;
}

/* backToTop.css bu genisliklerde dugmeyi 20px'e cekiyor. */
@media (max-width: 991px) {
    body.has-compare-bar .progress-wrap {
        bottom: calc(20px + var(--compare-bar-h, 0px));
    }
}

.compare-bar__inner {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
    max-width: 1300px;
    margin: 0 auto;
    padding: 12px 16px;
}

@media (min-width: 1600px) {
    .compare-bar__inner {
        max-width: 1400px;
    }
}

.compare-bar__title {
    font-size: 13px;
    font-weight: 700;
    color: var(--dikkan-antrasit-color);
    text-transform: uppercase;
}

/* Cubuk sabit yukseklikte kalir: gorunen alan bu viewport'un genisligiyle
   kirpilir, tasan cipler '.compare-bar__more' ile kaydirilir (bkz.
   product-compare.js). 'min-width: 0' flex kapsayicida SART - aksi halde
   flex item icerik genisligi kadar buyumeye direnir ve overflow calismaz. */
.compare-bar__items-viewport {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
}

.compare-bar__items {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 8px;
}

.compare-chip {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    gap: 6px;
    padding: 4px 6px 4px 4px;
    border: 1px solid #e6e6e6;
    border-radius: 4px;
    background: #fafafa;
}

.compare-chip__image {
    width: 26px;
    height: 26px;
    object-fit: contain;
}

.compare-chip__figure {
    font-size: 11px;
    color: var(--dikkan-antrasit-color);
}

.compare-chip__remove,
.compare-bar__clear {
    border: none;
    background: none;
    padding: 0;
    color: var(--dikkan-antrasit-color);
    cursor: pointer;
}

.compare-chip__remove:hover,
.compare-bar__clear:hover {
    color: var(--dikkan-color);
}

.compare-bar__clear {
    font-size: 12px;
    text-decoration: underline;
}

/* Compare sayfasindaki "Daha Fazlasi" oku ile ayni islevi gorur, cubuktaki
   dar alana gore kucuk/yuvarlak bir dugme olarak. Cip listesi tasmiyorsa JS
   bunu gizler (compare sayfasinda pencere 1 taneyse gizlenmesiyle ayni). */
.compare-bar__more {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    border: 1px solid #e3e3e3;
    border-radius: 50%;
    background: #fff;
    color: var(--dikkan-color);
    font-size: 14px;
    cursor: pointer;
}

.compare-bar__more:hover {
    border-color: var(--dikkan-color);
}

.compare-bar__more[hidden] {
    display: none;
}

.compare-bar__actions {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-left: auto;
}

.compare-bar__hint {
    margin: 0;
    font-size: 11px;
    line-height: 1.3;
    color: var(--dikkan-antrasit-color);
    max-width: 200px;
}

.compare-bar__submit {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 18px;
    background: var(--dikkan-color);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}

.compare-bar__submit:hover {
    color: #fff;
    opacity: 0.9;
}

.compare-bar__submit.is-disabled {
    background: #c7c7c7;
    cursor: not-allowed;
}

/* ------------------------------------------------------------------ *
 * 3) Karsilastirma sayfasi
 * ------------------------------------------------------------------ */

.product-compare-area {
    background: #f4f5f6;
}

/* Butun icerigi tasiyan tek beyaz kutu (bkz. compare.blade.php).
   Rounded corner + golge burada BILINCLI ISTISNA - varsayilan keskin kose
   kuralinin (bkz. dikkan-card-corners-are-sharp) bu bolum icin acikca
   kaldirilmis hali. */
.compare-sheet {
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 12px 32px rgba(20, 24, 28, 0.06), 0 2px 8px rgba(20, 24, 28, 0.04);
    padding: 28px 28px 24px;
}

/* Grid (flex degil): "Daha Fazlasi" dugmesi basliktan cikip tablonun yanina
   tasindi, geriye iki oge kaldi. Flex'te baslik ortalanirken sadece solda
   duran "Geri Don" kadar saga kayardi; 1fr auto 1fr ile orta kolon sayfanin
   gercek ortasinda kalir. */
.compare-head {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 12px;
    margin-bottom: 22px;
}

.compare-head__heading {
    grid-column: 2;
    text-align: center;
}

.compare-head__title {
    font-size: 24px;
    font-weight: 700;
    color: var(--dikkan-antrasit-color);
    margin: 0;
}

.compare-head__subtitle {
    margin: 4px 0 0;
    font-size: 13px;
    color: #8b8c8e;
}

/* "Tum ozellikler / Yalnizca farklar" anahtari: yuvarlak koseli iki
   sekmeli bir anahtar - rounded corner
   burada da sheet ile ayni istisnaya dahil. */
.compare-mode {
    grid-column: 3;
    justify-self: end;
    display: inline-flex;
    padding: 4px;
    border-radius: 12px;
    background: #f2f3f4;
}

.compare-mode__option {
    border: none;
    border-radius: 9px;
    background: none;
    padding: 9px 18px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
    color: var(--dikkan-antrasit-color);
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .15s, color .15s;
}

.compare-mode__option:hover {
    color: var(--dikkan-color);
}

.compare-mode__option.is-active {
    background: var(--dikkan-color);
    color: #fff;
}

.compare-mode__option.is-active:hover {
    color: #fff;
}

.compare-head__back {
    grid-column: 1;
    justify-self: start;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: none;
    background: none;
    padding: 0;
    font-size: 15px;
    font-weight: 700;
    color: var(--dikkan-color);
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
}

.compare-head__back:hover {
    color: var(--dikkan-color);
    opacity: 0.8;
}

/* '3'erli pencere' "Daha Fazlasi" ile TEK kolon kayarak ilerler (1,2,3 ->
   2,3,4). Kolonlar artik gizlenmiyor (display:none), hepsi DOM'da kalir;
   asagidaki '.compare-grid' kolon genisligi sabitlendigi (bkz.
   table-layout: fixed) icin pencere disindaki kolonlar tabloyu bu
   konteynerden TASIRIR, JS ise scrollLeft'i animasyonla kaydirarak
   gorunen pencereyi degistirir. */
.compare-table__scroll {
    /* min-width: 0 SART - flex ogesi olarak icerigi (tablo) kadar genisleyip
       oku sayfa disina itmesin, tasan kisim kendi icinde kaydirilsin. */
    flex: 1 1 auto;
    min-width: 0;
    overflow-x: auto;
    /* Dikey kaydirma bu kapta hic istenmiyor. 'overflow-x: auto' dikeyi de
       'auto' yapar; etiket hucresinin '::before' seridi (bottom: -1px)
       tablonun altindan 1px tasip dikey kaydirmayi acar. Cubuk asagidaki
       ince stile girmedigi (yalnizca 'height' var) icin varsayilan kalin
       haliyle gelir ("Yalnizca farklar"da sagda kalin gri bir blok) ve
       genislikten de pay alip pencereyi kaydirir. */
    overflow-y: hidden;
}

/* Ince, yuvarlak koseli kaydirma cubugu - varsayilan kalin gri sistem
   cubugu diger yuvarlatilmis ogelerin yaninda kaba duruyordu. Yalnizca
   WebKit/Blink (Chrome, Edge, Safari); Firefox kendi ince cubugunu kullanir,
   islevi bozmaz. */
.compare-table__scroll::-webkit-scrollbar {
    height: 6px;
}

.compare-table__scroll::-webkit-scrollbar-track {
    background: transparent;
}

.compare-table__scroll::-webkit-scrollbar-thumb {
    border-radius: 3px;
    background: #d8d9da;
}

/* Kolonlar ile ok yan yana. */
.compare-table__viewport {
    display: flex;
    align-items: flex-start;
    gap: 4px;
}

/*
 * "Daha Fazlasi" oku: eskiden sayfa basliginda metin dugmesiydi, artik
 * kolonlarin yaninda duran bir ok.
 *
 * position: sticky - tablo ekrandan cok uzun (10 urunde 25+ satir); ok
 * tablonun basinda sabit kalsa kullanici satirlarin ortasinda pencereyi
 * kaydiracak bir sey bulamazdi. 45vh, okun ekranin ortasinda kalmasini
 * saglar; sticky'nin isini gorebilmesi icin align-items: flex-start ile
 * ogenin kendi yuksekligi kadar yer kaplamasi gerekiyor.
 */
/* Ayni stil soldaki geri okuna da uygulanir (.compare-table__nav). */
.compare-table__nav {
    position: sticky;
    top: 45vh;
    flex: 0 0 auto;
    border: none;
    background: none;
    padding: 0 2px;
    font-size: 44px;
    line-height: 1;
    color: var(--dikkan-color);
    cursor: pointer;
    transition: opacity .15s ease, transform .15s ease;
}

.compare-table__more:hover {
    opacity: 0.75;
    transform: translateX(3px);
}

.compare-table__prev:hover {
    opacity: 0.75;
    transform: translateX(-3px);
}

/* Ilk pencerede geri oku: yerinde kalir (tablo kaymasin) ama soluk ve
   tiklanamaz. */
.compare-table__nav:disabled,
.compare-table__nav:disabled:hover {
    opacity: 0.25;
    transform: none;
    cursor: default;
}

.compare-table__nav[hidden] {
    display: none;
}

/* Son pencerede ileri oku "basa don" simgesine doner. Simge ok kadar
   iri cizildiginde agir durdugu icin biraz kucuk; genislik okla ayni
   kalsin diye kutu sabit. */
.compare-table__more {
    min-width: 1em;
    text-align: center;
}

.compare-table__icon-restart {
    display: none;
    font-size: 0.62em;
}

.compare-table__more.is-restart .compare-table__icon-next {
    display: none;
}

.compare-table__more.is-restart .compare-table__icon-restart {
    display: inline-block;
}

.compare-table__more.is-restart:hover {
    transform: rotate(-20deg);
}
/* table-layout: fixed SART - kolon genisligi JS'in yazdigi
   '--compare-col-w' degiskenine gore SABIT olmali. Auto layout'ta tarayici
   tum (gizli olmayan) kolonlara gore genisligi yeniden dagitir; tum kolonlar
   artik DOM'da kaldigi icin (bkz. product-compare.js) bu, pencere disindaki
   urunlerin de gorunmesine ve sagda bosluga yol aciyordu.

   Zemin artik #f4f5f6 (sayfa grisi) DEGIL, seffaf: tablo artik beyaz
   '.compare-sheet' icinde, kendi arka planini boyamasina gerek yok - eskiden
   bosluk satiri ('.compare-grid__head' bos etiket hucresi) bu yuzden ayri
   gri bir kutu gibi gorunuyordu. */
.compare-grid {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
    background: transparent;
    font-size: 12.5px;
    line-height: 1.5;
}

/* Etiket sutunu: yatay kaydirmada ekranda kalir, aksi halde mobilde hangi
   satira bakildigi kaybolur. Zemin sheet ile ayni beyaz - eskiden sayfa
   grisiydi ve bos oldugu satirlarda (kart basligi) yaniltici bir gri kutu
   gibi duruyordu. */
/* --compare-label-w: JS yuvarlama payini buraya ekler (bkz.
   product-compare.js -> applyViewport); yazilmadiysa 168px. */
.compare-grid__label {
    position: sticky;
    left: 0;
    z-index: 2;
    width: var(--compare-label-w, 168px);
    min-width: var(--compare-label-w, 168px);
    padding: 12px 14px;
    background: #fff;
    color: var(--dikkan-antrasit-color);
    font-weight: 400;
    text-align: left;
    vertical-align: top;
}

/* Tablonun 1px dis cercevesi yuzunden etiket hucresi kaydirma alaninin
   kenarindan yarim piksel iceride duruyor; yatay kaydirirken altindan gecen
   kolonlar (en belirgin: urun fotografi) bu ince seritten sizar. Hucrenin solunda birkac piksellik beyaz pay seridi kapatir
   (kaydirma kabinin disina tasan kismi zaten kirpilir). */
.compare-grid__label::before {
    content: "";
    position: absolute;
    top: -1px;
    bottom: -1px;
    right: 100%;
    width: 4px;
    background: #fff;
}

/* Genislik JS'ten gelir (bkz. product-compare.js -> applyViewport): kalan
   alan konteynerin gercek genisligine ve pencerede kac urun goruneceğine
   (perPage) gore hesaplanir. Degisken hic yazilmadiysa (JS calismadan once
   ilk boya) 260px varsayilanina duser. */
.compare-grid__cell {
    width: var(--compare-col-w, 260px);
    padding: 12px 16px;
    background: #fff;
    color: var(--dikkan-antrasit-color);
    vertical-align: top;
    border-bottom: 1px solid #eceded;
}

/* Kart basliklari artik seffaf zeminde (sheet zaten beyaz); kutu hucrenin
   icindeki '.compare-card', aradaki bosluk hucrenin kenar payi. */
.compare-grid__cell--head {
    border-bottom: none;
    padding: 0 6px 14px;
    background: transparent;
    text-align: center;
}

/* Baslik satirlarindaki etiket hucresi de BEYAZ kalmali: sticky oldugu icin
   yatay kaydirmada kartlar ve urun kodlari altindan gecer; seffaf zeminde
   ustune binmis gibi gorunurler. Sheet zaten beyaz,
   gorunumde fark yok. */
.compare-grid__head .compare-grid__label {
    background: #fff;
}

/* Rounded corner + yumusak golge burada da sheet ile ayni istisnaya dahil:
   kartlar hafif yuvarlak koseli ve belli belirsiz bir golgeyle sayfadan
   ayrisiyor.

   flex + sabit yukseklikli alt boslukler: baslik 1 mi 2 satir mi, gorsel
   dikey mi yatay mi, kacinci urunun kisa/uzun oldugu FARK ETMEMELI - hepsi
   ayni hizada baslamali (aksi halde baslik tek satira sigan kart
   digerlerinden kisa kalir, gorseller ve metinler kayar). */
.compare-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 20px 20px 22px;
    border: 1px solid #eceded;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 4px 14px rgba(20, 24, 28, 0.05);
}

/* Urun kodunun tekrarlandigi ara baslik satiri ("Specification" | kod | kod
   | kod). Kartlarla ilk veri satiri arasindaki gecisi belirginlestirir ve
   kartlarin ustundeki bos etiket hucresinin aksine gercek bir icerigi olur -
   eskiden o hucre bos oldugu icin yaniltici bir gri kutu gibi duruyordu. */
.compare-grid__head--spec .compare-grid__label,
.compare-grid__cell--spec {
    border-top: 1px solid #eceded;
    border-bottom: 2px solid #eceded;
    font-weight: 700;
}

.compare-grid__cell--spec {
    padding: 12px 16px;
    text-align: center;
    color: var(--dikkan-antrasit-color);
}

/* Deger kutusu: fark vurgusunun zemini buraya cizilir, hucrenin kenar payi
   komsu kolonlarin vurgusunu birbirinden ayirir. */
.compare-grid__row .compare-grid__cell {
    padding: 3px 4px;
}

.compare-grid__value {
    padding: 9px 12px;
    border-radius: 8px;
}

/* Satir etiketleri degerlerle ayni beyaz tablo zemininde. */
.compare-grid__row .compare-grid__label {
    vertical-align: middle;
    background: #fff;
    border-bottom: 1px solid #eceded;
}

.compare-grid__label-text {
    font-weight: 700;
}

/* --- Tum ozellikler kipi (varsayilan): farklar vurgulanir, ayni satirlar
       geri planda kalir. Vurgu YALNIZCA deger kutusunun zeminiyle yapilir
       (etiketin yaninda ayrica bir "≠" rozeti kalabalik durur). */
.compare-table:not(.is-diff-only) .compare-grid__row.is-diff .compare-grid__value {
    background: rgba(231, 91, 18, 0.09);
}

.compare-table:not(.is-diff-only) .compare-grid__row.is-same .compare-grid__label-text,
.compare-table:not(.is-diff-only) .compare-grid__row.is-same .compare-grid__value {
    color: #8b8c8e;
    font-weight: 400;
}

.compare-grid__row--empty,
.compare-diff-note {
    display: none;
}

/* --- Yalnizca farklar kipi: ayni satirlar gizlenir, vurgu yok. */
.compare-table.is-diff-only .compare-grid__row.is-same {
    display: none;
}

.compare-table.is-diff-only .compare-grid__row--empty {
    display: table-row;
}

.compare-table.is-diff-only .compare-diff-note {
    display: flex;
}

.compare-grid__row--empty .compare-grid__value {
    text-transform: none;
    color: #8b8c8e;
}

.compare-diff-note {
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px 20px;
    margin-top: 16px;
    padding: 14px 18px;
    border-radius: 12px;
    background: #f8f8f9;
    font-size: 12.5px;
    color: #8b8c8e;
}

.compare-diff-note__text {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.compare-diff-note__text i {
    font-size: 20px;
}

.compare-diff-note__reset {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: none;
    background: none;
    padding: 0;
    font-size: 13px;
    color: var(--dikkan-color);
    cursor: pointer;
}

.compare-diff-note__reset i {
    font-size: 18px;
}

.compare-diff-note__reset:hover {
    opacity: 0.8;
}

/* Sabit yukseklik 2 satira gore ('line-clamp' degil): baslik 1 satirda bitse
   bile kart 2 satirlik yer ayirir, boylece altindaki gorsel butun kartlarda
   ayni Y konumunda baslar. */
.compare-card__title {
    display: block;
    flex: 0 0 auto;
    min-height: calc(1.35em * 2);
    font-size: 15px;
    line-height: 1.35;
    font-weight: 400;
    color: var(--dikkan-color);
    text-decoration: none;
    text-align: left;
}

.compare-card__title:hover {
    color: var(--dikkan-color);
    text-decoration: underline;
}

/* Gorsel alani sabit yukseklikte, icerik ortalanir: bir urunun gorseli
   digerinden kisa/uzun olsa da figur kodu her kartta ayni satirda kalir. */
.compare-card__image {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    height: 170px;
    margin: 14px 0;
}

.compare-card__image img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.compare-card__figure {
    display: block;
    flex: 0 0 auto;
    font-size: 11px;
    color: #8b8c8e;
    text-align: left;
}

/* flex: 1 - kalan yuksekligi doldurur, boylece kartin alt kenari (ve dolayisiyla
   asagidaki "Specification" satiri) her zaman ayni hizada biter; kisa ozetli
   kartlarda bosluk burada kalir, uzun ozetli kartlar tasmaz. */
.compare-card__summary {
    flex: 1 1 auto;
    margin: 8px 0 0;
    font-size: 11.5px;
    line-height: 1.5;
    color: var(--dikkan-antrasit-color);
    text-align: left;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 6;
    -webkit-box-orient: vertical;
}

/* Taksonomi ve teknik satir gruplari arasindaki gecis: teknik blogun ustune
   biraz daha belirgin bir cizgi, iki kaynak gorsel olarak ayrilsin.
   Sinir satirini Blade isaretler (.is-group-start) - CSS'te "sinifi olan ilk
   kardes" secicisi yok. */
.compare-grid__row.is-group-start .compare-grid__cell,
.compare-grid__row.is-group-start .compare-grid__label {
    border-top: 2px solid #e0e1e2;
}

/* Kaldirma satiri veriden acikca ayrilir - eskiden son veri satirina bitisik
   duruyordu ve kirmizi X'ler tablonun bir parcasi gibi degil, yanlislikla
   kalmis bir satir gibi gorunuyordu. */
.compare-grid__foot .compare-grid__label {
    border-top: 1px solid #eceded;
}

.compare-grid__cell--foot {
    text-align: center;
    border-top: 1px solid #eceded;
    border-bottom: none;
    padding: 14px 16px 4px;
}

.compare-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 8px;
    background: none;
    padding: 0;
    font-size: 18px;
    line-height: 1;
    color: #8b8c8e;
    cursor: pointer;
    transition: background-color .15s, color .15s;
}

.compare-remove:hover {
    background: rgba(208, 52, 44, 0.1);
    color: #d0342c;
    opacity: 1;
}

.compare-pager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 16px;
}

.compare-pager[hidden] {
    display: none;
}

.compare-pager__dots {
    display: inline-flex;
    gap: 6px;
}

.compare-pager__dot {
    width: 9px;
    height: 9px;
    padding: 0;
    border: 1px solid var(--dikkan-antrasit-color);
    border-radius: 50%;
    background: none;
    cursor: pointer;
}

.compare-pager__dot.is-active {
    background: var(--dikkan-color);
    border-color: var(--dikkan-color);
}

.compare-pager__range {
    font-size: 12px;
    color: var(--dikkan-antrasit-color);
}

@media (max-width: 767px) {
    .compare-sheet {
        padding: 18px 14px 16px;
        border-radius: 14px;
    }

    /* Dar ekranda tek kolon: "Geri Don" ustte, baslik altinda ve sola dayali
       (ortalanmis baslik kisa satirda dengesiz duruyor). */
    .compare-head {
        grid-template-columns: 1fr;
    }

    .compare-head__heading {
        grid-column: 1;
        text-align: left;
    }

    .compare-mode {
        grid-column: 1;
        justify-self: stretch;
    }

    .compare-mode__option {
        flex: 1 1 0;
        padding: 8px 10px;
    }

    /* Dar ekranda oklar ve etiket sutunu kolonlara yer birakir. Kolon
       genisligi yalnizca JS'ten gelir (bkz. product-compare.js ->
       visibleCount); burada min-width VERME, kolon kaydirma alanindan tasip
       kartlari keser. */
    .compare-table__viewport {
        gap: 0;
    }

    .compare-table__nav {
        font-size: 26px;
        padding: 0;
    }

    .compare-grid__label {
        width: var(--compare-label-w, 96px);
        min-width: var(--compare-label-w, 96px);
        padding: 10px 8px;
        font-size: 11.5px;
    }

    .compare-grid__cell {
        padding: 10px;
    }

    .compare-grid__cell--head {
        padding: 0 3px 8px;
    }

    .compare-card {
        padding: 14px;
    }

    .compare-bar__actions {
        margin-left: 0;
        width: 100%;
        justify-content: space-between;
    }
}