:root {
  color-scheme: light;
  --beige: #d4c6b9;
  --black: #171c1c;
  --black-60: #171c1c99;
  --green: #171c1c;
  --grey: #706d66;
  --night: #121616;
  --white: #f6f3ef;
  --red: #ea1f27;

  --heading-font: "Space Grotesk", "Inter", sans-serif;
  --body-font: "Inter", sans-serif;
  --display-font: "CookGothif", "Ubuntu", sans-serif;
  --script-font: "Metropola", "Playfair Display SC", serif;
}

/* ---------- PRELOADER (ana_acilis.svg) ---------- */
.preloader-seen .preloader { display: none !important; }
.preloader {
  position: fixed;
  inset: 0;
  right: auto;
  bottom: auto;
  width: 100vw;
  height: 100vh;
  z-index: 9999;
  background: var(--red);
  opacity: 1;
  transition: opacity 0.7s ease;
}
.preloader.is-done { opacity: 0; pointer-events: none; }
.preloader__svg {
  display: block;
  width: 100%;
  height: 100%;
}
/* Layer_2 (is-a) enters from the bottom-left corner, Layer_3 (is-b) enters
   from the top-right - both converging on the mark's true position at the
   same moment. Once they've landed, the whole mark (both pieces, as one
   group) spins a full turn in place. */
.preloader__scale {
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(0.72) translateY(-30px);
}
@media (max-width: 700px) {
  .preloader__scale { transform: scale(0.5) translateY(-30px); }
}
.preloader__piece {
  opacity: 0;
  animation-duration: 1.05s;
  animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  animation-fill-mode: forwards;
  transform-box: fill-box;
  transform-origin: center;
}
.preloader__piece.is-a { animation-name: preloaderPieceInA; }
.preloader__piece.is-b { animation-name: preloaderPieceInB; }
@keyframes preloaderPieceInA {
  0% { opacity: 0; transform: translate(-950px, 700px) rotate(-40deg) scale(0.6); }
  100% { opacity: 1; transform: translate(0, 0) rotate(0deg) scale(1); }
}
@keyframes preloaderPieceInB {
  0% { opacity: 0; transform: translate(950px, -700px) rotate(40deg) scale(0.6); }
  100% { opacity: 1; transform: translate(0, 0) rotate(0deg) scale(1); }
}
.preloader__mark {
  transform-box: fill-box;
  transform-origin: center;
  animation: preloaderMarkSpin 0.95s cubic-bezier(0.45, 0, 0.2, 1) 1.1s both;
}
@keyframes preloaderMarkSpin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
/* Once the counter hits 100, .preloader gets .is-exiting and each piece
   retraces its own entrance path in reverse - is-a back down to the
   bottom-left, is-b back up to the top-right - instead of both just
   fading out in place. */
.preloader.is-exiting .preloader__piece.is-a {
  animation: preloaderPieceOutA 0.8s cubic-bezier(0.55, 0, 0.85, 0.3) forwards;
}
.preloader.is-exiting .preloader__piece.is-b {
  animation: preloaderPieceOutB 0.8s cubic-bezier(0.55, 0, 0.85, 0.3) forwards;
}
@keyframes preloaderPieceOutA {
  0% { opacity: 1; transform: translate(0, 0) rotate(0deg) scale(1); }
  100% { opacity: 0; transform: translate(-950px, 700px) rotate(-40deg) scale(0.6); }
}
@keyframes preloaderPieceOutB {
  0% { opacity: 1; transform: translate(0, 0) rotate(0deg) scale(1); }
  100% { opacity: 0; transform: translate(950px, -700px) rotate(40deg) scale(0.6); }
}
.preloader__count {
  position: absolute;
  left: 50%;
  bottom: 12%;
  transform: translateX(-50%);
  font-family: var(--display-font);
  font-weight: 700;
  font-size: clamp(2.2rem, 4.2vw, 3.4rem);
  color: var(--white);
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
}
.preloader.is-exiting .preloader__count,
.preloader.is-done .preloader__count { opacity: 0; transition: opacity 0.3s ease; }
@media (prefers-reduced-motion: reduce) {
  .preloader__piece { animation: none; opacity: 1; }
  .preloader__mark { animation: none; }
  .preloader.is-exiting .preloader__piece.is-a,
  .preloader.is-exiting .preloader__piece.is-b { animation: none; opacity: 0; }
}

@font-face {
  font-family: "CookGothif";
  src: url("assets/fonts/CookGothif.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Metropola";
  src: url("assets/fonts/Metropola.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--white);
  color: var(--black);
  font-family: var(--body-font);
  -webkit-font-smoothing: antialiased;
}

body.is-modal-open {
  overflow: hidden;
}

/* Persistent page frame, reusing the same thin dark line as the nav pill's
   own border so the whole page reads as one consistent framed surface. */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  /* `inset: 0` sizes this from the fixed-positioning containing block,
     which on some phones resolves a bit wider than the page's actual
     visible width - an invisible few pixels that were still enough to
     make the whole page (nav included) scroll sideways. `vw` resolves
     against the real viewport instead, so it doesn't inherit that gap. */
  right: auto;
  bottom: auto;
  width: 100vw;
  height: 100vh;
  border: 1px solid var(--black);
  pointer-events: none;
  z-index: 9999;
}

h1, h2, h3 {
  font-family: var(--heading-font);
  font-weight: 600;
  margin: 0;
  letter-spacing: -0.02em;
}

em { font-style: italic; color: var(--green); }

a { color: inherit; text-decoration: none; }

p { line-height: 1.6; color: var(--grey); margin: 0; }

/* ---------- NAV (pieterkoopt.nl faithful recreation) ---------- */
.nav-wrap {
  position: fixed;
  top: 0; left: 0;
  /* width:100vw instead of right:0 - see the comment on body::after above,
     same fixed-positioning width bug, same fix. */
  width: 100vw;
  z-index: 100;
  padding: 1.25rem 1.5rem 0;
}

.navbar-mask { max-width: 1240px; margin: 0 auto; }

.navbar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 4.4em;
  font-size: 15px;
  border: 1px solid var(--black);
  border-radius: 0;
  color: var(--black);
  box-shadow: 0 0 0 1px rgba(0,0,0,0.06);
}

.navbar-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  /* var(--white) is fully opaque, so the blur-behind effect a
     backdrop-filter gives was never actually visible here - nothing shows
     through an opaque background regardless. It was still real GPU
     compositing cost, though, and paid on every scroll frame since this
     sits on the always-visible, position:fixed nav - a likely contributor
     to the nav dropping frames (or a paint entirely) on less powerful
     phones during scroll. Removing it changes nothing you can see. */
  background: var(--white);
}

.navbar .navbar-link_text,
.navbar .btn-animate-chars__text {
  color: var(--black);
}

.navbar_col {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  height: 100%;
}
.navbar_col.is-left { align-items: stretch; }
.navbar_col.is-center { flex: 1; justify-content: center; }
.navbar_col.is-right { justify-content: flex-end; padding-right: 0.5em; gap: 0.6em; }

.navbar_logo {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 0 1.8em;
  color: var(--black);
}

.navbar-item {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
  height: 100%;
  border-left: 1px solid var(--grey);
  color: var(--black);
  background: none;
  border-top: none; border-bottom: none; border-right: none;
  cursor: pointer;
  transition: color 0.3s;
}
.navbar-item.is-wapp { border-right: 1px solid var(--grey); }
.navbar-item:hover { color: var(--green); }

