/* RUPO Premium -- CALISMA ALANI, DOSYA YUKLENDIKTEN SONRAKI GORUNUM (v2)
   =====================================================================
   Kapsam: yalnizca ".tw" (calisma alani karti) icindeki ACIK adimlarin
   govdesi -- durum seridi, kaynak karti, ayar kartlari, secim cipleri,
   girdiler, eylem cubugu (ozet + baslat), ilerleme ve sonuc panelleri.
   Kartin basligi (.tw-tepe), adim cubugu (.tw-ray) ve dosya birakma
   alani (.tw-drop) DEGISMEDI: yukleme oncesi gorunum begenilmisti.

   NEDEN AYRI DOSYA
   Ayni siniflar uc eski dosyada (shell.css, arac-onizleme.css,
   workspace.css) ust uste tanimli; hepsini yerinde duzeltmek yerine
   tek bir katman en sona yukleniyor ve "#view .tw" ozgullugu ile
   hepsinin ustune yaziyor. 115 aracin 96'si ayni VOP ekranini
   (shell-vop.js), geri kalani kendi ekranlarini kullaniyor; ortak
   ilkeller (kart, cip, girdi, dugme, etiket) burada bir kez
   tanimlanip hepsine uygulaniyor.

   YERLESIM (VOP, genis ekran)
     [ durum seridi: * Dosya hazir  ornek.mp4  [420 KB][00:04][MP4]   ]
     [ KAYNAK karti      ] [ AYARLAR: numarali ayar kartlari          ]
     [ onizleme + olcu   ] [ 01 Kalite  02 Cikti bicimi  > Gelismis  ]
     [ EYLEM: OZET  Cikti: WEBM - sure ~00:04          [ > Baslat ]  ]

   TASARIM DILI (site.css ile ayni): koyu zemin, gumus vurgu, tek
   yazi ailesi, 10px buyuk harf "overline" etiketler, 12-14px radius,
   ince (#ffffff14) cizgiler, secili durum = gumus dolgu + koyu yazi.  */

#view .tw{
  --w-bg:#131416;--w-panel:#17191c;--w-panel-2:#1e2125;--w-card:#141618;--w-sunken:#0e0f11;
  --w-line:#272b30;--w-line-2:#353a40;--w-line-3:#565c64;
  --w-text:#f3f5f6;--w-muted:#aab0b6;--w-dim:#7f868e;
  --w-silver:linear-gradient(135deg,#f7f8f9 0%,#d9dde1 45%,#c3c8cd 100%);
  --w-ink:#16181b;--w-r:14px;--w-r-sm:10px;
  --w-focus:0 0 0 3px #ffffff14;
}

/* ---------------- adim govdesi ---------------- */
#view .tw .tw-adim.acik .tw-govde{display:grid;gap:16px;min-width:0}
#view .tw .tw-adim.acik .tw-govde>*{min-width:0}

/* =====================================================================
   1. VOP EKRANI -- IZGARA
   ===================================================================== */
#view .tw #vopStep2{display:grid;gap:16px;align-items:start}
#view .tw #vopStep2>.ws-durum,#view .tw #vopStep2>.ws-eylem{grid-column:1/-1}
@media(min-width:1040px){
  #view .tw #vopStep2:has(>.zo-dosya-kart:not([hidden])):has(>#vopOptsKap:not([hidden])):not(:has(.zo-kirp,.zo-aralik,.zo-serit)){
    grid-template-columns:minmax(300px,380px) minmax(0,1fr);grid-template-rows:auto auto auto;column-gap:20px}
  #view .tw #vopStep2:has(>.zo-dosya-kart:not([hidden])):has(>#vopOptsKap:not([hidden])):not(:has(.zo-kirp,.zo-aralik,.zo-serit))>.zo-dosya-kart{
    grid-column:1;grid-row:2;position:sticky;top:112px}
  #view .tw #vopStep2:has(>.zo-dosya-kart:not([hidden])):has(>#vopOptsKap:not([hidden])):not(:has(.zo-kirp,.zo-aralik,.zo-serit))>#vopOptsKap{grid-column:2;grid-row:2}
  #view .tw #vopStep2:has(>.zo-dosya-kart:not([hidden])):has(>#vopOptsKap:not([hidden])):not(:has(.zo-kirp,.zo-aralik,.zo-serit)) .zo-sahne{max-height:320px}
  #view .tw #vopStep2:has(>.zo-dosya-kart:not([hidden])):has(>#vopOptsKap:not([hidden])):not(:has(.zo-kirp,.zo-aralik,.zo-serit)) .zo-sahne.zo-ses{max-height:none}
  /* ozel ekranlar: ayni iskelet (dosya karti + ayar paneli + baslat) */
  #view .tw #gifStep2,#view .tw #mp3Step2{grid-template-columns:minmax(300px,380px) minmax(0,1fr);column-gap:20px}
  #view .tw #gifStep2>*,#view .tw #mp3Step2>*{grid-column:2}
  #view .tw #gifStep2>.mp3-file,#view .tw #mp3Step2>.mp3-file{grid-column:1;grid-row:1/span 4;position:sticky;top:112px}
}
#view .tw #gifStep2,#view .tw #mp3Step2{display:grid;gap:16px;align-items:start}
/* ayari olmayan araclar (metadata, base64...): kaynak karti ortada ve dar */
#view .tw #vopStep2:has(>#vopOptsKap[hidden]):not(:has(.zo-kirp,.zo-serit))>.zo-dosya-kart{width:100%;max-width:760px;justify-self:center}
/* video sikistir: kaynak karti + ayarlar + oneri + baslat ayni govdede (arac-duzen.js) */
@media(min-width:1040px){
  #view .tw .tw-govde:has(>#vzSrcCard){grid-template-columns:minmax(300px,380px) minmax(0,1fr);column-gap:20px}
  #view .tw .tw-govde:has(>#vzSrcCard)>*{grid-column:2}
  #view .tw .tw-govde:has(>#vzSrcCard)>#vzSrcCard{grid-column:1;grid-row:1/span 8;position:sticky;top:112px}
}
#view .tw .tw-govde:has(>#vzSrcCard)>#vzSrcCard{align-self:start}
#view .tw #vzSrcCard .zo-sahne{max-height:320px}
/* ayari olmayan tek dosyali ekranlar (sessizlik temizle): kart ortada, dar */
#view .tw #scStep2{display:grid;gap:16px;justify-items:center}
#view .tw #scStep2>.zo-dosya-kart,#view .tw #scStep2>.sc-go{width:100%;max-width:760px}
#view .tw #scStep2>.sc-file{display:block;padding:0}
#view .tw #scStep2>.sc-file .sc-file-ico,#view .tw #scStep2>.sc-file .sc-file-txt{display:none}
#view .tw #scStep2>.sc-file .cl-x{position:absolute;top:7px;right:10px;margin:0}
#view .tw .sc-prog,#view .tw .sc-done{padding:20px 22px}
#view .tw .sc-done{text-align:center;padding:28px 24px}
#view .tw .sc-badge{width:56px;height:56px;margin:0 auto 14px;border-radius:50%;display:grid;place-items:center;background:var(--w-silver);color:var(--w-ink)}
#view .tw .sc-done h2{font:700 22px/1.15 var(--z-font);letter-spacing:-.02em;margin:0 0 6px}
#view .tw .sc-outname{font-size:12.5px;color:var(--w-muted);margin-bottom:18px}
#view .tw .sc-stats{list-style:none;margin:0 0 18px;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--w-line);border:1px solid var(--w-line);border-radius:12px;overflow:hidden;text-align:left}
#view .tw .sc-stats li{display:flex;justify-content:space-between;gap:12px;padding:11px 14px;background:var(--w-panel);font-size:12.5px}
#view .tw .sc-prog-head{display:flex;align-items:center;gap:12px;margin-bottom:14px}
#view .tw .sc-prog-foot{display:flex;align-items:center;gap:12px;margin-top:14px;font-size:12px;color:var(--w-dim)}
#view .tw .vz-opts{padding:18px 20px 20px}
#view .tw .vz-opts::before{content:var(--rupo-t-ayarlar,"Ayarlar");display:block;margin:0 0 16px;padding:0 0 14px;border-bottom:1px solid var(--w-line);
  font:700 13px/1.2 var(--z-font);color:var(--w-text)}
