/* ================================================
   TML PERFORMANS 4.0 — "TML Mobil" koyu tema
   Renk: Lacivert/Mor gradyan + Altın vurgu (diğer eklentilerle ortak dil)
   Font: Plus Jakarta Sans
   ================================================ */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

:root {
  --p-bg:         #0b0821;
  --p-bg-grad:    radial-gradient(120% 60% at 50% 0%, #201a44 0%, #120d2e 45%, #07051a 100%);
  --p-card:       rgba(255,255,255,.055);
  --p-card-solid: #171233;
  --p-tint:       rgba(245,180,0,.14);
  --p-border:     rgba(255,255,255,.09);
  --p-text:       #ffffff;
  --p-muted:      #6f6c88;
  --p-muted2:     #a3a1b8;
  --p-yellow:     #f5b400;
  --p-yellow-dk:  #d99e00;
  --p-yellow-lt:  #ffd23f;
  --p-teal:       #0ecb7a;
  --p-teal-bg:    rgba(14,203,122,.14);
  --p-red:        #ff4d6a;
  --p-red-bg:     rgba(255,77,106,.14);
  --p-r:          26px;
  --p-r-sm:       16px;
  --p-font:       'Plus Jakarta Sans', system-ui, sans-serif;
}

.tmlp-app-frame { position: relative; max-width: 480px; margin: 0 auto; background: var(--p-bg-grad); border-radius: 34px; overflow: hidden; isolation: isolate; }
.tmlp-app-frame * { box-sizing: border-box; font-family: var(--p-font); }

.tmlp-blob { position: absolute; border-radius: 50%; filter: blur(2px); z-index: 0; pointer-events: none; }
.tmlp-blob-tr { width: 220px; height: 220px; top: -90px; right: -90px; background: radial-gradient(circle, rgba(245,180,0,.30) 0%, rgba(245,180,0,0) 72%); }
.tmlp-blob-bl { width: 220px; height: 220px; bottom: -100px; left: -100px; background: radial-gradient(circle, rgba(124,58,237,.24) 0%, rgba(124,58,237,0) 72%); }

.tmlp-wrap { position: relative; z-index: 1; font-family: var(--p-font); padding: 22px 16px 30px; color: var(--p-text); }

/* ── Login / Boş durum ── */
.tmlp-not-logged { text-align: center; padding: 48px 24px; background: var(--p-card-solid); border: 1px solid var(--p-border); border-radius: var(--p-r); position: relative; z-index: 1; }
.tmlp-not-logged-icon { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%; background: var(--p-tint); color: var(--p-yellow); margin-bottom: 14px; }
.tmlp-not-logged-icon svg { width: 26px; height: 26px; }
.tmlp-not-logged p { color: var(--p-muted2); margin: 0; font-size: 15px; }
.tmlp-not-logged a { color: var(--p-yellow); font-weight: 700; text-decoration: none; }

.tmlp-empty { text-align: center; padding: 60px 24px; }
.tmlp-empty-icon { display: inline-flex; align-items: center; justify-content: center; width: 60px; height: 60px; border-radius: 50%; background: var(--p-tint); color: var(--p-yellow); margin-bottom: 16px; }
.tmlp-empty-icon svg { width: 28px; height: 28px; }
.tmlp-empty h3 { font-size: 18px; font-weight: 800; margin: 0 0 8px; color: var(--p-text); }
.tmlp-empty p { color: var(--p-muted2); margin: 0; font-size: 14px; }

/* ── Header — hamburger + ortalanmış logo + bildirim ── */
.tmlp-header { display: grid; grid-template-columns: 42px 1fr 42px; align-items: center; margin-bottom: 22px; padding: 4px 2px 0; gap: 8px; }

.tmlp-hamburger-btn { width: 42px; height: 42px; border-radius: 50%; background: rgba(255,255,255,.06); border: 1.5px solid var(--p-border); color: var(--p-text); display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; transition: background .2s, transform .15s; flex-shrink: 0; }
.tmlp-hamburger-btn:hover { background: rgba(255,255,255,.1); }
.tmlp-hamburger-btn:active { transform: scale(.92); }
.tmlp-hamburger-btn svg { width: 20px; height: 20px; }

.tmlp-avatar-btn { width: 42px; height: 42px; background: rgba(255,255,255,.06); border: 1.5px solid var(--p-border); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--p-muted2); text-decoration: none; flex-shrink: 0; transition: transform .15s, background .2s; }
.tmlp-avatar-btn:hover { background: rgba(255,255,255,.1); }
.tmlp-avatar-btn:active { transform: scale(.92); }
.tmlp-avatar-btn svg { width: 19px; height: 19px; }

