/* Tektaş Konfigüratörü — Jakob Schmuck / Simon & Söhne düzeni */
:root {
  --jk-gold: #c9a24a; --jk-gold-2: #d9bc79; --jk-gold-soft: #f3e9d2; --jk-text: #1f1f1f; --jk-muted: #7a7a7a; --jk-line: #e2e2e2; --jk-bg: #ffffff; --jk-panel: #f6f6f6; --jk-black: #0d0d0d;
  --jk-serif: "Cormorant Garamond", "Cormorant", Georgia, "Times New Roman", serif;
  --jk-sans: "Rubik", "Segoe UI", Roboto, Arial, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--jk-bg); color: var(--jk-text); font-family: var(--jk-sans); font-size: 13.5px; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; font-size: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
input, textarea { font-family: inherit; font-size: inherit; }
[hidden] { display: none !important; }
svg { display: block; }

/* ---------- üst bar & logo ---------- */
.jk-top { position: relative; display: flex; align-items: flex-start; justify-content: space-between; padding: 14px 26px 10px; min-height: 108px; }
.jk-toplink, .jk-topright a { font-size: 11px; letter-spacing: 1.2px; text-transform: uppercase; color: #8a8a8a; }
.jk-toplink:hover, .jk-topright a:hover { color: var(--jk-gold); }
.jk-topright { display: flex; align-items: center; gap: 16px; font-size: 11px; letter-spacing: 1px; color: #8a8a8a; }
.jk-key svg { width: 18px; height: 18px; color: var(--jk-gold); }
.jk-logo { position: absolute; left: 50%; top: 12px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; }
.jk-logo img { max-height: 84px; width: auto; }
.jk-logo-mark svg { width: 38px; height: 38px; color: var(--jk-gold); stroke-width: 1.3; }
.jk-logo-name { font-family: var(--jk-serif); font-size: 24px; letter-spacing: 3px; color: var(--jk-gold); text-transform: uppercase; }
.jk-logo-tag { font-family: var(--jk-serif); font-size: 11px; letter-spacing: 3px; color: var(--jk-gold); text-transform: uppercase; }

/* ---------- ana menü ---------- */
.jk-nav { display: flex; justify-content: center; align-items: stretch; border-top: 1px solid var(--jk-line); border-bottom: 1px solid var(--jk-line); box-shadow: 0 3px 8px rgba(0,0,0,.05); background: #fff; position: relative; z-index: 2; }
.jk-nav a { display: flex; align-items: center; padding: 0 22px; height: 48px; font-size: 12px; letter-spacing: 1.4px; text-transform: uppercase; color: #333; white-space: nowrap; }
.jk-nav a:hover { color: var(--jk-gold); }
.jk-nav a.active { background: var(--jk-gold); color: #fff; }
.jk-nav a.jk-home svg { width: 20px; height: 20px; }

/* ---------- ana düzen ---------- */
.jk-main { display: grid; grid-template-columns: minmax(0, 1.15fr) 150px minmax(0, 0.85fr); gap: 0 18px; padding: 26px 26px 24px; max-width: 1560px; margin: 0 auto; min-height: 560px; }
.jk-view { display: flex; flex-direction: column; min-width: 0; }
.jk-view-head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.jk-view-head h1 { margin: 0 8px 0 0; font-family: var(--jk-serif); font-weight: 400; font-size: 30px; letter-spacing: 2px; text-transform: uppercase; color: #333; }
.jk-tool { width: 38px; height: 38px; border-radius: 50%; border: 1px solid #c8c8c8; display: flex; align-items: center; justify-content: center; color: #6a6a6a; background: #fff; }
.jk-tool:hover { border-color: var(--jk-gold); color: var(--jk-gold); }
.jk-tool.active { background: var(--jk-gold); border-color: var(--jk-gold); color: #fff; }
.jk-tool svg { width: 19px; height: 19px; }
.jk-canvas { position: relative; flex: 1; min-height: 430px; background: var(--jk-bg); overflow: hidden; touch-action: none; }
.jk-canvas canvas { display: block; }
.jk-view:fullscreen { background: #fff; padding: 20px; }
.jk-view:fullscreen .jk-canvas { min-height: 0; }
.jk-view-foot { display: flex; justify-content: center; padding: 10px 0 0; }
.jk-details-btn { display: inline-flex; align-items: center; gap: 8px; border: 1px solid #d5d5d5; background: #f4f4f4; padding: 8px 14px; font-size: 12.5px; color: #333; }
.jk-details-btn:hover { background: #ebebeb; }
.jk-details-btn svg { width: 16px; height: 16px; }

/* adım menüsü */
.jk-steps { display: flex; flex-direction: column; align-items: stretch; padding-top: 6px; }
.jk-steplist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.jk-steplist button { width: 100%; padding: 6px 4px; font-size: 11.5px; letter-spacing: 1px; text-transform: uppercase; color: #333; text-align: center; }
.jk-steplist button:hover { color: var(--jk-gold); }
.jk-steplist button.active { background: var(--jk-gold); color: #fff; }
.jk-stepsep { border-top: 1px solid var(--jk-line); margin: 18px 6px 16px; }
.jk-stepbtns { display: flex; justify-content: center; gap: 8px; }
.jk-round { width: 36px; height: 36px; border-radius: 50%; border: 1px solid #c8c8c8; display: flex; align-items: center; justify-content: center; color: #7a7a7a; background: #fff; }
.jk-round:hover { border-color: var(--jk-gold); color: var(--jk-gold); }
.jk-round.dim { opacity: .45; }
.jk-round svg { width: 17px; height: 17px; }

/* panel */
.jk-panel { min-width: 0; padding-top: 2px; }
.jk-ptitle { display: flex; align-items: center; gap: 12px; }
.jk-ptitle h2 { margin: 0; font-family: var(--jk-serif); font-weight: 400; font-size: 30px; letter-spacing: 2px; text-transform: uppercase; color: #333; }
.jk-info { width: 24px; height: 24px; border-radius: 50%; color: #999; }
.jk-info:hover { color: var(--jk-gold); }
.jk-info svg { width: 22px; height: 22px; }
.jk-plead { margin: 12px 0 18px; font-size: 13px; color: #333; }
.jk-group { margin: 22px 0 10px; font-family: var(--jk-serif); font-weight: 400; font-size: 18px; letter-spacing: 2px; text-transform: uppercase; color: #444; }
.jk-label { font-size: 12.5px; font-weight: 500; margin: 10px 0 6px; display: flex; align-items: center; gap: 8px; }
.jk-dimicon svg { width: 22px; height: 22px; color: #333; }
.jk-hint, .jk-text { font-size: 13px; color: #333; line-height: 1.55; margin: 14px 0; }
.jk-note { font-size: 12px; color: var(--jk-muted); margin: 10px 0 0; }
.jk-sep { border-top: 1px solid var(--jk-line); margin: 18px 0 6px; }
.jk-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
.jk-sideinfo { font-size: 12.5px; color: var(--jk-muted); padding-bottom: 12px; }
.jk-ringname { font-size: 12.5px; font-weight: 500; margin-bottom: 4px; }
.jk-ringname.up { text-transform: uppercase; letter-spacing: .5px; font-weight: 400; color: #333; margin-bottom: 8px; }

.jk-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.jk-tile { border: 1px solid #d6d6d6; background: #fff; padding: 8px 4px 6px; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.jk-tile:hover { border-color: #aaa; }
.jk-tile.active { border-color: var(--jk-gold); box-shadow: inset 0 0 0 1px var(--jk-gold); }
.jk-tile.dim { opacity: .4; }
.jk-tile-l { font-size: 12.5px; }
.jk-tile-i svg { width: 58px; height: 58px; }

.jk-seg { display: inline-flex; border: 1px solid #d6d6d6; }
.jk-seg button { padding: 9px 14px; font-size: 13px; background: #fff; color: #333; border-right: 1px solid #d6d6d6; position: relative; }
.jk-seg button:last-child { border-right: 0; }
.jk-seg button.active { background: var(--jk-gold); color: #fff; }
.jk-seg button.disabled { color: #b5b5b5; cursor: default; }
.jk-new { position: absolute; top: -9px; right: -10px; background: var(--jk-gold); color: #fff; font-size: 9.5px; padding: 2px 7px; border-radius: 10px; letter-spacing: .3px; }
.jk-engtypes { margin-bottom: 14px; }

.jk-input { width: 100%; border: 1px solid #d6d6d6; background: #fff; padding: 9px 10px; font-size: 13px; color: #333; outline: none; }
.jk-input:focus { border-color: var(--jk-gold); }
.jk-input.ro { background: #f2f2f2; color: #888; max-width: 200px; }
textarea.jk-input { resize: vertical; }
.jk-sizeicon { margin: 22px 0 6px; display: flex; justify-content: center; max-width: 200px; }
.jk-sizeicon svg { width: 54px; height: 54px; color: #333; }

/* özel açılır liste */
.jk-dd { position: relative; border: 1px solid #d6d6d6; background: #f2f2f2; width: 100%; }
.jk-dd.open { border-color: var(--jk-gold); background: #fff; z-index: 40; }   /* alt çubuğun (z:30) üstünde kalsın */
.jk-dd-cur { width: 100%; display: flex; align-items: center; gap: 10px; padding: 8px 10px; text-align: left; min-height: 40px; }
.jk-dd-icon svg { width: 18px; height: 18px; color: #777; }
.jk-dd-icon::after { content: ''; display: inline-block; width: 1px; height: 18px; background: #999; margin-left: 8px; transform: rotate(18deg); vertical-align: middle; }
.jk-dd-label { flex: 1; font-size: 13px; color: #333; display: flex; flex-direction: column; }
.jk-dd-label small { color: var(--jk-muted); font-size: 11px; }
.jk-dd-arrow svg { width: 22px; height: 22px; color: var(--jk-gold); }
.jk-dd-list { display: none; position: absolute; left: -1px; right: -1px; top: 100%; z-index: 41; background: #fff; border: 1px solid var(--jk-gold); border-top: 0; max-height: 300px; overflow: auto; box-shadow: 0 10px 24px rgba(0,0,0,.12); }
.jk-dd.open .jk-dd-list { display: block; }
.jk-dd-opt { width: 100%; display: flex; align-items: center; gap: 10px; padding: 8px 10px; text-align: left; border-bottom: 1px solid #f0f0f0; }
.jk-dd-opt:hover { background: #faf6ec; }
.jk-dd-opt.active { background: var(--jk-gold-soft); }
.jk-dd.thumb .jk-dd-cur { min-height: 82px; padding: 0 12px 0 0; }
.jk-dd-thumb { width: 82px; height: 82px; flex: none; background: #fff; border-right: 1px solid #d6d6d6; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.jk-dd-thumb img { width: 100%; height: 100%; object-fit: contain; }
.jk-dd.grid .jk-dd-list { display: none; grid-template-columns: repeat(4, 1fr); gap: 8px; padding: 10px; max-height: 320px; }
.jk-dd.grid.open .jk-dd-list { display: grid; }
.jk-dd.grid .jk-dd-opt { flex-direction: column; border: 1px solid #d6d6d6; padding: 6px 4px; gap: 2px; }
.jk-dd.grid .jk-dd-opt.active { border-color: var(--jk-gold); background: #fff; }
.jk-dd.grid .jk-dd-opt .jk-dd-thumb { border: 0; width: 100%; height: 78px; }
.jk-dd.grid .jk-dd-opt .jk-dd-label { align-items: center; text-align: center; font-size: 12px; }
.jk-dd.grid .jk-dd-opt .jk-dd-label small { display: none; }
.jk-swatch { width: 26px; height: 22px; flex: none; display: inline-block; background: #ccc; clip-path: polygon(0 0, 100% 0, 78% 100%, 0 100%); }
.jk-metalrow { display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: end; }

/* gravür */
.jk-engwrap { position: relative; }
.jk-eng { font-size: 18px; padding: 10px 12px; min-height: 44px; }
.jk-count { position: absolute; right: 0; bottom: -18px; font-size: 12px; color: #888; }
.jk-engtools { display: inline-flex; margin-top: 20px; border: 1px solid #ddd; background: #f4f4f4; }
.jk-engtool { display: flex; align-items: center; gap: 6px; padding: 7px 12px; font-size: 12.5px; font-weight: 500; border-right: 1px solid #ddd; }
.jk-engtool:last-child { border-right: 0; }
.jk-engtool svg { width: 20px; height: 20px; color: var(--jk-gold); }
.jk-engtool .jk-aa { font-family: var(--jk-serif); font-style: italic; font-size: 18px; color: var(--jk-gold); line-height: 1; }
.jk-symglyph { font-size: 18px; color: var(--jk-gold); line-height: 1; }
.jk-appbox { border: 1px solid #ddd; background: #f6f6f6; padding: 12px 14px; }
.jk-appbox-t { font-size: 12px; font-weight: 600; letter-spacing: .3px; margin-bottom: 10px; }
.jk-appbtns { display: flex; gap: 8px; flex-wrap: wrap; }
.jk-appbtn { display: inline-flex; align-items: center; gap: 8px; background: #000; color: #fff; border-radius: 7px; padding: 5px 12px; font-size: 14px; line-height: 1.05; }
.jk-appbtn small { display: block; font-size: 9px; letter-spacing: .3px; }
.jk-appbtn svg { width: 22px; height: 22px; }
.jk-indbox { border: 1px solid var(--jk-gold); padding: 14px; margin-top: 12px; }
.jk-check { display: flex; align-items: center; gap: 8px; color: #9a9a9a; font-size: 13px; }
.jk-check input { accent-color: var(--jk-gold); }
.jk-indname { font-weight: 600; margin: 14px 0 6px; }
.jk-indline { border-top: 1px solid #ddd; margin-bottom: 14px; }
.jk-indbox .jk-btn { display: block; margin: 0 auto; }

/* düğmeler */
.jk-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 9px 16px; border: 1px solid #d6d6d6; background: #fff; color: #333; font-size: 12.5px; font-weight: 500; white-space: nowrap; }
.jk-btn:hover { border-color: var(--jk-gold); color: var(--jk-gold); }
.jk-btn.gold { background: var(--jk-gold); border-color: var(--jk-gold); color: #fff; }
.jk-btn.gold:hover { background: #b8913d; color: #fff; }
.jk-btn.sq { width: 42px; padding: 0; height: 40px; }
.jk-btn.sm { padding: 6px 12px; font-size: 12px; }
.jk-btn svg { width: 18px; height: 18px; }
.jk-btn[disabled] { opacity: .5; cursor: default; }

/* ---------- alt fiyat çubuğu ---------- */
.jk-bottom { position: sticky; bottom: 0; z-index: 30; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 26px; background: #fff; border-top: 1px solid var(--jk-line); box-shadow: 0 -6px 18px rgba(0,0,0,.06); }
.jk-bl { display: flex; align-items: flex-end; gap: 14px; }
.jk-plus { color: var(--jk-gold); margin-bottom: 20px; }
.jk-plus svg { width: 30px; height: 30px; }
.jk-chips { display: flex; gap: 6px; align-items: flex-end; }
.jk-chip { position: relative; display: flex; align-items: center; gap: 10px; padding: 12px 18px 12px 14px; background: #f2f2f2; color: #444; min-width: 128px; }
.jk-chip.active { background: var(--jk-gold); color: #fff; }
.jk-chip.active::before { content: ''; position: absolute; left: 50%; top: -9px; transform: translateX(-50%); border: 9px solid transparent; border-bottom-color: var(--jk-gold); border-top: 0; }
.jk-chip-i svg { width: 34px; height: 34px; stroke-width: 1.2; }
.jk-chip-t { display: flex; flex-direction: column; font-size: 11px; line-height: 1.35; text-align: left; }
.jk-chip-t b { font-weight: 500; letter-spacing: .4px; }
.jk-chip-t span { font-weight: 600; font-size: 12px; }
.jk-br { display: flex; align-items: center; gap: 18px; }
.jk-total { display: flex; flex-direction: column; align-items: flex-end; }
.jk-total-l { font-size: 11px; letter-spacing: 1.2px; color: #9a9a9a; }
.jk-total-v { font-family: var(--jk-serif); font-size: 30px; line-height: 1; color: #333; }
.jk-total-vat { font-size: 11px; color: #9a9a9a; }
.jk-actions { display: flex; gap: 3px; }
.jk-actions .jk-btn { border-radius: 0; height: 40px; }
.jk-jw { padding: 0 16px; }
.jk-jw svg { width: 26px; height: 26px; }

/* ---------- alt bilgi ---------- */
.jk-footer { background: var(--jk-black); color: #d8d8d8; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 26px; gap: 20px; }
.jk-copy { font-size: 12px; font-weight: 600; }
.jk-footer-logo { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.jk-footer-logo img { max-height: 64px; }
.jk-footer-links { display: flex; justify-content: flex-end; gap: 0; }
.jk-footer-links a { font-size: 11px; letter-spacing: 1px; color: #9a9a9a; padding: 0 12px; border-left: 1px solid #444; }
.jk-footer-links a:first-child { border-left: 0; }
.jk-footer-links a:hover { color: var(--jk-gold); }

/* ---------- modallar ---------- */
.jk-modal-bg { position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 100; display: flex; align-items: center; justify-content: center; padding: 20px; }
.jk-modal { position: relative; background: #fff; width: min(620px, 96vw); max-height: 92vh; overflow: auto; padding: 24px 28px 26px; box-shadow: 0 30px 80px rgba(0,0,0,.35); }
.jk-modal.wide { width: min(760px, 96vw); }
.jk-modal.rings { width: min(820px, 96vw); min-height: 420px; }
.jk-modal-x { position: absolute; right: 14px; top: 14px; width: 30px; height: 30px; color: #333; }
.jk-modal-x svg { width: 22px; height: 22px; }
.jk-modal-t { margin: 0 0 14px; font-family: var(--jk-serif); font-weight: 400; font-size: 26px; letter-spacing: 2px; text-transform: uppercase; color: #333; }
.jk-modal-actions { display: flex; gap: 8px; margin-top: 18px; flex-wrap: wrap; }
.jk-code { min-height: 22px; font-size: 13px; margin: 8px 0; color: #333; word-break: break-all; }
.jk-sharelink { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.jk-sharebtns { display: flex; gap: 8px; margin-top: 10px; }
/* detaylar */
.jk-sum-h { text-align: center; font-size: 15px; font-weight: 600; margin: 4px 0 10px; }
.jk-sum { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.jk-sum td { padding: 6px 4px; border-bottom: 1px solid #e6e6e6; vertical-align: top; }
.jk-sum td:first-child { width: 36%; color: #333; }
.jk-sum tr.jk-sec td { font-weight: 600; border-bottom: 1px solid #333; padding-top: 12px; }
.jk-sum tr.jk-sec td:last-child { border-bottom: 1px solid #333; }
.jk-spot { border: 1px solid #ddd; padding: 8px 10px; font-size: 11.5px; color: #555; }
.jk-spot b { font-family: var(--jk-serif); font-size: 13px; letter-spacing: 1px; color: #333; }
.jk-spot-text { font-size: 18px; color: #333; margin-top: 4px; }
.jk-sum-price { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 10px 4px; border-bottom: 2px solid #333; }
.jk-sum-price small { color: var(--jk-muted); }
.jk-sum-total { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-top: 14px; font-size: 14px; }
.jk-sum-total b { font-family: var(--jk-serif); font-size: 26px; }
.jk-sum-total small { color: var(--jk-muted); }
/* yüzük yönetimi */
.jk-rings-head { display: inline-flex; align-items: center; gap: 8px; border: 1px solid #ddd; background: #f4f4f4; padding: 6px 12px; font-size: 12.5px; margin: 10px 0 14px; }
.jk-rings-count { width: 18px; height: 18px; border-radius: 50%; background: #ddd; color: #333; font-size: 11px; display: inline-flex; align-items: center; justify-content: center; }
.jk-rcards { display: flex; gap: 14px; flex-wrap: wrap; min-height: 280px; align-content: flex-start; }
.jk-rcard { width: 156px; border: 1px solid #ddd; padding: 12px 10px; display: flex; flex-direction: column; gap: 6px; }
.jk-rcard.active { border-color: var(--jk-gold); }
.jk-rcard-t { text-align: center; font-size: 12px; }
.jk-rcard-i { display: flex; justify-content: center; margin: 6px 0 10px; }
.jk-rcard-i svg { width: 90px; height: 90px; color: #bbb; stroke-width: 1; }
.jk-rcard-row { display: flex; align-items: center; gap: 6px; font-size: 12px; border-bottom: 1px solid #e5e5e5; padding: 4px 0; text-align: left; }
.jk-rcard-row .ic svg { width: 16px; height: 16px; color: #555; }
.jk-rcard-row input { border: 0; outline: none; width: 100%; font-weight: 600; font-size: 12px; background: transparent; }
.jk-rcard .jk-btn { margin-top: 8px; }
.jk-rings-foot { display: flex; justify-content: center; border-top: 1px solid #e5e5e5; padding-top: 14px; margin-top: 14px; }
/* sembol/font seçici */
.jk-symgrid { display: flex; gap: 8px; flex-wrap: wrap; }
.jk-symopt { width: 52px; height: 52px; border: 1px solid #ddd; font-size: 22px; color: #333; }
.jk-symopt.active { border-color: var(--jk-gold); color: var(--jk-gold); }
.jk-fontlist { display: flex; flex-direction: column; }
.jk-fontopt { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 8px; border-bottom: 1px solid #eee; text-align: left; }
.jk-fontopt.active { background: var(--jk-gold-soft); }
.jk-fontopt .n { font-size: 12.5px; color: #555; }
.jk-fontopt .p { font-size: 22px; }
/* kuyumcular */
.jk-jsearch { display: grid; grid-template-columns: 1fr auto auto; gap: 8px; margin-bottom: 14px; }
.jk-jlist { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.jk-jcard { border: 1px solid #e2e2e2; padding: 12px; font-size: 12.5px; line-height: 1.5; }
.jk-jcard b { display: block; margin-bottom: 4px; }
.jk-link { display: inline-flex; align-items: center; gap: 4px; color: var(--jk-gold); margin-top: 6px; }
.jk-link svg { width: 16px; height: 16px; }

/* ---------- yardımcı ---------- */
.jk-toast { position: fixed; left: 50%; bottom: 96px; transform: translateX(-50%) translateY(10px); background: #1f1f1f; color: #fff; padding: 10px 16px; font-size: 13px; z-index: 200; opacity: 0; transition: .2s; }
.jk-toast.show { opacity: 1; transform: translateX(-50%); }
.jk-loading { min-height: 60vh; display: flex; align-items: center; justify-content: center; color: var(--jk-muted); }
.jk-loading.err { color: #b42318; }
.jk-spin { width: 44px; height: 44px; border-radius: 50%; border: 3px solid #eee; border-top-color: var(--jk-gold); animation: jk-spin 1s linear infinite; }
@keyframes jk-spin { to { transform: rotate(360deg); } }

/* el görünümü (handview.js) */
.cnf-handview[hidden] { display: none; }
.cnf-hv-modal { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; }
.cnf-hv-backdrop { position: absolute; inset: 0; background: rgba(20, 22, 26, .62); }
.cnf-hv-dialog { position: relative; background: #fff; padding: 12px; border-radius: 6px; box-shadow: 0 12px 40px rgba(0,0,0,.35); max-width: calc(100vw - 24px); max-height: calc(100vh - 24px); animation: cnfHvIn .18s ease-out; }
@keyframes cnfHvIn { from { opacity: 0; transform: scale(.97); } to { opacity: 1; transform: none; } }
.cnf-hv-close { position: absolute; top: 16px; right: 16px; width: 36px; height: 36px; border: 0; border-radius: 50%; background: rgba(255,255,255,.85); color: #444; font-size: 26px; line-height: 36px; cursor: pointer; box-shadow: 0 1px 6px rgba(0,0,0,.2); z-index: 2; }
.cnf-hv-close:hover { background: #fff; color: #000; }
.cnf-handview-canvas { display: block; max-width: 100%; max-height: calc(100vh - 48px); }
.cnf-handview-hint { position: absolute; right: 16px; bottom: 14px; font-size: 11px; color: #777; }
.cnf-hv-editor { position: absolute; right: 12px; top: 12px; z-index: 3; width: 290px; max-height: calc(100% - 24px); overflow: auto; background: rgba(255,255,255,.96); border: 1px solid #d9dde2; border-radius: 6px; padding: 8px 10px; font-size: 11px; box-shadow: 0 4px 18px rgba(0,0,0,.12); }
.cnf-hv-editor-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.cnf-hv-editor-head button, .cnf-hv-editor-foot button { border: 1px solid #c8ccd2; background: #fff; border-radius: 4px; padding: 3px 8px; cursor: pointer; font-size: 11px; }
.cnf-hv-editor summary { cursor: pointer; font-weight: 600; margin: 6px 0 4px; }
.cnf-hv-editor label { display: grid; grid-template-columns: 78px 1fr 44px; align-items: center; gap: 6px; margin: 2px 0; }
.cnf-hv-editor input[type=range] { width: 100%; }
.cnf-hv-editor input[type=number] { width: 70px; grid-column: 2 / 4; }
.cnf-hv-editor-foot { display: flex; gap: 6px; margin-top: 8px; }
@keyframes cnfHvIn { from { opacity: 0; transform: scale(.97); } to { opacity: 1; transform: none; } }

/* ---------- mobil ---------- */
@media (max-width: 1100px) {
  .jk-main { grid-template-columns: minmax(0, 1fr) 130px minmax(0, 1fr); gap: 0 12px; padding: 18px 16px; }
  .jk-view-head h1, .jk-ptitle h2 { font-size: 24px; }
  .jk-nav a { padding: 0 12px; font-size: 11px; }
}
@media (max-width: 860px) {
  .jk-top { min-height: 96px; padding: 10px 14px; }
  .jk-toplink, .jk-topright a { display: none; }
  .jk-nav { overflow-x: auto; justify-content: flex-start; scrollbar-width: none; }
  .jk-nav::-webkit-scrollbar { display: none; }
  .jk-main { display: block; padding: 10px 12px 0; min-height: 0; }
  .jk-view { position: sticky; top: 0; z-index: 5; background: #fff; }
  .jk-view-head h1 { font-size: 20px; }
  .jk-canvas { min-height: 0; height: 62vw; max-height: 360px; aspect-ratio: auto; }
  .jk-view-foot { padding: 6px 0; }
  .jk-steps { padding: 6px 0 10px; }
  .jk-steplist { flex-direction: row; overflow-x: auto; gap: 2px; scrollbar-width: none; }
  .jk-steplist li { flex: 1 0 auto; }
  .jk-steplist button { padding: 8px 10px; font-size: 10.5px; white-space: nowrap; }
  .jk-stepsep { display: none; }
  .jk-stepbtns { justify-content: flex-end; margin-top: 8px; }
  .jk-panel { padding-bottom: 20px; }
  .jk-ptitle h2 { font-size: 22px; }
  .jk-row2, .jk-metalrow { grid-template-columns: 1fr; }
  .jk-dd.grid .jk-dd-list { grid-template-columns: repeat(3, 1fr); }
  .jk-bottom { padding: 8px 10px; gap: 8px; flex-wrap: wrap; }
  .jk-bl { order: 2; width: 100%; overflow-x: auto; }
  .jk-br { order: 1; width: 100%; justify-content: space-between; }
  .jk-total-v { font-size: 22px; }
  .jk-jw span { display: none; }
  .jk-jw { width: 42px; padding: 0; }
  .jk-chip { min-width: 110px; padding: 8px 12px; }
  .jk-plus { margin-bottom: 8px; }
  .jk-footer { grid-template-columns: 1fr; text-align: center; padding: 20px 14px; }
  .jk-footer-links { justify-content: center; }
  .jk-modal { padding: 20px 16px; }
}
@media print { .jk-bottom, .jk-nav, .jk-steps, .jk-panel, .jk-top, .jk-footer { display: none !important; } }