/* Ana sayfa hero: 2. slayt R10 ECO 360 (r10-hero.js). R327'nin kurallarini (r327-hero.css) devralir, yalniz farklari burada. 2026-10-14 */
/* masaustu: sahne R327 ile ayni 1920x818; R10 karesi makineyle ayni yere ve boya oturur (arka.webp ile birebir) */
.mega-hero .mh-360--r10 .mh-360-sahne{background-image:url(/images/r10-360/arka.webp)}
/* palet alt kenari ve makine boyu R327 ile birebir (olculdu: R327 palet alti 631.7, boy 330.9 sahne birimi) */
@media (min-width:701px){.mega-hero .mh-360.mh-360--r10 canvas,.mega-hero .mh-360.mh-360--r10 .mh-parcalar{left:57.8646%;top:34.7433%;width:28.0573%;height:43.8998%}}

/* slayt gecisi: gizli olan yana kayarak solar; R327'nin kendi transform'una (parca yakinlasmasi) karismasin diye 'translate' */
.mega-hero .mh-360.mh-slayt-gizli{opacity:0;visibility:hidden;translate:6% 0;pointer-events:none}
.mega-hero .mh-360.mh-slayt-gizli.mh-slayt-sol{translate:-6% 0}
.mega-hero.mh-slayt-gecis .mh-360{transition:opacity .55s ease,translate .55s cubic-bezier(.2,.7,.2,1),visibility 0s linear .55s,transform .6s cubic-bezier(.2,.7,.2,1)}
.mega-hero.mh-slayt-gecis .mh-360:not(.mh-slayt-gizli){transition:opacity .55s ease,translate .55s cubic-bezier(.2,.7,.2,1),visibility 0s,transform .6s cubic-bezier(.2,.7,.2,1)}

/* oklar ve noktalar */
.mh-slayt{position:absolute;inset:0;z-index:3;pointer-events:none}
.mh-slayt-ok{position:absolute;top:var(--ok-y,50%);width:44px;height:44px;margin:-22px 0 0 -22px;padding:0;border:0;border-radius:50%;cursor:pointer;pointer-events:auto;
  display:grid;place-items:center;background:#ffffffd9;color:#111;box-shadow:0 4px 14px #0000002e;transition:background .2s ease,transform .2s ease,opacity .3s ease;-webkit-tap-highlight-color:transparent}
.mh-slayt-ok svg{width:20px;height:20px}
.mh-slayt-ok:hover{background:#fff;transform:scale(1.06)}
.mh-slayt-ok:focus-visible{outline:3px solid #ffe600;outline-offset:2px}
.mh-slayt-ok--geri{left:var(--ok-sol,8px)}
.mh-slayt-ok--ileri{left:var(--ok-sag,calc(100% - 8px))}
.mh-slayt-noktalar{position:absolute;left:var(--nokta-x,50%);top:var(--nokta-y,90%);transform:translateX(-50%);display:flex;gap:8px;pointer-events:auto}
.mh-slayt-nokta{width:9px;height:9px;padding:0;border:0;border-radius:999px;background:#ffffff8c;box-shadow:0 1px 3px #0000004d;cursor:pointer;transition:width .3s ease,background .3s ease}
.mh-slayt-nokta span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.mh-slayt-nokta.secili{width:26px;background:#ffe600}
.mh-slayt-nokta:focus-visible{outline:2px solid #fff;outline-offset:2px}
/* R327'de parcaya yakinken oklar sakin dursun */
.mega-hero.parca-yakin .mh-slayt-ok,.mega-hero.parca-yakin .mh-slayt-noktalar{opacity:0;pointer-events:none}

/* Yedek Parcalar | Ozellikler secimi (r10-hero.js) */
.mh-mod{position:absolute;left:var(--mod-x,50%);top:var(--mod-y,8px);transform:translateX(-50%);display:flex;gap:2px;padding:3px;border-radius:999px;background:#111111cc;box-shadow:0 4px 14px #0003;pointer-events:auto;transition:opacity .3s ease}
.mh-mod button{border:0;border-radius:999px;padding:.45rem .9rem;background:transparent;color:#fff;font:700 .78rem/1 system-ui,sans-serif;cursor:pointer;white-space:nowrap}
.mh-mod button[aria-pressed=true]{background:#ffe600;color:#111}
.mh-mod button:focus-visible{outline:2px solid #fff;outline-offset:2px}
.mega-hero.parca-yakin .mh-mod,.mega-hero .mh-360.parca-yakin~.mh-slayt .mh-mod{opacity:0;pointer-events:none}
/* odaklanan nokta/ok hero'yu yana kaydirmasin (overflow:hidden programla kaydirilabiliyor) */
.mega-hero.has-360{overflow:clip}

@media (max-width:700px){
  .mh-mod button{padding:.38rem .7rem;font-size:.72rem}
  .mega-hero .mh-360.mh-360--r10{position:absolute;left:0;right:0;width:auto;aspect-ratio:auto;background:url(/images/r10-360/km/000.webp) center/cover no-repeat}
  .mh-slayt-ok{width:36px;height:36px;margin:-18px 0 0 -18px}
  .mh-slayt-ok svg{width:17px;height:17px}
  .mh-slayt-noktalar{top:calc(var(--nokta-y,90%) - 4px)}
}
@media (prefers-reduced-motion:reduce){.mega-hero.mh-slayt-gecis .mh-360{transition:none}}

/* Mobil (<=700px): 360 kutusunun ustune/altina serit acilir; Yedek Parcalar|Ozellikler secimi ustte,
   Surukle ipucu + oklar altta kalir, makine ve noktalarin ustune binmez. 2026-10-14 */
@media (max-width:700px){
  .mega-hero .mh-360,.mega-hero .mh-360.mh-360--r10{aspect-ratio:auto;padding:52px 0 52px;background-position:0 52px;background-size:100% calc(100% - 104px)}
  .mega-hero .mh-360:not(.mh-360--r10)::before{content:"";display:block;padding-top:66.6667%}
  .mega-hero.has-360 .mh-360>canvas,.mega-hero.has-360 .mh-360>.mh-parcalar{top:52px;height:calc(100% - 104px)}
  .mega-hero .mh-360-ipucu{bottom:12px}
  .mh-slayt-ok{top:calc(var(--nokta-y,90%) - 36px)}
}