/**
 * Global CSS — Fondasi Styling
 *
 * File ini dimuat di SEMUA halaman.
 * Berisi: font import, CSS variables, reset, typography dasar, utilitas.
 *
 * @package Lisanularab
 * @since 1.0.0
 */

/* =====================================================
   FONT IMPORT
   ===================================================== */



/* =====================================================
   CSS VARIABLES
   ===================================================== */

:root {
	/* --- Typography --- */
	--font-regular: "Inter Variable", "Inter", -apple-system, BlinkMacSystemFont,
	                "Segoe UI", "Roboto", "Ubuntu", sans-serif;
	--font-mono: "JetBrains Mono", ui-monospace, monospace;

	--font-weight-normal:   400;
	--font-weight-medium:   500;
	--font-weight-semibold: 600;
	--font-weight-bold:     700;

	--font-size-xs:      0.75rem;
--font-size-sm:      0.8125rem; 
--font-size-base:    1.0625rem;
--font-size-eyebrow: 0.875rem;
--font-size-15: 	0.9375rem;
--font-size-md:      1rem;
--font-size-lg:      1.125rem;
--font-size-xl:      1.625rem;
--font-size-2xl:     2.0625rem;
--font-size-3xl:     3.375rem;
--font-size-4xl:     4.5rem;
--line-height-tight:   1.08;
--line-height-normal:  1.1;
--line-height-relaxed: 1.65;
--letter-spacing-h2:   -0.01em;
--letter-spacing-body: -0.005em;

	/* --- Warna — Light Mode --- */
	--color-bg:             #FFFFFF;
	--color-bg-secondary:   #F7F7F8;
	--color-bg-tertiary:    #F0F0F2;
	--color-bg-2:		    #F9FAFB; 
	--color-text:           #121317;
	--color-text-secondary: #6B7280;
	--color-text-tertiary:  #9CA3AF;
	--color-border:         #E5E7EB;
	--color-border-2:       #d3d8df;
	--color-border-hover:   #D1D5DB;

	/* --- Warna Brand --- */
	--color-primary:        #0055ff;
	--color-primary-2:      #1D4ED8; 
	--color-primary-hover:  #1E40AF;
	--color-primary-light:  #EFF6FF;
	--color-success:        #059669;
	--color-success-light:  #ECFDF5;
	--color-warning:        #D97706;
	--color-warning-light:  #FFFBEB;
	--color-danger:         #DC2626;
	--color-danger-light:   #FEF2F2;

	/* --- Spacing --- */
	--space-xs:  4px;
	--space-sm:  8px;
	--space-md:  16px;
	--space-lg:  24px;
	--space-xl:  32px;
	--space-2xl: 48px;
	--space-3xl: 64px;

	/* --- Border Radius --- */
	--radius-sm:   6px;
	--radius-md:   8px;
	--radius-lg:   12px;
	--radius-xl:   16px;
	--radius-full: 9999px;

	/* --- Layout --- */
	--navbar-height:     70px;
	--bottom-bar-height: 56px;
	--sidebar-width:     280px;
	--content-max-width: 1200px;

	/* --- Shadow --- */
	--shadow-sm:  0 1px 2px rgba(0, 0, 0, 0.05);
	--shadow-md:  0 4px 6px -1px rgba(0, 0, 0, 0.07), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
	--shadow-lg:  0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -4px rgba(0, 0, 0, 0.04);
	--shadow-xl:  0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.04);

	/* --- Transisi --- */
	--transition-fast:   150ms ease;
	--transition-normal: 250ms ease;
	--transition-slow:   350ms ease;
}

@media (max-width: 768px) {
	:root {
		--font-size-3xl:  2.125rem;   /* H1: 56px → 34px */
		--font-size-2xl:  1.5rem;     /* H2: 33px → 24px */
		--font-size-4xl:  2.125rem;
		--font-size-xl:   1.25rem;    /* H3: 26px → 20px */
		--font-size-lg:   1.0625rem;  /* H4: 18px → 17px */
		--font-size-base: 0.9375rem;  /* body: 17px → 15px */
	}
}

/* =====================================================
   CSS RESET
   Modern reset — ringan, hanya yang diperlukan.
   ===================================================== */

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

/* Hapus default margin/padding pada elemen umum */
html {
	-webkit-text-size-adjust: 100%;
	-moz-text-size-adjust: 100%;
	text-size-adjust: 100%;
	scroll-behavior: smooth;
}

