/* ==========================================================================
   AJABA — polish katmanı v1
   Palet ve yazı ailesi korunur: --ajaba-*, --pearl, --wine, --emerald,
   Instrument Serif + Inter. Ana CSS'ten SONRA yüklenir; yalnızca düzeltir
   ve rafine eder, yeni renk eklemez.
   ========================================================================== */

:root {
  --aj-focus: var(--ajaba-gold-soft);
  --aj-out: cubic-bezier(.16, 1, .3, 1);
}

/* ---- 1. Tarayıcının çizdiği yüzeyler: markadan gelsin -------------------- */
html {
  scroll-padding-top: 92px;              /* # bağlantıları sabit header'ın altında kalmasın */
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  scrollbar-width: thin;
  scrollbar-color: rgba(198, 161, 95, .55) #061112;
}
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: #061112; }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--ajaba-gold-deep), var(--ajaba-teal-deep));
  border: 2px solid #061112;
  border-radius: 8px;
}
::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, var(--ajaba-gold), var(--ajaba-teal)); }

::selection { background: rgba(53, 221, 210, .3); color: #fff; }
.section-pearl ::selection, .contact ::selection { background: rgba(122, 18, 56, .18); color: var(--coal); }

h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }

/* ---- 2. Klavye odağı: her yerde görünür ---------------------------------- */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, summary:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--aj-focus);
  outline-offset: 3px;
}
.section-pearl a:focus-visible, .section-pearl button:focus-visible, .section-pearl input:focus-visible,
.section-pearl select:focus-visible, .section-pearl textarea:focus-visible,
.contact a:focus-visible, .contact button:focus-visible, .contact input:focus-visible,
.contact select:focus-visible, .contact textarea:focus-visible {
  outline-color: var(--emerald);
}
.skip-link:focus-visible { outline-offset: 2px; }

/* ---- 3. Açılış perdesi ----------------------------------------------------
   Süre ana CSS'te kısaltıldı (x0,45). Burada: oturumda bir kez gösterilir
   (head'deki betik .no-intro ekler) ve dokunma/tuş ile hemen geçilir.        */
.no-intro .intro-reveal { display: none !important; }
.intro-skip .intro-reveal {
  animation: introAway .4s var(--aj-out) forwards !important;
  animation-delay: 0s !important;
}

/* ---- 4. Header: hero görseli üstünde okunurluk + aktif bölüm -------------- */
.site-header::before {
  content: "";
  position: absolute;
  inset: 0 0 -44px 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(3, 10, 11, .78) 0%, rgba(3, 10, 11, .42) 58%, transparent 100%);
  transition: opacity .4s var(--aj-out);
}
.site-header.scrolled::before, .site-header.menu-open::before { opacity: 0; }

@media (min-width: 1101px) {
  .site-header { padding-inline: 5vw; }
  .desktop-nav a {
    font-size: .8125rem;
    letter-spacing: .07em;
    color: rgba(245, 241, 232, .94);
    text-shadow: 0 1px 16px rgba(2, 8, 9, .75);
    padding-block: .5rem;
  }
  .desktop-nav a[aria-current] { color: var(--pearl); }
  .desktop-nav a[aria-current]::after { transform: scaleX(1); transform-origin: 0; }
  .header-cta { font-size: .72rem; }
}

/* ---- 5. Hero: tek sol eksen, okunur kart ---------------------------------- */
@media (min-width: 761px) {
  .hero-brand-lockup { left: 5vw; top: clamp(150px, 33%, 420px); width: min(56vw, 1010px); }
  .hero-bottom { left: 5vw; transform: none; width: min(1040px, 90vw); }
}
.hero-brand-lockup > p {
  font-family: var(--font-display);
  font-size: clamp(1.55rem, 2.75vw, 2.9rem);
  letter-spacing: -.012em;
  line-height: 1.08;
  max-width: 24ch;
  margin-top: 1.4rem;
}
.hero-kicker {
  font-size: .72rem;
  color: rgba(245, 241, 232, .92);
  text-shadow: 0 1px 14px rgba(0, 0, 0, .65);
}
.hero-rail { font-size: .7rem; text-shadow: 0 1px 12px rgba(0, 0, 0, .6); }
.hero-entry-head > p { font-size: 1.2rem; }
.hero-choice { min-height: 104px; }
.hero-choice-copy strong { font-size: clamp(1.15rem, 1.55vw, 1.5rem); }
.hero-choice-copy small { font-size: .8125rem; line-height: 1.4; color: rgba(245, 241, 232, .76); }
.hero-choice-index { font-size: .6875rem; }
.hero-choice > i { width: 38px; }
.hero-choice-primary {
  background: radial-gradient(circle at 92% 20%, rgba(198, 161, 95, .05), transparent 28%),
              linear-gradient(105deg, rgba(11, 95, 91, .62), rgba(25, 189, 179, .2) 68%, rgba(8, 16, 17, .06));
}
.hero-choice:active { transform: scale(.995); }

@media (max-width: 760px) {
  .hero-brand-lockup { width: 84vw; }
  .hero-brand-lockup > p { font-size: clamp(1.4rem, 6.6vw, 1.85rem); max-width: 19ch; margin-top: 1rem; line-height: 1.12; }
  .hero-choice { min-height: 82px; }
  .hero-choice-copy strong { font-size: 1.1rem; }
  .hero-choice > i { width: 32px; }
  .hero-rail-mobile {
    flex-wrap: wrap;
    row-gap: .45rem;
    column-gap: .6rem;
    justify-content: flex-start;
    font-size: .6875rem;
    letter-spacing: .06em;
  }
}

