:root{
  --vm-blue:#3aa7cf;
  --vm-dark:#1f2937;
  --vm-bg:#f2f4f7;
  --vm-card:#ffffff;
  --vm-text:#0f172a;
  --vm-muted:#64748b;
  --vm-glow:#3aa7ff;
}
*{box-sizing:border-box}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;background:var(--vm-bg);color:var(--vm-text)}
a{color:inherit}

.vm-header{background:var(--vm-blue);padding:28px 0}
.vm-container{max-width:1100px;margin:0 auto;padding:0 16px}
.vm-header .vm-container{display:flex;justify-content:center;align-items:center}
.vm-logo{height:42px;width:auto}

.vm-main{padding:34px 0}
.vm-card{
  background:var(--vm-card);
  border-radius:14px;
  box-shadow:0 10px 28px rgba(0,0,0,.08);
  padding:22px;
}
.vm-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:18px}
@media (max-width: 980px){ .vm-grid{grid-template-columns:1fr} }

.vm-title{font-size:22px;margin:0 0 10px}
.vm-sub{margin:0 0 18px;color:var(--vm-muted);line-height:1.45}

.vm-slots{display:flex;flex-direction:column;gap:10px}
.vm-slot{
  border:1px solid #e5e7eb;border-radius:12px;padding:12px 12px;
  display:flex;justify-content:space-between;gap:10px;align-items:center;
}
.vm-slot strong{display:block}
.vm-slot small{color:var(--vm-muted)}
.vm-actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end}

.vm-btn{
  border:0;border-radius:10px;padding:10px 12px;cursor:pointer;
  font-weight:650;
}
.vm-btn.primary{background:var(--vm-glow);color:#fff}
.vm-btn.ghost{background:#eef2ff;color:#1e293b}
.vm-btn.gray{background:#e9eef5;color:#0f172a}

label{display:block;font-weight:650;margin:10px 0 6px}
input,select,textarea{
  width:100%;padding:10px 10px;border-radius:10px;border:1px solid #d1d5db;
  outline:none;background:#fff;
}
input:focus,select:focus,textarea:focus{border-color:#94a3b8}
.vm-help{font-size:12px;color:var(--vm-muted);margin-top:6px}

.vm-footer{background:var(--vm-dark);color:#cbd5e1;padding:22px 0;margin-top:44px}
.vm-footer .vm-container{text-align:center;font-size:13px}

/* Modal preview */
.vm-modal{position:fixed;inset:0;display:none;z-index:10000}
.vm-modal.open{display:block}
.vm-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.65)}
.vm-modal-card{
  position:relative;width:min(1100px,92vw);margin:6vh auto;background:#0b1220;border-radius:16px;overflow:hidden;
  box-shadow:0 20px 60px rgba(0,0,0,.45);
}
.vm-modal-top{display:flex;justify-content:space-between;align-items:center;padding:10px 12px;background:rgba(255,255,255,.06);color:#e5e7eb}
.vm-close{border:0;background:rgba(255,255,255,.12);color:#fff;width:40px;height:40px;border-radius:12px;cursor:pointer;font-size:20px}
.vm-preview{position:relative}
.vm-preview img{width:100%;height:auto;display:block}
.vm-highlight{
  position:absolute;border:3px solid var(--vm-glow);
  box-shadow:0 0 0 4px rgba(58,167,255,.35), 0 0 35px rgba(58,167,255,.95);
  border-radius:10px;pointer-events:none;
}

/* Mobile warning */
.vm-warn{position:fixed;inset:0;display:none;z-index:10001}
.vm-warn.open{display:block}
.vm-warn .vm-backdrop{background:rgba(0,0,0,.65)}
.vm-warn-card{
  position:relative;width:min(520px,92vw);margin:14vh auto;background:#fff;border-radius:16px;overflow:hidden;
  box-shadow:0 20px 60px rgba(0,0,0,.35);
}
.vm-warn-head{padding:12px 14px;background:#f6f8fb;display:flex;justify-content:space-between;align-items:center}
.vm-warn-body{padding:14px;color:#0f172a}
.vm-warn-body p{margin:0 0 10px;line-height:1.45;color:#334155}
.vm-warn-actions{padding:12px 14px 14px;display:flex;justify-content:flex-end;gap:10px}

/* Modal sizing + proper scroll */
.vm-modal-card{
  max-height: 90vh;
  display: flex;
  flex-direction: column;
}

.vm-preview{
  flex: 1;
  overflow: auto;          /* resim uzun ise kaydır */
  background: #0b1220;
  padding: 12px;           /* kenarda nefes */
}

/* Img + overlay same coordinate space */
.vm-preview-inner{
  position: relative;
  width: 100%;
}

.vm-preview-inner img{
  width: 100%;
  height: auto;
  display: block;
}

/* Glow */
.vm-highlight{
  position: absolute;
  border: 3px solid #3aa7ff;
  box-shadow:
    0 0 0 4px rgba(58,167,255,.35),
    0 0 35px rgba(58,167,255,.95);
  border-radius: 10px;
  pointer-events: none;
}