/* =========================================================
   TASARIM TESTİ - LACİVERT + GRİ MAVİ + SOFT MINT
   Palet:
   #19183B
   #708993
   #A1C2BD
   #E7F2EF

   Amaç:
   - Göz yormayan koyu tema
   - Fazla mor olmayan lacivert taban
   - Gri-mavi kartlar
   - Soft mint vurgular
   - Eğitim / hesaplama sitesi için daha kurumsal görünüm
   ========================================================= */

:root {
  --bg: #19183b;

  --surface: rgba(34, 40, 70, 0.97);
  --surface-solid: #222846;
  --surface-soft: #2d3854;
  --surface-warm: #34455a;

  --text: #e7f2ef;
  --text-strong: #ffffff;
  --muted: #a1c2bd;
  --muted-2: #8aa5a7;

  --primary: #a1c2bd;
  --primary-dark: #708993;
  --accent: #e7f2ef;
  --accent-dark: #a1c2bd;
  --teal: #a1c2bd;

  --success: #a8d5bd;
  --warning: #d9c99b;
  --danger: #e8a6a6;

  --border: rgba(231, 242, 239, 0.12);
  --border-strong: rgba(231, 242, 239, 0.23);
  --input: #12152f;

  --shadow: 0 28px 80px rgba(4, 5, 18, 0.38);
  --shadow-soft: 0 14px 42px rgba(4, 5, 18, 0.24);
}

body.light-theme {
  --bg: #e7f2ef;

  --surface: rgba(255, 255, 255, 0.96);
  --surface-solid: #ffffff;
  --surface-soft: #f2f8f6;
  --surface-warm: #dfecea;

  --text: #202336;
  --text-strong: #121427;
  --muted: #60757a;
  --muted-2: #82979b;

  --primary: #708993;
  --primary-dark: #536a73;
  --accent: #19183b;
  --accent-dark: #12122e;
  --teal: #708993;

  --success: #15803d;
  --warning: #b45309;
  --danger: #b42318;

  --border: rgba(25, 24, 59, 0.12);
  --border-strong: rgba(25, 24, 59, 0.22);
  --input: #ffffff;

  --shadow: 0 24px 70px rgba(25, 24, 59, 0.12);
  --shadow-soft: 0 12px 34px rgba(25, 24, 59, 0.08);
}

