:root{
  --bg:#0f0f10;
  --bg2:#111214;
  --txt:#ffffff;
  --muted:#b9bcc2;
  --yellow:#ffd000;
  --yellow2:#ffc400;
  --card:#141518;
  --line:rgba(255,208,0,.25);
  --shadow:0 10px 30px rgba(0,0,0,.35);
  --radius:16px;
}

*{box-sizing:border-box}
html,body{
  margin:0;
  padding:0;
  background:var(--bg);
  color:var(--txt);
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif;
  width:100%;
  max-width:100%;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}

.container{
  max-width:980px;
  margin:0 auto;
  padding:16px;
  overflow-x:hidden;
}
.section{padding:18px 0}

.h1{font-size:30px;line-height:1.1;margin:0 0 10px}
.p{color:var(--muted);margin:0;line-height:1.55}

.badge{
  display:inline-flex;
  gap:8px;
  align-items:center;
  border:1px solid var(--line);
  padding:8px 10px;
  border-radius:999px;
  background:rgba(255,208,0,.06);
  color:#ffe58a;
  font-weight:700;
  font-size:13px;
}

/* ===== Topbar ===== */
.topbar{
  position:sticky;
  top:0;
  z-index:50;
  background:rgba(15,15,16,.92);
  backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.topbar-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:10px 16px;
}
.brand{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:900;
  letter-spacing:.2px;
}
.brand small{
  display:block;
  color:var(--muted);
  font-weight:700;
  font-size:12px;
  margin-top:1px;
}

/* ===== Buttons ===== */
.actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:44px;
  padding:0 14px;
  border-radius:12px;
  font-weight:900;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.06);
  white-space:nowrap;
}
.btn-primary{
  background:linear-gradient(135deg,var(--yellow),var(--yellow2));
  border:0;
  color:#121212;
}
.btn-outline{
  background:transparent;
  border:1px solid rgba(255,208,0,.45);
  color:#ffe58a;
}

/* ===== Cards / Services ===== */
.cards{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:10px;
}
.card{
  border-radius:16px;
  background:var(--card);
  border:1px solid rgba(255,255,255,.08);
  padding:14px;
}
.card h3{margin:0 0 6px;font-size:14px}
.card p{margin:0;color:var(--muted);font-size:13px;line-height:1.45}

/* ===== Reviews Slider ===== */
.slider-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:10px;
}
.slider{
  display:flex;
  gap:12px;
  overflow:auto;
  scroll-snap-type:x mandatory;
  padding-bottom:6px;
}
.slide{
  min-width:82%;
  scroll-snap-align:start;
  border:1px solid rgba(255,208,0,.22);
  background:rgba(255,255,255,.04);
  border-radius:18px;
  padding:14px;
}
.row{display:flex;gap:12px;align-items:center}
.avatar{
  width:44px;height:44px;border-radius:999px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.12);
}
.name{font-weight:900}
.meta{color:var(--muted);font-size:12px;font-weight:700;margin-top:2px}
.quote{margin:10px 0 0;color:#e8e8ea;line-height:1.55}

/* ===== Footer ===== */
.footer{
  padding:18px 0;
  border-top:1px solid rgba(255,255,255,.06);
  color:var(--muted);
  font-size:12px;
}
.note{color:var(--muted);font-size:12px;line-height:1.5;margin-top:10px}

/* ===== Forms (yorum-yaz vb.) ===== */
.form{display:grid;gap:10px}
.input, .textarea, .select{
  width:100%;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.04);
  color:var(--txt);
  padding:12px 12px;
  font-size:14px;
}
.textarea{min-height:120px;resize:vertical}
.avatars{display:flex;gap:10px;overflow:auto;padding-bottom:6px}
.avatar-pick{
  width:54px;height:54px;border-radius:999px;border:2px solid transparent;
  background:rgba(255,255,255,.06);
  flex:0 0 auto;
}
.avatar-pick.active{border-color:rgba(255,208,0,.8)}
.small{font-size:12px;color:var(--muted)}

/* ===== HERO SLIDER ===== */

/* full width section (container dışı kullanılır) */
.hero-full{
  width:100vw;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
}

.hero-slider{
  position:relative;
  overflow:hidden;
  border-radius:22px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.03);
  box-shadow:0 18px 50px rgba(0,0,0,.48);
  width:100%;
}

/* kritik: nowrap + her slide %100 */
.hero-slides{
  display:flex;
  flex-wrap:nowrap;
  width:100%;
  transition:transform .6s ease;
  will-change:transform;
}

.hero-slide{
  flex:0 0 100%;
  min-width:100%;
  position:relative;

  /* Gerçek cihazda stabil yükseklik:  */
  height:340px;
  background:
    radial-gradient(circle at 20% 20%, rgba(255,208,0,.12), transparent 40%),
    linear-gradient(180deg, rgba(20,20,26,.92), rgba(0,0,0,.92));
}

/* Dynamic viewport destekleyenlerde daha iyi */
@supports (height: 100dvh){
  @media (max-width: 819px){
    .hero-slide{ height: 38dvh; min-height: 320px; max-height: 420px; }
  }
}

