/* Stil 3 – dikdörtgen 3D duvar saati (Model 3) */

.bho-preview-clock--style-3 {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.bho-preview-clock--style-3 .bho-scene {
	width: 100%;
	max-width: 580px;
	height: auto;
	min-height: 0;
	margin: 0 auto;
	padding: 0;
	perspective: none;
	filter: none;
	border-radius: 0;
	overflow: visible;
}

.bho-preview-clock--style-3 .bho-scene .bho-upload-loader {
	border-radius: 14px;
}

.bho-preview-clock--style-3 #scene {
	perspective: 900px;
	perspective-origin: 50% 50%;
	transform-style: preserve-3d;
	display: flex;
	justify-content: center;
	align-items: center;
	height: 400px;
	width: 100%;
	cursor: grab;
	touch-action: none;
	user-select: none;
	-webkit-font-smoothing: antialiased;
}

.bho-preview-clock--style-3 #product {
	position: relative;
	transform-style: preserve-3d;
	transition: none;
	cursor: grab;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	transform: translateZ(0);
	will-change: transform;
}

.bho-preview-clock--style-3 .front-face {
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	transform: translateZ(7px);
	transform-style: preserve-3d;
	-webkit-font-smoothing: antialiased;
	text-rendering: geometricPrecision;
	shape-rendering: geometricPrecision;
}

.bho-preview-clock--style-3 #tkG,
.bho-preview-clock--style-3 #nmG,
.bho-preview-clock--style-3 #hH,
.bho-preview-clock--style-3 #mH,
.bho-preview-clock--style-3 #sH,
.bho-preview-clock--style-3 .editable-preview-text {
	transform: translateZ(0.1px);
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
}

.bho-preview-clock--style-3 #tkG text,
.bho-preview-clock--style-3 #nmG text {
	text-rendering: geometricPrecision;
	shape-rendering: geometricPrecision;
	paint-order: stroke fill;
	vector-effect: non-scaling-stroke;
}

.bho-preview-clock--style-3 #product:active,
.bho-preview-clock--style-3 #scene:active {
	cursor: grabbing;
}

.bho-preview-clock--style-3 #edgeCanvas {
	display: none !important;
}

.bho-preview-clock--style-3 .front-face,
.bho-preview-clock--style-3 .back-face {
	backface-visibility: hidden;
}

.bho-preview-clock--style-3 #prod-back {
	position: absolute;
	top: 0;
	left: 0;
	width: 540px;
	height: 360px;
	transform: translateZ(-2.5px) rotateY(180deg);
	backface-visibility: hidden;
	border-radius: 14px;
	overflow: hidden;
}

.bho-preview-clock--style-3 #prod-edge {
	position: absolute;
	top: 0;
	left: 0;
	width: 540px;
	height: 360px;
	pointer-events: none;
	transform: translateZ(0) scale(1.012, 1.012);
	transform-origin: 50% 50%;
	transform-style: preserve-3d;
	filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.24));
}

.bho-preview-clock--style-3 .edge-face {
	display: block;
	width: 540px;
	height: 360px;
	overflow: visible;
}

.bho-preview-clock--style-3 .preview-caption {
	text-align: center;
	font-size: 11px;
	color: #a0917a;
	margin-top: 8px;
	letter-spacing: 0.3px;
	width: 100%;
}

.bho-preview-clock--style-3 .preview-note {
	text-align: center;
	font-size: 12px;
	line-height: 1.45;
	color: #6f614f;
	margin: 8px auto 0;
	max-width: 520px;
	padding: 0 8px;
	font-weight: 500;
	width: 100%;
}

.bho-preview-clock--style-3 .editable-preview-text {
	cursor: pointer;
}

.bho-preview-clock--style-3 .editable-preview-text:hover {
	opacity: 0.94;
}

/* 5'li fotoğraf slot ızgarası (prototip upload-grid) */
.birhediyen-preview-style-3 .bho-preview-card > #bhoUploadLabel,
.birhediyen-preview-style-3 .bho-preview-card > .bho-upload--mobile,
.birhediyen-preview-style-3 .bho-preview-card > #bhoUploadPreview,
.birhediyen-preview-style-3 .bho-preview-card > .bho-upload-preview:not(.bho-upload-preview--desktop),
.birhediyen-preview-style-3 #bhoMobileWrap > #bhoUploadLabel {
	display: none !important;
}

.bho-upload-grid--style-3,
.bho-preview-card > .bho-upload-grid--style-3 {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 7px;
	margin-top: 12px;
	width: 100%;
	align-self: stretch;
}

.bho-upload-grid--style-3 .slot-wrap {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 5px;
}

.bho-upload-grid--style-3 .slot-box {
	width: 100%;
	aspect-ratio: 1;
	border-radius: 14px;
	border: 1px dashed rgba(132, 107, 70, 0.24);
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.82), rgba(247, 242, 233, 0.92));
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	overflow: hidden;
	position: relative;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 2px 10px rgba(32, 22, 10, 0.04);
	transition: border-color 0.18s, background 0.18s, box-shadow 0.18s, transform 0.18s;
}

