/* =============================================
   CayeliTV – Ana Stil Dosyası
   ============================================= */

:root {
  --red:       #e30613;
  --red-dark:  #b0040f;
  --gold:      #f5c518;
  --dark:      #0a0a0f;
  --dark2:     #12121a;
  --dark3:     #1a1a26;
  --card-bg:   #1e1e2e;
  --border:    rgba(255,255,255,0.08);
  --text:      #e8e8f0;
  --text-muted:#9090a8;
  --radius:    12px;
  --shadow:    0 8px 32px rgba(0,0,0,0.5);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: 'Open Sans', sans-serif;
  background: var(--dark);
  color: var(--text);
  overflow-x: hidden;
}

.container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }

img { max-width: 100%; display: block; }

a { text-decoration: none; color: inherit; transition: all .3s; }

ul { list-style: none; }

/* ─── TICKER ─── */
.ticker-bar {
  background: var(--red);
  display: flex;
  align-items: center;
  overflow: hidden;
  height: 36px;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .5px;
  position: relative;
  z-index: 100;
}
.ticker-label {
  background: var(--red-dark);
  padding: 0 16px;
  white-space: nowrap;
  height: 100%;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.ticker-track {
  flex: 1;
  overflow: hidden;
  white-space: nowrap;
}
.ticker-track span {
  display: inline-block;
  animation: ticker 30s linear infinite;
  padding-left: 100%;
}
@keyframes ticker { 0%{transform:translateX(0)} 100%{transform:translateX(-100%)} }

/* ─── HEADER ─── */
.site-header {
  background: rgba(10,10,15,0.97);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 999;
  box-shadow: 0 2px 24px rgba(0,0,0,0.7);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
  gap: 16px;
}
.logo-link {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}
.site-logo { height: 52px; width: auto; object-fit: contain; }
.logo-text { display: flex; flex-direction: column; }
.brand-name {
  font-family: 'Montserrat', sans-serif;
  font-weight: 900;
  font-size: 1.5rem;
  color: #fff;
  line-height: 1;
  letter-spacing: 1px;
}
.brand-slogan {
  font-size: .65rem;
  color: var(--gold);
  font-weight: 600;
  letter-spacing: .8px;
  text-transform: uppercase;
}
.main-nav ul {
  display: flex;
  align-items: center;
  gap: 4px;
}
.main-nav a {
  padding: 8px 14px;
  border-radius: 8px;
  font-size: .88rem;
  font-weight: 600;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all .25s;
}
.main-nav a:hover, .main-nav a.active {
  color: #fff;
  background: rgba(255,255,255,0.07);
}
.main-nav .btn-live {
  background: var(--red);
  color: #fff;
  border-radius: 999px;
  padding: 8px 18px;
}
.main-nav .btn-live:hover { background: var(--red-dark); }
.pulse-dot { font-size: .6rem; animation: pulsed 1.2s ease infinite; }
@keyframes pulsed { 0%,100%{opacity:1} 50%{opacity:.3} }
.nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--border);
  color: #fff;
  font-size: 1.2rem;
  padding: 8px 12px;
  border-radius: 8px;
  cursor: pointer;
}

/* ─── BUTTONS ─── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 28px;
  border-radius: 999px;
  font-weight: 700;
  font-size: .95rem;
  font-family: 'Montserrat', sans-serif;
  transition: all .3s;
  cursor: pointer;
  border: none;
}
.btn-primary { background: var(--red); color: #fff; }
.btn-primary:hover { background: var(--red-dark); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(227,6,19,.4); }
.btn-outline { background: transparent; color: #fff; border: 2px solid rgba(255,255,255,.3); }
.btn-outline:hover { border-color: #fff; background: rgba(255,255,255,.08); transform: translateY(-2px); }
.btn-sm { padding: 8px 20px; font-size: .82rem; }
.mt-1 { margin-top: 12px; }

/* ─── HERO ─── */
.hero {
  position: relative;
  min-height: 92vh;
  display: flex;
  align-items: center;
  background: var(--dark);
  overflow: hidden;
}
.hero-bg-overlay {
  position: absolute; inset: 0;
  background: 
    radial-gradient(ellipse 80% 60% at 60% 40%, rgba(227,6,19,.18) 0%, transparent 60%),
    radial-gradient(ellipse 60% 80% at 10% 80%, rgba(245,197,24,.08) 0%, transparent 50%),
    linear-gradient(135deg, #0a0a0f 0%, #1a0a12 50%, #0a0a0f 100%);
}
.hero-particles {
  position: absolute; inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.particle {
  position: absolute;
  width: 3px; height: 3px;
  background: var(--gold);
  border-radius: 50%;
  opacity: 0;
  animation: float-up var(--d) linear var(--delay) infinite;
}
@keyframes float-up {
  0% { transform: translateY(100vh) scale(0); opacity: 0; }
  10% { opacity: .6; }
  90% { opacity: .3; }
  100% { transform: translateY(-10vh) scale(1); opacity: 0; }
}
.hero-content {
  position: relative;
  z-index: 2;
  max-width: 760px;
  padding: 80px 20px;
}
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(245,197,24,.12);
  border: 1px solid rgba(245,197,24,.3);
  color: var(--gold);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: 2px;
  padding: 6px 16px;
  border-radius: 999px;
  margin-bottom: 28px;
  text-transform: uppercase;
}
.badge-dot {
  width: 8px; height: 8px;
  background: var(--red);
  border-radius: 50%;
  animation: pulsed 1s ease infinite;
}
.hero-title {
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(2.5rem, 6vw, 5rem);
  font-weight: 900;
  line-height: 1.1;
  color: #fff;
  margin-bottom: 24px;
}
.gradient-text {
  background: linear-gradient(90deg, var(--red), var(--gold));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.hero-subtitle {
  font-size: 1.05rem;
  color: var(--text-muted);
  line-height: 1.7;
  margin-bottom: 36px;
}
.hero-buttons { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 48px; }
.hero-stats {
  display: flex;
  align-items: center;
  gap: 24px;
}
.stat { text-align: center; }
.stat-num {
  display: block;
  font-family: 'Montserrat', sans-serif;
  font-size: 2rem;
  font-weight: 900;
  color: var(--gold);
}
.stat-label { font-size: .75rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 1px; }
.stat-divider { width: 1px; height: 40px; background: var(--border); }
.hero-scroll-hint {
  position: absolute;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  color: var(--text-muted);
  font-size: 1.2rem;
  animation: bounce 2s ease infinite;
}
@keyframes bounce { 0%,100%{transform:translateX(-50%) translateY(0)} 50%{transform:translateX(-50%) translateY(8px)} }

/* ─── SECTION COMMONS ─── */
section { padding: 80px 0; }
.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 40px;
  flex-wrap: wrap;
  gap: 12px;
}
.section-header.centered { justify-content: center; text-align: center; flex-direction: column; }
.section-header h2 {
  font-family: 'Montserrat', sans-serif;
  font-size: 1.9rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  gap: 12px;
}
.section-header h2 i { color: var(--red); }
.section-header p { color: var(--text-muted); font-size: .95rem; margin-top: 8px; }

/* ─── LIVE SECTION ─── */
.section-live { background: var(--dark2); }
.live-dot {
  display: inline-block;
  width: 12px; height: 12px;
  background: var(--red);
  border-radius: 50%;
  animation: pulsed 1s ease infinite;
  box-shadow: 0 0 0 4px rgba(227,6,19,.25);
}
.live-wrapper {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 24px;
  align-items: start;
}
.live-player-box {
  aspect-ratio: 16/9;
  background: var(--card-bg);
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--border);
  position: relative;
}
.player-placeholder {
  position: absolute; inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--dark3), var(--card-bg));
}
.player-inner { text-align: center; color: var(--text-muted); }
.player-icon { font-size: 4rem; color: var(--red); margin-bottom: 12px; }
.player-inner p { font-size: 1.1rem; font-weight: 600; color: #fff; margin-bottom: 6px; }
.player-inner small { font-size: .8rem; }
.live-player-box iframe { width: 100%; height: 100%; border: none; }
.live-info-card, .social-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  margin-bottom: 16px;
}
.live-info-card h3, .social-card h3 {
  font-family: 'Montserrat', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.live-schedule-mini li {
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
  font-size: .88rem;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-muted);
}
.live-schedule-mini li:last-child { border-bottom: none; }
.live-schedule-mini li.current { color: #fff; font-weight: 700; }
.live-indicator {
  display: inline-block;
  width: 8px; height: 8px;
  background: var(--red);
  border-radius: 50%;
  animation: pulsed 1s ease infinite;
  flex-shrink: 0;
}
.social-links { display: flex; flex-direction: column; gap: 8px; }
.social-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: .88rem;
  font-weight: 600;
  color: #fff;
  transition: all .3s;
}
.social-btn.youtube { background: rgba(255,0,0,.15); border: 1px solid rgba(255,0,0,.2); }
.social-btn.youtube:hover { background: rgba(255,0,0,.3); }
.social-btn.instagram { background: rgba(225,48,108,.15); border: 1px solid rgba(225,48,108,.2); }
.social-btn.instagram:hover { background: rgba(225,48,108,.3); }
.social-btn.facebook { background: rgba(24,119,242,.15); border: 1px solid rgba(24,119,242,.2); }
.social-btn.facebook:hover { background: rgba(24,119,242,.3); }
.social-btn.tiktok { background: rgba(0,242,234,.1); border: 1px solid rgba(0,242,234,.2); }
.social-btn.tiktok:hover { background: rgba(0,242,234,.2); }

/* ─── FEATURES ─── */
.section-features { background: var(--dark); }
.features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.feature-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 32px 24px;
  transition: all .3s;
  position: relative;
  overflow: hidden;
}
.feature-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--red), var(--gold));
  transform: scaleX(0);
  transition: transform .3s;
}
.feature-card:hover::before { transform: scaleX(1); }
.feature-card:hover { transform: translateY(-6px); box-shadow: var(--shadow); border-color: rgba(227,6,19,.2); }
.feature-icon {
  width: 56px; height: 56px;
  background: rgba(227,6,19,.12);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  color: var(--red);
  margin-bottom: 20px;
}
.feature-card h3 { font-family: 'Montserrat', sans-serif; font-size: 1.1rem; font-weight: 700; margin-bottom: 10px; }
.feature-card p { color: var(--text-muted); font-size: .9rem; line-height: 1.6; }

/* ─── VIDEOS ─── */
.section-videos { background: var(--dark2); }
.videos-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.video-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  transition: all .3s;
}
.video-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.video-thumb {
  position: relative;
  aspect-ratio: 16/9;
  overflow: hidden;
  background: var(--dark3);
}
.video-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.video-card:hover .video-thumb img { transform: scale(1.06); }
.play-overlay {
  position: absolute; inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,.4);
  opacity: 0;
  transition: opacity .3s;
  font-size: 2.5rem;
  color: #fff;
}
.video-card:hover .play-overlay { opacity: 1; }
.video-duration {
  position: absolute;
  bottom: 8px; right: 8px;
  background: rgba(0,0,0,.8);
  color: #fff;
  font-size: .75rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 4px;
}
.video-info { padding: 14px 16px; }
.video-info h4 { font-family: 'Montserrat', sans-serif; font-size: .95rem; font-weight: 700; margin-bottom: 8px; line-height: 1.4; }
.video-info p { font-size: .8rem; color: var(--text-muted); display: flex; align-items: center; gap: 6px; }

