* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
            background-color: #f8f9fa;
            overflow-x: hidden;
        }

		
        /* TOP BAR */
        .top-bar {
            background: #FEE50F;
            padding: 8px 0px;
            font-size: 14px;
            width: 100%;
			
        }
        
        .top-bar-content {
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 100%;
            max-width: 1200px;
            margin: 0 auto;
			
        }
        
        .contact-info {
            display: flex;
            align-items: center;
            gap: 20px;
        }
        
        .contact-info i {
            margin-right: 5px;
            color: #333;
        }
        
        /* HEADER CUSTOM */
        .header-custom {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 7px 40px;
            background: white;
            box-shadow: 0 2px 10px rgba(0,0,0,0.05);
            width: 100%;
        }
        
        .header-container {
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 100%;
            max-width: 1400px;
            margin: 0 auto;
        }
        
        /* Brand/Logo section */
        .brand-section {
            display: flex;
            align-items: center;
            gap: 12px;
        }
        
        .logo-img {
            height: 45px;
            width: auto;
        }
        
        .brand-text {
            display: flex;
            flex-direction: column;
        }
        
        .brand-text h1 {
            font-size: 1.2rem;
            margin: 0;
            color: #343a40;
            font-weight: 600;
            line-height: 1.2;
        }
        
        .brand-text h2 {
            font-size: 0.8rem;
            margin: 0;
            color: #6c757d;
            font-weight: 400;
            line-height: 1.2;
        }
        
        /* Navigation menu */
        .header-menu ul {
            display: flex;
            gap: 25px;
            list-style: none;
            margin: 0;
            padding: 0;
        }
        
        .nav-menu a {
            text-decoration: none;
            color: #000;
            font-weight: 500;
            padding-bottom: 5px;
            position: relative;
            transition: all 0.3s ease;
        }
        
        .nav-menu a:hover {
            color: #000;
        }
        
        /* Efek underline kuning untuk menu */
        .nav-menu a:hover:after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 40%;
            height: 2px;
            background-color: #FFC107;
            border-radius: 2px;
            opacity: 0.7;
        }
        
        .nav-menu .active a {
            color: #000;
            font-weight: 600;
        }
        
        .nav-menu .active a:after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 70%;
            height: 3px;
            background-color: #FFC107;
            border-radius: 2px;
        }
        
        /* Right section */
		.header-right {
			display: flex;
			align-items: center;
			gap: 25px;
		}

		/* Search form - dengan kotak terpisah */
		.search-form {
			display: flex;
			align-items: center;
			gap: 5px;  /* beri jarak antar kotak */
		}

		.search-form input {
			border: 1px solid #000;
			border-radius: 5px;  /* kotak persegi */
			height: 38px;
			padding: 0 10px;
			width: 200px;
			font-size: 16px;
		}

		.search-form input:focus {
			border-color: #333;
			outline: none;
		}

		.search-form button {
			background: white;
			border: 1px solid #000;
			border-radius: 5px;  /* kotak persegi */
			height: 38px;
			padding: 0 12px;
			cursor: pointer;
			color: #666;
		}

		.search-form button:hover {
			background: #666;
			border-color: #666;
			color: #000;
		}

		/* Account link */
		/* Account Dropdown Styles */
        .account-dropdown {
            position: relative;
            display: inline-block;
        }

        .account-link.dropdown-toggle {
            color: #333;
            text-decoration: none;
            font-size: 14px;
            font-weight: 400;
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 8px 15px;
            border-radius: 6px;
            transition: all 0.3s ease;
            cursor: pointer;
            background: #f8f9fa;
        }

        .account-link.dropdown-toggle i:first-child {
            color: #666;
        }

        .account-link.dropdown-toggle i:last-child {
            font-size: 12px;
            transition: transform 0.3s ease;
            margin-left: 5px;
        }

        /*.account-link.dropdown-toggle:hover {
            background-color: #FEE50F;
        }*/

        .account-link.dropdown-toggle:hover i:first-child {
            color: #333;
        }

        .account-link.dropdown-toggle:hover i:last-child {
            transform: rotate(180deg);
        }

        .account-dropdown .dropdown-menu {
            position: absolute;
            top: 100%;
            right: 0;
            left: auto;
            min-width: 220px;
            background: white;
            box-shadow: 0 10px 30px rgba(0,0,0,0.15);
            border-radius: 8px;
            padding: 10px 0;
            border: 1px solid #eee;
            z-index: 1000;
            display: none;
            margin-top: 5px;
        }

        .account-dropdown .dropdown-menu.show {
            display: block;
        }

        /* Dropdown header */
        .account-dropdown .dropdown-header {
            padding: 8px 20px;
            font-size: 12px;
            font-weight: 600;
            color: #666;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            background: #f8f9fa;
            margin: 5px 0;
        }

        /* Dropdown items */
        .account-dropdown .dropdown-item {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 10px 20px;
            color: #333;
            font-size: 14px;
            text-decoration: none;
            transition: all 0.3s ease;
        }

        .account-dropdown .dropdown-item:hover {
            background-color: #FEE50F;
            color: #000;
        }

        .account-dropdown .dropdown-item i {
            width: 18px;
            font-size: 14px;
            color: #666;
        }

        .account-dropdown .dropdown-item:hover i {
            color: #333;
        }

        /* Dropdown divider */
        .account-dropdown .dropdown-divider {
            height: 1px;
            background-color: #eee;
            margin: 8px 0;
        }

        /* Icon colors */
        .account-dropdown .dropdown-item i.fa-user-graduate {
            color: #28a745; /* Hijau untuk anggota */
        }

        .account-dropdown .dropdown-item i.fa-user-plus {
            color: #007bff; /* Biru untuk pendaftaran */
        }

        .account-dropdown .dropdown-item i.fa-user-tie {
            color: #666; /* Abu-abu untuk pustakawan */
        }

        .account-dropdown .dropdown-item i.fa-key {
            color: #ffc107; /* Kuning untuk lupa password */
        }

        /* Responsive */
        @media (max-width: 768px) {
            .account-dropdown {
                width: 100%;
            }
            
            .account-link.dropdown-toggle {
                justify-content: center;
                width: 100%;
            }
            
            .account-dropdown .dropdown-menu {
                position: static;
                width: 100%;
                box-shadow: none;
                border: 1px solid #eee;
                margin-top: 5px;
            }
            
            .account-dropdown .dropdown-item {
                justify-content: center;
            }
            
            .account-dropdown .dropdown-header {
                text-align: center;
            }
        }


        /* Avatar and basket */
        .avatar {
            width: 30px;
            height: 30px;
            border-radius: 50%;
            object-fit: cover;
        }
        
        .basket-count {
            background: red;
            color: white;
            font-size: 11px;
            padding: 2px 6px;
            border-radius: 10px;
            position: relative;
            top: -8px;
            left: -5px;
        }
        
      
       /* Hero section dengan gambar */
		.hero-section {
			position: relative;
			width: 100%;
			height: 500px; /* Atur tinggi sesuai kebutuhan */
			overflow: hidden;
		}

		.hero-img {
			width: 100%;
			height: 100%;
			object-fit: cover; /* Agar gambar menutupi area tanpa distortion */
			display: block;
		}

		.hero-content {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			text-align: center;
			color: white;
			z-index: 2;
			width: 90%;
			max-width: 800px;
			text-shadow: 2px 2px 4px rgba(0,0,0,0.5); /* Agar teks lebih terbaca di atas gambar */
		}

		/* Overlay gelap agar teks lebih terbaca (opsional) */
		.hero-section::after {
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background: rgba(0,0,0,0.5); /* Gelapkan gambar 40% */
			z-index: 1;
		}

		.hero-section h1 {
			font-size: 2.5rem;
			margin-bottom: 20px;
			font-weight: 600;
		}

		.hero-section p {
			font-size: 1.2rem;
			margin-bottom: 30px;
			opacity: 0.95;
		}
        
		/* Featured Section - Satu Foto dengan Deskripsi */

		.featured-section {
			padding: 80px 30px;
			background-color: white;
			width: 100%;
		}

		.container-custom {
			max-width: 1200px;
			margin: 0 auto;
		}

		.featured-wrapper {
			display: flex;
			align-items: center;
			gap: 150px;
		}

		.featured-image {
			flex: 1;
			border-radius: 10px;
			overflow: hidden;
			box-shadow: 0 10px 30px rgba(0,0,0,0.15);
		}

		.featured-image img {
			width: 100%;
			height: auto;
			display: block;
			transition: transform 0.5s ease;
		}

		.featured-image:hover img {
			transform: scale(1.03);
		}

		.featured-content {
			flex: 1;
		}

		.featured-title {
			font-size: 2.2rem;
			font-weight: 600;
			color: #333;
			margin-bottom: 20px;
			position: relative;
			padding-bottom: 15px;
		}

		.featured-title:after {
			content: '';
			position: absolute;
			bottom: 0;
			left: 0;
			width: 80px;
			height: 3px;
			background-color: #FEE50F;
		}

		.featured-description {
			font-size: 1.1rem;
			color: #666;
			line-height: 1.8;
			margin-bottom: 30px;
		}


		.btn-featured:hover {
			background: #f0d800;
			color: #333;
			text-decoration: none;
			transform: translateX(5px);
		}

		.btn-featured i {
			transition: transform 0.3s ease;
		}

		.btn-featured:hover i {
			transform: translateX(5px);
		}

		/* Responsive */
		@media (max-width: 992px) {
			.featured-wrapper {
				flex-direction: column;
				gap: 30px;
			}
			
			.featured-image {
				width: 100%;
			}
			
			.featured-title {
				font-size: 1.8rem;
			}
		}

		@media (max-width: 768px) {
			.featured-section {
				padding: 60px 20px;
			}
			
			.featured-stats {
				flex-wrap: wrap;
				justify-content: center;
			}
			
			.featured-list ul {
				grid-template-columns: 1fr;
			}
			
			.stat-number {
				font-size: 1.5rem;
			}
		}

		@media (max-width: 576px) {
			.featured-section {
				padding: 40px 15px;
			}
			
			.featured-title {
				font-size: 1.5rem;
			}
			
			.featured-description {
				font-size: 1rem;
			}
		}


		/* Hours Section - Jam Operasional */
		.hours-section {
			padding: 80px 30px;
			background-color: #f8f9fa;
			width: 100%;
		}

		.section-header {
			text-align: center;
			margin-bottom: 50px;
		}

		.section-title {
			font-size: 2.2rem;
			font-weight: 600;
			color: #333;
			margin-bottom: 15px;
			position: relative;
			padding-bottom: 15px;
		}

		.section-title:after {
			content: '';
			position: absolute;
			bottom: 0;
			left: 50%;
			transform: translateX(-50%);
			width: 80px;
			height: 3px;
			background-color: #FEE50F;
		}

		.section-subtitle {
			font-size: 1.1rem;
			color: #666;
			max-width: 700px;
			margin: 0 auto;
		}

		.hours-wrapper {
			display: grid;
			grid-template-columns: repeat(4, 1fr);
			gap: 25px;
			margin-bottom: 40px;
		}

		.hours-card {
			background: white;
			padding: 30px 20px;
			border-radius: 10px;
			text-align: center;
			box-shadow: 0 5px 15px rgba(0,0,0,0.08);
			transition: all 0.3s ease;
			border-bottom: 3px solid transparent;
		}

		.hours-card:hover {
			transform: translateY(-5px);
			box-shadow: 0 10px 25px rgba(0,0,0,0.15);
		}

		.hours-card.closed {
			background: #fff3f3;
			border-bottom-color: #dc3545;
		}

		.hours-card.break {
			background: #fff9e6;
			border-bottom-color: #FEE50F;
		}

		.hours-icon {
			width: 70px;
			height: 70px;
			background: #FEE50F;
			border-radius: 50%;
			display: flex;
			align-items: center;
			justify-content: center;
			margin: 0 auto 20px;
		}

		.hours-icon i {
			font-size: 30px;
			color: #333;
		}

		.hours-card.closed .hours-icon {
			background: #dc3545;
		}

		.hours-card.closed .hours-icon i {
			color: white;
		}

		.hours-card.break .hours-icon {
			background: #FEE50F;
		}

		.hours-card h3 {
			font-size: 1.2rem;
			font-weight: 600;
			color: #333;
			margin-bottom: 15px;
		}

		.hours-time {
			margin-bottom: 10px;
		}

		.time-open, .time-close {
			font-size: 1.5rem;
			font-weight: 700;
			color: #333;
		}

		.time-separator {
			font-size: 1.5rem;
			font-weight: 400;
			color: #999;
			margin: 0 5px;
		}

		.time-closed {
			font-size: 1.5rem;
			font-weight: 700;
			color: #dc3545;
			text-transform: uppercase;
		}

		.hours-note {
			font-size: 0.9rem;
			color: #666;
			margin: 0;
		}

		.hours-card.closed .hours-note {
			color: #dc3545;
			font-weight: 500;
		}

		/* Informasi Tambahan */
		.hours-info {
			max-width: 800px;
			margin: 0 auto;
			background: white;
			padding: 25px 30px;
			border-radius: 10px;
			box-shadow: 0 5px 15px rgba(0,0,0,0.05);
		}

		.info-item {
			display: flex;
			align-items: center;
			gap: 15px;
			padding: 10px 0;
			border-bottom: 1px solid #eee;
		}

		.info-item:last-child {
			border-bottom: none;
		}

		.info-item i {
			width: 30px;
			height: 30px;
			background: #FEE50F;
			border-radius: 50%;
			display: flex;
			align-items: center;
			justify-content: center;
			color: #333;
			font-size: 14px;
		}

		.info-item span {
			font-size: 1rem;
			color: #555;
		}

		/* Responsive */
		@media (max-width: 992px) {
			.hours-wrapper {
				grid-template-columns: repeat(2, 1fr);
				gap: 20px;
			}
		}

		@media (max-width: 768px) {
			.hours-section {
				padding: 60px 20px;
			}
			
			.section-title {
				font-size: 1.8rem;
			}
			
			.hours-wrapper {
				grid-template-columns: 1fr;
				gap: 15px;
			}
			
			.hours-card {
				padding: 25px 15px;
			}
			
			.hours-icon {
				width: 60px;
				height: 60px;
			}
			
			.hours-icon i {
				font-size: 24px;
			}
			
			.time-open, .time-close, .time-separator, .time-closed {
				font-size: 1.3rem;
			}
			
			.hours-info {
				padding: 20px;
			}
			
			.info-item {
				flex-direction: column;
				text-align: center;
				gap: 8px;
			}
		}

		@media (max-width: 576px) {
			.hours-section {
				padding: 40px 15px;
			}
			
			.section-title {
				font-size: 1.5rem;
			}
		}



        /* Cards section 
        .cards-section {
            padding: 60px 30px;
            width: 100%;
        }
        
        .cards-container {
            max-width: 1400px;
            margin: 0 auto;
        }
        
        .card {
            border: none;
            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
            border-radius: 8px;
            transition: transform 0.3s ease;
            height: 100%;
        }
        
        .card:hover {
            transform: translateY(-5px);
        }
        
        .card-body {
            padding: 25px 20px;
        }*/
        
        /* Footer */
        footer {
            background-color: #f8f9fa;
            padding: 20px 30px;
            border-top: 1px solid #dee2e6;
            width: 100%;
            text-align: center;
        }
        
        .footer-container {
            max-width: 1400px;
            margin: 0 auto;
        }
        
        /* Responsive */
		
        @media (max-width: 1200px) {
            .top-bar,
            .header-custom {
                padding: 7px 20px;
            }
			
        }
        
        @media (max-width: 992px) {
            .header-container {
                flex-wrap: wrap;
            }
            
            .brand-section {
                width: 100%;
                justify-content: center;
                margin-bottom: 15px;
            }
            
            .header-menu ul {
                flex-wrap: wrap;
                justify-content: center;
                gap: 15px;
            }
            
            .header-right {
                width: 100%;
                justify-content: center;
                margin-top: 15px;
            }
            
            .top-bar-content {
                flex-direction: column;
                gap: 5px;
                text-align: center;
            }
            
            .contact-info {
                flex-wrap: wrap;
                justify-content: center;
            }
            
            /* Efek underline untuk mobile */
            .nav-menu .active a:after {
                left: 0;
                transform: none;
                width: 50px;
            }
            
            .nav-menu a:hover:after {
                left: 0;
                transform: none;
                width: 30px;
            }
        }
        
        @media (max-width: 768px) {
			.hero-section {
				height: 400px;
			}
			
			.hero-section h1 {
				font-size: 1.8rem;
			}
			
			.hero-section p {
				font-size: 1rem;
			}
		}

		@media (max-width: 576px) {
			.hero-section {
				height: 350px;
			}
			
			.hero-section h1 {
				font-size: 1.5rem;
			}
		}
        
        
        /* Utility classes */
        .text-warning {
            color: #FFC107 !important;
        }
        
        .btn-light {
            background-color: white;
            border-color: white;
            color: #333;
        }
        
        .btn-light:hover {
            background-color: #f8f9fa;
            border-color: #f8f9fa;
        }
        
        .btn-outline-light {
            border-color: white;
            color: white;
        }
        
        .btn-outline-light:hover {
            background-color: white;
            color: #333;
        }