/**
 * BMI Hesaplayıcı - stil dosyası
 * Telif Hakkı (c) 2026 Sinan Gürses. Tüm hakları saklıdır.
 *
 * Renk/boyutlar CSS değişkenleridir; admin ayarları bunları inline override eder.
 */

.bmih-wrap {
	--bmih-bg: #ffffff;
	--bmih-text: #1a1f36;
	--bmih-muted: #6b7280;
	--bmih-border: #d8dee9;
	--bmih-accent: #4f6ef7;
	--bmih-accent-text: #ffffff;
	--bmih-radius: 16px;
	--bmih-width: 420px;
	--bmih-under: #3b82f6;
	--bmih-normal: #22c55e;
	--bmih-over: #f59e0b;
	--bmih-obese: #ef4444;

	max-width: var(--bmih-width);
	margin: 1.5em auto;
	padding: 1.5em;
	border-radius: var(--bmih-radius);
	background: var(--bmih-bg);
	box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
	color: var(--bmih-text);
	box-sizing: border-box;
}

.bmih-wrap *,
.bmih-wrap *::before,
.bmih-wrap *::after { box-sizing: border-box; }

.bmih-topbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75em;
	margin-bottom: 1em;
}

.bmih-title {
	margin: 0;
	font-size: 1.25rem;
	font-weight: 700;
}

.bmih-lang {
	padding: 0.35em 0.5em;
	border: 1px solid var(--bmih-border);
	border-radius: 8px;
	background: rgba(0, 0, 0, 0.02);
	font-size: 0.85rem;
	cursor: pointer;
	color: var(--bmih-text);
}

.bmih-field { margin-bottom: 1em; }

.bmih-field label {
	display: block;
	margin-bottom: 0.4em;
	font-size: 0.9rem;
	font-weight: 600;
}

.bmih-field input {
	width: 100%;
	padding: 0.7em 0.9em;
	border: 1px solid var(--bmih-border);
	border-radius: 10px;
	font-size: 1rem;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
	background: var(--bmih-bg);
	color: var(--bmih-text);
}

.bmih-field input:focus {
	outline: none;
	border-color: var(--bmih-accent);
	box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.06);
}

.bmih-btn {
	width: 100%;
	padding: 0.85em 1em;
	border: 0;
	border-radius: 10px;
	background: var(--bmih-accent);
	color: var(--bmih-accent-text);
	font-size: 1rem;
	font-weight: 700;
	cursor: pointer;
	transition: filter 0.15s ease, transform 0.05s ease;
}

.bmih-btn:hover { filter: brightness(0.92); }
.bmih-btn:active { transform: translateY(1px); }

.bmih-result {
	margin-top: 1.5em;
	padding-top: 1.2em;
	border-top: 1px solid rgba(0, 0, 0, 0.06);
	text-align: center;
}

/* ---- SVG kadran (gauge) ---- */
.bmih-gauge {
	position: relative;
	width: 100%;
	max-width: 260px;
	margin: 0 auto;
}

.bmih-gauge svg {
	width: 100%;
	height: auto;
	display: block;
	overflow: visible;
}

.bmih-arc { fill: none; stroke-width: 16; stroke-linecap: butt; }
.bmih-arc-under  { stroke: var(--bmih-under); }
.bmih-arc-normal { stroke: var(--bmih-normal); }
.bmih-arc-over   { stroke: var(--bmih-over); }
.bmih-arc-obese  { stroke: var(--bmih-obese); }

.bmih-needle {
	transition: transform 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.bmih-needle polygon { fill: var(--bmih-text); }
.bmih-hub-out { fill: var(--bmih-text); }
.bmih-hub-in  { fill: var(--bmih-bg); }

/* Skor: kadranın ALTINDA (çakışma yok) */
.bmih-gauge-value {
	margin-top: 0.6em;
	text-align: center;
}

.bmih-value {
	font-size: 2.2rem;
	font-weight: 800;
	line-height: 1;
}

.bmih-unit {
	margin-left: 0.25em;
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--bmih-muted);
}

.bmih-category {
	margin-top: 0.4em;
	font-size: 1.1rem;
	font-weight: 700;
}

/* ---- Renkli kategori çubuğu ---- */
.bmih-bar-wrap { margin: 1.1em 0 0.4em; }

.bmih-bar {
	position: relative;
	height: 12px;
	border-radius: 999px;
	background: linear-gradient(90deg,
		var(--bmih-under) 0%, var(--bmih-under) 14%,
		var(--bmih-normal) 14%, var(--bmih-normal) 40%,
		var(--bmih-over) 40%, var(--bmih-over) 60%,
		var(--bmih-obese) 60%, var(--bmih-obese) 100%);
	overflow: visible;
}

.bmih-marker {
	position: absolute;
	top: 50%;
	left: 0;
	width: 20px;
	height: 20px;
	margin: -10px 0 0 -10px;
	border-radius: 50%;
	background: var(--bmih-text);
	border: 3px solid var(--bmih-bg);
	box-shadow: 0 1px 5px rgba(0, 0, 0, 0.35);
	transition: left 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.bmih-bar-labels {
	display: flex;
	justify-content: space-between;
	margin-top: 0.4em;
	font-size: 0.65rem;
	font-weight: 600;
	color: var(--bmih-muted);
}

.bmih-note {
	margin: 0.6em 0 0;
	font-size: 0.85rem;
	color: var(--bmih-muted);
}

.bmih-error { color: var(--bmih-obese); font-weight: 600; }

.bmih-credit {
	margin: 1.2em 0 0;
	text-align: center;
	font-size: 0.75rem;
	color: var(--bmih-muted);
	opacity: 0.8;
}

/* Kategori metni renkleri */
.bmih-cat-under  { color: var(--bmih-under); }
.bmih-cat-normal { color: var(--bmih-normal); }
.bmih-cat-over   { color: var(--bmih-over); }
.bmih-cat-obese  { color: var(--bmih-obese); }

/* RTL (Arapça) */
.bmih-wrap[dir="rtl"] { text-align: right; }
.bmih-wrap[dir="rtl"] .bmih-topbar { flex-direction: row-reverse; }

/* Görsel gizleme yardımcıları (admin/shortcode) */
.bmih-hide-gauge .bmih-gauge { display: none; }
.bmih-hide-bar .bmih-bar-wrap { display: none; }
.bmih-hide-credit .bmih-credit { display: none; }