:root{
  --bg:#020817;
  --bg-2:#081226;
  --panel:rgba(17,24,39,.86);
  --panel-2:rgba(31,41,55,.88);
  --text:#f8fbff;
  --muted:#d7e6ff;
  --muted-2:#b8c9e6;
  --primary:#60a5fa;
  --primary-2:#2563eb;
  --danger:#ef4444;
  --success:#10b981;
  --border:rgba(255,255,255,.10);
  --shadow:0 20px 55px rgba(0,0,0,.34);

  --glow-soft:0 0 10px rgba(147,197,253,.22);
  --glow-main:0 0 18px rgba(96,165,250,.32);
  --glow-strong:0 0 28px rgba(59,130,246,.22);
}

*{box-sizing:border-box}

body{
  margin:0;
  font-family:Inter,Segoe UI,Arial,sans-serif;
  background:
    radial-gradient(circle at top left, rgba(96,165,250,.16), transparent 26%),
    radial-gradient(circle at bottom right, rgba(59,130,246,.14), transparent 30%),
    linear-gradient(135deg,#020617,#0b1220 45%,#0f172a 70%,#111827);
  color:var(--text);
}

a{
  text-decoration:none;
  color:inherit;
}

h1,h2,h3,h4,h5,h6{
  color:#ffffff;
  text-shadow:
    0 0 10px rgba(255,255,255,.18),
    0 0 20px rgba(96,165,250,.18);
}

p,span,label,small,li,td,th,a,button{
  text-shadow:var(--glow-soft);
}

.container{
  width:min(1180px,92%);
  margin:0 auto;
  padding:24px 0;
}

.navbar{
  position:sticky;
  top:0;
  z-index:50;
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  background:rgba(2,6,23,.76);
  border-bottom:1px solid var(--border);
  box-shadow:0 10px 30px rgba(0,0,0,.22);
}

.nav-wrap{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:18px;
}

.brand{
  font-size:1.25rem;
  font-weight:800;
  color:#fff;
  text-shadow:
    0 0 8px rgba(255,255,255,.20),
    0 0 18px rgba(96,165,250,.28);
}

.nav-links{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
}

.nav-links a{
  padding:10px 14px;
  border-radius:12px;
  color:var(--text);
  transition:.25s ease;
}

.nav-links a:hover{
  background:rgba(255,255,255,.08);
  color:#fff;
  text-shadow:
    0 0 10px rgba(255,255,255,.22),
    0 0 20px rgba(96,165,250,.30);
}

.btn-nav,.btn-primary,.btn-secondary,.btn-danger,.btn-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  border:none;
  cursor:pointer;
  border-radius:14px;
  font-weight:700;
  transition:.25s ease;
  text-shadow:
    0 0 8px rgba(255,255,255,.20),
    0 0 16px rgba(96,165,250,.18);
}

.btn-primary{
  background:linear-gradient(135deg,var(--primary),var(--primary-2));
  color:#fff;
  padding:12px 18px;
  box-shadow:
    0 10px 24px rgba(37,99,235,.26),
    0 0 18px rgba(96,165,250,.18);
}

.btn-primary:hover{
  transform:translateY(-2px);
  box-shadow:
    0 14px 28px rgba(37,99,235,.32),
    0 0 24px rgba(96,165,250,.24);
}

.btn-secondary{
  background:rgba(30,41,59,.88);
  color:#fff;
  border:1px solid var(--border);
  padding:12px 18px;
  box-shadow:0 10px 24px rgba(0,0,0,.18);
}

.btn-secondary:hover{
  transform:translateY(-2px);
  background:rgba(51,65,85,.95);
}

