/* ============================================================
   INTERDI — PAGE-SPECIFIC STYLES
   All content wrapped in .container (max-width: 1400px)
   Uses same variables as style.css
============================================================ */

/* ============================================================
   MAJOR-PAGE LAYOUT STANDARD
   ─────────────────────────────────────────────────────────────
   Tüm major sayfalarda (Works, Brands, Services, Culture,
   Contact, Join, In-Lab, In-DNA, In-Words, In-Motion, Brand-DNA,
   Wallpaper) HERO sonrası ilk content section aynı dikey ritmi
   takip eder:

     .page-hero            → min-height 38vh, padding-bottom 3rem
     .page-hero  .container→ padding-bottom 3rem
                            (h1 + tag bloğu burada biter)
     [next .section]       → padding-top 5rem, padding-bottom 5rem
                            background var(--sec-2)
     .page-intro grid      → padding-bottom 5rem,
                            border-bottom 1px solid rgba(255,255,255,.06)

   Bu sayede HERO h1'in alt kenarı ile sonraki section'ın üst
   yazısı arasındaki boşluk = 3rem (hero-bottom) + 5rem (sec-top)
   = 8rem  her sayfada birebir aynı.
   ============================================================ */

/* ---- PAGE HERO (all inner pages — IN-LAB/Wallpaper varyantı altta) ---- */
.page-hero {
  min-height: 38vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-top: 80px;
  position: relative;
  background: var(--bg);
  overflow: hidden;
}
.page-hero .container { padding-bottom: 3rem; }
.page-hero-bg-text {
  position: absolute;
  /* Sağ hiza .container'ın sağ iç kenarına eşit (= hamburger menü ikonunun sağ hizası). */
  right: max(var(--px), calc((100vw - var(--max)) / 2 + var(--px)));
  /* Yazı alttan section dışına taşar → .page-hero overflow:hidden ile alttan kesilir. */
  bottom: -0.32em;
  font-family: var(--sf);
  font-size: clamp(7rem, 17vw, 15rem);
  font-weight: 900;
  text-transform: uppercase;
  color: rgba(255,255,255,.012);
  letter-spacing: 0.5rem;
  pointer-events: none;
  line-height: 1;
  user-select: none;
}
.page-hero-tag {
  font-size: .58rem;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 1.1rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  font-style: normal;
}
.page-hero-tag::before {
  content: '';
  width: 28px; height: 1px;
  background: var(--red);
  flex-shrink: 0;
}
/* TÜM iç sayfa hero başlıkları — Directory ile birebir aynı boyut.
   IN-LAB ve IN-DNA alt sayfaları aşağıda override eder. */
.page-hero h1 {
  font-family: var(--sf);
  font-size: clamp(3.5rem, 9vw, 8rem);
  font-weight: 700;
  text-transform: uppercase;
  color: var(--white);
  letter-spacing: -.015em;
  line-height: 1.05;
  position: relative;
  z-index: 2;
}
.page-hero h1 .red1 { color: var(--red); }

/* ════════════════════════════════════════════════════════════
   MAJOR-PAGE STANDARD — HERO sonrası ilk section ritmi
   Tüm major sayfalarda aynı dikey ritim için ortak değişkenler.
   Override etmek isteyen sayfalar tek değişkeni güncelleyebilir.
   ════════════════════════════════════════════════════════════ */
:root {
  --major-sec-pt: 5rem;   /* HERO sonrası ilk section üst padding */
  --major-sec-pb: 5rem;   /* aynı section alt padding */
  --major-intro-pb: 5rem; /* iki sütunlu intro grid'in alt padding'i (border-bottom için) */
  --major-intro-mb: 3.5rem;/* mobile intro padding-bottom */
}

/* Standart kural: major sayfalarda HERO'dan hemen sonra gelen
   bölümler bu sınıfı taşır → birebir aynı boşluk + arka plan. */
.major-section {
  padding: var(--major-sec-pt) 0 var(--major-sec-pb);
  background: var(--sec-2);
}

/* İki sütun intro grid: HERO altındaki "tag + başlık + açıklama"
   bloğu — works-platform-intro / bi-header / cm-inner / services-intro-row
   davranışını birleştirir. */
.major-intro-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: end;
  padding-bottom: var(--major-intro-pb);
}
@media (max-width: 768px) {
  .major-intro-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
    padding-bottom: var(--major-intro-mb);
  }
}

