:root{
  --bg:#0b1020; --card:#111833; --muted:#94a3b8; --text:#e5e7eb; --accent:#7c3aed; --border:#243053;
  --radius:16px; --radius-lg:24px; --maxw:1160px; --shadow:0 10px 30px rgba(0,0,0,.35);
  --ui-scale:1;           /* fluid ölçek */
  --lang-d:40px;          /* dil butonu çapı */
}

/* Fluid ölçek ve dil butonu çapı */
@media (max-width:1024px){ :root{ --ui-scale:.95; } }
@media (max-width: 860px){ :root{ --ui-scale:.90; } }
@media (max-width: 720px){ :root{ --ui-scale:.85; --lang-d:36px; } }
@media (max-width: 640px){ :root{ --ui-scale:.82; } }
@media (max-width: 540px){ :root{ --ui-scale:.78; --lang-d:32px; } }
@media (max-width: 420px){ :root{ --ui-scale:.74; --lang-d:30px; } }

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji";
  background:var(--bg); color:var(--text);
}
img{ max-width:100%; height:auto; display:block; }
.container{ width:100%; max-width:var(--maxw); margin-inline:auto; padding:16px; }

/* NAV */
.nav{ position:sticky; top:0; backdrop-filter:blur(8px); background:rgba(11,16,32,.6); border-bottom:1px solid var(--border); z-index:50; }
.nav .container{ display:flex; align-items:center; gap:calc(16px * var(--ui-scale)); flex-wrap:wrap; }
.brand{
  order:1; font-weight:700; letter-spacing:.3px;
  white-space:nowrap; word-break:keep-all; hyphens:none; flex:0 0 auto;
  font-size:calc(18px * var(--ui-scale));
}

/* (opsiyonel) ana menü */
.nav nav{ order:2; margin-left:auto; display:none; gap:14px; }
.nav a{ color:var(--muted); text-decoration:none; font-size:calc(14px * var(--ui-scale)); }
.nav a:hover{ color:var(--text); }
@media (min-width:860px){ .nav nav{ display:flex; } }

/* Sağ blok: CTA + Dil — DAİMA sağda */
.lang-switch{
  order:3;
  margin-left:auto;                 /* sağa yasla */
  display:flex; align-items:center; gap:12px; justify-content:flex-end;
  width:auto;
}
/* CTA (Randevu) daima dil butonlarının SOLUNDA */
#openBooking{
  order:-1;                         /* önce gelsin */
  flex:0 0 auto;
}

/* Küçük ekranda sağ blok ikinci satıra inse bile sağda dursun */
@media (max-width:640px){
  .lang-switch{ width:100%; justify-content:flex-end; }
  #openBooking{ width:auto; }       /* genişlemesin */
}

