:root{
    --bg:#222423;
    --text:#f6f6f6;
    --muted:#cfcfcf;
    --accent:#FFD700;
    --accent-2:#FFC700;
    --card:#1e1f1f;
  }

  *{box-sizing:border-box;}
  html,body{height:100%}
  body{
    margin:0;
    background:var(--bg);
    color:var(--text);
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, Inter, "Helvetica Neue", Arial;
    letter-spacing:.2px;
  }

  /* ---------- Header ---------- */
  header {
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: saturate(140%) blur(6px);
  background: linear-gradient(180deg, rgba(34, 36, 35, .95), rgba(34, 36, 35, .85) 60%, rgba(34, 36, 35, .6));
  border-bottom: 1px solid rgba(255, 255, 255, .06);
  padding: 15px 24px;
  width: 100%;
}

.wrap {
  max-width: 1300px;
  margin: 0 auto;
  padding: 0;
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.logo img {
    height: 60px; /* Set height of the logo to 60px */
    width: auto;  /* Keep aspect ratio intact */
}
  .logo{display:flex; align-items:center; gap:10px; font-weight:900; font-size:28px; color:var(--text);height:60px;}
  .logo .bolt{
    width:20px;height:20px;border-radius:4px;display:inline-grid;place-items:center;
    color:#111;background:linear-gradient(135deg,var(--accent),var(--accent-2));
    box-shadow:0 0 18px rgba(255,215,0,.55), inset 0 0 10px rgba(255,255,255,.15);
    transform:skewX(-10deg);
  }
.menu {
  display: flex;
  gap: 28px;
  align-items: center;
}

.menu a {
  text-decoration: none;
  color: var(--accent);
  font-weight: 700;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .8px;
  padding: 10px 2px;
  transition: transform .2s ease, opacity .2s ease;
}

.shop {
  border: none;
  cursor: pointer;
  font-weight: 900;
  text-transform: uppercase;
  padding: 12px 22px;
  border-radius: 999px;
  letter-spacing: .8px;
  color: #111;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  box-shadow: 0 0 24px rgba(255, 215, 0, .55);
  transition: background-color 0.3s ease;
}

.shop:hover {
  background: #ffbf00; /* Hover efekti */
}

  /* ---------- Hero ---------- */
  .hero{
    display:grid; grid-template-columns: 1.1fr .9fr 1fr; gap:36px; align-items:center;
    padding:42px 24px 64px;
    min-height:100vh; /* İlk ekranda sadece hero görünsün */
  }
  @media (max-width:1100px){.hero{grid-template-columns:1fr; text-align:center}}

  .tag{display:inline-flex;align-items:center;gap:10px;padding:10px 16px;border-radius:14px;color:var(--accent);font-weight:900;border:2px solid var(--accent);}
  .title{margin:22px 0 14px; line-height:1.02; font-size:72px; font-weight:1000;}
  @media (max-width:640px){ .title{font-size:44px} }
  .lead{max-width:560px;color:var(--muted)}

  /* ---------- Products Section ---------- */
  .products{
    padding:60px 24px;
    max-width:1200px;
    margin:0 auto;
    overflow:hidden;
  }
  .products-title{text-align:center;font-size:36px;font-weight:900;color:var(--accent);margin-bottom:12px;}
  .products-subtitle{text-align:center;color: var(--muted);font-size:16px;max-width:720px;margin: -8px auto 30px;line-height:1.6;}

  .product-card{
    float:left;
    height:200px;
    width:31%; /* yan yana 3 ürün */
    margin:1%;
    display:flex;align-items:center;justify-content:space-between;
    background:#1a1a1a;
    border-radius:20px;
    padding:20px;
    box-shadow:0 6px 20px rgba(0,0,0,.4);
  }
  .product-img{width:90px;margin-right:20px;}
  .product-info h3{margin:0;font-size:20px;font-weight:800;color:var(--text);}
  .product-info p{margin:6px 0 0;color:var(--muted);font-size:14px;}
  .product-stats{display:flex;flex-direction:column;gap:8px;font-weight:700;color:var(--accent);min-width:120px;text-align:right;}

  @media (max-width:900px){
    .product-card{width:100%;margin-bottom:20px;float:none;}
  }

  /* Hover efektleri (Hero kutu + ürün kartları) */
  .can-card:hover{
    animation:floatY 5.4s ease-in-out infinite alternate;
    filter:saturate(135%);
  }
  @keyframes floatY {
    from{ transform:translateY(-2px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) }
    to  { transform:translateY(8px)  rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) }
  }
  .product-card:hover{
    animation:floatY 2.4s ease-in-out infinite alternate;
    filter:saturate(115%);
    box-shadow:0 10px 30px rgba(255,215,0,.35); /* altın ışık efekti */
    transform:translateY(-4px) scale(1.02);
  }

  /* ---------- Social (Follow) ---------- */
  .follow{
    background: url('images/paper-texture.jpg') center/cover no-repeat;
    padding: 0px 24px;
    margin-top:60px;
    text-align:center;
  }

  .icon-flash{
    font-size:70px;
    color:var(--accent);
    margin-bottom:20px;
  }

  .follow-title{
    font-size:32px;
    font-weight:1000;
    color:var(--accent);
    margin-bottom:24px;
    text-transform:uppercase;
    letter-spacing:1.5px;
  }

  .insta-link{
    display:inline-flex;
    align-items:center;
    gap:12px;
    font-size:22px;
    font-weight:900;
    text-decoration:none;
    color:#111;
    background:#fff;
    padding:12px 28px;
    border-radius:50px;
    box-shadow:0 6px 18px rgba(0,0,0,.25);
    transition: all .3s ease;
  }
  .insta-link:hover{
    transform:scale(1.08);
    box-shadow:0 10px 24px rgba(0,0,0,.4);
  }
  .insta-icon{
    width:28px;
    height:28px;
  }

  .follow-text{
    margin-top:40px;
  }
  .follow-text h3{
    font-size:26px;
    font-weight:1000;
    margin-bottom:18px;
    color: #fff; /* okunurluk için koyulaştırıldı */
  }
  .follow-text p{
    font-size:18px;
    font-weight:700;
    margin:10px 0;
    color: #fff; /* okunurluk için koyulaştırıldı */
    line-height:1.6;
  } 
  .site-footer{
  background:#111;
  color:#ccc;
  padding:40px 20px;
  text-align:center;
  border-top:1px solid rgba(255,255,255,.08);
}