#view .tw .vz-opts .vz-modes{margin-bottom:16px}
#view .tw .vz-opts .vz-box{background:var(--w-card)!important;padding:14px 16px 15px;margin:0 0 12px}
#view .tw .vz-opts .vz-row2{display:flex;flex-wrap:wrap;gap:12px;margin:0 0 12px}
#view .tw .vz-opts .vz-row2>div{flex:1 1 200px;padding:14px 16px 15px;border-radius:12px;background:var(--w-card);border:1px solid var(--w-line);box-shadow:inset 0 1px #ffffff06}
#view .tw .vz-opts .vz-row2 .ap-l{margin-bottom:10px}
#view .tw .vz-targetrow{flex-wrap:wrap}
#view .tw .vz-targetrow .ap-chips{flex-basis:100%;display:flex;flex-wrap:wrap;gap:6px}
#view .tw .vz-targetrow .ap-chips button{min-height:30px;padding:0 10px;border-radius:999px;font-size:11px}
#view .tw #vzBack{max-width:none;margin:0}
#view .tw .vf-info+.vf-opts{margin-top:0}

/* =====================================================================
   2. DURUM SERIDI
   ===================================================================== */
#view .tw .ws-durum{display:flex;align-items:center;gap:12px;flex-wrap:wrap;min-width:0;
  padding:11px 16px;border-radius:12px;
  background:linear-gradient(90deg,#1c1f23,#141618);border:1px solid var(--w-line-2);
  box-shadow:inset 0 1px #ffffff0a}
#view .tw .ws-durum-isaret{width:9px;height:9px;border-radius:50%;flex:0 0 auto;
  background:#e6e9ec;box-shadow:0 0 0 3px #e6e9ec22,0 0 14px #e6e9ec66}
#view .tw .ws-durum-baslik{font:700 10px/1 var(--z-font);letter-spacing:.16em;text-transform:uppercase;color:var(--w-muted);white-space:nowrap}
#view .tw .ws-durum-ad{font:600 13px/1.3 var(--z-font);color:var(--w-text);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  padding-left:12px;border-left:1px solid var(--w-line-2)}
#view .tw .ws-durum-cipler{display:flex;gap:6px;flex-wrap:wrap;margin-left:auto}
#view .tw .ws-cip{display:inline-flex;align-items:center;min-height:24px;padding:0 9px;border-radius:999px;
  background:#ffffff0a;border:1px solid #ffffff14;color:var(--w-muted);font:500 11px/1 var(--z-font);
  font-variant-numeric:tabular-nums;white-space:nowrap}

/* =====================================================================
   3. PANELLER VE BASLIKLAR
   ===================================================================== */
#view .tw .panel,#view .tw .vf-info,#view .tw .mp3-opts,#view .tw .sc-file,#view .tw .bgbar,
#view .tw .zo-olcum,#view .tw .bgcard,#view .tw .renk-panel,#view .tw .vz-box,#view .tw .vz-src,
#view .tw .vz-smart,#view .tw .vz-summary,#view .tw .cut-tl,#view .tw .bc,#view .tw .vf-opts{
  background:var(--w-panel)!important;border:1px solid var(--w-line)!important;border-radius:var(--w-r)!important;
  box-shadow:inset 0 1px #ffffff08!important;color:var(--w-text)}
#view .tw .panel.gif-opts,#view .tw .gif-opts,#view .tw .vf-opts,#view .tw .mp3-opts{padding:18px 20px 20px;margin:0}
#view .tw .ws-baslik{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:0 0 16px;padding:0 0 14px;border-bottom:1px solid var(--w-line)}
#view .tw .ws-baslik-ad{font:700 13px/1.2 var(--z-font);letter-spacing:-.01em;color:var(--w-text)}
#view .tw .ws-baslik-not{font:500 11px/1.2 var(--z-font);color:var(--w-dim);letter-spacing:.04em;white-space:nowrap}
#view .tw .ws-baslik-not:empty{display:none}
#view .tw .gif-opts:not(:has(.ws-baslik))::before,#view .tw .vf-opts::before,#view .tw .mp3-opts::before{
  content:var(--rupo-t-ayarlar,"Ayarlar");grid-column:1/-1;flex-basis:100%;display:block;margin:0 0 4px;padding:0 0 14px;border-bottom:1px solid var(--w-line);
  font:700 13px/1.2 var(--z-font);color:var(--w-text)}

/* =====================================================================
   4. KAYNAK DOSYA KARTI
   ===================================================================== */
#view .tw .zo-dosya-kart,#view .tw .mp3-file{
  position:relative;display:block;padding:0;margin:0;overflow:hidden;
  background:var(--w-card)!important;border:1px solid var(--w-line-2)!important;border-radius:var(--w-r)!important;
  box-shadow:0 18px 40px #00000040,inset 0 1px #ffffff0a!important}
#view .tw .zo-dosya-kart::before,#view .tw #gifStep2>.mp3-file::before,#view .tw #mp3Step2>.mp3-file::before{
  content:var(--rupo-t-kaynak,"Kaynak");display:flex;align-items:center;gap:8px;padding:12px 16px;
  font:700 10px/1 var(--z-font);letter-spacing:.18em;text-transform:uppercase;color:var(--w-muted);
  border-bottom:1px solid var(--w-line);background:linear-gradient(180deg,#1b1e22,#17191c)}
#view .tw .zo-dosya-kart .mf-txt{display:none}
#view .tw #gifStep2>.mp3-file,#view .tw #mp3Step2>.mp3-file{display:grid;grid-template-columns:1fr;padding:0}
#view .tw #gifStep2>.mp3-file .mf-txt,#view .tw #mp3Step2>.mp3-file .mf-txt{display:block;padding:12px 16px;border-top:1px solid var(--w-line)}
#view .tw #gifStep2>.mp3-file .mf-txt b,#view .tw #mp3Step2>.mp3-file .mf-txt b{font-size:13px;font-weight:600;color:var(--w-text)}
#view .tw #gifStep2>.mp3-file .mf-txt span,#view .tw #mp3Step2>.mp3-file .mf-txt span{font-size:11px;color:var(--w-dim)}
#view .tw .mp3-file .mf-ico{display:none}
#view .tw .zo-yuva{padding:0}
#view .tw .zo-kart{margin:0;border:0;border-radius:0;background:transparent;box-shadow:none}
#view .tw .zo-sahne{background:#0a0b0c!important;
  background-image:radial-gradient(ellipse at 50% 40%,#1d2024 0%,#0a0b0c 70%)!important;
  border:0;border-radius:0;max-height:360px;margin:0;width:100%}
#view .tw .zo-sahne>img,#view .tw .zo-sahne>video{max-height:inherit}
#view .tw .zo-dama{background-color:#101214!important;
  background-image:linear-gradient(45deg,#1b1e22 25%,transparent 25%,transparent 75%,#1b1e22 75%),
  linear-gradient(45deg,#1b1e22 25%,transparent 25%,transparent 75%,#1b1e22 75%)!important;
  background-size:18px 18px!important;background-position:0 0,9px 9px!important}
#view .tw .zo-alt{display:grid;grid-template-columns:minmax(0,1fr);gap:4px;
  padding:12px 16px 13px;border-top:1px solid var(--w-line);background:var(--w-panel)}
#view .tw .zo-alt .zo-ad{font-size:13px;font-weight:600;color:var(--w-text)}
#view .tw .zo-alt .zo-olcu{font-size:11px;color:var(--w-dim);font-variant-numeric:tabular-nums;letter-spacing:.02em;white-space:normal}
#view .tw .zo-belge-not,#view .tw .zo-aralik-yazi{font-size:11.5px;color:var(--w-dim);margin:8px 0 0}
#view .tw .zo-sahne.zo-belge{padding:22px 16px 0}
#view .tw .zo-sahne.zo-belge .zo-belge-not{padding:10px 0 12px;margin:0}
#view .tw .zo-kagit{background:#f7f7f5;box-shadow:0 12px 30px #0006,inset 0 0 0 1px #00000014;border-radius:4px}
#view .tw .zo-kagit-metin{color:#2c2f33}
#view .tw .zo-kagit-ust{color:#6b7075}
#view .tw .zo-rozet{background:#e9ebee;color:#2b2f34;font-size:10px}
#view .tw .zo-sahne.zo-metin{max-height:320px;background:#0e0f11!important;background-image:none!important}
#view .tw .zo-kod{font-size:12px;line-height:1.7;color:#c9cfd5;padding:16px 18px}
#view .tw .zo-kod .zo-anahtar{color:#e8ebee}
#view .tw .zo-kod .zo-dizgi{color:#b5c9b8}
#view .tw .zo-kod .zo-sayi{color:#d9c7a6}
#view .tw .zo-kod .zo-sabit{color:#a9c1d6}
#view .tw .zo-sahne.zo-ses{padding:18px 18px 16px;gap:12px}
#view .tw .zo-sahne.zo-ses audio{filter:invert(.92) hue-rotate(180deg);border-radius:8px}
#view .tw .zo-kart{--zo-dalga-renk:#b4bac1}
#view .tw .zo-dalga{border-radius:8px;background:#0e0f11;box-shadow:inset 0 0 0 1px var(--w-line-2)}

/* dosyayi degistir (x) */
#view .tw .cl-x,#view .tw .zo-dosya-kart .cl-x,#view .tw .mp3-file .cl-x{
  position:absolute;top:7px;right:10px;z-index:3;width:30px;height:30px;flex:0 0 30px;
  display:grid;place-items:center;padding:0;border-radius:50%;
  background:#0e0f11cc;border:1px solid #ffffff26;color:#d6dadf;font-size:12px;line-height:1;cursor:pointer;
  backdrop-filter:blur(8px);transition:background .15s,border-color .15s,color .15s}