.btn-danger{
  background:linear-gradient(135deg,#dc2626,var(--danger));
  color:#fff;
  padding:12px 18px;
  box-shadow:
    0 10px 24px rgba(239,68,68,.22),
    0 0 16px rgba(239,68,68,.12);
}

.btn-danger:hover{
  transform:translateY(-2px);
}

.btn-link{
  color:#bfdbfe;
}

.btn-link:hover{
  color:#fff;
  text-shadow:
    0 0 8px rgba(255,255,255,.24),
    0 0 18px rgba(96,165,250,.26);
}

.card{
  background:linear-gradient(180deg, rgba(17,24,39,.92), rgba(17,24,39,.82));
  border:1px solid var(--border);
  border-radius:22px;
  box-shadow:var(--shadow);
  padding:24px;
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}

.hero{
  min-height:72vh;
  display:grid;
  place-items:center;
}

.hero-card{
  max-width:760px;
  text-align:center;
  background:
    radial-gradient(circle at top, rgba(96,165,250,.10), transparent 42%),
    linear-gradient(180deg, rgba(17,24,39,.92), rgba(17,24,39,.84));
  border:1px solid var(--border);
  border-radius:28px;
  padding:48px 28px;
  box-shadow:var(--shadow);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
}

.hero-card h1{
  font-size:clamp(2rem,5vw,3.6rem);
  margin:0 0 16px;
  color:#fff;
  text-shadow:
    0 0 12px rgba(255,255,255,.24),
    0 0 24px rgba(96,165,250,.22);
}

.hero-card p{
  color:var(--muted);
  font-size:1.05rem;
  text-shadow:
    0 0 10px rgba(255,255,255,.10),
    0 0 16px rgba(96,165,250,.14);
}

.hero-actions{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:12px;
  margin-top:22px;
}

.auth-card{
  max-width:560px;
  margin:40px auto;
}

.form-grid{
  display:grid;
  gap:16px;
}

label{
  display:block;
  margin-bottom:8px;
  font-weight:700;
  color:#f8fbff;
}

input,textarea{
  width:100%;
  background:#09111f;
  color:#fff;
  border:1px solid rgba(255,255,255,.12);
  border-radius:14px;
  padding:14px 16px;
  outline:none;
  transition:.25s ease;
}

input::placeholder,
textarea::placeholder{
  color:#b9c7dd;
  text-shadow:none;
}

input:focus,textarea:focus{
  border-color:#60a5fa;
  box-shadow:
    0 0 0 4px rgba(59,130,246,.15),
    0 0 18px rgba(96,165,250,.12);
  background:#0b1425;
}

.alert{
  padding:14px 16px;
  border-radius:14px;
  margin:10px 0;
  color:#fff;
}

.alert.success{
  background:rgba(16,185,129,.12);
  border:1px solid rgba(16,185,129,.3);
  box-shadow:0 0 18px rgba(16,185,129,.08);
}

.alert.error{
  background:rgba(239,68,68,.12);
  border:1px solid rgba(239,68,68,.3);
  box-shadow:0 0 18px rgba(239,68,68,.08);
}

.section-head{
  margin:18px 0 20px;
}

.section-head h2,
.section-head h3{
  color:#fff;
}

.video-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:22px;
}

.video-card{
  overflow:hidden;
}

.iframe-wrap{
  width:100%;
  overflow:hidden;
  border-radius:18px;
  box-shadow:0 14px 30px rgba(0,0,0,.24);
}

.iframe-wrap iframe{
  width:100%;
  min-height:320px;
}

.video-meta{
  margin-top:14px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}

.video-meta strong,
.video-meta span,
.video-meta p{
  color:#f5f9ff;
}

.dashboard{
  display:grid;
  grid-template-columns:2fr 1fr;
  gap:20px;
}

.table-wrap{
  overflow:auto;
  border-radius:18px;
}

.table{
  width:100%;
  border-collapse:collapse;
}

.table th,.table td{
  padding:14px 12px;
  border-bottom:1px solid var(--border);
  text-align:left;
}

.table th{
  color:#fff;
  background:rgba(255,255,255,.03);
  text-shadow:
    0 0 8px rgba(255,255,255,.16),
    0 0 16px rgba(96,165,250,.16);
}

.table td{
  color:#edf4ff;
}

.danger-zone{
  border-color:rgba(239,68,68,.3);
  box-shadow:
    0 18px 45px rgba(0,0,0,.28),
    0 0 0 1px rgba(239,68,68,.12) inset;
}

@media (max-width:900px){
  .dashboard{grid-template-columns:1fr}
}

@media (max-width:640px){
  .nav-wrap{flex-direction:column;align-items:flex-start}
  .hero-card{padding:32px 20px}
}

.tiktok-page{
  min-height:100vh;
  width:100%;
  padding:0;
  margin:0;
}

.tiktok-container{
  position:fixed;
  inset:0;
  width:100vw;
  height:100vh;
  background:
    radial-gradient(circle at top, rgba(59,130,246,.10), transparent 25%),
    #000;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}

.tiktok-video-wrapper{
  position:relative;
  width:min(430px, 100vw);
  height:100vh;
  background:#000;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.06),
    0 20px 60px rgba(0,0,0,.45);
}

.tiktok-video-wrapper iframe{
  width:100%;
  height:100%;
  border:none;
  background:#000;
}

.tiktok-control{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.18);
  color:#fff;
  width:58px;
  height:58px;
  border-radius:999px;
  font-size:2rem;
  cursor:pointer;
  z-index:30;
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  transition:.25s ease;
  text-shadow:
    0 0 8px rgba(255,255,255,.20),
    0 0 18px rgba(96,165,250,.24);
}

