/* ==========================================================================
   MUSABEY — anasayfa prototipi
   Siyah çatı, markaların rengi. Üç dil hedefli (TR/EN/AR) olduğu için yön
   bağımlı hiçbir özellik kullanılmıyor: margin-left/right yerine
   margin-inline, left/right yerine inset-inline. RTL'de kendiliğinden döner.
   ========================================================================== */

/* --- 1. Değişkenler ------------------------------------------------------ */

:root {
  /* Çatı marka — siyah. Düz #000 değil; dokusu olan bir siyah. */
  --siyah:        #000000;
  --zemin:        #08080a;
  --cizgi:        rgba(255, 255, 255, .13);
  --cizgi-sonuk:  rgba(255, 255, 255, .07);

  --metin:        #f4f3f0;   /* kırık beyaz — saf beyaz siyah üstünde sert durur */
  --metin-orta:   rgba(244, 243, 240, .62);
  --metin-sonuk:  rgba(244, 243, 240, .38);

  /* Zemin rengi imza harekette JS ile değişiyor. Varsayılan siyah. */
  --sayfa-zemin:  #000000;
  --sayfa-vurgu:  #f4f3f0;

  /* Referans sitelerde tipografi iki uçtan biri: ya 300 weight'te çok iri,
     ya 700'de çok sıkı. "Kurumsal 600 semibold" hiçbirinde yok — ortada
     durmak sıradan durmak. Biz sıkı taraftayız. */
  --tipo-baslik: "Bricolage Grotesque", "IBM Plex Sans Arabic", system-ui, sans-serif;
  --tipo-metin:  "Instrument Sans", "IBM Plex Sans Arabic", system-ui, sans-serif;
  --tipo-vurgu:  "Instrument Serif", Georgia, "Times New Roman", serif;

  /* Açık zemin saf beyaz DEĞİL. Dört referansın dördünde de kırık/sıcak
     kemik beyazı var. Saf beyaz ekranda sert ve ucuz duruyor. */
  --kemik:       #f4f1ea;
  --kemik-koyu:  #e6e1d6;

  /* Kenar boşluğu tek yerden. Sayfadaki her hizalama buna dayanıyor. */
  --kenar:  clamp(1.25rem, 5vw, 5.5rem);
  --olcek:  clamp(5rem, 12vh, 10rem);   /* bölümler arası dikey nefes */

  --gecis:  cubic-bezier(.16, .84, .34, 1);

  /* Marka görsellerinin görünürlüğü. Tek düğme — buradan kıs, buradan aç. */
  --gorsel-opak: .45;
}

/* --- 2. Sıfırlama ve zemin ---------------------------------------------- */

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--sayfa-zemin);
  color: var(--metin);
  font-family: var(--tipo-metin);
  font-size: clamp(.95rem, .3vw + .9rem, 1.0625rem);
  line-height: 1.62;
  font-feature-settings: "kern" 1, "liga" 1;
  -webkit-font-smoothing: antialiased;
  text-wrap: pretty;          /* tek kelimelik yetim satırları önlüyor */
  overflow-x: hidden;
  transition: background-color .9s var(--gecis);
}

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

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

::selection { background: var(--sayfa-vurgu); color: #000; }

/* --- 3. Logo ------------------------------------------------------------- *
 * Müşterinin PDF'inden çıkarılan kelime marka. Tek <symbol>, üç ölçü.
 * En/boy oranı 239.40 / 27.99 = 8.55 — yükseklik genişlikten geliyor.      */

.logo {
  display: block;
  height: auto;
  aspect-ratio: 239.4 / 27.99;
  fill: currentColor;
}

.logo--menu { width: clamp(6.25rem, 8.5vw, 8rem); }
.logo--hero { width: min(86vw, 56rem); }
.logo--alt  { width: clamp(9rem, 17vw, 12.5rem); }

/* --- 4. Tipografi -------------------------------------------------------- */

h1, h2, h3, h4 {
  font-family: var(--tipo-baslik);
  font-weight: 600;
  letter-spacing: -.028em;
  line-height: 1.02;
  margin: 0;
  text-wrap: balance;
}

.buyuk { font-size: clamp(1.9rem, 5.2vw, 4.25rem); }

.etiket {
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--metin-sonuk);
  margin: 0;
}

.giris {
  font-size: clamp(1.0625rem, 1.1vw + .85rem, 1.4375rem);
  line-height: 1.52;
  color: var(--metin-orta);
  letter-spacing: -.012em;
  max-width: 46ch;
  margin: 0;
}

.giris strong { color: var(--metin); font-weight: 600; }

/* --- 5. TÜRKÇE TİPOGRAFİ TUZAĞI — SİLME --------------------------------- *
 * Satır-açılma animasyonu overflow:hidden ile yapılıyor. Satır yüksekliği
 * sıkıyken bu maske noktalı İ'nin noktasını üstten, kuyruklu Ş'nin kuyruğunu
 * alttan kırpıyor. İngilizce metinde hiç görünmüyor. Padding maskeyi
 * büyütüyor, negatif margin düzeni koruyor.                                */

/* .satir taşıyan kap kendi biçimlendirme bağlamını kurmalı. Kurmazsa
   .satir'in negatif kenar boşlukları kabın dışına taşıyor (margin collapse)
   ve bir sonraki satırla çakışıyor — ölçüldü: h1 604px'te bitiyor, alt
   satır 596px'te başlıyordu. */
h1:has(> .satir),
h2:has(> .satir),
h3:has(> .satir),
p:has(> .satir),
div:has(> .satir) { display: flow-root; }

.satir {
  display: block;
  overflow: hidden;
  padding-block-start: .20em;  margin-block-start: -.20em;
  padding-block-end:   .14em;  margin-block-end:   -.14em;
}

.satir > span { display: block; }

.js .satir > span {
  transform: translateY(105%);
  transition: transform 1.05s var(--gecis);
}

.js .gorundu .satir > span { transform: translateY(0); }
.satir:nth-child(2) > span { transition-delay: .09s; }
.satir:nth-child(3) > span { transition-delay: .18s; }

