/* ===========================
   Valebak — Mobile-first UI
   Sıfır ağır kütüphane • Hızlı • Net
   =========================== */

:root{
  --bg: #0A1220;
  --bg2: #0E1A30;
  --card: rgba(255,255,255,.06);
  --card2: rgba(255,255,255,.08);
  --text: rgba(255,255,255,.92);
  --muted: rgba(255,255,255,.70);
  --border: rgba(255,255,255,.12);
  --accent: #D4AF37;
  --accent2: #E9C95E;
  --shadow: 0 18px 50px rgba(0,0,0,.35);
  --radius: 18px;
  --radius2: 24px;
  --container: 1120px;
  --wa: #25D366;
  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: .75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  background: radial-gradient(1000px 700px at 20% 0%, rgba(212,175,55,.10), transparent 60%),
              radial-gradient(800px 600px at 80% 10%, rgba(233,201,94,.08), transparent 55%),
              linear-gradient(180deg, var(--bg), var(--bg2));
  color: var(--text);
  line-height: 1.55;
  overflow-x:hidden;
}

a{color:inherit; text-decoration:none}
a:focus-visible, button:focus-visible, summary:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:10px}
img, svg{max-width:100%; display:block}
svg{fill: currentColor}

.container{
  width:min(var(--container), calc(100% - 2rem));
  margin-inline:auto;
}

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

.skip-link{
  position:absolute; left:1rem; top:1rem;
  transform:translateY(-200%);
  background:#fff; color:#000; padding:.6rem .9rem; border-radius:12px;
  z-index:9999;
}
.skip-link:focus{transform:translateY(0)}

.header{
  position:sticky; top:0; z-index:50;
  backdrop-filter: blur(12px);
  background: rgba(10,18,32,.72);
  border-bottom:1px solid var(--border);
}

.header__inner{
  display:flex; align-items:center; justify-content:space-between;
  padding:.9rem 0;
  gap:1rem;
}

.brand{
  display:flex; align-items:center; gap:.75rem;
}
.brand__mark{
  width:44px; height:44px; border-radius:14px;
  display:grid; place-items:center;
  background: linear-gradient(135deg, rgba(212,175,55,.25), rgba(255,255,255,.06));
  border:1px solid rgba(212,175,55,.30);
  color: var(--accent2);
  font-weight:800;
  letter-spacing:.5px;
}

.brand__mark img{display:block; width:28px; height:28px; object-fit:contain}
.brand__text strong{display:block; font-size:1rem}
.brand__text span{display:block; font-size:.82rem; color:var(--muted)}

.nav{
  display:none;
  align-items:center; gap:.9rem;
}
.nav a{
  color:var(--muted);
  padding:.55rem .6rem;
  border-radius:12px;
}
.nav a:hover{background:rgba(255,255,255,.05); color:var(--text)}

/* Nav dropdown */
.nav__dd{position:relative}
.nav__dd > summary{list-style:none; cursor:pointer; color:var(--muted); padding:.55rem .6rem; border-radius:12px;}
.nav__dd > summary::-webkit-details-marker{display:none}
.nav__dd[open] > summary{background:rgba(255,255,255,.05); color:var(--text)}
.nav__ddmenu{position:absolute; right:0; top:calc(100% + 10px); min-width: 320px; display:grid; gap:10px; padding:10px; border-radius:16px; background: rgba(10,18,32,.96); border:1px solid var(--border); box-shadow: var(--shadow);} 
.nav__ddgroup{display:grid; gap:4px; padding:8px; border-radius:14px; border:1px solid rgba(255,255,255,.10); background: rgba(255,255,255,.03)}
.nav__ddtitle{padding:.25rem .6rem; font-size:.72rem; letter-spacing:.10em; text-transform:uppercase; color:rgba(255,255,255,.55)}
.nav__ddmenu a{padding:.55rem .6rem; border-radius:12px; color:var(--muted)}
.nav__ddmenu a:hover{background:rgba(255,255,255,.06); color:var(--text)}
/* Mobile: make dropdown menu flow */
@media (max-width: 959px){
  .nav__ddmenu{position:static; min-width:auto; background:transparent; border:none; padding:0; box-shadow:none}
  .nav__ddgroup{background:transparent; border:none; padding:0}
  .nav__dd > summary{padding:.6rem .6rem}
}