/* Alttaki section (grid/akkordeon/list) major-section ile aynı
   arka planı sürdürür ve üstte boşluk almaz — intro grid'in
   border-bottom'ı görsel ayraç görevi görür. */
.major-section--continued {
  background: var(--sec-2);
  padding: 0 0 var(--major-sec-pb);
}

/* IN-LAB hero — kendi büyük tasarımını korur (in-lab.html, wallpaper.html) */
.page-hero--lab {
  min-height: 55vh;
}
.page-hero--lab .container { padding-bottom: 5rem; }
.page-hero--lab .page-hero-bg-text {
  font-size: clamp(8rem, 20vw, 18rem);
}
.page-hero--lab .page-hero-tag {
  font-size: .65rem;
  margin-bottom: 1.5rem;
}
.page-hero--lab h1 {
  font-size: clamp(3.5rem, 9vw, 7.5rem);
}

/* IN-DNA alt sayfaları — daha kompakt başlık (in-dna, brand-dna, in-words) */
.page-hero--dna h1 {
  font-size: clamp(2.6rem, 6vw, 5rem);
  letter-spacing: -.03em;
  line-height: 1.1;
}

/* ---- BRANDS PAGE ----
   Header block now mirrors Our Works' .works-platform-intro:
   two-column, bottom-aligned, with a hairline divider underneath.
   No more number stats on the right.                              */
/* Standart: HERO sonrası ilk section → 5rem 0 5rem, var(--sec-2)
   Intro grid → 5rem padding-bottom (border-bottom kullanıcı tarafından
   kaldırıldı, ritim aynı kalsın diye padding korunur).        */
.brands-intro-section {
  background: var(--sec-2);
  padding: var(--major-sec-pt, 5rem) 0 var(--major-sec-pb, 5rem);
}

.bi-header {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: end;
  padding-bottom: var(--major-intro-pb, 5rem);
}
.bi-header__left {}
.bi-header__tag {
  display: block;
  font-family: var(--pp);
  font-size: .56rem;
  letter-spacing: .35em;
  /* text-transform:uppercase KALDIRILDI → TR locale i→İ bug. Metin kaynakta büyük. */
  color: var(--red);
  font-weight: 500;
  margin-bottom: .55rem;
}
.bi-header__title {
  font-family: var(--sf);
  font-size: clamp(2rem, 4vw, 3.8rem);
  font-weight: 700;
  /* text-transform:uppercase KALDIRILDI → TR locale i→İ bug. Metin kaynakta büyük. */
  letter-spacing: -.03em;
  line-height: 1;
  color: var(--white);
}
.bi-header__right {}
.bi-header__body {
  font-family: var(--pp);
  font-size: .78rem;
  font-weight: 300;
  color: rgba(255,255,255,.38);
  line-height: 1.85;
  margin: 0;
}
.bi-header__body strong { color: rgba(255,255,255,.65); font-weight: 400; }

@media(max-width: 768px) {
  .bi-header {
    grid-template-columns: 1fr;
    gap: 2rem;
    padding-bottom: var(--major-intro-mb, 3.5rem);
  }
}

.brands-page-grid-section { background: var(--sec-2); padding: 5rem 0; }

.brands-page-grid {
  display: grid; grid-template-columns: repeat(4,1fr); gap: .6rem;
  max-width: var(--max); margin: 0 auto; padding: 0 var(--px);
}

/* Brand kartlar reveal animasyonundan bağımsız — her zaman görünür */
.brands-page-grid .brand-card.reveal {
  opacity: 1 !important;
  transform: none !important;
}

.brand-card {
  border: 1px solid var(--line); margin: 0;
  aspect-ratio: 1 / 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  position: relative; overflow: hidden;
  /* no cursor pointer & no hover transitions — cards are static */
}
/* red fill background removed */
.brand-card::before { display: none; }

.brand-card img {
  filter: brightness(0) invert(1); opacity: .55;
  height: 124px; width: auto; max-width: 100%; object-fit: contain;
  position: relative; z-index: 1;
}
/* no hover scaling/opacity change on the logos */
.brand-card-name { display: none; }
.brand-text-ph {
  font-family: var(--sf); font-size: clamp(1rem,1.8vw,1.6rem); font-weight: 700;
  text-transform: uppercase; color: rgba(255,255,255,.35);
  position: relative; z-index: 1; letter-spacing: .05em;
  text-align: center; padding: 0 1rem;
}
/* no hover color change on placeholder text */