.site-footer p{
  margin:8px 0;
  font-size:14px;
}

.site-footer a{
  color:var(--accent);
  text-decoration:none;
  font-weight:700;
}
.about{
  background:#2a2a2a;
  padding:80px 24px;
  color:#fff;
}

.about-stats{
  display:flex;
  justify-content:center;
  gap:60px;
  text-align:center;
  margin-bottom:60px;
}
.about-stats h3{
  font-size:36px;
  color:#FFD700;
  font-weight:900;
  margin-bottom:8px;
}
.about-stats p{
  font-size:14px;
  color:#fff;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:1px;
}

.about-content{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:40px;
  align-items:center;
}
.about-left .can-frame{
  border:2px solid #FFD700;
  border-radius:14px;
  padding:20px;
  display:flex;
  gap:20px;
  justify-content:center;
}
.about-left img{
  width:160px;
}

.about-right .about-tag{
  display:inline-block;
  border:2px solid #FFD700;
  color:#FFD700;
  padding:4px 12px;
  font-weight:900;
  margin-bottom:20px;
}
.about-right h2{
  font-size:62px;
  font-weight:900;
  margin-bottom:16px;
}
.about-right p{
  color:#ccc;
  font-size:15px;
  line-height:1.6;
  margin-bottom:20px;
}
.about-btn{
  display:inline-block;
  background:linear-gradient(135deg,#FFD700,#FFC700);
  color:#111;
  font-weight:900;
  padding:12px 28px;
  border-radius:8px;
  text-decoration:none;
  margin-bottom:30px;
  box-shadow:0 4px 12px rgba(0,0,0,.3);
}
.about-btn:hover{transform:scale(1.05)}

.about-box{
  display:flex;
  gap:14px;
  border:2px solid #FFD700;
  border-radius:12px;
  padding:16px;
  margin-bottom:16px;
  align-items:flex-start;
}
.about-box .icon{
  font-size:28px;
  color:#FFD700;
}
.about-box h4{
  margin:0;
  font-size:18px;
  font-weight:800;
  margin-bottom:4px;
}
.about-box p{
  margin:0;
  font-size:14px;
  color:#ddd;
}

@media(max-width:900px){
  .about-content{grid-template-columns:1fr}
  .about-left img{width:120px}
}
/* --- Meteor & Yıldız Tozu: Bozmadan çalışsın --- */
.hero{/* position:relative; *//* overflow:hidden; */}

/* Efekt katmanları sayfa etkileşimini engellemesin ve her zaman görünür olsun */
#meteor-container, #star-dust{
  position:absolute; inset:0;
  pointer-events:none; overflow:hidden;
}
#meteor-container{ z-index:0; }
#star-dust{ z-index:1; }

