*{box-sizing:border-box}
body{margin:0;font-family:"Segoe UI",system-ui,-apple-system,Arial,sans-serif;background:#F3F6F3;color:#0A3B27}
a{color:#0E6B45}

/* --- halaman login/daftar --- */
.auth-page{min-height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(160deg,#0C4530,#062B1D)}
.auth-box{background:#fff;padding:2.2rem 2rem;border-radius:.8rem;width:min(24rem,90vw);box-shadow:0 1rem 3rem rgba(0,0,0,.25)}
.auth-box h1{margin:0 0 1.2rem;font-size:1.5rem;color:#0A3B27}
.auth-box label{display:block;font-size:.85rem;color:#527062;margin:.7rem 0 .25rem}
.auth-box input{width:100%;padding:.55rem .7rem;border:1px solid #cfe0d4;border-radius:.4rem;font-size:1rem}
.auth-box button{margin-top:1.3rem;width:100%;padding:.7rem;border:0;border-radius:.4rem;background:#0E6B45;color:#fff;font-size:1rem;cursor:pointer}
.auth-box button:hover{background:#0A5636}
.link-bawah{margin-top:1rem;font-size:.9rem;text-align:center;color:#6b8177}
.pesan-error{background:#FBEAEA;color:#9B2C2C;padding:.6rem .8rem;border-radius:.4rem;margin-bottom:.8rem;font-size:.9rem}
.pesan-ok{background:#E7F5EC;color:#0E6B45;padding:.6rem .8rem;border-radius:.4rem;margin-bottom:1rem;font-size:.9rem}

/* --- shell admin --- */
.topbar{background:#0A3B27;color:#fff;padding:.8rem 1.4rem;display:flex;align-items:center;justify-content:space-between}
.topbar .brand{font-weight:700;font-size:1.1rem}
.topbar a{color:#CFE7D8;text-decoration:none;margin-left:1.1rem;font-size:.9rem}
.topbar a:hover{color:#fff}
.wrap{max-width:64rem;margin:0 auto;padding:1.6rem 1.2rem 3rem}
.breadcrumb{font-size:.85rem;color:#6b8177;margin-bottom:1rem}
.breadcrumb a{color:#0E6B45}
h2.judul{font-size:1.4rem;margin:0 0 1.1rem}

/* --- kartu display (sesuai mockup) --- */
.grid-kartu{display:grid;gap:1rem;grid-template-columns:repeat(auto-fill,minmax(19rem,1fr))}
.kartu{background:#fff;border-radius:1rem;padding:1.3rem 1.4rem;box-shadow:0 .3rem 1rem rgba(10,59,39,.08)}
.kartu .baris-atas{display:flex;justify-content:space-between;align-items:flex-start}
.kartu .mode-label{font-size:.85rem;color:#93a59b}
.kartu .mode-nama{font-size:1.4rem;font-weight:700;color:#3a4a42;margin-top:.15rem}
.kartu .ikon-aksi{display:flex;gap:.6rem}
.kartu .ikon-aksi a{color:#0A3B27;text-decoration:none;font-size:1.1rem}
.kartu .ikon-aksi a.hapus{color:#B23A3A}
.tag-menu{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.1rem}
.tag-menu span{background:#D7F3EE;color:#0A3B27;padding:.45rem .9rem;border-radius:99px;font-size:.92rem}
.kartu .link-tv{display:block;margin-top:1rem;font-size:.85rem}
.tambah-btn{display:inline-block;margin-bottom:1.2rem;background:#0E6B45;color:#fff;padding:.6rem 1.1rem;
  border-radius:.5rem;text-decoration:none;font-size:.95rem}
.tambah-btn:hover{background:#0A5636}

/* --- form admin --- */
.kotak{background:#fff;border-radius:.8rem;padding:1.4rem 1.5rem;box-shadow:0 .3rem 1rem rgba(10,59,39,.08);margin-bottom:1.2rem}
.baris-form{margin-bottom:.9rem}
.baris-form label{display:block;font-size:.88rem;color:#527062;margin-bottom:.3rem}
.baris-form input[type=text],.baris-form input[type=number],.baris-form input[type=email],
.baris-form input[type=password],.baris-form input[type=date],.baris-form select,.baris-form textarea{
  width:100%;padding:.55rem .7rem;border:1px solid #cfe0d4;border-radius:.4rem;font-size:.95rem;font-family:inherit}
.baris-form textarea{min-height:5rem}
.dua-kolom{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.tiga-kolom{display:grid;grid-template-columns:repeat(5,1fr);gap:.6rem}
.cek-menu{display:flex;align-items:center;gap:.5rem;padding:.5rem .7rem;background:#F3F6F3;border-radius:.4rem;margin-bottom:.5rem}
.cek-menu input{width:1.15rem;height:1.15rem}
.tombol{background:#0E6B45;color:#fff;border:0;padding:.65rem 1.3rem;border-radius:.45rem;font-size:.95rem;cursor:pointer}
.tombol:hover{background:#0A5636}
.tombol.sekunder{background:#e3ece5;color:#3a4a42}
.tombol.bahaya{background:#B23A3A}

table.tabel{width:100%;border-collapse:collapse;background:#fff;border-radius:.6rem;overflow:hidden}
table.tabel th,table.tabel td{padding:.65rem .8rem;text-align:left;border-bottom:1px solid #eef2ee;font-size:.92rem}
table.tabel th{background:#F3F6F3;color:#527062;font-weight:600}
table.tabel tr:last-child td{border-bottom:0}
.aksi-tabel a{margin-right:.7rem;font-size:.88rem}
.aksi-tabel a.hapus{color:#B23A3A}
.thumb{width:2.6rem;height:2.6rem;border-radius:.3rem;object-fit:cover;background:#eee}
.ringkasan{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-bottom:1.2rem}
.ringkasan .box{background:#fff;border-radius:.7rem;padding:1rem 1.2rem;box-shadow:0 .3rem 1rem rgba(10,59,39,.08)}
.ringkasan .box b{display:block;font-size:1.5rem;margin-top:.2rem}
.ringkasan .masuk b{color:#0E6B45}
.ringkasan .keluar b{color:#B23A3A}
.galeri-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(9rem,1fr));gap:.8rem}
.galeri-grid .item{background:#fff;border-radius:.6rem;overflow:hidden;box-shadow:0 .3rem 1rem rgba(10,59,39,.08)}
.galeri-grid img{width:100%;height:6.5rem;object-fit:cover;display:block}
.galeri-grid .cap{padding:.5rem .6rem;font-size:.82rem}
.galeri-grid .cap a{color:#B23A3A}

@media(max-width:640px){.dua-kolom,.tiga-kolom{grid-template-columns:1fr}}

/* ===== RESPONSIVE PATCH: tidak mengubah desain, hanya mencegah terpotong ===== */
html{width:100%;max-width:100%;overflow-x:hidden}
body{width:100%;max-width:100%;overflow-x:hidden}
img,video,iframe{max-width:100%}
button,input,select,textarea{max-width:100%}
.wrap{width:100%;max-width:64rem}
.topbar{width:100%;gap:1rem;flex-wrap:wrap}
.topbar>div:last-child{display:flex;align-items:center;gap:.8rem;flex-wrap:wrap}
.topbar a{margin-left:0}
.kartu,.kotak{min-width:0}
.grid-kartu,.dua-kolom,.tiga-kolom,.ringkasan,.galeri-grid{min-width:0}
table.tabel{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;white-space:nowrap}
@media(max-width:640px){
  .wrap{padding:1rem .8rem 2rem}
  .topbar{padding:.7rem .8rem;align-items:flex-start}
  .topbar .brand{font-size:1rem}
  .topbar>div:last-child{width:100%;gap:.55rem}
  .topbar a{font-size:.82rem}
  .breadcrumb{overflow-wrap:anywhere}
  h2.judul{font-size:1.2rem}
  .kotak{padding:1rem}
  .grid-kartu{grid-template-columns:minmax(0,1fr)}
  .ringkasan{grid-template-columns:minmax(0,1fr)}
  .tombol,.tambah-btn{max-width:100%;white-space:normal}
  .tag-menu{gap:.4rem}
  .tag-menu span{font-size:.82rem;padding:.4rem .7rem}
}
@media(min-width:641px) and (max-width:900px){
  .wrap{padding-left:1rem;padding-right:1rem}
}