/* ============================================================
   YouCanTube - ana stil
   ============================================================ */
:root{
  --bg:#0b0e14; --bg-2:#111622; --bg-3:#161d2b; --line:#232c3d;
  --txt:#e6ebf5; --muted:#8b96ab; --dim:#5f6b80;
  --acc:#5b8cff; --acc-2:#7aa2ff; --acc-3:#9b6bff; --acc-soft:rgba(91,140,255,.12);
  --ok:#2fbf71; --ok-soft:rgba(47,191,113,.12);
  --warn:#f0a92b; --warn-soft:rgba(240,169,43,.12);
  --err:#ef4d5a; --err-soft:rgba(239,77,90,.12);
  --r:14px; --r-s:9px;
  --sh:0 8px 30px rgba(0,0,0,.35);
  --max:1180px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--txt);
  font:15px/1.6 "Segoe UI",Inter,system-ui,-apple-system,Roboto,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:var(--acc-2);text-decoration:none}
a:hover{color:#a5c0ff}
/* Uzun kullanici adlari basliklari dar ekranda tasiriyordu */
h1,h2,h3,h4{line-height:1.25;margin:0 0 .5em;overflow-wrap:anywhere}
h1{font-size:2.1rem;letter-spacing:-.02em}
h2{font-size:1.5rem;letter-spacing:-.01em}
h3{font-size:1.15rem}
p{margin:0 0 1em}
.wrap{max-width:var(--max);margin:0 auto;padding:0 20px}
.muted{color:var(--muted)}
.small{font-size:.86rem}
.center{text-align:center}
.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;background:var(--acc);color:#fff;padding:10px 16px;border-radius:8px;z-index:99}

/* ---------- nav ---------- */
.nav{position:sticky;top:0;z-index:50;background:rgba(11,14,20,.92);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.nav-in{display:flex;align-items:center;gap:14px;min-height:62px;flex-wrap:nowrap}
.brand{display:flex;align-items:center;gap:10px;color:var(--txt);font-weight:700;flex:0 0 auto}
/* Marka isareti: logonun kendisi tek parca SVG (zemin de icinde) */
.brand-mark{display:flex;flex:0 0 auto}
.brand-mark svg{display:block;height:31px;width:auto}
.brand-txt{font-size:1.02rem;white-space:nowrap}

/* Tek satirda kalir; dar ekranda hamburger menuye doner */
/* Orta baglantilar daralabilir; sagdaki kutular daralmaz. Boylece uzun
   kullanici adlari dil secicisinin ustune binmez. */
.nav-links{margin-left:auto;display:flex;align-items:center;gap:2px;flex-wrap:nowrap;
  min-width:0;flex:0 1 auto}
.nav-links > a{color:var(--muted);padding:8px 10px;border-radius:8px;font-size:.9rem;
  white-space:nowrap;line-height:1.3}
.nav-links > a:hover{color:var(--txt);background:var(--bg-3)}

/* Butonlar nav icinde de kendi renklerini korumali (ozgulluk cakismasi) */
.nav-links > a.btn{padding:9px 16px}
.nav-links > a.btn-primary,
.nav-links > a.btn-primary:hover{background:var(--acc);color:#fff;font-weight:600}
.nav-links > a.btn-primary:hover{background:var(--acc-2)}
.nav-links > a.btn-ghost,
.nav-links > a.btn-ghost:hover{color:var(--txt);background:transparent;border-color:var(--line)}
.nav-cta{margin-left:6px}

/* Hesap menusu */
.nav-menu{position:relative;margin-left:6px;flex:0 0 auto}
/* Uye kutusu ile dil secicisi arasinda her zaman bosluk kalsin */
.nav-menu + .lang-menu,
.nav-links + .lang-menu{margin-left:10px}
.nav-menu-btn{display:flex;align-items:center;gap:8px;background:var(--bg-2);border:1px solid var(--line);
  color:var(--txt);font:inherit;font-size:.9rem;padding:5px 10px 5px 6px;border-radius:999px;cursor:pointer;
  transition:.15s;max-width:190px}
.nav-menu-btn:hover{border-color:var(--acc)}
.nav-avatar{width:26px;height:26px;border-radius:50%;flex:0 0 auto;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--acc),var(--acc-3));color:#fff;font-size:12px;font-weight:700}
/* Uzun adlar kirpilir; kutu buyuyup komsusunu itmez */
.nav-menu-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:110px;
  min-width:0}
@media (max-width:1100px){ .nav-menu-name{max-width:72px} }
@media (max-width:900px){ .nav-menu-name{display:none} }
.nav-caret{font-size:10px;color:var(--muted);flex:0 0 auto}
.nav-drop{position:absolute;right:0;top:calc(100% + 8px);min-width:206px;background:var(--bg-2);
  border:1px solid var(--line);border-radius:12px;padding:6px;box-shadow:var(--sh);display:none;z-index:60}
.nav-drop.open{display:block}
.nav-drop a{display:block;padding:9px 12px;border-radius:8px;color:var(--muted);font-size:.9rem;white-space:nowrap}
.nav-drop a:hover{background:var(--bg-3);color:var(--txt)}
.nav-drop .admin-link{color:var(--warn)}
.nav-drop-out{border-top:1px solid var(--line);margin-top:4px;padding-top:11px !important}
.nav-drop-sep{display:block;height:1px;background:var(--line);margin:5px 8px}

/* Dil secici */
/* Dil secici artik logonun SOLUNDA: sagda tek kutu kalinca uzun
   kullanici adlari hicbir seyin ustune binmez. */
.lang-menu{position:relative;flex:0 0 auto;margin-inline-end:4px;z-index:2}
.lang-drop{inset-inline-start:0;inset-inline-end:auto}
.lang-btn{display:flex;align-items:center;gap:5px;background:var(--bg-2);border:1px solid var(--line);
  color:var(--txt);font:inherit;font-size:.82rem;font-weight:700;letter-spacing:.04em;
  padding:7px 10px;border-radius:8px;cursor:pointer;transition:.15s}
.lang-btn:hover{border-color:var(--acc)}
.lang-code{font-variant:all-small-caps}
.lang-drop{position:absolute;right:0;top:calc(100% + 8px);min-width:172px;background:var(--bg-2);
  border:1px solid var(--line);border-radius:12px;padding:6px;box-shadow:var(--sh);display:none;z-index:60}
.lang-drop.open{display:block}
.lang-drop a{display:flex;align-items:center;gap:9px;padding:8px 11px;border-radius:8px;
  color:var(--muted);font-size:.9rem;white-space:nowrap}
.lang-drop a:hover{background:var(--bg-3);color:var(--txt)}
.lang-drop a.on{background:var(--acc-soft);color:var(--acc-2);font-weight:600}
.lang-drop .lang-code{min-width:26px;color:var(--dim);font-size:.78rem}

/* Dil bayraklari. Emoji degil gomulu SVG: bayrak emojisi
   Windows'ta hic gorunmuyor, iki harf olarak cikiyor.
   Acik zeminli bayraklar (Fransa, Rusya) koyu arayuzde kaybolmasin
   diye ince bir cerceve var. */
.bayrak{
  width:20px; height:14px;
  flex:0 0 auto;
  border-radius:2px;
  box-shadow:0 0 0 1px rgba(255,255,255,.16);
  display:block;
}
.lang-btn .bayrak{ margin-inline-end:1px; }
.lang-drop a .bayrak{ margin-inline-end:2px; }


/* Saga akan diller */
[dir="rtl"] .nav-links{margin-left:0;margin-right:auto}
[dir="rtl"] .nav-drop,[dir="rtl"] .lang-drop{right:auto;left:0}
[dir="rtl"] .prose ul,[dir="rtl"] .prose ol{padding-left:0;padding-right:1.3em}
[dir="rtl"] .prose blockquote{border-left:0;border-right:3px solid var(--acc);
  padding-left:0;padding-right:16px;margin-right:0}
[dir="rtl"] .step{padding-left:0;padding-right:56px}
[dir="rtl"] .step:before{left:auto;right:0}
[dir="rtl"] .msg.me{margin-left:0;margin-right:auto;border-radius:14px 14px 4px 14px}
[dir="rtl"] .msg.them{border-radius:14px 14px 14px 4px}
[dir="rtl"] .tbl th,[dir="rtl"] .tbl td{text-align:right}
[dir="rtl"] .dbox-side{text-align:left;align-items:flex-start}

.nav-toggle{display:none;background:none;border:1px solid var(--line);color:var(--txt);
  font-size:20px;border-radius:8px;padding:4px 11px;cursor:pointer;flex:0 0 auto}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:10px 18px;border-radius:10px;border:1px solid transparent;cursor:pointer;
  font:inherit;font-weight:600;font-size:.92rem;transition:.15s;white-space:nowrap}