#view .tw .cl-x:hover{background:#ffffff14;border-color:#ffffff40;color:#fff}

/* coklu dosya seridi ve liste */
#view .tw .zo-serit{padding:16px;margin:0;gap:12px}
#view .tw .zo-serit li{background:var(--w-panel);box-shadow:inset 0 0 0 1px var(--w-line-2);border-radius:12px}
#view .tw .zo-serit li .zo-sahne{max-height:150px}
#view .tw .zo-serit li .zo-alt{padding:10px 12px}
#view .tw .zo-serit .zo-sira{background:#0e0f11cc;color:#e6e9ec;border:1px solid #ffffff26;font-size:10px;font-weight:700}
#view .tw .vop-liste{display:grid;gap:8px;margin:0}
#view .tw .vop-liste li{background:var(--w-panel);border:1px solid var(--w-line);border-radius:var(--w-r-sm);padding:10px 14px;font-size:12.5px}
#view .tw .vop-liste li span{color:var(--w-dim);font-size:11px}

/* kirpma ve aralik */
#view .tw .zo-kirp{padding:16px 16px 6px}
#view .tw .zo-kirp-alan{box-shadow:0 0 0 1px #fff,0 0 0 2px #00000080,0 0 0 2000px #0a0b0c99}
#view .tw .zo-tut{background:#fff;border:1px solid #00000066;border-radius:3px}
#view .tw .zo-aralik{padding:14px 16px 16px;border-top:1px solid var(--w-line);background:var(--w-panel)}
#view .tw .zo-aralik-serit{background:#0e0f11;box-shadow:inset 0 0 0 1px var(--w-line-2);height:26px;border-radius:8px}
#view .tw .zo-aralik-alan{background:#e6e9ec33;box-shadow:inset 0 0 0 1px #e6e9ec}

/* =====================================================================
   5. AYAR KARTLARI
   ===================================================================== */
#view .tw .gif-grid{display:flex;flex-wrap:wrap;gap:12px;counter-reset:alan}
#view .tw .gif-grid>*{flex:1 1 260px;min-width:0}
#view .tw .gif-grid>.zo-gelismis,#view .tw .gif-grid>.tw-detay,#view .tw .gif-grid>.tw-yardim,#view .tw .gif-grid>.vop-genis,
#view .tw .gif-grid>.vop-alan-secim:has(.zo-sec:nth-child(4)),#view .tw .gif-grid>.vop-alan:has(.zo-cerceve){flex-basis:100%}
#view .tw .vop-alan{display:flex;flex-direction:column;gap:12px;min-width:0;
  padding:14px 16px 15px;border-radius:12px;background:var(--w-card);border:1px solid var(--w-line);
  box-shadow:inset 0 1px #ffffff06;transition:border-color .15s}
#view .tw .vop-alan:hover{border-color:var(--w-line-2)}
#view .tw .vop-alan:focus-within{border-color:var(--w-line-3)}
#view .tw .vop-alan-bas{display:flex;align-items:center;gap:10px;min-height:20px}
#view .tw .vop-alan-bas::before{counter-increment:alan;content:counter(alan,decimal-leading-zero);
  flex:0 0 auto;font:700 9.5px/1 var(--z-font);letter-spacing:.08em;color:var(--w-dim);
  padding:5px 6px;border-radius:6px;border:1px solid var(--w-line-2);background:#ffffff05;font-variant-numeric:tabular-nums}
#view .tw .vop-alan-ad,#view .tw .an-title,#view .tw .ap-l,#view .tw .set>label,#view .tw .vf-cell span,
#view .tw .vz-box>label,#view .tw .vz-box>.ap-l,#view .tw .mp3-opts label,#view .tw .gif-grid>label{
  display:block;margin:0;font:700 10.5px/1.3 var(--z-font);letter-spacing:.14em;text-transform:uppercase;color:var(--w-muted)}
#view .tw .vop-alan-birim{margin-left:auto;font:500 10.5px/1 var(--z-font);letter-spacing:.06em;color:var(--w-dim);
  padding:4px 7px;border-radius:6px;background:#ffffff08}
#view .tw .vop-alan-govde{display:block;min-width:0}
#view .tw .vop-not,#view .tw .zo-tahmin,#view .tw .vz-note,#view .tw .vz-disclaimer{
  font-size:11.5px;line-height:1.55;color:var(--w-dim);margin:0;font-weight:400;letter-spacing:0;text-transform:none}
#view .tw .zo-tahmin{margin:0;font-weight:500;color:var(--w-muted)}
#view .tw .zo-tahmin-uyari{color:#e8d9c2}
#view .tw .vf-est{padding:11px 14px;border-radius:var(--w-r-sm);background:#ffffff06;border:1px solid var(--w-line);color:var(--w-muted);font-size:11.5px;margin:0}
#view .tw .vf-est b{color:var(--w-text);font-size:13px}

/* ozel ekranlarin alanlari (label > input) da kart gibi */
#view .tw .gif-grid>label,#view .tw .mp3-opts label,#view .tw .vf-opts .set{
  display:flex;flex-direction:column;align-items:stretch;gap:10px;margin:0;
  padding:14px 16px 15px;border-radius:12px;background:var(--w-card);border:1px solid var(--w-line);box-shadow:inset 0 1px #ffffff06}
