/* Seri karşılaması (sahip 05.10): seri sayfasında ürün kartlarının üstünde tam genişlik bant: fotoğraf + slogan + kısa açıklama
   + "Koleksiyona git" düğmesi (sayfayı ürün kartlarına kaydırır; js/seri-karsilama.js).
   Şablon: partials/seri-karsilama.blade.php. Panel: Voyager > Ürünler > Seri Karşılamaları (fotoğraf, odak, karartma, metin).
   - Bant sayfanın en üstünden başlar (sabit navbar'ın arkası koyu zemin), fotoğraf navbar'ın hemen altından.
     --sk-nav navbar yüksekliğidir: responsive.css'teki ".navbar {height}" kurallarıyla AYNI kalmalı (orası değişirse burası da).
   - Geniş ekran (992px+): bant ekran yüksekliğinde. Fotoğraf bandın %--sk-n kadarını kaplar (yazının karşı tarafı) ve yazı
     tarafındaki koyu zemine eriyerek karışır; böylece fotoğrafın neredeyse tamamı görünür ve büyütülmeden, net basılır.
     --sk-n: 100 = fotoğraf kenardan kenara. Değer fotoğrafın en / boy oranından hesaplanır (App\Support\SeriKarsilama::en),
     panelden değiştirilebilir.
   - Dar ekran: fotoğraf üstte, alt kenarı koyu zemine erir; yazı altında koyu zeminde. Yükseklik içeriğe göre.
   - --sk-pos: fotoğraf kırpılırken korunacak nokta (odak);  --sk-dim: yazının arkasındaki koyuluk (0–.9).
   - Sağdan sola dillerde (ar) yerleşim aynalanır. Hareket azaltma tercihinde giriş hareketi yok. */

.sk {
  --sk-n: 100;
  --sk-dim: .55;
  --sk-pos: 50% 30%;
  --sk-base: 20, 20, 21;
  --sk-nav: 140px;
  --sk-foto: clamp(230px, 66vw, 470px);
  position: relative;
  margin-bottom: clamp(40px, 5vw, 96px);
  overflow: hidden;
  isolation: isolate;
  background: rgb(var(--sk-base));
  color: #fff;
}
@media (max-width: 599px) { .sk { --sk-nav: 100px; } }
@media (min-width: 600px) and (max-width: 1199px) { .sk { --sk-nav: 110px; } }
@media (min-width: 1440px) and (max-width: 1799px) { .sk { --sk-nav: 110px; } }

/* ---------- Dar ekran: fotoğraf üstte, yazı altında ---------- */
.sk-media { position: relative; z-index: -2; height: var(--sk-foto); margin-top: var(--sk-nav); overflow: hidden; }
.sk-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--sk-pos);
}
.sk-shade {
  position: absolute;
  inset: var(--sk-nav) 0 auto;
  z-index: -1;
  height: calc(var(--sk-foto) + 1px);
  pointer-events: none;
  background: linear-gradient(0deg, rgb(var(--sk-base)) 0%, rgba(var(--sk-base), calc(.25 + var(--sk-dim) * .55)) 20%, rgba(var(--sk-base), 0) 58%);
}
.sk-inner { position: relative; margin-top: -34px; }
.sk-text { width: 100%; padding-bottom: clamp(34px, 9vw, 56px); }

/* ---------- Geniş ekran: bant ekran yüksekliğinde; fotoğraf yazının karşısında, koyu zemine eriyerek karışır ---------- */
@media (min-width: 992px) {
  .sk {
    --sk-bos: calc((100 - var(--sk-n)) * 1%);
    /* Koyu zemine eriten geçişin gücü: fotoğraf kenardan kenara yaklaştıkça (%94+) söner, %100'de hiç yoktur */
    --sk-kenar: clamp(0, calc((100 - var(--sk-n)) / 6), 1);
    display: flex;
    min-height: clamp(560px, 100vh, 1000px);
  }
  .sk-media { position: absolute; inset: var(--sk-nav) 0 0; inset-inline-start: var(--sk-bos); height: auto; margin: 0; }
  /* (1) fotoğrafın başladığı kenarı koyu zemine eriten geçiş, (2) yazı bölgesinde okunaklılık, (3) alt kenar */
  .sk-shade {
    inset: var(--sk-nav) 0 0;
    height: auto;
    background:
      linear-gradient(90deg, rgba(var(--sk-base), var(--sk-kenar)) 0%, rgba(var(--sk-base), var(--sk-kenar)) var(--sk-bos), rgba(var(--sk-base), calc(.74 * var(--sk-kenar))) calc(var(--sk-bos) + 4%), rgba(var(--sk-base), calc(.3 * var(--sk-kenar))) calc(var(--sk-bos) + 13%), rgba(var(--sk-base), 0) calc(var(--sk-bos) + 25%)),
      linear-gradient(90deg, rgba(var(--sk-base), calc(var(--sk-dim) * 1.3)) 0%, rgba(var(--sk-base), calc(var(--sk-dim) * .95)) 26%, rgba(var(--sk-base), calc(var(--sk-dim) * .35)) 48%, rgba(var(--sk-base), 0) 64%),
      linear-gradient(0deg, rgba(var(--sk-base), calc(var(--sk-dim) * .55)) 0%, rgba(var(--sk-base), 0) 30%);
  }
  [dir="rtl"] .sk-shade { transform: scaleX(-1); }
  .sk-inner { display: flex; align-items: center; margin-top: 0; padding-top: var(--sk-nav); }
  /* Yazı koyu zeminde kalır, en çok fotoğrafın eridiği bölüme taşar; fotoğraf kenardan kenara ise bandın yarısına kadar */
  .sk-text { width: min(680px, max(42vw, calc((106 - var(--sk-n)) * 1vw))); padding: 40px 0; }
}

