@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700;800;900&display=swap");
@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
	--primary-color: #575c84;
	--secondary-color: #686e9d;
	--tertiary-color: #e06bd5;
	--quaternary-color: #18fff3;
	--quinary-color: #ff775c;
	--senary-color: #ff4359;
	--septenary-color: #76ffb0;
	--bg: #4b39c6;
	--bg1: #e06bd5;
}

html {
	scroll-behavior: smooth;
}

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

body {
	background: #1e1e1e;
	overflow-x: hidden; /* Mencegah scroll horizontal */
}

/* Untuk Webkit Browsers */
::-webkit-scrollbar {
	width: 10px;
}

::-webkit-scrollbar-track {
	background-color: black;
	background: rgb(67, 66, 66);
	box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
	backdrop-filter: blur(31.6px);
	-webkit-backdrop-filter: blur(11.6px);
}

::-webkit-scrollbar-thumb {
	background-color: #888;
	border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
	background-color: #555;
}

/* Untuk Firefox Browsers */
::-moz-scrollbar {
	width: 10px;
}

::-moz-scrollbar-track {
	background-color: black;
}

::-moz-scrollbar-thumb {
	background-color: #888;
	border-radius: 5px;
}

::-moz-scrollbar-thumb:hover {
	background-color: #555;
}

#Home {
	position: relative;
	width: 100%;
	height: auto;
	background: radial-gradient(
			circle,
			rgba(224, 107, 213, 0.8520658263305322) 0%,
			rgba(75, 57, 198, 0.9052871148459384) 100%
		),
		url("/Background.jpeg");
	background-repeat: no-repeat;
	background-size: contain;
	background-position: top;
	z-index: 10;
}

#Home::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 50%;
	background: linear-gradient(to top, rgba(30, 30, 30, 1) 20%, rgba(30, 30, 30, 0));

	z-index: -1;
}

#root {
	font-family: "Poppins", sans-serif;
}

#BoxGallery {
	padding: 10%;
	height: auto;
	width: 100%;
	margin-top: 5%;
	border-radius: 15pt;
	/* From https://css.glass */
	background: rgba(255, 255, 255, 0.05);
	border-radius: 16px;
	box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	border: 1px solid rgba(255, 255, 255, 0.11);
}

#BoxGallery Img {
	filter: brightness(0) invert(1);
}

#BoxOldWeb {
	padding: 10%;
	height: auto;
	width: 100%;
	margin-top: 5%;
	border-radius: 15pt;
	/* From https://css.glass */
	background: rgba(255, 255, 255, 0.14);
	border-radius: 16px;
	box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
	backdrop-filter: blur(6.9px);
	-webkit-backdrop-filter: blur(6.9px);
	border: 1px solid rgba(255, 255, 255, 0.09);
}

#BoxOldWeb Img {
	filter: brightness(0) invert(1);
}

#BoxClassIg {
	padding: 10%;
	height: auto;
	width: 100%;
	margin-top: 5%;
	border-radius: 15pt;
	/* From https://css.glass */
	background: rgba(255, 255, 255, 0.14);
	border-radius: 16px;
	box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
	backdrop-filter: blur(6.9px);
	-webkit-backdrop-filter: blur(6.9px);
	border: 1px solid rgba(255, 255, 255, 0.09);
}

#BoxClassIg Img {
	filter: brightness(0) invert(1);
}

#BoxTextAnonim {
	padding: 10%;
	height: auto;
	width: 100%;
	margin-top: 5%;
	border-radius: 15pt;
	/* From https://css.glass */
	background: rgba(255, 255, 255, 0.14);
	border-radius: 16px;
	box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
	backdrop-filter: blur(6.9px);
	-webkit-backdrop-filter: blur(6.9px);
	border: 1px solid rgba(255, 255, 255, 0.09);
}

#BoxTextAnonim Img {
	filter: brightness(0) invert(1);
}

#TotalSiswa {
	width: 100%;
	margin: 0 auto;
	margin-bottom: 8%;
	background: rgba(255, 255, 255, 0.14);
	border-radius: 25pt;
	box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
	backdrop-filter: blur(6.9px);
	-webkit-backdrop-filter: blur(6.9px);
	border: 1px solid rgba(255, 255, 255, 0.09);
}

