/* ==========================================================================
   BKM Tekstil
   Tipografi: Schibsted Grotesk. Lanvin'in kesimi Lineto Unica77'dir ve
   "exclusive use by employees of JEANNE LANVIN" lisansıyla gelir, kullanılamaz.
   Schibsted ölçülerek seçilen en yakın ücretsiz eşdeğer (bkz. kirpim/../font notu).
   Tek aile; ağırlık, boyut ve harf aralığı işi yapar.

   Çerçeveler hafif oval: --yuvarlak.
   ========================================================================== */

:root{
  /* zemin: BEYAZ (Onur kararı, 2026-09-17). Önceki kayıt "Kum #F0EBE2" idi.
     Yüzey ve çizgiler kremden alınıp beyaza göre yeniden ayarlandı: beyaz
     zeminde eski bej hatlar kirli sarıya kaçıyordu. */
  --kagit:#FFFFFF; --yuzey:#F7F5F2; --cizgi:#E2DED7; --cizgi-soft:#EFECE6;
  --murekkep:#1C1812; --govde:#4A443B; --soluk:#6E6455; --bordo:#7C2028;
  /* çerçeve köşesi: Lanvin ölçüldü, kendi CSS'inde radius 0. 2px ondaki kadar. */
  --yuvarlak:2px; --yuvarlak-sm:2px;
  --f:"Schibsted Grotesk",-apple-system,"Helvetica Neue",Arial,sans-serif;
  /* Başlık ve açıklama serif. RL'de ikisi de LeJeune Deck; ölçüldü 2026-09-17. */
  --fs:"Bodoni Moda",Georgia,"Times New Roman",serif;
  --fm:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  /* RL'nin gerçek kademeleri: 46.2 / 29.4 / 18.9 / 16.8 / 14.7 / 11 */
  --t-kapak:clamp(2rem,3.05vw,2.89rem);   /* 46.2px @1512 */
  --t-karo:clamp(1.35rem,1.95vw,1.84rem); /* 29.4px @1512 */
  --t-satir:clamp(.95rem,1.11vw,1.05rem); /* 16.8px @1512 */
  --t-bag:.92rem;                          /* 14.7px, CTA */
  /* Etiketi etiket yapan şey boyut değil bu ORAN: harf aralığı / punto = 0.40.
     RL'de 18.9px puntoya 7.56px aralık düşüyor. */
  --etiket-aralik:.4em;
  /* Serif gövde ağırlığı. Koyu temada 500, açık temada 400.
     Sebep KONTRAST DEĞİL DOLULUK: gerçek kareden ölçülen kontrast 9.33:1,
     WCAG 4.5'i rahat geçiyor. Ama Bodoni bir didone ve ince çizgileri alt
     piksel seviyesinde tam renge ulaşmıyor. Koyu zeminde serif pikselleri
     hedef luminansın %52-68'ine varıyor, grotesk %75-84'üne; açık zeminde
     fark dörtte bire iniyor. Doğru kol renk değil çizgi kalınlığı, Bodoni
     Moda değişken olduğu için ağırlık ekseni bedava. */
  --serif-agirlik:400;
  /* harita: kara dolgusu, saç inceliğinde kenar, ev ülkesi bir ton koyu */
  --harita-kara:#EFECE6; --harita-kenar:#D8D2C8; --harita-ev:#E3DDD2;
  --e:cubic-bezier(.62,.02,.2,1);
  --pad:clamp(1.15rem,4vw,4.5rem);
  --bar:4.25rem;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --kagit:#131211; --yuzey:#1B1A18; --cizgi:#2E2B27; --cizgi-soft:#232120;
    --murekkep:#EDEAE4; --govde:#B9B1A6; --soluk:#8B8278; --bordo:#C0565C;
  --serif-agirlik:500;
    --harita-kara:#232220; --harita-kenar:#34312C; --harita-ev:#2C2A26;
  }
}
:root[data-theme="dark"]{
  /* Tarayıcının kendi yüzeyleri de (kaydırma çubuğu, form denetimleri) koyuya
     geçsin; açık temadaki bir sistemde beyaz çubuk sayfanın yanında duruyordu. */
  color-scheme:dark;
  --kagit:#131211; --yuzey:#1B1A18; --cizgi:#2E2B27; --cizgi-soft:#232120;
  --murekkep:#EDEAE4; --govde:#B9B1A6; --soluk:#8B8278; --bordo:#C0565C;
  --serif-agirlik:500;
  --harita-kara:#232220; --harita-kenar:#34312C; --harita-ev:#2C2A26;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--kagit); color:var(--murekkep);
  font-family:var(--f); font-size:16px; font-weight:400; line-height:1.6;
  -webkit-font-smoothing:antialiased; letter-spacing:-.003em;
}
img,video{display:block; width:100%; height:100%; object-fit:cover}
/* Kapak 100vw. Kaydırma çubuğu varsa 100vw pencereden geniş kalır; clip o
   taşmayı keser ve overflow:hidden'ın aksine kaydırma kabı kurmaz. */
html{overflow-x:clip}
main{max-width:96rem; margin-inline:auto}
h1,h2,h3{margin:0; font-weight:400; letter-spacing:-.022em; line-height:1.06; text-wrap:balance}
p{margin:0}
a{color:inherit; text-decoration:none}
button{font:inherit; color:inherit; background:none; border:0; cursor:pointer}
:focus-visible{outline:1.5px solid var(--bordo); outline-offset:3px; border-radius:4px}
/* Programatik odak hedefleri halka göstermez. tabindex="-1" taşıyan öğeye
   klavyeyle sekme yapılamaz; odak oraya yalnız kod taşır (ürün grubu sayfası
   açılınca başlık, iletişim bağlantısında footer kolonu). Ekran okuyucu için
   odak gerekli, halka ise telefonda başlığın çevresinde kırmızı çerçeve olarak
   görünüyordu (Onur, 2026-09-18). */
[tabindex="-1"]:focus,[tabindex="-1"]:focus-visible{outline:none}
ul{margin:0; padding:0; list-style:none}

.cap{font-size:.68rem; font-weight:500; letter-spacing:.14em; text-transform:uppercase;
  color:var(--soluk)}

/* ---------------- üst şerit ---------------- */
/* Zemin ve bulanıklık sözde-öğede, şeridin kendisinde DEĞİL. Sebebi:
   backdrop-filter taşıyan öğe, içindeki position:fixed için kapsayıcı blok
   olur; menü paneli şeridin 68 px'ine hapsoluyordu. */
.bar{
  position:sticky; top:0; z-index:40; height:var(--bar);
  display:flex; align-items:center; gap:1.25rem; padding:0 var(--pad);
}
/* Dar ekranda üç kontrol yan yana: geri + logo + menü. 320 px'te 1,25rem
   boşlukla tam tamına sığıyordu, payı yoktu; yazı tipi yedeğe düşse taşardı. */
@media(max-width:55.99rem){ .bar{gap:.85rem} }
/* Zemin, bulanıklık ve alt çizgi sözde-öğede, şeridin kendisinde DEĞİL. İki
   sebep: backdrop-filter taşıyan öğe içindeki position:fixed için kapsayıcı
   blok olur (menü paneli şeridin 68 px'ine hapsoluyordu), ve menü paneli
   şeridin torunu olduğu için z-index -2 ile bu plakanın altına giriyor. */
.bar::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:color-mix(in srgb,var(--kagit) 88%,transparent);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--cizgi-soft);
}
/* 44 px: dokunma hedefi tavsiyesi. Üst şerit 68 px, büyümez. */
.logo{display:flex; align-items:center; gap:.72rem; min-height:44px}
.amblem{
  display:block; width:36px; height:28px; flex:none; background:currentColor;
  -webkit-mask:url(images/bkm-emblem.png) center/contain no-repeat;
          mask:url(images/bkm-emblem.png) center/contain no-repeat;
  /* Bordo DEĞİL mürekkep (Onur, 2026-09-17): kapak bitip şerit zeminini
     alınca amblem bordoya dönüyor ve gözü çekiyordu. Mürekkep jetonu kapakta
     zaten beyaza kilitleniyor, yani amblem tepede de aşağıda da lockup'ın
     geri kalanıyla aynı renkte kalıyor. Düz beyaz yazılmadı: açık temada
     şeridin zemini de beyaz, amblem görünmez olurdu. */
  color:var(--murekkep);
}
.lettering{display:block; line-height:1}
/* Noktalar ayrımı kendisi yapıyor; eski .17em aralık "B . K . M ." gibi
   okunuyordu, noktalar harflerinden kopuyordu.
   Boyut dar ekranda küçülür: 320 px hat sayfasında geri + logo + menü yan yana
   duruyor ve sabit boyutta taşıyordu. */
