/* =========================================================
   Digitaltest / TOEFL Prep - Modern UI Layer
   Ditambahkan di atas Bootstrap 3 + AdminLTE tanpa mengubah
   struktur/logic PHP yang sudah ada.
   ========================================================= */

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

:root{
  --brand-1:#2563eb;
  --brand-2:#7c3aed;
  --brand-3:#0ea5e9;
  --accent:#f59e0b;
  --ink:#0f172a;
  --muted:#64748b;
  --card-radius:16px;
}

body{
  font-family:'Inter', -apple-system, Segoe UI, Roboto, sans-serif;
  background:#f4f6fb !important;
  color:var(--ink);
}
h1,h2,h3,h4,h5,.login-box h6,.box-title{
  font-family:'Poppins', sans-serif;
}

/* ---------- Top header ---------- */
.layout-top-nav .main-header .navbar{
  background:linear-gradient(90deg, var(--brand-1), var(--brand-2)) !important;
  box-shadow:0 4px 18px rgba(37,99,235,.25);
}
.layout-top-nav .main-header .navbar-brand{
  color:#fff !important;
  font-weight:700;
  letter-spacing:.3px;
}
.layout-top-nav .navbar-custom-menu a{
  color:rgba(255,255,255,.9) !important;
  font-weight:500;
}

/* ---------- Hero / landing ---------- */
.hero-wrap{
  position:relative;
  border-radius:0 0 32px 32px;
  padding:56px 20px 90px;
  margin:-1px -15px 0;
  background:radial-gradient(circle at 20% 20%, rgba(255,255,255,.15), transparent 40%),
             linear-gradient(120deg, var(--brand-1), var(--brand-2) 60%, var(--brand-3));
  color:#fff;
  text-align:center;
  overflow:hidden;
}
.hero-wrap::before{
  content:"";
  position:absolute; inset:0;
  background:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"><circle cx="50" cy="50" r="1.4" fill="white" opacity="0.25"/></svg>');
  background-size:22px 22px;
  opacity:.5;
}
.hero-wrap .hero-badge{
  position:relative;
  display:inline-block;
  background:rgba(255,255,255,.18);
  border:1px solid rgba(255,255,255,.35);
  padding:6px 16px;
  border-radius:999px;
  font-size:12px;
  letter-spacing:1.5px;
  text-transform:uppercase;
  margin-bottom:16px;
}
.hero-wrap h1{
  position:relative;
  font-weight:800;
  font-size:34px;
  margin:0 0 8px;
  text-shadow:0 2px 12px rgba(0,0,0,.15);
}
.hero-wrap p.lead{
  position:relative;
  font-size:16px;
  opacity:.92;
  max-width:640px;
  margin:0 auto;
}

/* ---------- Floating login card ---------- */
.login-box.card-float{
  position:relative;
  margin:-64px auto 30px;
  max-width:400px;
  background:#fff;
  border-radius:var(--card-radius);
  box-shadow:0 20px 45px rgba(15,23,42,.14);
  padding:28px 26px 22px;
  transition:transform .25s ease;
}
.login-box.card-float:hover{ transform:translateY(-3px); }
.login-box.card-float .login-logo img{ max-width:150px; height:auto; }
.login-box.card-float h6{ color:var(--muted); font-weight:600; font-size:12.5px; margin:4px 0;}
.login-box-body .form-control{
  border-radius:10px;
  border:1.5px solid #e2e8f0;
  padding:10px 14px;
  height:auto;
  transition:.2s;
}
.login-box-body .form-control:focus{
  border-color:var(--brand-1);
  box-shadow:0 0 0 3px rgba(37,99,235,.15);
}
.login-box-body .btn-primary{
  background:linear-gradient(90deg,var(--brand-1),var(--brand-2));
  border:none;
  border-radius:10px;
  font-weight:600;
  padding:10px 0;
  box-shadow:0 8px 18px rgba(37,99,235,.3);
  transition:.2s;
}
.login-box-body .btn-primary:hover{ filter:brightness(1.07); transform:translateY(-1px); }

