/* =====================================================================
   Kaşe Tasarım Editörü — Tasarım Belirteçleri (Design Tokens)
   Modern, sade bir görünüm için tek noktadan yönetilen renk/ölçü/gölge
   değerleri. Tüm sınıf/ID adları önceki sürümle birebir aynıdır; bu
   dosya sadece GÖRSEL bir yenilemedir, hiçbir işlevsellik değişmez.
   ===================================================================== */
.kt-editor-modal,
.kt-design-launcher {
	--kt-primary: #2563eb;
	--kt-primary-dark: #1d4ed8;
	--kt-primary-soft: #eef2ff;
	--kt-danger: #dc2626;
	--kt-danger-soft: #fef2f2;
	--kt-success: #16a34a;
	--kt-success-soft: #ecfdf5;
	--kt-surface: #ffffff;
	--kt-surface-2: #f8fafc;
	--kt-border: #e6e9f0;
	--kt-text: #0f172a;
	--kt-text-muted: #64748b;
	--kt-text-faint: #94a3b8;
	--kt-radius-sm: 7px;
	--kt-radius-md: 12px;
	--kt-radius-lg: 20px;
	--kt-radius-pill: 999px;
	--kt-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06), 0 1px 1px rgba(15, 23, 42, 0.04);
	--kt-shadow-md: 0 8px 24px -6px rgba(15, 23, 42, 0.18), 0 2px 8px -2px rgba(15, 23, 42, 0.08);
	--kt-shadow-lg: 0 24px 60px -12px rgba(15, 23, 42, 0.35), 0 8px 24px -8px rgba(15, 23, 42, 0.18);
	--kt-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* GÜVENLİK SIFIRLAMASI: Bazı temalar/WooCommerce, input/select/textarea gibi
   form elemanlarına sayfa genelinde genişlik (ör. width:100%) veren kurallar
   ekleyebiliyor. Bu kurallar editörümüzün İÇİNDEKİ küçük, özel kontrolleri
   (stepper kutucukları, font seçici vb.) ezip devasa/bozuk görünmesine yol
   açabiliyor. Bu yüzden editör kapsamında input/select/textarea'yı burada,
   en başta, kesin bir taban ile sıfırlıyoruz.
   NOT: <button> kasıtlı olarak buraya DAHİL EDİLMEDİ; araç çubuğu
   butonlarının kendi genişlik kuralları zaten çalışıyor ve bu genel
   sıfırlamanın onları ezmesini istemiyoruz. */
.kt-editor-modal input,
.kt-editor-modal select,
.kt-editor-modal textarea {
	box-sizing: border-box;
	width: auto;
	max-width: none;
	min-width: 0;
}

/* ============ Ürün sayfası: "Kaşemi Tasarla" başlatma butonu ============ */
.kt-design-launcher {
	margin: 10px 0;
}

.kt-open-editor-btn {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	background: var(--kt-surface);
	color: var(--kt-primary);
	border: 1.5px solid var(--kt-primary);
	border-radius: var(--kt-radius-pill);
	padding: 4px 11px;
	font-size: 11px;
	font-weight: 600;
	line-height: 1.3;
	cursor: pointer;
	transition: background 0.18s var(--kt-ease), color 0.18s var(--kt-ease), box-shadow 0.18s var(--kt-ease), transform 0.18s var(--kt-ease);
	max-width: 100%;
}

.kt-open-editor-btn:hover {
	background: var(--kt-primary);
	color: #fff;
	box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
	transform: translateY(-1px);
}

.kt-open-editor-btn .kt-btn-icon {
	display: inline-flex;
	width: 12px;
	height: 12px;
	flex-shrink: 0;
}

.kt-open-editor-btn .kt-btn-icon svg {
	width: 100%;
	height: 100%;
}

.kt-open-editor-btn .kt-btn-text {
	white-space: nowrap;
}

.kt-open-editor-btn .kt-btn-dim {
	font-weight: 500;
	font-size: 10px;
	opacity: 0.75;
	white-space: nowrap;
	padding-left: 6px;
	border-left: 1px solid currentColor;
	margin-left: 1px;
}

@media (max-width: 480px) {
	.kt-open-editor-btn .kt-btn-dim {
		display: none;
	}
}