/* --- 6. Düzen ------------------------------------------------------------ */

.kabuk { padding-inline: var(--kenar); }

.bolum { padding-block: var(--olcek); position: relative; }

.izgara {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(1.25rem, 2.5vw, 2.75rem);
}

/* Genel açılma: alttan yükselme. Tek bir gözlemci yönetiyor.
   DİKKAT: gizleme yalnızca .js altında. JS yüklenmezse ya da hata verirse
   sayfa boş kalmasın — kurumsal sitede en pahalı hata bu. <head> içindeki
   tek satırlık betik .js sınıfını ekliyor. */
.js .ac {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .9s var(--gecis), transform .9s var(--gecis);
}
.js .ac.gorundu { opacity: 1; transform: none; }

/* --- 7. Menü — yüzen hap ----------------------------------------------- *
 * Tam genişlikte şerit değil. Referansların üçünde de menü sayfaya yapışan
 * bir çubuk değil, ekranda duran ayrı bir nesne.                          */

.hap {
  position: fixed;
  inset-block-start: clamp(.9rem, 2.2vh, 1.6rem);
  /* ÖLÇÜLMÜŞ HATA — burada `inset-inline-start: 50%` + `translateX(-50%)`
     vardı. Sabit konumlu bir öğe sola %50'den başlayınca kullanılabilir
     genişliği de ekranın yarısına düşüyor: 375 piksellik telefonda hap
     187 pikselle sınırlı kaldı, içindekiler esnek kutuda ezildi —
     MUSABEY logosu 116 yerine 40 piksel, menü düğmesi 15x7 piksellik bir
     dokunma hedefi oldu. Masaüstünde (720 piksel pay) hiç görünmüyordu.
     İki kenardan sıfır + otomatik kenar boşluğu ortalıyor ama genişliği
     kısmıyor. */
  inset-inline: 0;
  margin-inline: auto;
  inline-size: max-content;
  max-inline-size: calc(100% - 2 * var(--kenar));
  z-index: 90;
  display: flex;
  align-items: center;
  gap: clamp(1.1rem, 2.6vw, 2.5rem);
  padding: .5rem .5rem .5rem 1.3rem;
  border-radius: 999px;
  background: rgba(244, 241, 234, .90);
  -webkit-backdrop-filter: blur(20px) saturate(1.3);
          backdrop-filter: blur(20px) saturate(1.3);
  color: #14140f;
  box-shadow: 0 14px 40px -16px rgba(0, 0, 0, .75),
              0 1px 0 rgba(255, 255, 255, .35) inset;
  transition: transform .5s var(--gecis), opacity .4s var(--gecis);
}

.hap--gizli {
  transform: translateY(-160%);
  opacity: 0;
}

.hap__menu {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  font-size: .8125rem;
  font-weight: 500;
  color: inherit;
  cursor: pointer;
}
/* Parmak hedefi çizginin kendisi kadar küçük olmasın: ikon 15 piksel ama
   basılabilir alan 44. Negatif kenar boşluğu hapı büyütmüyor. */
.hap__menu {
  min-inline-size: 44px;
  min-block-size: 44px;
  justify-content: center;
  margin-block: -.6rem;
}
@media (min-width: 561px) {
  .hap__menu { justify-content: flex-start; min-inline-size: 0; }
}

.hap__cizgiler { display: grid; gap: 4px; }
.hap__cizgiler i {
  display: block;
  width: 15px;
  height: 1.5px;
  background: currentColor;
  transition: transform .3s var(--gecis);
}
.hap__menu:hover .hap__cizgiler i:first-child { transform: translateX(2px); }

.hap__marka { display: flex; align-items: center; }
.logo--hap { width: clamp(7.25rem, 11vw, 10rem); color: #14140f; }

/* --- Dil geçişi ---------------------------------------------------------- *
 * Açılır liste DEĞİL: iki dil var, düğme karşı dilin adını gösteriyor.
 * Hap dar ekranda zaten üç öğeyle dolu; dördüncü bir liste sığmıyordu.
 * Küçük ama dokunma hedefi tam ölçü.                                       */

.hap__dil {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-inline-size: 38px;
  min-block-size: 44px;
  margin-inline: -.35rem;      /* hapı şişirmesin */
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .06em;
  color: rgba(20, 20, 15, .45);
  transition: color .3s var(--gecis);
}
.hap__dil:hover { color: #14140f; }
.hap--acik .hap__dil { color: rgba(244, 241, 234, .5); }
.hap--acik .hap__dil:hover { color: var(--kemik); }

.hap__cagri {
  display: inline-flex;
  align-items: center;
  min-block-size: 44px;
  padding: .6rem 1.15rem;
  border-radius: 999px;
  background: #14140f;
  color: var(--kemik);
  font-size: .8125rem;
  font-weight: 500;
  letter-spacing: .005em;
  transition: background-color .3s var(--gecis), transform .3s var(--gecis);
}
.hap__cagri:hover { background: #2c2c24; transform: translateY(-1px); }

@media (max-width: 560px) {
  .hap { gap: .6rem; padding: .4rem .4rem .4rem .5rem; }
  .hap__menu span:not(.hap__cizgiler) { display: none; }
}

/* --- 8. Hero — mozaik -------------------------------------------------- *
 * İlk ekranda grubun kendisi duruyor, logosu değil. Ekran baştan sona
 * boşluksuz bir mozaik; her karo bir markanın dünyası. Başlık de bir karo —
 * üstüne binen katman değil, mozaiğin kemik rengindeki parçası. Referanslar
 * tek dev fotoğraf kullanıyor; kırık ızgara bizim ayrıldığımız yer.        */

.mozaik {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: repeat(6, 1fr);
  block-size: 100svh;
  min-block-size: 34rem;
  background: var(--siyah);
}

.karo {
  position: relative;
  overflow: hidden;
  min-inline-size: 0;
  min-block-size: 0;
  background: #0a0a0b;   /* görsel gelmeden karo renk bloğu gibi durmasın */
}

/* Mubayas mozaiğin en görünür karosunda: söz karosunun hemen altındaki
   geniş yatay alan. Franchise verilen marka o; ilk ekranda öne çıkması
   gereken de o. Dış Ticaret onun eski yerine, sol alta geçti. */
.karo--su      { grid-area: 1 / 1  / 4 / 4;  }
.karo--ticaret { grid-area: 4 / 1  / 7 / 4;  }
.karo--soz     { grid-area: 1 / 4  / 5 / 10; }
.karo--giyim   { grid-area: 5 / 4  / 7 / 10; }
.karo--promo   { grid-area: 1 / 10 / 3 / 13; }
.karo--yasam   { grid-area: 3 / 10 / 7 / 13; }

/* Duran karo SÖNÜK. Fotoğrafı kaybetmiyoruz, sırayı logoya veriyoruz —
   net fotoğraf üstünde logo okunmuyordu. Öne çıkan karo tam renkli ve
   yavaşça içeri yaklaşıyor: yaklaşma transition'ın kendisi, ayrı bir
   animasyon döngüsü yok. */
.karo > img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  transform: scale(1.02);
  filter: saturate(.55) brightness(.58) contrast(1.02);
  transition: transform 3.4s var(--gecis), filter 1.1s var(--gecis);
}

.karo.etkin > img,
.karo:hover > img,
.karo:focus-within > img {
  transform: scale(1.09);
  filter: saturate(1) brightness(1) contrast(1);
}

/* Sönük duruşta markanın rengiyle hafif bir veil — karolar renksiz gri
   yığını olmasın, hangi dünyaya ait oldukları dururken de sezilsin.
   Öne çıkınca kalkıyor. */
.karo:has(> img)::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--karo-vurgu, transparent);
  mix-blend-mode: soft-light;
  opacity: .22;   /* .5 çok kuvvetliydi: karolar fotoğraf değil düz renk bloğu oluyordu */
  transition: opacity 1.1s var(--gecis);
  pointer-events: none;
  z-index: 1;
}
.karo.etkin::before,
.karo:hover::before,
.karo:focus-within::before { opacity: 0; }

