/* =========================================================
   OtoDanışmanım — Ana Stil Dosyası
   ========================================================= */
/* ----- Popüler Markalar ----- */
.bolum-baslik-satir { display:flex; align-items:baseline; gap:1rem; flex-wrap:wrap; margin-bottom:1.25rem; }
.bolum-baslik { font-size:1.5rem; font-weight:800; color:var(--renk-birincil); }  /* Bölüm ana başlığı */
.bolum-alt { font-size:0.875rem; color:var(--renk-metin-hafif); }  /* Bölüm alt açıklaması */
/* Popüler Markalar bölümü: ".marka-grid" öğesinin stili */
.marka-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 0.85rem; margin-bottom: 3rem; }
/* Popüler Markalar bölümü: ".marka-karti" öğesinin stili */
.marka-karti { display: flex; align-items: center; gap: 0.85rem; background: #fff; border: 1.5px solid var(--renk-sinir); border-radius: 14px; padding: 0.9rem 1rem; text-decoration: none; color: var(--renk-metin); transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s; cursor: pointer; position: relative; }
/* Popüler Markalar bölümü: ".marka-karti:hover" öğesinin stili — fare üzerine gelince */
.marka-karti:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(26,58,107,0.13); border-color: var(--renk-birincil); }
.mk-bilgi { display:flex; flex-direction:column; gap:2px; flex:1; min-width:0; }  /* Marka kartı bilgi sütunu */
.mk-isim { font-size:0.9rem; font-weight:800; color:var(--renk-metin); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }  /* Marka adı (taşarsa kırpılır) */
.mk-ok { font-size:1.2rem; color:var(--renk-metin-hafif); margin-left:auto; flex-shrink:0; }  /* Sağdaki yön oku */
/* Marka sayfası başlık */
.marka-sayfa-baslik { background: #fff; border-radius: 20px; padding: 2rem; box-shadow: var(--golge-hafif); margin-bottom: 1.5rem; }
/* Popüler Markalar bölümü: ".marka-baslik-sol" öğesinin stili */
.marka-baslik-sol { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; }
.marka-isim { font-size:2rem; font-weight:900; color:var(--renk-birincil); margin-bottom:0.2rem; }  /* Marka sayfası başlığı */
/* Responsive kural grubu — koşul: (max-width:640px) */
@media (max-width:640px) {
  .marka-grid { grid-template-columns: repeat(auto-fill, minmax(140px,1fr)); }  /* Mobilde daha dar marka kartları */
  .marka-karti { padding:0.75rem 0.8rem; gap:0.65rem; }  /* Mobilde kart iç boşluğunu küçült */
  .mk-isim { font-size:0.82rem; }  /* Mobilde marka adını küçült */
}
/* ----- CSS Değişkenleri ----- */
:root { --renk-birincil: #1a3a6b; --renk-ikincil: #e85d04; --renk-ikincil-acik: #ff7a28; --renk-arkaplan: #f4f6fb; --renk-kart: #ffffff; --renk-metin: #1e2d3d; --renk-metin-hafif: #5a6a7e; --renk-sinir: #dde3ee; --renk-kronik: #c0392b; --renk-kronik-arkaplan: #fdf2f2; --renk-basari: #27ae60; --renk-uyari: #f39c12; --golge-hafif: 0 2px 8px rgba(26, 58, 107, 0.08); --golge-orta: 0 4px 20px rgba(26, 58, 107, 0.14); --golge-guclu: 0 8px 40px rgba(26, 58, 107, 0.20); --yaricap: 12px; --yaricap-buyuk: 20px; --gecis: 0.25s ease; --font-ana: 'Segoe UI', system-ui, -apple-system, sans-serif; }
/* ----- Reset & Temel ----- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
/* Reset & Temel bölümü: "html" öğesinin stili */
html { scroll-behavior: smooth; font-size: 16px; }
/* Reset & Temel bölümü: "body" öğesinin stili */
body { font-family: var(--font-ana); background-color: var(--renk-arkaplan); color: var(--renk-metin); line-height: 1.6; min-height: 100vh; display: flex; flex-direction: column; }
/* Reset & Temel bölümü: "img" öğesinin stili */
img { max-width: 100%; height: auto; display: block; }
/* Reset & Temel bölümü: "a" öğesinin stili */
a { color: inherit; text-decoration: none; }
/* Reset & Temel bölümü: "ul" öğesinin stili */
ul { list-style: none; }
/* ----- Yardımcı Sınıflar ----- */
.container { width: 100%; max-width: 1200px; margin-inline: auto; padding-inline: 1.25rem; }
/* Yardımcı Sınıflar bölümü: ".sr-only" öğesinin stili */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
/* ----- Header / Navigasyon ----- */
header { background: var(--renk-birincil); position: sticky; top: 0; z-index: 1000; box-shadow: var(--golge-orta); }
/* Header / Navigasyon bölümü: "nav" öğesinin stili */
nav { display: flex; align-items: center; justify-content: space-between; gap: 1rem; height: 64px; max-width: 1200px; margin-inline: auto; padding-inline: 1.25rem; }
/* Logo */
.logo { display: flex; align-items: center; gap: 0.5rem; font-size: 1.5rem; font-weight: 800; color: #ffffff; letter-spacing: -0.5px; }
/* Header / Navigasyon bölümü: ".logo span" öğesinin stili */
.logo span { color: var(--renk-ikincil); }
/* Nav Linkleri */
.nav-linkler { display: flex; align-items: center; gap: 0.25rem; }
/* Header / Navigasyon bölümü: ".nav-linkler a" öğesinin stili */
.nav-linkler a { color: rgba(255, 255, 255, 0.85); font-size: 0.9rem; font-weight: 500; padding: 0.4rem 0.85rem; border-radius: 8px; transition: background var(--gecis), color var(--gecis); }
/* Header / Navigasyon bölümü: ".nav-linkler a:hover, .nav-linkler a.aktif" öğesinin stili — fare üzerine gelince */
.nav-linkler a:hover, .nav-linkler a.aktif { background: rgba(255, 255, 255, 0.15); color: #ffffff; }
/* Hamburger */
.hamburger { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 4px; }
/* Header / Navigasyon bölümü: ".hamburger span" öğesinin stili */
.hamburger span { display: block; width: 24px; height: 2px; background: #fff; border-radius: 2px; transition: transform var(--gecis), opacity var(--gecis); }
/* ----- Hero Bölümü ----- */
.hero { background: linear-gradient(135deg, var(--renk-birincil) 0%, #2563b0 50%, #1a3a6b 100%); color: #ffffff; padding-block: 5rem 4rem; text-align: center; position: relative; overflow: hidden; }
/* Hero Bölümü bölümü: ".hero::before" öğesinin stili — ön sözde-öğe */
.hero::before { content: ''; position: absolute; inset: 0; background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); }
/* Hero Bölümü bölümü: ".hero .container" öğesinin stili */
.hero .container { position: relative; }
/* Hero Bölümü bölümü: ".hero h1" öğesinin stili */
.hero h1 { font-size: clamp(1.6rem, 4vw, 2.8rem); font-weight: 800; line-height: 1.25; margin-bottom: 1rem; max-width: 700px; margin-inline: auto; }
/* Hero Bölümü bölümü: ".hero h1 em" öğesinin stili */
.hero h1 em { color: var(--renk-ikincil); font-style: normal; }
/* Hero Bölümü bölümü: ".hero p" öğesinin stili */
.hero p { font-size: 1.1rem; color: rgba(255, 255, 255, 0.8); max-width: 500px; margin-inline: auto; margin-bottom: 2.5rem; }
/* Arama Kutusu */
.arama-kutusu { display: flex; gap: 0.5rem; max-width: 560px; margin-inline: auto; background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.25); border-radius: 50px; padding: 0.4rem 0.4rem 0.4rem 1.25rem; }
/* Hero Bölümü bölümü: ".arama-kutusu input" öğesinin stili */
.arama-kutusu input { flex: 1; background: transparent; border: none; outline: none; color: #ffffff; font-size: 1rem; font-family: var(--font-ana); }
/* Hero Bölümü bölümü: ".arama-kutusu input::placeholder" öğesinin stili — placeholder metni */
.arama-kutusu input::placeholder { color: rgba(255, 255, 255, 0.55); }
/* Hero Bölümü bölümü: ".btn-ara" öğesinin stili */
.btn-ara { background: var(--renk-ikincil); color: #ffffff; border: none; border-radius: 40px; padding: 0.65rem 1.5rem; font-size: 0.95rem; font-weight: 600; cursor: pointer; transition: background var(--gecis), transform var(--gecis); white-space: nowrap; }
/* Hero Bölümü bölümü: ".btn-ara:hover" öğesinin stili — fare üzerine gelince */
.btn-ara:hover { background: var(--renk-ikincil-acik); transform: translateY(-1px); }
/* ----- İstatistik Çubuğu ----- */
.istatistik-cubugu { background: #ffffff; border-bottom: 1px solid var(--renk-sinir); }
/* İstatistik Çubuğu bölümü: ".istatistikler" öğesinin stili */
.istatistikler { display: flex; align-items: center; justify-content: center; gap: 0; padding-block: 0.85rem; }
/* İstatistik Çubuğu bölümü: ".istat-item" öğesinin stili */
.istat-item { display: flex; align-items: center; gap: 0.5rem; padding-inline: 2rem; font-size: 0.9rem; color: var(--renk-metin-hafif); }
/* İstatistik Çubuğu bölümü: ".istat-item:not(:last-child)" öğesinin stili — son öğe, belirli durum dışında */
.istat-item:not(:last-child) { border-right: 1px solid var(--renk-sinir); }
/* İstatistik Çubuğu bölümü: ".istat-sayi" öğesinin stili */
.istat-sayi { font-size: 1.2rem; font-weight: 800; color: var(--renk-birincil); }
/* ----- Filtre Çubuğu ----- */
.filtre-bolumu { padding-block: 1.75rem 1rem; }
/* Filtre Çubuğu bölümü: ".filtre-baslik" öğesinin stili */
.filtre-baslik { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; flex-wrap: wrap; gap: 0.5rem; }
/* Filtre Çubuğu bölümü: ".filtre-baslik h2" öğesinin stili */
.filtre-baslik h2 { font-size: 1.5rem; font-weight: 700; color: var(--renk-birincil); }
/* Filtre Çubuğu bölümü: ".filtre-etiketleri" öğesinin stili */
.filtre-etiketleri { display: flex; gap: 0.5rem; flex-wrap: wrap; }
/* Filtre Çubuğu bölümü: ".filtre-btn" öğesinin stili */
.filtre-btn { background: #ffffff; border: 1.5px solid var(--renk-sinir); border-radius: 50px; padding: 0.35rem 1rem; font-size: 0.85rem; font-weight: 500; cursor: pointer; color: var(--renk-metin-hafif); transition: all var(--gecis); }
/* Filtre Çubuğu bölümü: ".filtre-btn:hover, .filtre-btn.aktif" öğesinin stili — fare üzerine gelince */
.filtre-btn:hover, .filtre-btn.aktif { background: var(--renk-birincil); border-color: var(--renk-birincil); color: #ffffff; }
/* Sonuç sayısı */
.sonuc-sayisi { font-size: 0.875rem; color: var(--renk-metin-hafif); padding-bottom: 0.5rem; }
/* ----- Araç Grid ----- */
.arac-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 1.25rem; padding-bottom: 3rem; }
/* Araç Kartı */
.arac-karti { background: var(--renk-kart); border-radius: var(--yaricap-buyuk); box-shadow: var(--golge-hafif); overflow: hidden; transition: transform var(--gecis), box-shadow var(--gecis); cursor: pointer; border: 1.5px solid transparent; display: flex; flex-direction: column; }
/* Araç Grid bölümü: ".arac-karti:hover" öğesinin stili — fare üzerine gelince */
.arac-karti:hover { transform: translateY(-4px); box-shadow: var(--golge-guclu); border-color: var(--renk-birincil); }
/* Araç Grid bölümü: ".kart-ust" öğesinin stili */
.kart-ust { padding: 1.5rem; display: flex; align-items: center; gap: 1rem; position: relative; }
/* Araç Grid bölümü: ".arac-emoji" öğesinin stili */
.arac-emoji { width: 60px; height: 60px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.8rem; flex-shrink: 0; }
/* Araç Grid bölümü: ".kart-bilgi" öğesinin stili */
.kart-bilgi { flex: 1; min-width: 0; }
/* Araç Grid bölümü: ".kart-marka" öğesinin stili */
.kart-marka { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.8px; color: var(--renk-metin-hafif); }
/* Araç Grid bölümü: ".kart-model" öğesinin stili */
.kart-model { font-size: 1.25rem; font-weight: 800; color: var(--renk-metin); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Araç Grid bölümü: ".kart-yil" öğesinin stili */
.kart-yil { font-size: 0.8rem; color: var(--renk-metin-hafif); }
/* Kronik Rozet (kart üstünde) */
.kronik-rozet-kucuk { position: absolute; top: 1rem; right: 1rem; background: var(--renk-kronik); color: #fff; font-size: 0.65rem; font-weight: 700; padding: 0.2rem 0.5rem; border-radius: 50px; display: flex; align-items: center; gap: 0.25rem; }
/* Araç Grid bölümü: ".kart-alt" öğesinin stili */
.kart-alt { padding: 0 1.5rem 1.5rem; flex: 1; display: flex; flex-direction: column; gap: 0.75rem; }
/* Araç Grid bölümü: ".kart-aciklama" öğesinin stili */
.kart-aciklama { font-size: 0.875rem; color: var(--renk-metin-hafif); line-height: 1.5; }
/* Araç Grid bölümü: ".kart-puan-satiri" öğesinin stili */
.kart-puan-satiri { display: flex; align-items: center; justify-content: space-between; }
/* ----- Yıldız Gösterimi ----- */
.yildizlar { display: flex; gap: 2px; }
/* Yıldız Gösterimi bölümü: ".yildiz" öğesinin stili */
.yildiz { font-size: 1rem; color: #d0d0d0; line-height: 1; transition: color var(--gecis); }
/* Yıldız Gösterimi bölümü: ".yildiz.dolu" öğesinin stili */
.yildiz.dolu { color: #f5a623; }
/* Yıldız Gösterimi bölümü: ".yildiz.yarim" öğesinin stili */
.yildiz.yarim { background: linear-gradient(90deg, #f5a623 50%, #d0d0d0 50%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
/* Yıldız Gösterimi bölümü: ".puan-metin" öğesinin stili */
.puan-metin { font-size: 0.85rem; color: var(--renk-metin-hafif); }
/* Yıldız Gösterimi bölümü: ".yorum-sayisi" öğesinin stili */
.yorum-sayisi { font-size: 0.8rem; color: var(--renk-metin-hafif); }
/* Araç Tipi Etiketleri */
.tip-etiketler { display: flex; gap: 0.4rem; flex-wrap: wrap; }
/* Yıldız Gösterimi bölümü: ".tip-etiketi" öğesinin stili */
.tip-etiketi { font-size: 0.72rem; font-weight: 600; padding: 0.2rem 0.6rem; border-radius: 50px; background: var(--renk-arkaplan); color: var(--renk-metin-hafif); border: 1px solid var(--renk-sinir); }
/* Yıldız Gösterimi bölümü: ".btn-incele" öğesinin stili */
.btn-incele { display: block; width: 100%; text-align: center; background: var(--renk-birincil); color: #ffffff; padding: 0.65rem; border-radius: 10px; font-size: 0.9rem; font-weight: 600; border: none; cursor: pointer; transition: background var(--gecis); margin-top: auto; font-family: var(--font-ana); }
/* Yıldız Gösterimi bölümü: ".btn-incele:hover" öğesinin stili — fare üzerine gelince */
.btn-incele:hover { background: #2563b0; }
/* Sonuç yok */
.sonuc-yok { text-align: center; padding: 4rem 1rem; grid-column: 1 / -1; color: var(--renk-metin-hafif); }
/* Yıldız Gösterimi bölümü: ".sonuc-yok .emoji" öğesinin stili */
.sonuc-yok .emoji { font-size: 3rem; display: block; margin-bottom: 1rem; }
/* ----- Nasıl Çalışır Bölümü ----- */
.nasil-calisir { background: var(--renk-birincil); color: #ffffff; padding-block: 4rem; }
/* Nasıl Çalışır Bölümü bölümü: ".nasil-calisir h2" öğesinin stili */
.nasil-calisir h2 { text-align: center; font-size: 1.8rem; font-weight: 800; margin-bottom: 3rem; }
/* Nasıl Çalışır Bölümü bölümü: ".adimlar" öğesinin stili */
.adimlar { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 2rem; }
/* Nasıl Çalışır Bölümü bölümü: ".adim" öğesinin stili */
.adim { text-align: center; }
/* Nasıl Çalışır Bölümü bölümü: ".adim h3" öğesinin stili */
.adim h3 { font-size: 1rem; font-weight: 700; margin-bottom: 0.5rem; }
/* Nasıl Çalışır Bölümü bölümü: ".adim p" öğesinin stili */
.adim p { font-size: 0.875rem; color: rgba(255, 255, 255, 0.7); line-height: 1.6; }
/* ----- Detay Sayfası ----- */
.breadcrumb { padding-block: 1rem; font-size: 0.875rem; color: var(--renk-metin-hafif); }
/* Detay Sayfası bölümü: ".breadcrumb a" öğesinin stili */
.breadcrumb a { color: var(--renk-birincil); font-weight: 500; }
/* Detay Sayfası bölümü: ".breadcrumb a:hover" öğesinin stili — fare üzerine gelince */
.breadcrumb a:hover { text-decoration: underline; }
/* Detay Sayfası bölümü: ".breadcrumb span" öğesinin stili */
.breadcrumb span { margin-inline: 0.4rem; }
/* Araç Başlığı */
.arac-baslik { background: var(--renk-kart); border-radius: var(--yaricap-buyuk); padding: 2rem; box-shadow: var(--golge-hafif); display: flex; gap: 1.5rem; align-items: flex-start; margin-bottom: 1.5rem; flex-wrap: wrap; }
/* Detay Sayfası bölümü: ".arac-emoji-buyuk" öğesinin stili */
.arac-emoji-buyuk { font-size: 4rem; width: 96px; height: 96px; border-radius: 20px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
/* Detay Sayfası bölümü: ".arac-baslik-bilgi" öğesinin stili */
.arac-baslik-bilgi { flex: 1; min-width: 200px; }
/* Detay Sayfası bölümü: ".arac-baslik-bilgi .marka-kucuk" öğesinin stili */
.arac-baslik-bilgi .marka-kucuk { font-size: 0.8rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.8px; color: var(--renk-metin-hafif); margin-bottom: 0.25rem; }
/* Detay Sayfası bölümü: ".arac-baslik-bilgi h1" öğesinin stili */
.arac-baslik-bilgi h1 { font-size: 2rem; font-weight: 800; color: var(--renk-birincil); margin-bottom: 0.25rem; }
/* Detay Sayfası bölümü: ".arac-baslik-bilgi .yil" öğesinin stili */
.arac-baslik-bilgi .yil { font-size: 0.9rem; color: var(--renk-metin-hafif); margin-bottom: 0.75rem; }
/* Detay Sayfası bölümü: ".ortalama-puan-blok" öğesinin stili */
.ortalama-puan-blok { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
/* Detay Sayfası bölümü: ".puan-buyuk" öğesinin stili */
.puan-buyuk { font-size: 2.5rem; font-weight: 900; color: var(--renk-birincil); }
/* Detay Sayfası bölümü: ".arac-tipler" öğesinin stili */
.arac-tipler { display: flex; gap: 0.4rem; flex-wrap: wrap; margin-top: 0.75rem; }
/* Özet Kartları */
.ozet-kartlari { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-left: auto; }
/* Detay Sayfası bölümü: ".ozet-kart" öğesinin stili */
.ozet-kart { background: var(--renk-arkaplan); border-radius: var(--yaricap); padding: 1rem; text-align: center; }
/* Detay Sayfası bölümü: ".ozet-kart .sayi" öğesinin stili */
.ozet-kart .sayi { font-size: 1.75rem; font-weight: 800; color: var(--renk-birincil); }
/* Detay Sayfası bölümü: ".ozet-kart .etiket" öğesinin stili */
.ozet-kart .etiket { font-size: 0.75rem; color: var(--renk-metin-hafif); margin-top: 0.2rem; }
/* ----- Kronik Sorun Bölümü ----- */
.kronik-sorun-bolumu { background: var(--renk-kronik-arkaplan); border: 1.5px solid #e8a5a5; border-radius: var(--yaricap-buyuk); padding: 1.5rem 2rem; margin-bottom: 1.5rem; }
/* Kronik Sorun Bölümü bölümü: ".kronik-baslik" öğesinin stili */
.kronik-baslik { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1rem; }
/* Kronik Sorun Bölümü bölümü: ".kronik-baslik h2" öğesinin stili */
.kronik-baslik h2 { font-size: 1.1rem; font-weight: 700; color: var(--renk-kronik); }
/* Kronik Sorun Bölümü bölümü: ".kronik-aciklama" öğesinin stili */
.kronik-aciklama { font-size: 0.85rem; color: #7a3030; margin-bottom: 1.25rem; padding: 0.75rem 1rem; background: rgba(192, 57, 43, 0.08); border-radius: 8px; border-left: 3px solid var(--renk-kronik); }
/* Kronik Sorun Bölümü bölümü: ".kronik-liste" öğesinin stili */
.kronik-liste { display: flex; flex-direction: column; gap: 0.75rem; }
/* Kronik Sorun Bölümü bölümü: ".kronik-item" öğesinin stili */
.kronik-item { display: flex; align-items: center; justify-content: space-between; background: #ffffff; border-radius: var(--yaricap); padding: 0.85rem 1rem; border: 1px solid #e8a5a5; gap: 1rem; }
/* Kronik Sorun Bölümü bölümü: ".kronik-item-sol" öğesinin stili */
.kronik-item-sol { display: flex; align-items: center; gap: 0.6rem; }
/* Kronik Sorun Bölümü bölümü: ".kronik-item-adi" öğesinin stili */
.kronik-item-adi { font-size: 0.9rem; font-weight: 600; color: var(--renk-metin); }
/* Kronik Sorun Bölümü bölümü: ".kronik-sayi-blok" öğesinin stili */
.kronik-sayi-blok { display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0; }
/* Kronik Sorun Bölümü bölümü: ".kronik-bar" öğesinin stili */
.kronik-bar { width: 80px; height: 6px; background: #f0c4c4; border-radius: 10px; overflow: hidden; }
/* Kronik Sorun Bölümü bölümü: ".kronik-bar-ic" öğesinin stili */
.kronik-bar-ic { height: 100%; background: var(--renk-kronik); border-radius: 10px; }
/* Kronik Sorun Bölümü bölümü: ".kronik-sayi" öğesinin stili */
.kronik-sayi { font-size: 0.8rem; font-weight: 700; color: var(--renk-kronik); white-space: nowrap; }
/* ----- Puan Dağılımı ----- */
.puan-dagilim-kart { background: var(--renk-kart); border-radius: var(--yaricap-buyuk); padding: 1.5rem 2rem; box-shadow: var(--golge-hafif); margin-bottom: 1.5rem; }
/* Puan Dağılımı bölümü: ".puan-dagilim-kart h2" öğesinin stili */
.puan-dagilim-kart h2 { font-size: 1.1rem; font-weight: 700; color: var(--renk-birincil); margin-bottom: 1.25rem; }
/* Puan Dağılımı bölümü: ".dagilim-satirlari" öğesinin stili */
.dagilim-satirlari { display: flex; flex-direction: column; gap: 0.5rem; }
/* Puan Dağılımı bölümü: ".dagilim-satiri" öğesinin stili */
.dagilim-satiri { display: flex; align-items: center; gap: 0.75rem; }
/* Puan Dağılımı bölümü: ".dagilim-etiket" öğesinin stili */
.dagilim-etiket { display: flex; align-items: center; gap: 3px; min-width: 60px; font-size: 0.8rem; color: var(--renk-metin-hafif); }
/* Puan Dağılımı bölümü: ".dagilim-bar" öğesinin stili */
.dagilim-bar { flex: 1; height: 10px; background: var(--renk-arkaplan); border-radius: 10px; overflow: hidden; }
/* Puan Dağılımı bölümü: ".dagilim-bar-ic" öğesinin stili */
.dagilim-bar-ic { height: 100%; background: linear-gradient(90deg, #f5a623, #e85d04); border-radius: 10px; transition: width 0.6s ease; }
/* Puan Dağılımı bölümü: ".dagilim-sayi" öğesinin stili */
.dagilim-sayi { min-width: 24px; text-align: right; font-size: 0.8rem; color: var(--renk-metin-hafif); }
/* ----- İçerik Düzeni (Detay) ----- */
.detay-icerik { display: grid; grid-template-columns: 1fr 360px; gap: 1.5rem; align-items: start; padding-bottom: 3rem; }
/* ----- Yorum Listesi ----- */
.yorum-baslik { font-size: 1.25rem; font-weight: 700; color: var(--renk-birincil); margin-bottom: 1rem; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.5rem; }
/* Yorum Listesi bölümü: ".yorum-sirala" öğesinin stili */
.yorum-sirala { font-size: 0.85rem; font-weight: 500; color: var(--renk-metin-hafif); display: flex; align-items: center; gap: 0.4rem; }
/* Yorum Listesi bölümü: ".yorum-sirala select" öğesinin stili */
.yorum-sirala select { font-size: 0.85rem; border: 1px solid var(--renk-sinir); border-radius: 8px; padding: 0.25rem 0.5rem; background: var(--renk-kart); color: var(--renk-metin); cursor: pointer; }
/* Yorum Kartı */
.yorum-karti { background: var(--renk-kart); border-radius: var(--yaricap-buyuk); padding: 1.5rem; box-shadow: var(--golge-hafif); margin-bottom: 1rem; border: 1.5px solid transparent; transition: border-color var(--gecis); }
/* Yorum Listesi bölümü: ".yorum-karti:hover" öğesinin stili — fare üzerine gelince */
.yorum-karti:hover { border-color: var(--renk-sinir); }
/* Yorum Listesi bölümü: ".yorum-karti-ust" öğesinin stili */
.yorum-karti-ust { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
/* Yorum Listesi bölümü: ".yorum-kullanici" öğesinin stili */
.yorum-kullanici { display: flex; align-items: center; gap: 0.75rem; }
/* Yorum Listesi bölümü: ".kullanici-avatar" öğesinin stili */
.kullanici-avatar { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1rem; font-weight: 700; color: #ffffff; flex-shrink: 0; }
/* Yorum Listesi bölümü: ".kullanici-bilgi .ad" öğesinin stili */
.kullanici-bilgi .ad { font-size: 0.9rem; font-weight: 600; color: var(--renk-metin); }
/* Yorum Listesi bölümü: ".kullanici-bilgi .tarih" öğesinin stili */
.kullanici-bilgi .tarih { font-size: 0.75rem; color: var(--renk-metin-hafif); }
/* Yorum Listesi bölümü: ".yorum-puan-blok" öğesinin stili */
.yorum-puan-blok { display: flex; flex-direction: column; align-items: flex-end; gap: 0.25rem; flex-shrink: 0; }
/* Yorum Listesi bölümü: ".yorum-puan-sayi" öğesinin stili */
.yorum-puan-sayi { font-size: 1.1rem; font-weight: 800; color: var(--renk-birincil); }
/* Yorum Listesi bölümü: ".yorum-baslik-metin" öğesinin stili */
.yorum-baslik-metin { font-size: 1rem; font-weight: 700; color: var(--renk-metin); margin-bottom: 0.75rem; }
/* Yorum Listesi bölümü: ".yorum-satirlari" öğesinin stili */
.yorum-satirlari { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; margin-bottom: 0.75rem; }
/* Yorum Listesi bölümü: ".yorum-iyi, .yorum-kotu" öğesinin stili */
.yorum-iyi, .yorum-kotu { padding: 0.75rem; border-radius: var(--yaricap); font-size: 0.85rem; line-height: 1.5; }
/* Yorum Listesi bölümü: ".yorum-iyi" öğesinin stili */
.yorum-iyi { background: #f0faf5; border-left: 3px solid var(--renk-basari); color: #1d5c35; }
/* Yorum Listesi bölümü: ".yorum-kotu" öğesinin stili */
.yorum-kotu { background: #fdf5f0; border-left: 3px solid var(--renk-ikincil); color: #5c2d1d; }
/* Yorum Listesi bölümü: ".yorum-etiket" öğesinin stili */
.yorum-etiket { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; display: block; margin-bottom: 0.3rem; }
/* Yorum Listesi bölümü: ".yorum-iyi .yorum-etiket" öğesinin stili */
.yorum-iyi .yorum-etiket { color: var(--renk-basari); }
/* Yorum Listesi bölümü: ".yorum-kotu .yorum-etiket" öğesinin stili */
.yorum-kotu .yorum-etiket { color: var(--renk-ikincil); }
/* Şikâyet Etiketleri (yorum altında) */
.sikayet-etiketler { display: flex; gap: 0.4rem; flex-wrap: wrap; }
/* Yorum Listesi bölümü: ".sikayet-etiketi" öğesinin stili */
.sikayet-etiketi { font-size: 0.7rem; font-weight: 600; padding: 0.2rem 0.65rem; border-radius: 50px; background: var(--renk-kronik-arkaplan); color: var(--renk-kronik); border: 1px solid #e8a5a5; }
/* ----- Yorum Formu ----- */
.yorum-formu-kart { background: var(--renk-kart); border-radius: var(--yaricap-buyuk); padding: 1.75rem; box-shadow: var(--golge-hafif); position: sticky; top: 80px; }
/* Yorum Formu bölümü: ".yorum-formu-kart h2" öğesinin stili */
.yorum-formu-kart h2 { font-size: 1.1rem; font-weight: 700; color: var(--renk-birincil); margin-bottom: 1.25rem; padding-bottom: 1rem; border-bottom: 1px solid var(--renk-sinir); }
/* Yıldız Seçici */
.yildiz-secici { display: flex; gap: 6px; margin-bottom: 1rem; }
/* Yorum Formu bölümü: ".yildiz-secici button" öğesinin stili */
.yildiz-secici button { font-size: 1.8rem; background: none; border: none; cursor: pointer; color: #d0d0d0; transition: color var(--gecis), transform var(--gecis); line-height: 1; padding: 0; }
/* Yorum Formu bölümü: ".yildiz-secici button:hover, .yildiz-secici button.secili" öğesinin stili — fare üzerine gelince */
.yildiz-secici button:hover, .yildiz-secici button.secili { color: #f5a623; transform: scale(1.15); }
/* Yorum Formu bölümü: ".yildiz-secici button.uzerinde" öğesinin stili */
.yildiz-secici button.uzerinde { color: #f5a623; }
/* Form Elemanları */
.form-grup { margin-bottom: 1rem; }
/* Yorum Formu bölümü: ".form-grup label" öğesinin stili */
.form-grup label { display: block; font-size: 0.85rem; font-weight: 600; color: var(--renk-metin); margin-bottom: 0.4rem; }
/* Yorum Formu bölümü: ".form-grup input, .form-grup textarea, .form-grup select" öğesinin stili */
.form-grup input, .form-grup textarea, .form-grup select { width: 100%; padding: 0.65rem 0.85rem; border: 1.5px solid var(--renk-sinir); border-radius: var(--yaricap); font-size: 0.9rem; font-family: var(--font-ana); color: var(--renk-metin); background: var(--renk-arkaplan); transition: border-color var(--gecis), box-shadow var(--gecis); outline: none; }
/* Yorum Formu bölümü: ".form-grup input:focus, .form-grup textarea:focus, .form-grup select:focus" öğesinin stili — odaklanınca */
.form-grup input:focus, .form-grup textarea:focus, .form-grup select:focus { border-color: var(--renk-birincil); box-shadow: 0 0 0 3px rgba(26, 58, 107, 0.1); background: #ffffff; }
/* Yorum Formu bölümü: ".form-grup textarea" öğesinin stili */
.form-grup textarea { resize: vertical; min-height: 72px; }
/* Şikâyet Kategorileri */
.sikayet-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.4rem; }
/* Yorum Formu bölümü: ".sikayet-checkbox" öğesinin stili */
.sikayet-checkbox { display: flex; align-items: center; gap: 0.4rem; font-size: 0.78rem; cursor: pointer; padding: 0.3rem; border-radius: 6px; transition: background var(--gecis); }
/* Yorum Formu bölümü: ".sikayet-checkbox:hover" öğesinin stili — fare üzerine gelince */
.sikayet-checkbox:hover { background: var(--renk-arkaplan); }
/* Yorum Formu bölümü: ".sikayet-checkbox input[type="checkbox"]" öğesinin stili */
.sikayet-checkbox input[type="checkbox"] { width: 14px; height: 14px; margin: 0; cursor: pointer; accent-color: var(--renk-kronik); }
/* Yorum Formu bölümü: ".btn-gonder" öğesinin stili */
.btn-gonder { width: 100%; background: var(--renk-ikincil); color: #ffffff; border: none; border-radius: var(--yaricap); padding: 0.8rem; font-size: 1rem; font-weight: 700; cursor: pointer; margin-top: 0.5rem; transition: background var(--gecis), transform var(--gecis); font-family: var(--font-ana); }
/* Yorum Formu bölümü: ".btn-gonder:hover" öğesinin stili — fare üzerine gelince */
.btn-gonder:hover { background: var(--renk-ikincil-acik); transform: translateY(-1px); }
/* Başarı Mesajı */
.basari-mesaji { display: none; text-align: center; padding: 1.5rem; background: #f0faf5; border-radius: var(--yaricap); border: 1px solid #b7e4cc; margin-top: 0.75rem; }
/* Yorum Formu bölümü: ".basari-mesaji p" öğesinin stili */
.basari-mesaji p { font-size: 0.9rem; color: #1d5c35; font-weight: 500; }
/* ----- Footer ----- */
footer { background: var(--renk-birincil); color: rgba(255, 255, 255, 0.75); padding-block: 3rem 1.5rem; margin-top: auto; }
/* Footer bölümü: ".footer-icerik" öğesinin stili */
.footer-icerik { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 2rem; margin-bottom: 2rem; }
/* Footer bölümü: ".footer-logo" öğesinin stili */
.footer-logo { font-size: 1.3rem; font-weight: 800; color: #ffffff; margin-bottom: 0.75rem; }
/* Footer bölümü: ".footer-logo span" öğesinin stili */
.footer-logo span { color: var(--renk-ikincil); }
/* Footer bölümü: ".footer-aciklama" öğesinin stili */
.footer-aciklama { font-size: 0.875rem; line-height: 1.7; max-width: 280px; }
/* Footer içindeki "Sayfalar" navigasyonu: başlık üstte, liste altta düzgün dursun.
   Global "nav { display:flex }" kuralını burada iptal ediyoruz.            */
.footer-icerik nav { display: block; height: auto; padding: 0; margin: 0; }
/* Footer bölümü: ".footer-baslik" öğesinin stili */
.footer-baslik { font-size: 0.85rem; font-weight: 700; color: #ffffff; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 0.75rem; }
/* Footer bölümü: ".footer-liste li" öğesinin stili */
.footer-liste li { margin-bottom: 0.4rem; }
/* Footer bölümü: ".footer-liste a" öğesinin stili */
.footer-liste a { font-size: 0.875rem; color: rgba(255, 255, 255, 0.65); transition: color var(--gecis); }
/* Footer bölümü: ".footer-liste a:hover" öğesinin stili — fare üzerine gelince */
.footer-liste a:hover { color: #ffffff; }
/* Footer bölümü: ".footer-alt" öğesinin stili */
.footer-alt { padding-top: 1.5rem; border-top: 1px solid rgba(255, 255, 255, 0.1); display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.5rem; font-size: 0.8rem; }
/* ----- Sayfa Yükleniyor / Hata ----- */
.yukleniyor { text-align: center; padding: 3rem; color: var(--renk-metin-hafif); font-size: 1.1rem; }
/* Sayfa Yükleniyor / Hata bölümü: ".hata-sayfasi" öğesinin stili */
.hata-sayfasi { text-align: center; padding: 5rem 1rem; }
/* Sayfa Yükleniyor / Hata bölümü: ".hata-sayfasi .emoji" öğesinin stili */
.hata-sayfasi .emoji { font-size: 4rem; display: block; margin-bottom: 1rem; }
/* Sayfa Yükleniyor / Hata bölümü: ".hata-sayfasi h1" öğesinin stili */
.hata-sayfasi h1 { font-size: 1.5rem; color: var(--renk-birincil); margin-bottom: 0.5rem; }
/* Sayfa Yükleniyor / Hata bölümü: ".hata-sayfasi p" öğesinin stili */
.hata-sayfasi p { color: var(--renk-metin-hafif); margin-bottom: 1.5rem; }
/* Sayfa Yükleniyor / Hata bölümü: ".btn-geri" öğesinin stili */
.btn-geri { display: inline-block; background: var(--renk-birincil); color: #ffffff; padding: 0.65rem 1.5rem; border-radius: 10px; font-weight: 600; transition: background var(--gecis); }
/* Sayfa Yükleniyor / Hata bölümü: ".btn-geri:hover" öğesinin stili — fare üzerine gelince */
.btn-geri:hover { background: #2563b0; }
/* ----- Responsive: Tablet ----- */
@media (max-width: 900px) {
  /* Responsive: Tablet bölümü: ".detay-icerik" öğesinin stili */
  .detay-icerik { grid-template-columns: 1fr; }
  /* Responsive: Tablet bölümü: ".yorum-formu-kart" öğesinin stili */
  .yorum-formu-kart { position: static; order: -1; }
  /* Responsive: Tablet bölümü: ".footer-icerik" öğesinin stili */
  .footer-icerik { grid-template-columns: 1fr 1fr; }
  /* Responsive: Tablet bölümü: ".ozet-kartlari" öğesinin stili */
  .ozet-kartlari { width: 100%; margin-left: 0; }
}
/* ----- Responsive: Mobil ----- */
@media (max-width: 640px) {
  /* Nav */
  .nav-linkler { display: none; position: absolute; top: 64px; left: 0; right: 0; background: var(--renk-birincil); flex-direction: column; align-items: stretch; padding: 0.75rem 1rem; gap: 0; border-top: 1px solid rgba(255, 255, 255, 0.1); box-shadow: var(--golge-orta); }
  /* Responsive: Mobil bölümü: ".nav-linkler.acik" öğesinin stili */
  .nav-linkler.acik { display: flex; }
  /* Responsive: Mobil bölümü: ".nav-linkler a" öğesinin stili */
  .nav-linkler a { padding: 0.75rem 1rem; border-radius: 0; }
  /* Responsive: Mobil bölümü: ".hamburger" öğesinin stili */
  .hamburger { display: flex; }
  /* Hero */
  .hero { padding-block: 3rem 2.5rem; }
  /* Responsive: Mobil bölümü: ".arama-kutusu" öğesinin stili */
  .arama-kutusu { flex-direction: column; border-radius: 16px; padding: 0.75rem; gap: 0.5rem; }
  /* Responsive: Mobil bölümü: ".arama-kutusu input" öğesinin stili */
  .arama-kutusu input { text-align: center; }
  /* Responsive: Mobil bölümü: ".btn-ara" öğesinin stili */
  .btn-ara { border-radius: 10px; padding: 0.75rem; }
  /* İstatistikler */
  .istatistikler { flex-wrap: wrap; gap: 0.5rem; padding-block: 1rem; }
  /* Responsive: Mobil bölümü: ".istat-item" öğesinin stili */
  .istat-item { padding-inline: 1rem; }
  /* Responsive: Mobil bölümü: ".istat-item:not(:last-child)" öğesinin stili — son öğe, belirli durum dışında */
  .istat-item:not(:last-child) { border-right: none; }
  /* Araç grid */
  .arac-grid { grid-template-columns: 1fr; }
  /* Yorum satırları */
  .yorum-satirlari { grid-template-columns: 1fr; }
  /* Araç başlık */
  .arac-baslik { flex-direction: column; }
  /* Responsive: Mobil bölümü: ".ozet-kartlari" öğesinin stili */
  .ozet-kartlari { grid-template-columns: repeat(3, 1fr); width: 100%; margin-left: 0; }
  /* Kronik item */
  .kronik-item { flex-wrap: wrap; gap: 0.5rem; }
  /* Responsive: Mobil bölümü: ".kronik-bar" öğesinin stili */
  .kronik-bar { width: 60px; }
  /* Footer */
  .footer-icerik { grid-template-columns: 1fr; }
  /* Responsive: Mobil bölümü: ".footer-alt" öğesinin stili */
  .footer-alt { flex-direction: column; text-align: center; }
  /* Şikâyet grid */
  .sikayet-grid { grid-template-columns: 1fr; }
}
/* =========================================================
   AUTH — Giriş / Kayıt Modal & Nav Stilleri
   ========================================================= */
/* Nav Auth Alanı */
#auth-alani { display: flex; align-items: center; }
/* Responsive: Mobil bölümü: ".auth-butonlar" öğesinin stili */
.auth-butonlar { display: flex; gap: 0.5rem; }
/* Responsive: Mobil bölümü: ".btn-giris" öğesinin stili */
.btn-giris { background: transparent; border: 1.5px solid rgba(255, 255, 255, 0.45); color: #ffffff; border-radius: 8px; padding: 0.4rem 1rem; font-size: 0.875rem; font-weight: 600; cursor: pointer; transition: background var(--gecis), border-color var(--gecis); font-family: var(--font-ana); white-space: nowrap; }
/* Responsive: Mobil bölümü: ".btn-giris:hover" öğesinin stili — fare üzerine gelince */
.btn-giris:hover { background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.7); }
/* Responsive: Mobil bölümü: ".btn-kayit" öğesinin stili */
.btn-kayit { background: var(--renk-ikincil); border: 1.5px solid var(--renk-ikincil); color: #ffffff; border-radius: 8px; padding: 0.4rem 1rem; font-size: 0.875rem; font-weight: 600; cursor: pointer; transition: background var(--gecis); font-family: var(--font-ana); white-space: nowrap; }
/* Responsive: Mobil bölümü: ".btn-kayit:hover" öğesinin stili — fare üzerine gelince */
.btn-kayit:hover { background: var(--renk-ikincil-acik); border-color: var(--renk-ikincil-acik); }
/* Kullanıcı Menüsü (giriş yapılmışsa) */
.kullanici-menu { position: relative; }
/* Responsive: Mobil bölümü: ".kullanici-avatar-btn" öğesinin stili */
.kullanici-avatar-btn { display: flex; align-items: center; gap: 0.5rem; background: rgba(255, 255, 255, 0.12); border: 1.5px solid rgba(255, 255, 255, 0.25); border-radius: 50px; padding: 0.3rem 0.75rem 0.3rem 0.4rem; cursor: pointer; color: #ffffff; font-family: var(--font-ana); font-size: 0.875rem; font-weight: 600; transition: background var(--gecis); }
/* Responsive: Mobil bölümü: ".kullanici-avatar-btn:hover" öğesinin stili — fare üzerine gelince */
.kullanici-avatar-btn:hover { background: rgba(255, 255, 255, 0.2); }
/* Responsive: Mobil bölümü: ".nav-avatar" öğesinin stili */
.nav-avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--renk-ikincil); display: flex; align-items: center; justify-content: center; font-size: 0.7rem; font-weight: 700; color: #fff; flex-shrink: 0; }
/* Responsive: Mobil bölümü: ".kullanici-ad-kisa" öğesinin stili */
.kullanici-ad-kisa { max-width: 80px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Responsive: Mobil bölümü: ".chevron" öğesinin stili */
.chevron { font-size: 0.75rem; opacity: 0.7; }
/* Dropdown */
.kullanici-dropdown { position: absolute; top: calc(100% + 8px); right: 0; background: #ffffff; border-radius: var(--yaricap); box-shadow: var(--golge-guclu); min-width: 200px; border: 1px solid var(--renk-sinir); overflow: hidden; z-index: 2000; }
/* Responsive: Mobil bölümü: ".dropdown-baslik" öğesinin stili */
.dropdown-baslik { padding: 0.85rem 1rem; display: flex; flex-direction: column; gap: 0.15rem; background: var(--renk-arkaplan); }
/* Responsive: Mobil bölümü: ".dropdown-baslik strong" öğesinin stili */
.dropdown-baslik strong { font-size: 0.9rem; color: var(--renk-metin); }
/* Responsive: Mobil bölümü: ".dropdown-baslik small" öğesinin stili */
.dropdown-baslik small { font-size: 0.75rem; color: var(--renk-metin-hafif); }
/* Responsive: Mobil bölümü: ".dropdown-ayrac" öğesinin stili */
.dropdown-ayrac { border: none; border-top: 1px solid var(--renk-sinir); margin: 0; }
/* Responsive: Mobil bölümü: ".dropdown-item" öğesinin stili */
.dropdown-item { display: flex; align-items: center; gap: 0.6rem; width: 100%; padding: 0.75rem 1rem; background: none; border: none; font-size: 0.875rem; font-family: var(--font-ana); cursor: pointer; text-align: left; transition: background var(--gecis); color: var(--renk-metin); }
/* Responsive: Mobil bölümü: ".dropdown-item:hover" öğesinin stili — fare üzerine gelince */
.dropdown-item:hover { background: var(--renk-arkaplan); }
/* Responsive: Mobil bölümü: ".cikis-btn" öğesinin stili */
.cikis-btn { color: var(--renk-kronik) !important; }
/* ----- Auth Overlay (Modal Arkaplanı) ----- */
.auth-overlay { position: fixed; inset: 0; background: rgba(10, 20, 40, 0.65); backdrop-filter: blur(4px); z-index: 9000; display: flex; align-items: center; justify-content: center; padding: 1rem; animation: fadeIn 0.2s ease; }
/* Animasyon tanımı: "fadeIn" (aşağıdaki adımlarla çalışır) */
@keyframes fadeIn {
  from { opacity: 0; }  /* Başlangıç: tamamen saydam */
  to { opacity: 1; }    /* Bitiş: tamamen görünür */
}
/* Auth Kart */
.auth-kart { background: #ffffff; border-radius: var(--yaricap-buyuk); padding: 2.25rem 2rem; width: 100%; max-width: 420px; position: relative; box-shadow: var(--golge-guclu); animation: slideUp 0.28s ease; }
/* Animasyon tanımı: "slideUp" (aşağıdaki adımlarla çalışır) */
@keyframes slideUp {
  from { opacity: 0; transform: translateY(24px); }  /* Başlangıç: saydam ve 24px aşağıda */
  to { opacity: 1; transform: translateY(0); }        /* Bitiş: görünür ve yerinde */
}
/* Auth Overlay (Modal Arkaplanı) bölümü: ".auth-kapat" öğesinin stili */
.auth-kapat { position: absolute; top: 1rem; right: 1rem; background: var(--renk-arkaplan); border: none; border-radius: 50%; width: 32px; height: 32px; font-size: 0.8rem; cursor: pointer; color: var(--renk-metin-hafif); display: flex; align-items: center; justify-content: center; transition: background var(--gecis), color var(--gecis); }
/* Auth Overlay (Modal Arkaplanı) bölümü: ".auth-kapat:hover" öğesinin stili — fare üzerine gelince */
.auth-kapat:hover { background: var(--renk-sinir); color: var(--renk-metin); }
/* Auth Overlay (Modal Arkaplanı) bölümü: ".auth-logo" öğesinin stili */
.auth-logo { font-size: 1.5rem; font-weight: 800; color: var(--renk-birincil); margin-bottom: 0.75rem; text-align: center; }
/* Auth Overlay (Modal Arkaplanı) bölümü: ".auth-logo span" öğesinin stili */
.auth-logo span { color: var(--renk-ikincil); }
/* Auth Overlay (Modal Arkaplanı) bölümü: ".auth-baslik" öğesinin stili */
.auth-baslik { font-size: 1.3rem; font-weight: 800; color: var(--renk-metin); text-align: center; margin-bottom: 0.35rem; }
/* Auth Overlay (Modal Arkaplanı) bölümü: ".auth-alt-baslik" öğesinin stili */
.auth-alt-baslik { font-size: 0.875rem; color: var(--renk-metin-hafif); text-align: center; margin-bottom: 1.5rem; }
/* Auth Form Elemanları */
.auth-form-grup { margin-bottom: 1rem; }
/* Auth Overlay (Modal Arkaplanı) bölümü: ".auth-form-grup label" öğesinin stili */
.auth-form-grup label { display: block; font-size: 0.85rem; font-weight: 600; color: var(--renk-metin); margin-bottom: 0.4rem; }
/* Auth Overlay (Modal Arkaplanı) bölümü: ".auth-form-grup input" öğesinin stili */
.auth-form-grup input { width: 100%; padding: 0.7rem 0.9rem; border: 1.5px solid var(--renk-sinir); border-radius: var(--yaricap); font-size: 0.95rem; font-family: var(--font-ana); color: var(--renk-metin); background: var(--renk-arkaplan); outline: none; transition: border-color var(--gecis), box-shadow var(--gecis); }
/* Auth Overlay (Modal Arkaplanı) bölümü: ".auth-form-grup input:focus" öğesinin stili — odaklanınca */
.auth-form-grup input:focus { border-color: var(--renk-birincil); box-shadow: 0 0 0 3px rgba(26, 58, 107, 0.1); background: #ffffff; }
/* Şifre sarıcı */
.sifre-sarici { position: relative; display: flex; align-items: center; }
/* Auth Overlay (Modal Arkaplanı) bölümü: ".sifre-sarici input" öğesinin stili */
.sifre-sarici input { padding-right: 2.75rem; }
/* Auth Overlay (Modal Arkaplanı) bölümü: ".sifre-goster" öğesinin stili */
.sifre-goster { position: absolute; right: 0.6rem; background: none; border: none; cursor: pointer; font-size: 1rem; line-height: 1; color: var(--renk-metin-hafif); padding: 0.2rem; transition: opacity var(--gecis); }
/* Auth Overlay (Modal Arkaplanı) bölümü: ".sifre-goster:hover" öğesinin stili — fare üzerine gelince */
.sifre-goster:hover { opacity: 0.7; }
/* Auth Hata */
.auth-hata { font-size: 0.85rem; color: var(--renk-kronik); background: var(--renk-kronik-arkaplan); border-left: 3px solid var(--renk-kronik); border-radius: 8px; padding: 0.6rem 0.85rem; margin-bottom: 0.75rem; }
/* Auth Birincil Buton */
.auth-btn-birincil { width: 100%; background: var(--renk-birincil); color: #ffffff; border: none; border-radius: var(--yaricap); padding: 0.8rem; font-size: 1rem; font-weight: 700; cursor: pointer; transition: background var(--gecis), transform var(--gecis); font-family: var(--font-ana); margin-top: 0.25rem; }
/* Auth Overlay (Modal Arkaplanı) bölümü: ".auth-btn-birincil:hover" öğesinin stili — fare üzerine gelince */
.auth-btn-birincil:hover { background: #2563b0; transform: translateY(-1px); }
/* Geçiş Metni */
.auth-gecis-metin { text-align: center; font-size: 0.875rem; color: var(--renk-metin-hafif); margin-top: 1.25rem; }
/* Auth Overlay (Modal Arkaplanı) bölümü: ".link-btn" öğesinin stili */
.link-btn { background: none; border: none; color: var(--renk-birincil); font-weight: 700; cursor: pointer; font-size: 0.875rem; font-family: var(--font-ana); padding: 0; text-decoration: underline; transition: color var(--gecis); }
/* Auth Overlay (Modal Arkaplanı) bölümü: ".link-btn:hover" öğesinin stili — fare üzerine gelince */
.link-btn:hover { color: var(--renk-ikincil); }
/* ----- Yorum Formu Kilidi (Giriş gerektiren uyarı) ----- */
.giris-gerekli-uyari { background: #fff8ee; border: 1.5px solid #f5c97a; border-radius: var(--yaricap); padding: 1.25rem; text-align: center; margin-bottom: 1rem; }
/* Yorum Formu Kilidi (Giriş gerektiren uyarı) bölümü: ".giris-gerekli-uyari p" öğesinin stili */
.giris-gerekli-uyari p { font-size: 0.9rem; color: #6b4c00; margin-bottom: 1rem; line-height: 1.6; }
/* Yorum Formu Kilidi (Giriş gerektiren uyarı) bölümü: ".giris-gerekli-uyari .giris-uyari-butonlar" öğesinin stili */
.giris-gerekli-uyari .giris-uyari-butonlar { display: flex; gap: 0.5rem; justify-content: center; flex-wrap: wrap; }
/* Yorum Formu Kilidi (Giriş gerektiren uyarı) bölümü: ".btn-uyari-giris" öğesinin stili */
.btn-uyari-giris { background: var(--renk-birincil); color: #fff; border: none; border-radius: 8px; padding: 0.55rem 1.25rem; font-size: 0.875rem; font-weight: 600; cursor: pointer; font-family: var(--font-ana); transition: background var(--gecis); }
/* Yorum Formu Kilidi (Giriş gerektiren uyarı) bölümü: ".btn-uyari-giris:hover" öğesinin stili — fare üzerine gelince */
.btn-uyari-giris:hover { background: #2563b0; }
/* Yorum Formu Kilidi (Giriş gerektiren uyarı) bölümü: ".btn-uyari-kayit" öğesinin stili */
.btn-uyari-kayit { background: var(--renk-ikincil); color: #fff; border: none; border-radius: 8px; padding: 0.55rem 1.25rem; font-size: 0.875rem; font-weight: 600; cursor: pointer; font-family: var(--font-ana); transition: background var(--gecis); }
/* Yorum Formu Kilidi (Giriş gerektiren uyarı) bölümü: ".btn-uyari-kayit:hover" öğesinin stili — fare üzerine gelince */
.btn-uyari-kayit:hover { background: var(--renk-ikincil-acik); }
/* ----- Animasyonlar ----- */
@keyframes girisAnimasyon {
  from { opacity: 0; transform: translateY(16px); }  /* Başlangıç: saydam ve 16px aşağıda */
  to { opacity: 1; transform: translateY(0); }        /* Bitiş: görünür ve yerinde */
}
/* Animasyonlar bölümü: ".arac-karti" öğesinin stili */
.arac-karti { animation: girisAnimasyon 0.4s ease forwards; }
/* Animasyonlar bölümü: ".yorum-karti" öğesinin stili */
.yorum-karti { animation: girisAnimasyon 0.3s ease forwards; }
/* Renk erişilebilirliği için focus halkası */
:focus-visible { outline: 2px solid var(--renk-ikincil); outline-offset: 3px; }


/* ========================================================= */
/* PAKET BÖLÜMÜ (paketler.js) - TSB paketleri */
/* ========================================================= */
.paket-bolum { background: var(--renk-kart); border-radius: var(--yaricap-buyuk); box-shadow: var(--golge-hafif); padding: 1.5rem 1.75rem; margin-bottom: 1.5rem; }
.paket-bolum-bas h2 { font-size: 1.35rem; font-weight: 800; color: var(--renk-birincil); margin-bottom: 0.25rem; }
.paket-bolum-bas p { color: var(--renk-metin-hafif); font-size: 0.9rem; margin-bottom: 1.25rem; }
.paket-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1rem; }
.paket-karti { border: 1.5px solid var(--renk-sinir); border-radius: var(--yaricap); padding: 1.1rem 1.2rem; transition: border-color var(--gecis), box-shadow var(--gecis), transform var(--gecis); background: #fff; }
.paket-karti:hover { border-color: var(--renk-birincil); box-shadow: var(--golge-orta); transform: translateY(-2px); }
.paket-karti.secili { border-color: var(--renk-ikincil); box-shadow: 0 0 0 2px var(--renk-ikincil-acik); }
.paket-karti-bas h3 { font-size: 1.02rem; font-weight: 700; color: var(--renk-metin); margin-bottom: 0.4rem; }
.paket-puan { font-size: 0.82rem; color: var(--renk-uyari); font-weight: 600; }
.paket-puan b { color: var(--renk-metin); }
.paket-puan-bos { color: var(--renk-metin-hafif); font-weight: 500; }
.paket-etiketler { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.75rem 0 1rem; }
.paket-etiket { font-size: 0.72rem; font-weight: 600; padding: 0.2rem 0.6rem; border-radius: 50px; background: var(--renk-arkaplan); color: var(--renk-metin-hafif); border: 1px solid var(--renk-sinir); }
.btn-paket-sec { width: 100%; background: var(--renk-birincil); color: #fff; border: none; padding: 0.6rem; border-radius: 10px; font-weight: 600; font-size: 0.88rem; cursor: pointer; font-family: var(--font-ana); transition: background var(--gecis); }
.btn-paket-sec:hover { background: #16305c; }
.paket-bos { background: var(--renk-kart); border-radius: var(--yaricap-buyuk); box-shadow: var(--golge-hafif); padding: 1.5rem 1.75rem; margin-bottom: 1.5rem; }
.paket-bos h2 { font-size: 1.2rem; color: var(--renk-birincil); margin-bottom: 0.4rem; }
.paket-bos p { color: var(--renk-metin-hafif); }
.paket-yorum-ic { margin-top: 1.5rem; padding-top: 1.5rem; border-top: 2px dashed var(--renk-sinir); }
.paket-yorum-ozet { display: flex; align-items: baseline; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.paket-yorum-ozet h3 { font-size: 1.1rem; color: var(--renk-birincil); }
.paket-yorum-ozet span { color: var(--renk-uyari); font-weight: 600; }
.kronik-kutu { background: var(--renk-kronik-arkaplan); border: 1px solid var(--renk-kronik); border-radius: var(--yaricap); padding: 0.75rem 1rem; margin-bottom: 1rem; font-size: 0.88rem; color: var(--renk-kronik); }
.kronik-rozet { display: inline-block; background: var(--renk-kronik); color: #fff; padding: 0.15rem 0.55rem; border-radius: 50px; font-size: 0.78rem; margin: 0.15rem; }
.paket-yorum-liste { display: grid; gap: 0.85rem; margin-bottom: 1.5rem; }
.yorum-yok { color: var(--renk-metin-hafif); font-style: italic; }
.yk-karti { border: 1px solid var(--renk-sinir); border-radius: var(--yaricap); padding: 1rem 1.15rem; background: #fff; }
.yk-ust { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.35rem; }
.yk-ad { font-weight: 700; color: var(--renk-metin); }
.yk-yildiz { color: var(--renk-uyari); }
.yk-karti h4 { font-size: 0.98rem; margin-bottom: 0.4rem; }
.yk-iyi { color: var(--renk-basari); font-size: 0.88rem; margin: 0.2rem 0; }
.yk-kotu { color: var(--renk-kronik); font-size: 0.88rem; margin: 0.2rem 0; }
.yk-sikayetler { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.5rem; }
.yk-sikayet { font-size: 0.72rem; background: var(--renk-kronik-arkaplan); color: var(--renk-kronik); border: 1px solid var(--renk-kronik); padding: 0.15rem 0.5rem; border-radius: 50px; }
.paket-yorum-form { background: var(--renk-arkaplan); border-radius: var(--yaricap); padding: 1.25rem 1.4rem; }
.paket-yorum-form h3 { font-size: 1.05rem; color: var(--renk-birincil); margin-bottom: 0.85rem; }
.paket-yorum-form label { display: block; font-size: 0.85rem; font-weight: 600; color: var(--renk-metin); margin-bottom: 0.75rem; }
.paket-yorum-form input[type=text], .paket-yorum-form select, .paket-yorum-form textarea { width: 100%; margin-top: 0.3rem; padding: 0.55rem 0.7rem; border: 1px solid var(--renk-sinir); border-radius: 8px; font-family: var(--font-ana); font-size: 0.9rem; font-weight: 400; }
.yf-satir { display: grid; grid-template-columns: 1fr 2fr; gap: 1rem; }
.yf-kategoriler { border: 1px solid var(--renk-sinir); border-radius: var(--yaricap); padding: 0.75rem 1rem; margin-bottom: 1rem; }
.yf-kategoriler legend { font-size: 0.82rem; font-weight: 600; color: var(--renk-metin-hafif); padding: 0 0.4rem; }
.yf-kat { display: inline-flex !important; align-items: center; gap: 0.3rem; font-weight: 500 !important; margin: 0.25rem 0.75rem 0.25rem 0; font-size: 0.82rem !important; }
.yf-kat input { width: auto !important; margin: 0 !important; }
.btn-yorum-gonder { background: var(--renk-ikincil); color: #fff; border: none; padding: 0.65rem 1.5rem; border-radius: 10px; font-weight: 700; cursor: pointer; font-family: var(--font-ana); transition: background var(--gecis); }
.btn-yorum-gonder:hover { background: var(--renk-ikincil-acik); }
.yf-mesaj { margin-top: 0.75rem; font-size: 0.88rem; font-weight: 600; }

/* PAKET BULUCU (fiyat.php / fiyat.js) */
.fiyat-baslik { background:#fff; border-radius:var(--yaricap-buyuk); box-shadow:var(--golge-hafif); padding:1.75rem 2rem; margin-bottom:1.25rem; }
.fiyat-baslik h1 { font-size:1.6rem; font-weight:900; color:var(--renk-birincil); margin-bottom:0.4rem; }
.fiyat-baslik p { color:var(--renk-metin-hafif); }
.fiyat-yol { display:flex; flex-wrap:wrap; align-items:center; gap:0.4rem; margin-bottom:1.25rem; font-size:0.9rem; }
.fy-adim { color:var(--renk-birincil); text-decoration:none; font-weight:600; padding:0.3rem 0.7rem; border-radius:50px; background:#fff; border:1px solid var(--renk-sinir); }
.fy-adim:hover { background:var(--renk-arkaplan); }
.fy-secili { background:var(--renk-birincil); color:#fff; border-color:var(--renk-birincil); }
.fy-ok { color:var(--renk-metin-hafif); }
.fy-adim-baslik { font-size:1.2rem; font-weight:800; color:var(--renk-birincil); margin-bottom:1rem; }
.fy-secenek-grid { display:flex; flex-wrap:wrap; gap:0.75rem; }
.fy-marka-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); }
.fy-secenek { background:#fff; border:1.5px solid var(--renk-sinir); border-radius:var(--yaricap); padding:0.85rem 1.3rem; font-size:0.95rem; font-weight:600; color:var(--renk-metin); cursor:pointer; transition:all var(--gecis); font-family:var(--font-ana); }
.fy-secenek:hover { border-color:var(--renk-birincil); background:var(--renk-birincil); color:#fff; transform:translateY(-2px); box-shadow:var(--golge-orta); }
.fy-bos { background:#fff; border-radius:var(--yaricap); padding:1.5rem 1.75rem; color:var(--renk-metin-hafif); box-shadow:var(--golge-hafif); }
.fy-sonuc-bas { margin-bottom:1.25rem; }
.fy-sonuc-bas h2 { font-size:1.35rem; font-weight:800; color:var(--renk-birincil); }
.fy-sonuc-bas p { color:var(--renk-metin-hafif); font-size:0.9rem; }
.fy-paket-liste { display:grid; gap:0.85rem; }
.fy-paket { display:flex; align-items:center; justify-content:space-between; gap:1rem; background:#fff; border:1.5px solid var(--renk-sinir); border-radius:var(--yaricap); padding:1.1rem 1.4rem; transition:border-color var(--gecis), box-shadow var(--gecis); }
.fy-paket:hover { border-color:var(--renk-birincil); box-shadow:var(--golge-orta); }
.fy-paket-bilgi h3 { font-size:0.95rem; color:var(--renk-metin-hafif); font-weight:600; margin-bottom:0.15rem; }
.fy-paket-ad { font-size:1.08rem; font-weight:800; color:var(--renk-metin); margin-bottom:0.5rem; }
.fy-pk-etiketler { display:flex; flex-wrap:wrap; gap:0.4rem; margin-bottom:0.5rem; }
.fy-pk-etiket { font-size:0.72rem; font-weight:600; padding:0.2rem 0.6rem; border-radius:50px; background:var(--renk-arkaplan); color:var(--renk-metin-hafif); border:1px solid var(--renk-sinir); }
.fy-pk-puan { font-size:0.82rem; color:var(--renk-uyari); font-weight:600; }
.fy-pk-puan b { color:var(--renk-metin); }
.fy-pk-puan-bos { color:var(--renk-metin-hafif); font-weight:500; }
.fy-paket-btn { flex-shrink:0; background:var(--renk-birincil); color:#fff; text-decoration:none; padding:0.65rem 1.2rem; border-radius:10px; font-weight:700; font-size:0.88rem; transition:background var(--gecis); white-space:nowrap; }
.fy-paket-btn:hover { background:#16305c; }
@media (max-width:560px){ .fy-paket { flex-direction:column; align-items:stretch; } .fy-paket-btn { text-align:center; } .yf-satir { grid-template-columns:1fr; } }

/* ===== Model kartı: yıldız model adının yanında + ince çerçeve ===== */
.kart-model-satir { display:flex; align-items:center; gap:0.5rem; flex-wrap:nowrap; }
.kart-puan-mini { margin-left:auto; margin-right:1rem; display:inline-flex; align-items:center; gap:0.2rem; font-size:0.78rem; color:var(--renk-uyari); white-space:nowrap; }
.kart-puan-mini .yildizlar, .kart-puan-mini svg { font-size:0.78rem; }
.kart-puan-mini strong { color:var(--renk-metin); font-size:0.82rem; }
.arac-karti-ince { border-width:1px; }
.arac-karti-ince .kart-ust { padding:1rem 1.1rem; gap:0.8rem; }
.arac-karti-ince .kart-alt { padding:0 1.1rem 1rem; gap:0.55rem; }
.arac-karti-ince .kart-model { font-size:1.08rem; }
.arac-karti-ince .yorum-sayisi { display:block; margin-top:0.15rem; }

/* ===== Araç Karşılaştırma (karsilastir.js) ===== */
.ks-ekle { display:flex; gap:1rem; flex-wrap:wrap; align-items:flex-end; background:#fff; border-radius:var(--yaricap); box-shadow:var(--golge-hafif); padding:1.25rem 1.5rem; margin-bottom:1.25rem; }
.ks-ekle label { display:flex; flex-direction:column; gap:.35rem; font-size:.85rem; font-weight:600; color:var(--renk-metin); min-width:220px; }
.ks-ekle select { padding:.6rem .7rem; border:1px solid var(--renk-sinir); border-radius:8px; font-family:var(--font-ana); font-size:.92rem; }
.ks-ekle-btn { background:var(--renk-ikincil); color:#fff; border:none; border-radius:10px; padding:.7rem 1.4rem; font-weight:700; cursor:pointer; font-family:var(--font-ana); }
.ks-ekle-btn:hover:not(:disabled) { background:var(--renk-ikincil-acik); }
.ks-ekle-btn:disabled { opacity:.5; cursor:not-allowed; }
.ks-bos { background:#fff; border-radius:var(--yaricap); padding:2rem 1.75rem; color:var(--renk-metin-hafif); box-shadow:var(--golge-hafif); text-align:center; }
.ks-ipucu { color:var(--renk-metin-hafif); margin-top:.75rem; font-size:.9rem; }
.ks-tablo-sar { overflow-x:auto; background:#fff; border-radius:var(--yaricap); box-shadow:var(--golge-hafif); }
.ks-tablo { border-collapse:collapse; width:100%; min-width:480px; }
.ks-tablo th, .ks-tablo td { padding:.85rem 1rem; text-align:left; border-bottom:1px solid var(--renk-sinir); vertical-align:top; }
.ks-tablo tbody th { font-size:.82rem; font-weight:700; color:var(--renk-metin-hafif); white-space:nowrap; background:var(--renk-arkaplan); width:140px; }
.ks-arac-bas { position:relative; min-width:170px; text-align:center !important; background:var(--renk-arkaplan); }
.ks-logo { width:40px; height:40px; object-fit:contain; margin:0 auto .4rem; display:block; }
.ks-arac-ad { font-size:.78rem; color:var(--renk-metin-hafif); line-height:1.3; }
.ks-arac-ad b { color:var(--renk-birincil); font-size:1rem; }
.ks-cikar { position:absolute; top:4px; right:6px; width:22px; height:22px; border:none; border-radius:50%; background:var(--renk-kronik); color:#fff; cursor:pointer; font-size:14px; line-height:1; }
.ks-detay { display:inline-block; margin-top:.4rem; font-size:.78rem; color:var(--renk-birincil); font-weight:600; }
.ks-yildiz { color:var(--renk-uyari); }
.ks-yok { color:var(--renk-metin-hafif); font-style:italic; font-size:.85rem; }
.ks-motorlar { display:flex; flex-wrap:wrap; gap:.3rem; max-width:240px; }
.ks-motor { font-size:.72rem; padding:.15rem .5rem; border-radius:50px; background:var(--renk-arkaplan); border:1px solid var(--renk-sinir); color:var(--renk-metin-hafif); }

/* ===== Kart üzerindeki "Karşılaştır" butonu (sağ üst) ===== */
.kart-ust { padding-top:2.2rem !important; }
.kart-ks-btn { position:absolute; top:8px; right:8px; z-index:3; background:#fff; border:1px solid var(--renk-sinir); color:var(--renk-birincil); font-size:0.68rem; font-weight:700; padding:0.24rem 0.55rem; border-radius:50px; cursor:pointer; font-family:var(--font-ana); white-space:nowrap; transition:background var(--gecis),color var(--gecis),border-color var(--gecis); }
.kart-ks-btn:hover { background:var(--renk-birincil); color:#fff; border-color:var(--renk-birincil); }
.kart-ks-btn.ekli { background:var(--renk-basari); color:#fff; border-color:var(--renk-basari); }

/* ===== Karşılaştırma: kart düzeni (üstte bilgi, altta yorumlar) ===== */
.ks-kolonlar { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:1.25rem; align-items:start; }
.ks-kolon { display:flex; flex-direction:column; gap:1rem; }
.ks-kart { position:relative; background:#fff; border:1.5px solid var(--renk-sinir); border-radius:var(--yaricap-buyuk); box-shadow:var(--golge-hafif); padding:1.5rem 1.25rem 1.25rem; text-align:center; }
.ks-cikar { position:absolute; top:8px; right:8px; width:24px; height:24px; border:none; border-radius:50%; background:var(--renk-kronik); color:#fff; cursor:pointer; font-size:15px; line-height:1; }
.ks-kart-logo { width:54px; height:54px; object-fit:contain; margin:0 auto .5rem; display:block; }
.ks-kart-marka { font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.6px; color:var(--renk-metin-hafif); }
.ks-kart-model { font-size:1.25rem; font-weight:900; color:var(--renk-birincil); margin-bottom:.4rem; }
.ks-kart-puan { font-size:.85rem; color:var(--renk-uyari); margin-bottom:.6rem; }
.ks-kart-puan b { color:var(--renk-metin); }
.ks-kart-puan small { color:var(--renk-metin-hafif); }
.ks-kart-etiket { display:inline-block; font-size:.72rem; font-weight:600; padding:.2rem .7rem; border-radius:50px; background:var(--renk-arkaplan); color:var(--renk-metin-hafif); border:1px solid var(--renk-sinir); margin-bottom:.7rem; }
.ks-kart-alt { display:flex; justify-content:center; gap:1rem; font-size:.82rem; color:var(--renk-metin-hafif); margin-bottom:.8rem; }
.ks-kart-detay { display:inline-block; background:var(--renk-birincil); color:#fff; text-decoration:none; padding:.55rem 1.1rem; border-radius:10px; font-weight:600; font-size:.85rem; }
.ks-kart-detay:hover { background:#16305c; }
.ks-yorum-blok { background:#fff; border:1px solid var(--renk-sinir); border-radius:var(--yaricap); padding:1rem 1.1rem; }
.ks-yorum-bas { font-size:.95rem; color:var(--renk-birincil); margin-bottom:.75rem; padding-bottom:.5rem; border-bottom:1px solid var(--renk-sinir); }
.ks-yorum { border-bottom:1px solid var(--renk-arkaplan); padding:.65rem 0; }
.ks-yorum:last-child { border-bottom:none; }
.ks-yorum-ust { display:flex; justify-content:space-between; align-items:center; }
.ks-yorum-ad { font-weight:700; font-size:.85rem; }
.ks-yorum-motor { font-size:.72rem; color:var(--renk-metin-hafif); margin:.1rem 0 .3rem; }
.ks-yorum h5 { font-size:.88rem; margin:.2rem 0; }
.ks-iyi { color:var(--renk-basari); font-size:.82rem; margin:.15rem 0; }
.ks-kotu { color:var(--renk-kronik); font-size:.82rem; margin:.15rem 0; }
.ks-yorum-blok .ks-yok { color:var(--renk-metin-hafif); font-style:italic; font-size:.85rem; }
.ks-yildiz { color:var(--renk-uyari); }

/* ===== Bütçeye Göre Araçlar (butce.js) ===== */
.butce-grid { display:flex; flex-direction:column; gap:.6rem; }
.butce-karti { display:flex; align-items:center; gap:1rem; background:#fff; border:1px solid var(--renk-sinir); border-radius:var(--yaricap); padding:.7rem 1rem; text-decoration:none; color:var(--renk-metin); transition:border-color var(--gecis), box-shadow var(--gecis), transform var(--gecis); }
.butce-karti:hover { border-color:var(--renk-birincil); box-shadow:var(--golge-orta); transform:translateY(-1px); }
.bt-logo { width:44px; height:44px; flex-shrink:0; display:flex; align-items:center; justify-content:center; }
.bt-logo img { max-width:40px; max-height:40px; object-fit:contain; }
.bt-ad { flex:1; min-width:0; display:flex; flex-direction:column; }
.bt-marka { font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.5px; color:var(--renk-metin-hafif); }
.bt-ad b { font-size:1.05rem; color:var(--renk-birincil); }
.bt-etiket { font-size:.74rem; color:var(--renk-metin-hafif); }
.bt-puan { min-width:120px; text-align:right; font-size:.85rem; color:var(--renk-uyari); }
.bt-puan b { color:var(--renk-metin); }
.bt-puan small { color:var(--renk-metin-hafif); }
.bt-puan-yok { color:var(--renk-metin-hafif); font-style:italic; }
.bt-yildiz { color:var(--renk-uyari); }
.bt-fiyat { min-width:130px; text-align:right; font-size:1.05rem; font-weight:800; color:var(--renk-basari); display:flex; flex-direction:column; }
.bt-fiyat small { font-size:.66rem; font-weight:500; color:var(--renk-metin-hafif); }
@media (max-width:560px){ .butce-karti { flex-wrap:wrap; } .bt-puan, .bt-fiyat { min-width:0; text-align:left; } }

/* ===== Profil sayfası (profil.js) ===== */
.profil-kart { display:flex; align-items:center; gap:1.25rem; flex-wrap:wrap; background:#fff; border-radius:var(--yaricap-buyuk); box-shadow:var(--golge-hafif); padding:1.75rem 2rem; }
.profil-avatar { width:72px; height:72px; border-radius:50%; background:var(--renk-birincil); color:#fff; display:flex; align-items:center; justify-content:center; font-size:1.6rem; font-weight:800; flex-shrink:0; }
.profil-bilgi { flex:1; min-width:160px; }
.profil-bilgi h1 { font-size:1.5rem; font-weight:900; color:var(--renk-birincil); margin-bottom:.2rem; }
.profil-email { color:var(--renk-metin-hafif); font-size:.9rem; }
.profil-tarih { color:var(--renk-metin-hafif); font-size:.82rem; margin-top:.2rem; }
.profil-istat { display:flex; gap:1.5rem; }
.profil-istat div { text-align:center; }
.profil-istat b { display:block; font-size:1.5rem; font-weight:800; color:var(--renk-ikincil); }
.profil-istat span { font-size:.78rem; color:var(--renk-metin-hafif); }
.profil-cikis { background:var(--renk-kronik); color:#fff; border:none; border-radius:10px; padding:.6rem 1.2rem; font-weight:700; cursor:pointer; font-family:var(--font-ana); }
.profil-cikis:hover { background:#a93226; }
.profil-yorumlar { display:grid; gap:.75rem; }
.profil-yorum { background:#fff; border:1px solid var(--renk-sinir); border-radius:var(--yaricap); padding:1rem 1.15rem; }
.py-ust { display:flex; justify-content:space-between; align-items:center; }
.py-ust a { color:var(--renk-birincil); text-decoration:none; }
.py-yildiz { color:var(--renk-uyari); }
.py-motor { font-size:.74rem; color:var(--renk-metin-hafif); margin:.1rem 0 .3rem; }
.profil-yorum h4 { font-size:.95rem; margin:.2rem 0; }
.py-iyi { color:var(--renk-basari); font-size:.85rem; margin:.15rem 0; }
.py-kotu { color:var(--renk-kronik); font-size:.85rem; margin:.15rem 0; }
.profil-bos { color:var(--renk-metin-hafif); font-style:italic; background:#fff; border-radius:var(--yaricap); padding:1.25rem 1.5rem; box-shadow:var(--golge-hafif); }
.profil-giris-uyari { background:#fff; border-radius:var(--yaricap-buyuk); box-shadow:var(--golge-hafif); padding:3rem 2rem; text-align:center; max-width:480px; margin:2rem auto; }
.pg-ikon { font-size:3rem; margin-bottom:.5rem; }
.profil-giris-uyari h2 { color:var(--renk-birincil); margin-bottom:.5rem; }
.profil-giris-uyari p { color:var(--renk-metin-hafif); margin-bottom:1.5rem; }
.pg-btnlar { display:flex; gap:.75rem; justify-content:center; }
.pg-btnlar button { width:auto; }
/* dropdown linki (Profilim) buton gibi görünsün */
a.dropdown-item { display:block; text-decoration:none; color:var(--renk-metin); }

/* =========================================================
   Motor yorum formu — yeni düzen (motor.js formHTML)
   ========================================================= */
.yf-ust { display:grid; grid-template-columns:auto 1fr; gap:1.5rem; align-items:center;
  background:#fff7ed; border:1px solid #fed7aa; border-radius:14px; padding:1rem 1.25rem; margin-bottom:1.2rem; }
.yf-ikili { display:grid; grid-template-columns:1fr 1fr; gap:1.1rem; }
.yf-panel { background:#f8fafc; border:1px solid #e2e8f0; border-radius:14px; padding:1rem 1.25rem; margin-top:1.2rem; }
.yf-meta-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:0 1rem; }
@media (max-width:680px) {
  .yf-ust { grid-template-columns:1fr; gap:0.75rem; }
  .yf-ikili { grid-template-columns:1fr; }
}

/* Motor yorum formu: odak (focus) çerçevesi sitenin geneliyle aynı olsun
   (turuncu :focus-visible dış çizgisi yerine yumuşak mavi). */
#motor-yorum-form input:focus,
#motor-yorum-form textarea:focus,
#motor-yorum-form select:focus,
#motor-yorum-form input:focus-visible,
#motor-yorum-form textarea:focus-visible,
#motor-yorum-form select:focus-visible {
  outline: none;
  border-color: var(--renk-birincil);
  box-shadow: 0 0 0 3px rgba(26, 58, 107, 0.12);
}

/* Motor yorum: "Yorum Yap" formu yanda açılsın (alta atmasın). */
.yorum-alan { display: grid; grid-template-columns: 1fr; gap: 1.5rem; align-items: start; }
.yorum-alan.acik { grid-template-columns: minmax(0, 1fr) 440px; }
.yorum-form-kolon { position: sticky; top: 80px; }
/* Yan sütundaki form dar olduğu için iç ikili ızgaralar tek sütun olsun. */
.yorum-form-kolon .yf-ust,
.yorum-form-kolon .yf-ikili { grid-template-columns: 1fr; }
@media (max-width: 900px) {
  .yorum-alan.acik { grid-template-columns: 1fr; }
  .yorum-form-kolon { position: static; }
}

/* Yorum kartı: artılar/eksiler ve sorunlar/çözüm ikişerli yan yana. */
.yk-ikili { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; margin: 0.4rem 0; align-items: stretch; }
@media (max-width: 560px) { .yk-ikili { grid-template-columns: 1fr; } }