/* Butonlar */
.btn{
  border:1px solid var(--border); background:transparent; color:var(--text);
  padding:calc(10px * var(--ui-scale)) calc(14px * var(--ui-scale));
  border-radius:999px; cursor:pointer; font-size:calc(14px * var(--ui-scale));
}
.btn.primary{ background:var(--accent); border-color:var(--accent); color:#fff; }
.btn.ghost{ background:transparent; }

/* Dil butonları: her boyutta daire */
.lang-switch .lang{
  width:var(--lang-d); height:var(--lang-d); padding:0; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  border:2px solid var(--border); background:transparent; color:var(--muted);
  font-size:calc(13px * var(--ui-scale)); line-height:1; box-sizing:border-box;
}
.lang-switch .lang:hover,
.lang-switch .lang.active{ color:#fff; border-color:var(--accent); }

/* HERO */
.hero{ padding:72px 0 48px; border-bottom:1px solid var(--border); }
.badge{ color:var(--muted); font-size:14px; margin-bottom:8px; display:inline-block; }
.hero h1{ font-size:clamp(28px,4vw,48px); line-height:1.1; margin:0 0 16px; }
.hero .lead{ color:var(--muted); max-width:760px; }
.gradient{ background:linear-gradient(90deg,#7c3aed,#22d3ee); -webkit-background-clip:text; background-clip:text; color:transparent; }
.cta{ display:flex; gap:12px; margin-top:18px; }

/* SECTIONS */
.grid{ padding:56px 0; }
.alt{ background:linear-gradient(180deg,rgba(255,255,255,.02), rgba(255,255,255,0));
  border-top:1px solid var(--border); border-bottom:1px solid var(--border); padding:56px 0; }
.cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.card{ background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:18px; box-shadow:var(--shadow); }

.bullets{ display:grid; grid-template-columns:repeat(2,1fr); gap:10px 16px; color:var(--muted); }
.stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }
.stats div{ background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:16px; text-align:center; }
.stats strong{ font-size:28px; display:block; }
.stats span{ color:var(--muted); font-size:12px; }

.steps{ display:grid; gap:8px; counter-reset:step; }
.steps li{ list-style:none; background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:14px; }
blockquote{ background:var(--card); border:1px solid var(--border); border-radius:var(--radius-lg); padding:20px; font-style:italic; }

/* FORMS */
.form{ display:grid; gap:12px; }
.form .row{ display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }
.form input,.form textarea{
  width:100%; background:#0f1730; color:var(--text);
  border:1px solid var(--border); border-radius:12px; padding:10px 12px;
}
.form label{ color:var(--muted); font-size:14px; display:grid; gap:6px; }
.form .actions{ display:flex; gap:10px; justify-content:flex-end; margin-top:4px; }
.result{ color:var(--muted); font-size:14px; min-height:20px; }

/* DIALOG (Modal) */
dialog{
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  background:var(--card); color:var(--text);
  padding:16px; box-shadow:var(--shadow);
  max-width:720px; width:min(96vw,720px);
}
dialog::backdrop{ background:rgba(0,0,0,.55); backdrop-filter:blur(2px); }

/* FOOTER */
.footer{ border-top:1px solid var(--border); padding:28px 0; color:var(--muted); }
.footer .container{ display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; }
.footer a{ color:var(--muted); text-decoration:none; transition:color .2s ease; }
.footer a:hover{ color:var(--text); text-decoration:underline; }
.footer .container a + a{ margin-left:28px; }

/* İçerik responsive */
@media (max-width:859px){
  .cards{ grid-template-columns:1fr; }
  .bullets{ grid-template-columns:1fr; }
  .stats{ grid-template-columns:repeat(2,1fr); }
  .form .row{ grid-template-columns:1fr; }

  .footer .container{ flex-direction:column; align-items:center; text-align:center; }
  .footer .container a + a{ margin-left:0; margin-top:8px; }
}

/* Çok dar ekran failsafe */
@media (max-width:360px){
  .brand{ font-size:calc(16px * var(--ui-scale)); letter-spacing:0; }
}

/* --- HEADER TEK SATIR ZORUNLU & SAĞA SABİTLEME --- */
.nav .container { flex-wrap: nowrap !important; }   /* asla sarma */
.lang-switch { width: auto !important; margin-left: auto; }  /* sağda kalsın */

/* Küçüldükçe CTA ve dil butonlarını birlikte ufalt */
@media (max-width: 720px){
  #openBooking{ font-size: 13px; padding: 9px 13px; white-space: nowrap; }
  .lang-switch{ gap: 10px; }
  :root{ --lang-d: 34px; }
}
@media (max-width: 560px){
  #openBooking{ font-size: 12px; padding: 8px 12px; }
  :root{ --lang-d: 30px; }
}
@media (max-width: 460px){
  #openBooking{ font-size: 11px; padding: 7px 10px; }
  :root{ --lang-d: 28px; }
}

/* Dil butonları daire kalmaya devam etsin */
.lang-switch .lang{
  width: var(--lang-d);
  height: var(--lang-d);
  padding: 0;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  border: 2px solid var(--border);
  background: transparent; color: var(--muted);
  line-height: 1;
}
.lang-switch .lang:hover,
.lang-switch .lang.active{ color:#fff; border-color: var(--accent); }

/* Mikro-animasyon ve focus görünürlüğü */
.btn{ transition: transform .12s ease, box-shadow .12s ease, background-color .2s; }
.btn:hover{ transform: translateY(-1px); box-shadow: 0 8px 24px rgba(124,58,237,.35); }
.btn:active{ transform: translateY(0); box-shadow: none; }
:focus-visible{ outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 10px; }

/* Hero içeriğine nefes */
.hero .lead{ font-size: 1.05rem; opacity:.95; }

/* Brand: logo + yazı yan yana */
.brand{
  display:inline-flex; align-items:center; gap:10px;
  text-decoration:none; color:inherit;
}
.brand .logo{ width:28px; height:28px; flex:0 0 28px; }

/* Hero iki sütun: solda metin, sağda görsel */
.hero-grid{
  display:grid; align-items:center; gap:24px;
  grid-template-columns: 1.2fr 0.8fr;
}
.hero-copy{ min-width: 0; }
.hero-art{ margin:0; }
.hero-art img{ width:100%; height:auto; display:block; filter: drop-shadow(0 12px 30px rgba(0,0,0,.35)); }

/* Mobilde tek sütun */
@media (max-width: 960px){
  .hero-grid{ grid-template-columns: 1fr; }
  .hero-art{ order:2; }
}

.modal-close{
  position:absolute; top:10px; right:12px;
  border:0; background:transparent; color:var(--muted);
  font-size:22px; line-height:1; cursor:pointer;
}
.modal-close:hover{ color:var(--text); }

/* ====== EK: Modal ve tarih/saat seçicisi üstte kalsın, kırpılmasın ====== */

/* Modal ve form içerisinde açılan popup'ları kesmeyelim, üstte tutalım */
dialog,
#bookingModal,
#bookingModal .form {
  overflow: visible;
  position: relative;
  z-index: 10000;
}

/* Harici/yerleşik datepicker'lar için yüksek z-index */
.flatpickr-calendar,
.datepicker,
.datepicker-dropdown,
.litepicker,
.ui-datepicker,
.qs-datepicker {
  z-index: 200000 !important;
}

/* WebKit gösterge butonları */
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator{
  position: relative;
  z-index: 2;
}

/* Aksiyon çubuğu takvimi kapatmasın */
#bookingModal .actions{
  position: relative;
  z-index: 1;
}

/* Sağ üst X – geniş hit-area (44x44), hep önde */
#closeBookingX{
  position: absolute;
  inset-block-start: 6px;   /* top */
  inset-inline-end: 6px;    /* right */
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  z-index: 2147483647;      /* her şeyin üstünde */
  pointer-events: auto;
  -webkit-tap-highlight-color: transparent;
}

/* Görünmez “hit-slop”: ekstra tıklanabilir alan */
#closeBookingX::before{
  content: "";
  position: absolute;
  inset: -6px;              /* 6px fazladan tıklanabilirlik */
}
#closeBookingX:hover { color: var(--text); }









