/* =========================
   ALTAN MEDYA - LIGHT THEME (CLEAN)
   ========================= */

:root{
  /* Brand */
  --navy:#223262;
  --navy2:#162043;

  /* Base */
  --bg:#f6f8fc;
  --card:#ffffff;
  --text:#0f172a;
  --muted:#475569;

  /* Accent */
  --accent:#d1fe3f;
  --accent2:#2563eb;

  /* UI */
  --border:rgba(15,23,42,.10);
  --shadow: 0 14px 40px rgba(15,23,42,.08);
  --radius:22px;
}

*{box-sizing:border-box}
html,body{height:100%}

body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Apple Color Emoji","Segoe UI Emoji";
  background:
    radial-gradient(1100px 650px at 20% -10%, rgba(209,254,63,.18), transparent 60%),
    radial-gradient(900px 520px at 110% 10%, rgba(37,99,235,.10), transparent 55%),
    linear-gradient(180deg, var(--bg), #ffffff 70%);
  color:var(--text);
  overflow-x:hidden;
}

a{color:inherit;text-decoration:none}
a:hover{color:var(--navy)}
.container-xl{max-width:1180px}

/* =========================
   NAVBAR
   ========================= */
.navbar{
  backdrop-filter: blur(10px);
  background: rgba(255,255,255,.75) !important;
  border-bottom: 1px solid rgba(15,23,42,.08) !important;
}

/* Navbar text */
.navbar,
.navbar *{ color: var(--text) !important; }

.navbar a{
  color: var(--text) !important;
  opacity: .85;
}
.navbar a:hover{
  color: var(--navy) !important;
  opacity: 1;
}
.navbar .active,
.navbar a.active{
  color: var(--navy) !important;
  opacity: 1;
  font-weight: 700;
}

/* Hamburger icon (span-based) */
.hamburger span{
  background-color: var(--text) !important;
  opacity: 1;
}

/* Bootstrap toggler support */
.navbar-toggler{ border-color: rgba(15,23,42,.15) !important; }
.navbar-toggler-icon{ filter: invert(0) !important; }

/* Brand badge */
.brand-badge{
  width:42px;height:42px;border-radius:14px;
  background: linear-gradient(135deg, rgba(209,254,63,.25), rgba(37,99,235,.10));
  border:1px solid var(--border);
  box-shadow: var(--shadow);
  display:grid;place-items:center;
}
.brand-badge span{
  font-weight:800;letter-spacing:.5px;
  color:var(--navy);
}

/* =========================
   HERO
   ========================= */
.hero{ padding:110px 0 40px; position:relative; }
.hero h1{
  font-weight:900; letter-spacing:-.02em; line-height:1.02;
  font-size: clamp(2.1rem, 4vw, 3.7rem);
}
.hero p{
  color:var(--muted);
  font-size:1.05rem;
  line-height:1.7;
}

/* Main hero card */
.hero-card{
  border:1px solid var(--border);
  border-radius: var(--radius);
  background: var(--card);
  box-shadow: var(--shadow);
  overflow:hidden;
}

/* Hero media area */
.hero-media{
  min-height: 420px;
  background:
    radial-gradient(520px 420px at 20% 20%, rgba(209,254,63,.16), transparent 55%),
    radial-gradient(520px 420px at 80% 30%, rgba(37,99,235,.10), transparent 55%),
    linear-gradient(135deg, rgba(34,50,98,.08), rgba(255,255,255,.92));
  position:relative;
}
.hero-media::after{
  content:"";
  position:absolute; inset:0;
  background-image: radial-gradient(circle at 20% 20%, rgba(15,23,42,.12) 0 1px, transparent 2px);
  background-size: 18px 18px;
  opacity:.25;
  pointer-events:none;
}
.hero-media .floating{
  position:absolute;
  border:1px solid var(--border);
  background: rgba(255,255,255,.72);
  border-radius:18px;
  padding:14px 16px;
  box-shadow: var(--shadow);
}
.floating b{display:block;font-size:.95rem}
.floating small{color:var(--muted)}
.float1{left:18px;top:18px}
.float2{right:18px;top:78px}
.float3{left:28px;bottom:22px}

/* =========================
   BUTTONS
   ========================= */
.btn-neo{
  border-radius: 16px;
  padding:12px 16px;
  border:1px solid rgba(209,254,63,.35);
  background: linear-gradient(135deg, rgba(209,254,63,.25), rgba(37,99,235,.08));
  color: var(--text);
  box-shadow: 0 10px 30px rgba(15,23,42,.12);
  font-weight:700;
}
.btn-neo:hover{filter: brightness(1.05)}

.btn-outline-neo{
  border-radius: 16px;
  padding:12px 16px;
  border:1px solid var(--border);
  background: rgba(255,255,255,.70);
  color: var(--text);
  font-weight:700;
}
.btn-outline-neo:hover{border-color: rgba(34,50,98,.25)}

/* =========================
   SECTIONS
   ========================= */
.section{ padding:72px 0; }
.section-title{
  font-weight:900;
  letter-spacing:-.01em;
  font-size: clamp(1.5rem, 2.4vw, 2.1rem);
}
.section-sub{ color:var(--muted); margin:10px 0 0; }

/* =========================
   CARDS (services, packages, forms, etc.)
   ========================= */
.service-card,
.package-card,
.card,
.form-card,
.contact-card,
.cardx{
  background: var(--card);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  border-radius: var(--radius);
}

.cardx .icon{
  width:44px;height:44px;border-radius:16px;
  display:grid;place-items:center;
  background: rgba(209,254,63,.12);
  border:1px solid rgba(209,254,63,.20);
}

