:root{--color-primary: #A50104;--color-primary-dark: #7d0103;--color-primary-light: #c50105;--color-secondary: #FCBA04;--color-secondary-dark: #e0a603;--color-white: #ffffff;--color-gray-50: #f9fafb;--color-gray-100: #f3f4f6;--color-gray-200: #e5e7eb;--color-gray-300: #d1d5db;--color-gray-400: #9ca3af;--color-gray-500: #6b7280;--color-gray-600: #4b5563;--color-gray-700: #374151;--color-gray-800: #1f2937;--color-gray-900: #111827;--color-success: #10b981;--color-warning: #f59e0b;--color-error: #ef4444;--color-info: #3b82f6;--spacing-xs: .25rem;--spacing-sm: .5rem;--spacing-md: 1rem;--spacing-lg: 1.5rem;--spacing-xl: 2rem;--spacing-2xl: 3rem;--spacing-3xl: 4rem;--font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;--font-size-xs: .75rem;--font-size-sm: .875rem;--font-size-base: 1rem;--font-size-lg: 1.125rem;--font-size-xl: 1.25rem;--font-size-2xl: 1.5rem;--font-size-3xl: 1.875rem;--font-size-4xl: 2.25rem;--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, .05);--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, .1);--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, .1);--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, .1);--radius-sm: .25rem;--radius-md: .5rem;--radius-lg: .75rem;--radius-xl: 1rem;--transition-fast: .15s ease-in-out;--transition-base: .3s ease-in-out;--header-height: 70px;--container-max: 1200px}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}[data-theme=dark]{--color-white: #1f2937;--color-gray-50: #111827;--color-gray-100: #374151;--color-gray-200: #4b5563;--color-gray-600: #9ca3af;--color-gray-700: #d1d5db;--color-gray-800: #f3f4f6;--color-gray-900: #ffffff;--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, .5);--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, .5);--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, .5)}[data-theme=dark] body{background-color:var(--color-gray-50);color:var(--color-gray-800)}[data-theme=dark] .header,[data-theme=dark] .nav,[data-theme=dark] .service-card,[data-theme=dark] .stats__item,[data-theme=dark] .article-card,[data-theme=dark] .gallery-item,[data-theme=dark] .modal-box{background-color:var(--color-white);border-color:var(--color-gray-200)}[data-theme=dark] .section--gray{background-color:var(--color-gray-50)}[data-theme=dark] .form__input,[data-theme=dark] .form__select,[data-theme=dark] .form__textarea{background-color:#374151;border-color:#4b5563;color:#fff}[data-theme=dark] .upload-box{background-color:#374151;border-color:#4b5563}html{scroll-behavior:smooth}body{font-family:var(--font-family);font-size:var(--font-size-base);line-height:1.6;color:var(--color-gray-800);background-color:var(--color-white);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}img{max-width:100%;height:auto;display:block}button{font-family:inherit;cursor:pointer}a{color:inherit;text-decoration:none}.container{max-width:var(--container-max);margin:0 auto;padding:0 var(--spacing-lg)}.required{color:var(--color-error)}.error-text{color:var(--color-error);font-weight:500}.tracking-number-highlight{font-weight:700;color:var(--color-primary);background-color:var(--color-secondary);padding:0 var(--spacing-sm);border-radius:var(--radius-sm);display:inline-block}.header{position:sticky;top:0;z-index:1000;background-color:var(--color-white);box-shadow:var(--shadow-md);transition:box-shadow var(--transition-fast)}.header__content{display:flex;align-items:center;justify-content:space-between;height:var(--header-height)}.header__logo{display:flex;align-items:center;gap:var(--spacing-md);font-weight:700;font-size:var(--font-size-xl);color:var(--color-primary);animation:fadeInDown .5s ease-out}.header__logo img{width:48px;height:48px;object-fit:contain;transition:transform var(--transition-fast)}.header__title{display:none}.nav{position:relative;right:0;width:auto;height:auto;background-color:transparent;box-shadow:none;padding:0;transition:none;z-index:auto}.nav__overlay{display:none;position:fixed;inset:0;z-index:1000;background-color:#0000;transition:background-color var(--transition-base)}.nav__list{display:flex;gap:var(--spacing-xl);list-style:none}.nav__link{position:relative;padding:var(--spacing-sm) 0;font-weight:500;color:var(--color-gray-700);transition:color var(--transition-fast)}.nav__link:hover,.nav__link:focus{color:var(--color-primary)}.nav__link--active{color:var(--color-primary)}.nav__link--active:after{content:"";position:absolute;bottom:0;left:0;right:0;height:2px;background-color:var(--color-primary);transition:transform var(--transition-fast);transform:scaleX(1)}.nav__link:not(.nav__link--active):after{content:"";position:absolute;bottom:0;left:0;right:0;height:2px;background-color:var(--color-primary);transform:scaleX(0);transition:transform var(--transition-fast)}.nav__link:not(.nav__link--active):hover:after{transform:scaleX(.8)}.nav__toggle,.nav__close{display:none;background:none;border:none;color:var(--color-gray-700);padding:var(--spacing-sm)}.breadcrumb{background-color:var(--color-gray-50);padding:var(--spacing-md) 0;border-bottom:1px solid var(--color-gray-200);animation:fadeIn .5s ease-out}.breadcrumb__list{display:flex;gap:var(--spacing-sm);list-style:none;flex-wrap:wrap}.breadcrumb__item{display:flex;align-items:center;font-size:var(--font-size-sm);color:var(--color-gray-600)}.breadcrumb__item:not(:last-child):after{content:"›";margin-left:var(--spacing-sm);color:var(--color-gray-400)}.breadcrumb__item a{color:var(--color-primary);transition:color var(--transition-fast)}.breadcrumb__item a:hover{color:var(--color-primary-dark);text-decoration:underline}.main{min-height:calc(100vh - var(--header-height))}.section{padding:var(--spacing-3xl) 0;opacity:0;animation:fadeIn .7s ease-out forwards}#informasi{animation-delay:.1s}#mediasi{animation-delay:.2s}#pengaduan{animation-delay:.3s}#pengajuan{animation-delay:.4s}#admin{animation-delay:.5s}.section--hero{padding-top:var(--spacing-2xl);opacity:1;animation:none}.section--gray{background-color:var(--color-gray-50)}.section__title{font-size:var(--font-size-3xl);font-weight:700;color:var(--color-gray-900);margin-bottom:var(--spacing-xl);text-align:center}.hero{display:grid;grid-template-columns:1fr 1fr;gap:var(--spacing-3xl);align-items:center;margin-bottom:var(--spacing-3xl)}.hero__content{max-width:600px}.hero__title{font-size:var(--font-size-4xl);font-weight:700;color:var(--color-gray-900);margin-bottom:var(--spacing-lg);line-height:1.2}.hero__subtitle{font-size:var(--font-size-lg);color:var(--color-gray-900);margin-bottom:var(--spacing-xl)}.hero__actions{display:flex;gap:var(--spacing-md);flex-wrap:wrap}.hero__image{display:flex;justify-content:center;animation:slideInRight .7s ease-out}.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--spacing-xl);margin-bottom:var(--spacing-3xl)}.stats__item{text-align:center;padding:var(--spacing-xl);background-color:var(--color-white);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);border:1px solid var(--color-gray-200);transition:all var(--transition-base)}.stats__item:hover{box-shadow:var(--shadow-xl);transform:translateY(-2px);border-color:var(--color-primary)}.stats__number{font-size:var(--font-size-3xl);font-weight:700;color:var(--color-primary);margin-bottom:var(--spacing-sm);transition:color var(--transition-fast)}.stats__label{font-size:var(--font-size-sm);color:var(--color-gray-900)}.services__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--spacing-xl)}.service-card{background-color:var(--color-white);padding:var(--spacing-xl);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);transition:transform var(--transition-base),box-shadow var(--transition-base),border-color var(--transition-base);border:1px solid transparent}.service-card:hover{transform:translateY(-4px);box-shadow:0 10px 20px -5px #a5010433;border-color:var(--color-primary)}.service-card__icon{margin-bottom:var(--spacing-lg)}.service-card__icon svg rect{transition:fill var(--transition-fast),opacity var(--transition-fast)}.service-card:hover .service-card__icon rect{opacity:.2}.service-card__title{font-size:var(--font-size-xl);font-weight:600;color:var(--color-gray-900);margin-bottom:var(--spacing-md)}.service-card__description{color:var(--color-gray-900);margin-bottom:var(--spacing-lg)}.service-card__link{display:inline-block;color:var(--color-primary);font-weight:500;transition:color var(--transition-fast)}.service-card__link:hover{color:var(--color-primary-dark)}.info-controls{display:flex;gap:var(--spacing-lg);margin-bottom:var(--spacing-xl);flex-wrap:wrap;align-items:center;background-color:var(--color-white);padding:var(--spacing-lg);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm)}.search-box{position:relative;flex:1;min-width:250px}.search-box svg{position:absolute;left:var(--spacing-md);top:50%;transform:translateY(-50%);color:var(--color-gray-400)}.search-box__input{width:100%;padding:var(--spacing-md) var(--spacing-md) var(--spacing-md) var(--spacing-3xl);border:1px solid var(--color-gray-300);border-radius:var(--radius-md);font-size:var(--font-size-base);transition:border-color var(--transition-fast),box-shadow var(--transition-fast)}.search-box__input:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 1px var(--color-primary)}.filter-group{display:flex;align-items:center;gap:var(--spacing-sm)}.filter-group__label{font-weight:500;color:var(--color-gray-700)}.filter-group__select{padding:var(--spacing-md);border:1px solid var(--color-gray-300);border-radius:var(--radius-md);font-size:var(--font-size-base);background-color:var(--color-white);cursor:pointer;min-width:150px;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%234b5563' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .7rem center;padding-right:2.5rem;transition:border-color var(--transition-fast)}.filter-group__select:focus{outline:none;border-color:var(--color-primary)}.articles-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--spacing-xl);margin-bottom:var(--spacing-xl)}.article-card{background-color:var(--color-white);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-md);transition:transform var(--transition-base),box-shadow var(--transition-base)}.article-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-xl)}.article-card__image{width:100%;height:200px;background:linear-gradient(135deg,var(--color-primary),var(--color-secondary));display:flex;align-items:center;justify-content:center;color:var(--color-white);font-size:var(--font-size-2xl);font-weight:700;opacity:.9}.article-card__content{padding:var(--spacing-lg)}.article-card__category{display:inline-block;padding:var(--spacing-xs) var(--spacing-md);background-color:var(--color-secondary);color:var(--color-gray-900);font-size:var(--font-size-xs);font-weight:600;text-transform:uppercase;border-radius:var(--radius-sm);margin-bottom:var(--spacing-md);transition:background-color var(--transition-fast)}.article-card:hover .article-card__category{background-color:var(--color-secondary-dark)}.article-card__title{font-size:var(--font-size-lg);font-weight:600;color:var(--color-gray-900);margin-bottom:var(--spacing-sm)}.article-card__excerpt{color:var(--color-gray-600);font-size:var(--font-size-sm);margin-bottom:var(--spacing-md);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}.article-card__date{font-size:var(--font-size-xs);color:var(--color-gray-500)}.article-card.clickable{cursor:pointer}.article-detail__header{margin-bottom:var(--spacing-lg);border-bottom:1px solid var(--color-gray-200);padding-bottom:var(--spacing-md)}.article-detail__image{width:100%;height:250px;background:linear-gradient(135deg,var(--color-primary),var(--color-secondary));border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;color:var(--color-white);font-size:var(--font-size-2xl);font-weight:700;margin-bottom:var(--spacing-md)}.article-detail__meta{display:flex;align-items:center;gap:var(--spacing-md);margin-bottom:var(--spacing-sm)}.article-detail__date{color:var(--color-gray-500);font-size:var(--font-size-sm)}.article-detail__title{font-size:var(--font-size-2xl);color:var(--color-gray-900);line-height:1.3}.article-detail__body{color:var(--color-gray-700);line-height:1.8;font-size:var(--font-size-base)}.article-detail__body p{margin-bottom:var(--spacing-md)}.pagination{display:flex;justify-content:center;gap:var(--spacing-sm)}.pagination__btn,.pagination__spacer{padding:var(--spacing-md) var(--spacing-lg);background-color:var(--color-white);border:1px solid var(--color-gray-300);border-radius:var(--radius-md);font-weight:500;color:var(--color-gray-700);transition:all var(--transition-fast);line-height:1}.pagination__spacer{background-color:var(--color-gray-50);border:1px solid var(--color-gray-200);cursor:default;color:var(--color-gray-400)}.pagination__btn:hover:not(:disabled){background-color:var(--color-primary);color:var(--color-white);border-color:var(--color-primary);box-shadow:var(--shadow-sm)}.pagination__btn--active{background-color:var(--color-primary);color:var(--color-white);border-color:var(--color-primary)}.pagination__btn:disabled{opacity:.5;cursor:not-allowed}.form{max-width:600px}.form--large{max-width:100%}.form__title{font-size:var(--font-size-xl);font-weight:600;color:var(--color-gray-900);margin-bottom:var(--spacing-xl)}.form__row{display:grid;grid-template-columns:1fr 1fr;gap:var(--spacing-lg)}.form__group{margin-bottom:var(--spacing-lg)}.form__group--full{grid-column:1 / -1}.form__label{display:block;font-weight:500;color:var(--color-gray-700);margin-bottom:var(--spacing-sm)}.form__input,.form__select,.form__textarea{width:100%;padding:var(--spacing-md);border:1px solid var(--color-gray-300);border-radius:var(--radius-md);font-family:inherit;font-size:var(--font-size-base);transition:border-color var(--transition-fast),box-shadow var(--transition-fast)}.form__input:hover,.form__select:hover,.form__textarea:hover{border-color:var(--color-gray-400)}.form__input:focus,.form__select:focus,.form__textarea:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 3px #a501041a}.form__input[aria-invalid=true],.form__select[aria-invalid=true],.form__textarea[aria-invalid=true]{border-color:var(--color-error);box-shadow:0 0 0 3px #ef44441a}.form__input[aria-invalid=true]:focus,.form__select[aria-invalid=true]:focus,.form__textarea[aria-invalid=true]:focus{box-shadow:0 0 0 3px #ef44444d}.form__textarea{resize:vertical;min-height:100px}.form__error{display:block;color:var(--color-error);font-size:var(--font-size-sm);margin-top:var(--spacing-xs);min-height:20px}.form__help{display:block;color:var(--color-gray-500);font-size:var(--font-size-sm);margin-top:var(--spacing-xs)}.form__actions{display:flex;gap:var(--spacing-md);margin-top:var(--spacing-xl)}.file-upload{margin-top:var(--spacing-sm)}.file-upload__input{display:none}.file-upload__label{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--spacing-xl);border:2px dashed var(--color-gray-300);border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition-base);background-color:var(--color-gray-50)}.file-upload__label:hover{border-color:var(--color-primary);background-color:#a501040d}.file-upload__label svg{margin-bottom:var(--spacing-md);color:var(--color-gray-400);transition:color var(--transition-fast)}.file-upload__label:hover svg{color:var(--color-primary)}.file-preview{margin-top:var(--spacing-lg);padding:var(--spacing-lg);background-color:var(--color-gray-50);border-radius:var(--radius-md);border:1px solid var(--color-gray-200);animation:fadeIn .3s ease-out}.file-preview__header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--spacing-md)}.file-preview__title{font-weight:600;color:var(--color-gray-700)}.file-preview__remove{background:none;border:none;font-size:var(--font-size-2xl);color:var(--color-gray-500);padding:0;line-height:1;transition:color var(--transition-fast)}.file-preview__remove:hover{color:var(--color-error)}.file-preview__content img{max-width:100%;border-radius:var(--radius-md);box-shadow:var(--shadow-sm)}.file-preview__content p{padding:var(--spacing-md);background-color:var(--color-white);border-radius:var(--radius-md);color:var(--color-gray-600);border-left:3px solid var(--color-info)}.btn{display:inline-flex;align-items:center;gap:var(--spacing-sm);padding:var(--spacing-md) var(--spacing-xl);font-size:var(--font-size-base);font-weight:500;border:none;border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition-fast);text-align:center;white-space:nowrap}.btn--primary{background-color:var(--color-primary);color:var(--color-white);box-shadow:var(--shadow-sm)}.btn--primary:hover{background-color:var(--color-primary-dark);transform:translateY(-1px);box-shadow:var(--shadow-md)}.btn--secondary{background-color:var(--color-white);color:var(--color-primary);border:2px solid var(--color-primary);box-shadow:var(--shadow-sm)}.btn--secondary:hover{background-color:var(--color-primary);color:var(--color-white);box-shadow:var(--shadow-md)}.btn--tertiary{background-color:var(--color-gray-200);color:var(--color-gray-700)}.btn--tertiary:hover{background-color:var(--color-gray-300);transform:translateY(-1px)}.btn--sm{padding:var(--spacing-sm) var(--spacing-md);font-size:var(--font-size-sm)}.btn--full{width:100%;justify-content:center}.btn:disabled{opacity:.5;cursor:not-allowed}.btn:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}.pengaduan-header,.pengajuan-intro{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--spacing-xl);padding:var(--spacing-lg);background-color:var(--color-white);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);border-left:4px solid var(--color-primary);animation:fadeIn .5s ease-out}.pengaduan-header__text,.pengajuan-intro p{color:var(--color-gray-600);max-width:70%}.tracking-section,.status-section{margin-top:var(--spacing-3xl);padding:var(--spacing-xl);background-color:var(--color-white);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);border:1px solid var(--color-gray-200);animation:slideInUp .5s ease-out}.tracking-section__title,.status-section__title{font-size:var(--font-size-xl);font-weight:600;color:var(--color-gray-900);margin-bottom:var(--spacing-lg)}.tracking-form,.status-form{display:flex;gap:var(--spacing-md);margin-bottom:var(--spacing-lg)}.tracking-form input,.status-form input{flex:1}.tracking-result,.status-result{padding:var(--spacing-lg);background-color:var(--color-gray-50);border-radius:var(--radius-md);border-left:4px solid var(--color-primary);animation:fadeIn .3s ease-out}.tracking-result h4{font-size:var(--font-size-lg);color:var(--color-gray-800);margin-bottom:var(--spacing-sm)}.tracking-result p,.status-result p{font-size:var(--font-size-sm);margin-bottom:var(--spacing-xs)}.tracking-result__status,.status-badge{display:inline-block;padding:var(--spacing-xs) var(--spacing-md);border-radius:var(--radius-sm);font-size:var(--font-size-sm);font-weight:600;text-transform:uppercase;margin-top:var(--spacing-md)}.tracking-result__status--new,.status-badge--info{background-color:var(--color-info);color:var(--color-white)}.tracking-result__status--processing,.status-badge--warning{background-color:var(--color-warning);color:var(--color-white)}.tracking-result__status--completed,.status-badge--success{background-color:var(--color-success);color:var(--color-white)}.status-badge--error{background-color:var(--color-error);color:var(--color-white)}.admin-login{display:flex;justify-content:center;align-items:center;min-height:400px}.section__header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--spacing-xl);flex-wrap:wrap;gap:var(--spacing-md)}.gallery-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--spacing-lg)}.gallery-item{border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-md);transition:all var(--transition-base);cursor:pointer;border:1px solid var(--color-gray-200)}.gallery-item:hover{transform:translateY(-4px);box-shadow:var(--shadow-xl)}.gallery-item img{width:100%;height:250px;object-fit:cover;background-color:var(--color-gray-100);display:block}.gallery-item__caption{padding:var(--spacing-md);background-color:var(--color-white);font-weight:500;color:var(--color-gray-800);text-align:center}.lightbox{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#000000f2;z-index:10000;display:none;align-items:center;justify-content:center;opacity:0;transition:opacity .3s ease}.lightbox.active{display:flex;opacity:1}.lightbox__content{position:relative;width:100%;height:100%;display:flex;align-items:center;justify-content:center}.lightbox__img{max-width:1920px;max-height:1080px;width:auto;height:auto;object-fit:contain;border-radius:4px;box-shadow:0 0 20px #00000080;animation:zoomIn .3s ease}@media(max-width:1920px){.lightbox__img{max-width:90vw;max-height:90vh}}.lightbox__close{position:absolute;top:30px;right:30px;color:#fff;font-size:40px;cursor:pointer;z-index:10002;background:none;border:none;transition:transform .2s}.lightbox__close:hover{transform:scale(1.2) rotate(90deg);color:var(--color-primary)}.lightbox__nav{position:absolute;top:50%;transform:translateY(-50%);background:#ffffff1a;color:#fff;border:none;padding:20px;cursor:pointer;font-size:24px;border-radius:50%;transition:all .3s;z-index:10001;display:flex;align-items:center;justify-content:center;width:60px;height:60px}.lightbox__nav:hover{background:var(--color-primary);transform:translateY(-50%) scale(1.1)}.lightbox__prev{left:30px}.lightbox__next{right:30px}.lightbox__dots{position:absolute;bottom:30px;left:50%;transform:translate(-50%);display:flex;gap:10px}.lightbox__dot{width:12px;height:12px;background:#ffffff80;border-radius:50%;cursor:pointer;transition:all .3s}.lightbox__dot.active{background:var(--color-primary);transform:scale(1.3)}@keyframes zoomIn{0%{transform:scale(.9);opacity:0}to{transform:scale(1);opacity:1}}.footer{background-color:var(--color-gray-800);color:var(--color-gray-300);padding-top:4rem;padding-bottom:2rem;margin-top:auto}.footer__title{color:var(--color-white);font-size:1.125rem;font-weight:700;margin-bottom:1.25rem;position:relative;display:inline-block}.footer__title:after{content:"";display:block;width:40px;height:3px;background-color:var(--color-primary);margin-top:8px;border-radius:2px}.footer__text{font-size:.95rem;line-height:1.7;margin-bottom:1rem}.footer__text a{color:var(--color-white);text-decoration:none;font-weight:500;transition:color .3s}.footer__text a:hover{color:var(--color-white);text-decoration:underline}.footer__content{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:3rem}.footer__bottom{margin-top:3rem;padding-top:1.5rem;border-top:1px solid var(--color-primary);text-align:center;font-size:.875rem;color:var(--color-gray-500)}[data-theme=dark] .footer__title,[data-theme=dark] .footer,[data-theme=dark] .footer__text a{background-color:#1f2937!important;border-top-color:var(--color-primary);color:var(--color-gray-900)}.toast{position:fixed;bottom:var(--spacing-xl);right:var(--spacing-xl);padding:var(--spacing-lg) var(--spacing-xl);background-color:var(--color-white);border-radius:var(--radius-md);box-shadow:var(--shadow-xl);z-index:9999;max-width:400px;transform:translate(500px);opacity:0;transition:all var(--transition-base)}.toast--show{transform:translate(0);opacity:1}.toast--success{border-left:4px solid var(--color-success)}.toast--error{border-left:4px solid var(--color-error)}.toast--info{border-left:4px solid var(--color-info)}.toast--warning{border-left:4px solid var(--color-warning)}.modal{position:fixed;inset:0;z-index:9998;display:none;align-items:center;justify-content:center;padding:var(--spacing-xl)}.modal--show{display:flex}.modal__overlay{position:absolute;inset:0;background-color:#00000080;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);opacity:0;animation:fadeIn .3s forwards}.modal__content{position:relative;background-color:var(--color-white);border-radius:var(--radius-lg);box-shadow:var(--shadow-xl);max-width:900px;width:100%;max-height:90vh;overflow-y:auto;transform:translateY(-50px);animation:slideInUp .4s forwards;animation-delay:.1s}.modal__header{display:flex;justify-content:space-between;align-items:center;padding:var(--spacing-xl);border-bottom:1px solid var(--color-gray-200)}.modal__title{font-size:var(--font-size-xl);font-weight:600;color:var(--color-gray-900)}.modal__close{background:none;border:none;font-size:var(--font-size-3xl);color:var(--color-gray-500);line-height:1;padding:0;width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-sm);transition:all var(--transition-fast)}.modal__close:hover{background-color:var(--color-gray-100);color:var(--color-gray-900)}.modal__body{padding:var(--spacing-xl)}.modal__footer{padding:var(--spacing-lg) var(--spacing-xl);border-top:1px solid var(--color-gray-200);display:flex;justify-content:flex-end;gap:var(--spacing-md)}.template-list{display:grid;gap:var(--spacing-md)}.template-item{display:flex;align-items:center;gap:var(--spacing-md);padding:var(--spacing-lg);background-color:var(--color-gray-50);border:1px solid var(--color-gray-200);border-radius:var(--radius-md);text-decoration:none;color:var(--color-gray-800);transition:all var(--transition-fast)}.template-item:hover{background-color:var(--color-white);border-color:var(--color-primary);transform:translateY(-2px);box-shadow:var(--shadow-md)}.template-icon{width:40px;height:40px;background-color:#1565c01a;color:#1565c0;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:1.2rem}.template-info h4{font-size:var(--font-size-base);font-weight:600;margin-bottom:2px}.template-info p{font-size:var(--font-size-xs);color:var(--color-gray-500);margin:0}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeInDown{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}@keyframes slideInRight{0%{opacity:0;transform:translate(20px)}to{opacity:1;transform:translate(0)}}@keyframes slideInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@media(max-width:768px){:root{--header-height: 60px;--font-size-4xl: 1.875rem;--font-size-3xl: 1.5rem}.container{padding:0 var(--spacing-md)}.header__title{display:inline}.nav{position:fixed;top:0;right:-300px;width:300px;height:100vh;background-color:var(--color-white);border-left:1px solid var(--color-gray-200);box-shadow:var(--shadow-xl);padding:80px 20px 40px;transition:right var(--transition-base);z-index:1002;display:flex;flex-direction:column}.nav__overlay{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:#00000080;z-index:1999}.nav__list,.nav__close{position:relative;z-index:2002}.nav__list{height:100%;overflow-y:auto;padding-top:40px}.nav--open{right:0}.nav--open .nav__overlay{display:block}.nav__close{display:block;position:absolute;top:var(--spacing-md);right:var(--spacing-md);font-size:1.5rem;cursor:pointer}.nav__list{flex-direction:column;gap:0;margin-top:var(--spacing-3xl)}.nav__link{display:block;padding:var(--spacing-lg);border-bottom:1px solid var(--color-gray-200)}.nav__link--active:after{content:none}.nav__link:not(.nav__link--active):after{content:none}.nav__toggle{display:flex;font-size:1.5rem;cursor:pointer}.hero{grid-template-columns:1fr;text-align:center}.hero__image{order:-1}.hero__image svg{max-width:300px}.hero__actions{justify-content:center}.stats,.services__grid,.articles-grid,.gallery-grid{grid-template-columns:repeat(2,1fr);gap:var(--spacing-md)}.info-controls{flex-direction:column;align-items:stretch}.filter-group{justify-content:space-between}.search-box{min-width:100%}.mediasi-content,.form__row{grid-template-columns:1fr}.form__actions{flex-direction:column}.btn{width:100%;justify-content:center}.footer__content{grid-template-columns:1fr;gap:var(--spacing-xl)}.admin-panel__header{flex-direction:column;align-items:flex-start;gap:var(--spacing-md)}.admin-table{font-size:var(--font-size-sm)}.admin-table th,.admin-table td{padding:var(--spacing-sm)}.pengaduan-header,.pengajuan-intro{flex-direction:column;align-items:flex-start;gap:var(--spacing-md)}.pengaduan-header__text,.pengajuan-intro p{max-width:100%}.tracking-form,.status-form{flex-direction:column}.tracking-form button,.status-form button{width:100%}}@media(max-width:480px){:root{--spacing-3xl: 2.5rem;--spacing-2xl: 2rem}.header__logo svg{width:100px;height:100px}.hero__title{font-size:var(--font-size-3xl)}.hero__image svg{max-width:250px}.stats{grid-template-columns:1fr}.stats__item{padding:var(--spacing-lg)}.services__grid,.articles-grid,.gallery-grid{grid-template-columns:1fr}.gallery-item img{height:200px}.article-card__image{height:150px;font-size:var(--font-size-xl)}.pagination{flex-wrap:wrap}.pagination__btn,.pagination__spacer{padding:var(--spacing-sm) var(--spacing-md);font-size:var(--font-size-sm)}.modal{padding:var(--spacing-md)}.modal__content{max-height:95vh}.toast{bottom:var(--spacing-md);right:var(--spacing-md);left:var(--spacing-md);max-width:none}}.hero__image{position:relative;width:100%;height:400px;border-radius:20px;overflow:hidden;box-shadow:var(--shadow-lg);display:block}.hero-carousel{width:100%;height:100%;position:relative}.hero-slide{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1s ease-in-out;z-index:1}.hero-slide.active{opacity:1;z-index:2}.carousel-dots{position:absolute;bottom:20px;left:50%;transform:translate(-50%);display:flex;gap:8px;z-index:10}.carousel-dots .dot{width:10px;height:10px;background:#ffffff80;border-radius:50%;transition:all .3s}.carousel-dots .dot.active{background:var(--color-secondary);width:30px;border-radius:10px}@media(max-width:768px){.hero__image{height:250px;margin-top:20px}}.carousel-btn{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border-radius:50%;border:none;cursor:pointer;z-index:20;background-color:#0006;color:#fff;display:flex;align-items:center;justify-content:center;transition:all .3s ease;opacity:0}.prev-btn{left:20px}.next-btn{right:20px}.hero-carousel:hover .carousel-btn{opacity:1}.carousel-btn:hover{background-color:var(--color-primary);transform:translateY(-50%) scale(1.1);box-shadow:0 4px 10px #0000004d}@media(max-width:768px){.carousel-btn{opacity:1;width:32px;height:32px}.prev-btn{left:10px}.next-btn{right:10px}}.upload-box-wrapper{position:relative;width:100%;margin-top:5px}.upload-box{border:2px dashed #cbd5e1;background-color:#f8fafc;border-radius:12px;min-height:120px;display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;transition:all .3s ease;position:relative;overflow:hidden;text-align:center}.upload-box:hover{border-color:#a50104;background-color:#fff1f2}.upload-box-icon svg{width:32px;height:32px;stroke:#94a3b8;transition:stroke .3s}.upload-box:hover .upload-box-icon svg{stroke:#a50104}.upload-box p{margin:10px 0 0;font-size:13px;color:#64748b;font-weight:500}.upload-input-hidden{position:absolute;top:0;left:0;width:100%;height:100%;opacity:0;cursor:pointer;z-index:10}.file-preview-card{margin-top:15px;display:flex;align-items:center;background:#fff;border:1px solid #e2e8f0;padding:10px;border-radius:8px;box-shadow:0 2px 4px #0000000d;animation:fadeIn .3s}.file-preview-icon{width:40px;height:40px;background:#f1f5f9;border-radius:6px;display:flex;align-items:center;justify-content:center;margin-right:12px;flex-shrink:0;overflow:hidden}.file-preview-icon img{width:100%;height:100%;object-fit:cover}.file-preview-info{flex:1;overflow:hidden}.file-name{font-size:13px;font-weight:600;color:#333;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.file-size{font-size:11px;color:#888}.btn-remove-file{background:none;border:none;color:#ef4444;font-size:20px;cursor:pointer;padding:5px;line-height:1;transition:color .2s}.btn-remove-file:hover{color:#b91c1c;background-color:#fee2e2;border-radius:4px}@media screen and (max-width:768px){.nav{position:fixed;top:0;right:-100%;width:80%;max-width:300px;height:100%;background-color:var(--color-white);border-left:1px solid var(--color-gray-200);color:var(--color-gray-800);padding:80px 20px 40px;transition:right .4s;box-shadow:-5px 0 15px #0000001a;z-index:2000;display:flex;flex-direction:column}.nav__link{display:block;padding:15px 0;font-size:1rem;color:var(--color-gray-800);border-bottom:1px solid var(--color-gray-200)}.nav--open{right:0}.nav__overlay{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:#00000080;z-index:1999;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.nav.nav--open .nav__overlay{display:block}.nav__close{position:absolute;top:20px;right:20px;font-size:1.5rem;cursor:pointer;display:block;background:none;border:none;color:var(--color-gray-800)}.nav__toggle{display:flex;background:none;border:none;font-size:1.5rem;cursor:pointer;color:var(--color-gray-800)}}[data-theme=dark] .gallery-item,[data-theme=dark] .article-card,[data-theme=dark] .service-card{background-color:var(--color-white)!important;border-color:var(--color-gray-200)!important;color:var(--color-gray-800)!important}[data-theme=dark] .gallery-item__caption{color:var(--color-gray-800)!important}[data-theme=dark] .gallery-item__caption small{color:var(--color-gray-600)!important}@media screen and (max-width:768px){[data-theme=dark] #nav{background-color:#1f2937!important;border-left:1px solid #374151!important}[data-theme=dark] .nav__link{color:#f3f4f6!important;border-bottom:1px solid #374151!important}[data-theme=dark] .nav__close,[data-theme=dark] .nav__toggle{color:#f3f4f6!important}}[data-theme=dark] .gallery-item{background-color:#1f2937!important;border:1px solid #374151!important;box-shadow:0 4px 6px #0000004d!important}[data-theme=dark] .gallery-item strong{color:#f3f4f6!important}[data-theme=dark] .gallery-item small{color:#9ca3af!important}[data-theme=dark] #galeri,[data-theme=dark] #home-gallery{background-color:#111827!important}@keyframes fadeIn{0%{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.hero__image{animation:none}.modal__content{animation:none;transform:none}.modal__overlay{animation:none}}[data-theme=dark] .modal-box[style*="background: white"]{background-color:#1f2937!important;color:#f3f4f6!important;border:1px solid #374151;box-shadow:0 25px 50px -12px #00000080}[data-theme=dark] .modal-box h2{color:#f3f4f6!important}[data-theme=dark] .modal-box p{color:#9ca3af!important}[data-theme=dark] .modal-box div[style*="background: #ecfdf5"]{background-color:#064e3b!important;color:#34d399!important}[data-theme=dark] .modal-box div[style*="background: #f3f4f6"]{background-color:#111827!important;border-color:#374151!important}[data-theme=dark] .modal-box div[style*="background: #f3f4f6"] p{color:#9ca3af!important}[data-theme=dark] .modal-box h3#ticketDisplay{color:#f87171!important}[data-theme=dark] .modal-box .btn--secondary{background-color:#374151;color:#fff;border:1px solid #4b5563}[data-theme=dark] .modal-box .btn--secondary:hover{background-color:#4b5563}[data-theme=dark] .search-box__input{background-color:var(--color-white);color:#f1f5f9!important}[data-theme=dark] .search-box ::placeholder{color:#f1f5f9!important}[data-theme=dark] .search-box svg{color:#f1f5f9!important}[data-theme=dark] .filter-group__select,[data-theme=dark] .modal-box h3{color:#f1f5f9!important}[data-theme=dark] .template-item{background-color:#1f2937!important;color:#f1f5f9!important}[data-theme=dark] .template-item:hover{background-color:#4b5563!important;color:#f1f5f9!important}