/* HTC Ücretsiz Araçlar — Video & Ses Düzenleyici (25 Eyl 2026).
   Düzenleyici alanı her temada KOYU: görüntüye odaklanılan bir ekran ve klip
   renkleri koyu zeminde ayırt ediliyor. Sayfanın geri kalanı sitenin açık/koyu
   temasını izler. Renkler kartvizitin rampasından (turkuaz → magenta). */

.sinir.genis { max-width: 1680px; }

.vd {
  --vd-zemin: #0f121b; --vd-panel: #151a26; --vd-panel2: #1b2130; --vd-cizgi: #262e42;
  --vd-metin: #e8ecf4; --vd-soluk: #93a0b6; --vd-vurgu: #2FCFC8; --vd-magenta: #D6339C;
  --vd-turuncu: #F45B3C; --vd-mor: #8A57D8;
  --vd-video: #1f6a73; --vd-video-k: #2FCFC8;
  --vd-resim: #4d3690; --vd-resim-k: #9d7be6;
  --vd-yazi: #7a2160; --vd-yazi-k: #e05cb5;
  --vd-ses: #7a5a14; --vd-ses-k: #e0a93a;
  --vd-baslik-gen: 128px;
  background: var(--vd-zemin); color: var(--vd-metin);
  border: 1px solid var(--vd-cizgi); border-radius: 14px; overflow: hidden;
  font-size: 13.5px; line-height: 1.45;
  user-select: none; -webkit-user-select: none;
}
.vd input, .vd textarea, .vd select { user-select: text; -webkit-user-select: text; }
.vd button {
  margin: 0; padding: 6px 11px; border-radius: 7px; font: inherit; font-weight: 600;
  color: var(--vd-metin); background: var(--vd-panel2); border: 1px solid var(--vd-cizgi);
  cursor: pointer; line-height: 1.3; filter: none;
}
.vd button:hover { background: #242c40; filter: none; }
.vd button:disabled { opacity: .4; cursor: default; }
.vd button.vd-ana {
  border-color: transparent; color: #fff;
  background: linear-gradient(96deg, var(--vd-magenta), var(--vd-turuncu));
}
.vd button.vd-ana:hover { filter: brightness(1.08); }
.vd button.vd-acik { background: rgba(47, 207, 200, .16); border-color: var(--vd-vurgu); }
.vd button.vd-ikon { padding: 6px 9px; min-width: 34px; }
.vd select, .vd input[type=text], .vd textarea {
  width: 100%; max-width: none; padding: 5px 8px; border-radius: 6px; font: inherit;
  background: var(--vd-zemin); color: var(--vd-metin); border: 1px solid var(--vd-cizgi);
}
.vd textarea { resize: vertical; min-height: 64px; }
.vd input[type=color] {
  width: 38px; height: 28px; padding: 0; border: 1px solid var(--vd-cizgi); border-radius: 6px;
  background: none; cursor: pointer;
}
.vd input[type=range] { width: 100%; accent-color: var(--vd-vurgu); }
.vd label { display: block; margin: 0; font-size: 12px; color: var(--vd-soluk); }
.vd kbd {
  font: 11px/1 ui-monospace, Consolas, monospace; padding: 2px 5px; border-radius: 4px;
  border: 1px solid var(--vd-cizgi); background: var(--vd-panel2); color: var(--vd-metin);
}

/* ── Üst çubuk ─────────────────────────────────────────────────────────── */
.vd-ust {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  padding: 8px 10px; background: var(--vd-panel); border-bottom: 1px solid var(--vd-cizgi);
}
.vd-ust .vd-baslik { font-weight: 700; letter-spacing: .01em; margin-right: 6px; }
.vd-ust .vd-bosluk { flex: 1; }
.vd-ust .vd-bilgi { color: var(--vd-soluk); font-size: 12px; }
.vd-grup { display: inline-flex; gap: 4px; align-items: center; }

/* ── Gövde: medya | önizleme | özellikler ──────────────────────────────── */
.vd-govde {
  display: grid; grid-template-columns: 236px minmax(0, 1fr) 300px;
  min-height: 380px;
}
.vd-medya, .vd-ozellik {
  background: var(--vd-panel); overflow-y: auto; max-height: min(62vh, 640px);
}
.vd-medya { border-right: 1px solid var(--vd-cizgi); padding: 10px; }
.vd-ozellik { border-left: 1px solid var(--vd-cizgi); padding: 10px 12px; }
.vd-bolum-baslik {
  font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--vd-soluk); margin: 2px 0 8px;
}
.vd-dosya-sec {
  display: flex !important; align-items: center; justify-content: center; gap: 6px;
  padding: 10px; border-radius: 9px; cursor: pointer; font-weight: 700; font-size: 13px !important;
  color: #fff !important; background: linear-gradient(96deg, var(--vd-vurgu), #3BA7E2);
}
.vd-dosya-sec input { display: none; }
.vd-dosya-sec:focus-within { outline: 2px solid #fff; outline-offset: 2px; }
.vd-birak-ipucu {
  margin: 8px 0 10px; padding: 10px; border: 1px dashed var(--vd-cizgi); border-radius: 9px;
  color: var(--vd-soluk); font-size: 12px; text-align: center;
}
.vd.surukleniyor .vd-birak-ipucu { border-color: var(--vd-vurgu); color: var(--vd-metin); background: rgba(47,207,200,.08); }
.vd-medya-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.vd-medya-oge {
  display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 8px; align-items: center;
  padding: 6px; border-radius: 8px; background: var(--vd-panel2); border: 1px solid transparent;
  cursor: grab;
}
.vd-medya-oge:hover { border-color: var(--vd-cizgi); }
.vd-medya-oge canvas, .vd-medya-oge .vd-medya-simge {
  width: 56px; height: 36px; border-radius: 5px; background: #000; display: grid; place-items: center;
  font-size: 18px;
}
.vd-medya-ad { font-weight: 600; font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vd-medya-alt { color: var(--vd-soluk); font-size: 11.5px; }
.vd-medya-uyari { color: #ffb4a3; font-size: 11px; }
.vd-medya-dugmeler { grid-column: 1 / -1; display: flex; gap: 4px; flex-wrap: wrap; }
.vd-medya-dugmeler button { padding: 3px 7px; font-size: 11.5px; font-weight: 600; }
.vd-medya-bos { color: var(--vd-soluk); font-size: 12px; padding: 4px 2px; }
.vd-okunuyor { color: var(--vd-soluk); font-size: 12px; padding: 6px; }

/* ── Önizleme ──────────────────────────────────────────────────────────── */
.vd-onizleme { display: flex; flex-direction: column; min-width: 0; background: #07090f; }
.vd-sahne {
  position: relative; flex: 1; min-height: 240px; height: clamp(240px, 48vh, 600px);
  display: flex; align-items: center; justify-content: center; padding: 10px; overflow: hidden;
}
.vd-sahne canvas {
  display: block; background: #000; box-shadow: 0 0 0 1px #20283a, 0 10px 40px rgba(0,0,0,.5);
  touch-action: none;
}
.vd-sahne-bos {
  position: absolute; inset: 0; display: grid; place-items: center; text-align: center;
  color: var(--vd-soluk); padding: 20px; pointer-events: none;
}
.vd-sahne-bos b { color: var(--vd-metin); font-size: 15px; display: block; margin-bottom: 4px; }
.vd-oynatici {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  padding: 7px 10px; border-top: 1px solid var(--vd-cizgi); background: var(--vd-panel);
}
.vd-zaman { font: 600 13px/1 ui-monospace, Consolas, monospace; letter-spacing: .02em; min-width: 150px; }
.vd-zaman span { color: var(--vd-soluk); }
.vd-ses-duzey { width: 90px !important; }

/* ── Araç çubuğu ───────────────────────────────────────────────────────── */
.vd-arac {
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
  padding: 7px 10px; background: var(--vd-panel); border-top: 1px solid var(--vd-cizgi);
}
.vd-arac .vd-ayrac { width: 1px; align-self: stretch; background: var(--vd-cizgi); margin: 0 3px; }
.vd-yakinlik { width: 110px !important; }

/* ── Zaman çizelgesi ───────────────────────────────────────────────────── */
.vd-cizelge {
  display: grid; grid-template-columns: var(--vd-baslik-gen) minmax(0, 1fr);
  border-top: 1px solid var(--vd-cizgi); background: var(--vd-zemin);
  max-height: 46vh; overflow-y: auto;
}
.vd-iz-basliklari { background: var(--vd-panel); border-right: 1px solid var(--vd-cizgi); }
.vd-kose { height: 28px; border-bottom: 1px solid var(--vd-cizgi); display: flex; align-items: center; padding: 0 6px; }
.vd-kose button { padding: 2px 7px; font-size: 11.5px; }
.vd-iz-baslik {
  display: flex; align-items: center; gap: 4px; padding: 0 6px;
  border-bottom: 1px solid var(--vd-cizgi); font-size: 12px; overflow: hidden;
}
.vd-iz-baslik .vd-iz-ad { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vd-iz-baslik button { padding: 1px 5px; font-size: 12px; min-width: 24px; background: transparent; border-color: transparent; }
.vd-iz-baslik button.kapali { opacity: .45; }
.vd-kaydirma { overflow-x: auto; overflow-y: hidden; position: relative; }
.vd-cetvel { position: sticky; left: 0; top: 0; z-index: 3; height: 28px; display: block;
             border-bottom: 1px solid var(--vd-cizgi); background: var(--vd-panel); cursor: text; }
.vd-izler-ic { position: relative; }
.vd-iz { position: relative; border-bottom: 1px solid #1a2031; }
.vd-iz.hedef { background: rgba(47, 207, 200, .07); }
.vd-iz[data-tur="goruntu"], .vd-iz-baslik[data-tur="goruntu"] { height: 60px; }
.vd-iz[data-tur="yazi"], .vd-iz-baslik[data-tur="yazi"] { height: 36px; }
.vd-iz[data-tur="ses"], .vd-iz-baslik[data-tur="ses"] { height: 48px; }
.vd-klip {
  position: absolute; top: 3px; bottom: 3px; border-radius: 6px; overflow: hidden;
  border: 1px solid; cursor: grab; touch-action: none; min-width: 4px;
  box-shadow: 0 1px 0 rgba(255,255,255,.06) inset;
}
.vd-klip.tur-video { background: var(--vd-video); border-color: var(--vd-video-k); }
.vd-klip.tur-resim { background: var(--vd-resim); border-color: var(--vd-resim-k); }
.vd-klip.tur-yazi { background: var(--vd-yazi); border-color: var(--vd-yazi-k); }
.vd-klip.tur-ses { background: var(--vd-ses); border-color: var(--vd-ses-k); }
.vd-klip.secili { outline: 2px solid #fff; outline-offset: 0; z-index: 2; }
.vd-klip.suruklenen { cursor: grabbing; opacity: .9; z-index: 4; }
.vd-klip canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.vd-klip-ad {
  position: absolute; left: 6px; top: 2px; right: 6px; font-size: 11px; font-weight: 700;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none;
  text-shadow: 0 1px 2px rgba(0,0,0,.8);
}
.vd-klip-rozet {
  position: absolute; right: 6px; bottom: 3px; font-size: 10px; font-weight: 700; padding: 0 4px;
  border-radius: 4px; background: rgba(0,0,0,.55); pointer-events: none;
}
.vd-solma { position: absolute; top: 0; bottom: 0; pointer-events: none; }
.vd-solma.giris { left: 0; background: linear-gradient(to top right, rgba(0,0,0,.55) 50%, transparent 51%); }
.vd-solma.cikis { right: 0; background: linear-gradient(to top left, rgba(0,0,0,.55) 50%, transparent 51%); }
.vd-tutamak { position: absolute; top: 0; bottom: 0; width: 9px; cursor: ew-resize; z-index: 1; }
.vd-tutamak.sol { left: 0; }
.vd-tutamak.sag { right: 0; }
.vd-klip:hover .vd-tutamak, .vd-klip.secili .vd-tutamak { background: rgba(255,255,255,.22); }
.vd-oynatma {
  position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; z-index: 5;
  background: var(--vd-turuncu); pointer-events: none;
}
.vd-oynatma::before {
  content: ""; position: absolute; top: -1px; left: -6px; border: 7px solid transparent;
  border-top: 9px solid var(--vd-turuncu);
}
.vd-miknatis-cizgi { position: absolute; top: 0; bottom: 0; width: 1px; background: #fff; opacity: .7; z-index: 5; pointer-events: none; }

/* ── Özellikler ────────────────────────────────────────────────────────── */
.vd-ozellik details { border-bottom: 1px solid var(--vd-cizgi); padding: 6px 0 8px; }
.vd-ozellik summary { cursor: pointer; font-weight: 700; font-size: 12.5px; padding: 4px 0; list-style: none; }
.vd-ozellik summary::-webkit-details-marker { display: none; }
.vd-ozellik summary::before { content: "▸ "; color: var(--vd-soluk); }
.vd-ozellik details[open] > summary::before { content: "▾ "; }
.vd-satir { display: grid; grid-template-columns: 84px minmax(0, 1fr) 58px; gap: 6px; align-items: center; margin: 6px 0; }
.vd-satir.iki { grid-template-columns: 84px minmax(0, 1fr); }
.vd-satir > span:first-child { font-size: 12px; color: var(--vd-soluk); }
.vd-satir input[type=text].vd-sayi { padding: 3px 5px; text-align: right; font-variant-numeric: tabular-nums; }
.vd-dugme-sirasi { display: flex; flex-wrap: wrap; gap: 5px; margin: 6px 0; }
.vd-dugme-sirasi button { padding: 4px 8px; font-size: 12px; }
.vd-klip-baslik { font-weight: 700; font-size: 14px; margin: 0 0 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vd-not { color: var(--vd-soluk); font-size: 11.5px; margin: 6px 0; }
.vd-renkler { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }

/* ── Bildirimler ───────────────────────────────────────────────────────── */
.vd-bildirimler { position: fixed; right: 16px; bottom: 16px; z-index: 50; display: grid; gap: 8px; max-width: min(420px, calc(100vw - 32px)); }
.vd-bildirim {
  background: #1d2436; color: #e8ecf4; border: 1px solid #2e3852; border-left: 4px solid var(--vd-vurgu, #2FCFC8);
  padding: 10px 12px; border-radius: 9px; font-size: 13px; box-shadow: 0 10px 30px rgba(0,0,0,.35);
}
.vd-bildirim.hata { border-left-color: #F45B3C; }
.vd-bildirim.uyari { border-left-color: #e0a93a; }

/* ── Dışa aktarım penceresi ────────────────────────────────────────────── */
.vd-pencere {
  border: 1px solid #2e3852; border-radius: 14px; padding: 0; width: min(560px, calc(100vw - 32px));
  background: #151a26; color: #e8ecf4; box-shadow: 0 30px 80px rgba(0,0,0,.55);
}
.vd-pencere::backdrop { background: rgba(5, 8, 15, .6); }
.vd-pencere-ic { padding: 18px 20px; }
.vd-pencere h3 { margin: 0 0 12px; font-size: 1.05rem; }
.vd-pencere .vd-alan { margin: 10px 0; }
.vd-pencere .vd-alan > span { display: block; font-size: 12px; color: #93a0b6; margin-bottom: 4px; }
.vd-pencere select, .vd-pencere input[type=text] {
  width: 100%; max-width: none; padding: 7px 9px; border-radius: 7px; font: inherit;
  background: #0f121b; color: #e8ecf4; border: 1px solid #262e42;
}
.vd-secenekler { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; }
.vd-secenekler label {
  display: flex; gap: 7px; align-items: center; padding: 7px 9px; border-radius: 8px;
  border: 1px solid #262e42; cursor: pointer; font-size: 13px; color: #e8ecf4; margin: 0;
}
.vd-secenekler label:has(input:checked) { border-color: #2FCFC8; background: rgba(47,207,200,.1); }
.vd-tahmin { color: #93a0b6; font-size: 12.5px; margin: 10px 0 0; }
.vd-ilerleme { height: 10px; border-radius: 6px; background: #0f121b; border: 1px solid #262e42; overflow: hidden; margin: 12px 0 6px; }
.vd-ilerleme > div { height: 100%; width: 0; background: linear-gradient(90deg, #2FCFC8, #D6339C); transition: width .2s; }
.vd-pencere-dugmeler { display: flex; gap: 8px; justify-content: flex-end; margin-top: 16px; flex-wrap: wrap; }
.vd-pencere button {
  padding: 8px 14px; border-radius: 8px; font: inherit; font-weight: 600; margin: 0;
  color: #e8ecf4; background: #1b2130; border: 1px solid #262e42; cursor: pointer; filter: none;
}
.vd-pencere button.vd-ana { border-color: transparent; color: #fff; background: linear-gradient(96deg, #D6339C, #F45B3C); }
.vd-pencere a.vd-indir {
  display: inline-block; padding: 8px 14px; border-radius: 8px; font-weight: 700; text-decoration: none;
  color: #fff; background: linear-gradient(96deg, #2FCFC8, #3BA7E2);
}
.vd-sonuc video, .vd-sonuc audio { width: 100%; max-height: 260px; margin-top: 10px; border-radius: 8px; background: #000; }
.vd-hata-metni { color: #ffb4a3; }

/* ── Destek / yükleniyor ───────────────────────────────────────────────── */
.vd-durum-kutu {
  padding: 16px 18px; border-radius: 12px; margin: 0 0 16px;
  border: 1px solid var(--cizgi, #E3E7EE); background: var(--kart, #fff);
}
.vd-durum-kutu.hata { border-color: rgba(244,91,60,.5); background: rgba(244,91,60,.08); }

.vd-yardim { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); margin-top: 22px; }
.vd-yardim .kutu { margin: 0; }
.vd-yardim h3 { margin-top: 0; font-size: 1rem; }
.vd-yardim ul { margin: 0; padding-left: 18px; color: var(--soluk); font-size: .92rem; }
.vd-yardim li { margin: 3px 0; }
.vd-kisayol { display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; font-size: .9rem; color: var(--soluk); }
.vd-kisayol kbd {
  font: 12px/1.2 ui-monospace, Consolas, monospace; padding: 2px 6px; border-radius: 5px;
  border: 1px solid var(--cizgi); background: var(--zemin); color: var(--metin);
}

/* ── Dar ekran ─────────────────────────────────────────────────────────── */
@media (max-width: 1180px) {
  .vd-govde { grid-template-columns: 200px minmax(0, 1fr) 264px; }
}
@media (max-width: 900px) {
  .vd { --vd-baslik-gen: 92px; border-radius: 10px; }
  /* Telefonda sıra: önizleme → araçlar → zaman çizelgesi → medya → ayarlar.
     Gövde ızgarası `contents` olur, parçalar düzenleyicinin sütununa dizilir. */
  .vd { display: flex; flex-direction: column; }
  .vd-govde { display: contents; }
  .vd-ust { order: 0; }
  .vd-onizleme { order: 1; }
  .vd-arac { order: 2; }
  .vd-cizelge { order: 3; }
  .vd-medya { order: 4; border-right: none; border-top: 1px solid var(--vd-cizgi); max-height: none; }
  .vd-ozellik { order: 5; border-left: none; border-top: 1px solid var(--vd-cizgi); max-height: none; }
  .vd-sahne { height: clamp(200px, 42vh, 460px); }
  .vd-medya-liste { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
  .vd-cizelge { max-height: none; }
  .vd-iz-baslik .vd-iz-ad { font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) { .vd-ilerleme > div { transition: none; } }

[hidden] { display: none !important; }