/* Demo: tam genişlik gün batımı bandı, şahin sağda; yazı ve form solda, görüntünün sakin gökyüzünde (görüntüye ait yumuşak geçiş). */
.bolum-demo { padding-block: 0; min-height: clamp(660px, 94vh, 980px); display: grid; align-items: center; isolation: isolate; overflow: clip; background: var(--gece); }
.demo-zemin { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.demo-zemin::after { content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(180deg, var(--gece) 0%, rgba(10,8,6,0) 16%, rgba(10,8,6,0) 82%, var(--gece) 100%),
    linear-gradient(90deg, rgba(10,8,6,.92) 0%, rgba(10,8,6,.82) 30%, rgba(10,8,6,.5) 46%, rgba(10,8,6,.14) 60%, rgba(10,8,6,0) 70%); }
html[dir="rtl"] .demo-zemin::after { background:
    linear-gradient(180deg, var(--gece) 0%, rgba(10,8,6,0) 16%, rgba(10,8,6,0) 82%, var(--gece) 100%),
    linear-gradient(270deg, rgba(10,8,6,.92) 0%, rgba(10,8,6,.82) 30%, rgba(10,8,6,.5) 46%, rgba(10,8,6,.14) 60%, rgba(10,8,6,0) 70%); }
.demo-kayma { position: absolute; inset: 0; will-change: transform; }
html[dir="rtl"] .demo-kayma { scale: -1 1; }
.demo-afis, .demo-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 74% 50%; }
.demo-video[hidden] { display: none; }
.demo-ic { padding-block: clamp(104px, 14vh, 168px); }
.demo-metin { display: grid; gap: clamp(16px, 2.4vh, 24px); width: min(560px, 100%); }
.demo-baslik { font-size: clamp(40px, 5vw, 84px); line-height: 1; letter-spacing: -.032em; }
.demo-metin .govde-buyuk { color: rgba(244,238,223,.86); max-width: 30em; }
.demo-form { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; margin-top: 8px; }
.demo-alan { display: grid; gap: 6px; min-width: 0; }
.demo-genis, .demo-gonder { grid-column: 1 / -1; }
.demo-alan label { font: 500 11px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--metin-2); }
.demo-alan input { width: 100%; min-width: 0; height: 48px; padding: 0 14px; border-radius: 4px; border: 1px solid rgba(227,179,65,.4); background: rgba(14,11,7,.62);
  color: var(--metin); font: 400 16px var(--govde); outline: none; transition: border-color .25s, background .25s; }
.demo-alan input:focus { border-color: var(--altin); background: rgba(20,15,9,.82); }
.demo-alan input[aria-invalid="true"] { border-color: var(--eksi); }
.demo-gonder { min-height: 50px; margin-top: 4px; }
.demo-not { margin-top: -4px; color: var(--metin-2); font-size: 13px; }
.demo-durum { min-height: 18px; margin-top: -10px; font-size: 12px; letter-spacing: .04em; color: var(--altin-acik); }
@media (max-width: 760px) {
  /* telefon: görüntü üstte bant, yazı altta koyu zeminde (yazı görüntünün üstüne binmez) */
  .bolum-demo { display: block; min-height: 0; }
  .demo-zemin { position: relative; z-index: 0; height: clamp(240px, 70vw, 360px); }
  .demo-zemin::after { background: linear-gradient(180deg, var(--gece) 0%, rgba(10,8,6,0) 18%, rgba(10,8,6,0) 70%, var(--gece) 100%); }
  html[dir="rtl"] .demo-zemin::after { background: linear-gradient(180deg, var(--gece) 0%, rgba(10,8,6,0) 18%, rgba(10,8,6,0) 70%, var(--gece) 100%); }
  .demo-afis { object-position: 78% 50%; }
  .demo-ic { padding-block: 8px clamp(64px, 10vh, 96px); }
  .demo-form { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) { .demo-kayma { transform: none !important; } }

.demo-metin .ust-etiket { color: #FBE3A4; text-shadow: 0 1px 12px rgba(10,8,6,.6); }

/* e-posta uygulaması açılmazsa görünen adres: seçilebilir, büyük harfe çevrilmez */
.demo-durum.demo-yedek { text-transform: none; letter-spacing: .02em; user-select: all; }