/* ==============
   RESET & BASE
   ============== */
*{margin:0;padding:0;box-sizing:border-box}
:root{
  --bg:#0c0c0c;
  --muted:rgba(255,255,255,.65);
  --panel:rgba(0,0,0,.6);
  --accent:#fff;
}
html,body{height:100%}
body{
  background:var(--bg);
  color:#fff;
  font-family:Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

/* ==============
   NAV
   ============== */
nav{
  position:fixed;
  top:0;left:0;right:0;
  height:72px;
  padding:0 28px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  background:var(--panel);
  backdrop-filter:blur(10px);
  z-index:1200;
}

.nav-left{display:flex;align-items:center;gap:18px}
.logo{height:44px;display:block}

.nav-links{
  display:flex;
  align-items:center;
  gap:26px;
  list-style:none;
}

.nav-links a{
  color:var(--accent);
  text-decoration:none;
  font-size:13px;
  opacity:.92;
  padding:8px 4px;
  transition:opacity .2s ease, transform .15s;
}
.nav-links a:hover{opacity:1; transform:translateY(-2px)}

/* right side */
.nav-right{display:flex;align-items:center;gap:12px}

/* icons */
.nav-icon img{width:18px;filter:brightness(0) invert(1);opacity:.78}
.nav-icon img:hover{opacity:1;transform:scale(1.05)}

/* language */
.lang-box{position:relative}
.lang-toggle{background:none;border:none;cursor:pointer;padding:6px;border-radius:6px}
.lang-toggle img{width:22px;display:block}
.lang-menu{
  position:absolute;
  right:0;
  top:46px;
  background:#121212;
  border:1px solid rgba(255,255,255,.04);
  display:none;
  flex-direction:column;
  min-width:140px;
  box-shadow:0 6px 20px rgba(0,0,0,.45);
  z-index:1300;
  border-radius:6px;
}
.lang-menu button{
  display:flex;gap:10px;align-items:center;
  background:none;border:none;color:var(--accent);
  padding:10px 12px;text-align:left;cursor:pointer;font-size:14px;
}
.lang-menu img{width:18px;}

/* hamburger */
.hamburger{display:none;background:none;border:0;padding:8px;cursor:pointer}
.hamburger span{display:block;width:22px;height:2px;background:#fff;border-radius:2px;margin:4px 0;}

/* ==============
   HERO / SLIDER
   ============== */
.hero{
  position:relative;
  height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:0 20px;
  overflow:hidden;
}

/* slider images absolutely fill area */
.slider{position:absolute;inset:0;height:100%;width:100%}
.slider img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .8s ease}
.slider img:nth-child(1){animation:slide 15s linear infinite 0s}
.slider img:nth-child(2){animation:slide 15s linear infinite 5s}
.slider img:nth-child(3){animation:slide 15s linear infinite 10s}

@keyframes slide{
  8%{opacity:.2}
  30%{opacity:.2}
  30%{opacity:.18}
  38%{opacity:0}
  100%{opacity:0}
}

/* subtle overlay to mute images (user wanted very subtle background) */
.hero-overlay{
  position:absolute;inset:0;background:rgba(0,0,0,.2);pointer-events:none;
}

/* text */
.hero-inner{position:relative;z-index:4;max-width:820px;padding:40px}
.hero-inner h1{font-size:clamp(28px,5vw,48px);line-height:1.02;letter-spacing:1px}
.hero-inner p{margin-top:14px;color:var(--muted);font-size:16px;max-width:720px;margin-left:auto;margin-right:auto}

/* ==============
   PROJECTS (grid) – FIXED
   ============== */

.projects{
  padding:140px 8%;
  text-align:center;
}

.projects h2{
  font-size:26px;
  margin-bottom:28px;
}

/* GRID SYSTEM */
.grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr); /* Desktop: 4 */
  gap:20px;
}

/* Images */
.grid img{
  width:100%;
  aspect-ratio:1 / 1;     /* KARE */
  object-fit:cover;       /* Crop */
  border-radius:8px;
  cursor:pointer;
  transition:transform .3s ease, filter .25s;
}

