:root{
  --bg: #060b13;
  --panel: #0d1a2b;
  --panel-2: #16283d;
  --line: rgba(140,195,240,0.16);
  --silver-1: #bfe3ff;
  --silver-2: #6fa8d6;
  --silver-3: #2c5580;
  --ink: #e8f3ff;
  --ink-dim: #7fa3c4;
  --danger: #c96b6b;
  --ok: #7fae8a;
}
*{ margin:0; padding:0; box-sizing:border-box; }
html,body{ height:100%; overflow-x:hidden; max-width:100%; touch-action: pan-y; }
body{
  background:
    repeating-linear-gradient(180deg, rgba(140,195,240,0.025) 0px, rgba(140,195,240,0.025) 1px, transparent 1px, transparent 3px),
    radial-gradient(ellipse at 50% 0%, rgba(110,180,240,0.08), transparent 60%),
    var(--bg);
  color: var(--ink);
  font-family: 'Rajdhani', sans-serif;
  min-height:100vh;
  width:100%;
}
::selection{ background: var(--silver-3); color:#fff; }
h1,h2,h3, .crest-font{ font-family:'Cinzel Decorative', serif; }

/* ===================== LOADER ===================== */
#loader{
  position:fixed; inset:0; z-index: 100;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap: 30px;
  background: var(--bg);
  transition: opacity 0.9s ease, filter 0.9s ease;
}
#loader.done{ opacity:0; filter: blur(6px); pointer-events:none; }

.crest-wrap{ position:relative; width: 170px; height:170px; display:flex; align-items:center; justify-content:center; }
.ring{ position:absolute; inset:0; border-radius:50%; border: 1.5px solid rgba(200,205,210,0.35);
  box-shadow: 0 0 0 5px rgba(255,255,255,0.03), inset 0 0 12px rgba(255,255,255,0.05);
  animation: spin 12s linear infinite; }
.ring::before{ content:''; position:absolute; top:-1px; left:50%; width:6px; height:6px; margin-left:-3px;
  background: var(--silver-1); border-radius:50%; box-shadow: 0 0 8px 2px rgba(223,225,228,0.8); }
@keyframes spin{ to{ transform: rotate(360deg); } }

.crest-img{ width: 170px; height:170px; border-radius:50%; object-fit:contain;
  filter: drop-shadow(0 0 22px rgba(200,205,210,0.10));
  opacity:0; transform: scale(0.86); animation: crestIn 1.1s cubic-bezier(.2,.8,.2,1) 0.15s forwards; position:relative; }
@keyframes crestIn{ to{ opacity:1; transform: scale(1); } }

.sweep{ position:absolute; width:170px; height:170px; overflow:hidden; border-radius:50%; pointer-events:none; }
.sweep::after{ content:''; position:absolute; top:0; left:-60%; width:40%; height:100%;
  background: linear-gradient(75deg, transparent, rgba(255,255,255,0.32), transparent);
  animation: sweepMove 2.6s ease-in-out infinite; animation-delay: 1.3s; }
@keyframes sweepMove{ 0%{left:-60%;} 45%{left:120%;} 100%{left:120%;} }

.brand{ text-align:center; opacity:0; transform: translateY(8px); animation: fadeUp 1s ease 0.9s forwards; }
@keyframes fadeUp{ to{ opacity:1; transform:translateY(0); } }
.brand h1{ font-weight:700; font-size: 22px; letter-spacing: 5px;
  background: linear-gradient(120deg, var(--silver-2), var(--silver-1) 40%, var(--silver-2) 60%, var(--silver-3));
  background-size: 220% auto; -webkit-background-clip: text; background-clip:text; color:transparent;
  animation: shine 3.5s linear infinite; }
@keyframes shine{ to{ background-position: -220% center; } }

.progress-track{ width: 220px; height: 1px; background: rgba(255,255,255,0.12); position:relative; overflow:hidden;
  opacity:0; animation: fadeUp 1s ease 1.05s forwards; }
.progress-fill{ position:absolute; left:0; top:0; height:100%; width:0%;
  background: linear-gradient(90deg, var(--silver-3), var(--silver-1)); transition: width 0.25s ease-out; }
.progress-label{ display:flex; justify-content:space-between; width:220px; margin-top:10px;
  font-size:13px; letter-spacing:3.5px; font-weight:600; color: var(--ink-dim); opacity:0;
  animation: fadeUp 1s ease 1.05s forwards; }
.progress-label span:last-child{ color: var(--silver-1); font-variant-numeric: tabular-nums; }

/* ===================== AUTH VIEW ===================== */
#authView{ display:none; min-height:100vh; align-items:center; justify-content:center; padding:24px; position:relative; z-index:1; }
.auth-card{ width:100%; max-width: 380px; background: var(--panel); border:1px solid var(--line);
  border-radius: 28px; padding: 38px 32px 32px; text-align:center; }
