
:root{
  --bg:#ffffff;
  --text:#0f172a;
  --muted:#64748b;
  --primary:#ef233c;
  --primary-dark:#b50e25;
  --card:#f8fafc;
  --shadow:0 10px 30px rgba(0,0,0,.07);
}

*{box-sizing:border-box}
html,body{margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;color:var(--text);background:var(--bg);}
img{max-width:100%;display:block}
a{text-decoration:none;color:inherit}
.container{width:min(1200px,92vw);margin-inline:auto}
.flex{display:flex}.between{justify-content:space-between}.center-v{align-items:center}

.site-header{position:sticky;top:0;background:rgba(255,255,255,.9);backdrop-filter:saturate(180%) blur(8px);box-shadow:var(--shadow);z-index:20}
.site-header .brand{display:flex;gap:12px;align-items:center;font-weight:800;letter-spacing:1px}
.site-header .brand img{height:44px;width:auto;border-radius:6px}
.nav{display:flex;gap:20px}
.nav a{padding:18px 6px;font-weight:600;color:var(--muted)}
.nav a:hover{color:var(--primary)}
.hamburger{display:none;flex-direction:column;gap:6px;background:transparent;border:none}
.hamburger span{width:28px;height:3px;background:var(--text);display:block;border-radius:2px}

.hero{position:relative;height:72vh;display:grid;place-items:center;overflow:hidden}
.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.55)}
.hero-overlay{position:relative;text-align:center;color:#fff;padding:24px;z-index:2}
.hero-overlay h1{font-size:clamp(28px,6vw,56px);margin:0 0 8px}
.hero-overlay p{margin:0 0 16px;color:#e2e8f0}
.cta{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.btn{padding:12px 18px;border-radius:999px;border:2px solid transparent;font-weight:700;box-shadow:var(--shadow);cursor:pointer;display:inline-block}
.btn-primary{background:var(--primary);color:#fff}
.btn-primary:hover{background:var(--primary-dark)}
.btn-outline{border-color:#fff;color:#fff;background:transparent}
.btn-outline:hover{background:rgba(255,255,255,.12)}
.btn-whatsapp{background:#25D366;color:#fff}
.btn-whatsapp:hover{filter:brightness(.95)}
.btn.wide{min-width:260px;text-align:center}

.neon{color:#fff;text-shadow:0 0 6px rgba(239,35,60,.9),0 0 20px rgba(239,35,60,.6),0 0 40px rgba(239,35,60,.4);animation:flicker 4s infinite}
@keyframes flicker{
  0%,19%,21%,23%,80%,100%{opacity:1}
  20%,22%{opacity:.4}
  81%{opacity:.75}
}

.counters{position:absolute;bottom:0;left:0;right:0;background:linear-gradient(180deg,transparent,rgba(0,0,0,.55));color:#fff;display:grid;grid-template-columns:repeat(4,1fr);gap:2px}
.counters .counter{padding:16px;text-align:center;font-weight:800}
.counters .counter::before{content:attr(data-target);display:block;font-size:clamp(22px,4vw,36px);font-weight:900}

.section{padding:64px 0}
.section.alt{background:var(--card)}
h2{font-size:clamp(24px,4vw,36px);margin:0 0 18px}
p{line-height:1.6}

.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.card{background:#fff;border-radius:18px;overflow:hidden;box-shadow:var(--shadow);display:flex;flex-direction:column}
.card-body{padding:16px;display:flex;flex-direction:column;gap:10px}
.card h3{margin:0}
.card .actions{display:flex;gap:10px;margin-top:auto}

.two-col{display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:start}
.check li{margin:8px 0}
.why li{margin:8px 0}

.slider{overflow:hidden;position:relative}
.slide{white-space:nowrap;padding:14px 0;animation:scroll 18s linear infinite;color:#475569}
@keyframes scroll{0%{transform:translateX(100%)}100%{transform:translateX(-100%)}}

.form{display:grid;gap:14px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
input,select,textarea{width:100%;padding:12px 14px;border:1px solid #e2e8f0;border-radius:12px;background:#fff}
input:focus,select:focus,textarea:focus{outline:2px solid rgba(239,35,60,.35);border-color:rgba(239,35,60,.35)}

.map{width:100%;height:320px;border:0;border-radius:16px;box-shadow:var(--shadow)}

.footer{padding:32px 0;background:#0f172a;color:#cbd5e1;text-align:center}

.modal{position:fixed;inset:0;background:rgba(15,23,42,.65);display:none;align-items:center;justify-content:center;padding:16px;z-index:50}
.modal[open],.modal.show{display:flex}
.modal-content{background:#fff;border-radius:16px;padding:22px;max-width:640px;box-shadow:var(--shadow);position:relative}
.modal-close{border:none;background:transparent;font-size:28px;line-height:1;position:absolute;top:8px;right:12px;cursor:pointer}

@media (max-width: 1024px){
  .grid{grid-template-columns:repeat(2,1fr)}
  .two-col{grid-template-columns:1fr}
  .counters{grid-template-columns:repeat(2,1fr)}
}
@media (max-width: 680px){
  .nav{display:none;position:absolute;top:64px;right:16px;left:16px;background:#fff;border-radius:14px;box-shadow:var(--shadow);flex-direction:column}
  .nav.open{display:flex}
  .hamburger{display:flex}
  .grid{grid-template-columns:1fr}
}


/* --- Products (Ürünlerimiz) --- */
.products-section { padding: 60px 0; }
.products-section h2 { text-align:center; margin-bottom: 24px; }
.products-grid { display:grid; grid-template-columns: repeat(4, 1fr); gap:16px; }
.products-grid .product-item { display:block; border-radius:12px; overflow:hidden; box-shadow: 0 6px 18px rgba(0,0,0,.08); transition: transform .2s ease; }
.products-grid .product-item:hover { transform: translateY(-3px); }
.products-grid img { width:100%; height:220px; object-fit:cover; display:block; }

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

/* Lightbox */
#lightboxOverlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.85);
  display: none; align-items: center; justify-content: center; z-index: 9999;
  padding: 20px;
}
#lightboxOverlay.show { display:flex; }
#lightboxImage { max-width: 95vw; max-height: 85vh; border-radius: 10px; }
#lightboxClose { position: absolute; top: 16px; right: 24px; font-size: 42px; color: #fff; cursor: pointer; line-height: 1; }

