/* Editorial Theme tokens */
:root {
  --brand: #eb651d;
  --brand-dark: #c2510f;
  --cream: #fbf5ee;
  --cream-2: #f4e9dc;
  --ink: #1a1410;
  --ink-soft: #5a4b3f;
  --rule: #e5d6c3;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: "Poppins", sans-serif;
  background: var(--cream);
  color: var(--ink);
  overflow-x: hidden;
}
html {
  overflow-x: hidden;
}

/* Fluid hero typography — auto-fits any viewport.
 * Sized so the longest Turkish words ("Dönüştürüyoruz", "Organizasyonu")
 * fit within col-span-7 of a 1440px viewport AND a 375px phone. */
.fluid-h1-xxl { font-size: clamp(32px, 8vw, 112px); }
.fluid-h1-xl  { font-size: clamp(32px, 8vw, 104px); }
.fluid-h1-l   { font-size: clamp(28px, 7vw, 96px); }
.fluid-h1-m   { font-size: clamp(26px, 6.5vw, 88px); }
.fluid-h1-s   { font-size: clamp(26px, 6.5vw, 80px); }
.fluid-h1-xs  { font-size: clamp(24px, 6vw, 72px); }
.fluid-h1-cta { font-size: clamp(22px, 5vw, 64px); }

/* Allow long unbroken strings (URLs, email, very long words) to wrap
 * rather than overflow. `break-word` only kicks in when the word would
 * otherwise overflow — normal Turkish words still flow naturally. */
h1, h2, h3, h4, h5, h6, p, span, a, li, address {
  overflow-wrap: break-word;
  word-wrap: break-word;
}

/* Grid/Flex children default to min-width: auto which can push a
 * track wider than its container when content is long. Override so
 * children honor their parent's width and let text wrap. */
*, *::before, *::after {
  min-width: 0;
}

/* Defensive: prevent any element from forcing horizontal overflow */
img, video, iframe {
  max-width: 100%;
  height: auto;
}

/* Reset browser-default list indent (Tailwind CDN preflight sometimes misses) */
ul, ol {
  list-style: none;
  padding-left: 0;
  margin: 0;
}

/* On mobile, neutralize AOS's horizontal translate (fade-left/right shifts
 * elements 100px on the x-axis and causes off-screen overflow until the
 * element is scrolled into view). Keep only vertical fades on small screens. */
@media (max-width: 1023px) {
  [data-aos="fade-left"],
  [data-aos="fade-right"] {
    transform: translate3d(0, 24px, 0) !important;
  }
  [data-aos="fade-left"].aos-animate,
  [data-aos="fade-right"].aos-animate {
    transform: translate3d(0, 0, 0) !important;
  }
}

/* Typography helpers — all Poppins, varied weights/styles */
.serif {
  font-family: "Poppins", sans-serif;
  font-weight: 500;
}
.serif-it {
  font-family: "Poppins", sans-serif;
  font-style: italic;
  font-weight: 500;
}
.eyebrow {
  font-family: "Poppins", sans-serif;
  font-style: normal;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  font-size: 11px;
  font-weight: 500;
}
/* Nav links must never break across lines — they fall back to drawer on small screens */
.nav-link {
  white-space: nowrap;
}
.num-marker {
  font-family: "Poppins", sans-serif;
  font-style: italic;
  font-weight: 500;
  color: var(--brand);
}

/* Scrollbar */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: var(--cream-2);
}
::-webkit-scrollbar-thumb {
  background: var(--brand);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--brand-dark);
}

/* Form focus */
input:focus,
textarea:focus {
  box-shadow: 0 0 0 2px rgba(235, 101, 29, 0.25);
}

/* Underline reveal for nav links */
.nav-link {
  position: relative;
  display: inline-block;
  color: var(--ink);
}
.nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 1px;
  background: var(--brand);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.35s ease;
}
.nav-link:hover::after,
.nav-link.is-active::after {
  transform: scaleX(1);
}
.nav-link.is-active {
  color: var(--brand);
}

/* Header scroll states */
#siteHeader {
  transition: background-color 0.45s ease, padding 0.45s ease,
    backdrop-filter 0.45s ease, border-color 0.45s ease;
}
#siteHeader.is-scrolled {
  background-color: rgba(251, 245, 238, 0.88);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

/* Drawer */
#siteDrawer {
  transition: transform 0.55s cubic-bezier(0.65, 0, 0.35, 1);
}
#siteDrawer.is-open {
  transform: translateY(0);
}

/* Editorial animations */
@keyframes kenburns {
  from {
    transform: scale(1.05);
  }
  to {
    transform: scale(1.15) translate(-1%, -1%);
  }
}
.kenburns {
  animation: kenburns 18s ease-in-out infinite alternate;
}

@keyframes marquee {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}
.marquee-track {
  animation: marquee 40s linear infinite;
  will-change: transform;
}

/* Loading spinner (form submission in main.js) */
.spinner {
  border: 3px solid rgba(235, 101, 29, 0.25);
  border-radius: 50%;
  border-top: 3px solid var(--brand);
  width: 24px;
  height: 24px;
  animation: spin 1s linear infinite;
}
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* Responsive container padding */
@media (max-width: 768px) {
  .container {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

/* Legacy helpers kept for compatibility with other pages */
.playfair {
  font-family: "Poppins", sans-serif;
}
.poppins {
  font-family: "Poppins", sans-serif;
}