/* ==========================================================
   KARŞILIKLI TAŞIN — Teknolojik slayt teması
   app.css'ten SONRA yüklenir; mevcut kodu değiştirmez.
   Kaldırmak için layouts/app.blade.php'deki satırı silmek yeter.
   ========================================================== */
:root{
  --tk-cyan:#22D3EE; --tk-cyan-2:#67E8F9;
  --tk-or:#FF7A33;   --tk-or-2:#FFB27A;
  --tk-gr:#4FCB8C;
  --tk-bg:#060D18;   --tk-bg-2:#0B1626;
  --tk-head:"Space Grotesk","Bricolage Grotesque",system-ui,sans-serif;
  --tk-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}

/* ---------- HERO: zemin ---------- */
.sl{background:var(--tk-bg);isolation:isolate}
.sl-a,.sl-b,.sl-c{background-color:var(--tk-bg)}
.sl-a{background-image:
  radial-gradient(700px 420px at 88% 18%,rgba(34,211,238,.28),transparent 62%),
  radial-gradient(600px 380px at 8% 100%,rgba(255,122,51,.20),transparent 65%),
  linear-gradient(135deg,#060D18 0%,#0C1B30 100%)}
.sl-b{background-image:
  radial-gradient(700px 420px at 90% 85%,rgba(255,122,51,.38),transparent 62%),
  radial-gradient(560px 360px at 6% 8%,rgba(34,211,238,.18),transparent 65%),
  linear-gradient(135deg,#0B1424 0%,#1E1410 100%)}
.sl-c{background-image:
  radial-gradient(700px 420px at 82% 25%,rgba(79,203,140,.26),transparent 62%),
  radial-gradient(560px 360px at 4% 95%,rgba(34,211,238,.18),transparent 65%),
  linear-gradient(135deg,#050E14 0%,#0A2230 100%)}

/* teknik ızgara + tarama çizgisi */
.sl-slide::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background-image:
    linear-gradient(rgba(103,232,249,.07) 1px,transparent 1px),
    linear-gradient(90deg,rgba(103,232,249,.07) 1px,transparent 1px);
  background-size:48px 48px;
  -webkit-mask-image:radial-gradient(ellipse 80% 90% at 70% 40%,#000 25%,transparent 78%);
          mask-image:radial-gradient(ellipse 80% 90% at 70% 40%,#000 25%,transparent 78%)}
.sl-slide::after{content:"";position:absolute;left:0;right:0;top:-30%;height:30%;pointer-events:none;z-index:0;
  background:linear-gradient(180deg,transparent,rgba(34,211,238,.07),transparent);opacity:0}
.sl-slide.on::after{opacity:1;animation:tk-tara 7s linear infinite}
@keyframes tk-tara{to{transform:translateY(480%)}}
.sl-in{position:relative;z-index:1}

/* ---------- Metinler ---------- */
.sl-pill{font-family:var(--tk-mono);font-size:12.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  padding:8px 14px;border-radius:4px;color:var(--tk-cyan-2);
  background:rgba(34,211,238,.08);border:1px solid rgba(34,211,238,.38);
  box-shadow:0 0 22px -6px rgba(34,211,238,.55),inset 0 0 0 1px rgba(255,255,255,.03)}
.sl-pill i,.sl-b .sl-pill i{width:8px;height:8px;border-radius:50%;background:var(--tk-cyan);
  box-shadow:0 0 0 3px rgba(34,211,238,.25),0 0 12px var(--tk-cyan);animation:tk-nabiz 1.8s ease-in-out infinite}
@keyframes tk-nabiz{50%{opacity:.35}}

.sl h1,.sl .sl-h{font-family:var(--tk-head);font-weight:700;letter-spacing:-.04em;line-height:1.02;
  background:linear-gradient(100deg,#fff 0%,#E6FBFF 45%,var(--tk-cyan-2) 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
  filter:drop-shadow(0 0 28px rgba(34,211,238,.22))}
.sl-b h2.sl-h{background-image:linear-gradient(100deg,#fff 0%,#FFF1E8 45%,var(--tk-or-2) 100%);
  filter:drop-shadow(0 0 28px rgba(255,122,51,.25))}
.sl-c h2.sl-h{background-image:linear-gradient(100deg,#fff 0%,#EAFFF4 45%,var(--tk-gr) 100%);
  filter:drop-shadow(0 0 28px rgba(79,203,140,.25))}
.sl-text p{color:rgba(226,238,250,.78);font-size:18px}
.sl-text p strong{color:var(--tk-cyan-2);font-weight:600}
.sl-b .sl-text p strong{color:var(--tk-or-2)}
.sl-c .sl-text p strong{color:var(--tk-gr)}

/* ---------- Buton ---------- */
.sl-btn{position:relative;font-family:var(--tk-head);font-weight:700;letter-spacing:.01em;color:#04141C;
  background:linear-gradient(135deg,var(--tk-cyan-2),var(--tk-cyan));border-radius:6px;
  box-shadow:0 0 0 1px rgba(255,255,255,.25) inset,0 10px 30px -8px rgba(34,211,238,.7);
  transition:transform .2s,box-shadow .2s}
.sl-btn:hover{background:linear-gradient(135deg,#A5F3FC,var(--tk-cyan));transform:translateY(-2px);
  box-shadow:0 0 0 1px rgba(255,255,255,.4) inset,0 16px 38px -8px rgba(34,211,238,.9)}
.sl-b .sl-btn{background:linear-gradient(135deg,var(--tk-or-2),var(--tk-or));box-shadow:0 10px 30px -8px rgba(255,122,51,.75)}
.sl-c .sl-btn{background:linear-gradient(135deg,#9CF0C6,var(--tk-gr));box-shadow:0 10px 30px -8px rgba(79,203,140,.7)}

/* ---------- Çizimler (SVG) ---------- */
.sl-art .art{filter:drop-shadow(0 0 38px rgba(34,211,238,.28)) drop-shadow(0 30px 40px rgba(0,0,0,.45))}
.sl-b .sl-art .art{filter:drop-shadow(0 0 38px rgba(255,122,51,.3)) drop-shadow(0 30px 40px rgba(0,0,0,.45))}
.sl-c .sl-art .art{filter:drop-shadow(0 0 38px rgba(79,203,140,.28)) drop-shadow(0 30px 40px rgba(0,0,0,.45))}
.sl-art svg text{font-family:var(--tk-head)!important;letter-spacing:-.01em}

/* ---------- Kontroller ---------- */
.sl-arrow{border-radius:6px;border:1px solid rgba(34,211,238,.4);background:rgba(6,13,24,.55);color:var(--tk-cyan-2);
  backdrop-filter:blur(8px);transition:all .2s}
.sl-arrow:hover{background:rgba(34,211,238,.16);box-shadow:0 0 20px -4px rgba(34,211,238,.7);color:#fff}
.sl-arrow:focus-visible,.sl-dots button:focus-visible{outline:2px solid var(--tk-cyan);outline-offset:2px}
.sl-dots button{height:4px;width:56px;border-radius:0;background:rgba(255,255,255,.16)}
.sl-dots button span{background:linear-gradient(90deg,var(--tk-cyan),var(--tk-cyan-2));border-radius:0;
  box-shadow:0 0 12px var(--tk-cyan)}

/* ---------- Form kartı (slaytın altı) ---------- */
.sl-card{border-radius:10px;border:1px solid rgba(34,211,238,.28);
  box-shadow:0 0 0 1px rgba(255,255,255,.02),0 30px 70px -26px rgba(2,10,22,.8),0 0 60px -30px rgba(34,211,238,.5)}
.sl-card-head strong{font-family:var(--tk-head);font-weight:700;letter-spacing:-.03em}
.sl-card-head span{font-family:var(--tk-mono);font-size:12.5px;letter-spacing:.02em}

/* ---------- Kart slaytları (firmalar / ilanlar) ---------- */
.sl-ok{font-family:var(--tk-mono);border-radius:6px;border-color:rgba(34,211,238,.35);color:var(--tk-cyan)}
.sl-ok:hover{border-color:var(--tk-cyan);color:var(--tk-cyan);box-shadow:0 0 18px -4px rgba(34,211,238,.6)}
.sl-noktalar button{height:4px;border-radius:0}
.sl-noktalar button span{background:linear-gradient(90deg,var(--tk-cyan),var(--tk-or));border-radius:0}
.oc,.ik{position:relative;overflow:hidden;transition:transform .25s,border-color .25s,box-shadow .25s}
.oc::before,.ik::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;opacity:0;transition:opacity .25s;
  background:linear-gradient(90deg,var(--tk-cyan),var(--tk-or))}
.oc:hover,.ik:hover{transform:translateY(-3px);border-color:rgba(34,211,238,.55);
  box-shadow:0 18px 40px -20px rgba(34,211,238,.55)}
.oc:hover::before,.ik:hover::before{opacity:1}
.oc-name,.ik-city b{font-family:var(--tk-head);letter-spacing:-.02em}
.chip,.oc-city,.ik-foot .muted{font-family:var(--tk-mono);font-size:12.5px}

/* ---------- Mobil / erişilebilirlik ---------- */
@media (max-width:640px){
  .sl-pill{font-size:11px;letter-spacing:.05em}
  .sl-dots button{width:36px}
}
@media (prefers-reduced-motion:reduce){
  .sl-slide.on::after,.sl-pill i{animation:none}
  .oc,.ik,.sl-btn{transition:none}
}