/* ============================================================
   Online Koçunuz — Veli Paneli (salt okunur) stilleri
   Tüm kurallar .okt-veli-paneli altına scope'landı (çakışma önleme).
   Token'lar globalde tanımlı (style.css): var(--primary-500) vb.
   Mobil öncelikli.
   ============================================================ */

.okt-veli-paneli{
  max-width:980px;
  margin:0 auto;
  padding:28px 16px 64px;
  color:var(--fg);
}

/* ---- ÜST BAŞLIK ---- */
.okt-veli-paneli .okt-vp-head{ margin-bottom:16px; }
.okt-veli-paneli .okt-vp-eyebrow{
  display:inline-flex; align-items:center;
  padding:5px 12px; border-radius:999px;
  background:#EEF1FF; color:#1E3AE2;
  font-size:12px; font-weight:700;
  text-transform:uppercase; letter-spacing:.06em;
  margin-bottom:12px;
}
.okt-veli-paneli .okt-vp-title{
  margin:0 0 8px; font-size:26px; line-height:1.2;
  font-weight:800; letter-spacing:-.02em; color:var(--ink-900);
}
.okt-veli-paneli .okt-vp-lead{
  margin:0; font-size:15px; line-height:1.6; color:var(--fg-muted);
  max-width:62ch;
}
.okt-veli-paneli .okt-vp-lead strong{ color:var(--ink-700); }

/* ---- SALT-OKUNUR ŞERİT ---- */
.okt-veli-paneli .okt-vp-banner{
  display:flex; align-items:center; gap:10px;
  padding:11px 14px; margin-bottom:22px;
  background:#FDF4E2; border:1px solid #F3DDA8; border-radius:12px;
  color:#A36C11; font-size:13px; font-weight:600;
}
.okt-veli-paneli .okt-vp-banner svg{ flex-shrink:0; }

/* ---- DURUM KUTULARI ---- */
.okt-veli-paneli .okt-vp-state{ margin-bottom:22px; }
.okt-veli-paneli .okt-vp-loading{
  display:flex; align-items:center; justify-content:center; gap:12px;
  padding:48px 16px; color:var(--fg-muted); font-size:14px; font-weight:600;
}
.okt-veli-paneli .okt-vp-spinner{
  width:20px; height:20px; flex-shrink:0;
  border:2.5px solid var(--ink-50); border-top-color:var(--primary-500);
  border-radius:50%; animation:okt-vp-spin .7s linear infinite;
}
@keyframes okt-vp-spin{ to{ transform:rotate(360deg); } }

