:root{
  --bg:#0b0f17;
  --text:#e5e7eb;
  --muted:#9ca3af;
  --brand:#e00000;
  --brand2:#ff2a2a;
  --line:rgba(255,255,255,.08);
  --shadow: 0 18px 60px rgba(0,0,0,.45);
  --radius: 22px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  color: var(--text);
  background:
    radial-gradient(900px 500px at 70% -10%, rgba(255,42,42,.18), transparent 60%),
    radial-gradient(800px 500px at 10% 0%, rgba(0,170,255,.10), transparent 55%),
    var(--bg);
  line-height:1.4;
}
a{color:inherit;text-decoration:none}
.container{max-width:1120px;margin:0 auto;padding:0 20px}

header{
  position:sticky;top:0;z-index:50;
  background:rgba(11,15,23,.75);
  backdrop-filter: blur(10px);
  border-bottom:1px solid var(--line);
}
.nav{display:flex;align-items:center;justify-content:space-between;padding:14px 0}
.brand{display:flex;align-items:center;gap:12px}
.brand img{height:30px;width:auto;display:block}
.nav ul{list-style:none;display:flex;gap:18px;margin:0;padding:0;color:var(--muted);font-weight:600}
.nav ul a{padding:10px 10px;border-radius:999px}
.nav ul a:hover{background:rgba(255,255,255,.06);color:var(--text)}
.nav .cta{display:flex;gap:10px;align-items:center}
.btn{
  display:inline-flex;align-items:center;gap:10px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.04);
  padding:10px 12px;border-radius:999px;
  font-weight:700;
}
.btn:hover{background:rgba(255,255,255,.07)}
.btn.primary{
  border-color:rgba(224,0,0,.45);
  background:linear-gradient(135deg, rgba(255,42,42,.95), rgba(204,0,0,.95));
  color:white;
}
.btn.primary:hover{filter:brightness(1.05)}

.hero{position:relative;padding:46px 0 26px 0}
.hero .frame{
  position:relative;border-radius: var(--radius);
  overflow:hidden;box-shadow: var(--shadow);
  border:1px solid var(--line);
}
.hero .bg{
  height:520px;
  background:
    linear-gradient(90deg, rgba(11,15,23,.88) 0%, rgba(11,15,23,.50) 45%, rgba(11,15,23,.12) 72%, rgba(11,15,23,.10) 100%),
    url("hero.jpg");
  background-size: cover;
  background-position: center;
}
.hero .badge{
  position:absolute;left:26px;top:26px;
  display:inline-flex;gap:10px;align-items:center;
  background:rgba(255,255,255,.06);
  border:1px solid var(--line);
  padding:10px 12px;border-radius:999px;
  color:var(--muted);font-weight:700;
}
.hero .card{
  position:absolute;left:26px;bottom:26px;
  width:min(520px, calc(100% - 52px));
  background: linear-gradient(135deg, rgba(255,42,42,.92), rgba(204,0,0,.92));
  color:white;border-radius: 20px;
  padding:22px 22px 18px 22px;
  box-shadow: 0 18px 40px rgba(224,0,0,.25);
}
.hero h1{margin:0;font-size:34px;letter-spacing:-.02em;line-height:1.05}
.hero p{margin:10px 0 14px 0;opacity:.95}
.hero .mini{display:flex;gap:10px;flex-wrap:wrap}
.pill{
  display:inline-flex;align-items:center;gap:8px;
  background:rgba(0,0,0,.16);
  border:1px solid rgba(255,255,255,.25);
  border-radius:999px;padding:8px 10px;font-weight:800;
}

.section{padding:46px 0}
.section h2{margin:0 0 12px 0;font-size:22px;letter-spacing:-.01em}
.section .lead{color:var(--muted);max-width:780px;margin:0 0 22px 0}

.grid{display:grid;gap:14px;grid-template-columns: repeat(12, 1fr)}
.card{background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius: var(--radius);padding:18px}
.card .title{font-weight:900}
.card .desc{color:var(--muted);margin-top:8px}
.kpi{display:flex;align-items:center;gap:12px}
.kpi .dot{width:12px;height:12px;border-radius:999px;background:linear-gradient(135deg, var(--brand2), var(--brand));box-shadow: 0 10px 25px rgba(224,0,0,.30)}
.kpi b{display:block;font-size:14px}
.kpi span{display:block;color:var(--muted);font-size:13px;margin-top:2px}

