/* ========== TEMEL ========== */
img, video { max-width: 100%; height: auto; }

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font: 16px/1.6 "Nunito", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: #1a2234;
  background: #fff;            /* sayfa genel zemini sade */
    --menubar: #E04D57;   /* R224 G77 B87 */
}

.wrap { width: min(1180px, 92%); margin-inline: auto; }

/* ========== HEADER (üst bar + pastel menü şeridi) ========== */
:root{
  --ink: #1a2234;
  --muted: #5f6983;
  --brand-grad: linear-gradient(90deg,#ffb7c5 0%, #ffd7b8 35%, #d5ffe3 68%, #bfe9ff 100%);
}

.lumi-header{
  position: sticky; top: 0; z-index: 1000;
  backdrop-filter: saturate(1.1) blur(6px);
  background: rgba(255,255,255,.75);
  box-shadow: 0 1px 0 rgba(25,35,52,.06);
}

/* Üst bar */
.lumi-header .topbar{
  max-width: 1200px; margin-inline: auto;
  height: 72px;
  display: grid; grid-template-columns: 1fr auto;
  align-items: center; gap: 16px;
  padding: 0 20px;
}

.brand{ text-decoration: none; color: var(--ink); }
.brand-line{ display: flex; align-items: baseline; gap: 12px; }
.lumi-word{ font: 800 28px/1 "Inter", system-ui; letter-spacing: .08em; }
.lumi-word span:nth-child(1){ color: #7bc8d0; }
.lumi-word span:nth-child(2){ color: #ff0; }
.lumi-word span:nth-child(3){ color:#E04D57; }
.lumi-word span:nth-child(4){ color:green; }
.brand-sub{ color: var(--muted); font: 600 14px/1.2 "Inter", system-ui; opacity:.9; }

/* ========== RETRO SOSYAL MEDYA STİLİ ========== */
/* Sosyal medya ikonları yan yana dizilir */
.socials {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

/* İkon kutusu – retro görünüm */
.socials .ico {
  --size: 40px;
  width: var(--size);
  height: var(--size);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  border: 2px solid #000;
  box-shadow: 3px 3px 0 #000;
  background: #fff; /* PNG’lerin şeffaf alanları beyaz görünsün */
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* Hover: retro zıplama efekti */
.socials .ico:hover {
  transform: translate(-2px, -2px);
  box-shadow: 5px 5px 0 #000;
}

/* PNG’lerin boyutu */
.socials .ico img {
  width: 24px;
  height: 24px;
  object-fit: contain;
}

/* ========== RETRO MENUBAR ========== */
.lumi-header .menubar{
  height: 1cm;
  background: var(--menubar);         /* gradient kaldırıldı */
  box-shadow: inset 0 -1px 0 rgba(0,0,0,.08);
}

.lumi-header .menubar ul{
  max-width: 1200px; height: 100%;
  margin: 0 auto; padding: 0 18px;
  display: flex; align-items: center; gap: 28px;
  list-style: none;
}

/* Menüler koyu zeminde okunaklı olsun diye beyaza çekildi */
.lumi-header .menubar a{
  display: inline-block; text-decoration: none;
  color: #fff;                          /* #2b2d42 yerine beyaz */
  font: 700 14px/1 "Inter", system-ui;
  letter-spacing: .02em; padding: 8px 10px;
  border-radius: 8px;
  opacity: .95;
  transition: background .18s ease, transform .18s ease;
}

/* Hover/active için sadece saydam beyaz */
.lumi-header .menubar a:hover{
  background: rgba(255,255,255,.16);
  transform: translateY(-1px);
}
.lumi-header .menubar .is-active{
  background: rgba(255,255,255,.28);
}
/* ========== BÖLÜM STANDARDI (5 bölüm – 5 arkaplan) ========== */
section{
  position: relative;
  /* Tüm ekranı kaplasın */
  min-height: 110vh;

  /* İçerik hizası */
  display: flex;
  align-items: center;

  /* İçerik nefesi: üstte header 72px; altta makul boşluk */
  padding: calc(72px + 16px) 0 24px;

  /* Arka plan: TAM SĞMAK için contain */
  background-position: center top;    /* üstten hizala; kompozisyon bozulmasın */
  background-repeat: no-repeat;
  /*background-size: contain;*/           /* KIRPMA YOK: görselin tamamı görünür */
  background-attachment: scroll;
}

/* İsteğe bağlı: çok dar ekranlarda taşma olmasın diye içeriği biraz daralt */
.wrap { width: min(1180px, 92%); margin-inline: auto; }


/* 1) HERO → web1.jpg */
#hero{
  background-image: url("../image/web1.jpg");
  background-color: #f7f1f5;
}

/* 2) FEATURES → web2.jpg */
#features{
  background-image: url("../image/web2.jpg");
  background-color: #ffffff;
}

/* 3) ACCESSORIES → web3.jpg */
#accessories{
  background-image: url("../image/web3.jpg");
  background-color: #f6f3ff;
}

/* 4) PRODUCTS → web4.jpg */
#products{
  background-image: url("../image/web4.jpg");
  background-color: #ffffff;
}

/* 5) CONTACT → web5.jpg */
#contact{
  background-image: url("../image/web5.jpg");
  background-color: #f9f9ff;
}

/* ===== HERO RETRO BAŞLIK ===== */
.hero-title{
  font-family: "Luckiest Guy", "Baloo 2", "Poppins", system-ui, sans-serif; /* retro çizgi/oyun tadı */
  font-weight: 400;                 /* Luckiest Guy tek ağırlık */
  font-size: clamp(2.4rem, 4.6vw, 3.4rem);
  line-height: .95;
  color: #222;
  letter-spacing: .5px;
  text-shadow: 2px 2px 0 #000;      /* kalın siyah kontur */
  margin: 0 0 .5rem;
}
.hero-title span{
  color: #fab905;
  text-shadow: 2px 2px 0 #000;
}

/* ===== HERO RETRO BUTON TEMEL ===== */
.btn-retro{
  --btn-bg: #ffd39e;                /* default pastel */
  --btn-ink: #111;
  display:inline-flex; align-items:center; gap:8px;
  padding: 12px 18px;
  border-radius: 12px;
  background: var(--btn-bg);
  color: var(--btn-ink);
  border: 2px solid #000;           /* kalın siyah çerçeve */
  box-shadow: 4px 4px 0 #000;       /* pikselimsi retro gölge */
  text-decoration: none;
  font: 700 15px/1 "Nunito", system-ui;
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.btn-retro svg{ color: currentColor; }

.btn-retro:hover{
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 #000;
  filter: saturate(1.05);
}
.btn-retro:active{
  transform: translate(0,0);
  box-shadow: 2px 2px 0 #000;
}

/* VARYANTLAR (retro palet) */
.learn-btn{
  --btn-bg: linear-gradient(135deg,#FFB7C5 0%, #FF92A3 100%); /* pembe şerit */
  --btn-ink: #fff;
}
.shop-btn{
  --btn-bg: linear-gradient(135deg,#6DB9FF 0%, #3F72FF 100%); /* mavi şerit */
  --btn-ink: #fff;
}

/* ==== HERO grid: metin + video ==== */
.hero-inner{
  display: grid;
  grid-template-columns: 1.05fr .95fr;   /* sol metin, sağ video */
  align-items: center;
  gap: 2rem;
}

/* Sağ kolon hizası */
.hero-media{ display:flex; justify-content:flex-end; }

/* ==== Retro video kartı ==== */
.hero-video{
  width: min(560px, 92%);
  aspect-ratio: 16/9;          /* sabit çerçeve oranı */
  display: block;
  background: #000;            /* yüklenmeden önce siyah zemin */
  object-fit: cover;           /* çerçeveyi doldursun; istersen 'contain' yap */
  border-radius: 18px;
  /* Sticker/retro çerçeve */
  border: 3px solid #000;                    /* kalın siyah kontur */
  outline: 8px solid #E04D57;                   /* beyaz sticker kenarı */
  box-shadow: 8px 8px 0 #000, 0 16px 40px rgba(0,0,0,.22);
  transition: transform .18s ease, box-shadow .18s ease;
}

/* Hover’da hafif “zıplama” */
.hero-video:hover{
  transform: translate(-3px, -3px) rotate(-0.3deg);
  box-shadow: 12px 12px 0 #000, 0 22px 60px rgba(0,0,0,.28);
}

/* ==== FEATURES – genişlik, aralıklar ==== */
.features-wrap{
  max-width: 1280px;           /* 1100 → 1280: boş alan azalsın */
  margin: 0 auto;
  padding: 0 20px;
}
.features-title{
  font-family:"Luckiest Guy","Baloo 2","Poppins",system-ui,sans-serif;
  font-weight:400;
  letter-spacing:.5px;
  color:#222;
  /* text-shadow:2px 2px 0 #000; */
  font-size:clamp(30px,3.4vw,40px);  /* daha büyük başlık */
  margin: 6px 0 30px;
}
.features-grid{
  display:grid;
  grid-template-columns: 1.15fr 0.9fr 1.15fr; /* sol/sağ kolonlar genişledi */
  grid-template-rows: repeat(3,auto);
  gap: 30px 36px;                /* aralıklar dengeli */
  align-items:center;
}

/* ==== Orta görsel büyüsün ==== */
.feature-center{ grid-column:2/3; grid-row:1/4; display:flex; align-items:center; justify-content:center; }
.feature-center img{
  width: min(440px, 96%);        /* 340 → 440 */
  aspect-ratio: 1/1; object-fit: contain;
  border-radius: 20px;
  border: 3px solid #000;
  outline: 10px solid #fff;
  box-shadow: 10px 10px 0 #000, 0 22px 48px rgba(0,0,0,.18);
  background:#fff; padding:16px;
}

/* ==== Kart – daha büyük, okunaklı ==== */
.feature{
  --card:#fff; --ink:#222;
  background: var(--card); color: var(--ink);
  border-radius: 18px;
  border: 3px solid #000;
  outline: 10px solid #fff;                 /* sticker kenarı biraz daha kalın */
  box-shadow: 10px 10px 0 #000;
  padding: 20px 22px;                       /* 16 → 20 */
  display:grid; grid-template-columns: 56px 1fr; /* ikon alanı büyüdü */
  align-items:start; gap: 12px 16px;
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.feature:hover{ transform: translate(-3px,-3px) rotate(-0.4deg); box-shadow: 14px 14px 0 #000; filter:saturate(1.05); }

/* ikon kapsülü */
.feature .ico{
  width:56px; height:56px; font-size:28px;   /* 44 → 56 */
  display:grid; place-items:center;
  background:#fff; color:#111;
  border-radius:12px; border:3px solid #000; box-shadow:4px 4px 0 #000;
}

/* başlık + metin okunurluk */
.feature h3{
  margin:0;
  font: 400 22px/1 "Luckiest Guy","Inter",system-ui; /* 16 → 22 */
  color:#222; 
  /* text-shadow:2px 2px 0 #000; */
}
.feature p{
  grid-column:1/-1;
  margin:8px 0 0;
  font: 600 16px/1.55 "Nunito",system-ui;    /* 14 → 16 ve daha koyu */
  color:#1f2633;                              /* daha yüksek kontrast */
  max-width: 46ch;
}

/* Palet – aynı ama geniş kartlara uygun */
.features-grid > .feature:nth-of-type(1){ --card:#FFE4ED; }
.features-grid > .feature:nth-of-type(2){ --card:#DFF7F0; }
.features-grid > .feature:nth-of-type(3){ --card:#FFF1D7; }
.features-grid > .feature:nth-of-type(4){ --card:#E9E1FF; }
.features-grid > .feature:nth-of-type(5){ --card:#FFF8C9; }
.features-grid > .feature:nth-of-type(6){ --card:#E2F1FF; }


/* ========== AKSESUAR IZGARASI (Retro) ========== */
.accessories { padding: 2.2rem 0 3rem; }
.acc-title { font: 800 clamp(26px,4vw,34px)/1 "Luckiest Guy",cursive; margin:0 0 16px; }

.acc-grid{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(4,1fr); gap:18px;
}

/* Kart */
.acc-card{
  display:flex; flex-direction:column; align-items:center; gap:10px;
  background:#fff; border:4px solid #000; border-radius:18px; padding:12px;
  box-shadow:10px 10px 0 #000;
  transition: transform .15s ease, box-shadow .15s ease;
}
.acc-card:hover{ transform: translate(-3px, -3px); box-shadow:14px 14px 0 #000; }

/* Görsel alanı (kare) */
.acc-media{
  width:100%; aspect-ratio:1/1;
  display:grid; place-items:center;
  background:
    linear-gradient(90deg, rgba(0,0,0,.045) 1px, transparent 1px) 0 0/28px 28px,
    linear-gradient(0deg,  rgba(0,0,0,.045) 1px, transparent 1px) 0 0/28px 28px,
    #fff;
  border:3px solid #000; border-radius:14px; overflow:hidden;
}
.acc-media img{ width:90%; height:90%; object-fit:contain; }

/* Etiket */
.acc-label{
  display:inline-block;
  margin-top:6px; padding:6px 10px;
  border:3px solid #000; border-radius:12px;
  font: 800 14px/1 "Nunito",system-ui;
  color:#111; background:#fff;
  box-shadow:4px 4px 0 #000;
}

/* 8 farklı kart rengi (yumuşak pastel) */
.c1{ background:#ffe7ee; }
.c2{ background:#fff3c6; }
.c3{ background:#e8ffd9; }
.c4{ background:#e5f3ff; }
.c5{ background:#f5e9ff; }
.c6{ background:#eafaf5; }
.c7{ background:#fff1e5; }
.c8{ background:#f0f7ff; }

/* Etiket için küçük renk vurguları (opsiyonel) */
.c1 .acc-label{ background:#ffd8e6; }
.c2 .acc-label{ background:#ffeaa1; }
.c3 .acc-label{ background:#d9ffc0; }
.c4 .acc-label{ background:#d6ebff; }
.c5 .acc-label{ background:#efe2ff; }
.c6 .acc-label{ background:#def7ee; }
.c7 .acc-label{ background:#ffe1cc; }
.c8 .acc-label{ background:#e6f2ff; }

/* ========== PRODUCTS SLIDER (Retro) ========== */
.products{ padding: 2.5rem 0 3rem; }
.products-title{ font: 800 clamp(26px,4vw,34px)/1 "Luckiest Guy",cursive; margin:0 0 16px; }

.lumi-slider{
  position:relative;
  background:#fff;
  border:4px solid #000; outline:12px solid #fff;
  border-radius:22px;
  box-shadow:14px 14px 0 #000, 0 30px 80px rgba(0,0,0,.10);
  overflow:hidden;
  touch-action: pan-y; /* dikey kaydırmayı bozma */
}
.ls-viewport{ overflow:hidden; cursor: grab; }
.ls-viewport:active{ cursor: grabbing; }

.ls-track{
  display:flex;
  transition: transform .45s cubic-bezier(.2,.8,.2,1);
  will-change: transform;
}
.ls-slide{ flex:0 0 100%; padding:18px; }

/* Noktalar */
.ls-dots{ display:flex; gap:10px; justify-content:center; padding:12px 0 16px; }
.ls-dots button{
  width:12px; height:12px;
  border:2px solid #000; border-radius:999px;
  background:#d0d7ff; cursor:pointer; box-shadow:2px 2px 0 #000;
}
.ls-dots button[aria-current="true"]{ width:28px; background:#2563eb; }

/* Kart */
.prod-card{
  display:grid; grid-template-columns:1.05fr .95fr; gap:18px; align-items:center;
  background:#fdfdfd; border:3px solid #000; border-radius:18px; padding:16px;
  box-shadow:8px 8px 0 #000;
}
.prod-media{
  position:relative;
  background:
    linear-gradient(90deg, rgba(0,0,0,.045) 1px, transparent 1px) 0 0/32px 32px,
    linear-gradient(0deg,  rgba(0,0,0,.045) 1px, transparent 1px) 0 0/32px 32px,
    #fff;
  border:3px solid #000; border-radius:16px;
  padding:14px; display:grid; place-items:center;
}
.prod-media img{ width:100%; max-height:320px; object-fit:contain; aspect-ratio:4/3; }

.sticker{
  position:absolute; top:10px; left:10px;
  background:#fff; border:3px solid #000; border-radius:12px; padding:4px 10px; font-weight:900;
  box-shadow:4px 4px 0 #000;
}
.prod--mini .sticker{ background:#FFE089; }
.prod--pro  .sticker{ background:#8EE5CE; }

.prod-body h3{ margin:.2rem 0 .5rem; font:900 clamp(18px,2.6vw,24px)/1 "Nunito",sans-serif; }
.prod-body p{ margin:0 0 10px; color:#3b3b46; }
.prod-meta{ display:flex; align-items:center; gap:12px; }
.price{
  font:900 18px/1 "Nunito";
  background:#fff; border:2px solid #000; border-radius:10px; padding:6px 10px; box-shadow:3px 3px 0 #000;
}

/* Renk varyasyonları */
.prod--mini{ background:#fff5f7; }
.prod--pro { background:#f2fff9; }

/* Responsive */
/* @media (max-width: 880px){
  .prod-card{ grid-template-columns:1fr; }
  .prod-media img{ max-height:240px; }
} */

/* ========== CONTACT BLOKLARI ========== */
.contact-title{
  font-family:"Luckiest Guy","Baloo 2","Poppins",system-ui,sans-serif;
  font-weight:400; color:#222; letter-spacing:.5px;
  /* text-shadow:2px 2px 0 #000; */
  font-size: clamp(28px,3vw,40px);
  margin: 0 0 18px;
}

/* ===== RETRO KART ===== */
.contact-card{
  position: relative;
  max-width: 980px; margin: 0 auto;
  border:3px solid #000; outline:10px solid #fff;
  border-radius:18px; background: rgba(255,255,255,.85);
  box-shadow:10px 10px 0 #000, 0 18px 50px rgba(0,0,0,.18);
  padding:18px 18px 22px;
}
/* tetris süsleri */
.contact-card::before, .contact-card::after{
  content:""; position:absolute; width:22px; height:22px; background:#000;
  box-shadow:
    24px 0 #000, 48px 0 #000, 0 24px #000, 24px 24px #000, 48px 24px #000; /* küçük L parçası */
  opacity:.07; filter: blur(.4px);
}
.contact-card::before{ left:16px; bottom:16px; }
.contact-card::after{ right:16px; top:16px; transform: scaleX(-1); }

/* ===== GRID ===== */
.contact-grid{
  display:grid; grid-template-columns: .9fr 1.1fr; gap:22px;
  align-items:center;
}
/* @media (max-width: 880px){
  .contact-grid{ grid-template-columns: 1fr; }
} */

/* ===== MASCOT alanı ===== */
.contact-mascot{
  display:flex; align-items:center; justify-content:center;
}
.contact-mascot img,
.contact-mascot video{
  width:min(320px, 100%); aspect-ratio: 1/1; object-fit: cover;
  border:3px solid #000; outline:8px solid #fff; border-radius:16px;
  box-shadow:8px 8px 0 #000;
  background:#fff;
  image-rendering: pixelated; /* GIF’e piksel tadı */
}

/* ===== FORM ===== */
.contact-form{ display:grid; gap:14px; }
.field{ position:relative; }

.input-retro{
  width:100%;
  padding: 14px 14px;
  background:#fff; color:#111;
  border:3px solid #000; border-radius:14px;
  outline:8px solid #fff;               /* sticker */
  box-shadow:6px 6px 0 #000;
  font: 700 15px/1.25 "Nunito",system-ui;
  transition: transform .15s ease, box-shadow .15s ease, outline-color .15s ease;
}
.input-retro::placeholder{ color:#6b7280; font-weight:600; }
.input-retro:focus{
  transform: translate(-2px,-2px);
  box-shadow:8px 8px 0 #000;
  outline-color:#ffe8a3;               /* hafif sarı highlight */
}

/* ===== ARCADE BUTON ===== */
.btn-retro{
  --btn-bg:#ffd39e; --btn-ink:#111;
  display:inline-flex; align-items:center; gap:8px;
  padding:12px 18px; border-radius:12px;
  background:var(--btn-bg); color:var(--btn-ink);
  border:2px solid #000; box-shadow:4px 4px 0 #000;
  font:700 15px/1 "Nunito",system-ui; text-decoration:none; cursor:pointer;
  transition: transform .15s ease, box-shadow .15s ease;
}
.btn-retro:hover{ transform: translate(-2px,-2px); box-shadow:6px 6px 0 #000; }
.btn-retro:active{ transform:none; box-shadow:2px 2px 0 #000; }

/* renk varyantı */
.btn-arcade{
  --btn-bg: linear-gradient(135deg,#6EE7B7 0%, #34D399 60%, #10B981 100%);
  --btn-ink:#0b1320;
}


/* ========== FOOTER ========== */
.footer{ padding:1.8rem 0 2.2rem; color:#2b2f36; text-align:center; }



/*Mobil için düzenleme eklendi 02.11.2025*/

/* =========================================================
   MOBILE (≤768px) — Tek blok, tüm bölümler
   Önerilen mobil BG: 1440×3120 px (JPG, 400–600 KB)
   ========================================================= */
@media (max-width: 768px){

  /* ---- Tek arkaplanı gövdeye uygula ---- */
  body{
    background-image: url("../image/mobile-background.jpg");
    background-position: top center;
    background-size: 100% auto;      /* genişliği ekrana sabitle */
    background-repeat: no-repeat;    /* tek parça */
    background-attachment: scroll;
  }

  /* Section’lardan BG’yi kaldır (çakışmayı önler) */
  #hero,#features,#accessories,#products,#contact{
    background: none !important;
  }

  /* ---- Akıcı ölçek değişkenleri ---- */
  :root{
    --space:      clamp(6px, 2vw, 14px);
    --card-pad:   clamp(4px, 1.6vw, 10px);
    --radius:     clamp(8px, 2vw, 14px);
    --shadow:     clamp(3px, 0.9vw, 6px);
    --icon-size:  clamp(14px, 4vw, 20px);
    --h2-size:    clamp(18px, 5vw, 24px);
    --h3-size:    clamp(11px, 3.2vw, 14px);
    --p-size:     clamp(10px, 3.2vw, 13px);
    --label-size: clamp(11px, 3.4vw, 13px);
    --min-tile:   clamp(92px, 28vw, 140px);
  }

  /* ---- Genel ---- */
  html,body{ overflow-x:hidden; }
  img,video{ max-width:100%; height:auto; display:block; }
  .wrap{ padding-left: var(--space); padding-right: var(--space); }

  section{
    min-height:auto; height:auto;
    padding: calc(64px + 10px) 0 var(--space);  /* header + nefes */
    position: relative;
  }

  /* ---- Header / Menü ---- */

  .lumi-header .menubar{
    position: fixed; inset:56px 0 auto 0; background:#fff;
    transform: translateY(-120%); transition: transform .2s ease;
    box-shadow: 0 16px 30px rgba(0,0,0,.08); z-index:80;
  }
  .lumi-header .menubar.open{ transform: translateY(0); }
  .lumi-header .menubar ul{ display:flex; flex-direction:column; gap:2px; padding:10px 12px 14px; }
  .lumi-header .menubar a{ padding:14px 10px; border:1px solid rgba(25,35,52,.06); color:#1a2234; }

  /* ---- HERO ---- */
  .hero-inner{ display:flex; flex-direction:column; align-items:center; gap: calc(var(--space)*.8); }
  .hero-title{ font-size:clamp(28px,7vw,36px); line-height:1.1; text-align:center; margin:0; }
  .hero-sub{ font-size:var(--p-size); line-height:1.4; text-align:center; margin-top:6px; padding:0 12px; }
  .hero-buttons{ display:flex; justify-content:center; align-items:center; gap:10px; flex-wrap:wrap; margin: 8px 0; }
  .hero-buttons .btn{ font-size:14px; padding:8px 14px; border-radius:8px; min-width:100px; box-shadow:2px 2px 0 #000; }
  .hero-media{ display:flex; justify-content:center; align-items:center; width:100%; }
  .hero-media .hero-video{
    width: clamp(240px, 80%, 320px);
    aspect-ratio:16/9; object-fit:cover; border-radius:12px;
    box-shadow:0 var(--shadow) calc(var(--shadow)*2) rgba(0,0,0,.15);
  }

  /* ---- FEATURES ---- */
  .features-title{ font-size:var(--h2-size); text-align:center; margin-bottom:var(--space); }
  .features-grid{
    display:grid; gap: calc(var(--space)*.6);
    grid-template-columns: repeat(auto-fit, minmax(var(--min-tile),1fr));
    padding: 0 calc(var(--space)*.6);
  }
  .feature{
    padding:var(--card-pad); border-radius:var(--radius); border-width:2px;
    box-shadow:var(--shadow) var(--shadow) 0 #000;
    display:flex; flex-direction:column; gap:calc(var(--space)*.3);
    min-height: clamp(82px, 22vw, 120px);
    background: rgba(255,255,255,.92);
  }
  .feature .ico{ font-size:var(--icon-size); line-height:1; }
  .feature h3{
    font-size:var(--h3-size); margin:0; line-height:1.15;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }
  .feature p{
    font-size:var(--p-size); margin:0; line-height:1.25;
    display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; line-clamp:2; overflow:hidden;
  }
  .feature-center img{ width:100%; max-width:120px; border-radius:10px; margin:0 auto; }

  /* ---- ACCESSORIES ---- */
  .acc-title{ font-size:var(--h2-size); text-align:center; margin-bottom:var(--space); }
  .acc-grid{
    display:grid; gap: calc(var(--space)*.6);
    grid-template-columns: repeat(auto-fit, minmax(var(--min-tile),1fr));
    padding: 0 calc(var(--space)*.6);
  }
  .acc-card{
    padding:var(--card-pad); border-radius:var(--radius); border-width:2.5px;
    box-shadow:calc(var(--shadow)*1.5) calc(var(--shadow)*1.5) 0 #000;
    display:flex; flex-direction:column; align-items:center; gap:calc(var(--space)*.4);
    min-height: clamp(110px, 28vw, 150px);
    background: rgba(255,255,255,.92);
  }
  .acc-media{
    width:100%; aspect-ratio:1/1; display:grid; place-items:center;
    border-width:2px; border-radius:calc(var(--radius) - 2px);
  }
  .acc-media img{ width:86%; height:86%; object-fit:contain; }
  .acc-label{
    padding:6px 8px; border-width:2px; border-radius:calc(var(--radius) - 2px);
    font:800 var(--label-size)/1 "Nunito", system-ui;
    box-shadow:var(--shadow) var(--shadow) 0 #000;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%;
  }

  /* ---- PRODUCTS ---- */
  .products-title{ font-size:var(--h2-size); text-align:center; margin-bottom:var(--space); }
  .lumi-slider{ overflow:hidden; }
  .ls-viewport{ padding:0 calc(var(--space)*.6); }
  .ls-track{ display:flex; gap:var(--space); }
  .ls-slide{ flex:0 0 100%; }
  .prod-card{
    display:grid; grid-template-columns:1fr; gap:var(--space);
    padding:var(--card-pad); border-radius:var(--radius); border-width:2px;
    box-shadow:var(--shadow) var(--shadow) 0 #000; background:rgba(255,255,255,.95);
  }
  .prod-media img{ width:100%; max-height:clamp(220px,52vw,320px); object-fit:cover; border-radius:calc(var(--radius)-2px); }
  .prod-body h3{ font-size:clamp(16px,4.6vw,22px); margin:0 0 6px; }
  .prod-body p{ font-size:var(--p-size); margin:0 0 8px; }
  .prod-meta .btn{ font-size:14px; padding:10px 14px; border-radius:10px; }

  .ls-dots{ display:flex; justify-content:center; gap:8px; margin-top:10px; }
  .ls-dots button{ width:10px; height:10px; border-radius:50%; border:2px solid #000; background:#fff; }
  .ls-dots .is-active{ background:#000; }

  /* ---- CONTACT ---- */
  .contact-title{ font-size:var(--h2-size); text-align:center; margin-bottom:var(--space); }
  .contact-card{ padding:var(--space); border-radius:var(--radius); box-shadow:var(--shadow) var(--shadow) 0 #000; background:rgba(255,255,255,.95); }
  .contact-grid{ display:flex; flex-direction:column; gap:var(--space); }
  .contact-mascot img{ width:clamp(160px,60%,220px); margin:0 auto; }
  .contact-form .field{ margin-bottom:10px; }
  .input-retro{ width:100%; font-size:clamp(14px,4vw,16px); }
  .contact .btn{ width:100%; padding:12px 14px; font-size:15px; border-radius:10px; }

  /* ---- FOOTER ---- */
  .footer .wrap{ text-align:center; padding-top:14px; padding-bottom:14px; font-size:12px; }
}

/* Ekstra dar (≤390px): karo min genişliği daha sıkı */
@media (max-width: 390px){
  :root{ --min-tile: clamp(86px, 30vw, 110px); }
}



/* ===== MOBILE MENÜ – kapalıyken tamamen gizle ===== */
@media (max-width: 768px){

  .lumi-header .topbar{
    height: 56px;
    padding: 0 14px;
  }

  /* KAPALI DURUM */
  .lumi-header .menubar{
    position: fixed !important;
    top: 56px; left: 0; right: 0;
    z-index: 999;                 /* üste al */
    height: 0;                    /* << desktop'taki 1cm’i sıfırla */
    max-height: 0;
    overflow: hidden;
    padding: 0;
    margin: 0;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    background: transparent;
    box-shadow: none;

    transition:
      max-height .24s ease,
      opacity .18s ease,
      visibility .18s ease,
      padding .18s ease;
  }

  /* AÇIK DURUM */
  .lumi-header .menubar.open{
    background: #fff;
    padding: 8px 0;
    box-shadow: 0 16px 30px rgba(0,0,0,.10);

    height: auto;                 /* içerik kadar */
    max-height: 80vh;             /* animasyon için */
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  .lumi-header .menubar ul{
    list-style: none;
    margin: 0;
    padding: 10px 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .lumi-header .menubar a{
    display: block;
    padding: 12px 10px;
    border-radius: 10px;
    border: 1px solid #e5e7eb;
    background: #fff;
    color: #1a2234;
    text-decoration: none;
  }
/* 
  .nav-toggle{
    margin-left: auto;
    font-size: 22px;
    line-height: 1;
    padding: 6px 10px;
    border: 2px solid #000;
    border-radius: 10px;
    background: #fff;
    box-shadow: 3px 3px 0 #000;
  } */
}