/* =====================================================================
   ClaretArt Studio — Kartvizit tasarım aracı
   ===================================================================== */

.kv-sec { padding-top: clamp(24px, 3vw, 40px); }

.kv {
  --kv-line: var(--c-g300);
  --kv-blue: #2F7BF5;
  border: 1px solid var(--kv-line);
  background: var(--c-surface);
  font-family: var(--ff-body);
}
:where(.kv) button { font: inherit; color: inherit; cursor: pointer; }
.kv button, .kv label { -webkit-tap-highlight-color: transparent; }
.kv [hidden] { display: none !important; }

/* ---------- Üst çubuk ---------- */
.kv-bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px;
  padding: 12px 16px; border-bottom: 1px solid var(--kv-line); background: #FCFBFA;
}
.kv-bar__end { display: flex; gap: 6px; margin-left: auto; }

.kv-seg { display: inline-flex; border: 1px solid var(--kv-line); border-radius: var(--radius); background: #fff; }
.kv-seg > button {
  padding: 9px 14px; font-size: 11.5px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase;
  background: transparent; border: 0; color: var(--c-g600); transition: background .2s, color .2s;
}
.kv-seg > button + button { border-left: 1px solid var(--kv-line); }
.kv-seg > button:hover { color: var(--c-ink); }
.kv-seg > button.is-active { background: var(--c-ink); color: #fff; }
.kv-seg--mode > button.is-active { background: var(--c-primary); }
.kv-seg--icons > button { padding: 7px 11px; display: grid; place-items: center; }

.kv-toggle { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--c-g900); cursor: pointer; user-select: none; }
.kv-toggle input { width: 16px; height: 16px; accent-color: var(--c-primary); }

.kv-ibtn {
  width: 36px; height: 36px; display: grid; place-items: center;
  border: 1px solid var(--kv-line); border-radius: var(--radius); background: #fff; color: var(--c-g900);
  transition: border-color .2s, color .2s, background .2s;
}
.kv-ibtn:hover:not(:disabled) { border-color: var(--c-ink); }
.kv-ibtn:disabled { opacity: .35; cursor: default; }
.kv-ibtn.is-active { color: var(--c-primary); background: var(--c-g100); }

/* ---------- Ana alan ---------- */
.kv-main { display: grid; grid-template-columns: minmax(0, 1fr) 380px; }

.kv-canvas {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: clamp(24px, 4vw, 56px) clamp(16px, 3vw, 44px);
  background-color: #ECEAE6;
  background-image: radial-gradient(rgba(0,0,0,.06) 1px, transparent 1px);
  background-size: 14px 14px;
  min-width: 0;
}

.kv-stage {
  position: relative; width: 100%; max-width: 640px;
  aspect-ratio: var(--kv-ratio, 91 / 61);
  box-shadow: 0 1px 2px rgba(0,0,0,.08), 0 22px 44px -22px rgba(0,0,0,.42);
  background: #fff;
  opacity: 0; transition: opacity .35s var(--ease);
}
.kv.is-ready .kv-stage { opacity: 1; }
.kv-stage.is-v { max-width: 360px; }
/* Sitenin dekoratif imleci kart üzerinde dikkat dağıtmasın */
body:has(#kv-svg:hover) .cursor, body:has(#kv-svg:hover) .cursor-dot { opacity: 0; }
#kv-svg { display: block; width: 100%; height: 100%; user-select: none; -webkit-user-select: none; }

.kv:not(.is-free) .kv-content [data-id] { cursor: text; }
.kv.is-free #kv-svg { touch-action: none; }
.kv.is-free .kv-content [data-id] { cursor: move; }
.kv-handle { fill: #fff; stroke: var(--kv-blue); stroke-width: .22; cursor: nwse-resize; }
.kv-overlay .kv-handle[data-h="p1"], .kv-overlay .kv-handle[data-h="p2"] { cursor: crosshair; }
.kv-out { filter: drop-shadow(0 0 .35px #E0457B) drop-shadow(0 0 .35px #E0457B); }

.kv-backoff {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  background: rgba(251,250,248,.93); text-align: center; padding: 20px;
}
.kv-backoff p { font-size: .92rem; color: var(--c-g600); margin: 0; }
.kv-backoff label { cursor: pointer; }

.kv-warn {
  width: 100%; max-width: 640px; margin: 16px 0 0; padding: 9px 14px;
  font-size: .84rem; line-height: 1.5; color: #8E2A20; background: #FCF3F2; border-left: 3px solid #C0392B;
}

.kv-under { width: 100%; max-width: 640px; margin-top: 18px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; }
.kv-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 11px; letter-spacing: .04em; color: var(--c-g600); }
.kv-legend span { display: inline-flex; align-items: center; gap: 7px; }
.kv-legend i { display: inline-block; width: 16px; height: 10px; }
.kv-legend__trim  { border: 1px solid #E0457B; }
.kv-legend__safe  { border: 1px dashed #3A86C8; }
.kv-legend__bleed { background: rgba(200,200,206,.8); }

.kv-tools { display: flex; gap: 6px; }
.kv-tool {
  display: inline-flex; align-items: center; gap: 7px; padding: 8px 12px;
  font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; font-weight: 500;
  background: #fff; border: 1px solid var(--kv-line); border-radius: var(--radius);
  transition: border-color .2s, color .2s;
}
.kv-tool:hover { border-color: var(--c-primary); color: var(--c-primary); }

.kv-canvas:has(.kv-stage.is-v) .kv-under { justify-content: center; }
.kv-draft { width: 100%; max-width: 640px; margin: 14px 0 0; font-size: .8rem; color: var(--c-g600); }

/* ---------- Sağ panel ---------- */
.kv-panel { border-left: 1px solid var(--kv-line); display: flex; flex-direction: column; min-width: 0; }
.kv-tabs { display: grid; grid-template-columns: repeat(4, 1fr); border-bottom: 1px solid var(--kv-line); }
.kv-tabs button {
  padding: 15px 6px 13px; background: transparent; border: 0; border-bottom: 2px solid transparent;
  font-size: 11px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--c-g600);
  transition: color .2s, border-color .2s;
}
.kv-tabs button:hover { color: var(--c-ink); }
.kv-tabs button.is-active { color: var(--c-primary); border-bottom-color: var(--c-primary); }

.kv-pane { padding: 20px; overflow-y: auto; max-height: 660px; }

.kv-label {
  display: block; margin: 20px 0 10px;
  font-size: 10.5px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--c-g600);
}
.kv-pane > .kv-label:first-child { margin-top: 0; }
.kv-hint { font-size: .8rem; line-height: 1.6; color: var(--c-g600); margin: 14px 0 0; }
.kv-hint b { color: var(--c-ink); font-weight: 600; }
.kv-err { font-size: .82rem; color: #C0392B; margin: 10px 0 0; }

/* Şablon küçük resimleri */
.kv-tpls { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.kv-tpl {
  display: flex; flex-direction: column; gap: 8px; padding: 10px 10px 9px;
  background: #F4F2EF; border: 1px solid transparent; border-radius: var(--radius); text-align: left;
  transition: border-color .2s, background .2s;
}
.kv-tpl:hover { border-color: var(--kv-line); background: #EFECE8; }
.kv-tpl.is-active { border-color: var(--c-primary); background: #fff; box-shadow: inset 0 0 0 1px var(--c-primary); }
.kv-tpl__svg { display: block; width: 100%; height: 96px; filter: drop-shadow(0 4px 8px rgba(0,0,0,.12)); }
.kv-tpl__name { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; font-weight: 500; color: var(--c-g900); }

/* Bilgi alanları */
.kv-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.kv-f { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 6px; }
.kv-f--half { grid-column: auto; }
.kv-f > span { font-size: 10.5px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--c-g600); }
.kv-f input, .kv-f textarea, .kv-in {
  width: 100%; padding: 10px 12px; font: inherit; font-size: .92rem; color: var(--c-ink);
  background: #fff; border: 1px solid var(--kv-line); border-radius: var(--radius);
  transition: border-color .2s;
}
.kv-f textarea, textarea.kv-in { resize: vertical; min-height: 64px; line-height: 1.5; }
.kv-f input:focus, .kv-f textarea:focus, .kv-in:focus { outline: 0; border-color: var(--c-primary); }
.kv-f input::placeholder, .kv-f textarea::placeholder { color: #B4B1AD; }
select.kv-in { appearance: none; padding-right: 30px; cursor: pointer;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%236B6B72' stroke-width='1.3'/%3E%3C/svg%3E") no-repeat right 11px center; }

/* Logo */
.kv-logo { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--kv-line); }
.kv-logo__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.kv-logo__head .kv-label { margin: 0; }
.kv-logo__row { display: flex; align-items: center; gap: 12px; }
.kv-logo__preview {
  width: 78px; height: 48px; flex-shrink: 0; display: grid; place-items: center; padding: 4px;
  border: 1px solid var(--kv-line);
  background: conic-gradient(#EEE 25%, #fff 0 50%, #EEE 0 75%, #fff 0) 0 0 / 10px 10px;
}
.kv-logo__preview img { max-width: 100%; max-height: 100%; object-fit: contain; }
.kv-upload {
  position: relative; flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 14px; border: 1px dashed #BDB9B3; border-radius: var(--radius); cursor: pointer;
  font-size: 11.5px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--c-g900);
  transition: border-color .2s, color .2s;
}
.kv-upload:hover { border-color: var(--c-primary); color: var(--c-primary); }
.kv-upload input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
.kv-check { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: .84rem; color: var(--c-g900); cursor: pointer; }
.kv-check input { accent-color: var(--c-primary); }

/* Stil */
.kv-row { display: flex; gap: 10px; align-items: stretch; }
.kv-row .kv-in { flex: 1; }
.kv-pairs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.kv-pair {
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 10px 10px 9px;
  background: #fff; border: 1px solid var(--kv-line); border-radius: var(--radius); text-align: left;
  transition: border-color .2s;
}
.kv-pair:hover { border-color: var(--c-ink); }
.kv-pair.is-active { border-color: var(--c-primary); box-shadow: inset 0 0 0 1px var(--c-primary); }
.kv-pair__h { font-size: 22px; line-height: 1; color: var(--c-ink); }
.kv-pair__l { font-size: 9.5px; letter-spacing: .04em; color: var(--c-g600); line-height: 1.3; }

.kv-presets { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.kv-preset {
  display: grid; grid-template-columns: 2fr 1fr 1fr; padding: 0; height: 46px; overflow: hidden; position: relative;
  border: 1px solid var(--kv-line); border-radius: var(--radius); background: #fff;
}
.kv-preset span { display: block; height: 30px; }
.kv-preset em {
  position: absolute; left: 0; right: 0; bottom: 0; height: 16px; line-height: 16px; padding: 0 6px;
  font-style: normal; font-size: 9.5px; letter-spacing: .05em; color: var(--c-g600); background: #fff; text-align: left;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.kv-preset:hover { border-color: var(--c-ink); }

.kv-colors { display: flex; gap: 14px; }
.kv-colors label { display: flex; align-items: center; gap: 8px; font-size: .84rem; color: var(--c-g900); cursor: pointer; }
.kv-colors input, .kv-sw-custom {
  width: 34px; height: 30px; padding: 2px; border: 1px solid var(--kv-line); border-radius: var(--radius); background: #fff; cursor: pointer;
}

/* Öğe özellikleri */
.kv-prop { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 10px; align-items: center; margin-bottom: 12px; }
.kv-prop__l { font-size: 10.5px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--c-g600); }
.kv-prop .kv-seg { flex-wrap: wrap; }
.kv-prop .kv-seg > button { padding: 7px 10px; font-size: 10.5px; }
.kv-range { display: flex; align-items: center; gap: 10px; }
.kv-range input[type="range"], .kv-prop > input[type="range"] { flex: 1; width: 100%; accent-color: var(--c-primary); }
.kv-in--num { width: 66px !important; flex: none; padding: 7px 8px; }
.kv-swatches { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.kv-sw { width: 24px; height: 24px; padding: 0; border: 1px solid rgba(0,0,0,.18); border-radius: 50%; }
.kv-sw.is-active { outline: 2px solid var(--c-primary); outline-offset: 2px; }
.kv-sw-custom { width: 30px; height: 26px; }
.kv-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--kv-line); }
.kv-mini {
  padding: 7px 11px; font-size: 10.5px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase;
  background: #fff; border: 1px solid var(--kv-line); border-radius: var(--radius);
}
.kv-mini:hover { border-color: var(--c-ink); }
.kv-mini--danger { color: #A3261C; }
.kv-mini--danger:hover { border-color: #A3261C; }
.kv-hint--keys { padding-top: 14px; border-top: 1px dashed var(--kv-line); }

/* ---------- Teklif formu ---------- */
.kv-order {
  position: relative; margin-top: clamp(48px, 6vw, 88px);
  display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: clamp(28px, 4vw, 64px); align-items: start;
}
.kv-step { padding-bottom: 34px; margin-bottom: 34px; border-bottom: 1px solid var(--c-g300); }
.kv-step:last-child { border-bottom: 0; margin-bottom: 0; }
.kv-step__t {
  display: flex; align-items: baseline; gap: 14px; margin: 0 0 20px;
  font-size: clamp(1.2rem, 1.6vw, 1.45rem); font-weight: 500; letter-spacing: -.01em; color: var(--c-ink);
}
.kv-step__t > span { font-size: 12px; font-weight: 500; letter-spacing: .12em; color: var(--c-primary); }
.kv-step__t small { font-size: 11px; font-weight: 400; letter-spacing: .1em; text-transform: uppercase; color: var(--c-g600); }

.kv-papers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.kv-paper { position: relative; cursor: pointer; }
.kv-paper input, .kv-chip input, .kv-finish input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }
.kv-paper__b {
  display: flex; flex-direction: column; gap: 5px; height: 100%; padding: 15px 16px;
  border: 1px solid var(--c-g300); border-radius: var(--radius); background: var(--c-surface);
  transition: border-color .2s, box-shadow .2s, background .2s;
}
.kv-paper__b strong { font-size: .93rem; font-weight: 550; color: var(--c-ink); }
.kv-paper__b em { font-style: normal; font-size: .8rem; line-height: 1.45; color: var(--c-g600); }
.kv-paper:hover .kv-paper__b { border-color: var(--c-g600); }
.kv-paper input:checked + .kv-paper__b { border-color: var(--c-primary); box-shadow: inset 0 0 0 1px var(--c-primary); background: #FCF8F8; }
.kv-paper input:focus-visible + .kv-paper__b, .kv-chip input:focus-visible + span { outline: 2px solid var(--c-primary); outline-offset: 2px; }

.kv-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.kv-chips--sides { margin-top: 14px; }
.kv-chip { position: relative; cursor: pointer; }
.kv-chip span {
  display: inline-block; padding: 10px 17px; font-size: .9rem; color: var(--c-ink);
  border: 1px solid var(--c-g300); border-radius: var(--radius); background: var(--c-surface);
  transition: background .2s, color .2s, border-color .2s;
}
.kv-chip:hover span { border-color: var(--c-g600); }
.kv-chip input:checked + span { background: var(--c-ink); border-color: var(--c-ink); color: #fff; }
.kv-chip-in {
  width: 130px; padding: 10px 12px; font: inherit; font-size: .9rem;
  border: 1px solid var(--c-g300); border-radius: var(--radius); background: #fff;
}
.kv-chip-in:focus { outline: 0; border-color: var(--c-primary); }
.kv-chips.has-error .kv-chip-in { border-color: #C0392B; }

.kv-finishes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.kv-finish {
  display: flex; align-items: center; gap: 11px; padding: 12px 14px; cursor: pointer;
  border: 1px solid var(--c-g300); border-radius: var(--radius); background: var(--c-surface);
  font-size: .9rem; color: var(--c-ink); transition: border-color .2s, background .2s;
}
.kv-finish input { width: 16px; height: 16px; accent-color: var(--c-primary); flex-shrink: 0; }
.kv-finish:hover { border-color: var(--c-g600); }
.kv-finish:has(input:checked) { border-color: var(--c-primary); background: #FCF8F8; }

.kv-sum__box {
  position: sticky; top: calc(var(--header-h) + 20px);
  padding: 26px; border: 1px solid var(--c-g300); background: var(--c-surface);
}
.kv-sum__box h4 { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--c-g600); font-weight: 500; margin: 0 0 16px; }
.kv-sum__dl { display: grid; grid-template-columns: 82px minmax(0, 1fr); gap: 9px 12px; margin: 0; font-size: .88rem; }
.kv-sum__dl dt { font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--c-g600); padding-top: 3px; }
.kv-sum__dl dd { margin: 0; color: var(--c-ink); line-height: 1.45; }

.kv-est { margin: 20px 0 16px; padding: 18px; background: var(--c-g100); }
.kv-est.is-empty p { margin: 0; font-size: .86rem; line-height: 1.55; color: var(--c-g600); }
.kv-est__total { font-size: 2rem; font-weight: 500; letter-spacing: -.02em; color: var(--c-ink); line-height: 1.1; }
.kv-est__total > span { color: var(--c-g600); font-weight: 300; }
.kv-est__total small { font-size: .9rem; font-weight: 500; letter-spacing: .04em; }
.kv-est__vat { font-size: .78rem; color: var(--c-g600); margin-top: 4px; }
.kv-est__lines { list-style: none; margin: 14px 0 0; padding: 12px 0 0; border-top: 1px solid var(--c-g300); display: grid; gap: 6px; }
.kv-est__lines li { display: flex; justify-content: space-between; gap: 10px; font-size: .8rem; color: var(--c-g900); }
.kv-est__note { margin: 12px 0 0; font-size: .74rem; line-height: 1.5; color: var(--c-g600); }
.kv-sum__foot { margin: 14px 0 0; font-size: .78rem; line-height: 1.55; color: var(--c-g600); }
.kv-sum .kv-err { margin: 0 0 12px; }

/* ---------- Duyarlı ---------- */
@media (max-width: 1180px) {
  .kv-main { grid-template-columns: minmax(0, 1fr) 340px; }
  .kv-pairs { grid-template-columns: repeat(2, 1fr); }
  .kv-papers { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 980px) {
  .kv-order { grid-template-columns: 1fr; }
  .kv-sum__box { position: static; }
}
@media (max-width: 900px) {
  .kv-main { display: block; }
  .kv-canvas {
    position: sticky; top: 0; z-index: 4;
    padding: 16px 14px 12px;
    border-bottom: 1px solid var(--kv-line);
  }
  .kv-stage { max-width: 440px; }
  .kv-stage.is-v { max-width: 200px; }
  .kv-under { margin-top: 12px; justify-content: center; }
  .kv-legend, .kv-draft { display: none; }
  .kv-warn { margin-top: 10px; font-size: .78rem; padding: 6px 10px; }
  .kv-panel { border-left: 0; }
  .kv-pane { max-height: none; overflow: visible; }
  .kv-tpls { grid-template-columns: repeat(3, 1fr); }
  .kv-pairs { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 600px) {
  .kv-bar { padding: 10px 12px; gap: 10px; }
  .kv-bar__end { margin-left: 0; width: 100%; justify-content: flex-end; }
  .kv-seg > button { padding: 8px 11px; font-size: 10.5px; }
  .kv-tools { width: 100%; }
  .kv-tool { flex: 1; justify-content: center; padding: 8px 6px; font-size: 10.5px; }
  .kv-tool svg { width: 15px; height: 15px; }
  .kv-tpls { grid-template-columns: repeat(2, 1fr); }
  .kv-tpl__svg { height: 80px; }
  .kv-pairs { grid-template-columns: repeat(2, 1fr); }
  .kv-presets { grid-template-columns: repeat(3, 1fr); }
  .kv-papers, .kv-finishes { grid-template-columns: 1fr; }
  .kv-pane { padding: 16px 14px; }
  .kv-prop { grid-template-columns: 1fr; gap: 6px; }
}
@media (max-width: 380px) {
  .kv-fields { grid-template-columns: 1fr; }
}

/* ---------- Sayfa üst bandı (ana sayfadaki tanıtım bandının sayfa hâli) ---------- */
.card-promo--page { padding-top: calc(var(--header-h) + clamp(28px, 4vw, 56px)); padding-bottom: clamp(56px, 7vw, 104px); }
.card-promo--page .crumbs { color: rgba(255,255,255,.6); margin-bottom: clamp(28px, 4vw, 52px); }
.card-promo--page .crumbs a:hover { color: #fff; }
.card-promo--page .crumbs em { font-style: normal; color: rgba(255,255,255,.85); }
.card-promo--page h1 { color: #fff; margin-top: 18px; font-size: clamp(2.2rem, 4.6vw, 3.9rem); line-height: 1.08; letter-spacing: -.035em; }
#kv { scroll-margin-top: calc(var(--header-h) + 16px); }
@media (max-width: 1024px) { .card-promo--page .card-promo__stack { max-width: 420px; } }
@media (max-width: 600px) { .card-promo--page .card-promo__stack { max-width: 330px; } }