.obmi-wrapper { max-width: 620px; margin: 40px auto; padding: 0 15px; }
.obmi-container {
    background: #ffffff;
    border-radius: 20px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.08);
    padding: 35px;
}

.obmi-desc { color: #555; text-align: center; margin-bottom: 25px; font-size: 1.05rem; }

.input-row { display: flex; gap: 15px; margin-bottom: 15px; flex-wrap: wrap; }
.input-group { flex: 1; min-width: 240px; }
.input-group label { display: block; margin-bottom: 6px; font-weight: 600; color: #333; }
.input-group input, .input-group select {
    width: 100%; padding: 14px 16px; border: 2px solid #e0e0e0; border-radius: 12px; font-size: 16px;
}

.obmi-btn.primary {
    width: 100%; padding: 16px; background: linear-gradient(90deg, #007cba, #00a8ff);
    color: white; border: none; border-radius: 12px; font-size: 18px; font-weight: 700;
    cursor: pointer; margin-top: 10px;
}
.obmi-btn.primary:hover { transform: translateY(-2px); }

.info-section { margin-top: 30px; font-size: 0.95rem; color: #444; line-height: 1.6; }

.bmi-modal {
    position: fixed; inset: 0; background: rgba(0,0,0,0.75); display: flex;
    align-items: center; justify-content: center; z-index: 10000; opacity: 0; transition: opacity .3s;
}
.bmi-modal.show { opacity: 1; }

.modal-content {
    background: white; width: 92%; max-width: 520px; border-radius: 20px;
    box-shadow: 0 25px 70px rgba(0,0,0,0.25); overflow: hidden; position: relative;
}

.modal-close {
    position: absolute; top: 15px; right: 20px; font-size: 32px; cursor: pointer; color: #999;
}
.modal-close:hover { color: #333; }

#modal-sonuc { padding: 35px; }
.bmi-buyuk { font-size: 4.2rem; font-weight: 800; line-height: 1; }
.tavsiye-box { background: #f8fafd; padding: 20px; border-radius: 14px; border-left: 6px solid #007cba; margin: 25px 0; }