/* ============================================================================
   GECE MOBİLYA — V6.2 PRESERVATION POLISH
   Purpose: preserve the approved V6.2 hero composition while improving only
   image quality/transition behavior. No section below the hero is affected.
   ========================================================================== */

/* Two-layer crossfade without changing V6.2 geometry, palette or hierarchy. */
.hero--refined .hero-media img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:0;
  transition:opacity .68s cubic-bezier(.22,.61,.36,1);
}
.hero--refined .hero-media img.is-front{opacity:1;}

/* Keep the original first slide framing. The alternate real-project slides
   get their own restrained crop decisions rather than one global center crop. */
.hero--refined .hero-media img[data-slide="0"]{object-position:56% 50%;}
.hero--refined .hero-media img[data-slide="1"]{object-position:61% 50%;}
.hero--refined .hero-media img[data-slide="2"]{object-position:66% 50%;}

/* Preserve the V6.2 dark-left / image-right art direction. A very small tone
   correction keeps the photograph rich without creating a new visual system. */
.hero--refined .hero-media:before{
  background:
    linear-gradient(180deg,rgba(8,10,9,.30) 0%,rgba(8,10,9,.08) 15%,rgba(8,10,9,0) 28%),
    linear-gradient(90deg,#080a09 0%,rgba(8,10,9,.95) 13%,rgba(8,10,9,.63) 37%,rgba(8,10,9,.17) 69%,rgba(8,10,9,.04) 100%),
    linear-gradient(0deg,rgba(8,10,9,.30),transparent 64%);
}

/* Tiny interaction polish only; preserve original branded button treatment. */
.hero--refined .actions .btn span{transition:transform .2s ease;}
.hero--refined .actions .btn:hover span{transform:translateX(3px);}
.hero--refined .round{transition:border-color .2s ease,color .2s ease,background-color .2s ease;}
.hero--refined .round:hover{background:rgba(198,155,93,.07);}

@media(prefers-reduced-motion:reduce){
  .hero--refined .hero-media img{transition:none;}
}

/* ============================================================================
   SOL8 — TABLET / MOBILE ART DIRECTION
   Desktop (1181px+) is intentionally untouched.
   Below 1181px the hero stops pretending to be the desktop composition:
   photography gets its own canvas, copy sits on a clean dark field, controls
   remain compact, and the commercial proof points stay readable.
   ========================================================================== */

@media (max-width:1180px){
  .hero--refined{
    --hero-media-h:clamp(400px,51vw,560px);
    min-height:0;
    padding-top:var(--header-h);
    background:#080a09;
  }
  .hero--refined .hero-media{
    position:relative;
    inset:auto;
    width:100%;
    height:var(--hero-media-h);
    overflow:hidden;
    background:#111;
  }
  .hero--refined .hero-media:before{
    background:linear-gradient(180deg,rgba(8,10,9,.04) 0%,rgba(8,10,9,.03) 72%,rgba(8,10,9,.28) 100%);
  }
  .hero--refined .hero-media img{
    object-position:center center;
    filter:saturate(.98) contrast(1.02) brightness(1.01);
  }
  .hero--refined .hero-inner{
    min-height:0;
    display:block;
  }
  .hero--refined .hero-copy{
    display:flex;
    flex-direction:column;
    max-width:860px;
    padding:42px 0 48px;
  }
  .hero--refined .hero-controls{
    order:-2;
    position:static;
    inset:auto;
    align-self:flex-end;
    width:max-content;
    margin:0 0 22px;
    padding:5px;
    background:rgba(255,255,255,.025);
    border-color:rgba(255,255,255,.16);
    -webkit-backdrop-filter:none;
    backdrop-filter:none;
  }
  .hero--refined .hero-controls>span{display:inline;}
  .hero--refined .hero-line{display:block;width:38px;}
  .hero--refined .hero h1,
  .hero--refined h1{
    max-width:10.2ch;
    font-size:clamp(52px,7vw,72px);
    line-height:.93;
  }
  .hero--refined .copy{
    max-width:610px;
    margin:22px 0 26px;
    font-size:16px;
    line-height:1.68;
  }
  .hero--refined .actions{gap:10px;}
  .hero--refined .hero-stats{
    margin-top:34px;
  }
  .hero--refined .hero-stat{
    min-height:74px;
    padding-top:15px;
  }
}

@media (max-width:780px){
  .hero--refined{
    --hero-media-h:clamp(300px,76vw,410px);
    min-height:0;
  }
  .hero--refined .hero-copy{
    max-width:none;
    padding:28px 0 36px;
  }
  .hero--refined .hero-controls{
    align-self:flex-end;
    margin-bottom:18px;
  }
  .hero--refined .hero-controls .round{
    width:38px;
    height:38px;
  }
  .hero--refined h1{
    max-width:9.6ch;
    font-size:clamp(46px,12.4vw,58px);
    line-height:.92;
    letter-spacing:-.05em;
  }
  .hero--refined .eyebrow{
    margin-bottom:15px;
  }
  .hero--refined .copy{
    max-width:38ch;
    margin:19px 0 22px;
    font-size:15px;
    line-height:1.62;
  }
  .hero--refined .actions{
    display:grid;
    grid-template-columns:1fr;
    gap:8px;
  }
  .hero--refined .actions .btn{
    min-height:46px;
    width:100%;
  }
  .hero--refined .actions .btn:not(.solid){
    min-height:36px;
    width:max-content;
    padding:0;
    border:0;
    justify-content:flex-start;
    color:rgba(255,255,255,.82);
  }
  .hero--refined .actions .btn:not(.solid):hover{
    background:transparent;
    color:var(--gold-2);
    transform:none;
  }
  .hero--refined .hero-stats{
    grid-template-columns:1fr 1fr;
    margin-top:26px;
  }
  .hero--refined .hero-stat{
    min-height:66px;
    padding:13px 10px 11px 0;
  }
  .hero--refined .hero-stat b{font-size:22px;}
  .hero--refined .hero-stat span{font-size:10px;letter-spacing:.075em;}
}

@media (max-width:520px){
  .hero--refined{
    --hero-media-h:clamp(292px,78vw,352px);
  }
  .hero--refined .hero-copy{
    padding:24px 0 32px;
  }
  .hero--refined .hero-controls{
    margin-bottom:16px;
    padding:4px;
  }
  .hero--refined .hero-line{width:28px;}
  .hero--refined h1{
    font-size:clamp(43px,12.4vw,52px);
    max-width:9.4ch;
  }
  .hero--refined .copy{
    font-size:14.5px;
    line-height:1.58;
  }
  .hero--refined .hero-stat b{font-size:20px;}
}