/* ============================================================================
   home-v7.css : ana sayfa (v7.1). Bölümler: hero (tam genişlik video) · vitrin
   (bento, 4:3) · kullanım alanları (dizin, 4:3 önizleme) · sipariş (tipografik) ·
   teklif bandı. Yalnız token; sert kodlu renk YOK; iki temada çalışır.
   Yüzey ritmi: video · paper · ivory-soft · paper · band · dark(footer).
   ========================================================================= */

/* ---------- 1 · Hero: tam genişlik video + DOM metni ----------
   Video dekordur (aria-hidden); metin, scrim üstünde Ivory. Yükseklik ilk ekranı
   doldurur ama 860px'te durur; header düz (solid) kalır, hero onun altından başlar.
   Metin sola-alta yaslı (1-7. kolon), ortalanmış hero yok; tek eylem: Teklif Al.
   Scrim: iki katman Organic'in en derin tonundan (--c-scrim), iki temada AYNI
   (zemin her zaman görüntü). Alt katman metin bloğunu, sol katman sol kenarı taşır;
   sağ üst çeyrek açık kalır, sahne okunur. Kontrast poster ve video karelerinde ölçüldü. */
.hero{position:relative;isolation:isolate;display:flex;align-items:flex-end;min-height:100svh;min-height:100dvh;padding-block:calc(var(--hdr-h) + var(--sp-7)) var(--sp-7);overflow:hidden;background:var(--c-scrim);color:var(--c-on-media)}
.hero__media{position:absolute;inset:0;z-index:-1}
.hero__video{width:100%;height:100%;object-fit:cover}
.hero__media::after{content:"";position:absolute;inset:0;pointer-events:none;background:
  linear-gradient(to bottom,
    color-mix(in srgb, var(--c-scrim) 62%, transparent) 0%,
    color-mix(in srgb, var(--c-scrim) 0%, transparent) 24%),
  linear-gradient(to top,
    color-mix(in srgb, var(--c-scrim) 86%, transparent) 0%,
    color-mix(in srgb, var(--c-scrim) 74%, transparent) 30%,
    color-mix(in srgb, var(--c-scrim) 40%, transparent) 56%,
    color-mix(in srgb, var(--c-scrim) 0%, transparent) 82%),
  linear-gradient(to right,
    color-mix(in srgb, var(--c-scrim) 52%, transparent) 0%,
    color-mix(in srgb, var(--c-scrim) 30%, transparent) 38%,
    color-mix(in srgb, var(--c-scrim) 0%, transparent) 68%)}
.hero__inner{position:relative}
.hero__copy{max-width:46rem}
.hero__title{color:var(--c-on-media)}
.hero__title .line{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}
.hero__title .line > span{display:block;animation:hero-rise var(--du-hero) var(--ez-out) both}
.hero__title .line:nth-child(2) > span{animation-delay:var(--stagger)}
.hero__lead{margin-top:var(--sp-4);max-width:34em;color:var(--c-on-media);animation:hero-fade var(--du-hero) var(--ez-out) both;animation-delay:calc(var(--stagger) * 3)}
.hero__actions{display:flex;margin-top:var(--sp-5);animation:hero-fade var(--du-hero) var(--ez-out) both;animation-delay:calc(var(--stagger) * 4)}

/* Görüntü üstü birincil düğme (v7.2): cam pill (.btn--glass, base-v7.css), video üstünde.
   Arkasında gerçek içerik var (oynayan video). Ivory metin cam üstünde >= 4.5:1 (en açık video
   karesinde ölçüldü); ikon dairesi dolu Ivory, ikon koyu Organic. Mıknatıs sarmalayıcıda. */
.hero__cta{min-height:56px;padding-left:var(--sp-5);font-size:var(--t-body)}
.hero__cta .btn__orb{width:44px;height:44px}

@keyframes hero-rise{from{transform:translateY(105%)}to{transform:none}}
@keyframes hero-fade{from{opacity:0;transform:translateY(var(--reveal-y))}to{opacity:1;transform:none}}

@media (max-width:767px){
  .hero{padding-block:var(--sp-6) var(--sp-6)}
  .hero__lead{margin-top:var(--sp-3)}
  .hero__actions{margin-top:var(--sp-4)}
}

/* ---------- 2 · Vitrin: bento 1 + 4 (hepsi 4:3, kırpmasız) ----------
   Hiza (>=768, subgrid): ızgara 5 satır = [küçük foto 1][künye 1][48][küçük foto 2][künye 2].
   Büyük kartın fotoğrafı 1-4. satırları, künyesi 5. satırı kaplar. Fotoğraf kendi 4:3
   oranını korur; bunun için büyük kolon genişliği hesaplanır:
     büyük foto yüksekliği = 2 küçük foto + künye + 48  ->  L = 2S + (künye + 48) / 0.75
     L + 2S + 2g = %100  ->  L = %50 - g + (künye + 48) / 1.5
   Künye yüksekliği sabit (küçük kartta tagline tek satır): 16 + 23 + 4 + 22.5 = 65.5px. */
