/*
 * Conca (Aqlova) tasarım sistemi — İKOE uygulaması.
 * Değerler .claude/skills/conca-design-system/SKILL.md ile birebir aynıdır.
 * Kural: renkleri view'larda hard-code etme, buradaki token'ları kullan (dark mode bozulur).
 */

:root {
  /* Marka renkleri */
  --clr-primary: #5F4AFE;
  --clr-secondary: #5A5965;
  --clr-success: #219653;
  --clr-info: #0BA5EC;
  --clr-warning: #F79009;
  --clr-danger: #D50100;
  --clr-light: #DFDFE3;
  --clr-lighter: #F3F2F3;
  --clr-dark: #191822;

  /*
   * İKOE logosunun kendi renkleri — Conca'nın mor primary'sinden ayrı.
   * Amblemin yanındaki "İKOE" kelime markası mor olsaydı logoyla çakışırdı;
   * yalnızca marka kilidinde (sidebar/giriş) kullanılır, butonlarda değil.
   */
  --clr-marka: #185FA5;
  --clr-marka-vurgu: #D85A30;

  /* Soft (label) varyantların zemini: rengin %10 opaklığı */
  --clr-primary-soft: rgba(95, 74, 254, .1);
  --clr-success-soft: rgba(33, 150, 83, .1);
  --clr-info-soft: rgba(11, 165, 236, .1);
  --clr-warning-soft: rgba(247, 144, 9, .1);
  --clr-danger-soft: rgba(213, 1, 0, .1);

  /* Metin */
  --clr-text-body: #57575A;
  --clr-text-dark: #191822;
  --clr-text-secondary: #444446;
  --clr-text-label: #464646;
  --clr-text-muted: #939397;
  --clr-text-paragraph: #716F7E;

  /* Arkaplan */
  --clr-body-bg: #FFFFFF;
  --clr-content-bg: #F4F4F7;
  --clr-card-bg: #FFFFFF;
  --clr-input-bg: #F6F6F9;
  --clr-bg-gray-2: #F8F8F8;
  --clr-bg-gray-4: #EDEDF0;

  /* Border */
  --clr-border: #EFEFEF;
  --clr-input-border: #E4E6FC;

  /* Radius hiyerarşisi: kart > buton/input > pagination */
  --radius-sm: 4px;
  --radius: 6px;
  --radius-card: 12px;
  --radius-pill: 50rem;

  /* Gölge — sadece bu ikisi kullanılır */
  --shadow-card: 0 2px 2px -1px rgba(25, 24, 34, .1), 0 1px 3px 0 rgba(25, 24, 34, .08);
  --shadow-dropdown: 0 4px 16px 0 rgba(165, 163, 174, .45);

  /* Layout */
  --sidebar-width: 275px;
  --header-height: 60px;

  --font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* Bootstrap'i Conca'ya bağla */
  --bs-primary: var(--clr-primary);
  --bs-primary-rgb: 95, 74, 254;
  --bs-body-font-family: var(--font);
  --bs-body-font-size: 14px;
  --bs-body-color: var(--clr-text-body);
  --bs-body-bg: var(--clr-body-bg);
  --bs-border-color: var(--clr-border);
  --bs-border-radius: var(--radius);
  --bs-link-color: var(--clr-primary);
  --bs-link-hover-color: #4A38D4;
}

[data-bs-theme="dark"] {
  /* Logonun lacivertine koyu zeminde okunmuyor; kelime markası açık maviye alınır. */
  --clr-marka: #6FAFEA;

  --clr-text-body: #BDBDC1;
  --clr-text-dark: #F1F1F3;
  --clr-text-secondary: #A8A8AE;
  --clr-text-label: #BDBDC1;
  --clr-text-muted: #7E7E86;
  --clr-text-paragraph: #A8A8AE;

  --clr-body-bg: #161618;
  --clr-content-bg: #161618;
  --clr-card-bg: #1C1B1B;
  --clr-input-bg: #1C1B1B;
  --clr-bg-gray-2: #1C1B1B;
  --clr-bg-gray-4: #232325;

  --clr-border: rgba(255, 255, 255, .1);
  --clr-input-border: rgba(255, 255, 255, .1);

  --bs-body-color: var(--clr-text-body);
  --bs-body-bg: var(--clr-body-bg);
  --bs-border-color: var(--clr-border);
}

/* ---------- Temel ---------- */

body {
  font-family: var(--font);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--clr-text-body);
  background: var(--clr-body-bg);
}

