/* =========================================================================
   LIWALI — ASİL VİTRİN
   tokens.css üzerine jeton katmanı. Seçiciler :root[data-marka] olduğu için
   ÖZGÜLLÜK tokens.css'in :root'undan yüksektir (0,1,1 > 0,1,0) — sıraya
   değil, kaskata güvenir.

   Asalet nereden geliyor (ölçülen marka kimliğinden):
     · Logo wordmark Montserrat DEĞİL, İNCE SERİF, tümü büyük harf, çok geniş
       harf aralığı: "L I W A L I". Vitrinin tüm başlık dili buradan türer.
     · ZEMİN SAF BEYAZ, mürekkep SİYAH, griler NÖTR (Mutlu, 7 Eki 2026:
       "listing Zara'daki gibi olsun, arkaplan beyaz"). Önceki sıcak krem
       #F6F2EC / #1E1E1E paleti bu kararla emekli — geri getirmeyin.
     · ÜRÜN LİSTESİ ZARA'DAN ÖLÇÜLDÜ (Mutlu'nun verdiği ekran görüntüsü +
       zara.com/tr canlı ölçüm): 4 kolon, foto 2:3, sütun boşluğu ≈%6,8
       (1410px'te 96px), satır ≈66px, metin Helvetica 11px/300/büyük harf/
       satır 16px/siyah, ad tek satır "…", sağda ince "+". Aşağıda "ZARA LİSTE".
     · Hareket azdır ve YAVAŞTIR; büyüme/zıplama yok, yalnız çözülme.
     · Boşluk cömerttir: ürün az sayıda, büyük ve nefes alarak durur.
   ========================================================================= */

:root[data-marka="liwali"] {
  /* --- RENK: beyaz zemin, nötr monokrom (Zara) ------------------------ */
  --ink:        #000000;          /* zara.com ölçümü: rgb(0,0,0) */
  --ink-soft:   #333333;
  --muted:      #6E6E6E;
  --faint:      #A6A6A6;
  --hairline:   #E6E6E6;
  --bg:         #FFFFFF;
  --bg-kagit:   #FFFFFF;
  --surface:    #F4F4F4;          /* görsel yüklenene kadar kutunun rengi */

  /* Editoryal vurgular — yalnız tam-taşma bantlarda, üründe değil */
  --editoryal-1: #2E281A;         /* zeytin */
  --editoryal-2: #342011;         /* çikolata */
  --editoryal-3: #C5A687;         /* ekru */

  --signal:      #8C2F2A;         /* uyarı bile sakin: tuğla, parlak kırmızı değil */
  --signal-soft: #F4EBE8;

  /* --- TİPOGRAFİ ------------------------------------------------------
     Webfont YOK (tokens.css kararı korunur). Asalet puntodan değil
     KESME + ARALIK + BÜYÜK HARF'ten gelir; serif yığını wordmark ve
     editoryal başlıklarda, gövde nötr sans'ta kalır.                    */
  --font: "Helvetica Neue", Helvetica, "Segoe UI", Arial, sans-serif;
  --font-display: "Didot", "Bodoni MT", "Hoefler Text", Garamond, "Times New Roman", Georgia, serif;

  --fs-mikro:   10px;
  --fs-kucuk:   11.5px;
  --fs-taban:   13px;
  --fs-buyuk:   21px;
  --fs-dev:     30px;

  --ls-mikro:   0.30em;           /* mikro etiket daha da açık */
  --ls-etiket:  0.22em;
  --ls-ad:      0.06em;

  --fw-normal:  400;
  --fw-orta:    400;              /* kalınlıkla değil aralıkla vurgu yapılır */
  --fw-kalin:   500;

  --lh-genis:   1.85;

  /* --- RİTİM: cömert ---------------------------------------------------- */
  --yogunluk-bolum: 128px;
  --grid-kolon:     4;
  --grid-bosluk-x:  clamp(16px, 6.8vw, 112px);   /* Zara: 96px @ 1410px */
  --grid-bosluk-y:  66px;
  --kart-oran:      2 / 3;                       /* Zara: 268×402 */

  /* --- HAREKET: yavaş, yalnız çözülme ---------------------------------- */
  --gecis:       .45s cubic-bezier(.22,.61,.36,1);
  --gecis-yavas: .8s  cubic-bezier(.22,.61,.36,1);
  --kart-gecis:  .7s  ease;
  --kart-buyume: 1;               /* BÜYÜME YOK — kart sakin durur */

  --maks-genislik: 1560px;
}