.services .card{grid-column: span 4}
.brands .card{grid-column: span 3}
.about .left{grid-column: span 7}
.about .right{grid-column: span 5}

.gallery .wrap{display:grid;grid-template-columns:repeat(12,1fr);gap:12px}
.gallery a{
  grid-column: span 4;border-radius: 18px;overflow:hidden;
  border:1px solid var(--line);background:rgba(255,255,255,.03);
  position:relative;
}
.gallery img{width:100%;height:240px;object-fit:cover;display:block;filter:saturate(1.02)}
.gallery a::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to top, rgba(0,0,0,.35), transparent 45%);
  opacity:.65;
}
.gallery a:hover{transform:translateY(-2px);transition:.15s ease;box-shadow:0 18px 45px rgba(0,0,0,.35)}

.contact .card{grid-column: span 6}
.contact .item{display:flex;gap:10px;align-items:flex-start;margin-top:10px;color:var(--muted)}
.contact .item b{color:var(--text)}
footer{padding:26px 0 70px 0;border-top:1px solid var(--line);color:var(--muted)}
.footer-grid{display:grid;gap:14px;grid-template-columns: 2fr 1fr}
.small{font-size:13px}
.note{opacity:.85}

.fab{
  position:fixed;right:16px;bottom:16px;z-index:60;
  display:flex;flex-direction:column;gap:10px;
}
.fab a{
  display:inline-flex;align-items:center;gap:10px;
  padding:12px 14px;border-radius:999px;
  border:1px solid var(--line);
  background:rgba(17,24,39,.70);
  backdrop-filter: blur(10px);
  box-shadow: 0 18px 45px rgba(0,0,0,.35);
  font-weight:900;
}
.fab a.primary{
  background: linear-gradient(135deg, rgba(255,42,42,.96), rgba(204,0,0,.96));
  border-color: rgba(224,0,0,.45);
  color: white;
}
.fab a:hover{filter:brightness(1.05)}

.lightbox{
  position:fixed;inset:0;z-index:80;
  background:rgba(0,0,0,.75);
  display:none;align-items:center;justify-content:center;
  padding:22px;
}
.lightbox.open{display:flex}
.lightbox .panel{
  width:min(1100px, 100%);
  background:rgba(17,24,39,.92);
  border:1px solid var(--line);
  border-radius: 22px;
  overflow:hidden;
  box-shadow: var(--shadow);
}
.lightbox img{width:100%;height:auto;display:block}
.lightbox .top{
  display:flex;justify-content:space-between;align-items:center;
  padding:12px 14px;border-bottom:1px solid var(--line);
  color:var(--muted);
}
.x{
  cursor:pointer;border:1px solid var(--line);
  background:rgba(255,255,255,.06);
  padding:8px 10px;border-radius:12px;
  font-weight:900;color:var(--text);
}

@media (max-width: 880px){
  .nav ul{display:none}
  .services .card{grid-column: span 6}
  .brands .card{grid-column: span 6}
  .about .left,.about .right{grid-column: span 12}
  .gallery a{grid-column: span 6}
  .contact .card{grid-column: span 12}
  .hero .bg{height:540px}
  .hero h1{font-size:30px}
}
@media (max-width: 520px){
  .gallery a{grid-column: span 12}
  .hero .bg{height:560px}
}
@media (max-width: 768px) {
    .hero-section {
        padding: 40px 20px !important;
    }

    .hero-title {
        font-size: 22px !important;
        line-height: 1.3 !important;
    }

    .hero-subtitle {
        font-size: 15px !important;
    }

    .hero-overlay-box {
        padding: 20px !important;
        width: 90% !important;
        margin: 0 auto !important;
    }

    .hero-overlay {
        background: rgba(255, 0, 0, 0.55) !important;
    }
}.nav{
  display:flex;
  align-items:center;
  gap:12px;
}

.brand{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
  flex:1 1 auto;
}

