/* =========================================================
   Ana sayfa — Markalarımız bölümü (v4)
   ========================================================= */

.marka-band-v4{
  position:relative;
  overflow:hidden;
  padding:96px 44px 92px;
  background:
    linear-gradient(180deg,#08182a 0%, #0b2036 40%, #082431 100%);
  isolation:isolate;
}

/* zemin dokusu + ışık kürelieri */
.marka-band-v4 .mb-fon{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size:64px 64px, 64px 64px;
  mask-image:radial-gradient(120% 90% at 50% 30%, #000 35%, transparent 78%);
  -webkit-mask-image:radial-gradient(120% 90% at 50% 30%, #000 35%, transparent 78%);
}
.marka-band-v4 .mb-orb{
  position:absolute; border-radius:50%; filter:blur(90px); opacity:.42;
}
.marka-band-v4 .mb-orb.o1{ width:520px; height:520px; left:-120px; top:-140px; background:#1f7d6a; }
.marka-band-v4 .mb-orb.o2{ width:460px; height:460px; right:-100px; top:40px; background:#1c5c8a; opacity:.36; }
.marka-band-v4 .mb-orb.o3{ width:640px; height:340px; left:38%; bottom:-200px; background:#2aa15c; opacity:.24; }

.marka-band-v4 .mb-ic{ position:relative; z-index:1; max-width:1320px; margin:0 auto; }

/* ---------- BAŞLIK ---------- */
.marka-band-v4 .mb-baslik{ max-width:760px; margin:0 auto 52px; text-align:center; }
.marka-band-v4 .mb-etiket{
  display:inline-flex; align-items:center; gap:9px;
  font-size:11.5px; font-weight:800; letter-spacing:.22em; text-transform:uppercase;
  color:#7ef0ae;
  background:rgba(47,190,110,.12);
  border:1px solid rgba(47,190,110,.30);
  padding:7px 16px; border-radius:999px;
  margin-bottom:20px;
}
.marka-band-v4 .mb-etiket .nokta{
  width:7px; height:7px; border-radius:50%; background:#2fbe6e;
  box-shadow:0 0 0 4px rgba(47,190,110,.22);
  animation:mbNabiz 2.4s ease-in-out infinite;
}
@keyframes mbNabiz{ 0%,100%{ box-shadow:0 0 0 4px rgba(47,190,110,.22);} 50%{ box-shadow:0 0 0 8px rgba(47,190,110,.05);} }

.marka-band-v4 .mb-baslik h2{
  margin:0 0 16px;
  font-family:'Poppins',system-ui,sans-serif;
  font-weight:800; font-size:clamp(28px,3.4vw,44px); line-height:1.14;
  letter-spacing:-.02em; color:#fff;
}
.marka-band-v4 .mb-baslik h2 em{
  font-style:normal;
  background:linear-gradient(100deg,#4fdc86 0%, #34c7c0 48%, #4aa8ea 100%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}
.marka-band-v4 .mb-baslik p{
  margin:0; font-size:15.5px; line-height:1.7; color:rgba(206,224,238,.80);
}

/* ---------- IZGARA ---------- */
.marka-band-v4 .mb-grid{
  display:grid; grid-template-columns:repeat(5,1fr); gap:20px;
}

/* ---------- KART ---------- */
.marka-band-v4 .mb-kart{
  position:relative; display:flex; flex-direction:column;
  padding:22px 20px 20px;
  border-radius:20px;
  text-decoration:none;
  overflow:hidden;
  background:linear-gradient(180deg, rgba(255,255,255,.085) 0%, rgba(255,255,255,.03) 100%);
  border:1px solid rgba(255,255,255,.10);
  box-shadow:0 16px 38px rgba(3,14,24,.42);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  transition:transform .42s cubic-bezier(.2,.8,.25,1), border-color .42s, box-shadow .42s, background .42s;
}
.marka-band-v4 .mb-kart:hover{
  transform:translateY(-10px);
  border-color:color-mix(in srgb, var(--mb-renk,#2fbe6e) 55%, transparent);
  box-shadow:0 30px 60px rgba(3,14,24,.55),
             0 0 0 1px color-mix(in srgb, var(--mb-renk,#2fbe6e) 30%, transparent),
             0 14px 44px color-mix(in srgb, var(--mb-renk,#2fbe6e) 26%, transparent);
  background:linear-gradient(180deg, rgba(255,255,255,.12) 0%, rgba(255,255,255,.04) 100%);
}

/* marka rengi aura */
.marka-band-v4 .mb-aura{
  position:absolute; top:-90px; left:50%; transform:translateX(-50%);
  width:230px; height:230px; border-radius:50%;
  background:var(--mb-renk,#2fbe6e);
  filter:blur(60px); opacity:.22; z-index:0;
  transition:opacity .42s, transform .6s;
}
.marka-band-v4 .mb-kart:hover .mb-aura{ opacity:.42; transform:translateX(-50%) translateY(10px); }

/* ışık süpürme */
.marka-band-v4 .mb-parlama{
  position:absolute; inset:0; z-index:2; pointer-events:none;
  background:linear-gradient(105deg, transparent 32%, rgba(255,255,255,.20) 48%, transparent 62%);
  transform:translateX(-130%);
  transition:transform .85s cubic-bezier(.25,.7,.3,1);
}
.marka-band-v4 .mb-kart:hover .mb-parlama{ transform:translateX(130%); }

/* ---------- LOGO PLAKASI ---------- */
.marka-band-v4 .mb-logo{
  position:relative; z-index:1;
  display:grid; place-items:center;
  height:118px; padding:14px 16px;
  border-radius:15px;
  background:linear-gradient(170deg,#ffffff 0%, #f4f8fa 62%, #e9f1f4 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,1),
    inset 0 -12px 22px rgba(11,30,52,.05),
    0 10px 22px rgba(3,14,24,.30);
  overflow:hidden;
  transition:transform .42s cubic-bezier(.2,.8,.25,1), box-shadow .42s;
}
.marka-band-v4 .mb-logo::after{
  content:""; position:absolute; inset:0;
  background:radial-gradient(120% 80% at 50% -20%, color-mix(in srgb, var(--mb-renk,#2fbe6e) 20%, transparent), transparent 62%);
  opacity:0; transition:opacity .42s;
}
.marka-band-v4 .mb-kart:hover .mb-logo{
  transform:translateY(-3px) scale(1.02);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,1),
    inset 0 -12px 22px rgba(11,30,52,.06),
    0 16px 30px rgba(3,14,24,.38);
}
.marka-band-v4 .mb-kart:hover .mb-logo::after{ opacity:1; }
.marka-band-v4 .mb-logo img{
  max-width:100%; max-height:100%; width:auto; height:auto;
  object-fit:contain; position:relative; z-index:1;
  filter:drop-shadow(0 2px 4px rgba(11,30,52,.14));
  transition:transform .5s cubic-bezier(.2,.8,.25,1);
}
.marka-band-v4 .mb-kart:hover .mb-logo img{ transform:scale(1.06); }

/* ---------- ÇİZGİ + METİN ---------- */
.marka-band-v4 .mb-cizgi{
  position:relative; z-index:1;
  display:block; height:3px; width:34px; border-radius:3px; margin:18px 0 12px;
  background:linear-gradient(90deg, var(--mb-renk,#2fbe6e), rgba(255,255,255,.16));
  transition:width .42s cubic-bezier(.2,.8,.25,1);
}
.marka-band-v4 .mb-kart:hover .mb-cizgi{ width:64px; }

.marka-band-v4 .mb-ad{
  position:relative; z-index:1;
  font-family:'Poppins',system-ui,sans-serif;
  font-weight:800; font-size:15.5px; letter-spacing:.03em;
  color:#fff; line-height:1.2;
}
.marka-band-v4 .mb-ozet{
  position:relative; z-index:1;
  display:block; margin-top:5px;
  font-size:12.5px; font-weight:700; letter-spacing:.02em;
  color:color-mix(in srgb, var(--mb-renk,#2fbe6e) 62%, #ffffff);
}
.marka-band-v4 .mb-metin{
  position:relative; z-index:1;
  display:block; margin-top:10px;
  font-size:12.8px; line-height:1.6; color:rgba(203,222,236,.72);
  flex:1 1 auto;
}

/* ---------- ALT SATIR ---------- */
.marka-band-v4 .mb-alt{
  position:relative; z-index:1;
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  margin-top:16px; padding-top:14px;
  border-top:1px solid rgba(255,255,255,.10);
}
.marka-band-v4 .mb-say{
  font-size:11px; font-weight:800; letter-spacing:.10em; text-transform:uppercase;
  color:#eafff2;
  background:color-mix(in srgb, var(--mb-renk,#2fbe6e) 34%, transparent);
  border:1px solid color-mix(in srgb, var(--mb-renk,#2fbe6e) 50%, transparent);
  padding:5px 11px; border-radius:999px;
}
.marka-band-v4 .mb-say.pasif{
  color:rgba(190,212,228,.78); background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.14);
}
.marka-band-v4 .mb-ok{
  width:30px; height:30px; border-radius:50%; display:grid; place-items:center;
  color:#fff; background:rgba(255,255,255,.09);
  border:1px solid rgba(255,255,255,.16);
  transition:background .32s, transform .32s, border-color .32s;
}
.marka-band-v4 .mb-ok svg{ width:14px; height:14px; }
.marka-band-v4 .mb-kart:hover .mb-ok{
  background:var(--mb-renk,#2fbe6e);
  border-color:transparent;
  transform:translateX(3px);
}

/* ---------- ALT ŞERİT ---------- */
.marka-band-v4 .mb-serit{
  display:flex; flex-wrap:wrap; justify-content:center; gap:12px;
  margin-top:44px;
}
.marka-band-v4 .mb-serit span{
  font-size:13px; color:rgba(206,224,238,.80);
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.10);
  padding:10px 18px; border-radius:999px;
  backdrop-filter:blur(6px);
}
.marka-band-v4 .mb-serit b{ color:#fff; font-weight:800; }

/* ---------- DUYARLI ---------- */
@media (max-width:1180px){
  .marka-band-v4{ padding:76px 24px; }
  .marka-band-v4 .mb-grid{ grid-template-columns:repeat(3,1fr); }
  .marka-band-v4 .mb-logo{ height:126px; }
}
@media (max-width:760px){
  .marka-band-v4{ padding:60px 18px; }
  .marka-band-v4 .mb-grid{ grid-template-columns:repeat(2,1fr); gap:14px; }
  .marka-band-v4 .mb-logo{ height:100px; }
  .marka-band-v4 .mb-metin{ display:none; }
}
@media (max-width:460px){
  .marka-band-v4 .mb-grid{ grid-template-columns:1fr; }
  .marka-band-v4 .mb-logo{ height:120px; }
  .marka-band-v4 .mb-metin{ display:block; }
}
