/* =====================================================
   HEDİYE SANATI – CSS ANAYASASI (v1.0)

   Bu notlar SİTEYİ ETKİLEMEZ.
   Sadece bu dosya üzerinde çalışan herkes içindir.

   1️⃣ GLOBAL DONDURMA
      Global CSS sadece:
      - reset
      - body font-family
      - heading font-family
      içerir.
      Global’de font-size, margin, padding, line-height YASAK.

   2️⃣ SCOPE OLMADAN KURAL YAZILMAZ
      Yazılan her kural şu soruya cevap verir:
      “Bu kural NERENİN?”
      Cevap yoksa yazılmaz.

   3️⃣ AYNI İŞ İKİ KEZ YAPILMAZ
      Aynı ihtiyacı karşılayan ikinci kural BUG’dır.
      Önce ara, sonra yaz.

   4️⃣ YAMA YASAK
      Override üstüne override yapılmaz.
      Fazlalık silinir, alttaki çalışan kurala dönülür.

   5️⃣ TASARIM ≠ MİMARİ
      Görsel değişiklik ve mimari değişiklik
      aynı turda yapılmaz.

   Bu dosyayı bu kuralları okumadan değiştiren
   siteyi bozmuş sayılır.
===================================================== */


/* =====================================================
   HEDİYE SANATI – CSS (FAZ 1 / STABİL)
   Görünüm birebir aynı, fazlalıklar temizlenmiş
===================================================== */

/* RESET */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* SMOOTH SCROLL */
html {
  scroll-behavior: smooth;
}

/* BODY – GLOBAL (DONDURULDU) */
body {
  font-family: "Inter", system-ui;
  background: #f6f3ee;
  color: #111;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-synthesis: none;
}

/* GLOBAL HEADING FONT (TEK YER) */
h1, h2, h3, h4, h5, h6 {
  font-family: "Playfair Display", serif;
  font-weight: 500;
}

/* =====================================================
   HEADER / MENÜ
===================================================== */

.header {
  width: 100%;
  padding: 20px 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 999;
  background: #ffffff;
  border-bottom: 1px solid rgba(0,0,0,0.06);
  transition: 0.25s ease;
}

.header.shrink {
  padding: 12px 48px;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(6px);
}

.logo {
  width: 16px;
  height: 16px;
  background: #111;
  border-radius: 50%;
  display: block;
}

.nav-links {
  display: flex;
  gap: 28px;
}

.nav-links a {
  position: relative;
  text-decoration: none;
  color: #111;
  font-size: 14px;
  letter-spacing: 0.03em;
  font-weight: 500;
  opacity: 0.9;
  transition: 0.25s;
  padding-bottom: 4px;
}

.nav-links a::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0%;
  height: 2px;
  background: #111;
  transition: 0.3s ease;
}

.nav-links a:hover {
  opacity: 1;
}

.nav-links a:hover::after {
  width: 100%;
}

.hamburger {
  display: none;
  width: 26px;
  height: 20px;
  flex-direction: column;
  justify-content: space-between;
  cursor: pointer;
}

.hamburger span {
  width: 100%;
  height: 3px;
  background: #111;
  border-radius: 3px;
  transition: 0.3s;
}

.hamburger.active span:nth-child(1) {
  transform: translateY(9px) rotate(45deg);
}
.hamburger.active span:nth-child(2) {
  opacity: 0;
}
.hamburger.active span:nth-child(3) {
  transform: translateY(-9px) rotate(-45deg);
}

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

.premium-hero {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 100px;
  padding: 140px 120px;
  align-items: center;
}

.premium-hero img {
  width: 100%;
  border-radius: 16px;
}

.hero-title {
  font-size: 64px;
  font-weight: 500;
  line-height: 1.1;
  margin-bottom: 32px;
}

.hero-desc {
  font-size: 17px;
  opacity: .7;
  margin-bottom: 40px;
  max-width: 380px;
  line-height: 1.7;
}

.hero-buttons {
  display: flex;
  gap: 16px;
}

/* =====================================================
   BUTTONS
===================================================== */