#view .tw .gif-grid>label>:is(input,select,textarea,.zo-kart-secim,.zo-surgu-satir,.vop-not,.zo-tahmin,small,p,div,b),
#view .tw .mp3-opts label>:is(input,select,textarea,small,p,div,b){text-transform:none;letter-spacing:0}
#view .tw .gif-grid>label>:is(input,select,textarea),#view .tw .mp3-opts label>:is(input,select){font:500 13px/1.4 var(--z-font);color:var(--w-text)}
#view .tw .vf-opts{display:flex;flex-direction:column;gap:12px}
#view .tw .vf-opts>.an-title{margin:6px 0 -4px;padding:0;color:var(--w-dim)}
#view .tw .vf-opts .set{margin:0}
#view .tw .set>label{display:flex;justify-content:space-between;align-items:center;gap:10px}
#view .tw .set>label b.v,#view .tw b.v{font:600 12px/1 var(--z-font);color:var(--w-text);letter-spacing:0;text-transform:none;
  padding:4px 8px;border-radius:6px;background:#ffffff0a;border:1px solid var(--w-line-2);font-variant-numeric:tabular-nums}
#view .tw .two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
#view .tw .set.row{flex-direction:row;align-items:center;justify-content:space-between}
#view .tw .mp3-opts{display:flex;flex-wrap:wrap;gap:12px}
#view .tw .mp3-opts label{flex:1 1 220px}
#view .tw .mp3-opts .pselect{width:100%;min-width:0}

/* secim cipleri: .zo-sec (VOP), .seg / .apo / .mode / .ctab / .vz-lrow (ozel ekranlar) */
#view .tw .zo-kart-secim{display:flex;flex-wrap:wrap;gap:8px;margin:0}
#view .tw .zo-sec,#view .tw .seg,#view .tw .apo,#view .tw .mode,#view .tw .ctab,#view .tw .vz-lrow,#view .tw .tbtn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:40px;padding:0 14px;border-radius:var(--w-r-sm);
  background:var(--w-panel-2);border:1px solid var(--w-line-2);box-shadow:inset 0 1px #ffffff08;
  color:var(--w-muted);font:500 12.5px/1.2 var(--z-font);cursor:pointer;text-shadow:none;letter-spacing:0;text-transform:none;
  transition:border-color .15s,background .15s,color .15s,transform .15s,box-shadow .15s}
#view .tw .zo-sec:hover,#view .tw .seg:hover,#view .tw .apo:hover,#view .tw .mode:hover,#view .tw .ctab:hover,
#view .tw .vz-lrow:hover,#view .tw .tbtn:hover{border-color:var(--w-line-3);color:var(--w-text);background:#262a2f}
#view .tw .zo-sec[aria-pressed="true"],#view .tw .seg.on,#view .tw .apo.on,#view .tw .mode.on,#view .tw .ctab.on,
#view .tw .vz-lrow.on,#view .tw .tbtn.play{
  background:var(--w-silver);border-color:#e9ecef;color:var(--w-ink);font-weight:600;
  box-shadow:inset 0 1px #fff,0 6px 18px #0004}
#view .tw .zo-sec[aria-pressed="true"]:hover,#view .tw .seg.on:hover,#view .tw .apo.on:hover,#view .tw .mode.on:hover{background:var(--w-silver);color:var(--w-ink)}
#view .tw .zo-sec:focus-visible,#view .tw .seg:focus-visible,#view .tw .apo:focus-visible{outline:none;box-shadow:var(--w-focus)}
#view .tw .zo-sec>span:first-child{white-space:nowrap}
#view .tw .zo-onerilen{font:700 9px/1 var(--z-font);letter-spacing:.1em;text-transform:uppercase;padding:4px 7px;
  border-radius:999px;background:#ffffff12;color:var(--w-muted)}
#view .tw .zo-sec[aria-pressed="true"] .zo-onerilen{background:#00000022;color:#2b2f34}
/* 2-3 secenekli gruplar bolunmus dugme gibi esit genislikte */
#view .tw .vop-alan-secim .zo-kart-secim:not(:has(.zo-sec:nth-child(4))) .zo-sec{flex:1 1 0}
#view .tw .segs{display:flex;flex-wrap:wrap;gap:8px}
#view .tw .segs .seg{flex:1 1 auto}
#view .tw .vz-modes{display:flex;flex-wrap:wrap;gap:8px;margin:0;background:none;border:0;padding:0}
#view .tw .vz-modes .mode{flex:1 1 0;min-height:44px}
#view .tw .cut-tabs{display:flex;gap:8px;margin:0;padding:0;background:none;border:0}
#view .tw .vz-lrow{justify-content:flex-start;text-align:left;width:100%}
#view .tw .vz-lrow.on b,#view .tw .vz-lrow.on i,#view .tw .vz-lrow.on span{color:var(--w-ink)}
#view .tw .vz-ladder{gap:6px}
#view .tw .tbtn{min-width:38px;min-height:36px;padding:0 10px;font-size:12px}
#view .tw .tbtn.play{width:46px}
#view .tw .tbtn.play.on{background:var(--w-panel-2);border-color:var(--w-line-2);color:var(--w-text)}
#view .tw .ap-opts{display:flex;flex-wrap:wrap;gap:8px}

/* girdiler */
#view .tw .ap-in,#view .tw .pselect,#view .tw select,#view .tw textarea,
#view .tw input[type=text],#view .tw input[type=number],#view .tw input[type=url],#view .tw input[type=search],#view .tw input[type=datetime-local]{
  width:100%;min-height:42px;padding:9px 13px;margin:0;
  background:var(--w-sunken);border:1px solid var(--w-line-2);border-radius:var(--w-r-sm);
  color:var(--w-text);font:500 13px/1.4 var(--z-font);outline:none;box-shadow:inset 0 1px 2px #0006;
  transition:border-color .15s,box-shadow .15s}
#view .tw textarea{min-height:120px;resize:vertical;line-height:1.6}
#view .tw .ap-in:hover,#view .tw .pselect:hover,#view .tw select:hover,#view .tw textarea:hover,
#view .tw input[type=text]:hover,#view .tw input[type=number]:hover{border-color:var(--w-line-3)}
#view .tw .ap-in:focus,#view .tw .pselect:focus,#view .tw select:focus,#view .tw textarea:focus,
#view .tw input[type=text]:focus,#view .tw input[type=number]:focus,#view .tw input[type=datetime-local]:focus{
  border-color:#aeb4bb;box-shadow:var(--w-focus)}
#view .tw input::placeholder,#view .tw textarea::placeholder{color:var(--w-dim);font-weight:400}
#view .tw .pselect,#view .tw select{cursor:pointer;appearance:none;-webkit-appearance:none;padding-right:38px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23aab0b6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 13px center}
#view .tw select.zo-gizli{display:none}
#view .tw .zo-surgu-satir{display:flex;align-items:center;gap:14px;margin:0}
#view .tw .zo-surgu-satir .ap-in{flex:0 0 88px;text-align:center;font-weight:600}
#view .tw input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:4px;margin:12px 0;
  background:var(--w-line-2);border-radius:2px;outline:none;accent-color:#d9dde1;cursor:pointer}
#view .tw input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;border-radius:50%;
  background:var(--w-silver);border:1px solid #eef0f2;box-shadow:0 2px 8px #0008;cursor:pointer}
#view .tw input[type=range]::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:#e6e9ec;border:1px solid #eef0f2;box-shadow:0 2px 8px #0008}
#view .tw input[type=range]::-moz-range-track{height:4px;background:var(--w-line-2);border-radius:2px}

/* onay kutusu -> anahtar */
#view .tw .vop-onay{display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:14px;
  margin:0;padding:0;border:0;background:transparent;color:var(--w-text);font:600 13px/1.3 var(--z-font);cursor:pointer;
  letter-spacing:0;text-transform:none}
#view .tw .vop-onay>span{flex:1 1 auto;min-width:0}
#view .tw .vop-onay input[type=checkbox],#view .tw .tgl-row input[type=checkbox]{
  -webkit-appearance:none;appearance:none;order:2;flex:0 0 42px;width:42px;height:24px;margin:0;border-radius:999px;
  background:var(--w-line-2);border:1px solid var(--w-line-3);position:relative;cursor:pointer;transition:background .18s,border-color .18s}
#view .tw .vop-onay input[type=checkbox]::after,#view .tw .tgl-row input[type=checkbox]::after{
  content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#aab0b6;transition:transform .18s,background .18s}
