:root{
  --navy:#0B1F3A;
  --acc:#CC030D;
  --acc2:#A51E24;
  --bg:#F5F7FA;
  --text:#111827;
  --muted:#6B7280;
  --border:#E5E7EB;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
}
.brand{font-family:Poppins, Inter, system-ui; letter-spacing:.2px}
.topbar{background:var(--navy); color:#fff; font-size:.9rem}
.topbar a{color:#fff; opacity:.95}
.topbar a:hover{opacity:1}
.btn-acc{background:var(--acc); color:#fff; border:0}
.btn-acc:hover{background:var(--acc2); color:#fff}
.btn-outline-navy{border-color:var(--navy); color:var(--navy)}
.btn-outline-navy:hover{background:var(--navy); color:#fff}
.cardx{
  background:#fff;
  border:1px solid var(--border);
  border-radius:16px;
  box-shadow:0 10px 30px rgba(0,0,0,.06);
}
.hero{border-radius:24px; overflow:hidden}
.hero .hero-bg{
  background: radial-gradient(1200px circle at 20% 20%, rgba(204,3,13,.10), transparent 50%),
              radial-gradient(900px circle at 80% 10%, rgba(11,31,58,.12), transparent 50%),
              linear-gradient(180deg, #ffffff, #ffffff);
}
.badge-soft{background:#fff;border:1px solid var(--border);color:var(--muted);font-weight:500}
.icon-pill{
  width:42px; height:42px;border-radius:12px;
  background: rgba(204,3,13,.08);
  display:flex; align-items:center; justify-content:center;
  color: var(--acc); flex:0 0 auto;
}
.section-lead{color:var(--muted)}
.service-card:hover{transform:translateY(-2px); transition:.18s ease;}
a.clean{text-decoration:none; color:inherit}
.cta-band{
  background: var(--navy); color:#fff;
  border-radius:18px; overflow:hidden; position:relative;
}
.cta-band:before{
  content:""; position:absolute; inset:-40px -80px auto auto;
  width:220px; height:220px;
  background: rgba(204,3,13,.35);
  filter: blur(40px); border-radius:999px;
}
.cta-band p{color:rgba(255,255,255,.85)}
.footer{background:#ffffff;border-top:1px solid var(--border)}
.small-muted{color:var(--muted)}
.page-hero{background:#fff;border:1px solid var(--border);border-radius:20px}
.form-control, .form-select{border-radius:12px;border-color:var(--border);padding:.75rem .9rem}
.form-control:focus, .form-select:focus{
  border-color: rgba(204,3,13,.55);
  box-shadow: 0 0 0 .25rem rgba(204,3,13,.12);
}
.whatsapp-float{
  position:fixed; right:18px; bottom:18px; z-index:999;
  padding:12px 14px; border-radius:999px;
  background: var(--acc); color:#fff; text-decoration:none;
  box-shadow: 0 12px 30px rgba(0,0,0,.22);
  font-weight:600;
}
.whatsapp-float:hover{background:var(--acc2); color:#fff}
.kvkk-links a{color:var(--muted); text-decoration:none}
.kvkk-links a:hover{color:var(--text)}

/* ===== Mobile improvements ===== */
@media (max-width: 991.98px){
  .topbar .container{gap:.5rem}
  .navbar .btn{width:100%}
  .navbar-nav{padding: .75rem 0}
  .page-hero{padding: 1.25rem !important}
  .cardx{border-radius: 18px}
  .service-card{height:auto}
}


/* ===== Image sizing (fixed) ===== */
.hero-img{
  display:block;
  width:100%;
  height:auto;
  max-height:220px;
  object-fit:cover;
  border-radius:18px;
}
@media (min-width: 992px){
  .hero-img{max-height:320px;}
}

.service-icon{
  width:56px;
  height:56px;
  object-fit:cover;
  border-radius:14px;
  box-shadow:0 6px 16px rgba(0,0,0,.15);
}


/* Real service visuals */
.service-thumb{width:100%;height:160px;object-fit:cover;border-radius:18px;}
@media (max-width: 576px){.service-thumb{height:140px;}}
.icon-pill{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;overflow:hidden;flex:0 0 auto;}
.service-icon{width:52px;height:52px;object-fit:cover;}

.gallery-img{height:420px;object-fit:cover;}
@media (max-width: 576px){.gallery-img{height:240px;}}

/* AKINSOFT carousel controls contrast */
.carousel-control-prev-icon, .carousel-control-next-icon{
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.35));
}




/* ===== AKINSOFT banners (no crop, responsive) ===== */
#akinsoftCarousel, #akinsoftHomeCarousel{width:100%; max-width:100%;}
#akinsoftCarousel .carousel-inner, #akinsoftHomeCarousel .carousel-inner{
  overflow:hidden;
  border-radius:18px;
  background:#fff;
}
#akinsoftCarousel .carousel-item, #akinsoftHomeCarousel .carousel-item{
  text-align:center;
  background:#fff;
}
.banner-fit{
  display:block;
  width:100%;
  height:auto;          /* IMPORTANT: no cropping */
  max-height:420px;     /* keeps layout tidy */
  object-fit:contain;   /* show full banner */
  margin:0 auto;
  background:#fff;
}
@media (max-width: 575.98px){
  .banner-fit{max-height:300px;}
}