.header__actions{display:none; align-items:center; gap:.5rem; margin-left:.25rem}

.nav__cta{
  background: rgba(212,175,55,.14);
  border:1px solid rgba(212,175,55,.22);
  color: var(--text) !important;
}

.nav-toggle{
  display:inline-flex;
  flex-direction:column;
  gap:6px;
  padding:.6rem .65rem;
  border-radius:14px;
  border:1px solid var(--border);
  background: rgba(255,255,255,.04);
  color: var(--text);
}
.nav-toggle__bar{
  width:22px; height:2px; background: var(--text); opacity:.9;
  border-radius:2px;
}

/* Mobile nav panel */
.nav--open{
  display:flex;
  position:absolute;
  left:1rem;
  right:1rem;
  top:calc(100% + .6rem);
  flex-direction:column;
  background: rgba(10,18,32,.92);
  border:1px solid var(--border);
  border-radius: var(--radius);
  padding:.6rem;
  box-shadow: var(--shadow);
}

/* Hero */
.hero{
  padding: 2.2rem 0 1.4rem;
}
.hero__grid{
  display:grid;
  gap:1.2rem;
}
.badge{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  padding:.38rem .65rem;
  border-radius:999px;
  background: rgba(212,175,55,.14);
  border:1px solid rgba(212,175,55,.20);
  color: rgba(255,255,255,.88);
  font-size:.85rem;
  margin:0 0 .8rem;
}

h1{
  font-size: clamp(1.9rem, 4.8vw, 3.1rem);
  line-height: 1.12;
  margin:.2rem 0 .8rem;
  letter-spacing:-.02em;
}
.accent{color: var(--accent2)}
.lead{
  font-size: 1.05rem;
  color: rgba(255,255,255,.82);
  margin: 0 0 1rem;
  max-width: 60ch;
}
.hero__highlights{
  margin: 0 0 1.1rem;
  padding:0;
  list-style:none;
  display:grid;
  gap:.35rem;
  color: rgba(255,255,255,.80);
}
.micro{
  margin: 1rem 0 0;
  color: var(--muted);
  font-size: .92rem;
}

.cta-row{
  display:grid;
  gap:.65rem;
  grid-template-columns: 1fr;
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.6rem;
  padding:.95rem 1rem;
  border-radius: 16px;
  border:1px solid var(--border);
  background: rgba(255,255,255,.05);
  color: var(--text);
  font-weight:700;
  letter-spacing:.2px;
  transition: transform .12s ease, background .12s ease, border-color .12s ease;
  min-height: 48px;
}
.btn:hover{transform: translateY(-1px); background: rgba(255,255,255,.07)}
.btn--primary{
  background: linear-gradient(135deg, rgba(212,175,55,.35), rgba(255,255,255,.06));
  border-color: rgba(212,175,55,.35);
}
.btn--ghost{
  background: rgba(255,255,255,.04);
}
.btn--sm{padding:.7rem .85rem; border-radius:14px; min-height: 42px}
/* WhatsApp button variant + block buttons */
.btn__icon{display:inline-flex; align-items:center}
.btn__icon svg{fill: currentColor; opacity:.95}
.btn--xs{
  padding: .35rem .6rem;
  min-height: 32px;
  border-radius: 999px;
  font-size: .86rem;
}


.btn--wa{
  background: rgba(37,211,102,.16);
  border-color: rgba(37,211,102,.28);
}
.btn--wa:hover{ background: rgba(37,211,102,.22); }

.btn--block{width:100%;}


.hero__card{
  background: rgba(255,255,255,.04);
  border:1px solid var(--border);
  border-radius: var(--radius2);
  padding: 1.1rem;
  box-shadow: var(--shadow);
}
.h3{font-size:1.15rem; margin:.1rem 0 .9rem}
.muted{color: var(--muted)}

.service-pills{
  display:grid;
  gap:.6rem;
}
.pill{
  background: rgba(255,255,255,.04);
  border:1px solid var(--border);
  border-radius: 16px;
  padding:.8rem .9rem;
}
.pill:hover{background: rgba(255,255,255,.06)}
.pill__title{display:block; font-weight:800}
.pill__meta{display:block; color: var(--muted); font-size:.92rem; margin-top:.15rem}
.hero__mini{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:.65rem;
  margin: .95rem 0 .2rem;
}
.mini{
  border:1px solid var(--border);
  background: rgba(255,255,255,.03);
  border-radius: 16px;
  padding:.75rem .85rem;
}
.mini__k{display:block; color: var(--muted); font-size:.85rem}
.mini__v{display:block; font-weight:800}

