/* Agalar — koyu, sakin, gerçek bir video sitesi hissi. Derleme adımı YOK. */
:root {
  --zemin:#0b0b0b; --yuzey:#151515; --yuzey2:#1f1f1f; --kenar:#2b2b2b;
  --metin:#f4f4f4; --soluk:#9b9b9b; --soluk2:#6b6b6b;
  --vurgu:#ff004a;                      /* sitenin kimlik rengi */
  --vurgu-koyu:#d90040;
  --vurgu-yum:rgba(255,0,74,.16);
  --ok:#ff4d7d;
  --r:6px;                              /* köşeli, sert hat */
  --yan:232px;
  color-scheme: dark;
}
* { box-sizing:border-box; margin:0; padding:0; }
html,body { height:100%; }
body {
  background:var(--zemin); color:var(--metin);
  font-family:-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  font-size:14px; line-height:1.45; -webkit-font-smoothing:antialiased;
}
a { color:inherit; text-decoration:none; }
button,input,textarea,select { font:inherit; color:inherit; }
img,video { display:block; max-width:100%; }
::selection { background:var(--vurgu); color:#fff; }
::-webkit-scrollbar { width:10px; height:10px; }
::-webkit-scrollbar-thumb { background:#303030; border-radius:99px; }
::-webkit-scrollbar-thumb:hover { background:#3d3d3d; }

/* ── Üst çubuk ── */
.ust { position:sticky; top:0; z-index:60; display:flex; align-items:center; gap:16px;
  height:56px; padding:0 16px; background:var(--zemin); }
.mnu { display:grid; place-items:center; width:38px; height:38px; border-radius:50%;
  border:0; background:none; cursor:pointer; color:var(--metin); }
.mnu:hover { background:var(--yuzey2); }
.marka { display:flex; align-items:center; gap:7px; font-weight:800; font-size:19px;
  letter-spacing:-.03em; cursor:pointer; }
.marka .nk { width:22px; height:22px; border-radius:6px; background:var(--vurgu);
  display:grid; place-items:center; }
.marka .nk::after { content:""; border-left:7px solid #fff; border-top:4.5px solid transparent;
  border-bottom:4.5px solid transparent; margin-left:2px; }
.ara { flex:1; max-width:600px; margin:0 auto; display:flex; }
.ara input { flex:1; background:#121212; border:1px solid #303030; border-right:0;
  border-radius:99px 0 0 99px; padding:9px 16px; outline:none; }
.ara input:focus { border-color:var(--ok); }
.ara button { border:1px solid #303030; border-left:0; background:var(--yuzey2);
  border-radius:0 99px 99px 0; padding:0 20px; cursor:pointer; }
.ara button:hover { background:#303030; }
.ust-sag { margin-left:auto; display:flex; align-items:center; gap:8px; }

/* ── Yan menü ── */
.kabuk { display:flex; }
.yan { position:sticky; top:56px; width:var(--yan); height:calc(100vh - 56px);
  overflow-y:auto; padding:12px 8px; flex:0 0 var(--yan); }
.yan.kapali { display:none; }
.yl { display:flex; align-items:center; gap:14px; padding:9px 12px; border-radius:10px;
  cursor:pointer; font-size:14px; }
.yl:hover { background:var(--yuzey2); }
.yl.aktif { background:var(--yuzey2); font-weight:600; }
.yl svg { width:20px; height:20px; flex:0 0 20px; }
.yan hr { border:0; border-top:1px solid var(--kenar); margin:12px 8px; }
.yan .bslk { font-size:12px; font-weight:700; color:var(--soluk2); padding:6px 12px;
  text-transform:uppercase; letter-spacing:.05em; }
.icerik { flex:1; min-width:0; padding:20px 24px 60px; }
@media (max-width:1000px){ .yan{display:none} .icerik{padding:16px} }

/* ── Düğmeler ── */
.dg { display:inline-flex; align-items:center; gap:7px; cursor:pointer; border:0;
  background:var(--yuzey2); color:var(--metin); border-radius:99px; padding:8px 15px;
  font-size:13.5px; font-weight:600; transition:background .12s, transform .06s; }
.dg:hover { background:#303030; }
.dg:active { transform:scale(.97); }
.dg-ana { background:var(--vurgu); color:#fff; font-weight:700; }
.dg-ana:hover { background:var(--vurgu-koyu); }
.dg-cizgi { background:transparent; border:1px solid #303030; }
.dg-cizgi:hover { background:var(--yuzey2); }
.dg-k { padding:5px 11px; font-size:12.5px; }
.dg:disabled { opacity:.5; cursor:not-allowed; }
.dg.secili { background:var(--vurgu-yum); color:var(--vurgu); }
.oy { display:inline-flex; align-items:center; background:var(--yuzey2); border-radius:99px; }
.oy button { border:0; background:none; cursor:pointer; padding:8px 14px; display:flex;
  align-items:center; gap:6px; font-size:13.5px; font-weight:600; border-radius:99px; }
.oy button:hover { background:#303030; }
.oy .ayrac { width:1px; height:20px; background:#3d3d3d; }
.oy button.secili { color:var(--vurgu); }

/* ── Grid ── */
.grid { display:grid; gap:24px 16px; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); }
.kart { cursor:pointer; }
.kapak { position:relative; aspect-ratio:16/9; border-radius:var(--r); overflow:hidden;
  background:#212121; }
.kapak img { width:100%; height:100%; object-fit:cover; transition:transform .25s; }
.kart:hover .kapak img { transform:scale(1.03); }
.kapak .sure { position:absolute; right:6px; bottom:6px; background:rgba(0,0,0,.85);
  padding:1px 5px; border-radius:4px; font-size:12px; font-weight:600; font-variant-numeric:tabular-nums; }
.kapak .yok { width:100%; height:100%; display:grid; place-items:center; color:#3a3a3a; }
.kapak .islem { position:absolute; left:6px; top:6px; background:rgba(0,0,0,.8);
  padding:2px 7px; border-radius:4px; font-size:11px; font-weight:700; color:#ffd166; }
.kart .satir { display:flex; gap:11px; margin-top:11px; }
.kart h3 { font-size:14.5px; font-weight:600; line-height:1.35; margin-bottom:3px;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.kart .alt { font-size:13px; color:var(--soluk); }
.kart .alt:hover { color:var(--metin); }

/* ── Avatar ── */
.av { border-radius:50%; background:linear-gradient(135deg,#ff004a,#ff6b96); color:#fff;
  display:grid; place-items:center; font-weight:700; flex:0 0 auto; }
.av-36 { width:36px; height:36px; font-size:15px; }
.av-40 { width:40px; height:40px; font-size:16px; }
.av-72 { width:72px; height:72px; font-size:28px; }

/* ── İzleme ── */
.izle { display:grid; grid-template-columns:minmax(0,1fr) 400px; gap:24px; align-items:start;
  max-width:1700px; }
@media (max-width:1300px){ .izle{grid-template-columns:1fr} }
.oyn-sar { position:relative; background:#000; border-radius:var(--r); overflow:hidden; }
.oyn-sar video { width:100%; aspect-ratio:16/9; background:#000; display:block; }
.oyn-arac { position:absolute; right:10px; bottom:56px; display:flex; gap:8px; }
.oyn-dg { background:rgba(0,0,0,.72); border:0; color:#fff; border-radius:8px; padding:6px 11px;
  font-size:12.5px; font-weight:700; cursor:pointer; backdrop-filter:blur(6px); }
.oyn-dg:hover { background:rgba(0,0,0,.9); }
.mnu-kutu { position:absolute; right:10px; bottom:96px; background:rgba(20,20,20,.97);
  border:1px solid #333; border-radius:10px; padding:6px; min-width:150px; z-index:5;
  backdrop-filter:blur(10px); }
.mnu-kutu button { display:flex; align-items:center; justify-content:space-between; width:100%;
  border:0; background:none; color:#fff; padding:8px 11px; border-radius:7px; cursor:pointer;
  font-size:13px; }
.mnu-kutu button:hover { background:#2c2c2c; }
.mnu-kutu button.secili { color:var(--vurgu); font-weight:700; }
.izle h1 { font-size:20px; font-weight:700; margin:14px 0 10px; line-height:1.3; }
.uretici-satir { display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding:2px 0; }
.uretici-satir .ad { font-size:15px; font-weight:600; }
.uretici-satir .takipci { font-size:12.5px; color:var(--soluk); }
.eylemler { display:flex; gap:8px; margin-left:auto; flex-wrap:wrap; }
.kutu-aciklama { background:var(--yuzey); border-radius:var(--r); padding:12px 14px; margin-top:14px;
  font-size:14px; }
.kutu-aciklama .ust-bilgi { font-weight:600; margin-bottom:6px; }
.kutu-aciklama .gvd { white-space:pre-wrap; color:#e8e8e8; }
.etiketler { display:flex; flex-wrap:wrap; gap:7px; margin-top:11px; }
.etiket { background:var(--yuzey2); border-radius:99px; padding:4px 11px; font-size:12.5px;
  color:var(--ok); cursor:pointer; }
.etiket:hover { background:#303030; }

/* ── Reklam ── */
.reklam { background:linear-gradient(135deg,#1a1a1a,#141414); border:1px solid #2e2e2e;
  border-radius:var(--r); padding:14px 16px; margin-bottom:14px; display:flex;
  align-items:center; gap:14px; flex-wrap:wrap; }
.reklam .et { font-size:10px; font-weight:800; letter-spacing:.14em; color:var(--soluk2);
  border:1px solid #333; padding:2px 7px; border-radius:4px; }
.reklam p { flex:1; min-width:200px; font-size:13.5px; color:var(--soluk); }

/* ── Yan öneri ── */
.oneri { display:flex; gap:9px; cursor:pointer; }
.oneri .kapak { width:168px; flex:0 0 168px; }
.oneri h4 { font-size:14px; font-weight:600; line-height:1.3;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.oneri .alt { font-size:12.5px; color:var(--soluk); margin-top:4px; }

/* ── Yorum ── */
.yorum { display:flex; gap:12px; padding:14px 0; }
.yorum .gvd { flex:1; min-width:0; }
.yorum .bas { font-size:13px; font-weight:600; }
.yorum .bas span { color:var(--soluk); font-weight:400; margin-left:6px; }
.yorum .mtn { font-size:14px; margin-top:3px; white-space:pre-wrap; word-break:break-word; }
.yorum .oylar { display:flex; align-items:center; gap:4px; margin-top:6px; }
.yorum .oylar button { border:0; background:none; color:var(--soluk); cursor:pointer;
  display:flex; align-items:center; gap:5px; padding:5px 8px; border-radius:99px; font-size:12.5px; }
.yorum .oylar button:hover { background:var(--yuzey2); color:var(--metin); }
.yorum .oylar button.secili { color:var(--vurgu); }

/* ── Form / kutu ── */
.kutu { background:var(--yuzey); border-radius:var(--r); padding:24px; }
.dar { max-width:400px; margin:48px auto; }
.alan { margin-bottom:14px; }
.alan label { display:block; font-size:12px; font-weight:700; color:var(--soluk);
  margin-bottom:6px; }
.alan input,.alan textarea,.alan select { width:100%; background:#121212; border:1px solid #303030;
  border-radius:10px; padding:10px 12px; outline:none; }
.alan input:focus,.alan textarea:focus { border-color:var(--ok); }
.alan textarea { min-height:92px; resize:vertical; }
.ipucu { font-size:12px; color:var(--soluk2); margin-top:5px; }
.hata { color:#ff6b8a; font-size:13px; margin-top:10px; min-height:18px; }

/* ── Profil ── */
.profil-ust { display:flex; align-items:center; gap:20px; padding:8px 0 22px; flex-wrap:wrap; }
.profil-ust h1 { font-size:24px; font-weight:800; }
.profil-ust .ist { font-size:13px; color:var(--soluk); margin-top:3px; }
.profil-ust .hk { font-size:13.5px; color:var(--soluk); margin-top:7px; max-width:640px;
  white-space:pre-wrap; }

/* ── Sekme / tablo / rozet ── */
.sekmeler { display:flex; gap:6px; border-bottom:1px solid var(--kenar); margin-bottom:20px; }
.sekme { padding:11px 16px; font-size:14px; font-weight:600; color:var(--soluk);
  border:0; border-bottom:2px solid transparent; background:none; cursor:pointer; }
.sekme.aktif { color:var(--metin); border-bottom-color:var(--metin); }
table { width:100%; border-collapse:collapse; font-size:13.5px; }
th { text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:.05em;
  color:var(--soluk2); padding:10px; border-bottom:1px solid var(--kenar); }
td { padding:11px 10px; border-bottom:1px solid var(--kenar); }
tr:hover td { background:var(--yuzey); }
.rozet { display:inline-block; padding:2px 9px; border-radius:99px; font-size:11px; font-weight:700; }
.rz-ok { background:rgba(62,166,255,.14); color:var(--ok); }
.rz-vg { background:var(--vurgu-yum); color:var(--vurgu); }
.rz-ps { background:var(--yuzey2); color:var(--soluk); }
.rz-sr { background:rgba(255,209,102,.14); color:#ffd166; }

/* ── İstatistik ── */
.sayilar { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px;
  margin-bottom:22px; }
.sayi { background:var(--yuzey); border-radius:var(--r); padding:16px 18px; }
.sayi .b { font-size:26px; font-weight:800; font-variant-numeric:tabular-nums; }
.sayi .k { font-size:12.5px; color:var(--soluk); margin-top:2px; }

/* ── Diğer ── */
.bos { text-align:center; color:var(--soluk); padding:80px 20px; }
.bos svg { width:44px; height:44px; margin:0 auto 12px; color:#333; }
.ilerleme { height:4px; background:var(--yuzey2); border-radius:99px; overflow:hidden; margin-top:12px; }
.ilerleme>div { height:100%; background:var(--vurgu); width:0; transition:width .2s; }
.gizle { display:none !important; }
.iskelet { background:linear-gradient(90deg,#1c1c1c,#252525,#1c1c1c); background-size:200% 100%;
  animation:kay 1.2s infinite; border-radius:var(--r); }
@keyframes kay { 0%{background-position:200% 0} 100%{background-position:-200% 0} }
.toast { position:fixed; left:50%; transform:translateX(-50%); bottom:24px; z-index:200;
  background:var(--vurgu); color:#111; border-radius:8px; padding:11px 18px; font-size:13.5px;
  font-weight:600; box-shadow:0 8px 30px rgba(0,0,0,.5); animation:gir .18s ease; }
@keyframes gir { from{opacity:0;transform:translate(-50%,10px)} }
@media (prefers-reduced-motion:reduce){ *{animation:none!important;transition:none!important} }


/* ── Önizleme (küçük resim üzerine gelince) ── */
.kapak video.oniz { position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; transition:opacity .18s; background:#000; }
.kapak video.oniz.gorunur { opacity:1; }

/* ── Onaylı rozet ── */
.onay { display:inline-flex; align-items:center; justify-content:center; width:15px; height:15px;
  border-radius:50%; background:var(--vurgu); color:#fff; flex:0 0 15px; margin-left:5px;
  vertical-align:-2px; }
.onay svg { width:10px; height:10px; }
.onay-b { width:19px; height:19px; flex-basis:19px; }
.onay-b svg { width:12px; height:12px; }

/* ── Kanal banner ── */
.banner { position:relative; width:100%; aspect-ratio:6.2/1; min-height:120px; max-height:230px;
  border-radius:var(--r); overflow:hidden; background:linear-gradient(120deg,#1c1c1c,#2a2a2a);
  margin-bottom:18px; }
.banner img { width:100%; height:100%; object-fit:cover; }
.banner .arac { position:absolute; right:10px; bottom:10px; display:flex; gap:8px; }
.av img { width:100%; height:100%; object-fit:cover; border-radius:50%; }

/* ── Vurgu şeridi (izleme sayfası eylem çubuğu) ── */
.eylem-cubuk { display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  background:var(--yuzey); border-radius:var(--r); padding:10px 12px; margin-top:12px; }


/* ── Profil açılır menüsü ── */
.pmenu { position:absolute; right:0; top:46px; background:var(--yuzey); border:1px solid var(--kenar);
  border-radius:10px; padding:6px; min-width:210px; z-index:80; box-shadow:0 10px 40px rgba(0,0,0,.6); }
.pmenu .bas { display:flex; align-items:center; gap:10px; padding:10px 12px;
  border-bottom:1px solid var(--kenar); margin-bottom:6px; }
.pmenu .bas .ad { font-weight:600; font-size:13.5px; }
.pmenu .bas .ep { font-size:11.5px; color:var(--soluk); }
.pmenu button { display:flex; align-items:center; gap:12px; width:100%; border:0; background:none;
  color:var(--metin); padding:9px 12px; border-radius:8px; cursor:pointer; font-size:13.5px; text-align:left; }
.pmenu button:hover { background:var(--yuzey2); }
.pmenu button svg { width:18px; height:18px; flex:0 0 18px; color:var(--soluk); }
.pmenu hr { border:0; border-top:1px solid var(--kenar); margin:6px 0; }


/* ── Açık tema (profil menüsünden) ── */
html.acik-tema {
  --zemin:#ffffff; --yuzey:#f4f4f6; --yuzey2:#e9e9ee; --kenar:#dcdce2;
  --metin:#0f0f10; --soluk:#5f5f68; --soluk2:#8a8a93;
  color-scheme: light;
}
html.acik-tema .ara input { background:#fff; border-color:var(--kenar); }
html.acik-tema .ara button { background:var(--yuzey2); border-color:var(--kenar); }
html.acik-tema .dg:hover { background:#dcdce2; }
html.acik-tema .oy button:hover { background:#dcdce2; }
html.acik-tema .kapak { background:#e4e4e9; }
html.acik-tema ::-webkit-scrollbar-thumb { background:#c9c9d1; }
html.acik-tema .oyn-sar { background:#000; }


/* ── Stüdyo · analiz · "en çok oynatılan" ─────────────────────────────── */
.soluk { color:var(--soluk); font-weight:400; }
.kutu-bas { font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:.05em;
  color:var(--soluk2); margin-bottom:12px; }

/* Oynatıcı altındaki elde tutma şeridi */
.tutma { background:var(--yuzey); border-radius:var(--r); padding:10px 12px; margin-top:10px; }
.tutma .bas { display:flex; justify-content:space-between; align-items:baseline;
  font-size:13px; font-weight:700; margin-bottom:8px; }
.tutma .bas .soluk { font-size:12px; }
.tutma .cubuklar { display:flex; align-items:flex-end; gap:2px; height:44px; }
.tutma .cb { flex:1; background:var(--yuzey2); border-radius:2px 2px 0 0; cursor:pointer;
  transition:background .15s, transform .15s; transform-origin:bottom; }
.tutma .cb:hover { background:var(--ok); transform:scaleY(1.06); }
.tutma .cb.zirve { background:var(--vurgu); }

/* Çubuk grafik (stüdyo analiz) */
.cizgi-grafik { display:flex; align-items:flex-end; gap:2px; height:110px; }
.cizgi-grafik.gr-yuksek { height:150px; }
.cizgi-grafik .cb { flex:1; min-width:3px; background:var(--vurgu); opacity:.75;
  border-radius:2px 2px 0 0; transition:opacity .15s; }
.cizgi-grafik .cb:hover { opacity:1; }
.grafik-alt { display:flex; justify-content:space-between; font-size:11.5px;
  color:var(--soluk2); margin-top:6px; }

/* İçerik tablosu */
.studyo-tablo td { vertical-align:top; }
.studyo-tablo .say { font-variant-numeric:tabular-nums; white-space:nowrap; }
.studyo-tablo .soluk { color:var(--soluk); }
.st-video { display:flex; gap:10px; min-width:260px; }
.st-kapak { position:relative; width:112px; flex:0 0 112px; aspect-ratio:16/9; border-radius:4px;
  overflow:hidden; background:var(--yuzey2); cursor:pointer; }
.st-kapak.k2 { width:88px; flex-basis:88px; }
.st-kapak img, .st-kapak video { width:100%; height:100%; object-fit:cover; }
.st-kapak .sure { position:absolute; right:4px; bottom:4px; background:rgba(0,0,0,.85);
  color:#fff; font-size:10.5px; font-weight:600; padding:1px 4px; border-radius:3px; }
.st-kapak .yok { width:100%; height:100%; display:grid; place-items:center; color:#3a3a3a; }
.st-kapak .yok svg { width:22px; height:22px; }
.st-kapak .islem { position:absolute; left:4px; top:4px; background:rgba(0,0,0,.8);
  color:#ffd166; font-size:9.5px; font-weight:700; padding:1px 4px; border-radius:3px; }
.st-baslik { font-size:13.5px; font-weight:600; line-height:1.35; cursor:pointer;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.st-baslik:hover { color:var(--ok); }
.st-alt { font-size:12px; color:var(--soluk2); margin-top:3px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:340px; }
.st-sec { background:var(--yuzey2); border:1px solid var(--kenar); border-radius:6px;
  padding:6px 8px; font-size:12.5px; outline:none; cursor:pointer; width:auto; min-width:128px; }
.st-sec:focus { border-color:var(--ok); }
.st-sira { display:flex; gap:10px; align-items:center; padding:8px 0; cursor:pointer;
  border-top:1px solid var(--kenar); }
.st-sira:first-of-type { border-top:0; }

/* Orta katman (analiz / düzenleme) */
.orta { position:fixed; inset:0; background:rgba(0,0,0,.68); z-index:120;
  display:flex; align-items:flex-start; justify-content:center; padding:40px 16px;
  overflow-y:auto; backdrop-filter:blur(3px); }
.orta-kutu { background:var(--zemin); border:1px solid var(--kenar); border-radius:var(--r);
  width:100%; max-width:640px; box-shadow:0 20px 70px rgba(0,0,0,.55); }
.orta-bas { display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:16px 20px; border-bottom:1px solid var(--kenar); }
.orta-bas h3 { font-size:16px; font-weight:700; overflow:hidden; text-overflow:ellipsis;
  white-space:nowrap; }
.orta-kapa { border:0; background:none; color:var(--soluk); font-size:16px; cursor:pointer;
  width:30px; height:30px; border-radius:6px; flex:0 0 30px; }
.orta-kapa:hover { background:var(--yuzey2); color:var(--metin); }
.orta-gvd { padding:20px; }
.orta-gvd .sayilar.sy-k { grid-template-columns:repeat(auto-fit,minmax(128px,1fr)); gap:8px;
  margin-bottom:0; }
.orta-gvd .sy-k .sayi { padding:11px 13px; }
.orta-gvd .sy-k .b { font-size:19px; }
.orta-gvd .alan input, .orta-gvd .alan textarea, .orta-gvd .alan select { border-radius:6px; }
@media (max-width:760px){
  .studyo-tablo thead { display:none; }
  .studyo-tablo tr { display:grid; gap:6px; padding:12px 0; border-bottom:1px solid var(--kenar); }
  .studyo-tablo td { border:0; padding:0; }
  .st-alt { max-width:none; }
}
html.acik-tema .st-sec { background:#fff; }
html.acik-tema .orta { background:rgba(0,0,0,.35); }


/* ── Shorts: dikey tam ekran akış ─────────────────────────────────────── */
.shorts { height:calc(100vh - 96px); overflow-y:auto; scroll-snap-type:y mandatory;
  scrollbar-width:none; display:flex; flex-direction:column; align-items:center; gap:14px; }
.shorts::-webkit-scrollbar { display:none; }
.short { scroll-snap-align:center; scroll-snap-stop:always; flex:0 0 auto;
  height:calc(100vh - 96px); display:flex; align-items:center; gap:14px; }
.sh-oynat { position:relative; height:100%; aspect-ratio:9/16; max-width:min(92vw,460px);
  background:#000; border-radius:12px; overflow:hidden; }
.sh-oynat video { width:100%; height:100%; object-fit:contain; background:#000; cursor:pointer; }
.sh-ses { position:absolute; right:10px; top:10px; width:34px; height:34px; border-radius:50%;
  background:rgba(0,0,0,.55); display:grid; place-items:center; cursor:pointer; color:#fff;
  backdrop-filter:blur(6px); }
.sh-ses svg { width:18px; height:18px; }
.sh-ses.kapali { color:var(--soluk); }
.sh-ses.kapali::after { content:""; position:absolute; width:22px; height:2px; background:#fff;
  transform:rotate(-45deg); border-radius:2px; }
.sh-bilgi { position:absolute; left:0; right:0; bottom:0; padding:38px 14px 14px; color:#fff;
  background:linear-gradient(to top,rgba(0,0,0,.85),transparent); }
.sh-uretici { display:flex; align-items:center; gap:8px; font-weight:600; font-size:14px;
  cursor:pointer; margin-bottom:6px; }
.sh-baslik { font-size:14px; line-height:1.35; cursor:pointer;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.sh-etiket { font-size:12.5px; color:#ff8fae; margin-top:4px; }
.sh-eylem { display:flex; flex-direction:column; gap:16px; align-self:flex-end;
  padding-bottom:26px; }
.sh-eylem button { display:flex; flex-direction:column; align-items:center; gap:3px;
  border:0; background:none; color:var(--metin); cursor:pointer; font:inherit; }
.sh-eylem button svg { width:24px; height:24px; padding:9px; box-sizing:content-box;
  background:var(--yuzey); border-radius:50%; transition:background .15s, color .15s; }
.sh-eylem button:hover svg { background:var(--yuzey2); }
.sh-eylem button.secili svg { background:var(--vurgu); color:#fff; }
.sh-eylem b { font-size:12px; font-weight:600; font-variant-numeric:tabular-nums; }
@media (max-width:640px){
  .sh-eylem { position:absolute; right:8px; bottom:80px; padding:0; z-index:2; }
  .short { position:relative; }
  .sh-eylem button svg { background:rgba(0,0,0,.5); color:#fff; }
}


/* ══ 2026-08-14 · rol rozetleri, galeri, liderlik, öneri, mesaj, plan ══════ */

/* Sayfa başlığı — tüm yeni ekranlarda ortak */
.sayfa-bas { display:flex; align-items:flex-end; gap:16px; flex-wrap:wrap; margin-bottom:20px; }
.sayfa-bas h1 { font-size:26px; font-weight:800; letter-spacing:-.02em; }
.sayfa-bas p { color:var(--soluk); font-size:14px; margin-top:4px; max-width:62ch; }
.sayfa-bas > :last-child:not(:first-child) { margin-left:auto; }
.kadi { font-size:12.5px; color:var(--soluk2); }

/* Site geneli rol rozeti */
.rol-rz { display:inline-block; vertical-align:1px; margin-left:6px; padding:1px 7px;
  border-radius:99px; font-size:10.5px; font-weight:800; letter-spacing:.03em;
  text-transform:uppercase; color:var(--rz);
  background:color-mix(in srgb, var(--rz) 16%, transparent);
  border:1px solid color-mix(in srgb, var(--rz) 45%, transparent); }
.rozet.rz-plan { cursor:pointer; background:var(--vurgu-yum); color:var(--ok);
  border:1px solid color-mix(in srgb, var(--vurgu) 40%, transparent); }
.rozet.rz-yon  { background:rgba(255,209,102,.16); color:#ffd166; }
.rozet.rz-oner { background:var(--vurgu-yum); color:var(--ok); }

/* Kenar çubuğu: liderlik en altta + okunmamış sayacı */
.yan { display:flex; flex-direction:column; }
.yan-alt { margin-top:auto; padding-top:12px; border-top:1px solid var(--kenar); }
.yl-say { margin-left:auto; background:var(--vurgu); color:#fff; font-size:11px;
  font-weight:700; padding:1px 6px; border-radius:99px; }

/* Yükleme bilgilendirmesi */
.bilgi-kutu { margin-top:12px; padding:12px 14px; border-radius:var(--r); font-size:13.5px;
  line-height:1.55; background:var(--vurgu-yum);
  border:1px solid color-mix(in srgb, var(--vurgu) 35%, transparent); }

/* Stüdyo: transkod ilerlemesi */
.st-islem { margin-top:6px; max-width:220px; }
.st-cubuk { height:5px; border-radius:99px; background:var(--yuzey2); overflow:hidden; }
.st-cubuk span { display:block; height:100%; background:var(--vurgu); transition:width .4s; }

/* ── Abonelik ── */
.ab-bas { text-align:center; margin:10px 0 26px; }
.ab-bas h1 { font-size:30px; font-weight:800; letter-spacing:-.03em; }
.ab-bas p { color:var(--soluk); margin-top:6px; }
.ab-secim { display:inline-flex; gap:4px; margin-top:18px; padding:4px;
  background:var(--yuzey); border-radius:99px; }
.ab-secim button { border:0; background:none; color:var(--soluk); font:inherit; font-weight:600;
  padding:8px 18px; border-radius:99px; cursor:pointer; display:flex; align-items:center; gap:7px; }
.ab-secim button.aktif { background:var(--vurgu); color:#fff; }
.ab-kazanc { font-size:11px; font-weight:700; padding:1px 7px; border-radius:99px;
  background:rgba(255,255,255,.18); }
.ab-secim button:not(.aktif) .ab-kazanc { background:var(--vurgu-yum); color:var(--ok); }
.ab-kartlar { display:grid; grid-template-columns:repeat(auto-fit,minmax(258px,1fr)); gap:16px;
  max-width:1000px; margin:0 auto; align-items:start; }
.ab-kart { position:relative; background:var(--yuzey); border:1px solid var(--kenar);
  border-radius:12px; padding:24px 20px; display:flex; flex-direction:column; gap:10px; }
.ab-kart.one-cikan { border-color:var(--pr); box-shadow:0 0 0 1px var(--pr),
  0 18px 50px color-mix(in srgb, var(--pr) 18%, transparent); }
.ab-kart.secili { border-color:var(--pr); }
.ab-etiket { position:absolute; top:-11px; left:50%; transform:translateX(-50%);
  background:var(--pr); color:#fff; font-size:11px; font-weight:800; letter-spacing:.04em;
  text-transform:uppercase; padding:3px 12px; border-radius:99px; white-space:nowrap; }
.ab-kart h3 { font-size:19px; font-weight:800; color:var(--pr); }
.ab-ozet { color:var(--soluk); font-size:13px; }
.ab-fiyat { display:flex; align-items:baseline; gap:6px; margin-top:4px; }
.ab-fiyat b { font-size:32px; font-weight:800; letter-spacing:-.03em;
  font-variant-numeric:tabular-nums; }
.ab-fiyat span { color:var(--soluk); font-size:13px; }
.ab-not { font-size:12px; color:var(--soluk2); }
.ab-haklar { list-style:none; display:flex; flex-direction:column; gap:8px; margin:10px 0 16px;
  font-size:13.5px; }
.ab-haklar li { position:relative; padding-left:22px; line-height:1.4; }
.ab-haklar li::before { content:""; position:absolute; left:2px; top:6px; width:10px; height:5px;
  border-left:2px solid var(--pr); border-bottom:2px solid var(--pr); transform:rotate(-45deg); }
.ab-kart .dg { width:100%; justify-content:center; margin-top:auto; }
.ab-alt { text-align:center; color:var(--soluk); font-size:13px; margin-top:22px; }

/* ── Galeri ── */
.gl-izgara { columns:3 300px; column-gap:16px; }
.gl-kart { break-inside:avoid; margin:0 0 16px; background:var(--yuzey);
  border-radius:12px; overflow:hidden; border:1px solid var(--kenar); }
.gl-kart img { width:100%; display:block; cursor:zoom-in; }
.gl-kart figcaption { padding:12px 14px; display:flex; flex-direction:column; gap:9px; }
.gl-kisi { display:flex; align-items:center; gap:9px; cursor:pointer; }
.gl-kisi .ad { font-size:13.5px; font-weight:600; }
.gl-baslik { font-size:13.5px; line-height:1.45; }
.gl-alt { display:flex; align-items:center; gap:10px; }
.gl-begen { display:flex; align-items:center; gap:6px; border:0; background:none; cursor:pointer;
  color:var(--soluk); font:inherit; font-size:13px; }
.gl-begen svg { width:18px; height:18px; }
.gl-begen:hover, .gl-begen.secili { color:var(--vurgu); }
.gl-alt .ipucu { margin-left:auto; }
.gl-buyut { position:fixed; inset:0; background:rgba(0,0,0,.9); z-index:150; display:grid;
  place-items:center; padding:32px; cursor:zoom-out; }
.gl-buyut img { max-width:100%; max-height:100%; border-radius:8px; }

/* ── Liderlik ── */
.ld-odul { display:flex; gap:18px; align-items:flex-start; padding:20px 22px; margin-bottom:22px;
  border-radius:12px; background:linear-gradient(120deg,
    color-mix(in srgb, var(--vurgu) 12%, var(--yuzey)), var(--yuzey));
  border:1px solid color-mix(in srgb, var(--vurgu) 30%, transparent); }
.ld-odul-ik { font-size:34px; line-height:1; }
.ld-odul h3 { font-size:17px; font-weight:800; margin-bottom:6px; }
.ld-odul p { font-size:13.5px; line-height:1.6; color:var(--soluk); max-width:78ch; }
.ld-odul p + p { margin-top:6px; }
.ld-izgara { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:16px; }
.ld-kutu { background:var(--yuzey); border:1px solid var(--kenar); border-radius:12px;
  overflow:hidden; }
.ld-bas { padding:16px 18px 12px; border-bottom:1px solid var(--kenar); }
.ld-bas h3 { font-size:15px; font-weight:700; }
.ld-bas p { font-size:12px; color:var(--soluk2); margin-top:2px; }
.ld-satir { display:flex; align-items:center; gap:11px; padding:10px 18px; cursor:pointer;
  border-bottom:1px solid var(--kenar); }
.ld-satir:last-child { border-bottom:0; }
.ld-satir:hover { background:var(--yuzey2); }
.ld-satir .ad { font-size:13.5px; font-weight:600; }
.ld-sira { width:24px; height:24px; flex:0 0 24px; display:grid; place-items:center;
  border-radius:50%; font-size:12px; font-weight:800; background:var(--yuzey2);
  color:var(--soluk); font-variant-numeric:tabular-nums; }
.ld-satir.odul .ld-sira { color:#1a1206; }
.ld-sira.s1 { background:#ffd166; } .ld-sira.s2 { background:#d5d8de; }
.ld-sira.s3 { background:#e0925c; }
.ld-deger { margin-left:auto; font-size:13px; font-weight:700; white-space:nowrap;
  font-variant-numeric:tabular-nums; }

/* ── Admin önerisi ── */
.on-liste { display:flex; flex-direction:column; gap:14px; }
.on-kart { display:flex; gap:16px; background:var(--yuzey); border:1px solid var(--kenar);
  border-radius:12px; padding:14px; }
.on-kapak { position:relative; width:260px; flex:0 0 260px; aspect-ratio:16/9; border-radius:8px;
  overflow:hidden; background:var(--yuzey2); cursor:pointer; }
.on-kapak img { width:100%; height:100%; object-fit:cover; }
.on-kapak .sure { position:absolute; right:6px; bottom:6px; background:rgba(0,0,0,.85);
  color:#fff; font-size:11px; font-weight:600; padding:1px 5px; border-radius:3px; }
.on-kapak .yok { width:100%; height:100%; display:grid; place-items:center; color:#3a3a3a; }
.on-gvd { min-width:0; display:flex; flex-direction:column; gap:8px; }
.on-gvd h3 { font-size:17px; font-weight:700; cursor:pointer; line-height:1.3; }
.on-gvd h3:hover { color:var(--ok); }
.on-uretici { display:flex; align-items:center; gap:8px; font-size:13px; cursor:pointer;
  color:var(--soluk); }
.on-not { margin-top:auto; padding:11px 13px; border-radius:8px; background:var(--zemin);
  border-left:3px solid var(--vurgu); font-size:13.5px; line-height:1.5; }
.on-not-bas { display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--soluk);
  margin-bottom:6px; flex-wrap:wrap; }
.on-serit { display:flex; gap:12px; align-items:flex-start; padding:12px 14px; margin-bottom:14px;
  border-radius:10px; background:var(--vurgu-yum);
  border:1px solid color-mix(in srgb, var(--vurgu) 35%, transparent); font-size:13.5px; }
.on-serit-ik { color:var(--vurgu); font-size:18px; line-height:1.2; }
.on-serit p { margin-top:4px; color:var(--soluk); line-height:1.5; }

/* ── Mesajlaşma ── */
.ms-sar { display:grid; grid-template-columns:290px minmax(0,1fr); gap:16px; height:64vh;
  min-height:420px; }
.ms-liste { background:var(--yuzey); border:1px solid var(--kenar); border-radius:12px;
  overflow-y:auto; }
.ms-kisi { display:flex; align-items:center; gap:10px; padding:11px 13px; cursor:pointer;
  border-bottom:1px solid var(--kenar); }
.ms-kisi:hover { background:var(--yuzey2); }
.ms-kisi.aktif { background:var(--vurgu-yum); }
.ms-kisi .ad { font-size:13.5px; font-weight:600; }
.ms-kisi .son { font-size:12px; color:var(--soluk2); overflow:hidden; text-overflow:ellipsis;
  white-space:nowrap; }
.ms-say { margin-left:auto; background:var(--vurgu); color:#fff; font-size:11px; font-weight:700;
  padding:1px 6px; border-radius:99px; }
.ms-sohbet { background:var(--yuzey); border:1px solid var(--kenar); border-radius:12px;
  display:flex; flex-direction:column; overflow:hidden; }
.ms-bas { display:flex; align-items:center; gap:10px; padding:12px 16px; cursor:pointer;
  border-bottom:1px solid var(--kenar); }
.ms-bas .ad { font-size:14px; font-weight:700; }
.ms-akis { flex:1; overflow-y:auto; padding:16px; display:flex; flex-direction:column; gap:8px; }
.ms-balon { max-width:74%; align-self:flex-start; background:var(--yuzey2); padding:9px 13px;
  border-radius:14px 14px 14px 4px; font-size:13.5px; line-height:1.45; white-space:pre-wrap;
  word-break:break-word; }
.ms-balon.benim { align-self:flex-end; background:var(--vurgu); color:#fff;
  border-radius:14px 14px 4px 14px; }
.ms-an { display:block; font-size:10.5px; opacity:.65; margin-top:4px; }
.ms-yaz { display:flex; gap:8px; padding:12px; border-top:1px solid var(--kenar); }
.ms-yaz textarea { flex:1; min-height:42px; max-height:120px; resize:vertical; background:var(--zemin);
  border:1px solid var(--kenar); border-radius:10px; padding:10px 12px; outline:none;
  color:inherit; font:inherit; }
.ms-yaz textarea:focus { border-color:var(--ok); }

/* ── Yönetim paneli ── */
.yon-ara { display:flex; gap:8px; margin-bottom:14px; }
.yon-ara input { flex:1; max-width:420px; background:var(--zemin); border:1px solid var(--kenar);
  border-radius:8px; padding:9px 12px; outline:none; color:inherit; font:inherit; }
.yon-ara input:focus { border-color:var(--ok); }
.yon-uye { display:flex; align-items:center; gap:10px; cursor:pointer; min-width:230px; }
.yon-uye .ad { font-size:13.5px; font-weight:600; }
.rol-liste { display:flex; flex-direction:column; gap:10px; margin-top:14px; }
.rol-kart { display:flex; align-items:center; gap:14px; padding:13px 16px; border-radius:10px;
  background:var(--yuzey); border:1px solid var(--kenar); border-left:3px solid var(--rz); }
.iki { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.secenekler { display:flex; flex-direction:column; gap:9px; margin:6px 0 4px; font-size:13.5px; }
.secenekler label { display:flex; align-items:center; gap:9px; cursor:pointer; }
.secenekler input { width:16px; height:16px; accent-color:var(--vurgu); }

/* Panel modu (agadmin.openmissile.com): yalnız yönetim */
body.panel-modu .yan, body.panel-modu .ara, body.panel-modu .mnu { display:none !important; }
body.panel-modu .icerik { padding:24px 28px 60px; }
body.panel-modu .marka span:last-child::after { content:" · Yönetim"; color:var(--soluk);
  font-weight:500; }

@media (max-width:900px){
  .ms-sar { grid-template-columns:1fr; height:auto; }
  .ms-liste { max-height:230px; }
  .on-kart { flex-direction:column; }
  .on-kapak { width:100%; flex-basis:auto; }
  .gl-izgara { columns:1; }
  .iki { grid-template-columns:1fr; }
}

/* Açık tema düzeltmeleri */
html.acik-tema .ms-yaz textarea, html.acik-tema .yon-ara input { background:#fff; }
html.acik-tema .on-not { background:#fff; }
html.acik-tema .ld-sira.s2 { background:#c6cad2; }

/* Kayıt: kullanıcı adı girdisi */
.kadi-girdi { display:flex; align-items:center; background:#121212; border:1px solid #303030;
  border-radius:10px; padding-left:12px; }
.kadi-girdi span { color:var(--soluk2); font-weight:600; }
.kadi-girdi input { border:0 !important; background:none !important; padding-left:4px !important; }
.ipucu.iy { color:#4ade80; } .ipucu.kt { color:var(--vurgu); }
.alan input:disabled { opacity:.6; cursor:not-allowed; }
html.acik-tema .kadi-girdi { background:#fff; border-color:var(--kenar); }

/* Yorum silme düğmesi */
.yorum .oylar .yr-sil { display:inline-flex; align-items:center; gap:5px; margin-left:6px;
  color:var(--soluk2); }
.yorum .oylar .yr-sil:hover { color:var(--vurgu); }

/* Logonun yanındaki rol etiketi */
.marka-rol { margin-left:4px; padding:2px 9px; border-radius:99px; font-size:10.5px;
  font-weight:800; letter-spacing:.04em; text-transform:uppercase; color:var(--rz);
  background:color-mix(in srgb, var(--rz) 15%, transparent);
  border:1px solid color-mix(in srgb, var(--rz) 45%, transparent); white-space:nowrap; }

/* Küçük resimdeki üç nokta menüsü */
.kart-mnu { position:absolute; right:6px; top:6px; width:30px; height:30px; border:0;
  border-radius:50%; background:rgba(0,0,0,.62); color:#fff; cursor:pointer; display:grid;
  place-items:center; opacity:0; transition:opacity .15s, background .15s;
  backdrop-filter:blur(6px); z-index:3; }
.kart-mnu svg { width:16px; height:16px; }
.kart:hover .kart-mnu, .kart-mnu:focus { opacity:1; }
.kart-mnu:hover { background:rgba(0,0,0,.85); }
.kmenu { position:absolute; right:6px; top:40px; z-index:20; min-width:206px; padding:6px;
  background:var(--yuzey); border:1px solid var(--kenar); border-radius:10px;
  box-shadow:0 14px 40px rgba(0,0,0,.55); text-align:left; }
.kmenu button { display:flex; align-items:center; gap:10px; width:100%; border:0;
  background:none; color:var(--metin); font:inherit; font-size:13px; text-align:left;
  padding:9px 10px; border-radius:7px; cursor:pointer; }
.kmenu button:hover { background:var(--yuzey2); }
.kmenu button svg { width:17px; height:17px; flex:0 0 17px; color:var(--soluk); }
@media (hover:none){ .kart-mnu { opacity:1; } }

/* Kenar çubuğu: açılır-kapanır etiket bölümü */
.yan .bslk-ac { display:flex; align-items:center; gap:6px; width:100%; border:0; background:none;
  color:var(--soluk2); font:inherit; font-size:11.5px; font-weight:700; letter-spacing:.05em;
  text-transform:uppercase; padding:8px 10px; border-radius:8px; cursor:pointer; }
.yan .bslk-ac:hover { background:var(--yuzey2); color:var(--metin); }
.yan .bslk-ac svg { width:15px; height:15px; margin-left:auto; transition:transform .18s; }
.yan .bslk-ac.acik svg { transform:rotate(180deg); }
.yl-grup { overflow:hidden; max-height:520px; transition:max-height .22s ease; }
.yl-grup.kapali { max-height:0; }