/* ============================================================================
   İstanbul Translate — temel stil katmanı
   Tailwind (CDN) reset + utility'leri sağlar; bu dosya markaya özel eklerdir:
   pastel aksan, "diller şeridi" imza animasyonu, ince ayraç, erişilebilirlik.
   ========================================================================== */

:root {
  --brand: #3F6280;        /* huzurlu, derin dusty-blue — butonlar & aksan (AA kontrast) */
  --brand-soft: #E6EEF3;   /* pastel açık mavi — alan/kart zeminleri */
  --sage-soft: #EAF0EC;    /* pastel adaçayı — alternatif bölüm zemini */
  --paper: #FBFAF6;        /* sıcak krem kâğıt zemin */
  --ink: #2A323C;          /* koyu metin */
  --muted: #5B6773;        /* ikincil metin */
}

/* Lenis akıcı kaydırma (motion.js açar) */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

/* Scroll-reveal başlangıç durumları */
.anim [data-reveal] { opacity: 0; transform: translateY(20px); }
.anim [data-reveal-x] { opacity: 0; transform: translateX(24px); }

/* ── İmza öğesi: diller şeridi (sonsuz, sakin akış) ─────────────────────── */
@keyframes it-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.it-marquee { overflow: hidden; -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent); }
.it-marquee-track { display: flex; width: max-content; animation: it-marquee 34s linear infinite; }
.it-marquee:hover .it-marquee-track { animation-play-state: paused; }

/* İnce ayraç / hairline */
.it-hairline { height: 1px; background: linear-gradient(to right, transparent, rgba(63,98,128,.30), transparent); }

/* Kartlarda hafif hover kalkışı — yalnız gerçek işaretçi cihazlarda (masaüstü) */
@media (hover: hover) {
  main .rounded-2xl.border:not(details) { transition: transform .38s cubic-bezier(.2,.7,.2,1), box-shadow .38s ease; }
  main .rounded-2xl.border:not(details):hover { transform: translateY(-4px); box-shadow: 0 14px 34px -14px rgba(42,50,60,.20); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; scroll-behavior: auto !important; }
  [data-reveal], [data-reveal-x] { opacity: 1 !important; transform: none !important; }
  .it-marquee-track { animation: none !important; }
}

/* Erişilebilir odak + skip link */
:where(a, button, input, textarea, select, [tabindex]):focus-visible {
  outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 4px;
}
.skip-link { position: absolute; left: -9999px; }
.skip-link:focus { left: 1rem; top: 1rem; z-index: 100; background: #111; color: #fff;
  padding: .6rem 1rem; border-radius: 8px; }

/* Mobil yatay taşma güvencesi */
html, body { max-width: 100%; overflow-x: clip; }
img, svg, video { max-width: 100%; height: auto; }