/* Ana sayfa: home.css üzerine koyu, tam ekran sinematik tema.
   Yatay ekranda video sahneyi kaplar, yazı sol altta; dikey ekranda video
   üstte genişlik boyunca, yazı altında lacivert zeminde. */
.dark { --stage-bg: var(--navy-deep); --shade: 15, 27, 61; }
body.dark { background: var(--navy-deep); }

.js .dark .bar { background: rgba(var(--shade), .55); border-bottom-color: rgba(201, 168, 92, .3); color: var(--light); }
.js .dark .links a:hover { color: var(--gold-light); }
.js .dark .langs { border-color: var(--light-dim); }
.js .dark .langs button { color: var(--light); }
.js .dark .langs button[aria-pressed="true"] { background: var(--light); color: var(--navy-deep); }

.js .dark .track { height: 760vh; }
.js .dark .poster { inset: 0; width: 100%; height: 100%; object-fit: cover; }

.js .dark .shade {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(var(--shade), .88) 0%, rgba(var(--shade), .5) 32%, rgba(var(--shade), 0) 58%);
}
.dark .shade { display: none; }
.js .dark .shade { display: block; }

.js .dark .cap {
  top: auto; bottom: clamp(56px, 11vh, 130px); left: clamp(24px, 6vw, 96px);
  width: min(36rem, calc(100% - 48px)); transform: none; text-align: left; color: #fff;
}
/* buzlu lacivert zemin: son karede (beyaz stüdyo) yazı havluların üstüne biniyordu */
.js .dark .cap {
  padding: 22px 26px 24px; border-radius: 14px;
  background: rgba(var(--shade), .58); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(201, 168, 92, .22);
}
.js .dark .cap h1, .js .dark .cap h2 { text-shadow: 0 2px 24px rgba(0, 0, 0, .35); }
.js .dark .cap > p:not(.kicker) { color: var(--light); }
.js .dark .cap .kicker { color: var(--gold-light); }
.js .dark .ctas { justify-content: flex-start; }
.js .dark .btn.ghost { color: var(--light); border-color: var(--light); }
.js .dark .btn.ghost:hover { background: var(--light); color: var(--navy-deep); }

.js .dark .hint { left: auto; right: clamp(24px, 6vw, 96px); transform: none; color: var(--light-dim); }

@media (orientation: portrait) {
  .js .dark .shade { display: none; }
  .js .dark .cap {
    top: var(--cap-top, 55vh); bottom: auto; left: 20px; width: calc(100% - 40px);
    padding: 0; background: none; border: 0; backdrop-filter: none; -webkit-backdrop-filter: none;
  }
  .js .dark .hint { right: 50%; transform: translateX(50%); }
}