/* ============================================================
   KolayCSS v1.2 - Kullanımı kolay CSS framework'ü
   ------------------------------------------------------------
   Kullanım şekli 1 (klasik):
     <link rel="stylesheet" href="framework.css">

   Kullanım şekli 2 (JS ile, <style> enjeksiyonu):
     <link> eklemeyin, sadece:
     <script src="framework.js"></script>
     framework.js sayfada KULLANILAN sınıfları tarar ve sadece
     o kuralları <style> etiketi olarak otomatik ekler. Tüm
     CSS'i değil, yalnızca gerekli olanları gönderir.

   Renk sistemi:
     Bootstrap'in paletinden bağımsız, kendi renk takımı.
     Her dolgu + yazı rengi çifti WCAG AA (en az 4.5:1) kontrast
     geçer. Temel renkler: primary, secondary, success, danger,
     warning, info, light, dark. Ek buton renkleri: purple,
     indigo, teal, orange, rose, fuchsia. Her buton renginin
     kendine ait dolgu/yazı ve hover rengi vardır (link
     renginden bağımsız token'lar).

   Bileşenler: grid, butonlar (düz / anahat / yumuşak / beyaz /
   bağlantı / boyutlar / hap), kartlar, uyarılar, rozetler,
   menü çubuğu, tablolar, formlar, ilerleme çubuğu, yükleyiciler,
   liste grubu ve yardımcı sınıflar.
   ============================================================ */

/* ---------- 0. Renk değişkenleri (özel palet) ---------- */
:root {
  --primary: #1d4ed8;
  --primary-rgb: 29, 78, 216;
  --primary-dark: #1e40af;
  --primary-darker: #172f86;

  --secondary: #4b5563;
  --secondary-rgb: 75, 85, 99;
  --secondary-dark: #374151;

  --success: #15803d;
  --success-rgb: 21, 128, 61;
  --success-dark: #166534;

  --danger: #b91c1c;
  --danger-rgb: 185, 28, 28;
  --danger-dark: #991b1b;

  --warning: #f59e0b;
  --warning-rgb: 245, 158, 11;
  --warning-dark: #d97706;

  --info: #0e7490;
  --info-rgb: 14, 116, 144;
  --info-dark: #155e75;

  --light: #f3f4f6;
  --light-rgb: 243, 244, 246;
  --light-dark: #e5e7eb;

  --dark: #111827;
  --dark-rgb: 17, 24, 39;
  --dark-dark: #1f2937;

  /* Ek buton renkleri */
  --purple: #7e22ce;
  --purple-rgb: 126, 34, 206;
  --purple-dark: #6b21a8;
  --indigo: #4338ca;
  --indigo-rgb: 67, 56, 202;
  --indigo-dark: #3730a3;
  --teal: #0f766e;
  --teal-rgb: 15, 118, 110;
  --teal-dark: #115e59;
  --orange: #c2410c;
  --orange-rgb: 194, 65, 12;
  --orange-dark: #9a3412;
  --rose: #be123c;
  --rose-rgb: 190, 18, 60;
  --rose-dark: #9f1239;
  --fuchsia: #a21caf;
  --fuchsia-rgb: 162, 28, 175;
  --fuchsia-dark: #86198f;

  /* Bağlantı butonunun kendi renkleri */
  --btn-link-color: #1d4ed8;
  --btn-link-hover: #172f86;

  /* Hover (koyu) tonlar: butonlarda belirgin koyulaşma */
  --secondary-darker: #2c3647;
  --success-darker: #14532d;
  --danger-darker: #7f1d1d;
  --warning-darker: #b45309;
  --info-darker: #164e63;
  --light-darker: #d1d5db;
  --dark-darker: #0b0f19;
  --purple-darker: #581c87;
  --indigo-darker: #312e81;
  --teal-darker: #134e4a;
  --orange-darker: #7c2d12;
  --rose-darker: #881337;
  --fuchsia-darker: #701a75;

  --body-bg: #fff;
  --body-color: #1f2937;
  --text-muted: #4b5563;
  --link-color: #1d4ed8;
  --link-hover: #1e40af;
  --border-color: #dde3ec;

  --focus-ring: 0 0 0 0.2rem rgba(var(--primary-rgb), 0.25);

  --radius: 0.375rem;
  --radius-sm: 0.25rem;
  --radius-lg: 0.5rem;
}

/* ---------- 1. Reset ve temel stiller ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
}
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: var(--body-color);
  background-color: var(--body-bg);
}
h1, h2, h3, h4, h5, h6 {
  margin-top: 0;
  margin-bottom: 0.5rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--dark);
}
h1 { font-size: 2.5rem; }
h2 { font-size: 2rem; }
h3 { font-size: 1.75rem; }
h4 { font-size: 1.5rem; }
h5 { font-size: 1.25rem; }
h6 { font-size: 1rem; }
p {
  margin-top: 0;
  margin-bottom: 1rem;
}
a {
  color: var(--link-color);
  text-decoration: none;
}
a:hover {
  color: var(--link-hover);
  text-decoration: underline;
}
img {
  vertical-align: middle;
  border-style: none;
  max-width: 100%;
  height: auto;
}
code {
  font-family: SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 87.5%;
  color: #be185d;
  background-color: #f8f9fa;
  padding: 0.15rem 0.3rem;
  border-radius: 0.25rem;
}
hr {
  margin: 1rem 0;
  border: 0;
  border-top: 1px solid var(--border-color);
}
small { font-size: 80%; }
.small { font-size: 80%; }

/* ---------- 2. Konteyner ve grid sistemi (12 sütun) ---------- */
.container,
.container-fluid {
  width: 100%;
  padding-right: 0.75rem;
  padding-left: 0.75rem;
  margin-right: auto;
  margin-left: auto;
}
@media (min-width: 576px)  { .container { max-width: 540px; } }
@media (min-width: 768px)  { .container { max-width: 720px; } }
@media (min-width: 992px)  { .container { max-width: 960px; } }
@media (min-width: 1200px) { .container { max-width: 1140px; } }

