/* =========== Base =========== */
:root{
  --brand-600:#1E6BFF;
  --brand-700:#144FC9;
  --ink:#1e293b;
  --muted:#f5f8ff;
  --bg:#ffffff;
  --card:#ffffff;
  --ring:rgba(30,107,255,.15);
  --radius:16px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  color:var(--ink);
  background:#fff;
  line-height:1.5;
}
.container{width:min(1100px, 92%); margin-inline:auto}
.section{padding:56px 0}
.section--muted{background:var(--muted)}
.section__title{font-size:clamp(22px, 3vw, 32px); margin:0 0 24px 0; font-weight:800; color:#0f172a}
.btn{
  display:inline-block;
  padding:.9rem 1.2rem;
  background:var(--brand-600);
  color:#fff;
  text-decoration:none;
  border-radius:10px;
  font-weight:700;
  box-shadow:0 8px 18px var(--ring);
  transition:transform .15s ease, box-shadow .2s ease, background .2s ease;
}
.btn:hover{transform:translateY(-1px); background:var(--brand-700); box-shadow:0 10px 22px var(--ring)}
/* Header */
.site-header{position:sticky;top:0;z-index:20;background:#fff;box-shadow:0 1px 0 rgba(2,6,23,.08)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:.6rem 0}
.brand{display:flex;align-items:center;gap:.55rem;text-decoration:none;color:inherit}
.brand__logo{width:30px;height:30px}
.brand__name{font-weight:800}
.menu{display:flex;gap:1.1rem;flex-wrap:wrap}
.menu a{text-decoration:none;color:var(--ink);font-weight:600;padding:.45rem .35rem;border-radius:8px}
.menu a:hover,.menu a.active{background:rgba(15,23,42,.06)}
/* Hero */
@media (max-width:880px){.brand__name{max-width:46vw} .menu{gap:.8rem; font-size:.95rem}}
.hero{position:relative; isolation:isolate}
.hero > img{width:100%; height:58vh; object-fit:cover; display:block; filter:saturate(1.02)}
.hero__overlay{position:absolute; inset:0; display:grid; place-content:center; text-align:left; padding-inline:min(5vw, 48px);
  background:linear-gradient(180deg, rgba(0,36,120,.36) 0%, rgba(0,0,0,.35) 100%);}
.hero__title{color:#fff; font-size:clamp(28px, 5vw, 52px); font-weight:800; line-height:1.15; max-width:18ch; margin:0 0 18px 0;}
.grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.card{background:var(--card); border-radius:14px; overflow:hidden; box-shadow:0 6px 18px rgba(2,6,23,.06)}
.card img{width:100%; height:240px; object-fit:cover; display:block}
.card figcaption{padding:.8rem 1rem; font-weight:600}
@media (max-width:900px){.grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.grid{grid-template-columns:1fr} .card img{height:220px}}

/* Testimonials */

.testi__item{display:none; background:#fff; border-radius:16px; padding:28px 24px 22px 24px; box-shadow:0 10px 24px rgba(2,6,23,.08); min-height:140px}
.testi__item.is-active{display:block; animation:fade .45s ease both}
@keyframes fade{from{opacity:.4; transform:translateY(4px)} to{opacity:1; transform:none}}
.quote-mark{font-size:34px; color:var(--brand-600); line-height:1; margin-bottom:10px; user-select:none}
.testi__text{font-size:18px; line-height:1.6; margin:0 0 10px 0}
.testi__author{font-size:15px; color:#475569; font-weight:700}
.testi__dots{display:flex; gap:10px; justify-content:center; margin-top:16px}
.dot{width:9px; height:9px; border-radius:999px; background:#cbd5e1; border:none; padding:0; cursor:pointer}
.dot.is-active{background:#1E6BFF}
.footer{padding:26px 0; color:#334155; background:#fff; border-top:1px solid rgba(2,6,23,.06)}
.footer small{opacity:.9}

/* =========== Lightbox =========== */
.lightbox{
  position:fixed; inset:0; z-index:80; display:none;
}
.lightbox.is-open{display:block}
.lightbox__backdrop{
  position:absolute; inset:0; background:rgba(3,6,23,.6); backdrop-filter:blur(2px);
}
.lightbox__figure{
  position:absolute; inset:0; margin:auto; width:min(96vw,1100px); height:min(86vh, 820px);
  display:grid; grid-template-rows: 1fr auto; align-items:center; justify-items:center;
  padding:12px; border-radius:16px; box-shadow:0 20px 50px rgba(2,6,23,.45);
}
.lightbox__img{
  max-width:100%; max-height:100%; object-fit:contain; border-radius:12px; background:#0b1324;
}
.lightbox__caption{
  color:#e2e8f0; text-align:center; margin-top:10px; font-weight:600;
}
.lightbox__close{
  position:absolute; top:10px; right:14px; font-size:34px; line-height:1;
  width:44px; height:44px; border-radius:999px; border:none; cursor:pointer;
  color:#fff; background:rgba(2,6,23,.45);
}
.lightbox__nav{
  position:absolute; top:50%; transform:translateY(-50%); width:46px; height:46px;
  border:none; border-radius:999px; background:rgba(2,6,23,.45); color:#fff;
  font-size:32px; cursor:pointer;
}
.lightbox__prev{left:10px}
.lightbox__next{right:10px}
.lightbox__nav:hover, .lightbox__close:hover{background:rgba(2,6,23,.65)}
@media (max-width:640px){
  .lightbox__caption{font-size:14px}
  .lightbox__nav{width:42px; height:42px; font-size:28px}
}


/* Fix: lightbox hidden by default and styled buttons */
.lightbox{display:none !important; position:fixed; inset:0; z-index:80;}
.lightbox.is-open{display:block !important}
.lightbox__close, .lightbox__nav{
  appearance:none; -webkit-appearance:none; border:0; outline:none;
}


/* === Mobile Header Fix === */
.menu-toggle{display:none}
@media (max-width:820px){
  .nav{padding:.6rem 0; position:relative}
  .menu-toggle{
    display:inline-flex; align-items:center; justify-content:center;
    width:40px; height:40px; border-radius:10px; border:none; cursor:pointer;
    background:#eef2ff; color:#1E3A8A; font-size:20px; font-weight:700;
  }
  .menu{
    display:none; position:absolute; top:58px; right:4%;
    flex-direction:column; gap:0; background:#fff; border-radius:12px;
    box-shadow:0 12px 30px rgba(2,6,23,.15); padding:.4rem; min-width:180px; z-index:60;
  }
  .menu.is-open{display:flex}
  .menu a{padding:.6rem .8rem; display:block}
}

/* desktop sabit yükseklik */
  padding-bottom:34px; /* dots alanı */
}
@media (max-width:820px){
   /* mobilde biraz daha yüksek */
}
.testi__item{
  position:absolute;
  inset:0 0 34px 0; /* altta noktalara yer bırak */
  display:none;
  background:#fff;
  border-radius:16px;
  padding:28px 24px 22px 24px;
  box-shadow:0 10px 24px rgba(2,6,23,.08);
  overflow:auto; /* çok çok uzun yorumda içte scroll çıksın */
}
.testi__item.is-active{display:block; animation:fade .35s ease both}
.testi__dots{
  position:absolute; left:50%; transform:translateX(-50%);
  bottom:6px; display:flex; gap:10px; justify-content:center; margin:0;
}

/* === Mobile header stronger rules === */
.site-header{z-index:100}
.menu-toggle{display:none}
@media (max-width:820px){
  .menu-toggle{
    display:inline-flex; align-items:center; justify-content:center;
    width:42px; height:42px; border-radius:10px; border:none; cursor:pointer;
    background:#eef2ff; color:#1E3A8A; font-size:22px; font-weight:700;
  }
  nav[aria-label="Birincil"]{position:relative}
  #primary-menu.menu{
    display:none; position:absolute; top:48px; right:0;
    flex-direction:column; gap:0; background:#fff; border-radius:12px;
    box-shadow:0 12px 30px rgba(2,6,23,.15); padding:.4rem; min-width:190px; z-index:120;
  }
  #primary-menu.menu.is-open{display:flex}
  #primary-menu.menu a{padding:.7rem .9rem; display:block}
}




.menu{display:flex; gap:1.25rem; list-style:none; margin:0; padding:0}
.menu a{padding:.45rem .35rem; font-weight:600; text-decoration:none; color:#0f172a; border-radius:8px}
.menu a:hover{background:rgba(15,23,42,.06)}



/* Hero stays the same */

/* Testimonial stable container */
.testi{position:relative; height:320px; padding-bottom:38px}
@media (max-width:820px){ .testi{height:360px} }

.testi__item{
  position:absolute; inset:0 0 38px 0; display:none;
  background:#fff; border-radius:16px; padding:28px 24px 22px 24px;
  box-shadow:0 10px 24px rgba(2,6,23,.08);
  overflow:auto; /* allow scroll inside for super long text */
}
.testi__item.is-active{display:block; animation:fade .35s ease both}

.testi__dots{
  position:absolute; left:50%; transform:translateX(-50%);
  bottom:8px; display:flex; gap:10px; margin:0;
}

.testi__text{font-size:18px; line-height:1.6; margin:0 0 10px 0}
.testi__author{font-size:15px; color:#475569; font-weight:700}

/* Lightbox stays hidden when closed */
.lightbox{display:none !important; position:fixed; inset:0; z-index:200}
.lightbox.is-open{display:block !important}
.lightbox__close, .lightbox__nav{appearance:none; -webkit-appearance:none; border:0; outline:none}

/* === Lightbox styles (added) === */
#lightbox{display:none; position:fixed; inset:0; background:rgba(0,0,0,.84); z-index:99999;
  align-items:center; justify-content:center}
#lightbox.is-open{display:flex}
#lightbox img{max-width:92%; max-height:92%; border-radius:12px; box-shadow:0 10px 30px rgba(0,0,0,.5)}
.lb-close,.lb-prev,.lb-next{position:absolute; background:rgba(255,255,255,.12); color:#fff; border:none; cursor:pointer;
  backdrop-filter: blur(2px);}
.lb-close{top:18px; right:22px; font-size:34px; line-height:1; padding:6px 12px; border-radius:10px}
.lb-prev,.lb-next{top:50%; transform:translateY(-50%); font-size:30px; padding:10px 14px; border-radius:12px}
.lb-prev{left:16px} .lb-next{right:16px}
@media (max-width:700px){ .lb-prev,.lb-next{font-size:26px; padding:8px 12px} }
.card img,.gallery img,.zoomable{cursor:zoom-in}


.site-header{position:sticky;top:0;z-index:20;background:#fff;box-shadow:0 1px 0 rgba(2,6,23,.08)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:.6rem 0}
.brand{display:flex;align-items:center;gap:.55rem;text-decoration:none;color:inherit}
.brand__logo{width:30px;height:30px}
.brand__name{font-weight:800}
.menu{display:flex;gap:1.1rem;flex-wrap:wrap}
.menu a{text-decoration:none;color:var(--ink);font-weight:600;padding:.45rem .35rem;border-radius:8px}
.menu a:hover,.menu a.active{background:rgba(15,23,42,.06)}
.brand__name1 {color:black;text-decoration: none;font-weight: bold;}