/* KOPYA: kaynak forma/assets/yapilandirici.css · forma/_ai/motor-kopyala.mjs ile eşitlenir */
:root { --ease: cubic-bezier(.22,1,.36,1); }
html { -webkit-text-size-adjust: 100%; }
body { font-family: Montserrat, sans-serif; line-height: 1.7; background: #fff; color: #141C36; }
h1, h2, h3, .font-display { font-family: Oswald, sans-serif; }
.tight { letter-spacing: -0.03em; line-height: 1.24; }

/* sahne: katmanlı radyal zemin + gren */
.stage {
  background:
    radial-gradient(60% 55% at 50% 38%, #ffffff 0%, rgba(255,255,255,0) 70%),
    radial-gradient(40% 40% at 15% 90%, rgba(193,200,226,.35) 0%, rgba(193,200,226,0) 70%),
    radial-gradient(45% 45% at 90% 10%, rgba(253,210,176,.22) 0%, rgba(253,210,176,0) 70%),
    #EEF0F4;
}
.grain::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .35; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .55 0 0 0 .18 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.floor { background: radial-gradient(50% 50% at 50% 50%, rgba(20,28,54,.30) 0%, rgba(20,28,54,.12) 45%, rgba(20,28,54,0) 72%); }
.side-canvas { width: 100%; height: auto; display: block; }
.side-wrap { touch-action: none; }
.side-wrap.can-drag { cursor: grab; }
.side-wrap.dragging { cursor: grabbing; }

/* etkileşim: yalnız transform/opacity */
.btn { transition: transform .2s var(--ease), box-shadow .2s var(--ease), background-color .2s var(--ease), opacity .2s var(--ease); }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0) scale(.97); }
.btn:focus-visible, .swatch:focus-visible, .model:focus-visible, input:focus-visible, select:focus-visible { outline: 2px solid #F08025; outline-offset: 2px; }

.swatch { transition: transform .2s var(--ease); }
.swatch:hover { transform: scale(1.08); }
.swatch:active { transform: scale(.94); }
.swatch[aria-pressed="true"] { box-shadow: 0 0 0 2px #fff, 0 0 0 4px #1E2954; }

.model { transition: transform .2s var(--ease), box-shadow .2s var(--ease); }
.model:hover { transform: translateY(-2px); box-shadow: 0 2px 6px rgba(30,41,84,.08), 0 14px 28px -10px rgba(30,41,84,.25); }
.model:active { transform: scale(.97); }
.model[aria-pressed="true"] { box-shadow: 0 0 0 2px #1E2954, 0 10px 24px -10px rgba(30,41,84,.35); }
.model[aria-pressed="true"] .model-tick { opacity: 1; transform: scale(1); }
.model-tick { opacity: 0; transform: scale(.6); transition: transform .2s var(--ease), opacity .2s var(--ease); }

.item-row { transition: transform .2s var(--ease); }
.item-row:hover { transform: translateX(2px); }
.item-row:active { transform: scale(.98); }
.item-row[aria-pressed="true"] { background: #F2F3F8; box-shadow: inset 0 0 0 1px #C1C8E2; border-radius: .5rem; }

input[type=range] { accent-color: #1E2954; }
.font-row { transition: background-color .2s var(--ease), transform .2s var(--ease); }
.font-row:hover { background: #F2F3F8; }
.font-row:active { transform: scale(.99); }
.font-row:focus-visible, .font-cat:focus-visible, #fontBtn:focus-visible, #fontSearch:focus-visible { outline: 2px solid #F08025; outline-offset: -2px; }
.font-row[aria-selected="true"] { background: #F2F3F8; box-shadow: inset 3px 0 0 #F08025; }
.product-tab { color: #484C5B; }
.product-tab:hover { color: #1E2954; }
.product-tab[aria-selected="true"] { background: #fff; color: #1E2954; box-shadow: 0 1px 2px rgba(30,41,84,.08), 0 4px 12px -4px rgba(30,41,84,.18); }
.product-tab:focus-visible, .size-btn:focus-visible { outline: 2px solid #F08025; outline-offset: 2px; }
.size-btn { transition: transform .2s var(--ease), box-shadow .2s var(--ease); }
.size-btn:hover { transform: translateY(-1px); }
.size-btn:active { transform: scale(.97); }
.size-btn[aria-pressed="true"] { box-shadow: 0 0 0 2px #1E2954; background: #F2F3F8; }
.font-cat { background: #fff; color: #1E2954; border-color: #D3D6DE; }
.font-cat:hover { border-color: #697DBF; }
.font-cat[aria-pressed="true"] { background: #1E2954; color: #F2F3F8; border-color: #1E2954; }
.reveal { opacity: 0; transform: translateY(12px); transition: opacity .62s var(--ease), transform .62s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
.toast { transition: opacity .3s var(--ease), transform .3s var(--ease); }
@media (prefers-reduced-motion: reduce) {
  .btn, .swatch, .model, .item-row, .reveal, .toast, .model-tick { transition: none !important; }
  .reveal { opacity: 1; transform: none; }
}

/* logo zemini */
.plate-btn[aria-pressed="true"] { background: #1E2954; color: #F2F3F8; border-color: #1E2954; }
.plate-btn { background: #fff; color: #1E2954; border-color: #D3D6DE; }
.plate-btn:hover { border-color: #697DBF; }
/* tasarım renk paneli */
.dchip { transition: transform .2s var(--ease); }
.dchip:hover { transform: translateY(-2px); }
.dchip:active { transform: scale(.95); }
.dchip:focus-visible { outline: 2px solid #F08025; outline-offset: 3px; }
.dchip[aria-expanded="true"] .dchip-dot { box-shadow: 0 0 0 3px #fff, 0 0 0 5px #F08025; }
.flash { animation: flash 1.2s var(--ease); }
@keyframes flash { 0%, 100% { box-shadow: 0 0 0 0 rgba(240,128,37,0); } 30% { box-shadow: 0 0 0 4px rgba(240,128,37,.55); } }
#simplePatterns[open] .chev { transform: rotate(180deg); }
.chev { transition: transform .2s var(--ease); }
@media (prefers-reduced-motion: reduce) { .dchip, .chev { transition: none; } .flash { animation: none; } }

/* araç düğmeleri */
.tool-btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; height: 40px; min-width: 40px; padding: 0 .75rem; border-radius: .5rem; border: 1px solid #D3D6DE; background: #fff; color: #1E2954; font-size: .875rem; font-weight: 600; }
.tool-btn:hover { border-color: #697DBF; }
.tool-btn:disabled { opacity: .38; pointer-events: none; }
.tool-primary { background: #1E2954; color: #F2F3F8; border-color: #1E2954; box-shadow: 0 1px 2px rgba(30,41,84,.06), 0 8px 24px -6px rgba(30,41,84,.14); }
.tool-primary:hover { background: #233261; border-color: #233261; }
/* pencereler */
html.modal-open { overflow: hidden; }
.modal { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 16px; }
.modal.hidden { display: none; }
.modal-back { position: absolute; inset: 0; background: rgba(13,18,38,.55); opacity: 0; transition: opacity .25s var(--ease); }
.modal-box { position: relative; width: 100%; max-width: 520px; max-height: calc(100dvh - 32px); overflow-y: auto; overscroll-behavior: contain; background: #fff; border-radius: 1rem; padding: 20px; box-shadow: 0 2px 6px rgba(30,41,84,.08), 0 24px 56px -12px rgba(30,41,84,.28); opacity: 0; transform: translateY(12px) scale(.98); transition: opacity .25s var(--ease), transform .25s var(--ease); }
.modal-wide { max-width: 860px; }
.modal.in .modal-back { opacity: 1; }
.modal.in .modal-box { opacity: 1; transform: none; }
.field { display: block; width: 100%; margin-top: .25rem; border: 1px solid #73798C; border-radius: .5rem; padding: .5rem .75rem; font-size: .875rem; font-weight: 500; color: #141C36; background: #fff; }
.field:focus-visible { outline: 2px solid #F08025; outline-offset: 1px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.zside { color: #484C5B; }
.zside[aria-pressed="true"] { background: #fff; color: #1E2954; box-shadow: 0 1px 2px rgba(30,41,84,.08), 0 4px 12px -4px rgba(30,41,84,.18); }
.zoom-wrap { max-height: calc(100dvh - 140px); overflow: auto; overscroll-behavior: contain; }
.zoom-img { display: block; width: 100%; height: auto; cursor: zoom-in; }
.zoom-wrap.zoomed .zoom-img { width: 220%; max-width: none; cursor: zoom-out; }
.dlogo { width: calc(100% - .5rem); aspect-ratio: 1; }
@media (prefers-reduced-motion: reduce) { .modal-back, .modal-box { transition: none; } }
.faq[open] .chev { transform: rotate(180deg); }
/* teklif penceresi kanal düğmeleri: WhatsApp yeşili üstünde lacivert yazı (beyaz yazı kontrastı yetersiz) */
.wa-primary { background: #25D366; color: #0D1226; }
.wa-primary:hover { background: #3BDB78; }
.wa-primary svg path:first-child { fill: #0D1226; }
.wa-primary svg path:last-child { fill: #25D366; }
.quote-alt { background: #fff; color: #1E2954; border: 1px solid #D3D6DE; }
.quote-alt:hover { border-color: #697DBF; }
/* görünüm sekmeleri ve 360° */
.view-tab { color: #484C5B; }
.view-tab[aria-selected="true"] { background: #1E2954; color: #F2F3F8; }
.view-tab:focus-visible { outline: 2px solid #F08025; outline-offset: 2px; }
.v3host { position: relative; width: 100%; min-width: 0; overflow: hidden; cursor: grab; }
.v3host:active { cursor: grabbing; }
.v3host canvas { position: absolute; inset: 0; display: block; width: 100% !important; height: 100% !important; }
/* 360° ipucu: ilk dokunuşta kaybolur */
.v3hint { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 6px; margin: 0; padding: 6px 12px; border-radius: 999px; background: rgba(20,28,54,.78); color: #F2F3F8; font-size: 12px; font-weight: 600; pointer-events: none; transition: opacity .3s var(--ease), transform .3s var(--ease); }
.v3host.touched .v3hint { opacity: 0; transform: translate(-50%, 6px); }
/* mobil alt teklif çubuğu */
.mcta { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: #fff; border-top: 1px solid #E7E9EE; box-shadow: 0 -8px 24px -12px rgba(30,41,84,.25); transform: translateY(110%); transition: transform .28s var(--ease); }
.mcta.on { transform: none; }
@media (min-width: 1024px) { .mcta { display: none; } }
body.has-mcta .toast { bottom: 92px; }
@media (max-width: 1023px) { body.has-mcta { padding-bottom: 76px; } }
/* dokunmatik: rahat dokunma hedefleri */
@media (pointer: coarse) {
  .tool-btn { height: 44px; min-width: 44px; }
  .view-tab { min-height: 36px; }
  .font-cat, .plate-btn, .slot-chip { min-height: 36px; }
  #items li > button.btn { min-height: 36px; }
}
@media (prefers-reduced-motion: reduce) { .v3hint, .mcta { transition: none; } }
/* mobil küçülen önizleme: yalnız transform + clip-path (yerleşim sabit, kaydırma zıplamaz) */
@media (max-width: 1023px) {
  main section.sticky { clip-path: inset(0 0 0 0); transition: clip-path .32s var(--ease); }
  main section.sticky .stage { transform-origin: 50% 0; transition: transform .32s var(--ease); }
  main section.sticky .stage + div { transition: transform .32s var(--ease); }
  main section.sticky.compact { clip-path: inset(0 0 var(--cut, 0px) 0); }
  main section.sticky.compact .stage { transform: scale(var(--cs, 1)); cursor: zoom-in; }
  main section.sticky.compact .stage + div { transform: translateY(calc(var(--cut, 0px) * -1)); }
}
@media (max-width: 1023px) and (prefers-reduced-motion: reduce) {
  main section.sticky, main section.sticky .stage, main section.sticky .stage + div { transition: none; }
}
/* ---- renk seçici (özel): masaüstünde açılır kutu, mobilde alttan sayfa ---- */
input[type=color]{-webkit-appearance:none;appearance:none;border:0;padding:0;background:conic-gradient(from 0deg,#f43,#fc3,#3d6,#3cf,#63f,#f3c,#f43);border-radius:999px;cursor:pointer;position:relative;box-shadow:0 0 0 2px var(--surface-base,#fff),0 1px 3px rgba(13,18,38,.25);transition:transform .2s cubic-bezier(.22,1,.36,1);}
input[type=color]::-webkit-color-swatch-wrapper{padding:3px;}
input[type=color]::-webkit-color-swatch{border:0;border-radius:999px;box-shadow:inset 0 0 0 1.5px var(--surface-base,#fff);}
input[type=color]::-moz-color-swatch{border:0;border-radius:999px;}
input[type=color]:hover{transform:scale(1.08);}
input[type=color]:active{transform:scale(.96);}
input[type=color]:focus-visible{outline:2px solid var(--focus-ring,#F08025);outline-offset:2px;}
.rs{position:fixed;z-index:200;width:268px;padding:14px;border-radius:16px;background:var(--surface-base,#fff);color:var(--text-primary,#141C36);border:1px solid var(--border,#E7E9EE);
  box-shadow:0 2px 6px rgba(13,18,38,.08),0 18px 48px rgba(13,18,38,.22);font:500 12px/1.4 var(--font-body,'Montserrat',system-ui,sans-serif);
  opacity:0;transform:translateY(-4px) scale(.98);transition:opacity .18s cubic-bezier(.22,1,.36,1),transform .22s cubic-bezier(.22,1,.36,1);}
.rs.rs-acik{opacity:1;transform:none;}
.rs-tutamak{display:none;}
.rs-alan{position:relative;height:160px;border-radius:12px;cursor:crosshair;touch-action:none;outline:none;
  background:linear-gradient(to top,#000,transparent),linear-gradient(to right,#fff,var(--rs-ton,red));box-shadow:inset 0 0 0 1px rgba(0,0,0,.08);}
.rs-alan:focus-visible{box-shadow:inset 0 0 0 1px rgba(0,0,0,.08),0 0 0 2px var(--focus-ring,#F08025);}
.rs-imlec{position:absolute;width:18px;height:18px;margin:-9px 0 0 -9px;border-radius:50%;background:var(--rs-renk);border:3px solid #fff;box-shadow:0 0 0 1px rgba(0,0,0,.25),0 2px 6px rgba(0,0,0,.35);pointer-events:none;}
.rs-satir{display:flex;align-items:center;gap:10px;margin-top:12px;}
.rs-onizle{flex:none;display:flex;width:34px;height:34px;border-radius:50%;overflow:hidden;box-shadow:inset 0 0 0 1px rgba(0,0,0,.12);transform:rotate(-45deg);}
.rs-onizle span{flex:1;}
.rs-yeni{background:var(--rs-renk);}
.rs-ton{flex:1;min-width:0;height:14px;margin:0;border-radius:999px;-webkit-appearance:none;appearance:none;cursor:pointer;touch-action:none;
  background:linear-gradient(to right,#f00,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,#f00);box-shadow:inset 0 0 0 1px rgba(0,0,0,.1);}
.rs-ton::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;border-radius:50%;background:var(--rs-ton,red);border:3px solid #fff;box-shadow:0 0 0 1px rgba(0,0,0,.25),0 2px 6px rgba(0,0,0,.3);}
.rs-ton::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:var(--rs-ton,red);border:3px solid #fff;box-shadow:0 0 0 1px rgba(0,0,0,.25),0 2px 6px rgba(0,0,0,.3);}
.rs-ton:focus-visible{outline:2px solid var(--focus-ring,#F08025);outline-offset:3px;}
.rs-damla{flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:10px;border:1px solid var(--border,#E7E9EE);background:transparent;color:inherit;cursor:pointer;transition:transform .2s cubic-bezier(.22,1,.36,1),opacity .2s;}
.rs-damla:hover{opacity:.75;} .rs-damla:active{transform:scale(.94);} .rs-damla:focus-visible{outline:2px solid var(--focus-ring,#F08025);outline-offset:2px;}
.rs-hex{display:flex;align-items:center;gap:8px;margin-top:12px;padding:0 10px;height:36px;border-radius:10px;border:1px solid var(--border-strong,#73798C);}
.rs-hex:focus-within{border-color:var(--focus-ring,#F08025);box-shadow:0 0 0 1px var(--focus-ring,#F08025);}
.rs-hex span{font-weight:700;font-size:11px;letter-spacing:.06em;color:var(--text-muted,#5F6577);}
.rs-hex input{flex:1;min-width:0;border:0;background:transparent;color:inherit;font:600 14px/1 ui-monospace,Consolas,monospace;letter-spacing:.04em;text-transform:uppercase;outline:none;}
.rs-baslik{margin:12px 0 6px;font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted,#5F6577);}
.rs-son{display:flex;flex-wrap:wrap;gap:6px;}
.rs-son button{width:24px;height:24px;border-radius:50%;border:0;cursor:pointer;box-shadow:inset 0 0 0 1px rgba(0,0,0,.12);transition:transform .2s cubic-bezier(.22,1,.36,1);}
.rs-son button:hover{transform:scale(1.12);} .rs-son button:active{transform:scale(.94);} .rs-son button:focus-visible{outline:2px solid var(--focus-ring,#F08025);outline-offset:2px;}
.rs-dugmeler{display:flex;gap:8px;margin-top:14px;}
.rs-dugmeler button{flex:1;height:38px;border-radius:10px;font:600 13px var(--font-body,'Montserrat',system-ui,sans-serif);cursor:pointer;transition:transform .2s cubic-bezier(.22,1,.36,1),opacity .2s;}
.rs-vazgec{border:1px solid var(--border,#E7E9EE);background:transparent;color:inherit;}
.rs-tamam{border:0;background:var(--action,#F08025);color:#141C36;}
.rs-dugmeler button:hover{opacity:.88;} .rs-dugmeler button:active{transform:translateY(1px);} .rs-dugmeler button:focus-visible{outline:2px solid var(--focus-ring,#F08025);outline-offset:2px;}
/* mobil: alttan sayfa, büyük dokunma alanları */
.rs.rs-alt{left:0;right:0;bottom:0;top:auto;width:auto;max-width:520px;margin:0 auto;padding:10px 16px calc(16px + env(safe-area-inset-bottom));border-radius:20px 20px 0 0;border-bottom:0;transform:translateY(100%);opacity:1;}
.rs.rs-alt.rs-acik{transform:none;}
.rs-alt .rs-tutamak{display:block;width:40px;height:4px;margin:0 auto 12px;border-radius:2px;background:var(--border-strong,#73798C);opacity:.5;}
.rs-alt .rs-alan{height:200px;}
.rs-alt .rs-ton{height:18px;}
.rs-alt .rs-ton::-webkit-slider-thumb{width:28px;height:28px;}
.rs-alt .rs-son button{width:32px;height:32px;}
.rs-alt .rs-dugmeler button{height:46px;font-size:15px;}
.rs-alt .rs-hex{height:44px;}
@media (prefers-reduced-motion:reduce){.rs,.rs.rs-alt{transition:none;}}
.rs:focus{outline:none;}