/* Karonun altında markası. Hep görünür ama kısık; üzerine gelince açılıyor.
   Etiketi gizleyip yalnızca hover'da göstermek bilmeceye çeviriyor. */
/* Logo artık karonun ana katmanı, fotoğrafın üstündeki not değil.
   Bu yüzden hep tam görünür; öne çıkan karoda biraz büyüyor. */
.karo__ad {
  position: absolute;
  inset-block-end: clamp(.9rem, 2vw, 1.4rem);
  inset-inline-start: clamp(.9rem, 2vw, 1.4rem);
  display: block;
  opacity: .88;
  transform-origin: left bottom;
  transition: opacity .5s var(--gecis), transform .8s var(--gecis);
  pointer-events: none;
  z-index: 2;
}
[dir="rtl"] .karo__ad { transform-origin: right bottom; }

.karo.etkin .karo__ad,
.karo:hover .karo__ad,
.karo:focus-within .karo__ad { opacity: 1; transform: scale(1.10); }

.karo__ad img { block-size: clamp(1.2rem, 1.9vw, 1.85rem); inline-size: auto; }
.karo__ad img.karo__kare { block-size: clamp(2.6rem, 3.9vw, 3.7rem); }

.karo__ad--yazi {
  font-family: var(--tipo-metin);
  font-size: clamp(.9375rem, 1.15vw, 1.125rem);
  font-weight: 500;
  letter-spacing: -.01em;
  color: var(--metin);
}

/* Karonun ayağına perde. Ölçüldü: Mubayas'ın parlak mağaza zemininde ve
   Platinpromo'nun açık yerlerinde logo tamamen kayboluyordu. Perde karonun
   kendi ::after'ı — etiketin içine koyunca görselin arkasında kalıyordu. */
.karo:has(> img)::after {
  content: "";
  position: absolute;
  inset-block-end: 0;
  inset-inline: 0;
  block-size: 48%;
  background: linear-gradient(to top,
    rgba(0, 0, 0, .82) 0%, rgba(0, 0, 0, .36) 46%, transparent 100%);
  transition: opacity 1.1s var(--gecis);
  pointer-events: none;
  z-index: 1;
}
.karo.etkin::after, .karo:hover::after { opacity: .72; }
.karo__ad { z-index: 2; }
.fis { z-index: 3; }

/* Görselin üstünde yüzen küçük fiş — referanslarda sık geçen bir hareket.
   Burada dekor değil: franchise'ın açık olduğunu ilk ekranda söylüyor. */