#AngkaGradientBlue {
	-webkit-text-stroke: 1px #14a6ef3f; /* Menggunakan efek outline teks dengan warna hitam */
	background: linear-gradient(to bottom right, #96dcff, #14a6ef 55%);
	filter: brightness(1.2);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	text-shadow: #a4dcf893 2px 0 20px;
}

#AngkaGradientPink {
	-webkit-text-stroke: 1px #d41a773d; /* Menggunakan efek outline teks dengan warna hitam */
	background: linear-gradient(to top right, #fab6e7, #d41a77 80%);
	filter: brightness(1.2);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	text-shadow: #d41a77 2px 0 20px;
}

.slick-slide {
	padding: 0 10px;
	box-sizing: border-box;
	transition: transform 0.3s; /* Animasi transform saat hover */
	padding-top: 2em;
	padding-bottom: 2em;
}

.slick-center {
	transform: scale(1.1); /* Memperbesar elemen center */
	z-index: 1; /* Membuat elemen center tumpang tindih elemen lain */
	box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3); /* Efek bayangan */
	border-radius: 10px;
	z-index: 999;
}

#Carousel img {
	height: 300px;
	width: 300px;
	object-fit: cover;
	border-radius: 10px;
}

#Carousel {
	z-index: 99;
}

#SendImg Img,
#SendRequest Img,
#InputChat Img {
	filter: brightness(0) invert(1);
	text-shadow: 0 0 5px rgba(255, 255, 255, 0.5), 0 0 10px rgba(255, 255, 255, 0.5),
		0 0 15px rgba(255, 255, 255, 0.5);
}

#SendImg,
#SendRequest {
	text-shadow: 0 0 5px rgba(255, 255, 255, 0.5), 0 0 10px rgba(255, 255, 255, 0.5),
		0 0 15px rgba(255, 255, 255, 0.5);
	/* From https://css.glass */
	background: rgba(255, 255, 255, 0.14);
	border-radius: 15pt;
	box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
	backdrop-filter: blur(6.9px);
	-webkit-backdrop-filter: blur(6.9px);
	border: 1px solid rgba(255, 255, 255, 0.09);
}

#LayoutIsiButtonRequest {
	background: rgba(255, 255, 255, 0.14);
	border-radius: 50pt;
}

#Mesh1 {
	width: 100%;
	position: absolute;
	background-image: radial-gradient(at -66% 56.8%, hsl(292, 93%, 53%) 0px, transparent 50%);
	background-repeat: no-repeat, no-repeat;
	z-index: -999;
}

#Mesh1 {
	height: 600px;
	top: 110%;
	left: 0;
}


#Tabs {
	background-image: radial-gradient(at 122.3% 55.5%, hsla(292, 93%, 53%, 0.492) 0px, transparent 50%),
		radial-gradient(at 81.4% 65.2%, hsl(0, 0%, 12%) 0px, transparent 50%);
}

#Glow {
	text-shadow: 0 0 5px rgba(255, 255, 255, 0.5), 0 0 10px rgba(255, 255, 255, 0.5),
		0 0 15px rgba(255, 255, 255, 0.5);
}

#UserButton {
	background: rgba(255, 255, 255, 0.14);
	border-radius: 50%;
	box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
	backdrop-filter: blur(6.9px);
	-webkit-backdrop-filter: blur(6.9px);
	border: 1px solid rgba(255, 255, 255, 0.09);
}

#UserButton img {
	filter: brightness(0) invert(1);
}

/* modal.css */

.modal-container,
#modal-container-chat {
	position: absolute;
	z-index: 999;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 90%;
	height: auto;

	background: rgba(255, 255, 255, 0.14);
	border-radius: 15pt;
	box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(6.9px);
	border: 1px solid rgba(255, 255, 255, 0.09);
	padding: 16px;
}

.modal-container {
	max-width: auto;
}

#modal-container-chat {
	width: 90%;
	border-radius: 30pt;
}

#ChatAnonim_lg {
	background: rgba(255, 255, 255, 0.14);
	border-radius: 30pt;
	box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(6.9px);
	border: 1px solid rgba(255, 255, 255, 0.09);
	padding: 20px 40px;
}