.tmlp-bell-btn { width: 42px; height: 42px; border-radius: 50%; background: rgba(255,255,255,.06); border: 1.5px solid var(--p-border); color: var(--p-text); display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; position: relative; transition: background .2s, transform .15s; flex-shrink: 0; justify-self: end; }
.tmlp-bell-btn:hover { background: rgba(255,255,255,.1); }
.tmlp-bell-btn:active { transform: scale(.92); }
.tmlp-bell-btn svg { width: 19px; height: 19px; }
.tmlp-bell-dot { position: absolute; top: 9px; right: 10px; width: 8px; height: 8px; border-radius: 50%; background: var(--p-yellow); box-shadow: 0 0 0 2px var(--p-card-solid); }

.tmlp-logo { display: flex; align-items: center; justify-content: center; gap: 10px; }
.tmlp-logo-icon { width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg, var(--p-yellow-lt), var(--p-yellow)); color: #17171c; display: flex; align-items: center; justify-content: center; flex-shrink: 0; box-shadow: 0 6px 14px rgba(245,180,0,.4); }
.tmlp-logo-icon svg { width: 17px; height: 17px; }
.tmlp-logo-text { display: flex; flex-direction: column; line-height: 1.05; }
.tmlp-logo-main { font-size: 21px; font-weight: 800; letter-spacing: -.4px; color: var(--p-text); }
.tmlp-logo-sub { font-size: 9px; font-weight: 700; letter-spacing: 2.6px; color: var(--p-yellow); margin-top: 2px; }

/* ── Genel Başarı Kartı — renkli parıltı çerçeveli ── */
.tmlp-basari-card {
  position: relative;
  background: var(--p-card); border: 1px solid var(--p-border); backdrop-filter: blur(8px);
  border-radius: var(--p-r); padding: 22px; margin-bottom: 22px;
  box-shadow:
    0 0 0 1.5px rgba(245,180,0,.28),
    0 0 34px 4px rgba(245,180,0,.14),
    0 10px 30px rgba(0,0,0,.35);
}
.tmlp-basari-top { display: flex; align-items: center; justify-content: space-between; }
.tmlp-basari-label { display: block; font-size: 11px; font-weight: 700; color: var(--p-muted2); letter-spacing: 1.4px; text-transform: uppercase; margin-bottom: 8px; }
.tmlp-basari-num { font-size: 44px; font-weight: 800; color: var(--p-text); line-height: 1; letter-spacing: -1px; }
.tmlp-basari-num span { font-size: 24px; font-weight: 700; color: var(--p-yellow); margin-left: 2px; }
.tmlp-basari-sub { font-size: 13px; color: var(--p-muted2); margin-top: 8px; }
.tmlp-basari-sub strong { color: var(--p-teal); font-weight: 700; }
.tmlp-basari-icon { width: 54px; height: 54px; min-width: 54px; background: var(--p-tint); border: 1px solid rgba(245,180,0,.3); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--p-yellow); flex-shrink: 0; }
.tmlp-basari-icon svg { width: 25px; height: 25px; }
.tmlp-basari-spark { margin-top: 14px; height: 44px; color: var(--p-yellow); }
.tmlp-spark { width: 100%; height: 100%; display: block; }

/* ── Bölüm başlığı ── */
.tmlp-section-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; padding: 0 2px; }
.tmlp-section-title { font-size: 18px; font-weight: 700; color: var(--p-text); display: flex; align-items: center; gap: 8px; text-transform: uppercase; letter-spacing: .3px; }
.tmlp-see-all { display: inline-flex; align-items: center; gap: 2px; font-size: 12px; font-weight: 700; color: var(--p-yellow); letter-spacing: .6px; text-decoration: none; text-transform: uppercase; }
.tmlp-see-all svg { width: 14px; height: 14px; }

