:root{--hijau-tua: #007A31;--hijau: #009A3E;--hijau-muda: #e0f2f1;--abu-terang: #f5f5f5;--putih: #ffffff;--hitam: #212121}html{font-family:Poppins,sans-serif;background-color:var(--abu-terang);scroll-behavior:smooth}body{margin:0;padding:0;color:var(--hitam)}.container{max-width:1100px;margin:0 auto;padding:0 2rem}header{background-color:var(--putih);padding:1rem 0;border-bottom:1px solid #e0e0e0}header .container{display:flex;align-items:center}.logo img{height:80px;width:auto;display:block}main{padding:4rem 0;text-align:center}.hero h1{font-size:2.5rem;font-weight:700;color:var(--hijau-tua);margin-bottom:1rem}.hero p{font-size:1.1rem;color:var(--hijau);max-width:600px;margin:0 auto 3rem}.tracking-form form{display:flex;flex-direction:column;justify-content:center;gap:1rem;max-width:500px;margin:0 auto}.tracking-form input{flex-grow:1;padding:1rem;font-size:1rem;border:1px solid #ccc;border-radius:8px;transition:border-color .3s}.tracking-form input:focus{outline:none;border-color:var(--hijau)}.tracking-form button{padding:1rem 2rem;font-size:1rem;font-weight:600;color:var(--putih);background-color:var(--hijau);border:none;border-radius:8px;cursor:pointer;transition:background-color .3s}.tracking-form button:hover{background-color:var(--hijau-tua)}footer{background-color:var(--hijau-tua);color:var(--hijau-muda);text-align:center;padding:2rem 0;margin-top:4rem}@media (min-width: 768px){.hero h1{font-size:3rem}.hero p{font-size:1.2rem}.tracking-form form{flex-direction:row}}.tracking-result-container{display:none;margin-top:2rem;padding:1.5rem;background-color:var(--putih);border-radius:8px;box-shadow:0 2px 10px #0000001a;text-align:left}.tracking-result-container h2{color:var(--hijau-tua);margin-top:0;margin-bottom:1rem;padding-bottom:.5rem;border-bottom:2px solid var(--hijau-muda)}.detail-table{width:100%;border-collapse:collapse;margin-bottom:1rem}.detail-table td{border:0;padding:.6rem 0;line-height:1.6;vertical-align:top}.detail-table td:first-child{color:var(--hitam);width:180px;font-weight:600}.detail-table td:nth-child(2){width:20px;text-align:center;color:var(--hitam);font-weight:600}.detail-table td:last-child{padding-left:1rem}.status-badge{background-color:var(--hijau);color:var(--putih);padding:.3em .8em;border-radius:12px;font-size:.9em;font-weight:500}.loading-container{display:flex;align-items:center;justify-content:center;gap:1rem;padding:2rem;text-align:center}.spinner{width:40px;height:40px;border:4px solid #f3f3f3;border-top:4px solid var(--hijau);border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.loading-text{color:var(--hijau);font-weight:500;margin:0}.skeleton-container{margin-top:1rem}.skeleton-card{background:#f8f9fa;border-radius:8px;padding:1.5rem;margin-bottom:1rem}.skeleton-header{height:24px;background:linear-gradient(90deg,#e2e8f0 25%,#f1f5f9,#e2e8f0 75%);border-radius:4px;margin-bottom:1rem;animation:skeleton-loading 1.5s ease-in-out infinite}.skeleton-row{height:16px;background:linear-gradient(90deg,#e2e8f0 25%,#f1f5f9,#e2e8f0 75%);border-radius:4px;margin-bottom:.8rem;animation:skeleton-loading 1.5s ease-in-out infinite}.skeleton-row:nth-child(2n){width:80%}@keyframes skeleton-loading{0%{background-position:-200px 0}to{background-position:calc(200px + 100%) 0}}.error-state{text-align:center;padding:3rem 1rem;color:var(--hijau-tua)}.error-icon{font-size:4rem;margin-bottom:1rem}.error-state h3{color:var(--hijau-tua);margin-bottom:1rem;font-size:1.5rem}.error-message{color:#666;margin-bottom:2rem;font-size:1.1rem;line-height:1.5}.retry-btn{background-color:var(--hijau);color:var(--putih);border:none;padding:.8rem 2rem;border-radius:8px;font-size:1rem;font-weight:600;cursor:pointer;transition:background-color .3s}.retry-btn:hover{background-color:var(--hijau-tua)}.empty-state{text-align:center;padding:3rem 1rem;color:var(--hijau-tua)}.empty-icon{font-size:4rem;margin-bottom:1rem;opacity:.7}.empty-state h3{color:var(--hijau-tua);margin-bottom:1rem;font-size:1.3rem}.empty-state p{color:#666;font-size:1rem;line-height:1.5}.toast{position:fixed;top:20px;right:20px;background:var(--putih);border-radius:8px;box-shadow:0 4px 20px #00000026;padding:1rem 1.5rem;display:flex;align-items:center;gap:1rem;z-index:1000;max-width:400px;animation:toast-slide-in .3s ease-out}@keyframes toast-slide-in{0%{transform:translate(100%);opacity:0}to{transform:translate(0);opacity:1}}.toast-success{border-left:4px solid #22c55e}.toast-error{border-left:4px solid #ef4444}.toast-info{border-left:4px solid var(--hijau)}.toast-content{display:flex;align-items:center;gap:.5rem;flex:1}.toast-icon{font-size:1.2rem}.toast-message{color:var(--hijau-tua);font-weight:500;font-size:.9rem}.toast-close{background:none;border:none;font-size:1.2rem;cursor:pointer;color:#666;padding:0;width:24px;height:24px;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:background-color .2s}.toast-close:hover{background-color:#f3f4f6}.table-responsive-wrapper{overflow-x:auto;-webkit-overflow-scrolling:touch;margin-top:1rem}.riwayat-table{width:100%;border-collapse:collapse}.riwayat-table th,.riwayat-table td{border:1px solid #ddd;padding:.8rem;text-align:left;font-size:.9rem}.riwayat-table th{background-color:var(--hijau-muda);color:var(--hijau-tua);font-weight:600}.riwayat-table tbody tr:nth-child(2n){background-color:var(--abu-terang)}.tracking-result-container .error{color:#d8000c;background-color:#ffd2d2;padding:1rem;border-radius:4px;border:1px solid #D8000C}.tracking-result-container .info{color:#00529b;background-color:#bde5f8;padding:1rem;border-radius:4px;border:1px solid #00529B}@media (max-width: 767px){.tracking-result-container{display:none;padding:1rem}.detail-table td{padding:.6rem .4rem;font-size:.8rem;white-space:normal;vertical-align:top}.detail-table td:first-child{width:25%;min-width:80px}.detail-table td:nth-child(2){width:5%;min-width:15px}.detail-table td:last-child{width:70%;padding-left:.5rem}.riwayat-table th,.riwayat-table td{padding:.6rem .4rem;font-size:.8rem;white-space:normal;vertical-align:top}.riwayat-table th{white-space:nowrap}.toast{right:10px;left:10px;max-width:none;width:auto}}