/* === Slider === */
.slider {
  position: relative;
  width: 100%;
  min-height: clamp(360px, 56vw, 640px);
  background: #0b1020;
  overflow: hidden;
  isolation: isolate;
}

/* oklar */
.slider-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  z-index: 10 !important;              /* oklar her şeyin üstünde olsun */
  width: 48px; height: 48px; border-radius: 999px;
  border: 1px solid var(--border, #243053);
  background: rgba(12,16,32,.6);
  display: grid; place-items: center;
  cursor: pointer;
  pointer-events: auto !important;
  backdrop-filter: blur(6px);
  transition: background .2s ease, transform .2s ease;
}
.slider-arrow.left  { left: 16px; }
.slider-arrow.right { right: 16px; }
.slider-arrow:hover { background: rgba(12,16,32,.9); transform: translateY(-50%) scale(1.03); }
.slider-arrow span { font-size: 20px; color: #e5e7eb; line-height: 1; }

/* görünür alan + track */
.slider-viewport { width: 100%; height: 100%; }
.slider-track {
  display: flex;
  width: 100%;
  height: 100%;
  transition: transform .6s ease;
  will-change: transform;
}

/* her slide tam genişlik */
.slide {
  position: relative; flex: 0 0 100%;
  height: clamp(360px, 56vw, 640px);
  overflow: hidden;
}
.slide picture, .slide img {
  width: 100%; height: 100%; display: block;
  object-fit: cover; object-position: center;
}

/* — Görsel çok karanlık görünmesin: overlay'i kapat — */
.slider--no-dim::after { background: none !important; }

/* varsayılan overlay (kullanmak istersen .slider sınıfında bırak) */
.slider::after{
  content: ""; position: absolute; inset: 0; z-index: 2;
  background:
    radial-gradient(120% 120% at 75% 35%, transparent 0%, rgba(0,0,0,.5) 60%),
    linear-gradient(90deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.25) 55%, rgba(0,0,0,.6) 100%);
  pointer-events: none;
}

