@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&display=swap');
        
        body {
            font-family: 'Inter', sans-serif;
            scroll-behavior: smooth;
        }

        @keyframes slideDown {
            from { opacity: 0; transform: translateY(-10px); }
            to { opacity: 1; transform: translateY(0); }
        }

        .mobile-menu {
            transition: transform 0.3s ease-in-out;
        }

        .mobile-menu.hidden-custom {
            transform: translateX(100%);
        }
		
		.hero{
			background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
		}
		
		#navbar{
			display: flex;
			justify-content: center;        /* justify-center */
			color: #4b5563;                 /* text-gray-600 */
			font-weight: 500; /* font-medium */
		}
		#navbar > li{
			margin: 0 1rem;              /* space-x-8 (8 * 0.25rem) */
		}
		
		#loggedInUI #user-actions .nmi_type_user_dashboard > a{
			display: block;
			align-items: center;
			gap: 0.5rem; /* gap-2 */
			padding: 0.5rem 1rem; /* px-4 py-2 */
			background-color: #f3f4f6; /* bg-gray-100 */
			border-radius: 9999px; /* rounded-full */
			transition: background-color 0.2s; /* transition */
			font-weight: 500; /* font-medium */
			text-decoration: none;
			color: #374151;
			border: none;
			cursor: pointer;
		}
		
		#loggedInUI #user-actions .nmi_type_user_dashboard > a:hover {
			background-color: #e5e7eb; /* hover:bg-gray-200 */
		}

		.dropdown ul {
			position: absolute;
			background-color: #ffffff; /* bg-white */
			box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); /* shadow-xl */
			border-radius: 0.5rem; /* rounded-lg */
			padding-top: 0.5rem; /* py-2 */
			padding-bottom: 0.5rem; /* py-2 */
			margin-top: 0.5rem; /* mt-2 */
			width: 12rem; /* w-48 (48 * 0.25rem) */
			border: 1px solid #f3f4f6; /* border-gray-100 */
			z-index: 1000;
			opacity: 0;
            visibility: hidden;
            transform: translateY(10px);
			transition: all 0.2s ease;
		}
		#loggedInUI .dropdown ul {
			right: 0;
		}
		#loggedInUI .dropdown ul li:last-child a{
			color: rgb(220, 38, 38, 1);
			background: rgb(220, 38, 38, 0.1);
		}
		
        .dropdown:hover ul {
            /*
			display: block;
            animation: slideDown 0.3s ease-out; 
			*/
            opacity: 1;
            visibility: visible;
            transform: translateY(0);
        }

		.dropdown ul li a {
			display: block;
			padding: 0.5rem 1rem;
			color: #374151;
			text-decoration: none;
			font-size: 0.875rem;
		}
		.dropdown ul li:hover {
			background: #f3f4f6;
			color: #374151;
		}
		
		/* mobileMenu */
		#mobileMenu #navbar{
			display: block;
		}
		#mobileMenu li{
			padding: 0.5rem 0;
		}
		#mobileMenu .bi-chevron-down{
			position: absolute;
			right: 2rem;
		}
		
		/** footer **/
		footer h3 {
			color: #ffffff;
			font-size: 1.25rem;
			line-height: 1.75rem;
			font-weight: 700;
			margin-bottom: 1.5rem;
		}		
		footer li {	
			margin-top: 0.75rem; /* 12px */
			font-size: 14px;
		}
		
		
        .input-focus-effect:focus-within {
            border-color: #3b82f6;
            box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1);
        }
        .animate-float {
            animation: float 6s ease-in-out infinite;
        }
        @keyframes float {
            0%, 100% { transform: translateY(0px); }
            50% { transform: translateY(-20px); }
        }
        .blob {
            position: absolute;
            width: 300px;
            height: 300px;
            background: linear-gradient(180deg, rgba(59, 130, 246, 0.2) 0%, rgba(37, 99, 235, 0.2) 100%);
            filter: blur(50px);
            border-radius: 50%;
            z-index: -1;
        }
		
		
        .form-input-focus {
            transition: all 0.3s ease;
        }
        .form-input-focus:focus {
            ring: 2px;
            ring-color: #2563eb;
            border-color: #2563eb;
            transform: translateY(-2px);
        }
        .hidden-custom { display: none !important; }
        
        /* Custom Checkbox */
        input[type="checkbox"] {
            width: 1.2rem;
            height: 1.2rem;
            cursor: pointer;
        }
		
		
		
        .search-input-focus:focus-within {
            ring: 2px;
            ring-color: #2563eb;
            border-color: #2563eb;
        }
        .custom-scrollbar::-webkit-scrollbar {
            width: 6px;
        }
        .custom-scrollbar::-webkit-scrollbar-thumb {
            background-color: #e2e8f0;
            border-radius: 10px;
        }
		