.muted{color:var(--muted)}

.badge-soft{
  border:1px solid var(--border);
  background: rgba(255,255,255,.70);
  color: var(--muted);
  border-radius: 999px;
  padding:8px 12px;
  font-weight:600;
}

.kpi{
  display:flex;gap:12px; align-items:center;
  border:1px solid var(--border);
  border-radius: 18px;
  background: rgba(255,255,255,.70);
  padding:14px 16px;
}
.kpi b{font-size:1.05rem}
.kpi small{color:var(--muted)}

/* =========================
   FORMS
   ========================= */
.form-control, .form-select{
  background: #ffffff !important;
  border:1px solid var(--border) !important;
  color:var(--text) !important;
  border-radius: 16px !important;
}
.form-control::placeholder{ color: rgba(71,85,105,.75) !important; }
.form-control:focus, .form-select:focus{
  box-shadow: 0 0 0 4px rgba(209,254,63,.18) !important;
  border-color: rgba(209,254,63,.35) !important;
}

/* =========================
   TABLE
   ========================= */
.table{ color:var(--text) }
.table td, .table th{ border-color: rgba(15,23,42,.08) !important; }

.small-link{color:var(--muted)}
.small-link:hover{color:var(--navy)}

/* =========================
   PAGE HEAD / HR
   ========================= */
.page-head{ padding:110px 0 20px; }
.page-head h1{font-weight:900;letter-spacing:-.02em}
.hr-soft{
  height:1px;border:none;
  background: linear-gradient(90deg, transparent, rgba(15,23,42,.10), transparent);
}

/* =========================
   FOOTER
   ========================= */
.site-footer{
  background: var(--navy2);
  color:#fff;
}
.footer{
  border-top:1px solid rgba(255,255,255,.10);
  padding:36px 0;
  background: transparent;
}
/* ===== MOBILE HAMBURGER FORCE VISIBLE ===== */

/* 1) Button görünür olsun */
.navbar-toggler{
  border: 1px solid rgba(15,23,42,.18) !important;
  border-radius: 14px !important;
  padding: 10px 12px !important;
  background: rgba(255,255,255,.80) !important;
}

/* 2) Bootstrap toggler icon (SVG) koyu görünsün */
.navbar-light .navbar-toggler-icon,
.navbar-toggler-icon{
  filter: none !important;
  background-image: none !important; /* biz kendimiz çiziyoruz */
  width: 22px;
  height: 14px;
  position: relative;
}

/* 3) 3 çizgiyi CSS ile çiz (her temada çalışır) */
.navbar-toggler-icon::before,
.navbar-toggler-icon::after{
  content:"";
  position:absolute;
  left:0; right:0;
  height:2px;
  background: var(--text);
  border-radius: 2px;
}

.navbar-toggler-icon::before{ top:0; }
.navbar-toggler-icon::after{ bottom:0; }

/* orta çizgi */
.navbar-toggler-icon{
  background:
    linear-gradient(var(--text), var(--text)) center/100% 2px no-repeat !important;
}

/* 4) Senin menü span ileyse onu da garantiye al */
.hamburger span{
  background-color: var(--text) !important;
}
/* =========================
   HEADER LOGO (LONG HORIZONTAL)
   ========================= */
.site-logo{
  height:54px;
  max-width:320px;
  width:auto;
  object-fit:contain;
  display:block;
}
@media (max-width:768px){
  .site-logo{
    height:42px;
    max-width:240px;
  }
}


/* Scroll olunca logo biraz küçülsün (premium hissiyat) */
.header.scrolled .site-logo,
.navbar.scrolled .site-logo{
  height:34px;
}

/* Mobil ayar */
@media (max-width:768px){
  .site-logo{
    height:34px;
    max-width:180px;
  }
}

/* --- Logo always visible --- */
.navbar-brand{
  display:flex !important;
  align-items:center !important;
  min-width: 160px;      /* mobilde ezilmesin */
  max-width: 70vw;       /* çok uzunsa sığsın */
}

.site-logo{
  display:block !important;
  height:42px;
  width:auto !important;
  max-width: 70vw !important;
  object-fit:contain;
}

/* Mobil layout: logo + hamburger */
@media (max-width: 992px){
  .navbar .container-xl{
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:10px;
  }

  /* toggler sağda kalsın */
  .navbar-toggler{
    flex: 0 0 auto;
    z-index: 5;
  }

  /* logo solda kalsın */
  .navbar-brand{
    flex: 1 1 auto;
    z-index: 6;
  }
}
<div class="mb-3">
  <img
    src="<?= e(base_url()) ?>/assets/img/logo.svg"
    alt="<?= e($siteName) ?>"
    class="footer-logo"
  >
</div>
/* FOOTER LOGO */
.footer-logo{
  height:42px;
  width:auto;
  max-width:260px;
  object-fit:contain;
  display:block;
}

@media (max-width:768px){
  .footer-logo{
    height:36px;
    max-width:220px;
  }
}

/* =========================
   FOOTER GRADIENT FIX
   ========================= */

.footer{
  position: relative;
  background:
    radial-gradient(900px 420px at 20% 0%, rgba(209,254,63,.14), transparent 60%),
    radial-gradient(900px 420px at 90% 20%, rgba(37,99,235,.10), transparent 60%),
    linear-gradient(180deg, #f6f8fc 0%, #ffffff 100%);
  padding-top: 80px;     /* ÜSTTEN BOŞLUK */
  padding-bottom: 36px;  /* ALTTAN BOŞLUK */
  margin-top: 0;
  z-index: 1;
}

.section:last-of-type{
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

.footer .container-xl{
  position: relative;
  z-index: 2;
}