/* Kanca bölümleri taşıyor · tam 3B — blueprint mavisi + beyaz çizgi + sarı vurgu (brief konsept 2). Bölüm stilleri kanca-karma ile aynı dil. */
:root{
  --mavi:#0f3d6e; --mavi-koyu:#0a2d55; --mavi-panel:#0c3463;
  --cizgi:rgb(236 243 255/.82); --cizgi-ince:rgb(236 243 255/.22); --izgara:rgb(236 243 255/.06);
  --sari:#F5B800;
  --sv-zemin:var(--mavi); --sv-metin:#eef4ff; --sv-vurgu:var(--sari); --sv-vurgu-uzeri:#0a2d55;
  --sv-dugme-zemin:#0a2d55; --sv-dugme-metin:#eef4ff; --sv-odak:var(--sari);
  --sol:20px;
}
body{
  background-color:var(--mavi);
  background-image:
    linear-gradient(var(--izgara) 1px,transparent 1px),linear-gradient(90deg,var(--izgara) 1px,transparent 1px),
    linear-gradient(rgb(236 243 255/.035) 1px,transparent 1px),linear-gradient(90deg,rgb(236 243 255/.035) 1px,transparent 1px);
  background-size:120px 120px,120px 120px,24px 24px,24px 24px;
}
.atla:focus{position:fixed!important;top:8px;left:8px;width:auto;height:auto;clip-path:none;z-index:2000;background:var(--sari);color:var(--mavi-koyu);padding:8px 12px}

/* üst şerit */
.ust{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px var(--sol);position:relative;z-index:60}
.ust-ad{font-weight:800;letter-spacing:.2em;font-size:13px}
.gosterge{display:none}

