/* ================================================
   HOME — Hero + Features + Products Preview + CTA
   ================================================ */

/* ---- Shared Section Utilities ---- */
.section-tag {
   display: inline-block;
   font-family: var(--font-body);
   font-size: 0.72rem;
   font-weight: 600;
   letter-spacing: 0.12em;
   text-transform: uppercase;
   color: var(--color-gold);
   background-color: rgba(196, 161, 99, 0.1);
   border: 1px solid rgba(196, 161, 99, 0.3);
   padding: 0.28rem 0.85rem;
   border-radius: 100px;
   margin-bottom: 0.85rem;
}

.section-title {
   font-family: var(--font-heading);
   font-size: clamp(1.6rem, 3vw, 2.4rem);
   font-weight: 700;
   color: var(--color-primary);
   line-height: 1.2;
   letter-spacing: -0.025em;
   margin-bottom: 0.85rem;
}

.section-desc {
   font-family: var(--font-body);
   font-size: 1rem;
   color: var(--color-text-muted);
   line-height: 1.75;
}

.btn-outline {
   display: inline-flex;
   align-items: center;
   gap: 0.5rem;
   font-family: var(--font-body);
   font-size: 0.9rem;
   font-weight: 600;
   color: var(--color-primary);
   border: 2px solid var(--color-primary);
   padding: 0.65rem 1.75rem;
   border-radius: var(--radius-sm);
   transition: background-color 0.2s ease, color 0.2s ease;
}
.btn-outline:hover {
   background-color: var(--color-primary);
   color: var(--color-white);
}

/* ================================================
   HERO
   ================================================ */