.divider{
  height:1px;
  background: var(--border);
  margin: .95rem 0 .8rem;
}

.section{padding: 2.2rem 0}
.section--alt{
  background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0));
  border-top: 1px solid rgba(255,255,255,.05);
  border-bottom: 1px solid rgba(255,255,255,.05);
}
.section__head{
  margin-bottom: 1.2rem;
}
.section__head h2{
  margin:0 0 .35rem;
  font-size: clamp(1.4rem, 3.2vw, 2rem);
  letter-spacing:-.01em;
}

.grid{
  display:grid;
  gap: 1rem;
}
.grid--cards{
  grid-template-columns: 1fr;
}
.card{
  background: rgba(255,255,255,.04);
  border:1px solid var(--border);
  border-radius: var(--radius2);
  padding: 1.05rem;
  box-shadow: 0 12px 40px rgba(0,0,0,.25);
}
.card--featured{
  border-color: rgba(212,175,55,.32);
  background: linear-gradient(135deg, rgba(212,175,55,.16), rgba(255,255,255,.03));
}
.card__icon{
  width:42px; height:42px;
  border-radius: 14px;
  display:grid; place-items:center;
  color: var(--accent2);
  background: rgba(212,175,55,.12);
  border:1px solid rgba(212,175,55,.22);
  margin-bottom:.7rem;
}
.card h3{margin:.15rem 0 .45rem}
.card p{margin:.3rem 0 .75rem; color: rgba(255,255,255,.82)}
.list{
  margin:0 0 .7rem;
  padding:0;
  list-style:none;
  color: var(--muted);
  display:grid;
  gap:.25rem;
}
.link{
  color: var(--accent2);
  font-weight:800;
}
.link:hover{text-decoration:underline}

.grid--why{
  grid-template-columns: 1fr;
}
.why{
  background: rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.10);
  border-radius: var(--radius2);
  padding: 1rem 1.05rem;
}
.why h3{margin:.1rem 0 .35rem}
.why p{margin:0; color: var(--muted)}

.trustbar{
  margin-top: 1.2rem;
  display:grid;
  grid-template-columns: 1fr;
  gap:.75rem;
}
.trust{
  background: rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.10);
  border-radius: var(--radius2);
  padding: .9rem 1rem;
}
.trust__k{display:block; color: var(--muted); font-size:.9rem}
.trust__v{display:block; font-weight:900; font-size:1.05rem}

.grid--testimonials{
  grid-template-columns: 1fr;
}
.tcard{
  margin:0;
  background: rgba(255,255,255,.04);
  border:1px solid var(--border);
  border-radius: var(--radius2);
  padding: 1rem 1.05rem;
}
.tcard blockquote{
  margin:0 0 .85rem;
  color: rgba(255,255,255,.86);
}
.tcard figcaption{
  display:flex;
  flex-wrap:wrap;
  gap:.45rem .65rem;
  align-items:center;
  color: var(--muted);
  font-size:.92rem;
}
.tcard__name{font-weight:900; color: var(--text)}
.tcard__meta{opacity:.95}
.tcard__tag{
  margin-left:auto;
  font-size:.78rem;
  padding:.18rem .5rem;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.05);
}

.faq{
  display:grid;
  gap:.75rem;
}
details{
  background: rgba(255,255,255,.04);
  border:1px solid var(--border);
  border-radius: var(--radius2);
  padding:.15rem .9rem;
}
summary{
  cursor:pointer;
  padding:.85rem .15rem;
  font-weight:900;
}
.faq__a{
  padding: 0 .15rem .95rem;
  color: var(--muted);
}

.contact{
  display:grid;
  gap: 1rem;
  align-items:start;
}
.contact__actions{
  display:grid;
  gap:.65rem;
}

.grid--tech{
  grid-template-columns: 1fr;
}
.tech{
  background: rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.10);
  border-radius: var(--radius2);
  padding: 1rem 1.05rem;
}
.tech h3{margin:.1rem 0 .35rem}
.tech p{margin:0; color: var(--muted)}

