:root{
  --bg:#0b1220;
  --card:#0f172a;
  --text:#e5e7eb;
  --muted:#9ca3af;
  --brand:#0ea5e9;
  --brand2:#22c55e;
  --border:rgba(255,255,255,.08);
  --shadow: 0 12px 30px rgba(0,0,0,.35);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,Helvetica,sans-serif;background:linear-gradient(180deg,#050813 0%, #0b1220 45%, #050813 100%);color:var(--text);}
a{color:inherit;text-decoration:none}
.container{width:min(1140px,92%);margin:0 auto}
.topbar{position:sticky; top:0; z-index:50; backdrop-filter: blur(10px); background:rgba(5,8,19,.6); border-bottom:1px solid var(--border);}
.nav{display:flex; align-items:center; justify-content:space-between; padding:14px 0;}
.brand{display:flex; align-items:center; gap:10px;}
.logo{width:46px; height:46px; border-radius:14px; background:linear-gradient(135deg,var(--brand),var(--brand2)); box-shadow: var(--shadow); display:grid; place-items:center; font-weight:800;}
.brand h1{font-size:16px; line-height:1.1; margin:0}
.brand small{color:var(--muted)}
.menu{display:flex; gap:18px; align-items:center;}
.menu a{color:rgba(229,231,235,.9); padding:8px 10px; border-radius:12px; transition:.2s;}
.menu a:hover,.menu a.active{background:rgba(255,255,255,.06)}
.nav-right{display:flex; align-items:center; gap:10px;}
.iconbtn{width:38px; height:38px; border-radius:12px; border:1px solid var(--border); background:rgba(255,255,255,.04); display:grid; place-items:center; transition:.2s;}
.iconbtn:hover{transform:translateY(-1px); background:rgba(255,255,255,.08)}
.callout{display:flex; align-items:center; gap:10px; padding:8px 12px; border-radius:14px; border:1px solid var(--border); background:rgba(255,255,255,.04);}
.callout span{font-size:12px; color:var(--muted); display:block; line-height:1.1}
.callout strong{font-size:14px}
.whatsapp{background:rgba(34,197,94,.12); border-color:rgba(34,197,94,.35);}
.whatsapp i{color:#22c55e}
.hamburger{display:none}
.hero{padding:26px 0 10px;}
.section{padding:34px 0;}
.card{background:rgba(15,23,42,.76); border:1px solid var(--border); border-radius:22px; box-shadow: var(--shadow); overflow:hidden;}
.card-inner{padding:22px}
.section-title{display:flex; align-items:flex-end; justify-content:space-between; gap:12px; margin:0 0 14px;}
.section-title h2{margin:0; font-size:24px}
.section-title p{margin:0; color:var(--muted); font-size:14px}
.grid{display:grid; gap:16px;}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-2{grid-template-columns:repeat(2,1fr)}
.badge{display:inline-flex; gap:8px; align-items:center; padding:6px 10px; border-radius:999px; border:1px solid var(--border); background:rgba(255,255,255,.04); color:rgba(229,231,235,.95); font-size:12px;}
.kv{display:grid; gap:12px;}
.kv h3{margin:0; font-size:18px}
.kv p{margin:0; color:var(--muted); line-height:1.6}
.service{display:flex; gap:14px;}
.service img{width:82px; height:82px; border-radius:18px; border:1px solid var(--border); object-fit:cover;}
.service h4{margin:0 0 6px; font-size:16px}
.service p{margin:0; color:var(--muted); font-size:13px; line-height:1.55}
.overlay-bg{position:relative;}
.overlay-bg::before{content:""; position:absolute; inset:0; background: linear-gradient(90deg, rgba(5,8,19,.86) 0%, rgba(5,8,19,.62) 55%, rgba(5,8,19,.86) 100%), url("../img/bg-shop.jpg"); background-size:cover; background-position:center; filter:saturate(1.05);}
.overlay-bg > *{position:relative}
.marquee{overflow:hidden; border-top:1px solid var(--border); border-bottom:1px solid var(--border); background:rgba(255,255,255,.03); border-radius:16px;}
.marquee-track{display:flex; gap:28px; padding:14px 0; width:max-content; animation: scroll 22s linear infinite;}
.marquee:hover .marquee-track{animation-play-state:paused}
@keyframes scroll{from{transform:translateX(0)} to{transform:translateX(-50%)}}
.faq-item{border:1px solid var(--border); background:rgba(255,255,255,.03); border-radius:18px; overflow:hidden;}
.faq-q{width:100%; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:16px 16px; background:transparent; border:none; color:var(--text); cursor:pointer; text-align:left; font-size:15px;}
.faq-a{max-height:0; overflow:hidden; transition:max-height .25s ease; color:var(--muted);}
.faq-a > div{padding:0 16px 16px; line-height:1.6; font-size:14px}
.faq-item.open .faq-a{max-height:260px}
.footer{margin-top:30px; border-top:1px solid var(--border); background:rgba(5,8,19,.6);}
.footer .container{padding:18px 0; display:flex; flex-wrap:wrap; gap:10px; justify-content:space-between; align-items:center}
.footer small{color:var(--muted)}
.btn{display:inline-flex; align-items:center; gap:10px; padding:11px 14px; border-radius:16px; border:1px solid var(--border); background:rgba(255,255,255,.04); transition:.2s;}
.btn:hover{transform:translateY(-1px); background:rgba(255,255,255,.08)}
.btn.primary{background:linear-gradient(135deg, rgba(14,165,233,.25), rgba(34,197,94,.18)); border-color:rgba(14,165,233,.35);}
.map{width:100%; height:360px; border:0; border-radius:18px;}
.form{display:grid; gap:10px;}
.input, textarea{width:100%; padding:12px 12px; border-radius:14px; border:1px solid var(--border); background:rgba(255,255,255,.03); color:var(--text); outline:none;}
textarea{min-height:120px; resize:vertical}
.note{color:var(--muted); font-size:13px; line-height:1.5}
@media (max-width: 980px){
  .grid-3{grid-template-columns:1fr}
  .grid-2{grid-template-columns:1fr}
  .menu{display:none}
  .hamburger{display:grid; place-items:center; width:42px; height:42px; border-radius:14px; border:1px solid var(--border); background:rgba(255,255,255,.04)}
  .nav-right .iconbtn{display:none}
  .callout{display:none}
}
.mobile-menu{display:none; padding:0 0 14px;}
.mobile-menu a{display:block; padding:10px 12px; border-radius:14px; border:1px solid var(--border); background:rgba(255,255,255,.03); margin-top:10px;}
.mobile-menu.open{display:block}


/* ===== v2 Header (B12-like) ===== */
.utilitybar{
  border-bottom:1px solid var(--border);
  background:rgba(5,8,19,.55);
}
.utilitybar .row{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; padding:10px 0;
  flex-wrap:wrap;
}
.utility-left{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  color:rgba(229,231,235,.92);
}
.utility-left .tag{font-size:12px; color:var(--muted)}
.utility-right{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
}
.divider{width:1px; height:18px; background:var(--border); display:inline-block; margin:0 6px}

.brand .logo{background:transparent; box-shadow:none; width:auto; height:auto; border-radius:0}
.brand img{height:64px; width:auto; display:block}
.brand .titleblock h1{font-size:15px}
.brand .titleblock small{font-size:12px}
.menu a{white-space:nowrap}

@media (max-width: 1100px){
  .callout{padding:8px 10px}
}
@media (max-width: 980px){
  .utilitybar{display:none}
  .brand img{height:46px}
}

/* ===== v2 Footer ===== */
.footer{ margin-top:46px; }
.footer-top{
  border-top:1px solid var(--border);
  background:rgba(5,8,19,.75);
}
.footer-top .container{padding:26px 0}
.footer-grid{
  display:grid;
  grid-template-columns: 1.3fr 1fr 1fr 1fr;
  gap:18px;
}
.footer h4{margin:0 0 10px; font-size:14px; letter-spacing:.2px}
.footer ul{list-style:none; padding:0; margin:0; display:grid; gap:8px}
.footer a:hover{opacity:.9}
.footer .muted{color:var(--muted); font-size:13px; line-height:1.55}
.footer-bottom{
  border-top:1px solid var(--border);
  background:rgba(5,8,19,.6);
}
.footer-bottom .container{
  padding:14px 0;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  justify-content:space-between;
  align-items:center;
}
.hours{display:grid; gap:6px; font-size:13px; color:var(--muted)}
.hours div{display:flex; justify-content:space-between; gap:10px}
@media (max-width: 980px){
  .footer-grid{grid-template-columns:1fr; }
}

/* ===== v3 Wide Slider + Featured Services ===== */
.container-wide{width:min(1400px,96%); margin:0 auto;}
.hero-wide{padding-top:18px;}
.hero-wide .swiper img{
  width:100%;
  height:540px;
  object-fit:cover;
  display:block;
}
@media (max-width: 980px){
  .hero-wide .swiper img{height:360px;}
}
.feature-grid .feature-card{
  border:1px solid var(--border);
  background:rgba(255,255,255,.03);
  border-radius:18px;
  padding:14px;
}
.feature-grid .service{align-items:flex-start;}
.feature-grid .service img{width:72px; height:72px; border-radius:16px;}


/* ===== v4 Full-bleed Slider (edge-to-edge) ===== */
.hero-fullbleed{padding-top:0; padding-bottom:10px;}
.hero-fullbleed .container-wide{width:100%; max-width:none; margin:0;}
.hero-fullbleed .card{border-radius:0; border-left:none; border-right:none;}
.hero-fullbleed .swiper{border-top:none;}
.hero-fullbleed .swiper img{height:620px;}
.hero-fullbleed .swiper-button-prev,
.hero-fullbleed .swiper-button-next{color:#fff;}
@media (max-width: 980px){
  .hero-fullbleed .swiper img{height:400px;}
}


/* ===== v5 Slider Full Width Fix ===== */
.hero-fullbleed .container.container-wide{
  width:100% !important;
  max-width:none !important;
  margin:0 !important;
}
.hero-fullbleed .hero-bleed{
  width:100%;
  max-width:none;
  margin:0;
}
.hero-fullbleed .hero-bleed .card{
  width:100%;
}

/* ===== v6 Full Bleed Hero Fix ===== */
.hero-fullbleed .hero-bleed{width:100%; max-width:none; margin:0;}
.hero-fullbleed .hero-bleed .card{
  width:100%;
  border-radius:0;
  border-left:none;
  border-right:none;
}
.hero-fullbleed .hero-bleed .swiper{
  border-top:none !important;
}
.hero-fullbleed .hero-bleed .swiper img{
  width:100%;
  height:620px;
  object-fit:cover;
  display:block;
}
@media (max-width: 980px){
  .hero-fullbleed .hero-bleed .swiper img{height:400px;}
}

/* ===== Featured Services (6 cards) ===== */
.feature-grid .feature-card{
  border:1px solid var(--border);
  background:rgba(255,255,255,.03);
  border-radius:18px;
  padding:14px;
}
.feature-grid .service{align-items:flex-start;}
.feature-grid .service img{width:72px; height:72px; border-radius:16px;}
@media (max-width: 980px){
  .feature-grid{grid-template-columns:1fr !important;}
}


/* ===== v12 hover animations for featured services ===== */
.feature-grid .feature-card{
  position:relative;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
}
.feature-grid .feature-card::after{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius:18px;
  pointer-events:none;
  opacity:0;
  transition: opacity .18s ease;
  background: radial-gradient(600px 140px at 30% 0%, rgba(14,165,233,.22), transparent 60%),
              radial-gradient(600px 140px at 70% 0%, rgba(34,197,94,.18), transparent 60%);
}
.feature-grid .feature-card:hover{
  transform: translateY(-4px);
  border-color: rgba(255,255,255,.16);
  background: rgba(255,255,255,.05);
  box-shadow: 0 18px 40px rgba(0,0,0,.45);
}
.feature-grid .feature-card:hover::after{opacity:1;}
.feature-grid .feature-card:hover img{
  transform: scale(1.03);
}
.feature-grid .feature-card img{
  transition: transform .18s ease;
}


/* ===== v13 feature2 cards (image-top like reference) ===== */
.feature2-grid{
  margin-top:14px;
}
.feature2-card{
  display:block;
  border:1px solid var(--border);
  background:rgba(255,255,255,.03);
  border-radius:18px;
  overflow:hidden;
  text-decoration:none;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
}
.feature2-media{
  aspect-ratio: 16 / 9;
  overflow:hidden;
  background: rgba(255,255,255,.04);
}
.feature2-media img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transform: scale(1.01);
  transition: transform .25s ease;
}
.feature2-body{
  padding:16px 18px 18px;
}
.feature2-body h3{
  margin:0 0 8px;
  font-size:18px;
  letter-spacing:.1px;
  display:flex;
  align-items:center;
  gap:8px;
}
.feature2-arrow{
  margin-left:auto;
  font-size:22px;
  line-height:1;
  opacity:.9;
}
.feature2-body p{
  margin:0;
  color:var(--muted);
  line-height:1.55;
}
.feature2-card:hover{
  transform: translateY(-4px);
  border-color: rgba(255,255,255,.16);
  background: rgba(255,255,255,.05);
  box-shadow: 0 18px 40px rgba(0,0,0,.45);
}
.feature2-card:hover .feature2-media img{
  transform: scale(1.08);
}
@media (max-width: 980px){
  .feature2-body h3{font-size:17px;}
}


/* ===== v16 regions chips ===== */
.chips{display:flex; flex-wrap:wrap; gap:10px; margin-top:14px}
.chip{
  padding:8px 12px;
  border:1px solid var(--border);
  border-radius:999px;
  background:rgba(255,255,255,.03);
  color:rgba(229,231,235,.92);
  font-size:13px;
}


/* ===== v17 screenshot-like hero (caption on slide) ===== */
.hero .swiper{position:relative}
.hero .swiper-slide{position:relative}
.hero .hero-caption{
  position:absolute;
  left:64px;
  top:50%;
  transform:translateY(-50%);
  max-width:560px;
  z-index:5;
}
.hero .hero-caption h2{
  margin:0 0 10px;
  font-size:46px;
  letter-spacing:.2px;
}
.hero .hero-caption p{
  margin:0 0 18px;
  font-size:20px;
  color:rgba(229,231,235,.92);
}
.hero .hero-btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:12px 18px;
  border-radius:14px;
  background: #f6d365;
  color:#1b1f2a;
  font-weight:700;
  text-decoration:none;
  border:0;
}
.hero .hero-btn:hover{filter:brightness(1.03)}
.hero .swiper img{
  width:100%;
  height:620px;
  object-fit:cover;
  display:block;
}
.hero .swiper::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:2;
  background: linear-gradient(90deg, rgba(0,0,0,.68) 0%, rgba(0,0,0,.30) 45%, rgba(0,0,0,0) 70%);
  pointer-events:none;
}
.hero .swiper-slide img{position:relative; z-index:1;}
.hero .swiper-slide .hero-caption{z-index:3;}

@media (max-width: 980px){
  .hero .swiper img{height:420px;}
  .hero .hero-caption{left:18px; right:18px; max-width:unset;}
  .hero .hero-caption h2{font-size:30px;}
  .hero .hero-caption p{font-size:16px;}
}


/* Region map */
.region-map-wrap{display:flex; justify-content:center;}
.region-map{width:100%; max-width:760px; height:auto; border-radius:16px; border:1px solid var(--border); background:#fff; padding:10px; box-shadow:0 18px 40px rgba(0,0,0,.25);} 
@media (max-width: 760px){.region-map{max-width:100%; padding:8px;}}


/* ===== v19 slider text animation (editable captions) ===== */
.hero .hero-caption{
  opacity:0;
  transform: translateX(-18px);
  transition: opacity .45s ease, transform .55s cubic-bezier(.2,.8,.2,1);
}
.hero .hero-caption h2,
.hero .hero-caption p,
.hero .hero-caption .hero-btn{
  opacity:0;
  transform: translateY(8px);
  transition: opacity .45s ease, transform .55s cubic-bezier(.2,.8,.2,1);
}
.hero .hero-caption p{transition-delay:.08s;}
.hero .hero-caption .hero-btn{transition-delay:.14s;}

/* active slide */
.hero .swiper-slide-active .hero-caption{
  opacity:1;
  transform: translateX(0);
}
.hero .swiper-slide-active .hero-caption h2,
.hero .swiper-slide-active .hero-caption p,
.hero .swiper-slide-active .hero-caption .hero-btn{
  opacity:1;
  transform: translateY(0);
}


/* ===== v20 hero badge (editable) ===== */
.hero .hero-badge{
  display:inline-flex;
  align-items:center;
  padding:10px 16px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.22);
  background: rgba(15,23,42,.62);
  color: rgba(255,255,255,.92);
  font-weight:700;
  font-size:18px;
  margin-bottom:14px;
  backdrop-filter: blur(8px);
}
.hero .hero-badge{
  opacity:0;
  transform: translateY(8px);
  transition: opacity .45s ease, transform .55s cubic-bezier(.2,.8,.2,1);
}
.hero .swiper-slide-active .hero-badge{
  opacity:1;
  transform: translateY(0);
}


/* ===== v21 hero no-dim overlay + bigger typography (like screenshot) ===== */
.hero .swiper::before{display:none !important;} /* remove darkening gradient overlay */

.hero .hero-caption{
  left:72px;
  max-width:720px;
}

.hero .hero-badge{
  font-size:22px;
  padding:12px 18px;
  border:1px solid rgba(255,255,255,.35);
  background: rgba(15,23,42,.55); /* only badge has subtle background, not whole slide */
}

.hero .hero-caption h2{
  font-size:72px;
  line-height:1.02;
  letter-spacing:.3px;
  text-shadow: 0 10px 30px rgba(0,0,0,.55);
}

.hero .hero-caption p{
  font-size:36px;
  line-height:1.2;
  text-shadow: 0 8px 24px rgba(0,0,0,.55);
}

.hero .hero-btn{
  margin-top:8px;
}

@media (max-width: 980px){
  .hero .hero-caption{left:18px; right:18px; max-width:unset;}
  .hero .hero-badge{font-size:16px; padding:10px 14px;}
  .hero .hero-caption h2{font-size:40px;}
  .hero .hero-caption p{font-size:18px;}
}


/* ===== v22 auto left-dim overlay + SVG-like typography ===== */
/* Soldan okunabilirlik için otomatik karartma (resim ekleyince de geçerli) */
.hero .swiper::before{
  display:block !important;
  content:"";
  position:absolute;
  inset:0;
  z-index:2;
  background: linear-gradient(90deg,
    rgba(0,0,0,.68) 0%,
    rgba(0,0,0,.36) 48%,
    rgba(0,0,0,0) 75%);
  pointer-events:none;
}

/* Yazı boyutları (SVG şablondaki gibi) */
.hero .hero-caption{
  left:90px;
  max-width:720px;
}
.hero .hero-badge{
  font-size:26px;
  padding:12px 18px;
  border:1px solid rgba(255,255,255,.35);
  background: rgba(15,23,42,.62);
}
.hero .hero-caption h2{
  font-size:68px;
  line-height:1.02;
  text-shadow: 0 10px 30px rgba(0,0,0,.55);
}
.hero .hero-caption p{
  font-size:34px;
  line-height:1.2;
  text-shadow: 0 8px 24px rgba(0,0,0,.55);
}
.hero .hero-btn{
  font-size:22px;
}

/* Mobil uyum */
@media (max-width: 980px){
  .hero .hero-caption{left:18px; right:18px; max-width:unset;}
  .hero .hero-badge{font-size:16px; padding:10px 14px;}
  .hero .hero-caption h2{font-size:34px;}
  .hero .hero-caption p{font-size:16px;}
  .hero .hero-btn{font-size:16px;}
}


/* ===== v23 slider caption placement (top-left like reference) ===== */
.hero .hero-caption{
  top:120px !important;            /* move to top */
  left:90px !important;
  transform:none !important;       /* remove vertical centering */
  max-width:760px;
}
.hero .hero-badge{
  margin-bottom:18px;
}

/* keep animations: adjust only from-position for v19 */
.hero .hero-caption{
  opacity:0;
  transform: translateX(-18px) !important; /* initial */
}
.hero .swiper-slide-active .hero-caption{
  opacity:1;
  transform: translateX(0) !important;
}

/* On small screens, keep within view */
@media (max-width: 980px){
  .hero .hero-caption{
    top:28px !important;
    left:18px !important;
    right:18px !important;
  }
}


/* ===== v24 remove dark overlay + make text crisp (no dim, no transparency overlay) ===== */
.hero .swiper::before{display:none !important;} /* remove slide darkening */

.hero .hero-caption h2,
.hero .hero-caption p{
  text-shadow:none !important;     /* crisper text */
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}

/* Badge: remove glass/transparent look (solid) */
.hero .hero-badge{
  background:#0f172a !important;
  border:1px solid rgba(255,255,255,.28) !important;
  backdrop-filter:none !important;
}

/* Optional: keep readability by adding a small transparent panel only behind the text block (not dimming the whole image) */
.hero .hero-caption{
  background: rgba(15,23,42,.0); /* fully transparent (as requested) */
}


/* ===== v25 auto left dim (image only), text NOT affected ===== */
/* Soldan otomatik karartma: sadece görselin üstünde, yazıların ALTINDA */
.hero .swiper{position:relative;}
.hero .swiper::before{
  display:block !important;
  content:"";
  position:absolute;
  inset:0;
  z-index:2; /* image(1) < overlay(2) < text(5) */
  background: linear-gradient(90deg,
    rgba(0,0,0,.68) 0%,
    rgba(0,0,0,.38) 48%,
    rgba(0,0,0,0) 76%);
  pointer-events:none;
}

/* Layering guarantee */
.hero .swiper-slide img{position:relative; z-index:1;}
.hero .hero-caption{position:absolute; z-index:5;}

/* Keep text crisp (optional) */
.hero .hero-caption h2,
.hero .hero-caption p{
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}


/* ===== v26 FIX: overlay only affects image (SVG-like), text stays vivid ===== */
/* Create a clean stacking order:
   1) image
   2) overlay gradient (like SVG)
   3) caption (badge + title + subtitle + button)
*/
.hero .swiper{position:relative; isolation:isolate;} /* isolation prevents blending issues */
.hero .swiper-slide{position:relative; z-index:2;}    /* slides above overlay */
.hero .swiper::before{
  display:block !important;
  content:"";
  position:absolute;
  inset:0;
  z-index:1; /* UNDER slides/caption, OVER background */
  background: linear-gradient(90deg,
    rgba(0,0,0,.70) 0%,
    rgba(0,0,0,.35) 55%,
    rgba(0,0,0,0) 80%);
  pointer-events:none;
}

/* Ensure caption always above everything */
.hero .hero-caption{z-index:10 !important;}
.hero .hero-badge,
.hero .hero-caption h2,
.hero .hero-caption p,
.hero .hero-btn{
  opacity:1 !important;
  color:#ffffff;
  mix-blend-mode:normal !important;
  filter:none !important;
}

/* Make text vivid (canlı) without dimming */
.hero .hero-caption h2{
  text-shadow: 0 10px 28px rgba(0,0,0,.55);
}
.hero .hero-caption p{
  text-shadow: 0 8px 22px rgba(0,0,0,.55);
}


/* ===== v27: per-slide overlay (SVG-like), guaranteed visible, text unaffected ===== */
/* Disable previous swiper overlay to avoid layering issues */
.hero .swiper::before{display:none !important;}

/* Each slide gets its own left-to-right gradient overlay */
.hero .swiper-slide{position:relative;}
.hero .swiper-slide::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:2; /* above image, below caption */
  pointer-events:none;
  background: linear-gradient(90deg,
    rgba(0,0,0,.70) 0%,
    rgba(0,0,0,.35) 55%,
    rgba(0,0,0,0) 80%);
}

