/* ============================================================
   ATST — BLUE LIQUID GLASS THEME (overlay, loads after style.css)
   Mavi tonlar + hareketli arkaplan + glassmorphism + liquid glass + maximalism
   Sections:
   01 Tokens (blue palette override)
   02 Animated liquid background
   03 Glassmorphism base (navbar, dropdown, cards, buttons)
   04 Liquid glass sheen / specular highlight
   05 Maximalist accents (glow text, noise, borders, marquee, footer, forms)
   06 Responsive tweaks
============================================================ */

/* ─────────────────────── 01 TOKENS ─────────────────────── */
:root {
  /* surfaces — deep blue night */
  --black:   #030814;
  --ink:     #060d24;
  --ink-2:   #0a1533;
  --ink-3:   #101e42;
  --line:    rgba(120,170,255,.16);
  --line-2:  rgba(120,170,255,.34);

  /* accent — calm electric blue, no neon cyan */
  --gold:        #4f8fe0;
  --gold-bright: #8ec8ff;
  --gold-dim:    rgba(79,143,224,.14);
  --gold-glow:   rgba(79,143,224,.28);

  /* velvet accent -> soft indigo, used sparingly */
  --velvet:        #3d3486;
  --velvet-bright: #7c7fd4;

  /* text */
  --paper:     #eaf1ff;
  --paper-dim: #b7c8ec;
  --mute:      #8fa2ce;
  --mute-2:    #5c6d94;

  /* new glass tokens */
  --glass-bg:      rgba(20, 40, 90, .34);
  --glass-bg-soft: rgba(20, 40, 90, .18);
  --glass-border:  rgba(160, 200, 255, .22);
  --glass-hi:      rgba(255, 255, 255, .4);
  --glass-blur:    16px;
  --cyan:          #5fb8dd;
}

