/* ---------- demo talebi modalı: iki sütun (marka paneli + form), mobilde üst bant ---------- */
.dm{max-width:min(860px,calc(100vw - 24px))}
/* tam ekran blur yok: arkadaki animasyonlar her karede yeniden bulanıklaştırılınca açılışta donma oluyordu */
.dm::backdrop{background:radial-gradient(120% 90% at 50% 45%,color-mix(in srgb,var(--navy) 45%,transparent),color-mix(in srgb,var(--navy) 75%,transparent));backdrop-filter:none;-webkit-backdrop-filter:none}
.dm[open]{animation:dmPop2 .42s cubic-bezier(.2,.8,.2,1)}
@keyframes dmPop2{from{opacity:0;transform:translateY(16px) scale(.97)}}
@media (prefers-reduced-motion:reduce){.dm[open]{animation:none}}
.dm-box{display:grid;grid-template-columns:300px minmax(0,1fr);border-radius:26px;box-shadow:0 40px 90px -30px color-mix(in srgb,var(--navy) 75%,transparent)}
.dm-box > :not(.dm-side){grid-column:2}
.dm-box > input[name=website]{grid-column:1}

/* sol panel */
.dm-side{grid-column:1;grid-row:1 / span 6;position:relative;display:flex;flex-direction:column;gap:14px;padding:30px 26px;overflow:hidden;color:#fff;
  background:radial-gradient(90% 60% at 100% 0%,color-mix(in srgb,var(--azure) 55%,transparent),transparent 70%),linear-gradient(160deg,var(--navy),color-mix(in srgb,var(--navy) 70%,#000))}
.dm-side::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgb(255 255 255 / .12) 1px,transparent 1.2px);background-size:18px 18px;mask-image:linear-gradient(180deg,#000,transparent 75%);pointer-events:none}
.dm-side::after{content:"";position:absolute;right:-70px;bottom:-70px;width:220px;height:220px;border-radius:50%;border:34px solid rgb(255 255 255 / .06);pointer-events:none}
.dm-side > *{position:relative}
.dm-side-mark{display:grid;place-items:center;width:48px;height:48px;border-radius:15px;background:rgb(255 255 255 / .12);border:1px solid rgb(255 255 255 / .22);box-shadow:0 1px 0 rgb(255 255 255 / .2) inset}
.dm-side-mark svg{width:26px;height:26px;fill:none;stroke:#fff;stroke-width:1.7;stroke-linecap:round}
.dm-side-mark circle{fill:#fff;stroke:none}
.dm-side-t{font:800 21px/1.2 var(--sans);letter-spacing:-.01em}
.dm-side-p{margin:0;font-size:14px;line-height:1.55;color:rgb(255 255 255 / .75)}
.dm-side-steps{display:grid;gap:10px;margin:6px 0 0;padding:0;list-style:none;counter-reset:none}
.dm-side-steps li{display:flex;align-items:center;gap:12px;font-size:13.5px;font-weight:600;color:rgb(255 255 255 / .92)}
.dm-side-steps i{display:grid;place-items:center;flex:none;width:28px;height:28px;border-radius:50%;background:rgb(255 255 255 / .12);border:1px solid rgb(255 255 255 / .25);font:700 12px/1 var(--sans);font-style:normal}
.dm-side-steps li:first-child i{background:#fff;color:var(--navy);border-color:#fff}
.dm-side-link{display:inline-flex;align-items:center;gap:8px;margin-top:auto;padding-top:14px;font-size:13.5px;font-weight:700;color:#fff;text-decoration:none}
.dm-side-link svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s}
.dm-side-link:hover svg{transform:translateX(3px)}

/* sağ taraf: form */
.dm-head{padding:26px 28px 4px}
.dm-head .dm-brand{gap:0}
.dm-head .dm-mark{display:none}
.dm-head h2{font-size:22px;font-weight:800;letter-spacing:-.01em;color:var(--ink)}
.dm-x{width:38px;height:38px;border-radius:12px;border:1px solid var(--line);margin:-4px -8px 0 0}
.dm-body{padding:18px 28px 4px}
.dm .qf-grid{gap:14px}
.dm .qf-row > span{font-size:13px;font-weight:700;color:var(--ink)}
.dm label.qf-row{position:relative}
.dm .qf-row input{min-height:50px;padding-left:44px;border-radius:14px;background-color:var(--paper);transition:border-color .2s,background-color .2s,box-shadow .2s}
.dm .qf-row input:focus{background-color:var(--surface,#fff);border-color:var(--azure);box-shadow:0 0 0 4px color-mix(in srgb,var(--azure) 16%,transparent)}
.dm label.qf-row[for="dm-name"]::after{content:"";position:absolute;left:14px;bottom:16px;width:18px;height:18px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A94AD' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c1.5-4 4.5-6 8-6s6.5 2 8 6'/%3E%3C/svg%3E") center/18px 18px no-repeat;pointer-events:none}
.dm label.qf-row[for="dm-company"]::after{content:"";position:absolute;left:14px;bottom:16px;width:18px;height:18px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A94AD' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='3' width='16' height='18' rx='2'/%3E%3Cpath d='M9 7h2M13 7h2M9 11h2M13 11h2M10 21v-4h4v4'/%3E%3C/svg%3E") center/18px 18px no-repeat;pointer-events:none}
.dm label.qf-row[for="dm-mail"]::after{content:"";position:absolute;left:14px;bottom:16px;width:18px;height:18px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A94AD' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='M4 7l8 6 8-6'/%3E%3C/svg%3E") center/18px 18px no-repeat;pointer-events:none}
.dm label.qf-row[for="dm-phone"]::after{content:"";position:absolute;left:14px;bottom:16px;width:18px;height:18px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A94AD' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 4h4l2 5-2.5 1.5a11 11 0 0 0 5 5L15 13l5 2v4a2 2 0 0 1-2 2A16 16 0 0 1 3 6a2 2 0 0 1 2-2'/%3E%3C/svg%3E") center/18px 18px no-repeat;pointer-events:none}
.dm .consent{margin-top:16px}
.dm-foot{margin-top:20px;padding:16px 28px 22px;border-top:0;background:none}
.dm-foot .dm-alt{display:none}
.dm-acts{width:100%;display:grid;grid-template-columns:auto 1fr;gap:10px;margin:0}
.dm-acts .btn{min-height:50px;border-radius:14px;font-size:15px}
.dm-acts .btn--primary{background:linear-gradient(180deg,color-mix(in srgb,var(--azure) 88%,#fff),var(--azure));box-shadow:0 14px 26px -14px color-mix(in srgb,var(--azure) 90%,transparent)}
.dm-acts .btn--primary .ic{transition:transform .2s}
.dm-acts .btn--primary:hover .ic{transform:translateX(3px)}
.dm-done{padding:26px 28px 4px}
.dm-foot--done{padding:16px 28px 22px}
.dm-foot--done .btn{min-height:46px;border-radius:14px}

@media (max-width:760px){
  .dm{max-width:min(520px,calc(100vw - 20px))}
  .dm-box{grid-template-columns:1fr}
  .dm-box > *,.dm-box > :not(.dm-side){grid-column:1}
  .dm-side{grid-row:auto;flex-direction:row;flex-wrap:wrap;align-items:center;gap:6px 14px;padding:20px 22px}
  .dm-side-mark{width:42px;height:42px;border-radius:13px}
  .dm-side-t{font-size:18px}
  .dm-side-p,.dm-side-steps{display:none}
  .dm-side-link{flex-basis:100%;margin:0;padding-top:4px;font-size:13px;color:rgb(255 255 255 / .85)}
  .dm-head{padding:20px 22px 0}
  .dm-head h2{font-size:19px}
  .dm-body{padding:14px 22px 0}
  .dm-foot,.dm-foot--done{padding:14px 22px 20px}
  .dm-done{padding:20px 22px 0}
}
@media (max-width:420px){.dm-acts{grid-template-columns:1fr}.dm-acts .btn--line{order:2}}

/* Chrome otomatik doldurma: mavi zemin yerine tasarım zemini */
.dm .qf-row input:-webkit-autofill,.dm .qf-row input:-webkit-autofill:hover,.dm .qf-row input:-webkit-autofill:focus{-webkit-box-shadow:0 0 0 60px var(--paper) inset;-webkit-text-fill-color:var(--text);caret-color:var(--text);transition:background-color 9999s}