body {
	min-height: 100vh;
	font-family: var(--font-regular);
	font-size: var(--font-size-base);
	font-weight: var(--font-weight-normal);
	line-height: var(--line-height-normal);
	color: var(--color-text);
	background-color: var(--color-bg);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* Gambar & media responsif */
img,
picture,
video,
canvas,
svg {
	display: block;
	max-width: 100%;
	height: auto;
}

/* Reset form elements */
input,
button,
textarea,
select {
	font: inherit;
	color: inherit;
}

button {
	cursor: pointer;
	border: none;
	background: none;
}

/* Reset list */
ul,
ol {
	list-style: none;
}

/* Reset link */
a {
	color: inherit;
	text-decoration: none;
}

/* Reset tabel */
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/* =====================================================
   TYPOGRAPHY DASAR
   ===================================================== */

h1, h2, h3, h4, h5, h6 {
	font-weight: var(--font-weight-normal);
	line-height: var(--line-height-tight);
	color: var(--color-text);
}
 
h1 {
	font-size: var(--font-size-3xl);    /* 56px */
	letter-spacing: normal;
	line-height: 1.1;
}
 
h2 {
	font-size: var(--font-size-2xl);    /* 33px */
	letter-spacing: var(--letter-spacing-h2);
	line-height: 1.08;
}
 
h3 {
	font-size: var(--font-size-xl);     /* 26px */
	letter-spacing: -0.01em;
	line-height: 1.15;
}
 
h4 { font-size: var(--font-size-lg);  }
h5 { font-size: var(--font-size-md);  }
h6 { font-size: var(--font-size-base); }
 
p {
	font-size: var(--font-size-base);   /* 17px */
	letter-spacing: var(--letter-spacing-body);
	line-height: var(--line-height-relaxed);  /* 1.65 */
	margin-bottom: var(--space-md);
}
 
p:last-child {
	margin-bottom: 0;
}
 
strong, b {
	font-weight: var(--font-weight-semibold);
}
 
small {
	font-size: var(--font-size-sm);
}

/* =====================================================
   LINK DASAR
   ===================================================== */

a:not([class]) {
	color: var(--color-primary);
	transition: color var(--transition-fast);
}

a:not([class]):hover {
	color: var(--color-primary-hover);
}

/* =====================================================
   LAYOUT UTILITAS
   ===================================================== */

/* Container utama — max-width dengan padding */
.la-container {
	width: 100%;
	max-width: var(--content-max-width);
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--space-md);
	padding-right: var(--space-md);
}

@media (min-width: 768px) {
	.la-container {
		padding-left: var(--space-lg);
		padding-right: var(--space-lg);
	}
}

/* Konten utama — offset untuk navbar fixed */
.la-main {
	padding-top: var(--navbar-height);
	min-height: calc(100vh - var(--navbar-height));
}

/* Dashboard: tambah offset bottom bar di mobile */
.la-dashboard .la-main {
	padding-bottom: calc(var(--bottom-bar-height) + var(--space-md));
}

@media (min-width: 768px) {
	.la-dashboard .la-main {
		padding-bottom: 0;
	}
}

/* =====================================================
   UTILITAS UMUM
   ===================================================== */

