/* ==========================================================================
   Marka Vitrini (mv) — anasayfa marka bantları + pazaryeri anlatısı + PDP modal.
   Tema ui.css/home.css'in üstüne biner; sadece bu bileşenlere özgü stiller.
   Ortak sınıflar (.hero/.spotlight/.sp-inner/.sp-meta/.card/.grid/.wrap/.btn)
   temadan gelir. Şeffaf-header + scroll davranışı home.css'te zaten var.
   ========================================================================== */

/* --- MARKA BANDI = .spotlight immersive dili (tam-kadraj marka fotoğrafı) --- */
.brandspot{min-height:76vh; color:#F2ECEE; margin-top:74px}
.brandspot .sp-copy{max-width:540px}
.brandspot .sp-copy .k{color:var(--acc); letter-spacing:.24em}
.brandspot .sp-copy .k::before{background:var(--acc)}
.brandspot .sp-copy h2{font-family:var(--serif); font-weight:300; font-size:clamp(48px,6.4vw,104px); line-height:.92; letter-spacing:-.02em; color:#F7F2F3}
.brandspot .sp-copy .tag{margin:20px 0 4px; font-size:16px; line-height:1.6; color:rgba(248,248,249,.82); max-width:420px; font-weight:300}
.brandspot .btn-solid{background:var(--acc); color:#15100f; border-color:var(--acc)}
.brandspot .btn-solid:hover{filter:brightness(1.08); transform:translateY(-2px)}
.brandspot .sp-meta .n{color:#F7F2F3}
.brandspot .sp-meta{border-top-color:rgba(248,248,249,.24)}
.brandgrid{padding:46px 0 10px}
/* Pivotto'ya özel 3+5: üstte 3 geniş makam, altta 5 koltuk (5x5 dengesi) */
@media(min-width:1001px){
  .brandgrid--split .grid{grid-template-columns:repeat(15,1fr)}
  .brandgrid--split .grid > *:nth-child(-n+3){grid-column:span 5}
  .brandgrid--split .grid > *:nth-child(n+4){grid-column:span 3}
}

/* ---- GİRİŞ BAŞLIĞI (header'ın hemen altı) ---- */
.mkt-intro{padding:clamp(30px,4.5vh,60px) 0 clamp(20px,3vh,34px); text-align:center}
.mkt-intro .mi-kick{color:var(--ink-45); margin-bottom:16px}
.mi-h{font-family:var(--serif); font-weight:300; font-size:clamp(38px,5.4vw,78px); line-height:.98; letter-spacing:-.02em}
.mi-h em{font-style:italic; color:#6E7683}
.mi-p{margin:18px auto 0; max-width:620px; font-size:16.5px; line-height:1.65; color:var(--ink-70); font-weight:300}

/* ---- GİRİŞ HERO: 5 tekil ürün slaytı (yazı slaytın İÇİNDE; her slayt farklı kurguda) ---- */
.phero{position:relative; max-width:1660px; margin:0 auto; padding:clamp(16px,2.4vh,30px) clamp(18px,3vw,40px) clamp(16px,2.2vh,28px)}
.ph-stage{position:relative; height:clamp(460px,62vh,700px); border-radius:26px; overflow:hidden; border:1px solid var(--line);
  background:var(--paper-deep); box-shadow:0 34px 80px -46px rgba(34,22,25,.45)}
/* geçiş: yeni slayt eskisinin ÜSTÜNDE açılır; eski, yenisi tam görünür olana kadar opak kalır
   (ikisi aynı anda yarı saydam olursa hayalet/çift görüntü oluyordu) */
.pslide{position:absolute; inset:0; opacity:0; visibility:hidden; z-index:0; pointer-events:none;
  transition:opacity 0s linear .85s, visibility 0s linear .85s}
.pslide.is-active{opacity:1; visibility:visible; z-index:2; pointer-events:auto;
  transition:opacity .85s ease, visibility 0s linear}
.ps-bg{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:var(--pos,center); display:block;
  transform:scale(1.02); transition:transform 9s ease-out}
.pslide.is-active .ps-bg{transform:scale(1.07)}
/* Ettero (y-bl): gorsel 1254x696 cover'da dikeyde birebir oturur, object-position etkisiz;
   alttan sabitlenmis zoom ile masa yukari alinir */
.t-sahne.y-bl .ps-bg{transform:scale(1.12); transform-origin:50% 92%}
.t-sahne.y-bl.is-active .ps-bg{transform:scale(1.16)}

/* SAHNE slaytı: tam kadraj fotoğraf + okunabilirlik perdesi (yazı açık renk) */
.t-sahne::after{content:""; position:absolute; inset:0; z-index:1}
.t-sahne.y-bl::after,
.t-sahne.y-cl::after{background:linear-gradient(90deg, rgba(16,10,12,.84) 0%, rgba(16,10,12,.62) 34%, rgba(16,10,12,.14) 68%, rgba(16,10,12,0) 100%)}
.t-sahne.y-orta::after{background:radial-gradient(125% 95% at 50% 50%, rgba(16,10,12,.7) 0%, rgba(16,10,12,.56) 46%, rgba(16,10,12,.4) 100%)}
/* sağ-hizalı sahne (parlak iç mekân → sağ tarafa perde, beyaz yazı okunur) */
.t-sahne.y-sag::after{background:linear-gradient(270deg, rgba(16,10,12,.86) 0%, rgba(16,10,12,.66) 30%, rgba(16,10,12,.30) 58%, rgba(16,10,12,0) 100%)}

/* RENDER slaytı: ürün kırpılmaz, açık tuval üzerinde durur (yazı koyu renk).
   Ürün görselinin zemini şeffaf; tuvalin marka renkli ışıması ürünün arkasından geçer. */
.t-render.y-sol{background:
  radial-gradient(130% 118% at 86% 6%, rgba(var(--acc-rgb),.13), transparent 50%),
  linear-gradient(103deg,#F1EAE2 0%,#F6F1EA 34%,#FCFAF7 62%,#FFFFFF 100%)}
.t-render.y-sag{background:
  radial-gradient(130% 118% at 14% 6%, rgba(var(--acc-rgb),.13), transparent 50%),
  linear-gradient(257deg,#F1EAE2 0%,#F6F1EA 34%,#FCFAF7 62%,#FFFFFF 100%)}
/* marka renginde ana ışıma (yazı tarafı, daha belirgin) + alttan yumuşak zemin vinyeti (ürün float etmesin) */
.t-render::before{content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(56% 68% at var(--glowx,22%) 40%, rgba(var(--acc-rgb),.30) 0%, rgba(var(--acc-rgb),.10) 46%, rgba(var(--acc-rgb),0) 76%),
    radial-gradient(140% 62% at 50% 126%, rgba(34,22,25,.12), transparent 60%)}
.t-render.y-sag::before{--glowx:78%}
/* ürüne yumuşak düşen gölge → tuvale oturur, düz-yapıştırılmış durmaz */
.t-render .ps-bg{object-fit:contain; padding:clamp(6px,1.2vw,22px); transform:none; z-index:1;
  filter:drop-shadow(0 24px 32px rgba(34,22,25,.17))}
.t-render.is-active .ps-bg{transform:none}
.t-render.y-sol .ps-bg{object-position:right center}
.t-render.y-sag .ps-bg{object-position:left center}
/* yazı bloğu — konum her slaytta farklı */
.ps-inner{position:absolute; z-index:2; display:flex; flex-direction:column; align-items:flex-start; max-width:min(560px,54%)}
.y-bl .ps-inner{left:clamp(24px,4vw,64px); bottom:clamp(28px,4.5vh,58px)}
.y-cl .ps-inner,
.y-sol .ps-inner{left:clamp(24px,4vw,64px); top:50%; transform:translateY(-50%)}
.y-sag .ps-inner{right:clamp(24px,4vw,64px); top:50%; transform:translateY(-50%); align-items:flex-end; text-align:right}
.y-orta .ps-inner{left:50%; top:50%; transform:translate(-50%,-50%); align-items:center; text-align:center; max-width:min(720px,84%)}
.ps-brand{display:flex; align-items:center; gap:12px; font-size:11px; font-weight:600; letter-spacing:.26em; text-transform:uppercase}
.ps-brand::before{content:""; width:30px; height:2px; background:var(--acc); border-radius:2px}
.y-sag .ps-brand{flex-direction:row-reverse}
.y-orta .ps-brand::before{display:none}
.ps-name{font-family:var(--serif); font-weight:300; font-size:clamp(40px,5.4vw,88px); line-height:.94; letter-spacing:-.02em; margin:14px 0 0}
.ps-tag{margin:14px 0 0; max-width:440px; font-size:16px; line-height:1.6; font-weight:300}
.y-orta .ps-tag{max-width:520px}
.ps-price{position:relative; margin:22px 0 0; padding-top:18px; font-family:var(--serif); font-size:25px}
.ps-price::before{content:""; position:absolute; top:0; left:0; width:46px; height:2px; background:var(--acc); border-radius:2px}
.y-sag .ps-price::before{left:auto; right:0}
.y-orta .ps-price::before{left:50%; transform:translateX(-50%)}
.ps-price span{font-family:var(--sans); font-size:12px; letter-spacing:.04em; margin-left:8px; opacity:.72}
.ps-cta{margin-top:24px}
/* sahne = açık yazı + beyaz buton | render = koyu tuval olduğu için o da açık yazı + beyaz buton */
.t-sahne .ps-brand{color:rgba(247,242,243,.92)}
.t-sahne .ps-name{color:#F9F5F6}
.t-sahne .ps-tag{color:rgba(248,248,249,.9)}
.t-sahne .ps-price{color:#fff}
.t-sahne .ps-cta{background:#fff; color:#17100f; border-color:#fff}
.t-sahne .ps-cta:hover{background:rgba(255,255,255,.85); transform:translateY(-2px)}
.t-render .ps-brand{color:rgba(34,22,25,.5)}
.t-render .ps-name{color:#221619}
.t-render .ps-tag{color:rgba(34,22,25,.72)}
.t-render .ps-price{color:#221619}
.t-render .ps-cta{background:#221619; color:#F8F8F9; border-color:#221619}
.t-render .ps-cta:hover{opacity:.86; transform:translateY(-2px)}
/* slider kontrolleri */
.ph-nav{position:relative; display:flex; align-items:center; justify-content:center; gap:18px; padding-top:clamp(14px,2vh,24px)}
.ph-count{position:absolute; right:2px; top:50%; transform:translateY(-50%); display:flex; align-items:center; gap:9px;
  font-family:var(--serif); font-size:14px; color:var(--ink-45); letter-spacing:.04em}
.ph-count b{font-weight:400; color:var(--ink)}
.ph-count i{display:block; width:22px; height:1px; background:var(--line); font-style:normal}
@media(max-width:900px){.ph-count{display:none}}
.ph-arrow{width:40px; height:40px; border-radius:50%; border:1px solid var(--line); background:transparent; color:var(--ink);
  cursor:pointer; font-size:15px; line-height:1; display:grid; place-items:center; transition:.3s}
.ph-arrow:hover{border-color:var(--bordo); color:var(--bordo)}
/* noktalar: geometri SABİT (aktifken genişlemez) → sıra kaymaz, üst üste binmez; aktif olanda süre dolgusu akar */
.ph-dots{display:flex; align-items:center; gap:10px}
.ph-dot{position:relative; width:30px; height:4px; padding:0; border:0; border-radius:100px; background:var(--line);
  cursor:pointer; overflow:hidden; transition:background .3s}
.ph-dot:hover{background:var(--ink-45)}
.ph-dot::after{content:""; position:absolute; left:0; top:0; bottom:0; width:0; background:var(--bordo); border-radius:inherit}
.ph-dot.is-active::after{animation:phFill 7s linear forwards}
#phero:hover .ph-dot.is-active::after{animation-play-state:paused}
@keyframes phFill{from{width:0}to{width:100%}}
@media(prefers-reduced-motion:reduce){.ph-dot.is-active::after{animation:none; width:100%}}
@media(max-width:900px){
  .ph-stage{height:clamp(430px,64vh,580px); border-radius:16px}
  /* mobilde yazı her slaytta sol-altta toplanır, perde dikeye döner */
  .ps-inner{max-width:none; left:clamp(18px,5vw,30px) !important; right:clamp(18px,5vw,30px) !important;
    bottom:clamp(22px,3.5vh,34px) !important; top:auto !important; transform:none !important;
    align-items:flex-start !important; text-align:left !important}
  .ps-name{font-size:clamp(34px,9vw,54px)}
  .ps-tag{font-size:14.5px}
  .t-sahne.y-bl::after, .t-sahne.y-cl::after, .t-sahne.y-orta::after, .t-sahne.y-sag::after{
    background:linear-gradient(180deg, rgba(16,10,12,.2) 0%, rgba(16,10,12,.5) 48%, rgba(16,10,12,.88) 100%)}
  /* render slaytında ürün yukarı çekilir, altta beyaz perde ile koyu yazı okunur */
  .t-render .ps-bg{object-position:center 26% !important; padding-bottom:42%}
  .t-render::after{content:""; position:absolute; inset:0; z-index:1;
    background:linear-gradient(180deg, rgba(247,248,249,0) 42%, rgba(243,244,247,.95) 70%, #EFF1F4 100%)}
}

/* ---- ALT BAŞLIK (mozaiğin altı) ---- */
.mkt-outro{padding:clamp(22px,3.5vh,44px) 0 clamp(6px,1.5vh,16px); text-align:center}
.mo-h{font-family:var(--serif); font-weight:300; font-size:clamp(28px,3.6vw,54px); line-height:1; letter-spacing:-.02em}
.mo-h em{font-style:italic; color:#6E7683}
.mo-p{margin:14px auto 0; max-width:560px; font-size:15px; line-height:1.6; color:var(--ink-70); font-weight:300}

/* marka-vitrini mozaiği — 9 marka kutusu (sol sütun 2 / orta 3 / sağ 4), ekranın %80'i */
.hero.vhero{min-height:auto; background:var(--paper); display:block; overflow:hidden; position:relative}
.vhero-mosaic{display:grid; grid-template-columns:1fr 1fr 1fr; gap:14px; max-width:1660px; margin:0 auto;
  padding:clamp(18px,2.5vh,32px) clamp(18px,3vw,40px) clamp(10px,1.5vh,20px); height:80vh; min-height:520px; max-height:900px}
.vcol{display:flex; flex-direction:column; gap:14px; min-height:0}
/* simetrik 3-3-3: her sütun 3 eşit kutu, sütunu tam doldurur → 3×3 ızgara */
.vcol > *{flex:1 1 0}
.vtile{position:relative; display:block; border-radius:16px; overflow:hidden; text-decoration:none; min-height:0;
  background:#17100f center/cover no-repeat;
  transition:transform .5s cubic-bezier(.2,.7,.3,1), box-shadow .5s}
.vtile::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(18,9,12,.05) 24%, rgba(18,9,12,.78) 100%); transition:opacity .4s}
.vt-body{position:absolute; left:20px; right:20px; bottom:17px; z-index:2; display:flex; flex-direction:column; gap:7px}
.vt-name{color:#F7F2F3; font-family:var(--serif); font-weight:300; font-size:clamp(20px,1.55vw,28px); letter-spacing:.01em; line-height:1}
.vt-count{font-size:12px; color:rgba(247,242,243,.85); letter-spacing:.02em}
.vtile:hover{transform:translateY(-4px); box-shadow:0 8px 26px -6px rgba(34,22,25,.09), 0 34px 74px -26px rgba(34,22,25,.13)}
.vtile:hover::after{opacity:.96}
/* sol sütun büyük kutular (Ofisinburada + Casella) daha iri isim */
.vcol-1 > * .vt-name{font-size:clamp(20px,1.55vw,28px)}
/* oto-slider: aktif kutu vurgulanır (aksan çubuğu + Keşfet + hafif kalkış), pasifler biraz kısılır */
.vhero-mosaic .vtile{transition:transform .6s cubic-bezier(.2,.7,.3,1), box-shadow .6s, filter .6s}
.vhero-mosaic .vtile.is-active:not(.vtile-soon){transform:translateY(-4px); box-shadow:0 8px 26px -6px rgba(34,22,25,.09), 0 34px 74px -26px rgba(34,22,25,.13)}
.vhero-mosaic .vtile.is-active::after{opacity:.86}
.vhero-mosaic:not(:hover) .vtile:not(.is-active):not(.vtile-soon){filter:brightness(.9)}
.vtile-soon.is-active{filter:grayscale(1) brightness(1.05)}
.vhero-mosaic:not(:hover) .vtile-soon:not(.is-active){filter:grayscale(1) brightness(.86)}
/* çok yakında (placeholder) kutular: gri + koyu perde + rozet */
.vtile-soon{filter:grayscale(1); cursor:default}
.vtile-soon::after{background:linear-gradient(180deg, rgba(18,9,12,.44) 0%, rgba(18,9,12,.86) 100%)}
.vt-soon{align-self:flex-start; font-size:9.5px; letter-spacing:.16em; text-transform:uppercase; font-weight:600; color:#fff; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.26); border-radius:100px; padding:5px 11px; backdrop-filter:blur(4px)}
/* ── mozaik responsive ──────────────────────────────────────────────────────
   Masaüstündeki 2-3-4 sütun kurgusu dar ekranda çalışmıyordu:
   ① base kuraldaki `max-height:900px` mobil dalda SIFIRLANMADIĞI için mozaik 900px'e kilitleniyor,
      içindeki kutular taşıp birbirinin (ve alttaki bölümün) üstüne biniyordu — .hero{overflow:hidden} da kırpıyordu;
   ② 2/3/4 kutuluk sütunlar yan yana geldiğinde sütunlar farklı boyda bitip boşluk bırakıyordu.
   Çözüm: dar ekranda sütun sarmalayıcıları saydamlaşır (display:contents) → 9 kutu doğrudan
   2 sütunlu ızgaraya akar; son kutu (Redof) satırı tek başına bırakmasın diye tam genişlik alır. */
@media(max-width:900px){
  .vhero-mosaic{grid-template-columns:1fr 1fr; height:auto; max-height:none; min-height:0; gap:12px}
  .vcol{display:contents}
  .vhero-mosaic .vtile{flex:none !important; aspect-ratio:1.5/1}
  .vcol-3 > *:last-child{grid-column:1 / -1; aspect-ratio:2.8/1}
}
@media(max-width:560px){
  .vhero-mosaic{gap:10px}
  .vhero-mosaic .vtile{aspect-ratio:1.3/1; border-radius:13px}
  .vcol-3 > *:last-child{aspect-ratio:2.4/1}
  .vt-body{left:13px; right:13px; bottom:12px; gap:5px}
  .vt-name{font-size:17px}
}

/* pazaryeri anlatısı (hero ile ilk marka bandı arası) */
.mkt{padding:104px 0 24px}
.mkt-head{max-width:880px; margin:0 auto; text-align:center}
.mkt-h{font-family:var(--serif); font-weight:300; font-size:clamp(38px,5vw,72px); line-height:.98; letter-spacing:-.02em}
.mkt-h em{font-style:italic; color:#6E7683}
.mkt-lead{margin:30px auto 0; font-size:17px; line-height:1.74; color:var(--ink-70); max-width:700px; font-weight:300}
.mkt-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:34px; margin-top:64px; border-top:1px solid var(--line); padding-top:48px}
.mkt-col{text-align:center}
.mkt-col .pn{font-family:var(--serif); font-style:italic; font-size:15px; color:var(--bordo)}
.mkt-col h3{font-family:var(--serif); font-weight:400; font-size:22px; margin:12px 0 9px}
.mkt-col p{font-size:14px; line-height:1.68; color:var(--ink-70); font-weight:300}
@media(max-width:1000px){.mkt-grid{grid-template-columns:1fr; gap:22px}}

/* fotoğraf kartı (transparan PNG olmayan markalar) */
.card.photocard .card-img{aspect-ratio:1/1.02; place-items:stretch}
.card.photocard .card-img img{position:relative; width:100%; height:100%; filter:none; transition:transform .7s cubic-bezier(.2,.7,.3,1)}
.card.photocard.fit-cover .card-img img{object-fit:cover}
.card.photocard.fit-contain .card-img img{object-fit:contain; padding:12px; background:#fff}
.card.photocard:hover .card-img img{transform:scale(1.04)}
.card .add.quote{opacity:1; color:var(--bordo)}

/* OFB'nin kendi koltukları: tek ürün render'ı dev makam takımlarının yanında küçük kalmasın */
.own-card .card-img{aspect-ratio:1/1.02; background:linear-gradient(168deg,#f7f7f8 0%,#eceef1 100%)}
.own-card .card-img .pimg{width:94%}

/* tüm markalar şeridi */
.allbrands{margin:70px 0 0; display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap;
  border:1px solid var(--line); border-radius:16px; padding:26px 30px; background:var(--paper-deep)}
.allbrands .t .serif{font-family:var(--serif); font-size:22px}
.allbrands .t p{color:var(--ink-45); font-size:13.5px; margin-top:4px}
.allbrands .chips{display:flex; gap:9px; flex-wrap:wrap}
.allbrands .chips span{border:1px solid var(--line); border-radius:100px; padding:9px 16px; font-size:12.5px; color:var(--ink-70)}
.allbrands .go{display:flex; flex-direction:column; align-items:stretch; gap:9px}
.allbrands .go a{font-family:var(--sans); font-size:12px; letter-spacing:.14em; text-transform:uppercase; font-weight:500; padding:14px 24px; border-radius:100px; text-decoration:none; border:1px solid var(--bordo); color:var(--bordo); display:inline-flex; align-items:center; justify-content:center; gap:9px}
.allbrands .go a:hover{background:var(--bordo); color:#fff}
/* ikincil (küçük) yol: tüm ürünler sayfası — ana CTA'nın altında, daha sessiz */
.allbrands .go a.go-alt{font-size:11px; letter-spacing:.12em; padding:9px 20px; border-color:var(--line); color:var(--ink-70); background:transparent}
.allbrands .go a.go-alt:hover{border-color:var(--bordo); color:var(--bordo); background:transparent}

/* referans / güven bandı (Eksen k-refband'dan uyarlandı, logolar OFB'de lokalize + nötr mask) */
.ofb-ref{padding:clamp(30px,3.8vw,54px) 0 clamp(6px,0.8vw,12px)}
/* anasayfada referans slider footer'a yakın dursun (global 110px'i sadece burada kıs) */
footer.site-footer{margin-top:clamp(20px,2.4vw,34px)}
.ref-signals{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(18px,2.4vw,44px)}
@media(max-width:760px){.ref-signals{grid-template-columns:1fr; gap:16px}}
.ref-sig{display:flex; align-items:center; justify-content:center; gap:14px}
.ref-sig .ico{flex:none; width:38px; height:38px; color:var(--bordo)}
.ref-sig .ico svg{width:100%; height:100%; display:block}
.ref-sig strong{display:block; font-size:15px; font-weight:600; letter-spacing:-.01em; color:var(--ink)}
.ref-sig span{display:block; font-size:12.5px; color:var(--ink-45); margin-top:3px}
.ref-brands{margin-top:clamp(24px,3vw,44px); border-top:1px solid var(--line); padding-top:clamp(22px,2.8vw,36px); overflow:hidden; cursor:pointer;
  -webkit-mask:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent); mask:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)}
.ref-track{display:flex; width:max-content; animation:refMarquee 30s linear infinite}
.ref-brands.paused .ref-track{animation-play-state:paused}
.ref-list{display:flex; align-items:center; gap:clamp(44px,6vw,92px); padding-right:clamp(44px,6vw,92px)}
.ref-logo{flex:none; width:clamp(90px,9vw,124px); height:38px; background:var(--bordo); opacity:.55; transition:opacity .3s;
  -webkit-mask:var(--logo) center/contain no-repeat; mask:var(--logo) center/contain no-repeat}
.ref-logo:hover{opacity:.85}
@keyframes refMarquee{to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.ref-track{animation:none}}

/* şeffaf header üstündeki ince perde (hero açık renkli → yazı koyu okunur kalsın) */
.hdr-veil{position:fixed; top:0; left:0; right:0; height:110px; z-index:99; pointer-events:none;
  background:linear-gradient(180deg, rgba(248,248,249,.72) 0%, rgba(248,248,249,.32) 55%, transparent 100%); transition:opacity .38s ease}
.hdr-veil.hide{opacity:0}

/* ---- ürün sayfası (teknik özellik modalı) ---- */
.pdp-ovl{position:fixed; inset:0; z-index:400; background:rgba(23,16,18,.62); backdrop-filter:blur(5px); display:none; align-items:center; justify-content:center; padding:28px}
.pdp-ovl.open{display:flex}
.pdp-box{background:var(--paper); color:var(--ink); width:min(940px,100%); max-height:88vh; overflow:auto; border-radius:18px; display:grid; grid-template-columns:1.02fr .98fr; position:relative; box-shadow:0 40px 100px rgba(23,16,18,.5)}
.pdp-x{position:absolute; top:14px; right:16px; z-index:2; border:0; background:rgba(23,16,18,.4); color:#fff; width:34px; height:34px; border-radius:50%; font-size:20px; line-height:1; cursor:pointer}
.pdp-media{background:var(--paper-3); min-height:340px}
.pdp-media img{width:100%; height:100%; object-fit:cover; display:block}
.pdp-info{padding:36px 36px 32px}
.pdp-brand{font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--bordo)}
.pdp-name{font-family:var(--serif); font-weight:300; font-size:clamp(28px,3vw,38px); line-height:1; margin:9px 0 12px; letter-spacing:-.01em}
.pdp-badge{display:inline-block; font-size:9.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--bordo); border:1px solid var(--line); border-radius:100px; padding:5px 12px}
.pdp-price{font-family:var(--serif); font-size:24px; color:var(--ink)}
.pdp-price small{font-family:var(--sans); font-size:11px; letter-spacing:.04em; color:var(--ink-45); margin-left:6px}
.pdp-sech{font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-45); margin:24px 0 12px; padding-top:22px; border-top:1px solid var(--line)}
.pdp-tbl{width:100%; border-collapse:collapse; font-size:14px}
.pdp-tbl th{text-align:left; font-weight:500; color:var(--ink-45); font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; padding:0 8px 9px 0}
.pdp-tbl td{padding:9px 8px 9px 0; border-top:1px solid var(--line); font-family:var(--serif); font-size:16px}
.pdp-tbl td:first-child{font-family:var(--sans); font-size:13.5px; color:var(--ink-70)}
.pdp-unit{font-size:11px; color:var(--ink-45); margin-top:7px; letter-spacing:.04em}
.pdp-rows{margin-top:18px; display:flex; flex-direction:column; gap:11px}
.pdp-rows > div{display:flex; justify-content:space-between; gap:18px; font-size:13.5px; line-height:1.5}
.pdp-rows span{color:var(--ink-45); white-space:nowrap}
.pdp-rows b{font-weight:500; text-align:right}
.pdp-none{font-size:14px; color:var(--ink-70); font-weight:300; padding:8px 0 4px}
.pdp-cta{margin-top:26px}
.pdp-btn{background:var(--bordo); color:#fff; border-color:var(--bordo)}
.pdp-btn:hover{background:var(--wine)}
@media(max-width:760px){.pdp-box{grid-template-columns:1fr} .pdp-media{min-height:220px}}
@media(max-width:1000px){.brandgrid .grid{grid-template-columns:repeat(2,1fr)} .brandspot .sp-copy h2{font-size:clamp(40px,10vw,72px)}}