/* Layer order inside slide */
.hero .swiper-slide img{position:relative; z-index:1;}
.hero .swiper-slide .hero-caption{position:absolute; z-index:3;}


/* ===== v28: slightly more transparent left-dim overlay ===== */
.hero .swiper-slide::before{
  background: linear-gradient(90deg,
    rgba(0,0,0,.55) 0%,
    rgba(0,0,0,.28) 55%,
    rgba(0,0,0,0) 80%) !important;
}


/* ===== v29: stronger left dim + hero button text black ===== */
.hero .swiper-slide::before{
  background: linear-gradient(90deg,
    rgba(0,0,0,.62) 0%,
    rgba(0,0,0,.32) 55%,
    rgba(0,0,0,0) 80%) !important;
}

/* "Hizmetlerimiz" butonu yazı rengi siyah */
.hero .hero-btn{
  color:#111827 !important;
}


/* ===== Brands marquee (logos scrolling) ===== */
.brand-marquee{
  overflow:hidden;
  border:1px solid var(--border);
  border-radius:18px;
  background: rgba(255,255,255,.02);
  padding:14px 0;
  margin-top:14px;
}
.brand-track{
  display:flex;
  gap:18px;
  align-items:center;
  width:max-content;
  animation: brandScroll 28s linear infinite;
  padding:0 18px;
}
.brand-item{
  display:flex;
  align-items:center;
  justify-content:center;
  height:54px;
}
.brand-item img{
  height:54px;
  width:auto;
  display:block;
  opacity:.95;
  filter: none;
}
@keyframes brandScroll{
  from{ transform: translateX(0); }
  to{ transform: translateX(-50%); }
}

