/* ===========================================================
   Buku Tamu Digital — gaya bersama halaman publik (form & display)
   Palet: krem hangat / emas terbakar, selaras dengan panel admin
   =========================================================== */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,500;0,9..144,600;1,9..144,500&family=Source+Sans+3:wght@400;600;700&family=Caveat:wght@600;700&display=swap');

:root{
  --bg:#faf7f2;
  --surface:#ffffff;
  --ink:#241f1a;
  --muted:#7a7268;
  --accent:#a8714f;
  --accent-soft:#f1e3d6;
  --line:#e8e0d4;
  --gold:#b8935f;
  --danger:#b23b3b;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:"Fraunces","Source Serif 4",Georgia,serif;
}
h1,h2,h3{font-family:"Fraunces",Georgia,serif; margin:0; text-wrap:balance}
.label{
  font-family:"Source Sans 3",system-ui,sans-serif;
  text-transform:uppercase;
  letter-spacing:.12em;
  font-size:.72rem;
  color:var(--muted);
}
[hidden]{display:none!important}
img{max-width:100%}

/* ---------- FORM (index.php) ---------- */
.form-wrap{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:40px 16px;
}
.card{
  width:100%;
  max-width:440px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:20px;
  padding:32px 28px;
  box-shadow:0 20px 50px -30px rgba(40,30,15,.35);
  position:relative;
}
.card::before{
  content:"";
  position:absolute; left:28px; right:28px; top:14px;
  height:1px;
  background:linear-gradient(90deg, transparent, var(--gold), transparent);
  opacity:.5;
}
.card-header{text-align:center; margin-bottom:28px}
.card-header .label{margin-bottom:10px}
.card-header h1{font-size:1.6rem; font-weight:600; line-height:1.25}
.card-header .acara-meta{
  font-family:"Source Sans 3",system-ui,sans-serif;
  color:var(--accent);
  font-size:.82rem;
  font-weight:600;
  margin-top:8px;
}
.card-header .acara-tempat{
  font-family:"Source Sans 3",system-ui,sans-serif;
  color:var(--muted);
  font-size:.82rem;
  margin-top:2px;
}
.card-header p{
  font-family:"Source Sans 3",system-ui,sans-serif;
  color:var(--muted);
  font-size:.92rem;
  margin:14px 0 0;
}
.field{margin-bottom:18px}
.field label{
  display:block;
  font-family:"Source Sans 3",system-ui,sans-serif;
  font-size:.85rem;
  font-weight:600;
  margin-bottom:7px;
  color:var(--ink);
}
.field .opt{font-weight:400; color:var(--muted)}
.field input[type=text],
.field textarea{
  width:100%;
  font-family:"Source Sans 3",system-ui,sans-serif;
  font-size:1rem;
  padding:12px 14px;
  border:1px solid var(--line);
  border-radius:10px;
  background:var(--bg);
  color:var(--ink);
}
.field textarea{resize:vertical; min-height:70px}
.field input:focus,.field textarea:focus{outline:2px solid var(--accent); outline-offset:1px}

