/* /presentation/appview.css
   View-only stylesheet: tema, layout, animasi, HUD, navpad (tanpa EDITBAR) */

/* ===== Root & base ===== */
:root{
  --bg:#0b1020; --fg:#e8ecf1; --muted:#9aa8b4;
  --accent:#6ee7ff; --accent-2:#c084fc;
  --card:#121a32; --shadow:0 10px 40px rgba(0,0,0,.35);
  --radius:20px; --pad:28px; --vh:100vh;
}
*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,"Helvetica Neue",Arial,"Apple Color Emoji","Segoe UI Emoji";
  color:var(--fg);
  background: radial-gradient(1200px 800px at 10% 10%, #101a3d 0%, #0b1020 45%, #070a14 100%);
  overscroll-behavior:none;
  overflow:hidden; /* hide page scroll; kita pakai internal */
}

/* ===== Deck & Slide ===== */
.deck{ position:relative; width:100vw; height:var(--vh); overflow:hidden; isolation:isolate; }
.grid{ display:contents; }                     /* default: slide absolute layer */
body.overview .grid{                           /* overview grid */
  display:grid; grid-template-columns:repeat(auto-fill, minmax(520px,1fr));
  gap:22px; padding:22px;
}
.slide{
  position:absolute; inset:0; width:100vw; height:var(--vh);
  padding:clamp(16px,4vw,64px);
  display:flex; flex-direction:column; justify-content:center; gap:18px;
  background:transparent; opacity:0; pointer-events:none; transform-origin:center;
}
.slide.active{ opacity:1; pointer-events:auto; }
.slide.pre-enter{ opacity:1; }