.localization { position: relative; height: 100%; }
button.locale-toggle {
  height: 100%;
  aspect-ratio: 1;
  border-bottom: 1px solid transparent;
  background: none;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.localization.is-open button.locale-toggle,
.localization:hover button.locale-toggle { border-bottom-color: var(--black); }
.locale-content {
  position: absolute;
  top: 100%; left: 0; width: 100%;
  display: flex; flex-direction: column; align-items: center;
  overflow: hidden;
  max-height: 0;
  background: rgba(246,243,239,0.95);
  backdrop-filter: blur(14px);
  border-radius: 0;
  /* Closing is slower and, more importantly, delayed - moving the mouse
     from TR down onto EN crosses a hairline gap between the two boxes, and
     a plain 0.3s transition both ways made that momentary hover loss start
     collapsing the menu right away, so it could shrink out from under the
     cursor before EN was reached (reads as it "randomly disappearing").
     The delay gives the pointer time to land back inside before anything
     starts hiding. */
  transition: max-height 0.2s ease 0.1s;
}
.localization:hover .locale-content,
.localization.is-open .locale-content {
  max-height: 300px;
  /* Opening has no delay and is near-instant, so the dropdown's hoverable
     area is already full-size by the time the cursor arrives, instead of
     the cursor overtaking a still-growing box. */
  transition: max-height 0.05s ease;
}
.locale-content .btn-animate-chars.is-localization {
  box-sizing: border-box;
  /* Matches the TR toggle's own size (4.4em, .navbar's own declared height)
     directly instead of deriving it from width:100% + aspect-ratio:1 -
     that combination depends on how a given browser resolves two
     conflicting definite dimensions, which some resolve inconsistently
     (an intrinsic, off-square box instead of a true 1:1 match with TR).
     Two elements each independently sized to the same fixed em value can't
     drift apart the way two different aspect-ratio/percentage derivations
     can. */
  /* .navbar is border-box with a 1px border, so its own declared 4.4em is
     the OUTER size - .localization's height:100% (used by the TR toggle)
     resolves against the 2px-smaller inner content box instead. Matching
     that inner value here, not the raw 4.4em, is what actually lines this
     up with TR pixel-for-pixel. */
  width: calc(4.4em - 2px);
  height: calc(4.4em - 2px);
  border: none;
  border-left: 1px solid var(--black);
  border-right: 1px solid var(--black);
  border-bottom: 1px solid var(--black);
}

.btn-animate-chars.is-localization {
  aspect-ratio: 1;
  height: 100%;
  display: flex; align-items: center; justify-content: center;
}

.navbar_menu {
  display: flex;
  align-items: center;
  gap: 0.4em;
  height: 100%;
  padding: 0.5em 0;
}

.btn-animate-chars {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 3.4em;
  padding: 0 1.4em;
  border-radius: 0;
  cursor: pointer;
  line-height: 1;
  text-decoration: none;
  border: none;
  background: none;
  font: inherit;
  overflow: hidden;
}

.btn-animate-chars.is-navlink {
  background-color: rgba(212,198,185,0.05);
  border: 1px solid transparent;
  transition: background-color 0.4s, border-color 0.4s;
}
.btn-animate-chars.is-navlink:hover,
.btn-animate-chars.is-navlink.is-current {
  border-color: var(--grey);
}

.navlink_globe-item {
  pointer-events: none;
  position: absolute;
  bottom: 0; left: 50%;
  width: 4em; height: 3em;
  transform: translate(-50%, 70%);
  transition: transform 0.6s cubic-bezier(0.16,1,0.3,1);
}
.btn-animate-chars.is-navlink:hover .navlink_globe-item,
.btn-animate-chars.is-navlink.is-current .navlink_globe-item {
  transform: translate(-50%, 35%);
}

.navbar-link_text,
.btn-animate-chars__text {
  position: relative;
  color: var(--white);
  font-family: var(--heading-font);
  font-size: 0.85em;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  font-weight: 500;
  white-space: nowrap;
  line-height: 1.3;
}

/* Roll-up character stagger, matching the original text-shadow duplication trick.
   Each char lives inside a tightly-clipped 1-line box, so the text-shadow
   "duplicate" 1.3em below stays invisible until the real glyph rolls up past it. */
.navbar-link_text .line,
.btn-animate-chars__text .line {
  display: inline-block;
  overflow: hidden;
  height: 1.3em;
  line-height: 1.3;
  vertical-align: top;
}
.navbar-link_text .char,
.btn-animate-chars__text .char {
  display: inline-block;
  position: relative;
  text-shadow: 0 1.3em currentColor;
  transform: translateY(0) rotate(0.001deg);
  transition: transform 0.6s cubic-bezier(0.16,1,0.3,1);
}
.btn-animate-chars:hover .char {
  transform: translateY(-1.3em) rotate(0.001deg);
}

.btn-animate-chars__bg {
  position: absolute;
  inset: 0;
  border-radius: 0;
  background: var(--green);
  transition: inset 0.6s cubic-bezier(0.16,1,0.3,1);
}
.btn-animate-chars:hover .btn-animate-chars__bg { inset: 0.15em; }

.navbar-cta { display: flex; align-items: center; height: 3.4em; padding: 0 0.4em 0 1.4em; }
.navbar-cta .btn-animate-chars__bg { background: var(--night); }
.navbar-cta .navbar-link_text,
.navbar-cta .btn-animate-chars__text { color: var(--white); }
.navbar-cta .button-icon { background: var(--white); color: var(--night); }

.button-icon {
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  width: 2.1em; height: 2.1em;
  margin-left: 0.8em;
  border-radius: 0;
  background: var(--night);
  color: var(--beige);
  display: flex;
  align-items: center;
  overflow: hidden;
}
.button-icon_track {
  display: flex;
  transform: translateX(0);
  transition: transform 0.5s cubic-bezier(0.16,1,0.3,1);
}
.btn-animate-chars:hover .button-icon_track { transform: translateX(-50%); }

/* Reversed from the shared button-icon animation above: at rest this one
   already sits shifted to the second (duplicate) arrow, so hovering slides
   back to the first arrow instead - same swap, opposite direction of travel. */
.navbar-cta .button-icon_track { transform: translateX(-50%); }
.navbar-cta:hover .button-icon_track { transform: translateX(0); }
.button-icon_arrow {
  width: 2.1em; min-width: 2.1em; height: 2.1em;
  display: flex; align-items: center; justify-content: center;
}

.btn-animate-chars.outline {
  background: none;
  border: 1px solid var(--grey);
}
.outline-bg { background: var(--beige); }
.outline-text { color: var(--black); }

.nav-trigger {
  display: none;
  height: 100%;
  aspect-ratio: 1;
  margin-left: 0;
  border-radius: 0;
  border: none;
  border-left: 1px solid var(--grey);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  background: none;
  cursor: pointer;
}
.nt_icon-line {
  width: 16px; height: 1.5px;
  background: var(--black);
  transition: transform 0.3s;
}
.nav-trigger.is-open .nt_icon-line.is-01 { transform: translateY(3.25px) rotate(45deg); }
.nav-trigger.is-open .nt_icon-line.is-02 { transform: translateY(-3.25px) rotate(-45deg); }

/* Mobile fullscreen dropdown menu */
.navmenu {
  position: fixed;
  top: 5.375rem; left: 1.5rem;
  /* width via calc(100vw...) instead of right:1.5rem - see the comment on
     body::after above, same fixed-positioning width bug. This only ever
     shows at mobile widths (the hamburger itself is mobile-only), where
     max-width below never binds anyway, so dropping the right-edge anchor
     doesn't affect the wide-screen centering it was there for. */
  right: auto;
  width: calc(100vw - 3rem);
  z-index: 95;
  max-width: 1240px;
  margin: 0 auto;
  background: var(--white);
  border: 1px solid var(--black);
  border-top: none;
  border-radius: 0;
  display: flex;
  flex-direction: column;
  padding-top: 0.75em;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.5s cubic-bezier(0.16,1,0.3,1), opacity 0.3s;
}
.navmenu.open { max-height: 85vh; opacity: 1; overflow-y: auto; }
.navmenu_list { display: flex; flex-direction: column; padding: 0 0.75em; gap: 0.2em; }
.navmenu_list .btn-animate-chars { justify-content: flex-start; height: 3.2em; }
.navmenu_button-group {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.9em;
  padding: 1.2em;
}
.navmenu_button-group .btn-animate-chars {
  height: 3.4em;
  padding: 0 0.6em;
  min-width: 0;
}
.navmenu_button-group .navbar-link_text,
.navmenu_button-group .btn-animate-chars__text {
  font-size: 0.62em;
  white-space: normal;
  text-align: center;
  line-height: 1.15;
}
#mobileWhatsapp .outline-bg { background: #e6e6e6; }
.navmenu_button-group .button-icon { margin-left: 0.4em; width: 1.9em; height: 1.9em; }
.navmenu_button-group .button-icon_arrow { width: 1.9em; min-width: 1.9em; height: 1.9em; }
.navmenu_list .navbar-link_text {
  color: var(--black);
}
.navmenu_bottom {
  text-align: center;
  color: var(--grey);
  font-family: var(--heading-font);
  font-size: 0.8rem;
  padding: 0 1.5em 1.5em;
  opacity: 0.65;
}

/* WhatsApp modal */
.whatsapp-modal {
  position: fixed;
  inset: 0;
  right: auto;
  bottom: auto;
  width: 100vw;
  height: 100vh;
  z-index: 300;
  /* See the comment on .story-modal above - display is toggled by JS
     (openWhatsappModal/closeWhatsappModal in script.js), not just opacity. */
  display: none;
  overflow: hidden;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
}
.whatsapp-modal.is-active { opacity: 1; pointer-events: auto; }
.whatsapp-modal__dark {
  position: absolute;
  inset: 0;
  background: rgba(18,22,22,0.7);
  backdrop-filter: blur(4px);
}
.whatsapp-modal__card {
  position: relative;
  z-index: 1;
  background: #e6e6e6;
  color: var(--black);
  border-radius: 0;
  padding: 2.5rem;
  max-width: 360px;
  width: 90%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1.2rem;
  transform: translateY(20px);
  opacity: 0;
  transition: transform 0.4s cubic-bezier(0.16,1,0.3,1), opacity 0.4s;
}
.whatsapp-modal.is-active .whatsapp-modal__card { transform: translateY(0); opacity: 1; }
.whatsapp-modal__qr-canvas {
  width: 140px; height: 140px;
  background: #fff;
  border: 1px solid var(--grey);
  border-radius: 0;
  background-image:
    repeating-linear-gradient(45deg, var(--black) 0 4px, transparent 4px 8px);
  background-size: 16px 16px;
  background-position: center;
}
/* This diagonal stripe is only a placeholder for "no QR uploaded yet" - once
   an image is set it should show a plain white canvas instead, otherwise
   the stripes bleed through any transparent part of the uploaded image or
   through the letterboxing object-fit:contain leaves around a non-square
   one. */
.whatsapp-modal__qr-canvas.has-image { background-image: none; border: none; }
.whatsapp-modal__h2 { font-family: var(--heading-font); font-size: 1.4rem; margin: 0; }
.whatsapp-modal__p { white-space: pre-line; font-size: 0.9rem; color: var(--black-60); margin: 0; }
.whatsapp-modal__close {
  position: absolute;
  top: 1rem; right: 1rem;
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  background: none; border: none; cursor: pointer;
}
.whatsapp-modal__close-bar {
  position: absolute;
  width: 18px; height: 2px;
  background: var(--black);
  transform: rotate(45deg);
}
.whatsapp-modal__close-bar.is--duplicate { transform: rotate(-45deg); }

.btn-animate-chars.green .btn-animate-chars__bg { background: var(--night); }
.btn-animate-chars.green .btn-animate-chars__text { color: var(--white); }
.btn-animate-chars.green .button-icon { background: var(--white); color: var(--night); }
.btn-animate-chars.green .button-icon_track { transform: translateX(-50%); }
.btn-animate-chars.green:hover .button-icon_track { transform: translateX(0); }

@media (max-width: 900px) {
  .navbar_col.is-center { display: none; }
  .navbar_col.is-right .navbar-cta { display: none; }
  .navbar_col.is-right { padding-right: 0; gap: 0; }
  .nav-trigger { display: flex; }
  /* With the center column hidden, .navbar's justify-content:space-between
     stretches a gap into the space it left behind, between the WhatsApp
     icon and the burger. Rather than pulling the burger out of its
     far-right spot to close it, the TR/WhatsApp cells themselves grow to
     fill that space instead. */
  .navbar_col.is-left { flex: 1; }
  .navbar_logo { flex: 1; justify-content: center; }
  /* The WhatsApp icon's own border-right (added for the desktop layout,
     where it sits right before the CTA button) doubles up with the
     burger's border-left right after it here - one has to go. */
  .navbar-item.is-wapp { border-right: none; }
}
@media (max-width: 560px) {
  .nav-wrap { padding: 0.85rem 0.85rem 0; }
  .navbar_logo { padding: 0 0.9em; }
  .navbar_logo-item { width: 96px; height: 29px; }
  .navmenu { top: 4.975rem; left: 0.85rem; right: auto; width: calc(100vw - 1.7rem); }
}

/* ---------- HERO ---------- */
.hero {
  position: relative;
  height: 100vh;
  min-height: 640px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  background: #000;
  color: var(--white);
}

.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-width: 100%;
  min-height: 100%;
  object-fit: cover;
  object-position: center center;
}

.hero__banners {
  position: absolute;
  inset: 0;
}
.hero__banner {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  opacity: 0;
  transition: opacity 1.2s ease;
}
.hero__banner.is-active { opacity: 1; }
.hero__banners.is-mobile { display: none; }
@media (max-width: 700px) {
  /* Only swap to the mobile set when one was actually uploaded - the
     has-mobile-override class is added server-side (index.ejs) exactly
     when it exists, so mobile never goes dark just because no
     mobile-specific banners were ever set. */
  .hero__banners.has-mobile-override { display: none; }
  .hero__banners.is-mobile { display: block; }
}

