:root{
      --brand:#0F212C; --brand-2:#113447; --accent:#12B886; --accent-2:#2e74ff;
      --bg:#f5f7f9; --card:#fff; --text:#0f212c; --muted:#6b7b87; --line:#e6eef3;
      --radius:16px; --shadow:0 12px 34px rgba(0,0,0,.08);
      --ring: 0 0 0 3px rgba(46,116,255,.25);
      --section-pad: 68px;
    }
    *{box-sizing:border-box}
    html,body{margin:0}
    html{scroll-behavior:smooth}
    body{
      font-family:Inter,ui-sans-serif,system-ui,Segoe UI,Roboto,Arial,sans-serif;
      color:var(--text);
      background:var(--bg);
      line-height:1.55;
      /* Mobilde alt sabit bar için ekstra alan */
      padding-bottom: env(safe-area-inset-bottom, 0px);
    }
    img{max-width:100%;height:auto;display:block}
    a{color:inherit;text-decoration:none}
    .container{max-width:1140px;margin:0 auto;padding:0 20px}
    .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}

    /* Sections */
    main{display:block}
    section{padding:var(--section-pad) 0; scroll-margin-top:80px}
    .section-title{font-size:clamp(22px, 3.6vw, 28px);margin:0 0 18px}
    .section-sub{color:var(--muted);margin:0 0 28px}
    .grid{display:grid;gap:18px}
    .grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
    @media (max-width:900px){.grid-3{grid-template-columns:1fr}}
    .card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:22px;transition:box-shadow .2s, transform .2s}
    .card:hover{box-shadow:0 16px 40px rgba(0,0,0,.12); transform:translateY(-2px)}

    /* Buttons */
    .btn{display:inline-flex;align-items:center;gap:10px;border-radius:999px;padding:12px 16px;font-weight:700;border:1px solid transparent;cursor:pointer;line-height:1;min-height:44px}
    .btn:focus-visible{outline:none;box-shadow:var(--ring)}
    .btn-primary{background:var(--accent);color:#08301d;border-color:#0da96f}
    .btn-primary:hover{filter:brightness(.98)}
    .btn-ghost{background:transparent;color:#fff;border-color:#2a556a}
    .btn-ghost:hover{background:rgba(255,255,255,.08)}
    .btn-dark{background:#0F212C;color:#fff;border-color:#163a4a}
    .btn-dark:hover{filter:brightness(1.05)}

    /* Hero */
    .hero{position:relative;color:#fff;overflow:hidden;background:var(--brand)}
    .hero .media{position:absolute;inset:0}
    .hero .media picture, .hero .media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:contrast(1.05) saturate(1.05)}
    .hero:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg, rgba(15,33,44,.62), rgba(15,33,44,.96))}
    .hero .inner{position:relative;z-index:2;padding: clamp(40px, 7vw, 50px) 0}
    .eyebrow{display:inline-flex;gap:8px;align-items:center;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22);padding:8px 12px;border-radius:999px;font-size:13px;backdrop-filter:saturate(140%) blur(2px)}
    h1{margin:16px 0 10px;font-size:clamp(26px, 6.2vw, 44px);line-height:1.15;text-wrap:balance}
    .lead{max-width:740px;opacity:.92;font-size:clamp(15px, 2.6vw, 18px)}
    .cta{margin-top:20px;display:flex;gap:12px;flex-wrap:wrap}
    .badges{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
    .badge{background:#0d2c3a;color:#cfe7f2;padding:8px 12px;border-radius:999px;border:1px solid #17455b;font-size:13px}

    /* Service cards */
    .srv{display:flex;gap:14px}
    .srv svg{width:28px;height:28px;flex:0 0 28px;color:var(--accent)}
    .srv h3{margin:2px 0 6px;font-size:18px}
    .srv p{margin:0;color:var(--muted);font-size:14px}

    /* Gallery preview */
    .gallery{display:grid;grid-template-columns:repeat(12,1fr);gap:10px}
    .g{position:relative;border-radius:14px;overflow:hidden;aspect-ratio:4/3;background:#cfd8dc}
    .g img{width:100%;height:100%;object-fit:cover;display:block}
    .g.big{grid-column:span 6}.g.small{grid-column:span 3}
    @media (max-width:900px){
      .gallery{grid-template-columns:repeat(6,1fr)}
      .g.big{grid-column:span 6}.g.small{grid-column:span 3}
    }
    @media (max-width:540px){
      .gallery{grid-template-columns:repeat(2,1fr)}
      .g.big,.g.small{grid-column:span 2}
      .g{aspect-ratio:3/2}
    }

    /* Steps */
    .steps{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
    @media (max-width:900px){.steps{grid-template-columns:1fr 1fr}}
    @media (max-width:600px){.steps{grid-template-columns:1fr}}
    .step{background:var(--card);border:1px solid var(--line);padding:18px;border-radius:14px}
    .num{width:34px;height:34px;border-radius:50%;background:#e9fbf3;color:#0a3b28;display:flex;align-items:center;justify-content:center;font-weight:800;margin-bottom:8px}
    .step h4{margin:6px 0}.step p{margin:0;color:var(--muted);font-size:14px}

    /* Why us */
    .why{display:grid;grid-template-columns:1.3fr .7fr;gap:18px}
    @media (max-width:900px){.why{grid-template-columns:1fr}}
    .iconlist{display:grid;gap:10px}
    .iconlist li{list-style:none;display:flex;gap:10px;align-items:flex-start}
    .iconlist .dot{width:8px;height:8px;border-radius:999px;background:var(--accent);margin-top:8px}

    /* Before/After slider */
    .ba{position:relative;border-radius:16px;overflow:hidden;border:1px solid var(--line)}
    .ba .wrap{position:relative;aspect-ratio:16/9;overflow:hidden;touch-action:none}
    .ba img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
    .ba .after{clip-path:inset(0 0 0 var(--cut,50%))}
    .ba .slider{position:absolute;left:0;right:0;bottom:12px;margin:0 auto;width:min(460px,90%);accent-color:var(--accent)}
    .ba .bar{position:absolute;inset:0;width:2px;background:#fff;left:var(--cut,50%);transform:translateX(-1px);mix-blend-mode:difference}

    /* Price */
    .prices{display:grid;gap:18px;grid-template-columns:repeat(3,1fr)}
    @media (max-width:900px){.prices{grid-template-columns:1fr}}
    .price{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:22px}
    .price h3{margin:0 0 6px}
    .price .v{font-size:13px;color:var(--muted);margin-bottom:8px}

    /* CTA strip */
    .cta-strip{background:linear-gradient(135deg,var(--brand),var(--brand-2));color:#fff;border-top:1px solid #153042;border-bottom:1px solid #153042}
    .cta-row{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
    @media (max-width:720px){
      .cta-row{flex-direction:column;align-items:flex-start}
    }

    /* Brands strip */
    .brands{display:flex;gap:12px;flex-wrap:wrap;align-items:center;opacity:.9}
    .brands .b{background:#fff;border:1px solid var(--line);border-radius:999px;padding:8px 14px;font-size:14px}

    /* Floating mobile bar */
    .kayanbar{
      position:fixed;bottom:calc(14px + env(safe-area-inset-bottom, 0px));left:50%;
      transform:translateX(-50%);display:flex;gap:10px;z-index:70
    }
    .kayanbar a{padding:10px 14px;border-radius:999px;background:#0F212C;color:#fff;border:1px solid #163a4a}
    .kayanbar a:focus-visible{outline:none;box-shadow:var(--ring)}
    @media (min-width:901px){.kayanbar{display:none}}

    /* Mini form */
    .mini-form{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:18px}
    .mini-form form{display:grid;gap:10px}
    .mini-form input,.mini-form select,.mini-form textarea{width:100%;padding:12px;border-radius:10px;border:1px solid var(--line);font:inherit;background:#fff;min-height:44px}
    .mini-form input:focus-visible,.mini-form select:focus-visible,.mini-form textarea:focus-visible{outline:none;box-shadow:var(--ring);border-color:#cfe1ff}
    .mini-form button{padding:12px 16px;border-radius:999px;border:0;background:var(--accent);color:#08301d;font-weight:700;cursor:pointer;min-height:44px}
    .mini-form button:hover{filter:brightness(.98)}
    .mini-form .msg{font-size:13px;color:var(--muted)}
    .two{display:grid;grid-template-columns:1fr 1fr;gap:10px}
    @media (max-width:720px){.two{grid-template-columns:1fr}}

    /* FAQ */
    .faq{display:grid;gap:10px}
    .faq-item{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:12px 14px}
    .faq-q{width:100%;text-align:left;background:none;border:0;font:inherit;font-weight:700;padding:6px 0;display:flex;align-items:center;justify-content:space-between;cursor:pointer;min-height:44px}
    .faq-q:focus-visible{outline:none;box-shadow:var(--ring);border-radius:8px}
    .faq-q::after{content:"▸";opacity:.6;transition:transform .2s}
    .faq-item.open .faq-q::after{transform:rotate(90deg)}
    .faq-a{max-height:0;overflow:hidden;opacity:.0;transition:max-height .25s ease, opacity .25s ease;will-change:max-height,opacity}
    .faq-item.open .faq-a{max-height:200px;opacity:1;padding-top:6px;color:var(--muted)}

    /* Motion reduce + küçük ekranda bölüm boşlukları */
    @media (prefers-reduced-motion:reduce){
      *{transition:none !important; animation:none !important}
    }
    @media (max-width:720px){
      :root{ --section-pad: 48px; }
    }

    .sss-btn-wrap { margin-top: 20px; text-align: center; }
    .btn-sss {
      display: inline-block; padding: 10px 22px; border-radius: 999px;
      background: var(--accent, #12B886); color: #08301d; font-weight: 600;
      text-decoration: none; border: 1px solid transparent;
      transition: background .2s, transform .2s, box-shadow .2s;
    }
    .btn-sss:hover { background: #0da96f; transform: translateY(-1px); box-shadow: 0 4px 10px rgba(0,0,0,.12); }
    .btn-sss:active { transform: translateY(0); box-shadow: none; }
    .btn-sss:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(18,184,134,.35); }




    .btn-wrap {
  margin-top: 18px;
  display: flex;
  justify-content: center; /* ortaya alır */
}

.kvkk input[type="checkbox"] {
  width: 18px;   /* kutucuk genişliği */
  height: 18px;  /* kutucuk yüksekliği */
  accent-color: var(--accent); /* marka rengi (#12B886) */
  cursor: pointer;
}
.kvkk span {
  font-size: 13px;
  color: var(--text);
}


/* Inline stillerin yerine geçen yardımcı sınıflar */
.mt-14 { margin-top:14px; }
.mb-8  { margin-bottom:8px; }
.mt-8  { margin-top:8px; }

.kvkk-inline{
  display:flex;
  align-items:flex-start;
  gap:8px;
  margin:10px 0;
  font-size:13px;
  line-height:1.4;
}
.mt-3{ margin-top:3px; }

.btn-row{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.py-24{ padding-top:24px; padding-bottom:24px; }

/* Öncesi/Sonrası: varsayılan kesit değeri */
.ba .wrap { --cut:50%; }

/* reCAPTCHA alanı boşluk ve responsive dokunuş */
.mini-form .recaptcha-wrap { margin: 8px 0 10px; }
@media (max-width: 360px){
  /* Çok dar ekranlarda kutuyu hafif küçült */
  .mini-form .g-recaptcha { transform: scale(0.9); transform-origin: left top; }
}