/* Mühendislik Hesapları — temadan bağımsız, .odh kapsamında. Renkler CSS değişkenleriyle temaya uyarlanabilir. */
.odh {
	--odh-fg: currentColor;
	--odh-muted: color-mix(in srgb, currentColor 62%, transparent);
	--odh-line: color-mix(in srgb, currentColor 16%, transparent);
	--odh-soft: color-mix(in srgb, currentColor 5%, transparent);
	--odh-accent: #d9661f;
	--odh-warn: #a35200;
	--odh-err: #b3261e;
	--odh-radius: 6px;
	font: inherit;
	color: inherit;
	margin: 1.5em 0;
}
.odh *, .odh *::before, .odh *::after { box-sizing: border-box; }
.odh-loading { color: var(--odh-muted); }

/* Hesap merkezi */
.odh-hub { display: grid; grid-template-columns: minmax(200px, 250px) 1fr; gap: 28px; align-items: start; }
.odh-nav { position: sticky; top: 90px; border: 1px solid var(--odh-line); border-radius: var(--odh-radius); padding: 10px 0; max-height: calc(100vh - 110px); overflow: auto; }
.odh-nav__grp + .odh-nav__grp { margin-top: 6px; }
.odh-nav__g { position: relative; display: flex; align-items: center; gap: 8px; margin: 10px 14px 6px; padding-bottom: 7px; font-size: .76em; letter-spacing: .08em; text-transform: uppercase; color: var(--g-ink); font-weight: 700; }
.odh-nav__g::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--g), color-mix(in srgb, var(--g) 15%, transparent)); transform-origin: left; }
.odh-nav__g em { margin-left: auto; font-style: normal; font-weight: 600; letter-spacing: 0; min-width: 20px; padding: 0 6px; border-radius: 10px; text-align: center; background: color-mix(in srgb, var(--g) 14%, transparent); }
.odh-ico { width: 16px; height: 16px; flex: none; }
.odh-nav__g .odh-ico { width: 22px; height: 22px; padding: 3px; border-radius: 5px; background: var(--g); color: #fff; }
.odh-nav ul { list-style: none; margin: 0; padding: 0; }
.odh-nav a { position: relative; display: block; padding: 7px 16px 7px 22px; color: inherit; text-decoration: none; font-size: .93em; line-height: 1.3; border-left: 3px solid transparent; transition: background .2s, color .2s, border-color .2s, padding .25s cubic-bezier(.2, .7, .2, 1); }
.odh-nav a::before { content: ""; position: absolute; left: 11px; top: 50%; width: 5px; height: 5px; margin-top: -2.5px; border-radius: 50%; background: var(--g); opacity: .45; transition: opacity .2s, transform .25s; }
.odh-nav a:hover { background: color-mix(in srgb, var(--g) 8%, transparent); color: var(--g-ink); padding-left: 25px; }
.odh-nav a:hover::before { opacity: 1; transform: scale(1.3); }
.odh-nav a.is-on { border-left-color: var(--g); background: color-mix(in srgb, var(--g) 13%, transparent); color: var(--g-ink); font-weight: 600; }
.odh-nav a.is-on::before { opacity: 1; }

/* Grup renkleri (Dişliler, Kremayer, Zincir ve kayış, Redüktör, Standart ölçüler, Malzeme). Temalar --odh-gN ile değiştirebilir. */
.odh {
	--odh-g1: #e87628; --odh-g1-ink: #b9561a;
	--odh-g2: #2f6fb3; --odh-g2-ink: #275f9a;
	--odh-g3: #1f8a70; --odh-g3-ink: #17705a;
	--odh-g4: #1c3350; --odh-g4-ink: #1c3350;
	--odh-g5: #c99a06; --odh-g5-ink: #8a6a00;
	--odh-g6: #9a5b2e; --odh-g6-ink: #84491f;
	--g: var(--odh-accent); --g-ink: var(--odh-accent);
}
.odh [data-g="1"] { --g: var(--odh-g1); --g-ink: var(--odh-g1-ink); }
.odh [data-g="2"] { --g: var(--odh-g2); --g-ink: var(--odh-g2-ink); }
.odh [data-g="3"] { --g: var(--odh-g3); --g-ink: var(--odh-g3-ink); }
.odh [data-g="4"] { --g: var(--odh-g4); --g-ink: var(--odh-g4-ink); }
.odh [data-g="5"] { --g: var(--odh-g5); --g-ink: var(--odh-g5-ink); }
.odh [data-g="6"] { --g: var(--odh-g6); --g-ink: var(--odh-g6-ink); }
.odh-pick { display: none; }
@media (max-width: 760px) {
	.odh-hub { grid-template-columns: 1fr; gap: 16px; }
	.odh-nav { display: none; }
	.odh-pick { display: flex; flex-direction: column; gap: 5px; font-size: .86em; font-weight: 600; }
	.odh-pick select { font: inherit; font-weight: 400; font-size: 1rem; color: inherit; background: var(--odh-soft); border: 1px solid var(--odh-line); border-left: 4px solid var(--g); border-radius: 4px; padding: 10px; min-height: 44px; transition: border-color .3s; }
	.odh-pick span { color: var(--g-ink); }
}

/* ---------- Animasyonlar (tema ile aynı eğri: cubic-bezier(.2,.7,.2,1)) ---------- */
@keyframes odh-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes odh-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes odh-fade { from { opacity: 0; } }
@keyframes odh-draw { to { stroke-dashoffset: 0; } }
@keyframes odh-fill { from { fill-opacity: 0; } }
@keyframes odh-spin { from { transform: rotate(-120deg); } to { transform: none; } }
@keyframes odh-flash { from { background: color-mix(in srgb, var(--g) 30%, transparent); } to { background: transparent; } }
.odh-hub--anim .odh-nav__g, .odh-hub--anim .odh-nav li, .odh-hub--anim .odh-panel, .odh-hub--anim .odh-pick { opacity: 0; }
.odh-hub--anim .odh-nav__g::after { transform: scaleX(0); }
.odh-hub--anim.is-in .odh-nav__g, .odh-hub--anim.is-in .odh-nav li { animation: odh-rise .6s cubic-bezier(.2, .7, .2, 1) calc(var(--i, 0) * 35ms) both; }
.odh-hub--anim.is-in .odh-nav__g::after { animation: odh-grow .9s cubic-bezier(.2, .7, .2, 1) calc(var(--i, 0) * 35ms + .25s) both; }
.odh-hub--anim.is-in .odh-nav__g .odh-ico { animation: odh-spin .9s cubic-bezier(.2, .7, .2, 1) calc(var(--i, 0) * 35ms + .1s) both; }
.odh-hub--anim.is-in .odh-panel, .odh-hub--anim.is-in .odh-pick { animation: odh-rise .7s cubic-bezier(.2, .7, .2, 1) .12s both; }
.odh-enter { animation: odh-rise .55s cubic-bezier(.2, .7, .2, 1) both; }
.odh-enter .odh-eyebrow .odh-ico { animation: odh-spin .8s cubic-bezier(.2, .7, .2, 1) .1s both; }
.odh-rise { animation: odh-rise .6s cubic-bezier(.2, .7, .2, 1) var(--d, 0s) both; }
.odh-flash { animation: odh-flash 1.1s ease-out; border-radius: 3px; }
.odh-drawing .d, .odh-drawing .ar, .odh-drawing .dt, .odh-drawing .tx, .odh-drawing .lb, .odh-drawing .c, .odh-drawing .h, .odh-drawing .t { animation: odh-fade .6s ease .9s both; }
.odh-drawing .odh-wm { animation: odh-fade 1.2s ease 1.4s both; }
.odh-nav a:hover .odh-ico, .odh-eyebrow:hover .odh-ico { transform: rotate(20deg); transition: transform .3s; }
@media (prefers-reduced-motion: reduce) {
	.odh *, .odh *::before, .odh *::after { animation: none !important; transition: none !important; }
	.odh-hub--anim .odh-nav__g, .odh-hub--anim .odh-nav li, .odh-hub--anim .odh-panel, .odh-hub--anim .odh-pick { opacity: 1; }
	.odh-hub--anim .odh-nav__g::after { transform: none; }
}

/* Modül */
.odh-mod { border: 1px solid var(--odh-line); border-top: 3px solid var(--g); border-radius: var(--odh-radius); padding: clamp(16px, 3vw, 28px); }
.odh-eyebrow { display: flex; align-items: center; gap: 7px; margin: 0 0 6px; font-size: .74em; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--g-ink); }
.odh-eyebrow .odh-ico { width: 18px; height: 18px; }
.odh-title { margin: 0 0 18px; font-size: 1.3em; line-height: 1.25; }
.odh-sec h4 { padding-left: 9px; border-left: 3px solid var(--g); }
.odh-btn:hover { border-color: var(--g); color: var(--g-ink); }
.odh-mod .odh-fld input:focus, .odh-mod .odh-fld select:focus { outline-color: var(--g); }
.odh-title:focus { outline: none; }
.odh-fields { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 14px 18px; }
.odh-fld { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.odh-fld[hidden] { display: none; }
.odh-fld label { font-size: .86em; font-weight: 600; line-height: 1.3; }
.odh-fld label em { font-weight: 400; font-style: normal; color: var(--odh-muted); }
.odh-help { font-size: .78em; color: var(--odh-muted); }
.odh-fld input, .odh-fld select {
	width: 100%; min-width: 0; font: inherit; font-size: .95em; color: inherit; background: transparent;
	border: 1px solid var(--odh-line); border-radius: 4px; padding: 8px 10px; min-height: 40px;
}
.odh-fld select { background: var(--odh-soft); }
.odh-fld input:focus, .odh-fld select:focus { outline: 2px solid var(--odh-accent); outline-offset: 1px; border-color: transparent; }
.odh-fld [aria-invalid="true"] { border-color: var(--odh-err); outline-color: var(--odh-err); }
.odh-num { display: flex; align-items: center; gap: 6px; }
.odh-unit { font-size: .82em; color: var(--odh-muted); white-space: nowrap; }
.odh-dms { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr auto; align-items: center; gap: 4px; }
.odh-dms b { font-weight: 400; color: var(--odh-muted); }
.odh-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.odh-btn { font: inherit; font-size: .85em; color: inherit; background: transparent; border: 1px solid var(--odh-line); border-radius: 4px; padding: 7px 14px; cursor: pointer; }
.odh-btn:hover { background: var(--odh-soft); }

.odh-msg { margin: 16px 0 0; padding: 10px 14px; border-left: 3px solid var(--odh-err); background: color-mix(in srgb, var(--odh-err) 8%, transparent); font-size: .92em; }
.odh-out { margin-top: 20px; display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; transition: opacity .15s; }
.odh-mod[aria-busy="true"] .odh-out, .odh-mod.is-stale .odh-out { opacity: .45; }
.odh-sec { border: 1px solid var(--odh-line); border-radius: var(--odh-radius); padding: 14px 16px; min-width: 0; }
.odh-sec:has(.odh-grid), .odh-sec--fig { grid-column: 1 / -1; }
.odh-fig { margin: 0; }
.odh-fig .odh-svg { display: block; width: 100%; height: auto; max-height: 70vh; }
.odh-fig:fullscreen { background: Canvas; color: CanvasText; padding: 24px; display: flex; align-items: center; justify-content: center; }
.odh-fig:fullscreen .odh-svg { max-height: 100%; }
.odh-fig-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.odh-sec h4 { margin: 0 0 10px; font-size: .95em; }
.odh-res { width: 100%; border-collapse: collapse; font-size: .9em; }
.odh-res th, .odh-res td { padding: 6px 0; border-bottom: 1px solid var(--odh-line); vertical-align: top; }
.odh-res tr:last-child th, .odh-res tr:last-child td { border-bottom: 0; }
.odh-res th { text-align: left; font-weight: 400; color: var(--odh-muted); padding-right: 12px; }
.odh-res td { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.odh-u { font-weight: 400; color: var(--odh-muted); font-size: .9em; }
.odh-scroll { overflow-x: auto; }
.odh-grid { width: 100%; border-collapse: collapse; font-size: .86em; font-variant-numeric: tabular-nums; }
.odh-grid th, .odh-grid td { padding: 6px 10px; border-bottom: 1px solid var(--odh-line); text-align: right; white-space: nowrap; }
.odh-grid thead th { font-weight: 600; background: var(--odh-soft); }
.odh-grid tbody th { text-align: left; font-weight: 600; }
.odh-grid td:nth-last-child(-n+2) { text-align: left; }
.odh-add { font: inherit; width: 28px; height: 28px; border-radius: 4px; border: 1px solid var(--odh-line); background: transparent; color: inherit; cursor: pointer; }
.odh-add.is-in { background: var(--odh-accent); color: #fff; border-color: var(--odh-accent); }
.odh-warn { margin: 10px 0 0; font-size: .85em; color: var(--odh-warn); }
.odh-note { margin: 10px 0 0; font-size: .8em; color: var(--odh-muted); }
.odh-disc { margin: 18px 0 0; font-size: .78em; color: var(--odh-muted); }
.odh-vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.odh-err { color: var(--odh-err); }
@media print {
	.odh-nav, .odh-pick, .odh-actions, .odh-fig-actions { display: none; }
	.odh-hub { display: block; }
}