/* --- Wordmark: ORİJİNAL LOGO (Mutlu'nun verdiği /logo/liwali.webp) --------
   Logo bir MASKE olarak çizilir, boyası `currentColor`'dır. Neden düz <img>
   değil: wordmark'ın rengi duruma göre değişiyor (hero üstünde perde + koyu
   mürekkep, kaydırınca --ink). Siyah bir resim bu kuralların hiçbirine
   uymazdı; maske, var olan bütün `color:` kurallarını olduğu gibi devralır.
   Metin DOM'da kalır (font-size:0) → ekran okuyucu yine "LIWALI" der.
   Oran 2000×258 — elle ölçü değil, aspect-ratio. */
[data-marka="liwali"] .wordmark {
  display: block;
  height: 24px;
  aspect-ratio: 2000 / 258;
  font-size: 0;
  line-height: 0;
  color: var(--ink);
  background: currentColor;
  -webkit-mask: url(/logo/liwali.webp) center / contain no-repeat;
          mask: url(/logo/liwali.webp) center / contain no-repeat;
}
[data-marka="liwali"] .wordmark-alt {
  font-family: var(--font);
  font-size: 7.5px;
  letter-spacing: .42em;
  padding-inline-start: .42em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 7px;
}

/* --- Editoryal başlık: serif, düşük kontrastlı, ortalı ------------------ */
[data-marka="liwali"] .ed-baslik {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(26px, 3.4vw, 42px);
  letter-spacing: .12em;
  text-transform: uppercase;
  line-height: 1.3;
}
[data-marka="liwali"] .ed-giris {
  font-size: 13px;
  line-height: var(--lh-genis);
  color: var(--muted);
  max-width: 54ch;
}

/* --- Ürün kartı: çözülme, büyüme yok ------------------------------------ */
[data-marka="liwali"] .kfoto { background: var(--bg-kagit); }
[data-marka="liwali"] .kfoto img { transition: opacity var(--kart-gecis); }
[data-marka="liwali"] .kad {
  text-transform: none;           /* cümle düzeni — kumaş adı önde okunur */
  font-weight: var(--fw-normal);
  color: var(--ink);
}
[data-marka="liwali"] .kust { letter-spacing: var(--ls-mikro); }
[data-marka="liwali"] .kbody { padding-top: 16px; }

/* --- Bölüm ayracı: ince çizgi + ortalı serif etiket ---------------------- */
[data-marka="liwali"] .bolum-bas {
  text-align: center;
  display: grid;
  gap: 14px;
  justify-items: center;
  margin-bottom: 56px;
}

/* --- Butonlar: çerçeve ince, dolgu geniş -------------------------------- */
[data-marka="liwali"] .btn {
  border-color: var(--ink);
  padding: 17px var(--a4);
  letter-spacing: .26em;
  font-size: 10.5px;
  background: transparent;
}
/* Ana düğme DOLU kalır: yukarıdaki transparent (0,2,0) tokens.css'teki
   .btn--birincil zeminini (0,1,0) eziyordu ama yazı rengi zemin rengi kalıyordu
   → "Sepete ekle" beyaz zeminde BEYAZ yazı, görünmez (7 Eki, ölçüldü). */
[data-marka="liwali"] .btn--birincil { background: var(--ink); color: var(--bg); }
[data-marka="liwali"] .btn--birincil:hover { background: transparent; color: var(--ink); }

