/*
 Theme Name:   Arıtma Teması
 Author:       Senin Adın
 Description:  Su arıtma cihazı değerlendirme sitesi için özel olarak geliştirildi.
 Version:      1.9.0 (Tüm Düzeltmeler)
 Text Domain:  aritma-tema
*/

/* ==========================================================================
   1. RENK DEĞİŞKENLERİ VE GENEL RESETLEME
   ========================================================================== */

/* AÇIK TEMA (VARSAYILAN) */
:root, [data-theme="light"] {
    --ana-mavi: #0033A1;
    --ikincil-mavi: #003FC1;
    --buton-turuncu: #FF622D;
    --yildiz-rengi: #f39c12;
	--border-radius: 8px;
    
    --renk-arka-plan: #ffffff;
    --renk-ikincil-arka-plan: #f8f9fa;
    --renk-metin: #495057;
    --renk-baslik: #212529;
    --renk-border: #dee2e6;
    --renk-golge: rgba(0,0,0,0.07);
}

/* KOYU TEMA */
[data-theme="dark"] {
    --ana-mavi: #4dabf7;
    --ikincil-mavi: #74c0fc;
    --buton-turuncu: #FF622D;
    --yildiz-rengi: #f39c12;

    --renk-arka-plan: #121212;
    --renk-ikincil-arka-plan: #1e1e1e;
    --renk-metin: #adb5bd;
    --renk-baslik: #f8f9fa;
    --renk-border: #343a40;
    --renk-golge: rgba(255,255,255,0.05);
}

*, *::before, *::after { box-sizing: border-box; }
body { font-family: "Inter", sans-serif; font-weight: 400; line-height: 1.7; color: var(--renk-metin); margin: 0; background-color: var(--renk-arka-plan); }
.site-icerik, .header-icerik, .footer-icerik { width: 100%; max-width: 1600px; margin-left: auto; margin-right: auto; padding-left: 20px; padding-right: 20px; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--ikincil-mavi); text-decoration: none; } a:hover { color: var(--ana-mavi); }
h1 { font-size: 1.5em; }
h2, h3, h4, h5, h6 { color: var(--renk-baslik); font-weight: 600; }

/* ==========================================================================
   2. HEADER
   ========================================================================== */
