/* -----------------------------------
   Google Font + Font-Awesome (ikon) 
----------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css');

/* ----------  RENK DEĞİŞKENLERİ ---------- */
:root{
  --orange-1:#ffd27d;
  --orange-2:#f6b455;
  --cyan:#60d7e8;
  --white:#ffffff;
  --gray:#444;
  --radius:18px;
  --shadow:0 6px 18px rgba(0,0,0,.14);
}

*{box-sizing:border-box;margin:0;padding:0;font-family:"Poppins",sans-serif;}
img{max-width:130%;display:block}
body{background:var(--cyan);line-height:1.5;color:var(--gray);}

/* ----------  YARDIMCI SINIFLAR ---------- */
.container{max-width:1280px;margin-inline:auto;padding-inline:24px;}
.btn{
  display:inline-block;border:none;cursor:pointer;font-size:.9rem;
  padding:.65rem 1.6rem;border-radius:26px;font-weight:600;
  transition:.25s;
}
.btn.fill{background:var(--orange-2);color:#fff;box-shadow:var(--shadow);}
.btn.white{background:#fff;color:var(--gray);}
.btn.fill:hover{filter:brightness(.94)}
.btn.white:hover{background:var(--orange-2);color:#fff}

/* ----------  HEADER / NAV ---------- */
header{
  width:100%;position:fixed;left:0;top:0;z-index:50;
  background:transparent;padding:24px 0;
}
.nav{display:flex;align-items:center;justify-content:space-between;gap:28px;}
.nav-left{display:flex;align-items:center;gap:60px;}
.logo{display:flex;gap:2px;}
.logo span{
  width:34px;height:34px;border-radius:6px;background:var(--orange-2);
  display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;
}
.nav ul{display:flex;gap:38px;list-style:none;font-size:.95rem;font-weight:500;}
.nav a{text-decoration:none;color:var(--gray);position:relative;}
.nav a::after{
  content:'';position:absolute;left:0;bottom:-8px;width:0;height:2px;
}
.nav a:hover::after{width:100%;}
/* search */
.search-box{
  position:relative;max-width:270px;width:100%;
}
.search-box input{
  width:100%;padding:.65rem 48px .65rem 16px;border-radius:50px;border:none;
  box-shadow:var(--shadow);outline:none;font-size:.9rem;
}
.search-box i{
  position:absolute;right:18px;top:50%;transform:translateY(-50%);color:#aaa;
  font-size:1rem;
}
.nav-icons{display:flex;gap:28px;font-size:1.2rem;color:var(--gray);}
.nav-icons i{cursor:pointer;transition:.25s;}
.nav-icons i:hover{color:var(--orange-2);}

/* ----------  HERO ---------- */
.hero{
  background:linear-gradient(180deg,var(--orange-1) 0%,var(--orange-2) 100%);
  min-height:640px;padding-top:120px;position:relative;overflow:hidden;
}
.hero::before{          /* dikey ayırıcı */
  content:'';position:absolute;right:33%;top:0;width:1px;height:100%;
  background:rgba(0,0,0,.06);
}
.hero .boat-set{position:absolute;right:3%;bottom:0;width:36vw;min-width:340px;}
.hero .submarine{position:absolute;right:8%;top:160px;width:200px;}
.hero-content{max-width:540px;color:#fff;padding-top:40px;}
.hero-content h1{
  font-size:3.2rem;font-weight:700;line-height:1.2;margin-bottom:14px;margin-top:60px;
}
.hero-content p{font-size:.95rem;margin-bottom:32px;color:#fff;}
.hero-buttons .btn{margin-right:22px;}

/* ----------  SEKSİYON ORTA BAŞLIKLARI ---------- */
section{padding:80px 0;text-align:center;}
section h2{
  font-size:2.6rem;color:#fff;font-weight:700;margin-bottom:60px;
  text-shadow:0 3px 6px rgba(0,0,0,.2);
}

/* ----------  ÜRÜN KART IZGARASI ---------- */
.product-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  gap:32px;max-width:1100px;margin-inline:auto;
}
.card{
  background:#fff;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);
  display:flex;flex-direction:column;position:relative;
}
.card .discount{
  position:absolute;top:12px;left:50%;transform:translateX(-50%);
  background:var(--cyan);color:#fff;font-size:.7rem;font-weight:600;
  padding:4px 14px;border-radius:12px;
}
.card .thumb{
  background:#ffe8e0;border-bottom:1px solid #eee;padding:34px 24px;height:220px;
  display:flex;align-items:center;justify-content:center;
}
.card .thumb.pink{background:#ffdfe4}
.card .thumb.yellow{background:#fef4d5}
.card-body{padding:22px 20px;font-size:.82rem;text-align:left;flex:1}
.card-body h4{font-size:1.05rem;margin-bottom:6px;color:var(--gray);}
.card-body p{font-size:.75rem;height:38px;overflow:hidden;margin-bottom:10px;}
.price{font-weight:600;margin-bottom:14px;display:block;font-size:.9rem;}
.card button{width:100%}

/* ----------  REVIEW & BLOG KUTULARI ---------- */
.review-wrap,
.blog-wrap{
  display:flex;flex-wrap:wrap;gap:32px;justify-content:center;max-width:1100px;
  margin-inline:auto;
}
.review{
  flex:1 1 300px;background:#c6f6ff;border-radius:var(--radius);
  padding:28px 34px;text-align:left;position:relative;
}
.review:nth-child(2){background:#fff4cc}
.review:nth-child(3){background:#c6f6ff}
.review:after{
  content:"”";position:absolute;right:28px;bottom:16px;font-size:4rem;
  color:var(--orange-2);line-height:1;font-family:serif;
}
.review h4{font-size:1rem;margin-bottom:6px;}
.review p{font-size:.8rem;}
.blog{
  flex:1 1 320px;background:#fff;border-radius:var(--radius);overflow:hidden;
  box-shadow:var(--shadow);text-align:left;
}
.blog img{height:180px;width:100%;object-fit:cover}
.blog-inner{padding:22px;}
.blog h5{font-size:1.05rem;margin-bottom:8px}
.blog a.more{color:var(--orange-2);font-size:.8rem;font-weight:600;text-decoration:none}

/* ----------  FOOTER ---------- */
footer{
  background:#fff;padding:90px 0 40px;text-align:left;margin-top:60px;margin-top: 0px;
}
.footer-grid{
  max-width:1280px;margin-inline:auto;padding-inline:24px;
  display:grid;gap:60px;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
}
footer h6{font-weight:600;margin-bottom:14px;font-size:1rem;color:var(--gray);}
footer p,footer a,footer li{font-size:.85rem;line-height:1.75;color:var(--gray);}
footer ul{list-style:none;padding:0}
footer a{text-decoration:none}
footer a:hover{color:var(--orange-2)}
.social{display:flex;gap:18px;margin-top:14px;font-size:1.2rem;}
.social a{color:var(--gray)}
.social a:hover{color:var(--orange-2)}
.subs input{
  width:100%;padding:.7rem 1rem;border:2px solid var(--cyan);
  border-radius:26px;margin-bottom:12px;font-size:.85rem;outline:none;
}
.copyright{text-align:center;margin-top:60px;font-size:.8rem;color:#888}

/* Header’a scroll sonrası arka plan + gölge */
header.scrolled{
  background:rgba(255,255,255,.95);
  backdrop-filter:saturate(180%) blur(12px);
  background: #fff url('images/header-texture.png') repeat;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  border-bottom: 1px solid rgba(0,0,0,0.05);
}

/* Scroll olduğunda koyu metin rengine dön */
header.scrolled .nav a,
header.scrolled .nav-icons i{
  color:var(--gray);
  color: #333;
  font-weight: 600;

}

/*  ▸ saydam hâlde menü içeriğin üzerinde beyaz görünsün  */
.nav a{color:#fff;}           /* (mevcut kuralı buna güncelleyin) */
.nav-icons i{color:#fff;}     /* (mevcut kuralı buna güncelleyin) */


.price{
  position:relative;          /* del’i mutlak konumlamak için */
  font-size:1.25rem;          /* ana (yeni) fiyat boyutu      */
  font-weight:600;
  display:inline-block;
}

/* eski fiyat: sağ-üst köşeye, daha küçük, üstü çizili */
.price del{
  position:absolute;
  top:-0.55em;                /* dikey ofset – isteğe göre ayarlayın */
  right:-0.1em;               /* yatay ofset                       */
  font-size:0.68em;           /* yeni fiyata oranla daha küçük     */
  color:#a0a0a0;
}

/* --- Reviews genel alan ------------------------------------------------ */
.reviews{
  background:var(--primary);            /* mevcut mavi arka plan renginiz   */
  padding-top:90px;                     /* section başlık mesafeleri        */
}

/* başlık zaten .section h2 tarafından tanımlı */

/* --- Kart dizilimi ----------------------------------------------------- */
.review-wrap{
  display:flex;gap:36px;flex-wrap:wrap;
  justify-content:center;max-width:1100px;margin-inline:auto;
}

/* kart ana stil */
.review{
  flex:1 1 320px;
  border-radius:var(--radius);
  padding:34px 38px 60px;        /* altta extra boşluk: quote ikonu için */
  position:relative;
  box-shadow:0 6px 18px rgba(0,0,0,.08);
  text-align:left;
}

/* açık mavi & açık sarı arkaplan varyantları */
.review.cyan{background:#c9f6ff;}
.review.sand{background:#fff4d6;}

/* isim & paragraf yazıları */
.review h4{
  font-size:1.1rem;margin-bottom:10px;font-weight:600;color:var(--gray);
}
.review p{font-size:.9rem;line-height:1.6;color:var(--gray);}

/* sağ-alt tırnak ikonunu ::after pseudo ile çiz */
.review::after{
  content:"\201D";                      /* ”  Unicode */
  font-family:serif;font-size:4.2rem;
  line-height:1;
  color:var(--orange-2);
  position:absolute;right:28px;bottom:12px;
}

/* --- menü öğesi konumlandırma --- */
.nav-left ul li{position:relative;}

/* --- alt-menü kutusu --- */
/*  ▼ style.css’e EKLEYİN  (veya var olan .submenu kuralını böyle güncelleyin) */
.submenu{
  background-image: url('images/cloud-icon.png'); /* Kendi bulut görselini koy */
  background-repeat: no-repeat;
  background-position: top center;
  position:absolute;
  background-size: 40px;
  padding-top: 50px; /* üst boşluk bulut için */
  left:0;
  top:110%;
  display:flex;           /* ① */
  flex-direction:column;  /* ② satırları alt alta */
  min-width: 180px;  /* daha dar hale getirir */
  padding:2px 0;
  background:#fff;
  border-radius:var(--radius);
  box-shadow:0 12px 28px rgba(0,0,0,.12);
  opacity:0;
  visibility:hidden;
  transform:translateY(10px);
  transition:.25s ease;
  z-index:99;
}

/* --- alt-menü görünürken --- */
.dropdown:hover .submenu{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
}

.submenu-icon {
  text-align: center;
  padding: 8px 0;
  font-size: 1.2rem;
  color: var(--orange-2);
}


.submenu li a{
  display:block;
  font-size: 0.85rem; /* varsayılan 0.9'dan daha küçük */
  padding: 8px 20px;  /* daha az iç boşluk */
  color:var(--gray);
  white-space:nowrap;
  transition:background .2s,color .2s;
  line-height: 1.2;
}
.submenu li a:hover{
  background:var(--primary);   /* açık mavi zemin  */
  color:#fff;                  /* beyaz yazı       */
}
/* Ok simgesi (küçük) */
.dropdown > a i{
  font-size:.7rem;
  margin-left:6px;
}

/* ------------------------------------------------------------------
   - Mobilde (<=720 px) menüyü gizleyip hamburger kullanıyorsanız
     dropdown’u açmaya JS gerekebilir. Statik menüyü tamamen gösteriyorsanız
     ek işlem yok. */
/* ------------------------------------------------------------------ */


/* --- Pagination noktaları --------------------------------------------- */
.dots{
  display:flex;justify-content:center;gap:10px;margin-top:30px;
}
.dot{
  width:8px;height:8px;border-radius:50%;background:#fff;opacity:.35;
  transition:.25s;
}
.dot.active{width:10px;height:10px;opacity:1;}
.dot:hover{opacity:.6;cursor:pointer;}

.submenu a{color:var(--gray) !important;}

/* ---------- Popüler Karakterler ---------------------------- */
.characters{
  background:var(--primary);
  padding-top:100px;padding-bottom:110px;
}

/* başlık altı turuncu dalga efekti */
.characters h2::after{
  content:"";
  display:block;
  width:90px;height:4px;
  margin:12px auto 0;
  border-radius:4px;
  background:linear-gradient(90deg,#ffb441 0%,#ff7b1e 100%);
}

/* --- yatay kaydırma yapısı --- */
.char-row{
  position:relative;
  max-width:1240px;margin:0 auto;
}
.char-track{
  display:flex;gap:26px;
  overflow-x:auto;scroll-snap-type:x mandatory;
  padding:10px 34px;           /* ok butonlarıyla boşluk */
  scrollbar-width:none;        /* Firefox */
}
.char-track::-webkit-scrollbar{display:none;} /* Chrome */

/* ok butonları */
.characters .nav{
  position:absolute;top:50%;transform:translateY(-50%);
  border:none;background:rgba(0,0,0,.06);color:#555;
  width:36px;height:36px;border-radius:50%;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  font-size:1rem;transition:.25s;z-index:5;
}
.characters .nav:hover{background:rgba(0,0,0,.13);}
.characters .prev{left:0;}
.characters .next{right:0;}

/* kart */
.char-card{
  width:290px;min-width:290px;
  background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);
  padding:22px 24px 34px;
  text-align:center;
  scroll-snap-align:start;
}
.thumb{
  width:100%;height:160px;border-top-left-radius:var(--radius);
  border-top-right-radius:var(--radius);position:relative;overflow:hidden;
  clip-path:ellipse(110% 100% at 50% 0%); /* yarım-daire */
}
.thumb img{position:absolute;bottom:0;left:50%;transform:translateX(-50%);
  max-height:110%;}

/* yarım daire arkaplan renkleri */
.thumb.pink{background:#e4368d;}
.thumb.red{background:#c30811;}
.thumb.green{background:#208740;}
.thumb.yellow{background:#fbf642;}

.logo{max-width:160px;margin:26px auto 18px;object-fit:contain;}

.char-card p{font-size:.85rem;color:var(--gray);min-height:80px;}

@media(max-width:600px){
  .characters .nav{display:none;} /* mobilde okları gizleyin */
  .char-card{min-width:240px;width:240px;}
}

.whatsapp-button {
  position: fixed;
  bottom: 24px;
  right: 24px;
  background: #25D366;
  color: white;
  font-size: 28px;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  z-index: 100;
  transition: background 0.3s;
}
.whatsapp-button:hover {
  background: #1ebd5a;
}


/* ----------  RESPONSIVE KÜÇÜK EKRAN ---------- */
@media(max-width:720px){
  .hero-content h1{font-size:2.3rem}
  .nav ul{display:none}           /* basitçe mobilde menüyü gizledik */
  .nav-left{gap:20px}
  .hero::before{display:none}
  .search-box{display:none}
}





.categories {
  background: var(--orange-2);
  padding: 60px 20px;
  text-align: center;
  margin-bottom: 0;
}

.categories h2 {
  font-size: 2.2rem;
  margin-bottom: 30px;
  color: var(--white);
}

.category-list {
  list-style: none;
  padding: 0;
  max-width: 700px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: center;
}

.category-list li a {
  text-decoration: none;
  background: var(--white);
  color: var(--gray);
  padding: 10px 18px;
  border-radius: 20px;
  transition: 0.3s;
  display: inline-block;
  font-size: 0.95rem;
}

.category-list li a:hover {
  background: var(--gray);
  color: #fff;
}

header.scrolled .logo img {
  max-height: 40px;
  transition: 0.3s ease;
}