/* Stil 4 – dikey fotoğraflı duvar saati (Model 4) */

@font-face {
	font-family: 'AvalonB';
	src: local('AvalonB'), local('Avalon Bold');
	font-weight: 700;
	font-style: normal;
}

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

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

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

.bho-preview-clock--style-4 #scene {
	perspective: 1050px;
	display: flex;
	justify-content: center;
	align-items: center;
	height: 690px;
	width: 100%;
	cursor: grab;
	overflow: visible;
	touch-action: none;
	user-select: none;
}

.bho-preview-clock--style-4 #product {
	--w: 300px;
	--h: 600px;
	--d: 0px;
	position: relative;
	width: var(--w);
	height: var(--h);
	transform-style: preserve-3d;
	cursor: grab;
	will-change: transform;
}

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

.bho-preview-clock--style-4 .product-front,
.bho-preview-clock--style-4 .product-back,
.bho-preview-clock--style-4 .product-edge {
	position: absolute;
	transform-style: preserve-3d;
	backface-visibility: hidden;
}

.bho-preview-clock--style-4 .product-front {
	inset: 0;
	border-radius: 42px;
	overflow: hidden;
	transform: translateZ(0);
	background: var(--red);
	box-shadow: 0 28px 55px rgba(26, 17, 9, 0.3), 0 8px 18px rgba(26, 17, 9, 0.2);
	cursor: pointer;
}

.bho-preview-clock--style-4 .product-front.photo-loaded {
	cursor: move;
}

.bho-preview-clock--style-4 .product-front::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(110deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0) 32%, rgba(0, 0, 0, 0.1) 75%, rgba(0, 0, 0, 0.18));
	z-index: 5;
	pointer-events: none;
	mix-blend-mode: soft-light;
}

.bho-preview-clock--style-4 .product-front::after {
	display: none;
}

.bho-preview-clock--style-4 .product-front.photo-loaded::after {
	display: none;
}

.bho-preview-clock--style-4 .product-front.photo-loaded::before {
	background: linear-gradient(110deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0) 30%, rgba(0, 0, 0, 0.05) 78%, rgba(0, 0, 0, 0.1));
	mix-blend-mode: normal;
}

