/* ŞirketX Hero Slider — izole stiller (.sx-hero-) */
/* ===== ŞirketX Hero Slider (sx-hero) — izole stiller ===== */
.sx-hero{padding:14px 0 4px;background:#FFFFFF;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;}
.sx-hero-panel{position:relative;overflow:hidden;width:min(1600px,calc(100% - clamp(20px,3vw,44px)));margin:0 auto 30px;border-radius:clamp(16px,1.6vw,24px);background:radial-gradient(circle at 88% 82%, rgba(74,153,224,0.28) 0%, rgba(74,153,224,0) 40%),linear-gradient(135deg,#0B2F4D 0%,#0E3A5C 48%,#185078 100%);box-shadow:0 30px 70px rgba(7,42,72,0.35);}
/* Owl temel iskeleti (yerel owl.carousel.min.css yüklenemezse yedek) */
.sx-hero-carousel{display:block;width:100%;position:relative;z-index:1;}
.sx-hero-carousel .owl-stage-outer{position:relative;overflow:hidden;transform:translate3d(0,0,0);}
.sx-hero-carousel .owl-stage{position:relative;touch-action:manipulation;}
.sx-hero-carousel .owl-stage:after{content:".";display:block;clear:both;visibility:hidden;line-height:0;height:0;}
.sx-hero-carousel .owl-item{position:relative;min-height:1px;float:left;-webkit-backface-visibility:hidden;user-select:none;}
.sx-hero-carousel.owl-grab{cursor:grab;}
.sx-hero-carousel:not(.owl-loaded) .sx-hero-item + .sx-hero-item{display:none;}
.sx-hero-grid{max-width:1520px;margin:0 auto;display:flex;flex-wrap:wrap;align-items:center;gap:26px clamp(24px,3.2vw,56px);padding:clamp(30px,3.6vw,64px) clamp(24px,4vw,72px) clamp(18px,1.6vw,26px);}
.sx-hero-text{flex:1.05 1 480px;min-width:0;}
.sx-hero-visual{flex:1.22 1 470px;min-width:0;}
.sx-hero-tag{display:inline-flex;align-items:center;gap:7px;background:rgba(74,153,224,0.14);border:1px solid rgba(85,184,240,0.44);color:#85D1FA;border-radius:999px;padding:7px 14px;font-size:11.5px;font-weight:700;letter-spacing:0.09em;}
.sx-hero-tag i{width:6px;height:6px;border-radius:50%;background:#55B8F0;}
.sx-hero-title{margin:18px 0 14px;color:#FFFFFF;font-size:clamp(32px,3.7vw,54px);line-height:1.08;font-weight:800;letter-spacing:-0.02em;text-wrap:balance;}
.sx-hero-accent{color:#55B8F0;}
.sx-hero-desc{margin:0 0 26px;color:#D8E7F2;font-size:clamp(14.5px,1.1vw,17px);line-height:1.62;max-width:570px;text-wrap:pretty;}
.sx-hero-ctas{display:flex;flex-wrap:wrap;gap:12px;}
.sx-hero-btn-p{display:inline-flex;align-items:center;gap:9px;background:#55B8F0;color:#03395B;font-weight:700;font-size:15px;line-height:1;padding:14px 22px;border-radius:11px;text-decoration:none;box-shadow:0 12px 28px rgba(43,134,197,0.35);transition:background .25s ease,transform .25s ease;}
.sx-hero-btn-p:hover{background:#6AC4F3;color:#03395B;transform:translateY(-1px);}
.sx-hero-btn-s{display:inline-flex;align-items:center;background:rgba(255,255,255,0.04);color:#FFFFFF;font-weight:600;font-size:15px;line-height:1;padding:14px 20px;border-radius:11px;text-decoration:none;border:1px solid rgba(255,255,255,0.28);transition:background .25s ease,border-color .25s ease;}
.sx-hero-btn-s:hover{background:rgba(255,255,255,0.10);border-color:rgba(255,255,255,0.45);color:#FFFFFF;}
.sx-hero a:focus-visible,.sx-hero button:focus-visible{outline:3px solid rgba(133,209,250,0.8);outline-offset:2px;}
.sx-hero-media{position:relative;margin:6px 1% 10px;aspect-ratio:7/6;max-height:600px;}
.sx-hero-glow{position:absolute;inset:-8% -10%;pointer-events:none;background:radial-gradient(circle at 60% 70%, rgba(85,184,240,0.20) 0%, rgba(85,184,240,0) 55%);}
.sx-hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:center bottom;}
.sx-hero-imgfallback{display:none;position:absolute;inset:0;border:1px dashed rgba(255,255,255,0.25);border-radius:20px;color:#AFC7D8;font:12px/1.6 ui-monospace,Consolas,monospace;align-items:center;justify-content:center;text-align:center;padding:20px;}
.sx-hero-noimg .sx-hero-img{display:none;}
.sx-hero-noimg .sx-hero-imgfallback{display:flex;}
/* Slayta ozel gorsel hizalama (kisi kaymalari / olcek) — masaustu; mobilde sifirlanir */
.sx-hero-img.sx-shift-1{transform:translateX(-5%);}
.sx-hero-img.sx-shift-3{transform:translateX(-7%);}
.sx-hero-img.sx-shift-5{transform:translateX(-6%);}
.sx-hero-img.sx-shift-7{transform:translateX(-7%);}
.sx-hero-img.sx-shift-9{transform:translateX(-6%);}
.sx-hero-img.sx-shift-10{transform:scale(0.88) translateX(-2%);}
.sx-hero-bub{position:absolute;z-index:3;}
.sx-hero-bubble{display:flex;align-items:center;gap:9px;min-height:clamp(40px,3.4vw,46px);padding:6px 16px 6px 6px;border-radius:999px;color:#F7FBFF;font-size:clamp(12px,1vw,13px);font-weight:600;white-space:nowrap;background:linear-gradient(135deg,rgba(255,255,255,0.20),rgba(74,153,224,0.12));border:1px solid rgba(255,255,255,0.30);box-shadow:0 14px 36px rgba(0,18,38,0.28),inset 0 1px 0 rgba(255,255,255,0.34);backdrop-filter:blur(18px) saturate(140%);-webkit-backdrop-filter:blur(18px) saturate(140%);transition:transform .25s ease;}
.sx-hero-bubble:hover{animation-play-state:paused;transform:translateY(-2px);}
.sx-hero-bubble-light{color:#083250;background:rgba(245,249,252,0.90);border:1px solid rgba(255,255,255,0.72);box-shadow:0 14px 36px rgba(0,18,38,0.30),inset 0 1px 0 rgba(255,255,255,0.5);}
.sx-hero-bub-ico{display:grid;place-items:center;width:clamp(30px,2.6vw,34px);height:clamp(30px,2.6vw,34px);border-radius:50%;background:rgba(245,249,252,0.92);color:#03395B;flex:none;}
.sx-hero-bubble-light .sx-hero-bub-ico{background:#0E4A73;color:#FFFFFF;}
.sx-hero-icon{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;}
.sx-hero-icon-arrow{width:16px;height:16px;stroke-width:2.2;}
.sx-hero-f1{animation:sxHeroFA 5.2s ease-in-out -1.2s infinite alternate;}
.sx-hero-f2{animation:sxHeroFB 6s ease-in-out -2.4s infinite alternate;}
.sx-hero-f3{animation:sxHeroFC 5.6s ease-in-out -0.8s infinite alternate;}
@keyframes sxHeroFA{from{transform:translateY(0);}to{transform:translateY(-7px);}}
@keyframes sxHeroFB{from{transform:translateY(0);}to{transform:translateY(6px);}}
@keyframes sxHeroFC{from{transform:translateY(0);}to{transform:translateY(-5px);}}
/* Slayt girişi: aktif slaytta medya + baloncuklar sıralı görünür */
/* Performans: cam efekti (backdrop-filter) yalnizca aktif slaytta calisir.
   Pasif slaytlarda kapatilmazsa 40+ blur katmani compositor'i yavaslatir. */
.sx-hero-carousel .owl-item:not(.active) .sx-hero-bubble{backdrop-filter:none;-webkit-backdrop-filter:none;animation:none;}
.sx-hero-carousel .owl-item.active .sx-hero-media{animation:sxHeroMediaIn .65s ease both;}
.sx-hero-carousel .owl-item.active .sx-hero-bub{animation:sxHeroIn .6s cubic-bezier(.22,1,.36,1) both;}
.sx-hero-carousel .owl-item.active .sx-hero-bub-1{animation-delay:.21s;}
.sx-hero-carousel .owl-item.active .sx-hero-bub-2{animation-delay:.30s;}
.sx-hero-carousel .owl-item.active .sx-hero-bub-3{animation-delay:.39s;}
.sx-hero-carousel .owl-item.active .sx-hero-bub-4{animation-delay:.48s;}
.sx-hero-carousel .owl-item.active .sx-hero-bub-5{animation-delay:.57s;}
@keyframes sxHeroIn{from{opacity:0;transform:translateY(14px) scale(.96);}to{opacity:1;transform:none;}}
@keyframes sxHeroMediaIn{from{opacity:0;transform:translateY(20px);}to{opacity:1;transform:none;}}
.sx-hero-controls{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px;max-width:1520px;margin:0 auto;padding:10px clamp(18px,4vw,72px) clamp(20px,2.4vw,30px);}
.sx-hero-controls-left{display:flex;align-items:center;gap:14px;flex-wrap:wrap;}
.sx-hero-dots{display:flex;align-items:center;gap:2px;}
.sx-hero-dot{display:flex;align-items:center;justify-content:center;height:38px;width:24px;padding:0 3px;background:transparent;border:none;cursor:pointer;transition:width .3s ease;}
.sx-hero-dot span{display:block;width:100%;height:4px;border-radius:2px;background:rgba(255,255,255,0.30);transition:background .3s ease;}
.sx-hero-dot.is-on{width:38px;}
.sx-hero-dot.is-on span{background:#55B8F0;}
.sx-hero-dot:hover{opacity:.8;}
.sx-hero-counter{color:#AFC7D8;font-size:13px;font-variant-numeric:tabular-nums;letter-spacing:0.06em;}
.sx-hero-counter b{color:#FFFFFF;font-weight:700;}
.sx-hero-arrows{display:flex;gap:10px;}
.sx-hero-prev,.sx-hero-next{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;cursor:pointer;transition:background .25s ease;}
.sx-hero-prev{background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.30);color:#EAF4FC;}
.sx-hero-prev:hover{background:rgba(255,255,255,0.16);}
.sx-hero-next{background:#55B8F0;border:1px solid #55B8F0;color:#03395B;}
.sx-hero-next:hover{background:#6AC4F3;}
.sx-hero-prev .sx-hero-icon,.sx-hero-next .sx-hero-icon{width:19px;height:19px;stroke-width:2.1;}
@media (max-width:900px){
  .sx-hero-grid{gap:20px 26px;}
  .sx-hero-media{margin:4px 2% 8px;}
}
@media (max-width:800px){
  /* Tek sutun: etiket -> baslik -> aciklama -> butonlar -> web benzeri gorsel bloku */
  .sx-hero{padding:10px 0 2px;}
  .sx-hero-panel{width:calc(100% - 24px);border-radius:18px;}
  .sx-hero-grid{padding:28px 20px 14px;gap:6px;}
  .sx-hero-text,.sx-hero-visual{flex:1 1 100%;}
  .sx-hero-tag{font-size:11px;padding:6px 12px;}
  .sx-hero-title{font-size:clamp(30px,8vw,42px);margin:14px 0 12px;}
  .sx-hero-desc{font-size:14.5px;line-height:1.6;margin-bottom:20px;max-width:none;}
  .sx-hero-ctas{gap:10px;}
  .sx-hero-btn-p,.sx-hero-btn-s{padding:13px 18px;font-size:14.5px;min-height:46px;}
  /* Web'in kucuk versiyonu: gorsel normal akista (her cihazda garanti gorunur).
     Baloncuklar mobilde tamamen gizlenir - sade gorunum. */
  .sx-hero-visual{margin-top:0;}
  .sx-hero-media{position:relative;margin:2px auto 0;width:88%;max-width:360px;aspect-ratio:auto;max-height:none;padding:0;display:block;}
  .sx-hero-glow{inset:-6% -8%;}
  .sx-hero-img{position:static;inset:auto;display:block;width:100%;height:auto;max-height:340px;object-fit:contain;object-position:center bottom;transform:none !important;}
  .sx-hero-imgfallback{position:absolute;inset:0;height:auto;}
  .sx-hero-bub{display:none !important;}
  .sx-hero-controls{padding:2px 18px 18px;}
  .sx-hero-dot{width:20px;}
  .sx-hero-dot.is-on{width:30px;}
}
@media (max-width:768px){
  /* Sitenin mobil header'i (position:absolute logo) slider uzerine biner;
     eski slider bunu padding-top:155px ile telafi ediyordu. Panel logoya
     carpmasin diye ust bosluk birakilir. */
  .sx-hero{padding-top:96px;}
  /* Ust duyuru cubugu mobilde gizlenir */
  .navbar-area{display:none;}
}
@media (max-width:430px){
  .sx-hero-panel{width:calc(100% - 16px);border-radius:16px;}
  .sx-hero-grid{padding:24px 16px 12px;}
  .sx-hero-ctas{gap:10px;}
  .sx-hero-btn-p,.sx-hero-btn-s{flex:1 1 100%;justify-content:center;}
  .sx-hero-media{width:94%;max-width:330px;}
  .sx-hero-img{max-height:300px;}
  .sx-hero-controls{padding:6px 14px 18px;gap:10px;}
  .sx-hero-counter{font-size:12px;}
}
@media (prefers-reduced-motion: reduce){
  .sx-hero *{animation:none !important;transition:none !important;}
}