@charset "UTF-8";

/* MEGO CROSS-BROWSER TEXT NORMALIZATION */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body.mego-page {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}


/* ==========================================================
   MEGO — TEMEL / ANASAYFA
========================================================== */

:root {
  color-scheme: light dark;
  --black: #000000;
  --cream: #f3efe5;
  --red: #f1553d;
  --side: clamp(28px, 3.4vw, 66px);
  --logo-width: 180px;
  --logo-top: 28px;
  --logo-left: 32px;
  --menu-width: 58px;
  --menu-top: 35px;
  --menu-right: 48px;
  --hero-height: 610px;
  --hero-text-left: 65px;
  --hero-text-top: 165px;
  --hero-title-size: 94px;
  --hero-art-width: 545px;
  --hero-art-right: 150px;
  --hero-art-top: -20px;
  --drawer-width: 39vw;
  --drawer-min-width: 560px;
  --font-extra: "apotek-extra-cond",
    "Apotek ExtraCond",
    "apotek-comp",
    "apotek",
    sans-serif;
  --font-cond: "apotek-cond",
    "Apotek Cond",
    "apotek",
    sans-serif;
  --font-body: "roc-grotesk",
    Arial,
    sans-serif;
  --font-script: "Pirata One",
    serif;
}

.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  background: var(--black);
  color-scheme: light dark !important;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-width: 320px;
  overflow-x: hidden;
  background: var(--black);
  color: var(--cream);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  forced-color-adjust: none;
}

/* Samsung Internet koyu modunda da tasarımın özgün MEGO paleti kullanılır. */
@media (prefers-color-scheme: dark) {
  :root {
    --black: #000000;
    --cream: #f3efe5;
    --red: #f1553d;
    color-scheme: dark !important;
  }

  html,
  body {
    background-color: #000000 !important;
    color: #f3efe5 !important;
  }
}

body.menu-open {
  overflow: hidden;
}

img,
svg {
  display: block;
  max-width: 100%;
}

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

button {
  font: inherit;
  color: inherit;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

:where(a, button, input, textarea, select):focus-visible {
  outline: 3px solid var(--red);
  outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }
}

.seo-intro {
  width: min(calc(100% - 60px), 1180px);
  margin: 0 auto 30px;
  color: var(--cream);
}

.seo-intro h1 {
  margin: 0 0 10px;
  font-family: var(--font-extra);
  font-size: clamp(38px, 4vw, 68px);
  font-weight: 900;
  line-height: .95;
  text-transform: uppercase;
}

.seo-intro p {
  max-width: 760px;
  margin: 0;
  font-family: var(--font-body);
  font-size: clamp(15px, 1.2vw, 19px);
  line-height: 1.45;
}

.logos-page .logos-main {
  flex-direction: column;
  align-items: center;
}

.cookie-consent {
  position: fixed;
  z-index: 10000;
  right: 22px;
  bottom: 22px;
  width: min(440px, calc(100vw - 32px));
  padding: 18px;
  border: 1px solid var(--cream);
  background: var(--black);
  color: var(--cream);
  box-shadow: 0 14px 38px rgba(0, 0, 0, .45);
}

.cookie-consent p {
  margin: 0 0 14px;
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.45;
}

.cookie-consent p a,
.footer-privacy-link {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.cookie-consent-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.cookie-consent-actions button {
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid var(--cream);
  background: var(--cream);
  color: var(--black);
  font-family: var(--font-cond);
  font-size: 18px;
  cursor: pointer;
}

.cookie-consent-actions button:first-child {
  background: transparent;
  color: var(--cream);
}

@media (max-width: 760px) {
  .seo-intro {
    width: calc(100% - 15vw);
    margin-bottom: 18px;
  }

  .cookie-consent {
    right: 16px;
    bottom: 16px;
  }
}

.skip-link {
  position: fixed;
  z-index: 9999;
  top: 15px;
  left: 15px;
  padding: 10px 15px;
  background: var(--cream);
  color: var(--black);
  transform: translateY(-200%);
}

.skip-link:focus {
  transform: translateY(0);
}

.apotek-extra {
  font-family: var(--font-extra);
  font-weight: 900;
  font-style: normal;
  font-synthesis: none;
  font-feature-settings: "locl" 1,
    "kern" 1;
  font-language-override: "TRK";
}

.apotek-cond {
  font-family: var(--font-cond);
  font-weight: 400;
  font-style: normal;
  font-synthesis: none;
  font-feature-settings: "locl" 1,
    "kern" 1;
  font-language-override: "TRK";
}

.display-script {
  font-family: var(--font-script);
  font-weight: 400;
}

.hero {
  position: relative;
  min-height: var(--hero-height);
  overflow: hidden;
  background: var(--black);
}

.hero-logo {
  position: absolute;
  z-index: 30;
  top: var(--logo-top);
  left: var(--logo-left);
  width: var(--logo-width);
}

.hero-logo img {
  width: 100%;
  height: auto;
}

.menu-button {
  position: absolute;
  z-index: 40;
  top: var(--menu-top);
  right: var(--menu-right);
  width: var(--menu-width);
  height: 48px;
  padding: 4px 0;
  border: 0;
  background: transparent;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  cursor: pointer;
}

.menu-button span {
  width: 100%;
  height: 9px;
  border-radius: 999px;
  background: var(--red);
  transition: background-color .25s ease,
    transform .25s ease;
}

.hero-copy {
  position: absolute;
  z-index: 20;
  top: var(--hero-text-top);
  left: var(--hero-text-left);
  width: min(56vw, 850px);
}

.hero-copy h1 {
  margin: 0;
  font-family: "Apotek ExtraCond", "apotek", sans-serif;
  font-weight: 900;
  font-size: 100px;
  line-height: .98;
  letter-spacing: -.018em;
}

.hero-copy h1 > span {
  display: block;
}

.hero-row {
  display: flex !important;
  align-items: baseline;
  gap: .13em;
  white-space: nowrap;
}

.hero-row .display-script,
.hero-script-line {
  color: var(--red);
  letter-spacing: -.035em;
}

.hero-row .display-script {
  font-size: .98em;
}

.hero-script-line {
  width: max-content;
  margin-top: .05em;
  font-size: .98em;
}

.fill-button {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 0;
  background: var(--cream);
  color: var(--black);
  line-height: 1;
}

.fill-button::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: var(--red);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .38s
    cubic-bezier(.16, 1, .3, 1);
}

.fill-button span {
  transition: color .25s ease;
}

.fill-button:hover::before,
.fill-button:focus-visible::before {
  transform: scaleX(1);
}

.fill-button:hover span,
.fill-button:focus-visible span {
  color: var(--cream);
}

.hero-cta {
  min-width: 210px;
  height: 58px;
  margin-top: 22px;
  padding: 0 18px;
  font-size: 31px;
}

.hero-motion {
  position: absolute;
  z-index: 10;
  top: var(--hero-art-top);
  right: var(--hero-art-right);
  width: var(--hero-art-width);
  aspect-ratio: 474.09 / 497.01;
  pointer-events: none;
}

.hero-motion-svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.motion-item {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  --intro-x: 0px;
  --intro-y: 0px;
  --mouse-x: 0px;
  --mouse-y: 0px;
  transform: translate3d(
      calc(var(--intro-x) + var(--mouse-x)),
      calc(var(--intro-y) + var(--mouse-y)),
      0
    );
  transition: transform 1.15s
    cubic-bezier(.16, 1, .3, 1),
    opacity .65s ease;
  will-change: transform;
}

.hand-part {
  --intro-y: -340px;
}

.cloud-top {
  --intro-x: -220px;
  transition-delay: .15s;
}

.cloud-bottom {
  --intro-x: 250px;
  transition-delay: .23s;
}

.star-left {
  --intro-x: -150px;
  transition-delay: .32s;
}

.star-right-top {
  --intro-x: 150px;
  transition-delay: .41s;
}

.star-right-bottom {
  --intro-x: 180px;
  transition-delay: .5s;
}

.hero-motion.is-loaded
.motion-item {
  opacity: 1;
  --intro-x: 0px;
  --intro-y: 0px;
}

.hero-motion.follow-ready
.motion-item {
  transition: none;
}

.section-band {
  min-height: 100px;
  margin-inline: var(--side);
}

.section-band h2 {
  margin: 0;
  font-size: clamp(
    48px,
    4vw,
    75px
  );
  line-height: .88;
}

.client-marquee {
  min-height: 170px;
  margin: 10px
    var(--side)
    16px;
}

.client-track {
  align-items: center;
  animation: clientMarquee
    40s
    linear
    infinite;
  will-change: transform;
}

.client-set {
  display: flex;
  flex-shrink: 0;
  align-items: center;
}

.client-item {
  height: 145px;
  display: grid;
  place-items: center;
  padding: 20px 28px;
}

.client-item img {
  width: 100%;
  height: 100%;
  max-width: 210px;
  max-height: 105px;
  object-fit: contain;
}

@keyframes clientMarquee {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }

}

@keyframes logoGrow {
  0%,
  74%,
  100% {
    transform: scale(1);
  }

  84%,
  92% {
    transform: scale(1.13);
  }

}

.projects {
  margin-inline: var(--side);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}

.project-card {
  position: relative;
  overflow: hidden;
  aspect-ratio: 3 / 4;
  background: #000000;
}

.project-card > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .55s ease,
    filter .4s ease;
}

.project-card::after {
  content: attr(data-hover);
  position: absolute;
  z-index: 10;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(0, 0, 0, .55);
  color: var(--cream);
  font-family: var(--font-extra);
  font-size: clamp(
    22px,
    2vw,
    36px
  );
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease;
}

.project-card:hover::after {
  opacity: 1;
}

.project-card:hover > img {
  transform: scale(1.025);
  filter: brightness(.65);
}

.logo-showcase.is-changing > img {
  opacity: 0;
  transform: scale(.78);
}

.about {
  position: relative;
  margin-inline: var(--side);
  overflow: hidden;
  background: var(--black);
}

.about-image {
  position: absolute;
  top: 0;
  height: 100%;
  object-fit: cover;
}

.about-shade {
  position: absolute;
  z-index: 1;
  inset: 0;
  background: linear-gradient(
      90deg,

      rgba(0, 0, 0,1) 0%,

      rgba(0, 0, 0,1) 25%,

      rgba(0, 0, 0,.96) 37%,

      rgba(0, 0, 0,.78) 49%,

      rgba(0, 0, 0,.35) 65%,

      rgba(0, 0, 0,0) 88%
    );
}

.about-content {
  position: relative;
  z-index: 3;
}

.about-content h2 {
  margin: 0;
}

.about-content h2 > span {
  display: block;
}

.about-row {
  display: flex !important;
  align-items: baseline;
  gap: .13em;
}

.about-row .display-script {
  color: var(--red);
  font-family: "Pirata One", serif !important;
  font-weight: 400 !important;
}

.about-content p {
  margin: 24px 0 0;
  font-size: clamp(16px, 1vw, 20px);
  line-height: 1.35;
}

.more-button {
  margin-top: 22px;
  padding-inline: 18px;
}

.contact {
  min-height: 430px;
  margin-inline: var(--side);
  padding: 42px
    38px;
  display: grid;
  grid-template-columns: 1.05fr
    .95fr;
}

.contact-art {
  position: relative;
}

.contact-art
.display-script {
  top: 3%;
  left: 0;
  white-space: nowrap;
}

.contact-art strong {
  top: 42%;
  left: 12%;
  color: var(--red);
}

.contact-copy h2 {
  margin: 0;
  line-height: .9;
}

.contact-note {
  margin: 8px
    0
    9px !important;
  color: var(--red);
}

.contact-copy p {
  margin: 0;
  line-height: 1.25;
}

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  padding-bottom: 4px;
  border-bottom: 1px solid currentColor;
  font-size: clamp(
    20px,
    1.4vw,
    27px
  );
  transition: color .25s ease;
}

.text-link:hover {
  color: var(--red);
}

.footer {
  margin-top: 10px;
  padding: 25px
    var(--side);
  border-top: 3px solid var(--cream);
  gap: 20px;
}

.copyright {
  justify-self: end;
  margin: 0;
}

.menu-overlay {
  position: fixed;
  z-index: 1000;
  inset: 0;
  visibility: hidden;
  pointer-events: none;
}

.menu-overlay.is-open {
  visibility: visible;
  pointer-events: auto;
}

.menu-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background: rgba(0,0,0,.58);
  opacity: 0;
  transition: opacity .38s ease;
}

.menu-panel {
  position: absolute;
  top: 0;
  right: 0;
  width: var(--drawer-width);
  min-width: var(--drawer-min-width);
  height: 100%;
  overflow: hidden;
  transform: translateX(100%);
  transition: transform
    .52s
    cubic-bezier(.16, 1, .3, 1);
}

.menu-overlay.is-open
.menu-backdrop {
  opacity: 1;
}

.menu-overlay.is-open
.menu-panel {
  transform: translateX(0);
}

.menu-close {
  position: absolute;
  z-index: 10;
  width: 65px;
  height: 65px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.menu-close span {
  position: absolute;
  top: 27px;
  left: 5px;
  width: 55px;
  border-radius: 999px;
  background: var(--cream);
}

.menu-close span:first-child {
  transform: rotate(45deg);
}

.menu-close span:last-child {
  transform: rotate(-45deg);
}

.menu-close:hover span,
.menu-close:focus-visible span {
  background: var(--black);
}

.drawer-nav a:hover,
.drawer-nav a:focus-visible {
  color: var(--black);
}





@media (
  prefers-reduced-motion: reduce
) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }

  .motion-item {
    opacity: 1 !important;
    transform: none !important;
  }

}


/* ==========================================================
   ANASAYFA — SON ÖLÇÜLER / MENÜ / PROJELER
========================================================== */

.client-item:first-child img {
  transform: scale(2);
}

.client-item:nth-child(2) img {
  transform: scale(2);
}

.client-item:nth-child(3) img {
  transform: scale(2);
}

.client-item:nth-child(4) img {
  transform: scale(2);
}

.client-item:nth-child(5) img {
  transform: scale(1.8);
}

.client-item:nth-child(6) img {
  transform: scale(1.4);
}

.client-item:nth-child(7) img {
  transform: scale(1.5);
}

.client-item:nth-child(8) img {
  transform: scale(1.5);
}

.client-item:nth-child(9) img {
  transform: scale(1.7);
}

.client-item:nth-child(10) img {
  transform: scale(2);
}

.client-item:nth-child(11) img {
  transform: scale(2);
}

.client-item:nth-child(12) img {
  transform: scale(2);
}

.client-item:nth-child(13) img {
  transform: scale(2);
}

.client-item:nth-child(14) img {
  transform: scale(2);
}

.client-item:nth-child(15) img {
  transform: scale(1.6);
}

.client-item:nth-child(16) img {
  transform: scale(2);
}

.client-item:nth-child(17) img {
  transform: scale(1.5);
}

.client-item {
  width: 360px;
  flex: 0 0 360px;
}

.client-item {
  animation: none !important;
}

.client-set {
  gap: 0 !important;
}

.client-item:nth-child(1) {
  margin-right: -50px;
}

.client-item:nth-child(2) {
  margin-right: 0px;
}

.client-item:nth-child(3) {
  margin-right: -10px;
}

.client-item:nth-child(4) {
  margin-right: 05px;
}

.client-item:nth-child(5) {
  margin-right: -30px;
}

.client-item:nth-child(6) {
  margin-right: 05px;
}

.client-item:nth-child(7) {
  margin-right: 60px;
}

.client-item:nth-child(8) {
  margin-right: 45px;
}

