/* =====================================================================
   HAKKIMIZDA — SEKO "Who we are" akışının Lumen uyarlaması
   Açılış (kayan olgu kutuları) → ürün mozaiği → kart bölümleri →
   Türkiye haritası (iğneler düşer) → kapanış bandı (ağ çizimi).
   Giriş animasyonları: [data-an] + hakkimizda.js (IntersectionObserver).
   ===================================================================== */

/* ---------- Kaydırınca belirme ----------
   Gizleme yalnızca html.hk-an varken: betik çalışmazsa içerik görünür kalır. */
.hk-an [data-an]{opacity:0;transition:opacity .8s cubic-bezier(.19,1,.22,1),transform 1s cubic-bezier(.19,1,.22,1);
  transition-delay:var(--an-g,0ms);will-change:opacity,transform}
.hk-an [data-an="fade-up"]{transform:translateY(38px)}
.hk-an [data-an="fade-down"]{transform:translateY(-38px)}
.hk-an [data-an="fade-left"]{transform:translateX(46px)}
.hk-an [data-an="fade-right"]{transform:translateX(-46px)}
.hk-an [data-an="fade-up-left"]{transform:translate(30px,30px)}
.hk-an [data-an="zoom-in"]{transform:scale(.9)}
.hk-an [data-an="flip-down"]{transform:perspective(900px) rotateX(-70deg);transform-origin:top center}
.hk-an [data-an].an-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .hk-an [data-an]{opacity:1;transform:none;transition:none}
}

