/* =========================
   İmzam Sigorta — styles.css (güncel)
   ========================= */

/* ---- Tema & Taban ---- */
:root{
  --brand-red:#c62828;
  --brand-red-700:#b71c1c;
  --bg:#ffffff;
  --bg-soft:#fafafa;
  --text:#1f2937;
  --muted:#6b7280;
  --border:#e5e7eb;
  --radius:14px;
  --shadow:0 6px 24px rgba(0,0,0,.06);

  /* Çalıştığımız Şirketler (tek yerden kontrol) */
  --logo-h: 96px;                   /* Masaüstü logo yüksekliği */
  --gap: calc(var(--logo-h) * .8);  /* Logolar arası boşluk */
}

@media (max-width: 960px){ :root{ --logo-h: 80px; } }
@media (max-width: 620px){ :root{ --logo-h: 64px; } }

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

/* Sticky footer */
body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,"Helvetica Neue",Arial,"Noto Sans",sans-serif;
  color:var(--text);
  background:var(--bg);

  min-height:100vh;
  display:flex;
  flex-direction:column;
}
main{ flex:1 0 auto; }
.footer{ margin-top:auto; }

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
.container{ width:min(1140px,92%); margin:0 auto; }
.section{ padding:48px 0; }
.muted{ color:var(--muted); }

/* ---- Header & Navigasyon ---- */
.header{
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,.85);
  border-bottom:1px solid var(--border);
  backdrop-filter:blur(10px);
}
.header-inner{ display:flex; align-items:center; justify-content:space-between; padding:14px 0; }
.brand{ display:flex; align-items:center; gap:12px; font-weight:700; letter-spacing:.2px; }
.brand .logo{
  width:36px; height:36px; border-radius:10px;
  background-image:url("assets/logosimzamsigorta.png");  /* PNG kullanıyorsan logo.png */
  background-size:contain; background-position:center; background-repeat:no-repeat;
  box-shadow:var(--shadow);
}
.brand .name{ font-size:1.1rem; }

