/* FASTLIP Custom Styles */
/* Bu dosya orijinal Webflow CSS'in uzerine ekstra stiller ekler */

/* ===== FONT TANIMLARI ===== */
@font-face {
  font-family: 'Rohn Rounded';
  src: url('../fastlip-fonts/RohnRounded-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Rohn Rounded';
  src: url('../fastlip-fonts/RohnRounded-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Agency';
  src: url('../fastlip-fonts/agency.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ===== FASTLIP RENK DEGISKENLERI ===== */
:root {
  /* Marka Renkleri */
  --fastlip-primary: #1a1a1a;
  --fastlip-secondary: #f5f5f5;
  --fastlip-accent: #00B060;

  /* Urun Varyant Renkleri */
  --fastlip-b12: #00B060;
  --fastlip-biotin: #A06030;
  --fastlip-d3k2: #D08020;
  --fastlip-enerji: #E06050;
  --fastlip-melatonin: #B04080;
  --fastlip-mouth: #0080A0;
  --fastlip-rlx: #30A090;

  /* Notr Renkler */
  --fastlip-white: #ffffff;
  --fastlip-off-white: #f8f7f4;
  --fastlip-dark: #1a1a1a;
  --fastlip-gray: #666666;
  --fastlip-light-gray: #e5e5e5;
}

/* ===== GENEL FONT AYARLARI ===== */
html, body {
  font-family: 'Rohn Rounded', 'Manrope', sans-serif !important;
  overflow-x: hidden !important;
}

/* Basliklar icin Agency font */
h1, h2, h3,
.h1-heading,
.h2-heading,
.h3-heading,
.h1-heading.home-hero,
.h1-heading.home-hero.first,
.h1-heading.home-hero.second {
  font-family: 'Agency', 'Rohn Rounded', sans-serif !important;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

/* Paragraflar ve kucuk metinler */
p,
.paragraph,
.text-block,
.flavor-icon-title,
.benefit-icon-title,
.nav-secondary-link-block,
.cart-text,
.price-cms,
.button-text {
  font-family: 'Rohn Rounded', 'Manrope', sans-serif !important;
}

/* ===== HERO BANNER - Orijinal stili koru ===== */
/* .home-hero-background._01 orijinal kalsin, override yok */

/* ===== BUTON STILLERI ===== */
.main-button.dark-green {
  background-color: var(--fastlip-primary) !important;
  border-radius: 8px;
}

.main-button.dark-green:hover {
  background-color: var(--fastlip-accent) !important;
}

/* Genel buton */
.general-button,
.cart-checkout-button {
  background-color: var(--fastlip-accent) !important;
  font-family: 'Rohn Rounded', sans-serif !important;
  border-radius: 8px;
}

/* ===== URUN KARTLARI ===== */
.flavor-content-box-wrapper {
  transition: transform 0.3s ease;
}

.flavor-content-box-wrapper:hover {
  transform: translateY(-8px);
}

/* ===== FASTLIP OZEL SINIFLAR ===== */

/* Oral Film Badge */
.fastlip-badge {
  display: inline-block;
  padding: 4px 12px;
  background-color: var(--fastlip-accent);
  color: white;
  font-size: 12px;
  font-weight: 500;
  border-radius: 20px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Urun Renk Varyantlari */
.product-b12 { --product-color: var(--fastlip-b12); }
.product-biotin { --product-color: var(--fastlip-biotin); }
.product-d3k2 { --product-color: var(--fastlip-d3k2); }
.product-enerji { --product-color: var(--fastlip-enerji); }
.product-melatonin { --product-color: var(--fastlip-melatonin); }
.product-mouth { --product-color: var(--fastlip-mouth); }
.product-rlx { --product-color: var(--fastlip-rlx); }

/* Urun kartinda renk kullanimi */
.product-card[class*="product-"] .product-name {
  color: var(--product-color) !important;
}

/* ===== NAV GUNCELLEMELERI ===== */
.header-navigation {
  background-color: transparent;
}

.logo-image {
  /* Logo placeholder icin */
  max-height: unset !important;
}

/* ===== ANIMASYONLAR ===== */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fastlip-animate {
  animation: fadeInUp 0.6s ease forwards;
}

/* ===== RESPONSIVE ===== */
@media screen and (max-width: 991px) {
  h1, .h1-heading {
    font-size: 3rem !important;
  }

  h2, .h2-heading {
    font-size: 2rem !important;
  }
}

@media screen and (max-width: 767px) {
  h1, .h1-heading {
    font-size: 2.5rem !important;
  }

  h2, .h2-heading {
    font-size: 1.75rem !important;
  }
}

@media screen and (max-width: 479px) {
  h1, .h1-heading {
    font-size: 2rem !important;
  }

  h2, .h2-heading {
    font-size: 1.5rem !important;
  }
}