/* ─────────────────────── 02 ANIMATED LIQUID BACKGROUND ─────────────────────── */
.liquid-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background: radial-gradient(ellipse at top, #071335 0%, #030814 60%);
}
.liquid-bg span {
  position: absolute;
  border-radius: 50%;
  filter: blur(95px);
  opacity: .26;
  will-change: transform;
  mix-blend-mode: screen;
}
.liquid-bg span:nth-child(1) {
  width: 46vw; height: 46vw; top: -10%; left: -8%;
  background: radial-gradient(circle, #2f6dff 0%, transparent 70%);
  animation: blobFloat1 34s ease-in-out infinite;
}
.liquid-bg span:nth-child(2) {
  width: 38vw; height: 38vw; top: 30%; right: -12%;
  background: radial-gradient(circle, #4fb8dd 0%, transparent 70%);
  animation: blobFloat2 40s ease-in-out infinite;
}
.liquid-bg span:nth-child(3) {
  width: 42vw; height: 42vw; bottom: -14%; left: 12%;
  background: radial-gradient(circle, #4f3fa0 0%, transparent 70%);
  animation: blobFloat3 38s ease-in-out infinite;
}
.liquid-bg span:nth-child(4) {
  width: 30vw; height: 30vw; bottom: 8%; right: 18%;
  background: radial-gradient(circle, #1451ff 0%, transparent 70%);
  animation: blobFloat1 30s ease-in-out infinite reverse;
}
.liquid-bg::after {
  content: "";
  position: absolute; inset: 0;
  background-image:
    radial-gradient(rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 26px 26px;
  opacity: .2;
}

/* stage spotlights — two soft light cones swaying from above, like theatre
   follow-spots scanning the stage, layered into the same moving backdrop */
.liquid-bg span.stage-light {
  border-radius: 0;
  filter: blur(7px);
  mix-blend-mode: screen;
  clip-path: polygon(48% 0%, 52% 0%, 100% 100%, 0% 100%);
  top: -8%;
  width: 24vw;
  height: 76vh;
  opacity: .32;
  transform-origin: 50% 0%;
}
.liquid-bg span.light-a {
  left: 6%;
  background: linear-gradient(180deg, rgba(255,210,140,.32) 0%, rgba(255,210,140,.08) 45%, transparent 78%);
  animation: spotSway1 9s ease-in-out infinite;
}
.liquid-bg span.light-b {
  right: 6%;
  background: linear-gradient(180deg, rgba(142,200,255,.3) 0%, rgba(142,200,255,.07) 45%, transparent 78%);
  animation: spotSway2 11s ease-in-out infinite;
}
@keyframes spotSway1 {
  0%, 100% { transform: rotate(-9deg); }
  50%      { transform: rotate(7deg); }
}
@keyframes spotSway2 {
  0%, 100% { transform: rotate(10deg); }
  50%      { transform: rotate(-6deg); }
}
@media (max-width: 640px) {
  .liquid-bg span.stage-light { width: 42vw; opacity: .32; }
}
@media (prefers-reduced-motion: reduce) {
  .liquid-bg span.stage-light { animation: none !important; }
}

/* footlights — a faint warm row of stage-edge bulbs glowing along the very
   bottom of the viewport, pulsing gently like old theatre footlights */
.footlights {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  height: 6px;
  z-index: 0;
  pointer-events: none;
  background-image: repeating-radial-gradient(circle at 0 100%, rgba(255,196,120,.85) 0 1.6px, transparent 2.4px 42px);
  background-size: 42px 6px;
  opacity: .28;
  animation: footlightPulse 4.5s ease-in-out infinite;
}
@keyframes footlightPulse {
  0%, 100% { opacity: .18; }
  50%      { opacity: .36; }
}
@media (prefers-reduced-motion: reduce) {
  .footlights { animation: none !important; opacity: .35; }
}
@keyframes blobFloat1 {
  0%,100% { transform: translate(0,0) scale(1); }
  33%     { transform: translate(6vw, 8vh) scale(1.12); }
  66%     { transform: translate(-4vw, 4vh) scale(.92); }
}
@keyframes blobFloat2 {
  0%,100% { transform: translate(0,0) scale(1); }
  50%     { transform: translate(-8vw, -6vh) scale(1.18); }
}
@keyframes blobFloat3 {
  0%,100% { transform: translate(0,0) scale(1); }
  40%     { transform: translate(5vw, -7vh) scale(1.08); }
  75%     { transform: translate(-6vw, 3vh) scale(.94); }
}
@media (prefers-reduced-motion: reduce) {
  .liquid-bg span { animation: none !important; }
}

body { background: transparent; position: relative; z-index: 1; }
.section--ink, .section--ink2, .section--black,
.section, section, footer.site-footer, header, main {
  background: transparent !important;
}

/* ─────────────────────── 03 GLASSMORPHISM BASE ─────────────────────── */
.navbar {
  background: var(--glass-bg-soft) !important;
  backdrop-filter: blur(var(--glass-blur)) saturate(112%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(112%);
  border-bottom: 1px solid var(--glass-border) !important;
  box-shadow: 0 8px 32px rgba(5,12,40,.35);
}
.navbar.scrolled {
  background: var(--glass-bg) !important;
  box-shadow: 0 12px 40px rgba(5,12,40,.5);
}
.lang-dropdown {
  background: var(--glass-bg) !important;
  backdrop-filter: blur(20px) saturate(112%);
  -webkit-backdrop-filter: blur(20px) saturate(112%);
  border: 1px solid var(--glass-border) !important;
  box-shadow: 0 20px 50px rgba(5,12,40,.5), inset 0 1px 0 var(--glass-hi);
}

.pillar-card, .card, .project-card, .team-card, .stat-card, .info-card,
.contact-card, .contact-info-card, .content-card, .film-card, .theatre-card {
  background: var(--glass-bg-soft) !important;
  backdrop-filter: blur(var(--glass-blur)) saturate(108%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(108%);
  border: 1px solid var(--glass-border) !important;
  box-shadow: 0 8px 32px rgba(3,8,20,.45), inset 0 1px 0 rgba(255,255,255,.08);
  position: relative;
  overflow: hidden;
}
/* Team grids can hold 20-30+ cards at once — a backdrop-filter blur plus an
   infinite animated sheen on every one of them is expensive to composite and
   was a real contributor to sluggishness/jank on team.html. Give team-card a
   much cheaper flat-glass look (no blur, no animation) while every other,
   less numerous card keeps the full liquid-glass treatment. */
.team-card {
  background: var(--glass-bg) !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.pillar-card:hover, .card:hover, .project-card:hover, .team-card:hover,
.contact-info-card:hover, .film-card:hover, .theatre-card:hover {
  border-color: rgba(160,200,255,.55) !important;
  box-shadow: 0 12px 30px rgba(20,40,90,.35), inset 0 1px 0 rgba(255,255,255,.1);
  transform: translateY(-4px);
}

.btn-primary {
  background: linear-gradient(135deg, var(--gold) 0%, var(--gold-bright) 100%) !important;
  color: #04102b !important;
  border: 1px solid rgba(255,255,255,.28);
  box-shadow: 0 6px 18px var(--gold-glow);
}
.btn-primary:hover {
  box-shadow: 0 8px 22px rgba(142,200,255,.35);
  filter: brightness(1.05);
}
.btn-ghost {
  background: var(--glass-bg-soft) !important;
  backdrop-filter: blur(14px) saturate(108%);
  -webkit-backdrop-filter: blur(14px) saturate(108%);
  border: 1px solid var(--glass-border) !important;
  color: var(--paper) !important;
}
.btn-ghost:hover {
  border-color: var(--cyan) !important;
  color: var(--cyan) !important;
  background: rgba(95,184,221,.08) !important;
}

.hero-reel {
  border: 1px solid var(--glass-border) !important;
  box-shadow: 0 20px 50px rgba(3,8,20,.5), inset 0 1px 0 rgba(255,255,255,.08);
}
.hero-reel-tag, .reel-rec-tag {
  background: var(--glass-bg) !important;
  backdrop-filter: blur(14px) saturate(108%);
  -webkit-backdrop-filter: blur(14px) saturate(108%);
  border: 1px solid var(--glass-border) !important;
}

/* ─────────────────────── 04 LIQUID GLASS SHEEN ───────────────────────
   Kaldırıldı: kartların üzerinden geçen animasyonlu parlama şeridi çok
   yapay/aşırı duruyordu; sade cam görünümü daha zarif. */

.liquid-glass-orb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.6), rgba(120,180,255,.05) 60%, transparent 70%);
  filter: blur(2px);
  mix-blend-mode: screen;
}

/* ─────────────────────── 05 ACCENTS ─────────────────────── */
.hero-title .accent, .htitle .accent, .section-header .accent {
  background: linear-gradient(90deg, var(--cyan), var(--gold-bright));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
  filter: drop-shadow(0 0 4px rgba(79,143,224,.16));
}
.eyebrow {
  color: var(--gold-bright) !important;
}
.eyebrow::before, .eyebrow::after {
  background: var(--gold-bright) !important;
}

.marquee-strip {
  background: var(--glass-bg-soft) !important;
  backdrop-filter: blur(16px) saturate(108%);
  -webkit-backdrop-filter: blur(16px) saturate(108%);
  border-top: 1px solid var(--glass-border);
  border-bottom: 1px solid var(--glass-border);
}
.marquee-strip::before { background: linear-gradient(to right, var(--ink), transparent) !important; }
.marquee-strip::after { background: linear-gradient(to left, var(--ink), transparent) !important; }
.marquee-item { color: var(--gold-bright) !important; }

.site-footer {
  background: var(--glass-bg-soft) !important;
  backdrop-filter: blur(var(--glass-blur)) saturate(108%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(108%);
  border-top: 1px solid var(--glass-border) !important;
}
.footer-socials a {
  background: var(--glass-bg) !important;
  border: 1px solid var(--glass-border) !important;
  backdrop-filter: blur(10px);
}
.footer-socials a:hover {
  background: linear-gradient(135deg, var(--gold), var(--gold-bright)) !important;
  border-color: transparent !important;
}
.footer-newsletter {
  background: var(--glass-bg) !important;
  backdrop-filter: blur(14px) saturate(108%);
  -webkit-backdrop-filter: blur(14px) saturate(108%);
  border: 1px solid var(--glass-border) !important;
}
.footer-newsletter button {
  background: linear-gradient(135deg, var(--gold), var(--gold-bright)) !important;
  color: #04102b !important;
}

input, textarea, select {
  background: var(--glass-bg-soft) !important;
  backdrop-filter: blur(10px);
  border: 1px solid var(--glass-border) !important;
  color: var(--paper) !important;
}
input:focus, textarea:focus, select:focus {
  border-color: var(--cyan) !important;
  box-shadow: 0 0 0 3px rgba(95,184,221,.16);
}

::selection { background: var(--cyan); color: #04102b; }

/* scrollbar */
::-webkit-scrollbar { width: 11px; }
::-webkit-scrollbar-track { background: var(--black); }
::-webkit-scrollbar-thumb {
  background: var(--gold);
  border-radius: 10px;
  border: 2px solid var(--black);
}

/* ─────────────────────── 06 RESPONSIVE TWEAKS ─────────────────────── */
@media (max-width: 640px) {
  .liquid-bg span { filter: blur(46px); }
}

/* ─────────────────────── 07 HERO — LET THE LIQUID BG SHOW THROUGH ─────────────────────── */
.hero, .page-hero, .page-loader {
  background: transparent !important;
}
.hero-bg {
  background:
    radial-gradient(ellipse 70% 60% at 25% 30%, rgba(79,143,224,.14), transparent 60%),
    radial-gradient(ellipse 50% 50% at 80% 70%, rgba(95,184,221,.1), transparent 60%),
    linear-gradient(165deg, rgba(10,21,51,.4) 0%, rgba(3,8,20,.2) 55%, transparent 100%) !important;
}
.page-hero::before {
  background:
    radial-gradient(ellipse 60% 80% at 50% 0%, rgba(79,143,224,.14), transparent 65%) !important;
}

/* soft, static glow inside the hero — no spin, no rainbow conic sweep */
.hero::after, .page-hero::after {
  content: "";
  position: absolute;
  inset: -20%;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 60% 50% at 50% 30%, rgba(79,143,224,.14), transparent 70%);
  filter: blur(80px);
  opacity: .5;
  mix-blend-mode: screen;
}
.hero-content, .hero-reel, .page-hero .container { position: relative; z-index: 1; }

/* ─────────────────────── 08 SCROLL-SPINNING BG ICONS ─────────────────────── */
.spin-icon-wrap {
  position: fixed;
  pointer-events: none;
  z-index: 0;
  will-change: transform;
}
.spin-icon-wrap svg {
  display: block;
  width: 100%;
  height: 100%;
  transform-origin: 50% 50%;
  transition: transform .05s linear;
}
#micWrap {
  top: 6%;
  right: -8%;
  width: 46vw;
  max-width: 560px;
  aspect-ratio: 1;
  opacity: .18;
  filter: drop-shadow(0 0 18px rgba(79,143,224,.18));
  animation: iconFloat1 30s ease-in-out infinite;
}
#reelWrap {
  bottom: 2%;
  left: -10%;
  width: 32vw;
  max-width: 400px;
  aspect-ratio: 1;
  opacity: .16;
  filter: drop-shadow(0 0 16px rgba(124,127,212,.16));
  animation: iconFloat2 36s ease-in-out infinite;
}
@keyframes iconFloat1 {
  0%,100% { margin-top: 0; }
  50%     { margin-top: -3vh; }
}
@keyframes iconFloat2 {
  0%,100% { margin-bottom: 0; }
  50%     { margin-bottom: -3vh; }
}
@media (max-width: 780px) {
  #micWrap { width: 70vw; top: 4%; right: -20%; opacity: .14; }
  #reelWrap { width: 54vw; left: -20%; opacity: .12; }
}
@media (prefers-reduced-motion: reduce) {
  #micWrap, #reelWrap { animation: none !important; }
  .spin-icon-wrap svg { transition: none !important; }
}

/* ─────────────────────── 09 THEATRE MASKS + REC BADGE ─────────────────────── */
#masksWrap {
  top: 58%;
  left: -6%;
  width: 26vw;
  max-width: 320px;
  aspect-ratio: 200/120;
  opacity: .16;
  filter: drop-shadow(0 0 14px rgba(124,127,212,.14));
  animation: iconFloat1 33s ease-in-out infinite;
}
@media (max-width: 780px) {
  #masksWrap { width: 46vw; left: -14%; opacity: .1; }
}

.rec-badge {
  position: fixed;
  left: 18px;
  bottom: 18px;
  z-index: 40;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 12px 7px 10px;
  font-family: var(--f-mono);
  font-size: .68rem;
  letter-spacing: .12em;
  color: var(--paper-dim);
  background: var(--glass-bg);
  backdrop-filter: blur(14px) saturate(108%);
  -webkit-backdrop-filter: blur(14px) saturate(108%);
  border: 1px solid var(--glass-border);
  border-radius: 999px;
  box-shadow: 0 10px 30px rgba(3,8,20,.45), inset 0 1px 0 rgba(255,255,255,.08);
  pointer-events: none;
}
.rec-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ff4d6d;
  box-shadow: 0 0 6px rgba(255,77,109,.6);
  animation: recPulse 1.6s ease-in-out infinite;
}
@keyframes recPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .35; transform: scale(.75); }
}
@media (max-width: 640px) {
  .rec-badge { left: 12px; bottom: 12px; padding: 6px 10px 6px 8px; font-size: .62rem; }
}
@media (prefers-reduced-motion: reduce) {
  .rec-dot { animation: none !important; }
}