/* ============================================
   style.css — Kartu Identitas v2
   ============================================ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --navy:#0d1f3c;--navy-dark:#08131f;--navy-mid:#1a2d4a;
  --gold:#c9a84c;--gold-light:#e8d5a0;--gold-dim:rgba(201,168,76,.25);
  --text-light:#dce8f5;--text-muted:#8fa8c8;--text-dim:#6a8aaa;
  --green:#2e7d32;--red:#c62828;
  --radius:8px;--shadow:0 2px 10px rgba(0,0,0,.12);
}
body{font-family:'Segoe UI',Arial,sans-serif;font-size:15px;background:#f0f4f8;color:#222;min-height:100vh}
a{color:var(--navy);text-decoration:none}
a:hover{text-decoration:underline}

/* ===== SITE HEADER ===== */
.site-header{display:flex;align-items:center;gap:1rem;padding:.75rem 2rem;color:#fff;background:var(--navy)}
.site-logo{height:48px;width:auto}
.site-title{font-size:1.05rem;font-weight:700}
.site-subtitle{font-size:.78rem;opacity:.8}

/* ===== PAGE WRAP ===== */
.page-wrap{display:flex;flex-direction:column;min-height:100vh}
.container{max-width:860px;margin:2rem auto;padding:0 1rem;flex:1}

/* ===== CARD ===== */
.card{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);padding:1.5rem;margin-bottom:1.5rem}

/* ===== ALERTS ===== */
.alert{padding:.75rem 1rem;border-radius:var(--radius);margin-bottom:1rem;font-size:.88rem}
.alert-danger {background:#fdecea;color:#b71c1c;border-left:4px solid #ef5350}
.alert-success{background:#e8f5e9;color:#1b5e20;border-left:4px solid #4caf50}
.alert-warning{background:#fff8e1;color:#6d4c00;border-left:4px solid #ffc107}

/* ===== BUTTONS ===== */
.btn{display:inline-block;padding:.48rem 1.1rem;border-radius:5px;border:2px solid transparent;
     cursor:pointer;font-size:.88rem;font-weight:600;transition:filter .15s,transform .1s;text-decoration:none!important}
.btn:active{transform:scale(.97)}
.btn-primary{background:var(--navy);color:#fff;border-color:var(--navy)}
.btn-success{background:var(--green);color:#fff;border-color:var(--green)}
.btn-danger {background:var(--red);color:#fff;border-color:var(--red)}
.btn-gold   {background:var(--gold);color:var(--navy-dark);border-color:var(--gold)}
.btn-outline{background:transparent;color:var(--navy);border-color:var(--navy)}
.btn:hover{filter:brightness(1.1)}
.btn-sm{display:inline-block;padding:2px 9px;font-size:.76rem;border-radius:4px;
        border:1px solid var(--navy);color:var(--navy);background:transparent;
        cursor:pointer;font-weight:600;text-decoration:none!important;transition:background .1s,color .1s}
.btn-sm:hover{background:var(--navy);color:#fff}
.btn-sm-success{border-color:var(--green);color:var(--green)}
.btn-sm-success:hover{background:var(--green);color:#fff}
.btn-sm-danger{border-color:var(--red);color:var(--red)}
.btn-sm-danger:hover{background:var(--red);color:#fff}
.btn-sm-gold{border-color:var(--gold);color:#7a5c00}
.btn-sm-gold:hover{background:var(--gold);color:var(--navy-dark)}

/* ===== FORMS ===== */
.form-group{margin-bottom:1rem}
.form-group label{display:block;font-size:.84rem;font-weight:600;margin-bottom:.35rem;color:#444}
.form-control{width:100%;padding:.45rem .75rem;border:1.5px solid #dde3ea;border-radius:5px;
              font-size:.88rem;background:#fff;transition:border-color .15s}
.form-control:focus{outline:none;border-color:var(--navy)}
textarea.form-control{resize:vertical}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 1.25rem}
.form-full{grid-column:1/-1}
.form-actions{display:flex;gap:.75rem;margin-top:1.25rem;flex-wrap:wrap}
.foto-preview{width:80px;height:100px;object-fit:cover;border-radius:4px;border:2px solid #dde3ea;margin-top:.5rem}
.input-row{display:flex;gap:.5rem}
.input-main{flex:1;padding:.5rem .85rem;border-radius:5px;border:1.5px solid #dde3ea;font-size:.95rem}
.input-main:focus{outline:none;border-color:var(--navy)}

/* ===== SEARCH/FILTER BAR ===== */
.filter-bar{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center;padding:.75rem 1rem}
.section-title{font-size:1.05rem;font-weight:700;color:var(--navy);margin-bottom:1rem}

/* ===== DATA TABLE ===== */
.data-table{width:100%;border-collapse:collapse;font-size:.86rem}
.data-table th{background:#f0f4f8;font-weight:700;padding:.5rem .75rem;text-align:left;border-bottom:2px solid #dde3ea}
.data-table td{padding:.45rem .75rem;border-bottom:1px solid #eef0f3;vertical-align:middle}
.data-table tr:last-child td{border-bottom:none}
.data-table tr:hover td{background:#f7f9fc}
.aksi-col{display:flex;gap:.3rem;flex-wrap:wrap;align-items:center}

/* ===== KARTU PREVIEW WRAP ===== */
.kartu-preview-wrap{display:flex;flex-wrap:wrap;gap:1.5rem;justify-content:center;margin-bottom:1.25rem}
.print-actions{display:flex;gap:.75rem;flex-wrap:wrap}

/* ===== LOGIN ===== */
.login-body{display:flex;justify-content:center;align-items:center;min-height:100vh}
.login-card{width:360px;border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;background:#fff}
.login-header{padding:1rem 1.5rem;color:#fff}
.login-form-wrap{padding:1.5rem}

/* ===== SITE FOOTER ===== */
.site-footer{text-align:center;padding:1rem;font-size:.78rem;color:#888;border-top:1px solid #dde3ea;background:#fff;margin-top:auto}

/* ===== CHECKBOX LIST ===== */
.check-list{display:flex;flex-wrap:wrap;gap:.5rem .75rem}
.check-list label{display:flex;align-items:center;gap:.35rem;font-size:.86rem;cursor:pointer;
                  background:#f5f7fa;padding:.3rem .7rem;border-radius:4px;border:1px solid #dde3ea}
.check-list input[type=checkbox]{cursor:pointer}

/* ===== DRAG SORT ===== */
.drag-item{display:flex;align-items:center;gap:.75rem;padding:.6rem .9rem;
           background:#fff;border:1px solid #dde3ea;border-radius:6px;margin-bottom:.5rem;cursor:grab}
.drag-item:active{cursor:grabbing}
.drag-handle{color:#ccc;font-size:1rem}
.drag-item.over{border-color:var(--gold);background:#fffbf0}

@media(max-width:560px){
  .form-grid{grid-template-columns:1fr}
  .site-header{padding:.75rem 1rem}
  .container{margin:1rem auto}
}