.fis {
  position: absolute;
  inset-block-start: clamp(.9rem, 2vw, 1.4rem);
  inset-inline-start: clamp(.9rem, 2vw, 1.4rem);
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .5rem .9rem;
  border-radius: 999px;
  background: rgba(244, 241, 234, .93);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  color: #14140f;
  font-family: var(--tipo-metin);
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: -.005em;
  transition: transform .3s var(--gecis), background-color .3s var(--gecis);
}
.fis::before {
  content: "";
  inline-size: .4rem;
  block-size: .4rem;
  border-radius: 50%;
  background: #c8352f;
}
.fis:hover { transform: translateY(-2px); background: #fff; }

/* --- Söz karosu — mozaiğin kemik parçası -------------------------------- */

.karo--soz {
  background: var(--kemik);
  color: #14140f;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: clamp(1.1rem, 2.4vh, 1.9rem);
  padding: clamp(5.5rem, 11vh, 8rem) clamp(1.6rem, 3.4vw, 3.5rem)
           clamp(1.8rem, 4vh, 3rem);
}

.soz__baslik {
  margin: 0;
  font-family: var(--tipo-baslik);
  font-size: clamp(2.4rem, 5.4vw, 5.25rem);
  font-weight: 700;
  line-height: .96;
  letter-spacing: -.038em;   /* referanslarda ölçülen sıkılık */
  color: #14140f;
}

.soz__metin {
  margin: 0;
  max-inline-size: 42ch;
  font-size: clamp(.9375rem, .45vw + .85rem, 1.125rem);
  line-height: 1.5;
  letter-spacing: -.008em;
  color: rgba(20, 20, 15, .66);
}

.soz__bag {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  align-self: flex-start;
  font-size: .875rem;
  font-weight: 500;
  color: #14140f;
  border-block-end: 1px solid rgba(20, 20, 15, .28);
  padding-block-end: .3rem;
  transition: gap .3s var(--gecis), border-color .3s var(--gecis);
}
.soz__bag svg {
  inline-size: 1.05rem;
  block-size: 1.05rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.soz__bag:hover { gap: .95rem; border-color: #14140f; }

/* --- Açılış: tek orkestre edilmiş an ------------------------------------ */

.js .mozaik .karo {
  clip-path: inset(0 0 100% 0);
  transition: clip-path 1.05s var(--gecis);
}
.js .mozaik.geldi .karo { clip-path: inset(0 0 0 0); }

.js .mozaik .karo--soz     { transition-delay: .00s; }
.js .mozaik .karo--giyim   { transition-delay: .08s; }
.js .mozaik .karo--su      { transition-delay: .17s; }
.js .mozaik .karo--yasam   { transition-delay: .24s; }
.js .mozaik .karo--promo   { transition-delay: .30s; }
.js .mozaik .karo--ticaret { transition-delay: .36s; }

/* --- Dar ekran: mozaik dikeye dönüyor ---------------------------------- */

@media (max-width: 900px) {
  .mozaik {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto 52vw repeat(2, 38vw);
    block-size: auto;
    min-block-size: 100svh;
  }
  .karo--soz     { grid-area: 1 / 1 / 2 / 3; }
  .karo--giyim   { grid-area: 2 / 1 / 3 / 3; }   /* Mubayas tam genişlik */
  .karo--su      { grid-area: 3 / 1 / 4 / 2; }
  .karo--yasam   { grid-area: 3 / 2 / 4 / 3; }
  .karo--promo   { grid-area: 4 / 1 / 5 / 2; }
  .karo--ticaret { grid-area: 4 / 2 / 5 / 3; }

  .karo--soz { padding-block-start: clamp(6rem, 16vh, 9rem); }
}

@media (prefers-reduced-motion: reduce) {
  .js .mozaik .karo { clip-path: none; }
  /* Döngü çalışmıyor; karolar tek başına okunabilir kalsın */
  .karo > img { filter: saturate(.7) brightness(.68); transform: scale(1.02); }
  .karo:has(> img)::before { opacity: .3; }
}

/* --- 9. Grup sözü — sayfanın ilk açık yüzeyi ---------------------------- */

.soz {
  background: var(--kemik);
  color: #14140f;
  padding-block: clamp(6rem, 15vh, 12rem);
}
.soz .soz__sira {
  color: rgba(20, 20, 15, .38);
  border-block-end-color: rgba(20, 20, 15, .16);
}

/* Numara gerçekten sıra olduğu için var: sayfa 01 grup, 02 markalar,
   03 franchise diye ilerliyor. Süs olsaydı koymazdık. */
.soz__sira {
  grid-column: 1 / -1;
  margin: 0 0 clamp(2rem, 5vh, 3.5rem);
  font-family: var(--tipo-metin);
  font-size: .8125rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--metin-sonuk);
  padding-block-end: .9rem;
  border-block-end: 1px solid var(--cizgi-sonuk);
}

.soz__dev {
  grid-column: 1 / span 7;
  margin: 0;
  font-family: var(--tipo-baslik);
  font-size: clamp(2.1rem, 5.2vw, 4.75rem);
  font-weight: 700;
  line-height: .98;
  letter-spacing: -.038em;
  color: inherit;
}

.soz__govde {
  grid-column: 8 / -1;
  align-self: end;
  display: grid;
  gap: 1.1rem;
}
.soz__govde p {
  margin: 0;
  max-inline-size: 44ch;
  font-size: clamp(.9375rem, .45vw + .85rem, 1.0625rem);
  line-height: 1.62;
  letter-spacing: -.008em;
  color: rgba(20, 20, 15, .64);
}

/* Sayfanın tek "insan eli" dokunuşu. İkinci bir yerde kullanma. */
/* Başlıkla aynı hizada. Önce girintiliydi — süs olsun diye; ama hiçbir
   şeye yaslanmadığı için dengesiz duruyordu. Şimdi başlığın kapanışı gibi
   okunuyor. */
.soz__not {
  grid-column: 1 / span 7;
  margin: clamp(2.25rem, 5vh, 3.5rem) 0 0;
  font-family: var(--tipo-vurgu);
  font-style: italic;
  font-size: clamp(1.5rem, 3.2vw, 2.75rem);
  line-height: 1.16;
  letter-spacing: -.015em;
  color: rgba(20, 20, 15, .46);
}

@media (max-width: 900px) {
  .soz__dev, .soz__govde { grid-column: 1 / -1; }
  .soz__govde { margin-block-start: 2rem; }
}

/* --- 10. İMZA HAREKET — grup markaları ---------------------------------- *
 * Sayfa zemini marka bölümünde o markanın rengine kayıyor, bölüm bitince
 * siyaha dönüyor. "Tek çatı, çok marka" fikrini yazıyla anlatmak yerine
 * sayfanın kendisine yaptırıyoruz.                                        */

.markalar { position: relative; }

/* --- Markalar arası rehber ---------------------------------------------- *
 * Sağ kenarda, dikey. Hangi markada olduğunu ve geçişin nerede olduğunu
 * gösteriyor; bölümler arka arkaya akarken yön duygusu veriyor.           */

/* float + sticky öngörülemez çıktı: rehber metnin üstüne biniyordu.
   Sabit konum, yalnızca marka bölümü ekrandayken görünüyor. */
.rehber {
  position: fixed;
  inset-block-start: 50%;
  inset-inline-end: var(--kenar);
  transform: translateY(-50%);
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 1.1rem;
  opacity: 0;
  visibility: hidden;
  transition: opacity .5s var(--gecis), visibility .5s;
  pointer-events: none;
}
.rehber--gorunur { opacity: 1; visibility: visible; }

.rehber__ray {
  position: relative;
  inline-size: 1px;
  block-size: 8.5rem;
  background: rgba(255, 255, 255, .16);
  flex: none;
}
.rehber__ray i {
  position: absolute;
  inset-inline: 0;
  inset-block-start: 0;
  block-size: 20%;
  background: var(--sayfa-vurgu);
  transform: translateY(var(--rehber-ilerleme, 0%));
  transition: transform .55s var(--gecis), background-color .9s var(--gecis);
}

.rehber__liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: .55rem;
  justify-items: end;
  text-align: end;
  pointer-events: auto;
}

.rehber__liste a {
  display: block;
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: -.005em;
  color: rgba(244, 243, 240, .32);
  transition: color .45s var(--gecis), transform .45s var(--gecis);
}
.rehber__liste a:hover { color: rgba(244, 243, 240, .7); }

.rehber__liste a.etkin {
  color: var(--metin);
  transform: translateX(-.4rem);
}
[dir="rtl"] .rehber__liste a.etkin { transform: translateX(.35rem); }

/* Dar ekranda kenarda yer yok — rehber gizleniyor, bölümler zaten
   tek tek tam ekran geliyor. */
@media (max-width: 1100px) { .rehber { display: none; } }
@media (prefers-reduced-motion: reduce) { .rehber__ray i { transition: none; } }


.markalar__bas { padding-block: var(--olcek) clamp(2rem, 5vh, 3.5rem); }
.markalar__basIc { grid-column: 1 / -1; }
.markalar__basIc h2 { margin-block-start: 1.6rem; }

.marka {
  position: relative;
  min-height: 92svh;
  display: flex;
  align-items: center;
  border-block-start: 1px solid var(--cizgi-sonuk);
  padding-block: clamp(3.5rem, 9vh, 7rem);
  overflow: hidden;          /* parallax payı dışarı taşmasın */
}

/* --- GEÇİŞ: yığın ------------------------------------------------------- *
 * Marka bölümleri arka arkaya akmıyor; her biri ekrana yapışıyor ve sonraki
 * üstüne KAYARAK biniyor. Renk değişimi artık solma değil fiziksel bir olay.
 * Gelen bölümün üst köşeleri dev yarıçapla yuvarlak — Y-Vision'ın kubbe
 * geçişi (bkz. [[fikr-tasarim-referanslari]]).
 *
 * Yığınlanınca her bölümün KENDİ zemini olmalı, yoksa altındaki görünür.
 * Renk `--marka-zemin` olarak JS'ten geliyor (data-zemin'den).
 * Köşe kavisinden altındaki bölümün rengi sızıyor — geçişi görünür kılan
 * asıl şey o.
 *
 * Dar ekranda kapalı: içerik ekrandan uzun olduğunda yapışkan bölüm
 * okunamaz hâle geliyor.                                                  */

@media (min-width: 901px) {
  .marka {
    position: sticky;
    inset-block-start: 0;
    min-height: 100svh;
    border-block-start: 0;
    background: var(--marka-zemin, var(--siyah));
    border-start-start-radius: clamp(1.5rem, 3.2vw, 3.25rem);
    border-start-end-radius: clamp(1.5rem, 3.2vw, 3.25rem);
    box-shadow: 0 -30px 60px -30px rgba(0, 0, 0, .55);
  }

  /* Yığının üstünü kapatan bölüm de aynı kavisle gelsin, yoksa son marka
     düz bir kenarla kesiliyor. */
  .grup {
    position: relative;
    z-index: 2;
    border-start-start-radius: clamp(1.5rem, 3.2vw, 3.25rem);
    border-start-end-radius: clamp(1.5rem, 3.2vw, 3.25rem);
    box-shadow: 0 -30px 60px -30px rgba(0, 0, 0, .55);
  }
}

/* --- Marka görseli ------------------------------------------------------ *
 * Görsel kısık bir opaklıkta duruyor ve ALTINDA sayfanın marka rengi var.
 * Yani görseli ayrıca renklendirmiyoruz — zemin rengi görselin şeffaflığından
 * geçip onu kendiliğinden markanın tonuna boyuyor. Bölüm değişince renk
 * kayıyor, görselin tonu da onunla kayıyor.
 * GÖRSELLER YER TUTUCU — üretilmiş, müşterinin kendi çekimiyle değişecek.  */

.marka__gorsel {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.marka__gorsel img {
  width: 100%;
  height: 118%;              /* %18 pay: parallax bu payın içinde geziyor */
  margin-block-start: -9%;
  object-fit: cover;
  opacity: var(--gorsel-opak);
  transform: translate3d(0, var(--gorsel-kaydir, 0px), 0);
}

/* Okunabilirlik perdesi. Metin hangi tarafta duruyorsa orası daha koyu;
   RTL'de yön çevriliyor. Üst/alt karartma bölümler arası geçişi yumuşatıyor.
   Ölçüldü: alt karartma %26'dan başlayınca Platinlife'ın konusu (kadrajın
   alt-sağında) tamamen eziliyordu. Net bant %18–%82 arasına genişletildi. */
.marka__gorsel::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom,
      rgba(0, 0, 0, .80) 0%, rgba(0, 0, 0, .20) 18%,
      rgba(0, 0, 0, .20) 82%, rgba(0, 0, 0, .70) 100%),
    linear-gradient(to right,
      rgba(0, 0, 0, .72) 0%, rgba(0, 0, 0, .40) 48%, rgba(0, 0, 0, .10) 100%);
}
[dir="rtl"] .marka__gorsel::after {
  background:
    linear-gradient(to bottom,
      rgba(0, 0, 0, .80) 0%, rgba(0, 0, 0, .20) 18%,
      rgba(0, 0, 0, .20) 82%, rgba(0, 0, 0, .70) 100%),
    linear-gradient(to left,
      rgba(0, 0, 0, .72) 0%, rgba(0, 0, 0, .40) 48%, rgba(0, 0, 0, .10) 100%);
}