/* ---- 6. Kısa filmler: kaydırma yolu kısaldı, alt yazı kırpılmaz ------------ */
.short-film-video { background: #071517; }
@media (min-width: 761px) {
  .short-films-stage { height: 380vh; }
}
@media (max-width: 760px) {
  .short-film-current { grid-template-columns: 1fr; gap: .35rem; }
  .short-film-current p { text-align: left; margin: 0; font-size: .875rem; }
  .short-film-current h3 { font-size: 2.1rem; }
}

/* ---- 7. Yukarı çık düğmesi: içeriğin üstüne binmesin ---------------------- */
.back-to-top { opacity: .94; }
@media (max-width: 760px) {
  .back-to-top { width: 44px; right: .75rem; bottom: calc(.75rem + env(safe-area-inset-bottom, 0px)); }
  .back-to-top span { display: none; }
  .back-to-top::before { top: -4px; bottom: -4px; left: -4px; right: -4px; }
}

/* ---- 8. Çalışma filtreleri: yatay kaydırma çubuğu gizli, kenar solar ------- */
.work-filters { scrollbar-width: none; -ms-overflow-style: none; }
.work-filters::-webkit-scrollbar { display: none; }
.work-filters button { min-height: 44px; font-size: .8125rem; }
@media (max-width: 760px) {
  .work-filters { -webkit-mask-image: linear-gradient(90deg, #000 86%, transparent); mask-image: linear-gradient(90deg, #000 86%, transparent); }
}

/* ---- 9. Form: net alan sınırı, hata ve seçim durumları --------------------- */
.contact-form input[type="checkbox"], .journey-panel input[type="checkbox"] { accent-color: var(--emerald); }
.contact-form :is(input, select, textarea):user-invalid { border-color: var(--wine); box-shadow: 0 1px 0 var(--wine); }
.contact-form :is(input, select, textarea) { font-size: 1rem; }
.contact-form :is(input, select, textarea):focus-visible { outline-offset: 2px; }

/* ---- 9b. Kontrast: krem zeminde altın vurgu okunmuyordu ------------------
   Genel bir "gold-soft" kuralı .contact-intro h2 em'in bordosunu eziyordu.   */
.contact .contact-intro h2 em { color: var(--wine); }
.whatsapp-link-label { background: transparent; }
.contact-form .field label, .contact-form .service-checks legend { font-size: .75rem; color: #4d4640; }
.contact-form .field :is(input, select, textarea) {
  background: rgba(255, 255, 255, .62);
  border: 1px solid rgba(17, 17, 17, .16);
  border-bottom: 1px solid rgba(17, 17, 17, .46);
  padding: .85rem 1rem;
  transition: border-color .25s var(--aj-out), background .25s var(--aj-out), box-shadow .25s var(--aj-out);
}
.contact-form .field :is(input, select, textarea):hover { border-bottom-color: rgba(17, 17, 17, .72); }
.contact-form .field :is(input, select, textarea):focus {
  background: #fff;
  border-color: var(--emerald);
  box-shadow: 0 0 0 3px rgba(0, 124, 104, .14);
  outline: none;
}
.contact-form .service-checks span { min-height: 44px; display: flex; align-items: center; transition: background .25s var(--aj-out), color .25s var(--aj-out), border-color .25s var(--aj-out); }
.contact-form .service-checks label:hover span { border-color: var(--emerald); }
.contact-form .service-checks input:focus-visible + span { outline: 2px solid var(--emerald); outline-offset: 2px; }

/* ---- 9c. Ritim: bölümler arası ölü boşluk, başlık/paragraf çarpışması ------- */
@media (min-width: 761px) {
  .pillar { min-height: 0; padding-block: 2.6rem; }
}
.process-copy h2, .services-intro h2, .technology-copy h2 { padding-bottom: .1em; }
.process-copy p, .services-intro p, .technology-copy p { margin-top: 1.75rem; }
.package-note { margin-bottom: 9rem; }   /* alttaki geçiş gradyanının altında kalmasın */

/* ---- 9d. Basma geri bildirimi (fiziksel his) -------------------------------- */
.button, .hero-choice, .header-cta, .showreel-link, .work-filters button, .service-checks label span, .journey-primary {
  transition-property: transform, background, color, border-color, box-shadow;
}
.button:active, .header-cta:active, .showreel-link:active, .work-filters button:active, .journey-primary:active { transform: scale(.985); }

/* ---- 10. Hareket tercihi -------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .intro-reveal { display: none !important; }
  html { scroll-behavior: auto; }
}

/* ---- 11. Form yedek yolu (WhatsApp) ---------------------------------------- */
.contact-form .aj-form-fallback {
  grid-column: 1 / -1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: .9rem 1.4rem;
  border: 1px solid var(--emerald);
  color: var(--emerald-dark);
  font-size: .8125rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background .3s var(--aj-out), color .3s var(--aj-out), transform .3s var(--aj-out);
}
.contact-form .aj-form-fallback:hover { background: var(--emerald); color: #fff; transform: translateY(-2px); }
.contact-form .aj-form-fallback:active { transform: scale(.985); }