:root{
  --bg:#ffffff;
  --text:#0b0b0b;
  --muted:#6b6b6b;
  --radius:18px;
  --radius2:26px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:"Manrope", system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial,sans-serif;
background:
    radial-gradient(900px 500px at 15% -10%, rgba(0,180,255, 0.10), transparent 60%),
    radial-gradient(900px 500px at 90% 0%, rgba(255,105,180, 0.10), transparent 55%),
    radial-gradient(900px 500px at 80% 110%, rgba(0,200,140, 0.10), transparent 55%),
    var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

.container{max-width:1200px;margin:0 auto;padding:0 16px}
a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}

/* ================= NAVBAR ================= */
.topbar{
  position:sticky;top:0;z-index:50;
  background:rgba(255,255,255, 0.85);
  backdrop-filter: blur(10px);
  border-bottom:1px solid rgba(0,0,0, 0.06);
}
.nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  min-height:64px;
}
.brand{
  display:flex;align-items:center;gap:10px;
  font-weight:900;
  white-space:nowrap;
}
.brand img{width:34px;height:34px;object-fit:contain}

/* Menü buton gibi */
.menu{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
  flex-wrap:wrap;
}
.menu-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px 14px;
  border-radius:999px;
  font-weight:900;
  border:1px solid rgba(0,0,0, 0.10);
  background:rgba(0,0,0, 0.04);
  transition:.2s ease;
  position:relative;
  overflow:hidden;
}
.menu-btn::before{
  content:"";
  position:absolute;
  inset:-40% -30%;
  background: linear-gradient(120deg, transparent 45%, rgba(255,255,255, 0.55), transparent 60%);
  transform: translateX(-40%);
  transition: transform .9s ease;
  pointer-events:none;
}
.menu-btn:hover{
  transform: translateY(-2px);
  box-shadow: 0 18px 40px rgba(0,0,0, 0.10);
}
.menu-btn:hover::before{ transform: translateX(40%); }

/* farklı renkler */
.menu-btn.cat{
  background: radial-gradient(300px 120px at 0% 0%, rgba(99,102,241, 0.18), transparent 60%), rgba(99,102,241, 0.08);
}
.menu-btn.why{
  background: radial-gradient(300px 120px at 0% 0%, rgba(34,197,94, 0.18), transparent 60%), rgba(34,197,94, 0.08);
}
.menu-btn.contact{
  background: radial-gradient(300px 120px at 0% 0%, rgba(236,72,153, 0.18), transparent 60%), rgba(236,72,153, 0.08);
}

/* ================= BUTTONS ================= */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:12px 18px;
  border-radius:999px;
  background:#000;
  color:#fff;
  font-weight:800;
  transition:.2s ease;
}
.btn:hover{transform:translateY(-1px)}
.btn.primary{
  background:#000;color:#fff;
  box-shadow:0 12px 30px rgba(0,0,0, 0.18);
}
.btn.ghost{
  background:rgba(255,255,255, 0.9);
  color:#000;
  border:1px solid rgba(0,0,0, 0.2);
  box-shadow:0 10px 24px rgba(0,0,0, 0.06);
}

/* ================= HOME BG ================= */
body.home{
  background:
    radial-gradient(1200px 600px at 10% -10%, rgba(0,0,0, 0.05), transparent 60%),
    radial-gradient(900px 500px at 90% 0%, rgba(0,0,0, 0.06), transparent 55%),
    linear-gradient(#fff, #fff);
}

/* ================= HERO ================= */
.hero{padding:72px 0}
.hero-grid{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:32px;
  align-items:center;
}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap}

.chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  border-radius:999px;
  background:rgba(0,0,0, 0.06);
  border:1px solid rgba(0,0,0, 0.08);
  font-weight:900;
  font-size:13px;
}