.client-item:nth-child(9) {
  margin-right: 10px;
}

.client-item:nth-child(10) {
  margin-right: 10px;
}

.client-item:nth-child(11) {
  margin-right: 15px;
}

.client-item:nth-child(12) {
  margin-right: 15px;
}

.client-item:nth-child(13) {
  margin-right: 10px;
}

.client-item:nth-child(14) {
  margin-right: 15px;
}

.client-item:nth-child(15) {
  margin-right: 10px;
}

.client-item:nth-child(16) {
  margin-right: 45px;
}

.client-item:nth-child(17) {
  margin-right: 50px;
}

.drawer-nav {
  position: absolute !important;
  left: 65px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 22px !important;
}

.drawer-nav a {
  display: block !important;
  white-space: nowrap !important;
}

.menu-heritage {
  right: auto !important;
}

.drawer-nav a {
  color: var(--cream) !important;
  transition: color 250ms ease,
    transform 250ms ease !important;
}

.drawer-nav a:hover {
  color: var(--black) !important;
  transform: translateX(8px);
}

.menu-close {
  top: 30px !important;
}

.menu-close span {
  transition: background-color 250ms ease !important;
}

.menu-close:hover span {
  background-color: var(--black) !important;
}

.menu-close {
  right: 61px !important;
}

@font-face {
  font-family: "Apotek Black";
  src: local("Apotek Black"),
    local("Apotek-Black");
  font-weight: 900;
  font-style: normal;
}

.drawer-nav {
  top: 30px !important;
}

.drawer-nav a {
  font-family: "apotek-comp", sans-serif !important;
  font-weight: 900 !important;
  font-style: normal !important;
  text-transform: uppercase !important;
}

.menu-close span {
  height: 12px !important;
}

.menu-socials-svg {
  position: absolute;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%);
  width: 300px !important;
  max-width: 80%;
  height: auto;
}

.project-card:not(.logo-showcase)::before {
  content: "";
  position: absolute;
  z-index: 2;
  left: 0;
  right: 0;
  bottom: 0;
  height: 50%;
  background: linear-gradient(
  to top,
  rgba(0, 0, 0, 0.95) 0%,
  rgba(0, 0, 0, 0.72) 42%,
  rgba(0, 0, 0, 0.28) 72%,
  rgba(0, 0, 0, 0) 100%
);
  pointer-events: none;
}

.project-card > img.project-logo {
  position: absolute !important;
  z-index: 5;
  left: 50%;
  bottom: -3%;
  width: 65% !important;
  height: auto !important;
  object-fit: contain !important;
  transform: translateX(-50%) !important;
  filter: none !important;
}

.project-logo-dogfolk {
  width: 80% !important;
}


/* ==========================================================
   LOGOLAR / ORTAK FOOTER
========================================================== */

.logos-header {
  position: relative;
}

.logos-page-logo {
  position: absolute;
  z-index: 10;
}

.logos-page-logo img {
  width: 100%;
  height: auto;
  display: block;
}

.logos-page .footer {
  justify-content: space-between;
}

.logos-page .footer-socials {
  display: flex;
  align-items: center;
  gap: 32px;
}

.logos-page .social-link {
  color: var(--cream) !important;
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}

.logos-page .social-label {
  font-family: "apotek-comp", sans-serif !important;
  font-weight: 900 !important;
  font-size: 26px !important;
  line-height: 1;
  text-transform: uppercase;
}

.footer-social-svg {
  width: 360px;
  height: auto;
  display: block;
  object-fit: contain;
}

.copyright {
  font-size: 22px !important;
}

.footer-behance-label:hover,
.footer-instagram-label:hover {
  color: #f1553d;
}

.menu-social-wrap {
  position: absolute;
  left: 50%;
  bottom: 28px;
  width: 460px;
  height: 78px;
  transform: translateX(-50%);
}

.menu-social-wrap .menu-socials-svg {
  position: absolute !important;
  left: 0 !important;
  top: 50% !important;
  right: auto !important;
  bottom: auto !important;
  width: 300px !important;
  max-width: none !important;
  height: auto !important;
  transform: translateY(-50%) !important;
  object-fit: contain !important;
}

.menu-behance-label,
.menu-instagram-label {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-family: "apotek-comp", "apotek", sans-serif !important;
  font-weight: 900 !important;
  font-style: normal !important;
  font-size: 50px;
  line-height: 1;
  color: var(--cream);
  text-decoration: none;
  white-space: nowrap;
  transition: color .25s ease;
}

.menu-behance-label {
  left: 72px;
}

.menu-instagram-label {
  left: 305px;
}

.menu-behance-label:hover,
.menu-behance-label:focus-visible,
.menu-instagram-label:hover,
.menu-instagram-label:focus-visible {
  color: var(--black);
}

.footer-social-wrap {
  position: relative;
  width: 500px;
  height: 92px;
}

.footer-social-wrap .footer-social-svg {
  position: absolute !important;
  left: 0 !important;
  top: 50% !important;
  width: 300px !important;
  max-width: none !important;
  height: auto !important;
  transform: translateY(-50%) !important;
  object-fit: contain !important;
}

.footer-behance-label,
.footer-instagram-label {
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  font-family: "apotek-comp", "apotek", sans-serif !important;
  font-weight: 900 !important;
  font-style: normal !important;
  font-size: 36px !important;
  line-height: 1 !important;
  color: var(--cream) !important;
  text-decoration: none !important;
  white-space: nowrap;
  transition: color .25s ease;
}

.footer-behance-label {
  left: 80px !important;
}

.footer-instagram-label {
  left: 310px !important;
}

.footer-behance-label:hover,
.footer-behance-label:focus-visible,
.footer-instagram-label:hover,
.footer-instagram-label:focus-visible {
  color: var(--red) !important;
}



.logos-page {
  background: #000000 !important;
  color: var(--cream) !important;
}

.logos-main {
  width: 100%;
  background: #000000 !important;
  padding: 45px 30px 80px;
  display: flex;
  justify-content: center;
}

.logos-board {
  width: 100% !important;
  max-width: 1500px !important;
  height: auto !important;
  display: block;
}

.clients {
  display: block !important;
  background: var(--black) !important;
}

.section-band {
  display: grid !important;
  place-items: center !important;
  background: var(--cream) !important;
  color: var(--black) !important;
}

.client-marquee {
  display: flex !important;
  align-items: center !important;
  overflow: hidden !important;
  background: var(--cream) !important;
}

.client-track {
  display: flex !important;
  width: max-content !important;
}

.logo-showcase {
  display: grid !important;
  place-items: center !important;
  padding: 4% !important;
  background: #f3efe5 !important;
  overflow: hidden;
}

.logo-showcase > img {
width: 58% !important;
height: 58% !important;
  max-width: none !important;
  object-fit: contain !important;
  filter: none !important;
  transition: opacity .18s ease, transform .28s ease !important;
}
.logo-showcase:hover > img {
  filter: none !important;
}

.menu-overlay {
  display: block !important;
}

.menu-panel {
  background: var(--red) !important;
}

.menu-heritage {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: absolute !important;
  left: 50% !important;
  bottom: 18% !important;
  height: auto !important;
  transform: translateX(-50%) !important;
  filter: none !important;
}

.footer-heritage {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  filter: none !important;
}

.footer {
  position: relative !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr)
    280px
    minmax(0, 1fr) !important;
  align-items: center !important;
  min-height: 230px !important;
}

.footer-social-wrap {
  justify-self: start !important;
}

.footer-heritage {
  position: static !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  bottom: auto !important;
  justify-self: center !important;
  width: 260px !important;
  max-width: 260px !important;
  height: auto !important;
  transform: none !important;
}

.copyright,
.logos-page .copyright {
  position: static !important;
  justify-self: end !important;
  margin: 0 !important;
  font-family: var(--font-body) !important;
  font-weight: 400 !important;
  color: var(--cream) !important;
  white-space: nowrap !important;
}


/* ==========================================================
   ANASAYFA — HAKKIMIZDA / İLETİŞİM İNCE AYAR
========================================================== */

.about {
  min-height: 660px !important;
}

.about-image {
  right: -12% !important;
  width: 115% !important;
  object-position: 90% center !important;
}

.about-content {
  min-height: 660px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  width: min(700px, 52%) !important;
  padding: 0
    0
    0
    55px !important;
}

.about-content h2 {
  font-size: clamp(
    64px,
    4.8vw,
    90px
  ) !important;
  line-height: .87 !important;
}

.about-content p {
  font-size: clamp(
    18px,
    1.45vw,
    27px
  ) !important;
  line-height: 1.27 !important;
}

.more-button {
  align-self: flex-start !important;
  width: auto !important;
  min-width: 150px !important;
  height: 58px !important;
  padding: 0 20px !important;
  font-size: 28px !important;
}

.contact-art strong {
  font-family: "apotek-comp", "apotek", sans-serif !important;
  font-weight: 900 !important;
  font-style: normal !important;
}

.contact-copy h2 {
  font-size: clamp(54px, 4.4vw, 82px) !important;
}

.contact-copy p {
  font-size: clamp(19px, 1.45vw, 26px) !important;
}

.contact-note {
  font-size: 22px !important;
}

.contact-copy .text-link {
  font-size: 25px !important;
}

.contact {
  align-items: center !important;
  gap: 0 !important;
}

.contact-art {
  min-height: 330px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: flex-start !important;
}

.contact-art .display-script {
  position: static !important;
  margin: 0 0 -12px 0 !important;
  line-height: .82 !important;
}

.contact-art strong {
  position: static !important;
  margin: 0 0 0 115px !important;
  line-height: .78 !important;
}

.contact-copy {
  transform: translateX(-110px) !important;
  min-height: 330px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
}

.contact-art {
  transform: translateX(90px) !important;
}

.contact-copy .text-link {
  width: max-content !important;
  align-self: flex-start !important;
}

.contact-art .display-script {
  font-size: clamp(115px, 9vw, 170px) !important;
}

.contact-art strong {
  font-size: clamp(145px, 11vw, 205px) !important;
}

.logos-header {
  height: 135px !important;
  background: var(--black) !important;
}

.logos-page-logo {
  top: var(--logo-top) !important;
  left: var(--logo-left) !important;
  width: var(--logo-width) !important;
}

.logos-menu-button {
  top: var(--menu-top) !important;
  right: var(--menu-right) !important;
  width: var(--menu-width) !important;
}

.copyright,
.logos-page .copyright {
  font-size: 27px !important;
}

.logos-page .footer {
  position: relative !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr)
    280px
    minmax(0, 1fr) !important;
  align-items: center !important;
  min-height: 230px !important;
  padding: 25px
    var(--side) !important;
  margin-top: 10px !important;
  background: var(--black) !important;
  color: var(--cream) !important;
  border-top: 3px solid var(--cream) !important;
}

.logos-page .footer-social-wrap {
  position: relative !important;
  justify-self: start !important;
  width: 500px !important;
  height: 92px !important;
}

.logos-page .footer-social-svg {
  position: absolute !important;
  left: 0 !important;
  top: 50% !important;
  width: 300px !important;
  max-width: none !important;
  height: auto !important;
  transform: translateY(-50%) !important;
}

.logos-page .footer-behance-label,
.logos-page .footer-instagram-label {
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  font-family: "apotek-comp",
    "apotek",
    sans-serif !important;
  font-weight: 900 !important;
  font-size: 36px !important;
  line-height: 1 !important;
  color: var(--cream) !important;
  white-space: nowrap !important;
}

.logos-page .footer-behance-label {
  left: 80px !important;
}

.logos-page .footer-instagram-label {
  left: 310px !important;
}

.logos-page .footer-heritage {
  position: static !important;
  justify-self: center !important;
  width: 260px !important;
  max-width: 260px !important;
  height: auto !important;
  transform: none !important;
}

.logos-page .copyright {
  position: static !important;
  justify-self: end !important;
  margin: 0 !important;
  font-family: var(--font-body) !important;
  font-weight: 400 !important;
  font-size: 27px !important;
  color: var(--cream) !important;
  white-space: nowrap !important;
}


/* ==========================================================
   İLETİŞİM SAYFASI
========================================================== */

.contact-page-body {
  margin: 0;
  background: var(--black);
  color: var(--cream);
}

.contact-header {
  position: relative !important;
  width: 100% !important;
  height: 135px !important;
  background: var(--black) !important;
}

.contact-header .hero-logo {
  position: absolute !important;
  z-index: 30 !important;
  top: var(--logo-top) !important;
  left: var(--logo-left) !important;
  width: var(--logo-width) !important;
}

.contact-header .menu-button {
  position: absolute !important;
  z-index: 40 !important;
  top: var(--menu-top) !important;
  right: var(--menu-right) !important;
  width: var(--menu-width) !important;
}

.contact-page {
  width: 100%;
  min-height: 0;
  padding: 0;
  background: var(--black);
  color: var(--cream);
}

.contact-page .contact-hero {
  width: min(calc(100% - 110px), 1580px);
  min-height: 650px;
  margin: 0 auto;
  padding: 18px 0 46px;
  display: grid;
  grid-template-columns: minmax(500px, .9fr) minmax(620px, 1.1fr);
  gap: clamp(80px, 7vw, 125px);
  align-items: start;
}

.contact-page-intro {
  width: 100%;
  padding: 0;
  margin: 0;
  align-self: start;
}

.contact-page-intro h1 {
  margin: 0;
  font-family: "Apotek ExtraCond", "apotek", sans-serif;
  font-weight: 900;
  font-style: normal;
  letter-spacing: -.018em;
}

.contact-page-intro h1 span {
  display: block;
  white-space: nowrap;
  color: var(--cream);
}

.contact-page-intro h1 span:last-child {
  margin: 30px 0 0 0;
}

.contact-page-intro p {
  max-width: 510px;
  margin: 48px 0 0;
  font-family: var(--font-body);
  font-weight: 400;
  letter-spacing: -.01em;
  color: var(--cream);
}

.contact-page .contact-form {
  width: 100%;
  max-width: 720px;
  margin: 4px 0 0 auto;
  padding: 0;
  align-self: start;
}

.contact-page .contact-field {
  width: 100%;
  margin: 0 0 25px;
}

.contact-page .contact-field label {
  display: block;
  margin: 0 0 9px;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 18px;
  line-height: 1;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--cream);
}

.contact-page .contact-field input:not([type="hidden"]) {
  display: block;
  width: 100%;
  height: 42px;
  margin: 0;
  padding: 2px 0 9px;
  background: transparent;
  border: 0;
  border-bottom: 1.5px solid var(--cream);
  border-radius: 0;
  outline: none;
  box-shadow: none;
  color: var(--cream);
  font-family: var(--font-body);
  font-size: 19px;
  font-weight: 400;
}

.contact-page .contact-field input:focus,
.contact-page .contact-field textarea:focus,
.budget-trigger:focus-visible {
  border-bottom-color: var(--red) !important;
  outline: none;
}

.contact-budget {
  position: relative;
  margin-bottom: 25px !important;
}

.budget-dropdown {
  position: relative;
  width: 100%;
}

.budget-trigger {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 42px;
  margin: 0;
  padding: 2px 42px 9px 0;
  background: transparent;
  border: 0;
  border-bottom: 1.5px solid var(--cream);
  border-radius: 0;
  color: var(--cream);
  text-align: left;
  font-family: var(--font-body);
  font-size: 19px;
  font-weight: 400;
  cursor: pointer;
}

