/* Mühendislik Hesapları — Elmas Dişli görünümü (odh.css üzerine yüklenir). */
.odh {
	--e-void: var(--void, #050B22);
	--e-navy: var(--navy, #0E246D);
	--e-red: var(--red, #D32F2F);
	--e-ink: var(--ink, #141B2D);
	--e-mut: var(--mut, #5F6B7A);
	--e-line: var(--line, #E1E3E8);
	--e-bg: var(--bg, #F3F4F7);
	--e-hd: var(--hd, "Barlow Condensed", "Arial Narrow", Inter, sans-serif);
	--odh-accent: var(--e-red);
	--odh-muted: var(--e-mut);
	--odh-line: var(--e-line);
	--odh-soft: var(--e-bg);
	--odh-warn: #B45309;
	--odh-err: #C62828;
	--odh-radius: 0;
	/* Grup renkleri: Dişliler, Kremayer, Zincir ve kayış, Redüktör, Standart ölçüler, Malzeme */
	--odh-g1: #D32F2F; --odh-g1-ink: #B3261E;
	--odh-g2: #0E246D; --odh-g2-ink: #0E246D;
	--odh-g3: #2456B3; --odh-g3-ink: #1D4690;
	--odh-g4: #FF4B3E; --odh-g4-ink: #C62828;
	--odh-g5: #5F6B7A; --odh-g5-ink: #3E4857;
	--odh-g6: #3B5BA9; --odh-g6-ink: #2C4785;
	color: var(--e-ink);
	margin: 0;
}

/* ---------- Hesap merkezi ---------- */
@media (min-width: 761px) { .odh-hub { grid-template-columns: minmax(230px, 280px) 1fr; gap: 34px; } }
.odh-nav { top: 104px; max-height: calc(100vh - 124px); padding: 0 0 12px; background: #fff; border: 1px solid var(--e-line); border-top: 4px solid var(--e-red); box-shadow: 0 18px 40px -24px rgba(14, 36, 109, .35); }
.odh-nav::before { content: "HESAPLAR"; display: block; padding: 16px 18px 12px; font-family: var(--e-hd); font-weight: 800; font-size: 22px; letter-spacing: 1px; color: var(--e-ink); border-bottom: 1px solid var(--e-line); background: linear-gradient(90deg, var(--e-bg), #fff); }
.odh-nav__g { margin: 16px 18px 6px; font-family: var(--e-hd); font-size: 15px; letter-spacing: .06em; font-weight: 800; }
.odh-nav__g::after { height: 2px; border-radius: 0; }
.odh-nav__g em { border-radius: 0; font-family: Inter, sans-serif; font-size: 11px; }
.odh-nav__g .odh-ico { border-radius: 0; }
.odh-nav a { font-size: 14px; padding: 8px 16px 8px 26px; border-left-width: 4px; }
.odh-nav a::before { left: 13px; border-radius: 0; width: 6px; height: 6px; margin-top: -3px; transform: rotate(45deg); }
.odh-nav a:hover { padding-left: 30px; }
.odh-nav a.is-on { background: linear-gradient(90deg, color-mix(in srgb, var(--g) 14%, #fff), #fff); }

/* ---------- Hesap kartı ---------- */
.odh-mod { background: #fff; border: 1px solid var(--e-line); border-top: 4px solid var(--g); padding: clamp(18px, 3vw, 34px); box-shadow: 0 24px 50px -34px rgba(14, 36, 109, .35); position: relative; overflow: hidden; }
.odh-mod::after { content: ""; position: absolute; right: -60px; top: -60px; width: 180px; height: 180px; background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--g) 22%, transparent) 0 2px, transparent 2px 9px); opacity: .5; pointer-events: none; -webkit-mask: radial-gradient(circle at 70% 30%, #000 30%, transparent 70%); mask: radial-gradient(circle at 70% 30%, #000 30%, transparent 70%); }
.odh-eyebrow { font-size: 13px; letter-spacing: .12em; font-weight: 700; }
.odh-eyebrow .odh-ico { width: 24px; height: 24px; padding: 4px; background: var(--g); color: #fff; }
.odh-title { font-family: var(--e-hd); font-weight: 800; font-size: clamp(28px, 3.4vw, 40px); line-height: 1; text-transform: uppercase; letter-spacing: .3px; color: var(--e-ink); margin: 4px 0 24px; }

/* Alanlar */
.odh-fields { gap: 16px 20px; }
.odh-fld label { font-size: 13px; font-weight: 600; color: var(--e-ink); }
.odh-fld input, .odh-fld select { border-radius: 0; border: 1px solid #CDD2DB; background: #fff; min-height: 46px; padding: 10px 12px; font-size: 15px; transition: border-color .2s, box-shadow .2s; }
.odh-fld select { background: var(--e-bg); }
.odh-fld input:hover, .odh-fld select:hover { border-color: var(--e-navy); }
.odh-fld input:focus, .odh-fld select:focus, .odh-mod .odh-fld input:focus, .odh-mod .odh-fld select:focus { outline: none; border-color: var(--g); box-shadow: 0 0 0 3px color-mix(in srgb, var(--g) 18%, transparent); }
.odh-unit { font-weight: 600; font-size: 12px; color: var(--e-mut); min-width: 34px; }

/* Düğmeler (sitedeki .btn ile aynı dil) */
.odh-actions { margin-top: 22px; gap: 10px; }
.odh-btn { border-radius: 0; font-size: 12px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; padding: 11px 18px; border: 2px solid var(--e-ink); color: var(--e-ink); background: #fff; transition: background .25s, color .25s, border-color .25s; }
.odh-btn:hover, .odh-mod .odh-btn:hover { background: var(--e-ink); color: #fff; border-color: var(--e-ink); }
.odh-actions .odh-btn[data-copy] { background: var(--e-red); border-color: var(--e-red); color: #fff; }
.odh-actions .odh-btn[data-copy]:hover { background: var(--e-ink); border-color: var(--e-ink); }

/* Sonuçlar */
.odh-out { gap: 18px; margin-top: 26px; }
.odh-sec { background: #fff; border: 1px solid var(--e-line); padding: 0 18px 14px; }
.odh-sec h4 { margin: 0 -18px 12px; padding: 12px 18px; border-left: 0; background: var(--e-void); color: #fff; font-family: var(--e-hd); font-weight: 600; font-size: 18px; letter-spacing: .5px; text-transform: uppercase; position: relative; }
.odh-sec h4::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--g); }
.odh-res { font-size: 14px; }
.odh-res th { color: var(--e-mut); }
.odh-res td { color: var(--e-ink); font-weight: 700; }
.odh-res tr:hover th, .odh-res tr:hover td { background: var(--e-bg); }
.odh-grid { font-size: 13px; }
.odh-grid thead th { background: var(--e-navy); color: #fff; font-weight: 600; letter-spacing: .3px; }
.odh-grid tbody tr:nth-child(even) { background: var(--e-bg); }
.odh-grid a { color: var(--e-red); font-weight: 700; border-bottom: 1px solid currentColor; }
.odh-flash { border-radius: 0; }

/* Teknik resim: mavi kâğıt (blueprint) zemin */
.odh-sec--fig { padding-bottom: 16px; }
.odh-fig { background-color: #F7F9FC; background-image: linear-gradient(rgba(14, 36, 109, .06) 1px, transparent 1px), linear-gradient(90deg, rgba(14, 36, 109, .06) 1px, transparent 1px), linear-gradient(rgba(14, 36, 109, .03) 1px, transparent 1px), linear-gradient(90deg, rgba(14, 36, 109, .03) 1px, transparent 1px); background-size: 50px 50px, 50px 50px, 10px 10px, 10px 10px; border: 1px solid var(--e-line); padding: 14px; color: var(--e-navy); }
.odh-fig-actions .odh-btn { padding: 8px 14px; font-size: 11px; border-width: 1px; }

.odh-msg { border-left: 4px solid var(--odh-err); }
.odh-note { font-size: 12.5px; }
.odh-disc { font-size: 12px; padding-top: 14px; border-top: 1px dashed var(--e-line); }

/* Mobil seçim kutusu */
@media (max-width: 760px) {
	.odh-pick { font-family: var(--e-hd); font-size: 16px; text-transform: uppercase; letter-spacing: .5px; }
	.odh-pick select { border-radius: 0; font-family: Inter, sans-serif; text-transform: none; background: #fff; }
	.odh-sec h4 { font-size: 16px; }
}

/* Tema genel stillerinden yalıtım (nav, tablo hücreleri) */
.odh nav.odh-nav { display: block; gap: 0; margin-left: 0; white-space: normal; font-size: inherit; font-weight: 400; letter-spacing: 0; text-transform: none; }
.odh nav.odh-nav a { padding-top: 8px; padding-bottom: 8px; }
.odh nav.odh-nav a::after { content: none; display: none; }
.odh nav.odh-nav a.is-on { color: var(--g-ink); }
.odh table { background: transparent; font-size: inherit; }
.odh .odh-res th, .odh .odh-res td { background: transparent; color: inherit; padding: 7px 0; font-size: 14px; letter-spacing: 0; transition: background .2s; }
.odh .odh-res th { color: var(--e-mut); font-weight: 400; text-align: left; padding-right: 12px; white-space: normal; }
.odh .odh-res td { text-align: right; font-weight: 700; color: var(--e-ink); }
.odh .odh-res td:first-child { font-weight: 700; }
.odh .odh-grid th, .odh .odh-grid td { padding: 8px 10px; font-size: 13px; letter-spacing: 0; }
.odh .odh-grid tbody th { background: transparent; color: var(--e-ink); }
.odh .odh-grid td:first-child { text-align: left; }
@media (max-width: 760px) { .odh nav.odh-nav { display: none; } }