@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;600;700;800&display=swap');
/* karacanbil.net — fast, responsive, single page */

:root{
  --bg: #f6f8ff;
  --bg2:#eef2ff;
  --card:#ffffff;
  --text:#0b1220;
  --muted:#4b5b7a;
  --line: rgba(11,18,32,.12);
  --accent:#0ea5e9;
  --accent2:#6366f1;
  --radius: 16px;
  --shadow: 0 14px 40px rgba(0,0,0,.10);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family: 'Plus Jakarta Sans', ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Helvetica Neue", sans-serif;
  background: radial-gradient(1100px 600px at 20% 10%, rgba(110,231,255,.16), transparent 60%),
              radial-gradient(900px 700px at 85% 15%, rgba(124,124,255,.14), transparent 55%),
              var(--bg);
  color:var(--text);
  line-height:1.55;
}

a{color:inherit; text-decoration:none}
a:hover{opacity:.9}
img{max-width:100%; height:auto; display:block}

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

.sr{position:absolute; left:-9999px}
.skip{
  position:absolute; left:-9999px; top:8px;
  background:#fff; color:#000; padding:.5rem .75rem; border-radius:10px;
}
.skip:focus{left:8px; z-index:1000}

.header{
  position:sticky; top:0; z-index:50;
  background: rgba(255,255,255,.85); /* Biraz daha opak yaptık */
  box-shadow: 0 10px 28px rgba(0,0,0,.08); /* Gölgeyi hafiflettik */
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
  padding: 14px 28px;
}
.header__inner{
  display:flex; align-items:center; justify-content:space-between;
  max-width:1200px;
  margin:0 auto;
  padding: .85rem 0;
  gap: 1.2rem;
}

.brand{display:flex; align-items:center; gap:.65rem; flex:0 0 auto;}
.brand__logo{border-radius:12px; box-shadow: 0 0 0 1px var(--line); width:56px; height:56px; object-fit:contain;}
.brand__stack{display:flex; flex-direction:column; gap:2px; line-height:1.1}
.brand__name{font-weight:850; letter-spacing:.2px}
.brand__tag{font-size:.86rem; color:var(--muted)}

.nav{display:flex; align-items:center; gap:1rem; position:relative; flex:1; justify-content:center; gap:32px;}
.nav__toggle{
  display:none;
  border:1px solid var(--line);
  background: rgba(0,0,0,.05);
  color:var(--text);
  border-radius: 12px;
  padding:.55rem .7rem;
}
.nav__toggleBars{display:inline-block; width:18px; height:12px; position:relative;}
.nav__toggleBars::before,
.nav__toggleBars::after{
  content:""; position:absolute; left:0; right:0; height:2px; border-radius:2px;
  background: rgba(0,0,0,.7);
}
.nav__toggleBars::before{top:1px}
.nav__toggleBars::after{bottom:1px}

.nav__menu{
  display:flex; list-style:none; padding:0; margin:0;
  gap: .35rem;
}
.nav__menu a{
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  padding:.55rem .75rem;
  border-radius: 12px;
  font-weight: 650;
  font-size: .98rem;
  color:var(--muted);
}
.nav__menu a:hover{background: rgba(0,0,0,.05); color: var(--text)}
.nav__menu a:focus{
  outline: none;
  box-shadow: 0 0 0 4px rgba(110,231,255,.14);
}

