@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;500;600;700&display=swap');

  :root{
    --navy: #0B2A3D;
    --navy-deep: #071C29;
    --teal: #12A9A0;
    --teal-bright: #4FE0D4;
    --ice: #F4FAF9;
    --ice-2: #E9F4F3;
    --slate: #5C7A82;
    --text: #16323F;
  }

  *{ box-sizing:border-box; margin:0; padding:0; }
  html{ scroll-behavior: smooth; }
  body{
    font-family:'Inter', sans-serif;
    color: var(--text);
    background: var(--ice);
    line-height: 1.5;
  }

  a{ text-decoration:none; color:inherit; }
  ul{ list-style:none; }
  img{ max-width:100%; display:block; }

  h1,h2,h3{ font-family:'Space Grotesk', sans-serif; }

  .container{
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 24px;
  }

  .btn{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding: 13px 26px;
    border-radius: 40px;
    font-weight: 600;
    font-size: 15px;
    transition: all .2s ease;
    cursor:pointer;
    border: none;
  }
  .btn-primary{
    background: var(--teal);
    color: #fff;
  }
  .btn-primary:hover{ background: #0d8c85; transform: translateY(-1px); }
  .btn-ghost{
    background: transparent;
    color: var(--ice);
    border: 1.5px solid rgba(255,255,255,0.35);
  }
  .btn-ghost:hover{ background: rgba(255,255,255,0.08); }

  /* ===== HEADER ===== */
  header{
    position: sticky;
    top:0;
    z-index: 50;
    background: rgba(11,42,61,0.96);
    backdrop-filter: blur(6px);
  }
  .nav{
    display:flex;
    align-items:center;
    justify-content: space-between;
    padding: 16px 0;
  }
  .logo{
    display:flex;
    align-items:center;
    gap:10px;
    color: var(--ice);
    font-family:'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: 17px;
  }
  .logo svg{ width:30px; height:30px; }
  .nav-links{
    display:flex;
    gap: 32px;
  }
  .nav-links a{
    color: rgba(244,250,249,0.8);
    font-size: 14.5px;
    font-weight: 500;
    transition: color .2s;
  }
  .nav-links a:hover{ color: var(--teal-bright); }
  .nav-phone{
    display:flex;
    align-items:center;
    gap:10px;
  }
  .nav-phone .num{
    color: var(--ice);
    font-weight: 700;
    font-size: 15px;
    display:none;
  }
  @media(min-width:640px){ .nav-phone .num{ display:block; } }
  .nav-links{ display:none; }
  @media(min-width:860px){ .nav-links{ display:flex; } }

  /* ===== HERO (full-bleed, image bg + readable panel) ===== */
  .hero{
    position:relative;
    background: #fff;
    color: var(--text);
    overflow:hidden;
  }
  .hero-bg-slides{ position:absolute; inset:0; z-index:0; }
  .hero-bg-slides img{
    position:absolute; inset:0; width:100%; height:100%;
    object-fit:cover; opacity:0; transition: opacity 1.4s ease;
  }
  .hero-bg-slides img.active{ opacity:1; }
  .hero-overlay{
    position:absolute;
    inset:0;
    z-index:1;
    background: linear-gradient(100deg, rgba(7,28,41,0.62) 0%, rgba(7,28,41,0.22) 55%, rgba(7,28,41,0.15) 100%);
  }
  .hero-inner{
    position:relative;
    z-index:2;
    max-width: 600px;
    padding: 90px 24px 110px;
  }
  @media(min-width:1140px){ .hero-inner{ padding-left: calc((100vw - 1140px)/2 + 24px); } }
  .hero-rings{
    position:absolute;
    right: -120px;
    top: -80px;
    width: 480px;
    height: 480px;
    opacity: 0.45;
    z-index:1;
  }
  .hero-rings-2{
    position:absolute;
    left: -140px;
    bottom: -160px;
    width: 360px;
    height: 360px;
    opacity: 0.3;
    z-index:1;
  }
  .eyebrow{
    display:inline-flex;
    align-items:center;
    gap:8px;
    color: var(--teal-bright);
    font-size: 13px;
    font-weight:700;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    margin-bottom: 18px;
  }
  .eyebrow .dot{
    width:7px; height:7px; border-radius:50%; background: var(--teal-bright);
  }
  .hero h1{
    font-size: clamp(32px, 4.6vw, 46px);
    line-height: 1.15;
    font-weight: 700;
    margin-bottom: 20px;
    color: #fff;
    text-shadow: 0 2px 16px rgba(0,0,0,0.35);
  }
  .hero h1 span{ color: var(--teal-bright); }
  .hero p{
    font-size: 16.5px;
    color: rgba(255,255,255,0.85);
    margin-bottom: 34px;
    max-width: 480px;
  }
  .hero-cta{ display:flex; flex-wrap:wrap; gap:14px; margin-bottom: 46px; }
  .hero-stats{
    display:flex;
    gap: 40px;
    flex-wrap: wrap;
  }
  .hero-stats .stat b{
    font-family:'Space Grotesk', sans-serif;
    font-size: 26px;
    color: var(--teal-bright);
    display:block;
  }
  .hero-stats .stat span{
    font-size: 13px;
    color: rgba(255,255,255,0.7);
  }

  /* ===== SECTION HEADS ===== */
  .section{ padding: 90px 0; }
  .section-head{
    max-width: 560px;
    margin-bottom: 54px;
  }
  .section-head .kicker{
    color: var(--teal);
    font-weight:700;
    font-size: 13px;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    margin-bottom: 12px;
    display:block;
  }
  .section-head h2{
    font-size: clamp(26px, 3.4vw, 34px);
    color: var(--navy);
    font-weight: 700;
    line-height:1.25;
  }
  .section-head p{
    color: var(--slate);
    margin-top: 14px;
    font-size: 15.5px;
  }

  /* ===== SERVICES ===== */
  .services-grid{
    display:grid;
    grid-template-columns: repeat(auto-fit, minmax(240px,1fr));
    gap: 22px;
  }
  .service-card{
    background: #fff;
    border: 1px solid #E1EDEC;
    border-radius: 16px;
    padding: 30px 26px;
    transition: transform .2s ease, box-shadow .2s ease;
  }
  .service-card:hover{
    transform: translateY(-4px);
    box-shadow: 0 14px 30px rgba(11,42,61,0.08);
  }
  .service-icon{
    width: 50px; height:50px;
    border-radius: 12px;
    background: var(--ice-2);
    display:flex; align-items:center; justify-content:center;
    margin-bottom: 20px;
  }
  .service-icon svg{ width:24px; height:24px; stroke: var(--teal); }
  .service-card h3{
    font-size: 17px;
    color: var(--navy);
    margin-bottom: 10px;
    font-weight:600;
  }
  .service-card p{
    font-size: 14px;
    color: var(--slate);
    line-height:1.6;
  }

  /* ===== WHY US ===== */
  .why{
    background: var(--navy);
    color: var(--ice);
  }
  .why .section-head h2{ color: var(--ice); }
  .why .section-head p{ color: rgba(244,250,249,0.65); }
  .why .section-head .kicker{ color: var(--teal-bright); }
  .why-grid{
    display:grid;
    grid-template-columns: repeat(auto-fit, minmax(220px,1fr));
    gap: 28px;
  }
  .why-item{
    display:flex;
    gap: 16px;
    align-items:flex-start;
  }
  .why-item .num{
    font-family:'Space Grotesk', sans-serif;
    font-size: 22px;
    font-weight:700;
    color: var(--teal-bright);
    opacity: 0.85;
    flex-shrink:0;
  }
  .why-item .why-icon{
    width: 46px; height:46px;
    border-radius: 12px;
    background: rgba(79,224,212,0.12);
    display:flex; align-items:center; justify-content:center;
    flex-shrink:0;
  }
  .why-item .why-icon svg{ width:22px; height:22px; stroke: var(--teal-bright); }
  .why-item h4{
    font-size: 15.5px;
    margin-bottom: 6px;
    font-weight:600;
  }
  .why-item p{
    font-size: 13.8px;
    color: rgba(244,250,249,0.62);
    line-height: 1.6;
  }

  /* ===== ABOUT ===== */
  .about{
    display:grid;
    grid-template-columns: 1fr;
    gap: 50px;
    align-items:center;
  }
  @media(min-width:880px){ .about{ grid-template-columns: 1fr 1fr; } }
  .about-visual{
    position:relative;
    background: linear-gradient(160deg, var(--ice-2), #fff);
    border-radius: 20px;
    aspect-ratio: 4/3;
    display:flex;
    align-items:center;
    justify-content:center;
    border: 1px solid #E1EDEC;
    overflow:hidden;
  }
  .about-visual img{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
  }
  .about-visual .about-visual-badge{
    position:absolute;
    left:18px;
    bottom:18px;
    z-index:2;
    background:rgba(255,255,255,0.95);
    border-radius:14px;
    padding:12px 18px;
    display:flex;
    align-items:center;
    gap:10px;
    box-shadow:0 8px 24px rgba(11,42,61,0.18);
  }
  .about-visual .about-visual-badge svg{ width:20px; height:20px; stroke:var(--teal); flex-shrink:0; }
  .about-visual .about-visual-badge span{ font-size:13px; font-weight:700; color:var(--navy); }
  .about-text p{
    color: var(--slate);
    font-size: 15.5px;
    margin-bottom: 16px;
  }
  .about-badges{
    display:flex;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 26px;
  }
  .badge{
    display:flex;
    align-items:center;
    gap:8px;
    background: var(--ice-2);
    padding: 9px 16px;
    border-radius: 30px;
    font-size: 13px;
    font-weight:600;
    color: var(--navy);
  }
  .badge svg{ width:16px; height:16px; stroke: var(--teal); }

  /* ===== CONTACT ===== */
  .contact-wrap{
    background: var(--ice-2);
    border-radius: 24px;
    padding: 54px;
    display:grid;
    grid-template-columns: 1fr;
    gap: 40px;
  }
  @media(min-width:880px){ .contact-wrap{ grid-template-columns: 1fr 1.1fr; padding: 60px; } }

  .contact-center{
    max-width: 620px;
    margin: 0 auto;
  }
  .contact-meta{
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    gap: 32px;
    margin-bottom: 30px;
  }
  .contact-meta .contact-row{ margin-bottom:0; text-align:left; }
  .form-rect{
    background:#fff;
    border: 1.5px solid #E1EDEC;
    border-radius: 14px;
    box-shadow: 0 10px 30px rgba(11,42,61,0.06);
  }
  .contact-info h2{
    font-size: 27px;
    color: var(--navy);
    margin-bottom: 14px;
  }
  .contact-info p{ color: var(--slate); font-size: 15px; margin-bottom: 28px; }
  .contact-row{
    display:flex;
    align-items:center;
    gap: 14px;
    margin-bottom: 18px;
  }
  .contact-row .ico{
    width: 42px; height:42px;
    background: #fff;
    border-radius: 12px;
    display:flex; align-items:center; justify-content:center;
    flex-shrink:0;
  }
  .contact-row .ico svg{ width:19px; height:19px; stroke: var(--teal); }
  .contact-row .label{ font-size: 12px; color: var(--slate); }
  .contact-row .value{ font-size: 15px; font-weight:600; color: var(--navy); }

  .form{
    background:#fff;
    border-radius: 18px;
    padding: 32px;
    display:flex;
    flex-direction:column;
    gap: 16px;
  }
  .form input, .form textarea{
    width:100%;
    border: 1.5px solid #E1EDEC;
    border-radius: 10px;
    padding: 13px 14px;
    font-family:'Inter',sans-serif;
    font-size: 14.5px;
    color: var(--text);
    outline:none;
    transition: border-color .2s;
  }
  .form input:focus, .form textarea:focus{ border-color: var(--teal); }
  .form textarea{ resize: vertical; min-height: 90px; }
  .form label{ font-size: 12.5px; font-weight:600; color: var(--navy); margin-bottom: -8px; }
  .form-row{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }
  .form-row label{ display:block; margin-bottom: 6px; }
  .kvkk-row{
    display:flex !important;
    align-items:flex-start;
    gap: 10px;
    font-size: 12.5px;
    font-weight: 400 !important;
    color: var(--slate);
    line-height: 1.5;
    margin-top: 2px;
  }
  .kvkk-row input{ margin-top: 2px; flex-shrink:0; }

  /* ===== TESTIMONIALS ===== */
  .testi{ background: var(--ice-2); }
  .testi-grid{
    display:grid;
    grid-template-columns: repeat(auto-fit, minmax(260px,1fr));
    gap: 22px;
  }
  .testi-card{
    background:#fff;
    border-radius: 16px;
    padding: 28px 26px;
    border: 1px solid #E1EDEC;
  }
  .testi-card .stars{
    color: var(--teal);
    font-size: 15px;
    letter-spacing: 2px;
    margin-bottom: 14px;
  }
  .testi-card p{
    font-size: 14.5px;
    color: var(--text);
    line-height: 1.6;
    margin-bottom: 18px;
  }
  .testi-name{
    font-weight: 700;
    font-size: 13.5px;
    color: var(--navy);
    font-family:'Space Grotesk', sans-serif;
  }

  /* ===== FOOTER (organized) ===== */
  .footer-cols{
    display:grid;
    grid-template-columns: 1.3fr 1fr 1fr;
    gap: 40px;
    padding-bottom: 34px;
    border-bottom: 1px solid rgba(244,250,249,0.1);
    margin-bottom: 22px;
  }
  @media(max-width: 760px){ .footer-cols{ grid-template-columns: 1fr; gap: 30px; } }
  .footer-col h4{
    color: var(--ice);
    font-family:'Space Grotesk', sans-serif;
    font-size: 15px;
    margin-bottom: 18px;
  }
  .footer-col ul{ display:flex; flex-direction:column; gap: 12px; }
  .footer-col a{
    display:flex;
    align-items:center;
    gap: 8px;
    font-size: 13.5px;
    color: rgba(244,250,249,0.65);
    transition: color .2s;
  }
  .footer-col a:hover{ color: var(--teal-bright); }
  .footer-col a svg{ width:13px; height:13px; stroke: var(--teal-bright); flex-shrink:0; }
  .footer-col .about-line{
    font-size: 13.5px;
    color: rgba(244,250,249,0.55);
    line-height: 1.7;
    margin-top: 14px;
  }

  /* ===== FLOATING CALL BUTTON ===== */
  .floating-call{
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 60;
    display:flex;
    align-items:center;
    gap: 12px;
    background:#fff;
    border-radius: 16px;
    padding: 12px 20px 12px 14px;
    box-shadow: 0 10px 30px rgba(11,42,61,0.25);
  }
  .floating-call .icon-wrap{
    width: 40px; height:40px;
    background: var(--teal);
    border-radius: 10px;
    display:flex; align-items:center; justify-content:center;
    flex-shrink:0;
  }
  .floating-call .icon-wrap svg{ width:20px; height:20px; stroke:#fff; }
  .floating-call .label{ font-size:11px; color: var(--slate); font-weight:600; text-transform:uppercase; letter-spacing:0.5px; }
  .floating-call .number{ font-size:14.5px; color: var(--navy); font-weight:700; }
  @media(max-width: 600px){ .floating-call .label{ display:none; } }
  footer{
    background: var(--navy-deep);
    color: rgba(244,250,249,0.6);
    padding: 46px 0 26px;
    font-size: 13.5px;
  }
  .footer-top{
    display:flex;
    flex-wrap:wrap;
    justify-content: space-between;
    gap: 30px;
    padding-bottom: 30px;
    border-bottom: 1px solid rgba(244,250,249,0.1);
    margin-bottom: 22px;
  }
  .footer-logo{
    display:flex; align-items:center; gap:10px;
    color: var(--ice); font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:16px;
  }
  .footer-logo svg{ width:24px; height:24px; }
  .footer-links{ display:flex; gap: 26px; flex-wrap:wrap; }
  .footer-links a:hover{ color: var(--teal-bright); }
  .footer-bottom{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; }

  .kvkk-box{
    background: var(--ice-2);
    border-radius: 16px;
    padding: 30px 34px;
  }
  .kvkk-box h3{
    font-size: 16px;
    color: var(--navy);
    margin-bottom: 10px;
  }
  .kvkk-box p{
    font-size: 13px;
    color: var(--slate);
    line-height: 1.7;
  }

  .payment-strip{
    display:flex;
    align-items:center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 14px;
    padding-bottom: 26px;
    margin-bottom: 26px;
    border-bottom: 1px solid rgba(244,250,249,0.1);
  }
  .payment-label{
    font-size: 12px;
    font-weight:600;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: rgba(244,250,249,0.5);
  }
  .payment-icons{
    display:flex;
    gap: 10px;
    flex-wrap: wrap;
  }
  .payment-icons svg{ border-radius:5px; }

  @media(max-width: 600px){
    .contact-wrap{ padding: 34px 22px; }
    .section{ padding: 64px 0; }
    .hero{ padding: 70px 0 80px; }
  }

/* ===== INNER PAGE BANNER ===== */
.page-banner{
  position:relative;
  background: linear-gradient(165deg, var(--navy) 0%, var(--navy-deep) 100%);
  color: var(--ice);
  overflow:hidden;
  padding: 90px 0 100px;
}
.page-banner .hero-rings{ opacity:0.4; }
.page-banner h1{
  font-size: clamp(28px, 4vw, 38px);
  font-weight:700;
  position:relative;
  z-index:2;
  text-shadow: 0 2px 16px rgba(0,0,0,0.35);
}
.page-banner .crumb{
  position:relative;
  z-index:2;
  display:flex;
  align-items:center;
  gap:8px;
  font-size: 13.5px;
  color: rgba(244,250,249,0.6);
  margin-top: 10px;
}
.page-banner .crumb a{ color: var(--teal-bright); }

.nav-links a.active{ color: var(--teal-bright); }

/* ===== SERVICE DETAIL ===== */
.service-detail{
  display:grid;
  grid-template-columns: 1fr;
  gap: 26px;
}
@media(min-width:760px){ .service-detail{ grid-template-columns: 1fr 1fr; } }
.service-detail-card{
  background:#fff;
  border:1px solid #E1EDEC;
  border-radius: 18px;
  padding: 32px;
}
.service-detail-card .service-icon{ width:56px; height:56px; }
.service-detail-card .service-icon svg{ width:26px; height:26px; }
.service-detail-card h3{ font-size:19px; color:var(--navy); margin: 16px 0 10px; }
.service-detail-card p{ color:var(--slate); font-size:14.5px; line-height:1.7; margin-bottom:14px; }
.service-detail-card ul{ display:flex; flex-direction:column; gap:8px; }
.service-detail-card ul li{
  display:flex; align-items:center; gap:8px;
  font-size: 13.5px; color: var(--text);
}
.service-detail-card ul li svg{ width:15px; height:15px; stroke:var(--teal); flex-shrink:0; }

/* ===== HERO / BANNER BACKGROUND SLIDESHOW ===== */
.hero-bg-slides, .banner-bg-slides{
  position:absolute;
  inset:0;
  z-index:0;
  overflow:hidden;
}
.hero-bg-slides img, .banner-bg-slides img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:0;
  transition: opacity 1.4s ease;
}
.hero-bg-slides img.active, .banner-bg-slides img.active{ opacity:1; }
.banner-overlay{
  position:absolute;
  inset:0;
  z-index:1;
  background: linear-gradient(100deg, rgba(7,28,41,0.62) 0%, rgba(7,28,41,0.22) 55%, rgba(7,28,41,0.15) 100%);
}
.hero .hero-rings, .hero .hero-rings-2{ z-index:1; }
.page-banner .hero-rings{ z-index:1; }
.page-banner .container{ position:relative; z-index:2; }

/* ===== RICH CONTENT SECTION (Hakkımızda detay) ===== */
.rich-content{
  max-width: 820px;
  margin: 0 auto;
}
.rich-content p{
  color: var(--slate);
  font-size: 15.5px;
  line-height: 1.8;
  margin-bottom: 18px;
}
.rich-content h3{
  color: var(--navy);
  font-size: 21px;
  font-weight: 700;
  margin: 40px 0 14px;
}
.rich-content h3:first-of-type{ margin-top: 0; }
.rich-content .rich-img{
  width:100%;
  border-radius: 18px;
  overflow:hidden;
  margin: 30px 0;
  aspect-ratio: 16/7;
}
.rich-content .rich-img img{
  width:100%; height:100%; object-fit:cover; display:block;
}