/* =============================
   Vokal İşitme — Ortak Site Stilleri (Glacial Indifference)
   ============================= */

/* Font */
@font-face{font-family:"Glacial Indifference";src:url("/fonts/GlacialIndifference-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Glacial Indifference";src:url("/fonts/GlacialIndifference-Bold.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}

/* Palet & Değişkenler */
:root{
  --navy:#0b1e3a; --navy-700:#0e2649;
  --text:#0b1220; --muted:#6b7280; --ring:#cad6ff; --white:#fff;
  --green:#25D366; --radius:16px; --shadow:0 10px 25px rgba(0,0,0,.07);
  --sky:#edf4ff;

  /* Menü renkleri */
  --menu-active-bg:#d9ebf7;  /* pastel buz mavisi */
  --menu-hover-bg:#e8f3fa;   /* yumuşak mavi */
  --menu-text:#243041;

  /* Layout */
  --container:1200px;
  --sidebar-w:240px;         /* masaüstü sidebar genişliği */
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:"Glacial Indifference",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:var(--text); background:#fff;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer}
:focus-visible{outline:3px solid var(--ring);outline-offset:2px}

/* Yerleşim */
.container{max-width:var(--container);margin-inline:auto;padding:0 20px}
.section{padding:56px 0}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media (max-width:960px){.grid{grid-template-columns:1fr}}

/* =============================
   HEADER / SIDEBAR
   ============================= */

/* Z-index katmanları */
.header{z-index:2000}
.drawer{z-index:3000}
.hamburger{position:relative;z-index:3100}

/* -------- Masaüstü: solda sabit sidebar -------- */
@media (min-width:1025px){
  .header{
    position:fixed; top:0; left:0; bottom:0;
    width:var(--sidebar-w);
    background:#fff;
    border-right:1px solid #eef2f7;
    display:flex;
    padding:20px 16px;
  }
  .header .nav{
    height:100%;
    display:flex; flex-direction:column; align-items:flex-start; gap:16px;
  }

  /* SIRA: logo → menü → (top-actions ya da fallback buton/telefon) → hamburger */
  .header .nav > .brand{ order:1; display:flex; align-items:center; gap:12px }
  .header .nav > .menu { order:2; }
  .header .nav > .top-actions{ order:3; }           /* varsa */
  .header .nav > .hamburger{ order:4; }             /* masaüstünde gizlenecek */

  /* Logo */
  .brand img{height:72px; width:auto; display:block}

  /* Menü (dikey) */
  .menu{display:flex; flex-direction:column; align-items:stretch; gap:8px; width:100%}
  .menu a{
    display:block; font-size:16px; font-weight:500; line-height:1.2;
    padding:10px 12px; border-radius:8px; color:var(--menu-text);
    transition:background-color .2s ease, font-weight .2s ease;
  }
  .menu a:hover{ background-color:var(--menu-hover-bg) }
  .menu a[aria-current="page"], .menu a.is-active{
    background-color:var(--menu-active-bg); font-weight:700;
  }

  /* top-actions (menünün HEMEN ALTINDA) */
  .top-actions{
    margin-top:8px;                     /* <<< sabitleme YOK */
    display:flex; flex-direction:column; gap:10px; width:100%;
  }
  .top-actions .btn{
    display:inline-flex; justify-content:center; padding:12px 14px;
    border-radius:12px; font-weight:700; border:1px solid transparent; background:#fff;
  }
  .top-actions .btn.primary{ background:var(--navy); color:#fff; border-color:var(--navy) }
  .top-actions .phone{ display:flex; flex-direction:column; align-items:flex-start; gap:4px; line-height:1.2 }

  /* FALLBACK: .top-actions yoksa, tek başına duran buton/telefonu menünün ALTINA zorla */
  .header .nav{ display:flex; flex-direction:column; }
  .header .nav > .btn.primary,
  .header .nav > .phone{
    order:3; width:100%;
  }
  .header .nav > .btn.primary{
    display:inline-flex; justify-content:center; padding:12px 14px;
    border-radius:12px; font-weight:700; border:1px solid transparent; background:#fff;
  }
  .header .nav > .phone{
    display:flex; flex-direction:column; align-items:flex-start; line-height:1.2; margin-top:8px;
  }

  /* İçerik alanını sağa kaydır */
  body{ margin-left:var(--sidebar-w) }

  /* Hamburger masaüstünde gerekmez */
  .hamburger{ display:none }
}

/* -------- Mobil/Tablet: üst header + drawer -------- */
@media (max-width:1024px){
  .header{
    position:sticky; top:0;
    background:rgba(255,255,255,.96);
    border-bottom:1px solid #eef2f7;
    height:80px; display:flex;
  }
  .header .nav{
    height:100%;
    display:flex; align-items:center; justify-content:space-between;
  }
  .brand img{height:56px}
  .menu{display:none}          /* mobilde drawer devrede */
  .hamburger{display:flex; flex-direction:column; gap:4px}
  .hamburger span{width:22px;height:2px;background:#111;border-radius:2px}
}

/* =============================
   Drawer (mobil menü)
   ============================= */
.drawer{position:fixed; inset:0; background:rgba(0,0,0,.4); display:none}
.drawer.open{display:block}
.drawer-panel{
  position:absolute; right:0; top:0; bottom:0; width:84%; max-width:380px;
  background:#fff; padding:24px; box-shadow:var(--shadow);
  display:flex; flex-direction:column; gap:16px;
}
.drawer .phone{ align-self:flex-start }
.drawer-panel > a:not(.btn):not(.phone){
  display:block; font-size:16px; font-weight:500; color:var(--menu-text);
  padding:12px 14px; border-radius:8px; transition:background-color .2s ease, font-weight .2s ease;
}
.drawer-panel > a:not(.btn):not(.phone):hover{ background:var(--menu-hover-bg) }
.drawer-panel > a[aria-current="page"]:not(.btn):not(.phone),
.drawer-panel > a.is-active:not(.btn):not(.phone){ background:var(--menu-active-bg); font-weight:700 }

/* =============================
   Hero
   ============================= */
.hero{position:relative; background:linear-gradient(180deg,#fff,#f8fbff)}
.hero-wrap{display:grid; grid-template-columns:1.1fr .9fr; gap:36px; align-items:center; padding:56px 0}
.pill{display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border-radius:999px; background:var(--sky); color:var(--navy); font-weight:700; border:1px solid var(--ring)}
h1{font-size:48px; line-height:1.1; margin:18px 0; color:var(--navy); font-weight:700}
.lead{font-size:18px; color:#374151; margin:0 0 26px}
.cta{display:flex; gap:12px; flex-wrap:wrap}
.btn{display:inline-flex; align-items:center; gap:10px; padding:14px 18px; border-radius:12px; font-weight:700; border:1px solid transparent; background:#fff}
.btn.primary{background:var(--navy); color:#fff; border-color:var(--navy)}
.hero-card{background:#fff; border:1px solid #eef2f7; border-radius:var(--radius); padding:18px; box-shadow:var(--shadow); display:grid; grid-template-columns:72px 1fr; gap:14px; align-items:center; margin-top:18px}
.hero-visual{position:relative; border-radius:var(--radius); overflow:hidden; border:1px solid #e5e7eb}
.hero-visual::before{content:""; display:block; padding-top:120%}
@media (max-width:1024px){ .hero-wrap{grid-template-columns:1fr} h1{font-size:36px} }

/* =============================
   Cards & Lists
   ============================= */
.card{background:#fff; border:1px solid #eef2f7; border-radius:var(--radius); padding:20px; box-shadow:var(--shadow)}
.card h3{margin:0 0 8px; color:var(--navy); font-weight:700}
.services .item{display:flex; gap:16px; padding:18px; border:1px solid #eef2f7; border-radius:14px; align-items:flex-start}
.services .item svg{flex:0 0 auto}

/* Logos */
.logos{padding:14px 0; border-top:1px solid #eef2f7; border-bottom:1px solid #eef2f7; background:#fff}
.logos-row{display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:36px; opacity:.85}
.logos-row img{height:28px}

/* Contact */
.contact form{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.contact form textarea{grid-column:1/-1; min-height:120px}
.input{padding:12px 14px; border-radius:10px; border:1px solid #e5e7eb; width:100%; font:inherit}
.contact .panel{background:#fff; border:1px solid #eef2f7; border-radius:var(--radius); padding:20px; box-shadow:var(--shadow)}

/* Branches */
.map{margin-top:10px; border-radius:12px; overflow:hidden; border:1px solid #e5e7eb}

/* Footer */
.footer{background:var(--navy); color:#c7d2fe; padding:40px 0; margin-top:40px}
.footer a{color:#e5edff}
.footer .cols{display:grid; grid-template-columns:2fr 1fr 1fr; gap:20px}
.sub{border-top:1px solid rgba(255,255,255,.12); margin-top:20px; padding-top:20px; color:#b6c4ff}
@media (max-width:960px){ .footer .cols{grid-template-columns:1fr} }

/* Mobile CTA bar */
.cta-bar{position:fixed; left:0; right:0; bottom:0; z-index:999; background:#fff; border-top:1px solid #e5e7eb; display:none}
.cta-bar .wrap{display:flex; gap:12px; justify-content:space-between; align-items:center; padding:10px 16px}
.cta-bar a{flex:1; display:inline-flex; justify-content:center; align-items:center; gap:8px; padding:12px; border-radius:12px; border:1px solid #e5e7eb; font-weight:700}
.cta-bar .primary{background:var(--navy); color:#fff; border-color:var(--navy)}
@media (max-width:960px){ .cta-bar{display:block} }
body.haspad{padding-bottom:70px}

/* WhatsApp floating button */
.whatsapp-float{
  position:fixed; right:16px; bottom:16px; width:56px; height:56px; border-radius:50%;
  background:var(--green); display:flex; align-items:center; justify-content:center;
  box-shadow:0 10px 20px rgba(0,0,0,.2); z-index:2147483647; transition:background-color .15s, transform .12s;
}
.whatsapp-float:hover{ background:#1ebe5d; transform:translateY(-2px) }
.whatsapp-float svg{ width:30px; height:30px; fill:#fff; display:block }
@media (max-width:960px){ .whatsapp-float{ bottom:88px } }
@media print{ .whatsapp-float{ display:none } }

/* Helpers */
.m-0{margin:0}
.text-muted{color:#4b5563}
.hide{display:none!important}

/* Hareket azaltmayı tercih edenler için animasyon kapat */
@media (prefers-reduced-motion: reduce){
  .brand img{ transition:none }
}

@media (min-width:1025px){
  .header .nav .menu{order:1}
  .header .nav .top-actions{order:2;margin-top:0}
}
/* ===== HERO PRO ===== */
.hero-pro { padding: 0; border-bottom: 1px solid #e8eef6; }
.hero-pro .swiper { position: relative; z-index: 1; }

.hero-slide{
  position: relative;
  height: min(96vh, 860px);       /* tam ekran hissi, ama çok da uzun değil */
  min-height: 540px;
  isolation: isolate;
  display: grid;
  place-items: stretch;
  overflow: clip;
  background: #0b1e3a;
}
.hero-slide::before{
  /* fotoğraf */
  content:"";
  position:absolute; inset:0;
  background-image: var(--hero-img);
  background-size: cover; background-position: center;
  transform: scale(1.02);         /* çok hafif büyütme, siyah kenar riski yok */
  will-change: transform;
}
.hero-slide::after{
  /* üst gradient + köşe vinye */
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(1200px 600px at 15% 50%, rgba(11,30,58,.55), transparent 60%),
    linear-gradient(90deg, rgba(7,13,24,.72) 0%, rgba(7,13,24,.40) 38%, rgba(7,13,24,.18) 64%, rgba(7,13,24,.10) 100%);
  mix-blend-mode: multiply;
}

.hero-layer{
  position: relative;
  z-index: 2;
  display: grid;
  align-items: center;
  padding-block: clamp(56px, 8vh, 96px);
}

.hero-panel{
  /* yazı paneli */
  max-width: 720px;
  color:#fff;
  padding: clamp(18px, 2.4vw, 28px);
  border-radius: 18px;
  backdrop-filter: blur(3px);
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04));
  box-shadow: 0 24px 60px rgba(0,0,0,.22);
}

.hero-panel h1{
  margin: 10px 0 6px;
  font-weight: 800;
  letter-spacing: .2px;
  line-height: 1.08;
  font-size: clamp(28px, 4.2vw, 48px);
}

.hero-panel .sub{
  margin: 6px 0 16px;
  color: #e7ecf8;
  font-size: clamp(14px, 1.6vw, 18px);
}

.brand-chip{
  display:inline-block;
  font-weight:700;
  font-size: 12px;
  letter-spacing:.3px;
  padding: 8px 10px;
  border-radius: 999px;
  color:#0b1e3a;
  background:#edf4ff;
  border:1px solid #cad6ff;
}

.hero-panel .actions{ display:flex; gap:10px; flex-wrap:wrap; }

/* Açık zeminli buton */
.btn.invert{
  background:#fff;
  color:#0b1e3a;
  border-color:#fff;
}

/* Navigasyon/pagination görünürlük iyileştirme */
.hero .swiper-button-prev,
.hero .swiper-button-next{
  filter: drop-shadow(0 6px 16px rgba(0,0,0,.35));
}
.hero .swiper-pagination-bullet{
  width:10px;height:10px;opacity:.6;background:#fff;
}
.hero .swiper-pagination-bullet-active{ opacity:1; }

/* Mobil optimizasyon */
@media (max-width: 960px){
  .hero-slide{ height: min(84vh, 720px); min-height: 520px; }
  .hero-panel{ max-width: 92%; }
}

/* Hareketi azaltan kullanıcılar için daha durağan */
@media (prefers-reduced-motion: reduce){
  .hero-slide::before{ transform:none; }
}

.hero-block {
  margin-bottom: 40px;
}

.hero-image img {
  width: 100%;
  height: auto;
  display: block;
}

.hero-content {
  padding: 24px 0;
  background: #fff;
}

.hero-content h1 {
  margin: 10px 0;
  font-size: clamp(28px, 4.2vw, 42px);
  font-weight: 800;
  color: #0b1e3a;
}

.hero-content p {
  color: #4b5563;
  font-size: clamp(15px, 1.6vw, 18px);
  margin-bottom: 16px;
}

.hero-content .actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.btn.invert {
  background: #fff;
  color: #0b1e3a;
  border: 1px solid #0b1e3a;
}

.brand-chip {
  display: inline-block;
  font-weight: 700;
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 999px;
  color: #0b1e3a;
  background: #edf4ff;
  border: 1px solid #cad6ff;
}

/* ====== Ana sayfa: Profesyonel bölümler ====== */
.home-sections .section-head{
  display:flex;align-items:end;justify-content:space-between;gap:14px;margin-bottom:18px
}
.home-sections .section-head h2{
  margin:0;color:#0b1e3a;font-weight:800;letter-spacing:.2px
}
.home-sections .section-head .hint{color:#4b5563}

/* Hizmetler */
.features{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media (max-width:960px){ .features{grid-template-columns:1fr} }
.feature-card{
  position:relative; overflow:hidden; background:#fff; border:1px solid #eef2f7;
  border-radius:16px; padding:18px; box-shadow:0 10px 25px rgba(0,0,0,.06);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.feature-card:hover{ transform:translateY(-3px); box-shadow:0 18px 40px rgba(2,8,23,.12); border-color:#e1e7f2 }
.feature-card .ic{
  width:42px; height:42px; border-radius:12px; display:inline-flex; align-items:center; justify-content:center;
  background:#edf4ff; margin-bottom:10px;
}
.feature-card h3{ margin:4px 0 6px; color:#0b1e3a; font-weight:800 }
.feature-card p{ margin:0; color:#374151 }
.feature-card .more{ display:inline-flex; align-items:center; gap:8px; margin-top:10px; font-weight:700; color:#0b1e3a }

/* Markalar */
.brands{
  background:#fff; border:1px solid #eef2f7; border-radius:16px; padding:16px; box-shadow:0 10px 25px rgba(0,0,0,.06)
}
.brand-row{ display:grid; grid-template-columns:repeat(6,1fr); gap:16px; align-items:center }
@media (max-width:1100px){ .brand-row{ grid-template-columns:repeat(4,1fr) } }
@media (max-width:700px){ .brand-row{ grid-template-columns:repeat(2,1fr) } }
.brand-logo{
  filter:grayscale(1) contrast(1.05) opacity(.85);
  transition:filter .2s ease, transform .2s ease, opacity .2s ease;
  justify-self:center; height:28px
}
.brand-logo:hover{ filter:none; transform:translateY(-2px); opacity:1 }

/* Şubeler */
.branches{ display:grid; grid-template-columns:repeat(2,1fr); gap:18px }
@media (max-width:960px){ .branches{ grid-template-columns:1fr } }
.branch-card{
  position:relative; overflow:hidden; background:#fff; border:1px solid #eef2f7; border-radius:16px;
  display:grid; grid-template-columns:1fr; box-shadow:0 10px 25px rgba(0,0,0,.06)
}
.branch-card .body{ padding:18px }
.branch-card h3{ margin:0 0 6px; color:#0b1e3a; font-weight:800 }
.branch-card .meta{ color:#4b5563; margin-bottom:10px }
.branch-card .actions{ display:flex; gap:10px; flex-wrap:wrap; margin-top:10px }
.branch-card .map{
  border-top:1px solid #eef2f7; overflow:hidden; border-radius:0 0 16px 16px
}
.branch-card .btn{ padding:10px 12px; border-radius:12px; border:1px solid #e5e7eb; background:#fff; font-weight:800 }
.branch-card .btn.primary{ background:#0b1e3a; color:#fff; border-color:#0b1e3a }