/* ============================================================
   reels.css — TikTok/Instagram tarzi tam ekran dikey reels izleyici.
   Sadece reels.html'de yuklenir.
   ============================================================ */

body{
  height:100dvh;
  overflow:hidden;
  display:flex;
  flex-direction:column;
}
header.topbar{ flex:none; }

.reels-sayfa{
  flex:1 1 auto;
  min-height:0;
  position:relative;
  background:#000;
}

@media (min-width:900px){
  .reels-sayfa{
    display:flex; align-items:center; justify-content:center;
    padding:20px 0;
  }
  .reels-liste{
    width:420px; max-width:92vw;
    height:calc(100dvh - 108px); max-height:840px;
    border-radius:20px;
    box-shadow:0 30px 80px -20px rgba(0,0,0,0.7);
  }
}

.reels-liste{
  height:100%;
  overflow-y:auto;
  scroll-snap-type:y mandatory;
  scrollbar-width:none;
  -ms-overflow-style:none;
}
.reels-liste::-webkit-scrollbar{ display:none; }

.reel-karti{
  position:relative;
  height:100%;
  width:100%;
  scroll-snap-align:start;
  scroll-snap-stop:always;
  background:#000;
  overflow:hidden;
  display:flex;
  align-items:flex-end;
}

.reel-video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  background:#000;
}

.reel-ust-gradyan{
  position:absolute; top:0; left:0; right:0; height:120px;
  background:linear-gradient(180deg, rgba(0,0,0,0.45), transparent);
  pointer-events:none;
}
.reel-alt-gradyan{
  position:absolute; bottom:0; left:0; right:0; height:220px;
  background:linear-gradient(0deg, rgba(0,0,0,0.65), transparent);
  pointer-events:none;
}

.reel-ses-btn{
  position:absolute; top:16px; right:16px; z-index:3;
  width:38px; height:38px; border-radius:50%;
  background:rgba(0,0,0,0.4); backdrop-filter:blur(4px);
  display:flex; align-items:center; justify-content:center;
  color:#fff; border:none;
}
.reel-ses-btn .icon{ width:19px; height:19px; }

.reel-geri-btn{ display:none; }
@media (max-width:860px){
  .topbar{ display:none; }
  .mobil-alt-menu{ display:none !important; }
  body{ padding-bottom:0 !important; }
  .reel-geri-btn{
    display:flex; align-items:center; justify-content:center;
    position:fixed; top:16px; left:16px; z-index:20;
    width:38px; height:38px; border-radius:50%;
    background:rgba(0,0,0,0.4); backdrop-filter:blur(4px);
    color:#fff;
  }
  .reel-geri-btn .icon{ width:20px; height:20px; }
}

