/*
 * LUMA DİNAMİK VERİ EKİ
 * ----------------------------------------------------------------
 * styles.css ve enhancements.css hiç değiştirilmedi (PHP dönüşüm
 * talimatının 1. ve 2. kuralı). Orijinal tasarımdaki .product-image,
 * .curated-image, .news-image ve .orbit sınıfları TEK bir paylaşılan
 * atlas görselini background-position ile kırpıyordu (sabit sayıda
 * demo kart için tasarlanmış bir teknik). Yönetim panelinden herhangi
 * sayıda ürün/koleksiyon/blog yazısı eklenebildiği için bu atlas
 * tekniği dinamik veriyle çalışamaz — her kart artık KENDİ gerçek
 * görselini (ürün fotoğrafı, blog kapak görseli) satır içi
 * background-image ile gösteriyor.
 *
 * Bu dosya SADECE o dinamik kartlara eklenen ek ".has-photo" sınıfı
 * için, orijinal tasarımdaki hover büyüme hissini (crop-N atlasının
 * background-size:210% numarasına dokunmadan) yeniden üretir. Hiçbir
 * orijinal sınıf yeniden tanımlanmadı/kaldırılmadı.
 */
.product-image.has-photo,
.curated-image.has-photo,
.news-image.has-photo,
.collection.has-photo {
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  transition: transform .7s cubic-bezier(.2,.7,.2,1), filter .7s;
}
.product:hover .product-image.has-photo,
.curated-product:hover .curated-image.has-photo {
  transform: scale(1.045);
}
.news-card:hover .news-image.has-photo {
  transform: scale(1.045);
  filter: saturate(1.1);
}
/* .collection zaten overflow:hidden ve position:relative (styles.css),
   bu yüzden görsel büyürken kart sınırlarının dışına taşmaz. */
.collection.has-photo:hover {
  transform: none;
}
.collection.has-photo:before {
  /* styles.css'teki karartma gradyanı korunur, böylece kart üzerindeki
     başlık/etiket metni görsel ne olursa olsun okunur kalır. */
  background: linear-gradient(transparent 35%, rgba(20,24,18,.72));
}
.hero-slide.has-photo {
  background-size: cover;
  background-position: center;
}

/*
 * Orijinal tasarımda .actions içindeki "Hesabım" ve "Sepet" öğeleri
 * <button> etiketiydi (styles.css'te ".actions button" element seçicisiyle
 * stilleniyor) ve tıklandığında hiçbir yere gitmiyordu (kırık). Gerçek
 * hesap/sepet sayfalarına yönlendirebilmek için bu ikisi <a> etiketine
 * çevrildi; aşağıdaki kural ".actions button" ile birebir aynı görünümü
 * <a class="luma-icon-link"> için yeniden üretir.
 */
.actions a.luma-icon-link {
  border: 0;
  background: none;
  padding: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  transition: .25s;
}

/*
 * DÜZELTME: Header'daki arama/favoriler/hesap/sepet ikonları birbirinden
 * tamamen farklı görünüyordu — arama tarayıcıya göre değişen bir metin
 * sembolüydü (⌕), hesap ikonu bir satranç sembolüydü (♙, bazı yazı
 * tiplerinde neredeyse görünmez boyutta çiziliyordu), favoriler kalp
 * karakteriydi (♡), sepet ise gerçek bir SVG çizgi ikonuydu — dördü de
 * farklı boyut/kalınlıkta, tutarsız bir görünüm oluşturuyordu. Artık
 * dördü de aynı çizgi kalınlığında gerçek SVG ikon + aynı boyuttaki
 * ortak ".luma-icon-circle" daire çerçevesi içinde gösteriliyor.
 */
