/**
 * public/css/frontend-style.css
 * WP Hotspot Pro - Frontend Stilleri
 */

/* ---------- SCALING ---------- */
/*
 * --wph-scale: JS tarafından canvas genişliğine göre güncellenir.
 * Tüm px tabanlı öğeler calc(Xpx * var(--wph-scale,1)) ile ölçeklenir.
 * Canvas tam genişlikte gösterildiğinde scale=1 (admin'deki ayarlar geçerli),
 * pencere küçüldüğünde scale orantılı düşer → her şey birlikte küçülür.
 */
.wph-canvas {
	--wph-scale: 1;
}

/* Tooltip font boyutu da scale edilsin */
.wph-tooltip {
	font-size: calc(14px * var(--wph-scale, 1));
}

/* Surrounding text/icon ölçekleme */
.wph-surround {
	font-size: calc(1em * var(--wph-scale, 1));
}

/* ---------- CANVAS ---------- */
.wph-canvas {
	box-sizing: border-box;
	max-width: 100%;
	/* Elementor ortalama düzeltmesi */
	display: block;
	margin-left: auto;
	margin-right: auto;
	/*
	 * Önemli: height inline style olarak PHP'den gelir (ör. height:500px).
	 * Canvas max-width:100% ile küçüldüğünde JS (initResponsiveCanvas)
	 * height'ı data-aspect-ratio oranına göre yeniden hesaplar.
	 * Bu sayede % konumlu noktalar hiç kaymaz.
	 */
}

/* Elementor widget sarmalayıcısını ortala */
.elementor-widget-wph_hotspot_pro .elementor-widget-container {
	display: flex;
	justify-content: center;
	align-items: flex-start;
}

/* Aspect-ratio modu (height=auto seçildiğinde PHP bu sınıfı ekler) */
.wph-canvas--ratio {
	height: auto !important;
	width: 100%;
}

/*
 * Canvas data-aspect-ratio varsa JS yüksekliği yönetir.
 * Geçiş animasyonunu engellememek için transition yok.
 */
.wph-canvas[data-aspect-ratio] {
	transition: none;
}

.wph-bg-media {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 0;
	pointer-events: none;
}

.wph-bg-iframe {
	border: 0;
}

.wph-points-layer {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
}

/* ---------- HOTSPOT NOKTASI ---------- */
.wph-point {
	position: absolute;
	transform: translate(-50%, -50%);
	z-index: 2;
	/* filter uygulandığında GPU katmanı oluştur */
	will-change: filter;
}

.wph-point-dot {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.9);
	color: #222;
	cursor: pointer;
	position: relative;
	/* Gölge ve kenarlık artık parent .wph-point'e filter:drop-shadow ile uygulanır */
}

.wph-point-dot .dashicons {
	font-size: 16px;
	width: 16px;
	height: 16px;
}

/* Hover türü noktalarda fare olayları aktif, click/always türünde de dot tıklanabilir olmalı */
.wph-point--hover .wph-point-dot,
.wph-point--click .wph-point-dot,
.wph-point--always .wph-point-dot {
	pointer-events: auto;
}

/* ---------- ÇEVRE ÖĞESİ (Surrounding) ---------- */
.wph-surround {
	position: absolute;
	top: 0;
	left: 0;
	white-space: nowrap;
	pointer-events: none; /* varsayılan: tıklanamaz, JS .interactive class'ında açar */
}

.wph-surround--interactive {
	pointer-events: auto;
}

.wph-surround img,
.wph-surround video {
	max-width: 160px;
	display: block;
	border-radius: 4px;
}

.wph-surround-button {
	background: #1e88e5;
	color: #fff;
	border: 0;
	border-radius: 4px;
	padding: 6px 14px;
	font-size: 13px;
	cursor: pointer;
}

/* ---------- TOOLTIP ---------- */
.wph-tooltip {
	position: absolute;
	bottom: calc(100% + 14px);
	left: 50%;
	transform: translateX(-50%) translateY(6px);
	background: #ffffff;
	color: #222;
	border-radius: 6px;
	box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18);
	padding: 12px 14px;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.18s ease, transform 0.18s ease;
	z-index: 5;
	overflow: auto;
}

.wph-tooltip-inner > *:last-child {
	margin-bottom: 0;
}

.wph-tooltip--bordered {
	border: 1px solid rgba(0, 0, 0, 0.12);
}

.wph-tooltip--borderless {
	border: 0;
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
}

/* Görünür durum: JS tarafından eklenir (hover/click/always) */
.wph-point.wph-tooltip-visible .wph-tooltip {
	opacity: 1;
	visibility: visible;
	transform: translateX(-50%) translateY(0);
	pointer-events: auto;
}