.btn {
  padding: 12px 24px;
  border-radius: 999px;
  font-size: 14px;
  text-decoration: none;
  transition: 0.25s ease;
}

.btn.primary {
  background: #111;
  color: #fff;
}

.btn.primary:hover {
  background: #333;
}

.btn.outline {
  background: transparent;
  border: 1px solid #111;
  color: #111;
}

.btn.outline:hover {
  background: #111;
  color: #fff;
}

/* =====================================================
   COLLECTION
===================================================== */

.collection {
  padding: 120px 100px;
}

.collection h2 {
  font-size: 36px;
  margin-bottom: 60px;
  letter-spacing: -0.5px;
}

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 60px;
}

.card {
  transition: 0.35s ease;
}

.card img {
  width: 100%;
  border-radius: 16px;
  transition: 0.45s ease;
}

.card:hover img {
  transform: scale(1.04);
}

.card:hover {
  transform: translateY(-6px);
}

.card span {
  display: block;
  margin-top: 12px;
  font-size: 15px;
  opacity: 0.9;
}

/* =====================================================
   FOOTER
===================================================== */

.footer {
  padding: 40px;
  text-align: center;
  font-size: 12px;
  opacity: .5;
}

.footer a {
  color: #111;
  text-decoration: underline;
  opacity: .75;
}

.footer a:hover {
  opacity: 1;
}

/* =====================================================
   MOBILE
===================================================== */

@media (max-width: 900px) {

  .header {
    padding: 16px 20px;
  }

  .nav-links {
    position: fixed;
    top: 0;
    right: -100%;
    width: 70%;
    height: 100vh;
    background: #ffffff;
    flex-direction: column;
    padding: 80px 32px;
    gap: 24px;
    border-left: 1px solid rgba(0,0,0,0.1);
    box-shadow: -8px 0 30px rgba(0,0,0,0.12);
    transition: 0.35s;
    z-index: 998;
  }

  .nav-links.show {
    right: 0;
  }

  .hamburger {
    display: flex;
  }

  .premium-hero {
    grid-template-columns: 1fr;
    padding: 70px 24px;
    gap: 50px;
    text-align: center;
  }

  .premium-hero img {
    width: 90%;
    margin: 0 auto;
    border-radius: 14px;
  }

  .hero-title {
    font-size: 40px;
  }

  .hero-buttons {
    justify-content: center;
  }

  .collection {
    padding: 60px 24px;
  }

  .grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}

/* =====================================================
   COOKIE
===================================================== */

.cookie-banner{
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: 12px;
  max-width: 560px;
  margin: 0 auto;
  background: #f6f3ee;
  border: 1px solid rgba(0,0,0,0.08);
  padding: 14px 16px;
  border-radius: 14px;
  box-shadow: 0 8px 25px rgba(0,0,0,0.12);
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  z-index: 999999;
}

.cookie-banner a {
  color: #111;
  text-decoration: underline;
}

.cookie-banner button{
  background:#111;
  color:#fff;
  border:none;
  padding:8px 16px;
  border-radius:8px;
}

/* =====================================================
   TEXT PAGES (LOKAL)
===================================================== */

.text-page,
.legal-page {
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-synthesis: none;
}

.text-page {
  max-width: 720px;
  margin: 0 auto;
  padding: 80px 24px 120px;
}

.text-page h1 {
  font-size: 42px;
  font-weight: 500;
  margin-bottom: 28px;
}

.text-page h2 {
  font-size: 22px;
  margin: 48px 0 16px;
  font-weight: 500;
}

.text-page p {
  font-size: 15.5px;
  line-height: 1.75;
  opacity: 0.85;
  margin-bottom: 18px;
}

/* =====================================================
   TRUST NOTE
===================================================== */

.trust-note {
  padding: 32px 24px 24px;
  text-align: center;
}

.trust-link {
  font-size: 12.5px;
  letter-spacing: 0.02em;
  color: #111;
  opacity: 0.45;
  text-decoration: none;
}

.trust-link:hover {
  opacity: 0.75;
}

/* =====================================================
   LEGAL FIX
===================================================== */