/* metin katmanı */
.slider-caption{
  position: absolute; inset: 0;
  display: grid; align-content: center;
  padding: clamp(20px, 6vw, 64px);
  z-index: 3; color: var(--text, #e5e7eb);
}
.slider-caption h2{
  font-size: clamp(28px, 5vw, 56px);
  line-height: 1.05; margin: 0 0 .5rem; letter-spacing: .2px;
}
.slider-caption p{
  font-size: clamp(14px, 1.8vw, 18px);
  color: var(--muted, #94a3b8); margin: 0 0 1.2rem;
}

/* CTA İSTEMİYORSUN: tamamen gizle */
.slider-caption #slideCta { display: none !important; }

/* noktalar */
.slider-dots{
  position: absolute; z-index: 4; left: 50%; bottom: 18px; transform: translateX(-50%);
  display: flex; gap: 10px;
}
.slider-dots button{
  width: 28px; height: 6px; border-radius: 999px; border:0;
  background: rgba(255,255,255,.35); cursor: pointer;
  transition: width .2s ease, background .2s ease;
}
.slider-dots button[aria-selected="true"]{
  width: 36px; background: #fff;
}

/* mobil hizalama */
@media (max-width: 768px){
  .slider-caption{ align-content: end; padding-bottom: 72px; }
  .slider-arrow { width: 40px; height: 40px; }
}

/* (İSTEĞE BAĞLI) SVG’yi kesmeden gösterilecekse:
.slide img[src$=".svg"] { object-fit: contain !important; background:#0b1020; } */


/* === Booking modal: her zoomda form diyaloğun içinde kalsın === */

/* Diyaloğu ekrana göre sınırla */
#bookingModal{
  max-height: 92dvh;          /* ekranın %92'si: üst-alt nefes */
  width: min(96vw, 720px);
  overflow: hidden;            /* taşan içerik modal dışına çıkmasın */
  padding: 16px;               /* mevcut padding kalsın */
  border-radius: var(--radius-lg);
}

/* Formu içten kaydır: tüm alanlar modalın içinde görünür */
#bookingModal .form{
  max-height: calc(92dvh - 32px); /* modal padding (16+16) düşüldü */
  overflow: auto;                 /* içerik dikey kaydırılır */
  padding-bottom: 16px;           /* alt köşede kesilmesin */
}

/* Çok büyüyen metin alanı modalı itmesin */
#bookingModal .form textarea{
  max-height: 40dvh;              /* güvenli üst sınır */
  resize: vertical;
}

/* Aksiyon çubuğu normal akışta kalsın (sabit değil) ama yapışık duruş istiyorsan
   aşağıdaki bloğu açabilirsin. Sticky sorun çıkarırsa kapalı bırak. */
/*
#bookingModal .form .actions{
  position: sticky; bottom: 0; z-index: 1;
  background: linear-gradient(to top, rgba(11,16,32,.95), rgba(11,16,32,.75) 70%, transparent);
  margin-top: 8px; padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,.06);
}
*/

/* iOS viewport ölçümü için uyum (Safari) */
@supports (height: 100dvh){
  #bookingModal{ max-height: 92dvh; }
  #bookingModal .form{ max-height: calc(92dvh - 32px); }
}



/* Consents */
.form .consents { display:grid; gap:10px; margin-top:6px; }
.form .check { display:grid; grid-template-columns:18px 1fr; align-items:start; gap:10px; color:var(--muted); font-size:14px; }
.form .check input[type="checkbox"] { margin-top:3px; transform: translateY(1px); }
.linklike { background:transparent; border:0; padding:0 0 0 6px; color:#9cc4ff; text-decoration:underline; cursor:pointer; font:inherit; }
.linklike:hover { color:#cfe2ff; }

/* mini diyaloglar */
#kvkkDialog, #mktDialog { max-width: min(96vw, 760px); }
#kvkkDialog .doc, #mktDialog .doc { max-height: 60vh; overflow:auto; }

/* Contact form — consent alanı: kutu yok, hizalar düzgün */
fieldset.consents{
  border: 0 !important;
  outline: 0 !important;
  padding: 0;
  margin: 8px 0 10px;      /* butonlardan önce nefes */
  background: transparent;
  width: 100%;
}

/* Satır: mevcut form stiliyle aynı grid */
fieldset.consents .check{
  display: grid;
  grid-template-columns: 18px 1fr;
  align-items: start;
  gap: 10px;
  margin: .35rem 0;
  padding: 0;
  border: 0;
  background: transparent;
}

fieldset.consents .check input{ margin-top: 3px; }   /* metinle hizala */

/* Metin ve “Read / Metni oku” linki */
fieldset.consents .check > span{
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  color: var(--muted);
}

fieldset.consents .linklike{
  border: 0;
  background: transparent;
  padding: 0;
  margin: 0 0 0 4px;
  color: var(--accent);
  text-decoration: underline;
  cursor: pointer;
}
fieldset.consents .linklike:hover{ filter: brightness(1.1); }

/* === Contact modal: mobilde butonlar içeride kalsın === */
#contactModal{
  max-height: 92dvh;                 /* ekrana göre sınırla */
  width: min(96vw, 720px);
  overflow: hidden;                   /* taşma yok */
  padding: 16px;
  border-radius: var(--radius-lg);
}

/* Formu içte kaydır: tüm alanlar ve butonlar modaldan çıkmasın */
#contactModal .form{
  max-height: calc(92dvh - 32px);     /* modal padding (16+16) düşüldü */
  overflow: auto;                     /* içerik dikey kayar */
  padding-bottom: 16px;               /* alt kesilmesin */
}