body.single-cihaz .site-header { display: none; }
.site-header { border-bottom: 1px solid var(--renk-border); }
.header-ust { background-color: var(--renk-ikincil-arka-plan); border-bottom: 1px solid var(--renk-border); padding: 0.5em 0; }
.ana-navigasyon ul { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 2em; }
.header-alt { background-color: #0033A1; padding: 1em 0; } /* Orijinal Mavi Korundu */
.header-alt .header-icerik { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1em; }
.site-markasi .custom-logo-link { display: inline-block; }
.site-markasi .custom-logo { height: 40px; width: auto; display: block; }
.site-markasi .site-title-fallback { font-size: 1.5em; font-weight: bold; color: #fff; text-decoration: none; }
.site-arama { width: 100%; order: 3; }
.site-arama .search-field {
    width: 100%;
    padding: 0.8em 1.2em;
    font-size: 1em;
    border: 1px solid var(--renk-border);
    border-radius: 50px;
    background-color: var(--renk-arka-plan);
    color: var(--renk-metin);
    transition: border-color 0.3s, box-shadow 0.3s;
}
.site-arama .search-field:focus {
    outline: none;
    border-color: var(--ikincil-mavi);
    box-shadow: 0 0 0 3px rgba(82, 155, 255, 0.2);
}
.site-arama .search-field::placeholder {
    color: var(--renk-placeholder);
    opacity: 1;
}
.buton { background-color: var(--buton-turuncu); color: #fff; padding: 0.6em 1.2em; border-radius: 8px; text-decoration: none; font-weight: bold; display: inline-block; white-space: nowrap; }

/* ==========================================================================
   3. ANA SAYFA, ARŞİV, ARAMA
   ========================================================================== */
.bolum-basligi, .arsiv-basligi, .sayfa-basligi { /* .sayfa-basligi eklendi */
    border-bottom: 2px solid var(--ana-mavi);
    padding-bottom: 0.3em;
    margin-bottom: 1em;
}
.arsiv-basligi h1 {
    margin: 0;
}
.cihaz-listesi { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 1.5em; }
.cihaz-karti { background: var(--renk-ikincil-arka-plan); border: 1px solid var(--renk-border); border-radius: var(--border-radius); overflow: hidden; box-shadow: var(--renk-golge); }
/* ---- KART GÖRÜNÜMÜ DÜZENLEMESİ (RESİM SIFIRLAMA) ---- */
.kart-gorsel img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 'contain' yerine 'cover' olarak değiştirildi */
    aspect-ratio: 1 / 1; /* Daha modern bir kare görünüm için oran 1/1 yapıldı */
}
.kart-icerik {
    padding: 0 15px 15px 15px; /* Üst boşluk sıfır, diğerleri 15px */
}
.kart-baslik { 
    margin: 0 0 0.5em 0; 
    font-size: 1.2em; 
    color: var(--renk-baslik); 
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis;
    padding-top: 15px; /* Resme yapışmaması için başlığa üst boşluk verildi */
}
/* ---- KART GÖRÜNÜMÜ SONU ---- */

.kart-puan-alani { display: flex; align-items: center; gap: 0.5em; font-size: 0.9em; margin-top: 1em; }
.kart-puan-alani .stars .star.dolu { color: var(--yildiz-rengi); }
.kart-oy-sayisi { color: var(--renk-metin); opacity: 0.7; }
.nav-links, .comment-pagination .page-numbers { display: flex; justify-content: center; gap: 0.5em; margin-top: 3em; }

/* ==========================================================================
   4. TEKİL CİHAZ SAYFASI (Düzeltilmiş Hali)
   ========================================================================== */
body.single-cihaz .site-icerik { padding: 0; }
body.single-cihaz .ana-icerik { display: flex; flex-direction: column; }
.cihaz-detay-kapsayici-yeni { order: 1; }
.urun-aciklamasi-tam { order: 2; padding: 0 20px; }
.breadcrumbs { order: 3; padding: 0 20px; }
.yorumlar-alani { order: 4; }
/* DÜZELTME: Resim alanını kısıtlayan max-width ve max-height kuralları kaldırıldı. */
.cihaz-gorsel-alani-yeni {
    width: 100%; /* Alanın tamamını kullanmasını sağlıyoruz */
    margin: 0 auto;
    position: relative;
}
.cihaz-gorsel-alani-yeni img {
    width: 100%; /* Genişliği alana sığdır */
    height: auto; /* Yüksekliği otomatik ayarla */
    display: block;
    border-radius: var(--border-radius);
}
.geri-ok { display: none; }
@media (max-width: 767px) {
    .cihaz-gorsel-alani-yeni { max-width: 100%; max-height: 420px; }
    /* Mobil için !important kuralları bırakıldı, çünkü mobil görünümde tam ekran kaplaması isteniyor olabilir */
    .cihaz-gorsel-alani-yeni img { width: 100% !important; height: 420px !important; max-height: 420px !important; object-fit: cover; }
    .geri-ok { display: flex; align-items: center; justify-content: center; position: absolute; top: 10px; left: 10px; color: #fff; font-size: 24px; font-weight: bold; text-align: center; background: rgba(0, 0, 0, 0.3); width: 40px; height: 40px; border-radius: 5px; text-decoration: none; z-index: 10; transform: translateY(0); }
    .geri-ok:hover { background: rgba(0, 0, 0, 0.5); }
}
.cihaz-bilgi-alani-yeni { margin-top: 1em; padding: 0 20px; }
.cihaz-basligi-yeni { font-size: 1.1em; line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.urun-aciklamasi-tam { margin-top: 2em; }
.breadcrumbs { font-size: 0.9em; color: var(--renk-metin); opacity: 0.8; margin-top: 3em; } .breadcrumbs .separator { margin: 0 0.5em; }
.degerlendirme-kutusu { background-color: var(--renk-ikincil-arka-plan); border-radius: var(--border-radius); padding: 2em; }
body.single-cihaz .degerlendirme-kutusu { width: 100vw; position: relative; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; border-radius: 0; }
.devamini-oku-btn { display: inline-block; margin-top: 1em; font-weight: bold; }
@media (min-width: 768px) { /* Masaüstü için genişlik ayarı ekle (mobil değişmesin) */
    .cihaz-gorsel-alani-yeni {
        width: 80%; /* Mevcut 100%'ü 80%'e düşür ama büyüt (2 kat etkisi için %80 veya daha fazla dene) */
        max-width: none; /* Sınırlamayı kaldır */
        flex-basis: 80%; /* Flex'te büyüt */
    }
    .cihaz-gorsel-alani-yeni img {
        width: 100%; /* Tam kapsayıcı */
        height: auto;
        max-height: 600px; /* Kocaman olmasın */
        object-fit: contain; /* Taşmasın */
    }
    .cihaz-detay-kapsayici-yeni {
        flex-direction: row; /* Yan yana yap (görsel sol, bilgi sağ) */
        gap: 0; /* Aradaki boşluğu sıfırla */
    }
    .cihaz-bilgi-alani-yeni {
        flex: 1; /* Kalan alanı al, sağa itilmesin */
        margin-left: 10px; /* Hafif aralık (boşluk istemiyorsan 0 yap) */
    }
    .lightbox-trigger {
        display: inline-block; /* Lightbox'ı sadece resim boyutunda yap (boş alana tıklama önle) */
        width: auto; /* İçerik boyutunda */
    }
}

/* ==========================================================================
   5. OYLAMA VE YORUMLAR
   ========================================================================== */
.puanlama-alani-genel { display: flex; align-items: center; flex-wrap: wrap; gap: 0.8em; margin: 1em 0; }
.puanlama-alani-genel .ortalama-deger { font-size: 1.5em; font-weight: 700; }
.puanlama-alani-genel .stars-ortalama .star.dolu { color: var(--yildiz-rengi); }
.puan-sayisi { color: var(--renk-metin); opacity: 0.7; }
.standalone-rating .rating-label { text-align: center; }
.standalone-rating .stars-interactive { display: flex; flex-direction: row-reverse; justify-content: center; }
.standalone-rating .stars-interactive .star { font-size: 3em; color: var(--renk-border); cursor: pointer; }
.standalone-rating:not(.disabled) .stars-interactive .star:hover, .standalone-rating:not(.disabled) .stars-interactive .star:hover ~ .star { color: var(--yildiz-rengi); }
.yorumlar-alani { margin-top: 60px; border-top: 1px solid var(--renk-border); padding: 2em 20px 0; }
.comment-list, .comment-list ul, .comment-list ol { list-style: none !important; padding: 0; margin: 0; }
.comment-list > li.comment { padding: 1.5em; border: 1px solid var(--renk-border); border-radius: var(--border-radius); margin-bottom: 1.5em; background-color: var(--renk-arka-plan); }
.comment-list > li.comment:nth-child(even) { background-color: var(--renk-ikincil-arka-plan); }
.comment-list .children { margin-top: 1.5em; padding-left: 20px; border-left: 3px solid var(--renk-border); }
.comment-list .children li.comment { border: none; padding: 0; margin-bottom: 1.5em; background-color: transparent; }
.yorum-govdesi { position: relative; }
.yorum-yazar { display: flex; align-items: center; gap: 1em; margin-bottom: 1em; }
.yazar-meta { display: flex; flex-direction: column; }
.yazar-meta .fn { font-weight: bold; color: var(--renk-baslik); }
.yazar-meta .yorum-tarihi { font-size: 0.8em; color: var(--renk-metin); opacity: 0.7; }
.yorum-metni { clear: both; }
.reply { text-align: right; font-size: 0.9em; margin-top: 1em; }
.comment-pagination { margin-top: 2.5em; }
.comment-pagination .page-numbers { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5em; }
.comment-pagination .page-numbers li { margin: 0; list-style: none !important; }
.comment-pagination .page-numbers a, .comment-pagination .page-numbers span { display: flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; padding: 0.5em; border: 1px solid var(--renk-border); border-radius: 5px; text-decoration: none; color: var(--renk-metin); }
.comment-pagination .page-numbers .current, .comment-pagination .page-numbers a:hover { background-color: var(--ana-mavi); color: #fff; border-color: var(--ana-mavi); }
.comment-pagination .dots { align-self: flex-end; padding-bottom: 0.5em; border: none; }
.comment-form-rating { display: flex; flex-direction: column; margin-bottom: 1em; }
.comment-form-rating label { font-weight: bold; margin-bottom: 0.5em; }
.comment-form input[type="text"], .comment-form input[type="email"], .comment-form textarea { width: 100%; border: 1px solid var(--renk-border); border-radius: 8px; padding: 0.8em; background-color: var(--renk-ikincil-arka-plan); color: var(--renk-metin); }
.form-submit .submit { width: auto; background-color: var(--buton-turuncu); color: #fff; border: none; padding: 0.8em 2em; border-radius: 8px; font-size: 1.1em; cursor: pointer; }

/* ==========================================================================
   6. STANDART SAYFA ŞABLONU (page.php)
   ========================================================================== */
.sayfa-icerik-kapsayici { padding: 2em 0; }
.sayfa-basligi { border-bottom: 2px solid var(--ana-mavi); margin-bottom: 2em; padding-bottom: 1em; }
.sayfa-basligi h1 { margin: 0; }
.sayfa-icerigi p, .sayfa-icerigi ul, .sayfa-icerigi ol { margin-bottom: 1.5em; font-size: 1.1em; }

/* ==========================================================================
   7. ÖZEL FORM SAYFALARI (Giriş, Üye Ol, Cihaz Ekle)
   ========================================================================== */
body.page-template-page-login-php .site-icerik, body.page-template-page-yeni-cihaz-php .site-icerik { padding-left: 5px; padding-right: 5px; }
.login-sayfasi-kapsayici .ana-icerik, .cihaz-ekleme-formu-kapsayici { max-width: 100%; margin: 1em auto; }
.login-form-wrapper, .cihaz-ekleme-formu-kapsayici { background: var(--renk-ikincil-arka-plan); padding: 1.5em; border: 1px solid var(--renk-border); border-radius: var(--border-radius); box-shadow: var(--renk-golge); }
.login-form-wrapper .form-bolumu { display: none; }
.login-form-wrapper .form-bolumu.aktif { display: block; }
.form-baslik { text-align: center; margin-top: 0; margin-bottom: 1.5em; }
.login-form-wrapper label, #yeni-cihaz-formu label { font-weight: 600; font-size: 0.9em; color: var(--renk-baslik); display: block; margin-bottom: 0.5em; }
.login-form-wrapper input[type="text"], .login-form-wrapper input[type="password"], .login-form-wrapper input[type="email"], #yeni-cihaz-formu input[type="text"], #yeni-cihaz-formu select, #yeni-cihaz-formu textarea { width: 100%; padding: 0.8em 1em; border: 1px solid var(--renk-border); border-radius: 8px; background-color: var(--renk-arka-plan); color: var(--renk-metin); font-size: 1em; }
.login-form-wrapper input[type="text"]:focus, .login-form-wrapper input[type="password"]:focus, .login-form-wrapper input[type="email"]:focus, #yeni-cihaz-formu input[type="text"]:focus, #yeni-cihaz-formu select:focus, #yeni-cihaz-formu textarea:focus { outline: none; border-color: var(--ikincil-mavi); box-shadow: 0 0 0 3px rgba(82, 155, 255, 0.2); }
.login-form-wrapper #wp-submit, .login-form-wrapper .login-button .button, #yeni-cihaz-formu .submit { width: 100%; background-color: var(--buton-turuncu); border: none; color: #fff; padding: 0.8em; font-size: 1.1em; font-weight: bold; border-radius: 8px; cursor: pointer; margin-top: 1.5em; }
.form-gecis-linki { text-align: center; margin-top: 2em; font-size: 0.9em; }
.login-hata, .login-mesaj { background-color: #ffebee; border: 1px solid #ffcdd2; padding: 1em; margin-bottom: 1.5em; border-radius: 8px; color: #c62828; font-size: 0.9em; }
[data-theme="dark"] .login-hata, [data-theme="dark"] .login-mesaj { background-color: rgba(239, 83, 80, 0.1); border-color: rgba(239, 83, 80, 0.3); color: #ff8a80; }
.form-cift-sutun { display: grid; grid-template-columns: 1fr; gap: 1.5em; }
#yeni-cihaz-formu .wp-editor-wrap { border: 1px solid var(--renk-border); border-radius: 8px; }
#yeni-cihaz-formu input[type="file"] { padding: 0.7em; background-color: var(--renk-ikincil-arka-plan); }

/* ==========================================================================
   8. FOOTER
   ========================================================================== */
.site-footer { background-color: var(--renk-ikincil-arka-plan); border-top: 1px solid var(--renk-border); color: var(--renk-metin); padding: 2em 0; margin-top: 2em; }
.footer-icerik { display: flex; flex-direction: column; text-align: center; gap: 1em; }

/* ==========================================================================
   9. BÜYÜK EKRAN AYARLARI (MEDIA QUERIES) - DÜZELTİLMİŞ
   ========================================================================== */
@media (min-width: 768px) {
    h1 { font-size: 2.5em; }
    body.page-template-page-login-php .site-icerik, body.page-template-page-yeni-cihaz-php .site-icerik { padding-left: 20px; padding-right: 20px; }
    .login-sayfasi-kapsayici .ana-icerik { max-width: 420px; margin: 4em auto; }
    .cihaz-ekleme-formu-kapsayici { max-width: 700px; margin: 2em auto; }
    body.single-cihaz .site-header { display: block; }
    body.single-cihaz .site-icerik { padding-left: 20px; padding-right: 20px; }
    .header-alt .header-icerik { flex-wrap: nowrap; }
    .site-arama { order: 0; }
    .footer-icerik { flex-direction: row; }
    .breadcrumbs { order: 1; padding: 0; margin: 0; background-color: var(--renk-ikincil-arka-plan); border-bottom: 1px solid var(--renk-border); width: 100vw; position: relative; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; }
    .breadcrumbs .site-icerik { padding-top: 1em; padding-bottom: 1em; }
    .cihaz-detay-kapsayici-yeni { order: 2; padding: 0; margin-top: 3em; }
    .urun-aciklamasi-tam { order: 3; padding: 0; }
    .yorumlar-alani { order: 4; padding-left: 0; padding-right: 0; }
    .cihaz-gorsel-alani-yeni { width: 100%; position: static; margin-left: 0; margin-right: 0; }
    
    /* === SORUNLU KOD DÜZELTİLDİ === */
    .cihaz-gorsel-alani-yeni img {
        border-radius: var(--border-radius);
        height: auto; /* Yüksekliği otomatik yap */
        width: 100%; /* Genişliği alana sığdır */
        /* max-height ve object-fit kaldırıldı */
    }

    body.single-cihaz .degerlendirme-kutusu { width: 100%; position: static; margin-left: 0; margin-right: 0; border-radius: var(--border-radius); }
    .form-cift-sutun { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 992px) {
    h1 { font-size: 3em; }
    .cihaz-detay-kapsayici-yeni { 
        display: grid; 
        grid-template-columns: 3fr 4fr; 
        gap: 4em; 
        align-items: start; 
    }
    .cihaz-basligi-yeni { font-size: 2.2em !important; margin: 0; line-height: 1.2; }
}

/* ==========================================================================
   12. LIGHTBOX (RESİM POP-UP) STİLLERİ
   ========================================================================== */
.lightbox-trigger { 
    display: block; 
    cursor: zoom-in; 
}
#aritma-lightbox {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.9);
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
}
#aritma-lightbox .lightbox-icerik {
    position: relative;
    width: 90vw;
    height: 90vh;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
}
.lightbox-kapat {
    position: absolute;
    top: -15px;
    right: -15px;
    background-color: var(--renk-arka-plan);
    color: var(--renk-baslik);
    border-radius: 50%;
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
    font-weight: bold;
    box-shadow: 0 2px 10px rgba(0,0,0,0.3);
}

/* ==========================================================================
   13. MARKA ARAMA (AUTOCOMPLETE) STİLLERİ
   ========================================================================== */
.marka-arama-kapsayici { position: static; } /* Burayı static yapıyoruz, artık JS yönetecek */
.arama-sonuclari {
    display: none;
    position: fixed; /* POZİSYONU FIXED YAPIYORUZ */
    background-color: var(--renk-ikincil-arka-plan);
    border: 1px solid var(--renk-border);
    border-top: none;
    border-radius: 0 0 8px 8px;
    box-shadow: var(--renk-golge);
    z-index: 9999; /* Her şeyin üstünde olmasını garantile */
    max-height: 200px;
    overflow-y: auto;
}
.arama-sonuclari .sonuc-item { padding: 0.8em 1em; cursor: pointer; transition: background-color 0.2s; }
.arama-sonuclari .sonuc-item:hover { background-color: var(--renk-arka-plan); }

/* ==========================================================================
   14. YENİ CİHAZ FORMU İYİLEŞTİRMELERİ
   ========================================================================== */
.karakter-sayaci {
    display: block;
    text-align: right;
    font-size: 0.8em;
    color: var(--renk-metin);
    opacity: 0.8;
    margin-top: 5px;
}
#gorsel-onizleme-container {
    margin-bottom: 1em;
    border: 2px dashed var(--renk-border);
    padding: 10px;
    border-radius: var(--border-radius);
    max-width: 200px;
}
#gorsel-onizleme {
    max-width: 100%;
    height: auto;
    display: block;
    border-radius: 8px;
}
#form-mesaj-alani {
    margin-bottom: 1.5em;
}
#yeni-cihaz-submit[disabled] {
    background-color: #ccc;
    cursor: not-allowed;
    opacity: 0.7;
}
[data-theme="dark"] #yeni-cihaz-submit[disabled] {
    background-color: #555;
}

/* ==========================================================================
   FİLTRE, KAYDIRMA VE MOBİL İYİLEŞTİRMELER (FİNAL)
   ========================================================================== */

/* ---- Kategori Filtre Butonları (Sadece Ana Sayfada) ---- */
.cihaz-kategori-filtresi {
    width: 100%;
    overflow-x: auto;
    padding-bottom: 15px;
    margin-top: 2em;
    margin-bottom: 1em;
}
.cihaz-kategori-filtresi::-webkit-scrollbar {
    display: none;
}
.filtre-liste {
    display: flex;
    flex-wrap: nowrap;
    gap: 10px;
}
.filtre-buton {
    display: inline-block;
    padding: 8px 20px;
    border: 1px solid var(--renk-border);
    border-radius: 50px;
    white-space: nowrap;
    font-size: 0.9em;
    font-weight: 500;
    color: var(--renk-metin);
    background-color: var(--renk-arka-plan);
    transition: all 0.3s ease;
}
.filtre-buton:hover {
    border-color: var(--ikincil-mavi);
    color: var(--ikincil-mavi);
}
.filtre-buton.aktif {
    background-color: var(--ana-mavi);
    color: #fff;
    border-color: var(--ana-mavi);
}

/* ---- Genel Kaydırıcı Kapsayıcısı ve Oklar ---- */
.kaydirici-kapsayici {
    position: relative;
    margin-bottom: 2em;
}
.kaydirici-ok {
    display: none;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    background-color: rgba(255, 255, 255, 0.9);
    border: 1px solid var(--renk-border);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    transition: all 0.2s ease-in-out;
}
[data-theme="dark"] .kaydirici-ok {
    background-color: rgba(30, 30, 30, 0.8);
    box-shadow: 0 2px 5px rgba(255,255,255,0.1);
}
.kaydirici-ok:hover {
    background-color: var(--renk-arka-plan);
    border-color: var(--ana-mavi);
    color: var(--ana-mavi);
}
.kaydirici-ok.prev {
    left: -20px;
}
.kaydirici-ok.next {
    right: -20px;
}
@media (min-width: 992px) {
    .kaydirici-ok {
        display: block;
    }
}

/* ---- Kaydırmalı Cihaz Listesi (Ana Sayfa ve Arşivler) ---- */
.anasayfa-kaydirmali {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 5px;
    padding-bottom: 20px;
    margin-bottom: -20px;
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.anasayfa-kaydirmali::-webkit-scrollbar {
    display: none;
}
.anasayfa-kaydirmali .cihaz-karti {
    flex: 0 0 calc(50% - 2.5px);
    max-width: 250px;
}
@media (min-width: 768px) {
    .anasayfa-kaydirmali .cihaz-karti {
        flex: 0 0 250px;
    }
}

/* ---- Marka Listesi Yatay Kaydırma (Ana Sayfa) ---- */
.marka-listesi {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 10px;
    padding-bottom: 15px;
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.marka-listesi::-webkit-scrollbar {
    display: none;
}
.marka-etiketi {
    flex-shrink: 0;
}

/* ---- AJAX Yüklenme Animasyonu ve Mesajlar ---- */
.sonuc-yok { width: 100%; text-align: center; padding: 2em; }
.cihaz-listesi.yukleniyor { position: relative; min-height: 250px; display: flex; align-items: center; justify-content: center; }
.loader { border: 5px solid var(--renk-ikincil-arka-plan); border-top: 5px solid var(--ana-mavi); border-radius: 50%; width: 50px; height: 50px; animation: spin 1s linear infinite; }
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

/* ---- Genel Mobil Görünüm İyileştirmeleri ---- */
@media (max-width: 767px) {
    body.home .site-icerik,
    body.archive .site-icerik {
        padding-left: 5px;
        padding-right: 5px;
    }
    .kart-baslik {
        font-size: 0.6em;
    }
}

/* ==========================================================================
   SON DÜZELTMELER: KART BOŞLUĞU VE DEVAMINI OKU
   ========================================================================== */

/* ---- KARTTAKİ RESMİ KENARLARA SIFIRLAMAK İÇİN KESİN ÇÖZÜM ---- */

/* Önceki .kart-icerik ve .kart-baslik kurallarını ezer. 
  !important kullanarak diğer tüm stillerden daha güçlü olmasını sağlarız. 
*/
.cihaz-karti .kart-icerik {
    padding: 0 15px 15px 15px !important;
}

.cihaz-karti .kart-baslik {
    padding-top: 15px !important;
    font-size: 1.2em !important; /* Mobil için eklenen küçültmeyi ezer, gerekirse mobil kuralı tekrar eklenir */
}


/* ---- YENİ DEVAMINI OKU SİSTEMİ İÇİN STİLLER ---- */

.aciklama-kisaltilmis {
    position: relative;
    max-height: 120px; /* Yaklaşık 5-6 satır */
    overflow: hidden;
    transition: max-height 0.5s ease-out;
}

/* Kısaltılmış metnin sonuna "solma" efekti ekle */
.aciklama-kisaltilmis::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 50px;
    background: linear-gradient(to top, var(--renk-arka-plan) 20%, transparent);
}
[data-theme="dark"] .aciklama-kisaltilmis::after {
    background: linear-gradient(to top, var(--renk-arka-plan) 20%, transparent);
}


/* Mobil için küçültülen başlık fontunu tekrar ekleyelim */
@media (max-width: 767px) {
    .cihaz-karti .kart-baslik {
        font-size: 0.8em !important; /* 0.6em çok küçüktü, 0.8em daha okunaklı */
    }
}

/* ==========================================================================
   PUANLAMA SİSTEMİ GÖRSEL DÜZELTMELERİ
   ========================================================================== */

/* "Puanınız kaydedildi" mesajını ortala ve stil ver */
.standalone-rating .rating-message {
    text-align: center;
    margin-top: 1em;
    font-weight: 500;
    color: var(--renk-baslik);
}

/* Daha önce oy verilmiş (disabled) ise, dolu olan yıldızları sarı yap */
.standalone-rating.disabled .stars-interactive .star.dolu {
    color: var(--yildiz-rengi);
}

/* ==========================================================================
   14. YENİ CİHAZ FORMU İYİLEŞTİRMELERİ VE GİRİŞ/KAYIT FORMU
   ========================================================================== */
.karakter-sayaci {
    display: block;
    text-align: right;
    font-size: 0.8em;
    color: var(--renk-metin);
    opacity: 0.8;
    margin-top: 5px;
}
#gorsel-onizleme-container {
    margin-bottom: 1em;
    border: 2px dashed var(--renk-border);
    padding: 10px;
    border-radius: var(--border-radius);
    max-width: 200px;
}
#gorsel-onizleme {
    max-width: 100%;
    height: auto;
    display: block;
    border-radius: 8px;
}
#form-mesaj-alani {
    margin-bottom: 1.5em;
    color: #e00;
    font-weight: 500;
    text-align: center;
    background: var(--renk-ikincil-arka-plan);
    padding: 1em;
    border-radius: var(--border-radius);
}
[data-theme="dark"] #form-mesaj-alani { color: #ff8a80; }