/* Pause on hover */
.brand-marquee:hover .brand-track{ animation-play-state: paused; }


/* ===== Brands section background image ===== */
.brands-section .card{
  position: relative;
  overflow: hidden;
  background-image: url('assets/img/brands-bg.jpg');
  background-size: cover;
  background-position: center;
}
.brands-section .card::before{
  content:"";
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.55);
  z-index:0;
}
.brands-section .card-inner{position:relative; z-index:1;}


/* ===== v36 badge icon ===== */
.badge{
  display:inline-flex;
  align-items:center;
  gap:10px;
}
.badge-icon{
  width:18px;
  height:18px;
  display:block;
}


/* ===== v37 Brands grid (no marquee) ===== */
.brand-marquee, .brand-track { 
  animation: none !important;
}

.brand-grid{
  margin-top:16px;
  display:grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap:14px;
}
.brand-tile{
  height:68px;
  border:1px solid var(--border);
  border-radius:16px;
  background: rgba(255,255,255,.02);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:10px;
  transition: transform .25s ease, background .25s ease, border-color .25s ease;
}
.brand-tile:hover{
  transform: translateY(-2px);
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.20);
}
.brand-tile img{
  max-height:46px;
  max-width:100%;
  width:auto;
  height:auto;
  display:block;
  opacity:.95;
}