.row {
  display: flex;
  flex-wrap: wrap;
  margin-right: -0.75rem;
  margin-left: -0.75rem;
}
.col,
[class*="col-"] {
  padding-right: 0.75rem;
  padding-left: 0.75rem;
}
.col {
  flex-basis: 0;
  flex-grow: 1;
  max-width: 100%;
}

.col-1  { flex: 0 0 8.333333%;  max-width: 8.333333%; }
.col-2  { flex: 0 0 16.666667%; max-width: 16.666667%; }
.col-3  { flex: 0 0 25%;        max-width: 25%; }
.col-4  { flex: 0 0 33.333333%; max-width: 33.333333%; }
.col-5  { flex: 0 0 41.666667%; max-width: 41.666667%; }
.col-6  { flex: 0 0 50%;        max-width: 50%; }
.col-7  { flex: 0 0 58.333333%; max-width: 58.333333%; }
.col-8  { flex: 0 0 66.666667%; max-width: 66.666667%; }
.col-9  { flex: 0 0 75%;        max-width: 75%; }
.col-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
.col-11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
.col-12 { flex: 0 0 100%;       max-width: 100%; }

@media (min-width: 576px) {
  .col-sm  { flex-basis: 0; flex-grow: 1; max-width: 100%; }
  .col-sm-1  { flex: 0 0 8.333333%;  max-width: 8.333333%; }
  .col-sm-2  { flex: 0 0 16.666667%; max-width: 16.666667%; }
  .col-sm-3  { flex: 0 0 25%;        max-width: 25%; }
  .col-sm-4  { flex: 0 0 33.333333%; max-width: 33.333333%; }
  .col-sm-5  { flex: 0 0 41.666667%; max-width: 41.666667%; }
  .col-sm-6  { flex: 0 0 50%;        max-width: 50%; }
  .col-sm-7  { flex: 0 0 58.333333%; max-width: 58.333333%; }
  .col-sm-8  { flex: 0 0 66.666667%; max-width: 66.666667%; }
  .col-sm-9  { flex: 0 0 75%;        max-width: 75%; }
  .col-sm-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
  .col-sm-11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
  .col-sm-12 { flex: 0 0 100%;       max-width: 100%; }
}
@media (min-width: 768px) {
  .col-md  { flex-basis: 0; flex-grow: 1; max-width: 100%; }
  .col-md-1  { flex: 0 0 8.333333%;  max-width: 8.333333%; }
  .col-md-2  { flex: 0 0 16.666667%; max-width: 16.666667%; }
  .col-md-3  { flex: 0 0 25%;        max-width: 25%; }
  .col-md-4  { flex: 0 0 33.333333%; max-width: 33.333333%; }
  .col-md-5  { flex: 0 0 41.666667%; max-width: 41.666667%; }
  .col-md-6  { flex: 0 0 50%;        max-width: 50%; }
  .col-md-7  { flex: 0 0 58.333333%; max-width: 58.333333%; }
  .col-md-8  { flex: 0 0 66.666667%; max-width: 66.666667%; }
  .col-md-9  { flex: 0 0 75%;        max-width: 75%; }
  .col-md-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
  .col-md-11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
  .col-md-12 { flex: 0 0 100%;       max-width: 100%; }
}
@media (min-width: 992px) {
  .col-lg  { flex-basis: 0; flex-grow: 1; max-width: 100%; }
  .col-lg-1  { flex: 0 0 8.333333%;  max-width: 8.333333%; }
  .col-lg-2  { flex: 0 0 16.666667%; max-width: 16.666667%; }
  .col-lg-3  { flex: 0 0 25%;        max-width: 25%; }
  .col-lg-4  { flex: 0 0 33.333333%; max-width: 33.333333%; }
  .col-lg-5  { flex: 0 0 41.666667%; max-width: 41.666667%; }
  .col-lg-6  { flex: 0 0 50%;        max-width: 50%; }
  .col-lg-7  { flex: 0 0 58.333333%; max-width: 58.333333%; }
  .col-lg-8  { flex: 0 0 66.666667%; max-width: 66.666667%; }
  .col-lg-9  { flex: 0 0 75%;        max-width: 75%; }
  .col-lg-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
  .col-lg-11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
  .col-lg-12 { flex: 0 0 100%;       max-width: 100%; }
}
@media (min-width: 1200px) {
  .col-xl  { flex-basis: 0; flex-grow: 1; max-width: 100%; }
  .col-xl-1  { flex: 0 0 8.333333%;  max-width: 8.333333%; }
  .col-xl-2  { flex: 0 0 16.666667%; max-width: 16.666667%; }
  .col-xl-3  { flex: 0 0 25%;        max-width: 25%; }
  .col-xl-4  { flex: 0 0 33.333333%; max-width: 33.333333%; }
  .col-xl-5  { flex: 0 0 41.666667%; max-width: 41.666667%; }
  .col-xl-6  { flex: 0 0 50%;        max-width: 50%; }
  .col-xl-7  { flex: 0 0 58.333333%; max-width: 58.333333%; }
  .col-xl-8  { flex: 0 0 66.666667%; max-width: 66.666667%; }
  .col-xl-9  { flex: 0 0 75%;        max-width: 75%; }
  .col-xl-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
  .col-xl-11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
  .col-xl-12 { flex: 0 0 100%;       max-width: 100%; }
}