/* Sayfa arka planı */
body {
  background:
    radial-gradient(circle at 12% 0%, rgba(161, 194, 189, 0.16), transparent 30%),
    radial-gradient(circle at 92% 6%, rgba(112, 137, 147, 0.14), transparent 28%),
    radial-gradient(circle at 55% 105%, rgba(231, 242, 239, 0.07), transparent 32%),
    linear-gradient(180deg, #19183b 0%, #1f2544 48%, #11122d 100%) !important;
}

body.light-theme {
  background:
    radial-gradient(circle at 12% 0%, rgba(161, 194, 189, 0.22), transparent 30%),
    radial-gradient(circle at 92% 6%, rgba(112, 137, 147, 0.14), transparent 28%),
    radial-gradient(circle at 55% 105%, rgba(231, 242, 239, 0.34), transparent 32%),
    linear-gradient(180deg, #e7f2ef 0%, #f4faf8 48%, #ffffff 100%) !important;
}

/* =========================================================
   GENEL KARTLAR
   ========================================================= */

.panel,
.hero-card,
.summary-card,
.site-footer,
.section,
.score-card,
.chart-card,
.years,
.history-card,
.smart-card,
.target-simple-card,
.share-card,
.download-card,
.trial-card,
.impact-card,
.faq-item,
.guide-item,
.feedback-box {
  background:
    linear-gradient(180deg, rgba(34, 40, 70, 0.98), rgba(28, 34, 62, 0.98)) !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
  box-shadow: var(--shadow-soft) !important;
}

.panel {
  border-radius: 30px !important;
}

body.light-theme .panel,
body.light-theme .hero-card,
body.light-theme .summary-card,
body.light-theme .site-footer,
body.light-theme .section,
body.light-theme .score-card,
body.light-theme .chart-card,
body.light-theme .years,
body.light-theme .history-card,
body.light-theme .smart-card,
body.light-theme .target-simple-card,
body.light-theme .share-card,
body.light-theme .download-card,
body.light-theme .trial-card,
body.light-theme .impact-card,
body.light-theme .faq-item,
body.light-theme .guide-item,
body.light-theme .feedback-box {
  background: var(--surface) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}

/* =========================================================
   ÜST BAR
   ========================================================= */

.topbar {
  background:
    linear-gradient(135deg, rgba(18, 21, 47, 0.98), rgba(25, 24, 59, 0.96)) !important;
  border: 1px solid rgba(231, 242, 239, 0.12) !important;
  box-shadow: 0 16px 42px rgba(4, 5, 18, 0.30) !important;
}

body.light-theme .topbar {
  background: rgba(255, 255, 255, 0.92) !important;
  border-color: rgba(25, 24, 59, 0.12) !important;
}

.logo,
.brand-mark {
  background:
    linear-gradient(135deg, #708993, #a1c2bd) !important;
  color: #ffffff !important;
}

/* Üst menü butonları */
.quick-nav button,
.top-link {
  background: rgba(161, 194, 189, 0.11) !important;
  color: var(--text) !important;
  border-color: rgba(161, 194, 189, 0.22) !important;
}

.quick-nav button:hover,
.top-link:hover {
  background: rgba(161, 194, 189, 0.20) !important;
}

body.light-theme .quick-nav button,
body.light-theme .top-link {
  background: #ffffff !important;
  color: var(--text-strong) !important;
  border-color: rgba(25, 24, 59, 0.12) !important;
}

/* Tema butonu */
.theme-toggle {
  background:
    linear-gradient(135deg, #a1c2bd, #e7f2ef) !important;
  color: #19183b !important;
  border-color: transparent !important;
}

body.light-theme .theme-toggle {
  background: #708993 !important;
  color: #ffffff !important;
}

/* =========================================================
   HERO / ÜST TANITIM
   ========================================================= */

.hero-card {
  background:
    radial-gradient(circle at 92% 8%, rgba(161, 194, 189, 0.12), transparent 30%),
    linear-gradient(145deg, rgba(45, 56, 84, 0.98), rgba(34, 40, 70, 0.98)) !important;
  border-color: rgba(161, 194, 189, 0.16) !important;
}

body.light-theme .hero-card {
  background:
    linear-gradient(145deg, #ffffff, #f2f8f6) !important;
}

.hero-card h1,
.hero-title,
h1 {
  color: var(--text-strong) !important;
}

.hero-text {
  color: var(--muted) !important;
}

/* Sağ üst özet kartları */
.summary-card {
  background:
    linear-gradient(180deg, rgba(45, 56, 84, 0.96), rgba(34, 40, 70, 0.96)) !important;
  border-color: rgba(231, 242, 239, 0.12) !important;
}

body.light-theme .summary-card {
  background: #ffffff !important;
}

/* =========================================================
   PANEL BAŞLIKLARI
   ========================================================= */

.panel-header,
.section-top {
  background: rgba(18, 21, 47, 0.80) !important;
  border-color: rgba(231, 242, 239, 0.10) !important;
}

body.light-theme .panel-header,
body.light-theme .section-top {
  background: rgba(242, 248, 246, 0.92) !important;
}

/* =========================================================
   DERS KARTLARI
   ========================================================= */

.lesson-row,
.lesson-card,
.subject-card {
  background:
    linear-gradient(180deg, rgba(45, 56, 84, 0.97), rgba(34, 40, 70, 0.97)) !important;
  border: 1px solid rgba(231, 242, 239, 0.12) !important;
  border-radius: 22px !important;
  box-shadow: 0 14px 34px rgba(4, 5, 18, 0.18) !important;
}

body.light-theme .lesson-row,
body.light-theme .lesson-card,
body.light-theme .subject-card {
  background:
    linear-gradient(180deg, #ffffff, #f2f8f6) !important;
  border-color: rgba(25, 24, 59, 0.12) !important;
}

.lesson-name,
.lesson-row h3,
.lesson-row strong {
  color: var(--text-strong) !important;
}

/* =========================================================
   INPUT VE SAYI KONTROLLERİ
   ========================================================= */

input,
select,
textarea {
  background: var(--input) !important;
  color: var(--text) !important;
  border: 1px solid var(--border-strong) !important;
}

body.light-theme input,
body.light-theme select,
body.light-theme textarea {
  background: #ffffff !important;
  color: var(--text) !important;
}

input:focus,
select:focus,
textarea:focus {
  border-color: rgba(161, 194, 189, 0.58) !important;
  box-shadow: 0 0 0 4px rgba(161, 194, 189, 0.13) !important;
}

/* Artı eksi butonları */
.easy-number-btn,
.number-btn,
.qty-btn {
  background: rgba(18, 21, 47, 0.95) !important;
  color: var(--text-strong) !important;
  border: 1px solid rgba(231, 242, 239, 0.18) !important;
  border-radius: 16px !important;
}

.easy-number-btn:hover,
.number-btn:hover,
.qty-btn:hover {
  background: rgba(161, 194, 189, 0.18) !important;
  border-color: rgba(161, 194, 189, 0.34) !important;
}

.easy-number-control input {
  background: rgba(18, 21, 47, 0.96) !important;
  color: var(--text-strong) !important;
  border: 1px solid rgba(161, 194, 189, 0.28) !important;
  border-radius: 16px !important;
}

body.light-theme .easy-number-btn,
body.light-theme .number-btn,
body.light-theme .qty-btn,
body.light-theme .easy-number-control input {
  background: #ffffff !important;
  color: var(--text-strong) !important;
  border-color: rgba(25, 24, 59, 0.15) !important;
}

/* Net kutusu */
.live-net {
  background:
    linear-gradient(135deg, rgba(161, 194, 189, 0.16), rgba(231, 242, 239, 0.08)) !important;
  border: 1px solid rgba(161, 194, 189, 0.28) !important;
  color: var(--accent) !important;
  border-radius: 18px !important;
}

.live-net span,
.live-net strong {
  color: var(--text-strong) !important;
}

/* =========================================================
   BUTONLAR
   ========================================================= */

.btn-primary,
.download-btn,
.feedback-btn,
.trial-save-btn,
.share-btn.primary,
.primary-link {
  background:
    linear-gradient(135deg, #708993, #a1c2bd) !important;
  color: #ffffff !important;
  border: none !important;
  box-shadow: 0 14px 30px rgba(112, 137, 147, 0.24) !important;
}

.btn-primary:hover,
.download-btn:hover,
.feedback-btn:hover,
.trial-save-btn:hover,
.share-btn.primary:hover,
.primary-link:hover {
  transform: translateY(-1px) !important;
  filter: brightness(1.04) !important;
}

.btn-ghost,
.history-btn,
.trial-btn,
.share-btn.secondary,
.button-secondary {
  background: rgba(45, 56, 84, 0.92) !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
}

.btn-ghost:hover,
.history-btn:hover,
.trial-btn:hover,
.share-btn.secondary:hover,
.button-secondary:hover {
  background: rgba(161, 194, 189, 0.16) !important;
}

body.light-theme .btn-ghost,
body.light-theme .history-btn,
body.light-theme .trial-btn,
body.light-theme .share-btn.secondary,
body.light-theme .button-secondary {
  background: #ffffff !important;
  color: var(--text) !important;
}

/* =========================================================
   KÜÇÜK KARTLAR / İÇ ALANLAR
   ========================================================= */

.mini-stat,
.net-item,
.history-item,
.trial-item,
.smart-box,
.target-simple-box,
.download-preview,
.share-preview,
.impact-item,
.info-item,
.priority-card,
.factor-card,
.comparison-card,
.plan-item,
.trust-box,
.general-card,
.input-group-card {
  background:
    linear-gradient(180deg, rgba(45, 56, 84, 0.96), rgba(34, 40, 70, 0.96)) !important;
  border: 1px solid var(--border) !important;
  border-radius: 18px !important;
  color: var(--text) !important;
}

body.light-theme .mini-stat,
body.light-theme .net-item,
body.light-theme .history-item,
body.light-theme .trial-item,
body.light-theme .smart-box,
body.light-theme .target-simple-box,
body.light-theme .download-preview,
body.light-theme .share-preview,
body.light-theme .impact-item,
body.light-theme .info-item,
body.light-theme .priority-card,
body.light-theme .factor-card,
body.light-theme .comparison-card,
body.light-theme .plan-item,
body.light-theme .trust-box,
body.light-theme .general-card,
body.light-theme .input-group-card {
  background: #ffffff !important;
}

/* Son hesaplamalar */
.history-item {
  background:
    linear-gradient(180deg, rgba(45, 56, 84, 0.96), rgba(34, 40, 70, 0.96)) !important;
  border-color: rgba(231, 242, 239, 0.12) !important;
}

body.light-theme .history-item {
  background: #ffffff !important;
}

/* Sonuç ana kartı */
.score-card.primary {
  background:
    linear-gradient(135deg, rgba(161, 194, 189, 0.14), rgba(231, 242, 239, 0.08)) !important;
  border-color: rgba(161, 194, 189, 0.24) !important;
}

/* Grafik ve yıl kartları */
.chart-card,
.years,
.history-card {
  background: rgba(34, 40, 70, 0.94) !important;
}

body.light-theme .chart-card,
body.light-theme .years,
body.light-theme .history-card {
  background: #ffffff !important;
}

/* =========================================================
   BADGE / ETİKETLER
   ========================================================= */

.section-tag,
.badge-small,
.impact-badge {
  background: rgba(161, 194, 189, 0.13) !important;
  color: #e7f2ef !important;
  border: 1px solid rgba(161, 194, 189, 0.24) !important;
}

body.light-theme .section-tag,
body.light-theme .badge-small,
body.light-theme .impact-badge {
  background: rgba(161, 194, 189, 0.10) !important;
  color: var(--primary-dark) !important;
  border-color: rgba(161, 194, 189, 0.18) !important;
}

/* =========================================================
   METİNLER
   ========================================================= */

.score-label,
.card-subtitle,
.history-subtitle,
.panel-subtitle,
.result-empty,
.footer-note,
.year-detail,
.history-meta,
.trial-meta,
.smart-desc,
.impact-detail,
.impact-subtitle,
.faq-answer,
.feedback-text,
.guide-item span,
.seo-content p {
  color: var(--muted) !important;
}

.score-value,
.card-title,
.history-title,
.panel-title,
.section-title,
.lesson-name,
.history-rank,
.trial-name,
.smart-value {
  color: var(--text-strong) !important;
}

/* Linkler */
.site-footer-links a,
.guide-item strong,
.breadcrumb a,
.toc-list a,
.related-list a {
  color: var(--primary) !important;
}

/* Rehber kartları hover */
.guide-item {
  transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease !important;
}

.guide-item:hover {
  transform: translateY(-2px) !important;
  border-color: rgba(161, 194, 189, 0.28) !important;
  background: rgba(161, 194, 189, 0.10) !important;
}

/* =========================================================
   MOBİL
   ========================================================= */

@media (max-width: 720px) {
  .panel,
  .hero-card,
  .section,
  .lesson-row,
  .history-item {
    border-radius: 22px !important;
  }
}
/* =========================================================
   KOYU MOD MAVİ TONUNU AÇMA DÜZELTMESİ
   Palet:
   #19183B
   #708993
   #A1C2BD
   #E7F2EF

   Amaç:
   Koyu modda mavi/lacivert alanları daha açık ve ferah yapmak.
   ========================================================= */

body:not(.light-theme) {
  --bg: #232846;

  --surface: rgba(54, 67, 98, 0.97);
  --surface-solid: #364362;
  --surface-soft: #435371;
  --surface-warm: #50637d;

  --text: #e7f2ef;
  --text-strong: #ffffff;
  --muted: #c9dcda;
  --muted-2: #a9bec1;

  --primary: #a1c2bd;
  --primary-dark: #86aaa8;
  --accent: #e7f2ef;
  --accent-dark: #bcd6d2;

  --border: rgba(231, 242, 239, 0.15);
  --border-strong: rgba(231, 242, 239, 0.26);
  --input: #20263f;

  --shadow: 0 24px 70px rgba(8, 10, 24, 0.30);
  --shadow-soft: 0 12px 34px rgba(8, 10, 24, 0.18);
}

/* Arka planı daha açık mavi-lacivert yap */
body:not(.light-theme) {
  background:
    radial-gradient(circle at 12% 0%, rgba(161, 194, 189, 0.20), transparent 30%),
    radial-gradient(circle at 92% 6%, rgba(112, 137, 147, 0.18), transparent 28%),
    radial-gradient(circle at 55% 105%, rgba(231, 242, 239, 0.08), transparent 32%),
    linear-gradient(180deg, #232846 0%, #2d3658 48%, #1a1d39 100%) !important;
}

/* Büyük kartlar daha açık mavi-gri */
body:not(.light-theme) .panel,
body:not(.light-theme) .hero-card,
body:not(.light-theme) .summary-card,
body:not(.light-theme) .site-footer,
body:not(.light-theme) .section,
body:not(.light-theme) .score-card,
body:not(.light-theme) .chart-card,
body:not(.light-theme) .years,
body:not(.light-theme) .history-card,
body:not(.light-theme) .smart-card,
body:not(.light-theme) .target-simple-card,
body:not(.light-theme) .share-card,
body:not(.light-theme) .download-card,
body:not(.light-theme) .trial-card,
body:not(.light-theme) .impact-card,
body:not(.light-theme) .faq-item,
body:not(.light-theme) .guide-item,
body:not(.light-theme) .feedback-box {
  background:
    linear-gradient(180deg, rgba(54, 67, 98, 0.98), rgba(45, 56, 86, 0.98)) !important;
  border-color: rgba(231, 242, 239, 0.14) !important;
  color: var(--text) !important;
}

/* Hero kartı daha ferah */
body:not(.light-theme) .hero-card {
  background:
    radial-gradient(circle at 90% 8%, rgba(161, 194, 189, 0.18), transparent 30%),
    linear-gradient(145deg, rgba(62, 77, 112, 0.98), rgba(54, 67, 98, 0.98)) !important;
  border-color: rgba(161, 194, 189, 0.20) !important;
}

/* Sağ üst özet kartları */
body:not(.light-theme) .summary-card {
  background:
    linear-gradient(180deg, rgba(62, 77, 112, 0.96), rgba(54, 67, 98, 0.96)) !important;
  border-color: rgba(231, 242, 239, 0.14) !important;
}

/* Panel başlıkları çok koyu kalmasın */
body:not(.light-theme) .panel-header,
body:not(.light-theme) .section-top {
  background: rgba(37, 44, 72, 0.86) !important;
  border-color: rgba(231, 242, 239, 0.12) !important;
}

/* Ders kartları daha açık mavi */
body:not(.light-theme) .lesson-row,
body:not(.light-theme) .lesson-card,
body:not(.light-theme) .subject-card {
  background:
    linear-gradient(180deg, rgba(62, 77, 112, 0.97), rgba(54, 67, 98, 0.97)) !important;
  border-color: rgba(231, 242, 239, 0.14) !important;
}

/* Küçük kartlar */
body:not(.light-theme) .mini-stat,
body:not(.light-theme) .net-item,
body:not(.light-theme) .history-item,
body:not(.light-theme) .trial-item,
body:not(.light-theme) .smart-box,
body:not(.light-theme) .target-simple-box,
body:not(.light-theme) .download-preview,
body:not(.light-theme) .share-preview,
body:not(.light-theme) .impact-item,
body:not(.light-theme) .info-item,
body:not(.light-theme) .priority-card,
body:not(.light-theme) .factor-card,
body:not(.light-theme) .comparison-card,
body:not(.light-theme) .plan-item,
body:not(.light-theme) .trust-box,
body:not(.light-theme) .general-card,
body:not(.light-theme) .input-group-card {
  background:
    linear-gradient(180deg, rgba(67, 83, 113, 0.96), rgba(54, 67, 98, 0.96)) !important;
  border-color: rgba(231, 242, 239, 0.14) !important;
}

/* Son hesaplamalar kartı */
body:not(.light-theme) .history-item {
  background:
    linear-gradient(180deg, rgba(67, 83, 113, 0.96), rgba(54, 67, 98, 0.96)) !important;
}

/* Üst bar çok koyu kalmasın ama okunaklı olsun */
body:not(.light-theme) .topbar {
  background:
    linear-gradient(135deg, rgba(25, 24, 59, 0.94), rgba(38, 45, 77, 0.94)) !important;
  border-color: rgba(231, 242, 239, 0.14) !important;
}

/* Inputları biraz aç */
body:not(.light-theme) input,
body:not(.light-theme) select,
body:not(.light-theme) textarea,
body:not(.light-theme) .easy-number-control input {
  background: #20263f !important;
  color: #e7f2ef !important;
  border-color: rgba(231, 242, 239, 0.22) !important;
}

/* Artı eksi butonları */
body:not(.light-theme) .easy-number-btn,
body:not(.light-theme) .number-btn,
body:not(.light-theme) .qty-btn {
  background: rgba(37, 44, 72, 0.96) !important;
  color: #e7f2ef !important;
  border-color: rgba(231, 242, 239, 0.18) !important;
}

body:not(.light-theme) .easy-number-btn:hover,
body:not(.light-theme) .number-btn:hover,
body:not(.light-theme) .qty-btn:hover {
  background: rgba(161, 194, 189, 0.18) !important;
  border-color: rgba(161, 194, 189, 0.38) !important;
}

/* Net kutuları daha parlak ama yormayan */
body:not(.light-theme) .live-net {
  background:
    linear-gradient(135deg, rgba(161, 194, 189, 0.18), rgba(231, 242, 239, 0.09)) !important;
  border-color: rgba(161, 194, 189, 0.32) !important;
  color: #e7f2ef !important;
}

/* Ana butonlar biraz daha açık */
body:not(.light-theme) .btn-primary,
body:not(.light-theme) .download-btn,
body:not(.light-theme) .feedback-btn,
body:not(.light-theme) .trial-save-btn,
body:not(.light-theme) .share-btn.primary,
body:not(.light-theme) .primary-link {
  background:
    linear-gradient(135deg, #708993, #a1c2bd) !important;
  color: #ffffff !important;
  box-shadow: 0 14px 30px rgba(112, 137, 147, 0.25) !important;
}

/* İkincil butonlar */
body:not(.light-theme) .btn-ghost,
body:not(.light-theme) .history-btn,
body:not(.light-theme) .trial-btn,
body:not(.light-theme) .share-btn.secondary,
body:not(.light-theme) .button-secondary {
  background: rgba(67, 83, 113, 0.90) !important;
  color: #e7f2ef !important;
  border-color: rgba(231, 242, 239, 0.14) !important;
}

/* Badge / etiketler */
body:not(.light-theme) .section-tag,
body:not(.light-theme) .badge-small,
body:not(.light-theme) .impact-badge {
  background: rgba(161, 194, 189, 0.16) !important;
  color: #e7f2ef !important;
  border-color: rgba(161, 194, 189, 0.28) !important;
}

/* Yazı açıklamaları biraz daha okunur */
body:not(.light-theme) p,
body:not(.light-theme) li,
body:not(.light-theme) .hero-text,
body:not(.light-theme) .panel-subtitle,
body:not(.light-theme) .card-subtitle,
body:not(.light-theme) .score-label,
body:not(.light-theme) .history-subtitle,
body:not(.light-theme) .history-meta,
body:not(.light-theme) .footer-note,
body:not(.light-theme) .year-detail,
body:not(.light-theme) .trial-meta,
body:not(.light-theme) .smart-desc,
body:not(.light-theme) .impact-detail,
body:not(.light-theme) .impact-subtitle,
body:not(.light-theme) .faq-answer,
body:not(.light-theme) .feedback-text,
body:not(.light-theme) .guide-item span,
body:not(.light-theme) .seo-content p {
  color: #cfe1de !important;
}
.logo-image-wrap {
  overflow: hidden !important;
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.logo-image {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}
/* =========================================================
   PUANLAB LOGO GÖRSELİ
   ========================================================= */

.logo-image-wrap {
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  display: grid !important;
  place-items: center !important;
}

.logo-image {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  object-fit: contain !important;
}

/* =========================================================
   HEDEF BÖLÜM / ÜNİVERSİTE ÖNERİ ALANI
   ========================================================= */

.target-fields-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.target-fields-grid .field-group:first-child {
  grid-column: 1 / -1;
}

.target-suggest-wrapper {
  position: relative;
}

.suggestion-box {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  z-index: 100;
  max-height: 280px;
  overflow-y: auto;
  background: var(--surface-solid, #364362);
  border: 1px solid var(--border-strong, rgba(231, 242, 239, 0.26));
  border-radius: 18px;
  box-shadow: var(--shadow-soft, 0 12px 34px rgba(8, 10, 24, 0.18));
  padding: 8px;
}

.suggestion-item {
  width: 100%;
  display: grid;
  gap: 4px;
  padding: 11px 12px;
  border: 0;
  border-radius: 14px;
  background: transparent;
  color: var(--text);
  text-align: left;
  font: inherit;
  cursor: pointer;
}

.suggestion-item:hover {
  background: rgba(161, 194, 189, 0.14);
}

.suggestion-title {
  color: var(--text-strong);
  font-weight: 900;
  font-size: 14px;
}

.suggestion-meta {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.target-analysis-card {
  margin-top: 16px;
  padding: 20px;
  border-radius: 22px;
  background: var(--surface-soft);
  border: 1px solid var(--border);
}

.target-analysis-title {
  margin: 0 0 12px;
  color: var(--text-strong);
  font-size: 18px;
  font-weight: 900;
}

.target-analysis-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.target-analysis-item {
  padding: 14px;
  border-radius: 16px;
  background: rgba(161, 194, 189, 0.10);
  border: 1px solid rgba(161, 194, 189, 0.18);
}

.target-analysis-label {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.target-analysis-value {
  margin-top: 4px;
  color: var(--text-strong);
  font-size: 20px;
  font-weight: 900;
}

.target-analysis-note {
  margin-top: 12px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.55;
}

.target-analysis-good {
  color: #a8d5bd;
}

.target-analysis-warn {
  color: #f3d19c;
}

@media (max-width: 720px) {
  .target-fields-grid {
    grid-template-columns: 1fr;
  }

  .target-fields-grid .field-group:first-child {
    grid-column: auto;
  }

  .target-analysis-grid {
    grid-template-columns: 1fr;
  }
}

.suggestion-item-university {
  background: rgba(125, 211, 188, 0.12);
  border: 1px solid rgba(125, 211, 188, 0.22);
  margin-bottom: 8px;
}

.suggestion-item-university .suggestion-title {
  color: var(--teal);
}

.suggestion-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 6px;
}

.suggestion-badge {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 0 7px;
  border-radius: 999px;
  background: rgba(125, 211, 188, 0.12);
  border: 1px solid rgba(125, 211, 188, 0.22);
  color: var(--teal);
  font-size: 11px;
  font-weight: 850;
  line-height: 1;
}

.suggestion-badge.important {
  background: rgba(217, 119, 69, 0.14);
  border-color: rgba(217, 119, 69, 0.28);
  color: var(--primary);
}

.kktc-title-badge {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  margin-left: 7px;
  padding: 0 8px;
  border-radius: 999px;
  background: rgba(217, 119, 69, 0.14);
  border: 1px solid rgba(217, 119, 69, 0.28);
  color: var(--primary);
  font-size: 11px;
  font-weight: 900;
  vertical-align: middle;
  white-space: nowrap;
}