.hero__overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(18,22,22,0) 40%, rgba(18,22,22,0.9) 100%),
    linear-gradient(90deg, rgba(18,22,22,0.75) 0%, rgba(18,22,22,0.15) 40%);
}

.hero__content {
  position: relative;
  z-index: 2;
  padding: 2rem 3rem 3rem;
  max-width: 900px;
}

.hero__content h1 {
  font-size: clamp(2.8rem, 7vw, 5.8rem);
  line-height: 1.05;
  margin-bottom: 1.2rem;
}
.hero__title-main {
  display: block;
  font-family: var(--display-font);
  font-weight: 700;
  color: var(--white);
}
.hero__title-em {
  display: block;
  font-family: var(--script-font);
  font-weight: 400;
  font-size: 0.7em;
  color: var(--red);
  letter-spacing: 0;
  word-spacing: 0;
  margin-top: -0.4em;
  position: relative;
  z-index: 1;
}

.hero__content p { white-space: pre-line;
  color: var(--white);
  font-family: 'Ubuntu', sans-serif;
  font-weight: 400;
  max-width: 560px;
  font-size: 1.05rem;
}

.hero__scroll {
  position: absolute;
  z-index: 2;
  bottom: 2.2rem;
  right: 3rem;
  width: 42px; height: 42px;
  border: 1px solid rgba(246,243,239,0.3);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: bob 2s ease-in-out infinite;
}
@keyframes bob {
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(6px); }
}

/* ---------- GALLERY ---------- */
.gallery {
  position: relative;
  display: flex;
  align-items: center;
  background: #000;
  color: var(--white);
  padding: 2.5rem 0;
  overflow: hidden;
}
.gallery__inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  width: 100%;
}

.gallery__marquee {
  position: relative;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 4%, #000 96%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 4%, #000 96%, transparent 100%);
}
.gallery__track {
  display: flex;
  align-items: flex-start;
  gap: 3.5rem;
  width: max-content;
  padding: 1rem 0;
  transition: transform 0.4s ease;
}

.gallery__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 50px;
  height: 50px;
  border: 1px solid rgba(255,255,255,0.9);
  background: rgba(18,22,22,0.85);
  box-shadow: 0 2px 10px rgba(0,0,0,0.5);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s ease;
}
.gallery__nav:hover { background: rgba(18,22,22,1); }
.gallery__nav:disabled { opacity: 0.3; cursor: default; }
.gallery__nav:disabled:hover { background: rgba(18,22,22,0.85); }
.gallery__nav.is-prev { left: 1.5rem; }
.gallery__nav.is-next { right: 1.5rem; }
.gallery__nav.is-prev svg { transform: rotate(180deg); }

.poster-stamp {
  position: relative;
  margin: 0;
  height: 340px;
  width: auto;
  flex-shrink: 0;
  background: none;
  padding: 0;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,0.45));
  cursor: pointer;
  transition: transform 0.3s ease;
}
.poster-stamp:hover { transform: scale(1.06); }
.poster-stamp img {
  display: block;
  height: 100%;
  width: auto;
  object-fit: contain;
}

@media (max-width: 560px) {
  .poster-stamp { height: 220px; }
}

/* ---------- WHY EACH PRINT IS UNIQUE ---------- */
.unique {
  position: relative;
  height: 150vh;
  /* dvh tracks the browser's actual visible viewport, not the taller value
     100vh uses on mobile (which ignores the address bar). With plain vh,
     .unique__sticky below could end up shorter on-screen than its declared
     100vh, and its overflow:hidden then clipped the bottom of the
     description text against the section's own background - readable one
     moment, cut off the next depending on the address bar's state. Falls
     back to the vh value above on browsers that don't support dvh. */
  height: 150dvh;
}
.unique__sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100dvh;
  display: flex;
  align-items: center;
  background: #e6e6e6;
  padding: 7rem 3rem;
  overflow: hidden;
}
.unique__visual {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
/* .unique__scene locks the 1920x1080 aspect ratio of the source design so
   the stamp's percentage-based position (below) lines up with the pattern
   behind it at any viewport size, rather than drifting whenever cover-fit
   crops the two images differently. */
.unique__scene {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  aspect-ratio: 1920 / 1080;
  /* width/height are set in px by script.js (sizeUniqueScene) so the scene
     always covers the sticky viewport-height stage at any aspect ratio,
     instead of just matching its width and leaving gaps top/bottom. */
  width: 100%;
  height: 100%;
}
.unique__visual-img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}
.unique__stamp-unit {
  position: absolute;
  left: 0.57%;
  top: -0.46%;
  width: 65.83%;
  height: 106.2%;
  display: block;
  transform: translateY(var(--stamp-slide-y, -40px)) scaleY(var(--stamp-slide-scale, 1));
  transform-origin: center top;
  will-change: transform;
}

.unique__inner {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: flex-end;
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
}

.unique__text {
  max-width: 440px;
  flex-shrink: 0;
  text-align: left;
  margin-right: 4rem;
  transform: rotate(-9.5deg);
  transform-origin: left center;
}
.unique__title {
  margin: 0 0 1.2rem;
  line-height: 1.05;
}
.unique__title-main,
.unique__title-em {
  display: block;
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.unique__title-main {
  font-family: var(--display-font);
  font-weight: 700;
  font-size: clamp(3.1rem, 7.6vw, 6.3rem);
  color: var(--black);
  /* Turkish/English lines are short enough to always fit on one line at
     this size, but longer-language translations (German, French, Spanish,
     Italian) can exceed the text column's width - nowrap let those run
     past the column and get clipped by .unique__sticky's overflow:hidden
     instead of wrapping. */
  white-space: normal;
}
.unique-mobile-break { display: none; }
.unique__title-em {
  font-family: var(--script-font);
  font-weight: 400;
  font-size: clamp(1.95rem, 4.9vw, 4rem);
  color: var(--red);
  letter-spacing: 0;
  word-spacing: 0;
  margin-top: -0.4em;
  position: relative;
  z-index: 1;
  transition-delay: 0.15s;
}
.unique__desc { white-space: pre-line;
  color: var(--grey);
  font-size: 1.05rem;
  line-height: 1.6;
  white-space: pre-line;
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.7s ease 0.3s, transform 0.7s ease 0.3s;
}
.unique__text.is-visible .unique__title-main,
.unique__text.is-visible .unique__title-em {
  opacity: 1;
  transform: translateY(0);
}
.unique__text.is-visible .unique__desc {
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 1024px) {
  /* On mobile the image and text are just a normal stacked block (no
     overlap, no scroll-driven fade-in - that's forced to always-visible
     below), so the desktop's fixed-viewport-height sticky trap only gets
     in the way here: longer-language title/description text can be taller
     than one screen, and a fixed height + overflow:hidden would silently
     clip the bottom of it. Letting both grow to fit their content removes
     that ceiling entirely instead of re-tuning it per language. */
  .unique { height: auto; }
  .unique__sticky {
    position: static;
    height: auto;
    min-height: 100vh;
    min-height: 100dvh;
    overflow: visible;
    padding: 7rem 1.5rem;
    flex-direction: column;
    justify-content: center;
    gap: 1.2rem;
  }
  /* Mobile shows only the single loose stamp (pul_unit.png), not the
     repeating pattern it normally sits in front of - too many small stamps
     read as noise on a narrow screen. It's also taken out of the desktop
     cover-fit/absolute-position setup entirely and laid out as a normal,
     centered block with the text stacked below it, instead of the two
     overlapping like they do at desktop widths. */
  .unique__visual-img { display: none; }
  .unique__visual {
    position: static;
    inset: auto;
    display: flex;
    justify-content: center;
    /* Break out of .unique__sticky's 1.5rem side padding to the full
       viewport width, instead of just width:100% of the padded content
       box - the stamp's drop shadow needs that extra 1.5rem per side of
       clipping room, otherwise it gets a visible hard edge cut into it
       (see overflow:hidden note below) before it has faded out. */
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    /* This used to be overflow:visible so the loose stamp's negative
       margin-left could bleed past this box's own edges for effect - but
       that bleed was real, page-level horizontal overflow, not just a
       local visual flourish: it made the whole document scrollable
       sideways, which is what let the fixed nav appear to slide with a
       stray horizontal swipe anywhere on the page. Clipping here keeps
       the bleed local to this section instead. */
    overflow: hidden;
  }
  .unique__scene {
    position: static;
    width: auto !important;
    height: auto !important;
    aspect-ratio: auto;
    transform: none;
  }
  .unique__stamp-unit {
    position: static;
    width: min(145vw, 850px) !important;
    height: auto !important;
    margin-left: -6vw;
    margin-top: 2rem;
  }
  .unique__inner { justify-content: center; max-width: 100%; }
  .unique__text {
    max-width: 100%;
    margin-right: 0;
    text-align: center;
    background: transparent;
    padding: 0;
    transform: none;
  }
  .unique__title { margin-bottom: 1.6rem; }
  .unique__title-main {
    font-size: clamp(2.6rem, 10.5vw, 3.6rem);
    white-space: normal;
  }
  .unique-mobile-break { display: block; }
  .unique__title-em {
    font-size: clamp(2.4rem, 9.8vw, 3.3rem);
  }
  .unique__text { margin-top: -5rem; }
  .unique__desc {
    font-size: 1.05rem;
    line-height: 1.7;
    margin-top: 0.6rem;
  }
  .unique__title-main,
  .unique__title-em,
  .unique__desc {
    opacity: 1;
    transform: translateY(0);
  }
  .unique__text.is-visible .unique__desc { transform: translateY(0); }
}
/* This used to zero out .unique__sticky's side padding below 700px, which
   also stripped away the title/description's only source of side margin
   (.unique__text has no padding of its own - see the 1024px block above),
   letting the text run flush against the screen edges on phones. The
   stamp visual doesn't need the extra room - it already bleeds past the
   sticky's padding on its own via a negative margin. */

/* ---------- HOW IT WORKS ---------- */
/* Faithful port of pieterkoopt.nl's /how-it-works pinned crossfade slideshow:
   a tall scroll spacer with a sticky viewport-height stage; each slide fades
   in/out based on its own weighted share of the scroll range (driven by
   script.js, not GSAP), matching the reference's [1,2,2,2,2]-unit timing. */
.hiw {
  background: #000;
  padding: 7rem 0 0;
}
.hiw-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 2rem;
  flex-wrap: wrap;
  max-width: 1700px;
  margin: 0 auto 3rem;
  /* Was 6rem on the left, 3rem on the right - that extra left indent isn't
     shared by anything else in this section (the numbered step cards below
     sit further left), so the title always read as oddly offset from the
     rest of the section regardless of viewport width. Symmetric now. */
  padding: 0 3rem;
}
.hiw-header__title { margin: 0; line-height: 1.05; }
.hiw-header__title-main {
  display: block;
  font-family: var(--display-font);
  font-weight: 700;
  font-size: clamp(2.8rem, 7vw, 5.8rem);
  color: var(--white);
}
.hiw-header__title-em {
  display: block;
  font-family: var(--script-font);
  font-weight: 400;
  font-size: clamp(1.95rem, 4.9vw, 4rem);
  color: var(--red);
  letter-spacing: 0;
  word-spacing: 0;
  margin-top: -0.9em;
  position: relative;
  z-index: 1;
}
/* Right-aligned by default: at normal desktop widths this sits in its own
   column to the right of the title, and right-aligning it reads as framing
   the title from that side instead of raggedly trailing off center. Once
   the title is long enough to force these two to wrap onto stacked lines
   (see the width check below) it reads as one ordinary block of body copy
   again, so it goes back to plain left alignment there. */
