/* ODAK — ek stiller (alan filtresi, yanıtlayan/yaş, karşılaştırma, "Bir Bakışta") — 19 Eki 2026 */

/* --- Alan çipleri (filtre paneli) --- */
.alan-liste { display: flex; flex-direction: column; gap: 6px; }
.alan-cip { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; text-align: left;
  font-family: 'Inter', sans-serif; font-size: .84rem; font-weight: 600; color: var(--ink); background: #fff;
  border: 1px solid var(--line); border-radius: 10px; padding: 8px 11px; cursor: pointer; transition: var(--gecis); }
.alan-cip:hover { border-color: var(--accent); background: var(--accent-soft); }
.alan-cip .say { font-size: .7rem; font-weight: 700; color: var(--muted); background: var(--bg-alt); border-radius: 999px; padding: 1px 8px; }
.alan-cip.aktif { background: var(--ink); border-color: var(--ink); color: #fff; }
.alan-cip.aktif .say { background: rgba(255,255,255,.16); color: #fff; }

/* --- Kart alt satırı: karşılaştır düğmesi --- */
.arac-alt .alt-sag { display: inline-flex; align-items: center; gap: 14px; }
.kars-btn { font-family: 'Inter', sans-serif; font-size: .8rem; font-weight: 600; color: var(--accent-ink); background: #fff;
  border: 1px solid var(--line); border-radius: 999px; padding: 5px 12px; cursor: pointer; transition: var(--gecis); white-space: nowrap; }
.kars-btn::before { content: '+'; margin-right: 6px; font-weight: 700; }
.kars-btn:hover { border-color: var(--accent); background: var(--accent-soft); }
.kars-btn[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.kars-btn[aria-pressed="true"]::before { content: '✓'; }

/* --- Karşılaştırma çubuğu --- */
.kars-bar { position: fixed; left: 50%; bottom: 18px; transform: translate(-50%, 140%); z-index: 900; width: min(760px, calc(100% - 24px));
  background: var(--ink); color: #fff; border-radius: 16px; padding: 12px 14px 12px 18px; display: flex; align-items: center; gap: 12px;
  box-shadow: 0 18px 40px -16px rgba(22,35,61,.55); transition: transform .28s ease; }
.kars-bar.acik { transform: translate(-50%, 0); }
.kars-bar .kb-baslik { font-size: .74rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.65); white-space: nowrap; }
.kars-bar .kb-liste { display: flex; gap: 6px; flex-wrap: wrap; flex: 1; min-width: 0; }
.kars-bar .kb-oge { display: inline-flex; align-items: center; gap: 6px; max-width: 220px; font-size: .78rem; background: rgba(255,255,255,.12);
  border-radius: 999px; padding: 4px 6px 4px 11px; }
.kars-bar .kb-oge span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kars-bar .kb-oge button { border: 0; background: rgba(255,255,255,.18); color: #fff; width: 18px; height: 18px; border-radius: 50%; cursor: pointer; font-size: .7rem; line-height: 18px; padding: 0; }
.kars-bar .kb-git { border: 0; background: #fff; color: var(--ink); font-weight: 700; font-size: .84rem; border-radius: 999px; padding: 9px 16px; cursor: pointer; white-space: nowrap; }
.kars-bar .kb-git:disabled { opacity: .45; cursor: default; }
.kars-bar .kb-temizle { border: 0; background: transparent; color: rgba(255,255,255,.7); font-size: .8rem; cursor: pointer; white-space: nowrap; }

/* --- Karşılaştırma penceresi --- */
.kars-modal { position: fixed; inset: 0; z-index: 1000; display: none; align-items: flex-start; justify-content: center; padding: 40px 16px;
  background: rgba(16,24,40,.55); overflow-y: auto; }
.kars-modal.acik { display: flex; }
.kars-pencere { background: #fff; border-radius: 18px; width: min(1100px, 100%); padding: 26px 26px 22px; box-shadow: 0 30px 80px -30px rgba(0,0,0,.5); }
.kars-ust { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.kars-ust h2 { font-family: 'Newsreader', serif; font-size: 1.6rem; color: var(--ink); margin: 0; }
.kars-kapat { border: 1px solid var(--line); background: #fff; border-radius: 999px; padding: 7px 14px; cursor: pointer; font-weight: 600; color: var(--ink); }
.kars-tablo-sar { overflow-x: auto; }
.kars-tablo { width: 100%; border-collapse: collapse; min-width: 640px; font-size: .88rem; }
.kars-tablo th, .kars-tablo td { text-align: left; vertical-align: top; padding: 11px 12px; border-bottom: 1px solid var(--line); }
.kars-tablo thead th { font-family: 'Newsreader', serif; font-size: 1.05rem; color: var(--ink); background: var(--bg-alt); position: sticky; top: 0; }
.kars-tablo thead th a { color: var(--ink); }
.kars-tablo tbody th { width: 170px; font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.kars-tablo td { color: var(--text); line-height: 1.5; }
.kars-tablo tr.kt-grup th { background: #fff; color: var(--coral); padding-top: 18px; }
.kars-tablo .kt-yok { color: var(--muted); }

/* --- Detay sayfası: Bir Bakışta --- */
.od-bakis .bakis-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; }
.od-bakis .bk { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; background: var(--bg-alt); }
.od-bakis .bk-et { display: block; font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; }
.od-bakis .bk-de { display: block; font-size: .95rem; font-weight: 600; color: var(--ink); line-height: 1.4; }
.kk-alan a { background: var(--accent-soft); border-color: transparent; font-weight: 600; }

@media (max-width: 640px) {
  .kars-bar { flex-wrap: wrap; }
  .kars-bar .kb-baslik { width: 100%; }
  .arac-alt .alt-sag { gap: 10px; }
}
@media (prefers-reduced-motion: reduce) { .kars-bar { transition: none; } }

/* Uzun filtre paneli ekrana sığsın; kart açıklamaları 4 satırla sınırlı */
@media (min-width: 901px) {
  .odak-filtre { max-height: calc(100vh - 110px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
}
.arac-kart .a-desc { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }

/* Mobil: filtre paneli katlanır (yalnız arama açık kalır) */
.filtre-ac { display: none; }
@media (max-width: 900px) {
  .filtre-ac { display: flex; align-items: center; justify-content: space-between; width: 100%; margin: 4px 0 14px; padding: 10px 14px;
    border: 1px solid var(--line); border-radius: 10px; background: var(--bg-alt); font-family: 'Inter', sans-serif; font-weight: 600;
    font-size: .88rem; color: var(--ink); cursor: pointer; }
  .filtre-ac::after { content: '▾'; transition: transform .2s; }
  .odak-filtre.acik .filtre-ac::after { transform: rotate(180deg); }
  .odak-filtre:not(.acik) .filtre-grup:not(.filtre-ara), .odak-filtre:not(.acik) .filtre-temizle { display: none; }
}