/* Reel Vitrin — frontend styles (scoped under .rv-reel) */

.rv-reel {
  --rv-stone-black: #14110f;
  --rv-stone-dark: #1d1a17;
  --rv-turkuaz: #2f8f8a;
  --rv-turkuaz-parlak: #5fc4bd;
  --rv-bronz: #b3874a;
  --rv-bronz-parlak: #e0b878;
  --rv-sedef: #f2ece1;
  --rv-sedef-soluk: #c9c0af;
  --rv-like: #e0654f;

  position: relative;
  width: 100vw;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  height: var(--rv-height, 100vh);
  height: var(--rv-height, 100dvh);
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  background: var(--rv-stone-black);
  font-family: 'Marcellus', 'Optima', Georgia, serif;
  color: var(--rv-sedef);
  box-sizing: border-box;
}
.rv-reel *, .rv-reel *::before, .rv-reel *::after { box-sizing: border-box; }
.rv-reel::-webkit-scrollbar { display: none; }

.rv-empty { opacity: .7; font-style: italic; }

/* Ses aç/kapat — kaydırma sırasında ekranda sabit kalır */
.rv-mute-wrap { position: sticky; top: 0; height: 0; z-index: 25; }
.rv-mute-toggle {
  position: absolute;
  top: calc(max(22px, env(safe-area-inset-top)) + 38px);
  right: 22px;
  width: 38px; height: 38px; border-radius: 50%;
  background: rgba(20,17,15,.4);
  border: 1px solid rgba(242,236,225,.25);
  backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
  color: var(--rv-sedef);
  cursor: pointer;
  transition: background .25s, transform .15s;
}
.rv-mute-toggle:active { transform: scale(.9); }
.rv-mute-icon { width: 18px; height: 18px; display: none; }
.rv-mute-icon svg { width: 100%; height: 100%; }
.rv-mute-toggle .rv-mute-off { display: flex; }
.rv-mute-toggle.rv-sound-on .rv-mute-off { display: none; }
.rv-mute-toggle.rv-sound-on .rv-mute-on { display: flex; }
.rv-mute-toggle.rv-sound-on { border-color: rgba(95,196,189,.5); }

.rv-card {
  position: relative;
  height: var(--rv-height, 100vh);
  height: var(--rv-height, 100dvh);
  width: 100%;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  overflow: hidden;
  background: var(--rv-stone-dark);
}

/* ---------- Medya galerisi ---------- */
.rv-gallery { position: absolute; inset: 0; overflow: hidden; touch-action: pan-y; max-width: none !important; }
.rv-gallery-item {
  position: absolute !important; inset: 0;
  max-width: none !important;
  opacity: 0;
  visibility: hidden;
  transition: opacity .45s ease;
}
.rv-gallery-item.active { opacity: 1; visibility: visible; }
.rv-gallery-item img,
.rv-gallery-item video {
  width: 100% !important; height: 100% !important; max-width: none !important; max-height: none !important;
  object-fit: cover !important; object-position: center !important; display: block !important;
  filter: saturate(.92) contrast(1.04) brightness(.86);
  transform: scale(1);
  animation: rv-kenburns 26s ease-in-out infinite alternate;
}
.rv-card:nth-child(even) .rv-gallery-item img,
.rv-card:nth-child(even) .rv-gallery-item video { animation-direction: alternate-reverse; }
.rv-card.rv-expanded .rv-gallery-item img,
.rv-card.rv-expanded .rv-gallery-item video { animation-play-state: paused; }

/* "Tam Sığdır" modu: görsel kırpılmadan gösterilir, boşluklar aynı görselin
   bulanık haliyle doldurulur (Instagram Hikayeleri'ndeki gibi) */
