/* Özyalçın İnşaat — ana sayfa hero'su (yalnızca ana sayfada yüklenir; komut dosyası: hero.js). */
.hx{isolation:isolate}
.hx .hero-in{z-index:3}
.hx img{display:block;width:100%;height:100%;object-fit:cover}

/* Tam ekran; ışık huzmesi çizer, cam paneller kat kat yükselir, ışıltı katmanı */
.hx1{min-height:min(100vh,980px);min-height:min(100svh,980px)}
.hx1-slides{position:absolute;inset:0;z-index:0;overflow:hidden}
.hx1-s{position:absolute;inset:0;opacity:0;transition:opacity 1.3s ease}
.hx1-s.on{opacity:1}
/* Sahneyi hero.js ekran kartında (WebGL) çizer: plan kâğıdında görselin kendi çizgileri, cam panellerle renklenme, ışıltı katmanı.
   WebGL yoksa ya da hareket azaltma açıksa görseller aşağıdaki sade geçişle gösterilir. */
.hx1-s{background:#0b1418}
.hx1-m{position:absolute;inset:0}
.hx1-m img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:60% 35%}
.hx1-s.on .hx1-m{animation:hx-kb 10s ease-out both}
.hx1-s:nth-child(even).on .hx1-m{animation-name:hx-kb2}
.hx1-gl,.hx1-fx{position:absolute;inset:0;z-index:0;width:100%;height:100%;pointer-events:none;display:none}
.hx1.gl .hx1-gl,.hx1.gl .hx1-fx{display:block}
.hx1.gl .hx1-slides{visibility:hidden}
.hx1-ctl{display:flex;align-items:center;gap:18px}
.hx1-count{display:flex;align-items:baseline;gap:8px;color:#fff;font-family:var(--f-display);overflow:hidden}
.hx1-count b{display:inline-block;font:600 2.75rem/1 var(--f-display);letter-spacing:-.02em}
.hx1-count i{font:500 .875rem/1 var(--f-sans);font-style:normal;color:rgba(255,255,255,.6);letter-spacing:.08em}
.hx1-cap.swap .hx1-nm,.hx1-cap.swap .hx1-ds,.hx1-cap.swap .hx1-no,.hx1-count.swap b{animation:hx-up .7s var(--ease) both}
.hx1-cap.swap .hx1-ds{animation-delay:.07s}
@keyframes hx-up{from{transform:translateY(110%);opacity:0}}
.hx1-cap>span:nth-child(2){overflow:hidden}
@keyframes hx-kb{from{transform:scale(1.14) translate3d(1.5%,1%,0)}to{transform:none}}
@keyframes hx-kb2{from{transform:scale(1.02)}to{transform:scale(1.13) translate3d(-1.5%,-1%,0)}}
.hx1-shade{position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(14,15,20,.9) 0%,rgba(14,15,20,.66) 36%,rgba(14,15,20,.06) 72%),linear-gradient(0deg,rgba(14,15,20,.82),transparent 36%)}
.hx1-bar{position:relative;z-index:3;display:flex;justify-content:space-between;align-items:flex-end;gap:20px;padding-bottom:22px}
.hx1-cap{display:flex;align-items:center;gap:14px;padding:12px 18px 12px 14px;border-radius:var(--r-sm);color:#fff}
.hx1-no{font:600 1.75rem/1 var(--f-display);color:var(--accent)}
.hx1-nm{display:block;font:600 1.0625rem/1.2 var(--f-display)}
.hx1-ds{display:block;margin-top:3px;font-size:.8125rem;color:rgba(255,255,255,.78)}
.hx1-cap svg{width:18px;height:18px;margin-left:6px}
.hx1-dots{display:flex;gap:8px}
.hx1-dots button{position:relative;width:56px;height:44px;cursor:pointer}
.hx1-dots button::before,.hx1-dots button::after{content:"";position:absolute;left:0;right:0;top:50%;height:3px;border-radius:2px;background:rgba(255,255,255,.32)}
.hx1-dots button::after{background:var(--accent);transform:scaleX(0);transform-origin:left}
.hx1-dots button.on::after{animation:hx-fill 10s linear forwards}
.hx1-dots.still button.on::after,.hx1.paused .hx1-dots button.on::after{animation:none;transform:none}
/* Duraklat düğmesi: slayt geçişini ve proje düğmesindeki dönen ışığı durdurur */
.hx1-pause{flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.3);background:rgba(20,21,27,.5);color:#fff;cursor:pointer;transition:border-color .3s,background .3s}
.hx1-pause:hover{border-color:#fff;background:rgba(20,21,27,.75)}
.hx1-pause svg{width:18px;height:18px;grid-area:1/1}
.hx1-pause .i-pause,.hx1-pause[aria-pressed=true] svg:last-child{display:block}
.hx1-pause svg:last-child,.hx1-pause[aria-pressed=true] .i-pause{display:none}
.hx1.paused .hx1-cap::before,.hx1.paused .hx1-cap::after{animation-play-state:paused}
html:not(.js) .hx1-ctl{display:none}
@keyframes hx-fill{to{transform:scaleX(1)}}
.hx1 .hero-foot{border-top-color:rgba(255,255,255,.16)}
@media (max-width:1000px){
  .hx1{min-height:min(100vh,860px);min-height:min(100svh,860px)}
  .hx1-shade{background:linear-gradient(180deg,rgba(14,15,20,.86) 0%,rgba(14,15,20,.62) 52%,rgba(14,15,20,.2) 74%,rgba(14,15,20,.85) 100%)}
  .hx1 .hero-in{flex:1;align-content:start}
  .hx1-bar{flex-direction:column;align-items:stretch;gap:6px;padding-bottom:10px}
  .hx1-dots{flex:1;min-width:0}.hx1-dots button{flex:1;width:auto;min-width:0}
  .hx1-count{flex:none;white-space:nowrap}
  .hx1-count b{font-size:2rem}
}
@media (max-width:760px){
  .hx1-dots button.on::after{animation-duration:6s}
  /* Telefonda düğmeler: iki çağrı yan yana (alt alta iki tam genişlik düğme görseli kapatıyordu), proje düğmesi daha alçak; hepsi en az 48px dokunma yüksekliğinde */
  .hx1 .acts{flex-wrap:nowrap;gap:10px}
  .hx1 .acts>.btn{flex:1 1 0;min-width:0;min-height:48px;padding:0 12px;font-size:.9375rem;white-space:nowrap}
  .hx1-ctl{gap:12px}
  .hx1 .acts>.btn-ghost{background:rgba(20,21,27,.5);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
  .hx1-cap{gap:12px;min-height:56px;padding:8px 14px 8px 12px}
  .hx1-no{font-size:1.375rem}
  .hx1-nm{font-size:1rem}
  .hx1-ds{margin-top:1px;font-size:.75rem}
  .hx1-cap svg{margin-left:auto}
  .hx1-cap>span:nth-child(2){flex:1;min-width:0}
}

/* Proje düğmesi: petrol zemin, çevresinde sürekli dönen ışıklı çizgi */
@property --hx-a{syntax:"<angle>";inherits:false;initial-value:0deg}
.hx1-cap{position:relative;border:0;background:var(--petrol);-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:0 18px 40px -22px rgba(0,0,0,.8);transition:background .3s}
.hx1-cap:hover{background:var(--petrol-2)}
.hx1-cap::before,.hx1-cap::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;pointer-events:none;
  background:conic-gradient(from var(--hx-a),rgba(143,179,189,.28) 0deg,rgba(143,179,189,.28) 200deg,#8fb3bd 250deg,#fff 285deg,#ea8051 320deg,rgba(143,179,189,.28) 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);
  animation:hx-spin 4.5s linear infinite}
.hx1-cap::after{inset:-3px;padding:4px;filter:blur(7px);opacity:.7}   /* çizginin ışıması */
@keyframes hx-spin{to{--hx-a:360deg}}
.hx1-cap>*{position:relative}
@media (prefers-reduced-motion:reduce){.hx1-s.on .hx1-m,.hx1-cap::before,.hx1-cap::after{animation:none}}
@media (max-width:340px){.hx1 .acts>.btn{padding:0 8px;gap:6px;font-size:.875rem}}