/* --- Üst bant: sessiz, kremin bir tonu koyu ----------------------------- */
[data-marka="liwali"] .ustbant {
  background: var(--surface);
  color: var(--ink-soft);
  letter-spacing: .26em;
  font-weight: var(--fw-normal);
  border-bottom-color: transparent;
}

/* --- ŞEFFAF HEADER: Liwali'de KOYU yazı + açık perde ---------------------
   Liwali'nin çekimleri sıcak-beyaz sonsuz fonda: hero'nun üst şeridi neredeyse
   beyaz. Ortak kural oraya BEYAZ yazı basıyordu → wordmark görünmüyordu
   (tarayıcıda görüldü). Fotoğrafın parlaklığını ölçmek CORS'a takılıyor, o
   yüzden çözüm fotoğrafa BAĞLI OLMAYAN bir perde: üstten aşağı beyaz→şeffaf
   geçiş + koyu mürekkep. Hangi görsel gelirse gelsin kontrast garanti. */
[data-marka="liwali"] body.hero-ustu header.site:not(.dolu)::before {
  content: '';
  position: absolute;
  inset: -1px 0 auto;
  height: 220%;
  background: linear-gradient(180deg, rgba(255,255,255,.94) 0%, rgba(255,255,255,.72) 45%, rgba(255,255,255,0) 100%);
  pointer-events: none;
  z-index: -1;
}
[data-marka="liwali"] body.hero-ustu header.site:not(.dolu) .hd-nav a,
[data-marka="liwali"] body.hero-ustu header.site:not(.dolu) .hd-r a,
[data-marka="liwali"] body.hero-ustu header.site:not(.dolu) .hd-r button,
[data-marka="liwali"] body.hero-ustu header.site:not(.dolu) .wordmark,
[data-marka="liwali"] body.hero-ustu header.site:not(.dolu) .burger { color: var(--ink); text-shadow: none; }
[data-marka="liwali"] body.hero-ustu header.site:not(.dolu) .wordmark-alt { color: var(--muted); }
/* Bant zemini BEYAZ: hero videosu (kumaş) bandın arkasına uzanıyor; zeminsiz
   bırakılınca kumaşın gri kenarı en üstte şerit gibi görünüyordu. */
[data-marka="liwali"] body.hero-ustu .ustbant { color: var(--ink-soft); position: relative; z-index: 2; background: var(--bg); }

[data-marka="liwali"] header.site { background: var(--bg); }
[data-marka="liwali"] header.site.dolu {
  background: rgba(255, 255, 255, .97);
  box-shadow: 0 1px 0 var(--hairline);
}
[data-marka="liwali"] .ara-cubuk { background: var(--bg); }
[data-marka="liwali"] .mobil-menu { background: var(--bg); }
[data-marka="liwali"] .pop-kart { background: var(--bg-kagit); }

/* Liwali'de hareketli öğe yok: kayan bant markanın dili değil */
[data-marka="liwali"] .serit-kayan { display: none; }

/* =========================================================================
   ZARA LİSTE — Mutlu'nun referans ekran görüntüsünden ölçüldü (7 Eki 2026).
   Şablon (liste.blade.php) i8 ile ORTAK kalır; burada yalnız sunum değişir.
   DOM sırası aynı, görsel sıra `order` ile: etiket → ad → seri → fiyat → renk.
   ========================================================================= */

/* Kenar çubuğu YOK: kategori/görünüm ızgaranın ÜSTÜNDE tek satır.
   Izgara sayfa genişliğinde, kenar boşluğu 14px (referans: x=14). */
[data-marka="liwali"] main.sayfa:has(.vitrin) { max-width: none; padding-inline: 14px; }
/* align-items:stretch ŞART — ortak şablondaki flex-start sütun düzeninde içerik
   kolonunu içeriği kadar daraltıyordu (1900px ekranda ızgara 1433px'te kalıp
   sağda ~440px boşluk bırakıyordu, ölçüldü). */