/* ---------- Feature cards on landing ---------- */
.feature-grid{ margin-top:10px; }
.feature-card{
  background:#fff;
  border-radius:var(--card-radius);
  padding:22px 20px;
  height:100%;
  box-shadow:0 8px 24px rgba(15,23,42,.06);
  border:1px solid #eef1f7;
  transition:transform .2s ease, box-shadow .2s ease;
}
.feature-card:hover{
  transform:translateY(-4px);
  box-shadow:0 16px 32px rgba(15,23,42,.1);
}
.feature-card .icon-circle{
  width:46px;height:46px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--brand-1),var(--brand-3));
  color:#fff;font-size:20px;margin-bottom:12px;
}
.feature-card h4{ font-weight:700; font-size:16px; margin:0 0 6px;}
.feature-card p{ color:var(--muted); font-size:13.5px; margin:0;}

/* ---------- Generic content section wrapper ---------- */
.section-title-modern{
  font-weight:700;
  font-size:20px;
  margin:26px 0 14px;
  display:flex; align-items:center; gap:10px;
}
.section-title-modern .bar{
  width:5px;height:22px;border-radius:4px;
  background:linear-gradient(180deg,var(--brand-1),var(--brand-2));
  display:inline-block;
}

/* ---------- Dashboard callout / promo banner ---------- */
.promo-belajar{
  border-radius:var(--card-radius);
  padding:22px 26px;
  background:linear-gradient(120deg,#0ea5e9,#7c3aed);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
  box-shadow:0 14px 30px rgba(37,99,235,.22);
  margin-bottom:20px;
}
.promo-belajar h3{ margin:0 0 4px; font-weight:700; }
.promo-belajar p{ margin:0; opacity:.92; font-size:13.5px; max-width:480px;}
.promo-belajar .btn-belajar{
  background:#fff;
  color:var(--brand-2);
  font-weight:700;
  border-radius:10px;
  padding:10px 22px;
  border:none;
  white-space:nowrap;
  transition:.2s;
}
.promo-belajar .btn-belajar:hover{ transform:translateY(-2px); box-shadow:0 8px 18px rgba(0,0,0,.18); color:var(--brand-2);}

/* ---------- Belajar TOEFL module ---------- */
.materi-card{
  background:#fff;
  border-radius:var(--card-radius);
  box-shadow:0 8px 22px rgba(15,23,42,.06);
  border:1px solid #eef1f7;
  padding:24px;
  margin-bottom:20px;
}
.bagian-grid .bagian-item{
  display:block;
  background:#fff;
  border-radius:var(--card-radius);
  padding:24px;
  text-align:left;
  border:1px solid #eef1f7;
  box-shadow:0 8px 22px rgba(15,23,42,.06);
  text-decoration:none;
  color:var(--ink);
  height:100%;
  transition:.2s;
  margin-bottom:20px;
}
.bagian-grid .bagian-item:hover{
  text-decoration:none;
  color:var(--ink);
  transform:translateY(-4px);
  box-shadow:0 16px 34px rgba(15,23,42,.12);
  border-color:var(--brand-1);
}
.bagian-item .badge-bagian{
  display:inline-block;
  font-size:11px;
  font-weight:700;
  letter-spacing:.5px;
  text-transform:uppercase;
  padding:4px 10px;
  border-radius:999px;
  color:#fff;
  margin-bottom:12px;
}
.bagian-item h4{ font-weight:700; margin:0 0 6px; }
.bagian-item p{ color:var(--muted); font-size:13.5px; }
.bagian-item .progress-mini{ height:6px; border-radius:6px; margin-top:14px; overflow:hidden; background:#eef1f7;}
.bagian-item .progress-mini span{ display:block; height:100%; border-radius:6px; }

.badge-listening{ background:#0ea5e9; }
.badge-structure{ background:#7c3aed; }
.badge-reading{ background:#f59e0b; }
.badge-tips{ background:#16a34a; }

/* contoh soal + pembahasan accordion */
.soal-box{
  border:1px solid #e8ecf3;
  border-radius:12px;
  margin-bottom:14px;
  overflow:hidden;
}
.soal-box .soal-question{
  padding:16px 18px;
  font-weight:600;
  background:#f8fafc;
}
.soal-box .soal-options{ padding:14px 18px 4px; }
.soal-box .soal-options .opt{
  display:block;
  padding:8px 12px;
  border-radius:8px;
  margin-bottom:6px;
  border:1px solid #eef1f7;
  font-size:13.5px;
}
.soal-box .soal-options .opt.correct{
  border-color:#22c55e;
  background:#f0fdf4;
  font-weight:600;
}
.soal-box .toggle-pembahasan{
  display:inline-block;
  margin:6px 18px 14px;
  font-size:12.5px;
  font-weight:600;
  color:var(--brand-1);
  cursor:pointer;
}
.soal-box .pembahasan{
  display:none;
  padding:14px 18px;
  background:#fffbeb;
  border-top:1px dashed #f2d38a;
  font-size:13.5px;
  color:#5a4a12;
}
.soal-box .pembahasan.show{ display:block; }

.btn-modern{
  border-radius:10px;
  font-weight:600;
  padding:9px 18px;
  border:none;
  background:linear-gradient(90deg,var(--brand-1),var(--brand-2));
  color:#fff;
  transition:.2s;
}
.btn-modern:hover{ color:#fff; transform:translateY(-1px); box-shadow:0 10px 20px rgba(37,99,235,.25); }
.btn-modern.btn-outline-modern{
  background:#fff;
  color:var(--brand-1);
  border:1.5px solid var(--brand-1);
}

/* responsive */
@media (max-width:767px){
  .hero-wrap{ padding:40px 16px 70px; border-radius:0 0 22px 22px;}
  .hero-wrap h1{ font-size:24px; }
  .login-box.card-float{ margin-top:-46px; }
  .promo-belajar{ flex-direction:column; align-items:flex-start; }
}

/* =========================================================
   GLOBAL RESTYLE — supaya seluruh halaman "menu tes" (admin
   maupun peserta: daftar tes, tambah tes, paket soal, kerjakan
   tes, hasil tes) otomatis mengikuti gaya yang sama dengan
   modul Belajar, tanpa perlu mengubah tiap file satu-satu.
   ========================================================= */

.content-header h1{
  font-weight:700;
  font-size:22px;
}
.content-header h1 small{
  font-family:'Inter', sans-serif;
  color:var(--muted);
}
.breadcrumb{
  background:transparent;
  padding-left:0;
}

/* AdminLTE box -> kartu modern */
.box{
  border-top:none !important;
  border-radius:var(--card-radius) !important;
  overflow:hidden;
  border:1px solid #eef1f7 !important;
  box-shadow:0 8px 22px rgba(15,23,42,.06);
}
.box.box-solid{ border:1px solid #eef1f7 !important; }
.box-header.with-border{
  border-bottom:1px solid #eef1f7 !important;
  background:#fff;
}
.box-header .box-title{
  font-weight:700;
  font-family:'Poppins', sans-serif;
  font-size:15.5px;
}
.box-footer{
  background:#fbfcfe;
  border-top:1px solid #eef1f7 !important;
}

/* callout -> lebih lembut & rounded */
.callout{
  border-radius:12px;
  border-left-width:4px;
  box-shadow:0 4px 14px rgba(15,23,42,.05);
}

/* tombol utama disamakan dengan gradient brand */
.btn-primary{
  background:linear-gradient(90deg,var(--brand-1),var(--brand-2)) !important;
  border:none !important;
  border-radius:9px !important;
  font-weight:600;
  transition:.2s;
}
.btn-primary:hover, .btn-primary:focus{
  filter:brightness(1.07);
  box-shadow:0 8px 18px rgba(37,99,235,.25);
}
.btn-default{
  border-radius:9px !important;
}

/* tabel & DataTable */
.table-bordered, table.dataTable{
  border-radius:10px;
  overflow:hidden;
}
.table > thead > tr > th{
  background:#f8fafc;
  border-bottom:2px solid #eef1f7 !important;
  font-weight:700;
  color:#334155;
  font-size:12.5px;
  text-transform:uppercase;
  letter-spacing:.4px;
}
.table > tbody > tr:hover{ background:#f8fafc; }

/* form controls konsisten dengan halaman lain */
.form-control{
  border-radius:8px;
}
.form-control:focus{
  border-color:var(--brand-1);
  box-shadow:0 0 0 3px rgba(37,99,235,.12);
}

/* nav-tabs (dipakai di halaman kerjakan tes / hasil tes) */
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus{
  border-top:2px solid var(--brand-1);
  font-weight:600;
}

/* progress bar skor/waktu tes */
.progress{
  border-radius:8px;
  background:#eef1f7;
}
.progress-bar{
  background:linear-gradient(90deg,var(--brand-1),var(--brand-3));
}

/* sidebar admin (AdminLTE) sedikit disegarkan */
.skin-blue .main-header .logo,
.skin-blue .main-header .navbar{
  background:linear-gradient(90deg, var(--brand-1), var(--brand-2)) !important;
}
.skin-blue .sidebar-menu > li.active > a{
  border-left-color:var(--brand-1) !important;
}