/* ============================================================
   Techify Boost — SİNEMATİK açılış sahnesi (Ads & Meta)
   rAF zaman çizelgesiyle koreografi · CSS yalnızca sahne/stil
   ============================================================ */

.cine-stage {
  position: relative;
  width: 100%;
  min-height: min(92vh, 800px);
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 50% 0%, #0c3326 0%, #061a13 46%, #04120d 100%);
  color: #eafff5;
  display: flex;
  align-items: center;
  justify-content: center;
  isolation: isolate;
}
.cine-stage * { box-sizing: border-box; }

/* ince hareketli ızgara + grain */
.cine-bgcanvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
.cine-vignette {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(120% 80% at 50% 40%, transparent 55%, rgba(2,10,7,0.65) 100%);
}
.cine-scanline {
  position: absolute; left: 0; right: 0; height: 140px; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(95,191,71,0.06), transparent);
  opacity: 0; mix-blend-mode: screen;
}

.cine-inner {
  position: relative; z-index: 3;
  width: 100%; max-width: 1180px;
  padding: 40px 32px;
  margin: 0 auto;
}
/* act katmanları: act1 (simülasyon) → act2 (başlık) çapraz geçiş */
.cine-body { position: relative; margin-top: 26px; min-height: 420px; }
.cine-act { position: absolute; left: 0; right: 0; top: 0; }
.cine-act2 { pointer-events: none; }
@media (max-width: 720px) { .cine-body { min-height: 470px; } }

