:root{
  --bg:#ffffff;
  --surface:#f7f8fa;
  --text:#111827;
  --muted:#6b7280;
  --border:#e5e7eb;
  --brand:#0f2a44;
  --brand2:#0b5cab;
  --cta:#0b5cab;
  --ctaText:#ffffff;
  --shadow: 0 10px 30px rgba(17,24,39,.08);
  --radius:18px;
  --max:1120px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial; color:var(--text); background:var(--bg); line-height:1.65}
a{color:var(--brand2); text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%; height:auto}
.container{max-width:var(--max); margin:0 auto; padding:0 18px}
.section{padding:56px 0}
.surface{background:var(--surface)}
.grid{display:grid; gap:18px}
.grid-2{grid-template-columns:repeat(2, minmax(0, 1fr))}
.grid-3{grid-template-columns:repeat(3, minmax(0, 1fr))}
@media (max-width: 900px){.grid-2,.grid-3{grid-template-columns:1fr}}
.header{position:sticky; top:0; z-index:50; background:rgba(255,255,255,.88); backdrop-filter: blur(10px); border-bottom:1px solid var(--border)}
.nav{display:flex; align-items:center; justify-content:space-between; padding:14px 0; gap:12px; flex-wrap:wrap}
.brand{display:flex; align-items:center; gap:10px}
.logo{width:38px;height:38px;border-radius:12px;background:linear-gradient(135deg,var(--brand),var(--brand2));display:inline-block}
.brand strong{color:var(--brand); letter-spacing:.2px}
.menu{display:flex; gap:12px; align-items:center; flex-wrap:wrap}
.menu a{color:var(--text); font-weight:650; font-size:14px}
.menu a.active{color:var(--brand2)}
.pill{background:rgba(17,24,39,.04); border:1px solid var(--border); padding:8px 10px; border-radius:999px}
.badge{display:inline-flex; align-items:center; gap:8px; background:rgba(11,92,171,.08); color:var(--brand2); border:1px solid rgba(11,92,171,.18); padding:6px 10px; border-radius:999px; font-weight:800; font-size:13px}
.h1{font-size:42px; line-height:1.12; letter-spacing:-.02em; margin:12px 0 10px}
.h2{font-size:28px; letter-spacing:-.01em; margin:0 0 10px}
.h3{font-size:18px; margin:0 0 6px}
.lead{font-size:18px; color:var(--muted); margin:0 0 14px}
.small{font-size:14px; color:var(--muted)}
.hr{height:1px; background:var(--border); margin:18px 0}
.card{background:var(--bg); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); padding:22px}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:12px 16px; border-radius:14px; border:1px solid rgba(11,92,171,.25); background:var(--cta); color:var(--ctaText); font-weight:900; box-shadow:0 10px 24px rgba(11,92,171,.18); font-size:14px}
.btn.secondary{background:transparent; color:var(--brand); border:1px solid var(--border); box-shadow:none; font-weight:800}
.btn:hover{filter:brightness(.985); text-decoration:none}
.hero{padding:46px 0 22px}
.heroWrap{border-radius:24px; border:1px solid var(--border); background:radial-gradient(900px 420px at 12% 8%, rgba(11,92,171,.14), transparent 60%), radial-gradient(900px 420px at 88% 20%, rgba(15,42,68,.10), transparent 55%), #fff; box-shadow:var(--shadow); padding:26px; overflow:hidden}
.heroCols{display:grid; grid-template-columns:1.15fr .85fr; gap:18px; align-items:stretch}
@media(max-width:900px){.heroCols{grid-template-columns:1fr}}
.kpi{display:flex; gap:14px; flex-wrap:wrap; margin-top:10px}
.kpi .k{border:1px solid var(--border); border-radius:16px; padding:10px 12px; background:rgba(17,24,39,.02); min-width: 170px}
.k .num{font-size:18px; font-weight:950; color:var(--brand)}
.k .lbl{font-size:13px; color:var(--muted); font-weight:700}
.list{margin:10px 0 0; padding:0 0 0 18px}
.list li{margin:6px 0}
.footer{border-top:1px solid var(--border); padding:26px 0; background:#fff}
.footerGrid{display:grid; grid-template-columns: 1.1fr .9fr; gap:18px}
@media(max-width:900px){.footerGrid{grid-template-columns:1fr}}
.note{border-left:4px solid rgba(11,92,171,.35); padding:12px 14px; background:rgba(11,92,171,.05); border-radius:14px}
.faq details{border:1px solid var(--border); border-radius:16px; padding:12px 14px; background:#fff}
.faq details+details{margin-top:10px}
.faq summary{cursor:pointer; font-weight:850}
.breadcrumb{font-size:13px; color:var(--muted)}
.breadcrumb a{color:var(--muted)}
.table{width:100%; border-collapse:collapse}
.table th,.table td{border:1px solid var(--border); padding:10px; text-align:left; vertical-align:top}
.table th{background:rgba(17,24,39,.03)}
.tagrow{display:flex; gap:8px; flex-wrap:wrap; margin-top:10px}
.tag{font-size:12px; font-weight:800; color:var(--brand); background:rgba(15,42,68,.06); border:1px solid rgba(15,42,68,.14); padding:6px 10px; border-radius:999px}
input,select,textarea{font:inherit}
code{background:rgba(17,24,39,.04); padding:2px 6px; border-radius:8px; border:1px solid var(--border)}

/* Forms */
.form{margin-top:14px}
.form-row{display:flex;flex-direction:column;gap:8px;margin:12px 0}
.form-row label{font-weight:650}
.form-row input,.form-row select,.form-row textarea{
  border:1px solid #e5e7eb;border-radius:14px;padding:12px 12px;font:inherit;background:#fff;
}
.form-row input:focus,.form-row select:focus,.form-row textarea:focus{outline:2px solid rgba(11,92,171,.18);border-color:#bcd2ea}

/* Content typography */
.content h2{margin:18px 0 10px}
.content p{margin:10px 0; line-height:1.7}
.content ul{margin:10px 0 10px 18px}


/* ===== Theme v6: richer premium palette ===== */
:root{
  --brand:#0b5cab;
  --brand-2:#0ea5a4;
  --brand-3:#7c3aed;
  --ink:#0f172a;
  --muted:#475569;
  --bg:#f8fafc;
  --card:#ffffff;
  --line:#e2e8f0;
  --shadow: 0 12px 30px rgba(2,6,23,.08);
}

body{background: radial-gradient(900px 500px at 15% -10%, rgba(14,165,164,.12), transparent 60%),
              radial-gradient(900px 500px at 85% -10%, rgba(124,58,237,.12), transparent 60%),
              var(--bg); color:var(--ink);}
.header{backdrop-filter:saturate(1.2) blur(10px); background:rgba(248,250,252,.82); border-bottom:1px solid rgba(226,232,240,.9)}
.brand-mark{background: linear-gradient(135deg, var(--brand), var(--brand-2) 45%, var(--brand-3)); box-shadow:0 10px 24px rgba(11,92,171,.22)}
.nav a{color:var(--ink)}
.nav a:hover{color:var(--brand)}
.btn{box-shadow:0 10px 22px rgba(2,6,23,.08)}
.btn-primary{background: linear-gradient(135deg, var(--brand), var(--brand-2)); border:0}
.btn-primary:hover{filter:brightness(1.03)}
.card{background:rgba(255,255,255,.92); border:1px solid rgba(226,232,240,.9); box-shadow:var(--shadow)}
.card:hover{transform: translateY(-1px); box-shadow:0 16px 40px rgba(2,6,23,.10)}
.hr{background: linear-gradient(90deg, rgba(11,92,171,.15), rgba(14,165,164,.15), rgba(124,58,237,.12)); height:2px; border-radius:999px}
.lead{color:var(--muted)}
.footer{background: linear-gradient(180deg, rgba(15,23,42,.98), rgba(15,23,42,.94)); color:rgba(248,250,252,.92)}
.footer a{color:rgba(248,250,252,.86)}
.footer a:hover{color:#fff}
.note{border:1px solid rgba(14,165,164,.25); background: rgba(14,165,164,.08)}
/* pills / badges */
.badge{display:inline-flex;align-items:center;gap:8px;border-radius:999px;padding:8px 12px;
  border:1px solid rgba(14,165,164,.25); background: rgba(14,165,164,.08); color:var(--ink); font-weight:650}

/* Floating WhatsApp */
.wa-float{
  position:fixed; right:18px; bottom:18px; z-index:999;
  display:flex; gap:10px; align-items:center;
}
.wa-float a{
  display:inline-flex; align-items:center; justify-content:center;
  width:56px; height:56px; border-radius:999px;
  background: linear-gradient(135deg, var(--brand-2), var(--brand));
  color:#fff; border:0; box-shadow:0 14px 30px rgba(2,6,23,.18);
  font-size:22px; text-decoration:none;
}
.wa-float a:hover{filter:brightness(1.03)}


/* ===== v13: Header phone + WhatsApp, uppercase menu, CTA button palette ===== */
.nav a{ text-transform: uppercase; letter-spacing:.04em; }
.header-inner{ gap:18px; }
.header-cta{ margin-left:auto; display:flex; align-items:center; gap:12px; }
.header-cta .call-link{
  display:flex; align-items:center; gap:10px;
  padding:10px 12px; border-radius:999px;
  background: rgba(56,189,248,.12);
  border: 1px solid rgba(56,189,248,.28);
  color: var(--ink); text-decoration:none; font-weight:800;
}
.header-cta .call-link strong{ font-weight:900; }
.header-cta .wa-ico{
  width:44px; height:44px; border-radius:999px;
  display:inline-flex; align-items:center; justify-content:center;
  background: linear-gradient(135deg, rgba(56,189,248,.95), rgba(14,165,233,.95));
  color:#fff; text-decoration:none; font-size:18px;
  box-shadow:0 14px 30px rgba(2,6,23,.14);
}
.header-cta .wa-ico:hover{ filter:brightness(1.03); }
@media (max-width: 860px){
  .header-cta{ flex-wrap:wrap; justify-content:flex-end; }
  .header-cta .call-link{ padding:8px 10px; font-size:14px; }
}

/* CTA buttons: light blue premium gradient */
.btn-primary{
  background: linear-gradient(135deg, #38bdf8, #0ea5e9);
  border:0 !important;
}
.btn-primary:hover{ filter:brightness(1.03); }

/* Floating WhatsApp button (icon) */
.wa-float a{ background: linear-gradient(135deg, #38bdf8, #0ea5e9); }


/* v18 mobile nav fix: keep header compact and avoid multi-line menu overlay */
@media (max-width: 600px){
  .nav{ flex-wrap:nowrap; align-items:center; }
  .brand .small{ display:none; }
  .menu{
    width:100%;
    flex-wrap:nowrap;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    gap:10px;
    padding-bottom:6px;
  }
  .menu::-webkit-scrollbar{ display:none; }
  .menu a{
    white-space:nowrap;
    font-size:13px;
    padding:8px 10px;
    border-radius:999px;
    flex:0 0 auto;
  }
  .menu a.btn, .menu a.pill{ padding:8px 10px; font-size:13px; }
  .menu a.btn{ box-shadow:none; }
}


/* Home service card images */
.cardMedia{width:100%;height:180px;object-fit:cover;border-radius:18px;display:block;margin-bottom:12px}

/* ===== FOOTER CARD OKUNURLUK FIX ===== */

.footer .card{
  background:#ffffff;
  color:#334155;
}

.footer .card h3,
.footer .card strong{
  color:#0f172a;
}

.footer .card a{
  color:#2563eb;
}

.footer .card a:hover{
  color:#1d4ed8;
}


/* Premium hero layout */
.heroLeft{display:flex; flex-direction:column; gap:14px; min-height:100%}
.heroLeft .card:last-child{margin-top:auto}
.heroMedia img{width:100%; height:100%; object-fit:cover; border-radius:22px}

.heroMedia{height:100%}


/* --- Footer (Readable) --- */
.site-footer{
  background:#0f172a;
  color:#e5e7eb;
  margin-top:48px;
}
.site-footer a{ color:#e5e7eb; text-decoration:none; }
.site-footer a:hover{ text-decoration:underline; }
.footer-container{
  max-width:1180px;
  margin:0 auto;
  padding:40px 16px 18px;
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:22px;
}
.footer-col h3,.footer-col h4{
  margin:0 0 12px;
  font-weight:700;
  letter-spacing:.2px;
}
.footer-col p{ margin:0; line-height:1.7; opacity:.95; }
.footer-col ul{ list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.footer-contact li{ line-height:1.7; opacity:.95; }
.footer-cta{ display:flex; gap:10px; margin-top:14px; flex-wrap:wrap; }
.footer-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px 14px;
  border-radius:12px;
  background:#22c55e;
  color:#07150b !important;
  font-weight:700;
}
.footer-btn:hover{ text-decoration:none; filter:brightness(0.95); }
.footer-btn-outline{
  background:transparent;
  border:1px solid rgba(229,231,235,.35);
  color:#e5e7eb !important;
}
.footer-bottom{
  max-width:1180px;
  margin:0 auto;
  padding:16px 16px 28px;
  border-top:1px solid rgba(229,231,235,.12);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
  font-size:14px;
  opacity:.95;
}
.footer-bottom-links{ display:flex; gap:14px; flex-wrap:wrap; }

/* Responsive */
@media (max-width: 980px){
  .footer-container{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px){
  .footer-container{ grid-template-columns:1fr; }
}

/* --- Floating WhatsApp --- */
.wa-float{
  position:fixed;
  right:18px;
  bottom:18px;
  width:56px;
  height:56px;
  border-radius:999px;
  background:#25d366;
  box-shadow:0 10px 26px rgba(0,0,0,.28);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:9999;
  transition:transform .15s ease, filter .15s ease;
}
.wa-float:hover{ transform:translateY(-2px); filter:brightness(.97); }
.wa-ico{ width:28px; height:28px; fill:#0b1b11; }


/* --- Local SEO price block --- */
.price-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:14px 0}
.price-card{border:1px solid rgba(255,255,255,.12);background:rgba(0,0,0,.03);padding:14px;border-radius:14px;display:flex;justify-content:space-between;align-items:center}
.price-card span{font-weight:700}
.cta-row{display:flex;gap:12px;flex-wrap:wrap;margin:10px 0 0}
.muted{opacity:.85}
@media (max-width:720px){.price-grid{grid-template-columns:1fr}}



/* === BEFORE/AFTER (scroll reveal) === */
.ba-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
  margin-top:24px;
}
@media (max-width: 980px){
  .ba-grid{ grid-template-columns:1fr; }
}
.ba{
  margin:0;
}
.ba-wrap{
  position:relative;
  border-radius:18px;
  overflow:hidden;
  background:#eee;
  box-shadow: 0 10px 30px rgba(0,0,0,.08);
}
.ba-wrap img{
  display:block;
  width:100%;
  height:auto;
}
.ba-after{ position:relative; z-index:1; }
.ba-before{
  position:absolute;
  inset:0;
  z-index:2;
  will-change: clip-path, transform;
  clip-path: inset(0 calc((var(--reveal, 0) * 100%)) 0 0);
}
.ba-divider{
  position:absolute;
  top:0;
  bottom:0;
  left:calc((1 - var(--reveal, 0)) * 100%);
  width:2px;
  background:rgba(0,0,0,.25);
  z-index:3;
  transform: translateX(-1px);
}
.ba-cap{
  font-size:14px;
  opacity:.85;
  margin-top:10px;
  text-align:left;
}
.ba-note{
  margin-top:18px;
  font-size:14px;
  opacity:.9;
  text-align:left;
  background:rgba(0,0,0,.03);
  padding:14px 16px;
  border-radius:14px;
}


.ba-item{
  display:flex;
  flex-direction:column;
  gap:14px;
}
.ba-info{
  text-align:left;
  padding: 0 2px;
}
.ba-info p{
  margin:0 0 12px;
  color: var(--muted);
  line-height:1.7;
  font-size:15px;
}
.ba-cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:12px 18px;
  border-radius:14px;
  background:#111;
  color:#fff;
  text-decoration:none;
  font-weight:900;
  letter-spacing:.2px;
  border:1px solid rgba(0,0,0,.15);
  box-shadow: 0 10px 26px rgba(0,0,0,.12);
  width: fit-content;
}
.ba-cta:hover{ background:#2a2a2a; }
.ba-sub{ margin-bottom: 18px; }



/* === Komple Daire Tadilatı: Galeri + Yorumlar (SEO/Premium) === */
.section-sub{
  max-width: 860px;
  margin: 0 auto 24px;
  color:#666;
  line-height:1.7;
}

.gallery{
  position: relative;
  max-width: 1100px;
  margin: 0 auto 26px;
  overflow: hidden;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 12px 30px rgba(0,0,0,0.08);
}

.gallery-track{
  display:flex;
  transition: transform .35s ease;
  will-change: transform;
}

.gallery-item{
  min-width:100%;
  margin:0;
}

.gallery-item img{
  display:block;
  width:100%;
  height:auto;
}

.gallery-item figcaption{
  padding: 14px 18px;
  font-size: 15px;
  color:#444;
  border-top: 1px solid #eee;
  background:#fff;
}

.gallery-btn{
  position:absolute;
  top:50%;
  transform: translateY(-50%);
  width:44px;
  height:44px;
  border:none;
  border-radius: 999px;
  background: rgba(17,17,17,0.72);
  color:#fff;
  font-size: 26px;
  cursor:pointer;
  z-index: 2;
}

.gallery-btn.prev{ left: 12px; }
.gallery-btn.next{ right: 12px; }

.gallery-btn:hover{ background: rgba(17,17,17,0.88); }

.gallery-cta{
  text-align:center;
  margin: 10px 0 40px;
}

.reviews{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  max-width: 1100px;
  margin: 0 auto 22px;
}

.review{
  background:#fff;
  border:1px solid #eee;
  border-radius: 14px;
  padding: 18px;
  box-shadow: 0 10px 24px rgba(0,0,0,0.06);
}

.review-text{
  margin:0 0 14px;
  color:#444;
  line-height:1.7;
}

.review-meta{
  display:flex;
  justify-content: space-between;
  font-size: 14px;
  color:#777;
}

.review-name{ font-weight:600; color:#333; }

.reviews-cta{
  text-align:center;
  margin: 8px 0 50px;
}

@media (max-width: 900px){
  .reviews{ grid-template-columns: 1fr; }
}