.sk-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .88) !important;
  transition: color .2s ease;
}
.sk-eyebrow::before {
  content: "";
  flex: 0 0 auto;
  width: 34px;
  height: 2px;
  background: var(--primary-color, #AE0013);
  transition: width .25s ease;
}
.sk-eyebrow:hover, .sk-eyebrow:focus-visible { color: #fff !important; }
.sk-eyebrow:hover::before, .sk-eyebrow:focus-visible::before { width: 52px; }

.sk-title {
  margin: 16px 0 0;
  font-size: clamp(31px, 4vw, 74px);
  font-weight: 600;
  line-height: 1.07;
  letter-spacing: -.01em;
  text-wrap: balance;
  overflow-wrap: break-word;
  text-shadow: 0 2px 30px rgba(var(--sk-base), .45);
}
.sk-title--uzun { font-size: clamp(26px, 3.1vw, 56px); line-height: 1.13; }

.sk-slogan {
  margin: clamp(14px, 2vh, 22px) 0 0;
  font-size: clamp(18px, 1.55vw, 27px);
  font-weight: 300;
  line-height: 1.32;
  text-wrap: balance;
  text-shadow: 0 1px 22px rgba(var(--sk-base), .5);
}
.sk-desc {
  margin: 12px 0 0;
  max-width: 48ch;
  font-size: clamp(14px, .92vw, 16.5px);
  font-weight: 400;
  line-height: 1.7;
  color: rgba(255, 255, 255, .82);
  text-shadow: 0 1px 16px rgba(var(--sk-base), .6);
}

/* "Koleksiyona git": sayfayı ürün kartlarına kaydırır */
.sk-git { margin: clamp(22px, 3.4vh, 38px) 0 0; }
.sk-cta {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 13px 20px 13px 26px;
  border: 1px solid rgba(255, 255, 255, .5);
  border-radius: 999px;
  background: rgba(255, 255, 255, .05);
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #fff !important;
  transition: background-color .25s ease, border-color .25s ease, color .25s ease;
}
[dir="rtl"] .sk-cta { padding: 13px 26px 13px 20px; letter-spacing: 0; font-size: 14px; }
.sk-cta-ok { flex: 0 0 auto; width: 18px; height: 18px; }
.sk-cta:hover, .sk-cta:focus-visible { background: var(--primary-color, #AE0013); border-color: var(--primary-color, #AE0013); }
.sk-cta:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* Düğmenin hedefi: JS yokken de kartlar ekranın en üstüne yapışmasın */
#seri-urunler { scroll-margin-top: 28px; }

/* ---------- Giriş hareketi ---------- */
@media (prefers-reduced-motion: no-preference) {
  .sk-img { animation: sk-zoom 2s cubic-bezier(.2, .7, .2, 1) both; }
  .sk-text > * { animation: sk-up .75s cubic-bezier(.2, .8, .2, 1) both; }
  .sk-text > :nth-child(1) { animation-delay: .12s; }
  .sk-text > :nth-child(2) { animation-delay: .2s; }
  .sk-text > :nth-child(3) { animation-delay: .32s; }
  .sk-text > :nth-child(4) { animation-delay: .42s; }
  .sk-text > :nth-child(5) { animation-delay: .54s; }
  .sk-cta-ok { animation: sk-ok 2.4s ease-in-out 1.6s infinite; }
}
@keyframes sk-zoom { from { transform: scale(1.05); } to { transform: scale(1); } }
@keyframes sk-up { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
@keyframes sk-ok { 0%, 60%, 100% { transform: translateY(0); } 30% { transform: translateY(4px); } }

/* Düğmeden sonra odak ürün kartlarına geçer; kap etkileşimli olmadığı için odak halkası çizilmez */
#seri-urunler:focus { outline: none; }