@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@500;600&display=swap');

:root{
  --bg:#EAE3D2;
  --surface:#FFFDF7;
  --surface-2:#F4EEDF;
  --ink:#1C2521;
  --ink-soft:#5B6560;
  --primary:#16423C;
  --primary-light:#2C6E64;
  --brass:#B8863B;
  --brass-light:#DCB876;
  --line:#C9C0AA;
  --red:#A8432E;
  --green-ok:#3C7A5C;
  --radius:14px;
  --shadow: 0 2px 10px rgba(28,37,33,0.08);
}
*{box-sizing:border-box; -webkit-tap-highlight-color: transparent;}
html,body{margin:0; padding:0; background:var(--bg); color:var(--ink); font-family:'Inter',sans-serif; height:100%;}
body{
  background-image:
    radial-gradient(circle at 20% 10%, rgba(184,134,59,0.06), transparent 40%),
    repeating-linear-gradient(180deg, transparent, transparent 27px, rgba(28,37,33,0.035) 28px);
}
#app{max-width:560px; margin:0 auto; min-height:100vh; display:flex; flex-direction:column; background:transparent;}

/* HEADER */
header.topbar{
  background: linear-gradient(155deg, var(--primary) 0%, #0F2E29 100%);
  color:#F4EEDF;
  padding:18px 18px 22px;
  border-radius: 0 0 22px 22px;
  box-shadow: var(--shadow);
  position:relative;
  overflow:hidden;
}
header.topbar::after{
  content:"";
  position:absolute; right:-40px; top:-40px; width:160px; height:160px;
  border-radius:50%;
  border:1px dashed rgba(244,238,223,0.18);
}
.stempel{
  width:52px; height:52px; border-radius:50%;
  border:2px solid var(--brass-light);
  display:flex; align-items:center; justify-content:center;
  flex-direction:column;
  font-family:'IBM Plex Mono', monospace;
  color:var(--brass-light);
  flex:0 0 auto;
  position:relative;
}
.stempel::before{
  content:"";
  position:absolute; inset:5px; border-radius:50%; border:1px solid rgba(220,184,118,0.45);
}
.stempel b{font-size:14px; line-height:1; letter-spacing:0.5px;}
.stempel span{font-size:6.5px; letter-spacing:1px; margin-top:1px;}
.topbar-row{display:flex; align-items:center; gap:12px;}
.topbar-text h1{font-family:'Fraunces', serif; font-weight:600; font-size:20px; margin:0 0 2px; letter-spacing:0.2px;}
.topbar-text p{margin:0; font-size:12px; color:rgba(244,238,223,0.75); letter-spacing:0.3px;}

/* CONTENT */
main{flex:1; padding:16px 16px 96px;}
.card{
  background:var(--surface);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:16px;
  margin-bottom:14px;
  border:1px solid rgba(28,37,33,0.06);
}
.card h2{
  font-family:'Fraunces', serif; font-size:16px; font-weight:600; margin:0 0 12px;
  display:flex; align-items:center; gap:8px; color:var(--primary);
}
.eyebrow{
  font-family:'IBM Plex Mono', monospace; font-size:10.5px; letter-spacing:1.4px;
  text-transform:uppercase; color:var(--brass); font-weight:600; margin:0 0 4px;
}

/* FORM CONTROLS */
select, input[type=text], input[type=number], input[type=date], input[type=password], textarea{
  width:100%; padding:10px 12px; border-radius:10px; border:1px solid var(--line);
  background:var(--surface-2); color:var(--ink); font-family:'Inter',sans-serif; font-size:14px;
}
textarea{resize:vertical; min-height:90px;}
label{font-size:11.5px; color:var(--ink-soft); font-weight:600; display:block; margin:0 0 4px; letter-spacing:0.2px;}
.field{margin-bottom:12px;}
.row2{display:grid; grid-template-columns:1fr 1fr; gap:10px;}

/* BUTTONS */
button.btn{
  border:none; border-radius:10px; padding:11px 16px; font-weight:600; font-size:13.5px;
  cursor:pointer; font-family:'Inter',sans-serif; letter-spacing:0.2px;
}
.btn-primary{background:var(--primary); color:#F4EEDF;}
.btn-primary:active{background:var(--primary-light);}
.btn-outline{background:transparent; color:var(--primary); border:1.5px solid var(--primary);}
.btn-danger{background:transparent; color:var(--red); border:1.5px solid var(--red);}
.btn-brass{background:var(--brass); color:#2A1E08;}
.btn-block{width:100%;}
.btn-sm{padding:7px 10px; font-size:12px;}

.icon-btn{background:none; border:none; cursor:pointer; padding:6px; color:var(--ink-soft);}
.icon-btn.danger{color:var(--red);}

.empty{text-align:center; padding:28px 12px; color:var(--ink-soft); font-size:13px;}
.empty b{display:block; font-family:'Fraunces',serif; font-size:16px; color:var(--ink); margin-bottom:4px;}

.toast{
  position:fixed; bottom:78px; left:50%; transform:translateX(-50%);
  background:var(--ink); color:#F4EEDF; padding:9px 16px; border-radius:20px;
  font-size:12.5px; font-weight:600; box-shadow:0 4px 14px rgba(0,0,0,0.25);
  opacity:0; pointer-events:none; transition:opacity .25s, transform .25s; z-index:100;
}
.toast.show{opacity:1; transform:translateX(-50%) translateY(-4px);}

/* ANNOUNCEMENTS & PHOTO GALLERY (shared by public.html and admin Konten tab) */
.ann-date{
  font-family:'IBM Plex Mono', monospace; font-size:10.5px; letter-spacing:0.5px;
  color:var(--ink-soft); margin-bottom:4px;
}
.ann-item{margin-bottom:18px; padding-bottom:14px; border-bottom:1px solid var(--line);}
.ann-item:last-child{margin-bottom:0; padding-bottom:0; border-bottom:none;}
.ann-title{font-family:'Fraunces',serif; font-size:15px; margin:0 0 6px; color:var(--ink);}
.ann-image{width:100%; border-radius:10px; margin:8px 0; display:block; object-fit:cover; max-height:260px;}
.ann-body{font-size:13.5px; line-height:1.5; margin:0; white-space:pre-wrap;}
.photo-grid{display:grid; grid-template-columns:1fr 1fr; gap:10px;}
.photo-item img{width:100%; aspect-ratio:1; object-fit:cover; border-radius:10px; display:block; border:1px solid rgba(28,37,33,0.06);}
.photo-item .cap{font-size:11px; color:var(--ink-soft); margin-top:5px;}