/* Sadece "hover" tipinde CSS ile de saf hover desteği (JS olmadan da çalışsın) */
.wph-point--hover:hover .wph-tooltip {
	opacity: 1;
	visibility: visible;
	transform: translateX(-50%) translateY(0);
	pointer-events: auto;
}

/* ---------- LIGHTBOX ---------- */
.wph-lightbox-overlay {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.75);
	display: none;
	align-items: center;
	justify-content: center;
	z-index: 100000;
}

.wph-lightbox-overlay.is-open {
	display: flex;
}

.wph-lightbox-box {
	position: relative;
	background: #000;
	width: 800px;
	height: 600px;
	max-width: 95vw;
	max-height: 90vh;
	border-radius: 4px;
	overflow: hidden;
}

.wph-lightbox-content {
	width: 100%;
	height: 100%;
}

.wph-lightbox-content img,
.wph-lightbox-content video,
.wph-lightbox-content iframe {
	width: 100%;
	height: 100%;
	object-fit: contain;
	border: 0;
	display: block;
}

.wph-lightbox-close {
	position: absolute;
	top: 8px;
	right: 8px;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	border: 0;
	background: rgba(255, 255, 255, 0.9);
	color: #111;
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
	z-index: 2;
	/* × karakterini tam ortala */
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	/* × karakteri bazı fontlarda optik olarak yukarı kayar; düzelt */
	font-family: system-ui, -apple-system, sans-serif;
	font-weight: 300;
	letter-spacing: 0;
}

/* =========================================================
   10 HAZIR ANİMASYON (idle + active varyantları aynı keyframe'i kullanır)
   ========================================================= */

/* 1) Pulse */
@keyframes wph-kf-pulse {
	0%, 100% { filter: drop-shadow(0 0 0px rgba(255,255,255,0.6)); }
	50%      { filter: drop-shadow(0 0 10px rgba(255,255,255,0)); }
}
/* Pulse animasyonu parent .wph-point'e uygulanır (filter zinciri için) */
.wph-anim-idle-pulse,
.wph-point[data-active-anim="pulse"]:hover,
.wph-point[data-active-anim="pulse"].wph-active {
	animation: wph-kf-pulse 1.6s ease-out infinite;
}

/* 2) Bounce */
@keyframes wph-kf-bounce {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(-8px); }
}
.wph-anim-idle-bounce .wph-point-dot,
.wph-point[data-active-anim="bounce"]:hover .wph-point-dot,
.wph-point[data-active-anim="bounce"].wph-active .wph-point-dot {
	animation: wph-kf-bounce 1.1s ease-in-out infinite;
}

/* 3) Ripple (dalgalanma halkası) */
@keyframes wph-kf-ripple {
	0%   { transform: scale(1); opacity: 0.6; }
	100% { transform: scale(2.4); opacity: 0; }
}
.wph-anim-idle-ripple .wph-point-dot::after,
.wph-point[data-active-anim="ripple"]:hover .wph-point-dot::after,
.wph-point[data-active-anim="ripple"].wph-active .wph-point-dot::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.7);
	animation: wph-kf-ripple 1.5s ease-out infinite;
	z-index: -1;
}

/* 4) Zoom */
@keyframes wph-kf-zoom {
	0%, 100% { transform: scale(1); }
	50%      { transform: scale(1.25); }
}
.wph-anim-idle-zoom .wph-point-dot,
.wph-point[data-active-anim="zoom"]:hover .wph-point-dot,
.wph-point[data-active-anim="zoom"].wph-active .wph-point-dot {
	animation: wph-kf-zoom 1.2s ease-in-out infinite;
}

/* 5) Rotate */
@keyframes wph-kf-rotate {
	from { transform: rotate(0deg); }
	to   { transform: rotate(360deg); }
}
.wph-anim-idle-rotate .wph-point-dot,
.wph-point[data-active-anim="rotate"]:hover .wph-point-dot,
.wph-point[data-active-anim="rotate"].wph-active .wph-point-dot {
	animation: wph-kf-rotate 2.4s linear infinite;
}

/* 6) Shake (titreme) */
@keyframes wph-kf-shake {
	0%, 100% { transform: translateX(0); }
	20%      { transform: translateX(-3px); }
	40%      { transform: translateX(3px); }
	60%      { transform: translateX(-2px); }
	80%      { transform: translateX(2px); }
}
.wph-anim-idle-shake .wph-point-dot,
.wph-point[data-active-anim="shake"]:hover .wph-point-dot,
.wph-point[data-active-anim="shake"].wph-active .wph-point-dot {
	animation: wph-kf-shake 0.9s ease-in-out infinite;
}

