/* ===================================================================
   home.css — YALNIZCA ana sayfaya (index.html) özel görsel sistem.
   base.css'ten ÖNCE yüklenir ki responsive override'lar (base.css'te)
   buradaki temel kuralları doğru şekilde ezsin (orijinal cascade sırası).
   =================================================================== */

/* ---------- Hero ---------- */
#hero{
  position:relative;min-height:100vh;
  display:flex;align-items:center;
  background:
    radial-gradient(900px 500px at 82% 12%,rgba(8,106,216,.32),transparent 60%),
    radial-gradient(700px 500px at 8% 85%,rgba(56,189,248,.14),transparent 60%),
    linear-gradient(160deg,var(--navy-950) 0%,var(--navy-900) 45%,var(--navy-800) 100%);
  overflow:hidden;
  padding:calc(var(--nav-h) + 40px) 0 90px;
}
#net-canvas{position:absolute;inset:0;width:100%;height:100%;opacity:.65}
.aurora{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.aurora i{
  position:absolute;border-radius:50%;filter:blur(90px);
  will-change:transform;
}
.aurora i:nth-child(1){
  width:580px;height:580px;left:-150px;top:-130px;
  background:radial-gradient(circle,rgba(8,106,216,.5),transparent 66%);
  animation:aur-a 21s ease-in-out infinite alternate;
}
.aurora i:nth-child(2){
  width:500px;height:500px;right:-110px;top:6%;
  background:radial-gradient(circle,rgba(56,189,248,.34),transparent 66%);
  animation:aur-b 27s ease-in-out infinite alternate;
}
.aurora i:nth-child(3){
  width:540px;height:540px;left:28%;bottom:-220px;
  background:radial-gradient(circle,rgba(96,66,235,.42),transparent 66%);
  animation:aur-c 33s ease-in-out infinite alternate;
}
@keyframes aur-a{
  from{transform:translate(0,0) scale(1)}
  to{transform:translate(170px,130px) scale(1.28)}
}
@keyframes aur-b{
  from{transform:translate(0,0) scale(1.15)}
  to{transform:translate(-200px,150px) scale(.88)}
}
@keyframes aur-c{
  from{transform:translate(0,0) scale(1)}
  to{transform:translate(130px,-160px) scale(1.32)}
}
.hero-content{position:relative;z-index:2}
.hero-grid{
  display:grid;grid-template-columns:1.06fr .94fr;gap:56px;
  align-items:center;
}
.hero-left{max-width:620px}
.hero-badge{
  display:inline-flex;align-items:center;gap:9px;
  font-size:.82rem;font-weight:600;color:#a8d4ff;
  background:rgba(8,106,216,.16);border:1px solid rgba(47,155,255,.35);
  padding:8px 18px;border-radius:100px;margin-bottom:26px;
}
.hero-badge .dot{
  width:8px;height:8px;border-radius:50%;background:var(--cyan);
  animation:pulse-dot 2s infinite;
}
@keyframes pulse-dot{
  0%,100%{box-shadow:0 0 0 0 rgba(56,189,248,.6)}
  50%{box-shadow:0 0 0 7px rgba(56,189,248,0)}
}
#hero h1{
  font-size:clamp(2.3rem,5.4vw,4.1rem);font-weight:800;color:#fff;
  letter-spacing:-.02em;margin-bottom:14px;
}
#hero h1 .grad{
  background:linear-gradient(92deg,var(--blue-bright) 10%,var(--cyan) 50%,var(--blue-bright) 90%);
  background-size:200% auto;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:shimmer 5s linear infinite;
}
@keyframes shimmer{to{background-position:200% center}}
.hero-type{
  font-family:var(--font-head);
  font-size:clamp(1.15rem,2.6vw,1.7rem);font-weight:600;color:#dbe4ff;
  min-height:2.3em;margin-bottom:20px;
}
.hero-type .caret{
  display:inline-block;width:3px;height:1.05em;background:var(--cyan);
  vertical-align:text-bottom;margin-left:4px;border-radius:2px;
  animation:blink 1s step-end infinite;
}
@keyframes blink{50%{opacity:0}}
.hero-sub{
  font-size:1.06rem;color:#aab4dd;max-width:600px;margin-bottom:36px;
}
.hero-actions{display:flex;gap:16px;flex-wrap:wrap}