/* Iki sutun ustten hizali: sol sutunun isareti ile sag sutunun ilk satiri
   ayni cizgide basliyor. Ortadan hizalayinca sag sutun markanin adindan
   belirgin sekilde yukarida kaliyor ve blok dagilmis duruyor. */
.marka__ic {
  position: relative;        /* görselin üstünde kalsın */
  z-index: 1;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(1.25rem, 2.5vw, 2.75rem);
  align-items: start;
}

.marka__sol { grid-column: 1 / span 6; }
.marka__sag { grid-column: 8 / -1; }

/* Yer tutucu marka işaretleri. Gerçek logolar gelince bu SVG'ler değişecek;
   ölçü ve hizalama aynı kalabilir. */
.marka__mark {
  width: clamp(2.5rem, 4vw, 3.6rem);
  height: auto;
  margin-block-end: clamp(1.4rem, 3vh, 2.1rem);
  fill: none;
  stroke: var(--sayfa-vurgu);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke .9s var(--gecis);
  overflow: visible;
}

/* Gerçek marka logoları. Yazı adının YERİNE geçiyorlar, o yüzden eski
   .marka__ad kadar ağır okunmaları gerekiyor — ölçü yüksekliğe bağlı,
   çünkü logoların en/boy oranları çok farklı (Platinwater 4.8:1,
   Mubayas 1.35:1). Koyu zemin sürümleri kullanılıyor: siyah öğeler siyah
   sitede kayboluyordu. Bkz. arac/koyu-surum.py */
