:root{
  --bg:#0a0a0a;
  --fg:#f2f2f2;
  --dim:#6b6b6b;
  --line: rgba(255,255,255,.12);
  --signal:#4B64BA;   /* içerik / video / "canlı" */
  --code:#5ee6a3;     /* yazılım / terminal */
  --mono: 'Space Mono', ui-monospace, monospace;
  --display: 'Unbounded', 'Arial Narrow', sans-serif;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--bg); color:var(--fg);
  font-family:var(--mono);
  -webkit-font-smoothing:antialiased;
}
a{color:inherit; text-decoration:none;}
#topbar{
  position:fixed; top:0; left:0; right:0; z-index:50;
  display:flex; justify-content:space-between; align-items:center;
  padding:20px 24px; font-size:11px; letter-spacing:1.5px;
  text-transform:uppercase; mix-blend-mode:difference;
}
#topbar .logo{ font-family:var(--display); font-weight:900; font-size:13px; }
#menuBtn{
  display:flex; align-items:center; gap:8px; cursor:pointer;
  background:none; border:none; color:var(--fg); font-family:var(--mono);
  font-size:11px; letter-spacing:1.5px; text-transform:uppercase;
}
#menuBtn .plus{ font-size:14px; transition:transform .3s ease; }
#menuBtn.open .plus{ transform:rotate(45deg); }
#navOverlay{
  position:fixed; inset:0; z-index:60;
  background:#0a0a0a;
  clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
  transition: clip-path .55s cubic-bezier(.7,0,.2,1);
  display:flex; flex-direction:column; justify-content:center;
  padding: 6vw;
}
#navOverlay.open{ clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
#navOverlay .navList{ list-style:none; }
#navOverlay .navList li{
  border-top:1px solid var(--line);
  padding: 18px 0;
}
#navOverlay .navList li:last-child{ border-bottom:1px solid var(--line); }
#navOverlay .navList a{
  font-family:var(--display); font-weight:600;
  font-size: clamp(28px, 6vw, 64px);
  display:flex; justify-content:space-between; align-items:center;
  transition:color .2s ease;
}
#navOverlay .navList a:hover{ color:var(--signal); }
#navOverlay .navList a .tag{
  font-family:var(--mono); font-size:11px; letter-spacing:2px;
  color:var(--dim); text-transform:uppercase;
}
#navOverlay .navFoot{
  margin-top:48px; display:flex; justify-content:space-between;
  font-size:10px; letter-spacing:1.5px; color:var(--dim);
  text-transform:uppercase; flex-wrap:wrap; gap:10px;
}
#navClose{
  position:fixed; top:24px; right:6vw; z-index:70;
  width:38px; height:38px;
  background:rgba(10,10,10,.4); border:1px solid rgba(255,255,255,.25);
  border-radius:50%;
  display:none; align-items:center; justify-content:center;
  cursor:pointer;
  opacity:0; pointer-events:none;
  transition: border-color .2s ease, transform .25s ease, background .2s ease, opacity .2s ease;
}
#navClose.show{ display:flex; opacity:1; pointer-events:auto; }
#navClose:hover{ border-color:rgba(255,255,255,.7); background:rgba(255,255,255,.1); transform:rotate(90deg); }
#navClose .navCloseBar{ position:absolute; width:16px; height:1px; background:#f5f5f5; }
#navClose .navCloseBar:nth-child(1){ transform:rotate(45deg); }
#navClose .navCloseBar:nth-child(2){ transform:rotate(-45deg); }
@media(max-width:600px){
  #navClose{ top:18px; right:6vw; width:34px; height:34px; }
}
#signalStrip{
  position:fixed; left:24px; bottom:24px; z-index:40;
  display:flex; align-items:center; gap:10px;
  font-size:10px; letter-spacing:2px; text-transform:uppercase;
}
#signalStrip .dot{
  width:7px; height:7px; border-radius:50%;
  background:var(--code);
  box-shadow:0 0 8px var(--code);
  animation:pulse 1.6s ease-in-out infinite;
}
@keyframes pulse{ 0%,100%{opacity:1;} 50%{opacity:.25;} }
#signalStrip .word{ color:var(--fg); min-width:80px; }
#signalStrip .word.code{ color:var(--code); }
#signalStrip .word.signal{ color:var(--signal); }
@media(max-width:600px){
  #signalStrip{ left:16px; bottom:16px; }
  #topbar{ padding:16px; }
}
.sectionLabel{
  font-size:11px; letter-spacing:3px; color:var(--dim);
  text-transform:uppercase; margin-bottom:14px;
  display:flex; align-items:center; gap:10px;
}
.sectionLabel::before{
  content:''; width:22px; height:1px; background:var(--dim);
}
body{ height:100%; overflow-x:hidden; }
html{ overflow-x:hidden; }
body.loaderLock, html.loaderLock{ overflow:hidden; }
#stage{
  position:relative; width:100vw; height:100vh;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