/* üst etiket / HUD */
.cine-hud {
  display: flex; align-items: center; gap: 12px;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 12px; letter-spacing: 3px; text-transform: uppercase;
  color: #7ce0b0; opacity: 0;
}
.cine-hud .hud-dot { width: 8px; height: 8px; border-radius: 50%; background: #34d399; box-shadow: 0 0 0 0 rgba(52,211,153,0.6); animation: cineLive 1.6s infinite; }
@keyframes cineLive { 0%{box-shadow:0 0 0 0 rgba(52,211,153,0.55);} 70%{box-shadow:0 0 0 9px rgba(52,211,153,0);} 100%{box-shadow:0 0 0 0 rgba(52,211,153,0);} }
.cine-hud .hud-sep { flex: 1; height: 1px; background: linear-gradient(90deg, rgba(124,224,176,0.4), transparent); }
.cine-hud .hud-r { letter-spacing: 1px; color: #5ea98a; }

/* ---- ADS: arama kutusu ---- */
.cine-search {
  margin: 26px 0 6px; max-width: 560px;
  display: flex; align-items: center; gap: 12px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(124,224,176,0.22);
  border-radius: 40px; padding: 14px 22px;
  opacity: 0; transform: translateY(10px);
  backdrop-filter: blur(4px);
}
.cine-search .cs-ic { width: 20px; height: 20px; color: #9bdcc0; flex-shrink: 0; }
.cine-search .cs-q { font-size: 18px; color: #eafff5; white-space: nowrap; }
.cine-search .cs-caret { display: inline-block; width: 2px; height: 20px; background: #34d399; margin-left: 1px; vertical-align: -3px; animation: cineBlink 1s steps(1) infinite; }
@keyframes cineBlink { 50% { opacity: 0; } }

/* ---- ADS: açık artırma kolonları ---- */
.cine-auction { margin-top: 30px; }
.cine-auction-head {
  display: flex; align-items: baseline; gap: 12px; margin-bottom: 16px;
  font-family: ui-monospace, monospace; font-size: 12.5px; letter-spacing: 1px; color: #9bdcc0; opacity: 0;
}
.cine-formula {
  font-family: ui-monospace, monospace; font-size: 12.5px; color: #ffd479;
  opacity: 0; transform: translateY(6px);
}
.cine-formula b { color: #fff; }
.cine-bars { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; align-items: end; height: 240px; }
.cine-bidder { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 10px; position: relative; }
.cine-bar-area { position: relative; width: 100%; flex: 1; display: flex; align-items: flex-end; justify-content: center; }
.cine-bar {
  width: 74%; height: 0; border-radius: 9px 9px 0 0;
  background: linear-gradient(180deg, rgba(148,163,184,0.9), rgba(100,116,139,0.7));
  position: relative; transition: none;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06);
}
.cine-bidder.me .cine-bar { background: linear-gradient(180deg, #34d399, #16a34a); box-shadow: 0 0 0 0 rgba(52,211,153,0); }
.cine-bidder.me.won .cine-bar { box-shadow: 0 0 40px rgba(52,211,153,0.5); }
.cine-bar .cb-val {
  position: absolute; top: -24px; left: 50%; transform: translateX(-50%);
  font-family: ui-monospace, monospace; font-size: 13px; font-weight: 700; color: #eafff5; white-space: nowrap;
}
.cine-qs {
  font-family: ui-monospace, monospace; font-size: 11px; letter-spacing: .5px;
  padding: 3px 9px; border-radius: 20px; background: rgba(255,255,255,0.08);
  color: #cdeede; opacity: 0; transform: scale(.6); border: 1px solid rgba(255,255,255,0.12);
}
.cine-bidder.me .cine-qs { background: rgba(52,211,153,0.18); color: #aef5d2; border-color: rgba(52,211,153,0.4); }
.cine-name { font-size: 12px; color: #9fb4ab; letter-spacing: .3px; }
.cine-bidder.me .cine-name { color: #eafff5; font-weight: 600; }
.cine-rankbadge {
  position: absolute; top: -16px; left: 50%; transform: translateX(-50%) scale(0);
  font-family: ui-monospace, monospace; font-weight: 800; font-size: 12px; letter-spacing: 1px;
  background: linear-gradient(135deg, #ffd479, #f5a623); color: #3a2600;
  padding: 5px 12px; border-radius: 20px; white-space: nowrap; box-shadow: 0 8px 22px rgba(245,166,35,0.4);
}

/* ---- META: kreatif kartlar ---- */
.cine-cards { position: relative; height: 260px; margin-top: 18px; }
.cine-card {
  position: absolute; left: 50%; top: 50%;
  width: 132px; height: 176px; border-radius: 16px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  color: #fff; box-shadow: 0 18px 50px rgba(0,0,0,0.45);
  border: 1px solid rgba(255,255,255,0.18);
  opacity: 0; transform: translate(-50%,-50%);
}
.cine-card .cc-ic { width: 38px; height: 38px; }
.cine-card .cc-name { font-size: 12.5px; font-weight: 600; }
.cine-card .cc-roas {
  font-family: ui-monospace, monospace; font-size: 11px; padding: 3px 9px; border-radius: 20px;
  background: rgba(0,0,0,0.28); border: 1px solid rgba(255,255,255,0.22);
}
.cine-card.c1 { background: linear-gradient(150deg,#16a34a,#0c6b3f); }
.cine-card.c2 { background: linear-gradient(150deg,#2563eb,#5b3df0); }
.cine-card.c3 { background: linear-gradient(150deg,#f59e0b,#ea7a1c); }
.cine-card.c4 { background: linear-gradient(150deg,#ec4899,#d6326a); }
.cine-card.win { z-index: 5; }
.cine-crown {
  position: absolute; top: -16px; left: 50%; transform: translateX(-50%) scale(0);
  color: #ffd479; filter: drop-shadow(0 4px 10px rgba(245,166,35,0.5));
}
.cine-crown svg { width: 30px; height: 30px; }
.cine-readout {
  position: absolute; right: 0; top: 50%; transform: translateY(-50%);
  text-align: right; opacity: 0;
}
.cine-readout .cr-l { font-family: ui-monospace,monospace; font-size: 11px; letter-spacing: 2px; color: #7ce0b0; text-transform: uppercase; }
.cine-readout .cr-v { font-family: var(--font-display); font-weight: 800; font-size: 64px; line-height: 1; color: #fff; }
.cine-readout .cr-v .x { color: #34d399; }
.cine-readout .cr-s { font-size: 12px; color: #9fb4ab; margin-top: 4px; }
@media (max-width: 720px) { .cine-readout { position: static; transform: none; text-align: left; margin-top: 18px; } .cine-readout .cr-v { font-size: 46px; } }

/* ---- ortak: başlık çözülmesi ---- */
.cine-reveal { margin-top: 34px; max-width: 720px; }
.cine-reveal .cr-badge {
  display: inline-flex; align-items: center; gap: 8px; opacity: 0; transform: translateY(8px);
  font-size: 13px; font-weight: 600; color: #aef5d2;
  background: rgba(52,211,153,0.12); border: 1px solid rgba(52,211,153,0.3);
  border-radius: 30px; padding: 7px 15px; margin-bottom: 18px;
}
.cine-reveal .cr-badge img { width: 18px; height: 18px; }
.cine-reveal h1 {
  font-family: var(--font-display); font-weight: 800; letter-spacing: -1px;
  font-size: clamp(38px, 6vw, 72px); line-height: 1.02; margin: 0;
  color: #fff;
}
.cine-reveal h1 .w { display: inline-block; opacity: 0; transform: translateY(110%); }
.cine-reveal .cr-sub { margin-top: 18px; font-size: 17px; line-height: 1.7; color: #bfe6d5; max-width: 620px; opacity: 0; transform: translateY(10px); }
.cine-reveal .cr-cta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 26px; opacity: 0; transform: translateY(10px); }
.cine-btn {
  display: inline-flex; align-items: center; gap: 9px; padding: 13px 22px; border-radius: 12px;
  font-size: 14.5px; font-weight: 600; text-decoration: none; transition: transform .18s, box-shadow .18s, background .18s;
}
.cine-btn .lucide, .cine-btn img { width: 18px; height: 18px; }
.cine-btn.solid { background: #34d399; color: #06281b; box-shadow: 0 10px 30px rgba(52,211,153,0.3); }
.cine-btn.solid:hover { transform: translateY(-2px); background: #4ade80; }
.cine-btn.ghost { background: rgba(255,255,255,0.06); color: #eafff5; border: 1px solid rgba(255,255,255,0.18); }
.cine-btn.ghost:hover { background: rgba(255,255,255,0.12); transform: translateY(-2px); }

/* replay + scroll cue */
.cine-replay {
  position: absolute; right: 22px; bottom: 20px; z-index: 4;
  display: inline-flex; align-items: center; gap: 7px;
  font-family: ui-monospace, monospace; font-size: 11px; letter-spacing: 1px;
  color: #7ce0b0; background: rgba(255,255,255,0.05); border: 1px solid rgba(124,224,176,0.25);
  border-radius: 30px; padding: 7px 14px; cursor: pointer; opacity: 0; transition: opacity .4s, background .2s;
}
.cine-replay:hover { background: rgba(255,255,255,0.12); }
.cine-replay .lucide { width: 14px; height: 14px; }
.cine-scrollcue {
  position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 4;
  color: #6fbf9b; opacity: 0; animation: cineBob 1.8s ease-in-out infinite;
}
.cine-scrollcue .lucide { width: 22px; height: 22px; }
@keyframes cineBob { 0%,100%{transform:translateX(-50%) translateY(0);} 50%{transform:translateX(-50%) translateY(7px);} }

@media (max-width: 720px) {
  .cine-bars { height: 190px; gap: 9px; }
  .cine-card { width: 104px; height: 142px; }
  .cine-inner { padding: 30px 20px; }
  .cine-stage { min-height: 88vh; }
}

/* reduced motion: her şey son hâlinde dursun (JS de algılar) */
@media (prefers-reduced-motion: reduce) {
  .cine-scrollcue, .cine-hud .hud-dot { animation: none; }
}