/* Kısa liste + karşılaştırma.
   Tema token'larını kullanır (--blue/--navy/--line...); v3 temalarında
   --ink/--accent tanımlı olduğu için yedek değerler var. */

:root{
  --cmp-ink: var(--navy, var(--ink, #14181d));
  /* yazı ve beyaz yazılı rozet zemini olarak da kullanılır: vurgunun okunur tonu (--accent-ink) */
  --cmp-key: var(--accent-ink, var(--blue, var(--accent, #17607d)));
  --cmp-line: var(--line, #e3e6ea);
  --cmp-surface: var(--surface, #fff);
}

/* ---------- Kart düğmeleri: artık gerçekten çalışıyor ---------- */

.card__tools button[aria-pressed="true"],
.c__save[aria-pressed="true"]{
  background: var(--cmp-key); color:#fff; border-color: var(--cmp-key);
}
.card__tools button[aria-pressed="true"] svg,
.c__save[aria-pressed="true"] svg{ fill: currentColor; }

/* ---------- Alt çekmece ---------- */

.cmp-tray{
  position: fixed; left:0; right:0; bottom:0; z-index: 60;
  background: var(--cmp-ink); color:#fff;
  transform: translateY(110%); visibility: hidden;
  transition: transform .28s cubic-bezier(.22,.61,.36,1), visibility 0s .28s;
  box-shadow: 0 -12px 40px rgba(0,0,0,.22);
}
.cmp-tray.is-open{ transform: none; visibility: visible; transition-delay: 0s; }
/* Tepsi açıkken sayfa sonu ve odaklanan öğe tepsinin altında kalmasın (compare.js --cmp-tray-h'yi ölçer) */
html.has-cmp-tray{ scroll-padding-bottom: calc(var(--cmp-tray-h, 90px) + 16px); }
html.has-cmp-tray body{ padding-bottom: var(--cmp-tray-h, 90px); }
.cmp-tray__in{
  max-width:1200px; margin:0 auto; padding:14px 20px;
  display:flex; align-items:center; gap:16px; flex-wrap:wrap;
}
.cmp-tray__label{
  font-size:12px; letter-spacing:.14em; text-transform:uppercase;
  opacity:.7; flex:0 0 auto;
}
.cmp-tray__items{ display:flex; gap:10px; flex:1 1 auto; min-width:0; flex-wrap:wrap; }
.cmp-tray__item{
  position:relative; width:64px; height:48px; border-radius:8px; overflow:hidden;
  background:rgba(255,255,255,.12); flex:0 0 auto;
}
.cmp-tray__item img{ width:100%; height:100%; object-fit:cover; display:block; }
.cmp-tray__x{
  position:absolute; top:2px; right:2px; width:18px; height:18px; border:0; border-radius:50%;
  background:rgba(0,0,0,.62); color:#fff; font-size:12px; line-height:18px; padding:0;
  cursor:pointer;
}
.cmp-tray__slot{
  width:64px; height:48px; border-radius:8px; flex:0 0 auto;
  border:1px dashed rgba(255,255,255,.34);
}
.cmp-tray__go{
  flex:0 0 auto; display:inline-block; padding:11px 20px; border-radius:999px;
  background:#fff; color:var(--cmp-ink); font-weight:600; font-size:15px;
  text-decoration:none; border:0; cursor:pointer;
}
.cmp-tray__go[disabled]{ opacity:.45; cursor:default; }
.cmp-tray__clear{
  flex:0 0 auto; background:none; border:0; color:rgba(255,255,255,.7);
  font-size:14px; cursor:pointer; text-decoration:underline; padding:4px;
}
@media (max-width:700px){
  .cmp-tray__label{ display:none; }
  .cmp-tray__in{ padding:11px 14px; gap:10px; }
  .cmp-tray__go{ padding:10px 16px; font-size:14px; }
}

/* ---------- Karşılaştırma sayfası ---------- */

.rewp-cmp-page{ padding:44px 0 72px; }
.rewp-cmp-head{ max-width:620px; margin-bottom:26px; }
.rewp-cmp-eyebrow{
  font-size:12px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--cmp-key); margin:0 0 8px;
}
.rewp-cmp-head h1{ margin:0 0 10px; }
.rewp-cmp-sub{ margin:0; color:var(--muted, #6b7280); }

.rewp-cmp-empty{
  border:1px dashed var(--cmp-line); border-radius:14px;
  padding:40px 28px; text-align:center; max-width:560px;
}
.rewp-cmp-empty p{ margin:0 0 10px; }
.rewp-cmp-btn{
  display:inline-block; margin-top:8px; padding:11px 22px; border-radius:999px;
  background:var(--cmp-key); color:#fff; text-decoration:none; font-weight:600;
}

.rewp-cmp-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
.rewp-cmp{
  width:100%; border-collapse:collapse; min-width:640px;
  background:var(--cmp-surface);
}
.rewp-cmp th, .rewp-cmp td{
  padding:13px 16px; text-align:left; vertical-align:middle;
  border-bottom:1px solid var(--cmp-line);
}
.rewp-cmp thead th{ vertical-align:top; padding-top:0; border-bottom-width:2px; }
.rewp-cmp tbody th{
  font-size:13px; font-weight:600; letter-spacing:.02em;
  color:var(--muted, #6b7280); width:170px; white-space:nowrap;
}
.rewp-cmp tbody tr:nth-child(odd) td{ background:rgba(0,0,0,.018); }

/* İlk sütun mobilde kaymasın: tablo yatay kayarken ölçüt adı görünür kalır. */
.rewp-cmp-rowhead, .rewp-cmp tbody th{
  position:sticky; left:0; background:var(--cmp-surface); z-index:1;
}
.rewp-cmp tbody tr:nth-child(odd) th{ background:#f7f8f9; }

.rewp-cmp-card{ display:block; text-decoration:none; color:inherit; }
.rewp-cmp-card img{
  width:100%; height:120px; object-fit:cover; border-radius:10px; display:block;
  margin-bottom:9px;
}
/* Fotoğrafsız ilan: diğer sütunlarla aynı yükseklikte yer tutucu (başlıklar aynı hizada kalsın). */
.rewp-cmp-card .rewp-card__noimg{
  height:120px; border-radius:10px; margin-bottom:9px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23889' stroke-width='1.6' stroke-linejoin='round'%3E%3Cpath d='M3 11l9-7 9 7M5 9.5V20h14V9.5M10 20v-5h4v5'/%3E%3C/svg%3E"), linear-gradient(135deg, rgba(0,0,0,.05), rgba(0,0,0,.12));
  background-repeat:no-repeat; background-position:center; background-size:36px 36px, cover;
}
.rewp-cmp-name{ font-size:15px; font-weight:600; line-height:1.32; display:block; }
.rewp-cmp-drop{
  margin-top:7px; background:none; border:0; padding:0; cursor:pointer;
  font-size:12.5px; color:var(--muted, #6b7280); text-decoration:underline;
}

.rewp-cmp-val{ font-size:15.5px; }
.rewp-cmp td.is-win{ background:color-mix(in srgb, var(--cmp-key) 8%, transparent); }
.rewp-cmp-flag{
  display:inline-block; margin-left:8px; padding:2px 8px; border-radius:999px;
  background:var(--cmp-key); color:#fff; font-size:11px; font-weight:600;
  letter-spacing:.03em; vertical-align:2px; white-space:nowrap;
}
.rewp-cmp tbody tr:nth-child(odd) td.is-win{ background:color-mix(in srgb, var(--cmp-key) 11%, transparent); }

.rewp-cmp-note{
  margin:14px 0 0; font-size:13px; color:var(--muted, #6b7280); max-width:760px;
}

.rewp-cmp-ask{
  margin-top:44px; display:grid; gap:32px; grid-template-columns:1fr 1fr;
  align-items:start; padding:34px; border-radius:16px;
  background:rgba(0,0,0,.03); border:1px solid var(--cmp-line);
}
.rewp-cmp-ask h2{ margin:0 0 10px; }
/* Form alanlari panel zeminiyle ayni tonda kaliyordu (modern temalar): beyaz zemin ve ince cerceve */
.rewp-cmp-ask .field input,.rewp-cmp-ask .field textarea{ background:var(--surface, #fff); box-shadow:inset 0 0 0 1px var(--cmp-line); }
.rewp-cmp-ask p{ margin:0; color:var(--muted, #6b7280); }
@media (max-width:860px){
  .rewp-cmp-ask{ grid-template-columns:1fr; padding:24px; }
  .rewp-cmp tbody th{ width:130px; font-size:12.5px; }
  .rewp-cmp th, .rewp-cmp td{ padding:11px 12px; }
}

/* Kira/satış karışık kümesi uyarısı */
.rewp-cmp-warn{
  border-left:3px solid var(--cmp-key); padding:8px 0 8px 13px; margin-bottom:6px;
}

/* v3 temalarinda baslik sabit (88px): icerik basligin altinda kaliyordu.
   compare.css temadan sonra yuklendigi icin kural burada ve .hd ile kapsamli. */
.hd ~ .rewp-cmp-page{padding-top:calc(88px + clamp(28px,4vw,60px))}
/* tek kelimelik son satır kalmasın */
.rewp-cmp-wrap p,.rewp-cmp-note{ text-wrap:pretty; }

/* Telefonda tablo yatay kayar: sağ kenarda gölge ve "Swipe" notu devamı olduğunu gösterir (compare.js
   .is-scrollable/.is-end sınıflarını kaydırmaya göre değiştirir). */
.rewp-cmp-frame{ position:relative; }
.rewp-cmp-frame::after{
  content:""; position:absolute; top:0; right:0; bottom:0; width:42px; pointer-events:none;
  background:linear-gradient(to left, rgba(0,0,0,.16), rgba(0,0,0,0));
  opacity:0; transition:opacity .2s;
}
.rewp-cmp-frame.is-scrollable:not(.is-end)::after{ opacity:1; }
.rewp-cmp-swipe{ display:none; margin:0 0 8px; font-size:13px; color:var(--muted, #6b7280); }
.rewp-cmp-frame.is-scrollable .rewp-cmp-swipe{ display:block; }

/* "Remove" gerçek bir düğme boyutunda (önceden 47×14 px metin bağlantısıydı). */
.rewp-cmp-drop{
  display:inline-flex; align-items:center; min-height:34px; padding:6px 14px; margin-top:8px;
  border:1px solid var(--cmp-line); border-radius:999px; background:var(--cmp-surface);
  font-size:13px; text-decoration:none; color:var(--cmp-ink);
}
.rewp-cmp-drop:hover, .rewp-cmp-drop:focus-visible{ border-color:var(--cmp-key); color:var(--cmp-key); }

/* Kısa bildirim: 5. ev eklenince, kaydedince, tarayıcı depoyu engelleyince */
.cmp-toast{
  position:fixed; left:0; right:0; bottom:16px; z-index:70; margin:0 auto;
  width:max-content; max-width:min(calc(100vw - 32px), 460px); box-sizing:border-box;
  transform:translateY(12px); opacity:0; visibility:hidden;
  padding:12px 18px; border-radius:12px; background:var(--cmp-ink); color:#fff;
  font-size:14.5px; line-height:1.45; box-shadow:0 10px 30px rgba(0,0,0,.25);
  transition:opacity .2s, transform .2s, visibility 0s .2s;
}
.cmp-toast.is-on{ opacity:1; visibility:visible; transform:none; transition-delay:0s; }
@media (prefers-reduced-motion: reduce){ .cmp-toast{ transition:none; } }