/* Moto Garage Hero — tüm seçiciler .mg-hero altında, tema ile çakışmaz */
.mg-hero{
  --mg-bg:#090909; --mg-accent:#c9a96e; --mg-text:#f0ece4; --mg-muted:#8a8a8a;
  --mg-display:"Barlow Condensed","Archivo Narrow",Impact,sans-serif;
  --mg-body:"Inter","Helvetica Neue",Arial,sans-serif;
  --mg-mono:"IBM Plex Mono","SFMono-Regular",Consolas,monospace;
  --mg-gutter:clamp(20px,5vw,72px);
  position:relative;background:var(--mg-bg);color:var(--mg-text);font-family:var(--mg-body);line-height:1.55;
  margin:0;padding:0;
  display:block;width:100%;min-width:100%;box-sizing:border-box;
}
/* Elementor / sayfa oluşturucu sarmalayıcıları genişlik vermezse zorla */
.elementor-widget-shortcode:has(.mg-hero),.elementor-shortcode:has(.mg-hero),.elementor-widget-container:has(.mg-hero),.wd-html-block:has(.mg-hero){width:100%;min-width:100%;flex:1 1 100%}
/* Elementor flex satırında yanındaki (0 genişlikli) widget ile arasına konan sütun boşluğu hero'yu sağa kaydırır; ilk çizimde de sıfırla */
.e-con-inner:has(> .elementor-widget-shortcode .mg-hero),.e-con:has(> .elementor-widget-shortcode .mg-hero){column-gap:0}
.elementor-widget-shortcode:has(.mg-hero){margin-left:0;margin-right:0}
/* tam ekran genişliği: dar konteyner içinde bile kenardan kenara */
.mg-hero.mg-bleed{width:100vw;min-width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw)}
.mg-hero *{box-sizing:border-box}
.mg-hero h1,.mg-hero h2{margin:0;font-family:var(--mg-display);font-weight:800;text-transform:uppercase;line-height:.92;letter-spacing:-.01em;color:var(--mg-text)}
.mg-hero p{margin:0}
.mg-hero .mg-display em{font-style:normal;color:var(--mg-accent)}
.mg-hero .mg-mono{font-family:var(--mg-mono);font-size:.76rem;letter-spacing:.06em;text-transform:uppercase}

.mg-hero .mg-stage{position:sticky;top:var(--mg-offset,0px);height:calc(var(--mg-stage,100vh) - var(--mg-offset,0px));overflow:hidden;background:var(--mg-bg)}
.mg-hero .mg-seq{position:absolute;inset:0;width:100%;height:100%;display:block}
.mg-hero .mg-poster{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.mg-hero .mg-veil{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(9,9,9,.6) 0%,rgba(9,9,9,0) 28%,rgba(9,9,9,0) 68%,rgba(9,9,9,.8) 100%)}
.mg-hero .mg-veil-l{background:linear-gradient(90deg,rgba(9,9,9,.78) 0%,rgba(9,9,9,0) 56%);opacity:0}
.mg-hero .mg-veil-r{background:linear-gradient(270deg,rgba(9,9,9,.78) 0%,rgba(9,9,9,0) 56%);opacity:0}
.mg-hero .mg-veil-c{background:radial-gradient(ellipse 62% 58% at 50% 50%,rgba(9,9,9,.84) 0%,rgba(9,9,9,.5) 55%,rgba(9,9,9,.15) 100%);opacity:0}
.mg-hero .mg-loader{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);z-index:5;width:120px;height:2px;background:#222;overflow:hidden;transition:opacity .5s ease}
.mg-hero .mg-loader i{display:block;height:100%;width:0;background:var(--mg-accent);transition:width .2s ease}