@media (min-width:520px){
  .hero-slide{height:380px;}
}
@media (min-width:820px){
  .hero-slide{height:440px;}
}

.hero-slide img{
  width:100%;
  height:100%;
  object-fit:cover;
  filter:contrast(1.05) brightness(.85);
  transform:scale(1.03);
  display:block;
}

.hero-overlay{
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg, rgba(0,0,0,.78) 0%, rgba(0,0,0,.35) 55%, rgba(0,0,0,.10) 100%),
    linear-gradient(180deg, rgba(0,0,0,.25) 0%, rgba(0,0,0,.55) 100%);
}

.hero-checker{
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.18;
  background:
    linear-gradient(90deg, rgba(255,208,0,.85) 50%, transparent 50%),
    linear-gradient(rgba(255,208,0,.85) 50%, transparent 50%);
  background-size:18px 18px;
  mix-blend-mode:overlay;
}

.hero-content{
  position:absolute;
  left:16px;
  right:16px;
  top:18px;
  display:flex;
  flex-direction:column;
  gap:10px;
}

.hero-title{
  margin:0;
  font-size:34px;
  line-height:1.05;
  letter-spacing:-.6px;
  font-weight:950;
}

.hero-sub{
  margin:0;
  color:rgba(255,255,255,.82);
  font-weight:800;
  line-height:1.5;
  max-width:34ch;
}

.hero-chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{
  display:inline-flex;
  align-items:center;
  padding:8px 10px;
  border-radius:999px;
  border:1px solid rgba(255,208,0,.28);
  background:rgba(255,208,0,.08);
  color:#ffe58a;
  font-weight:900;
  font-size:12px;
}

/* Slider içi CTA (desktop/tablet için iyi) */
.hero-slider .hero-cta{
  position:absolute;
  left:12px;
  right:12px;
  bottom:12px;
  display:flex;
  gap:10px;
  margin-top:0;
  flex-wrap:nowrap;
}
.hero-slider .hero-cta a{
  flex:1;
  height:50px;
  border-radius:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:950;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.05);
}
.hero-slider .hero-cta .call{
  border:0;
  color:#121212;
  background:linear-gradient(135deg,#ffd000,#ffbf00);
}
.hero-slider .hero-cta .wa{
  border:1px solid rgba(255,208,0,.45);
  color:#ffe58a;
  background:transparent;
}

/* Dotlar */
.hero-dots{
  position:absolute;
  left:0;
  right:0;
  bottom:70px;
  display:flex;
  justify-content:center;
  gap:8px;
  pointer-events:auto;
}
.hero-dot{
  width:8px;
  height:8px;
  border-radius:999px;
  background:rgba(255,255,255,.35);
  border:1px solid rgba(255,255,255,.18);
}
.hero-dot.active{
  background:#ffd000;
  border-color:rgba(255,208,0,.55);
}

/* ===== Mobile Fixed Bar ===== */
.mobile-bar{
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  z-index:999;
  display:flex;
  gap:8px;
  padding:10px;
  padding-bottom:calc(10px + env(safe-area-inset-bottom));
  background:rgba(11,12,15,.95);
  backdrop-filter:blur(8px);
  border-top:1px solid rgba(255,255,255,.08);
}
.mobile-bar a{
  flex:1;
  height:48px;
  border-radius:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:900;
  text-decoration:none;
}
.mobile-bar .call{
  background:linear-gradient(135deg,#ffd000,#ffbf00);
  color:#121212;
}
.mobile-bar .wa{
  border:1px solid rgba(255,208,0,.45);
  color:#ffe58a;
  background:transparent;
}
@media (min-width: 820px){
  .mobile-bar{display:none;}
}

/* Mobil bar alttan kapatmasın (safe-area dahil) */
body{
  padding-bottom:calc(82px + env(safe-area-inset-bottom));
}
@media (min-width: 820px){
  body{padding-bottom:0;}
}

/* Mobilde CTA çakışmasını bitir: tek CTA = alttaki bar */
@media (max-width: 819px){
  .topbar .actions{display:none;}
  .hero-slider .hero-cta{display:none;}
}

/* ===== Desktop tweaks ===== */
@media (min-width: 820px){
  .h1{font-size:40px}
  .cards{grid-template-columns:repeat(4,1fr)}
  .slide{min-width:42%}
}

/* Mobil sabit barı daha ince ve şık yap */
@media (max-width: 819px){
  .mobile-bar{
    padding:8px 10px;
    padding-bottom:calc(8px + env(safe-area-inset-bottom));
  }
  .mobile-bar a{
    height:44px;
    border-radius:12px;
    font-size:14px;
  }
}

/* === Mobil sabit bar: ince, şık, profesyonel === */
@media (max-width: 819px){
  .mobile-bar{
    padding:8px 10px;
    padding-bottom:calc(8px + env(safe-area-inset-bottom));
    background:rgba(11,12,15,.92);
    backdrop-filter:blur(10px);
  }

  .mobile-bar a{
    height:44px;
    border-radius:12px;
    font-size:14px;
    font-weight:800;
  }

  /* İçeriğin bar altında kalmaması */
  body{
    padding-bottom:calc(66px + env(safe-area-inset-bottom));
  }
}