/* Hızlı bilgi: yuvarlak + parlak */
.hero-card{
  border-radius: var(--radius2);
  padding:24px;
  position:relative;
  overflow:hidden;
  border:1px solid rgba(0,0,0, 0.08);
  background:
    radial-gradient(900px 260px at 20% 0%, rgba(255, 214, 102, 0.30), transparent 60%),
    radial-gradient(800px 260px at 90% 10%, rgba(236,72,153, 0.18), transparent 55%),
    radial-gradient(900px 280px at 50% 120%, rgba(59,130,246, 0.14), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255, 0.96), rgba(255,255,255, 0.78));
  box-shadow: 0 22px 70px rgba(0,0,0, 0.12);
  backdrop-filter: blur(10px);
}
.hero-card::before{
  content:"";
  position:absolute;
  inset:-45% -35%;
  background: linear-gradient(120deg, transparent 42%, rgba(255,255,255, 0.60), transparent 60%);
  transform: translateX(-35%);
  transition: transform .9s ease;
  pointer-events:none;
}
.hero-card:hover::before{ transform: translateX(35%); }
.hero-card:hover{ box-shadow: 0 30px 90px rgba(0,0,0, 0.14); }

.bullets{display:grid; gap:10px}
.dot{
  width:10px;height:10px;border-radius:999px;
  background:#000;
  display:inline-block;
  margin-right:10px;
}
.bullets > div{
  display:flex;
  align-items:flex-start;
  gap:10px;
  color:rgba(0,0,0, 0.72);
}

/* ================= SECTIONS: ayrı kutular + boşluk ================= */
.section-pad{padding:18px 0}
.section-box{
  border-radius: var(--radius2);
  border:1px solid rgba(0,0,0, 0.08);
  box-shadow: 0 18px 60px rgba(0,0,0, 0.10);
  padding:26px;
  position:relative;
  overflow:hidden;
}
.section-box::before{
  content:"";
  position:absolute;
  inset:-45% -35%;
  background: linear-gradient(120deg, transparent 45%, rgba(255,255,255, 0.40), transparent 60%);
  transform: translateX(-40%);
  transition: transform .9s ease;
  pointer-events:none;
}
.section-box:hover::before{ transform: translateX(40%); }
.section-box:hover{ box-shadow: 0 28px 90px rgba(0,0,0, 0.14); }

.section-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:16px;
  margin-bottom:18px;
}
.section-head h2{margin:0;font-size:30px;letter-spacing:-.02em}
.section-head p{margin:6px 0 0;color:var(--muted)}