/* (İsteğe bağlı) Butonları yapışkan tut: daima görünür */
#contactModal .form .actions{
  position: sticky;
  bottom: 0;
  z-index: 1;
  background: linear-gradient(
    to top,
    rgba(11,16,32,.96),
    rgba(11,16,32,.75) 60%,
    transparent
  );
  margin-top: 8px;
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,.06);
}

/* Çok büyüyen mesaj alanı modalı itmesin */
#contactModal .form textarea{
  max-height: 40dvh;
  resize: vertical;
}

/* iOS/Safari viewport uyumu */
@supports (height: 100dvh){
  #contactModal{ max-height: 92dvh; }
  #contactModal .form{ max-height: calc(92dvh - 32px); }
}


#contactModal .form .actions{
  position: static;       /* normal akış */
  background: transparent !important;
  border-top: 0 !important;
  margin-top: 12px;
  padding-top: 0;
}

/* Services — pro kart stili */
.svc-title{font-size:clamp(1.6rem,2vw,2rem);margin-bottom:1.25rem}
.svc-cards{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1.25rem;
}
@media (max-width:960px){ .svc-cards{grid-template-columns:1fr}}
.svc-card{
  background:rgba(255,255,255,0.03);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:16px;
  padding:1.25rem 1.25rem 1rem;
  box-shadow:0 6px 16px rgba(0,0,0,.25);
  display:flex;flex-direction:column;gap:.75rem;
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.svc-card:hover{
  transform:translateY(-2px);
  border-color:rgba(124,58,237,.35);
  box-shadow:0 12px 24px rgba(124,58,237,.12);
}
.svc-head{display:flex;align-items:center;gap:.6rem}
.svc-ico{width:22px;height:22px;opacity:.9}
.svc-h{margin:0;font-size:1.05rem}
.svc-lead{margin:.25rem 0 .25rem;color:#cbd5e1;line-height:1.45}
.svc-list{margin:.25rem 0 .25rem;padding-left:1.1rem;display:grid;gap:.35rem}
.svc-list li{color:#e2e8f0}
.svc-cta{margin-top:auto}
.btn.sm{padding:.45rem .7rem;font-size:.9rem;border-radius:10px}

/* === Expertise === */
.exp-head{margin-bottom:.75rem}
.exp-head h2{font-size:clamp(1.4rem,2vw,1.8rem)}
.exp-sub{color:#a5b4fc;margin:.25rem 0 1rem}

.exp-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:.5rem 1.25rem;
  padding:0;
  list-style:none;
  border-top:1px solid rgba(255,255,255,.06);
  padding-top:1rem;
}
@media (max-width:900px){ .exp-grid{grid-template-columns:1fr} }

.exp-item{
  display:flex;align-items:flex-start;gap:.6rem;
  padding:.55rem .65rem;
  border:1px solid rgba(255,255,255,.06);
  border-radius:12px;
  background:rgba(255,255,255,.02);
  transition:transform .15s ease, border-color .15s ease, background .15s ease;
}
.exp-item:hover{transform:translateY(-1px);border-color:rgba(124,58,237,.35);background:rgba(124,58,237,.06)}

.exp-ico{
  display:inline-grid;place-items:center;
  width:22px;height:22px;border-radius:6px;
  font-weight:700;line-height:1;
  background:rgba(124,58,237,.18);
  color:#e9d5ff;flex:0 0 22px;
}

/* === KPIs === */
.kpi h2{margin-bottom:1rem;font-size:clamp(1.4rem,2vw,1.8rem)}
.kpi-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:1rem;
}
@media (max-width:1024px){ .kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:560px){ .kpi-grid{grid-template-columns:1fr} }

.kpi-card{
  position:relative;
  border-radius:18px;
  padding:1.1rem .9rem .95rem;
  background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 8px 20px rgba(0,0,0,.25);
  text-align:center;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.kpi-card::before{
  content:"";position:absolute;inset:0;border-radius:18px;
  padding:1px;background:linear-gradient(90deg,rgba(124,58,237,.45),transparent 60%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude; /* gradient kenar */
}
.kpi-card:hover{transform:translateY(-2px);border-color:rgba(124,58,237,.35);
  box-shadow:0 14px 28px rgba(124,58,237,.15)
}

.kpi-val{
  display:block;
  font-weight:800;
  font-size:clamp(1.4rem,3vw,2rem);
  letter-spacing:.5px;
}
.kpi-label{
  display:block;margin-top:.35rem;
  color:#cbd5e1;font-size:.95rem
}

/* === Méthode (timeline) === */
.method h2{margin-bottom:.8rem;font-size:clamp(1.4rem,2vw,1.8rem)}
.method-timeline{
  position:relative;list-style:none;margin:0;padding-left:0
}
.method-timeline .step{
  position:relative;display:grid;grid-template-columns:44px 1fr;
  gap:0.9rem;align-items:start;padding:0.85rem 0
}
.method-timeline .step:not(:last-child){padding-bottom:1.05rem}
.method-timeline .step::before{
  content:"";position:absolute;left:22px;top:44px;bottom:-.1rem;width:2px;
  background:linear-gradient(180deg,rgba(124,58,237,.55),rgba(255,255,255,.06))
}
.method-timeline .step:last-child::before{display:none}

.step-num{
  display:grid;place-items:center;
  width:44px;height:44px;border-radius:12px;
  font-weight:800;background:rgba(124,58,237,.16);color:#e9d5ff;
  border:1px solid rgba(124,58,237,.45);
  box-shadow:0 6px 16px rgba(124,58,237,.15)
}
.step-body{
  border:1px solid rgba(255,255,255,.08);
  background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.02));
  border-radius:14px;padding:.85rem .95rem;
  transition:transform .15s ease, border-color .15s ease, background .15s ease
}
.step-title{margin:0 0 .15rem;font-size:1rem}
.step-desc{margin:0;color:#cbd5e1;font-size:.95rem}
.step-body:hover{transform:translateY(-2px);border-color:rgba(124,58,237,.35);background:rgba(124,58,237,.06)}
@media (max-width:560px){
  .method-timeline .step{grid-template-columns:36px 1fr}
  .step-num{width:36px;height:36px;border-radius:10px}
}

/* === Témoignages === */
.testi h2{margin-bottom:.9rem;font-size:clamp(1.4rem,2vw,1.8rem)}
.testi-card{
  position:relative;isolation:isolate;
  padding:1.1rem 1.2rem 1rem;border-radius:18px;
  border:1px solid rgba(255,255,255,.08);
  background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.02));
  box-shadow:0 10px 22px rgba(0,0,0,.25);
  overflow:hidden
}
.testi-card::before{
  content:"";position:absolute;inset:-1px;border-radius:18px;z-index:-1;
  background:radial-gradient(1200px 300px at 0% 0%,rgba(124,58,237,.16),transparent 60%)
}
.testi-quote{
  position:absolute;top:.2rem;left:.6rem;font-size:3rem;line-height:1;color:#a78bfa;opacity:.35
}
.testi blockquote{margin:0 0 .9rem 0;font-size:1.05rem}
.testi-meta{display:flex;align-items:center;gap:.7rem}
.testi-avatar{
  width:48px;height:48px;border-radius:50%;
  border:1px solid rgba(255,255,255,.2);object-fit:cover
}
.testi-name{font-weight:700}
.testi-org{color:#cbd5e1;font-size:.95rem}

/* animasyon */
.step-body{opacity:.92;transform:translateY(4px);transition:opacity .25s ease, transform .25s ease}
.step-body.on{opacity:1;transform:translateY(0)}

/* ===== Footer ===== */
.site-footer{
  border-top:1px solid rgba(255,255,255,.06);
  background:#0b1020;
  position:relative;
}
.footer-wrap{
  display:grid;
  grid-template-columns: 1fr auto 1fr;
  align-items:center;
  gap:1rem;
  padding:1rem 0;
}
.footer-brand{
  display:flex; align-items:center; gap:.5rem;
  color:#cbd5e1; font-weight:600;
}
.footer-brand .dot{opacity:.6}

.footer-nav{
  display:flex; gap:2.25rem;
  justify-content:center; align-items:center;
}
.footer-nav a{
  color:#93c5fd; text-decoration:none; position:relative;
  padding:.25rem 0;
}
.footer-nav a::after{
  content:""; position:absolute; left:0; right:0; bottom:-2px; height:1px;
  background:linear-gradient(90deg,rgba(147,197,253,.0),rgba(147,197,253,.9),rgba(147,197,253,.0));
  transform:scaleX(0); transform-origin:center; transition:transform .18s ease;
}
.footer-nav a:hover,.footer-nav a:focus-visible{color:#bfdbfe}
.footer-nav a:hover::after,.footer-nav a:focus-visible::after{transform:scaleX(1)}
.footer-nav a:focus-visible{outline:2px solid rgba(147,197,253,.5); outline-offset:2px; border-radius:4px}

.footer-copy{
  justify-self:end; color:#94a3b8; text-align:right; font-size:.95rem;
}

/* en üste dön tuşu */
.to-top{
  position:absolute; right:1rem; bottom:1rem;
  width:36px; height:36px; border-radius:10px; cursor:pointer;
  color:#e2e8f0; background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  transition:transform .15s ease, background .15s ease, border-color .15s ease;
}
.to-top:hover{transform:translateY(-2px); background:rgba(255,255,255,.1); border-color:rgba(147,197,253,.4)}
.to-top:focus-visible{outline:2px solid rgba(147,197,253,.55); outline-offset:2px}

/* mobil hizalama */
@media (max-width: 820px){
  .footer-wrap{grid-template-columns:1fr; text-align:center}
  .footer-brand{justify-content:center}
  .footer-copy{justify-self:center; text-align:center}
  .footer-nav{gap:1.25rem}
  .to-top{right:.75rem}
}

/* Layout & spacing */
.hero { padding-block: clamp(3rem, 6vw, 6rem); }
.hero-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(2rem, 4vw, 3rem);
  align-items: center;
}
@media (max-width: 900px){
  .hero-grid { grid-template-columns: 1fr; }
}

/* Badge */
.badge {
  display: flex; flex-wrap: wrap; gap: .5rem .75rem;
  color: #9fb3c8; font-size: .95rem;
}
.badge span { position: relative; padding-left: 1rem; }
.badge span::before{
  content:"•"; position: absolute; left:.2rem; color:#6aa9ff80;
}

/* Typography */
.hero-title {
  margin: .25rem 0 .5rem;
  font-size: clamp(2.2rem, 4.5vw, 3.5rem);
  line-height: 1.08; letter-spacing: -.02em;
}
.hero-title .accent{
  background: linear-gradient(90deg, #48c6ff 0%, #7c3aed 60%, #a78bfa 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  font-weight: 800;
}
.hero-title em { font-style: normal; color: #cde4ff; text-shadow: 0 0 0 currentColor; }

.lead {
  color:#c5d2df; max-width: 62ch;
  font-size: clamp(1rem, 1.4vw, 1.125rem);
}

/* CTA group */
.cta { display: flex; gap: .75rem; flex-wrap: wrap; margin-top: 1.25rem; }
.btn { padding:.8rem 1.1rem; border-radius: .8rem; }
.btn.primary { font-weight: 600; }
.btn.ghost { border:1px solid rgba(255,255,255,.18); }

/* Trust chips */
.trust-chips{
  display:flex; gap:.5rem .75rem; flex-wrap:wrap; margin-top: 1rem; color:#9fb3c8;
}
.trust-chips li{
  list-style:none; font-size:.9rem;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  padding:.35rem .6rem; border-radius: .6rem;
}

/* Hero image card */
.hero-art{
  position: relative; margin:0;
  border-radius: 16px; overflow: clip;
  outline: 1px solid rgba(255,255,255,.12);
  background: radial-gradient(120% 120% at 100% 0%, rgba(124,58,237,.18) 0%, rgba(255,255,255,0) 38%);
}
.hero-art img{ display:block; width:100%; height:auto; }
.hero-art::after{
  /* üstte soft fade, görsele derinlik verir */
  content:""; position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(8,11,20,.0) 60%, rgba(8,11,20,.08) 100%);
  pointer-events:none;
}

/* Screen reader only helper */
.sr-only{
  position:absolute!important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

:root{
  --grad: linear-gradient(90deg,#6ee7f9 0%,#8b5cf6 100%);
  --bg-deep:#0b1320;
  --ink:#e5e7eb;
  --ink-dim:#9aa4b2;
  --card:#0f1a2b;
  --accent:#7c3aed;
}

.d365-slider{
  position:relative;
  overflow:hidden;
  background:var(--bg-deep);
  border-radius:20px;
  padding:clamp(16px,3vw,28px);
  margin-block:32px 48px;
}

.d365-slider__track{
  display:flex;
  transition:transform .5s ease;
  will-change:transform;
}

.d365-slide{
  min-width:100%;
  display:grid;
  grid-template-columns: 1.1fr 1fr;
  gap:clamp(16px,3vw,32px);
  align-items:center;
}
@media (max-width: 900px){
  .d365-slide{ grid-template-columns:1fr; }
}

.d365-slide__text .d365-kicker{
  color:var(--ink-dim);
  text-transform:uppercase;
  letter-spacing:.08em;
  font-size:.85rem;
  margin:0 0 .5rem;
}

.d365-slide__text h2{
  font-size:clamp(1.8rem,3.2vw,2.6rem);
  margin:.2rem 0 1rem;
  line-height:1.15;
}
.d365-slide__text .grad{
  background:var(--grad);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.d365-lead{
  color:var(--ink);
  opacity:.9;
  margin: 0 0 .75rem;
  font-size:clamp(1.02rem,2.2vw,1.12rem);
}

.d365-bullets{
  margin:.5rem 0 1.2rem;
  padding-left: 1.1rem;
  color:var(--ink-dim);
}
.d365-bullets li{ margin:.35rem 0; }

.d365-cta{ display:flex; gap:.75rem; flex-wrap:wrap; }

.d365-slide__media{
  background: radial-gradient(60% 60% at 60% 40%, rgba(124,58,237,.18), transparent 60%);
  border-radius:16px;
  overflow:hidden;
}
.d365-slide__media img{
  display:block; width:100%; height:auto;
  transform: translateZ(0);
}

/* Controls */
.d365-slider__controls{
  display:flex; align-items:center; justify-content:center;
  gap:.75rem; margin-top:14px;
}
.d365-nav{
  background:#172136; color:#cbd5e1;
  border:1px solid #26324a; border-radius:10px;
  width:40px; height:40px; display:grid; place-items:center;
  cursor:pointer;
}
.d365-nav:hover{ border-color:#3b4866; color:#fff; }

.d365-dots{ display:flex; gap:.4rem; }
.d365-dots button{
  width:9px; height:9px; border-radius:50%;
  background:#2a3650; border:none; cursor:pointer;
}
.d365-dots button[aria-selected="true"]{
  background: linear-gradient(90deg,#60a5fa,#a78bfa);
  width:24px; border-radius:999px;
}

/* Generic buttons (varsa sitenin btn stillerini kullan) */
.btn{ padding:.6rem .9rem; border-radius:10px; border:1px solid #334155; color:#e5e7eb; }
.btn.primary{ background:var(--accent); border-color:transparent; }
.btn.ghost{ background:transparent; }
.btn:hover{ filter:brightness(1.05); }

.d365-slider{ position:relative; overflow:hidden; }
.d365-slider__track{ display:flex; transition:transform .5s ease; will-change:transform; }
.d365-slide{ min-width:100%; display:grid; grid-template-columns:1.1fr 1fr; gap:clamp(16px,3vw,32px); align-items:center; }
@media (max-width:900px){ .d365-slide{ grid-template-columns:1fr; } }

.d365-slider__controls{
  position:relative; z-index:2; /* görselin üstünde tıklanabilir */
  display:flex; align-items:center; justify-content:center; gap:.75rem; margin-top:14px;
}
.d365-nav{ cursor:pointer; }
.d365-dots button{ cursor:pointer; }

:root{
  --container: 1200px;    /* sitenin ana max genişliği */
  --gutter: 16px;         /* sağ/sol padding */
}

/* Hero ve D365 slider'ları sayfa genişliğiyle hizala */
.slider,
.d365-slider{
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Kayan alanlar taşma yapmasın */
.slider .slider-viewport,
.d365-slider__viewport{
  overflow: hidden;
  border-radius: 14px;     /* isteğe bağlı */
}

/* Track/slide temel kurulum */
.slider .slider-track,
.d365-slider__track{
  display: flex;
  gap: 0;
  transition: transform .5s ease;
  will-change: transform;
}

/* Her slayt tam genişlikte olsun; “bir sonrakinin” görünmesi engellensin */
.slider .slide,
.d365-slide{
  flex: 0 0 100%;
  max-width: 100%;
  box-sizing: border-box;
}

/* İçerik padding'i slayt içine değil bir iç sarmala verin
   (slayt genişliği %100 kalsın, taşma yapmasın) */
.d365-slide-inner{ padding: 24px; }
@media (max-width: 768px){
  .d365-slide-inner{ padding: 16px; }
}

/* Görsellerin taşmasını engelle */
.slider img,
.d365-slide img,
.slider picture,
.d365-slide picture{
  display: block;
  width: 100%;
  height: auto;
}

/* Mobilde dokunma: yatay swipe algılansın, dikey scroll bloklanmasın */
.slider,
.d365-slider{ touch-action: pan-y; }

/* Slider viewport taşmayı gizlesin */
.slider .slider-viewport,
.d365-slider .d365-viewport {
  overflow: hidden;
}

/* Track animasyonu */
.slider .slider-track,
.d365-slider .d365-slider__track {
  transition: transform 380ms cubic-bezier(.22,.61,.36,1);
}

/* Slaytlar tam genişlik */
.slider .slide,
.d365-slider .d365-slide {
  flex: 0 0 100%;
  min-width: 100%;
}