#view .tw .vop-onay input[type=checkbox]:checked,#view .tw .tgl-row input[type=checkbox]:checked{background:#e6e9ec;border-color:#f2f4f6}
#view .tw .vop-onay input[type=checkbox]:checked::after,#view .tw .tgl-row input[type=checkbox]:checked::after{transform:translateX(18px);background:var(--w-ink)}
#view .tw .vop-onay input[type=checkbox]:focus-visible{outline:none;box-shadow:var(--w-focus)}
#view .tw .tgl{width:42px;height:24px;border-radius:12px;background:var(--w-line-2);border:1px solid var(--w-line-3)}
#view .tw .tgl i{top:3px;left:3px;width:16px;height:16px;background:#aab0b6}
#view .tw .tgl.on{background:#e6e9ec;border-color:#f2f4f6}
#view .tw .tgl.on i{transform:translateX(18px);background:var(--w-ink)}
#view .tw .tgl-row{display:flex;align-items:center;gap:12px;margin:12px 0 0;color:var(--w-muted);font:500 12.5px/1.4 var(--z-font);
  letter-spacing:0;text-transform:none;cursor:pointer}
#view .tw .tgl-row span:last-child{flex:1;order:1}

/* gelismis ayarlar */
#view .tw details.zo-gelismis,#view .tw details.tw-detay,#view .tw details.tw-yardim{
  grid-column:1/-1;margin:2px 0 0;background:transparent;border:1px solid var(--w-line);border-radius:12px;box-shadow:none;overflow:hidden}
#view .tw details.zo-gelismis>summary,#view .tw details.tw-detay>summary,#view .tw details.tw-yardim>summary{
  display:flex;align-items:center;gap:10px;padding:13px 16px;list-style:none;cursor:pointer;
  font:700 10.5px/1.3 var(--z-font);letter-spacing:.14em;text-transform:uppercase;color:var(--w-muted);transition:background .15s,color .15s}
#view .tw details.zo-gelismis>summary:hover,#view .tw details.tw-detay>summary:hover{background:#ffffff06;color:var(--w-text)}
#view .tw details.zo-gelismis>summary::-webkit-details-marker,#view .tw details.tw-detay>summary::-webkit-details-marker{display:none}
#view .tw details.zo-gelismis>summary::after,#view .tw details.tw-detay>summary::after,#view .tw details.tw-yardim>summary::after{
  content:"";margin-left:auto;width:8px;height:8px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:rotate(45deg) translateY(-2px);opacity:.8;transition:transform .16s}
#view .tw details.zo-gelismis[open]>summary::after,#view .tw details.tw-detay[open]>summary::after{transform:rotate(225deg) translateY(-1px)}
#view .tw details.zo-gelismis[open]>summary{border-bottom:1px solid var(--w-line)}
#view .tw .zo-gelismis-govde{display:flex;flex-wrap:wrap;padding:12px;gap:12px;background:#0f1113}
#view .tw .zo-gelismis-govde>*{flex:1 1 260px;min-width:0}
#view .tw .zo-gelismis-govde>.vop-genis{flex-basis:100%}
#view .tw .vz-advbtn{background:transparent;border:1px solid var(--w-line);border-radius:var(--w-r-sm);color:var(--w-muted);padding:12px 14px;font-size:12px;cursor:pointer;width:100%;text-align:left}
#view .tw .vz-advbtn:hover{color:var(--w-text);border-color:var(--w-line-2)}

/* =====================================================================
   6. EYLEM CUBUGU (ozet + baslat)
   ===================================================================== */
#view .tw .ws-eylem{display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  padding:12px 12px 12px 16px;border-radius:14px;
  background:linear-gradient(180deg,#16181b,#111214);border:1px solid var(--w-line-2);box-shadow:inset 0 1px #ffffff0a}
#view .tw .ws-eylem>.hint{flex:1 1 260px;display:flex;align-items:center;gap:12px;margin:0;min-width:0;
  color:var(--w-muted);font:500 12.5px/1.45 var(--z-font);font-variant-numeric:tabular-nums}
#view .tw .ws-eylem>.hint::before{content:var(--rupo-t-ozet,"ÖZET");flex:0 0 auto;font:700 9px/1 var(--z-font);letter-spacing:.16em;color:var(--w-dim);
  padding:6px 7px;border-radius:6px;border:1px solid var(--w-line-2);background:#ffffff05}
#view .tw .ws-eylem>.hint:empty{display:none}
#view .tw .ws-eylem>.enh-go{width:auto;min-width:240px;flex:0 0 auto;margin-left:auto}
#view .tw .gif-opts>.hint,#view .tw .mp3-opts>.hint,#view .tw .vz-summary>.hint{
  display:flex;align-items:center;gap:12px;margin:4px 0 0;padding:11px 14px;flex-basis:100%;
  background:#ffffff06;border:1px solid var(--w-line);border-radius:var(--w-r-sm);
  color:var(--w-muted);font-size:12px;line-height:1.5;font-variant-numeric:tabular-nums;text-transform:none;letter-spacing:0}
#view .tw .gif-opts>.hint::before{content:var(--rupo-t-ozet,"ÖZET");flex:0 0 auto;font:700 9px/1 var(--z-font);letter-spacing:.16em;color:var(--w-dim);
  padding:5px 7px;border-radius:6px;border:1px solid var(--w-line-2)}
#view .tw .gif-opts>.hint:empty{display:none}
#view .tw .hint{color:var(--w-dim);font-size:11.5px;font-weight:400;letter-spacing:0;text-transform:none}

/* ---------------- dugmeler ---------------- */
#view .tw .enh-go,#view .tw .es-go,#view .tw .sc-go,#view .tw a.primary,#view .tw .primary,#view .tw .md-dl{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;width:100%;margin:0;
  min-height:52px;padding:14px 26px;border-radius:12px;
  background:var(--w-silver)!important;color:var(--w-ink)!important;border:1px solid #eef0f2!important;
  font:600 14px/1 var(--z-font);letter-spacing:.01em;text-shadow:none!important;text-decoration:none;cursor:pointer;
  box-shadow:inset 0 1px #fff,0 12px 30px #00000059!important;animation:none!important;
  transition:transform .18s var(--z-ease,ease),box-shadow .18s,filter .18s}
#view .tw .enh-go svg,#view .tw .es-go svg,#view .tw .primary svg,#view .tw .md-dl svg{width:16px;height:16px;flex:0 0 auto}
#view .tw .enh-go:hover:not(:disabled),#view .tw .es-go:hover:not(:disabled),#view .tw .sc-go:hover:not(:disabled),#view .tw a.primary:hover,#view .tw .md-dl:hover{
  transform:translateY(-1px);filter:brightness(1.04);box-shadow:inset 0 1px #fff,0 16px 36px #00000066!important;color:var(--w-ink)!important}
#view .tw .enh-go:active:not(:disabled),#view .tw a.primary:active{transform:translateY(0) scale(.995)}
#view .tw .enh-go:disabled,#view .tw .es-go:disabled,#view .tw .sc-go:disabled{opacity:.42;cursor:not-allowed;transform:none;box-shadow:none!important}
#view .tw .enh-go.inline,#view .tw .primary.inline{width:auto;padding:12px 22px;min-height:44px;font-size:13px}
#view .tw .ghost2,#view .tw .sbtn,#view .tw .z-btn:not(.primary){
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:42px;padding:10px 18px;border-radius:var(--w-r-sm);
  background:transparent!important;border:1px solid #ffffff26!important;color:#e3e7ea!important;
  font:500 12.5px/1 var(--z-font);text-shadow:none!important;box-shadow:none!important;animation:none!important;cursor:pointer;
  transition:background .15s,border-color .15s,color .15s}