/* hero */
.hero{position:relative;padding:28px var(--sol) 56px;max-width:1180px;margin-inline:auto}
.hero-ust{color:var(--sari);font-weight:600;letter-spacing:.18em;text-transform:uppercase;font-size:13px}
.hero h1{font-size:clamp(46px,12.5vw,140px);line-height:.9;font-weight:800;letter-spacing:-.035em;text-transform:uppercase;margin:14px 0 18px;max-width:9.5ch;position:relative;z-index:2}
.hero-slogan{font-size:clamp(19px,2.2vw,26px);font-weight:500;max-width:28ch}
.hero-alt{color:rgb(238 244 255/.72);margin-top:8px;max-width:44ch}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.btn{display:inline-flex;align-items:center;min-height:48px;padding:0 20px;border:1.5px solid var(--cizgi);text-decoration:none;font-weight:700;font-size:15px;transition:background .2s,color .2s}
.btn:hover{background:rgb(236 243 255/.1)}
.btn-ana{background:var(--sari);border-color:var(--sari);color:var(--mavi-koyu)}
.btn-ana:hover{background:#ffcb2b}
.hero-vinc{position:absolute;right:-30px;top:-40px;width:170px;color:var(--cizgi-ince);z-index:0;pointer-events:none;-webkit-mask-image:linear-gradient(#000 60%,transparent 96%);mask-image:linear-gradient(#000 60%,transparent 96%)}
/* 3B açılmadan önce de kanca boşta sallanır (yüksüz sarkaç) */
/* açılış: üst yapı yandan döner, yavaşlayarak durur; kanca ataletle sönümlü sallanır, sonra rüzgârla hafif salınır */
.hv-don{transform-box:view-box;transform-origin:48px 40px;animation:hvdon 1.9s cubic-bezier(.45,0,.2,1) both}
@keyframes hvdon{from{transform:scaleX(.28)}to{transform:none}}
.hv-kanca{transform-box:view-box;transform-origin:170px 58px;animation:hvsal 3s ease-in-out 1.5s both,sarkac 3.4s ease-in-out 4.5s infinite}
@keyframes hvsal{0%{transform:rotate(0)}12%{transform:rotate(-13deg)}36%{transform:rotate(9deg)}60%{transform:rotate(-6deg)}82%{transform:rotate(4deg)}100%{transform:rotate(-3deg)}}
@keyframes sarkac{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(3deg)}}
@keyframes sallan{50%{transform:rotate(-3deg)}}

/* telsiz levhası: kancada asılı */
/* yatay: sayaç satırının ortası (STD-186) */
.levha{display:block;width:fit-content;margin-inline:auto;position:relative;margin-top:92px;transform-origin:50% -30px;animation:sallan 5s ease-in-out infinite}
.levha::before{content:"";position:absolute;left:50%;bottom:calc(100% + 34px);width:1.2px;height:48px;background:var(--cizgi)}
/* askı: halka + sapan + kulaklar (her levhada, CH 1 dahil); halka merkezi panel üstünün 30 px üstü */
.aski{position:absolute;left:50%;bottom:100%;width:80px;height:34px;margin-left:-40px;overflow:visible;pointer-events:none}
.aski path{fill:none;stroke:var(--sari);stroke-width:1.6}
.aski rect{fill:var(--sari);stroke:var(--mavi-koyu);stroke-width:1}
.aski circle{fill:none;stroke:var(--sari);stroke-width:2.6}
.levha-ic{display:block;background:var(--sari);color:var(--mavi-koyu);font-weight:700;padding:10px 16px;border:2px solid var(--mavi-koyu);outline:1.5px solid var(--sari);font-size:15px;
  background-image:repeating-linear-gradient(-45deg,transparent 0 10px,rgb(10 45 85/.08) 10px 20px)}
.levha small{font-weight:600;opacity:.7;letter-spacing:.08em}

/* sayaçlar: ölçü çizgisi */
.sayaclar{min-height:190px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 18px;margin-top:44px}
.sayac{position:relative;padding-top:16px;display:flex;flex-direction:column}
.sayac dd{order:-1;margin:0}
.sayac::before{content:"";position:absolute;left:0;right:0;top:4px;height:1px;background:var(--cizgi-ince)}
.sayac::after{content:"";position:absolute;left:0;right:0;top:0;height:9px;border-inline:1px solid var(--cizgi)}
.sayac dd{font-size:clamp(34px,3.4vw,50px);font-weight:800;color:var(--sari);line-height:1;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.sayac dt{margin-top:6px;font-size:14px;color:rgb(238 244 255/.78)}

/* bölüm yeri (kesikli çizgi = yükün bırakılacağı yer) */
/* kesikli kutu = yükün son yerinin birebir sınırı (.yuk kenarları); etiket kutunun üstünde */
.yer{position:relative;max-width:1000px;margin:0 auto;padding:0 var(--sol) 72px;--kt:0px;--ks:var(--sol);--kg:var(--sol)}
.yer::before{content:"";position:absolute;inset:var(--kt) var(--kg) 72px var(--ks);border:1.5px dashed rgb(245 184 0/.55);pointer-events:none}
.yer::after{content:attr(data-yer);position:absolute;left:var(--ks);top:calc(var(--kt) - 22px);color:rgb(245 184 0/.75);font-size:11px;letter-spacing:.16em;pointer-events:none;white-space:nowrap}
.yuk{position:relative;will-change:transform}
.yuk-ic{position:relative;background:var(--mavi-panel);border:1px solid var(--cizgi);outline:1px solid var(--cizgi-ince);outline-offset:-9px;padding:30px 22px 22px}
.toz{position:absolute;width:6px;height:6px;border-radius:50%;background:rgb(236 243 255/.75);pointer-events:none;z-index:3}

/* başlık ve antet (pafta künyesi) */
.b-no{font-size:12px;letter-spacing:.2em;color:var(--sari);font-weight:700}
.yuk h2{font-size:clamp(30px,5vw,52px);line-height:1;font-weight:800;letter-spacing:-.025em;margin:6px 0 22px;text-transform:uppercase}
.antet{display:flex;flex-wrap:wrap;margin-top:26px;border:1px solid var(--cizgi-ince);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:rgb(238 244 255/.7)}
.antet span{padding:6px 10px;border-right:1px solid var(--cizgi-ince)}
.antet .damga{margin-left:auto;border:0;color:var(--sari);font-weight:800;opacity:0;transform:scale(1.6) rotate(-8deg);transition:opacity .25s,transform .35s cubic-bezier(.3,1.6,.5,1)}
.yerinde .antet .damga{opacity:1;transform:rotate(-4deg)}

/* deneyim: kule gövdesi gibi dikey ray */
.zc{list-style:none;padding:0 0 0 34px;margin:0;position:relative}
.zc::before{content:"";position:absolute;left:6px;top:4px;bottom:4px;width:14px;border-inline:1.2px solid var(--cizgi);
  background:repeating-linear-gradient(135deg,transparent 0 9px,var(--cizgi-ince) 9px 10.2px)}
.zc li{position:relative;padding:0 0 26px}
.zc li::before{content:"";position:absolute;left:-34px;top:6px;width:26px;height:2px;background:var(--sari)}
.zc .z-yil{font-size:13px;letter-spacing:.1em;color:var(--sari);font-weight:700}
.zc h3{font-size:20px;margin:2px 0 4px}
.zc .z-vinc{font-size:14px;color:rgb(238 244 255/.85)}
.zc .z-not{font-size:14px;color:rgb(238 244 255/.65)}

/* belgeler: yük etiketi */
.etiketler{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr));gap:18px}
.etiket{position:relative;border:1.5px solid var(--cizgi);padding:26px 16px 16px;background:var(--mavi-koyu)}
.etiket::before{content:"";position:absolute;top:9px;left:14px;width:9px;height:9px;border:1.5px solid var(--cizgi);border-radius:50%}
.etiket::after{content:"";position:absolute;top:0;left:0;right:0;height:5px;background:repeating-linear-gradient(-45deg,var(--sari) 0 7px,var(--mavi-koyu) 7px 14px)}
.etiket:nth-child(odd){transform:rotate(-.8deg)} .etiket:nth-child(even){transform:rotate(.7deg)}
.etiket h3{font-size:17px;line-height:1.25}
.etiket p{font-size:13px;color:rgb(238 244 255/.7);margin-top:8px}
.etiket b{position:absolute;top:8px;right:12px;font-size:12px;color:var(--sari);letter-spacing:.1em}

/* markalar: şablon harf */
.markalar-alt{color:rgb(238 244 255/.72);margin:-10px 0 18px}
.marka-satir{display:flex;flex-wrap:wrap;gap:4px 22px}
.marka-satir span{font-size:clamp(30px,6vw,64px);font-weight:900;text-transform:uppercase;letter-spacing:-.02em;color:transparent;-webkit-text-stroke:1.2px var(--cizgi);line-height:1.1;transition:color .25s}
.marka-satir span:hover{color:var(--sari);-webkit-text-stroke-color:var(--sari)}

/* projeler: görünüş çizimi */
.proje-izgara{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,250px),1fr));gap:16px}
.proje{border:1px solid var(--cizgi-ince);padding:14px;background:var(--mavi-koyu)}
.proje svg{width:100%;height:auto;color:var(--cizgi)}
.proje h3{font-size:17px;margin-top:10px}
.proje .p-tur{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--sari)}
.proje p{font-size:14px;color:rgb(238 244 255/.7);margin-top:4px}