/* 7) Glow (parlama) */
@keyframes wph-kf-glow {
	0%, 100% { filter: drop-shadow(0 0 4px rgba(255,255,255,0.4)); }
	50%      { filter: drop-shadow(0 0 16px rgba(255,255,255,0.9)); }
}
/* Glow animasyonu parent .wph-point'e uygulanır */
.wph-anim-idle-glow,
.wph-point[data-active-anim="glow"]:hover,
.wph-point[data-active-anim="glow"].wph-active {
	animation: wph-kf-glow 1.8s ease-in-out infinite;
}

/* 8) Flip (çevirme) */
@keyframes wph-kf-flip {
	0%   { transform: rotateY(0deg); }
	100% { transform: rotateY(360deg); }
}
.wph-anim-idle-flip .wph-point-dot,
.wph-point[data-active-anim="flip"]:hover .wph-point-dot,
.wph-point[data-active-anim="flip"].wph-active .wph-point-dot {
	animation: wph-kf-flip 2s linear infinite;
}

/* 9) Swing (sallanma) */
@keyframes wph-kf-swing {
	0%, 100% { transform: rotate(0deg); }
	25%      { transform: rotate(10deg); }
	75%      { transform: rotate(-10deg); }
}
.wph-anim-idle-swing .wph-point-dot,
.wph-point[data-active-anim="swing"]:hover .wph-point-dot,
.wph-point[data-active-anim="swing"].wph-active .wph-point-dot {
	animation: wph-kf-swing 1.4s ease-in-out infinite;
	transform-origin: top center;
}

/* 10) Colorshift (renk değiştirme) */
@keyframes wph-kf-colorshift {
	0%   { background-color: #ffffff; }
	50%  { background-color: #ffd54f; }
	100% { background-color: #ffffff; }
}
.wph-anim-idle-colorshift .wph-point-dot,
.wph-point[data-active-anim="colorshift"]:hover .wph-point-dot,
.wph-point[data-active-anim="colorshift"].wph-active .wph-point-dot {
	animation: wph-kf-colorshift 1.8s ease-in-out infinite;
}

/* ================================================================
   FONT AWESOME İKON DESTEĞİ (nokta içi)
   ================================================================ */

.wph-point-dot {
	/* FA ikonlarının hizalanması için flex merkez */
	display: flex;
	align-items: center;
	justify-content: center;
	/* Temel boyut artık dot_style[size] ile inline CSS'te belirlenir;
	   buradaki değer sadece fallback */
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: rgba(255,255,255,0.9);
	color: #222;
	cursor: pointer;
	position: relative;
	transition: transform 0.15s ease;
	/* box-shadow kaldırıldı: gölge ve kenarlık parent filter:drop-shadow ile verilir */
}

.wph-point-dot:hover {
	transform: scale(1.12);
}

/* FA ikon boyutu inline CSS'te ayarlanır; fallback */
.wph-point-dot [class*="fa-"],
.wph-point-dot i {
	font-size: 16px;
	line-height: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	/* Rengi .wph-point-dot'tan al; tema/FA override'larını sıfırla */
	color: inherit !important;
}

/* ================================================================
   BUTON (SURROUNDING) — HOVER EFEKTİ
   Hover renkleri data-hover-* attribute ile JS tarafından uygulanır.
   Transition için bu kurallar yeterli.
   ================================================================ */

.wph-surround-button {
	cursor: pointer;
	transition: background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
	outline: none;
	line-height: 1.4;
	display: inline-block;
}

.wph-surround-button:focus-visible {
	box-shadow: 0 0 0 3px rgba(30,136,229,0.40);
}

/* ================================================================
   TOOLTIP: etkileşim moduna göre görünürlük
   "hover" → CSS :hover da desteklenir (JS kapanmadan önce anlık gözükür)
   "click" / "always" → sadece JS ile .wph-tooltip-visible eklenir
   ================================================================ */

/* Hover tipi: fare üstündeyken CSS ile de aç (JS olmadan da çalışır) */
.wph-point--hover:hover .wph-tooltip {
	opacity: 1;
	visibility: visible;
	transform: translateX(-50%) translateY(0);
	pointer-events: auto;
}

/* Click ve Always: YALNIZCA .wph-tooltip-visible class'ı ile açılır.
   CSS :hover'ı devre dışı bırakmak için pointer-events kalıpları. */
.wph-point--click .wph-tooltip,
.wph-point--always .wph-tooltip {
	/* :hover ile açılmasın — sadece JS ile açılsın */
	transition: opacity 0.18s ease, transform 0.18s ease;
}

/* Always-on: sayfa yüklenince JS .wph-tooltip-visible ekler */
.wph-point--always .wph-tooltip {
	/* Fallback: JS yüklenmeden de açık göster */
}