.bho-preview-clock--style-4 .photo-bg {
	position: absolute;
	inset: 0;
	background:
		radial-gradient(circle at 50% 18%, rgba(255, 236, 196, 0.2), rgba(255, 255, 255, 0) 28%),
		linear-gradient(180deg, #70482f 0%, #5d3a26 38%, #4b301f 68%, #352116 100%);
	z-index: 0;
}

.bho-preview-clock--style-4 .customer-photo-bg {
	position: absolute;
	inset: -20px;
	width: calc(100% + 40px);
	height: calc(100% + 40px);
	object-fit: cover;
	object-position: center center;
	display: none;
	z-index: 1;
	opacity: 0.78;
	filter: blur(10px) brightness(0.82) saturate(1.08);
	transform: scale(1.14);
	transform-origin: center center;
	will-change: transform, filter;
}

.bho-preview-clock--style-4 .customer-photo {
	position: absolute;
	left: 50%;
	top: 50%;
	width: auto;
	height: auto;
	max-width: none;
	max-height: none;
	object-fit: unset;
	object-position: center center;
	display: none;
	z-index: 2;
	transform-origin: center center;
}

.bho-preview-clock--style-4 .svg-layer {
	position: absolute;
	inset: 0;
	z-index: 3;
	pointer-events: none;
}

.bho-preview-clock--style-4 .svg-layer svg {
	width: 100%;
	height: 100%;
	display: block;
}

.bho-preview-clock--style-4 .svg-layer svg image,
.bho-preview-clock--style-4 .svg-layer svg foreignObject {
	display: none !important;
	visibility: hidden !important;
	opacity: 0 !important;
}

.bho-preview-clock--style-4 .hands-overlay {
	position: absolute;
	left: 50%;
	top: 22.2%;
	width: 40.5%;
	max-width: 127px;
	transform: translate(-16.5%, -84.5%);
	z-index: 6;
	pointer-events: none;
	opacity: 0.98;
}

.bho-preview-clock--style-4 .second-hand {
	position: absolute;
	left: 50%;
	top: 22.2%;
	width: 0;
	height: 0;
	transform: translate(-50%, -50%) rotate(0deg);
	transform-origin: center center;
	z-index: 8;
	pointer-events: none;
}

.bho-preview-clock--style-4 .second-hand::before {
	content: "";
	position: absolute;
	left: -1.5px;
	top: -85px;
	width: 3px;
	height: 101px;
	background: #ff0000;
	border-radius: 999px;
	box-shadow: 0 0 3px rgba(255, 0, 0, 0.18);
}

.bho-preview-clock--style-4 .second-cap {
	position: absolute;
	left: 50%;
	top: 22.2%;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: radial-gradient(circle at 35% 35%, #f1f3f6 0%, #cfd6de 45%, #a1acb7 75%, #7d8791 100%);
	transform: translate(-50%, -50%);
	z-index: 9;
	pointer-events: none;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.24);
}

.bho-preview-clock--style-4 .photo-placeholder {
	position: absolute;
	left: 50%;
	top: 55.5%;
	transform: translate(-50%, -50%);
	z-index: 4;
	width: 60%;
	text-align: center;
	color: rgba(255, 255, 255, 0.96);
	font-weight: 800;
	font-size: 22px;
	line-height: 1.18;
	letter-spacing: 0.2px;
	pointer-events: none;
}

.bho-preview-clock--style-4 .photo-placeholder .ph-sub {
	display: none;
}

.bho-preview-clock--style-4 .photo-placeholder .ph-icon {
	width: 46px;
	height: 46px;
	margin: 0 auto 10px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.18);
	border: 1.5px solid rgba(255, 255, 255, 0.45);
	display: grid;
	place-items: center;
	font-size: 24px;
	box-shadow: 0 6px 14px rgba(0, 0, 0, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.28);
}

.bho-preview-clock--style-4 .custom-text-band {
	position: absolute;
	left: 0;
	right: 0;
	top: var(--band-top, 73%);
	height: var(--band-height, 72px);
	background: #000;
	border-radius: 0;
	z-index: 30;
	pointer-events: none;
	box-shadow: none;
	opacity: 1;
}

.bho-preview-clock--style-4 .single-text-overlay {
	position: absolute;
	left: 50%;
	top: var(--text-center, 80.8%);
	transform: translate(-50%, -50%) translateZ(10px);
	z-index: 31;
	width: 86%;
	max-width: 260px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	transform-style: flat;
	will-change: transform;
	filter: none;
	pointer-events: none;
	isolation: isolate;
}

.bho-preview-clock--style-4 .single-text-overlay,
.bho-preview-clock--style-4 .single-text-overlay * {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: geometricPrecision;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
}

.bho-preview-clock--style-4 .bottom-artifact-mask {
	display: none !important;
}

.bho-preview-clock--style-4 .single-text-overlay .quote-text {
	width: 100%;
	max-width: 272px;
	margin: 0 auto;
	text-align: center;
	color: #fff;
	font-family: 'AvalonB', 'Playfair Display', serif;
	font-size: 14px;
	line-height: 1.18;
	font-weight: 800;
	letter-spacing: 0.04px;
	text-wrap: balance;
	text-shadow: 0 2px 10px rgba(0, 0, 0, 0.72);
}

.bho-preview-clock--style-4 .single-text-overlay .quote-text .qline {
	display: block;
	width: 100%;
	text-align: center;
	white-space: normal;
	margin: 1px 0;
}

.bho-preview-clock--style-4 .single-text-overlay .name-line {
	margin-top: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	flex-wrap: nowrap;
	color: #fff;
	line-height: 1;
}

.bho-preview-clock--style-4 .single-text-overlay .name-line .cluster {
	display: none;
}