.footer{
  padding: 1.6rem 0 5.2rem; /* space for CTA bar */
  border-top: 1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.15);
}
.footer__grid{
  display:grid;
  gap: 1.2rem;
}
.footer__brand{
  display:flex;
  align-items:center;
  gap:.7rem;
  margin-bottom:.6rem;
}
.footer__nav{
  display:grid;
  gap:.35rem;
  margin-top:.45rem;
  color: var(--muted);
}
.footer__nav a:hover{color: var(--text)}
.footer__contact{
  margin-top:.45rem;
  display:grid;
  gap:.35rem;
  color: var(--muted);
}
.footer__contact a:hover{color: var(--text)}

.cta-bar{
  position: fixed;
  left: .8rem;
  right: .8rem;
  bottom: .8rem;
  z-index: 60;
  display:grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap:.6rem;
  padding:.6rem;
  border-radius: 22px;
  border:1px solid rgba(255,255,255,.16);
  background: rgba(10,18,32,.78);
  backdrop-filter: blur(12px);
  box-shadow: var(--shadow);
}
.cta-bar__btn{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:.85rem .6rem;
  border-radius: 18px;
  background: rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.10);
  font-weight:900;
}
.cta-bar__btn:hover{background: rgba(255,255,255,.07)}

/* Desktop */
@media (min-width: 860px){
  .nav{display:flex}
  .nav-toggle{display:none}
  .header__actions{display:flex}
  .hero{padding: 3.2rem 0 1.8rem}
  .hero__grid{grid-template-columns: 1.35fr .95fr; gap:1.6rem; align-items:start}
  .cta-row{grid-template-columns: 1fr 1fr 1fr}
  .grid--cards{grid-template-columns: repeat(3, 1fr)}
  .grid--why{grid-template-columns: repeat(2, 1fr)}
  .trustbar{grid-template-columns: repeat(3, 1fr)}
  .grid--testimonials{grid-template-columns: repeat(3, 1fr)}
  .contact{grid-template-columns: 1.2fr .8fr; gap: 1.2rem}
  .grid--tech{grid-template-columns: repeat(2, 1fr)}
  .footer__grid{grid-template-columns: 1.2fr .8fr .9fr}
  .cta-bar{left: 50%; transform: translateX(-50%); width: min(760px, calc(100% - 2rem))}
}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .btn, .nav a{transition:none}
}


/* Reviews CTA */
.review-cta{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem;justify-content:space-between;margin-top:1rem;padding:1rem 1.05rem;border:1px solid var(--border);border-radius:var(--radius2);background:rgba(255,255,255,.03)}
.review-cta .muted{margin:0;max-width:52ch}


/* ===========================
   Lead Form + Sticky CTA Bar
   =========================== */

.form{
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 18px;
  box-shadow: var(--shadow);
}

.form__grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

.field{display:flex; flex-direction:column; gap:6px}
.field > span{font-size:.92rem; color: var(--muted)}
.field input, .field select{
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.04);
  color: var(--text);
  outline: none;
}
.field input::placeholder{color: rgba(255,255,255,.55)}
/* Select dropdown contrast (avoid white-on-white options) */
.field select{color-scheme: dark;}
.field select option{background:#0A1220; color:#ffffff;}
.field select option:disabled{color:rgba(255,255,255,.6);}

.field input:focus, .field select:focus{border-color: rgba(233,201,94,.55)}
.field--full{grid-column: 1 / -1}

.form__actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top: 14px;
}

@media (min-width: 780px){
  .form{padding: 22px}
  .form__grid{grid-template-columns: 1.2fr 1fr 1fr; gap: 14px}
  .field--full{grid-column: 1 / -1}
}

.cta-bar{
  position: fixed;
  left: 10px;
  right: 10px;
  bottom: 10px;
  z-index: 60;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  background: rgba(10,18,32,.78);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 10px;
  backdrop-filter: blur(12px);
  box-shadow: var(--shadow);
}

.cta-bar__btn{
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 12px 10px;
  border-radius: 14px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  font-weight: 700;
}
.cta-bar__btn:hover{background: rgba(255,255,255,.10)}

@media (min-width: 980px){
  .cta-bar{display:none}
}

@media (max-width: 979px){
  body{padding-bottom: 82px}
}