.hero {
   min-height: 90vh;
   position: relative;
   display: flex;
   align-items: center;
   overflow: hidden;
   background: linear-gradient(135deg, #0a0a14 0%, #12122a 55%, #1e1e40 100%);
}

/* Izgara deseni */
.hero::before {
   content: '';
   position: absolute;
   inset: 0;
   background-image:
      linear-gradient(rgba(196, 161, 99, 0.04) 1px, transparent 1px),
      linear-gradient(90deg, rgba(196, 161, 99, 0.04) 1px, transparent 1px);
   background-size: 64px 64px;
   pointer-events: none;
}

/* Işık efekti */
.hero__bg { position: absolute; inset: 0; }
.hero__gradient {
   position: absolute;
   inset: 0;
   background:
      radial-gradient(ellipse 60% 70% at 70% 40%, rgba(196, 161, 99, 0.18) 0%, transparent 65%),
      radial-gradient(ellipse 40% 50% at 10% 80%, rgba(98, 0, 234, 0.12) 0%, transparent 60%);
}

.hero__content {
   position: relative;
   z-index: 2;
   width: 90%;
   max-width: var(--max-w);
   margin: 0 auto;
   padding: var(--section-py) 0;
   max-width: 660px;
   margin-left: max(5vw, calc((100vw - var(--max-w)) / 2 + 5vw));
}

.hero__badge {
   display: inline-flex;
   align-items: center;
   gap: 0.4rem;
   font-family: var(--font-body);
   font-size: 0.72rem;
   font-weight: 600;
   letter-spacing: 0.1em;
   text-transform: uppercase;
   color: var(--color-gold);
   background-color: rgba(196, 161, 99, 0.1);
   border: 1px solid rgba(196, 161, 99, 0.3);
   padding: 0.35rem 0.9rem;
   border-radius: 100px;
   margin-bottom: 1.4rem;
   animation: fadeSlideDown 0.6s ease both;
}

.hero__title {
   font-family: var(--font-heading);
   font-size: clamp(2.2rem, 5vw, 3.6rem);
   font-weight: 800;
   color: var(--color-white);
   line-height: 1.12;
   letter-spacing: -0.03em;
   margin-bottom: 1.25rem;
   animation: fadeSlideDown 0.6s ease 0.08s both;
}

.hero__title strong {
   color: var(--color-gold);
}

.hero__subtitle {
   font-family: var(--font-body);
   font-size: 1.05rem;
   color: rgba(255, 255, 255, 0.62);
   line-height: 1.75;
   max-width: 500px;
   margin-bottom: 2.25rem;
   animation: fadeSlideDown 0.6s ease 0.16s both;
}

/* ---- CTA Butonları ---- */
.hero__actions {
   display: flex;
   align-items: center;
   gap: 0.85rem;
   flex-wrap: wrap;
   margin-bottom: 3.5rem;
   animation: fadeSlideDown 0.6s ease 0.24s both;
}

.hero__btn {
   display: inline-flex;
   align-items: center;
   gap: 0.55rem;
   font-family: var(--font-body);
   font-size: 0.9rem;
   font-weight: 600;
   padding: 0.8rem 1.6rem;
   border-radius: var(--radius-sm);
   transition: all 0.22s ease;
   letter-spacing: 0.01em;
}
.hero__btn svg { width: 15px; height: 15px; }

.hero__btn--primary {
   background-color: var(--color-gold);
   color: var(--color-white);
   box-shadow: 0 4px 20px rgba(196, 161, 99, 0.35);
}
.hero__btn--primary svg { fill: var(--color-white); }
.hero__btn--primary:hover {
   background-color: var(--color-gold-dark);
   transform: translateY(-2px);
   box-shadow: 0 8px 28px rgba(196, 161, 99, 0.45);
   color: var(--color-white);
}

.hero__btn--secondary {
   background-color: transparent;
   color: var(--color-white);
   border: 2px solid rgba(255, 255, 255, 0.55);
   font-weight: 600;
}
.hero__btn--secondary svg { fill: var(--color-white); }
.hero__btn--secondary:hover {
   background-color: rgba(255, 255, 255, 0.1);
   border-color: var(--color-white);
   color: var(--color-white);
   transform: translateY(-2px);
}

/* ---- İstatistikler ---- */
.hero__stats {
   display: flex;
   align-items: center;
   gap: 2rem;
   animation: fadeSlideDown 0.6s ease 0.32s both;
}

.hero__stat {
   display: flex;
   flex-direction: column;
   gap: 0.2rem;
}

.hero__stat-number {
   font-family: var(--font-heading);
   font-size: 1.8rem;
   font-weight: 800;
   color: var(--color-gold);
   letter-spacing: -0.03em;
   line-height: 1;
}

.hero__stat-label {
   font-family: var(--font-body);
   font-size: 0.72rem;
   color: rgba(255, 255, 255, 0.4);
   text-transform: uppercase;
   letter-spacing: 0.07em;
}

.hero__stat-divider {
   width: 1px;
   height: 36px;
   background-color: rgba(255, 255, 255, 0.1);
   flex-shrink: 0;
}

/* ---- Scroll indikatörü ---- */
.hero__scroll {
   position: absolute;
   bottom: 2rem;
   left: 50%;
   transform: translateX(-50%);
   z-index: 2;
   animation: fadeIn 1s ease 0.8s both;
}

.hero__scroll span {
   display: block;
   width: 22px;
   height: 38px;
   border: 2px solid rgba(255, 255, 255, 0.2);
   border-radius: 100px;
   position: relative;
}

.hero__scroll span::after {
   content: '';
   position: absolute;
   width: 3px; height: 7px;
   background-color: var(--color-gold);
   border-radius: 2px;
   top: 5px;
   left: 50%;
   transform: translateX(-50%);
   animation: scrollBob 1.6s ease-in-out infinite;
}

/* ================================================
   PAGE HEADER (Ürünler / H.mızda / İletişim)
   ================================================ */

.page-header {
   background: linear-gradient(150deg, #0a0a14 0%, #1a1a2e 60%, #252550 100%);
   padding: clamp(3rem, 6vw, 5rem) 0;
   text-align: center;
   position: relative;
   overflow: hidden;
}

.page-header::after {
   content: '';
   position: absolute;
   width: 500px; height: 500px;
   border-radius: 50%;
   background: radial-gradient(circle, rgba(196,161,99,0.14) 0%, transparent 70%);
   top: -200px; right: -80px;
   pointer-events: none;
}

.page-header__container {
   width: 90%;
   max-width: var(--max-w);
   margin: 0 auto;
   position: relative;
   z-index: 1;
}

.page-header .section-tag {
   background-color: rgba(196,161,99,0.12);
   color: var(--color-gold);
}

.page-header__title {
   font-family: var(--font-heading);
   font-size: clamp(2rem, 5vw, 3.2rem);
   font-weight: 800;
   color: var(--color-white);
   letter-spacing: -0.03em;
   margin-bottom: 0.9rem;
   line-height: 1.15;
}

.page-header__desc {
   font-family: var(--font-body);
   font-size: 1rem;
   color: rgba(255, 255, 255, 0.55);
   line-height: 1.75;
   max-width: 520px;
   margin: 0 auto;
}

/* ================================================
   CTA BANNER (paylaşımlı)
   ================================================ */

.cta-banner {
   background: linear-gradient(135deg, #0d0d1f 0%, #1a1a35 100%);
   position: relative;
   overflow: hidden;
}

.cta-banner::before {
   content: '';
   position: absolute;
   width: 450px; height: 450px;
   border-radius: 50%;
   background: radial-gradient(circle, rgba(196,161,99,0.13) 0%, transparent 70%);
   top: -180px; left: -80px;
   pointer-events: none;
}

.cta-banner__container {
   width: 90%;
   max-width: var(--max-w);
   margin: 0 auto;
   padding: clamp(3rem, 6vw, 4.5rem) 0;
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 2.5rem;
   position: relative;
   z-index: 1;
}

.cta-banner__title {
   font-family: var(--font-heading);
   font-size: clamp(1.4rem, 3vw, 2.1rem);
   font-weight: 700;
   color: var(--color-white);
   letter-spacing: -0.025em;
   margin-bottom: 0.6rem;
   line-height: 1.2;
}

.cta-banner__desc {
   font-family: var(--font-body);
   font-size: 0.95rem;
   color: rgba(255, 255, 255, 0.55);
   line-height: 1.7;
   max-width: 480px;
}

.cta-banner__btn {
   display: inline-flex;
   align-items: center;
   gap: 0.65rem;
   background-color: var(--color-gold);
   color: var(--color-white);
   font-family: var(--font-heading);
   font-size: 1rem;
   font-weight: 700;
   padding: 0.9rem 2rem;
   border-radius: var(--radius-sm);
   white-space: nowrap;
   flex-shrink: 0;
   box-shadow: 0 4px 20px rgba(196, 161, 99, 0.3);
   transition: all 0.22s ease;
   letter-spacing: 0.02em;
}
.cta-banner__btn svg { width: 16px; height: 16px; fill: var(--color-white); }
.cta-banner__btn:hover {
   background-color: var(--color-gold-dark);
   transform: translateY(-2px);
   box-shadow: 0 8px 28px rgba(196, 161, 99, 0.42);
   color: var(--color-white);
}

/* ================================================
   FEATURES
   ================================================ */

.features {
   padding: var(--section-py) 0;
   background-color: var(--color-bg);
}

.features__container {
   width: 90%;
   max-width: var(--max-w);
   margin: 0 auto;
}

.features__header {
   text-align: center;
   margin-bottom: 3.5rem;
}
.features__header .section-desc { margin: 0 auto; max-width: 520px; }

.features__grid {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 1.25rem;
}

.feature-card {
   background-color: var(--color-white);
   border: 1px solid var(--color-border);
   border-radius: var(--radius);
   padding: 1.75rem 1.5rem;
   position: relative;
   overflow: hidden;
   transition: transform 0.28s ease, box-shadow 0.28s ease;
}

.feature-card::after {
   content: '';
   position: absolute;
   top: 0; left: 0; right: 0;
   height: 3px;
   background: linear-gradient(90deg, var(--color-gold), var(--color-gold-dark));
   transform: scaleX(0);
   transform-origin: left;
   transition: transform 0.3s ease;
}

.feature-card:hover {
   transform: translateY(-5px);
   box-shadow: 0 12px 40px rgba(0, 0, 0, 0.09);
}
.feature-card:hover::after { transform: scaleX(1); }

.feature-card__icon {
   width: 48px; height: 48px;
   background: rgba(196, 161, 99, 0.1);
   border-radius: 10px;
   display: flex;
   align-items: center;
   justify-content: center;
   margin-bottom: 1.1rem;
}
.feature-card__icon svg {
   width: 22px; height: 22px;
   fill: var(--color-gold);
}

.feature-card__title {
   font-family: var(--font-heading);
   font-size: 0.95rem;
   font-weight: 700;
   color: var(--color-primary);
   margin-bottom: 0.65rem;
}

.feature-card__desc {
   font-family: var(--font-body);
   font-size: 0.875rem;
   color: var(--color-text-muted);
   line-height: 1.7;
}

/* ================================================
   HOME PRODUCTS PREVIEW
   ================================================ */

.home-products {
   padding: var(--section-py) 0;
   background-color: var(--color-white);
}

.home-products__container {
   width: 90%;
   max-width: var(--max-w);
   margin: 0 auto;
}

.home-products__header {
   text-align: center;
   margin-bottom: 3rem;
}
.home-products__header .section-desc { margin: 0 auto; max-width: 480px; }

.home-products__grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 1.5rem;
   margin-bottom: 2.5rem;
}

/* ---- Ürün Kartı ---- */
.product-card {
   display: flex;
   flex-direction: column;
   background-color: var(--color-white);
   border: 1px solid var(--color-border);
   border-radius: var(--radius);
   overflow: hidden;
   transition: transform 0.28s ease, box-shadow 0.28s ease;
}
.product-card:hover {
   transform: translateY(-5px);
   box-shadow: 0 16px 48px rgba(0,0,0,0.1);
}

.product-card__img-wrap {
   aspect-ratio: 4 / 3;
   overflow: hidden;
   background-color: var(--color-bg);
   position: relative;
}
.product-card__img-wrap img {
   width: 100%; height: 100%;
   object-fit: cover;
   transition: transform 0.5s ease;
}
.product-card:hover .product-card__img-wrap img { transform: scale(1.06); }

.product-card__overlay {
   position: absolute; inset: 0;
   background: rgba(10, 10, 25, 0.55);
   display: flex;
   align-items: center;
   justify-content: center;
   opacity: 0;
   transition: opacity 0.28s ease;
}
.product-card:hover .product-card__overlay { opacity: 1; }

.product-card__overlay span {
   font-family: var(--font-heading);
   font-size: 0.82rem;
   font-weight: 600;
   color: var(--color-white);
   letter-spacing: 0.1em;
   text-transform: uppercase;
   border: 2px solid var(--color-gold);
   padding: 0.45rem 1.2rem;
   border-radius: 6px;
}

.product-card__body {
   padding: 1.1rem 1.25rem 1.4rem;
   flex: 1;
   display: flex;
   flex-direction: column;
   gap: 0.4rem;
}

.product-card__title {
   font-family: var(--font-heading);
   font-size: 0.95rem;
   font-weight: 700;
   color: var(--color-primary);
}

.product-card__desc {
   font-family: var(--font-body);
   font-size: 0.835rem;
   color: var(--color-text-muted);
   line-height: 1.6;
}

.home-products__empty {
   grid-column: 1 / -1;
   text-align: center;
   padding: 3.5rem 1rem;
   font-family: var(--font-body);
   color: var(--color-text-muted);
}

.home-products__cta { text-align: center; }

/* ================================================
   ANIMATIONS
   ================================================ */

@keyframes fadeSlideDown {
   from { opacity: 0; transform: translateY(-18px); }
   to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
   from { opacity: 0; } to { opacity: 1; }
}
@keyframes scrollBob {
   0%, 100% { transform: translateX(-50%) translateY(0); opacity: 1; }
   50%       { transform: translateX(-50%) translateY(9px); opacity: 0.35; }
}

/* ================================================
   SCROLL REVEAL (JS tarafından .is-visible class eklenir)
   ================================================ */

[data-reveal] {
   opacity: 0;
   transform: translateY(32px);
   transition: opacity 0.65s ease, transform 0.65s ease;
}
[data-reveal].is-visible {
   opacity: 1;
   transform: translateY(0);
}
[data-reveal='left'] {
   transform: translateX(-32px);
}
[data-reveal='left'].is-visible {
   transform: translateX(0);
}
[data-reveal='right'] {
   transform: translateX(32px);
}
[data-reveal='right'].is-visible {
   transform: translateX(0);
}
[data-reveal='scale'] {
   transform: scale(0.94);
}
[data-reveal='scale'].is-visible {
   transform: scale(1);
}

/* ================================================
   RESPONSIVE
   ================================================ */

@media (max-width: 1023px) {
   .features__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 767px) {
   .hero__content {
      width: 90%; margin: 0 auto;
      padding: calc(var(--section-py) + 1rem) 0 var(--section-py);
   }
   .hero__stats { flex-wrap: wrap; gap: 1.25rem; }
   .hero__stat-divider { display: none; }

   .home-products__grid { grid-template-columns: 1fr; }
   .features__grid { grid-template-columns: 1fr; gap: 1rem; }

   .cta-banner__container {
      flex-direction: column;
      text-align: center;
      gap: 1.75rem;
   }
   .cta-banner__desc { margin: 0 auto; }
}

@media (max-width: 480px) {
   .hero__actions { flex-direction: column; align-items: stretch; }
   .hero__btn { justify-content: center; }
   .home-products__grid { grid-template-columns: 1fr; }
}