/* ---------- Design tokens (turkuaz & beyaz, kurumsal) ---------- */
:root {
  --bg: #FFFFFF;
  --surface: #FFFFFF;
  --surface-2: #EAF4F4;
  --text: #0B2530;
  --text-muted: #5B7373;
  --border: rgba(11, 37, 48, 0.10);
  --shadow-soft: 0 20px 45px -20px rgba(11, 37, 48, 0.18);
  --nav-bg: rgba(255, 255, 255, 0.72);
  --nav-shadow: 0 8px 28px -18px rgba(13, 148, 136, 0.30);
  --nav-shadow-scrolled: 0 12px 32px -14px rgba(13, 148, 136, 0.30);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0B2530;
    --surface: #123340;
    --surface-2: #1A4350;
    --text: #EAF4F4;
    --text-muted: #9FC2C2;
    --border: rgba(234, 244, 244, 0.14);
    --shadow-soft: 0 20px 45px -20px rgba(0, 0, 0, 0.55);
    --nav-bg: rgba(11, 37, 48, 0.72);
    --nav-shadow: 0 8px 28px -18px rgba(0, 0, 0, 0.5);
    --nav-shadow-scrolled: 0 12px 32px -14px rgba(0, 0, 0, 0.5);
  }
}
:root[data-theme="dark"] {
  --bg: #0B2530;
  --surface: #123340;
  --surface-2: #1A4350;
  --text: #EAF4F4;
  --text-muted: #9FC2C2;
  --border: rgba(234, 244, 244, 0.14);
  --shadow-soft: 0 20px 45px -20px rgba(0, 0, 0, 0.55);
  --nav-bg: rgba(11, 37, 48, 0.72);
  --nav-shadow: 0 8px 28px -18px rgba(0, 0, 0, 0.5);
  --nav-shadow-scrolled: 0 12px 32px -14px rgba(0, 0, 0, 0.5);
}
:root[data-theme="light"] {
  --bg: #FFFFFF;
  --surface: #FFFFFF;
  --surface-2: #EAF4F4;
  --text: #0B2530;
  --text-muted: #5B7373;
  --border: rgba(11, 37, 48, 0.10);
  --shadow-soft: 0 20px 45px -20px rgba(11, 37, 48, 0.18);
  --nav-bg: rgba(255, 255, 255, 0.72);
  --nav-shadow: 0 8px 28px -18px rgba(13, 148, 136, 0.30);
  --nav-shadow-scrolled: 0 12px 32px -14px rgba(13, 148, 136, 0.30);
}

* { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

html, body { background: var(--bg); color: var(--text); }
body { font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; }

/* Sticky nav overlaps section tops on anchor-jump; offset so headings clear it */
section[id] { scroll-margin-top: 90px; }

a:focus-visible, button:focus-visible { outline: 2px solid #0D9488; outline-offset: 2px; }

::selection { background: #0D9488; color: #fff; }

h1, h2, h3, .font-display { font-family: 'Bahnschrift', 'Arial Narrow', sans-serif; text-transform: uppercase; letter-spacing: 0.02em; }
.font-tabular { font-variant-numeric: tabular-nums; font-family: Consolas, ui-monospace, monospace; font-weight: 700 !important; }
.eyebrow { font-family: Consolas, ui-monospace, monospace; letter-spacing: 0.15em; text-transform: uppercase; font-size: 0.85rem; font-weight: 700 !important; }

/* ---------- Theme-aware surface utilities ---------- */
.bg-app { background-color: var(--bg); }
.bg-surface { background-color: var(--surface); }
.bg-surface-2 { background-color: var(--surface-2); }
.text-muted { color: var(--text-muted); font-weight: 600 !important; }
.text-strong { color: var(--text); }
.border-hair { border-color: var(--border); }

/* ---------- Nav (transparent, light turquoise wash + shadow) ---------- */
#site-nav {
  background: var(--nav-bg);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: var(--nav-shadow);
  transition: box-shadow 0.3s ease, background 0.3s ease;
}
#site-nav.scrolled { box-shadow: var(--nav-shadow-scrolled); }
.nav-link { color: var(--text); opacity: 1; transition: opacity 0.2s ease, color 0.2s ease; text-shadow: 0 1px 2px rgba(0,0,0,0.08); font-weight: 700 !important; -webkit-text-stroke: 0.5px currentColor; }

/* Legibility shadow for text sitting directly over photos */
.text-shadow-img { text-shadow: 0 2px 10px rgba(0,0,0,0.45), 0 1px 3px rgba(0,0,0,0.3); }
.nav-link:hover { opacity: 1; color: #0D9488; }
.mobile-link { color: var(--text); }

/* ---------- Hero slider (separate from header, image-driven) ---------- */
#hero-track { z-index: 0; }
.hero-slide { opacity: 0; transition: opacity 0.6s ease; pointer-events: none; }
.hero-slide[data-active="true"] { opacity: 1; pointer-events: auto; }
.hero-slide img { transform: scale(1.06); transition: transform 6s ease-out; }
.hero-slide[data-active="true"] img { transform: scale(1); }
@media (prefers-reduced-motion: reduce) {
  .hero-slide { transition: opacity 0.3s ease; }
  .hero-slide img, .hero-slide[data-active="true"] img { transform: none; transition: none; }
}
/* Mobile: arrows land on top of the CTA buttons on narrow screens; autoplay + dots
   handle navigation there. Also drop the Ken Burns zoom so the hard-cropped landscape
   photos don't read as over-scaled in the tall portrait hero. */
@media (max-width: 640px) {
  #hero-prev, #hero-next { display: none; }
  .hero-slide img, .hero-slide[data-active="true"] img { transform: none; transition: opacity 0.6s ease; }
}

/* ---------- Cards ---------- */
.tour-card { background: var(--surface); border: 1px solid var(--border); border-radius: 1.75rem; box-shadow: var(--shadow-soft); overflow: hidden; display: flex; flex-direction: column; transition: transform 0.3s ease, box-shadow 0.3s ease; }
.tour-card:hover { transform: translateY(-6px); box-shadow: 0 26px 55px -22px rgba(13, 148, 136, 0.24); }

.tag-pill { font-family: Consolas, ui-monospace, monospace; font-weight: 700 !important; letter-spacing: 0.08em; text-transform: uppercase; font-size: 0.8rem; padding: 0.35rem 0.75rem; border-radius: 999px; background: rgba(11,37,48,0.55); backdrop-filter: blur(6px); color: #fff; }

.chip { display: flex; align-items: center; justify-content: center; text-align: center; font-family: Consolas, ui-monospace, monospace; font-weight: 700 !important; letter-spacing: 0.01em; font-size: 0.82rem; padding: 0.35rem 0.7rem; border-radius: 999px; border: 1px solid var(--border); color: var(--text); }

/* Indirim rozeti — fiyat satirinda, marka turkuazi ile */
.save-pill { display: inline-flex; align-items: center; font-family: Consolas, ui-monospace, monospace; font-weight: 700 !important; letter-spacing: 0.03em; font-size: 0.72rem; line-height: 1; padding: 0.2rem 0.5rem; border-radius: 999px; background: rgba(13, 148, 136, 0.14); color: #0D9488; }
:root[data-theme="dark"] .save-pill { color: #5EEAD4; background: rgba(94, 234, 212, 0.14); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .save-pill { color: #5EEAD4; background: rgba(94, 234, 212, 0.14); } }

.step-card { background: var(--surface); border: 1px solid var(--border); border-radius: 1.5rem; padding: 2rem; box-shadow: var(--shadow-soft); }

.contact-card { display: flex; align-items: flex-start; gap: 1rem; background: var(--surface); border: 1px solid var(--border); border-radius: 1.5rem; padding: 1.25rem; box-shadow: var(--shadow-soft); transition: border-color 0.2s ease, transform 0.2s ease; }
.contact-card:hover { border-color: #0D9488; transform: translateY(-3px); }

/* ---------- FAQ ---------- */
.faq-item { background: var(--surface); border: 1px solid var(--border); border-radius: 1.25rem; box-shadow: var(--shadow-soft); overflow: hidden; }
.faq-panel { max-height: 0; overflow: hidden; transition: max-height 0.35s ease; }
.faq-item.open .faq-panel { max-height: 480px; }
.faq-chevron { transition: transform 0.3s ease; flex-shrink: 0; }
.faq-item.open .faq-chevron { transform: rotate(45deg); }

/* ---------- Route toggle (tour cards) ---------- */
.route-panel { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; }
.route-item.open .route-panel { max-height: 200px; }
.route-chevron { transition: transform 0.3s ease; }
.route-item.open .route-chevron { transform: rotate(180deg); }

/* ---------- Reveal on scroll ---------- */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.7s ease, transform 0.7s ease; }
.reveal.is-visible { opacity: 1; transform: translateY(0); }

/* ---------- Slider ---------- */
.no-scrollbar { scrollbar-width: none; -ms-overflow-style: none; }
.no-scrollbar::-webkit-scrollbar { display: none; }
.slide { border: 1px solid var(--border); box-shadow: var(--shadow-soft); }
.slide-caption { position: absolute; inset: auto 0 0 0; padding: 1.1rem 1.1rem 0.9rem; font-family: Consolas, ui-monospace, monospace; font-weight: 700 !important; font-size: 0.88rem; letter-spacing: 0.02em; color: #fff; background: linear-gradient(0deg, rgba(11,37,48,0.85), transparent); text-align: left; }
.slider-arrow { width: 2.75rem; height: 2.75rem; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); display: grid; place-items: center; color: var(--text); transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease; }
.slider-arrow:hover { background: linear-gradient(120deg, #0D9488, #0E7490); color: #fff; transform: translateY(-2px); }
.slider-dot { box-sizing: content-box; width: 0.5rem; height: 0.5rem; padding: 0.5rem; border-radius: 999px; background: var(--border); background-clip: content-box; cursor: pointer; transition: width 0.25s ease, background 0.25s ease; }
.slider-dot.active { width: 1.5rem; background: linear-gradient(120deg, #0D9488, #0E7490); background-clip: content-box; }

/* ---------- Lightbox ---------- */
#lightbox { display: none; background: rgba(11,37,48,0.92); }
#lightbox.open { display: flex; }
.lightbox-btn { width: 2.75rem; height: 2.75rem; border-radius: 999px; border: 1px solid rgba(255,255,255,0.3); color: #fff; display: grid; place-items: center; transition: background 0.2s ease; }
.lightbox-btn:hover { background: rgba(255,255,255,0.12); }

/* ---------- WhatsApp float ---------- */
@keyframes wa-pulse {
  0% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.55); }
  70% { box-shadow: 0 0 0 16px rgba(37, 211, 102, 0); }
  100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); }
}
#wa-float { animation: wa-pulse 2.6s infinite; }
@media (prefers-reduced-motion: reduce) { #wa-float { animation: none; } }