/* İSG */
.kazasiz{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 14px;margin-bottom:26px;padding:14px 0;border-block:1px solid var(--cizgi-ince)}
.kazasiz b{font-size:clamp(56px,12vw,120px);line-height:.9;font-weight:900;color:var(--sari);font-variant-numeric:tabular-nums;letter-spacing:-.03em}
.kazasiz span{font-size:18px;font-weight:600}
.isg-izgara{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:18px}
.isg-oge{display:grid;grid-template-columns:72px 1fr;gap:14px;align-items:start}
.isg-oge svg{width:72px;height:72px;color:var(--cizgi)}
.isg-oge h3{font-size:17px}
.isg-oge p{font-size:14px;color:rgb(238 244 255/.75);margin-top:4px}
.ibre{transform-origin:36px 44px;animation:ibre 6s ease-in-out infinite}
@keyframes ibre{0%,100%{transform:rotate(-40deg)}45%{transform:rotate(18deg)}60%{transform:rotate(6deg)}}

/* iletişim */
.il-metin{font-size:clamp(19px,2.4vw,26px);max-width:30ch}
.il-dugmeler{display:flex;flex-wrap:wrap;gap:12px;margin:22px 0}
.il-liste{display:grid;grid-template-columns:auto 1fr;gap:6px 16px;font-size:15px}
.il-liste dt{color:rgb(238 244 255/.6);font-size:12px;letter-spacing:.12em;text-transform:uppercase;padding-top:3px}
.alt{padding:8px var(--sol) 110px;text-align:center;font-size:13px;color:rgb(238 244 255/.6)}


