/* ============================================================
   YouPrep Studio — Panel/Admin ortak arayüz stilleri
   panel.html (öğrenci/öğretmen/veli) ve admin.html bunu paylaşır.
   ============================================================ */

:root{
  --ink:#16233c;
  --ink-soft:#5b6472;
  --ink-faint:#8b93a1;
  --bg:#ffffff;
  --bg-alt:#f5f6f8;
  --navy:#16233c;
  --navy-soft:#22314f;
  --accent:#f0a83c;
  --accent-dark:#d9902a;
  --accent-soft:#fdf1de;
  --line:#e6e7ea;
  --green:#237a45;
  --green-soft:#e4f4ea;
  --red:#c94a4a;
  --red-soft:#fdeaea;
  --radius:28px;
  --radius-sm:18px;
}
*{box-sizing:border-box;margin:0;padding:0;}
body{
  font-family:'Segoe UI',-apple-system,BlinkMacSystemFont,sans-serif;
  color:var(--ink);background:var(--bg-alt);line-height:1.55;font-size:14.5px;
}
a{text-decoration:none;color:inherit;}
button{font-family:inherit;}

/* ---------------- Giriş ekranı ---------------- */
.auth{
  min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;
  background:radial-gradient(900px 500px at 20% 0%, #1d2c4a, var(--navy));
}

/* Oturum zaten açıkken giriş formunu hiç göstermeyip "açılıyor" göster (bkz. panel/admin.html) */
.auth-wait{display:none;flex-direction:column;align-items:center;gap:16px;color:#fff;font-weight:600;font-size:15px;}
.auth-wait i{width:38px;height:38px;border-radius:50%;border:3px solid rgba(255,255,255,.25);border-top-color:var(--accent);animation:authspin .8s linear infinite;}
@keyframes authspin{to{transform:rotate(360deg)}}
.oturum-kontrol .auth-card,.oturum-kontrol .auth-back{display:none !important;}
.oturum-kontrol .auth-wait{display:flex;}
.auth-card{
  width:100%;max-width:440px;background:#fff;border-radius:32px;padding:34px;
  box-shadow:0 30px 70px -30px rgba(0,0,0,.5);
  animation:pop .45s cubic-bezier(.2,.8,.3,1) both;
}
@keyframes pop{from{opacity:0;transform:translateY(18px) scale(.98);}to{opacity:1;transform:none;}}
.auth-card .logo{height:46px;margin-bottom:22px;}
.auth-card h1{font-size:22px;margin-bottom:4px;}
.auth-card .sub{font-size:14px;color:var(--ink-soft);margin-bottom:22px;}

/* Geniş ekranda 2 sütun (marka + rol solda, form sağda); dar ekranda tek sütun */
@media (min-width:720px){
  .auth-card{max-width:720px;padding:40px;}
  .auth-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 40px;align-items:stretch;}
  .auth-head{border-right:1px solid var(--line);padding-right:40px;}
  .auth-head .role-opts{margin-bottom:0;}
  .auth-head .sub{margin-bottom:20px;}
  .auth-form{display:flex;flex-direction:column;justify-content:center;}
  .auth-form .field:first-child{margin-top:0;}
}
.role-opts{display:grid;gap:11px;margin-bottom:18px;}
.role-opt{
  display:flex;align-items:center;gap:13px;padding:15px 17px;cursor:pointer;
  border:1px solid var(--line);border-radius:22px;
  transition:border-color .2s ease,background .2s ease,transform .2s ease,box-shadow .2s ease;
}
.role-opt:hover{border-color:var(--accent);transform:translateX(3px);box-shadow:0 8px 20px -14px rgba(22,35,60,.25);}
.role-opt.active{border-color:var(--accent);background:var(--accent-soft);}
.role-opt .ic{
  width:40px;height:40px;border-radius:16px;background:var(--navy);color:#fff;flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;transition:background .2s ease,color .2s ease,transform .2s ease;
}
.role-opt:hover .ic{transform:rotate(-4deg) scale(1.05);}
.role-opt.active .ic{background:var(--accent);color:var(--navy);}
.role-opt strong{display:block;font-size:14.5px;}
.role-opt small{font-size:12.5px;color:var(--ink-soft);}
.auth-note{font-size:12.5px;color:var(--ink-faint);text-align:center;margin-top:14px;}
.auth-error{
  font-size:13px;color:var(--red);background:var(--red-soft);border-radius:16px;
  padding:10px 14px;margin-bottom:12px;display:none;
}
.auth-error.show{display:block;}

/* ---------------- Karşılama (Hello) ekranı ---------------- */
.hello{
  position:fixed;inset:0;z-index:900;background:#fff;
  display:none;align-items:center;justify-content:center;
  padding:24px;text-align:center;
}
.hello.show{display:flex;}
.hello h1{
  font-size:clamp(30px,6vw,58px);font-weight:600;color:var(--navy);letter-spacing:-.01em;
}
.hello h1 .letter{
  display:inline-block;
  filter:blur(10px);opacity:0;
  /* hareket yok (kaydırma hissi vermesin), yalnızca yerinde netleşme */
  will-change:filter,opacity;
  transform:translateZ(0);           /* GPU katmanı — titremeyi önler */
}
.hello h1 .letter.sp{width:.32em;}
.hello.animate h1 .letter{
  /* tek parça, ara kırılma noktası olmayan yumuşak geçiş */
  animation:helloLetter 1.6s cubic-bezier(.33,0,.2,1) forwards;
  animation-delay:calc(var(--i) * 110ms);
}
@keyframes helloLetter{
  from{filter:blur(10px);opacity:0;}
  to{filter:blur(0);opacity:1;}
}
.hello.leave{
  transition:opacity .9s ease;
  opacity:0;
}
.auth-back{display:block;text-align:center;font-size:13px;color:var(--ink-soft);margin-top:16px;}
.auth-back:hover{color:var(--ink);}

/* ---------------- Uygulama kabuğu ---------------- */
.shell{display:grid;grid-template-columns:236px 1fr;min-height:100vh;}
.shell.hidden{display:none;}

.sidebar{
  background:var(--navy);color:#fff;padding:22px 16px;
  display:flex;flex-direction:column;gap:6px;position:sticky;top:0;height:100vh;
}
.sidebar .brand{
  display:flex;align-items:center;gap:9px;font-weight:700;font-size:13px;color:#b9c1d1;
  padding:0 8px 18px;border-bottom:1px solid #2b3a5a;margin-bottom:14px;text-decoration:none;
}
.sidebar .brand-mark{
  display:inline-flex;align-items:center;transition:transform .15s ease,opacity .15s ease;
}
.sidebar .brand:hover .brand-mark{transform:translateY(-1px);opacity:.85;}
.sidebar .brand-mark img{height:30px;display:block;}
.sidebar .brand-label{color:#b9c1d1;}

/* ---------------- Çoklu seçim listesi (checklist) ---------------- */
.checklist{
  max-height:220px;overflow-y:auto;border:1px solid var(--line);border-radius:18px;
  padding:6px 5px;display:flex;flex-direction:column;gap:2px;
}
.checklist .check{padding:8px 10px;border-radius:14px;transition:background .15s ease;}
.checklist .check:hover{background:var(--bg-alt);}
.field-hint{font-size:12.5px;color:var(--ink-faint);margin-top:-8px;margin-bottom:13px;}
.nav-item{
  display:flex;align-items:center;gap:11px;padding:12px 14px;border-radius:18px;
  font-size:14.5px;color:#b9c1d1;cursor:pointer;transition:background .18s ease,color .18s ease,transform .18s ease;
}
.nav-item:hover{background:var(--navy-soft);color:#fff;transform:translateX(2px);}
.nav-item.active{background:var(--accent);color:var(--navy);font-weight:600;}
.nav-item svg{flex:0 0 auto;}
.sidebar-foot{margin-top:auto;padding-top:14px;border-top:1px solid #2b3a5a;}
.sidebar-foot a{display:block;font-size:13px;color:#8d97ab;padding:10px 12px;border-radius:14px;transition:background .18s ease,color .18s ease;}
.sidebar-foot a:hover{background:var(--navy-soft);color:#fff;}

.main{display:flex;flex-direction:column;min-width:0;}
.topbar{
  background:#fff;border-bottom:1px solid var(--line);padding:0 26px;height:64px;
  display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:20;
}
.topbar .who{display:flex;align-items:center;gap:11px;}
.topbar .avatar{
  width:40px;height:40px;border-radius:50%;background:var(--accent);color:var(--navy);
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:15px;
}
.topbar .who strong{display:block;font-size:14.5px;line-height:1.25;}
.topbar .who span{font-size:12.5px;color:var(--ink-soft);}
.content{padding:26px;flex:1;}
.page-head{margin-bottom:20px;}
.page-head h2{font-size:22px;margin-bottom:2px;}
.page-head p{font-size:14px;color:var(--ink-soft);}

/* ---------------- Kartlar & istatistik ---------------- */
.card{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:22px;margin-bottom:16px;transition:box-shadow .25s ease,border-color .25s ease;
}
.card:hover{box-shadow:0 14px 32px -22px rgba(22,35,60,.18);border-color:#dcdfe6;}
.card > h3{
  font-size:15px;margin-bottom:14px;display:flex;align-items:center;gap:8px;
  justify-content:space-between;
}
.card > h3 .title{display:flex;align-items:center;gap:8px;}
.card > h3 .title::before{content:'';width:4px;height:15px;border-radius:2px;background:var(--accent);}
.cols{display:grid;grid-template-columns:1.35fr 1fr;gap:16px;align-items:start;}
.cols-2{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start;}

.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:20px;}
.stat{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:19px 20px;
  transition:transform .25s cubic-bezier(.2,.8,.3,1),box-shadow .25s ease,border-color .25s ease;
}
.stat:hover{transform:translateY(-3px);box-shadow:0 16px 30px -20px rgba(22,35,60,.22);border-color:#dcdfe6;}
.stat b{display:block;font-size:26px;line-height:1.2;}
.stat span{font-size:12.5px;color:var(--ink-soft);}
.stat.accent b{color:var(--accent-dark);}
.stat.green b{color:var(--green);}
.stat.red b{color:var(--red);}

/* ---------------- Tablolar ---------------- */
.table-wrap{overflow-x:auto;}
table.table{width:100%;border-collapse:collapse;font-size:13.5px;}
table.table th{
  text-align:left;font-size:12px;text-transform:uppercase;letter-spacing:.04em;
  color:var(--ink-faint);font-weight:700;padding:0 12px 11px;white-space:nowrap;
}
table.table td{
  padding:14px 12px;border-top:1px solid var(--line);vertical-align:middle;
}
table.table tbody tr{transition:background .15s ease;}
table.table tbody tr:hover{background:#fafbfc;}
table.table td .sub{display:block;font-size:12px;color:var(--ink-soft);margin-top:2px;}
table.table td.actions{text-align:right;white-space:nowrap;}
.toolbar{display:flex;gap:10px;align-items:center;margin-bottom:14px;flex-wrap:wrap;}
.toolbar input[type="search"], .toolbar select{
  padding:11px 14px;border:1px solid var(--line);border-radius:16px;font-size:13.5px;
  font-family:inherit;color:var(--ink);outline:none;background:#fff;min-width:180px;
  transition:border-color .2s ease,box-shadow .2s ease;
}
.toolbar input[type="search"]:focus, .toolbar select:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft);}
.toolbar .spacer{flex:1;}

/* ---------------- Rozet / etiket ---------------- */
.chip{
  display:inline-block;font-size:12px;font-weight:600;padding:5px 12px;border-radius:999px;
  white-space:nowrap;background:#eef0f4;color:var(--navy);transition:transform .15s ease,filter .15s ease;
}
.chip.amber{background:var(--accent-soft);color:var(--accent-dark);}
.chip.green{background:var(--green-soft);color:var(--green);}
.chip.red{background:var(--red-soft);color:var(--red);}
.chip.blue{background:#e7eefd;color:#2f5fd6;}
.chip.clickable{cursor:pointer;padding:6px 14px;}
.chip.clickable:hover{filter:brightness(.96);transform:scale(1.05);}
.tag{
  font-size:10.5px;font-weight:700;padding:3px 8px;border-radius:9px;background:#eef0f4;
  color:var(--navy);margin-left:6px;text-transform:uppercase;letter-spacing:.02em;
}
.note-line{font-size:12.5px;color:var(--ink-soft);font-style:italic;margin-top:4px;display:block;}
.link{color:var(--accent-dark);text-decoration:underline;font-size:12.5px;}

/* ---------------- Butonlar ---------------- */
.btn{
  display:inline-block;padding:13px 24px;border-radius:999px;font-size:14.5px;font-weight:600;
  border:none;cursor:pointer;transition:background .2s ease,transform .15s ease,box-shadow .2s ease;
}
.btn:hover{transform:translateY(-1px);box-shadow:0 10px 22px -14px rgba(22,35,60,.35);}
.btn:active{transform:translateY(0) scale(.97);}
.btn-primary{background:var(--navy);color:#fff;}
.btn-primary:hover{background:#0e1728;}
.btn-accent{background:var(--accent);color:var(--navy);}
.btn-accent:hover{background:var(--accent-dark);}
.btn-ghost{background:#fff;border:1px solid var(--line);color:var(--ink);}
.btn-ghost:hover{border-color:var(--navy);}
.btn-sm{padding:9px 17px;font-size:13.5px;}
.btn-block{width:100%;text-align:center;}
.linkbtn{
  border:none;background:transparent;font-size:12.5px;font-weight:600;cursor:pointer;
  padding:7px 11px;border-radius:12px;color:var(--navy);transition:background .18s ease,transform .15s ease;
}
.linkbtn:hover{background:#eef0f4;transform:translateY(-1px);}
.linkbtn.danger{color:var(--red);}
.linkbtn.danger:hover{background:var(--red-soft);}

/* ---------------- Form alanları ---------------- */
.field{margin-bottom:14px;}
.field label{display:block;font-size:12.5px;font-weight:600;color:var(--ink-soft);margin-bottom:6px;}
.field input, .field select, .field textarea{
  width:100%;padding:12px 15px;border:1px solid var(--line);border-radius:16px;
  font-size:14.5px;font-family:inherit;color:var(--ink);outline:none;background:#fff;
  transition:border-color .2s ease,box-shadow .2s ease;
}
.field textarea{resize:vertical;min-height:70px;}
.field input:focus, .field select:focus, .field textarea:focus{
  border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft);
}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:11px;}
.check{
  display:flex;align-items:center;gap:10px;font-size:13.5px;color:var(--ink-soft);
  margin-bottom:14px;cursor:pointer;
}
.check input{width:18px;height:18px;accent-color:var(--accent);}

/* ---------------- Modal ---------------- */
.modal{
  position:fixed;inset:0;z-index:200;display:none;
  align-items:center;justify-content:center;padding:24px;
}
.modal.show{display:flex;}
.modal-backdrop{position:absolute;inset:0;background:rgba(12,19,33,.55);backdrop-filter:blur(3px);}
.modal-box{
  position:relative;width:100%;max-width:460px;max-height:88vh;overflow-y:auto;
  background:#fff;border-radius:28px;padding:30px;
  box-shadow:0 30px 60px -22px rgba(12,19,33,.45);
  animation:pop .35s cubic-bezier(.2,.8,.3,1) both;
}
.modal-box h3{font-size:19px;margin-bottom:16px;}
.modal-close{
  position:absolute;top:14px;right:14px;width:34px;height:34px;border-radius:50%;
  border:1px solid var(--line);background:#fff;cursor:pointer;color:var(--ink-soft);
  font-size:17px;line-height:1;transition:background .2s ease,transform .25s ease;
}
.modal-close:hover{background:var(--bg-alt);transform:rotate(90deg);}

/* ---------------- Takvim ---------------- */
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:8px;}
.cal-day{border:1px solid var(--line);border-radius:20px;padding:11px;min-height:130px;background:#fff;transition:box-shadow .2s ease;}
.cal-day:hover{box-shadow:0 10px 24px -18px rgba(22,35,60,.25);}
.cal-day h6{
  font-size:11.5px;text-transform:uppercase;color:var(--ink-faint);
  margin-bottom:9px;font-weight:700;letter-spacing:.04em;
}
.cal-item{
  font-size:11.5px;background:var(--accent-soft);color:var(--accent-dark);border-radius:13px;
  padding:7px 9px;margin-bottom:5px;line-height:1.35;transition:transform .15s ease;
}
.cal-item:hover{transform:scale(1.03);}
.cal-item b{display:block;font-weight:700;}
.cal-item.cancel{opacity:.55;text-decoration:line-through;}
.cal-item small{opacity:.8;display:block;}

/* Gezinebilir takvim (calendar.js) */
.cal-toolbar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:18px;}
.cal-nav{display:flex;gap:6px;}
.cal-title{flex:1;min-width:160px;font-size:17px;text-align:center;}
.cal-seg{display:flex;background:var(--bg-alt);border-radius:999px;padding:4px;gap:2px;}
.cal-seg button{border:none;background:transparent;border-radius:999px;padding:7px 16px;font:inherit;font-size:13px;font-weight:600;color:var(--ink-soft);cursor:pointer;transition:background .2s ease,color .2s ease;}
.cal-seg button.active{background:#fff;color:var(--ink);box-shadow:0 2px 8px -3px rgba(22,35,60,.25);}
.cal-day h6{display:flex;justify-content:space-between;align-items:baseline;}
.cal-day h6 em{font-style:normal;font-size:15px;color:var(--ink);}
.cal-day.today{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft);}
.cal-day.today h6 em{background:var(--accent);color:#fff;border-radius:999px;padding:0 8px;}
.cal-none{color:var(--ink-faint);font-size:12px;}
.cal-item.clickable,.cal-dayrow.clickable{cursor:pointer;}
.cal-month-head{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;margin-bottom:6px;}
.cal-month-head span{font-size:11.5px;text-transform:uppercase;color:var(--ink-faint);font-weight:700;letter-spacing:.04em;text-align:center;}
.cal-month{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;}
.cal-cell{border:1px solid var(--line);border-radius:16px;padding:7px;min-height:104px;background:#fff;cursor:pointer;transition:box-shadow .2s ease;min-width:0;}
.cal-cell:hover{box-shadow:0 10px 24px -18px rgba(22,35,60,.3);}
.cal-cell.other{background:var(--bg-alt);}
.cal-cell.other .cal-num{color:var(--ink-faint);}
.cal-cell.today{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft);}
.cal-num{display:inline-block;font-size:12.5px;font-weight:700;margin-bottom:4px;}
.cal-cell.today .cal-num{background:var(--accent);color:#fff;border-radius:999px;padding:0 7px;}
.cal-cell .cal-item{padding:3px 7px;margin-bottom:3px;font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.cal-cell .cal-item b{display:inline;margin-right:4px;}
.cal-more{border:none;background:none;color:var(--accent-dark);font:inherit;font-size:11px;font-weight:700;cursor:pointer;padding:2px 4px;}
.cal-daylist{display:flex;flex-direction:column;gap:10px;}
.cal-dayrow{display:grid;grid-template-columns:70px 1fr auto;gap:14px;align-items:center;border:1px solid var(--line);border-radius:20px;padding:14px 18px;background:#fff;}
.cal-dayrow.cancel{opacity:.6;}
.cal-legend{display:flex;flex-wrap:wrap;gap:6px 16px;margin:-6px 0 14px;font-size:12.5px;color:var(--ink-soft,#5b6577);}
.cal-legend i{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:6px;vertical-align:baseline;}
.cal-dayrow.cancel .cal-what strong{text-decoration:line-through;color:var(--ink-faint);}
.cal-time b{display:block;font-size:16px;}
.cal-time small{color:var(--ink-faint);}
.cal-what{display:flex;flex-direction:column;gap:2px;min-width:0;}
.cal-what .sub{color:var(--ink-soft);font-size:13px;}
.cal-body.cal-ay{overflow-x:auto;}
.cal-body.cal-ay .cal-month,.cal-body.cal-ay .cal-month-head{min-width:640px;}

/* ---------------- Diğer ---------------- */
.empty{font-size:13px;color:var(--ink-soft);padding:22px 0;text-align:center;}
.bar{height:7px;border-radius:99px;background:var(--line);overflow:hidden;margin-top:10px;}
.bar i{display:block;height:100%;border-radius:99px;background:var(--accent);}
.list-row{
  display:flex;justify-content:space-between;align-items:flex-start;gap:12px;
  padding:11px 0;border-top:1px solid var(--line);
}
.list-row:first-of-type{border-top:none;}
.list-row .sub{display:block;font-size:12px;color:var(--ink-soft);margin-top:2px;}

/* ---------------- Mobil ---------------- */
.menu-toggle{
  display:none;background:transparent;border:1px solid var(--line);border-radius:50%;
  width:42px;height:42px;cursor:pointer;align-items:center;justify-content:center;
  transition:background .18s ease,border-color .18s ease,transform .15s ease;
}
.menu-toggle:hover{background:var(--bg-alt);border-color:var(--navy);}
.menu-toggle:active{transform:scale(.92);}
@media (max-width:1000px){
  .cols, .cols-2{grid-template-columns:1fr;}
  .stats{grid-template-columns:1fr 1fr;}
  .cal-grid{grid-template-columns:repeat(7,minmax(110px,1fr));overflow-x:auto;}
}
@media (max-width:820px){
  .shell{grid-template-columns:1fr;}
  .sidebar{
    position:fixed;left:0;top:0;bottom:0;width:236px;z-index:60;height:100vh;
    transform:translateX(-100%);transition:transform .28s ease;
  }
  .sidebar.open{transform:none;}
  .menu-toggle{display:flex;}
  .content{padding:18px;}
  .topbar{padding:0 16px;}
}

/* Şifre göster/gizle (sifre-goz.js) */
.sifre-kap{position:relative;display:block;}
.sifre-kap input{width:100%;padding-right:46px !important;box-sizing:border-box;}
.sifre-goz{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:36px;height:36px;border:0;background:transparent;color:var(--ink-faint,#8a93a3);cursor:pointer;display:grid;place-items:center;border-radius:10px;}
.sifre-goz:hover{color:var(--ink,#16233c);background:var(--bg-alt,#f3f5f9);}

/* "Kaydedildi" bildirimi (db.js → DB.toast) */
.yps-toast{position:fixed;right:20px;bottom:20px;z-index:10000;max-width:min(360px,calc(100vw - 40px));padding:12px 18px;border-radius:14px;font-size:14px;font-weight:600;color:#fff;background:#1f8a54;box-shadow:0 14px 34px -14px rgba(12,19,33,.45);opacity:0;transform:translateY(12px);transition:opacity .25s ease, transform .25s ease;pointer-events:none;}
.yps-toast.show{opacity:1;transform:translateY(0);}
.yps-toast.warn{background:#b7791f;}
.yps-toast.err{background:#c0392b;}

/* Öğretmen renk noktası (takvimle aynı renk) */
.t-dot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:7px;vertical-align:1px;flex:0 0 auto;}

/* ===== Görsel detaylar ve mikro animasyonlar (2026-09-24) ===== */
::selection{background:var(--accent-soft);color:var(--navy);}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
*{scrollbar-width:thin;scrollbar-color:#cfd3db transparent;}
::-webkit-scrollbar{width:10px;height:10px;}
::-webkit-scrollbar-thumb{background:#cfd3db;border-radius:10px;border:3px solid transparent;background-clip:padding-box;}
::-webkit-scrollbar-thumb:hover{background:#b7bdc8;background-clip:padding-box;border:3px solid transparent;}

/* Sol menü: seçili öğe daha zarif — yumuşak zemin + turuncu çizgi */
.nav-item{position:relative;}
.nav-item.active{
  background:linear-gradient(90deg, rgba(240,168,60,.20), rgba(240,168,60,.06));
  color:#fff;font-weight:600;
}
.nav-item.active::before{
  content:'';position:absolute;left:-16px;top:10px;bottom:10px;width:4px;border-radius:0 4px 4px 0;background:var(--accent);
  animation:navBar .35s cubic-bezier(.2,.8,.3,1) both;
}
.nav-item.active svg{color:var(--accent);}
@keyframes navBar{from{transform:scaleY(0);}to{transform:scaleY(1);}}

/* Üst çubuk: buzlu cam */
.topbar{background:rgba(255,255,255,.82);backdrop-filter:saturate(1.6) blur(12px);-webkit-backdrop-filter:saturate(1.6) blur(12px);}
.topbar .avatar{box-shadow:0 0 0 3px #fff, 0 0 0 5px var(--accent-soft);}

/* İstatistik kartları: köşede hafif ışık, üstte ince renk şeridi */
.stat{position:relative;overflow:hidden;}
.stat::after{
  content:'';position:absolute;right:-34px;top:-34px;width:110px;height:110px;border-radius:50%;
  background:radial-gradient(circle, rgba(240,168,60,.14), transparent 68%);transition:transform .5s cubic-bezier(.2,.8,.3,1);
}
.stat.green::after{background:radial-gradient(circle, rgba(35,122,69,.12), transparent 68%);}
.stat.red::after{background:radial-gradient(circle, rgba(201,74,74,.12), transparent 68%);}
.stat:hover::after{transform:scale(1.35);}
.stat b{font-variant-numeric:tabular-nums;letter-spacing:-.01em;}

/* Kart başlığındaki turuncu çizgi üzerine gelince uzar */
.card > h3 .title::before{transition:height .3s cubic-bezier(.2,.8,.3,1);}
.card:hover > h3 .title::before{height:19px;}

/* Tablo satırı üzerine gelince solda turuncu işaret */
table.table tbody tr:hover td:first-child{box-shadow:inset 3px 0 0 var(--accent);}

/* Boş durum */
.empty{border:1.5px dashed var(--line);border-radius:18px;padding:26px 16px;margin-top:4px;background:#fcfcfd;}

/* Pencere arka planı yumuşak gelsin */
.modal.show .modal-backdrop{animation:fadeBg .25s ease both;}
@keyframes fadeBg{from{opacity:0;}to{opacity:1;}}

/* Menü değişince içerik hafifçe yukarı kayarak gelir (ui.js ekler/kaldırır) */
.content.enter > *{animation:rise .42s cubic-bezier(.2,.8,.3,1) both;}
.content.enter > *:nth-child(2){animation-delay:.05s;}
.content.enter > *:nth-child(3){animation-delay:.1s;}
.content.enter > *:nth-child(4){animation-delay:.15s;}
.content.enter > *:nth-child(n+5){animation-delay:.2s;}
@keyframes rise{from{opacity:0;transform:translateY(12px);}to{opacity:1;transform:none;}}

/* Giriş kartı: arka planda yavaş dönen yumuşak ışık */
.auth{position:relative;overflow:hidden;}
.auth::before{
  content:'';position:absolute;width:720px;height:720px;left:50%;top:50%;margin:-360px 0 0 -360px;pointer-events:none;
  background:conic-gradient(from 0deg, rgba(240,168,60,.16), transparent 30%, rgba(94,200,200,.10) 55%, transparent 80%, rgba(240,168,60,.16));
  filter:blur(60px);border-radius:50%;animation:authGlow 24s linear infinite;
}
.auth > *{position:relative;z-index:1;}
@keyframes authGlow{to{transform:rotate(360deg);}}

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

/* Sakin vurgu butonu (tablo satırlarında tekrar eden eylemler için — turuncu dolgu kadar bağırmaz) */
.btn-soft{background:var(--accent-soft);color:var(--accent-dark);}
.btn-soft:hover{background:var(--accent);color:var(--navy);}

/* Pasta grafik (admin Genel Bakış) */
.pasta-kart > h3{flex-wrap:wrap;gap:10px;}
.pasta-kart .cal-seg button{font-size:12.5px;padding:6px 12px;}
.pasta-duzen{display:grid;grid-template-columns:260px 1fr;gap:28px;align-items:center;}
.pasta-kutu{position:relative;}
.pasta-svg{width:100%;max-width:260px;display:block;overflow:visible;}
.pasta-dilim{stroke:#fff;stroke-width:2;stroke-linejoin:round;cursor:pointer;transform-origin:120px 120px;
  animation:pastaGel .6s cubic-bezier(.2,.8,.3,1) backwards;   /* backwards: bitince hover'daki kaydırmayı ezmesin */animation-delay:var(--gec);transition:transform .25s cubic-bezier(.34,1.56,.64,1), filter .2s ease;}
.pasta-dilim:hover{transform:translate(var(--dx),var(--dy));filter:brightness(1.06);}
.pasta-yuzde{fill:#fff;font-size:12px;font-weight:700;text-anchor:middle;dominant-baseline:middle;stroke:none;pointer-events:none;}
@keyframes pastaGel{from{opacity:0;transform:scale(.6) rotate(-20deg);}to{opacity:1;transform:none;}}
.pasta-ipucu{position:absolute;z-index:5;background:var(--navy);color:#fff;font-size:12.5px;font-weight:600;padding:7px 11px;border-radius:10px;white-space:nowrap;pointer-events:none;box-shadow:0 10px 24px -12px rgba(12,19,33,.5);}
.pasta-lejant .list-row > span{display:flex;align-items:center;gap:5px;}
.pasta-lejant .t-dot{margin-right:4px;}
@media (max-width:760px){ .pasta-duzen{grid-template-columns:1fr;} .pasta-svg{margin:0 auto;max-width:220px;} }

.auth-back a{transition:color .2s ease;}
.auth-back a:hover{color:var(--ink);text-decoration:underline;}

/* ---- Öğrenci listesi (öğretmen "Öğrencilerim" + admin "Öğrenci Bilgileri"): alfabetik satırlar, tıklayınca kart açılır ---- */
.ogr-liste{padding:6px 8px;}
.ogr-satir{border-bottom:1px solid var(--line);}
.ogr-satir:last-child{border-bottom:0;}
.ogr-ust{display:flex;align-items:center;gap:12px;width:100%;text-align:left;background:none;border:0;padding:13px 10px;font:inherit;cursor:pointer;border-radius:12px;color:var(--ink);transition:background .2s ease;}
.ogr-ust:hover{background:var(--bg-alt);}
.ogr-ad{font-weight:600;flex:0 1 auto;}
.ogr-ust .sub{flex:1;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.ogr-ok{color:var(--ink-soft);transition:transform .25s ease;}
.ogr-satir.acik .ogr-ok{transform:rotate(180deg);}
.ogr-satir.acik .ogr-ust{background:var(--bg-alt);}
.ogr-detay{padding:6px 14px 16px;}
.ogr-not{margin-top:12px;padding:12px 14px;background:var(--bg-alt);border-radius:14px;font-size:14px;line-height:1.5;white-space:pre-wrap;}
/* ---- Aylık rapor / hakediş ---- */
tr.tikla{cursor:pointer;} tr.tikla:hover td{background:var(--bg-alt);} tr.tikla.secili td{background:var(--accent-soft);}
.tarih-grup{display:inline-flex;flex-wrap:wrap;gap:4px;align-items:center;margin:2px 10px 2px 0;}
.tarih-pil{display:inline-block;min-width:26px;text-align:center;padding:2px 7px;border-radius:8px;background:var(--bg-alt);font-size:12.5px;font-weight:600;}
.uyari-kutu{background:var(--red-soft);color:var(--red);font-size:14px;line-height:1.5;}
/* ---- Dosya yükleme (ödev) ---- */
.dosya-liste{list-style:none;margin:8px 0 0;padding:0;font-size:13.5px;}
.dosya-liste li{padding:4px 0;}
.dosya-link{display:block;margin:2px 0;}
.modal-durum{margin:6px 0 12px;font-size:13.5px;}
.modal-durum .ilerleme{height:6px;border-radius:6px;background:var(--bg-alt);overflow:hidden;margin-bottom:6px;}
.modal-durum .ilerleme i{display:block;height:100%;width:0;background:var(--accent);transition:width .25s ease;}
.modal-durum p{margin:0;color:var(--ink-soft);}
.modal-durum.hata p{color:var(--red);font-weight:600;}
.modal-durum.tamam p{color:var(--green);font-weight:600;}

/* ---- Yanlışlıkla değişikliğe karşı (Magic Mouse): sayı kutusu okları gizli; yatay kaydırmayla "geri git" hareketi kapalı ---- */
input[type=number]{-moz-appearance:textfield;appearance:textfield;}
input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0;}
html,body{overscroll-behavior-x:none;}