/* =============================================================
   GELISTIRME MODULU — Zarif tasarim sistemi
   Kullanici-arabirimi (CSS variables, butonlar, kartlar, badge'ler, toggle'lar)
   Bagimliliklar: Bootstrap 5, Bootstrap Icons
   ============================================================= */

:root {
    /* Renk paleti */
    --gel-primary: #667eea;
    --gel-primary-dark: #5468d4;
    --gel-accent: #764ba2;
    --gel-gradient: linear-gradient(135deg, #667eea, #764ba2);

    --gel-success: #10b981;
    --gel-success-soft: #d1fae5;
    --gel-success-gradient: linear-gradient(135deg, #43e97b, #10b981);

    --gel-warning: #f59e0b;
    --gel-warning-soft: #fef3c7;
    --gel-warning-gradient: linear-gradient(135deg, #fbbf24, #f59e0b);

    --gel-danger: #ef4444;
    --gel-danger-soft: #fee2e2;
    --gel-danger-gradient: linear-gradient(135deg, #f87171, #ef4444);

    --gel-info: #06b6d4;
    --gel-info-soft: #cffafe;
    --gel-info-gradient: linear-gradient(135deg, #36d1dc, #06b6d4);

    --gel-neutral: #64748b;
    --gel-neutral-soft: #f1f5f9;
    --gel-neutral-border: #e2e8f0;

    --gel-bg: #f8fafc;
    --gel-card-bg: #ffffff;
    --gel-text: #1e293b;
    --gel-text-soft: #64748b;
    --gel-text-mute: #94a3b8;

    /* Olcüler */
    --gel-radius: 12px;
    --gel-radius-sm: 8px;
    --gel-radius-pill: 999px;
    --gel-shadow: 0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
    --gel-shadow-md: 0 4px 12px rgba(15, 23, 42, 0.08), 0 2px 4px rgba(15, 23, 42, 0.04);
    --gel-shadow-lg: 0 10px 30px rgba(15, 23, 42, 0.12);
    --gel-transition: 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* =============================================================
   1) SAYFA KAPSAYICI
   ============================================================= */
.gel-page { padding: 16px 0; }

.gel-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding-bottom: 16px;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--gel-neutral-border);
}
.gel-page-header h1 {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--gel-text);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}
.gel-page-header .gel-page-icon {
    width: 38px; height: 38px; border-radius: var(--gel-radius-sm);
    background-color: var(--gel-primary);
    background-image: linear-gradient(135deg, #667eea, #764ba2);
    display: inline-flex; align-items: center; justify-content: center;
    color: #fff; font-size: 1.05rem;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.25);
}
.gel-page-toolbar {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}

/* =============================================================
   2) BUTON SISTEMI
   ============================================================= */
.gel-btn {
    --_bg: #fff; --_color: var(--gel-text); --_border: var(--gel-neutral-border);
    --_hover-bg: var(--gel-neutral-soft);
    display: inline-flex; align-items: center; justify-content: center;
    gap: 6px;
    padding: 7px 14px;
    border-radius: var(--gel-radius-sm);
    border: 1px solid var(--_border);
    background: var(--_bg);
    color: var(--_color);
    font-size: 0.875rem; font-weight: 500;
    text-decoration: none; cursor: pointer;
    transition: var(--gel-transition);
    line-height: 1.2;
}
.gel-btn:hover { background: var(--_hover-bg); transform: translateY(-1px); color: var(--_color); text-decoration: none; }
.gel-btn:active { transform: translateY(0); }
.gel-btn:disabled, .gel-btn.disabled { opacity: 0.55; cursor: not-allowed; transform: none; }
.gel-btn i { font-size: 1rem; }

.gel-btn-sm  { padding: 4px 10px; font-size: 0.8rem; gap: 4px; }
.gel-btn-sm i { font-size: 0.9rem; }
.gel-btn-lg  { padding: 10px 20px; font-size: 0.95rem; }

.gel-btn-icon { padding: 6px; width: 32px; height: 32px; }
.gel-btn-icon.gel-btn-sm { width: 28px; height: 28px; padding: 4px; }

/* Solid varyantlar */
/* Not: gradient degerleri var() dolaylamasindan gecirilmez — bazi tarayicilar
   background kisayolunda gradient iceren custom property'yi uygulamiyor
   (duz renk fallback + dogrudan background-image kullanilir). */
.gel-btn-primary {
    --_bg: var(--gel-primary); --_color: #fff; --_border: transparent;
    --_hover-bg: var(--gel-primary-dark);
    background-image: linear-gradient(135deg, #667eea, #764ba2);
    box-shadow: 0 2px 6px rgba(102, 126, 234, 0.25);
}
.gel-btn-primary:hover { color: #fff; background-image: linear-gradient(135deg, #5468d4, #634088); box-shadow: 0 4px 12px rgba(102, 126, 234, 0.35); }

.gel-btn-success { --_bg: var(--gel-success); --_color: #fff; --_border: transparent; --_hover-bg: #059669; }
.gel-btn-success:hover { color: #fff; }

.gel-btn-danger { --_bg: var(--gel-danger); --_color: #fff; --_border: transparent; --_hover-bg: #dc2626; }
.gel-btn-danger:hover { color: #fff; }

/* Outline / soft varyantlar */
.gel-btn-soft-primary { --_color: var(--gel-primary); --_bg: rgba(102, 126, 234, 0.08); --_border: transparent; --_hover-bg: rgba(102, 126, 234, 0.15); }
.gel-btn-soft-success { --_color: var(--gel-success); --_bg: var(--gel-success-soft); --_border: transparent; --_hover-bg: #a7f3d0; }
.gel-btn-soft-warning { --_color: var(--gel-warning); --_bg: var(--gel-warning-soft); --_border: transparent; --_hover-bg: #fde68a; }
.gel-btn-soft-danger  { --_color: var(--gel-danger);  --_bg: var(--gel-danger-soft);  --_border: transparent; --_hover-bg: #fecaca; }
.gel-btn-soft-info    { --_color: var(--gel-info);    --_bg: var(--gel-info-soft);    --_border: transparent; --_hover-bg: #a5f3fc; }
.gel-btn-soft-neutral { --_color: var(--gel-text-soft); --_bg: var(--gel-neutral-soft); --_border: transparent; --_hover-bg: #e2e8f0; }

.gel-btn-ghost { --_bg: transparent; --_border: transparent; --_color: var(--gel-text-soft); --_hover-bg: var(--gel-neutral-soft); }

/* Geri donus linki */
.gel-back-link {
    display: inline-flex; align-items: center; gap: 6px;
    color: var(--gel-text-soft); text-decoration: none;
    font-size: 0.875rem; margin-bottom: 12px;
    transition: var(--gel-transition);
}
.gel-back-link:hover { color: var(--gel-primary); transform: translateX(-2px); }

/* =============================================================
   3) BADGE / ETIKET
   ============================================================= */
.gel-badge {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 3px 10px; border-radius: var(--gel-radius-pill);
    font-size: 0.72rem; font-weight: 600; line-height: 1.4;
    background: var(--gel-neutral-soft); color: var(--gel-text-soft);
}
.gel-badge i { font-size: 0.8rem; }

.gel-badge-primary { background: rgba(102, 126, 234, 0.12); color: var(--gel-primary); }
.gel-badge-success { background: var(--gel-success-soft); color: #047857; }
.gel-badge-warning { background: var(--gel-warning-soft); color: #b45309; }
.gel-badge-danger  { background: var(--gel-danger-soft);  color: #b91c1c; }
.gel-badge-info    { background: var(--gel-info-soft);    color: #0e7490; }
.gel-badge-dark    { background: #1e293b; color: #fff; }

/* ID rozeti (kart başında #123 gibi) */
.gel-id-badge {
    display: inline-flex; align-items: center; gap: 3px;
    padding: 3px 9px; border-radius: var(--gel-radius-pill);
    font-size: 0.78rem; font-weight: 700;
    background: var(--gel-text); color: #fff;
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

/* =============================================================
   4) KART
   ============================================================= */
.gel-card {
    background: var(--gel-card-bg);
    border-radius: var(--gel-radius);
    box-shadow: var(--gel-shadow);
    border: 1px solid var(--gel-neutral-border);
    overflow: hidden;
    transition: var(--gel-transition);
}
.gel-card:hover { box-shadow: var(--gel-shadow-md); border-color: rgba(102, 126, 234, 0.25); }

.gel-card-head {
    padding: 12px 16px;
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    background: var(--gel-card-bg);
    border-bottom: 1px solid var(--gel-neutral-border);
}
.gel-card-head .gel-card-title {
    font-size: 0.92rem; font-weight: 600; color: var(--gel-text);
    margin: 0; flex: 1; min-width: 0;
}

.gel-card-body { padding: 14px 16px; }
.gel-card-foot {
    padding: 10px 16px; background: var(--gel-bg);
    border-top: 1px solid var(--gel-neutral-border);
    display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
}

/* Aciklama bloğu (sol kenarli zarif) */
.gel-note {
    padding: 10px 12px; border-radius: var(--gel-radius-sm);
    background: var(--gel-bg); border-left: 3px solid var(--gel-primary);
    font-size: 0.875rem; color: var(--gel-text); line-height: 1.5;
}

/* =============================================================
   5) BOSLUK VE EMPTY STATE
   ============================================================= */
.gel-empty {
    text-align: center; padding: 40px 20px;
    color: var(--gel-text-mute);
    background: var(--gel-bg);
    border-radius: var(--gel-radius);
    border: 1px dashed var(--gel-neutral-border);
}
.gel-empty i { font-size: 2.4rem; opacity: 0.5; margin-bottom: 10px; display: block; }
.gel-empty-title { font-size: 0.95rem; font-weight: 600; color: var(--gel-text-soft); margin-bottom: 4px; }
.gel-empty-text { font-size: 0.85rem; }

/* =============================================================
   6) PILL TOGGLE BUTON (Bitti / Yuklendi / Kontrol)
   ============================================================= */
.gel-toggle-group { display: inline-flex; gap: 6px; flex-wrap: wrap; }

.gel-toggle {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 12px; border-radius: var(--gel-radius-pill);
    font-size: 0.78rem; font-weight: 600; line-height: 1.4;
    border: 1px solid var(--gel-neutral-border);
    background: #fff; color: var(--gel-text-soft);
    cursor: pointer;
    transition: var(--gel-transition);
}
.gel-toggle i { font-size: 0.95rem; }
.gel-toggle:hover { border-color: currentColor; transform: translateY(-1px); }

.gel-toggle.is-active {
    background-color: var(--gel-success); color: #fff;
    border-color: transparent;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}
.gel-toggle.is-active i::before { content: "\F26B"; } /* check-circle-fill */

/* Pasif (henüz işaretlenmemiş) butonlar da kendi tür rengini outline olarak taşısın
   ki üçü aynı renksiz-gri görünmesin. İşaretlenince .is-active dolu renge geçer. */
.gel-toggle.gel-toggle-bitti    { color: #059669; border-color: #6ee7b7; }
.gel-toggle.gel-toggle-yuklendi { color: #334155; border-color: #94a3b8; }
.gel-toggle.gel-toggle-kontrol  { color: #5b6fe0; border-color: #a5b4fc; }

.gel-toggle.gel-toggle-bitti.is-active    { background-color: #10b981; background-image: linear-gradient(135deg, #43e97b, #10b981); color: #fff; }
.gel-toggle.gel-toggle-yuklendi.is-active { background-color: #1e293b; background-image: linear-gradient(135deg, #475569, #1e293b); color: #fff; }
.gel-toggle.gel-toggle-kontrol.is-active  { background-color: #667eea; background-image: linear-gradient(135deg, #667eea, #764ba2); color: #fff; }

/* =============================================================
   7) FILTRE KARTI
   ============================================================= */
.gel-filter {
    background: var(--gel-card-bg);
    border-radius: var(--gel-radius);
    border: 1px solid var(--gel-neutral-border);
    box-shadow: var(--gel-shadow);
    margin-bottom: 16px;
    overflow: hidden;
}
.gel-filter-head {
    padding: 10px 16px;
    background: var(--gel-bg);
    border-bottom: 1px solid var(--gel-neutral-border);
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    font-size: 0.88rem; font-weight: 600; color: var(--gel-text-soft);
}
.gel-filter-body { padding: 14px 16px; }

.gel-filter label,
.gel-form label {
    font-size: 0.78rem; font-weight: 500;
    color: var(--gel-text-soft); margin-bottom: 4px;
}
.gel-filter .form-select,
.gel-filter .form-control,
.gel-form .form-select,
.gel-form .form-control {
    border-color: var(--gel-neutral-border);
    border-radius: var(--gel-radius-sm);
    font-size: 0.875rem;
    transition: var(--gel-transition);
}
.gel-filter .form-select:focus,
.gel-filter .form-control:focus,
.gel-form .form-select:focus,
.gel-form .form-control:focus {
    border-color: var(--gel-primary);
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.15);
}

/* =============================================================
   8) ISTATISTIK KARTLARI
   ============================================================= */
.gel-stat {
    background: #fff; border-radius: var(--gel-radius);
    border: 1px solid var(--gel-neutral-border);
    padding: 14px 16px; display: flex; align-items: center; gap: 12px;
    transition: var(--gel-transition);
}
.gel-stat:hover { box-shadow: var(--gel-shadow-md); transform: translateY(-2px); }
.gel-stat-icon {
    width: 44px; height: 44px; border-radius: var(--gel-radius-sm);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1.3rem; color: #fff; flex-shrink: 0;
}
.gel-stat-icon.is-primary { background-color: #667eea; background-image: linear-gradient(135deg, #667eea, #764ba2); }
.gel-stat-icon.is-success { background-color: #10b981; background-image: linear-gradient(135deg, #43e97b, #10b981); }
.gel-stat-icon.is-warning { background-color: #f59e0b; background-image: linear-gradient(135deg, #fbbf24, #f59e0b); }
.gel-stat-icon.is-danger  { background-color: #ef4444; background-image: linear-gradient(135deg, #f87171, #ef4444); }
.gel-stat-icon.is-info    { background-color: #06b6d4; background-image: linear-gradient(135deg, #36d1dc, #06b6d4); }
.gel-stat-value { font-size: 1.5rem; font-weight: 700; color: var(--gel-text); line-height: 1; }
.gel-stat-label { font-size: 0.78rem; color: var(--gel-text-soft); margin-top: 2px; }

/* =============================================================
   9) TABLO STILI (zarif varyant)
   ============================================================= */
.gel-table {
    background: #fff; border-radius: var(--gel-radius);
    border: 1px solid var(--gel-neutral-border);
    overflow: hidden;
    box-shadow: var(--gel-shadow);
}
.gel-table table { margin: 0; }
.gel-table thead th {
    font-size: 0.74rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.4px;
    color: var(--gel-text-soft);
    background: var(--gel-bg);
    border-bottom: 1px solid var(--gel-neutral-border);
    padding: 10px 14px; white-space: nowrap;
}
.gel-table tbody td {
    padding: 12px 14px;
    font-size: 0.88rem;
    color: var(--gel-text);
    border-bottom: 1px solid var(--gel-neutral-border);
    vertical-align: middle;
}
.gel-table tbody tr:last-child td { border-bottom: none; }
.gel-table tbody tr:hover { background: var(--gel-bg); }

/* =============================================================
   10) META METIN (tarih, kayit yapan vb.)
   ============================================================= */
.gel-meta {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 0.78rem; color: var(--gel-text-mute);
}
.gel-meta i { font-size: 0.85rem; }
.gel-meta + .gel-meta { margin-left: 12px; }

/* =============================================================
   11) MOBIL UYUM
   ============================================================= */
@media (max-width: 576px) {
    .gel-page-header h1 { font-size: 1.15rem; }
    .gel-page-icon { width: 32px; height: 32px; font-size: 0.9rem; }
    .gel-card-foot { flex-direction: column; align-items: flex-start; }
    .gel-toggle-group { width: 100%; }
}