.hiw-header__desc { white-space: pre-line; max-width: 420px; color: var(--white); margin: 0; text-align: right; }

/* Same mobile address-bar mismatch as .unique above - dvh with a vh
   fallback keeps this sticky section's actual on-screen height matching
   its declared height instead of getting clipped by its own
   overflow:hidden. */
.hiw-wrapper { position: relative; height: 480vh; height: 480dvh; }
.hiw-section { position: sticky; top: 0; height: 100vh; height: 100dvh; overflow: hidden; }
.hiw-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.hiw-slide:not([data-slide="4"]) {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3rem;
}

/* Framed card: a bordered, rounded box floating with dark margin all around
   it (matching the reference screenshot) rather than a full-bleed image.
   Proportions (card aspect ratio, image size/centering, padding, corner
   radius) are measured directly off the reference recording rather than
   guessed - see the "how it works" section notes. */
.hiw-card {
  position: relative;
  width: 100%;
  max-width: 1700px;
  aspect-ratio: 3 / 1;
  border: 1px solid rgba(246,243,239,0.25);
  border-radius: 0;
  overflow: hidden;
  display: flex;
  align-items: stretch;
  background: #000;
  will-change: transform;
}
.hiw-card-info {
  flex: 1 1 74%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 2.1% 2.3%;
  min-width: 0;
}
.hiw-card-media {
  position: relative;
  flex: 0 0 33.333%;
  align-self: center;
  aspect-ratio: 1 / 1;
  padding: 1.5%;
}
.hiw-card-media img,
.hiw-card-media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 0;
}

.hiw-number {
  font-family: var(--script-font);
  color: var(--red);
  font-size: clamp(2.2rem, 4vw, 3.6rem);
  line-height: 1;
  letter-spacing: 0;
  word-spacing: 0;
  margin-bottom: 0.5rem;
}
.hiw-info { width: 100%; }
.hiw-step-title {
  color: var(--white);
  font-family: 'Ubuntu', sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(1.4rem, 3vw, 2.2rem);
  margin: 0 0 0.6rem;
}
.hiw-step-desc { white-space: pre-line; color: var(--white); margin: 0; max-width: 460px; }
.hiw-intro-desc { white-space: pre-line; color: var(--white); font-size: 1.15rem; max-width: 480px; margin: 0; }
.hiw-text--closing {
  position: relative;
  height: 100%;
  display: flex;
  align-items: flex-end;
  padding: 4rem 6rem;
  background: var(--green);
  overflow: hidden;
  will-change: transform;
}
/* The image is a full-bleed background rather than sitting beside the text
   (see the closing-slide redesign notes) - the closing text is meant to
   read as baked into the visual, not as a separate column next to it. */
.hiw-closing-media {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hiw-closing-media img,
.hiw-closing-media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.hiw-closing-media.is-mobile { display: none; }
@media (max-width: 700px) {
  .hiw-closing-media.has-mobile-override { display: none; }
  .hiw-closing-media.is-mobile { display: block; }
}
.hiw-closing-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(0deg, rgba(0,0,0,0.78) 0%, rgba(0,0,0,0.35) 45%, rgba(0,0,0,0) 75%);
}
.hiw-closing-info { position: relative; z-index: 2; max-width: 900px; min-width: 0; }
.hiw-closing-title {
  margin: 0 0 1rem;
  line-height: 1.05;
  /* Matches .hero__content h1's size so this closing title reads at the
     same scale as the homepage hero title ("Her Baskı / Kendine Özgüdür."). */
  font-size: clamp(2.8rem, 7vw, 5.8rem);
}
.hiw-closing-title-main {
  display: block;
  font-family: var(--display-font);
  font-weight: 700;
  color: var(--white);
}
.hiw-closing-title-em {
  display: block;
  font-family: var(--script-font);
  font-weight: 400;
  font-size: 0.7em;
  color: var(--red);
  letter-spacing: 0;
  word-spacing: 0;
  margin-top: -0.4em;
}
.hiw-closing-desc { white-space: pre-line;
  color: var(--white);
  font-size: 1.05rem;
  max-width: 560px;
  margin: 0;
  font-family: 'Ubuntu', sans-serif;
  font-weight: 400;
}

/* .hiw-header's title+desc wrap to stacked lines somewhere around ~1300-1370px
   with the current title text (it moves with the title's own length, so
   isn't a clean fixed number) - much higher than the 900px used for this
   component's other mobile tweaks below. Below that width the two are
   stacked (title above, desc below at full-ish width), where the
   right-alignment above just looks like ragged, hard-to-read body text -
   so it's switched back to plain left there. */
@media (max-width: 1350px) {
  .hiw-header__desc { text-align: left; margin-left: 0; }
}
@media (max-width: 900px) {
  .hiw-header { padding: 0 2.75rem; }
  /* Equal top/bottom padding centers the card in the FULL screen - but the
     fixed nav permanently covers the top ~5rem of that screen, so a
     viewer doesn't perceive the full screen as the available area, only
     what's left below the nav. Centered-in-the-full-screen reads as
     "pushed down" against that smaller perceived area: the real gap above
     the card (measured from the nav's bottom edge, not the true top of
     the viewport) ends up smaller than the gap below it, even though the
     two padding numbers are equal. Keeping the extra 5rem on top only,
     on top of an otherwise-equal 1.5rem base gap on both sides, cancels
     that out - the card ends up centered in the space the nav actually
     leaves visible, which is what reads as "centered" to someone looking
     at the screen. */
  .hiw-slide:not([data-slide="4"]) { padding: 6.5rem 1.2rem 1.5rem; align-items: center; }
  /* max-height derived from the padding above (see its comment) so the
     card always exactly fills the space between the two padding edges on
     any screen size, instead of an independent guess that only happened
     to fit at one size. */
  .hiw-card { flex-direction: column; aspect-ratio: auto; height: auto; max-height: calc(100vh - 8rem); max-height: calc(100dvh - 8rem); border-radius: 0; }
  .hiw-card-info { padding: 1.5rem; flex: 0 0 42%; }
  .hiw-card-media { flex: 1 1 auto; min-height: 0; padding: 0; aspect-ratio: auto; align-self: stretch; }
  .hiw-card-media img,
  .hiw-card-media video { width: 100%; height: 100%; aspect-ratio: auto; border-radius: 0; }
  .hiw-text--closing { padding: 2rem; }
}

/* ---------- FOOTER ---------- */
.footer {
  background: #000;
  color: var(--white);
  padding: 3.2rem 3rem;
}
.footer__top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 2rem;
}
.footer__cols {
  display: flex;
  gap: 3rem;
  flex-wrap: wrap;
}
.footer__brand p { color: var(--white); margin-top: 0.8rem; }
.footer__logo { display: block; width: 450px; height: auto; }

.footer__bottom {
  margin-top: 2.4rem;
  padding-top: 1.4rem;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  text-align: center;
}
.footer__bottom p {
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.8rem;
  margin: 0;
}

.footer__col h4 {
  font-family: var(--heading-font);
  color: var(--white);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 1rem;
}
.footer__col a, .footer__col p {
  display: block;
  color: var(--white);
  margin-bottom: 0.6rem;
  font-size: 0.9rem;
}
.footer__col a:hover { color: var(--red); }
.footer__cols .footer__col {
  text-align: right;
}
.footer__col a.footer__social {
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  justify-content: flex-start;
  gap: 0.5rem;
}
.footer__social svg { flex-shrink: 0; }
.footer__social-icon { width: 18px; height: 18px; object-fit: contain; flex-shrink: 0; }

/* ---------- WHATSAPP FAB ---------- */
.whatsapp-fab {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: #25d366;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  z-index: 90;
  box-shadow: 0 8px 20px rgba(0,0,0,0.25);
  transition: transform 0.3s;
}
.whatsapp-fab:hover { transform: scale(1.08); }

