/* =====================================================================
   RUPO -- ONIZLEME, SECENEK KARTLARI VE ONCE/SONRA
   =====================================================================
   arac-duzen.css'ten SONRA yuklenir. Sebebi tek bir kural:
   "#view .tw .mp3-file { display:flex; align-items:center }" -- dosya
   seridi TEK SATIR olacak diye yazilmis; icine buyuk bir onizleme
   girince gorsel yanda ezilip 30 piksele dusuyordu. Burasi o kabi
   dikey akisa ceviriyor, geri kalan her seyi oldugu gibi birakiyor.

   RENKLER YENI DEGIL: hepsi arac-tema.css'in jetonlari
   (--kart, --cizgi, --yazi, --yazi-silik, --vurgu). Dokumun 15.
   maddesi "yeni bir tema icat etme" diyor.

   ANIMASYONLAR: yalnizca iki tane var ve ikisi de KISA (.18s/.22s) --
   kart belirmesi ve sonucun acilisi. Surekli donen/parlayan hicbir sey
   yok; "prefers-reduced-motion" acikken ikisi de kapaniyor.
   ===================================================================== */

/* =====================================================================
   1. ONIZLEME KARTI
   ===================================================================== */
.zo-kart {
  --zo-oran: 16 / 9;
  --zo-dalga-renk: var(--vurgu, #c62828);
  display: block;
  margin: 0 0 12px;
  border-radius: 14px;
  overflow: hidden;
  background: var(--kart, #fffbf4);
  box-shadow: inset 0 0 0 1px var(--cizgi, #e6d8c4);
  animation: zo-gir .22s ease both;
}
@keyframes zo-gir {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

.zo-sahne {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Onizleme kutusu SABIT ORANLI DEGIL: gorselin/videonun kendi orani
     geliyor (JS "--zo-oran" yaziyor). Tavan konuyor ki dikey bir
     telefon videosu ekrani bastan asagi kaplamasin. */
  aspect-ratio: var(--zo-oran);
  max-height: 420px;
  max-width: 100%;
  /* ORTALANIYOR: kart tam genislikte ama sahne kendi oraninda kaliyor
     (900x600 bir gorsel 1128 piksellik kartta 630 piksel yer tutuyor).
     Sola yaslandiginda saginda genis bir bosluk kaliyordu. */
  margin-inline: auto;
  background: color-mix(in srgb, var(--zemin-2, #f2e5d3) 60%, var(--kart, #fff));
  overflow: hidden;
}
.zo-kart-kucuk .zo-sahne { max-height: 132px; }

.zo-sahne > img,
.zo-sahne > video {
  width: 100%; height: 100%;
  object-fit: contain;
  display: block;
}

/* Saydamlik damasi. Iki krem ton -- koyu gri damalar krem sayfada
   kirli bir leke birakiyordu (ayni karar arac-tema.css:169'da alinmis). */
.zo-dama {
  background-color: #fffbf4;
  background-image:
    linear-gradient(45deg, #eadfcd 25%, transparent 25%, transparent 75%, #eadfcd 75%),
    linear-gradient(45deg, #eadfcd 25%, transparent 25%, transparent 75%, #eadfcd 75%);
  background-size: 18px 18px;
  background-position: 0 0, 9px 9px;
}

/* --- ses ---------------------------------------------------------- */
.zo-sahne.zo-ses {
  aspect-ratio: auto;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
  height: auto;
}
.zo-dalga {
  width: 100%; height: 96px;
  display: block;
  border-radius: 10px;
  background: color-mix(in srgb, var(--kart, #fff) 70%, var(--zemin-2, #f2e5d3));
  box-shadow: inset 0 0 0 1px var(--cizgi, #e6d8c4);
}
.zo-sahne.zo-ses audio { width: 100%; height: 36px; }

/* --- metin / kod / tablo ------------------------------------------- */
.zo-sahne.zo-metin {
  aspect-ratio: auto;
  align-items: stretch;
  max-height: 340px;
  overflow: auto;
  padding: 0;
}
.zo-kod {
  margin: 0;
  padding: 14px 16px;
  font: 12.5px/1.7 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color: var(--yazi-soluk, #453b31);
  white-space: pre;
  tab-size: 2;
}
.zo-kod .zo-anahtar { font-style: normal; color: var(--vurgu, #c62828); }
.zo-kod .zo-dizgi { font-style: normal; color: #2f6f3e; }
.zo-kod .zo-sayi { font-style: normal; color: #8a4b12; }
.zo-kod .zo-sabit { font-style: normal; color: #1f5e8c; }
.zo-kod .zo-yorum { font-style: normal; color: var(--yazi-silik, #6d6053); opacity: .8; }

.zo-tablo-kap { overflow-x: auto; }
.zo-tablo {
  border-collapse: collapse;
  width: 100%;
  font-size: 12.5px;
}
.zo-tablo th, .zo-tablo td {
  padding: 7px 12px;
  text-align: left;
  white-space: nowrap;
  border-bottom: 1px solid var(--cizgi, #e6d8c4);
  max-width: 260px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.zo-tablo th {
  position: sticky; top: 0;
  background: color-mix(in srgb, var(--zemin-2, #f2e5d3) 70%, var(--kart, #fff));
  font-weight: 700;
  color: var(--yazi, #191410);
}
.zo-tablo td { color: var(--yazi-soluk, #453b31); }
.zo-tablo-not,
.zo-belge-not {
  margin: 0;
  padding: 9px 16px;
  font-size: 12px;
  color: var(--yazi-silik, #6d6053);
  border-top: 1px solid var(--cizgi, #e6d8c4);
}
.zo-yukleniyor {
  padding: 26px 16px;
  font-size: 13px;
  color: var(--yazi-silik, #6d6053);
}

/* --- belge -------------------------------------------------------- */
.zo-sahne.zo-belge {
  aspect-ratio: auto;
  flex-direction: column;
  padding: 18px 16px 0;
  gap: 0;
}
.zo-kagit {
  width: min(300px, 82%);
  aspect-ratio: 1 / 1.414;      /* A4 orani -- belge oldugu okunsun */
  background: #fff;
  border-radius: 6px;
  box-shadow: 0 2px 10px rgba(60, 45, 25, .13), inset 0 0 0 1px var(--cizgi, #e6d8c4);
  padding: 14px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.zo-kagit-ust {
  display: flex; align-items: center; gap: 8px;
  font-size: 11px; color: var(--yazi-silik, #6d6053);
}
.zo-rozet {
  font-weight: 800; font-size: 10.5px; letter-spacing: .06em;
  padding: 3px 7px; border-radius: 6px;
  background: color-mix(in srgb, var(--vurgu, #c62828) 10%, transparent);
  color: var(--vurgu-metin, #b3241f);
}
.zo-kagit-metin {
  font-size: 10.5px; line-height: 1.6;
  color: var(--yazi-soluk, #453b31);
  overflow: hidden;
  white-space: pre-wrap;
}
/* Calisma kitabi onizlemesi A4 oraninda degil: tablo genis olur ve
   sayfa seklinde sikistirmak sutunlari okunmaz hale getiriyordu. */
.zo-kagit.zo-kagit-genis {
  width: min(560px, 96%);
  aspect-ratio: auto;
  max-height: 300px;
}
.zo-kagit-tablo { overflow: auto; }
.zo-kagit-tablo .zo-tablo { font-size: 11px; }
.zo-kagit-tablo .zo-tablo th { position: static; }
/* Metin gelmediginde: SAHTE YAZI DEGIL, yalnizca bir sayfa oldugunu
   anlatan notr cizgiler. Icerik uydurmuyoruz. */
.zo-kagit-cizgi { display: flex; flex-direction: column; gap: 9px; }
.zo-kagit-cizgi i {
  height: 6px; border-radius: 3px;
  background: color-mix(in srgb, var(--cizgi, #e6d8c4) 75%, #fff);
}
.zo-kagit-cizgi i:nth-child(4n) { width: 62%; }
.zo-kagit-cizgi i:nth-child(3n) { width: 84%; }
.zo-sahne.zo-belge .zo-belge-not { border-top: 0; text-align: center; }
/* Metni olmayan PDF'te cizgilerin yerine gelen GERCEK ilk sayfa.
   Kagidin kalan alanina sigar; sayfa A4 degilse orani korunur. */
.zo-kagit-gorsel {
  flex: 1; min-height: 0; width: 100%;
  object-fit: contain; object-position: top center;
}

/* --- tanimsiz tur ------------------------------------------------- */
.zo-sahne.zo-bilgi-sahne {
  aspect-ratio: auto; flex-direction: column; padding: 26px 16px 0;
}
.zo-bilgi-kutu {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 18px 26px; border-radius: 12px;
  background: color-mix(in srgb, var(--kart, #fff) 70%, var(--zemin-2, #f2e5d3));
  box-shadow: inset 0 0 0 1px var(--cizgi, #e6d8c4);
}
.zo-bilgi-kutu b { font-size: 18px; letter-spacing: .04em; }
.zo-bilgi-kutu span { font-size: 12px; color: var(--yazi-silik, #6d6053); }

/* --- kartin alt satiri -------------------------------------------- */
.zo-alt {
  display: flex; align-items: baseline; gap: 10px;
  padding: 11px 15px;
  border-top: 1px solid var(--cizgi, #e6d8c4);
  min-width: 0;
}
/* Dosya adi YARDIMCI bilgi (dokum md. 7): ana bilgi onizlemenin
   kendisi. O yuzden normal punto, tasarsa kirpiliyor. */
.zo-alt .zo-ad {
  font-size: 13px; font-weight: 600; color: var(--yazi, #191410);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  flex: 1 1 auto; min-width: 0;
}
.zo-alt .zo-olcu {
  font-size: 12px; color: var(--yazi-silik, #6d6053);
  flex: 0 0 auto; white-space: nowrap;
}

/* =====================================================================
   2. DOSYA KARTI KABI (shell-vop.js 2. adim)
   ---------------------------------------------------------------------
   arac-duzen.css dosya seridini tek satirlik yatay bir kutu yapiyor.
   Onizleme girince o kural dikey akisa cevriliyor -- yalnizca
   ".zo-dosya-kart" tasiyan kaplarda; oteki araclarin seridi aynen
   kaliyor.
   ===================================================================== */
#view .tw .mp3-file.zo-dosya-kart,
.mp3-file.zo-dosya-kart {
  display: block !important;
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  position: relative;
}
.mp3-file.zo-dosya-kart .zo-yuva { display: block; }
/* Ad ve ozet artik onizleme kartinin ICINDE. Disaridaki eski satir
   yalnizca ekran okuyucu ve modul kodu icin duruyor (wireVop ona
   yaziyor) -- gorunmuyor ama DOM'dan KALDIRILMIYOR: kaldirilirsa
   "$('#vopName').textContent = ..." null'a yazip yukleme akisini
   kiriyor. */
.mp3-file.zo-dosya-kart .mf-txt,
.sc-file.zo-dosya-kart .sc-file-txt {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
/* Genel ikon: onizleme varken anlamsiz. Kaldirilmiyor, gizleniyor --
   modul kodu ona hala yaziyor (scKindIco.innerHTML). */
.sc-file.zo-dosya-kart .sc-file-ico { display: none; }
#view .tw .sc-file.zo-dosya-kart,
.sc-file.zo-dosya-kart {
  display: block !important;
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  position: relative;
}
.sc-file.zo-dosya-kart .cl-x {
  position: absolute; top: 10px; right: 10px; z-index: 2;
  background: color-mix(in srgb, var(--kart, #fff) 86%, transparent) !important;
  box-shadow: inset 0 0 0 1px var(--cizgi, #e6d8c4);
}
.mp3-file.zo-dosya-kart .cl-x {
  position: absolute; top: 10px; right: 10px; z-index: 2;
  background: color-mix(in srgb, var(--kart, #fff) 86%, transparent) !important;
  box-shadow: inset 0 0 0 1px var(--cizgi, #e6d8c4);
}

/* --- cok dosyali araclarin seridi --------------------------------- */
.zo-serit {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 12px;
  margin: 0 0 12px;
  padding: 0;
  list-style: none;
}
.zo-serit li {
  position: relative;
  border-radius: 14px;
  background: var(--kart, #fffbf4);
  box-shadow: inset 0 0 0 1px var(--cizgi, #e6d8c4);
  overflow: hidden;
}
.zo-serit li .zo-kart {
  margin: 0; box-shadow: none; background: transparent;
}
.zo-serit li.zo-tasiniyor { opacity: .45; }
.zo-serit li.zo-hedef { box-shadow: inset 0 0 0 2px var(--vurgu, #c62828); }

/* ---- "bir tane daha ekle" karosu ----
   NEDEN VAR: toplu calisan araclarda 2. adimda birakma alani
   gizleniyor; kullanicinin "bir dosya daha ekleyebilirim" bilgisini
   alabilecegi tek yer bu karo (shell-vop.js vopEkleKarosu).
   KESIKLI CERCEVE BILEREK: dolu bir kart degil, "buraya bir sey
   gelebilir" demek -- birakma alaniyla ayni dil.                   */
.zo-ekle {
  flex: 0 1 190px;
  min-height: 132px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 14px;
  border: 2px dashed var(--cizgi, #e6d8c4);
  border-radius: 14px;
  background: transparent;
  color: var(--yazi-soluk, #453b31);
  font: inherit;
  text-align: center;
  cursor: pointer;
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.zo-ekle:hover,
.zo-ekle:focus-visible,
.zo-ekle.over {
  border-color: var(--vurgu, #c62828);
  color: var(--yazi, #191410);
  background: color-mix(in srgb, var(--vurgu, #c62828) 6%, transparent);
}
.zo-ekle-arti { font-size: 26px; line-height: 1; font-weight: 300; }
.zo-ekle b { font-size: 13px; font-weight: 700; }
.zo-ekle > span:not(.zo-ekle-arti) { font-size: 11.5px; opacity: .75; }
/* Seritte: karo digerleriyle ayni hucreyi doldurur, hucrenin kendi
   dolgusu/cercevesi kalkar (kesikli cerceve ikilenmesin). */
.zo-serit li.zo-ekle-yuva {
  background: transparent;
  box-shadow: none;
  overflow: visible;
}
.zo-serit li.zo-ekle-yuva .zo-ekle { width: 100%; height: 100%; flex: 1 1 auto; }
/* TEK DOSYALI GORUNUM: karo degil CUBUK. Kaynak sutunu 378 piksel
   sabit; onizleme ile kare bir karo yan yana sigmiyor (olculdu).
   Cubuk kartin altina bitisik duruyor, her ekran genisliginde siğiyor
   ve satir yuksekligi kadar yer kapliyor. */
.zo-ekle-cubuk {
  width: 100%;
  min-height: 0;
  margin-top: 12px;
  flex-direction: row;
  justify-content: center;
  gap: 8px;
  padding: 11px 14px;
}
.zo-ekle-cubuk .zo-ekle-arti { font-size: 19px; }
.zo-ekle-cubuk > span:not(.zo-ekle-arti)::before { content: "· "; }
.zo-sira {
  position: absolute; top: 8px; left: 8px; z-index: 2;
  min-width: 22px; height: 22px; border-radius: 7px;
  display: grid; place-items: center;
  font-size: 11.5px; font-weight: 800;
  background: color-mix(in srgb, var(--kart, #fff) 88%, transparent);
  box-shadow: inset 0 0 0 1px var(--cizgi, #e6d8c4);
  color: var(--yazi, #191410);
}
/* Siralama dugmeleri. Surukle-birak tek basina yetmez: dokunmatikte
   HTML5 surukleme calismiyor ve klavyeyle hic calismiyor. */
.zo-tasi {
  position: absolute; top: 8px; right: 8px; z-index: 2;
  display: flex; gap: 4px;
}
.zo-tasi button {
  width: 24px; height: 24px; border: 0; border-radius: 7px; cursor: pointer;
  background: color-mix(in srgb, var(--kart, #fff) 88%, transparent);
  box-shadow: inset 0 0 0 1px var(--cizgi, #e6d8c4);
  color: var(--yazi-soluk, #453b31);
  font-size: 12px; line-height: 1;
}
.zo-tasi button:disabled { opacity: .35; cursor: default; }
.zo-tasi button:hover:not(:disabled) {
  box-shadow: inset 0 0 0 1px var(--vurgu, #c62828);
  color: var(--vurgu-metin, #b3241f);
}

/* =====================================================================
   3. SECENEK KARTLARI
   ---------------------------------------------------------------------
   Dokum: "Format seceneklerini kucuk kartlar halinde sun; varsayilan
   secenegi 'Onerilen' etiketiyle one cikar." Bicim arac-duzen.css'teki
   segmented kontrollerin (".seg") AYNISI -- sayfada ikinci bir dil
   olusmasin diye. Fark yalnizca rozet ve mini cerceve.

   ISLEYIS: gorunen sey bu dugmeler, DEGERI TUTAN sey hala gizli
   <select>. Boylece "vopAyar" ve "vopPlan" tek satir degismeden
   calisiyor.
   ===================================================================== */
.zo-kart-secim { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 7px; }
.zo-sec {
  position: relative;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 14px;
  border: 0; cursor: pointer;
  border-radius: 10px;
  background: color-mix(in srgb, var(--zemin-2, #f2e5d3) 55%, var(--kart, #fff));
  box-shadow: inset 0 0 0 1px var(--cizgi, #e6d8c4);
  color: var(--yazi-soluk, #453b31);
  font: 600 13px/1.2 inherit;
  transition: box-shadow .16s, background-color .16s, color .16s;
}
.zo-sec:hover { box-shadow: inset 0 0 0 1px var(--cizgi-2, #d5c3a9); }
.zo-sec[aria-pressed="true"] {
  color: var(--yazi, #191410);
  background: color-mix(in srgb, var(--vurgu, #c62828) 7%, var(--kart, #fff));
  box-shadow: inset 0 0 0 1px var(--vurgu, #c62828);
}
.zo-sec:focus-visible { outline: 2px solid var(--vurgu, #c62828); outline-offset: 2px; }
.zo-onerilen {
  font-size: 9.5px; font-weight: 800; letter-spacing: .06em;
  padding: 2px 6px; border-radius: 5px;
  background: color-mix(in srgb, var(--vurgu, #c62828) 12%, transparent);
  color: var(--vurgu-metin, #b3241f);
}
/* Mini cerceve: en/boy oranlarini ADIYLA degil SEKLIYLE anlatiyor
   ("16:9", "9:16", "1:1"). Dokumun 13. maddesindeki araclarda
   isteniyor. */
.zo-cerceve {
  flex: 0 0 auto;
  width: 22px; height: 22px;
  display: grid; place-items: center;
}
.zo-cerceve i {
  display: block;
  background: color-mix(in srgb, var(--yazi-soluk, #453b31) 22%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--yazi-soluk, #453b31) 45%, transparent);
  border-radius: 2px;
}
.zo-sec[aria-pressed="true"] .zo-cerceve i {
  background: color-mix(in srgb, var(--vurgu, #c62828) 26%, transparent);
  box-shadow: inset 0 0 0 1px var(--vurgu, #c62828);
}

/* --- sayi ayarlari icin surgu ------------------------------------- */
.zo-surgu-satir { display: flex; align-items: center; gap: 10px; margin-top: 7px; }
.zo-surgu { flex: 1 1 auto; min-width: 90px; accent-color: var(--vurgu, #c62828); }
.zo-surgu-satir .ap-in { flex: 0 0 84px; }

/* --- gelismis ayarlar --------------------------------------------- */
.zo-gelismis {
  grid-column: 1 / -1;
  margin-top: 4px;
  border-radius: 11px;
  background: color-mix(in srgb, var(--zemin-2, #f2e5d3) 40%, var(--kart, #fff));
  box-shadow: inset 0 0 0 1px var(--cizgi, #e6d8c4);
  overflow: hidden;
}
.zo-gelismis > summary {
  cursor: pointer; list-style: none;
  padding: 10px 14px;
  font-size: 12.5px; font-weight: 700;
  color: var(--yazi-soluk, #453b31);
  display: flex; align-items: center; gap: 8px;
}
.zo-gelismis > summary::-webkit-details-marker { display: none; }
.zo-gelismis > summary::after {
  content: "▾"; margin-left: auto; font-size: 11px; opacity: .7;
  transition: transform .16s;
}
.zo-gelismis[open] > summary::after { transform: rotate(180deg); }
.zo-gelismis-govde {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  padding: 4px 14px 14px;
}

/* Kart secimini tasiyan alan. Kabuk ayar alanlarini <label> ile
   yaziyor; kart grubu bir <label>in icinde olamaz (tiklama etiketin
   kontroluene gider), o yuzden kendi kabi var. */
.vop-alan { display: block; }
.vop-alan-ad {
  display: block;
  font-size: 12.5px; font-weight: 600;
  color: var(--yazi-soluk, #453b31);
}
/* Degeri tutan <select> gorunmuyor ama DOM'DA: vopAyar ve vopPlan
   dogrudan ona yaziyor. */
.zo-gizli { display: none !important; }

/* Secime bagli turetilmis bilgi: yeni sure, kaynak FPS, hedef olcu.
   Kullanicinin girdisinden HESAPLANIYOR, uydurulmuyor; hesaplanamazsa
   satir hic gorunmuyor. */
.zo-tahmin {
  margin: 7px 0 0;
  font-size: 12px;
  color: var(--yazi-silik, #6d6053);
}
.zo-tahmin-uyari { color: var(--vurgu-metin, #b3241f); font-weight: 600; }

.zo-durum {
  margin: 10px 0 0;
  padding: 9px 13px;
  border-radius: 10px;
  font-size: 12.5px;
  color: var(--yazi-soluk, #453b31);
  background: color-mix(in srgb, var(--zemin-2, #f2e5d3) 55%, var(--kart, #fff));
  box-shadow: inset 0 0 0 1px var(--cizgi, #e6d8c4);
}
.zo-durum-yok { color: var(--yazi-silik, #6d6053); }

/* --- acisal ve aynalama mini gosterimleri ------------------------- */
.zo-aci i {
  width: 13px; height: 17px;
  border-top: 4px solid var(--vurgu, #c62828);
  background: color-mix(in srgb, var(--yazi-soluk, #453b31) 18%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--yazi-soluk, #453b31) 40%, transparent);
  transition: transform .16s;
}
.zo-eksen i {
  width: 20px; height: 16px;
  background: color-mix(in srgb, var(--yazi-soluk, #453b31) 15%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--yazi-soluk, #453b31) 40%, transparent);
  position: relative;
}
.zo-eksen i::after {
  content: ""; position: absolute; background: var(--vurgu, #c62828);
}
.zo-eksen[data-eksen="yatay"] i::after { left: 50%; top: 0; bottom: 0; width: 1.5px; margin-left: -.75px; }
.zo-eksen[data-eksen="dikey"] i::after { top: 50%; left: 0; right: 0; height: 1.5px; margin-top: -.75px; }
.zo-eksen[data-eksen="ikisi"] i::after {
  left: 50%; top: 0; bottom: 0; width: 1.5px; margin-left: -.75px;
  box-shadow: 0 0 0 0 transparent;
}
.zo-eksen[data-eksen="ikisi"] i::before {
  content: ""; position: absolute; background: var(--vurgu, #c62828);
  top: 50%; left: 0; right: 0; height: 1.5px; margin-top: -.75px;
}

/* =====================================================================
   3b. KIRPMA CERCEVESI
   ---------------------------------------------------------------------
   Onizlemenin uzerinde duruyor ve MEDYANIN kutusuna oturuyor (JS
   olcuyor) -- sahnenin kendisine oturtulsaydi dikey bir videonun
   yanindaki bos alan da kirpilabilir gorunurdu.
   ===================================================================== */
/* "overflow: hidden" ZORUNLU: karartma asagida devasa bir "spread"
   golgesiyle yapiliyor ve kirpilmazsa butun sayfayi karartir. */
.zo-kirp { position: absolute; touch-action: none; overflow: hidden; }
.zo-kirp-alan {
  position: absolute;
  cursor: move;
  /* SECILI ALAN AYDINLIK, DISI KARANLIK.
     Ilk surumde ayri bir "golge" katmani vardi ve alanin ALTINDA
     duruyordu; kirpma sifirken bile butun gorsel karariyordu. Dogru
     yol tek bildirim: alanin kendi golgesini disariya dogru sonsuz
     yaymak. Kap "overflow: hidden" oldugu icin gorselin disina
     tasmiyor. */
  box-shadow: 0 0 0 1px #fff, 0 0 0 2px rgba(25, 20, 16, .35),
              0 0 0 2000px rgba(25, 20, 16, .45);
  background: transparent;
  outline: none;
}
.zo-kirp-alan::before {
  /* Ucte bir cizgileri -- kadrajlamada standart yardim. */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(to right, transparent 33.3%, rgba(255,255,255,.35) 33.3%,
      rgba(255,255,255,.35) calc(33.3% + 1px), transparent calc(33.3% + 1px),
      transparent 66.6%, rgba(255,255,255,.35) 66.6%,
      rgba(255,255,255,.35) calc(66.6% + 1px), transparent calc(66.6% + 1px)),
    linear-gradient(to bottom, transparent 33.3%, rgba(255,255,255,.35) 33.3%,
      rgba(255,255,255,.35) calc(33.3% + 1px), transparent calc(33.3% + 1px),
      transparent 66.6%, rgba(255,255,255,.35) 66.6%,
      rgba(255,255,255,.35) calc(66.6% + 1px), transparent calc(66.6% + 1px));
}
.zo-kirp-alan:focus-visible { box-shadow: 0 0 0 2px var(--vurgu, #c62828); }
.zo-tut {
  position: absolute; width: 18px; height: 18px;
  background: #fff; border-radius: 4px;
  box-shadow: 0 1px 4px rgba(25, 20, 16, .4);
}
/* Tutamaklar alanin ICINDE duruyor, disinda degil: kap "overflow:
   hidden" oldugu icin disariya tasan bir tutamak kenarda yariya
   kirpilirdi (kirpma %0 iken tam kenardalar). */
.zo-tut[data-kose="nw"] { left: 3px; top: 3px; cursor: nwse-resize; }
.zo-tut[data-kose="ne"] { right: 3px; top: 3px; cursor: nesw-resize; }
.zo-tut[data-kose="sw"] { left: 3px; bottom: 3px; cursor: nesw-resize; }
.zo-tut[data-kose="se"] { right: 3px; bottom: 3px; cursor: nwse-resize; }

/* =====================================================================
   3b2. GORSEL ARALIK SERIDI (video -> GIF)
   ---------------------------------------------------------------------
   Kesim tutamaklarindan farki: burada tutamak yok, SERIDE TIKLANIYOR.
   GIF'in suresi ayri bir alandan geliyor; iki uclu bir surgu iki
   ayarin ayni anda degismesi demek olurdu ve kullanici hangisini
   degistirdigini kaybediyordu.
   ===================================================================== */
.zo-aralik { padding: 10px 14px 12px; }
.zo-aralik-serit {
  position: relative; height: 22px; border-radius: 7px; cursor: pointer;
  background: color-mix(in srgb, var(--zemin-2, #f2e5d3) 70%, var(--kart, #fff));
  box-shadow: inset 0 0 0 1px var(--cizgi, #e6d8c4);
}
.zo-aralik-alan {
  position: absolute; top: 0; bottom: 0; min-width: 3px;
  border-radius: 6px;
  background: color-mix(in srgb, var(--vurgu, #c62828) 26%, transparent);
  box-shadow: inset 0 0 0 1px var(--vurgu, #c62828);
}
.zo-aralik-yazi {
  margin: 7px 0 0; font-size: 12px; color: var(--yazi-silik, #6d6053);
}

/* =====================================================================
   3c. KESIM TUTAMAKLARI (dalga formu)
   ===================================================================== */
.zo-kes {
  position: relative;
  width: 100%; height: 26px;
  margin-top: -26px;              /* dalganin ustune biner */
  touch-action: none;
}
.zo-kes-alan {
  position: absolute; top: -70px; height: 96px;
  background: color-mix(in srgb, var(--vurgu, #c62828) 12%, transparent);
  box-shadow: inset 1px 0 0 var(--vurgu, #c62828), inset -1px 0 0 var(--vurgu, #c62828);
  border-radius: 4px;
}
.zo-kes-tut {
  position: absolute; top: 50%; width: 14px; height: 34px;
  margin-top: -17px; border-radius: 5px;
  background: #fff; cursor: ew-resize;
  box-shadow: 0 1px 4px rgba(25, 20, 16, .35), inset 0 0 0 1px var(--vurgu, #c62828);
}
.zo-kes-tut[data-uc="bas"] { left: -7px; }
.zo-kes-tut[data-uc="son"] { right: -7px; }
.zo-kes-yazi {
  position: absolute; left: 0; right: 0; bottom: -4px;
  margin: 0; text-align: center;
  font-size: 12px; color: var(--yazi-silik, #6d6053);
}

/* =====================================================================
   3d. METIN CIKTISI + KOPYALA
   ===================================================================== */
.zo-cikti-kod {
  position: relative;
  border-radius: 13px;
  overflow: hidden;
  background: var(--kart, #fffbf4);
  box-shadow: inset 0 0 0 1px var(--cizgi, #e6d8c4);
  max-height: 320px; overflow-y: auto;
}
.zo-cikti-kod .zo-kod { max-height: none; }
.zo-kopyala {
  position: sticky; top: 8px; float: right; margin: 8px 8px 0 0; z-index: 2;
}

/* =====================================================================
   3d2. HESAP ARACLARININ SONUC SATIRLARI
   ---------------------------------------------------------------------
   Dokum: "Sonucu buyuk oran kartinda goster", "bitrate'i buyuk goster",
   "DPI buyuk kartta", "sonuc HEX buyuk ve kopyalanabilir".
   Yedi araca yedi ayri duzen yerine LISTENIN ILK SATIRI ana sonuc
   olarak buyutuluyor (bkz. arac-onizleme.js "sonucSusle").
   ===================================================================== */
/* ".md-info" iki sutunlu bir izgara ve kenarligi/koseleri KAPTA
   duruyor. Ana satira kendi kosesini ve golgesini vermek o cerceveyi
   iceriden kiriyordu; onun yerine satir iki sutunu birden kapliyor ve
   yalnizca zeminiyle ayriliyor. */
.by-sonuc .md-info li.zo-ana {
  grid-column: 1 / -1;
  flex-wrap: wrap;
  align-items: center;
  padding: 14px 14px;
  background: color-mix(in srgb, var(--vurgu, #c62828) 7%, var(--kart, #fffbf4));
}
.by-sonuc .md-info li.zo-ana > span { flex: 1 0 100%; }
.by-sonuc .md-info li.zo-ana > b {
  flex: 1 1 auto;
  font-size: clamp(22px, 3.4vw, 34px);
  line-height: 1.1;
  letter-spacing: -.01em;
  color: var(--yazi, #191410);
}
.by-sonuc .md-info li.zo-ana > span {
  font-size: 12px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--yazi-silik, #6d6053);
}
.zo-kopya {
  flex: 0 0 auto;
  width: 28px; height: 28px; margin-left: 8px;
  border: 0; border-radius: 8px; cursor: pointer;
  font-size: 13px; line-height: 1;
  background: color-mix(in srgb, var(--zemin-2, #f2e5d3) 55%, var(--kart, #fff));
  box-shadow: inset 0 0 0 1px var(--cizgi, #e6d8c4);
  color: var(--yazi-soluk, #453b31);
}
.zo-kopya:hover {
  box-shadow: inset 0 0 0 1px var(--vurgu, #c62828);
  color: var(--vurgu-metin, #b3241f);
}
.zo-kopya:focus-visible { outline: 2px solid var(--vurgu, #c62828); outline-offset: 2px; }

/* =====================================================================
   3e. RENK SECICININ BUYUTEC LENSI
   ---------------------------------------------------------------------
   Kabin "position: relative" olmasi sart; lens ona gore konumlaniyor.
   "pointer-events: none" da sart: lens imlecin ALTINDA kalirsa tuvalin
   mousemove'u kesiliyor ve renk okuma duruyor.
   ===================================================================== */
.renk-tuval-kap { position: relative; }
.renk-lens {
  position: absolute; z-index: 3;
  width: 132px; height: 132px;
  border-radius: 50%;
  pointer-events: none;
  background: var(--kart, #fffbf4);
  box-shadow: 0 2px 12px rgba(60, 45, 25, .35),
              inset 0 0 0 2px var(--kart, #fff),
              0 0 0 1px var(--cizgi-2, #d5c3a9);
}

/* =====================================================================
   4. ONCE / SONRA
   ===================================================================== */
.zo-ba { margin: 0 0 12px; }
.zo-ba-kutu {
  --zo-bol: 50%;
  --zo-oran: 16 / 9;
  position: relative;
  aspect-ratio: var(--zo-oran);
  max-height: 420px;
  max-width: 100%;
  margin-inline: auto;
  border-radius: 13px;
  overflow: hidden;
  touch-action: none;      /* surukleme sayfayi kaydirmasin */
  cursor: ew-resize;
  box-shadow: inset 0 0 0 1px var(--cizgi, #e6d8c4);
  background: color-mix(in srgb, var(--zemin-2, #f2e5d3) 60%, var(--kart, #fff));
}
.zo-ba-kutu img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: contain;
  display: block;
  -webkit-user-drag: none; user-select: none;
}
.zo-ba-sonra-kap {
  position: absolute; inset: 0;
  /* Kirpma clip-path ile: "width" ile kirpilsaydi SAGDAKI gorsel de
     daralir ve iki taraf ayni pikseli gostermezdi -- karsilastirma
     anlamini kaybederdi. */
  clip-path: inset(0 0 0 var(--zo-bol));
}
.zo-ba-kol {
  position: absolute; top: 0; bottom: 0; left: var(--zo-bol);
  width: 2px; margin-left: -1px;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .18);
  pointer-events: none;
}
.zo-ba-kol i {
  position: absolute; top: 50%; left: 50%;
  width: 30px; height: 30px; margin: -15px 0 0 -15px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 6px rgba(60, 45, 25, .3);
}
.zo-ba-kol i::before {
  content: "⟺"; position: absolute; inset: 0;
  display: grid; place-items: center;
  font-size: 13px; color: var(--yazi, #191410);
}
.zo-ba-im {
  position: absolute; top: 10px;
  font-size: 10px; font-weight: 800; letter-spacing: .08em;
  padding: 4px 8px; border-radius: 6px;
  background: color-mix(in srgb, var(--kart, #fff) 86%, transparent);
  box-shadow: inset 0 0 0 1px var(--cizgi, #e6d8c4);
  color: var(--yazi-soluk, #453b31);
  pointer-events: none;
}
.zo-ba-im-sol { left: 10px; }
.zo-ba-im-sag { right: 10px; }
.zo-ba-menzil { width: 100%; margin-top: 10px; accent-color: var(--vurgu, #c62828); }

/* --- olcum karsilastirmasi ---------------------------------------- */
.zo-olcum {
  margin: 0 0 12px;
  border-radius: 13px;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px var(--cizgi, #e6d8c4);
  background: var(--kart, #fffbf4);
}
.zo-olcum-satir {
  display: grid;
  grid-template-columns: minmax(96px, 1fr) auto 24px auto;
  align-items: center; gap: 10px;
  padding: 10px 15px;
  border-bottom: 1px solid var(--cizgi, #e6d8c4);
  font-size: 13px;
}
.zo-olcum-ad { color: var(--yazi-silik, #6d6053); font-size: 12.5px; }
.zo-olcum-once { color: var(--yazi-soluk, #453b31); font-weight: 600; }
.zo-olcum-ok { text-align: center; color: var(--yazi-silik, #6d6053); }
.zo-olcum-sonra { color: var(--yazi, #191410); font-weight: 700; }
.zo-kazanc {
  margin: 0; padding: 11px 15px;
  font-size: 12.5px; font-weight: 700;
  color: var(--vurgu-metin, #b3241f);
  background: color-mix(in srgb, var(--vurgu, #c62828) 6%, transparent);
}

/* Sonuc alanindaki kisa aciliş. Dokum: "sonuc geldiginde kisa ve
   temiz reveal". */
.zo-reveal { animation: zo-ac .22s ease both; }
@keyframes zo-ac {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

/* =====================================================================
   5. MOBIL
   ---------------------------------------------------------------------
   Dokum: "Preview once, ayarlar sonra. Ana CTA ekranin altina
   kaybolmamali. Before/After mobilde suruklenebilir ama ekran disina
   tasmamali."
   ===================================================================== */
@media (max-width: 720px) {
  .zo-sahne { max-height: 300px; }
  .zo-ba-kutu { max-height: 300px; }
  .zo-serit { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 9px; }
  .zo-ekle { flex-basis: 140px; min-height: 108px; padding: 10px; }
  .zo-ekle-arti { font-size: 22px; }
  .zo-kart-secim { gap: 6px; }
  .zo-sec { padding: 10px 12px; font-size: 12.5px; }
  /* Dokunma hedefi: 44 piksel altina dusmesin. */
  .zo-sec, .zo-tasi button { min-height: 40px; }
  .zo-tasi button { width: 32px; height: 32px; }
  .zo-olcum-satir { grid-template-columns: 1fr auto; row-gap: 2px; }
  .zo-olcum-ok { display: none; }
  .zo-olcum-once { grid-column: 2; font-size: 12px; }
  .zo-olcum-sonra { grid-column: 2; }
  .zo-tablo th, .zo-tablo td { max-width: 150px; }
}

@media (prefers-reduced-motion: reduce) {
  .zo-kart, .zo-reveal { animation: none; }
  .zo-sec { transition: none; }
}

/* =====================================================================
   CANLI AYAR ONIZLEMESI (23 Eylul 2026)
   =====================================================================
   Kirpma cercevesiyle ayni yerlesim mantigi: kat, sahnenin degil
   MEDYANIN dikdortgenine oturuyor (shell-vop.js vopMedyaKutusu), yani
   dikey bir videonun yanindaki bos alan kutunun disinda kaliyor.     */

.zo-konum { position: absolute; pointer-events: none; overflow: hidden; }
.zo-konum-kutu {
  position: absolute;
  display: flex; align-items: center; justify-content: center;
  padding: 2px 6px;
  /* Kesikli cerceve "bu bir onizleme, gercek cikti degil" diyor.
     Dolu cerceve denendi, kullanici videoya cerceve basildigini
     sandi. */
  border: 1px dashed rgba(255, 255, 255, .85);
  box-shadow: 0 0 0 1px rgba(25, 20, 16, .45);
  background: rgba(25, 20, 16, .28);
  border-radius: 3px;
  max-width: 96%;
}
.zo-konum-kutu > span {
  font-weight: 700; line-height: 1.15;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  text-shadow: 0 1px 2px rgba(25, 20, 16, .75);
}

.zo-suzgec-rozet {
  position: absolute; left: 8px; top: 8px; z-index: 2;
  padding: 3px 8px; border-radius: 999px;
  font-size: 11px; font-weight: 700; letter-spacing: .01em;
  color: #fff; background: rgba(25, 20, 16, .62);
  backdrop-filter: blur(3px);
  pointer-events: none;
}

/* ---- E1: canli donusum (24 Eylul 2026, shell-vop.js vopDonusumKur) ----
   Dondur/aynala/oran secimi ana onizlemeye uygulanir. Renkler mevcut
   kirpma ve rozet katmanlarindan: yeni renk yok. */
.zo-sahne > img, .zo-sahne > video { transition: transform .18s ease; }
.zo-oran { position: absolute; pointer-events: none; overflow: hidden; }
.zo-oran-alan { position: absolute; }
/* KIRP: hedef oranin disi, kirpma cercevesiyle ayni karartmayla */
.zo-oran[data-yontem="kirp"] .zo-oran-alan {
  box-shadow: 0 0 0 1px #fff, 0 0 0 2px rgba(25, 20, 16, .35),
              0 0 0 2000px rgba(25, 20, 16, .55);
}
/* DOLGU: cerceve medyanin altinda; siyah ya da bulanik zemin */
.zo-oran[data-yontem="siyah"], .zo-oran[data-yontem="bulanik"] { background: #000; }
.zo-oran[data-yontem="siyah"] .zo-oran-alan,
.zo-oran[data-yontem="bulanik"] .zo-oran-alan {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .7);
}
.zo-oran-zemin {
  position: absolute; inset: 0; width: 100%; height: 100%;
  filter: blur(10px) brightness(.85); transform: scale(1.1);
}
.zo-oynat {
  position: absolute; right: 8px; bottom: 8px; z-index: 3;
  width: 34px; height: 34px; border: 0; border-radius: 999px;
  color: #fff; background: rgba(25, 20, 16, .62);
  backdrop-filter: blur(3px);
  font-size: 12px; line-height: 1; cursor: pointer;
}
.zo-oynat:focus-visible { outline: 2px solid var(--vurgu, #c62828); outline-offset: 2px; }
/* Canli kazanc: dalga formu kazanc kadar buyur, tasan tepe kutuda kesilir */
.zo-dalga-kap { width: 100%; overflow: hidden; border-radius: 10px; }
.zo-dalga-kap > .zo-dalga { transition: transform .18s ease; }

/* ---- M2: PDF / ZIP / Office cikti onizlemesi (23 Eylul 2026) ----
   Onizleme kaplari mevcut .zo-cikti-kod olculerini izliyor; yeni renk
   ya da yeni olcu getirmiyor, var olan degiskenleri kullaniyor. */
.zo-cikti-belge {
  margin-top: 10px;
}
.zo-pdf-onizleme {
  border: 1px solid var(--cizgi, rgba(255,255,255,.12));
  border-radius: 10px;
  background: var(--kart, rgba(255,255,255,.03));
  overflow: hidden;
  max-height: 460px;
  display: flex;
  justify-content: center;
}
.zo-pdf-onizleme img {
  max-width: 100%;
  height: auto;
  display: block;
}
.zo-paket-bas {
  margin: 0 0 8px;
  font-weight: 600;
}
.zo-paket-liste {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 260px;
  overflow: auto;
  border: 1px solid var(--cizgi, rgba(255,255,255,.12));
  border-radius: 10px;
}
.zo-paket-liste li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 11px;
  font-size: 13px;
}
.zo-paket-liste li + li {
  border-top: 1px solid var(--cizgi, rgba(255,255,255,.08));
}
.zo-paket-liste li span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.zo-paket-liste li b {
  flex: none;
  opacity: .72;
  font-weight: 500;
}
@media (max-width: 620px) {
  .zo-pdf-onizleme { max-height: 320px; }
}