/* Hero içindeki TÜM diğer içerikleri efektlerin üstüne al */
.hero > *:not(#meteor-container):not(#star-dust){
  position:relative;
  z-index:2;
}

/* Meteor parçacıkları */
.meteor{
  position:absolute;
  width:3px; height:3px;
  background:#FFD700;             /* sarı */
  border-radius:50%;
  opacity:.9;
  box-shadow:0 0 6px #FFD700;
  animation: meteorFloat 6s infinite ease-in-out alternate;
}
@keyframes meteorFloat{
  from{ transform: translateX(0); }
  to  { transform: translateX(40px); }
}

/* Yıldız tozu (mouse izi) */
.dust{
  position:absolute;
  width:5px; height:5px;
  background:#FFD700;             /* sarı toz */
  border-radius:50%;
  pointer-events:none;
  box-shadow:0 0 10px #FFD700;
  animation: dustFade 900ms forwards;
}
@keyframes dustFade{
  from{ opacity:1; transform:scale(1); }
  to  { opacity:0; transform:scale(3); }
}
/* Kutunun uzayda süzülme efekti */
.can-wrap img {
  animation: floatCan 4s ease-in-out infinite;
}

@keyframes floatCan {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-15px); }
}
/* Hamburger Menü - Sağ Tarafa Hizalanacak */
.hamburger {
  display: none;
  flex-direction: column;
  gap: 4px;
  cursor: pointer;
  position: absolute;
  right: 20px; /* Sağda 20px mesafe */
  top: 20px;  /* Menü ikonunu biraz daha yukarıya taşıdık */
}

.hamburger .line {
  width: 30px;
  height: 3px;
  background-color: var(--text);
  border-radius: 5px;
}

@media (max-width: 768px) {
  .nav {
    display: flex;
    justify-content: space-between;
    width: 100%;
    position: relative;
  }

  .menu {
    display: none;
    flex-direction: column;
    gap: 15px;
    align-items: flex-start;
    position: absolute; /* Menü sabit değil, header altında yeri var */
    top: 60px; /* Header'ın hemen altında başlasın */
    left: 0;
    background: var(--bg);
    width: 100%;
    padding: 20px;
    z-index: 9999; /* Menü her zaman üstte olacak */
    max-height: 0; /* Menü açılmadan görünmemeli */
    overflow: hidden; /* Menü açıldığında düzgün görünmesi için */
    transition: max-height 0.3s ease-out; /* Yumuşak açılma efekti */
  }

  .menu a {
    font-size: 16px;
    padding: 10px 0;
    color: var(--text);
    transition: opacity 0.3s ease;
  }

  .hamburger {
    display: flex;
    right: 20px;
    top: 20px;
  }

  .menu.open {
    display: flex;
    max-height: 300px; /* Menü açıldığında yükseklik */
  }

  /* Sayfa İçeriği için Padding */
  body {
    /* padding-top: 46px; */ /* Header ve menü arasındaki mesafe */
  }

  /* "Şimdi Satın Al" Butonunun Ortalanması */
  .shop {
    display: block;
    margin: 20px auto; /* Butonu ortalamak için margin:auto */
  }
}

#pages {
   /* Sağ tarafa yaslama */
  margin: 40px 20px;
}

#pages .pill {
  display: inline-block;
  background: linear-gradient(45deg, rgba(255,215,0,.8), #ffdd00);
  color: #2a2a2a;
  font-weight: bold;
  padding: 8px 20px;
  border-radius: 25px;
  font-size: 1.1rem;
  box-shadow: 0 0 10px #ffc806;
  text-align: center;
}

#pages .price {
  font-size: 2.5rem;
  font-weight: 900;
  color: #ffd700;
  margin-top: 15px;
  text-shadow: 0 0 10px #2a2a2a, 0 0 20px rgba(255, 180, 0, 0.6);
}

