@import"https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@300;400;600;700&family=Poppins:wght@400;600;700&display=swap";body{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;overflow-x:hidden;background:#f8fafc}.landing-container{width:100%;min-height:100vh}.header{background:#fff;padding:1rem 0;box-shadow:0 2px 4px #0000001a;position:relative;z-index:100}@keyframes slideDown{0%{transform:translateY(-100%);opacity:0}to{transform:translateY(0);opacity:1}}.header-content{max-width:1400px;margin:0 auto;padding:1rem 2rem;display:flex;justify-content:space-between;align-items:center}.logo-icon{width:48px;height:48px;background:linear-gradient(135deg,#6366f1,#8b5cf6);border-radius:14px;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:1.5rem;box-shadow:0 8px 16px #6366f14d;transition:all .3s ease}.logo-icon:hover{transform:scale(1.05) rotate(-5deg);box-shadow:0 12px 24px #6366f166}.logo-smart{font-size:1.25rem;font-weight:800;background:linear-gradient(135deg,#6366f1,#8b5cf6);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;letter-spacing:.5px}.nav-menu a:hover{color:#6366f1}.btn-masuk{padding:.75rem 2rem;background:linear-gradient(135deg,#6366f1,#8b5cf6);color:#fff;border:none;border-radius:50px;font-weight:700;font-size:.9rem;cursor:pointer;transition:all .3s ease;box-shadow:0 4px 12px #6366f14d}.btn-masuk:hover{transform:translateY(-2px);box-shadow:0 8px 20px #6366f166}.hero-section{padding:140px 2rem 80px;min-height:90vh;display:flex;align-items:center;position:relative;overflow:hidden;background:linear-gradient(135deg,#fff 0% 50%,#fff)}.hero-section:before{content:"";position:absolute;inset:0;background-image:radial-gradient(circle at 25% 25%,rgba(255,255,255,.15) 0%,transparent 50%),radial-gradient(circle at 75% 75%,rgba(255,255,255,.1) 0%,transparent 50%),radial-gradient(circle at 50% 50%,rgba(255,255,255,.05) 0%,transparent 50%);animation:patternMove 20s ease-in-out infinite;pointer-events:none}@keyframes patternMove{0%,to{transform:scale(1) rotate(0)}50%{transform:scale(1.1) rotate(5deg)}}.hero-section:after{content:"";position:absolute;width:400px;height:400px;background:radial-gradient(circle,rgba(255,255,255,.1),transparent);border-radius:50%;top:-100px;right:-100px;animation:float 15s ease-in-out infinite}@keyframes float{0%,to{transform:translateY(0) translate(0)}50%{transform:translateY(-30px) translate(-30px)}}.hero-content{max-width:1400px;margin:0 auto;position:relative;z-index:1;width:100%}.hero-title{font-size:4rem;font-weight:900;color:#fff;margin-bottom:1.5rem;line-height:1.1;text-shadow:0 4px 30px rgba(0,0,0,.3);animation:fadeInUp .8s ease-out}@keyframes fadeInUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}.hero-subtitle{font-size:1.35rem;color:#fffffff2;margin-bottom:3rem;line-height:1.6;font-weight:500;animation:fadeInUp .8s ease-out .2s backwards;text-shadow:0 2px 10px rgba(0,0,0,.2)}.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1.5rem;margin-top:4rem;animation:fadeInUp .8s ease-out .4s backwards}.stat-card{background:#fffffffa;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);padding:2rem 1.5rem;border-radius:20px;text-align:center;box-shadow:0 8px 32px #0000001f;transition:all .4s cubic-bezier(.175,.885,.32,1.275);border:1px solid rgba(255,255,255,.6);position:relative;overflow:hidden}.stat-card:before{content:"";position:absolute;top:0;left:0;width:100%;height:4px;background:linear-gradient(90deg,#6366f1,#8b5cf6,#ec4899)}.stat-card:hover{transform:translateY(-8px) scale(1.02);box-shadow:0 16px 48px #0003}.stat-icon{font-size:2.5rem;margin-bottom:1rem;filter:drop-shadow(0 4px 10px rgba(0,0,0,.1));display:inline-block;animation:bounce 2s ease-in-out infinite}@keyframes bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-8px)}}.stat-value{font-size:2.25rem;font-weight:900;background:linear-gradient(135deg,#6366f1,#8b5cf6);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:.5rem}.stat-label{color:#64748b;font-weight:600;font-size:.95rem}#profil{background:#f8fafc;padding:5rem 2rem;position:relative}#profil:before{content:"";position:absolute;top:0;left:0;right:0;height:100px;background:linear-gradient(180deg,#ffffff 0%,transparent 100%)}.cards-grid{max-width:1400px;margin:0 auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(350px,1fr));gap:2rem;padding:2rem 0}.info-card{background:#fff;border-radius:24px;overflow:hidden;box-shadow:0 4px 20px #00000014;transition:all .4s cubic-bezier(.175,.885,.32,1.275);border:1px solid #e2e8f0}.info-card:hover{transform:translateY(-8px);box-shadow:0 16px 48px #00000026}.card-image-container{height:180px;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}.card-image-container:before{content:"";position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:linear-gradient(45deg,transparent,rgba(255,255,255,.2),transparent);transform:rotate(45deg);animation:shimmer 3s infinite}@keyframes shimmer{0%{transform:translate(-100%) translateY(-100%) rotate(45deg)}to{transform:translate(100%) translateY(100%) rotate(45deg)}}.yellow-bg,.green-bg,.blue-bg,.purple-bg,.teal-bg{background:linear-gradient(135deg,#68caf1 0% 100%)}.card-icon-circle{width:90px;height:90px;background:#ffffff40;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:2.5rem;border:3px solid rgba(255,255,255,.4);transition:all .3s ease;box-shadow:0 8px 24px #00000026}.info-card:hover .card-icon-circle{transform:scale(1.1) rotate(10deg);box-shadow:0 12px 32px #00000040}.card-content{padding:2rem}.card-badge{display:inline-block;padding:.5rem 1.25rem;border-radius:50px;font-weight:700;font-size:.7rem;letter-spacing:1.5px;margin-bottom:1.5rem}.yellow-badge{background:linear-gradient(135deg,#fef3c7,#fde68a);color:#92400e;box-shadow:0 4px 12px #fbbf244d}.green-badge{background:linear-gradient(135deg,#d1fae5,#a7f3d0);color:#065f46;box-shadow:0 4px 12px #10b9814d}.blue-badge{background:linear-gradient(135deg,#dbeafe,#bfdbfe);color:#1e40af;box-shadow:0 4px 12px #3b82f64d}.purple-badge{background:linear-gradient(135deg,#f3e8ff,#e9d5ff);color:#6b21a8;box-shadow:0 4px 12px #a855f74d}.card-text{color:#475569;line-height:1.7;font-size:.95rem;margin-bottom:1.5rem}.btn-read-more{width:100%;padding:1rem;border:none;border-radius:12px;font-weight:700;font-size:.875rem;cursor:pointer;transition:all .3s ease;letter-spacing:.5px;color:#fff;box-shadow:0 4px 12px #00000026}.btn-read-more:hover{transform:translateY(-2px);box-shadow:0 8px 24px #00000040}.student-card{background:linear-gradient(135deg,#68caf1 0% 100%);border-radius:24px;padding:3rem 2rem;text-align:center;position:relative;overflow:hidden;box-shadow:0 8px 32px #6366f14d;transition:all .4s ease}.student-card:before{content:"";position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:radial-gradient(circle,rgba(255,255,255,.1) 0%,transparent 70%);animation:rotate 15s linear infinite}@keyframes rotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.student-card:hover{transform:scale(1.02);box-shadow:0 16px 48px #6366f166}.student-svg{width:140px;height:140px;margin:0 auto 2rem;position:relative;z-index:1;filter:drop-shadow(0 4px 20px rgba(0,0,0,.2))}.student-subtitle{color:#ffffffd9;font-weight:700;letter-spacing:4px;font-size:.8rem;position:relative;z-index:1}.student-title{font-size:2.5rem;font-weight:900;color:#fff;margin:.5rem 0;position:relative;z-index:1;text-shadow:0 4px 20px rgba(0,0,0,.3);letter-spacing:2px}.blue-container-section{position:relative;overflow:hidden}.text-center{text-align:center;position:relative;z-index:2}.mb-6{margin-bottom:3rem}.berita-section{max-width:1400px;margin:0 auto;position:relative;z-index:1;padding:6rem 2rem;background:linear-gradient(135deg,#1e40af,#3b82f6,#60a5fa);border-radius:0;box-shadow:inset 0 10px 30px #0000001a}.berita-section:before{content:"";position:absolute;inset:0 -100%;background:linear-gradient(135deg,#1e40af,#3b82f6,#60a5fa);z-index:-2}.berita-section:after{content:"";position:absolute;inset:0 -100%;background-image:radial-gradient(circle at 20% 30%,rgba(255,255,255,.08) 0%,transparent 50%),radial-gradient(circle at 80% 70%,rgba(255,255,255,.06) 0%,transparent 50%);pointer-events:none;z-index:-1}.berita-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:2rem;margin-bottom:2rem;position:relative;z-index:2}.berita-card{background:#fff;border-radius:20px;overflow:hidden;box-shadow:0 8px 32px #0000001f;transition:all .4s cubic-bezier(.175,.885,.32,1.275);border:1px solid rgba(255,255,255,.2)}.berita-card:hover{transform:translateY(-8px);box-shadow:0 16px 48px #00000040}.berita-image{height:200px;background:linear-gradient(135deg,#e5e7eb,#d1d5db);display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}.berita-emoji{font-size:4rem;filter:drop-shadow(0 4px 10px rgba(0,0,0,.1))}.berita-content{padding:1.75rem}.berita-title{font-size:1.2rem;font-weight:800;color:#1e293b;margin-bottom:1rem;line-height:1.4}.berita-text{color:#64748b;line-height:1.7;font-size:.9rem}.text-link{color:#3b82f6;font-weight:700;cursor:pointer;transition:color .3s ease;text-decoration:none;border-bottom:2px solid transparent}.text-link:hover{color:#2563eb;border-bottom-color:#2563eb}.gallery-section{max-width:1400px;margin:0 auto;position:relative;z-index:1;padding:6rem 2rem;background:linear-gradient(135deg,#c06464,#d48484,#7e59a3);border-radius:0;box-shadow:inset 0 10px 30px #0000001a}.gallery-section:before{content:"";position:absolute;inset:0 -100%;background:linear-gradient(135deg,#fff,#fefefe,#fff);z-index:-2}.gallery-section:after{content:"";position:absolute;inset:0 -100%;background-image:radial-gradient(circle at 30% 40%,rgba(255,255,255,.1) 0%,transparent 50%),radial-gradient(circle at 70% 60%,rgba(255,255,255,.08) 0%,transparent 50%);pointer-events:none;z-index:-1}.gallery-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1.5rem;margin-bottom:2rem;position:relative;z-index:2}.gallery-item{aspect-ratio:1;border-radius:20px;overflow:hidden;box-shadow:0 8px 32px #00000026;transition:all .4s cubic-bezier(.175,.885,.32,1.275);cursor:pointer;border:3px solid rgba(255,255,255,.3)}.gallery-item:hover{transform:scale(1.05);box-shadow:0 16px 48px #0000004d;border-color:#fff9}.pengumuman-section{max-width:1400px;margin:0 auto;position:relative;z-index:1;padding:6rem 2rem;background:#e5e7eb;border-radius:0}.pengumuman-section:before{content:"";position:absolute;inset:0 -100%;background:#e5e7eb;z-index:-2}.pengumuman-section:after{content:"";position:absolute;inset:0 -100%;background:transparent;pointer-events:none;z-index:-1}.pengumuman-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:2rem;position:relative;z-index:2}.pengumuman-card{background:#fff;padding:2.5rem;border-radius:20px;box-shadow:0 8px 32px #0000001f;transition:all .4s cubic-bezier(.175,.885,.32,1.275);border-left:6px solid #3b82f6;position:relative;overflow:hidden}.pengumuman-card:before{content:"";position:absolute;top:0;right:0;width:100px;height:100px;background:radial-gradient(circle,rgba(59,130,246,.1),transparent);border-radius:50%;transform:translate(30%,-30%)}.pengumuman-card:hover{transform:translate(8px);box-shadow:0 16px 48px #00000040;border-left-color:#2563eb}.pengumuman-title{font-size:1.4rem;font-weight:800;color:#1e293b;margin-bottom:1rem;line-height:1.3}.pengumuman-text{color:#64748b;line-height:1.7;margin-bottom:1.5rem}.btn-outline-white{padding:1rem 3rem;background:#ffffff26;border:2px solid white;color:#fff;border-radius:50px;font-weight:700;font-size:1rem;cursor:pointer;transition:all .3s ease;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);letter-spacing:.5px;box-shadow:0 4px 12px #0000001a}.btn-outline-white:hover{background:#fff;color:#1e40af;transform:translateY(-3px);box-shadow:0 8px 24px #fff6}.btn-primary{padding:.875rem 2rem;background:#fff;color:#1e40af;border:none;border-radius:50px;font-weight:700;cursor:pointer;transition:all .3s ease;box-shadow:0 4px 12px #ffffff4d}.btn-primary:hover{transform:translateY(-2px);box-shadow:0 8px 24px #ffffff80;background:#f8fafc}.footer{background:#00124b;padding:1rem;text-align:center;box-shadow:0 -2px 4px #0000001a}.footer:before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,transparent,#00124b,#00124b,transparent)}.footer-content{max-width:1400px;margin:0 auto 3rem;display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:3rem;background-color:#00124b}.footer-column{animation:fadeInUp .8s ease-out}.footer-title{font-size:1.25rem;font-weight:800;margin-bottom:1.5rem;color:#fff}.contact-list,.social-list{display:flex;flex-direction:column;gap:1.25rem}.contact-item,.social-item{display:flex;gap:1rem;align-items:flex-start;transition:transform .3s ease}.contact-item:hover,.social-item:hover{transform:translate(5px)}.contact-icon,.social-icon{font-size:1.5rem;width:45px;height:45px;display:flex;align-items:center;justify-content:center;background:#ffffff1a;border-radius:12px;flex-shrink:0;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.1)}.contact-text,.social-text{color:#94a3b8;line-height:1.6;margin:0}.footer-bottom{max-width:1400px;margin:0 auto;padding-top:2rem;border-top:1px solid rgba(255,255,255,.1);text-align:center;color:#94a3b8;font-size:.9rem}@media(max-width:1024px){.hero-title{font-size:3rem}.cards-grid{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}}@media(max-width:768px){.header-content{flex-wrap:wrap;gap:1rem}.hero-title{font-size:2.5rem}.hero-subtitle{font-size:1.125rem;color:#fff}.hero-section{padding:120px 1.5rem 60px}.stats-grid{grid-template-columns:repeat(2,1fr);gap:1rem}.cards-grid{grid-template-columns:1fr;gap:1.5rem}.berita-grid,.gallery-grid,.pengumuman-grid{grid-template-columns:1fr}#profil{padding:3rem 1.5rem}.berita-section,.gallery-section,.pengumuman-section{padding:4rem 1.5rem}}@media(max-width:480px){.hero-section{padding:110px 1rem 50px}.hero-title{font-size:2rem}.hero-subtitle{font-size:1rem}.stats-grid{grid-template-columns:1fr}.btn-masuk{padding:.625rem 1.5rem;font-size:.875rem}.stat-card{padding:1.5rem 1rem}.card-content,.berita-content,.pengumuman-card{padding:1.5rem}.berita-section,.gallery-section,.pengumuman-section{padding:3rem 1rem}}@keyframes shimmerLoading{0%{background-position:-1000px 0}to{background-position:1000px 0}}.loading-shimmer{background:linear-gradient(90deg,#f3f4f6,#e5e7eb,#f3f4f6);background-size:1000px 100%;animation:shimmerLoading 2s infinite}.nav-menu{color:#fff;margin-left:20px;list-style:none;padding:0;margin-top:0}.nav-menu a{color:#fff;text-decoration:none;display:inline-block;padding:8px 12px;font-weight:500}.hero-slider-section{position:relative;height:80vh;overflow:hidden;width:100%}.slider-container{position:relative;width:100%;height:100%}.slide{position:absolute;top:0;left:0;width:100%;height:100%;opacity:0;transition:opacity 1s ease-in-out;display:flex;align-items:center;justify-content:center;padding:2rem}.slide.active{opacity:1;z-index:1}.slider-btn{position:absolute;top:50%;transform:translateY(-50%);z-index:3;background:#fff3;border:none;border-radius:50%;width:3rem;height:3rem;font-size:1.5rem;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);transition:all .3s ease}.slider-btn:hover{background:#ffffff4d;transform:translateY(-50%) scale(1.1)}.prev-btn{left:1rem}.next-btn{right:1rem}@media(max-width:768px){.hero-slider-section{height:60vh}.slider-btn{width:2.5rem;height:2.5rem;font-size:1.2rem}.slide h1{font-size:2rem!important}.slide h1 span{font-size:2.5rem!important}.slide p{font-size:1rem!important}}.btn-pill-primary{display:inline-block;padding:10px 28px;font-size:.86rem;font-weight:800;letter-spacing:1px;border-radius:9999px;border:2px solid rgba(37,99,235,.95);background:linear-gradient(90deg,#68b8f9,#55a6f6,#3b8df0);color:#fff;box-shadow:0 6px 18px #0e41c21f,inset 0 1px #ffffff1f;cursor:pointer;transition:transform .12s ease,box-shadow .12s ease,opacity .12s;text-transform:uppercase;text-decoration:none;outline:none}.btn-pill-primary:hover,.btn-pill-primary:focus{transform:translateY(-2px);box-shadow:0 10px 28px #0e41c22e,inset 0 1px #ffffff1f;opacity:1}.btn-pill-primary[disabled]{opacity:.6;cursor:not-allowed}@media(max-width:480px){.btn-pill-primary{padding:8px 18px;font-size:.78rem}}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;overflow-x:hidden;background:#fff}.logo{display:flex;align-items:center}.nav-menu{display:flex;align-items:center;gap:2.5rem}.nav-link{text-decoration:none;color:#333;font-weight:400;font-size:.95rem;transition:color .3s}.nav-link:hover{color:var(--brand-500)}.illustration-title{font-size:1.75rem;font-weight:600;color:#1a1a1a;margin-bottom:1rem;line-height:1.4}.register-link{color:var(--brand-500);text-decoration:none;font-weight:500}.register-link:hover{text-decoration:underline}.input-field::placeholder{color:#aaa}.password-toggle{position:absolute;right:1rem;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;font-size:1.2rem;opacity:.6;transition:opacity .3s;padding:0;display:flex;align-items:center;justify-content:center}.submit-btn:active:not(:disabled){transform:translateY(0)}:root{--brand-500: #0f72d8;--brand-600: #0b61b8;--brand-soft: rgba(15,114,216,.06);--brand-soft-2: rgba(15,114,216,.03);--card-border: rgba(15,114,216,.1);--btn-text: #ffffff;--muted: #6b7280}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;background:#fff;overflow-x:hidden}.login-container{min-height:100vh;background:#fff;display:flex;flex-direction:column}.header{background:#fff;padding:1.5rem 0;border-bottom:1px solid #F0F0F0;position:relative;z-index:100}.header-content{max-width:1200px;margin:0 auto;padding:0 2rem;display:flex;justify-content:space-between;align-items:center}.logo-image{height:32px;width:auto;object-fit:contain}.nav-menu{display:flex;align-items:center;gap:1.25rem}.nav-link{text-decoration:none;color:#333;font-weight:400;font-size:.95rem}.masuk-btn-header{padding:.45rem .85rem;background:linear-gradient(90deg,var(--brand-500),var(--brand-600));color:var(--btn-text);border-radius:6px;text-decoration:none;font-weight:600;box-shadow:0 6px 18px #0f72d81f}.main-content{flex:1;display:flex;align-items:center;justify-content:center;padding:3rem 2rem}.content-wrapper{max-width:1200px;width:100%;display:grid;grid-template-columns:1fr 1fr;gap:6rem;align-items:center}.illustration-section{display:flex;justify-content:center;align-items:center}.illustration-content{max-width:560px;width:100%;text-align:left}.illustration-box{width:100%;height:260px;border-radius:12px;overflow:hidden;background:#f8fafc;box-shadow:0 6px 20px #0f172a0a;margin-bottom:1.25rem;display:flex;align-items:center;justify-content:center}.illustration-image{width:100%;height:100%;object-fit:cover;display:block}.illustration-fallback{background:linear-gradient(135deg,#eef2ff,#fce7f3);color:#111827}.illustration-title{font-size:1.5rem;font-weight:600;color:#1a1a1a;margin-bottom:.5rem;line-height:1.4}.illustration-text{font-size:1rem;color:var(--muted);line-height:1.6}.login-section{display:flex;justify-content:center;align-items:center}.login-card{background:linear-gradient(180deg,var(--brand-soft),var(--brand-soft-2));border-radius:12px;padding:2.5rem;border:1px solid var(--card-border);width:100%;max-width:480px;box-shadow:0 6px 20px #0f172a08}.login-title{font-size:1.5rem;font-weight:600;color:#0f172a;margin-bottom:.5rem}.login-subtitle{font-size:.95rem;color:var(--muted);margin-bottom:1.25rem}.login-form{display:flex;flex-direction:column;gap:1.25rem}.input-group{position:relative}.input-label{display:block;font-size:.9rem;font-weight:500;color:#333;margin-bottom:.5rem}.input-field{width:100%;height:48px;padding:0 1rem;border:1px solid #D0D0D0;border-radius:6px;font-size:.95rem;background:#fff;transition:all .2s;color:#1a1a1a}.input-field:focus{outline:none;border-color:var(--brand-500);box-shadow:0 0 0 3px #0f72d80f}.password-wrapper{position:relative}.password-toggle{position:absolute;right:1rem;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;font-size:1.2rem;opacity:.6;transition:opacity .3s;padding:0}.password-toggle:hover{opacity:.9}.alert-error{background:#fff4f4;border:1px solid #F8D7DA;color:#8b1d1d;padding:.75rem 1rem;border-radius:6px;font-size:.9rem;margin-bottom:1rem}.submit-btn{width:100%;height:48px;border:none;border-radius:8px;background:linear-gradient(90deg,var(--brand-500),var(--brand-600));color:var(--btn-text);font-size:1rem;font-weight:600;cursor:pointer;transition:transform .12s ease,box-shadow .12s ease,opacity .12s ease;margin-top:.5rem;box-shadow:0 6px 18px #0f72d81f}.submit-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 10px 28px #0f72d824}.submit-btn:disabled{opacity:.6;cursor:not-allowed}.footer{text-align:center;padding:1.25rem;font-size:.9rem;color:#888;border-top:1px solid #f2f2f2}@media(max-width:968px){.content-wrapper{grid-template-columns:1fr;gap:3rem}.illustration-section{order:2}.login-section{order:1}}@media(max-width:768px){.nav-menu,.illustration-section{display:none}.login-card{padding:2rem}.header-content{padding:0 1rem}.main-content{padding:2rem 1rem}}.reset-container{min-height:100vh;display:flex;flex-direction:column;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.reset-header{background:#fff;box-shadow:0 2px 8px #00000014;padding:15px 0;position:sticky;top:0;z-index:100}.header-content{max-width:1200px;margin:0 auto;padding:0 20px;display:flex;justify-content:space-between;align-items:center}.logo{display:flex;align-items:center;gap:12px;cursor:pointer}.logo-icon{width:42px;height:42px;background:linear-gradient(135deg,#667eea,#764ba2);border-radius:10px;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 6px #667eea40;transition:transform .3s ease}.logo-icon:hover{transform:scale(1.05)}.graduation-cap{font-size:24px;filter:brightness(0) invert(1)}.logo-text{display:flex;flex-direction:column;line-height:1.1}.smart{color:#2563eb;font-weight:800;font-size:19px;letter-spacing:-.5px}.school{color:#f97316;font-weight:800;font-size:19px;letter-spacing:-.5px}.nav-menu{display:flex;align-items:center;gap:35px}.nav-menu a{text-decoration:none;color:#475569;font-size:15px;font-weight:500;transition:all .3s ease;position:relative}.nav-menu a:after{content:"";position:absolute;width:0;height:2px;bottom:-5px;left:50%;background-color:#2563eb;transition:all .3s ease;transform:translate(-50%)}.nav-menu a:hover{color:#2563eb}.nav-menu a:hover:after{width:100%}.btn-masuk{background:linear-gradient(135deg,#60a5fa,#3b82f6);color:#fff;border:none;padding:10px 28px;border-radius:6px;font-weight:600;font-size:14px;cursor:pointer;transition:all .3s ease;box-shadow:0 2px 4px #3b82f633;letter-spacing:.5px}.btn-masuk:hover{transform:translateY(-2px);box-shadow:0 6px 12px #3b82f64d}.btn-masuk:active{transform:translateY(0)}.reset-main{flex:1;background:linear-gradient(135deg,#e0e7ff,#c7d2fe,#ddd6fe);display:flex;align-items:center;justify-content:center;padding:60px 20px;position:relative;overflow:hidden}.reset-main:before{content:"";position:absolute;width:400px;height:400px;background:radial-gradient(circle,rgba(96,165,250,.1) 0%,transparent 70%);top:-200px;left:-200px;border-radius:50%}.reset-main:after{content:"";position:absolute;width:500px;height:500px;background:radial-gradient(circle,rgba(167,139,250,.1) 0%,transparent 70%);bottom:-250px;right:-250px;border-radius:50%}.reset-card{display:flex;gap:80px;align-items:center;max-width:950px;width:100%;z-index:10;position:relative}.shield-icon{flex-shrink:0;animation:floatAnimation 3s ease-in-out infinite}@keyframes floatAnimation{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}.shield{width:300px;height:340px;position:relative;background:linear-gradient(145deg,#60a5fa,#3b82f6,#2563eb);border-radius:0 0 150px 150px;padding:25px;box-shadow:0 20px 40px #3b82f64d,0 10px 20px #3b82f633,inset 0 2px 4px #fff3;border:3px solid rgba(255,255,255,.1)}.shield:before{content:"";position:absolute;top:-25px;left:50%;transform:translate(-50%);width:340px;height:110px;background:linear-gradient(145deg,#60a5fa,#3b82f6,#2563eb);border-radius:170px 170px 0 0;border:3px solid rgba(255,255,255,.1);box-shadow:inset 0 2px 4px #fff3}.shield-inner{position:relative;width:100%;height:100%;display:flex;align-items:center;justify-content:center;flex-direction:column}.lock-icon{position:relative;width:90px;height:90px;background:linear-gradient(145deg,#1e40af,#1e3a8a);border-radius:14px;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 16px #1e40af4d,inset 0 1px 2px #ffffff1a}.lock-body{width:65px;height:48px;background:linear-gradient(145deg,#334155,#1e293b);border-radius:8px;position:absolute;bottom:12px;box-shadow:inset 0 2px 4px #0003}.lock-body:after{content:"";position:absolute;width:8px;height:12px;background:#64748b;border-radius:2px;top:50%;left:50%;transform:translate(-50%,-50%)}.lock-shackle{width:44px;height:38px;border:9px solid #334155;border-bottom:none;border-radius:22px 22px 0 0;position:absolute;top:8px;background:linear-gradient(145deg,#475569,#334155)}.checkmark{position:absolute;bottom:25px;right:25px;width:55px;height:55px;background:linear-gradient(145deg,#10b981,#059669);border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:32px;font-weight:700;box-shadow:0 6px 12px #10b9814d,0 2px 4px #10b98133;animation:pulse 2s infinite}@keyframes pulse{0%{box-shadow:0 0 #10b981b3}70%{box-shadow:0 0 0 15px #10b98100}to{box-shadow:0 0 #10b98100}}.reset-form-container{flex:1;background:#fff;padding:45px;border-radius:16px;box-shadow:0 20px 25px -5px #0000001a,0 10px 10px -5px #0000000a;border:1px solid rgba(226,232,240,.5)}.reset-title{font-size:28px;color:#1e293b;margin-bottom:24px;font-weight:700;position:relative;padding-bottom:12px}.reset-title:after{content:"";position:absolute;bottom:0;left:0;width:60px;height:4px;background:linear-gradient(90deg,#60a5fa,#3b82f6);border-radius:2px}.back-to-login{background:none;border:none;color:#f97316;font-size:14px;font-weight:500;cursor:pointer;padding:8px 0;margin-bottom:28px;display:inline-flex;align-items:center;gap:6px;transition:all .3s ease;position:relative}.back-to-login:after{content:""}.visi-container{min-height:100vh;background:linear-gradient(135deg,#e5e7eb 0% 50%,#e5e7eb);padding:40px 20px}.visi-content{max-width:1200px;margin:0 auto}.visi-main-title{text-align:center;color:#2c3e50;font-size:32px;font-weight:700;margin-bottom:40px;letter-spacing:.5px;position:relative}.visi-main-title:after{content:"";display:block;width:150px;height:3px;background:linear-gradient(135deg,#e5e7eb 0% 50%,#e5e7eb);margin:15px auto 0;border-radius:2px}.visi-combined-container{background:#e6f3fb;border-radius:12px;padding:40px;box-shadow:0 6px 20px #00000014;position:relative;overflow:hidden}.visi-combined-container:before{content:"";position:absolute;top:0;left:0;right:0;height:6px;background:linear-gradient(90deg,#ff6b35,#f39c12,#3498db 66%,#f39c12)}.visi-section-inner{background:transparent;padding:30px 0;position:relative}.visi-section-full{padding-bottom:40px;border-bottom:1px solid rgba(255,255,255,.5);margin-bottom:30px}.visi-section-content{display:flex;gap:30px;align-items:flex-start}.visi-text-content{flex:1;min-width:0}.visi-title{font-size:22px;font-weight:800;margin-bottom:15px;color:#1e5ba8}.mission-title{color:#3498db}.values-title{color:#f39c12}.visi-description{color:#4a5568;line-height:1.7;text-align:justify;font-size:14px}.value-item{display:flex;margin-bottom:8px}.value-bullet{color:#f39c12;font-weight:700;margin-right:8px}.visi-image-wrapper{flex-shrink:0}.visi-badge-circle{width:150px;height:150px;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;background:#fff;box-shadow:0 8px 20px #0000001f}.orange-badge{border:8px solid transparent;background-image:linear-gradient(#fff,#fff),linear-gradient(45deg,#ff6b35,#f39c12);background-origin:border-box;background-clip:content-box,border-box}.orange-badge:before,.orange-badge:after{content:"";position:absolute;border-radius:50%}.orange-badge:before{inset:-15px;border:3px solid rgba(255,107,53,.25)}.orange-badge:after{inset:-25px;border:2px solid rgba(243,156,18,.15)}.badge-text{font-size:24px;font-weight:700;color:#ff6b35;font-style:italic;transform:rotate(-5deg)}.blue-badge{width:120px;height:120px;border:6px solid #3498db;background:linear-gradient(135deg,#fff,#e8f4ff)}.badge-icon{font-size:32px;margin-bottom:5px}.badge-text-small{font-size:16px;font-weight:600;color:#3498db}.visi-badge-stamp{width:140px;height:140px;background:#fff;border:4px dashed #f39c12;border-radius:20px;display:flex;flex-direction:column;align-items:center;justify-content:center;transform:rotate(-5deg);box-shadow:0 8px 20px #f39c1240;position:relative}.visi-badge-stamp:before{content:"";position:absolute;inset:-10px;border:2px solid rgba(243,156,18,.25);border-radius:25px;transform:rotate(5deg)}.stamp-star{color:#f39c12;font-size:24px;margin-bottom:5px}.stamp-text{font-weight:800;color:#f39c12;font-size:16px;letter-spacing:1px;text-align:center;line-height:1.2}.stamp-stars{color:#f39c12;font-size:18px;margin-top:5px;letter-spacing:3px}.visi-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px}.visi-footer{text-align:center;color:#7f8c8d;font-size:13px;margin-top:40px;padding-top:20px;border-top:1px solid rgba(0,0,0,.05)}.visi-loading,.visi-error{padding:40px;text-align:center;font-size:16px}.visi-error{color:#e74c3c}@media(max-width:768px){.visi-grid{grid-template-columns:1fr;gap:30px}.visi-combined-container{padding:30px 20px}.visi-section-content{flex-direction:column;align-items:center}.visi-text-content{text-align:center}.visi-badge-circle,.blue-badge,.visi-badge-stamp{margin:20px auto 0}.visi-main-title{font-size:24px}.visi-title{font-size:18px;text-align:center}.visi-section-full{padding-bottom:30px;margin-bottom:20px}}@media(max-width:480px){.visi-container{padding:20px 15px}.visi-combined-container{padding:25px 15px}.visi-section-inner{padding:20px 0}.visi-badge-circle{width:120px;height:120px}.blue-badge{width:100px;height:100px}.visi-badge-stamp{width:110px;height:110px}.badge-text{font-size:20px}.badge-text-small,.stamp-text{font-size:14px}}.sejarah-container{background:linear-gradient(135deg,#e5e7eb 0% 50%,#e5e7eb);min-height:100vh;padding:30px}.sejarah-wrapper{max-width:900px;margin:0 auto;background:#fff;border-radius:15px;padding:40px;box-shadow:0 5px 20px #0000001a}.sejarah-header{margin-bottom:30px;padding-bottom:20px;border-bottom:3px solid #e6f2ff}.sejarah-header h1{color:#2d3748;font-size:32px;font-weight:700;margin:0;background:linear-gradient(135deg,#1e5ba8,#3498db,#f39c12);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.sejarah-content-card{background:#fff;border-radius:12px;padding:30px;box-shadow:0 2px 10px #0000000d;border:2px solid #e6f2ff;position:relative;overflow:hidden}.sejarah-content-card:before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,#667eea,#764ba2)}.sejarah-description{white-space:pre-wrap;color:#4a5568;font-size:16px;line-height:1.8;margin:0;text-align:justify}.sejarah-description:first-letter{font-size:3em;font-weight:700;float:left;line-height:.9;margin:.1em .1em 0 0;background:linear-gradient(135deg,#667eea,#764ba2);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.sejarah-timestamp{margin-top:25px;padding-top:20px;border-top:1px solid #e6f2ff;font-size:13px;color:#718096;text-align:right;font-style:italic}.sejarah-timestamp:before{content:"📅 ";margin-right:5px}.sejarah-empty-state{text-align:center;padding:80px 20px;color:#a0aec0}.sejarah-empty-icon{font-size:80px;margin-bottom:20px;opacity:.4}.sejarah-empty-text{font-size:20px;font-weight:600;margin-bottom:10px;color:#718096}.sejarah-empty-subtext{font-size:14px;color:#cbd5e0}.sejarah-loading-state{text-align:center;padding:80px 20px;color:#718096;font-size:16px}.sejarah-loading-spinner{display:inline-block;width:50px;height:50px;border:5px solid #e2e8f0;border-top-color:#667eea;border-radius:50%;animation:spin .8s linear infinite;margin-bottom:20px}.sejarah-error-state{text-align:center;padding:60px 20px;background:#fff5f5;border-radius:12px;border:2px solid #feb2b2}.sejarah-error-icon{font-size:64px;margin-bottom:15px;opacity:.7}.sejarah-error-text{color:#fc5c65;font-size:16px;font-weight:500}.sejarah-description p:first-of-type{font-size:1.1em;font-weight:500;color:#2d3748}.sejarah-highlight-box{background:linear-gradient(135deg,#667eea0d,#764ba20d);border-left:4px solid #667eea;padding:20px;margin:20px 0;border-radius:8px}.sejarah-highlight-box p{margin:0;color:#4a5568;font-size:15px;line-height:1.7}.sejarah-info-badge{display:inline-flex;align-items:center;gap:8px;padding:8px 16px;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border-radius:20px;font-size:13px;font-weight:600;margin-bottom:20px;box-shadow:0 2px 8px #667eea4d}.sejarah-info-badge:before{content:"ℹ️"}.sejarah-content-card{animation:fadeIn .5s ease}.sejarah-header h1{animation:slideInFromLeft .6s ease}@media(max-width:768px){.sejarah-container{padding:15px}.sejarah-wrapper{padding:25px;border-radius:10px}.sejarah-header h1{font-size:24px}.sejarah-content-card{padding:20px}.sejarah-description{font-size:15px;line-height:1.7;text-align:left}.sejarah-description:first-letter{font-size:2.5em}.sejarah-timestamp{text-align:left;font-size:12px}}@media(max-width:480px){.sejarah-wrapper{padding:20px}.sejarah-header h1{font-size:20px}.sejarah-content-card{padding:16px}.sejarah-description{font-size:14px}.sejarah-description:first-letter{font-size:2em}.sejarah-empty-state{padding:60px 20px}.sejarah-empty-icon{font-size:60px}}@media print{.sejarah-container{background:#fff;padding:0}.sejarah-wrapper{box-shadow:none;border-radius:0}.sejarah-content-card:before{display:none}.sejarah-timestamp{page-break-before:avoid}}.sejarah-wrapper::-webkit-scrollbar{width:8px}.sejarah-wrapper::-webkit-scrollbar-track{background:#f1f1f1;border-radius:10px}.sejarah-wrapper::-webkit-scrollbar-thumb{background:linear-gradient(135deg,#667eea,#764ba2);border-radius:10px}.sejarah-wrapper::-webkit-scrollbar-thumb:hover{background:linear-gradient(135deg,#764ba2,#667eea)}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}.news-page{min-height:100vh;background:linear-gradient(to right,#e5e7eb 0% 30%,#e5e7eb 50% 100%)}.header{padding:16px 0}.header-content{max-width:1400px;margin:0 auto;padding:0 24px;display:flex;align-items:center;justify-content:space-between}.logo-section{display:flex;align-items:center;gap:12px}.nav-menu{display:flex;align-items:center;gap:24px}.nav-menu a{font-weight:500;font-size:15px;transition:opacity .3s ease}.nav-menu a:hover{opacity:.8}.btn-masuk{padding:10px 24px;background:linear-gradient(to right,#2563eb,#1d4ed8);color:#fff;border:none;border-radius:8px;font-weight:600;font-size:14px;cursor:pointer;transition:all .3s ease;box-shadow:0 2px 8px #2563eb4d}.btn-masuk:hover{transform:translateY(-2px);box-shadow:0 4px 12px #2563eb66}.news-hero{text-align:center;padding:60px 24px 40px;max-width:1400px;margin:0 auto}.news-hero h1{font-size:48px;font-weight:800;background:linear-gradient(135deg,#1e5ba8,#3498db,#f39c12);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:16px}.news-hero .subtitle{font-size:18px;color:#6b7280;font-weight:500}.container{max-width:1400px;margin:0 auto;padding:40px 24px}.info{text-align:center;padding:60px 20px;color:#6b7280;font-size:16px}.info.loading:after{content:"";display:block;width:40px;height:40px;border:4px solid #e5e7eb;border-top-color:#3b82f6;border-radius:50%;animation:spin .8s linear infinite;margin:20px auto 0}.error{text-align:center;padding:60px 20px;color:#dc2626;font-size:16px;font-weight:500;background:#fef2f2;border-radius:12px;border:2px solid #fecaca;margin-bottom:24px}.news-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(350px,1fr));gap:32px;margin-top:40px}.news-card{background:#fff;border-radius:16px;overflow:hidden;box-shadow:0 4px 16px #00000014;transition:all .3s ease;display:flex;flex-direction:column}.news-card:hover{transform:translateY(-8px);box-shadow:0 12px 32px #00000026}.news-thumb{width:100%;height:240px;overflow:hidden;background:linear-gradient(135deg,#667eea,#764ba2)}.news-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease}.news-card:hover .news-thumb img{transform:scale(1.1)}.no-image{width:100%;height:100%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:64px;font-weight:700;opacity:.5}.news-body{padding:24px;flex:1;display:flex;flex-direction:column}.news-title{font-size:22px;font-weight:700;color:#1f2937;margin-bottom:12px;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.meta{font-size:13px;color:#9ca3af;margin-bottom:16px;font-weight:500}.excerpt{color:#6b7280;font-size:15px;line-height:1.7;margin-bottom:20px;flex:1}.actions{margin-top:auto}.btn-primary{padding:12px 24px;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;border-radius:8px;font-weight:600;font-size:14px;cursor:pointer;transition:all .3s ease;width:100%;box-shadow:0 2px 8px #667eea4d}.btn-primary:hover{transform:translateY(-2px);box-shadow:0 4px 12px #667eea66}.footer{color:#fff;padding:60px 24px 30px}.footer-content{max-width:1400px;margin:0 auto 48px;display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:48px}.footer-column{display:flex;flex-direction:column}.footer-title{font-size:18px;font-weight:700;margin-bottom:20px;color:#fff}.contact-list,.social-list{display:flex;flex-direction:column;gap:16px}.contact-item,.social-item{display:flex;align-items:flex-start;gap:12px}.contact-icon,.social-icon{font-size:24px;flex-shrink:0}.contact-text,.social-text{color:#d1d5db;line-height:1.6;margin:0}.social-item:hover .social-text{color:#fff;text-decoration:underline}.footer-bottom{max-width:1400px;margin:0 auto;padding-top:32px;border-top:1px solid rgba(255,255,255,.1);text-align:center}.footer-bottom p{font-size:14px;color:#9ca3af}@media(max-width:1024px){.news-grid{grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:24px}}@media(max-width:768px){.header-content{flex-wrap:wrap;gap:16px}.nav-menu{display:none}.news-hero h1{font-size:36px}.news-hero .subtitle{font-size:16px}.news-grid{grid-template-columns:1fr;gap:20px}.footer-content{grid-template-columns:1fr;gap:32px}}@media(max-width:480px){.container{padding:24px 16px}.news-hero{padding:40px 16px 30px}.news-hero h1{font-size:28px}.news-card{border-radius:12px}.news-thumb{height:200px}.news-body{padding:20px}.news-title{font-size:20px}.footer{padding:40px 16px 20px}}.news-card{animation:fadeIn .5s ease}.gallery-page{background:linear-gradient(to right,#e5e7eb 0% 30%,#e5e7eb 50% 100%);min-height:100vh;padding:30px}.header{max-width:1400px;margin:0 auto 30px;display:flex;align-items:center;gap:20px;background:#fff;padding:20px 30px;border-radius:15px;box-shadow:0 5px 20px #0000001a}.header h1{color:#2d3748;font-size:28px;font-weight:700;margin:0;background:linear-gradient(135deg,#1e5ba8,#3498db,#f39c12);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.btn-back{padding:10px 20px;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;border-radius:8px;cursor:pointer;font-weight:600;font-size:14px;transition:all .3s ease;box-shadow:0 2px 8px #667eea4d}.btn-back:hover{transform:translateY(-2px);box-shadow:0 5px 15px #667eea66}.gallery-grid{max-width:1400px;margin:0 auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:25px;padding:20px;background:#fff;border-radius:15px;box-shadow:0 5px 20px #0000001a}.gallery-card{position:relative;aspect-ratio:1;border-radius:12px;overflow:hidden;cursor:pointer;transition:all .3s ease;box-shadow:0 2px 10px #0000001a;background:linear-gradient(135deg,#e2e8f0,#cbd5e0)}.gallery-card:hover{transform:translateY(-8px) scale(1.02);box-shadow:0 10px 30px #0003}.gallery-card img{width:100%;height:100%;object-fit:cover;transition:transform .3s ease}.gallery-card:hover img{transform:scale(1.1)}.placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:48px;color:#a0aec0;background:linear-gradient(135deg,#e2e8f0,#cbd5e0)}.modal-overlay{position:fixed;inset:0;background:#000000d9;display:flex;align-items:center;justify-content:center;z-index:1000;padding:20px;animation:fadeIn .3s ease;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}.modal-content{background:#fff;border-radius:15px;padding:30px;max-width:900px;max-height:90vh;overflow-y:auto;box-shadow:0 10px 40px #0000004d;animation:slideUp .3s ease;position:relative}.modal-content img{width:100%;height:auto;border-radius:12px;margin-bottom:20px;box-shadow:0 5px 20px #0000001a}.modal-meta{margin:20px 0;padding:15px;background:linear-gradient(135deg,#f7fafc,#edf2f7);border-radius:8px;border-left:4px solid #667eea}.modal-meta p{margin:8px 0;color:#4a5568;font-size:14px;line-height:1.6}.modal-meta strong{color:#2d3748;font-weight:600;margin-right:8px}.btn-close{width:100%;padding:12px 24px;background:linear-gradient(135deg,#fc5c65,#eb3b5a);color:#fff;border:none;border-radius:8px;cursor:pointer;font-weight:600;font-size:14px;transition:all .3s ease;margin-top:10px}.btn-close:hover{transform:translateY(-2px);box-shadow:0 5px 15px #fc5c6566}.gallery-page>p{max-width:1400px;margin:0 auto;text-align:center;padding:60px 20px;background:#fff;border-radius:15px;font-size:16px;font-weight:500;color:#718096;box-shadow:0 5px 20px #0000001a}@keyframes slideUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}@media(max-width:768px){.gallery-page{padding:15px}.header{padding:15px 20px;flex-direction:column;align-items:flex-start;gap:12px}.header h1{font-size:22px}.btn-back{width:100%;text-align:center}.gallery-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:15px;padding:15px}.modal-content{padding:20px;max-width:95%}.modal-meta p{font-size:13px}}@media(max-width:480px){.header h1{font-size:18px}.gallery-grid{grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px;padding:10px}.modal-content{padding:15px}.btn-close{padding:10px 20px;font-size:13px}}.gallery-card:focus{outline:3px solid #667eea;outline-offset:3px}.btn-back:focus,.btn-close:focus{outline:3px solid #667eea;outline-offset:2px}.pengumuman-detail-container{background:linear-gradient(135deg,#e5e7eb 0% 50%,#e5e7eb);min-height:100vh;padding:30px}.pengumuman-detail-wrapper{max-width:1000px;margin:0 auto;background:#fff;border-radius:15px;padding:40px;box-shadow:0 5px 20px #0000001a}.pengumuman-detail-header{margin-bottom:30px;padding-bottom:25px;border-bottom:3px solid #e6f2ff}.pengumuman-detail-title{color:#2d3748;font-size:32px;font-weight:700;margin:0 0 15px;line-height:1.4;background:linear-gradient(135deg,#1e5ba8,#3498db,#f39c12);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.pengumuman-detail-meta{color:#718096;font-size:14px;font-weight:500;display:flex;align-items:center;gap:10px}.pengumuman-detail-meta:before{content:"📢";font-size:16px}.pengumuman-detail-badge{display:inline-block;padding:6px 16px;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border-radius:20px;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;margin-bottom:20px}.pengumuman-detail-content{color:#4a5568;font-size:16px;line-height:1.8;margin-bottom:30px}.pengumuman-detail-content p{margin-bottom:16px}.pengumuman-detail-content h1,.pengumuman-detail-content h2,.pengumuman-detail-content h3{color:#2d3748;margin-top:24px;margin-bottom:16px;font-weight:600}.pengumuman-detail-content h1{font-size:28px}.pengumuman-detail-content h2{font-size:24px}.pengumuman-detail-content h3{font-size:20px}.pengumuman-detail-content ul,.pengumuman-detail-content ol{margin-bottom:16px;padding-left:24px}.pengumuman-detail-content li{margin-bottom:8px}.pengumuman-detail-content img{max-width:100%;height:auto;border-radius:8px;margin:16px 0}.pengumuman-detail-content blockquote{border-left:4px solid #667eea;margin:20px 0;font-style:italic;color:#718096;background:#f8fafc;padding:16px;border-radius:4px}.pengumuman-detail-content strong{color:#2d3748;font-weight:600}.pengumuman-detail-content a{color:#667eea;text-decoration:underline;transition:color .3s ease}.pengumuman-detail-content a:hover{color:#764ba2}.pengumuman-detail-actions{display:flex;gap:12px;padding-top:30px;border-top:2px solid #e6f2ff}.btn-pengumuman-back{padding:12px 24px;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;border-radius:8px;cursor:pointer;font-weight:600;font-size:14px;transition:all .3s ease;text-decoration:none;display:inline-flex;align-items:center;gap:8px;box-shadow:0 2px 8px #667eea4d}.btn-pengumuman-back:hover{transform:translateY(-2px);box-shadow:0 5px 15px #667eea66}.btn-pengumuman-back:before{content:"←";font-size:18px;font-weight:700}.pengumuman-detail-loading{text-align:center;padding:60px 20px;color:#718096;font-size:16px}.pengumuman-loading-spinner{display:inline-block;width:40px;height:40px;border:4px solid #e2e8f0;border-top-color:#667eea;border-radius:50%;animation:spin .8s linear infinite;margin-bottom:15px}.pengumuman-detail-error{text-align:center;padding:60px 20px;color:#fc5c65;font-size:16px;font-weight:500;background:#fff5f5;border-radius:12px;border:2px solid #feb2b2}.pengumuman-detail-error-icon{font-size:48px;margin-bottom:10px}.pengumuman-detail-not-found{text-align:center;padding:80px 20px;color:#a0aec0}.pengumuman-not-found-icon{font-size:64px;margin-bottom:15px;opacity:.5}.pengumuman-not-found-text{font-size:18px;font-weight:500;margin-bottom:10px;color:#718096}.pengumuman-info-box{background:linear-gradient(135deg,#e6f2ff,#f0f7ff);border-left:4px solid #667eea;padding:16px 20px;border-radius:8px;margin-bottom:24px}.pengumuman-info-box-title{color:#2d3748;font-weight:600;font-size:14px;margin-bottom:8px;display:flex;align-items:center;gap:8px}.pengumuman-info-box-title:before{content:"ℹ️";font-size:16px}.pengumuman-info-box-content{color:#4a5568;font-size:14px;line-height:1.6}@media(max-width:768px){.pengumuman-detail-container{padding:15px}.pengumuman-detail-wrapper{padding:25px;border-radius:10px}.pengumuman-detail-title{font-size:24px}.pengumuman-detail-meta{font-size:13px}.pengumuman-detail-content{font-size:15px}.pengumuman-detail-actions{flex-direction:column}.btn-pengumuman-back{width:100%;justify-content:center}}@media(max-width:480px){.pengumuman-detail-wrapper{padding:20px}.pengumuman-detail-title{font-size:20px}.pengumuman-detail-content{font-size:14px}}.pengumuman-detail-wrapper{animation:fadeIn .4s ease}@media print{.pengumuman-detail-container{background:#fff;padding:0}.pengumuman-detail-actions,.btn-pengumuman-back{display:none}.pengumuman-detail-wrapper{box-shadow:none;padding:20px}}.pengumuman-list-container{background:#e5e7eb;min-height:100vh;padding:30px}.btn-pengumuman-back:hover{background:#cbd5e0;transform:translateY(-2px)}.pengumuman-cards-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(350px,1fr));gap:24px;margin-top:20px}.pengumuman-card{background:#fff;border-radius:12px;padding:24px;box-shadow:0 2px 8px #00000014;transition:all .3s ease;border:2px solid #e6f2ff;position:relative;overflow:hidden}.pengumuman-card:before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,#667eea,#764ba2);transform:scaleX(0);transition:transform .3s ease}.pengumuman-card:hover{transform:translateY(-4px);box-shadow:0 8px 20px #0000001f;border-color:#667eea}.pengumuman-card:hover:before{transform:scaleX(1)}.pengumuman-card-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.pengumuman-card-id{display:inline-block;padding:4px 12px;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border-radius:20px;font-size:12px;font-weight:600}.pengumuman-card-date{color:#718096;font-size:13px;font-weight:500}.pengumuman-card-title{color:#2d3748;font-size:20px;font-weight:700;margin:0 0 12px;line-height:1.4}.pengumuman-card-description{color:#718096;font-size:14px;line-height:1.6;margin:0 0 20px;min-height:80px}.pengumuman-card-footer{padding-top:16px;border-top:1px solid #e6f2ff}.btn-pengumuman-card-view{width:100%;padding:10px 20px;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;border-radius:8px;cursor:pointer;font-weight:600;font-size:14px;transition:all .3s ease;display:flex;align-items:center;justify-content:center;gap:8px}.btn-pengumuman-card-view:hover{transform:translateY(-2px);box-shadow:0 4px 12px #667eea66}.btn-pengumuman-edit{padding:8px 16px;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;border-radius:6px;cursor:pointer;font-weight:500;font-size:13px;transition:all .3s ease;text-decoration:none;display:inline-block}.btn-pengumuman-edit:hover{transform:translateY(-2px);box-shadow:0 4px 12px #667eea66}.pengumuman-error-state{text-align:center;padding:80px 20px;color:#fc5c65;font-size:16px;font-weight:500;background:#fff5f5;border-radius:12px;border:2px solid #feb2b2}@media(max-width:1200px){.pengumuman-list-wrapper{padding:20px}.pengumuman-cards-grid{grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}.pengumuman-description-text{max-width:300px}}@media(max-width:768px){.pengumuman-list-container{padding:15px}.pengumuman-list-wrapper{padding:20px;border-radius:10px}.pengumuman-list-header{flex-direction:column;gap:15px;align-items:flex-start}.pengumuman-list-header h1{font-size:22px}.btn-pengumuman-back{width:100%;text-align:center}.pengumuman-cards-grid{grid-template-columns:1fr;gap:16px}.pengumuman-table thead th,.pengumuman-table tbody td{padding:10px 8px;font-size:12px}.pengumuman-actions{flex-direction:column;width:100%}.btn-pengumuman-edit{width:100%;text-align:center}.pengumuman-table th:nth-child(3),.pengumuman-table td:nth-child(3){display:none}}@media(max-width:480px){.pengumuman-list-header h1{font-size:18px}.pengumuman-table th:first-child,.pengumuman-table td:first-child{display:none}.pengumuman-card{padding:16px}.pengumuman-card-title{font-size:18px}.pengumuman-description-text{max-width:150px}}.pengumuman-table tbody tr,.pengumuman-card{animation:fadeIn .4s ease}.headmaster-container{background:linear-gradient(135deg,#e5e7eb 0% 50%,#e5e7eb);min-height:100vh;padding:30px}.headmaster-content{max-width:1200px;margin:0 auto;background:#fff;border-radius:15px;padding:40px;box-shadow:0 5px 20px #0000001a;position:relative;overflow:hidden}.headmaster-content:before{content:"";position:absolute;top:0;left:0;right:0;height:5px;background:linear-gradient(90deg,#667eea,#764ba2)}.headmaster-title{text-align:center;font-size:32px;font-weight:700;margin:0 0 40px;padding-bottom:20px;border-bottom:3px solid #e6f2ff;background:linear-gradient(135deg,#1e5ba8,#3498db,#f39c12);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;letter-spacing:2px;animation:slideInFromTop .6s ease}.headmaster-layout{display:grid;grid-template-columns:1fr 380px;gap:40px;margin-bottom:40px;animation:fadeIn .5s ease}.headmaster-text{color:#4a5568;font-size:16px;line-height:1.9;text-align:justify}.headmaster-text p{margin-bottom:20px;text-indent:2em}.headmaster-text p:first-child:first-letter{font-size:3.5em;font-weight:700;float:left;line-height:.85;margin:.1em .15em 0 0;background:linear-gradient(135deg,#667eea,#764ba2);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.headmaster-text p:last-child{margin-bottom:0}.headmaster-image-section{display:flex;flex-direction:column;gap:20px;align-items:center}.headmaster-image{width:100%;max-width:320px;height:380px;object-fit:cover;border-radius:12px;box-shadow:0 8px 24px #00000026;border:4px solid white;outline:2px solid #e6f2ff;transition:all .3s ease}.headmaster-image:hover{transform:scale(1.03);box-shadow:0 12px 32px #0003}.headmaster-image-placeholder{width:100%;max-width:320px;height:380px;background:linear-gradient(135deg,#e2e8f0,#cbd5e0);border-radius:12px;display:flex;align-items:center;justify-content:center;color:#a0aec0;font-size:14px;font-weight:500;text-align:center;padding:20px;border:4px solid white;outline:2px solid #e6f2ff;box-shadow:0 8px 24px #0000001a}.headmaster-image-placeholder:before{content:"👤";display:block;font-size:80px;margin-bottom:15px;opacity:.3}.headmaster-info{text-align:center;width:100%;padding:20px;background:linear-gradient(135deg,#667eea0d,#764ba20d);border-radius:12px;border:2px solid #e6f2ff}.headmaster-name{font-size:22px;font-weight:700;color:#2d3748;margin-bottom:8px;background:linear-gradient(135deg,#667eea,#764ba2);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.headmaster-title-text{font-size:14px;color:#718096;font-weight:500;line-height:1.6}.headmaster-footer{text-align:center;padding-top:30px;border-top:2px solid #e6f2ff;color:#718096;font-size:13px;font-weight:500;font-style:italic}.headmaster-footer:before{content:"©️ ";margin-right:5px}.headmaster-loading-state{text-align:center;padding:80px 20px;color:#718096;font-size:16px}.headmaster-loading-spinner{display:inline-block;width:50px;height:50px;border:5px solid #e2e8f0;border-top-color:#667eea;border-radius:50%;animation:spin .8s linear infinite;margin-bottom:20px}.headmaster-error-state{text-align:center;padding:60px 20px;background:#fff5f5;border-radius:12px;border:2px solid #feb2b2}.headmaster-error-icon{font-size:64px;margin-bottom:15px;opacity:.7}.headmaster-error-text{color:#fc5c65;font-size:16px;font-weight:500}.headmaster-empty-state{text-align:center;padding:80px 20px;color:#a0aec0}.headmaster-empty-icon{font-size:80px;margin-bottom:20px;opacity:.4}.headmaster-empty-text{font-size:20px;font-weight:600;margin-bottom:10px;color:#718096}.headmaster-empty-subtext{font-size:14px;color:#cbd5e0}.headmaster-quote{background:linear-gradient(135deg,#667eea14,#764ba214);border-left:5px solid #667eea;padding:25px;margin:30px 0;border-radius:8px;font-style:italic;color:#4a5568;font-size:17px;line-height:1.8;position:relative}.headmaster-quote:before{content:'"';position:absolute;top:-10px;left:10px;font-size:60px;color:#667eea;opacity:.2;font-family:Georgia,serif}@keyframes slideInFromTop{0%{opacity:0;transform:translateY(-30px)}to{opacity:1;transform:translateY(0)}}@keyframes slideInFromRight{0%{opacity:0;transform:translate(30px)}to{opacity:1;transform:translate(0)}}.headmaster-image-section{animation:slideInFromRight .7s ease}@media(max-width:1024px){.headmaster-layout{grid-template-columns:1fr 320px;gap:30px}.headmaster-image,.headmaster-image-placeholder{max-width:280px;height:340px}}@media(max-width:768px){.headmaster-container{padding:15px}.headmaster-content{padding:25px;border-radius:10px}.headmaster-title{font-size:24px;margin-bottom:30px}.headmaster-layout{grid-template-columns:1fr;gap:30px}.headmaster-image-section{order:-1}.headmaster-image,.headmaster-image-placeholder{max-width:100%;height:400px}.headmaster-text{font-size:15px;text-align:left}.headmaster-text p{text-indent:0}.headmaster-text p:first-child:first-letter{font-size:3em}.headmaster-name{font-size:20px}.headmaster-footer{font-size:12px}}@media(max-width:480px){.headmaster-content{padding:20px}.headmaster-title{font-size:20px;letter-spacing:1px}.headmaster-text{font-size:14px;line-height:1.7}.headmaster-text p:first-child:first-letter{font-size:2.5em}.headmaster-image,.headmaster-image-placeholder{height:350px}.headmaster-name{font-size:18px}.headmaster-title-text{font-size:13px}.headmaster-quote{padding:20px;font-size:15px}}@media print{.headmaster-container{background:#fff;padding:0}.headmaster-content{box-shadow:none;border-radius:0}.headmaster-content:before{display:none}.headmaster-layout{grid-template-columns:1fr 300px}.headmaster-image{max-width:280px;height:auto}.headmaster-footer{page-break-before:avoid}}.headmaster-content::-webkit-scrollbar{width:8px}.headmaster-content::-webkit-scrollbar-track{background:#f1f1f1;border-radius:10px}.headmaster-content::-webkit-scrollbar-thumb{background:linear-gradient(135deg,#667eea,#764ba2);border-radius:10px}.headmaster-content::-webkit-scrollbar-thumb:hover{background:linear-gradient(135deg,#764ba2,#667eea)}.teacher-container{background:linear-gradient(135deg,#e5e7eb 0% 50%,#e5e7eb);min-height:100vh;padding:30px}.teacher-wrapper{max-width:1400px;margin:0 auto;background:#fff;border-radius:15px;padding:30px;box-shadow:0 5px 20px #0000001a}.teacher-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:30px;padding-bottom:20px;border-bottom:3px solid #e6f2ff;background:transparent;border-radius:0;box-shadow:none}.teacher-header h1{color:#2d3748;font-size:28px;font-weight:700;margin:0;background:linear-gradient(135deg,#1e5ba8,#3498db,#f39c12);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.back-button{padding:10px 20px;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;border-radius:8px;cursor:pointer;font-weight:600;font-size:14px;transition:all .3s ease;text-decoration:none;display:inline-block}.back-button:hover{transform:translateY(-2px);box-shadow:0 4px 12px #667eea66}.teacher-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;margin-top:20px}.teacher-card{background:#fff;border-radius:12px;padding:24px;box-shadow:0 2px 8px #00000014;transition:all .3s ease;border:2px solid #e6f2ff;position:relative;overflow:hidden;display:flex;gap:1.5rem;cursor:pointer;animation:fadeIn .4s ease}.teacher-card:before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,#667eea,#764ba2);transform:scaleX(0);transition:transform .3s ease}.teacher-card:hover{transform:translateY(-4px);box-shadow:0 8px 20px #0000001f;border-color:#667eea}.teacher-card:hover:before{transform:scaleX(1)}.teacher-avatar{flex-shrink:0;width:120px;height:120px;border-radius:12px;overflow:hidden;background:#f5f5f5;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 12px #0000001a;transition:all .3s ease}.teacher-card:hover .teacher-avatar{transform:scale(1.05)}.teacher-avatar img{width:100%;height:100%;object-fit:cover}.teacher-avatar-placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;font-size:3rem;font-weight:700;letter-spacing:2px}.teacher-info{flex:1;display:grid;grid-template-columns:repeat(2,1fr);gap:.75rem 1.5rem;align-content:start}.teacher-info-item{display:flex;flex-direction:column;gap:.25rem}.teacher-info-label{font-size:.75rem;font-weight:600;color:#718096;margin-bottom:.25rem;text-transform:uppercase;letter-spacing:.5px}.teacher-info-value{font-size:.9rem;color:#2d3748;font-weight:500;line-height:1.4}.teacher-info-value.highlight{color:#667eea;font-weight:700;font-size:1.1rem}.teacher-loading{text-align:center;padding:80px 20px;color:#718096;font-size:16px}.teacher-loading:before{content:"";display:block;width:50px;height:50px;margin:0 auto 20px;border:5px solid #e2e8f0;border-top-color:#667eea;border-radius:50%;animation:spin .8s linear infinite}.teacher-error{text-align:center;padding:80px 20px;color:#fc5c65;font-size:16px;font-weight:500;background:#fff5f5;border-radius:12px;border:2px solid #feb2b2}.teacher-error:before{content:"⚠️";display:block;font-size:64px;margin-bottom:15px;opacity:.7}.teacher-empty{text-align:center;padding:100px 20px;color:#718096}.teacher-empty:before{content:"👨‍🏫";display:block;font-size:80px;margin-bottom:20px;opacity:.4}.teacher-empty:after{content:"Belum ada data guru tersedia";display:block;font-size:20px;font-weight:600;margin-top:10px;color:#4a5568}.modal-overlay{position:fixed;inset:0;z-index:50;background:#0009;display:flex;align-items:center;justify-content:center;padding:1rem;animation:fadeIn .3s ease;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.modal-content{background:#fff;border-radius:16px;max-width:650px;width:100%;max-height:90vh;overflow-y:auto;box-shadow:0 20px 60px #0000004d;animation:slideUp .3s ease}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.modal-header{padding:24px;border-bottom:2px solid #e6f2ff;display:flex;justify-content:space-between;align-items:center;background:linear-gradient(135deg,#667eea0d,#764ba20d)}.modal-header h2{font-size:1.75rem;font-weight:700;margin:0;background:linear-gradient(135deg,#667eea,#764ba2);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.modal-body{padding:24px}.modal-detail-grid{display:grid;gap:1.25rem;margin-top:1.5rem}.modal-detail-item{display:flex;flex-direction:column;gap:.5rem;padding:12px;background:#f8fafc;border-radius:8px;border-left:3px solid #667eea}.modal-detail-label{font-size:.875rem;font-weight:600;color:#718096;text-transform:uppercase;letter-spacing:.5px}.modal-detail-value{font-size:1.05rem;color:#2d3748;font-weight:500}.close-button{padding:10px 20px;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;border-radius:8px;cursor:pointer;font-weight:600;font-size:14px;transition:all .3s ease}.close-button:hover{transform:translateY(-2px);box-shadow:0 4px 12px #667eea66}@media(max-width:1200px){.teacher-wrapper{padding:20px}.teacher-grid{grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}}@media(max-width:768px){.teacher-container{padding:15px}.teacher-wrapper{padding:20px;border-radius:10px}.teacher-header{flex-direction:column;gap:15px;align-items:flex-start}.teacher-header h1{font-size:22px}.back-button{width:100%;text-align:center}.teacher-grid{grid-template-columns:1fr;gap:16px}.teacher-card{flex-direction:column;align-items:center;text-align:center}.teacher-avatar{width:150px;height:150px}.teacher-info{grid-template-columns:1fr;width:100%}.modal-content{margin:10px}.modal-header h2{font-size:1.5rem}}@media(max-width:480px){.teacher-header h1{font-size:18px}.teacher-card{padding:16px}.teacher-avatar{width:120px;height:120px}.teacher-avatar-placeholder{font-size:2.5rem}.modal-header,.modal-body{padding:16px}}.modal-content::-webkit-scrollbar{width:8px}.modal-content::-webkit-scrollbar-track{background:#f1f1f1;border-radius:10px}.modal-content::-webkit-scrollbar-thumb{background:linear-gradient(135deg,#667eea,#764ba2);border-radius:10px}.modal-content::-webkit-scrollbar-thumb:hover{background:linear-gradient(135deg,#764ba2,#667eea)}.programs-container{background:linear-gradient(135deg,#e5e7eb 0% 50%,#e5e7eb);min-height:100vh;padding:30px}.programs-wrapper{max-width:1400px;margin:0 auto;background:#fff;border-radius:15px;padding:40px;box-shadow:0 5px 20px #0000001a}.programs-header{margin-bottom:40px;padding-bottom:20px;border-bottom:3px solid #e6f2ff}.programs-header h1{color:#2d3748;font-size:32px;font-weight:700;margin:0;background:linear-gradient(135deg,#1e5ba8,#3498db,#f39c12);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:slideInFromLeft .6s ease}.programs-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:30px}.program-card{background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 2px 10px #00000014;transition:all .3s ease;border:2px solid #e6f2ff;position:relative;animation:fadeInUp .5s ease}.program-card:before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,#667eea,#764ba2);transform:scaleX(0);transition:transform .3s ease}.program-card:hover{transform:translateY(-8px);box-shadow:0 12px 30px #00000026;border-color:#667eea}.program-card:hover:before{transform:scaleX(1)}.program-image-container{width:100%;height:220px;overflow:hidden;background:linear-gradient(135deg,#f6f6f6,#e9ecef);position:relative}.program-image{width:100%;height:100%;object-fit:cover;transition:transform .4s ease}.program-card:hover .program-image{transform:scale(1.1)}.program-image-placeholder{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#a0aec0;font-size:14px;font-weight:500}.program-image-placeholder:before{content:"📚";display:block;font-size:60px;margin-bottom:10px;opacity:.3}.program-content{padding:24px}.program-title{font-size:20px;font-weight:700;color:#2d3748;margin:0 0 12px;line-height:1.4;min-height:56px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.program-description{font-size:14px;color:#718096;line-height:1.7;margin-bottom:20px;min-height:80px;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}.program-action{display:flex;justify-content:flex-start;padding-top:16px;border-top:1px solid #e6f2ff}.program-detail-button{padding:10px 24px;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;border-radius:8px;cursor:pointer;font-weight:600;font-size:14px;transition:all .3s ease;text-decoration:none;display:inline-block}.program-detail-button:hover{transform:translateY(-2px);box-shadow:0 5px 15px #667eea66}.program-detail-button:after{content:" →";margin-left:5px;transition:margin-left .3s ease}.program-detail-button:hover:after{margin-left:10px}.programs-loading-state{text-align:center;padding:80px 20px;color:#718096;font-size:16px}.programs-loading-spinner{display:inline-block;width:50px;height:50px;border:5px solid #e2e8f0;border-top-color:#667eea;border-radius:50%;animation:spin .8s linear infinite;margin-bottom:20px}.programs-error-state{text-align:center;padding:60px 20px;background:#fff5f5;border-radius:12px;border:2px solid #feb2b2}.programs-error-icon{font-size:64px;margin-bottom:15px;opacity:.7}.programs-error-text{color:#fc5c65;font-size:16px;font-weight:500}.programs-empty-state{text-align:center;padding:100px 20px;color:#a0aec0}.programs-empty-icon{font-size:80px;margin-bottom:20px;opacity:.4}.programs-empty-text{font-size:20px;font-weight:600;margin-bottom:10px;color:#718096}.programs-empty-subtext{font-size:14px;color:#cbd5e0}.program-badge{position:absolute;top:12px;right:12px;background:linear-gradient(135deg,#f6ad55,#ed8936);color:#fff;padding:6px 12px;border-radius:20px;font-size:12px;font-weight:600;box-shadow:0 2px 8px #f6ad5566;z-index:10}@keyframes slideInFromLeft{0%{opacity:0;transform:translate(-30px)}to{opacity:1;transform:translate(0)}}.program-card:nth-child(1){animation-delay:.1s}.program-card:nth-child(2){animation-delay:.2s}.program-card:nth-child(3){animation-delay:.3s}.program-card:nth-child(4){animation-delay:.4s}.program-card:nth-child(5){animation-delay:.5s}.program-card:nth-child(6){animation-delay:.6s}.program-card:after{content:"";position:absolute;inset:0;background:linear-gradient(135deg,#667eea0d,#764ba20d);opacity:0;transition:opacity .3s ease;pointer-events:none;border-radius:12px}.program-card:hover:after{opacity:1}@media(max-width:1200px){.programs-grid{grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:24px}}@media(max-width:768px){.programs-container{padding:15px}.programs-wrapper{padding:25px;border-radius:10px}.programs-header h1{font-size:24px}.programs-grid{grid-template-columns:1fr;gap:20px}.program-image-container{height:200px}.program-content{padding:20px}.program-title{font-size:18px;min-height:auto}.program-description{min-height:auto;-webkit-line-clamp:3}}@media(max-width:480px){.programs-wrapper{padding:20px}.programs-header h1{font-size:20px}.program-image-container{height:180px}.program-content{padding:16px}.program-title{font-size:16px}.program-description{font-size:13px}.program-detail-button{width:100%;text-align:center}}@media print{.programs-container{background:#fff;padding:0}.programs-wrapper{box-shadow:none;border-radius:0}.program-card{page-break-inside:avoid}.program-detail-button{display:none}}.programs-wrapper::-webkit-scrollbar{width:8px}.programs-wrapper::-webkit-scrollbar-track{background:#f1f1f1;border-radius:10px}.programs-wrapper::-webkit-scrollbar-thumb{background:linear-gradient(135deg,#667eea,#764ba2);border-radius:10px}.programs-wrapper::-webkit-scrollbar-thumb:hover{background:linear-gradient(135deg,#764ba2,#667eea)}.program-detail-container{background:linear-gradient(135deg,#e5e7eb 0% 50%,#e5e7eb);min-height:100vh;padding:30px}.program-detail-wrapper{max-width:1000px;margin:0 auto;background:#fff;border-radius:15px;padding:40px;box-shadow:0 5px 20px #0000001a;animation:fadeIn .4s ease}.program-detail-back-section{margin-bottom:25px}.btn-program-back{padding:10px 20px;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;border-radius:8px;cursor:pointer;font-weight:600;font-size:14px;transition:all .3s ease;display:inline-flex;align-items:center;gap:8px;box-shadow:0 2px 8px #667eea4d}.btn-program-back:hover{transform:translateY(-2px);box-shadow:0 5px 15px #667eea66}.btn-program-back:before{content:"←";font-size:18px;font-weight:700}.program-detail-header{margin-bottom:30px;padding-bottom:25px;border-bottom:3px solid #e6f2ff}.program-detail-title{color:#2d3748;font-size:32px;font-weight:700;margin:0 0 15px;line-height:1.4;background:linear-gradient(135deg,#1e5ba8,#3498db,#f39c12);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.program-detail-badge{display:inline-block;padding:6px 16px;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border-radius:20px;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;margin-bottom:20px}.program-detail-image-wrapper{width:100%;margin-bottom:30px;border-radius:12px;overflow:hidden;box-shadow:0 4px 15px #0000001a;position:relative}.program-detail-image{width:100%;height:400px;object-fit:cover;display:block;transition:transform .4s ease}.program-detail-image:hover{transform:scale(1.05)}.program-detail-image-placeholder{width:100%;height:400px;background:linear-gradient(135deg,#667eea,#764ba2);display:flex;align-items:center;justify-content:center;color:#fff;font-size:80px;opacity:.6}.program-detail-content{color:#4a5568;font-size:16px;line-height:1.8;margin-bottom:30px;white-space:pre-wrap;word-wrap:break-word}.program-detail-content p{margin-bottom:16px}.program-detail-content h1,.program-detail-content h2,.program-detail-content h3{color:#2d3748;margin-top:24px;margin-bottom:16px;font-weight:600}.program-detail-content h1{font-size:28px}.program-detail-content h2{font-size:24px}.program-detail-content h3{font-size:20px}.program-detail-content ul,.program-detail-content ol{margin-bottom:16px;padding-left:24px}.program-detail-content li{margin-bottom:8px}.program-detail-content img{max-width:100%;height:auto;border-radius:8px;margin:16px 0}.program-detail-content blockquote{border-left:4px solid #667eea;margin:20px 0;font-style:italic;color:#718096;background:#f8fafc;padding:16px;border-radius:4px}.program-detail-content strong{color:#2d3748;font-weight:600}.program-detail-content a{color:#667eea;text-decoration:underline;transition:color .3s ease}.program-detail-content a:hover{color:#764ba2}.program-info-box{background:linear-gradient(135deg,#e6f2ff,#f0f7ff);border-left:4px solid #667eea;padding:16px 20px;border-radius:8px;margin-bottom:24px}.program-info-box-title{color:#2d3748;font-weight:600;font-size:14px;margin-bottom:8px;display:flex;align-items:center;gap:8px}.program-info-box-title:before{content:"ℹ️";font-size:16px}.program-info-box-content{color:#4a5568;font-size:14px;line-height:1.6}.program-detail-actions{display:flex;gap:12px;padding-top:30px;border-top:2px solid #e6f2ff}.program-detail-loading{text-align:center;padding:80px 20px;color:#718096;font-size:16px}.program-loading-spinner{display:inline-block;width:50px;height:50px;border:5px solid #e2e8f0;border-top-color:#667eea;border-radius:50%;animation:spin .8s linear infinite;margin-bottom:20px}.program-detail-error{text-align:center;padding:80px 20px;color:#fc5c65;font-size:16px;font-weight:500;background:#fff5f5;border-radius:12px;border:2px solid #feb2b2}.program-detail-error:before{content:"⚠️";display:block;font-size:64px;margin-bottom:15px;opacity:.7}.program-detail-not-found{text-align:center;padding:100px 20px;color:#a0aec0}.program-not-found-icon{font-size:80px;margin-bottom:20px;opacity:.4}.program-not-found-text{font-size:20px;font-weight:600;margin-bottom:10px;color:#718096}.program-not-found-subtext{font-size:14px;color:#cbd5e0}@media(max-width:768px){.program-detail-container{padding:15px}.program-detail-wrapper{padding:25px;border-radius:10px}.program-detail-title{font-size:24px}.program-detail-image,.program-detail-image-placeholder{height:280px}.program-detail-content{font-size:15px}.program-detail-actions{flex-direction:column}.btn-program-back{width:100%;justify-content:center}}@media(max-width:480px){.program-detail-container{padding:10px}.program-detail-wrapper{padding:20px}.program-detail-title{font-size:20px}.program-detail-image,.program-detail-image-placeholder{height:220px}.program-detail-content{font-size:14px}}@keyframes fadeIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes shimmer{0%{background-position:-1000px 0}to{background-position:1000px 0}}.program-image-loading{background:linear-gradient(90deg,#f0f0f0 25%,#e0e0e0,#f0f0f0 75%);background-size:1000px 100%;animation:shimmer 2s infinite}@media print{.program-detail-container{background:#fff;padding:0}.program-detail-back-section,.program-detail-actions,.btn-program-back{display:none}.program-detail-wrapper{box-shadow:none;padding:20px}.program-detail-image{page-break-inside:avoid}}:root{--primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);--secondary-gradient: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);--success-gradient: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);--sidebar-width: 280px;--header-height: 70px;--footer-height: 60px;--primary-color: #667eea;--text-primary: #1a202c;--text-secondary: #718096;--bg-white: #ffffff;--bg-light: #f7fafc;--border-color: #e2e8f0;--shadow-sm: 0 2px 4px rgba(0, 0, 0, .05);--shadow-md: 0 4px 12px rgba(0, 0, 0, .1);--shadow-lg: 0 10px 30px rgba(0, 0, 0, .15);--transition: all .3s cubic-bezier(.4, 0, .2, 1)}*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.admin-layout{display:grid;grid-template-areas:"header header" "sidebar main" "sidebar footer";grid-template-columns:var(--sidebar-width) 1fr;grid-template-rows:var(--header-height) 1fr var(--footer-height);min-height:100vh;background:var(--bg-light);transition:var(--transition)}.admin-layout.sidebar-closed{grid-template-columns:0 1fr}.admin-header{grid-area:header;background:var(--bg-white);border-bottom:1px solid var(--border-color);display:flex;align-items:center;justify-content:space-between;padding:0 2rem;box-shadow:var(--shadow-sm);position:sticky;top:0;z-index:100;animation:slideDown .4s ease-out}@keyframes slideDown{0%{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}.header-left{display:flex;align-items:center;gap:1.5rem}.menu-toggle{width:44px;height:44px;background:var(--primary-gradient);border:none;border-radius:12px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:var(--transition);box-shadow:0 4px 12px #667eea4d}.menu-toggle:hover{transform:translateY(-2px);box-shadow:0 6px 20px #667eea66}.menu-toggle svg{width:24px;height:24px;color:#fff;stroke-width:2.5}.brand{display:flex;align-items:center;gap:1rem}.brand-icon{width:48px;height:48px;background:var(--primary-gradient);border-radius:12px;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 12px #667eea33}.brand-icon svg{width:28px;height:28px;color:#fff;stroke-width:2.5}.brand-text{display:flex;flex-direction:column}.brand-name{font-size:1.5rem;font-weight:800;background:var(--primary-gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;line-height:1.2}.brand-subtitle{font-size:.75rem;color:var(--text-secondary);font-weight:600;text-transform:uppercase;letter-spacing:.5px}.header-right{display:flex;align-items:center;gap:1rem}.btn-logout{display:flex;align-items:center;gap:.5rem;padding:.75rem 1.5rem;background:var(--secondary-gradient);color:#fff;border:none;border-radius:10px;font-weight:600;font-size:.95rem;cursor:pointer;transition:var(--transition);box-shadow:0 4px 12px #f5576c4d}.btn-logout:hover{transform:translateY(-2px);box-shadow:0 6px 20px #f5576c66}.btn-logout svg{width:20px;height:20px;stroke-width:2.5}.admin-sidebar{grid-area:sidebar;background:linear-gradient(180deg,#1e293b,#0f172a);overflow-y:auto;overflow-x:hidden;padding:2rem 0;box-shadow:var(--shadow-lg);transition:var(--transition);animation:slideInLeft .4s ease-out}@keyframes slideInLeft{0%{opacity:0;transform:translate(-100%)}to{opacity:1;transform:translate(0)}}.admin-layout.sidebar-closed .admin-sidebar{transform:translate(-100%);width:0;padding:0}.admin-sidebar::-webkit-scrollbar{width:6px}.admin-sidebar::-webkit-scrollbar-track{background:#ffffff0d}.admin-sidebar::-webkit-scrollbar-thumb{background:#fff3;border-radius:10px}.admin-sidebar::-webkit-scrollbar-thumb:hover{background:#ffffff4d}.sidebar-nav{display:flex;flex-direction:column;gap:.5rem;padding:0 1rem}.nav-section{margin-top:1.5rem}.nav-section:first-child{margin-top:0}.section-title{padding:.75rem 1rem;color:#ffffff80;font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:1px;margin-bottom:.5rem}.nav-item{display:flex;align-items:center;gap:1rem;padding:.875rem 1rem;color:#fffc;text-decoration:none;border-radius:10px;transition:var(--transition);font-weight:500;font-size:.95rem;position:relative;overflow:hidden}.nav-item:before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--primary-gradient);transform:scaleY(0);transition:var(--transition)}.nav-item svg{width:22px;height:22px;stroke-width:2.5;flex-shrink:0;transition:var(--transition)}.nav-item:hover{background:#ffffff1a;color:#fff;transform:translate(4px)}.nav-item:hover svg{transform:scale(1.1)}.nav-item.active{background:#667eea33;color:#fff;box-shadow:0 4px 12px #667eea33}.nav-item.active:before{transform:scaleY(1)}.nav-item.active svg{color:#667eea;filter:drop-shadow(0 0 8px rgba(102,126,234,.6))}.admin-main{grid-area:main;padding:2rem;overflow-y:auto;animation:fadeIn .5s ease-out .1s both}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.admin-footer{grid-area:footer;background:var(--bg-white);border-top:1px solid var(--border-color);display:flex;align-items:center;justify-content:center;padding:0 2rem;box-shadow:0 -2px 10px #0000000d}.footer-content{display:flex;align-items:center;gap:2rem;flex-wrap:wrap}.footer-content p{margin:0;color:var(--text-secondary);font-size:.875rem}.footer-credit{font-weight:500}.footer-credit span{font-weight:700;background:var(--primary-gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.sidebar-overlay{display:none}@media(max-width:1024px){:root{--sidebar-width: 240px}.admin-header{padding:0 1.5rem}.admin-main{padding:1.5rem}}@media(max-width:768px){.admin-layout{grid-template-areas:"header" "main" "footer";grid-template-columns:1fr;grid-template-rows:var(--header-height) 1fr var(--footer-height)}.admin-layout.sidebar-closed{grid-template-columns:1fr}.admin-sidebar{position:fixed;left:0;top:var(--header-height);bottom:var(--footer-height);width:var(--sidebar-width);z-index:200;transform:translate(-100%)}.admin-sidebar.open{transform:translate(0)}.sidebar-overlay{display:block;position:fixed;inset:0;background:#00000080;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:150;animation:fadeIn .3s ease-out}.brand-text{display:none}.admin-header{padding:0 1rem}.admin-main{padding:1rem}.footer-content{flex-direction:column;gap:.5rem;text-align:center}.footer-content p{font-size:.75rem}}@media(max-width:480px){:root{--header-height: 60px;--sidebar-width: 260px}.menu-toggle{width:40px;height:40px}.menu-toggle svg{width:20px;height:20px}.brand-icon{width:42px;height:42px}.brand-icon svg{width:24px;height:24px}.btn-logout{padding:.625rem 1.25rem;font-size:.875rem}.btn-logout svg{width:18px;height:18px}.btn-logout span{display:none}.admin-main{padding:.75rem}.nav-item{padding:.75rem .875rem;font-size:.875rem}.nav-item svg{width:20px;height:20px}}@media print{.admin-header,.admin-sidebar,.admin-footer{display:none}.admin-layout{grid-template-areas:"main";grid-template-columns:1fr;grid-template-rows:1fr}.admin-main{padding:0}}@media(prefers-color-scheme:dark){:root{--bg-light: #0f172a;--bg-white: #1e293b;--text-primary: #f1f5f9;--text-secondary: #cbd5e0;--border-color: #334155}}.nav-item:focus,.btn-logout:focus,.menu-toggle:focus{outline:3px solid rgba(102,126,234,.5);outline-offset:2px}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}.admin-main,.admin-sidebar{scroll-behavior:smooth}::selection{background:#667eea4d;color:var(--text-primary)}.nav-item:focus-visible,.btn-logout:focus-visible,.menu-toggle:focus-visible{outline:3px solid rgba(102,126,234,.8);outline-offset:2px}.dashboard-container{padding:2rem}.dashboard-title{font-size:1.8rem;margin-bottom:2rem}.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1.5rem}.stat-card{background:#fff;border-radius:12px;padding:1.5rem;box-shadow:0 8px 20px #00000014;text-align:center}.stat-card h3{color:#7f8c8d;margin-bottom:.5rem}.stat-card p{font-size:2rem;font-weight:700;color:#2f80ed}.profile-admin-container{background:linear-gradient(135deg,#667eea,#764ba2);min-height:100vh;padding:30px}.profile-admin-wrapper{max-width:900px;margin:0 auto}.profile-admin-header{background:#fff;padding:20px 30px;border-radius:15px 15px 0 0;box-shadow:0 2px 10px #0000001a;display:flex;justify-content:space-between;align-items:center;margin-bottom:0}.profile-admin-header h1{color:#2d3748;font-size:24px;font-weight:600;margin:0}.header-buttons{display:flex;gap:10px}.btn-back{padding:10px 20px;background:#e2e8f0;color:#2d3748;border:none;border-radius:8px;cursor:pointer;font-weight:500;transition:all .3s ease}.btn-back:hover{background:#cbd5e0}.btn-edit{padding:10px 25px;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;border-radius:8px;cursor:pointer;font-weight:500;transition:all .3s ease}.btn-edit:hover{transform:translateY(-2px);box-shadow:0 5px 15px #667eea66}.profile-content-container{background:#e6f2ff;border-radius:0 0 15px 15px;padding:40px;box-shadow:0 5px 20px #0000001a}.profile-form-section{display:flex;flex-direction:column;gap:40px}.profile-item{background:#fff;border-radius:12px;padding:30px;box-shadow:0 2px 8px #0000000d;transition:all .3s ease}.profile-item:hover{box-shadow:0 5px 15px #0000001a}.image-upload-section{display:flex;align-items:center;gap:30px;margin-bottom:25px}.image-upload-wrapper{display:flex;flex-direction:column;align-items:center;gap:12px}.image-label{font-size:14px;font-weight:600;color:#4a5568;text-align:center}.image-preview-container{width:120px;height:120px;border-radius:50%;overflow:hidden;border:4px solid #e6f2ff;box-shadow:0 3px 10px #0000001a;display:flex;align-items:center;justify-content:center;background:#f7fafc;position:relative}.image-preview-container img{width:100%;height:100%;object-fit:cover}.image-placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;font-size:36px;font-weight:700}.file-input-wrapper{position:relative;overflow:hidden;display:inline-block}.file-input-wrapper input[type=file]{position:absolute;left:-9999px}.file-input-label{display:inline-block;padding:8px 16px;background:#4299e1;color:#fff;border-radius:6px;cursor:pointer;font-size:13px;font-weight:500;transition:all .3s ease}.file-input-label:hover{background:#3182ce}.text-input-section{flex:1}.input-label{font-size:14px;font-weight:600;color:#4a5568;margin-bottom:10px;display:block}.text-input{width:100%;padding:12px 15px;border:2px solid #e2e8f0;border-radius:8px;font-size:14px;line-height:1.6;resize:vertical;transition:all .3s ease;background:#f8fafc;min-height:100px}.text-input:focus{outline:none;border-color:#667eea;background:#fff;box-shadow:0 0 0 3px #667eea1a}.save-button-section{display:flex;justify-content:center;gap:15px;margin-top:30px}.btn-save{padding:12px 40px;background:linear-gradient(135deg,#48bb78,#38a169);color:#fff;border:none;border-radius:8px;font-size:16px;font-weight:600;cursor:pointer;transition:all .3s ease;text-transform:uppercase;letter-spacing:1px}.btn-save:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 5px 15px #48bb7866}.btn-save:disabled{opacity:.6;cursor:not-allowed}.btn-cancel{padding:12px 40px;background:#e2e8f0;color:#2d3748;border:none;border-radius:8px;font-size:16px;font-weight:600;cursor:pointer;transition:all .3s ease;text-transform:uppercase;letter-spacing:1px}.btn-cancel:hover{background:#cbd5e0}.btn-delete{padding:12px 40px;background:linear-gradient(135deg,#fc5c65,#eb3b5a);color:#fff;border:none;border-radius:8px;font-size:16px;font-weight:600;cursor:pointer;transition:all .3s ease;text-transform:uppercase;letter-spacing:1px}.btn-delete:hover{transform:translateY(-2px);box-shadow:0 5px 15px #fc5c6566}.upload-progress{margin:20px 0}.progress-bar{height:8px;background:#e2e8f0;border-radius:4px;overflow:hidden}.progress-fill{height:100%;background:linear-gradient(90deg,#667eea,#764ba2);transition:width .3s ease}.progress-text{font-size:12px;color:#718096;margin-top:5px;text-align:center}.profile-view-container{background:#fff;border-radius:12px;padding:30px;box-shadow:0 2px 10px #0000000d}.profile-images-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:20px;margin-bottom:30px}.profile-image-item{text-align:center}.profile-image-item .image-title{font-size:13px;font-weight:600;color:#4a5568;margin-bottom:10px}.profile-image-item img{width:100%;max-width:200px;height:200px;object-fit:cover;border-radius:12px;box-shadow:0 2px 8px #0000001a}.profile-text-content{margin-top:20px}.profile-text-content h3{color:#2d3748;font-size:18px;font-weight:600;margin-bottom:10px;padding-bottom:10px;border-bottom:2px solid #e6f2ff}.profile-text-content p{color:#4a5568;line-height:1.8;white-space:pre-wrap;background:#f8fafc;padding:15px;border-radius:8px;margin-bottom:20px}.view-actions{display:flex;gap:10px;margin-top:25px}.loading-container,.error-container{background:#fff;border-radius:12px;padding:40px;text-align:center;margin:20px;box-shadow:0 2px 10px #0000000d}.loading-container{color:#718096;font-size:16px}.error-container{color:#fc5c65;font-size:16px;font-weight:500}@media(max-width:768px){.profile-admin-container{padding:15px}.profile-content-container{padding:20px}.image-upload-section{flex-direction:column}.profile-admin-header{flex-direction:column;gap:15px}.header-buttons{width:100%;justify-content:center}.profile-images-grid{grid-template-columns:1fr}.save-button-section{flex-direction:column}.btn-save,.btn-cancel,.btn-delete{width:100%}}.profile-item{animation:fadeIn .5s ease}.profile-item:hover .image-preview-container{transform:scale(1.05);transition:transform .3s ease}.core-values-badge{background:linear-gradient(135deg,#f6ad55,#ed8936)}.vision-badge{background:linear-gradient(135deg,#667eea,#764ba2)}.mission-badge{background:linear-gradient(135deg,#4299e1,#3182ce)}.news-list-container{background:linear-gradient(to right,#6b7280,#9ca3af 30%,#fff 50% 100%);min-height:100vh;padding:30px}.news-list-wrapper{max-width:1400px;margin:0 auto;background:#fff;border-radius:15px;padding:30px;box-shadow:0 5px 20px #0000001a}.news-list-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:30px;padding-bottom:20px;border-bottom:3px solid #e6f2ff}.news-list-header h1{color:#2d3748;font-size:28px;font-weight:700;margin:0;background:linear-gradient(135deg,#1e5ba8,#3498db,#f39c12);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.btn-add-news{padding:12px 24px;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;border-radius:8px;cursor:pointer;font-weight:600;font-size:14px;transition:all .3s ease;text-decoration:none;display:inline-flex;align-items:center;gap:8px;box-shadow:0 2px 8px #667eea4d}.btn-add-news:hover{transform:translateY(-2px);box-shadow:0 5px 15px #667eea66}.btn-add-news:before{content:"+";font-size:18px;font-weight:700}.news-table-wrapper{overflow-x:auto;border-radius:12px;box-shadow:0 2px 10px #0000000d}.news-table{width:100%;border-collapse:separate;border-spacing:0;background:#fff}.news-table thead{background:linear-gradient(135deg,#1e5ba8,#3498db,#f39c12)}.news-table thead th{padding:16px 12px;text-align:left;font-weight:600;font-size:14px;color:#fff;text-transform:uppercase;letter-spacing:.5px;border:none}.news-table thead th:first-child{border-top-left-radius:12px}.news-table thead th:last-child{border-top-right-radius:12px}.news-table tbody tr{transition:all .3s ease;border-bottom:1px solid #e2e8f0}.news-table tbody tr:hover{background:#f8fafc;transform:scale(1.01);box-shadow:0 2px 8px #0000000d}.news-table tbody tr:last-child{border-bottom:none}.news-table tbody td{padding:16px 12px;color:#4a5568;font-size:14px;vertical-align:middle}.news-table tbody td:first-child{font-weight:600;color:#667eea;font-size:15px}.news-image-preview{width:80px;height:80px;object-fit:cover;border-radius:8px;box-shadow:0 2px 6px #0000001a;transition:transform .3s ease}.news-image-preview:hover{transform:scale(1.15)}.news-image-placeholder{width:80px;height:80px;background:linear-gradient(135deg,#e2e8f0,#cbd5e0);border-radius:8px;display:flex;align-items:center;justify-content:center;color:#a0aec0;font-size:12px;font-weight:500}.news-description-text{max-width:300px;line-height:1.6;color:#718096}.news-actions{display:flex;gap:8px;flex-wrap:wrap}.btn-edit{padding:8px 16px;background:linear-gradient(135deg,#f6ad55,#ed8936);color:#fff;border:none;border-radius:6px;cursor:pointer;font-weight:500;font-size:13px;transition:all .3s ease;text-decoration:none;display:inline-block}.btn-edit:hover{transform:translateY(-2px);box-shadow:0 4px 12px #f6ad5566}.btn-delete{padding:8px 16px;background:linear-gradient(135deg,#fc5c65,#eb3b5a);color:#fff;border:none;border-radius:6px;cursor:pointer;font-weight:500;font-size:13px;transition:all .3s ease}.btn-delete:hover{transform:translateY(-2px);box-shadow:0 4px 12px #fc5c6566}.loading-state{text-align:center;padding:60px 20px;color:#718096;font-size:16px}.loading-spinner{display:inline-block;width:40px;height:40px;border:4px solid #e2e8f0;border-top-color:#667eea;border-radius:50%;animation:spin .8s linear infinite;margin-bottom:15px}.error-state{text-align:center;padding:60px 20px;color:#fc5c65;font-size:16px;font-weight:500}.empty-state{text-align:center;padding:80px 20px;color:#a0aec0}.empty-state-icon{font-size:64px;margin-bottom:15px;opacity:.5}.empty-state-text{font-size:18px;font-weight:500;margin-bottom:10px}.empty-state-subtext{font-size:14px;color:#cbd5e0}.news-date{color:#718096;font-size:13px;font-weight:500}.news-title{color:#2d3748;font-weight:600;max-width:250px}@media(max-width:1200px){.news-list-wrapper{padding:20px}.news-description-text{max-width:200px}}@media(max-width:768px){.news-list-container{padding:15px}.news-list-wrapper{padding:15px;border-radius:10px}.news-list-header{flex-direction:column;gap:15px;align-items:flex-start}.news-list-header h1{font-size:22px}.btn-add-news{width:100%;justify-content:center}.news-table thead th,.news-table tbody td{padding:10px 8px;font-size:12px}.news-image-preview,.news-image-placeholder{width:60px;height:60px}.news-actions{flex-direction:column;width:100%}.btn-edit,.btn-delete{width:100%;text-align:center}.news-table th:nth-child(5),.news-table td:nth-child(5){display:none}}@media(max-width:480px){.news-list-header h1{font-size:18px}.news-table th:first-child,.news-table td:first-child{display:none}.news-description-text{max-width:150px}}.news-table tbody tr{animation:fadeIn .4s ease}.news-table tbody tr{position:relative}.news-table tbody tr:after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:linear-gradient(90deg,#667eea,#764ba2);transform:scaleX(0);transition:transform .3s ease}.news-table tbody tr:hover:after{transform:scaleX(1)}.edit-news-container{background:linear-gradient(135deg,#1e5ba8,#3498db,#f39c12);min-height:100vh;padding:30px}.edit-news-wrapper{max-width:800px;margin:0 auto;background:#fff;border-radius:15px;padding:40px;box-shadow:0 5px 20px #0000001a}.edit-news-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:30px;padding-bottom:20px;border-bottom:3px solid #e6f2ff}.edit-news-header h1{color:#2d3748;font-size:28px;font-weight:700;margin:0;background:linear-gradient(135deg,#1e5ba8,#3498db,#f39c12);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.btn-news-back{padding:10px 20px;background:#e2e8f0;color:#2d3748;border:none;border-radius:8px;cursor:pointer;font-weight:500;font-size:14px;transition:all .3s ease;text-decoration:none;display:inline-block}.btn-news-back:hover{background:#cbd5e0;transform:translateY(-2px)}.edit-news-form{margin-top:30px}.news-form-group{margin-bottom:25px}.news-form-label{display:block;font-size:14px;font-weight:600;color:#4a5568;margin-bottom:10px}.news-form-label.required:after{content:" *";color:#fc5c65}.news-text-input{width:100%;padding:12px 15px;border:2px solid #e2e8f0;border-radius:8px;font-size:14px;transition:all .3s ease;background:#f8fafc;font-family:inherit}.news-text-input:focus{outline:none;border-color:#667eea;background:#fff;box-shadow:0 0 0 3px #667eea1a}.news-text-input::placeholder{color:#cbd5e0}.news-textarea{width:100%;padding:12px 15px;border:2px solid #e2e8f0;border-radius:8px;font-size:14px;line-height:1.6;resize:vertical;transition:all .3s ease;background:#f8fafc;min-height:150px;font-family:inherit}.news-textarea:focus{outline:none;border-color:#667eea;background:#fff;box-shadow:0 0 0 3px #667eea1a}.news-textarea::placeholder{color:#cbd5e0}.news-file-input-wrapper{position:relative;display:inline-block;width:100%}.news-file-input{width:100%;padding:12px 15px;border:2px dashed #cbd5e0;border-radius:8px;background:#f8fafc;cursor:pointer;transition:all .3s ease;font-size:14px;color:#718096}.news-file-input:hover{border-color:#667eea;background:#fff}.news-file-input:focus{outline:none;border-color:#667eea;background:#fff;box-shadow:0 0 0 3px #667eea1a}.news-file-input-custom{position:relative;display:flex;align-items:center;gap:12px;padding:12px 15px;border:2px dashed #cbd5e0;border-radius:8px;background:#f8fafc;cursor:pointer;transition:all .3s ease}.news-file-input-custom:hover{border-color:#667eea;background:#fff}.news-file-input-custom input[type=file]{position:absolute;opacity:0;width:100%;height:100%;cursor:pointer}.news-file-icon{font-size:24px;color:#667eea}.news-file-text{flex:1}.news-file-label{font-weight:600;color:#4a5568;display:block;margin-bottom:4px}.news-file-hint{font-size:12px;color:#a0aec0}.news-image-preview{margin-top:15px;border-radius:8px;overflow:hidden;border:2px solid #e2e8f0}.news-image-preview img{width:100%;max-height:300px;object-fit:cover;display:block}.news-image-preview-label{font-size:12px;color:#718096;margin-bottom:8px;font-weight:500}.news-form-error{padding:12px 16px;background:#fff5f5;border-left:4px solid #fc5c65;border-radius:6px;color:#c53030;font-size:14px;margin-bottom:20px;display:flex;align-items:center;gap:10px}.news-form-error:before{content:"⚠️";font-size:20px}.news-form-success{padding:12px 16px;background:#f0fff4;border-left:4px solid #48bb78;border-radius:6px;color:#22543d;font-size:14px;margin-bottom:20px;display:flex;align-items:center;gap:10px}.news-form-success:before{content:"✓";font-size:20px;font-weight:700}.news-form-actions{margin-top:40px;display:flex;gap:12px}.btn-news-submit{flex:1;padding:14px 30px;background:linear-gradient(135deg,#48bb78,#38a169);color:#fff;border:none;border-radius:8px;cursor:pointer;font-weight:600;font-size:15px;transition:all .3s ease;text-transform:uppercase;letter-spacing:1px}.btn-news-submit:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 5px 15px #48bb7866}.btn-news-submit:disabled{opacity:.6;cursor:not-allowed;background:#cbd5e0}.btn-news-cancel{padding:14px 30px;background:#e2e8f0;color:#2d3748;border:none;border-radius:8px;cursor:pointer;font-weight:600;font-size:15px;transition:all .3s ease;text-transform:uppercase;letter-spacing:1px;text-decoration:none;display:inline-block;text-align:center}.btn-news-cancel:hover{background:#cbd5e0;transform:translateY(-2px)}.news-loading-overlay{text-align:center;padding:60px 20px;color:#718096}.news-loading-spinner{display:inline-block;width:50px;height:50px;border:5px solid #e2e8f0;border-top-color:#667eea;border-radius:50%;animation:spin .8s linear infinite;margin-bottom:20px}.news-loading-text{font-size:16px;font-weight:500}@media(max-width:768px){.edit-news-container{padding:15px}.edit-news-wrapper{padding:25px;border-radius:10px}.edit-news-header{flex-direction:column;gap:15px;align-items:flex-start}.edit-news-header h1{font-size:22px}.btn-news-back{width:100%;text-align:center}.news-form-actions{flex-direction:column}.btn-news-submit,.btn-news-cancel{width:100%}.news-image-preview img{max-height:200px}}@media(max-width:480px){.edit-news-wrapper{padding:20px}.edit-news-header h1{font-size:18px}.news-text-input,.news-textarea{font-size:13px;padding:10px 12px}.btn-news-submit,.btn-news-cancel{padding:12px 20px;font-size:14px}}.edit-news-wrapper{animation:fadeIn .4s ease}.news-text-input:focus,.news-textarea:focus{animation:inputFocus .6s ease}.news-file-input-wrapper.drag-over .news-file-input-custom{border-color:#667eea;background:#edf2f7;transform:scale(1.02)}.news-char-counter{font-size:12px;color:#a0aec0;text-align:right;margin-top:5px}.news-char-counter.warning{color:#ed8936}.news-char-counter.error{color:#fc5c65}.news-help-text{font-size:12px;color:#a0aec0;margin-top:5px;font-style:italic}.gallery-list-container{background:linear-gradient(135deg,#1e5ba8,#3498db,#f39c12);min-height:100vh;padding:30px}.gallery-list-wrapper{max-width:1400px;margin:0 auto;background:#fff;border-radius:15px;padding:30px;box-shadow:0 5px 20px #0000001a}.gallery-list-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:30px;padding-bottom:20px;border-bottom:3px solid #e6f2ff}.gallery-list-header h1{color:#2d3748;font-size:28px;font-weight:700;margin:0;background:linear-gradient(135deg,#1e5ba8,#3498db,#f39c12);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.btn-add-gallery{padding:12px 24px;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;border-radius:8px;cursor:pointer;font-weight:600;font-size:14px;transition:all .3s ease;text-decoration:none;display:inline-flex;align-items:center;gap:8px;box-shadow:0 2px 8px #667eea4d}.btn-add-gallery:hover{transform:translateY(-2px);box-shadow:0 5px 15px #667eea66}.btn-add-gallery:before{content:"+";font-size:18px;font-weight:700}.gallery-admin-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:20px;margin-top:20px}.gallery-card{background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 2px 10px #00000014;transition:all .3s ease;border:2px solid transparent}.gallery-card:hover{transform:translateY(-5px);box-shadow:0 8px 25px #00000026;border-color:#667eea}.gallery-image-container{height:200px;background:linear-gradient(135deg,#f6f6f6,#e9ecef);display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative}.gallery-image-container img{height:100%;width:100%;object-fit:cover;transition:transform .4s ease}.gallery-card:hover .gallery-image-container img{transform:scale(1.1)}.gallery-no-image{padding:20px;color:#a0aec0;font-size:14px;font-weight:500;text-align:center}.gallery-no-image:before{content:"📷";display:block;font-size:48px;margin-bottom:10px;opacity:.3}.gallery-card-footer{padding:15px;display:flex;justify-content:space-between;align-items:center;background:#f8fafc}.gallery-card-id{font-size:12px;color:#718096;font-weight:600;padding:4px 10px;background:#fff;border-radius:6px;border:1px solid #e2e8f0}.gallery-card-actions{display:flex;gap:8px}.btn-gallery-edit{padding:6px 14px;background:linear-gradient(135deg,#f6ad55,#ed8936);color:#fff;border:none;border-radius:6px;cursor:pointer;font-weight:500;font-size:12px;transition:all .3s ease;text-decoration:none;display:inline-block}.btn-gallery-edit:hover{transform:translateY(-2px);box-shadow:0 4px 12px #f6ad5566}.btn-gallery-delete{padding:6px 14px;background:linear-gradient(135deg,#fc5c65,#eb3b5a);color:#fff;border:none;border-radius:6px;cursor:pointer;font-weight:500;font-size:12px;transition:all .3s ease}.btn-gallery-delete:hover{transform:translateY(-2px);box-shadow:0 4px 12px #fc5c6566}.gallery-loading-state{text-align:center;padding:80px 20px;color:#718096;font-size:16px}.gallery-loading-spinner{display:inline-block;width:50px;height:50px;border:5px solid #e2e8f0;border-top-color:#667eea;border-radius:50%;animation:spin .8s linear infinite;margin-bottom:20px}.gallery-error-state{text-align:center;padding:80px 20px;color:#fc5c65;font-size:16px;font-weight:500}.gallery-error-state:before{content:"⚠️";display:block;font-size:64px;margin-bottom:15px;opacity:.7}.gallery-empty-state{text-align:center;padding:100px 20px;color:#a0aec0}.gallery-empty-icon{font-size:80px;margin-bottom:20px;opacity:.4}.gallery-empty-text{font-size:20px;font-weight:600;margin-bottom:10px;color:#718096}.gallery-empty-subtext{font-size:14px;color:#cbd5e0}.gallery-form-container{background:linear-gradient(135deg,#1e5ba8,#3498db,#f39c12);min-height:100vh;padding:30px}.gallery-form-wrapper{max-width:800px;margin:0 auto;background:#fff;border-radius:15px;padding:40px;box-shadow:0 5px 20px #0000001a}.gallery-form-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:30px;padding-bottom:20px;border-bottom:3px solid #e6f2ff}.gallery-form-header h1{color:#2d3748;font-size:28px;font-weight:700;margin:0;background:linear-gradient(135deg,#1e5ba8,#3498db,#f39c12);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.btn-gallery-back{padding:10px 20px;background:#e2e8f0;color:#2d3748;border:none;border-radius:8px;cursor:pointer;font-weight:500;font-size:14px;transition:all .3s ease}.btn-gallery-back:hover{background:#cbd5e0}.gallery-form-content{margin-top:30px}.gallery-form-group{margin-bottom:30px}.gallery-form-label{display:block;font-size:14px;font-weight:600;color:#4a5568;margin-bottom:10px}.gallery-file-input-wrapper{position:relative;display:inline-block;width:100%}.gallery-file-input{width:100%;padding:12px;border:2px dashed #cbd5e0;border-radius:8px;background:#f8fafc;cursor:pointer;transition:all .3s ease;font-size:14px}.gallery-file-input:hover{border-color:#667eea;background:#fff}.gallery-file-input::-webkit-file-upload-button{padding:8px 16px;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;border-radius:6px;cursor:pointer;font-weight:500;font-size:13px;margin-right:12px;transition:all .3s ease}.gallery-file-input::-webkit-file-upload-button:hover{transform:translateY(-1px);box-shadow:0 4px 12px #667eea4d}.gallery-image-preview-section{margin-top:20px;padding:20px;background:#f8fafc;border-radius:8px;border:2px solid #e6f2ff}.gallery-image-preview-title{font-size:13px;font-weight:600;color:#718096;margin-bottom:12px;text-transform:uppercase;letter-spacing:.5px}.gallery-image-preview-container{max-width:400px;margin:0 auto;border-radius:12px;overflow:hidden;box-shadow:0 4px 15px #0000001a;background:#fff}.gallery-image-preview-container img{width:100%;height:auto;display:block}.gallery-form-submit-section{margin-top:40px;display:flex;gap:12px}.btn-gallery-submit{flex:1;padding:14px 30px;background:linear-gradient(135deg,#48bb78,#38a169);color:#fff;border:none;border-radius:8px;cursor:pointer;font-weight:600;font-size:15px;transition:all .3s ease;text-transform:uppercase;letter-spacing:1px}.btn-gallery-submit:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 5px 15px #48bb7866}.btn-gallery-submit:disabled{opacity:.6;cursor:not-allowed;background:#cbd5e0}.gallery-form-loading-overlay{text-align:center;padding:40px;color:#718096}.gallery-form-loading-overlay .gallery-loading-spinner{margin:0 auto 15px}@media(max-width:1024px){.gallery-admin-grid{grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px}}@media(max-width:768px){.gallery-list-container,.gallery-form-container{padding:15px}.gallery-list-wrapper,.gallery-form-wrapper{padding:20px;border-radius:10px}.gallery-list-header,.gallery-form-header{flex-direction:column;gap:15px;align-items:flex-start}.gallery-list-header h1,.gallery-form-header h1{font-size:22px}.btn-add-gallery{width:100%;justify-content:center}.gallery-admin-grid{grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px}.gallery-image-container{height:160px}.gallery-card-footer{flex-direction:column;gap:10px;align-items:stretch}.gallery-card-actions{justify-content:center}}@media(max-width:480px){.gallery-admin-grid{grid-template-columns:1fr}.gallery-image-container{height:200px}.gallery-form-submit-section{flex-direction:column}}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.gallery-card{animation:fadeInUp .4s ease}.gallery-card:nth-child(1){animation-delay:.05s}.gallery-card:nth-child(2){animation-delay:.1s}.gallery-card:nth-child(3){animation-delay:.15s}.gallery-card:nth-child(4){animation-delay:.2s}.gallery-card:nth-child(5){animation-delay:.25s}.gallery-card:nth-child(6){animation-delay:.3s}.gallery-card:before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,#667eea1a,#764ba21a);opacity:0;transition:opacity .3s ease;pointer-events:none;border-radius:12px}.gallery-card:hover:before{opacity:1}.pengumuman-list-container{background:linear-gradient(135deg,#1e5ba8,#3498db,#f39c12);min-height:100vh;padding:30px}.pengumuman-list-wrapper{max-width:1400px;margin:0 auto;background:#fff;border-radius:15px;padding:30px;box-shadow:0 5px 20px #0000001a}.pengumuman-list-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:30px;padding-bottom:20px;border-bottom:3px solid #e6f2ff}.pengumuman-list-header h1{color:#2d3748;font-size:28px;font-weight:700;margin:0;background:linear-gradient(135deg,#1e5ba8,#3498db,#f39c12);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.btn-add-pengumuman{padding:12px 24px;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;border-radius:8px;cursor:pointer;font-weight:600;font-size:14px;transition:all .3s ease;text-decoration:none;display:inline-flex;align-items:center;gap:8px;box-shadow:0 2px 8px #667eea4d}.btn-add-pengumuman:hover{transform:translateY(-2px);box-shadow:0 5px 15px #667eea66}.btn-add-pengumuman:before{content:"+";font-size:18px;font-weight:700}.pengumuman-table-wrapper{overflow-x:auto;border-radius:12px;box-shadow:0 2px 10px #0000000d}.pengumuman-table{width:100%;border-collapse:separate;border-spacing:0;background:#fff}.pengumuman-table thead{background:linear-gradient(135deg,#1e5ba8,#3498db,#f39c12)}.pengumuman-table thead th{padding:16px 12px;text-align:left;font-weight:600;font-size:14px;color:#fff;text-transform:uppercase;letter-spacing:.5px;border:none}.pengumuman-table thead th:first-child{border-top-left-radius:12px}.pengumuman-table thead th:last-child{border-top-right-radius:12px}.pengumuman-table tbody tr{transition:all .3s ease;border-bottom:1px solid #e2e8f0}.pengumuman-table tbody tr:hover{background:#f8fafc;transform:scale(1.01);box-shadow:0 2px 8px #0000000d}.pengumuman-table tbody tr:last-child{border-bottom:none}.pengumuman-table tbody td{padding:16px 12px;color:#4a5568;font-size:14px;vertical-align:middle}.pengumuman-table tbody td:first-child{font-weight:600;color:#667eea;font-size:15px}.pengumuman-title{color:#2d3748;font-weight:600;max-width:300px}.pengumuman-description-text{max-width:400px;line-height:1.6;color:#718096}.pengumuman-date{color:#718096;font-size:13px;font-weight:500}.pengumuman-actions{display:flex;gap:8px;flex-wrap:wrap}.btn-pengumuman-edit{padding:8px 16px;background:linear-gradient(135deg,#f6ad55,#ed8936);color:#fff;border:none;border-radius:6px;cursor:pointer;font-weight:500;font-size:13px;transition:all .3s ease;text-decoration:none;display:inline-block}.btn-pengumuman-edit:hover{transform:translateY(-2px);box-shadow:0 4px 12px #f6ad5566}.btn-pengumuman-delete{padding:8px 16px;background:linear-gradient(135deg,#fc5c65,#eb3b5a);color:#fff;border:none;border-radius:6px;cursor:pointer;font-weight:500;font-size:13px;transition:all .3s ease}.btn-pengumuman-delete:hover{transform:translateY(-2px);box-shadow:0 4px 12px #fc5c6566}.pengumuman-loading-state{text-align:center;padding:80px 20px;color:#718096;font-size:16px}.pengumuman-loading-spinner{display:inline-block;width:50px;height:50px;border:5px solid #e2e8f0;border-top-color:#667eea;border-radius:50%;animation:spin .8s linear infinite;margin-bottom:20px}@keyframes spin{to{transform:rotate(360deg)}}.pengumuman-error-state{text-align:center;padding:80px 20px;color:#fc5c65;font-size:16px;font-weight:500}.pengumuman-error-state:before{content:"⚠️";display:block;font-size:64px;margin-bottom:15px;opacity:.7}.pengumuman-empty-state{text-align:center;padding:100px 20px;color:#a0aec0}.pengumuman-empty-icon{font-size:80px;margin-bottom:20px;opacity:.4}.pengumuman-empty-text{font-size:20px;font-weight:600;margin-bottom:10px;color:#718096}.pengumuman-empty-subtext{font-size:14px;color:#cbd5e0}.pengumuman-form-container{background:linear-gradient(135deg,#1e5ba8,#3498db,#f39c12);min-height:100vh;padding:30px}.pengumuman-form-wrapper{max-width:800px;margin:0 auto;background:#fff;border-radius:15px;padding:40px;box-shadow:0 5px 20px #0000001a}.pengumuman-form-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:30px;padding-bottom:20px;border-bottom:3px solid #e6f2ff}.pengumuman-form-header h1{color:#2d3748;font-size:28px;font-weight:700;margin:0;background:linear-gradient(135deg,#1e5ba8,#3498db,#f39c12);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.btn-pengumuman-back{padding:10px 20px;background:#e2e8f0;color:#2d3748;border:none;border-radius:8px;cursor:pointer;font-weight:500;font-size:14px;transition:all .3s ease}.btn-pengumuman-back:hover{background:#cbd5e0}.pengumuman-form-content{margin-top:30px}.pengumuman-form-group{margin-bottom:25px}.pengumuman-form-label{display:block;font-size:14px;font-weight:600;color:#4a5568;margin-bottom:10px}.pengumuman-text-input{width:100%;padding:12px 15px;border:2px solid #e2e8f0;border-radius:8px;font-size:14px;transition:all .3s ease;background:#f8fafc;font-family:inherit}.pengumuman-text-input:focus{outline:none;border-color:#667eea;background:#fff;box-shadow:0 0 0 3px #667eea1a}.pengumuman-text-input::placeholder{color:#cbd5e0}.pengumuman-textarea{width:100%;padding:12px 15px;border:2px solid #e2e8f0;border-radius:8px;font-size:14px;line-height:1.6;resize:vertical;transition:all .3s ease;background:#f8fafc;min-height:150px;font-family:inherit}.pengumuman-textarea:focus{outline:none;border-color:#667eea;background:#fff;box-shadow:0 0 0 3px #667eea1a}.pengumuman-textarea::placeholder{color:#cbd5e0}.pengumuman-form-error{padding:12px 16px;background:#fff5f5;border-left:4px solid #fc5c65;border-radius:6px;color:#c53030;font-size:14px;margin-bottom:20px}.pengumuman-form-submit-section{margin-top:40px;display:flex;gap:12px}.btn-pengumuman-submit{flex:1;padding:14px 30px;background:linear-gradient(135deg,#48bb78,#38a169);color:#fff;border:none;border-radius:8px;cursor:pointer;font-weight:600;font-size:15px;transition:all .3s ease;text-transform:uppercase;letter-spacing:1px}.btn-pengumuman-submit:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 5px 15px #48bb7866}.btn-pengumuman-submit:disabled{opacity:.6;cursor:not-allowed;background:#cbd5e0}.btn-pengumuman-cancel{padding:14px 30px;background:#e2e8f0;color:#2d3748;border:none;border-radius:8px;cursor:pointer;font-weight:600;font-size:15px;transition:all .3s ease;text-transform:uppercase;letter-spacing:1px}.btn-pengumuman-cancel:hover{background:#cbd5e0}.pengumuman-form-loading-overlay{text-align:center;padding:40px;color:#718096}.pengumuman-form-loading-overlay .pengumuman-loading-spinner{margin:0 auto 15px}@media(max-width:1200px){.pengumuman-list-wrapper{padding:20px}.pengumuman-description-text{max-width:300px}}@media(max-width:768px){.pengumuman-list-container,.pengumuman-form-container{padding:15px}.pengumuman-list-wrapper,.pengumuman-form-wrapper{padding:20px;border-radius:10px}.pengumuman-list-header,.pengumuman-form-header{flex-direction:column;gap:15px;align-items:flex-start}.pengumuman-list-header h1,.pengumuman-form-header h1{font-size:22px}.btn-add-pengumuman{width:100%;justify-content:center}.pengumuman-table thead th,.pengumuman-table tbody td{padding:10px 8px;font-size:12px}.pengumuman-actions{flex-direction:column;width:100%}.btn-pengumuman-edit,.btn-pengumuman-delete{width:100%;text-align:center}.pengumuman-form-submit-section{flex-direction:column}.btn-pengumuman-submit,.btn-pengumuman-cancel{width:100%}.pengumuman-table th:nth-child(3),.pengumuman-table td:nth-child(3){display:none}}@media(max-width:480px){.pengumuman-list-header h1,.pengumuman-form-header h1{font-size:18px}.pengumuman-table th:first-child,.pengumuman-table td:first-child{display:none}.pengumuman-description-text{max-width:150px}}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.pengumuman-table tbody tr{animation:fadeIn .4s ease}.pengumuman-table tbody tr{position:relative}.pengumuman-table tbody tr:after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:linear-gradient(90deg,#667eea,#764ba2);transform:scaleX(0);transition:transform .3s ease}.pengumuman-table tbody tr:hover:after{transform:scaleX(1)}@keyframes inputFocus{0%{box-shadow:0 0 #667eea66}to{box-shadow:0 0 0 4px #667eea00}}.pengumuman-text-input:focus,.pengumuman-textarea:focus{animation:inputFocus .6s ease}:root{--bg: #f4fbff;--panel-bg: #eaf6fb;--panel-border: rgba(2,132,199,.08);--accent: #ff8c3b;--title: #0f6b8a;--muted: #56606b;--container-width: 1100px}*{box-sizing:border-box}body,html,#root{height:100%}body{margin:0;font-family:Nunito Sans,Poppins,system-ui,-apple-system,Segoe UI,Roboto;background:linear-gradient(180deg,var(--bg),#ffffff);color:var(--muted);-webkit-font-smoothing:antialiased}.container-centered{max-width:var(--container-width);margin-left:auto;margin-right:auto;padding:0 18px}.navbar{display:flex;align-items:center;justify-content:space-between;padding:14px 0;background:#fff9;position:sticky;top:0;z-index:30;border-bottom:1px solid rgba(15,23,42,.04);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}.nav-left{flex:1}.nav-center{flex:1;text-align:center}.nav-right{flex:1;display:flex;justify-content:flex-end}.logo{height:44px}.menu{display:inline-flex;gap:24px;margin:0;padding:0;list-style:none}.menu a{color:var(--muted);text-decoration:none;font-weight:600;font-size:.95rem}.menu a:hover{color:var(--title);transform:translateY(-2px);transition:.15s}.btn-login{background:linear-gradient(180deg,#36b3e6,#0c93d6);color:#fff;padding:8px 16px;border-radius:8px;border:0;font-weight:700;box-shadow:0 8px 20px #0c93d624}.landing{padding:80px 0 100px;display:flex;flex-direction:column;align-items:center;min-height:100vh}.info-panel{width:100%;background:var(--panel-bg);border-radius:14px;padding:40px 30px;border:1px solid var(--panel-border);box-shadow:0 8px 26px #07203208;margin-top:40px;margin-bottom:40px;min-height:60vh}.panel-title{text-align:center;color:var(--title);font-family:Poppins,sans-serif;font-size:18px;margin:0 0 10px;font-weight:700}.orange-divider{width:86%;height:4px;background:linear-gradient(90deg,var(--panel-bg),#fff);margin:0 auto 18px;position:relative;border-top:3px solid rgba(255,140,59,.12)}.orange-divider:after{content:"";display:block;width:76%;height:3px;background:linear-gradient(90deg,#ff8c3beb,#ff8c3bb8);margin:0 auto;border-radius:4px}.panel-row{display:flex;gap:20px;align-items:flex-start;margin:12px 0}.panel-row.reverse{flex-direction:row-reverse}.panel-side{width:140px;display:flex;justify-content:center;align-items:flex-start}.panel-body{flex:1;min-width:0}.circle-img{width:110px;height:110px;border-radius:999px;background:linear-gradient(135deg,#fff,#fff9f4);display:flex;align-items:center;justify-content:center;padding:8px;box-shadow:0 6px 16px #0284c70f;border:5px solid rgba(255,140,59,.06)}.circle-img img{width:100%;height:100%;object-fit:contain}.mission-box{width:110px;height:110px;background:#fff;border-radius:8px;display:flex;align-items:center;justify-content:center;padding:10px;box-shadow:0 6px 14px #1018280a;border:1px solid rgba(2,132,199,.03)}.mission-box img{width:78%;height:78%;object-fit:contain}.badge-wrap{width:110px;height:110px;display:flex;align-items:center;justify-content:center}.badge-wrap img{width:95px;height:95px;object-fit:contain}.section-title{color:var(--title);margin:0 0 8px;font-weight:700;font-size:1rem}.section-text{margin:0;color:var(--muted);font-size:.95rem;line-height:1.5;text-align:justify}.site-footer{margin-top:18px;text-align:center;color:var(--muted);font-size:.85rem}@media(max-width:900px){.menu{display:none}.panel-row{flex-direction:column;align-items:center;text-align:center}.panel-side,.panel-body{width:100%}.circle-img,.mission-box,.badge-wrap{margin-bottom:8px}.orange-divider{width:92%}}@media(max-width:480px){.logo{height:36px}.panel-title{font-size:16px}.info-panel{padding:18px}}