/* Hero reel: keep a cinematic 16:9 frame beside the opening message. */
.reel {
  min-height: 0;
  aspect-ratio: 16 / 9;
  align-self: center;
}

/* Do not zoom YouTube footage: every frame stays fully visible in 16:9. */
.slide iframe {
  top: 0;
  left: 0;
  width: 100%;
  min-width: 0;
  height: 100%;
  min-height: 0;
  transform: none;
}

@media (min-width: 851px) {
  .hero {
    grid-template-columns: minmax(380px, .7fr) minmax(620px, 1.3fr);
    gap: clamp(24px, 4vw, 72px);
  }
}

@media (max-width: 850px) {
  .reel {
    min-height: 0;
    aspect-ratio: 16 / 9;
  }
}

.statement {
  grid-template-columns: 130px minmax(0, 1fr);
}

.about-copy {
  max-width: 1120px;
}

.about-copy h2 {
  max-width: 1020px;
}

.about-copy p {
  max-width: 980px;
  margin: 24px 0 0;
  color: #d4cdc3;
  font-size: 16px;
  line-height: 1.85;
}

.about-copy .about-lead {
  margin-top: 34px;
  color: var(--paper);
  font: 500 clamp(24px, 2.8vw, 38px)/1.15 'Playfair Display', serif;
  letter-spacing: -.045em;
}

.about-signature {
  display: grid;
  gap: 6px;
  padding-top: 10px;
}

.about-signature strong {
  color: var(--paper);
  font-size: 15px;
}

.about-signature em {
  color: var(--orange);
  font-family: 'Playfair Display', serif;
  font-size: 20px;
}

.about-copy h3 {
  margin: 55px 0 20px;
  color: var(--paper);
  font-size: 30px;
  letter-spacing: -.05em;
}

.about-services {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 28px;
  max-width: 1120px;
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);
}

.about-services li {
  min-height: 154px;
  padding: 22px 4px 22px 0;
  border-bottom: 1px solid var(--line);
  color: var(--quiet);
  font-size: 13px;
  line-height: 1.65;
}

.about-services strong {
  display: block;
  margin-bottom: 10px;
  color: var(--paper);
  font-size: 14px;
  line-height: 1.35;
}

.about-services strong::before {
  content: '—';
  margin-right: 8px;
  color: var(--orange);
}

@media (max-width: 1100px) {
  .about-services { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 850px) {
  .statement { grid-template-columns: 1fr; }
  .about-services { grid-template-columns: 1fr; }
}

/* Calmer, more contemporary typography. */
body,
.contact-form input,
.contact-form textarea,
.contact-form button {
  font-family: 'DM Sans', Arial, sans-serif;
}

nav { gap: 27px; }

h1 {
  max-width: 590px;
  font-size: clamp(44px, 5vw, 76px);
  line-height: .98;
  letter-spacing: -.06em;
}

h1 em,
h2 em,
.reel-title,
.work h4,
.person h4,
.project-copy h3 {
  font-family: 'Cormorant Garamond', Georgia, serif;
}

.statement h2,
.project-copy h3 {
  font-size: clamp(38px, 4.6vw, 68px);
  line-height: 1.03;
}

.about-copy .about-lead {
  max-width: 850px;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(24px, 2.3vw, 34px);
  line-height: 1.2;
}

.reel-title { font-size: clamp(25px, 3vw, 40px); }
.work h4 { font-size: 25px; line-height: 1.05; }
.person h4 { font-size: 28px; }

@media (max-width: 850px) {
  h1 { font-size: clamp(42px, 12vw, 62px); }
}

/* Persistent, quiet header that remains usable on long pages. */
header {
  position: sticky;
  top: 0;
  z-index: 12;
  height: 86px;
  background: rgba(13, 13, 13, .84);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  box-shadow: 0 1px 0 rgba(242, 237, 228, .08);
}

/* Keep long editorial copy airy without forcing a single narrow column. */
.about-copy {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(34px, 6vw, 104px);
  row-gap: 0;
}

.about-copy h2,
.about-copy .about-lead,
.about-copy .about-signature,
.about-copy h3,
.about-copy .about-services {
  grid-column: 1 / -1;
}

.about-copy > p:not(.about-lead):not(.about-signature) {
  max-width: none;
  margin-top: 30px;
}

/* A clear primary WhatsApp call-to-action in the contact section. */
.contact-links a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 17px 22px;
  border: 1px solid rgba(13, 13, 13, .36);
  background: #151515;
  color: var(--paper);
  font-size: 12px;
  letter-spacing: .09em;
  transition: transform .2s ease, background .2s ease;
}

