*{box-sizing:border-box}
:root{font-family:Arial,Helvetica,sans-serif;color:#20242a;background:#f3f5f7}
body{margin:0;min-height:100vh;background:linear-gradient(135deg,#eef2f5,#ffffff)}
.page{padding:28px 14px}
.card{width:min(960px,100%);margin:auto;background:#fff;border:1px solid #e1e5e9;border-radius:20px;box-shadow:0 12px 40px rgba(0,0,0,.08);overflow:hidden}
.header{padding:34px 34px 24px;background:#20262d;color:#fff}
.eyebrow{font-size:12px;letter-spacing:1.6px;opacity:.65;margin-bottom:8px}
h1{margin:0;font-size:clamp(25px,5vw,40px);letter-spacing:.5px}
.header p{margin:10px 0 0;color:#d7dde2}
.form{padding:30px 34px;display:grid;grid-template-columns:1fr 1fr;gap:20px}
.field{display:flex;flex-direction:column;gap:8px}
.field:nth-child(3),.field:nth-child(4){grid-column:span 1}
label{font-weight:700;font-size:14px}
input[type=text],input[type=date]{width:100%;height:48px;border:1px solid #cfd5da;border-radius:10px;padding:0 14px;font-size:16px;outline:none;background:#fff}
input:focus{border-color:#606b75;box-shadow:0 0 0 3px rgba(60,70,80,.1)}
small{font-size:12px;color:#737b83}
.gender{height:48px;display:flex;align-items:center;gap:18px;border:1px solid #cfd5da;border-radius:10px;padding:0 14px}
.gender label{font-weight:500}
button{grid-column:1/-1;height:50px;border:0;border-radius:11px;background:#20262d;color:#fff;font-size:16px;font-weight:700;cursor:pointer}
button:hover{background:#101419}
.alert{margin:0 34px 25px;padding:14px 16px;background:#fff1f1;border:1px solid #efc5c5;color:#9d2828;border-radius:10px}
.result{border-top:1px solid #e5e8eb;padding:28px 34px}
.result-title{font-size:18px;font-weight:800;margin-bottom:16px}
.summary{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-bottom:22px}
.summary div{background:#f5f7f8;border:1px solid #e4e7ea;border-radius:10px;padding:11px}
.summary span{display:block;font-size:11px;color:#737b83;margin-bottom:4px}
.summary strong{font-size:14px}
.ramalan-box{border:1px solid #dfe3e6;border-radius:12px;padding:20px;background:#fbfcfc}
.ramalan-box p{margin:0 0 18px;line-height:1.72;font-size:15px}
.ramalan-box p:last-of-type{margin-bottom:0}
.ramalan-box b{font-weight:700}
.disclaimer{margin-top:22px;padding-top:15px;border-top:1px dashed #cfd5da;color:#727a82;font-size:12px;line-height:1.5}
footer{text-align:center;padding:18px 20px;color:#858c93;font-size:12px;border-top:1px solid #edf0f2}
@media(max-width:700px){
 .page{padding:10px}
 .header,.form,.result{padding-left:18px;padding-right:18px}
 .form{grid-template-columns:1fr}
 .field:nth-child(3),.field:nth-child(4){grid-column:auto}
 .summary{grid-template-columns:1fr 1fr}
}
@media(max-width:430px){
 .summary{grid-template-columns:1fr}
 .gender{gap:12px}
}



/* Pesan penutup mengambil font/ukuran dasar yang sama dengan ramalan. */
.penutup-ramalan {
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px dashed #cbd5e1;
}

.penutup-judul {
    margin-bottom: 8px;
    font-weight: 700;
}

.penutup-isi {
    line-height: 1.7;
}