/* CTA card — kırmızı background + VIEW MORE pattern (eyebrow + 2 satır + line/arrow) */
.brand-card--cta {
  background: var(--red);
  border: 1px solid var(--red);
  text-decoration: none;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0;
  padding: 1.4rem 1.4rem 1.2rem;
  transition: border-color .3s;
  overflow: hidden;
  isolation: isolate;
  position: relative;
}
/* default ::before reveal wipe disabled, custom dark-red wash instead */
.brand-card--cta::before {
  content: "";
  display: block;
  position: absolute;
  inset: 0;
  background: #c41a2e;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .55s cubic-bezier(.77,0,.175,1);
  z-index: -1;
  pointer-events: none;
  opacity: 1;
}
.brand-card--cta:hover {
  border-color: #c41a2e;
}
.brand-card--cta:hover::before {
  transform: scaleX(1);
}

/* eyebrow */
.brand-card--cta .cta-eyebrow {
  font-family: var(--pp);
  font-size: .45rem;
  letter-spacing: .3em;
  /* text-transform:uppercase KALDIRILDI → TR locale i→İ bug. Metin kaynakta büyük. */
  color: rgba(255,255,255,.75);
  display: block;
  position: relative; z-index: 1;
}

/* main — two-word stack */
.brand-card--cta .cta-main {
  display: flex;
  flex-direction: column;
  line-height: 1.05;
  gap: 0;
  position: relative; z-index: 1;
}
.brand-card--cta .cta-word {
  font-family: var(--sf);
  font-size: clamp(1.6rem, 2.8vw, 2.6rem);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -.02em;
  color: var(--white);
  display: block;
  transition: color .35s ease;
}

/* foot — line + arrow */
.brand-card--cta .cta-foot {
  display: flex;
  align-items: center;
  gap: .6rem;
  width: 100%;
  position: relative; z-index: 1;
}
.brand-card--cta .cta-line {
  flex: 1;
  height: 1px;
  background: rgba(255,255,255,.55);
  transform-origin: left;
  transform: scaleX(0.35);
  transition: transform .5s cubic-bezier(.77,0,.175,1), background-color .35s ease;
}
.brand-card--cta:hover .cta-line {
  transform: scaleX(1);
  background: var(--white);
}
.brand-card--cta .cta-foot i {
  font-size: .75rem;
  color: rgba(255,255,255,.9);
  flex-shrink: 0;
  transition: transform .45s cubic-bezier(.22,1,.36,1);
}
.brand-card--cta:hover .cta-foot i {
  transform: translateX(6px);
}

/* ---- SERVICES PAGE ---- */
.services-accordion-section { padding: 5rem 0; background: var(--bg2); }
.service-accordion-item { border-bottom: 1px solid var(--line); overflow: hidden; }
.service-accordion-header {
  display: flex; justify-content: space-between; align-items: flex-end;
  padding: 2.8rem 0 2.5rem; cursor: pointer; transition: color .3s;
  gap: 2rem;
}
.service-accordion-header:hover { color: var(--red); }
.service-accordion-title {
  font-family: var(--sf);
  font-size: clamp(3.2rem, 7vw, 6rem);
  font-weight: 700; /* text-transform:uppercase KALDIRILDI → TR locale i→İ bug. Metin kaynakta büyük. */
  letter-spacing: -.025em;
  line-height: 1.05;
  display: flex; flex-direction: column; align-items: flex-start;
  gap: .9rem;
}
/* Number sits ABOVE the title — keeps its original small size */
.sa-num {
  font-family: var(--pp);
  font-size: .75rem;
  color: var(--gray);
  font-weight: 300;
  letter-spacing: .3em;
  /* text-transform:uppercase KALDIRILDI → TR locale i→İ bug. */
}
.sa-toggle {
  width: 48px; height: 48px;
  border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; transition: background .3s, border-color .3s;
  position: relative;
}
.sa-toggle::before, .sa-toggle::after {
  content: ''; position: absolute;
  background: var(--gray);
  transition: transform .4s ease, opacity .4s, background .3s;
}
.sa-toggle::before { width: 16px; height: 1px; }
.sa-toggle::after  { width: 1px;  height: 16px; }
.service-accordion-item.open .sa-toggle::after { transform: rotate(90deg); opacity: 0; }
.service-accordion-item.open .sa-toggle { background: var(--red); border-color: var(--red); }
.service-accordion-item.open .sa-toggle::before,
.service-accordion-item.open .sa-toggle::after { background: var(--white); }
.service-accordion-body {
  max-height: 0; overflow: hidden;
  transition: max-height .6s cubic-bezier(.77,0,.175,1);
}
.service-accordion-item.open .service-accordion-body { max-height: 600px; }
.service-accordion-content {
  display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; padding-bottom: 3rem;
}
.service-accordion-content p { font-size: .85rem; color: var(--gray); line-height: 1.9; }
.service-features { list-style: none; }
.service-features li {
  font-size: .8rem; color: var(--gray);
  padding: .6rem 0; border-bottom: 1px solid var(--line);
  display: flex; align-items: center; gap: .8rem;
}
.service-features li::before {
  content: ''; width: 4px; height: 4px;
  background: var(--red); border-radius: 50%; flex-shrink: 0;
}