[data-marka="liwali"] .vitrin { flex-direction: column; align-items: stretch; gap: 0; padding-top: 28px; }
[data-marka="liwali"] .yan {
  position: static; flex: none; width: 100%;
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 32px;
  margin-bottom: 36px;
}
[data-marka="liwali"] .snav { flex-direction: row; flex-wrap: wrap; gap: 10px 26px; }
[data-marka="liwali"] .tipler { flex-direction: row; flex-wrap: wrap; gap: 10px 22px; }
[data-marka="liwali"] .yan h4 { display: none; }
[data-marka="liwali"] .gorunum { margin: 0 0 0 auto; }
[data-marka="liwali"] .snav .lbl,
[data-marka="liwali"] .tipler a { font-size: 11px; font-weight: 300; letter-spacing: 0; }
[data-marka="liwali"] .snav a.on .lbl,
[data-marka="liwali"] .tipler a.on { font-weight: 400; }

/* Kart metni: Helvetica 11px / 300 / satır 16px / siyah — zara.com ölçümü */
[data-marka="liwali"] .kbody {
  position: relative; display: flex; flex-direction: column;
  padding: 15px 0 0;
}
[data-marka="liwali"] .kust,
[data-marka="liwali"] .kad,
[data-marka="liwali"] .klot,
[data-marka="liwali"] .kfiyat,
[data-marka="liwali"] .kistek {
  font-family: "Helvetica Now Text", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 11px; font-weight: 300; line-height: 16px; letter-spacing: 0;
  color: var(--ink); margin: 0;
}
[data-marka="liwali"] .kfiyat small { font-size: 11px; color: var(--ink); }

[data-marka="liwali"] .kust   { order: 1; padding-inline-end: 24px; }   /* "+" bu satırda */
[data-marka="liwali"] .kadrow { order: 2; display: block; }
[data-marka="liwali"] .klot   { order: 3; }
[data-marka="liwali"] .kfiyat,
[data-marka="liwali"] .kistek { order: 4; }
[data-marka="liwali"] .kalt   { order: 5; margin-top: 12px; gap: 9px; }