.mg-hero .mg-copy{position:absolute;z-index:3;max-width:760px;will-change:transform,opacity,filter;opacity:0;pointer-events:none}
.mg-hero .mg-hero-copy{left:var(--mg-gutter);top:15vh;pointer-events:auto}
.mg-hero .mg-eyebrow{color:var(--mg-accent);margin-bottom:20px}
.mg-hero h1{font-size:clamp(3.6rem,9vw,8.6rem)}
.mg-hero .mg-hero-copy p{max-width:480px;margin:24px 0 0;color:#bdb6aa;font-size:1.05rem}
.mg-hero .mg-cap{max-width:540px;bottom:15vh}
.mg-hero .mg-left{left:var(--mg-gutter)}
.mg-hero .mg-right{right:var(--mg-gutter);text-align:right}
.mg-hero .mg-k{color:var(--mg-accent);margin-bottom:12px}
.mg-hero .mg-cap h2{font-size:clamp(2.8rem,6.4vw,6rem)}
.mg-hero .mg-cap p{margin-top:14px;max-width:440px;font-size:1.02rem;color:#d3ccc0}
.mg-hero .mg-right p{margin-left:auto}
.mg-hero .mg-p{font-family:var(--mg-mono);font-size:.8rem;margin-top:14px;color:var(--mg-text);letter-spacing:.04em}
.mg-hero .mg-center{left:50%;top:50%;transform:translate(-50%,-50%);text-align:center;max-width:960px;width:calc(100% - 2*var(--mg-gutter))}
.mg-hero .mg-center h2{font-size:clamp(2.6rem,7vw,6.6rem)}
.mg-hero .mg-center p{margin:18px auto 0;max-width:560px;color:#bdb6aa}
.mg-hero .mg-actions{display:flex;gap:12px;justify-content:center;margin-top:30px;flex-wrap:wrap}
.mg-hero .mg-btn{display:inline-flex;align-items:center;gap:10px;background:var(--mg-accent);color:#0b0a08;text-decoration:none;font-family:var(--mg-display);font-weight:700;
  font-size:1rem;letter-spacing:.06em;text-transform:uppercase;padding:12px 20px;border-radius:999px;border:0;transition:transform .2s ease,box-shadow .3s ease}
.mg-hero .mg-btn:hover{transform:translateY(-1px);box-shadow:0 0 0 6px rgba(201,169,110,.15);color:#0b0a08}
.mg-hero .mg-btn.mg-ghost{background:transparent;color:var(--mg-text);border:1px solid #3a3a3a}

.mg-hero .mg-hint{position:absolute;left:50%;bottom:40px;transform:translateX(-50%);z-index:3;color:var(--mg-muted);white-space:nowrap}
.mg-hero .mg-hint-web,.mg-hero .mg-hint-mobile{display:flex;flex-direction:column;align-items:center;gap:10px}
.mg-hero .mg-hint-mobile{display:none}
.mg-hero .mg-hint svg{display:block;color:var(--mg-accent);overflow:visible}
.mg-hero .mg-wheel{animation:mg-wheel 1.6s ease-in-out infinite}
@keyframes mg-wheel{0%{transform:translateY(0);opacity:1}60%{transform:translateY(10px);opacity:0}61%{transform:translateY(0);opacity:0}100%{transform:translateY(0);opacity:1}}
.mg-hero .mg-hand path:last-child{animation:mg-swipe 1.8s ease-in-out infinite}
@keyframes mg-swipe{0%,100%{transform:translateY(5px)}50%{transform:translateY(-5px)}}

@media (max-width:759px){
  .mg-hero .mg-hero-copy{top:7vh;right:var(--mg-gutter)}
  .mg-hero .mg-eyebrow{margin-bottom:10px;font-size:.64rem}
  .mg-hero h1{font-size:clamp(2.4rem,11vw,3.6rem)}
  .mg-hero .mg-hero-copy p{font-size:.88rem;margin-top:12px;max-width:none;line-height:1.45}
  .mg-hero .mg-veil{background:linear-gradient(180deg,rgba(9,9,9,.85) 0%,rgba(9,9,9,.35) 30%,rgba(9,9,9,0) 48%,rgba(9,9,9,0) 62%,rgba(9,9,9,.85) 100%)}
  .mg-hero .mg-cap,.mg-hero .mg-left,.mg-hero .mg-right{left:var(--mg-gutter);right:var(--mg-gutter);bottom:11vh;text-align:left;max-width:none}
  .mg-hero .mg-right p{margin-left:0}
  .mg-hero .mg-cap h2{font-size:clamp(2.3rem,11vw,3.6rem)}
  .mg-hero .mg-veil-l,.mg-hero .mg-veil-r{display:none}
  .mg-hero .mg-hint{bottom:26px}
  .mg-hero .mg-hint-web{display:none}
  .mg-hero .mg-hint-mobile{display:flex}
}
@media (hover:none) and (pointer:coarse){
  .mg-hero .mg-hint-web{display:none}
  .mg-hero .mg-hint-mobile{display:flex}
}
@media (prefers-reduced-motion:reduce){
  .mg-hero .mg-wheel,.mg-hero .mg-hand path{animation:none;transform:none}
}

/* kutu modu: sayfa içi banner (stage < 100vh) */
.mg-hero.mg-boxed .mg-hero-copy{top:9%}
.mg-hero.mg-boxed h1{font-size:clamp(2.4rem,5.6vw,5.2rem)}
.mg-hero.mg-boxed .mg-hero-copy p{font-size:.95rem;margin-top:16px;max-width:400px}
.mg-hero.mg-boxed .mg-eyebrow{margin-bottom:12px}
.mg-hero.mg-boxed .mg-cap{bottom:10%;max-width:440px}
.mg-hero.mg-boxed .mg-cap h2{font-size:clamp(1.9rem,4.2vw,3.8rem)}
.mg-hero.mg-boxed .mg-cap p{font-size:.92rem;max-width:360px}
.mg-hero.mg-boxed .mg-center h2{font-size:clamp(1.9rem,4.6vw,4.2rem)}
.mg-hero.mg-boxed .mg-hint{bottom:18px}
.mg-hero.mg-boxed .mg-hint svg{transform:scale(.85)}
@media (max-width:759px){
  .mg-hero.mg-boxed h1{font-size:clamp(2rem,9vw,3rem)}
  .mg-hero.mg-boxed .mg-cap h2{font-size:clamp(1.5rem,7vw,2.4rem)}
}