/* ============ Modal overlay ============ */
.kt-editor-modal {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(10, 14, 26, 0.6);
	-webkit-backdrop-filter: blur(3px);
	backdrop-filter: blur(3px);
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	animation: kt-fade-in 0.18s var(--kt-ease);
}

@keyframes kt-fade-in {
	from { opacity: 0; }
	to { opacity: 1; }
}

@keyframes kt-scale-in {
	from { opacity: 0; transform: scale(0.97) translateY(6px); }
	to { opacity: 1; transform: scale(1) translateY(0); }
}

.kt-editor-inner {
	position: relative;
	background: var(--kt-surface);
	width: 96%;
	max-width: 1100px;
	height: 90vh;
	max-height: 800px;
	border-radius: var(--kt-radius-lg);
	display: flex;
	flex-direction: column;
	overflow: hidden;
	box-shadow: var(--kt-shadow-lg);
	animation: kt-scale-in 0.22s var(--kt-ease);
}

/* ============ Masaüstü üst çubuk: solda Kapat (kırmızı), sağda Kaydet (yeşil) ============ */
.kt-editor-header-desktop {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 10px 14px;
	border-bottom: 1px solid var(--kt-border);
	background: var(--kt-surface);
	flex-shrink: 0;
}

.kt-desktop-header-btn {
	display: flex;
	align-items: center;
	gap: 7px;
	border: none;
	border-radius: var(--kt-radius-pill);
	padding: 7px 16px;
	font-size: 12.5px;
	font-weight: 600;
	line-height: 1;
	cursor: pointer;
	transition: background 0.15s var(--kt-ease), color 0.15s var(--kt-ease), box-shadow 0.15s var(--kt-ease), transform 0.15s var(--kt-ease);
}

.kt-desktop-header-btn:hover {
	transform: translateY(-1px);
}

.kt-desktop-header-btn .kt-tool-icon {
	width: 15px;
	height: 15px;
}

.kt-desktop-header-close {
	color: var(--kt-danger);
	background: var(--kt-danger-soft);
}

.kt-desktop-header-close:hover {
	background: #fee2e2;
	box-shadow: 0 4px 10px rgba(220, 38, 38, 0.16);
}

.kt-desktop-header-confirm {
	color: var(--kt-success);
	background: var(--kt-success-soft);
}

.kt-desktop-header-confirm:hover {
	background: #d1fae5;
	box-shadow: 0 4px 10px rgba(22, 163, 74, 0.18);
}

/* ============ Mobil üst çubuk: Kapat | Kaşe Tasarla | Kaydet ============ */
.kt-mobile-topbar {
	display: none; /* varsayılan: masaüstünde gizli */
	align-items: center;
	justify-content: space-between;
	padding: 4px 6px;
	border-bottom: 1px solid var(--kt-border);
	flex-shrink: 0;
	background: var(--kt-surface);
}

.kt-mobile-topbar-btn {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 1px;
	min-width: 46px;
	padding: 4px 9px;
	border-radius: var(--kt-radius-md);
	background: transparent;
	border: none;
	color: var(--kt-text-muted);
	flex-shrink: 0;
	line-height: 1;
	transition: transform 0.15s var(--kt-ease);
}

.kt-mobile-topbar-btn:active {
	transform: scale(0.94);
}

.kt-mobile-topbar-btn-label {
	font-size: 9px;
	font-weight: 700;
	line-height: 1;
	white-space: nowrap;
	letter-spacing: 0.01em;
}

.kt-mobile-topbar-btn .kt-tool-icon {
	width: 16px;
	height: 16px;
}

.kt-mobile-topbar-close {
	color: var(--kt-danger);
	background: var(--kt-danger-soft);
}

.kt-mobile-topbar-close:active {
	background: #fee2e2;
}

.kt-mobile-topbar-confirm {
	color: var(--kt-success);
	background: var(--kt-success-soft);
}

.kt-mobile-topbar-confirm:active {
	background: #d1fae5;
}

.kt-mobile-topbar-title {
	flex: 1;
	text-align: center;
	font-size: 12.5px;
	font-weight: 700;
	color: var(--kt-text);
	letter-spacing: -0.01em;
}