/* Günlük bölüm rozeti — takvim + gün numarası */
.tmlp-daily-badge { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 8px; background: linear-gradient(135deg, var(--p-yellow-lt), var(--p-yellow)); color: #17171c; font-size: 11px; font-weight: 800; position: relative; flex-shrink: 0; }
.tmlp-daily-badge::before, .tmlp-daily-badge::after { content: ''; position: absolute; top: -3px; width: 2px; height: 6px; border-radius: 2px; background: var(--p-yellow-dk); }
.tmlp-daily-badge::before { left: 6px; }
.tmlp-daily-badge::after  { right: 6px; }

/* ── Test listesi ── */
.tmlp-test-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 8px; }
.tmlp-test-card { background: var(--p-card); border: 1px solid var(--p-border); backdrop-filter: blur(8px); border-radius: 20px; padding: 14px 16px; display: flex; align-items: center; gap: 14px; box-shadow: 0 8px 22px rgba(0,0,0,.25); }

.tmlp-test-icon { width: 46px; height: 46px; min-width: 46px; border-radius: 14px; background: var(--p-tint); color: var(--p-yellow); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.tmlp-test-icon svg { width: 22px; height: 22px; }

.tmlp-test-info { flex: 1; min-width: 0; }
.tmlp-test-name { font-size: 15px; font-weight: 700; color: var(--p-text); line-height: 1.3; margin-bottom: 4px; }
.tmlp-test-date { font-size: 11px; font-weight: 600; color: var(--p-muted2); letter-spacing: .3px; }

.tmlp-test-score { text-align: right; flex-shrink: 0; }
.tmlp-test-pct { font-size: 19px; font-weight: 800; color: var(--p-text); line-height: 1; margin-bottom: 8px; }
.tmlp-test-bar-track { width: 64px; height: 5px; border-radius: 99px; background: rgba(255,255,255,.1); overflow: hidden; margin-left: auto; }
.tmlp-bar-line-fill { height: 100%; border-radius: 99px; transition: width 1s cubic-bezier(.34,1.1,.64,1); }
.tmlp-bar-line-fill.tmlp-score-good { background: var(--p-teal); }
.tmlp-bar-line-fill.tmlp-score-mid  { background: var(--p-yellow); }
.tmlp-bar-line-fill.tmlp-score-low  { background: var(--p-red); }

/* ── Deneme Sınavları CTA kartı ── */
.tmlp-deneme-cta { display: flex; align-items: center; gap: 14px; background: var(--p-card); border: 1px solid var(--p-border); backdrop-filter: blur(8px); border-radius: 20px; padding: 16px; text-decoration: none; box-shadow: 0 8px 22px rgba(0,0,0,.25); margin-bottom: 8px; transition: transform .12s; }
.tmlp-deneme-cta:active { transform: scale(.98); }
.tmlp-deneme-cta-icon { width: 46px; height: 46px; min-width: 46px; border-radius: 14px; background: var(--p-tint); color: var(--p-yellow); display: flex; align-items: center; justify-content: center; flex-shrink: 0; position: relative; }
.tmlp-deneme-cta-icon svg { width: 22px; height: 22px; }
.tmlp-deneme-cta-info { flex: 1; min-width: 0; }
.tmlp-deneme-cta-title { font-size: 15px; font-weight: 700; color: var(--p-text); line-height: 1.3; margin-bottom: 3px; }
.tmlp-deneme-cta-sub { font-size: 12px; font-weight: 600; color: var(--p-muted2); }
.tmlp-deneme-cta-chevron { color: var(--p-muted2); flex-shrink: 0; display: flex; }
.tmlp-deneme-cta-chevron svg { width: 18px; height: 18px; }

/* Bulunamadı durumundaki küçük "x" rozeti (görseldeki sarı çarpı) */
.tmlp-deneme-cta-icon.tmlp-icon-x::after {
  content: '✕'; position: absolute; bottom: -4px; right: -4px;
  width: 18px; height: 18px; border-radius: 50%;
  background: linear-gradient(135deg, var(--p-yellow-lt), var(--p-yellow)); color: #17171c;
  font-size: 10px; font-weight: 800; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 8px rgba(245,180,0,.4);
}

/* ── Deneme Sınavları — özet + kart detayları (tam liste sayfası) ── */
.tmlp-dsinav-ozet { display: flex; background: var(--p-card); border: 1px solid var(--p-border); backdrop-filter: blur(8px); border-radius: var(--p-r); padding: 18px 6px; margin-bottom: 18px; box-shadow: 0 10px 30px rgba(0,0,0,.3); }
.tmlp-dsinav-ozet-item { flex: 1; text-align: center; border-right: 1px solid var(--p-border); }
.tmlp-dsinav-ozet-item:last-child { border-right: none; }
.tmlp-dsinav-ozet-num { display: block; font-size: 21px; font-weight: 800; color: var(--p-text); letter-spacing: -.3px; }
.tmlp-dsinav-ozet-label { display: block; font-size: 10.5px; font-weight: 700; color: var(--p-muted2); letter-spacing: .6px; text-transform: uppercase; margin-top: 4px; }

.tmlp-dsinav-card { align-items: flex-start; }
.tmlp-dsinav-card-main { display: flex; align-items: flex-start; justify-content: space-between; width: 100%; gap: 12px; }
.tmlp-dsinav-stats { display: flex; flex-wrap: wrap; gap: 6px 10px; margin-top: 6px; font-size: 12px; font-weight: 700; }
.tmlp-dsinav-stat-ok    { color: var(--p-teal); }
.tmlp-dsinav-stat-bad   { color: var(--p-red); }
.tmlp-dsinav-stat-empty { color: var(--p-muted2); }
.tmlp-dsinav-stat-net   { color: var(--p-yellow); }

.tmlp-dsinav-badge { display: inline-block; font-size: 11px; font-weight: 800; border-radius: 99px; padding: 4px 10px; white-space: nowrap; }
.tmlp-dsinav-badge-gecti { background: var(--p-teal-bg); color: var(--p-teal); }
.tmlp-dsinav-badge-kaldi { background: var(--p-red-bg); color: var(--p-red); }

/* Kayıt bilgi rozeti (JS ile eklenir) */
.tmlp-saved-badge { background: var(--p-teal-bg); color: var(--p-teal); font-size: 13px; font-weight: 700; border-radius: 12px; padding: 10px 14px; margin-bottom: 12px; text-align: center; }

/* ================================================
   SOL MENÜ (HAMBURGER DRAWER) — diğer TML eklentileriyle ortak
   ================================================ */
.tmlp-drawer-overlay { position: fixed; inset: 0; background: rgba(4,2,16,.6); backdrop-filter: blur(2px); opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility .25s ease; z-index: 9998; }
.tmlp-drawer-overlay.open { opacity: 1; visibility: visible; }

.tmlp-drawer { position: fixed; top: 0; left: 0; bottom: 0; width: 82%; max-width: 320px; background: linear-gradient(180deg, #1c1640, #0c0920); border-right: 1px solid var(--p-border); box-shadow: 20px 0 60px rgba(0,0,0,.5); z-index: 9999; transform: translateX(-100%); transition: transform .28s cubic-bezier(.4,0,.2,1); display: flex; flex-direction: column; font-family: var(--p-font); }
.tmlp-drawer.open { transform: translateX(0); }

.tmlp-drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 26px 20px 22px; border-bottom: 1px solid var(--p-border); }
.tmlp-drawer-close { width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,.06); border: 1px solid var(--p-border); color: var(--p-text); display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 16px; line-height: 1; padding: 0; flex-shrink: 0; transition: background .2s; }
.tmlp-drawer-close:hover { background: rgba(255,255,255,.12); }

.tmlp-drawer-nav { display: flex; flex-direction: column; padding: 14px 12px; gap: 2px; overflow-y: auto; }
.tmlp-drawer-link { display: flex; align-items: center; gap: 14px; padding: 13px 14px; border-radius: 14px; color: var(--p-muted2); text-decoration: none; font-size: 15px; font-weight: 600; transition: background .18s, color .18s; }
.tmlp-drawer-link:hover, .tmlp-drawer-link:active { background: rgba(245,180,0,.1); color: var(--p-text); }
.tmlp-drawer-link-icon { width: 38px; height: 38px; border-radius: 11px; background: rgba(255,255,255,.06); display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--p-yellow); }
.tmlp-drawer-link-icon svg { width: 18px; height: 18px; }
.tmlp-drawer-link.is-active { background: rgba(245,180,0,.12); color: var(--p-text); }
.tmlp-drawer-link.is-active .tmlp-drawer-link-icon { background: linear-gradient(135deg, var(--p-yellow-lt), var(--p-yellow)); color: #17171c; }

/* ── Responsive ── */
@media (max-width: 380px) {
  .tmlp-basari-num  { font-size: 38px; }
  .tmlp-logo-main   { font-size: 19px; }
}