.reel-karti.reel-oneri-karti{
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(160deg, #0d0d12, #1a1a24);
}
.reel-oneri-icerik{ width:100%; max-width:340px; padding:0 24px; color:#fff; }
.reel-oneri-icerik h3{ font-size:1.05rem; font-weight:800; margin-bottom:18px; text-align:center; }
.reel-oneri-satir{ display:flex; align-items:center; gap:12px; padding:11px 0; border-bottom:1px solid rgba(255,255,255,0.08); }
.reel-oneri-satir:last-child{ border-bottom:none; }
.reel-oneri-kisi{ display:flex; align-items:center; gap:11px; text-decoration:none; color:#fff; flex:1; min-width:0; }
.reel-oneri-kisi img{ width:44px; height:44px; border-radius:50%; object-fit:cover; flex-shrink:0; }
.reel-oneri-kisi div{ min-width:0; }
.reel-oneri-kisi b{ display:block; font-size:0.88rem; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.reel-oneri-kisi span{ font-size:0.72rem; color:rgba(255,255,255,0.6); }
.reel-oneri-ekle-btn{
  flex-shrink:0; padding:7px 16px; border-radius:999px; font-size:0.78rem; font-weight:700;
  background:var(--grad); color:#fff; border:none;
}
.reel-oneri-ekle-btn:disabled{ opacity:0.6; }

.reel-eylem-cubugu{
  position:absolute; right:12px; bottom:180px; z-index:3;
  display:flex; flex-direction:column; align-items:center; gap:20px;
}
.reel-eylem-btn{
  display:flex; flex-direction:column; align-items:center; gap:4px;
  background:none; border:none; color:#fff; font-size:0.72rem; font-weight:700;
  text-shadow:0 1px 3px rgba(0,0,0,0.5);
}
.reel-eylem-btn .icon{ width:28px; height:28px; filter:drop-shadow(0 1px 3px rgba(0,0,0,0.5)); }
.reel-begen-btn.begenildi{ color:#F3425F; }
.reel-begen-btn.begenildi .icon{ color:#F3425F; }
.reel-begen-btn.begenildi .icon path{ fill:#F3425F; }

.reel-alt-bilgi{
  position:relative; z-index:2;
  padding:0 76px 22px 16px;
  color:#fff;
  width:100%;
  box-sizing:border-box;
}
.reel-kullanici{
  display:flex; align-items:center; gap:9px; margin-bottom:8px;
  color:#fff; font-weight:700; font-size:0.9rem;
}
.reel-kullanici img{ width:32px; height:32px; border-radius:50%; object-fit:cover; border:1.5px solid rgba(255,255,255,0.6); }
.reel-aciklama{
  font-size:0.84rem; line-height:1.45; margin:0 0 8px;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  text-shadow:0 1px 3px rgba(0,0,0,0.4);
}
.reel-aciklama.genisletildi{
  -webkit-line-clamp:unset; overflow:visible;
}
.reel-devamini-oku{
  background:none; border:none; padding:0; margin:-4px 0 8px; display:block;
  font-size:0.78rem; font-weight:700; color:rgba(255,255,255,0.85);
  cursor:pointer; text-shadow:0 1px 3px rgba(0,0,0,0.4);
}
.reel-devamini-oku:hover{ color:#fff; text-decoration:underline; }
.reel-muzik-seridi{
  display:flex; align-items:center; gap:6px; font-size:0.76rem; font-weight:600;
  background:rgba(255,255,255,0.16); backdrop-filter:blur(4px);
  border-radius:999px; padding:5px 12px; width:fit-content; max-width:100%;
}
.reel-muzik-seridi span{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.reels-yukleniyor{
  position:absolute; left:0; right:0; bottom:12px; z-index:1;
  display:flex; justify-content:center; pointer-events:none;
}
.reels-bos{
  position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
  color:#fff; text-align:center; padding:20px;
}

.reels-misafir-kilit{
  position:absolute; inset:0; z-index:50;
  background:linear-gradient(180deg, #0d0d10, #000);
  display:flex; align-items:center; justify-content:center;
  padding:20px;
}
.reels-misafir-kutu{ max-width:340px; text-align:center; color:#fff; }
.reels-misafir-ikon{ font-size:2.4rem; margin-bottom:14px; }
.reels-misafir-kutu h2{ font-size:1.15rem; font-weight:800; margin-bottom:8px; }
.reels-misafir-kutu p{ font-size:0.86rem; color:rgba(255,255,255,0.7); margin-bottom:22px; line-height:1.5; }
.reels-misafir-aksiyon{ display:flex; flex-direction:column; gap:10px; }
.reels-misafir-aksiyon .btn-outline{
  border:1px solid rgba(255,255,255,0.55);
  color:#fff;
  background:transparent;
}

.reels-misafir-kilit.reels-misafir-banner{
  inset:auto 0 0 0;
  background:linear-gradient(0deg, rgba(0,0,0,0.92), rgba(0,0,0,0.55) 70%, transparent);
  padding:14px 16px calc(14px + env(safe-area-inset-bottom));
  align-items:center;
}
.reels-misafir-banner .reels-misafir-kutu{
  max-width:none; width:100%; text-align:left;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
}
.reels-misafir-banner .reels-misafir-ikon{ display:none; }
.reels-misafir-banner .reels-misafir-kutu h2{ font-size:0.86rem; margin:0; }
.reels-misafir-banner .reels-misafir-kutu p{ display:none; }
.reels-misafir-banner .reels-misafir-aksiyon{ flex-direction:row; gap:8px; flex-shrink:0; }
.reels-misafir-banner .reels-misafir-aksiyon .btn{ padding:8px 14px; font-size:0.78rem; white-space:nowrap; }
.reels-misafir-aksiyon .btn-outline:hover{
  background:rgba(255,255,255,0.1);
  border-color:#fff;
}

/* ---- Yorum paneli (alttan acilan sheet) ---- */
.reel-yorum-panel{
  position:fixed; left:0; right:0; bottom:0; z-index:2000;
  max-width:560px; margin:0 auto;
  background:var(--surface); border-radius:18px 18px 0 0;
  box-shadow:0 -12px 40px -12px rgba(0,0,0,0.35);
  height:min(70vh, 560px);
  display:flex; flex-direction:column;
  transform:translateY(100%);
  transition:transform .25s ease;
}
.reel-yorum-panel.acik{ transform:translateY(0); }
.reel-yorum-panel-baslik{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 16px; border-bottom:1px solid var(--border);
  font-weight:800; font-size:0.92rem; flex:none;
}
.reel-yorum-panel-baslik button{ width:28px; height:28px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:var(--text-muted); }
.reel-yorum-liste{ flex:1; overflow-y:auto; padding:10px 16px; }
.reel-yorum-satir{ display:flex; gap:10px; padding:9px 0; }
.reel-yorum-satir img{ width:32px; height:32px; border-radius:50%; object-fit:cover; flex-shrink:0; }
.reel-yorum-satir b{ font-size:0.82rem; }
.reel-yorum-satir p{ font-size:0.82rem; margin-top:2px; line-height:1.4; }
.reel-yorum-yaz-satiri{
  display:flex; gap:8px; padding:12px 14px; border-top:1px solid var(--border); flex:none;
  padding-bottom:calc(12px + env(safe-area-inset-bottom));
}
.reel-yorum-yaz-satiri input{
  flex:1; border:1px solid var(--border-strong); border-radius:999px; padding:10px 14px;
  background:var(--surface-alt); color:var(--text); font-family:inherit; font-size:0.85rem;
}
.reel-yorum-yaz-satiri button{
  background:var(--accent); color:#fff; border-radius:999px; padding:0 16px; font-weight:700; font-size:0.82rem;
}

@media (max-width:860px){
  .reel-eylem-cubugu{ bottom:200px; }
}

/* ---- Paylas alt sayfasi (share bottom sheet) ---- */
.reel-paylas-arkaplan{
  position:fixed; inset:0; z-index:2100; background:rgba(0,0,0,0.5);
  opacity:0; pointer-events:none; transition:opacity .2s ease;
}
.reel-paylas-arkaplan.acik{ opacity:1; pointer-events:auto; }
.reel-paylas-sheet{
  position:fixed; left:0; right:0; bottom:0; z-index:2200;
  max-width:560px; margin:0 auto;
  background:var(--surface); border-radius:18px 18px 0 0;
  box-shadow:0 -12px 40px -12px rgba(0,0,0,0.35);
  max-height:70vh; overflow-y:auto;
  transform:translateY(100%);
  transition:transform .25s ease;
  padding-bottom:calc(14px + env(safe-area-inset-bottom));
}
.reel-paylas-sheet.acik{ transform:translateY(0); }
.reel-paylas-tutamac{
  width:40px; height:4px; border-radius:999px; background:var(--border-strong);
  margin:10px auto 6px;
}
.reel-paylas-baslik{
  display:flex; align-items:center; gap:10px; padding:8px 16px 12px;
  font-weight:800; font-size:0.92rem;
}
.reel-paylas-geri-btn{
  width:28px; height:28px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  color:var(--text-muted); flex-shrink:0;
}
.reel-paylas-secenekler{ display:flex; flex-direction:column; padding:4px 8px 10px; }
.reel-paylas-secenek{
  display:flex; align-items:center; gap:14px; padding:12px 10px; border-radius:12px;
  font-size:0.9rem; font-weight:600; text-align:left; width:100%;
}
.reel-paylas-secenek:active{ background:var(--surface-alt); }
.reel-paylas-secenek .reel-paylas-ikon{
  width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center; flex-shrink:0;
  background:var(--surface-alt); color:var(--text);
}
.reel-paylas-secenek .reel-paylas-ikon.whatsapp{ background:#25D366; color:#fff; }
.reel-paylas-secenek .reel-paylas-ikon.kopyala{ background:var(--accent); color:#fff; }
.reel-paylas-arkadas-liste{ padding:4px 12px 10px; max-height:52vh; overflow-y:auto; }
.reel-paylas-arkadas-satiri{
  display:flex; align-items:center; gap:12px; padding:10px 4px; border-radius:12px;
  width:100%; text-align:left;
}
.reel-paylas-arkadas-satiri:active{ background:var(--surface-alt); }
.reel-paylas-arkadas-satiri img{ width:40px; height:40px; border-radius:50%; object-fit:cover; flex-shrink:0; }
.reel-paylas-arkadas-satiri b{ font-size:0.86rem; font-weight:700; }
.reel-paylas-gonderildi{ font-size:0.76rem; color:var(--accent); font-weight:700; margin-left:auto; }
.reel-paylas-bos{ text-align:center; color:var(--text-dim); padding:24px 10px; font-size:0.85rem; }

.reels-olustur-fab{
  position:fixed; z-index:60; right:16px; bottom:calc(20px + env(safe-area-inset-bottom));
  width:52px; height:52px; border-radius:50%;
  background:var(--grad); color:#fff; box-shadow:0 8px 24px -6px rgba(0,0,0,0.5);
  display:flex; align-items:center; justify-content:center;
}
.reels-olustur-fab .icon{ width:24px; height:24px; }
@media (min-width:640px){
  .reels-olustur-fab{ bottom:26px; }
}

.reel-oneri-oda-ikon{
  width:44px; height:44px; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,#4F7CFF,#8B5CF6); color:#fff;
}
.reel-oneri-oda-ikon svg{ width:20px; height:20px; }