/* ===========================
   borsawebsite/theme.css
   Yeşil temalı modern iskelet
   =========================== */

:root{
  --bg:#f7f9fa;
  --surface:#ffffff;
  --text:#111827;
  --muted:#6b7280;
  --border:#e5e7eb;

  /* Yeşil palet */
  --g-50:#ecfdf5;
  --g-100:#d1fae5;
  --g-200:#a7f3d0;
  --g-300:#6ee7b7;
  --g-400:#34d399;
  --g-500:#22c55e;
  --g-600:#16a34a; /* ana */
  --g-700:#15803d;
  --g-800:#166534;

  --radius:16px;
  --shadow:0 10px 30px rgba(22,163,74,.12);
  --shadow-sm:0 6px 18px rgba(0,0,0,.08);
  --speed:220ms;

  /* Site genişlik kontrolü */
  --site-max:1160px;
}

/* Reset / base */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
img{max-width:100%;display:block}
a{color:var(--g-700);text-decoration:none}
a:hover{color:var(--g-800)}
body.bg{
  background:var(--bg);
  color:var(--text);
  font:16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial;
}

.container{width:min(var(--site-max),92%);margin-inline:auto}
.pad-xl{padding:80px 0}
h1,h2,h3,h4{margin:0 0 8px}
p{margin:0 0 10px;color:var(--muted)}
.h1{font-size:44px}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:8px;border-radius:999px;padding:12px 20px;font-weight:700;border:1px solid transparent;transition:transform var(--speed),box-shadow var(--speed),background var(--speed)}
.btn-primary{background:linear-gradient(135deg,var(--g-600),var(--g-500));color:#fff;box-shadow:var(--shadow)}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 14px 36px rgba(22,163,74,.18)}
.btn-ghost{background:transparent;border:1px solid var(--border);color:var(--text)}
.btn-ghost:hover{border-color:var(--g-300);color:var(--g-700)}
.hide-sm{display:none}
.block{display:block;width:100%}
.mt{margin-top:12px}

/* Header / nav */
.site-header{
  position:sticky;top:0;z-index:50;
  background:rgba(255,255,255,.75);
  backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid rgba(0,0,0,.06);
}
.navwrap{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:14px 0}
.brand img{height:28px}
.nav .menu{list-style:none;margin:0;padding:0;display:flex;gap:24px;align-items:center}
.nav a{color:#111}
.nav a:hover{color:var(--g-700)}

/* Hero (eski iki sütunlu varyant) */
.hero{padding:64px 0 20px;background:linear-gradient(180deg,#fff 0%,var(--bg) 100%)}
.hero-inner{display:grid;grid-template-columns:1.1fr .9fr;gap:34px;align-items:center}
.hero-copy h1{font-size:48px;line-height:1.08}
.hero-copy .hl{background:linear-gradient(135deg,var(--g-700),var(--g-500));-webkit-background-clip:text;color:transparent}
.hero .cta{display:flex;gap:12px;margin-top:14px}
.hero-media{filter:drop-shadow(0 20px 40px rgba(0,0,0,.12))}

/* Features (güncel – simetrik) */
.features{padding:50px 0}
.feature{
  display:grid;
  grid-template-columns:1fr 1fr;   /* iki kolon eşit */
  gap:30px;align-items:center;
  margin:28px 0;padding:16px;border-radius:var(--radius);
  background:var(--surface);box-shadow:var(--shadow-sm);border:1px solid var(--border);
}

/* Telefon görseli her kartta aynı boy/oran */
.phone{
  width:100%;
  max-width:350px;         /* tüm cihazlarda aynı genişlik */
  aspect-ratio: 9 / 19.5;  /* iPhone benzeri oran */
  object-fit:contain;      /* crop yok, taşma yok */
  justify-self:center;     /* kolonda ortala */
}

/* 2. kartta görsel sağda, metin solda */
.feature-reverse img{order:2}
.feature-reverse div{order:1}

/* Security */
.security{padding:70px 0;background:#eef7f1}
.security h2{text-align:center;margin-bottom:20px}
.cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.card{
  background:#fff;border:1px solid var(--border);
  border-radius:18px;padding:18px;box-shadow:var(--shadow-sm);
}
.download{margin-top:34px;display:flex;align-items:center;justify-content:center;gap:14px}

/* Footer */
.site-footer{border-top:1px solid var(--border);background:#fff;margin-top:40px}
.foot{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:18px;padding:22px 0}
.foot-logo{height:26px}
.muted{color:var(--muted)}

/* Responsive (global) */
@media (max-width:1024px){
  .hide-sm{display:none}
  .nav .menu{gap:16px}
  .hero-inner{grid-template-columns:1fr}
  .feature{grid-template-columns:1fr}
  .feature-reverse img,.feature-reverse div{order:initial}
  .phone{max-width:300px}
  .cards{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
  .hero-copy h1{font-size:34px}
  .cards{grid-template-columns:1fr}
}


/* ===== VISUAL UPGRADE / PHONE & FEATURE OVERRIDES ===== */
.hero-inner{grid-template-columns:1.1fr .9fr; gap:48px; align-items:center}
.hero-media img{width:clamp(420px,40vw,760px); height:auto}

/* Feature kartları: daha dolgun ve simetrik */
.features{padding:64px 0}
.feature{
  grid-template-columns:1fr 1fr;
  align-items:center;
  padding:32px 40px;
  min-height:440px;
}
.phone {
  width: 100%;                     /* kart kolonunun tamamını kapla */
  max-width: none;                 /* üst limit yok */
  height: auto;                    /* orantıyı koru */
  aspect-ratio: auto;              /* yüksekliği resmin kendi oranından alsın */
  object-fit: contain;             /* crop yapmadan sığdır */
  justify-self: center;            /* ortala */
  display: block;
}
.feature > div h2{
  font-size:clamp(22px,2.2vw,32px);
  line-height:1.2;
  margin-bottom:10px;
}
.feature > div p{
  font-size:clamp(14px,1.1vw,16px);
  color:var(--muted);
}
@media (max-width:1024px){
  .feature{grid-template-columns:1fr; padding:22px; min-height:auto}
  .phone{max-width:300px}
  .feature-reverse img,.feature-reverse div{order:initial}
}


/* ===== Modern Hero (hero-pro) ===== */
.hero-pro{
  position:relative;
  padding:84px 0 36px;
  background:
    radial-gradient(1200px 600px at 70% -10%, rgba(34,197,94,.10), transparent 60%),
    linear-gradient(180deg,#fff 0%, var(--bg) 100%);
  overflow:clip;
}
.hero-pro::before,
.hero-pro::after{
  content:"";
  position:absolute; inset:auto 0 0 0; height:280px;
  background:radial-gradient(60% 120% at 20% 0%, rgba(16,185,129,.18), transparent 70%);
  filter:blur(40px);
  pointer-events:none;
}
.hero-pro__grid{
  display:grid; align-items:center; gap:40px;
  grid-template-columns:1.05fr .95fr;
}

/* left */
.eyebrow{font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--g-700); font-size:12px}
.display{font-size: clamp(36px, 4.6vw, 64px); line-height:1.05; margin:.25rem 0 .5rem}
.display .grad{
  background:linear-gradient(135deg, var(--g-700), var(--g-500));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.lead{font-size:clamp(14px,1.2vw,18px); color:#4b5563; margin-bottom:18px}
.hero-pro__cta{display:flex; gap:12px; margin:12px 0 8px}
.hero-pro__trust{display:flex; gap:10px; flex-wrap:wrap; margin-top:8px}
.chip{
  display:inline-flex; align-items:center; gap:6px;
  background:#fff; border:1px solid var(--border); color:#111; padding:8px 12px;
  border-radius:999px; box-shadow:0 4px 14px rgba(0,0,0,.05);
  font-weight:600; font-size:12px;
}

/* right */
.hero-pro__art{display:grid; place-items:center}
.hero-pro__frame{
  position:relative;
  border-radius:24px;
  background:linear-gradient(180deg,#fff, #f6faf7);
  box-shadow:0 20px 60px rgba(0,0,0,.12), inset 0 0 0 1px rgba(0,0,0,.06);
  padding:28px; width:min(780px, 92%); aspect-ratio: 16/11;
}
.hero-pro__frame::after{
  content:""; position:absolute; inset:0;
  border-radius:24px; box-shadow:inset 0 1px 40px rgba(22,163,74,.08);
  pointer-events:none;
}
.hero-pro__phones{
  width:100%; height:100%; object-fit:contain;
  animation:float 8s ease-in-out infinite;
  filter: drop-shadow(0 16px 30px rgba(0,0,0,.20));
}
@keyframes float{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-8px) } }
@media (max-width:1024px){
  .hero-pro{padding:56px 0 12px}
  .hero-pro__grid{grid-template-columns:1fr; gap:26px}
  .hero-pro__frame{width:100%; padding:18px; border-radius:18px}
}


/* ==== HERO SIMPLE (sadece yazı + blur) ==== */
.hero-simple{
  position:relative;
  padding: 74px 0 12px;
  background: linear-gradient(180deg,#fff 0%, var(--bg) 100%);
  overflow:clip;
}
/* Üstte seksi yeşil blur */
.hero-simple::before{
  content:"";
  position:absolute; left:0; right:0; top:-8%;
  height:300px;
  background: radial-gradient(900px 420px at 26% 18%, rgba(34,197,94,.18), transparent 65%);
  filter: blur(38px);
  pointer-events:none;
}
/* Yazı bloğu: SOLDA hizalı fakat blok konteynerde ORTA */
.hero-simple__inner{
  max-width:820px;
  margin-left:auto; margin-right:auto;   /* ortala */
  text-align:left;
  padding-left:clamp(6px,1vw,14px);      /* çok sola yapışmayı engelle */
}
.hero-cta,.hero-trust{ justify-content:flex-start }

/* ==== PHONES STRIP (3’lü görsel alt şerit) ==== */
.phones-strip{ padding: 14px 0 0; }
.phones-card{
  border-radius: 22px;
  background: linear-gradient(180deg,#fff,#f7fbf9);
  border: 1px solid var(--border);
  box-shadow: 0 24px 60px rgba(0,0,0,.08);
  padding: 26px;
  display:grid; place-items:center;
}
.phones-card img{
  width: min(980px, 90%);
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 18px 40px rgba(0,0,0,.18));
}

/* Responsive */
@media (max-width:1024px){
  .hero-simple{ padding: 58px 0 6px; }
  .hero-simple__inner{
    text-align:center; padding-left:0;
  }
  .hero-cta,.hero-trust{ justify-content:center }
  .phones-card{ padding:18px; }
  .phones-card img{ width: min(760px, 94%); }
}
@media (max-width:640px){
  .phones-card img{ width: min(520px, 100%); }
}



/* === CTA & CHIP SPACING TUNE === */
.hero-cta{
  gap: 18px !important;      /* butonlar arası */
  margin-top: 18px !important;
  flex-wrap: wrap;
}
.hero-trust{
  gap: 14px !important;      /* chip’ler arası */
  margin-top: 14px !important;
  flex-wrap: wrap;
}

/* Butonların birbirine yapışmasını engelleyen min. yan boşluk */
.hero-cta .btn{ margin-right: 0 }  /* gap kullanıyoruz, extra margin yok */

/* küçük ekran ayarı: biraz daha sıkı, istersen tam genişlik */
@media (max-width:640px){
  .hero-cta{ gap: 12px; margin-top: 14px }
  .hero-trust{ gap: 12px; margin-top: 12px }
  /* tam genişlik istersen aşağıdaki satırı aç */
  /* .hero-cta .btn{ width:100% } */
}


.site-footer{
  border-top:1px solid var(--border);
  background:#fff;
  margin-top:40px;
}
.foot{
  display:grid;
  grid-template-columns:1.2fr 1fr 1fr;
  gap:18px;
  padding:22px 0;
}
.foot-col h4{
  font-size:14px;
  margin-bottom:10px;
  color:#111;
}
.foot-col a{
  display:block;
  color:var(--g-700);
  font-size:14px;
  margin-bottom:6px;
  text-decoration:none;
}
.foot-col a:hover{
  color:var(--g-800);
}



/* === Pricing === */
.pricing{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
}
.plan{
  background:#fff;border:1px solid var(--border);
  border-radius:18px; padding:22px;
  box-shadow:var(--shadow-sm);
}
.plan .price{font-size:34px; font-weight:800; margin:6px 0 10px}
.plan .price span{font-size:18px; color:var(--g-600)}
.plan .price small{font-size:14px; color:var(--muted)}
.plan .feat{list-style:none;padding:0;margin:0}
.plan .feat li{padding:6px 0; color:#4b5563}
.plan.highlight{position:relative; background:linear-gradient(180deg,#fff,#f6faf7)}
.plan .badge{
  position:absolute; top:14px; right:14px;
  background:var(--g-600); color:#fff; font-size:12px; font-weight:700;
  border-radius:999px; padding:6px 10px;
}
.grid-notes{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:16px}
.grid-notes .note{
  background:#fff; border:1px solid var(--border); border-radius:14px; padding:14px;
  box-shadow:var(--shadow-sm);
}

/* === FAQ & Contact === */
.faq{display:grid; gap:10px}
.faq details{
  background:#fff; border:1px solid var(--border); border-radius:14px;
  padding:12px 14px; box-shadow:var(--shadow-sm);
}
.faq summary{cursor:pointer; font-weight:700; color:#0f172a}
.faq p{margin:8px 0 0; color:#475569}

.contact-grid{
  display:grid; gap:14px; grid-template-columns:repeat(3,minmax(0,1fr));
}
.contact-card{
  background:#fff; border:1px solid var(--border); border-radius:14px;
  padding:16px; box-shadow:var(--shadow-sm);
}
.ask{margin-top:24px}
.ask-form .row{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.ask-form input, .ask-form textarea{
  width:100%; border:1px solid var(--border); border-radius:10px;
  padding:12px; font:inherit; color:inherit; background:#fff;
}
.ask-form button{margin-top:10px}

@media (max-width:1024px){
  .pricing{grid-template-columns:1fr}
  .grid-notes{grid-template-columns:1fr}
  .contact-grid{grid-template-columns:1fr}
  .ask-form .row{grid-template-columns:1fr}
}


/* Küçük buton */
.btn-small {
  font-size: 9px;           /* yazı küçük */
  padding: 6px 12px;          /* iç boşluk */
  border-radius: 999px;       /* yuvarlak */
  line-height: 1.3;
}

/* Hover efekti uyumlu olsun */
.btn-small:hover {
  transform: translateY(-1px);
}