/* Visually hidden — tetap bisa dibaca screen reader */
.la-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Truncate teks satu baris */
.la-truncate {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Truncate teks multi-baris (2 baris) */
.la-line-clamp-2 {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* Flex utilities */
.la-flex {
	display: flex;
}

.la-flex-center {
	display: flex;
	align-items: center;
	justify-content: center;
}

.la-flex-between {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.la-flex-col {
	display: flex;
	flex-direction: column;
}

/* Gap utilities */
.la-gap-xs  { gap: var(--space-xs); }
.la-gap-sm  { gap: var(--space-sm); }
.la-gap-md  { gap: var(--space-md); }
.la-gap-lg  { gap: var(--space-lg); }

/* =====================================================
   KOMPONEN DASAR — BADGE
   ===================================================== */

.la-badge {
	display: inline-flex;
	align-items: center;
	padding: 2px 8px;
	font-size: var(--font-size-xs);
	font-weight: var(--font-weight-medium);
	line-height: 1.4;
	border-radius: var(--radius-full);
	white-space: nowrap;
}

.la-badge--primary {
	background-color: var(--color-primary-light);
	color: var(--color-primary);
}

.la-badge--success {
	background-color: var(--color-success-light);
	color: var(--color-success);
}

.la-badge--warning {
	background-color: var(--color-warning-light);
	color: var(--color-warning);
}

.la-badge--danger {
	background-color: var(--color-danger-light);
	color: var(--color-danger);
}

/* =====================================================
   KOMPONEN DASAR — PROGRESS BAR
   ===================================================== */

.la-progress {
	width: 100%;
	height: 6px;
	background-color: var(--color-bg-tertiary);
	border-radius: var(--radius-full);
	overflow: hidden;
}

.la-progress__bar {
	height: 100%;
	background-color: var(--color-primary);
	border-radius: var(--radius-full);
	transition: width var(--transition-normal);
}

.la-progress__bar--success {
	background-color: var(--color-success);
}

/* =====================================================
   KOMPONEN DASAR — TOMBOL
   ===================================================== */

.la-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-sm);
	padding: 10px 20px;
	font-size: var(--font-size-base);
	font-weight: var(--font-weight-medium);
	line-height: 1;
	border-radius: var(--radius-md);
	border: 1px solid transparent;
	cursor: pointer;
	transition: all var(--transition-fast);
	white-space: nowrap;
	text-decoration: none;
}

.la-btn:focus-visible {
	outline: 2px solid var(--color-primary);
	outline-offset: 2px;
}

/* Tombol primary */
.la-btn--primary {
	background-color: var(--color-primary);
	color: #FFFFFF;
}

.la-btn--primary:hover {
	background-color: var(--color-primary-hover);
	color: #FFFFFF;
}

/* Tombol secondary / outline */
.la-btn--secondary {
	background-color: transparent;
	color: var(--color-text);
	border-color: var(--color-border-2);
}

.la-btn--secondary:hover {
	background-color: var(--color-bg-secondary);
	border-color: var(--color-border-hover);
}

/* Tombol ghost (tanpa border) */
.la-btn--ghost {
	background-color: transparent;
	color: var(--color-text-secondary);
}

.la-btn--ghost:hover {
	background-color: var(--color-bg-secondary);
	color: var(--color-text);
}

/* Ukuran tombol */
.la-btn--sm {
	padding: 6px 14px;
	font-size: var(--font-size-sm);
}

.la-btn--lg {
	padding: 14px 28px;
	font-size: var(--font-size-md);
}

/* Tombol full width */
.la-btn--full {
	width: 100%;
}

/* =====================================================
   KOMPONEN DASAR — CARD
   ===================================================== */

.la-card {
	background-color: var(--color-bg);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	overflow: hidden;
	transition: box-shadow var(--transition-fast), border-color var(--transition-fast);
}

.la-card:hover {
	border-color: var(--color-border-hover);
}

.la-card__body {
	padding: var(--space-md);
}

@media (min-width: 768px) {
	.la-card__body {
		padding: var(--space-lg);
	}
}

/* =====================================================
   SCROLLBAR KUSTOM (Webkit)
   ===================================================== */

::-webkit-scrollbar {
	width: 6px;
	height: 6px;
}

::-webkit-scrollbar-track {
	background: transparent;
}

::-webkit-scrollbar-thumb {
	background-color: var(--color-border);
	border-radius: var(--radius-full);
}

::-webkit-scrollbar-thumb:hover {
	background-color: var(--color-text-tertiary);
}

/* =====================================================
   ANIMASI — Fade & Slide
   Dipakai oleh dropdown, modal, toggle menu.
   ===================================================== */

@keyframes la-fade-in {
	from { opacity: 0; }
	to   { opacity: 1; }
}

@keyframes la-slide-up {
	from { opacity: 0; transform: translateY(8px); }
	to   { opacity: 1; transform: translateY(0); }
}

@keyframes la-slide-left {
	from { transform: translateX(-100%); }
	to   { transform: translateX(0); }
}

/* =====================================================
   PRINT STYLES
   ===================================================== */

@media print {
	body {
		background: #fff;
		color: #000;
		font-size: 12pt;
	}

	/* Sembunyikan elemen navigasi saat cetak */
	.la-navbar,
	.la-bottom-bar,
	.la-toggle-menu {
		display: none !important;
	}
}

/*.la-navbar__logo-img {
	height: 32px !important;
	width: auto !important;
	max-width: none !important;
}

.la-navbar__logo img {
	height: 32px !important;
	width: auto !important;
	max-width: none !important;
}*/

.quiz-time-remaining-expired-circle svg {
    display: none !important;
}


/* HOVER SECTION KELAS DAN KUIS */
.la-ec-card:hover {
    box-shadow: 0 4px 20px rgba(0,0,0,0.07);
}

.la-quiz-course:hover {
    box-shadow: var(--shadow-md);
}

.tutor-badge-label {
	display: inline-flex !important;
	align-items: center !important;
	padding: 4px 8px !important;
	font-size: 12px !important;
	font-weight: var(--font-weight-semibold) !important;
	border-radius: var(--radius-full) !important;
	white-space: nowrap !important;
}