.search-container{max-width: 650px;margin: 0 auto;position: relative;z-index: 10}.search-box{position: relative;background: var(--bg-card);border: 2px solid var(--border);border-radius: 50px;padding: 0.25rem 0.5rem;display: flex;align-items: center;box-shadow: 0 8px 30px rgba(0,0,0,0.15);transition: all 0.3s ease}.search-box:focus-within{border-color: var(--gold);box-shadow: 0 8px 30px rgba(196,154,43,0.25);transform: translateY(-2px)}.search-icon{font-size: 1.2rem;color: var(--gold);margin-left: 1.25rem;margin-right: 0.75rem}.search-box input{flex: 1;min-width: 0;border: none;background: transparent;padding: 0.8rem 0.5rem;font-size: 1rem;color: var(--text);outline: none}.search-box input::placeholder{color: var(--text-muted);opacity: 0.8}.clear-search{background: var(--bg-2);border: 1px solid var(--border);color: var(--text-muted);width: 32px;height: 32px;border-radius: 50%;cursor: pointer;display: flex;align-items: center;justify-content: center;transition: all 0.2s;margin-right: 0.5rem;flex-shrink: 0}.clear-search:hover{background: var(--crimson);color: #fff;border-color: var(--crimson)}.layanan-main-section{min-height: 500px;position: relative}.instansi-layanan-grid{display: grid;grid-template-columns: repeat(auto-fill,minmax(280px,1fr));gap: 2rem;transition: opacity 0.4s ease,transform 0.4s ease}.instansi-layanan-card{background: var(--bg-card);border: 1px solid var(--border);border-radius: 16px;padding: 2rem 1.5rem;text-align: center;box-shadow: 0 4px 20px var(--shadow);cursor: pointer;transition: all 0.35s cubic-bezier(0.25,0.8,0.25,1);position: relative;overflow: hidden;display: flex;flex-direction: column;align-items: center;height: 100%;will-change: transform,box-shadow;color: inherit;text-decoration: none}.instansi-layanan-card::before{content: '';position: absolute;top: 0;left: 0;right: 0;height: 4px;background: linear-gradient(90deg,var(--navy),var(--teal));opacity: 0.8}.instansi-layanan-card:hover{transform: translateY(-8px);box-shadow: 0 16px 36px var(--shadow);border-color: var(--gold);color: inherit}.instansi-layanan-card:hover::before{background: linear-gradient(90deg,var(--gold),var(--gold-light))}.card-backlight{position: absolute;width: 120px;height: 120px;background: radial-gradient(circle,rgba(196,154,43,0.15) 0%,transparent 70%);top: 20%;pointer-events: none;z-index: 1;opacity: 0;transition: opacity 0.3s}.instansi-layanan-card:hover .card-backlight{opacity: 1}.instansi-layanan-logo{width: 90px;height: 90px;margin-bottom: 1.5rem;display: flex;align-items: center;justify-content: center;background: var(--bg-2);border-radius: 50%;border: 2px solid var(--border);padding: 0.75rem;position: relative;z-index: 2;transition: transform 0.4s ease}.instansi-layanan-card:hover .instansi-layanan-logo{transform: scale(1.08);border-color: var(--gold)}.instansi-layanan-logo img{max-width: 100%;max-height: 100%;object-fit: contain;opacity: 0;transition: opacity 0.4s ease}.instansi-layanan-logo img.img-loaded{opacity: 1}.instansi-layanan-logo-loader{position: absolute;top: 0;left: 0;width: 100%;height: 100%;display: flex;align-items: center;justify-content: center;background: transparent;z-index: 1;transition: opacity 0.3s ease,visibility 0.3s ease}.instansi-layanan-logo-spinner{width: 20px;height: 20px;border: 2px solid rgba(196,154,43,0.15);border-top-color: var(--gold-light);border-radius: 50%;animation: logo-spin 0.8s linear infinite}@keyframes logo-spin{to{transform: rotate(360deg)}}.instansi-layanan-logo img.img-loaded ~ .instansi-layanan-logo-loader{opacity: 0;visibility: hidden}.instansi-layanan-name{font-family: 'Cinzel',serif;font-size: 1rem;font-weight: 700;color: var(--text);margin-bottom: 0.75rem;line-height: 1.4;flex-grow: 1;z-index: 2}.instansi-layanan-count{display: inline-block;font-size: 0.75rem;font-weight: 700;color: var(--accent);background: rgba(196,154,43,0.12);padding: 0.3rem 0.8rem;border-radius: 30px;margin-bottom: 1.25rem;z-index: 2}[data-theme="dark"] .instansi-layanan-count{background: rgba(232,191,90,0.12)}.instansi-layanan-btn{font-size: 0.8rem;font-weight: 700;color: var(--text);display: flex;align-items: center;gap: 0.4rem;transition: color 0.2s,transform 0.2s;border-top: 1px solid var(--border);width: 100%;justify-content: center;padding-top: 1rem;margin-top: auto;z-index: 2}.instansi-layanan-card:hover .instansi-layanan-btn{color: var(--gold)}.instansi-layanan-card:hover .instansi-layanan-btn i{transform: translateX(4px)}.search-results-info{font-size: 0.9rem;color: var(--text-muted);margin-bottom: 2rem;display: none;align-items: center;gap: 0.5rem}.empty-state{display: none;text-align: center;padding: 4rem 2rem;background: var(--bg-card);border: 1px dashed var(--border);border-radius: 16px;max-width: 500px;margin: 2rem auto}.empty-icon{font-size: 3.5rem;color: var(--text-muted);margin-bottom: 1.5rem;opacity: 0.6}.empty-state h3{font-family: 'Cinzel',serif;font-size: 1.1rem;font-weight: 700;color: var(--text);margin-bottom: 0.5rem}.empty-state p{font-size: 0.82rem;color: var(--text-muted)}@media (min-width: 769px) {.instansi-layanan-grid.list-layout {grid-template-columns: 1fr !important;gap: 1.25rem !important}.instansi-layanan-grid.list-layout .instansi-layanan-card {display: grid !important;grid-template-columns: 70px 1fr auto !important;grid-template-rows: auto auto !important;gap: 0.25rem 1.5rem !important;align-items: center !important;padding: 1.25rem 2rem !important;height: auto !important;text-align: left !important}.instansi-layanan-grid.list-layout .instansi-layanan-card:hover {transform: translateX(6px) !important;box-shadow: 0 10px 25px var(--shadow) !important}.instansi-layanan-grid.list-layout .instansi-layanan-logo {grid-column: 1 !important;grid-row: 1 / span 2 !important;width: 70px !important;height: 70px !important;margin: 0 !important}.instansi-layanan-grid.list-layout .instansi-layanan-name {grid-column: 2 !important;grid-row: 1 !important;margin: 0 !important;font-size: 1.1rem !important;text-align: left !important;flex-grow: unset !important}.instansi-layanan-grid.list-layout .instansi-layanan-count {grid-column: 2 !important;grid-row: 2 !important;margin: 0 !important;justify-self: start !important}.instansi-layanan-grid.list-layout .instansi-layanan-btn {grid-column: 3 !important;grid-row: 1 / span 2 !important;margin: 0 !important;border-top: none !important;padding-top: 0 !important;width: auto !important;justify-self: end !important}}@media (max-width: 768px) {.instansi-layanan-grid.list-layout {grid-template-columns: 1fr !important;gap: 0.75rem !important}.instansi-layanan-grid.list-layout .instansi-layanan-card {display: grid !important;grid-template-columns: 50px 1fr auto !important;grid-template-rows: auto auto !important;gap: 0.25rem 1rem !important;align-items: center !important;padding: 0.75rem 1rem !important;height: auto !important;text-align: left !important}.instansi-layanan-grid.list-layout .instansi-layanan-card:hover {transform: none !important}.instansi-layanan-grid.list-layout .instansi-layanan-logo {grid-column: 1 !important;grid-row: 1 / span 2 !important;width: 50px !important;height: 50px !important;margin: 0 !important;padding: 0.4rem !important}.instansi-layanan-grid.list-layout .instansi-layanan-name {grid-column: 2 !important;grid-row: 1 !important;margin: 0 !important;font-size: 0.95rem !important;text-align: left !important;flex-grow: unset !important;line-height: 1.3 !important}.instansi-layanan-grid.list-layout .instansi-layanan-count {grid-column: 2 !important;grid-row: 2 !important;margin: 0 !important;justify-self: start !important;padding: 0.15rem 0.5rem !important;font-size: 0.65rem !important}.instansi-layanan-grid.list-layout .instansi-layanan-btn {grid-column: 3 !important;grid-row: 1 / span 2 !important;margin: 0 !important;border-top: none !important;padding-top: 0 !important;width: auto !important;justify-self: end !important}.instansi-layanan-grid.list-layout .instansi-layanan-btn span {display: none !important}}