/* ============================================================
   09-MODALS.CSS
   Semua jendela modal: detail koleksi (Pameran & Jelajah),
   scanner QR, tutorial, kuis, hasil kuis, dan detail pencapaian.
   ============================================================ */
#detail-zoom{display:none;position:fixed;inset:0;background:rgba(0,0,0,.82);z-index:1000;justify-content:center;align-items:center;padding:16px;backdrop-filter:blur(6px);}
#detail-zoom.show{display:flex}
.modal-card{position:relative;width:100%;max-width:660px;background:rgba(16,10,3,.97);border:1px solid rgba(200,160,30,.42);border-radius:14px;overflow:hidden;box-shadow:0 0 60px rgba(0,0,0,.95),0 0 0 1px rgba(200,160,30,.1),0 0 28px rgba(200,160,30,.08);animation:modalUp .32s cubic-bezier(.4,0,.2,1) forwards;max-height:90vh;overflow-y:auto;}
@keyframes modalUp{from{transform:translateY(28px);opacity:0}to{transform:translateY(0);opacity:1}}
.modal-card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:var(--gold-grad);z-index:2}
.modal-head{padding:18px 22px 12px;border-bottom:1px solid rgba(200,160,30,.14);display:flex;justify-content:space-between;align-items:flex-start;position:sticky;top:0;background:rgba(16,10,3,.97);z-index:10}
.modal-nama{font-family:'Cinzel',serif;font-size:.95rem;color:var(--gold);letter-spacing:3px;text-transform:uppercase;margin-bottom:2px}
.modal-sub{font-family:'Cormorant Garamond',serif;font-size:.82rem;color:var(--muted);font-style:italic;letter-spacing:1px}
.modal-close{background:none;border:none;color:var(--muted);font-size:20px;cursor:pointer;padding:2px 6px;transition:color .2s;line-height:1;flex-shrink:0;margin-left:10px}
.modal-close:hover{color:var(--gold)}
.modal-img-section{position:relative;background:#0a0603;overflow:hidden;cursor:zoom-in;border-bottom:1px solid rgba(200,160,30,.12);}
.modal-img-section.zoomed{cursor:zoom-out}
.modal-img{width:100%;max-height:280px;object-fit:contain;display:block;transition:transform .4s cubic-bezier(.4,0,.2,1);transform-origin:center center;}
.modal-img-section.zoomed .modal-img{max-height:none;transform:scale(2);}
.zoom-hint{position:absolute;bottom:8px;right:10px;background:rgba(13,9,4,.85);border:1px solid rgba(200,160,30,.3);border-radius:20px;padding:4px 10px;font-family:'Cinzel',serif;font-size:.58rem;color:var(--muted);letter-spacing:1px;pointer-events:none;transition:opacity .3s;}
.modal-img-section.zoomed .zoom-hint{opacity:0}
.modal-body-text{padding:16px 22px 8px}
.modal-audio-section{padding:14px 22px;border-top:1px solid rgba(200,160,30,.1);}
.audio-player{display:flex;align-items:center;gap:12px;background:rgba(200,160,30,.07);border:1px solid rgba(200,160,30,.22);border-radius:10px;padding:12px 16px;}
.btn-play-audio{width:44px;height:44px;flex-shrink:0;border-radius:50%;border:2px solid var(--gold);background:rgba(200,160,30,.15);color:var(--gold);font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .22s;line-height:1;}
.btn-play-audio:hover{background:var(--gold);color:#0d0904;box-shadow:var(--shadow-gold)}
.btn-play-audio:active{transform:scale(.92)}
.audio-info{flex:1;min-width:0}
.audio-title{font-family:'Cinzel',serif;font-size:.7rem;color:var(--gold);letter-spacing:1.5px;margin-bottom:5px}
.audio-progress-bg{height:4px;background:rgba(255,255,255,.1);border-radius:2px;overflow:hidden;cursor:pointer}
.audio-progress-fill{height:100%;width:0%;background:var(--gold-grad);transition:width .3s linear;border-radius:2px}
.audio-time{font-family:'Cinzel',serif;font-size:.6rem;color:var(--muted);margin-top:4px;letter-spacing:1px}
.audio-no-file{font-family:'Cormorant Garamond',serif;font-size:.85rem;color:var(--muted);font-style:italic;text-align:center;width:100%;padding:4px 0;}
.modal-foot{padding:12px 22px 18px;border-top:1px solid rgba(200,160,30,.11);display:flex;justify-content:center;gap:12px;flex-wrap:wrap;}
.btn-detail{background:var(--gold-grad);color:#0d0904;border:none;padding:9px 44px;border-radius:24px;font-family:'Cinzel',serif;font-size:.75rem;font-weight:700;letter-spacing:3px;cursor:pointer;transition:all .2s}
.btn-detail:hover{transform:scale(1.04);box-shadow:var(--shadow-gold)}
.detail-card{max-width:820px}
.detail-body{display:flex;gap:20px;padding:18px 22px 6px;align-items:flex-start}
.detail-img-col{flex:0 0 260px;max-width:260px}
.detail-img-col .modal-img-section{border-radius:8px;border:1px solid rgba(200,160,30,.18)}
.detail-img-col .modal-img{max-height:300px}
.detail-content-col{flex:1;min-width:0}
.detail-tabs{display:flex;gap:2px;border-bottom:1px solid rgba(200,160,30,.18);margin-bottom:12px;overflow-x:auto;scrollbar-width:none}
.detail-tabs::-webkit-scrollbar{display:none}
.detail-tab-btn{background:none;border:none;color:var(--muted);font-family:'Cinzel',serif;font-size:.6rem;letter-spacing:1px;padding:8px 11px;cursor:pointer;border-bottom:2px solid transparent;transition:all .2s;white-space:nowrap;flex-shrink:0}
.detail-tab-btn:hover{color:var(--gold-pale)}
.detail-tab-btn.active{color:var(--gold);border-bottom-color:var(--gold)}
.detail-tab-panel{display:none}
.detail-tab-panel.active{display:block;animation:secFade .3s ease}
.detail-tab-text{font-family:'Cormorant Garamond',serif;font-size:.92rem;color:var(--cream);line-height:1.7;opacity:.9;max-height:230px;overflow-y:auto;padding-right:6px;white-space:pre-line}
.audio-lang-toggle{display:flex;gap:8px;justify-content:center;margin-bottom:10px}
.lang-btn{background:rgba(200,160,30,.06);border:1px solid rgba(200,160,30,.3);color:var(--cream);font-family:'Cinzel',serif;font-size:.6rem;letter-spacing:1px;padding:6px 16px;border-radius:20px;cursor:pointer;transition:all .2s}
.lang-btn:hover{border-color:var(--gold);color:var(--gold)}
.lang-btn.active{background:var(--gold-grad);color:#0d0904;border-color:var(--gold);font-weight:700;box-shadow:var(--shadow-gold)}

/* ─── MODALS generik (tutorial, scanner, kuis, hasil kuis, pencapaian) ─── */
.modal-zoom{display:none;position:fixed;inset:0;background:rgba(0,0,0,.78);z-index:1100;justify-content:center;align-items:center;padding:16px;backdrop-filter:blur(5px);}
.modal-zoom.show{display:flex}
#modal-scanner{align-items:center;}
#reader video{border-radius:8px}
#reader-container{position:relative}
#modal-detail-scan .modal-card{max-width:820px;}