.page-legal .back,
.page-legal .back-button,
.page-legal .back-arrow,
.page-legal .breadcrumb::before {
  display: none !important;
}
/* ===================================
   PRODUCT DETAIL – ISKELET
=================================== */

.product-detail {
  max-width: 1100px;
  margin: 0 auto;
  padding: 120px 24px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: start;
}

.product-media img {
  width: 100%;
  border-radius: 20px;
}

.product-title {
  font-size: 42px;
  margin-bottom: 24px;
}

.product-desc {
  font-size: 16px;
  line-height: 1.75;
  opacity: 0.75;
  margin-bottom: 32px;
}

.product-price {
  font-size: 22px;
  font-weight: 500;
  margin-bottom: 24px;
}

.product-buy {
  display: inline-block;
  margin-bottom: 16px;
}

.product-trust {
  font-size: 12.5px;
  opacity: 0.5;
  max-width: 320px;
}

/* MOBILE */
@media (max-width: 900px) {
  .product-detail {
    grid-template-columns: 1fr;
    padding: 70px 24px;
    gap: 40px;
  }

  .product-title {
    font-size: 34px;
  }
}
/* =====================================================
   PRODUCT DETAIL – EDITORIAL (MODEL 1)
   İzole, güvenli, premium
===================================================== */

.product-editorial {
  max-width: 680px;
  margin: 0 auto;
  padding: 120px 24px 140px;
  text-align: center;
}

.product-editorial-media {
  margin-bottom: 56px;
}

.product-editorial-media img {
  width: 100%;
  border-radius: 28px;
  box-shadow: 0 30px 60px rgba(0,0,0,0.12);
}

.product-editorial-title {
  font-size: 44px;
  line-height: 1.15;
  margin-bottom: 24px;
}

.product-editorial-desc {
  font-size: 16px;
  line-height: 1.75;
  opacity: 0.75;
  max-width: 520px;
  margin: 0 auto 36px;
}

.product-editorial-price {
  font-size: 22px;
  font-weight: 500;
  margin-bottom: 28px;
}

.product-editorial-buy {
  display: inline-block;
  margin-bottom: 18px;
}

.product-editorial-trust {
  font-size: 12.5px;
  opacity: 0.5;
  max-width: 360px;
  margin: 0 auto;
}

/* MOBILE */
@media (max-width: 768px) {
  .product-editorial {
    padding: 80px 20px 120px;
  }

  .product-editorial-title {
    font-size: 34px;
  }

  .product-editorial-media {
  margin-bottom: 40px;
}

} /* @media (max-width: 768px) GERÇEK KAPANIŞ */

/* =====================================================
   RÖLYEF AY – SCROLL SOFT ANIMATION
   SADECE rolyefay.html
   DİĞER SAYFALARA ETKİSİ YOK
===================================================== */

.rolyefay-page .fade-up {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .6s ease-out, transform .6s ease-out;
  will-change: transform, opacity;
}

.rolyefay-page .fade-up.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* =====================================================
   INDEX – SCROLL SOFT ANIMATION
   SADECE index.html
===================================================== */

.index-page .fade-up {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .6s ease-out, transform .6s ease-out;
  will-change: transform, opacity;
}

.index-page .fade-up.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* =====================================================
   TUM KOLEKSIYON – CSS ONLY FADE + SLIDE
   JS YOK / SAFE MODE
===================================================== */

.page-collection .collection-fade {
  animation: collectionFadeSlide .5s ease-out both;
}

@keyframes collectionFadeSlide {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Legal sayfalar logo kesin fix */
a[href="/"],
a[href="index.html"],
a[href="/index.html"] {
  color: #000 !important;
  text-decoration: none !important;
  font-weight: 600;
}

/* Mobilde link gibi görünmesini engelle */
a[href="/"]:visited {
  color: #000 !important;
}


.legal-page header a::after,
.legal header a::after {
  content: "•";
  font-size: 20px;
  color: #000;
}

.logo {
  text-indent: -9999px;
  overflow: hidden;
  white-space: nowrap;
}