/* =========================================================
   BelgeHazırla • panel.css (temizlenmiş)
   - Değişkenler
   - Tipografi / Başlıklar
   - Hero (profile-header)
   - KPI kartları
   - Hızlı Erişim (bh-quick) + nowrap
   - Completion Circle
   - Section Card (ortak)
   - Bildirim listesi
   - Favoriler & Progress (+ kart görselleri)
   - Tablolar
   - Sidebar
   - Responsive
   - Form elemanları + Butonlar
   - İkonlu inputlar / Password toggler / Avatar uploader
   - İşlem butonları (btn-action)
   ========================================================= */

/* ========== Değişkenler ========== */
:root{
  --bh-radius:14px;
  --bh-shadow:0 10px 30px rgba(0,0,0,.06);
  --bh-primary:#3a86ff;
  --bh-warning:#f59e0b;
  --bh-danger:#ef4444;
  --bh-success:#22c55e;
  --bh-info:#0ea5e9;
  --bh-muted:#6b7280;
}

/* ========== Tipografi / Başlıklar ========== */
.card-header h6{ font-size:.95rem !important; font-weight:700; line-height:1.2; margin:0; }
.list-group-item h6{ font-size:.95rem; line-height:1.25; }
/* Hero başlığı küçük */
.profile-header .card-body h2{ font-size:1.35rem; }

