@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

*{margin:0;padding:0;box-sizing:border-box}

body.login-body{
  font-family:'Inter',sans-serif;
  min-height:100vh;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:16px;
  background:#f0f2f7;
  overflow-x:hidden;
  position:relative;
  gap:1rem;
}

/* Animated gradient background */
.bg-gradient{
  position:fixed;inset:0;z-index:0;
  background:linear-gradient(135deg,#e8eaf6 0%,#f3e5f5 25%,#e3f2fd 50%,#ede7f6 75%,#e8eaf6 100%);
  background-size:400% 400%;
  animation:gradientShift 15s ease infinite;
}
@keyframes gradientShift{
  0%,100%{background-position:0% 50%}
  50%{background-position:100% 50%}
}

/* Floating orbs */
.orb{
  position:fixed;border-radius:50%;
  filter:blur(100px);opacity:.25;
  pointer-events:none;z-index:0;
}
.orb-1{width:400px;height:400px;background:#a5b4fc;top:-100px;left:-100px;animation:orbFloat1 20s ease-in-out infinite}
.orb-2{width:350px;height:350px;background:#f0abfc;bottom:-80px;right:-80px;animation:orbFloat2 25s ease-in-out infinite}
.orb-3{width:250px;height:250px;background:#67e8f9;top:50%;left:60%;animation:orbFloat3 18s ease-in-out infinite}
@keyframes orbFloat1{0%,100%{transform:translate(0,0)}50%{transform:translate(60px,40px)}}
@keyframes orbFloat2{0%,100%{transform:translate(0,0)}50%{transform:translate(-50px,-30px)}}
@keyframes orbFloat3{0%,100%{transform:translate(0,0)}50%{transform:translate(-40px,50px)}}

/* Particles */
.particles{position:fixed;inset:0;z-index:0;overflow:hidden}
.particle{
  position:absolute;width:3px;height:3px;
  background:rgba(99,102,241,.25);border-radius:50%;
  animation:particleFloat linear infinite;
}
@keyframes particleFloat{
  0%{transform:translateY(100vh) scale(0);opacity:0}
  10%{opacity:1}
  90%{opacity:1}
  100%{transform:translateY(-10vh) scale(1);opacity:0}
}

/* Login container */
.login-container{
  position:relative;z-index:10;
  width:100%;max-width:440px;
  background:rgba(255,255,255,.72);
  backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
  border:1px solid rgba(255,255,255,.85);
  border-radius:24px;
  padding:2rem;
  box-shadow:0 25px 60px rgba(99,102,241,.08),0 8px 24px rgba(0,0,0,.06),inset 0 1px 0 rgba(255,255,255,.9);
  animation:containerEntry .8s cubic-bezier(.16,1,.3,1) forwards;
  opacity:0;transform:translateY(30px);
}
@keyframes containerEntry{to{opacity:1;transform:translateY(0)}}

/* Header */
.header{text-align:center;margin-bottom:1.5rem}
.header-content{display:flex;align-items:center;justify-content:center;gap:1rem;margin-bottom:.25rem}
.header .logo{
  width:60px;height:60px;border-radius:16px;
  overflow:hidden;flex-shrink:0;
  box-shadow:0 8px 24px rgba(99,102,241,.18);
  border:2px solid rgba(255,255,255,.8);
  transition:transform .4s ease,box-shadow .4s ease;
}
.header .logo:hover{transform:scale(1.08) rotate(-3deg);box-shadow:0 12px 32px rgba(99,102,241,.3)}
.header .logo img{width:100%;height:100%;object-fit:contain;background:#fff}
.header-text{text-align:left}
.header h1{
  font-family:'Inter',sans-serif;
  color:#1e293b;font-size:1.1rem;font-weight:700;
  letter-spacing:-.02em;line-height:1.3;margin:0;
}
.header h1.highlight{
  background:linear-gradient(135deg,#6366f1,#8b5cf6,#a855f7);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;font-weight:800;font-size:1.15rem;
}
.header .subtitle{
  color:#94a3b8;font-size:.72rem;font-weight:500;
  letter-spacing:1.5px;text-transform:uppercase;margin-top:.25rem;
}

/* Tabs */
.login-tabs{
  display:flex;background:rgba(241,245,249,.8);
  border-radius:14px;padding:4px;margin-bottom:1.25rem;
  border:1px solid rgba(226,232,240,.8);
}
.login-tab{
  font-family:'Inter',sans-serif;flex:1;text-align:center;
  padding:.65rem .75rem;cursor:pointer;
  background:none;border:none;font-size:.85rem;font-weight:500;
  color:#94a3b8;border-radius:11px;
  transition:all .35s cubic-bezier(.16,1,.3,1);position:relative;z-index:2;
}
.login-tab:hover{color:#64748b}
.login-tab.active{
  color:#fff;
  background:linear-gradient(135deg,#6366f1,#8b5cf6);
  box-shadow:0 4px 16px rgba(99,102,241,.3);
}
.login-tab i{margin-right:.4rem;font-size:.85rem}

/* Form */
.login-form{display:none;animation:formFade .4s ease}
.login-form.active{display:block}
@keyframes formFade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

.form-group{margin-bottom:.9rem}
.form-group label{
  display:block;margin-bottom:.35rem;
  color:#475569;font-weight:500;font-size:.8rem;
}
.form-group label i{margin-right:.35rem;color:#6366f1;width:14px;display:inline-block}
.form-group input{
  font-family:'Inter',sans-serif;width:100%;
  padding:.7rem .9rem;
  border:1.5px solid #e2e8f0;
  border-radius:12px;font-size:.9rem;
  background:rgba(255,255,255,.9);color:#1e293b;
  transition:all .3s ease;
}
.form-group input::placeholder{color:#b0bec5}
.form-group input:focus{
  border-color:#818cf8;outline:none;
  background:#fff;
  box-shadow:0 0 0 3px rgba(99,102,241,.12),0 0 20px rgba(99,102,241,.06);
}

/* Password */
.password-container{position:relative}
.toggle-password{
  position:absolute;right:.75rem;top:50%;transform:translateY(-50%);
  cursor:pointer;color:#94a3b8;font-size:.9rem;
  transition:color .3s ease;user-select:none;
}
.toggle-password:hover{color:#6366f1}

/* Input with keyboard */
.input-with-keyboard{display:flex;align-items:center;gap:.5rem}
.input-with-keyboard input{flex:1;min-width:0}
.keyboard-icon-btn{
  flex-shrink:0;width:42px;height:42px;
  border:1.5px solid #e2e8f0;border-radius:12px;
  background:rgba(255,255,255,.9);color:#6366f1;
  font-size:1rem;cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:all .3s ease;
}
.keyboard-icon-btn:hover{
  background:rgba(99,102,241,.08);border-color:#a5b4fc;
  color:#4f46e5;box-shadow:0 4px 16px rgba(99,102,241,.15);
  transform:translateY(-2px);
}

/* Submit button */
.submit-btn{
  font-family:'Inter',sans-serif;width:100%;
  padding:.8rem 1.25rem;
  background:linear-gradient(135deg,#6366f1,#8b5cf6,#a855f7);
  color:white;border:none;border-radius:12px;cursor:pointer;
  font-size:.92rem;font-weight:600;margin-top:.25rem;margin-bottom:.75rem;
  position:relative;overflow:hidden;
  transition:all .3s ease;
  box-shadow:0 4px 20px rgba(99,102,241,.3);
}
.submit-btn::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(135deg,#818cf8,#a78bfa,#c084fc);
  opacity:0;transition:opacity .3s ease;
}
.submit-btn:hover{transform:translateY(-2px);box-shadow:0 8px 28px rgba(99,102,241,.4)}
.submit-btn:hover::before{opacity:1}
.submit-btn:active{transform:translateY(0)}
.submit-btn .btn-text,.submit-btn .loading{position:relative;z-index:1}

/* Error */
.error-message{
  font-family:'Inter',sans-serif;
  color:#dc2626;
  background:rgba(254,226,226,.7);
  border:1px solid rgba(252,165,165,.5);
  padding:.65rem 1rem;border-radius:12px;
  margin-bottom:1rem;text-align:center;
  font-weight:500;font-size:.82rem;
  backdrop-filter:blur(8px);
}
.error-message i{margin-right:.4rem;color:#ef4444}

/* Social links */
.social-links{margin-top:.5rem;padding-top:.75rem;border-top:1px solid rgba(226,232,240,.7);text-align:center}
.address-info{
  color:#94a3b8;font-size:.72rem;margin-bottom:.5rem;
  display:flex;align-items:center;justify-content:center;gap:.4rem;
}
.address-info i{color:#6366f1;font-size:.8rem}
.address-link{color:#94a3b8;text-decoration:none;transition:all .3s ease}
.address-link:hover{color:#6366f1}
.social-icons,.teacher-social-icons{display:flex;justify-content:center;gap:.5rem}
.social-link{
  display:flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:10px;
  text-decoration:none;font-size:.85rem;
  background:rgba(241,245,249,.9);color:#64748b;
  border:1px solid #e2e8f0;
  transition:all .35s ease;
}
.social-link:hover{
  background:rgba(99,102,241,.08);color:#6366f1;
  border-color:#c7d2fe;
  transform:translateY(-3px);
  box-shadow:0 8px 20px rgba(99,102,241,.15);
}
.social-link.bilgiyarisi:hover{
  background:rgba(16,185,129,.1);color:#059669;
  border-color:#6ee7b7;
  box-shadow:0 8px 20px rgba(16,185,129,.2);
}

/* Buttons container */
.buttons-container{margin-top:.75rem;display:flex;gap:.6rem;justify-content:center;flex-wrap:wrap}
.karne-link{flex:1;min-width:130px}
.karne-btn{
  display:flex;align-items:center;justify-content:center;gap:.4rem;
  padding:.65rem .85rem;
  background:linear-gradient(135deg,#22c55e,#16a34a);
  color:white;text-decoration:none;border-radius:10px;
  font-weight:600;font-size:.82rem;width:100%;
  border:1px solid rgba(34,197,94,.2);
  transition:all .3s ease;
  box-shadow:0 4px 12px rgba(34,197,94,.2);
}
.karne-btn:hover{
  transform:translateY(-2px);
  box-shadow:0 6px 20px rgba(34,197,94,.3);
  color:white;text-decoration:none;
}
.karne-btn i{font-size:.9rem}

#staff-form .submit-btn{margin-bottom:.5rem}
#staff-form .teacher-social-links{margin-top:.5rem;padding-top:.5rem}

/* Loading */
.loading{
  display:inline-block;width:20px;height:20px;
  border:3px solid rgba(255,255,255,.3);border-radius:50%;
  border-top-color:#fff;animation:spin 1s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}

/* Video Modal */
.video-modal-overlay{
  position:fixed;inset:0;background:rgba(15,23,42,.7);
  backdrop-filter:blur(8px);display:none;
  align-items:center;justify-content:center;z-index:1000;padding:20px;
}
.video-modal{
  position:relative;background:#000;border-radius:16px;
  width:100%;max-width:880px;
  box-shadow:0 20px 60px rgba(0,0,0,.4);overflow:hidden;
  border:1px solid rgba(255,255,255,.1);
}
.video-container{position:relative;width:100%;padding-top:56.25%;background:#000}
.video-container video{position:absolute;top:0;left:0;width:100%;height:100%}
.video-modal-close{
  position:absolute;top:10px;right:10px;
  background:rgba(255,255,255,.15);backdrop-filter:blur(8px);
  color:#fff;border:1px solid rgba(255,255,255,.2);
  width:36px;height:36px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;z-index:2;transition:all .3s ease;
}
.video-modal-close:hover{background:rgba(255,255,255,.3)}

/* Keyboard Modal */
.keyboard-modal{
  display:none;position:fixed;z-index:2000;inset:0;
  background:rgba(15,23,42,.4);backdrop-filter:blur(12px);
  animation:kbFadeIn .3s;
}
.keyboard-modal.active{display:flex;align-items:center;justify-content:center}
.keyboard-content{
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(20px);
  padding:1.5rem;border-radius:24px;
  box-shadow:0 25px 60px rgba(0,0,0,.12),0 8px 24px rgba(99,102,241,.08),inset 0 1px 0 rgba(255,255,255,.95);
  max-width:320px;width:90%;animation:kbSlideUp .3s;
  border:1px solid rgba(226,232,240,.9);
}
.keyboard-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem}
.keyboard-header h3{margin:0;font-family:'Inter',sans-serif;font-size:1.1rem;color:#1e293b}
.keyboard-close{
  background:rgba(241,245,249,.9);border:1px solid #e2e8f0;
  font-size:1.2rem;color:#64748b;cursor:pointer;
  width:32px;height:32px;display:flex;align-items:center;justify-content:center;
  border-radius:50%;transition:all .3s ease;
}
.keyboard-close:hover{color:#1e293b;background:rgba(99,102,241,.08);border-color:#c7d2fe}
.keyboard-display{
  width:100%;padding:.8rem;font-size:1.5rem;text-align:center;
  border:1.5px solid #e2e8f0;border-radius:14px;
  margin-bottom:1rem;font-family:'Inter',sans-serif;font-weight:600;
  background:#fff;color:#6366f1;min-height:50px;
  display:flex;align-items:center;justify-content:center;
  box-shadow:inset 0 2px 6px rgba(0,0,0,.04);
}
.keyboard-display:empty::before{content:'0';color:rgba(99,102,241,.2)}
.keyboard-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem;margin-bottom:.7rem}
.keyboard-btn{
  padding:.85rem;font-size:1.15rem;font-weight:600;
  border:1.5px solid #e2e8f0;border-radius:12px;
  background:#fff;color:#334155;
  cursor:pointer;transition:all .25s ease;font-family:'Inter',sans-serif;
}
.keyboard-btn:hover{
  background:linear-gradient(135deg,#6366f1,#8b5cf6);color:white;
  border-color:transparent;transform:translateY(-2px);
  box-shadow:0 6px 20px rgba(99,102,241,.3);
}
.keyboard-btn:active{transform:translateY(0)}
.keyboard-btn.special{background:#f8fafc;font-size:1rem;color:#64748b}
.keyboard-btn.special:hover{
  background:linear-gradient(135deg,#ef4444,#dc2626);border-color:transparent;color:white;
  box-shadow:0 6px 20px rgba(239,68,68,.3);
}
.keyboard-actions{display:grid;grid-template-columns:1fr 1fr;gap:.5rem}
.keyboard-submit{
  padding:.85rem;font-size:.9rem;font-weight:700;
  border:1.5px solid rgba(34,197,94,.3);border-radius:12px;
  background:linear-gradient(135deg,#22c55e,#16a34a);color:white;
  cursor:pointer;transition:all .3s ease;font-family:'Inter',sans-serif;
  display:flex;align-items:center;justify-content:center;gap:.3rem;
  box-shadow:0 4px 12px rgba(34,197,94,.25);
}
.keyboard-submit:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(34,197,94,.4)}
.keyboard-clear{
  padding:.85rem;font-size:.9rem;font-weight:700;
  border:1.5px solid rgba(239,68,68,.2);border-radius:12px;
  background:#fff;color:#ef4444;
  cursor:pointer;transition:all .3s ease;font-family:'Inter',sans-serif;
}
.keyboard-clear:hover{
  background:linear-gradient(135deg,#ef4444,#dc2626);
  border-color:transparent;color:white;transform:translateY(-2px);
  box-shadow:0 6px 20px rgba(239,68,68,.3);
}

@keyframes kbFadeIn{from{opacity:0}to{opacity:1}}
@keyframes kbSlideUp{from{transform:translateY(50px);opacity:0}to{transform:translateY(0);opacity:1}}

/* Mobile */
@media(max-width:480px){
  body.login-body{padding:10px}
  .login-container{padding:1.5rem 1.25rem;border-radius:20px}
  .header-content{flex-direction:column;gap:.6rem}
  .header-text{text-align:center}
  .header h1{font-size:1.1rem}
  .header h1.highlight{font-size:1.15rem}
  .header .subtitle{font-size:.7rem}
  .form-group input{padding:.75rem .85rem;font-size:.9rem}
  .submit-btn{padding:.8rem 1rem;font-size:.9rem}
  .login-tab{padding:.7rem .5rem;font-size:.82rem}
  .social-link{width:36px;height:36px;font-size:.9rem}
  .address-info{font-size:.72rem}
  .buttons-container{flex-direction:column;gap:.6rem}
  .karne-link{min-width:auto}
  .karne-btn{padding:.6rem .85rem;font-size:.8rem}
  .mezun-container{padding:.8rem 1.2rem}
  .mezun-content{gap:.5rem}
  .mezun-info{font-size:.8rem}
  .mezun-link-btn{padding:.5rem .8rem;font-size:.78rem}
  .keyboard-content{padding:1.2rem;width:95%;max-width:300px}
  .keyboard-display{font-size:1.3rem;padding:.7rem}
  .keyboard-btn{padding:.75rem;font-size:1.05rem}
  .keyboard-header h3{font-size:1rem}
  .keyboard-icon-btn{width:44px;height:44px;font-size:1.1rem}
  .orb{opacity:.15}
}
@media(max-width:360px){
  .login-container{padding:1.25rem 1rem}
  .header h1{font-size:1rem}
  .header h1.highlight{font-size:1.05rem}
  .form-group input{padding:.7rem .8rem}
  .submit-btn{padding:.75rem .9rem}
}

.mezun-container {
  position:relative;z-index:10;
  width:100%;max-width:440px;
  background:rgba(255,255,255,.72);
  backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
  border:1px solid rgba(255,255,255,.85);
  border-radius:20px;
  padding:1rem 1.5rem;
  box-shadow:0 25px 60px rgba(99,102,241,.05),0 8px 24px rgba(0,0,0,.04),inset 0 1px 0 rgba(255,255,255,.9);
  animation:containerEntry .8s cubic-bezier(.16,1,.3,1) forwards;
  box-sizing:border-box;
}
.mezun-content {
  display:flex;align-items:center;justify-content:space-between;
  gap:1rem;
}
.mezun-info {
  display:flex;align-items:center;gap:.6rem;
  color:#475569;font-weight:600;font-size:.85rem;
}
.mezun-info i {
  color:#0ea5e9;font-size:1.15rem;
}
.mezun-link-btn {
  font-family:'Inter',sans-serif;
  padding:.6rem 1.1rem;
  background:linear-gradient(135deg,#0ea5e9,#06b6d4);
  color:white;text-decoration:none;border-radius:10px;
  font-weight:600;font-size:.85rem;
  border:1px solid rgba(14,165,233,.2);
  transition:all .3s ease;
  box-shadow:0 4px 10px rgba(14,165,233,.2);
  white-space:nowrap;
}
.mezun-link-btn:hover {
  transform:translateY(-2px);
  box-shadow:0 6px 15px rgba(14,165,233,.3);
  color:white;text-decoration:none;
}