#yeni-cihaz-submit[disabled] {
    background-color: #ccc;
    cursor: not-allowed;
    opacity: 0.7;
}
[data-theme="dark"] #yeni-cihaz-submit[disabled] { background-color: #555; }

.form-sol, .form-sag {
    max-width: 400px;
    margin: 0 auto;
}
.form-satiri {
    margin-bottom: 1.5em;
}
.form-satiri label {
    display: block;
    margin-bottom: 0.5em;
    font-weight: 500;
}
.form-satiri input[type="text"],
.form-satiri input[type="password"],
.form-satiri input[type="email"],
.form-satiri input[type="number"] {
    width: 100%;
    padding: 0.8em;
    border: 1px solid var(--renk-border);
    border-radius: 8px;
    font-size: 1em;
}
.form-satiri input[type="text"]:focus,
.form-satiri input[type="password"]:focus,
.form-satiri input[type="email"]:focus,
.form-satiri input[type="number"]:focus {
    outline: none;
    border-color: var(--ikincil-mavi);
    box-shadow: 0 0 0 3px rgba(82, 155, 255, 0.2);
}
.captcha-kodu {
    font-size: 1.5em;
    font-weight: bold;
    color: #e00;
    margin-left: 0.5em;
}
[data-theme="dark"] .captcha-kodu { color: #ff8a80; }

.toggle-giris, .toggle-kayit {
    color: var(--ikincil-mavi);
    font-weight: 500;
}
.toggle-giris:hover, .toggle-kayit:hover {
    color: var(--ana-mavi);
}
/* ==========================================================================
   HEADER ÇIKIŞ YAP IKONU STİLİ
   ========================================================================== */

.header-araclar {
    display: flex;
    align-items: center;
    gap: 20px; /* Buton ve ikon arasına boşluk ekler */
}

.cikis-ikonu .dashicons-exit {
    color: #fff; /* İkon rengi beyaz */
    font-size: 28px; /* İkon boyutu */
    height: 28px;
    width: 28px;
    transition: transform 0.2s ease-in-out, color 0.2s ease-in-out;
}

.cikis-ikonu:hover .dashicons-exit {
    transform: scale(1.1); /* Üzerine gelince hafifçe büyüsün */
    color: #ffd1d1; /* Üzerine gelince rengi biraz değişsin */
}
[data-theme="dark"] .cikis-ikonu:hover .dashicons-exit {
    color: #fff; /* Koyu temada rengi değişmesin, sadece büyüsün */
}


/* ==========================================================================
   GİRİŞ SAYFASI "BENİ HATIRLA" STİLİ
   ========================================================================== */

.form-hatirla {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 1.5em;
}

.form-hatirla input[type="checkbox"] {
    width: auto; /* Genişliği sıfırla */
    margin: 0;
}

.form-hatirla label {
    margin-bottom: 0; /* Alttaki boşluğu sıfırla */
    font-weight: normal; /* Yazıyı normale çevir */
    font-size: 0.9em;
}

/* Tümünü Görüntüle Kartı Stili */
.tumunu-goruntule-karti {
    background-color: var(--renk-ikincil-arka-plan);
    text-align: center;
    border: 1px dashed var(--renk-border);
}
.tumunu-goruntule {
    display: block;
    padding: 20px;
    color: var(--ikincil-mavi);
    font-weight: bold;
}
.tumunu-goruntule:hover {
    color: var(--ana-mavi);
}

.tumunu-goruntule-karti .kart-icerik {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center; /* Yazı tam ortada */
    height: 100%; /* Kart yüksekliği tam olsun */
}

.tumunu-goruntule-karti .kart-baslik {
    margin-bottom: 10px; /* Hafif aralık */
}

.tumunu-goruntule-karti p {
    margin: 0;
}

body.page-template-page-tum-cihazlar .site-icerik,
body.page-template-page-tum-cihazlar .ana-icerik {
    padding: 0 5px; /* Sağ-sol 5px, ana sayfa gibi */
}

body.page-template-page-tum-cihazlar h1,
body.page-template-page-tum-cihazlar .cihaz-kategori-filtresi {
    padding: 0 5px; /* Başlık ve filtrede de aynı boşluk */
}

/* ==========================================================================
   ÜRÜN DETAY SAYFASI - UZUN BAŞLIK DÜZENLEMESİ (MASAÜSTÜ)
   ========================================================================== */

@media (min-width: 992px) {

    /* Başlığın bulunduğu sağ sütunun esnekliğini artırarak taşmasını önler */
    .cihaz-bilgi-alani-yeni {
        min-width: 0;
    }

    /* Başlığın kendisi için stiller */
    .cihaz-basligi-yeni {
        font-size: 1.9em !important;  /* Font boyutunu biraz küçülttük (2.2em'den) */
        overflow-wrap: break-word;   /* Çok uzun ve boşluksuz bir kelime olursa satırı kırar */
        hyphens: auto;               /* Gerekirse kelimeleri heceleyerek böler */
        white-space: normal; /* Uzun başlıkların alt satıra inmesi için */
        overflow: visible;
    }

}

/* ==========================================================================
   ÜRÜN DETAY SAYFASI - SÜTUN GENİŞLİĞİ VE BOŞLUK AYARI (MASAÜSTÜ)
   ========================================================================== */

@media (min-width: 992px) {
    .cihaz-detay-kapsayici-yeni {
        /* Sütunları 3'e 4 yerine 2'ye 5 oranında ayarla (resim dar, açıklama geniş) */
        grid-template-columns: 2fr 5fr;

        /* Resim ile açıklama arasındaki boşluğu 20px yap */
        gap: 20px;
    }
}

/* ==========================================================================
   MOBİL CİHAZ SAYFASI - GERİ BUTONU YENİ TASARIM
   ========================================================================== */

@media (max-width: 767px) {
    .geri-ok {
        /* Boyut ve Konum */
        width: 44px;
        height: 44px;
        top: 15px;
        left: 15px;

        /* Renk ve Şekil */
        background-color: rgba(0, 0, 0, 0.4);
        border-radius: 50%; /* Tam yuvarlak yapar */
        color: #ffffff;
        
        /* İçerik (Ok) Hizalama */
        font-size: 22px;
        font-weight: normal;
        line-height: 44px; /* Dikeyde ortalamak için */
        text-align: center;
        padding-right: 2px; /* Oku görsel olarak tam ortaya almak için */

        /* Modern Efektler */
        box-shadow: 0 2px 5px rgba(0,0,0,0.2);
        backdrop-filter: blur(5px); /* Arkasındaki resmi hafif bulanıklaştırır (Safari/Chrome) */
        -webkit-backdrop-filter: blur(5px);
        transition: background-color 0.2s ease, transform 0.2s ease;
    }

    .geri-ok:hover {
        background-color: rgba(0, 0, 0, 0.6);
        transform: scale(1.05); /* Üzerine gelince hafifçe büyür */
    }
}

/* ==========================================================================
   BENZER CİHAZLAR KAYDIRICI (ÜRÜN SAYFASI)
   ========================================================================== */

.benzer-cihazlar-bolumu {
    margin-top: 3em;
    padding-top: 2em;
    border-top: 1px solid var(--renk-border);
}

/* Ürün sayfasındaki kaydırıcının mobil için kenar boşlukları */
.single-cihaz .anasayfa-kaydirmali {
    padding-left: 15px;
    padding-right: 15px;
}

/* ==========================================================================
   SINGLE-CIHAZ.PHP - MOBİL VE MASAÜSTÜ SIRA DÜZENLEMESİ (FİNAL)
   ========================================================================== */

/* Ana kapsayıcının esnek bir kutu gibi davranmasını sağlıyoruz */
body.single-cihaz .ana-icerik {
    display: flex;
    flex-direction: column;
}

/* --- MOBİL GÖRÜNÜM SIRALAMASI (767px ve altı) --- */
@media (max-width: 767px) {
    .urun-ana-bolumu {
        order: 1; /* Ana ürün bölümü en üstte */
    }
    .breadcrumbs-wrapper {
        order: 2; /* Kırıntılar hemen altında */
    }
    .benzer-urunler-wrapper {
        order: 3; /* Benzer ürünler daha altta */
    }
    .yorumlar-wrapper {
        order: 4; /* Yorumlar en altta */
    }
}

/* --- MASAÜSTÜ GÖRÜNÜM SIRALAMASI (768px ve üstü) --- */
@media (min-width: 768px) {
    .breadcrumbs-wrapper {
        order: 1; /* Kırıntılar en üste gelsin */
    }
    .urun-ana-bolumu {
        order: 2; /* Ana ürün bölümü onun altına gelsin */
    }
    .benzer-urunler-wrapper {
        order: 3; /* Benzer ürünler */
    }
    .yorumlar-wrapper {
        order: 4; /* Yorumlar */
    }
    
    /* Masaüstünde kırıntıların tam genişlikli bar stilini korumasını sağla */
    .breadcrumbs-wrapper .breadcrumbs {
        margin-top: 0;
        margin-bottom: 0;
        background-color: var(--renk-ikincil-arka-plan);
        border-bottom: 1px solid var(--renk-border);
        width: 100vw;
        position: relative;
        left: 50%;
        right: 50%;
        margin-left: -50vw;
        margin-right: -50vw;
    }
    .breadcrumbs-wrapper .breadcrumbs .site-icerik {
        padding-top: 1em;
        padding-bottom: 1em;
    }
}

/* ==========================================================================
   MOBİL GERİ OKU İKON BOYUTU DÜZELTMESİ
   ========================================================================== */
@media (max-width: 767px) {
    .geri-ok svg {
        width: 14px;
        height: auto;
    }
}

/* ==========================================================================
   ANASAYFA - TÜMÜNÜ GÖRÜNTÜLE KARTI TASARIMI
   ========================================================================== */

/* Kartın arka planını ve genel çerçevesini ayarla */
.tumunu-goruntule-karti {
    background-color: #FFF3EF; /* Buton turuncusunun çok açık bir tonu */
    border: 1px solid rgba(255, 98, 45, 0.3);
    transition: all 0.3s ease;
}
[data-theme="dark"] .tumunu-goruntule-karti {
    background-color: #2f2019;
    border-color: rgba(255, 98, 45, 0.3);
}


/* Üzerine gelince hafif bir büyüme ve gölge efekti */
.tumunu-goruntule-karti:hover {
    box-shadow: 0 8px 25px rgba(255, 98, 45, 0.15);
    transform: translateY(-5px);
    border-color: var(--buton-turuncu);
}

/* Link etiketini tüm kartı kaplayacak ve içeriği ortalayacak şekilde ayarla */
.tumunu-goruntule-karti a.tumunu-goruntule {
    display: flex;
    flex-direction: column;
    justify-content: center; /* Dikeyde ortala */
    align-items: center;     /* Yatayda ortala */
    height: 100%;            /* Tüm kart yüksekliğini kullan */
    text-align: center;
    padding: 20px;
}

/* Yazı renklerini ve stillerini ayarla */
.tumunu-goruntule-karti .kart-baslik {
    color: var(--ana-mavi); /* Ana başlık rengi (mavi) */
    font-size: 1.2em;
    font-weight: 700;
}

.tumunu-goruntule-karti p {
    color: var(--renk-metin); /* İkincil yazı rengi (normal metin rengi) */
    margin: 5px 0 0 0;
    font-size: 0.9em;
}

/* ==========================================================================
   MASAÜSTÜ KART BOYUTLARI VE FONT OPTİMİZASYONU
   ========================================================================== */

@media (min-width: 768px) {

    /* 1. Kaydırıcılardaki kartların genişliğini küçült (Örn: Anasayfa) */
    .anasayfa-kaydirmali .cihaz-karti {
        flex-basis: 200px; /* 250px'den 200px'e düşürüldü */
    }

    /* 2. Izgara listesindeki (Örn: Tüm Cihazlar) kartları yeniden boyutlandır */
    .tum-cihaz-listesi {
        /* Sütun sayısını sabit tutmak yerine, 200px'lik kartlardan sığabildiği kadarını ekle */
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    }

    /* 3. Tüm kartlardaki başlık fontunu küçült */
    .cihaz-karti .kart-baslik {
        font-size: 1em !important; /* Biraz daha küçük ve zarif bir başlık */
    }

}

/* ==========================================================================
   TÜM SORUNLAR İÇİN NİHAİ DÜZELTME PAKETİ
   ========================================================================== */

/* --- "Devamını Oku" Stil Düzeltmesi --- */
.aciklama-kisaltilmis {
    position: relative;
    max-height: 120px;
    overflow: hidden;
}
.aciklama-kisaltilmis::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 50px;
    background: linear-gradient(to top, var(--renk-arka-plan) 20%, transparent);
}

