/* ============================================================================
 * page-tour.css — Adimli sayfa turu (PageTour).
 * ============================================================================
 * 3 ana parca:
 *   #pt-backdrop  : tam ekran yari saydam karartma (z-index altinda)
 *   #pt-spotlight : target'i parlatan transparan kutu (box-shadow ile dis
 *                   karartma + ic seffaf). GSAP ile target'a kayar.
 *   #pt-popover   : title + body + stepper + buton kart.
 *
 * Mobil (<768px): tour kapali — JS tarafinda matchMedia kontrolu var; CSS
 * tarafinda da defensive #pt-* { display: none } media query'si.
 * ========================================================================== */

/* Backdrop — kart altinda gri tul.
   Aslinda asil karartmayi spotlight box-shadow yapiyor; bu sadece guvenlik
   icin (spotlight yok iken yine de karartma var). */
#pt-backdrop {
	position: fixed;
	inset: 0;
	background: rgba(15, 23, 42, 0.55);
	z-index: 1080;
	opacity: 0;
	pointer-events: auto;
}

/* Spotlight — target'i cerceveler. box-shadow ile etrafi karartir.
   pointer-events: none -> target ile etkilesim alttan gecer (gelecek
   surumde target'a tiklama action'i eklenebilir). */
#pt-spotlight {
	position: fixed;
	top: 0;
	left: 0;
	width: 0;
	height: 0;
	border-radius: 12px;
	box-shadow: 0 0 0 9999px rgba(15, 23, 42, 0.62),
		0 0 0 4px rgba(37, 99, 235, 0.65),
		0 0 24px 4px rgba(37, 99, 235, 0.35);
	z-index: 1081;
	pointer-events: none;
	opacity: 0;
	transition: none;
}

/* Popover — info kart */
#pt-popover {
	position: fixed;
	top: 0;
	left: 0;
	background: #ffffff;
	border: 1px solid #e5e7eb;
	border-radius: 12px;
	box-shadow: 0 20px 40px -10px rgba(15, 23, 42, 0.35),
		0 8px 16px -8px rgba(15, 23, 42, 0.2);
	min-width: 320px;
	max-width: 420px;
	padding: 18px 18px 14px;
	z-index: 1082;
	opacity: 0;
	transform: scale(.96);
}

/* Stepper dotlari */
.pt-stepper {
	display: flex;
	gap: 6px;
	margin-bottom: 10px;
}
.pt-stepper .pt-dot {
	width: 22px;
	height: 4px;
	border-radius: 999px;
	background: #e2e8f0;
	transition: background .25s, transform .25s;
}
.pt-stepper .pt-dot.is-active {
	background: #2563eb;
	transform: scaleX(1.15);
}
.pt-stepper .pt-dot.is-done {
	background: #93c5fd;
}

/* Title — typewriter effekti icin her harf <span>'a saril, JS opacity 0->1
   stagger yapacak. */
#pt-title {
	color: #0f172a;
	font-size: 1.05rem;
	font-weight: 800;
	letter-spacing: 0;
	line-height: 1.25;
	margin: 0 0 8px;
	display: inline-block;
}
#pt-title .pt-cursor {
	display: inline-block;
	width: 2px;
	height: 1em;
	background: #2563eb;
	margin-left: 2px;
	vertical-align: middle;
	animation: ptCursorBlink .8s ease-in-out infinite;
}
@keyframes ptCursorBlink {
	0%, 50%   { opacity: 1; }
	51%, 100% { opacity: 0; }
}

/* Body — word-by-word fade-up */
#pt-body {
	color: #475569;
	font-size: 0.9rem;
	line-height: 1.5;
	margin: 0 0 14px;
	min-height: 3em; /* layout shift azaltma */
}
#pt-body .pt-word {
	display: inline-block;
	opacity: 0;
	transform: translateY(6px);
}

/* Buton bar */
.pt-actions {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
}
.pt-actions .pt-step-counter {
	color: #94a3b8;
	font-size: 0.78rem;
	font-weight: 600;
}
.pt-actions .pt-btn-group {
	display: flex;
	gap: 6px;
}
.pt-btn {
	background: #ffffff;
	border: 1px solid #cbd5e1;
	border-radius: 8px;
	color: #475569;
	cursor: pointer;
	font-size: 0.85rem;
	font-weight: 600;
	padding: 6px 14px;
	transition: background .14s, border-color .14s, color .14s, transform .14s;
}
.pt-btn:hover:not(:disabled) {
	background: #f8fafc;
	border-color: #94a3b8;
	color: #0f172a;
}
.pt-btn:disabled {
	cursor: not-allowed;
	opacity: 0.5;
}
.pt-btn-primary {
	background: #2563eb;
	border-color: #2563eb;
	color: #fff;
}
.pt-btn-primary:hover:not(:disabled) {
	background: #1d4ed8;
	border-color: #1d4ed8;
	color: #fff;
}

