/* media — görsel türevleri, galeri görüntüleyici, video, ilan verme (fotoğraf sıralama, video, fiyat önerisi), ilan detay ekleri. Sahibi: Agent 6 */

/* <picture> sarmalayıcısı kart/slayt düzenini bozmasın (App.picture) */
.ph > picture, .ls-slide > picture, .po-th > picture, .gl-th > picture, .md-slide > picture { display: contents; }
img[data-full] { background: transparent; }

/* ---------- ilan detay: karusel ---------- */
.ls-slide.md-vslide { background: #000; position: relative; }
.md-vslide video { width: 100%; height: 100%; object-fit: contain; background: #000; display: block; }
.md-vbadge { position: absolute; left: 12px; bottom: 12px; z-index: 2; display: inline-flex; align-items: center; gap: 5px; background: rgba(22,24,29,.72); color: #fff; font-size: 12px; font-weight: 800; padding: 5px 10px; border-radius: 10px; pointer-events: none; }
.md-vbadge svg { width: 14px; height: 14px; }
.md-dots { position: absolute; left: 0; right: 0; bottom: 14px; display: flex; justify-content: center; gap: 6px; z-index: 2; pointer-events: none; }
.md-dots i { width: 6px; height: 6px; border-radius: 3px; background: rgba(255,255,255,.55); box-shadow: 0 0 0 1px rgba(0,0,0,.12); transition: width .2s, background .2s; }
.md-dots i.on { width: 16px; background: #fff; }
.md-dots i.v { background: rgba(255,255,255,.55); }
@media (prefers-reduced-motion: reduce) { .md-dots i { transition: none; } }

/* ---------- ilan detay: ekler ---------- */
.md-sec { display: flex; flex-direction: column; gap: 10px; }
.md-store { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 14px; border-radius: 14px; background: var(--soft); font-weight: 800; font-size: 14px; color: var(--ink); text-decoration: none; margin-top: 8px; }
.md-store .grow { flex: 1; min-width: 0; }
.md-tip { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; background: var(--card); border: 1px dashed var(--line); font-size: 13px; font-weight: 700; color: var(--muted); line-height: 1.4; text-decoration: none; }
.md-tip svg { flex-shrink: 0; color: var(--sea, #1C8C7A); }
.md-tip b { color: var(--ink); }
.md-sharebtn { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px; border-radius: 12px; background: var(--soft); font-weight: 800; font-size: 13px; }

/* ---------- galeri: tam ekran kaydırmalı görüntüleyici ---------- */
.gl.md-gl { touch-action: pan-x pan-y; }
.md-track { flex: 1; min-height: 0; display: flex; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior: contain; }
.md-track::-webkit-scrollbar { display: none; }
.md-track.zoomed { overflow: hidden; touch-action: none; }
.md-slide { flex: 0 0 100%; width: 100%; height: 100%; scroll-snap-align: center; scroll-snap-stop: always; display: flex; align-items: center; justify-content: center; overflow: hidden; position: relative; }
.md-slide img { max-width: 100%; max-height: 100%; object-fit: contain; transform-origin: 50% 50%; will-change: transform; user-select: none; -webkit-user-select: none; -webkit-user-drag: none; -webkit-touch-callout: none; transition: transform .22s ease; cursor: zoom-in; }
.md-slide img.nt { transition: none; }
.md-slide.z img { cursor: grab; }
.md-slide video { max-width: 100%; max-height: 100%; width: 100%; background: #000; }
.md-slide .gl-ph { width: 100%; aspect-ratio: 1/1; display: flex; align-items: center; justify-content: center; }
.md-hint { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); background: rgba(255,255,255,.14); color: #fff; font-size: 12px; font-weight: 700; padding: 5px 10px; border-radius: 10px; pointer-events: none; transition: opacity .4s; white-space: nowrap; }
.md-hint.off { opacity: 0; }
.gl-th.md-vth { position: relative; background: #111; }
.gl-th.md-vth .md-play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff; background: rgba(0,0,0,.35); }
@media (prefers-reduced-motion: reduce) { .md-slide img { transition: none; } }

/* ---------- ilan ver: fotoğraflar ---------- */
.po-acts.md-acts5 { grid-template-columns: repeat(5, 1fr); }
.po-th { touch-action: manipulation; -webkit-touch-callout: none; user-select: none; -webkit-user-select: none; }
.po-th img { pointer-events: none; -webkit-user-drag: none; }
.po-th.md-dragging { opacity: .28; }
.po-th.md-drop { border-color: var(--brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 35%, transparent); }
.md-ghost { position: fixed; z-index: 90; pointer-events: none; border-radius: 14px; overflow: hidden; box-shadow: 0 14px 34px rgba(0,0,0,.28); transform: scale(1.06); opacity: .95; }
.md-ghost img { width: 100%; height: 100%; object-fit: cover; display: block; }
.md-dragmode .po-photos { cursor: grabbing; }
.po-th .md-st { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,.45); }
[data-theme="dark"] .po-th .md-st { background: rgba(0,0,0,.4); }
.po-th .md-st.err { background: rgba(200,40,40,.28); color: #fff; }
.po-th .md-st.err span { width: 28px; height: 28px; border-radius: 14px; background: var(--err, #C8372D); display: flex; align-items: center; justify-content: center; font-weight: 800; }
.md-spin { width: 26px; height: 26px; border-radius: 50%; border: 3px solid rgba(22,24,29,.18); border-top-color: var(--brand); animation: md-spin .8s linear infinite; }
@keyframes md-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .md-spin { animation-duration: 2.4s; } }
.md-uperr { font-size: 12.5px; font-weight: 700; color: var(--err); margin: 0; }

/* ---------- ilan ver: video ---------- */
.md-vbox { display: flex; flex-direction: column; gap: 8px; }
.md-vadd { position: relative; min-height: 64px; border-radius: 14px; border: 2px dashed var(--line); background: var(--card); display: flex; align-items: center; gap: 12px; padding: 10px 14px; cursor: pointer; font-weight: 800; font-size: 14px; color: var(--brand-dd, var(--ink)); }
.md-vadd .ic { width: 40px; height: 40px; border-radius: 12px; background: var(--peach, #FFE6D6); color: var(--peach-t, #A2410E); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.md-vadd small { display: block; font-size: 12px; font-weight: 600; color: var(--muted); }
.md-vadd input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.md-vadd:focus-within { outline: 3px solid color-mix(in srgb, var(--brand) 45%, transparent); }
.md-vprev { position: relative; border-radius: 14px; overflow: hidden; background: #000; aspect-ratio: 16/10; }
.md-vprev video { width: 100%; height: 100%; object-fit: contain; display: block; }
.md-vprev .md-vbadge { top: 10px; bottom: auto; }
.md-vprev .md-vst { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 8px; align-items: center; justify-content: center; background: rgba(0,0,0,.45); color: #fff; font-weight: 800; font-size: 13px; }
.md-vrow { display: flex; gap: 8px; }
.md-vrow .btn { flex: 1; height: 44px; font-size: 14px; }

/* ---------- ilan ver: fiyat önerisi ---------- */
.md-hintbox { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 16px; background: color-mix(in srgb, var(--sea, #1C8C7A) 10%, var(--card)); border: 1px solid color-mix(in srgb, var(--sea, #1C8C7A) 25%, transparent); font-size: 14px; font-weight: 600; line-height: 1.45; }
.md-hintbox svg { flex-shrink: 0; margin-top: 1px; color: var(--sea, #1C8C7A); }
.md-hintbox b { font-weight: 800; }
.md-hintbox small { display: block; font-size: 12px; color: var(--muted); font-weight: 600; margin-top: 2px; }
.md-hintbar { display: block; position: relative; height: 6px; border-radius: 3px; background: color-mix(in srgb, var(--sea, #1C8C7A) 25%, transparent); margin: 8px 0 2px; }
.md-hintbar i { position: absolute; top: -3px; width: 12px; height: 12px; border-radius: 6px; background: var(--ink); border: 2px solid var(--card); transform: translateX(-50%); }
.md-hintbar i.med { background: var(--sea, #1C8C7A); }
.md-warn { display: flex; gap: 10px; align-items: flex-start; padding: 10px 14px; border-radius: 14px; background: color-mix(in srgb, var(--sun, #F2B33D) 18%, var(--card)); font-size: 13.5px; font-weight: 700; line-height: 1.45; }
.md-warn svg { flex-shrink: 0; margin-top: 1px; }
.md-warn[hidden] { display: none; }

/* ---------- ilan ver: dinamik kategori alanları ---------- */
.md-unit { display: flex; align-items: center; gap: 8px; }
.md-unit .inp { flex: 1; min-width: 0; }
.md-unit em { font-style: normal; font-weight: 800; color: var(--muted); font-size: 14px; }
.md-hintbox > .grow { display: block; flex: 1; min-width: 0; }

/* ================= Wave 5 / B — fotoğraf öncelikli ilan akışı ================= */
/* büyük "Fotoğraf ekle" alanı */
.po-add.big { min-height: 216px; gap: 6px; border-width: 2px; transition: background .15s, border-color .15s; }
.po-add.big .md-add-ic { width: 64px; height: 64px; border-radius: 22px; background: var(--brand); color: #fff; display: flex; align-items: center; justify-content: center; margin-bottom: 4px; box-shadow: 0 10px 24px color-mix(in srgb, var(--brand) 32%, transparent); }
.po-add.big .md-add-t { font-family: var(--dfont); font-size: 20px; font-weight: 800; color: var(--ink); }
.po-add.big .md-add-dnd { display: none; font-weight: 600; }
@media (hover: hover) and (pointer: fine) {
  .po-add.big .md-add-dnd { display: block; }
  .po-add.big:hover { border-color: var(--brand-d); background: color-mix(in srgb, var(--brand) 8%, var(--card)); }
}
/* sürükle-bırak: dosya sürüklenince bindirme */
.md-drop-zone { position: relative; }
.md-drop-ov { position: absolute; inset: -6px; border-radius: 18px; border: 3px dashed var(--brand); background: color-mix(in srgb, var(--brand) 12%, var(--card)); color: var(--brand-dd); display: none; flex-direction: column; align-items: center; justify-content: center; gap: 6px; font-size: 16px; z-index: 3; pointer-events: none; }
.md-drop-zone.on .md-drop-ov { display: flex; }

/* seçili fotoğraf eylemleri: 4 sütun × 2 satır */
.po-acts.md-acts8 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.po-acts.md-acts8 .md-span2 { grid-column: span 2; flex-direction: row; gap: 6px; }
.po-acts.md-acts8 button.md-on { background: color-mix(in srgb, var(--sea) 14%, var(--card)); color: var(--sea-t); }
.po-th .md-enh-b { position: absolute; left: 6px; bottom: 6px; width: 22px; height: 22px; border-radius: 11px; background: var(--sea); color: #fff; display: flex; align-items: center; justify-content: center; }

/* ipucu kartı + dürtme */
.md-tips { border-radius: 16px; background: var(--cream); border: 1px solid color-mix(in srgb, var(--brand) 22%, var(--line)); padding: 14px 14px 6px; }
[data-theme="dark"] .md-tips { background: color-mix(in srgb, var(--brand) 8%, var(--card)); }
.md-tips-h { display: flex; align-items: center; gap: 8px; font-size: 15px; line-height: 1.3; color: var(--ink); }
.md-tips-h svg { flex-shrink: 0; color: var(--brand-d); }
[data-theme="dark"] .md-tips-h svg { color: var(--brand-dd); }
.md-tips ul { list-style: none; margin: 8px 0 0; padding: 0; }
.md-tips li { display: flex; gap: 10px; align-items: flex-start; padding: 8px 0; border-top: 1px solid var(--line2); font-size: 13.5px; font-weight: 600; line-height: 1.45; color: var(--muted); }
.md-tips li b { color: var(--ink); font-weight: 800; }
.md-tip-ic { width: 30px; height: 30px; border-radius: 10px; background: var(--peach); color: var(--peach-t); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.md-nudge { display: flex; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 14px; background: var(--sea-l); color: var(--sea-t); font-size: 13px; font-weight: 700; line-height: 1.4; }
.md-nudge svg { flex-shrink: 0; }

/* kırpma */
.md-crop { position: relative; width: 100%; aspect-ratio: 4 / 3; border-radius: 16px; overflow: hidden; background: #111; touch-action: none; cursor: grab; user-select: none; -webkit-user-select: none; }
.md-crop:active { cursor: grabbing; }
.md-crop:focus-visible { outline: 3px solid color-mix(in srgb, var(--brand) 55%, transparent); outline-offset: 2px; }
.md-crop img { position: absolute; left: 0; top: 0; max-width: none; transform-origin: 0 0; pointer-events: none; -webkit-user-drag: none; }
.md-crop-grid { position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 0 2px rgba(255,255,255,.85);
  background: linear-gradient(to right, transparent calc(33.33% - .5px), rgba(255,255,255,.45) calc(33.33% - .5px), rgba(255,255,255,.45) calc(33.33% + .5px), transparent calc(33.33% + .5px), transparent calc(66.66% - .5px), rgba(255,255,255,.45) calc(66.66% - .5px), rgba(255,255,255,.45) calc(66.66% + .5px), transparent calc(66.66% + .5px)),
              linear-gradient(to bottom, transparent calc(33.33% - .5px), rgba(255,255,255,.45) calc(33.33% - .5px), rgba(255,255,255,.45) calc(33.33% + .5px), transparent calc(33.33% + .5px), transparent calc(66.66% - .5px), rgba(255,255,255,.45) calc(66.66% - .5px), rgba(255,255,255,.45) calc(66.66% + .5px), transparent calc(66.66% + .5px)); }
.md-zoom { display: flex; align-items: center; gap: 10px; margin-top: 12px; color: var(--muted); min-height: 44px; }
.md-zoom input { flex: 1; accent-color: var(--brand-d); min-height: 44px; }

/* otomatik iyileştir önizleme */
.md-enh { position: relative; border-radius: 16px; overflow: hidden; background: var(--soft); display: flex; align-items: center; justify-content: center; max-height: 52vh; touch-action: none; user-select: none; -webkit-user-select: none; cursor: pointer; }
.md-enh img { max-width: 100%; max-height: 52vh; object-fit: contain; display: block; pointer-events: none; -webkit-user-drag: none; }
.md-enh-lbl { position: absolute; left: 10px; top: 10px; background: rgba(22,24,29,.72); color: #fff; font-size: 12px; font-weight: 800; padding: 4px 10px; border-radius: 10px; }

/* fotoğrafsız yayın uyarısı */
.md-np-ic { width: 64px; height: 64px; border-radius: 22px; margin: 4px auto 12px; background: var(--peach); color: var(--peach-t); display: flex; align-items: center; justify-content: center; }
.md-np-add { position: relative; cursor: pointer; }
.md-np-add input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.md-np-add:focus-within { outline: 3px solid color-mix(in srgb, var(--brand) 45%, transparent); outline-offset: 2px; }

/* ilan kartı: fotoğrafsız yer tutucu (App.photo → .ph-none; kategori rengi + ikon + başlığın baş harfi) */
.ph-none { position: relative; width: 100%; height: 100%; min-height: 100%; align-self: stretch; display: flex; align-items: center; justify-content: center; overflow: hidden; container-type: inline-size; border-radius: inherit;
  background: radial-gradient(120% 90% at 20% 10%, color-mix(in srgb, var(--pb) 70%, #fff) 0%, var(--pb) 55%, color-mix(in srgb, var(--pb) 82%, var(--pc)) 100%); color: var(--pc); }
.ph-none .ph-ini { position: relative; font-family: var(--dfont); font-weight: 800; line-height: 1; letter-spacing: -.03em; font-size: 44px; font-size: 40cqw; opacity: .92; text-transform: none; }
.ph-none .ph-ic { position: absolute; right: -8%; bottom: -10%; opacity: .16; transform: rotate(-12deg); display: flex; }
.ph-none .ph-ic svg { width: 62cqw; height: 62cqw; }
.ph-none.no-ini .ph-ic { position: static; opacity: .9; transform: none; }
.ph-none.no-ini .ph-ic svg { width: 44cqw; height: 44cqw; }
[data-theme="dark"] .ph-none { background: radial-gradient(120% 90% at 20% 10%, color-mix(in srgb, var(--pc) 48%, var(--card)) 0%, color-mix(in srgb, var(--pc) 24%, var(--card)) 100%); color: color-mix(in srgb, var(--pb) 85%, #fff); }
[data-theme="dark"] .ph-none .ph-ic { opacity: .22; }
@media (prefers-reduced-motion: no-preference) { .po-add.big .md-add-ic { transition: transform .2s; } .po-add.big:hover .md-add-ic { transform: translateY(-2px) scale(1.04); } }

/* ---- İlan galerisi (listing.js hero): kırpmasız foto + bulanık zemin, oklar, küçük resimler ---- */
.ls-hero .ls-slide{position:relative;cursor:zoom-in}
.ls-hero .ls-slide.ls-bg{background:#16181D !important}
.ls-hero .ls-slide.ls-bg::before{content:"";position:absolute;inset:-40px;background:var(--lsbg) center/cover no-repeat;filter:blur(28px) saturate(1.15) brightness(.72);transform:translateZ(0)}
.ls-hero .ls-slide.ls-bg img{position:relative;z-index:1;object-fit:contain !important;background:transparent !important}
.ls-hero .ls-car{background:#16181D}
.ls-nav{position:absolute;top:50%;z-index:3;width:44px;height:44px;margin-top:-22px;border-radius:50%;border:0;display:grid;place-items:center;
  background:rgba(255,255,255,.92);color:#16181D;box-shadow:0 4px 14px rgba(0,0,0,.22);cursor:pointer;opacity:0;transition:opacity .2s,transform .2s}
.ls-prev{left:14px}.ls-next{right:14px}
.ls-nav:disabled{opacity:0 !important;pointer-events:none}
.ls-hero:hover .ls-nav,.ls-nav:focus-visible{opacity:1}
.ls-nav:hover{transform:scale(1.06)}
@media (hover:none){.ls-nav{display:none}}
.ls-all{position:absolute;left:12px;bottom:12px;z-index:3;display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:10px;
  background:rgba(255,255,255,.94);color:#16181D;font-size:12.5px;font-weight:800;text-decoration:none;box-shadow:0 2px 10px rgba(0,0,0,.18)}
.ls-all:hover{background:#fff}
.ls-thumbs{display:none}
@media (min-width:768px){
  .ls-hero .md-dots{display:none}
  .ls-thumbs{display:flex;gap:8px;padding:10px;overflow-x:auto;scrollbar-width:thin;background:var(--card,#fff);border-top:1px solid var(--line2,rgba(0,0,0,.08))}
  .ls-th{flex:0 0 auto;width:84px;height:64px;border-radius:10px;overflow:hidden;border:0;padding:0;cursor:pointer;position:relative;opacity:.62;
    outline:2px solid transparent;outline-offset:-2px;transition:opacity .15s,outline-color .15s;display:flex;align-items:center;justify-content:center}
  .ls-th img{width:100%;height:100%;object-fit:cover;display:block}
  .ls-th:hover{opacity:.9}
  .ls-th.on{opacity:1;outline-color:var(--brand,#EA580C)}
  .ls-th .md-play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#fff;background:rgba(0,0,0,.35)}
  .ls-hero .ls-cnt{bottom:auto;top:62px;right:14px}
}
@media (max-width:767px){.ls-all{display:none}}
[data-theme="dark"] .ls-nav,[data-theme="dark"] .ls-all{background:rgba(30,32,38,.92);color:#fff}
@media (min-width:768px){.ls-hero:has(.ls-thumbs) .ls-all{bottom:97px}}