.bho-preview-clock--style-4 .single-text-overlay .name-line .name {
	font-family: 'Dancing Script', 'Segoe Script', 'Brush Script MT', cursive;
	font-size: 28px;
	font-weight: 700;
	font-style: normal;
	color: #fff;
	min-width: auto;
	text-align: center;
	white-space: nowrap;
	letter-spacing: 0.2px;
	text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

.bho-preview-clock--style-4 .single-text-overlay .name-line .infinity {
	font-family: 'DM Sans', sans-serif;
	font-size: 28px;
	font-weight: 800;
	line-height: 1;
	color: #ff2b22;
	min-width: 16px;
	text-align: center;
	transform: translateY(1px);
	text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

.bho-preview-clock--style-4 .single-text-overlay .name-line .heart-single {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	font-family: 'DM Sans', sans-serif;
	font-size: 24px;
	font-weight: 800;
	line-height: 1;
	color: #ff0000;
	transform: translateY(1px);
	text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

.bho-preview-clock--style-4 .product-back {
	display: none !important;
}

.bho-preview-clock--style-4 .product-back::before,
.bho-preview-clock--style-4 .product-back::after {
	display: none !important;
	content: none !important;
}

.bho-preview-clock--style-4 .motor,
.bho-preview-clock--style-4 .motor::before {
	display: none !important;
}

.bho-preview-clock--style-4 .product-edge {
	display: none !important;
	pointer-events: none;
}

.bho-preview-clock--style-4 .edge-left,
.bho-preview-clock--style-4 .edge-right {
	top: 42px;
	bottom: 42px;
	width: var(--d);
	left: calc(50% - var(--d) / 2);
}

.bho-preview-clock--style-4 .edge-right {
	transform: rotateY(90deg) translateZ(calc(var(--w) / 2));
}

.bho-preview-clock--style-4 .edge-left {
	transform: rotateY(-90deg) translateZ(calc(var(--w) / 2));
}

.bho-preview-clock--style-4 .edge-top,
.bho-preview-clock--style-4 .edge-bottom {
	left: 42px;
	right: 42px;
	height: var(--d);
	top: calc(50% - var(--d) / 2);
}

.bho-preview-clock--style-4 .edge-top {
	transform: rotateX(90deg) translateZ(calc(var(--h) / 2));
}

.bho-preview-clock--style-4 .edge-bottom {
	transform: rotateX(-90deg) translateZ(calc(var(--h) / 2));
}

.bho-preview-clock--style-4 .preview-caption {
	display: none;
	margin-top: 12px;
	padding: 12px 14px;
	border: 1.5px solid rgba(176, 125, 46, 0.32);
	border-left: 5px solid #c28a32;
	border-radius: 14px;
	background: linear-gradient(180deg, #fffdf9 0%, #fff6e7 100%);
	text-align: left;
	font-size: 12px;
	line-height: 1.45;
	color: #6f614f;
	font-weight: 600;
	width: 100%;
	max-width: 320px;
	box-shadow: 0 8px 18px rgba(125, 93, 41, 0.08);
}

.bho-preview-clock--style-4 .preview-caption.active {
	display: block;
}

.bho-preview-clock--style-4 .preview-caption strong {
	display: block;
	font-size: 13px;
	color: #4f3415;
	font-weight: 900;
	margin-bottom: 4px;
	letter-spacing: 0.2px;
}

/* Tek slot upload grid (adjust panel üstü) */
.birhediyen-preview-style-4 .bho-preview-card > #bhoUploadLabel,
.birhediyen-preview-style-4 .bho-preview-card > .bho-upload--mobile,
.birhediyen-preview-style-4 .bho-preview-card > #bhoUploadPreview,
.birhediyen-preview-style-4 .bho-preview-card > .bho-upload-preview:not(.bho-upload-preview--desktop),
.birhediyen-preview-style-4 #bhoMobileWrap > #bhoUploadLabel {
	display: none !important;
}

.bho-upload-grid--style-4,
.bho-preview-card > .bho-upload-grid--style-4 {
	display: grid;
	grid-template-columns: 1fr;
	gap: 10px;
	margin-top: 14px;
	max-width: 240px;
	margin-left: auto;
	margin-right: auto;
	width: 100%;
	align-self: center;
}

.bho-upload-grid--style-4 .slot-wrap {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0;
	width: 100%;
}

.bho-upload-grid--style-4 .slot-box {
	width: 100%;
	aspect-ratio: 1;
	border-radius: 22px;
	border: 1.5px solid #dcc39a;
	background: linear-gradient(180deg, #fffdfa 0%, #f9f4ea 100%);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	overflow: hidden;
	position: relative;
	box-shadow: 0 10px 24px rgba(125, 93, 41, 0.1);
	transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
	padding: 20px;
	text-align: center;
}

.bho-upload-grid--style-4 .slot-box::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(135deg, rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0));
	pointer-events: none;
}

.bho-upload-grid--style-4 .slot-box:hover {
	border-color: #caa15d;
	transform: translateY(-1px);
	box-shadow: 0 14px 28px rgba(125, 93, 41, 0.14);
}

.bho-upload-grid--style-4 .slot-box.active-slot {
	border-color: rgba(191, 137, 40, 0.92);
	box-shadow: 0 0 0 2px rgba(191, 137, 40, 0.18), 0 14px 28px rgba(125, 93, 41, 0.14);
}

.bho-upload-grid--style-4 .slot-content {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 12px;
}

.bho-upload-grid--style-4 .slot-preview {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: none;
	z-index: 3;
	border-radius: 21px;
}

.bho-upload-grid--style-4 .upload-icon {
	width: 52px;
	height: 52px;
	border-radius: 14px;
	display: grid;
	place-items: center;
	background: #fff;
	border: 1px solid #dcc39a;
	color: #9f681b;
	font-weight: 900;
	font-size: 22px;
	box-shadow: 0 6px 14px rgba(125, 93, 41, 0.1);
	object-fit: contain;
	padding: 8px;
}

.bho-upload-grid--style-4 .slot-title {
	font-size: 18px;
	line-height: 1.2;
	font-weight: 800;
	color: #5b3a12;
	display: block;
}

.bho-upload-grid--style-4 .slot-sub {
	font-size: 12px;
	line-height: 1.35;
	color: #8b6b45;
	display: block;
	margin-top: 4px;
	max-width: 160px;
}

.bho-upload-grid--style-4 .slot-label {
	display: none;
}

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

/* Adjust panel görünümü → mevcut #bhoEditor */
.birhediyen-preview-style-4 .bho-preview-card > #bhoEditor {
	margin-top: 14px;
	padding: 16px;
	border-radius: 18px;
	border: 1px solid rgba(176, 125, 46, 0.22);
	background: linear-gradient(180deg, #fffaf0 0%, #f7eddc 100%);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.76), 0 10px 24px rgba(26, 17, 9, 0.06);
}

.birhediyen-preview-style-4 .bho-preview-card > #bhoEditor .bho-editor-panel {
	background: rgba(255, 255, 255, 0.38);
	border: 1px solid rgba(176, 125, 46, 0.18);
	border-radius: 16px;
}

@media (max-width: 940px) {
	.bho-preview-clock--style-4 #scene,
	#bhoMobileWrap .bho-preview-clock--style-4 #scene {
		height: 650px;
	}

	.bho-upload-grid--style-4,
	#bhoMobileUploadStack .bho-upload-grid--style-4 {
		max-width: 220px;
	}
}

@media (max-width: 520px) {
	.bho-preview-clock--style-4 #scene,
	#bhoMobileWrap .bho-preview-clock--style-4 #scene {
		height: 610px;
	}

	.bho-preview-clock--style-4 #product,
	#bhoMobileWrap .bho-preview-clock--style-4 #product {
		--w: 265px;
		--h: 530px;
		--d: 12px;
	}

	.bho-upload-grid--style-4,
	#bhoMobileUploadStack .bho-upload-grid--style-4 {
		gap: 5px;
		max-width: 200px;
	}
}

@media (max-width: 720px) {
	.birhediyen-preview-style-4 .bho-preview-card > #bhoEditor .bho-editor-grid {
		grid-template-columns: 1fr;
	}
}