.header__cta{display:flex; align-items:center; gap:.6rem; flex:0 0 auto;}
.header__cta .btn{white-space:nowrap}

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:.7rem 1rem;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--text);
  font-weight: 650;
  box-shadow: 0 4px 12px rgba(0,0,0,.05);
}
.btn--primary{
  border-color: rgba(14,165,233,.3);
  background: linear-gradient(135deg, #0ea5e9, #6366f1);
  color: #fff;
}
.btn--ghost{background: transparent; box-shadow:none; border-color: var(--line);}
.btn--wa{
  border-color: rgba(37, 211, 102, .3);
  background: linear-gradient(135deg, #25D366, #128C7E);
  color: #fff;
}
.btn--wa:hover{transform: translateY(-1px);}
.btn:active{transform: translateY(1px)}

.section{padding: 3rem 0}
.section__head{margin-bottom:1.2rem}
.section__head h2{margin:0 0 .35rem; font-size: clamp(1.5rem, 2vw, 2rem)}
.section__head p{margin:0; color: var(--muted); max-width: 70ch}

.grid{display:grid; gap: 1rem}
.cards{grid-template-columns: repeat(4, 1fr)}
.two{grid-template-columns: repeat(2, 1fr)}

/* KARTLAR ARTIK BEYAZ VE OKUNAKLI */
.card{
  background: #ffffff;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: var(--radius);
  padding: 1.1rem 1.05rem;
  box-shadow: 0 10px 25px rgba(0,0,0,.06);
  color: var(--text);
}
.card h3{margin:.1rem 0 .45rem; color: #0b1220; font-weight: 800;}
.card p{margin:0 0 .8rem; color: #4b5b7a;}
.card ul{margin:.5rem 0 0; padding-left: 1.1rem; color: #4b5b7a;}
.card li{margin:.35rem 0}

.hero{padding: 2.2rem 0 1.5rem}
.hero__grid{
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 1.6rem;
  align-items:center;
}
.badge{
  display:inline-flex;
  padding:.3rem .6rem;
  border-radius:999px;
  background: #e0f2fe;
  border: 1px solid #bae6fd;
  color: #0369a1;
  width: fit-content;
  font-weight: 700;
  font-size: 0.9rem;
}
.hero h1{
  margin:.8rem 0 .6rem;
  font-size: clamp(2rem, 2.8vw, 3rem);
  line-height:1.08;
  letter-spacing: -.02em;
  color: #0b1220;
}
.lead{color: #4b5b7a; font-size: 1.05rem; max-width: 60ch}
.hero__actions{display:flex; gap:.7rem; margin: 1.1rem 0; flex-wrap:wrap;}
.hero__trust{display:flex; flex-wrap:wrap; gap:.55rem; margin-top:.4rem}
.pill{
  font-size:.95rem;
  color: #334155;
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  padding:.35rem .65rem;
  background: #f8fafc;
  font-weight: 600;
}
.hero__media{display:flex; flex-direction:column}

/* Hero Card & Bar */
.heroCard{
  position: relative;
  border-radius: 22px;
  overflow:hidden;
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: var(--shadow);
  background: #fff;
  transition: transform .35s ease, box-shadow .35s ease;
}
.heroCard:hover{
  transform: translateY(-4px);
  box-shadow: 0 18px 55px rgba(0,0,0,.15);
}
.heroCard img{
  width:100%; 
  display:block;
  transform: translateZ(0);
  transition: transform .35s ease, filter .35s ease;
}
.heroCard:hover img{
  transform: scale(1.02);
}
.heroCard__bar{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.55rem;
  padding: .75rem .9rem;
  background: #0f172a; /* Koyu bar */
  backdrop-filter: blur(12px);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  color: #ffffff; 
  font-weight: 850;
}
.heroCard__kicker{
  display:inline-flex;
  padding:.18rem .55rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.1);
  font-size:.9rem;
  color: #ffffff;
}
.heroCard__sep{opacity:.6; color: #fff;}
.heroCard__meta{color: rgba(255, 255, 255, 0.9);}

.heroMini{
  margin-top: 12px;
  display:grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
.heroMini__item{
  border: 1px solid rgba(0,0,0,.06);
  background: #fff;
  border-radius: 16px;
  padding: 12px 14px;
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap: 10px;
  box-shadow: 0 4px 12px rgba(0,0,0,.03);
  transition: transform .25s ease, background .25s ease, border-color .25s ease;
}
.heroMini__item:hover{
  transform: translateY(-3px);
  background: #f8fafc;
  border-color: #bae6fd;
}
.heroMini__item strong{font-weight:850; color: #0b1220;}
.heroMini__item span{color: #64748b; font-size:.95rem; text-align:right}

/* Specso section */
.specso-section{
  padding: 80px 0;
  background: linear-gradient(180deg, #0d1b2a, #112240);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  color: #fff;
}
.specso-hero img{
  width:100%;
  border-radius: 16px;
  box-shadow: var(--shadow);
  margin-bottom: 28px;
  border: 1px solid rgba(255,255,255,.12);
}
.specso-content{
  text-align:center;
}
.specso-content h2{
  font-size: clamp(1.7rem, 2.2vw, 2.2rem);
  margin: 0 0 12px;
}
.specso-content p{
  max-width: 820px;
  margin: 0 auto;
  color: rgba(255,255,255,.85);
  font-size: 1.05rem;
}
.specso-modules{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 18px;
  margin: 34px 0 26px;
}
.module-card{
  background: rgba(255,255,255,0.05);
  padding: 18px;
  border-radius: 14px;
  transition: 0.25s ease;
  border: 1px solid rgba(255,255,255,0.1);
  color: #fff;
}
.module-card:hover{transform: translateY(-6px); background: rgba(255,255,255,0.08);}
.module-card h3{margin: 2px 0 8px;}
.module-card p{margin:0; color: rgba(255,255,255,.78);}

.specso-cta{display:flex; justify-content:center;}
.demo-button{
  display:inline-block;
  padding: 14px 38px;
  background: linear-gradient(45deg, #00c6ff, #0072ff);
  color: white;
  font-size: 18px;
  border-radius: 40px;
  text-decoration: none;
  transition: 0.25s ease;
  font-weight: 750;
  border: 1px solid rgba(255,255,255,.12);
}
.demo-button:hover{transform: scale(1.04);}

/* Forms and footer */
label{display:grid; gap:.35rem; color: var(--muted); font-size: .95rem}
input, select, textarea{
  width:100%;
  padding: .75rem .8rem;
  border-radius: 14px;
  border:1px solid #cbd5e1;
  background: #f8fafc;
  color: var(--text);
  outline: none;
}
textarea{min-height: 110px; resize: vertical;}
input:focus, select:focus, textarea:focus{
  border-color: #0ea5e9;
  box-shadow: 0 0 0 4px rgba(14,165,233,.15);
  background: #fff;
}
.form{display:grid; gap:.75rem; margin-top:.6rem}
.muted{color: var(--muted); font-size:.95rem}

.footer{
  padding: 1.4rem 0;
  color: var(--muted);
  background: #f8fafc;
  border-top: 1px solid var(--line);
}
.footer__inner{
  display:flex; align-items:center; justify-content:space-between;
  gap: 1rem;
  padding-top: 1rem;
}
.footer__links{display:flex; gap: 1rem}
.footer__links a{padding:.35rem .45rem; border-radius:10px}
.footer__links a:hover{background: rgba(0,0,0,.05)}

.modal{
  width:min(720px, calc(100% - 2rem));
  border:none;
  padding:0;
  border-radius: 18px;
  box-shadow: var(--shadow);
  background: #fff;
  color: var(--text);
}
.modal::backdrop{background: rgba(0,0,0,.55)}
.modal__inner{padding: 1.1rem 1.1rem 1.2rem; position:relative}
.modal__close{
  position:absolute; right:.75rem; top:.6rem;
  border:1px solid var(--line);
  background: #f1f5f9;
  color: var(--text);
  border-radius: 12px;
  width: 38px; height: 38px;
  cursor:pointer;
}
.modal__body{color: var(--muted)}

@media (max-width: 980px){
  .cards{grid-template-columns: repeat(2, 1fr)}
  .hero__grid{grid-template-columns: 1fr; }
  .header__cta{display:none}
  .nav__toggle{display:inline-flex}
  .nav__menu{
    position:absolute;
    right: 0;
    top: 56px;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: .6rem;
    min-width: 220px;
    display:none;
    box-shadow: 0 10px 25px rgba(0,0,0,.1);
  }
  .nav__menu.is-open{display:flex}
  .brand__tag{display:none}
  .nav__menu{right:0; top: 64px}
}
@media (max-width: 560px){
  .cards{grid-template-columns: 1fr}
  .two{grid-template-columns: 1fr}
}


/* Callout */
.callout{
  display:flex;
  gap:14px;
  align-items:flex-start;
  padding:16px 16px;
  border:1px solid #e2e8f0;
  background:#f8fafc;
  border-radius:16px;
  color: #0b1220;
}
.callout__icon{font-size:22px; line-height:1; margin-top:2px;}
.callout__body{color:#334155;}
.callout__body strong{color:#0b1220;}
.callout__actions{margin-top:10px; display:flex; gap:10px; flex-wrap:wrap;}


/* Brand cards - BEYAZ ARKA PLAN */
.brands .card{overflow:hidden}
.brands__grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.brandcard{
  background: #ffffff;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: var(--radius);
  overflow:hidden;
  box-shadow: 0 10px 25px rgba(0,0,0,.06);
  display:flex;
  flex-direction: column;
  min-height: 280px;
  color: #0b1220;
}
.brandcard__logo{
  background: #f8fafc; /* Hafif gri arka plan logoları belli eder */
  padding: 22px 18px 14px;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height: 150px;
  border-bottom: 1px solid rgba(0,0,0,.04);
}
.brandcard__logo img{
  max-height: 110px;
  width: auto;
  object-fit: contain;
  transition: transform .3s ease;
  /* Logoların net görünmesi için */
  mix-blend-mode: multiply; 
}
.brandcard:hover .brandcard__logo img{
  transform: scale(1.05);
}
.brandcard__meta{
  padding: 14px 16px 16px;
}
.brandcard__meta h3{margin:0 0 6px; color: #0b1220;}
.brandcard__phone{
  margin-top: 6px;
  display:inline-flex;
  padding: 10px 14px;
  border-radius: 14px;
  background: #e0f2fe;
  border: 1px solid #bae6fd;
  font-weight: 850;
  letter-spacing: .3px;
  color: #0369a1;
}
.muted.small{font-size:.92rem; opacity:.9; color: #64748b;}

.brandbanner{
  margin-top: 16px;
  border-radius: 18px;
  overflow:hidden;
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: var(--shadow);
}
.brandbanner img{width:100%; display:block;}

.brands__cta{display:flex; justify-content:center; margin-top: 18px;}

@media (max-width: 980px){
  .brands__grid{grid-template-columns: repeat(2, 1fr);}
}
@media (max-width: 560px){
  .brands__grid{grid-template-columns: 1fr;}
  .brandcard__logo img{max-height: 78px;}
}


/* E-Dönüşüm (HBT) */
.edonusum{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  align-items: stretch;
}
.edonusum__logo{
  text-align:center;
}
.edonusum__logo img{
  max-height: 110px;
  width: auto;
  margin: 6px auto 10px;
}
.edonusum__points ul{
  margin: .5rem 0 1rem;
  padding-left: 1.1rem;
  color: #4b5b7a;
}
.edonusum__points li{margin:.35rem 0}
.edonusum__points .btn{margin-top: 6px}

@media (max-width: 980px){
  .edonusum{grid-template-columns: 1fr;}
  .edonusum__logo img{max-height: 96px;}
}


/* ===== v10 WhatsApp floating button ===== */
.wa-float{
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 80;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 999px;
  border: 1px solid rgba(37,211,102,.35);
  background: #ffffff;
  backdrop-filter: blur(14px);
  color: #0b1220;
  box-shadow: 0 16px 44px rgba(0,0,0,.15);
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
}
.wa-float:hover{
  transform: translateY(-3px);
  background: #f0fdf4;
  box-shadow: 0 22px 60px rgba(0,0,0,.2);
}
.wa-float__icon{
  width: 34px; height: 34px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(37,211,102,.25), rgba(37,211,102,.12));
  border: 1px solid rgba(37,211,102,.25);
  font-size: 18px;
}
.wa-float__text{font-weight: 850; letter-spacing:.2px}
.wa-float__dot{
  width: 8px; height: 8px;
  border-radius: 999px;
  background: rgba(37,211,102,.95);
  box-shadow: 0 0 0 4px rgba(37,211,102,.12);
}
@media (max-width: 560px){
  .wa-float__text{display:none}
  .wa-float{padding: 12px}
}

/* ===== v10 Map box ===== */
.mapbox{
  margin-top: 14px;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,.1);
  background: #f8fafc;
}
.mapbox iframe{
  width:100%;
  height: 260px;
  border:0;
  display:block;
}
.mapbox__links{
  display:flex;
  gap: 10px;
  padding: 12px;
  justify-content: space-between;
  flex-wrap: wrap;
}


/* References - BEYAZ KARTLAR */
.refs{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
}
.refs__item{
  border: 1px solid rgba(0,0,0,.08);
  background: #ffffff; 
  border-radius: 16px;
  padding: 14px;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height: 90px;
  overflow:hidden;
  box-shadow: 0 4px 12px rgba(0,0,0,.03);
}
.refs__item img{
  max-height: 56px;
  width:auto;
  object-fit:contain;
  filter: none;
  opacity: .95;
}
@media (max-width: 980px){
  .refs{grid-template-columns: repeat(3, 1fr);}
}
@media (max-width: 560px){
  .refs{grid-template-columns: repeat(2, 1fr);}
}

/* FAQ */
.faq{display:grid; gap: 12px;}
.faq__item{
  border: 1px solid rgba(0,0,0,.08);
  background: #ffffff;
  border-radius: 16px;
  padding: 0;
  overflow:hidden;
  box-shadow: 0 4px 12px rgba(0,0,0,.03);
}
.faq__item summary{
  cursor:pointer;
  padding: 14px 16px;
  font-weight: 800;
  list-style:none;
  color: #0b1220;
}
.faq__item summary::-webkit-details-marker{display:none;}
.faq__item summary::after{
  content:"+";
  float:right;
  opacity:.7;
  color: #0ea5e9;
}
.faq__item[open] summary::after{content:"–";}
.faq__body{
  padding: 0 16px 14px;
  color: #4b5b7a;
}
.faq__cta{
  margin-top: 14px;
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
}


/* Text reference cards */
.refs__item--text{
  text-decoration:none;
  color: #0b1220;
}
.refs__text{
  width:100%;
  display:flex;
  flex-direction:column;
  gap: 6px;
}
.refs__name{
  font-weight: 900;
  letter-spacing:.2px;
  font-size: 16px;
  line-height: 1.1;
}
.refs__tag{
  display:inline-flex;
  align-self:flex-start;
  padding: 6px 10px;
  border-radius: 999px;
  font-weight: 850;
  font-size: 12px;
  letter-spacing:.2px;
  border: 1px solid #bae6fd;
  background: #e0f2fe;
  color: #0369a1;
}

/* Apple-style header layout */
@media (max-width: 992px){
  .nav{
    justify-content:flex-start;
  }
}


/* Hizmetler quick links (chips) */
.hizmet-quick{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  margin: 10px 0 18px;
}
.chip{
  display:inline-flex;
  align-items:center;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.08);
  background: #ffffff;
  color: #0b1220;
  text-decoration:none;
  font-weight: 800;
  font-size: 13px;
  box-shadow: 0 2px 6px rgba(0,0,0,.04);
}
.chip:hover{transform: translateY(-1px); border-color: #bae6fd;}