#pages .muted {
  font-size: 1.2rem;
  margin-top: 10px;
  color: #111;
  font-weight: 500;
  background: rgba(255,215,0,.8);
  display: inline-block;
  padding: 10px 20px;
  border-radius: 15px;
  box-shadow: 0 0 10px rgba(255, 200, 0, 0.5);
  text-align: center;
}
/* --- HAKKIMIZDA SAYFASI --- */
.about-page {
  padding: 60px 20px;
}
.about-page .page-title {
  font-size: 2.5rem;
  font-weight: 800;
  text-align: center;
  margin-bottom: 10px;
  color: #ffd700;
}
.about-page .page-subtitle {
  text-align: left;
  font-size: 1.2rem;
  margin-bottom: 50px;
  color: #ddd;
}

/* Vizyon & Misyon kartları */
.about-page .about-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(280px,1fr));
  gap: 20px;
  margin-bottom: 60px;
}
.about-page .about-card {
  background: #ffd700;
  padding: 25px;
  border-radius: 20px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.1);
  transition: transform 0.3s;
}
.about-page .about-card:hover {
  transform: translateY(-5px);
}
.about-page .about-card h2 {
  margin-bottom: 15px;
  color: #1a1a1a;
}
.about-page .about-card p {
  color: #444;
}

/* Şirket Tarihi */
.about-page .about-history {
  margin-bottom: 60px;
}
.about-page .about-history h2 {
  margin-bottom: 20px;
  color: #ffd700;
}
.about-page .timeline {
  list-style: none;
  padding-left: 0;
}
.about-page .timeline li {
  margin-bottom: 15px;
  font-size: 1.1rem;
}
.about-page .timeline span {
  font-weight: bold;
  color: #ffd700;
  margin-right: 10px;
}

/* Yönetim kadrosu */
.about-page .about-management h2 {
  margin-bottom: 30px;
  color: #ffd700;
  text-align: center;
}
.about-page .management-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(200px,1fr));
  gap: 20px;
  text-align: center;
}
.about-page .manager {
  background: #fff;
  padding: 20px;
  border-radius: 15px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.about-page .manager img {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 15px;
}
.about-page .manager h3 {
  margin: 10px 0 5px;
  font-size: 1.2rem;
  color: #333;
}
.about-page .manager p {
  color: #666;
  font-size: 0.95rem;
}

/* Bu kısım ürünlerimiz Sayfasına ait /*
/* --- ÜRÜNLER SAYFASI (store-page) --- */
.store-page {
  padding: 60px 20px;
}

.store-title {
  font-size: 2.5rem;
  font-weight: 800;
  text-align: center;
  margin-bottom: 10px;
  color: #ffdd00;
}

.store-subtitle {
  text-align: center;
  font-size: 1.2rem;
  margin-bottom: 50px;
  color: #aaa;
}

.store-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(280px,1fr));
  gap: 25px;
}

.store-card {
  background: #1a1a1a;
  border-radius: 20px;
  padding: 20px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.3);
  transition: transform 0.3s;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.store-card:hover {
  transform: translateY(-5px);
}

.store-img {
  width: 100%;
  height: 220px;
  object-fit: contain;
  margin-bottom: 15px;
}

.store-card h3 {
  font-size: 1.3rem;
  margin-bottom: 10px;
  color: #ffdd00;
}

.store-card p {
  color: #ddd;
  font-size: 1rem;
  margin-bottom: 15px;
}

.store-info {
  list-style: none;
  padding-left: 0;
  margin-bottom: 20px;
}
.store-info li {
  font-size: 0.95rem;
  margin-bottom: 5px;
  color: #fff;
}

.store-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.store-footer .price {
  font-size: 1.3rem;
  font-weight: bold;
  color: #ff4500;
}

button.shop.small {
  padding: 8px 15px;
  font-size: 0.9rem;
  border-radius: 10px;
  background: #ffdd00;
  color: #000;
}
.icon-flash {
  text-align: center;   /* ortala */
  display: flex;
  justify-content: center;
  align-items: center;
  
}

.icon-flash img {
  width: 60px;          /* istediğin boyut */
  height: auto;         /* orantıyı koru */
  display: block;
}
button.shop, 
button.shop.small {
  position: relative;
  z-index: 1;
  box-shadow: 0 0 15px rgba(255, 221, 0, 0.7), 0 0 30px rgba(255, 221, 0, 0.4);
  animation: glowPulse 2s infinite alternate;
  transition: transform 0.2s ease-in-out;
}

/* Hover’da biraz büyüsün */
button.shop:hover, 
button.shop.small:hover {
  transform: scale(1.05);
  box-shadow: 0 0 25px rgba(255, 221, 0, 1), 0 0 50px rgba(255, 221, 0, 0.8);
}