/* Horizontal reviews slider */
.reviews{position:relative}
.reviews__track{display:flex; gap:14px; overflow-x:auto; padding: 6px 6px 14px; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; scrollbar-width:thin;}
.review{scroll-snap-align:start; flex:0 0 86%; max-width: 520px; background: var(--card); border:1px solid var(--border); border-radius:18px; padding:16px; box-shadow: var(--shadow);}
.review blockquote{margin:0 0 10px; color:var(--text); font-size:1rem; line-height:1.5}
.review figcaption{display:flex; flex-wrap:wrap; gap:8px; align-items:center; color:var(--muted); font-size:.92rem}
.review__name{color:var(--text); font-weight:700}
.review__stars{color: var(--accent2); letter-spacing:.8px}
.reviews__btn{position:absolute; top: 45%; transform:translateY(-50%); width:40px; height:40px; border-radius:14px; border:1px solid var(--border); background: rgba(255,255,255,.06); color: var(--text); display:none; align-items:center; justify-content:center;}
.reviews__btn:hover{background: rgba(255,255,255,.10)}
.reviews__btn--prev{left:-6px}
.reviews__btn--next{right:-6px}
@media (min-width: 780px){
  .review{flex:0 0 48%}
}
@media (min-width: 980px){
  .review{flex:0 0 360px}
  .reviews__btn{display:flex}
}

/* Prevent background scroll when mobile menu open */
html.nav-is-open, html.nav-is-open body{overflow:hidden;}


/* ===== Valebak PRO Header ===== */
.header--pro{
  background:
    radial-gradient(900px 260px at 20% 0%, rgba(212,175,55,.08), transparent 60%),
    linear-gradient(180deg, rgba(10,12,18,.92), rgba(10,18,32,.70));
}
.header__topbar{
  font-size: .86rem;
  border-bottom: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.14);
}
.topbar__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  padding: .45rem 0;
}
.topbar__left, .topbar__right{
  display:flex;
  align-items:center;
  gap: 10px;
  flex-wrap: wrap;
}
.topbar__pill{
  display:inline-flex;
  align-items:center;
  padding: .25rem .55rem;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.92);
}
.topbar__sep{opacity:.6}
.topbar__text{opacity:.9}
.topbar__link{
  color: rgba(255,255,255,.85);
  text-decoration:none;
}
.topbar__link:hover{color: var(--text); text-decoration: underline;}
.topbar__wa{ text-decoration:none; }

.brand__name{font-size:1rem}
.brand__tagline{display:block; font-size:.82rem; opacity:.85}

.nav__list{
  display:flex;
  align-items:center;
  gap:.25rem;
  flex-wrap:wrap;
  list-style:none;
  padding:0;
  margin:0;
}
.nav__spacer{flex:1}
.nav__highlight{
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14);
  color: var(--text) !important;
}
.nav__highlight:hover{background: rgba(255,255,255,.09);}

@media (max-width: 959px){
  .topbar__right{display:none;} /* mobilde sade */
  .nav--open .nav__list{
    flex-direction:column;
    align-items:stretch;
    gap: .15rem;
  }
  .nav--open .nav__spacer{display:none;}
  .nav--open .nav__list > li{width:100%;}
  .nav--open a{display:block;}
}


/* Header dropdown title links */
.nav__ddtitleLink{
  color: inherit;
  text-decoration: none;
  display:inline-flex;
  align-items:center;
  gap:.4rem;
}
.nav__ddtitleLink:hover{ text-decoration: underline; }

/* Compact CTA rows inside sections */
.cta-row--section{ margin-top: 14px; }
@media (min-width: 720px){
  .cta-row--section{ grid-template-columns: 1fr 1fr; }
}

/* Service category pages */
.grid--cards{
  display:grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
@media (min-width: 860px){
  .grid--cards{ grid-template-columns: 1fr 1fr; gap: 16px; }
}
.service-card{
  padding: 16px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 18px;
  background: rgba(255,255,255,.03);
}
.service-card__title{
  margin: 0 0 8px;
  font-size: 1.1rem;
}
.service-card__title a{ color: inherit; text-decoration:none; }
.service-card__title a:hover{ text-decoration: underline; }
.service-card__list{
  display:grid;
  gap: 6px;
  margin: 10px 0 0;
  padding-left: 18px;
}



/* =========================
   Valebak — Premium Footer (VB)
   ========================= */
.footer--vb{
  padding: 26px 0 5.2rem; /* space for sticky CTA bar */
  border-top: 1px solid rgba(255,255,255,.10);
  background:
    radial-gradient(900px 360px at 12% 0%, rgba(212,175,55,.10), transparent 60%),
    radial-gradient(740px 320px at 88% 5%, rgba(37,211,102,.06), transparent 55%),
    linear-gradient(180deg, rgba(10,12,18,1), rgba(6,8,12,1));
}

.vb-foot{display:block}

.vb-foot__cta{
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 18px;
  padding: 18px;
  border-radius: var(--radius2);
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.04);
  backdrop-filter: blur(10px);
  box-shadow: var(--shadow);
  margin-bottom: 18px;
}