.bho-upload-grid--style-3 .slot-box:hover {
	border-color: rgba(182, 137, 71, 0.52);
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(250, 245, 236, 0.98));
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), 0 8px 18px rgba(26, 17, 9, 0.07);
	transform: translateY(-1px);
}

.bho-upload-grid--style-3 .slot-box.active-slot {
	border-color: rgba(191, 137, 40, 0.92);
	box-shadow: 0 0 0 2px rgba(191, 137, 40, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.95), 0 8px 18px rgba(26, 17, 9, 0.08);
}

.bho-upload-grid--style-3 .slot-box img.slot-preview {
	width: 100%;
	height: 100%;
	object-fit: cover !important;
	object-position: center center !important;
	position: absolute;
	inset: 0;
	display: none;
	border-radius: 13px;
	z-index: 2;
}

.bho-upload-grid--style-3 .slot-box .upload-hint {
	position: relative;
	z-index: 1;
	max-width: 82%;
	margin-top: 7px;
	font-size: 7.2px;
	line-height: 1.25;
	font-weight: 600;
	text-align: center;
	color: #8b7a63;
	letter-spacing: 0.05px;
}

.bho-upload-grid--style-3 .slot-box img.upload-icon {
	width: 16px;
	height: 16px;
	padding: 4px;
	object-fit: contain;
	position: relative;
	inset: auto;
	display: block;
	border-radius: 10px;
	z-index: 1;
	opacity: 0.98;
	background: linear-gradient(180deg, rgba(247, 239, 224, 0.96), rgba(237, 224, 197, 0.96));
	border: 1px solid rgba(188, 149, 88, 0.26);
	box-shadow: 0 4px 10px rgba(35, 24, 10, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.82);
	filter: none;
	transition: transform 0.18s, box-shadow 0.18s, background 0.18s;
}

.bho-upload-grid--style-3 .slot-box:hover img.upload-icon {
	transform: translateY(-1px) scale(1.03);
	box-shadow: 0 8px 16px rgba(35, 24, 10, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.9);
	background: linear-gradient(180deg, rgba(250, 243, 231, 1), rgba(241, 229, 205, 1));
}

.bho-upload-grid--style-3 .slot-label {
	font-size: 7.5px;
	color: #776652;
	text-align: center;
	line-height: 1.28;
	font-weight: 600;
	letter-spacing: 0.1px;
}

.bho-upload-grid--style-3 .slot-box input {
	display: none;
}

@media (max-width: 900px) {
	.bho-preview-clock--style-3 .bho-scene,
	#bhoMobileWrap .bho-preview-clock--style-3 .bho-scene {
		width: 100% !important;
		max-width: 100% !important;
		height: auto !important;
		margin: 0 auto !important;
	}

	.bho-preview-clock--style-3 #scene,
	#bhoMobileWrap .bho-preview-clock--style-3 #scene {
		width: 100%;
		height: 300px;
		overflow: hidden;
		perspective: 760px;
	}

	.bho-preview-clock--style-3 #product,
	#bhoMobileWrap .bho-preview-clock--style-3 #product {
		zoom: 0.66;
		transform-origin: center center;
	}

	.bho-preview-clock--style-3 .preview-caption,
	#bhoMobileWrap .bho-preview-clock--style-3 .preview-caption {
		font-size: 12px;
		line-height: 1.35;
		white-space: normal;
	}

	.bho-preview-clock--style-3 .preview-note,
	#bhoMobileWrap .bho-preview-clock--style-3 .preview-note {
		font-size: 11px;
		line-height: 1.35;
		max-width: 320px;
	}

	.bho-upload-grid--style-3,
	#bhoMobileUploadStack .bho-upload-grid--style-3 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 8px;
		margin-top: 12px;
	}

	.bho-upload-grid--style-3 .slot-box {
		border-radius: 13px;
		min-height: 108px;
	}

	.bho-upload-grid--style-3 .slot-label {
		font-size: 8px;
		line-height: 1.25;
	}
}

@media (max-width: 430px) {
	.bho-preview-clock--style-3 #scene,
	#bhoMobileWrap .bho-preview-clock--style-3 #scene {
		height: 285px;
	}

	.bho-preview-clock--style-3 #product,
	#bhoMobileWrap .bho-preview-clock--style-3 #product {
		zoom: 0.61;
	}

	.bho-upload-grid--style-3 .slot-box {
		min-height: 100px;
	}
}

@media (max-width: 380px) {
	.bho-preview-clock--style-3 #scene,
	#bhoMobileWrap .bho-preview-clock--style-3 #scene {
		height: 270px;
	}

	.bho-preview-clock--style-3 #product,
	#bhoMobileWrap .bho-preview-clock--style-3 #product {
		zoom: 0.56;
	}
}