/* --- "Cihaz Ekle" Sayfası Tasarım Düzeltmeleri --- */
#yeni-cihaz-formu .form-cift-sutun {
    align-items: start;
}
.arama-sonuclari {
    left: 0;
    width: 100%;
    background-color: var(--renk-ikincil-arka-plan);
    border-top: none;
}

/* --- Popüler Markaların Alt Satıra Kaymasını Engelleme --- */
.marka-etiketi {
    white-space: nowrap;
}

/* ==========================================================================
   TÜM CİHAZLAR SAYFASI - NİHAİ OTOMATİK GRID YAPISI
   ========================================================================== */

/* Bu kural, listeyi hem mobil hem masaüstü için doğru şekilde ayarlar */
.tum-cihaz-listesi {
    display: grid; 
    gap: 15px;
    max-width: none;
    margin: 0;
    grid-template-columns: repeat(2, 1fr);
}

/* Orta ve geniş ekranlar için sütun sayısını OTOMATİK ayarla */
@media (min-width: 768px) {
    .tum-cihaz-listesi {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    }
}

/* ==========================================================================
   FOOTER & TEMA DEĞİŞTİRİCİ STİLLERİ
   ========================================================================== */

.site-footer {
    background-color: var(--renk-ikincil-arka-plan);
    border-top: 1px solid var(--renk-border);
    color: var(--renk-metin);
}