.okt-veli-paneli .okt-vp-auth__card,
.okt-veli-paneli .okt-vp-error__card{
  text-align:center; padding:36px 24px; max-width:480px; margin:0 auto;
}
.okt-veli-paneli .okt-vp-auth__card svg{ color:var(--primary-500); margin-bottom:14px; }
.okt-veli-paneli .okt-vp-auth__title,
.okt-veli-paneli .okt-vp-error__title{
  margin:0 0 8px; font-size:20px; font-weight:700; color:var(--ink-900);
}
.okt-veli-paneli .okt-vp-auth__text,
.okt-veli-paneli .okt-vp-error__text{
  margin:0 0 20px; font-size:14px; line-height:1.6; color:var(--fg-muted);
}
.okt-veli-paneli .okt-vp-error__card{ border-color:#F3C2CB; }
.okt-veli-paneli .okt-vp-error__title{ color:#99213A; }

/* ---- BÖLÜM ---- */
.okt-veli-paneli .okt-vp-section{ margin-bottom:28px; }
.okt-veli-paneli .okt-vp-section__head{
  display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; margin-bottom:14px;
}
.okt-veli-paneli .okt-vp-section__title{
  margin:0; font-size:18px; font-weight:700; letter-spacing:-.01em; color:var(--ink-900);
}
.okt-veli-paneli .okt-vp-section__sub{ font-size:13px; color:var(--fg-muted); }

/* ---- GRID ---- */
.okt-veli-paneli .okt-vp-grid{ display:grid; gap:12px; }
.okt-veli-paneli .okt-vp-grid--stats{ grid-template-columns:1fr; }
.okt-veli-paneli .okt-vp-grid--cards{ grid-template-columns:1fr; }

/* ---- İSTATİSTİK KARTI ---- */
.okt-veli-paneli .okt-vp-stat{
  padding:18px 18px 16px; display:flex; flex-direction:column; gap:4px;
}
.okt-veli-paneli .okt-vp-stat__label{
  font-size:11px; font-weight:600; color:var(--fg-muted);
  text-transform:uppercase; letter-spacing:.07em;
}
.okt-veli-paneli .okt-vp-stat__value{
  font-size:26px; font-weight:800; line-height:1.1;
  letter-spacing:-.02em; color:var(--ink-900);
}
.okt-veli-paneli .okt-vp-stat__unit{ font-size:12px; color:var(--fg-muted); }
.okt-veli-paneli .okt-vp-stat--accent{
  position:relative; overflow:hidden;
  border-color:transparent;
  background:linear-gradient(135deg,#0B0F1A 0%,#1A1F2E 100%); color:#fff;
}
.okt-veli-paneli .okt-vp-stat--accent::before{
  content:""; position:absolute; inset:0;
  background:radial-gradient(120% 80% at 100% 0%, rgba(91,123,255,.35), transparent 55%);
  pointer-events:none;
}
.okt-veli-paneli .okt-vp-stat--accent .okt-vp-stat__label{ color:#8FA5FF; position:relative; }
.okt-veli-paneli .okt-vp-stat--accent .okt-vp-stat__value{ color:#fff; position:relative; }
.okt-veli-paneli .okt-vp-stat--accent .okt-vp-stat__unit{ color:#B7BECC; position:relative; }

/* ---- GENEL KART ---- */
.okt-veli-paneli .okt-vp-card{
  padding:18px; display:flex; flex-direction:column; gap:4px;
}
.okt-veli-paneli .okt-vp-card__icon{
  width:38px; height:38px; border-radius:10px; margin-bottom:8px;
  display:flex; align-items:center; justify-content:center;
  background:#EEF1FF; color:var(--primary-600);
}
.okt-veli-paneli .okt-vp-card__label{
  font-size:11px; font-weight:600; color:var(--fg-muted);
  text-transform:uppercase; letter-spacing:.07em;
}
.okt-veli-paneli .okt-vp-card__value{
  font-size:30px; font-weight:800; line-height:1.05;
  letter-spacing:-.02em; color:var(--ink-900);
}
.okt-veli-paneli .okt-vp-card__hint{ font-size:12px; color:var(--fg-muted); }

/* ---- KOÇLUK ---- */
.okt-veli-paneli .okt-vp-coach{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:2px;
}
.okt-veli-paneli .okt-vp-badge{
  display:inline-flex; align-items:center;
  padding:4px 11px; border-radius:999px;
  font-size:13px; font-weight:700;
}
.okt-veli-paneli .okt-vp-badge.is-active{ background:#E6F6EC; color:#156E3C; }
.okt-veli-paneli .okt-vp-badge.is-passive{ background:var(--ink-25); color:var(--fg-muted); }
.okt-veli-paneli .okt-vp-coach__name{ font-size:13px; color:var(--ink-700); font-weight:600; }
.okt-veli-paneli .okt-vp-coach__renewal{
  display:flex; align-items:baseline; gap:8px; flex-wrap:wrap;
  margin-top:12px; padding-top:12px; border-top:1px solid var(--border);
}
.okt-veli-paneli .okt-vp-coach__renewal-label{
  font-size:11px; font-weight:600; color:var(--fg-muted);
  text-transform:uppercase; letter-spacing:.06em;
}
.okt-veli-paneli .okt-vp-coach__renewal-date{
  font-size:15px; font-weight:700; color:var(--ink-900);
}
.okt-veli-paneli .okt-vp-coach__renewal-days{
  font-size:12px; font-weight:600; color:var(--fg-muted);
  padding:2px 9px; border-radius:999px; background:var(--ink-25);
}
.okt-veli-paneli .okt-vp-coach__renewal-days.is-soon{ background:#FDF4E2; color:#A36C11; }

/* ---- ALT NOT ---- */
.okt-veli-paneli .okt-vp-foot{
  margin:8px 0 0; font-size:13px; color:var(--fg-muted); text-align:center;
}

/* ============================================================
   Tablet / Masaüstü
   ============================================================ */
@media (min-width:640px){
  .okt-veli-paneli{ padding:36px 24px 72px; }
  .okt-veli-paneli .okt-vp-title{ font-size:30px; }
  .okt-veli-paneli .okt-vp-grid--stats{ grid-template-columns:repeat(2,1fr); }
  .okt-veli-paneli .okt-vp-grid--cards{ grid-template-columns:repeat(2,1fr); }
  .okt-veli-paneli .okt-vp-card--wide{ grid-column:1 / -1; }
}

@media (min-width:920px){
  .okt-veli-paneli .okt-vp-grid--stats{ grid-template-columns:repeat(4,1fr); }
  .okt-veli-paneli .okt-vp-grid--cards{ grid-template-columns:repeat(3,1fr); }
  .okt-veli-paneli .okt-vp-card--wide{ grid-column:auto; }
}

/* Hareketi azalt */
@media (prefers-reduced-motion:reduce){
  .okt-veli-paneli .okt-vp-spinner{ animation-duration:1.4s; }
}