/* ---------- RESPONSIVE ---------- */
@media (min-width: 701px) and (max-width: 1024px) {
  .footer__top { flex-direction: column; align-items: center; text-align: center; }
  .footer__brand { display: flex; flex-direction: column; align-items: center; }
  .footer__cols { justify-content: space-evenly; width: 100%; }
  .footer__cols .footer__col { text-align: center; }
  .footer__col a.footer__social { justify-content: center; }
  .footer__logo { width: 520px; }
}
@media (max-width: 700px) {
  .hero__content, .footer {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
  .hero__scroll { right: 1.5rem; }
  .footer__top { flex-direction: column; align-items: center; text-align: center; }
  .footer__cols { flex-direction: column; align-items: center; gap: 1.6rem; width: 100%; }
  .footer__cols .footer__col { text-align: center; }
  .footer__col a.footer__social { justify-content: center; }
  .footer__logo { width: 220px; max-width: 100%; }
}

/* ---------- GALERİ (stories) PAGE ---------- */
/* Faithful port of pieterkoopt.nl/stories: a pinned wall of framed artwork
   that scrolls HORIZONTALLY as the page scrolls vertically - a tall spacer
   (height = the row's natural content width) with a sticky viewport-height
   window, translating the wide row by scroll progress. Driven directly by
   scroll position, not GSAP, matching this project's other pinned sections. */
.stories-scroll { position: relative; touch-action: none; }
.stories-track { position: sticky; top: 0; height: 100vh; height: 100dvh; overflow: hidden; background-color: #d8d8d8; }
.stories-row {
  display: flex;
  align-items: center;
  height: 100%;
  padding-top: var(--stories-row-top-pad, 6vh);
  box-sizing: border-box;
  background-image: url(assets/galeri/wall-bg.png);
  background-repeat: repeat-x;
  background-position: 0 0;
  width: max-content;
  will-change: transform;
}

.stories-header {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 33em;
  padding: 0 11em 0 4rem;
}
.stories-header__title {
  margin: 0 0 1.2rem;
  line-height: 1.15;
  font-family: var(--display-font);
  font-weight: 700;
  font-size: clamp(2.4rem, 6vw, 4.6rem);
  color: var(--black);
  white-space: nowrap;
}
.stories-header__title-main { display: block; color: var(--black); }
.stories-header__title-em {
  display: block;
  font-family: var(--script-font);
  font-weight: 400;
  font-size: 0.7em;
  color: var(--red);
  letter-spacing: 0;
  word-spacing: 0;
  margin-top: -0.4em;
  position: relative;
  z-index: 1;
}
.stories-header__desc { white-space: pre-line; color: var(--grey); max-width: 26em; margin: 0; }

.stories-list {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 18vw;
  height: 100%;
  padding: 0 60vw 8rem 4vw;
}
.stories-item {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
}

.stories-frame {
  position: relative;
  flex-shrink: 0;
  display: block;
  overflow: hidden;
  width: 420px;
  height: clamp(280px, 26vw, 420px);
  padding: 0;
  background: #e6e6e6;
  cursor: pointer;
  transition: transform 0.3s ease;
  /* Layered drop-shadows instead of one flat blur - offset down-and-right
     (as if lit from the upper left) with blur kept smaller than the offset
     on each layer, so the shadow reads as cast onto the wall below/beside
     the frame rather than a halo bleeding out on every side. */
  filter:
    drop-shadow(1px 3px 3px rgba(0, 0, 0, 0.22))
    drop-shadow(5px 14px 14px rgba(0, 0, 0, 0.2))
    drop-shadow(10px 30px 26px rgba(0, 0, 0, 0.15));
}
.stories-frame:hover { transform: scale(1.02); }
.stories-frame.is-vertical { width: 320px; height: clamp(320px, 30vw, 460px); }
.stories-frame.is-horizontal { width: 520px; height: clamp(240px, 22vw, 360px); }
/* The actual safety cap (keeping every frame clear of the fixed nav and the
   bottom margin, on any screen size) is applied by script.js instead of
   here - it scales each frame's real width AND height together from its
   per-item aspect ratio (applyStoriesFrameCap), so a clamped frame shrinks
   cleanly instead of cropping via a height-only max-height. */

/* Real print-size ratios (cm), used instead of the generic vertical/horizontal
   split so each card reflects its actual physical proportions. */
.stories-frame.ratio-35x90 { width: 210px; height: auto; aspect-ratio: 35 / 90; }
.stories-frame.ratio-35x50 { width: 262px; height: auto; aspect-ratio: 35 / 50; }
.stories-frame.ratio-50x70 { width: 300px; height: auto; aspect-ratio: 50 / 70; }
.stories-frame.ratio-55x90 { width: 330px; height: auto; aspect-ratio: 55 / 90; }
.stories-frame.ratio-50x35 { width: 375px; height: auto; aspect-ratio: 50 / 35; }
.stories-frame.ratio-70x50 { width: 420px; height: auto; aspect-ratio: 70 / 50; }
.stories-frame.ratio-90x35 { width: 540px; height: auto; aspect-ratio: 90 / 35; }
.stories-frame.ratio-90x55 { width: 540px; height: auto; aspect-ratio: 90 / 55; }
.stories-frame img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.stories-frame.has-framed-mockup {
  width: 334px;
  height: auto;
  aspect-ratio: 770 / 950;
  background: transparent;
  overflow: visible;
}
.stories-frame img.is-framed-mockup {
  object-fit: contain;
}

.stories-badge {
  position: absolute;
  top: 14px; left: 14px;
  z-index: 2;
  background: var(--night);
  color: var(--white);
  font-family: var(--heading-font);
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0.35em 0.7em;
}
.is-sold-out .stories-frame img { filter: grayscale(1); opacity: 0.45; }

.stories-caption { margin-top: 1rem; max-width: 16em; }
.stories-caption__title {
  margin: 0;
  color: var(--black);
  font-family: var(--display-font);
  font-weight: 700;
  font-size: 1.5rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

@media (max-width: 700px) {
  .stories-header { max-width: 88vw; padding: 0 6vw 0 1.5rem; }
  .stories-list { gap: 26vw; padding: 0 8vw 7rem; }
  /* Frame width/height on mobile is set directly by script.js
     (applyStoriesFrameCap), not here - it needs to scale both dimensions
     together from each frame's own aspect ratio, which a flat vw width
     can't do without distorting or cropping the artwork. */
  .stories-item { align-items: center; text-align: center; }
  .stories-caption { margin-left: auto; margin-right: auto; text-align: center; }
}

.gallery-view-fab {
  position: fixed;
  right: 1.5rem;
  bottom: 1.5rem;
  z-index: 90;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--black);
  color: var(--white);
  border: none;
  cursor: pointer;
  transition: transform 0.25s ease, background-color 0.25s ease;
}
.gallery-view-fab:hover { transform: scale(1.08); background: var(--green); }

/* ---------- STORIES GRID VIEW: 4-across layout toggled from the header ---------- */
.stories-grid { display: none; padding: 7rem 4vw 6rem; }
.stories-grid.is-active { display: block; }
/* Pinterest-style masonry: CSS multi-column layout instead of a grid, so
   each piece keeps its own true proportions (width fixed by the column,
   height following the image) instead of being forced into equal cells. */
.stories-grid__list {
  columns: 4;
  column-gap: 2.4vw;
  max-width: 1400px;
  margin: 0 auto;
}
.stories-grid__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  break-inside: avoid;
  margin: 0 0 2.4rem;
  position: relative;
}
.stories-grid__item .stories-frame {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: auto !important;
  background: #e6e6e6;
  filter: none;
}
/* Grid view shows each card's real framed-mockup photo at its own true
   pixel ratio - letting the box size itself from the image (position:static,
   height:auto) instead of forcing a physical cm ratio onto it, which used
   to crop the left/right (or top/bottom) edges off whenever the mockup
   photo's own proportions didn't exactly match that forced box. */
.stories-grid__item .stories-frame img {
  position: static !important;
  width: 100% !important;
  height: auto !important;
  object-fit: contain !important;
}
/* Title only appears as an overlay on top of the frame on hover, instead
   of sitting as static text underneath it. */
.stories-grid__item .stories-caption {
  position: absolute;
  inset: 0;
  margin: 0;
  max-width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.45);
  opacity: 0;
  transition: opacity 0.25s ease;
  pointer-events: none;
}
.stories-grid__item:hover .stories-caption { opacity: 1; }
.stories-grid__item .stories-caption__title {
  font-size: 1.85rem;
  color: #fff;
}

@media (max-width: 900px) {
  .stories-grid__list { columns: 2; }
}
@media (max-width: 560px) {
  .stories-grid { padding: 7rem 6vw 4rem; }
  .stories-grid__list { columns: 1; }
}

/* ---------- STORY MODAL (galeri.html: "Hikayeyi Gör" opens this centered
   over the gallery instead of navigating away) ---------- */
.story-modal {
  position: fixed;
  inset: 0;
  right: auto;
  bottom: auto;
  width: 100vw;
  height: 100vh;
  z-index: 200;
  /* display is 'none' here and toggled to 'flex' by JS right before opening
     (see openStoryModal/closeStoryModal in script.js) - opacity alone used
     to leave this box counting toward the page's scrollable width even
     while closed and invisible, which on some viewports made it wider than
     the true viewport and shifted the whole page (nav included) sideways
     with no visible cause. display:none removes it from layout entirely
     while closed, so it can't do that regardless of its own sizing. The
     0.3s opacity transition still runs since JS delays the display:none
     until after it finishes. overflow:hidden is a second line of defense
     for while it's actually open. */
  display: none;
  overflow: hidden;
  align-items: center;
  justify-content: center;
  padding: 4vh 4vw;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
}
.story-modal.is-active { opacity: 1; pointer-events: auto; }
.story-modal__dark {
  position: absolute;
  inset: 0;
  background: rgba(18,22,22,0.7);
  backdrop-filter: blur(4px);
}
.story-modal__card-wrap {
  position: relative;
  max-width: 1200px;
  width: 100%;
}
.story-modal__card {
  position: relative;
  z-index: 1;
  display: flex;
  gap: 3rem;
  max-width: 1200px;
  width: 100%;
  max-height: 92vh;
  overflow-y: auto;
  background: var(--white);
  color: var(--black);
  padding: 3.5rem 5.5rem;
  transform: translateY(20px);
  opacity: 0;
  transition: transform 0.4s cubic-bezier(0.16,1,0.3,1), opacity 0.4s;
}
.story-modal.is-active .story-modal__card { transform: translateY(0); opacity: 1; }
.story-modal__close {
  position: absolute;
  top: 1.2rem; right: 1.2rem;
  z-index: 2;
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  background: var(--night); border-radius: 0; border: none; cursor: pointer;
}
.story-modal__close-bar {
  position: absolute;
  width: 14px; height: 2px;
  background: var(--beige);
  transform: rotate(45deg);
}
.story-modal__close-bar.is--duplicate { transform: rotate(-45deg); }

.story-modal__media {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
}
.story-modal__frame {
  position: relative;
  display: block;
  width: auto;
  height: auto;
  max-width: min(34vw, 420px);
  max-height: 78vh;
  aspect-ratio: 3 / 4;
  margin: 0 auto;
}
.story-modal__frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  cursor: zoom-in;
}
#storyModalLightbox { z-index: 250; background: rgba(0,0,0,0.88); padding: 1.5vh 1.5vw; }
#storyModalLightbox img { cursor: default; }
.story-lightbox__frame {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.story-lightbox__frame img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
  pointer-events: auto;
}
.story-modal.is-lightbox-open .story-modal__nav {
  opacity: 0;
  pointer-events: none;
}
.story-modal__thumbs { display: flex; gap: 0.6rem; margin-top: 0.7rem; }
.story-modal__thumb {
  flex: 1;
  aspect-ratio: 1;
  padding: 0;
  border: none;
  box-shadow: 0 0 0 2px transparent;
  background: none;
  cursor: pointer;
  overflow: hidden;
  opacity: 0.55;
  transition: opacity 0.2s ease, box-shadow 0.2s ease;
}
.story-modal__thumb.is-active { opacity: 1; box-shadow: 0 0 0 2px var(--green); }
.story-modal__thumb:hover { opacity: 0.85; }
.story-modal__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