.footer-icerik {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 1.5em;
}

.footer-sol {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1em;
}

.footer-navigasyon ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.5em;
}

.site-bilgisi {
    font-size: 0.9em;
    display: block !important; /* Mobilde görünmesini garantiler */
}

/* Tema Değiştirici Buton */
#theme-toggle {
    background: none;
    border: 1px solid var(--renk-border);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    padding: 8px;
    cursor: pointer;
    color: var(--renk-metin);
    transition: color 0.2s ease, border-color 0.2s ease;
}

#theme-toggle:hover {
    color: var(--ikincil-mavi);
    border-color: var(--ikincil-mavi);
}

#theme-toggle .sun-icon,
#theme-toggle .moon-icon {
    width: 100%;
    height: 100%;
    display: none;
}

html[data-theme="light"] #theme-toggle .moon-icon {
    display: block;
}

html[data-theme="dark"] #theme-toggle .sun-icon {
    display: block;
}

/* Tablet ve üstü için footer düzeni */
@media (min-width: 768px) {
    .footer-icerik {
        flex-direction: row;
        justify-content: space-between;
    }
    .footer-sol {
        text-align: left;
        align-items: flex-start;
    }
}

/* ==========================================================================
   SON İKİ PÜRÜZ İÇİN DÜZELTMELER
   ========================================================================== */