.lettering b{display:block; font-weight:600; letter-spacing:.04em;
  font-size:clamp(.86rem,3.6vw,1.06rem)}
/* TEXTILE ad değil kategori: aynı satırda ama bir tık geride durur,
   böylece lockup "ad + ne yaptığı" olarak okunur, tek uzun dize olarak değil. */
.lettering b em{font-style:normal; font-weight:400; color:var(--soluk)}
.lettering i{display:block; margin-top:5px; font-size:.5rem; font-style:normal;
  font-weight:500; letter-spacing:.075em; color:var(--soluk)}
/* ---------------- menü ----------------
   Tek bağlantı kümesi, iki hâli var. Varsayılan hâl DAR ekran: bağlantılar
   şeridin altında tam ekran panelde, düğmeyle açılıyor. Geniş ekranda panel
   satıra döner ve düğme kalkar. Kapalıyken visibility:hidden, yani sekme
   sırasında ve erişim ağacında da yok.
   Panel şeridin TORUNU. Kardeş olsaydı z-index 38 yeterdi; torunda pozitif
   z-index her zaman ebeveynin içeriğinin üstüne biner, o yüzden -2: şeridin
   plakası (-1), logosu ve kapatma düğmesi panelin üstünde kalır. Negatif
   z-index paneli sayfanın gerisine atmaz, şeridin yığın bağlamı zaten 40. */
.menu-ac{
  margin-left:auto; flex:none;
  display:inline-flex; align-items:center; min-height:44px;
  padding:.45rem 1.05rem;
  font-size:.68rem; font-weight:500; letter-spacing:.13em; text-transform:uppercase;
  color:var(--soluk); border:1px solid var(--cizgi); border-radius:999px;
  transition:border-color .35s var(--e), color .35s var(--e);
}
.menu-ac:hover,.menu-ac[aria-expanded="true"]{border-color:var(--bordo); color:var(--murekkep)}

/* Perde. Sayfanın üstünde durur, şeridin altında (39 < 40). Üç katman:
   sağda üçü birden çalışır, sola doğru önce en güçlüsü, sonra ortası,
   en sonda hafifi düşer. Böylece bulanıklık sağdan sola sönerek biter,
   sert bir dikey sınır kalmaz. */
/* Açılış opaklıkla YAPILMAZ. Sebep ölçüldü: opacity 1'in altındayken öğe
   kendi backdrop kökü oluyor ve backdrop-filter'ın bulanıklaştıracak bir arka
   planı kalmıyor; blur(22px) hesaplanıyor ama hiç uygulanmıyor. Opaklık tam
   1'e vardığı an bulanıklık tek karede basıyordu. Onun yerine bulanıklık
   yarıçapının kendisi animasyona bağlandı, perde hep tam opak. */
