/* Persmont Home – şık, enerjik, sarı/navy */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@700;900&display=swap');
:root{ --navy:#0a1d3b; --yellow:#ffd400; --ink:#0a1d3b; --muted:#444; --bg:#fff; --topbar-h:44px; }
*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{margin:0;padding:0;background:#fff;color:#222;font-family:'Inter',system-ui,Arial,Helvetica,sans-serif;overflow-x:hidden;width:100%}
body{padding-top:130px}

/* ===== TOPBAR ===== */
.top-info-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: var(--navy);
  color: white;
  z-index: 101;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 max(20px, 3vw);
}

.info-bar-container {
  display: flex;
  gap: clamp(30px, 5vw, 80px);
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: 1400px;
}

.info-item {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--yellow);
  text-decoration: none;
  font-size: 14px;
  transition: all 0.3s ease;
  white-space: nowrap;
}

.info-item:hover {
  color: white;
  transform: translateY(-2px);
}

.info-item i {
  font-size: 16px;
}

.site-header{position:fixed;top:44px;left:0;right:0;z-index:100;background:#ffffffcf;backdrop-filter:blur(20px) saturate(140%);-webkit-backdrop-filter:blur(20px) saturate(140%);box-shadow:0 4px 20px rgba(0, 0, 0, 0.05);border-bottom:1px solid rgba(10,29,59,0.06);transition:background-color .35s ease, box-shadow .35s ease}
.site-header::before{display:none}
.site-header .nav{width:100%;margin:0;display:flex;align-items:center;justify-content:flex-start;padding:20px max(20px,3vw);gap:28px;position:relative;background:transparent;min-height:100px}
/* Logo: görüntü öncelikli, yoksa Cinzel + degrade metin */
.logo{display:flex;align-items:center;gap:12px;font-weight:900;text-decoration:none;font-size:30px;letter-spacing:.3px;color:transparent;background:linear-gradient(135deg,#0a1d3b,#1a4d7a);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;font-family:'Cinzel', serif;transition:all .3s cubic-bezier(0.4, 0, 0.2, 1);position:relative}
.logo::after{content:'';position:absolute;bottom:-4px;left:0;width:0;height:2px;background:linear-gradient(90deg,#0a1d3b,#1a4d7a);transition:width 0.3s ease}
.logo:hover::after{width:100%}
.logo:hover{transform:scale(1.05)}
.logo img{display:block;height:80px;width:auto;transition:all .3s cubic-bezier(0.4, 0, 0.2, 1)}
.logo:hover img{transform:scale(1.05)}
.logo .logo-text{display:none}
.logo.text .logo-text{display:inline}
#menu{list-style:none;display:flex;gap:8px;margin:0 0 0 auto;padding:0;align-items:center;transition:gap .8s cubic-bezier(0.4, 0, 0.2, 1)}
#menu:has(a:hover){gap:12px}
#menu a{color:rgba(10,29,59,0.85);text-decoration:none;font-weight:700;font-size:16px;position:relative;transition:all .3s cubic-bezier(0.4, 0, 0.2, 1);padding:10px 16px;border-radius:20px;display:inline-flex;align-items:center;justify-content:center;gap:8px;white-space:nowrap}

/* Hover effect - hafif şişme */
#menu a:hover{
	transform:scale(1.08);
}

/* Text and icon containers */
#menu a .link-text{transition:all .4s cubic-bezier(0.4, 0, 0.2, 1);display:inline-block}

#menu a .link-icon{opacity:0;transform:scale(0.5);font-size:26px;transition:all .4s cubic-bezier(0.4, 0, 0.2, 1);display:inline-block;max-width:0;overflow:hidden;margin-left:0}

/* Hover state - icon appears next to text, other items shift smoothly */
#menu a:hover .link-icon{opacity:1;transform:scale(1);max-width:30px;margin-left:8px}
#menu a:hover{color:var(--navy);padding:10px 20px;transform:scale(1.08)}

/* Scroll progress bar – lacivert tonları */
.scroll-progress{position:absolute;left:0;bottom:0;height:2px;width:0;background:linear-gradient(90deg, #0a1d3b, #1a4d7a);box-shadow:0 0 10px rgba(10,29,59,.3);transition:width .12s ease}

/* Inverted state: daha koyu glassmorphism */
.site-header.inverted{background:rgba(10,29,59,0.15);backdrop-filter:blur(40px) saturate(220%);-webkit-backdrop-filter:blur(40px) saturate(220%);box-shadow:0 4px 20px rgba(0,0,0,.12);border-bottom:1px solid rgba(10,29,59,0.3)}
.site-header.inverted .logo{background:linear-gradient(135deg,#ffd400,#ffeb99);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.site-header.inverted .logo::after{background:linear-gradient(90deg,#ffd400,#ffeb99)}
.site-header.inverted #menu a{color:rgba(255,255,255,0.95)}
.site-header.inverted #menu a:hover{color:#ffd400}
.site-header.inverted #menu a:hover .link-icon{color:#ffd400}
.site-header.inverted #menu a::after{background:#ffd400}
.site-header.inverted .scroll-progress{background:linear-gradient(90deg, #ffd400, #ffe266);box-shadow:0 0 15px rgba(255,212,0,.4)}
.site-header.inverted::before{display:none}

/* SCROLLED modu: Menü düzenlemeleri (Hamburger her zaman aynı kalacak) */
.site-header.scrolled{background-color:#fff}
.site-header.scrolled .logo{font-size:32px;margin:0;position:absolute;left:50%;transform:translateX(-50%);-webkit-text-fill-color:initial}
.site-header.scrolled .logo img{height:80px}

/* Hamburger - Sadece mobilde görünür */
@media (min-width: 1101px) {
	.site-header.scrolled .hamburger{
		display:none !important;
	}
}

@media (max-width: 1100px) {
	.site-header.scrolled .hamburger{
		display:flex !important;
		margin-left:auto;
		position:relative;
		z-index:950;
	}
}

/* Mobilde menü kapalı */
@media (max-width: 1100px) {
	/* Desktop menüyü scroll modunda da çalışır hale getir (mobil stili uygula) */
	.site-header.scrolled #menu {
	  position: fixed;
	  top: calc(var(--topbar-h) + var(--header-h, 80px));
	  left: 0;
	  right: 0;
	  width: 100%;
	  max-height: 0;
	  overflow-y: auto;
	  overflow-x: hidden;
	  background: linear-gradient(135deg, rgba(255,255,255,0.98) 0%, rgba(255,252,240,0.95) 100%);
	  backdrop-filter: blur(25px) saturate(180%);
	  -webkit-backdrop-filter: blur(25px) saturate(180%);
	  box-shadow: 0 10px 40px rgba(0,0,0,.15), 0 0 0 1px rgba(255,212,0,0.2);
	  display: flex !important;
	  flex-direction: column;
	  padding: 20px 0;
	  transition: max-height 0.6s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s ease;
	  z-index: 900;
	  opacity: 0;
	}
	
	/* Şık scrollbar - Mobilde */
	.site-header.scrolled #menu::-webkit-scrollbar {
	  width: 8px;
	}

	.site-header.scrolled #menu::-webkit-scrollbar-track {
	  background: rgba(255, 212, 0, 0.1);
	  border-radius: 10px;
	}

	.site-header.scrolled #menu::-webkit-scrollbar-thumb {
	  background: linear-gradient(180deg, #ffd400, #d8aa3c);
	  border-radius: 10px;
	  border: 2px solid rgba(255, 252, 240, 0.95);
	}

	.site-header.scrolled #menu::-webkit-scrollbar-thumb:hover {
	  background: linear-gradient(180deg, #d8aa3c, #ffd400);
	}

	.site-header.scrolled #menu {
	  scrollbar-width: thin;
	  scrollbar-color: #ffd400 rgba(255, 212, 0, 0.1);
	}

	.site-header.scrolled #menu.open {
	  max-height: none;
	  opacity: 1;
	  padding: 0;
	  position: fixed;
	  top: 70px;
	  left: 0;
	  right: 0;
	  width: 100%;
	  background: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(255, 252, 240, 0.96) 100%);
	  backdrop-filter: blur(25px) saturate(180%);
	  -webkit-backdrop-filter: blur(25px) saturate(180%);
	  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(255, 212, 0, 0.3);
	  z-index: 999;
	  overflow-y: auto;
	  max-height: calc(100vh - 70px);
	}
}

/* Scroll modunda - Mobil kategorileri sadece mobilde göster */
@media (max-width: 1100px) {
	.site-header.scrolled .desktop-only {
	  display: none !important;
	}

	.site-header.scrolled .mobile-categories-wrapper {
	  display: block !important;
	  width: 100%;
	}

	.site-header.scrolled .mobile-categories-container {
	  display: grid;
	  grid-template-columns: repeat(3, 1fr);
	  width: 100%;
	  max-width: 100%;
	  margin: 0 auto;
	  padding: 35px;
	  gap: 30px;
	}

	.site-header.scrolled .mobile-category-card {
	  width: 100%;
	  border-radius: 0;
	  background: transparent;
	  backdrop-filter: none;
	  border: none;
	  border-left: 3px solid rgba(255, 212, 0, 0.4);
	  padding: 0 0 0 20px;
	  transition: all 0.3s ease;
	}

	.site-header.scrolled .mobile-category-card:hover {
	  background: transparent;
	  border-left-color: #ffd400;
	  transform: translateX(5px);
	  box-shadow: none;
	}

	.site-header.scrolled .mobile-category-title {
	  display: flex;
	  align-items: center;
	  gap: 10px;
	  padding: 0 0 12px 0;
	  color: var(--navy);
	  font-weight: 800;
	  font-size: 15px;
	  margin: 0 0 16px 0;
	  border-bottom: 2px solid rgba(255, 212, 0, 0.3);
	  text-transform: uppercase;
	  letter-spacing: 0.3px;
	}

	.site-header.scrolled .mobile-category-title i {
	  color: #d8aa3c;
	  font-size: 18px;
	}

	.site-header.scrolled .mobile-category-list {
	  display: flex;
	  flex-direction: column;
	  gap: 0;
	  list-style: none;
	  padding: 0;
	  margin: 0;
	}

	.site-header.scrolled .mobile-category-list a {
	  display: flex;
	  align-items: center;
	  gap: 10px;
	  padding: 10px 15px;
	  color: #444;
	  text-decoration: none;
	  font-size: 14px;
	  font-weight: 500;
	  border-radius: 6px;
	  transition: all 0.2s ease;
	  border-left: none;
	}

	.site-header.scrolled .mobile-category-list a:hover {
	  background: rgba(255, 212, 0, 0.12);
	  padding-left: 18px;
	  color: var(--navy);
	  border-left-color: transparent;
	  transform: translateX(0);
	}

	.site-header.scrolled .mobile-category-list a i {
	  color: #d8aa3c;
	  font-size: 13px;
	  transition: transform 0.2s ease;
	  opacity: 0.8;
	}

	.site-header.scrolled .mobile-category-list a:hover i {
	  transform: translateX(3px);
	  opacity: 1;
	}

	/* Tablet için 2 sütun */
	@media (max-width: 1200px) and (min-width: 769px) {
	  .site-header.scrolled .mobile-categories-container {
	    grid-template-columns: repeat(2, 1fr);
	    gap: 25px;
	    padding: 30px;
	  }
	}

	/* Mobil için tek sütun */
	@media (max-width: 768px) {
	  .site-header.scrolled .mobile-categories-container {
	    grid-template-columns: 1fr;
	    gap: 20px;
	    padding: 20px;
	  }
	  
	  .site-header.scrolled .mobile-category-card {
	    padding-left: 15px;
	  }
	}
}

/* Buttons */
.btn{display:inline-block;padding:12px 24px;border-radius:28px;font-weight:800;border:1px solid var(--navy);text-decoration:none;cursor:pointer;transition:transform .25s ease, box-shadow .25s ease}
.btn-primary{background:var(--yellow);color:var(--navy)}
.btn-ghost{background:#fff;color:var(--navy)}
.btn:hover{transform:translateY(-3px);box-shadow:0 10px 24px rgba(0,45,98,.16)}
.btn-sm{padding:10px 16px;border-radius:20px}

/* ===== HERO SLIDER ===== */
.hero-slider{position:relative;width:100%;height:600px;overflow:hidden;background:linear-gradient(135deg, #0a1d3b 0%, #1a2f52 100%)}
.slider-container{position:relative;width:100%;height:100%;display:flex;align-items:center;justify-content:center}

/* Individual slide */
.slider-slide{position:absolute;inset:0;width:100%;height:100%;opacity:0;visibility:hidden;transition:opacity 1.2s cubic-bezier(0.4, 0, 0.2, 1), visibility 1.2s, transform 1.2s cubic-bezier(0.4, 0, 0.2, 1);transform:scale(1.08);will-change:opacity, transform}
.slider-slide.active{opacity:1;visibility:visible;transform:scale(1);z-index:2}
.slider-slide.prev{opacity:0;visibility:hidden;transform:scale(0.95)}

/* ===== ADVANCED TRANSITION ANIMATIONS ===== */

/* 1. Fade Transition (Default) */
.slider-slide.trans-fade{transform:scale(1.05)}
.slider-slide.trans-fade.active{transform:scale(1)}
.slider-slide.trans-fade.prev{transform:scale(0.98)}

/* 2. Slide from Top */
.slider-slide.trans-slideFromTop{transform:translateY(-100%) scale(1);opacity:0}
.slider-slide.trans-slideFromTop.active{transform:translateY(0) scale(1);opacity:1}
.slider-slide.trans-slideFromTop.prev{transform:translateY(20%) scale(0.95);opacity:0}

/* 3. Slide from Bottom */
.slider-slide.trans-slideFromBottom{transform:translateY(100%) scale(1);opacity:0}
.slider-slide.trans-slideFromBottom.active{transform:translateY(0) scale(1);opacity:1}
.slider-slide.trans-slideFromBottom.prev{transform:translateY(-20%) scale(0.95);opacity:0}

/* 4. Slide from Left */
.slider-slide.trans-slideFromLeft{transform:translateX(-100%) scale(1);opacity:0}
.slider-slide.trans-slideFromLeft.active{transform:translateX(0) scale(1);opacity:1}
.slider-slide.trans-slideFromLeft.prev{transform:translateX(20%) scale(0.95);opacity:0}

/* 5. Slide from Right */
.slider-slide.trans-slideFromRight{transform:translateX(100%) scale(1);opacity:0}
.slider-slide.trans-slideFromRight.active{transform:translateX(0) scale(1);opacity:1}
.slider-slide.trans-slideFromRight.prev{transform:translateX(-20%) scale(0.95);opacity:0}

/* 6. Zoom In */
.slider-slide.trans-zoom{transform:scale(0.5);opacity:0}
.slider-slide.trans-zoom.active{transform:scale(1);opacity:1}
.slider-slide.trans-zoom.prev{transform:scale(1.2);opacity:0}

/* 7. Split Vertical (Clip-path animation) */
.slider-slide.trans-splitVertical{clip-path:inset(0 50% 0 50%);opacity:1}
.slider-slide.trans-splitVertical.active{clip-path:inset(0 0% 0 0%);opacity:1}
.slider-slide.trans-splitVertical.prev{clip-path:inset(0 50% 0 50%);opacity:0}

/* 8. Split Horizontal (Clip-path animation) */
.slider-slide.trans-splitHorizontal{clip-path:inset(50% 0 50% 0);opacity:1}
.slider-slide.trans-splitHorizontal.active{clip-path:inset(0% 0 0% 0);opacity:1}
.slider-slide.trans-splitHorizontal.prev{clip-path:inset(50% 0 50% 0);opacity:0}

/* 9. Rotate In */
.slider-slide.trans-rotate{transform:rotate(15deg) scale(0.8);opacity:0;transform-origin:center center}
.slider-slide.trans-rotate.active{transform:rotate(0deg) scale(1);opacity:1}
.slider-slide.trans-rotate.prev{transform:rotate(-15deg) scale(0.8);opacity:0}

/* 10. Flip Horizontal */
.slider-slide.trans-flipH{transform:perspective(1000px) rotateY(90deg);opacity:0}
.slider-slide.trans-flipH.active{transform:perspective(1000px) rotateY(0deg);opacity:1}
.slider-slide.trans-flipH.prev{transform:perspective(1000px) rotateY(-90deg);opacity:0}

/* Content animations for different transitions */
.slider-slide.trans-slideFromTop .slider-content,
.slider-slide.trans-slideFromBottom .slider-content{transition-delay:0.5s}

.slider-slide.trans-splitVertical .slider-content,
.slider-slide.trans-splitHorizontal .slider-content{transition-delay:0.6s}


/* Slide image with overlay */
.slider-slide img{width:100%;height:100%;object-fit:cover;display:block}
.slider-overlay{position:absolute;inset:0;background:linear-gradient(to right, rgba(10,29,59,0.85) 0%, rgba(10,29,59,0.4) 60%, transparent 100%);z-index:1}

/* Slide content */
.slider-content{position:absolute;left:7vw;top:50%;transform:translateY(-50%);z-index:2;color:#fff;max-width:600px;opacity:0;transition:opacity 0.8s ease 0.4s, transform 0.8s cubic-bezier(0.4, 0, 0.2, 1) 0.4s;transform:translateY(calc(-50% + 30px))}
.slider-slide.active .slider-content{opacity:1;transform:translateY(-50%)}
.slider-content h2{color:#ffd400;font-size:clamp(2rem, 4vw, 3.5rem);margin:0 0 12px;text-align:left;line-height:1.2;font-weight:900;text-shadow:0 4px 12px rgba(0,0,0,0.3)}
.slider-content p{font-size:clamp(1rem, 2vw, 1.35rem);color:#fff;margin:0;text-shadow:0 2px 8px rgba(0,0,0,0.4);font-weight:500}

/* Navigation buttons */
.slider-controls{position:absolute;inset:0;z-index:3;pointer-events:none;display:flex;align-items:center;justify-content:space-between;padding:0 clamp(12px, 2vw, 24px)}
.slider-btn{pointer-events:auto;width:50px;height:50px;border-radius:50%;background:rgba(255,255,255,0.15);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,0.3);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;font-size:18px}
.slider-btn:hover{background:rgba(255,212,0,0.9);transform:scale(1.1);box-shadow:0 8px 20px rgba(255,212,0,0.4);color:#0a1d3b}
.slider-btn:active{transform:scale(0.95)}

/* Dots navigation */
.slider-dots{position:absolute;bottom:24px;left:50%;transform:translateX(-50%);z-index:3;display:flex;gap:10px;padding:8px 16px;background:rgba(10,29,59,0.6);backdrop-filter:blur(10px);border-radius:24px;border:1px solid rgba(255,255,255,0.15)}
.slider-dot{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,0.4);cursor:pointer;transition:background 0.3s ease, transform 0.3s ease, width 0.3s ease;border:none;padding:0}
.slider-dot:hover{background:rgba(255,212,0,0.7);transform:scale(1.2)}
.slider-dot.active{background:#ffd400;width:32px;border-radius:5px}

/* Loading state */
.slider-container.loading::after{content:"";position:absolute;inset:0;background:rgba(10,29,59,0.9);z-index:100;display:flex;align-items:center;justify-content:center}

/* Performance: reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce){
  .slider-slide{transition-duration:0.3s}
  .slider-content{transition-duration:0.3s}
}

/* Responsive adjustments */
@media (max-width: 900px){
  .hero-slider{height:500px}
  .slider-content{left:5vw;max-width:85%}
  .slider-content h2{font-size:clamp(1.6rem, 5vw, 2.5rem)}
  .slider-content p{font-size:clamp(0.9rem, 3vw, 1.15rem)}
  .slider-btn{width:44px;height:44px;font-size:16px}
  .slider-overlay{background:linear-gradient(to top, rgba(10,29,59,0.9) 0%, rgba(10,29,59,0.5) 60%, transparent 100%)}
  .slider-content{top:auto;bottom:80px;transform:none;transition:opacity 0.8s ease 0.4s, transform 0.8s cubic-bezier(0.4, 0, 0.2, 1) 0.4s;transform:translateY(30px)}
  .slider-slide.active .slider-content{transform:translateY(0)}
}

@media (max-width: 600px){
  .hero-slider{height:420px}
  .slider-content{left:4vw;bottom:70px;max-width:90%}
  .slider-content h2{font-size:clamp(1.4rem, 6vw, 2rem);margin-bottom:8px}
  .slider-content p{font-size:clamp(0.85rem, 3.5vw, 1rem)}
  .slider-btn{width:40px;height:40px;font-size:14px}
  .slider-dots{bottom:16px;gap:8px;padding:6px 12px}
  .slider-dot{width:8px;height:8px}
  .slider-dot.active{width:24px}
}

/* Hero - Product Showcase */
.hero{min-height:auto;display:flex;align-items:center;position:relative;overflow:hidden;background:linear-gradient(180deg, #f8f9fa 0%, #ffffff 50%, #f8f9fa 100%);padding:50px 7vw 40px;margin-top:-2px}
.hero-inner{max-width:1400px;margin:0 auto;width:100%;position:relative}

/* Hero Header */
.hero-header{text-align:center;margin-bottom:40px;padding-top:10px}
.hero-header h2{font-size:clamp(2rem, 4vw, 3.2rem);color:var(--navy);margin:0 0 16px;font-weight:900}
.hero-header p{font-size:clamp(1.05rem, 2vw, 1.25rem);color:#555;margin:0;max-width:700px;margin:0 auto}

/* Animation Container Wrapper */
.hero-inner > .marquee,
.hero-inner > .solar-system {
    margin-bottom: 40px;
}

/* ===== INFINITE MARQUEE - LOGO SHOWCASE ===== */
:root {
  --marquee-width: 80vw;
  --marquee-height: 20vh;
  --marquee-elements-displayed: 5;
  --marquee-element-width: calc(var(--marquee-width) / var(--marquee-elements-displayed));
  --marquee-elements: 8;
  --marquee-animation-duration: 16s;
}

.marquee {
  width: var(--marquee-width);
  height: var(--marquee-height);
  background-color: transparent;
  color: #111;
  overflow: hidden;
  position: relative;
  margin: 40px auto;
}

.marquee:before, 
.marquee:after {
  position: absolute;
  top: 0;
  width: 10rem;
  height: 100%;
  content: "";
  z-index: 1;
  pointer-events: none;
}

.marquee:before {
  left: 0;
  background: linear-gradient(to right, #ffffff 0%, transparent 100%);
}

.marquee:after {
  right: 0;
  background: linear-gradient(to left, #ffffff 0%, transparent 100%);
}

.marquee-content {
  list-style: none;
  height: 100%;
  display: flex;
  animation: scrolling 16s linear infinite;
  animation-play-state: running;
  margin: 0;
  padding: 0;
  will-change: transform;
}

@keyframes scrolling {
  0% { 
    transform: translate3d(0, 0, 0); 
  }
  100% { 
    transform: translate3d(-50%, 0, 0); 
  }
}

.marquee-content li {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  width: var(--marquee-element-width);
  max-height: 100%;
  white-space: nowrap;
  padding: 20px;
}

.marquee-content li img {
  width: 100%;
  height: auto;
  max-height: 120px;
  object-fit: contain;
  border: 2px solid #eee;
  border-radius: 8px;
  padding: 10px;
  background: #fff;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
}

.marquee-content li img:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

/* Mobil Responsive */
@media (max-width: 600px) {
  :root {
    --marquee-width: 100vw;
    --marquee-height: 16vh;
    --marquee-elements-displayed: 3;
    --marquee-elements: 8;
    --marquee-animation-duration: 16s;
  }
  
  .marquee:before, 
  .marquee:after { 
    width: 5rem; 
  }
  
  .marquee {
    margin: 30px auto;
  }
  
  .marquee-content li {
    padding: 15px;
  }
  
  .marquee-content li img {
    max-height: 80px;
  }
}

/* Product Showcase - Keep existing structure */
.product-showcase{
	display:flex;
	flex-direction:row;
	gap:24px;
	margin-bottom:50px;
	padding:0 7vw 20px;
	position:relative;
}

/* Showcase wrapper for navigation buttons */
.product-showcase-wrapper{position:relative}

/* Product Card */
.product-card{
	background:#fff;
	border-radius:16px;
	overflow:hidden;
	box-shadow:0 4px 12px rgba(0,0,0,.06);
	transition:all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
	cursor:pointer;
	position:relative;
	flex:0 0 200px;
	min-width:200px;
	max-width:200px;
	border:none;
}

/* Clone kartlar için animasyon yok - REMOVED fadeInUp animation */

/* Stagger animation for cards - REMOVED */

/* Hover Effect - Sadece gölge, şişme yok */
.product-card:hover{box-shadow:0 8px 20px rgba(0,0,0,.1);z-index:10}

/* Product Image Container */
.product-image{
	position:relative;
	width:100%;
	height:180px;
	overflow:hidden;
	background:linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
	display:flex;
	align-items:center;
	justify-content:center;
	padding:16px;
	border:none;
}

.product-image img{width:100%;height:100%;object-fit:contain;transition:all 0.5s cubic-bezier(0.4, 0, 0.2, 1)}

/* Hover'da görsel animasyonu - Kaldırıldı */

/* Product Info */
.product-info{padding:24px;background:#fff;position:relative}
.product-info h3{font-size:1.35rem;color:var(--navy);margin:0 0 10px;font-weight:800;transition:color 0.3s ease}
.product-info p{font-size:0.95rem;color:#666;margin:0;line-height:1.5}

/* Hover efektleri kaldırıldı - Sadece gölge var */

/* Hero CTA */
.hero-cta{text-align:center;margin-top:20px;position:relative}
.btn-large{font-size:1.15rem;padding:16px 40px;box-shadow:0 8px 20px rgba(255,212,0,0.3)}
.btn-large:hover{box-shadow:0 12px 28px rgba(255,212,0,0.4);transform:translateY(-4px) scale(1.02)}

/* Scroll Indicator - KALDIRILDI (şık değil) */
.scroll-indicator{display:none !important}

/* Sections */
section{padding:64px 7vw;scroll-margin-top:80px}

/* ===== SCROLL REVEAL ANIMATIONS ===== */
/* Performans için devre dışı - scroll-reveal.js ile aktif edilir */
/*
.hero, section, .card, .sosyal-card, .yorum-item{
	opacity:0;
	transform:translateY(30px);
	transition:opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1), transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}
*/

/* Scroll reveal devre dışıyken elementler görünür olsun */
.hero, section, .card, .sosyal-card, .yorum-item{
	opacity:1;
	transform:translateY(0);
	transition:opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1), transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

/* İlk görünen elementler hemen visible */
.hero, section:first-of-type{
	opacity:1;
	transform:translateY(0);
}

/* Scroll ile görünür olanlar - scroll-reveal.js aktifse kullanılır */
.hero.revealed, section.revealed, .card.revealed, .sosyal-card.revealed, .yorum-item.revealed{
	opacity:1;
	transform:translateY(0);
}

/* Kartlara stagger efekti */
.card{
	transition-delay:0.1s;
}
.card:nth-child(2){transition-delay:0.2s}
.card:nth-child(3){transition-delay:0.3s}
.card:nth-child(4){transition-delay:0.4s}

.sosyal-card{
	transition-delay:0.15s;
}
.sosyal-card:nth-child(2){transition-delay:0.3s}
.sosyal-card:nth-child(3){transition-delay:0.45s}

h2{color:var(--navy);font-size:clamp(1.6rem,3vw,2.2rem);margin:0 0 34px;text-align:center}
.grid-3{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:26px;max-width:1200px;margin:0 auto}
.card{background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 6px 20px rgba(0,0,0,.08);transition:transform .25s ease, box-shadow .25s ease}
.card:hover{transform:translateY(-6px);box-shadow:0 14px 30px rgba(0,0,0,.12)}
.card img{width:100%;height:220px;object-fit:cover}
.card-body{padding:18px}
.card-body h3{margin:0 0 8px;color:var(--navy);font-size:1.12rem}
.link{color:var(--navy);font-weight:700}

/* Blog */
.blog{background:#fff}
.blog h2{text-align:center;margin-bottom:50px;font-size:2.2rem}

/* Utilities */
.text-center{ text-align: center !important; }
.centered-icon{ display:block; margin:0 auto; }

/* Sosyal Sorumluluk - Blog tarzı kartlar */
.sosyal{background:var(--navy);color:#fff}
.sosyal h2{color:var(--yellow)}
.sosyal-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:30px;margin-top:40px}

.social-card {
  background: rgba(255,255,255,.95);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 8px 30px rgba(0,0,0,.15);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
  display: flex;
  flex-direction: column;
}

.social-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 15px 50px rgba(255,212,0,.3);
}

.social-card img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.social-card:hover img {
  transform: scale(1.08);
}

.social-card .card-body {
  padding: 25px;
  color: #2c3e50;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.social-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  background: linear-gradient(135deg, var(--yellow) 0%, #ffb700 100%);
  border-radius: 50%;
  margin-bottom: 15px;
}

.social-icon i {
  font-size: 24px;
  color: var(--navy);
}

.social-category {
  display: inline-block;
  background: var(--navy);
  color: var(--yellow);
  padding: 5px 15px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 12px;
}

.social-card h3 {
  font-size: 22px;
  color: var(--navy);
  margin: 10px 0;
  line-height: 1.4;
  font-weight: 700;
}

.social-card p {
  color: #555;
  font-size: 15px;
  line-height: 1.7;
  margin: 10px 0 15px;
  flex: 1;
}

.social-meta {
  display: flex;
  align-items: center;
  gap: 15px;
  padding-top: 15px;
  border-top: 1px solid #ecf0f1;
  margin-top: auto;
}

.social-date {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: #777;
}

.social-date i {
  color: var(--yellow);
}

/* Yorum */
.yorum{background:#f5f6f8}
.yorum-container{max-width:760px;margin:0 auto;background:#fff;padding:22px;border-radius:12px;box-shadow:0 8px 26px rgba(0,0,0,.08)}
.yorum textarea{width:100%;min-height:120px;padding:12px;border:1px solid #ddd;border-radius:8px;resize:vertical}
.yorum button{margin-top:10px}
.yorum-list{margin-top:16px;display:grid;gap:10px}
.yorum-item{background:#f8f8f8;padding:12px;border-radius:10px;border-left:4px solid var(--yellow)}

/* Footer (partial) temel düzen) */
.site-footer{background:var(--navy);color:#fff}

/* Responsive */
@media (max-width: 1200px){
	section{padding:56px 6vw}
	.hero{padding:40px 6vw 30px}
	.hero-header{margin-bottom:30px;padding-top:8px}
	.card img{height:200px}
	
	/* Orta boyutlu ekranlar için kart ayarı */
	.product-card{
		flex:0 0 220px;
		min-width:220px;
		max-width:220px;
	}
	.product-image{height:200px}
}
@media (max-width: 900px){
	.site-header .nav{padding:10px max(12px,4vw) 10px 5vw}
	.logo img{height:48px}
	.site-header.scrolled .logo img{height:48px}
	
	.hero{padding:25px 6vw 8px;margin-top:-1px}
	.hero-header{margin-bottom:18px;padding-top:5px}
	.hero-header h2{font-size:clamp(1.6rem, 5vw, 2rem);margin-bottom:8px}
	.hero-header p{font-size:clamp(0.9rem, 3vw, 1.05rem);margin-bottom:5px}
	
	/* Mobile: Kart boyutları - Daha küçük */
	.product-card{
		flex:0 0 140px;
		min-width:140px;
		max-width:140px;
		border-radius:10px;
		box-shadow:0 2px 8px rgba(0,0,0,.06);
	}
	
	/* Mobilde kart boyutları */
	.product-image{
		height:110px;
		padding:8px;
	}
	.grid-3{gap:20px}
	.btn{padding:11px 20px}
}
@media (max-width: 600px){
	section{padding:44px 5vw}
	.logo img{height:42px}
	.site-header.scrolled .logo img{height:42px}
	
	.hero{padding:16px 5vw 2px}
	.hero-header{margin-bottom:12px;padding-top:0}
	.hero-inner > .marquee{ margin-bottom: 10px; }
	.product-showcase{ margin-bottom: 12px; padding: 0 5vw 6px; }
	.hero-header h2{font-size:clamp(1.5rem, 5.5vw, 1.9rem);margin-bottom:6px}
	.hero-header p{font-size:clamp(0.85rem, 3vw, 0.95rem);margin-bottom:4px}
	
	/* Mobile Carousel - Çok küçük ekranlar için */
	.product-card{
		flex:0 0 120px;
		min-width:120px;
		max-width:120px;
		border-radius:8px;
	}
	
	.product-image{
		height:95px;
		padding:6px;
	}
	
	.btn-large{font-size:1rem;padding:14px 32px}
	.card img{height:180px}
	.sosyal-card{padding:18px}
	.yorum-container{padding:18px}
}

/* Çok küçük ekranlar için - En kompakt görünüm */
@media (max-width: 480px){
	.hero{padding:12px 5vw 2px}
	.hero-header{margin-bottom:10px;padding-top:0}
	.hero-inner > .marquee{ margin-bottom: 8px; }
	.product-showcase{ margin-bottom: 10px; padding: 0 5vw 4px; }
	.hero-header h2{font-size:clamp(1.4rem, 5vw, 1.7rem);margin-bottom:5px}
	.hero-header p{font-size:clamp(0.8rem, 3vw, 0.9rem);margin-bottom:3px}
	
	.product-card{
		flex:0 0 100px;
		min-width:100px;
		max-width:100px;
		border-radius:8px;
	}
	
	.product-image{
		height:80px;
		padding:5px;
	}
}

/* Scroll-to-top button (bottom-right) */
#scrollTopBtn{position:fixed;right:clamp(14px,3vw,24px);bottom:calc(env(safe-area-inset-bottom, 0px) + clamp(14px,3vw,24px));
	width:56px;height:56px;border-radius:50%;background:#fff;border:1px solid #e6e6e6;display:flex;align-items:center;justify-content:center;
	box-shadow:0 10px 24px rgba(0,0,0,.12);cursor:pointer;z-index:110;opacity:0;transform:translateY(12px);pointer-events:none;
	transition:opacity .25s ease, transform .25s ease, box-shadow .25s ease}
#scrollTopBtn .ring{position:absolute;inset:0;margin:auto}
#scrollTopBtn .ring .bg{fill:none;stroke:#e8e8e8;stroke-width:4}
#scrollTopBtn .ring .fg{fill:none;stroke:var(--navy);stroke-width:4;stroke-linecap:round;transform:rotate(-90deg);transform-origin:50% 50%;
	stroke-dasharray:125.66; /* 2*pi*20 */ stroke-dashoffset:125.66;transition:stroke-dashoffset .1s linear}
#scrollTopBtn i{position:relative;color:var(--navy);font-size:18px}
#scrollTopBtn:hover{box-shadow:0 14px 32px rgba(0,0,0,.18)}
#scrollTopBtn.show{opacity:1;transform:translateY(0);pointer-events:auto}

@media (max-width: 600px){
	#scrollTopBtn{width:52px;height:52px}
}

/* ===== PAGES: STORES (CSS artık magazalarimiz.html içinde inline) ===== */
/* Eski mağaza stilleri kaldırıldı - tüm stiller inline olarak taşındı */

/* ===== BLOG CARDS - Ana Sayfa ===== */
.our-blogs {
  padding: 80px 20px;
  max-width: 1400px;
  margin: 0 auto;
}

.our-blogs .section-title {
  text-align: center;
  font-size: 42px;
  font-weight: 900;
  color: var(--navy);
  margin-bottom: 50px;
  position: relative;
  padding-bottom: 20px;
}

.our-blogs .section-title::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 4px;
  background: linear-gradient(90deg, var(--yellow), #ffeb99);
  border-radius: 2px;
}

.blog-card {
  background: #fff;
  border-radius: 15px;
  overflow: hidden;
  box-shadow: 0 5px 20px rgba(0,0,0,0.08);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
  position: relative;
}

.blog-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(255,212,0,0.05), rgba(10,29,59,0.02));
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
  z-index: 1;
}

.blog-card:hover {
  transform: translateY(-12px);
  box-shadow: 0 20px 45px rgba(0,0,0,0.15);
}

.blog-card:hover::before {
  opacity: 1;
}

.blog-card img {
  width: 100%;
  height: 250px;
  object-fit: cover;
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.blog-card:hover img {
  transform: scale(1.08);
}

.blog-card .card-body {
  padding: 25px;
  position: relative;
  z-index: 2;
}

.blog-category {
  display: inline-block;
  background: var(--yellow);
  color: var(--navy);
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 15px;
  border: 3px solid var(--yellow);
  box-shadow: 0 2px 8px rgba(255,212,0,0.3);
}

.blog-card h3 {
  font-size: 22px;
  font-weight: 800;
  color: var(--navy);
  margin: 0 0 15px;
  line-height: 1.3;
  transition: color 0.3s ease;
}

.blog-card:hover h3 {
  color: #1a4d7a;
}

.blog-card p {
  color: #666;
  font-size: 15px;
  line-height: 1.7;
  margin: 0 0 20px;
}

.blog-meta {
  display: flex;
  gap: 20px;
  font-size: 13px;
  color: #999;
  flex-wrap: wrap;
  align-items: center;
}

.blog-meta span {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
}

.blog-meta i {
  color: var(--yellow);
  font-size: 14px;
}

.all-blogs-btn {
  display: inline-block;
  margin-top: 40px;
  padding: 16px 40px;
  background: var(--yellow);
  color: var(--navy);
  text-decoration: none;
  border-radius: 30px;
  font-weight: 700;
  font-size: 16px;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 8px 20px rgba(255,212,0,0.3);
  position: relative;
  overflow: hidden;
  border: 3px solid var(--yellow);
}

.all-blogs-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(10,29,59,0.1), transparent);
  transition: left 0.6s ease;
}

.all-blogs-btn:hover::before {
  left: 100%;
}

.all-blogs-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 30px rgba(255,212,0,0.4);
  background: #ffdd33;
}

@media (max-width: 768px) {
  .our-blogs {
    padding: 60px 15px;
  }
  
  .our-blogs .section-title {
    font-size: 32px;
  }
  
  .blog-card img {
    height: 200px;
  }
}