/* ---------- kaydır ipucu ---------- */
.kaydir{margin-top:34px;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:rgb(238 244 255/.6);display:flex;align-items:center;gap:10px}
.kaydir::before{content:"";width:1.5px;height:34px;background:linear-gradient(var(--sari),transparent)}

/* ---------- ortak masaüstü ---------- */
@media (min-width:769px){
  :root{--sol:40px}
  .sayaclar{min-height:92px;grid-template-columns:repeat(4,minmax(0,1fr))}
  .yuk-ic{padding:44px 44px 30px}
  .hero{padding-top:56px}
  .hero-vinc{width:260px;right:10px}
}

/* ---------- hafif (3B yok, hareket var): bölüm görününce aşağıdan gelip oturur ---------- */
.hafif .yuk{transform:translateY(70px) rotate(-1.2deg);transform-origin:50% -30px;opacity:.001;transition:transform .9s cubic-bezier(.25,1.35,.45,1),opacity .4s}
.hafif .yerinde .yuk{transform:none;opacity:1}
.sakin .levha,.uc .levha{animation:none}

/* ---------- tam 3B ---------- */
.sahne{display:none}
.uc .sahne{display:block;position:absolute;top:0;left:0;z-index:0;will-change:transform;pointer-events:none;opacity:0;transition:opacity .8s}
.uc.uc-hazir .sahne{opacity:1}
.uc #ana,.uc .alt{position:relative;z-index:1}
.uc .ust{z-index:60}
.uc.uc-hazir .hero-vinc{display:none}
/* halatı 3B çizer (DOM halatı gizli); askı (halka + sapan + kulak) DOM'da, panelle birlikte döner */
.uc .levha::before{visibility:hidden}
.uc .yuk{transform-origin:50% -30px;will-change:transform}   /* = sahne.js SAPAN: askı halkası merkezi */
/* yükün bırakılacağı yer (kesikli) yalnız yük havadayken görünür */
.uc .yer::before,.uc .yer::after{opacity:0;transition:opacity .3s}
.uc .yer.havada::before,.uc .yer.havada::after{opacity:1}
/* bölüm paneli: 3B levhanın ön yüzü — yarı saydam değil, okunur */
.uc .yuk-ic{background:var(--mavi-panel);box-shadow:0 0 0 1px var(--cizgi)}
.uc .yer{padding-top:96px;--kt:96px}
.uc .hero{min-height:100svh}
.uc .levha{margin-top:110px}

/* operatör göstergesi (yalnız 3B, geniş ekran) */
.gosterge{display:none}
@media (min-width:900px){
  .uc .ust{position:fixed;inset:12px 16px auto auto;padding:0;gap:14px}
  .uc .ust-ad{display:none}
  .uc .gosterge{display:flex;background:var(--mavi-koyu);border:1px solid var(--cizgi-ince);font-size:10px;letter-spacing:.14em}
  .uc .gosterge span{display:flex;align-items:baseline;gap:6px;padding:8px 12px;border-right:1px solid var(--cizgi-ince);min-width:84px}
  .uc .gosterge span:first-child{min-width:150px}
  .uc .gosterge span:last-child{border-right:0}
  .uc .gosterge i{font-style:normal;color:rgb(238 244 255/.6)}
  .uc .gosterge b{color:var(--sari);font-size:14px;letter-spacing:.02em;font-variant-numeric:tabular-nums;margin-left:auto}
  .uc .ust #dil{background:var(--mavi-koyu)}
  .uc .hero{padding-top:110px}
  /* yükler sırayla sola/sağa kayık oturur → bom her bölümde döner */
  .uc .yer:nth-of-type(odd) .yuk{margin-right:clamp(0px,7vw,120px)}
  .uc .yer:nth-of-type(even) .yuk{margin-left:clamp(0px,7vw,120px)}
  .uc .yer:nth-of-type(odd){--kg:calc(var(--sol) + clamp(0px,7vw,120px))}
  .uc .yer:nth-of-type(even){--ks:calc(var(--sol) + clamp(0px,7vw,120px))}
}

@media (prefers-reduced-motion:reduce){.levha,.ibre,.hv-kanca,.hv-don{animation:none}.hafif .yuk{transform:none;opacity:1}}