.vb-foot__kicker{
  font-size: .9rem;
  opacity: .9;
  letter-spacing: .2px;
  color: var(--muted);
}
.vb-foot__headline{
  margin: .15rem 0 0;
  font-size: 1.35rem;
  line-height: 1.2;
}
.vb-foot__sub{margin: .55rem 0 0; max-width: 60ch}

.vb-foot__chips{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 12px;
}
.vb-chip{
  display:inline-flex;
  align-items:center;
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.03);
  font-size: .9rem;
}

.vb-foot__ctaActions{
  display:flex;
  flex-direction: column;
  gap: 10px;
  align-items: stretch;
  justify-content: center;
}
.vb-foot__note{font-size:.9rem; opacity:.9; margin-top: 2px}

/* content grid */
.vb-foot__grid{
  display:grid;
  grid-template-columns: 1.25fr 1.1fr 1fr 1fr;
  gap: 18px;
  padding: 10px 0 8px;
}
.vb-title{margin: 6px 0 10px; font-size: 1rem; font-weight: 800}

.vb-brand{
  display:flex;
  gap: 12px;
  align-items:center;
  text-decoration:none;
}
.vb-brand__logo{border-radius: 12px; display:block}
.vb-brand__name{font-size: 1.05rem}
.vb-brand__slogan{display:block; opacity:.85; font-size:.92rem; margin-top:2px}
.vb-desc{margin: 12px 0; max-width: 55ch}

.vb-links{
  display:flex;
  flex-direction: column;
  gap: 8px;
}
.vb-links a{text-decoration:none; opacity:.92}
.vb-links a:hover{opacity:1; text-decoration: underline}

.vb-mini{
  margin-top: 12px;
  padding: 12px;
  border-radius: var(--radius);
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.03);
}
.vb-mini__title{font-weight: 850; margin-bottom: 8px}
.vb-mini__link{display:inline-flex; margin-bottom: 10px; text-decoration:none; opacity:.92}
.vb-mini__link:hover{opacity:1; text-decoration: underline}
.vb-mini__btn{
  width: 100%;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.04);
  color: inherit;
  cursor: pointer;
  font-weight: 750;
}
.vb-mini__btn:hover{background: rgba(255,255,255,.06)}

.vb-card{
  display:flex;
  flex-direction: column;
  gap: 3px;
  padding: 12px;
  border-radius: var(--radius);
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.03);
  text-decoration:none;
}
.vb-card__v{font-weight: 800}

.vb-trust{
  margin-top: 12px;
  padding: 12px;
  border-radius: var(--radius);
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.02);
}
.vb-trust__row{display:flex; align-items:center; gap: 10px; padding: 6px 0}
.vb-dot{
  width: 10px; height: 10px;
  border-radius: 999px;
  background: rgba(37,211,102,.9);
  box-shadow: 0 0 0 6px rgba(37,211,102,.12);
}

.vb-legal p{margin: 0 0 8px}

.vb-foot__bottom{
  display:flex;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  padding-top: 12px;
  margin-top: 10px;
  border-top: 1px solid rgba(255,255,255,.10);
}

.vb-acc{display:none}

/* responsive */
@media (max-width: 980px){
  .vb-foot__cta{grid-template-columns: 1fr}
  .vb-foot__grid{grid-template-columns: 1fr 1fr}
}
@media (max-width: 640px){
  .vb-foot__grid{grid-template-columns: 1fr}
  .vb-services .vb-links{display:none}
  .vb-acc{display:block; margin-top: 10px}
  .vb-acc summary{
    list-style:none;
    cursor:pointer;
    padding: 12px;
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,.14);
    background: rgba(255,255,255,.03);
    font-weight: 850;
  }
  .vb-acc[open] summary{background: rgba(255,255,255,.06)}
  .vb-acc nav{margin-top: 10px}
}
/* ===== Valebak Footer v2 (Premium + Compact) ===== */
.footer--vb2{
  padding: 20px 0 14px;
  border-top: 1px solid rgba(255,255,255,.10);
  background:
    radial-gradient(760px 280px at 15% 0%, rgba(255,255,255,.07), transparent 60%),
    radial-gradient(620px 240px at 85% 10%, rgba(255,255,255,.05), transparent 55%),
    linear-gradient(180deg, rgba(10,12,18,1), rgba(6,8,12,1));
}

