/* Kanvas — Tasarım Stüdyosu (frontend) */

/* --- Ürün sayfası butonu --- */
/* TUZAK: buton WooCommerce'in sepet formunun içine giriyor; tema orayı flex
   yapınca buton satıra sıkışıp yandaki öğelerin üstüne biniyordu. Kendi satırını
   zorla al. */
/* TUZAK: buton "Sepete Ekle" satırının DİBİNE yapışıyordu (ikisinin de kenarı
   aynı y'de) ve üstüne binmiş gibi duruyordu. Çakışma değil, boşluk yokluğuydu;
   temanın margin kuralı bizimkini eziyor, o yüzden !important. */
.kanvas-open-wrap{ --k-accent:#e8b207;
	/* margin İŞE YARAMIYOR: üstteki "Sepete Ekle" float'lı, blok kutumuz onunla
	   üst üste biniyor ve margin yutuluyor (ölçüldü: margin-top 22px hesaplandı,
	   görünen boşluk 0 px). padding kutunun İÇİNDE yer açtığı için etkilenmiyor. */
	margin:0 0 6px !important; padding-top:22px !important;
	width:100%; flex:0 0 100%; display:block; clear:both; float:none;
	position:relative; z-index:2; order:99; }
form.cart:has(.kanvas-open-wrap){ flex-wrap:wrap; }
/* =========================================================================
 * "KENDİ TASARIMINI OLUŞTUR" BUTONU — sıfırdan yazıldı.
 *
 * TUZAK (asıl sorun buydu): parlama efekti ayrı bir ::after katmanıydı ve
 * left:-120% → 130% arası kayıyordu. Butonda overflow:hidden vardı AMA tema
 * onu ezip visible yapıyor (ölçüldü: computed overflow=visible). Kırpılmayan
 * parlama butondan çıkıp ÜRÜN FOTOĞRAFININ üstünden geçiyordu.
 *
 * Çözüm: taşabilecek bir çocuk katman YOK. Parlama, butonun KENDİ arka plan
 * gradyanının konumu kaydırılarak yapılıyor — arka plan kutunun dışına
 * yapısal olarak çıkamaz, temanın overflow'u ne olursa olsun.
 *
 * Tema ayrıca padding, white-space ve letter-spacing dayattığı için bu üçü
 * !important ile sabitleniyor; genişliği hizalaButon() sepet satırından alır,
 * o yüzden yazı sarabilmeli (aksi halde kutudan taşıyordu).
 * ====================================================================== */
