/* RESET */

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

html{
  scroll-behavior:smooth;
}

body{
  font-family:'Kanit',sans-serif;

  background:#020617;
  color:white;

  overflow-x:hidden;
  position:relative;
}

/* BACKGROUND EFFECT */

body::before{
  content:"";

  position:fixed;
  width:700px;
  height:700px;

  background:radial-gradient(circle,#3b82f655 0%,transparent 70%);

  top:-200px;
  left:-200px;

  z-index:-2;
}

body::after{
  content:"";

  position:fixed;
  width:700px;
  height:700px;

  background:radial-gradient(circle,#8b5cf655 0%,transparent 70%);

  bottom:-250px;
  right:-250px;

  z-index:-2;
}

/* NAVBAR */

.navbar{
  width:100%;

  display:flex;
  justify-content:space-between;
  align-items:center;

  padding:20px 8%;

  position:fixed;
  top:0;

  background:rgba(255,255,255,0.05);

  backdrop-filter:blur(20px);

  border-bottom:1px solid rgba(255,255,255,0.08);

  z-index:999;
}

/* LOGO */

.logo span{
  font-size:32px;
  font-weight:700;

  background:linear-gradient(
    90deg,
    #4facfe,
    #8b5cf6,
    #00f2fe
  );

  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}

/* NAV */

.nav-links{
  display:flex;
  gap:35px;

  list-style:none;
}

.nav-links a{
  color:white;
  text-decoration:none;

  font-weight:400;

  transition:0.3s;
  position:relative;
}

.nav-links a:hover{
  color:#4facfe;
}

.nav-links a::after{
  content:"";

  position:absolute;
  left:0;
  bottom:-6px;

  width:0%;
  height:2px;

  background:#4facfe;

  transition:0.3s;
}

.nav-links a:hover::after{
  width:100%;
}

/* BUTTONS */

.nav-buttons{
  display:flex;
  gap:15px;
}

.btn-primary{
  background:linear-gradient(
    90deg,
    #3b82f6,
    #8b5cf6
  );

  color:white;
  text-decoration:none;

  padding:14px 26px;

  border-radius:14px;

  font-weight:600;

  transition:0.3s;

  box-shadow:
    0 0 20px #3b82f655;
}

.btn-primary:hover{
  transform:translateY(-3px);

  box-shadow:
    0 0 35px #8b5cf688;
}

.btn-outline{
  border:1px solid rgba(255,255,255,0.2);

  color:white;
  text-decoration:none;

  padding:14px 26px;

  border-radius:14px;

  transition:0.3s;

  background:rgba(255,255,255,0.03);

  backdrop-filter:blur(10px);
}

.btn-outline:hover{
  border-color:#4facfe;

  box-shadow:
    0 0 20px #3b82f655;
}

.large{
  padding:18px 34px;
}

/* HERO */

.hero{
  min-height:100vh;

  display:flex;
  justify-content:center;
  align-items:center;

  text-align:center;

  padding:140px 8% 100px;
}

.hero-content{
  max-width:950px;
}

.tagline{
  display:inline-block;

  padding:10px 20px;

  border-radius:999px;

  background:rgba(255,255,255,0.05);

  border:1px solid rgba(255,255,255,0.08);

  margin-bottom:30px;

  color:#4facfe;

  font-size:15px;
}

.hero h1{
  font-size:72px;
  line-height:1.1;

  margin-bottom:30px;

  font-weight:700;
}

.hero h1 span{
  background:linear-gradient(
    90deg,
    #4facfe,
    #8b5cf6
  );

  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}

.description{
  font-size:22px;

  line-height:1.8;

  color:#cbd5e1;

  margin-bottom:45px;
}

.hero-buttons{
  display:flex;
  justify-content:center;
  gap:20px;

  flex-wrap:wrap;
}

/* SECTION */

section{
  padding:120px 8%;
}

.section-title{
  text-align:center;

  margin-bottom:70px;
}

.section-title h2{
  font-size:48px;

  margin-bottom:15px;
}

.section-title p{
  color:#94a3b8;
}

/* FEATURE GRID */

.feature-grid{
  display:grid;

  grid-template-columns:
  repeat(auto-fit,minmax(240px,1fr));

  gap:30px;
}

/* GLASS CARD */

.feature-card{
  position:relative;

  padding:35px;

  border-radius:28px;

  background:
    rgba(255,255,255,0.05);

  border:
    1px solid rgba(255,255,255,0.08);

  backdrop-filter:blur(20px);

  overflow:hidden;

  transition:0.4s;
}

.feature-card::before{
  content:"";

  position:absolute;

  width:180px;
  height:180px;

  background:#3b82f633;

  border-radius:50%;

  top:-80px;
  right:-80px;
}

.feature-card:hover{
  transform:
    translateY(-10px);

  border-color:#4facfe;

  box-shadow:
    0 0 30px #3b82f633;
}

.feature-card h3{
  font-size:24px;

  margin-bottom:15px;

  color:#4facfe;
}

.feature-card p{
  color:#cbd5e1;

  line-height:1.7;
}

/* MEMBERSHIP */

.membership-grid{
  display:grid;

  grid-template-columns:
  repeat(auto-fit,minmax(260px,1fr));

  gap:35px;
}

.member-card{
  position:relative;

  padding:45px 35px;

  border-radius:30px;

  text-align:center;

  background:
    rgba(255,255,255,0.05);

  border:
    1px solid rgba(255,255,255,0.08);

  backdrop-filter:blur(20px);

  overflow:hidden;

  transition:0.4s;
}

.member-card:hover{
  transform:
    translateY(-10px);

  box-shadow:
    0 0 40px #8b5cf644;
}

.member-card h3{
  font-size:32px;

  margin-bottom:15px;
}

.member-card p{
  color:#cbd5e1;
}

.featured{
  border:
    1px solid #8b5cf6;

  box-shadow:
    0 0 35px #8b5cf644;
}

/* FOOTER */

.footer{
  padding:80px 20px;

  text-align:center;

  background:#020617;

  border-top:
    1px solid rgba(255,255,255,0.08);
}

.footer h3{
  font-size:32px;

  margin-bottom:10px;

  background:linear-gradient(
    90deg,
    #4facfe,
    #8b5cf6
  );

  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}

.footer p{
  color:#94a3b8;

  margin-top:8px;
}

/* MOBILE */

@media(max-width:900px){

  .navbar{
    flex-direction:column;
    gap:20px;
  }

  .nav-links{
    flex-wrap:wrap;
    justify-content:center;
  }

  .hero h1{
    font-size:52px;
  }

  .description{
    font-size:18px;
  }

}

@media(max-width:600px){

  .hero h1{
    font-size:40px;
  }

  .section-title h2{
    font-size:34px;
  }

}
/* GRID BACKGROUND */

.grid-bg{
  position:fixed;

  inset:0;

  background-image:
    linear-gradient(
      rgba(255,255,255,0.03) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(255,255,255,0.03) 1px,
      transparent 1px
    );

  background-size:40px 40px;

  z-index:-3;

  mask-image:
    radial-gradient(circle at center,
    black 30%,
    transparent 90%);
}
/* AUTH PAGE */

.auth-page{
  min-height:100vh;

  display:flex;
  justify-content:center;
  align-items:center;

  padding:120px 20px;
}

.auth-card{
  width:100%;
  max-width:520px;

  padding:50px;

  border-radius:32px;

  background:
    rgba(255,255,255,0.05);

  border:
    1px solid rgba(255,255,255,0.08);

  backdrop-filter:blur(20px);

  box-shadow:
    0 0 40px rgba(59,130,246,0.15);
}

.auth-logo{
  font-size:34px;
  font-weight:700;

  text-align:center;

  margin-bottom:20px;

  background:linear-gradient(
    90deg,
    #4facfe,
    #8b5cf6
  );

  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}

.auth-card h1{
  text-align:center;

  font-size:42px;

  margin-bottom:10px;
}

.auth-subtitle{
  text-align:center;

  color:#94a3b8;

  margin-bottom:40px;
}

.form-group{
  margin-bottom:25px;
}

.form-group label{
  display:block;

  margin-bottom:10px;

  color:#cbd5e1;
}

.form-group input{
  width:100%;

  padding:16px 18px;

  border-radius:16px;

  border:
    1px solid rgba(255,255,255,0.08);

  background:
    rgba(255,255,255,0.04);

  color:white;

  outline:none;

  font-family:'Kanit',sans-serif;

  font-size:16px;

  transition:0.3s;
}

.form-group input:focus{
  border-color:#4facfe;

  box-shadow:
    0 0 20px rgba(59,130,246,0.25);
}

.auth-btn{
  width:100%;

  border:none;

  cursor:pointer;

  margin-top:10px;

  font-size:17px;
}

.auth-footer{
  text-align:center;

  margin-top:30px;

  color:#94a3b8;
}

.auth-footer a{
  color:#4facfe;

  text-decoration:none;
}
html,
body{
  width:100%;
  overflow-x:hidden;
}

img{
  max-width:100%;
}

input,
button,
textarea,
select{
  font-size:16px;
}
/* DASHBOARD */

.dashboard-page{
  min-height:100vh;

  display:grid;

  grid-template-columns:
  320px 1fr;

  gap:30px;

  padding:
  140px 30px 50px;
}

/* SIDEBAR */

.dashboard-sidebar{

  background:
    rgba(255,255,255,0.05);

  border:
    1px solid rgba(255,255,255,0.08);

  border-radius:30px;

  padding:30px;

  height:max-content;

  backdrop-filter:blur(20px);
}

.dashboard-profile{
  text-align:center;
}

.profile-avatar{

  width:100px;
  height:100px;

  margin:auto;

  border-radius:50%;

  display:flex;
  justify-content:center;
  align-items:center;

  font-size:36px;
  font-weight:700;

  margin-bottom:20px;

  background:
    linear-gradient(
      135deg,
      #3b82f6,
      #8b5cf6
    );
}

.dashboard-profile h2{
  margin-bottom:10px;
}

.dashboard-profile p{
  color:#94a3b8;
}

/* STATUS */

.status-card{

  margin-top:25px;

  padding:20px;

  border-radius:20px;

  background:
    rgba(255,255,255,0.04);
}

.status-card h3{
  margin-bottom:15px;
}

.status-badge{

  padding:12px;

  border-radius:14px;

  text-align:center;

  background:#f59e0b;

  color:white;

  font-weight:600;
}

.role-badge{

  padding:12px;

  border-radius:14px;

  text-align:center;

  background:#3b82f6;

  color:white;

  font-weight:600;
}

/* CONTENT */

.dashboard-content{

  background:
    rgba(255,255,255,0.05);

  border:
    1px solid rgba(255,255,255,0.08);

  border-radius:30px;

  padding:40px;

  backdrop-filter:blur(20px);
}

.dashboard-header h1{

  font-size:42px;

  margin-bottom:10px;
}

.dashboard-header p{
  color:#94a3b8;
}

/* PENDING */

.pending-box{

  margin-top:30px;

  padding:30px;

  border-radius:24px;

  background:
    rgba(245,158,11,0.1);

  border:
    1px solid rgba(245,158,11,0.3);
}

.pending-box h2{
  margin-bottom:15px;
}

/* COURSES */

.dashboard-courses{

  margin-top:40px;

  display:grid;

  grid-template-columns:
  repeat(auto-fit,minmax(280px,1fr));

  gap:25px;
}

.course-card{

  padding:30px;

  border-radius:28px;

  background:
    rgba(255,255,255,0.05);

  border:
    1px solid rgba(255,255,255,0.08);

  transition:0.3s;
}

.course-card:hover{

  transform:
    translateY(-6px);

  border-color:#3b82f6;
}

.course-top{
  margin-bottom:20px;
}

.course-tag{

  display:inline-block;

  padding:8px 14px;

  border-radius:999px;

  background:
    rgba(59,130,246,0.2);

  color:#60a5fa;

  font-size:14px;
}

.course-card h3{

  font-size:24px;

  margin-bottom:15px;
}

.course-card p{

  color:#cbd5e1;

  margin-bottom:25px;

  line-height:1.7;
}

/* PROGRESS */

.progress-box{

  margin-bottom:25px;
}

.progress-bar{

  width:100%;
  height:12px;

  border-radius:999px;

  overflow:hidden;

  background:
    rgba(255,255,255,0.08);

  margin-bottom:10px;
}

.progress-fill{

  height:100%;

  background:
    linear-gradient(
      90deg,
      #3b82f6,
      #8b5cf6
    );
}

/* MOBILE */

@media(max-width:900px){

  .dashboard-page{

    grid-template-columns:1fr;
  }

}
/* COURSES PAGE */

.courses-page{
  min-height:100vh;

  padding:
  140px 8% 80px;
}

.courses-header{
  text-align:center;

  margin-bottom:50px;
}

.courses-header h1{

  font-size:56px;

  margin-bottom:15px;
}

.courses-header p{
  color:#94a3b8;
}

/* USER BOX */

.course-user-box{

  display:flex;
  justify-content:space-between;
  align-items:center;

  gap:20px;

  flex-wrap:wrap;

  padding:30px;

  border-radius:28px;

  margin-bottom:40px;

  background:
    rgba(255,255,255,0.05);

  border:
    1px solid rgba(255,255,255,0.08);

  backdrop-filter:blur(20px);
}

/* GRID */

.courses-grid{

  display:grid;

  grid-template-columns:
  repeat(auto-fit,minmax(280px,1fr));

  gap:30px;
}

/* CARD */

.course-main-card{

  position:relative;

  padding:30px;

  border-radius:30px;

  overflow:hidden;

  background:
    rgba(255,255,255,0.05);

  border:
    1px solid rgba(255,255,255,0.08);

  transition:0.3s;
}

.course-main-card:hover{

  transform:
    translateY(-6px);

  border-color:#3b82f6;
}

.course-level{

  display:inline-block;

  padding:8px 14px;

  border-radius:999px;

  margin-bottom:20px;

  background:
    rgba(59,130,246,0.2);

  color:#60a5fa;

  font-size:14px;
}

.course-main-card h3{

  font-size:28px;

  margin-bottom:15px;
}

.course-main-card p{

  color:#cbd5e1;

  margin-bottom:25px;

  line-height:1.7;
}

/* LOCK */

.locked-course{

  opacity:0.6;

  filter:grayscale(0.2);
}

.locked-btn{

  width:100%;

  padding:16px;

  border:none;

  border-radius:16px;

  background:#334155;

  color:white;

  font-family:'Kanit',sans-serif;

  font-size:16px;
}

/* MOBILE */

@media(max-width:768px){

  .courses-header h1{
    font-size:40px;
  }

}
/* LESSON PAGE */

.lesson-page{

  min-height:100vh;

  display:grid;

  grid-template-columns:
  1fr 360px;

  gap:30px;

  padding:
  140px 8% 80px;
}

/* MAIN */

.lesson-main{

  background:
    rgba(255,255,255,0.05);

  border:
    1px solid rgba(255,255,255,0.08);

  border-radius:30px;

  overflow:hidden;

  backdrop-filter:blur(20px);
}

/* VIDEO */

.video-box{
  width:100%;
  aspect-ratio:16/9;
}

.video-box iframe{

  width:100%;
  height:100%;
}

/* INFO */

.lesson-info{
  padding:35px;
}

.lesson-info h1{

  font-size:42px;

  margin:
  20px 0;
}

.lesson-info p{

  color:#cbd5e1;

  line-height:1.8;

  margin-bottom:35px;
}

/* SIDEBAR */

.lesson-sidebar{

  display:flex;
  flex-direction:column;

  gap:25px;
}

/* COURSE BOX */

.lesson-course-box{

  padding:30px;

  border-radius:30px;

  background:
    rgba(255,255,255,0.05);

  border:
    1px solid rgba(255,255,255,0.08);

  backdrop-filter:blur(20px);
}

.lesson-course-box h2{

  margin-bottom:15px;
}

.lesson-course-box p{

  color:#94a3b8;

  margin-bottom:20px;
}

/* LESSON LIST */

.lesson-list{

  padding:20px;

  border-radius:30px;

  background:
    rgba(255,255,255,0.05);

  border:
    1px solid rgba(255,255,255,0.08);

  backdrop-filter:blur(20px);
}

.lesson-item{

  display:flex;
  justify-content:space-between;
  align-items:center;

  padding:18px;

  border-radius:18px;

  margin-bottom:12px;

  cursor:pointer;

  transition:0.3s;
}

.lesson-item:hover{

  background:
    rgba(255,255,255,0.05);
}

.active-lesson{

  background:
    rgba(59,130,246,0.2);

  border:
    1px solid rgba(59,130,246,0.4);
}

/* MOBILE */

@media(max-width:1100px){

  .lesson-page{

    grid-template-columns:1fr;
  }

}