/* The mascot is integrated into the full-resolution artwork, not duplicated. */
:root { --mobile-contact-height: 71px; }
.showcase-stage { display: contents; }
.nav-location-pin { display: none; }
.showcase-actions .showcase-label-desktop, .showcase-actions .showcase-label-mobile { font-size: inherit; }
.showcase-label-mobile { display: none; }
.nav-wrap { min-height: 88px; }
.mobile-header-label { display: block; margin-right: auto; font-size: 9px; letter-spacing: 1px; line-height: 1.6; color: #505766; }
.mobile-header-label strong { color: #151925; font-size: 10px; letter-spacing: .6px; }
.home .nav-wrap { min-height: 110px; }
.home .mobile-header-label { color: white; }
.home .mobile-header-label strong { color: white; }
.home .nav-wrap nav { background: #fffaf1ed; border: 1px solid #15192526; color: #151925; }
.home .nav-location { color: #151925; border-color: #15192580; background: #fffaf1e8; border-radius: 5px; padding: 8px 13px; }
.home .nav-location span:first-child { color: #151925; }
.showcase { height: min(100svh, calc(100vw * 9/16)); min-height: 600px; }
.showcase-media { background: #0b1323; }
.showcase-media img { inset: 0 auto 0 50%; transform: translateX(-50%); width: auto; max-width: 100%; height: 100%; object-fit: contain; object-position: center; mask-image: linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent); }
.showcase-shade { background: linear-gradient(90deg,#0b1323e6 0,#0b1323a8 20%,#0b132345 37%,transparent 53%); }
.showcase-content { top: 50%; bottom: auto; transform: translateY(-43%); align-items: center; width: min(1500px,calc(100% - 144px)); }
.showcase-copy { width: min(100%,560px); }
.showcase h1 { font-size: clamp(54px,4.35vw,80px); line-height: 1.04; max-width: none; letter-spacing: -.055em; margin: 0 0 25px; font-weight: 800; }
.showcase h1 > span, .showcase h1 > em { display: block; }
.showcase h1 > span { font-weight: 650; }
.showcase h1 > em { position: relative; width: fit-content; color: var(--yellow); font-style: normal; white-space: nowrap; }
.showcase h1 > em::after { content: ''; display: block; height: 4px; width: 82px; margin-top: 16px; background: linear-gradient(90deg,var(--cyan) 0 33%,var(--pink) 33% 66%,var(--yellow) 66%); }
.showcase-copy > p { margin-bottom: 27px; font-size: 15px; line-height: 1.85; color: #f0f2f7; }
.showcase-kicker { display: inline-flex; align-items: center; gap: 12px; font-size: 9px; letter-spacing: 1.7px; margin-bottom: 24px; }
.showcase-inks { display: inline-flex; gap: 3px; }
.showcase-inks i { display: block; width: 5px; height: 17px; transform: skewX(-19deg); background: var(--cyan); }
.showcase-inks i:nth-child(2) { background: var(--pink); }
.showcase-inks i:nth-child(3) { background: var(--yellow); }
.showcase-actions { gap: 13px; }
.showcase-quote, .showcase-explore { min-height: 53px; padding: 13px 20px; font-size: 12px; }
.showcase-explore { background: #0b13234d; color: #fff; border: 1px solid #ffffff7a; }
.showcase-explore:hover { background: #fff; color: var(--ink); }
.showcase-work-link { display: inline-flex; align-items: center; gap: 10px; margin-top: 23px; color: #dce2ec; font-size: 10px; }
.showcase-work-link > span:last-child { color: var(--yellow); font-size: 17px; }
.showcase-work-line { width: 27px; height: 1px; background: #ffffff80; transition: width .2s ease; }
.showcase-work-link:hover .showcase-work-line { width: 42px; }
.showcase-project { display: none; }
.showcase-footnote { position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 7px; max-width: calc(100% - 32px); padding: 5px; background: #0b1323e6; border: 1px solid #ffffff3d; border-radius: 8px; box-shadow: 0 6px 24px #0003; }
.showcase-footnote .showcase-scroll { position: static; transform: none; display: inline-flex; align-items: center; gap: 12px; min-height: 42px; padding: 9px 13px; border-radius: 4px; background: var(--yellow); color: var(--ink); font-size: 9px; font-weight: 800; letter-spacing: 1.1px; white-space: nowrap; }
.showcase-footnote .showcase-scroll:hover { background: var(--cyan); }
.showcase-footnote .showcase-scroll::after { content: none; display: none; }
.showcase-footnote .showcase-scroll svg { width: 18px; height: 18px; }
.showcase-art-label { display: inline-flex; align-items: center; gap: 9px; padding: 0 12px 0 5px; font-size: 8px; font-weight: 650; letter-spacing: .5px; color: #b8eeff; white-space: nowrap; }
.showcase-art-dots { display: inline-flex; gap: 3px; }
.showcase-art-dots i { width: 5px; height: 13px; border-radius: 2px; background: var(--cyan); }
.showcase-art-dots i:nth-child(2) { background: var(--pink); }
.showcase-art-dots i:nth-child(3) { background: var(--yellow); }
.desktop-contact { display: none; }
.desktop-contact.is-at-footer { display: none; }
.floating-wa { display: none; }
@media (min-width: 721px) {
  .desktop-contact { position: fixed; right: 22px; bottom: 22px; z-index: 55; display: grid; gap: 8px; width: 200px; }
  .desktop-contact a { display: flex; align-items: center; gap: 12px; min-height: 62px; padding: 12px 16px; border: 1px solid #15192536; border-radius: 7px; background: var(--cyan); color: var(--ink); box-shadow: 0 5px 22px #0003; transition: transform .18s ease, box-shadow .18s ease; }
  .desktop-contact a:last-child { background: var(--pink); }
  .desktop-contact a:hover { transform: translateX(-5px); box-shadow: 0 7px 25px #0005; }
  .desktop-contact a:focus-visible { outline: 3px solid var(--yellow); outline-offset: 4px; }
  .desktop-contact svg { width: 25px; height: 25px; }
  .desktop-contact strong, .desktop-contact small { display: block; }
  .desktop-contact strong { font-size: 13px; line-height: 1.35; }
  .desktop-contact small { margin-top: 3px; font-size: 11px; line-height: 1.35; letter-spacing: .3px; }
}
@media (max-width: 1000px) {
  .showcase { height: 100svh; min-height: 720px; }
  .showcase-content { top: auto; bottom: 112px; transform: none; width: calc(100% - 56px); }
  .showcase h1 { font-size: 54px; }
  .showcase-shade { background: linear-gradient(0deg,#0b1323ed, #0b132380 30%,transparent 63%); }
  .showcase-media::before { content: ''; position: absolute; inset: -25px; background: url('../images/hero-mobile-portrait.png') center bottom/cover no-repeat; filter: blur(20px); }
  .showcase-media img { inset: 0; transform: none; width: 100%; height: 100%; object-fit: contain; object-position: center top; mask-image: none; }
}
@media (max-width: 720px) {
  .showcase { height: calc(100svh - var(--mobile-contact-height) - env(safe-area-inset-bottom)); min-height: 560px; }
  .nav-wrap, .home .nav-wrap { min-height: 76px; }
  .mobile-header-label { font-size: 8px; line-height: 1.7; letter-spacing: .8px; }
  .mobile-header-label strong { font-size: 9px; letter-spacing: .4px; }
  .home .nav-wrap { width: calc(100% - 32px); min-height: 82px; }
  .home .mobile-header-label, .home .header-call { display: none; }
  .home .nav-location { position: relative; display: flex; order: -1; margin-right: auto; padding: 8px 13px 8px 35px; border: 1px solid #ffffff45; border-radius: 30px; background: #0b1323cc; box-shadow: 0 6px 24px #0002; line-height: 1.5; }
  .home .nav-location span:first-child { color: #fff; font-size: 11px; }
  .home .nav-location span:nth-child(2) { color: #d3dce9; font-size: 9px; }
  .home .nav-location-pin { position: absolute; display: block; left: 12px; top: 50%; transform: translateY(-50%); width: 15px; height: 15px; color: var(--cyan); }
  .home .menu-toggle { min-height: 45px; padding: 10px 16px; border: 0; border-radius: 30px; box-shadow: 0 6px 24px #0002; }
  .home.menu-open .nav-location { display: none; }
  .home.menu-open .mobile-header-label { display: block; visibility: visible; color: #505766; }
  .home.menu-open .mobile-header-label strong { color: #151925; }
  .home.menu-open .menu-toggle { background: var(--ink); color: #fff; }
  .nav-wrap nav.is-open, .home .nav-wrap nav.is-open { height: calc(100dvh - var(--mobile-contact-height) - env(safe-area-inset-bottom)); }
  .showcase-stage { display: block; position: absolute; left: 16px; right: 16px; bottom: 12px; border: 0; border-radius: 5px; background: #0b1323b3; box-shadow: none; backdrop-filter: none; }
  .showcase-content { position: absolute; top: 0; bottom: auto; left: 0; right: auto; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; transform: none; }
  .showcase-copy { width: 100%; padding: 0; }
  .showcase-kicker, .showcase-work-link { display: none; }
  .showcase-actions { display: none; }
  .showcase h1 { width: 1px; height: 1px; position: absolute; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
  .showcase-shade { background: none; }
  .showcase-footnote { position: static; max-width: none; margin: 0; transform: none; gap: 8px; padding: 8px 10px; border: 0; border-radius: 0; box-shadow: none; background: transparent; }
  .showcase-footnote .showcase-scroll { display: none; }
  .showcase-footnote .showcase-scroll svg { width: 15px; height: 15px; }
  .showcase-art-label { margin-left: 0; padding: 0; font-size: 7px; gap: 7px; letter-spacing: .2px; }
  .showcase-footnote::after { content: 'TASARIM / ÜRETİM'; margin-left: auto; font-size: 6px; font-weight: 650; letter-spacing: .5px; color: #b8c6d9; }
  .showcase-art-dots { gap: 2px; }
  .showcase-art-dots i { width: 4px; height: 10px; }
  .mobile-contact { gap: 8px; padding: 8px 12px calc(8px + env(safe-area-inset-bottom)); background: #0b1323; border-top: 1px solid #ffffff1f; box-shadow: 0 -8px 26px #0002; }
  .mobile-contact a { justify-content: flex-start; gap: 9px; min-height: 54px; padding: 8px 11px; border-radius: 12px; background: var(--cyan); }
  .mobile-contact svg { width: 32px; height: 32px; padding: 6px; background: #0b132314; border-radius: 50%; }
  .mobile-contact strong, .mobile-contact small { display: block; }
  .mobile-contact strong { font-size: 12px; line-height: 1.35; }
  .mobile-contact small { margin-top: 3px; font-size: 9px; font-weight: 500; line-height: 1.35; letter-spacing: .15px; }
}
@media (max-width: 360px) {
  .showcase-stage { left: 12px; right: 12px; }
  .showcase-footnote { gap: 6px; }
  .showcase-art-label { font-size: 6px; gap: 5px; }
  .mobile-contact { padding-inline: 8px; gap: 7px; }
  .mobile-contact a { gap: 6px; padding-inline: 8px; }
  .mobile-contact strong { font-size: 11px; }
  .mobile-contact svg { width: 29px; height: 29px; padding: 5px; }
  .mobile-header-label { font-size: 7px; letter-spacing: .4px; }
  .mobile-header-label strong { font-size: 8px; letter-spacing: 0; }
}