.hk-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- 1 · AÇILIŞ ---------- */
.hk-hero{position:relative;overflow:hidden;color:#fff;padding:196px 0 clamp(70px,8vw,110px);
  background:linear-gradient(165deg,#0a2540 0%,#0c3470 58%,#0b56a8 100%)}
.hk-hero::before{content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(60% 70% at 85% 30%,rgba(55,224,184,.14),transparent 70%),
             radial-gradient(40% 50% at 10% 90%,rgba(11,92,255,.25),transparent 70%)}
.hk-hero-in{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(30px,5vw,80px);align-items:center}
.hk-hero .kick{color:#37e0b8}
.hk-hero h1{font-size:clamp(40px,5.2vw,76px);margin:14px 0 28px;color:#fff}
.hk-hero-p{color:rgba(255,255,255,.78);font-size:16px;line-height:1.75;max-width:56ch}
.hk-hero-p p{color:inherit}
.hk-hero-p p+p{margin-top:16px}
.hk-hero-p b,.hk-hero-p strong{color:#fff;font-weight:600}

/* kayan olgu kutuları: sütunlar yatayda sürekli akar, kenarlar silikleşir */
.hk-olgu{position:relative;height:660px;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent)}
.hk-olgu-serit{display:flex;width:max-content;height:100%;align-items:center;
  animation:hk-kay var(--sure,40s) linear infinite}
.hk-olgu:hover .hk-olgu-serit{animation-play-state:paused}
@keyframes hk-kay{to{transform:translateX(-50%)}}
.hk-sutun{display:flex;flex-direction:column;gap:12px;margin-right:12px}
.hk-sutun:nth-child(even){transform:translateY(-44px)}
.hk-kutu{width:176px;height:176px;border-radius:16px;padding:20px 16px 18px;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;gap:6px;
  background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.1);backdrop-filter:blur(6px);
  transition:background .35s,border-color .35s,transform .35s}
.hk-kutu:hover{background:rgba(255,255,255,.1);border-color:rgba(55,224,184,.45);transform:translateY(-3px)}
.hk-kutu svg{width:40px;height:40px;fill:none;stroke:#37e0b8;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round;
  margin-bottom:6px;opacity:.95}
.hk-kutu b{font-size:30px;font-weight:300;letter-spacing:-.03em;line-height:1}
.hk-kutu span{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.62);line-height:1.5}
.hk-kutu span.tek{font-family:var(--ff);font-size:14px;letter-spacing:-.01em;text-transform:none;color:#fff;font-weight:400;line-height:1.3}

/* ---------- 2 · ÜRÜN MOZAİĞİ ---------- */
.hk-mozaik-sec{background:var(--bg2);padding:clamp(70px,9vw,120px) 0}
.hk-mozaik-in{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(30px,6vw,96px);align-items:center}
.hk-mozaik{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(3,minmax(150px,1fr));gap:12px;
  aspect-ratio:1/1.02}
.hk-m{position:relative;border-radius:16px;overflow:hidden;
  background:radial-gradient(120% 90% at 30% 20%,#fff 0%,#eaf0f7 60%,#dfe8f2 100%);
  border:1px solid var(--line);box-shadow:0 18px 40px -26px rgba(10,37,64,.35)}
.hk-m1{grid-column:1;grid-row:1}
.hk-m2{grid-column:2;grid-row:1}
.hk-m3{grid-column:3;grid-row:1/3}
.hk-m4{grid-column:1/3;grid-row:2/4;background:radial-gradient(110% 90% at 30% 25%,#fff 0%,#e3ecf6 55%,#cfdcec 100%)}
.hk-m5{grid-column:3;grid-row:3}
.hk-mg{position:absolute;inset:0;display:block;opacity:0;visibility:hidden;
  transition:opacity 1.25s ease,visibility 0s linear 1.25s}
.hk-mg.on{opacity:1;visibility:visible;transition:opacity 1.25s ease .5s,visibility 0s}
.hk-mg img{position:absolute;inset:12% 12% 22%;width:76%;height:66%;object-fit:contain;
  filter:drop-shadow(0 16px 18px rgba(10,37,64,.18));transform:scale(.96);transition:transform 6s ease}
.hk-mg.on img{transform:scale(1.03)}
.hk-m4 .hk-mg img{inset:10% 14% 18%;width:72%;height:72%}
.hk-mg span{position:absolute;left:14px;right:14px;bottom:12px;font-family:var(--mono);font-size:9.5px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hk-mozaik-txt h2{font-size:clamp(34px,4vw,56px);font-weight:300;letter-spacing:-.03em;line-height:1.05;margin:12px 0 18px}
.hk-mozaik-txt h2 b{font-weight:600}
.hk-lead{font-size:18px;color:var(--ink);font-weight:400;margin-bottom:14px}
.hk-p{color:var(--ink2);font-size:15.5px;line-height:1.75}
.hk-p p+p{margin-top:12px}
.hk-ok{display:inline-flex;align-items:center;gap:10px;margin-top:26px;font-weight:500;color:var(--pri)}
.hk-ok svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .3s}
.hk-ok:hover svg{transform:translateX(5px)}

/* ---------- Kart bölümleri ---------- */
.hk-sec{padding:clamp(64px,8vw,110px) 0}
.hk-sec.alt{background:var(--bg2)}
.hk-h2{font-size:clamp(32px,3.6vw,50px);font-weight:300;letter-spacing:-.03em;line-height:1.05;margin-bottom:34px}
.hk-h2 b{font-weight:600}
.hk-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:16px}
.hk-kart{position:relative;background:var(--card);border:1px solid var(--line);border-radius:18px;padding:26px 24px;
  transition:border-color .3s,box-shadow .3s,translate .3s}
.hk-kart:hover{border-color:rgba(11,92,255,.28);box-shadow:var(--sh);translate:0 -3px}
.hk-kart h3{font-size:19px;font-weight:500;letter-spacing:-.015em;margin:10px 0 8px}
.hk-kart p{font-size:13.5px;color:var(--ink2);line-height:1.65}
.hk-no{font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--pri)}
.hk-yil{position:absolute;right:22px;top:22px;font-size:28px;font-weight:300;letter-spacing:-.03em;color:var(--ink3)}
.hk-marka .hk-kart h3{font-size:24px;font-weight:400;margin-top:0}
.hk-marka .hk-kart h3 a:hover{color:var(--pri)}
.hk-marka .hk-no{display:block;margin-top:16px;color:var(--ink3)}
.hk-deger .hk-kart h3{margin-top:0}
.hk-tel{display:inline-block;margin-top:12px;font-family:var(--mono);font-size:11px;letter-spacing:.08em;color:var(--ink2)}
.hk-tel:hover{color:var(--pri)}

/* ---------- 5 · HARİTA ---------- */
.hk-harita-sec{background:#fff}
.hk-harita-bas{text-align:center;max-width:760px;margin:0 auto 10px}
.hk-harita-bas .hk-h2{margin:12px 0 14px}
.hk-harita-bas .hk-lead{color:var(--ink2);font-size:16.5px}
.hk-harita{position:relative;width:min(1100px,100%);margin:10px auto 46px}
.hk-harita canvas{display:block;width:100%}
.hk-pinler{position:absolute;inset:0}
.hk-pin{position:absolute;width:0;height:0;border:0;background:none;padding:0;cursor:pointer;font:inherit;color:inherit}
.hk-pin i{position:absolute;left:-15px;top:-40px;width:30px;height:38px;
  background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 38'%3E%3Cpath d='M15 37S2 23.5 2 14.5a13 13 0 0 1 26 0C28 23.5 15 37 15 37z' fill='%230a2540'/%3E%3Ccircle cx='15' cy='14.5' r='5' fill='%2337e0b8'/%3E%3C/svg%3E");
  filter:drop-shadow(0 6px 6px rgba(10,37,64,.3));transform-origin:50% 100%}
.hk-pin.hq i{left:-19px;top:-50px;width:38px;height:48px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 38'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%230b5cff'/%3E%3Cstop offset='1' stop-color='%2300b3c9'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M15 37S2 23.5 2 14.5a13 13 0 0 1 26 0C28 23.5 15 37 15 37z' fill='url(%23g)'/%3E%3Ccircle cx='15' cy='14.5' r='5' fill='%23fff'/%3E%3C/svg%3E")}
/* düşme: harita görününce sırayla, görünümden çıkınca geri toplanır (SEKO gibi) */
.hk-an .hk-pin i{opacity:0;transform:translateY(-70px)}
.hk-an .hk-harita.pin-in .hk-pin i{animation:hk-dus .75s cubic-bezier(.3,1.5,.5,1) var(--g,0ms) forwards}
@keyframes hk-dus{0%{opacity:0;transform:translateY(-70px)}60%{opacity:1}100%{opacity:1;transform:none}}
.hk-pin span{position:absolute;left:50%;bottom:48px;transform:translate(-50%,6px);white-space:nowrap;
  background:var(--acc);color:#fff;font-size:12.5px;font-weight:500;padding:7px 12px 8px;border-radius:10px;
  opacity:0;pointer-events:none;transition:.25s;box-shadow:0 10px 24px -10px rgba(10,37,64,.6);text-align:center}
.hk-pin.hq span{bottom:58px}
.hk-pin span small{display:block;font-family:var(--mono);font-size:8.5px;letter-spacing:.16em;text-transform:uppercase;
  color:#37e0b8;margin-top:2px;font-weight:400}
.hk-pin:hover span,.hk-pin:focus-visible span,.hk-pin.act span{opacity:1;transform:translate(-50%,0)}
.hk-pin:hover,.hk-pin.act{z-index:3}
.hk-ofis .hk-kart.act{border-color:var(--pri);box-shadow:var(--sh)}

/* ---------- 7 · KAPANIŞ BANDI ---------- */
/* bant alt bilgiye yapışsın (footer'ın genel üst boşluğu bu sayfada yok) */
body:has(.hk-bant) footer{margin-top:0}
.hk-bant{position:relative;overflow:hidden;padding:clamp(80px,10vw,140px) 0 0;color:#fff;text-align:center;
  background:radial-gradient(90% 120% at 50% 110%,#0f3f86 0%,#0a2540 55%,#061428 100%)}
#hkAg{position:absolute;inset:0;width:100%;height:100%;opacity:.8}
.hk-bant-in{position:relative;max-width:760px}
.hk-bant h2{font-size:clamp(36px,4.4vw,62px);font-weight:300;letter-spacing:-.03em;line-height:1.05;margin-bottom:22px}
.hk-bant h2 b{font-weight:600;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.hk-bant p{color:rgba(255,255,255,.75);font-size:16.5px;line-height:1.7;max-width:60ch;margin:0 auto}
.hk-bant-linkler{position:relative;display:grid;grid-template-columns:1fr 1fr;margin-top:clamp(60px,8vw,110px)}
.hk-bant-linkler a{position:relative;display:flex;align-items:center;gap:18px;text-align:left;
  padding:clamp(28px,3.4vw,44px) clamp(22px,4vw,56px);background:#0b5cff;transition:background .35s}
.hk-bant-linkler a+a{background:#0a2540}
.hk-bant-linkler a:hover{background:#0a4fe0}
.hk-bant-linkler a+a:hover{background:#0c3470}
.hk-bant-linkler .mono{color:rgba(255,255,255,.6)}
.hk-bant-linkler b{font-size:clamp(22px,2.2vw,30px);font-weight:400;letter-spacing:-.02em}
.hk-bant-linkler svg{width:26px;height:26px;margin-left:auto;fill:none;stroke:#fff;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round;transition:transform .35s}
.hk-bant-linkler a:hover svg{transform:translateX(8px)}

/* ---------- Tablet ---------- */
@media (max-width:1040px){
  .hk-hero-in{grid-template-columns:1fr}
  .hk-olgu{height:520px;margin:0 -4vw}
  .hk-kutu{width:150px;height:150px;padding:16px 12px}
  .hk-kutu svg{width:32px;height:32px}
  .hk-kutu b{font-size:25px}
  .hk-mozaik-in{grid-template-columns:1fr}
  .hk-mozaik{max-width:640px;width:100%}
}

/* ---------- Telefon ---------- */
@media (max-width:720px){
  .hk-hero{padding-top:160px}
  .hk-hero h1{font-size:clamp(36px,10vw,46px);margin:10px 0 20px}
  .hk-hero-p{font-size:15px}
  .hk-olgu{height:420px;margin:0 -16px;
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
            mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
  .hk-sutun{gap:8px;margin-right:8px}
  .hk-sutun:nth-child(even){transform:translateY(-30px)}
  .hk-kutu{width:116px;height:116px;border-radius:12px;padding:10px 8px;gap:3px}
  .hk-kutu svg{width:24px;height:24px;margin-bottom:2px}
  .hk-kutu b{font-size:20px}
  .hk-kutu span{font-size:7.5px;letter-spacing:.1em}
  .hk-kutu span.tek{font-size:11.5px}
  .hk-mozaik{grid-template-rows:repeat(3,minmax(96px,1fr));gap:8px}
  .hk-m{border-radius:12px}
  .hk-mg span{font-size:7.5px;left:8px;right:8px;bottom:7px}
  .hk-h2{margin-bottom:24px}
  .hk-kart{padding:20px 18px}
  .hk-harita{margin:0 -8px 30px}
  .hk-pin i{left:-11px;top:-29px;width:22px;height:28px}
  .hk-pin.hq i{left:-14px;top:-36px;width:28px;height:35px}
  .hk-pin span{bottom:34px;font-size:11.5px}
  .hk-pin.hq span{bottom:42px}
  .hk-bant-linkler{grid-template-columns:1fr}
}

/* Giriş animasyonu bekleyen öğeler (fade-left 46px vb.) telefonda sayfayı yana kaydırıyordu
   (2026-10-07 denetimi). clip, hidden'dan farklı olarak yapışkan (sticky) öğeleri bozmaz. */
.hk-an section{overflow-x:clip}