#codeDecor{
  position:absolute; inset:0; padding:24px;
  font-size:15px; line-height:1.7; color:var(--dim);
  opacity:.45; white-space:pre; pointer-events:none;
  z-index:1; transition:opacity 1.2s ease;
}
#codeDecor .kw{ color:#8a8a8a; }
#codeDecor .str{ color:var(--code); opacity:.7; }
#codeDecor .var{ color:#c9c9c9; }
#codeDecor.faded{ opacity:.08; }
#loader{
  position:absolute; inset:0; z-index:5;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding: 6vw;
  transition: opacity .5s ease;
}
#loader.out{ opacity:0; pointer-events:none; }
#pct{
  font-size: clamp(90px, 22vw, 260px);
  font-weight:900; letter-spacing:-4px;
  line-height:.9; text-align:right;
  font-family: var(--display);
}
#pct span.pctSign{ color:var(--dim); }
#loaderMeta{
  display:flex; justify-content:space-between;
  font-size:11px; letter-spacing:1px; color:var(--dim);
  margin-top:16px; text-transform:uppercase;
}
#barTrack{ width:100%; height:2px; background:#1e1e1e; margin-top:10px; }
#barFill{ height:100%; width:0%; background:var(--fg); transition:width .05s linear; }
#titleLayer{
  position:absolute; inset:0; z-index:6;
  display:flex; align-items:center; justify-content:center;
  flex-direction:column; text-align:center;
  padding: 6vw; opacity:0; pointer-events:none;
  transition: opacity .6s ease;
}
#titleLayer.show{ opacity:1; }
#titleLayer.out{ opacity:0; }
#titleLayer h1{
  font-family: var(--display); font-weight:900;
  font-size: clamp(40px, 11vw, 130px);
  letter-spacing:-2px; line-height:.98;
}
#titleLayer .sys{ color:var(--signal); }
#terminalLine{
  margin-top:22px; font-size:13px; letter-spacing:2px;
  color:var(--dim); text-transform:uppercase; min-height:18px;
}
#terminalLine .cursor{
  display:inline-block; width:8px; height:14px;
  background:var(--fg); margin-left:4px; vertical-align:middle;
  animation: blink 1s steps(1) infinite;
}
@keyframes blink{ 50%{ opacity:0; } }
.flicker{ animation: flickerAnim 1.1s steps(2,end) 1; }
@keyframes flickerAnim{
  0%{opacity:0;} 8%{opacity:1;} 12%{opacity:0;} 20%{opacity:1;}
  24%{opacity:.2;} 30%{opacity:1;} 45%{opacity:.1;} 50%{opacity:1;} 100%{opacity:1;}
}
#videoLayer{
  position:absolute; inset:0; z-index:2;
  opacity:0; pointer-events:none;
  transition: opacity .6s ease;
}
#videoLayer.show{ opacity:1; pointer-events:auto; }
#videoLayer video{ position:absolute; object-fit:cover; display:block; filter: grayscale(.15) brightness(.5); }
#vMain{ inset:0; width:100%; height:100%; }
#videoLayer::after{
  content:''; position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,.4) 0%, rgba(0,0,0,.15) 40%, rgba(0,0,0,.6) 100%);
  pointer-events:none;
}
#videoLabel{
  position:absolute; right:6vw; bottom:6vw; z-index:8;
  display:flex; align-items:center; gap:6px;
  font-size:10px; letter-spacing:1.5px; color:var(--fg); text-transform:uppercase;
}
#videoLabel .dot{
  width:6px; height:6px; border-radius:50%; background:var(--signal);
  display:inline-block; animation: pulse 1.4s ease-in-out infinite;
}
#soundHint{
  position:absolute; right:6vw; bottom:calc(6vw + 22px); z-index:8;
  font-size:9px; letter-spacing:1.5px; color:var(--fg);
  text-transform:uppercase; opacity:.7; pointer-events:none; transition:opacity .3s ease;
}
#soundHint.hide{ opacity:0; }
#headline{
  position:absolute; left:6vw; top:50%; transform:translateY(-50%);
  z-index:9; max-width:80vw; opacity:0; transition: opacity .7s ease .1s;
}
#headline.show{ opacity:1; }
#headline .kicker{
  font-size:11px; letter-spacing:3px; color:var(--code);
  text-transform:uppercase; margin-bottom:10px;
  display:flex; align-items:center; gap:8px;
}
#headline .kicker::before{ content:'</>'; }
#headline h1{
  font-family: var(--display); font-weight:900;
  font-size: clamp(34px, 7.4vw, 92px);
  line-height:.98; letter-spacing:-2px; color:var(--fg);
}
#headline .accentWord{ color:var(--signal); }
#headline p{
  margin-top:14px; font-family:var(--mono); font-size:13px;
  letter-spacing:1px; color:#d8d8d8; max-width:440px;
}
#scrollHint{
  position:absolute; bottom:22px; left:50%; transform:translateX(-50%);
  z-index:9; display:none; flex-direction:column; align-items:center; gap:8px;
  font-family:var(--mono); font-size:10px; letter-spacing:2px;
  color:var(--fg); text-transform:uppercase; opacity:.85; cursor:pointer;
  background:none; border:none;
}
#scrollHint.show{ display:flex; }
#scrollHint .arrow{ width:1px; height:22px; background:var(--fg); animation: arrowMove 1.6s ease-in-out infinite; }
@keyframes arrowMove{ 0%,100%{transform:scaleY(1); opacity:.4;} 50%{transform:scaleY(1.4); opacity:1;} }
#socialStrip{
  position:absolute; left:6vw; bottom:6vw; z-index:8;
  display:none; flex-direction:column; gap:6px;
  font-size:11px; letter-spacing:1.5px; color:#cfcfcf; text-transform:uppercase;
}
#socialStrip.show{ display:flex; }
#socialStrip .label{ color:var(--fg); font-size:12px; margin-bottom:4px; }
#socialStrip .tags{ display:flex; gap:10px; flex-wrap:wrap; }
#socialStrip .tag{ border:1px solid rgba(255,255,255,.3); padding:4px 10px; }
@media (max-width:600px){
  #headline{ top:40%; left:6vw; }
  #videoLabel, #soundHint{ right:5vw; }
  #socialStrip{ display:none !important; }
  #codeDecor{ font-size:10px; padding:14px; }
  #loader{ padding: 8vw 6vw; }
}
main{ position:relative; z-index:3; background:var(--bg); }
.disciplines{
  display:grid; grid-template-columns:repeat(3,1fr);
  border-top:1px solid var(--line);
}
.disciplines a{
  padding:64px 32px; border-right:1px solid var(--line);
  display:flex; flex-direction:column; gap:16px; min-height:340px;
  justify-content:space-between; position:relative; overflow:hidden;
}
.disciplines a:last-child{ border-right:none; }
.disciplines a::before{
  content:''; position:absolute; inset:0; background:var(--fg);
  transform:translateY(101%); transition:transform .35s cubic-bezier(.7,0,.2,1); z-index:0;
}
.disciplines a:hover::before{ transform:translateY(0); }
.disciplines a > *{ position:relative; z-index:1; transition:color .35s ease; }
.disciplines a:hover .num, .disciplines a:hover h3, .disciplines a:hover p, .disciplines a:hover .go{ color:#0a0a0a; }
.disciplines .num{ font-size:11px; letter-spacing:2px; color:var(--dim); }
.disciplines h3{ font-family:var(--display); font-weight:600; font-size:clamp(24px,3vw,32px); }
.disciplines p{ font-size:13px; color:#bdbdbd; line-height:1.6; }
.disciplines .go{ font-size:11px; letter-spacing:2px; text-transform:uppercase; color:var(--fg); }
@media(max-width:800px){
  .disciplines{ grid-template-columns:1fr; }
  .disciplines a{ border-right:none; border-bottom:1px solid var(--line); min-height:0; padding:40px 24px; }
}
.brickSection{
  position:relative;
  padding: 100px 6vw 60px;
  border-top:1px solid var(--line);
}
.brickSticky{
  display:flex; flex-direction:column; align-items:flex-start;
  gap:64px;
}
.brickSticky::before{ content:none; }
.brickTop{
  display:flex; align-items:center; flex-wrap:wrap; gap:40px;
  width:100%;
}
.brickCopy{
  position:relative; z-index:2;
  flex:1 1 380px; min-width:300px; max-width:520px;
  box-sizing:border-box;
}
.brickCopy .sectionLabel{ margin-bottom:18px; }
.brickCopy h2{
  font-family:var(--display); font-weight:900;
  font-size:clamp(38px, 6.2vw, 78px); line-height:1.0; letter-spacing:-2px;
}
.brickCopy h2 .hl{ color:var(--code); }
.brickCopy p{
  margin-top:18px; font-size:13.5px; color:#bdbdbd; line-height:1.75; max-width:400px;
}
.brickStats{ margin-top:36px; display:flex; flex-direction:column; gap:20px; }
.brickStats .stat{
  display:flex; align-items:baseline; gap:14px;
  padding-bottom:16px; border-bottom:1px solid var(--line);
}
.brickStats .stat .sv{ font-family:var(--display); font-weight:700; font-size:34px; }
.brickStats .stat:nth-child(1) .sv{ color:var(--code); }
.brickStats .stat:nth-child(2) .sv{ color:var(--signal); }
.brickStats .stat:nth-child(3) .sv{ color:#e0c34a; }
.brickStats .stat .sl{ font-size:11px; letter-spacing:1.5px; color:var(--dim); text-transform:uppercase; }
.brickStage{
  position:relative; flex:1 1 560px; max-width:680px;
  min-width:340px;
  margin:0 auto;
  display:flex; align-items:flex-end; justify-content:center;
  gap:clamp(12px, 2.6vw, 34px);
}
.brickPiece{
  position:relative;
  width:31%; max-width:230px;
  display:flex; flex-direction:column; align-items:center;
  gap:18px;
}
.brickPiece:nth-child(2){ transform:translateY(-8%); }
.brickPiece .brickImg{
  width:100%; height:auto; object-fit:contain;
  filter: drop-shadow(0 16px 30px rgba(0,0,0,.5));
}
.brickPiece[data-kind="code"] .brickImg{ filter: drop-shadow(0 16px 30px rgba(0,0,0,.5)) hue-rotate(70deg) saturate(1.5); }
.brickPiece[data-kind="content"] .brickImg{ filter: drop-shadow(0 16px 30px rgba(0,0,0,.5)) hue-rotate(-150deg) saturate(1.7); }
.brickPiece[data-kind="print"] .brickImg{ filter: drop-shadow(0 16px 30px rgba(0,0,0,.5)) hue-rotate(160deg) saturate(1.4); }
.brickPiece .label{
  font-family:var(--mono); font-size:11px; letter-spacing:2px; text-transform:uppercase; color:var(--fg);
  display:flex; align-items:center; gap:8px; white-space:nowrap; text-align:center;
}
.brickPiece .label::before{ content:''; width:14px; height:1px; background:currentColor; opacity:.8; }
.brickPiece[data-kind="code"] .label{ color:#8fe0a8; }
.brickPiece[data-kind="content"] .label{ color:#b892f2; }
.brickPiece[data-kind="print"] .label{ color:#e0c34a; }
@media(max-width:700px){
  .brickStage{ flex-wrap:wrap; gap:28px 4vw; }
  .brickPiece{ width:40%; }
  .brickPiece:nth-child(2){ transform:none; }
}
@media(max-width:500px){
  .brickPiece .label{ font-size:9.5px; letter-spacing:1.5px; }
}
.brickCaption{
  text-align:center; margin-top:24px;
  font-family:var(--mono); font-size:11px; letter-spacing:2px; text-transform:uppercase;
  color:var(--dim);
  display:flex; align-items:center; justify-content:center; gap:8px;
}
.brickCaption .dot{ width:6px; height:6px; border-radius:50%; background:var(--code); box-shadow:0 0 8px var(--code); }
@media(max-width:900px){
  .brickTop{ flex-direction:column; justify-content:center; gap:32px; }
  .brickCopy, .brickStage{ width:100%; max-width:100%; }
}
.brandNotice{
  position:relative;
  width:100vw;
  margin: 60px calc(50% - 50vw) 0;
  overflow:hidden;
  min-height:100vh;
  background:#0E0E0E;
  display:flex; align-items:flex-start; justify-content:flex-start;
}
.brandNotice img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  object-position:center 30%;
  transform:scale(1.12);
  filter:brightness(.7) saturate(.9);
  transition: transform 1.6s cubic-bezier(.16,.8,.2,1), filter 1.6s ease;
}
.brandNotice.inview img{
  transform:scale(1);
  filter:brightness(1) saturate(1);
}
.brandNotice::before{
  content:''; position:absolute; left:0; right:0; top:0; height:22%;
  background:linear-gradient(180deg, #0E0E0E 0%, rgba(14,14,14,0) 100%);
  z-index:1;
}
.brandNotice::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:30%;
  background:linear-gradient(0deg, #0E0E0E 0%, rgba(14,14,14,0) 100%);
  z-index:1;
}
.brandNotice .bnLine{
  position:absolute; z-index:2; top:6.5vw; left:6vw;
  width:0; height:1px; background:var(--code);
  box-shadow:0 0 8px var(--code);
  transition: width 1s cubic-bezier(.7,0,.2,1) .2s;
}
.brandNotice.inview .bnLine{ width:64px; }
.brandNotice h2{
  position:relative; z-index:2;
  margin: calc(6.5vw + 32px) 0 0 6vw;
  font-family:var(--display); font-weight:900;
  font-size:clamp(30px, 4.8vw, 58px);
  letter-spacing:-1.5px; line-height:1.04;
  color:var(--fg); text-align:left;
  max-width:min(9ch, 82vw);
  overflow:hidden;
  word-break:break-word;
}
/* ================= EK HİZMET KARTLARI (tileGrid) ================= */
.tileGrid{
  display:grid; grid-template-columns:repeat(3, 1fr);
  gap:1px; background:var(--line); border:1px solid var(--line); border-top:none;
  margin-bottom:1px;
}
.tileGrid .bentoTile{ min-height:170px; }
.tileGrid .bentoTile .btNum{ opacity:.9; }
@media(max-width:900px){
  .tileGrid{ grid-template-columns:repeat(2, 1fr); }
}
@media(max-width:560px){
  .tileGrid{ grid-template-columns:1fr; }
}

.hdBody{
  padding: 0 6vw 60px; max-width:1200px; margin:0 auto;
  font-size:16px; line-height:1.9; color:#d6d6d6;
}
.hdBody > .hdIntro{
  font-size:16px; color:#e4e4e4; margin-bottom:8px;
}
.hdBody h2{
  font-family:var(--display); font-weight:700; font-size:26px; letter-spacing:-.5px;
  color:var(--fg); margin:46px 0 18px;
}
.hdBody p{ margin-bottom:20px; }
.hdBody ul.hdList{
  list-style:none; margin:0 0 24px; padding:0;
  display:flex; flex-direction:column; gap:10px;
}
.hdBody ul.hdList li{
  position:relative; padding-left:26px; color:#c9c9c9; font-size:14.5px;
}
.hdBody ul.hdList li::before{
  content:''; position:absolute; left:0; top:9px;
  width:8px; height:8px; border-radius:50%;
  background:var(--code); box-shadow:0 0 8px var(--code);
}
[data-group="sosyal"] .hdBody ul.hdList li::before{ background:#b892f2; box-shadow:0 0 8px #b892f2; }
[data-group="basili"] .hdBody ul.hdList li::before{ background:#e0c34a; box-shadow:0 0 8px #e0c34a; }

.hdSteps{
  list-style:none; margin:0 0 24px; padding:0;
  display:flex; flex-direction:column; gap:0;
  border-top:1px solid var(--line);
}
.hdSteps li{
  display:flex; align-items:flex-start; gap:20px;
  padding:20px 0; border-bottom:1px solid var(--line);
}
.hdSteps li .stepNum{
  flex:0 0 auto;
  width:32px; height:32px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--display); font-weight:700; font-size:13px;
  background:var(--code); color:#0a0a0a;
}
[data-group="sosyal"] .hdSteps li .stepNum{ background:#b892f2; }
[data-group="basili"] .hdSteps li .stepNum{ background:#e0c34a; }
.hdSteps li .stepText{
  font-family:var(--display); font-weight:600; font-size:16px; color:var(--fg);
  padding-top:4px;
}
@media(max-width:600px){
  .hdBody{ font-size:14px; }
  .hdBody h2{ font-size:22px; margin:36px 0 14px; }
}
.tileGrid{
  display:grid; grid-template-columns:repeat(3, 1fr);
  gap:1px; background:var(--line); border:1px solid var(--line); border-top:none;
  margin-bottom:1px;
}
.tileGrid .bentoTile{ min-height:170px; }
.tileGrid .bentoTile .btNum{ opacity:.9; }
@media(max-width:900px){
  .tileGrid{ grid-template-columns:repeat(2, 1fr); }
}
@media(max-width:560px){
  .tileGrid{ grid-template-columns:1fr; }
}
.brandNotice h2 span{
  display:inline-block;
  max-width:100%;
  transform:translateY(105%);
  transition: transform .9s cubic-bezier(.16,.8,.2,1);
}
.brandNotice.inview h2 span{ transform:translateY(0); }
.brandNotice.inview h2 span:nth-child(1){ transition-delay:.15s; }
.brandNotice.inview h2 span:nth-child(2){ transition-delay:.25s; }
@media(max-width:600px){
  .brandNotice{ margin:40px 0 0; min-height:90vh; }
  .brandNotice h2{
    margin:calc(10vw + 20px) 0 0 6vw;
    font-size:clamp(22px, 8vw, 32px);
    max-width:80vw;
    line-height:1.1;
  }
}
.swRefs{ padding: 90px 6vw 100px; border-top:1px solid var(--line); }
.swRefsHead{ display:flex; align-items:flex-end; justify-content:space-between; flex-wrap:wrap; gap:16px; margin-bottom:48px; }
.swRefsTitle{ font-family:var(--display); font-weight:900; font-size:clamp(30px, 5vw, 56px); line-height:1.02; letter-spacing:-1.5px; margin-top:10px; }
.swRefsAll{ font-size:11px; letter-spacing:2px; text-transform:uppercase; color:var(--dim); border-bottom:1px solid var(--dim); padding-bottom:2px; transition: color .2s ease, border-color .2s ease; }
.swRefsAll:hover{ color:var(--fg); border-color:var(--fg); }
.bentoBlock{
  display:grid; grid-template-columns:repeat(4, 1fr); grid-auto-rows:170px;
  gap:1px; background:var(--line); border:1px solid var(--line);
  margin-bottom:1px;
  position:relative;
  --glow: var(--code);
}
.bentoBlock[data-group="sosyal"]{ --glow:#b892f2; }
.bentoBlock[data-group="basili"]{ --glow:#e0c34a; }
@property --bAngle{ syntax:'<angle>'; inherits:false; initial-value:0deg; }
.bentoBlock::after{
  content:''; position:absolute; inset:0; z-index:6; pointer-events:none;
  padding:1.5px; border-radius:1px;
  background: conic-gradient(from var(--bAngle,0deg),
    transparent 0deg, transparent 300deg,
    color-mix(in srgb, var(--glow) 0%, transparent) 320deg,
    var(--glow) 336deg,
    #fff 340deg,
    var(--glow) 344deg,
    color-mix(in srgb, var(--glow) 0%, transparent) 360deg
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: bentoBorderTravel 5s linear infinite;
  opacity:.9;
}
@keyframes bentoBorderTravel{ to{ --bAngle:360deg; } }
.bentoBlock.heroLeft .bentoHero{ grid-column:1/3; grid-row:1/3; }
.bentoBlock.heroLeft .t1{ grid-column:3/4; grid-row:1/2; }
.bentoBlock.heroLeft .t2{ grid-column:4/5; grid-row:1/2; }
.bentoBlock.heroLeft .bentoWide{ grid-column:3/5; grid-row:2/3; }
.bentoBlock.heroRight .t1{ grid-column:1/2; grid-row:1/2; }
.bentoBlock.heroRight .t2{ grid-column:2/3; grid-row:1/2; }
.bentoBlock.heroRight .bentoWide{ grid-column:1/3; grid-row:2/3; }
.bentoBlock.heroRight .bentoHero{ grid-column:3/5; grid-row:1/3; }
.bentoBlock.heroLeftAlt .bentoHero{ grid-column:1/3; grid-row:1/3; }
.bentoBlock.heroLeftAlt .bentoWide{ grid-column:3/5; grid-row:1/2; }
.bentoBlock.heroLeftAlt .t1{ grid-column:3/4; grid-row:2/3; }
.bentoBlock.heroLeftAlt .t2{ grid-column:4/5; grid-row:2/3; }
.bentoHero, .bentoTile, .bentoWide{
  position:relative; overflow:hidden; background:var(--bg);
  display:flex; flex-direction:column; justify-content:space-between;
  opacity:0; transform:translateY(18px);
}
.bentoHero.play, .bentoTile.play, .bentoWide.play{
  animation: bentoIn .55s cubic-bezier(.16,.8,.2,1) forwards;
}
@keyframes bentoIn{ to{ opacity:1; transform:translateY(0); } }
.bentoHero::before, .bentoTile::before, .bentoWide::before{
  content:''; position:absolute; inset:0; background:var(--fg);
  transform:translateY(101%); transition:transform .35s cubic-bezier(.7,0,.2,1); z-index:0;
}
.bentoHero:hover::before, .bentoTile:hover::before, .bentoWide:hover::before{ transform:translateY(0); }
.bentoHero > *, .bentoTile > *, .bentoWide > *{ position:relative; z-index:1; transition:color .35s ease; }
.bentoHero:hover *, .bentoTile:hover *, .bentoWide:hover *{ color:#0a0a0a !important; }
.bentoHero{ padding:30px 30px 26px; }
.bentoHero .bhBigNum{
  position:absolute; top:-6%; right:-2%; z-index:0;
  font-family:var(--display); font-weight:900; font-size:clamp(90px,10vw,150px);
  color:transparent; -webkit-text-stroke:1px var(--line); line-height:1;
  pointer-events:none;
}
.bentoHero .bhTop{ display:flex; align-items:center; gap:8px; }
.bentoHero .bhDot{ width:7px; height:7px; border-radius:50%; box-shadow:0 0 8px currentColor; }
.bentoHero .bhKicker{ font-family:var(--mono); font-size:11px; letter-spacing:2px; text-transform:uppercase; color:var(--dim); }
.bentoHero h3{ font-family:var(--display); font-weight:900; font-size:clamp(26px,2.6vw,36px); letter-spacing:-1px; margin-top:16px; }
.bentoHero p{ font-size:13px; color:#bdbdbd; line-height:1.65; margin-top:10px; max-width:34ch; }
.bentoHero .bhGo{ font-size:11px; letter-spacing:1.5px; text-transform:uppercase; color:var(--fg); margin-top:18px; }
[data-group="yazilim"] .bhDot, [data-group="yazilim"] .bhKicker{ color:var(--code); }
[data-group="sosyal"] .bhDot, [data-group="sosyal"] .bhKicker{ color:#b892f2; }
[data-group="basili"] .bhDot, [data-group="basili"] .bhKicker{ color:#e0c34a; }
.bentoTile{ padding:22px 22px 18px; }
.bentoTile .btNum{ font-size:11px; letter-spacing:2px; color:var(--dim); }
.bentoTile h4{ font-family:var(--display); font-weight:600; font-size:16px; line-height:1.2; margin-top:14px; }
.bentoTile p{ font-size:11.5px; color:#a8a8a8; line-height:1.55; margin-top:8px; }
.bentoWide{ padding:24px 28px; flex-direction:row; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; }
.bentoWide .bwLeft{ display:flex; align-items:baseline; gap:16px; flex:1 1 220px; }
.bentoWide .btNum{ font-size:11px; letter-spacing:2px; color:var(--dim); }
.bentoWide h4{ font-family:var(--display); font-weight:600; font-size:17px; }
.bentoWide p{ font-size:11.5px; color:#a8a8a8; line-height:1.5; margin-top:4px; }
.bentoWide .bwGo{ font-size:11px; letter-spacing:1.5px; text-transform:uppercase; color:var(--fg); white-space:nowrap; }
@media(max-width:900px){
  .bentoBlock{ grid-template-columns:repeat(2, 1fr); grid-auto-rows:160px; }
  .bentoBlock .bentoHero{ grid-column:1/3 !important; grid-row:auto !important; height:220px; }
  .bentoBlock .t1{ grid-column:1/2 !important; grid-row:auto !important; }
  .bentoBlock .t2{ grid-column:2/3 !important; grid-row:auto !important; }
  .bentoBlock .bentoWide{ grid-column:1/3 !important; grid-row:auto !important; height:auto; padding:20px 22px; }
}
@media(max-width:560px){
  .swRefs{ padding:60px 6vw 70px; }
  .bentoBlock{ grid-template-columns:1fr; grid-auto-rows:auto; }
  .bentoBlock .bentoHero, .bentoBlock .t1, .bentoBlock .t2, .bentoBlock .bentoWide{
    grid-column:1/2 !important; grid-row:auto !important; height:auto; min-height:150px;
  }
  .bentoHero .bhBigNum{ font-size:80px; }
}
.flowGrid{
  display:grid; grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: auto auto 1fr;
  border-top:1px solid var(--line); border-left:1px solid var(--line);
}
.flowStep{
  display:grid; grid-template-rows:subgrid; grid-row: span 3;
  padding:40px 28px; border-right:1px solid var(--line); border-bottom:1px solid var(--line);
  position:relative;
}
.flowStep .fNum{
  font-family:var(--display); font-weight:900; font-size:clamp(38px,4.5vw,58px);
  color:transparent; -webkit-text-stroke:1px var(--dim); line-height:1;
  align-self:start;
}
.flowStep h3{ font-family:var(--display); font-weight:600; font-size:19px; margin-top:20px; align-self:start; }
.flowStep p{ font-size:12.5px; color:#bdbdbd; line-height:1.65; margin-top:10px; align-self:start; }
.flowStep .fDot{
  position:absolute; top:44px; right:28px; width:6px; height:6px; border-radius:50%;
  background:var(--code); box-shadow:0 0 8px var(--code);
}
.flowStep:nth-child(2) .fDot{ background:var(--signal); box-shadow:0 0 8px var(--signal); }
.flowStep:nth-child(3) .fDot{ background:#e0c34a; box-shadow:0 0 8px #e0c34a; }
.flowStep:nth-child(4) .fDot{ background:var(--fg); box-shadow:0 0 8px var(--fg); }
@media(max-width:900px){
  .flowGrid{ grid-template-columns:repeat(2,1fr); }
}
@media(max-width:600px){
  .flowGrid{ grid-template-columns:1fr; }
  .flowStep{ display:flex; flex-direction:column; }
}
.socialSplit{
  display:grid; grid-template-columns:1fr 1fr;
  border-top:1px solid var(--line);
  min-height:520px;
}
.ssCol{
  padding:80px 5vw; position:relative; display:flex; flex-direction:column; justify-content:space-between;
  overflow:hidden;
}
.ssPlan{ background:var(--bg); border-right:1px solid var(--line); }
.ssResult{
  background:#0f0f0f;
  background-image:
    radial-gradient(circle at 80% 20%, rgba(94,230,163,.08), transparent 55%),
    radial-gradient(circle at 20% 80%, rgba(192,57,43,.10), transparent 55%);
}
.ssKicker{
  font-size:11px; letter-spacing:3px; text-transform:uppercase; color:var(--dim);
  display:flex; align-items:center; gap:8px; margin-bottom:24px;
}
.ssPlan .ssKicker::before{ content:''; width:22px; height:1px; background:var(--code); }
.ssResult .ssKicker::before{ content:''; width:22px; height:1px; background:var(--signal); }
.ssPlan .ssKicker{ color:var(--code); }
.ssResult .ssKicker{ color:var(--signal); }
.ssCol .ssBody p{ font-size:13.5px; color:#c9c9c9; line-height:1.75; max-width:420px; }
.ssWord{
  font-family:var(--display); font-weight:900;
  font-size:clamp(60px, 9vw, 130px); line-height:.9; letter-spacing:-3px;
  color:var(--fg); opacity:.9;
}
.ssMeta{
  display:flex; gap:24px; margin-top:32px; flex-wrap:wrap;
}
.ssMeta .m{ display:flex; flex-direction:column; gap:4px; }
.ssMeta .m .v{ font-family:var(--display); font-weight:700; font-size:26px; }
.ssMeta .m .l{ font-size:10px; letter-spacing:1.5px; color:var(--dim); text-transform:uppercase; }
.ssResult .ssMeta .v{ color:var(--signal); }
.ssPlan .ssMeta .v{ color:var(--code); }
@media(max-width:800px){
  .socialSplit{ grid-template-columns:1fr; }
  .ssPlan{ border-right:none; border-bottom:1px solid var(--line); }
  .ssCol{ padding:56px 6vw; }
}
.marquee-wrap{ border-top:1px solid var(--line); padding-bottom:48px; overflow:hidden; }
.marquee{ margin-top:22px; overflow:hidden; position:relative; }
.marquee::before, .marquee::after{
  content:''; position:absolute; top:0; bottom:0; width:80px; z-index:2; pointer-events:none;
}
.marquee::before{ left:0; background:linear-gradient(90deg, var(--bg), transparent); }
.marquee::after{ right:0; background:linear-gradient(270deg, var(--bg), transparent); }
.marqueeTrack{
  display:flex; align-items:center; gap:22px; white-space:nowrap; width:max-content;
  animation: marqueeScroll 26s linear infinite;
}
.marqueeTrack span{
  font-family:var(--display); font-weight:700; font-size:clamp(20px,2.6vw,30px);
  letter-spacing:-.5px; color:var(--dim);
}
.marqueeTrack span:nth-child(2n){ color:var(--line); font-weight:400; }
@keyframes marqueeScroll{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
.refWall{
  width:100vw; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw);
  border-top:1px solid var(--line);
  padding:90px 0 100px;
}
.refWallHead{
  padding:0 6vw; display:flex; align-items:flex-end; justify-content:space-between;
  flex-wrap:wrap; gap:16px; margin-bottom:48px;
}
.refWallAll{ font-size:11px; letter-spacing:2px; text-transform:uppercase; color:var(--dim); border-bottom:1px solid var(--dim); padding-bottom:2px; transition: color .2s ease, border-color .2s ease; }
.refWallAll:hover{ color:var(--fg); border-color:var(--fg); }
.refWall{
  width:100vw; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw);
  border-top:1px solid var(--line);
  padding:90px 0 100px;
}

#refWall{
  display:grid; grid-template-columns:repeat(12, 1fr);
  grid-auto-rows:440px; grid-auto-flow:dense;
  gap:2px; background:var(--line);
}
.refRow{ display:contents; }
.col-lg-6{ grid-column:span 6; }
.col-lg-3{ grid-column:span 3; }

@media(max-width:900px){
  #refWall{
    grid-template-columns:repeat(6, 1fr);
    grid-auto-rows:340px;
  }
  #refWall .col-lg-6{ grid-column:span 6; }
  #refWall .col-lg-3{ grid-column:span 3; }
}

@media(max-width:600px){
  #refWall{
    grid-template-columns:1fr;
    grid-auto-rows:300px;
  }
  #refWall .col-lg-6,
  #refWall .col-lg-3{
    grid-column:1/2;
  }
}
.refItem{
  position:relative; overflow:hidden; background:#101010;
  opacity:0; transform:translateY(24px);
}
.refItem.play{ animation: refIn .6s cubic-bezier(.16,.8,.2,1) forwards; }
@keyframes refIn{ to{ opacity:1; transform:translateY(0); } }
.refItem .wShot, .refItem video, .refItem img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transition: transform .7s cubic-bezier(.16,.8,.2,1);
}
.refItem:hover .wShot, .refItem:hover video, .refItem:hover img{ transform:scale(1.06); }
.refScrim{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(180deg, rgba(0,0,0,0) 35%, rgba(0,0,0,.82) 100%);
}
.refPlayIcon{
  position:absolute; top:18px; right:18px; z-index:2;
  width:34px; height:34px; border-radius:50%;
  background:rgba(0,0,0,.5); border:1px solid rgba(255,255,255,.25);
  display:flex; align-items:center; justify-content:center;
  font-size:12px; color:var(--fg);
  transition:opacity .25s ease;
}
.refItem[data-type="video"]:hover .refPlayIcon{ opacity:0; }
.refCaption{
    display:none !important;
    position:absolute; 
    left:26px; 
    right:26px; 
    bottom:22px; 
    z-index:2;
}
.refCaption .rTag{
  font-family:var(--mono); font-size:10.5px; letter-spacing:1.5px; text-transform:uppercase;
  color:var(--code); margin-bottom:8px; display:block;
}
.refItem[data-type="video"] .rTag{ color:#b892f2; }
.refItem[data-type="print"] .rTag{ color:#e0c34a; }
.refCaption h3{
  font-family:var(--display); font-weight:800; letter-spacing:-.5px;
  font-size:clamp(20px, 2.2vw, 30px); color:var(--fg);
  text-shadow:0 2px 12px rgba(0,0,0,.6);
}
.refCaption p{
  font-size:12.5px; color:#dcdcdc; margin-top:6px; max-width:34ch;
  text-shadow:0 2px 10px rgba(0,0,0,.6);
}
.closingCta .medallion{
  width:auto; height:auto;
  border-radius:16px;
  padding:20px 28px;      /* padding'i büyüttüm */
  flex-direction:column; gap:4px;
  font-size:17px; letter-spacing:.5px;
  line-height:1.1;
}
.medallionSub{
  font-family:var(--mono); font-weight:400; font-size:10px;
  letter-spacing:3px; color:var(--dim);
}
.closingCta{
  position:relative;
  min-height:120vh;
  padding: 100px 6vw 80px;
  border-top:1px solid var(--line);
  text-align:center;
  overflow:hidden;
  display:flex; flex-direction:column; justify-content:space-between; align-items:center;
  background-image:
    url('footer.jpeg');
  background-size:cover;
  background-position:center;
}
.closingCta .quoteMark{
  font-family:var(--display); font-size:70px; color:var(--fg); opacity:.65; line-height:.4; margin-bottom:14px;
}
.closingCta .quote{
  max-width:720px; margin:0 auto 10vh; font-size:22px; line-height:1.75; color:#f0f0f0;
  text-shadow:0 2px 16px rgba(0,0,0,.6);
}
.closingCta .ctaBottom{
  display:flex; flex-direction:column; align-items:center; gap:0;
}
.closingCta h2{
  font-family: var(--display); font-weight:900;
  font-size:clamp(36px, 6.8vw, 78px); line-height:1.05; letter-spacing:-2px;
  color:var(--fg); text-shadow:0 3px 20px rgba(0,0,0,.7);
}
.closingCta .ctaBtn{
  display:inline-flex; align-items:center; gap:10px;
  margin:26px 0; padding:18px 44px;
  border:1px solid var(--signal); border-radius:50px;
  font-family:'Times New Roman', serif; font-size:28px; letter-spacing:0; text-transform:none;
  color:var(--fg); position:relative; overflow:hidden; z-index:1; background:none;
}
.closingCta .ctaBtn::before{
  content:''; position:absolute; inset:0; background:var(--signal);
  transform:translateY(101%); transition:transform .3s cubic-bezier(.7,0,.2,1); z-index:-1;
}
.closingCta .ctaBtn:hover::before{ transform:translateY(0); }
.closingCta .ctaContacts{
  width:100%;
  margin-top:50px; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:14px;
  font-size:14px; letter-spacing:1px; color:#e6e6e6; text-transform:none;
}
.closingCta .ctaContacts a{ color:var(--fg); }
.closingCta .ctaContacts .priv{ color:#cfcfcf; }
@media(max-width:600px){
  .closingCta{ padding:80px 6vw 50px; min-height:130vh; }
  .closingCta .quote{ margin-bottom:14vh; font-size:17px; }
  .closingCta .ctaBtn{ font-size:22px; padding:15px 32px; }
  .closingCta .ctaContacts{ font-size:12px; }
}
#gpOverlay{
  position:fixed; inset:0; z-index:200;
  display:flex; align-items:center; justify-content:center;
  background:rgba(4,4,6,0);
  pointer-events:none;
  transition: background .5s ease;
}
#gpOverlay.active{
  background:rgba(4,4,6,.82);
  pointer-events:auto;
}
#gpNoise{
  position:fixed; inset:0; z-index:201;
  opacity:0; pointer-events:none;
  background-image:
    repeating-linear-gradient(0deg, rgba(255,255,255,.06) 0px, rgba(255,255,255,.06) 1px, transparent 1px, transparent 3px),
    repeating-linear-gradient(90deg, rgba(255,0,60,.08), rgba(0,255,200,.08) 2px, transparent 2px, transparent 5px);
  mix-blend-mode:overlay;
}
#gpOverlay.creeping{
  animation: gpCreepDim 4.2s ease-in forwards;
}
#gpOverlay.creeping #gpNoise{
  animation: gpCreepNoise 4.2s cubic-bezier(.4,0,.6,1) forwards;
}
@keyframes gpCreepDim{
  0%{ background:rgba(4,4,6,0); }
  100%{ background:rgba(4,4,6,.3); }
}
@keyframes gpCreepNoise{
  0%{ opacity:.02; transform:translate(0,0); }
  8%{ opacity:.08; transform:translate(-1px,1px); }
  16%{ opacity:.02; transform:translate(0,0); }
  24%{ opacity:.13; transform:translate(1px,-1px); }
  32%{ opacity:.03; transform:translate(0,0); }
  40%{ opacity:.2; transform:translate(-2px,1px); }
  48%{ opacity:.04; transform:translate(0,0); }
  56%{ opacity:.28; transform:translate(2px,-2px); }
  64%{ opacity:.07; transform:translate(0,0); }
  72%{ opacity:.38; transform:translate(-2px,2px); }
  80%{ opacity:.1; transform:translate(0,0); }
  88%{ opacity:.5; transform:translate(3px,-1px); }
  94%{ opacity:.18; transform:translate(0,0); }
  100%{ opacity:.65; transform:translate(-3px,2px); }
}
body.gpMicroShake{
  animation: gpMicroShake 4.2s ease-in-out 1;
}
@keyframes gpMicroShake{
  0%,10%{ transform:translate(0,0); }
  35%{ transform:translate(-1px,0); }
  45%{ transform:translate(1px,0); }
  60%{ transform:translate(0,0); }
  75%{ transform:translate(-2px,1px); }
  85%{ transform:translate(2px,-1px); }
  93%{ transform:translate(-2px,0); }
  100%{ transform:translate(0,0); }
}
#gpOverlay.glitching #gpNoise{
  animation: gpNoiseFlicker .5s steps(2,end) 1;
}
@keyframes gpNoiseFlicker{
  0%{ opacity:0; transform:translate(0,0); }
  10%{ opacity:.9; transform:translate(-6px,2px); }
  20%{ opacity:.2; transform:translate(4px,-3px); }
  32%{ opacity:.85; transform:translate(-3px,0); }
  45%{ opacity:.1; transform:translate(5px,3px); }
  60%{ opacity:.7; transform:translate(-2px,-2px); }
  75%{ opacity:.15; transform:translate(3px,1px); }
  100%{ opacity:0; transform:translate(0,0); }
}
#gpOverlay.glitching ~ body,
body.gpShake{
  animation: gpShake .45s ease 1;
}
@keyframes gpShake{
  0%,100%{ transform:translate(0,0); }
  20%{ transform:translate(-3px,2px); }
  40%{ transform:translate(3px,-2px); }
  60%{ transform:translate(-2px,-1px); }
  80%{ transform:translate(2px,2px); }
}
#gpPanel{
  position:relative; z-index:202;
  width:min(560px, 88vw);
  background:#0c0c0c;
  border:1px solid rgba(255,255,255,.1);
  padding:52px 44px 40px;
  box-shadow:0 30px 80px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.03);
  clip-path: polygon(
    0% 50%, 8% 50%, 16% 50%, 24% 50%, 32% 50%, 40% 50%, 48% 50%, 56% 50%, 64% 50%, 72% 50%, 80% 50%, 88% 50%, 96% 50%, 100% 50%,
    100% 50%, 92% 50%, 84% 50%, 76% 50%, 68% 50%, 60% 50%, 52% 50%, 44% 50%, 36% 50%, 28% 50%, 20% 50%, 12% 50%, 4% 50%, 0% 50%
  );
  opacity:0;
  transition: clip-path .55s cubic-bezier(.65,0,.35,1) .32s, opacity .1s ease .32s, transform .5s cubic-bezier(.34,1.56,.64,1) .32s;
  transform:scale(.94);
}
#gpOverlay.active #gpPanel{
  opacity:1;
  transform:scale(1);
  clip-path: polygon(
    0% 6%, 8% 2%, 16% 7%, 24% 1%, 32% 5%, 40% 0%, 48% 4%, 56% 1%, 64% 6%, 72% 2%, 80% 5%, 88% 1%, 96% 4%, 100% 2%,
    100% 96%, 92% 100%, 84% 95%, 76% 99%, 68% 94%, 60% 100%, 52% 96%, 44% 99%, 36% 95%, 28% 100%, 20% 96%, 12% 99%, 4% 95%, 0% 98%
  );
}
#gpPanel::before{
  content:''; position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(94,230,163,.05), transparent 40%),
    linear-gradient(0deg, rgba(192,57,43,.06), transparent 40%);
  pointer-events:none;
}
#gpClose{
  position:absolute; top:18px; right:20px; z-index:2;
  background:none; border:none; color:var(--dim);
  font-family:var(--mono); font-size:20px; line-height:1; cursor:pointer;
  transition: color .2s ease;
}
#gpClose:hover{ color:var(--fg); }
#gpKicker{
  position:relative; z-index:1;
  display:flex; align-items:center; gap:8px;
  font-family:var(--mono); font-size:11px; letter-spacing:2.5px; text-transform:uppercase;
  color:var(--signal); margin-bottom:18px;
}
#gpKicker .dot{
  width:6px; height:6px; border-radius:50%; background:var(--signal);
  box-shadow:0 0 8px var(--signal);
  animation: pulse 1.4s ease-in-out infinite;
}
#gpPanel h3{
  position:relative; z-index:1;
  font-family:var(--display); font-weight:900;
  font-size:clamp(26px, 4vw, 38px); letter-spacing:-1px; line-height:1.08;
  color:var(--fg);
}
#gpPanel h3 .accentWord{ color:var(--code); }
#gpPanel p{
  position:relative; z-index:1;
  margin-top:14px; font-size:13.5px; line-height:1.75; color:#bdbdbd; max-width:44ch;
}
#gpActions{
  position:relative; z-index:1;
  display:flex; align-items:center; gap:22px; margin-top:30px; flex-wrap:wrap;
}
#gpCta{
  display:inline-flex; align-items:center; gap:10px;
  padding:14px 30px; border:1px solid var(--signal); border-radius:50px;
  font-family:var(--mono); font-size:12px; letter-spacing:1.5px; text-transform:uppercase;
  color:var(--fg); position:relative; overflow:hidden; z-index:1; background:none;
  transition: color .3s ease;
}
#gpCta::before{
  content:''; position:absolute; inset:0; background:var(--signal);
  transform:translateY(101%); transition:transform .3s cubic-bezier(.7,0,.2,1); z-index:-1;
}
#gpCta:hover::before{ transform:translateY(0); }
#gpCta:hover{ color:#0a0a0a; }
#gpDismiss{
  font-family:var(--mono); font-size:11px; letter-spacing:1px; color:var(--dim);
  text-decoration:underline; text-underline-offset:3px; cursor:pointer; background:none; border:none;
  transition: color .2s ease;
}
#gpDismiss:hover{ color:var(--fg); }
@media(max-width:600px){
  #gpPanel{ padding:44px 26px 32px; }
}