.contact-links a::before {
  content: '◔';
  font-size: 19px;
}

.contact-links a:hover {
  transform: translateY(-2px);
  background: #000;
}

/* Reachable from every point of the page, without becoming intrusive. */
.whatsapp-float {
  position: fixed;
  z-index: 16;
  right: 24px;
  bottom: 24px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 19px;
  border-radius: 999px;
  background: #25d366;
  color: #07130a;
  box-shadow: 0 14px 34px rgba(0, 0, 0, .3);
  font: 700 12px 'DM Sans', Arial, sans-serif;
  letter-spacing: .04em;
  text-decoration: none;
  transition: transform .2s ease, box-shadow .2s ease;
}

.whatsapp-float span { font-size: 20px; line-height: 1; }
.whatsapp-float:hover { transform: translateY(-3px); box-shadow: 0 18px 40px rgba(0, 0, 0, .38); }

@media (max-width: 850px) {
  header { height: 76px; }
  .about-copy { display: block; }
  .whatsapp-float { right: 16px; bottom: 16px; padding: 14px 17px; }
}

/* Reference wall: restrained wordmarks, ready to receive approved SVG logos. */
.references {
  padding: clamp(76px, 10vw, 140px) 0;
}

.references-intro {
  max-width: 550px;
  margin: -6px 0 38px;
  color: var(--quiet);
  font-size: 15px;
  line-height: 1.7;
}

.reference-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}

.reference-mark {
  display: flex;
  min-height: 138px;
  padding: 22px;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 5px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  color: var(--paper);
  transition: background .22s ease, color .22s ease;
}

.reference-mark:hover {
  background: var(--paper);
  color: var(--ink);
}

.reference-logo {
  display: block;
  width: auto;
  max-width: 158px;
  height: auto;
  max-height: 54px;
  margin: 0 0 13px;
  object-fit: contain;
  object-position: left center;
  image-rendering: auto;
  filter: grayscale(1) brightness(0) invert(1);
  opacity: .92;
  transition: filter .22s ease, opacity .22s ease;
}

.reference-mark:hover .reference-logo { filter: none; opacity: 1; }
.reference-mark.official .reference-logo { max-height: 61px; margin-inline: auto; }

/* Referans logoları özgün dosya oranlarını korur; tüm kartlar aynı sahnede görünür. */
.reference-mark { align-items: stretch; justify-content: flex-start; gap: 13px; }
.reference-logo-frame {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 112px;
  padding: 13px;
  overflow: hidden;
  background: #f5f3ee;
  border: 1px solid rgba(255,255,255,.12);
}
.reference-logo-frame .reference-logo {
  width: 100%;
  max-width: 180px;
  height: 100%;
  max-height: 82px;
  margin: 0;
  object-fit: contain;
  object-position: center;
  filter: none;
  opacity: 1;
}
.reference-mark:hover .reference-logo { filter: none; opacity: 1; }
.reference-mark strong { font-size: clamp(14px, 1.1vw, 17px); line-height: 1.16; letter-spacing: -.035em; }
.reference-no-logo { color: var(--ink); font: 600 13px/1.25 'DM Mono', monospace; letter-spacing: .05em; text-align: center; text-transform: uppercase; }