/* Ad TEK SATIR, sığmazsa "…" (referans: "FRUIT OF THE LOOM™ BAGGY FIT J...") */
[data-marka="liwali"] .kad { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* İnce "+" ilk metin satırıyla aynı hizada, görselin sağ kenarında */
[data-marka="liwali"] .kplus {
  position: absolute; top: 14px; inset-inline-end: 0;
  font-size: 15px; font-weight: 300; line-height: 16px; color: var(--ink);
}

/* Renk: 9px kare, 9px aralık, çerçeve yalnız açık renkleri belli etmek için */
[data-marka="liwali"] .knokta { width: 9px; height: 9px; border: 1px solid rgba(0, 0, 0, .12); }
[data-marka="liwali"] .kfazla { font-size: 11px; font-weight: 300; color: var(--ink); }

/* =========================================================================
   HERO (7 Eki 2026, 3. sürüm): GERÇEK ÇEKİM stok video (Pexels 7251755 —
   deve tüyü palto, sütunlu galeri; Mutlu seçti). Loş, gri-kahve bir çekim:
   masaüstünde başlık mankenin paltosunun üstüne düşebiliyor → BEYAZ yazı +
   alttan yumuşak KOYU perde (ortak stil) + Zara usulü BEYAZ köşeli düğme.
   (Önceki beyaz kumaş filminde tersiydi: perde yok, siyah yazı.)
   Mobilde başlık videonun ALTINDA, beyaz zeminde → orada siyah yazı (aşağıda).
   ========================================================================= */
[data-marka="liwali"] .hero-bn { background: #fff; }            /* video yüklenene kadar siyah flaş olmasın */
[data-marka="liwali"] .hero-cta .dugme {
  background: #fff; color: var(--ink); border: 1px solid #fff; border-radius: 0;
  box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none;
  font-weight: 400; letter-spacing: .18em;
}
[data-marka="liwali"] .hero-cta .dugme:hover { background: transparent; color: #fff; transform: none; }
[data-marka="liwali"] .hero-ok { color: var(--ink); background: rgba(255,255,255,.75); border-color: var(--hairline); }
[data-marka="liwali"] .hero-nokta i { background: rgba(0,0,0,.18); }
[data-marka="liwali"] .hero-nokta i.on { background: var(--ink); }
/* Videonun kendi yavaş yakınlaşması var; CSS'in ikinci zoom'u üst üste binip
   sağdaki mankeni dar ekranda kenara iter. */
[data-marka="liwali"] .hero-slide.on video { animation: none; }

/* MOBİL HERO (≤900px): görsel üstte, başlık + düğme ALTINDA (Zara mobil).
   Ölçüldü: ortak kuralla başlık mankenin bacaklarının üstüne biniyordu
   (375px'te 202px çakışma). Video kutusu tam genişlik × 4/3 — mobil video
   tam bu oranda üretildi (1080×1440), kırpma yok.
   Birden çok slayt olursa: etkin olan akışta (yükseklik verir), diğerleri
   onun üstünde mutlak durur → geçiş yine opaklıkla. */
@media (max-width: 900px) {
  [data-marka="liwali"] .hero-bn { height: auto; min-height: 0; max-height: none; }
  [data-marka="liwali"] .hero-slide { inset: 0 0 auto 0; aspect-ratio: 3 / 4; }
  [data-marka="liwali"] .hero-slide.on { position: relative; }
  [data-marka="liwali"] .hero-cta { position: static; max-width: none; padding: 22px 16px 34px; }
  [data-marka="liwali"] .hero-cta .buyuk { margin-top: 12px; }
  /* başlık beyaz zeminde: perde yok, siyah yazı, siyah düğme */
  [data-marka="liwali"] .hero-perde { display: none; }
  [data-marka="liwali"] .hero-cta { color: var(--ink); }
  [data-marka="liwali"] .hero-cta .ust { color: var(--muted); font-weight: 400; }
  [data-marka="liwali"] .hero-cta .dugme { margin-top: 22px; background: var(--ink); color: #fff; border-color: var(--ink); }
  [data-marka="liwali"] .hero-cta .dugme:hover { background: #fff; color: var(--ink); }
}

/* =========================================================================
   ARAPÇA — SAĞDAN SOLA (liwaliglobal.com /ar, 28 Eki 2026)
   Düzen mantıksal özelliklerle (inset-inline-*, margin-inline-*, text-align:start/end)
   kendiliğinden aynalanır; burada yalnız Arapçaya özgü kurallar var.
   ========================================================================= */
/* Arapça bitişik yazıdır: harf aralığı harflerin bağını koparır → her yerde sıfır */
[dir="rtl"] *,
[dir="rtl"] *::before,
[dir="rtl"] *::after { letter-spacing: 0 !important; }
/* Helvetica'da Arapça harf yok; sistemin Arapça yazı tipi seçilir, Latin kısım Helvetica kalır */
[dir="rtl"] body {
  font-family: "Helvetica Neue", Helvetica, "Segoe UI", "Geeza Pro", "Noto Sans Arabic", Tahoma, Arial, sans-serif;
}
/* 11px/300 Arapçada okunmuyor (ölçüldü) → kart metni bir basamak büyük, normal kalınlık */
[dir="rtl"][data-marka="liwali"] .kust,
[dir="rtl"][data-marka="liwali"] .kad,
[dir="rtl"][data-marka="liwali"] .klot,
[dir="rtl"][data-marka="liwali"] .kfiyat,
[dir="rtl"][data-marka="liwali"] .kistek { font-size: 12.5px; font-weight: 400; line-height: 19px; }
/* Ok simgeleri ters yöne bakar */
[dir="rtl"] .hero-cta .dugme svg { transform: scaleX(-1); }
[dir="rtl"] .hero-cta .dugme:hover svg { transform: scaleX(-1) translateX(3px); }
/* Ürün kodu, beden, rakam, e-posta, telefon: soldan sağa okunur */
[dir="rtl"] .klot, [dir="rtl"] input[type="email"], [dir="rtl"] input[type="tel"] { unicode-bidi: plaintext; }