/* ---- CULTURE PAGE ---- */
.culture-quote-section { padding: 8rem 0; background: var(--bg2); }
.culture-quote { max-width: 900px; }
.culture-quote blockquote {
  font-family: var(--sf);
  font-size: clamp(2.5rem,6vw,5rem);
  font-weight: 700; text-transform: uppercase;
  line-height: 1.1; letter-spacing: -.02em; color: var(--white);
}
.culture-quote blockquote .red1 { color: var(--red); }
.culture-quote cite {
  display: block; font-style: normal;
  font-size: .7rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--gray); margin-top: 2rem;
}
.culture-values-section { padding: 8rem 0; background: var(--bg3); }
.culture-values-grid {
  display: grid; grid-template-columns: repeat(3,1fr); gap: 2px; margin-top: 4rem;
}
.culture-value-item { background: var(--bg2); padding: 3.5rem 3rem; position: relative; overflow: hidden; }
.culture-value-item::after {
  content: ''; position: absolute; top: 0; left: 0;
  width: 100%; height: 3px; background: var(--red);
  transform: scaleX(0); transform-origin: left; transition: transform .4s ease;
}
.culture-value-item:hover::after { transform: scaleX(1); }
.cv-num { font-family: var(--sf); font-size: .7rem; letter-spacing: .2em; color: var(--red); margin-bottom: 2rem; }
.culture-value-item h3 {
  font-family: var(--sf); font-size: 2rem; font-weight: 700;
  text-transform: uppercase; color: var(--white); margin-bottom: 1.5rem; line-height: 1;
}
.culture-value-item p { font-size: .82rem; color: var(--gray); line-height: 1.9; }
.culture-team-section { padding: 8rem 0; background: var(--bg2); }
.culture-team-quote {
  display: grid; grid-template-columns: 1fr 1fr; gap: 6rem; align-items: center;
}
.culture-team-quote h2 {
  font-family: var(--sf);
  font-size: clamp(3rem,7vw,6rem);
  font-weight: 700; text-transform: uppercase; color: var(--white);
  line-height: 1.05; letter-spacing: -.03em;
}
.culture-team-quote p { font-size: .85rem; color: var(--gray); line-height: 1.9; }