.rv-fit-contain-wrap { position: absolute; inset: 0; overflow: hidden; background: #000; max-width: none !important; }
.rv-fit-contain-wrap .rv-fit-bg {
  position: absolute !important; inset: 0;
  width: 100% !important; height: 100% !important; max-width: none !important; max-height: none !important;
  object-fit: cover !important; object-position: center !important;
  filter: blur(38px) brightness(.42) saturate(1.05);
  transform: scale(1.15);
  animation: rv-kenburns 26s ease-in-out infinite alternate;
}
.rv-fit-contain-wrap .rv-fit-main {
  position: absolute !important; inset: 0;
  width: 100% !important; height: 100% !important; max-width: none !important; max-height: none !important;
  object-fit: contain !important; object-position: center !important;
  filter: saturate(.95) contrast(1.02);
}
.rv-card.rv-expanded .rv-fit-bg { animation-play-state: paused; }
@keyframes rv-kenburns {
  0%   { transform: scale(1) translate(0, 0); }
  100% { transform: scale(1.05) translate(-0.8%, -0.8%); }
}

/* YouTube / Vimeo gömme — oranı bozmadan ortalar, kontrol çubuğu (durdur/ileri sar)
   her zaman doğru yerde ve tıklanabilir kalır */
.rv-embed-wrap {
  /* Oynatıcı genişliği: ekran genişliği, ama kartın yüksekliğinden üst boşluk (~110px)
     ve alttaki metin/ikon alanı (~350px) çıkarılınca kalan yüksekliğe sığacak kadar. */
  --rv-player-w: min(100vw, max(280px, calc((var(--rv-height, 100vh) - 460px) * 1.7778)));
  position: absolute; inset: 0; overflow: hidden; background: #0b0a09;
  display: flex; align-items: flex-start; justify-content: center;
  padding-top: calc(max(22px, env(safe-area-inset-top)) + 88px);
  max-width: none !important;
}
.rv-embed-wrap iframe {
  position: relative !important;
  width: var(--rv-player-w) !important;
  height: calc(var(--rv-player-w) * 0.5625) !important;
  max-width: none !important; max-height: none !important;
  border: 0;
  pointer-events: auto; /* YouTube/Vimeo'nun kendi oynatıcı kontrolleri (durdur, ileri sar vb.) tıklanabilir olsun */
}

/* IG-stories tarzı ince ilerleme çubuğu (galeri > 1 medya) */
.rv-story-bar {
  position: absolute; top: max(12px, env(safe-area-inset-top)); left: 22px; right: 22px;
  display: flex; gap: 5px; z-index: 8;
}
.rv-story-seg {
  flex: 1; height: 2.5px; border-radius: 2px;
  background: rgba(242,236,225,.28);
  overflow: hidden; position: relative;
}
.rv-story-seg.active { background: rgba(242,236,225,.85); }

.rv-g-arrow {
  position: absolute; top: 42%; transform: translateY(-50%);
  z-index: 7;
  width: 38px; height: 38px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(20,17,15,.34);
  border: 1px solid rgba(242,236,225,.28);
  backdrop-filter: blur(6px);
  color: var(--rv-sedef);
  cursor: pointer;
  opacity: .8;
  transition: opacity .25s, background .25s, transform .25s;
}
.rv-g-arrow:hover { opacity: 1; background: rgba(20,17,15,.55); }
.rv-g-arrow svg { width: 18px; height: 18px; }
.rv-g-prev { left: 12px; }
.rv-g-next { right: 12px; }
.rv-g-arrow[disabled] { opacity: .25; pointer-events: none; }

.rv-scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(to bottom, rgba(10,9,7,.55) 0%, rgba(10,9,7,0) 26%, rgba(10,9,7,0) 46%, rgba(10,9,7,.55) 66%, rgba(10,9,7,.94) 100%),
    linear-gradient(to top, rgba(10,9,7,.15) 0%, transparent 12%);
  pointer-events: none;
}

.rv-badge {
  position: absolute; top: max(22px, env(safe-area-inset-top)); left: 22px;
  display: flex; align-items: center; gap: 10px; z-index: 5;
  background: rgba(20,17,15,.32);
  border: 1px solid rgba(224,184,120,.25);
  backdrop-filter: blur(5px);
  padding: 6px 13px 6px 9px;
  border-radius: 999px;
}
.rv-card.rv-has-gallery .rv-badge,
.rv-card.rv-has-gallery .rv-counter { top: calc(max(22px, env(safe-area-inset-top)) + 16px); }
.rv-mark { width: 20px; height: 20px; flex-shrink: 0; opacity: .9; }
.rv-badge span {
  font-size: 11px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--rv-bronz-parlak);
  font-family: 'Marcellus SC', Georgia, serif;
}

.rv-counter {
  position: absolute; top: max(22px, env(safe-area-inset-top)); right: 22px;
  font-family: 'Courier New', monospace; font-size: 12px; letter-spacing: .1em;
  color: var(--rv-sedef-soluk); text-shadow: 0 1px 6px rgba(0,0,0,.6); z-index: 5;
}

/* ---------- Sol taraf: kart ilerleme boncukları ---------- */
.rv-rail {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  display: flex; flex-direction: column; gap: 9px; z-index: 5;
}
.rv-bead {
  width: 5px; height: 5px; border-radius: 50%;
  background: rgba(242,236,225,.28);
  transition: background .35s, height .35s, border-radius .35s;
}
.rv-bead.active {
  background: var(--rv-turkuaz-parlak);
  height: 20px; border-radius: 4px;
}

/* ---------- Sağ taraf: Beğen / Kaydet / Paylaş ---------- */
.rv-actions {
  position: absolute; right: 16px; bottom: 200px; z-index: 7;
  display: flex; flex-direction: column; align-items: center; gap: 24px;
}
.rv-action {
  background: none;
  border: none;
  width: auto; height: auto;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 5px;
  color: var(--rv-sedef);
  cursor: pointer;
  padding: 4px;
  transition: transform .15s;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,.65)) drop-shadow(0 4px 10px rgba(0,0,0,.35));
}
.rv-action:active { transform: scale(.88); }
.rv-action-icon { width: 27px; height: 27px; display: block; }
.rv-action-icon svg { width: 100%; height: 100%; }
.rv-action-count {
  font-size: 11px; font-weight: 600; letter-spacing: .01em;
  color: var(--rv-sedef);
  font-family: 'Marcellus', Georgia, serif;
}
.rv-action-label { display: none; }

