/* ==========================================================
   Yapay zeka ile bölüm karşılaştırma — "Pusula" teması
   ========================================================== */

.ks-pencere {
    max-width: 860px;
    width: 100%;
    max-height: calc(100vh - 40px);
    display: flex;
    flex-direction: column;
}

.ks-ust {
    padding: 22px 26px 18px;
    border-bottom: 1px solid var(--cizgi);
    background: linear-gradient(135deg, var(--teal-soluk) 0%, var(--buz) 100%);
    border-radius: var(--r) var(--r) 0 0;
    flex-shrink: 0;
}
.ks-ust h2 {
    font-family: var(--display);
    font-weight: 600;
    font-size: 21px;
    color: var(--lacivert);
    margin: 0 0 4px;
    letter-spacing: -.01em;
    padding-right: 40px;
}
.ks-ust p { margin: 0; font-size: 13.5px; color: var(--gri); }

.ks-govde { padding: 20px 26px 24px; overflow-y: auto; flex: 1; min-height: 0; }

/* ---- Seçilen bölüm yuvaları ---- */
.ks-yuvalar {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 18px;
}
@media (max-width: 620px) { .ks-yuvalar { grid-template-columns: 1fr; } }

.ks-yuva {
    position: relative;
    min-height: 74px;
    padding: 12px 12px 12px 14px;
    border: 1.5px dashed var(--cizgi-koyu);
    border-radius: 12px;
    background: var(--buz);
    display: flex;
    align-items: center;
    gap: 10px;
}
.ks-yuva.dolu {
    border-style: solid;
    border-color: var(--teal-cizgi);
    background: #fff;
    box-shadow: var(--golge-yumusak);
}
.ks-yuva-no {
    display: grid; place-items: center;
    width: 24px; height: 24px; flex-shrink: 0;
    font-family: var(--veri); font-size: 12px; font-weight: 600;
    color: var(--gri-acik);
    background: var(--duman);
    border-radius: 7px;
}
.ks-yuva.dolu .ks-yuva-no {
    color: #fff;
    background: linear-gradient(135deg, var(--teal), var(--teal-koyu));
}
.ks-yuva-bos { font-size: 12.5px; color: var(--gri-acik); }
.ks-yuva-govde { min-width: 0; flex: 1; }
.ks-yuva-ad {
    font-family: var(--display); font-weight: 600; font-size: 13px;
    color: var(--lacivert); line-height: 1.2;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ks-yuva-uni {
    font-size: 11.5px; color: var(--gri); margin-top: 2px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ks-yuva-sil {
    width: 24px; height: 24px; flex-shrink: 0;
    font-size: 15px; line-height: 1;
    color: var(--gri-acik);
    background: transparent; border: 0; border-radius: 7px; cursor: pointer;
}
.ks-yuva-sil:hover { color: var(--kirmizi); background: var(--kirmizi-soluk); }

/* ---- Bölüm seçme ---- */
.ks-sec-ust {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; margin-bottom: 10px; flex-wrap: wrap;
}
.ks-sec-baslik { font-size: 12.5px; font-weight: 600; color: var(--gri-koyu); }
.ks-listemden {
    font-family: var(--govde); font-size: 12.5px;
    color: var(--teal-koyu); background: none; border: 0;
    cursor: pointer; padding: 4px 8px; border-radius: 7px;
}
.ks-listemden:hover { background: var(--teal-soluk); }
.ks-listemden:disabled { color: var(--gri-acik); cursor: not-allowed; background: none; }

.ks-arama { position: relative; display: flex; align-items: center; margin-bottom: 10px; }
.ks-arama svg { position: absolute; left: 14px; color: var(--gri-acik); pointer-events: none; }
.ks-arama input {
    width: 100%; font-family: var(--govde); font-size: 14px;
    padding: 11px 14px 11px 40px;
    color: var(--lacivert); background: var(--buz);
    border: 1.5px solid var(--cizgi); border-radius: 10px;
}
.ks-arama input:focus {
    outline: none; background: #fff;
    border-color: var(--teal); box-shadow: 0 0 0 4px var(--teal-soluk);
}

.ks-sonuc {
    max-height: 210px; overflow-y: auto;
    border: 1px solid var(--cizgi); border-radius: 10px;
    background: #fff;
}
.ks-satir {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--cizgi);
    cursor: pointer;
    transition: background .12s;
}
.ks-satir:last-child { border-bottom: 0; }
.ks-satir:hover { background: var(--teal-soluk); }
.ks-satir.secili { background: var(--teal-soluk); }
.ks-satir.dolu-uyari { opacity: .45; cursor: not-allowed; }
.ks-satir-govde { min-width: 0; flex: 1; }
.ks-satir-ad {
    font-size: 13.5px; font-weight: 600; color: var(--lacivert);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ks-satir-uni { font-size: 12px; color: var(--gri); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ks-satir-sira { font-family: var(--veri); font-size: 12px; color: var(--teal-koyu); flex-shrink: 0; }
.ks-satir-durum { padding: 22px; text-align: center; color: var(--gri-acik); font-size: 13px; }

/* ---- Kriter seçimi ---- */
.ks-kriter { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--cizgi); }

.ks-kriter-ust {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    margin-bottom: 4px;
}
.ks-kriter-ust > span:first-child {
    font-size: 12.5px; font-weight: 600; color: var(--gri-koyu);
}
.ks-kriter-sayac {
    font-family: var(--veri); font-size: 11.5px;
    color: var(--teal-koyu); background: var(--teal-soluk);
    padding: 3px 9px; border-radius: 999px;
}
.ks-kriter-sayac.dolu { color: var(--amber-koyu); background: var(--amber-soluk); }

.ks-kriter-ipuc { margin: 0 0 10px; font-size: 12px; color: var(--gri); line-height: 1.45; }

.ks-kriter-arama { display: flex; gap: 8px; align-items: center; margin-bottom: 12px; }
.ks-kriter-arama input {
    flex: 1; font-family: var(--govde); font-size: 13px;
    padding: 9px 12px; color: var(--lacivert); background: var(--buz);
    border: 1px solid var(--cizgi); border-radius: 9px;
}
.ks-kriter-arama input:focus {
    outline: none; background: #fff;
    border-color: var(--teal); box-shadow: 0 0 0 3px var(--teal-soluk);
}
.ks-kriter-temizle {
    font-family: var(--govde); font-size: 12px; color: var(--gri);
    background: none; border: 0; cursor: pointer;
    padding: 6px 8px; border-radius: 7px; white-space: nowrap;
}
.ks-kriter-temizle:hover { color: var(--kirmizi); background: var(--kirmizi-soluk); }

.ks-kr-kat { margin-bottom: 14px; }
.ks-kr-kat:last-child { margin-bottom: 0; }
.ks-kr-kat-ad {
    font-size: 10.5px; font-weight: 600; letter-spacing: .04em;
    text-transform: uppercase; color: var(--gri-acik); margin-bottom: 7px;
}
.ks-kr-cipler { display: flex; flex-wrap: wrap; gap: 6px; }

.ks-kr {
    font-family: var(--govde); font-size: 12.5px; font-weight: 500;
    color: var(--gri-koyu);
    background: #fff; border: 1px solid var(--cizgi);
    padding: 7px 13px; border-radius: 999px; cursor: pointer;
    transition: all .13s; text-align: left;
}
.ks-kr:hover:not(:disabled) { border-color: var(--teal-cizgi); background: var(--teal-soluk); }
.ks-kr.secili {
    color: #fff; background: var(--teal); border-color: var(--teal);
    padding-left: 26px; position: relative;
}
.ks-kr.secili::before {
    content: '✓'; position: absolute; left: 11px; font-size: 11px;
}
.ks-kr.dolu { opacity: .4; cursor: not-allowed; }

/* ---- Hangi motorlar hazır ---- */
.ks-motor { margin-top: 16px; }
.ks-motor-satir {
    display: flex; align-items: center; gap: 8px;
    font-size: 12px; color: var(--gri);
    background: var(--duman); padding: 9px 13px; border-radius: 9px;
}
.ks-motor-nokta {
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--yesil); flex-shrink: 0;
}

/* ---- Alt bar ---- */
.ks-alt {
    display: flex; gap: 10px; align-items: center;
    padding: 16px 26px 20px;
    border-top: 1px solid var(--cizgi);
    background: var(--buz);
    border-radius: 0 0 var(--r) var(--r);
    flex-shrink: 0;
}
.ks-alt .btn-ana { flex: 1; }
.ks-durum { font-size: 12.5px; color: var(--gri); }

/* ---- Rapor ---- */
.ks-rapor { animation: ks-gir .25s ease; }
@keyframes ks-gir { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.ks-rapor-ust {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; flex-wrap: wrap;
    padding-bottom: 12px; margin-bottom: 16px;
    border-bottom: 1px solid var(--cizgi);
}
.ks-rapor-kim { font-size: 12.5px; color: var(--gri); }
.ks-rapor-kim b { color: var(--teal-koyu); }

/* karşılaştırma künyesi */
.ks-kunye { overflow-x: auto; margin-bottom: 20px; }
table.ks-tablo { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 480px; }
table.ks-tablo th {
    font-size: 10.5px; font-weight: 600; letter-spacing: .03em; text-transform: uppercase;
    color: var(--gri); text-align: left; padding: 0 10px 10px 0;
    border-bottom: 1px solid var(--cizgi); vertical-align: bottom;
}
table.ks-tablo th .kt-ad { font-family: var(--display); font-size: 13px; text-transform: none; letter-spacing: 0; color: var(--lacivert); }
table.ks-tablo th .kt-uni { font-size: 11px; text-transform: none; letter-spacing: 0; color: var(--gri); font-weight: 400; }
table.ks-tablo td {
    font-family: var(--veri); padding: 10px 10px 10px 0;
    border-bottom: 1px solid var(--cizgi); color: var(--lacivert);
}
table.ks-tablo td.kt-etiket {
    font-family: var(--govde); font-size: 12.5px; color: var(--gri); white-space: nowrap;
}
table.ks-tablo tbody tr:hover td { background: var(--duman); }
td.kt-en-iyi { color: var(--yesil); font-weight: 600; }

/* rapor metni */
.ks-metin h3 {
    font-family: var(--display); font-weight: 600; font-size: 15px;
    color: var(--lacivert); margin: 20px 0 8px;
    padding-left: 11px; border-left: 3px solid var(--teal);
}
.ks-metin h3:first-child { margin-top: 0; }
.ks-metin p { margin: 0 0 10px; font-size: 14px; line-height: 1.65; color: var(--gri-koyu); }
.ks-metin ul { margin: 0 0 12px; padding-left: 20px; }
.ks-metin li { font-size: 14px; line-height: 1.6; color: var(--gri-koyu); margin-bottom: 6px; }
.ks-metin li::marker { color: var(--teal); }

.ks-feragat {
    margin-top: 18px; padding: 12px 14px;
    background: var(--amber-soluk); border-radius: 10px;
    font-size: 12px; color: var(--amber-koyu); line-height: 1.55;
}

/* yükleniyor */
.ks-bekle { padding: 46px 20px; text-align: center; }
.ks-bekle-nokta { display: inline-flex; gap: 6px; margin-bottom: 14px; }
.ks-bekle-nokta i {
    width: 9px; height: 9px; border-radius: 50%;
    background: var(--teal); display: block;
    animation: ks-zipla 1s infinite ease-in-out;
}
.ks-bekle-nokta i:nth-child(2) { animation-delay: .15s; }
.ks-bekle-nokta i:nth-child(3) { animation-delay: .3s; }
@keyframes ks-zipla { 0%,80%,100% { transform: translateY(0); opacity: .4; } 40% { transform: translateY(-7px); opacity: 1; } }
.ks-bekle p { margin: 0; font-size: 14px; color: var(--gri); }
.ks-bekle small { display: block; margin-top: 6px; font-size: 12px; color: var(--gri-acik); }

/* karşılaştır düğmesi (üst menü) */
.btn-ks {
    display: inline-flex; align-items: center; gap: 7px;
    font-family: var(--govde); font-weight: 600; font-size: 13px;
    color: var(--amber-koyu);
    background: var(--amber-soluk);
    border: 1px solid #F2DCB8;
    padding: 8px 14px; border-radius: 999px; cursor: pointer;
    transition: all .14s;
}
.btn-ks:hover { background: #FBE7C8; border-color: var(--amber); }

@media (prefers-reduced-motion: reduce) {
    .ks-rapor, .ks-bekle-nokta i { animation: none; }
}