.luma-icon-circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(49, 55, 47, .18);
  background: transparent;
  color: var(--ink, #31372f);
  position: relative;
  transition: .25s;
  box-sizing: border-box;
}
.luma-icon-circle svg { display: block; flex-shrink: 0; }
.luma-icon-link:hover .luma-icon-circle,
button.luma-icon-circle:hover {
  border-color: var(--sage-dark, #6c7b66);
  color: var(--sage-dark, #6c7b66);
  background: var(--cream, #f8f5ee);
}
/* styles.css'teki ".actions button{border:0;background:none;padding:4px;
   font-size:12px}" kuralı (arama butonu buna dahil) aynı özgüllükte
   olduğu için, dairenin çerçevesini/arka planını ezmemesi için burada
   element seçicili eş özgüllükte bir kuralla (bu dosya sonra yüklendiği
   için) geri kazanılıyor. */
button.luma-icon-circle {
  border: 1px solid rgba(49, 55, 47, .18);
  background: transparent;
  padding: 0;
  font-size: 0;
  cursor: pointer;
}

/* Sepet/favoriler adedi: dairenin üzerine binen küçük, yuvarlak bir rozet
   olarak gösterilir (eskiden ikondan ayrı, kendi başına büyük bir daire
   halinde duruyordu). Sayı 0 iken de gösterilir, böylece "boş sepet"
   durumu her zaman nettir. */
.luma-icon-circle .luma-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 17px;
  height: 17px;
  padding: 0 3px;
  border-radius: 50%;
  background: var(--sage-dark, #6c7b66);
  color: #fff;
  font-size: 9.5px;
  line-height: 17px;
  text-align: center;
  border: 2px solid var(--paper, #fffdf9);
  box-sizing: border-box;
}
@media (max-width: 700px) {
  .luma-icon-circle { width: 34px; height: 34px; }
}


/* Header arama kutusu: orijinal tasarımdaki tek ikonluk görünümü korur,
   input alanı yalnızca odaklanınca (focus-within) genişler. */
.luma-search {
  display: flex;
  align-items: center;
  position: relative;
}
.luma-search-input {
  width: 0;
  opacity: 0;
  border: 0;
  border-bottom: 1px solid var(--ink, #2b3029);
  background: transparent;
  font: inherit;
  font-size: 12px;
  padding: 4px 0;
  transition: width .3s ease, opacity .3s ease, margin .3s ease;
  pointer-events: none;
}
.luma-search:focus-within .luma-search-input,
.luma-search-input:not(:placeholder-shown) {
  width: 140px;
  opacity: 1;
  margin-right: 6px;
  pointer-events: auto;
}
.luma-search button {
  cursor: pointer;
}

/* Flash mesajlar (bülten aboneliği, vb. sonuç bildirimleri) */
.luma-flash {
  position: fixed;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 999;
  padding: 12px 22px;
  border-radius: 30px;
  font-size: 13px;
  letter-spacing: .02em;
  box-shadow: 0 10px 30px rgba(0,0,0,.15);
  background: #2b3029;
  color: #fff;
}
.luma-flash-danger { background: #b3524a; }
.luma-flash-success { background: #6f7f63; }

/*
 * Dil/para birimi değiştirici — eski temada (theme-header.php) da bulunan
 * bir yetenekti; birden fazla dil/para birimi tanımlıysa (bkz. Sistem >
 * Diller, Sistem > Para Birimleri) burada da sunulur. Duyuru şeridinin
 * mutlak konumlandırılmış sağ köşesine eklenir; şerit boşsa/tek dil-tek
 * para birimliyse hiç render edilmez, yani varsayılan görünümde hiçbir
 * fark yaratmaz.
 */
/* z-index:6, .header'ın (styles.css, z-index:5) ÜZERİNDE durması için —
   aksi halde açılır dil/para birimi menüsü header'ın yarı saydam
   arka planının ARKASINDA kalır. */
.luma-topbar { position: relative; min-height: 31px; z-index: 6; }
.luma-lc-switch {
  position: absolute;
  right: 0;
  top: 0;
  height: 31px;
  display: flex;
  align-items: center;
  gap: 12px;
  z-index: 2;
  /* Kayan duyuru metni bu alanın altından geçtiği için, metnin çakışmadan
     önce yumuşakça kaybolması amacıyla soldan şeffaf, sağdan duyuru şeridiyle
     aynı renkte (#899783) bir geçiş uygulanır. */
  padding: 0 14px 0 34px;
  background: linear-gradient(to right, transparent, #899783 26px);
}
.luma-lc-item { position: relative; }
.luma-lc-toggle {
  color: #fff;
  font-size: 10px;
  letter-spacing: .1em;
  cursor: pointer;
  padding: 4px 2px;
  display: inline-block;
}
.luma-lc-menu {
  display: none;
  position: absolute;
  right: 0;
  top: 100%;
  min-width: 130px;
  background: #fffdf9;
  box-shadow: 0 14px 34px rgba(0,0,0,.16);
  padding: 6px 0;
  z-index: 20;
}
.luma-lc-item:hover .luma-lc-menu,
.luma-lc-item:focus-within .luma-lc-menu {
  display: block;
}
.luma-lc-menu a {
  display: block;
  padding: 7px 14px;
  font-size: 11px;
  color: #31372f;
  white-space: nowrap;
}
.luma-lc-menu a:hover { background: #f4efe6; }
.luma-lc-menu a.is-active { color: #6c7b66; font-weight: 600; }
@media (max-width: 600px) {
  .luma-lc-switch { right: 8px; gap: 8px; }
  .luma-lc-toggle { font-size: 9px; }
}

/*
 * DÜZELTME (mobil, ≤700px): enhancements.css'teki ".actions button:last-child"
 * kuralı aslında SEPET butonunu ikon-only kutuya çevirip içine ::before ile
 * "Çanta" yazısı basmak için yazılmıştı. Ama bu bir soyundan-gelen (descendant)
 * seçici olduğu için ".actions" içindeki HER "son çocuk" <button>'ı hedefliyor
 * — arama formundaki arama butonu da (kendi ebeveyni olan <form>'un son
 * çocuğu olduğu için) yanlışlıkla bu kuralın kapsamına giriyor ve mobilde
 * arama ikonu yerine küçük "Çanta" yazısı görünüyordu. Aşağıda arama
 * butonu bu sızıntıdan korunuyor; artık dört ikon da (arama, favoriler,
 * hesap, sepet) aynı ".luma-icon-circle" dairesini kullandığı için ayrıca
 * özel bir sepet boyutlandırmasına gerek kalmadı — hepsi zaten mobilde
 * eşit boyutta (bkz. yukarıdaki 700px medya sorgusu).
 */
@media (max-width: 700px) {
  .luma-search button.luma-icon-circle {
    width: 34px !important;
    height: 34px !important;
    padding: 0 !important;
    font-size: 0 !important;
  }
  .luma-search button.luma-icon-circle::before { content: none !important; }
}

/*
 * DÜZELTME: enhancements.css'teki ".floating-actions a:nth-child(3) svg"
 * kuralı, sabit sıradaki dört ikonun (WhatsApp, Instagram, Facebook,
 * Telefon) SADECE 3.'süne (Facebook) dolu/solid ikon görünümü veriyordu.
 * Burada her ikon, admin panelinden ayarlanıp ayarlanmadığına göre
 * KOŞULLU basılıyor (örn. Instagram tanımlı değilse hiç basılmıyor) —
 * bu durumda "3. sıradaki" ikon artık Facebook olmayabilir (örn. Telefon
 * kayabilir) ve yanlış ikon dolu görünür. Facebook artık konumdan
 * bağımsız, kendi sınıfıyla (.luma-fb-icon) hedefleniyor.
 */
.floating-actions a svg { fill: none !important; stroke: currentColor !important; }
.floating-actions a.luma-fb-icon svg { fill: currentColor !important; stroke: none !important; }

/*
 * DÜZELTME: Admin panelinden (Sistem > Genel Ayarlar) yüklenen header/footer
 * logo görselleri için boyutlandırma. Görsel yoksa marka adı yazı olarak
 * gösterilmeye devam eder (bkz. includes/luma-header.php / luma-footer.php).
 */
.header-brand-logo {
  display: block;
  height: 58px;
  width: auto;
  max-width: 240px;
  object-fit: contain;
}
@media (max-width: 600px) {
  .header-brand-logo { height: 44px; }
}
.footer-brand .brand { display: inline-flex; align-items: center; }
.footer-brand-logo {
  display: block;
  height: 52px;
  width: auto;
  max-width: 220px;
  object-fit: contain;
  filter: brightness(0) invert(1); /* footer koyu zemin üzerinde logo beyaz görünsün */
}

/*
 * EKLENDİ: Sayfanın en üstüne, duyuru şeridinin/topbar'ın bile üzerinde,
 * sayfanın gerçek en üst noktasında sabit duran ince şerit — hem anasayfada
 * hem tüm iç sayfalarda aynı şekilde görünüyor. İki metin ("Little Things,
 * Big Care" / "Küçük Şeyler Çok Önemli") kaymadan, biri kaybolup diğeri
 * belirerek ("yanıp söner" gibi) sırayla gösterilir. Metinler admin
 * panelinden (Sistem > Arayüz Metinleri > "brand_top_tagline" /
 * "brand_top_tagline_tr") değiştirilebilir.
 */
.luma-brand-strip {
  background: var(--ink, #31372f);
  color: #f3f0e9;
  text-align: center;
  font-size: 10px;
  letter-spacing: .22em;
  text-transform: uppercase;
  position: relative;
  height: 28px;
  overflow: hidden;
}
.luma-brand-strip-msg {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 14px;
  opacity: 0;
  animation: brandStripBlink 6s ease-in-out infinite;
}
.luma-brand-strip-msg.is-en { animation-delay: 0s; }
.luma-brand-strip-msg.is-tr { animation-delay: 3s; }
@keyframes brandStripBlink {
  0%   { opacity: 0; }
  6%   { opacity: 1; }
  44%  { opacity: 1; }
  50%  { opacity: 0; }
  100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .luma-brand-strip { height: auto; padding: 7px 12px; }
  .luma-brand-strip-msg { position: static; animation: none; opacity: 0; }
  .luma-brand-strip-msg.is-tr { opacity: 1; }
}

/*
 * NOT: .header-brand-tagline / .tagline-tr / .tagline-en kurallari,
 * logonun yanindaki ikinci dil sloganinin markup'tan kaldirilmasiyla
 * birlikte kullanilmaz hale geldigi icin buradan da kaldirildi.
 */
/*
 * Logo + Türkçe slogan artık ortak bir sarmalayıcı (.header-brand-group)
 * içinde — bu sarmalayıcı, header'ın grid düzeninde ESKİDEN .header-brand
 * (<a> etiketinin kendisi) hangi grid hücresini kullanıyorduysa şimdi
 * onun yerini alıyor. Bu yüzden enhancements.css'teki mobil
 * ".header-brand{justify-self:center}" kuralı da (o artık iç içe kaldığı
 * için doğrudan etkisiz kalıyordu) buraya, yeni dış sarmalayıcıya taşındı.
 */
.header-brand-group {
  display: flex;
  align-items: center;
}
@media (max-width: 600px) {
  /*
   * DÜZELTME: Logo mobilde tam ortada değildi. Sebep: hamburger menü
   * (sol, ~24px) ile sağdaki ikonlar (arama+hesap+sepet, ~116px)
   * birbirinden farklı genişlikte — bu yüzden "justify-self:center" ile
   * ortalamaya çalıştığımız orta grid hücresi de kendisi zaten viewport'un
   * gerçek merkezinde DEĞİLDİ (sol/sağ kenarlar eşit olmadığı için orta
   * hücre sola kaymış durumdaydı). Artık logo grid akışından tamamen
   * çıkarılıp header'a göre MUTLAK konumla tam merkeze sabitleniyor —
   * soldaki/sağdaki içerik ne kadar genişlik değişirse değişsin, logo
   * her zaman viewport'un tam ortasında kalıyor.
   */
  .header-brand-group {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    justify-self: auto;
  }
}

/*
 * DÜZELTME: Yönetim panelinden (Cms > Header Menü) bir üst menü öğesinin
 * ALTINA eklenen alt başlıklar (örn. "Kurumsal" > "Hakkımızda", "Kariyer")
 * veriden doğru şekilde çekiliyordu ama luma-header.php sadece depth=0
 * öğelerini tek satır <a> olarak basıyordu — alt başlıklar hiçbir yerde
 * render edilmiyordu. Artık her üst öğe bir .luma-nav-item sarmalayıcıya
 * alınıyor; varsa çocukları .luma-nav-submenu içinde açılan bir açılır
 * menüde gösteriliyor. Orijinal .header nav a stilleri (styles.css/
 * enhancements.css) hiç değiştirilmedi.
 *
 * DÜZELTME (mobil): Masaüstünde alt menü fare ile üzerine gelince
 * (hover) açılıyor — dokunmatik ekranlarda "hover" diye bir şey
 * olmadığı için bu hiç çalışmıyordu; menüye dokunmak doğrudan linke
 * gidiyor, alt başlıklara ULAŞILAMIYORDU. Bunun için gerçek bir
 * aç/kapa DÜĞMESİ eklendi (.luma-nav-toggle, script.js tarafından
 * yönetiliyor) — mobilde ok işaretine dokunmak alt menüyü açıp
 * kapatıyor, başlığın kendisine dokunmak ise normal şekilde o sayfaya
 * gidiyor. Masaüstünde bu düğme gizli kalır, hover davranışı aynen
 * çalışmaya devam eder.
 */
.header nav { align-items: center; }
.luma-nav-item { position: relative; }
.luma-nav-item > a { display: inline-block; }
.luma-nav-head { display: inline-flex; align-items: center; }
.luma-nav-submenu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 190px;
  background: var(--paper, #fffdf9);
  box-shadow: 0 14px 34px rgba(0,0,0,.14);
  padding: 6px 0;
  z-index: 20;
}
/*
 * DÜZELTME: Bu kural önceden ".has-children:hover .luma-nav-submenu"
 * (boşluklu, "torun" seçici) şeklindeydi — bu da "Ürünler" üzerine
 * gelindiğinde YALNIZCA kendi doğrudan alt menüsünü değil, İÇİNDEKİ
 * "Bebek Ürünleri" gibi öğelerin KENDİ alt menülerini de (Muslin Örtü
 * vb.) aynı anda, üst üste binerek göstermesine yol açıyordu — iki
 * seviyeli menülerde ("Ürünler > Bebek Ürünleri > Muslin Örtü") üç
 * farklı alt kategori listesi birbirine karışmış tek bir kutu gibi
 * görünüyordu. Artık ">" (doğrudan çocuk) seçici kullanılıyor — her
 * öğe SADECE KENDİ doğrudan alt menüsünü açıyor; "Bebek Ürünleri"nin
 * alt menüsü yalnızca "Bebek Ürünleri" üzerine gelindiğinde açılıyor,
 * kardeşleri ("Çocuk Ürünleri" vb.) etkilenmiyor. Gerçek tarayıcıda
 * bunu ölçerek doğruladım.
 */
.luma-nav-item.has-children:hover > .luma-nav-submenu,
.luma-nav-item.has-children:focus-within > .luma-nav-submenu {
  display: block;
}
/*
 * EKLENDİ: "Ürünler" gibi İKİ SEVİYELİ menüler için (Ürünler > Bebek
 * Ürünleri > Muslin Örtü) masaüstünde ikinci seviye artık ilkinin
 * ALTINA değil, YANINA (klasik "flyout" tarzı) açılıyor — üst üste
 * binip karışmasın diye. Üzerine gelme davranışı zaten genel
 * ".has-children:hover .luma-nav-submenu" kuralından miras kaldığı
 * için (bkz. yukarısı), derinlikten bağımsız otomatik çalışıyor;
 * yalnızca KONUMLANDIRMA farklı.
 */
.luma-nav-submenu-l2,
.luma-nav-submenu-l3 {
  top: -7px;
  left: 100%;
  margin-left: 2px;
}
.luma-nav-submenu a {
  display: block;
  padding: 10px 18px;
  font-size: 12px;
  border-bottom: 0 !important;
  white-space: nowrap;
}
.luma-nav-submenu a:hover { background: var(--cream, #f8f5ee); }
/*
 * DÜZELTME: Bu kural da (yukarıdaki hover kuralı gibi) önceden boşluklu
 * ("torun") bir seçiciydi — "Bebek Ürünleri" gibi bir öğe içindeki
 * TÜM alt seviyeler (örn. "Muslin Örtü" gibi hiç alt kategorisi
 * OLMAYAN yaprak öğeler dahil) yanlışlıkla ok işareti kazanıyordu,
 * çünkü onlar da ".has-children" olan bir üst öğenin İÇİNDE
 * (torunu) sayılıyordu. Artık ">" (doğrudan çocuk) seçici kullanılıyor
 * — ok yalnızca GERÇEKTEN alt menüsü olan öğenin KENDİ satırında
 * görünüyor, iç içe geçmiş yaprak öğelere sızmıyor.
 */
.luma-nav-item.has-children > .luma-nav-head > a:after {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  margin-left: 6px;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
}
.luma-nav-toggle {
  display: none;
}
/* Mobil açılır menü: nav dikey listeye dönüştüğünde alt menüler kendi
   öğelerinin altında normal akışta gösterilir. Hover/focus-within artık
   burada KULLANILMIYOR — yalnızca gerçek dokunma/tıklama ile açılan
   .is-open sınıfı (bkz. script.js) alt menüyü gösterir; aksi halde
   menüyü kapatmak da imkansız hale gelirdi (dokunmatik ekranda "hover"
   hiç bitmez).
 *
 * DÜZELTME: "Kurumsal" gibi alt menülü öğe, diğer menü öğeleriyle
 * ("Ana Sayfa", "Ürünler" — bunlar nav'ın ortalanmış/dar görünümünü
 * kullanıyordu) TUTARSIZ görünüyordu: alt menülü öğenin linki tam
 * genişlikte (display:block) basılıyordu, bu da onu diğerlerinden
 * farklı şekilde sola yaslanmış gösteriyor, aç/kapa oku da satırın en
 * sağ kenarına kopmuş gibi duruyordu. Bunu ".luma-nav-item{display:flex}"
 * ile düzeltmeye çalışırken İKİNCİ bir sorun ortaya çıktı: alt menü
 * (.luma-nav-submenu) de aynı satırın bir FLEX ÖĞESİ haline geliyor ve
 * "Kurumsal" yazısının ALTINDA değil YANINDA (ayrı bir sütun gibi)
 * açılıyordu. Kalıcı çözüm: başlık metni + ok artık ayrı bir
 * ".luma-nav-head" sarmalayıcısında birlikte ortalanan küçük bir birim;
 * alt menü ise bu sarmalayıcının DIŞINDA, normal blok akışında kalan bir
 * kardeş öğe — bu sayede her zaman "Kurumsal" başlığının TAM ALTINDA,
 * kendi satırında açılıyor, yanına kaymıyor.
 */
@media (max-width: 900px) {
  /*
   * DÜZELTME: Mobilde "Kurumsal" gibi alt menülü öğelerin yanında İKİ
   * ok görünüyordu — küçük CSS ok işareti (masaüstü hover menüsü için
   * tasarlanmıştı) hiç kaybolmuyordu, çünkü bu satırın eski hali
   * (".luma-nav-head > a:after") asıl "oku göster" kuralından
   * (".luma-nav-item.has-children .luma-nav-head > a:after") daha DÜŞÜK
   * CSS özgüllüğündeydi — bu yüzden mobilde gizlemesi gerekirken hiç
   * etkili olmuyordu. Aynı tam seçici kullanılarak özgüllük eşitlendi;
   * artık mobilde yalnızca gerçekten TIKLANABİLİR olan tek ok
   * (.luma-nav-toggle düğmesi) görünüyor.
   */
  .luma-nav-item.has-children > .luma-nav-head > a:after {
    display: none;
  }
  .luma-nav-item.has-children {
    border-bottom: 1px solid var(--line, #dedbd2);
  }
  .luma-nav-head {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: 100%;
  }
  .luma-nav-item.has-children > a {
    border-bottom: 0 !important;
    padding: 13px 0 !important;
  }
  .luma-nav-submenu {
    display: none;
    position: static;
    box-shadow: none;
    padding: 0 0 10px;
    text-align: center;
  }
  /*
   * DÜZELTME: Bu iki kural da önceden "torun" seçiciydi — "Ürünler"
   * açıldığında (is-open), İÇİNDEKİ "Bebek Ürünleri" gibi öğelerin
   * KENDİ alt menüleri de (henüz kendisi tıklanmamış olsa bile) otomatik
   * açık görünüyor, okları da yanlışlıkla dönük duruyordu — iki seviyeli
   * menülerde ikinci seviye, kullanıcı hiç dokunmadan baştan açık
   * geliyordu. Artık ">" (doğrudan çocuk) seçici kullanılıyor; her
   * seviye yalnızca KENDİSİ dokunulduğunda açılıyor.
   */
  .luma-nav-item.has-children.is-open > .luma-nav-submenu {
    display: block;
  }
  .luma-nav-toggle {
    display: block;
    position: relative;
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    min-height: 0;
    background: transparent;
    border: 0;
    padding: 0;
    cursor: pointer;
  }
  .luma-nav-toggle:before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 7px;
    height: 7px;
    margin: -6px 0 0 -4px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg);
    transition: transform .25s;
  }
  .luma-nav-item.has-children.is-open > .luma-nav-head .luma-nav-toggle:before {
    transform: rotate(225deg);
    margin-top: -3px;
  }
}


/*
 * DÜZELTME: "En Sevilenler" şeridindeki ve "Sizin İçin Seçtiğimiz
 * Ürünler" ızgarasındaki kartlar aslında hepsi AYNI genişlikteydi
 * (CSS zaten eşit genişlik veriyordu) — asıl sorun, ürün başlıklarının
 * farklı satır sayısına sarması (bazısı 1 satır, bazısı 3 satır)
 * yüzünden fiyat/"Detaylı İncele" satırının her kartta FARKLI bir
 * dikey konumda kalmasıydı. Bir satırlık aradaki bu kayma, kartların
 * göze "küçüklü büyüklü" / hizasız görünmesine yol açıyordu. Kartlar
 * artık dikey (flex column) düzende: görsel + başlık üstte doğal
 * akışında kalıyor, fiyat/buton satırı ise başlık kaç satır sürerse
 * sürsün her zaman kartın EN ALTINA sabitleniyor — bu sayede aynı
 * satırdaki tüm kartların fiyat/buton çizgisi birbiriyle hizalanıyor.
 */
.product,
.curated-product {
  display: flex;
  flex-direction: column;
}
.product-buy {
  margin-top: auto;
}
/*
 * .curated-product'ın DOM yapısı .product'tan farklı: fiyat/buton satırı
 * (.curated-buy) doğrudan karta değil, kind+başlık ile birlikte onları
 * saran isimsiz bir <div>'e yerleşiyor (bkz. includes/luma-product-card.php,
 * lumaCuratedCard). "margin-top:auto" hilesinin çalışması için o ara
 * <div>'in de flex-column olması ve kalan boşluğu doldurması gerekiyor.
 */
.curated-product > div:last-child {
  display: flex;
  flex-direction: column;
  flex: 1;
}
.curated-buy {
  margin-top: auto;
}

/* DÜZELTME (performans): font-awesome-pro.css kaldırıldığı için kapatma
   ikonu artık düz "×" karakteri — orijinal ikon fontunun boyut/hizasını
   koruyacak şekilde stillendi. */
.aq-close-x {
  display: inline-block;
  font-size: 1.15em;
  line-height: 1;
}

/*
 * EKLENDİ: "Özenli Paketleme / Güvenilir Teslimat / Güvenli Ödeme /
 * Müşteri Desteği" rozetlerindeki daireler artık admin panelinden
 * yüklenen GERÇEK ürün görsellerini gösterebiliyor (bkz.
 * sections/luma-benefits.php) — görsel yoksa eski soyut/dönen desen
 * aynen kalır.
 *
 * DÜZELTME (orantı): Ayrıca bu bölümdeki başlık yazısı ("Güvenli Ödeme"
 * vb.) 112px'lik daireye kıyasla gereğinden büyük/baskındı (17px, kalın
 * Playfair Display), açıklama yazısı ise çok küçük kalıyordu (11px) —
 * ikisi arasındaki oran dengesizdi. Başlık biraz küçültülüp harf
 * aralığı eklendi, açıklama biraz büyütülüp rengi biraz koyulaştırıldı;
 * artık ikon/görsel ile yazı arasındaki görsel ağırlık daha dengeli.
 */
.orbit.has-photo {
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}
.orbit.has-photo:before,
.orbit.has-photo:after {
  animation: none;
}
.benefits h4 {
  font-size: 15px !important;
  letter-spacing: .02em;
}
.benefits p {
  font-size: 12px !important;
  color: #6f7268 !important;
}

/*
 * EKLENDİ: Site girişinde e-posta toplama pop-up'ı
 * (includes/email-capture-popup.php). Varsayılan olarak gizli/kapalı
 * (.is-open eklenmeden görünmez), sayfa yüklendikten ~1.2sn sonra JS ile
 * açılıyor (bkz. o dosyanın içindeki <script>).
 */
.luma-email-popup {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.luma-email-popup.is-open {
  display: flex;
}
.luma-email-popup-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(31, 35, 29, .55);
}
.luma-email-popup-card {
  position: relative;
  background: var(--paper, #fffdf9);
  max-width: 420px;
  width: 100%;
  padding: 44px 38px 34px;
  text-align: center;
  box-shadow: 0 30px 70px rgba(0,0,0,.25);
}
.luma-email-popup-card .eyebrow {
  font-size: 10px;
  letter-spacing: .23em;
  font-weight: 600;
  color: var(--sage-dark, #6c7b66);
  margin: 0 0 10px;
}
.luma-email-popup-card h3 {
  font: 500 30px/1.1 "Playfair Display", serif;
  margin: 0 0 14px;
  color: var(--ink, #31372f);
}
.luma-email-popup-desc {
  font-size: 13px;
  line-height: 1.6;
  color: #61665e;
  margin: 0 0 18px;
}
.luma-email-popup-code {
  font-size: 12px;
  background: var(--cream, #f8f5ee);
  padding: 8px 14px;
  margin: 0 0 18px;
  letter-spacing: .04em;
}
.luma-email-popup-form {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
}
.luma-email-popup-form input[type="email"] {
  flex: 1;
  border: 1px solid var(--line, #dedbd2);
  padding: 12px 14px;
  font: inherit;
  font-size: 13px;
  background: #fff;
}
.luma-email-popup-form input[type="email"]:focus {
  outline: 2px solid var(--sage-dark, #6c7b66);
  outline-offset: 1px;
}
.luma-email-popup-form button {
  border: 0;
  background: var(--ink, #31372f);
  color: #fff;
  padding: 0 22px;
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: .25s;
}
.luma-email-popup-form button:hover {
  background: var(--sage-dark, #6c7b66);
}
.luma-email-popup-x {
  position: absolute;
  top: 12px;
  right: 14px;
  border: 0;
  background: none;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  color: var(--ink, #31372f);
  padding: 6px;
}
.luma-email-popup-skip {
  border: 0;
  background: none;
  font-size: 11px;
  letter-spacing: .06em;
  text-decoration: underline;
  color: #8a8d84;
  cursor: pointer;
}
@media (max-width: 480px) {
  .luma-email-popup-card { padding: 36px 24px 26px; }
  .luma-email-popup-card h3 { font-size: 25px; }
  .luma-email-popup-form { flex-direction: column; }
}

/*
 * DÜZELTME: Footer'daki bülten kutusu başlığı ("Güzel haberler, sakin
 * bir kutu." / iç sayfalarda "Kampanya ve yeniliklerden ilk siz
 * haberdar olun.") koyu footer zemininde GÖRÜNMÜYORDU. Sebep: iç
 * sayfalar main.css'i de yüklüyor ve o dosyadaki genel
 * "h1,h2,h3,h4,h5,h6{color:var(--aq-common-black)}" kuralı, footer
 * içindeki bu başlığı da koyu (neredeyse siyah) renge boyuyordu — aynı
 * koyu footer zemini üzerinde pratikte görünmez oluyordu. Footer'daki
 * diğer başlıklar ("Alışveriş", "Bizi Tanıyın" vb.) styles.css'teki
 * "footer h4{color:#cdd3ca}" kuralı sayesinde zaten açık renkliydi,
 * ama aynı koruma bu tek başlık (h3) için hiç yoktu. Şimdi ekleniyor.
 */
.footer-letters h3 {
  color: #f3f0e9;
}

/*
 * DÜZELTME: Marka hikayesi bölümündeki "01 / SOULE JOURNAL" rozeti
 * mobilde (≤600px) daha küçük bir daireye (94px → 74px) küçülüyordu,
 * ama İÇİNDEKİ yazının boyutu KÜÇÜLMÜYORDU (sabit 7px kalıyordu) — bu
 * yüzden yazı artık daha küçük olan dairenin dışına taşıyordu. Ayrıca
 * kullanıcı isteğiyle "JOURNAL" kelimesi tamamen kaldırıldı, yalnızca
 * "SOULE" kalıyor (bkz. sections/luma-story.php). Kısa metin artık
 * dairede rahatça sığdığı için biraz daha büyük ve okunaklı bir boyuta
 * (8px) getirildi — yine de dairenin çok altında kalıyor, taşma riski
 * yok (gerçek tarayıcıda ölçüldü).
 */
@media (max-width: 600px) {
  .story-stamp span {
    font-size: 8px;
    white-space: nowrap;
  }
}

/*
 * DÜZELTME: "En Sevilenler" bölümü mobilde otomatik kayan/sağa-sola
 * sürüklenen bir şerit (marquee) olarak kalıyordu — bu hem "kaydırmayı
 * durdur" talebine aykırıydı hem de yazı taşmalarına yol açıyordu
 * (dar kartlar + uzun ürün adları). Artık mobilde (≤900px) "Sizin İçin
 * Seçtiğimiz Ürünler" bölümüyle BİREBİR aynı davranışa geçiyor: sabit,
 * kaymayan, 2 sütunlu bir ızgara halinde aşağı doğru devam ediyor.
 * script.js, sonsuz kayma efekti için tüm kartları JS ile bir kez daha
 * KOPYALIYOR (aria-hidden="true" ile işaretli) — mobilde ızgaraya
 * geçilince bu kopyalar da görünüp her ürünü İKİ KEZ göstermesin diye
 * ayrıca gizleniyor.
 */
@media (max-width: 900px) {
  .product-marquee {
    width: 100%;
    margin-left: 0;
    overflow: visible;
    mask-image: none;
    -webkit-mask-image: none;
  }
  .products.marquee-track {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    width: auto;
    gap: 28px 10px;
    animation: none !important;
  }
  .marquee-track .product {
    width: auto;
  }
  .marquee-track .product[aria-hidden="true"] {
    display: none;
  }
}
@media (max-width: 380px) {
  .products.marquee-track {
    grid-template-columns: 1fr;
  }
}

/*
 * DÜZELTME (genel yazı taşması): Luma temasının hiçbir yerinde uzun
 * kelimelerin (özellikle Türkçe uzun ürün adları, e-posta adresleri
 * vb.) kart/kutu sınırlarını aşmasını engelleyen bir kural yoktu — dar
 * mobil ekranlarda tek bir uzun kelime, içinde bulunduğu kartın
 * dışına taşıp yatay kaydırmaya (ve görsel bozulmaya) yol açabiliyordu.
 * Metin içeren ana bileşenlere genel bir "gerekirse kelimeyi böl"
 * kuralı eklendi — normal kısa metinlerin görünümünü DEĞİŞTİRMEZ,
 * yalnızca sığmayan uzun kelimeler için devreye girer.
 */
.product h3,
.curated-product h3,
.news-card h3,
.collection h3,
.story h2,
.hero h1,
.quotes blockquote,
.luma-nav-submenu a,
.footer-top a {
  overflow-wrap: break-word;
  word-break: break-word;
}

/*
 * DÜZELTME: Yorumlar (testimonials) bölümü mobilde parmakla sağa-sola
 * kaydırılamıyordu (üst kapsayıcıda "overflow:hidden" vardı, konumu
 * tamamen JS'in hesapladığı bir "transform" ile belirleniyordu) ve
 * yalnızca ortadaki kart tam görünüyor, yanındakiler kısmen kesik/soluk
 * gösteriliyordu ("yorumun yarısı gözükmüyor"). "Haberler & İlham"
 * bölümü ise mobilde tarayıcının KENDİ NATİF kaydırmasını kullanıyor
 * (overflow-x:auto + scroll-snap) — parmakla akıcı şekilde kaydırılıyor,
 * her kart tam görünür şekilde ortalanıyor. Yorumlar bölümü de mobilde
 * (≤700px) BİREBİR aynı native kaydırma desenine geçiyor; JS tarafında
 * da bu genişlikte artık transform hesaplamıyor/otomatik döndürmüyor
 * (bkz. assets/luma/script.js) — kullanıcı kartı elle nereye
 * kaydırırsa orada kalıyor, haberler bölümüyle tutarlı davranıyor.
 */
@media (max-width: 700px) {
  .testimonial-window {
    overflow-x: auto;
    overflow-y: visible;
    scroll-snap-type: x mandatory;
    mask-image: none;
    -webkit-mask-image: none;
    margin: 0 -16px;
    padding: 8px 8vw 20px;
    scrollbar-width: none;
  }
  .testimonial-window::-webkit-scrollbar {
    display: none;
  }
  .quotes.quote-track {
    transform: none !important;
    width: max-content;
    gap: 14px;
  }
  .quotes.quote-track article {
    width: 84vw;
    min-width: 84vw;
    max-width: 84vw;
    scroll-snap-align: center;
    opacity: 1;
    transform: none !important;
    filter: none;
  }
  .quotes.quote-track article.mobile-focus {
    box-shadow: 0 18px 42px rgba(80, 89, 74, .2);
  }
  /* Noktalı sayfa göstergesi (.testimonial-dots) JS tarafından artık
     mobilde güncellenmiyor (yukarıdaki not) — yanıltıcı, hep aynı
     noktayı gösteren sabit bir görünüm bırakmamak için gizleniyor;
     "Haberler & İlham" bölümünde de zaten böyle bir gösterge yok. */
  .testimonial-dots {
    display: none;
  }
}

/*
 * EKLENDİ: Ürünler sayfası kenar çubuğundaki "Ürün Kategorisi" filtresi
 * artık üst/alt kategori hiyerarşisiyle (bkz. includes/functions.php →
 * renderCategorySidebarLevel()) render ediliyor. Bu CSS, temanın kendi
 * main.css dosyasında ZATEN var olan ama hiç kullanılmayan +/- aç-kapa
 * ikonuyla (".aq-product-sidebar-widget-categories ul > li i") uyumlu
 * çalışacak şekilde, alt kategori listesini varsayılan olarak GİZLİYOR
 * (main.css'te bu görünürlük kuralı hiç tanımlı değildi) — JS ile
 * (assets/js/main.js) tıklanınca açılıp kapanıyor. Ayrıca aktif/açık
 * durumdaki kırmızı vurgu rengi (main.css'te sabit #DE1518 olarak
 * kodluydu) sitenin somon paletiyle uyumlu hale getirildi.
 */
.aq-product-sidebar-widget-categories ul > li {
  position: relative;
}
.aq-product-sidebar-widget-categories ul > li > ul {
  display: none;
}
/*
 * KESİN SEBEP (gerçek tarayıcıda izole edilerek bulundu): Bu kutu
 * temanın kendi main.css dosyasında SABİT 210px yükseklik + gizli
 * kaydırma çubuğuyla (height:210px; overflow-y:scroll) tasarlanmıştı
 * — bu, ESKİ düz (hiyerarşisiz) kategori listesi için makuldü. Ama
 * artık kategoriler üst/alt hiyerarşisiyle gösterildiği ve bir dal
 * açıldığında içerik uzadığı için, 210px'in altında kalan kategoriler
 * (örn. üçüncü bir üst kategori ve altındakiler) DOM'da ve
 * "getBoundingClientRect" ölçümünde var olsa da, kutunun görünür
 * alanının DIŞINDA kalıyor ve gerçekte TIKLANAMIYOR/GÖRÜNMÜYORDU —
 * kullanıcı bunu fark etmeden içeride ince bir kaydırma çubuğunu
 * kaydırması gerekiyordu. Artık kutu, içeriği kadar (otomatik)
 * yükseklikte — hiçbir kategori gizli/ulaşılamaz kalmıyor, menüdeki
 * gibi düzgünce tüm liste görünüyor.
 */
.aq-product-sidebar-widget-categories {
  height: auto !important;
  overflow: visible !important;
}
/*
 * DÜZELTME (KESİN SEBEP — gerçek tarayıcıda tıklama testiyle bulundu):
 * +/- aç-kapa ikonu (<i>, position:absolute) tıklanamıyordu, çünkü
 * hemen yanındaki kategori linki (<a>) temanın kendi main.css'inde
 * "width:100%; position:relative" olarak tanımlı — yani <a> de
 * "konumlandırılmış" bir öğe haline geliyor VE tüm satırı (ikonun
 * durduğu alan dahil) kaplıyor. DOM sırasında <i>'den SONRA geldiği
 * için, aynı z-index'te iki konumlandırılmış öğeden SONRAKİ olan <a>
 * görsel olarak üstte kalıyor ve ikona yönelik tüm tıklamaları kendi
 * üzerine alıyordu — ikon görünüyordu ama asla tıklanamıyordu. Artık
 * ikona daha yüksek bir z-index veriliyor, böylece tıklamalar doğru
 * şekilde ikona ulaşıyor.
 */
.aq-product-sidebar-widget-categories ul > li > i {
  z-index: 2;
}
.aq-product-sidebar-widget-categories ul > li > i[aria-expanded="true"] ~ ul {
  display: block;
}
.aq-product-sidebar-widget-categories ul > li > i[aria-expanded="true"] ~ a {
  color: #c17462 !important;
}
.aq-product-sidebar-widget-categories ul > li > i[aria-expanded="true"] .arrow::after {
  background-color: #c17462 !important;
}