/* =========================================================================
   SCOPO — Hakkımızda · template-parts/hakkimizda-premium.php
   /cnc/ ve /plastic-injection/ ile aynı dil; değişkenler header-premium.css :root'tan gelir.
   ========================================================================= */
.ha{
  --ha-gece: #03070f; --ha-porselen: #f1ece3; --ha-murekkep: #0a1424; --ha-cizgi: rgba(10, 20, 36, .16); --ha-pah: 30px;
  --ha-gen: min(1680px, 100%); --ha-gut: clamp(20px, 3.2vw, 64px);
  position: relative; display: block; overflow: hidden; overflow: clip; background: var(--ha-gece); color: var(--sx-text-strong); font-family: var(--sx-sans);
}
.ha *, .ha *::before, .ha *::after{ box-sizing: border-box; }
body:has(.ha), body:has(.ha) main{ background: #03070f; }
body:has(.ha) #smooth-content::before{ display: none; }
.ha a{ text-decoration: none; }
.ha a:focus-visible, .ha button:focus-visible{ outline: 2px solid var(--sx-brass-light); outline-offset: 3px; }
.ha-kap{ width: var(--ha-gen); margin: 0 auto; padding-inline: var(--ha-gut); }
.ha-bol{ padding-block: clamp(72px, 8vw, 130px); }

/* Ortak */
.ha-etiket{ display: flex; align-items: center; gap: 12px; margin: 0 0 18px; font: 500 11px/1 var(--sx-mono); letter-spacing: .24em; text-transform: uppercase; color: var(--sx-brass-light); }
.ha-etiket span{ display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; box-shadow: 0 0 0 1px rgba(232, 210, 166, .35) inset; letter-spacing: 0; color: var(--sx-brass); }
.ha-etiket-a{ color: #8a6526; } .ha-etiket-a span{ color: #8a6526; box-shadow: 0 0 0 1px rgba(138, 101, 38, .4) inset; }
.ha em{ display: block; font-style: normal; padding-bottom: .08em; background: linear-gradient(100deg, var(--sx-brass-light) 0%, var(--sx-brass) 50%, var(--sx-brass-deep) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ha .ha-baslik{ margin: 0; color: var(--sx-text-strong); text-transform: none; text-wrap: balance; letter-spacing: -.045em !important; }
.ha .ha-buyuk{ font: 700 clamp(48px, 5.4vw, 104px)/.94 var(--sx-display) !important; letter-spacing: -.055em !important; }
.ha .ha-orta{ font: 700 clamp(36px, 4.4vw, 76px)/.98 var(--sx-display) !important; }
.ha .ha-koyu{ color: var(--ha-murekkep); }
.ha .ha-koyu em{ background-image: linear-gradient(100deg, #b98f4e, #8a6526 60%, #6e4b17); }
.ha-lead{ max-width: 540px; margin: 0; font: 400 16px/1.65 var(--sx-sans); color: rgba(240, 243, 248, .72); text-wrap: pretty; }
.ha-lead-koyu{ color: rgba(10, 20, 36, .7); }
.ha-butonlar{ display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.ha-btn{ display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 26px; border: 0; border-radius: 999px; background: linear-gradient(100deg, var(--sx-brass-light), var(--sx-brass)); color: #0a1424 !important; font: 600 15px/1 var(--sx-sans); cursor: pointer; transition: transform .4s var(--sx-ease), box-shadow .4s var(--sx-ease); }
.ha-btn:hover{ transform: translateY(-2px); box-shadow: 0 14px 34px rgba(201, 164, 107, .28); }
.ha-btn small{ font: 500 12px/1 var(--sx-mono); opacity: .7; }
.ha-btn-cizgi{ background: none; color: var(--sx-text-strong) !important; box-shadow: 0 0 0 1px rgba(232, 210, 166, .4) inset; }
.ha-btn-koyu{ background: var(--ha-murekkep); color: #fff !important; }
.ha-oynat{ display: inline-block; width: 0; height: 0; border-style: solid; border-width: 6px 0 6px 10px; border-color: transparent transparent transparent currentColor; }

/* Açılış: dev SCOPO yazısının harflerinde tur videosu oynar; kaydırınca harflerin içine dalınır */
.ha-hero{ position: relative; background: var(--ha-gece); }
.ha-hero-sahne{
  position: relative; display: flex; flex-direction: column; justify-content: space-between; min-height: max(100vh, 720px); height: 100svh;
  padding: calc(var(--sx-bar-h) + var(--sx-top) + 24px) var(--ha-gut) clamp(24px, 3vw, 44px); overflow: hidden;
  background-image: linear-gradient(rgba(232, 210, 166, .04) 1px, transparent 1px), linear-gradient(90deg, rgba(232, 210, 166, .04) 1px, transparent 1px); background-size: 96px 96px; background-position: center -1px;
}
.ha-hero-ust{ position: relative; z-index: 2; margin: 0; }
.ha-kelime{ position: absolute; inset: 0; z-index: 1; }
.ha-kelime video{ position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.ha-kelime canvas{ position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.ha .ha-kelime-yazi{ position: absolute; inset: 0; display: grid; place-items: center; padding-bottom: 6vh; margin: 0; color: transparent; font: 800 22vw/1 var(--sx-display) !important; letter-spacing: -.06em !important; -webkit-text-stroke: 1px rgba(232, 210, 166, .35); pointer-events: none; }
.ha-kelime.is-tuval .ha-kelime-yazi > span:first-child{ visibility: hidden; }
.ha-gizli{ position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* Dalış sonrası oynatıcı çubuğu: video ekranı kaplayınca belirir */
.ha-kontrol{
  position: absolute; left: 50%; bottom: clamp(22px, 4vh, 44px); z-index: 3; display: flex; align-items: center; gap: 10px; width: min(980px, calc(100% - 2 * var(--ha-gut)));
  padding: 10px 12px 10px 10px; border-radius: 999px; background: rgba(5, 12, 24, .78); box-shadow: 0 0 0 1px rgba(232, 210, 166, .35) inset, 0 24px 50px rgba(0, 0, 0, .45); backdrop-filter: blur(12px);
  transform: translate(-50%, 30px); opacity: 0; pointer-events: none; transition: opacity .45s var(--sx-ease), transform .6s var(--sx-ease);
}
.ha-kontrol.is-on{ transform: translate(-50%, 0); opacity: 1; pointer-events: auto; }
.ha-k-btn{ flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 2px; height: 42px; min-width: 42px; padding: 0 10px; border: 0; border-radius: 999px; background: rgba(232, 210, 166, .08); color: #f1ece3; cursor: pointer; transition: background .3s, color .3s; }
.ha-k-btn:hover{ background: rgba(232, 210, 166, .2); }
.ha-k-btn svg{ width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ha-k-btn small{ font: 600 11px/1 var(--sx-mono); }
.ha-k-ana{ width: 48px; height: 48px; padding: 0; background: linear-gradient(100deg, var(--sx-brass-light), var(--sx-brass)); color: #0a1424; }
.ha-k-ana:hover{ background: linear-gradient(100deg, #f3e3c0, var(--sx-brass-light)); }
.ha-k-ana svg{ stroke-width: 2.6; }
.ha-k-dolu{ fill: currentColor; stroke: none; }
.ha-k-bolum{ flex: none; min-width: 128px; padding-left: 6px; color: #f1ece3; font: 600 14px/1 var(--sx-sans); white-space: nowrap; }
.ha-k-cubuk{ position: relative; flex: 1; height: 26px; cursor: pointer; }
.ha-k-cubuk::before{ content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 4px; margin-top: -2px; border-radius: 4px; background: rgba(232, 210, 166, .2); }
.ha-k-cubuk i{ position: absolute; left: 0; top: 50%; height: 4px; margin-top: -2px; width: calc(var(--p, 0) * 100%); border-radius: 4px; background: linear-gradient(90deg, var(--sx-brass), var(--sx-brass-light)); }
.ha-k-cubuk i::after{ content: ""; position: absolute; right: -7px; top: 50%; width: 14px; height: 14px; margin-top: -7px; border-radius: 50%; background: #ffe2a8; box-shadow: 0 0 10px rgba(233, 162, 74, .8); }
.ha-k-cubuk b{ position: absolute; top: 50%; width: 2px; height: 12px; margin: -6px 0 0 -1px; background: rgba(232, 210, 166, .55); }
.ha-k-cubuk:focus-visible{ outline: 2px solid var(--sx-brass-light); outline-offset: 4px; border-radius: 6px; }
.ha-k-zaman{ flex: none; color: var(--sx-brass-light); font: 500 12px/1 var(--sx-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ha-k-ses{ flex: none; display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 16px; border: 0; border-radius: 999px; background: none; box-shadow: 0 0 0 1px rgba(232, 210, 166, .4) inset; color: #f1ece3; font: 600 13px/1 var(--sx-sans); cursor: pointer; }
.ha-k-ses svg{ width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ha-k-ses:hover{ background: rgba(232, 210, 166, .14); }

.ha-hero-alt{ position: relative; z-index: 2; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: clamp(20px, 3vw, 56px); align-items: end; padding-top: 18px; border-top: 1px solid rgba(232, 210, 166, .22); }
.ha-hero-cumle{ margin: 0; color: var(--sx-text-strong); font: 700 clamp(26px, 2.4vw, 42px)/1 var(--sx-display); letter-spacing: -.04em; }
.ha-hero-cumle em{ padding-bottom: 0; }
.ha-tablo{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px 14px; margin: 0; padding: 0; list-style: none; align-self: center; }
.ha-tablo button{ display: flex; align-items: baseline; gap: 10px; width: 100%; padding: 6px 8px; border: 0; background: none; text-align: left; color: rgba(240, 243, 248, .42); font: 500 14px/1.1 var(--sx-sans); cursor: pointer; transition: color .3s, background .3s; }
.ha-tablo button i{ flex: none; font: 500 11px/1 var(--sx-mono); font-style: normal; color: rgba(232, 210, 166, .45); font-variant-numeric: tabular-nums; }
.ha-tablo button:hover{ color: var(--sx-text-strong); }
.ha-tablo button.is-on{ background: rgba(201, 164, 107, .14); color: var(--sx-text-strong); box-shadow: inset 2px 0 0 var(--sx-brass); }
.ha-tablo button.is-on i{ color: var(--sx-brass-light); }
.ha-hero-son{ max-width: 430px; }
.ha-hero-son .ha-lead{ font-size: 14.5px; }
.ha-hero-son .ha-butonlar{ margin-top: 16px; }

/* Rota */
.ha-rota-b{ position: relative; z-index: 2; background: var(--ha-porselen); color: var(--ha-murekkep); border-radius: 40px 40px 0 0; }
.ha-bas{ display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 96px); align-items: end; margin-bottom: clamp(64px, 7vw, 120px); }
.ha-istasyonlar{ position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(40px, 4.4vw, 80px) clamp(20px, 2.4vw, 44px); align-items: start; margin: 0; padding: 0; list-style: none; }
.ha-rota{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 0; }
.ha-rota-iz{ fill: none; stroke: rgba(10, 20, 36, .28); stroke-width: 1.2; stroke-dasharray: 2 6; }
.ha-rota-dolu{ fill: none; stroke: #b98f4e; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 6px rgba(233, 162, 74, .45)); }
.ha-rota-bag{ fill: none; stroke: rgba(10, 20, 36, .28); stroke-width: 1.2; stroke-dasharray: 2 6; transition: stroke .4s; }
.ha-rota-bag.is-on{ stroke: #b98f4e; stroke-width: 4; stroke-dasharray: none; stroke-linecap: round; filter: drop-shadow(0 0 6px rgba(233, 162, 74, .45)); }
.ha-rota-hale{ fill: rgba(233, 162, 74, .22); }
.ha-rota-cephe{ fill: #ffe2a8; stroke: #b98f4e; stroke-width: 2; filter: drop-shadow(0 0 8px rgba(233, 162, 74, .9)); }
.ha-ist{ position: relative; z-index: 1; border: 1px solid var(--ha-murekkep); background: var(--ha-porselen); }
.ha-ist{ cursor: pointer; }
.ha-ist.ha-ist-alt{ margin-top: clamp(50px, 6vw, 110px); }
.ha-ist-cer{ position: relative; padding: 10px; border-bottom: 1px solid var(--ha-murekkep); }
.ha-ist-cer::before, .ha-ist-cer::after{ content: ""; position: absolute; width: 12px; height: 12px; border: 0 solid var(--ha-murekkep); }
.ha-ist-cer::before{ left: 3px; top: 3px; border-width: 1px 0 0 1px; }
.ha-ist-cer::after{ right: 3px; bottom: 3px; border-width: 0 1px 1px 0; }
.ha-ist-v{ position: relative; aspect-ratio: 9 / 14; overflow: hidden; background: #0b1a33; }
.ha-ist-v video{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.15) brightness(.8) sepia(.3) hue-rotate(180deg); transform: scale(1.06); transition: filter 1.2s var(--sx-ease), transform 1.6s var(--sx-ease-out); }
.ha-ist.is-on .ha-ist-v video{ filter: none; transform: none; }
.ha-ist-zaman{ position: absolute; left: 10px; bottom: 10px; display: inline-flex; align-items: center; gap: 7px; padding: 6px 9px; border: 0; background: rgba(5, 12, 24, .85); box-shadow: 0 0 0 1px rgba(232, 210, 166, .4) inset; color: var(--sx-brass-light); font: 500 11px/1 var(--sx-mono); cursor: pointer; font-variant-numeric: tabular-nums; }
.ha-ist-zaman:hover{ background: var(--sx-brass); color: #0a1424; }
.ha-ist-blok{ display: grid; grid-template-columns: auto minmax(0, 1fr); }
.ha-ist-no{ display: flex; flex-direction: column; justify-content: flex-start; gap: 6px; padding: 12px; border-right: 1px solid var(--ha-murekkep); font: 600 15px/1 var(--sx-mono); transition: background .5s, color .5s; }
.ha-ist-no small{ font: 500 9.5px/1 var(--sx-mono); letter-spacing: .06em; color: rgba(10, 20, 36, .55); transition: color .5s; }
.ha-ist.is-on .ha-ist-no{ background: var(--ha-murekkep); color: var(--sx-brass-light); }
.ha-ist.is-on .ha-ist-no small{ color: rgba(232, 210, 166, .7); }
.ha-ist-y{ display: block; padding: 12px; color: #3b4553; font: 400 13.5px/1.45 var(--sx-sans); text-wrap: pretty; }
.ha-ist-y b{ display: block; margin-bottom: 4px; color: var(--ha-murekkep); font: 700 17px/1.2 var(--sx-display); letter-spacing: -.02em; }
.ha-ist-y a{ display: inline-block; margin-top: 8px; color: #8a6526; font: 500 12px/1 var(--sx-mono); text-decoration: underline; text-underline-offset: 3px; }

/* Rotanın sonu: ekip ve tam tur */
.ha-son{ position: relative; z-index: 1; grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 96px); align-items: center; margin-top: clamp(60px, 7vw, 120px); padding: 14px; border: 1px solid var(--ha-murekkep); background: var(--ha-porselen); }
.ha-ekip{ margin: 0; aspect-ratio: 4 / 5; overflow: hidden; background: #0b1a33; }
.ha-ekip img{ display: block; width: 100%; height: 100%; object-fit: cover; transform: scale(1.08); transition: transform 1.8s var(--sx-ease-out); }
.ha-son.is-on .ha-ekip img{ transform: none; }
.ha-son-y{ padding: clamp(12px, 3vw, 48px) clamp(12px, 3vw, 48px) clamp(12px, 3vw, 48px) 0; }
.ha-son-y .ha-lead{ margin: 22px 0 28px; }

/* Hikaye */
.ha-hikaye-ic{ display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 96px); align-items: end; margin-bottom: clamp(48px, 5vw, 84px); }
.ha-yazi{ color: rgba(240, 243, 248, .78); font: 400 clamp(16px, 1.2vw, 18px)/1.7 var(--sx-sans); text-wrap: pretty; }
.ha-yazi p{ margin: 0 0 1em; color: inherit; font: inherit; } .ha-yazi p:last-child{ margin: 0; }
.ha-yol{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; border: 1px solid rgba(232, 210, 166, .3); }
.ha-yol li{ position: relative; padding: 24px 22px 26px; border-right: 1px solid rgba(232, 210, 166, .3); color: rgba(240, 243, 248, .68); font: 400 15px/1.55 var(--sx-sans); }
.ha-yol li:last-child{ border-right: 0; }
.ha-yol li span{ display: grid; place-items: center; width: 26px; height: 26px; margin-bottom: 18px; background: var(--sx-brass); color: #0a1424; font: 700 12px/1 var(--sx-mono); }
.ha-yol li b{ display: block; margin-bottom: 6px; color: var(--sx-text-strong); font: 700 22px/1.15 var(--sx-display); letter-spacing: -.02em; }
.ha-yol li:not(:last-child)::after{ content: ""; position: absolute; right: -7px; top: 34px; width: 13px; height: 13px; border-top: 1px solid var(--sx-brass); border-right: 1px solid var(--sx-brass); transform: rotate(45deg); background: var(--ha-gece); }

/* Kapanış */
.ha-cta{ text-align: center; background: radial-gradient(50% 110% at 50% 110%, rgba(201, 164, 107, .2), transparent 72%); }
.ha-cta-ic{ display: flex; flex-direction: column; align-items: center; }
.ha-cta .ha-lead{ margin: 18px 0 0; }

/* Tam tur oynatıcı */
.ha-oynatici{ position: fixed; inset: 0; width: fit-content; height: fit-content; margin: auto; padding: 0; border: 0; background: none; max-width: none; max-height: none; overflow: visible; }
.ha-oynatici::backdrop{ background: rgba(3, 7, 15, .9); backdrop-filter: blur(6px); }
.ha-oynatici-ic{ position: relative; width: min(92vw, calc(92vh * .5625)); aspect-ratio: 9 / 16; }
.ha-oynatici video{ display: block; width: 100%; height: 100%; background: #000; box-shadow: 0 0 0 1px rgba(232, 210, 166, .45); }
.ha-kapat{ position: absolute; top: 0; right: -56px; width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--sx-brass); color: #0a1424; font: 400 26px/1 var(--sx-sans); cursor: pointer; }

@media (max-width: 999.98px){
  .ha{ --ha-pah: 20px; }
  .ha-bas, .ha-hikaye-ic, .ha-son{ grid-template-columns: 1fr; }
  .ha-hero-sahne{ height: auto; min-height: 100svh; }
  .ha-hero-sahne{ gap: 46vw; }
  .ha-hero-alt{ grid-template-columns: 1fr; }
  .ha-tablo{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ha-rota-b{ border-radius: 24px 24px 0 0; }
  .ha-istasyonlar{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ha-ist-y{ font-size: 13px; }
  .ha-yol{ grid-template-columns: 1fr; }
  .ha-yol li{ border-right: 0; border-bottom: 1px solid rgba(232, 210, 166, .3); }
  .ha-yol li:last-child{ border-bottom: 0; }
  .ha-yol li::after{ display: none; }
  .ha-son-y{ padding: 8px 4px 12px; }
  .ha-kapat{ right: 0; top: -54px; }
}
@media (max-width: 560px){
  .ha-ist-blok{ grid-template-columns: 1fr; }
  .ha-ist-no{ flex-direction: row; align-items: baseline; border-right: 0; border-bottom: 1px solid var(--ha-murekkep); padding: 8px 10px; }
}
@media (prefers-reduced-motion: reduce){
  .ha *, .ha *::before, .ha *::after{ animation: none !important; transition: none !important; }
}