.auth-card, .auth-card *{ font-family:'Inter', sans-serif; }
.auth-crest{ width:64px; height:64px; margin: 0 auto 16px; display:block; }
.auth-card h1{ font-size:19px; letter-spacing:0.2px; font-weight:700; color:#fff; }

.tabs{ display:flex; margin: 26px 0 22px; border:1px solid var(--line); border-radius:14px; overflow:hidden; padding:4px; gap:4px; }
.tab{ flex:1; padding:10px; font-size:13.5px; letter-spacing:0.2px; font-weight:600; color:var(--ink-dim);
  background:transparent; border:none; border-radius:10px; cursor:pointer; font-family:'Inter',sans-serif; }
.tab.active{ background: var(--panel-2); color:#fff; }

.field{ text-align:left; margin-bottom:14px; }
.field label{ display:block; font-size:11px; letter-spacing:1px; color:var(--ink-dim); font-weight:500; margin-bottom:6px; text-transform:none; }
.field input, .field textarea{ width:100%; padding:13px 16px; background: #0a1522; border:1px solid var(--line); border-radius:14px;
  color: var(--ink); font-family:'Inter',sans-serif; font-size:14.5px; font-weight:500; letter-spacing:0.1px; }
.field textarea{ resize:vertical; min-height:64px; font-family:'Inter',sans-serif; }
.field input:focus, .field textarea:focus{ outline:none; border-color: var(--silver-2); }

.username-warning{ margin-top:6px; font-size:11px; color:#c99a4a; line-height:1.4; }

.pw-field{ position:relative; }
.pw-field input{ padding-right:40px; }
.pw-toggle{ position:absolute; right:6px; top:50%; transform:translateY(-50%); background:none; border:none;
  cursor:pointer; font-size:15px; opacity:0.5; padding:6px; line-height:1; }
.pw-toggle:hover{ opacity:0.8; }
.pw-toggle.showing{ opacity:1; }

.btn{ width:100%; padding:13px; margin-top:6px; border:none; border-radius:14px; cursor:pointer;
  font-family:'Inter',sans-serif; font-weight:700; font-size:14.5px; letter-spacing:0.2px; text-transform:none;
  background: linear-gradient(120deg, var(--silver-3), var(--silver-2)); color:#071322; transition: filter 0.2s; }
.btn:hover{ filter:brightness(1.15); }
.btn:disabled{ opacity:0.5; cursor:not-allowed; }

.msg{ margin-top:12px; font-size:12.5px; letter-spacing:0.5px; min-height:16px; }
.msg.error{ color: var(--danger); }
.msg.ok{ color: var(--ok); }

.form-block{ display:none; }
.form-block.active{ display:block; }

/* ===================== APP VIEW ===================== */
#appView{ display:none; min-height:100vh; }
header.top{ display:flex; align-items:center; justify-content:space-between; padding: 16px 28px;
  border-bottom:1px solid var(--line); background: rgba(16,17,19,0.6); position:sticky; top:0; backdrop-filter: blur(6px); z-index:5; }
.top-brand{ display:flex; align-items:center; gap:12px; }
.top-brand img{ width:38px; height:38px; }
.top-brand span{ font-size:15px; letter-spacing:3px; font-weight:700; color:var(--silver-1); }
.top-user{ display:flex; align-items:center; gap:14px; }
.top-user .who{ text-align:right; }
.top-user .who .name{ font-size:14px; font-weight:600; color:var(--ink); }
.top-user .who .rank{ font-size:11px; letter-spacing:1.5px; color:var(--ink-dim); text-transform:uppercase; }
.logout-btn{ padding:8px 14px; border-radius:6px; border:1px solid var(--line); background:transparent;
  color:var(--ink-dim); font-family:'Rajdhani',sans-serif; font-weight:600; letter-spacing:1px; font-size:12px;
  cursor:pointer; text-transform:uppercase; }
.logout-btn:hover{ border-color: var(--silver-2); color: var(--silver-1); }

main.content{ max-width: 1080px; margin: 0 auto; padding: 30px 24px 60px;
  display:grid; grid-template-columns: 1fr 1.35fr; gap: 22px; }
@media (max-width: 800px){ main.content{ grid-template-columns: 1fr; } }

.panel{ background: var(--panel); border:1px solid var(--line); border-radius:3px; overflow:hidden; max-width:100%;
  border-top:1px solid var(--silver-3); box-shadow: 0 0 0 1px rgba(0,0,0,0.3); }
.panel-head{ padding: 16px 20px; border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; }
.panel-head h2{ font-size:14px; letter-spacing:3px; color:var(--silver-1); font-weight:700; }
.panel-head .count{ font-size:11px; color:var(--ink-dim); letter-spacing:1px; }
.panel-body{ padding: 14px 16px; }

.member-row{ display:flex; align-items:center; gap:12px; padding:10px 8px; border-radius:8px; }
.member-row:hover{ background: var(--panel-2); }
.avatar{ width:36px; height:36px; border-radius:50%; background: var(--panel-2); border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center; font-weight:700; font-size:13px; color:var(--silver-1); flex-shrink:0; overflow:hidden; }
.avatar img, .modal-avatar img, .member-card .avatar img{ width:100%; height:100%; object-fit:cover; display:block; border-radius:50%; }

#appLoading{
  position:fixed; inset:0; z-index: 100;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap: 30px;
  background: var(--bg);
}
#appError{
  position:fixed; inset:0; display:flex; align-items:center; justify-content:center;
  background: var(--bg); color: var(--danger); z-index:101; padding:24px; text-align:center; font-size:14px;
}
.member-name{ font-size:14.5px; font-weight:600; color:var(--ink); flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rank-badge{ margin-left:auto; flex-shrink:0; font-size:10.5px; letter-spacing:1.5px; text-transform:uppercase; font-weight:700;
  padding: 3px 9px; border-radius:20px; border:1px solid var(--silver-3); color:var(--silver-1); white-space:nowrap; }

.task-add{ display:flex; gap:8px; margin-bottom:14px; }
.task-add input{ flex:1; padding:10px 12px; background:#0a1522; border:1px solid var(--line); border-radius:6px;
  color:var(--ink); font-family:'Rajdhani',sans-serif; font-size:14.5px; }
.task-add button{ padding:0 18px; border:none; border-radius:6px; background: linear-gradient(120deg, var(--silver-3), var(--silver-2));
  color:#071322; font-weight:700; letter-spacing:1px; cursor:pointer; font-family:'Rajdhani',sans-serif; }

.task-row{ display:flex; align-items:center; gap:12px; padding:11px 10px; border-radius:8px; border-bottom:1px solid var(--line); }
.task-row:last-child{ border-bottom:none; }
.task-check{ width:20px; height:20px; border-radius:5px; border:1.5px solid var(--silver-3); flex-shrink:0; cursor:pointer;
  display:flex; align-items:center; justify-content:center; font-size:13px; color:var(--silver-1); }
.task-check.done{ background: var(--silver-2); color:#071322; border-color: var(--silver-2); }
.task-main{ flex:1; min-width:0; }
.task-title{ font-size:14.5px; font-weight:500; color:var(--ink); overflow-wrap:break-word; word-break:break-word; }
.task-title.done{ text-decoration: line-through; color: var(--ink-dim); }
.task-meta{ font-size:11px; color:var(--ink-dim); margin-top:2px; letter-spacing:0.5px; }
.task-del{ background:none; border:none; color:var(--ink-dim); cursor:pointer; font-size:16px; padding:4px 6px; }
.task-del:hover{ color: var(--danger); }

.empty{ padding: 20px 8px; text-align:center; color:var(--ink-dim); font-size:13px; letter-spacing:0.5px; }

/* ===================== APP LAYOUT (sidebar) ===================== */
.app-shell{ display:flex; min-height:100vh; max-width:100%; overflow-x:hidden; }

.sidebar{ width: 240px; flex-shrink:0; background: var(--panel); border-right:1px solid var(--line);
  display:flex; flex-direction:column; position:sticky; top:0; height:100vh; }
.sidebar-brand{ position:relative; display:flex; flex-direction:column; align-items:center; text-align:center; gap:10px; padding: 26px 16px 20px; border-bottom:1px solid var(--line); }
.sidebar-brand img{ width:56px; height:56px; }
.sidebar-brand span{ font-size:13px; letter-spacing:2.5px; font-weight:700; color:var(--silver-1); }

.sidebar-me{ padding: 16px; border-bottom:1px solid var(--line); display:flex; align-items:center; gap:10px; }
.sidebar-me .avatar{ width:40px; height:40px; font-size:14px; }
.sidebar-me .who{ min-width:0; }
.sidebar-me .who .name{ font-size:13.5px; font-weight:600; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sidebar-me .who .meta{ font-size:10.5px; color:var(--ink-dim); letter-spacing:1px; margin-top:2px; }

.sidebar-nav{ flex:1; padding: 10px; display:flex; flex-direction:column; gap:4px; overflow-y:auto; }
.nav-btn{ display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:8px; border:none;
  background:transparent; color:var(--ink-dim); font-family:'Rajdhani',sans-serif; font-weight:600; font-size:14px;
  letter-spacing:0.5px; cursor:pointer; text-align:left; }
.nav-btn:hover{ background: var(--panel-2); color: var(--ink); }
.nav-btn.active{ background: var(--panel-2); color: var(--silver-1); border-left:2px solid var(--silver-2); }
.nav-icon{ font-size:15px; line-height:1; }
.mobile-profile-logout{ display:none; }

.nav-group-label{
  font-size:9.5px; letter-spacing:2px; color: var(--ink-dim); text-transform:uppercase;
  padding:12px 12px 4px; font-weight:700;
}
.nav-group-label:first-child{ padding-top:2px; }

.sidebar .logout-btn{ margin: 10px; }

.subnav{
  display:flex; gap:8px; margin-bottom:20px; flex-wrap:wrap;
  border-bottom:1px solid var(--line); padding-bottom:14px;
}
.subnav-btn{
  padding:8px 16px; border-radius:20px; border:1px solid var(--line); background: var(--panel);
  color:var(--ink-dim); font-family:'Rajdhani',sans-serif; font-weight:600; font-size:13px; cursor:pointer;
}
.subnav-btn.active{ background: var(--panel-2); color: var(--silver-1); border-color: var(--silver-2); }

.main-area{ flex:1; min-width:0; padding: 28px 30px 60px; max-width: 980px; }
.view{ display:none; }
.view.active{ display:block; }

.section-title{ font-size:14px; letter-spacing:3px; color:var(--silver-1); font-weight:700; margin-bottom:6px; }
.section-sub{ font-size:12.5px; color:var(--ink-dim); line-height:1.6; margin-bottom:18px; max-width:560px; }

.guide-list{ display:flex; flex-direction:column; gap:14px; }
.guide-item{ display:flex; gap:14px; background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:16px 18px; }
.guide-num{ flex-shrink:0; width:28px; height:28px; border-radius:50%; background:var(--panel-2); border:1px solid var(--silver-3);
  display:flex; align-items:center; justify-content:center; font-family:'Cinzel Decorative',serif; font-weight:700; font-size:13px; color:var(--silver-1); }
.guide-title{ font-size:14.5px; font-weight:700; color:var(--ink); margin-bottom:4px; }
.guide-text{ font-size:13px; color:var(--ink-dim); line-height:1.6; }

/* Sınıf Tablosu — Classroom of the Elite tarzı "sınıf puanı tableti" ekranı */
.class-table-tablet{
  position:relative;
  border-radius:16px;
  padding:28px 26px 24px;
  overflow:hidden;
  background:
    radial-gradient(ellipse at 25% 15%, rgba(130,165,225,0.16), transparent 55%),
    linear-gradient(160deg, #202b40 0%, #131a29 45%, #171f30 75%, #0c1119 100%);
  border:1px solid rgba(150,180,220,0.28);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.07), inset 0 0 40px rgba(0,0,0,0.35), 0 18px 44px rgba(0,0,0,0.55);
}
.class-table-crest{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:230px; height:230px; pointer-events:none; z-index:1;
  opacity:0; /* -crest-url JS tarafından ayarlanana kadar gizli tutulur;
    aksi halde mask-image geçersiz olduğundan maskesiz düz mavi bir kare
    (bug) görünürdü. Görünürlük JS'te crest.style.opacity ile açılır. */
  background-color:#6ec3ff;
  -webkit-mask-image: var(--crest-url, none);
  mask-image: var(--crest-url, none);
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-position:center; mask-position:center;
  -webkit-mask-size:contain; mask-size:contain;
  filter: url(#crestOutline) drop-shadow(0 0 8px rgba(110,195,255,0.6)) drop-shadow(0 0 16px rgba(110,195,255,0.35));
  transition: opacity 0.5s ease;
}
.class-table-crest.loaded{ opacity:0.7; }
.class-table-heading{
  position:relative; z-index:2; display:inline-block;
  font-family:'Cinzel Decorative', serif; font-weight:700; font-size:12.5px; letter-spacing:3.5px;
  color:#e4eaf2; background: linear-gradient(120deg, #3d4d6b, #29344a);
  border:1px solid rgba(170,195,230,0.35); border-radius:5px;
  padding:7px 18px; margin-bottom:18px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.12);
}
.class-table-list{ position:relative; z-index:2; }
.class-table-row{
  display:flex; align-items:center; gap:14px; padding:13px 4px;
  border-bottom:1px solid rgba(255,255,255,0.07); font-family:'Rajdhani',sans-serif;
}
.class-table-row:last-child{ border-bottom:none; }
.class-table-bar{ width:5px; height:26px; border-radius:3px; flex-shrink:0; }
.bar-A{ background:#e8cc3f; box-shadow:0 0 9px rgba(232,204,63,0.65); }
.bar-B{ background:#4aa0e8; box-shadow:0 0 9px rgba(74,160,232,0.65); }
.bar-C{ background:#e05fce; box-shadow:0 0 9px rgba(224,95,206,0.65); }
.bar-D{ background:#4fe0a3; box-shadow:0 0 9px rgba(79,224,163,0.65); }
.class-table-name{ flex:1; min-width:0; font-size:15px; font-weight:600; letter-spacing:0.5px; color:#e4eaf2;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.class-table-points-wrap{ display:flex; align-items:baseline; gap:5px; flex-shrink:0; }
.class-table-points-num{ font-family:'Cinzel Decorative', serif; font-weight:700; font-size:clamp(20px,4.2vw,30px);
  color:#fff; text-shadow:0 0 14px rgba(200,220,255,0.35); font-variant-numeric:tabular-nums; }
.class-table-points-pt{ font-size:11.5px; color:rgba(223,225,228,0.55); letter-spacing:0.5px; }

.class-risk-badge{
  flex-shrink:0; font-size:9.5px; letter-spacing:1px; font-weight:700; text-transform:uppercase;
  padding:3px 8px; border-radius:20px; white-space:nowrap; font-family:'Rajdhani',sans-serif;
}
.class-risk-badge.warn{ color:#e8b84a; border:1px solid rgba(232,184,74,0.5); background:rgba(232,184,74,0.08); }
.class-risk-badge.danger{ color:#e06b6b; border:1px solid rgba(224,107,107,0.55); background:rgba(224,107,107,0.1);
  animation: riskPulse 1.8s ease-in-out infinite; }
@keyframes riskPulse{ 0%,100%{ box-shadow:0 0 0 rgba(224,107,107,0); } 50%{ box-shadow:0 0 10px rgba(224,107,107,0.45); } }
.class-penalty-btn{
  margin-top:14px; width:100%; padding:9px; border-radius:6px; border:1px dashed rgba(224,107,107,0.5);
  background:transparent; color:#e06b6b; font-family:'Rajdhani',sans-serif; font-weight:700; font-size:11.5px;
  letter-spacing:1.5px; text-transform:uppercase; cursor:pointer;
}
.class-penalty-btn:hover{ background:rgba(224,107,107,0.08); }

@media (max-width:600px){
  .class-table-crest{ width:160px; height:160px; }
  .class-table-crest.loaded{ opacity:0.45; }
  .class-table-tablet{ padding:22px 18px 18px; }
}

.grade-scale-row{
  display:flex; align-items:center; justify-content:space-between; padding:9px 4px;
  border-bottom:1px solid var(--line); font-size:13px; color:var(--ink);
}
.grade-scale-row:last-child{ border-bottom:none; }
.grade-badge{
  font-family:'Cinzel Decorative', serif; font-weight:700; font-size:13px; color:var(--silver-1);
  background: var(--panel-2); border:1px solid var(--silver-3); border-radius:7px; padding:3px 12px; min-width:34px; text-align:center;
}

/* class tabs */
.class-tabs{ display:flex; gap:8px; margin-bottom:18px; }
.class-tab{ padding:9px 20px; border-radius:8px; border:1px solid var(--line); background: var(--panel);
  color:var(--ink-dim); font-family:'Cinzel Decorative',serif; font-weight:700; font-size:14px; cursor:pointer; }
.class-tab .n{ font-family:'Rajdhani',sans-serif; font-weight:500; font-size:10.5px; color:var(--ink-dim); margin-left:6px; }
.class-tab.active{ background: var(--panel-2); color: var(--silver-1); border-color: var(--silver-2); }

.member-grid{ display:grid; grid-template-columns: repeat(auto-fill, minmax(150px,1fr)); gap:10px; }
.member-card{ background: var(--panel); border:1px solid var(--line); border-radius:10px; padding:14px 10px;
  text-align:center; cursor:pointer; transition: border-color .15s; }
.member-card:hover{ border-color: var(--silver-2); }
.member-card .avatar{ width:48px; height:48px; margin: 0 auto 8px; font-size:16px; }
.member-card .avatar img{ width:100%; height:100%; border-radius:50%; object-fit:cover; }
.member-card .nm{ font-size:13.5px; font-weight:600; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.member-card .rk{ font-size:10px; color:var(--ink-dim); letter-spacing:1px; margin-top:2px; text-transform:uppercase; }

/* points + shop */
.points-card{
  position:relative;
  max-width: 420px;
  aspect-ratio: 1.65 / 1;
  margin: 0 auto;
  border-radius: 18px;
  padding: 22px 26px 20px;
  background:
    repeating-linear-gradient(115deg, rgba(255,255,255,0.025) 0px, rgba(255,255,255,0.025) 1px, transparent 1px, transparent 3px),
    linear-gradient(150deg, #1c3350 0%, #0f2038 45%, #17304d 70%, #0a1626 100%);
  border: 1px solid rgba(255,255,255,0.09);
  box-shadow: 0 16px 40px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.06);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}
.pc-texture{
  position:absolute; inset:0;
  background-image:
    linear-gradient(45deg, transparent 48%, rgba(255,255,255,0.03) 49%, rgba(255,255,255,0.03) 51%, transparent 52%);
  background-size: 34px 34px;
  opacity:0.5;
  pointer-events:none;
}
.pc-top{ display:flex; align-items:flex-start; justify-content:space-between; position:relative; z-index:1; }
.pc-title{
  font-family:'Cinzel Decorative', serif; font-weight:700; font-size:15px; letter-spacing:4px;
  background: linear-gradient(120deg, var(--silver-2), var(--silver-1) 45%, var(--silver-3));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.pc-crest{ width:34px; height:34px; opacity:0.9; }

.pc-chip{
  width:44px; height:34px; border-radius:6px; margin-top:6px;
  background: linear-gradient(135deg, #d8dadd, #9a9ea3 40%, #cfd2d5 70%, #8b8f93);
  position:relative; z-index:1;
  box-shadow: 0 2px 6px rgba(0,0,0,0.4);
}
.pc-chip-lines{ position:absolute; inset:5px; border:1px solid rgba(0,0,0,0.25); border-radius:3px;
  background:
    linear-gradient(rgba(0,0,0,0.2) 1px, transparent 1px) 0 0/100% 33%,
    linear-gradient(90deg, rgba(0,0,0,0.2) 1px, transparent 1px) 0 0/50% 100%;
}

.pc-number{ position:relative; z-index:1; display:flex; align-items:baseline; gap:8px; }
.pc-number span:first-child{
  font-family:'Cinzel Decorative', serif; font-weight:700; font-size: clamp(28px, 7vw, 40px);
  background: linear-gradient(120deg, var(--silver-1), #fff 30%, var(--silver-2) 60%, var(--silver-1));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  text-shadow: 0 1px 0 rgba(255,255,255,0.15);
}
.pc-pt{ font-size:16px; color:var(--ink-dim); font-weight:600; letter-spacing:1px; }

.pc-bottom{ display:flex; gap:10px; position:relative; z-index:1; }
.pc-holder{ flex:1; }
.pc-holder-lbl{ font-size:9px; letter-spacing:1.5px; text-transform:uppercase; color:rgba(223,225,228,0.4); margin-bottom:2px; }
.pc-holder-name{ font-family:'Cinzel Decorative', serif; font-size:14px; letter-spacing:1.5px; color:var(--silver-1); text-transform:uppercase; }
.pc-strip{ flex:1; height:14px; border-radius:4px; border:1px solid rgba(255,255,255,0.12); background:rgba(255,255,255,0.02); }
.pc-strip.short{ flex:0.6; }

.points-hero{ background: var(--panel); border:1px solid var(--line); border-radius:12px; padding:24px; text-align:center; margin-bottom:20px; }
.points-hero .num{ font-family:'Cinzel Decorative',serif; font-size:38px; color:var(--silver-1); font-weight:700; }
.points-hero .lbl{ font-size:11px; letter-spacing:3px; color:var(--ink-dim); text-transform:uppercase; margin-top:4px; }
.claim-btn{ margin-top:16px; }
.claim-note{ margin-top:10px; font-size:12px; color:var(--ink-dim); }

.grid-2{ display:grid; grid-template-columns: 1fr 1fr; gap:16px; }
@media (max-width: 700px){ .grid-2{ grid-template-columns:1fr; } }

.shop-item{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px 12px; padding:14px; border:1px solid var(--line); border-radius:10px; margin-bottom:10px; background:#0a1522; max-width:100%; min-width:0; }
.shop-item .info{ min-width:0; flex:1 1 180px; }
.shop-item .t, .shop-item .d{ overflow-wrap:break-word; word-break:break-word; min-width:0; }
.shop-item .info .t{ font-size:14px; font-weight:600; color:var(--ink); }
.shop-item .info .d{ font-size:11.5px; color:var(--ink-dim); margin-top:2px; }
.shop-item button{ padding:8px 14px; border:none; border-radius:6px; background: linear-gradient(120deg, var(--silver-3), var(--silver-2));
  color:#071322; font-weight:700; letter-spacing:1px; cursor:pointer; font-family:'Rajdhani',sans-serif; font-size:12.5px; white-space:nowrap; }
.shop-item button:disabled{ opacity:0.4; cursor:not-allowed; }
.exam-participant-list{ max-height:140px; overflow-y:auto; overflow-x:hidden; }
.exam-participant-list label{ overflow-wrap:break-word; word-break:break-word; min-width:0; }

/* Sınav kartları — CotE tablet ekranı hissi */
.exam-card{
  position:relative; margin-bottom:14px; padding:18px 20px; border-radius:12px;
  background: linear-gradient(160deg, #16283f 0%, #0c1c2e 55%, #071320 100%);
  border:1px solid rgba(140,195,240,0.25);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 10px 26px rgba(0,0,0,0.4);
}
.exam-card:last-child{ margin-bottom:0; }
.exam-card-head{ display:flex; justify-content:space-between; align-items:flex-start; gap:12px; margin-bottom:8px; }
.exam-card-title{ font-family:'Cinzel Decorative', serif; font-weight:700; font-size:16px; color:var(--silver-1); letter-spacing:0.5px; }
.exam-deadline{
  font-size:11px; color:#ffd75e; white-space:nowrap; flex-shrink:0;
  background:rgba(255,215,94,0.08); border:1px solid rgba(255,215,94,0.3); border-radius:12px; padding:3px 10px;
}
.exam-deadline.expired{ color:var(--danger); background:rgba(201,107,107,0.08); border-color:rgba(201,107,107,0.3); }
.exam-card-desc{ font-size:13px; color:var(--ink-dim); line-height:1.55; margin-bottom:10px; white-space:pre-wrap; }
.exam-card-meta{ display:flex; flex-wrap:wrap; gap:5px 14px; font-size:11.5px; color:var(--ink-dim); margin-bottom:10px; }
.exam-tag-danger{ color:var(--danger); }
.exam-card-actions{ display:flex; justify-content:flex-end; }
.exam-card-closed{ opacity:0.85; }
.exam-admin-block{ margin-top:12px; padding-top:12px; border-top:1px solid var(--line); }
.exam-admin-lbl{ font-size:11px; color:var(--ink-dim); margin-bottom:6px; text-transform:uppercase; letter-spacing:1px; }
.exam-winner-row{ display:flex; align-items:center; gap:6px; font-size:13px; margin-bottom:4px; color:var(--ink); }

.class-picker{ display:flex; gap:8px; margin-top:10px; flex-wrap:wrap; }
.class-picker button{ padding:7px 16px; }

/* profile modal */
.modal-backdrop{ position:fixed; inset:0; background: rgba(0,0,0,0.6); display:none; align-items:center; justify-content:center; z-index:60; padding:20px; }
.modal-backdrop.show{ display:flex; }
.modal-card{ width:100%; max-width:380px; background: var(--panel); border:1px solid var(--line); border-radius:12px; padding:28px; text-align:center; position:relative; overflow-x:hidden; overflow-y:auto; max-height:88vh; }
.modal-close{ position:absolute; top:12px; right:14px; background:none; border:none; color:var(--ink-dim); font-size:20px; cursor:pointer; }
.modal-avatar{ width:88px; height:88px; border-radius:50%; margin: 0 auto 14px; background: var(--panel-2); border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center; font-size:28px; font-weight:700; color:var(--silver-1); overflow:hidden; }
.modal-avatar img{ width:100%; height:100%; object-fit:cover; }
.modal-name{ font-size:17px; font-weight:700; color:var(--ink); }
.modal-tags{ display:flex; gap:6px; justify-content:center; margin-top:8px; flex-wrap:wrap; }
.modal-tags span{ font-size:10.5px; letter-spacing:1px; text-transform:uppercase; padding:3px 10px; border-radius:20px; border:1px solid var(--silver-3); color:var(--silver-1); }

.stat-row{ text-align:left; margin-top:14px; }
.stat-row .lbl{ display:flex; justify-content:space-between; font-size:11.5px; letter-spacing:1px; color:var(--ink-dim); margin-bottom:4px; text-transform:uppercase; }
.stat-bar{ height:6px; background:#0a1522; border-radius:4px; overflow:hidden; border:1px solid var(--line); }
.stat-bar .fill{ height:100%; background: linear-gradient(90deg, var(--silver-3), var(--silver-1)); }

/* ===================== GENEL YETENEK KARTI (Over All Ability tarzı) ===================== */
.oaa-card{
  position:relative; max-width:290px; margin:0 auto; overflow:hidden;
  border-radius:18px; padding:20px 18px 22px;
  background: linear-gradient(165deg, #cdeaff 0%, #7fb2dc 16%, #3d6b96 42%, #1c3a56 70%, #0a1826 100%);
  border:2px solid rgba(210,235,255,0.6);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.15) inset, 0 18px 42px rgba(0,0,0,0.55);
}
.oaa-card-bg{
  position:absolute; inset:0; pointer-events:none; opacity:0.16; z-index:0;
  background-image:
    repeating-linear-gradient(0deg, rgba(255,255,255,0.16) 0px, transparent 1px, transparent 22px),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.12) 0px, transparent 1px, transparent 22px);
}

.oaa-topline{ position:relative; z-index:1; text-align:center; margin-bottom:14px; }
.oaa-title{
  font-family:'Rajdhani', sans-serif; font-weight:700; font-size:20px; letter-spacing:2.5px;
  color:#eef8ff; text-transform:uppercase; line-height:1.1;
  text-shadow: 0 0 8px rgba(140,210,255,0.85), 0 2px 0 rgba(6,20,35,0.6);
}
.oaa-subtitle{
  font-size:8px; letter-spacing:1.5px; color:rgba(230,246,255,0.8); text-transform:uppercase;
  margin-top:5px; line-height:1.5;
}

.oaa-photo{
  position:relative; z-index:1; width:100%; aspect-ratio:4/3; margin:0 auto 12px;
  border-radius:9px; overflow:hidden;
  background: linear-gradient(160deg, #12385c, #071523);
  border:1.5px solid rgba(160,215,255,0.55);
  box-shadow: inset 0 0 20px rgba(90,169,242,0.3), 0 6px 16px rgba(0,0,0,0.4);
  display:flex; align-items:center; justify-content:center; font-weight:700; font-size:22px; color:#bfe0ff;
}
.oaa-photo img{ width:100%; height:100%; object-fit:cover; }
.oaa-photo-corner{ position:absolute; width:14px; height:14px; border-color:#a5e2ff; z-index:2; }
.oaa-photo-corner.tl{ top:6px; left:6px; border-top:2px solid; border-left:2px solid; }
.oaa-photo-corner.tr{ top:6px; right:6px; border-top:2px solid; border-right:2px solid; }
.oaa-photo-corner.bl{ bottom:6px; left:6px; border-bottom:2px solid; border-left:2px solid; }
.oaa-photo-corner.br{ bottom:6px; right:6px; border-bottom:2px solid; border-right:2px solid; }

.oaa-id{
  position:relative; z-index:1;
  background: linear-gradient(120deg, rgba(18,55,90,0.8), rgba(8,28,48,0.88));
  border:1px solid rgba(160,215,255,0.4); border-radius:7px; padding:9px 15px 11px; margin-bottom:14px;
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
}
.oaa-id-top{ display:flex; align-items:baseline; gap:7px; }
.oaa-id-lbl{ font-size:8.5px; letter-spacing:1.5px; color:#a7d8ff; text-transform:uppercase; }
.oaa-id-class{ font-family:'Cinzel Decorative', serif; font-weight:700; font-size:14px; color:#fff; }
.oaa-id-name{ font-family:'Cinzel Decorative', serif; font-size:17px; letter-spacing:1px; color:#fff; margin-top:3px; overflow-wrap:break-word; word-break:break-word; }
.oaa-id-rank{ font-size:9.5px; letter-spacing:2px; color:#a7d8ff; margin-top:3px; text-transform:uppercase; }

.oaa-stats{ position:relative; z-index:1; width:100%; max-width:236px; aspect-ratio:236/150; margin:0 auto; }
.oaa-stat{
  position:absolute; display:flex; align-items:center; gap:6px;
  background: rgba(8,26,46,0.6); border:1px solid rgba(150,210,255,0.4); border-radius:6px;
  padding:4px 6px; box-shadow:0 2px 8px rgba(0,0,0,0.35); max-width:47%;
}
.oaa-stat-lbl{
  writing-mode: vertical-rl; text-orientation:mixed; transform:rotate(180deg);
  font-size:7px; letter-spacing:1px; color:#a7d8ff; text-transform:uppercase; flex-shrink:0;
}
.oaa-stat-num{
  font-size:12px; font-weight:700; color:#eaf6ff; background:#2c72b5; border-radius:3px;
  padding:2px 5px; flex-shrink:0;
}
.oaa-stat-grade{
  font-family:'Cinzel Decorative', serif; font-weight:700; font-size:14px; color:#0a1420; line-height:1;
  background:#eaf4ff; border-radius:3px; padding:3px 6px; flex-shrink:0;
}
.oaa-stat-0{ top:0; left:0; }
.oaa-stat-1{ top:0; right:0; }
.oaa-stat-2{ bottom:0; left:0; }
.oaa-stat-3{ bottom:0; right:0; }

.oaa-ring{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:74px; height:74px; z-index:2;
}
.oaa-ring-arc{
  position:absolute; inset:-7px; border-radius:50%;
  background: conic-gradient(from -55deg, transparent 0deg, #f4dd6e 25deg, #fff2b0 190deg, transparent 215deg, transparent 360deg);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 5px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 5px));
  filter: drop-shadow(0 0 7px rgba(255,225,120,0.65));
}
.oaa-ring-inner{
  position:relative; width:100%; height:100%; border-radius:50%;
  background: radial-gradient(circle at 35% 30%, #2c5580, #08182a 75%);
  box-shadow: inset 0 0 14px rgba(0,0,0,0.6), 0 0 16px rgba(90,169,242,0.3);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
}
.oaa-ring-lbl{ font-size:7px; letter-spacing:1px; color:#a7d8ff; margin-bottom:1px; text-transform:uppercase; }
.oaa-ring-grade{
  font-family:'Cinzel Decorative', serif; font-weight:700; font-size:27px; line-height:1;
  color:#ffd75e; text-shadow:0 0 10px rgba(255,215,94,0.75);
}

/* avatar upload */
.avatar-upload{ margin-top:16px; }
.avatar-upload label{ display:inline-block; padding:8px 16px; border:1px solid var(--line); border-radius:6px;
  color:var(--ink-dim); font-size:12px; letter-spacing:1px; cursor:pointer; }
.avatar-upload label:hover{ border-color: var(--silver-2); color:var(--silver-1); }
.avatar-upload input{ display:none; }

@media (max-width: 760px){
  .app-shell{ flex-direction:column; }

  .subnav{
    position:fixed; left:0; right:0; bottom: calc(66px + env(safe-area-inset-bottom)); z-index:35;
    background: rgba(13,14,16,0.97); backdrop-filter: blur(10px);
    margin:0; gap:6px; padding:8px 10px; border-top:1px solid var(--line); border-bottom:none;
    justify-content:center; flex-wrap:wrap;
  }
  .subnav-btn{ padding:6px 10px; font-size:11.5px; flex-shrink:0; white-space:nowrap; }

  .sidebar{
    width:100%; height:auto; position:sticky; top:0; z-index:20;
    flex-direction:column; flex-wrap:nowrap;
    background: rgba(16,17,19,0.97);
    /* backdrop-filter kasten kaldırıldı: içindeki position:fixed .sidebar-nav
       (alt menü) için yeni bir konumlama referansı oluşturuyor, bu yüzden alt
       menü ekranın altına değil bu sticky üst çubuğun konumuna sabitleniyordu. */
  }
  .sidebar-brand{ flex-direction:row; padding:12px 14px; gap:10px; border-bottom:none; }
  .sidebar-brand img{ width:32px; height:32px; }
  .sidebar-brand span{ font-size:12px; }

  .sidebar-me{ display:none; }

  /* Alt sabit menü — yatay kaydırma YOK, kaç düğme varsa (4 veya admin için 5)
     satıra eşit genişlikte dağılır; sabit 4'lü grid'de 5. düğme (admin) tek
     başına yeni satıra düşüp boş hizalanıyordu — bu yüzden esnek (flex) yapıya
     çevrildi. */
  .sidebar-nav{
    position:fixed; left:0; right:0; bottom:0; z-index:40;
    display:flex; gap:2px;
    background: rgba(13,14,16,0.98); backdrop-filter: blur(10px);
    border-top:1px solid var(--line);
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
    overflow:visible; max-height:none;
  }
  .nav-group-label{ display:none; }
  .nav-btn{
    flex:1 1 0; min-width:0;
    flex-direction:column; align-items:center; justify-content:center; gap:2px;
    padding:6px 2px; font-size:9.5px; text-align:center; white-space:normal; line-height:1.1;
    border-radius:8px;
  }
  .nav-btn.active{ border-left:none; box-shadow: inset 0 0 0 1px var(--silver-3); }
  .nav-icon{ font-size:17px; }
  .mobile-profile-logout{ display:block; }

  .sidebar .logout-btn{ display:none; }

  .main-area{ max-width:100%; padding: 16px 14px calc(200px + env(safe-area-inset-bottom)); }

  /* mobilde ağır animasyonlar sadeleştirildi — sadece hızlı bir belirme var */
  .sweep::after{ display:none; }
  .pc-title{ animation:none; background-position:0 center; }
  .brand h1{ animation:none; background-position:0 center; }
  .section-title{ font-size:12.5px; letter-spacing:2px; }

  .member-grid{ grid-template-columns: repeat(auto-fill, minmax(110px,1fr)); gap:8px; }
  .member-card{ padding:10px 6px; }
  .member-card .avatar{ width:38px; height:38px; }

  .class-tabs{ display:grid; grid-template-columns: repeat(4, 1fr); gap:6px; overflow-x:visible; width:100%; }
  .class-tab{ flex-shrink:0; min-width:0; padding:8px 2px; font-size:11px; text-align:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .class-tab .n{ display:block; margin-left:0; margin-top:2px; font-size:9px; }

  .points-card{ max-width:260px; aspect-ratio:1.5/1; padding:12px 14px; margin:0 auto; }
  .pc-title{ font-size:10px; letter-spacing:2px; }
  .pc-crest{ width:20px; height:20px; }
  .pc-chip{ width:28px; height:22px; }
  .pc-number span:first-child{ font-size:22px; }
  .pc-pt{ font-size:12px; }
  .pc-holder-name{ font-size:10px; }
  .pc-holder-lbl{ font-size:7px; }

  .grid-2{ grid-template-columns:1fr; gap:12px; }

  .modal-card{ padding:22px 18px; max-width: calc(100vw - 40px); }
  .modal-avatar{ width:72px; height:72px; }

  .oaa-card{ max-width:250px; padding:16px 14px 18px; }
  .oaa-ring{ width:64px; height:64px; }
  .oaa-ring-grade{ font-size:23px; }

  .top-brand span{ display:none; }
  header.top{ padding:12px 16px; }

  .track-card{ flex-direction:column; text-align:center; max-width:100%; }
  .track-controls{ width:100%; }
}

@media (max-width: 420px){
  .member-grid{ grid-template-columns: repeat(auto-fill, minmax(92px,1fr)); }
}

@media (prefers-reduced-motion: reduce){ *{ animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; } }

/* trailer music player */
.player{ display:flex; flex-direction:column; align-items:center; gap:10px; }
.cover-wrap{
  position:relative; width:130px; height:130px; border-radius:50%; overflow:hidden;
  border:2px solid var(--silver-3); box-shadow: 0 0 24px rgba(200,205,210,0.15);
}
.cover-img{ width:100%; height:100%; object-fit:cover; animation: spin 7s linear infinite; animation-play-state: paused; }
.cover-img.playing{ animation-play-state: running; }
@keyframes spin{ to{ transform: rotate(360deg); } }
.play-btn{
  position:absolute; inset:0; margin:auto; width:42px; height:42px; border-radius:50%;
  background: rgba(0,0,0,0.55); border:1px solid rgba(255,255,255,0.35); color:#fff;
  cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:16px;
  backdrop-filter: blur(2px);
}
.player-label{ font-size:10px; letter-spacing:2.5px; color: var(--ink-dim); text-transform:uppercase; }

/* track card (Şarkılarımız) */
.track-card{
  display:flex; gap:16px; align-items:center; background: var(--panel); border:1px solid var(--line);
  border-radius:14px; padding:16px; max-width:480px;
}
.track-art{ width:76px; height:76px; border-radius:10px; overflow:hidden; flex-shrink:0; box-shadow:0 4px 14px rgba(0,0,0,0.4); }
.track-art img{ width:100%; height:100%; object-fit:cover; }
.track-info{ flex:1; min-width:0; }
.track-title{ font-weight:700; font-size:14.5px; color:var(--ink); overflow-wrap:break-word; }
.track-artist{ font-size:11.5px; color:var(--ink-dim); margin-top:2px; margin-bottom:10px; }
.track-controls{ display:flex; align-items:center; gap:10px; }
.track-play-btn{
  width:34px; height:34px; border-radius:50%; flex-shrink:0;
  background: linear-gradient(120deg, var(--silver-3), var(--silver-2)); border:none; color:#071322;
  display:flex; align-items:center; justify-content:center; cursor:pointer; font-size:13px;
}
.track-progress{ flex:1; height:5px; background:#0a1522; border-radius:3px; overflow:hidden; border:1px solid var(--line); cursor:pointer; min-width:0; }
.track-progress-fill{ height:100%; width:0%; background: linear-gradient(90deg, var(--silver-3), var(--silver-1)); }
.track-time{ font-size:10.5px; color:var(--ink-dim); flex-shrink:0; min-width:34px; text-align:right; }

/* roster wall (admin only) — screens-behind-silhouette hissi */
.roster-wall{
  background: radial-gradient(ellipse at 50% -10%, rgba(110,180,240,0.07), transparent 60%), #050d17;
  border:1px solid var(--line); border-radius:14px; padding:18px;
}
.roster-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(140px,1fr)); gap:12px; }
.roster-card{
  background: linear-gradient(160deg, #16283f, #081522 80%);
  border:1px solid rgba(180,190,200,0.18); border-radius:10px; padding:14px 10px; text-align:center;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.02);
}
.roster-avatar{
  position:relative; width:64px; height:64px; margin:0 auto 8px; border-radius:8px; overflow:hidden;
  background-color: var(--panel-2); background-size:150%; background-position:center; background-repeat:no-repeat;
  border:1px solid rgba(180,190,200,0.4);
  box-shadow: 0 0 14px rgba(200,210,220,0.25), inset 0 0 10px rgba(140,170,200,0.15);
  display:flex; align-items:center; justify-content:center; font-weight:700; color:var(--silver-1);
}
.roster-avatar img{ width:76%; height:76%; object-fit:cover; border-radius:6px; opacity:0.94; box-shadow:0 2px 8px rgba(0,0,0,0.5); }
.roster-name{ font-size:13px; font-weight:700; color:var(--ink); overflow-wrap:break-word; }
.roster-meta{ font-size:10px; color:var(--ink-dim); margin-top:3px; letter-spacing:0.5px; }
.roster-stats{ display:flex; justify-content:center; flex-wrap:wrap; gap:3px; margin-top:8px; }
.roster-stats span{ font-size:8.5px; padding:2px 5px; border:1px solid rgba(180,190,200,0.25); border-radius:5px; color:var(--silver-1); }
/* ===================== KART SİSTEMİ (referans görseldeki tarot kart tasarımı) ===================== */
.card-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(200px,1fr)); gap:22px; justify-items:center; }

.tarot-card{ display:flex; flex-direction:column; align-items:center; width:100%; max-width:230px; }
.tarot-card.tarot-used{ opacity:0.4; filter:grayscale(0.7); }

.tarot-frame{
  position:relative; width:100%; aspect-ratio:3/4.6; overflow:hidden;
  background: radial-gradient(ellipse at 50% 42%, #4a72b8 0%, #2a4a86 38%, #142a54 68%, #0a1836 100%);
  border:2px solid rgba(255,255,255,0.9);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.35), inset 0 0 30px rgba(0,0,0,0.35),
    0 0 22px rgba(70,120,200,0.35);
  padding:12px 10px;
}
/* altın ışın çizgileri — merkezden yayılan ince altın hatlar */
.tarot-frame::before{
  content:''; position:absolute; inset:0;
  background: repeating-conic-gradient(from 0deg at 50% 46%,
    rgba(255,221,140,0.55) 0deg 0.6deg, transparent 0.6deg 9deg);
  mix-blend-mode: screen; opacity:0.55; pointer-events:none;
}
.tarot-frame::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background: radial-gradient(circle at 50% 46%, transparent 30%, rgba(6,14,30,0.55) 100%);
}

.tarot-roman{ position:absolute; top:10px; font-family:'Cinzel Decorative', serif; font-size:11px; color:#fff; opacity:0.85; letter-spacing:1px; z-index:2; text-shadow:0 0 6px rgba(255,255,255,0.5); }
.tarot-roman.left{ left:12px; }
.tarot-roman.right{ right:12px; }

.tarot-corner{ position:absolute; width:14px; height:14px; border-color:rgba(255,255,255,0.9); z-index:2; }
.tc-tl{ top:7px; left:7px; border-top:1.5px solid; border-left:1.5px solid; }
.tc-tr{ top:7px; right:7px; border-top:1.5px solid; border-right:1.5px solid; }
.tc-bl{ bottom:7px; left:7px; border-bottom:1.5px solid; border-left:1.5px solid; }
.tc-br{ bottom:7px; right:7px; border-bottom:1.5px solid; border-right:1.5px solid; }

.tarot-inner{
  position:relative; z-index:2; height:100%; display:flex; flex-direction:column; align-items:center;
  justify-content:center; text-align:center; gap:8px; padding:18px 10px;
}

/* kırmızı-altın mühür — referans karttaki merkez sembolün orijinal yorumu */
.tarot-emblem{ width:58px; height:70px; position:relative; filter:drop-shadow(0 0 10px rgba(255,210,120,0.5)); }
.tarot-emblem svg{ width:100%; height:100%; }

.tarot-name{ font-weight:700; font-size:13px; letter-spacing:1.5px; color:#fff; text-transform:uppercase; text-shadow:0 0 8px rgba(255,255,255,0.4); }
.tarot-rule{ width:30px; height:1px; background: linear-gradient(90deg, transparent, rgba(255,221,140,0.8), transparent); }
.tarot-desc{ font-size:10.5px; color:rgba(220,230,245,0.75); line-height:1.45; }
.tarot-kanji{ position:absolute; bottom:8px; left:0; right:0; text-align:center; font-family:'Cinzel Decorative', serif; font-size:11px; letter-spacing:6px; color:rgba(255,255,255,0.55); z-index:2; }

.card-actions-row{ display:flex; gap:6px; width:100%; margin-top:10px; }
.card-actions-row .btn{ flex:1; padding:8px 6px; font-size:12px; }
.card-send-row{ display:flex; flex-direction:column; gap:6px; width:100%; margin-top:8px; }
.card-send-row input{
  width:100%; padding:10px 12px; background:#0d1b2c; border:1px solid var(--silver-3);
  border-radius:6px; color:#ffffff; font-family:'Rajdhani',sans-serif; font-size:15px; font-weight:600;
}
.card-send-row input::placeholder{ color:rgba(220,230,245,0.45); }
.card-send-row input:focus{ outline:none; border-color:var(--silver-1); }
.card-send-row .btn{ width:100%; padding:9px 10px; font-size:13px; white-space:nowrap; }

/* ===================== BİLDİRİMLER ===================== */
.notif-bell{
  position:absolute; top:14px; right:14px; background:none; border:none; color:var(--ink-dim);
  font-size:17px; cursor:pointer; padding:6px;
}
.notif-badge{
  position:absolute; top:2px; right:2px; min-width:16px; height:16px; padding:0 3px; border-radius:8px;
  background:#d64550; color:#fff; font-size:9.5px; font-weight:700; display:flex; align-items:center; justify-content:center;
}
.notif-panel{
  position:absolute; top:66px; left:14px; right:14px; z-index:60; max-height:340px; overflow-y:auto;
  background:#0c1826; border:1px solid var(--silver-3); border-radius:6px; box-shadow:0 10px 30px rgba(0,0,0,0.5);
}
.notif-panel-head{ padding:10px 14px; font-size:11px; letter-spacing:2px; color:var(--ink-dim); border-bottom:1px solid var(--line); }
.notif-item{ padding:10px 14px; border-bottom:1px solid var(--line); }
.notif-item:last-child{ border-bottom:none; }
.notif-item.unread{ background:rgba(90,160,230,0.08); }
.notif-msg{ font-size:13px; color:var(--ink); line-height:1.4; }
.notif-time{ font-size:10.5px; color:var(--ink-dim); margin-top:3px; }

/* ===================== SINAV SONUÇ PANOSU ===================== */
.result-board{
  border:1px solid var(--silver-3); border-radius:3px; overflow:hidden; margin-top:10px;
  background: linear-gradient(180deg, #0d1a2b, #081522);
}
.result-board-head{
  padding:8px 14px; font-size:11px; letter-spacing:3px;
  color:var(--ink-dim); border-bottom:1px solid var(--line); background:rgba(0,0,0,0.2);
}
.result-row{
  display:flex; align-items:center; gap:12px; padding:9px 14px; border-bottom:1px solid var(--line);
  font-family:'Rajdhani',sans-serif;
}
.result-row:last-child{ border-bottom:none; }
.result-rank{ font-size:13px; color:var(--silver-2); width:22px; flex-shrink:0; }
.result-row.rank-1 .result-rank{ color:#ffd75e; }
.result-name{ flex:1; font-weight:600; color:var(--ink); }
.result-score{ font-weight:700; color:var(--silver-1); font-size:14px; }

/* ===================== DUYURULAR — BELGE GÖRÜNÜMÜ ===================== */
.doc-sheet{
  background: linear-gradient(180deg, #0f1c2c, #0a1522);
  border:1px solid var(--silver-3); border-radius:3px; padding:16px 18px; margin-bottom:12px; position:relative;
}
.doc-sheet::before{
  content:'DUYURU'; position:absolute; top:10px; right:34px;
  font-size:9px; letter-spacing:2px; color: var(--silver-3);
}
.doc-sheet-title{ font-family:'Cinzel Decorative', serif; font-size:14px; letter-spacing:1px; color:var(--silver-1); margin-bottom:8px; padding-right:70px; }
.doc-sheet-body{ font-size:13px; color:var(--ink-dim); line-height:1.6; border-top:1px dashed var(--line); padding-top:8px; }
.doc-sheet-meta{ font-size:10.5px; color:var(--silver-3); margin-top:10px; letter-spacing:0.5px; }

/* ===================== GİRİŞ EKRANI — EKİP GÖRSELİ (anime key-visual tarzı) ===================== */
.login-hero{
  position:fixed; inset:0; z-index:0;
  background: url('ekiptasarim.jpg') center 28%/cover no-repeat, var(--bg);
}
.login-hero::before{
  content:''; position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(6,11,19,0.15) 0%, rgba(6,11,19,0.55) 45%, var(--bg) 88%);
}
.login-hero::after{
  content:''; position:absolute; inset:0;
  background: repeating-linear-gradient(180deg, rgba(140,195,240,0.02) 0px, rgba(140,195,240,0.02) 1px, transparent 1px, transparent 3px);
}
.login-hero-title{
  position:absolute; top:8%; left:0; right:0; text-align:center; padding:0 20px;
}
.login-hero-eyebrow{
  font-family:'Cinzel Decorative', serif; font-weight:700; font-size:clamp(20px, 5vw, 30px);
  letter-spacing:6px; color:#fff; text-shadow:0 2px 18px rgba(0,0,0,0.85), 0 0 30px rgba(90,160,230,0.4);
}
.login-hero-sub{
  margin-top:8px; font-size:12px; letter-spacing:4px; color:rgba(255,255,255,0.75);
  text-shadow:0 2px 10px rgba(0,0,0,0.8);
}

@media (max-width: 640px){
  .login-hero{ background-position: center 22%; }
  .login-hero-title{ top:6%; }
}

.forgot-hint{ margin-top:12px; text-align:center; font-size:11.5px; color:var(--ink-dim); line-height:1.5; }

.reset-pw-icon{
  position:absolute; top:8px; right:8px; width:22px; height:22px; border-radius:50%;
  background:rgba(0,0,0,0.25); border:1px solid transparent; color:rgba(255,255,255,0.35);
  font-size:11px; display:flex; align-items:center; justify-content:center; cursor:pointer;
  opacity:0.35; transition:opacity 0.15s, border-color 0.15s;
}
.reset-pw-icon:hover{ opacity:1; border-color:var(--silver-3); }
/* ======================================================================
   GÖRSEL & ANİMASYON YÜKSELTMESİ — kartlara (tarot/.tarot-*) dokunulmadı
   ====================================================================== */

/* ---------- Zemin: hafif yıldız tozu / parıldayan parçacıklar ---------- */
#loader::before, #appLoading::before, .login-hero::before{
  content:''; position:absolute; inset:0; pointer-events:none; z-index:0;
  background-image:
    radial-gradient(1.5px 1.5px at 12% 22%, rgba(191,227,255,0.55), transparent 60%),
    radial-gradient(1.5px 1.5px at 82% 18%, rgba(191,227,255,0.4), transparent 60%),
    radial-gradient(1px 1px at 34% 68%, rgba(191,227,255,0.5), transparent 60%),
    radial-gradient(1.5px 1.5px at 66% 78%, rgba(191,227,255,0.35), transparent 60%),
    radial-gradient(1px 1px at 92% 52%, rgba(191,227,255,0.45), transparent 60%),
    radial-gradient(1px 1px at 8% 82%, rgba(191,227,255,0.4), transparent 60%),
    radial-gradient(1.5px 1.5px at 50% 8%, rgba(191,227,255,0.4), transparent 60%);
  animation: dustTwinkle 5s ease-in-out infinite;
}
.login-hero::before{ z-index:1; }
@keyframes dustTwinkle{ 0%,100%{ opacity:0.55; } 50%{ opacity:1; } }

/* ---------- Yükleme ekranı: derinlik + nefes alan aura ---------- */
#loader, #appLoading{ position: relative; overflow:hidden; }
#loader::after, #appLoading::after{
  content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
  background: radial-gradient(circle at 50% 42%, rgba(90,160,230,0.16), transparent 55%);
  animation: auraBreathe 4s ease-in-out infinite;
}
@keyframes auraBreathe{ 0%,100%{ opacity:0.6; transform:scale(1); } 50%{ opacity:1; transform:scale(1.08); } }

.crest-wrap{ z-index:1; }
.ring{ box-shadow: 0 0 0 5px rgba(255,255,255,0.03), inset 0 0 12px rgba(255,255,255,0.05), 0 0 26px rgba(110,180,240,0.18); }
.crest-wrap::before{
  content:''; position:absolute; inset:-16px; border-radius:50%;
  border:1px dashed rgba(150,195,240,0.22);
  animation: spin 22s linear infinite reverse;
}
.crest-img{ filter: drop-shadow(0 0 22px rgba(200,205,210,0.10)) drop-shadow(0 0 40px rgba(110,180,240,0.12)); }

.brand h1{ background-size: 260% auto; }
.progress-fill{ box-shadow: 0 0 10px rgba(191,227,255,0.6); }

#loader.done, #appLoading.done{ opacity:0; filter: blur(6px); transition: opacity 0.7s ease, filter 0.7s ease; pointer-events:none; }

/* ---------- Giriş ekranı: sinematik arka plan ---------- */
.login-hero{
  animation: kenBurns 26s ease-in-out infinite alternate;
  transform-origin: 50% 30%;
}
@keyframes kenBurns{ 0%{ transform: scale(1); } 100%{ transform: scale(1.09); } }
.login-hero-eyebrow{
  display:inline-block;
  animation: heroTitleIn 1.4s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes heroTitleIn{
  0%{ opacity:0; letter-spacing: 14px; transform: translateY(-6px); }
  100%{ opacity:1; letter-spacing: 6px; transform: translateY(0); }
}
.login-hero-sub{ animation: fadeUp 1.1s ease 0.5s both; }

/* Giriş kartı: cam efekti + parlayan çerçeve girişi */
.auth-card{
  position:relative; z-index:1;
  background: rgba(13,26,43,0.72);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  animation: cardIn 0.8s cubic-bezier(.2,.8,.2,1) both;
  box-shadow: 0 24px 60px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.06);
}
@keyframes cardIn{ 0%{ opacity:0; transform: translateY(18px) scale(0.97); } 100%{ opacity:1; transform:translateY(0) scale(1); } }
.auth-crest{ animation: crestIn 1s cubic-bezier(.2,.8,.2,1) 0.1s both, breathe 5s ease-in-out 1.1s infinite; }
@keyframes breathe{ 0%,100%{ filter:drop-shadow(0 0 0 rgba(191,227,255,0)); } 50%{ filter:drop-shadow(0 0 10px rgba(191,227,255,0.45)); } }

.tabs{ position:relative; background: rgba(255,255,255,0.02); }
.tab{ transition: color 0.25s ease; position:relative; z-index:1; }
.tab.active{ background: transparent; }
.tabs::before{
  content:''; position:absolute; top:4px; bottom:4px; left:4px; width: calc(50% - 6px);
  background: var(--panel-2); border-radius:10px; z-index:0;
  box-shadow: 0 0 14px rgba(90,160,230,0.25);
  transition: transform 0.32s cubic-bezier(.2,.8,.2,1);
}
.tabs:has(.tab[data-tab="register"].active)::before{ transform: translateX(100%); }

/* ---------- Butonlar: parlama süpürmesi ---------- */
.btn{ position:relative; overflow:hidden; transition: filter 0.2s, transform 0.15s; }
.btn:hover{ transform: translateY(-1px); }
.btn:active{ transform: translateY(0); }
.btn::after{
  content:''; position:absolute; top:0; left:-60%; width:40%; height:100%;
  background: linear-gradient(75deg, transparent, rgba(255,255,255,0.35), transparent);
  transform: skewX(-20deg);
  transition: left 0.55s ease;
}
.btn:hover::after{ left:130%; }

/* ---------- Sidebar: canlı navigasyon ---------- */
.sidebar-brand img{ animation: breathe 5s ease-in-out infinite, crestSpinSlow 40s linear infinite; }
@keyframes crestSpinSlow{ to{ transform: rotate(360deg); } }

.nav-btn{ position:relative; transition: background 0.2s ease, color 0.2s ease, padding-left 0.2s ease; border-left:2px solid transparent; }
.nav-btn:hover{ padding-left:16px; }
.nav-btn.active{ box-shadow: inset 0 0 18px rgba(90,160,230,0.12); }
.nav-btn.active::before{
  content:''; position:absolute; left:-2px; top:8%; bottom:8%; width:2px;
  background: linear-gradient(180deg, transparent, var(--silver-1), transparent);
  animation: navGlow 2.4s ease-in-out infinite;
}
@keyframes navGlow{ 0%,100%{ opacity:0.5; } 50%{ opacity:1; } }

.subnav-btn{ transition: background 0.2s, color 0.2s, border-color 0.2s, transform 0.15s; }
.subnav-btn:hover{ transform: translateY(-1px); }

/* ---------- Sayfa/görünüm geçişleri ---------- */
.view.active{ animation: viewIn 0.45s cubic-bezier(.2,.8,.2,1) both; }
@keyframes viewIn{ 0%{ opacity:0; transform: translateY(10px); } 100%{ opacity:1; transform:translateY(0); } }

/* ---------- Paneller: derinlik + hover ---------- */
.panel, .exam-card, .doc-sheet, .points-hero, .guide-item{
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}
.panel:hover, .exam-card:hover, .doc-sheet:hover{
  transform: translateY(-2px);
  border-color: var(--silver-3);
  box-shadow: 0 14px 30px rgba(0,0,0,0.35);
}

.class-table-tablet{ animation: tabletIn 0.6s cubic-bezier(.2,.8,.2,1) both; }
@keyframes tabletIn{ 0%{ opacity:0; transform: translateY(14px); } 100%{ opacity:1; transform:translateY(0); } }
.class-table-crest{ animation: crestGlowPulse 4s ease-in-out infinite; }
@keyframes crestGlowPulse{
  0%,100%{ filter: url(#crestOutline) drop-shadow(0 0 8px rgba(110,195,255,0.5)) drop-shadow(0 0 16px rgba(110,195,255,0.28)); }
  50%{ filter: url(#crestOutline) drop-shadow(0 0 14px rgba(110,195,255,0.75)) drop-shadow(0 0 26px rgba(110,195,255,0.4)); }
}

/* ---------- Puan kartı: holografik parlama ---------- */
.points-card{ position:relative; transition: transform 0.25s ease, box-shadow 0.25s ease; }
.points-card:hover{ transform: translateY(-3px) scale(1.01); box-shadow: 0 22px 50px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.08); }
.points-card::after{
  content:''; position:absolute; inset:0; z-index:2; pointer-events:none;
  background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,0.14) 48%, transparent 60%);
  background-size: 220% 220%;
  animation: sheenSweep 5.5s ease-in-out infinite;
}
@keyframes sheenSweep{ 0%{ background-position: 120% -20%; } 55%,100%{ background-position: -20% 120%; } }

/* ---------- Modal: yumuşak açılış ---------- */
.modal-backdrop{ backdrop-filter: blur(3px); transition: opacity 0.2s ease; }
.modal-card{ animation: modalPop 0.32s cubic-bezier(.2,.8,.2,1) both; }
@keyframes modalPop{ 0%{ opacity:0; transform: scale(0.92) translateY(8px); } 100%{ opacity:1; transform:scale(1) translateY(0); } }

/* ---------- Bildirimler ---------- */
.notif-bell{ transition: color 0.2s ease, transform 0.2s ease; }
.notif-bell:hover{ color: var(--silver-1); transform: scale(1.08); }
.notif-badge{ animation: badgePulse 1.8s ease-in-out infinite; }
@keyframes badgePulse{ 0%,100%{ box-shadow: 0 0 0 0 rgba(214,69,80,0.55); } 50%{ box-shadow: 0 0 0 5px rgba(214,69,80,0); } }
.notif-panel{ animation: notifDrop 0.28s cubic-bezier(.2,.8,.2,1) both; transform-origin: top right; }
@keyframes notifDrop{ 0%{ opacity:0; transform: translateY(-8px) scaleY(0.96); } 100%{ opacity:1; transform:translateY(0) scaleY(1); } }
.notif-item.unread{ position:relative; }

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}

/* ======================================================================
   GLASSMORPHISM KATMANI — kartlara (tarot/.tarot-*) dokunulmadı
   ====================================================================== */

/* Arka planda yumuşak, yavaş süzülen ışık lekeleri — cam yüzeylerin
   gerçekten "bulanıklaştıracak" bir şeyi olsun diye */
.app-shell{ position:relative; isolation:isolate; }
.app-shell::before{
  content:''; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(560px 420px at 12% 8%, rgba(90,160,230,0.20), transparent 60%),
    radial-gradient(480px 380px at 92% 18%, rgba(150,110,230,0.14), transparent 60%),
    radial-gradient(520px 420px at 30% 92%, rgba(60,200,190,0.10), transparent 60%),
    radial-gradient(460px 360px at 85% 85%, rgba(90,160,230,0.14), transparent 60%);
  animation: blobDrift 22s ease-in-out infinite alternate;
}
@keyframes blobDrift{
  0%{ transform: translate(0,0) scale(1); }
  100%{ transform: translate(1.5%, -1.5%) scale(1.06); }
}
/* Sidebar: buzlu cam panel */
.sidebar{
  background: rgba(13,26,43,0.55);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  border-right: 1px solid rgba(140,195,240,0.14);
}
.sidebar-brand{ border-bottom-color: rgba(140,195,240,0.12); }
.sidebar-me{ border-bottom-color: rgba(140,195,240,0.12); }

/* Genel paneller / bölüm kutuları */
.panel{
  background: rgba(16,29,46,0.5);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border: 1px solid rgba(140,195,240,0.14);
  position:relative;
}
.panel::before{
  content:''; position:absolute; inset:0; pointer-events:none; border-radius:inherit;
  background: linear-gradient(160deg, rgba(255,255,255,0.05), transparent 40%);
}
.panel-head{ background: rgba(255,255,255,0.02); border-bottom:1px solid rgba(140,195,240,0.1); }

.subnav-btn{
  background: rgba(16,29,46,0.45);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.subnav-btn.active{ background: rgba(22,40,61,0.65); }

.guide-item, .doc-sheet, .points-hero{
  background: rgba(16,29,46,0.5);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-color: rgba(140,195,240,0.14);
}

.shop-item{
  background: rgba(10,21,34,0.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* Sınav & sınıf tableti kartları: koyu lacivert gradyanı koru, sadece
   hafif saydamlaştır + blur ekle ki arkadaki ışık lekeleri süzülsün */
.exam-card{
  background:
    linear-gradient(160deg, rgba(22,40,63,0.82) 0%, rgba(12,28,46,0.82) 55%, rgba(7,19,32,0.82) 100%);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.class-table-tablet{
  background:
    radial-gradient(ellipse at 25% 15%, rgba(130,165,225,0.16), transparent 55%),
    linear-gradient(160deg, rgba(32,43,64,0.85) 0%, rgba(19,26,41,0.85) 45%, rgba(23,31,48,0.85) 75%, rgba(12,17,25,0.85) 100%);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.points-card{
  background:
    repeating-linear-gradient(115deg, rgba(255,255,255,0.025) 0px, rgba(255,255,255,0.025) 1px, transparent 1px, transparent 3px),
    linear-gradient(150deg, rgba(28,51,80,0.88) 0%, rgba(15,32,56,0.88) 45%, rgba(23,48,77,0.88) 70%, rgba(10,22,38,0.88) 100%);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* Modal ve bildirim paneli: net buzlu cam */
.modal-card{
  background: rgba(13,26,43,0.68);
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  border: 1px solid rgba(140,195,240,0.16);
}
.notif-panel{
  background: rgba(13,26,43,0.72);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  border: 1px solid rgba(140,195,240,0.16);
}

/* Giriş kartını da aynı ailede biraz daha saydamlaştır */
.auth-card{
  background: rgba(13,26,43,0.58);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
  .sidebar, .panel, .guide-item, .doc-sheet, .points-hero, .shop-item,
  .modal-card, .notif-panel, .auth-card, .exam-card, .class-table-tablet, .points-card{
    background: var(--panel);
  }
}

/* ======================================================================
   ARKA PLAN — parlayan kavisli ışık halkaları + gezegen ufku (CSS ile,
   çözünürlükten bağımsız / vektörel — her ekranda net)
   ====================================================================== */
.cosmic-bg{
  position: fixed; inset: 0; z-index: 0; overflow: hidden;
  background: #000;
  pointer-events: none;
}
/* hafif yıldız tozu */
.cosmic-bg::before{
  content:''; position:absolute; inset:0;
  background-image:
    radial-gradient(1.4px 1.4px at 10% 18%, rgba(220,230,255,0.55), transparent 60%),
    radial-gradient(1.2px 1.2px at 82% 12%, rgba(220,230,255,0.4), transparent 60%),
    radial-gradient(1px 1px at 32% 8%, rgba(220,230,255,0.5), transparent 60%),
    radial-gradient(1.4px 1.4px at 68% 20%, rgba(220,230,255,0.35), transparent 60%),
    radial-gradient(1px 1px at 92% 30%, rgba(220,230,255,0.45), transparent 60%),
    radial-gradient(1px 1px at 6% 34%, rgba(220,230,255,0.4), transparent 60%);
  opacity: 0.7;
  animation: dustTwinkle 5s ease-in-out infinite;
}
.cosmic-arc{
  position: absolute; left: 50%; transform: translateX(-50%);
  border-radius: 50%; background: #000;
}
.flow-paths{ position:absolute; inset:0; overflow:hidden; opacity:0.55; }
.flow-paths svg{ width:100%; height:100%; display:block; }
.flow-path{
  stroke-dasharray: 6 10;
  animation-name: flowDash;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
@keyframes flowDash{ from{ stroke-dashoffset: 0; } to{ stroke-dashoffset: -480; } }
.cosmic-arc-upper{
  top: -46vh; width: 230vw; height: 68vh;
  box-shadow:
    0 4px 0 rgba(230,238,255,0.85),
    0 10px 26px rgba(200,215,255,0.55),
    0 26px 70px rgba(150,175,255,0.35),
    0 55px 140px rgba(110,140,230,0.20);
  animation: cosmicDrift 30s ease-in-out infinite alternate;
}
.cosmic-arc-lower{
  bottom: -42vh; width: 210vw; height: 74vh;
  background: radial-gradient(ellipse at 50% 0%, #15161f 0%, #08080d 45%, #000 75%);
  box-shadow:
    0 -4px 0 rgba(230,238,255,0.85),
    0 -10px 26px rgba(200,215,255,0.5),
    0 -26px 70px rgba(150,175,255,0.32),
    0 -55px 140px rgba(110,140,230,0.18);
  animation: cosmicDrift 30s ease-in-out infinite alternate-reverse;
}
@keyframes cosmicDrift{ 0%{ transform: translateX(-50%) scale(1); } 100%{ transform: translateX(-50%) scale(1.03); } }
.cosmic-beam{
  position: absolute; left: 50%; top: 26vh; width: 2px; height: 30vh;
  transform: translateX(-50%);
  background: linear-gradient(180deg, rgba(255,255,255,0.95), rgba(230,238,255,0.15) 60%, rgba(255,255,255,0));
  box-shadow: 0 0 22px 2px rgba(220,230,255,0.55);
  filter: blur(0.4px);
  animation: beamPulse 4s ease-in-out infinite;
}
@keyframes beamPulse{ 0%,100%{ opacity:0.75; } 50%{ opacity:1; } }
#authView{ position: relative; z-index: 1; }
#appLoading{ position: fixed; }

@media (max-width: 640px){
  .cosmic-arc-upper{ top:-30vh; height:52vh; width:280vw; }
  .cosmic-arc-lower{ bottom:-30vh; height:58vh; width:260vw; }
  .cosmic-beam{ top:20vh; height:24vh; }
}
@media (prefers-reduced-motion: reduce){
  .cosmic-arc, .cosmic-beam, .flow-path{ animation: none; }
}

/* ======================================================================
   GİRİŞ / KAYIT KARTI — YÜKSELTİLMİŞ CAM (GLASSMORPHISM) KALİTESİ
   ====================================================================== */
.auth-card{
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(160deg, rgba(28,48,74,0.30) 0%, rgba(10,19,31,0.34) 60%, rgba(8,15,25,0.40) 100%);
  border: 1px solid rgba(191,227,255,0.22);
  backdrop-filter: blur(22px) saturate(180%);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  box-shadow:
    0 30px 70px rgba(0,0,0,0.55),
    0 0 0 1px rgba(255,255,255,0.03),
    inset 0 1px 0 rgba(255,255,255,0.14),
    inset 0 0 60px rgba(90,160,230,0.08);
}
/* Üstten gelen ince cam parlaklığı */
.auth-card::before{
  content:''; position:absolute; inset:0; z-index:0; pointer-events:none; border-radius:inherit;
  background: linear-gradient(165deg, rgba(255,255,255,0.12) 0%, transparent 42%);
}
.auth-card > *{ position:relative; z-index:1; }

.auth-card h1{
  font-family: 'Dancing Script', cursive;
  font-weight: 700;
  font-size: 32px;
  letter-spacing: 0.5px;
}

.tabs{
  background: rgba(255,255,255,0.03);
  border-color: rgba(191,227,255,0.14);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.field input, .field textarea{
  background: rgba(255,255,255,0.045);
  border: 1px solid rgba(191,227,255,0.14);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.field input:focus, .field textarea:focus{
  border-color: rgba(191,227,255,0.55);
  background: rgba(255,255,255,0.07);
  box-shadow: 0 0 0 3px rgba(90,160,230,0.14);
}

@media (max-width: 640px){
  #globeCanvas{ opacity: 0.85; }
}
/* ======================================================================
   LIQUID METAL BUTTON — sıvı metal / krom düğme efekti
   (site genelindeki tüm .btn düğmelerine uygulanır)
   ====================================================================== */
.btn{
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border-radius: 14px;
  color: #eaf4ff;
  background: linear-gradient(120deg, #17395c 0%, #2c5580 40%, #3f7bb0 70%, #2c5580 100%);
  box-shadow:
    0 0 0 1px rgba(0,0,0,0.4),
    0 8px 18px rgba(10,30,55,0.4),
    inset 0 1px 0 rgba(255,255,255,0.16),
    inset 0 -2px 4px rgba(0,0,0,0.25);
  transition: box-shadow 0.2s ease, transform 0.15s ease, filter 0.2s ease, background 0.2s ease;
}
.btn::before{
  content:''; position:absolute; inset:0; z-index:0; pointer-events:none; border-radius:inherit;
  background: linear-gradient(180deg, rgba(255,255,255,0.14) 0%, rgba(255,255,255,0.02) 30%, rgba(0,0,0,0.08) 70%, rgba(0,0,0,0.18) 100%);
}
.btn > *{ position:relative; z-index:1; }
.btn:hover{
  filter: brightness(1.12);
  background: linear-gradient(120deg, #1c4468, #3f7bb0 50%, #4d8ec4 100%);
  box-shadow:
    0 0 0 1px rgba(0,0,0,0.45),
    0 10px 22px rgba(10,30,55,0.5),
    0 0 16px rgba(90,160,230,0.25),
    inset 0 1px 0 rgba(255,255,255,0.22),
    inset 0 -2px 4px rgba(0,0,0,0.28);
}
.btn:active{
  filter: brightness(0.95);
  box-shadow:
    0 0 0 1px rgba(0,0,0,0.5),
    0 3px 8px rgba(10,30,55,0.4),
    inset 0 2px 6px rgba(0,0,0,0.4);
}
.btn:disabled{
  filter: grayscale(0.5) brightness(0.7);
}
/* eski düz "sweep" parlamasını iptal et — yerini akışkan metal + ripple alıyor */
.btn::after{ content: none; }

.btn-ripple{
  position:absolute; z-index:0; border-radius:50%; pointer-events:none;
  background: radial-gradient(circle, rgba(255,255,255,0.75) 0%, rgba(255,255,255,0) 68%);
  transform: translate(-50%,-50%) scale(0);
  animation: btnRipple 0.65s ease-out forwards;
}
@keyframes btnRipple{
  0%{ transform: translate(-50%,-50%) scale(0); opacity:0.65; }
  100%{ transform: translate(-50%,-50%) scale(3.2); opacity:0; }
}
@media (prefers-reduced-motion: reduce){
  .btn{ animation:none; background-position:0 50%; }
}

/* ======================================================================
   VELOCITY ESİNLENMELİ MAVİ PARILTI DOKUNUŞU — yapı/hiyerarşi aynı,
   sadece referans tasarımdaki "spotlight glow" hissi güçlendirildi.
   ====================================================================== */
.section-title{ position:relative; display:inline-block; }
.section-title::before{
  content:''; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:220px; height:90px; z-index:-1; pointer-events:none;
  background: radial-gradient(ellipse at center, rgba(90,160,230,0.22), transparent 70%);
  filter: blur(6px);
}
.panel-head h2{ text-shadow: 0 0 14px rgba(90,160,230,0.35); }
.btn{ box-shadow:
    0 0 0 1px rgba(0,0,0,0.4),
    0 8px 18px rgba(10,30,55,0.4),
    0 0 18px rgba(79,142,196,0.22),
    inset 0 1px 0 rgba(255,255,255,0.16),
    inset 0 -2px 4px rgba(0,0,0,0.25);
}

/* ======================================================================
   GİRİŞ / KAYIT EKRANI — KAYDIRMA YOK
   Sayfa ekrana tam sığar; kart yüksekliğe göre otomatik sıkılaşır.
   ====================================================================== */
html:has(#authView), body:has(#authView){ height:100%; overflow:hidden; overscroll-behavior:none; }
#authView{
  height:100vh; height:100dvh; min-height:0;
  padding: 12px;
  overflow:hidden;
}
.auth-card{
  max-height: calc(100dvh - 24px);
  padding: clamp(16px, 3.6vh, 38px) clamp(20px, 6vw, 32px) clamp(16px, 3.2vh, 32px);
  overflow-y:auto; scrollbar-width:none; /* sadece emniyet: normalde hiç taşmaz */
}
.auth-card::-webkit-scrollbar{ display:none; }
.auth-crest{ width:clamp(40px, 7vh, 64px); height:clamp(40px, 7vh, 64px); margin-bottom: clamp(6px, 1.6vh, 16px); }
.auth-card h1{ font-size: clamp(24px, 4.4vh, 32px); line-height:1.1; }
.tabs{ margin: clamp(12px, 2.6vh, 26px) 0 clamp(10px, 2.2vh, 22px); }
.tab{ padding: clamp(7px, 1.2vh, 10px); }
.field{ margin-bottom: clamp(7px, 1.5vh, 14px); }
.field label{ margin-bottom: clamp(3px, 0.6vh, 6px); }
.field input{ padding: clamp(9px, 1.5vh, 13px) 16px; }
.btn{ padding: clamp(10px, 1.5vh, 13px); }
.msg{ margin-top:8px; min-height:14px; }
.username-warning{ font-size:10.5px; line-height:1.3; margin-top:4px; }

@media (max-height: 700px){
  .auth-crest{ display:none; }
  .username-warning{ display:none; }
}

/* ======================================================================
   MARINE FOAM — tüm sitenin sabit arka planı
   (21st.dev "Marine Foam" gradient bileşeninin saf CSS karşılığı;
   sitede React olmadığı için bileşen CSS'e çevrildi, bağımlılık yok.)
   --foam-scrim: koyu örtü. Site yazıları açık renk olduğu için gradyanın
   açık nane ucu okunmaz olmasın diye eklendi. 0 yaparsan saf gradyan görünür.
   ====================================================================== */
:root{ --foam-scrim: 0.6; }
html::before{
  content:''; position:fixed; inset:-0.8vmin; z-index:-1; pointer-events:none;
  filter: blur(0.4vmin);
  background-color:#0F5C63;
  background-image:
    url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.060'/></svg>"),
    linear-gradient(145deg, #0F5C63 0%, #3F9EA8 33%, #A9E2D9 67%, #EAF7F2 100%);
  background-size:120px 120px, auto;
  background-blend-mode: overlay, normal;
}
html::after{
  content:''; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background: rgba(2,16,20,var(--foam-scrim));
}

/* Giriş ekranı: eski siyah zemin + gezegen yayları kaldırıldı, foam görünür.
   (akan çizgiler, yıldız tozu ve ışın korundu) */
.cosmic-bg{ background: transparent; }
.cosmic-arc{ display:none; }

/* ============================================================
   MOBİL ALT MENÜ KONUM DÜZELTMESİ
   .sidebar üzerinde (buzlu cam temasından gelen) backdrop-filter,
   içindeki position:fixed .sidebar-nav (alt menü) için yeni bir
   konumlama referansı oluşturuyor; bu yüzden mobilde alt menü
   ekranın altına değil, sticky üst çubuğun (.sidebar) konumuna
   sabitleniyordu. Dosyada .sidebar birden fazla yerde tanımlı
   olduğundan, kaynak sırasından bağımsız kesin çözüm için burada
   !important ile kapatılıyor.
   ============================================================ */
@media (max-width: 760px){
  .sidebar{ backdrop-filter:none !important; -webkit-backdrop-filter:none !important; }
}