/* ==========================================================================
   KARAKIZLI configurator — a product-configuration instrument.
   The model is the subject; the interface is quiet. Every value comes from the theme's tokens
   (space, type, colour, button); each has a fallback so the plugin also works on its own.

   Layout:   [ model stage ............................. ] [ specification panel ]
             [ index tabs: KK-01 · KK-02 · KK-03 …      ]
   Type:     labels 11 · values/options/buttons 14 · model name 24 · price 36 · headline 36 (light)
   ========================================================================== */

.cfg, .dlg, .toast {
  --k-black: var(--black, #171817);
  --k-paper: var(--paper, #F2F0EB);
  --k-white: var(--white, #FFFFFF);
  --k-100:   var(--grey-100, #E9E7E1);
  --k-200:   var(--grey-200, #DEDCD5);
  --k-300:   var(--grey-300, #C8C6BF);
  --k-700:   var(--grey-700, #55564F);
  --k-rule:  var(--rule, rgba(23, 24, 23, .18));
  --k-sans:  var(--font-sans, "Helvetica Neue", Helvetica, "Nimbus Sans", Arial, sans-serif);
  --k-margin: var(--page-margin, 32px);
  --k-head:  var(--header-h, 64px);
  --k-2xs: var(--font-2xs, 11px); --k-xs: var(--font-xs, 12px); --k-sm: var(--font-sm, 14px); --k-base: var(--font-base, 16px);
  --k-xl: var(--font-xl, 24px); --k-2xl: var(--font-2xl, 36px);
  --k-s1: var(--space-1, 4px); --k-s2: var(--space-2, 8px); --k-s3: var(--space-3, 12px); --k-s4: var(--space-4, 16px);
  --k-s5: var(--space-5, 24px); --k-s6: var(--space-6, 32px); --k-s7: var(--space-7, 48px);
  --k-btn-h: var(--button-height, 44px); --k-btn-x: var(--button-padding-x, 24px); --k-field-h: var(--field-height, 48px);
  --k-label: .09em;
  font-family: var(--k-sans); color: var(--k-black); letter-spacing: -.005em; font-size: var(--k-base);
}
.cfg *, .dlg *, .cfg *::before, .dlg *::before { box-sizing: border-box; }
/* :where() keeps this reset at zero specificity so component rules below always win */
.cfg :where(button), .dlg :where(button) { font-family: inherit; color: inherit; letter-spacing: inherit; cursor: pointer; border-radius: 0; }
.cfg [hidden], .dlg [hidden] { display: none !important; }

/* shared micro-type: labels are always 11px uppercase medium */
.plabel, .lbl, .specs dt, .model-line b, .hero-copy .meta, .seg button, .tool, .mcard b, .mcard .badge, .demo-tag, .hint, .trust, .viewer-state, .dlg-form label, .dlg-summary li span:first-child {
  font-size: var(--k-2xs); font-weight: 500; line-height: 1.3; letter-spacing: var(--k-label); text-transform: uppercase;
}

/* ------------------------------------------------------------ stage */
.cfg {
  --panel-w: clamp(340px, 28vw, 420px);
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) var(--panel-w);
  height: calc(100svh - var(--k-head)); min-height: 600px; background: var(--k-200);
  border-bottom: 1px solid var(--k-black);
}
.stage { position: relative; min-width: 0; min-height: 0; border-right: 1px solid var(--k-black); overflow: hidden; }
.viewer { position: absolute; inset: 0 0 72px 0; cursor: grab; touch-action: pan-y; }
.viewer:active { cursor: grabbing; }
.viewer canvas { display: block; }
.viewer-state { position: absolute; inset: 0 0 72px 0; display: flex; align-items: center; justify-content: center; gap: var(--k-s3); color: var(--k-700); pointer-events: none; transition: opacity .4s; }
.viewer-state.done { opacity: 0; }
.spinner { width: var(--k-s4); height: var(--k-s4); border: 1px solid var(--k-300); border-top-color: var(--k-black); border-radius: 50%; animation: kkspin .9s linear infinite; }
@keyframes kkspin { to { transform: rotate(360deg); } }

/* headline: quiet, top-left; the model owns the rest of the stage */
.hero-copy { position: absolute; left: var(--k-margin); top: var(--k-s6); max-width: min(46ch, 70%); z-index: 4; pointer-events: none; }
.hero-copy .meta { margin: 0 0 var(--k-s4); }
.hero-copy h1, .hero-copy .h1like { margin: 0; font-size: var(--k-2xl); font-weight: var(--weight-light, 400); line-height: 1.06; letter-spacing: var(--track-head, -.028em); text-wrap: balance; }
.hero-copy em { font-style: normal; color: inherit; }
.hero-sub { margin: var(--k-s4) 0 0; max-width: 40ch; font-size: var(--k-sm); line-height: 1.5; color: var(--k-700); }

/* view tools — small type, not buttons */
.tools { position: absolute; left: var(--k-margin); bottom: calc(72px + var(--k-s5)); z-index: 5; display: flex; align-items: center; gap: var(--k-s5); flex-wrap: wrap; }
.seg { display: flex; gap: var(--k-s5); }
.seg button, .tool { background: none; border: 0; border-bottom: 1px solid transparent; padding: var(--k-s2) 0; color: var(--k-700); transition: color .18s, border-color .18s; }
.seg button:hover, .tool:hover { color: var(--k-black); }
.seg button[aria-checked="true"], .tool[aria-pressed="true"] { color: var(--k-black); border-bottom-color: var(--k-black); }
.demo-tag, .hint { position: absolute; margin: 0; color: var(--k-700); pointer-events: none; }
.demo-tag { right: var(--k-margin); top: var(--k-s5); }
.hint { right: var(--k-margin); bottom: calc(72px + var(--k-s5)); }

/* model index — tabs along the foot of the stage */
.models { position: absolute; left: 0; right: 0; bottom: 0; height: 72px; display: flex; overflow-x: auto; scrollbar-width: none; background: var(--k-paper); border-top: 1px solid var(--k-black); }
.models::-webkit-scrollbar { display: none; }
.mcard { flex: 0 0 auto; min-width: 200px; display: flex; flex-direction: column; justify-content: center; gap: var(--k-s1); padding: 0 var(--k-s5); text-align: left; background: none; border: 0; border-right: 1px solid var(--k-rule); position: relative; transition: background .18s, color .18s; }
.mcard span { font-size: var(--k-sm); line-height: 1.2; }
.mcard:hover { background: var(--k-100); }
.mcard[aria-current="true"] { background: var(--k-black); color: var(--k-paper); }
.mcard.soon b, .mcard.soon span { opacity: .5; }
.mcard .badge { position: absolute; right: var(--k-s4); top: var(--k-s4); font-style: normal; }
.scroll-cue { display: none; }

/* ------------------------------------------------------------ panel */
.panel { position: relative; z-index: 2; display: flex; flex-direction: column; min-height: 0; background: var(--k-paper); }
.panel-scroll { flex: 1; min-height: 0; overflow-y: auto; padding: var(--k-s5) var(--k-s5) var(--k-s4); scrollbar-width: thin; scrollbar-color: var(--k-300) transparent; }
.model-line { display: flex; justify-content: space-between; align-items: baseline; gap: var(--k-s4); margin: 0 0 var(--k-s5); padding-bottom: var(--k-s4); border-bottom: 1px solid var(--k-black); }
.model-line span { font-size: var(--k-xl); font-weight: var(--weight-light, 400); line-height: 1; letter-spacing: -.02em; text-align: right; }

.params { display: grid; gap: var(--k-s5); counter-reset: p; }
.plabel { display: flex; gap: var(--k-s4); margin-bottom: var(--k-s2); }
.plabel::before { counter-increment: p; content: counter(p, decimal-leading-zero); color: var(--k-700); font-variant-numeric: tabular-nums; }
.steps { display: flex; }
.steps button { flex: 1 1 0; min-width: 0; height: var(--k-btn-h); margin-left: -1px; padding: 0 var(--k-s2); background: transparent; border: 1px solid var(--k-black); font-size: var(--k-sm); font-weight: 500; font-variant-numeric: tabular-nums; transition: background .18s, color .18s; }
.steps button:first-child { margin-left: 0; }
.steps button:hover { background: var(--k-100); }
.steps button[aria-checked="true"] { background: var(--k-black); color: var(--k-paper); position: relative; z-index: 1; }

.specs { margin: var(--k-s6) 0 0; }
.specs div { display: flex; justify-content: space-between; align-items: baseline; gap: var(--k-s4); padding: var(--k-s3) 0; border-top: 1px solid var(--k-rule); }
.specs div:last-child { border-bottom: 1px solid var(--k-rule); }
.specs dt { color: var(--k-700); }
.specs dd { margin: 0; font-size: var(--k-sm); font-weight: 500; font-variant-numeric: tabular-nums lining-nums; text-align: right; }

.panel-foot { padding: var(--k-s5); border-top: 1px solid var(--k-black); background: var(--k-paper); }
.price-row { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--k-s4); margin-bottom: var(--k-s4); }
.price-row .right { text-align: right; }
.lbl { display: block; margin-bottom: var(--k-s2); color: var(--k-700); }
.big { display: block; font-size: var(--k-2xl); font-weight: var(--weight-light, 400); line-height: 1; letter-spacing: -.03em; font-variant-numeric: tabular-nums lining-nums; white-space: nowrap; }
.mid { display: block; font-size: var(--k-sm); font-weight: 500; line-height: 1.3; font-variant-numeric: tabular-nums lining-nums; white-space: nowrap; }

/* buttons: the theme's three levels, restated for standalone use */
.cfg .btn, .dlg .btn {
  display: flex; align-items: center; justify-content: space-between; gap: var(--k-s5); width: 100%; height: var(--k-btn-h); padding: 0 var(--k-btn-x);
  background: var(--k-black); color: var(--k-paper); border: 1px solid var(--k-black); font-size: var(--k-sm); font-weight: 500; line-height: 1; text-align: left; text-decoration: none; white-space: nowrap;
  transition: background .18s, color .18s;
}
.cfg .btn::after, .dlg .btn::after { content: "\2192"; font-weight: 400; transition: transform .18s; }
.cfg .btn:hover, .dlg .btn:hover { background: transparent; color: var(--k-black); }
.cfg .btn:hover::after, .dlg .btn:hover::after { transform: translateX(var(--k-s1)); }
.cfg .btn.line, .dlg .btn.line { background: transparent; color: var(--k-black); }
.cfg .btn.line:hover, .dlg .btn.line:hover { background: var(--k-black); color: var(--k-paper); }
.btn[disabled] { opacity: .5; pointer-events: none; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--k-s2); margin-top: var(--k-s2); }
.row2 .btn { padding: 0 var(--k-s4); gap: var(--k-s2); }

.trust { list-style: none; display: flex; flex-wrap: wrap; gap: var(--k-s1) var(--k-s5); margin: var(--k-s4) 0 var(--k-s3); padding: 0; color: var(--k-700); }
.only-mobile { display: none; }
.foot-links { display: flex; justify-content: space-between; }
.linklike { background: none; border: 0; padding: 0; font-size: var(--k-xs); text-decoration: underline; text-underline-offset: .2em; color: var(--k-700); }
.linklike:hover { color: var(--k-black); }
.next-link { display: block; margin: var(--k-s3) auto 0; }
.cfg-path { margin-top: var(--k-s6); }
.cfg-path .fine { margin: 0 0 var(--k-s3); }
.fine { margin: var(--k-s3) 0 0; font-size: var(--k-xs); line-height: 1.4; color: var(--k-700); }
@media (max-height: 820px) and (min-width: 1025px) { .trust { display: none; } .panel-foot { padding-block: var(--k-s4); } }

/* ------------------------------------------------------------ dialogs */
.dlg { width: min(960px, 100% - var(--k-s6)); max-height: calc(100svh - var(--k-s6)); overflow: auto; padding: 0; background: var(--k-paper); color: var(--k-black); border: 1px solid var(--k-black); border-radius: 0; }
.dlg.small { width: min(480px, 100% - var(--k-s6)); }
.dlg::backdrop { background: rgba(23, 24, 23, .62); }
.dlg-close { position: absolute; right: 0; top: 0; margin: 0; z-index: 2; }
.dlg-close button { width: var(--k-btn-h); height: var(--k-btn-h); background: var(--k-paper); border: 0; border-left: 1px solid var(--k-black); border-bottom: 1px solid var(--k-black); font-size: var(--k-xl); line-height: 1; }
.dlg-close button:hover { background: var(--k-black); color: var(--k-paper); }
.dlg-body { display: grid; grid-template-columns: 5fr 7fr; }
.dlg-left { padding: var(--k-s5); background: var(--k-200); border-right: 1px solid var(--k-black); }
.dlg-left img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; background: var(--k-200); }
.dlg-summary { list-style: none; margin: var(--k-s5) 0 0; padding: 0; font-size: var(--k-sm); }
.dlg-summary li { display: flex; justify-content: space-between; gap: var(--k-s4); padding: var(--k-s2) 0; border-top: 1px solid var(--k-rule); font-variant-numeric: tabular-nums; }
.dlg-summary li span:first-child { color: var(--k-700); }
.dlg-right { display: flex; flex-direction: column; gap: var(--k-s4); padding: var(--k-s5); }
.dlg-right h2, .dlg-form h2 { margin: 0; padding-right: var(--k-s7); font-size: var(--k-2xl); font-weight: var(--weight-light, 400); line-height: 1.06; letter-spacing: -.028em; }
.opts { display: grid; }
.opt { display: grid; grid-template-columns: var(--k-s5) 1fr auto; gap: var(--k-s1) var(--k-s3); align-items: start; margin-top: -1px; padding: var(--k-s4); text-align: left; background: transparent; border: 1px solid var(--k-rule); transition: background .18s, border-color .18s; }
.opt:hover { border-color: var(--k-700); }
.opt[aria-checked="true"] { background: var(--k-white); border-color: var(--k-black); position: relative; z-index: 1; }
.opt .dot { grid-row: 1 / span 3; width: var(--k-s3); height: var(--k-s3); margin-top: var(--k-s1); border: 1px solid var(--k-black); }
.opt[aria-checked="true"] .dot { background: var(--k-black); }
.opt b { font-size: var(--k-base); font-weight: 500; }
.opt .pr { grid-column: 3; grid-row: 1 / span 2; font-size: var(--k-xl); font-weight: var(--weight-light, 400); line-height: 1; letter-spacing: -.028em; font-variant-numeric: tabular-nums lining-nums; }
.opt small { grid-column: 2; font-size: var(--k-sm); color: var(--k-700); }
.opt ul { grid-column: 2 / span 2; display: none; list-style: none; margin: var(--k-s3) 0 0; padding: 0; font-size: var(--k-sm); }
.opt[aria-checked="true"] ul { display: block; }
.opt li { padding: var(--k-s3) 0 var(--k-s3) var(--k-s5); border-top: 1px solid var(--k-rule); position: relative; line-height: 1.4; }
.opt li::before { content: ""; position: absolute; left: 0; top: calc(var(--k-s3) + .65em); width: var(--k-s3); height: 1px; background: var(--k-black); }
.opt.featured::after { content: none; }

.dlg-form { display: grid; gap: var(--k-s4); padding: var(--k-s5); }
.dlg-form label { display: grid; gap: var(--k-s2); color: var(--k-700); }
.dlg-form input:not(.hp), .dlg-form textarea { width: 100%; height: var(--k-field-h); padding: 0 var(--k-s4); background: var(--k-white); color: var(--k-black); border: 1px solid var(--k-300); border-radius: 0; font: inherit; font-size: var(--k-base); letter-spacing: 0; text-transform: none; -webkit-appearance: none; appearance: none; }
.dlg-form textarea { height: auto; min-height: calc(var(--k-field-h) * 2); padding-block: var(--k-s3); }
.dlg-form input:focus, .dlg-form textarea:focus { outline: 0; border-color: var(--k-black); box-shadow: inset 0 0 0 1px var(--k-black); }
.hp { position: absolute !important; left: -9999px; width: 0; height: 0; opacity: 0; }
.toast { position: fixed; left: var(--k-margin); bottom: var(--k-s5); z-index: 1000; max-width: calc(100% - 2 * var(--k-margin)); padding: var(--k-s3) var(--k-s5); background: var(--k-black); color: var(--k-paper); font-size: var(--k-sm); font-weight: 500; opacity: 0; transform: translateY(var(--k-s2)); pointer-events: none; transition: opacity .3s, transform .3s; }
.toast.show { opacity: 1; transform: none; }
.cfg :focus-visible, .dlg :focus-visible { outline: 2px solid var(--k-black); outline-offset: 3px; }
.mcard[aria-current="true"]:focus-visible { outline-color: var(--k-paper); outline-offset: -4px; }
@media (prefers-reduced-motion: reduce) { .spinner { animation: none; } }

/* ------------------------------------------------------- tablet: stacked, panel in two columns */
@media (max-width: 1024px) {
  .cfg { display: block; height: auto; min-height: 0; }
  .stage { height: 64svh; min-height: 440px; border-right: 0; border-bottom: 1px solid var(--k-black); }
  .hero-copy { top: var(--k-s5); }
  .panel-scroll { overflow: visible; padding: var(--k-s5) var(--k-margin) var(--k-s4); }
  .params { grid-template-columns: 1fr 1fr; column-gap: var(--k-s5); }
  .params .param:nth-child(5) { grid-column: 1 / -1; }
  .panel-foot { position: sticky; bottom: 0; z-index: 20; padding: var(--k-s4) var(--k-margin); }
  .panel-foot .next-link, .trust, .foot-links { display: none; }
  .only-mobile { display: grid; }
  .row2.only-mobile { margin: var(--k-s6) 0 var(--k-s3); }
  .foot-links-m { display: block; }
  .mcard { min-width: 160px; }
  .dlg-body { grid-template-columns: 1fr; }
  .dlg-left { padding: var(--k-s4) var(--k-s5); border-right: 0; border-bottom: 1px solid var(--k-black); }
  .dlg-left img { aspect-ratio: 16 / 7; }
  .dlg-summary { display: none; }
}
/* ------------------------------------------------------- mobile: same system, smaller absolute values */
@media (max-width: 700px) {
  .cfg { --k-btn-h: var(--button-height, 48px); }
  .stage { height: 68svh; min-height: 420px; }
  .viewer, .viewer-state { bottom: 56px; }
  .hero-copy { right: var(--k-margin); max-width: none; }
  .hero-sub, .hint, .demo-tag { display: none; }
  .tools { bottom: calc(56px + var(--k-s4)); gap: var(--k-s5); }
  .models { height: 56px; }
  .mcard { min-width: 132px; padding: 0 var(--k-s4); }
  .params { grid-template-columns: 1fr; }
  .big { font-size: var(--k-xl); }
  .price-row { margin-bottom: var(--k-s3); }
  .dlg-right, .dlg-form { padding: var(--k-s5) var(--k-s4); }
  .dlg-right h2, .dlg-form h2 { font-size: var(--k-xl); }
  .toast { left: var(--k-margin); right: var(--k-margin); max-width: none; }
}