.tiktok-control:hover{
  background:rgba(255,255,255,.25);
  transform:translateY(-50%) scale(1.05);
  box-shadow:0 0 20px rgba(96,165,250,.18);
}

.tiktok-control-left{
  left:max(14px, calc(50vw - 290px));
}

.tiktok-control-right{
  right:max(14px, calc(50vw - 290px));
}

.tiktok-video-info{
  position:absolute;
  left:50%;
  bottom:28px;
  transform:translateX(-50%);
  z-index:40;
  background:rgba(0,0,0,.55);
  color:#fff;
  border:1px solid rgba(255,255,255,.12);
  border-radius:999px;
  padding:14px 20px;
  font-size:1rem;
  font-weight:700;
  cursor:pointer;
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  transition:.25s ease;
  max-width:min(90vw, 420px);
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
  text-shadow:
    0 0 8px rgba(255,255,255,.20),
    0 0 18px rgba(96,165,250,.22);
}

.tiktok-video-info:hover{
  background:rgba(255,255,255,.15);
}

.tiktok-side-actions{
  position:absolute;
  right:max(14px, calc(50vw - 285px));
  bottom:100px;
  z-index:35;
  display:flex;
  flex-direction:column;
  gap:12px;
}

.tiktok-action-btn,
.tiktok-action-link{
  display:flex;
  align-items:center;
  justify-content:center;
  width:54px;
  height:54px;
  border-radius:999px;
  background:rgba(255,255,255,.14);
  color:#fff;
  border:1px solid rgba(255,255,255,.12);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  text-decoration:none;
  font-weight:700;
  transition:.25s ease;
  text-shadow:
    0 0 8px rgba(255,255,255,.20),
    0 0 14px rgba(96,165,250,.18);
}

.tiktok-action-link{
  width:auto;
  min-width:54px;
  padding:0 14px;
}

.tiktok-action-btn:hover,
.tiktok-action-link:hover{
  background:rgba(255,255,255,.24);
  box-shadow:0 0 18px rgba(96,165,250,.16);
}

.tiktok-bottom-indicator{
  position:absolute;
  top:18px;
  left:50%;
  transform:translateX(-50%);
  z-index:40;
  background:rgba(0,0,0,.48);
  color:#fff;
  border-radius:999px;
  padding:10px 16px;
  font-size:.95rem;
  font-weight:700;
  border:1px solid rgba(255,255,255,.12);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  text-shadow:
    0 0 8px rgba(255,255,255,.18),
    0 0 16px rgba(96,165,250,.18);
}

.tiktok-empty{
  min-height:100vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  background:#000;
  color:#fff;
}

body.tiktok-mode{
  overflow:hidden;
}

body.tiktok-mode .navbar{
  display:none;
}

body.tiktok-mode .container{
  width:100%;
  max-width:none;
  margin:0;
  padding:0;
}

@media (max-width:768px){
  .tiktok-video-wrapper{
    width:100vw;
    height:100vh;
  }

  .tiktok-control{
    width:50px;
    height:50px;
    font-size:1.7rem;
  }

  .tiktok-control-left{
    left:10px;
  }

  .tiktok-control-right{
    right:10px;
  }

  .tiktok-side-actions{
    right:10px;
    bottom:100px;
  }

  .tiktok-video-info{
    bottom:20px;
    font-size:.95rem;
    padding:12px 16px;
  }
	/* Center halaman */
	.center-page {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	/* Hero section */
	.hero-center {
		padding: 90px 20px 60px;
	}

	/* Container center */
	.center-content {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	/* Hero card */
	.hero-card {
		max-width: 720px;
		margin: auto;
		padding: 40px 30px;
		text-align: center;
	}

	/* Headline */
	.hero-title {
		font-size: 2.4rem;
		margin-bottom: 14px;
		font-weight: 700;
	}

	/* Paragraph */
	.hero-desc {
		font-size: 1.05rem;
		line-height: 1.7;
		margin-bottom: 28px;
	}

	/* Center text utility */
	.text-center {
		text-align: center;
	}
}