/* Tryr Swap (2026-10-11, madde 2): Try-on/Muzik studyo iskeleti (muzik.css) uzerine yalniz Swap'a ozgu
   parcalar: adim gostergesi, birakma alani, onizleme ustunde cift tutamacli aralik, hedef cipleri,
   rehber videosu. Belirtecler style.css :root'tan; yeni renk ve yazi tipi yok. */

/* Adim gostergesi: iki sutunun ustunde tam genislik. Her adim bir dugme: gecilenler tiklanir, sonrakiler kapali.
   aria-current gorunen adimda; swap-adim-simdi isin bulundugu adim (baska adima bakilirken). */
.swap-adimlar { grid-column: 1 / -1; display: flex; gap: 6px; margin: 0; padding: 0; list-style: none; overflow-x: auto; scrollbar-width: none; }
.swap-adimlar::-webkit-scrollbar { display: none; }
.swap-adimlar li { flex: 1 1 0; display: flex; min-width: 0; }
.swap-adim-git { flex: 1; display: flex; align-items: center; gap: 8px; min-width: 0; min-height: 44px; margin: 0; padding: 0 12px; border-radius: 12px; background: var(--card); border: 1px solid var(--rule); font: inherit; font-size: 13.5px; font-weight: 700; color: var(--muted); white-space: nowrap; cursor: pointer; text-align: left; }
.swap-adim-git:hover:not(:disabled) { border-color: var(--ink-soft); color: var(--ink); }
.swap-adim-git:disabled { cursor: default; color: var(--dim); }
.swap-adim-git:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.swap-adim-no { display: inline-grid; place-items: center; flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--paper); font-size: 12px; font-variant-numeric: tabular-nums; }
.swap-adim-atla { font-size: 12px; font-weight: 600; color: var(--muted); }
.swap-adimlar li.swap-adim-bitti .swap-adim-git { color: var(--ink-soft); }
.swap-adimlar li.swap-adim-bitti .swap-adim-no { background: var(--ink); color: #fff; }
.swap-adimlar li.swap-adim-simdi .swap-adim-no { background: var(--accent-soft); color: var(--accent-dark); box-shadow: inset 0 0 0 1.5px var(--accent); }
.swap-adimlar li[aria-current="step"] .swap-adim-git { color: var(--accent-dark); border-color: var(--accent); background: var(--accent-soft); }
.swap-adimlar li[aria-current="step"] .swap-adim-no { background: var(--accent); color: #fff; box-shadow: none; }

/* Rehber baglantisi ve satir ici video */
.swap-baglantilar { display: flex; flex-wrap: wrap; gap: 0 20px; margin: -8px 0 10px; }
.swap-baglantilar .m-raf-git { margin: 0; }
.swap-rehber-ac { display: inline-flex; align-items: center; min-height: 44px; margin: 0; padding: 0; border: 0; background: none; font: inherit; font-size: 14px; font-weight: 700; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.swap-rehber-ac:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: 4px; }
.swap-rehber { display: block; width: 100%; margin: 0 0 16px; border-radius: 14px; background: var(--ink); aspect-ratio: 16 / 9; }

/* Birakma alani: video girdisi alanin ustune serili ve saydam; tiklama ve birakma ona gider. */
.swap-birak { position: relative; display: grid; justify-items: center; gap: 4px; padding: 28px 16px; border: 1.5px dashed var(--edge); border-radius: 14px; background: var(--paper); text-align: center; cursor: pointer; transition: border-color .15s, background .15s; }
.swap-birak input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.swap-birak span { pointer-events: none; }
.swap-birak:hover, .swap-birak.swap-birak-ustunde { border-color: var(--accent); background: var(--accent-soft); }
.swap-birak:focus-within { outline: 2px solid var(--ink); outline-offset: 2px; }
.swap-birak-ikon svg { width: 28px; height: 28px; fill: none; stroke: var(--ink-soft); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.swap-birak-baslik { font-size: 15px; font-weight: 800; color: var(--ink); }
.swap-birak-alt { font-size: 13px; color: var(--muted); }
.swap-birak-dosya { font-size: 13px; font-weight: 600; color: var(--ink-soft); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.swap-birak-dosya:empty { display: none; }
/* Video secildikten sonra alan kucuk bir "baska video sec" satirina iner. */
.swap-birak.swap-birak-dolu { grid-template-columns: auto minmax(0, 1fr); justify-items: start; align-items: center; column-gap: 10px; padding: 10px 14px; min-height: 44px; text-align: left; }
.swap-birak-dolu .swap-birak-ikon svg { width: 20px; height: 20px; }
.swap-birak-dolu .swap-birak-baslik, .swap-birak-dolu .swap-birak-alt { display: none; }

/* Onizleme: aralik secici videonun alt kenarinda, karartilmis bir serit ustunde. */
.swap-onizleme { margin-top: 12px; }
.swap-kare { position: relative; border-radius: 14px; overflow: hidden; background: var(--ink); }
.swap-kare video { display: block; width: 100%; max-height: 360px; object-fit: contain; background: var(--ink); cursor: pointer; }
.swap-oynat { position: absolute; top: 10px; left: 10px; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: rgba(14,19,32,.6); color: #fff; cursor: pointer; }
.swap-oynat svg { width: 18px; height: 18px; fill: currentColor; }
.swap-oynat .swap-ikon-durdur, .swap-oynat[aria-pressed="true"] .swap-ikon-oynat { display: none; }
.swap-oynat[aria-pressed="true"] .swap-ikon-durdur { display: inline; }
.swap-oynat:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.swap-aralik { position: absolute; left: 0; right: 0; bottom: 0; height: 56px; background: linear-gradient(180deg, rgba(14,19,32,0), rgba(14,19,32,.7)); }
.swap-aralik-ray { position: absolute; left: 22px; right: 22px; top: 50%; height: 6px; margin-top: -3px; border-radius: 6px; background: rgba(255,255,255,.35); }
.swap-aralik-ray i { position: absolute; top: 0; bottom: 0; left: 0; width: 100%; border-radius: 6px; background: var(--accent); }
/* Iki range girdisi ust uste: ray tiklamayi gecirir, yalniz tutamaclar yakalar (44 px dokunma alani).
   Tutamac merkezi 22 px ile genislik - 22 px arasinda gezer; ray da o kadar iceriden baslar. */
.swap-kare .swap-aralik input[type="range"] { position: absolute; left: 0; right: 0; top: 50%; width: 100%; height: 44px; margin: -22px 0 0; padding: 0; background: transparent; -webkit-appearance: none; appearance: none; pointer-events: none; }
.swap-kare .swap-aralik input.swap-ustte { z-index: 1; }
.swap-kare .swap-aralik input[type="range"]::-webkit-slider-runnable-track { height: 44px; background: transparent; }
.swap-kare .swap-aralik input[type="range"]::-moz-range-track { height: 44px; background: transparent; }
.swap-kare .swap-aralik input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 44px; height: 44px; margin-top: 0; border: 0; border-radius: 50%; background: radial-gradient(circle, var(--accent) 0 8px, #fff 8.5px 12px, transparent 12.5px); pointer-events: auto; cursor: grab; }
.swap-kare .swap-aralik input[type="range"]::-moz-range-thumb { width: 44px; height: 44px; border: 0; border-radius: 50%; background: radial-gradient(circle, var(--accent) 0 8px, #fff 8.5px 12px, transparent 12.5px); pointer-events: auto; cursor: grab; }
.swap-kare .swap-aralik input[type="range"]:disabled::-webkit-slider-thumb { visibility: hidden; }
.swap-kare .swap-aralik input[type="range"]:disabled::-moz-range-thumb { visibility: hidden; }
.swap-kare .swap-aralik input[type="range"]:focus-visible { outline: none; }
.swap-kare .swap-aralik input[type="range"]:focus-visible::-webkit-slider-thumb { background: radial-gradient(circle, var(--accent) 0 8px, #fff 8.5px 12px, var(--ink) 12.5px 15px, transparent 15.5px); }
.swap-kare .swap-aralik input[type="range"]:focus-visible::-moz-range-thumb { background: radial-gradient(circle, var(--accent) 0 8px, #fff 8.5px 12px, var(--ink) 12.5px 15px, transparent 15.5px); }
.swap-aralik-etiket { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-top: 8px; font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.swap-aralik-etiket b { color: var(--ink); font-weight: 800; }

/* Gelismis: katlanir bolum */
.swap-gelismis summary { display: flex; align-items: center; justify-content: space-between; min-height: 44px; font-size: 13.5px; font-weight: 700; color: var(--ink); cursor: pointer; list-style: none; }
.swap-gelismis summary::-webkit-details-marker { display: none; }
.swap-gelismis summary::after { content: ""; width: 8px; height: 8px; margin-right: 4px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg); transition: transform .15s; }
.swap-gelismis[open] summary::after { transform: rotate(-135deg); }
.swap-gelismis summary:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: 6px; }
.swap-gelismis .m-anahtar { min-height: 44px; margin-top: 4px; }
#swap-legacy-refs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }

/* Sorumluluk onayi */
.swap-izin { display: flex; align-items: flex-start; gap: 10px; min-height: 44px; font-size: 14px; line-height: 1.45; color: var(--ink-soft); cursor: pointer; }
.swap-izin input { flex: none; width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--accent); }

/* Maskeli modun yukleme dugmeleri: yerel "Dosya sec" yazisi yok, secilen dosyanin adi gorunur. */
.swap-uygulama .m-yukle-dugme { min-height: 44px; flex-wrap: wrap; gap: 0 8px; max-width: 100%; box-sizing: border-box; }
.swap-dosya-ad { font-size: 12.5px; font-weight: 500; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.swap-dosya-ad:empty { display: none; }

/* Giris dugmesi: akisin tek turuncu dugmesi #swap-ana; giris ayni vurguyu ikincil siniftan alir. */
.swap-giris-dugme { background: var(--accent); border-color: var(--accent); color: #fff; }
.swap-giris-dugme:hover { background: var(--accent-dark); border-color: var(--accent-dark); }

/* Adim 1 is varken: duzenle dugmesi; diger adimlarda konsolda kisa ozet (klip + istem). */
.swap-duzenle { margin-top: 10px; }
.swap-uygulama textarea[readonly] { background: var(--paper); color: var(--ink-soft); }
.swap-ozet { display: flex; align-items: center; gap: 14px; padding: 16px 20px; }
.swap-ozet[hidden] { display: none; }
.swap-ozet video { flex: none; width: 72px; height: 72px; object-fit: cover; border-radius: 12px; background: var(--ink); }
.swap-ozet-metin { min-width: 0; }
.swap-ozet-istem { margin: 0; font-size: 14px; line-height: 1.45; color: var(--ink-soft); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; line-clamp: 3; }
.swap-ozet-git { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; padding: 0 8px; margin-left: -8px; border: 0; background: none; font: inherit; font-size: 14px; font-weight: 700; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.swap-kilitli .swap-aralik input[type="range"] { pointer-events: none; }

/* Tek ana dugme cubugu: uyari ustte, kredi satiri solda, dugme sagda, neden satiri altta. */
.swap-uygulama .m-eylem { row-gap: 8px; }
.swap-uyari { flex: 1 1 100%; margin: 0; padding: 8px 12px; border-radius: 10px; background: var(--accent-soft); color: var(--accent-dark); font-size: 13px; line-height: 1.4; }
.swap-uyari[hidden], .swap-neden[hidden], #swap-maliyet[hidden] { display: none; }
#swap-maliyet { margin: 0; }
.swap-neden { flex: 1 1 100%; margin: 0; font-size: 13px; color: var(--muted); text-align: right; }

/* Is rafi: durum, hedefler, sayfalar, maske, odeme ve sonuc tek kartta. */
.swap-is { padding: 18px 20px; }
.swap-is > div + div:not([hidden]) { margin-top: 4px; }
.swap-is h3 { font-size: 15px; margin: 4px 0 6px; }
.swap-durum { margin: 0 0 8px; font-size: 14px; font-weight: 700; color: var(--ink); }
.swap-durum:empty { display: none; }
.swap-kilit { margin: 0 0 8px; }
.swap-takildi { margin: 8px 0 12px; padding: 12px; border-radius: 12px; background: var(--accent-soft); }
.swap-takildi[hidden] { display: none; }
.swap-takildi p { margin: 0 0 8px; font-size: 13.5px; color: var(--accent-dark); }
.swap-dugmeler { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.swap-is > div > .m-dugme-birincil, .swap-is > div > .m-dugme-ikincil, #swap-extend-button { margin: 12px 0 0; }
.swap-is .m-fiyat { margin: 12px 0 0; }
.swap-alan { margin-top: 14px; }
.swap-is .m-secici select { border: 1.5px solid var(--edge); }
.swap-ikon { display: inline-grid; place-items: center; }
.swap-ikon svg, .swap-kaldir svg, .swap-ref-sil svg, .swap-ses-oynat svg, .swap-ikon-dugme svg, .swap-onayli svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.swap-ses-oynat svg { fill: currentColor; stroke: none; }

/* Hedef karti: tur cipleri + kaldir; "Videodaki / Yerine" cumlesi; referans kutusu ya da ses. */
.swap-target, .swap-sheet { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; min-width: 0; margin: 12px 0; padding: 14px; border: 1px solid var(--rule); border-radius: 14px; background: #fff; }
.swap-target [hidden] { display: none; }
.swap-hedef-bas { display: flex; align-items: flex-start; gap: 6px; }
.swap-hedef-bas .swap-tur { flex: 1; min-width: 0; }
.swap-tur .m-cip { min-height: 44px; display: inline-flex; align-items: center; gap: 6px; padding: 0 12px; }
.swap-ses-mod .m-cip { min-height: 44px; padding: 0 14px; }
.swap-kaldir, .swap-ref-sil, .swap-ses-oynat { flex: none; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 12px; background: transparent; color: var(--muted); cursor: pointer; }
.swap-kaldir:hover, .swap-ref-sil:hover { background: var(--paper); color: var(--ink); }
.swap-kaldir:focus-visible, .swap-ref-sil:focus-visible, .swap-ses-oynat:focus-visible, .swap-ekle:focus-visible, .swap-ozet-git:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.swap-cumle { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.swap-cumle label { display: grid; gap: 6px; font-size: 13px; font-weight: 600; color: var(--ink-soft); }
.m-kart .swap-target input[type="text"] { width: 100%; box-sizing: border-box; min-height: 44px; font: inherit; font-size: 14.5px; color: var(--ink); background: #fff; border: 1.5px solid var(--edge); border-radius: 12px; padding: 10px 12px; }
.m-kart .swap-target input[type="text"]:disabled { background: var(--paper); color: var(--ink-soft); }
.swap-target input[type="text"]::placeholder { color: var(--dim); }
/* Referans kutusu: dosya girdisi kutunun ustune serili ve saydam; dolu iken kucuk resim, dosya adi yok. */
.swap-ref { position: relative; display: flex; align-items: center; }
.swap-ref-kutu, .swap-ses-kutu { position: relative; display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 4px; border-radius: 14px; cursor: pointer; }
.swap-ref-kutu input, .swap-ses-kutu input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.swap-ref-kutu:focus-within, .swap-ses-kutu:focus-within { outline: 2px solid var(--ink); outline-offset: 2px; }
.swap-ref-kare { flex: none; display: grid; place-items: center; width: 72px; height: 72px; border: 1.5px dashed var(--edge); border-radius: 12px; background: var(--paper); color: var(--ink-soft); overflow: hidden; pointer-events: none; }
.swap-ref-kutu:hover .swap-ref-kare, .swap-ses-kutu:hover { border-color: var(--accent); }
.swap-ref-dolu .swap-ref-kare { border-style: solid; border-color: var(--rule); }
.swap-ref-kare img { width: 100%; height: 100%; object-fit: cover; }
.swap-ref-dolu .swap-ref-metin b { display: none; }
.swap-ref-metin { display: grid; gap: 2px; min-width: 0; pointer-events: none; }
.swap-ref-metin b { font-size: 14px; font-weight: 700; color: var(--ink); }
.swap-ref-metin small { font-size: 12.5px; color: var(--muted); line-height: 1.35; }
.swap-ref-sil { position: absolute; top: -12px; left: 54px; }
.swap-ref-sil svg { width: 22px; height: 22px; padding: 3px; box-sizing: border-box; border-radius: 50%; background: var(--ink); color: #fff; stroke-width: 2.4; }
.swap-ref-sil:hover { background: transparent; }
.swap-ses-kutu { padding: 10px 14px; border: 1.5px dashed var(--edge); background: var(--paper); }
.swap-ses-kutu .swap-ikon { color: var(--ink-soft); }
.swap-ses-satir { display: flex; align-items: center; gap: 6px; padding: 2px 4px; border: 1px solid var(--rule); border-radius: 12px; background: var(--paper); }
.swap-ses-satir .swap-ref-sil { position: static; margin-left: auto; }
.swap-ses-oynat { color: var(--ink); }
.swap-ses-ad { font-size: 14px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.swap-kamera-not { margin: 0; }
.swap-ekle { display: inline-flex; align-items: center; min-height: 44px; padding: 0; border: 0; background: none; font: inherit; font-size: 14px; font-weight: 700; color: var(--accent-dark); cursor: pointer; }
.swap-ekle:hover { text-decoration: underline; text-underline-offset: 3px; }
.swap-ekle[hidden] { display: none; }
.swap-bos-hedef { color: var(--accent-dark); }

/* Sayfalar: kutu izgarasi; her kutuda kucuk ikon dugmeler (yeniden olustur, onayla) ya da onay rozeti. */
.swap-sayfalar { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; margin: 12px 0; }
.swap-sheet { margin: 0; padding: 10px; gap: 8px; align-content: start; }
.swap-sheet img { display: block; width: 100%; height: auto; border-radius: 10px; background: var(--paper); }
.swap-sheet figcaption { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px; }
.swap-sheet-ad { flex: 1 1 100%; min-width: 0; font-size: 13.5px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.swap-sheet-dugmeler { display: flex; align-items: center; gap: 4px; flex: none; }
.swap-ikon-dugme { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1.5px solid var(--edge); border-radius: 12px; background: #fff; color: var(--ink); cursor: pointer; }
.swap-ikon-dugme:hover { border-color: var(--ink-soft); }
.swap-ikon-dugme:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.swap-ikon-dugme:disabled { color: var(--dim); cursor: not-allowed; }
.swap-onay { border-color: var(--accent); color: var(--accent-dark); }
.swap-onayli { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; font-size: 12.5px; font-weight: 700; color: var(--green); }
.swap-is .m-video { max-height: 420px; }
.swap-is textarea { overflow-wrap: anywhere; }
#swap-error { overflow-wrap: anywhere; }

/* Dar ekranda ana dugme ekranin altina sabitlenir: hangi adimda olunursa olunsun tek dugme gorunur. */
@media (max-width: 1023px) {
  .swap-uygulama .m-eylem { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; border-radius: 0; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); }
  .swap-studyo { padding-bottom: 180px; }
}

@media (max-width: 600px) {
  /* Dar ekranda yalniz gecerli adimin adi yazar; digerleri numara (ad ekran okuyucuda kalir). */
  .swap-adimlar { gap: 4px; }
  .swap-adimlar li { flex: 0 0 auto; }
  .swap-adim-git { justify-content: center; min-width: 44px; padding: 0 10px; font-size: 13px; box-sizing: border-box; }
  .swap-adimlar li[aria-current="step"] { flex: 1 1 auto; }
  .swap-adimlar li:not([aria-current="step"]) .swap-adim-git > span:not(.swap-adim-no) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .swap-cumle { grid-template-columns: minmax(0, 1fr); }
  /* Dar ekranda tur cipleri alt satira kayar: Isik, Kamera ve Ses ekran disinda kalmaz. */
  .swap-hedef-bas .swap-tur { flex-wrap: wrap; }
  .swap-neden { text-align: center; }
  .swap-is { padding: 16px; }
  .swap-dugmeler > * { flex: 1 1 auto; }
}