.overflow-y-scroll-no-thumb {
	scrollbar-width: none; /* Menyembunyikan thumb (gulir) */
	-ms-overflow-style: none; /* Untuk IE/Edge */
}

/* Stilisasi untuk browser yang mendukung scrollbar kustom (opsional) */
.overflow-y-scroll-no-thumb::-webkit-scrollbar {
	width: 0; /* Lebar scrollbar (opsional) */
}

.overflow-y-scroll-no-thumb::-webkit-scrollbar-thumb {
	background-color: transparent; /* Warna thumb (opsional) */
}

/*  */

#ChatAnonim {
	color: white;
}

#KotakPesan {
	background: rgba(255, 255, 255, 0.14);
	height: 40vh;

	border-radius: 20pt;
	box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(6.9px);
	border: 1px solid rgba(255, 255, 255, 0.09);
	padding: 16px;
	scrollbar-width: thin; /* Lebar scrollbar */
	scrollbar-color: transparent; /* Warna scrollbar (track, thumb) */
}

/* Gaya untuk thumb (grip) scrollbar */
#KotakPesan::-webkit-scrollbar-thumb {
	background-color: transparent; /* Warna thumb scrollbar */
	width: 0px; /* Lebar thumb scrollbar */
}

/* Gaya untuk track scrollbar */
#KotakPesan::-webkit-scrollbar-track {
	background-color: transparent; /* Warna track scrollbar */
}

#InputChat {
	background: rgba(255, 255, 255, 0.14);
	border-radius: 40pt;
	box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(6.9px);
	border: 1px solid rgba(255, 255, 255, 0.09);
	padding: 16px;
}

/* Menghilangkan outline putih saat input dalam fokus */
input:focus {
	outline: none; /* Menghapus outline */
}

#Footer {
	background: linear-gradient(
		to top,
		rgba(218, 9, 229, 0.39) 5%,
		rgba(218, 9, 229, 0.149) 55%,
		rgba(0, 0, 0, 0)
	);
}

#FixTextPoppins {
	font-family: "Poppins", sans-serif;
}

#IsiNavbar {
	/* From https://css.glass */
	background: rgba(255, 255, 255, 0.14);

	box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(6.9px);
	border: 1px solid rgba(255, 255, 255, 0.09);
	padding: 16px;
	z-index: 10;
}

#ImgRating {
	filter: brightness(0) invert(1);
}

/* Untuk dots yang tidak aktif */
.slick-dots li button:before {
	color: rgba(255, 255, 255, 0.6); /* Warna putih dengan tingkat keburaman 60% */
}

/* Untuk dot yang aktif */
.slick-dots li.slick-active button:before {
	color: white; /* Warna putih untuk dot aktif */
}

.sweet-alert-container {
	z-index: 9999; /* Atur z-index sesuai kebutuhan Anda */
}

@media only screen and (min-width: 768px) {
	.slick-slide {
		padding: 20px;
	}
	.modal-container {
		width: auto;
	}
}

@media only screen and (min-width: 550px) {
	#Home {
		background-size: cover;
		background-position: 10% 30%;
	}

	#Home::after {
		content: "";
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 50%;
		background: linear-gradient(to top, rgba(30, 30, 30, 1) 10%, rgba(30, 30, 30, 0));
		z-index: -1;
		transform: scaleY(2); /* Menggunakan scaling untuk meningkatkan kualitas gradasi */
		transform-origin: bottom; /* Titik asal scaling di bagian bawah */
		pointer-events: none; /* Menonaktifkan interaksi dengan elemen overlay */
	}
}

/* #BoxGallery {
	padding: 10%;
	height: auto;
	width: 100%;
	margin-top: 5%;
	border-radius: 15pt;
	background: rgba(255, 255, 255, 0.05);
	border-radius: 16px;
	box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	border: 1px solid rgba(255, 255, 255, 0.11);

	background-image: radial-gradient(at 80% 100%, hsla(282, 97%, 43%, 0) 0px, transparent 50%),
		radial-gradient(at 0% 0%, #ff4359 0px, transparent 60%);
} */