/* Logo bir <h3>'un icinde ve alt metni marka adini tasiyor. Yoksa marka
   adlari sayfada yalnizca gorsel olarak var oluyor; Google da ekran
   okuyucu da goremiyor. width/height nitelikleri yer ayirtiyor ki
   yuklenirken sayfa ziplamasin — oran CSS'ten geliyor. */
.marka__ad-logo { margin: 0; line-height: 0; }

.marka__logo {
  height: clamp(3.2rem, 5.6vw, 5.2rem);
  width: auto;
  max-width: 100%;
}

/* Mubayas yatay değil, üst üste kilitli bir logo — aynı yükseklikte
   diğerlerinin yanında cılız kalıyor, bu yüzden ayrı ölçü. */
.marka__logo--kare { height: clamp(5.5rem, 9vw, 8.5rem); }

/* Ölçüldü: 6.4vw'de PLATINWATER sol sütunu aşıp sağdaki künyenin üstüne
   biniyordu. En uzun ad 11 karakter; 4.3vw o adı 6 sütuna sığdırıyor.
   text-transform YOK: adlar HTML'de zaten büyük harfli, çünkü lang="tr"
   altında uppercase "Platinwater"ı "PLATİNWATER" yapıyor. */
.marka__ad {
  font-family: var(--tipo-baslik);
  font-weight: 800;
  font-stretch: 125%;
  font-size: clamp(1.75rem, 4.3vw, 3.85rem);
  line-height: .9;
  letter-spacing: -.02em;
  overflow-wrap: normal;
}

.marka__slogan {
  font-size: .6875rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--sayfa-vurgu);
  margin-block-start: 1.4rem;
  display: flex;
  align-items: center;
  gap: .7rem;
  transition: color .9s var(--gecis);
}
.marka__slogan::before {
  content: "";
  width: clamp(1.4rem, 3vw, 2.4rem);
  height: 1px;
  background: currentColor;
  flex: none;
}

.marka__metin { color: var(--metin-orta); margin: 0; }
.marka__metin strong { color: var(--metin); font-weight: 600; }

/* Künye satırları sayı taşımıyor — "pro" duran şey rakam değil, kapsam. */
.marka__ozellikler {
  list-style: none;
  margin: clamp(1.75rem, 3.8vh, 2.6rem) 0 0;
  padding: 0;
}
.marka__ozellikler li {
  display: flex;
  align-items: center;
  gap: .85rem;
  padding-block: .85rem;
  border-block-start: 1px solid var(--cizgi-sonuk);
  font-size: .8125rem;
  letter-spacing: .01em;
  color: var(--metin-orta);
}
.marka__ozellikler li:last-child {
  border-block-end: 1px solid var(--cizgi-sonuk);
}
.marka__ozellikler li::before {
  content: "";
  width: .3rem;
  height: .3rem;
  border-radius: 50%;
  background: var(--sayfa-vurgu);
  flex: none;
  transition: background-color .9s var(--gecis);
}

/* Müşterinin gerçek fotoğrafları parlak (ortalama 111-126); üretilmiş
   karanlık görsellerin beklentisi 23-53 idi. Tonlamayla bir miktar
   indirildi ama zorlamak fotoğrafı çamurlaştırıyor. Onun yerine bu iki
   bölümde görsel daha kısık ve perde daha güçlü. */
.marka--parlak { --gorsel-opak: .34; }
.marka--parlak .marka__gorsel::after {
  background:
    linear-gradient(to bottom,
      rgba(0, 0, 0, .86) 0%, rgba(0, 0, 0, .42) 20%,
      rgba(0, 0, 0, .42) 80%, rgba(0, 0, 0, .78) 100%),
    linear-gradient(to right,
      rgba(0, 0, 0, .82) 0%, rgba(0, 0, 0, .55) 50%, rgba(0, 0, 0, .26) 100%);
}
[dir="rtl"] .marka--parlak .marka__gorsel::after {
  background:
    linear-gradient(to bottom,
      rgba(0, 0, 0, .86) 0%, rgba(0, 0, 0, .42) 20%,
      rgba(0, 0, 0, .42) 80%, rgba(0, 0, 0, .78) 100%),
    linear-gradient(to left,
      rgba(0, 0, 0, .82) 0%, rgba(0, 0, 0, .55) 50%, rgba(0, 0, 0, .26) 100%);
}

@media (max-width: 900px) {
  .marka__sol, .marka__sag { grid-column: 1 / -1; }
  .marka__sag { margin-block-start: 2.25rem; }
  .marka { min-height: 0; }
  /* Dar ekranda metin görselin tam üstüne biniyor — biraz daha kısıyoruz. */
  .marka { --gorsel-opak: .30; }
  .marka--parlak { --gorsel-opak: .22; }
  .marka__gorsel::after {
    background: linear-gradient(to bottom,
      rgba(0, 0, 0, .78) 0%, rgba(0, 0, 0, .55) 30%,
      rgba(0, 0, 0, .55) 70%, rgba(0, 0, 0, .78) 100%);
  }
}