/* 1. AÇIK TEMADA FOOTER'I TEKRAR MAVİ YAPMA */
/* Varsayılan (Açık Tema) */
.site-footer {
    background-color: #0033A1; /* Orijinal Mavi */
    color: #fff;
    border-top: 1px solid transparent;
}
/* Koyu Tema için üzerine yaz */
[data-theme="dark"] .site-footer {
    background-color: var(--renk-ikincil-arka-plan);
    color: var(--renk-metin);
    border-top: 1px solid var(--renk-border);
}

/* ==========================================================================
   TEMA DEĞİŞTİRİCİ İKON RENK DÜZELTMELERİ
   ========================================================================== */

/* Açık temada, footer mavi iken ikonları beyaz yap */
.site-footer {
    background-color: #0033A1;
    color: #a0b8e0; /* Beyaza yakın soluk mavi */
    border-top: none;
}

.site-footer a {
    color: #fff;
}

.site-footer #theme-toggle {
    color: #fff;
    border-color: rgba(255, 255, 255, 0.5);
}

.site-footer #theme-toggle:hover {
    border-color: #fff;
}

/* Koyu temaya geçildiğinde bu kuralları ez ve değişkenleri kullan */
[data-theme="dark"] .site-footer {
    background-color: var(--renk-ikincil-arka-plan);
    color: var(--renk-metin);
    border-top: 1px solid var(--renk-border);
}