.center{ text-align:center; align-items:center; }
.row{ display:grid; gap:22px; grid-template-columns:1fr; }
@media (min-width:900px){ .row.two{ grid-template-columns:1.2fr 1fr; } }
.card{
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.08);
  border-radius:var(--radius); box-shadow:var(--shadow); padding:var(--pad);
}
h1,h2,h3{ line-height:1.05; margin:0; }
h1{ font-size:clamp(36px,5vw,72px); letter-spacing:.4px; }
h2{ font-size:clamp(28px,3.4vw,46px); color:#e2e8f0; }
h3{ font-size:clamp(22px,2.4vw,32px); color:#cbd5e1; }
p{ margin:0; font-size:clamp(16px,1.4vw,20px); color:#c7d2de; }
ul{ margin:.5rem 0 0; padding-left:1.1rem; }
li{ margin:.3rem 0; }
.accent{ color:var(--accent); }
.accent-2{ color:var(--accent-2); }
.muted{ color:var(--muted); }

/* Image helpers */
.img-frame{ border-radius:18px; overflow:hidden; border:1px solid rgba(255,255,255,.1); box-shadow:var(--shadow); }
.img-cover{ width:100%; height:min(52vh,60vw); object-fit:cover; display:block; }
.img-contained{ width:100%; max-height:58vh; object-fit:contain; display:block; background:#0f172a; }

/* ===== Buttons (dipakai di navpad & konten slide) ===== */
.btn{
  display:inline-flex; align-items:center; gap:10px; border-radius:999px; padding:10px 14px;
  background:linear-gradient(90deg, #1f3b7a 0%, #3d1566 100%);
  border:1px solid rgba(255,255,255,.12); color:#eaf6ff; font-weight:600;
  text-decoration:none; user-select:none; cursor:pointer;
}
.btn:hover{ filter:brightness(1.05); }
.btn.tertiary{ background:linear-gradient(90deg, #0f1c3a 0%, #190c33 100%); }
.btn.danger{ background:linear-gradient(90deg, #5b1020 0%, #2b0a12 100%); }

/* ===== HUD (progress, nomor slide, help, toast) ===== */
.hud{ position:absolute; inset:0; pointer-events:none; z-index:6; }
.progress{
  position:absolute; left:0; right:0; top:0; height:4px;
  background:rgba(255,255,255,.06);
}
.progress>i{ display:block; height:100%; width:0%; background:#7ab7ff; }
.slidenum{
  position:absolute; right:16px; top:8px; font-variant-numeric:tabular-nums;
  color:#cbd5e1; font-size:.9rem; opacity:.85;
}
.help{
  position:absolute; left:16px; bottom:16px; max-width:min(480px,92vw);
  background:rgba(10,16,23,.85); border:1px solid rgba(255,255,255,.1);
  padding:.7rem .9rem; border-radius:12px; font-size:.95rem; pointer-events:auto;
  backdrop-filter:blur(6px);
}
.toast{
  position:absolute; left:50%; bottom:18px; transform:translateX(-50%);
  background:rgba(10,16,23,.85); border:1px solid rgba(255,255,255,.1);
  padding:.5rem .8rem; border-radius:10px; display:none;
}

/* ===== Navpad (semi transparan 30%, full saat hover/drag/fokus) ===== */
.navpad{
  position:fixed; right:16px; bottom:16px; z-index:50;
  display:flex; gap:8px; align-items:center;
  padding:10px 12px; border-radius:12px;
  background:rgba(8,12,18,.7); border:1px solid rgba(255,255,255,.08);
  backdrop-filter:blur(6px);
  opacity:.1; transition:opacity .2s ease; /* ===== Navpad (semi transparan 30% = 0.3, */
  box-shadow:var(--shadow);
}
.navpad:hover, .navpad.dragging, .navpad:focus-within{ opacity:1; }
.navpad .handle{ cursor:move; user-select:none; opacity:.8; margin-right:4px; }
.navpad .btn{
  border:1px solid rgba(255,255,255,.14);
  background:rgba(15,23,32,.75);
  color:#d7e9ff; border-radius:10px; padding:.4rem .6rem; font-size:.95rem;
}
.navpad .btn:hover{ background:rgba(20,34,48,.95); }

/* Badge Edit (hanya admin/pro) – view.php akan render ini jika berhak */
.editpill{
  position:fixed; left:12px; top:12px; z-index:60;
  background:rgba(15,23,32,.9); color:#cfe6ff;
  border:1px solid rgba(255,255,255,.12);
  padding:.35rem .55rem; border-radius:999px; text-decoration:none; font-size:.9rem;
}
.editpill:hover{ background:rgba(20,34,48,1); }

/* ===== Overview mode ===== */
body.overview .deck{ overflow:auto; }
body.overview .slide{
  position:static; opacity:1; pointer-events:auto; height:35vh; min-height:320px; transform:none!important;
}

/* ===== Animations (sinkron dengan appview.js) ===== */
.anim-in,.anim-out{ animation-duration:700ms; animation-fill-mode:both; }
@keyframes fade-in{ from{opacity:0} to{opacity:1} } .fade-in{ animation-name:fade-in; }
@keyframes fade-out{ from{opacity:1} to{opacity:0} } .fade-out{ animation-name:fade-out; }
@keyframes slide-in-right{ from{transform:translateX(40px);opacity:0} to{transform:none;opacity:1} } .slide-in-right{ animation-name:slide-in-right; }
@keyframes slide-out-left{ from{opacity:1} to{transform:translateX(-60px);opacity:0} } .slide-out-left{ animation-name:slide-out-left; }
@keyframes slide-in-left{ from{transform:translateX(-40px);opacity:0} to{transform:none;opacity:1} } .slide-in-left{ animation-name:slide-in-left; }
@keyframes slide-out-right{ from{opacity:1} to{transform:translateX(60px);opacity:0} } .slide-out-right{ animation-name:slide-out-right; }
@keyframes slide-in-up{ from{transform:translateY(50px);opacity:0} to{transform:none;opacity:1} } .slide-in-up{ animation-name:slide-in-up; }
@keyframes slide-out-down{ from{opacity:1} to{transform:translateY(60px);opacity:0} } .slide-out-down{ animation-name:slide-out-down; }
@keyframes slide-in-down{ from{transform:translateY(-50px);opacity:0} to{transform:none;opacity:1} } .slide-in-down{ animation-name:slide-in-down; }
@keyframes slide-out-up{ from{opacity:1} to{transform:translateY(-60px);opacity:0} } .slide-out-up{ animation-name:slide-out-up; }
@keyframes zoom-in{ from{transform:scale(.96);opacity:0} to{transform:scale(1);opacity:1} } .zoom-in{ animation-name:zoom-in; }
@keyframes zoom-out{ from{opacity:1} to{transform:scale(.94);opacity:0} } .zoom-out{ animation-name:zoom-out; }
@keyframes rotate-in{ from{transform:rotate(-1.2deg) scale(.98);opacity:0} to{transform:none;opacity:1} } .rotate-in{ animation-name:rotate-in; }
@keyframes rotate-out{ from{opacity:1} to{transform:rotate(1.2deg) scale(.98);opacity:0} } .rotate-out{ animation-name:rotate-out; }
@keyframes flip-in-y{ from{transform:perspective(1000px) rotateY(-12deg);opacity:0} to{transform:perspective(1000px) rotateY(0);opacity:1} } .flip-in-y{ animation-name:flip-in-y; }
@keyframes flip-out-y{ from{opacity:1} to{transform:perspective(1000px) rotateY(12deg);opacity:0} } .flip-out-y{ animation-name:flip-out-y; }
@keyframes flip-in-x{ from{transform:perspective(1000px) rotateX(9deg);opacity:0} to{transform:perspective(1000px) rotateX(0);opacity:1} } .flip-in-x{ animation-name:flip-in-x; }
@keyframes flip-out-x{ from{opacity:1} to{transform:perspective(1000px) rotateX(-9deg);opacity:0} } .flip-out-x{ animation-name:flip-out-x; }
@keyframes blur-in{ from{filter:blur(12px);opacity:0} to{filter:blur(0);opacity:1} } .blur-in{ animation-name:blur-in; }
@keyframes blur-out{ from{opacity:1} to{filter:blur(12px);opacity:0} } .blur-out{ animation-name:blur-out; }

@media (prefers-reduced-motion: reduce){
  .anim-in,.anim-out{ animation:none!important; }
}

/* ===== Print ===== */
@media print{
  body{ background:#fff; color:#111; }
  .deck{ height:auto; }
  .slide{ position:relative; opacity:1!important; page-break-after:always; height:100vh; }
  .hud,.help,.navpad,.palette,.editpill{ display:none!important; }
}

/* ===== Mobile tweaks ===== */
@media (max-width:820px){
  .help{ display:none!important; }
  .btn{ padding:6px 10px; font-size:12px; }
}