.featured{padding-top:var(--sp-section-tight)}
.featured__head{max-width:40rem;margin-bottom:var(--sp-6)}
.featured__head h2{margin-top:var(--sp-3)}
.featured__intro{margin-top:var(--sp-3);max-width:46ch}
.bento{--bento-meta:65.5px;display:grid;grid-template-columns:minmax(0, calc(50% - var(--grid-gap) + (var(--bento-meta) + var(--sp-6)) / 1.5)) repeat(2,minmax(0,1fr));column-gap:var(--grid-gap);row-gap:var(--sp-6);align-items:start}
.bento__cell--lead{grid-column:1;grid-row:1 / span 2}
.bento__cell:not(.bento__cell--lead) .pcard__tagline{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pcard--lead .pcard__name{font-size:var(--t-heading-m)}
.pcard--lead .pcard__tagline{font-size:var(--t-body)}
@supports (grid-template-rows:subgrid){
  @media (min-width:768px){
    .bento{grid-template-rows:auto auto var(--sp-6) auto auto;row-gap:0}
    .bento__cell{display:grid;grid-template-rows:subgrid}
    .bento__cell--lead{grid-area:1 / 1 / 6 / 2}
    .bento__cell:nth-child(2){grid-area:1 / 2 / 3 / 3}
    .bento__cell:nth-child(3){grid-area:1 / 3 / 3 / 4}
    .bento__cell:nth-child(4){grid-area:4 / 2 / 6 / 3}
    .bento__cell:nth-child(5){grid-area:4 / 3 / 6 / 4}
    .bento .pcard{display:grid;grid-row:1 / -1;grid-template-rows:subgrid}
    .bento__cell--lead .pcard__media{grid-row:1 / 5;align-self:end}
    .bento__cell--lead .pcard__meta{grid-row:5}
    .bento .pcard__meta{align-content:start}
  }
}
.featured__more{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-3) var(--sp-5);margin-top:var(--sp-7)}

@media (max-width:767px){
  /* Büyük kart tam genişlik, dört küçük kart 2x2 (4:3, kırpmasız). */
  .bento{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:12px;row-gap:var(--sp-5)}
  .bento__cell{grid-column:span 1}
  .bento__cell--lead{grid-column:1 / -1;grid-row:auto}
  .pcard--lead .pcard__name{font-size:var(--t-heading-m)}
  .pcard--lead .pcard__tagline{white-space:normal;font-size:var(--t-body-s)}
  .bento__cell:not(.bento__cell--lead) .pcard__tagline{white-space:normal;text-overflow:clip}
}

/* ---------- 3 · Kullanım alanları: sektör dizini ---------- */
.sectors{background:var(--c-ivory-soft)}
.sectors__head{max-width:40rem;margin-bottom:var(--sp-6)}
.sectors__head p{margin-top:var(--sp-3)}
.sectors__body{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--grid-gap);align-items:start}
.sector-list{grid-column:1 / span 8;border-bottom:var(--hairline-strong)}
.sector-row{border-top:var(--hairline-strong)}
.sector-row__link{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;column-gap:var(--sp-4);min-height:88px;padding:var(--sp-3);border-radius:0;color:inherit;text-decoration:none;transition:background-color var(--du-micro) var(--ez-out)}
.sector-row__thumb{display:none}
.sector-row__name{font-family:var(--f-display);font-weight:var(--w-display);font-size:var(--t-index);line-height:var(--lh-snug);letter-spacing:var(--tr-heading);color:var(--c-ink);text-wrap:balance}
.sector-row__meta{color:var(--c-text-2);text-align:right}
.sector-row__arrow{color:var(--c-text);transition:transform var(--du-hover) var(--ez-out)}
.sector-row__link:hover,.sector-row__link:focus-visible{background:var(--c-stage)}
.sector-row__link:hover .sector-row__arrow,.sector-row__link:focus-visible .sector-row__arrow{transform:translateX(4px)}

/* Önizleme yuvası 4:3 (fotoğrafın doğal oranı): görseller aynı orandan, kırpılmadan
   üst üste durur ve crossfade olur (CSS :has, JS yok). */