[data-theme="dark"] .site-footer a {
    color: var(--ikincil-mavi);
}
[data-theme="dark"] .site-footer a:hover {
    color: var(--ana-mavi);
}

[data-theme="dark"] .site-footer #theme-toggle {
    color: var(--renk-metin);
    border-color: var(--renk-border);
}
[data-theme="dark"] .site-footer #theme-toggle:hover {
    color: var(--ikincil-mavi);
    border-color: var(--ikincil-mavi);
}

/* ==========================================================================
   VS KARŞILAŞTIRMA MODÜLÜ STİLLERİ (GÜNCELLENDİ)
   ========================================================================== */

/* --- Buton --- */
.cihaz-baslik-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.5em;
    margin-bottom: 1em;
}
.vs-ekle-buton {
    font-size: 0.8em;
    padding: 0.5em 1em;
}

/* --- Modal --- */
.vs-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 10000;
    display: none;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(5px);
}
.vs-modal {
    background-color: var(--renk-arka-plan);
    border-radius: var(--border-radius);
    padding: 2em;
    width: 90%;
    max-width: 600px;
    position: relative;
    box-shadow: 0 10px 40px rgba(0,0,0,0.3);
}
.vs-modal h2 { margin-top: 0; text-align: center; }
.vs-modal-close {
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 2.5em;
    line-height: 1;
    background: none;
    border: none;
    color: var(--renk-metin);
    cursor: pointer;
    opacity: 0.5;
}
.vs-modal-close:hover { opacity: 1; }