/* ---------- 3. Butonlar ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: inherit;
  font-weight: 500;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  user-select: none;
  border: 1px solid transparent;
  padding: 0.5rem 1rem;
  font-size: 1rem;
  line-height: 1.5;
  border-radius: var(--radius);
  color: #fff;
  background-color: var(--secondary);
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
    border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out,
    transform 0.15s ease-in-out;
}
.btn:hover { text-decoration: none; }
.btn:focus-visible {
  outline: 0;
  box-shadow: var(--focus-ring);
}
.btn:active:not(:disabled):not(.disabled) {
  transform: translateY(1px);
  filter: brightness(0.92);
}
.btn:disabled,
.btn.disabled {
  opacity: 0.6;
  pointer-events: none;
}

/* --- Dolgu (düz) butonlar --- */
.btn-primary   { background-color: var(--primary);   border-color: var(--primary); }
.btn-primary:hover:not(:disabled):not(.disabled) { background-color: var(--primary-darker); border-color: var(--primary-darker); color: #fff; }
.btn-secondary { background-color: var(--secondary); border-color: var(--secondary); }
.btn-secondary:hover:not(:disabled):not(.disabled) { background-color: var(--secondary-darker); border-color: var(--secondary-darker); color: #fff; }
.btn-success   { background-color: var(--success);   border-color: var(--success); }
.btn-success:hover:not(:disabled):not(.disabled) { background-color: var(--success-darker); border-color: var(--success-darker); color: #fff; }
.btn-danger    { background-color: var(--danger);    border-color: var(--danger); }
.btn-danger:hover:not(:disabled):not(.disabled) { background-color: var(--danger-darker); border-color: var(--danger-darker); color: #fff; }
.btn-warning   { background-color: var(--warning);   border-color: var(--warning); color: #000; }
.btn-warning:hover:not(:disabled):not(.disabled) { background-color: var(--warning-darker); border-color: var(--warning-darker); color: #000; }
.btn-info      { background-color: var(--info);      border-color: var(--info); }
.btn-info:hover:not(:disabled):not(.disabled) { background-color: var(--info-darker); border-color: var(--info-darker); color: #fff; }
.btn-light     { background-color: var(--light);     border-color: var(--light); color: var(--dark); }
.btn-light:hover:not(:disabled):not(.disabled) { background-color: var(--light-darker); border-color: var(--light-darker); color: var(--dark); }
.btn-dark      { background-color: var(--dark);      border-color: var(--dark); }
.btn-dark:hover:not(:disabled):not(.disabled) { background-color: var(--dark-darker); border-color: var(--dark-darker); color: #fff; }

/* --- Ek renkler: düz + kendi hover'ları --- */
.btn-purple   { background-color: var(--purple);   border-color: var(--purple); }
.btn-purple:hover:not(:disabled):not(.disabled) { background-color: var(--purple-darker); border-color: var(--purple-darker); color: #fff; }
.btn-indigo   { background-color: var(--indigo);   border-color: var(--indigo); }
.btn-indigo:hover:not(:disabled):not(.disabled) { background-color: var(--indigo-darker); border-color: var(--indigo-darker); color: #fff; }
.btn-teal     { background-color: var(--teal);     border-color: var(--teal); }
.btn-teal:hover:not(:disabled):not(.disabled) { background-color: var(--teal-darker); border-color: var(--teal-darker); color: #fff; }
.btn-orange   { background-color: var(--orange);   border-color: var(--orange); }
.btn-orange:hover:not(:disabled):not(.disabled) { background-color: var(--orange-darker); border-color: var(--orange-darker); color: #fff; }
.btn-rose     { background-color: var(--rose);     border-color: var(--rose); }
.btn-rose:hover:not(:disabled):not(.disabled) { background-color: var(--rose-darker); border-color: var(--rose-darker); color: #fff; }
.btn-fuchsia  { background-color: var(--fuchsia);  border-color: var(--fuchsia); }
.btn-fuchsia:hover:not(:disabled):not(.disabled) { background-color: var(--fuchsia-darker); border-color: var(--fuchsia-darker); color: #fff; }

/* --- Beyaz buton --- */
.btn-white {
  background-color: #fff;
  border-color: var(--border-color);
  color: var(--dark);
}
.btn-white:hover:not(:disabled):not(.disabled) {
  background-color: var(--light);
  border-color: #cbd5e1;
  color: var(--dark);
}

/* --- Yumuşak (soft) butonlar: renkli zemin, okunur yazı --- */
.btn-primary-soft   { color: #1e40af; background-color: #dbeafe; border-color: #bfdbfe; }
.btn-primary-soft:hover:not(:disabled):not(.disabled) { background-color: #bfdbfe; color: #1e40af; }
.btn-secondary-soft { color: #374151; background-color: #e5e7eb; border-color: #d1d5db; }
.btn-secondary-soft:hover:not(:disabled):not(.disabled) { background-color: #d1d5db; color: #374151; }
.btn-success-soft   { color: #166534; background-color: #dcfce7; border-color: #bbf7d0; }
.btn-success-soft:hover:not(:disabled):not(.disabled) { background-color: #bbf7d0; color: #166534; }
.btn-danger-soft    { color: #991b1b; background-color: #fee2e2; border-color: #fecaca; }
.btn-danger-soft:hover:not(:disabled):not(.disabled) { background-color: #fecaca; color: #991b1b; }
.btn-warning-soft   { color: #854d0e; background-color: #fef3c7; border-color: #fde68a; }
.btn-warning-soft:hover:not(:disabled):not(.disabled) { background-color: #fde68a; color: #854d0e; }
.btn-info-soft      { color: #155e75; background-color: #cffafe; border-color: #a5f3fc; }
.btn-info-soft:hover:not(:disabled):not(.disabled) { background-color: #a5f3fc; color: #155e75; }
.btn-light-soft     { color: #374151; background-color: #f9fafb; border-color: #e5e7eb; }
.btn-light-soft:hover:not(:disabled):not(.disabled) { background-color: #e5e7eb; color: #374151; }
.btn-dark-soft      { color: #111827; background-color: #e5e7eb; border-color: #d1d5db; }
.btn-dark-soft:hover:not(:disabled):not(.disabled) { background-color: #d1d5db; color: #111827; }

/* --- Ek renkler: yumuşak (soft) --- */
.btn-purple-soft   { color: #6b21a8; background-color: #f3e8ff; border-color: #e9d5ff; }
.btn-purple-soft:hover:not(:disabled):not(.disabled) { background-color: #e9d5ff; color: #6b21a8; }
.btn-indigo-soft   { color: #3730a3; background-color: #e0e7ff; border-color: #c7d2fe; }
.btn-indigo-soft:hover:not(:disabled):not(.disabled) { background-color: #c7d2fe; color: #3730a3; }
.btn-teal-soft     { color: #115e59; background-color: #ccfbf1; border-color: #99f6e4; }
.btn-teal-soft:hover:not(:disabled):not(.disabled) { background-color: #99f6e4; color: #115e59; }
.btn-orange-soft   { color: #9a3412; background-color: #ffedd5; border-color: #fed7aa; }
.btn-orange-soft:hover:not(:disabled):not(.disabled) { background-color: #fed7aa; color: #9a3412; }
.btn-rose-soft     { color: #9f1239; background-color: #ffe4e6; border-color: #fecdd3; }
.btn-rose-soft:hover:not(:disabled):not(.disabled) { background-color: #fecdd3; color: #9f1239; }
.btn-fuchsia-soft  { color: #86198f; background-color: #fae8ff; border-color: #f5d0fe; }
.btn-fuchsia-soft:hover:not(:disabled):not(.disabled) { background-color: #f5d0fe; color: #86198f; }

/* --- Anahat (outline) butonlar --- */
.btn-outline-primary { color: var(--primary); border-color: var(--primary); background-color: transparent; }
.btn-outline-primary:hover:not(:disabled):not(.disabled) { color: #fff; background-color: var(--primary); }
.btn-outline-secondary { color: var(--secondary); border-color: var(--secondary); background-color: transparent; }
.btn-outline-secondary:hover:not(:disabled):not(.disabled) { color: #fff; background-color: var(--secondary); }
.btn-outline-success { color: var(--success); border-color: var(--success); background-color: transparent; }
.btn-outline-success:hover:not(:disabled):not(.disabled) { color: #fff; background-color: var(--success); }
.btn-outline-danger { color: var(--danger); border-color: var(--danger); background-color: transparent; }
.btn-outline-danger:hover:not(:disabled):not(.disabled) { color: #fff; background-color: var(--danger); }
.btn-outline-warning { color: #b45309; border-color: #b45309; background-color: transparent; }
.btn-outline-warning:hover:not(:disabled):not(.disabled) { color: #fff; background-color: #b45309; }
.btn-outline-info { color: var(--info); border-color: var(--info); background-color: transparent; }
.btn-outline-info:hover:not(:disabled):not(.disabled) { color: #fff; background-color: var(--info); }
.btn-outline-light { color: var(--light); border-color: var(--light); background-color: transparent; }
.btn-outline-light:hover:not(:disabled):not(.disabled) { color: var(--dark); background-color: var(--light); }
.btn-outline-dark { color: var(--dark); border-color: var(--dark); background-color: transparent; }
.btn-outline-dark:hover:not(:disabled):not(.disabled) { color: #fff; background-color: var(--dark); }

/* --- Ek renkler: anahat (outline) --- */
.btn-outline-purple { color: var(--purple); border-color: var(--purple); background-color: transparent; }
.btn-outline-purple:hover:not(:disabled):not(.disabled) { color: #fff; background-color: var(--purple); }
.btn-outline-indigo { color: var(--indigo); border-color: var(--indigo); background-color: transparent; }
.btn-outline-indigo:hover:not(:disabled):not(.disabled) { color: #fff; background-color: var(--indigo); }
.btn-outline-teal { color: var(--teal); border-color: var(--teal); background-color: transparent; }
.btn-outline-teal:hover:not(:disabled):not(.disabled) { color: #fff; background-color: var(--teal); }
.btn-outline-orange { color: var(--orange); border-color: var(--orange); background-color: transparent; }
.btn-outline-orange:hover:not(:disabled):not(.disabled) { color: #fff; background-color: var(--orange); }
.btn-outline-rose { color: var(--rose); border-color: var(--rose); background-color: transparent; }
.btn-outline-rose:hover:not(:disabled):not(.disabled) { color: #fff; background-color: var(--rose); }
.btn-outline-fuchsia { color: var(--fuchsia); border-color: var(--fuchsia); background-color: transparent; }
.btn-outline-fuchsia:hover:not(:disabled):not(.disabled) { color: #fff; background-color: var(--fuchsia); }

/* --- Boyutlar ve biçimler --- */
.btn-xs   { padding: 0.25rem 0.5rem;   font-size: 0.75rem;  border-radius: var(--radius-sm); }
.btn-sm   { padding: 0.25rem 0.6rem;   font-size: 0.875rem; border-radius: var(--radius-sm); }
.btn-lg   { padding: 0.75rem 1.5rem;   font-size: 1.125rem; border-radius: var(--radius-lg); }
.btn-block { display: flex; width: 100%; }
.btn-pill { border-radius: 50rem; }
.btn-shadow {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12);
}
.btn-shadow:hover:not(:disabled):not(.disabled) {
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.18);
  transform: translateY(-1px);
}
.btn-link {
  background-color: transparent;
  border: 0;
  color: var(--btn-link-color);
  text-decoration: none;
}
.btn-link:hover:not(:disabled):not(.disabled) {
  color: var(--btn-link-hover);
  text-decoration: underline;
  background-color: transparent;
}

/* ---------- 4. Kartlar ---------- */
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  word-wrap: break-word;
  background-color: #fff;
  background-clip: border-box;
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
}
.card-header {
  padding: 0.75rem 1.25rem;
  margin-bottom: 0;
  background-color: rgba(0, 0, 0, 0.03);
  border-bottom: 1px solid var(--border-color);
}
.card-body {
  flex: 1 1 auto;
  padding: 1.25rem;
}
.card-footer {
  padding: 0.75rem 1.25rem;
  background-color: rgba(0, 0, 0, 0.03);
  border-top: 1px solid var(--border-color);
}
.card-title { margin-bottom: 0.75rem; font-size: 1.25rem; }
.card-text:last-child { margin-bottom: 0; }
.card-img, .card-img-top { width: 100%; border-top-left-radius: var(--radius); border-top-right-radius: var(--radius); }
.card-img-bottom { width: 100%; border-bottom-left-radius: var(--radius); border-bottom-right-radius: var(--radius); }

/* ---------- 5. Uyarılar (alert) ---------- */
.alert {
  position: relative;
  padding: 0.75rem 1.25rem;
  margin-bottom: 1rem;
  border: 1px solid transparent;
  border-radius: var(--radius);
}
.alert-primary { color: #1e40af; background-color: #dbeafe; border-color: #bfdbfe; }
.alert-secondary { color: #374151; background-color: #e5e7eb; border-color: #d1d5db; }
.alert-success { color: #166534; background-color: #dcfce7; border-color: #bbf7d0; }
.alert-danger  { color: #991b1b; background-color: #fee2e2; border-color: #fecaca; }
.alert-warning { color: #854d0e; background-color: #fef3c7; border-color: #fde68a; }
.alert-info    { color: #155e75; background-color: #cffafe; border-color: #a5f3fc; }
.alert-light   { color: #374151; background-color: #f9fafb; border-color: #e5e7eb; }
.alert-dark    { color: #111827; background-color: #e5e7eb; border-color: #d1d5db; }

/* ---------- 6. Rozetler (badge) ---------- */
.badge {
  display: inline-block;
  padding: 0.35em 0.65em;
  font-size: 0.75em;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  border-radius: 0.25rem;
  color: #fff;
  background-color: var(--secondary);
}
.badge-primary   { background-color: var(--primary); }
.badge-secondary { background-color: var(--secondary); }
.badge-success   { background-color: var(--success); }
.badge-danger    { background-color: var(--danger); }
.badge-warning   { background-color: var(--warning); color: #000; }
.badge-info      { background-color: var(--info); }
.badge-light     { background-color: var(--light); color: var(--dark); }
.badge-dark      { background-color: var(--dark); }
.badge-pill { border-radius: 50rem; }

/* ---------- 7. Menü çubuğu (navbar) ---------- */
.navbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 1rem;
  color: #fff;
  background-color: var(--dark);
}
.navbar-brand {
  display: inline-block;
  padding-top: 0.3125rem;
  padding-bottom: 0.3125rem;
  margin-right: 1rem;
  font-size: 1.25rem;
  color: #fff;
  white-space: nowrap;
}
.navbar-brand:hover { color: #fff; text-decoration: none; }
.navbar-nav {
  display: flex;
  flex-direction: row;
  list-style: none;
  margin: 0;
  padding: 0;
}
.navbar-nav .nav-link {
  display: block;
  padding: 0.5rem 0.75rem;
  color: rgba(255, 255, 255, 0.65);
  border-radius: var(--radius-sm);
}
.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active {
  color: #fff;
  text-decoration: none;
}
.navbar-nav .nav-link.active { background-color: rgba(255, 255, 255, 0.1); }
.navbar-light { background-color: var(--light); color: var(--dark); }
.navbar-light .navbar-brand { color: var(--dark); }
.navbar-light .navbar-brand:hover { color: var(--dark); }
.navbar-light .navbar-nav .nav-link { color: rgba(17, 24, 39, 0.7); }
.navbar-light .navbar-nav .nav-link:hover,
.navbar-light .navbar-nav .nav-link.active { color: var(--dark); }
.navbar-light .navbar-nav .nav-link.active { background-color: rgba(17, 24, 39, 0.08); }

/* ---------- 8. Tablolar ---------- */
.table {
  width: 100%;
  margin-bottom: 1rem;
  color: var(--body-color);
  border-collapse: collapse;
}
.table th,
.table td {
  padding: 0.75rem;
  vertical-align: top;
  border-top: 1px solid var(--border-color);
}
.table thead th {
  vertical-align: bottom;
  border-bottom: 2px solid var(--border-color);
}
.table-striped tbody tr:nth-of-type(odd) { background-color: rgba(0, 0, 0, 0.03); }
.table-bordered,
.table-bordered th,
.table-bordered td { border: 1px solid var(--border-color); }
.table-hover tbody tr:hover { background-color: rgba(0, 0, 0, 0.06); }
.table-responsive {
  display: block;
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* ---------- 9. Formlar ---------- */
.form-group { margin-bottom: 1rem; }
.form-label { display: inline-block; margin-bottom: 0.5rem; }
.form-control {
  display: block;
  width: 100%;
  height: calc(1.5em + 0.75rem + 2px);
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: var(--body-color);
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid #cbd5e1;
  border-radius: var(--radius-sm);
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  font-family: inherit;
}
.form-control:focus-visible {
  color: var(--body-color);
  background-color: #fff;
  border-color: var(--primary);
  outline: 0;
  box-shadow: var(--focus-ring);
}
.form-control:disabled,
.form-control[readonly] {
  background-color: #e9ecef;
  opacity: 1;
}
textarea.form-control { height: auto; }
.form-control-sm { height: calc(1.5em + 0.5rem + 2px); padding: 0.25rem 0.5rem; font-size: 0.875rem; }
.form-control-lg { height: calc(1.5em + 1rem + 2px); padding: 0.5rem 1rem; font-size: 1.25rem; }

/* ---------- 10. İlerleme çubuğu (progress) ---------- */
.progress {
  display: flex;
  height: 1rem;
  overflow: hidden;
  font-size: 0.75rem;
  background-color: var(--light-dark);
  border-radius: var(--radius);
}
.progress-bar {
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  color: #fff;
  text-align: center;
  white-space: nowrap;
  background-color: var(--primary);
  transition: width 0.6s ease;
}
.progress-bar-striped {
  background-image: linear-gradient(45deg, rgba(255,255,255,0.15) 25%, transparent 25%,
    transparent 50%, rgba(255,255,255,0.15) 50%, rgba(255,255,255,0.15) 75%, transparent 75%, transparent);
  background-size: 1rem 1rem;
}

/* ---------- 11. Yükleyiciler (spinner) ---------- */
.spinner-border {
  display: inline-block;
  width: 2rem;
  height: 2rem;
  vertical-align: text-bottom;
  border: 0.25em solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: spinner-border 0.75s linear infinite;
}
.spinner-grow {
  display: inline-block;
  width: 2rem;
  height: 2rem;
  vertical-align: text-bottom;
  border-radius: 50%;
  background-color: currentColor;
  opacity: 0;
  animation: spinner-grow 0.75s linear infinite;
}
.spinner-sm {
  width: 1rem;
  height: 1rem;
  border-width: 0.2em;
}
@keyframes spinner-border { to { transform: rotate(360deg); } }
@keyframes spinner-grow {
  0% { transform: scale(0); }
  50% { opacity: 1; }
  100% { transform: scale(1); opacity: 0; }
}

/* ---------- 12. Liste grubu ---------- */
.list-group {
  display: flex;
  flex-direction: column;
  padding: 0;
  margin-bottom: 1rem;
  list-style: none;
  border-radius: var(--radius);
}
.list-group-item {
  position: relative;
  display: block;
  padding: 0.75rem 1.25rem;
  background-color: #fff;
  border: 1px solid var(--border-color);
}
.list-group-item:first-child {
  border-top-left-radius: inherit;
  border-top-right-radius: inherit;
}
.list-group-item:last-child {
  border-bottom-left-radius: inherit;
  border-bottom-right-radius: inherit;
}
.list-group-item + .list-group-item { border-top-width: 0; }
.list-group-item.active {
  z-index: 2;
  color: #fff;
  background-color: var(--primary);
  border-color: var(--primary);
}

/* ---------- 13. Görünüm yardımcıları (display / flex) ---------- */
.d-none { display: none !important; }
.d-inline { display: inline !important; }
.d-inline-block { display: inline-block !important; }
.d-block { display: block !important; }
.d-flex { display: flex !important; }
.d-inline-flex { display: inline-flex !important; }
@media (min-width: 576px) {
  .d-sm-none { display: none !important; }
  .d-sm-inline { display: inline !important; }
  .d-sm-inline-block { display: inline-block !important; }
  .d-sm-block { display: block !important; }
  .d-sm-flex { display: flex !important; }
}
@media (min-width: 768px) {
  .d-md-none { display: none !important; }
  .d-md-inline { display: inline !important; }
  .d-md-inline-block { display: inline-block !important; }
  .d-md-block { display: block !important; }
  .d-md-flex { display: flex !important; }
}
@media (min-width: 992px) {
  .d-lg-none { display: none !important; }
  .d-lg-inline { display: inline !important; }
  .d-lg-inline-block { display: inline-block !important; }
  .d-lg-block { display: block !important; }
  .d-lg-flex { display: flex !important; }
}
@media (min-width: 1200px) {
  .d-xl-none { display: none !important; }
  .d-xl-inline { display: inline !important; }
  .d-xl-inline-block { display: inline-block !important; }
  .d-xl-block { display: block !important; }
  .d-xl-flex { display: flex !important; }
}
.flex-row { flex-direction: row !important; }
.flex-column { flex-direction: column !important; }
.flex-wrap { flex-wrap: wrap !important; }
.justify-content-start { justify-content: flex-start !important; }
.justify-content-center { justify-content: center !important; }
.justify-content-end { justify-content: flex-end !important; }
.justify-content-between { justify-content: space-between !important; }
.align-items-start { align-items: flex-start !important; }
.align-items-center { align-items: center !important; }
.align-items-end { align-items: flex-end !important; }
.float-left { float: left !important; }
.float-right { float: right !important; }
.clearfix::after {
  display: block;
  clear: both;
  content: "";
}

/* ---------- 14. Boyut yardımcıları (width / height) ---------- */
.w-25 { width: 25% !important; }
.w-50 { width: 50% !important; }
.w-75 { width: 75% !important; }
.w-100 { width: 100% !important; }
.h-25 { height: 25% !important; }
.h-50 { height: 50% !important; }
.h-75 { height: 75% !important; }
.h-100 { height: 100% !important; }

/* ---------- 15. Kenar boşlukları (margin ve padding) ---------- */
.m-0 { margin: 0 !important; } .m-1 { margin: 0.25rem !important; } .m-2 { margin: 0.5rem !important; } .m-3 { margin: 1rem !important; } .m-4 { margin: 1.5rem !important; } .m-5 { margin: 3rem !important; }
.mt-0 { margin-top: 0 !important; } .mt-1 { margin-top: 0.25rem !important; } .mt-2 { margin-top: 0.5rem !important; } .mt-3 { margin-top: 1rem !important; } .mt-4 { margin-top: 1.5rem !important; } .mt-5 { margin-top: 3rem !important; }
.mb-0 { margin-bottom: 0 !important; } .mb-1 { margin-bottom: 0.25rem !important; } .mb-2 { margin-bottom: 0.5rem !important; } .mb-3 { margin-bottom: 1rem !important; } .mb-4 { margin-bottom: 1.5rem !important; } .mb-5 { margin-bottom: 3rem !important; }
.ml-0 { margin-left: 0 !important; } .ml-1 { margin-left: 0.25rem !important; } .ml-2 { margin-left: 0.5rem !important; } .ml-3 { margin-left: 1rem !important; } .ml-4 { margin-left: 1.5rem !important; } .ml-5 { margin-left: 3rem !important; }
.mr-0 { margin-right: 0 !important; } .mr-1 { margin-right: 0.25rem !important; } .mr-2 { margin-right: 0.5rem !important; } .mr-3 { margin-right: 1rem !important; } .mr-4 { margin-right: 1.5rem !important; } .mr-5 { margin-right: 3rem !important; }
.mx-0 { margin-left: 0 !important; margin-right: 0 !important; } .mx-1 { margin-left: 0.25rem !important; margin-right: 0.25rem !important; } .mx-2 { margin-left: 0.5rem !important; margin-right: 0.5rem !important; } .mx-3 { margin-left: 1rem !important; margin-right: 1rem !important; } .mx-4 { margin-left: 1.5rem !important; margin-right: 1.5rem !important; } .mx-5 { margin-left: 3rem !important; margin-right: 3rem !important; }
.my-0 { margin-top: 0 !important; margin-bottom: 0 !important; } .my-1 { margin-top: 0.25rem !important; margin-bottom: 0.25rem !important; } .my-2 { margin-top: 0.5rem !important; margin-bottom: 0.5rem !important; } .my-3 { margin-top: 1rem !important; margin-bottom: 1rem !important; } .my-4 { margin-top: 1.5rem !important; margin-bottom: 1.5rem !important; } .my-5 { margin-top: 3rem !important; margin-bottom: 3rem !important; }
.m-auto { margin: auto !important; }
.mt-auto { margin-top: auto !important; }
.mb-auto { margin-bottom: auto !important; }
.ml-auto { margin-left: auto !important; }
.mr-auto { margin-right: auto !important; }
.p-0 { padding: 0 !important; } .p-1 { padding: 0.25rem !important; } .p-2 { padding: 0.5rem !important; } .p-3 { padding: 1rem !important; } .p-4 { padding: 1.5rem !important; } .p-5 { padding: 3rem !important; }
.pt-0 { padding-top: 0 !important; } .pt-1 { padding-top: 0.25rem !important; } .pt-2 { padding-top: 0.5rem !important; } .pt-3 { padding-top: 1rem !important; } .pt-4 { padding-top: 1.5rem !important; } .pt-5 { padding-top: 3rem !important; }
.pb-0 { padding-bottom: 0 !important; } .pb-1 { padding-bottom: 0.25rem !important; } .pb-2 { padding-bottom: 0.5rem !important; } .pb-3 { padding-bottom: 1rem !important; } .pb-4 { padding-bottom: 1.5rem !important; } .pb-5 { padding-bottom: 3rem !important; }
.pl-0 { padding-left: 0 !important; } .pl-1 { padding-left: 0.25rem !important; } .pl-2 { padding-left: 0.5rem !important; } .pl-3 { padding-left: 1rem !important; } .pl-4 { padding-left: 1.5rem !important; } .pl-5 { padding-left: 3rem !important; }
.pr-0 { padding-right: 0 !important; } .pr-1 { padding-right: 0.25rem !important; } .pr-2 { padding-right: 0.5rem !important; } .pr-3 { padding-right: 1rem !important; } .pr-4 { padding-right: 1.5rem !important; } .pr-5 { padding-right: 3rem !important; }
.px-0 { padding-left: 0 !important; padding-right: 0 !important; } .px-1 { padding-left: 0.25rem !important; padding-right: 0.25rem !important; } .px-2 { padding-left: 0.5rem !important; padding-right: 0.5rem !important; } .px-3 { padding-left: 1rem !important; padding-right: 1rem !important; } .px-4 { padding-left: 1.5rem !important; padding-right: 1.5rem !important; } .px-5 { padding-left: 3rem !important; padding-right: 3rem !important; }
.py-0 { padding-top: 0 !important; padding-bottom: 0 !important; } .py-1 { padding-top: 0.25rem !important; padding-bottom: 0.25rem !important; } .py-2 { padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; } .py-3 { padding-top: 1rem !important; padding-bottom: 1rem !important; } .py-4 { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; } .py-5 { padding-top: 3rem !important; padding-bottom: 3rem !important; }

/* ---------- 16. Yazı ve arka plan renkleri ---------- */
.text-center { text-align: center !important; }
.text-left { text-align: left !important; }
.text-right { text-align: right !important; }
.text-justify { text-align: justify !important; }
.text-uppercase { text-transform: uppercase !important; }
.text-lowercase { text-transform: lowercase !important; }
.text-capitalize { text-transform: capitalize !important; }
.font-weight-bold { font-weight: 700 !important; }
.font-weight-normal { font-weight: 400 !important; }
.font-weight-light { font-weight: 300 !important; }
.font-italic { font-style: italic !important; }
.text-monospace { font-family: SFMono-Regular, Menlo, Consolas, monospace !important; }
.text-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.text-primary { color: var(--primary) !important; }
.text-secondary { color: var(--secondary) !important; }
.text-success { color: var(--success) !important; }
.text-danger { color: var(--danger) !important; }
.text-warning { color: #b45309 !important; }
.text-info { color: var(--info) !important; }
.text-light { color: var(--light) !important; }
.text-dark { color: var(--dark) !important; }
.text-white { color: #fff !important; }
.text-muted { color: var(--text-muted) !important; }

.bg-primary { background-color: var(--primary) !important; }
.bg-secondary { background-color: var(--secondary) !important; }
.bg-success { background-color: var(--success) !important; }
.bg-danger { background-color: var(--danger) !important; }
.bg-warning { background-color: var(--warning) !important; }
.bg-info { background-color: var(--info) !important; }
.bg-light { background-color: var(--light) !important; }
.bg-dark { background-color: var(--dark) !important; }
.bg-white { background-color: #fff !important; }

/* ---------- 17. Diğer yardımcılar ---------- */
.rounded { border-radius: var(--radius) !important; }
.rounded-sm { border-radius: var(--radius-sm) !important; }
.rounded-lg { border-radius: var(--radius-lg) !important; }
.rounded-circle { border-radius: 50% !important; }
.rounded-pill { border-radius: 50rem !important; }
.shadow-sm { box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075) !important; }
.shadow { box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important; }
.shadow-lg { box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.175) !important; }
.border { border: 1px solid var(--border-color) !important; }
.border-0 { border: 0 !important; }
.overflow-hidden { overflow: hidden !important; }
.user-select-none { user-select: none; }
.invisible { visibility: hidden !important; }