/* ================= İLETİŞİM SAYFASI ================= */
.contactMain{ padding:140px 6vw 80px; max-width:900px; margin:0 auto; }
.pageTitle{ font-family:var(--display); font-weight:900; font-size:clamp(38px,7vw,80px); letter-spacing:-2px; margin-bottom:20px; }
.pageIntro{ max-width:520px; color:#bdbdbd; font-size:14px; line-height:1.7; margin-bottom:60px; }
.direct{ display:flex; gap:40px; flex-wrap:wrap; margin-bottom:60px; }
.direct div span{ display:block; }
.direct .k{ font-size:10px; letter-spacing:2px; color:var(--dim); text-transform:uppercase; margin-bottom:6px; }
.direct .v{ font-family:var(--display); font-weight:600; font-size:18px; }
#contactForm{ border-top:1px solid var(--line); padding-top:40px; display:flex; flex-direction:column; gap:26px; max-width:560px; }
#contactForm .field label{ display:block; font-size:10px; letter-spacing:2px; color:var(--dim); text-transform:uppercase; margin-bottom:8px; }
#contactForm .field input, #contactForm .field textarea{
  width:100%; background:none; border:none; border-bottom:1px solid var(--line);
  color:var(--fg); font-family:var(--mono); font-size:15px; padding:8px 0;
  outline:none; transition:border-color .2s ease;
}
#contactForm .field input:focus, #contactForm .field textarea:focus{ border-color:var(--code); }
#contactForm .field textarea{ resize:vertical; min-height:80px; }
#contactForm button[type=submit]{
  align-self:flex-start; background:var(--fg); color:#0a0a0a; border:none;
  font-family:var(--mono); font-weight:700; letter-spacing:1.5px; text-transform:uppercase;
  font-size:12px; padding:14px 28px; cursor:pointer; transition:background .2s ease;
}
#contactForm button[type=submit]:hover{ background:var(--code); }

