/* NatureHes katalog: marka moru ve pembesi, yumuşak doğa tonları. Dış kaynak yok. */
:root {
  --zemin: #FBF8FC;
  --yuzey: #FFFFFF;
  --ton: #F4EEF6;
  --yesil: #EEF4EA;
  --yesil-koyu: #4F7A3E;
  --murekkep: #2B1838;
  --soluk: #6E6178;
  --cizgi: #E7DDEB;
  --mor: #462462;
  --pembe: #C657A0;
  --pembe-acik: #F7E4F0;
  --golge: 0 1px 2px rgba(43, 24, 56, .05), 0 12px 32px rgba(70, 36, 98, .08);
  --yaricap: 20px;
  --kap: 1180px;
  --yazi: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --baslik: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--zemin); color: var(--murekkep); font: 400 1rem/1.65 var(--yazi); -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; display: block; }
svg { width: 1.1em; height: 1.1em; fill: currentColor; flex: none; }
a { color: var(--mor); text-underline-offset: .18em; }
a:hover { color: var(--pembe); }
:focus-visible { outline: 3px solid var(--pembe); outline-offset: 3px; border-radius: 8px; }
h1, h2, h3 { font-family: var(--baslik); font-weight: 700; line-height: 1.15; margin: 0; color: var(--mor); letter-spacing: -.01em; }
h1 { font-size: clamp(2rem, 1.3rem + 3vw, 3.3rem); }
p { margin: 0; }
.kap { width: min(var(--kap), 100% - 32px); margin-inline: auto; }
.soluk { color: var(--soluk); }
.atla { position: absolute; left: 16px; top: -60px; background: var(--mor); color: #fff; padding: 10px 16px; border-radius: 10px; z-index: 10; }
.atla:focus { top: 12px; }

/* Üst */
.ust { position: sticky; top: 0; z-index: 5; background: color-mix(in srgb, var(--zemin) 90%, transparent); backdrop-filter: blur(12px); border-bottom: 1px solid var(--cizgi); }
.ust-ic { display: flex; align-items: center; gap: 12px; min-height: 76px; }
.logo { margin-right: auto; display: inline-flex; }
.logo img { width: 170px; height: auto; }
.menu { display: flex; gap: 4px; }
.menu a, .diller a { padding: 9px 14px; border-radius: 999px; color: var(--murekkep); text-decoration: none; font-weight: 600; font-size: .95rem; }
.menu a:hover { background: var(--ton); color: var(--mor); }
.menu a[aria-current="page"] { background: var(--pembe-acik); color: var(--mor); }
.diller { display: flex; gap: 2px; padding: 3px; border-radius: 999px; background: var(--ton); }
.diller a { padding: 5px 10px; font-size: .8rem; letter-spacing: .04em; color: var(--soluk); }
.diller a[aria-current="true"] { background: var(--yuzey); color: var(--mor); box-shadow: var(--golge); }

/* Düğmeler */
.dugmeler { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.dugme { display: inline-flex; align-items: center; gap: 10px; padding: 13px 22px; border-radius: 999px; background: var(--mor); color: #fff; font-weight: 600; text-decoration: none; transition: background .15s ease, transform .15s ease; }
.dugme:hover { background: var(--pembe); color: #fff; transform: translateY(-1px); }
.dugme-ikincil { background: var(--yuzey); color: var(--mor); box-shadow: inset 0 0 0 1.5px var(--cizgi); }
.dugme-ikincil:hover { background: var(--pembe-acik); color: var(--mor); }

/* Kahraman */
.kahraman { background: radial-gradient(70% 90% at 90% 10%, var(--pembe-acik), transparent 60%), radial-gradient(60% 80% at 10% 100%, var(--yesil), transparent 60%), var(--zemin); border-bottom: 1px solid var(--cizgi); overflow: hidden; }
.kahraman-ic { display: grid; grid-template-columns: 1.1fr .9fr; gap: 48px; align-items: center; padding-block: clamp(48px, 8vw, 100px); }
.ust-baslik { display: inline-flex; align-items: center; gap: 8px; color: var(--yesil-koyu); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; font-size: .82rem; margin-bottom: 16px; }
.giris { margin-top: 18px; font-size: 1.12rem; color: var(--soluk); max-width: 58ch; }
.kolaj { position: relative; height: 460px; }
.kolaj span { position: absolute; width: 220px; border-radius: 24px; overflow: hidden; box-shadow: 0 24px 48px rgba(70, 36, 98, .18); background: var(--yuzey); }
.kolaj img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.kolaj-1 { left: 0; top: 60px; transform: rotate(-7deg); }
.kolaj-2 { left: 50%; top: 0; z-index: 2; translate: -50% 0; }
.kolaj-3 { right: 0; top: 110px; transform: rotate(7deg); }

/* Bölümler */
.bolum { padding-block: clamp(48px, 7vw, 88px); }
.bolum-sik { padding-top: 28px; }
.bolum-ton { background: var(--ton); }
.bolum-bas { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 28px; }
.bolum-baslik { font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.1rem); margin-bottom: 28px; }
.bolum-bas .bolum-baslik { margin-bottom: 0; }
.bag { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; text-decoration: none; }

/* Kategori kartları */
.kat-izgara { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.kat { display: grid; grid-template-columns: 180px 1fr; align-items: center; gap: 24px; padding: 18px; border-radius: 28px; background: var(--yuzey); box-shadow: var(--golge); text-decoration: none; color: var(--murekkep); transition: transform .2s ease; }
.kat:hover { transform: translateY(-3px); color: var(--murekkep); }
.kat-gorsel { border-radius: 18px; overflow: hidden; background: var(--ton); }
.kat-gorsel img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.kat-metin { display: flex; flex-direction: column; gap: 8px; color: var(--soluk); }
.kat-ad { font: 700 1.5rem/1.2 var(--baslik); color: var(--mor); }
.kat-sayi { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; color: var(--pembe); font-weight: 600; }

/* Ürün kartları */
.izgara { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px 20px; }
.kart { display: flex; flex-direction: column; height: 100%; border-radius: var(--yaricap); overflow: hidden; background: var(--yuzey); box-shadow: var(--golge); text-decoration: none; color: var(--murekkep); transition: transform .2s ease, box-shadow .2s ease; }
.kart:hover { transform: translateY(-4px); color: var(--murekkep); box-shadow: 0 2px 4px rgba(43, 24, 56, .05), 0 20px 44px rgba(70, 36, 98, .14); }
.kart-gorsel { display: block; background: linear-gradient(180deg, var(--ton), var(--yuzey)); }
.kart-gorsel img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.kart-govde { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px 18px; flex: 1; }
.kart-ad { font: 700 1.05rem/1.3 var(--yazi); color: var(--murekkep); }
.hacim { margin-top: auto; color: var(--soluk); font-size: .9rem; }
.etiket { align-self: flex-start; font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--yesil-koyu); }
.yer-tutucu { display: grid; place-items: center; aspect-ratio: 3 / 4; padding: 24px; background: var(--ton); }
.yer-tutucu img { width: 70%; opacity: .5; }

/* Liste başı */
.sayfa-bas { padding-block: clamp(36px, 5vw, 60px) 12px; }
.sekmeler { display: flex; gap: 8px; margin-top: 26px; overflow-x: auto; padding-bottom: 4px; }
.sekmeler a { flex: none; padding: 8px 16px; border-radius: 999px; background: var(--yuzey); box-shadow: inset 0 0 0 1px var(--cizgi); color: var(--murekkep); text-decoration: none; font-weight: 600; font-size: .92rem; }
.sekmeler a[aria-current="page"] { background: var(--mor); color: #fff; box-shadow: none; }

/* Ürün detay */
.urun { padding-block: clamp(28px, 4vw, 48px); }
.iz { display: flex; flex-wrap: wrap; gap: 8px; font-size: .9rem; color: var(--soluk); margin-bottom: 20px; }
.iz a { color: var(--soluk); }
.urun-ic { display: grid; grid-template-columns: minmax(0, 520px) 1fr; gap: clamp(28px, 5vw, 64px); align-items: start; }
.urun-gorsel { border-radius: 28px; overflow: hidden; background: var(--yuzey); box-shadow: var(--golge); }
.urun-gorsel img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.urun-bilgi h1 { margin-top: 8px; font-size: clamp(1.9rem, 1.3rem + 2.2vw, 2.8rem); }
.hacim-buyuk { margin-top: 10px; font-size: 1.1rem; font-weight: 600; }
.kisa { margin-top: 20px; color: var(--soluk); font-size: 1.05rem; max-width: 62ch; }
.kisa p + p { margin-top: 10px; }
.bilgi-kutu { margin-top: 28px; padding: 24px; border-radius: var(--yaricap); background: var(--yesil); }
.bilgi-kutu h2 { font-size: 1.25rem; }
.bilgi-kutu p { margin-top: 6px; color: var(--soluk); }
.bilgi-kutu .dugmeler { margin-top: 16px; }
.uzun { margin-top: 48px; padding: clamp(24px, 4vw, 40px); border-radius: 28px; background: var(--yuzey); box-shadow: var(--golge); max-width: 900px; }
.uzun h2 { font-size: 1.5rem; margin-bottom: 14px; }
.uzun p, .uzun li { color: var(--murekkep); }
.uzun p + p, .uzun ul, .uzun ol { margin-top: 10px; }

/* Vizyon şeridi */
.serit { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; padding: clamp(28px, 5vw, 56px); border-radius: 32px; background: var(--mor); color: #fff; }
.serit h2 { color: #fff; font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2rem); }
.serit p { margin-top: 12px; color: rgba(255, 255, 255, .85); font-size: 1.08rem; }
.serit .bag { margin-top: 18px; color: #fff; }
.serit .bag:hover { color: var(--pembe-acik); }
.serit .dugme { background: #fff; color: var(--mor); }
.serit .dugme:hover { background: var(--pembe-acik); }
.serit .dugme-ikincil { background: transparent; color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .5); }

/* Metin sayfaları */
.metin { max-width: 760px; padding: clamp(24px, 4vw, 40px); border-radius: 28px; background: var(--yuzey); box-shadow: var(--golge); }
.metin h2 { font-size: 1.3rem; margin: 26px 0 8px; }
.metin h2:first-child { margin-top: 0; }
.metin p + p { margin-top: 12px; }
.iki-kolon { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.metin-kart { padding: clamp(24px, 4vw, 36px); border-radius: 28px; background: var(--yuzey); box-shadow: var(--golge); }
.metin-kart h2 { margin-bottom: 12px; }

/* İletişim */
.iletisim { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.iletisim li { padding: 24px; border-radius: var(--yaricap); background: var(--yuzey); box-shadow: var(--golge); }
.iletisim .ikon { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; background: var(--pembe-acik); color: var(--mor); margin-bottom: 16px; }
.iletisim h2 { font: 700 1rem/1.3 var(--yazi); margin-bottom: 6px; }
.iletisim a { font-weight: 600; text-decoration: none; }

.bulunamadi { padding-block: clamp(56px, 10vw, 120px); }
.bulunamadi .ust-baslik { font-size: 1rem; }

/* Alt */
.alt { margin-top: clamp(48px, 7vw, 88px); background: var(--mor); color: rgba(255, 255, 255, .8); }
.alt-ic { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; padding-block: 48px 32px; }
.alt-marka p { margin-top: 14px; max-width: 40ch; font-size: .95rem; }
.alt-menu { display: flex; flex-direction: column; gap: 8px; }
.alt-menu h2 { font: 700 .8rem/1 var(--yazi); letter-spacing: .08em; text-transform: uppercase; color: rgba(255, 255, 255, .6); margin-bottom: 6px; }
.alt a { color: #fff; text-decoration: none; }
.alt a:hover { color: var(--pembe-acik); }
.alt-not { display: flex; flex-wrap: wrap; gap: 20px; padding-block: 18px 28px; border-top: 1px solid rgba(255, 255, 255, .15); font-size: .9rem; }

/* Duyarlı */
@media (max-width: 1024px) {
  .izgara { grid-template-columns: repeat(3, 1fr); }
  .iletisim { grid-template-columns: repeat(2, 1fr); }
  .kat { grid-template-columns: 130px 1fr; }
}
@media (max-width: 820px) {
  .ust-ic { flex-wrap: wrap; gap: 8px; padding-block: 10px; min-height: 0; }
  .logo img { width: 140px; }
  .menu { order: 3; flex-basis: 100%; overflow-x: auto; margin-inline: -8px; }
  .menu a { flex: none; padding: 8px 12px; }
  .kahraman-ic, .urun-ic, .serit, .iki-kolon { grid-template-columns: 1fr; }
  .kolaj { height: 280px; max-width: 420px; width: 100%; margin-inline: auto; }
  .kolaj span { width: 140px; }
  .kat-izgara { grid-template-columns: 1fr; }
  .izgara { grid-template-columns: repeat(2, 1fr); gap: 16px 12px; }
  .alt-ic { grid-template-columns: 1fr 1fr; }
  .alt-marka { grid-column: 1 / -1; }
}
@media (max-width: 480px) {
  .iletisim { grid-template-columns: 1fr; }
  .kat { grid-template-columns: 100px 1fr; gap: 16px; padding: 14px; }
  .kart-govde { padding: 12px; }
  .kart-ad { font-size: .95rem; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; } }