.story-modal__text { flex: 1; min-width: 0; padding-top: 0.5rem; }
.story-modal__title {
  font-family: var(--display-font);
  font-weight: 700;
  font-size: clamp(1.7rem, 3vw, 2.3rem);
  text-transform: uppercase;
  line-height: 1;
  margin: 0;
  color: var(--black);
}
.story-modal__details {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem 0.8rem;
  margin: 0 0 1.1rem;
  padding: 1rem 0;
  border-top: 1px solid rgba(23,28,28,0.12);
  border-bottom: 1px solid rgba(23,28,28,0.12);
}
.story-modal__details--artist { grid-template-columns: 1fr; border-top: none; padding-top: 0; }
.story-modal__detail dt {
  margin: 0 0 0.1rem;
  color: var(--grey);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.story-modal__detail dd { margin: 0; font-weight: 500; color: var(--black); }
.story-modal__artist-list {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.3rem 1.2rem;
}
.story-modal__artist-name {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1;
  position: relative;
  top: 0.12em;
}
.story-modal__artist-first {
  font-family: var(--display-font);
  font-size: 1.4rem;
  color: var(--black);
  letter-spacing: 0.01em;
}
.story-modal__artist-last {
  font-family: var(--script-font);
  font-size: 1.4rem;
  font-weight: 400;
  color: var(--red);
  margin-top: -0.15em;
  margin-left: -0.15em;
}
dd.story-modal__artist-row,
.story-info__detail dd.story-modal__artist-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 0.9rem;
}
.story-modal__artist-marks {
  display: flex;
  gap: 0.3rem;
  flex-shrink: 0;
}
.story-modal__artist-mark {
  width: 32px;
  height: 32px;
  display: block;
}
.story-modal__desc { color: var(--grey); line-height: 1.7; margin: 0 0 1.8rem; }
.story-modal__actions { display: flex; align-items: center; gap: 1.4rem; flex-wrap: wrap; }
.story-modal__cta { height: 3.2em; padding: 0 0.4em 0 1.4em; margin: 0 auto; }
.story-modal__cta .btn-animate-chars__bg { background: var(--night); }
.story-modal__cta .navbar-link_text,
.story-modal__cta .btn-animate-chars__text { color: var(--white); }
.story-modal__cta .button-icon { background: var(--white); color: var(--night); }
.story-modal__cta .button-icon_track { transform: translateX(-50%); }
.story-modal__cta:hover .button-icon_track { transform: translateX(0); }

.story-modal__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 32px;
  height: 32px;
  border-radius: 0;
  border: none;
  background: var(--night);
  box-shadow: none;
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s ease;
}
.story-modal__nav:hover { background: rgba(18,22,22,1); }
.story-modal__nav.is-prev { left: var(--nav-prev-x, 2vw); }
.story-modal__nav.is-next { right: var(--nav-next-x, 2vw); }
.story-modal__nav.is-prev svg { transform: rotate(180deg); }

@media (max-width: 700px) {
  .story-modal__card { flex-direction: column; padding: 2.6rem 2rem; gap: 1.2rem; }
  .story-modal__nav { width: 34px; height: 34px; top: var(--nav-top-mobile, 50%); transform: translateY(-50%); }
  .story-modal__frame { max-width: min(50vw, 260px); }
  .story-modal__desc { font-size: 0.95rem; line-height: 1.55; }
  .story-modal__details { font-size: 0.95rem; gap: 0.9rem 1.2rem; padding: 1rem 0; }
}

/* ---------- STORY DETAIL PAGE (hikaye.html) ---------- */
.story-hero {
  position: relative;
  height: 100vh;
  min-height: 640px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  overflow: hidden;
  background: var(--night);
  color: var(--white);
  text-align: center;
}
.story-hero__bg {
  position: absolute;
  inset: -5%;
  /* Fallback until the inline script (views/eser.ejs) computes the real
     pixel background-size from the stored zoom - see its comment for why
     that replaced a plain "cover" + transform:scale() zoom. */
  background-size: cover;
  background-position: center;
  animation: storyHeroZoom 20s ease-in-out infinite alternate;
}
@keyframes storyHeroZoom {
  from { transform: scale(1); }
  to { transform: scale(1.1); }
}
.story-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(18,22,22,0) 35%, rgba(18,22,22,0.88) 100%);
}
.story-hero__content {
  position: relative;
  z-index: 2;
  padding: 2rem 1.5rem 0;
  max-width: 900px;
  animation: storyFadeUp 1s ease both;
}
.story-hero__title {
  font-family: var(--display-font);
  font-weight: 700;
  font-size: clamp(3rem, 8vw, 6.5rem);
  line-height: 1.1;
  margin: 0 0 0.6rem;
}
.story-hero__artist {
  font-family: 'Playfair Display SC', serif;
  font-style: italic;
  color: var(--green);
  font-size: clamp(1.2rem, 2.4vw, 1.8rem);
  margin: 0;
  animation: storyFadeUp 1s ease 0.15s both;
}
@keyframes storyFadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}
.story-hero__scroll {
  position: relative;
  z-index: 2;
  margin: 2.4rem 0 2.6rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  color: var(--white);
  text-decoration: none;
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.85;
}
.story-hero__scroll-line {
  width: 1px;
  height: 2.6rem;
  background: rgba(246,243,239,0.4);
  animation: bob 2s ease-in-out infinite;
}

.story-info {
  display: flex;
  align-items: flex-start;
  gap: 6vw;
  max-width: 1200px;
  margin: 0 auto;
  padding: 5vw;
}
/* Width lives here (matching .story-info__frame's default) so the closeups
   strip below can just be 100% of this and always match the frame exactly -
   including when an artwork sets a custom detailFrameWidth (see eser.ejs's
   inline <style> block, which overrides both this and #storyLightboxTrigger
   together). */
.story-info__media { position: relative; flex-shrink: 0; margin: 0 auto; width: min(80vw, 420px); }
.story-info__closeups-wrap {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 1rem;
  width: 100%;
}
.story-info__closeups {
  display: flex;
  gap: 0.5rem;
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  min-width: 0;
  /* Hide the scrollbar - the arrow buttons are the intended way to move
     through the strip, a visible native scrollbar would just be visual
     noise alongside them. */
  scrollbar-width: none;
}
.story-info__closeups::-webkit-scrollbar { display: none; }
.story-info__closeups img {
  flex: 0 0 auto;
  width: 88px;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  scroll-snap-align: start;
  cursor: pointer;
  transition: opacity 0.2s ease;
}
.story-info__closeups img:hover { opacity: 0.85; }
.story-info__closeups-arrow {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border: 1px solid var(--black);
  background: var(--black);
  color: var(--white);
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.story-info__closeups-arrow:hover { background: var(--grey); border-color: var(--grey); }
.story-info__frame {
  display: block;
  width: min(80vw, 420px);
  aspect-ratio: 3 / 4;
  padding: 14px;
  border: none;
  cursor: pointer;
  background: linear-gradient(135deg, #6b4a30, #3a2716);
  box-shadow: inset 0 0 0 7px #c9a86b;
}
.story-info__frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  box-shadow: inset 0 0 0 2px rgba(0,0,0,0.3);
}
.story-info__cursor-hint {
  position: fixed;
  z-index: 20;
  top: 0;
  left: 0;
  transform: translate(-1000px, -1000px);
  padding: 0.5em 1em;
  border-radius: 999px;
  background: var(--black);
  color: var(--white);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease;
  white-space: nowrap;
}
.story-info__cursor-hint.is-active { opacity: 1; }
@media (hover: none), (pointer: coarse) {
  .story-info__cursor-hint { display: none; }
}

.story-info__text { flex: 1; min-width: 0; }
.story-info__quote {
  font-family: var(--heading-font);
  font-size: clamp(1.1rem, 2vw, 1.4rem);
  line-height: 1.5;
  color: var(--black);
  margin: 0 0 2.4rem;
  max-width: 32em;
}
.story-info__details {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.6rem 1.5rem;
  margin: 0 0 2.4rem;
  padding: 2rem 0;
  border-top: 1px solid rgba(23,28,28,0.12);
  max-width: 32em;
}
.story-info__detail dt {
  margin: 0 0 0.3rem;
  color: var(--grey);
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.story-info__detail dd {
  margin: 0;
  font-weight: 500;
  color: var(--black);
}
.story-info__desc { white-space: pre-line;
  color: var(--grey);
  line-height: 1.7;
  max-width: 32em;
  margin: 0 0 2rem;
}
.story-info__serial {
  color: var(--grey);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  margin: -1.4rem 0 0;
}

.story-pagination {
  display: flex;
  border-top: 1px solid #fff;
  border-bottom: 1px solid #fff;
  background: #000;
  color: var(--white);
}
.story-pagination__link {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  text-align: left;
  gap: 0.4rem;
  padding: 2rem 3vw;
  text-decoration: none;
  color: inherit;
  transition: background 0.2s ease;
}
.story-pagination__link:hover { background: rgba(246,243,239,0.06); }
.story-pagination__link.is-next {
  align-items: flex-end;
  text-align: right;
  border-left: 1px solid #fff;
}
.story-pagination__label {
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--white);
  opacity: 0.7;
}
.story-pagination__name {
  font-family: var(--display-font);
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(1.3rem, 2.8vw, 1.9rem);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.story-cta {
  text-align: center;
  padding: 7rem 1.5rem;
  max-width: 800px;
  margin: 0 auto;
}
.story-cta__title {
  font-family: var(--display-font);
  font-weight: 700;
  font-size: clamp(2.8rem, 7vw, 5.8rem);
  margin: 0 0 1rem;
  color: var(--black);
}
.story-cta__title-em {
  display: block;
  font-family: var(--script-font);
  font-weight: 400;
  font-size: 0.7em;
  color: var(--red);
  letter-spacing: 0;
  word-spacing: 0;
  margin-top: -1.1em;
  position: relative;
  z-index: 1;
}
.story-cta__desc { color: var(--grey); margin: 0 0 2rem; }

.story-lightbox {
  position: fixed;
  inset: 0;
  right: auto;
  bottom: auto;
  width: 100vw;
  height: 100vh;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4vh 4vw;
  background: rgba(18,22,22,0.92);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease;
}
.story-lightbox.is-active { opacity: 1; visibility: visible; }
.story-lightbox__dark { position: absolute; inset: 0; }
.story-lightbox img {
  position: relative;
  max-width: 100%;
  max-height: 100%;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}
.story-lightbox__close {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  z-index: 2;
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  border: none;
  border-radius: 0;
  background: var(--night);
  color: var(--beige);
  font-size: 1.4rem;
  cursor: pointer;
}
.story-lightbox__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  border: none;
  border-radius: 0;
  background: var(--night);
  color: var(--beige);
  font-size: 1.8rem;
  cursor: pointer;
}
.story-lightbox__arrow.is-prev { left: 1.5rem; }
.story-lightbox__arrow.is-next { right: 1.5rem; }
.story-lightbox__arrow:hover { background: var(--grey); }
@media (max-width: 600px) {
  .story-lightbox__arrow { width: 38px; height: 38px; font-size: 1.4rem; }
  .story-lightbox__arrow.is-prev { left: 0.5rem; }
  .story-lightbox__arrow.is-next { right: 0.5rem; }
}

@media (max-width: 800px) {
  .story-info { flex-direction: column; align-items: center; text-align: center; padding: 4.5rem 6vw; gap: 2.5rem; }
  .story-info__text { padding-top: 0; }
  .story-info__quote, .story-info__desc { max-width: 100%; }
  .story-info__details { max-width: 100%; }
  .story-pagination__link { padding: 1.6rem 4vw; }
  dd.story-modal__artist-row,
  .story-info__detail dd.story-modal__artist-row { justify-content: center; }
}

/* ---------- İLETİŞİM (contact.html) - dark theme, inspired by
   pieterkoopt.nl/contact's own hero+form / info-strip layout ---------- */
.contact-hero-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.8rem;
  background: #000;
  color: var(--white);
  padding: 6.5rem 5vw 1.8rem;
  text-align: center;
}
.contact-hero { max-width: 90vw; }
.contact-hero__title {
  font-family: var(--display-font);
  font-weight: 700;
  font-size: clamp(1.5rem, 5.3vw, 4.9rem);
  line-height: 1.15;
  margin: 0 0 0.6rem;
  color: var(--white);
  white-space: nowrap;
}
.contact-hero__title-em {
  display: block;
  font-family: var(--script-font);
  font-weight: 400;
  font-size: 0.7em;
  color: var(--red);
  letter-spacing: 0;
  word-spacing: 0;
  margin-top: -0.4em;
  position: relative;
  z-index: 1;
}
.contact-hero__desc { white-space: pre-line; color: var(--white); max-width: 26em; margin: 0 auto; }

