/*
 * CILTIN — "Resim оluştur" sihirbazı (kb-image-share.js)
 * ------------------------------------------------------------------
 * Bu dosya sadece SİHİRBAZIN ÇEVRESİNİ (adım sekmeleri, düğmeler,
 * kaydırıcılar, modal çerçevesi) site kimliğine (Oswald, ink/copper/pine,
 * shared.css'teki icon-btn deseni) uyarlıyor. Üretilen GÖRSELİN kendisi
 * (canvas'a çizilen parşömen kart) bilerek kendi ayrı kimliğini koruyor -
 * kb-image-share.js içinde JS ile çiziliyor, buradaki değişkenlerden
 * etkilenmiyor.
 */

.kbi-overlay{
  position:fixed;inset:0;z-index:10000;background:rgba(35,41,43,.72);
  display:flex;align-items:center;justify-content:center;padding:20px;overscroll-behavior:contain;
}
.kbi-modal{
  background:var(--bg,#F0F2F0);border:2px solid var(--ink,#23292B);
  width:100%;max-width:960px;max-height:92vh;overflow-y:auto;position:relative;
  display:grid;grid-template-columns:minmax(280px,360px) 1fr;
}
@media(max-width:760px){
  .kbi-modal{grid-template-columns:1fr;max-height:96vh}
  .kbi-preview{order:1;padding:14px;position:sticky;top:0;z-index:1;max-height:38vh}
  .kbi-controls{order:2}
  .kbi-canvas-frame{max-height:34vh}
  .kbi-canvas-frame canvas{max-height:34vh;width:auto}
}

.kbi-close{
  position:absolute;top:14px;right:14px;width:32px;height:32px;
  background:var(--ink,#23292B);color:#fff;border:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;z-index:2;font:400 24px/1 'Oswald',sans-serif;
}
.kbi-close:hover{background:var(--copper,#B5764A)}
.kbi-close svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.8}

.kbi-controls{padding:26px;position:relative;border-right:1px solid var(--line,rgba(35,41,43,.14))}
@media(max-width:760px){ .kbi-controls{border-right:none;border-bottom:1px solid var(--line,rgba(35,41,43,.14))} }

.kbi-eyebrow{font-family:'Oswald',sans-serif;font-size:.68rem;letter-spacing:.14em;color:var(--copper,#B5764A);margin-bottom:4px}
.kbi-title{font-family:'Oswald',sans-serif;font-weight:700;font-size:1.15rem;color:var(--ink,#23292B);margin:0 0 20px}

/* --- Adım sekmeleri --- */
.kbi-steps{display:flex;flex-wrap:nowrap;gap:2px;margin-bottom:22px;border-bottom:1px solid var(--line,rgba(35,41,43,.14));overflow-x:auto}
.kbi-step-btn{
  flex:1;min-width:0;background:none;border:none;color:var(--ink-dim,#5c6866);cursor:pointer;
  font-family:'Oswald',sans-serif;font-weight:600;font-size:.72rem;letter-spacing:.03em;white-space:nowrap;
  padding:8px 4px 12px;display:flex;align-items:center;justify-content:center;gap:6px;position:relative;
}
.kbi-step-btn .n{
  width:17px;height:17px;border-radius:50%;border:1.5px solid var(--ink-dim,#5c6866);
  display:inline-flex;align-items:center;justify-content:center;font-size:.66rem;flex-shrink:0;
}
.kbi-step-btn.active{color:var(--ink,#23292B)}
.kbi-step-btn.active .n{border-color:var(--copper,#B5764A);background:var(--copper,#B5764A);color:#fff}
.kbi-step-btn.active::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--copper,#B5764A)}
@media(max-width:400px){
  .kbi-step-btn{font-size:.64rem;padding:8px 2px 10px;gap:4px}
  .kbi-step-btn .n{width:15px;height:15px;font-size:.6rem}
}

.kbi-panel{display:none}
.kbi-panel.active{display:block}

/* --- Adım 1: fon --- */
.kbi-bg-tabs{display:flex;gap:4px;margin-bottom:14px;flex-wrap:nowrap}
.kbi-bg-tab{
  flex:1;min-width:0;background:var(--surface,#E7EAE6);border:1px solid var(--line,rgba(35,41,43,.14));color:var(--ink-dim,#5c6866);
  padding:6px 8px;font-size:.68rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  cursor:pointer;font-family:'Oswald',sans-serif;text-align:center;
}
.kbi-bg-tab.active{background:var(--pine,#2F5B48);border-color:var(--pine,#2F5B48);color:#fff}
@media(max-width:400px){
  .kbi-bg-tab{font-size:.6rem;padding:6px 4px}
}
.kbi-thumb-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.kbi-thumb{
  aspect-ratio:1;cursor:pointer;border:2px solid transparent;
  background-size:cover;background-position:center;position:relative;padding:0;
}
.kbi-thumb.selected{border-color:var(--copper,#B5764A)}
.kbi-dropzone{
  border:1.5px dashed var(--line,rgba(35,41,43,.14));padding:20px 14px;text-align:center;
  color:var(--ink-dim,#5c6866);font-size:.76rem;cursor:pointer;margin-top:8px;font-family:'Source Serif 4',serif;
}
.kbi-dropzone:hover{border-color:var(--copper,#B5764A);color:var(--ink,#23292B)}
.kbi-dropzone.dragging{border-color:var(--copper,#B5764A);background:rgba(181,118,74,.08);color:var(--ink,#23292B)}
.kbi-dropzone small{display:block;margin-top:6px;font-family:'Oswald',sans-serif;font-size:.62rem;letter-spacing:.04em}

/* --- Adım 2: düzenle --- */
.kbi-field{margin-bottom:18px}
.kbi-field-label{
  display:block;font-family:'Oswald',sans-serif;font-size:.68rem;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;color:var(--copper,#B5764A);margin-bottom:8px;
}
.kbi-row{display:flex;gap:8px}
.kbi-pill{
  flex:1;background:var(--surface,#E7EAE6);border:1px solid var(--line,rgba(35,41,43,.14));color:var(--ink-dim,#5c6866);
  padding:8px 6px;font-size:.72rem;cursor:pointer;font-family:'Oswald',sans-serif;text-align:center;
}
.kbi-pill.active{background:var(--pine,#2F5B48);border-color:var(--pine,#2F5B48);color:#fff}
.kbi-pill[data-font="serif"]{font-family:'Source Serif 4',serif}
.kbi-pill[data-font="hand"]{font-family:'Caveat',cursive;font-size:.9rem}
.kbi-slider{width:100%;accent-color:var(--copper,#B5764A)}
.kbi-swatch-row{display:flex;gap:8px;align-items:center}
.kbi-swatch{width:24px;height:24px;border-radius:50%;border:2px solid var(--line,rgba(35,41,43,.14));cursor:pointer;padding:0}
.kbi-swatch.selected{border-color:var(--copper,#B5764A)}

.kbi-block-list{display:flex;flex-direction:column;gap:6px;max-height:170px;overflow-y:auto;padding-right:4px}
.kbi-block-item{
  display:flex;gap:8px;align-items:flex-start;background:var(--surface,#E7EAE6);
  border:1px solid var(--line,rgba(35,41,43,.14));padding:8px 10px;font-size:.76rem;
  color:var(--ink,#23292B);cursor:pointer;font-family:'Source Serif 4',serif;
}
.kbi-block-item input{margin-top:2px;accent-color:var(--pine,#2F5B48)}
.kbi-hint{font-family:'Source Serif 4',serif;font-style:italic;font-size:.72rem;color:var(--ink-dim,#5c6866);margin-top:8px}

/* --- Adım 3: paylaş --- */
.kbi-share-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.kbi-share-btn{
  display:flex;align-items:center;gap:7px;justify-content:center;
  background:var(--surface,#E7EAE6);border:1px solid var(--line,rgba(35,41,43,.14));color:var(--ink,#23292B);
  padding:11px 8px;font-size:.76rem;font-weight:600;cursor:pointer;font-family:'Oswald',sans-serif;
}
.kbi-share-btn:hover{border-color:var(--copper,#B5764A)}
.kbi-share-btn.primary{background:var(--pine,#2F5B48);border-color:var(--pine,#2F5B48);color:#fff;grid-column:1/-1}
.kbi-share-btn:disabled{opacity:.42;cursor:not-allowed;filter:saturate(.35)}
.kbi-share-btn svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.8;flex-shrink:0}

/* --- Sağ: canvas önizleme --- */
.kbi-preview{padding:26px;display:flex;flex-direction:column;align-items:center;background:var(--surface,#E7EAE6)}
.kbi-canvas-frame{position:relative;overflow:hidden;box-shadow:0 16px 34px rgba(35,41,43,.18);background:#000;max-width:100%}
.kbi-canvas-frame canvas{display:block;max-width:100%;height:auto}
.kbi-nav-row{display:flex;justify-content:space-between;margin-top:20px;width:100%;max-width:340px}
.kbi-nav-btn{
  background:none;border:1px solid var(--line,rgba(35,41,43,.14));color:var(--ink-dim,#5c6866);
  padding:9px 18px;font-size:.76rem;cursor:pointer;font-family:'Oswald',sans-serif;font-weight:600;
}
.kbi-nav-btn.primary{background:var(--copper,#B5764A);border-color:var(--copper,#B5764A);color:#fff}
.kbi-nav-btn:disabled{opacity:.35;cursor:default}

.kbi-row-aspects{display:grid;grid-template-columns:repeat(3,1fr)}
.kbi-row-aspects .kbi-pill{min-width:0}
.kbi-share-label{margin-top:18px}
.kbi-warning{margin:0 0 12px;padding:9px 10px;border-left:3px solid var(--copper,#B5764A);background:rgba(181,118,74,.1);font-family:'Source Serif 4',serif;font-size:.76rem;color:var(--ink,#23292B)}
.kbi-status{min-height:1.2em;margin-top:10px;font-family:'Source Serif 4',serif;font-size:.72rem;color:var(--ink-dim,#5c6866)}
.kbi-status[data-kind="error"]{color:#8a3f32}
.kbi-status[data-kind="success"]{color:var(--pine,#2F5B48)}
.kbi-bg-tab[hidden],.kbi-panel[hidden],.kbi-dropzone[hidden],.kbi-thumb-grid[hidden],.kbi-warning[hidden]{display:none!important}
.kbi-close:focus-visible,.kbi-step-btn:focus-visible,.kbi-bg-tab:focus-visible,.kbi-thumb:focus-visible,.kbi-dropzone:focus-visible,.kbi-pill:focus-visible,.kbi-swatch:focus-visible,.kbi-share-btn:focus-visible,.kbi-nav-btn:focus-visible,.kbi-slider:focus-visible{outline:3px solid var(--copper,#B5764A);outline-offset:2px}
@media(max-width:400px){.kbi-row-aspects{grid-template-columns:1fr}.kbi-share-grid{grid-template-columns:1fr}}