.skl-login-container { display:flex; justify-content:center; align-items:center; min-height:100vh; background:#f0f4e8; }
.skl-login-card { background:#fff; padding:40px; border-radius:10px; box-shadow:0 10px 30px rgba(0,0,0,0.1); text-align:center; max-width:400px; width:100%; }
.skl-login-logo { width:100px; margin-bottom:20px; }
.skl-login-card h2 { color:#006633; margin-bottom:5px; }
.skl-login-card label { display:block; text-align:left; margin-bottom:5px; font-weight:bold; }
.skl-login-card input { width:100%; padding:10px; margin-bottom:20px; border:1px solid #ddd; border-radius:5px; }
.skl-login-card button { background:#006633; color:#fff; border:none; padding:12px 30px; border-radius:5px; font-size:16px; cursor:pointer; }
.skl-login-card button:hover { background:#004d26; }
.skl-login-error { color:#cc0000; background:#ffe6e6; padding:10px; border-radius:5px; margin-bottom:15px; }
.skl-countdown { display:flex; justify-content:center; gap:15px; margin:30px 0; }
.skl-countdown-item { background:#006633; color:#fff; padding:15px 20px; border-radius:8px; text-align:center; min-width:80px; }
.skl-countdown-item span { font-size:2.5rem; font-weight:bold; display:block; line-height:1; }
.skl-countdown-item small { display:block; margin-top:5px; font-size:0.8rem; }
#skl-countdown-message { text-align:center; font-size:1.2rem; display:none; }
#surat-kelulusan { max-width:800px; margin:30px auto; background:#fff; padding:40px; box-shadow:0 5px 15px rgba(0,0,0,0.1); font-family:'Times New Roman',serif; color:#333; }
.skl-surat-actions { text-align:center; margin:30px 0; }
.skl-btn-utama, .skl-btn-skunder { display:inline-block; padding:12px 25px; border-radius:5px; text-decoration:none; font-weight:bold; margin:5px; }
.skl-btn-utama { background:#d4af37; color:#333; }
.skl-btn-utama:hover { background:#b38f2a; color:#fff; }
.skl-btn-skunder { background:#f0f0f0; color:#333; border:1px solid #ccc; }
.skl-btn-skunder:hover { background:#e0e0e0; }
.kop-surat-img { display:block; max-width:100%; height:auto; margin:0 auto 20px auto; }
.ttd-wrapper { text-align:right; margin-top:40px; }
/* TTD+cap: menutupi sebagian kecil teks */
.ttd-cap-img { max-width:150px; width:100%; height:auto; margin-bottom:-25px; position:relative; z-index:2; display:block; margin-left:auto; }
.ttd-nama { margin-top:0; position:relative; z-index:1; }
@media (max-width:768px) {
  .skl-countdown-item { min-width:60px; padding:10px; }
  .skl-countdown-item span { font-size:1.8rem; }
  .ttd-cap-img { max-width:120px; margin-bottom:-20px; }
}