/* ===== DILYA Tema (beyaz içerik) ===== */
:root{
  --brand:#0aa5a8;
  --brand-ink:#0b1b23;
  --bg:#0b1a26;     /* header/footer koyu */
  --fg:#0b1b23;     /* içerik metni rengi (koyu) */
  --muted:#5f7080;
  --card:#ffffff;   /* kartlar beyaz */
  --ok:#27c28a;
  --err:#ff7a7a;
  --radius:10px;
  --shadow:0 10px 30px rgba(0,0,0,.08);

  /* ▼ Slider ayarları */
  --slider-height: 625px;   /* tüm cihazlarda aynı önizleme için sabit yükseklik */
  --slider-ratio: 16/9;     /* .slider.slider--ratio devredeyken kullanılır */
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Inter,system-ui,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--fg);
  background:#ffffff;
}
a{color:inherit; text-decoration:none}
img{max-width:100%; display:block}
.container{width:min(1200px,92%); margin-inline:auto}
.divider{height:1px; background:#e9eef3; margin:18px 0}
.lead{color:var(--muted)}
.chip{display:inline-block; padding:6px 10px; border-radius:999px; background:rgba(10,165,168,.10); border:1px solid rgba(10,165,168,.35); color:#0b6b6d; font-size:12px; font-weight:700}

/* ===== Header / Nav ===== */
.site-header{
  position:sticky; top:0; z-index:50;
  backdrop-filter:saturate(160%) blur(8px);
  background:rgba(11,26,38,.9);
  border-bottom:1px solid rgba(255,255,255,.08);
  color:#eaf2f8;
}
.nav{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 0}
.brand{display:flex; gap:10px; align-items:center}
.brand .logo{width:56px; height:56px; object-fit:cover; border-radius:10px; background:#fff}
.brand-text{display:flex; flex-direction:column}
.brand-text span{color:#c9dbe2; font-size:12px; font-weight:600}
.menu{display:flex; gap:18px; align-items:center}
.menu a{opacity:.9; font-weight:600; padding:8px 6px; border-bottom:2px solid transparent; color:#eaf2f8}
.menu a.active{color:var(--brand); border-color:var(--brand)}
.menu a:hover{opacity:1; color:#fff}
.cta{background:var(--brand); color:#fff; padding:10px 16px; border-radius:12px; font-weight:700; box-shadow:var(--shadow)}
.hamb{display:none; background:none; border:0; color:#eaf2f8; font-size:24px; cursor:pointer}

/* ===== Drawer (mobil menü) ===== */
.drawer{
  position:fixed; inset:0 0 0 auto;
  width:min(86%, 380px);
  background:#0f2138; color:#eaf2f8;
  border-left:1px solid rgba(255,255,255,.08);
  transform:translateX(110%);
  transition:transform .28s ease;
  z-index:1000; height:100dvh;
  padding-bottom:env(safe-area-inset-bottom);
  box-shadow:-24px 0 40px rgba(0,0,0,.35);
  pointer-events:none; touch-action:pan-y; overscroll-behavior:contain;
}
.drawer.open, .drawer.show{ transform:translateX(0); pointer-events:auto; }
.drawer-inner{padding:18px}
.drawer-top{display:flex; justify-content:space-between; align-items:center; margin-bottom:10px}
.drawer-links{display:grid; gap:0}
.drawer .brand .logo{background:#fff}
.drawer a{color:#eaf2f8}
.drawer .drawer-links a{ padding:12px 0; border-bottom:1px solid rgba(255,255,255,.08); }
.drawer .drawer-links a:hover{background:rgba(255,255,255,.06)}
.drawer:target, .drawer:hover, .drawer:focus-within{ transform:translateX(110%) !important; }
body.no-scroll{ overflow:hidden; overscroll-behavior:none; }

/* Backdrop */
.backdrop{
  position:fixed; inset:0; background:rgba(0,0,0,.45);
  opacity:0; pointer-events:none; transition:opacity .2s ease; z-index:999;
}
.backdrop.show{opacity:1; pointer-events:auto}

/* ===== Genel Bölümler ===== */
section{padding:50px 0}
.hero{padding:0}
.card{background:var(--card); border:1px solid #e6eef4; border-radius:var(--radius); padding:20px; box-shadow:var(--shadow)}
.page{padding:60px 0}

/* ===== Grid ===== */
.grid-3{display:grid; gap:18px; grid-template-columns:repeat(3,1fr)}
.grid-2{display:grid; gap:18px; grid-template-columns:repeat(2,1fr)}

/* ===== SLIDER – KESİN OVERRIDE ===== */
.slider{
  margin-top: 0;        /* varsayılan boşluğu kaldırır */
  padding-top: 0; 
  position:relative; overflow:hidden; background:#f3f7fb;
  height:var(--slider-height) !important; /* tüm cihazlarda aynı kadraj */
}
.slides{display:flex; height:150% !important; transition:transform .6s ease; will-change:transform}
.slide{
  min-width:100%; height:150% !important; /* track ile aynı yükseklik */
  display:grid; place-items:center; text-align:center; position:relative;
}
/* Eski CSS’teki 44vh / 38vh vb. kuralları kesin iptal et */
@media (max-width: 1900px){ .slide{height:var(--slider-height) !important; max-height:none !important} }
@media (max-width: 1080px){  .slide{height:var(--slider-height) !important; max-height:none !important} }
@media (max-width: 750px){  .slide{height:var(--slider-height) !important; max-height:none !important} }

/* Overlay + içerik */
.slide::before{content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(0,0,0,.35),rgba(0,0,0,.25)); z-index:1}
.slide-content{position:relative; z-index:2; padding:0 18px; color:#fff}
.slide h2{font-size:clamp(24px,5vw,48px); margin:0 0 6px}
.slide p{opacity:.95; margin:0 0 14px}

/* Görsel: aynı crop için cover + odak yardımcıları */
.slide .slide-bg{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; z-index:0}
.slide .slide-bg.focus-top{object-position:50% 15%}
.slide .slide-bg.focus-bottom{object-position:50% 85%}
.slide .slide-bg.focus-left{object-position:15% 50%}
.slide .slide-bg.focus-right{object-position:85% 50%}
.slide .slide-bg.focus-mid{object-position:50% 50%} /* varsayılan */

/* Oklar & noktalar */
.slider-arrow{position:absolute; top:50%; transform:translateY(-50%); background:rgba(0,0,0,.35); border:1px solid rgba(255,255,255,.22); color:#fff; width:42px; height:42px; border-radius:50%; display:grid; place-items:center; cursor:pointer; user-select:none}
.slider-arrow:hover{background:rgba(0,0,0,.55)}
.arrow-left{left:12px} .arrow-right{right:12px}
.dots{position:absolute; left:0; right:0; bottom:12px; display:flex; gap:8px; justify-content:center}
.dot{width:10px; height:10px; border-radius:50%; background:rgba(255,255,255,.45); border:1px solid rgba(255,255,255,.6); cursor:pointer}
.dot.active{background:var(--brand)}
/* ===== About teaser ===== */
.about-teaser{padding:40px 0}
.about-teaser .inner{display:grid; grid-template-columns:1.2fr 1fr; gap:22px; align-items:center}
.about-teaser img{border-radius:16px; border:1px solid #e6eef4}

/* ===== Services blocks ===== */
.svc-blocks{padding:10px 0 50px}
.svc-blocks .grid-3 .card{display:flex; flex-direction:column}
.svc-blocks .card .actions{margin-top:auto}
/* --- Hizmet kartı görseli --- */
.card-media{
  position:relative; border-radius:14px; overflow:hidden; border:1px solid #e6eef4;
  aspect-ratio:16/9; background:#f6fafc;
}
.card-media img{
  width:100%; height:100%; object-fit:cover; object-position:center; display:block;
  transition:transform .35s ease;
}
.card:hover .card-media img{ transform:scale(1.03); }

/* ===== Bölüm Ayırıcı + Açık bant ===== */
.section-sep{line-height:0; background:transparent}
.section-sep svg{display:block; width:100%; height:64px}
.section-on-tint{
  background:linear-gradient(180deg, #f6fbfd 0%, #eef7fb 100%);
  border-top:1px solid #e6eef4;
  padding-top:38px; padding-bottom:50px;
}
.section-on-tint .card{background:#fff}
.section-on-tint .card-media{background:#f0f6f9}

/* Küçük ekranda kart iç dolgusu */
@media (max-width:560px){
  .card{padding:16px}
}

/* ===== Footer ===== */
.footer-modern{position:relative; background:linear-gradient(180deg, #0b1b23, #0f2b3a); color:#d7e6ec; margin-top:40px}
.footer-modern .wrap{display:grid; gap:18px; grid-template-columns:2fr 1fr 1.2fr; padding:34px 0}
.footer-modern h4{margin:0 0 10px; color:#eaf2f8}
.footer-modern a{color:#c9dbe2}
.footer-modern .mini{opacity:.8; font-size:14px}
.footer-modern .bottom{display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; border-top:1px solid rgba(255,255,255,.08); padding:14px 0; color:#b9cbd2}

.footer-neo{
  margin-top:40px;
  background: radial-gradient(1200px 520px at 10% -10%, rgba(10,165,168,.15), transparent),
              radial-gradient(1200px 520px at 100% 120%, rgba(11,27,35,.45), rgba(11,27,35,1));
  color:#d7e6ec; border-top:1px solid rgba(255,255,255,.08);
}
.footer-neo .wrap{
  display:grid; gap:22px; padding:36px 0;
  grid-template-columns:2fr 1.2fr 1.2fr 1.4fr;
}
.footer-neo .brand{color:#eaf2f8}
.footer-neo .brand .logo{width:56px; height:56px; border-radius:12px; object-fit:cover; background:#fff}
.footer-neo h4{margin:0 0 12px; color:#eaf2f8}
.footer-neo a{color:#c9dbe2}
.footer-neo .mini{opacity:.85; font-size:14px}
.footer-neo .linkcol a{display:block; padding:6px 0}
.footer-neo .socials{display:flex; gap:12px; align-items:center; flex-wrap:wrap}
.footer-neo .chip-dark{
  display:inline-block; padding:6px 10px; border-radius:999px;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); color:#eaf2f8; font-size:12px; font-weight:700
}
.footer-neo .bottom{
  display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap;
  border-top:1px solid rgba(255,255,255,.08); padding:14px 0; color:#b9cbd2
}
.footer-neo .badge{
  display:inline-flex; align-items:center; gap:8px; padding:8px 12px;
  border-radius:999px; border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.05)
}
.footer-neo .badge img{width:22px; height:22px; border-radius:6px; object-fit:cover; background:#fff}

/* ===== WhatsApp Floating ===== */
.whatsapp-float{
  position:fixed; right:20px; bottom:20px; width:56px; height:56px; border-radius:50%;
  background:#25D366; color:#fff; display:grid; place-items:center; box-shadow:0 10px 22px rgba(0,0,0,.25);
  z-index:80; transition:transform .15s ease
}
.whatsapp-float:hover{transform:translateY(-2px)}
.whatsapp-float svg{width:28px; height:28px; fill:#fff}

@media (max-width:1200px ){.grid-3{grid-template-columns:repeat(2,1fr)}}
@media (max-width:780px){
  .grid-3{grid-template-columns:1fr}
  .grid-2{grid-template-columns:1fr}
  .nav{padding:10px 0}
  .brand .logo{width:48px; height:48px}
  .menu{display:none}
  .hamb{display:block}
}

/* === Off-canvas & overflow düzeltmeleri === */
html, body { overflow-x: hidden; max-width: 100%; }
body.no-scroll { position: fixed; inset: 0; width: 100%; overflow: hidden; }

/* Slider güvenliği */
.slider{ overflow: hidden; }
.slides{ display: flex; width: 100%; will-change: transform; }
.slide{ min-width: 100%; }

/* SVG dalga vb. */
.section-sep svg{ display: block; width: 100%; height: 64px; }

/* === Hizmetler grid === */
.svc-blocks .grid-3{ display:grid; gap:18px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
@media (max-width: 420px){ .svc-blocks .grid-3{ grid-template-columns: 1fr; } }

/* Eski Safari fallback (aspect-ratio yoksa) — hizmet kartları için */
@supports not (aspect-ratio: 1 / 1){
  .card-media{ height:0; padding-bottom:56.25%; }
  .card-media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
}
@media (max-width: 1900px){
  .slide .slide-bg{
    object-position: 16% 50% !important; /* her slayt merkeze */
    
  
  }
}