/** halaman artikel **/

.konten-artikel > p:first-child::first-letter {
  font-size: 3rem;       /* text-5xl (kira-kira 48px) */
  font-weight: 700;      /* font-bold */
  color: #2563eb;        /* text-blue-600 */
  margin-right: 0.75rem; /* mr-3 (12px) */
  float: left;           /* float-left */
  line-height: 1;
}

.konten-artikel p {
  margin-bottom: 1rem;          /* my-8 (32px) */
}
.konten-artikel p span {
  background-color: #eff6ff;    /* bg-blue-50 */
  border-left: 4px solid #3b82f6; /* border-l-4 border-blue-500 */
  padding: 1.5rem;              /* p-6 (24px) */
  border-top-right-radius: 0.75rem;    /* rounded-r-xl (bagian atas kanan) */
  border-bottom-right-radius: 0.75rem; /* rounded-r-xl (bagian bawah kanan) */
  margin-top: 2rem;             /* my-8 (32px) */
  margin-bottom: 2rem;          /* my-8 (32px) */
  font-style: italic;           /* italic */
  color: #1e3a8a;               /* text-blue-900 */
}


        /* Custom Gradient for Header */
        .header-gradient {
            background: linear-gradient(135deg, #1e40af 0%, #3b82f6 100%);
        }
        /* Checklist Style */
        .checklist-item {
            display: flex;
            align-items: flex-start;
            gap: 1rem;
            margin-bottom: 1rem;
            padding: 1rem;
            background: white;
            border-radius: 0.75rem;
            border: 1px solid #e5e7eb;
            transition: all 0.3s ease;
        }
        .checklist-item:hover {
            transform: translateX(10px);
            border-color: #3b82f6;
            box-shadow: 0 4px 12px rgba(0,0,0,0.05);
        }
		
.author-guidlines ol,
.author-guidlines ul {
  /*display: grid;
  /* Default: 1 kolom (untuk layar HP/Mobile) */
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 1.5rem; /* Sama dengan gap-6 (6 x 0.25rem) */
}
@media (min-width: 768px) {
	.author-guidlines ol,
	.author-guidlines ul {
	  /* Default: 1 kolom (untuk layar HP/Mobile) */
	  grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
.author-guidlines li {
  /* border-l-2 */
  border-left-width: 2px;
  border-left-style: solid;
  
  /* border-slate-200 */
  border-left-color: #e2e8f0; 
  
  /* pl-4 py-2 */
  padding-left: 1rem;       /* 4 x 0.25rem = 16px */
  padding-top: 0.5rem;      /* 2 x 0.25rem = 8px */
  padding-bottom: 0.5rem;   /* 2 x 0.25rem = 8px */
  margin-bottom: 1rem;
  /* transition */
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

/* hover:border-blue-400 */
.author-guidlines li:hover {
  border-left-color: #60a5fa;
}



/** bagian current artikel**/
        .article-card {
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }
        .article-card:hover {
            transform: translateY(-8px);
            box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
        }
        .gradient-bg {
            background: linear-gradient(135deg, #1e40af 0%, #3b82f6 100%);
        }
        .glass-morphism {
            background: rgba(255, 255, 255, 0.9);
            backdrop-filter: blur(10px);
        }
        .custom-scrollbar::-webkit-scrollbar {
            width: 6px;
        }
        .custom-scrollbar::-webkit-scrollbar-thumb {
            background: #cbd5e1;
            border-radius: 10px;
        }