/* ========== Hero / Profile header ========== */
.profile-header{
  position:relative; border-radius:var(--bh-radius); overflow:hidden;
  background:
    radial-gradient(1200px 220px at -10% -20%, rgba(255,255,255,.25), transparent 40%),
    linear-gradient(135deg, #0ea5e9 0%, #3a86ff 50%, #6d28d9 100%);
}
.profile-header .card-body{ position:relative; z-index:2; }
.profile-header .card-body::after{
  content:""; position:absolute; inset:0;
  background:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><defs><pattern id='grid404' width='20' height='20' patternUnits='userSpaceOnUse'><path d='M 20 0 L 0 0 0 20' fill='none' stroke='rgba(255,255,255,0.08)' stroke-width='1'/></pattern></defs><rect width='100' height='100' fill='url(%23grid404)'/></svg>");
  opacity:.40; pointer-events:none;
}

/* ========== KPI Kartları ========== */
.kpi-card{
  border:1px solid transparent;
  background:
    linear-gradient(#ffffff,#ffffff) padding-box,
    linear-gradient(135deg, rgba(58,134,255,.35), rgba(14,165,233,.25)) border-box;
  border-radius:var(--bh-radius);
  box-shadow:var(--bh-shadow);
  transition:transform .25s ease, box-shadow .25s ease;
}
.kpi-card:hover{ transform:translateY(-3px); box-shadow:0 16px 44px rgba(0,0,0,.10); }
.kpi-card .card-body{ display:flex; flex-direction:column; align-items:center; text-align:center; }

.kpi-card.kpi-primary{
  background:linear-gradient(#fff,#fff) padding-box,
             linear-gradient(135deg, rgba(58,134,255,.45), rgba(109,40,217,.28)) border-box;
}
.kpi-card.kpi-success{
  background:linear-gradient(#fff,#fff) padding-box,
             linear-gradient(135deg, rgba(34,197,94,.45), rgba(14,165,233,.28)) border-box;
}
.kpi-card.kpi-warning{
  background:linear-gradient(#fff,#fff) padding-box,
             linear-gradient(135deg, rgba(245,158,11,.45), rgba(239,68,68,.28)) border-box;
}
.kpi-card.kpi-info{
  background:linear-gradient(#fff,#fff) padding-box,
             linear-gradient(135deg, rgba(14,165,233,.45), rgba(58,134,255,.28)) border-box;
}

.kpi-icon{ width:52px; height:52px; border-radius:14px; display:flex; align-items:center; justify-content:center; }
.kpi-icon.primary{ background:rgba(58,134,255,.12); }
.kpi-icon.success{ background:rgba(34,197,94,.12); }
.kpi-icon.warning{ background:rgba(245,158,11,.12); }
.kpi-icon.info{    background:rgba(14,165,233,.12); }

.kpi-value{
  font-weight:800; font-variant-numeric:tabular-nums; letter-spacing:.3px;
  font-size:clamp(1.25rem, 1.2vw + 1rem, 2rem); margin-top:.6rem;
}
.kpi-label{ color:var(--bh-muted); font-size:.9rem; margin-top:.15rem; }
.kpi-foot{ display:flex; align-items:center; justify-content:center; gap:.5rem; margin-top:.5rem; color:#9ca3af; font-size:.8rem; }
.kpi-dot{ width:6px; height:6px; border-radius:50%; background:#cbd5e1; }

/* ========== Hızlı Erişim (GRID) ========== */
.bh-quick{
  display:grid; gap:15px; align-items:stretch; padding:2px; overflow:visible;
}
.bh-quick .btn{
  width:100%; display:flex; align-items:center; justify-content:center; gap:.45rem;
  border-radius:12px; padding:.7rem .95rem; font-weight:600; white-space:nowrap;
  border:1px solid #e6ecf5; background:#f9fbfd; box-shadow:0 1px 0 rgba(0,0,0,.03);
  transition:transform .15s ease, box-shadow .15s ease, background .2s ease, filter .2s ease;
}
.bh-quick .btn .bi{ font-size:1rem; opacity:.9; }
.bh-quick .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px rgba(0,0,0,.06); background:#f4f7fc; }
.bh-quick .btn:active{ transform:translateY(0); box-shadow:0 6px 18px rgba(0,0,0,.05); }
.bh-quick .btn-primary{
  color:#fff; background:linear-gradient(135deg,#3a86ff,#6d28d9); border-color:transparent;
  box-shadow:0 12px 28px rgba(58,134,255,.28);
}
.bh-quick .btn-primary:hover{ filter:brightness(1.03); }

/* Kırılımlar */
@media (max-width:575.98px){ .bh-quick{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:576px) and (max-width:991.98px){ .bh-quick{ grid-template-columns:repeat(3,1fr); } }
@media (min-width:992px) and (max-width:1199.98px){ .bh-quick{ grid-template-columns:repeat(6,1fr); } }
@media (min-width:1200px){ .bh-quick{ grid-template-columns:repeat(8,1fr); } }

/* Alternatif: kaydırmalı tek satır */
.bh-quick--nowrap{ display:flex; gap:10px; overflow-x:auto; -webkit-overflow-scrolling:touch; padding-bottom:2px; }
.bh-quick--nowrap .btn{ flex:0 0 auto; white-space:nowrap; }

/* ========== Completion Circle ========== */
.completion-circle{
  width:64px; height:64px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-weight:700; color:#fff;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.25), rgba(255,255,255,.05) 60%);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.35), 0 10px 20px rgba(0,0,0,.12);
  backdrop-filter: blur(3px);
}

/* ========== Section Card — Ortak ========== */
.section-card{
  border:1px solid #eef2f7; border-radius:var(--bh-radius); box-shadow:var(--bh-shadow); background:#fff;
}
.section-card .card-header{
  background:linear-gradient(180deg,#ffffff,#f8fafc);
  border:0; border-bottom:1px solid #eef2f7; padding:.85rem 1rem;
}
.section-card .section-title{
  display:flex; align-items:center; gap:.6rem; font-weight:700; margin:0; font-size:.95rem !important;
}
.section-card .section-title .sh{
  width:32px; height:32px; border-radius:8px; display:inline-flex; align-items:center; justify-content:center; background:#f5f7fb;
}
.section-card .section-title .sh i{ font-size:1rem; }
.section-card .card-body{ padding:1rem; }

/* ========== Bildirimler ========== */
.bh-notification-list{ display:flex; flex-direction:column; gap:12px; }
.bh-noti-item{
  border:1px solid #eef2f7; border-radius:12px; padding:12px 14px;
  transition:background .2s ease, border-color .2s ease, transform .1s ease;
}
.bh-noti-item.unread{ background:#fafdff; border-color:#e1effe; box-shadow:0 8px 20px rgba(58,134,255,.06); }
.bh-noti-item.read{ background:#fff; }
.bh-noti-item:hover{ transform:translateY(-1px); border-color:#d8e3f2; }
.bh-noti-icon{ width:40px; height:40px; border-radius:10px; background:#f5f7fb; display:flex; align-items:center; justify-content:center; }
.bh-priority-badge{ position:absolute; top:-6px; right:-6px; font-size:.65rem; }

/* ========== Favoriler & Progress ========== */
.favorite-card{ transition:transform .2s ease, box-shadow .2s ease; }
.favorite-card:hover{ transform:translateY(-2px); box-shadow:0 14px 40px rgba(0,0,0,.08); }
.progress{ height:8px; background:#eef2f7; border-radius:999px; }
.progress-bar{ background:linear-gradient(90deg, #22c55e, #3a86ff); }

/* Kart görselleri */
.favorite-thumb{
  width:100%; aspect-ratio:16/9; object-fit:cover; background:#f3f4f6;
  border-top-left-radius:var(--bh-radius); border-top-right-radius:var(--bh-radius);
}
.placeholder-wave{
  min-height:160px;
  border-top-left-radius:var(--bh-radius); border-top-right-radius:var(--bh-radius);
}

/* ========== Tablolar ========== */
.table thead th{ font-weight:600; }
.table-hover tbody tr:hover{ background:#fafcff; }
.badge.bg-light.text-dark{ border:1px solid #e5e7eb; }
.table.align-middle>tbody>tr>td,
.table.align-middle>thead>tr>th{ padding-top:1rem; padding-bottom:1rem; }
.table .d-flex.align-items-center.gap-2 .bi{ font-size:1.15rem; }

/* Alt boşluk */
.row-downloads{ margin-bottom:2.2rem!important; }

/* Hover iyileştirme */
.list-group-item{ border-color:#eef2f7; }
.list-group-item:hover{ background:#fafcff; }

/* ========== Sidebar ========== */
.sidebar-card{ border-radius:var(--bh-radius); }
.sidebar-header{
  position:relative; border-radius:var(--bh-radius) var(--bh-radius) 0 0;
  background:linear-gradient(135deg, #0ea5e9 0%, #3a86ff 50%, #6d28d9 100%);
}
.sidebar-header::after{
  content:""; position:absolute; inset:0;
  background:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><defs><pattern id='grid404' width='20' height='20' patternUnits='userSpaceOnUse'><path d='M 20 0 L 0 0 0 20' fill='none' stroke='rgba(255,255,255,0.08)' stroke-width='1'/></pattern></defs><rect width='100' height='100' fill='url(%23grid404)'/></svg>");
  opacity:.35; pointer-events:none;
}
.profile-image{ object-fit:cover; box-shadow:0 6px 16px rgba(0,0,0,.15); }
.sidebar-menu-item{ border:0; padding:.65rem .75rem; font-weight:600; display:flex; align-items:center; }
.sidebar-menu-item .bi{ opacity:.9; }
.sidebar-menu-item:hover{ background:#f8fafc; }
.sidebar-menu-item.active{ color:#0b5ed7; background:#eef5ff; border-left:3px solid #3a86ff; }
.sidebar-footer{ background:#f9fbfd; border-top:1px solid #eef2f7; }

/* ========== Responsive ========== */
@media (max-width:576px){
  .completion-circle{ width:56px; height:56px; font-size:.95rem; }
  .kpi-icon{ width:48px; height:48px; }
}

/* ========== Form Elemanları ========== */
.form-control{
  border-radius:var(--bh-radius); border:1px solid #e5e7eb;
  box-shadow:inset 0 1px 2px rgba(0,0,0,.03);
  padding:.65rem .85rem; font-size:.95rem;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.form-control:focus{ border-color:var(--bh-primary); box-shadow:0 0 0 3px rgba(58,134,255,.15); }
.form-label{ font-weight:600; font-size:.9rem; margin-bottom:.35rem; color:#374151; }
input[type="file"].form-control{ padding:.45rem .65rem; background-color:#fff; }
.form-text{ font-size:.8rem; color:var(--bh-muted); }

/* ========== Butonlar ========== */
.btn{
  border-radius:10px; font-weight:600; padding:.55rem 1rem; transition:all .2s ease;
}
.btn-primary{
  background:linear-gradient(135deg, var(--bh-primary), #6d28d9);
  border:none; box-shadow:0 4px 12px rgba(58,134,255,.25);
}
.btn-primary:hover{ filter:brightness(1.05); }
.btn-warning{
  background:linear-gradient(135deg, var(--bh-warning), #f97316);
  border:none; color:#fff; box-shadow:0 4px 12px rgba(245,158,11,.25);
}
.btn-warning:hover{ filter:brightness(1.05); }
.btn-outline-secondary{ border-radius:10px; font-weight:600; color:#374151; border:1px solid #d1d5db; }
.btn-outline-secondary:hover{ background:#f9fafb; }

/* ========== İkonlu inputlar / Password toggler / Avatar uploader ========== */
.bh-input, .bh-textarea{ position:relative; }
.bh-input > i, .bh-textarea > i{
  position:absolute; left:12px; top:50%; transform:translateY(-50%);
  font-size:1rem; color:var(--bh-muted); pointer-events:none;
}
.bh-textarea > i{ top:14px; transform:none; }
.bh-input .form-control{ padding-left:2.25rem; }
.bh-textarea .form-control{ padding-left:2.25rem; padding-top:1.15rem; }

.bh-input-password{ position:relative; display:flex; align-items:center; }
.bh-input-password > i{ position:absolute; left:12px; color:var(--bh-muted); font-size:1rem; pointer-events:none; }
.bh-input-password .form-control{ padding-left:2.25rem; padding-right:2.25rem; }
.bh-input-password .toggle{
  position:absolute; right:6px; top:50%; transform:translateY(-50%);
  border:0; background:transparent; padding:6px 8px; border-radius:8px; line-height:1;
}
.bh-input-password .toggle:hover{ background:#f3f4f6; }

.avatar-uploader{ display:flex; align-items:center; gap:12px; }
.avatar-preview{
  display:inline-block; width:56px; height:56px; object-fit:cover;
  border-radius:50%; box-shadow:0 6px 16px rgba(0,0,0,.12); border:2px solid #fff;
}

/* ========== İşlem Butonları (icon-only / küçük) ========== */
/* Kullanım: <a class="btn btn-sm btn-outline-primary btn-action"><i class="bi bi-eye"></i></a> */
.btn-action{
  --_size:34px; --_radius:10px;
  width:var(--_size); height:var(--_size);
  padding:0 !important; border-radius:var(--_radius);
  display:inline-flex; align-items:center; justify-content:center;
  line-height:1; box-shadow:0 1px 2px rgba(0,0,0,.04);
  transition:transform .15s ease, box-shadow .2s ease, background-color .2s ease, border-color .2s ease, color .2s ease;
}
.btn-action .bi{ font-size:1rem; opacity:1; }
.btn-action.xs{ --_size:30px; }
.btn-action.md{ --_size:38px; }

.btn-action:hover{ transform:translateY(-1px); box-shadow:0 8px 18px rgba(0,0,0,.08); }
.btn-action:active{ transform:translateY(0); box-shadow:0 4px 12px rgba(0,0,0,.06) inset; }
.btn-action:focus-visible{ outline:0; box-shadow:0 0 0 3px rgba(58,134,255,.16); }

/* Outline (resting net) */
.btn-action.btn-outline-primary{  color:var(--bh-primary);  background:rgba(58,134,255,.10);  border-color:rgba(58,134,255,.55); }
.btn-action.btn-outline-success{  color:var(--bh-success);  background:rgba(34,197,94,.12);   border-color:rgba(34,197,94,.55); }
.btn-action.btn-outline-warning{  color:var(--bh-warning); background:rgba(245,158,11,.14);  border-color:rgba(245,158,11,.55); }
.btn-action.btn-outline-danger{   color:var(--bh-danger);  background:rgba(239,68,68,.12);   border-color:rgba(239,68,68,.55); }
.btn-action.btn-outline-secondary{ color:#374151; background:#f5f7fb; border-color:#cfd8e3; }

/* Outline hover ton açma */
.btn-action.btn-outline-primary:hover  { background:rgba(58,134,255,.14); }
.btn-action.btn-outline-success:hover  { background:rgba(34,197,94,.16); }
.btn-action.btn-outline-warning:hover  { background:rgba(245,158,11,.18); }
.btn-action.btn-outline-danger:hover   { background:rgba(239,68,68,.16); }
.btn-action.btn-outline-secondary:hover{ background:#eef2f7; }

/* Soft (pastel) */
.btn-action[class*="soft-"]{ border-color:rgba(0,0,0,.05) !important; box-shadow:0 1px 2px rgba(0,0,0,.04); }
.btn-action.soft-primary{  color:var(--bh-primary);  background:rgba(58,134,255,.12); }
.btn-action.soft-success{  color:var(--bh-success);  background:rgba(34,197,94,.12); }
.btn-action.soft-warning{  color:var(--bh-warning); background:rgba(245,158,11,.14); }
.btn-action.soft-danger{   color:var(--bh-danger);  background:rgba(239,68,68,.12); }
.btn-action.soft-info{     color:var(--bh-info);    background:rgba(14,165,233,.12); }
.btn-action[class*="soft-"]:hover{ filter:brightness(1.03); }

/* Dolu butonlar */
.btn-action.btn-primary,
.btn-action.btn-success,
.btn-action.btn-warning,
.btn-action.btn-danger,
.btn-action.btn-info{ box-shadow:0 6px 16px rgba(0,0,0,.08); }
.btn-action.btn-primary:hover,
.btn-action.btn-success:hover,
.btn-action.btn-warning:hover,
.btn-action.btn-danger:hover,
.btn-action.btn-info:hover{ filter:brightness(1.05); }

/* Grup içi aralık */
.bh-actions{ display:flex; align-items:center; gap:.35rem; }
.table td .btn-group .btn-action + .btn-action{ margin-left:.35rem; }

/* Disabled */
.btn-action:disabled, .btn-action.disabled{ opacity:.55; pointer-events:none; transform:none; box-shadow:none; }