/* =========================================================
UGCDock — Dashboard (app) styles · app-shell
========================================================= */
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: var(--font); background: var(--bg); color: var(--text); -webkit-font-smoothing: antialiased; min-height: 100vh; min-height: 100dvh; }
a { color: inherit; text-decoration: none; }
/* KRİTİK: display kuralı olan öğelerde (.btn vb.) hidden özniteliği ezilmesin */
[hidden] { display: none !important; }
/* Oturum doğrulanana kadar içerik gizli */
.app-loading .appbar, .app-loading .layout { visibility: hidden; }
/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: inherit; font-weight: 600; font-size: 14px; padding: 9px 16px; border-radius: 10px; border: 1px solid transparent; cursor: pointer; transition: background .2s, border-color .2s; }
.btn--ghost { background: rgba(255,255,255,.04); border-color: var(--border-lt); color: var(--text); }
.btn--ghost:hover { background: rgba(255,255,255,.09); border-color: var(--violet); }
.btn--sm { padding: 8px 14px; font-size: 13.5px; }
/* Top bar */
.appbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 64px; padding: 0 22px; padding-left: max(22px, env(safe-area-inset-left)); padding-right: max(22px, env(safe-area-inset-right)); border-bottom: 1px solid var(--border); background: rgba(24,24,24,.85); backdrop-filter: blur(10px); position: sticky; top: 0; z-index: 30; }
.appbar__brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; font-size: 18px; letter-spacing: -.02em; }
.appbar__brand img { display: block; border-radius: 7px; }
.appbar__brand .accent { color: var(--violet-light); }
.appbar__right { display: flex; align-items: center; gap: 14px; }
.credits { font-family: inherit; font-size: 13.5px; color: var(--yellow); background: rgba(255,236,153,.08); border: 1px solid rgba(255,236,153,.22); padding: 7px 12px; border-radius: 999px; cursor: pointer; transition: background .2s, border-color .2s; }
.credits:hover { background: rgba(255,236,153,.16); border-color: rgba(255,236,153,.45); }
.credits strong { font-weight: 800; }
.appbar__user { display: inline-flex; align-items: center; gap: 9px; background: none; border: none; cursor: pointer; font-family: inherit; padding: 4px 10px 4px 4px; border-radius: 999px; transition: background .2s; }
.appbar__user:hover { background: rgba(255,255,255,.07); }
.appbar__avatar { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--violet); color: #fff; font-size: 13px; font-weight: 700; flex: none; text-transform: uppercase; }
.appbar__name { font-size: 14px; color: var(--text); max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Layout: dashboard = tek kolon, modül = sidebar + içerik */
.layout { display: grid; grid-template-columns: 1fr; min-height: calc(100vh - 64px); min-height: calc(100dvh - 64px); }
.layout.has-sidebar { grid-template-columns: 252px 1fr; }
/* Sidebar */
.sidebar { display: none; border-right: 1px solid var(--border); background: var(--bg-soft); padding: 16px 12px; }
.layout.has-sidebar .sidebar { display: block; }
.sidebar__nav { display: flex; flex-direction: column; gap: 3px; position: sticky; top: 84px; }
.sidebar__label { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-dim); padding: 16px 12px 6px; }
.sidebar__item { display: flex; align-items: center; gap: 11px; width: 100%; text-align: left; background: none; border: 1px solid transparent; border-radius: 11px; padding: 10px 12px; cursor: pointer; font-family: inherit; font-size: 14.5px; font-weight: 500; color: var(--text-mute); transition: background .15s, color .15s, border-color .15s; }
.sidebar__item svg { flex: none; }
/* token maliyet rozeti (mkt__cost b ile aynı stil) — editing modüllerinin yanında */
.sbcost { margin-left: auto; display: inline-grid; place-items: center; min-width: 23px; height: 23px; padding: 0 6px; border-radius: 7px; background: rgba(105,101,219,.16); color: var(--violet-light); font-size: 12.5px; font-weight: 800; font-variant-numeric: tabular-nums; flex: none; }
.sbcost--inf { font-size: 15px; line-height: 1; }
.sidebar__item.is-active .sbcost { background: rgba(255,255,255,.16); color: #fff; }
/* EDITING etiketinin sağındaki coin başlığı ("credits") */
.sidebar__label--cost { display: flex; align-items: center; justify-content: space-between; }
.sblabelcoin { display: inline-flex; align-items: center; gap: 4px; font-size: 9.5px; font-weight: 700; letter-spacing: .04em; text-transform: lowercase; color: var(--text-dim); }
.sblabelcoin svg { display: block; }
/* dashboard modül kartı kredi rozeti (SAĞ ÜST köşe; hover'da "Open →" ile yer değiştirir) */
.module__credits { position: absolute; top: 20px; right: 18px; display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 800; color: var(--violet-light); background: rgba(105,101,219,.14); border: 1px solid rgba(105,101,219,.32); padding: 5px 10px; border-radius: 999px; white-space: nowrap; transition: opacity .2s; }
.module:hover .module__credits { opacity: 0; }
.module__credits svg { display: block; flex: none; }
.sidebar__item:hover { background: rgba(255,255,255,.04); color: var(--text); }
.sidebar__item.is-active { background: rgba(105,101,219,.16); border-color: rgba(105,101,219,.35); color: #fff; }
/* Content + views */
.content { min-width: 0; }
.view { display: none; max-width: 1040px; margin: 0 auto; padding: 26px 28px; padding-left: max(28px, env(safe-area-inset-left)); padding-right: max(28px, env(safe-area-inset-right)); padding-bottom: calc(26px + env(safe-area-inset-bottom)); }
.view.is-active { display: block; }
#view-caption { max-width: 1180px; }
/* MPA içerik sarmalayıcı (her sayfada görünür) */
.page { max-width: 1360px; margin: 0 auto; padding: 14px 44px 28px; }
.page--wide { max-width: 1680px; }
@media (max-width: 1100px) { .page { padding: 24px 28px; } }
@media (max-width: 640px) { .page { padding: 16px 14px; } }
/* Dashboard greeting (sade, modern) */
.dash-title { font-size: clamp(26px, 4vw, 34px); font-weight: 800; letter-spacing: -.02em; margin-bottom: 28px; }
.dash-title span { color: var(--violet-light); }
/* Module cards (canlı, tıklanabilir) */
.modules { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.module { position: relative; text-align: left; cursor: pointer; font-family: inherit; color: var(--text); background: var(--bg-card); border: 1px solid var(--border); border-radius: 18px; padding: 24px; transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; overflow: hidden; }
.module::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--c); opacity: .85; }
.module:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--c) 60%, var(--border)); box-shadow: 0 18px 44px color-mix(in srgb, var(--c) 22%, transparent); }
.module__icon { width: 48px; height: 48px; border-radius: 13px; display: grid; place-items: center; background: var(--c); color: #fff; margin-bottom: 16px; box-shadow: 0 8px 20px color-mix(in srgb, var(--c) 42%, transparent); }
.module h3 { font-size: 19px; font-weight: 700; letter-spacing: -.02em; }
.module p { margin-top: 8px; color: var(--text-mute); font-size: 14.5px; }
.module__foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 18px; }
.module__cost { font-size: 13px; font-weight: 600; color: var(--text); background: color-mix(in srgb, var(--c) 16%, transparent); border: 1px solid color-mix(in srgb, var(--c) 40%, transparent); padding: 6px 11px; border-radius: 999px; }
.module__cost strong { color: #fff; font-weight: 800; }
.module__soon { font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text-dim); background: var(--bg-soft); border: 1px solid var(--border); padding: 5px 10px; border-radius: 999px; }
.module__go { position: absolute; top: 24px; right: 22px; color: var(--violet-light); font-weight: 600; font-size: 14px; opacity: 0; transform: translateX(-4px); transition: opacity .2s, transform .2s; }
.module:hover .module__go { opacity: 1; transform: none; }
/* Module head (modül görünümü) */
.module-head { display: flex; align-items: center; gap: 16px; margin-bottom: 26px; }
.module-head__icon { width: 54px; height: 54px; border-radius: 15px; display: grid; place-items: center; color: #fff; box-shadow: var(--shadow); }
.module-head h1 { font-size: 26px; font-weight: 800; letter-spacing: -.02em; }
.module-head p { margin-top: 4px; color: var(--text-mute); font-size: 15px; }
/* Construction / empty state */
.construction { text-align: center; padding: 64px 24px; background: var(--bg-card); border: 1px dashed var(--border-lt); border-radius: 20px; }
.construction__emoji { font-size: 46px; line-height: 1; }
.construction h2 { margin-top: 14px; font-size: 22px; font-weight: 700; }
.construction p { margin-top: 8px; color: var(--text-mute); }
/* Auth gate (spinner) */
.gate { position: fixed; inset: 0; background: var(--bg); display: grid; place-items: center; z-index: 100; }
.gate__spinner { width: 38px; height: 38px; border-radius: 50%; border: 3px solid var(--border-lt); border-top-color: var(--violet); animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
/* Button variants
PARLAMA KAPALI (2026-07-29): birincil butonun altındaki renkli HALE kaldırıldı.
Buffer ve Post Bridge'te birincil buton düz durur; renkli gölge arayüze
"hazır şablon" hissi veriyordu. Renk değişimi (hover) KALDI — geri bildirim o.
DOKUNULMAYANLAR, bilerek: :focus halkaları (erişilebilirlik), .is-active /
.is-sel seçim halkaları ve sürükle-bırak vurguları — onlar süs değil, durum
anlatıyor. */
.btn--primary { background: #7b76f0; color: #fff; }
.btn--primary:hover:not(:disabled):not([disabled]) { background: #8f8bf5; }
.btn--primary:disabled, .btn--primary[disabled] { background: #36355a; color: #8b8ea3; box-shadow: none; cursor: not-allowed; }
.btn--block { width: 100%; }
.btn--danger { background: rgba(224,49,49,.12); border-color: rgba(224,49,49,.4); color: #ff8585; }
.btn--danger:hover { background: rgba(224,49,49,.2); }
/* Welcome buy button reset */
.welcome__buy { background: none; border: none; cursor: pointer; font-family: inherit; }
/* Sidebar: tam yükseklik + alt grup en altta */
.sidebar { position: sticky; top: 64px; height: calc(100vh - 64px); height: calc(100dvh - 64px); overflow-y: auto; }
.sidebar__nav { position: static; height: 100%; }
.sidebar__bottom { margin-top: auto; display: flex; flex-direction: column; gap: 3px; padding-top: 12px; border-top: 1px solid var(--border); }
.sidebar-backdrop { display: none; } /* masaüstünde yok; mobil drawer açılınca görünür */
/* Settings */
.settings { display: flex; flex-direction: column; gap: 16px; max-width: 640px; }
.card-block { background: var(--bg-card); border: 1px solid var(--border); border-radius: 16px; padding: 22px; }
.card-block h3 { font-size: 16px; font-weight: 700; margin-bottom: 16px; }
.card-block--danger { border-color: rgba(224,49,49,.3); }
.card-block--danger h3 { color: #ff8585; }
.settings__row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 11px 0; border-top: 1px solid var(--border); }
.settings__row:first-of-type { border-top: none; padding-top: 0; }
.settings__row span { color: var(--text-mute); font-size: 14.5px; }
.settings__credits { color: var(--yellow); font-weight: 800; font-size: 16px; }
/* Fields (settings inputs) */
.field { display: flex; flex-direction: column; gap: 7px; margin-bottom: 14px; }
.field__label { font-size: 13px; font-weight: 600; color: var(--text-mute); }
.field input { font-family: inherit; font-size: 15px; color: var(--text); background: var(--bg-soft); border: 1px solid var(--border); border-radius: 10px; padding: 12px 13px; }
.field input:focus { outline: none; border-color: var(--violet); box-shadow: 0 0 0 3px rgba(105,101,219,.22); }
.field input:disabled { color: var(--text-dim); cursor: not-allowed; }
/* Toast */
.toast { position: fixed; left: 50%; bottom: 28px; bottom: calc(28px + env(safe-area-inset-bottom)); transform: translateX(-50%) translateY(12px); z-index: 300; background: var(--bg-elev); border: 1px solid var(--border-lt); color: var(--text); font-size: 14px; padding: 12px 18px; border-radius: 12px; box-shadow: var(--shadow-lg); opacity: 0; transition: opacity .25s, transform .25s; pointer-events: none; max-width: 90vw; text-align: center; }
.toast[hidden] { display: none; }
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.btn--lg { padding: 13px 22px; font-size: 16px; }
/* Video editor module */
.cap { max-width: 720px; }
.cap__panel { display: flex; flex-direction: column; gap: 18px; }
.dropzone { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center; border: 1.5px dashed var(--border-lt); border-radius: 16px; padding: 38px 20px; cursor: pointer; background: var(--bg-card); transition: border-color .2s, background .2s; }
.dropzone:hover, .dropzone.is-over { border-color: var(--violet); background: rgba(105,101,219,.06); }
.dropzone.is-filled { border-style: solid; border-color: var(--green); }
.dropzone--sm { padding: 20px; flex: 1; }
.dropzone__icon { font-size: 30px; line-height: 0; color: var(--violet-light); }
.dropzone__icon svg { width: 24px; height: 24px; display: block; }
.dropzone--sm .dropzone__icon svg { width: 18px; height: 18px; }
.dropzone strong { font-size: 15px; font-weight: 600; }
.dropzone__hint { font-size: 13px; color: var(--text-dim); }
.cap__row { display: flex; gap: 16px; align-items: stretch; }
.cap__vol { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 10px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 16px; padding: 16px 18px; }
.cap__vol label { font-size: 13.5px; color: var(--text-mute); }
.cap__vol input[type=range] { width: 100%; accent-color: var(--violet); cursor: pointer; }
.cap__go { display: flex; align-items: center; gap: 14px; }
.cap__cost { font-size: 13px; font-weight: 700; color: var(--green); background: rgba(47,158,68,.12); border: 1px solid rgba(47,158,68,.3); padding: 6px 12px; border-radius: 999px; }
.cap__msg { font-size: 14px; padding: 10px 14px; border-radius: 10px; }
.cap__msg.is-error { background: rgba(224,49,49,.12); border: 1px solid rgba(224,49,49,.35); color: #ff8585; }
.cap__msg.is-info { background: rgba(105,101,219,.12); border: 1px solid rgba(105,101,219,.3); color: var(--violet-light); }
.cap__progress { background: var(--bg-card); border: 1px solid var(--border); border-radius: 16px; padding: 24px; }
.cap__bar { height: 10px; background: var(--bg-soft); border: 1px solid var(--border); border-radius: 999px; overflow: hidden; }
.cap__bar i { display: block; height: 100%; width: 2%; background: var(--grad-violet); border-radius: 999px; transition: width .4s ease; }
.cap__progress p { margin-top: 12px; color: var(--text-mute); font-size: 14px; text-align: center; }
.cap__result { display: flex; flex-direction: column; gap: 16px; align-items: center; }
.cap__result video { width: 100%; max-width: 340px; border-radius: 16px; background: #000; border: 1px solid var(--border); }
.cap__actions { display: flex; gap: 12px; }
/* Caption editor layout (capx) */
.capx { display: grid; grid-template-columns: 1fr 300px; gap: 20px; align-items: start; }
.capx__main { min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.dropzone--lg { padding: 30px 24px; }
.capx__settings { display: flex; flex-direction: column; gap: 16px; }
.capx__file { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; padding: 12px 16px; }
.capx__file-name { font-size: 14px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.capx__change { background: none; border: none; color: var(--violet-light); font-weight: 600; font-size: 13.5px; cursor: pointer; }
.capx__change:hover { text-decoration: underline; }
.setcard { background: var(--bg-card); border: 1px solid var(--border); border-radius: 14px; padding: 14px 18px; }
.setcard__title { font-size: 15px; font-weight: 700; margin-bottom: 8px; display: flex; align-items: center; }
.setcard__opt { font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--text-dim); background: var(--bg-soft); border: 1px solid var(--border); padding: 3px 8px; border-radius: 999px; margin-left: 8px; }
.setrow { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 9px 0; }
.setrow + .setrow { border-top: 1px solid var(--border); }
.setlabel { font-size: 14px; color: var(--text-mute); }
.segs { display: inline-flex; background: var(--bg-soft); border: 1px solid var(--border); border-radius: 10px; padding: 3px; gap: 2px; }
.segs button { background: none; border: none; cursor: pointer; font-family: inherit; font-size: 13px; font-weight: 600; color: var(--text-mute); padding: 7px 13px; border-radius: 8px; transition: background .15s, color .15s; }
.segs button.is-active { background: var(--violet); color: #fff; }
.swatches { display: inline-flex; gap: 8px; }
.swatches button { width: 26px; height: 26px; border-radius: 50%; background: var(--sw); border: 2px solid var(--border-lt); cursor: pointer; padding: 0; transition: transform .15s, border-color .15s, box-shadow .15s; }
.swatches button.is-active { border-color: var(--violet); transform: scale(1.12); box-shadow: 0 0 0 2px rgba(105,101,219,.3); }
/* Timeline (görsel v1) */
.tl { display: flex; flex-direction: column; gap: 8px; }
.tl__row { display: flex; align-items: center; gap: 10px; }
.tl__tag { width: 64px; flex: none; font-size: 12px; color: var(--text-dim); }
.tl__bar { flex: 1; height: 26px; border-radius: 8px; background: var(--bg-soft); border: 1px solid var(--border); }
.tl__bar--video { background: linear-gradient(90deg, rgba(105,101,219,.4), rgba(105,101,219,.15)); border-color: rgba(105,101,219,.4); }
.tl__bar--cap { background: repeating-linear-gradient(90deg, rgba(47,158,68,.35) 0 18px, transparent 18px 28px); border-color: rgba(47,158,68,.3); }
.tl__bar--music.has-music { background: repeating-linear-gradient(90deg, rgba(255,225,77,.3) 0 14px, transparent 14px 22px); border-color: rgba(255,225,77,.3); }
/* 9:16 önizleme */
.capx__preview { position: sticky; top: 84px; display: flex; flex-direction: column; gap: 12px; }
.capx__preview-label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-dim); }
.phoneframe { position: relative; width: 100%; aspect-ratio: 9/16; background: #000; border: 1px solid var(--border-lt); border-radius: 20px; overflow: hidden; }
.phoneframe video { width: 100%; height: 100%; object-fit: contain; background: #000; display: block; }
.phoneframe__empty { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; padding: 20px; color: var(--text-dim); font-size: 13.5px; }
/* Sidebar toggle + collapse */
.appbar__left { display: flex; align-items: center; gap: 10px; }
.appbar__toggle { display: inline-flex; align-items: center; justify-content: center; background: none; border: none; color: var(--text-mute); cursor: pointer; padding: 7px; border-radius: 9px; }
.appbar__toggle:hover { background: rgba(255,255,255,.07); color: var(--text); }
.layout.sidebar-collapsed.has-sidebar { grid-template-columns: 1fr; }
.layout.sidebar-collapsed .sidebar { display: none; }
/* Caption size slider */
.sizewrap { display: flex; align-items: center; gap: 12px; min-width: 220px; }
.sizewrap input[type=range] { flex: 1; accent-color: var(--violet); cursor: pointer; }
.sizewrap__val { font-size: 13px; color: var(--text-mute); width: 44px; text-align: right; }
.setrow--hint { display: block; color: var(--text-dim); font-size: 12.5px; padding: 6px 0 0; border-top: none; }
.setrow--hint svg { width: 13px; height: 13px; vertical-align: -2px; margin-right: 3px; }
/* Draggable live caption sample on preview */
.capsample { position: absolute; left: 50%; top: 80%; transform: translate(-50%, -50%); z-index: 3; font-weight: 800; letter-spacing: .02em; white-space: nowrap; text-transform: uppercase; cursor: grab; user-select: none; -webkit-user-select: none; touch-action: none; }
.capsample:active { cursor: grabbing; }
.capsample[hidden] { display: none; }
/* preview ekranı taşırmasın */
.phoneframe { max-height: calc(100vh - 210px); max-height: calc(100svh - 210px); }
/* Responsive */
@media (max-width: 820px) {
.layout.has-sidebar { grid-template-columns: 1fr; }
/* mobil: toplu seçim araç çubuğu (Select all / Download selected / Delete selected) ve
karttaki seçim kutusu gizli — bu işlemler sadece web'de. Karttaki Download/X kalır. */
.rdtools { display: none !important; }
.rnitem__check { display: none !important; }
/* mobil: sidebar = soldan kayan çekmece (drawer) */
.layout.has-sidebar .sidebar {
display: block; position: fixed; top: 64px; left: 0; bottom: 0; width: 252px; z-index: 60;
transform: translateX(-100%); transition: transform .25s ease; overflow-y: auto;
border-right: 1px solid var(--border); border-bottom: none; padding: 16px 12px;
}
.layout.has-sidebar.mobnav-open .sidebar { transform: translateX(0); box-shadow: 0 0 50px rgba(0,0,0,.55); }
.layout.has-sidebar .sidebar__nav { flex-direction: column; position: static; gap: 3px; }
.sidebar-backdrop { display: block; position: fixed; inset: 64px 0 0 0; background: rgba(0,0,0,.5); z-index: 55; opacity: 0; pointer-events: none; transition: opacity .2s; }
.layout.has-sidebar.mobnav-open .sidebar-backdrop { opacity: 1; pointer-events: auto; }
.modules { grid-template-columns: 1fr; }
.packs { grid-template-columns: 1fr; }
.cap__row { flex-direction: column; }
.capx { grid-template-columns: 1fr; }
.capx__preview { position: static; }
.phoneframe { max-width: 260px; margin: 0 auto; width: 100%; }
.setrow { flex-wrap: wrap; }
.view { padding: 24px 18px; padding-left: max(18px, env(safe-area-inset-left)); padding-right: max(18px, env(safe-area-inset-right)); padding-bottom: calc(24px + env(safe-area-inset-bottom)); }
.appbar__name { display: none; }
.appbar__user { padding: 4px; }
.appbar { padding: 0 16px; padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); gap: 10px; }
.settings__row { flex-wrap: wrap; }
#logoutBtn { display: none; } /* mobilde gizli — çıkış Settings'ten yapılır */
}
@media (max-width: 420px) {
.appbar__brand .brand__name, .appbar__brand span { font-size: 16px; }
.credits { font-size: 12.5px; padding: 6px 10px; }
}
/* =========================================================
Caption editörü v2 — sabit ekran (scroll yok), büyük 9:16
preview, çoklu klip, chunk editörü, serbest renk
========================================================= */
body.cap-page { overflow: hidden; height: 100vh; height: 100dvh; }
.cap-page .layout { height: calc(100vh - 64px); height: calc(100dvh - 64px); min-height: 0; }
.cap-page .content { height: 100%; min-height: 0; overflow: hidden; }
.capwrap { display: flex; flex-direction: column; gap: 12px; height: 100%; padding: 14px 22px 16px; padding-left: max(22px, env(safe-area-inset-left)); padding-right: max(22px, env(safe-area-inset-right)); padding-bottom: calc(16px + env(safe-area-inset-bottom)); max-width: 1500px; margin: 0 auto; width: 100%; }
/* EDITING sayfaları (Caption+Music / Split / Talking head) Repurposer'la aynı
genişlikte — 1680px. Compose (.composex) 1500'de KALIR, ona dokunulmadı. */
.capwrap:not(.composex) { max-width: 1680px; }
.cap-pagetitle { font-size: 21px; font-weight: 800; margin: 0; color: var(--text); }
.captop { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 22px; flex: 1; min-height: 0; }
.capcol--left { min-width: 360px; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 13px; padding-right: 6px; padding-bottom: 6px; }
.capcol--left::-webkit-scrollbar { width: 8px; }
.capcol--left::-webkit-scrollbar-thumb { background: var(--border-lt); border-radius: 99px; }
.capcol--right { --ph: calc(100vh - 64px - 30px - 178px - 154px); --ph: calc(100svh - 64px - 30px - 178px - 154px); display: flex; flex-direction: column; gap: 9px; min-height: 0; align-items: center; }
/* önizleme modu (9:16 / TikTok / Reels) — sadece kılavuz, çıktı hep 1080x1920 */
.prevmodes { display: inline-flex; gap: 2px; background: var(--bg-soft); border: 1px solid var(--border); border-radius: 9px; padding: 3px; flex: none; }
.prevmodes button { background: none; border: none; color: var(--text-mute); font-family: inherit; font-size: 12px; font-weight: 700; padding: 5px 13px; border-radius: 7px; cursor: pointer; transition: background .15s, color .15s; }
.prevmodes button.is-active { background: var(--violet); color: #fff; }
.uiov { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.uiov__box { position: absolute; background: rgba(255,255,255,.09); border: 1.5px dashed rgba(255,255,255,.4); border-radius: 8px; }
.uiov__line { position: absolute; left: 0; right: 0; height: 0; border-top: 1.5px dashed rgba(255,225,77,.85); }
.uiov__lab { position: absolute; right: 6px; font-size: 9.5px; font-weight: 700; color: rgba(255,225,77,.95); text-shadow: 0 1px 2px rgba(0,0,0,.8); }
.phoneframe--lg { height: var(--ph); width: calc(var(--ph) * 9 / 16); max-height: none; flex: none; box-shadow: 0 24px 64px rgba(0,0,0,.45); }
.capactions { width: calc(var(--ph) * 9 / 16); display: flex; flex-direction: column; gap: 9px; }
.caprow2 { display: flex; gap: 8px; }
.caprow2:empty { display: none; }
.cap__free { font-size: 11px; font-weight: 800; background: rgba(105,101,219,.22); color: var(--violet-light); padding: 2px 9px; border-radius: 999px; margin-left: 8px; }
/* İlerleme kutusu */
.capprog { background: var(--bg-card); border: 1px solid var(--border); border-radius: 13px; padding: 14px 16px; flex: none; }
.capprog p { margin-top: 9px; color: var(--text-mute); font-size: 13px; text-align: center; }
/* Klip listesi */
.setcard__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.setcard__head .setcard__title { margin-bottom: 0; }
.cliplist { display: flex; flex-direction: column; gap: 6px; }
.cliplist:not(:empty) { margin-bottom: 9px; }
.clip { display: flex; align-items: center; gap: 10px; background: var(--bg-soft); border: 1px solid var(--border); border-radius: 10px; padding: 7px 10px; font-size: 13.5px; }
.clip__idx { width: 22px; height: 22px; border-radius: 6px; background: rgba(105,101,219,.22); color: var(--violet-light); display: grid; place-items: center; font-size: 11.5px; font-weight: 800; flex: none; }
.clip__name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.clip__size { color: var(--text-dim); font-size: 12px; flex: none; }
.clip__btns { display: inline-flex; gap: 1px; flex: none; }
.iconbtn { background: none; border: none; color: var(--text-mute); cursor: pointer; width: 26px; height: 26px; border-radius: 7px; display: grid; place-items: center; font-size: 13px; line-height: 1; padding: 0; }
.iconbtn:hover { background: rgba(255,255,255,.08); color: var(--text); }
.iconbtn:disabled { opacity: .25; cursor: default; }
.iconbtn:disabled:hover { background: none; color: var(--text-mute); }
.dropzone--clips { flex-direction: row; gap: 10px; padding: 13px 16px; font-size: 13px; text-align: left; margin-bottom: 10px; }
/* Medya kutusu (bin): editör açıkken eklenen klipler burada bekler */
.binwrap { margin-bottom: 10px; }
.binlabel { display: block; font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-dim); margin-bottom: 6px; }
/* =========================================================
MEDYA KARTLARI (Video editor · Split screen · Talking head)
Tek bir kart dili: 9:16 kapak + ad + aksiyonlar. Eskiden Video editor'de
tam genişlik satır, diğerlerinde dar kutucuklardı; ikisi de sıradan
duruyordu. Created videos ızgarasıyla aynı his.
========================================================= */
.binlist { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; align-items: start; }
.binitem { position: relative; display: flex; flex-direction: column; gap: 0; background: var(--bg-card); border: 1px solid var(--border); border-radius: 14px; padding: 0; overflow: hidden; font-size: 13px; cursor: grab; user-select: none; -webkit-user-select: none; touch-action: none; transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease; }
.binitem:hover { border-color: rgba(105,101,219,.6); box-shadow: 0 6px 20px rgba(0,0,0,.35); }
.binitem:active { cursor: grabbing; }
/* Kapak: kartın tam genişliği, 9:16 dikey — video gerçekte hangi orandaysa
cover ile kadraja oturur, siyah zemin kalan boşluğu yutar. */
.binthumbwrap { position: relative; width: 100%; aspect-ratio: 9 / 16; background: #000; overflow: hidden; }
.binthumb { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; border: 0; border-radius: 0; }
/* Alt boşluk normalde butonlardan gelir; masaüstünde buton gizli olduğu için
ad satırı kartın dibine yapışmasın diye buraya alındı. */
.binitem__col { min-width: 0; display: flex; flex-direction: column; gap: 1px; padding: 9px 10px 10px; }
@media (hover: none), (max-width: 900px) { .binitem__col { padding-bottom: 0; } }
.binitem__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; font-weight: 700; }
/* Süre kapağın üstünde pill olarak duruyor → listede tekrar etmesin */
.binitem__dur { display: none; }
.binitem__state { font-size: 10.5px; font-weight: 600; color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.binitem__state.is-err { color: #ff8f8f; }
/* Yükleme başarısızsa kart kırmızıya döner (Repurposer'daki gibi bariz olsun) */
.binitem.is-err { border-color: rgba(214,60,80,.7); }
/* MASAÜSTÜNDE BUTON YOK: kart Created videos gibi sade dursun, atama sürükle-bırak
ile yapılsın. Butonlar yalnızca sürüklemenin çalışmadığı yerlerde (dokunmatik
ya da dar ekran) görünür — aşağıdaki media query. */
.binitem__btns { display: none; flex-direction: row; gap: 5px; padding: 8px 10px 10px; }
.binitem__btns .minibtn { flex: 1 1 0; min-width: 0; justify-content: center; font-size: 11px; font-weight: 700; padding: 5px 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (hover: none), (max-width: 900px) { .binitem__btns { display: flex; } }
/* Masaüstünde sürüklenebilirlik ipucu: hover'da kapak hafif karartılıp tutma
ikonu belirir (buton olmadığı için keşfedilebilir kalsın). */
.binitem__grab { position: absolute; inset: 0; z-index: 3; display: grid; place-items: center; opacity: 0; transition: opacity .14s ease; background: rgba(10,10,16,.42); pointer-events: none; }
.binitem__grab::after { content: ""; width: 26px; height: 26px; background-color: #fff;
-webkit-mask: no-repeat center / 26px 26px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 4.5a1.5 1.5 0 1 1 3 0 1.5 1.5 0 0 1-3 0Zm0 7.5a1.5 1.5 0 1 1 3 0 1.5 1.5 0 0 1-3 0Zm0 7.5a1.5 1.5 0 1 1 3 0 1.5 1.5 0 0 1-3 0ZM15 4.5a1.5 1.5 0 1 1 3 0 1.5 1.5 0 0 1-3 0Zm0 7.5a1.5 1.5 0 1 1 3 0 1.5 1.5 0 0 1-3 0Zm0 7.5a1.5 1.5 0 1 1 3 0 1.5 1.5 0 0 1-3 0Z'/%3E%3C/svg%3E");
mask: no-repeat center / 26px 26px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 4.5a1.5 1.5 0 1 1 3 0 1.5 1.5 0 0 1-3 0Zm0 7.5a1.5 1.5 0 1 1 3 0 1.5 1.5 0 0 1-3 0Zm0 7.5a1.5 1.5 0 1 1 3 0 1.5 1.5 0 0 1-3 0ZM15 4.5a1.5 1.5 0 1 1 3 0 1.5 1.5 0 0 1-3 0Zm0 7.5a1.5 1.5 0 1 1 3 0 1.5 1.5 0 0 1-3 0Zm0 7.5a1.5 1.5 0 1 1 3 0 1.5 1.5 0 0 1-3 0Z'/%3E%3C/svg%3E"); }
.binitem:hover .binitem__grab { opacity: 1; }
.binitem.is-uploading .binitem__grab, .binitem.is-err .binitem__grab { display: none; }
@media (hover: none), (max-width: 900px) {
.binitem__grab { display: none; }
/* Dokunmatikte yerleştirme butonlarla yapılıyor; touch-action:none kalsaydı
parmak bir kartın üstündeyken şerit/sayfa kaydırılamazdı. */
.binitem { touch-action: auto; cursor: default; }
.binitem:active { cursor: default; }
}
/* ---- Editör media bin: kart modu (ilk klip yüklenince) — Excalidraw tarzı ---- */
/* Split screen / Talking head: klip varken bırakma alanı kartların yanına geçer.
Kart görünümü artık .binitem'ın kendisinde — buradaki eski ezmeler kalktı. */
.binrow.is-cards { display: flex; flex-wrap: wrap; gap: 12px; align-items: start; }
.binrow.is-cards .binlabel { display: none; }
.binrow.is-cards .binlist { order: 1; flex: 1 1 320px; }
.binrow.is-cards .dropzone--clips { order: 2; flex: 0 0 150px; flex-direction: column; gap: 6px; min-height: 0; align-self: stretch; margin: 0; justify-content: center; align-items: center; text-align: center; font-size: 12px; border-radius: 14px; }
/* Kapak üzerindeki bilgiler */
.binitem__len { position: absolute; left: 6px; bottom: 6px; z-index: 2; padding: 2px 7px; border-radius: 999px; background: rgba(0,0,0,.72); color: #fff; font-size: 10.5px; font-weight: 800; letter-spacing: .01em; }
/* Kaldır: kapağın sağ üst köşesi (Repurposer hücreleriyle aynı yer) */
.binitem__x { position: absolute; right: 5px; top: 5px; z-index: 4; width: 22px; height: 22px; display: grid; place-items: center; border: 0; border-radius: 7px; background: rgba(0,0,0,.62); color: #fff; font-family: inherit; font-size: 11px; line-height: 1; cursor: pointer; opacity: 0; transition: opacity .12s, background .12s; }
.binitem:hover .binitem__x { opacity: 1; }
.binitem__x:hover { background: #d63c50; }
/* YÜKLENİYOR: beyaz spinner yerine ortada mor yükleme ikonu (Repurposer ile aynı dil) */
.binitem.is-uploading { pointer-events: none; }
.binitem.is-uploading::before, .binitem.is-uploading::after { display: none; }
.binitem.is-uploading .binthumbwrap::before { content: ""; position: absolute; inset: 0; z-index: 2; background: rgba(14,15,26,.62); }
.binitem.is-uploading .binthumbwrap::after {
content: ""; position: absolute; top: 50%; left: 50%; z-index: 3; width: 30px; height: 30px; margin: -15px 0 0 -15px;
background-color: var(--violet-light); animation: bcup 1.1s ease-in-out infinite;
-webkit-mask: no-repeat center / 30px 30px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 15.75C12.4142 15.75 12.75 15.4142 12.75 15V4.02744L14.4306 5.98809C14.7001 6.30259 15.1736 6.33901 15.4881 6.06944C15.8026 5.79988 15.839 5.3264 15.5694 5.01191L12.5694 1.51191C12.427 1.34567 12.2189 1.25 12 1.25C11.7811 1.25 11.573 1.34567 11.4306 1.51191L8.43056 5.01191C8.16099 5.3264 8.19741 5.79988 8.51191 6.06944C8.8264 6.33901 9.29988 6.30259 9.56944 5.98809L11.25 4.02744L11.25 15C11.25 15.4142 11.5858 15.75 12 15.75Z'/%3E%3Cpath d='M16 9C15.2978 9 14.9467 9 14.6945 9.16851C14.5853 9.24148 14.4915 9.33525 14.4186 9.44446C14.25 9.69667 14.25 10.0478 14.25 10.75L14.25 15C14.25 16.2426 13.2427 17.25 12 17.25C10.7574 17.25 9.75004 16.2426 9.75004 15L9.75004 10.75C9.75004 10.0478 9.75004 9.69664 9.58149 9.4444C9.50854 9.33523 9.41481 9.2415 9.30564 9.16855C9.05341 9 8.70227 9 8 9C5.17157 9 3.75736 9 2.87868 9.87868C2 10.7574 2 12.1714 2 14.9998V15.9998C2 18.8282 2 20.2424 2.87868 21.1211C3.75736 21.9998 5.17157 21.9998 8 21.9998H16C18.8284 21.9998 20.2426 21.9998 21.1213 21.1211C22 20.2424 22 18.8282 22 15.9998V14.9998C22 12.1714 22 10.7574 21.1213 9.87868C20.2426 9 18.8284 9 16 9Z'/%3E%3C/svg%3E");
mask: no-repeat center / 30px 30px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 15.75C12.4142 15.75 12.75 15.4142 12.75 15V4.02744L14.4306 5.98809C14.7001 6.30259 15.1736 6.33901 15.4881 6.06944C15.8026 5.79988 15.839 5.3264 15.5694 5.01191L12.5694 1.51191C12.427 1.34567 12.2189 1.25 12 1.25C11.7811 1.25 11.573 1.34567 11.4306 1.51191L8.43056 5.01191C8.16099 5.3264 8.19741 5.79988 8.51191 6.06944C8.8264 6.33901 9.29988 6.30259 9.56944 5.98809L11.25 4.02744L11.25 15C11.25 15.4142 11.5858 15.75 12 15.75Z'/%3E%3Cpath d='M16 9C15.2978 9 14.9467 9 14.6945 9.16851C14.5853 9.24148 14.4915 9.33525 14.4186 9.44446C14.25 9.69667 14.25 10.0478 14.25 10.75L14.25 15C14.25 16.2426 13.2427 17.25 12 17.25C10.7574 17.25 9.75004 16.2426 9.75004 15L9.75004 10.75C9.75004 10.0478 9.75004 9.69664 9.58149 9.4444C9.50854 9.33523 9.41481 9.2415 9.30564 9.16855C9.05341 9 8.70227 9 8 9C5.17157 9 3.75736 9 2.87868 9.87868C2 10.7574 2 12.1714 2 14.9998V15.9998C2 18.8282 2 20.2424 2.87868 21.1211C3.75736 21.9998 5.17157 21.9998 8 21.9998H16C18.8284 21.9998 20.2426 21.9998 21.1213 21.1211C22 20.2424 22 18.8282 22 15.9998V14.9998C22 12.1714 22 10.7574 21.1213 9.87868C20.2426 9 18.8284 9 16 9Z'/%3E%3C/svg%3E");
}
/* ---- Ortalı onay pop-up'ı (sayfadan ayrılma vb.) — responsive ---- */
/* z-index 1100: onay penceresi DİĞER modallerin (socmodal 1000) ÜSTÜNDE olmalı.
Eşit olduğunda DOM sırası karar veriyordu ve onay kutusu edit modalinin arkasında
kalıp "tıklıyorum ama kapanmıyor" hatasına yol açıyordu. */
.ugcmodal { position: fixed; inset: 0; z-index: 1100; display: grid; place-items: center; padding: 20px; padding-top: max(20px, env(safe-area-inset-top)); padding-bottom: max(20px, env(safe-area-inset-bottom)); padding-left: max(20px, env(safe-area-inset-left)); padding-right: max(20px, env(safe-area-inset-right)); background: rgba(0,0,0,.55); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
.ugcmodal[hidden] { display: none; }
.ugcmodal__card { width: 100%; max-width: 380px; background: var(--bg-card); border: 1px solid var(--border-lt); border-radius: 16px; padding: 22px; box-shadow: 0 24px 60px rgba(0,0,0,.5); animation: ugcmodalIn .18s ease; }
.ugcmodal__x { position: absolute; top: 12px; right: 12px; width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--border-lt); background: var(--bg-soft); color: var(--text-mute); font-size: 15px; line-height: 1; cursor: pointer; display: grid; place-items: center; z-index: 2; transition: background .15s, color .15s; }
.ugcmodal__x:hover { background: rgba(255,255,255,.08); color: var(--text); }
@keyframes ugcmodalIn { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }
.ugcmodal__title { font-size: 18px; font-weight: 800; margin: 0 0 8px; }
.ugcmodal__body { color: var(--text-mute); font-size: 14.5px; line-height: 1.55; margin: 0 0 18px; }
.ugcmodal__actions { display: flex; gap: 10px; justify-content: flex-end; }
.ugcmodal__btn { font-family: inherit; font-size: 14px; font-weight: 700; padding: 9px 18px; border-radius: 10px; cursor: pointer; border: 1px solid var(--border-lt); background: var(--bg-soft); color: var(--text); transition: background .15s; }
.ugcmodal__btn:hover { background: rgba(255,255,255,.08); }
.ugcmodal__btn--primary { background: var(--violet); border-color: var(--violet); color: #fff; }
.ugcmodal__btn--primary:hover { background: var(--violet-dark); }
.ugcmodal__btn--danger { background: #d63c50; border-color: #d63c50; color: #fff; }
.ugcmodal__btn--danger:hover { background: #c12f43; }
.ugcmodal__btn:disabled { opacity: .5; cursor: not-allowed; }
.ugcmodal__btn:disabled:hover { background: #d63c50; }
/* Ödeme yöntemi seçimi (Bank / Crypto) — iki eşit, ikonlu premium seçenek */
.paychoice { display: flex; flex-direction: column; gap: 11px; margin-top: 6px; }
.paychoice__opt { display: flex; align-items: center; gap: 13px; width: 100%; text-align: left; padding: 13px 15px; border-radius: 13px; background: var(--bg-elev); border: 1px solid var(--border-lt); color: var(--text); cursor: pointer; font-family: inherit; transition: border-color .15s, background .15s, transform .1s; }
.paychoice__opt:hover { border-color: #8b87ff; background: rgba(105,101,219,.10); transform: translateY(-1px); }
.paychoice__ic { flex: none; width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; background: rgba(105,101,219,.15); color: #8b87ff; }
.paychoice__ic svg { width: 19px; height: 19px; }
.paychoice__txt { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.paychoice__t { font-size: 15px; font-weight: 700; letter-spacing: -.01em; }
.paychoice__d { font-size: 12.5px; color: var(--text-mute); }
.paychoice__arrow { flex: none; color: var(--text-dim); font-size: 21px; line-height: 1; transition: transform .15s, color .15s; }
.paychoice__opt:hover .paychoice__arrow { color: #8b87ff; transform: translateX(2px); }
@media (max-width: 480px) { .ugcmodal__actions { flex-direction: column-reverse; } .ugcmodal__btn { width: 100%; } }
/* Mobil: modalları ekrana tam sığdır (özellikle Helio widget'ı için geniş alan) */
@media (max-width: 480px) {
.ugcmodal { padding: 10px; align-items: end; }
.ugcmodal__card { max-width: 100% !important; padding: 16px; border-radius: 16px 16px 0 0; }
.paychoice__opt { padding: 12px 13px; }
}
/* kutudan timeline'a sürükleme hayaleti + bırakma vurgusu */
.dragghost { position: fixed; z-index: 999; pointer-events: none; background: rgba(105,101,219,.92); color: #fff; font-size: 12px; font-weight: 700; padding: 7px 12px; border-radius: 9px; transform: translate(-50%, -130%); box-shadow: 0 8px 24px rgba(0,0,0,.4); white-space: nowrap; }
.tlbox__lane--video.is-dropover { border-color: var(--violet); box-shadow: 0 0 0 2px rgba(105,101,219,.4); }
.dropzone--clips .dropzone__icon { font-size: 20px; }
/* Caption chunk editörü */
.cardhint { font-size: 12.5px; color: var(--text-dim); margin-bottom: 9px; }
.chunklist { display: flex; flex-direction: column; gap: 5px; max-height: 336px; overflow-y: auto; padding-right: 3px; }
.chunklist::-webkit-scrollbar { width: 7px; }
.chunklist::-webkit-scrollbar-thumb { background: var(--border-lt); border-radius: 99px; }
.chunk { display: grid; grid-template-columns: minmax(0,1fr) 62px 62px 26px; gap: 5px; align-items: center; background: var(--bg-soft); border: 1px solid var(--border); border-radius: 9px; padding: 4px 5px; cursor: pointer; transition: border-color .15s; }
.chunk:hover { border-color: var(--border-lt); }
.chunk.is-live { border-color: var(--violet); background: rgba(105,101,219,.08); }
.chunk input { font-family: inherit; background: transparent; border: 1px solid transparent; border-radius: 6px; color: var(--text); font-size: 13px; font-weight: 600; padding: 6px 7px; min-width: 0; }
.chunk input:focus { outline: none; border-color: var(--violet); background: var(--bg-card); }
.chunk input[type=number] { text-align: right; color: var(--text-mute); font-weight: 500; font-size: 12.5px; appearance: textfield; -moz-appearance: textfield; }
.chunk input[type=number]::-webkit-outer-spin-button, .chunk input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.minibtn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; background: rgba(105,101,219,.14); border: 1px solid rgba(105,101,219,.35); color: var(--violet-light); border-radius: 8px; font-family: inherit; font-size: 12.5px; font-weight: 700; padding: 5px 11px; cursor: pointer; transition: background .15s; }
/* İkon–metin boşluğu artık margin DEĞİL, flex gap ile.
Eski `.minibtn svg:only-child { margin-right: 0 }` kuralı ikon+metin butonlarında
DA eşleşiyordu: buton içindeki yazı bir text node, element değil → CSS'e göre svg
hâlâ "tek çocuk" sayılıyor ve boşluk sıfırlanıyordu. gap'te bu sorun yok, sadece
ikon varsa (tek öğe) gap zaten devreye girmez. */
.minibtn svg { flex: none; }
.minibtn:hover { background: rgba(105,101,219,.26); }
/* Renk: hazır renkler + serbest seçici */
.colorrow { display: inline-flex; align-items: center; gap: 12px; }
.colorpick { position: relative; width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--border-lt); overflow: hidden; cursor: pointer; flex: none; background: conic-gradient(#f03e3e, #f59f00, #37b24d, #1c7ed6, #ae3ec9, #f03e3e); transition: transform .15s, border-color .15s, box-shadow .15s; }
.colorpick.is-active { border-color: var(--violet); transform: scale(1.12); box-shadow: 0 0 0 2px rgba(105,101,219,.3); }
.colorpick input { position: absolute; inset: -8px; width: 44px; height: 44px; opacity: 0; cursor: pointer; border: none; padding: 0; }
/* ---- Timeline: BOYDAN BOYA, CapCut benzeri (sabit, altta) ---- */
.tlbox--full { position: relative; width: 100%; flex: none; background: var(--bg-card); border: 1px solid var(--border); border-radius: 13px; padding: 8px 14px 12px; user-select: none; -webkit-user-select: none; touch-action: none; }
.tlbox__bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.tlbox__time { font-size: 12.5px; font-weight: 700; color: var(--text-mute); font-variant-numeric: tabular-nums; }
.tlbox__tools { display: flex; align-items: center; gap: 8px; }
.minibtn--danger { background: rgba(224,49,49,.12); border-color: rgba(224,49,49,.4); color: #ff8585; }
.minibtn--danger:hover { background: rgba(224,49,49,.22); }
.minibtn:disabled { opacity: .35; cursor: default; }
.tlbox__ruler { position: relative; height: 18px; cursor: pointer; margin-left: 64px; }
.tlbox__ruler span { position: absolute; top: 2px; transform: translateX(-50%); font-size: 10px; color: var(--text-dim); pointer-events: none; }
.tlbox__lanes { display: flex; flex-direction: column; gap: 6px; }
.tlbox__row { display: flex; align-items: center; gap: 0; }
.tlbox__tag { width: 64px; flex: none; font-size: 11px; font-weight: 600; color: var(--text-dim); text-transform: uppercase; letter-spacing: .04em; }
.tlbox__lane { position: relative; flex: 1; background: var(--bg-soft); border: 1px solid var(--border); border-radius: 8px; overflow: hidden; cursor: pointer; }
.tlbox__lane--video { height: 34px; }
.tlbox__lane--cap { height: 36px; }
.tlbox__lane--music { height: 28px; }
.tlbox__lane-hint { position: absolute; inset: 0; display: grid; place-items: center; font-size: 11px; color: var(--text-dim); pointer-events: none; }
/* video parçaları (kesme) */
.tlvid { position: absolute; top: 2px; bottom: 2px; background: linear-gradient(180deg, rgba(76,110,245,.45), rgba(76,110,245,.25)); border: 1px solid rgba(116,143,252,.8); border-radius: 6px; cursor: pointer; display: grid; place-items: center; font-size: 10px; color: #cdd5ff; overflow: hidden; white-space: nowrap; }
.tlvid.is-selected { border-color: #fff; box-shadow: 0 0 0 1.5px rgba(255,255,255,.8), 0 0 10px rgba(116,143,252,.6); }
/* caption segmentleri */
.tlseg { position: absolute; top: 2px; bottom: 2px; background: rgba(105,101,219,.5); border: 1px solid rgba(141,138,237,.9); border-radius: 6px; cursor: grab; min-width: 5px; display: flex; align-items: center; padding: 0 6px; overflow: hidden; }
.tlseg span { font-size: 10px; font-weight: 600; color: #e8e6ff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; pointer-events: none; }
.tlseg.is-live { background: rgba(105,101,219,.92); box-shadow: 0 0 8px rgba(105,101,219,.55); }
.tlseg:active { cursor: grabbing; }
.tlseg__h { position: absolute; top: 0; bottom: 0; width: 9px; cursor: ew-resize; }
.tlseg__h--l { left: -3px; }
.tlseg__h--r { right: -3px; }
.tlmusic { position: absolute; top: 2px; bottom: 2px; background: repeating-linear-gradient(90deg, rgba(255,225,77,.35) 0 9px, rgba(255,225,77,.18) 9px 18px); border: 1px solid rgba(255,225,77,.6); border-radius: 6px; cursor: grab; }
.tlmusic:active { cursor: grabbing; }
/* playhead: 12px görünmez tutma alanı + ortada 2px çizgi; sürüklenebilir */
.tlbox__playhead { position: absolute; top: 30px; bottom: 8px; left: 78px; width: 12px; margin-left: -6px; cursor: ew-resize; z-index: 6; touch-action: none; }
.tlbox__playhead::before { content: ""; position: absolute; left: 5px; top: 0; bottom: 0; width: 2px; background: #fff; box-shadow: 0 0 6px rgba(255,255,255,.7); border-radius: 2px; }
.tlbox__playhead::after { content: ""; position: absolute; left: 1px; top: -4px; width: 10px; height: 10px; background: #fff; border-radius: 3px; }
/* video parçası sürüklenirken */
.tlvid.is-dragging { opacity: .75; z-index: 8; cursor: grabbing; }
/* önizleme play/pause */
.playbtn { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 64px; height: 64px; border-radius: 50%; border: none; background: rgba(0,0,0,.55); color: #fff; font-size: 24px; cursor: pointer; z-index: 4; display: grid; place-items: center; backdrop-filter: blur(2px); transition: background .15s, transform .15s; padding-left: 5px; }
.playbtn:hover { background: rgba(105,101,219,.75); transform: translate(-50%,-50%) scale(1.06); }
.cardhint-inline { font-size: 11px; color: var(--text-dim); font-weight: 400; }
.segs--sm button { padding: 5px 10px; font-size: 12px; }
/* ---- Font seçici (Google Fonts chip'leri) ---- */
.setrow--font { align-items: flex-start; }
.fontchips { display: flex; flex-wrap: wrap; gap: 7px; justify-content: flex-end; max-width: 540px; max-height: 118px; overflow-y: auto; padding: 2px; }
.fontchips::-webkit-scrollbar { width: 7px; }
.fontchips::-webkit-scrollbar-thumb { background: var(--border-lt); border-radius: 99px; }
.fontchip { background: var(--bg-soft); border: 1px solid var(--border); color: var(--text); border-radius: 9px; padding: 6px 11px; font-size: 14px; line-height: 1.1; cursor: pointer; transition: border-color .15s, background .15s; white-space: nowrap; }
.fontchip:hover { border-color: var(--border-lt); background: rgba(255,255,255,.05); }
.fontchip.is-active { border-color: var(--violet); background: rgba(105,101,219,.16); box-shadow: 0 0 0 2px rgba(105,101,219,.25); }
.chunklist__empty { padding: 14px; text-align: center; color: var(--text-dim); font-size: 13px; border: 1px dashed var(--border); border-radius: 9px; }
/* ---- Reaction / Split editörü ---- */
.rxstack { position: absolute; inset: 0; display: flex; flex-direction: column; }
.rxstack[hidden] { display: none; }
.rxslot { position: relative; overflow: hidden; background: #000; height: 60%; }
.rxslot + .rxslot { height: 40%; }
.rxslot video { width: 100%; height: 100%; object-fit: cover; display: block; }
.rxslot__hint { position: absolute; inset: 0; display: grid; place-items: center; color: var(--text-dim); font-size: 13px; pointer-events: none; }
.rxslot__hint[hidden] { display: none; }
.rxdivider { position: relative; height: 0; z-index: 5; cursor: ns-resize; touch-action: none; }
.rxdivider::before { content: ""; position: absolute; left: 0; right: 0; top: -2px; height: 4px; background: rgba(105,101,219,.9); box-shadow: 0 0 8px rgba(105,101,219,.7); }
.rxdivider::after { content: "⇕"; position: absolute; left: 50%; top: -13px; transform: translateX(-50%); width: 26px; height: 26px; border-radius: 50%; background: var(--violet); color: #fff; display: grid; place-items: center; font-size: 13px; }
.slotinfo { font-size: 13px; color: var(--text-mute); padding: 8px 2px 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#rxResult { width: 100%; height: 100%; object-fit: contain; background: #000; }
.rxstack .rxslot video { cursor: grab; touch-action: none; }
.rxstack .rxslot video:active { cursor: grabbing; }
/* Top / Bottom sürükle-bırak kutuları (Media'dan klip al) */
.rxboxes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.rxbox { display: flex; flex-direction: column; gap: 8px; min-height: 84px; background: var(--bg-card); border: 1.5px dashed var(--border-lt); border-radius: 14px; padding: 11px 13px; transition: border-color .18s, background .18s; }
.rxbox.is-over { border-color: var(--violet); background: rgba(105,101,219,.09); }
.rxbox.is-filled { border-style: solid; border-color: rgba(105,101,219,.55); background: rgba(105,101,219,.05); }
.rxbox__tag { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--text-dim); }
.rxbox__tag svg { flex: none; }
.rxbox__body { flex: 1; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.rxbox__hint { color: var(--text-dim); font-size: 12.5px; }
.rxbox__meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.rxbox__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 600; color: var(--text); }
.rxbox__sub { font-size: 11px; color: var(--violet-light); }
.rxbox__thumb { flex: none; width: 40px; height: 54px; object-fit: cover; border-radius: 8px; background: #000; display: block; }
.rxbox__x { flex: none; background: rgba(224,49,49,.12); border: 1px solid rgba(224,49,49,.4); color: #ff8585; border-radius: 7px; cursor: pointer; font-size: 12px; line-height: 1; padding: 4px 8px; align-self: flex-start; }
.rxbox__x:hover { background: rgba(224,49,49,.22); }
/* Çıktı süresi bilgisi (Split screen + Talking head): iki klip seçilince
"videon N sn olacak" satırı. Yalnızca #rxLenNote / #thLenNote kullanır. */
.lennote { margin: 0; font-size: 12px; line-height: 1.45; color: var(--text-mute); background: rgba(105,101,219,.07); border: 1px solid rgba(105,101,219,.22); border-radius: 10px; padding: 8px 11px; }
.lennote[hidden] { display: none; }
/* NOT: .binthumb'ın ikinci (40x52) tanımı kaldırıldı — yukarıdaki kart tanımını
eziyordu; iki ayrı yerde tanımlı olması zaten hataya açıktı. */
.binitem.is-dragging { opacity: .5; transform: scale(.97); }
.module__tag { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-dim); background: var(--bg-soft); border: 1px solid var(--border); padding: 2px 7px; border-radius: 999px; margin-left: 6px; vertical-align: middle; }
/* Eski sabit topbar kredi göstergesi gizli (yeni token çipi .tokenchip kullanılıyor) */
.credits { display: none !important; }
/* NOT: Marketplace nav öğesi geri açıldı (kredi paketleri sayfası) — token sistemi geri geldi. */
/* Kredi/token/Free izleri kaldırıldı (hard paywall): render butonu rozeti + dashboard maliyet satırı */
/* render butonlarındaki maliyet/Free rozetleri gizli (maliyet sidebar + dashboard'da görünür) */
.cap__free, .module__foot { display: none !important; }
/* Rate-limit bilgisi (her modülde gösterilir; shell.js doldurur) */
.limits-note { font-size: 12px; color: var(--text-dim); display: flex; align-items: center; gap: 6px; }
.limits-note::before { content: "🛡"; }
/* ===== Auto-post merkezi ===== */
.aptabs { display: inline-flex; gap: 2px; background: var(--bg-soft); border: 1px solid var(--border); border-radius: 10px; padding: 3px; }
.aptab { background: none; border: none; color: var(--text-mute); font-family: inherit; font-size: 13px; font-weight: 700; padding: 6px 14px; border-radius: 7px; cursor: pointer; transition: background .15s, color .15s; }
.aptab.is-active { background: var(--violet); color: #fff; }
.apbanner { background: rgba(105,101,219,.1); border: 1px solid rgba(105,101,219,.35); color: var(--text-mute); border-radius: 12px; padding: 11px 14px; font-size: 13px; line-height: 1.5; margin-bottom: 14px; }
.apgrid { display: grid; grid-template-columns: minmax(0,1fr) 320px; gap: 16px; align-items: start; }
.apcol { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
@media (max-width: 900px) { .apgrid { grid-template-columns: 1fr; } }
.appick { cursor: pointer; border: 2px solid transparent; transition: border-color .15s, transform .1s; }
.appick:hover { transform: translateY(-2px); }
.appick.is-sel { border-color: var(--violet); box-shadow: 0 0 0 3px rgba(105,101,219,.25); }
.apchips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.apchip { display: inline-flex; align-items: center; gap: 5px; background: var(--bg-soft); border: 1px solid var(--border); color: var(--text-mute); border-radius: 999px; padding: 7px 12px; font-size: 13px; font-weight: 600; cursor: pointer; transition: background .15s, border-color .15s, color .15s; }
.apchip.is-on { background: rgba(105,101,219,.18); border-color: var(--violet); color: #fff; }
.apchip__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); display: inline-block; }
.apta { width: 100%; background: var(--bg-soft); border: 1px solid var(--border); border-radius: 12px; color: var(--text); font-family: inherit; font-size: 14px; padding: 11px 13px; resize: vertical; }
.apta:focus { outline: none; border-color: var(--violet); }
.apta__count { text-align: right; font-size: 11px; color: var(--text-dim); margin-top: 4px; }
.apinput { flex: 1; background: var(--bg-soft); border: 1px solid var(--border); border-radius: 10px; color: var(--text); font-family: inherit; font-size: 13px; padding: 8px 10px; color-scheme: dark; }
.apinput:focus { outline: none; border-color: var(--violet); }
/* calendar */
.apcal__nav { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 14px; }
.apcal__head { display: grid; grid-template-columns: repeat(7,1fr); gap: 8px; margin-bottom: 8px; }
.apcal__head span { text-align: center; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-dim); }
.apcal__grid { display: grid; grid-template-columns: repeat(7,1fr); gap: 8px; }
.apcal__cell { min-height: 132px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; padding: 8px 9px; display: flex; flex-direction: column; gap: 5px; }
.apcal__cell.is-empty { background: transparent; border: none; }
.apcal__day { font-size: 12.5px; color: var(--text-dim); font-weight: 700; }
.apcal__post { display: flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 600; color: #fff; background: var(--violet); border-radius: 7px; padding: 4px 7px; cursor: pointer; overflow: hidden; line-height: 1.3; }
.apcal__pt { font-weight: 700; white-space: nowrap; }
.apcal__ics { display: inline-flex; gap: 2px; }
.apcal__ic { width: 16px; height: 16px; border-radius: 50%; display: grid; place-items: center; color: #fff; flex: none; }
.apcal__ic svg { width: 9px; height: 9px; fill: currentColor; }
.apcal__more { font-size: 10.5px; font-weight: 700; color: var(--text-dim); padding: 1px 4px; cursor: default; }
/* view toggle */
.apcal__views { display: inline-flex; background: var(--bg-elev); border: 1px solid var(--border); border-radius: 9px; padding: 3px; gap: 2px; }
.apseg__btn { background: transparent; border: 0; color: var(--text-mute); font-size: 13px; font-weight: 600; padding: 5px 14px; border-radius: 7px; cursor: pointer; }
.apseg__btn.is-active { background: var(--violet); color: #fff; }
/* week view */
.apweek { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; }
.apweek__col { background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; min-height: 360px; display: flex; flex-direction: column; }
.apweek__col.is-today { border-color: var(--violet); }
.apweek__colhead { display: flex; align-items: baseline; justify-content: space-between; padding: 8px 10px; border-bottom: 1px solid var(--border); }
.apweek__colhead span { font-size: 11px; text-transform: uppercase; color: var(--text-dim); font-weight: 700; }
.apweek__colhead b { font-size: 15px; }
.apweek__list { display: flex; flex-direction: column; gap: 6px; padding: 8px; overflow-y: auto; }
.apweek__post { display: flex; flex-direction: column; gap: 4px; background: var(--violet); color: #fff; border-radius: 8px; padding: 6px 8px; cursor: pointer; }
.apweek__post .apcal__cap { font-size: 11px; opacity: .9; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.apweek__post.is-draft { background: var(--bg-elev); color: var(--text-mute); border: 1px solid var(--border-lt); }
.apweek__post.is-posted { background: var(--green); }
.apweek__post.is-failed { background: #b23; }
/* ---- Mobil TEK GÜN görünümü (ay ızgarası yerine) ---- */
.apday { display: none; flex-direction: column; gap: 14px; }
.apday__nav { position: relative; display: flex; align-items: center; gap: 10px; }
.apday__nav .minibtn { font-size: 18px; padding: 8px 14px; flex: none; }
.apday__pick { flex: 1; background: var(--bg-soft); border: 1px solid var(--border); color: var(--text); font-family: inherit; font-weight: 800; font-size: 15px; padding: 11px 12px; border-radius: 10px; cursor: pointer; text-align: center; }
.apday__date { position: absolute; left: 50px; right: 50px; top: 0; bottom: 0; width: auto; opacity: 0; cursor: pointer; color-scheme: dark; }
.apday__panel { display: flex; flex-direction: column; gap: 10px; }
.apday__empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; text-align: center; min-height: 340px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 14px; color: var(--text-dim); padding: 24px; }
.apday__empty p { font-size: 14px; }
.apday__add { font-size: 13px; font-weight: 700; color: var(--violet-light); border: 1px solid rgba(105,101,219,.4); padding: 8px 14px; border-radius: 999px; }
/* gün kartları (ajanda kart sınıflarını yeniden kullanır) */
.apagenda__post { background: var(--bg-card); border: 1px solid var(--border); border-left: 3px solid var(--violet); border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; cursor: pointer; }
.apagenda__post.is-draft { border-left-color: var(--text-dim); }
.apagenda__post.is-posted { border-left-color: var(--green); }
.apagenda__post.is-failed { border-left-color: #d63c50; }
.apagenda__top { display: flex; align-items: center; gap: 8px; }
.apagenda__time { font-size: 14px; font-weight: 800; }
/* Durum rozeti: renkli pill (mobilde yeşil nokta ile üst üste binme fix'i —
nokta ajanda kartında gizlenir, rengi zaten pill taşır) */
.apagenda__top { padding-right: 20px; }
.apagenda__st { margin-left: auto; font-size: 9.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--text-mute); padding: 3px 9px; border: 1px solid var(--border-lt); border-radius: 999px; background: var(--bg-elev); white-space: nowrap; }
.apagenda__post.is-posted .apagenda__st, .apagenda__post.is-published .apagenda__st { color: #69db7c; border-color: rgba(63,207,110,.35); background: rgba(63,207,110,.10); }
.apagenda__post.is-failed .apagenda__st { color: #ff8585; border-color: rgba(214,60,80,.4); background: rgba(214,60,80,.10); }
.apagenda__cap { font-size: 13.5px; color: var(--text-mute); line-height: 1.45; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
@media (max-width: 700px) {
.calx__head { display: none; } /* ay başlığı gizli — gün görünümünün kendi nav'ı var */
#apCal { display: none; }
.apday { display: flex; }
}
@media (max-width: 820px) { .apweek { grid-template-columns: 1fr; } .apweek__col { min-height: auto; } }
@media (max-width: 720px) { .apcal__cell { min-height: 84px; padding: 5px 6px; } .apcal__post { font-size: 10.5px; padding: 3px 5px; } }
.apcal__post.is-draft { background: var(--bg-elev); color: var(--text-mute); border: 1px solid var(--border-lt); }
.apcal__post.is-posted { background: var(--green); }
.apcal__post.is-failed { background: #b23; }
/* Calendar chip: hesap nick + sil butonu + daha net ikon */
.apcal__post { position: relative; padding-right: 20px; }
.apcal__who { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 96px; }
.apcal__ic { width: 20px; height: 20px; display: grid; place-items: center; }
.apcal__ic svg { width: 14px; height: 14px; display: block; }
.apcal__x { position: absolute; top: 50%; right: 3px; transform: translateY(-50%); width: 16px; height: 16px; padding: 0; border: none; border-radius: 5px; background: rgba(0,0,0,.30); color: #fff; font-size: 10px; line-height: 1; cursor: pointer; opacity: 0; transition: opacity .15s; display: grid; place-items: center; }
.apcal__post:hover .apcal__x { opacity: 1; }
.apcal__x:hover { background: #b23; }
.apcal__cell { min-height: 138px; }
.apagenda__post { position: relative; }
.apagenda__post .apcal__x { opacity: 1; top: 10px; transform: none; }
/* Yayınlandı → belirgin yeşil nokta (X yerine) */
.apcal__done { position: absolute; top: 50%; right: 6px; transform: translateY(-50%); width: 9px; height: 9px; border-radius: 50%; background: #3fcf6e; box-shadow: 0 0 0 2px rgba(63,207,110,.28); flex: 0 0 auto; }
.apagenda__post .apcal__done { display: none; } /* ajanda kartında rozet pill'i durumu taşıyor — nokta "POSTED" yazısına biniyordu */
.apweek__post .apcal__done { top: 10px; }
/* Hafta görünümü: gün kolonu çok postta site-uyumlu scroll (global scrollbar stili) */
.apweek__list { max-height: 62vh; overscroll-behavior: contain; }
/* "+N more" tıklanabilir */
.apcal__more { cursor: pointer; }
.apcal__more:hover { color: var(--violet-light); text-decoration: underline; }
/* Buton spinner (Posting/Scheduling…) */
.btnspin { display: inline-block; width: 15px; height: 15px; margin-right: 8px; vertical-align: -3px; border: 2px solid rgba(255,255,255,.35); border-top-color: #fff; border-radius: 50%; animation: btnspin .7s linear infinite; }
@keyframes btnspin { to { transform: rotate(360deg); } }
/* Posts kartı: zamanlanan hesap nick'i */
.appost__who { font-size: 12px; font-weight: 600; color: var(--text-mute); align-self: center; }
/* connections */
.apconns { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
.apconn { display: flex; align-items: center; gap: 12px; background: transparent; border: 1px solid var(--border-lt); border-radius: 11px; padding: 10px 13px; color: var(--text); box-shadow: 0 3px 12px rgba(0,0,0,.25); }
.apconn__name { font-weight: 600; color: var(--text); }
.apconn__name small { color: var(--text-dim); }
.apconn__ok { color: var(--green); font-size: 12.5px; font-weight: 700; }
.apconn .btn { margin-left: auto; }
.apconn__av { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; flex: none; }
.apconn__badge { display: inline-grid; place-items: center; margin-left: 2px; }
/* ===== Auto-post v2 (Post-Bridge tarzı, sıkışık olmayan layout) ===== */
.apbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 8px; }
.aphead { font-size: 24px; font-weight: 800; }
.apcompose { display: grid; grid-template-columns: minmax(0,1fr) 420px; gap: 18px; align-items: start; }
@media (max-width: 980px) { .apcompose { grid-template-columns: 1fr; } .apside { position: static !important; } }
.apmain { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.apside { display: flex; flex-direction: column; gap: 16px; position: sticky; top: 16px; }
.apcard { background: var(--bg-card); border: 1px solid var(--border); border-radius: 16px; padding: 16px 18px; }
.apcard__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.apcard__head h4 { font-size: 15px; font-weight: 700; }
.apcard__hint { font-size: 12px; color: var(--text-dim); }
.apavatars { display: flex; flex-wrap: wrap; gap: 10px; }
.apav { position: relative; display: flex; flex-direction: column; align-items: center; gap: 5px; width: 78px; padding: 10px 6px; background: var(--bg-soft); border: 1.5px solid var(--border); border-radius: 12px; cursor: pointer; color: var(--text-mute); transition: border-color .15s, background .15s, color .15s; }
.apav:hover { border-color: var(--border-lt); }
.apav.is-on { border-color: var(--violet); background: rgba(105,101,219,.12); color: #fff; }
.apav__ic { width: 30px; height: 30px; border-radius: 50%; background: var(--bg-elev); display: grid; place-items: center; font-size: 14px; font-weight: 800; }
.apav.is-on .apav__ic { background: var(--violet); color: #fff; }
.apav__nm { font-size: 11px; font-weight: 600; }
.apav__dot { position: absolute; top: 7px; right: 7px; width: 8px; height: 8px; border-radius: 50%; background: var(--green); border: 2px solid var(--bg-card); }
.apmedia { display: flex; align-items: center; gap: 12px; padding: 13px 16px; border: 1.5px dashed var(--border-lt); border-radius: 12px; color: var(--text-dim); font-size: 13.5px; margin-bottom: 12px; }
.apmedia__icon { font-size: 22px; line-height: 0; color: var(--violet-light); }
.apmedia__icon svg { display: block; margin: 0 auto; }
.apmedia__grid { max-height: 340px; overflow-y: auto; padding: 2px; }
/* Compose (wizard): alttaki boşluk ölmesin — grid viewport'a göre uzar (~15px pay) */
.composex .apmedia__grid { max-height: max(340px, calc(100vh - 520px)); max-height: max(340px, calc(100svh - 520px)); }
.appick__tick { position: absolute; top: 6px; right: 6px; z-index: 2; width: 22px; height: 22px; border-radius: 50%; background: var(--violet); color: #fff; display: grid; place-items: center; font-size: 12px; font-weight: 800; }
/* "Scheduled" rozeti — zaten planlanmış videoyu ikinci kez schedule etmeyi önler */
.appick__sched { position: absolute; top: 6px; right: 6px; z-index: 2; font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: #efeeff; background: rgba(105,101,219,.9); padding: 3px 8px; border-radius: 999px; pointer-events: none; box-shadow: 0 2px 8px rgba(0,0,0,.4); }
.appick.is-sel .appick__sched { top: 33px; } /* seçim tiki üstteyken altına kay */
.apsched__row { display: flex; gap: 8px; margin-bottom: 8px; }
/* Custom time picker (native yerine) */
.tpick { position: relative; flex: 1; min-width: 0; }
.tpick__btn { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; cursor: pointer; color: var(--text); }
.tpick__val { font-variant-numeric: tabular-nums; font-weight: 600; }
.tpick__btn > svg { flex: 0 0 auto; color: var(--text-mute); }
/* AŞAĞI açılır: yukarı açıldığında Publish adımının üstüne taşıp ekran dışında
kalıyor ve tıklanamıyordu. z-index yüksek → hiçbir kartın/komşunun altında kalmaz
(modal içindeyken de modalin kendi stacking context'i sınırladığı için güvenli). */
.tpick__pop {
position: absolute; z-index: 900; left: 0; right: 0; top: calc(100% + 6px);
min-width: 208px; /* dar alanda (manuel satırlar) saat/dakika sütunları sıkışmasın */
background: var(--bg-card); border: 1px solid var(--border-lt); border-radius: 14px;
box-shadow: var(--shadow-lg); padding: 8px;
opacity: 0; transform: translateY(-6px); transition: opacity .14s ease, transform .14s ease;
}
.tpick__pop.is-open { opacity: 1; transform: none; }
.tpick__pop[hidden] { display: none; }
.tpick__cols { display: flex; align-items: stretch; gap: 4px; }
.tpick__col {
flex: 1 1 0; display: flex; flex-direction: column; gap: 2px; padding: 2px;
max-height: 216px; overflow-y: auto; scroll-snap-type: y proximity; scrollbar-width: thin;
}
.tpick__sep { align-self: center; font-weight: 800; font-size: 18px; color: var(--text-dim); }
.tpick__opt {
scroll-snap-align: center; text-align: center; padding: 10px 6px; border-radius: 10px;
background: transparent; border: 0; color: var(--text-mute); font-family: inherit;
font-size: 15px; font-weight: 700; cursor: pointer; font-variant-numeric: tabular-nums;
transition: background .12s, color .12s;
}
.tpick__opt:hover { background: var(--bg-elev); color: var(--text); }
.tpick__opt.is-sel { background: var(--violet); color: #fff; }
.tpick__opt.is-off { opacity: .28; cursor: not-allowed; pointer-events: none; }
/* AM/PM ipuçları (ABD'li kullanıcılar için) — değer 24s kalır, bunlar salt gösterim */
.tpick__val small { margin-left: 7px; font-size: 11px; font-weight: 600; color: var(--text-dim); font-variant-numeric: tabular-nums; }
.tpick__opt small { display: block; margin-top: 1px; font-size: 9.5px; font-weight: 700; color: var(--text-dim); letter-spacing: .02em; }
.tpick__opt.is-sel small { color: rgba(255, 255, 255, .8); }
.tpick__m .tpick__opt { align-self: stretch; }
@media (max-width: 560px) {
.tpick__col { max-height: 44vh; max-height: 44svh; }
.tpick__opt { padding: 12px 6px; font-size: 16px; }
}
/* Custom date picker (native yerine) */
.dpick { position: relative; flex: 1; min-width: 0; }
.dpick__btn { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; cursor: pointer; color: var(--text); }
.dpick__val { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dpick__btn > svg { flex: 0 0 auto; color: var(--text-mute); }
.dpick__pop {
position: absolute; z-index: 900; left: 0; top: calc(100% + 6px); width: 292px; max-width: 88vw;
background: var(--bg-card); border: 1px solid var(--border-lt); border-radius: 16px;
box-shadow: var(--shadow-lg); padding: 12px;
opacity: 0; transform: translateY(-6px); transition: opacity .14s ease, transform .14s ease;
}
.dpick__pop.is-open { opacity: 1; transform: none; }
.dpick__pop[hidden] { display: none; }
.dpick__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.dpick__title { font-weight: 800; font-size: 14.5px; color: var(--text); }
.dpick__nav {
width: 30px; height: 30px; display: grid; place-items: center; border-radius: 9px;
background: var(--bg-soft); border: 1px solid var(--border); color: var(--text-mute);
font-size: 18px; line-height: 1; cursor: pointer; transition: background .12s, color .12s;
}
.dpick__nav:hover { background: var(--bg-elev); color: var(--text); }
.dpick__wd { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; margin-bottom: 4px; }
.dpick__wd span { text-align: center; font-size: 10.5px; font-weight: 700; color: var(--text-dim); text-transform: uppercase; letter-spacing: .04em; }
.dpick__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.dpick__cell {
aspect-ratio: 1 / 1; display: grid; place-items: center; border-radius: 9px;
background: transparent; border: 0; color: var(--text); font-family: inherit;
font-size: 13px; font-weight: 600; cursor: pointer; font-variant-numeric: tabular-nums;
transition: background .12s, color .12s;
}
.dpick__cell.is-empty { pointer-events: none; }
.dpick__cell:hover:not(:disabled) { background: var(--bg-elev); }
.dpick__cell.is-today { box-shadow: inset 0 0 0 1.5px var(--border-lt); }
.dpick__cell.is-sel { background: var(--violet); color: #fff; box-shadow: none; }
.dpick__cell:disabled { color: var(--text-dim); opacity: .4; cursor: default; }
.dpick__foot { display: flex; justify-content: flex-end; margin-top: 8px; }
.dpick__today { background: none; border: 0; color: var(--violet-light); font-weight: 700; font-size: 12.5px; cursor: pointer; padding: 4px 8px; border-radius: 8px; }
.dpick__today:hover { background: var(--bg-elev); }
@media (max-width: 560px) {
.dpick__pop { width: 300px; }
.dpick__cell { font-size: 14px; }
}
/* NOT: aşağı açılma artık VARSAYILAN (yukarıdaki .tpick__pop/.dpick__pop) —
buradaki eski .pedit__field istisnasına gerek kalmadı.
Manuel satırlarda tarih/saat alanı satırın SAĞ ucunda: 292px'lik takvim sola
çapalanırsa sağdan taşar → o satırlarda sağ kenara çapala (min-width sayesinde
dar butonda bile popup sola doğru genişler, saat sütunları sıkışmaz). */
.apmanrow .dpick__pop, .apmanrow .tpick__pop { left: auto; right: 0; }
.apsched__hint { font-size: 12px; color: var(--text-dim); margin-bottom: 12px; }
.apsched__note { font-size: 12px; color: var(--green); margin-top: 10px; }
.apswitch { position: relative; display: inline-block; width: 42px; height: 24px; flex: none; }
.apswitch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.apswitch__track { position: absolute; inset: 0; background: var(--bg-elev); border: 1px solid var(--border); border-radius: 999px; transition: background .15s; pointer-events: none; }
.apswitch__track::before { content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform .18s; }
.apswitch input:checked + .apswitch__track { background: var(--violet); border-color: var(--violet); }
.apswitch input:checked + .apswitch__track::before { transform: translateX(18px); }
/* ---- Preview phone (big, TikTok/Instagram chrome) ---- */
.appreview-card { position: sticky; top: 16px; }
.apphone { position: relative; aspect-ratio: 9/16; width: 100%; max-width: 360px; margin: 4px auto 0; background: #000; border-radius: 22px; overflow: hidden; border: 3px solid #111; box-shadow: 0 18px 50px rgba(0,0,0,.45); }
.apphone video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #000; display: block; }
.apphone__chrome { position: absolute; inset: 0; pointer-events: none; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.6); }
.apphone__top { position: absolute; top: 12px; left: 12px; right: 12px; font-weight: 700; font-size: 13px; }
.apphone__right { position: absolute; right: 10px; bottom: 90px; display: flex; flex-direction: column; align-items: center; gap: 16px; font-size: 22px; }
.apphone__right .apphone__av { width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(135deg,#6965db,#a78bfa); border: 2px solid #fff; }
.apphone__right .apphone__disc { width: 30px; height: 30px; border-radius: 50%; background: radial-gradient(circle,#333 30%,#000 32%); border: 2px solid #555; }
.apphone__bottom { position: absolute; left: 12px; right: 56px; bottom: 16px; }
.apphone__h { font-weight: 800; font-size: 14px; margin-bottom: 4px; }
.apphone__cap { font-size: 12.5px; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.apphone--instagram .apphone__right { bottom: 70px; }
.apphone__empty { aspect-ratio: 9/16; max-width: 360px; margin: 4px auto 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-align: center; background: var(--bg-soft); border: 1px dashed var(--border-lt); border-radius: 18px; color: var(--text-dim); padding: 22px; }
.apphone__empty span { font-size: 34px; }
.apphone__empty p { font-size: 13px; max-width: 230px; }
/* ---- Selected videos strip ---- */
.apsel { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px,1fr)); gap: 8px; margin-top: 12px; }
.apsel:empty { display: none; }
.apselbox { position: relative; aspect-ratio: 9/16; border-radius: 9px; overflow: hidden; background: #000; border: 1px solid var(--border); }
.apselbox video { width: 100%; height: 100%; object-fit: cover; }
.apselbox__n { position: absolute; top: 3px; left: 4px; font-size: 10px; font-weight: 800; color: #fff; background: rgba(0,0,0,.55); border-radius: 5px; padding: 1px 5px; }
.apselbox__x { position: absolute; top: 3px; right: 3px; width: 18px; height: 18px; border-radius: 5px; border: 0; background: rgba(0,0,0,.6); color: #fff; font-size: 10px; cursor: pointer; line-height: 1; }
.apselbox__x:hover { background: #d6334e; }
/* ---- Per-video caption blocks ---- */
.apcapblock { margin-bottom: 12px; }
.apcapblock__h { font-size: 12.5px; font-weight: 700; margin-bottom: 5px; color: var(--text); }
.apcapblock__h small { color: var(--text-dim); font-weight: 500; margin-left: 6px; }
/* ---- Bulk schedule fields ---- */
.apfield { display: block; margin-bottom: 10px; }
.apfield > span:first-child { display: block; font-size: 12px; color: var(--text-dim); font-weight: 600; margin-bottom: 4px; }
.apmanrow { display: grid; grid-template-columns: 64px 1fr 1fr; gap: 8px; align-items: center; margin-bottom: 7px; }
.apmanrow__n { font-size: 12px; font-weight: 700; color: var(--text-mute); }
/* ---- Compose: sağ kolon TAMAMEN SABİT (kaymaz). Sadece sol kolon kayar. ---- */
/* SOL: içerik kendi içinde kayar; Schedule en altta SABİT (kaymaz). */
.composeleft { overflow: visible !important; gap: 0 !important; }
.composeleft__scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 13px; padding-right: 6px; }
.composeleft__scroll::-webkit-scrollbar { width: 8px; }
.composeleft__scroll::-webkit-scrollbar-thumb { background: var(--border-lt); border-radius: 99px; }
.composeleft__scroll::-webkit-scrollbar-track { background: transparent; }
.composeleft .apsched--fixed { flex: none; margin-top: 12px; }
/* SAĞ: altında render butonu YOK → preview'e biraz daha yükseklik ver AMA viewport'a bağlı
(içerik yüksekliğine değil) → taşmaz, sola binmez. Talking head'e yakın, dolu görünür. */
.composeright { --ph: calc(100vh - 230px); --ph: calc(100svh - 230px); }
/* sabit schedule — preview ile aynı genişlik (kolon) */
.apsched--fixed { flex: 0 0 auto; width: 100%; display: flex; flex-direction: column; background: var(--bg-card); border: 1px solid var(--border); border-radius: 14px; padding: 12px; }
.apsched--fixed.is-locked { opacity: .45; pointer-events: none; filter: grayscale(.3); }
.apsched--fixed .apcard__head { margin-bottom: 8px; }
.apsched--fixed .apsched__row { margin-bottom: 6px; }
.apsched--fixed .apsched__hint { margin-bottom: 6px; }
/* NOT: manuel liste ARTIK kaymıyor — tarih/saat popup'ı position:absolute olduğu
için scroll kabı onu kırpıyordu (bkz. aşağıdaki #bulkManual kuralı). */
.apsched__actions { flex: none; padding-top: 8px; }
/* "+ ekle" bloğu (seçili videoların yanında, aynı boyut) */
.apselbox--add { display: flex; align-items: center; justify-content: center; border: 1px dashed var(--border-lt); background: var(--bg-soft); color: var(--text-dim); font-size: 26px; font-weight: 300; cursor: pointer; }
.apselbox--add:hover { color: var(--violet-light); border-color: var(--violet); }
/* ---- Report bug (sidebar butonu + modal) ---- */
.sidebar__bug { width: 100%; background: none; border: 0; font: inherit; text-align: left; cursor: pointer; }
.bugmodal { position: fixed; inset: 0; z-index: 400; background: rgba(0,0,0,.55); display: flex; align-items: center; justify-content: center; padding: 20px; padding-top: max(20px, env(safe-area-inset-top)); padding-bottom: max(20px, env(safe-area-inset-bottom)); }
.bugmodal[hidden] { display: none; }
.bugmodal__box { width: 100%; max-width: 440px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 16px; padding: 20px; box-shadow: var(--shadow-lg); }
.bugmodal__box h3 { margin: 0 0 4px; font-size: 18px; }
.bugmodal__hint { font-size: 13px; color: var(--text-dim); margin: 0 0 12px; }
.bugmodal textarea { width: 100%; background: var(--bg-soft); border: 1px solid var(--border); border-radius: 10px; color: var(--text); font-family: inherit; font-size: 14px; padding: 10px 12px; resize: vertical; }
.bugmodal textarea:focus { outline: none; border-color: var(--violet); }
.bugmodal__file { display: inline-block; margin: 10px 0; cursor: pointer; font-size: 13px; color: var(--violet-light); }
.bugmodal__err { color: #ff9aa6; font-size: 12.5px; margin: 6px 0 0; }
.bugmodal__row { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }
/* ---- Notifications (zil + panel) ---- */
.notifbell { position: relative; background: none; border: 0; color: var(--text-mute); cursor: pointer; padding: 6px; border-radius: 8px; display: inline-grid; place-items: center; }
.notifbell:hover { color: var(--text); background: var(--bg-elev); }
.notifbell__dot { position: absolute; top: 3px; right: 3px; width: 9px; height: 9px; border-radius: 50%; background: var(--red, #e03131); border: 2px solid var(--bg, #121212); }
/* Token / kredi çipi (appbar sağ, bildirimin solunda) */
.tokenchip { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px 8px 12px; border-radius: 999px; background: var(--bg-elev); border: 1px solid var(--border-lt); color: var(--text); font-weight: 700; font-size: 16px; line-height: 1; text-decoration: none; transition: background .15s, border-color .15s, box-shadow .15s; white-space: nowrap; }
.tokenchip:hover { border-color: var(--violet); background: rgba(105,101,219,.16); box-shadow: 0 0 0 3px rgba(105,101,219,.12); }
.tokenchip__ic { flex: none; display: block; }
.tokenchip__n { font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
@media (max-width: 820px) {
.tokenchip { padding: 7px 13px 7px 10px; font-size: 15px; gap: 7px; }
}
.notifpanel { position: fixed; z-index: 400; width: 340px; max-width: 92vw; max-height: 70vh; max-height: 70svh; overflow: hidden; background: var(--bg-card); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow-lg); display: flex; flex-direction: column; }
.notifpanel[hidden] { display: none; }
.notifpanel__head { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border-bottom: 1px solid var(--border); font-weight: 700; font-size: 14px; }
/* font-family: inherit → buton varsayılan olarak Arial'a düşüyordu */
.notifpanel__clear { background: none; border: 0; color: var(--violet-light); font-family: inherit; font-size: 12px; font-weight: 700; cursor: pointer; padding: 4px 6px; border-radius: 7px; }
.notifpanel__clear:hover { background: rgba(105,101,219,.16); }
/* ~4.5 bildirim görünür; yarım kalan kasıtlı (aşağı kaydırılabilir sinyali) */
.notifpanel__list { overflow-y: auto; max-height: 333px; overscroll-behavior: contain; }
.notifempty { padding: 26px 14px; text-align: center; color: var(--text-dim); font-size: 13px; }
/* Satır düzeni: [ikon] [başlık + zaman / gövde] [sil].
Eskiden ikon 30px'ti ve içindeki glif 14px — ne olduğu okunmuyordu; zaman en
altta tam tarih olarak yer kaplıyordu; sil butonu başlığın üstüne biniyordu. */
.notifitem { position: relative; display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; align-items: start; gap: 12px; padding: 12px 14px; border-bottom: 1px solid var(--border); }
.notifitem.is-unread { background: rgba(105,101,219,.08); }
.notifitem__c { min-width: 0; }
.notifitem__top { display: flex; align-items: baseline; gap: 8px; }
/* Sol ikon dairesi: MM logosu / platform logosu / araç / posting / genel */
.notifitem__ic { flex: none; width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; color: #fff; overflow: hidden; }
.notifitem__ic svg { display: block; }
.notifitem__ic--mm { background: #0d1526; border: 1px solid rgba(255,255,255,.12); }
.notifitem__ic--mm img { border-radius: 4px; display: block; }
.notifitem__ic--tool { background: rgba(105,101,219,.18); color: var(--violet-light); }
.notifitem__ic--post { background: rgba(34,139,230,.18); color: #74c0fc; }
.notifitem__ic--gen { background: var(--bg-elev); color: var(--text-mute); }
.notifitem__ic--ref { background: rgba(105, 101, 219, .18); color: var(--violet-light); }
/* Hover'da beliren silme butonu */
/* Sil: artık akışın içinde, dikeyde ortalı — başlığın üstüne binmiyor */
/* HER ZAMAN görünür: hover'da belirince satırların sağı boş/dengesiz duruyordu.
Sönük durur, üstüne gelince kırmızıya döner. */
.notifitem__del { align-self: center; width: 30px; height: 30px; display: grid; place-items: center; background: none; border: 0; border-radius: 9px; color: var(--text-dim); opacity: .45; cursor: pointer; transition: opacity .12s ease, background .12s ease, color .12s ease; }
.notifitem:hover .notifitem__del { opacity: .8; }
.notifitem__del:hover { opacity: 1; background: rgba(224,49,49,.16); color: #ff8585; }
.notifitem__del svg { display: block; }
.notifitem__t { flex: 1; min-width: 0; font-size: 13.5px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Gövde 2 satırda kesilir — uzun mesajlar paneli şişirmesin */
.notifitem__b { font-size: 12.5px; color: var(--text-mute); margin-top: 3px; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.notifitem__d { flex: none; font-size: 10.5px; font-weight: 600; color: var(--text-dim); white-space: nowrap; }
.notifitem--error .notifitem__t { color: #ff9aa6; }
.notifitem--success .notifitem__t { color: #9ff0a9; }
/* ---- Paywall (tam ekran temiz plan sayfası) ---- */
.paywall-body { overflow-y: auto; }
.paywall-body.app-loading .pwtop, .paywall-body.app-loading .paywall { visibility: hidden; }
.pwbg { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.pwbg span { position: absolute; border-radius: 50%; filter: blur(95px); }
.pwbg span:nth-child(1) { width: 460px; height: 460px; background: var(--violet); top: -130px; left: -110px; opacity: .32; }
.pwbg span:nth-child(2) { width: 540px; height: 540px; background: #1971c2; bottom: -180px; right: -130px; opacity: .22; }
.pwbg span:nth-child(3) { width: 380px; height: 380px; background: #a78bfa; top: 38%; left: 56%; opacity: .15; }
.pwtop { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; padding: 12px 28px; }
.pwtop__right { display: flex; gap: 10px; align-items: center; }
.paywall { position: relative; z-index: 1; max-width: 1080px; margin: 0 auto; padding: 6px 22px 36px; text-align: center; }
.paywall__head { max-width: 660px; margin: 0 auto 14px; }
.paywall__head .eyebrow { display: inline-block; font-size: 12px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--violet-light); margin-bottom: 6px; }
.paywall__head h1 { font-size: 32px; font-weight: 900; letter-spacing: -.02em; margin: 0; }
.paywall__head p { color: var(--text-mute); font-size: 15.5px; line-height: 1.6; margin: 0; }
.paywall__plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; align-items: stretch; text-align: left; }
.paywall__plans[hidden] { display: none; } /* aile seçici: display:grid, hidden'ı ezmesin */
.pwplan { position: relative; background: var(--bg-card); border: 1px solid var(--border); border-radius: 18px; padding: 18px 20px; display: flex; flex-direction: column; gap: 9px; box-shadow: 0 12px 44px rgba(0,0,0,.32); }
.pwplan--featured { border-color: var(--violet); box-shadow: 0 18px 54px rgba(105,101,219,.28); transform: translateY(-6px); }
.pwplan__badge { position: absolute; top: -11px; left: 22px; background: var(--violet); color: #fff; font-size: 11px; font-weight: 800; padding: 4px 10px; border-radius: 999px; }
.pwplan__badge--alt { background: var(--bg-elev); color: var(--text-mute); border: 1px solid var(--border-lt); left: auto; right: 22px; }
.pwplan__name { font-size: 17px; font-weight: 800; margin: 0; }
.pwplan__price { font-size: 34px; font-weight: 900; letter-spacing: -.02em; }
.pwplan__price span { font-size: 14px; font-weight: 600; color: var(--text-dim); }
.pwplan__desc { color: var(--text-dim); font-size: 13px; margin: -6px 0 4px; }
.pwplan__feat { list-style: none; padding: 0; margin: 2px 0 8px; display: flex; flex-direction: column; gap: 6px; }
.pwplan__feat li { position: relative; padding-left: 24px; font-size: 13px; color: var(--text-mute); line-height: 1.4; }
.pwplan__feat li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--violet-light); font-weight: 800; }
.pwplan .btn { margin-top: auto; }
.paywall__note { color: var(--text-dim); font-size: 12.5px; margin-top: 14px; }
.paywall__note a { color: var(--violet-light); }
/* Referral kodu girişi (paywall — ilk abonelikten önce) */
.pwref { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.pwref__t { color: var(--text-mute); font-size: 13px; font-weight: 600; }
.pwref input { width: 150px; padding: 8px 12px; background: var(--bg-elev); border: 1px solid var(--border-lt); border-radius: 9px; color: var(--text); font: 600 13px/1.2 "SF Mono", ui-monospace, Menlo, Consolas, monospace; letter-spacing: 2px; text-transform: uppercase; text-align: center; }
.pwref input:focus { outline: none; border-color: var(--violet); }
.pwref__msg { font-size: 12.5px; color: var(--text-dim); }
.pwref__msg.is-err { color: #ff8585; font-weight: 600; }
.pwref.is-done .pwref__t { color: #69db7c; }
/* =========================================================
Settings — premium düzleştirme (.setx kapsamlı):
kutu kartlar yerine ince ayraçlarla akan şeffaf bölümler.
========================================================= */
.setx .settings { gap: 0; max-width: 720px; }
.setx .card-block { background: transparent; border: none; border-radius: 0; padding: 34px 2px; }
.setx .card-block:first-child { padding-top: 16px; }
.setx .card-block + .card-block { border-top: 1px solid var(--border); }
.setx .card-block h3 { font-size: 13.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--text-mute); margin-bottom: 18px; }
.setx .card-block--danger { border-top: 1px solid var(--border); }
.setx .card-block--danger h3 { color: #ff9aa6; }
.setx .field input { background: var(--bg-card); }
.setx .field input:focus { box-shadow: 0 0 0 3px rgba(105,101,219,.16); }
.setx .settings__row { padding: 14px 0; }
.setx .settings__row span { font-size: 14px; }
.setx .settings__row strong { font-size: 14px; font-weight: 700; }
.setx__hint { font-size: 12px; font-weight: 600; color: var(--text-dim); margin-top: 2px; }
/* Satır aksiyonları: kutu buton değil, link-stil metin (Compose'daki
"Manage accounts →" diliyle aynı) — Delete account kırmızı buton kalır. */
.setx .settings__row .btn--ghost { background: none; border: none; box-shadow: none; padding: 0; font-size: 13px; font-weight: 600; color: var(--violet-light); border-radius: 0; }
.setx .settings__row .btn--ghost:hover { background: none; text-decoration: underline; color: #a5a1ff; }
/* ===== Plans (paywall) — aylık/yıllık toggle + Basic/Pro/Max ===== */
/* Monthly/Yearly toggle — landing page ile aynı sekme/altçizgi stili (daha şık) */
/* Tek kontrol satırı: [aile hapı] | [Monthly/Yearly] — alt alta iki bar yok */
.pwctl { display: flex; align-items: center; justify-content: center; gap: 18px; flex-wrap: wrap; margin: 0 auto 22px; }
.pwctl__sep { width: 1px; height: 26px; background: var(--border-lt); }
.pwctl .pwtoggle { margin: 0; border-bottom: 0; }
.pwctl .pwtoggle button { padding: 10px 12px; }
.pwctl .pwtoggle button.is-active::after { bottom: 4px; }
.pwctl .pwfam { margin: 0; }
@media (max-width: 560px) { .pwctl { gap: 10px; } .pwctl__sep { display: none; } }
.pwtoggle { display: flex; justify-content: center; gap: 8px; width: fit-content; margin: 0 auto 40px; border-bottom: 1px solid var(--border); }
.pwtoggle button { position: relative; font-family: inherit; font-size: 15px; font-weight: 700; color: var(--text-mute); background: none; border: 0; padding: 10px 14px 15px; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; transition: color .15s; }
.pwtoggle button:hover { color: var(--text); }
.pwtoggle button.is-active { color: var(--text); }
.pwtoggle button.is-active::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: -1px; height: 2px; border-radius: 2px 2px 0 0; background: var(--violet); }
.pwtoggle__save { font-size: 11px; font-weight: 800; padding: 2px 8px; border-radius: 999px; background: rgba(47,158,68,.18); color: #69db7c; }
/* büyük tutar (price span override) */
.pwplan__price .pwplan__amt { font-size: 30px; font-weight: 900; color: var(--text); letter-spacing: -.02em; }
.pwplan__price .pwplan__cycle { font-size: 14px; font-weight: 600; color: var(--text-dim); margin-left: 3px; }
.pwplan__sub { color: var(--text-dim); font-size: 12.5px; margin: -4px 0 2px; }
.pwplan__credits { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--text-mute); padding-top: 11px; margin-top: 4px; border-top: 1px solid var(--border); }
.pwplan__credits strong { color: var(--text); font-weight: 800; }
.pwplan__coin { flex: none; }
.pwplan__inf { color: var(--violet-light); font-weight: 800; font-size: 15px; }
/* "Connect N social accounts" — önemli detay, mor vurgulu */
.pwplan__accts strong { color: #8b87ff; }
/* Kredi başına birim fiyat rozeti (· Xc/credit) */
.pwplan__percredit { color: var(--violet-light); font-weight: 700; font-size: 13px; }
.pwplan__percredit::before { content: "·"; margin: 0 6px; color: var(--text-dim); font-weight: 700; }
/* uzun rozetleri ortala (taşmasın) */
.pwplan__badge, .pwplan__badge--alt { left: 50%; right: auto; transform: translateX(-50%); white-space: nowrap; }
@media (max-width: 860px) {
.paywall__plans { grid-template-columns: 1fr; max-width: 430px; margin-left: auto; margin-right: auto; }
.pwplan--featured { transform: none; }
.paywall__head h1 { font-size: 30px; }
}
@media (max-width: 880px) {
.paywall__plans { grid-template-columns: 1fr; max-width: 420px; margin: 0 auto; }
.pwplan--featured { transform: none; }
.paywall__head h1 { font-size: 30px; }
}
@media (max-width: 980px) {
.composeright { width: auto; height: auto; overflow: visible; }
.composeright .phoneframe--lg { flex: none; }
.composeright .phoneframe { height: auto; width: 100%; max-width: 300px; margin: 0 auto; }
/* mobilde sol içerik normal akar; Schedule sabit değil, alta düşer */
.composeleft { overflow: visible !important; }
.composeleft__scroll { overflow: visible; min-height: 0; }
}
.applist { display: flex; flex-direction: column; gap: 10px; }
/* (eski #apList grid kuralı kaldırıldı — Posts artık .postsx__list kullanır) */
.appost { display: flex; flex-direction: column; gap: 10px; background: var(--bg-soft); border: 1px solid var(--border); border-radius: 16px; padding: 12px; position: relative; transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease; }
.appost:hover { transform: translateY(-2px); border-color: var(--border-lt); box-shadow: 0 12px 30px rgba(0,0,0,.4); }
.appost__head { display: flex; justify-content: space-between; font-size: 13px; color: var(--text-dim); font-weight: 600; padding-right: 26px; }
.appost__time { color: var(--text-mute); }
.appost__type { display: inline-flex; align-items: center; gap: 4px; align-self: flex-start; font-size: 11px; font-weight: 700; color: var(--text-mute); background: var(--bg-elev); border: 1px solid var(--border); border-radius: 6px; padding: 2px 7px; }
.appost__capwrap { background: var(--bg-elev); border: 1px solid var(--border); border-radius: 10px; padding: 8px 10px; display: flex; flex-direction: column; gap: 3px; }
.appost__caplbl { font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-mute); }
.appost__cap { font-size: 12.5px; color: var(--text); line-height: 1.4; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; margin: 0; }
.appost__capempty { color: var(--text-mute); font-style: italic; }
.appost__thumb { width: 100%; aspect-ratio: 4/5; border-radius: 12px; overflow: hidden; background: #000; cursor: pointer; position: relative; }
.appost__thumb video { width: 100%; height: 100%; object-fit: cover; }
.appost__thumb::after { content: "\25B6"; position: absolute; inset: 0; display: grid; place-items: center; color: rgba(255,255,255,.9); font-size: 30px; text-shadow: 0 2px 10px rgba(0,0,0,.7); pointer-events: none; opacity: 0; transition: opacity .15s ease; }
.appost:hover .appost__thumb::after { opacity: 1; }
.appost__foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 2px; }
.appost__plats { display: flex; flex-wrap: wrap; gap: 5px; }
.appost__plat { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; color: #fff; }
.appost__plat svg { width: 16px; height: 16px; fill: currentColor; display: block; }
.appost.is-highlight { box-shadow: 0 0 0 2px var(--violet), 0 0 22px rgba(123,118,240,.55); transition: box-shadow .3s; }
/* Yüklenen klip preview'ı üstünde loader (tüm edit tool'ları için ortak).
pointer-events:none → klip hazır olmadan tıklanamaz/slot'a eklenemez (bozuk render önlenir). */
.is-uploading { position: relative; pointer-events: none; }
.is-uploading::before { content: ""; position: absolute; inset: 0; z-index: 3; background: rgba(14,15,26,.58); border-radius: inherit; }
.is-uploading::after { content: ""; position: absolute; top: 50%; left: 50%; width: 22px; height: 22px; margin: -11px 0 0 -11px; border: 3px solid rgba(255,255,255,.3); border-top-color: #fff; border-radius: 50%; animation: spin .8s linear infinite; z-index: 4; }
.appost__badge { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; padding: 3px 9px; border-radius: 999px; }
.appost__badge.is-scheduled { background: rgba(105,101,219,.2); color: var(--violet-light); }
.appost__badge.is-draft { background: var(--bg-elev); color: var(--text-mute); }
.appost__badge.is-posted { background: rgba(62,224,111,.18); color: #9ff0a9; }
.appost__badge.is-failed { background: rgba(214,60,80,.2); color: #ff9aa6; }
.appost__x { position: absolute; top: 10px; right: 10px; background: rgba(0,0,0,.45); border: 1px solid var(--border); color: var(--text-mute); width: 25px; height: 25px; border-radius: 8px; cursor: pointer; font-size: 12px; line-height: 1; z-index: 2; transition: all .15s ease; }
.appost__x:hover { color: #fff; background: rgba(214,60,80,.28); border-color: rgba(214,60,80,.55); }
.apconn__ic { width: 34px; height: 34px; border-radius: 50%; background: #fdfdfd; display: grid; place-items: center; font-size: 13px; font-weight: 800; flex: none; box-shadow: 0 1px 4px rgba(0,0,0,.3); }
.apconn__no { font-size: 12.5px; color: var(--text-dim); }
/* Create post — bağlı hesap avatarları (profil + platform SVG rozeti) */
/* Kutusuz (frameless): sadece avatar + isim. Seçilince avatar violet ring + isim violet. */
.apacct { position: relative; display: flex; flex-direction: column; align-items: center; gap: 7px; width: 80px; padding: 4px 2px; background: none; border: 0; cursor: pointer; color: var(--text-mute); transition: color .15s; }
.apacct:hover { color: var(--text); }
.apacct.is-on { color: var(--violet-light); }
.apacct__pic { position: relative; width: 52px; height: 52px; transition: transform .14s; }
.apacct:hover .apacct__pic { transform: translateY(-2px); }
.apacct__pic img, .apacct__init { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; box-shadow: 0 0 0 2px transparent; transition: box-shadow .16s ease; }
.apacct__init { display: grid; place-items: center; background: var(--bg-elev); color: #fff; font-weight: 800; font-size: 19px; }
.apacct.is-on .apacct__pic img, .apacct.is-on .apacct__init { box-shadow: 0 0 0 3px var(--violet), 0 0 14px rgba(105,101,219,.45); }
.apacct__badge { position: absolute; right: -3px; bottom: -3px; width: 25px; height: 25px; border-radius: 50%; display: grid; place-items: center; color: #fff; border: 2.5px solid var(--bg-card); }
.apacct__badge svg { width: 15px; height: 15px; }
.apacct__nm { font-size: 11.5px; font-weight: 600; max-width: 78px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.apacct.is-on .apacct__nm { font-weight: 700; }
/* Günlük limit dolu: avatar kırmızı overlay + danger ikonu */
.apacct__danger {
position: absolute; inset: 0; border-radius: 50%;
display: grid; place-items: center;
background: rgba(224, 49, 49, .58); color: #fff;
}
.apacct__danger svg { width: 22px; height: 22px; }
.apacct--full .apacct__pic img, .apacct--full .apacct__init { box-shadow: 0 0 0 3px #e03131; }
.apacct--full.is-on .apacct__pic img, .apacct--full.is-on .apacct__init { box-shadow: 0 0 0 3px #e03131; }
.apacct--full .apacct__nm { color: #f0616b; }
.apnoacct { color: var(--text-dim); font-size: 13.5px; text-decoration: none; }
.apnoacct b { color: var(--violet-light); }
.apcard__link { font-size: 12px; color: var(--violet-light); text-decoration: none; }
.apcard__link:hover { text-decoration: underline; }
.apup { font-size: 13px; color: var(--text-mute); margin-top: 8px; }
/* Talking head — arka plan + sürüklenebilir kişi overlay'i */
#thBg { width: 100%; height: 100%; object-fit: cover; background: #000; display: block; }
#thResult { width: 100%; height: 100%; object-fit: contain; background: #000; }
.thoverlay { position: absolute; z-index: 3; cursor: move; touch-action: none; border-radius: 6px; overflow: visible; outline: 2px solid rgba(105,101,219,.85); box-shadow: 0 8px 24px rgba(0,0,0,.45); }
.thoverlay[hidden] { display: none; }
.thoverlay video, .thoverlay canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 6px; pointer-events: none; }
.thoverlay canvas { display: none; }
.thoverlay.is-live video { opacity: 0; }
.thoverlay.is-live canvas { display: block; }
.thoverlay__badge { position: absolute; left: 4px; bottom: 4px; display: inline-flex; align-items: center; gap: 4px; font-size: 9.5px; font-weight: 700; color: #fff; background: rgba(105,101,219,.9); padding: 2px 6px; border-radius: 5px; pointer-events: none; white-space: nowrap; }
.thresize { position: absolute; right: -7px; bottom: -7px; width: 16px; height: 16px; border-radius: 50%; background: var(--violet); border: 2px solid #fff; cursor: nwse-resize; touch-action: none; z-index: 4; }
/* ---- Randomizer v2: batch-havuzu UI (Emre'nin çizimi) ---- */
.batchcard { margin-bottom: 14px; border-radius: 18px; transition: border-color .2s, box-shadow .2s; }
.batchcard.is-over { border-color: var(--violet); box-shadow: 0 0 0 2px rgba(105,101,219,.35); }
/* blok boyutu EKRANA GÖRE ölçeklenir: her şey tek ekrana sığar */
.batchcard { --bch: clamp(124px, 19vh, 200px); margin-bottom: 10px; padding: 12px 16px; }
/* ---- "＋ Add clip" import dropdown (batch başlığı) ----
Video editörünün Import menüsünün (editor.css .edx-import__*) birebir görsel
eşi; burada .minibtn tetikleyicisiyle. YALNIZCA .rzimp altında geçerli —
başka hiçbir kural etkilenmez. */
.rzimp { position: relative; flex: 0 0 auto; }
.rzimp__btn { gap: 6px; }
.rzimp__chev { flex: none; opacity: .8; }
.rzimp__btn[aria-expanded="true"] { background: rgba(105,101,219,.26); }
.rzimp__menu { position: absolute; top: calc(100% + 5px); right: 0; z-index: 30; min-width: 194px; padding: 5px; background: var(--bg-card); border: 1px solid var(--border-lt); border-radius: 11px; box-shadow: var(--shadow); }
.rzimp__menu[hidden] { display: none; }
.rzimp__item { display: flex; align-items: center; justify-content: flex-start; gap: 9px; width: 100%; min-height: 34px; padding: 8px 9px; border: 0; border-radius: 8px; background: transparent; cursor: pointer; text-align: left; color: var(--text); font: inherit; font-size: 12.5px; font-weight: 500; line-height: 1.2; transition: background .13s ease, color .13s ease; }
.rzimp__item + .rzimp__item { margin-top: 2px; }
.rzimp__item svg { flex: none; color: var(--text-dim); }
.rzimp__item:hover { background: rgba(105,101,219,.14); color: var(--violet-light); }
.rzimp__item:hover svg { color: var(--violet-light); }
.rzimp__ico { flex: none; width: 15px; height: 15px; }
.rzimp__lbl { flex: 1 1 auto; min-width: 0; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Mix settings alt satırı: hesap SOL KÖŞEDE (yazı kadar), buton SAĞ KÖŞEDE */
.mixfoot { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 10px; }
.mixfoot .rncalc { flex: 0 1 auto; min-width: 0; margin-top: 0; }
.mixfoot .btn { flex: none; white-space: nowrap; }
@media (max-width: 760px) { .mixfoot { flex-direction: column; align-items: stretch; } }
.batchgrid { display: flex; gap: 10px; overflow-x: auto; padding: 4px 2px 8px; min-height: calc(var(--bch) + 14px); align-items: stretch; }
.batchgrid::-webkit-scrollbar { height: 8px; }
.batchgrid::-webkit-scrollbar-thumb { background: var(--border-lt); border-radius: 99px; }
.batchgrid__hint { display: grid; place-items: center; width: 100%; min-height: var(--bch); border: 1.5px dashed var(--border-lt); border-radius: 12px; color: var(--text-dim); font-size: 13px; text-align: center; padding: 8px 20px; }
.batchcell { position: relative; flex: none; width: calc(var(--bch) * 0.64); border: 1px solid var(--border-lt); border-radius: 11px; overflow: hidden; background: #000; }
.batchcell video { width: 100%; height: var(--bch); object-fit: cover; display: block; }
.batchcell__lbl { position: absolute; left: 5px; bottom: 5px; font-size: 10.5px; font-weight: 700; color: #fff; background: rgba(0,0,0,.65); padding: 2px 7px; border-radius: 6px; }
.batchcell__st { position: absolute; left: 5px; top: 5px; z-index: 3; display: grid; place-items: center; width: 20px; height: 20px; background: rgba(0,0,0,.65); border-radius: 7px; }
.batchcell__st.is-ok { color: #9ff0a9; }
.batchcell__st.is-err { color: #fff; background: #d63c50; }
/* Yükleme: köşedeki minik ok yerine klibin ORTASINDA mor ikon (nefes alır gibi).
Genel .is-uploading spinner'ı bu hücrelerde kapatılır, ikisi üst üste binmesin. */
.batchcell.is-uploading::after { display: none; }
.batchcell__up { position: absolute; inset: 0; z-index: 4; display: grid; place-items: center; color: var(--violet-light); animation: bcup 1.1s ease-in-out infinite; pointer-events: none; }
.batchcell__up svg { display: block; filter: drop-shadow(0 2px 8px rgba(0,0,0,.55)); }
@keyframes bcup { 0%, 100% { opacity: .55; transform: translateY(2px); } 50% { opacity: 1; transform: translateY(-2px); } }
.batchcell__st svg { display: block; }
/* YÜKLENEMEYEN KLİP: küçük bir uyarı ikonu fark edilmiyordu (kullanıcı "buton
çalışmıyor" diye destek açtı). Blok komple kırmızıya döner + sebep yazar +
tek tıkla yeniden dener. */
.batchcell.is-failed { border-color: #d63c50; box-shadow: 0 0 0 1px #d63c50 inset; }
.batchcell__fail { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; text-align: center; padding: 6px; background: rgba(84,18,26,.86); backdrop-filter: blur(1px); }
.batchcell__failic { color: #ff8f8f; line-height: 0; margin-bottom: 2px; }
.batchcell__fail b { font-size: 11.5px; font-weight: 800; color: #ffd7d7; }
.batchcell__fail small { font-size: 9.5px; font-weight: 600; color: rgba(255,215,215,.72); line-height: 1.3; }
.batchcell__retry { margin-top: 6px; padding: 4px 12px; border-radius: 999px; border: 1px solid rgba(255,255,255,.35); background: rgba(255,255,255,.12); color: #fff; font-family: inherit; font-size: 11px; font-weight: 800; cursor: pointer; }
.batchcell__retry:hover { background: rgba(255,255,255,.24); }
.rncalc.is-err { color: #ff9aa6; font-weight: 600; }
.batchcell__x { position: absolute; right: 3px; top: 3px; z-index: 5; background: rgba(0,0,0,.65); color: #fff; width: 22px; height: 22px; font-size: 11px; }
/* Silme butonu → hover'da KIRMIZI (yaptığı iş yıkıcı, beyaz nötr kalıyordu) */
.batchcell__x:hover { background: #d63c50; color: #fff; }
.batchcell.is-over { outline: 2px solid var(--violet); }
/* boş blok: tıkla-doldur (bilerek boş bırakılabilir → o pozisyon sabit) */
.batchcell--empty { background: rgba(105,101,219,.05); border: 1.5px dashed rgba(141,138,237,.55); cursor: pointer; display: grid; place-items: center; height: var(--bch); transition: border-color .15s, background .15s; }
.batchcell--empty:hover { border-color: var(--violet); background: rgba(105,101,219,.12); }
.batchcell__plus { font-size: 28px; color: var(--violet-light); line-height: 1; }
.batchcell__note { position: absolute; top: 50%; left: 0; right: 0; margin-top: 18px; text-align: center; font-size: 9px; color: var(--text-dim); letter-spacing: .02em; pointer-events: none; }
.batchcell--empty .batchcell__lbl { position: absolute; left: 5px; bottom: 5px; }
/* kısa ekranlarda daha da kompakt */
@media (max-height: 780px) {
.batchcard { --bch: clamp(104px, 15vh, 150px); }
.batchgrid__hint { font-size: 12px; }
}
/* color variation ⓘ */
.infodot { display: inline-grid; place-items: center; width: 20px; height: 20px; font-size: 12px; color: var(--violet-light); vertical-align: -3px; margin-left: 4px; }
.infodot:hover { background: rgba(105,101,219,.18); color: #fff; }
/* info popup: boş/sabit blok çizimleri */
.sk__cards i.is-empty { border-style: dotted; border-color: rgba(255,255,255,.28); color: var(--text-dim); background: transparent; display: grid; place-items: center; gap: 0; }
.sk__cards i.is-empty small { font-size: 8px; letter-spacing: .04em; }
.sk__mix i.is-fixed { border-style: solid; border-color: rgba(255,225,77,.7); color: #ffe14d; background: rgba(255,225,77,.07); }
.batchcell { cursor: grab; touch-action: none; }
.batchcell.is-swapping { opacity: .8; z-index: 10; cursor: grabbing; box-shadow: 0 10px 26px rgba(0,0,0,.5); }
/* ⓘ info popup — sayfalı, şematik */
.rnmodal { position: fixed; inset: 0; z-index: 400; display: grid; place-items: center; }
.rnmodal[hidden] { display: none; }
.rnmodal__back { position: absolute; inset: 0; background: rgba(0,0,0,.65); backdrop-filter: blur(3px); }
.rnmodal__box { position: relative; width: min(560px, 92vw); background: var(--bg-card); border: 1px solid var(--border-lt); border-radius: 20px; padding: 26px 26px 20px; box-shadow: var(--shadow-lg); animation: pmodal-in .18s ease; }
.rnmodal__x { position: absolute; right: 14px; top: 14px; width: 30px; height: 30px; display: grid; place-items: center; background: none; border: 1px solid transparent; border-radius: 9px; color: var(--text-mute); font-size: 14px; line-height: 1; cursor: pointer; }
.rnmodal__x:hover { background: var(--bg-elev); color: var(--text); }
.rnmodal__page h3 { font-size: 18px; font-weight: 800; margin-bottom: 8px; color: var(--violet-light); }
.rnmodal__page p { font-size: 14px; color: var(--text-mute); line-height: 1.55; margin-bottom: 16px; }
/* How it works: uzun paragraf yerine kısa, taranabilir maddeler */
.rnmodal__page p + ul { margin-top: -8px; }
.rnmodal__page ul { list-style: none; margin: 0 0 14px; padding: 0; }
.rnmodal__page li { position: relative; padding-left: 19px; font-size: 14px; color: var(--text-mute); line-height: 1.5; margin-bottom: 7px; }
.rnmodal__page li::before { content: ""; position: absolute; left: 5px; top: 8px; width: 5px; height: 5px; border-radius: 50%; background: var(--violet-light); }
.rnmodal__page .rnkey { display: inline-block; margin: 0 0 15px; padding: 7px 13px; border-radius: 9px; font-size: 13.5px; font-weight: 800; color: var(--violet-light); background: rgba(105,101,219,.12); border: 1px solid rgba(105,101,219,.28); }
.rnmodal__nav { display: flex; align-items: center; justify-content: space-between; margin-top: 18px; }
.rnmodal__dots { display: inline-flex; gap: 6px; }
.rnmodal__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--border-lt); }
.rnmodal__dot.is-on { background: var(--violet); }
/* el-çizimi hissi: kesikli kutular */
.sk { display: flex; flex-direction: column; gap: 12px; }
.sk__batch { border: 1.5px dashed var(--border-lt); border-radius: 14px; padding: 10px 12px; }
.sk__label { display: block; font-size: 11px; color: var(--text-dim); margin-bottom: 8px; letter-spacing: .04em; }
.sk__cards { display: flex; gap: 8px; }
.sk__cards i, .sk__mix i { font-style: normal; display: grid; place-items: center; align-content: center; gap: 2px; width: 56px; height: 74px; border: 1.5px dashed rgba(141,138,237,.7); border-radius: 9px; font-size: 11px; font-weight: 700; color: var(--text-mute); background: rgba(105,101,219,.06); flex: none; text-align: center; line-height: 1.2; padding: 3px; }
.sk__cards i small, .sk__mix i small { font-size: 8.5px; font-weight: 600; color: var(--text-dim); letter-spacing: .02em; }
.sk__mix { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-dim); }
.sk__mix span { width: 56px; flex: none; }
/* Uzun etiketler için: sabit 56px kartlar yerine satır sonunda alta kayan çipler
("temperature", "brightness" gibi kelimeler kutuya sığmayıp taşıyordu). */
.skchips { display: flex; flex-wrap: wrap; gap: 7px; }
.skchips i { font-style: normal; padding: 6px 11px; border-radius: 999px; border: 1.5px dashed rgba(141,138,237,.7); background: rgba(105,101,219,.06); font-size: 11.5px; font-weight: 700; color: var(--text-mute); }
/* Modal içi uyarı kutusu */
.rnmodal__page .rnwarn { margin: 2px 0 15px; padding: 9px 12px; border-radius: 10px; font-size: 13px; line-height: 1.5; color: #ffd98a; background: rgba(255,193,77,.10); border: 1px solid rgba(255,193,77,.32); }
.rnmodal__page .rnwarn b { color: #ffe6b0; }
/* ---- Randomizer ---- */
.rngrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
.rnitem { position: relative; background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; }
.rnitem video { width: 100%; aspect-ratio: 9/16; object-fit: cover; background: #000; display: block; }
.rnitem__poster, .rnitem__vid { width: 100%; aspect-ratio: 9/16; object-fit: cover; background: #000; display: block; }
/* Created videos — kullanım çubuğu + araç çubuğu + çoklu seçim */
.rdusage { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.rdusage__bar { flex: 1; height: 8px; background: var(--bg-soft); border: 1px solid var(--border); border-radius: 999px; overflow: hidden; }
.rdusage__bar i { display: block; height: 100%; width: 0; background: var(--grad-violet); border-radius: 999px; transition: width .3s; }
.rdusage__bar i.is-full { background: linear-gradient(90deg, #e0a23c, #d63c50); }
.rdusage__txt { font-size: 12.5px; color: var(--text-mute); white-space: nowrap; }
.rdtools { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.rdtools__all { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-mute); cursor: pointer; user-select: none; }
.rdtools__count { font-size: 12.5px; color: var(--violet-light); font-weight: 600; }
.rnitem.is-sel { outline: 2px solid var(--violet); outline-offset: 1px; }
.rnitem__check { position: absolute; top: 8px; left: 8px; z-index: 3; cursor: pointer; line-height: 0; user-select: none; } /* shift+click'te metin seçimi olmasın */
/* özel checkbox — beyaz kare yerine site temasında kutu + mor ✓ */
.rnitem__check input, .rdtools__all input {
-webkit-appearance: none; appearance: none; margin: 0; flex: none; cursor: pointer;
width: 19px; height: 19px; border-radius: 6px; border: 1.5px solid var(--border-lt);
background: rgba(20,20,22,.75); position: relative; transition: background .12s, border-color .12s;
}
.rnitem__check input { box-shadow: 0 1px 4px rgba(0,0,0,.4); }
.rnitem__check input:hover, .rdtools__all input:hover { border-color: var(--violet); }
.rnitem__check input:checked, .rdtools__all input:checked { background: var(--violet); border-color: var(--violet); }
/* thumbnail yüklenirken spinner */
.rnitem__load { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); z-index: 2; width: 24px; height: 24px; border: 2.5px solid rgba(255,255,255,.18); border-top-color: var(--violet-light); border-radius: 50%; animation: rdspin .7s linear infinite; pointer-events: none; }
@keyframes rdspin { to { transform: translate(-50%,-50%) rotate(360deg); } }
/* video ÜSTÜNDE alt overlay: download + delete */
.rnitem__ov { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; display: flex; align-items: center; gap: 7px; padding: 8px; background: linear-gradient(transparent, rgba(0,0,0,.78)); }
.rnitem__dl { flex: 1; text-align: center; background: rgba(105,101,219,.95); color: #fff; font-size: 12px; font-weight: 700; padding: 7px 8px; border-radius: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rnitem__dl:hover { background: var(--violet-dark); }
.rnitem__del { flex: none; width: 32px; height: 32px; background: rgba(0,0,0,.5); border: 1px solid rgba(255,255,255,.2); color: #fff; border-radius: 8px; cursor: pointer; font-size: 13px; line-height: 1; }
.rnitem__del:hover { background: rgba(214,60,80,.9); border-color: rgba(214,60,80,.9); }
.rnitem__nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rnitem__check input:checked::after, .rdtools__all input:checked::after,
.rdtools__all input:indeterminate::after {
content: ""; position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-size: 12px; font-weight: 800;
}
/* seçili: tik ikonu maske ile çizilir (renk background-color'dan gelir).
indeterminate ("–") maskesiz kalır → aşağıdaki kural onu karakterle basar. */
.rnitem__check input:checked::after, .rdtools__all input:checked::after {
background-color: #fff;
-webkit-mask: no-repeat center / 12px 12px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21.7071 5.29289C22.0976 5.68342 22.0976 6.31658 21.7071 6.70711L9.70711 18.7071C9.31658 19.0976 8.68342 19.0976 8.29289 18.7071L2.29289 12.7071C1.90237 12.3166 1.90237 11.6834 2.29289 11.2929C2.68342 10.9024 3.31658 10.9024 3.70711 11.2929L9 16.5858L20.2929 5.29289C20.6834 4.90237 21.3166 4.90237 21.7071 5.29289Z'/%3E%3C/svg%3E");
mask: no-repeat center / 12px 12px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21.7071 5.29289C22.0976 5.68342 22.0976 6.31658 21.7071 6.70711L9.70711 18.7071C9.31658 19.0976 8.68342 19.0976 8.29289 18.7071L2.29289 12.7071C1.90237 12.3166 1.90237 11.6834 2.29289 11.2929C2.68342 10.9024 3.31658 10.9024 3.70711 11.2929L9 16.5858L20.2929 5.29289C20.6834 4.90237 21.3166 4.90237 21.7071 5.29289Z'/%3E%3C/svg%3E");
}
.rdtools__all input:indeterminate { background: var(--violet); border-color: var(--violet); }
.rdtools__all input:indeterminate::after { content: "–"; }
/* compose video picker + created videos kaydırma çubuğu (site geneliyle uyumlu) */
.apmedia__grid::-webkit-scrollbar, .rngrid::-webkit-scrollbar { width: 8px; height: 8px; }
.apmedia__grid::-webkit-scrollbar-thumb, .rngrid::-webkit-scrollbar-thumb { background: var(--border-lt); border-radius: 99px; }
.apmedia__grid::-webkit-scrollbar-track, .rngrid::-webkit-scrollbar-track { background: transparent; }
.rnitem__bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px; font-size: 12px; color: var(--text-mute); }
.rnitem__bar > span:first-child { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rnitem__bar > span:last-child { flex: none; display: flex; gap: 6px; align-items: center; }
.rnitem__thumb { position: relative; cursor: pointer; }
.rnitem__thumb:hover .rnitem__play { background: rgba(105,101,219,.85); transform: translate(-50%,-50%) scale(1.06); }
.rnitem__play { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 44px; height: 44px; border-radius: 50%; background: rgba(0,0,0,.55); color: #fff; display: grid; place-items: center; font-size: 16px; padding-left: 3px; pointer-events: none; transition: background .15s, transform .15s; }
/* Lightbox — tıkla → büyük oynat */
.lightbox { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 20px; padding-top: max(20px, env(safe-area-inset-top)); padding-bottom: max(20px, env(safe-area-inset-bottom)); }
.lightbox[hidden] { display: none; }
.lightbox__back { position: absolute; inset: 0; background: rgba(0,0,0,.82); backdrop-filter: blur(4px); }
.lightbox__box { position: relative; z-index: 1; height: min(86vh, 920px); aspect-ratio: 9/16; max-width: 94vw; background: #000; border-radius: 14px; overflow: hidden; box-shadow: 0 30px 80px rgba(0,0,0,.6); }
.lightbox__box video { width: 100%; height: 100%; object-fit: contain; background: #000; display: block; }
.lightbox__x { position: absolute; top: 8px; right: 8px; z-index: 2; width: 34px; height: 34px; border-radius: 50%; border: none; background: rgba(0,0,0,.6); color: #fff; font-size: 15px; cursor: pointer; }
.lightbox__x:hover { background: rgba(105,101,219,.85); }
/* Global render bildirim popup'ları (sağ-alt) */
.rendernotes { position: fixed; right: 16px; bottom: 16px; right: calc(16px + env(safe-area-inset-right)); bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 300; display: flex; flex-direction: column; gap: 10px; max-width: 320px; }
.rendernote { position: relative; background: var(--bg-card); border: 1px solid var(--border-lt); border-left: 3px solid var(--green); border-radius: 12px; padding: 12px 34px 12px 14px; box-shadow: 0 14px 40px rgba(0,0,0,.5); animation: rnote-in .25s ease; }
.rendernote.is-error { border-left-color: #ff8585; }
.rendernote__t { font-size: 14px; font-weight: 700; }
.rendernote__m { font-size: 12px; color: var(--text-mute); margin-top: 4px; }
.rendernote__acts { display: flex; gap: 8px; margin-top: 10px; }
.rendernote__acts .btn { flex: 1; }
.rendernote__x { position: absolute; top: 8px; right: 8px; background: none; border: none; color: var(--text-dim); cursor: pointer; font-size: 13px; }
@keyframes rnote-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
/* Saved renders — klasör (çok videolu / randomizer) kartı rozeti */
.rnitem__count { position: absolute; top: 6px; left: 6px; z-index: 2; background: rgba(0,0,0,.72); color: #fff; font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 999px; pointer-events: none; }
.rncalc { font-size: 13px; color: var(--text-mute); padding: 9px 12px; background: var(--bg-soft); border: 1px solid var(--border); border-radius: 10px; line-height: 1.5; }
.rncalc strong { color: var(--violet-light); }
.sessionlist { display: flex; flex-direction: column; gap: 6px; margin-bottom: 9px; }
/* Dar ekran: sabit düzenden vazgeç, normal akışa dön */
@media (max-width: 980px) {
body.cap-page { overflow: auto; height: auto; }
.cap-page .layout { height: auto; }
.cap-page .content { overflow: visible; height: auto; }
.capwrap { height: auto; }
/* Editörler (Caption/Split/Talking head): mobilde önizleme ÜSTTE, kontroller ALTTA.
captop'ı düzleştirip (display:contents) capwrap akışına alıyoruz → order çalışır. */
.captop { display: contents; }
.capcol--right { --ph: 58vh; --ph: 58svh; order: 1; }
.tlbox { order: 2; } /* timeline (yalnızca Caption'da var) önizlemenin altında */
.capcol--left { overflow: visible; min-width: 0; padding-right: 0; order: 3; }
.phoneframe--lg, .capactions { width: min(100%, calc(58vh * 9 / 16)); width: min(100%, calc(58svh * 9 / 16)); margin: 0 auto; }
}
/* ===== Telefon (≤520px): grid'leri tek kolona/dolguya çek, yatay taşmayı önle ===== */
@media (max-width: 520px) {
.rngrid { grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); }
.rxboxes { grid-template-columns: 1fr; }
/* MOBİL — CapCut tarzı: kartlar YATAY şeritte kayar, dikeyde yer yemez.
Sürükleme mobilde zaten yok; kart altındaki butonlar tek dokunuşla atar. */
.binlist { display: flex; flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x mandatory; gap: 10px; padding-bottom: 6px; -webkit-overflow-scrolling: touch; }
.binlist .binitem { flex: 0 0 132px; scroll-snap-align: start; }
.binlist::-webkit-scrollbar { height: 6px; }
.binlist::-webkit-scrollbar-thumb { background: var(--border-lt); border-radius: 99px; }
.binrow.is-cards { display: block; }
.binrow.is-cards .binlist { margin-bottom: 10px; }
.binrow.is-cards .dropzone--clips { flex: none; width: 100%; min-height: 88px; }
.binitem__btns .minibtn { padding: 7px 6px; font-size: 11.5px; } /* dokunma hedefi büyüsün */
.apmanrow { grid-template-columns: 52px 1fr 1fr; gap: 6px; }
.apsel { grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); }
}
/* ===== Mobil: bildirim paneli ekrana sığsın + sıkışıklık azalt ===== */
@media (max-width: 560px) {
.notifpanel { left: 8px !important; right: 8px !important; width: auto !important; max-width: none !important; top: 60px !important; }
.aphead { font-size: 20px; }
.aphead__sub { font-size: 13px; }
.setcard { padding: 12px 13px; }
.cap-pagetitle { font-size: 18px; }
.appbar { padding: 0 12px; padding-left: max(12px, env(safe-area-inset-left)); padding-right: max(12px, env(safe-area-inset-right)); gap: 8px; }
.appbar__right { gap: 8px; }
/* Randomizer: batch sıralama açıklamasını gizle (sıkışmayı azaltır) */
.batchcard .setcard__opt { display: none; }
/* Repurposer başlığı: mobilde TEK SATIR — "mix & multiply" gizli, butonlar sağda */
.rephd { flex-wrap: nowrap; gap: 8px; align-items: center; }
.rephd .setcard__opt { display: none; }
.rephd__btns { margin-left: auto; flex: none; }
.rephd .minibtn { font-size: 12px; padding: 6px 9px; }
.rncalc { font-size: 12px; padding: 8px 10px; }
/* Calendar: ay hücreleri kompakt (dar ekranda uzun boş kutu yerine kare) */
.apcal__head, .apcal__grid { gap: 4px; }
.apcal__head span { font-size: 10px; letter-spacing: 0; }
.apcal__cell { min-height: 50px; padding: 4px; border-radius: 8px; gap: 2px; }
.apcal__day { font-size: 11px; }
.apcal__post { font-size: 9.5px; padding: 2px 4px; gap: 3px; }
.apcal__ic { width: 13px; height: 13px; }
.apcal__nav { font-size: 13px; gap: 6px; }
}
/* ============================================================
Connections — temiz "connection card" (Buffer hesabı + kanallar)
============================================================ */
.connwrap { display: grid; gap: 18px; }
.conncard {
position: relative;
background:
radial-gradient(130% 90% at 0% 0%, rgba(105,101,219,.10), transparent 55%),
var(--bg-card);
border: 1px solid var(--border);
border-radius: 18px;
box-shadow: inset 0 1px 0 rgba(255,255,255,.035), 0 14px 40px rgba(0,0,0,.30);
overflow: hidden;
transition: border-color .18s ease;
}
.conncard:hover { border-color: var(--border-lt); }
.conncard.is-connected {
background:
radial-gradient(130% 90% at 0% 0%, rgba(47,158,68,.10), transparent 55%),
var(--bg-card);
}
.conncard__head {
display: flex; align-items: center; justify-content: space-between; gap: 12px;
padding: 20px 24px;
}
.conncard__brand { display: flex; align-items: center; gap: 14px; min-width: 0; }
.conncard__logo {
display: inline-flex; align-items: center; justify-content: center;
width: 46px; height: 46px; border-radius: 13px; flex: 0 0 auto;
background: linear-gradient(140deg, #34a9ff 0%, #168eea 55%, #0f74c4 100%);
color: #fff; box-shadow: 0 8px 20px rgba(22,142,234,.38);
}
.conncard__logo svg { width: 23px; height: 23px; }
.conncard__titlewrap { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.conncard__title { font-weight: 800; font-size: 18px; color: var(--text); letter-spacing: -.015em; line-height: 1.15; }
.conncard__subttl { font-size: 12.5px; font-weight: 600; color: var(--text-dim); }
.conncard__status {
display: inline-flex; align-items: center; gap: 8px; flex: 0 0 auto;
font-size: 13px; font-weight: 700; padding: 7px 14px 7px 12px; border-radius: 999px;
}
.conncard__status::before {
content: ""; width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto;
}
.conncard__status.is-on { color: #3fcf6e; background: rgba(47,158,68,.13); border: 1px solid rgba(47,158,68,.32); }
.conncard__status.is-on::before { background: #3fcf6e; box-shadow: 0 0 0 3px rgba(63,207,110,.20); }
.conncard__status.is-off { color: var(--text-mute); background: var(--bg-elev); border: 1px solid var(--border); }
.conncard__status.is-off::before { background: var(--text-dim); }
.conncard__body { border-top: 1px solid var(--border); padding: 10px; }
/* --- Bağlanma (boş) ekranı --- */
.conncard__body--cta { padding: 22px 24px; }
.conncard__cta { display: flex; align-items: center; justify-content: space-between; gap: 26px; flex-wrap: wrap; }
.conncard__ctaleft { min-width: 0; flex: 1 1 320px; }
.conncard__ctatext { margin: 0; color: var(--text-mute); font-size: 14.5px; line-height: 1.55; max-width: 460px; }
.conncard__plats { display: flex; gap: 9px; margin-top: 15px; }
.conncard__plat {
width: 34px; height: 34px; border-radius: 10px; flex: 0 0 auto;
display: inline-flex; align-items: center; justify-content: center;
background: var(--bg-elev); border: 1px solid var(--border); transition: transform .14s, border-color .14s;
}
.conncard__plat:hover { transform: translateY(-2px); border-color: var(--border-lt); }
.conncard__ctabtn { flex: 0 0 auto; gap: 8px; }
.conncard__sub {
font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em;
color: var(--text-dim); padding: 14px 12px 7px;
}
.conncard__bodyhead {
display: flex; align-items: center; justify-content: space-between; gap: 12px;
padding: 8px 8px 4px;
}
.conncard__sub--inline { padding: 0 2px; }
.conncard__emptyrow {
display: flex; align-items: center; justify-content: space-between; gap: 18px;
padding: 10px 8px 10px 10px;
}
.conncard__empty { padding: 6px 0; color: var(--text-mute); font-size: 14px; line-height: 1.55; }
.conncard__empty--warn { color: #f0a93a; }
.conncard__emptyrow .connrow__btn { flex: 0 0 auto; }
.connrow__ok--warn { color: #f0a93a; background: rgba(240,140,0,.12); border-color: rgba(240,140,0,.30); }
/* Outstand: "Connect an account" satırı (açıklama + buton) */
.socadd {
display: flex; align-items: center; justify-content: space-between; gap: 18px;
padding: 8px 10px 8px; flex-wrap: wrap;
}
.socadd__txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1 1 300px; }
.socadd__ttl { font-weight: 700; font-size: 14.5px; color: var(--text); }
.socadd__sub { font-size: 12.5px; color: var(--text-dim); line-height: 1.45; }
.socadd__btn { flex: 0 0 auto; gap: 8px; }
.socadd__btn:disabled, .socadd__btn.is-locked { opacity: .45; cursor: not-allowed; box-shadow: none; filter: saturate(.7); }
/* Outstand: platform seçme modalı (ekran ortası) */
.socmodal { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; }
.socmodal[hidden] { display: none; }
.socmodal__backdrop {
position: absolute; inset: 0; background: rgba(0,0,0,.62);
-webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
opacity: 0; transition: opacity .18s ease;
}
.socmodal.is-open .socmodal__backdrop { opacity: 1; }
.socmodal__card {
position: relative; width: min(430px, 92vw); max-height: 82vh; overflow: auto;
background: var(--bg-card); border: 1px solid var(--border); border-radius: 18px;
box-shadow: var(--shadow-lg); padding: 8px;
transform: translateY(10px) scale(.98); opacity: 0; transition: transform .18s ease, opacity .18s ease;
}
.socmodal.is-open .socmodal__card { transform: none; opacity: 1; }
.socmodal__head { display: flex; align-items: center; justify-content: space-between; padding: 13px 13px 6px; }
.socmodal__title { font-weight: 800; font-size: 16px; color: var(--text); }
.socmodal__x { background: none; border: 0; color: var(--text-mute); font-size: 17px; cursor: pointer; padding: 4px 9px; border-radius: 8px; line-height: 1; }
.socmodal__x:hover { background: var(--bg-elev); color: var(--text); }
.socmodal__sub { font-size: 12.5px; color: var(--text-dim); padding: 0 13px 8px; line-height: 1.45; }
.socmodal__list { display: flex; flex-direction: column; gap: 2px; padding: 2px 4px 6px; }
.socmodal__row {
display: flex; align-items: center; gap: 13px; width: 100%; text-align: left; cursor: pointer;
padding: 11px 12px; border-radius: 12px; background: transparent; border: 1px solid transparent;
font-family: inherit; color: var(--text); transition: background .14s, border-color .14s;
}
.socmodal__row:hover { background: var(--bg-elev); border-color: var(--border); }
.socmodal__row .connrow__av { width: 36px; height: 36px; flex: 0 0 auto; }
.socmodal__name { font-weight: 700; font-size: 14.5px; flex: 1 1 auto; }
.socmodal__chev { width: 18px; height: 18px; color: var(--text-dim); flex: 0 0 auto; }
/* Saved captions modal — premium */
.apcard__actions { display: flex; gap: 8px; align-items: center; }
.socmodal__card--wide { width: min(580px, 94vw); }
/* Caption grupları (All / YouTube / Instagram / + New group) — chip barı */
.capmodal__grps { display: flex; flex-wrap: wrap; gap: 7px; padding: 2px 16px 12px; }
.capchip {
padding: 6px 13px; border-radius: 999px; border: 1px solid var(--border-lt);
background: none; color: var(--text-mute); font: 600 12.5px Onest, sans-serif;
cursor: pointer; transition: color .12s, border-color .12s, background .12s;
}
.capchip:hover { color: var(--text); border-color: var(--violet); }
.capchip.is-on { background: var(--violet); border-color: var(--violet); color: #fff; }
.capchip--new { color: var(--text-dim); border-style: dashed; }
.capchip__inp {
width: 130px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--violet);
background: var(--bg-soft); color: var(--text); font: 600 12.5px Onest, sans-serif;
}
.capchip__inp:focus { outline: none; box-shadow: 0 0 0 3px rgba(105,101,219,.2); }
.capmodal__tag {
display: inline-block; margin-right: 8px; padding: 2px 8px; border-radius: 999px;
background: rgba(105,101,219,.15); color: var(--violet-light);
font: 700 10px Onest, sans-serif; letter-spacing: .04em; text-transform: uppercase;
vertical-align: 1px;
}
.capmodal__add {
display: flex; gap: 10px; align-items: stretch; padding: 6px 16px 14px;
border-bottom: 1px solid var(--border); margin-bottom: 4px;
}
.capmodal__add .apta {
flex: 1 1 auto; min-height: 74px; resize: vertical;
background: var(--bg-soft); border: 1px solid var(--border); border-radius: 12px;
color: var(--text); font-family: inherit; font-size: 13.5px; line-height: 1.5; padding: 11px 13px;
}
.capmodal__add .apta:focus { outline: none; border-color: var(--violet); box-shadow: 0 0 0 3px rgba(105,101,219,.18); }
/* =========================================================
Posts — KART GRID (post-bridge tarzı, 20 Tem 2026 yeniden tasarımı)
========================================================= */
.pcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(252px, 1fr)); gap: 16px; }
.pcard {
display: flex; flex-direction: column;
background: var(--bg-card); border: 1px solid var(--border); border-radius: 16px;
overflow: hidden; cursor: pointer;
transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.pcard:hover { border-color: var(--border-lt); transform: translateY(-2px); box-shadow: 0 12px 32px rgba(0,0,0,.35); }
.pcard.is-highlight { border-color: var(--violet); box-shadow: 0 0 0 3px rgba(105,101,219,.35); }
.pcard__thumb { position: relative; height: 152px; background: #000; }
/* 9:16 video HER ZAMAN kırpılmadan görünür (contain) — hangi video olduğu net */
.pcard__thumb video { width: 100%; height: 100%; object-fit: contain; display: block; }
.pcard__thumb--none { display: grid; place-items: center; color: var(--text-dim); font: 500 12.5px Onest, sans-serif; background: var(--bg-elev); }
/* Thumbnail üstündeki durum pill'i: video üzerinde OKUNUR olsun — dolu zemin */
.pcard__st { position: absolute; top: 8px; right: 8px; box-shadow: 0 2px 10px rgba(0,0,0,.5); }
.pcard__st.is-posted { background: #2f9e44; color: #fff; }
.pcard__st.is-scheduled { background: var(--violet); color: #fff; }
.pcard__st.is-draft { background: #3a3d4d; color: #d6d8e4; }
.pcard__st.is-failed { background: #d63c50; color: #fff; }
/* Kart altı avatar dizisi: BİNDİRME YOK (net okunur), büyük avatar + büyük platform rozeti */
.pcard__acct { gap: 8px; }
.pcard__acct .prow__av, .pcard__acct .prow__avfall { width: 34px; height: 34px; }
/* Rozet: ÇİFT piksel boyutlar (18 kutu / 10 ikon) + display:block svg →
yarım piksel kayması olmaz, YT/IG ikonları tam merkezde oturur */
.pcard__acct .prow__pbadge { width: 18px; height: 18px; right: -4px; bottom: -4px; line-height: 0; }
.pcard__acct .prow__pbadge svg { width: 10px; height: 10px; display: block; }
.pcard__acct .prow__nick { margin-left: 2px; }
.pcard__meta { display: flex; align-items: center; gap: 12px; padding: 11px 14px 0; font: 600 12px Onest, sans-serif; color: var(--text-mute); }
.pcard__meta span { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.pcard__rel { margin-left: auto; color: var(--text-dim); font-weight: 500; }
.pcard__cap {
padding: 8px 14px 0; margin: 0; min-height: 39px;
font: 500 13px/1.5 Onest, sans-serif; color: var(--text-mute);
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.pcard__cap.is-empty { color: var(--text-dim); font-style: italic; }
.pcard__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px 13px; margin-top: auto; }
.pcard__acct { display: inline-flex; align-items: center; gap: 8px; min-width: 0; overflow: visible; } /* rozetler kırpılmasın */
.pcard__acct .prow__avwrap { position: relative; flex: none; width: 34px; height: 34px; } /* wrap = avatar boyutu → rozet TAM köşede */
.pcard__btn {
display: inline-flex; align-items: center; gap: 6px; flex: none;
padding: 8px 16px; border-radius: 999px; border: 1px solid var(--border-lt);
background: none; color: var(--text-mute); font: 700 12.5px Onest, sans-serif; cursor: pointer;
transition: color .12s, border-color .12s, background .12s;
}
.pcard__btn:hover { color: var(--text); border-color: var(--violet); }
.pcard__btn--edit { background: var(--violet); border-color: var(--violet); color: #fff; }
.pcard__btn--edit:hover { background: #5b57d1; color: #fff; }
/* Edit scheduled post modalı — post-bridge mantığı: platform sekmeli caption +
hesap seçimi. Sekmeler Posts'taki .ptabs görünümünü aynen kullanır. */
.socmodal__card--xl { width: min(680px, 94vw); max-height: 88vh; overflow-y: auto; }
/* flex-wrap: 8 platform bağlıyken (Main caption + 8 sekme) tek satıra sığmıyor;
sarmazsa kart overflow-y:auto olduğu için TÜM modal yatay kayardı. */
.pedit__tabs { margin: 2px 0 4px; flex-wrap: wrap; }
.pedit__tabs button { display: inline-flex; align-items: center; gap: 6px; }
.pedit__tabic { display: inline-grid; place-items: center; width: 19px; height: 19px; border-radius: 6px; background: var(--bg-elev); }
.pedit__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--violet-light); } /* bu platformda özel caption var */
.pedit__meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: -4px; }
.pedit__ovrnote { font: 500 11.5px Onest, sans-serif; color: var(--text-dim); }
.pedit__gap { flex: 1; }
/* Hesap seçim kutuları (platform başına) */
.pacc { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.pacc__box { border: 1px solid var(--border); border-radius: 12px; padding: 10px; }
/* Kutu başlığı: sekmelerle aynı sade dil — büyük harf YOK, renkli ikon YOK */
.pacc__hd { display: flex; align-items: center; gap: 7px; font: 700 12.5px Onest, sans-serif; color: var(--text-mute); margin-bottom: 8px; }
.pacc__pic { display: inline-grid; place-items: center; width: 19px; height: 19px; border-radius: 6px; background: var(--bg-elev); color: var(--text-mute); }
.pacc__row {
display: flex; align-items: center; gap: 9px; width: 100%; text-align: left;
padding: 7px 9px; margin-top: 4px; border-radius: 10px; border: 1px solid transparent;
background: none; color: var(--text); font: 600 12.5px Onest, sans-serif; cursor: pointer;
transition: background .12s, border-color .12s;
}
.pacc__row:hover { background: var(--bg-elev); }
.pacc__row.is-on { border-color: var(--violet); background: rgba(105,101,219,.12); }
.pacc__row img, .pacc__fall { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; flex: none; }
.pacc__fall { display: grid; place-items: center; background: var(--grad-violet); color: #fff; font: 800 11px Onest, sans-serif; }
.pacc__row span:last-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pedit { padding: 6px 16px 16px; display: flex; flex-direction: column; gap: 8px; }
.pedit__lbl { font: 700 11px Onest, sans-serif; letter-spacing: .06em; text-transform: uppercase; color: var(--text-dim); }
.pedit__ta {
min-height: 112px; resize: vertical;
background: var(--bg-soft); border: 1px solid var(--border); border-radius: 12px;
color: var(--text); font: 13.5px/1.5 Onest, sans-serif; padding: 11px 13px;
}
.pedit__ta:focus { outline: none; border-color: var(--violet); box-shadow: 0 0 0 3px rgba(105,101,219,.18); }
.pedit__cnt { align-self: flex-end; font: 600 11px Onest, sans-serif; color: var(--text-dim); margin-top: -4px; }
.pedit__row { display: flex; gap: 10px; }
/* Kaydetme overlay'i: modalın (ve arkasının) üstünde buzlu cam + spinner —
Outstand güncellemesi birkaç sn sürer, kullanıcı donma sanmasın */
.pedit__busy {
position: fixed; inset: 0; z-index: 1200; display: grid; place-items: center;
background: rgba(8,8,10,.45); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
animation: peBusyIn .15s ease;
}
@keyframes peBusyIn { from { opacity: 0; } }
.pedit__busy-box { display: flex; flex-direction: column; align-items: center; gap: 14px; font: 700 14px Onest, sans-serif; color: var(--text); }
.pedit__busy-spin { width: 34px; height: 34px; border: 3px solid var(--border-lt); border-top-color: var(--violet); border-radius: 50%; animation: pmspin .7s linear infinite; }
.pedit__field { flex: 1; display: flex; flex-direction: column; gap: 6px; }
.pedit__field .apinput { width: 100%; }
.pedit__hint { margin: 0; font: 500 12.5px Onest, sans-serif; color: var(--text-mute); }
.pedit__hint.is-err { color: #ff8585; font-weight: 600; }
.pedit__foot { display: flex; justify-content: flex-end; gap: 10px; margin-top: 4px; }
.pedit__foot .btn:disabled { opacity: .45; cursor: default; pointer-events: none; } /* değişiklik yokken Save sönük */
/* =========================================================
Posts — premium yeniden tasarım (tarih gruplu düz liste).
İlke: kutu-içinde-kutu YOK — tek yüzey, ince ayraçlar,
bol beyaz alan, sakin tipografi. (.appost* legacy'de kalır.)
========================================================= */
.postsx__top { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin: 10px 2px 6px; }
.postsx__title { font-size: 26px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; }
.postsx__sub { font-size: 13.5px; color: var(--text-mute); margin-top: 4px; }
.postsx__top .btn--primary { flex: none; }
.postsx__bar { position: sticky; top: 64px; z-index: 6; display: flex; align-items: center; justify-content: space-between; gap: 14px; margin: 14px 0 20px; padding-top: 6px; background: var(--bg); border-bottom: 1px solid var(--border); }
/* Sekmeler: alt-çizgili, sayaçlı (segment pill değil) */
.ptabs { display: flex; gap: 2px; margin-bottom: -1px; }
.ptabs button { position: relative; display: inline-flex; align-items: center; background: none; border: none; cursor: pointer; font-family: inherit; font-size: 13.5px; font-weight: 600; color: var(--text-mute); padding: 9px 13px 13px; transition: color .15s; }
.ptabs button:hover { color: var(--text); }
.ptabs button.is-active { color: var(--text); }
.ptabs button.is-active::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: 0; height: 2px; border-radius: 2px 2px 0 0; background: var(--violet); }
.ptabs__n { min-width: 20px; text-align: center; padding: 1px 7px; margin-left: 7px; font-size: 11px; font-weight: 700; color: var(--text-mute); background: var(--bg-elev); border-radius: 999px; }
.ptabs button.is-active .ptabs__n { background: rgba(105,101,219,.2); color: var(--violet-light); }
/* Kanal filtresi (sağda) */
.pchan { position: relative; flex: none; margin-bottom: 8px; }
.pchan__btn { display: inline-flex; align-items: center; gap: 8px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px; padding: 7px 11px; font-family: inherit; font-size: 13px; font-weight: 600; color: var(--text); cursor: pointer; transition: border-color .15s; }
.pchan__btn:hover { border-color: var(--border-lt); }
.pchan__btn svg { color: var(--text-mute); }
.pchan__av { width: 20px; height: 20px; border-radius: 50%; object-fit: cover; }
.pchan__panel { position: absolute; right: 0; top: calc(100% + 8px); width: 264px; max-height: 320px; overflow-y: auto; background: var(--bg-card); border: 1px solid var(--border-lt); border-radius: 14px; box-shadow: var(--shadow-lg); padding: 6px; z-index: 40; }
.pchan__item { display: flex; align-items: center; gap: 10px; width: 100%; background: none; border: none; text-align: left; padding: 8px 10px; border-radius: 9px; cursor: pointer; font-family: inherit; font-size: 13px; font-weight: 600; color: var(--text); }
.pchan__item:hover { background: var(--bg-elev); }
.pchan__item img { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; }
.pchan__tick { margin-left: auto; color: var(--violet-light); opacity: 0; }
.pchan__item.is-on .pchan__tick { opacity: 1; }
/* Tarih grupları — gün panosu: soldan sağa İLERİ akan 4 günlük kayan pencere */
.postsx__list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; align-items: start; padding-bottom: 48px; }
@media (max-width: 1200px) { .postsx__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pgroup__head { display: flex; align-items: center; gap: 10px; padding: 0 4px 10px; }
/* Gün kaydırma okları: kutusuz, geniş, MOR (New post butonuyla aynı vurgu) */
.pgroup__nav { flex: none; display: inline-flex; align-items: center; justify-content: center; background: none; border: none; padding: 0; margin: 0 2px; cursor: pointer; color: #7b76f0; transition: color .15s ease, transform .15s ease; }
.pgroup__nav:hover { color: #a5a1ff; transform: scale(1.18); }
.pgroup__nav svg { display: block; }
.pgroup__day { font-size: 14.5px; font-weight: 700; }
.pgroup__date { font-size: 12.5px; font-weight: 600; color: var(--text-dim); }
.pgroup__count { margin-left: auto; font-size: 12px; color: var(--text-dim); }
.pgroup__rows { background: var(--bg-card); border: 1px solid var(--border); border-radius: 16px; overflow: hidden; }
/* Kompakt post satırı — tamamı tıklanır, detay modalını açar */
.prow { display: grid; grid-template-columns: 78px 1fr 16px; align-items: center; column-gap: 12px; padding: 17px 15px; cursor: pointer; transition: background .12s ease; }
.prow + .prow { border-top: 1px solid var(--border); }
.prow:hover { background: rgba(255,255,255,.028); }
.prow.is-highlight { box-shadow: inset 0 0 0 2px var(--violet); }
.prow__time { font-size: 14px; font-weight: 700; letter-spacing: -0.01em; }
.prow__rel { font-size: 12px; font-weight: 600; color: var(--text-dim); margin-top: 2px; }
.prow__acct { display: flex; align-items: center; gap: 10px; min-width: 0; }
.prow__avwrap { position: relative; flex: none; width: 31px; height: 31px; }
.prow__av { width: 31px; height: 31px; border-radius: 50%; object-fit: cover; background: var(--bg-elev); display: block; }
.prow__avfall { width: 31px; height: 31px; border-radius: 50%; display: grid; place-items: center; background: var(--grad-violet); color: #fff; font-size: 12.5px; font-weight: 800; }
/* ÇİFT piksel: 16 kutu − 2×2 border = 12 iç alan, 8 ikon → her yönde 2px eşit pay */
.prow__pbadge { position: absolute; right: -4px; bottom: -4px; width: 16px; height: 16px; border-radius: 50%; display: grid; place-items: center; color: #fff; border: 2px solid var(--bg-card); line-height: 0; }
.prow__pbadge svg { width: 8px; height: 8px; display: block; }
.prow__nick { font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.prow__more { font-size: 11.5px; font-weight: 700; color: var(--text-dim); }
/* Durum noktası — cam/lens hissi (bombeli, hafif parlak) */
.pdot { justify-self: end; width: 11px; height: 11px; border-radius: 50%; position: relative; flex: none; }
.pdot::after { content: ""; position: absolute; left: 16%; top: 10%; width: 42%; height: 34%; border-radius: 50%; background: rgba(255,255,255,.8); filter: blur(.6px); }
.pdot--live { background: radial-gradient(circle at 35% 30%, #b9ffd0 0%, #34d26b 55%, #17743a 100%); box-shadow: 0 0 9px rgba(52,210,107,.6), inset 0 -1px 2px rgba(0,0,0,.4); }
.pdot--wait { background: radial-gradient(circle at 35% 30%, #ffd0d6 0%, #f0506e 55%, #8d1f34 100%); box-shadow: 0 0 9px rgba(240,80,110,.55), inset 0 -1px 2px rgba(0,0,0,.4); }
.pdot--draft { background: radial-gradient(circle at 35% 30%, #d9d9e0 0%, #8a8a95 55%, #4a4a52 100%); box-shadow: inset 0 -1px 2px rgba(0,0,0,.4); }
.pstatus { display: inline-flex; align-items: center; gap: 6px; font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; padding: 4px 10px; border-radius: 999px; white-space: nowrap; }
.pstatus::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.pstatus.is-scheduled { background: rgba(105,101,219,.16); color: var(--violet-light); }
.pstatus.is-draft { background: var(--bg-elev); color: var(--text-mute); }
.pstatus.is-posted { background: rgba(62,224,111,.13); color: #9ff0a9; }
.pstatus.is-failed { background: rgba(214,60,80,.15); color: #ff9aa6; }
/* Yüklenme iskeleti + boş durum */
.pskel { height: 66px; border-radius: 16px; border: 1px solid var(--border); background: linear-gradient(100deg, var(--bg-card) 40%, var(--bg-elev) 50%, var(--bg-card) 60%); background-size: 200% 100%; animation: pskel 1.2s linear infinite; }
@keyframes pskel { to { background-position: -200% 0; } }
.postsx__empty { text-align: center; padding: 72px 24px; border: 1px dashed var(--border-lt); border-radius: 18px; }
.postsx__empty-ic { width: 52px; height: 52px; margin: 0 auto 16px; border-radius: 16px; display: grid; place-items: center; background: rgba(105,101,219,.14); color: var(--violet-light); }
.postsx__empty h3 { font-size: 16.5px; font-weight: 700; margin-bottom: 6px; }
.postsx__empty p { font-size: 13.5px; color: var(--text-mute); margin-bottom: 18px; }
#postsEmpty { grid-column: 1 / -1; }
/* ---- Post detay modalı: önizleme + açıklama + metrikler + iptal ---- */
.pmodal { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 20px; padding-top: max(20px, env(safe-area-inset-top)); padding-bottom: max(20px, env(safe-area-inset-bottom)); background: rgba(8,8,10,.62); backdrop-filter: blur(7px); }
/* Medya sütunu 9:16 — video çerçeveyi TAM doldurur (siyah bant yok),
kartın kalan genişliği gövdeye kalır. */
.pmodal__card { display: grid; grid-template-columns: auto minmax(380px, 560px); width: auto; max-width: 96vw; max-height: min(92vh, 820px); background: var(--bg-card); border: 1px solid var(--border-lt); border-radius: 20px; overflow: hidden; box-shadow: var(--shadow-lg); animation: pmodal-in .18s ease; }
@keyframes pmodal-in { from { opacity: 0; transform: translateY(10px) scale(.985); } }
.pmodal__media { position: relative; background: #000; height: min(80vh, 680px); aspect-ratio: 9 / 16; }
.pmodal__media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pmodal__media--none { display: grid; place-items: center; background: var(--bg-elev); color: var(--text-dim); font-size: 13px; }
.pmodal__body { display: flex; flex-direction: column; gap: 18px; padding: 26px; min-width: 0; overflow-y: auto; }
.pmodal__head { display: flex; align-items: center; gap: 10px; min-width: 0; }
.pmodal__head .prow__nick { font-size: 14.5px; }
.pmodal__head .prow__avwrap, .pmodal__head .prow__av, .pmodal__head .prow__avfall { width: 34px; height: 34px; }
.pmodal__x { margin-left: auto; flex: none; width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: none; border: 1px solid transparent; color: var(--text-mute); cursor: pointer; font-size: 14px; line-height: 1; }
.pmodal__x:hover { background: var(--bg-elev); color: var(--text); }
.pmodal__when { font-size: 13px; font-weight: 600; color: var(--text-mute); }
.pmodal__when b { color: var(--text); font-weight: 700; }
/* DESCRIPTION / PERFORMANCE başlıkları mor — Repurposer bölüm başlıklarıyla aynı dil */
.pmodal__lbl { font-size: 10.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--violet-light); margin-bottom: 6px; }
.pmodal__cap { font-size: 14px; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; max-height: 220px; overflow-y: auto; }
.pmodal__cap.is-empty { color: var(--text-dim); font-style: italic; }
/* Performans — kutu yok: düz stat bandı, ince dikey ayraçlarla (dashboard dili) */
.pmodal__sec { border-top: 1px solid var(--border); padding-top: 16px; }
/* Performance platform seçici — Edit modalındaki sekme diliyle AYNI (.ptabs
tabanı: alt çizgili aktif sekme). Tek farkı ortalı olması ve sarabilmesi. */
.pmtabs { justify-content: flex-start; flex-wrap: wrap; margin: -2px 0 12px; border-bottom: 1px solid var(--border); }
.pmtabs button { gap: 6px; font-size: 12.5px; padding: 7px 11px 10px; }
.pmodal__metrics { display: grid; grid-template-columns: repeat(4, 1fr); }
.pmet { padding: 0 8px; border-left: 1px solid var(--border); min-width: 0; text-align: center; }
.pmet:first-child { border-left: 0; }
.pmet b { display: block; font-size: 21px; font-weight: 800; letter-spacing: -0.02em; min-height: 26px; white-space: nowrap; }
.pmet span { font-size: 10px; font-weight: 700; color: var(--text-dim); text-transform: uppercase; letter-spacing: .06em; }
/* Rakamın yanındaki ortalama kıyas rozeti (▲32% / ▼15% / ≈) */
.pmet__cmp { font-size: 10.5px; font-weight: 800; font-style: normal; letter-spacing: 0; color: var(--text-mute); margin-left: 5px; vertical-align: 2px; }
.pmet__cmp.is-up { color: #69db7c; }
.pmet__cmp.is-down { color: #ff9aa6; }
.pmspin { display: inline-block; width: 15px; height: 15px; border: 2px solid var(--border-lt); border-top-color: var(--violet); border-radius: 50%; animation: pmspin .7s linear infinite; vertical-align: middle; }
@keyframes pmspin { to { transform: rotate(360deg); } }
.pmodal__note { font-size: 12px; color: var(--text-dim); }
/* Aksiyonlar — buton yığını değil, tek çerçevede satır listesi (Settings dili) */
.pmodal__rows { border: 1px solid var(--border); border-radius: 14px; overflow: hidden; }
.pmrow { display: flex; align-items: center; gap: 12px; padding: 11px 14px; text-decoration: none; color: var(--text); transition: background .12s; }
.pmrow + .pmrow { border-top: 1px solid var(--border); }
.pmrow:hover { background: var(--bg-elev); }
.pmrow__ic { flex: none; width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; background: var(--bg-elev); color: var(--text-mute); line-height: 0; }
.pmrow:hover .pmrow__ic { background: var(--bg-soft); }
.pmrow__ic svg, .pmrow__ic img { display: block; }
.pmrow__ic img { border-radius: 5px; }
.pmrow__tx { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.pmrow__tx b { font-size: 13px; font-weight: 700; }
.pmrow__tx small { font-size: 11.5px; font-weight: 500; color: var(--text-mute); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pmrow__ok { color: #69db7c; font-size: 11px; font-weight: 700; margin-left: 4px; }
.pmrow__go { margin-left: auto; flex: none; color: var(--text-dim); font-size: 15px; transition: color .12s, transform .12s; }
.pmrow:hover .pmrow__go { color: var(--violet-light); transform: translateX(2px); }
.pmodal__foot { margin-top: auto; display: flex; align-items: center; justify-content: flex-end; gap: 10px; border-top: 1px solid var(--border); padding-top: 16px; } /* aksiyonlar sağa yaslı */
.btn--danger { background: rgba(214,60,80,.14); color: #ff9aa6; border-color: rgba(214,60,80,.35); }
.btn--danger:hover { background: rgba(214,60,80,.24); border-color: rgba(214,60,80,.55); }
@media (max-width: 860px) {
.postsx__bar { flex-wrap: wrap; }
.ptabs { overflow-x: auto; scrollbar-width: none; }
}
/* =========================================================
Compose — premium düzleştirme (.composex kapsamlı).
Kart-içinde-kart yok: bölümler (Post to / Video / Caption)
ince ayraçlarla akar; başlıklar sakin uppercase etiketler.
DOM/ID'lere DOKUNULMADI — compose.js aynen çalışır.
========================================================= */
.composex .cap-pagetitle { font-size: 24px; letter-spacing: -0.02em; margin: 2px 0; }
.composex .composeleft__scroll { gap: 0; }
.composex .composeleft__scroll .apcard { background: transparent; border: none; border-radius: 0; padding: 16px 2px; }
.composex .composeleft__scroll .apcard:first-child { padding-top: 4px; }
.composex .composeleft__scroll .apcard + .apcard { border-top: 1px solid var(--border); }
.composex .apcard__head h4 { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--text-mute); }
.composex .apcard__head { margin-bottom: 12px; }
.composex .apcard__hint { text-transform: none; letter-spacing: 0; }
/* Video kaynak boş durumu: dashed kutu → sade satır */
.composex .apmedia { border: 1px dashed var(--border-lt); background: transparent; }
/* Caption kutuları: yüzeyle bütünleşik, odakta mor halka */
.composex .apta { background: var(--bg-card); }
.composex .apta:focus { box-shadow: 0 0 0 3px rgba(105,101,219,.16); }
/* Schedule paneli: renkli kart yerine üst ayraçlı düz bölüm */
.composex .apsched--fixed { background: transparent; border: none; border-top: 1px solid var(--border); border-radius: 0; padding: 14px 2px 0; margin-top: 4px; }
.composex .apsched--fixed .apcard__head h4 { font-size: 11px; }
.composex .apinput { background: var(--bg-card); }
.composex .apinput:focus { box-shadow: 0 0 0 3px rgba(105,101,219,.16); }
.composex .dpick__btn { background: var(--bg-card); }
/* Sağ önizleme: çerçeve gölgesi biraz yumuşasın */
.composex .phoneframe--lg { box-shadow: 0 18px 50px rgba(0,0,0,.4); border-color: var(--border); }
/* =========================================================
Video editor — TIMELINE ZOOM + kaydırma. İç kapsayıcı
(ruler+şeritler+playhead) zoom oranında genişler, yatay kayar;
şerit etiketleri sola yapışık kalır.
========================================================= */
.tlbox__scroll { overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; scrollbar-color: var(--border-lt) transparent; }
.tlbox__scroll::-webkit-scrollbar { height: 8px; }
.tlbox__scroll::-webkit-scrollbar-thumb { background: var(--border-lt); border-radius: 99px; }
.tlbox__scroll::-webkit-scrollbar-track { background: transparent; }
.tlbox__inner { position: relative; min-width: 100%; width: 100%; }
.tlbox__inner .tlbox__playhead { top: 0; bottom: 0; }
.tlbox__tag { position: sticky; left: 0; z-index: 5; background: var(--bg-card); align-self: stretch; display: flex; align-items: center; }
.tlzoom { display: inline-flex; align-items: center; gap: 4px; margin-left: 8px; }
.tlzoom .minibtn { padding: 4px 9px; font-size: 13px; line-height: 1; }
.tlzoom__val { font-size: 11.5px; font-weight: 700; color: var(--text-mute); min-width: 36px; text-align: center; }
/* =========================================================
Video editor — ÇOKLU MÜZİK KATMANI: Media'daki ♪ parçalar,
timeline'daki dilimler ve altta dilim listesi.
========================================================= */
/* Müzik kartı: kapak yerine kompakt mor başlık bloğu (video değil, 9:16 olmasın) */
.binitem--music .binmusic__ic { position: relative; width: 100%; aspect-ratio: 16 / 10; height: auto; border-radius: 0; border: 0; border-bottom: 1px solid var(--border); display: grid; place-items: center; background: linear-gradient(160deg, rgba(105,101,219,.3), rgba(105,101,219,.06)); color: var(--violet-light); }
.binitem--music .binmusic__ic svg { width: 26px; height: 26px; }
.tlmus { position: absolute; top: 3px; bottom: 3px; background: rgba(105,101,219,.32); border: 1px solid rgba(139,135,255,.75); border-radius: 6px; cursor: grab; overflow: hidden; display: flex; align-items: center; padding: 0 7px; transition: background .12s ease, box-shadow .12s ease; }
.tlmus span { font-size: 10px; font-weight: 700; color: #dedcff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; }
.tlmus:hover { background: rgba(105,101,219,.45); }
.tlmus.is-sel { background: rgba(105,101,219,.5); box-shadow: 0 0 0 1.5px var(--violet), 0 0 10px rgba(105,101,219,.5); }
.tlmus:active { cursor: grabbing; }
#tlMusicLane.is-dropover { outline: 2px dashed var(--violet); outline-offset: -2px; background: rgba(105,101,219,.08); }
.musseglist { display: flex; flex-direction: column; gap: 7px; }
.musseg { display: flex; align-items: center; gap: 11px; background: var(--bg-soft); border: 1px solid var(--border); border-radius: 11px; padding: 8px 11px; cursor: pointer; transition: border-color .12s ease; }
.musseg:hover { border-color: var(--border-lt); }
.musseg.is-sel { border-color: var(--violet); box-shadow: 0 0 0 1px var(--violet); }
.musseg__ic { flex: none; width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; background: rgba(105,101,219,.16); color: var(--violet-light); font-size: 13px; font-weight: 800; }
.musseg__meta { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.musseg__name { font-size: 12.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.musseg__time { font-size: 11px; font-weight: 600; color: var(--text-dim); }
.musseg__vol { flex: none; width: 140px; display: flex; align-items: center; gap: 8px; }
.musseg__vol input { flex: 1; accent-color: var(--violet); cursor: pointer; }
.musseg__vol b { font-size: 11.5px; font-weight: 700; color: var(--text-mute); width: 34px; text-align: right; }
/* =========================================================
Video editor — CapCut'laşma: font dropdown'ı, outline
kontrolleri, Ctrl+çoklu seçim araç çubuğu.
========================================================= */
.pchan--font { flex: 1; max-width: 190px; } /* "System" + ok için yeterli — yarısı boş uzun kutu olmasın */
.pchan--font .pchan__btn { width: 100%; justify-content: space-between; }
.pchan__panel--font { left: 0; right: auto; width: min(320px, 80vw); max-height: 400px; overflow-y: auto; scrollbar-width: thin; }
.fontitem__name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
.swatch--auto { display: grid; place-items: center; font-size: 11px; font-weight: 800; color: var(--violet-light); background: rgba(105,101,219,.16) !important; border: 1px solid rgba(105,101,219,.4) !important; }
/* Butonun KENDİSİ yasak işareti: çember = buton kenarı, çapraz çizgi üstünde
(sağ üstten sol alta). İçeride ayrı ikon yok. */
.swatch--none { position: relative; overflow: hidden; background: var(--bg-elev) !important; border: 1.5px solid var(--text-mute) !important; }
.swatch--none::after { content: ""; position: absolute; left: 50%; top: 50%; width: 88%; height: 2px; background: var(--text-mute); border-radius: 2px; transform: translate(-50%, -50%) rotate(-45deg); }
.swatch--none.is-active { border-color: #ff9aa6 !important; box-shadow: 0 0 0 2px rgba(214,60,80,.25); }
.swatch--none.is-active::after { background: #ff9aa6; }
.chunk.is-sel { border-color: var(--violet) !important; box-shadow: 0 0 0 1px var(--violet), 0 0 14px rgba(105,101,219,.25); }
.selbar { display: flex; align-items: center; gap: 6px; margin-left: auto; margin-right: 8px; }
.selbar__n { font-size: 12px; font-weight: 700; color: var(--violet-light); white-space: nowrap; }
/* =========================================================
Split & Talking head — premium düzleştirme (.edx kapsamlı).
Compose ile aynı ilke: kart-içinde-kart yok; Media / boxes /
ayarlar / müzik bölümleri ince ayraçlarla akar. JS'e dokunulmadı.
========================================================= */
.edx .edx__title { padding: 4px 2px 16px; }
.edx .edx__title .postsx__title { font-size: 24px; }
.edx .capcol--left { gap: 0; }
.edx .capcol--left > .setcard { background: transparent; border: none; border-radius: 0; border-top: 1px solid var(--border); padding: 20px 2px 24px; }
.edx .capcol--left > .rxboxes { border-top: 1px solid var(--border); padding: 20px 2px 24px; margin: 0; }
.edx .setcard__title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--text-mute); }
.edx .setcard > .setcard__title { margin-bottom: 12px; }
.edx .setcard__head { margin-bottom: 12px; }
.edx .setcard__head .setcard__title { margin-bottom: 0; }
.edx .setcard__opt { text-transform: none; letter-spacing: 0; }
.edx .dropzone { background: transparent; }
.edx .cap__vol input[type=range] { accent-color: var(--violet); }
/* =========================================================
Calendar — premium yeniden tasarım. Dış kart yok; ay ızgarası
TEK yüzey: hücreler kutu değil, 1px ayraç çizgileriyle ayrılır.
========================================================= */
.calx__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 10px 2px 18px; flex-wrap: wrap; }
.calx__nav { display: flex; align-items: center; gap: 10px; }
/* Telefona özel sayfa başlığı (calendar.html). Masaüstünde YOK — düzen
bit bazında değişmez; yalnızca ≤700px'te display:block olur. */
.calx__pagetitle { display: none; }
.calx__title { min-width: 210px; text-align: center; }
.calx__arrow { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--bg-card); border: 1px solid var(--border); color: var(--text-mute); cursor: pointer; transition: border-color .15s, color .15s; }
.calx__arrow:hover { border-color: var(--border-lt); color: var(--text); }
.calx__actions { display: flex; align-items: center; gap: 10px; }
/* Takvim: KUTU YOK — transparan yüzey, yalnız ince ayraç çizgileri (post-bridge dili) */
.apcal { background: transparent; border: none; border-radius: 0; overflow: visible; }
.apcal__head { gap: 0; margin-bottom: 0; border-bottom: 1px solid var(--border); }
.apcal__head span { padding: 12px 0 11px; font-size: 11px; letter-spacing: .07em; color: var(--text-dim); }
.apcal__grid { gap: 0; background: transparent; }
.apcal__cell { background: transparent; border: none; border-radius: 0; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); min-height: 138px; padding: 9px 9px 8px; }
.apcal__grid .apcal__cell:nth-child(7n) { border-right: 0; }
.apcal__grid .apcal__cell:nth-last-child(-n+7) { border-bottom: 0; }
.apcal__cell.is-empty { background: transparent; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); opacity: 1; }
.apcal__grid .apcal__cell.is-empty:nth-child(7n) { border-right: 0; }
.apcal__cell.is-today { background: transparent; } /* yalnız gün numarası mor — hücre/kenarlık nötr kalır */
.apcal__day { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 8px; font-size: 12px; }
.apcal__cell.is-today .apcal__day { background: var(--violet); color: #fff; }
/* Pill'ler: yumuşak renk tonu + ince kenarlık; içerik ferah ve dengeli
dağılır: saat | platform | @hesap ......... durum noktası */
/* Ay hücresindeki post çipi — NÖTR palet: yeşil/mor dolgu yok, durum sağdaki noktada */
.apcal__post { display: flex; align-items: center; gap: 8px; background: var(--bg-elev); border: 1px solid var(--border); color: var(--text); border-radius: 9px; font-size: 12px; line-height: 1; padding: 8px 10px; transition: background .12s ease, border-color .12s ease; }
.apcal__post:hover { background: var(--bg-soft); border-color: var(--border-lt); }
.apcal__post .apcal__pt { color: var(--text); flex: none; font-weight: 700; }
.apcal__post.is-posted, .apcal__post.is-failed { background: var(--bg-elev); border-color: var(--border); color: var(--text); }
.apcal__post.is-draft { background: transparent; border-style: dashed; color: var(--text-mute); }
.apcal__ics { flex: none; display: inline-flex; align-items: center; gap: 5px; color: var(--text-mute); }
.apcal__ic { width: auto; height: auto; border-radius: 0; background: none !important; display: grid; place-items: center; line-height: 0; padding: 0; color: var(--text-mute); }
.apcal__ic svg { width: 13px; height: 13px; display: block; margin: 0; }
.apcal__who { flex: 1 1 auto; min-width: 0; max-width: none; font-size: 12.5px; font-weight: 600; color: var(--text-mute); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Durum noktası pill'in sağ kenarında; ✕ yok (silme Posts detayında) */
.apcal__post .pdot { flex: none; margin-left: auto; width: 9px; height: 9px; }
@media (max-width: 1040px) {
.pmodal__card { grid-template-columns: auto minmax(300px, 1fr); }
.pmodal__media { height: min(70vh, 540px); }
}
@media (max-width: 640px) {
.postsx__list { grid-template-columns: 1fr; }
.pmodal { padding: 10px; }
.pmodal__card { grid-template-columns: 1fr; max-height: 92vh; }
.pmodal__media { height: auto; width: 100%; aspect-ratio: 9/14; }
}
/* =========================================================
Connections — premium. Başlık hizasında sayaç + Connect;
hesaplar tek yüzeyli listede ince ayraçlarla; günlük kota
mini ilerleme çubuğu; durum = cam/lens nokta; sil hover'da.
========================================================= */
.cnx__headright { display: flex; align-items: center; gap: 10px; align-self: center; }
.cnx__count { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--text-mute); background: var(--bg-card); border: 1px solid var(--border); border-radius: 999px; padding: 7px 13px; }
.cnx__count b { color: var(--text); font-weight: 800; }
.cnx__count.is-on { color: #9ff0a9; background: rgba(62,224,111,.10); border-color: rgba(62,224,111,.24); }
.cnx__count.is-on b { color: #9ff0a9; }
.cnx__card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 16px; overflow: hidden; margin-top: 14px; }
.cnx__cardhead { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 20px; border-bottom: 1px solid var(--border); font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--text-dim); }
.cnx__cardhead .cnx__count { text-transform: none; letter-spacing: 0; padding: 5px 11px; font-size: 12px; }
.cnx__cardfoot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 13px 20px; border-top: 1px solid var(--border); font-size: 12.5px; font-weight: 600; color: var(--text-dim); }
.cnx__cardfoot span { flex: 1; min-width: 0; } /* soldaki yazı gerekirse kendi içinde sarar */
.cnx__cardfoot a { color: var(--violet-light); font-weight: 600; text-decoration: none; white-space: nowrap; flex: none; } /* "Manage plan →" asla bölünmez */
.cnx__cardfoot a:hover { text-decoration: underline; }
.cnx__row { display: flex; align-items: center; gap: 15px; padding: 17px 20px; transition: background .12s ease; }
.cnx__row + .cnx__row { border-top: 1px solid var(--border); }
.cnx__row:hover { background: rgba(255,255,255,.022); }
.cnx__avwrap { position: relative; flex: none; width: 46px; height: 46px; }
.cnx__av { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; background: var(--bg-elev); display: block; }
.cnx__av--brand { display: grid; place-items: center; color: #fff; }
.cnx__av--brand svg { display: block; }
.cnx__pbadge { position: absolute; right: -4px; bottom: -4px; width: 19px; height: 19px; border-radius: 50%; display: grid; place-items: center; color: #fff; border: 2px solid var(--bg-card); }
.cnx__pbadge svg { width: 10px; height: 10px; display: block; }
.cnx__meta { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.cnx__name { font-size: 15px; font-weight: 700; letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cnx__sub { font-size: 12.5px; font-weight: 600; color: var(--text-mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cnx__quota { flex: none; width: 150px; display: flex; flex-direction: column; gap: 7px; align-items: flex-end; font-size: 12px; font-weight: 600; color: var(--text-mute); }
.cnx__quota b { color: var(--text); font-weight: 800; font-size: 13px; }
.cnx__track { width: 100%; height: 5px; border-radius: 99px; background: var(--bg-elev); overflow: hidden; }
.cnx__track i { display: block; height: 100%; border-radius: 99px; background: var(--violet); transition: width .3s ease; }
.cnx__quota.is-near, .cnx__quota.is-near b { color: #f0a93a; }
.cnx__quota.is-near .cnx__track i { background: #f0a93a; }
.cnx__quota.is-full, .cnx__quota.is-full b { color: #f0616b; }
.cnx__quota.is-full .cnx__track i { background: #f0616b; }
.cnx__row .pdot { flex: none; width: 11px; height: 11px; margin-left: 6px; }
.cnx__del { flex: none; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: none; border: 1px solid transparent; color: var(--text-dim); cursor: pointer; opacity: 0; transition: opacity .15s ease, background .15s ease, color .15s ease, border-color .15s ease; }
.cnx__row:hover .cnx__del, .cnx__del:focus-visible, .cnx__del:disabled { opacity: 1; }
.cnx__del:hover { color: #ff9aa6; background: rgba(214,60,80,.12); border-color: rgba(214,60,80,.3); }
.cnx__del svg { width: 16px; height: 16px; display: block; }
.cnx__warn { background: rgba(240,140,0,.10); border: 1px solid rgba(240,140,0,.3); color: #f0a93a; border-radius: 12px; padding: 12px 14px; font-size: 13px; line-height: 1.5; margin-bottom: 14px; }
/* Boş durum: davetkâr hero */
.cnx__empty { text-align: center; padding: 64px 24px 56px; border: 1px dashed var(--border-lt); border-radius: 18px; }
.cnx__empty-ic { width: 56px; height: 56px; margin: 0 auto 16px; border-radius: 17px; display: grid; place-items: center; background: rgba(105,101,219,.14); color: var(--violet-light); }
.cnx__empty h3 { font-size: 17px; font-weight: 700; margin-bottom: 6px; }
.cnx__empty p { font-size: 13.5px; color: var(--text-mute); max-width: 420px; margin: 0 auto; }
.cnx__plats { display: flex; justify-content: center; gap: 9px; margin: 18px 0 22px; }
.cnx__plats .connrow__av { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; }
.cnx__plats .connrow__av svg { width: 16px; height: 16px; }
@media (max-width: 640px) {
.cnx__quota { display: none; }
.cnx__del { opacity: 1; }
}
/* =========================================================
Created videos — premium galeri (.rdx kapsamlı; rnitem/rngrid
başka sayfalarda da kullanıldığından SADECE burada geçerli).
Satırda 8 video; kart = saf 9:16 karo; ad/boyut + indir/sil
aksiyonları hover'da video üstü gradyanda belirir.
========================================================= */
.rdx .rdusage { display: flex; flex-direction: column; align-items: flex-end; gap: 7px; margin: 0; align-self: center; min-width: 220px; }
.rdx .rdusage__bar { width: 220px; flex: none; height: 5px; border: none; background: var(--bg-elev); }
.rdx .rdusage__txt { font-size: 12px; font-weight: 600; color: var(--text-mute); }
.rdx .rdtools { margin: 2px 0 16px; }
.rdx .rdtools__all span { font-weight: 600; }
.rdx .rngrid { grid-template-columns: repeat(8, 1fr); gap: 12px; }
@media (max-width: 1700px) { .rdx .rngrid { grid-template-columns: repeat(7, 1fr); } }
@media (max-width: 1500px) { .rdx .rngrid { grid-template-columns: repeat(6, 1fr); } }
@media (max-width: 1250px) { .rdx .rngrid { grid-template-columns: repeat(5, 1fr); } }
@media (max-width: 1050px) { .rdx .rngrid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 820px) { .rdx .rngrid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 540px) { .rdx .rngrid { grid-template-columns: repeat(2, 1fr); } }
.rdx .rnitem { background: #000; border: 1px solid var(--border); border-radius: 14px; overflow: hidden; transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease; }
.rdx .rnitem:hover { transform: translateY(-2px); border-color: var(--border-lt); box-shadow: 0 12px 30px rgba(0,0,0,.4); }
.rdx .rnitem.is-sel { outline: none; border-color: var(--violet); box-shadow: 0 0 0 2px rgba(105,101,219,.45), 0 12px 30px rgba(0,0,0,.4); }
/* Oynat rozeti: sadece hover'da, küçük ve zarif */
.rdx .rnitem__play { width: 36px; height: 36px; font-size: 13px; opacity: 0; transition: opacity .15s ease, background .15s ease; background: rgba(0,0,0,.6); backdrop-filter: blur(3px); }
.rdx .rnitem__thumb:hover .rnitem__play { opacity: 1; transform: translate(-50%, -50%); }
/* Checkbox: hover'da veya seçiliyken görünür (Google Photos hissi) */
.rdx .rnitem__check { opacity: 0; transition: opacity .15s ease; }
.rdx .rnitem:hover .rnitem__check, .rdx .rnitem.is-sel .rnitem__check { opacity: 1; }
/* "Scheduled" rozeti — planlanmış postu olan video, kullanıcı boşuna silmesin */
.rnitem__sched { position: absolute; top: 8px; right: 8px; z-index: 3; font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: #efeeff; background: rgba(105,101,219,.9); padding: 3px 8px; border-radius: 999px; pointer-events: none; box-shadow: 0 2px 8px rgba(0,0,0,.4); }
/* "Posted" varyantı — zaten yayınlanmış video (yeşil) */
.rnitem__sched.is-posted, .appick__sched.is-posted { background: rgba(47,158,68,.9); color: #eafbef; }
/* Rozet içi platform ikonları: hangi sosyal medyaya gittiği bir bakışta belli olsun */
.rnitem__sched, .appick__sched { display: inline-flex; align-items: center; }
.rnitem__sched .schedplats, .appick__sched .schedplats { display: inline-flex; align-items: center; gap: 3px; margin-left: 6px; }
.rnitem__sched .schedplats svg, .appick__sched .schedplats svg { display: block; width: 10px; height: 10px; }
.rnitem__sched .schedplats i, .appick__sched .schedplats i { font-style: normal; font-size: 9px; font-weight: 800; }
/* Boş caption uyarısı (Compose): sarı çerçeve + ⚠ notu */
.apta--warn { border-color: rgba(255,196,60,.75) !important; box-shadow: 0 0 0 3px rgba(255,196,60,.14) !important; }
.capwarn { margin-top: 6px; font-size: 12.5px; font-weight: 600; color: #ffc94d; }
/* Alt overlay: gradyan + ad/boyut + ikon aksiyonlar (hover'da) */
.rdx .rnitem__ov { flex-direction: column; align-items: stretch; gap: 7px; padding: 26px 9px 9px; background: linear-gradient(transparent, rgba(0,0,0,.86)); opacity: 0; transition: opacity .15s ease; }
.rdx .rnitem__thumb:hover .rnitem__ov { opacity: 1; }
.rdx .rnitem__meta { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; min-width: 0; }
.rdx .rnitem__nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; font-weight: 600; color: rgba(255,255,255,.92); }
.rdx .rnitem__sz { flex: none; font-size: 10.5px; font-weight: 600; color: rgba(255,255,255,.6); }
.rdx .rnitem__acts { display: flex; gap: 7px; }
.rdx .rnitem__act { flex: 1; height: 30px; display: grid; place-items: center; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.16); color: #fff; border-radius: 9px; cursor: pointer; backdrop-filter: blur(4px); transition: background .15s ease, border-color .15s ease; }
.rdx .rnitem__act:hover { background: rgba(105,101,219,.9); border-color: transparent; }
.rdx .rnitem__act--danger { flex: 0 0 34px; }
.rdx .rnitem__act--danger:hover { background: rgba(214,60,80,.9); border-color: transparent; }
.rdx .rnitem__act:disabled { opacity: .7; cursor: default; }
.rdx .rnitem__act svg { display: block; }
.rnspin { animation: rnspin .7s linear infinite; }
@keyframes rnspin { to { transform: rotate(360deg); } }
/* =========================================================
Repurposer — premium düzleştirme (.repx kapsamlı):
kutu-içinde-kutu yok; Batch'ler / Music / Mix settings ince
ayraçlarla akan, arası açık bölümler. JS DOM'una dokunulmadı.
========================================================= */
.repx .postsx__top { margin-bottom: 8px; }
.repx__btns { display: flex; align-items: center; gap: 10px; align-self: center; }
.repx .setcard { background: transparent; border: none; border-radius: 0; border-top: 1px solid var(--border); padding: 24px 2px 26px; margin: 0 !important; }
/* Bölüm başlıkları MOR: kartlar düzleştirildiği (arka plan/çerçeve yok) için gri
başlıklar birbirine karışıyordu — Batch 1 / Batch 2 / Music / Mix settings'in
ayrı bölümler olduğu ilk bakışta anlaşılsın. */
.repx .setcard__title { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; color: var(--violet-light); display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
.repx .setcard__opt { margin-left: 0; }
.repx #batchList { display: flex; flex-direction: column; }
.repx .batchcard .setcard__head { margin-bottom: 12px; }
.repx .rncalc { background: transparent; border: none; padding: 0; font-size: 13px; }
.repx .mixfoot { margin-top: 16px; }
.repx .muscard__hint { margin: -6px 0 12px; }
.repx .limits-note:empty { display: none; }
/* =========================================================
Repurposer — Music bölümü. Satır düzeni (Emre'nin çizimi):
[dosya ikonu·hover ✕] [ad] | [start slider] | [volume] | [▶]
Her çıktı videosu havuzdan RASTGELE parça alır.
========================================================= */
.muscard__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.muscard__hint { font-size: 12px; color: var(--text-dim); margin: 4px 0 10px; }
.muscard__tip { color: var(--violet-light); font-weight: 600; }
.muslist { display: flex; flex-direction: column; gap: 8px; }
.muslist:empty::after { content: "No tracks yet — videos keep only their original audio."; font-size: 12.5px; color: var(--text-dim); }
.musrow { display: flex; align-items: center; gap: 14px; background: var(--bg-soft); border: 1px solid var(--border); border-radius: 12px; padding: 9px 12px; }
.musrow__file { position: relative; flex: none; width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; background: rgba(105,101,219,.14); border: 1px solid rgba(105,101,219,.3); color: var(--violet-light); cursor: pointer; padding: 0; }
.musrow__file svg { display: block; }
.musrow__x { position: absolute; inset: 0; display: grid; place-items: center; border-radius: 9px; background: rgba(214,60,80,.88); color: #fff; font-size: 14px; font-weight: 800; opacity: 0; transition: opacity .15s ease; }
.musrow__file:hover .musrow__x { opacity: 1; }
.musrow__name { flex: 0 1 190px; min-width: 90px; font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border-right: 1px solid var(--border); padding-right: 14px; align-self: stretch; display: flex; align-items: center; }
/* gap 12px: slider'ın thumb'ı 22px yüksekliğinde ama track 6px — thumb track'in
8px üstüne taşıyor ve 5px boşlukta etiketin üstüne biniyordu.
max-width: slider tüm boşluğu yutup çok uzuyordu; sınırlayıp artan yeri
margin-right:auto ile sağdaki sütunlara bırakıyoruz (kontroller sağda kalır). */
.musrow__part { flex: 1 1 auto; min-width: 140px; max-width: 430px; margin-right: auto; display: flex; flex-direction: column; gap: 12px; border-right: 1px solid var(--border); padding-right: 14px; }
.musrow__lbl { font-size: 11px; font-weight: 600; color: var(--text-dim); white-space: nowrap; }
.musrow__t { color: var(--violet-light); font-weight: 700; }
.musrow__dur { color: var(--text-dim); font-weight: 600; }
.musrow__volr { width: 100%; accent-color: var(--violet); cursor: pointer; }
/* Start slider = KISKAÇ: track'in mor kısmı videoya girecek bölüm (JS gradient
ile boyanır: öncesi beyazımsı, sonrası mor). Thumb dik köşeli kıskaç çubuğu. */
.musrow__range { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 2px; background: #7b76f0; cursor: pointer; outline: none; }
.musrow__range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 9px; height: 22px; border-radius: 2px; background: #7b76f0; border: none; box-shadow: inset 2.5px 0 0 rgba(255,255,255,.9), 0 0 8px rgba(123,118,240,.55); cursor: ew-resize; }
.musrow__range::-moz-range-thumb { width: 9px; height: 22px; border-radius: 2px; background: #7b76f0; border: none; box-shadow: inset 2.5px 0 0 rgba(255,255,255,.9), 0 0 8px rgba(123,118,240,.55); cursor: ew-resize; }
.musrow__range::-moz-range-track { background: transparent; }
.muscard__btns { display: flex; align-items: center; gap: 8px; }
/* 160px: "Music starts in video at" etiketi tek satıra sığsın */
.musrow__vstart { flex: none; width: 160px; display: flex; flex-direction: column; gap: 5px; border-right: 1px solid var(--border); padding-right: 14px; }
.musrow__vsrow { display: flex; align-items: center; gap: 6px; }
.musrow__vin { width: 62px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px; color: var(--text); font-family: inherit; font-size: 12.5px; font-weight: 700; padding: 5px 8px; color-scheme: dark; }
.musrow__vin:focus { outline: none; border-color: var(--violet); box-shadow: 0 0 0 3px rgba(105,101,219,.16); }
.musrow__vsuf { font-size: 12px; font-weight: 600; color: var(--text-dim); }
.musrow__vol { flex: none; width: 150px; display: flex; flex-direction: column; gap: 5px; border-right: 1px solid var(--border); padding-right: 14px; }
.musrow__volrow { display: flex; align-items: center; gap: 8px; }
.musrow__volt { font-size: 12px; font-weight: 700; color: var(--text-mute); width: 40px; text-align: right; flex: none; }
.musrow__play { flex: none; width: 36px; height: 36px; border-radius: 50%; border: 1px solid rgba(105,101,219,.4); background: rgba(105,101,219,.14); color: var(--violet-light); cursor: pointer; font-size: 13px; display: grid; place-items: center; padding: 0; padding-left: 2px; transition: background .15s ease; }
.musrow__play:hover { background: rgba(105,101,219,.3); }
@media (max-width: 760px) {
.musrow { flex-wrap: wrap; }
.musrow__name { border: none; flex: 1 1 auto; }
.musrow__part, .musrow__vol, .musrow__vstart { width: 100%; flex: 1 1 100%; border: none; padding-right: 0; }
}
/* ============ VİDEO KLASÖRLERİ (folders.js) — dropdown, modal, taşıma ============ */
/* Repurposer "Save to folder": Created videos'takiyle AYNI dropdown, sadece
satır içinde konumlanır (görünüm/renk/panel hepsi ortak .pchan--fld). */
.rzfld { flex: none; }
.rzfld__opt { display: block; margin-top: 2px; font-size: 11.5px; color: var(--text-dim); }
.pchan--fld { margin-bottom: 0; }
.pchan--fld .pchan__btn { padding: 6px 10px; font-size: 12.5px; }
.pchan__panel--fld { width: 244px; }
.fld__ico { display: inline-flex; line-height: 0; color: var(--text-mute); flex: none; }
.fld__nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* SAYI ile ✕ AYNI YERİ PAYLAŞIR (2026-07-29).
ÖNCE: ✕ `opacity: 0` idi — görünmüyordu ama YER KAPLIYORDU, o yüzden video
sayısı sağ kenardan uzakta, boşlukta duruyordu. Artık ✕ akıştan tamamen
çıkıyor (`display: none`) ve satırın üstüne gelince sayının YERİNİ alıyor.
İkisine de aynı `min-width` verildi ki değişimde satır oynamasın. */
.fld__n { flex: none; order: 1; min-width: 20px; text-align: right; font-size: 11px; font-weight: 700; color: var(--text-mute); }
/* SIRA (order) ŞART: ✕ düğümü JS'te satırın SONUNA ekleniyor (folders.js
`it.appendChild(x)`), yani DOM'da tik'ten sonra geliyor. Sırayı düzeltmezsek
✕ tik'in SAĞINDA açılıyor ve tik hover'da 10px'den 40px'e KAYIYOR — ölçüldü.
`order` ile ✕ sayının yerine, tik hep en sağa oturur; DOM'a dokunmadan. */
.pchan--fld .pchan__tick, .pchan__panel--fld .pchan__tick { margin-left: 4px; order: 2; }
.fld__del { flex: none; order: 1; display: none; min-width: 20px; text-align: center; font-size: 11px; color: var(--text-mute); padding: 2px 0; border-radius: 6px; }
.pchan__item:hover .fld__del { display: inline-block; }
.pchan__item:hover .fld__n { display: none; }
.fld__del:hover { color: #ff8585; background: rgba(224,49,49,.12); }
/* DOKUNMATİKTE hover YOK: orada ikisi de hep görünür, yoksa kullanıcı klasörü
silemez. Genişlik değil `hover: none` sorulur — ölçüt ekran boyutu değil,
cihazın imleci olup olmaması. */
@media (hover: none) {
.fld__del { display: inline-block; }
.pchan__item:hover .fld__n { display: inline; }
}
/* SEÇİLİ SATIR: tik YOK, ad ve sayı MOR (2026-07-29).
Tik sağda gereksiz yer kaplıyordu; üstelik açılır butonun kendisi zaten seçili
klasörün adını yazıyor, yani seçim iki yerden belli oluyor.
`:has(.fld__n)` KİLİDİ ŞART, süs değil: compose.js'in kaynak ve zamanlama
seçicileri de `pchan--fld` sınıflarını kullanıyor (compose.js:123/125/817)
ama onlarda SAYI YOK — tiki oradan da silseydik hiçbir seçim göstergesi
kalmazdı. Aynı koruma, sayısız kurulan bir klasör menüsü için de geçerli.
`:has()` desteklenmeyen eski tarayıcıda kural komple düşer ve tik geri gelir
— yani bozulma değil, bugünkü davranışa dönüş. */
.pchan__panel--fld .pchan__item:has(.fld__n) .pchan__tick { display: none; }
.pchan__panel--fld .pchan__item.is-on:has(.fld__n) .fld__nm,
.pchan__panel--fld .pchan__item.is-on:has(.fld__n) .fld__n { color: #8b87ff; }
.fld__sep { height: 1px; background: var(--border); margin: 6px 8px; }
.fldempty { grid-column: 1 / -1; text-align: center; color: var(--text-mute); font-size: 13px; padding: 30px 8px; }
/* Created videos toolbar: ikon aksiyonlar (download / delete / klasöre taşı) */
.rdtools__acts { display: inline-flex; gap: 8px; position: relative; }
.btn--icon { padding: 7px 9px; line-height: 0; }
.btn--icon svg { display: block; }
/* seçim yokken pasif görünüm — tıklanabilir hissi vermesin */
.rdtools__acts .btn:disabled { opacity: .35; cursor: default; pointer-events: none; filter: saturate(.4); }
.fldpick { position: absolute; right: 0; top: calc(100% + 8px); }
/* Compose: picker üstünde sağa yaslı klasör filtresi */
.cfldrow { display: flex; justify-content: flex-end; margin-bottom: 10px; }
/* apcard başlığında: klasör filtresi + kaynak dropdown'ı aynı satırda (kaynak en sağda) */
.cfldrow--head { margin-bottom: 0; gap: 8px; align-items: center; }
.pchan__panel--src { width: 196px; }
/* New folder modalı (isim + renk) */
.fldmodal { position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; }
.fldmodal__back { position: absolute; inset: 0; background: rgba(8,8,14,.6); backdrop-filter: blur(3px); }
.fldmodal__card { position: relative; width: min(360px, calc(100vw - 32px)); background: var(--bg-card); border: 1px solid var(--border-lt); border-radius: 16px; box-shadow: var(--shadow-lg); padding: 20px; }
.fldmodal__title { margin: 0 0 14px; font-size: 16px; font-weight: 800; }
.fldmodal__input { width: 100%; background: var(--bg-elev); border: 1px solid var(--border); border-radius: 10px; padding: 9px 12px; font: inherit; font-size: 13.5px; color: var(--text); }
.fldmodal__input:focus { outline: none; border-color: var(--violet); box-shadow: 0 0 0 3px rgba(105,101,219,.16); }
.fldmodal__lbl { margin: 14px 0 8px; font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-mute); }
.fldsw { display: flex; gap: 9px; flex-wrap: wrap; }
.fldsw__b { width: 26px; height: 26px; border-radius: 50%; border: 2px solid transparent; background: var(--c); cursor: pointer; padding: 0; transition: transform .12s; }
.fldsw__b:hover { transform: scale(1.12); }
.fldsw__b.is-on { border-color: #fff; box-shadow: 0 0 0 2px var(--c); }
.fldmodal__acts { display: flex; justify-content: flex-end; gap: 9px; margin-top: 18px; }
/* MediaMaxxing (Settings bölümü): logo + başlıkla AYNI hizada switch + ⓘ tooltip */
.mmlogo { border-radius: 4px; vertical-align: -5px; margin-right: 9px; }
/* "MediaMaxxing" yazısı — MM logosuyla aynı aile mavi gradient.
Koyu bg'de kaybolmasın: bir tık aydınlık uçlar + biri SIKI (netlik/halo)
biri yumuşak (hafif parıltı) iki katmanlı shadow */
.mmglow {
font-weight: 800;
background: linear-gradient(92deg, #4d7cf0 0%, #93b5ff 48%, #3c66e8 100%);
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent; color: transparent;
filter: drop-shadow(0 0 1px rgba(147, 181, 255, .85)) drop-shadow(0 0 6px rgba(61, 106, 224, .4));
}
/* MM bölümünün switch'i de yazıyla aynı mavi gradient (yalnızca mmhead içindeki) */
.mmhead .apswitch input:checked + .apswitch__track {
background: linear-gradient(92deg, #4d7cf0 0%, #93b5ff 48%, #3c66e8 100%);
border-color: #3b6ae0;
box-shadow: 0 0 8px rgba(61, 106, 224, .35);
}
.mmhead { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.mmhead__t { display: inline-flex; align-items: center; }
.infoi { display: inline-grid; place-items: center; width: 16px; height: 16px; margin-left: 8px; border-radius: 50%; border: 1px solid var(--border-lt); color: var(--text-dim); font: 700 10px/1 Onest, sans-serif; text-transform: none; letter-spacing: 0; cursor: help; flex: none; }
.infoi:hover { color: var(--violet-light); border-color: var(--violet); }
/* MM key doğrulama hatası (geçersiz key / Bronze rank şartı) — kırmızı, gözden kaçmasın */
.mmhint--err { color: #ff8585 !important; font-weight: 600; }
/* "Choose from Created videos" — dropzone altındaki açma butonu + seçici modalı */
.rpk-open { width: 100%; margin-top: 8px; justify-content: center; }
/* "Choose from Created videos" ile altındaki tam-genişlik buton yapışmasın. */
.rpk-open + .btn--block { margin-top: 8px; }
/* Klip yerleştirme ipucu: masaüstünde sürükleme, dokunmatik/dar ekranda buton. */
.hint-drag { display: inline; } .hint-tap { display: none; }
@media (hover: none), (max-width: 900px) { .hint-drag { display: none; } .hint-tap { display: inline; } }
.rpk { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; }
.rpk[hidden] { display: none; }
.rpk__back { position: absolute; inset: 0; background: rgba(6,7,12,.72); backdrop-filter: blur(3px); }
.rpk__box { position: relative; width: min(880px, calc(100vw - 32px)); max-height: min(80vh, 740px); display: flex; flex-direction: column; background: var(--bg-card); border: 1px solid var(--border-lt); border-radius: 18px; box-shadow: var(--shadow-lg); overflow: hidden; }
.rpk__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 15px 18px 4px; font: 700 15px Onest, sans-serif; }
.rpk__headr { display: inline-flex; align-items: center; gap: 10px; }
.rpk__fld .pchan__btn { padding: 7px 11px; }
.rpk__x { background: none; border: 0; color: var(--text-dim); font-size: 15px; cursor: pointer; padding: 6px; border-radius: 8px; }
.rpk__x:hover { color: var(--text); background: var(--bg-elev); }
.rpk__hint { padding: 0 18px 10px; font-size: 12.5px; color: var(--text-mute); }
.rpk__grid { flex: 1 1 auto; overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(126px, 1fr)); grid-auto-rows: 212px; gap: 10px; padding: 4px 18px 14px; }
/* SABİT satır yüksekliği (grid-auto-rows) — aspect-ratio + stretch çakışması
kartların üst üste binmesine yol açıyordu; sabit yükseklik kökten çözer. */
.rpk__item { position: relative; height: 212px; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; background: #000; padding: 0; cursor: pointer; transition: border-color .12s, transform .12s; }
.rpk__item:hover { border-color: var(--violet); transform: translateY(-1px); }
.rpk__item.is-sel { border-color: var(--violet); box-shadow: 0 0 0 2px rgba(105,101,219,.45); }
.rpk__item video { width: 100%; height: 100%; object-fit: cover; display: block; }
.rpk__nm { position: absolute; left: 0; right: 0; bottom: 0; padding: 14px 8px 6px; font: 600 10.5px Onest, sans-serif; color: #fff; background: linear-gradient(transparent, rgba(0,0,0,.78)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: left; }
.rpk__ok { position: absolute; top: 6px; right: 6px; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; background: var(--violet); color: #fff; font: 800 12px Onest, sans-serif; box-shadow: 0 1px 6px rgba(0,0,0,.45); }
.rpk__note { grid-column: 1 / -1; padding: 40px 10px; text-align: center; color: var(--text-mute); font: 500 13.5px Onest, sans-serif; }
.rpk__foot { display: flex; align-items: center; justify-content: flex-end; gap: 12px; padding: 12px 18px; border-top: 1px solid var(--border); }
.rpk__cnt { font: 600 12.5px Onest, sans-serif; color: var(--text-mute); }
/* Settings → Refer & earn: kod kutusu + kopyalama butonları */
.refrow { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; }
.refcode { padding: 9px 16px; background: var(--bg-elev); border: 1px dashed var(--border-lt); border-radius: 10px; color: var(--violet-light); font: 700 15px/1.2 "SF Mono", ui-monospace, Menlo, Consolas, monospace; letter-spacing: 3px; user-select: all; }
/* Compose: MediaMaxxing auto-submit bloğu (Schedule kartının altı) */
.apmm { border-top: 1px solid var(--border); padding-top: 12px; margin-top: 10px; }
.apmm__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.apmm__lbl { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: var(--text-mute); }
.apmm select.apinput { width: 100%; }
.apmm .apsched__hint { margin-top: 6px; }
/* Kırık avatar yedeği (shell.js data-plat mekanizması): yuvarlak marka dairesi */
.ugc-avbrand { display: inline-grid !important; place-items: center; color: #fff; overflow: hidden; flex: none; }
.ugc-avbrand svg { width: 58%; height: 58%; display: block; }
/* API key alanı: monospace + sabit tam genişlik (tarayıcı şifre-yöneticisi
müdahalesine ve kendiliğinden daralmaya karşı) */
.mmkeyin { width: 100%; min-width: 0; box-sizing: border-box; font-family: ui-monospace, SFMono-Regular, Consolas, "Courier New", monospace; font-size: 13.5px; letter-spacing: .02em; }
/* ============ Compose SCHEDULE kompaktlaştırma + mod dropdown'ı ============ */
/* 4 kontrol tek satırda: Start at · Time · Gap · Unit */
.apsched__grid4 { display: grid; grid-template-columns: 1.3fr 1fr .62fr .95fr; gap: 8px; }
.apsched__grid4 .apfield { margin-bottom: 8px; min-width: 0; }
.apsched__grid4 .apinput { width: 100%; min-width: 0; }
/* Schedule + Save to drafts yan yana, EŞİT genişlik */
.apsched__btnrow { display: flex; gap: 8px; }
.apsched__btnrow .btn { flex: 1 1 0; min-width: 0; }
/* Manuel satırlar: video adı + tarih + saat (ad taşarsa üç nokta).
Sütunlar ÖZEL seçiciye göre ölçülü (native input'tan geniş); minmax ile dar
ekranda küçülebilir, etiketler üç noktaya döner → satır asla taşmaz. */
.apmanrow { grid-template-columns: minmax(0, 1fr) minmax(0, 152px) minmax(0, 152px); }
.apmanrow__n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.apmanrow .dpick__val, .apmanrow .tpick__val { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* NOT: burada max-height + overflow YOK. Tarih/saat popup'ı position:absolute
olduğu için scroll kabı onu KIRPIYORDU (takvim yarım görünüyordu) ve 292px'lik
popup yatay kaydırma çubuğu doğuruyordu. Liste uzarsa sayfa normal kayar. */
#bulkManual { padding-right: 4px; }
/* Caption butonları: mor zemin + beyaz ikon (bookmark / stars) */
.capbtn { display: inline-flex; align-items: center; gap: 7px; background: var(--violet); border: 1px solid var(--violet); color: #fff; border-radius: 9px; font-family: inherit; font-size: 12.5px; font-weight: 700; padding: 7px 12px; cursor: pointer; transition: background .15s, transform .12s; } /* parlama kapali (2026-07-29) */
.capbtn:hover { background: #7b77e6; border-color: #7b77e6; }
.capbtn:active { transform: scale(.97); }
.capbtn svg { display: block; flex: none; }
/* ⓘ Music yardım popup içeriği */
.rnmodal__title { font-size: 18px; font-weight: 800; margin-bottom: 16px; color: var(--violet-light); }
.mushelp { display: flex; flex-direction: column; gap: 14px; }
.mushelp__row { display: flex; align-items: flex-start; gap: 12px; }
.mushelp__ic { flex: none; width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; background: rgba(105,101,219,.14); border: 1px solid rgba(105,101,219,.28); color: var(--violet-light); }
.mushelp__ic svg { display: block; }
.mushelp__row > div > b { display: block; font-size: 13.5px; font-weight: 700; margin-bottom: 2px; }
.mushelp__row p { font-size: 12.5px; color: var(--text-mute); line-height: 1.5; margin: 0; }
.mushelp__row p b { display: inline; font-size: inherit; margin: 0; color: var(--text); font-weight: 700; }
.rnmodal__nav--end { justify-content: flex-end; }
/* =========================================================
Dashboard v2 — KUTUSUZ. İnce çizgiyle bölünmüş istatistik bandı +
Editing/Posting satır listeleri (Linear/Stripe dili). Kart yok.
========================================================= */
.dashx .dash-title { margin-bottom: 6px; }
.dashx__hero { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 4px 2px 16px; flex-wrap: wrap; }
.dashx__sub { font-size: 14px; color: var(--text-mute); }
.dashx__hero .btn--primary { flex: none; }
/* İstatistikler: tek bant, dikey ince çizgilerle bölünmüş */
/* Özet kutuları: ayraçlı tek şerit yerine BAĞIMSIZ kartlar (Buffer "Summary"
dili) — sade, yuvarlak, ince çerçeveli; sayfa geneliyle aynı kart diliyle. */
.dashx__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 26px; }
.dashx__stats.is-mm { grid-template-columns: repeat(4, 1fr); } /* MM açık → Est. earnings kutusu eklenir */
.dashx__stat[hidden] { display: none; }
.dashx__stat { display: flex; flex-direction: column; gap: 4px; padding: 15px 18px 16px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 14px; text-decoration: none; color: var(--text); transition: border-color .16s ease, background .16s ease; }
.dashx__stat:hover { border-color: rgba(105,101,219,.55); background: var(--bg-elev); }
.dashx__stat-l { font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-dim); }
.dashx__stat b { font-size: 28px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; }
.dashx__stat-s { font-size: 11.5px; font-weight: 500; color: var(--text-mute); }
/* Bölüm etiketi + satır listesi */
/* Bölüm başlığı ile kartlar arasında nefes payı (eskiden 2px, yapışıktı) */
.dashx__label { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-dim); margin: 26px 2px 12px; }
.dashx__stats + .dashx__label { margin-top: 0; } /* özet kartlarından hemen sonraki ilk başlık */
.dashx .modules { display: block; margin-bottom: 14px; }
.dashx .module {
display: flex; align-items: center; gap: 16px;
background: none; border: 0; border-radius: 0; box-shadow: none; overflow: visible;
padding: 9px 8px; border-bottom: 1px solid var(--border);
transition: background .15s ease;
}
.dashx .module::before { content: none; }
.dashx .module:hover { transform: none; box-shadow: none; background: rgba(255,255,255,.025); border-color: var(--border); }
.dashx .module__icon { width: 40px; height: 40px; border-radius: 11px; margin: 0; flex: none; background: color-mix(in srgb, var(--c) 14%, transparent); color: var(--c); box-shadow: none; }
.dashx .module__txt { flex: 1; min-width: 0; }
.dashx .module h3 { font-size: 15.5px; font-weight: 700; }
.dashx .module p { margin-top: 2px; font-size: 13px; color: var(--text-mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dashx .module__credits { position: static; order: 4; flex: none; font-size: 11.5px; padding: 4px 9px; }
.dashx .module:hover .module__credits { opacity: 1; } /* satır düzeninde gizlenmesin */
.dashx .module__go { position: static; order: 5; flex: none; font-size: 13px; width: 58px; text-align: right; }
@media (max-width: 860px) {
.dashx__stats, .dashx__stats.is-mm { grid-template-columns: repeat(2, 1fr); } /* mobilde her zaman 2'li (is-mm specificity'sini de ez) */
/* NOT: ayraç çizgileri kaldırıldı (artık bağımsız kartlar) → nth-child kuralları da gitti */
.dashx .module p { white-space: normal; }
.dashx .module__go { display: none; }
}
.capmodal__add .btn { flex: 0 0 auto; align-self: flex-start; }
.capmodal__list { display: flex; flex-direction: column; gap: 8px; padding: 4px 16px 14px; max-height: 48vh; overflow: auto; }
.capmodal__row {
display: flex; gap: 12px; align-items: center;
padding: 12px 14px; border-radius: 12px;
background: var(--bg-soft); border: 1px solid var(--border);
transition: border-color .14s, background .14s;
}
.capmodal__row:hover { border-color: var(--border-lt); background: var(--bg-elev); }
.capmodal__txt {
flex: 1 1 auto; font-size: 13.5px; color: var(--text);
white-space: pre-wrap; word-break: break-word; line-height: 1.5;
}
.capmodal__del {
flex: 0 0 auto; display: inline-grid; place-items: center; width: 34px; height: 34px;
background: transparent; border: 1px solid transparent; border-radius: 9px;
color: #f0616b; cursor: pointer; transition: background .14s, border-color .14s;
}
.capmodal__del:hover { background: rgba(224,49,49,.12); border-color: rgba(224,49,49,.35); }
.capmodal__empty {
padding: 26px 14px; color: var(--text-dim); font-size: 13.5px; text-align: center; line-height: 1.55;
}
.connrow {
display: flex; align-items: center; gap: 14px;
padding: 13px 14px; border-radius: 13px; transition: background .14s;
}
.connrow + .connrow { margin-top: 2px; }
.connrow:hover { background: var(--bg-elev); }
.connrow--acct { background: var(--bg-soft); margin-bottom: 6px; border: 1px solid var(--border); }
.connrow__av {
flex: 0 0 auto; width: 46px; height: 46px; border-radius: 50%; object-fit: cover;
display: inline-flex; align-items: center; justify-content: center;
background: var(--bg-elev); color: var(--text-mute); overflow: hidden;
box-shadow: 0 0 0 2px var(--bg-card), 0 0 0 3px var(--border);
}
.connrow__av svg { display: block; }
.connrow__av--letter { background: var(--grad-violet); color: #fff; font-weight: 800; font-size: 18px; }
.connrow__meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
.connrow__name {
font-weight: 700; font-size: 15.5px; color: var(--text);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.connrow__sub { font-size: 12.5px; font-weight: 600; color: var(--text-dim); }
.connrow__badge { flex: 0 0 auto; display: inline-flex; align-items: center; }
.connrow__ok {
flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px;
font-size: 13px; font-weight: 700; color: #3fcf6e;
padding: 6px 12px 6px 9px; border-radius: 999px;
background: rgba(47,158,68,.12); border: 1px solid rgba(47,158,68,.28);
}
.connrow__ok svg { width: 16px; height: 16px; }
/* Günlük delivery sayacı pill'i (used/limit) */
.connrow__quota {
flex: 0 0 auto; display: inline-flex; align-items: center; gap: 3px;
font-size: 12px; font-weight: 700; color: var(--text-mute);
padding: 5px 11px; border-radius: 999px;
background: var(--bg-elev); border: 1px solid var(--border);
}
.connrow__quota b { color: var(--text); font-weight: 800; }
.connrow__quota.is-near { color: #f0a93a; background: rgba(240,140,0,.10); border-color: rgba(240,140,0,.28); }
.connrow__quota.is-near b { color: #f0a93a; }
.connrow__quota.is-full { color: #f0616b; background: rgba(224,49,49,.12); border-color: rgba(224,49,49,.32); }
.connrow__quota.is-full b { color: #f0616b; }
/* Durum ikonu (yazısız): yeşil tick / kırmızı çarpı */
.connrow__stat { flex: 0 0 auto; display: inline-flex; align-items: center; }
.connrow__stat svg { width: 22px; height: 22px; }
.connrow__stat.is-on { color: #3fcf6e; }
.connrow__stat.is-off { color: #f0616b; }
/* İkon-only disconnect (çöp kutusu) */
.connrow__btn--icon { padding: 8px; }
.connrow__btn--icon svg { width: 16px; height: 16px; }
.connrow__btn {
flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px;
font-family: inherit; font-weight: 700; font-size: 13.5px; cursor: pointer;
padding: 10px 16px; border-radius: 10px; border: 1px solid transparent; background: transparent;
transition: background .15s, border-color .15s;
}
.connrow__btn svg { width: 15px; height: 15px; }
.connrow__btn--danger { color: #f0616b; border-color: rgba(224,49,49,.32); }
.connrow__btn--danger:hover { background: rgba(224,49,49,.12); border-color: rgba(224,49,49,.55); }
@media (max-width: 560px) {
.conncard__head { padding: 16px 16px; }
.conncard__body--cta { padding: 18px 16px; }
.conncard__cta { gap: 16px; }
.conncard__ctabtn { width: 100%; justify-content: center; }
.connrow__ok { font-size: 0; gap: 0; padding: 7px; }
.connrow__ok svg { width: 17px; height: 17px; }
.connrow__btn { padding: 9px 12px; }
}
/* ============================================================
Kaydırma çubuğu — site geneli (dark + violet uyumlu, ince)
============================================================ */
* { scrollbar-width: thin; scrollbar-color: var(--border-lt) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-corner { background: transparent; }
::-webkit-scrollbar-thumb {
background: var(--border-lt);
border-radius: 999px;
border: 2px solid transparent;
background-clip: padding-box;
transition: background .15s;
}
::-webkit-scrollbar-thumb:hover { background: #56525f; background-clip: padding-box; }
::-webkit-scrollbar-thumb:active { background: var(--violet); background-clip: padding-box; }
/* Dar/iç paneller için biraz daha ince çubuk (bildirimler, açılırlar vb.) */
.notifpanel__list::-webkit-scrollbar,
.apdrop::-webkit-scrollbar,
.apmenu::-webkit-scrollbar { width: 8px; }
/* =========================================================
MOBİL DÜZELTMELERİ (2026-07 — yalnızca @media içinde; masaüstü
ve web görünümü DEĞİŞMEZ). Backend/DOM'a dokunulmaz, sadece CSS.
1) Sidebar çekmecesi telefonda en alta kadar kaysın (100dvh).
2) Ortak sayfa başlığı (.postsx__top) dar ekranda satır atlasın →
sağdaki butonlar (Add batch / Connect / New post…) ekran dışına
taşmasın / kaybolmasın.
========================================================= */
/* --- 1) Sidebar drawer: gerçek görünür yükseklik + alt boşluk --- */
@media (max-width: 820px) {
.layout.has-sidebar .sidebar {
height: calc(100vh - 64px); /* eski tarayıcı yedeği */
height: calc(100dvh - 64px); /* mobil: URL barı/araç çubuğu dahil gerçek alan */
max-height: calc(100dvh - 64px);
bottom: auto; /* yükseklik tamamen height ile kontrol edilsin */
padding-bottom: calc(28px + env(safe-area-inset-bottom)); /* son öğe (Settings) tam görünsün + home indicator */
overscroll-behavior: contain;
-webkit-overflow-scrolling: touch;
}
/* alt grup (Settings/Report bug) son öğe olarak nefes alsın */
.layout.has-sidebar .sidebar__bottom { padding-bottom: 6px; }
}
/* --- 2) Ortak başlık satırı: telefonda sar, sağ aksiyon grubunu
kendi satırına al (taşma / kesilme / üst üste binme biter) --- */
@media (max-width: 560px) {
/* Başlık satırı: başlık SOLDA, sağdaki buton/dropdown SAĞDA aynı hizada
(doğal boyut; sığmazsa alt satıra sarar). */
.postsx__top { flex-wrap: wrap; align-items: center; row-gap: 10px; column-gap: 12px; }
.postsx__top > :first-child { flex: 1 1 auto; min-width: 0; }
.postsx__top > :last-child { flex: 0 0 auto; }
/* Connections + Posts: alt açıklama yazısı mobilde gizli → buton başlıkla
aynı hizada sağda kalır, yer kazanılır */
.postsx__top:has(.cnx__headright) .postsx__sub,
.postsx__top:has(> a.btn--primary) .postsx__sub { display: none; }
/* Sağ aksiyon grupları sığmazsa kendi içinde sarabilsin */
.repx__btns, .cnx__headright, .an2-headright { flex-wrap: wrap; gap: 8px; }
/* Repurposer: iki buton başlığın ALTINDA tam satır (subtitle korunur).
DİKKAT: burada `justify-content` VERİLMEZ. Bu seçici iki sınıflı
(0-2-0) olduğu için aşağıdaki tek sınıflı `.repx__btns{...}` kuralını
eziyordu; hizalama artık TEK yerde (JOB I / madde 2 bloğu) tanımlı. */
.postsx__top > .repx__btns { flex: 1 1 100%; }
/* Analytics: "All channels" dropdown başlıkla AYNI satırda, sağda */
.an2-head { flex-wrap: wrap; align-items: center; row-gap: 10px; column-gap: 12px; }
.an2-head > :first-child { flex: 1 1 auto; min-width: 0; }
.an2-headright { flex: 0 0 auto; }
/* Posts: filtre çubuğunda "All channels" dropdown'ı sağa yasla */
.postsx__bar .pchan { margin-left: auto; }
/* Created videos: kullanım çubuğu başlığın altında tam satır, sola yaslı */
.rdx .rdusage { align-items: flex-start; min-width: 0; width: 100%; }
.rdx .rdusage__bar { width: 100%; max-width: 280px; }
/* Randomizer müzik kartı başlığı: başlık TAM satır, butonlar TAM satır,
ipucu yazısı butonlarla iç içe geçmesin (net alt boşluk) */
.muscard__head { flex-wrap: wrap; row-gap: 10px; align-items: flex-start; }
.muscard__head .setcard__title { flex: 1 1 100%; }
.muscard__btns { flex: 1 1 100%; justify-content: flex-start; }
.muscard__hint { margin-top: 10px; }
/* Plans üst barı: logo + butonlar sığmazsa sarsın, kenar boşluğu azalt */
.pwtop { padding: 14px 16px; flex-wrap: wrap; gap: 10px; }
/* --- Ayar kaydırıcıları: etiket + slider + % TEK satırda kalsın.
.sizewrap'in 220px min-width'i uzun etiketlerde (Reaction volume /
Background volume) slider'ı alt satıra atıyordu → min-width sıfırla. --- */
.setrow .sizewrap { min-width: 0; flex: 1 1 auto; }
/* --- Caption zaman çizelgesi araç çubuğu: Undo/Split/Delete/zoom
butonları ekran dışına taşmasın, alt satıra sarsın --- */
.tlbox__bar { flex-wrap: wrap; row-gap: 8px; }
.tlbox__tools { flex-wrap: wrap; gap: 6px; }
.tlzoom { margin-left: 0; }
/* --- Calendar: "New post" ay başlığıyla (July 2026) AYNI satırda sağda;
"Today" butonu mobilde gizli (gereksiz — gün görünümünün kendi navı var). --- */
#calToday { display: none; }
.calx__head { flex-wrap: nowrap; gap: 10px; margin-bottom: 14px; }
.calx__nav { flex: 1 1 auto; min-width: 0; }
.calx__title { min-width: 0; font-size: 20px; }
.calx__actions { flex: 0 0 auto; }
}
/* --- 2b) Çok dar telefonlar: başlık punto biraz küçülsün (taşmaya karşı) --- */
@media (max-width: 380px) {
.postsx__title, .an2-head .postsx__title { font-size: 22px; }
.postsx__sub { font-size: 12.5px; }
}
/* =========================================================
Settings › Usage paneli (kredi yok → saatlik fair-use kullanımı)
========================================================= */
.usage { display: flex; flex-direction: column; gap: 16px; }
.usage__row { display: flex; flex-direction: column; gap: 6px; }
.usage__top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.usage__name { font-size: 14px; font-weight: 700; color: var(--text); }
.usage__num { font-size: 13px; font-weight: 700; color: var(--text-mute); font-variant-numeric: tabular-nums; white-space: nowrap; }
.usage__unit { font-weight: 500; color: var(--text-dim); }
.usage__bar { height: 6px; border-radius: 999px; background: var(--bg-elev); overflow: hidden; }
.usage__bar i { display: block; height: 100%; border-radius: 999px; background: var(--violet); transition: width .3s ease; }
.usage__reset { font-size: 12px; color: var(--text-dim); }
/* KREDİ KALDIRILDI: Marketplace sayfası ve sidebar bağlantıları TAMAMEN silindi
(2026-07). Bu satır yalnızca eski cache'lenmiş HTML'lere karşı emniyet. */
.sidebar__item[href$="marketplace.html"] { display: none !important; }
/* =========================================================
Connections — tablo görünümü: her platform bir sütun.
Kart/kutu YOK — transparan zemin, ince ayraç çizgileri. */
.cnxt__scroll { overflow-x: auto; scrollbar-width: thin; }
.cnxt__grid { display: grid; }
.cnxt__col { min-width: 0; }
.cnxt__col + .cnxt__col { border-left: 1px solid var(--border); }
.cnxt__colhead { display: flex; align-items: center; gap: 8px; height: 48px; padding: 0 12px; border-bottom: 1px solid var(--border); }
.cnxt__colic { line-height: 0; flex: none; }
.cnxt__colname { font-size: 13.5px; font-weight: 700; letter-spacing: .01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cnxt__coladd { margin-left: auto; flex: none; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 7px; border: 1px solid transparent; background: none; color: var(--text-dim); font-size: 15px; font-weight: 700; line-height: 1; cursor: pointer; opacity: 0; transition: opacity .12s, background .12s, color .12s; }
.cnxt__col:hover .cnxt__coladd { opacity: 1; }
.cnxt__coladd:hover { background: var(--bg-elev); color: var(--violet-light); border-color: var(--border); }
.cnxt__coladd:disabled { display: none; }
.cnxt__cells { display: flex; flex-direction: column; gap: 4px; padding: 10px 8px; min-height: 140px; }
.cnxt__acc { position: relative; display: flex; align-items: center; gap: 9px; padding: 8px; border-radius: 11px; transition: background .12s; }
.cnxt__acc:hover { background: var(--bg-elev); }
.cnxt__acc--pending { opacity: .85; }
.cnxt__pfp { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; flex: none; }
.cnxt__pfp--brand { display: grid; place-items: center; color: #fff; line-height: 0; }
.cnxt__meta { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 2px; }
.cnxt__name { font-size: 13px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cnxt__sub { font-size: 11px; font-weight: 600; color: var(--text-mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cnxt__sub b { font-weight: 800; }
.cnxt__sub.is-near b { color: #ffb84d; }
.cnxt__sub.is-full b { color: #ff8585; }
/* Sağdaki TEK slot: normalde yeşil nokta; hover'da nokta gizlenir, çöp gelir */
.cnxt__side { position: relative; margin-left: auto; flex: none; width: 24px; height: 24px; }
.cnxt__side .pdot { position: absolute; inset: 0; margin: auto; transition: opacity .12s; }
.cnxt__x { position: absolute; inset: 0; width: 24px; height: 24px; display: grid; place-items: center; border: 0; border-radius: 7px; background: none; color: var(--text-dim); cursor: pointer; opacity: 0; transition: opacity .12s, color .12s, background .12s; }
.cnxt__x svg { width: 14px; height: 14px; }
.cnxt__acc:hover .cnxt__side .pdot { opacity: 0; }
.cnxt__acc:hover .cnxt__x { opacity: 1; }
.cnxt__x:hover { color: #ff8585; background: rgba(214,60,80,.14); }
/* Dokunmatik: hover yok → nokta ve çöp YAN YANA, ikisi de hep görünür */
@media (hover: none) {
.cnxt__side { width: auto; height: auto; display: flex; align-items: center; gap: 10px; }
.cnxt__side .pdot { position: static; }
.cnxt__x { position: static; opacity: 1; }
.cnxt__acc:hover .cnxt__side .pdot { opacity: 1; }
}
.cnxt__hint { text-align: center; padding: 16px 4px 4px; font-size: 12.5px; color: var(--text-dim); }
.cnxt__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 10px; padding: 12px 4px 0; border-top: 1px solid var(--border); font-size: 12.5px; color: var(--text-mute); }
.cnxt__foot a { color: var(--violet-light); font-weight: 700; text-decoration: none; }
.cnxt__foot a:hover { text-decoration: underline; }
/* Yüklenme iskeleti — avatar dairesi + iki satır + sağda nokta, nabız atar */
.cnxt__skel { display: flex; align-items: center; gap: 9px; padding: 8px; animation: cnxtPulse 1.4s ease-in-out infinite; }
.cnxt__skel-av { width: 32px; height: 32px; border-radius: 50%; background: var(--bg-elev); flex: none; }
.cnxt__skel-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.cnxt__skel-tx i { display: block; height: 9px; border-radius: 5px; background: var(--bg-elev); }
.cnxt__skel-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--bg-elev); flex: none; margin-left: auto; }
@keyframes cnxtPulse { 0%, 100% { opacity: 1; } 50% { opacity: .4; } }
/* Telefon: sütunlar ALT ALTA tek kolon (Instagram → TikTok → YouTube …) —
yan yana sıkışmak yerine her platform kendi bölümü olur */
@media (max-width: 720px) {
.cnxt__grid { grid-template-columns: 1fr !important; }
.cnxt__col + .cnxt__col { border-left: 0; border-top: 1px solid var(--border); }
.cnxt__colhead { height: 46px; border-bottom: 0; }
.cnxt__cells { min-height: 0; padding: 0 8px 12px; }
.cnxt__coladd { opacity: 1; } /* hover yok → + her zaman görünür */
}
/* ---- Calendar: Week/Month toggle + hafta görünümü (post-bridge dili) ---- */
.calseg { display: inline-flex; background: var(--bg-elev); border: 1px solid var(--border); border-radius: 10px; padding: 3px; gap: 2px; }
.calseg button { border: 0; background: none; color: var(--text-mute); font-family: inherit; font-size: 12.5px; font-weight: 700; padding: 7px 15px; border-radius: 8px; cursor: pointer; transition: background .12s, color .12s; }
.calseg button:hover { color: var(--text); }
.calseg button.is-active { background: var(--violet); color: #fff; }
.calwk { display: grid; grid-template-columns: repeat(7, 1fr); }
.calwk__col { min-width: 0; }
.calwk__col + .calwk__col { border-left: 1px solid var(--border); }
/* Sabit yükseklik + dikey ortalama: bugünün mor rozeti satır hizasını BOZMASIN */
.calwk__colhead { display: flex; align-items: center; gap: 6px; height: 48px; padding: 0 12px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-dim); border-bottom: 1px solid var(--border); }
.calwk__colhead b { font-size: 14px; color: var(--text); letter-spacing: 0; }
.calwk__col.is-today .calwk__colhead b { display: inline-grid; place-items: center; min-width: 24px; height: 24px; padding: 0 4px; border-radius: 8px; background: var(--violet); color: #fff; }
.calwk__cells { display: flex; flex-direction: column; gap: 8px; padding: 12px 9px; min-height: 420px; }
.calwk__card { display: flex; flex-direction: column; gap: 7px; border: 1px solid var(--border); border-radius: 12px; padding: 10px 11px; cursor: pointer; background: transparent; transition: background .12s, border-color .12s; }
.calwk__card:hover { background: var(--bg-elev); border-color: var(--border-lt); }
.calwk__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.calwk__time { font-size: 12.5px; font-weight: 800; white-space: nowrap; }
.calwk__cap { font-size: 11.5px; font-weight: 500; color: var(--text-mute); line-height: 1.45; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; }
.calwk__pill { align-self: flex-start; font-size: 9.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; padding: 3px 9px; border-radius: 6px; background: var(--bg-elev); color: var(--text-mute); }
.calwk__pill.is-posted { background: rgba(62,224,111,.12); color: #8fe3a1; }
.calwk__pill.is-scheduled { background: rgba(105,101,219,.16); color: var(--violet-light); }
.calwk__pill.is-failed { background: rgba(214,60,80,.15); color: #ff9aa6; }
/* Posting-only plan: sidebar'da kilitli Editing araçları */
.sidebar__item.is-locked { opacity: .5; }
.sidebar__item.is-locked:hover { opacity: .75; }
.sidebar__lock { margin-left: auto; flex: none; color: var(--text-dim); }
/* Plans: Posting only / Posting + Editing aile seçici — Monthly/Yearly ile AYNI dil (altı mor çizgili sekme) */
.pwfam { display: flex; justify-content: center; gap: 8px; width: fit-content; }
.pwfam button { position: relative; border: 0; background: none; color: var(--text-mute); font-family: inherit; font-size: 15px; font-weight: 700; padding: 10px 12px; cursor: pointer; transition: color .15s; }
.pwfam button:hover { color: var(--text); }
.pwfam button.is-active { color: var(--text); }
.pwfam button.is-active::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: 4px; height: 2px; border-radius: 2px; background: var(--violet); }
.pwplan__dim { color: var(--text-dim); }
/* =========================================================
Dashboard yenileme: modül satırları → premium kart ızgarası
(landing'deki tools kart dili) + posting modu "Up next" paneli. */
.dashx .modules { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-bottom: 26px; }
.dashx .module { display: flex; align-items: flex-start; gap: 14px; padding: 20px; border: 1px solid var(--border); border-radius: 18px; background: var(--bg-card); box-shadow: none; }
.dashx .module::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(130% 90% at 100% 0%, color-mix(in srgb, var(--c) 10%, transparent), transparent 60%); opacity: 0; transition: opacity .18s; pointer-events: none; }
.dashx .module:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--c) 55%, var(--border)); box-shadow: 0 18px 44px rgba(0,0,0,.35); }
.dashx .module:hover::after { opacity: 1; }
.dashx .module__icon { width: 46px; height: 46px; border-radius: 14px; }
.dashx .module__txt h3 { font-size: 15.5px; font-weight: 800; margin-bottom: 3px; }
.dashx .module__txt p { font-size: 12.5px; color: var(--text-mute); line-height: 1.5; }
.dashx .module__go { position: static; margin-left: auto; align-self: center; width: auto; opacity: 1; transform: none; color: var(--text-dim); font-size: 12.5px; transition: color .15s, transform .15s; white-space: nowrap; }
.dashx .module:hover .module__go { color: var(--c); transform: translateX(3px); }
@media (max-width: 760px) { .dashx .modules { grid-template-columns: 1fr; } }
/* Up next — posting modunda sıradaki planlı postlar */
#dashUpNext { margin-bottom: 22px; }
#dashUpNext .dashx__label { margin-bottom: 8px; }
.upnext { border: 1px solid var(--border); border-radius: 18px; overflow: hidden; background: var(--bg-card); }
.upnext__row { display: flex; align-items: center; gap: 14px; padding: 13px 16px; color: var(--text); text-decoration: none; transition: background .12s; }
.upnext__row + .upnext__row { border-top: 1px solid var(--border); }
.upnext__row:hover { background: var(--bg-elev); }
.upnext__when { flex: none; width: 118px; display: flex; flex-direction: column; gap: 1px; }
.upnext__when b { font-size: 13.5px; font-weight: 800; }
.upnext__when small { font-size: 11px; font-weight: 600; color: var(--text-dim); }
.upnext__cap { flex: 1; min-width: 0; font-size: 13px; color: var(--text-mute); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.upnext__ics { flex: none; display: inline-flex; gap: 6px; color: var(--text-mute); line-height: 0; }
.upnext__empty { padding: 22px 16px; text-align: center; font-size: 13px; color: var(--text-dim); }
.upnext__empty a { color: var(--violet-light); font-weight: 700; }
@media (max-width: 560px) { .upnext__when { width: 92px; } }
/* Sidebar cilası: üstte Create post, altta profil kartı (Buffer/post-bridge dili) */
.sidebar__new {
display: flex; align-items: center; justify-content: center; gap: 8px;
margin: 2px 2px 12px; padding: 11px 12px; border-radius: 12px;
font-size: 14px; font-weight: 700; color: #fff;
background: linear-gradient(135deg, #7c78f2 0%, var(--violet) 60%, #5b57d1 100%);
/* PARLAMA KAPALI (2026-07-29) — kenar çubuğundaki Create post butonu boşta
bile hale yayıyordu. Gradyan ve hover'daki hafif yükselme kaldı. */
transition: transform .15s, filter .15s;
}
.sidebar__new:hover { transform: translateY(-1px); filter: brightness(1.06); }
.sidebar__prof {
display: flex; align-items: center; gap: 10px; margin-top: 10px;
padding: 10px 11px; border: 1px solid var(--border); border-radius: 14px;
background: var(--bg-card); transition: background .15s, border-color .15s;
}
.sidebar__prof:hover { background: var(--bg-elev); border-color: var(--border-lt); }
.sidebar__prof-av { width: 32px; height: 32px; border-radius: 50%; flex: none; display: grid; place-items: center; background: var(--grad-violet); color: #fff; font-size: 13px; font-weight: 800; }
.sidebar__prof-t { min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.sidebar__prof-t b { font-size: 13px; font-weight: 700; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar__prof-t small { font-size: 10.5px; font-weight: 700; color: var(--text-dim); }
.sidebar__prof-out { flex: none; width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; border: 0; background: none; color: var(--text-dim); cursor: pointer; transition: background .12s, color .12s; }
.sidebar__prof-out:hover { background: rgba(214,60,80,.14); color: #ff8585; }
/* Bildirim zili: isim ile çıkış butonunun arasında (margin-left:auto artık burada) */
.sidebar__prof-bell { position: relative; margin-left: auto; flex: none; width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; border: 0; background: none; color: var(--text-dim); cursor: pointer; transition: background .12s, color .12s; }
.sidebar__prof-bell:hover { background: rgba(105,101,219,.18); color: var(--violet-light); }
.sidebar__prof-bell svg { display: block; }
.sidebar__prof-bell .notifbell__dot { top: 2px; right: 2px; }
/* =========================================================
Create post WIZARD: adım başlığı + gezinme (landing kimliği) */
.cwiz { display: flex; align-items: center; gap: 8px; padding: 2px 2px 14px; flex: none; }
.cwiz__st { display: inline-flex; align-items: center; gap: 8px; background: none; border: 0; cursor: pointer; font-family: inherit; color: var(--text-dim); font-size: 12.5px; font-weight: 700; padding: 4px 2px; transition: color .15s; }
.cwiz__st i { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 11.5px; font-weight: 800; background: var(--bg-elev); border: 1px solid var(--border-lt); color: var(--text-mute); transition: background .15s, color .15s, border-color .15s, box-shadow .15s; }
.cwiz__st:hover { color: var(--text); }
.cwiz__st.is-active { color: var(--text); }
.cwiz__st.is-active i { background: linear-gradient(135deg, #7c78f2, var(--violet)); border-color: transparent; color: #fff; box-shadow: 0 6px 16px rgba(105,101,219,.4); }
.cwiz__st.is-done { color: var(--text-mute); }
.cwiz__st.is-done i { background: rgba(105,101,219,.16); border-color: rgba(105,101,219,.4); color: var(--violet-light); }
.cwiz__ln { flex: 1; height: 2px; border-radius: 2px; background: var(--border); min-width: 14px; transition: background .2s; }
.cwiz__ln.is-done { background: var(--violet); }
.cstep[hidden] { display: none; }
.cwiznav { flex: none; display: flex; align-items: center; gap: 12px; padding: 12px 2px 0; border-top: 1px solid var(--border); margin-top: 10px; }
.cwiznav__hint { flex: 1; min-width: 0; font-size: 12px; color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cwiznav .btn { flex: none; }
.composex .cstep .apcard { border-top: 0; }
.composex .cstep .apcard:first-child { padding-top: 4px; }
/* Seçili görsel kutuları (apselbox içindeki img, video ile aynı davranır) */
.apselbox img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Telefon önizlemesinde görsel */
#composePrevImg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #000; }
/* Masaüstünde sidebar aç/kapa ve bildirim zili YOK (Buffer/post-bridge gibi) —
yalnızca mobil düzende görünürler */
@media (min-width: 901px) {
.appbar__toggle { display: none; }
.notifbell { display: none; }
}
/* =========================================================
Compose overhaul: tip seçici + kapalı hesap + review blokları
+ masaüstünde appbar YOK (marka sidebar'da) + TikTok chip fix */
.ptype { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 12px; }
.ptype__c {
display: flex; flex-direction: column; align-items: center; gap: 4px;
padding: 16px 10px 13px; border: 1px dashed var(--border-lt); border-radius: 14px;
background: none; color: var(--text-mute); font-family: inherit; cursor: pointer;
transition: border-color .15s, background .15s, color .15s, transform .15s;
}
.ptype__c svg { margin-bottom: 3px; }
.ptype__c b { font-size: 13.5px; font-weight: 800; color: var(--text); }
.ptype__c small { font-size: 10.5px; font-weight: 600; color: var(--text-dim); white-space: normal; text-align: center; line-height: 1.4; }
.ptype__c:hover { border-color: var(--violet); transform: translateY(-2px); }
.ptype__c.is-on { border-style: solid; border-color: var(--violet); background: rgba(105,101,219,.1); color: var(--violet-light); }
.ptype__note { font-size: 12px; color: var(--text-dim); margin: -2px 0 10px; }
/* Upload dropzone'u kütüphane ızgarasına yapışmasın */
.composex #srcUpload { margin-top: 14px; }
.apacct--off { opacity: .35; filter: grayscale(.6); cursor: not-allowed; }
/* Seçili hesap halkası HER platformda mor (TikTok'un siyah markası görünmüyordu) */
.apacct.is-on .apacct__pic { box-shadow: 0 0 0 2.5px var(--violet); border-radius: 50%; }
.pubrev { margin: 12px 0 4px; }
.pubrev__hd { font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--text-dim); margin-bottom: 8px; }
.pubrev__list { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: 14px; overflow: hidden; }
.pubrev__row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; }
.pubrev__row + .pubrev__row { border-top: 1px solid var(--border); }
.pubrev__th { flex: none; width: 44px; height: 60px; border-radius: 9px; overflow: hidden; background: #000; border: 1px solid var(--border-lt); display: grid; place-items: center; }
.pubrev__th video, .pubrev__th img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pubrev__thtxt { font-size: 15px; font-weight: 900; color: var(--violet-light); }
.pubrev__mid { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.pubrev__cap { font-size: 12px; color: var(--text-mute); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pubrev__cap.is-empty { color: var(--text-dim); font-style: italic; }
.pubrev__accs { display: flex; flex-wrap: wrap; gap: 6px; }
.pubrev__acc {
display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 7px;
border-radius: 999px; border: 1px solid rgba(105,101,219,.4); background: rgba(105,101,219,.1);
color: var(--text); font-family: inherit; font-size: 11px; font-weight: 700; cursor: pointer;
transition: opacity .12s, border-color .12s, background .12s; line-height: 1;
}
.pubrev__acc svg { display: block; }
.pubrev__acc.is-off { opacity: .38; border-color: var(--border); background: none; text-decoration: line-through; }
.pubrev__acc:disabled { cursor: default; }
/* HOVER EYLEMİ: çipin tıklanabilir olduğu ve NE yapacağı görünür olsun.
Dahil olan çip → KIRMIZI + “−” (bu posttan çıkar) · çıkarılmış çip → mor + “+” (geri ekle). */
.pubrev__acc__act { display: none; margin-left: 1px; }
.pubrev__acc:not(:disabled):hover .pubrev__acc__act { display: inline-flex; }
.pubrev__acc:not(:disabled):not(.is-off):hover {
background: rgba(214,60,80,.16); border-color: rgba(214,60,80,.6); color: #ff8f8f;
}
.pubrev__acc.is-off:not(:disabled):hover {
opacity: 1; text-decoration: none;
background: rgba(105,101,219,.16); border-color: rgba(105,101,219,.6); color: var(--violet-light);
}
.pubrev__when { flex: none; font-size: 11.5px; font-weight: 800; color: var(--violet-light); white-space: nowrap; }
/* Marka sidebar'ın üstünde; masaüstünde appbar tamamen gizli */
.sidebar__brand { display: flex; align-items: center; gap: 10px; margin: 4px 2px 16px; font-size: 20px; font-weight: 800; letter-spacing: -.02em; color: var(--text); }
.sidebar__brand img { border-radius: 7px; display: block; }
.sidebar__brand b { color: var(--violet-light); font-weight: 800; }
@media (min-width: 901px) {
.appbar { display: none; }
.layout.has-sidebar .sidebar { top: 0; height: 100vh; height: 100dvh; }
/* YALNIZ dashboard tepeye yapışmasın; diğer sayfalar eski (iyi) haliyle */
.dashx__hero { margin-top: 14px; }
.capwrap:not(.composex) .captop { margin-top: 10px; } /* Caption+Music / Split / TH → Repurposer'la aynı hizaya */
}
@media (max-width: 900px) {
.sidebar__brand { display: none; } /* mobilde marka appbar'da zaten var */
}
/* Text post öğeleri: seçim kutusunda "Aa" karosu + caption bloğunda silme ✕ */
.apselbox__txt { width: 100%; height: 100%; display: grid; place-items: center; background: rgba(105,101,219,.12); color: var(--violet-light); font-size: 20px; font-weight: 900; }
.apcapblock__h { position: relative; }
.apcapblock__x { position: absolute; right: 0; top: -2px; width: 22px; height: 22px; border: 0; border-radius: 7px; background: none; color: var(--text-dim); cursor: pointer; font-size: 12px; line-height: 1; }
.apcapblock__x:hover { background: rgba(214,60,80,.14); color: #ff8585; }
/* Repurposer: batch'in çıktıda hangi parça olduğunu söyleyen mor vurgu satırı */
/* Boş batch ipucunun 2. satırı: bu batch'in çıktıda kaçıncı parça olacağı */
.batchnote { margin: 9px 0 0; padding: 8px 12px; max-width: 460px; border-radius: 9px; font-size: 12.5px; line-height: 1.45; font-weight: 600; color: var(--violet-light); background: rgba(105,101,219,.12); border: 1px solid rgba(105,101,219,.28); }
.batchnote b { font-weight: 800; }
/* =========================================================
13" LAPTOP UYUMU (2026-07 — responsive audit)
1280x800 / 1440x900 (13" MacBook) ölçümlerinde yatay taşma
üreten ızgaralar. Tek kök neden: CSS Grid'de `1fr` aslında
`minmax(auto, 1fr)` demek; `auto` minimum = içeriğin
min-content genişliği. İçerik dar kapsayıcıya sığmayınca
track'ler şişip sayfayı yatay kaydırmaya zorluyor.
`minmax(0, 1fr)` bu tabanı kaldırır → track'ler kapsayıcıya
uyar, içerik normal şekilde sarar/kayar.
Kırılma noktası YOK: geniş ekranda 1fr zaten min-content'ten
büyük olduğu için 1920/2560 layout'u BİREBİR aynı kalır.
Masaüstü taban kuralları değiştirilmedi — yalnızca eklendi.
========================================================= */
/* Calendar — ay ızgarası: 7 hücre 940px kapsayıcıda 7x160px'e
şişiyordu (1423px doc genişliği → Cumartesi sütunu kesiliyor,
gün başlıkları hücrelerle hizasız). ÖNCELİK: "calendar tam
görünmüyor" şikayeti tam olarak buydu. */
.apcal__head,
.apcal__grid { grid-template-columns: repeat(7, minmax(0, 1fr)); }
/* Hücre içeriği (saat + platform ikonları) artık track'i geremez */
.apcal__cell { min-width: 0; }
.apcal__post { min-width: 0; }
.apcal__cap { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
/* Post çipi dar sütunda: çipin İÇİ de esnemeli. Sıra "saat | ikonlar |
@hesap ... durum noktası" idi ama saat/ikonlar/nokta hepsi flex:none
olduğu için hiçbiri küçülemiyor, taşan kısmı overflow:hidden kesiyordu
ve kesilen şey SON öğe — yani durum noktası — oluyordu. Nokta bu
tasarımda posted/failed'in TEK göstergesi (arka plan artık nötr), o
yüzden kaybolamaz. Çözüm: ikon şeridi küçülebilir olsun, nokta sabit. */
.apcal__ics { flex: 0 1 auto; min-width: 0; overflow: hidden; }
/* Hesap adı yoksa boş span 2 adet gap yiyordu (dar sütunda ~16px) */
.apcal__who:empty { display: none; }
/* 13" yoğunluk: çip iç boşluğunu/ikonları biraz kısarak ikonlar da sığsın.
Bu blok yalnız <=1440px'te — 1920/2560 çip metrikleri aynen korunur. */
@media (max-width: 1440px) {
.apcal__post { gap: 5px; padding: 7px; }
.apcal__pt { font-size: 11px; letter-spacing: -.01em; }
.apcal__ics { gap: 3px; }
.apcal__ic svg { width: 12px; height: 12px; }
/* Şerit tam 2 ikonluk: 3.'sü yarısından kesilip çirkin durmasın */
.apcal__ics .apcal__ic:nth-child(n+3) { display: none; }
}
/* Dashboard — modül kartları: 2 sütun 940px'de 567+519px'e
şişiyordu (1396px → "Split screen" ve "Video editor" kartları
ekranın sağından taşıyordu). */
.dashx .modules { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dashx .module { min-width: 0; }
.dashx .module__txt { min-width: 0; }
/* Connections — platform tablosu: .cnxt__grid'in min-content'i
(9 platform x 150px = 1350px) tek sütunlu .connwrap ızgarasını
1350px'e geriyordu; bu da yazarın kendi .cnxt__scroll
(overflow-x:auto) kaydırıcısını etkisiz bırakıp TÜM sayfayı
366px taşırıyordu (uyarı bandı dahil). minmax(0,1fr) ile
kaydırıcı yeniden devreye giriyor: tablo kendi içinde yatay
kayıyor, sayfa taşmıyor. */
.connwrap { grid-template-columns: minmax(0, 1fr); }
.cnxt { min-width: 0; }
/* ---- Posting (compose) adim gostergesi dar ekranda tasmasin (2026-07, JOB A) ----
Olcum: 4 adim + 3 cizgi + bosluklar = 426px gerekiyordu, 390px telefonda
kutuya 336px dusuyordu -> sayfa 68px YATAY kayiyordu.
Cozum: dar ekranda yalnizca AKTIF adimin etiketi yazilir; digerleri numarali
daire olarak kalir. Tasarim dili ayni, sadece sigdirilir.
Erisilebilirlik: butonlarda aria-label var, etiket gizlense de okunur.
Bu secicilerin dosyada DAHA SONRA ezen bir kurali YOK (kontrol edildi),
bu yuzden sona eklemek kaskadi bozmaz. Masaustu >600px etkilenmez. */
@media (max-width: 600px) {
.cwiz { gap: 6px; }
.cwiz__st { gap: 6px; min-height: 44px; padding: 4px; }
.cwiz__st > span { display: none; }
.cwiz__st.is-active > span { display: inline; }
.cwiz__ln { min-width: 8px; }
}
/* =========================================================
JOB D — MOBIL DUZELTMELERI (2026-07)
Dashboard · Created videos · Connections · Posts edit modal.
KURAL: her kural bir @media icinde; masaustu/web gorunumu
BIREBIR ayni kalir. 1920x1080 ve 1280x800'de dort sayfanin
TUM element geometrisi (rect/display/position/font-size/
padding/z-index/overflow/flex-wrap/grid-cols) once-sonra
olculdu: fark 0.
Dosyanin SONUNA eklendi cunku duzeltilen kurallarin bir kismi
(ornegin 13" laptop yamasindaki .dashx .modules) media
query'siz ve daha ASAGIDA oldugu icin eski mobil kurallari
eziyordu; sona eklemek kaskadi dogru yone cevirir.
========================================================= */
/* --- D1) Dashboard: modul kartlari telefonda TEK sutun -------------
Neden bozuktu: 13" laptop yamasindaki media query'siz
`.dashx .modules { grid-template-columns: repeat(2, minmax(0,1fr)) }`
kurali, daha YUKARIDAKI `@media (max-width:760px){...1fr}` kuralini
eziyordu (esit ozgulluk + daha sonra gelmek). Olcum: 430px'te
grid `194px 194px` idi. Burada minmax(0,1fr) korunarak (yatay
tasma korumasi kaybolmasin) tek sutuna dusuruluyor. */
@media (max-width: 760px) {
.dashx .modules { grid-template-columns: minmax(0, 1fr); }
}
/* --- D2) Dashboard: "New post" butonu SAGDA ------------------------
.dashx__hero flex-wrap:wrap; baslik + buton sigmayinca buton alt
satira dusuyor ve `justify-content: space-between` tek ogeli
satirda onu SOLA yasliyordu. margin-left:auto ile her durumda saga
yaslanir (sigdigi genislikte space-between zaten sagda tutuyor,
yani gorunum degismez). */
@media (max-width: 560px) {
.dashx__hero .btn--primary { margin-left: auto; }
}
/* --- D3) Created videos: mobil baslik + toplu secim araclari -------
Onceki durum: `@media (max-width:820px){ .rdtools{display:none!important} }`
telefonda Select all / Move / Download / Delete VE klasor kontrolunu
tamamen gizliyordu; `.rnitem__check` de gizliydi, yani tek bir video
bile secilemiyordu.
Yeni duzen (sahibin istedigi):
satir 1 Created videos
satir 2 "30 videos" "982 MB / 50.00 GB used"
satir 3 [==== kullanim cubugu ====]
satir 4 [Select all] [n secili] [Klasor] [tasi][indir][sil]
DOM'a DOKUNULMADI: iki sarmalayici (.postsx__top > div ve .rdusage)
`display: contents` ile grid'e seffaflastirildi, boylece ic ogeler
dogrudan grid hucrelerine yerlesti. Ayni butonlar, ayni id'ler,
ayni renders.js olay dinleyicileri. */
@media (max-width: 560px) {
.rdx .postsx__top {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
column-gap: 10px;
row-gap: 5px;
align-items: center;
margin-bottom: 10px;
}
.rdx .postsx__top > div:first-child { display: contents; }
.rdx .postsx__title { grid-column: 1 / -1; grid-row: 1; }
.rdx .postsx__sub { grid-column: 1; grid-row: 2; margin-top: 0; justify-self: start; }
/* .rdusage da seffaf: yazi 2. satirin SAGINA, cubuk 3. satira tam genislik */
.rdx .rdusage { display: contents; }
.rdx .rdusage__txt { grid-column: 2; grid-row: 2; justify-self: end; white-space: nowrap; }
.rdx .rdusage__bar { grid-column: 1 / -1; grid-row: 3; width: auto; max-width: none; }
/* Arac cubugu geri geliyor — TEK satir, kompakt */
.rdx .rdtools {
display: flex !important;
flex-wrap: nowrap;
align-items: center;
gap: 8px;
margin: 0 0 12px;
position: relative; /* klasor panelinin hizalama atasi (asagida) */
}
.rdx .rdtools__all { flex: none; gap: 6px; font-size: 12px; }
.rdx .rdtools__all input { width: 15px; height: 15px; }
.rdx .rdtools__count { flex: 0 1 auto; min-width: 0; font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rdx .rdtools > span[style] { flex: 1 1 0; min-width: 0; } /* aradaki bosluk once kisilir */
.rdx #rdFolderWrap { flex: none; }
/* min-height dokunma hedefini YUKSELTIR ama satirin GENISLIK butcesini
hic yemez — tek satir kurali bozulmadan parmak icin buyur. */
.rdx #rdFolderWrap .pchan__btn { padding: 5px 8px; font-size: 11.5px; gap: 5px; min-height: 32px; }
/* NOT: burada bir `.fld__nm{max-width:78px}` kurali vardi; `.fld__nm`
yalnizca PANEL satirlarinda kullaniliyor (dugmenin etiketi
`.pchan__lbl`), yani dugmeyi hic daraltmiyor, buna karsilik panel
artik tam arac cubugu genisliginde oldugu icin klasor adlarini
gereksiz yere kirpiyordu. Kaldirildi. */
.rdx .rdtools__acts { flex: none; gap: 6px; }
.rdx .rdtools__acts .btn--icon { padding: 6px 7px; min-height: 32px; }
.rdx .rdtools__acts .btn--icon svg { width: 15px; height: 15px; }
/* Klasor paneli: artik DUGMEYE degil ARAC CUBUGUNA yaslanir.
Olculen kusur: `.pchan__panel{position:absolute;right:0;width:244px}`
paneli dugmenin sag kenarina asiyordu; 360px'te dugmenin sagi 233px'te
oldugu icin panel -11px'ten basliyor, yani ekranin SOLUNDAN tasiyordu.
#rdFolderWrap'i `position:static` yapinca panelin hizalama atasi
`.rdtools` olur; left:0/right:0 ile tam arac cubugu genisligine oturur
ve hicbir viewport'ta tasmaz (360'ta 332px, 430'da 402px olculdu). */
.rdx #rdFolderWrap { position: static; }
.rdx #rdFolderWrap .pchan__panel { left: 0; right: 0; width: auto; max-width: none; }
/* Kart uzerindeki secim kutusu: hover yok → HER ZAMAN gorunur.
Kutunun kendisi 19x19 — parmak icin kucuk. padding:7px ile dokunma
alani 33x33 olur; top/left 8px→1px verilerek GORSEL kutu tam olarak
eski yerinde (kartin 8,8 kosesinde) kalir. */
.rdx .rnitem__check { display: block !important; opacity: 1; top: 1px; left: 1px; padding: 7px; }
}
/* --- D3b) Created videos: en dar telefonlarda arac cubugu olcusu ---------
Olcum (D3 uygulandiktan SONRA, 360x780): satirin ic genisligi 332px ama
[Select all 69] + ["3 selected" 50] + [klasor 107] + [3 ikon 105] + 4x8
bosluk = 363px isteniyordu. Tek esneyen oge "n selected" oldugu icin o
19px'e kadar eziliyordu (scrollWidth 50 / clientWidth 19 → "3 s…").
375'te de kirpiliyordu (34/50), 390'da 1px kaliyordu (49/50).
Cozum: <=400px'te tipografi ve denetim olculeri bir kademe daha kisilir;
toplam ~31px kazanilir, hicbir metin kirpilmaz. 401px ve UZERI hic
etkilenmez (yani 428/430 Pro Max olculeri D3'teki gibi kalir). */
@media (max-width: 400px) {
.rdx .rdtools { gap: 6px; }
.rdx .rdtools__all { gap: 5px; font-size: 11.5px; }
.rdx .rdtools__all input { width: 14px; height: 14px; }
.rdx .rdtools__count { font-size: 10.5px; }
.rdx #rdFolderWrap .pchan__btn { padding: 5px 7px; font-size: 11px; gap: 4px; }
.rdx #rdFolderWrap .pchan__btn svg { width: 13px; height: 13px; }
.rdx .rdtools__acts { gap: 5px; }
.rdx .rdtools__acts .btn--icon { padding: 6px; }
.rdx .rdtools__acts .btn--icon svg { width: 14px; height: 14px; }
}
/* --- D4) Connections: yesil nokta + sil butonu dokunmatikte ---------
OLCULEN HATA (varsayim degil): 430px genislikte bu tarayici
`(hover: none)` ile ESLESMIYOR (hoverNone:false, pointerCoarse:false),
yani 2671'deki dokunmatik blok HIC calismiyordu. Sonuc:
`.cnxt__x` opacity:0 ama `position:absolute; inset:0` ile yesil
noktanin TAM USTUNDE duruyor ve tiklamayi yutuyor —
document.elementFromPoint(nokta merkezi) → BUTTON.cnxt__x.
Yani telefonda yesil noktaya dokunmak "Disconnect" tetikliyordu;
yapiskan :hover de silme ikonunu bir an gosterip kaybediyordu
("delete flashes away and leaves the dot").
COZUM: dokunmatik duzeni yalnizca pointer media'ya degil GENISLIGE
de bagla (bu dosyadaki diger Connections mobil bloguyla ayni
kirilma noktasi: 720px). Nokta ve sil YAN YANA, ikisi de kalici,
ust uste binme yok, :hover hicbir seyi gizleyemez.
>720px masaustu hover davranisi AYNEN korunur.
NOT: bu blok bilerek YALNIZ genislige bagli. `(hover:none)` de eklenseydi
720px'ten GENIS dokunmatik cihazlarda (tablet) gorunum degisirdi; oradaki
davranis zaten satir 2671'deki eski `(hover:none)` blogu ile tutarli. */
@media (max-width: 720px) {
.cnxt__side { width: auto; height: auto; display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.cnxt__side .pdot { position: static; opacity: 1; }
.cnxt__x {
position: static; opacity: 1; flex: none;
width: 34px; height: 34px; border-radius: 9px;
border: 1px solid var(--border); background: var(--bg-soft); color: var(--text-mute);
-webkit-tap-highlight-color: rgba(214,60,80,.2);
}
.cnxt__x svg { width: 15px; height: 15px; }
/* Yapiskan hover ikisini de OYNATAMAZ */
.cnxt__acc:hover .cnxt__side .pdot { opacity: 1; }
.cnxt__acc:hover .cnxt__x { opacity: 1; }
/* Dokunmatikte :hover TAKILI kalir; `.cnxt__x:hover{color:#ff8585;
background:rgba(214,60,80,.14)}` bir kez dokununca butonu KALICI
kirmiziya boyuyordu (satiri terk etmeden hover dusmuyor). Geri
bildirim :active'e tasindi: basarken kirmizi, birakinca notr. */
.cnxt__x:hover { color: var(--text-mute); background: var(--bg-soft); }
.cnxt__x:active { color: #ff8585; background: rgba(214,60,80,.14); }
}
/* --- D5) Posts › "Edit scheduled post": sekmeler TEK satir ---------
`.pedit__tabs` uzerindeki `flex-wrap: wrap`, 860px'teki
`.ptabs { overflow-x: auto }` kuralini etkisiz birakiyordu: sekmeler
kaymak yerine 2. satira sariyordu (olcum: 3. hesap secilince nav
yuksekligi 41px → 84px). nowrap + yatay kaydirma ile tek satirda
kalir; kaydirma cubugu gizli, secili sekmenin mor alt cizgisi
korunur. */
@media (max-width: 720px) {
.pedit__tabs {
flex-wrap: nowrap;
overflow-x: auto;
overflow-y: hidden;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
overscroll-behavior-x: contain;
}
.pedit__tabs::-webkit-scrollbar { display: none; }
.pedit__tabs > button { flex: 0 0 auto; white-space: nowrap; }
}
/* ---- JOB D mobil blogu SONU ---- */
/* ================================================================
MOBİL DÜZELTMELERİ — Calendar / Repurposer / Create post
(2026-07, JOB E). HEPSİ media query İÇİNDE; 1920 ve 1280
ölçümleri bu blok eklendikten sonra bit bazında AYNI kaldı.
================================================================ */
/* ---- 1) CALENDAR: Week/Month anahtarı telefonda YOK ----
Ölçüm: #apCal (hafta/ay ızgarası) zaten ≤700px'te display:none.
Yani segment, GÖRÜNMEYEN bir ızgarayı değiştiriyordu — telefonda
işlevsiz bir denetimdi ve başlığı sıkıştırıyordu (360px'te başlık
2 satıra taşıp 50.6px'e çıkıyordu). Kaldırıldı; başlık yeniden
dengelendi: [‹ tarih aralığı ›] solda, "+ New post" sağda, tek satır.
NOT: app.css:669'daki `.calx__head{display:none}` kuralı, dosyanın
ilerisindeki `.calx__head{display:flex}` (satır ~1971) tarafından
eziliyor — başlık telefonda GÖRÜNÜR durumda. Burada onu gizlemiyoruz,
sahibin istediği gibi düzenliyoruz. */
@media (max-width: 700px) {
#calSeg { display: none; }
.calx__head { gap: 10px; margin: 6px 2px 14px; flex-wrap: nowrap; align-items: center; }
.calx__nav { flex: 1 1 auto; min-width: 0; gap: 6px; }
/* min-width:210px dar ekranda başlığı kırıyordu */
/* ortalı: hemen altındaki .apday__nav ile aynı ritim */
.calx__title { min-width: 0; flex: 1 1 auto; text-align: center; font-size: 16px;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.calx__arrow { flex: none; width: 32px; height: 32px; }
.calx__actions { flex: none; gap: 8px; }
}
/* ESKİDEN burada bir `@media (max-width:400px)` bloğu vardı:
`.calx__nav{flex:1 1 100%}` + `.calx__actions{flex:1 1 100%}` +
`.calx__actions .btn{flex:1}`. O zamanki satır [‹ tarih aralığı ›] +
"+ New post" idi ve ikisi 400px'e sığmıyordu. `.calx__nav` artık
≤700px'te display:none (H3 bloğu) ve satırda başlık + kompakt buton
var — o kurallar 360/375/390/393'te butonu TAM GENİŞLİĞE geri
çekip sahibin şikâyetini üretiyordu. Blok tamamen kaldırıldı.
(Buraya bir punto küçültmesi denendi ama ÖLÇÜLDÜ: aynı özgüllükteki
H3 bloğu dosyada DAHA SONRA geldiği için hiç uygulanmıyordu —
dosyada duran ama kazanmayan bir kural bırakmıyoruz.) */
/* ---- 2) REPURPOSER: başlık şeridi ----
Sayfa açıklaması telefonda gizlenir; "Repurposer" kendi satırında,
altında iki buton YAN YANA ve sağa yaslı: "How it works" hemen solda,
"+ Add batch" en sağda (birincil eylem başparmağın altında).
TARİHÇE — bu satır iki kez değişti, ikisini de ÖLÇTÜK:
1) Önce `justify-content` hiç uygulanmıyordu: aynı kırılma noktasındaki
`.postsx__top > .repx__btns { justify-content: flex-start }` (satır
~2571) iki sınıflı (0-2-0) olduğu için tek sınıflı `.repx__btns`
kuralını eziyordu — butonlar sola yığılıyordu.
2) Sonra 0-3-0'lık `.repx .postsx__top > .repx__btns{space-between}`
eklendi; ölçüm 360px'te "How it works" 16..154, "+ Add batch"
229.7..344 → aralarında 75.6px boşluk. Sahibin kararı: ayrı
köşelerde iyi durmuyor, YAN YANA olsunlar.
ÇÖZÜM: özgüllük yarışını sürdürmek yerine ~2571'deki kuraldan
`justify-content` TAMAMEN kaldırıldı (orada zaten gereksizdi: bu blok
`.postsx__top`u `display:block` yapıyor, oradaki `flex:1 1 100%` de
ölü). Hizalama artık YALNIZCA aşağıdaki tek kuralda tanımlı ve onu
ezen başka bir kural yok. */
@media (max-width: 560px) {
.repx .postsx__top { display: block; margin-bottom: 12px; }
.repx .postsx__sub { display: none; }
.repx__btns { display: flex; justify-content: flex-end; align-items: center;
gap: 8px; width: 100%; margin-top: 10px; align-self: auto; }
.repx__btns .btn { flex: none; min-height: 36px; }
}
/* ---- 3) REPURPOSER: Music bloğu ----
Ölçülen kusur: #musicInfo + #musicAdd .muscard__head içinde iki
satıra sarıyordu ve `.repx .muscard__hint{margin:-6px 0 12px}`
negatif üst boşluğu paragrafı butonların İÇİNE çekiyordu
(ölçüm: 124x6px ve 103x6px çakışma — 360'tan 430'a kadar hepsinde).
Çözüm: telefonda "How it works" kaldırılır, "+ Add music" MUSIC
başlığıyla AYNI satıra alınır, negatif margin sıfırlanır. */
@media (max-width: 560px) {
#musicInfo { display: none; }
.muscard__head { flex-wrap: nowrap; gap: 8px; align-items: center; }
.muscard__head .setcard__title { margin-bottom: 0; min-width: 0; flex: 1 1 auto; }
.muscard__btns { flex: none; margin-left: auto; }
.muscard__btns .minibtn { min-height: 34px; white-space: nowrap; }
/* negatif margin çakışmanın doğrudan sebebiydi */
.repx .muscard__hint { margin: 10px 0 12px; }
.muscard__hint { line-height: 1.5; }
.muscard__tip { display: block; margin-top: 4px; }
}
/* ---- 4) REPURPOSER: Mix settings + fair-use notu ----
.setrow yatay flex'ti; "Videos to generate" etiketi + 220px'lik
slider dar ekranda birbirini eziyordu. Telefonda satırlar dikey. */
@media (max-width: 560px) {
.repx .setrow { flex-direction: column; align-items: stretch; gap: 10px; padding: 12px 0; }
.repx .setlabel { font-size: 13px; }
.repx .sizewrap { min-width: 0; width: 100%; }
.repx .segs { align-self: flex-start; }
.repx .segs button { padding: 9px 16px; } /* dokunma hedefi */
.repx .limits-note { align-items: flex-start; line-height: 1.5; }
.repx .limits-note::before { line-height: 1.4; }
.repx .mixfoot .btn { min-height: 44px; justify-content: center; }
/* "Save to folder" (JOB I / madde 1): satır artık DİKEY DEĞİL — etiket
solda, seçici sağda (aşağıdaki H5 bloğu). Düğme bu yüzden tam genişlik
olamaz: doğal genişlikte kalır, gerekirse kısılır ve etiket sarar.
Panel masaüstündeki gibi düğmenin SAĞ kenarına hizalı açılır; genişliği
viewport'a kilitlenir (min(244px, 100vw-32px)) ki 360px'te soldan
taşmasın — rdx'te ölçülen kusurun aynısına düşmeyelim. */
.repx .rzfld .pchan__btn { width: auto; max-width: 100%; justify-content: space-between; min-height: 40px; }
.repx .rzfld .pchan__panel { left: auto; right: 0; width: min(244px, calc(100vw - 32px)); max-width: none; }
}
/* ---- 5) CREATE POST (compose) adım 4: auto-stagger satırı ----
Ölçüm: .apsched__grid4 telefonda 4 sütuna zorluyordu (1.3fr 1fr
.62fr .95fr). "Time" düğmesi 113px içerik istiyor ama 71–89px
alıyordu → içerik kırpılıyor ve #bulkGap'in üstüne biniyordu
(360/375'te ölçülen çakışma: 9x26px ve 5x26px; kırpılma 430'da
BİLE vardı). Çözüm: 2x2 ızgara — her denetim tam görünür. */
@media (max-width: 560px) {
.apsched__grid4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.apsched__grid4 .apfield { margin-bottom: 0; }
.apsched__grid4 .apinput { min-height: 40px; }
.apsched__grid4 .tpick, .apsched__grid4 .dpick { min-width: 0; }
.apsched__row { flex-wrap: wrap; }
.apsched__row .apinput, .apsched__row .dpick, .apsched__row .tpick { min-height: 40px; }
}
/* =================================================================
JOB H — MOBIL DUZELTMELERI (2026-07). Sahibin 3. tur listesi.
Create post · Connections · Calendar · Repurposer.
(Analytics'in kendi kurallari analytics.html icindeki