/* CTA */
.vb2__cta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 14px;
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.04);
  backdrop-filter: blur(8px);
  margin-bottom: 14px;
}
.vb2__ctaText strong{ display:block; font-size: 1rem; line-height: 1.2; }
.vb2__ctaText .muted{ display:block; margin-top: 3px; }
.vb2__ctaActions{ display:flex; gap: 10px; flex-wrap: wrap; justify-content:flex-end; }

/* Buttons (compact) */
.vb2-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.16);
  text-decoration:none;
  font-weight: 750;
  line-height: 1;
  white-space: nowrap;
}
.vb2-ic svg{ fill: currentColor; opacity: .95; }
.vb2-btn:hover{ transform: translateY(-1px); }
.vb2-btn:active{ transform: translateY(0); }
.vb2-btn--wa{ background: rgba(37,211,102,.16); }
.vb2-btn--ghost{ background: rgba(255,255,255,.05); }

/* Grid */
.vb2__grid{
  display:grid;
  grid-template-columns: 1.35fr 1.1fr 1fr 0.9fr;
  gap: 14px;
  padding: 8px 0 6px;
}

.vb2__logo{
  display:flex;
  align-items:center;
  gap: 10px;
  text-decoration:none;
}
.vb2__logo img{ border-radius: 12px; display:block; }
.vb2__logoText strong{ display:block; font-size: 1.02rem; }
.vb2__logoText .muted{ display:block; font-size: .9rem; opacity:.85; margin-top:2px; }

.vb2__desc{ margin: 10px 0 0; max-width: 52ch; }
.vb2__tiny{ display:inline-block; opacity:.9; }

.vb2__quick{
  display:flex;
  gap: 10px;
  align-items:center;
  margin-top: 10px;
  flex-wrap: wrap;
}
.vb2__link{ text-decoration:none; opacity:.92; }
.vb2__link:hover{ opacity:1; text-decoration: underline; }
.vb2__copy{
  padding: 9px 11px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.03);
  color: inherit;
  cursor: pointer;
  font-weight: 750;
}
.vb2__copy:hover{ background: rgba(255,255,255,.06); }

.vb2__title{
  margin: 4px 0 10px;
  font-size: .98rem;
  font-weight: 850;
}
.vb2__links{
  display:flex;
  flex-direction: column;
  gap: 7px;
}
.vb2__links a{
  text-decoration:none;
  opacity:.92;
}
.vb2__links a:hover{ opacity:1; text-decoration: underline; }

.vb2__card{
  display:flex;
  flex-direction: column;
  gap: 3px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.03);
  text-decoration:none;
  margin-bottom: 10px;
}
.vb2__small{ margin-top: 10px; }

/* Bottom */
.vb2__bottom{
  display:flex;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  padding-top: 10px;
  margin-top: 10px;
  border-top: 1px solid rgba(255,255,255,.10);
}

/* Mobile */
.vb2__acc{ display:none; }

@media (max-width: 980px){
  .vb2__grid{ grid-template-columns: 1fr 1fr; }
  .vb2__cta{ flex-direction: column; align-items:flex-start; }
  .vb2__ctaActions{ width:100%; justify-content:flex-start; }
}

@media (max-width: 640px){
  .vb2__grid{ grid-template-columns: 1fr; }
  /* uzun listeyi mobilde sakla, accordion göster */
  .vb2__col[aria-label="Hizmetler"] .vb2__links{ display:none; }
  .vb2__acc{ display:block; margin-top: 10px; }
  .vb2__acc summary{
    list-style:none;
    cursor:pointer;
    padding: 10px 12px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,.14);
    background: rgba(255,255,255,.03);
    font-weight: 850;
  }
  .vb2__acc[open] summary{ background: rgba(255,255,255,.06); }
  .vb2__acc nav{ margin-top: 10px; }
}