/* ============ Editör gövdesi ============ */
.kt-editor-body {
	flex: 1;
	display: flex;
	overflow: hidden;
	min-height: 0;
}

/* ============ Masaüstü sol araç paneli ============ */
.kt-toolbar {
	width: 188px;
	flex-shrink: 0;
	background: linear-gradient(180deg, #111827 0%, #0b1220 100%);
	padding: 18px 12px;
	display: flex;
	flex-direction: column;
	gap: 3px;
	overflow-y: auto;
}

.kt-toolbar-sep {
	height: 1px;
	background: rgba(255, 255, 255, 0.08);
	margin: 9px 6px;
	flex-shrink: 0;
}

.kt-tool-btn {
	display: flex;
	align-items: center;
	gap: 12px;
	background: transparent;
	border: none;
	color: #aab4c8;
	padding: 10px 12px;
	border-radius: var(--kt-radius-sm);
	cursor: pointer;
	font-size: 13px;
	font-weight: 500;
	line-height: 1;
	text-align: left;
	transition: background 0.15s var(--kt-ease), color 0.15s var(--kt-ease), transform 0.15s var(--kt-ease);
}

.kt-tool-icon {
	width: 20px;
	height: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.kt-tool-icon svg {
	width: 100%;
	height: 100%;
	display: block;
}

.kt-tool-label {
	display: inline-block;
	line-height: 1.2;
}

.kt-tool-btn:hover:not(:disabled) {
	background: rgba(255, 255, 255, 0.07);
	color: #fff;
	transform: translateX(2px);
}

.kt-tool-btn.is-active {
	background: var(--kt-primary);
	color: #fff;
	box-shadow: 0 4px 12px rgba(37, 99, 235, 0.35);
}

.kt-tool-btn:disabled {
	opacity: 0.32;
	cursor: not-allowed;
}

.kt-tool-btn-danger:hover:not(:disabled) {
	background: rgba(220, 38, 38, 0.18);
	color: #fca5a5;
	transform: none;
}

/* ============ Seçili metin: kompakt gelişmiş ayar paneli ("Ayarlar" ile açılır) ============ */
/* ÖNEMLİ: Bu panel, tuvalin (kt-canvas-area) DÜZENİNE dahil değildir; onun
   ÜZERİNDE yüzen (position:absolute) bağımsız bir kutudur. Bu sayede panel
   açılıp kapandığında tuvalin boyutu/konumu ASLA değişmez. Konumu JS ile
   kayan araç çubuğunun hemen bitişiğine yerleştirilir. */
.kt-object-toolbar {
	position: absolute;
	z-index: 29;
	max-width: 94%;
	background: rgba(255, 255, 255, 0.92);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	border: 1px solid var(--kt-border);
	border-radius: var(--kt-radius-md);
	box-shadow: var(--kt-shadow-md);
	padding: 9px 11px;
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 11px;
	overflow-x: auto;
	white-space: nowrap;
	animation: kt-scale-in 0.15s var(--kt-ease);
}

.kt-detail-field {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 3px;
	flex-shrink: 0;
}

.kt-detail-label {
	font-size: 9px;
	font-weight: 700;
	color: var(--kt-text-faint);
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.kt-detail-select {
	font-size: 11px !important;
	padding: 3px 6px !important;
	border: 1px solid var(--kt-border) !important;
	border-radius: var(--kt-radius-sm) !important;
	background: var(--kt-surface-2) !important;
	color: var(--kt-text) !important;
	max-width: 120px !important;
	height: 25px !important;
	line-height: 1.2 !important;
	font-weight: 500 !important;
	-webkit-appearance: none;
	appearance: none;
}

/* Sayısal +/- adım kontrolü: kaydırıcı (range) yerine kullanılır, çünkü
   yatay kaydırılabilir bir panel içindeki range'ler yanlışlıkla parmakla
   kaydırılıp değeri değiştirebiliyordu. Boyutlar !important ile sabitlenir,
   çünkü bazı temaların genel form stilleri bu küçük kutucukları ezip
   devasa/bozuk gösterebiliyor. */
.kt-stepper {
	display: flex !important;
	align-items: center !important;
	border: 1px solid var(--kt-border) !important;
	border-radius: var(--kt-radius-sm) !important;
	background: var(--kt-surface-2) !important;
	height: 25px !important;
	width: auto !important;
	overflow: hidden !important;
	flex-shrink: 0 !important;
}

.kt-stepper-btn {
	width: 20px !important;
	height: 25px !important;
	min-width: 20px !important;
	max-width: 20px !important;
	flex: 0 0 20px !important;
	border: none !important;
	background: transparent !important;
	color: var(--kt-text-muted) !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	line-height: 1 !important;
	padding: 0 !important;
	margin: 0 !important;
	cursor: pointer;
	transition: background 0.12s var(--kt-ease), color 0.12s var(--kt-ease);
}

.kt-stepper-btn:hover {
	background: var(--kt-primary-soft);
	color: var(--kt-primary);
}

.kt-stepper-input {
	width: 34px !important;
	min-width: 34px !important;
	max-width: 34px !important;
	flex: 0 0 34px !important;
	height: 25px !important;
	border: none !important;
	border-left: 1px solid var(--kt-border) !important;
	border-right: 1px solid var(--kt-border) !important;
	background: transparent !important;
	text-align: center !important;
	font-size: 11px !important;
	font-weight: 600 !important;
	line-height: 1.2 !important;
	padding: 0 2px !important;
	margin: 0 !important;
	color: var(--kt-text);
	/* Sayı ok tuşlarını (spinner) gizle: kendi +/- düğmelerimiz var. */
	-moz-appearance: textfield;
}

.kt-stepper-input::-webkit-outer-spin-button,
.kt-stepper-input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.kt-detail-field-checkbox {
	flex-direction: row;
	align-items: center;
	gap: 6px;
}

.kt-detail-field-checkbox .kt-detail-label {
	text-transform: none;
	font-size: 11px;
	font-weight: 600;
	color: var(--kt-text-muted);
}

.kt-detail-field-checkbox input[type="checkbox"] {
	width: 15px !important;
	height: 15px !important;
	min-width: 15px !important;
	flex: 0 0 15px !important;
	margin: 0 !important;
	accent-color: var(--kt-primary);
}

.kt-detail-iconbtn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 25px;
	height: 25px;
	flex-shrink: 0;
	background: var(--kt-surface-2);
	border: 1px solid var(--kt-border);
	border-radius: var(--kt-radius-sm);
	color: var(--kt-text-muted);
	cursor: pointer;
	margin-bottom: 1px;
	transition: border-color 0.15s var(--kt-ease), color 0.15s var(--kt-ease), background 0.15s var(--kt-ease);
}

.kt-detail-iconbtn:hover {
	border-color: var(--kt-primary);
	color: var(--kt-primary);
	background: var(--kt-primary-soft);
}

.kt-detail-iconbtn .kt-tool-icon {
	width: 13px;
	height: 13px;
}

/* ============ Kayan (Canva benzeri) hızlı biçimlendirme çubuğu ============ */
.kt-floating-toolbar {
	position: absolute;
	z-index: 30;
	display: flex;
	align-items: center;
	gap: 1px;
	background: rgba(255, 255, 255, 0.96);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	border: 1px solid var(--kt-border);
	border-radius: var(--kt-radius-md);
	padding: 4px;
	box-shadow: var(--kt-shadow-md);
	max-width: 92%;
	overflow-x: auto;
	animation: kt-scale-in 0.15s var(--kt-ease);
}

.kt-float-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 25px;
	height: 25px;
	flex-shrink: 0;
	background: transparent;
	border: none;
	border-radius: var(--kt-radius-sm);
	color: var(--kt-text);
	font-size: 12px;
	cursor: pointer;
	transition: background 0.12s var(--kt-ease), color 0.12s var(--kt-ease), transform 0.12s var(--kt-ease);
}

.kt-float-btn .kt-tool-icon {
	width: 13px;
	height: 13px;
}

.kt-float-btn:hover {
	background: var(--kt-primary-soft);
	color: var(--kt-primary);
	transform: translateY(-1px);
}

.kt-float-btn.is-active {
	background: var(--kt-primary);
	color: #fff;
}

.kt-float-btn-danger:hover {
	background: var(--kt-danger-soft);
	color: var(--kt-danger);
}

.kt-float-btn-labeled {
	width: auto;
	gap: 4px;
	padding: 0 9px;
}

.kt-float-btn-text {
	font-size: 10.5px;
	font-weight: 700;
	white-space: nowrap;
}

.kt-float-sep {
	width: 1px;
	height: 15px;
	background: var(--kt-border);
	margin: 0 3px;
	flex-shrink: 0;
}

#kt-detail-toggle.is-open {
	background: var(--kt-primary-soft);
	color: var(--kt-primary);
}