/* ─── SCHEDULE ─── */
.section-schedule-preview { background: var(--dark3); }
.schedule-list { display: flex; flex-direction: column; gap: 8px; }
.schedule-item {
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 16px 20px;
  transition: all .3s;
}
.schedule-item:hover { border-color: rgba(227,6,19,.3); }
.schedule-item.active { border-color: var(--red); background: rgba(227,6,19,.08); }
.time {
  font-family: 'Montserrat', sans-serif;
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--gold);
  min-width: 60px;
}
.program { flex: 1; font-size: .95rem; display: flex; align-items: center; gap: 10px; }
.program i { color: var(--red); }
.type {
  font-size: .72rem;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: .5px;
}
.type-live { background: rgba(227,6,19,.2); color: var(--red); border: 1px solid rgba(227,6,19,.3); }
.type-radio { background: rgba(245,197,24,.15); color: var(--gold); border: 1px solid rgba(245,197,24,.3); }
.type-news { background: rgba(59,130,246,.15); color: #60a5fa; border: 1px solid rgba(59,130,246,.3); }
.type-special { background: rgba(168,85,247,.15); color: #c084fc; border: 1px solid rgba(168,85,247,.3); }

/* ─── ABOUT ─── */
.section-about { background: var(--dark2); }
.about-inner {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 60px;
  align-items: center;
}
.about-logo-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 32px;
  aspect-ratio: 1;
}
.about-logo { width: 100%; max-width: 180px; object-fit: contain; filter: drop-shadow(0 0 24px rgba(227,6,19,.3)); }
.about-text h2 { font-family: 'Montserrat', sans-serif; font-size: 2rem; font-weight: 800; margin-bottom: 16px; }
.about-text .lead { font-size: 1.1rem; font-weight: 600; color: #fff; margin-bottom: 14px; }
.about-text p { color: var(--text-muted); line-height: 1.8; margin-bottom: 20px; font-size: .95rem; }
blockquote {
  border-left: 4px solid var(--red);
  padding: 12px 20px;
  color: var(--gold);
  font-style: italic;
  font-size: 1.05rem;
  font-weight: 600;
  background: rgba(245,197,24,.06);
  border-radius: 0 8px 8px 0;
  margin-bottom: 24px;
}

/* ─── PAGE HERO (alt sayfalar) ─── */
.page-hero {
  background: linear-gradient(135deg, var(--dark2), var(--dark3));
  padding: 60px 0;
  border-bottom: 1px solid var(--border);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.page-hero::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 60% 100% at 50% 50%, rgba(227,6,19,.08), transparent);
}
.page-hero h1 { font-family: 'Montserrat', sans-serif; font-size: 2.5rem; font-weight: 900; position: relative; }
.page-hero p { color: var(--text-muted); margin-top: 12px; position: relative; font-size: 1rem; }
.breadcrumb { display: flex; align-items: center; justify-content: center; gap: 8px; margin-bottom: 16px; font-size: .8rem; color: var(--text-muted); }
.breadcrumb a { color: var(--red); }
.breadcrumb span { color: var(--border); }

/* ─── YAYIM AKIŞI (tam sayfa) ─── */
.schedule-full .schedule-item { font-size: 1rem; }
.schedule-full .time { font-size: 1.2rem; min-width: 70px; }

/* ─── VİDEOLAR (tam sayfa) ─── */
.videos-full-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.video-embed-box {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  transition: all .3s;
}
.video-embed-box:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.video-embed-box iframe { width: 100%; aspect-ratio: 16/9; border: none; display: block; }
.video-embed-box .video-info { padding: 14px 16px; }

/* ─── İLETİŞİM ─── */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: start;
}
.contact-form {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 36px;
}
.contact-form h3 { font-family: 'Montserrat', sans-serif; font-size: 1.4rem; font-weight: 800; margin-bottom: 24px; }
.form-group { margin-bottom: 18px; }
.form-group label { display: block; font-size: .85rem; font-weight: 600; color: var(--text-muted); margin-bottom: 6px; }
.form-group input,
.form-group textarea,
.form-group select {
  width: 100%;
  background: var(--dark3);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 16px;
  color: var(--text);
  font-size: .95rem;
  font-family: 'Open Sans', sans-serif;
  transition: border-color .3s;
  outline: none;
}
.form-group input:focus,
.form-group textarea:focus { border-color: var(--red); box-shadow: 0 0 0 3px rgba(227,6,19,.12); }
.form-group textarea { min-height: 130px; resize: vertical; }
.btn-submit {
  width: 100%;
  background: var(--red);
  color: #fff;
  padding: 14px;
  border-radius: 999px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 1rem;
  border: none;
  cursor: pointer;
  transition: all .3s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.btn-submit:hover { background: var(--red-dark); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(227,6,19,.35); }
.contact-info { display: flex; flex-direction: column; gap: 20px; }
.info-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
  display: flex;
  align-items: flex-start;
  gap: 16px;
  transition: all .3s;
}
.info-card:hover { border-color: rgba(227,6,19,.3); transform: translateX(4px); }
.info-icon {
  width: 46px; height: 46px;
  background: rgba(227,6,19,.12);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  color: var(--red);
  flex-shrink: 0;
}
.info-content h4 { font-family: 'Montserrat', sans-serif; font-size: .95rem; font-weight: 700; margin-bottom: 6px; }
.info-content p, .info-content a { color: var(--text-muted); font-size: .9rem; line-height: 1.5; }
.info-content a:hover { color: var(--red); }
.form-success {
  display: none;
  background: rgba(34,197,94,.1);
  border: 1px solid rgba(34,197,94,.3);
  color: #4ade80;
  border-radius: 8px;
  padding: 14px;
  text-align: center;
  margin-top: 12px;
  font-weight: 600;
}