.grid img:hover{
  transform:scale(1.05);
  filter:brightness(.95);
}

/* Tablet */
@media (max-width:1100px){
  .grid{
    grid-template-columns:repeat(3, 1fr);
  }
}

/* Mobile */
@media (max-width:768px){
  .grid{
    grid-template-columns:repeat(2, 1fr);
  }
}

/* Small Mobile */
@media (max-width:480px){
  .grid{
    grid-template-columns:1fr;
  }
}

/* Controls */

.projects-controls{
  margin-top:22px;
}

/* controls */
.projects-controls{margin-top:18px}
.btn{background:none;border:1px solid rgba(255,255,255,.12);color:#fff;padding:8px 22px;border-radius:6px;cursor:pointer}
.btn:hover{border-color:rgba(255,255,255,.2)}

/* ==============
   REFERENCES (DENSE + BIG)
   ============== */

.references{
  padding:110px 8%;
  text-align:center;
}

.references h2{
  font-size:26px;
  margin-bottom:26px;
  letter-spacing:1px;
}

/* Grid – Daha sık */
.ref-grid{
  display:grid;
  gap:22px; /* daha sık */
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  align-items:center;
  margin-top:34px;
}

/* Box – Daha kompakt */
.ref-item{
  height:130px; /* biraz düşürdük */
  display:flex;
  align-items:center;
  justify-content:center;
  padding:10px;
  background:linear-gradient(
    180deg,
    rgba(255,255,255,0.015),
    rgba(255,255,255,0.00)
  );
  border-radius:8px;
}

/* Logo – Daha büyük */
.ref-item img{
  max-width:90%;   /* daha geniş */
  max-height:120px; /* daha yüksek */
  object-fit:contain;
  filter:grayscale(100%);
  opacity:.75;

  transition:
    transform .3s cubic-bezier(.2,.9,.2,1),
    filter .25s,
    opacity .25s;
}

/* Hover */
.ref-item img:hover{
  filter:none;
  opacity:1;
  transform:scale(1.1); /* abartmadan */
}

/* ==============
   LIGHTBOX
   ============== */
.lightbox{
  position:fixed;inset:0;display:none;align-items:center;justify-content:center;
  background:rgba(0,0,0,.95);z-index:2000;padding:20px;
}
.lightbox img{max-width:92%;max-height:86%;border-radius:8px}
.lightbox-close{position:absolute;top:22px;right:28px;font-size:36px;background:none;border:none;color:#fff;cursor:pointer}

/* ==============
   FOOTER – PREMIUM
   ============== */
footer{background:#060606;padding:100px 8% 30px;color:var(--muted)}
.footer-inner{display:grid;grid-template-columns:2fr 1fr 1fr;gap:46px;margin-bottom:34px;align-items:start}
.footer-logo{height:50px}
.footer-brand p{margin-top:18px;max-width:320px;line-height:1.6;opacity:.7}
.footer-contact h4,.footer-social-area h4{margin-bottom:12px;font-size:15px}
.footer-contact p{opacity:.8;margin-bottom:8px}
.footer-social{display:flex;gap:18px}
.footer-social img{width:22px;filter:brightness(0) invert(1);opacity:.75}
.footer-bottom{border-top:1px solid rgba(255,255,255,.04);padding-top:20px;text-align:center;opacity:.6;font-size:13px}

/* ==============
   RESPONSIVE
   ============== */
@media (max-width:1100px){
  .footer-inner{grid-template-columns:1.5fr 1fr 1fr}
}
@media (max-width:820px){
  .nav-links{display:none} /* use mobile panel */
  .hamburger{display:block}
  .hero-inner{padding:24px}
  .ref-item{height:110px}
}
@media (max-width:768px){
  .nav-links{
    position:fixed;left:-100%;top:72px;width:260px;height:100vh;background:#0b0b0b;padding:28px;flex-direction:column;gap:18px;transition:left .28s ease;z-index:1400;
  }
  .nav-links.active{left:0}
  .footer-inner{grid-template-columns:1fr;text-align:center}
  .grid img{height:150px}
  .hidden-mobile{display:none}
  .hero-inner h1{font-size:26px}
}
@media (max-width:420px){
  .hero-inner h1{font-size:22px}
  .grid img{height:130px}
  .ref-item{height:86px}
  .footer-inner{gap:20px;padding-bottom:20px}
}

/* =====================
   MOBILE NAV FIX
===================== */

@media (max-width:820px){

  /* Menü paneli */
  .nav-links{
    display:flex !important;
    position:fixed;
    top:70px;
    left:-100%;
    width:240px;
    height:100vh;
    background:#0b0b0b;

    flex-direction:column;
    gap:10px; /* ← 18 yerine 10 */

    padding:30px 20px; /* daha kompakt */

    transition:.3s ease;
    z-index:1500;
  }

  .nav-links.active{
    left:0;
  }

  /* Mobilde iconları kaldır */
  .nav-icon{
    display:none !important;
  }

/* Default: PC'de kapalı */
.hamburger{
  display:none;
}

/* Sadece mobilde aç */
@media (max-width:820px){
  .hamburger{
    display:flex !important;
  }
}

}

/* =====================
   FOOTER MOBILE CENTER
===================== */

@media (max-width:768px){

  .footer-inner{
    text-align:center !important;
    justify-items:center;
    align-items:center;
  }

  .footer-brand,
  .footer-contact,
  .footer-social-area{
    display:flex;
    flex-direction:column;
    align-items:center;
  }

  .footer-brand p{
    max-width:90%;
  }

}

/* =====================
   HAMBURGER REAL FIX
===================== */

.hamburger{
  display:flex !important;
  flex-direction:column !important;
  justify-content:center;
  align-items:center;
  gap:4px !important;   /* gerçek aralık */
  padding:0 !important;
  margin:0 !important;
}

.hamburger span{
  display:block !important;

  width:22px;
  height:2px;

  background:#fff;

  margin:0 !important;   /* <<< ASIL OLAY BU */
  padding:0 !important;

  line-height:0 !important;
  border-radius:2px;
}

/* FLOATING WHATSAPP */

.whatsapp-float{
  position:fixed;
  right:25px;
  bottom:25px;

  width:55px;
  height:55px;

  background:#25D366;
  border-radius:50%;

  display:flex;
  justify-content:center;
  align-items:center;

  box-shadow:0 8px 25px rgba(0,0,0,.4);

  z-index:3000;
}

.whatsapp-float img{
  width:28px;
  filter:brightness(0) invert(1);
}

.whatsapp-float:hover{
  transform:scale(1.08);
}

/* =====================
   SERVICES
===================== */

.services{
  padding:140px 8%;
  text-align:center;
}

.services h2{
  font-size:28px;
  margin-bottom:50px;
}

.services-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:40px;
}

.service-box{
  padding:40px 25px;
  background:rgba(255,255,255,0.02);
  border:1px solid rgba(255,255,255,0.05);
  border-radius:10px;
  transition:.3s ease;
}

.service-box:hover{
  transform:translateY(-6px);
  border-color:rgba(255,255,255,0.15);
}

.service-box h3{
  margin-bottom:15px;
  font-size:18px;
}

.service-box p{
  font-size:14px;
  opacity:.7;
  line-height:1.6;
}

/* =====================
   REFERENCES MOBILE FIX
===================== */

@media (max-width:768px){

  /* Grid: 2 kolon */
  .ref-grid{
    grid-template-columns:repeat(2, 1fr);
    gap:18px;
  }

  /* Kutular daha uzun */
  .ref-item{
    height:150px;
    padding:12px;
  }

  /* Logo biraz küçülür */
  .ref-item img{
    max-width:92%;
    max-height:95px;
  }

}

/* Küçük mobil (iPhone SE vs) */
@media (max-width:420px){

  /* Tek kolon */
  .ref-grid{
    grid-template-columns:1fr;
    gap:16px;
  }

  .ref-item{
    height:140px;
  }

  .ref-item img{
    max-height:85px;
  }
}