/* Kullanıcının hazırladığı 16:9 referans kartları: ikinci bir zemine alınmaz. */
.reference-grid-visual { gap: 14px; border: 0; }
.reference-grid-visual .reference-visual {
  position: relative;
  min-height: 0;
  padding: 0;
  gap: 0;
  overflow: hidden;
  border: 0;
  background: transparent;
}
.reference-grid-visual .reference-visual .reference-logo {
  display: block;
  width: 100%;
  max-width: none;
  height: auto;
  max-height: none;
  aspect-ratio: 16 / 9;
  margin: 0;
  object-fit: cover;
  object-position: center;
  filter: none;
  opacity: 1;
  transition: transform .35s ease, filter .35s ease;
}
.reference-grid-visual .reference-visual:hover { background: transparent; color: inherit; }
.reference-grid-visual .reference-visual:hover .reference-logo { transform: scale(1.025); }
.reference-grid-visual .reference-visual strong {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  padding: 30px 16px 14px;
  margin: 0;
  color: #fff;
  background: linear-gradient(transparent, rgba(0,0,0,.78));
  font-size: 14px;
  letter-spacing: -.02em;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .25s ease, transform .25s ease;
}
.reference-grid-visual .reference-visual:hover strong { opacity: 1; transform: translateY(0); }

.reference-mark strong {
  font-family: 'DM Sans', Arial, sans-serif;
  font-size: clamp(17px, 1.65vw, 25px);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -.055em;
}

.reference-mark span {
  color: var(--quiet);
  font: 500 10px/1.35 'DM Mono', monospace;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.reference-mark:hover span { color: #625b54; }
.reference-mark.official { align-items: center; text-align: center; }
.reference-mark.official > span { margin-bottom: 2px; color: var(--orange); font-size: 12px; }
.reference-mark.official strong { font-size: clamp(14px, 1.2vw, 18px); letter-spacing: -.03em; }
.reference-mark.cci strong { color: #e31b23; font-family: 'Cormorant Garamond', Georgia, serif; font-size: clamp(25px, 2.4vw, 38px); font-style: italic; }
.reference-mark.cci span { color: inherit; font-size: 10px; }
.reference-mark.festival strong { color: var(--orange); font-size: clamp(20px, 2vw, 31px); }

@media (max-width: 1050px) {
  .reference-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 650px) {
  .reference-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .reference-mark { min-height: 122px; padding: 17px; }
}

/* Son rötuşlar: referanslara daha fazla nefes, video yüklenirken sakin bir kapak. */
.reference-grid-visual {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.slide-poster {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: opacity .38s ease;
}

.slide iframe {
  z-index: 1;
  opacity: 0;
  transition: opacity .38s ease;
}

.slide.is-ready iframe { opacity: 1; }
.slide.is-ready .slide-poster { opacity: 0; }

/* Sabit menü, bölüm başlıklarını kapatmasın. */
main > section { scroll-margin-top: 118px; }

/* Çerez tercihlerini koruyan, daha hafif köşe bildirimi. Yaygın CookieAdmin/WordPress sınıflarını kapsar. */
:is(#cookieadmin, #cookie-law-info-bar, .cky-consent-bar, .cc-window, .cookie-notice-container, .cookie-banner, .cookie-consent) {
  right: 20px !important;
  bottom: 20px !important;
  left: auto !important;
  width: min(360px, calc(100vw - 32px)) !important;
  max-width: 360px !important;
  padding: 16px !important;
  border: 1px solid rgba(242, 237, 228, .22) !important;
  border-radius: 14px !important;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .42) !important;
  font-size: 12px !important;
  line-height: 1.45 !important;
}

:is(#cookieadmin, #cookie-law-info-bar, .cky-consent-bar, .cc-window, .cookie-notice-container, .cookie-banner, .cookie-consent) :is(button, .cky-btn, .cli_settings_button, .cli_accept_all_button, .cli_reject_button) {
  min-height: 34px !important;
  margin: 5px 4px 0 0 !important;
  padding: 8px 10px !important;
  font-size: 11px !important;
  line-height: 1.1 !important;
}

@media (max-width: 650px) {
  .reference-grid-visual { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  :is(#cookieadmin, #cookie-law-info-bar, .cky-consent-bar, .cc-window, .cookie-notice-container, .cookie-banner, .cookie-consent) {
    right: 16px !important;
    bottom: 16px !important;
  }
}