/* Yer tutucu rozeti — gerçek içerik gelince kaldırılacak */
/* Yer tutucu rozeti artik varsayilan olarak GORUNMUYOR. Gelistirirken
   gormek icin tarayici konsoluna:
     document.documentElement.classList.add('yer-tutucu-goster')
   Uydurma icerigin listesi CLAUDE.md > "Acik kalanlar" bolumunde duruyor;
   ekranda musteriye gosterilecek bir sey degil. */
.yer-tutucu-goster [data-yer-tutucu] { position: relative; }
.yer-tutucu-goster [data-yer-tutucu]::after {
  content: "YER TUTUCU";
  position: absolute;
  inset-block-start: -1.35rem;
  inset-inline-start: 0;
  font-size: .5rem;
  letter-spacing: .18em;
  padding: .2rem .45rem;
  border: 1px dashed var(--metin-sonuk);
  color: var(--metin-sonuk);
  white-space: nowrap;
}

/* --- 11. Grup ------------------------------------------------------------ */

.grup { background: var(--siyah); }

.grup__bas    { grid-column: 1 / span 5; }
.grup__bas h2 { margin-block-start: 1.6rem; }
.grup__liste  { grid-column: 7 / -1; }

.madde {
  padding-block: clamp(1.6rem, 3.8vh, 2.5rem);
  border-block-start: 1px solid var(--cizgi-sonuk);
}
.madde:last-child { border-block-end: 1px solid var(--cizgi-sonuk); }

.madde h3 {
  font-size: clamp(1.05rem, 1.4vw, 1.375rem);
  font-weight: 600;
  letter-spacing: -.015em;
}
.madde p {
  margin: .7rem 0 0;
  color: var(--metin-orta);
  font-size: .9375rem;
  max-width: 52ch;
}

@media (max-width: 900px) {
  .grup__bas, .grup__liste { grid-column: 1 / -1; }
  .grup__liste { margin-block-start: 2.5rem; }
}

/* --- 12. FRANCHISE — sitenin dönüşüm bölümü ----------------------------- */

.franchise { background: var(--metin); color: #000; }
.franchise .etiket { color: rgba(0, 0, 0, .45); }

.franchise__bas    { grid-column: 1 / span 7; }
.franchise__bas h2 { margin-block-start: 1.6rem; }

.franchise__giris {
  grid-column: 1 / span 6;
  margin-block-start: 2rem;
  font-size: clamp(1rem, .9vw + .8rem, 1.25rem);
  line-height: 1.5;
  color: rgba(0, 0, 0, .68);
}
.franchise__giris strong { color: #000; font-weight: 600; }

.kartlar {
  grid-column: 1 / -1;
  margin-block-start: clamp(3rem, 7vh, 4.5rem);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  border-block-start: 1px solid rgba(0, 0, 0, .16);
}
.kart {
  padding: clamp(1.6rem, 3.5vh, 2.2rem) clamp(1.2rem, 2vw, 2rem) clamp(2rem, 4vh, 2.6rem);
  border-inline-end: 1px solid rgba(0, 0, 0, .11);
}
.kart:last-child { border-inline-end: 0; }
.kart__no {
  font-size: .625rem;
  letter-spacing: .18em;
  color: rgba(0, 0, 0, .4);
  font-variant-numeric: tabular-nums;
}
.kart h3 {
  margin-block-start: 1.5rem;
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: -.015em;
}
.kart p {
  margin: .7rem 0 0;
  font-size: .875rem;
  line-height: 1.55;
  color: rgba(0, 0, 0, .6);
}

@media (max-width: 780px) {
  .franchise__bas, .franchise__giris { grid-column: 1 / -1; }
  .kart { border-inline-end: 0; border-block-end: 1px solid rgba(0, 0, 0, .11); }
}

/* Düğmeler — oval kenar, gerçek gölge (sıfır ofset halka değil) */
.dugmeler {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-block-start: clamp(2.5rem, 5vh, 3.5rem);
}

.dugme {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  padding: .95rem 1.85rem;
  border-radius: 999px;
  font-family: inherit;
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .04em;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform .35s var(--gecis), box-shadow .35s var(--gecis),
              background-color .35s var(--gecis), color .35s var(--gecis);
}

.dugme--dolu {
  background: #000;
  color: var(--metin);
  box-shadow: 0 8px 22px -10px rgba(0, 0, 0, .55);
}
.dugme--dolu:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 34px -12px rgba(0, 0, 0, .6);
}

.dugme--hat {
  background: transparent;
  color: #000;
  border-color: rgba(0, 0, 0, .28);
}
.dugme--hat:hover { background: rgba(0, 0, 0, .05); transform: translateY(-2px); }

.dugme i {
  display: block;
  width: .5rem; height: .5rem;
  border-block-start: 1.5px solid currentColor;
  border-inline-end: 1.5px solid currentColor;
  transform: rotate(45deg);
  transition: transform .35s var(--gecis);
}
[dir="rtl"] .dugme i { transform: rotate(225deg); }
.dugme:hover i { transform: rotate(45deg) translate(2px, -2px); }
[dir="rtl"] .dugme:hover i { transform: rotate(225deg) translate(2px, -2px); }

/* --- 13. Alt bilgi ------------------------------------------------------- */

.alt { background: var(--siyah); padding-block: clamp(4rem, 9vh, 7rem) 2rem; }

.alt__marka { grid-column: 1 / span 5; }
.alt__unvan { margin-block-start: 1.1rem; }

.alt__sutun { grid-column: span 2; }
.alt__sutun h4 {
  font-size: .625rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--metin-sonuk);
  font-weight: 600;
  margin-block-end: 1.1rem;
}
.alt__sutun ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.alt__sutun a {
  display: inline-block;
  padding-block: .3rem;          /* satır 18 pikseldi, parmakla ıskalanıyordu */
  font-size: .875rem;
  color: var(--metin-orta);
  transition: color .3s;
}
.alt__sutun a:hover { color: var(--metin); }