.photo-zone{
  border:1.5px dashed var(--line);
  border-radius:14px;
  padding:18px;
  text-align:center;
  background:var(--accent-soft);
  cursor:pointer;
  position:relative;
  overflow:hidden;
}
.photo-zone input{position:absolute; inset:0; opacity:0; cursor:pointer}
.photo-zone .ph-empty{display:flex; flex-direction:column; align-items:center; gap:8px; font-family:"Source Sans 3",system-ui,sans-serif; color:var(--accent)}
.photo-zone .ph-empty svg{width:30px;height:30px}
.photo-zone .ph-empty span{font-size:.85rem; font-weight:600}
.photo-zone .ph-empty small{color:var(--muted); font-weight:400}
.photo-preview{display:none; position:relative}
.photo-preview.show{display:block}
.photo-preview.show + .ph-empty{display:none}
.photo-preview img{width:100%; max-height:220px; object-fit:cover; border-radius:10px; display:block}
.photo-remove{
  position:absolute; top:8px; right:8px; width:28px; height:28px; border-radius:50%;
  background:rgba(20,16,10,.65); color:#fff; border:none; font-size:1rem; line-height:1; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}

.submit-btn{
  width:100%; margin-top:8px; padding:14px; border:none; border-radius:12px;
  background:var(--accent); color:#fff; font-family:"Source Sans 3",system-ui,sans-serif;
  font-weight:700; font-size:1rem; letter-spacing:.02em; cursor:pointer;
}
.submit-btn:disabled{opacity:.55; cursor:not-allowed}
.alert{
  margin-bottom:18px; padding:12px 14px; border-radius:10px;
  font-family:"Source Sans 3",system-ui,sans-serif; font-size:.85rem;
}
.alert-error{background:#fbe9e7; color:var(--danger)}
.alert-success{background:var(--accent-soft); color:var(--accent)}

.success{text-align:center; padding:20px 0 4px}
.success .check{width:62px; height:62px; margin:0 auto 18px; border-radius:50%; background:var(--accent-soft); display:flex; align-items:center; justify-content:center}
.success .check svg{width:30px;height:30px; color:var(--accent)}
.success h2{font-size:1.4rem; margin-bottom:8px}
.success p{font-family:"Source Sans 3",system-ui,sans-serif; color:var(--muted); font-size:.92rem; line-height:1.5}
.success .again{margin-top:22px; margin-right:8px; background:var(--accent); border:1px solid var(--accent); color:#fff; font-family:"Source Sans 3",system-ui,sans-serif; padding:10px 18px; border-radius:10px; cursor:pointer; font-size:.85rem; text-decoration:none; display:inline-block}
.success .again-secondary{background:none; border:1px solid var(--line); color:var(--ink)}

/* ---------- DISPLAY (display.php): jaringan node futuristik ---------- */
.graph-body{
  --nbg:#050a14;
  --nsurface:#0d1626;
  --nink:#eaf6ff;
  --nmuted:#86a2c2;
  --ncyan:#4de8ff;
  --nline:rgba(77,232,255,.18);
  margin:0;
  height:100vh;
  overflow:hidden;
  background:
    radial-gradient(ellipse 60% 45% at 18% 8%, rgba(77,232,255,.10), transparent 60%),
    radial-gradient(ellipse 55% 45% at 86% 92%, rgba(130,90,255,.10), transparent 60%),
    var(--nbg);
  color:var(--nink);
  position:relative;
  font-family:"Fraunces",Georgia,serif;
}
.graph-body::before{
  content:"";
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(77,232,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(77,232,255,.035) 1px, transparent 1px);
  background-size:42px 42px;
  pointer-events:none; z-index:1;
  mask-image:radial-gradient(ellipse 70% 60% at 50% 40%, rgba(0,0,0,.9), transparent 90%);
}

#graphCanvas{position:absolute; inset:0; z-index:2; display:block}

.graph-overlay{position:absolute; inset:0; z-index:5; pointer-events:none}

.graph-head{
  position:absolute; top:28px; left:0; right:0; text-align:center;
}
.graph-head .label{color:var(--ncyan); opacity:.9; margin-bottom:6px; text-shadow:0 0 14px rgba(77,232,255,.5)}
.graph-head h1{
  font-size:clamp(1.5rem, 3vw, 2.3rem); color:var(--nink);
  text-shadow:0 2px 24px rgba(0,0,0,.6), 0 0 30px rgba(77,232,255,.25);
}
.graph-head .acara-meta{
  font-family:"Source Sans 3",system-ui,sans-serif;
  color:var(--nmuted); font-size:.85rem; margin-top:6px;
}

.graph-count{
  position:absolute; top:28px; right:28px;
  display:flex; align-items:center; gap:8px;
  font-family:"Source Sans 3",system-ui,sans-serif; font-size:.82rem; color:var(--nmuted);
  background:rgba(13,22,38,.6); border:1px solid var(--nline); border-radius:999px; padding:7px 14px;
  backdrop-filter:blur(6px);
}
.graph-count .dot{width:8px; height:8px; border-radius:50%; background:var(--ncyan); box-shadow:0 0 10px var(--ncyan); animation:dot-pulse 1.6s ease-in-out infinite}
.graph-count #graphCountNum{color:var(--nink); font-weight:700}
@keyframes dot-pulse{0%,100%{opacity:.5} 50%{opacity:1}}

.graph-empty{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  flex-direction:column; gap:10px; font-family:"Source Sans 3",system-ui,sans-serif; color:var(--nmuted);
  text-align:center; padding:0 24px;
}
.graph-empty .big{font-size:3.2rem; color:var(--ncyan); text-shadow:0 0 30px rgba(77,232,255,.5); animation:dot-pulse 2.4s ease-in-out infinite}
.graph-empty .hint{font-size:.95rem}

.spotlight{
  position:fixed; left:50%; bottom:34px; transform:translateX(-50%); z-index:6;
  width:min(380px, 86vw);
  background:linear-gradient(180deg, rgba(13,22,38,.92), rgba(6,11,20,.94));
  backdrop-filter:blur(14px);
  border:1px solid var(--nline); border-radius:18px; padding:14px 18px;
  display:flex; align-items:center; gap:14px;
  box-shadow:0 20px 60px -20px rgba(0,0,0,.8), 0 0 40px -12px rgba(77,232,255,.3);
  animation:spot-in .5s ease both;
}
.spotlight.sp-pulse{box-shadow:0 20px 60px -20px rgba(0,0,0,.8), 0 0 60px -6px rgba(77,232,255,.55)}
@keyframes spot-in{from{opacity:0; transform:translate(-50%,10px)} to{opacity:1; transform:translate(-50%,0)}}
.spotlight .sp-photo{flex:0 0 auto; width:52px; height:52px; border-radius:50%; overflow:hidden; background:var(--nsurface); border:1.5px solid var(--ncyan); box-shadow:0 0 16px rgba(77,232,255,.5); display:flex; align-items:center; justify-content:center}
.spotlight .sp-photo img{width:100%; height:100%; object-fit:cover}
.spotlight .sp-photo .initial{font-family:"Fraunces",Georgia,serif; color:var(--ncyan); font-weight:600; font-size:1.1rem}
.spotlight .sp-text{min-width:0; flex:1}
.spotlight .sp-label{color:var(--ncyan); font-size:.6rem; text-transform:uppercase; letter-spacing:.1em; margin-bottom:2px}
.spotlight .sp-name{font-family:"Fraunces",Georgia,serif; font-size:1.05rem; color:var(--nink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.spotlight .sp-org{font-family:"Source Sans 3",system-ui,sans-serif; font-size:.76rem; color:var(--nmuted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}

.qr-float{
  position:fixed; bottom:18px; right:18px; z-index:6;
  background:var(--nsurface); border:1px solid var(--nline); border-radius:14px; padding:10px;
  box-shadow:0 10px 30px -15px rgba(0,0,0,.7);
}
.qr-float img{display:block; width:84px; height:84px}
.qr-float .label{text-align:center; margin-top:6px; font-size:.6rem; color:var(--ncyan)}

@media (max-width:700px){
  .graph-head h1{font-size:1.3rem}
  .graph-count{top:auto; bottom:18px; left:18px; right:18px; justify-content:center}
  .spotlight{width:92vw; bottom:76px}
}

/* ---------- DISPLAY: mode COLLAGE DINDING ---------- */
.wall-body{
  margin:0; min-height:100vh; overflow-x:hidden;
  background:
    radial-gradient(ellipse 70% 50% at 50% 0%, rgba(184,147,95,.12), transparent 60%),
    var(--bg);
  padding:28px 24px 50px;
}
.wall-head{text-align:center; margin-bottom:10px}
.wall-head h1{font-size:clamp(1.6rem, 3.2vw, 2.4rem); color:var(--ink)}
.wall-head .acara-meta{
  font-family:"Source Sans 3",system-ui,sans-serif; color:var(--accent);
  font-size:.88rem; font-weight:600; margin-top:8px;
}
.wall-count{
  display:flex; align-items:center; justify-content:center; gap:8px;
  font-family:"Source Sans 3",system-ui,sans-serif; font-size:.82rem; color:var(--muted);
  margin:14px auto 28px;
}
.wall-count .dot{width:8px; height:8px; border-radius:50%; background:var(--accent); box-shadow:0 0 8px var(--accent); animation:dot-pulse 1.6s ease-in-out infinite}
.wall-count #wallCountNum{color:var(--ink); font-weight:700}

.wall-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(190px, 1fr));
  gap:22px 18px;
  max-width:1600px;
  margin:0 auto;
}
.wall-card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:16px;
  padding:14px 14px 16px;
  box-shadow:0 16px 34px -22px rgba(40,30,15,.4);
  transform:rotate(var(--rot, 0deg)) translate(var(--dx, 0), var(--dy, 0));
  transition:transform .4s ease;
  position:relative;
}
.wall-card::before{
  content:"";
  position:absolute; top:-7px; left:50%; transform:translateX(-50%) rotate(-3deg);
  width:34px; height:14px; border-radius:3px;
  background:hsla(var(--hue, 36), 55%, 62%, .85);
  box-shadow:0 2px 6px rgba(0,0,0,.18);
}
.wall-card:hover{transform:rotate(0deg) translate(0,0) scale(1.03); z-index:2}
.wall-card-new{animation:wall-pop .55s cubic-bezier(.2,.9,.3,1.3) both}
@keyframes wall-pop{
  from{opacity:0; transform:rotate(var(--rot,0deg)) translate(var(--dx,0), var(--dy,0)) scale(.7)}
  to{opacity:1; transform:rotate(var(--rot,0deg)) translate(var(--dx,0), var(--dy,0)) scale(1)}
}
.wall-photo{
  width:100%; aspect-ratio:1/1; border-radius:11px; overflow:hidden;
  background:var(--accent-soft); display:flex; align-items:center; justify-content:center;
}
.wall-photo img{width:100%; height:100%; object-fit:cover; display:block}
.wall-initial{font-family:"Fraunces",Georgia,serif; font-size:2.4rem; font-weight:600; color:var(--accent)}
.wall-info{margin-top:10px; text-align:center}
.wall-name{font-family:"Fraunces",Georgia,serif; font-size:1.05rem; color:var(--ink); line-height:1.25}
.wall-org{font-family:"Source Sans 3",system-ui,sans-serif; font-size:.76rem; color:var(--accent); margin-top:2px; font-weight:600}
.wall-pesan{font-family:"Caveat",cursive; font-size:1.1rem; color:var(--muted); margin-top:6px; line-height:1.25}

.wall-empty{
  position:fixed; inset:0; display:flex; align-items:center; justify-content:center;
  flex-direction:column; gap:10px; font-family:"Source Sans 3",system-ui,sans-serif; color:var(--muted);
  text-align:center; padding:0 24px; pointer-events:none;
}
.wall-empty .big{font-size:3rem; color:var(--accent); animation:dot-pulse 2.4s ease-in-out infinite}
.wall-empty .hint{font-size:.95rem}

@media (max-width:700px){
  .wall-head h1{font-size:1.4rem}
  .wall-grid{grid-template-columns:repeat(auto-fill, minmax(140px, 1fr)); gap:16px 12px}
}

/* ---------- DISPLAY: mode ORBIT GALAXY ---------- */
.galaxy-body{
  margin:0; height:100vh; overflow:hidden; background:#040611; color:#f3eeff;
  position:relative; font-family:"Fraunces",Georgia,serif;
}
#starCanvas{position:absolute; inset:0; z-index:1; display:block}
#galaxyCanvas{position:absolute; inset:0; z-index:2; display:block}
.galaxy-overlay{position:absolute; inset:0; z-index:5; pointer-events:none}

.galaxy-count{
  position:absolute; top:28px; right:28px;
  display:flex; align-items:center; gap:8px;
  font-family:"Source Sans 3",system-ui,sans-serif; font-size:.82rem; color:#b6a6e0;
  background:rgba(20,14,36,.6); border:1px solid rgba(190,150,255,.18); border-radius:999px; padding:7px 14px;
  backdrop-filter:blur(6px);
}
.galaxy-count .dot{width:8px; height:8px; border-radius:50%; background:#c79bff; box-shadow:0 0 10px #c79bff; animation:dot-pulse 1.6s ease-in-out infinite}
.galaxy-count #galaxyCountNum{color:#f3eeff; font-weight:700}

.galaxy-empty{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  flex-direction:column; gap:10px; font-family:"Source Sans 3",system-ui,sans-serif; color:#b6a6e0;
  text-align:center; padding:0 24px;
}
.galaxy-empty .big{font-size:3.2rem; color:#c79bff; text-shadow:0 0 30px rgba(199,155,255,.5); animation:dot-pulse 2.4s ease-in-out infinite}
.galaxy-empty .hint{font-size:.95rem}

@media (max-width:700px){
  .galaxy-count{top:auto; bottom:18px; left:18px; right:18px; justify-content:center}
}

/* ---------- DISPLAY: mode PARTICLE BURST ---------- */
.burst-body{
  margin:0; height:100vh; overflow:hidden; position:relative;
  background:
    radial-gradient(ellipse 60% 50% at 50% 0%, rgba(255,140,60,.1), transparent 60%),
    #0c0906;
  color:#fff3e8;
  font-family:"Fraunces",Georgia,serif;
}
#burstCanvas{position:absolute; inset:0; z-index:2; display:block}
.burst-overlay{position:absolute; inset:0; z-index:5; pointer-events:none}

.burst-head{position:absolute; top:28px; left:0; right:0; text-align:center}
.burst-head .label{color:#ffb178; opacity:.9; margin-bottom:6px; text-shadow:0 0 14px rgba(255,140,60,.4)}
.burst-head h1{font-size:clamp(1.5rem, 3vw, 2.3rem); color:#fff3e8; text-shadow:0 2px 24px rgba(0,0,0,.6)}
.burst-head .acara-meta{font-family:"Source Sans 3",system-ui,sans-serif; color:#d9bfa6; font-size:.85rem; margin-top:6px}

.burst-count{
  position:absolute; top:28px; right:28px;
  display:flex; align-items:center; gap:8px;
  font-family:"Source Sans 3",system-ui,sans-serif; font-size:.82rem; color:#d9bfa6;
  background:rgba(30,20,12,.6); border:1px solid rgba(255,160,90,.2); border-radius:999px; padding:7px 14px;
  backdrop-filter:blur(6px);
}
.burst-count .dot{width:8px; height:8px; border-radius:50%; background:#ffb178; box-shadow:0 0 10px #ffb178; animation:dot-pulse 1.6s ease-in-out infinite}
.burst-count #burstCountNum{color:#fff3e8; font-weight:700}

.burst-empty{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  flex-direction:column; gap:10px; font-family:"Source Sans 3",system-ui,sans-serif; color:#d9bfa6;
  text-align:center; padding:0 24px;
}
.burst-empty .big{font-size:3.2rem; color:#ffb178; text-shadow:0 0 30px rgba(255,140,60,.5); animation:dot-pulse 2.4s ease-in-out infinite}
.burst-empty .hint{font-size:.95rem}

@media (max-width:700px){
  .burst-head h1{font-size:1.3rem}
  .burst-count{top:auto; bottom:18px; left:18px; right:18px; justify-content:center}
}

/* ---------- DISPLAY: mode CAROUSEL 3D ---------- */
.carousel-body{
  margin:0; height:100vh; overflow:hidden; position:relative;
  background:
    radial-gradient(ellipse 70% 55% at 50% 50%, rgba(184,147,95,.14), transparent 65%),
    #15110a;
  color:#f6ecdd;
  font-family:"Fraunces",Georgia,serif;
}
.carousel-head{position:absolute; top:28px; left:0; right:0; text-align:center; z-index:5}
.carousel-head .label{color:var(--gold); opacity:.95; margin-bottom:6px}
.carousel-head h1{font-size:clamp(1.5rem, 3vw, 2.3rem); color:#f6ecdd; text-shadow:0 2px 24px rgba(0,0,0,.6)}
.carousel-head .acara-meta{font-family:"Source Sans 3",system-ui,sans-serif; color:#c9b89a; font-size:.85rem; margin-top:6px}

.carousel-count{
  position:absolute; top:28px; right:28px; z-index:5;
  display:flex; align-items:center; gap:8px;
  font-family:"Source Sans 3",system-ui,sans-serif; font-size:.82rem; color:#c9b89a;
  background:rgba(30,24,14,.6); border:1px solid rgba(184,147,95,.25); border-radius:999px; padding:7px 14px;
  backdrop-filter:blur(6px);
}
.carousel-count .dot{width:8px; height:8px; border-radius:50%; background:var(--gold); box-shadow:0 0 10px var(--gold); animation:dot-pulse 1.6s ease-in-out infinite}
.carousel-count #carouselCountNum{color:#f6ecdd; font-weight:700}

.carousel-stage{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  perspective:1400px;
}
.carousel-ring{
  position:relative; width:1px; height:1px;
  transform-style:preserve-3d;
  will-change:transform;
}
.carousel-card{
  position:absolute; top:0; left:0;
  width:200px; height:270px;
  transform-style:preserve-3d;
  background:linear-gradient(180deg, rgba(40,32,20,.9), rgba(20,16,10,.95));
  border:1px solid rgba(184,147,95,.35);
  border-radius:16px;
  padding:14px;
  box-shadow:0 20px 50px -20px rgba(0,0,0,.7);
  backface-visibility:hidden;
}
.carousel-photo{
  width:100%; aspect-ratio:1/1; border-radius:11px; overflow:hidden;
  background:rgba(184,147,95,.18); display:flex; align-items:center; justify-content:center;
}
.carousel-photo img{width:100%; height:100%; object-fit:cover; display:block}
.carousel-initial{font-family:"Fraunces",Georgia,serif; font-size:2.2rem; font-weight:600; color:var(--gold)}
.carousel-info{margin-top:10px; text-align:center}
.carousel-name{font-family:"Fraunces",Georgia,serif; font-size:1rem; color:#f6ecdd; line-height:1.25; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.carousel-org{font-family:"Source Sans 3",system-ui,sans-serif; font-size:.72rem; color:var(--gold); margin-top:3px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}

.carousel-empty{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  flex-direction:column; gap:10px; font-family:"Source Sans 3",system-ui,sans-serif; color:#c9b89a;
  text-align:center; padding:0 24px; z-index:4; pointer-events:none;
}
.carousel-empty .big{font-size:3.2rem; color:var(--gold); text-shadow:0 0 30px rgba(184,147,95,.5); animation:dot-pulse 2.4s ease-in-out infinite}
.carousel-empty .hint{font-size:.95rem}

@media (max-width:700px){
  .carousel-head h1{font-size:1.3rem}
  .carousel-count{top:auto; bottom:18px; left:18px; right:18px; justify-content:center}
  .carousel-card{width:140px; height:190px; padding:10px}
}

/* ---------- DISPLAY: mode POLAROID WALL ---------- */
.polaroid-body{
  margin:0; height:100vh; overflow:hidden; position:relative;
  background:
    radial-gradient(ellipse 60% 50% at 50% 0%, rgba(184,147,95,.08), transparent 60%),
    #2b2621;
  color:#f3ebd9;
  font-family:"Fraunces",Georgia,serif;
}
#polaroidCanvas{position:absolute; inset:0; z-index:2; display:block}
.polaroid-overlay{position:absolute; inset:0; z-index:5; pointer-events:none}

.polaroid-head{position:absolute; top:28px; left:0; right:0; text-align:center}
.polaroid-head .label{color:var(--gold); opacity:.95; margin-bottom:6px}
.polaroid-head h1{font-size:clamp(1.5rem, 3vw, 2.3rem); color:#f3ebd9; text-shadow:0 2px 24px rgba(0,0,0,.6)}
.polaroid-head .acara-meta{font-family:"Source Sans 3",system-ui,sans-serif; color:#cdbfa4; font-size:.85rem; margin-top:6px}

.polaroid-count{
  position:absolute; top:28px; right:28px;
  display:flex; align-items:center; gap:8px;
  font-family:"Source Sans 3",system-ui,sans-serif; font-size:.82rem; color:#cdbfa4;
  background:rgba(30,26,20,.6); border:1px solid rgba(184,147,95,.25); border-radius:999px; padding:7px 14px;
  backdrop-filter:blur(6px);
}
.polaroid-count .dot{width:8px; height:8px; border-radius:50%; background:var(--gold); box-shadow:0 0 10px var(--gold); animation:dot-pulse 1.6s ease-in-out infinite}
.polaroid-count #polaroidCountNum{color:#f3ebd9; font-weight:700}

.polaroid-empty{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  flex-direction:column; gap:10px; font-family:"Source Sans 3",system-ui,sans-serif; color:#cdbfa4;
  text-align:center; padding:0 24px;
}
.polaroid-empty .big{font-size:3.2rem; color:var(--gold); text-shadow:0 0 30px rgba(184,147,95,.4); animation:dot-pulse 2.4s ease-in-out infinite}
.polaroid-empty .hint{font-size:.95rem}

@media (max-width:700px){
  .polaroid-head h1{font-size:1.3rem}
  .polaroid-count{top:auto; bottom:18px; left:18px; right:18px; justify-content:center}
}