.contact-form { width: 100%; max-width: 30em; display: flex; flex-direction: column; gap: 0.7rem; text-align: left; }
.contact-form__field { display: flex; flex-direction: column; gap: 0.3rem; font-size: 0.8rem; color: var(--white); }
.contact-form__field input,
.contact-form__field textarea {
  font-family: var(--body-font);
  font-size: 0.95rem;
  color: var(--white);
  background: #0a0a0a;
  border: 1px solid rgba(212,198,185,0.25);
  padding: 0.5rem 1rem;
  resize: vertical;
  transition: border-color 0.2s ease;
}
.contact-form__field input::placeholder,
.contact-form__field textarea::placeholder { color: var(--white); }
.contact-form__field input:focus,
.contact-form__field textarea:focus {
  outline: none;
  border-color: var(--beige);
}
.contact-form__consent {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  font-size: 0.8rem;
  color: var(--white);
}
.contact-form__consent input { margin-top: 0.25rem; accent-color: var(--beige); }
.contact-form__consent a { color: var(--white); }
.contact-form__submit { height: 3.2em; padding: 0 0.4em 0 1.4em; align-self: flex-start; margin-top: 0.2rem; }
.contact-form__submit .outline-bg { background: #fff; }
.contact-form__submit .button-icon { background: var(--night); color: var(--beige); }
.contact-form__submit .button-icon_track { transform: translateX(-50%); }
.contact-form__submit:hover .button-icon_track { transform: translateX(0); }
.contact-form__note { color: var(--white); font-size: 0.8rem; margin: 0; }

body.contact-page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background: var(--night);
}
body.contact-page .contact-hero-section { flex: 1; }

.contact-specs {
  display: flex;
  background: #0a0a0a;
  color: var(--white);
  border-top: 1px solid rgba(212,198,185,0.2);
  border-bottom: 1px solid rgba(212,198,185,0.2);
}
.contact-specs__item {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 1.2rem 1rem;
  text-align: center;
  border: none;
  border-left: 1px solid rgba(212,198,185,0.2);
  border-radius: 0;
  background: none;
  font: inherit;
  color: inherit;
  cursor: default;
  -webkit-appearance: none;
  appearance: none;
}
.contact-specs__item:first-child { border-left: none; }
button.contact-specs__item { cursor: pointer; }
.contact-specs__label {
  color: var(--white);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.contact-specs__value {
  color: var(--white);
  font-weight: 500;
  font-size: 1rem;
  line-height: 24px;
  text-decoration: none;
}
a.contact-specs__value:hover { color: var(--green); }
.contact-specs__icon {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--beige);
}
.contact-specs__icon svg { width: 24px; height: 24px; }

@media (max-width: 800px) {
  .contact-hero, .contact-form { max-width: 100%; }
  .contact-specs { flex-direction: column; }
  .contact-specs__item { border-left: none; border-top: 1px solid rgba(212,198,185,0.2); }
  .contact-specs__item:first-child { border-top: none; }
  /* The submit button otherwise keeps its desktop align-self:flex-start,
     hugging the left edge of the form instead of sitting centered under
     the (also centered) fields above it. */
  .contact-form__submit { align-self: center; }
  .contact-form__note { text-align: center; }
}

/* ---------- ESER DOĞRULAMA (dogrulama.html) ---------- */
body.verify-page {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100vh;
}
/* Side padding is capped with min() so it stays a small gutter instead of
   growing forever with 5vw on wide monitors, which was eating into the
   description's available width and pushing it from 2 lines back to 3 on
   large screens. */
.verify-hero { padding: 9rem min(5vw, 3rem) 5rem; max-width: 50em; margin: 0 auto; text-align: center; }
.verify-hero__title {
  font-family: var(--display-font);
  font-weight: 700;
  font-size: clamp(2.8rem, 7vw, 5.8rem);
  line-height: 1.1;
  margin: 0 0 1rem;
  color: var(--black);
}
.verify-hero__title-em {
  display: block;
  font-family: var(--script-font);
  font-weight: 400;
  font-size: 0.7em;
  color: var(--red);
  letter-spacing: 0;
  word-spacing: 0;
  margin-top: -0.55em;
  position: relative;
  z-index: 1;
}
.verify-hero__desc { white-space: pre-line; color: var(--grey); max-width: 42em; margin: 0 auto; }

.verify-main {
  padding: 2rem 5vw 8rem;
  max-width: 44em;
  margin: -3rem auto 0;
}
.verify-form { display: flex; flex-direction: row; align-items: flex-end; gap: 0; }
.verify-form__field { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.6rem; font-size: 0.85rem; color: var(--grey); }
.verify-form__field input {
  width: 100%;
  height: 54px;
  box-sizing: border-box;
  font-family: var(--heading-font);
  font-size: 1.2rem;
  letter-spacing: 0.06em;
  text-align: left;
  text-transform: uppercase;
  color: var(--black);
  background: var(--white);
  border: 1px solid rgba(23,28,28,0.2);
  border-right: none;
  border-radius: 0;
  padding: 0 1rem;
  transition: border-color 0.2s ease;
}
.verify-form__field input::placeholder {
  font-family: var(--body-font);
  font-size: 0.9rem;
  text-transform: none;
  letter-spacing: normal;
  color: rgba(112,109,102,0.6);
}
.verify-form__field input:focus { outline: none; border-color: var(--green); }
.verify-form__submit { height: 54px; padding: 0 0.4em 0 1.4em; flex-shrink: 0; }
.verify-form__submit .btn-animate-chars__bg { background: var(--night); }
.verify-form__submit .btn-animate-chars__text { color: var(--white); }
.verify-form__submit .button-icon { background: var(--white); color: var(--night); }
.verify-form__submit .button-icon_track { transform: translateX(-50%); }
.verify-form__submit:hover .button-icon_track { transform: translateX(0); }
@media (max-width: 500px) {
  .verify-form { flex-direction: column; align-items: stretch; }
  .verify-form__submit { align-self: stretch; justify-content: space-between; padding-left: 1rem; }
  /* The input's right border is normally removed so it can sit flush
     against the submit button beside it - stacked in a column on mobile,
     that missing edge instead reads as the box being cut off. */
  .verify-form__field input { border-right: 1px solid rgba(23,28,28,0.2); }
}

.verify-result {
  display: none;
  text-align: center;
}
.verify-result.is-visible {
  display: flex;
  position: fixed;
  inset: 0;
  right: auto;
  bottom: auto;
  width: 100vw;
  height: 100vh;
  /* Must stay below .nav-wrap's z-index:100 so the site header remains
     visible/usable while this full-screen result is open (a higher value
     here paints an opaque panel straight over the header). The close
     button is positioned separately, fixed below the header's height, so
     it never gets hidden behind the nav despite this lower stacking. */
  z-index: 95;
  flex-direction: column;
  align-items: center;
  /* justify-content:center clips a too-tall flex child in most browsers -
     once the story text pushes the panel past the viewport height, centering
     hides the top of the content with no way to scroll up to it (only the
     overflow past the far edge is reachable). flex-start keeps the container
     anchored to the top so overflow-y:auto can always scroll all the way
     through; the content block itself gets margin:auto below so it still
     sits vertically centered whenever it's short enough to fit. */
  justify-content: flex-start;
  overflow-y: auto;
  min-height: 100vh;
  margin: 0;
  padding: 6rem 2rem 4rem;
  background: var(--white);
}
.verify-result__content { position: relative; width: 100%; max-width: 1100px; margin: auto; }
.verify-result__close {
  /* Fixed to the viewport (not the scrolling content) and pinned below the
     header's height so it stays clear of .nav-wrap (z-index:100) and stays
     reachable no matter how far the result panel is scrolled. */
  position: fixed;
  top: 6.5rem; right: 2rem;
  z-index: 1;
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  background: none; border: none; cursor: pointer;
}
@media (max-width: 700px) {
  .verify-result__close { top: 5.25rem; right: 1rem; }
}
.verify-result__close-bar {
  position: absolute;
  width: 20px; height: 2px;
  background: var(--black);
  transform: rotate(45deg);
}
.verify-result__close-bar.is--duplicate { transform: rotate(-45deg); }
.verify-result__divider { border: none; border-top: 1px solid rgba(23,28,28,0.12); margin: 1.5rem 0; }
.verify-result__image {
  display: block;
  max-width: min(80vw, 420px);
  max-height: 55vh;
  width: auto;
  height: auto;
  margin: 0 auto 1.5rem;
  box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}
.verify-result__title { font-family: var(--heading-font); font-weight: 600; font-size: 1.5rem; margin: 0 0 0.6rem; color: var(--black); }
.verify-result__desc { white-space: pre-line; color: var(--grey); margin: 0; max-width: 26em; }
/* Only the error-state hide rule is still needed here - the block's own
   look (grid layout, dt/dd typography) now comes entirely from the shared
   .story-info__details class also on this <dl>, so it matches the same
   Teknik/Kağıt spec list used on the artwork's own page. */
.verify-result.is-error .verify-result__details { display: none; }
/* Error state has no image/story-info to sit beside, so it drops the
   gallery-style left column entirely and centers as its own standalone
   message with the old red X mark back above the title. */