.alt__kunye {
  grid-column: 1 / -1;
  margin-block-start: clamp(3rem, 7vh, 4.5rem);
  padding-block-start: 1.5rem;
  border-block-start: 1px solid var(--cizgi-sonuk);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem;
  font-size: .6875rem;
  letter-spacing: .06em;
  color: var(--metin-sonuk);
}

@media (max-width: 900px) {
  .alt__marka { grid-column: 1 / -1; margin-block-end: 2.5rem; }
  .alt__sutun { grid-column: span 6; }
}

/* --- 14. Hareket azaltma ------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .js .ac { opacity: 1; transform: none; }
  .js .satir > span { transform: none; }
  .marka__gorsel img { transform: none; }
}

/* ==========================================================================
   MENÜ PANELİ — hap'taki düğmenin açtığı tam ekran katman
   Kemik zemin bilerek: siyah sitenin üstüne açılan tek açık yüzey,
   "başka bir katmandayım" hissini tek başına veriyor.
   ========================================================================== */

.perde {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: var(--kemik);
  color: #14140f;
  opacity: 0;
  transform: translateY(-1.25rem);
  transition: opacity .42s var(--gecis), transform .52s var(--gecis);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.perde.acik { opacity: 1; transform: none; }

.perde__ic {
  min-block-size: 100%;
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: clamp(2rem, 6vw, 6rem);
  align-content: center;
  padding: clamp(7rem, 16vh, 11rem) var(--kenar) clamp(3rem, 8vh, 5rem);
}

.perde__yollar { list-style: none; margin: 0; padding: 0; }

.perde__yollar a {
  display: block;
  font-family: var(--tipo-baslik);
  font-size: clamp(2rem, 5.6vw, 4.5rem);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -.038em;
  color: #14140f;
  padding-block: clamp(.15rem, .8vh, .5rem);
  transition: transform .35s var(--gecis), opacity .35s var(--gecis);
}
.perde__yollar a:hover { transform: translateX(.6rem); }
[dir="rtl"] .perde__yollar a:hover { transform: translateX(-.6rem); }

/* Üzerine gelinmeyenler sönüyor — göz nereye bakıyorsa orası kalıyor */
.perde__yollar:hover a { opacity: .34; }
.perde__yollar:hover a:hover { opacity: 1; }

.perde__yan {
  align-self: end;
  border-block-start: 1px solid rgba(20, 20, 15, .18);
  padding-block-start: 1.5rem;
}

.perde__baslik {
  margin: 0 0 1.4rem;
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(20, 20, 15, .45);
}

.perde__markalar {
  list-style: none;
  margin: 0 0 2.75rem;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.75rem 2.75rem;
}
.perde__markalar img {
  block-size: 1.7rem;
  inline-size: auto;
  opacity: .92;
  transition: opacity .3s var(--gecis), transform .3s var(--gecis);
}
.perde__markalar img.perde__kare { block-size: 3.2rem; }
.perde__markalar a:hover img { opacity: 1; transform: translateY(-2px); }

.perde__yazi {
  font-size: .9375rem;
  font-weight: 500;
  color: rgba(20, 20, 15, .7);
  transition: color .3s;
}
.perde__yazi:hover { color: #14140f; }

.perde__cagri {
  padding-block-start: 1.75rem;
  border-block-start: 1px solid rgba(20, 20, 15, .16);
}
.perde__cagri p {
  margin: 1rem 0 0;
  max-inline-size: 34ch;
  font-size: .8125rem;
  line-height: 1.55;
  color: rgba(20, 20, 15, .5);
}

/* Kemik zeminde koyu düğme */
.dugme--koyu {
  background: #14140f;
  color: var(--kemik);
  box-shadow: 0 10px 26px -12px rgba(0, 0, 0, .6);
}
.dugme--koyu:hover {
  background: #2c2c24;
  transform: translateY(-2px);
  box-shadow: 0 16px 34px -14px rgba(0, 0, 0, .65);
}
.dugme--koyu svg {
  inline-size: 1.05rem;
  block-size: 1.05rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform .3s var(--gecis);
}
.dugme--koyu:hover svg { transform: translateX(3px); }
[dir="rtl"] .dugme--koyu svg { transform: scaleX(-1); }

/* Panel açıkken hap kemik zemine karışmasın */
.hap--acik {
  background: #14140f;
  color: var(--kemik);
}
.hap--acik .logo--hap { color: var(--kemik); }
.hap--acik .hap__cagri { background: var(--kemik); color: #14140f; }

@media (max-width: 820px) {
  .perde__ic { grid-template-columns: 1fr; align-content: start; }
  .perde__yan { margin-block-start: 2.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  .perde { transition: opacity .01ms; transform: none; }
}

/* ==========================================================================
   YUKARI ÇIK — sağ altta yüzen hap
   Uzun sayfalarda geri dönüş yolu. Sayfanın en üstündeyken görünmüyor;
   bir ekran boyu inince geliyor.
   ========================================================================== */

.yukari {
  position: fixed;
  inset-block-end: clamp(1.1rem, 3vh, 2rem);
  inset-inline-end: clamp(1.1rem, 3vw, 2.25rem);
  z-index: 70;
  inline-size: 3rem;
  block-size: 3rem;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 999px;
  background: rgba(244, 241, 234, .92);
  -webkit-backdrop-filter: blur(16px);
          backdrop-filter: blur(16px);
  color: #14140f;
  cursor: pointer;
  box-shadow: 0 12px 32px -14px rgba(0, 0, 0, .8);
  opacity: 0;
  visibility: hidden;
  transform: translateY(.9rem);
  transition: opacity .4s var(--gecis), transform .4s var(--gecis),
              visibility .4s, background-color .3s var(--gecis);
}

.yukari--gorunur { opacity: 1; visibility: visible; transform: none; }
.yukari:hover { background: #fff; transform: translateY(-2px); }

.yukari svg {
  inline-size: 1.15rem;
  block-size: 1.15rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (prefers-reduced-motion: reduce) {
  .yukari { transition: opacity .01ms; transform: none; }
}