.budget-arrow {
  position: absolute;
  right: 5px;
  top: 10px;
  width: 12px;
  height: 12px;
  border-right: 3px solid var(--cream);
  border-bottom: 3px solid var(--cream);
  transform: rotate(45deg);
  transform-origin: center;
  transition: transform .22s ease, top .22s ease;
  pointer-events: none;
}

.budget-dropdown.open .budget-arrow {
  top: 16px;
  transform: rotate(225deg);
}

.budget-options {
  display: none;
  position: absolute;
  z-index: 80;
  top: 42px;
  left: 0;
  width: 100%;
  overflow: hidden;
  background: var(--cream);
  border: 3px solid var(--black);
  box-shadow: 0 12px 30px rgba(0, 0, 0, .28);
}

.budget-dropdown.open .budget-options {
  display: block;
}

.budget-option {
  display: block;
  width: 100%;
  min-height: 48px;
  padding: 10px 16px;
  background: var(--cream);
  color: var(--black);
  border: 0;
  border-bottom: 2px solid var(--black);
  text-align: left;
  font-family: var(--font-body);
  font-size: 19px;
  font-weight: 400;
  line-height: 1.15;
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease;
}

.budget-option:last-child {
  border-bottom: 0;
}

.budget-option:hover,
.budget-option:focus-visible {
  background: var(--red);
  color: var(--black);
  outline: none;
}

.contact-page textarea {
  display: block;
  width: 100%;
  height: 92px;
  min-height: 92px;
  max-height: 92px;
  margin: 0;
  padding: 2px 0 10px;
  resize: none;
  background: transparent;
  border: 0;
  border-bottom: 1.5px solid var(--cream);
  border-radius: 0;
  outline: none;
  box-shadow: none;
  color: var(--cream);
  font-family: var(--font-body);
  font-size: 19px;
  font-weight: 400;
  line-height: 1.3;
}

.contact-submit {
  display: flex;
  align-items: center;
  justify-content: center;
  width: auto;
  min-width: 132px;
  height: 58px;
  margin: -4px 0 0 auto;
  padding: 0 22px;
  border: 0;
  background: var(--red);
  color: var(--cream);
  font-family: "Apotek ExtraCond", "apotek", sans-serif;
  font-weight: 900;
  font-style: normal;
  font-size: 30px;
  line-height: 1;
  cursor: pointer;
  transition: background-color .22s ease, color .22s ease;
}

.contact-submit:hover,
.contact-submit:focus-visible {
  background: var(--cream);
  color: var(--black);
  outline: none;
}

.contact-page-body input:-webkit-autofill,
.contact-page-body input:-webkit-autofill:hover,
.contact-page-body input:-webkit-autofill:focus,
.contact-page-body textarea:-webkit-autofill,
.contact-page-body textarea:-webkit-autofill:hover,
.contact-page-body textarea:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--cream);
  -webkit-box-shadow: 0 0 0 1000px var(--black) inset;
  transition: background-color 9999s ease-in-out 0s;
}

.contact-page-body .footer {
  margin-top: 0 !important;
}

.contact-page-intro h1 {
  font-size: 220px !important;
  line-height: .73 !important;
}

.contact-page-intro p {
  font-size: 28px !important;
  line-height: 1.25 !important;
  margin-top: 46px !important;
}

.contact-page-intro {
  transform: translate(70px, 55px) !important;
}

.contact-page .contact-form {
  transform: translateX(-95px) scale(0.92) !important;
  transform-origin: top right !important;
}


/* ==========================================================
   SOUL MONKEY — CASE STUDY
========================================================== */

.soul-page {
  margin: 0 !important;
  background: #000000 !important;
  color: #f3efe5 !important;
  overflow-x: hidden;
}

.soul-page .case-study-header {
  position: relative !important;
  width: 100% !important;
  height: 135px !important;
  min-height: 135px !important;
  padding: 0 !important;
  background: #000000 !important;
  overflow: visible !important;
}

.soul-page .case-study-header::before,
.soul-page .case-study-header::after {
  display: none !important;
}

.soul-case {
  width: 100%;
  background: #000000;
}

.soul-case-hero {
  width: min(calc(100% - 110px), 1450px);
  margin: 0 auto;
  padding: 25px 0 70px;
}

.soul-case-meta {
  display: grid !important;
  grid-template-columns: 1fr 1fr 1fr !important;
  align-items: center;
  width: 100%;
  margin: 0 0 42px;
  font-family: "roc-grotesk", sans-serif;
  font-size: 17px;
  line-height: 1;
  color: #f3efe5;
  text-transform: uppercase;
}

.soul-case-meta span:nth-child(1) { text-align: left; }

.soul-case-meta span:nth-child(2) {
  text-align: center;
  font-family: "apotek-comp", "apotek", sans-serif;
  font-size: 32px;
  font-weight: 900;
}

.soul-case-meta span:nth-child(3) { text-align: right; }

.soul-case-main-logo {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin-bottom: -200px;
}

.soul-case-main-logo img {
  display: block;
  width: 1000px;
  max-width: 500vw;
  height: auto;
}

.soul-case-boards {
  display: flex;
  justify-content: center;
  width: 100%;
}

.soul-case-boards img {
  display: block;
  width: 1000px;
  max-width: 82%;
  height: auto;
}

/* STREET NEVER SLEEPS */
.soul-manifesto {
  position: relative;
  width: min(calc(100% - 110px), 1450px);
  min-height: 440px;
  margin: 0 auto 80px;
  padding: clamp(24px, 2.5vw, 42px) clamp(38px, 4.5vw, 75px);
  display: flex;
  align-items: center;
  overflow: hidden;
  background: transparent;
  color: #f3efe5;
}

.soul-manifesto-copy {
  position: relative;
  z-index: 2;
  width: min(62%, 860px);
}

.soul-manifesto h1 {
  margin: 0;
  font-family: "apotek-comp", "apotek", sans-serif;
  font-size: clamp(64px, 5.8vw, 108px);
  font-weight: 900;
  line-height: .98;
  letter-spacing: -.02em;
  text-transform: uppercase;
}

.soul-manifesto p {
  width: min(88%, 790px);
  margin: 34px 0 0;
  font-family: "roc-grotesk", sans-serif;
  font-size: clamp(16px, 1.1vw, 20px);
  line-height: 1.35;
}

.soul-manifesto-mascot {

  position: absolute;

  z-index: 1;

  right: 220px !important;

  bottom: 105px;

  width: clamp(220px, 22vw, 370px);

  max-height: 94%;

  object-fit: contain;

  object-position: bottom right;

}

/* LOGO SYSTEM */
.soul-case-identity {
  width: min(calc(100% - 150px), 1250px);
  margin: 0 auto 110px;
}

.soul-heritage-large {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin-bottom: 78px;
}

.soul-heritage-large img {
  display: block;
  width: 520px;
  max-width: 52vw;
  height: auto;
}

.soul-logo-system {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(45px, 6vw, 90px);
  align-items: center;
  width: 100%;
}