/* Parlama animasyonu */
@keyframes glowPulse {
  from {
    box-shadow: 0 0 10px rgba(255, 221, 0, 0.6), 0 0 20px rgba(255, 221, 0, 0.3);
  }
  to {
    box-shadow: 0 0 20px rgba(255, 221, 0, 1), 0 0 40px rgba(255, 221, 0, 0.8);
  }
}
/* === Video inside can-frame (yellow box) === */
/* === Video inside can-frame (responsive, mobile-friendly) === */
.can-frame video {
    width: 100%; /* Full width */
    height: auto; /* Auto height to keep aspect ratio */
    border-radius: 12px;
    object-fit: cover;
}

/* === Mobile-specific adjustments === */
@media (max-width: 768px) {
    .can-frame video {
        height: 300px; /* Adjust height for smaller screens */
    }
}

/* === For larger screens like desktop === */
@media (min-width: 769px) {
    .can-frame video {
        height: 525px; /* Set height for desktop */
    }
}




/* === HAKKIMIZDA: Accordion (scoped) === */
.about-page .faq{ margin-top:40px; }
.about-page .faq h2{ color:#ffd700; margin-bottom:18px; text-align:left; }
.about-page .accordion{ border-radius:14px; overflow:hidden; }
.about-page .accordion details{ background:#1a1a1a; color:#fff; border:1px solid rgba(255,255,255,.08); }
.about-page .accordion details + details{ border-top:none; }
.about-page .accordion summary{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; padding:16px 18px; cursor:pointer; list-style:none; user-select:none;
  font-weight:800; letter-spacing:.2px;
}
.about-page .accordion summary::-webkit-details-marker{ display:none; }
.about-page .accordion .icon{ width:20px; height:20px; flex:0 0 20px; fill:#ffd700; transition:transform .25s ease; }
.about-page .accordion details[open] .icon{ transform:rotate(180deg); }
.about-page .accordion .accordion-content{ padding:0 18px 18px; border-top:1px dashed rgba(255,255,255,.12); }
.about-page .accordion .checklist, 
.about-page .accordion .bullets{ margin:12px 0 0 16px; }
.about-page .accordion .checklist li{ margin:6px 0; position:relative; padding-left:14px; }
.about-page .accordion .checklist li::before{
  content:''; position:absolute; left:0; top:.55em; width:6px; height:6px; border-radius:50%; background:#ffd700;
}
.about-page .accordion a{ color:#ffd700; font-weight:800; text-decoration:none; }
.about-page .accordion a:hover{ text-decoration:underline; }

/* ---- Energy Block ---- */
#energy-block{
  --bg:#121212;
  --fg:#f4f4f4;
  --muted:#c9c9c9;
  background:var(--bg);
  color:var(--fg);
  padding: clamp(60px, 8vw, 120px) clamp(24px, 6vw, 80px);
}

.energy-block__inner{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(30px, 5vw, 80px);
  align-items:center;
  max-width: 1280px;
  margin-inline:auto; /* ortalama */
}

/* Başlık */
.energy-block__title{
  line-height:1;
  margin:0 0 1rem;
  display:flex;
  flex-direction:column;
  gap:.4em;
}

.energy-block__title .eb-outline{
  font-weight:900;
  font-size: clamp(48px, 9vw, 140px); /* Daha büyük */
  -webkit-text-stroke:2px var(--fg);
  color:transparent;
  text-transform:uppercase;
}

.energy-block__title .eb-filled{
  font-weight:1000;
  font-size: clamp(48px, 9vw, 140px);
  color: #ffdd00;
  text-transform:uppercase;
}

.energy-block__title .dot{
  display:inline-block;
  translate:0 .05em;
}

/* Metin */
.energy-block__desc{
  margin:1.2rem 0 0;
  color:var(--muted);
  font-size:clamp(16px, 1.4vw, 20px);
  line-height:1.8;
  max-width:52ch;
}

/* Görsel */
.energy-block__media{
  margin:0;
  border-radius:18px;
  overflow:hidden;
  box-shadow:0 24px 60px rgba(0,0,0,.55);
  display:flex;
  justify-content:center;
}

.energy-block__media img{
  width:100%;
  max-width:420px;
  height:auto;
  display:block;
  object-fit:contain;
}

/* Mobil uyum */
@media (max-width: 980px){
  .energy-block__inner{
    grid-template-columns: 1fr;
    text-align:center;
  }
  .energy-block__media{
    order:-1;
    margin-bottom:1.5rem;
  }
  .energy-block__desc{
    margin-inline:auto;
  }
}