.sector-preview{grid-column:9 / -1;position:sticky;top:calc(var(--hdr-h) + var(--sp-5))}
.sector-preview__img{position:absolute;inset:0;opacity:0;transition:opacity var(--du-state) var(--ez-inout)}
.sector-preview__img:first-child{opacity:1}
.sector-preview__captions{position:relative;height:1.5rem;margin-top:var(--sp-2)}
.sector-preview__caption{position:absolute;inset:0;opacity:0;transition:opacity var(--du-state) var(--ez-inout)}
.sector-preview__caption:first-child{opacity:1}
.sectors__body:has(.sector-row:not(:first-child) .sector-row__link:is(:hover,:focus-visible)) .sector-preview__img:first-child,
.sectors__body:has(.sector-row:not(:first-child) .sector-row__link:is(:hover,:focus-visible)) .sector-preview__caption:first-child{opacity:0}
.sectors__body:has(.sector-row:nth-child(2) .sector-row__link:is(:hover,:focus-visible)) :is(.sector-preview__img,.sector-preview__caption):nth-child(2),
.sectors__body:has(.sector-row:nth-child(3) .sector-row__link:is(:hover,:focus-visible)) :is(.sector-preview__img,.sector-preview__caption):nth-child(3),
.sectors__body:has(.sector-row:nth-child(4) .sector-row__link:is(:hover,:focus-visible)) :is(.sector-preview__img,.sector-preview__caption):nth-child(4),
.sectors__body:has(.sector-row:nth-child(5) .sector-row__link:is(:hover,:focus-visible)) :is(.sector-preview__img,.sector-preview__caption):nth-child(5){opacity:1}
.sectors__all{margin-top:var(--sp-5)}

@media (max-width:1023px){
  .sector-list{grid-column:1 / -1}
  .sector-preview{display:none}
  /* Küçük görsel 64x48 (4:3), kırpmasız. */
  .sector-row__link{grid-template-columns:64px minmax(0,1fr) auto;grid-template-areas:"thumb name arrow" "thumb meta arrow";column-gap:var(--sp-3);row-gap:2px;min-height:96px}
  .sector-row__thumb{display:block;grid-area:thumb;width:64px}
  .sector-row__name{grid-area:name;font-size:1.75rem}
  .sector-row__meta{grid-area:meta;text-align:left}
  .sector-row__arrow{grid-area:arrow}
}
@media (max-width:767px){
  .sector-row__name{font-size:1.375rem}
  .sector-row__meta{font-size:var(--t-caption)}
}

/* ---------- 4 · Sipariş (tipografik, görsel YOK) ----------
   Sol 1-5: başlık + metin + "Üretim süreci". Sağ 7-12: siparişte seçilen dört şey,
   terim (Cabinet) + tanım (Switzer) iki kolonlu satırlar; satırlar grup ayracıyla. */
.atelier__grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--grid-gap);row-gap:var(--sp-6);align-items:start}
.atelier__panel{grid-column:1 / span 5}
.atelier__text{margin-top:var(--sp-3);max-width:44ch}
.atelier__panel .tlink{margin-top:var(--sp-4)}
.atelier__list{grid-column:7 / -1;border-bottom:var(--hairline-strong)}
.atelier__item{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:var(--grid-gap);align-items:baseline;padding-block:var(--sp-4);border-top:var(--hairline-strong)}
.atelier__term{font-family:var(--f-display);font-weight:var(--w-display);font-size:var(--t-heading-s);line-height:var(--lh-snug);letter-spacing:-0.01em;color:var(--c-ink)}
.atelier__def{color:var(--c-text-2)}

@media (max-width:1023px){
  .atelier__panel,.atelier__list{grid-column:1 / -1}
}
@media (max-width:767px){
  .atelier__item{grid-template-columns:1fr;row-gap:var(--sp-1);padding-block:var(--sp-3)}
  .atelier__def{font-size:var(--t-body-s)}
}

/* ---------- 5 · Teklif bandı: paylaşılan bileşen, stil base-v7.css (.quote-band) ---------- */


/* ---------- 1b · Header video üstünde (yalnız ana sayfa) ----------
   Header sabit ve şeffaf; hero tam ekran ve header'ın ARKASINDAN başlar, video
   header alanında da oynar. Hero sayfadan çıkınca header paper zeminli olur
   (site-v7.js hero'yu gözler). Şeffafken metin/ikon Ivory (--c-on-media). */
.has-hero .site-header{position:fixed;left:0;right:0;top:0;transition:background-color var(--du-state) var(--ez-out),border-color var(--du-hover) var(--ez-out)}
.has-hero .site-header:not(.is-scrolled){background:transparent;border-bottom-color:transparent;
  --c-ink:var(--c-on-media);--c-text:var(--c-on-media);--c-text-2:var(--c-on-media);
  --c-hair-strong:color-mix(in srgb, var(--c-on-media) 45%, transparent);
  --c-action:var(--c-media-action);--c-on-action:var(--c-on-media-action);--c-focus:var(--c-on-media);
  color:var(--c-on-media)}
@media (max-width:767px){
  .hero{padding-block:calc(var(--hdr-h) + var(--sp-6)) var(--sp-6)}
}