.menu-perde{
  position:fixed; inset:0; z-index:39; pointer-events:none;
  visibility:hidden; transition:visibility 0s .5s;
}
.menu-perde i{
  position:absolute; inset:0; display:block;
  backdrop-filter:blur(0px); -webkit-backdrop-filter:blur(0px);
  transition:backdrop-filter .5s var(--e), -webkit-backdrop-filter .5s var(--e);
}
.menu-perde i:nth-child(1){
  -webkit-mask:linear-gradient(to left,#000 0%,#000 52%,transparent 100%);
          mask:linear-gradient(to left,#000 0%,#000 52%,transparent 100%)}
.menu-perde i:nth-child(2){
  -webkit-mask:linear-gradient(to left,#000 0%,#000 28%,transparent 72%);
          mask:linear-gradient(to left,#000 0%,#000 28%,transparent 72%)}
.menu-perde i:nth-child(3){
  -webkit-mask:linear-gradient(to left,#000 0%,#000 10%,transparent 46%);
          mask:linear-gradient(to left,#000 0%,#000 10%,transparent 46%)}
body.menu-acik .menu-perde{visibility:visible; pointer-events:auto; transition:visibility 0s}
body.menu-acik .menu-perde i:nth-child(1){backdrop-filter:blur(3px);  -webkit-backdrop-filter:blur(3px)}
body.menu-acik .menu-perde i:nth-child(2){backdrop-filter:blur(9px);  -webkit-backdrop-filter:blur(9px)}
body.menu-acik .menu-perde i:nth-child(3){backdrop-filter:blur(22px); -webkit-backdrop-filter:blur(22px)}

/* Panel sağa yaslı, sağdan kayarak girer. Zemin saydam: arkadaki sayfa
   bulanık görünsün diye. Ton da sağdan sola açılır, perdeyle aynı yönde. */
.nav{
  position:fixed; top:0; right:0; bottom:0; left:auto; z-index:-2;
  width:min(87vw,25rem);
  display:flex; flex-direction:column; justify-content:center;
  padding:var(--bar) var(--pad) 0;
  background:linear-gradient(to left,
    color-mix(in srgb,var(--kagit) 90%,transparent) 0%,
    color-mix(in srgb,var(--kagit) 84%,transparent) 62%,
    color-mix(in srgb,var(--kagit) 52%,transparent) 87%,
    transparent 100%);
  transform:translateX(100%); visibility:hidden;
  transition:transform .5s var(--e), visibility 0s .5s;
}
body.menu-acik .nav{transform:none; visibility:visible;
  transition:transform .5s var(--e), visibility 0s}
.nav a{
  position:relative; color:var(--murekkep);
  font-size:clamp(1.7rem,8vw,2.4rem); letter-spacing:-.022em; line-height:1.06;
  /* Sağa yaslı: panel sağdan giriyor, ton ve bulanıklık sağda en güçlü.
     Sola yaslasak yazı, tonun söndüğü kenara denk gelirdi. */
  text-align:right;
  padding:.85rem 0;
  transform:translateY(14px); opacity:0;
  transition:transform .5s var(--e), opacity .5s var(--e), color .35s var(--e);
}
/* Ayırıcı çizgi de sola doğru söner: düz bir kenarlık, tonun bittiği yerde
   fotoğrafın üstünde havada duruyordu. */
.nav a::after{content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:linear-gradient(to left,var(--cizgi-soft) 0%,transparent 86%)}
body.menu-acik .nav a{transform:none; opacity:1}
body.menu-acik .nav a:nth-child(2){transition-delay:.05s}
body.menu-acik .nav a:nth-child(3){transition-delay:.10s}
body.menu-acik .nav a:nth-child(4){transition-delay:.15s}
.nav a:hover{color:var(--bordo)}

@media(min-width:56rem){
  .menu-ac{display:none}
  .menu-perde{display:none}
  .nav{position:static; z-index:auto; margin-left:auto; width:auto;
    flex-direction:row; gap:1.7rem; align-items:center; justify-content:flex-start;
    padding:0; background:none; transform:none; visibility:visible; transition:none}
  .nav a{font-family:var(--fm); font-size:.69rem; font-weight:500; color:var(--soluk);
    letter-spacing:.082em; text-transform:uppercase; line-height:normal;
    text-align:left; padding:.3rem 0; border-bottom:0; transform:none; opacity:1;
    transition:color .35s var(--e)}
  .nav a::after{content:""; position:absolute; left:0; right:100%; bottom:0; height:1px;
    background:var(--bordo); transition:right .4s var(--e)}
  .nav a:hover{color:var(--murekkep)}
  .nav a:hover::after{right:0}
}

/* ---------------- kenar bulanıklığı ----------------
   Kaydırırken üst ve alt yatay kenar yumuşasın. Tek katman sert bir sınır
   bırakıyor, o yüzden üç katman: her biri daha dar alanda daha güçlü blur. */
.kenar{position:fixed; left:0; right:0; z-index:35; pointer-events:none;
  height:clamp(70px,11svh,130px)}
.kenar.ust{top:0}
.kenar.alt{bottom:0}
.kenar i{position:absolute; inset:0; display:block}
.kenar.ust i:nth-child(1){backdrop-filter:blur(2px);
  -webkit-mask:linear-gradient(to bottom,#000 0%,#000 34%,transparent 62%);
          mask:linear-gradient(to bottom,#000 0%,#000 34%,transparent 62%)}
.kenar.ust i:nth-child(2){backdrop-filter:blur(6px);
  -webkit-mask:linear-gradient(to bottom,#000 0%,#000 14%,transparent 38%);
          mask:linear-gradient(to bottom,#000 0%,#000 14%,transparent 38%)}
.kenar.ust i:nth-child(3){backdrop-filter:blur(14px);
  -webkit-mask:linear-gradient(to bottom,#000 0%,transparent 18%);
          mask:linear-gradient(to bottom,#000 0%,transparent 18%)}
.kenar.alt i:nth-child(1){backdrop-filter:blur(2px);
  -webkit-mask:linear-gradient(to top,#000 0%,#000 34%,transparent 62%);
          mask:linear-gradient(to top,#000 0%,#000 34%,transparent 62%)}
.kenar.alt i:nth-child(2){backdrop-filter:blur(6px);
  -webkit-mask:linear-gradient(to top,#000 0%,#000 14%,transparent 38%);
          mask:linear-gradient(to top,#000 0%,#000 14%,transparent 38%)}
.kenar.alt i:nth-child(3){backdrop-filter:blur(14px);
  -webkit-mask:linear-gradient(to top,#000 0%,transparent 18%);
          mask:linear-gradient(to top,#000 0%,transparent 18%)}
/* sayfa başındayken üst kenar, sonundayken alt kenar kapanır */
body[data-tepe] .kenar.ust,
body[data-dip] .kenar.alt{opacity:0}
.kenar{transition:opacity .5s var(--e)}
/* Geri düğmesi solda, logodan önce. Telefonda yalnız ok: 320 px'te geri +
   logo + menü yan yana sığmıyordu (23 px taşma). Erişilebilir ad aria-label
   ile duruyor, yani ekran okuyucu her genişlikte "All lines" diyor. */
.back{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem; flex:none;
  font-size:.68rem; font-weight:500; letter-spacing:.13em; text-transform:uppercase;
  color:var(--soluk);
  padding:.45rem .8rem; min-height:44px; min-width:44px;
  border:1px solid var(--cizgi); border-radius:999px;
  transition:border-color .35s var(--e), color .35s var(--e), background .35s var(--e);
}
.back-yazi{display:none}
@media(min-width:56rem){
  .back{padding:.45rem .95rem .45rem .8rem}
  .back-yazi{display:inline}
}
.back .ok{transition:transform .35s var(--e); display:inline-block}
.back:hover{border-color:var(--bordo); color:var(--murekkep)}
.back:hover .ok{transform:translateX(-3px)}
.back[hidden]{display:none}
/* Hat sayfasında dar ekranda logo markasına iner: üst şeritte geri + logo +
   menü yan yana duruyor ve "B.K.M. TEXTILE" ile 320 px'te pay sıfırlanıyordu.
   Zaten sitenin içindesin, kategoriyi tekrar okumana gerek yok. */
@media(max-width:34rem){
  body.acik .lettering i,
  body.acik .lettering b em{display:none}
}

/* ---------------- açılış ---------------- */
.opening{padding:clamp(1.6rem,3.4vw,3rem) var(--pad) clamp(3rem,6vw,6rem)}

/* ---------------- kapak klibi ----------------
   Sayfanın tek kenarsız bloğu: .opening'in yan payını ve main'in 96rem
   sınırını birlikte aşar. 100vw taşma yapmasın diye html'de overflow-x:clip
   var; clip kaydırma kabı KURMAZ, bu yüzden üst şeridin sticky'si bozulmaz
   (overflow:hidden olsaydı bozardı). */
.hero{
  position:relative; isolation:isolate; overflow:hidden;
  width:100vw; margin-inline:calc(50% - 50vw);
  /* Üst şerit kapağın ÜSTÜNDE yüzüyor, yanında değil: kapak şeridin
     yüksekliği kadar daha yukarı çekilir, boyu da o kadar uzar. Böylece
     kapaktan sonraki içerik yerinde kalır. */
  margin-top:calc(-1 * var(--bar) - clamp(1.6rem,3.4vw,3rem));
  /* Boy DEĞİL oran: tam genişlik bantların hepsi 2:1. Ölçüldü (RL, 1512px):
     bant 1512x756 = tam 2.000. Tavan svh, çok geniş ekranda ekranı yemesin. */
  /* Tavan svh DEĞİL: RL'de kapak 756px, pencere 745px, yani kapak pencereyi
     bilerek birkaç piksel aşıyor. Tavan yalnız çok geniş ekran için. */
  aspect-ratio:2/1; max-height:60rem;
  background:#0E0D0C;
}
/* Kadraj biraz yukarıda: klip yatay, kutu ondan dar; ortadan kırpınca
   modelin başı üstten kesiliyordu. */
.hero-klip{position:absolute; inset:0; object-position:center 38%}
/* Plaka sol altta olduğu için karartma da orada toplanıyor: üstte yalnız
   şeridi taşıyacak kadar, altta yazıyı eşiğin üstüne çıkaracak kadar. */
.hero-perde{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(180deg,rgba(0,0,0,.34) 0,rgba(0,0,0,.05) 22%,
                    rgba(0,0,0,0) 42%,rgba(0,0,0,.38) 76%,rgba(0,0,0,.62) 100%),
    linear-gradient(90deg,rgba(0,0,0,.42) 0,rgba(0,0,0,.12) 42%,rgba(0,0,0,0) 68%);
}
@media(prefers-reduced-motion:reduce){.plate .go{transition:none}}
/* Telefonda tam boy kapak, yatay klibi aşırı yakınlaştırıyor: kutu alçalır. */
/* Telefonda 2:1 bir şerit kalır (390px'te 195px). Dikey malzemeye dönülür. */
@media(max-width:46rem){.hero{aspect-ratio:4/5; max-height:76svh}}

/* Kapak görünürken şerit zeminini bırakır ve videonun üstünde durur.
   Renkler tek tek değil JETON olarak değiştiriliyor: şeridin içindeki logo,
   amblem, bağlantılar, dil düğmesi ve menü düğmesi zaten bu jetonlardan
   besleniyor, hepsi tek kuralla aydınlanıyor.
   Menü açıkken hariç: panel sayfanın üstüne binince beyaz yazı okunmaz. */
body[data-kapak]:not(.menu-acik) .bar{
  --murekkep:#FFFFFF; --soluk:rgba(255,255,255,.80);
  --cizgi:rgba(255,255,255,.34); --bordo:#FFFFFF;
  color:#FFFFFF; text-shadow:0 1px 16px rgba(0,0,0,.45);
}
body[data-kapak]:not(.menu-acik) .bar::before{opacity:0}
.bar::before{transition:opacity .45s var(--e)}
/* Kapaktayken üst kenar bulanıklığı da kalkar: şerit zaten saydam, blur
   şeridin altında ikinci bir sis şeridi bırakıyordu. */
body[data-kapak] .kenar.ust{opacity:0}

/* ---------------- hatlar: üç çerçeve ---------------- */
.hatlar{display:block; margin-top:clamp(2.4rem,5vw,4.4rem)}
.hatlar-head{margin-bottom:clamp(1.1rem,2.2vw,1.9rem)}
/* Izgara kenardan kenara olduğu için başlık kendi payını taşır. */
.hatlar-head h2{font-size:clamp(1.7rem,3.1vw,2.5rem); font-weight:400}

/* Ölçülmüş ritim (Ralph Lauren, 2026-09-17, iki oturumda bağımsız ölçüldü):
   tam genişlik bant 100vw x 50vw = 2:1 · ikili karo 0.757 (bizde 3:4, aşağıda)
   ara 1.111vw, altı geçişin altısında tek değer · dış boşluk YOK, kenardan kenara
   zemin baştan sona TEK renk, beyaz; renk fotoğraftan gelir, sayfadan değil.
   Bizim malzeme de bu iki kalıba zaten ayrılıyor: kapak fotoğrafları 1500x2000
   (tam 3:4), bantlar 2200x942, dikey klipler 1080x1920. */
.frames{
  width:100vw; margin-inline:calc(50% - 50vw);
  /* Ara SABİT PİKSEL DEĞİL, ORAN: 1.111vw. Ölçüldü (RL): 1512'de 16.8px,
     768'de 8.53px, altı geçişin altısında da aynı. Sabit 16px yazılsaydı dar
     ekranda ara orantısız büyür, ritim genişlikle birlikte ölçeklenmezdi. */
  display:grid; gap:1.111vw;
  grid-template-columns:repeat(2,minmax(0,1fr));
}
@media(max-width:46rem){.frames{grid-template-columns:minmax(0,1fr)}}

.frame{
  position:relative; width:100%; padding:0; text-align:left;
  /* Kırpma .frame'de DEĞİL .medya'da. Sebep: overflow:hidden taşıyan ata,
     içindeki position:sticky için kaydırma kabı olur ve plaka ekrana
     yapışmaz. Plakanın yapışması bu sayfadaki asıl hareket. */
  border-radius:0; background:var(--yuzey);
  /* Plaka akışta ve altta: sticky ancak akıştaki öğede çalışır. */
  display:flex; flex-direction:column; justify-content:flex-end;
  /* RL'de bu karo 0.757. Bizde bilerek 3/4 (0.750): kapak fotoğraflarımız
     1500x2000, yani tam 3:4. 0.757 yazılsaydı her poster %1 kırpılırdı.
     Sapma 10px ve gerekçesi malzeme. */
  aspect-ratio:3/4; isolation:isolate;
  opacity:0; transform:translateY(20px) scale(.995);
}
/* Tam genişlik bant: satırın tamamını kaplar, oranı 2:1. */
.frame.genis{grid-column:1/-1; aspect-ratio:2/1}
/* Hattı olmayan blok: imleç değişmez, tıklama beklentisi doğmaz. */
.frame.durgun{cursor:default}
@media(max-width:46rem){.frame.genis{aspect-ratio:3/4}}
body.hazir .frame{opacity:1; transform:none;
  transition:opacity .85s var(--e), transform .85s var(--e)}
body.hazir .frame:nth-child(2){transition-delay:.08s}
body.hazir .frame:nth-child(3){transition-delay:.16s}

.medya{position:absolute; inset:0; z-index:0; overflow:hidden; border-radius:inherit}
.frame img{transform:scale(1.04); transition:transform 1.5s var(--e)}
.frame:hover img,.frame:focus-visible img{transform:scale(1.005)}
/* kapak klibi: kapak karesinin üstünde, oynamaya başlayınca içeri geçer */
.frame video.klip{
  position:absolute; inset:0; z-index:1; opacity:0;
  transition:opacity .55s var(--e);
}
.frame.oynuyor video.klip{opacity:1}
.frame.oynuyor img{transform:scale(1.005)}
.frame .shade{z-index:2}
.frame .plate{z-index:3}
/* Ceremony karesinin altı beyaz stüdyo. Eski gradyanla o karede başlık
   piksel ölçümünde 2,95:1'e düşüyordu (eşik 4,5; 20,5 px / 500 ağırlık büyük
   metin sayılmıyor). Yazının başladığı %74'ten itibaren karartma sertleşti. */
/* İKİ eksenli: plaka sol altta olduğu için karartma hem aşağıda hem solda
   toplanıyor. Tek eksen yetmiyordu; tören bandının sol üçte biri açık stüdyo
   duvarı ve orada beyaz yazı eşiğin altında kalıyordu. */
.frame .shade{position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(180deg,rgba(0,0,0,.14) 0 16%,rgba(0,0,0,0) 36%,
                    rgba(0,0,0,.22) 58%,rgba(0,0,0,.44) 74%,rgba(0,0,0,.58) 88%,
                    rgba(0,0,0,.64) 100%),
    linear-gradient(90deg,rgba(0,0,0,.30) 0,rgba(0,0,0,.08) 46%,rgba(0,0,0,0) 72%)}
/* ---------------- plaka ----------------
   Kapak ve karo AYNI bileşeni kullanır: etiket / başlık / tek satır / bağlantı,
   sol altta. Ralph Lauren'de de tek plaka var, boyutu kutuya göre değişiyor. */
.plate{
  position:relative; z-index:3; max-width:min(46ch,92%);
  padding:clamp(1.2rem,2.2vw,2rem) clamp(1.2rem,2.2vw,2rem) clamp(1.35rem,2.6vw,2.4rem);
  color:#F6F3EE; display:flex; flex-direction:column; align-items:flex-start;
  text-align:left;
}
/* Adı .etiket DEĞİL: o sınıf haritanın ülke etiketlerinin, position:absolute
   ve opacity:0 taşıyor, plaka satırını yutuyordu. (17.09, bir tur kaybettirdi.) */
.plate .kicker{
  font-family:var(--f); font-size:.68rem; font-weight:600; text-transform:uppercase;
  letter-spacing:var(--etiket-aralik); line-height:1.3; color:rgba(246,243,238,.9);
  /* Aralık son harften sonra da uygulanır; sola hizayı bozmasın diye geri alınır. */
  margin-right:calc(-1 * var(--etiket-aralik));
}
.plate .ad{
  font-family:var(--fs); font-size:var(--t-karo); font-weight:400;
  letter-spacing:normal; line-height:1.18; margin-top:.55rem;
}
.plate .kisa{
  font-family:var(--fs); font-size:var(--t-satir); font-weight:400;
  line-height:1.75; letter-spacing:.015em; color:rgba(246,243,238,.88);
  max-width:34ch; margin-top:.5rem;
}
.plate .go{
  display:inline-flex; align-items:center; gap:.45rem; margin-top:1rem;
  font-family:var(--f); font-size:var(--t-bag); font-weight:400;
  letter-spacing:.071em; text-transform:uppercase; color:#F6F3EE;
  border-bottom:1px solid rgba(246,243,238,.55); padding-bottom:.28rem;
  transition:border-color .4s var(--e), gap .4s var(--e);
}
.frame:hover .go,.frame:focus-visible .go,.plate .go:hover{
  border-color:#F6F3EE; gap:.72rem;
}
/* Plaka EKRANA yapışır, karoya değil (Ralph Lauren'de ölçüldü, ekran kaydı
   2026-09-17): karo ekrandan geçerken yazı ekranın altında asılı kalır, yani
   görselin ortasında duruyormuş gibi görünür; karonun alt kenarı ekrana
   girince yazı oraya oturur ve karoyla birlikte çıkar.
   Yalnız karoda anlamlı: kapak ve 2:1 bantlar ekrandan kısa olduğu için
   yapışacak mesafe yok, plaka doğrudan altta durur. */
/* bottom:0 değil: sticky, plakanın KENAR kutusunu ekranın dibine yapıştırıyor
   ve alt satır foldun birkaç piksel altında kalıyordu. 1.25rem pay, yazıyı
   her zaman görünür tutuyor. */
.frame .plate{position:sticky; bottom:1.25rem}
/* Kapak plakası bir kademe büyük: RL'de kapak başlığı 46.2px, karo 29.4px. */
.hero-plate{position:absolute; inset:auto auto 0 0; z-index:2}
.hero-plate .ad{font-size:var(--t-kapak); margin-top:.7rem}
.hero-plate .kicker{font-size:.74rem}

/* ---------------- tanıtım metni ---------------- */
.tell{
  display:grid; gap:2rem 4rem; grid-template-columns:minmax(0,1fr);
  margin-top:clamp(2.6rem,5.5vw,5rem); padding-top:clamp(1.7rem,3vw,2.6rem);
  border-top:1px solid var(--cizgi);
}
@media(min-width:70rem){
  .tell{grid-template-columns:8.5rem minmax(0,33rem) minmax(0,1fr)}
}
.tell-etiket{grid-column:1; padding-top:.5rem}
@media(max-width:70rem){.tell-etiket{padding-top:0}}
.tell h1,.tell h2{font-family:var(--fs); font-size:clamp(1.75rem,3.1vw,2.5rem);
  font-weight:400; letter-spacing:normal; line-height:1.16; max-width:22ch}
.tell-main p{font-family:var(--fs); font-weight:var(--serif-agirlik);
  margin-top:1.2rem; max-width:56ch; color:var(--govde);
  font-size:1.15rem; line-height:1.72; letter-spacing:.012em; font-optical-sizing:auto}
.tell-side{display:grid; gap:2rem; align-content:start; padding-top:.35rem}
.tell-bag{margin-top:1.6rem}

.facts{margin:0; display:grid}
.facts > div{display:flex; justify-content:space-between; align-items:baseline; gap:1rem;
  padding:.62rem 0; border-bottom:1px solid var(--cizgi-soft)}
.facts dt{font-size:.72rem; color:var(--soluk); letter-spacing:.02em}
.facts dd{margin:0; font-size:.86rem; font-weight:500}

/* Ülke listesi. Dar ekranda haritanın altında okunur; geniş ekranda görsel
   olarak gizlenir ama erişim ağacında kalır (harita canvas'ı aria-hidden). */
.ulkeler{grid-column:1/-1; display:flex; flex-wrap:wrap; justify-content:center;
  gap:.4rem; margin-top:1.5rem}
.ulkeler li{font-size:.76rem; padding:.32rem .68rem; border:1px solid var(--cizgi);
  border-radius:999px; color:var(--soluk)}
@media(min-width:46rem){
  .ulkeler{position:absolute; width:1px; height:1px; margin:-1px; padding:0;
    border:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap}
}

/* ---------------- ihracat: tipografik manifesto ----------------
   Harita yok. Bölüm iki parça: solda etiket ve iddia, altında pazarlar.
   Adlar mono ve versal, çünkü sayfada mono'nun işi zaten künye dili:
   menü, footer başlıkları, teknik satırlar. Manifesto o sesle okunur.
   Bağlantı DEĞİLLER: alt çizgi ve hover yok, yoksa footer link listesine
   benzer ve okunacak bir metin olmaktan çıkar. */
.ihracat{
  margin-top:clamp(3rem,6vw,5.5rem); padding:clamp(1.7rem,3vw,2.6rem) var(--pad) 0;
  border-top:1px solid var(--cizgi);
  display:grid; gap:clamp(1.4rem,3vw,2.6rem) clamp(1.4rem,3vw,3rem);
  grid-template-columns:minmax(0,1fr);
}
.ihracat > .cap{padding-top:.4rem}
.ihracat-govde{max-width:44ch}
.ihracat-govde h2{font-family:var(--fs); font-size:var(--t-karo); font-weight:400;
  letter-spacing:normal; line-height:1.18}
.ihracat-govde p{font-family:var(--fs); font-size:var(--t-satir); line-height:1.75;
  letter-spacing:.015em; color:var(--govde); margin-top:.7rem}
.pazarlar{
  grid-column:1/-1;
  display:grid; gap:.55rem clamp(1rem,2.4vw,2.4rem);
  grid-template-columns:repeat(2,minmax(0,1fr));
  margin-top:clamp(.6rem,1.6vw,1.4rem);
}
/* Menşe satırı sıralamanın parçası değil: aynı satırda ama etiketiyle
   ayrılıyor, yoksa "tekstil tarihinde birinci" gibi okunurdu. */
.pazarlar .mense span{
  font-size:.62rem; letter-spacing:.09em; color:var(--soluk);
  text-transform:lowercase; font-style:normal; margin-left:.35rem;
}
.pazarlar li{
  font-family:var(--fm); font-size:.72rem; font-weight:400; letter-spacing:.085em;
  text-transform:uppercase; line-height:1.5; color:var(--murekkep);
  padding-bottom:.55rem; border-bottom:1px solid var(--cizgi-soft);
}
@media(min-width:46rem){
  .ihracat{grid-template-columns:8.5rem minmax(0,1fr)}
  .pazarlar{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(min-width:70rem){
  .pazarlar{grid-template-columns:repeat(4,minmax(0,1fr))}
}

/* ---------------- kurumsal ---------------- */
.company{margin-top:clamp(3.4rem,6.5vw,6rem); padding-top:clamp(1.7rem,3vw,2.6rem);
  border-top:1px solid var(--cizgi);
  display:grid; gap:1.6rem 4rem; grid-template-columns:minmax(0,1fr)}
@media(min-width:70rem){.company{grid-template-columns:8.5rem minmax(0,1fr)}}
.company > .cap{padding-top:.5rem}
.company .ikili{display:grid; gap:2.2rem 4rem;
  grid-template-columns:minmax(0,1fr)}
@media(min-width:56rem){.company .ikili{grid-template-columns:repeat(2,minmax(0,1fr))}}
.company article h3{font-size:clamp(1.35rem,2.4vw,1.85rem); font-weight:400}
.company article p{margin-top:.9rem; color:var(--govde); max-width:52ch}
.taslak{grid-column:1/-1; margin-top:.4rem; font-size:.76rem; color:var(--soluk); opacity:.8}
.taslak code{font-size:.72rem; opacity:.85}

/* ---------------- hat sayfası ---------------- */
.line[hidden]{display:none}
.line{padding:0 var(--pad) clamp(3rem,6vw,6rem); animation:gir .75s var(--e) both}
@keyframes gir{from{opacity:0; transform:translateY(24px)}to{opacity:1; transform:none}}

.banner{
  border-radius:var(--yuvarlak); overflow:hidden; background:var(--yuzey);
  aspect-ratio:21/9; margin-top:clamp(.6rem,1.6vw,1.2rem);
}
@media(max-width:46rem){.banner{aspect-ratio:16/10}}

.line-head{
  display:grid; gap:1.1rem 5rem; grid-template-columns:minmax(0,1fr);
  padding:clamp(2.2rem,4.5vw,3.8rem) 0 clamp(1.6rem,3vw,2.6rem);
  border-bottom:1px solid var(--cizgi-soft);
}
@media(min-width:62rem){.line-head{grid-template-columns:minmax(0,1fr) minmax(0,26rem); align-items:end}}
/* Aynı kural burada da: cümle serif, etiket grotesk. Hat sayfası ve föy
   bu turda gözden kaçmıştı, ikisi de baştan sona grotesk kalmıştı. */
.line-head h1{font-family:var(--fs); font-size:clamp(2.1rem,4.4vw,3.4rem);
  font-weight:400; letter-spacing:normal; line-height:1.14}
.line-head .kick{display:block; margin-bottom:.7rem}
.line-head .about{font-family:var(--fs); font-weight:var(--serif-agirlik);
  font-size:1.15rem; line-height:1.72; letter-spacing:.012em;
  color:var(--govde); max-width:56ch; font-optical-sizing:auto}

/* ürün ızgarası — sütun sayısı hattın ürün sayısını takip eder (--n, site.js).
   Önceki auto-fit + 20rem tavanı iki şey bozuyordu: dört ürünlü hatta 3+1 öksüz
   satır kalıyordu, ve ızgara sayfanın kenarından 160 px içeride duruyordu. */
.products{
  display:grid; gap:clamp(.7rem,1.5vw,1.4rem); padding-top:clamp(1.8rem,3.4vw,3rem);
  grid-template-columns:repeat(2,minmax(0,1fr));
}
@media(max-width:30rem){.products{grid-template-columns:minmax(0,1fr)}}
@media(min-width:46rem){.products{grid-template-columns:repeat(var(--n-orta,2),minmax(0,1fr))}}
@media(min-width:62rem){.products{grid-template-columns:repeat(var(--n,3),minmax(0,1fr))}}
.card{
  display:flex; flex-direction:column; gap:.85rem; padding:0; text-align:left;
  opacity:0; transform:translateY(18px);
}
.card.gorundu{opacity:1; transform:none;
  transition:opacity .7s var(--e), transform .7s var(--e)}
.card .kutu{position:relative; border-radius:var(--yuvarlak); overflow:hidden;
  aspect-ratio:3/4; background:var(--yuzey)}
.card .kutu img{position:absolute; inset:0; transition:opacity .55s var(--e), transform 1.3s var(--e)}
.card .kutu .b{opacity:0}
.card:hover .kutu .a,.card:focus-visible .kutu .a{opacity:0}
.card:hover .kutu .b,.card:focus-visible .kutu .b{opacity:1}
.card:hover .kutu img,.card:focus-visible .kutu img{transform:scale(1.03)}
.card .alt{display:grid; gap:.28rem; padding:0 .15rem .3rem}
/* Ürün adı bir başlıktır: vitrindeki plaka adları da serif. Negatif harf
   aralığı kalktı, Didone'de harfleri yapıştırıyor. */
.card .alt .ad{font-family:var(--fs); font-size:1.08rem; font-weight:400;
  letter-spacing:normal; line-height:1.22}
.card .alt .satir{font-size:.79rem; color:var(--govde); line-height:1.5}

/* hareket: dikey klipler dikey kalır, yatay kadraja zorlanmaz */
.motion{padding-top:clamp(3rem,5.5vw,5rem)}
.motion:empty{display:none}
.motion .cap{display:block; text-align:center; margin-bottom:1.2rem}
.motion .row{
  display:flex; flex-wrap:wrap; justify-content:center;
  gap:clamp(.7rem,1.5vw,1.4rem);
}
/* Telefonda klip sayfa kenarına oturur: 17rem'lik sabit taban yüzünden iki
   yandan 34 px içeride kalıyor, sayfadaki her bloktan farklı bir kenarda
   duruyordu. Geniş ekranda taban korunur, dikey klip yatay kadraja zorlanmaz. */
.motion figure{flex:0 1 17rem; min-width:min(13rem,100%)}
/* Tek klip kalınca 17rem'lik kutu geniş ekranın ortasında kayboluyordu
   (1512px'te 272px). Tek çocukta taban büyür; iki ve üstü değişmez. */
.motion .row:has(figure:only-child) figure{flex:0 1 26rem}
@media(max-width:34rem){ .motion figure{flex:1 1 100%} }
.motion figure{margin:0; display:grid; gap:.7rem; align-content:start;
  opacity:0; transform:translateY(18px)}
.motion figure.gorundu{opacity:1; transform:none;
  transition:opacity .75s var(--e), transform .75s var(--e)}
.motion .kutu{border-radius:var(--yuvarlak); overflow:hidden; background:var(--yuzey);
  aspect-ratio:9/16; position:relative}
.motion video{cursor:pointer}
.motion figcaption{font-size:.76rem; color:var(--soluk); padding:0 .15rem;
  display:flex; justify-content:space-between; gap:1rem; align-items:baseline}
/* Ses düğmesi. Görünen kutu küçük, dokunma alanı ::after ile 44 px'e çıkar. */
/* Ses düğmesi. Görünen kutu küçük, dokunma alanı ::after ile 44 px'e çıkar.
   opacity .65 ile kontrast 2,79:1'e düşüyordu; artık soluk rengin kendisi
   (4,96:1) taşıyor, vurgu opaklıkla değil renkle veriliyor. */
.motion .ses{position:relative; font-size:.68rem; letter-spacing:.08em;
  text-transform:uppercase; color:var(--soluk); padding:.15rem; flex:none;
  transition:color .3s var(--e)}
.motion .ses::after{content:""; position:absolute; inset:-12px -14px}
.motion .ses:hover,.motion .ses[aria-pressed="true"]{color:var(--murekkep)}

/* kapanış */
.closing{margin-top:clamp(3.4rem,6.5vw,6rem); padding-top:clamp(1.7rem,3vw,2.6rem);
  border-top:1px solid var(--cizgi);
  display:grid; gap:1.2rem 4rem; grid-template-columns:minmax(0,1fr)}
@media(min-width:70rem){.closing{grid-template-columns:8.5rem minmax(0,46rem)}}
.closing > *{grid-column:-2}
.closing > .cap{grid-column:1; grid-row:1; padding-top:.5rem}
.line .closing{border-top:1px solid var(--cizgi)}
.closing h2{font-size:clamp(1.7rem,3.2vw,2.5rem); font-weight:400}
.closing p{margin-top:1rem; color:var(--govde)}
.cta{display:inline-block; margin-top:1.8rem; padding:.85rem 1.5rem;
  border:1px solid var(--cizgi); border-radius:999px; font-size:.86rem; font-weight:500;
  transition:background .4s var(--e), border-color .4s var(--e), color .4s var(--e)}
.cta:hover{background:var(--bordo); border-color:var(--bordo); color:#fff}
.fine{margin-top:1.5rem; font-size:.78rem}

/* Kapanış bloğu: sayfanın çıkışı. Bölüm ritmini bozmasın diye .bolum
   ızgarasını kullanıyor, üstüne yalnız ayraç ekliyor. */
.kapanis{margin-top:clamp(2.6rem,5vw,4.4rem); padding-top:clamp(1.6rem,2.8vw,2.4rem);
  border-top:1px solid var(--cizgi)}
.kapanis .foot-bag{margin-top:1.2rem}

/* ---------------- mastino vitrini ----------------
   Bilerek KATALOG dili: kutuda, düz, aynı zeminde, eşit ızgara. Sitenin geri
   kalanı editoryal ve tam genişlik; buradaki zıtlık ayrımın kendisi.
   Garments modelin üstünde ne dikebildiğimizi, burası kendi etiketimizle ne
   bitirdiğimizi gösteriyor. */
/* Vitrin bölümü metin bölümü değil: 46rem'lik okuma sütunu ızgarayı
   sayfanın soluna hapsediyordu. Burada içerik sütunu serbest, paragrafı
   zaten kendi 56ch sınırı tutuyor. */
/* .bolum.vitrin-bolum, tek sınıf değil: .bolum'un kendi 70rem kuralı bu
   dosyada DAHA AŞAĞIDA ve eşit özgüllükte, sırf sıra yüzünden eziyordu. */
@media(min-width:70rem){ .bolum.vitrin-bolum{grid-template-columns:8.5rem minmax(0,1fr)} }
.vitrin-bolum .vitrin-agi{grid-column:1/-1}
.vitrin-agi{
  margin-top:clamp(1.6rem,3vw,2.6rem);
  display:grid; gap:clamp(.8rem,1.6vw,1.4rem);
  grid-template-columns:repeat(2,minmax(0,1fr));
}
@media(min-width:46rem){ .vitrin-agi{grid-template-columns:repeat(3,minmax(0,1fr))} }
.vitrin-agi li{aspect-ratio:3/4; overflow:hidden; background:var(--yuzey);
  border-radius:var(--yuvarlak)}
.vitrin-agi img{transition:transform 1.2s var(--e)}
.vitrin-agi li:hover img{transform:scale(1.03)}

/* ---------------- mastino: RL düzeni (2026-09-18) ----------------
   Yeni ölçü YOK: kapak, karo, bant ve metin bloğu ana sayfanın bileşenleri.
   Buradaki kurallar yalnız belge sayfasına uyarlama: .belge'nin üst payı,
   yan pay ve site.js olmadığı için açılış animasyonunun kapatılması. */
.belge > .hero{margin-top:calc(-1 * var(--bar) - clamp(1.4rem,2.6vw,2.4rem))}
/* Oturan figür: kadraj üstten, baş şeridin hemen altında kalsın. */
.hero-ms .hero-klip{object-position:center 4%}
/* .belge yan pay taşımıyor (onu .bolum veriyor); metin bloğu kendi payını alır. */
.belge > .tell{max-width:96rem; margin-inline:auto; padding-inline:var(--pad)}
.belge > .frames{margin-top:clamp(2.6rem,5.5vw,5rem)}
/* site.js yok: karo açılış animasyonunu o sürüyor (body.hazir). Belge
   sayfasında karo görünür başlar, yoksa sayfa boş kalırdı. */
.belge .frame{opacity:1; transform:none}
.ms-band-karo img{object-position:center 16%}
/* Giriş bloğu: solda başlık, sağda metin. Metin sütunu .tell'in kendi 33rem'i,
   yani okuma ölçüsü (51 karakter) değişmiyor; yalnız sol sütun etiket
   genişliğinden başlık genişliğine çıkıyor. */
@media(min-width:70rem){
  /* 30rem: başlık iki dilde de virgülden ikiye bölünsün. Ölçüldü (40 px Bodoni):
     EN ilk satır 460 px, TR ikinci satır 405 px; 24rem'de ikisi de üç satıra
     kırılıyor ve ilk satır tek kelime kalıyordu. */
  .belge > .tell.ms-giris{grid-template-columns:minmax(0,30rem) minmax(0,33rem) minmax(0,1fr)}
}
.ms-giris-baslik{grid-column:1; align-self:start; padding-top:.5rem}
.ms-giris-baslik .cap{display:block}
.ms-giris-baslik h2{margin-top:.75rem}
@media(max-width:70rem){ .ms-giris-baslik{margin-bottom:.4rem} }

/* ---------------- footer ----------------
   Ralph Lauren footer'ı ölçüldü (1512 px): dört kolon, her biri %25, üst
   kenarda ÇİZGİ YOK (ayrımı 45 px boşluk yapıyor), kolonları ayıran şey
   boşluk değil 1 px dikey çizgi. Sayfa boyunca hiç kullanılmayan dikey çizgi
   ilk kez burada devreye giriyor: footer sayfanın devamı değil kapağı.
   Ölçüler burada bilerek SABİT px: sayfanın geri kalanı vw ritminde, footer
   o ritmin dışında duruyor. */
.foot{padding:2.8rem var(--pad) 3rem; color:var(--govde); font-size:.8rem}
.foot-agi{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  /* Çizgi kolonun SAĞINDA, sonuncuda yok. */
}
.foot-kolon{padding:0 1.6rem}
.foot-kolon:first-child{padding-left:0}
.foot-kolon:not(:last-child){border-right:1px solid var(--cizgi)}
.foot-baslik{
  font-family:var(--f); font-size:.8rem; font-weight:500; letter-spacing:.06em;
  text-transform:uppercase; color:var(--murekkep); margin:0 0 1.1rem;
}
.foot-kolon ul{display:grid; gap:.62rem}
.foot-kolon li{font-size:.81rem; line-height:1.45; color:var(--govde)}
.foot-kolon a{color:var(--govde); transition:color .3s var(--e)}
.foot-kolon a:hover{color:var(--murekkep)}
.foot-satir{font-size:.81rem; line-height:1.55; color:var(--govde); max-width:34ch}
.foot-bag{
  display:inline-block; margin-top:.9rem; font-size:.75rem; font-weight:500;
  letter-spacing:.07em; text-transform:uppercase; color:var(--murekkep);
  border-bottom:1px solid var(--cizgi); padding-bottom:.22rem;
  transition:border-color .3s var(--e);
}
.foot-bag:hover{border-bottom-color:var(--murekkep)}
/* Dar ekranda dikey çizgi anlamını kaybediyor: kolonlar alt alta gelince
   çizgi ayırmıyor, altını çiziyor. İkiye, sonra teke düşüyor. */
@media(max-width:62rem){
  .foot-agi{grid-template-columns:repeat(2,minmax(0,1fr)); gap:2.2rem 0}
  .foot-kolon:nth-child(2n){border-right:0}
  .foot-kolon:nth-child(2n+1){padding-left:0}
}
@media(max-width:34rem){
  .foot-agi{grid-template-columns:minmax(0,1fr)}
  .foot-kolon{border-right:0; padding:0}
}
/* Opaklık yok: .75 ile kontrast 3,5:1'e düşüyordu. Ayrım boyutla veriliyor. */
.unvan{margin-top:2.6rem; padding-top:1.3rem; border-top:1px solid var(--cizgi-soft);
  font-size:.74rem; color:var(--soluk)}

/* ---------------- ürün föyü ---------------- */
.sheet{position:fixed; inset:0; z-index:60; background:var(--kagit);
  opacity:0; transition:opacity .4s var(--e)}
.sheet.acik{opacity:1}
.sheet[hidden]{display:none}
.sheet-scroll{height:100%; overflow-y:auto; overflow-x:hidden; overscroll-behavior:contain;
  padding:0 var(--pad) clamp(3rem,6vw,5rem)}
.sheet-close{position:fixed; top:1.05rem; right:var(--pad); z-index:62;
  display:inline-flex; align-items:center; min-height:44px;
  padding:.45rem 1rem; border:1px solid var(--cizgi); border-radius:999px;
  background:var(--kagit); font-size:.74rem}
.sheet-close:hover{border-color:var(--bordo)}

.fis-head{display:grid; gap:.9rem 5rem; grid-template-columns:minmax(0,1fr);
  padding:clamp(3.4rem,6vw,5rem) 0 clamp(1.6rem,3vw,2.4rem)}
@media(min-width:62rem){.fis-head{grid-template-columns:minmax(0,1fr) minmax(0,26rem); align-items:end}}
.fis-head h2{font-family:var(--fs); font-size:clamp(1.9rem,3.8vw,2.9rem);
  font-weight:400; letter-spacing:normal; line-height:1.14}
.fis-head .about{font-family:var(--fs); font-weight:var(--serif-agirlik);
  font-size:1.15rem; line-height:1.72; letter-spacing:.012em;
  color:var(--govde); max-width:56ch; font-optical-sizing:auto}

.mesafe{display:grid; gap:clamp(.6rem,1.4vw,1.25rem); grid-template-columns:minmax(0,1fr)}
@media(min-width:56rem){.mesafe{grid-template-columns:1.4fr 1fr 1fr}}
.mesafe figure{margin:0; display:grid; gap:.7rem; opacity:0; transform:translateY(18px)}
.mesafe figure.gorundu{opacity:1; transform:none;
  transition:opacity .75s var(--e), transform .75s var(--e)}
.mesafe figure:nth-child(2).gorundu{transition-delay:.09s}
.mesafe figure:nth-child(3).gorundu{transition-delay:.18s}
.mesafe .kutu{border-radius:var(--yuvarlak); overflow:hidden; background:var(--yuzey);
  aspect-ratio:3/4}
.mesafe figure:nth-child(n+2) .kutu{aspect-ratio:1/1}
@media(min-width:56rem){
  .mesafe{grid-auto-rows:minmax(0,34rem)}
  .mesafe figure{grid-template-rows:1fr auto}
  /* nth-child kuralı daha spesifik, burada da ezilmeli yoksa kutu hücreden taşar */
  .mesafe .kutu,
  .mesafe figure:nth-child(n+2) .kutu{aspect-ratio:auto; height:100%; min-width:0}
}
.mesafe figcaption{display:flex; gap:.55rem; align-items:baseline; padding:0 .15rem}
.mesafe .n{font-size:.68rem; font-weight:600; color:var(--bordo); letter-spacing:.1em}
.mesafe .t{font-size:.68rem; color:var(--soluk); letter-spacing:.12em; text-transform:uppercase}

.fis-body{display:grid; gap:1.6rem 5rem; grid-template-columns:minmax(0,1fr);
  padding-top:clamp(2.4rem,4.5vw,3.8rem)}
@media(min-width:62rem){.fis-body{grid-template-columns:12rem minmax(0,1fr)}}
.fis-body dl{margin:0; display:grid; grid-template-columns:minmax(0,1fr)}
@media(min-width:44rem){.fis-body dl{grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:3.5rem}}
.fis-body .sat{display:flex; justify-content:space-between; align-items:baseline; gap:1rem;
  padding:.72rem 0; border-bottom:1px solid var(--cizgi-soft)}
.fis-body dt{font-size:.74rem; color:var(--soluk); flex:none}
.fis-body dd{margin:0; font-size:.86rem; text-align:right}
/* Sistem notu: cümle olmasına rağmen GROTESK kalıyor. İki sebep: verinin
   durumu hakkında bir not, markanın sesi değil; ve 12.5px'te didone'nin ince
   çizgileri ekranda dağılıyor. */
.gecici{grid-column:1/-1; margin-top:1.3rem; font-family:var(--f);
  font-size:.78rem; color:var(--soluk)}

/* ---------------- kaydırınca beliren metin ----------------
   scroll-triggered reveal. Bölüm içinde sırayla gelir (staggered).
   Hareket az, süre uzun: metin akıyormuş gibi değil, yerine oturuyormuş gibi. */
/* Metin varsayılan olarak GÖRÜNÜR. Gizleme yalnız JS çalışıyorsa devreye girer
   (html.hareketli). JS patlarsa veya observer tetiklenmezse sayfa boş kalmaz. */
html.hareketli .yukari{opacity:0; transform:translateY(16px)}
html.hareketli .yukari.gorundu{opacity:1; transform:none;
  transition:opacity .95s var(--e), transform .95s var(--e)}

@media(prefers-reduced-motion:reduce){
  html.hareketli .yukari{opacity:1; transform:none}
  .nav a{transform:none}
  .kenar{display:none}
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.01ms!important; animation-duration:.01ms!important}
  .frame,.card,.mesafe figure{opacity:1; transform:none}
}

/* Kayma yerine sönümleme: panel yerinde durur, yalnız opaklık değişir.
   YALNIZ dar ekranda. Genişlikle sınırlanmazsa masaüstünde de uygulanıp
   satır hâlindeki menüyü tamamen görünmez yapıyor (canlı doğrulandı). */
@media(prefers-reduced-motion:reduce) and (max-width:55.99rem){
  .nav{transform:none; opacity:0}
  body.menu-acik .nav{opacity:1}
}


/* ==========================================================================
   KURUMSAL SAYFA (kurumsal.html) - belge düzeni
   Onaylanan kare: Onur, 2026-09-14. Ana sayfa fotoğraf sitesi olarak kalır,
   kurumsal metin kendi sayfasında belge gibi durur.
   Tek ızgara: solda 8.5rem etiket sütunu, sağda 46rem okuma sütunu (yaklaşık
   62 karakter). Tek istisna bant: kenardan kenara taşar.
   ========================================================================== */
.belge{padding:clamp(1.4rem,2.6vw,2.4rem) 0 clamp(3rem,5vw,5rem)}

.bolum{
  max-width:96rem; margin-inline:auto; padding-inline:var(--pad);
  display:grid; gap:0 4rem; grid-template-columns:minmax(0,1fr);
}
@media(min-width:70rem){
  .bolum{grid-template-columns:8.5rem minmax(0,46rem)}
}
.bolum > .cap{padding-top:.62rem; margin-bottom:.9rem}
/* Art arda gelen iki bölüm: kurumsalda aralarında bant var, Mastino'da yok
   ve başlıklar birbirine giriyordu. Ayraç çizgisi değil boşluk, sayfanın
   geri kalanındaki ritimle aynı. */
.bolum + .bolum{margin-top:clamp(2.8rem,5.5vw,5rem)}
@media(min-width:70rem){.bolum > .cap{margin-bottom:0}}

/* Başlık ve ANLATI metni serif (Onur, 2026-09-17). Ralph Lauren'de açıklama
   metni de başlıkla aynı ailede: LeJeune Deck, 16.8px, satır aralığı 1.75.
   Ölçülen değerler burada da kullanılıyor.
   Didone'de negatif harf aralığı YOK: o ayar grotesk için vardı, serifte
   harfleri birbirine yapıştırıyor. */
.bolum h1{font-family:var(--fs); font-size:clamp(2.1rem,3.8vw,3rem); font-weight:400;
  letter-spacing:normal; line-height:1.14}
.bolum h2{font-family:var(--fs); font-size:clamp(1.65rem,2.9vw,2.25rem); font-weight:400;
  letter-spacing:normal; line-height:1.16}
/* Gövde içi ara başlık: bölüm h2'sinden küçük, madde dt'sinden büyük.
   Üç kademe birbirine yaklaşmasın diye punto açıkça veriliyor. */
.bolum h3{font-family:var(--fs); font-size:1.28rem; font-weight:400;
  letter-spacing:normal; line-height:1.2; margin-top:2.2rem}
/* Gövde: PARAGRAF anlatıdır, serif. dt/dd başvurudur, grotesk. Sınır burası.
   Eskiden seçici `.govde > p` idi ve yalnız doğrudan çocukları yakalıyordu;
   .adim içindeki adım paragrafları grotesk kalmıştı. Aynı cinsten cümleler
   aynı sayfada iki ayrı yazı karakterindeydi, bu bir karar değil hataydı.

   Punto 16.8 DEĞİL 18.4: iki aile aynı puntoda aynı boyda görünmüyor.
   Ölçüldü, canvas TextMetrics: Bodoni Moda 16.8px'te x-yüksekliği 7.72px,
   Schibsted 17px'te 8.96px, yani serif groteskin %86'sı kadar. Üstüne teknik
   blok zaten 0.2px daha iri punto kullanıyordu; iki etki aynı yöne binince
   sayfanın ANA sesi olması gereken anlatı, başvuru listesinden küçük
   görünüyordu. Serif tarafı büyütüldü, oran %94'e çıktı.

   Genişlik 56ch: kutu 699px'ti ve ch cinsinden 67 görünüyordu ama GERÇEK
   satır 82 karakterdi. ch, "0" rakamının genişliğidir; i, l, t ve boşluk
   daha dar olduğu için aynı kutuya %15-25 fazla karakter sığıyor. Tipografi
   bandı 45-75 gerçek karakter. 56ch bunu ~65'e indiriyor. */
.govde p,.adim p{font-family:var(--fs); font-weight:var(--serif-agirlik);
  margin-top:1.05rem; font-size:1.15rem;
  line-height:1.72; letter-spacing:.012em; color:var(--govde); max-width:56ch;
  font-optical-sizing:auto}
/* Dar ekranda satır TERS yönden banttan çıkıyor: 390px'te sütun 353px ve
   18.4px puntoda satır 34 karaktere düşüyor (bant 45-75). Punto inince
   satıra daha çok karakter giriyor. 15px yerine 16px seçildi: telefonda
   satır bandının alt ucu zaten 35-45'tir ve didone'nin ince çizgileri küçük
   puntoda asıl riski taşır, birini çözerken ötekini açmamak için. */
@media(max-width:30rem){
  .govde p,.adim p,.tell-main p,.madde dd,.adim dd{font-size:1rem; line-height:1.68}
}
.govde > p:first-of-type{margin-top:1.25rem}

/* Bant: kenardan kenara çekim karesi, bölümleri o ayırır. Metnin yanına
   sıkıştırılmış küçük görsel değil; asıl varlık bu. */
.bant{margin:clamp(2.6rem,4.6vw,4.4rem) 0; aspect-ratio:2.34; background:var(--yuzey)}
.bant img{width:100%; height:100%; object-fit:cover; display:block}

/* Madde: etiket üstte, cümle altta, aralarında ince ayraç. */
.madde{margin-top:1.9rem; display:grid}
.madde > div{padding:1.15rem 0; border-top:1px solid var(--cizgi-soft)}
/* KURAL: cümle serif, etiket grotesk (Onur, 2026-09-17).
   Önceki kural "anlatı serif, teknik blok grotesk" idi ve okurken
   görünmüyordu: dt altındaki satırlar da tam cümle, onlar da okunuyor.
   Aynı işi yapan iki yüz yan yana durunca sistem okunmuyordu. Şimdi üç yüz
   üç ayrı iş yapıyor: serif okunur, grotesk taranır, mono gezinir. */
.madde dt{font-family:var(--f); font-size:.875rem; font-weight:600; margin-bottom:.35rem}
.madde dd,.adim dd{font-family:var(--fs); font-weight:var(--serif-agirlik);
  margin:0; font-size:1.15rem; line-height:1.72; letter-spacing:.012em;
  color:var(--govde); max-width:56ch; font-optical-sizing:auto}

/* Adım: belge gibi alt alta, numarayı sayaç basar. ul için kurulan
   list-style:none ol'u kapsamıyor, burada kapatılıyor. */
.adim{counter-reset:adim; list-style:none; padding:0; margin:1.9rem 0 0}
.adim li{counter-increment:adim; padding:1.5rem 0; border-top:1px solid var(--cizgi)}
/* Adım başlığı serif ve aynı ağırlıkta: alt başlıklarla (grotesk, kalın dt)
   karışmasın diye. Negatif harf aralığı kalktı, Didone'de harfleri yapıştırıyordu. */
.adim h3{font-family:var(--fs); font-size:1.28rem; font-weight:400; letter-spacing:normal}
.adim h3::before{content:counter(adim) ". "; color:var(--soluk)}
/* Punto ve satır aralığı yukarıdaki anlatı kuralından gelir; burada yalnız
   üst boşluk kalıyor. Eskiden 1.0625rem yazıyordu ve Biz Kimiz'in
   paragraflarından küçük kalıyordu. */
.adim > li > p{margin-top:.75rem}
.adim dl{margin:1rem 0 0; display:grid; gap:1.15rem}
.adim dt{font-size:.875rem; font-weight:600; margin-bottom:.3rem}
/* .adim dd yukarıdaki ortak kuralla birlikte tanımlı. */

/* ---------------- künye ----------------
   "Parçanı gönder" bloğunun yerine geçti (Onur, 2026-09-14). Satır satır,
   süs yok: adres, telefon, e-posta. Hem kurumsal sayfada hem ana sayfada. */
/* Künye YATAY. Eskiden üç satırlık bir tabloydu ve ekranın yarısını yiyordu;
   üç kalem yan yana konunca aynı bilgi bir şeride sığıyor. */
.kunye{margin-top:clamp(2.2rem,4vw,3.4rem); padding:clamp(1.3rem,2.2vw,1.9rem) var(--pad) 0;
  border-top:1px solid var(--cizgi);
  display:grid; gap:clamp(1rem,2.4vw,2.4rem); align-items:start;
  grid-template-columns:minmax(0,1fr)}
.kunye > .cap{padding-top:.2rem}
.kunye dl{margin:0; display:grid; gap:clamp(1rem,2.6vw,2.6rem);
  grid-template-columns:minmax(0,1fr)}
@media(min-width:46rem){
  .kunye{grid-template-columns:8.5rem minmax(0,1fr)}
  .kunye dl{grid-template-columns:repeat(3,minmax(0,1fr))}
}
.kunye dl > div{display:block; padding:0; border:0}
.kunye dt{font-family:var(--fm); font-size:.6rem; letter-spacing:.09em;
  text-transform:uppercase; color:var(--soluk)}
.kunye dd{margin:.45rem 0 0; font-size:.95rem; line-height:1.5}
.kunye a{border-bottom:1px solid var(--cizgi)}
.kunye a:hover{border-bottom-color:var(--murekkep)}

/* ---------------- dil düğmesi ----------------
   Üst şeritte, menünün yanında. İki durumlu: seçili olan mürekkep, öteki
   soluk. Dokunma hedefi 44 px'e ::after ile çıkıyor. */
.dil{display:flex; align-items:center; gap:.15rem; flex:none}
/* [hidden] UA kuralıdır, yukarıdaki display:flex onu ezer. Tek dil kilidinde
   seçicinin gerçekten kaybolması için açık kural gerekiyor. */
.dil[hidden]{display:none}
.dil button{position:relative; padding:.3rem .42rem; font-size:.68rem; font-weight:500;
  letter-spacing:.1em; color:var(--soluk); transition:color .3s var(--e)}
.dil button::after{content:""; position:absolute; inset:-11px -4px}
.dil button:hover{color:var(--murekkep)}
.dil button[aria-pressed="true"]{color:var(--murekkep)}
.dil .ayrac{color:var(--cizgi); font-size:.68rem; user-select:none}
/* Dar ekranda şerit üç kontrolü taşıyor: logo, dil, menü. Dil düğmesi
   eklenince "B.K.M. TEKSTİL" 320 px'te üç satıra kırılıyordu. Aralıklar ve
   dil düğmesinin iç boşluğu daraltılıyor, ayraç kalkıyor; dokunma hedefi
   ::after sayesinde 44 px'in altına düşmüyor. */
@media(max-width:34rem){
  .bar{gap:.7rem}
  .dil{gap:.05rem}
  .dil button{padding:.3rem .22rem}
  .dil .ayrac{display:none}
  .lettering i{display:none}
}