/* ---------- Hero 3D server visual ---------- */
.hero-visual{position:relative;max-width:460px;margin-left:auto;padding:0 0 96px}
.srv-scene{
  position:relative;height:440px;
  display:flex;align-items:center;justify-content:center;
  perspective:1400px;
}
.srv-stack{transform-style:preserve-3d;transform:rotateX(16deg) rotateY(-28deg)}
.srv{
  position:relative;width:320px;height:92px;
  transform-style:preserve-3d;margin-bottom:36px;
  animation:srv-float 5.5s ease-in-out infinite;
}
.srv:nth-child(1){animation-delay:0s}
.srv:nth-child(2){animation-delay:1.4s}
.srv:nth-child(3){animation-delay:2.8s;margin-bottom:0}
@keyframes srv-float{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-13px)}
}
.srv-face{position:absolute;border:1px solid rgba(255,255,255,.13)}
.srv-front{
  inset:0;transform:translateZ(30px);
  background:linear-gradient(180deg,#2a3169,#171d4b);
  border-radius:10px;
  display:flex;align-items:center;gap:14px;padding:0 18px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12);
}
.srv-top{
  width:320px;height:60px;left:0;top:50%;margin-top:-30px;
  transform:rotateX(90deg) translateZ(46px);
  background:linear-gradient(180deg,#3d4693,#2c3372);
  border-radius:10px 10px 0 0;
}
.srv-side{
  width:60px;height:92px;top:0;left:50%;margin-left:-30px;
  transform:rotateY(90deg) translateZ(160px);
  background:linear-gradient(180deg,#141949,#0d1136);
  border-radius:0 10px 10px 0;
}
.srv-label{
  font-family:ui-monospace,'SF Mono',Menlo,Consolas,monospace;
  font-size:.72rem;letter-spacing:.08em;color:#93a2dd;font-weight:600;
}
.srv-glow{
  position:absolute;bottom:12px;left:50%;transform:translateX(-50%);
  width:360px;height:110px;border-radius:50%;
  background:radial-gradient(ellipse,rgba(20,131,216,.45),transparent 70%);
  filter:blur(26px);
  animation:glow-pulse 4s ease-in-out infinite alternate;
}
@keyframes glow-pulse{from{opacity:.5}to{opacity:1}}
.grip{
  width:24px;height:16px;border-radius:3px;flex-shrink:0;
  background-image:radial-gradient(circle,rgba(255,255,255,.28) 1.1px,transparent 1.4px);
  background-size:6px 5.5px;
}
.leds{display:flex;gap:6px;flex-shrink:0;margin-left:auto}
.led{width:7px;height:7px;border-radius:50%;display:inline-block}
.led.g{background:#2ee6a8;box-shadow:0 0 7px rgba(46,230,168,.85);animation:led-blink 1.6s infinite}
.led.b{background:var(--blue-bright);box-shadow:0 0 7px rgba(58,155,238,.85);animation:led-blink 2.4s infinite .5s}
.led.a{background:#f6b500;box-shadow:0 0 7px rgba(246,181,0,.75);animation:led-blink 3.4s infinite 1.1s}
.srv:nth-child(even) .led.g{animation-duration:1.15s}
.srv:nth-child(3) .led.b{animation-duration:1.9s}
@keyframes led-blink{0%,100%{opacity:1}50%{opacity:.22}}
.act{display:flex;gap:3px;align-items:flex-end;height:17px;flex-shrink:0}
.act i{
  width:4px;height:100%;border-radius:2px;transform-origin:bottom;
  background:linear-gradient(180deg,var(--cyan),var(--blue));
  animation:eq 1.05s ease-in-out infinite alternate;
}
.act i:nth-child(1){animation-delay:0s}
.act i:nth-child(2){animation-delay:.25s;animation-duration:.85s}
.act i:nth-child(3){animation-delay:.5s;animation-duration:1.25s}
.act i:nth-child(4){animation-delay:.12s;animation-duration:.95s}
@keyframes eq{from{transform:scaleY(.3)}to{transform:scaleY(1)}}
.terminal{
  position:absolute;left:-34px;bottom:0;width:min(330px,94%);
  background:rgba(12,15,40,.72);
  backdrop-filter:blur(22px) saturate(160%);
  -webkit-backdrop-filter:blur(22px) saturate(160%);
  border:1px solid rgba(255,255,255,.17);
  border-radius:16px;overflow:hidden;
  box-shadow:0 26px 64px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.16);
}
.term-head{
  display:flex;align-items:center;gap:7px;
  padding:11px 15px;border-bottom:1px solid rgba(255,255,255,.09);
  font-family:ui-monospace,'SF Mono',Menlo,Consolas,monospace;
  font-size:.68rem;font-weight:600;letter-spacing:.05em;color:#8fa0d8;
}
.term-head i{width:10px;height:10px;border-radius:50%}
.term-head i.r{background:#ff5f57}
.term-head i.y{background:#febc2e}
.term-head i.gr{background:#28c840}
.term-head span{margin-left:6px}
.term-body{
  padding:13px 16px;min-height:170px;
  font-family:ui-monospace,'SF Mono',Menlo,Consolas,monospace;
  font-size:.72rem;line-height:1.75;color:#b7c3ef;
  white-space:pre-wrap;word-break:break-word;
}
.term-body .cmd{color:#7cc7ff}
.term-body .ok{color:#2ee6a8;font-weight:600}
.term-body .fin{color:var(--cyan);font-weight:600}
.term-caret{
  display:inline-block;width:7px;height:.95em;margin-left:2px;
  background:var(--cyan);vertical-align:text-bottom;border-radius:1px;
  animation:blink 1s step-end infinite;
}
.scroll-hint{
  position:absolute;left:50%;bottom:26px;transform:translateX(-50%);
  z-index:2;color:#8892c9;
  animation:hint-bob 2.2s ease-in-out infinite;
}
@keyframes hint-bob{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,9px)}}

/* ---------- Partner marquee ---------- */
#partners{background:var(--white);padding:34px 0;border-bottom:1px solid var(--card-border)}
.marquee-head{
  text-align:center;font-size:.8rem;font-weight:600;letter-spacing:.18em;
  color:var(--muted);text-transform:uppercase;margin-bottom:20px;
}
.marquee{
  overflow:hidden;position:relative;
  background:#fff;padding:24px 0;
}
.marquee-track{
  display:flex;width:max-content;
  animation:marquee 26s linear infinite;
}
.marquee:hover .marquee-track{animation-play-state:paused}
@keyframes marquee{to{transform:translateX(-50%)}}
.partner{
  flex-shrink:0;display:flex;align-items:center;justify-content:center;
  margin-right:58px;
}
.partner img{height:34px;width:auto;object-fit:contain;display:block;transition:opacity .3s}
.partner:hover img{opacity:.62}

/* Counters band (ana sayfa hakkımızda) */
.counters{
  margin-top:84px;
  display:grid;grid-template-columns:repeat(4,1fr);gap:18px;
}
.counter-card{
  background:#fff;border:1px solid var(--card-border);border-radius:20px;
  padding:34px 20px;text-align:center;position:relative;overflow:hidden;
  transition:transform .35s ease,box-shadow .35s ease;
}
.counter-card::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:3px;
  background:linear-gradient(90deg,var(--blue),var(--cyan));
  transform:scaleX(0);transform-origin:left;transition:transform .5s ease;
}
.counter-card:hover{transform:translateY(-7px);box-shadow:var(--shadow-md)}
.counter-card:hover::after{transform:scaleX(1)}
.counter-card .num{
  font-family:var(--font-head);font-size:2.6rem;font-weight:800;color:var(--navy);
}
.counter-card .num em{font-style:normal;color:var(--blue)}
.counter-card .lbl{color:var(--slate);font-weight:500;font-size:.92rem;margin-top:4px}

/* ---------- Solutions (tabs, dark) — ana sayfa çözüm sekmeleri ---------- */
#cozumler{
  background:
    radial-gradient(800px 400px at 15% 10%,rgba(8,106,216,.22),transparent 60%),
    radial-gradient(700px 500px at 90% 90%,rgba(56,189,248,.1),transparent 60%),
    linear-gradient(165deg,var(--navy-950),var(--navy-900) 60%,var(--navy-800));
  position:relative;overflow:hidden;overflow:clip;
}
.sol-layout{display:grid;grid-template-columns:330px 1fr;gap:34px;align-items:start}
.sol-tabs{display:flex;flex-direction:column;gap:10px;position:sticky;top:calc(var(--nav-h) + 20px)}
.sol-tab{
  display:flex;align-items:center;gap:14px;text-align:left;
  padding:17px 20px;border-radius:16px;color:#aab4dd;
  border:1px solid rgba(255,255,255,.09);
  background:rgba(255,255,255,.03);
  transition:background .3s,border-color .3s,color .3s,transform .3s;
  font-family:var(--font-head);font-weight:600;font-size:.98rem;
}
.sol-tab svg{width:24px;height:24px;flex-shrink:0;stroke:currentColor}
.sol-tab:hover{background:rgba(255,255,255,.07);color:#fff;transform:translateX(5px)}
.sol-tab.active{
  background:linear-gradient(120deg,rgba(8,106,216,.32),rgba(8,106,216,.1));
  border-color:rgba(47,155,255,.55);color:#fff;transform:translateX(5px);
}
.sol-tab-cta{
  justify-content:center;gap:9px;margin-top:4px;color:#fff;font-weight:700;
  background:linear-gradient(180deg,#1a86e0,#0a5fd0);
  border-color:rgba(255,255,255,.24);box-shadow:0 8px 22px rgba(10,95,208,.35);
}
.sol-tab-cta svg{width:19px;height:19px}
.sol-tab-cta:hover{background:linear-gradient(180deg,#2b93ea,#0b64dd);color:#fff;transform:none;filter:brightness(1.05)}
.sol-panel{
  background:rgba(255,255,255,.045);
  border:1px solid rgba(255,255,255,.11);
  border-radius:24px;padding:42px;
  backdrop-filter:blur(10px);
  min-height:430px;
}
.sol-content{display:none}
.sol-content.show{display:block;animation:panel-in .55s cubic-bezier(.2,.7,.3,1)}
@keyframes panel-in{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
.sol-content .tagline{
  display:inline-block;font-size:.8rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--cyan);background:rgba(56,189,248,.12);
  padding:6px 14px;border-radius:100px;margin-bottom:16px;
}
.sol-content h3{color:#fff;font-size:1.6rem;margin-bottom:12px}
.sol-content > p{color:#a9b3dc;margin-bottom:28px;max-width:640px}