.btn-primary{background:var(--acc);color:#fff}
.btn-primary:hover{background:var(--acc-2);color:#fff}
.btn-ghost{background:transparent;border-color:var(--line);color:var(--txt)}
.btn-ghost:hover{border-color:var(--acc);color:var(--txt)}
.btn-ok{background:var(--ok);color:#04220f}
.btn-danger{background:var(--err-soft);border-color:var(--err);color:#ff9aa2}
.btn-sm{padding:6px 12px;font-size:.82rem;border-radius:8px}
.btn-block{width:100%}
.btn[disabled]{opacity:.45;cursor:not-allowed}

/* ---------- cards / layout ---------- */
.card{background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r);padding:22px}
.card + .card{margin-top:16px}
.grid{display:grid;gap:16px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.section{padding:52px 0}
.section-sm{padding:30px 0}
.row{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.spread{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap}

/* ---------- forms ---------- */
label{display:block;font-size:.85rem;color:var(--muted);margin:0 0 6px;font-weight:600}
input[type=text],input[type=email],input[type=password],input[type=url],input[type=number],
input[type=date],select,textarea{
  width:100%;padding:11px 13px;background:var(--bg-3);border:1px solid var(--line);
  border-radius:var(--r-s);color:var(--txt);font:inherit;font-size:.93rem;outline:none;transition:.15s}
input:focus,select:focus,textarea:focus{border-color:var(--acc);box-shadow:0 0 0 3px var(--acc-soft)}
textarea{min-height:120px;resize:vertical;font-family:inherit}
.field{margin-bottom:15px}
.hint{font-size:.8rem;color:var(--dim);margin-top:5px}
.check{display:flex;align-items:flex-start;gap:10px;margin-bottom:12px}
.check input{width:18px;height:18px;margin-top:2px;accent-color:var(--acc)}
.check label{margin:0;color:var(--txt);font-weight:500}

/* ---------- alerts / pills ---------- */
.alert{padding:12px 16px;border-radius:var(--r-s);margin:16px 0;font-size:.92rem;border:1px solid}
.alert-ok{background:var(--ok-soft);border-color:rgba(47,191,113,.35);color:#8ce9b6}
.alert-err{background:var(--err-soft);border-color:rgba(239,77,90,.35);color:#ffa8ae}
.alert-warn{background:var(--warn-soft);border-color:rgba(240,169,43,.35);color:#ffd28a}
.alert-info{background:var(--acc-soft);border-color:rgba(91,140,255,.35);color:#b3c8ff}
.pill{display:inline-block;background:var(--acc);color:#fff;border-radius:999px;
  padding:1px 7px;font-size:.72rem;font-weight:700;line-height:1.5}
.pill.warn{background:var(--warn);color:#2a1c00}
.tag{display:inline-flex;align-items:center;gap:5px;background:var(--bg-3);border:1px solid var(--line);
  border-radius:999px;padding:4px 11px;font-size:.78rem;color:var(--muted)}
.tag.ok{background:var(--ok-soft);border-color:rgba(47,191,113,.3);color:#8ce9b6}
.tag.warn{background:var(--warn-soft);border-color:rgba(240,169,43,.3);color:#ffd28a}
.tag.err{background:var(--err-soft);border-color:rgba(239,77,90,.3);color:#ffa8ae}
.tag.acc{background:var(--acc-soft);border-color:rgba(91,140,255,.3);color:#b3c8ff}

/* ---------- hero / landing ---------- */
.hero{position:relative;overflow:hidden;padding:86px 0 70px;
  background:radial-gradient(900px 420px at 15% -10%,rgba(91,140,255,.20),transparent 60%),
             radial-gradient(700px 380px at 90% 0%,rgba(155,107,255,.16),transparent 60%)}
.hero h1{font-size:clamp(2rem,5vw,3.3rem);max-width:16ch}
.hero p.lead{font-size:1.12rem;color:var(--muted);max-width:56ch}
.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center}
.badge-top{display:inline-flex;align-items:center;gap:8px;background:var(--acc-soft);
  border:1px solid rgba(91,140,255,.3);border-radius:999px;padding:5px 14px;
  font-size:.82rem;color:#b3c8ff;margin-bottom:20px}
.stat-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:44px}
.stat{background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r);padding:18px;text-align:center}
.stat b{display:block;font-size:1.7rem;color:var(--txt);letter-spacing:-.02em}
.stat span{font-size:.82rem;color:var(--muted)}
.mock{background:var(--bg-2);border:1px solid var(--line);border-radius:18px;padding:18px;box-shadow:var(--sh)}
.mock-row{display:flex;gap:12px;align-items:center;padding:11px;border-radius:10px;background:var(--bg-3);margin-bottom:10px}
.mock-thumb{width:76px;height:44px;border-radius:6px;background:linear-gradient(135deg,#26324a,#1b2233);flex:0 0 auto}
.mock-bar{height:8px;border-radius:99px;background:#26324a}

/* buyume vitrini */
.grow-totals{margin:16px 0 18px}
.grow-list{list-style:none;margin:0;padding:0;counter-reset:g}
.grow-row{display:grid;grid-template-columns:34px 44px 1fr auto;gap:12px;align-items:center;
  padding:12px 0;border-bottom:1px solid var(--line)}
.grow-row:last-child{border-bottom:0}
.grow-rank{width:28px;height:28px;border-radius:8px;display:grid;place-items:center;
  background:var(--bg-3);color:var(--muted);font-weight:700;font-size:.82rem}
.grow-rank.top{background:linear-gradient(135deg,var(--acc),var(--acc-3));color:#fff}
.grow-avatar{width:44px;height:44px;border-radius:50%;object-fit:cover;background:var(--bg-3)}
.grow-name{min-width:0}
.grow-name b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.95rem}
.grow-nums{display:flex;flex-direction:column;align-items:flex-end;gap:2px;text-align:right}
.grow-pct{color:var(--ok);font-weight:700;font-size:1.02rem;font-variant-numeric:tabular-nums}
@media(max-width:600px){
  .grow-row{grid-template-columns:28px 36px 1fr;row-gap:6px}
  .grow-avatar{width:36px;height:36px}
  .grow-nums{grid-column:2 / -1;flex-direction:row;align-items:center;justify-content:space-between;
    width:100%;text-align:left}
}

/* canli guncelleme bildirimi */
.toast{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);z-index:70;
  display:flex;align-items:center;gap:12px;background:var(--bg-2);border:1px solid var(--acc);
  border-radius:12px;padding:11px 14px;box-shadow:var(--sh);font-size:.9rem;max-width:calc(100vw - 32px)}
.toast-x{background:none;border:0;color:var(--muted);font-size:19px;line-height:1;cursor:pointer;padding:0 2px}
.toast-x:hover{color:var(--txt)}
@media(max-width:520px){.toast{left:16px;right:16px;transform:none;justify-content:space-between}}

/* ---------- tanitim videosu ---------- */
.video-card{padding:26px}
.video-head{max-width:64ch;margin-bottom:18px}
.video-head h2{margin-bottom:6px}
.video-head p{margin:0}
.video-frame{position:relative;aspect-ratio:16/9;border-radius:12px;overflow:hidden;
  background:#000;cursor:pointer;border:1px solid var(--line)}
.video-frame img{width:100%;height:100%;object-fit:cover;transition:.25s}
.video-frame:hover img{transform:scale(1.02);opacity:.85}
.video-frame iframe{width:100%;height:100%;border:0;display:block}
.video-frame.playing{cursor:default}
.video-frame.playing:hover img{transform:none}
.video-play{position:absolute;inset:0;margin:auto;width:74px;height:74px;border-radius:50%;
  border:0;cursor:pointer;display:grid;place-items:center;
  background:rgba(91,140,255,.94);box-shadow:0 10px 34px rgba(0,0,0,.45);transition:.18s}
.video-frame:hover .video-play{transform:scale(1.08);background:var(--acc-2)}
.video-play-icon{color:#fff;font-size:26px;line-height:1;margin-left:5px}
.video-note{margin:12px 0 0}
@media(max-width:600px){
  .video-card{padding:18px}
  .video-play{width:58px;height:58px}
  .video-play-icon{font-size:21px}
}

/* ---------- how it works ---------- */
.steps{counter-reset:s}
.step{position:relative;padding-left:56px}
.step:before{counter-increment:s;content:counter(s);position:absolute;left:0;top:0;
  width:38px;height:38px;border-radius:11px;background:var(--acc-soft);color:var(--acc-2);
  border:1px solid rgba(91,140,255,.3);display:grid;place-items:center;font-weight:700}

/* ---------- video cards ---------- */
.vgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px}
.vcard{background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  display:flex;flex-direction:column;transition:.18s}
.vcard:hover{border-color:#33415c;transform:translateY(-2px)}
.vthumb{position:relative;aspect-ratio:16/9;background:var(--bg-3);overflow:hidden}
.vthumb img{width:100%;height:100%;object-fit:cover}
.vdur{position:absolute;right:8px;bottom:8px;background:rgba(0,0,0,.82);color:#fff;
  padding:2px 7px;border-radius:5px;font-size:.75rem;font-weight:600}
.vbody{padding:13px 14px;display:flex;flex-direction:column;gap:8px;flex:1}
.vtitle{font-weight:600;font-size:.94rem;line-height:1.35;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.vmeta{display:flex;gap:8px;flex-wrap:wrap;font-size:.78rem;color:var(--muted);margin-top:auto}

/* izle + linki kopyala ikilisi */
.watch-row{display:flex;gap:6px;align-items:stretch}
.watch-row > a{flex:1;min-width:0}
.btn-copy{flex:0 0 auto;padding:6px 11px;font-size:.95rem;line-height:1}
.btn-copy.copied{background:var(--ok-soft);border-color:rgba(47,191,113,.45);color:#8ce9b6}

/* zorunlu (yonetim) video seridi */
.promo-strip{border-color:rgba(240,169,43,.45);background:linear-gradient(180deg,var(--warn-soft),var(--bg-2) 90px)}
.promo-strip h2{color:#ffd28a}
.vcard.promo{border-color:rgba(240,169,43,.4)}
.vcard.promo:hover{border-color:var(--warn)}
.vcard.promo .vmeta{align-items:center}
.vcard.promo .countdown{font-size:.95rem}

/* ---------- debt boxes ---------- */
.dbox{display:grid;grid-template-columns:180px 1fr auto;gap:16px;
  background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r);padding:14px;margin-bottom:14px}
.dbox.overdue{border-color:rgba(239,77,90,.5)}
.dbox.paid{opacity:.72}
.dbox-thumb{position:relative;border-radius:10px;overflow:hidden;aspect-ratio:16/9;background:var(--bg-3)}
.dbox-thumb img{width:100%;height:100%;object-fit:cover}
.dbox-main h3{font-size:1rem;margin-bottom:4px}
.badges{display:flex;flex-wrap:wrap;gap:7px;margin:9px 0}
.badge{display:inline-flex;align-items:center;gap:6px;border-radius:8px;padding:5px 10px;
  font-size:.79rem;border:1px solid var(--line);background:var(--bg-3);color:var(--muted)}
.badge.done{background:var(--ok-soft);border-color:rgba(47,191,113,.35);color:#8ce9b6}
.badge.todo{background:var(--warn-soft);border-color:rgba(240,169,43,.35);color:#ffd28a}
.dbox-side{text-align:right;display:flex;flex-direction:column;gap:8px;align-items:flex-end;min-width:150px}
.countdown{font-variant-numeric:tabular-nums;font-weight:700;font-size:1.22rem;letter-spacing:.02em}
.countdown.ok{color:var(--ok)} .countdown.warn{color:var(--warn)} .countdown.err{color:var(--err)}
.cd-label{font-size:.74rem;color:var(--dim);text-transform:uppercase;letter-spacing:.06em}
.prog{height:5px;border-radius:99px;background:var(--bg-3);overflow:hidden;margin-top:4px;width:100%}
.prog i{display:block;height:100%;background:var(--acc)}

/* ---------- tables ---------- */
.tbl{width:100%;border-collapse:collapse;font-size:.9rem}
.tbl th,.tbl td{padding:10px 12px;text-align:left;border-bottom:1px solid var(--line);vertical-align:middle}
.tbl th{color:var(--muted);font-weight:600;font-size:.8rem;text-transform:uppercase;letter-spacing:.05em}
.tbl tr:hover td{background:var(--bg-3)}
.tbl-wrap{overflow-x:auto}

/* ---------- tabs / chips ---------- */
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:20px}
.chip{padding:7px 14px;border-radius:999px;border:1px solid var(--line);background:var(--bg-2);
  color:var(--muted);font-size:.85rem;transition:.15s}
.chip:hover{border-color:var(--acc);color:var(--txt)}
.chip.on{background:var(--acc);border-color:var(--acc);color:#fff;font-weight:600}
.chip .c{opacity:.7;font-size:.78rem;margin-left:4px}

/* ---------- token box ---------- */
.token{display:flex;align-items:center;gap:10px;background:var(--bg-3);border:1px dashed var(--line);
  border-radius:10px;padding:13px 15px;font-family:ui-monospace,"Cascadia Mono",Consolas,monospace;
  font-size:.95rem;letter-spacing:.06em;word-break:break-all}

/* ---------- messages ---------- */
.msg{max-width:74%;padding:11px 15px;border-radius:14px;margin-bottom:11px;font-size:.92rem}
.msg.me{margin-left:auto;background:var(--acc);color:#fff;border-bottom-right-radius:4px}
.msg.them{background:var(--bg-3);border:1px solid var(--line);border-bottom-left-radius:4px}
.msg .who{display:block;font-size:.73rem;opacity:.75;margin-bottom:3px}

/* ---------- admin ---------- */
.adm{display:grid;grid-template-columns:230px 1fr;min-height:100vh}
.adm-side{background:var(--bg-2);border-right:1px solid var(--line);padding:20px 14px}
.adm-side a{display:block;padding:9px 12px;border-radius:9px;color:var(--muted);font-size:.9rem;margin-bottom:2px}
.adm-side a:hover{background:var(--bg-3);color:var(--txt)}
.adm-side a.on{background:var(--acc-soft);color:var(--acc-2);font-weight:600}
.adm-side h5{color:var(--dim);font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;margin:18px 0 7px 12px}
.adm-main{padding:26px 28px;min-width:0}

/* ---------- kurallar / SSS / hukuki metinler ---------- */
.doc-head{max-width:74ch;margin-bottom:22px}
.doc-head h1{margin-bottom:10px}
.doc-toc{position:sticky;top:70px;z-index:20;background:rgba(11,14,20,.9);
  backdrop-filter:blur(8px);padding:10px 0;margin-bottom:14px}
.doc-section{scroll-margin-top:120px}
.doc-section h2{font-size:1.2rem;padding-bottom:12px;margin-bottom:6px;border-bottom:1px solid var(--line)}

.rule{display:grid;grid-template-columns:38px 1fr;gap:14px;padding:16px 0;border-bottom:1px solid var(--line)}
.rule:last-child{border-bottom:0;padding-bottom:0}
.rule-no{width:32px;height:32px;border-radius:9px;display:grid;place-items:center;
  background:var(--bg-3);color:var(--muted);font-weight:700;font-size:.86rem}
.rule-warning .rule-no{background:var(--warn-soft);color:#ffd28a;border:1px solid rgba(240,169,43,.3)}
.rule-critical .rule-no{background:var(--err-soft);color:#ffa8ae;border:1px solid rgba(239,77,90,.35)}
.rule-body h3{font-size:1rem;margin-bottom:6px}
.rule-body .prose{max-width:70ch}
.rule-body .prose p:last-child{margin-bottom:8px}

.faq{border-bottom:1px solid var(--line)}
.faq:last-child{border-bottom:0}
.faq summary{display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:15px 0;cursor:pointer;font-weight:600;font-size:.97rem;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--acc-2)}
.faq-mark{flex:0 0 auto;width:24px;height:24px;border-radius:7px;display:grid;place-items:center;
  background:var(--bg-3);color:var(--muted);font-size:15px;line-height:1;transition:.15s}
.faq[open] .faq-mark{background:var(--acc-soft);color:var(--acc-2);transform:rotate(45deg)}
.faq-answer{padding:0 0 16px;max-width:72ch}

/* ---------- prose ---------- */
.prose{max-width:74ch}
.prose h2{margin-top:1.6em}
.prose img{border-radius:10px;margin:1em 0}
.prose ul,.prose ol{padding-left:1.3em}
.prose blockquote{border-left:3px solid var(--acc);padding-left:16px;color:var(--muted);margin-left:0}
.prose code{background:var(--bg-3);padding:2px 6px;border-radius:5px;font-size:.9em}
.prose pre{background:var(--bg-3);padding:14px;border-radius:10px;overflow-x:auto}

/* ---------- footer ---------- */
.foot{border-top:1px solid var(--line);background:var(--bg-2);margin-top:60px;padding:44px 0 20px}
.foot-in{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:30px}
.foot h4{font-size:.85rem;text-transform:uppercase;letter-spacing:.06em;color:var(--dim)}
.foot a{display:block;color:var(--muted);font-size:.9rem;padding:3px 0}
.foot a:hover{color:var(--txt)}
.foot-bottom{border-top:1px solid var(--line);margin-top:28px;padding-top:18px;
  font-size:.83rem;color:var(--dim);display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px}

.empty{text-align:center;padding:56px 20px;color:var(--muted)}
.empty .big{font-size:2.4rem;margin-bottom:10px;opacity:.5}

/* ---------- responsive ---------- */
@media(max-width:960px){
  .hero-grid{grid-template-columns:1fr}
  .g4{grid-template-columns:repeat(2,1fr)}
  .g3{grid-template-columns:1fr}
  .foot-in{grid-template-columns:1fr 1fr}
  .adm{grid-template-columns:1fr}
  .adm-side{border-right:none;border-bottom:1px solid var(--line)}
  .adm-side a{display:inline-block;margin-right:6px}
}
/* Ara genislikler: Almanca/Rusca gibi uzun etiketlerde satir sigmiyordu.
   Hamburger e dusurmek yerine once bosluklari sikistiririz. */
@media(min-width:1121px) and (max-width:1339px){
  .nav-links{gap:0}
  .nav-links > a{padding:8px 7px;font-size:.845rem}
  .nav-menu-btn{max-width:132px;padding:5px 8px 5px 5px;gap:6px}
  .nav-menu-name{max-width:56px}
  .nav-in{gap:10px}
}
/* Menu ogeleri tek satira sigmadiginda hamburger'e don */
@media(max-width:1120px){
  .nav-toggle{display:block;margin-left:auto}
  .nav-links{display:none;position:absolute;top:62px;left:0;right:0;background:var(--bg-2);
    border-bottom:1px solid var(--line);flex-direction:column;align-items:stretch;
    padding:12px 16px;gap:2px;flex-wrap:wrap;max-height:calc(100vh - 62px);overflow-y:auto}
  .nav-links.open{display:flex}
  .nav-links > a{padding:11px 12px}
  .nav-cta{margin-left:0;text-align:center}
  /* Acilir menu, mobilde duz liste olur */
  .nav-menu{margin-left:0;width:100%}
  .nav-menu-btn{display:none}
  .nav-drop{display:block;position:static;min-width:0;border:0;border-top:1px solid var(--line);
    border-radius:0;box-shadow:none;padding:6px 0 0;margin-top:6px;background:transparent}
  .nav-drop a{padding:11px 12px}
}
/* Cok dar ekranlarda ust cubuk tasmasin */
@media(max-width:460px){
  .wrap{padding:0 14px}
  .brand{min-width:0}
  .brand-txt{max-width:130px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .lang-btn{padding:6px 8px;font-size:.78rem}
  .nav-in{gap:8px}
}
@media(max-width:760px){
  .dbox{grid-template-columns:1fr}
  .dbox-side{text-align:left;align-items:flex-start}
  .g2,.g4{grid-template-columns:1fr}
  .stat-strip{grid-template-columns:repeat(2,1fr)}
}

/* ---------- Uygulama sayfasi (telefon) ---------- */
.ok-txt{color:var(--ok)}
.warn-txt{color:var(--warn)}
.app-grid{display:grid;gap:12px;grid-template-columns:repeat(2,1fr)}
.app-tile{background:var(--bg-2);border:1px solid var(--line);border-radius:14px;padding:14px}
.app-tile b{display:block;font-size:1.5rem;line-height:1.1;margin-bottom:2px}
.app-tile span{font-size:.78rem;color:var(--muted)}
.app-tile.wide{grid-column:1/-1}
.app-row{display:flex;gap:10px;align-items:center;padding:11px 0;border-bottom:1px solid var(--line)}
.app-row:last-child{border-bottom:0}
.app-row img{width:64px;height:36px;object-fit:cover;border-radius:6px;flex:0 0 auto;background:var(--bg-3)}
.app-row-main{min-width:0;flex:1}
.app-row-main b{display:block;font-size:.86rem;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.app-row-main span{font-size:.75rem;color:var(--muted)}
.app-cta{position:sticky;bottom:0;background:linear-gradient(transparent,var(--bg) 26%);padding:14px 0 4px}
@media (min-width:720px){.app-grid{grid-template-columns:repeat(4,1fr)}}

/* ---------- Nasil calisir listesi ---------- */
.hiw{counter-reset:hiw;list-style:none;margin:0;padding:0;display:grid;gap:12px;max-width:78ch;margin-inline:auto}
.hiw li{counter-increment:hiw;position:relative;background:var(--bg-2);border:1px solid var(--line);
  border-radius:var(--r-s);padding:14px 16px 14px 54px;line-height:1.55}
.hiw li::before{content:counter(hiw);position:absolute;left:14px;top:13px;width:26px;height:26px;
  border-radius:50%;background:linear-gradient(135deg,var(--acc),var(--acc-3));color:#fff;
  display:grid;place-items:center;font-size:.8rem;font-weight:700}
[dir="rtl"] .hiw li{padding:14px 54px 14px 16px}
[dir="rtl"] .hiw li::before{left:auto;right:14px}

/* ---------- Sadakat rozeti ---------- */
/* Sadakat rozeti. Eskiden nokta isaretiydi ve renkli bir halka icinde
   duruyordu; artik rozetin kendisi ciziliyor (Loyalty::icon), halka
   cizimi kirpiyordu. Kap yalnizca hizalama yapar. */
.loyal{display:inline-flex;align-items:center;margin-inline-start:5px;
  line-height:1;vertical-align:middle;cursor:help;font-size:1.05rem}
.vcard .loyal{flex:0 0 auto}
.rozet-ikon{display:inline-block}

/* ---------- Pazarda kendi videon ---------- */
/* Gorunur ama etkilesime kapali: tiklanamaz ve sonuk gosterilir. */
.vcard.own{opacity:.72}
.vcard.own .vthumb{cursor:default}
.vcard.own .vthumb img{filter:grayscale(.35)}
.vcard.own .vtitle{cursor:default}
.own-flag{position:absolute;top:8px;inset-inline-start:8px;z-index:1;
  background:var(--acc);color:#fff;font-size:.68rem;font-weight:600;
  padding:3px 8px;border-radius:20px;letter-spacing:.01em}
.own-note{margin-top:10px;font-size:.78rem;color:var(--muted);
  background:var(--bg-3);border:1px solid var(--line);border-radius:var(--r-s);
  padding:8px 10px;text-align:center}
/* Pazar kartinda site kullanici adi */
.vowner{margin-top:2px;font-size:.78rem}
.vowner a{color:var(--muted)}
.vowner a:hover{color:var(--acc)}

/* Borc odeme kutusu */
.pay-box{display:flex;gap:10px;align-items:center;margin-top:6px;
  background:var(--bg-3);border-radius:10px;padding:9px}
.pay-thumb{width:72px;height:41px;object-fit:cover;border-radius:6px}
.pay-title{font-size:.9rem;font-weight:600;overflow:hidden;text-overflow:ellipsis}

/* Uye profili: kanal basligi + video izgarasi */
.chan-head{display:flex;gap:18px;align-items:center}
.chan-head h1{margin:0;font-size:1.5rem}
.chan-block{margin-top:26px}
.chan-bar{display:flex;gap:14px;align-items:center;margin-bottom:12px;
  padding-bottom:10px;border-bottom:1px solid var(--line)}
.chan-bar h2{margin:0;font-size:1.1rem}
.chan-ava{width:52px;height:52px;border-radius:50%;object-fit:cover;
  background:var(--bg-3);flex:0 0 auto}

/* Ana sayfadaki eklenti cagrisi */
.ext-cta{display:flex;gap:22px;align-items:center;justify-content:space-between}
.ext-cta-main{flex:1;min-width:260px}
.ext-cta h2{margin:0 0 6px;font-size:1.25rem}
.ext-cta-mark{flex:0 0 auto}
.ext-cta-mark img{border-radius:22px;display:block}
@media (max-width:640px){ .ext-cta-mark{display:none} }

/* Ust menude eklenti baglantisi: goze carpsin ama dugme gibi durmasin */
.nav-ext{border:1px solid var(--acc);border-radius:20px;padding:5px 12px !important;
  color:var(--acc) !important}
.nav-ext:hover{background:var(--acc);color:#fff !important}

/* Alacaklarda gorunen yorum kutusu */
.cmt-box{margin-top:10px;background:var(--bg-3);border:1px solid var(--line);
  border-radius:var(--r-s);padding:10px 12px}
.cmt-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.cmt-text{margin:6px 0 0;font-size:.9rem;line-height:1.5;white-space:pre-wrap;word-break:break-word}
.cmt-form{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:10px;
  padding-top:10px;border-top:1px solid var(--line)}
.cmt-form select,.cmt-form input[type=text]{margin:0}
.cmt-form input[type=text]{flex:1;min-width:160px}

/* Daha once etkilesim verilmis video: acik dursun ama one cikmasin */
.vcard.done{opacity:.82}
.vcard.done .vthumb img{filter:grayscale(.25)}
.done-flag{position:absolute;top:8px;inset-inline-start:8px;z-index:1;
  background:var(--ok);color:#06210f;font-size:.68rem;font-weight:700;
  padding:3px 8px;border-radius:20px;letter-spacing:.01em}



/* Yonetim: HTML yazilan alanlar tek aralikli olsun ki etiketler hizalansin */
.kod-alan{font-family:ui-monospace,SFMono-Regular,Consolas,"Liberation Mono",monospace;
  font-size:.86rem;line-height:1.5;white-space:pre;overflow-wrap:normal;overflow-x:auto}

/* "Nasil calisir" sekmesi
   Genis ekranda kenarda dikey bir dil, dar ekranda altta yuvarlak dugme.
   Sabit durur ve sayfa akisindan yer calmaz.

   DIKKAT: burada mantiksal ozellik (inset-inline-end) KULLANILMAZ.
   Elemanin kendi writing-mode'u vertical-rl oldugu icin satir ici eksen
   dikeydir; tarayici inset-inline-end'i "sag" diye degil dikey eksene
   gore cozer ve sekme sol kenara oturur. Yuvarlatma ise fiziksel
   yazildigindan sol koseler yuvarlak kalir: duvara yapismasi gereken
   duz kenar sayfaya bakar. O yuzden yon ve yuvarlatma birlikte, ACIK
   fiziksel degerlerle veriliyor; RTL icin ayri kural var. */
.howto-tab{position:fixed;left:0;right:auto;top:50%;transform:translateY(-50%);
  z-index:900;display:flex;align-items:center;gap:8px;
  padding:14px 12px;border-radius:0 12px 12px 0;
  background:linear-gradient(180deg,#e0483c,#c0392b);color:#fff;
  font-weight:700;font-size:.82rem;letter-spacing:.02em;text-decoration:none;
  box-shadow:0 6px 22px rgba(192,57,43,.42);
  writing-mode:vertical-rl;text-orientation:mixed;
  transition:filter .15s ease, padding .15s ease}
.howto-tab:hover{filter:brightness(1.1);padding-inline-end:16px}
.howto-tab:focus-visible{outline:3px solid #fff;outline-offset:2px}
[dir="rtl"] .howto-tab{left:auto;right:0;border-radius:12px 0 0 12px}
.howto-ico{writing-mode:horizontal-tb;display:inline-flex;align-items:center;
  justify-content:center;width:20px;height:20px;border-radius:50%;
  background:rgba(255,255,255,.22);font-size:.8rem;line-height:1}

@media (max-width:820px){
  /* Dar ekranda dikey dil okunmuyor: sag altta yuvarlak dugmeye doner */
  .howto-tab{top:auto;bottom:18px;left:auto;right:16px;transform:none;
    writing-mode:horizontal-tb;border-radius:24px;padding:11px 16px;
    font-size:.8rem}
  [dir="rtl"] .howto-tab{left:16px;right:auto;border-radius:24px}
  .howto-tab:hover{padding-inline-end:16px}
}

/* Pazar suzgecleri: sure kategorilerinin altinda tik kutulari */
.filter-bar{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;
  margin:0 0 18px;padding:11px 14px;border-radius:10px;
  background:var(--card,rgba(255,255,255,.03));border:1px solid var(--line,rgba(255,255,255,.08))}
.filter-lead{font-size:.78rem;font-weight:600;opacity:.75;margin-inline-end:2px}
.filter-chk{display:inline-flex;align-items:center;gap:6px;cursor:pointer;
  font-size:.8rem;user-select:none}
.filter-chk input{width:auto;margin:0;cursor:pointer}
.filter-clear{font-size:.76rem;margin-inline-start:auto;opacity:.8}

/* Karta "bu videoya ne verdim" rozetleri: sure + begeni/yorum/abonelik.
   Uye ayni videoyu tekrar acip bosuna izlemesin diye kartta durur. */
.gave-row{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:7px}
.tag.gave{background:rgba(47,191,113,.13);color:var(--ok);
  border:1px solid rgba(47,191,113,.33);font-size:.7rem;
  padding:2px 7px;border-radius:20px;white-space:nowrap}

/* Pazar karti: karsi taraf sureyi geri odeyemez uyarisi */
.vnote{display:block;font-size:.72rem;line-height:1.3;margin-bottom:6px;
  padding:4px 7px;border-radius:6px;background:var(--warn-soft, rgba(240,169,43,.14));
  color:var(--warn);border:1px solid rgba(240,169,43,.3)}

/* ---------------------------------------------------------------
   Bilgi seridi (ticker)

   Sayfanin en ustunde bir ya da iki satir. Icindeki ogeler ust uste
   durur, yalnizca .on olan gorunur; JS sirayla degistirir.

   Yukseklik ogeler arasinda DEGISMEZ: hepsi ayni grid gozunde durur,
   gorunmez olanlar da yer kapladigi icin satir yuksekligi EN UZUN
   ogeye gore belirlenir. Akista birakilsalardi ya da yalnizca .on
   olan yer kaplasaydi, her degisimde sayfa asagi yukari ziplardi.
   --------------------------------------------------------------- */
.ticker{
  background:var(--bg-3);
  border-bottom:1px solid var(--line);
  font-size:13px;
  line-height:1.35;
}
.ticker-in{
  position:relative;
  min-height:34px;
  display:flex;
  align-items:center;
  padding-top:6px;
  padding-bottom:6px;
}
.ticker-item{
  /* Hepsi ayni gozde ust uste. Mutlak konumlandirilsalardi kapsayici
     yukseklik alamaz, uzun bilgi ikinci satira gecince tasardi. */
  grid-area:1 / 1;
  opacity:0;
  visibility:hidden;
  transition:opacity .35s ease;
  color:var(--fg-2, #9fb0cc);
  /* Uzun bilgi alt satira gecer, EN FAZLA iki satir; daha uzunu
     ucnokta ile kirpilir. Serit bir haber sayfasi degil. */
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  line-clamp:2;
  overflow:hidden;
}
.ticker-item.on{ opacity:1; visibility:visible; }

/* Hareketi azalt tercihi aciksa gecis animasyonu yapilmaz. */
@media (prefers-reduced-motion: reduce){
  .ticker-item{ transition:none; }
}

[dir="rtl"] .ticker-item{ text-align:right; }

/* Ileri / geri oklari. Serit kendiliginden doner; oklar yalnizca
   bekleyip okumak istemeyen icin kisayoldur. Satirin sonunda,
   metnin akisini bozmayacak sekilde durur. */
.ticker-lines{
  flex:1 1 auto;
  min-width:0;              /* olmazsa uzun metin oklari disari iter */
  /* Tek gozlu grid: butun ogeler ust uste, satir yuksekligi en uzun
     ogeye gore. Boylece donerken yukseklik hic degismez. */
  display:grid;
  align-items:center;
}
.ticker-nav{
  flex:0 0 auto;
  display:flex;
  gap:2px;
  margin-inline-start:8px;
}
.ticker-arrow{
  border:0;
  background:transparent;
  color:var(--fg-2, #9fb0cc);
  cursor:pointer;
  font-size:18px;
  line-height:1;
  padding:2px 7px;
  border-radius:6px;
  opacity:.6;
  transition:opacity .15s ease, background-color .15s ease;
}
.ticker-arrow:hover{ opacity:1; background:rgba(255,255,255,.07); }
.ticker-arrow:focus-visible{ outline:2px solid var(--accent, #4c8dff); outline-offset:1px; opacity:1; }

/* RTL: dugmelerin YERI kendiliginden ters doner (flex satiri sagdan
   basliyor), ama "<" ve ">" isaretleri donmez. Isaretleri aynalamazsak
   Arapcada "sonraki" oku geriye isaret eder. */
[dir="rtl"] .ticker-arrow{ transform:scaleX(-1); }


/* ---- Kitle hedefleme ---------------------------------------------
   Kilitli kart: video pazardan silinmez, kucuk resmi durur; baslik,
   kanal adi ve baglanti gizlidir. Kart "yok" gibi degil "senin icin
   kapali" gibi gorunmeli, bu yuzden solduruluyor ama silik hale getirilip
   okunmaz hale getirilmiyor. */
.vcard.locked{opacity:.72}
.vcard.locked .vthumb img{filter:grayscale(.55)}
.vcard.locked:hover{transform:none;border-color:var(--line)}
.lock-flag{position:absolute;top:8px;right:8px;background:rgba(0,0,0,.62);
  border-radius:8px;padding:3px 7px;font-size:.9rem}
.lock-why{margin-top:6px}
.lock-why > summary{cursor:pointer;color:var(--muted);font-size:.82rem;list-style:none}
.lock-why > summary:hover{color:var(--txt)}
.lock-why[open] > summary{color:var(--txt);margin-bottom:4px}

/* Kitle secimi kutusu (video ekleme / duzenleme) */
.aud-box{border:1px solid var(--line);border-radius:10px;padding:10px 12px;background:var(--bg-2)}
.aud-box > summary{cursor:pointer;display:flex;gap:8px;align-items:baseline;flex-wrap:wrap}
.aud-lead{margin:8px 0 12px;max-width:74ch}
.aud-group{margin-bottom:14px}
.aud-label{display:block;font-weight:600;font-size:.9rem;margin-bottom:5px}
.aud-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(185px,1fr));gap:4px 10px;
  max-height:210px;overflow:auto;padding:8px;border:1px solid var(--line);border-radius:8px;
  background:var(--bg-3)}
.aud-grid-sm{max-height:132px}
.aud-chk{display:flex;gap:7px;align-items:center;font-size:.85rem;cursor:pointer;font-weight:400}
.aud-chk input{width:auto;margin:0}
.aud-box select[multiple]{min-height:110px}

/* Kanal kimligi (dil + nis) ve kart ustundeki kitle ozeti */
.chan-id{display:flex;flex-wrap:wrap;gap:6px;align-items:center;max-width:340px}
.chan-id-form{width:100%}
.vaud{border-top:1px solid var(--line);padding-top:7px;margin-top:2px}
.vaud > details > summary{cursor:pointer;color:var(--muted)}

/* Algoritma notlari */
.algo-box{margin-top:14px;border:1px solid var(--line);border-radius:10px;padding:10px 12px;
  background:var(--bg-2)}
.algo-box > summary{cursor:pointer}
.algo-item{margin-top:12px}
.algo-item h4{margin:0 0 3px;font-size:.95rem}
.algo-item p{margin:0;font-size:.86rem;color:var(--muted);max-width:78ch}

/* Kanal secici (pazar): her kanal ayri bir defter */
.chan-switch{display:flex;flex-wrap:wrap;gap:7px;align-items:center;margin-bottom:12px}
.chan-switch .chip{cursor:pointer;font:inherit;font-size:.84rem}
.chan-switch .chip.on{border-color:var(--acc);color:var(--txt)}

/* Eklenti simgesi renk anlatimi */
.badge-legend{list-style:none;padding:0;margin:10px 0 0;display:grid;gap:9px}
.badge-legend li{display:flex;gap:10px;align-items:flex-start;font-size:.88rem;color:var(--muted)}
.bdot{flex:0 0 auto;width:12px;height:12px;border-radius:4px;margin-top:4px;background:var(--muted)}
.bdot.ok{background:var(--ok)}
.bdot.warn{background:var(--warn)}
.bdot.err{background:var(--err)}