#view .tw .ghost2:hover,#view .tw .sbtn:hover{background:#ffffff0a!important;border-color:#ffffff40!important;color:#fff!important}
#view .tw .ghost2.sm{min-height:36px;padding:8px 13px;font-size:12px}
#view .tw .ghost2.wide{width:100%;max-width:460px;margin:10px auto 0;display:flex}
#view .tw .ghost2.accent{border-color:#ffffff40!important;color:#fff!important}
#view .tw .ghost2:disabled{opacity:.4;cursor:not-allowed}
#view .tw .vz-actions,#view .tw .sc-actions,#view .tw .ak-actions,#view .tw .bc-actions,#view .tw .renk-dugmeler{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
#view .tw .vz-actions .enh-go.inline,#view .tw .sc-actions .enh-go.inline{flex:1 1 220px}

/* =====================================================================
   7. OZEL EKRANLAR
   ===================================================================== */
#view .tw .vf-info{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:12px 16px;padding:14px 18px;margin:0}
#view .tw .vf-cell{gap:5px;padding:0}
#view .tw .vf-cell span{margin:0;font-size:9.5px;color:var(--w-dim)}
#view .tw .vf-cell b{font-size:13.5px;font-weight:600;color:var(--w-text);font-variant-numeric:tabular-nums}
#view .tw .vf-opts,#view .tw aside.panel{padding:18px 20px;position:static;max-height:none}
#view .tw .sc-file,#view .tw .ak-file{display:flex;align-items:center;gap:14px;padding:14px 16px;margin:0}
#view .tw .sc-file-ico{width:42px;height:42px;border-radius:11px;background:var(--w-panel-2);border:1px solid var(--w-line-2);color:var(--w-text)}
#view .tw .sc-file-txt b{font-size:13.5px;font-weight:600}
#view .tw .sc-file-txt span{font-size:11.5px;color:var(--w-dim)}
#view .tw .sc-file .cl-x,#view .tw .vz-srchead .cl-x,#view .tw .ak-file .cl-x{position:static;margin-left:auto}
#view .tw .vz-src{padding:0;overflow:hidden}
#view .tw .vz-src>*{padding-left:18px;padding-right:18px}
#view .tw .vz-src::before{content:var(--rupo-t-kaynak,"Kaynak");display:flex;align-items:center;gap:8px;padding:12px 18px;margin:0 0 12px;
  font:700 10px/1 var(--z-font);letter-spacing:.18em;text-transform:uppercase;color:var(--w-muted);
  border-bottom:1px solid var(--w-line);background:linear-gradient(180deg,#1b1e22,#17191c)}
#view .tw .vz-src>:last-child{padding-bottom:16px}
#view .tw .vz-srchead{margin-bottom:12px}
#view .tw .vz-srchead .mf-ico{display:none}
#view .tw .vz-srchead .mf-txt b{font-size:13.5px;font-weight:600}
#view .tw .vz-srchead .mf-txt span{font-size:11.5px;color:var(--w-dim)}
#view .tw .vz-opts{display:grid;gap:14px}
#view .tw .vz-box,#view .tw .vz-smart,#view .tw .vz-summary{padding:18px 20px;margin:0}
#view .tw .vz-box>label,#view .tw .vz-box>.ap-l{margin-bottom:10px}
#view .tw .vz-srcgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:12px 16px}
#view .tw .vz-srcgrid span{font:700 9.5px/1.3 var(--z-font);letter-spacing:.14em;text-transform:uppercase;color:var(--w-dim)}
#view .tw .vz-srcgrid b{font-size:13px;font-weight:600;color:var(--w-text)}
#view .tw .vz-row2{display:flex;flex-wrap:wrap;gap:12px;align-items:end}
#view .tw .vz-targetrow{display:flex;gap:10px;align-items:center}
#view .tw .vz-targetrow .ap-in{flex:1 1 120px}
#view .tw .vz-targetrow .pselect{flex:0 0 110px;width:110px}
#view .tw .vz-patent,#view .tw .warn2{font-size:11.5px;color:var(--w-dim)}
#view .tw .vz-rec{color:var(--w-muted);font-size:12.5px;line-height:1.6}
#view .tw .vz-good{color:var(--w-text)}
#view .tw .renk-panel{padding:18px 20px;gap:14px}
#view .tw .renk-liste li{background:var(--w-sunken);border:1px solid var(--w-line);border-radius:var(--w-r-sm)}
#view .tw .renk-anlik{color:var(--w-muted)}
#view .tw .cut-grid{display:grid;gap:14px}
#view .tw .cut-player{background:#0a0b0c!important;border:1px solid var(--w-line-2)!important;border-radius:var(--w-r)!important;overflow:hidden}
#view .tw .cut-player video{max-height:420px;background:#000}
#view .tw .cut-transport{gap:8px;padding:12px 14px;border-top:1px solid var(--w-line);background:var(--w-panel)}
#view .tw .tcode{font-variant-numeric:tabular-nums;font-size:12px;color:var(--w-text);padding:0 6px}
#view .tw .cut-tl{padding:14px 16px}
#view .tw .tl-bar{margin-bottom:12px}
#view .tw .tl-bar input[type=range]{width:150px;margin:0}
#view .tw .tl-legend{font-size:11px;color:var(--w-dim)}
#view .tw .bc{padding:18px 20px}
#view .tw .bc-body textarea{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12.5px}

/* =====================================================================
   8. ISLEM (ilerleme)
   ===================================================================== */
#view .tw .mp3-prog,#view .tw .es-prog,#view .tw .prog-box{padding:20px 22px;background:var(--w-panel);border:1px solid var(--w-line);border-radius:var(--w-r)}
#view .tw .mp-head{display:flex;align-items:center;gap:12px;margin-bottom:14px;font-size:13.5px}
#view .tw .mp-head b{font-weight:600;color:var(--w-text)}
#view .tw .mp-head>span:last-child{font-variant-numeric:tabular-nums;color:var(--w-muted);font-size:12.5px}
#view .tw .pbar{height:6px;border-radius:3px;background:var(--w-line-2)}
#view .tw .pbar span{background:var(--w-silver);border-radius:3px}
#view .tw .pmeta{display:flex;align-items:center;gap:12px;margin-top:14px;font-size:12px;color:var(--w-dim)}
#view .tw .busy{display:flex;align-items:center;gap:12px;padding:14px 16px;margin:0;border:1px solid var(--w-line);border-radius:var(--w-r-sm);
  background:var(--w-panel);color:var(--w-muted);font-size:13px}
#view .tw .spin{width:16px;height:16px;border:2px solid #ffffff22;border-top-color:#e6e9ec;border-radius:50%;animation:w2spin .8s linear infinite;flex:0 0 auto}
@keyframes w2spin{to{transform:rotate(360deg)}}

/* =====================================================================
   9. SONUC
   ===================================================================== */
#view .tw .mp3-done,#view .tw .vz-done,#view .tw .by-sonuc{padding:28px 24px;text-align:center}
#view .tw .md-badge{width:56px;height:56px;margin:0 auto 14px;border-radius:50%;display:grid;place-items:center;
  background:var(--w-silver);color:var(--w-ink);box-shadow:inset 0 1px #fff,0 10px 30px #0006}
