/* root/assets/css/style.css */
:root{
    --pz-primary:#2c3e50;
    --pz-accent:#3498db;
    --pz-danger:#e74c3c;
    --pz-success:#27ae60;
    --pz-bg:#f4f7fa;
}
*{box-sizing:border-box;}
body{
    background:var(--pz-bg);
    font-family:'Segoe UI',Tahoma,Verdana,sans-serif;
    color:#2c3e50;
    margin:0;
    min-height:100vh;
    display:flex;
    flex-direction:column;
}

/* Navbar */
.navbar-public{
    background:#fff;
    box-shadow:0 2px 12px rgba(0,0,0,.06);
    padding:.7rem 0;
}
.navbar-public .navbar-brand{ font-weight:700; color:var(--pz-primary); }
.navbar-public .nav-link{ color:#555; font-weight:500; }
.navbar-public .nav-link.active, .navbar-public .nav-link:hover{ color:var(--pz-accent); }
.sidebar-nav li a{ display:block; padding:.6rem .4rem; color:#333; text-decoration:none; border-radius:8px; }
.sidebar-nav li a.active, .sidebar-nav li a:hover{ background:#eef4fb; color:var(--pz-accent); }

/* Hero compact (carousel otomatis, tidak besar) */
.hero-section-compact{
    background:linear-gradient(135deg,#2c3e50 0%,#3498db 100%);
    color:#fff;
    padding:1.8rem 0 2.2rem;
}
.hero-section-compact .carousel-item{ height:150px; min-height:150px; text-align:center; padding:0 2.5rem; overflow:hidden; }
.hero-section-compact .carousel-fade .carousel-item{ transition:opacity 1.2s ease-in-out; }
.hero-section-compact .carousel-item.active{ display:flex; flex-direction:column; justify-content:center; align-items:center; }
.hero-section-compact h1{ font-weight:800; font-size:1.5rem; line-height:1.35; margin:0; }
.hero-section-compact .carousel-control-prev, .hero-section-compact .carousel-control-next{ width:6%; opacity:.5; transition:opacity .2s; }
.hero-section-compact .carousel-control-prev:hover, .hero-section-compact .carousel-control-next:hover{ opacity:.9; }
.hero-section-compact .carousel-control-prev-icon, .hero-section-compact .carousel-control-next-icon{ width:1.1rem; height:1.1rem; }
.hero-badge{
    display:inline-block; background:rgba(255,255,255,.15); padding:.3rem .8rem;
    border-radius:30px; font-size:.75rem; margin-bottom:.6rem;
}
.hero-cta-card{
    background:#fff; color:#2c3e50; border-radius:18px; padding:1.5rem;
    box-shadow:0 15px 40px rgba(0,0,0,.15); margin-top:1rem;
}

/* Fitur & cara kerja */
.feature-card{
    background:#fff; border-radius:16px; padding:1.6rem; height:100%;
    box-shadow:0 3px 15px rgba(0,0,0,.06); transition:.2s;
}
.feature-card:hover{ transform:translateY(-4px); box-shadow:0 10px 25px rgba(0,0,0,.1); }
.feature-icon{
    width:52px; height:52px; border-radius:14px; display:flex; align-items:center; justify-content:center;
    background:#eaf3fc; color:var(--pz-accent); font-size:1.4rem; margin-bottom:1rem;
}
.step-num{
    width:38px; height:38px; border-radius:50%; background:var(--pz-accent); color:#fff;
    display:flex; align-items:center; justify-content:center; font-weight:700; flex-shrink:0;
}

/* Upload dropzone */
.upload-dropzone{
    border:2px dashed #b9c7d6; border-radius:16px; padding:2.2rem 1rem; text-align:center;
    background:#fbfdff; cursor:pointer; transition:.2s;
}
.upload-dropzone.dragover{ border-color:var(--pz-accent); background:#eef6fd; }

/* Cookie consent */
.cookie-consent-bar{
    position:fixed; left:0; right:0; bottom:0; z-index:1080;
    background:rgba(30,40,50,.97); color:#fff; backdrop-filter:blur(4px);
}
.cookie-consent-bar a{ color:#7fc4ff; }

/* Footer */
.site-footer-clean{
    background:linear-gradient(135deg,#1f2c38 0%,#2c3e50 100%);
    color:rgba(255,255,255,.85);
    margin-top:auto;
}
.site-footer-clean h5, .site-footer-clean h6{ color:#fff; }
.footer-desc{ color:rgba(255,255,255,.7); line-height:1.6; }
.footer-links{ list-style:none; padding:0; margin:0; }
.footer-links li{ margin-bottom:.5rem; }
.footer-links a{ color:rgba(255,255,255,.75); text-decoration:none; }
.footer-links a:hover{ color:var(--pz-accent); }
.footer-divider{ border-color:rgba(255,255,255,.12); }
.copyright-text{ color:rgba(255,255,255,.6); }
.powered-by-link{ color:#f39c12; font-weight:700; text-decoration:none; display:inline-flex; align-items:center; gap:.35rem; }
.powered-by-link:hover{ color:#e67e22; }
p:has(> .powered-by-link){ display:flex; align-items:center; justify-content:flex-end; gap:.35rem; flex-wrap:wrap; }
@media(max-width:768px){ p:has(> .powered-by-link){ justify-content:center; } }

/* Animasi roket + asap di footer */
.rocket-wrap{ position:relative; display:inline-flex; width:16px; }
.rocket-icon{ animation:pzRocketFly 2.2s ease-in-out infinite; display:inline-block; }
.rocket-smoke{
    position:absolute; left:-2px; bottom:-2px; width:6px; height:6px; border-radius:50%;
    background:rgba(255,255,255,.5); animation:pzSmoke 1.4s ease-out infinite;
}
@keyframes pzRocketFly{
    0%,100%{ transform:translateY(0) rotate(-8deg); }
    50%{ transform:translateY(-5px) rotate(-8deg); }
}
@keyframes pzSmoke{
    0%{ opacity:.6; transform:scale(1) translateY(0); }
    100%{ opacity:0; transform:scale(2.4) translateY(6px); }
}

/* Highlight preview sebelum/sesudah manipulasi (dipakai popup preview) */
.pz-hl{ color:#e74c3c; font-weight:700; background:rgba(231,76,60,.08); border-radius:2px; }
.pz-hl-zw{ color:#e74c3c; font-weight:700; padding:0 1px; }
.pz-hl-ws{ color:#e74c3c; font-weight:700; background:rgba(231,76,60,.15); border-radius:3px; padding:0 2px; letter-spacing:1px; }
.pz-preview-box{ background:#f8f9fa; border:1px solid #e5e9ee; border-radius:10px; padding:.8rem; font-size:.85rem; line-height:1.7; white-space:pre-wrap; word-break:break-word; }
.pz-preview-box.sebelum{ color:#6c757d; }
.pz-preview-box.sesudah{ background:#fff8f0; border-color:#ffe4c4; }
.pz-will-clean{ background:#d4f8d4 !important; color:#1e8449 !important; }
.pz-ejaan-mark{ background:#fff3b0; color:#7a5b00; border-radius:2px; padding:0 1px; cursor:help; }

/* Badge kuota & kredit AI yang berkilau (dipakai halaman cek dokumen saat login) */
.pz-quota-badge{
    display:inline-flex; align-items:center; gap:.5rem; background:linear-gradient(90deg,#f39c12,#f1c40f,#f39c12);
    background-size:200% auto; color:#3d2b00; font-weight:700; padding:.5rem 1rem; border-radius:30px;
    cursor:pointer; border:none; animation:pzShine 3s linear infinite; box-shadow:0 3px 10px rgba(243,156,18,.35);
}
.pz-quota-badge:hover{ filter:brightness(1.05); }
@keyframes pzShine{ 0%{ background-position:0% center; } 100%{ background-position:200% center; } }

.pz-quota-panel{ background:#fff; border:1px solid #eef2f6; border-radius:12px; padding:.8rem 1rem; }
.pz-quota-progress{ border-radius:10px; background:#eef2f6; }

/* Blur sebagian hasil untuk tamu yang belum login */
.pz-blur-wrap{ position:relative; }
.pz-blur-wrap .pz-blur-content{ filter:blur(5px); pointer-events:none; user-select:none; }
.pz-blur-overlay{
    position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
    background:linear-gradient(180deg,rgba(255,255,255,.2),rgba(255,255,255,.92) 40%); text-align:center; padding:1rem;
}

/* Floating music player publik */
.pz-music-player{
    position:fixed; right:1.2rem; bottom:5.5rem; z-index:1050; background:#fff; border-radius:30px;
    box-shadow:0 6px 20px rgba(0,0,0,.15); padding:.5rem .9rem; display:flex; align-items:center; gap:.5rem;
    cursor:grab; touch-action:none;
}
.pz-music-player.dragging{ cursor:grabbing; box-shadow:0 10px 30px rgba(0,0,0,.25); }
.pz-music-btn{
    width:36px; height:36px; border-radius:50%; border:none; background:var(--pz-accent); color:#fff;
    display:flex; align-items:center; justify-content:center; cursor:pointer;
}
.pz-music-btn.playing{ animation:pzMusicPulse 1.6s ease-in-out infinite; }
.pz-music-nav{ width:26px; height:26px; border-radius:50%; border:none; background:#eef2f6; color:#556; display:flex; align-items:center; justify-content:center; cursor:pointer; font-size:.7rem; flex-shrink:0; }
.pz-music-nav:hover{ background:#e3e8ee; }
.pz-music-info{ display:flex; flex-direction:column; line-height:1.2; }
.pz-music-label{ font-size:.8rem; color:#444; max-width:140px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pz-music-timer{ font-size:.7rem; color:#999; }
@keyframes pzMusicPulse{ 0%,100%{ box-shadow:0 0 0 0 rgba(52,152,219,.5); } 50%{ box-shadow:0 0 0 8px rgba(52,152,219,0); } }

@media(max-width:768px){
    .hero-section-compact h1{ font-size:1.15rem; }
    .hero-section-compact .carousel-item{ padding:0 1.8rem; height:150px; min-height:150px; }
    .hero-cta-card{ margin-top:.8rem; }
}