.rv-like.rv-liked .rv-action-icon { color: var(--rv-like); }
.rv-like.rv-liked .rv-action-icon svg path { fill: var(--rv-like); }
.rv-like.rv-liked { animation: rv-pop .35s ease; }
@keyframes rv-pop {
  0% { transform: scale(1); }
  40% { transform: scale(1.22); }
  100% { transform: scale(1); }
}

.rv-save.rv-saved .rv-action-icon { color: var(--rv-turkuaz-parlak); }
.rv-save.rv-saved .rv-action-icon svg path { fill: var(--rv-turkuaz-parlak); }

.rv-toast {
  position: absolute; left: 50%; bottom: 90px; transform: translateX(-50%) translateY(8px);
  background: rgba(20,17,15,.85); border: 1px solid rgba(242,236,225,.2);
  color: var(--rv-sedef); font-size: 12.5px; letter-spacing: .03em;
  padding: 9px 16px; border-radius: 999px; z-index: 9;
  opacity: 0; pointer-events: none; transition: opacity .25s, transform .25s;
}
.rv-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

.rv-content {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 6;
  padding: 0 82px 28px 24px;
  padding-bottom: max(28px, env(safe-area-inset-bottom));
  max-height: 56%;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: rgba(242,236,225,.3) transparent;
}
.rv-content::-webkit-scrollbar { width: 4px; }
.rv-content::-webkit-scrollbar-track { background: transparent; }
.rv-content::-webkit-scrollbar-thumb { background: rgba(242,236,225,.3); border-radius: 4px; }

.rv-kicker { display: flex; align-items: baseline; gap: 10px; margin-bottom: 6px; }
.rv-num { font-family: 'Courier New', monospace; color: var(--rv-turkuaz-parlak); font-size: 13px; letter-spacing: .08em; }
.rv-loc { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--rv-sedef-soluk); }

.rv-title {
  font-family: 'Cormorant Garamond', 'Playfair Display', Georgia, serif;
  font-size: clamp(28px, 7vw, 46px); font-weight: 600; line-height: 1.06;
  margin: 0 0 6px; color: var(--rv-sedef); text-shadow: 0 2px 18px rgba(0,0,0,.5);
}
.rv-subtitle { font-size: 13px; color: var(--rv-bronz-parlak); letter-spacing: .06em; margin-bottom: 16px; }

.rv-desc { font-size: 15px; line-height: 1.55; color: #ece5d6; max-width: 560px; }
.rv-desc[data-rv-toggle] { cursor: pointer; }
.rv-desc .rv-full { display: none; }
.rv-card.rv-expanded .rv-short { display: none; }
.rv-card.rv-expanded .rv-full { display: inline; }
.rv-desc .rv-full > *:first-child { margin-top: 0; }
.rv-desc p { margin: 0 0 .8em; }
.rv-desc, .rv-desc * { max-width: 100%; overflow-wrap: anywhere; word-break: break-word; }
.rv-more-hint { color: var(--rv-turkuaz-parlak); font-weight: 600; margin-left: 1px; }

.rv-tags { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; }
.rv-tag {
  font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--rv-sedef);
  border: 1px solid rgba(242,236,225,.32); padding: 5px 11px; border-radius: 999px;
  background: rgba(20,17,15,.35); backdrop-filter: blur(3px);
}

.rv-swipe-hint {
  position: absolute; bottom: max(22px, env(safe-area-inset-bottom)); left: 50%;
  transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 6px;
  z-index: 5; opacity: .75; animation: rv-bob 2.4s ease-in-out infinite; pointer-events: none;
}
@keyframes rv-bob {
  0%, 100% { transform: translateX(-50%) translateY(0); opacity: .75; }
  50%      { transform: translateX(-50%) translateY(6px); opacity: .35; }
}
.rv-swipe-hint svg { width: 20px; height: 20px; }
.rv-swipe-hint span { font-size: 9.5px; letter-spacing: .24em; text-transform: uppercase; color: var(--rv-sedef-soluk); }
.rv-card:not(:first-child) .rv-swipe-hint { display: none; }
.rv-card.rv-expanded .rv-swipe-hint { display: none; }

@media (min-width: 720px) {
  .rv-content { padding-right: 110px; }
  .rv-action-icon { width: 30px; height: 30px; }
  .rv-action-label { display: block; font-size: 9.5px; letter-spacing: .06em; color: var(--rv-sedef); }
}

@media (prefers-reduced-motion: reduce) {
  .rv-gallery-item img, .rv-gallery-item video { animation: none; transform: scale(1); }
  .rv-swipe-hint { animation: none; }
}