/* ─── FOOTER ─── */
.site-footer { background: var(--dark2); border-top: 1px solid var(--border); }
.footer-top { padding: 60px 0 40px; }
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 40px;
}
.footer-logo { height: 52px; width: auto; object-fit: contain; margin-bottom: 14px; }
.footer-col > p { color: var(--text-muted); font-size: .88rem; line-height: 1.7; margin-bottom: 20px; }
.footer-col h4 {
  font-family: 'Montserrat', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 18px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--red);
  display: inline-block;
}
.footer-col ul { display: flex; flex-direction: column; gap: 10px; }
.footer-col ul a {
  color: var(--text-muted);
  font-size: .88rem;
  display: flex;
  align-items: center;
  gap: 8px;
}
.footer-col ul a i { color: var(--red); font-size: .7rem; }
.footer-col ul a:hover { color: #fff; padding-left: 4px; }
.footer-contact li { display: flex; align-items: flex-start; gap: 10px; color: var(--text-muted); font-size: .88rem; margin-bottom: 10px; }
.footer-contact i { color: var(--red); margin-top: 2px; flex-shrink: 0; }
.footer-socials { display: flex; gap: 10px; margin-top: 6px; }
.footer-socials a {
  width: 38px; height: 38px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  color: var(--text-muted);
  transition: all .3s;
}
.footer-socials a:hover { background: var(--red); border-color: var(--red); color: #fff; transform: translateY(-2px); }
.footer-live {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: .9rem;
  font-weight: 600;
  color: #fff;
  margin-bottom: 12px;
}
.live-dot-footer {
  width: 10px; height: 10px;
  background: var(--red);
  border-radius: 50%;
  animation: pulsed 1s ease infinite;
  box-shadow: 0 0 0 4px rgba(227,6,19,.2);
}
.footer-bottom {
  border-top: 1px solid var(--border);
  padding: 20px 0;
  text-align: center;
}
.footer-bottom p { color: var(--text-muted); font-size: .82rem; }

/* ─── BACK TO TOP ─── */
.back-to-top {
  position: fixed;
  bottom: 28px; right: 28px;
  width: 44px; height: 44px;
  background: var(--red);
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .9rem;
  opacity: 0;
  pointer-events: none;
  transition: all .3s;
  box-shadow: 0 4px 16px rgba(227,6,19,.4);
  z-index: 999;
}
.back-to-top.visible { opacity: 1; pointer-events: all; }
.back-to-top:hover { background: var(--red-dark); transform: translateY(-4px); }

/* ─── RESPONSIVE ─── */
@media (max-width: 1024px) {
  .features-grid, .videos-grid, .videos-full-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .live-wrapper { grid-template-columns: 1fr; }
  .live-sidebar { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
  .live-sidebar > *:last-child { grid-column: span 1; }
}
@media (max-width: 768px) {
  .nav-toggle { display: block; }
  .main-nav {
    display: none;
    position: absolute;
    top: 72px; left: 0; right: 0;
    background: rgba(10,10,15,0.98);
    border-top: 1px solid var(--border);
    padding: 16px 0;
  }
  .main-nav.open { display: block; }
  .main-nav ul { flex-direction: column; padding: 0 20px; gap: 4px; }
  .main-nav a { padding: 12px 16px; }
  .header-inner { position: relative; }
  .hero-title { font-size: 2.2rem; }
  .about-inner, .contact-grid { grid-template-columns: 1fr; }
  .about-logo-wrap { max-width: 220px; margin: 0 auto; aspect-ratio: auto; padding: 24px; }
  .live-sidebar { grid-template-columns: 1fr; }
  section { padding: 60px 0; }
  .footer-grid { grid-template-columns: 1fr; }
}
@media (max-width: 580px) {
  .features-grid, .videos-grid, .videos-full-grid { grid-template-columns: 1fr; }
  .hero-buttons { flex-direction: column; }
  .hero-stats { gap: 16px; }
  .stat-num { font-size: 1.5rem; }
}

/* ─── EK: Hero logo, modal, filtreler, uyarılar ─── */
.hero-grid{display:grid;grid-template-columns:1.3fr 1fr;align-items:center;gap:40px;position:relative;z-index:2}
.hero-logo-wrap{position:relative;display:flex;align-items:center;justify-content:center;aspect-ratio:1}
.hero-logo{width:70%;object-fit:contain;position:relative;z-index:2;filter:drop-shadow(0 0 40px rgba(227,6,19,.45));animation:floaty 5s ease-in-out infinite}
.hero-logo-ring{position:absolute;inset:6%;border-radius:50%;border:2px solid transparent;background:conic-gradient(from 0deg,var(--red),var(--gold),transparent,var(--red)) border-box;-webkit-mask:linear-gradient(#000 0 0) padding-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:spin 10s linear infinite;opacity:.7}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
.video-card{cursor:pointer}
.video-cat{position:absolute;top:8px;left:8px;background:var(--red);color:#fff;font-size:.7rem;font-weight:700;padding:3px 10px;border-radius:999px}
.now-badge{background:var(--red);color:#fff;font-size:.65rem;font-weight:800;padding:2px 8px;border-radius:999px;margin-left:8px;animation:pulsed 1.2s infinite}
.video-modal{position:fixed;inset:0;background:rgba(0,0,0,.88);display:none;align-items:center;justify-content:center;z-index:2000;padding:20px}
.video-modal.open{display:flex}
.video-modal-box{width:100%;max-width:960px;position:relative}
.video-modal-frame{aspect-ratio:16/9;background:#000;border-radius:var(--radius);overflow:hidden;box-shadow:0 0 60px rgba(227,6,19,.35)}
.video-modal-frame iframe{width:100%;height:100%;border:0}
.video-modal-box h3{font-family:'Montserrat',sans-serif;margin-top:14px;font-size:1.1rem}
.video-modal-close{position:absolute;top:-46px;right:0;background:var(--red);color:#fff;border:0;width:38px;height:38px;border-radius:50%;cursor:pointer;font-size:1rem}
.filter-bar{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:30px;justify-content:center}
.filter-btn{background:var(--card-bg);border:1px solid var(--border);color:var(--text-muted);padding:9px 20px;border-radius:999px;font-weight:600;cursor:pointer;font-family:'Montserrat',sans-serif;transition:.3s}
.filter-btn:hover,.filter-btn.active{background:var(--red);border-color:var(--red);color:#fff}
.alert{padding:12px 16px;border-radius:8px;margin-bottom:18px;font-weight:600}
.alert-ok{background:rgba(34,197,94,.12);color:#4ade80;border:1px solid rgba(34,197,94,.3)}
.alert-err{background:rgba(227,6,19,.12);color:#ff6b72;border:1px solid rgba(227,6,19,.3)}
.map-frame{width:100%;height:240px;border:0;border-radius:var(--radius)}
@media(max-width:768px){.hero-grid{grid-template-columns:1fr}.hero-logo-wrap{max-width:280px;margin:0 auto;order:-1}}


/* ===== ÇayeliTV automatic Instagram feed ===== */
.section-instagram{padding:76px 0;background:linear-gradient(180deg,rgba(20,15,26,.72),rgba(10,10,16,.95))}
.section-instagram .section-header h2{display:flex;align-items:center;gap:12px}
.section-instagram .section-header h2 .fa-instagram{color:#e1306c}
.instagram-feed-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.instagram-feed-card{min-width:0;overflow:hidden;border:1px solid rgba(255,255,255,.1);border-radius:14px;background:#1c1c2a;box-shadow:0 8px 28px rgba(0,0,0,.18)}
.instagram-feed-media{position:relative;display:flex;align-items:center;justify-content:center;aspect-ratio:4/5;overflow:hidden;background:#11111a}
.instagram-feed-media img,.instagram-feed-media video{width:100%;height:100%;object-fit:cover;display:block}
.instagram-feed-media video{object-fit:contain;background:#08080d}
/* Preserve the source video's native aspect ratio. Portrait Reels use 9:16; landscape posts keep 16:9. */
.instagram-feed-media.instagram-video-media{aspect-ratio:auto;min-height:0;height:auto;overflow:hidden;background:#08080d}
.instagram-feed-media.instagram-video-media video{display:block;width:100%;height:auto;max-height:720px;object-fit:contain;background:#08080d}
.instagram-feed-media>a:not(.instagram-feed-fallback){width:100%;height:100%}
.instagram-feed-badge{position:absolute;left:12px;top:12px;padding:7px 10px;border-radius:20px;background:rgba(0,0,0,.72);color:#fff;font-size:12px;font-weight:700}
.instagram-feed-fallback{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;width:100%;height:100%;color:#bdbdcc;text-decoration:none;font-size:42px}
.instagram-feed-fallback small{font-size:13px}
.instagram-feed-meta{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 15px;color:#a9a9bd;font-size:13px}
.instagram-feed-meta a{color:#fff;text-decoration:none;font-weight:700;white-space:nowrap}
.instagram-feed-meta a:hover{color:#e1306c}
@media(max-width:900px){.instagram-feed-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.section-instagram{padding:52px 0}.instagram-feed-grid{grid-template-columns:1fr}.instagram-feed-card{max-width:420px;width:100%;margin:0 auto}.section-instagram .section-header{align-items:flex-start;gap:15px;flex-direction:column}}


/* Instagram video fallback: resmi Instagram gömme oynatıcısı */
.instagram-embed-box{width:100%;min-height:600px;display:flex;align-items:flex-start;justify-content:center;overflow:hidden;background:#11111a;padding:8px 4px}
.instagram-embed-box .instagram-media{width:100%!important;max-width:540px!important;min-width:0!important;margin:0 auto!important}
.instagram-embed-box iframe{max-width:100%!important}
@media(max-width:560px){.instagram-embed-box{min-height:600px;padding:4px 0}}


/* Instagram çoklu gönderileri: fotoğraf ve video slaytları */
.instagram-carousel-track{display:flex;gap:0;width:100%;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;background:#08080d;scrollbar-width:thin}
.instagram-carousel-slide{flex:0 0 100%;min-width:0;scroll-snap-align:start}
.instagram-carousel-slide .instagram-feed-media{width:100%;min-height:220px}
.instagram-carousel-slide .instagram-feed-media.instagram-video-media{height:auto;min-height:0}
.instagram-carousel-slide .instagram-feed-media.instagram-video-media video{width:100%;height:auto;max-height:720px;object-fit:contain}
.instagram-carousel-slide .instagram-feed-media:not(.instagram-video-media){aspect-ratio:4/5}
.instagram-carousel-slide .instagram-feed-media>a:not(.instagram-feed-fallback){display:block;width:100%;height:100%}
.instagram-carousel-slide .instagram-feed-media img{width:100%;height:100%;object-fit:contain;background:#08080d}


/* ===== HERO: CAYELITV INSTAGRAM TOPLULUK KARTI ===== */
.hero-community-wrap {
  position: relative;
  z-index: 3;
  width: min(100%, 390px);
  min-width: 0;
  justify-self: center;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px 8px;
}
.hero-community-card {
  position: relative;
  isolation: isolate;
  width: 100%;
  max-width: 360px;
  padding: 30px 28px 24px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 26px;
  background:
    radial-gradient(circle at 90% 4%, rgba(225,48,108,.16), transparent 34%),
    linear-gradient(150deg, rgba(36,25,40,.96), rgba(12,10,17,.96));
  box-shadow: 0 22px 60px rgba(0,0,0,.34), 0 0 42px rgba(225,48,108,.08);
  text-align: center;
  backdrop-filter: blur(10px);
}
.hero-community-card::before {
  content: "";
  position: absolute;
  z-index: -1;
  width: 220px;
  height: 220px;
  top: -145px;
  right: -105px;
  border: 1px solid rgba(245,197,24,.22);
  border-radius: 50%;
  box-shadow: 0 0 0 18px rgba(245,197,24,.025), 0 0 0 38px rgba(227,6,19,.025);
}
.community-card-top {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  margin-bottom: 19px;
}
.community-instagram-icon {
  display: inline-grid;
  place-items: center;
  width: 43px;
  height: 43px;
  border-radius: 14px;
  color: #fff;
  background: linear-gradient(135deg, #7b36c8, #e1306c 58%, #f5a623);
  box-shadow: 0 7px 22px rgba(225,48,108,.24);
  font-size: 23px;
}
.community-eyebrow {
  color: var(--gold);
  font: 800 .76rem 'Montserrat', sans-serif;
  letter-spacing: 2px;
}
.community-title {
  margin: 0 0 19px;
  color: #fff;
  font: 800 clamp(1.12rem, 2vw, 1.42rem)/1.38 'Montserrat', sans-serif;
}
.community-title span {
  background: linear-gradient(90deg, #ff536f, #f5c518);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.community-count-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 13px 10px 15px;
  margin: 0 0 15px;
  border-top: 1px solid rgba(255,255,255,.10);
  border-bottom: 1px solid rgba(255,255,255,.10);
}
.community-count {
  display: inline-block;
  color: #fff;
  font: 900 clamp(2.45rem, 5.2vw, 3.65rem)/1.08 'Montserrat', sans-serif;
  letter-spacing: -1.7px;
  font-variant-numeric: tabular-nums lining-nums;
  background: linear-gradient(180deg, #fff 4%, #ffe7f1 44%, #f5c518 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 5px 18px rgba(225,48,108,.24));
}
.community-count-animated {
  min-width: 2ch;
  padding: 2px 8px 5px;
  border-radius: 12px;
  background-color: rgba(255,255,255,.035);
}
.community-count-animated.is-counted {
  animation: community-counter-settle .45s ease-out both;
}
@keyframes community-counter-settle {
  0% { transform: scale(1.035); filter: drop-shadow(0 0 18px rgba(245,197,24,.5)); }
  100% { transform: scale(1); filter: drop-shadow(0 5px 18px rgba(225,48,108,.24)); }
}
@media (prefers-reduced-motion: reduce) {
  .community-count-animated.is-counted { animation: none; }
}
.community-count-pending { color: var(--gold); }
.community-count-label {
  color: #b9b4c2;
  font-size: .83rem;
  font-weight: 700;
  letter-spacing: .3px;
}
.community-invite {
  max-width: 280px;
  margin: 0 auto 17px;
  color: #bcb7c5;
  font-size: .84rem;
  line-height: 1.55;
}
.community-follow-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: 100%;
  min-height: 47px;
  padding: 11px 15px;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(100deg, #b52d7d, #e1306c 52%, #ee6a45);
  font: 800 .82rem 'Montserrat', sans-serif;
  box-shadow: 0 8px 24px rgba(225,48,108,.20);
  transition: transform .2s ease, filter .2s ease, box-shadow .2s ease;
}
.community-follow-btn:hover {
  color: #fff;
  filter: brightness(1.08);
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(225,48,108,.28);
}
.community-follow-btn:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
}
.community-follow-btn i { font-size: 1.12rem; }
.community-updated {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  margin-top: 14px;
  color: #888393;
  font-size: .68rem;
}
.community-updated i { color: var(--gold); font-size: .68rem; }
@media (max-width: 1024px) {
  .hero-community-wrap { width: min(100%, 350px); }
  .hero-community-card { max-width: 330px; padding: 26px 22px 22px; }
}
@media (max-width: 768px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-content { order: 1; }
  .hero-community-wrap { order: 2; width: min(100%, 350px); margin: 10px auto 36px; }
}
@media (max-width: 580px) {
  .hero-community-wrap { width: min(100%, 330px); padding: 8px 0; }
  .hero-community-card { border-radius: 22px; padding: 24px 20px 20px; }
  .community-title { margin-bottom: 14px; }
  .community-count-block { padding: 11px 8px 13px; }
}


/* ===== ÇAYELİTV ANALOG / ODOMETER TOPLULUK SAYACI ===== */
.hero-community-card {
  border-color: rgba(245,197,24,.24);
  background:
    radial-gradient(ellipse at 50% 28%, rgba(227,6,19,.17), transparent 47%),
    radial-gradient(circle at 92% 2%, rgba(245,197,24,.12), transparent 30%),
    linear-gradient(155deg, rgba(29,20,29,.98), rgba(8,8,14,.98));
  box-shadow: 0 24px 64px rgba(0,0,0,.42), 0 0 36px rgba(227,6,19,.10), inset 0 1px 0 rgba(255,255,255,.06);
}
.community-card-top { margin-bottom: 12px; }
.community-title { margin-bottom: 8px; }
.analog-counter-block {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  width: 100%;
  padding: 8px 4px 12px;
  margin: 0 0 12px;
  border: 0;
  border-radius: 19px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,0) 45%),
    radial-gradient(ellipse at 50% 44%, rgba(245,197,24,.055), transparent 67%);
  overflow: hidden;
}
.community-meter-status {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: #d7c9aa;
  font: 800 .62rem/1.2 'Montserrat', sans-serif;
  letter-spacing: 1.75px;
}
.community-meter-led, .community-odometer-signal {
  display: inline-block;
  width: 7px;
  height: 7px;
  flex: 0 0 7px;
  border-radius: 50%;
  background: #f01625;
  box-shadow: 0 0 0 4px rgba(240,22,37,.12), 0 0 12px rgba(240,22,37,.9);
  animation: community-led-pulse 1.35s ease-in-out infinite;
}
@keyframes community-led-pulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 4px rgba(240,22,37,.12), 0 0 12px rgba(240,22,37,.8); }
  50% { opacity: .55; box-shadow: 0 0 0 7px rgba(240,22,37,.04), 0 0 18px rgba(240,22,37,1); }
}
.community-analog-meter {
  position: relative;
  width: min(100%, 302px);
  margin: 1px auto -9px;
  filter: drop-shadow(0 7px 16px rgba(0,0,0,.32));
}
.community-meter-svg { display: block; width: 100%; height: auto; overflow: visible; }
.community-meter-track {
  fill: none;
  stroke: rgba(255,255,255,.12);
  stroke-width: 8;
  stroke-linecap: round;
}
.community-meter-progress {
  fill: none;
  stroke: url(#communityMeterGradient);
  stroke-width: 8;
  stroke-linecap: round;
  stroke-dasharray: 383;
  stroke-dashoffset: 383;
  filter: drop-shadow(0 0 7px rgba(245,116,33,.65));
}
.community-meter-ticks line {
  stroke: rgba(255,255,255,.55);
  stroke-width: 2.2;
  stroke-linecap: round;
}
.community-meter-ticks line:nth-child(odd) { stroke: #f5c518; stroke-width: 3; }
.community-meter-labels text {
  fill: #8f8992;
  font: 700 9px 'Montserrat', sans-serif;
  letter-spacing: .3px;
}
.community-meter-needle {
  transform-box: view-box;
  transform-origin: 160px 153px;
}
.community-meter-needle path { fill: #fff3c5; stroke: #e30613; stroke-width: 1.1; }
.community-meter-hub-ring { fill: #151018; stroke: #f5c518; stroke-width: 3; }
.community-meter-hub { fill: #e30613; stroke: #fff0c1; stroke-width: 1.4; }
.community-odometer-panel {
  position: relative;
  z-index: 2;
  width: min(100%, 284px);
  margin: -3px auto 0;
  padding: 11px 10px 9px;
  border: 1px solid rgba(245,197,24,.28);
  border-radius: 13px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,0) 26%),
    linear-gradient(180deg, #201b24, #09090e 55%, #19131b);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), inset 0 -8px 18px rgba(0,0,0,.42), 0 9px 22px rgba(0,0,0,.34), 0 0 20px rgba(245,197,24,.055);
}
.community-odometer-heading, .community-odometer-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: #9e96a1;
  font: 800 .53rem 'Montserrat', sans-serif;
  letter-spacing: 1.25px;
}
.community-odometer-heading span:first-child { color: #f5c518; }
.community-count-animated {
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}
.community-count {
  display: block;
  margin: 7px 0 4px;
  color: #fff;
  font: 900 clamp(2rem, 4.4vw, 2.75rem)/1 'Montserrat', sans-serif;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums lining-nums;
  filter: none;
  background: none;
  -webkit-text-fill-color: initial;
}
.community-odometer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-height: 39px;
  padding: 1px 0;
  white-space: nowrap;
}
.community-odometer-digit {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 25px;
  height: 36px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 5px;
  color: #fff9e8;
  background: linear-gradient(180deg, #3c3540 0%, #211d27 47%, #121017 51%, #2d2631 100%);
  box-shadow: inset 0 1px 3px rgba(255,255,255,.12), inset 0 -2px 4px rgba(0,0,0,.5), 0 2px 4px rgba(0,0,0,.3);
}
.community-odometer-digit::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  background: rgba(0,0,0,.62);
  box-shadow: 0 1px 0 rgba(255,255,255,.08);
}
.community-odometer-digit-value {
  display: block;
  font: 900 1.27rem/1 'Montserrat', sans-serif;
  text-shadow: 0 1px 5px rgba(245,197,24,.18);
}
.community-odometer-digit.is-ticking .community-odometer-digit-value {
  animation: community-odometer-flip .19s cubic-bezier(.2,.75,.25,1) both;
}
@keyframes community-odometer-flip {
  0% { transform: translateY(-9px) rotateX(-72deg); opacity: .3; filter: blur(1px); }
  55% { transform: translateY(2px) rotateX(14deg); opacity: 1; filter: blur(0); }
  100% { transform: translateY(0) rotateX(0); opacity: 1; }
}
.community-odometer-separator {
  align-self: center;
  color: #f5c518;
  font: 900 1.15rem/1 'Montserrat', sans-serif;
  padding: 0 1px;
  text-shadow: 0 0 9px rgba(245,197,24,.35);
}
.community-count-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}
.community-count-label {
  display: block;
  color: #e3d8c4;
  font: 800 .65rem 'Montserrat', sans-serif;
  letter-spacing: 1.9px;
}
.community-odometer-footer {
  justify-content: center;
  margin-top: 8px;
  color: #827b87;
  font-size: .49rem;
  letter-spacing: 1.4px;
}
.community-odometer-signal { width: 5px; height: 5px; flex-basis: 5px; }
.community-count-pending { color: #f5c518; }
.community-count-animated.is-counted { animation: community-counter-arrive .6s ease-out both; }
@keyframes community-counter-arrive {
  0% { transform: scale(.97); filter: drop-shadow(0 0 0 rgba(245,197,24,0)); }
  65% { transform: scale(1.025); filter: drop-shadow(0 0 12px rgba(245,197,24,.28)); }
  100% { transform: scale(1); filter: none; }
}
@media (max-width: 1024px) {
  .hero-community-card { padding: 24px 20px 20px; }
  .community-analog-meter { width: min(100%, 285px); }
}
@media (max-width: 580px) {
  .hero-community-card { padding: 20px 16px 18px; }
  .analog-counter-block { padding: 7px 2px 10px; }
  .community-analog-meter { width: min(100%, 270px); }
  .community-odometer-panel { width: min(100%, 270px); padding: 10px 8px 8px; }
  .community-odometer-digit { width: 23px; height: 34px; }
  .community-odometer-digit-value { font-size: 1.18rem; }
}
@media (prefers-reduced-motion: reduce) {
  .community-meter-led, .community-odometer-signal { animation: none; }
  .community-count-animated.is-counted { animation: none; }
  .community-odometer-digit.is-ticking .community-odometer-digit-value { animation: none; }
}


/* ===== ÇAYELİTV DIGITAL INSTAGRAM FOLLOWER DISPLAY ===== */
.hero-community-wrap {
  width: min(100%, 410px);
  padding: 14px 8px;
}
.hero-community-card.digital-community-card {
  width: 100%;
  max-width: 390px;
  padding: 27px 26px 23px;
  border: 1px solid rgba(225,48,108,.30);
  border-radius: 24px;
  text-align: left;
  background:
    radial-gradient(ellipse at 88% 0%, rgba(225,48,108,.18), transparent 43%),
    linear-gradient(145deg, rgba(28,20,33,.98), rgba(9,9,15,.98) 74%);
  box-shadow: 0 24px 58px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.07);
}
.hero-community-card.digital-community-card::before {
  width: 160px;
  height: 160px;
  top: -118px;
  right: -88px;
  border-color: rgba(225,48,108,.27);
  box-shadow: 0 0 0 17px rgba(225,48,108,.035), 0 0 0 34px rgba(245,197,24,.025);
}
.digital-community-top {
  justify-content: flex-start;
  gap: 13px;
  margin-bottom: 18px;
}
.digital-instagram-icon {
  width: 52px;
  height: 52px;
  flex: 0 0 52px;
  border-radius: 16px;
  font-size: 28px;
  background: linear-gradient(145deg, #7040c9 0%, #d52d83 50%, #f18b39 100%);
  box-shadow: 0 8px 22px rgba(225,48,108,.26), inset 0 1px 0 rgba(255,255,255,.22);
}
.digital-community-heading {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.digital-community-heading strong {
  color: #fff;
  font: 800 .92rem/1.1 'Montserrat', sans-serif;
  letter-spacing: 1.2px;
}
.digital-community-heading small {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #a9a2b2;
  font: 700 .59rem/1.2 'Montserrat', sans-serif;
  letter-spacing: 1.55px;
}
.digital-community-heading .community-meter-led {
  width: 6px;
  height: 6px;
  flex-basis: 6px;
  margin: 0;
}
.digital-counter-block {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  padding: 15px 15px 13px;
  margin: 0 0 15px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 17px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.045), transparent 28%),
    #0a0b11;
  box-shadow: inset 0 2px 10px rgba(0,0,0,.48), 0 8px 22px rgba(0,0,0,.2);
  overflow: hidden;
}
.digital-counter-caption {
  color: #958d9e;
  font: 800 .59rem/1 'Montserrat', sans-serif;
  letter-spacing: 2px;
  text-align: center;
}
.community-count.digital-counter-value {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 67px;
  margin: 0;
  padding: 0;
  color: #f5f7ff;
  font: 900 2.6rem/1 'Montserrat', sans-serif;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
  background: none;
  -webkit-text-fill-color: initial;
  filter: none;
}
.digital-odometer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-height: 58px;
  width: 100%;
  white-space: nowrap;
}
.digital-digit {
  width: 39px;
  height: 55px;
  border: 1px solid rgba(225,48,108,.25);
  border-radius: 7px;
  color: #f8f4ff;
  background:
    linear-gradient(180deg, rgba(255,255,255,.09), transparent 42%),
    linear-gradient(180deg, #242033 0%, #171522 49%, #0e0d16 51%, #1a1725 100%);
  box-shadow: inset 0 1px 3px rgba(255,255,255,.09), inset 0 -3px 7px rgba(0,0,0,.45), 0 0 12px rgba(225,48,108,.10);
  perspective: 220px;
}
.digital-digit::after {
  background: rgba(0,0,0,.66);
  box-shadow: 0 1px 0 rgba(255,255,255,.08);
}
.digital-digit-value {
  color: #fff;
  font: 900 2rem/1 'Courier New', monospace;
  text-shadow: 0 0 8px rgba(255,93,170,.36), 0 0 18px rgba(225,48,108,.18);
}
.digital-digit.is-ticking .digital-digit-value {
  animation: digital-counter-flip .22s cubic-bezier(.2,.75,.25,1) both;
}
@keyframes digital-counter-flip {
  0% { transform: translateY(-12px) rotateX(-78deg); opacity: .25; filter: blur(1px); }
  60% { transform: translateY(2px) rotateX(12deg); opacity: 1; filter: none; }
  100% { transform: translateY(0) rotateX(0); opacity: 1; }
}
.digital-separator {
  color: #ff5ca8;
  font: 900 1.7rem/1 'Montserrat', sans-serif;
  padding: 0 1px;
  text-shadow: 0 0 10px rgba(225,48,108,.35);
}
.community-count-label.digital-counter-label {
  color: #f2b4d3;
  font: 800 .62rem/1 'Montserrat', sans-serif;
  letter-spacing: 2.5px;
  text-align: center;
}
.digital-community-invite {
  max-width: none;
  margin: 0 0 14px;
  color: #aaa4b2;
  font-size: .79rem;
  line-height: 1.55;
  text-align: center;
}
.community-follow-btn.digital-community-follow {
  min-height: 45px;
  padding: 10px 16px;
  justify-content: center;
  gap: 9px;
  border: 1px solid rgba(255,255,255,.18);
  background: linear-gradient(100deg, #8f36b5, #d52d83 52%, #ef704a);
  font-size: .78rem;
}
.digital-follow-arrow {
  margin-left: auto;
  font-size: .75rem !important;
  opacity: .85;
}
.community-updated.digital-community-updated {
  margin-top: 11px;
  font-size: .63rem;
}
.digital-community-updated i { color: #e65a9c; }
@media (max-width: 1024px) {
  .hero-community-wrap { width: min(100%, 390px); }
  .hero-community-card.digital-community-card { max-width: 370px; padding: 24px 22px 20px; }
}
@media (max-width: 768px) {
  .hero-community-wrap { width: min(100%, 390px); margin: 10px auto 30px; }
}
@media (max-width: 580px) {
  .hero-community-wrap { width: min(100%, 340px); padding: 8px 0; }
  .hero-community-card.digital-community-card { padding: 21px 18px 18px; border-radius: 21px; }
  .digital-digit { width: 35px; height: 49px; }
  .digital-digit-value { font-size: 1.8rem; }
  .digital-odometer { min-height: 52px; gap: 4px; }
  .community-count.digital-counter-value { min-height: 59px; }
}
@media (prefers-reduced-motion: reduce) {
  .community-meter-led, .digital-digit.is-ticking .digital-digit-value { animation: none !important; }
  .community-count-animated.is-counted { animation: none !important; }
}


/* ===== KOMPAKT YATAY INSTAGRAM TAKIPCI KARTI ===== */
.hero-community-wrap {
  width: min(100%, 470px);
  min-width: 0;
  padding: 12px 0;
  justify-self: end;
}
.hero-community-card.community-horizontal-card {
  width: 100%;
  max-width: 455px;
  padding: 17px 18px 13px;
  border: 1px solid rgba(225,48,108,.28);
  border-radius: 18px;
  background:
    radial-gradient(ellipse at 7% 0%, rgba(225,48,108,.16), transparent 48%),
    linear-gradient(135deg, rgba(31,23,38,.97), rgba(10,10,16,.98) 75%);
  box-shadow: 0 16px 38px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.07);
  backdrop-filter: blur(9px);
  overflow: hidden;
  text-align: left;
}
.hero-community-card.community-horizontal-card::before {
  width: 130px;
  height: 130px;
  top: -93px;
  right: -66px;
  border-color: rgba(225,48,108,.22);
  box-shadow: 0 0 0 13px rgba(225,48,108,.025), 0 0 0 26px rgba(245,197,24,.018);
}
.community-horizontal-main {
  position: relative;
  display: grid;
  grid-template-columns: minmax(118px, 1fr) auto auto;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.community-horizontal-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.community-horizontal-instagram {
  display: grid;
  place-items: center;
  flex: 0 0 43px;
  width: 43px;
  height: 43px;
  border: 1px solid rgba(255,255,255,.24);
  border-radius: 14px;
  color: #fff;
  font-size: 24px;
  background: linear-gradient(145deg, #7440c8 0%, #d72d82 56%, #f29a39 100%);
  box-shadow: 0 6px 18px rgba(225,48,108,.25), inset 0 1px 0 rgba(255,255,255,.24);
}
.community-horizontal-brand-text {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}
.community-horizontal-brand-text strong {
  color: #fff;
  font: 900 .9rem/1.05 'Montserrat', sans-serif;
  letter-spacing: 1.2px;
  white-space: nowrap;
}
.community-horizontal-brand-text small {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #a9a2b2;
  font: 800 .52rem/1.1 'Montserrat', sans-serif;
  letter-spacing: 1.25px;
  white-space: nowrap;
}
.community-horizontal-brand-text .community-meter-led {
  width: 5px;
  height: 5px;
  flex: 0 0 5px;
  margin: 0;
}
.community-horizontal-count {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-width: 0;
}
.community-horizontal-count-label {
  color: #bdb3c5;
  font: 800 .52rem/1 'Montserrat', sans-serif;
  letter-spacing: 1.8px;
  white-space: nowrap;
}
.community-count.digital-counter-value {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 39px;
  margin: 0;
  padding: 0;
  color: #fff;
  font: 900 1.5rem/1 'Montserrat', sans-serif;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
  background: none;
  -webkit-text-fill-color: initial;
  filter: none;
}
.community-horizontal-card .digital-odometer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  width: auto;
  min-height: 38px;
  white-space: nowrap;
}
.community-horizontal-card .digital-digit {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 23px;
  height: 34px;
  flex: 0 0 23px;
  border: 1px solid rgba(225,48,108,.26);
  border-radius: 5px;
  color: #fff;
  background: linear-gradient(180deg, #302637 0%, #1d1724 48%, #100e16 52%, #211925 100%);
  box-shadow: inset 0 1px 3px rgba(255,255,255,.09), inset 0 -2px 5px rgba(0,0,0,.42), 0 0 8px rgba(225,48,108,.10);
  perspective: 160px;
}
.community-horizontal-card .digital-digit::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  background: rgba(0,0,0,.55);
  box-shadow: 0 1px 0 rgba(255,255,255,.08);
}
.community-horizontal-card .digital-digit-value {
  color: #fff;
  font: 900 1.28rem/1 'Courier New', monospace;
  text-shadow: 0 0 7px rgba(255,93,170,.27);
}
.community-horizontal-card .digital-digit.is-ticking .digital-digit-value {
  animation: digital-counter-flip .22s cubic-bezier(.2,.75,.25,1) both;
}
.community-horizontal-card .digital-separator {
  color: #ff76b3;
  font: 900 .95rem/1 'Montserrat', sans-serif;
  padding: 0;
  text-shadow: 0 0 8px rgba(225,48,108,.3);
}
.community-count-sr {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0,0,0,0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
.community-horizontal-follow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-height: 34px;
  padding: 0 9px;
  border: 1px solid rgba(255,255,255,.17);
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(105deg, #8c36b7, #d52d83 58%, #ec684d);
  font: 800 .57rem/1 'Montserrat', sans-serif;
  letter-spacing: .35px;
  white-space: nowrap;
  box-shadow: 0 5px 13px rgba(225,48,108,.19);
  transition: transform .2s ease, filter .2s ease;
}
.community-horizontal-follow i:first-child { font-size: .92rem; }
.community-horizontal-follow i:last-child { font-size: .55rem; opacity: .8; }
.community-horizontal-follow:hover {
  color: #fff;
  filter: brightness(1.12);
  transform: translateY(-2px);
}
.community-horizontal-follow:focus-visible {
  outline: 2px solid #f5c518;
  outline-offset: 3px;
}
.community-horizontal-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 12px;
  padding-top: 9px;
  border-top: 1px solid rgba(255,255,255,.085);
  color: #9f98a9;
  font-size: .63rem;
  line-height: 1.2;
}
.community-horizontal-updated {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
  color: #8e8798;
  font-size: .58rem;
}
.community-horizontal-updated i { color: #f078aa; font-size: .58rem; }
.community-horizontal-card .community-count-animated.is-counted {
  animation: community-counter-settle .45s ease-out both;
}
@media (max-width: 1024px) {
  .hero-community-wrap { width: min(100%, 455px); }
  .hero-community-card.community-horizontal-card { max-width: 455px; }
}
@media (max-width: 768px) {
  .hero-community-wrap { width: min(100%, 455px); margin: 12px auto 28px; justify-self: center; }
}
@media (max-width: 480px) {
  .hero-community-wrap { width: min(100%, 410px); padding: 8px 0; }
  .hero-community-card.community-horizontal-card { padding: 14px 12px 11px; border-radius: 15px; }
  .community-horizontal-main { grid-template-columns: minmax(105px, 1fr) auto auto; gap: 7px; }
  .community-horizontal-instagram { width: 38px; height: 38px; flex-basis: 38px; border-radius: 12px; font-size: 21px; }
  .community-horizontal-brand { gap: 7px; }
  .community-horizontal-brand-text strong { font-size: .78rem; }
  .community-horizontal-brand-text small { font-size: .46rem; letter-spacing: .8px; }
  .community-horizontal-card .digital-digit { width: 20px; height: 30px; flex-basis: 20px; }
  .community-horizontal-card .digital-digit-value { font-size: 1.12rem; }
  .community-horizontal-card .digital-odometer { gap: 2px; min-height: 34px; }
  .community-count.digital-counter-value { min-height: 34px; }
  .community-horizontal-follow { min-height: 32px; padding: 0 7px; font-size: .51rem; gap: 4px; }
  .community-horizontal-follow i:first-child { font-size: .82rem; }
  .community-horizontal-footer { margin-top: 9px; padding-top: 7px; font-size: .58rem; }
  .community-horizontal-updated { font-size: .52rem; }
}
@media (max-width: 360px) {
  .community-horizontal-main { grid-template-columns: minmax(92px, 1fr) auto; }
  .community-horizontal-follow { grid-column: 1 / -1; justify-self: end; }
}
@media (prefers-reduced-motion: reduce) {
  .community-horizontal-card .digital-digit.is-ticking .digital-digit-value,
  .community-horizontal-card .community-count-animated.is-counted { animation: none !important; }
}


/* ===== ÇAYELİTV 10 SLOT AD CAROUSEL ===== */
.hero-ad-wrap {
  width: min(100%, 510px);
  min-width: 0;
  margin-left: auto;
  position: relative;
  z-index: 3;
}
.hero-ad-carousel,
.hero-ad-empty {
  width: 100%;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 22px;
  padding: 17px;
  background:
    radial-gradient(ellipse at 90% 0%, rgba(227,6,19,.15), transparent 42%),
    linear-gradient(145deg, rgba(28,23,34,.97), rgba(10,10,16,.98) 78%);
  box-shadow: 0 22px 55px rgba(0,0,0,.37), inset 0 1px 0 rgba(255,255,255,.07);
  backdrop-filter: blur(10px);
}
.hero-ad-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 2px 13px;
}
.hero-ad-heading > span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #fff;
  font: 800 .73rem/1.2 'Montserrat', sans-serif;
  letter-spacing: 1.7px;
}
.hero-ad-heading > span i { color: #f5c518; }
.hero-ad-heading small { color: #9c96a6; font-size: .68rem; white-space: nowrap; }
.hero-ad-viewport {
  position: relative;
  width: 100%;
  aspect-ratio: 1.22 / 1;
  max-height: 350px;
  border-radius: 15px;
  overflow: hidden;
  background: #090910;
  border: 1px solid rgba(255,255,255,.09);
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
}
.hero-ad-track {
  display: flex;
  align-items: stretch;
  width: 100%;
  height: 100%;
  transition: transform .58s cubic-bezier(.22,.72,.22,1);
  will-change: transform;
}
.hero-ad-slide { flex: 0 0 100%; width: 100%; height: 100%; min-width: 0; }
.hero-ad-open {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  border-radius: 0;
  overflow: hidden;
  background: #08080d;
  cursor: zoom-in;
  outline-offset: -4px;
}
.hero-ad-media {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  background: #08080d;
}
.hero-ad-preview { pointer-events: none; }
.hero-ad-sponsor-tag {
  position: absolute;
  top: 12px;
  left: 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 10px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 999px;
  color: #fff;
  background: rgba(8,8,14,.76);
  backdrop-filter: blur(7px);
  font: 800 .57rem/1 'Montserrat', sans-serif;
  letter-spacing: 1px;
}
.hero-ad-sponsor-tag i { color: #f5c518; }
.hero-ad-caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: block;
  padding: 34px 16px 14px;
  overflow: hidden;
  color: #fff;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
  font: 800 .83rem/1.3 'Montserrat', sans-serif;
  background: linear-gradient(transparent, rgba(0,0,0,.8));
  pointer-events: none;
}
.hero-ad-expand {
  position: absolute;
  right: 12px;
  top: 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 9px;
  border-radius: 8px;
  color: #fff;
  background: rgba(8,8,14,.62);
  font-size: .65rem;
  opacity: .88;
  pointer-events: none;
}
.hero-ad-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 13px;
}
.hero-ad-arrow {
  display: grid;
  place-items: center;
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 50%;
  color: #fff;
  background: rgba(255,255,255,.07);
  cursor: pointer;
  transition: .2s ease;
}
.hero-ad-arrow:hover { border-color: var(--red); background: var(--red); }
.hero-ad-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 auto;
  flex-wrap: wrap;
  gap: 5px;
  min-width: 0;
}
.hero-ad-page {
  display: grid;
  place-items: center;
  flex: 0 0 25px;
  width: 25px;
  height: 25px;
  padding: 0;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 7px;
  color: #aaa4b3;
  background: rgba(255,255,255,.045);
  font: 800 .62rem/1 'Montserrat', sans-serif;
  cursor: pointer;
  transition: color .2s ease, background .2s ease, border-color .2s ease, transform .2s ease;
}
.hero-ad-page:hover { color: #fff; border-color: rgba(245,197,24,.55); }
.hero-ad-page.active {
  color: #fff;
  border-color: var(--red);
  background: linear-gradient(145deg, #f20a1b, #bb0010);
  box-shadow: 0 0 13px rgba(227,6,19,.32);
  transform: translateY(-1px);
}
.hero-ad-position {
  flex: 0 0 auto;
  min-width: 28px;
  color: #a9a2b0;
  text-align: center;
  font: 700 .6rem/1 'Montserrat', sans-serif;
}
.hero-ad-progress {
  height: 2px;
  margin: 11px 3px 0;
  overflow: hidden;
  border-radius: 2px;
  background: rgba(255,255,255,.08);
}
.hero-ad-progress span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #e30613, #f5c518);
}
.hero-ad-empty {
  min-height: 330px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.hero-ad-empty-icon {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  margin-bottom: 16px;
  border: 1px solid rgba(245,197,24,.3);
  border-radius: 20px;
  color: #f5c518;
  background: rgba(245,197,24,.08);
  font-size: 25px;
}
.hero-ad-empty-kicker { color: #f5c518; font: 800 .67rem/1 'Montserrat', sans-serif; letter-spacing: 2px; }
.hero-ad-empty strong { margin-top: 14px; color: #fff; font: 900 clamp(1.5rem,3vw,2rem)/1.2 'Montserrat',sans-serif; }
.hero-ad-empty p { max-width: 280px; color: #a7a0b0; font-size: .84rem; line-height: 1.6; }
.hero-ad-empty-contact { display: inline-flex; align-items: center; gap: 8px; margin-top: 4px; padding: 10px 16px; border: 1px solid rgba(255,255,255,.16); border-radius: 999px; color: #fff; background: rgba(255,255,255,.07); text-decoration: none; font-size: .78rem; font-weight: 700; }
.hero-ad-empty-contact:hover { background: var(--red); color: #fff; }
.hero-ad-lightbox[hidden] { display: none !important; }
.hero-ad-lightbox {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px;
  background: rgba(3,3,8,.92);
  backdrop-filter: blur(9px);
}
.hero-ad-lightbox-panel {
  width: min(100%, 1050px);
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.hero-ad-lightbox-title { max-width: 100%; color: #fff; text-align: center; font: 800 1rem/1.35 'Montserrat',sans-serif; }
.hero-ad-lightbox-media { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 0; max-height: calc(90vh - 55px); }
.hero-ad-lightbox-media img,
.hero-ad-lightbox-media video { display: block; max-width: 100%; max-height: calc(90vh - 55px); object-fit: contain; border-radius: 10px; background: #000; }
.hero-ad-lightbox-media video { width: min(100%, 950px); }
.hero-ad-lightbox-close {
  position: absolute;
  top: 18px;
  right: 20px;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 50%;
  color: #fff;
  background: rgba(255,255,255,.1);
  font-size: 18px;
  cursor: pointer;
}
.hero-ad-lightbox-close:hover { background: var(--red); border-color: var(--red); }
@media (max-width: 900px) {
  .hero-ad-wrap { width: min(100%, 480px); margin: 14px auto 28px; }
  .hero-ad-viewport { max-height: 330px; }
}
@media (max-width: 580px) {
  .hero-ad-wrap { width: min(100%, 440px); }
  .hero-ad-carousel, .hero-ad-empty { padding: 13px; border-radius: 18px; }
  .hero-ad-viewport { aspect-ratio: 1.12 / 1; max-height: 300px; }
  .hero-ad-heading { margin-bottom: 10px; }
  .hero-ad-heading > span { font-size: .64rem; letter-spacing: 1.3px; }
  .hero-ad-heading small { font-size: .6rem; }
  .hero-ad-controls { gap: 5px; margin-top: 10px; }
  .hero-ad-arrow { width: 29px; height: 29px; flex-basis: 29px; }
  .hero-ad-pagination { gap: 4px; }
  .hero-ad-page { width: 23px; height: 23px; flex-basis: 23px; font-size: .57rem; }
  .hero-ad-position { min-width: 24px; font-size: .55rem; }
  .hero-ad-lightbox { padding: 16px; }
  .hero-ad-lightbox-close { top: 10px; right: 10px; width: 40px; height: 40px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-ad-track { transition: none; }
  .hero-ad-page, .hero-ad-arrow, .hero-ad-empty-contact { transition: none; }
}


/* Reklam kaydırıcısı: masaüstünde 4 kartlık yatay şerit, mobilde tek kart. */
.section-advertising .hero-ad-viewport {
  overflow: hidden !important;
}
.section-advertising .hero-ad-track {
  display: flex !important;
  flex-wrap: nowrap !important;
  grid-template-columns: none !important;
  align-items: stretch;
  width: 100%;
  height: auto;
  gap: 16px;
  transform: translate3d(0,0,0);
  transition: transform .55s cubic-bezier(.4,0,.2,1);
  will-change: transform;
}
.section-advertising .hero-ad-slide {
  flex: 0 0 calc((100% - 48px) / 4) !important;
  width: calc((100% - 48px) / 4) !important;
  min-width: 0;
  height: auto;
}
.section-advertising .hero-ad-controls {
  display: flex !important;
}
.section-advertising .hero-ad-progress {
  display: block !important;
}
@media (max-width: 900px) and (min-width: 769px) {
  .section-advertising .hero-ad-slide {
    flex-basis: calc((100% - 32px) / 3) !important;
    width: calc((100% - 32px) / 3) !important;
  }
}
@media (max-width: 768px) {
  .section-advertising .hero-ad-viewport {
    overflow: hidden !important;
    aspect-ratio: 16 / 9;
    touch-action: pan-y;
  }
  .section-advertising .hero-ad-track {
    gap: 0 !important;
    width: 100%;
    height: 100%;
    transform: translate3d(0,0,0);
    transition: transform .48s cubic-bezier(.2,.75,.25,1);
  }
  .section-advertising .hero-ad-slide {
    flex: 0 0 100% !important;
    width: 100% !important;
    min-width: 100% !important;
    height: 100%;
  }
  .section-advertising .hero-ad-open {
    height: 100%;
    aspect-ratio: auto;
  }
}


/* ===== INSTAGRAM REELS / PAYLAŞIM KAYDIRICISI ===== */
.section-instagram .instagram-feed-carousel {
  position: relative;
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 42px;
}
.section-instagram .instagram-feed-viewport {
  width: 100%;
  overflow: hidden;
  border-radius: 16px;
  touch-action: pan-y;
}
.section-instagram .instagram-feed-grid {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: stretch;
  width: 100%;
  gap: 18px;
  transform: translate3d(0,0,0);
  transition: transform .55s cubic-bezier(.22,.75,.25,1);
  will-change: transform;
}
.section-instagram .instagram-feed-card {
  flex: 0 0 calc((100% - 54px) / 4);
  width: calc((100% - 54px) / 4);
  min-width: 0;
  margin: 0;
  height: auto;
  display: flex;
  flex-direction: column;
}
.section-instagram .instagram-feed-card .instagram-feed-media,
.section-instagram .instagram-feed-card .instagram-embed-box,
.section-instagram .instagram-feed-card .instagram-carousel-track {
  width: 100%;
}
.section-instagram .instagram-feed-card .instagram-feed-media {
  aspect-ratio: 4 / 5;
  min-height: 0;
}
.section-instagram .instagram-feed-card .instagram-feed-media.instagram-video-media {
  aspect-ratio: 4 / 5;
  height: auto;
  min-height: 0;
}
.section-instagram .instagram-feed-card .instagram-feed-media.instagram-video-media video {
  width: 100%;
  height: 100%;
  max-height: 460px;
  object-fit: contain;
}
.section-instagram .instagram-feed-card .instagram-feed-meta {
  margin-top: auto;
}
.section-instagram .instagram-feed-arrow {
  position: absolute;
  top: 44%;
  z-index: 5;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid rgba(255,255,255,.17);
  border-radius: 50%;
  color: #fff;
  background: rgba(24,20,32,.94);
  box-shadow: 0 5px 18px rgba(0,0,0,.28);
  cursor: pointer;
  transition: background .2s ease, transform .2s ease, opacity .2s ease;
}
.section-instagram .instagram-feed-arrow:hover:not(:disabled) {
  background: #d92f79;
  transform: scale(1.07);
}
.section-instagram .instagram-feed-arrow:disabled {
  opacity: .28;
  cursor: default;
}
.section-instagram .instagram-feed-prev { left: 0; }
.section-instagram .instagram-feed-next { right: 0; }
.section-instagram .instagram-feed-carousel-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  margin-top: 17px;
}
.section-instagram .instagram-feed-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 7px;
}
.section-instagram .instagram-feed-page-dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 50px;
  background: rgba(255,255,255,.24);
  cursor: pointer;
  transition: width .2s ease, background .2s ease;
}
.section-instagram .instagram-feed-page-dot.active {
  width: 24px;
  background: #e1306c;
}
.section-instagram .instagram-feed-position {
  color: #aaa4b4;
  font: 700 .68rem/1 'Montserrat', sans-serif;
  font-variant-numeric: tabular-nums;
  letter-spacing: 1px;
}
@media (max-width: 900px) and (min-width: 561px) {
  .section-instagram .instagram-feed-card {
    flex-basis: calc((100% - 18px) / 2);
    width: calc((100% - 18px) / 2);
  }
}
@media (max-width: 560px) {
  .section-instagram .instagram-feed-carousel {
    padding: 0 28px;
  }
  .section-instagram .instagram-feed-grid {
    gap: 0;
  }
  .section-instagram .instagram-feed-card {
    flex-basis: 100%;
    width: 100%;
  }
  .section-instagram .instagram-feed-arrow {
    width: 30px;
    height: 30px;
    top: 42%;
  }
  .section-instagram .instagram-feed-prev { left: -1px; }
  .section-instagram .instagram-feed-next { right: -1px; }
  .section-instagram .instagram-feed-carousel-footer { margin-top: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  .section-instagram .instagram-feed-grid,
  .section-instagram .instagram-feed-arrow,
  .section-instagram .instagram-feed-page-dot {
    transition: none !important;
  }
}


/* Masaüstünde Instagram kartlarını daha büyük göster; tablet ve telefon ölçüleri korunur. */
@media (min-width: 901px) {
  .section-instagram .instagram-feed-carousel {
    max-width: 1160px;
    padding-left: 28px;
    padding-right: 28px;
  }

  .section-instagram .instagram-feed-grid {
    gap: 20px;
  }

  .section-instagram .instagram-feed-card {
    flex-basis: calc((100% - 60px) / 4);
    width: calc((100% - 60px) / 4);
  }

  .section-instagram .instagram-feed-card .instagram-feed-media {
    aspect-ratio: 4 / 5;
  }

  .section-instagram .instagram-feed-card .instagram-feed-media.instagram-video-media {
    aspect-ratio: 4 / 5;
  }

  .section-instagram .instagram-feed-card .instagram-feed-media.instagram-video-media video {
    max-height: 520px;
  }

  .section-instagram .instagram-feed-arrow {
    width: 40px;
    height: 40px;
  }
}


/* Masaüstü Instagram kartları: bir kademe daha geniş ve uzun. Dört kart düzeni korunur. */
@media (min-width: 901px) {
  .section-instagram .instagram-feed-carousel {
    max-width: 1240px;
    padding-left: 18px;
    padding-right: 18px;
  }

  .section-instagram .instagram-feed-grid {
    gap: 14px;
  }

  .section-instagram .instagram-feed-card {
    flex-basis: calc((100% - 42px) / 4);
    width: calc((100% - 42px) / 4);
  }

  .section-instagram .instagram-feed-card .instagram-feed-media,
  .section-instagram .instagram-feed-card .instagram-feed-media.instagram-video-media {
    aspect-ratio: 3 / 4;
  }

  .section-instagram .instagram-feed-card .instagram-feed-media.instagram-video-media video {
    max-height: 560px;
  }

  .section-instagram .instagram-feed-carousel-footer {
    margin-top: 20px;
  }

  .section-instagram .instagram-feed-page-dot {
    width: 9px;
    height: 9px;
  }

  .section-instagram .instagram-feed-page-dot.active {
    width: 27px;
  }
}



/* ===== MOBİL INSTAGRAM: TEK KARTLIK YATAY KAYDIRMA ===== */
@media (max-width: 560px) {
  /* Reklam panosuyla benzer genişlikte, ortalanmış alan. */
  .section-instagram .instagram-feed-carousel {
    display: block;
    width: 100%;
    max-width: 440px;
    margin: 0 auto;
    padding: 0 20px;
    box-sizing: border-box;
  }

  .section-instagram .instagram-feed-viewport {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow: hidden !important;
    border-radius: 16px;
    touch-action: pan-y pinch-zoom;
  }

  /* Grid'i kesin olarak tek satırlı yatay şeride çevir. */
  .section-instagram .instagram-feed-grid {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    grid-template-columns: none !important;
    align-items: stretch;
    width: 100%;
    min-width: 0;
    height: auto;
    gap: 0 !important;
    transform: translate3d(0,0,0);
    transition: transform .48s cubic-bezier(.2,.75,.25,1);
    will-change: transform;
  }

  /* Her gönderi viewport genişliğinin tam bir tanesi kadar yer kaplar.
     Böylece aynı anda yalnızca bir video görünür; kalanlar sağa doğru kayar. */
  .section-instagram .instagram-feed-grid > .instagram-feed-card {
    display: flex !important;
    flex: 0 0 100% !important;
    width: 100% !important;
    min-width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    height: auto;
    align-self: stretch;
  }

  .section-instagram .instagram-feed-card .instagram-feed-media {
    width: 100%;
    max-width: 100%;
    aspect-ratio: 4 / 5;
    min-height: 0;
  }

  .section-instagram .instagram-feed-card .instagram-feed-media.instagram-video-media {
    aspect-ratio: 4 / 5;
    width: 100%;
    min-height: 0;
    height: auto;
  }

  .section-instagram .instagram-feed-card .instagram-feed-media.instagram-video-media video {
    display: block;
    width: 100%;
    height: auto;
    max-height: 560px;
    object-fit: contain;
  }

  .section-instagram .instagram-feed-arrow {
    width: 32px;
    height: 32px;
    top: 43%;
    z-index: 6;
  }

  .section-instagram .instagram-feed-prev { left: 0; }
  .section-instagram .instagram-feed-next { right: 0; }

  .section-instagram .instagram-feed-carousel-footer {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 12px;
  }
}

/* Küçük telefonlarda da dışarı taşmadan geniş alanı kullan. */
@media (max-width: 380px) {
  .section-instagram .instagram-feed-carousel {
    max-width: 100%;
    padding-left: 17px;
    padding-right: 17px;
  }
}

/* Mobilde kullanıcı parmağıyla yatay kaydırırken dikey sayfa kaydırması engellenmez. */
@media (prefers-reduced-motion: reduce) {
  .section-instagram .instagram-feed-grid {
    transition: none !important;
  }
}

/* ===== INSTAGRAM VIDEOLARI: TAM GÖRÜNTÜ, DOĞAL ORAN ===== */
/* Sabit 3:4 / 4:5 kutu ve object-fit:cover kaldırılır.
   Video kendi en-boy oranını korur; yakınlaştırma/kırpma yapılmaz. */
.section-instagram .instagram-feed-card .instagram-feed-media.instagram-video-media,
.section-instagram .instagram-carousel-slide .instagram-feed-media.instagram-video-media {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  aspect-ratio: auto !important;
  overflow: visible !important;
  padding: 0 !important;
  background: transparent !important;
}

.section-instagram .instagram-feed-card .instagram-feed-media.instagram-video-media > video,
.section-instagram .instagram-carousel-slide .instagram-feed-media.instagram-video-media > video {
  position: relative !important;
  inset: auto !important;
  display: block !important;
  width: 100% !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: none !important;
  margin: 0 !important;
  aspect-ratio: auto !important;
  object-fit: contain !important;
  object-position: center center !important;
  background: transparent !important;
}

/* Mobilde de video kutusu, videonun gerçek oranına göre uzayıp kısalır.
   Böylece dikey/d yatay videolarda kenar boşluğu veya yakınlaştırma oluşmaz. */
@media (max-width: 560px) {
  .section-instagram .instagram-feed-card,
  .section-instagram .instagram-carousel-slide {
    height: auto !important;
  }

  .section-instagram .instagram-feed-card .instagram-feed-media.instagram-video-media,
  .section-instagram .instagram-carousel-slide .instagram-feed-media.instagram-video-media {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    aspect-ratio: auto !important;
    overflow: visible !important;
    background: transparent !important;
  }

  .section-instagram .instagram-feed-card .instagram-feed-media.instagram-video-media > video,
  .section-instagram .instagram-carousel-slide .instagram-feed-media.instagram-video-media > video {
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    object-fit: contain !important;
  }
}


/* ===== MOBİL INSTAGRAM VİDEO KAYDIRICISI – REKLAM PANELİ DÜZENİ ===== */
@media (max-width: 560px) {
  .section-instagram .instagram-feed-carousel {
    display: grid !important;
    grid-template-columns: 36px minmax(0, 1fr) 36px;
    grid-template-areas:
      "viewport viewport viewport"
      "prev footer next";
    align-items: center;
    gap: 9px 7px;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    padding: 12px !important;
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 18px;
    background: rgba(7,7,16,.78);
    box-shadow: 0 12px 34px rgba(0,0,0,.24);
  }

  .section-instagram .instagram-feed-viewport {
    grid-area: viewport;
    width: 100%;
    min-width: 0;
    overflow: hidden !important;
    border-radius: 12px;
    background: #08080d;
    touch-action: pan-y;
    -webkit-user-select: none;
    user-select: none;
  }

  .section-instagram .instagram-feed-grid {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: flex-start !important;
    gap: 0 !important;
    width: 100%;
    transition: transform .48s cubic-bezier(.22,.72,.22,1);
    will-change: transform;
  }

  .section-instagram .instagram-feed-card {
    flex: 0 0 100% !important;
    width: 100% !important;
    min-width: 100% !important;
    max-width: none !important;
    height: auto !important;
    margin: 0 !important;
    overflow: hidden;
    border-radius: 12px;
    box-shadow: none;
  }

  /* Video dosyasının doğal oranını koru; büyütme ve kırpma yapma. */
  .section-instagram .instagram-feed-card .instagram-feed-media.instagram-video-media,
  .section-instagram .instagram-feed-card .instagram-feed-media.instagram-video-media > video {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
    aspect-ratio: auto !important;
    object-fit: contain !important;
    object-position: center center !important;
    overflow: hidden;
  }

  .section-instagram .instagram-feed-card .instagram-feed-media.instagram-video-media {
    background: #08080d !important;
  }

  .section-instagram .instagram-feed-card .instagram-feed-media.instagram-video-media > video {
    background: transparent !important;
  }

  .section-instagram .instagram-feed-card .instagram-feed-meta {
    min-height: 46px;
    padding: 11px 12px;
    font-size: 12px;
  }

  /* Kontroller reklam panelindeki gibi kartın altında yer alır. */
  .section-instagram .instagram-feed-prev {
    grid-area: prev;
  }
  .section-instagram .instagram-feed-next {
    grid-area: next;
  }
  .section-instagram .instagram-feed-arrow {
    position: static !important;
    inset: auto !important;
    display: grid;
    place-items: center;
    width: 34px !important;
    height: 34px !important;
    min-width: 34px;
    margin: 0 auto;
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 50%;
    background: rgba(255,255,255,.08);
    color: #fff;
    opacity: 1;
  }
  .section-instagram .instagram-feed-arrow:disabled {
    opacity: .32;
  }

  .section-instagram .instagram-feed-carousel-footer {
    grid-area: footer;
    display: flex !important;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 7px;
    min-width: 0;
    margin: 0 !important;
  }

  .section-instagram .instagram-feed-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 5px;
    min-width: 0;
  }

  .section-instagram .instagram-feed-page-dot {
    width: 7px;
    height: 7px;
    flex: 0 0 7px;
  }
  .section-instagram .instagram-feed-page-dot.active {
    width: 19px;
    flex-basis: 19px;
  }

  .section-instagram .instagram-feed-position {
    white-space: nowrap;
    font-size: .62rem;
  }
}

@media (max-width: 360px) {
  .section-instagram .instagram-feed-carousel {
    grid-template-columns: 32px minmax(0, 1fr) 32px;
    gap: 8px 4px;
    padding: 9px !important;
  }
  .section-instagram .instagram-feed-arrow {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px;
  }
  .section-instagram .instagram-feed-carousel-footer { gap: 5px; }
  .section-instagram .instagram-feed-pagination { gap: 4px; }
}


/* ===== ÇAYELİTV AÇILIŞ CANLI YAYIN YERLEŞİMİ ===== */
.hero.hero-live-hero {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  min-height: calc(100vh - 76px);
  padding: 42px 0 48px;
  background: #0a0a0f;
  overflow: hidden;
}
.hero.hero-live-hero .hero-bg-overlay {
  position: absolute;
  inset: 0;
  /* Screenshot'taki bordo/kırmızı açılış arka planının orijinal hissi korunur. */
  background:
    radial-gradient(ellipse 80% 65% at 68% 38%, rgba(227,6,19,.20) 0%, transparent 62%),
    radial-gradient(ellipse 55% 85% at 8% 90%, rgba(245,197,24,.075) 0%, transparent 58%),
    linear-gradient(135deg, #0a0a0f 0%, #1a0a12 52%, #0a0a0f 100%);
}
.hero-live-shell {
  position: relative;
  z-index: 3;
  width: min(100% - 40px, 1280px);
  max-width: 1280px;
  margin: 0 auto;
}
.hero-live-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin: 0 0 22px;
}
.hero-live-heading-copy { min-width: 0; }
.hero-live-kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #f5c518;
  font: 800 .72rem/1.3 'Montserrat', sans-serif;
  letter-spacing: 1.7px;
  margin-bottom: 11px;
}
.hero-live-kicker .live-dot { width: 9px; height: 9px; flex: 0 0 9px; }
.hero-live-heading h1 {
  margin: 0;
  color: #fff;
  font: 900 clamp(1.8rem, 3.2vw, 2.8rem)/1.08 'Montserrat', sans-serif;
  letter-spacing: -.7px;
}
.hero-live-heading p {
  margin: 9px 0 0;
  color: rgba(255,255,255,.68);
  font-size: .95rem;
}
.hero-live-onair {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  flex: 0 0 auto;
  padding: 10px 16px;
  color: #fff;
  background: rgba(227,6,19,.18);
  border: 1px solid rgba(227,6,19,.55);
  border-radius: 999px;
  font: 800 .72rem/1 'Montserrat', sans-serif;
  letter-spacing: 1.2px;
  white-space: nowrap;
}
.hero-live-onair > span {
  width: 9px;
  height: 9px;
  display: inline-block;
  border-radius: 50%;
  background: #ed1020;
  box-shadow: 0 0 0 4px rgba(237,16,32,.16);
  animation: pulsed 1s ease infinite;
}
.hero-live-wrapper {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 310px);
  gap: 20px;
  align-items: stretch;
}
.hero-live-player-box {
  width: 100%;
  aspect-ratio: 16 / 9;
  min-height: 0;
  margin: 0;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 16px;
  overflow: hidden;
  background: #000;
  box-shadow: 0 18px 48px rgba(0,0,0,.38), 0 0 30px rgba(227,6,19,.10);
}
.hero-live-player-box iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}
.hero-live-sidebar {
  display: flex;
  flex-direction: column;
  gap: 13px;
  min-width: 0;
}
.hero-live-sidebar .live-info-card,
.hero-live-sidebar .social-card {
  margin: 0;
  padding: 17px;
  background: rgba(16,14,22,.80);
  border: 1px solid rgba(255,255,255,.11);
  border-radius: 14px;
  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);
}
.hero-live-sidebar .live-info-card h3,
.hero-live-sidebar .social-card h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 13px;
  color: #fff;
  font: 750 .88rem/1.3 'Montserrat', sans-serif;
}
.hero-live-sidebar .live-info-card h3 i,
.hero-live-sidebar .social-card h3 i { color: #f5c518; }
.hero-live-sidebar .live-info-card h3 small {
  margin-left: auto;
  color: rgba(255,255,255,.55);
  font: 600 .68rem/1 'Montserrat', sans-serif;
}
.hero-live-sidebar .live-schedule-mini {
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.hero-live-sidebar .live-schedule-mini li {
  display: grid;
  grid-template-columns: 14px 43px minmax(0,1fr);
  align-items: start;
  gap: 7px;
  color: rgba(255,255,255,.83);
  font-size: .72rem;
  line-height: 1.35;
}
.hero-live-sidebar .live-schedule-mini li > i { color: #f5c518; padding-top: 2px; }
.hero-live-sidebar .live-schedule-mini li > b { color: #fff; font-weight: 800; }
.hero-live-sidebar .live-schedule-mini li > span { min-width: 0; overflow-wrap: anywhere; }
.hero-live-sidebar .social-links { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.hero-live-sidebar .social-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-width: 0;
  padding: 9px 7px;
  border-radius: 8px;
  font-size: .68rem;
  line-height: 1.25;
  text-align: center;
  white-space: normal;
}
@media (max-width: 1024px) and (min-width: 769px) {
  .hero-live-wrapper { grid-template-columns: minmax(0,1fr) 260px; gap: 14px; }
  .hero-live-sidebar .live-info-card,
  .hero-live-sidebar .social-card { padding: 13px; }
  .hero-live-sidebar .live-schedule-mini li { font-size: .66rem; }
}
@media (max-width: 768px) {
  .hero.hero-live-hero {
    display: block;
    min-height: 0;
    padding: 30px 0 34px;
  }
  .hero-live-shell { width: calc(100% - 28px); }
  .hero-live-heading { align-items: flex-start; margin-bottom: 16px; }
  .hero-live-heading h1 { font-size: clamp(1.55rem, 7vw, 2rem); }
  .hero-live-heading p { font-size: .82rem; line-height: 1.45; }
  .hero-live-kicker { font-size: .63rem; margin-bottom: 8px; }
  .hero-live-onair { padding: 8px 10px; font-size: .62rem; }
  .hero-live-wrapper { grid-template-columns: minmax(0,1fr); gap: 12px; }
  .hero-live-player-box { border-radius: 11px; }
  .hero-live-sidebar { display: grid; grid-template-columns: minmax(0,1fr); gap: 10px; }
  .hero-live-sidebar .live-info-card,
  .hero-live-sidebar .social-card { padding: 14px; }
}
@media (max-width: 380px) {
  .hero-live-heading { gap: 8px; }
  .hero-live-onair { gap: 6px; padding: 7px 8px; font-size: .57rem; }
  .hero-live-sidebar .social-links { grid-template-columns: 1fr 1fr; }
  .hero-live-sidebar .social-btn { font-size: .63rem; }
}


/* ===== ÇAYELİTV SOSYAL PROFİL KARTI: YEŞİL / MAVİ ===== */
.hero-live-sidebar .social-profile-card {
  position: relative;
  width: 100%;
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(45, 212, 191, .32);
  border-radius: 17px;
  color: #102c32;
  background: linear-gradient(180deg, #ffffff 0%, #f2fbfa 100%);
  box-shadow: 0 14px 34px rgba(0, 0, 0, .24), 0 0 22px rgba(20, 184, 166, .08);
}
.hero-live-sidebar .social-profile-cover {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  height: 67px;
  overflow: hidden;
  padding: 13px 14px;
  color: rgba(255,255,255,.82);
  background:
    radial-gradient(circle at 88% 5%, rgba(255,255,255,.18), transparent 28%),
    repeating-linear-gradient(135deg, transparent 0 22px, rgba(255,255,255,.075) 22px 23px),
    linear-gradient(115deg, #047857 0%, #0d9488 47%, #0369a1 100%);
}
.hero-live-sidebar .social-profile-cover::before,
.hero-live-sidebar .social-profile-cover::after {
  content: "";
  position: absolute;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 50%;
  pointer-events: none;
}
.hero-live-sidebar .social-profile-cover::before { width: 122px; height: 122px; top: -78px; left: -22px; }
.hero-live-sidebar .social-profile-cover::after { width: 158px; height: 158px; top: -108px; left: -40px; }
.hero-live-sidebar .social-profile-cover > span {
  position: relative;
  z-index: 1;
  font: 800 .49rem/1 'Montserrat', sans-serif;
  letter-spacing: 1.6px;
  text-shadow: 0 1px 4px rgba(0,0,0,.25);
}
.hero-live-sidebar .social-profile-cover > span i { margin: 0 4px; font-size: .35rem; color: #a7f3d0; }
.hero-live-sidebar .social-profile-body {
  position: relative;
  padding: 0 13px 13px;
  text-align: center;
}
.hero-live-sidebar .social-profile-avatar-wrap {
  position: relative;
  width: 66px;
  height: 66px;
  margin: -34px auto 5px;
}
.hero-live-sidebar .social-profile-avatar {
  display: block;
  width: 66px;
  height: 66px;
  padding: 5px;
  border: 3px solid #fff;
  border-radius: 50%;
  object-fit: contain;
  background: #fff;
  box-shadow: 0 5px 16px rgba(4, 120, 87, .24);
}
.hero-live-sidebar .social-profile-instagram-badge {
  position: absolute;
  right: -2px;
  bottom: -1px;
  display: grid;
  place-items: center;
  width: 25px;
  height: 25px;
  border: 2px solid #fff;
  border-radius: 50%;
  color: #fff;
  font-size: 13px;
  background: linear-gradient(145deg, #0f9f86, #0284c7);
  box-shadow: 0 3px 8px rgba(0,0,0,.18);
}
.hero-live-sidebar .social-profile-name {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  color: #102a31;
  font: 900 .93rem/1.2 'Montserrat', sans-serif;
}
.hero-live-sidebar .social-profile-name > i { color: #0284c7; font-size: .73rem; }
.hero-live-sidebar .social-profile-username {
  margin-top: 4px;
  color: #527078;
  font: 600 .64rem/1.2 'Montserrat', sans-serif;
}
.hero-live-sidebar .social-profile-bio {
  max-width: 34ch;
  margin: 9px auto 11px;
  color: #39545b;
  font-size: .67rem;
  line-height: 1.45;
}
.hero-live-sidebar .social-profile-stats {
  display: grid;
  grid-template-columns: 1fr 1fr 1.22fr;
  gap: 5px;
  margin: 0 0 11px;
}
.hero-live-sidebar .social-profile-stat {
  display: flex;
  min-width: 0;
  min-height: 39px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 5px 3px;
  border: 1px solid rgba(13, 148, 136, .10);
  border-radius: 10px;
  background: #e9f7f4;
}
.hero-live-sidebar .social-profile-stat strong {
  color: #123f49;
  font: 900 .82rem/1 'Montserrat', sans-serif;
  font-variant-numeric: tabular-nums;
}
.hero-live-sidebar .social-profile-stat span {
  color: #557078;
  font: 700 .49rem/1.1 'Montserrat', sans-serif;
  letter-spacing: .5px;
  text-transform: uppercase;
  white-space: nowrap;
}
.hero-live-sidebar .social-profile-location strong { color: #0d9488; font-size: .78rem; }
.hero-live-sidebar .social-profile-location span { font-size: .45rem; letter-spacing: .1px; }
.hero-live-sidebar .social-profile-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
.hero-live-sidebar .social-profile-action {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-width: 0;
  min-height: 36px;
  padding: 7px 6px;
  border: 0;
  border-radius: 999px;
  color: #fff;
  font: 800 .55rem/1.15 'Montserrat', sans-serif;
  text-align: center;
  text-decoration: none;
  box-shadow: 0 5px 13px rgba(2, 132, 199, .16);
  transition: transform .18s ease, filter .18s ease;
}
.hero-live-sidebar .social-profile-action > i:first-child { flex: 0 0 auto; font-size: .86rem; }
.hero-live-sidebar .social-profile-action > i:last-child { flex: 0 0 auto; font-size: .49rem; opacity: .82; }
.hero-live-sidebar .social-profile-instagram-action { background: linear-gradient(105deg, #059669, #0d9488 56%, #0284c7); }
.hero-live-sidebar .social-profile-facebook-action { background: linear-gradient(105deg, #0284c7, #2563eb); }
.hero-live-sidebar .social-profile-action:hover:not(.social-profile-action-disabled) { color: #fff; filter: brightness(1.08); transform: translateY(-2px); }
.hero-live-sidebar .social-profile-action:focus-visible { outline: 3px solid #0ea5e9; outline-offset: 3px; }
.hero-live-sidebar .social-profile-action-disabled { cursor: not-allowed; opacity: .62; box-shadow: none; }
@media (max-width: 768px) {
  .hero-live-sidebar .social-profile-card { border-radius: 16px; }
  .hero-live-sidebar .social-profile-cover { height: 76px; }
  .hero-live-sidebar .social-profile-body { padding: 0 15px 15px; }
  .hero-live-sidebar .social-profile-avatar-wrap,
  .hero-live-sidebar .social-profile-avatar { width: 72px; height: 72px; }
  .hero-live-sidebar .social-profile-avatar-wrap { margin-top: -37px; }
  .hero-live-sidebar .social-profile-name { font-size: 1rem; }
  .hero-live-sidebar .social-profile-bio { font-size: .73rem; }
  .hero-live-sidebar .social-profile-stat { min-height: 44px; }
  .hero-live-sidebar .social-profile-stat strong { font-size: .92rem; }
  .hero-live-sidebar .social-profile-stat span { font-size: .56rem; }
  .hero-live-sidebar .social-profile-action { min-height: 42px; font-size: .68rem; }
}
@media (max-width: 360px) {
  .hero-live-sidebar .social-profile-actions { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-live-sidebar .social-profile-action { transition: none; }
}


/* ===== SOSYAL PROFİL KARTI: CANLI YAYIN AKIŞI YERİ + BORDO TEMA ===== */
.hero-live-sidebar {
  align-self: start;
  width: 100%;
}
.hero-live-sidebar .social-profile-card {
  width: 100%;
  border: 1px solid rgba(227, 6, 19, .30);
  border-radius: 17px;
  color: #f7f1f3;
  background:
    radial-gradient(ellipse at 100% 0%, rgba(227, 6, 19, .13), transparent 48%),
    linear-gradient(160deg, rgba(31, 14, 22, .98), rgba(13, 10, 16, .98));
  box-shadow: 0 16px 36px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.035);
}
.hero-live-sidebar .social-profile-cover {
  height: 70px;
  background:
    radial-gradient(circle at 88% 10%, rgba(227,6,19,.25), transparent 32%),
    repeating-linear-gradient(135deg, transparent 0 22px, rgba(255,255,255,.035) 22px 23px),
    linear-gradient(115deg, #1d1018 0%, #40121e 55%, #1a1018 100%);
  border-bottom: 1px solid rgba(227,6,19,.20);
}
.hero-live-sidebar .social-profile-cover::before,
.hero-live-sidebar .social-profile-cover::after {
  border-color: rgba(245,197,24,.18);
}
.hero-live-sidebar .social-profile-cover > span {
  color: rgba(255,255,255,.78);
}
.hero-live-sidebar .social-profile-cover > span i {
  color: #f5c518;
}
.hero-live-sidebar .social-profile-body {
  padding: 0 14px 15px;
}
.hero-live-sidebar .social-profile-avatar {
  border-color: #241019;
  background: #fff;
  box-shadow: 0 0 0 2px rgba(245,197,24,.42), 0 7px 18px rgba(0,0,0,.35);
}
.hero-live-sidebar .social-profile-instagram-badge {
  border-color: #211019;
  background: linear-gradient(145deg, #e30613, #9b1747 62%, #6d28a8);
}
.hero-live-sidebar .social-profile-name {
  color: #fff;
}
.hero-live-sidebar .social-profile-name > i {
  color: #f5c518;
}
.hero-live-sidebar .social-profile-username {
  color: rgba(255,255,255,.57);
}
.hero-live-sidebar .social-profile-bio {
  color: rgba(255,255,255,.72);
}
.hero-live-sidebar .social-profile-stats {
  margin-bottom: 12px;
}
.hero-live-sidebar .social-profile-stat {
  min-height: 42px;
  background: rgba(255,255,255,.045);
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 10px;
}
.hero-live-sidebar .social-profile-stat strong {
  color: #fff;
}
.hero-live-sidebar .social-profile-stat span {
  color: rgba(255,255,255,.57);
}
.hero-live-sidebar .social-profile-location strong {
  color: #f5c518;
}
.hero-live-sidebar .social-profile-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 0;
}
.hero-live-sidebar .social-profile-action {
  position: relative;
  display: flex;
  width: 100%;
  min-height: 43px;
  justify-content: flex-start;
  gap: 10px;
  padding: 10px 13px;
  border: 1px solid rgba(255,255,255,.11);
  border-radius: 10px;
  font-size: .68rem;
  line-height: 1.2;
  text-align: left;
  box-shadow: none;
}
.hero-live-sidebar .social-profile-action > i:first-child {
  width: 18px;
  font-size: 1rem;
  text-align: center;
}
.hero-live-sidebar .social-profile-action > i:last-child {
  margin-left: auto;
  font-size: .58rem;
}
.hero-live-sidebar .social-profile-instagram-action {
  color: #fff;
  background: linear-gradient(100deg, rgba(227,6,19,.19), rgba(118,25,64,.18));
  border-color: rgba(227,6,19,.34);
}
.hero-live-sidebar .social-profile-instagram-action > i:first-child {
  color: #ff6a86;
}
.hero-live-sidebar .social-profile-facebook-action {
  color: #fff;
  background: linear-gradient(100deg, rgba(31,87,179,.22), rgba(23,45,83,.27));
  border-color: rgba(85,145,255,.27);
}
.hero-live-sidebar .social-profile-facebook-action > i:first-child {
  color: #80b5ff;
}
.hero-live-sidebar .social-profile-action:hover:not(.social-profile-action-disabled) {
  color: #fff;
  filter: brightness(1.16);
  transform: translateY(-1px);
}
.hero-live-sidebar .social-profile-action:focus-visible {
  outline: 2px solid #f5c518;
  outline-offset: 2px;
}
.hero-live-sidebar .social-profile-action-disabled {
  cursor: not-allowed;
  opacity: .58;
}
@media (max-width: 768px) {
  .hero-live-sidebar {
    width: 100%;
  }
  .hero-live-sidebar .social-profile-card {
    border-radius: 16px;
  }
  .hero-live-sidebar .social-profile-cover {
    height: 76px;
  }
  .hero-live-sidebar .social-profile-actions {
    display: flex;
    flex-direction: column;
  }
  .hero-live-sidebar .social-profile-action {
    min-height: 44px;
    font-size: .72rem;
  }
}

/* ======================================================================
   ÇAYELİTV — İLK ORİJİNAL KIRMIZI TEMA GERİ YÜKLENDİ
   Ana kırmızı: #e30613 | Koyu kırmızı: #b0040f
   İlk koyu zemin: #0a0a0f / #12121a / #1a1a26 | Altın vurgu: #f5c518
   ====================================================================== */
:root {
  --red: #e30613 !important;
  --red-dark: #b0040f !important;
  --gold: #f5c518 !important;
  --dark: #0a0a0f !important;
  --dark2: #12121a !important;
  --dark3: #1a1a26 !important;
  --card-bg: #1e1e2e !important;
  --border: rgba(255,255,255,.08) !important;
  --text: #e8e8f0 !important;
  --text-muted: #9090a8 !important;
  --shadow: 0 8px 32px rgba(0,0,0,.5) !important;
}
html, body { background: #0a0a0f !important; color: #e8e8f0 !important; }
.site-header { background: rgba(10,10,15,.97) !important; border-bottom-color: rgba(255,255,255,.08) !important; }
.ticker-bar { background: #e30613 !important; }
.ticker-label { background: #b0040f !important; }
.main-nav a:hover, .main-nav a.active { background: rgba(227,6,19,.12) !important; color: #fff !important; }
.main-nav .btn-live, .btn-primary, .btn-submit { background: #e30613 !important; border-color: #e30613 !important; color: #fff !important; }
.main-nav .btn-live:hover, .btn-primary:hover, .btn-submit:hover { background: #b0040f !important; border-color: #b0040f !important; }
.nav-toggle { border-color: rgba(227,6,19,.28) !important; background: rgba(227,6,19,.08) !important; }

/* Sosyal profil kartı: mevcut yerleşim korunur, yeşil/mavi yüzeyler orijinal kırmızıya döner. */
.hero-live-sidebar .social-profile-card {
  color: #e8e8f0 !important;
  border: 1px solid rgba(227,6,19,.30) !important;
  background: linear-gradient(180deg, #171018 0%, #0d0a0f 100%) !important;
  box-shadow: 0 14px 34px rgba(0,0,0,.30), 0 0 22px rgba(227,6,19,.07) !important;
}
.hero-live-sidebar .social-profile-cover {
  background:
    radial-gradient(circle at 88% 5%, rgba(245,197,24,.13), transparent 28%),
    repeating-linear-gradient(135deg, transparent 0 22px, rgba(255,255,255,.055) 22px 23px),
    linear-gradient(115deg, #710713 0%, #b0040f 48%, #e30613 100%) !important;
}
.hero-live-sidebar .social-profile-cover > span i { color: #f5c518 !important; }
.hero-live-sidebar .social-profile-avatar {
  border-color: #b0040f !important;
  box-shadow: 0 0 0 2px rgba(227,6,19,.30), 0 5px 16px rgba(0,0,0,.30) !important;
}
.hero-live-sidebar .social-profile-instagram-badge {
  border-color: #1a1a26 !important;
  background: linear-gradient(145deg, #b0040f, #e30613) !important;
}
.hero-live-sidebar .social-profile-name { color: #fff !important; }
.hero-live-sidebar .social-profile-name > i,
.hero-live-sidebar .social-profile-location strong { color: #f5c518 !important; }
.hero-live-sidebar .social-profile-username { color: #9090a8 !important; }
.hero-live-sidebar .social-profile-bio { color: #c7c7d1 !important; }
.hero-live-sidebar .social-profile-stat {
  border-color: rgba(227,6,19,.20) !important;
  background: rgba(255,255,255,.045) !important;
}
.hero-live-sidebar .social-profile-stat strong { color: #fff !important; }
.hero-live-sidebar .social-profile-stat span { color: #a7a7b5 !important; }
.hero-live-sidebar .social-profile-action {
  border: 1px solid rgba(227,6,19,.38) !important;
  background: linear-gradient(105deg, #e30613 0%, #b0040f 62%, #710713 100%) !important;
  box-shadow: 0 5px 13px rgba(227,6,19,.16) !important;
}
.hero-live-sidebar .social-profile-action:focus-visible { outline-color: #ff6b72 !important; }

/* Canlı yayın kontrol kutusu aynı koyu-kırmızı yüzeyde, ilk kırmızı düğme rengiyle. */
.ctv-live-controls {
  border-color: rgba(227,6,19,.25) !important;
  border-top-color: #e30613 !important;
  background: linear-gradient(105deg, rgba(18,18,26,.97), rgba(36,8,15,.96)) !important;
}
.ctv-live-btn-primary,
.ctv-viewer-message-open,
.ctv-viewer-form-submit {
  background: linear-gradient(105deg, #e30613 0%, #b0040f 72%, #710713 100%) !important;
  border-color: rgba(227,6,19,.50) !important;
}
.ctv-live-status-dot { background: #e30613 !important; }
.ctv-live-volume input { accent-color: #e30613 !important; }

/* Mobil açılır menü de ilk temanın siyah/bordo ve kırmızı çizgilerini kullanır. */
@media (max-width: 768px) {
  .site-header .main-nav,
  .site-header .main-nav:not(.open) {
    background: rgba(10,10,15,.99) !important;
    border-top-color: rgba(227,6,19,.25) !important;
  }
}

/* ===== INSTAGRAM REELS: KULLANICININ GÖNDERDİĞİ ORİJİNAL KIRMIZI TEMA ===== */
.section-instagram {
  background: linear-gradient(180deg, var(--dark2) 0%, var(--dark) 100%) !important;
}
.section-instagram .section-header h2 .fa-instagram {
  color: var(--red) !important;
}
.section-instagram .instagram-feed-card {
  background: var(--card-bg) !important;
  border: 1px solid var(--border) !important;
  box-shadow: var(--shadow) !important;
}
.section-instagram .instagram-feed-media,
.section-instagram .instagram-carousel-track,
.section-instagram .instagram-embed-box {
  background: var(--dark3) !important;
}
.section-instagram .instagram-feed-media.instagram-video-media,
.section-instagram .instagram-carousel-slide .instagram-feed-media.instagram-video-media,
.section-instagram .instagram-feed-media.instagram-video-media > video,
.section-instagram .instagram-carousel-slide .instagram-feed-media.instagram-video-media > video {
  background: var(--dark) !important;
}
.section-instagram .instagram-feed-badge {
  background: rgba(227, 6, 19, .90) !important;
  color: #fff !important;
}
.section-instagram .instagram-feed-fallback {
  color: var(--text-muted) !important;
}
.section-instagram .instagram-feed-meta {
  color: var(--text-muted) !important;
  background: var(--card-bg) !important;
}
.section-instagram .instagram-feed-meta a {
  color: #fff !important;
}
.section-instagram .instagram-feed-meta a:hover {
  color: var(--gold) !important;
}
.section-instagram .instagram-feed-arrow {
  color: #fff !important;
  background: var(--dark3) !important;
  border-color: var(--border) !important;
}
.section-instagram .instagram-feed-arrow:hover:not(:disabled) {
  background: var(--red) !important;
  border-color: var(--red) !important;
}
.section-instagram .instagram-feed-page-dot {
  background: rgba(255,255,255,.24) !important;
}
.section-instagram .instagram-feed-page-dot.active {
  background: var(--red) !important;
}
.section-instagram .instagram-feed-position {
  color: var(--text-muted) !important;
}
@media (max-width: 560px) {
  .section-instagram .instagram-feed-carousel {
    border-color: var(--border) !important;
    background: linear-gradient(145deg, var(--dark2), var(--dark)) !important;
    box-shadow: var(--shadow) !important;
  }
  .section-instagram .instagram-feed-viewport {
    background: var(--dark3) !important;
  }
  .section-instagram .instagram-feed-arrow {
    background: var(--dark3) !important;
    border-color: var(--border) !important;
  }
  .section-instagram .instagram-feed-arrow:hover:not(:disabled) {
    background: var(--red) !important;
  }
}


/* ================================================================
   ÇAYELİTV SOSYAL PROFİL KARTI — EKRAN GÖRÜNTÜSÜNDEKİ DENGELİ GÖRÜNÜM
   Kartın tamamını kırmızıya boyamadan koyu bordo yüzeyleri korur.
   ================================================================ */
.hero-live-sidebar .social-profile-card {
  color: #f7f1f3 !important;
  border: 1px solid rgba(227, 6, 19, .34) !important;
  background:
    radial-gradient(ellipse at 100% 0%, rgba(227, 6, 19, .10), transparent 48%),
    linear-gradient(160deg, #1f0e16 0%, #0d0a10 100%) !important;
  box-shadow: 0 16px 34px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.035) !important;
}
.hero-live-sidebar .social-profile-cover {
  height: 70px !important;
  border-bottom: 1px solid rgba(227,6,19,.22) !important;
  background:
    radial-gradient(circle at 88% 10%, rgba(227,6,19,.16), transparent 32%),
    repeating-linear-gradient(135deg, transparent 0 22px, rgba(255,255,255,.045) 22px 23px),
    linear-gradient(115deg, #1d1018 0%, #40121e 55%, #1a1018 100%) !important;
}
.hero-live-sidebar .social-profile-cover::before,
.hero-live-sidebar .social-profile-cover::after {
  border-color: rgba(245,197,24,.18) !important;
}
.hero-live-sidebar .social-profile-cover > span { color: rgba(255,255,255,.78) !important; }
.hero-live-sidebar .social-profile-cover > span i { color: #f5c518 !important; }
.hero-live-sidebar .social-profile-body { background: transparent !important; }
.hero-live-sidebar .social-profile-avatar {
  border-color: #241019 !important;
  background: #fff !important;
  box-shadow: 0 0 0 2px rgba(245,197,24,.42), 0 7px 18px rgba(0,0,0,.35) !important;
}
.hero-live-sidebar .social-profile-instagram-badge {
  border-color: #211019 !important;
  background: linear-gradient(145deg, #e30613, #9b1747 62%, #6d28a8) !important;
}
.hero-live-sidebar .social-profile-name { color: #fff !important; }
.hero-live-sidebar .social-profile-name > i,
.hero-live-sidebar .social-profile-location strong { color: #f5c518 !important; }
.hero-live-sidebar .social-profile-username { color: rgba(255,255,255,.57) !important; }
.hero-live-sidebar .social-profile-bio { color: rgba(255,255,255,.76) !important; }
.hero-live-sidebar .social-profile-stat {
  background: rgba(255,255,255,.045) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  border-radius: 10px !important;
}
.hero-live-sidebar .social-profile-stat strong { color: #fff !important; }
.hero-live-sidebar .social-profile-stat span { color: rgba(255,255,255,.58) !important; }
.hero-live-sidebar .social-profile-location strong { color: #f5c518 !important; }
.hero-live-sidebar .social-profile-actions {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}
.hero-live-sidebar .social-profile-action {
  width: 100% !important;
  min-height: 43px !important;
  color: #fff !important;
  border-radius: 10px !important;
  box-shadow: none !important;
  transition: border-color .2s ease, filter .2s ease, transform .2s ease !important;
}
.hero-live-sidebar .social-profile-instagram-action {
  background: linear-gradient(100deg, rgba(227,6,19,.18), rgba(118,25,64,.18)) !important;
  border: 1px solid rgba(227,6,19,.38) !important;
}
.hero-live-sidebar .social-profile-instagram-action > i:first-child { color: #ff6a86 !important; }
.hero-live-sidebar .social-profile-facebook-action {
  background: linear-gradient(100deg, rgba(31,87,179,.22), rgba(23,45,83,.27)) !important;
  border: 1px solid rgba(85,145,255,.30) !important;
}
.hero-live-sidebar .social-profile-facebook-action > i:first-child { color: #80b5ff !important; }
.hero-live-sidebar .social-profile-youtube-action {
  background: linear-gradient(100deg, rgba(227,6,19,.20), rgba(91,18,31,.22)) !important;
  border: 1px solid rgba(227,6,19,.38) !important;
}
.hero-live-sidebar .social-profile-youtube-action > i:first-child { color: #ff5364 !important; }
.hero-live-sidebar .social-profile-tiktok-action {
  background: linear-gradient(100deg, rgba(227,6,19,.08), rgba(45,31,40,.26)) !important;
  border: 1px solid rgba(255,255,255,.17) !important;
}
.hero-live-sidebar .social-profile-tiktok-action > i:first-child {
  color: #25f4ee !important;
  text-shadow: 1px 0 #fe2c55 !important;
}
.hero-live-sidebar .social-profile-action:hover:not(.social-profile-action-disabled) {
  filter: brightness(1.12) !important;
  transform: translateY(-1px) !important;
}
.hero-live-sidebar .social-profile-action:focus-visible {
  outline: 2px solid #f5c518 !important;
  outline-offset: 2px !important;
}
@media (max-width: 768px) {
  .hero-live-sidebar .social-profile-card { border-radius: 16px !important; }
  .hero-live-sidebar .social-profile-cover { height: 70px !important; }
  .hero-live-sidebar .social-profile-actions { gap: 8px !important; }
  .hero-live-sidebar .social-profile-action { min-height: 43px !important; }
}