#view .tw .md-badge svg{width:24px;height:24px}
#view .tw .mp3-done h2,#view .tw .vz-done h2{font:700 22px/1.15 var(--z-font);letter-spacing:-.02em;color:var(--w-text);margin:0 0 6px}
#view .tw .md-name{font-size:12.5px;color:var(--w-muted);margin-bottom:18px;word-break:break-all}
#view .tw .md-info{display:grid;grid-template-columns:1fr 1fr;gap:1px;margin:0 0 18px;background:var(--w-line);border:1px solid var(--w-line);border-radius:12px;overflow:hidden;text-align:left}
#view .tw .md-info li{display:flex;justify-content:space-between;gap:12px;padding:11px 14px;background:var(--w-panel);font-size:12.5px}
#view .tw .md-info span{color:var(--w-dim)}
#view .tw .md-info b{color:var(--w-text);font-weight:600;font-variant-numeric:tabular-nums}
#view .tw .md-dl{width:100%;max-width:460px;margin:0 auto 10px}
#view .tw #vopOnizleme,#view .tw #vopKarsilastir{margin:0 0 18px;text-align:left}
#view .tw .zo-ba-kutu{border-radius:12px;overflow:hidden;border:1px solid var(--w-line-2);background:#0a0b0c}
#view .tw .zo-ba-im{background:#0e0f11cc;color:#e6e9ec;border:1px solid #ffffff26;font:700 9.5px/1 var(--z-font);letter-spacing:.14em;padding:6px 9px;border-radius:999px}
#view .tw .zo-ba-kol{background:#fff}
#view .tw .zo-ba-menzil{margin:10px 0 0}
#view .tw .zo-olcum{margin:14px 0 0;overflow:hidden}
#view .tw .zo-olcum-satir{padding:11px 16px;border-bottom:1px solid var(--w-line);font-size:12.5px}
#view .tw .zo-olcum-satir:last-child{border-bottom:0}
#view .tw .zo-olcum-ad{color:var(--w-dim);font-size:11.5px}
#view .tw .zo-olcum-once{color:var(--w-muted);font-weight:500}
#view .tw .zo-olcum-ok{color:var(--w-dim)}
#view .tw .zo-olcum-sonra{color:var(--w-text);font-weight:600}
#view .tw .bgrow{gap:14px;padding:0 0 14px}
#view .tw .bgcard{background:var(--w-sunken)!important}
#view .tw .bghead{padding:11px 14px;border-bottom:1px solid var(--w-line);font:700 10.5px/1.3 var(--z-font);letter-spacing:.14em;text-transform:uppercase;color:var(--w-dim)}
#view .tw .badge2{background:#ffffff12;color:var(--w-muted);border:1px solid #ffffff1a;font-size:10px;letter-spacing:.06em;text-transform:none}
#view .tw .bgbar{display:flex;flex-wrap:wrap;align-items:center;gap:12px;padding:14px 16px;margin:14px 0 0}
#view .tw .bgbar a.primary{width:auto;min-height:44px;padding:12px 22px;font-size:13px}
#view .tw .bgbar .hint{margin:0}
#view .tw .zo-kart-baslik{font:700 10.5px/1.3 var(--z-font);letter-spacing:.14em;text-transform:uppercase;color:var(--w-dim)}

/* ---------------- uyarilar ---------------- */
#view .tw .tw-adim.acik .warn{padding:12px 14px;border-radius:var(--w-r-sm);background:#ffffff06;border:1px solid var(--w-line-2);color:var(--w-muted);font-size:12.5px;line-height:1.55}
#view .tw .tw-adim.acik .warn.err{border-color:#8a5a5a;color:#f0d6d6;background:#3a1c1c66}

/* ---------------- buyuk dosya karti (shell.js buyukDosyaKarti) ----------------
   Sinira takilan dosya: onerilen aracin 3B ikonu, sinir + dosya boyutu,
   ne yapilacagi ve o araca giden gumus dugme. Iki yerde ayni kart:
     1. calisma alaninin ustunde, hata kutusunun (#vopErr) icinde --
        kutunun kendi kirmizi cercevesi kapatiliyor (:has(>.ws-buyuk));
     2. ekranin onunde, dil secicinin <dialog class="z-command">
        penceresinde (.ws-buyuk-dialog) -- dikey dizilim, ortali.
   Renk degiskenleri "#view .tw" uzerinde tanimli; pencere body'de
   durdugu icin ayni degerler ona da veriliyor. */
.ws-buyuk-dialog{--w-line-2:#353a40;--w-text:#f3f5f6;--w-muted:#aab0b6;--w-dim:#7f868e;--w-r:14px;
  width:560px;padding:0;position:relative}
