/* =========================================================
   İSTENDA - Global Stylesheet (Desktop & Mobile Configurable)
   Versiyon: 2.0
   Not: Bu dosyayı Bootstrap ve diğer kütüphanelerden SONRA yükleyin.
   ========================================================= */

/* ============= Reset & Base ============= */
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{font-family:'Poppins',sans-serif;font-size:14px;color:#000;background:#fff}
a{color:#000;text-decoration:none}
a:hover{color:#000}
h1,h2,h3{font-weight:700}
h4,h5{font-weight:600}
h6{font-weight:500}
.white{color:#fff!important}
.black{color:#000}
img{max-width:100%;height:auto;display:block}

/* =========================================================
   KONUM & BOŞLUK DEĞİŞKENLERİ (DESKTOP - >=992px)
   ========================================================= */
:root{
  /* NAV (üst logo ve menü) */
  --d-nav-height: 72px;
  --d-nav-bg: #fff;
  --d-nav-shadow: 0 1px 8px 3px rgba(0,0,0,.05);
  --d-nav-logo-x: 0px;      /* +sağa / -sola */
  --d-nav-logo-y: -6px;     /* +aşağı / -yukarı */
  --d-nav-menu-x: 0px;
  --d-nav-menu-y: 6px;
  --d-nav-gap-x: 12px;      /* menü öğeleri arası boşluk */
  --d-logo-maxh: 70px;
  --d-nav-link-size: 13px;
  --d-nav-link-lh: var(--d-nav-height);

  /* BANNER (hero) */
  --d-banner-pt: 60px;      /* nav altında nefes */
  --d-banner-py: 100px;     /* üst-alt padding */
  --d-banner-text-x: 0px;   /* tüm metin bloğu X */
  --d-banner-text-y: -110px; /* tüm metin bloğu Y */
  --d-banner-maxw: 640px;
  --d-banner-pr: 40px;      /* sağ padding */
  --d-banner-bg: #000;

  /* Başlık ve metin aralıkları */
  --d-h2-mb: 72px;
  --d-h6a-mb: 8px;
  --d-btn1-mb: 50px;
  --d-h6b-mb: 8px;
  --d-btn2-mb: 72px;
  --d-desc-mt: 6px;

  /* Store butonları */
  --d-store-gap: 18px;      /* butonlar arası boşluk */
  --d-store-w: 170px;       /* store buton genişliği */

  /* Sağdaki telefon görseli (mockup) */
  --d-mockup-x: 0px;
  --d-mockup-y: -85px;
  --d-mockup-maxw: 400px;

  /* Sections */
  --d-section-py: 96px;
  --d-section-header-w: 69%;
}

/* =========================================================
   KONUM & BOŞLUK DEĞİŞKENLERİ (MOBILE - <992px)
   Masaüstünden bağımsız değerler; sadece burada değiştir.
   ========================================================= */
@media (max-width: 991.98px){
  :root{
    /* NAV */
    --m-nav-height: 56px;
    --m-nav-bg: #fff;
    --m-logo-maxh: 70px;
    --m-nav-link-size: 13px;
    --m-nav-link-lh: var(--m-nav-height);
    --m-nav-xpad: 12px;         /* sağ/sol padding */
    --m-nav-logo-x: 0px;
    --m-nav-logo-y: 0px;
    --m-nav-menu-x: 0px;
    --m-nav-menu-y: 0px;
    --m-nav-gap-x: 0px;

    /* BANNER */
    --m-banner-pt: 10px;
    --m-banner-py: 72px;        /* üst-alt padding */
    --m-banner-text-x: 0px;
    --m-banner-text-y: -35px;
    --m-banner-mt: 30px;       /* metin bloğu üst marj */
    --m-store-w: 140px;         /* mobil store buton genişliği */
    --m-store-gap: 10px;

    --m-h2-mb: 60px;
    --m-h6a-mb: 12px;
    --m-btn1-mb: 50px;
    --m-h6b-mb: 12px;
    --m-btn2-mb: 60px;
    --m-desc-mt: 18px;

    /* Mockup */
    --m-mockup-maxw: 85%;       /* yüzde kullanımı */
    --m-mockup-x: 0px;
    --m-mockup-y: 0px;
    --m-mockup-mt: 12px;

    /* Sections */
    --m-section-py: 64px;
    --m-section-content-mt: 44px;
  }
}

/* ============= Navbar ============= */
.navbar{
  position:fixed;right:0;left:0;width:100%;
  padding-left:0;padding-right:0;
  min-height:var(--d-nav-height);
  background:var(--d-nav-bg);z-index:1030;
  box-shadow:var(--d-nav-shadow);
}
.navbar .active{color:#59deff!important}
.navbar .nav-item{margin:0 4px}
.navbar .nav-item .nav-link{
  color:#000;text-transform:uppercase;font-weight:600;
  font-size:var(--d-nav-link-size);
  line-height:var(--d-nav-link-lh);
  padding:0 8px;letter-spacing:.3px;
}
.navbar .nav-item .nav-link:hover{color:#59deff}
.navbar .navbar-toggler{cursor:pointer}
.navbar .navbar-toggler span{color:#333}

/* Masaüstü NAV düzeni */
@media (min-width:992px){
  .navbar .container{display:flex;align-items:center}
  .navbar-brand{
    margin-right:430px;
    position:relative;
    transform:translate(var(--d-nav-logo-x),var(--d-nav-logo-y));
  }
  .navbar-brand img{display:block;height:auto;max-height:var(--d-logo-maxh)}
  .navbar-nav{
    display:flex;gap:var(--d-nav-gap-x);
    position:relative;transform:translate(var(--d-nav-menu-x),var(--d-nav-menu-y));
  }
  .download-buttons{
    margin-left:64px;display:flex;align-items:center;gap:10px;
  }
  .download-buttons img{height:32px}
}

/* Mobil NAV düzeni */
@media (max-width:768px){
  .navbar{min-height:var(--m-nav-height)!important;padding:0 var(--m-nav-xpad)!important}
  .navbar .nav-item .nav-link{line-height:var(--m-nav-link-lh)!important;font-size:var(--m-nav-link-size)}
  .navbar-brand img{max-height:var(--m-logo-maxh)!important}
  .navbar .navbar-toggler span{font-size:17px}
}
@media (max-width:991.98px){
  .navbar .navbar-collapse{
    overflow:auto;background:#fff;color:#000!important;text-align:center;padding:10px 0
  }
  .navbar-collapse .navbar-nav{gap:12px}
  .navbar .nav-item .nav-link{line-height:44px;padding:8px 0}
  .navbar-collapse .download-buttons{justify-content:center;margin:28px auto 6px!important}
  .navbar-collapse .download-buttons img{height:36px}
}

/* ============= Banner (Hero) ============= */
.banner{
  background:var(--d-banner-bg); padding:var(--d-banner-py) 0; position:relative;
  padding-top:var(--d-banner-pt)!important; /* nav altında nefes */
}
.banner::before{
  content:"";position:absolute;inset:0;background:url(images/pattern.png)
}
.banner a.weblink{color:#fff;border-bottom:1px dotted #fff}
.banner a:hover{text-decoration:none}

/* Masaüstü metin konumlandırma */
@media (min-width:992px){
  .banner .banner-text{
    position:relative;
    transform:translate(var(--d-banner-text-x),var(--d-banner-text-y));
    max-width:var(--d-banner-maxw);
    padding-right:var(--d-banner-pr);
    margin:50px 0 0;
  }
  .banner .banner-text h2{ margin-bottom:var(--d-h2-mb)!important }
  .banner .banner-text h6:nth-of-type(1){ margin-bottom:var(--d-h6a-mb)!important }
  .banner .banner-text .btn-row:nth-of-type(1){ margin-bottom:var(--d-btn1-mb)!important }
  .banner .banner-text h6:nth-of-type(2){ margin-bottom:var(--d-h6b-mb)!important }
  .banner .banner-text .btn-row:nth-of-type(2){ margin-bottom:var(--d-btn2-mb)!important }
  .banner .banner-text p.yaya-text{ margin-top:var(--d-desc-mt)!important }
}

/* Mobil metin konumlandırma */
@media (max-width:991.98px){
  section.banner{padding:var(--m-banner-py) 0 56px!important}
  .banner .banner-text{
    position:relative!important;
    transform:translate(var(--m-banner-text-x),var(--m-banner-text-y))!important;
    padding:0 16px!important;
    margin-top:var(--m-banner-mt)!important;
  }
  .banner .banner-text h2{margin-bottom:var(--m-h2-mb)!important}
  .banner .banner-text h6:nth-of-type(1){margin-bottom:var(--m-h6a-mb)!important}
  .banner .banner-text .btn-row:nth-of-type(1){margin-bottom:var(--m-btn1-mb)!important}
  .banner .banner-text h6:nth-of-type(2){margin-bottom:var(--m-h6b-mb)!important}
  .banner .banner-text .btn-row:nth-of-type(2){margin-bottom:var(--m-btn2-mb)!important}
  .banner .banner-text p.yaya-text{margin-top:var(--m-desc-mt)!important}
}

/* “Yaya, Bisiklet…” satırı hizası */
.banner .banner-text p.white{padding-right:0!important;padding-left:0!important;margin:18px 0!important;text-align:left!important}
.yaya-text{margin:18px 0!important;padding:0 12px!important;text-align:left!important;display:block;font-size:15px;line-height:1.6}

/* Store buton satırları */
.btn-row{display:flex;align-items:center;flex-wrap:wrap;gap:var(--d-store-gap);margin:12px 0 22px}
.btn-row img{width:var(--d-store-w);height:auto;border-radius:7px;display:block}
@media (max-width:991.98px){
  .btn-row{gap:var(--m-store-gap)}
  .btn-row img{width:var(--m-store-w)}
}

/* Sağdaki telefon görseli */
.mockup{
  max-width:var(--d-mockup-maxw);width:100%!important;height:auto!important;
  position:relative;transform:translate(var(--d-mockup-x),var(--d-mockup-y));
  display:inline-block;
}
@media (min-width:1200px){ .mockup{max-width:420px} }
@media (max-width:991.98px){
  .mockup{max-width:var(--m-mockup-maxw);transform:translate(var(--m-mockup-x),var(--m-mockup-y));margin-top:var(--m-mockup-mt)}
}

/* ============= Genel Bölüm Stilleri ============= */
.prelative{position:relative}
.section-padding{padding:var(--d-section-py) 0}
.sectioner-header{width:var(--d-section-header-w);margin:0 auto}
.line{height:2px;width:50px;background:#000;display:block;margin:22px auto;position:relative}
.line::after{content:"";position:absolute;left:50%;width:150px;height:2px;border-bottom:2px dashed #000;margin-left:-75px}
.sectioner-header p{color:#818992;font-size:17px}
.section-content{margin-top:72px}

/* Mobil sections */
@media (max-width:991.98px){
  .section-padding{padding:var(--m-section-py) 0!important}
  .section-content{margin-top:var(--m-section-content-mt)!important}
  h2{font-size:25px} h3{font-size:23px} h6{margin-bottom:25px}
}

/* ============= Features ============= */
.single-feature{margin:42px 0 84px}
.single-feature h5{font-size:16px}
.media-right-margin{margin-right:25px}
.single-feature p{font-size:13px}
.icon-border span{
  display:block;width:50px;height:50px;border-radius:100px;color:#000;font-size:18px;line-height:50px;border:1px solid #000;text-align:center
}

/* ============= Testimonial ============= */
.testimonial{background:#000; padding:100px 0; position:relative}
.testimonial::before{content:"";position:absolute;inset:0;background:url(images/pattern.png)}
.bx-prev{left:-90px!important;background:url(images/arrow-left.png) no-repeat!important;background-size:100% 100%!important}
.bx-next{right:-90px!important;background:url(images/arrow-right.png) no-repeat!important;background-size:100% 100%!important}
.bx-wrapper{border:none!important;background:rgba(255,255,255,.81)!important;border-radius:5px!important;box-shadow:none!important}
.slider-item{padding:20px}
.slider .test-img img{border:12px solid #fff;border-radius:50%;width:100%;height:auto}
.test-img{float:left;width:20%;margin-right:5%}
.test-text{float:left;width:75%}
.slider .title{display:block;position:relative;margin:0 0 20px;font-size:1.125em;line-height:1.25}
.slider .title span{display:block;font-size:1.5em;font-weight:700}

/* ============= FAQ ============= */
.faq{background:#fafafa;border-bottom:1px solid #e4e4e4}
.faq-content{margin:20px 0}
.faq-content h4{font-weight:400;font-size:20px}
.faq-content p{color:#818992;font-weight:300;margin-top:15px}

/* ============= Contact ============= */
#contact_form .form-input{border:1px solid #e4e4e4}
input{
  height:42px;padding:0 1rem;background:#fff;border-radius:30px;margin-bottom:1rem;
  transition:all .3s ease-in-out;border:0
}
#contact_form textarea{
  resize:none;padding:1rem;height:150px;background:#fff;border:0;border-radius:30px;margin-bottom:1rem;
  transition:all .3s ease-in-out
}
.btn-grad{padding:.7rem 2rem;display:inline-block;color:#fff;border-radius:2rem;border:0;background:#000;cursor:pointer}
.contact-info{padding:2rem 2rem 1rem;border-radius:8px;background:#000;color:#fff}
.contact-item{margin:23px 0}
.contact-item i{font-size:20px}
.contact-item p{line-height:20px;margin:0}

/* Form/sağ blok çakışma fix */
.contact .btn-grad{margin-bottom:16px}
@media (max-width:991.98px){
  .contact .btn-grad{margin-bottom:22px}
  .contact .contact-info{margin-top:18px}
}
.contact .btn-grad,.contact .contact-info{position:relative;z-index:1}

/* ============= Footer ============= */
.footer-copy{background:#fff;color:#242424;font-size:13px;text-align:center;padding:15px 0}
.footer-copy p{margin-bottom:0}

/* Header menüsü yanındaki store ikonları */
.download-buttons{display:flex;align-items:center;margin-left:35px}
.download-buttons img{height:35px;margin-left:10px}

/* ============= Popup (opsiyonel) ============= */
/* HTML’de #popup varsa bu stiller çalışır. */
.popup{
  display:none;position:fixed;inset:0;background:rgba(0,0,0,.8);
  justify-content:center;align-items:center;z-index:9999;
}
.popup--show{display:flex}
.popup-content{
  background:#fff;padding:25px 20px;border-radius:12px;max-width:400px;width:90%;
  text-align:center;box-shadow:0 8px 20px rgba(0,0,0,.4);
}
.close-btn{
  background:#0d6efd;color:#fff;font-size:16px;font-weight:700;padding:10px 18px;
  border:0;border-radius:8px;cursor:pointer;transition:filter .25s ease
}
.close-btn:hover{filter:brightness(.95)}
/* Masaüstü için */
.mockup {
  max-width: 350px;
}

/* Mobil için */
@media (max-width: 768px) {
  .mockup {
    max-width: 300px;
  }
}
/* --- Vurgu rengi (istediğin renge çekebilirsin) --- */
:root{
  --accent: #59deff;  /* mavi ton – dilersen değiştir */
}

/* Banner içinde vurgu ve marka renkleri */
.banner .accent{ color: var(--accent) !important; }
.banner .brand-white{ color: #fff !important; }