.nav{ display:flex; gap:22px; align-items:center; }
.nav a{ position:relative; padding:8px 2px; }
.nav a::after{
  content:""; position:absolute; left:0; bottom:-6px; height:3px; width:0; border-radius:999px;
  background:linear-gradient(90deg,var(--brand-red),#ff8a80);
  transition:width .28s ease;
}
.nav a:hover::after{ width:100%; }
.nav a.active::after{ width:100%; }

/* Mobile nav */
.nav-toggle{ display:none; background:transparent; border:0; font-size:26px; line-height:1; }
@media (max-width:860px){
  .nav{
    display:none; position:absolute; right:0; top:62px; flex-direction:column; background:var(--bg);
    padding:14px 18px; border:1px solid var(--border); border-radius:14px; box-shadow:var(--shadow);
  }
  .nav.open{ display:flex; }
  .nav-toggle{ display:block; }
}

/* ---- Butonlar ---- */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:12px 18px; border-radius:999px; border:1px solid var(--border);
  box-shadow:var(--shadow); font-weight:600; transition:transform .08s ease, background .2s ease;
}
.btn:active{ transform:translateY(1px); }
.btn-primary{ background:var(--brand-red); color:#fff; border-color:transparent; }
.btn-primary:hover{ background:var(--brand-red-700); }
.btn-ghost{ background:#fff; }

/* ---- Hero Slider ---- */
.hero{ background:var(--bg-soft); border-bottom:1px solid var(--border); }
.slider{ position:relative; overflow:hidden; border-radius:var(--radius); }
.slides{ display:flex; transition:transform .5s ease; }
.slide{ position:relative; min-width:100%; height:clamp(220px,36vw,420px); display:grid; }
.slide img{ width:100%; height:100%; object-fit:cover; filter:saturate(.95); }
.caption{
  position:absolute; inset:auto 0 10% 0; display:grid; place-items:center; text-align:center; padding:0 16px;
}
.caption .cap-box{
  background:rgba(0,0,0,.45); color:#fff; padding:18px 22px; border-radius:16px;
  backdrop-filter:blur(6px); max-width:min(90%,840px); box-shadow:var(--shadow);
}
.caption h2{ margin:0 0 6px; font-size:clamp(18px,3.3vw,34px); }
.caption p{ margin:0 0 12px; font-size:clamp(14px,2.2vw,16px); opacity:.95; }

.arrow{
  position:absolute; top:50%; transform:translateY(-50%);
  border:0; width:42px; height:42px; border-radius:50%;
  background:rgba(255,255,255,.9); display:grid; place-items:center;
  box-shadow:var(--shadow); cursor:pointer;
}
.arrow:hover{ background:#fff; }
.arrow.prev{ left:10px; }
.arrow.next{ right:10px; }

/* ---- Kartlar & Grid ---- */
.grid{ display:grid; gap:18px; }
.grid-3{ grid-template-columns:repeat(3,1fr); }
.grid-2{ grid-template-columns:repeat(2,1fr); }
@media (max-width:920px){ .grid-3{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:620px){ .grid-3,.grid-2{ grid-template-columns:1fr; } }

.card{
  border:1px solid var(--border); border-radius:var(--radius); overflow:hidden;
  background:#fff; box-shadow:var(--shadow); display:flex; flex-direction:column;
}
.card .body{ padding:16px; display:grid; gap:8px; }
.card h3{ margin:0; font-size:1.02rem; }
.card p{ margin:0; color:var(--muted); font-size:.98rem; }

/* ==== Çalıştığımız Şirketler — Sade Marquee v2 ==== */
.brands{
  border:1px solid var(--border);
  background:#fff;
  border-radius:var(--radius);
  padding:16px;
  overflow:hidden;
  box-shadow:var(--shadow);
  min-height: calc(var(--logo-h) + 32px);
}
.brands-track{
  display:flex; align-items:center; gap: var(--gap);
  /* JS hesaplayıp üzerine yazar */
  --distance: 1200px;
  --duration: 40s;
  animation: brand-scroll var(--duration) linear infinite;
  will-change: transform;
}
.brands:hover .brands-track{ animation-play-state: paused; }
.brands-track .brand{ flex:0 0 auto; }
.brands-track .brand img{
  height: var(--logo-h);
  width:auto; object-fit:contain; display:block; filter:saturate(.98);
}
@keyframes brand-scroll{ to{ transform: translateX(calc(-1 * var(--distance))); } }

/* ---- Yüzen Aksiyon Butonları ---- */
.fab-wrap{
  position:fixed; right:20px; bottom:20px; z-index:70;
  display:flex; flex-direction:column; align-items:center; gap:12px;
}
.fab{
  width:60px; height:60px; border-radius:50%;
  display:grid; place-items:center; background:#fff;
  border:1px solid var(--border); box-shadow:var(--shadow);
  transition:transform .08s ease, background .2s ease;
}
.fab img,.fab svg{ width:28px; height:28px; display:block; }
.fab:hover{ background:#fff; transform:translateY(-1px); }
.fab:active{ transform:translateY(0); }

/* ---- Formlar ---- */
.form{ display:grid; gap:12px; max-width:560px; }
.input{
  width:100%; padding:12px 14px; border:1px solid var(--border);
  border-radius:12px; font:inherit;
}
.input:focus{ outline:2px solid #ff8a80; border-color:#ff8a80; }

/* ---- Footer ---- */
.footer{ border-top:1px solid var(--border); background:var(--bg-soft); }
.footer-inner{
  display:flex; align-items:center; justify-content:space-between; padding:20px 0; gap:12px;
}
.social{ display:inline-flex; align-items:center; gap:10px; }
.social a{
  display:inline-grid; place-items:center; width:38px; height:38px; border-radius:50%;
  border:1px solid var(--border); background:#fff; box-shadow:var(--shadow);
}
.copy{ color:var(--muted); font-size:.95rem; }

/* ---- Hareket azaltımı ---- */
@media (prefers-reduced-motion:reduce){
  .slides{ transition:none; }
  .brands-track{ animation:none; transform:none !important; }
}
/* Butonların varsayılan yazı rengi koyu olsun */
.btn{ color: var(--text); }

/* Ghost buton: beyaz zemin + koyu yazı */
.btn-ghost{
  background:#fff;
  color:#111;
}

/* (Gerekirse ekstra güvence: slider içindeki ghost buton da koyu kalsın) */
.caption .btn-ghost{ color:#111; }
/* === Hero caption — kompakt görünüm === */
.caption .cap-box{
  padding:12px 16px;                 /* 18x22 → daha az boşluk  */
  border-radius:12px;                 /* 16 → 12 */
  max-width:min(90%, 560px);          /* 840px → 560px: kutu daha dar */
}

.caption h2{
  font-size:clamp(16px, 2.6vw, 28px); /* 18–34 → 16–28 */
}
.caption p{
  font-size:clamp(13px, 1.9vw, 15px); /* 14–16 → 13–15 */
  margin:0 0 8px;
}
.caption .btn{
  font-size:.95rem;
  padding:10px 16px;                  /* buton da küçülsün */
}