.verify-result.is-error .story-info__media { display: none; }
.verify-result.is-error .story-info__text {
  text-align: center;
  max-width: 26em;
  margin: 0 auto;
}
.verify-result.is-error .verify-result__title,
.verify-result.is-error .verify-result__desc {
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
.verify-result.is-error .verify-result__divider { display: none; }
.verify-result__error-icon { color: var(--red); margin: 0 auto 1rem; }
.verify-result.is-error .verify-result__error-icon { display: block !important; }

/* ---------- HAKKIMIZDA (hakkimizda.html) ---------- */
.about-hero { padding: 9rem 5vw 4rem; max-width: 1300px; margin: 0 auto; text-align: center; }
.about-hero__title {
  text-align: center;
  font-family: var(--display-font);
  font-weight: 700;
  font-size: clamp(2.8rem, 7vw, 5.8rem);
  line-height: 1.15;
  margin: 0 0 1.2rem;
  color: var(--black);
}
.about-hero__title-em {
  display: block;
  font-family: var(--script-font);
  font-weight: 400;
  font-size: 0.7em;
  color: var(--red);
  letter-spacing: 0;
  word-spacing: 0;
  margin-top: -0.55em;
  transform: translateX(-0.2em);
  position: relative;
  z-index: 1;
}
.about-hero__desc { white-space: pre-line; color: var(--grey); max-width: 100%; margin: 0 auto; }

.about-duo {
  display: flex;
  gap: 4vw;
  max-width: 1300px;
  margin: 0 auto;
  padding: 2rem 5vw 6rem;
}
.about-person { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; text-align: center; }
.about-person__photo {
  position: relative;
  width: 100%;
  max-width: 380px;
  aspect-ratio: 1 / 1;
  background: var(--beige);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--grey);
  font-size: 0.85rem;
  text-align: center;
  padding: 1rem;
  margin-bottom: 1.2rem;
}
.about-person__photo-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 15%;
  filter: blur(0);
  transition: filter 0.35s ease;
}
.about-person__photo:hover .about-person__photo-img,
.about-person__photo.is-active .about-person__photo-img { filter: blur(10px); }
@media (max-width: 700px) {
  .about-person__photo:hover .about-person__photo-img { filter: none; }
  .about-person__photo.is-active .about-person__photo-img { filter: blur(10px); }
}
.about-person__logo {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 160px;
  height: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--grey);
  font-size: 0.65rem;
  text-align: center;
  line-height: 1.2;
  opacity: 0;
  transition: opacity 0.25s ease;
  pointer-events: none;
}
.about-person__logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.about-person__photo:hover .about-person__logo,
.about-person__photo.is-active .about-person__logo { opacity: 1; }
@media (max-width: 700px) {
  .about-person__photo:hover .about-person__logo { opacity: 0; }
  .about-person__photo.is-active .about-person__logo { opacity: 1; }
}
.about-person__name {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0 0 0.3rem;
  line-height: 1;
}
.about-person__name-main {
  font-family: var(--display-font);
  font-weight: 700;
  font-size: 2.2rem;
  color: var(--black);
}
.about-person__name-em {
  font-family: var(--script-font);
  font-weight: 400;
  font-style: normal;
  font-size: 2rem;
  color: var(--red);
  letter-spacing: 0;
  margin-top: -0.35em;
  position: relative;
  z-index: 1;
}
.about-person__role { font-family: 'Playfair Display SC', serif; font-style: italic; color: var(--green); margin: 0 0 1rem; }
.about-person__bio { white-space: pre-line; color: var(--grey); max-width: 24em; margin: 0; }

.about-joint {
  display: flex;
  align-items: flex-end;
  gap: 5vw;
  background: linear-gradient(to bottom, var(--white) 155px, #e6e6e6 155px);
  padding: 5rem 5vw;
}
.about-joint__media { position: relative; flex: 1; min-width: 0; }
.about-joint__photo {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  background: var(--white);
  overflow: hidden;
}
.about-joint__photo-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.about-joint__photo-img--base { filter: grayscale(1); }
.about-joint__photo-img--hover {
  opacity: 0;
  transition: opacity 0.5s ease;
}
.about-joint__photo:hover .about-joint__photo-img--hover,
.about-joint__photo.is-active .about-joint__photo-img--hover { opacity: 1; }
@media (max-width: 700px) {
  .about-joint__photo:hover .about-joint__photo-img--hover { opacity: 0; }
  .about-joint__photo.is-active .about-joint__photo-img--hover { opacity: 1; }
}
.about-joint__text { flex: 1; min-width: 0; }
.about-joint__logo {
  position: absolute;
  top: -115px;
  right: -60px;
  width: 190px;
  height: 190px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--grey);
  font-size: 0.7rem;
  text-align: center;
  line-height: 1.2;
  z-index: 2;
}
.about-joint__logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.about-joint__title {
  font-family: var(--display-font);
  font-weight: 700;
  font-size: clamp(2.8rem, 7vw, 5.8rem);
  margin: 0 0 1rem;
  color: var(--black);
}
.about-joint__title-em {
  display: block;
  font-family: var(--script-font);
  font-weight: 400;
  font-size: 0.72em;
  color: var(--red);
  letter-spacing: 0;
  word-spacing: 0;
  white-space: nowrap;
  margin-top: -1.3em;
  position: relative;
  z-index: 1;
}
.about-joint__desc { white-space: pre-line; color: var(--grey); margin: 0; max-width: 30em; }

@media (max-width: 800px) {
  .about-duo { flex-direction: column; gap: 3.5rem; }
  .about-joint { flex-direction: column; text-align: center; }
  .about-joint__media { flex: none; width: 100%; }
  .about-joint__text { flex: none; width: 100%; }
  .about-joint__logo { top: -70px; right: 0.5rem; width: 130px; height: 130px; }
}
@media (min-width: 701px) and (max-width: 1024px) {
  .about-joint__logo { top: -80px; right: 1rem; width: 190px; height: 190px; }
}

/* ---------- ATÖLYE (atolye.html) ---------- */
.workshop-hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  text-align: center;
  background: var(--beige);
  color: var(--black);
  padding: 2rem 5vw 0.75rem;
  overflow: hidden;
}
.workshop-hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.workshop-hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(0deg, rgba(18,22,22,0.95) 0%, rgba(18,22,22,0) 70%);
}
.workshop-hero__title, .workshop-hero__desc { white-space: pre-line; position: relative; z-index: 2; }
.workshop-hero__bg ~ .workshop-hero__title { color: var(--white); }
.workshop-hero__bg ~ .workshop-hero__desc { color: var(--white); }
.workshop-hero__note {
  position: absolute;
  top: 6.5rem;
  font-size: 0.75rem;
  color: var(--grey);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border: 1px dashed rgba(23,28,28,0.3);
  padding: 0.5em 1.1em;
}
.workshop-hero__title {
  text-align: center;
  font-family: var(--display-font);
  font-weight: 700;
  font-size: clamp(2.8rem, 7vw, 5.8rem);
  line-height: 1.1;
  margin: 0 0 0.5rem;
  color: var(--black);
  /* Visual-only nudge (doesn't touch the flex-end box model, so it can't
     disturb the title/desc gap that was already tuned separately). */
  top: -2.5rem;
}
.workshop-hero__title-em {
  display: block;
  font-family: var(--script-font);
  font-weight: 400;
  font-size: 0.7em;
  color: var(--red);
  letter-spacing: 0;
  word-spacing: 0;
  margin-top: -0.4em;
  position: relative;
  z-index: 1;
}
.workshop-hero__desc { white-space: pre-line; color: var(--grey); font-size: 1.1rem; line-height: 1.7; max-width: 50em; margin: -1.5rem 0 4rem; }

.workshop-intro { max-width: 62em; margin: 0 auto; text-align: center; padding: 5rem 5vw; }
.workshop-intro__text { white-space: pre-line; color: var(--grey); font-size: 1.1rem; line-height: 1.7; margin: 0; }

/* Bento-style grid: a 4-column base with a few cells spanning extra
   columns/rows (.is-wide, .is-tall, .is-big) so the wall of placeholders
   reads as an uneven, gallery-like arrangement instead of a uniform row. */
.workshop-photos {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 160px;
  gap: 1rem;
  margin: 0;
  padding: 0;
}
.workshop-feature__photo {
  min-width: 0;
  min-height: 0;
  background: var(--beige);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--grey);
  font-size: 0.9rem;
  text-align: center;
  padding: 0;
  overflow: hidden;
}
.workshop-feature__photo span { padding: 1rem; }
.workshop-feature__photo.is-wide { grid-column: span 2; }
.workshop-feature__photo.is-tall { grid-row: span 2; }
.workshop-feature__photo.is-big { grid-column: span 2; grid-row: span 2; }

@media (max-width: 800px) {
  .workshop-photos { grid-template-columns: 1fr 1fr; grid-auto-rows: 140px; gap: 3vw; }
  .workshop-feature__photo.is-big { grid-column: span 2; grid-row: span 2; }
  .workshop-feature__photo.is-wide { grid-column: span 2; grid-row: span 1; }
  .workshop-feature__photo.is-tall { grid-column: span 1; grid-row: span 2; }
}
@media (max-width: 480px) {
  .workshop-photos { grid-template-columns: 1fr; grid-auto-rows: 220px; }
  .workshop-feature__photo,
  .workshop-feature__photo.is-wide,
  .workshop-feature__photo.is-tall,
  .workshop-feature__photo.is-big {
    grid-column: span 1;
    grid-row: span 1;
  }
}

/* Mobile: match every two-line section title's size/closeness to the
   homepage hero title ("Her Baskı" / "Bir İz Taşır") so headings read
   consistently across pages on small screens. */
@media (max-width: 700px) {
  .hiw-header__title,
  .about-person__name,
  .about-hero__title,
  .about-joint__title,
  .workshop-hero__title,
  .stories-header__title,
  .contact-hero__title,
  .verify-hero__title,
  .unique__title {
    font-size: 2.8rem;
    line-height: 1.05;
    white-space: normal;
  }
  .hiw-header__title-main,
  .about-person__name-main,
  .unique__title-main {
    font-size: 1em;
    white-space: normal;
  }
  .unique__title-main + .unique__title-main {
    margin-top: -0.1em;
  }
  .hiw-header__title-em,
  .about-hero__title-em,
  .about-person__name-em,
  .about-joint__title-em,
  .workshop-hero__title-em,
  .stories-header__title-em,
  .contact-hero__title-em,
  .verify-hero__title-em,
  .unique__title-em {
    font-size: 0.7em;
    margin-top: -0.4em;
  }
  .hiw-header__title-em {
    margin-top: -1.9em;
  }
}
@media (min-width: 701px) and (max-width: 1024px) {
  .hiw-header__title-em {
    margin-top: -1.2em;
  }
}