:root{--pink-terang: #ff90bb;--pink-muda: #ffc1da;--krem: #fff8e1;--biru-muda: #8accd5;--text-color: #333;--putih: #ffffff}*{margin:0;padding:0;box-sizing:border-box}body{font-family:Poppins,sans-serif;background-color:var(--krem);color:var(--text-color);display:flex;flex-direction:column;min-height:100vh}.container{max-width:1200px;margin-inline:auto;padding:2rem}header{background-color:var(--pink-terang)}.main-header{display:flex;justify-content:space-between;align-items:center;padding-block:1.5rem;gap:1rem}.brand-name{display:flex;align-items:center;gap:10px;font-size:1.25rem;font-weight:700;text-decoration:none;color:var(--text-color)}.brand-name img.logo{width:32px;height:32px;object-fit:contain}.navigation-drawer{background-color:var(--putih);padding:20px 10px;width:200px;min-height:100vh;position:fixed;inset-block-start:0;inset-inline-start:0;transform:translate(-100%);transition:transform .35s ease;z-index:9999;box-shadow:0 0 4px 2px #0003}.navigation-drawer.open{transform:translate(0)}.drawer-button{font-size:28px;background:transparent;border:none;cursor:pointer;color:var(--text-color)}.nav-list{list-style:none;display:flex;flex-direction:column;gap:1rem}.nav-list li a{color:var(--text-color);text-decoration:none;padding:6px 10px;display:block;transition:background-color .2s ease,color .2s ease;border-radius:6px}.nav-list li a:hover{background-color:#e070a1;color:#fff;text-decoration:underline}.main-content{flex:1;padding-block:2rem}.login-page{display:flex;justify-content:center;align-items:center;min-height:80vh;background-color:var(--krem)}.login-box{background:linear-gradient(to bottom right,var(--biru-muda),#e070a1);border-radius:16px;padding:2rem;max-width:400px;width:90%;box-shadow:0 4px 12px #0003;color:#fff;text-align:center}.login-box h2{margin-bottom:2rem}.login-box .form-group{margin-bottom:1.5rem;text-align:left;position:relative}.login-box input[type=email],.login-box input[type=password]{width:100%;padding:12px 40px 12px 16px;border:none;border-bottom:2px solid white;background:transparent;color:#fff;font-size:1rem;outline:none}.login-box input::placeholder{color:#ddd}.login-box button{width:100%;padding:12px;background-color:var(--biru-muda);border:none;color:#fff;font-weight:700;border-radius:8px;font-size:1rem;cursor:pointer;transition:background .2s ease}.login-box button:hover{background-color:#6a9cc6}.login-box .icon{position:absolute;right:12px;top:70%;transform:translateY(-50%);font-size:1.1rem;color:#dee0e1}.register-link{color:#0329ff;text-decoration:none;font-weight:medium}.register-link:hover{color:#fff;text-decoration:underline}.login-page input[type=password]::-ms-reveal,.login-page input[type=password]::-ms-clear,.login-page input[type=password]::-webkit-credentials-auto-fill-button{display:initial}.modal{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#000000a6;display:flex;justify-content:center;align-items:center;z-index:9999;opacity:0;pointer-events:none;transition:opacity .3s ease}.modal.show{opacity:1;pointer-events:auto}.modal-content{background-color:var(--putih);border-radius:12px;padding:2rem;max-width:500px;width:90%;text-align:center;box-shadow:0 8px 20px #0003;position:relative}.modal-content img{width:100%;max-height:300px;object-fit:cover;margin-bottom:1rem;border-radius:8px}.modal-text h3{margin-bottom:.5rem;font-size:1.2rem;font-weight:700}.modal-text p{margin-bottom:.5rem;word-break:break-word}.modal-text small{color:#666;font-size:.875rem}.modal-close{position:absolute;top:8px;right:12px;font-size:24px;background:transparent;border:none;color:#888;cursor:pointer}.modal-close:hover{color:#333}.card-container{display:flex;flex-wrap:wrap;gap:1rem;justify-content:center}.story-card{background-color:var(--putih);border:1px solid #eee;border-radius:10px;box-shadow:0 4px 12px #ff90bb33;padding:1rem;width:250px;transition:.3s ease;display:flex;flex-direction:column;justify-content:space-between;overflow:hidden;word-wrap:break-word;word-break:break-word}.story-card:hover{transform:translateY(-5px);box-shadow:0 8px 20px #ff90bb4d}.story-card img{width:100%;height:auto;border-radius:6px}.story-card p{font-size:.9rem;line-height:1.4;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}.section-title{text-align:center;font-size:1.8rem;font-weight:700;margin-bottom:1.5rem;border-bottom:2px solid var(--text-color);display:inline-block;padding-bottom:.25rem;margin-inline:auto}form .form-group{margin-bottom:1rem}form label{display:block;margin-bottom:.5rem;font-weight:700}form textarea,form input[type=file],form input[type=text]{width:100%;padding:8px;font-size:1rem;border-radius:6px;border:1px solid #ccc}button,form button,.add-form button{background-color:var(--biru-muda);color:var(--text-color);border:none;padding:10px 20px;border-radius:6px;font-weight:700;cursor:pointer}button:hover{background-color:#6ab7c6}.add-form{background-color:var(--putih);padding:2rem;border-radius:12px;max-width:800px;margin:2rem auto;box-shadow:0 2px 8px #0000001a}#map{height:400px;width:100%;margin-top:1rem;border-radius:8px}.about-modern{background-color:var(--putih);border-radius:12px;padding:2rem;max-width:900px;margin:2rem auto;box-shadow:0 2px 8px #00000014}.about-title{text-align:center;font-size:1.5rem;margin-bottom:2rem}.about-content{display:flex;flex-wrap:wrap;gap:2rem;align-items:center;justify-content:center}.about-image img{max-width:200px;border-radius:100px;object-fit:cover;box-shadow:0 2px 10px #0000001a}.about-text{flex:1;min-width:250px}.github-link a{color:var(--text-color);text-decoration:underline}footer{background-color:var(--pink-muda);text-align:center;padding:1rem;font-size:.9rem;color:var(--text-color)}.skip-link{position:absolute;top:-40px;left:0;background:var(--biru-muda);color:#fff;padding:8px 16px;z-index:1000;transition:top .3s ease;text-decoration:none}.skip-link:focus{top:10px}a,button,input[type=submit],.story-card,.modal-close,.drawer-button,.nav-list a{min-width:44px;min-height:44px;padding:10px 12px;display:inline-flex;align-items:center;justify-content:center}@media screen and (min-width: 1000px){.navigation-drawer{position:static;transform:translate(0);box-shadow:none;background-color:transparent;min-height:auto;width:auto;padding:0;flex-direction:row}.nav-list{flex-direction:row;gap:1.5rem}.drawer-button{display:none}}.back-button{display:inline-block;margin-top:2rem;padding:.6rem 1.2rem;background-color:#6ab7c6;color:#fff;text-decoration:none;font-weight:500;border-radius:8px;transition:background-color .3s ease}.back-button:hover{background-color:#4aafc4}.back-wrapper{text-align:left;margin-top:1.5rem}.story-image-wrapper{text-align:center;margin-bottom:1.5rem}.story-detail-image{max-width:100%;height:auto;border-radius:12px;box-shadow:0 4px 12px #0000001a}.story-detail-image{max-width:100%;max-height:400px;object-fit:cover}a,button,.story-card,.nav-list a{min-width:48px;min-height:48px;padding:12px;display:inline-flex;align-items:center;justify-content:center}.leaflet-control-layers{font-size:.9rem}.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.push-toggle-btn{color:#fff;padding:.6rem 1.2rem;border:none;border-radius:.5rem;font-size:1rem;cursor:pointer;font-weight:600;display:inline-flex;align-items:center;gap:.5rem;transition:background-color .3s ease;margin:1rem auto}.push-toggle-btn.on{background-color:#4caf50}.push-toggle-btn.on:hover{background-color:#388e3c}.push-toggle-btn.off{background-color:#f44336}.push-toggle-btn.off:hover{background-color:#d32f2f}.favorite-btn{margin-top:1rem;padding:10px 20px;background-color:#ffc1da;border:none;border-radius:8px;font-weight:700;cursor:pointer;transition:background .3s ease}.favorite-btn:hover{background-color:#ff90bb;color:#fff}.not-found-page{text-align:center;padding:3rem 1rem}.not-found-page h2{font-size:2rem;color:#ff4d4f}.not-found-page a{display:inline-block;margin-top:1rem;padding:.5rem 1rem;background-color:#4caf50;color:#fff;text-decoration:none;border-radius:4px}