@media (max-width: 1100px){
  .brand-grid{ grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 720px){
  .brand-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .brand-tile{ height:64px; }
}


/* ===== v38 Brands grid 4x4 ===== */
.brand-grid{
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}


/* ===== v39 Floating contact (phone + WhatsApp) ===== */
.floating-contact{
  position: fixed;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.fc-btn{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(15, 23, 42, .78);
  backdrop-filter: blur(10px);
  color: rgba(229,231,235,.98);
  text-decoration: none;
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
  transition: transform .2s ease, background .2s ease, border-color .2s ease;
  max-width: 210px;
}

.fc-btn:hover{
  transform: translateX(-2px);
  background: rgba(15, 23, 42, .88);
  border-color: rgba(255,255,255,.28);
}

.fc-icon{
  width: 34px;
  height: 34px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,.06);
}

.fc-phone .fc-icon{ color: rgba(148,163,184,.98); }
.fc-wa .fc-icon{ color: rgba(34,197,94,.98); }

.fc-text{
  font-weight: 700;
  letter-spacing: .2px;
  white-space: nowrap;
}

/* Mobile: keep visible and ergonomic */
@media (max-width: 720px){
  .floating-contact{
    top: auto;
    bottom: 16px;
    right: 12px;
    transform: none;
    gap: 10px;
  }
  .fc-btn{
    border-radius: 18px;
    padding: 12px 14px;
  }
}


/* ===== v42 Floating contact: bottom-right on all devices ===== */
.floating-contact{
  top: auto !important;
  bottom: 16px !important;
  right: 16px !important;
  transform: none !important;
}