/* Kapatma (X) sag ust */
.pt-close {
	background: transparent;
	border: 0;
	color: #94a3b8;
	cursor: pointer;
	font-size: 1.1rem;
	padding: 4px 6px;
	position: absolute;
	right: 8px;
	top: 8px;
	transition: color .14s;
}
.pt-close:hover {
	color: #0f172a;
}

/* Popover'a yon ok'u — target'in hangi yonunde oldugunu gosterir. */
#pt-popover::before {
	content: "";
	position: absolute;
	width: 12px;
	height: 12px;
	background: #ffffff;
	border-left: 1px solid #e5e7eb;
	border-top: 1px solid #e5e7eb;
	transform: rotate(45deg);
}
#pt-popover[data-pt-pos="right"]::before  { left: -7px; top: calc(50% - 6px); transform: rotate(-45deg); }
#pt-popover[data-pt-pos="left"]::before   { right: -7px; top: calc(50% - 6px); transform: rotate(135deg); }
#pt-popover[data-pt-pos="bottom"]::before { top: -7px;  left: calc(50% - 6px); transform: rotate(45deg);  }
#pt-popover[data-pt-pos="top"]::before    { bottom: -7px;left: calc(50% - 6px); transform: rotate(225deg); }

/* Dark theme */
[data-theme="dark"] #pt-popover {
	background: #1e293b;
	border-color: #334155;
}
[data-theme="dark"] #pt-title { color: #f8fafc; }
[data-theme="dark"] #pt-body { color: #cbd5e1; }
[data-theme="dark"] .pt-stepper .pt-dot { background: #334155; }
[data-theme="dark"] .pt-stepper .pt-dot.is-active { background: #60a5fa; }
[data-theme="dark"] .pt-btn {
	background: #0f172a;
	border-color: #334155;
	color: #cbd5e1;
}
[data-theme="dark"] .pt-btn:hover:not(:disabled) {
	background: #172033;
	border-color: #475569;
	color: #f8fafc;
}
[data-theme="dark"] #pt-popover::before {
	background: #1e293b;
	border-color: #334155;
}

/* Mobile — tour kapali */
@media (max-width: 767.98px) {
	#pt-backdrop, #pt-spotlight, #pt-popover { display: none !important; }
}

/* ============================================================
   ? BUTONU — SARI HIGHLIGHT
   Top nav'daki yardim butonunu mavi navbar uzerinde sari dolu
   yuvarlak halinde gosterir + hafif pulse animasyonu ile
   kullanicinin dikkatini ceker.
   nav-icon-btn.nav-icon-btn-help specificity'sini gecmek icin
   nav-menu.css'deki .tlw-nav .tlw-right .nav-icon-btn'i match
   ediyoruz.
   ============================================================ */
.tlw-nav .tlw-right .nav-icon-btn.nav-icon-btn-help {
	background: #fbbf24;             /* amber-400 */
	color: #0f172a;                   /* slate-900 — kontrast icin koyu ikon */
	border-radius: 50%;
	box-shadow:
		0 0 0 2px rgba(251, 191, 36, 0.4),
		0 0 12px rgba(251, 191, 36, 0.55);
	animation: navHelpPulse 2.6s ease-in-out infinite;
}
.tlw-nav .tlw-right .nav-icon-btn.nav-icon-btn-help:hover,
.tlw-nav .tlw-right .nav-icon-btn.nav-icon-btn-help:focus {
	background: #fcd34d;             /* amber-300 — biraz daha parlak hover */
	color: #0f172a;
	box-shadow:
		0 0 0 3px rgba(252, 211, 77, 0.6),
		0 0 16px rgba(251, 191, 36, 0.75);
	animation: none;                 /* hover'da pulse durur, sabit parlar */
}
.tlw-nav .tlw-right .nav-icon-btn.nav-icon-btn-help i {
	font-weight: 700;
}

@keyframes navHelpPulse {
	0%, 100% {
		box-shadow:
			0 0 0 2px rgba(251, 191, 36, 0.4),
			0 0 12px rgba(251, 191, 36, 0.55);
	}
	50% {
		box-shadow:
			0 0 0 5px rgba(251, 191, 36, 0.55),
			0 0 22px rgba(251, 191, 36, 0.8);
	}
}

/* Dark theme — sari yine cikar ama biraz dusurelim ki gozu yormasin */
[data-theme="dark"] .tlw-nav .tlw-right .nav-icon-btn.nav-icon-btn-help {
	background: #f59e0b;             /* amber-500 — dark'ta biraz daha doygun */
	color: #111827;
}
[data-theme="dark"] .tlw-nav .tlw-right .nav-icon-btn.nav-icon-btn-help:hover {
	background: #fbbf24;
}

/* Erisilebilirlik: kullanici azaltilmis hareket tercih ettiyse pulse'i durdur */
@media (prefers-reduced-motion: reduce) {
	.tlw-nav .tlw-right .nav-icon-btn.nav-icon-btn-help { animation: none; }
}