/* =========================================================
   TEMA-11 — "Hero." cilt bakımı / kozmetik mağazası
   Bootstrap 5 üzerine yazılmış özel stiller
   ========================================================= */

:root{
  --ink:#1b1917;            /* ana siyah */
  --ink-2:#3a3633;
  --muted:#6f6a66;
  --line:#e7e5e2;
  --zemin:#ffffff;
  --kart:#f6f5f4;           /* ürün kartı zemini */
  --kart-2:#f1efee;
  --mor:#9aa0cd;            /* hero degrade */
  --mor-2:#c6c5e4;
  --yildiz:#f5b301;
  --metin:var(--ink);
  --metin-2:var(--muted);
  --cizgi:var(--line);
  --r:18px;
  --r-lg:26px;
  --ff-baslik:'Poppins',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --ff-govde:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
body{font-family:var(--ff-govde);color:var(--ink);background:var(--zemin);font-size:15px;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
h1,h2,h3,h4,h5{font-family:var(--ff-baslik);margin:0}

.kap{width:100%;max-width:1400px;margin:0 auto;padding:0 28px}

/* ---------------- duyuru şeridi (kayan yazı) ---------------- */
.duyuru{background:#231f20;color:#fff;overflow:hidden;font-size:12.5px;font-weight:600;letter-spacing:.01em}
.duyuru__akis{display:flex;gap:0;width:max-content;animation:kay 34s linear infinite}
.duyuru__grup{display:flex;gap:44px;padding:9px 22px 9px 0;white-space:nowrap}
.duyuru__grup span::after{content:"•";margin-left:44px;opacity:.6}
@keyframes kay{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.duyuru__akis{animation:none}}

/* ---------------- başlık ---------------- */
.tepe{position:sticky;top:0;z-index:50;background:#fff;border-bottom:1px solid var(--line)}
.tepe__ic{display:flex;align-items:center;gap:20px;height:64px}
.marka{font-family:var(--ff-baslik);font-size:26px;font-weight:700;letter-spacing:-.5px}

.menu{display:flex;align-items:center;gap:6px;margin:0 auto}
.menu__oge{position:relative}
.menu a{display:inline-flex;align-items:center;gap:6px;padding:8px 16px;border-radius:999px;
  font-size:14.5px;font-weight:500;color:var(--ink-2);transition:.16s}
.menu a:hover{background:var(--kart);color:var(--ink)}
.menu i{font-size:11px;opacity:.75;transition:.2s}
.menu__oge:hover > a i{transform:rotate(180deg)}

/* Mağaza açılır paneli */
.acilir{position:absolute;left:50%;top:calc(100% + 10px);transform:translate(-50%,6px);z-index:60;
  background:#fff;border:1px solid var(--line);border-radius:var(--r);box-shadow:0 24px 50px -22px rgba(0,0,0,.35);
  padding:26px 30px;min-width:620px;opacity:0;visibility:hidden;transition:.18s}
.acilir::before{content:"";position:absolute;left:0;right:0;top:-12px;height:12px}
.menu__oge:hover .acilir{opacity:1;visibility:visible;transform:translate(-50%,0)}
.acilir__ic{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px}
.acilir h5{font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:12px}
.acilir ul{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.acilir ul a{display:block;padding:6px 8px;border-radius:8px;font-size:14px;font-weight:500;color:var(--ink-2)}
.acilir ul a:hover{background:var(--kart);color:var(--ink)}
.acilir__tum{font-weight:600 !important;color:var(--ink) !important}
.acilir__tum i{font-size:12px;opacity:1;margin-left:4px}

.tepe__sag{display:flex;align-items:center;gap:14px}
.hap-btn{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--ink);border-radius:999px;
  padding:9px 18px;font-size:13.5px;font-weight:600;background:none;transition:.16s}
.hap-btn:hover{background:var(--ink);color:#fff}
.ikon-btn{border:0;background:none;padding:4px;font-size:19px;color:var(--ink);line-height:1;transition:.16s}
.ikon-btn:hover{opacity:.6}

/* ---------------- hero slider ---------------- */
.hero{position:relative;border-radius:var(--r-lg);overflow:hidden;margin-top:18px}
.hero__slayt{position:relative;min-height:520px;display:flex;align-items:center;
  background:linear-gradient(120deg,var(--mor-2),var(--mor))}
.hero__slayt--yesil{background:linear-gradient(120deg,#d7e7dd,#9dc3ad)}
.hero__slayt--krem{background:linear-gradient(120deg,#f3e7da,#dcc3a8)}
.hero__slayt--yesil .hero__gorsel::after{
  background:linear-gradient(90deg,rgba(157,195,173,.96) 0%,rgba(157,195,173,.85) 32%,rgba(157,195,173,.15) 62%,rgba(157,195,173,0) 78%)}
.hero__slayt--krem .hero__gorsel::after{
  background:linear-gradient(90deg,rgba(220,195,168,.96) 0%,rgba(220,195,168,.85) 32%,rgba(220,195,168,.15) 62%,rgba(220,195,168,0) 78%)}
.hero__gorsel{position:absolute;inset:0}
.hero__gorsel img{width:100%;height:100%;object-fit:cover;object-position:60% 40%}
.hero__gorsel::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(150,152,205,.96) 0%,rgba(150,152,205,.85) 32%,rgba(150,152,205,.15) 62%,rgba(150,152,205,0) 78%)}
.hero__ic{position:relative;z-index:2;max-width:520px;padding:64px 0 64px 56px}
.hero h1{font-size:clamp(38px,4.4vw,62px);font-weight:700;line-height:1.04;letter-spacing:-1.4px;color:#17151a}
.hero__alt{margin:22px 0 28px;font-size:16.5px;line-height:1.6;color:#221f28;max-width:400px}
.siyah-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--ink);color:#fff;
  border:0;border-radius:999px;padding:14px 30px;font-size:14.5px;font-weight:600;transition:.18s}
.siyah-btn:hover{background:#000;color:#fff;transform:translateY(-1px)}
.hero__not{display:block;margin-top:18px;font-size:12px;color:#2a2733;text-decoration:underline;text-underline-offset:3px}

.hero__rozet{position:absolute;right:130px;top:60px;z-index:3;width:104px;height:104px;border-radius:50%;
  background:var(--ink);color:#fff;display:grid;place-content:center;text-align:center;
  font-size:12.5px;font-weight:600;line-height:1.3;padding:10px}

/* slider okları ve noktaları */
.hero__ok{position:absolute;top:50%;transform:translateY(-50%);z-index:6;width:52px;height:52px;border-radius:50%;
  background:#fff;border:1px solid var(--line);color:var(--ink);font-size:20px;display:grid;place-items:center;
  box-shadow:0 10px 26px -12px rgba(0,0,0,.45);transition:.18s}
.hero__ok:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.hero__ok--ileri{right:22px}
.hero__noktalar{position:absolute;left:50%;transform:translateX(-50%);right:auto;bottom:18px;z-index:6;margin:0;
  display:flex;justify-content:center;gap:8px;background:rgba(255,255,255,.72);padding:7px 12px;border-radius:999px;
  backdrop-filter:blur(6px)}
/* Bootstrap gösterge düğmeleri content-box + şeffaf kenarlıkla geliyor, sıfırlıyoruz */
.hero__noktalar button[data-bs-target]{box-sizing:border-box;flex:none;width:9px;height:9px;border-radius:50%;
  background:rgba(27,25,23,.32);border:0;opacity:1;margin:0;padding:0;transition:.18s;text-indent:-9999px}
.hero__noktalar button[data-bs-target].active{background:var(--ink);width:24px;border-radius:999px}

/* ---------------- bölüm başlıkları ---------------- */
.bolum{padding:46px 0 0}
.bolum__bas{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:18px}
.bolum__bas h2{font-size:22px;font-weight:600;letter-spacing:-.2px}

/* ---------------- ürün kartı ---------------- */
.izgara-4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.urun{position:relative;background:var(--kart);border-radius:var(--r);padding:16px 16px 18px;display:flex;flex-direction:column}
.urun__gorsel{position:relative;aspect-ratio:1/1;margin-bottom:14px;border-radius:12px;overflow:hidden;background:#fff}
.urun__gorsel img{width:100%;height:100%;object-fit:cover;transition:.4s}
.urun:hover .urun__gorsel img{transform:scale(1.04)}
.urun__rozet{position:absolute;top:6px;right:6px;width:58px;height:58px;border-radius:50%;background:var(--ink);
  color:#fff;display:grid;place-content:center;text-align:center;font-size:11.5px;font-weight:700;line-height:1.15}
.urun__ad{font-size:14.5px;font-weight:600;margin-bottom:3px}
.urun__ad sup{font-size:9px;font-weight:500;top:-.6em}
.urun__aciklama{font-size:13.5px;color:var(--muted);margin:0 0 10px;line-height:1.4}
.puan{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--ink-2);margin-bottom:12px}
.puan__yildiz{color:var(--yildiz);font-size:12px;display:inline-flex;gap:1px;line-height:1}
.adet-satir{display:flex;gap:8px;margin-bottom:12px}
.adet{font-size:11.5px;font-weight:600;border-radius:6px;padding:4px 8px;background:#e9e7e5;color:var(--ink-2)}
.adet--secili{background:var(--ink);color:#fff}

.urun__alt{margin-top:auto;display:flex;align-items:stretch;background:#fff;border-radius:999px;overflow:hidden}
.urun__fiyat{flex:0 0 42%;display:grid;place-items:center;font-size:14px;font-weight:600;padding:12px 6px;gap:6px}
.urun__fiyat s{color:var(--muted);font-weight:400;font-size:12.5px;margin-left:5px}
.urun__sepet{flex:1;border:0;background:#fff;font-family:var(--ff-govde);font-size:14px;font-weight:600;
  padding:12px 8px;border-left:1px solid var(--line);transition:.16s}
.urun__sepet:hover{background:var(--ink);color:#fff}

/* tanıtım kartı (ürün ızgarasının içinde) */
.tanit{background:var(--kart-2);border-radius:var(--r);padding:26px 24px 0;display:flex;flex-direction:column;
  align-items:center;text-align:center;overflow:hidden}
.tanit h3{font-size:21px;font-weight:700;line-height:1.25;letter-spacing:-.3px}
.tanit .siyah-btn{margin:16px 0 18px;padding:11px 24px;font-size:13.5px}
.tanit__gorsel{margin-top:auto;width:100%;border-radius:12px 12px 0 0;overflow:hidden}
.tanit__gorsel img{width:100%;height:190px;object-fit:cover}

/* ---------------- yazı kartları ---------------- */
.izgara-5{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}
.yazi__gorsel{border-radius:var(--r);overflow:hidden;aspect-ratio:4/3;background:var(--kart)}
.yazi__gorsel img{width:100%;height:100%;object-fit:cover;transition:.45s}
.yazi:hover .yazi__gorsel img{transform:scale(1.05)}
.yazi h3{font-size:16px;font-weight:600;line-height:1.35;margin-top:12px;letter-spacing:-.2px}
.yazi span{display:block;margin-top:8px;font-size:12.5px;color:var(--muted)}

/* ---------------- duyarlılık ---------------- */
@media (max-width:1200px){
  .menu{gap:2px}
  .menu a{padding:8px 12px;font-size:13.5px}
  .izgara-5{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:1000px){
  .menu{display:none}
  .acilir{display:none}
  .hero__rozet{right:40px}
  .izgara-4{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:760px){
  .hero__slayt{min-height:440px}
  .hero__ok{width:42px;height:42px;font-size:17px}
  .hero__ok--ileri{right:12px}
  .hero__ic{padding:44px 24px}
  .hero__gorsel::after{background:linear-gradient(180deg,rgba(150,152,205,.92) 40%,rgba(150,152,205,.3) 100%)}
  .hero__rozet{width:84px;height:84px;font-size:11px;right:20px;top:20px}
  .izgara-5{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:520px){
  .izgara-4{grid-template-columns:1fr}
  .izgara-5{grid-template-columns:1fr}
  .tepe__sag .hap-btn{display:none}
}

/* =========================================================
   GOYOMOD ENTEGRASYON EKLERİ (tema-11)
   ========================================================= */

/* Mağazanın kendi logosu yüklüyse marka yazısı yerine görsel basılır. */
.marka__resim{max-height:40px;width:auto}

/* Mobil menü düğmesi — tema 9'un offcanvas menüsünü açar.
   Masaüstünde gizli; tema-11'in kendi menüsü 1000px altında kapanıyor. */
.tepe__burger{display:none;background:none;border:0;padding:0 2px;font-size:24px;
  color:var(--ink);line-height:1;cursor:pointer}
@media (max-width:1000px){ .tepe__burger{display:inline-flex;align-items:center} }

/* Sepet ikonundaki adet balonu. */
.ikon-btn--sepet{position:relative}
.ikon-btn__adet{position:absolute;top:-4px;right:-4px;min-width:17px;height:17px;padding:0 4px;
  border-radius:999px;background:var(--ink);color:#fff;font-size:10.5px;font-weight:700;
  display:flex;align-items:center;justify-content:center;line-height:1}

/* Statik şablonda olmayan fiyat durumları. */
.urun__fiyat s{margin-left:6px;font-size:12.5px;color:var(--muted)}
.urun__gizli{font-size:12.5px;font-weight:600}
.urun__tukendi{font-size:13px;color:var(--muted)}
.urun__ad a{color:inherit}

/* =========================================================
   MAĞAZA GÖRÜNÜMÜ BAĞLANTISI  (Panel > Temalar > Mağaza Görünümü)

   Gorunum::css() :root'a --accent/--paper/--surface/--radius/--ff-* basıyor.
   NOT: tema-11'in --ink, --muted, --line adları Gorunum'unkilerle AYNI; Gorunum
   stili bu dosyadan sonra basıldığı için onlar kendiliğinden geçiyor, burada
   yeniden tanımlanmıyor. Yalnız temaya özgü adlar bağlanıyor.
   ========================================================= */
:root{
  --zemin:  var(--paper,      #ffffff);
  /* --kart Gorunum'un --surface'ine BAĞLANMAZ: --surface beyaz zeminde beyaz
     çıkıyor ve ürün kartının gri tonu kayboluyordu (tasarım bozuluyor).
     Mağazacı kart zeminini değiştirmek isterse Mağaza Görünümü > Ürün Kartı >
     "Kart zemini" ayarı zaten ayrı bir kural basıyor. */
  --kart:   #f6f5f4;
  --kart-2: #f1efee;
  --mor:    var(--accent,     #9aa0cd);
  --mor-2:  var(--accent-2,   #c6c5e4);
  --r:      var(--radius,     18px);
  --r-lg:   var(--radius-lg,  26px);
  --ff-baslik: var(--ff-display, 'Poppins',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif);
  --ff-govde:  var(--ff-body,    'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif);
}

/* Sayfa genişliği ayarı (Dar / Normal / Geniş / Tam ekran). */
.kap{max-width:var(--maxw, 1400px)}

/* Başlığı/açıklaması olmayan slayt: mağazacının banner'ında yazı çoğu zaman
   görselin İÇİNE gömülü oluyor. Temanın degrade katmanı o yazıyı eziyor, üstelik
   `cover` kırpması yazıyı kesebiliyordu. Böyle slaytlarda degrade kapatılıp
   görsel tam boy gösteriliyor. (Tema 9'da da aynı ders var.) */
.hero__slayt--sade{min-height:0;display:block}
.hero__slayt--sade .hero__gorsel{position:static}
.hero__slayt--sade .hero__gorsel img{height:auto;object-fit:contain;object-position:center}
.hero__slayt--sade .hero__gorsel::after{display:none}

/* Tanıtım şeridi — ürün bölümlerinin ÜSTÜNDE, kendi alanında.
   Tasarımda banner ürün ızgarasının ilk hücresine giriyordu (.tanit); orası
   başlık + buton + görsel bekleyen bir kart. Mağazanın banner'ları düz görsel
   olduğu için hücrede sıkışıyordu, bu yüzden ayrı bir şeride alındı.
   Sütun sayısı banner adedine göre; adet sınıfı Blade'den geliyor. */
.tanit-serit{display:grid;gap:14px;margin:46px 0 0}
/* Üst boşluk temanın bölüm ritmiyle aynı (.bolum{padding:46px 0 0}); alt boşluk
   YOK çünkü hemen altındaki bölüm zaten kendi üst boşluğunu veriyor. Önceden
   üst boşluk sıfırdı ve şerit slider'a yapışık duruyordu. */
.tanit-serit--1{grid-template-columns:1fr}
.tanit-serit--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.tanit-serit--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.tanit-serit--4{grid-template-columns:repeat(4,minmax(0,1fr))}

.tanit-kart{position:relative;display:block;border-radius:var(--r);overflow:hidden;
  background:var(--kart);line-height:0}
.tanit-kart img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3;transition:transform .45s}
.tanit-kart:hover img{transform:scale(1.04)}
/* Tek banner varsa tam genişlik: 4/3 çok yüksek kalıyor, geniş orana geçiliyor. */
.tanit-serit--1 .tanit-kart img{aspect-ratio:16/5}
.tanit-serit--2 .tanit-kart img{aspect-ratio:16/9}

/* Başlık yoksa hiç basılmıyor — banner'ın kendi yazısının üstüne bant binmesin. */
.tanit-kart__yazi{position:absolute;left:0;right:0;bottom:0;padding:34px 16px 14px;
  background:linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.70) 100%);
  color:#fff;font-family:var(--ff-baslik);font-weight:600;font-size:15px;
  line-height:1.25;letter-spacing:-.2px}

@media (max-width:1000px){
  .tanit-serit--3,.tanit-serit--4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tanit-serit--3 .tanit-kart img,.tanit-serit--4 .tanit-kart img{aspect-ratio:4/3}
}
@media (max-width:520px){
  .tanit-serit{grid-template-columns:1fr}
  .tanit-serit .tanit-kart img{aspect-ratio:16/9}
}

/* Ürün listeleri (kategori, arama, favoriler, karşılaştırma, benzer ürünler)
   tema 9'dan gelen `.atl-grid` / `.swiper-slide` kaplarını kullanıyor.
   Kart hücreyi doldursun ki satırdaki kartlar eşit boyda dursun. */
.atl-grid > .urun,
.swiper-slide > .urun{height:100%}

/* Slider geri oku — tasarımda yalnız ileri oku vardı, simetriği eklendi.
   Konumlar temanın ileri okuyla aynı (22px / mobilde 12px). */
.hero__ok--geri{left:22px}
@media (max-width:760px){ .hero__ok--geri{left:12px} }