.vs-secim-alani {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1em;
    margin-bottom: 1.5em;
}
.vs-cihaz-kutusu {
    width: 45%;
    height: 150px;
    border: 2px dashed var(--renk-border);
    border-radius: var(--border-radius);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 10px;
    cursor: pointer;
    position: relative;
    transition: border-color 0.2s ease;
}
#vs-cihaz-2-kutu:hover { border-color: var(--ikincil-mavi); }
.vs-cihaz-kutusu img {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: 50%;
    margin-bottom: 0.5em;
}
.vs-cihaz-adi { font-size: 0.9em; font-weight: 500; }
.vs-secim-tetikleyici .ikon { font-size: 2em; line-height: 1; }
.vs-text { font-weight: bold; font-size: 1.2em; color: var(--renk-metin); }

/* --- DÜZELTME: MODAL İÇİ FORM ELEMANLARI STİLLERİ --- */
.vs-arama-alani { margin-bottom: 1.5em; }
#vs-arama-input,
#vs-aciklama {
    width: 100%;
    padding: 0.8em 1em;
    border: 1px solid var(--renk-border);
    border-radius: 8px;
    font-size: 1em;
    font-family: inherit;
    background-color: var(--renk-arka-plan);
    color: var(--renk-metin);
    transition: border-color 0.3s, box-shadow 0.3s;
}
#vs-arama-input:focus,
#vs-aciklama:focus {
    outline: none;
    border-color: var(--ikincil-mavi);
    box-shadow: 0 0 0 3px rgba(82, 155, 255, 0.2);
}
#vs-aciklama {
    min-height: 100px;
    resize: vertical;
    margin-bottom: 1.5em;
}

#vs-arama-sonuclari {
    max-height: 150px;
    overflow-y: auto;
    border: 1px solid var(--renk-border);
    border-top: none;
    border-radius: 0 0 8px 8px;
    background-color: var(--renk-arka-plan);
}
.vs-arama-item { display: flex; align-items: center; gap: 10px; padding: 10px; cursor: pointer; }
.vs-arama-item:hover { background-color: var(--renk-ikincil-arka-plan); }
.vs-arama-item img { width: 40px; height: 40px; border-radius: 50%; }
.vs-sonuc-yok { padding: 10px; text-align: center; font-style: italic; }

.vs-modal-footer { display: flex; justify-content: flex-end; gap: 1em; }
.vs-modal-iptal { background-color: var(--renk-ikincil-arka-plan); color: var(--renk-metin); border: 1px solid var(--renk-border); }

/* ==========================================================================
   KARŞILAŞMA SAYFASI (single-karsilasma.php) STİLLERİ (SON DÜZENLEME)
   ========================================================================== */

.karsilasma-container {
    max-width: none;
    margin: 0 auto;
}

/* Masaüstü için 2 sütunlu ana yapı */
@media (min-width: 992px) {
    .karsilasma-grid-container {
        display: grid;
        grid-template-columns: auto 1fr; /* Sol sabit, sağ esnek */
        gap: 4em;
        /* align-items: start; kaldırıldı, bu sticky özelliğini bozabiliyor */
    }
    .karsilasma-sol-sutun {
        max-width: 572px;
        width: 100%;
    }
    /* Sağdaki açıklama alanını yapışkan yapar */
    .karsilasma-sag-sutun {
        position: sticky;
        top: 2em;
    }
}

.karsilasma-baslik {
    text-align: center;
    margin-bottom: 2em;
}
.karsilasma-baslik h1 {
    font-size: 1.5em;
    line-height: 1.4;
    font-weight: 600;
}

/* Karşılaşma alanı ve VS ikonu */
.karsilasma-alani {
    display: flex;
    justify-content: center;
    position: relative;
    gap: 12px;
}
.vs-orta-bolum {
    position: absolute;
    left: 50%;
    top: 180px; /* Dikeyde tam ortalama */
    transform: translate(-50%, -50%);
    z-index: 2;
}
.vs-icon {
    display: flex; align-items: center; justify-content: center;
    width: 56px; height: 56px; border-radius: 50%;
    background-color: var(--buton-turuncu);
    color: #fff;
    border: 4px solid var(--renk-arka-plan);
    box-shadow: 0 0 15px rgba(0,0,0,0.2);
    font-weight: bold;
}

/* Karşılaştırma kartları */
.vs-cihaz {
    width: calc(50% - 6px);
    max-width: 280px;
    text-align: center;
    border: 2px solid transparent;
    border-radius: var(--border-radius);
    overflow: hidden;
    background-color: var(--renk-ikincil-arka-plan);
    transition: all 0.3s ease;
}
.vs-cihaz img { width: 100%; height: auto; aspect-ratio: 1/1; object-fit: cover; }
.vs-cihaz-icerik { padding: 15px; }
.vs-cihaz h3 { margin: 0 0 0.5em 0; font-size: 1em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vs-puan-gosterge { font-size: 1.2em; font-weight: bold; }
.vs-puan-gosterge .yildiz { color: var(--yildiz-rengi); }

/* Kazanan/Berabere kart stilleri */
.vs-cihaz.vs-winner { border-color: var(--buton-turuncu); }
.vs-cihaz.vs-draw { border-color: var(--ikincil-mavi); }

/* Oylama alanı */
.vs-oylama-sonuc-alani { text-align: center; margin-top: 2.5em; padding: 2em; background-color: var(--renk-ikincil-arka-plan); border-radius: var(--border-radius); }
#vs-oy-ver-buton { padding: 0.8em 2.5em; font-size: 1.1em; cursor: pointer; }
.vs-slider-container { display: flex; align-items: center; gap: 1em; margin-bottom: 1.5em; }
.vs-slider { -webkit-appearance: none; appearance: none; width: 100%; height: 8px; background: var(--renk-border); outline: none; border-radius: 5px; }
.vs-slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 24px; height: 24px; background: var(--ana-mavi); cursor: pointer; border-radius: 50%; }
.vs-slider::-moz-range-thumb { width: 24px; height: 24px; background: var(--ana-mavi); cursor: pointer; border-radius: 50%; border:none; }

/* Sağ Sütun Stilleri */
.karsilasma-sag-sutun { margin-top: 2em; }
.karsilasma-aciklama { margin-bottom: 3em; }

/* Yorumlar alanını tam genişlik yap */
.karsilasma-yorumlar { 
    max-width: none; /* Genişlik limitini kaldır */
    margin: 3em 0 0 0; /* Üst boşluk ver, auto'yu kaldır */
    padding-top: 2em; 
    border-top: 1px solid var(--renk-border);
}

/* Mobil için Ayarlar */
@media (max-width: 991px) {
    .karsilasma-alani { flex-wrap: wrap; }
    .vs-orta-bolum { top: 50%; }
}
@media (max-width: 767px) {
    body.single-karsilasma .site-icerik { padding: 0 10px; }
    .vs-oylama-sonuc-alani { width: 100vw; margin-left: calc(50% - 50vw); border-radius: 0; }
}