/* Sevinç Ol tasarım sistemi ile Premium panelin mevcut dinamik bileşenleri
   arasındaki küçük uyumluluk katmanı. İş mantığı sınıflarına dokunmaz. */

.so .hero__slide {
  min-height: clamp(640px, calc(100svh - 92px), 780px);
}

.so .hero__over {
  padding-top: clamp(32px, 5vh, 72px);
  padding-bottom: max(var(--hero-dots-h), 52px);
}

.so .hero__content--over {
  max-width: min(640px, 48vw);
}

.so .so-brand__mark {
  width: auto;
  height: 44px;
  object-fit: contain;
}

.so .so-drawer .so-brand__mark {
  height: 40px;
}

.so .so-footer .so-brand__mark {
  height: 50px;
}

.so .so-iconbtn .dot {
  min-width: 18px;
  height: 18px;
  padding-inline: 4px;
  display: grid;
  place-items: center;
  color: var(--so-on-accent);
  background: var(--so-accent);
  border: 2px solid var(--so-paper);
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
}

.so .so-mega__card .so-mega__add {
  cursor: pointer;
}

.so .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 44px;
  padding: 11px 18px;
  border: 1px solid transparent;
  border-radius: var(--so-r-btn);
  font: 700 0.9rem/1 var(--so-ff-body);
  cursor: pointer;
  transition: transform var(--so-dur-fast), background-color var(--so-dur-fast), border-color var(--so-dur-fast);
}

.so .btn:hover {
  transform: translateY(-2px);
}

.so .btn--primary {
  color: var(--so-on-accent);
  background: var(--so-accent);
  border-color: var(--so-accent);
}

.so .btn--block {
  width: 100%;
}

.so .hamt {
  min-height: 48px;
  padding: 9px 12px;
  color: var(--so-ink);
  background: color-mix(in srgb, var(--so-paper) 90%, transparent);
  border: 1px solid var(--so-line);
  border-radius: var(--so-r-sm);
  cursor: pointer;
}

.so .hamt.is-active {
  color: var(--so-on-brand);
  background: var(--so-brand);
  border-color: var(--so-brand);
}

.so .hamt.is-active strong,
.so .hamt.is-active small {
  color: inherit;
}

.so .so-fcol--brand > p {
  max-width: 38ch;
}

/* Mobil tabbar: sepet ikonu sarmalayıcı içinde olduğu için ana temadaki
   doğrudan-çocuk ikon ölçüsünü alamıyordu. Aynı zamanda her sekmeyi erişilebilir
   44px dokunma alanında ve iPhone safe-area üzerinde tut. */
@media (max-width: 1199.98px) {
  .so .so-tabbar__item {
    min-width: 44px;
    min-height: 44px;
    touch-action: manipulation;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
  }

  .so .so-tabbar__item:active {
    color: var(--so-brand);
  }

  .so .so-tabbar__ico {
    width: 28px;
    height: 24px;
  }

  .so .so-tabbar__ico > i {
    display: block;
    font-size: 22px;
    line-height: 1;
  }

  body.so {
    padding-bottom: calc(var(--so-tabbar-h) + env(safe-area-inset-bottom, 0px));
  }
}

/* Kimlik ve ödeme ekranlarında sabit WhatsApp düğmesi, uzun mobil formların
   alanlarını/şifre görünürlük düğmesini kapatıyordu. Bu akışlarda iletişim
   bağlantıları footer ve menüde kalır; dönüşüm formu tamamen erişilebilir olur. */
@media (max-width: 767.98px) {
  body.so:is([data-page="giris"], [data-page="kayit"], [data-page="odeme"]) .so-wa {
    display: none;
  }

  .so :is(input, textarea, select) {
    font-size: max(1rem, 16px);
  }
}

@media (max-width: 991.98px) {
  .so .hero__slide {
    min-height: 690px;
  }

  .so .hero__content--over {
    max-width: min(620px, 92vw);
  }
}

@media (max-width: 575.98px) {
  .so .hero__slide {
    min-height: 720px;
  }

  .so .hero__over {
    padding-top: 28px;
    align-items: flex-start;
  }

  .so .hero__title {
    font-size: clamp(2rem, 10vw, 3.2rem);
  }
}