/* ---- CONTACT PAGE ---- */
.contact-hero {
  min-height: 50vh; padding-top: 80px;
  background: var(--bg);
  display: flex; align-items: flex-end;
  position: relative; overflow: hidden;
}
.contact-hero .container { padding-bottom: 5rem; }
.contact-hero::after {
  content: ''; position: absolute; bottom: 0; left: 0;
  width: 100%; height: 1px;
  background: linear-gradient(to right, var(--red), transparent);
}
.contact-main-section { padding: 6rem 0; background: var(--bg2); }
.contact-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 6rem; }
.contact-info h2 {
  font-family: var(--sf);
  font-size: clamp(2rem,4vw,3.5rem);
  font-weight: 700; text-transform: uppercase; color: var(--white);
  line-height: 1.1; margin-bottom: 3rem;
}
.contact-detail { margin-bottom: 2.5rem; padding-bottom: 2.5rem; border-bottom: 1px solid var(--line); }
.contact-detail:last-child { border-bottom: none; }
.contact-detail-label {
  font-size: .62rem; letter-spacing: .25em; text-transform: uppercase;
  color: var(--red); margin-bottom: .8rem;
}
.contact-detail-value {
  font-family: var(--sf); font-size: 1.4rem; font-weight: 700;
  text-transform: uppercase; color: var(--white); letter-spacing: .02em;
}
.contact-detail-value a { transition: color .3s; }
.contact-detail-value a:hover { color: var(--red); }
.form-group { margin-bottom: 1.5rem; position: relative; }
.form-label {
  display: block; font-size: .62rem; letter-spacing: .25em;
  text-transform: uppercase; color: var(--gray); margin-bottom: .8rem;
}
.form-input, .form-textarea, .form-select {
  width: 100%; background: transparent;
  border: none; border-bottom: 1px solid var(--line);
  color: var(--white); font-family: var(--pp); font-size: .95rem;
  padding: 1rem 0; outline: none; transition: border-color .3s;
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
}
.form-select {
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23666' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 0 center; padding-right: 1.5rem;
}
.form-select option { background: var(--bg2); color: var(--white); }
.form-input:focus, .form-textarea:focus, .form-select:focus { border-color: var(--red); }
.form-textarea { resize: none; min-height: 120px; }
.form-input::placeholder, .form-textarea::placeholder { color: var(--dim); }
.interest-chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .5rem; }
.interest-chip-label {
  font-size: .62rem; letter-spacing: .15em; text-transform: uppercase;
  color: var(--gray); border: 1px solid var(--line);
  padding: .5rem 1rem; cursor: pointer; transition: all .3s;
}
.interest-chip-input { display: none; }
.interest-chip-input:checked + .interest-chip-label {
  color: var(--white); border-color: var(--red);
  background: rgba(233,32,56,.1);
}
.form-submit-btn {
  background: var(--red); color: var(--white); border: none;
  padding: 1.2rem 3rem; font-family: var(--pp);
  font-size: .72rem; letter-spacing: .2em; text-transform: uppercase;
  cursor: pointer; transition: opacity .3s, transform .3s;
  width: 100%; margin-top: 1rem;
}
.form-submit-btn:hover { opacity: .85; }
.form-success {
  background: var(--red); color: var(--white);
  padding: 1rem 1.5rem; font-size: .8rem; letter-spacing: .1em;
  text-transform: uppercase; margin-top: 1rem;
  opacity: 0; transform: translateY(10px);
  transition: opacity .4s, transform .4s;
  display: flex; align-items: center; gap: .8rem;
}
.form-success.show { opacity: 1; transform: translateY(0); }

/* ---- RESPONSIVE (pages) ---- */
@media (max-width: 1024px) {
  .brands-page-grid { grid-template-columns: repeat(3,1fr); }
  .bi-header { grid-template-columns: 1fr; gap: 3rem; }
  .culture-values-grid { grid-template-columns: repeat(2,1fr); }
  .culture-team-quote { grid-template-columns: 1fr; }
  .contact-layout { grid-template-columns: 1fr; gap: 4rem; }
  .service-accordion-content { grid-template-columns: 1fr; gap: 2rem; }
  .bi-pillars { grid-template-columns: 1fr; }
  .bi-pillar { border-right: none; border-bottom: 1px solid var(--line); padding: 2rem 0; }
  .bi-pillar:last-child { padding-left: 0; border-bottom: none; }
  .bi-pillar:nth-child(2) { padding-left: 0; }
}
@media (max-width: 768px) {
  .works-masonry { grid-template-columns: 1fr; }
  .works-masonry-item.w-full { grid-column: span 1; }
  .brands-page-grid { grid-template-columns: repeat(2,1fr); padding: 0 var(--px); }
  .bi-header__stats { gap: 2rem; }
  .culture-values-grid { grid-template-columns: 1fr; }
  .bi-top { flex-direction: column; align-items: flex-start; gap: 2rem; }
  .bi-big-stat { align-items: flex-start; }
}
@media (max-width: 480px) {
  .brands-page-grid { grid-template-columns: repeat(2,1fr); }
}



/* (suggest.js & .sugg-pop removed — dead code cleanup, 2026-04-28) */