h1, h2, h3, h4, h5, h6 {
  color: var(--clr-text-dark);
  text-transform: none;   /* Conca başlıkları UPPERCASE değildir */
  letter-spacing: normal;
}

h2 { font-size: 28px; font-weight: 600; }
h3 { font-size: 18px; font-weight: 500; }
h4 { font-size: 21px; font-weight: 600; }
h5 { font-size: 16px; font-weight: 600; }
h6 { font-size: 14px; font-weight: 600; }

/* ---------- Kart ---------- */

.card {
  background: var(--clr-card-bg);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}

.card-body { padding: 24px; }

.card-header {
  padding: 20px 24px;
  background: transparent;
  border-bottom: 1px solid var(--clr-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.card-header .card-title {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: var(--clr-text-dark);
}

/* ---------- Buton ---------- */

.btn {
  --bs-btn-border-radius: var(--radius);
  padding: 10px 22px;
  font-size: 14px;
  font-weight: 500;
  border-radius: var(--radius);
}

.btn-sm { padding: 8px 18px; font-size: 12px; }
.btn-xs { padding: 6px 14px; font-size: 10px; border-radius: var(--radius); }

.btn-icon {
  padding: 0;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.btn-primary {
  --bs-btn-bg: var(--clr-primary);
  --bs-btn-border-color: var(--clr-primary);
  --bs-btn-hover-bg: #4A38D4;
  --bs-btn-hover-border-color: #4A38D4;
  --bs-btn-active-bg: #4231BE;
  --bs-btn-active-border-color: #4231BE;
  --bs-btn-color: #fff;
  --bs-btn-hover-color: #fff;
  --bs-btn-active-color: #fff;
  --bs-btn-disabled-bg: var(--clr-primary);
  --bs-btn-disabled-border-color: var(--clr-primary);
}

.btn-outline-primary {
  --bs-btn-color: var(--clr-primary);
  --bs-btn-border-color: var(--clr-primary);
  --bs-btn-hover-bg: var(--clr-primary);
  --bs-btn-hover-border-color: var(--clr-primary);
  --bs-btn-hover-color: #fff;
}

/* Soft (label) varyant: rengin %10 zemini + solid metin — Conca'nın imza deseni */
.btn-label-primary { background: var(--clr-primary-soft); color: var(--clr-primary); border: 0; }
.btn-label-success { background: var(--clr-success-soft); color: var(--clr-success); border: 0; }
.btn-label-warning { background: var(--clr-warning-soft); color: var(--clr-warning); border: 0; }
.btn-label-danger  { background: var(--clr-danger-soft);  color: var(--clr-danger);  border: 0; }
.btn-label-info    { background: var(--clr-info-soft);    color: var(--clr-info);    border: 0; }

/*
 * Hover/focus/active hâlleri: Bootstrap'in .btn:hover kuralı zemini --bs-btn-hover-bg'den
 * (varyantsız .btn'de saydam) okuyor ve yukarıdaki soft zemini eziyor — düğme tıklandıktan
 * sonra odak üstünde kaldığı için "kayboluyordu". Ghost varyantının hover'da soft'a çıkması
 * gibi, label varyantı da dolu renge çıkar.
 */
.btn-label-primary:hover, .btn-label-primary:focus-visible, .btn-label-primary:active
{ background: var(--clr-primary); color: #fff; }

.btn-label-success:hover, .btn-label-success:focus-visible, .btn-label-success:active
{ background: var(--clr-success); color: #fff; }

.btn-label-warning:hover, .btn-label-warning:focus-visible, .btn-label-warning:active
{ background: var(--clr-warning); color: #fff; }

.btn-label-danger:hover, .btn-label-danger:focus-visible, .btn-label-danger:active
{ background: var(--clr-danger); color: #fff; }

.btn-label-info:hover, .btn-label-info:focus-visible, .btn-label-info:active
{ background: var(--clr-info); color: #fff; }

.btn-ghost-primary { background: transparent; color: var(--clr-primary); border: 0; }
.btn-ghost-danger  { background: transparent; color: var(--clr-danger);  border: 0; }
.btn-ghost-primary:hover { background: var(--clr-primary-soft); color: var(--clr-primary); }
.btn-ghost-danger:hover  { background: var(--clr-danger-soft);  color: var(--clr-danger); }

/* ---------- Badge ---------- */

.badge {
  font-size: 13px;
  font-weight: 500;
  padding: 4px 12px;
  border-radius: var(--radius);
}

.badge-label-primary { background: var(--clr-primary-soft); color: var(--clr-primary); }
.badge-label-success { background: var(--clr-success-soft); color: var(--clr-success); }
.badge-label-warning { background: var(--clr-warning-soft); color: var(--clr-warning); }
.badge-label-danger  { background: var(--clr-danger-soft);  color: var(--clr-danger); }
.badge-label-info    { background: var(--clr-info-soft);    color: var(--clr-info); }

.badge-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  padding: 0;
  border-radius: 100%;
}

/* ---------- Tablo ---------- */

.table > :not(caption) > * > * {
  padding: 12px 24px;
  border-bottom-color: var(--clr-border);
}

.table th {
  font-size: 14px;
  font-weight: 500;
  color: var(--clr-text-dark);
  background: var(--clr-input-bg);   /* Conca'da başlık satırı gri zeminli */
  text-transform: none;
  letter-spacing: normal;
}

.table td {
  font-size: 14px;
  color: var(--clr-text-dark);
  vertical-align: middle;
}

/* ---------- Form ---------- */

.form-control,
.form-select {
  height: 43px;
  background: var(--clr-input-bg);   /* Conca'da input zemini beyaz değil */
  border: 1px solid var(--clr-input-border);
  border-radius: var(--radius);
  padding: 10px 22px;
  font-size: 14px;
  color: var(--clr-text-dark);
}

textarea.form-control { height: auto; }

.form-control:focus,
.form-select:focus {
  background: var(--clr-input-bg);
  border-color: var(--clr-primary);
  box-shadow: 0 0 0 .25rem var(--clr-primary-soft);
  color: var(--clr-text-dark);
}

.form-control::placeholder { color: var(--clr-text-muted); }

.form-label {
  font-size: 14px;
  font-weight: 500;
  color: var(--clr-text-label);
  margin-bottom: 4px;
}

/*
 * İşaretlenmemiş hâlin kenarı: Bootstrap bunu --bs-border-color'dan okuyor, Conca ise onu
 * ayırıcı çizgi rengine (#EFEFEF) bağlamış. Beyaz kart üzerinde kontrast 1,1:1 kalıyordu ve
 * kutu fiilen görünmüyordu — KVKK onay kutusunu göremeyen ziyaretçi forma hiç giremez,
 * formun bütün şıkları da aynı kontrolle veriliyor. Soluk metin rengi ~3:1 verir
 * (WCAG 1.4.11'in metin dışı öğeler için alt sınırı).
 */
.form-check-input {
  width: 1.15em;
  height: 1.15em;
  margin-top: .13em;
  background-color: var(--clr-card-bg);
  border: 1px solid var(--clr-text-muted);
}

.form-check-input:checked {
  background-color: var(--clr-primary);
  border-color: var(--clr-primary);
}

.form-check-label { cursor: pointer; }

.form-check-input:focus {
  border-color: var(--clr-primary);
  box-shadow: 0 0 0 .25rem var(--clr-primary-soft);
}

/* ---------- Dropdown ---------- */

.dropdown-menu {
  background: var(--clr-card-bg);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-dropdown);
  padding: 8px 0;
  font-size: 12px;
}

.dropdown-item:active { background: var(--clr-primary); }

/* ---------- Pagination ---------- */

.page-link {
  color: var(--clr-primary);
  background: var(--clr-card-bg);
  border-radius: var(--radius-sm);
  padding: 6px 12px;
}

.page-item.active .page-link {
  background: var(--clr-primary);
  border-color: var(--clr-primary);
  color: #fff;
}

/* ---------- Robot doğrulama (reCAPTCHA) ---------- */

/*
   Bileşenin genişliği Google tarafından 304px'e sabitlenmiştir; dar telefonlarda kart
   yastığıyla birlikte taşıyor ve kutu tıklanamıyordu. 360px altında ölçekleyip sola
   yaslıyoruz — hem public landing hem admin giriş ekranı bu dosyayı yüklüyor.
*/
@media (max-width: 359.98px) {
  .g-recaptcha {
    transform: scale(.85);
    transform-origin: 0 0;
  }
}

/* ---------- Yardımcılar ---------- */

.text-muted-conca { color: var(--clr-text-muted) !important; }
.text-dark-conca { color: var(--clr-text-dark) !important; }
.bg-content { background: var(--clr-content-bg); }