.kanvas-open-btn{
	position:relative; display:flex; align-items:center; justify-content:center;
	gap:12px; width:100%; margin:0;
	padding:14px 18px !important;
	font-family:inherit; font-size:15px; font-weight:800; line-height:1.25;
	letter-spacing:.01em !important;
	color:#12131a !important; text-transform:none; text-decoration:none; text-align:left;
	border:0; border-radius:12px; cursor:pointer;
	/* İki duruşlu gradyan: sağa kaydırılınca beyaz bant soldan sağa akar */
	background-image:linear-gradient(100deg,
		#eeb61c 0%, #f7cf4f 34%, rgba(255,255,255,.92) 46%, #f7cf4f 58%, #eeb61c 100%);
	background-size:280% 100%;
	background-position:100% 0;
	box-shadow:0 4px 14px rgba(18,19,26,.18);
	transition:background-position .62s cubic-bezier(.25,.7,.3,1),
		transform .16s ease, box-shadow .16s ease;
}
.kanvas-open-btn:hover,
.kanvas-open-btn:focus-visible{
	background-position:0 0;
	transform:translateY(-2px);
	box-shadow:0 10px 24px rgba(18,19,26,.26);
}
.kanvas-open-btn:active{ transform:translateY(0); box-shadow:0 3px 10px rgba(18,19,26,.2); }
/* TUZAK: ':focus' kullanmak butonu TIKLANDIKTAN SONRA kalkık bırakır — fare
   ayrılsa bile odak kaldığı için hover bir daha çalışmıyor gibi görünür. */
.kanvas-open-btn:focus-visible{ outline:3px solid #12131a; outline-offset:3px; }
.kanvas-open-btn:focus:not(:focus-visible){ outline:0; }
.kanvas-open-btn:focus:not(:focus-visible):not(:hover){
	transform:none; box-shadow:0 4px 14px rgba(18,19,26,.18); background-position:100% 0;
}
@media(prefers-reduced-motion:reduce){
	.kanvas-open-btn{ transition:none }
	.kanvas-open-btn:hover,.kanvas-open-btn:focus-visible{ transform:none; background-position:50% 0 }
}
.kanvas-open-btn .kob-ico{ width:22px; height:22px; flex:0 0 22px; display:block; }
.kanvas-open-btn .kob-txt{
	display:flex; flex-direction:column; align-items:flex-start; gap:2px;
	min-width:0; max-width:100%; flex:1 1 auto;
}
.kanvas-open-btn .kob-txt > *{ max-width:100%; }
.kanvas-open-btn .kob-sub{
	display:block; font-size:11px; font-weight:700; opacity:.68;
	letter-spacing:.02em !important; text-transform:uppercase;
	white-space:normal !important; overflow-wrap:anywhere; line-height:1.35;
}
/* MOBİL: hizalaButon() genişliği sepet satırına sabitler; 375 px ekranda o satır
   225 px olduğu için butonun sağında 130 px boşluk kalıyordu (ölçüldü).
   Dar ekranda hizalamanın anlamı yok — tam genişlik daha iyi görünüyor ve
   dokunma hedefi büyüyor. JS de bu genişlikte hizalamayı atlar. */
@media(max-width:767px){
	.kanvas-open-wrap{ width:100% !important; margin-left:0 !important; }
	.kanvas-open-btn{ padding:15px 16px !important; }
	/* TUZAK: mobilde sağ panel gövdenin 587 px'inin 357'sini yiyor, sahneye
	   229 px kalıyordu -> tasarım tuvali 177x207'ye düşüp kullanılamaz hale
	   geliyordu (ölçüldü, 375x812 ekran). Sahneye öncelik ver, panel kendi
	   içinde kaysın. */
	.k-stage-wrap{ flex:0 0 auto !important; min-height:46vh !important; }
	.k-panel{ flex:1 1 auto !important; min-height:0 !important; overflow-y:auto !important; }
}

.kanvas-modal{position:fixed;inset:0;z-index:100000;display:none;
	background:rgba(15,16,22,.72);backdrop-filter:blur(3px);
	align-items:center;justify-content:center;--k-accent:#e8b207;}
.kanvas-modal.open{display:flex;}
.kanvas-modal *{box-sizing:border-box;}

/* Diyalog 1080 px'e sabitti; geniş ekranda sahne dar kalıyordu. */
/* TUZAK: diyalogun yüksekliği İÇERİĞE göre büyüyordu. Sağdaki panel kısalınca
   (ör. forma deseni bölümü olmayan üründe) diyalog da kısalıyor ve tasarım
   sahnesi küçülüyordu. Taban yükseklik verilince sahne alanını koruyor. */
.k-dialog{background:#fff;width:min(1480px,96vw);
	height:min(1200px,98vh);max-height:98vh;border-radius:14px;
	display:flex;flex-direction:column;overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.4);
	font-family:'Montserrat',-apple-system,'Segoe UI',Roboto,sans-serif;}

.k-head{display:flex;align-items:center;gap:14px;padding:10px 16px;border-bottom:1px solid #eee;}
.k-brand{font-weight:800;font-size:17px;color:#16181f;}
.k-fee{font-size:13px;font-weight:700;color:#0a7d2c;background:#e8f7ec;padding:4px 10px;border-radius:20px;}
.k-close{margin-left:auto;background:#f1f1f3;border:0;width:34px;height:34px;border-radius:50%;
	font-size:22px;line-height:1;cursor:pointer;color:#444;flex:0 0 34px;}
.k-fee{margin-left:auto;}
.k-fee + .k-close{margin-left:12px;}
.k-close:hover{background:#e6e6ea;}

/* --- 2B / 3B sekmeleri --- */
.k-tabs{display:flex;gap:0;background:#f1f1f3;border-radius:9px;padding:3px;}
.k-tab{border:0;background:transparent;padding:7px 16px;font-size:13px;font-weight:700;color:#6b6f7a;
	border-radius:7px;cursor:pointer;font-family:inherit;transition:all .15s;}
.k-tab.on{background:#fff;color:#16181f;box-shadow:0 1px 3px rgba(0,0,0,.12);}
.k-tab:hover:not(.on){color:#16181f;background:rgba(255,255,255,.55);}
/* TUZAK: her grubun İLK butonu varsayılan olarak .on'dur; .on kuralı :hover'ı ezince
   "ilk butonda hover çalışmıyor" gibi görünür. Seçili öğeye de hover geri bildirimi ver. */
.k-tab.on:hover{box-shadow:0 2px 7px rgba(0,0,0,.18);}

/* --- 3B sahne --- */
.k-stage.k-stage3d{width:100%;display:flex;align-items:center;justify-content:center;
	/* TUZAK: k-stage-wrap'te align-items:safe center var; stretch olmadan sahne 0 yüksekliğe çöker */
	align-self:stretch;flex:1 1 auto;min-height:340px;
	background:radial-gradient(circle at 50% 32%, #f7f8fa 0%, #d5dae2 55%, #b3bac6 100%);}
.k-stage.k-stage3d canvas{display:block;border-radius:8px;}
.k-3d-msg{padding:40px 20px;color:#8a8d96;font-size:14px;text-align:center;}

/* --- Gerçek görünüm (Photoshop'tan ölçülmüş mockup) --- */
.k-stage.k-stagemk{width:100%;display:flex;align-items:center;justify-content:center;
	/* 3B sahnedeki tuzağın aynısı: stretch olmadan sahne 0 yüksekliğe çöker */
	align-self:stretch;flex:1 1 auto;min-height:340px;overflow:hidden;}
.k-stage.k-stagemk canvas{display:block;border-radius:8px;max-width:100%;max-height:100%;}

/* --- Ön / Arka taraf sekmeleri --- */
.k-sides{display:flex;gap:8px;margin-bottom:12px;}
.k-side{position:relative;border:1.5px solid #e2e2e6;background:#fff;color:#6b6f7a;
	padding:8px 20px;border-radius:9px;font-size:13.5px;font-weight:700;cursor:pointer;font-family:inherit;
	display:flex;align-items:center;gap:7px;transition:all .15s;}
.k-side:hover{border-color:#c9cbd1;color:#16181f;}
.k-side.on{border-color:var(--k-accent);background:#fffdf4;color:#16181f;box-shadow:0 0 0 3px rgba(232,178,7,.12);}
.k-side.on:hover{background:#fff8e2;box-shadow:0 0 0 4px rgba(232,178,7,.22);}
.k-side-dot{width:7px;height:7px;border-radius:50%;background:#d6d8dd;display:block;}
.k-side.has .k-side-dot{background:#16a34a;}

/* --- Ürün rengi --- */
.k-colors{display:flex;flex-wrap:wrap;gap:8px;}
.k-col{width:34px;height:34px;padding:0;border:2px solid transparent;border-radius:50%;cursor:pointer;background:none;
	display:flex;align-items:center;justify-content:center;transition:all .15s;}
.k-col span{width:26px;height:26px;border-radius:50%;display:block;border:1px solid rgba(0,0,0,.18);}
.k-col:hover{transform:scale(1.06);}
.k-col.on{border-color:var(--k-accent);box-shadow:0 0 0 2px rgba(232,178,7,.2);}
.k-col.on:hover{transform:scale(1.10);box-shadow:0 0 0 3px rgba(232,178,7,.32);}
.k-col-name{margin-top:7px;font-size:12px;color:#6b6f7a;font-weight:600;}
/* Serbest (palet dışı) renk */
.k-col-free .k-col-free-s{width:26px;height:26px;border-radius:50%;display:block;
	border:1px solid rgba(0,0,0,.18);
	background-image:conic-gradient(#e8483f,#e8b207,#43b05c,#2f7fe0,#8b4fd6,#e8483f);}
.k-col-free.on .k-col-free-s{background-image:none;}
.k-cpick-row{display:flex;align-items:center;gap:7px;margin-top:7px;}
.k-cpick{flex:0 0 auto;}
.k-chex{width:92px;padding:6px 8px;border:1px solid #d9d9de;border-radius:7px;
	font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px;
	text-transform:uppercase;color:#16181f;background:#fff;}
.k-chex:focus{outline:0;border-color:var(--k-accent);}

/* --- Forma desenleri --- */
.k-pats{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;}
.k-pat{border:1.5px solid #e2e2e6;background:#fff;border-radius:9px;padding:6px 4px 5px;cursor:pointer;
	display:flex;flex-direction:column;align-items:center;gap:5px;font-family:inherit;transition:all .15s;}
.k-pat:hover{border-color:#c9cbd1;}
.k-pat.on{border-color:var(--k-accent);background:#fffdf4;box-shadow:0 0 0 3px rgba(232,178,7,.12);}
.k-pat.on:hover{background:#fff8e2;box-shadow:0 0 0 4px rgba(232,178,7,.22);}
.k-pat canvas{width:46px;height:46px;border-radius:6px;display:block;border:1px solid rgba(0,0,0,.10);}
.k-pat span{font-size:10.5px;font-weight:700;color:#4b5058;text-align:center;line-height:1.2;}
.k-pat.on span{color:#16181f;}
.k-cslot{margin-bottom:10px;}
.k-note{margin-top:8px;font-size:11px;color:#8a8d96;line-height:1.45;}
.k-cslot>label{display:block;font-size:11.5px;font-weight:700;color:#6b6f7a;margin-bottom:5px;}

/* --- Baskı türleri --- */
.k-ptypes{display:flex;flex-direction:column;gap:7px;}
.k-pt{display:block;border:1.5px solid #e2e2e6;border-radius:9px;padding:9px 11px;cursor:pointer;transition:all .15s;background:#fff;}
.k-pt:hover{border-color:#c9cbd1;background:#fcfcfd;}
.k-pt.on:hover{background:#fff8e2;box-shadow:0 0 0 4px rgba(232,178,7,.22);}
.k-pt.on{border-color:var(--k-accent);background:#fffdf4;box-shadow:0 0 0 3px rgba(232,178,7,.12);}
.k-pt input{position:absolute;opacity:0;pointer-events:none;}
.k-pt-main{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:13.5px;color:#16181f;}
.k-pt-price{font-size:12px;font-weight:800;color:#0a7d2c;white-space:nowrap;}
.k-pt-desc{display:block;font-size:11.5px;color:#8a8d96;line-height:1.45;margin-top:3px;}

.k-body{display:flex;gap:0;flex:1;min-height:0;}
/* Sahne kutusunun payı KISILDI: yükseklik sınırlayıcı, her piksel tuvale gidiyor. */
.k-stage-wrap{flex:1;display:flex;flex-direction:column;padding:4px 8px;background:#f7f7f9;
	min-width:0;overflow:auto;
	/* "safe" ortalama: içerik sığmazsa sola taşıp erişilemez hale GELMEZ */
	align-items:safe center;justify-content:safe center;}
.k-stage{flex:0 0 auto;max-width:100%;}
.k-stage{position:relative;box-shadow:0 4px 18px rgba(0,0,0,.12);border-radius:8px;overflow:hidden;background:#fff;line-height:0;}
/* İpucu artık tuvalden yer YEMİYOR: akıştan çıkarılıp altta yüzüyor. */
.k-hint{margin:0;font-size:11px;line-height:1;color:#9a9da6;text-align:center;height:0;overflow:visible;transform:translateY(2px);}

.k-panel{position:relative;width:268px;flex:0 0 268px;border-left:1px solid #eee;padding:16px;overflow-y:auto;background:#fff;}
.k-sec{margin-bottom:16px;padding-bottom:16px;border-bottom:1px solid #f0f0f2;}
.k-sec:last-child{border-bottom:0;}
.k-sec-t{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:#16181f;margin-bottom:9px;}

.k-row{display:flex;gap:8px;}
.k-row2{display:flex;gap:8px;margin-bottom:8px;}
.k-panel input[type=text]{flex:1;min-width:0;padding:10px 12px;border:1px solid #d9d9de;border-radius:8px;font-size:14px;}
.k-row2 #kNumber{max-width:84px;text-align:center;}
.k-panel input[type=text]:focus{outline:0;border-color:var(--k-accent);}

.k-btn{display:inline-block;padding:10px 16px;border:1px solid #d9d9de;background:#fff;border-radius:8px;
	font-weight:700;font-size:14px;cursor:pointer;color:#16181f;text-align:center;}
.k-btn:hover{background:#f6f6f8;}
.k-accent{background:var(--k-accent);border-color:var(--k-accent);color:#111;}
.k-accent:hover{filter:brightness(.94);background:var(--k-accent);}
.k-ghost{background:transparent;}
.k-upload{width:100%;display:block;}
.k-upload.k-busy{opacity:.6;pointer-events:none;}
.k-uphint{font-size:11px;color:#9a9da6;margin-top:6px;}

.k-field{margin-bottom:12px;}
.k-field>label{display:block;font-size:12px;font-weight:700;color:#555;margin-bottom:5px;}
.k-field select,.k-field input[type=range]{width:100%;}
.k-field select{padding:9px 10px;border:1px solid #d9d9de;border-radius:8px;font-size:14px;background:#fff;}

.k-swatches{display:flex;flex-wrap:wrap;gap:6px;align-items:center;}
.k-sw{width:26px;height:26px;border-radius:50%;border:1px solid rgba(0,0,0,.15);cursor:pointer;padding:0;
	box-shadow:inset 0 0 0 2px #fff;}
.k-sw:hover{transform:scale(1.08);}
.k-sw-none{background:#fff;color:#c00;font-size:12px;line-height:24px;box-shadow:none;}
.k-colpick{width:30px;height:30px;padding:0;border:1px solid #d9d9de;border-radius:6px;background:#fff;cursor:pointer;}

.k-sizerow{display:flex;align-items:center;gap:8px;}
.k-sizerow input[type=range]{flex:1;min-width:0;}
.k-step{width:30px;height:30px;flex:0 0 30px;border:1px solid #d9d9de;background:#fff;border-radius:8px;
	font-size:17px;font-weight:700;line-height:1;cursor:pointer;color:#16181f;font-family:inherit;padding:0;}
.k-step:hover{background:#f6f6f8;border-color:var(--k-accent);}
.k-step:active{transform:scale(.94);}

.k-obj-btns{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:6px;}
.k-mini{padding:8px;border:1px solid #d9d9de;background:#fff;border-radius:7px;font-size:12.5px;font-weight:700;cursor:pointer;color:#333;}
.k-mini:hover{background:#f6f6f8;}
.k-danger{color:#c0202e;border-color:#f0c4c9;}
.k-danger:hover{background:#fdecee;}

.k-foot{display:flex;gap:10px;padding:10px 16px;border-top:1px solid #eee;background:#fafafa;}
.k-foot .k-save{margin-left:auto;padding:12px 26px;font-size:15px;}

@media(max-width:820px){
	.k-dialog{width:100vw;height:100vh;max-height:100vh;border-radius:0;}
	.k-body{flex-direction:column;}
	.k-panel{width:100%;flex:0 0 auto;border-left:0;border-top:1px solid #eee;max-height:44vh;}
	.k-stage-wrap{padding:12px;}
	.k-foot .k-save{padding:12px 18px;}
}

/* --- Odak: klavye kullanıcısına görünür, fare tıklamasında takılı kalmaz --- */
.kanvas-modal button:focus:not(:focus-visible),
.kanvas-modal input:focus:not(:focus-visible),
.kanvas-modal label:focus:not(:focus-visible){ outline:0; }
.kanvas-modal button:focus-visible,
.kanvas-modal input:focus-visible,
.kanvas-modal label:focus-visible{ outline:2.5px solid #16181f; outline-offset:2px; }