/* Kutulara farklı renk temaları */
.box-cats{
  background:
    radial-gradient(900px 280px at 0% 0%, rgba(99,102,241, 0.14), transparent 60%),
    radial-gradient(900px 280px at 100% 0%, rgba(236,72,153, 0.10), transparent 60%),
    linear-gradient(180deg, #ffffff, #fbfbff);
}
.box-why{
  background:
    radial-gradient(900px 280px at 0% 0%, rgba(34,197,94, 0.14), transparent 60%),
    radial-gradient(900px 280px at 100% 0%, rgba(59,130,246, 0.10), transparent 60%),
    linear-gradient(180deg, #ffffff, #fbfffd);
}
.box-social{
  background:
    radial-gradient(900px 280px at 0% 0%, rgba(236,72,153, 0.12), transparent 60%),
    radial-gradient(900px 280px at 100% 0%, rgba(34,197,94, 0.10), transparent 60%),
    linear-gradient(180deg, #ffffff, #fffafb);
}
.box-map{
  background:
    radial-gradient(900px 280px at 0% 0%, rgba(59,130,246, 0.12), transparent 60%),
    radial-gradient(900px 280px at 100% 0%, rgba(255,214,102, 0.10), transparent 60%),
    linear-gradient(180deg, #ffffff, #fbfbfb);
}

/* Grid & cards */
.grid{display:grid; gap:24px}
.cols-3{grid-template-columns:repeat(3,1fr)}
.cols-2{grid-template-columns:repeat(2,1fr)}

.card{
  background:rgba(255,255,255, 0.85);
  border-radius: calc(var(--radius) + 6px);
  border:1px solid rgba(0,0,0, 0.08);
  box-shadow:0 10px 24px rgba(0,0,0, 0.06);
  padding:22px;
}

/* Kategori kartı hover: kabar + renklensin */
.k-card{
  padding:0;
  overflow:hidden;
  position:relative;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease, filter .22s ease;
}
.k-card::after{
  content:"";
  position:absolute;
  inset:0;
  opacity:0;
  transition: opacity .22s ease;
  pointer-events:none;
  background:
    radial-gradient(900px 260px at 20% 0%, rgba(99,102,241, 0.16), transparent 60%),
    radial-gradient(800px 240px at 90% 10%, rgba(236,72,153, 0.14), transparent 58%);
}
.k-card:hover{
  transform: translateY(-10px) scale(1.02);
  box-shadow: 0 26px 80px rgba(0,0,0, 0.16);
  border-color: rgba(0,0,0, 0.14);
  filter: saturate(1.12);
}
.k-card:hover::after{opacity:1;}

.thumb{
  height:150px;
  background:
    radial-gradient(400px 200px at 30% 20%, rgba(0,0,0, 0.06), transparent 60%),
    linear-gradient(180deg, rgba(0,0,0, 0.04), transparent);
}
.k-body{padding:18px}
.k-title{margin:0;font-weight:950;font-size:18px}
.k-desc{margin:8px 0 12px;color:rgba(0,0,0, 0.68);font-size:14px}
.k-link{font-weight:950}

/* Neden Biz kartları renkli (3 farklı ton) */
#neden .hover-card{
  position:relative;
  overflow:hidden;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease, filter .25s ease;
}
#neden .hover-card:nth-child(1){
  background: radial-gradient(700px 220px at 0% 0%, rgba(34,197,94, 0.20), transparent 60%),
              linear-gradient(180deg, #ffffff, #fbfffd);
}
#neden .hover-card:nth-child(2){
  background: radial-gradient(700px 220px at 0% 0%, rgba(59,130,246, 0.20), transparent 60%),
              linear-gradient(180deg, #ffffff, #fbfdff);
}
#neden .hover-card:nth-child(3){
  background: radial-gradient(700px 220px at 0% 0%, rgba(236,72,153, 0.20), transparent 60%),
              linear-gradient(180deg, #ffffff, #fffbfd);
}
#neden .hover-card:hover{
  transform: translateY(-8px);
  box-shadow: 0 22px 60px rgba(0,0,0, 0.12);
  border-color: rgba(0,0,0, 0.14);
  filter: saturate(1.12);
}

/* Sosyal strip */
.contact-strip{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  padding:20px;
  border-radius: var(--radius2);
  border:1px solid rgba(0,0,0, 0.08);
  background: rgba(255,255,255, 0.65);
}
.strip-left h3{margin:0 0 6px; font-weight:950}
.strip-left p{margin:0; color:rgba(0,0,0, 0.65)}
.strip-tags{margin-top:12px; display:flex; flex-wrap:wrap; gap:8px}
.tag{
  display:inline-flex;
  align-items:center;
  padding:7px 10px;
  border-radius:999px;
  border:1px solid rgba(0,0,0, 0.10);
  background:rgba(255,255,255, 0.75);
  font-weight:800;
  font-size:12px;
}
.contact-actions{display:flex; gap:10px; flex-wrap:wrap}

/* Sosyal butonlar: ikon + renk + efekt */
.btn.social{
  gap:10px;
  padding:12px 16px;
  border:1px solid rgba(255,255,255, 0.20);
  box-shadow: 0 16px 44px rgba(0,0,0, 0.16);
  position:relative;
  overflow:hidden;
}
.btn.social::before{
  content:"";
  position:absolute;
  inset:-40% -30%;
  background: linear-gradient(120deg, transparent 40%, rgba(255,255,255, 0.55), transparent 60%);
  transform: translateX(-40%);
  transition: transform .9s ease;
  pointer-events:none;
}
.btn.social::after{
  content:"";
  position:absolute;
  inset:0;
  opacity:0;
  transition: opacity .25s ease;
  pointer-events:none;
  background: radial-gradient(600px 180px at 30% 10%, rgba(255,255,255, 0.35), transparent 60%);
}
.btn.social:hover{
  transform: translateY(-4px) scale(1.01);
  box-shadow: 0 26px 80px rgba(0,0,0, 0.20);
}
.btn.social:hover::before{ transform: translateX(40%); }
.btn.social:hover::after{ opacity:1; }

.btn .ico{width:18px;height:18px;display:inline-block;flex:0 0 18px}
.btn .ico svg{width:18px;height:18px;display:block;fill:currentColor}

.btn.whatsapp{background: linear-gradient(180deg, #22c55e, #16a34a); color:#fff;}
.btn.facebook{background: linear-gradient(180deg, #3b82f6, #2563eb); color:#fff;}
.btn.instagram{background: linear-gradient(135deg, #ff4d8d, #a855f7); color:#fff;}

/* Harita kartı */
.map-wrap{margin-top:0;border-radius:var(--radius2);overflow:hidden}
.map-card{
  border-radius: var(--radius2);
  border:1px solid rgba(0,0,0, 0.10);
  box-shadow: 0 18px 60px rgba(0,0,0, 0.10);
  overflow:hidden;
  position:relative;
  background:#fff;
  transition: transform .25s ease, box-shadow .25s ease;
}
.map-card:hover{
  transform: translateY(-6px);
  box-shadow: 0 28px 90px rgba(0,0,0, 0.14);
}
.map-top{
  position:absolute;
  left:14px; top:14px; right:14px;
  z-index:3;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  pointer-events:none;
}
.map-badge{
  padding:8px 10px;
  border-radius:999px;
  background:rgba(255,255,255, 0.86);
  border:1px solid rgba(0,0,0, 0.10);
  font-weight:950;
  box-shadow: 0 10px 24px rgba(0,0,0, 0.10);
}
.map-hint{
  padding:8px 10px;
  border-radius:999px;
  background:rgba(0,0,0, 0.38);
  border:1px solid rgba(255,255,255, 0.22);
  color:#fff;
  font-weight:800;
  font-size:12px;
  box-shadow: 0 10px 24px rgba(0,0,0, 0.14);
}
.map-wrap iframe{
  width:100%;
  height:360px;
  border:0;
  filter: saturate(1.08) contrast(1.03);
  transition: transform .6s ease, filter .6s ease;
}
.map-card:hover iframe{transform:scale(1.01); filter:saturate(1.15) contrast(1.05);}

/* İletişim bilgi kartı */
.info-card{
  border-radius: var(--radius2);
  border:1px solid rgba(0,0,0, 0.10);
  background:
    radial-gradient(900px 300px at 0% 0%, rgba(236,72,153, 0.12), transparent 55%),
    radial-gradient(900px 300px at 100% 0%, rgba(59,130,246, 0.12), transparent 55%),
    linear-gradient(180deg, #ffffff, #fbfbfb);
  box-shadow: 0 18px 60px rgba(0,0,0, 0.10);
  transition: transform .25s ease, box-shadow .25s ease;
}
.info-card:hover{transform:translateY(-6px); box-shadow:0 28px 90px rgba(0,0,0, 0.14);}

.info-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px}
.info-title{margin:0;font-weight:950;font-size:16px}
.info-list{display:grid;gap:10px;margin-bottom:16px}
.info-row{
  display:flex;align-items:flex-start;gap:10px;
  padding:10px 12px;border-radius:16px;
  border:1px solid rgba(0,0,0, 0.08);
  background:rgba(255,255,255, 0.78);
}
.info-ico{width:22px;text-align:center}
.info-actions{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.info-note{
  font-size:12px;color:rgba(0,0,0, 0.62);
  padding:10px 12px;border-radius:16px;
  border:1px dashed rgba(0,0,0, 0.12);
  background:rgba(255,255,255, 0.70);
}

/* ================= SCROLL REVEAL ================= */
.reveal{ opacity:1; transform:none; filter:none; }
.js .reveal{
  opacity:0;
  transform: translateY(18px);
  transition: opacity .7s ease, transform .7s ease;
  will-change: transform, opacity;
}
.js .reveal.is-visible{
  opacity:1;
  transform: translateY(0);
}


/* ================= RESPONSIVE ================= */
@media (max-width: 900px){
  .hero-grid{grid-template-columns:1fr}
  .cols-3{grid-template-columns:1fr}
  .cols-2{grid-template-columns:1fr}
  .map-wrap iframe{height:320px}
  .model-content{grid-template-columns:1fr;gap:18px}

}

/* ================= REDUCE MOTION ================= */
@media (prefers-reduced-motion: reduce){
  *{transition:none !important;animation:none !important;}
  .reveal{opacity:1; transform:none; filter:none}
}

/* ================= MODEL CARD HOVER (ürün kartları) ================= */
.model-container{
  background: rgba(255,255,255, 0.78);
  border: 1px solid rgba(0,0,0, 0.08);
  border-radius: calc(var(--radius) + 6px);
  padding: 22px;

  width: min(1100px, 100% - 32px);
  position: relative;
  overflow: hidden;
  box-shadow: 0 10px 24px rgba(0,0,0, 0.06);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease, filter .22s ease;
}
.model-container:hover{
  transform: translateY(-6px);
  box-shadow: 0 22px 60px rgba(0,0,0, 0.12);
  border-color: rgba(0,0,0, 0.14);
  filter: saturate(1.06);
}
.product-figure{
  margin: 0;
  border-radius: var(--radius);
  overflow: hidden;
}
.product-figure:hover .product-image{
  transform: scale(1.03);
}

/* ================= PRODUCT PAGES (mevcut sayfalar bozulmasın) ================= */
.model-container{margin:48px auto 72px}
.model-header h1{margin:0 0 12px}
.model-content{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:40px;
  align-items:flex-start;
}
.product-image{
  border-radius:var(--radius);
  box-shadow:0 16px 40px rgba(0,0,0, 0.12);
  transition:opacity .25s ease, transform .25s ease;
}
.product-image.is-fading{opacity:.2;transform:scale(.98)}
.sales-code{font-size:20px;font-weight:900;margin:0 0 10px}
.option-title{font-weight:900;margin:14px 0 10px}
.color-row, .print-row{display:flex;gap:10px;flex-wrap:wrap}
.color-chip, .print-chip{
  padding:10px 14px;border-radius:999px;
  border:1px solid rgba(0,0,0, 0.22);
  background:#fff;cursor:pointer;font-weight:700;
  transition:transform .12s ease, box-shadow .12s ease, background-color .12s ease;
}
.color-chip:hover, .print-chip:hover{
  transform:translateY(-1px);
  box-shadow:0 10px 18px rgba(0,0,0, 0.08);
}
.color-chip.active, .print-chip.active{
  background:#000;color:#fff;border-color:#000;
  box-shadow:0 10px 18px rgba(0,0,0, 0.10);
}
.product-details{margin-top:16px;line-height:1.65;color:rgba(0,0,0, 0.75)}
.product-details p{margin:0 0 6px}
.product-details p:last-child{margin-bottom:0}

.footer{
  padding:28px 0;
  border-top:1px solid rgba(0,0,0, 0.08);
  color:var(--muted);
  text-align:center;
}

/* ================= MODEL KART EFEKT + RENK ================= */
.model-container::before{
  content:"";
  position:absolute;
  inset:-40px;
  background: linear-gradient(120deg,
    rgba(255, 105, 180, 0.28),
    rgba(0, 180, 255, 0.24),
    rgba(0, 200, 140, 0.22)
  );
  filter: blur(22px);
  opacity: .65;
  z-index: 0;
  pointer-events:none;
}
.model-container > *{position:relative; z-index:1;}

.model-container:hover{
  transform: translateY(-4px);
  box-shadow: 0 18px 46px rgba(0,0,0, 0.10);
  border-color: rgba(0,0,0, 0.14);
  filter: saturate(1.05);
}

.model-container:hover .product-image{
  transform: scale(1.015);
}

/* --- Dropdown (Kategoriler) --- */
.dropdown{ position:relative; display:inline-block; }
.dropdown-toggle{ display:inline-flex; align-items:center; gap:.4rem; cursor:pointer; }
.caret{ font-size:.9em; opacity:.8; }
.dropdown-menu{
  position:absolute;
  top: calc(100% + 10px);
  left: 0;
  min-width: 260px;
  padding: 10px;
  background: rgba(255,255,255,0.86);
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 14px;
  box-shadow: 0 18px 50px rgba(0,0,0,0.14);
  backdrop-filter: blur(10px);
  display:none;
  z-index: 50;
}
.dropdown.open .dropdown-menu{ display:block; }
.dropdown-menu a{
  display:block;
  padding: 10px 10px;
  border-radius: 12px;
  color: var(--text);
  text-decoration:none;
}
.dropdown-menu a:hover{ background: rgba(0,0,0,0.06); }
.dropdown-menu a.sub{ padding-left: 18px; font-size: .95rem; opacity: .9; }
.dd-sep{ height:1px; background: rgba(0,0,0,0.08); margin: 6px 6px; }

/* --- Ana sayfa arama butonu --- */
.search-btn{
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,0.10);
  background: rgba(255,255,255,0.55);
  cursor:pointer;
  font-weight: 700;
}
.search-btn:hover{ background: rgba(255,255,255,0.8); }

/* --- Grup seçimi --- */
.page-head{ padding: 34px 0 10px; }
.page-title{ margin: 0 0 6px; font-size: 34px; letter-spacing: -0.02em; }
.page-sub{ margin: 0 0 16px; color: var(--muted); }
.group-grid{
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
@media (max-width: 980px){ .group-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px){ .group-grid{ grid-template-columns: 1fr; } }

.group-card{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  padding: 14px 16px;
  border-radius: 18px;
  text-decoration:none;
  color: var(--text);
  background: rgba(255,255,255,0.60);
  border: 1px solid rgba(0,0,0,0.08);
  box-shadow: 0 18px 55px rgba(0,0,0,0.06);
}
.group-card:hover{ transform: translateY(-1px); }
.group-title{ font-weight: 800; }
.group-go{ color: var(--muted); font-weight: 700; }

.group-section{ padding: 22px 0 10px; }
.group-header{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap: 12px;
  margin-bottom: 8px;
}
.back-top{
  text-decoration:none;
  color: var(--muted);
  font-weight: 700;
}
.back-top:hover{ text-decoration: underline; }

/* --- Renk noktası --- */
.color-chip{ display:inline-flex; align-items:center; gap: 8px; }
.note{ color: var(--muted); margin-top: 10px; }


.product-figure {
  aspect-ratio: 4 / 5;
  overflow: hidden;
}
.product-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}


/* Arama ile bulunan ürünü vurgulama */
.flash-focus{
  outline: 2px solid rgba(255,255,255,0.9);
  box-shadow: 0 0 0 6px rgba(255,255,255,0.18);
  transform: translateY(-2px);
}


/* ================= PREMIUM UPGRADE (2026) ================= */
:root{
  --accent:#2563eb;
  --accent2:#ec4899;
  --accent3:#10b981;

  --shadow-sm: 0 10px 24px rgba(0,0,0,.06);
  --shadow-md: 0 22px 60px rgba(0,0,0,.12);
  --shadow-lg: 0 32px 90px rgba(0,0,0,.16);

  --glass: rgba(255,255,255,.68);
  --glass-strong: rgba(255,255,255,.80);
  --stroke: rgba(0,0,0,.08);
  --stroke-strong: rgba(0,0,0,.12);

  --ease-out: cubic-bezier(.16, 1, .3, 1);
}

/* Typography boost */
body{
  font-family: "Manrope", system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, "Helvetica Neue", Arial, sans-serif;
  letter-spacing: -0.01em;
  background: var(--bg);
}
h1,h2,h3{
  letter-spacing: -0.03em;
}
h1{font-size: clamp(34px, 3.6vw, 56px); line-height: 1.05}
h2{font-size: clamp(26px, 2.4vw, 38px); line-height: 1.15}
p{font-size: 16.5px; line-height: 1.75; color: rgba(0,0,0,.74)}

/* Ultra subtle animated background blobs */
body::before{
  content:"";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(900px 620px at 12% 8%, rgba(37,99,235,.11), transparent 60%),
    radial-gradient(900px 620px at 92% 12%, rgba(236,72,153,.10), transparent 58%),
    radial-gradient(900px 620px at 70% 96%, rgba(16,185,129,.09), transparent 56%);
  /* Performance: removed blur + animation (very expensive on page load & scroll) */
  opacity: .65;
}
100% { transform: translate3d( 1.2%,  0.9%, 0) scale(1.06); }
}

/* Smooth page transitions (safe: only when JS enables .fx) */
body{opacity: 1; transform: none;}
body.fx{opacity: 0; transform: translateY(8px); transition: opacity .45s var(--ease-out), transform .45s var(--ease-out);}
body.fx.is-ready{opacity: 1; transform: translateY(0);}
body.fx.is-leaving{opacity: 0; transform: translateY(10px); transition-duration: .22s;}

/* Stronger glass menu */
.topbar{
  background: rgba(255,255,255,.72);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-bottom: 1px solid rgba(0,0,0,.06);
}
.topbar::after{
  content:"";
  position:absolute; left:0; right:0; top:0;
  height:1px;
  background: linear-gradient(90deg, transparent, rgba(37,99,235,.35), rgba(236,72,153,.30), transparent);
  opacity:.55;
}
.topbar.scrolled{
  background: rgba(255,255,255,.82);
  box-shadow: 0 12px 30px rgba(0,0,0,.08);
}

/* Menu micro interactions */
.menu-btn{
  position: relative;
  transition: transform .18s var(--ease-out), background-color .18s var(--ease-out), color .18s var(--ease-out);
}
.menu-btn:hover{ transform: translateY(-1px); }
.menu-btn::after{
  content:"";
  position:absolute; left:12px; right:12px; bottom:10px;
  height:2px;
  border-radius:999px;
  background: linear-gradient(90deg, rgba(37,99,235,.9), rgba(236,72,153,.85));
  transform: scaleX(0);
  transform-origin:left;
  transition: transform .22s var(--ease-out);
  opacity:.85;
}
.menu-btn:hover::after{ transform: scaleX(1); }

/* Dropdown animation + glass */
.dropdown-menu{
  transform-origin: top right;
  transform: translateY(10px) scale(.98);
  opacity: 0;
  transition: opacity .18s var(--ease-out), transform .18s var(--ease-out);
  background: rgba(255,255,255,.78);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(0,0,0,.10);
  box-shadow: 0 22px 60px rgba(0,0,0,.12);
}
.dropdown.open .dropdown-menu{
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* Buttons: more premium */
.btn{
  transition: transform .18s var(--ease-out), box-shadow .18s var(--ease-out), background-color .18s var(--ease-out);
  will-change: transform;
}
.btn:hover{ transform: translateY(-2px); box-shadow: 0 16px 40px rgba(0,0,0,.12); }
.btn:active{ transform: translateY(0); }
.btn.primary{
  background: linear-gradient(135deg, rgba(37,99,235,1), rgba(236,72,153,1));
  border-color: transparent;
}
.btn.primary:hover{
  box-shadow: 0 22px 60px rgba(37,99,235,.18), 0 22px 60px rgba(236,72,153,.12);
}

/* Hero strengthen */
.hero{
  position: relative;
  overflow: clip;
}
.hero::before{
  content:"";
  position:absolute;
  inset:-12% -10% auto -10%;
  height: 460px;
  background:
    radial-gradient(700px 380px at 25% 25%, rgba(37,99,235,.18), transparent 60%),
    radial-gradient(700px 380px at 78% 35%, rgba(236,72,153,.14), transparent 58%);
  filter: blur(18px);
  opacity: .85;
  transform: translateZ(0);
  pointer-events:none;
}
.hero h1{
  text-shadow: 0 18px 50px rgba(0,0,0,.08);
}
.chip{
  background: rgba(255,255,255,.64);
  border: 1px solid rgba(0,0,0,.08);
  backdrop-filter: blur(12px);
}

/* Section soft separators */
.section-pad{
  position: relative;
}
.section-pad::before{
  content:"";
  position:absolute;
  left: 0; right: 0;
  top: -1px;
  height: 36px;
  background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,.85));
  pointer-events:none;
}
.section-pad::after{
  content:"";
  position:absolute;
  left: 0; right: 0;
  bottom: -1px;
  height: 46px;
  background: linear-gradient(to top, rgba(255,255,255,0), rgba(255,255,255,.85));
  pointer-events:none;
  opacity: .55;
}

/* Product cards: more modern + subtle shine */
.model-container{
  background: rgba(255,255,255,.70);
  border: 1px solid rgba(0,0,0,.10);
  box-shadow: var(--shadow-sm);
}
.model-container::before{
  content:"";
  position:absolute; inset:-40%;
  background: linear-gradient(120deg, transparent 40%, rgba(255,255,255,.45) 50%, transparent 60%);
  transform: translateX(-30%) rotate(8deg);
  opacity: 0;
  transition: opacity .22s var(--ease-out), transform .45s var(--ease-out);
  pointer-events:none;
}
.model-container:hover::before{
  opacity: .55;
  transform: translateX(18%) rotate(8deg);
}
.model-container:hover{
  transform: translateY(-8px);
  box-shadow: var(--shadow-md);
}

/* Chips feel nicer */
.color-chip, .print-chip{
  border: 1px solid rgba(0,0,0,.16);
  background: rgba(255,255,255,.88);
  backdrop-filter: blur(10px);
}
.color-chip:hover, .print-chip:hover{ transform: translateY(-2px); }
.color-chip.active, .print-chip.active{
  background: linear-gradient(135deg, rgba(37,99,235,1), rgba(236,72,153,1));
  border-color: transparent;
}

/* Reduced motion accessibility */
@media (prefers-reduced-motion: reduce){
  body, body::before, .reveal, .btn, .model-container, .dropdown-menu{
    animation: none !important;
    transition: none !important;
  }
}

.dropdown.open .dropdown-menu{display:block;}

/* ========== Performans Modu (ağır efektleri kapat) ========== */
@media (max-width: 900px), (prefers-reduced-motion: reduce) {
  body::before{
  content:"";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(900px 620px at 12% 8%, rgba(37,99,235,.11), transparent 60%),
    radial-gradient(900px 620px at 92% 12%, rgba(236,72,153,.10), transparent 58%),
    radial-gradient(900px 620px at 70% 96%, rgba(16,185,129,.09), transparent 56%);
  /* Performance: removed blur + animation (very expensive on page load & scroll) */
  opacity: .65;
}
}