/* Logo (veya başka metin-olmayan bir nesne) seçiliyken, kayan araç
   çubuğundaki metne özel araçlar (kalın/italik/altı çizili/üstü çizili/
   hizala/Ayarlar) anlamsız olduğu için gizlenir. */
.kt-floating-toolbar.kt-ft-logo-mode .kt-text-only-btn {
	display: none !important;
}

/* ============ Logo işleniyor katmanı ============ */
.kt-logo-processing {
	position: absolute;
	inset: 0;
	z-index: 40;
	background: rgba(255, 255, 255, 0.72);
	-webkit-backdrop-filter: blur(2px);
	backdrop-filter: blur(2px);
	display: flex;
	align-items: center;
	justify-content: center;
}

.kt-logo-processing-box {
	display: flex;
	align-items: center;
	gap: 10px;
	background: var(--kt-surface);
	border: 1px solid var(--kt-border);
	border-radius: var(--kt-radius-pill);
	padding: 10px 18px;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--kt-text);
	box-shadow: var(--kt-shadow-md);
}

.kt-logo-spinner {
	width: 15px;
	height: 15px;
	border-radius: 50%;
	border: 2px solid var(--kt-primary-soft);
	border-top-color: var(--kt-primary);
	animation: kt-spin 0.7s linear infinite;
	flex-shrink: 0;
}

