/* =========================================================
   Fon E-Ofis — Global Stil Dosyası (güncellenmiş)
   ========================================================= */

/* Tipografi & temel */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap');

:root{
  --brand:#0077cc;
  --brand-dark:#005fa3;
  --text:#333;
  --muted:#555;
  --bg:#fff;
  --card:#f8f8f8;
  --line:#eee;
}

*{box-sizing:border-box}
html,body{height:100%}
html{scroll-behavior:smooth}
body{
  margin:0; padding:0;
  font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  color:var(--text); background:var(--bg);
  text-rendering:optimizeLegibility; -webkit-font-smoothing:antialiased;
}

img{max-width:100%; height:auto; display:block}
a{color:inherit; text-decoration:none}
ul{margin:0; padding:0; list-style:none}
h1,h2,h3{line-height:1.25; margin:0 0 .6rem}
p{margin:.3rem 0 1rem}

/* =========================================================
   Container (genel layout yardımcı)
   ========================================================= */
.container{width:min(1200px, 100%); margin-inline:auto; padding-inline:10%}
@media (max-width: 480px){ .container{ padding-inline:6% } }

/* =========================================================
   Header / Navigation + Hamburger
   ========================================================= */
.topbar{
  position:sticky; top:0; z-index:100;
  background:#fff; border-bottom:1px solid var(--line);
  padding:15px 30px;
  display:flex; align-items:center; justify-content:space-between;
  transition:all .3s ease;
}
.logo{font-size:20px; font-weight:700; color:#1a1a1a}

/* Menü liste */
.main-menu ul{
  display:flex; gap:25px; align-items:center;
}

/* Linkler */
.main-menu a{
  text-decoration:none; color:var(--text);
  font-weight:600; padding:.7rem .4rem; border-radius:10px;
  transition:color .25s ease, background-color .25s ease;
}
.main-menu a:hover{color:var(--brand)}
.main-menu a.active{color:var(--brand-dark)}

/* Hamburger buton (mobilde görünsün) */
.hamburger{
  display:none; width:44px; height:44px; border:0; background:transparent; padding:8px; border-radius:12px;
}
.hamburger:hover{background:#f5f5f5}
.hamburger .bar{
  display:block; width:100%; height:2px; background:#222; margin:6px 0; transition:.25s;
}

/* Masaüstü: klasik yatay menü */
@media (min-width: 769px){
  .main-menu ul{ display:flex }
}

/* Mobil menü: gizle/aç (.show) */
@media (max-width: 768px){
  .hamburger{display:block}
  .main-menu{ position:relative }
  .main-menu ul{
    display:none; flex-direction:column; gap:0;
    position:absolute; left:0; right:0; top:60px; /* .topbar yükseklik */
    background:#fff; border-bottom:1px solid var(--line); padding:8px 12px 12px;
  }
  .main-menu ul.show{ display:flex }
  .main-menu a{ width:100%; padding:.95rem 10px; color:#444 }
}

/* Klavye odak */
a:focus-visible, button:focus-visible{
  outline:3px solid #89c2ff; outline-offset:2px; border-radius:12px;
}

/* =========================================================
   HERO (metin + görsel) — mevcut .hero yapın
   ========================================================= */
.hero{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:24px;
  padding:60px 10%; background:#f0f6ff;
}
.hero-text{flex:1 1 45%}
.hero-text h1{font-size:clamp(28px,4vw,40px); color:#1a1a1a; margin:0 0 16px}
.hero-text p{font-size:18px; line-height:1.6; color:var(--muted)}
.hero-image img{
  width:100%;
  max-width:600px; /* Büyütüldü: önce 520px idi */
  height:auto;
  border-radius:12px;
  box-shadow:0 8px 24px rgba(0,0,0,.06)
}

/* CTA butonu */
.cta-button{
  display:inline-block; margin-top:18px; padding:12px 20px;
  background:linear-gradient(135deg, var(--brand), var(--brand-dark));
  color:#fff; border-radius:999px; text-decoration:none; font-weight:700;
  transition:filter .2s ease, transform .2s ease;
  box-shadow:0 10px 24px rgba(0,0,0,.08);
}
.cta-button:hover{filter:brightness(.95); transform:translateY(-1px)}

/* Ghost buton (ikincil) — gerekiyorsa */
.ghost-button{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.85rem 1.1rem; border:1px solid #e7e7e7; border-radius:999px; font-weight:600;
}

/* =========================================================
   HERO (tam görsel banner) — .hero-image-full yapın
   ========================================================= */
.hero-image-full{
  position:relative; z-index:1;
  padding:0 10%;
  background:#fff; overflow:hidden;
}
.hero-image-full-img{
  display:block; width:100%; height:auto;
  max-width:1200px; margin:0 auto;
  object-fit:cover;
}

/* =========================================================
   Sayfa-Hero
   ========================================================= */
.page-hero{padding:40px 0; background:linear-gradient(180deg,#fff,#f6f9ff)}
.page-hero .hero-grid{
  display:grid; grid-template-columns:1.1fr .9fr; gap:32px; align-items:center;
  width:min(1200px,100%); margin-inline:auto; padding:0 10%;
}
.page-hero .hero-text p{color:var(--muted)}
.page-hero .hero-text h1{font-size:clamp(28px,4vw,40px)}
.page-hero .hero-text h1 span{color:var(--brand)}
.page-hero .hero-actions{display:flex; gap:12px; margin-top:12px}
.page-hero .hero-media{border-radius:12px; overflow:hidden; box-shadow:0 8px 24px rgba(0,0,0,.06)}
.page-hero .hero-media img{width:100%; height:100%; object-fit:cover}

@media (max-width: 992px){
  .page-hero .hero-grid{ grid-template-columns:1fr; gap:20px }
}

/* =========================================================
   Özellik Kartları
   ========================================================= */
.features{ padding:60px 10%; background:#fff }
.features h2{ text-align:center; font-size:28px; margin:0 0 34px }
.features-grid{
  display:grid; gap:24px;
  grid-template-columns:repeat(auto-fit, minmax(230px, 1fr));
}
.feature-box{
  background:var(--card); padding:22px; border-radius:12px;
  box-shadow:0 0 12px rgba(0,0,0,.04); transition:transform .25s ease;
  border:1px solid var(--line);
}
.feature-box:hover{ transform:translateY(-4px) }
.feature-box h3{ font-size:18px; margin:0 0 8px; color:var(--brand) }
.feature-box p{ font-size:15px; color:var(--muted); margin:0 }

/* --- Uyum için alias --- */
.feature-grid{ display:grid; gap:24px; grid-template-columns:repeat(auto-fit, minmax(230px, 1fr)) }
.feature-card{ background:var(--card); padding:22px; border-radius:12px; border:1px solid var(--line); box-shadow:0 0 12px rgba(0,0,0,.04) }
.feature-card h3{ font-size:18px; margin:0 0 8px; color:var(--brand) }

/* =========================================================
   CTA Şeridi
   ========================================================= */
.cta-strip{ background:#0b1220; color:#fff; padding:28px 10%; margin:12px 0 }
.cta-strip .container{ padding:0 }
.cta-strip .cta-flex{ display:flex; align-items:center; justify-content:space-between; gap:16px }
.cta-strip .cta-button{ background:#10b981 }
.cta-strip .cta-button:hover{ background:#0a9a70 }

@media (max-width: 768px){
  .cta-strip .cta-flex{ flex-direction:column; align-items:flex-start }
}

/* =========================================================
   Lokasyon / Görseller
   ========================================================= */
.location{ background:#f5faff; padding:60px 10%; text-align:center }
.location img{ max-width:500px; width:100%; border-radius:10px; margin-top:20px }

/* =========================================================
   Yorumlar
   ========================================================= */
.testimonials{ padding:60px 10%; background:#fff }
.testimonials h2{ text-align:center; font-size:26px; margin:0 0 34px }
.testimonials blockquote{
  font-style:italic; color:#444; border-left:4px solid var(--brand);
  margin:20px auto; padding:10px 20px; max-width:700px; background:#fdfdfd; border-radius:5px
}

/* =========================================================
   SSS
   ========================================================= */
.faq{ padding:60px 10%; background:#f9f9f9 }
.faq h2{ text-align:center; margin:0 0 26px }
.faq details{
  margin-bottom:15px; background:#fff; border-radius:10px; padding:15px 20px;
  box-shadow:0 0 6px rgba(0,0,0,.05); border:1px solid var(--line)
}
.faq summary{ cursor:pointer; font-weight:700 }

/* =========================================================
   Footer
   ========================================================= */
footer{ background:#0a0a0a; color:#fff; text-align:center; padding:20px; font-size:14px }
.site-footer{ background:#0b1220; color:#cbd5e1; padding:36px 0 28px }
.footer-grid{
  width:min(1200px,100%); margin-inline:auto; padding-inline:10%;
  display:grid; gap:20px; grid-template-columns:2fr 1.3fr 1fr; align-items:start;
}
.footer-menu li a{display:inline-block; padding:.4rem 0; color:#cbd5e1}
.footer-menu li a:hover{color:#fff}
.footer-legal{opacity:.9}
@media (max-width: 900px){ .footer-grid{ grid-template-columns:1fr } }

/* =========================================================
   WhatsApp sabit buton + selamlama balonu
   ========================================================= */
.wa-float{
  position:fixed; right:16px; bottom:16px; width:56px; height:56px; border-radius:50%;
  display:grid; place-items:center; background:#25D366; color:#fff; text-decoration:none;
  box-shadow:0 8px 24px rgba(0,0,0,.18); z-index:9999
}
.wa-float svg{ display:block }
@media (prefers-reduced-motion:no-preference){
  .wa-float{ animation:wa-pulse 2.2s infinite }
  @keyframes wa-pulse{
    0%{ box-shadow:0 0 0 0 rgba(37,211,102,.45) }
    70%{ box-shadow:0 0 0 14px rgba(37,211,102,0) }
    100%{ box-shadow:0 0 0 0 rgba(37,211,102,0) }
  }
}
.wa-bubble{
  position:fixed; right:16px; bottom:84px; max-width:280px;
  background:#fff; border:1px solid rgba(0,0,0,.08); border-radius:14px;
  box-shadow:0 10px 30px rgba(0,0,0,.12); padding:10px 12px;
  opacity:0; transform:translateY(8px); pointer-events:none;
  transition:opacity .25s ease, transform .25s ease; z-index:9999; font-size:14px; color:#111
}
.wa-bubble.show{ opacity:1; transform:translateY(0); pointer-events:auto }
.wa-bubble-inner{ position:relative; padding-right:22px }
.wa-bubble-close{
  position:absolute; top:0; right:0; width:22px; height:22px; border:0; border-radius:50%;
  background:transparent; color:#666; cursor:pointer; font-size:16px; line-height:1
}
.wa-bubble-close:hover{ color:#000 }

.whatsapp-fab{
  position:fixed; right:18px; bottom:18px; width:56px; height:56px; display:grid; place-items:center;
  background:#25D366; border-radius:50%; box-shadow:0 10px 24px rgba(0,0,0,.22); z-index:9999
}
.whatsapp-fab svg{ width:28px; height:28px; fill:#fff }

/* =========================================================
   Responsive tamamlayıcılar
   ========================================================= */
@media (max-width: 900px){
  .hero{ padding:28px 10% }
}
@media (max-width: 768px){
  .hero{ flex-direction:column; text-align:center }
  .features-grid{ grid-template-columns:1fr }
}
@media (max-width:480px){
  .wa-float{ right:12px; bottom:12px }
  .wa-bubble{ right:12px; bottom:76px; max-width:260px }
}

/* Seçim */
::selection{ background:#e4f2ff }
/* ========== Footer (yenilenen) ========== */
.site-footer { background:#0b1220; color:#cbd5e1; padding:36px 0 0 }
.footer-inner{
  display:grid; gap:24px;
  grid-template-columns: 1.4fr 1fr 1fr;
  align-items:start;
}
@media (max-width: 900px){
  .footer-inner{ grid-template-columns:1fr; }
}

.footer-brand{ font-size:18px; color:#fff; display:inline-block; margin-bottom:.5rem }
.footer-address{ font-style:normal; line-height:1.6; opacity:.95 }

.contact-list{ display:grid; gap:10px; padding:0; margin:0; list-style:none }
.contact-list a{
  display:inline-flex; align-items:center; gap:.6rem;
  color:#cbd5e1; font-weight:600;
}
.contact-list a:hover{ color:#fff }
.contact-list svg{
  width:18px; height:18px; fill:currentColor; flex:0 0 18px; opacity:.9
}

.socials{ display:flex; gap:10px }
.socials a{
  width:40px; height:40px; display:grid; place-items:center;
  border:1px solid rgba(255,255,255,.15); border-radius:10px;
  transition:transform .2s ease, background .2s ease, border-color .2s ease;
}
.socials a:hover{
  transform:translateY(-2px);
  background:rgba(255,255,255,.06);
  border-color:rgba(255,255,255,.3);
}
.socials svg{ width:18px; height:18px; fill:#cbd5e1 }

.footer-bottom{ border-top:1px solid rgba(255,255,255,.1); margin-top:26px; }
.footer-bottom-inner{
  display:flex; justify-content:space-between; align-items:center;
  padding:14px 0;
}
.footer-bottom a{ color:#fff; text-decoration:underline; text-underline-offset:3px }
.footer-bottom .designer{ opacity:.9 }
@media (max-width: 600px){
  .footer-bottom-inner{ flex-direction:column; gap:8px; text-align:center }
}
.about-hero {
  padding: 60px 10%;
  background-color: #fff;
}

.about-hero .grid {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 40px;
}

.about-hero .hero-text {
  flex: 1 1 500px;
}

.about-hero .hero-text h1 {
  font-size: 2rem;
  margin-bottom: 20px;
  color: #222;
}

.about-hero .hero-text p {
  margin-bottom: 15px;
  line-height: 1.6;
  color: #444;
}

.about-hero .hero-media {
  flex: 1 1 400px;
}

.about-hero .hero-media img {
  width: 100%;
  height: auto;
  border-radius: 8px;
}

/* Mobil uyum */
@media (max-width: 768px) {
  .about-hero {
    padding: 40px 5%;
  }
  .about-hero .grid {
    flex-direction: column;
    text-align: center;
  }
  .about-hero .hero-text {
    flex: 1 1 100%;
  }
  .about-hero .hero-media {
    flex: 1 1 100%;
  }
}