/* ── İÇERİK GALERİSİ (faaliyet, galeri ve diğer detay sayfaları) ─────────────
   Galeri görselleri eskiden rakam şeridinin ızgarasına (.so-nw-figs) basılıyordu:
   farklı oranlı fotoğraflar boy boy kalıyor, aradaki gri zemin görünüyor ve
   görsellere tıklanamıyordu. Artık eşit kareler + tam ekran görüntüleyici. */
.so-galizgara {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-block: 2.2em;
}
@media (min-width: 576px) {
  .so-galizgara { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.so-galizgara__oge {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: var(--so-r-md, 12px);
  background: var(--so-paper-2);
  cursor: zoom-in;
}
.so-galizgara__oge img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s cubic-bezier(.2, .7, .2, 1);
}
.so-galizgara__oge:hover img,
.so-galizgara__oge:focus-visible img { transform: scale(1.05); }
.so-galizgara__oge:focus-visible { outline: 3px solid var(--so-brand); outline-offset: 2px; }
.so-galizgara__ic {
  position: absolute;
  right: 8px;
  bottom: 8px;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(8, 22, 31, .55);
  color: #fff;
  font-size: 16px;
  opacity: 0;
  transition: opacity .2s;
}
.so-galizgara__oge:hover .so-galizgara__ic,
.so-galizgara__oge:focus-visible .so-galizgara__ic { opacity: 1; }
@media (hover: none) { .so-galizgara__ic { opacity: 1; } }

/* ── MANŞET ALTI SAYAÇ ŞERİDİ ─────────────────────────────────────────────────
   Şerit masaüstünde sabit 5 sütunluydu; panelde 4 sayaç tanımlıyken sağda boş
   gri bir kutu kalıyordu. Sütun sayısı artık panelde yazılan satır sayısına
   göre (hero.php → --so-figs-n). Telefonda 2 sütun: son kutu yalnız tek
   sayıda sayaç varken tam satıra yayılır, çift sayıda boşluk kalmaz. */
@media (min-width: 992px) {
  .so-hero__figs { grid-template-columns: repeat(var(--so-figs-n, 5), minmax(0, 1fr)); }
}
.so-hero__figs--cift > :last-child { grid-column: auto; }

/* ── REELS — DİKEY VİDEO ŞERİDİ (anasayfa/reels.php) ─────────────────────── */
.so-reel {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 9 / 16;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: var(--so-arch, 24px);
  background: var(--so-deep);
  color: #fff;
  text-align: left;
  cursor: pointer;
  isolation: isolate;
}
.so-reel__shot,
.so-reel__shot img,
.so-reel__shot video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.so-reel__shot img,
.so-reel__shot video { transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
.so-reel:hover .so-reel__shot img,
.so-reel:hover .so-reel__shot video { transform: scale(1.04); }
.so-reel__bos {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: start;
  padding: 16px;
  font-size: 28px;
  background: linear-gradient(160deg, var(--so-brand) 0%, var(--so-deep) 100%);
}
.so-reel__perde {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(8, 22, 31, 0) 45%, rgba(8, 22, 31, .78) 100%);
  z-index: 1;
}
.so-reel__oynat {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .9);
  color: var(--so-deep);
  font-size: 24px;
  transform: translate(-50%, -50%);
  transition: transform .25s cubic-bezier(.2, .7, .2, 1), background .2s;
}
.so-reel:hover .so-reel__oynat { transform: translate(-50%, -50%) scale(1.08); background: #fff; }
.so-reel:focus-visible { outline: 3px solid var(--so-accent); outline-offset: 3px; }
.so-reel__baslik {
  position: absolute;
  right: 16px;
  bottom: 16px;
  left: 16px;
  z-index: 2;
  display: -webkit-box;
  overflow: hidden;
  font-family: var(--so-ff-display);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.3;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

.so-reelpen {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  padding: 16px;
}
.so-reelpen[hidden] { display: none; }
.so-reelpen__perde {
  position: absolute;
  inset: 0;
  background: rgba(8, 22, 31, .88);
}
.so-reelpen__kutu {
  position: relative;
  height: min(88vh, 860px);
  max-width: 100%;
  aspect-ratio: 9 / 16;
  overflow: hidden;
  border-radius: 18px;
  background: #000;
}
.so-reelpen__kutu video,
.so-reelpen__kutu iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: contain;
}
.so-reelpen__kapat {
  position: absolute;
  top: 16px;
  right: 16px;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .92);
  color: var(--so-deep);
  font-size: 20px;
  cursor: pointer;
}