@keyframes kt-spin {
	to { transform: rotate(360deg); }
}

/* ============ Orta tuval alanı ============ */
.kt-canvas-area {
	position: relative;
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	/* Damalı desen: gerçek baskı alanının (küçük, kesikli çerçeveli dikdörtgen)
	   çevresindeki boş çalışma alanından net biçimde ayırt edilmesi için. */
	background-image:
		linear-gradient(45deg, #eef1f6 25%, transparent 25%),
		linear-gradient(-45deg, #eef1f6 25%, transparent 25%),
		linear-gradient(45deg, transparent 75%, #eef1f6 75%),
		linear-gradient(-45deg, transparent 75%, #eef1f6 75%);
	background-size: 20px 20px;
	background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
	background-color: #fbfcfe;
	padding: 20px;
	overflow: auto;
	min-height: 0;
}

/* Yatay/dikey merkez hizalama referans çizgileri (statik görsel yardımcı) */
/* NOT: Eskiden burada CSS ile HER ZAMAN görünen statik bir artı (+) kılavuz
   çizgisi vardı. Bu, nesne tam ortalanmasa bile çizginin sürekli görünmesine
   ve "ortalı gibi görünüp aslında birkaç mm kayık olma" karışıklığına yol
   açıyordu. Artık kılavuz çizgileri Konva tarafında, nesne GERÇEKTEN tam
   ortaya geldiğinde (küçük bir toleransla) dinamik olarak çiziliyor ve
   nesne o noktaya yapıştırılıyor (bkz. frontend.js: checkSnapGuides). */

.kt-canvas-wrapper {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
}

.kt-canvas-shape {
	background: #fff;
	border: 2px dashed var(--kt-primary);
	box-shadow: var(--kt-shadow-md);
	border-radius: 3px;
	position: relative;
	overflow: hidden; /* yuvarlak/elips baskı alanlarında tuval içeriğini şekle göre kırpar */
}

/* Metin düzenleme kutusu: bir metne çift tıklandığında/dokunulduğunda tuval
   üzerinde tam o metnin yerine oturan, düzenlenebilir kutu. */
.kt-konva-edit-textarea {
	position: fixed;
	z-index: 100050;
	margin: 0;
	padding: 3px 5px;
	border: 2px solid var(--kt-primary);
	border-radius: var(--kt-radius-sm);
	background: #ffffff;
	box-shadow: var(--kt-shadow-md);
	outline: none;
	resize: none;
	overflow: hidden;
	box-sizing: border-box;
}

/* Kullanıcı isteyerek metni seçerse (ör. sürükleyerek), tarayıcının sert
   mavi/beyaz varsayılan seçim rengi yerine daha yumuşak bir vurgu kullanılır. */
.kt-konva-edit-textarea::selection {
	background: rgba(37, 99, 235, 0.22);
	color: inherit;
}

.kt-canvas-dim-label {
	position: relative;
	z-index: 1;
	margin-top: 12px;
	font-size: 12px;
	font-weight: 600;
	color: var(--kt-text-muted);
	background: rgba(255, 255, 255, 0.9);
	box-shadow: var(--kt-shadow-sm);
	padding: 3px 10px;
	border-radius: var(--kt-radius-pill);
}

/* ============ Mobil: "Daha Fazla" ikincil çubuğu ============ */
.kt-mobile-more-panel {
	display: none;
	flex-shrink: 0;
	background: var(--kt-surface);
	border-top: 1px solid var(--kt-border);
	padding: 9px 10px;
	gap: 8px;
	overflow-x: auto;
	white-space: nowrap;
}

.kt-mobile-more-panel.is-open {
	display: flex;
}

.kt-more-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: var(--kt-surface-2);
	border: 1px solid var(--kt-border);
	border-radius: var(--kt-radius-pill);
	padding: 7px 13px;
	font-size: 11.5px;
	font-weight: 600;
	color: var(--kt-text);
	flex-shrink: 0;
}

.kt-more-btn .kt-tool-icon {
	width: 15px;
	height: 15px;
}

.kt-more-btn:disabled {
	opacity: 0.4;
}

.kt-more-btn-danger {
	color: var(--kt-danger);
	border-color: #fecaca;
	background: var(--kt-danger-soft);
}

/* ============ Mobil alt gezinme çubuğu ============ */
.kt-mobile-bottom-nav {
	display: none;
	flex-shrink: 0;
	background: var(--kt-surface);
	border-top: 1px solid var(--kt-border);
	padding: 7px 4px calc(7px + env(safe-area-inset-bottom, 0px)) 4px;
	gap: 2px;
	overflow-x: auto;
	overflow-y: hidden;
	-webkit-overflow-scrolling: touch;
	scroll-snap-type: x proximity;
	max-width: 100%;
	box-sizing: border-box;
}

.kt-bottom-nav-btn {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 3px;
	background: transparent;
	border: none;
	color: var(--kt-text-muted);
	font-size: 10px;
	font-weight: 600;
	padding: 7px 4px;
	width: 64px;
	flex-shrink: 0;
	border-radius: var(--kt-radius-md);
	scroll-snap-align: start;
	text-align: center;
	white-space: nowrap;
	transition: background 0.15s var(--kt-ease), color 0.15s var(--kt-ease);
}

.kt-bottom-nav-btn .kt-tool-icon {
	width: 19px;
	height: 19px;
}

.kt-bottom-nav-btn:disabled {
	opacity: 0.38;
}

.kt-bottom-nav-btn:not(:disabled):active,
.kt-bottom-nav-btn.is-active {
	background: var(--kt-primary-soft);
	color: var(--kt-primary);
}

#kt-mobile-more-toggle.is-open {
	background: var(--kt-primary-soft);
	color: var(--kt-primary);
}

/* ============ MOBİL DÜZENİ ============ */
@media (max-width: 782px) {
	.kt-editor-inner {
		width: 100%;
		height: 100%;
		max-height: 100%;
		border-radius: 0;
		animation: none;
	}

	/* Masaüstü kapatma çubuğu gizlenir, yerine üst gezinme çubuğu gelir */
	.kt-editor-header-desktop {
		display: none;
	}

	.kt-mobile-topbar {
		display: flex;
	}

	/* Eski sol araç paneli mobilde tamamen kapalı: yerini alt gezinme çubuğu alır */
	.kt-toolbar {
		display: none;
	}

	.kt-editor-body {
		flex-direction: column;
	}

	/* Tuval alanına ayrılan boşluk en üst seviyeye çıkarıldı */
	.kt-canvas-area {
		flex: 1;
		padding: 12px;
	}

	.kt-object-toolbar {
		padding: 7px 10px;
	}

	.kt-mobile-bottom-nav {
		display: flex;
	}
}