/* ================= REFERANSLAR SAYFASI ================= */
.refPageHead{ padding:150px 6vw 60px; max-width:900px; }
.refPageHead .pageTitle{
  font-family:var(--display); font-weight:900; font-size:clamp(38px,7vw,80px);
  letter-spacing:-2px; margin-bottom:20px;
}
.refPageHead .pageIntro{ max-width:560px; color:#bdbdbd; font-size:14px; line-height:1.7; }

.refFilters{ display:flex; flex-wrap:wrap; gap:12px; padding:0 6vw; margin-bottom:48px; }
.refFilterBtn{
  display:flex; align-items:center; gap:10px;
  font-family:var(--mono); font-size:12px; letter-spacing:1.5px; text-transform:uppercase;
  color:var(--dim); background:none; border:1px solid var(--line);
  padding:13px 22px; cursor:pointer;
  transition: color .2s ease, border-color .2s ease, background .2s ease;
}
.refFilterBtn .rfDot{ width:7px; height:7px; border-radius:50%; background:currentColor; opacity:.6; }
.refFilterBtn:hover{ color:var(--fg); border-color:var(--fg); }
.refFilterBtn.active{ color:#0a0a0a; }
.refFilterBtn.active .rfDot{ opacity:1; box-shadow:0 0 8px currentColor; }
.refFilterBtn[data-filter="web"].active{ background:var(--code); border-color:var(--code); }
.refFilterBtn[data-filter="video"].active{ background:#b892f2; border-color:#b892f2; }
.refFilterBtn[data-filter="print"].active{ background:#e0c34a; border-color:#e0c34a; }
.refFilterBtn[data-filter="all"].active{ background:var(--fg); border-color:var(--fg); }

.refItem.refFilterHidden{ display:none; }

@media(max-width:600px){
  .refPageHead{ padding:120px 6vw 40px; }
}

/* ================= HİZMETLER SAYFASI ================= */
.hizPageHead{ padding:150px 6vw 60px; max-width:900px; }
.hizPageHead .pageTitle{
  font-family:var(--display); font-weight:900; font-size:clamp(38px,7vw,80px);
  letter-spacing:-2px; margin-bottom:20px;
}
.hizPageHead .pageIntro{ max-width:560px; color:#bdbdbd; font-size:14px; line-height:1.7; }

.hizGroupLabel{
  padding:0 6vw; margin:64px 0 18px;
  display:flex; align-items:center; gap:12px;
}
.hizGroupLabel .num{
  font-family:var(--display); font-weight:900; font-size:13px;
  color:#0a0a0a; width:26px; height:26px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
}
.hizGroupLabel[data-group="yazilim"] .num{ background:var(--code); }
.hizGroupLabel[data-group="sosyal"] .num{ background:#b892f2; }
.hizGroupLabel[data-group="basili"] .num{ background:#e0c34a; }
.hizGroupLabel span.name{
  font-family:var(--mono); font-size:11px; letter-spacing:2px; text-transform:uppercase; color:var(--dim);
}
.hizWrap{ padding:0 6vw 40px; }
.hizWrap:last-of-type{ padding-bottom:100px; }

/* Bu sayfada hero artık link değil, disiplin başlığı — hover-invert'i kapatalım */
.hizWrap .bentoHero{ pointer-events:none; }
.hizWrap .bentoHero::before{ display:none; }

@media(max-width:600px){
  .hizPageHead{ padding:120px 6vw 40px; }
}

/* ================= HİZMET DETAY SAYFASI ================= */
.hdBack{
  display:inline-flex; align-items:center; gap:8px;
  position:relative; margin:150px 6vw 0;
  font-family:var(--mono); font-size:11px; letter-spacing:1.5px; text-transform:uppercase;
  color:var(--dim); transition:color .2s ease;
}
.hdBack:hover{ color:var(--fg); }

.hdHead{ padding:60px 6vw 50px; max-width:900px; }
.hdHead .hdKicker{
  display:flex; align-items:center; gap:8px;
  font-family:var(--mono); font-size:11px; letter-spacing:2.5px; text-transform:uppercase;
  margin-bottom:18px;
}
.hdHead .hdKicker .dot{ width:7px; height:7px; border-radius:50%; box-shadow:0 0 8px currentColor; }
.hdHead h1{
  font-family:var(--display); font-weight:900; font-size:clamp(34px,6vw,66px);
  letter-spacing:-2px; line-height:1.02; margin-bottom:20px;
}
.hdHead .hdDesc{ max-width:560px; color:#bdbdbd; font-size:14px; line-height:1.75; }

.hdFeatures{
  padding:0 6vw 70px;
  display:grid; grid-template-columns:repeat(3,1fr); gap:1px;
  background:var(--line); border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  margin:0 6vw 70px; width:calc(100% - 12vw);
}
.hdFeatures div{ background:var(--bg); padding:26px 24px; }
.hdFeatures .fNum{ font-size:11px; letter-spacing:2px; color:var(--dim); }
.hdFeatures h4{ font-family:var(--display); font-weight:600; font-size:16px; margin-top:12px; }
.hdFeatures p{ font-size:12.5px; color:#a8a8a8; line-height:1.55; margin-top:8px; }

.hdRefsHead{ padding:0 6vw; margin-bottom:32px; }
.hdRefsHead .sectionLabel{ margin-bottom:0; }

.hdCta{
  margin:90px 6vw 100px; padding:50px 6vw; border-top:1px solid var(--line);
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:24px;
}
.hdCta h3{ font-family:var(--display); font-weight:800; font-size:clamp(22px,3vw,32px); letter-spacing:-1px; }
.hdCta a{
  display:inline-flex; align-items:center; gap:10px;
  padding:16px 34px; border:1px solid var(--signal); border-radius:50px;
  font-family:var(--mono); font-size:12px; letter-spacing:1.5px; text-transform:uppercase;
  color:var(--fg); position:relative; overflow:hidden; z-index:1; background:none;
  transition: color .3s ease;
}
.hdCta a::before{
  content:''; position:absolute; inset:0; background:var(--signal);
  transform:translateY(101%); transition:transform .3s cubic-bezier(.7,0,.2,1); z-index:-1;
}
.hdCta a:hover::before{ transform:translateY(0); }
.hdCta a:hover{ color:#0a0a0a; }

/* referans kartları burada 3'lü (col-lg-4) düzende — refWall'un 12'lik sistemine ek küçük bir yardımcı */
.col-lg-4{ grid-column:span 4; }

@media(max-width:900px){
  .col-lg-4{ grid-column:span 3; }
}
@media(max-width:700px){
  .hdBack{ margin:120px 6vw 0; }
  .hdFeatures{ grid-template-columns:1fr; }
}
@media(max-width:600px){
  .col-lg-4{ grid-column:1/2; }
}
/* ================= BU BLOĞU style.css DOSYASININ EN SONUNA EKLEYİN ================= */

/* ---- Blog Listesi (Blog.php) ---- */
.blogHead{ padding:150px 6vw 60px; max-width:900px; }
.blogHead .pageTitle{
  font-family:var(--display); font-weight:900; font-size:clamp(38px,7vw,80px);
  letter-spacing:-2px; margin-bottom:20px;
}
.blogHead .pageIntro{ max-width:560px; color:#bdbdbd; font-size:14px; line-height:1.7; }

.blogFilters{ display:flex; flex-wrap:wrap; gap:12px; padding:0 6vw; margin-bottom:48px; }
.blogFilterBtn{
  display:flex; align-items:center; gap:10px;
  font-family:var(--mono); font-size:12px; letter-spacing:1.5px; text-transform:uppercase;
  color:var(--dim); background:none; border:1px solid var(--line);
  padding:13px 22px; cursor:pointer;
  transition: color .2s ease, border-color .2s ease, background .2s ease;
}
.blogFilterBtn .bfDot{ width:7px; height:7px; border-radius:50%; background:currentColor; opacity:.6; }
.blogFilterBtn:hover{ color:var(--fg); border-color:var(--fg); }
.blogFilterBtn.active{ color:#0a0a0a; }
.blogFilterBtn.active .bfDot{ opacity:1; box-shadow:0 0 8px currentColor; }
.blogFilterBtn[data-filter="yazilim"].active{ background:var(--code); border-color:var(--code); }
.blogFilterBtn[data-filter="sosyal"].active{ background:#b892f2; border-color:#b892f2; }
.blogFilterBtn[data-filter="basili"].active{ background:#e0c34a; border-color:#e0c34a; }
.blogFilterBtn[data-filter="all"].active{ background:var(--fg); border-color:var(--fg); }
.blogGrid{
  display:grid; grid-template-columns:repeat(3, 1fr);
  gap:1px; background:var(--line); border:1px solid var(--line);
  margin:0 6vw 100px; width:calc(100% - 12vw);
}
.blogCard{
  position:relative; background:var(--bg); overflow:hidden;
  display:flex; flex-direction:column; min-height:260px;
  opacity:1; transform:none;
  padding:15px;
}
.blogCard.play{ animation: bentoIn .55s cubic-bezier(.16,.8,.2,1) forwards; }
.blogCard.blogHidden{ display:none; }
.blogCard .bcBody{
  padding:32px 28px 28px; display:flex; flex-direction:column; flex:1;
  justify-content:space-between;
}
.blogCard .bcTag{
  font-family:var(--mono); font-size:10.5px; letter-spacing:1.5px; text-transform:uppercase;
  margin-bottom:16px; display:flex; align-items:center; gap:8px;
}
.blogCard .bcTag .dot{ width:6px; height:6px; border-radius:50%; box-shadow:0 0 8px currentColor; }
.blogCard[data-group="yazilim"] .bcTag{ color:var(--code); }
.blogCard[data-group="sosyal"] .bcTag{ color:#b892f2; }
.blogCard[data-group="basili"] .bcTag{ color:#e0c34a; }
.blogCard h3{
  font-family:var(--display); font-weight:700; font-size:20px; line-height:1.28;
  letter-spacing:-.4px; margin-bottom:12px;
}
.blogCard p{ font-size:12.5px; color:#a8a8a8; line-height:1.6; flex:1; }
.blogCard .bcMeta{
  display:flex; justify-content:flex-end; align-items:center;
  margin-top:20px; padding-top:14px; border-top:1px solid var(--line);
  font-size:10.5px; letter-spacing:1.2px; color:var(--dim); text-transform:uppercase;
}
.blogCard .bcGo{ color:var(--fg); }
.blogCard::before{
  content:''; position:absolute; inset:0; background:var(--fg);
  transform:translateY(101%); transition:transform .35s cubic-bezier(.7,0,.2,1); z-index:0;
  pointer-events:none;
}
.blogCard .bcBody > *{ position:relative; z-index:1; transition:color .35s ease; }
@media(max-width:900px){
  .blogGrid{ grid-template-columns:repeat(2,1fr); }
}
@media(max-width:600px){
  .blogHead{ padding:120px 6vw 40px; }
  .blogGrid{ grid-template-columns:1fr; }
}
/* ---- Blog Detay (Blogdetay.php) ---- */
.bdBack{
  display:inline-flex; align-items:center; gap:8px;
  position:relative; margin:150px 6vw 0;
  font-family:var(--mono); font-size:11px; letter-spacing:1.5px; text-transform:uppercase;
  color:var(--dim); transition:color .2s ease;
}
.bdBack:hover{ color:var(--fg); }

.bdHead{ padding:26px 6vw 40px; max-width:820px; }
.bdHead .bdKicker{
  display:flex; align-items:center; gap:8px;
  font-family:var(--mono); font-size:11px; letter-spacing:2.5px; text-transform:uppercase;
  margin-bottom:18px;
}
.bdHead .bdKicker .dot{ width:7px; height:7px; border-radius:50%; box-shadow:0 0 8px currentColor; }
.bdHead h1{
  font-family:var(--display); font-weight:900; font-size:clamp(32px,5.6vw,58px);
  letter-spacing:-2px; line-height:1.05; margin-bottom:20px;
}
.bdMeta{
  display:flex; gap:24px; flex-wrap:wrap;
  font-size:11px; letter-spacing:1.5px; color:var(--dim); text-transform:uppercase;
  padding-bottom:24px; border-bottom:1px solid var(--line);
}

.bdCover{
  margin:0 6vw 60px; width:calc(100% - 12vw);
  height:min(56vw, 480px); overflow:hidden; position:relative;
  background:linear-gradient(160deg, #1b1b1b, #0c0c0c);
}
.bdCover img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }

.bdBody{
  padding:0 6vw 80px; max-width:950px; 
  font-size:15px; line-height:1.9; color:#d6d6d6;
}
.bdBody p{ margin-bottom:22px; }
.bdBody h2{
  font-family:var(--display); font-weight:700; font-size:28px; letter-spacing:-.5px;
  color:var(--fg); margin:44px 0 18px;
}
.bdBody blockquote{
  border-left:2px solid var(--code); padding:4px 0 4px 24px; margin:32px 0;
  font-family:var(--display); font-weight:600; font-size:19px; color:var(--fg);
}

.bdTags{ display:flex; gap:10px; flex-wrap:wrap; margin-top:20px; }
.bdTags span{
  font-size:10.5px; letter-spacing:1.5px; text-transform:uppercase; color:var(--dim);
  border:1px solid var(--line); padding:6px 14px;
}

.bdShare{
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px;
  max-width:760px; margin:0 auto; padding:32px 6vw 0;
  border-top:1px solid var(--line);
}
.bdShare .label{ font-size:11px; letter-spacing:2px; color:var(--dim); text-transform:uppercase; }
.bdShare .links{ display:flex; gap:16px; }
.bdShare .links a{
  font-size:11px; letter-spacing:1.5px; text-transform:uppercase; color:var(--fg);
  border-bottom:1px solid var(--line); padding-bottom:2px; transition:border-color .2s ease, color .2s ease;
}
.bdShare .links a:hover{ color:var(--code); border-color:var(--code); }

.bdRelated{ padding:90px 6vw 0; }
.bdRelated .sectionLabel{ padding:0 0 4px; margin-bottom:0; }
.bdRelHead{ margin-bottom:32px; }
.bdClosingCta{ margin-top:100px; }

@media(max-width:700px){
  .bdBack{ margin:120px 6vw 0; }
}

/* ---- 404 Sayfası (404.php) ---- */
.notFoundStage{
  position:relative; min-height:100vh; display:flex; flex-direction:column;
  align-items:center; justify-content:center; text-align:center;
  padding:6vw; overflow:hidden;
}
.notFoundStage .nfCode{
  position:absolute; inset:0; padding:24px;
  font-family:var(--mono); font-size:14px; line-height:1.7; color:var(--dim);
  opacity:.18; white-space:pre; pointer-events:none; z-index:0;
}
.nfKicker{
  position:relative; z-index:1;
  display:flex; align-items:center; gap:8px;
  font-family:var(--mono); font-size:11px; letter-spacing:3px; text-transform:uppercase;
  color:var(--signal); margin-bottom:24px;
}
.nfKicker .dot{
  width:7px; height:7px; border-radius:50%; background:var(--signal);
  box-shadow:0 0 8px var(--signal); animation:pulse 1.4s ease-in-out infinite;
}
.nfNum{
  position:relative; z-index:1;
  font-family:var(--display); font-weight:900;
  font-size:clamp(120px, 22vw, 280px); line-height:.85; letter-spacing:-6px;
  color:var(--fg);
}
.nfNum span{ display:inline-block; animation:nfGlitch 3.2s steps(2,end) infinite; }
.nfNum span:nth-child(2){ color:var(--signal); animation-delay:.15s; }
.nfNum span:nth-child(3){ color:var(--code); animation-delay:.3s; }
@keyframes nfGlitch{
  0%,88%{ transform:translate(0,0); opacity:1; }
  89%{ transform:translate(-3px,2px); opacity:.7; }
  90%{ transform:translate(3px,-2px); opacity:1; }
  91%{ transform:translate(0,0); }
  100%{ transform:translate(0,0); }
}
.nfText{
  position:relative; z-index:1;
  font-family:var(--display); font-weight:700; font-size:clamp(20px, 3vw, 30px);
  letter-spacing:-.5px; margin-top:12px; color:var(--fg);
}
.nfDesc{
  position:relative; z-index:1;
  max-width:440px; margin:16px auto 0; color:#bdbdbd; font-size:13.5px; line-height:1.7;
}
.nfTerminal{
  position:relative; z-index:1; margin-top:28px;
  font-family:var(--mono); font-size:12px; letter-spacing:1.5px; color:var(--dim); text-transform:uppercase;
  min-height:18px;
}
.nfTerminal .cursor{
  display:inline-block; width:8px; height:14px; background:var(--fg); margin-left:4px;
  vertical-align:middle; animation:blink 1s steps(1) infinite;
}
.nfActions{
  position:relative; z-index:1; display:flex; gap:16px; margin-top:40px; flex-wrap:wrap;
  justify-content:center;
}
.nfBtn{
  display:inline-flex; align-items:center; gap:10px;
  padding:16px 34px; border-radius:50px;
  font-family:var(--mono); font-size:12px; letter-spacing:1.5px; text-transform:uppercase;
  position:relative; overflow:hidden; z-index:1; background:none;
  transition:color .3s ease;
}
.nfBtn.primary{ border:1px solid var(--signal); color:var(--fg); }
.nfBtn.primary::before{
  content:''; position:absolute; inset:0; background:var(--signal);
  transform:translateY(101%); transition:transform .3s cubic-bezier(.7,0,.2,1); z-index:-1;
}
.nfBtn.primary:hover::before{ transform:translateY(0); }
.nfBtn.primary:hover{ color:#0a0a0a; }
.nfBtn.ghost{ border:1px solid var(--line); color:var(--dim); }
.nfBtn.ghost:hover{ color:var(--fg); border-color:var(--fg); }

@media(max-width:600px){
  .nfNum{ letter-spacing:-3px; }
}
/* ================= SAYFA BAŞLIĞI IŞIK HÜZMESİ (pageGlow) ================= */
.pageGlow{
  position:absolute;
  top:150px; right:0;
  width:min(40vw, 560px); height:min(40vw, 560px);
  transform:translate(30%,-20%);
  --glow: var(--code);
  background: radial-gradient(circle,
    color-mix(in srgb, var(--glow) 24%, transparent) 0%,
    color-mix(in srgb, var(--glow) 9%, transparent) 32%,
    transparent 68%
  );
  filter: blur(50px);
  pointer-events:none;
  z-index:0;
  animation: pageGlowDrift 14s ease-in-out infinite alternate;
}

@keyframes pageGlowDrift{
  0%{   transform:translate(30%,-20%) scale(1);    opacity:.8; }
  50%{  transform:translate(25%,-16%) scale(1.12); opacity:1; }
  100%{ transform:translate(33%,-24%) scale(.92);  opacity:.75; }
}

/* Renk varyantları — hangi disiplinse ona uygun aksan */
.pageGlow--code{   --glow: var(--code); }    /* yeşil — yazılım/hizmetler */
.pageGlow--purple{ --glow: #b892f2; }        /* mor — sosyal medya/referanslar */
.pageGlow--gold{   --glow: #e0c34a; }        /* sarı — basılı materyal */
.pageGlow--signal{ --glow: var(--signal); }  /* kırmızı — iletişim */

@media(max-width:700px){
  .pageGlow{
    width:60vw; height:60vw;
    transform:translate(35%,-20%);
    filter: blur(36px);
  }
}

@media (prefers-reduced-motion: reduce){
  .pageGlow{ animation:none; }
}
#topbar .logo{ font-family:var(--display); font-weight:900; font-size:13px; display:flex; align-items:center; }
.logoImg{
  height:37px;      /* topbar'ın 20px padding'ine göre orantılı, gerekirse ayarla */
  width:auto;
  display:block;
}