#view .tw .warn:has(>.ws-buyuk){padding:0;background:transparent;border:0;color:inherit;box-shadow:none}
:is(#view .tw,.ws-buyuk-dialog) .ws-buyuk{display:flex;align-items:center;gap:22px;padding:20px 24px;border-radius:var(--w-r);
  background:linear-gradient(135deg,#1e2125,#141618);border:1px solid var(--w-line-2);box-shadow:inset 0 1px #ffffff08,0 18px 40px #0004}
:is(#view .tw,.ws-buyuk-dialog) .ws-buyuk-ikon{flex:0 0 auto;width:84px;height:84px;filter:drop-shadow(0 10px 14px #0007)}
:is(#view .tw,.ws-buyuk-dialog) .ws-buyuk-ikon .z-icon{width:100%;height:100%}
:is(#view .tw,.ws-buyuk-dialog) .ws-buyuk-metin{flex:1 1 auto;min-width:0}
:is(#view .tw,.ws-buyuk-dialog) .ws-buyuk-ust{display:block;font:700 10px/1 var(--z-font);letter-spacing:.16em;text-transform:uppercase;color:var(--w-dim);margin-bottom:8px}
:is(#view .tw,.ws-buyuk-dialog) .ws-buyuk-metin>b{display:block;font:600 15px/1.4 var(--z-font);letter-spacing:-.01em;color:var(--w-text)}
:is(#view .tw,.ws-buyuk-dialog) .ws-buyuk-metin>p{margin:6px 0 0;font-size:12.5px;line-height:1.6;color:var(--w-muted)}
:is(#view .tw,.ws-buyuk-dialog) .ws-buyuk-metin>p b{color:var(--w-text);font-weight:600}
#view .tw .ws-buyuk>a.primary{flex:0 0 auto;white-space:nowrap}
/* pencere: dikey, ortali; kartin kendi cercevesi yok (pencere zaten cerceve) */
.ws-buyuk-dialog .ws-buyuk{flex-direction:column;text-align:center;gap:18px;padding:44px 36px 32px;border:0;box-shadow:none;background:transparent}
.ws-buyuk-dialog .ws-buyuk-ikon{width:104px;height:104px}
.ws-buyuk-dialog .ws-buyuk-metin>b{font-size:18px}
.ws-buyuk-dialog .ws-buyuk-metin>p{font-size:13.5px;margin-top:8px}
.ws-buyuk-dialog .ws-buyuk>a.z-btn{margin-top:6px;min-width:260px}
.ws-buyuk-kapat{position:absolute;top:14px;right:14px;width:40px;height:40px;display:grid;place-items:center;
  background:#ffffff0a;border:1px solid #ffffff1f;border-radius:50%;color:#dfe2e4;cursor:pointer;padding:0}
.ws-buyuk-kapat:hover{background:#ffffff16;color:#fff}
.ws-buyuk-kapat .ui-icon{width:16px;height:16px}

/* =====================================================================
   10. DAR EKRAN
   ===================================================================== */
@media(max-width:900px){
  #view .tw .panel.gif-opts,#view .tw .gif-opts,#view .tw .vf-opts,#view .tw .mp3-opts{padding:16px}
  #view .tw .zo-sahne{max-height:300px}
  #view .tw .ws-durum-cipler{margin-left:0;flex-basis:100%}
}
@media(max-width:600px){
  #view .tw .tw-adim.acik .tw-govde,#view .tw #vopStep2{gap:12px}
  #view .tw .panel.gif-opts,#view .tw .gif-opts,#view .tw .vf-opts,#view .tw .mp3-opts,#view .tw .vz-box{padding:14px}
  #view .tw .gif-grid>*,#view .tw .zo-gelismis-govde>*{flex-basis:100%}
  #view .tw .vop-alan{padding:13px 14px 14px}
  #view .tw .zo-kart-secim{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr))}
  #view .tw .zo-sec{padding:0 12px;min-height:42px}
  #view .tw .zo-sec>span:first-child{white-space:normal;text-align:center}
  #view .tw .zo-sahne{max-height:260px}
  #view .tw .ws-durum{padding:10px 14px;gap:8px 10px}
  #view .tw .ws-durum-ad{flex-basis:100%;padding-left:0;border-left:0}
  #view .tw .ws-eylem{padding:12px;gap:12px}
  #view .tw .ws-eylem>.enh-go{width:100%;min-width:0;margin-left:0}
  #view .tw .enh-go,#view .tw .es-go,#view .tw .sc-go,#view .tw a.primary,#view .tw .md-dl{min-height:50px;font-size:13.5px}
  #view .tw .md-info{grid-template-columns:1fr}
  #view .tw .two{grid-template-columns:1fr}
  #view .tw .vf-info{grid-template-columns:1fr 1fr;padding:14px 16px}
  #view .tw .cut-player video{max-height:260px}
  #view .tw .ws-buyuk{flex-direction:column;align-items:flex-start;gap:14px;padding:18px}
  #view .tw .ws-buyuk-ikon{width:64px;height:64px}
  #view .tw .ws-buyuk>a.primary{width:100%;white-space:normal}
  .ws-buyuk-dialog .ws-buyuk{padding:40px 20px 24px;gap:14px}
  .ws-buyuk-dialog .ws-buyuk-ikon{width:84px;height:84px}
  .ws-buyuk-dialog .ws-buyuk>a.z-btn{width:100%;min-width:0;white-space:normal}
}

/* =====================================================================
   PDF SAYFA SECICI (shell-sayfa.js, 24 Eylul 2026)
   Tek PDF yuklenince ayarlarin altinda, tam genislikte. Sayfa = beyaz
   kagit kucuk resmi; secili = gumus cerceve (ayar kartlariyla ayni
   dil). Aracin anlamina gore: silinecek (soluk + capraz cizgi),
   donecek (donmus resim), disarida kalan (soluk), yeni sira (etiket).
   ===================================================================== */
#view .tw #vopStep2>.zo-sayfa-kap{grid-column:1/-1}
#view .tw .panel.zo-sayfa-kap{padding:18px 20px 20px;margin:0}
#view .tw .zo-sayfa-kap .ws-baslik-not{white-space:normal;text-align:end;letter-spacing:0;font-size:12px;color:var(--w-muted)}
#view .tw .zo-sayfalar{list-style:none;margin:0;padding:4px;display:grid;
  grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:14px;max-height:560px;overflow:auto;overscroll-behavior:contain}
#view .tw .zo-sayfa{display:grid;gap:8px;padding:8px;cursor:pointer;border:1px solid transparent;border-radius:var(--w-r-sm);
  background:var(--w-card);outline:none;user-select:none;transition:border-color .2s,background-color .2s,opacity .2s}
#view .tw .zo-sayfa:hover{border-color:var(--w-line-2)}
#view .tw .zo-sayfa:focus-visible{border-color:var(--w-line-3);box-shadow:var(--w-focus)}
#view .tw .zo-sayfa-resim{position:relative;display:grid;place-items:center;aspect-ratio:1/1.414;overflow:hidden;
  border-radius:6px;background:#fff;box-shadow:0 6px 16px #0007}
#view .tw .zo-sayfa-resim img{width:100%;height:100%;object-fit:contain;
  transform:rotate(var(--zo-aci,0deg)) scale(var(--zo-olcek,1));transition:transform .35s ease,opacity .2s}
#view .tw .zo-sayfa-bos{width:100%;height:100%;background:linear-gradient(110deg,#e6e9ec 30%,#f5f6f7 50%,#e6e9ec 70%);
  background-size:200% 100%;animation:zo-sayfa-parla 1.2s linear infinite}
@keyframes zo-sayfa-parla{to{background-position:-200% 0}}
#view .tw .zo-sayfa-alt{display:flex;align-items:center;justify-content:space-between;gap:6px;min-height:20px;font-size:11px;color:var(--w-dim)}
#view .tw .zo-sayfa-no{display:inline-grid;place-items:center;min-width:22px;height:20px;padding:0 6px;border-radius:10px;
  font:600 11px/1 var(--z-font);font-variant-numeric:tabular-nums;color:var(--w-muted);background:var(--w-sunken);border:1px solid var(--w-line)}
#view .tw .zo-sayfa-etiket{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
/* secili */
#view .tw .zo-sayfa[aria-pressed="true"],#view .tw .zo-sayfa.zo-sayfa-secili{border-color:#e1e4e6;background:var(--w-panel-2)}
#view .tw .zo-sayfa[aria-pressed="true"] .zo-sayfa-no,#view .tw .zo-sayfa.zo-sayfa-secili .zo-sayfa-no{
  background:var(--w-silver);color:var(--w-ink);border-color:#f4f5f6}
/* secimin disinda kalan */
#view .tw .zo-sayfa.zo-sayfa-disarida{opacity:.4}
/* silinecek */
#view .tw .zo-sayfa.zo-sayfa-sil img{opacity:.28}
#view .tw .zo-sayfa.zo-sayfa-sil .zo-sayfa-resim::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top right,transparent calc(50% - 1px),#e5645c calc(50% - 1px),#e5645c calc(50% + 1px),transparent calc(50% + 1px))}
#view .tw .zo-sayfa.zo-sayfa-sil .zo-sayfa-etiket{color:#f0a39d}
/* siralama */
#view .tw .zo-sayfa-sira .zo-sayfa{cursor:grab}
#view .tw .zo-sayfa.zo-tasiniyor{opacity:.4}
#view .tw .zo-sayfa.zo-hedef{border-color:#e1e4e6;box-shadow:inset 0 0 0 1px #e1e4e6}
#view .tw .zo-sayfa.zo-sayfa-tasinan{box-shadow:0 0 0 3px #ffffff24}
#view .tw .zo-sayfa.zo-sayfa-degisti .zo-sayfa-etiket{color:var(--w-text)}
/* PDF Birlestir sayfa duzeni: sayfa basina dondur / cikar (24 Eylul 2026).
   Hep gorunur: dokunmatikte "ustune gelince" yok. */
#view .tw .zo-sayfa-dugmeler{position:absolute;top:6px;right:6px;display:flex;gap:4px;z-index:1}
#view .tw .zo-sd{width:26px;height:26px;display:grid;place-items:center;padding:0;border-radius:50%;cursor:pointer;
  font:600 13px/1 var(--z-font);color:#f4f5f6;background:#16191bcc;border:1px solid #ffffff33;
  box-shadow:0 2px 6px #0006;transition:background-color .2s,border-color .2s}
#view .tw .zo-sd:hover{background:#26292bee;border-color:#ffffff66}
#view .tw .zo-sd:focus-visible{outline:none;box-shadow:var(--w-focus)}
#view .tw .zo-sayfa.zo-sayfa-sil .zo-sd[data-is="cikar"]{background:#e5645c;border-color:#f0a39d}
@media(max-width:640px){
  #view .tw .panel.zo-sayfa-kap{padding:14px}
  #view .tw .zo-sayfalar{grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:10px;max-height:460px}
  #view .tw .zo-sayfa-kap .ws-baslik{flex-direction:column;align-items:flex-start;gap:6px}
  #view .tw .zo-sayfa-kap .ws-baslik-not{text-align:start}
}
@media(prefers-reduced-motion:reduce){
  #view .tw .zo-sayfa-bos{animation:none}
  #view .tw .zo-sayfa-resim img{transition:none}
}

/* Panodan yapistir ipucu (arac-duzen.js dropDuzenle). Varsayilan GIZLI;
   yalniz gorsel kabul eden alanda ve fare/klavyeli cihazda gorunur. */
.drop .tw-drop-yapistir{display:none;margin:12px 0 0;font-size:11px;line-height:1.5;color:#9fa5a9}
@media (hover:hover),(pointer:fine){
  .drop:has(input[type=file][accept*="image"]) .tw-drop-yapistir,
  .drop:has(input[type=file][accept*=".png"]) .tw-drop-yapistir,
  .drop:has(input[type=file][accept*=".jpg"]) .tw-drop-yapistir,
  .drop:has(input[type=file][accept*=".webp"]) .tw-drop-yapistir{display:block}
}