.brand-text{
  min-width:0;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.cta{
  flex:0 0 auto;
  display:flex;
  gap:10px;
  align-items:center;
}

@media (max-width:480px){
  .brand-text{ max-width:140px; }
  .cta .btn{ padding:10px 12px; font-size:14px; }
}/* --- Mobile header polish: brand text overflow fix --- */
.nav{
  flex-wrap: nowrap;
  gap: 12px;
}

.brand{
  min-width: 0;           /* <-- kritik */
  flex: 1 1 auto;         /* soldaki alan esnesin */
}

/* Brand içinde yazı span ile geliyorsa */
.brand .brand-text,
.brand span,
.brand strong{
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Sağdaki butonlar taşmasın */
.nav .cta{
  flex: 0 0 auto;
  white-space: nowrap;
}

/* Mobilde butonları biraz sıkıştır */
@media (max-width: 480px){
  .btn{ padding: 9px 10px; font-size: 14px; }
  /* Brand yazısı çok uzunsa max genişlik ver */
  .brand .brand-text,
  .brand span,
  .brand strong{ max-width: 140px; }
}

/* Daha dar ekranlarda sadece logo kalsın (istersen) */
@media (max-width: 360px){
  .brand .brand-text,
  .brand span,
  .brand strong{ display: none; }
}/* Mobile header brand text truncation fix */
.brand{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:0;           /* kritik */
  flex:1 1 auto;
}

.brand-text{
  min-width:0;           /* kritik */
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* sağ butonlar taşmayı artırmasın */
.cta{
  flex:0 0 auto;
  white-space:nowrap;
}

/* mobilde yazı biraz daha kısa alana sığsın */
@media (max-width:480px){
  .brand-text{ max-width: 140px; }
}
@media (max-width:360px){
  .brand-text{ display:none; } /* istersen kalsın, istemezsen sil */
}/* ===== Mobile header fix (brand text truncation + hide menu) ===== */

.brand{
  min-width: 0;
  flex: 1 1 auto;
}

.brand-text{
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 768px){
  .nav ul{ display: none; }
}

@media (max-width: 420px){
  .brand-text{ max-width: 150px; }
}

@media (max-width: 360px){
  .brand-text{ display: none; }
}/* ===== Mobile header fix ===== */
@media (max-width: 600px){
  header .nav{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    flex-wrap:nowrap;
  }

  /* Mobilde menüyü kapatıyoruz: yer açılacak */
  header .nav ul{
    display:none;
  }

  header .brand{
    display:flex;
    align-items:center;
    gap:8px;
    min-width:0;
    flex:1 1 auto;
  }

  header .brand img{
    height:28px;
    width:auto;
    display:block;
    flex:0 0 auto;
  }

  header .brand-text{
    min-width:0;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    max-width:100%;
    font-size:14px;
  }

  header .cta{
    flex:0 0 auto;
    display:flex;
    gap:8px;
    align-items:center;
  }

  header .cta .btn{
    padding:8px 10px;
    font-size:13px;
  }
}/* === Mobile header: tek yazı + taşma fix (override) === */
@media (max-width: 600px){
  .nav{
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:10px !important;
    flex-wrap:nowrap !important;
  }

  /* Mobilde menüyü kapat (yer aç) */
  .nav > ul{
    display:none !important;
  }

  .brand{
    display:flex !important;
    align-items:center !important;
    gap:8px !important;
    min-width:0 !important;
    flex:1 1 auto !important;
  }

  /* ÜSTTEKİ 2. YAZININ KAYNAĞI BÜYÜK İHTİMALLE BUNLAR */
  .brand::before,
  .brand::after{
    content:none !important;
    display:none !important;
  }

  .brand img{
    height:28px !important;
    width:auto !important;
    display:block !important;
    flex:0 0 auto !important;
  }

  .brand-text{
    min-width:0 !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    font-size:14px !important;
  }

  .cta{
    flex:0 0 auto !important;
    display:flex !important;
    gap:8px !important;
    align-items:center !important;
  }

  .cta .btn{
    padding:8px 10px !important;
    font-size:13px !important;
  }
}/* Header: mobile brand duplicate fix (hide logo.svg, keep text) */
@media (max-width: 768px){
  .brand img{ display:none !important; }

  /* If you want a small K badge instead of the image */
  .brand::before{
    content:"K";
    width:34px;
    height:34px;
    border-radius:10px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    font-weight:800;
    font-size:18px;
    background:#e01b1b;
    color:#fff;
    flex:0 0 auto;
  }

  .brand{ min-width:0; flex:1 1 auto; }
  .brand-text{
    min-width:0;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    max-width:200px;
  }
  .nav{ flex-wrap:nowrap; }
  .cta{ white-space:nowrap; flex:0 0 auto; }
}