.soul-logo-box {
  min-height: 210px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.soul-logo-box img {
  display: block;
  width: 100%;
  max-width: 310px;
  max-height: 200px;
  height: auto;
  object-fit: contain;
}

.soul-logo-box-board img {
  max-width: 220px;
}

/* THE PROBLEM */
.soul-problem {

  width: calc(100% - 110px);

  max-width: 1450px;

  margin: 0 auto;

  background: #f3efe5;

  color: #000000;

}


.soul-problem-inner {
  width: min(calc(100% - 220px), 1380px);
  min-height: 650px;
  margin: 0 auto;
  padding: clamp(70px, 7vw, 115px) 0;
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(60px, 7vw, 130px);
  align-items: center;
}

.soul-problem-copy {

  max-width: 560px !important;

  justify-self: end;

  font-family: "roc-grotesk", Arial, sans-serif !important;

  font-size: clamp(16px, 1.05vw, 19px) !important;

  line-height: 1.38 !important;

}

.soul-problem-copy p {
  margin: 0 0 30px;
}

.soul-problem-copy p:last-child {
  margin-bottom: 0;
}

/* VISUAL LANGUAGE */
.soul-visual-language {
  width: min(calc(100% - 110px), 1450px);
  margin: 0 auto;
  padding: 90px 0 85px;
}

.soul-visual-language h2 {
  margin: 0 0 50px;
  font-family: "apotek-comp", "apotek", sans-serif;
  font-size: clamp(58px, 5vw, 92px);
  font-weight: 900;
  line-height: .88;
  letter-spacing: -.018em;
  text-transform: uppercase;
}

.soul-palette {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.soul-color-card {
  margin: 0;
  min-width: 0;
}

.soul-color-swatch {
  width: 100%;
  aspect-ratio: 1.12 / 1;
  border: 1px solid rgba(243, 239, 229,.55);
}

.soul-color-card figcaption {
  margin-top: 12px;
  font-family: "apotek-comp", "apotek", sans-serif;
  font-size: clamp(20px, 1.55vw, 28px);
  font-weight: 900;
  text-transform: uppercase;
}

.soul-off-white .soul-color-swatch { background: #f3efe5; }
.soul-red .soul-color-swatch { background: #c84527; }
.soul-black .soul-color-swatch { background: #000000; }

/* APPLICATIONS */
.soul-case-gallery {
  width: min(calc(100% - 50px), 1450px);
  margin: 0 auto;
  display: grid !important;
  grid-template-columns: .8fr 1.2fr !important;
  gap: 16px;
  align-items: stretch !important;
}

.soul-gallery-left,
.soul-gallery-right {
  display: grid !important;
  gap: 16px;
  min-width: 0;
  height: 100% !important;
}

.soul-gallery-left {
  grid-template-rows: 1fr 1.72fr 1.08fr !important;
}

.soul-gallery-right {
  grid-template-rows: 1.55fr 1.25fr !important;
}

.soul-case-gallery img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 0;
  min-height: 0 !important;
  object-fit: cover !important;
}

.soul-page .site-footer,
.soul-page .footer {
  margin-top: 0 !important;
}






/* ==========================================================
   DOGFOLK
========================================================== */

.dog-page {
  margin: 0;
  background: #000000;
  color: #f3efe5;
  overflow-x: hidden;
}

.dog-main {
  width: 100%;
  background: #000000;
}

.dog-header {
  position: relative;
  width: 100%;
  height: 135px;
  background: #000000;
}

.dog-meta {
  width: min(
    calc(100% - 110px),
    1450px
  );
  margin: 25px
    auto
    45px;
  display: grid;
  grid-template-columns: 1fr
    1fr
    1fr;
  align-items: center;
  font-family: "roc-grotesk",
    sans-serif;
  font-size: 17px;
  font-weight: 400;
  line-height: 1;
  color: #f3efe5;
}

.dog-meta span:nth-child(1) {
  text-align: left;
}

.dog-meta span:nth-child(2) {
  text-align: center;
  font-family: "apotek",
    sans-serif;
  font-size: 32px;
  font-weight: 900;
}

.dog-meta span:nth-child(3) {
  text-align: right;
}

.dog-hero {
  position: relative;
  width: 100%;
  margin: 0;
  overflow: hidden;
}

.dog-hero-photo {
  display: block;
  width: 100%;
  height: auto;
}

.dog-hero-logo {
  position: absolute;
  left: 8%;
  top: 36%;
  width: 30%;
  max-width: 440px;
  height: auto;
}

.dog-intro {
  width: min(
    calc(100% - 180px),
    1350px
  );
  margin: 45px
    auto
    65px;
  display: grid;
  grid-template-columns: 520px
    1fr;
  gap: 55px;
  align-items: start;
}

.dog-intro-mark {
  width: 520px;
  height: 520px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.dog-intro-mark img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.dog-intro-text {
  width: 100%;
}

.dog-intro-text h1 {
  margin: 0 0 34px;
  font-family: "apotek", sans-serif;
  font-weight: 900;
  font-size: 92px;
  line-height: .86;
  letter-spacing: -.01em;
  color: #f3efe5;
}

.dog-intro-text p {
  max-width: 680px;
  margin: 0
    0
    31px;
  font-family: "roc-grotesk",
    sans-serif;
  font-size: 20px;
  line-height: 1.45;
  color: #f3efe5;
}

.dog-breeds {
  position: relative;
  width: 100%;
  margin: 0;
  overflow: hidden;
}

.dog-breeds-photo {
  display: block;
  width: 100%;
  height: auto;
}

.dog-breeds-wordmark {
  position: absolute;
  right: 7%;
  top: 8%;
  width: 15%;
  max-width: 220px;
  height: auto;
}

.dog-photo-grid {
  width: 100%;
  margin: 5px 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 5px;
  align-items: stretch;
}

.dog-photo-item {
  width: 100%;
  aspect-ratio: 2 / 3;
  overflow: hidden;
  background: #000000;
}

.dog-photo-item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.dog-club {
  position: relative;
  width: 100%;
  margin: 0;
  overflow: hidden;
}

.dog-club-photo {
  display: block;
  width: 100%;
  height: auto;
}

.dog-club-walk {
  position: absolute;
  right: 7%;
  top: 11%;
  width: 25%;
  max-width: 350px;
  height: auto;
}

.dog-club-small {
  position: absolute;
  right: 11%;
  bottom: 7%;
  width: 250px;
  max-width: 100%;
  height: auto;
  object-fit: contain;
}

.dog-forest {
  position: relative;
  width: 100%;
  margin: 5px
    0
    0;
  overflow: hidden;
}

.dog-forest-photo {
  display: block;
  width: 100%;
  height: auto;
}

.dog-forest-circle {
  position: absolute;
  left: 4%;
  top: 8%;
  width: 14%;
  max-width: 190px;
  height: auto;
}

.dog-forest-walk {
  position: absolute;
  right: 5%;
  top: 7%;
  width: 22%;
  max-width: 250px;
  height: auto;
}

.dog-page .footer {
  margin-top: 0 !important;
}

.menu-button,
.contact-header .menu-button {
  position: fixed !important;
  top: var(--menu-top) !important;
  right: var(--menu-right) !important;
  width: var(--menu-width) !important;
  z-index: 9999 !important;
}

body.menu-open .menu-button {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.drawer-nav a {
  font-size: 60px !important;
  line-height: 0.95 !important;
}

.menu-heritage {
  width: 300px !important;
  max-width: 500px !important;
}


/* ==========================================================
   HAKKIMIZDA SAYFASI
========================================================== */

.about-detail-page {
  background: #000000;
  color: #f3efe5;
}

.hm-header {
  position: relative;
  width: 100%;
  height: 135px;
  background: #000000;
}

.hm-main {
  width: 100%;
  background: #000000;
}

.hm-hero {
  width: min(
    calc(100% - 150px),
    1500px
  );
  margin: 30px
    auto
    90px;
}

.hm-title {
  margin: 0;
  font-family: "apotek",
    sans-serif;
  font-size: clamp(
      70px,
      7vw,
      132px
    );
  line-height: .84;
  font-weight: 900;
  letter-spacing: -.025em;
  color: #f3efe5;
}

.hm-title-line {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0
    22px;
}

.hm-title-line + .hm-title-line {
  margin-top: 15px;
}

.hm-script {
  font-family: "Pirata One",
    serif;
  font-style: normal;
  font-weight: 400;
  color: #f1553d;
}

.hm-title .hm-script {
  font-size: .92em;
}

.hm-arrow {
  margin-left: 10px;
  font-family: "roc-grotesk",
    Arial,
    sans-serif;
  font-size: .75em;
  line-height: 1;
  color: #f3efe5;
}

.hm-block {
  margin: 0
    auto;
}

.hm-block-first {
  margin-bottom: 75px;
}

.hm-photo-wrap {
  background: #000000;
}

.hm-copy h2 {
  letter-spacing: -.015em;
  color: #f3efe5;
}

.hm-copy p {
  font-family: "roc-grotesk",
    Arial,
    sans-serif;
  color: #f3efe5;
}

.hm-listen {
  width: min(
    calc(100% - 180px),
    1150px
  );
  margin: 25px
    auto
    100px;
  text-align: center;
}

.hm-listen h2 {
  margin: 0;
  font-family: "apotek",
    sans-serif;
  font-size: clamp(
      70px,
      6vw,
      115px
    );
  font-weight: 900;
  line-height: .84;
  color: #f3efe5;
}

.hm-listen-second {
  margin-top: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
}

.hm-listen-second > span:first-child {
  font-family: "apotek",
    sans-serif;
  font-size: clamp(
      70px,
      6vw,
      115px
    );
  font-weight: 900;
  line-height: .84;
  color: #f3efe5;
}

.hm-script-box {
  display: inline-block;
  padding: 8px
    16px
    5px;
  background: #f1553d;
  color: #000000;
  font-size: clamp(
      62px,
      5.4vw,
      105px
    );
  line-height: .78;
  transform: rotate(-1deg);
}

.hm-listen p {
  margin: 35px
    auto
    0;
  font-family: "roc-grotesk",
    Arial,
    sans-serif;
  font-size: clamp(
      18px,
      1.4vw,
      25px
    );
  line-height: 1.5;
  color: #f3efe5;
}

.hm-copy-left {
  padding: 0
    35px
    0
    0;
}

.hm-small-script {
  display: block;
  margin: -10px
    0
    16px;
  font-size: clamp(
      52px,
      4.4vw,
      82px
    );
  line-height: .85;
}

.about-detail-page .footer {
  margin-top: 0 !important;
}





.about-detail-page .hm-title {
  font-family: "apotek", sans-serif !important;
  font-weight: 900 !important;
  font-size: clamp(70px, 7vw, 132px) !important;
  line-height: .84 !important;
  letter-spacing: -0.025em !important;
  color: #f3efe5 !important;
}

.about-detail-page .hm-title .hm-script {
  font-family: "Pirata One", serif !important;
  font-weight: 400 !important;
  color: #f1553d !important;
}

.hm-block {
  width: min(calc(100% - 70px), 1700px) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 52px !important;
  align-items: start !important;
}

.hm-photo-wrap {
  width: 100% !important;
  height: 820px !important;
  overflow: hidden !important;
}

.hm-photo {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

.hm-copy {
  width: 100% !important;
}

.hm-copy h2 {
  font-family: "apotek-comp", "apotek", sans-serif !important;
  font-weight: 900 !important;
  font-size: 88px !important;
  line-height: .88 !important;
}

.hm-copy p {
  width: 100% !important;
  max-width: none !important;
  font-size: 29px !important;
  line-height: 1.48 !important;
}

.hm-copy {
  height: 820px !important;
  min-height: 820px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  padding: 0 !important;
}

.hm-copy h2 {
  margin: 0 !important;
}

.hm-copy p {
  margin: 0 !important;
}

.hm-block-second {
  width: min(calc(100% - 70px), 1700px) !important;
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 52px !important;
  align-items: start !important;
}

.hm-block-second .hm-copy {
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
}

.hm-block-second .hm-copy h2 {
  margin: 0 0 12px !important;
  font-size: 88px !important;
  line-height: .88 !important;
}

.hm-block-second .hm-small-script {
  margin: 0 0 80px !important;
  font-size: 70px !important;
  line-height: .9 !important;
}

.hm-block-second .hm-copy p {
  width: 100% !important;
  max-width: none !important;
  margin: 0 0 65px !important;
  font-size: 29px !important;
  line-height: 1.48 !important;
}

.hm-block-second .hm-photo-wrap {
  width: 100% !important;
  overflow: hidden !important;
}

.hm-block-second .hm-photo-wrap {
  align-self: start !important;
  margin-top: 0 !important;
}

.hm-block-second .hm-photo {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
}

.about-detail-page .hm-contact {
  min-height: 300px !important;
  margin-top: -250px !important;
  padding-top: -250px !important;
  padding-bottom: -250px !important;
  align-items: center !important;
}

.hm-continuation {
  width: min(calc(100% - 110px), 1500px);
  margin: 100px auto 120px;
}

.hm-proof-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 65px;
  row-gap: 70px;
}

.hm-proof {
  text-align: center;
}

.hm-proof p {
  min-height: 145px;
  margin: 0
    auto
    18px;
  font-family: "roc-grotesk",
    sans-serif;
  font-size: 19px;
  line-height: 1.24;
  color: #f3efe5;
}

.hm-proof img {
  width: 74px;
  height: 74px;
  margin: 0
    auto
    13px;
  display: block;
  object-fit: cover;
  object-position: center;
  border-radius: 50%;
}

.hm-proof h4 {
  margin: 0
    0
    3px;
  font-family: "apotek-comp",
    "apotek",
    sans-serif;
  font-size: 34px;
  font-weight: 900;
  line-height: 1;
  color: #f3efe5;
}

.hm-proof > span {
  display: block;
  font-family: "roc-grotesk",
    sans-serif;
  font-size: 15px;
  line-height: 1;
  color: #f3efe5;
}





.hm-block-second {
  margin-bottom: 0 !important;
}

.hm-block-second .hm-copy {
  height: 650px !important;
  min-height: 650px !important;
}

.hm-block-second .hm-photo-wrap {
  height: 650px !important;
}

.hm-services {
  width: min(calc(100% - 110px), 1500px) !important;
  margin: 65px
    auto
    90px !important;
}

.hm-services-head {
  margin: 0 0 42px !important;
}

.hm-services-head > span {
  display: block;
  margin: 0 0 9px;
  font-family: "roc-grotesk",
    sans-serif;
  font-size: 17px;
  font-weight: 500;
  color: #f1553d;
}

.hm-services-head h2 {
  margin: 0;
  font-family: "apotek-comp",
    "apotek",
    sans-serif;
  font-size: clamp(68px, 6vw, 105px);
  font-weight: 900;
  line-height: .84;
  letter-spacing: -.02em;
  color: #f3efe5;
}

.hm-services-grid {
  width: 100% !important;
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 28px !important;
  align-items: stretch !important;
}

.hm-service-card {
  width: auto !important;
  min-width: 0 !important;
  min-height: 320px !important;
  margin: 0 !important;
  padding: 24px
    18px
    22px !important;
  border: 1px solid
    rgba(243, 239, 229, .75);
  background: #000000;
}

.hm-service-card h3 {
  min-height: 78px;
  margin: 0;
  font-family: "apotek-comp",
    "apotek",
    sans-serif;
  font-size: 44px;
  font-weight: 900;
  line-height: .82;
  color: #f3efe5;
}

.hm-service-line {
  width: 125px;
  height: 6px;
  margin: 21px
    0
    9px;
  background: #f1553d;
}

.hm-service-card ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.hm-service-card li {
  padding: 10px
    0;
  border-bottom: 1px solid
    rgba(243, 239, 229, .38);
  font-family: "roc-grotesk",
    sans-serif;
  font-size: 18px;
  line-height: 1.1;
  color: #f3efe5;
}

.hm-service-card li:last-child {
  border-bottom: 0;
}






/* ==========================================================
   GLOBAL SCROLL ANİMASYONLARI
========================================================== */

.reveal {
  opacity: 0;
  transform: translateY(55px);
  transition: opacity .8s ease,
    transform .9s cubic-bezier(.16, 1, .3, 1);
  will-change: opacity, transform;
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.reveal-image {
  opacity: 0;
  transform: translateY(35px)
    scale(.97);
  transition: opacity .9s ease,
    transform 1.1s cubic-bezier(.16, 1, .3, 1);
  will-change: opacity, transform;
}

.reveal-image.is-visible {
  opacity: 1;
  transform: translateY(0)
    scale(1);
}

.reveal-left {
  opacity: 0;
  transform: translateX(-60px);
  transition: opacity .8s ease,
    transform 1s cubic-bezier(.16, 1, .3, 1);
}

.reveal-left.is-visible {
  opacity: 1;
  transform: translateX(0);
}

.reveal-right {
  opacity: 0;
  transform: translateX(60px);
  transition: opacity .8s ease,
    transform 1s cubic-bezier(.16, 1, .3, 1);
}

.reveal-right.is-visible {
  opacity: 1;
  transform: translateX(0);
}

.reveal-stagger > * {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity .7s ease,
    transform .85s cubic-bezier(.16, 1, .3, 1);
}

.reveal-stagger.is-visible > *:nth-child(1) {
  transition-delay: 0s;
}

.reveal-stagger.is-visible > *:nth-child(2) {
  transition-delay: .08s;
}

.reveal-stagger.is-visible > *:nth-child(3) {
  transition-delay: .16s;
}

.reveal-stagger.is-visible > *:nth-child(4) {
  transition-delay: .24s;
}

.reveal-stagger.is-visible > *:nth-child(5) {
  transition-delay: .32s;
}

.reveal-stagger.is-visible > *:nth-child(6) {
  transition-delay: .40s;
}

.reveal-stagger.is-visible > * {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal-image,
  .reveal-left,
  .reveal-right,
  .reveal-stagger > * {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

}

/* ==========================================================
   ANASAYFA — MEGO PDF REFERANSI
   Yalnızca index.html (.home-page) için.
   Menü overlay / JS yapısına dokunmaz.
========================================================== */

/* Ana sayfada Apotek Extra Cond Black görünümü. Adobe kitte
   bulunan dar Apotek ailesi önce denenir; mevcut kit isimleri
   fallback olarak korunur. */
.home-page .apotek-extra,
.home-page .hero-title .hero-sans {
  font-family: "apotek-extra-cond", "Apotek ExtraCond", "apotek-comp", "apotek", sans-serif !important;
  font-weight: 900 !important;
  font-style: normal !important;
  font-synthesis: none !important;
}

.home-page .hero {
  position: relative;
   min-height: clamp(670px, 34vw, 700px);
  overflow: hidden;
  background: var(--black);
}

/* PDF: logo solda yaklaşık %4.6 içerde. */
.home-page .hero > .hero-logo,
.home-page .contact-header > .hero-logo {
  top: clamp(28px, 2.3vw, 47px) !important;
  left: clamp(30px, 4.64vw, 95px) !important;
  width: clamp(145px, 9.1vw, 186px) !important;
}

/* PDF: hamburger daha içerde ve çizgiler daha kısa. */
.home-page .hero > .menu-button,
.home-page .contact-header > .menu-button {
  top: clamp(35px, 3.22vw, 66px) !important;
  right: clamp(32px, 4.69vw, 96px) !important;
  width: clamp(32px, 2vw, 42px) !important;
  height: clamp(26px, 1.65vw, 34px) !important;
  padding: 0 !important;
  gap: 0 !important;
}

.home-page .hero > .menu-button,
.home-page .contact-header > .menu-button {
  border-radius: 1px;
  transition:
    background-color .25s ease,
    box-shadow .25s ease,
    transform .25s ease;
}
.home-page .hero > .menu-button:hover,
.home-page .hero > .menu-button:focus-visible,
.home-page .contact-header > .menu-button:hover,
.home-page .contact-header > .menu-button:focus-visible {
  background: var(--red);
  transform: none;
  box-shadow: 0 0 0 12px var(--red);
}

.home-page .hero > .menu-button:hover span,
.home-page .hero > .menu-button:focus-visible span,
.home-page .contact-header > .menu-button:hover span,
.home-page .contact-header > .menu-button:focus-visible span {
  background: var(--cream) !important;
}
.home-page .hero > .menu-button span,
.home-page .contact-header > .menu-button span {
  height: 5px !important;

  width: 100% !important;
  height: clamp(5px, .34vw, 7px) !important;
  border-radius: 999px;
}

/* Raven: PDF'deki büyük sol kompozisyon. SVG'nin kendi boşluğu
   hesaba katılarak element yukarıdan konumlanır. */
.home-page .hero-raven {
  position: absolute;
  z-index: 10;
  top: clamp(160px, 7vw, 145px);
  left: calc(9.35vw + 20px);
  width: min(46.1vw, 944px);
  max-width: none;
  height: auto;
  pointer-events: none;
  user-select: none;
}

/* PDF'de başlık satırlarının SAĞ KENARI aynı hizada. */
.home-page .hero-copy {
  position: absolute;
  z-index: 20;
  top: clamp(160px, 13vw, 190px);
  right: calc(8vw + 80px);
  left: auto;
  width: min(62vw, 1260px);
  text-align: right;
}

.home-page .hero-title {
  width: 100%;
  margin: 0;
  color: var(--cream);
  text-align: right;
}

.home-page .hero-title-line {
  display: flex !important;
  width: 100%;
  align-items: baseline;
  justify-content: flex-end;
  gap: .12em;
  white-space: nowrap;
  justify-content: flex-end;
  font-size: clamp(74px, 6.4vw, 132px);
  line-height: .93;
  letter-spacing: -.025em;
}

.home-page .hero-title-line + .hero-title-line {
  margin-top: clamp(12px, 1.15vw, 24px);
}

.home-page .hero-title-line .apotek-extra,
.home-page .hero-title-line.apotek-extra {
  font-family: "apotek-comp", "apotek", sans-serif !important;
  font-weight: 500 !important;
  font-style: normal !important;
  font-synthesis: none !important;
  letter-spacing: 0.03em !important;
}

.home-page .hero-title-line .display-script {
  font-family: "Pirata One", serif !important;
  font-weight: 400 !important;
  font-style: normal !important;
  letter-spacing: -0.035em;
}

.home-page .hero-red {
  color: var(--red);
}

/* Buton da PDF'de sağ kenara yaslı. */
.home-page .hero-cta {
  display: flex;
  width: max-content;
  min-width: 0;
  height: clamp(48px, 2.93vw, 60px);
  margin-top: 28px;
  margin-left: auto;
  padding: 0 clamp(18px, 1.35vw, 28px);
  font-family: "apotek-cond", "Apotek Cond", "apotek", sans-serif !important;
  font-weight: 400 !important;
  font-size: clamp(22px, 1.35vw, 28px);
}

/* PDF ana içerik kolonu. */
.home-page .projects,
.home-page .clients,
.home-page .about,
.home-page .contact {
  margin-inline: clamp(24px, 9.8vw, 201px) !important;
}

.home-page .projects {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}

.home-page .dogfolk-logo-card {
  display: grid !important;
  place-items: center !important;
  padding: 16% !important;
  background: var(--cream) !important;
}

.home-page .dogfolk-logo-card::before {
  display: none !important;
}

.home-page .dogfolk-logo-card > .dogfolk-grid-logo {
  position: static !important;
  width: 72% !important;
  height: auto !important;
  object-fit: contain !important;
  filter: brightness(0) !important;
  transform: none !important;
}

.home-page .dogfolk-logo-card:hover > .dogfolk-grid-logo {
  transform: scale(1.025) !important;
  filter: brightness(0) !important;
}

.home-page .clients {
  display: block !important;
  padding: 25px 0 clamp(44px, 3.6vw, 74px);
  background: var(--black) !important;
}

.home-page .clients > h2 {
  margin: 0 0 clamp(28px, 2.4vw, 48px);
  color: var(--cream);
  text-align: center;
  font-family: "apotek-extra-cond", "Apotek ExtraCond", "apotek-comp", "apotek", sans-serif !important;
  font-weight: 900 !important;
  font-size: clamp(46px, 4vw, 82px);
  line-height: .9;
}

.home-page .client-static {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  align-items: center;
  gap: clamp(22px, 2.6vw, 52px);
}

.home-page .client-static img {
  display: block;
  width: 100%;
  max-width: 220px;
  max-height: 88px;
  margin: 0 auto;
  object-fit: contain;
}

/* PDF'deki alt başlıklarda da aynı ExtraCond Black. */
.home-page .about-content h2,
.home-page .contact-copy h2,
.home-page .contact-art strong {
  font-family: "apotek-extra-cond", "Apotek ExtraCond", "apotek-comp", "apotek", sans-serif !important;
  font-weight: 900 !important;
}




.same-table-title {
  font-family: "apotek-comp", "apotek", sans-serif !important;
  font-weight: 500 !important;
  letter-spacing: .02em;
}
.home-page .clients .same-table-title {
  font-family: "apotek-comp", "apotek", sans-serif !important;
  font-weight: 500 !important;
  font-style: normal !important;
  letter-spacing: .02em !important;
  margin-top: -10px;
}

.home-page .same-table-marquee {
  width: 100%;
  overflow: hidden;
}

.home-page .same-table-track {
  display: flex;
  width: max-content;
  animation: sameTableScroll 22s linear infinite;
}

.home-page .same-table-set {
  display: flex;
  align-items: center;
  gap: clamp(70px, 7vw, 150px);
  padding-right: clamp(70px, 7vw, 150px);
  flex-shrink: 0;
}

.home-page .same-table-set img {
  width: auto !important;
  height: clamp(48px, 4.5vw, 90px) !important;
  max-width: 220px !important;
  object-fit: contain;
  flex-shrink: 0;
}

@keyframes sameTableScroll {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

.home-page .idea-section {
  width: min(88%, 1500px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  align-items: center;
  column-gap: clamp(70px, 6vw, 120px);
  padding: clamp(70px, 6vw, 120px) 0;
}

/* SOL */

.home-page .idea-left {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.home-page .idea-script {
  font-family: "Pirata One", serif !important;
  font-size: clamp(110px, 10vw, 195px);
  font-weight: 400;
  line-height: .78;
  color: #f3efe5;
  white-space: nowrap;
}

.home-page .idea-yeter {
  font-family: "apotek-comp", "apotek", sans-serif !important;
  font-size: clamp(145px, 13vw, 250px);
  font-weight: 900 !important;
  line-height: .72;
  letter-spacing: .01em;
  color: var(--red);
  margin-top: 18px;
}

/* SAĞ */

.home-page .idea-right {
  max-width: 650px;
  align-self: center;
}

.home-page .idea-right h2 {
  margin: 0 0 14px;
  font-family: "apotek-comp", "apotek", sans-serif !important;
  font-size: clamp(58px, 4.8vw, 92px);
  font-weight: 900 !important;
  line-height: .9;
  letter-spacing: .015em;
  color: #f3efe5;
  white-space: nowrap;
}

.home-page .idea-note {
  display: block;
  margin-bottom: 24px;
  font-family: "apotek", sans-serif !important;
  font-size: clamp(30px, 2.3vw, 46px);
  line-height: 1;
  color: var(--red);
}

.home-page .idea-right p {
  margin: 0 0 32px;
  font-family: "apotek", sans-serif !important;
  font-size: clamp(22px, 1.55vw, 30px);
  font-weight: 400;
  line-height: 1.42;
  color: #f3efe5;
}

.home-page .idea-link {
  position: relative;
  display: inline-block;
  overflow: hidden;
  padding: 8px 12px;
  font-family: "apotek-comp", "apotek", sans-serif !important;
  font-size: clamp(26px, 1.8vw, 36px);
  font-weight: 500 !important;
  line-height: 1;
  color: #f3efe5;
  text-decoration: none;
  border-bottom: 2px solid #f3efe5;
  transition: color .3s ease;
  z-index: 1;
  width: max-content;
padding-left: 0;
padding-right: 0;
}

.home-page .idea-link::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #f3efe5;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .35s cubic-bezier(.16, 1, .3, 1);
  z-index: -1;
}

.home-page .idea-link:hover {
  color: #000000;
}

.home-page .site-footer {
  width: 100%;
  min-height: 280px;
  padding: 50px clamp(50px, 6vw, 120px);
  display: grid;
  grid-template-columns: 1fr 1.2fr 1fr;
  align-items: center;
  background: #000000;
  color: #f3efe5;
  border-top: 4px solid #f3efe5;
}


/* SOL */

.home-page .footer-brand {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.home-page .footer-brand-logo {
  width: clamp(170px, 14vw, 280px);
  height: auto;
  display: block;
}


/* ORTA */

.home-page .footer-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.home-page .footer-socials {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
}

.home-page .footer-social {
  width: 58px;
  height: 58px;
  display: block;
  padding: 0;
  background: none;
  border-radius: 0;
  text-decoration: none;
  transition: transform .25s ease;
}

.home-page .footer-social img {
  width: 100%;
  height: 100%;
  display: block;
}

.home-page .footer-social:hover {
  transform: translateY(-6px) scale(1.06);
}


.home-page .footer-info p {
  margin: 2px 0;

  font-family: "apotek", sans-serif;
  font-size: clamp(17px, 1.2vw, 23px);
  font-weight: 400;
  line-height: 1.2;

  color: #f3efe5;
}


/* SAĞ HIZLI MENÜ */

.home-page .footer-menu {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}

.home-page .footer-menu a {
  position: relative;

  font-family: "apotek-comp", "apotek", sans-serif !important;
  font-size: clamp(32px, 2.4vw, 48px);
  font-weight: 900;

  line-height: .95;

  color: #f3efe5;
  text-decoration: none;

  transition:
    color .25s ease,
    transform .25s ease;
}

.home-page .footer-menu a:hover {
  color: var(--red);
  transform: translateX(-10px);
}


/* MOBİL */



.home-page .project-collab-logos {
  position: absolute;
  left: 50%;
  bottom: 6%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  width: 80%;
  z-index: 3;
}

.home-page .project-collab-logos img:first-child {
  width: 190px !important;
  height: auto !important;
}

.home-page .project-collab-logos img:last-child {
  width: 120px !important;
  height: auto !important;
}

.home-page .project-collab-logos span {
  font-family: "apotek-comp", "apotek", sans-serif;
  font-size: 28px;
  line-height: 1;
  color: #f3efe5;
}

.home-page .project-collab-logo-single {
  position: absolute;
  left: 50%;
  bottom: 7%;
  transform: translateX(-50%);
  width: 48%;
  height: auto;
  object-fit: contain;
  z-index: 3;
}

.home-page .project-collab-logo-single {
  transition: none !important;
  transform: translateX(-50%) !important;
}

.home-page .project-card:hover .project-collab-logo-single {
  transform: translateX(-50%) !important;
  transition: none !important;
  filter: none !important;
  opacity: 1 !important;
}

/* Anasayfa: net hizmet tanımı */
.home-page .hero-service-tag {
  width: max-content;
  max-width: 100%;
  margin: 18px 0 0 auto;
  color: var(--cream);
  font-family: "roc-grotesk", Arial, sans-serif;
  font-size: clamp(14px, .95vw, 18px);
  font-weight: 400;
  line-height: 1.35;
  letter-spacing: .015em;
  text-align: right;
}

.home-page .hero-service-break {
  display: none;
}

/* Anasayfa portföy sonu */
.home-page .projects-all-link {
  grid-column: 1 / -1;
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: .38em;
  margin-top: 14px;
  color: var(--cream);
  font-family: "apotek-comp", "apotek", sans-serif;
  font-size: clamp(24px, 1.65vw, 34px);
  font-weight: 900;
  line-height: 1;
  letter-spacing: .02em;
  text-decoration: none;
  text-transform: uppercase;
  transition: color .2s ease, transform .2s ease;
}

.home-page .projects-all-link:hover,
.home-page .projects-all-link:focus-visible {
  color: var(--red);
  transform: translateX(4px);
  outline: none;
}
/* ==========================================================
   ANASAYFA — TİPOGRAFİ SON NORMALİZASYON
   Aynı işlevdeki metinleri aynı aile / ağırlık / punto sistemine toplar.
   Mevcut layout ve animasyonlara dokunmaz.
========================================================== */
.home-page {
  --mego-display: "apotek-comp", "apotek", sans-serif;
  --mego-cond: "apotek-cond", "Apotek Cond", "apotek", sans-serif;
  --mego-body: "roc-grotesk", Arial, sans-serif;
  --mego-gothic: "Pirata One", serif;
}

/* HERO: mevcut kompozisyon korunur; sans kısımlar Medium, gotik kısımlar Pirata. */
.home-page .hero-title-line .apotek-extra,
.home-page .hero-title-line.apotek-extra {
  font-family: var(--mego-display) !important;
  font-weight: 500 !important;
  letter-spacing: .03em !important;
}

.home-page .hero-title-line .display-script,
.home-page .hero-title-line .hero-red {
  font-family: var(--mego-gothic) !important;
  font-weight: 400 !important;
}

/* Bölüm başlığı: kayan müşteri/işbirliği şeridi. */
.home-page .clients > .same-table-title {
  font-family: var(--mego-display) !important;
  font-weight: 500 !important;
  font-size: clamp(52px, 4vw, 78px) !important;
  line-height: .92 !important;
  letter-spacing: .02em !important;
}

/* HAKKIMIZDA + İLETİŞİM ana başlıkları aynı Black sistem. */
.home-page .about-content h2,
.home-page .idea-right h2 {
  font-family: var(--mego-display) !important;
  font-weight: 900 !important;
  font-size: clamp(64px, 4.8vw, 90px) !important;
  line-height: .9 !important;
  letter-spacing: .015em !important;
}

/* Gotik vurgu metinleri. */
.home-page .about-row .display-script,
.home-page .idea-script {
  font-family: var(--mego-gothic) !important;
  font-weight: 400 !important;
}

/* YETER = Black. */
.home-page .idea-yeter {
  font-family: var(--mego-display) !important;
  font-weight: 900 !important;
  letter-spacing: .01em !important;
}

/* Hakkımızda ve iletişim açıklama metinleri aynı gövde fontu + aynı punto. */
.home-page .about-content p,
.home-page .idea-right p {
  font-family: var(--mego-body) !important;
  font-weight: 400 !important;
  font-size: clamp(15px, 1.05vw, 18px) !important;

  line-height: 1.42 !important;
  letter-spacing: 0 !important;
}

/* (Anlatırsan): Apotek regular; açıklama metninden ayrılır ama aile tutarlı kalır. */
.home-page .idea-note {
  font-family: "apotek", sans-serif !important;
  font-weight: 400 !important;
  font-size: clamp(24px, 1.6vw, 32px) !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
}

/* CTA tipografisi: Daha Fazla / Projeyi Anlat aynı sistem. */
.home-page .more-button,
.home-page .idea-link {
  font-family: "apotek-comp", "apotek", sans-serif !important;
  font-weight: 500 !important;
  font-size: clamp(23px, 1.45vw, 28px) !important;
  line-height: 1 !important;
  letter-spacing: .01em !important;
}

/* Hero CTA aynı ailede, biraz daha küçük ölçek. */
.home-page .hero-cta {
  font-family: var(--mego-cond) !important;
  font-weight: 400 !important;
  font-size: clamp(21px, 1.3vw, 27px) !important;
}

/* Footer bilgi metni gövde fontuyla; hızlı menü Black. */
.home-page .footer-info p {
  font-family: var(--mego-body) !important;
  font-weight: 400 !important;
  font-size: clamp(16px, 1vw, 20px) !important;
  line-height: 1.25 !important;
}

.home-page .footer-menu a {
  font-family: var(--mego-display) !important;
  font-weight: 900 !important;
  font-size: clamp(30px, 2.1vw, 42px) !important;
  line-height: .95 !important;
}

/* Menü başlıkları da aynı Black display font. */
.home-page .drawer-nav a {
  font-family: var(--mego-display) !important;
  font-weight: 900 !important;
}



/* PROJEYİ ANLAT = BENİMLE ÇALIŞ BUTONU İLE AYNI SİSTEM */

.home-page .idea-link {
  min-width: 210px !important;
  width: max-content !important;
  height: 58px !important;
  padding: 0 18px !important;
  margin-top: 22px !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  background: var(--cream) !important;
  color: var(--black) !important;

  border: 0 !important;

  font-family: "apotek-comp", "apotek", sans-serif !important;
  font-size: 31px !important;
  font-weight: 500 !important;
  line-height: 1 !important;
}

.home-page .idea-link span {
  color: var(--black) !important;
  position: relative;
  z-index: 2;
}

.home-page .idea-link::before {
  background: var(--red) !important;
  transform: scaleX(0);
  transform-origin: left center;
  z-index: -1;
}

.home-page .idea-link:hover::before {
  transform: scaleX(1);
}

.home-page .idea-link:hover span {
  color: var(--cream) !important;
}

/* ==========================================================
   MEGO — SON KİLİT / BUTON + RENK + FOOTER
   Referans palet: #f1553d / #f3efe5 / #000000
   ========================================================== */

.home-page {
  --mego-orange: #f1553d;
  --mego-cream: #f3efe5;
  --mego-black: #000000;
}

/* Aynı CTA: Benimle Çalış / Daha Fazla / Projeyi Anlat */
.home-page .fill-button.hero-cta,
.home-page .fill-button.more-button,
.home-page .fill-button.idea-link {
  width: 210px !important;
  min-width: 210px !important;
  max-width: 210px !important;
  height: 58px !important;
  padding: 0 18px !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  background: var(--cream) !important;
  color: var(--black) !important;
  border: 0 !important;

  font-family: "apotek-cond", "Apotek Cond", "apotek", sans-serif !important;
  font-weight: 400 !important;
  font-style: normal !important;
  font-size: 27px !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;

  overflow: hidden !important;
  isolation: isolate !important;
  text-decoration: none !important;
}

/* Yerleşimleri birbirine karıştırma */
.home-page .fill-button.hero-cta {
  margin-top: 28px !important;
  margin-left: auto !important;
}

.home-page .fill-button.more-button,
.home-page .fill-button.idea-link {
  margin-top: 0px !important;
  margin-left: 0 !important;
}

/* Üçünde de aynı soldan sağa turuncu dolma */
.home-page .fill-button.hero-cta::before,
.home-page .fill-button.more-button::before,
.home-page .fill-button.idea-link::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: -1 !important;
  background: var(--red) !important;
  transform: scaleX(0) !important;
  transform-origin: left center !important;
  transition: transform .38s cubic-bezier(.16, 1, .3, 1) !important;
}

.home-page .fill-button.hero-cta:hover::before,
.home-page .fill-button.hero-cta:focus-visible::before,
.home-page .fill-button.more-button:hover::before,
.home-page .fill-button.more-button:focus-visible::before,
.home-page .fill-button.idea-link:hover::before,
.home-page .fill-button.idea-link:focus-visible::before {
  transform: scaleX(1) !important;
}

/* Buton metinleri aynı renk davranışı */
.home-page .fill-button.hero-cta span,
.home-page .fill-button.more-button span,
.home-page .fill-button.idea-link span {
  position: relative;
  z-index: 2;
  color: var(--black) !important;
  transition: color .25s ease !important;
}

.home-page .fill-button.hero-cta:hover span,
.home-page .fill-button.hero-cta:focus-visible span,
.home-page .fill-button.more-button:hover span,
.home-page .fill-button.more-button:focus-visible span,
.home-page .fill-button.idea-link:hover span,
.home-page .fill-button.idea-link:focus-visible span {
  color: var(--cream) !important;
}

/* Ok biraz daha tok; metin fontu değişmez */
.home-page .fill-button .cta-arrow {
  margin-left: 10px !important;
  font-family: "apotek-cond", "Apotek Cond", "apotek", sans-serif !important;
  font-weight: 900 !important;
  font-size: 1.12em !important;
  line-height: .8 !important;
}

/* Footer logosunu küçült */
.home-page .footer-brand-logo {
  width: clamp(115px, 9vw, 165px) !important;
  max-width: 165px !important;
  height: auto !important;
}

/* Footer ve ana zemin palet kilidi */
.home-page,
.home-page .hero,
.home-page .site-footer {
  background-color: var(--black) !important;
}

.home-page .site-footer {
  color: var(--cream) !important;
  border-top-color: var(--cream) !important;
}



.home-page .idea-link {
  width: max-content !important;
  min-width: 250px !important;
  white-space: nowrap !important;
}

.home-page .idea-link span {
  white-space: nowrap !important;
}

/* ==========================================================
   FOOTER — SON BOYUT / LINK DÜZENİ
   13.08.2026
========================================================== */

/* Sol heritage logo: çok az büyüt */
.home-page .footer-brand-logo {
  width: clamp(125px, 10vw, 180px) !important;
  max-width: 180px !important;
  height: auto !important;
}

/* Ortadaki sosyal ikonlar: biraz küçült */
.home-page .footer-social {
  width: 52px !important;
  height: 52px !important;
}

.home-page .footer-socials {
  gap: 10px !important;
}

/* Sağ hızlı menü: çok az büyüt */
.home-page .footer-menu a {
  font-size: clamp(32px, 2.25vw, 45px) !important;
}

/* Mobil oranı da koru */

 
/* ==========================================================
   MEGO MENU — FINAL FIX
   X, hamburger ile birebir aynı ölçü / konum / hover mantığı.
   ========================================================== */





.home-page .menu-brand-group .menu-studio-logo {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;

  width: 170px !important;
  max-width: 170px !important;
  height: auto !important;

  /* turuncu wordmark → krem */
  filter:
    brightness(0)
    saturate(100%)
    invert(95%)
    sepia(8%)
    saturate(190%)
    hue-rotate(330deg)
    brightness(104%)
    contrast(94%) !important;
}

.home-page .menu-brand-group .menu-heritage {
  width: 175px !important;
  max-width: 160px !important;
  height: auto !important;
}

.home-page .drawer-nav a {
  font-size: clamp(50px, 4.2vw, 68px) !important;
  line-height: 1 !important;
}

.home-page .drawer-nav {
  gap: 10px !important;
}

.home-page .clients > .same-table-title {
  font-family: "apotek-comp", "apotek", sans-serif !important;
  font-weight: 700 !important;
}

.home-page .clients > .same-table-title {
  transform: translateY(10px);
}

/* ==========================================================
   LOGOLAR SAYFASI — ANASAYFA İLE SENKRON / FINAL
   Header, menü ve footer anasayfanın ortak class'larını kullanır.
   Bu blok yalnızca logolar sayfasındaki konum/çakışmaları kilitler.
========================================================== */

.home-page.logos-page .logos-header.hero {
  position: relative !important;
  width: 100% !important;
  min-height: 135px !important;
  height: 135px !important;
  overflow: visible !important;
  background: var(--black) !important;
}

/* Üst logo ve hamburger: anasayfadaki son ölçüler */
.home-page.logos-page .logos-header > .hero-logo {
  top: clamp(28px, 2.3vw, 47px) !important;
  left: clamp(30px, 4.64vw, 95px) !important;
  width: clamp(145px, 9.1vw, 186px) !important;
}

.home-page.logos-page .logos-header > .menu-button {
  top: clamp(35px, 3.22vw, 66px) !important;
  right: clamp(32px, 4.69vw, 96px) !important;
  width: clamp(32px, 2vw, 42px) !important;
  height: clamp(26px, 1.65vw, 34px) !important;
  padding: 0 !important;
  gap: 0 !important;
}

.home-page.logos-page .logos-header > .menu-button span {
  width: 100% !important;
  height: clamp(5px, .34vw, 7px) !important;
  border-radius: 999px !important;
}

.home-page.logos-page .logos-header > .menu-button:hover {
  background: var(--red) !important;
  box-shadow: 0 0 0 12px var(--red) !important;
  transform: none !important;
}

.home-page.logos-page .logos-header > .menu-button:hover span {
  background: var(--cream) !important;
}

/* Logo portfolyosu aynı kalır */
.home-page.logos-page .logos-main {
  width: 100% !important;
  background: var(--black) !important;
  padding: 45px 30px 80px !important;
  display: flex !important;
  justify-content: center !important;
}

.home-page.logos-page .logos-board {
  width: 100% !important;
  max-width: 1500px !important;
  height: auto !important;
  display: block !important;
}

/* Masaüstü menü: anasayfadaki yarım ekran sistem */


/* Footer: anasayfadaki son düzen — sol bilgi, orta heritage, sağ hızlı menü */
.home-page.logos-page .site-footer {
  width: 100% !important;
  min-height: 280px !important;
  padding: 50px clamp(50px, 6vw, 120px) !important;
  display: grid !important;
  grid-template-columns: 1fr 1fr 1fr !important;
  grid-template-areas: "social brand menu" !important;
  align-items: center !important;
  background: var(--black) !important;
  color: var(--cream) !important;
  border-top: 4px solid var(--cream) !important;
}

.home-page.logos-page .footer-center {
  grid-area: social !important;
  justify-self: start !important;
  align-items: flex-start !important;
  text-align: left !important;
}

.home-page.logos-page .footer-brand {
  grid-area: brand !important;
  justify-self: center !important;
  justify-content: center !important;
}

.home-page.logos-page .footer-brand-logo {
  width: 220px !important;
  max-width: 220px !important;
  height: auto !important;
}

.home-page.logos-page .footer-socials {
  gap: 10px !important;
  margin-bottom: 20px !important;
}

.home-page.logos-page .footer-social {
  width: 52px !important;
  height: 52px !important;
}

.home-page.logos-page .footer-menu {
  grid-area: menu !important;
  justify-self: end !important;
  align-items: flex-end !important;
  gap: 4px !important;
}

.home-page.logos-page .footer-menu a {
  font-family: "apotek-comp", "apotek", sans-serif !important;
  font-weight: 900 !important;
  font-size: clamp(32px, 2.25vw, 45px) !important;
  line-height: .95 !important;
}



/* =========================================
   İLETİŞİM — SOL BLOK FINAL AYAR
========================================= */

.contact-page-intro {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}


/* FİKRİN / Mİ VAR? */
.contact-page-intro h1 {
  width: 100%;
  margin: -20px !important;

  font-family: "Apotek ExtraCond", "apotek", sans-serif !important;
  font-size: 187px !important;
  font-weight: 900 !important;
  line-height: .64 !important;
  letter-spacing: -.02em;

  text-align: right !important;
}

.contact-page-intro h1 span {
  display: block;
  width: 100%;
  text-align: right !important;
}

.contact-page-intro h1 span + span {
  margin-top: 20px !important;
}

/* BİZİM DE OLABİLİR */
.contact-script {
  width: 880px !important;
  max-width: 100% !important;

  margin: 50px 0 0 auto !important;

  font-family: "Pirata One", serif !important;
  font-size: 108px !important;
  font-weight: 400 !important;
  line-height: .82 !important;

  color: #f1553d !important;

  text-align: right !important;
  white-space: nowrap !important;
}


/* ALT METİN */
.contact-page-intro p{
  width: 636px !important;
  max-width: none !important;
  margin: 50px 0 0 auto !important;
  transform: translateX(30px);

  font-family: "apotek", sans-serif !important;
  font-size: 22px !important;
  font-weight: 400 !important;
  line-height: 1.32 !important;

  color: #f3efe5 !important;
  text-align: left !important;
  letter-spacing: 0 !important;
}

.contact-page-intro h1,
.contact-script {
  transform: translateY(35px) !important;
}
/* ==========================================================
   SOUL MONKEY — FINAL CASE STUDY OVERRIDES / 2026-08-15
   Sadece Soul Monkey sayfasını etkiler.
========================================================== */

.soul-page {
  --soul-off-white: #f3efe5;
  --soul-red: #c34424;
  --soul-black: #000000;
  background: var(--soul-black) !important;
  color: var(--soul-off-white) !important;
}

.soul-page .case-study-header,
.soul-page .soul-case {
  background: var(--soul-black) !important;
}

/* Sayfaya özel vurgu rengi */
.soul-page .menu-button span {
  background: var(--soul-red) !important;
}

.soul-page .menu-panel {
  background: var(--soul-red) !important;
}

.soul-page .footer-social:hover,
.soul-page .footer-social:focus-visible,
.soul-page .footer-menu a:hover,
.soul-page .footer-menu a:focus-visible {
  color: var(--soul-red) !important;
}

/* Tipografi: başlık Apotek, metin Roc Grotesk Regular */
.soul-page .soul-manifesto h1,
.soul-page .soul-problem h2,
.soul-page .soul-visual-language h2,
.soul-page .soul-color-card figcaption strong,
.soul-page .soul-case-meta .soul-year {
  font-family: "apotek-comp", "apotek", sans-serif !important;
  font-weight: 900 !important;
  font-style: normal !important;
}

.soul-page .soul-case-meta,
.soul-page .soul-manifesto p,
.soul-page .soul-problem-copy,
.soul-page .soul-color-card figcaption span {
  font-family: "roc-grotesk", Arial, sans-serif !important;
  font-weight: 400 !important;
  font-style: normal !important;
}

/* Manifesto */
.soul-page .soul-manifesto {
  background: transparent !important;
  color: var(--soul-off-white) !important;
}

/* Problem */
.soul-page .soul-problem {
  background: var(--soul-off-white) !important;
  color: var(--soul-black) !important;
}

/* Eskiz + final logo ailesi */
.soul-page .soul-process {
  width: min(calc(100% - 50px), 1450px);
  margin: 0 auto 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
  background: var(--soul-black);
}

/* Görsel dil */
.soul-page .soul-visual-language {
  color: var(--soul-off-white);
}

.soul-page .soul-color-card {
  position: relative;
}

.soul-page .soul-color-card figcaption {
  position: absolute;
  left: 22px;
  bottom: 20px;
  margin: 0 !important;
  display: flex;
  flex-direction: column;
  gap: 4px;
  line-height: 1;
}

.soul-page .soul-color-card figcaption strong {
  font-size: clamp(18px, 1.5vw, 28px);
  text-transform: uppercase;
}

.soul-page .soul-color-card figcaption span {
  font-size: clamp(12px, .85vw, 16px);
  text-transform: lowercase;
}

.soul-page .soul-off-white figcaption,
.soul-page .soul-red figcaption {
  color: var(--soul-black);
}

.soul-page .soul-black figcaption {
  color: var(--soul-off-white);
}

/* Uygulamalar: PDF'deki 3 kolonlu sıra */
.soul-page .soul-case-gallery {
  width: min(calc(100% - 50px), 1450px) !important;
  margin: 0 auto !important;
  display: grid !important;
  grid-template-columns: .72fr 1fr 1fr !important;
  gap: 12px !important;
  align-items: stretch !important;
}

.soul-page .soul-gallery-stack {
  display: grid;
  grid-template-rows: 1fr 1fr;
  gap: 12px;
  min-width: 0;
}

.soul-page .soul-gallery-tall {
  margin: 0;
  min-width: 0;
  overflow: hidden;
}

.soul-page .soul-gallery-stack img,
.soul-page .soul-gallery-tall img {
  width: 100% !important;
  height: 100% !important;
  min-width: 0;
  min-height: 0;
  display: block !important;
  object-fit: cover !important;
}

/* Enerji içeceği yeni yatay üçlü görsel */
.soul-page .soul-energy-showcase {
  width: min(calc(100% - 50px), 1450px);
  margin: 12px auto 0;
  overflow: hidden;
  background: var(--soul-black);
}

.soul-page .soul-energy-showcase img {
  display: block;
  width: 100%;
  height: auto;
}

/* Shared footer ile içerik arasında boşluk bırakma */
.soul-page .site-footer,
.soul-page .footer {
  margin-top: 0 !important;
}

/* ==========================================================
   SOUL MONKEY — PDF MATCH FIX / 2026-08-15
   Final override: reference = soulmonkey.pdf
========================================================== */
.soul-page {
  --soul-off-white: #f3efe5 !important;
  --soul-red: #c34424 !important;
  --soul-black: #000000 !important;
  background: #000000 !important;
  color: var(--soul-off-white) !important;
}

.soul-page .case-study-header,
.soul-page .soul-case,
.soul-page .site-footer {
  background: #000000 !important;
}

/* --- STREET NEVER SLEEPS / PDF oranı --- */
.soul-page .soul-manifesto {
  position: relative !important;
  width: min(calc(100% - 110px), 1450px) !important;
  min-height: 430px !important;
  margin: 100px auto 10px !important;
  padding: 0 !important;
  display: block !important;
  background: transparent !important;
  color: var(--soul-off-white) !important;
  overflow: visible !important;
}

.soul-page .soul-manifesto::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: calc(100% - 165px) !important;
  height: 300px !important;
  background: transparent !important;
  z-index: 1 !important;
}

.soul-page .soul-manifesto-copy {
  position: relative !important;
  z-index: 3 !important;
  width: calc(100% - 370px) !important;
  padding: 88px 0 0 42px !important;
}

.soul-page .soul-manifesto h1 {
  margin: 0 0 14px !important;
  width: auto !important;
  max-width: none !important;
  font-family: "apotek-comp", "apotek", sans-serif !important;
  font-weight: 900 !important;
  font-size: clamp(48px, 4.35vw, 72px) !important;
  line-height: 1.1 !important;
  letter-spacing: 0em !important;
  color: var(--soul-off-white) !important;
  text-transform: uppercase !important;
}

.soul-page .soul-manifesto p {
  width: min(100%, 1200px) !important;
  margin: 0 !important;
  font-family: "roc-grotesk", Arial, sans-serif !important;
  font-weight: 400 !important;
font-size: clamp(15px, 1.05vw, 18px) !important;

  line-height: 1.42 !important;
  color: var(--soul-off-white) !important;
}

.soul-page .soul-manifesto-mascot {

  position: absolute !important;

  z-index: 1 !important;

  width: 100% !important;

  max-width: none !important;

  max-height: none !important;

  height: auto !important;

  right: 1px !important;

  top: -230px !important;

  bottom: auto !important;

  object-fit: contain !important;

  overflow: visible !important;

}

/* --- Logo family --- */
.soul-page .soul-case-identity {
  width: min(calc(100% - 150px), 1160px) !important;
  margin: 0 auto 88px !important;
}

.soul-page .soul-heritage-large {
  margin-bottom: 50px !important;
}

.soul-page .soul-heritage-large img {
  width: min(400px, 42vw) !important;
  max-width: none !important;
}

.soul-page .soul-logo-system {
  grid-template-columns: repeat(3, 1fr) !important;
  gap: clamp(28px, 4vw, 60px) !important;
  align-items: center !important;
}

.soul-page .soul-logo-box {
  min-height: 150px !important;
}

.soul-page .soul-logo-box img {

  max-width: 420px !important;

  max-height: 320px !important;

}

.soul-page .soul-logo-box-board img {
  max-width: 300px !important;
}

.soul-page .soul-horizontal-logo {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  width: 100% !important;
  margin-top: 54px !important;
}

.soul-page .soul-horizontal-logo img {
  display: block !important;
  width: min(900px, 82vw) !important;
  height: auto !important;
}

/* --- STREETWEAR TAKES... / cream panel --- */
.soul-page .soul-problem {
  width: 100% !important;
  background: var(--soul-off-white) !important;
  color: var(--soul-black) !important;
}

.soul-page .soul-problem-inner {
  width: min(calc(100% - 110px), 1450px) !important;
  min-height: 0 !important;
  margin: 0 auto !important;
  padding: 64px 0 62px !important;
  grid-template-columns: minmax(0, .95fr) minmax(360px, .78fr) !important;
  gap: clamp(42px, 6vw, 92px) !important;
  align-items: start !important;
}

.soul-problem h2 {

  margin: 0;

  font-family: "apotek-comp", "apotek", sans-serif !important;

  font-size: clamp(58px, 5.2vw, 98px) !important;

  font-weight: 900 !important;

  line-height: 1.08 !important;

  letter-spacing: 0em !important;

  text-transform: uppercase;

}

.soul-page .soul-problem-copy {
  max-width: 500px !important;
  justify-self: start !important;
  font-family: "roc-grotesk", Arial, sans-serif !important;
  font-size: clamp(15px, 1.05vw, 18px) !important;
  line-height: 1.42 !important;
}

.soul-page .soul-problem-copy p {
  margin: 0 0 20px !important;
}

/* --- Sketch + final family --- */
.soul-page .soul-process {
  width: min(calc(100% - 110px), 1450px) !important;
  margin: 0 auto 0 !important;
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 4px !important;
  background: #000000 !important;
}

.soul-page .soul-process-card {
  margin: 0 !important;
  min-width: 0 !important;
  aspect-ratio: 4 / 3 !important;
  overflow: hidden !important;
  background: var(--soul-off-white) !important;
}

.soul-page .soul-process-card img {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  object-fit: contain !important;
  object-position: center !important;
  background: var(--soul-off-white) !important;
}

/* --- RAW DIRECT / palette --- */
.soul-page .soul-visual-language {
  width: min(calc(100% - 110px), 1450px) !important;
  margin: 0 auto !important;
  padding: 46px 0 12px !important;
  color: var(--soul-off-white) !important;
}

.soul-page .soul-visual-language h2 {
  margin: 0 0 26px !important;
  font-family: "apotek-comp", "apotek", sans-serif !important;
  font-size: clamp(48px, 4.45vw, 76px) !important;
  line-height: .91 !important;
  letter-spacing: -.03em !important;
}

.soul-page .soul-palette {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 14px !important;
}

.soul-page .soul-color-swatch {
  position: relative !important;
  aspect-ratio: 1.08 / 1 !important;
  border: 1px solid rgba(243, 239, 229,.48) !important;
  overflow: hidden !important;
}

.soul-page .soul-red .soul-color-swatch {
  border: 0 !important;
}

.soul-page .soul-off-white .soul-color-swatch { background: var(--soul-off-white) !important; }
.soul-page .soul-red .soul-color-swatch { background: var(--soul-red) !important; }
.soul-page .soul-black .soul-color-swatch { background: var(--soul-black) !important; }

.soul-page .soul-color-card figcaption {
  left: 18px !important;
  bottom: 16px !important;
  gap: 3px !important;
}

.soul-page .soul-color-card figcaption strong {
  font-size: clamp(16px, 1.25vw, 22px) !important;
  color: var(--soul-black) !important;
}

.soul-page .soul-color-card figcaption span {
  font-size: clamp(11px, .72vw, 13px) !important;
  color: var(--soul-black) !important;
}

.soul-page .soul-black figcaption strong,
.soul-page .soul-black figcaption span {
  color: var(--soul-off-white) !important;
}

/* --- Applications closer to palette --- */
.soul-page .soul-case-gallery {
  width: min(calc(100% - 110px), 1450px) !important;
  margin: 10px auto 0 !important;
  grid-template-columns: .72fr 1fr 1fr !important;
  gap: 10px !important;
}

.soul-page .soul-gallery-stack {
  gap: 10px !important;
}

.soul-page .soul-energy-showcase {
  width: min(calc(100% - 110px), 1450px) !important;
  margin: 10px auto 0 !important;
  background: #000000 !important;
}




.soul-page .soul-logo-box-script img {

  width: 100% !important;

  max-width: 520px !important;

  max-height: 360px !important;

  transform: scale(1.28);

  transform: scale(1.05) translateX(-35px) translateY(-6px) !important;

}

.soul-page .soul-case-identity {
  width: min(calc(100% - 110px), 1450px) !important;
  max-width: none !important;
}

.soul-page .soul-logo-box-board {
  justify-content: flex-start !important;
}

.soul-page .soul-logo-box-script {
  justify-content: center !important;
}

.soul-page .soul-logo-box-heritage {
  justify-content: flex-end !important;
}

.soul-page .soul-horizontal-logo {

  width: 100% !important;

  margin-top: -250px !important;

}

.soul-page .soul-horizontal-logo img {

  width: 82% !important;

  max-width: none !important;

  height: auto !important;

}

.soul-page .soul-logo-system {

  width: 100% !important;

  grid-template-columns: 1fr 1fr 1fr !important;

  gap: 0 !important;

  transform: translateY(-300px) !important;

}

/* SOUL MONKEY — TÜM LOGOLARI KÜÇÜLT */

.soul-page .soul-case-identity img {

  transform: scale(0.80) !important;

  transform-origin: center center !important;

}

.soul-page .soul-logo-system .soul-logo-box:nth-child(2) {

  transform: translateX(-45px) !important;

}

/* SOUL MONKEY — ESKİZ + LOGO PANELİNİ AŞAĞI AL */

.soul-page .soul-process {
  padding-top: 3px !important;
}

/* ==========================================================
   HOME ABOUT ALIGNMENT
========================================================== */

.home-page .about-content h2 {
  transform: translateY(0px);
}

.home-page .about-content p {
  margin-top: 10px !important;
}

.home-page .about-content .more-button {
  transform: translateY(10px);
}

/* ==========================================================
   DOGFOLK — CURRENT HTML / PDF REFERENCE
========================================================== */

.dog-page {
  --dog-black: #000000;
  --dog-cream: #f3efe5;
  margin: 0;
  overflow-x: hidden;
  background: var(--dog-black);
  color: var(--dog-cream);
}

.dog-page .dog-main {
  width: 100%;
  background: var(--dog-black);
}

.dog-page .dog-meta {
  width: min(calc(100% - 120px), 1320px);
  margin: 28px auto 42px;
  font-family: "apotek-comp", "apotek", sans-serif;
  font-size: clamp(14px, 1.2vw, 19px);
  font-weight: 900;
  text-transform: uppercase;
}

.dog-page .dog-hero {
  min-height: clamp(420px, 48vw, 690px);
  display: grid;
  place-items: center;
  overflow: visible;
}

.dog-page .dog-hero-logo {
  position: static;
  width: min(48vw, 680px);
  max-width: none;
}

.dog-page .dog-breeds {
  position: relative;
  width: min(calc(100% - 120px), 1320px);
  margin: 0 auto 85px;
  aspect-ratio: 1.82 / 1;
  overflow: hidden;
}

.dog-page .dog-breeds-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.dog-page .dog-breeds-wordmark {
  top: 7%;
  right: 7%;
  width: 15%;
}

.dog-page .dog-logo-system {
  width: min(calc(100% - 180px), 1220px);
  margin: 0 auto 95px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(35px, 5vw, 80px);
  align-items: center;
}

.dog-page .dog-logo-card {
  min-height: 190px;
  display: grid;
  place-items: center;
}

.dog-page .dog-logo-card img {
  width: 78%;
  max-height: 180px;
  object-fit: contain;
}

.dog-page .dog-logo-card-main img,
.dog-page .dog-logo-card-walk img {
  width: 88%;
}

.dog-page .dog-logo-card-circle img {
  width: 62%;
}

.dog-page .dog-intro {
  width: min(calc(100% - 120px), 1320px);
  min-height: 690px;
  margin: 0 auto 90px;
  display: grid;
  grid-template-columns: .92fr 1.38fr;
  gap: 0;
  background: #000000;
}

.dog-page .dog-intro-text {
  position: relative;
  z-index: 2;
  padding: clamp(55px, 6vw, 90px) clamp(38px, 5vw, 76px);
}

.dog-page .dog-intro-text h1 {
  margin: 0 0 25px;
  font-family: "apotek-comp", "apotek", sans-serif;
  font-size: clamp(50px, 4.5vw, 76px);
  line-height: .88;
}

.dog-page .dog-intro-text p {
  max-width: 500px;
  margin: 0 0 24px;
  font-size: clamp(16px, 1.2vw, 20px);
  line-height: 1.48;
}

.dog-page .dog-intro-estd {
  width: 145px;
  margin-top: 35px;
}

.dog-page .dog-intro-photo-wrap {
  min-width: 0;
  overflow: hidden;
}

.dog-page .dog-illustration-strip {
  width: min(calc(100% - 180px), 1220px);
  margin: 0 auto 80px;
}

.dog-page .dog-illustration-strip img {
  width: 100%;
  height: auto;
}

.dog-page .dog-products {
  width: min(calc(100% - 120px), 1320px);
  margin: 0 auto 90px;
}

.dog-page .dog-photo-grid {
  gap: 5px;
}

.dog-page .dog-photo-item {
  aspect-ratio: .72 / 1;
}

.dog-page .dog-product-copy {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(35px, 5vw, 75px);
  padding: 28px 22px 0;
}

.dog-page .dog-product-col {
  align-self: end;
}

.dog-page .dog-product-col h2 {
  margin: 0 0 16px;
  font-family: "apotek-comp", "apotek", sans-serif;
  font-size: clamp(48px, 4vw, 68px);
  line-height: .88;
}

.dog-page .dog-product-col p {
  margin: 0;
  font-size: clamp(16px, 1.15vw, 19px);
  line-height: 1.5;
}

.dog-page .dog-forest-grid {
  width: min(calc(100% - 120px), 1320px);
  margin: 0 auto 8px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px;
}

.dog-page .dog-forest-card-community {
  grid-row: span 2;
}

.dog-page .dog-forest-overlay,
.dog-page .dog-forest-panel-walk,
.dog-page .dog-forest-panel-circle {
  position: absolute;
  z-index: 2;
  object-fit: contain;
}

.dog-page .dog-forest-left-circle {
  top: 6%;
  left: 5%;
  width: 18%;
}

.dog-page .dog-forest-left-walk {
  top: 6%;
  right: 5%;
  width: 24%;
}

.dog-page .dog-forest-brand-panel {
  min-height: 250px;
  background: #000000;
}




.dog-page .dog-meta,
.dog-page .dog-breeds,
.dog-page .dog-logo-system,
.dog-page .dog-intro,
.dog-page .dog-illustration-strip,
.dog-page .dog-products,
.dog-page .dog-forest-grid {
  width: min(calc(100% - 110px), 1450px) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* DOGFOLK ÜST BİLGİ FONTU */

.dog-page .dog-meta,
.dog-page .dog-year {
  font-family: "apotek-cond", "Apotek Cond", "apotek", sans-serif !important;
  font-weight: 600 !important;
  font-style: normal !important;
  text-transform: uppercase !important;
}

.dog-page .dog-meta {
  font-size: 17px !important;
}

.dog-page .dog-year {
  font-size: 32px !important;
}

.dog-page .dog-breeds::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  pointer-events: none;

  background:
    /* Üst ve alt degrade */
    linear-gradient(
      to bottom,
      #000000 0%,
      transparent 20%,
      transparent 82%,
      #000000 100%
    ),

    /* Sol ve sağ degrade */
    linear-gradient(
      to right,
      #000000 0%,
      transparent 12%,
      transparent 88%,
      #000000 100%
    );
}

.dog-page .dog-breeds-wordmark,
.dog-page .dog-breeds-marks {
  z-index: 2;
}

.dog-page .dog-breeds-marks {
  position: absolute !important;
  z-index: 2 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: -40px !important;
  width: 100% !important;
  height: auto !important;
  object-fit: contain !important;
}

/* Dogfolk tanıtım görselini bütün panelin arka planına yay */

.dog-page .dog-intro {
  position: relative !important;
  display: block !important;
}

.dog-page .dog-intro-text {
  position: relative !important;
  z-index: 2 !important;
  width: 40% !important;
}

.dog-page .dog-intro-photo-wrap {
  position: absolute !important;
  z-index: 0 !important;
  inset: 0 !important;
  overflow: hidden !important;
}

.dog-page .dog-intro-photo {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: right center !important;
  transform: none !important;
}

.dog-page .dog-forest-grid {
  margin-top: -50px !important;
}

/* Dogfolk orman görsellerini kırpmadan göster */

.dog-page .dog-forest-card {
  min-height: 0 !important;
  height: auto !important;
}

.dog-page .dog-forest-card > img:first-child {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  object-fit: contain !important;
  object-position: center !important;
}

.dog-page .dog-forest-card {
  position: relative;
  min-height: 0;
  overflow: hidden;
}

.dog-page .dog-forest-card > img:first-child {
  width: 100%;
  height: auto;
  object-fit: contain;
}

.dog-page .dog-forest-panel-walk {
  position: absolute;
  z-index: 2;
  top: 6%;
  right: 6%;
  width: 27%;
}

.dog-page .dog-forest-panel-circle {
  position: absolute;
  z-index: 2;
  right: 7%;
  bottom: 7%;
  width: 21%;
}

.dog-page .dog-forest-panel-circle {
  position: absolute !important;

  left: 80% !important;
  right: auto !important;
  bottom: 10 !important;

  width: 21% !important;
  transform: translateX(-50%) !important;
}

.dog-page .dog-forest-grid {
  margin-bottom: -5px !important;
}

/* ==========================================================
   CIUS LEATHER — CASE STUDY
   PDF 05 / FINAL
========================================================== */


/* ==========================================================
   PAGE
========================================================== */

.cius-page {
  margin: 0;
  background: #000000;
  color: #f3efe5;
  overflow-x: hidden;
}

.cius-page #mainContent {
  width: 100%;
  background: #000000;
  overflow: hidden;
}


/* ==========================================================
   HEADER
========================================================== */

.cius-page .cius-header {
  position: relative;
  width: 100%;
  height: 135px;
  min-height: 135px;
  background: #000000;
}


/* ==========================================================
   META
========================================================== */

.cius-meta {
  width: min(calc(100% - 110px), 1450px);
  margin: 25px auto 45px;

  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  align-items: center;

  font-family: "roc-grotesk", Arial, sans-serif;
  font-size: 17px;
  font-weight: 400;
  line-height: 1;
  text-transform: uppercase;

  color: #f3efe5;
}

.cius-meta span:nth-child(1) {
  text-align: left;
}

.cius-meta .cius-year {
  text-align: center;
}

.cius-meta span:nth-child(3) {
  text-align: right;
}


/* ==========================================================
   HERO
========================================================== */

.cius-hero {
  position: relative;

  width: min(calc(100% - 50px), 1450px);
  height: clamp(460px, 38vw, 610px);
  margin: 0 auto;

  display: grid;
  place-items: center;

  overflow: hidden;
  background: #000000;
}

.cius-hero-bg {
  grid-area: 1 / 1;

  width: 100%;
  height: 100%;

  display: block;
  object-fit: cover;
  object-position: center;
}

.cius-hero-logo {
  grid-area: 1 / 1;

  position: relative;
  z-index: 4;

  width: clamp(210px, 22vw, 350px);
  height: auto;

  display: block;
}

.cius-hero::before,
.cius-hero::after {
  content: "";
  position: absolute;
  z-index: 2;
  left: 0;

  width: 100%;
  height: 35%;

  pointer-events: none;
}

.cius-hero::before {
  top: 0;
  background: linear-gradient(
    to bottom,
    #000000 0%,
    rgba(0, 0, 0, .88) 25%,
    rgba(0, 0, 0, .35) 70%,
    rgba(0, 0, 0, 0) 100%
  );
}

.cius-hero::after {
  bottom: 0;
  background: linear-gradient(
    to top,
    #000000 0%,
    rgba(0, 0, 0, .88) 25%,
    rgba(0, 0, 0, .35) 70%,
    rgba(0, 0, 0, 0) 100%
  );
}


/* ==========================================================
   PREMIUM DANA DERİSİ
========================================================== */

.cius-material {
  width: min(calc(100% - 110px), 1250px);
  margin: 125px auto 100px;

  display: flex;
  flex-direction: column;
  align-items: center;
}

.cius-material-image {
  width: min(100%, 720px);
  height: auto;

  display: block;
  margin: 0 auto 60px;

  object-fit: contain;
}

.cius-material-copy {
  width: min(100%, 950px);
  margin: 0 auto;

  display: flex;
  flex-direction: column;
  gap: 16px;
}

.cius-material-copy p {
  margin: 0;

  font-family: "roc-grotesk", Arial, sans-serif;
  font-size: 17px;
  font-weight: 400;
  line-height: 1.45;

  color: #f3efe5;
}


/* ==========================================================
   LOGO AİLESİ
========================================================== */

.cius-logos {
  width: min(calc(100% - 110px), 1250px);
  margin: 0 auto 110px;

  display: grid;
  grid-template-columns: 1.05fr .9fr .32fr;
  grid-template-rows: 1fr 1fr;

  column-gap: 55px;
  row-gap: 30px;

  align-items: center;
}

.cius-logo-item {
  min-width: 0;

  display: flex;
  align-items: center;
  justify-content: center;
}

.cius-logo-item img {
  width: 100%;
  height: auto;

  display: block;
  object-fit: contain;
}

.cius-logo-heritage {
  grid-column: 1;
  grid-row: 1 / 3;
}

.cius-logo-heritage img {
  width: min(100%, 500px);
}

.cius-logo-wordmark {
  grid-column: 2;
  grid-row: 1;
}

.cius-logo-wordmark img {
  width: min(100%, 430px);
}

.cius-logo-fav {
  grid-column: 3;
  grid-row: 1;
}

.cius-logo-fav img {
  width: min(100%, 150px);
}

.cius-logo-full {
  grid-column: 2 / 4;
  grid-row: 2;
}

.cius-logo-full img {
  width: min(78%, 540px);
}


/* ==========================================================
   STORY / KORAY
========================================================== */

.cius-story {
  position: relative;

  width: min(calc(100% - 50px), 1450px);
  height: clamp(430px, 34vw, 560px);
  margin: 0 auto;

  display: grid;
  grid-template-columns: .8fr 1.2fr;
  align-items: stretch;

  background: #000000;
}

.cius-story-copy {
  min-width: 0;

  padding: 55px 45px 55px 0;

  display: flex;
  flex-direction: column;
  justify-content: center;

  position: relative;
  z-index: 3;

  /* manuel pozisyon için sadece bu satırı değiştir */
  transform: translate(65px, -50px);
}

.cius-story-copy p {
  max-width: 590px;
  margin: 0 0 18px;

  font-family: "roc-grotesk", Arial, sans-serif;
  font-size: 17px;
  font-weight: 400;
  line-height: 1.45;

  color: #f3efe5;
}

.cius-story-image {
  position: relative;

  width: 100%;
  height: 100%;

  min-width: 0;
  min-height: 0;

  overflow: hidden;
}

.cius-story-image img {
  width: 100%;
  height: 100%;

  display: block;

  object-fit: cover;
  object-position: center;
}

.cius-story-image::after {
  content: "";

  position: absolute;
  inset: 0;

  background: linear-gradient(
    90deg,
    #000000 0%,
    rgba(0, 0, 0, .90) 9%,
    rgba(0, 0, 0, .60) 22%,
    rgba(0, 0, 0, .25) 38%,
    rgba(0, 0, 0, 0) 58%
  );

  pointer-events: none;
}


/* ==========================================================
   ÜRÜN DERİ PALETLERİ
========================================================== */

.cius-palettes {
  box-sizing: border-box;

  width: min(calc(100% - 50px), 1450px);
  margin: 16px auto 0;
  padding: 18px 42px 22px;

  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 35px;

  align-items: start;

  background: #f3efe5;
  color: #000000;
}

.cius-palette {
  margin: 0;
  min-width: 0;

  display: flex;
  flex-direction: column;
  align-items: center;

  text-align: center;
}

.cius-palette figcaption {
  margin: 0 0 10px;

  font-family: "roc-grotesk", Arial, sans-serif;
  font-size: 17px;
  font-weight: 400;
  line-height: 1;

  color: #000000;
}

.cius-palette img {
  width: auto;
  max-width: 100%;
  height: 52px;

  display: block;
  object-fit: contain;
}


/* ==========================================================
   KURUMSAL RENK PALETİ
   SOL: RENK BİLGİSİ / SAĞ: DERİ YÜZEYLERİ
========================================================== */

.cius-brand-palette {

  width: min(calc(100% - 50px), 1450px);

  height: 350px;

  margin: 16px auto 0;

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 0;

  overflow: hidden;

  background: #000000;

}

.cius-brand-colors {

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  min-width: 0;

  height: 100%;

}

.cius-brand-color {
  position: relative;

  min-width: 0;
  min-height: 350px;

  padding: 24px 24px 26px;

  display: flex;
  flex-direction: column;
  justify-content: space-between;

  color: #f3efe5;
}

.cius-brand-color-black {
  background: #000000;
}

.cius-brand-color-green {
  background: #1f2a22;
}

.cius-brand-color-cognac {
  background: #a45f32;
}

.cius-brand-color-name {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.cius-brand-color-name span,
.cius-brand-color-name strong,
.cius-brand-color-hex {
  font-family: "roc-grotesk", Arial, sans-serif;
  font-weight: 400;
}

.cius-brand-color-name span {

  font-size: 17px;

  line-height: 1;

}

.cius-brand-color-name strong {

  margin-top: 6px;

  font-size: 17px;

  line-height: 1.1;

}
.cius-brand-color-hex {

  font-size: 17px;

  line-height: 1;

}

.cius-brand-leather {

  min-width: 0;

  height: 100%;

  overflow: hidden;

  background: #1f2a22;

}

.cius-brand-leather img {

  width: 100%;

  height: calc(100% + 4px);

  display: block;

  object-fit: cover;

  object-position: center;

  margin: 0 0 -4px 0;

}


/* ==========================================================
   ROZET / İLLÜSTRATİF LOGO SİSTEMİ
========================================================== */

.cius-badges {
  box-sizing: border-box;

  width: min(calc(100% - 50px), 1450px);
  min-height: 420px;
  margin: 0 auto;
  padding: 70px 70px;

  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: center;
  gap: 70px;

  background: #1f2a22;
}

.cius-badge-item {
  min-width: 0;
  height: 260px;

  display: flex;
  align-items: center;
  justify-content: center;
}

.cius-badge-item img {
  width: 100%;
  max-width: 330px;
  max-height: 250px;
  height: auto;

  display: block;
  object-fit: contain;
}


/* ==========================================================
   GALERİ
========================================================== */

.cius-gallery {
  width: min(calc(100% - 50px), 1450px);
  margin-left: auto;
  margin-right: auto;

  display: grid;
  gap: 16px;

  align-items: stretch;

  background: #000000;
}

.cius-gallery-one {
  grid-template-columns: 1.2fr .8fr;
  height: clamp(500px, 39vw, 650px);
  margin-top: 16px;
}

.cius-gallery-two {
  grid-template-columns: .8fr 1.2fr;
  height: clamp(500px, 39vw, 650px);
  margin-top: 16px;
}

.cius-gallery-large,
.cius-gallery-small {
  width: 100%;
  height: 100%;

  min-width: 0;
  min-height: 0;

  overflow: hidden;
  background: #000000;
}

.cius-gallery img {
  width: 100%;
  height: 100%;

  min-width: 0;
  min-height: 0;

  display: block;

  object-fit: cover;
  object-position: center;
}


/* ==========================================================
   FOOTER MESAFESİ
========================================================== */

.cius-page .site-footer {
  margin-top: 16px;
}


/* ==========================================================
   PANDA APP — CASE STUDY / PDF REFERENCE
   Header / footer / menu untouched.
========================================================== */

.panda-page {
  margin: 0;
  overflow-x: hidden;
  background: #000000;
  color: #f3efe5;
}

.panda-page .case-study-header {
  position: relative !important;
  width: 100% !important;
  height: 135px !important;
  min-height: 135px !important;
  padding: 0 !important;
  overflow: visible !important;
  background: #000000 !important;
}

.panda-case {
  width: 100%;
  overflow: hidden;
  background: #000000;
}

.panda-meta {
  width: min(calc(100% - 110px), 1450px);
  margin: 25px auto 45px;

  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  align-items: center;

  font-family: "roc-grotesk", Arial, sans-serif;
  font-size: 17px;
  font-weight: 400;
  line-height: 1;
  text-transform: uppercase;

  color: #f3efe5;
}

.panda-meta span:first-child {
  text-align: left;
}

.panda-meta span:last-child {
  text-align: right;
}

.panda-meta strong {
  justify-self: center;

  font-family: "apotek-comp", "apotek", sans-serif !important;
  font-size: 32px !important;
  font-weight: 900 !important;
  line-height: 1;
}

.panda-meta span:first-child { justify-self: start; }
.panda-meta span:last-child { justify-self: end; }

.panda-meta strong {
  justify-self: center;
  font-family: "apotek-comp", "apotek", sans-serif;
  font-size: 32px;
  font-weight: 900;
  line-height: 1;
}

.panda-hero-case {
  position: relative;
  width: min(calc(100% - 110px), 1450px);
  height: clamp(430px, 34vw, 545px);
  margin: 0 auto 72px;
  overflow: hidden;
  background: #000000;
}

.panda-hero-photo {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center 48%;
}

.panda-hero-shade {
  position: absolute;
  z-index: 1;
  inset: 0;
  background:
    linear-gradient(
      90deg,
      #000000 0%,
      rgba(0,0,0,.96) 16%,
      rgba(0,0,0,.78) 31%,
      rgba(0,0,0,.34) 49%,
      rgba(0,0,0,.06) 67%,
      rgba(0,0,0,0) 80%
    ),
    linear-gradient(
      to top,
      #000000 0%,
      rgba(0,0,0,.82) 7%,
      rgba(0,0,0,.25) 19%,
      rgba(0,0,0,0) 37%
    );
  pointer-events: none;
}


.panda-hero-logo {
  position: absolute;
  z-index: 3;
  left: 150px;
  top: 50%;

  width: clamp(300px, 30vw, 450px);
  height: auto;

  display: block;
  transform: translateY(-50%);
}

.panda-story {
  width: min(calc(100% - 110px), 1450px);
  margin: 0 auto 72px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(48px, 7vw, 110px);
  align-items: start;
}

.panda-story-copy h1 {
  margin: 0 0 26px;
  font-family: "apotek-comp", "apotek", sans-serif;
  font-size: clamp(50px, 4.5vw, 76px);
  font-weight: 900;
  line-height: .88;
  letter-spacing: -.015em;
  color: #f3efe5;
}

.panda-story-copy p {
  max-width: 590px;
  margin: 0 0 18px;
  font-family: "roc-grotesk", Arial, sans-serif;
  font-size: 17px;
  font-weight: 400;
  line-height: 1.45;
  color: #f3efe5;
}

.panda-story-copy-right {
  padding-top: 8px;
}

.panda-before-after {
  position: relative;

  width: min(calc(100% - 110px), 920px);
  height: clamp(300px, 25vw, 390px);
  margin: 0 auto 22px;

  overflow: hidden;
  background: #000000;
}

.panda-before-after-art {
  width: 100%;
  height: 100%;

  display: block;
  object-fit: contain;

  /* SVG'nin içindeki eski serif ÖNCE / SONRA yazılarını gizler */
  clip-path: inset(0 0 19% 0);
}

.panda-before-after-labels {
  position: absolute;
  z-index: 2;

  left: 0;
  right: 0;
  bottom: 18px;

  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;

  pointer-events: none;
}

.panda-before-after-labels span:first-child {

  transform: translateX(-105px);

}

.panda-before-after-labels span:last-child {

  transform: translateX(105px);

}

.panda-before-after-labels {

  bottom: 50px;

}

.panda-before-after-labels span {
  justify-self: center;

  font-family: "apotek-comp", "apotek", sans-serif;
  font-size: 32px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0;
  text-transform: uppercase;

  color: #f3efe5;
}

.panda-mobile-showcase {
  width: min(calc(100% - 110px), 760px);
  margin: 0 auto 26px;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #000000;
}

.panda-mobile-showcase img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
}

.panda-expressions {
  width: min(calc(100% - 110px), 1250px);
  margin: 0 auto 18px;
  overflow: hidden;
  background: #3b7f40;
}

.panda-expressions img,
.panda-sketch img,
.panda-appstore img {
  width: 100%;
  height: auto;
  display: block;
}

.panda-sketch {
  width: min(calc(100% - 110px), 1250px);
  margin: 0 auto 16px;
  overflow: hidden;
  background: #f3efe5;
}

.panda-products {
  width: min(calc(100% - 110px), 1250px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  align-items: stretch;
}

.panda-products-top {
  height: clamp(420px, 38vw, 620px);
}

.panda-products-bottom {
  height: clamp(420px, 38vw, 620px);
  margin-top: 16px;
}

.panda-products figure {
  min-width: 0;
  min-height: 0;
  margin: 0;
  overflow: hidden;
  background: #000000;
}

.panda-products figure img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
}

.panda-appstore {
  width: min(calc(100% - 110px), 1250px);
  margin: 16px auto 0;
  overflow: hidden;
  background: #000000;
}

.panda-page .site-footer {
  margin-top: 16px;
}





/* İLETİŞİM — SADECE ÇİZGİLERİN SAĞ UCUNU KISALT */
.contact-page .contact-field input:not([type="hidden"]),
.contact-page .contact-field textarea,
.contact-page .budget-dropdown {
  width: calc(100% - 120px) !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 120px !important;
}

.contact-page .contact-submit {

  margin-right: 120px !important;

}

/* Mobil: yalnızca “Biraz Farklı” */
.home-page .hero-title-mobile
> .hero-title-line:last-child
.display-script {
  font-family: "adhesive-nr-eight", serif !important;
  font-weight: 400 !important;
  font-style: normal !important;
  text-transform: none !important;
}

/* İLETİŞİM — yalnızca bütçe açılır listesinin son seçeneğini görünür tut */
@media (min-width: 1101px) {
  .contact-page .budget-option {
    min-height: 42px !important;
    padding: 7px 16px !important;
    font-size: 17px !important;
    line-height: 1.05 !important;
  }
}

/* İLETİŞİM — BÜTÇE DROPDOWN DESKTOP SON GÜVENLİK */
@media (min-width: 1101px) {
  .contact-page .budget-options {
    max-height: 270px !important;
    overflow-y: auto !important;
  }

  .contact-page .budget-option {
    min-height: 42px !important;
    padding: 7px 16px !important;
    font-size: 17px !important;
    line-height: 1.05 !important;
  }
}