:root {
  --fildisi: #f7f1e8;
  --krem: #efe6d8;
  --kahve: #1c1612;
  --kahve-2: #2a211b;
  --yazi: #3a2f27;
  --soluk: #7d6e61;
  --altin: #b8925a;
  --altin-acik: #d9bd8c;
  --cizgi: rgba(184, 146, 90, .32);
  --serif: "Cormorant Garamond", Georgia, serif;
  --sans: "Jost", system-ui, sans-serif;
  --kenar: clamp(20px, 5vw, 72px);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { background: var(--fildisi); color: var(--yazi); font: 300 17px/1.65 var(--sans); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
em { font-style: italic; color: var(--altin); }

h1, h2, h3 { font-family: var(--serif); font-weight: 400; color: var(--kahve); line-height: 1.05; }
h2 { font-size: clamp(38px, 5.4vw, 64px); }
.ust-etiket { font: 400 12px/1 var(--sans); letter-spacing: .32em; text-transform: uppercase; color: var(--altin); margin-bottom: 18px; }

/* üst */
.ust { position: fixed; inset: 0 0 auto 0; z-index: 40; display: flex; align-items: center; justify-content: space-between; padding: 18px var(--kenar); transition: background .35s, padding .35s, box-shadow .35s; }
.ust.dolu { background: rgba(247, 241, 232, .94); backdrop-filter: blur(10px); padding-block: 12px; box-shadow: 0 1px 0 var(--cizgi); }
.marka { display: flex; align-items: baseline; gap: 10px; }
.marka-ad { font: italic 500 34px/1 var(--serif); color: var(--kahve); }
.marka-alt { font: 400 11px/1 var(--sans); letter-spacing: .34em; text-transform: uppercase; color: var(--altin); }
.menu { display: flex; align-items: center; gap: 34px; font-size: 14px; letter-spacing: .08em; }
.menu a { position: relative; padding: 4px 0; }
.menu a:not(.menu-wa)::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--altin); transform: scaleX(0); transform-origin: left; transition: transform .3s; }
.menu a:not(.menu-wa):hover::after { transform: scaleX(1); }
.menu-wa { border: 1px solid var(--kahve); padding: 9px 20px !important; border-radius: 999px; transition: background .25s, color .25s; }
.menu-wa:hover { background: var(--kahve); color: var(--fildisi); }
.menu-dugme { display: none; width: 44px; height: 44px; position: relative; }
.menu-dugme span { position: absolute; left: 11px; right: 11px; height: 1.5px; background: var(--kahve); transition: transform .3s, top .3s; }
.menu-dugme span:first-child { top: 17px; }
.menu-dugme span:last-child { top: 26px; }
.menu-dugme[aria-expanded="true"] span:first-child { top: 21px; transform: rotate(45deg); }
.menu-dugme[aria-expanded="true"] span:last-child { top: 21px; transform: rotate(-45deg); }

/* kapak */
.kapak { min-height: 100svh; display: grid; grid-template-columns: 1.05fr .95fr; align-items: center; gap: clamp(32px, 6vw, 96px); padding: 120px var(--kenar) 72px; position: relative; }
.kapak::before { content: ""; position: absolute; inset: 0 0 0 auto; width: 44%; background: var(--krem); z-index: -1; }
.kapak h1 { font-size: clamp(56px, 8.6vw, 124px); letter-spacing: -.01em; }
.kapak-alt { max-width: 30em; margin-top: 28px; font-size: 18px; color: var(--soluk); }
.kapak-dugmeler { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 38px; }
.dugme { display: inline-flex; align-items: center; justify-content: center; padding: 15px 30px; border-radius: 999px; font-size: 14px; letter-spacing: .1em; transition: background .25s, color .25s, border-color .25s; }
.dugme-dolu { background: var(--kahve); color: var(--fildisi); border: 1px solid var(--kahve); }
.dugme-dolu:hover { background: var(--altin); border-color: var(--altin); }
.dugme-cizgi { border: 1px solid var(--altin); color: var(--kahve); }
.dugme-cizgi:hover { background: var(--altin); color: #fff; }

.kapak-gorsel { justify-self: center; width: min(100%, 470px); }
.kemer { border-radius: 999px 999px 6px 6px; overflow: hidden; aspect-ratio: 3 / 4.15; box-shadow: 0 40px 80px -40px rgba(28, 22, 18, .45); outline: 1px solid var(--cizgi); outline-offset: 12px; }
.kemer img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; animation: yavas 18s ease-in-out infinite alternate; }
@keyframes yavas { from { transform: scale(1.02); } to { transform: scale(1.1); } }
.kapak-gorsel figcaption { margin-top: 26px; text-align: center; font: italic 18px var(--serif); color: var(--soluk); }

/* şerit */
.seritler { background: var(--kahve); color: var(--altin-acik); overflow: hidden; padding: 22px 0; }
.serit { display: flex; gap: 38px; width: max-content; font: italic 28px/1 var(--serif); white-space: nowrap; animation: kay 34s linear infinite; }
.serit .nokta { font-style: normal; font-size: 14px; align-self: center; color: var(--altin); }
@keyframes kay { to { transform: translateX(-50%); } }

/* koleksiyon */
.koleksiyon { padding: clamp(80px, 11vw, 140px) var(--kenar); max-width: 1320px; margin: 0 auto; }
.baslik { text-align: center; max-width: 720px; margin: 0 auto; }
.baslik-alt { margin-top: 20px; color: var(--soluk); }
.baslik-sol { text-align: left; margin: 0; }
.sekmeler { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin: 46px 0 54px; }
.sekme { padding: 10px 22px; border-radius: 999px; border: 1px solid var(--cizgi); font-size: 14px; letter-spacing: .06em; transition: background .25s, color .25s, border-color .25s; }
.sekme:hover { border-color: var(--altin); }
.sekme.aktif { background: var(--kahve); border-color: var(--kahve); color: var(--fildisi); }

.izgara { display: grid; grid-template-columns: repeat(3, 1fr); gap: 56px 32px; }
.kart.gizli { display: none; }
.kart-gorsel { display: block; width: 100%; aspect-ratio: 3 / 4; overflow: hidden; border-radius: 4px; background: var(--krem); cursor: zoom-in; }
.kart-gorsel img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; transition: transform .9s cubic-bezier(.2, .7, .2, 1); }
.kart:hover .kart-gorsel img { transform: scale(1.05); }
.kart-yazi { padding-top: 20px; }
.kart-tur { font-size: 11px; letter-spacing: .28em; text-transform: uppercase; color: var(--altin); }
.kart h3 { font-size: 32px; margin: 8px 0 8px; }
.kart p:not(.kart-tur) { font-size: 15px; color: var(--soluk); }
.kart-sor { display: inline-block; margin-top: 14px; font-size: 14px; letter-spacing: .06em; color: var(--kahve); border-bottom: 1px solid var(--altin); padding-bottom: 3px; transition: color .25s; }
.kart-sor:hover { color: var(--altin); }

/* prova */
.prova { background: var(--kahve); color: #d8ccbd; padding: clamp(80px, 11vw, 140px) var(--kenar); }
.prova-ic { max-width: 1240px; margin: 0 auto; display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(40px, 7vw, 110px); align-items: start; }
.prova h2, .prova h3 { color: var(--fildisi); }
.prova em { color: var(--altin-acik); }
.adimlar { list-style: none; }
.adimlar li { display: grid; grid-template-columns: 74px 1fr; column-gap: 12px; padding: 30px 0; border-top: 1px solid rgba(217, 189, 140, .22); }
.adimlar li:last-child { border-bottom: 1px solid rgba(217, 189, 140, .22); }
.adim-no { grid-row: span 2; font: italic 40px/1 var(--serif); color: var(--altin); }
.adimlar h3 { font-size: 30px; margin-bottom: 8px; }
.adimlar p { font-size: 16px; color: #b9ab9b; }

/* mağaza */
.magaza { max-width: 1320px; margin: 0 auto; padding: clamp(80px, 11vw, 140px) var(--kenar); display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(40px, 6vw, 96px); align-items: center; }
.magaza-gorseller { position: relative; padding-bottom: 18%; }
.magaza-buyuk { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 4px; }
.magaza-kucuk { position: absolute; right: -6%; bottom: 0; width: 55%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 4px; border: 8px solid var(--fildisi); box-shadow: 0 30px 60px -30px rgba(28, 22, 18, .5); }
.magaza dl { margin-top: 34px; display: grid; gap: 18px; }
.magaza dl > div { display: grid; grid-template-columns: 110px 1fr; gap: 12px; padding-bottom: 18px; border-bottom: 1px solid var(--cizgi); }
.magaza dt { font-size: 11px; letter-spacing: .26em; text-transform: uppercase; color: var(--altin); padding-top: 5px; }
.magaza dd { color: var(--kahve); }
.magaza dd a { border-bottom: 1px solid var(--cizgi); }
.magaza dd a:hover { border-color: var(--altin); }

/* alt */
.alt { background: var(--kahve); color: #a89a8a; text-align: center; padding: 64px var(--kenar) 48px; display: grid; justify-items: center; gap: 14px; }
.alt .marka-ad { color: var(--fildisi); }
.alt-kucuk { font-size: 13px; color: #75685b; }

/* whatsapp */
.wa-sabit { position: fixed; right: 22px; bottom: 22px; z-index: 30; width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; background: #25d366; color: #fff; box-shadow: 0 12px 28px -10px rgba(0, 0, 0, .45); transition: transform .25s; }
.wa-sabit:hover { transform: scale(1.07); }
.wa-sabit svg { width: 30px; height: 30px; }

/* büyüteç */
.buyutec { position: fixed; inset: 0; z-index: 60; background: rgba(20, 15, 12, .94); display: grid; place-items: center; padding: 24px; }
.buyutec[hidden] { display: none; }
.buyutec img { max-height: 92vh; max-width: 100%; border-radius: 4px; }
.buyutec-kapat { position: absolute; top: 14px; right: 18px; font-size: 42px; line-height: 1; color: var(--fildisi); width: 52px; height: 52px; }

/* belirme */
.belir { opacity: 0; transform: translateY(26px); transition: opacity .9s ease, transform .9s cubic-bezier(.2, .7, .2, 1); }
.belir.gorundu { opacity: 1; transform: none; }

@media (max-width: 980px) {
  .izgara { grid-template-columns: repeat(2, 1fr); gap: 44px 20px; }
  .prova-ic, .magaza { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  body { font-size: 16px; }
  .menu-dugme { display: block; }
  .ust.dolu { backdrop-filter: none; }
  .menu { position: fixed; inset: 0; background: var(--fildisi); flex-direction: column; justify-content: center; gap: 30px; font: italic 34px var(--serif); letter-spacing: 0; opacity: 0; pointer-events: none; transition: opacity .3s; z-index: -1; }
  .menu.acik { opacity: 1; pointer-events: auto; }
  .menu-wa { font: 400 15px var(--sans); letter-spacing: .1em; }
  .kapak { grid-template-columns: 1fr; padding-top: 104px; min-height: 0; gap: 48px; }
  .kapak::before { width: 100%; top: auto; height: 34%; }
  .kapak h1 { font-size: clamp(54px, 15vw, 76px); }
  .kapak-dugmeler .dugme { flex: 1 1 100%; }
  .kapak-gorsel { width: min(86%, 380px); }
  .serit { font-size: 22px; gap: 28px; }
  .izgara { grid-template-columns: 1fr; gap: 48px; }
  .kart h3 { font-size: 30px; }
  .adimlar li { grid-template-columns: 56px 1fr; }
  .adim-no { font-size: 32px; }
  .adimlar h3 { font-size: 26px; }
  .magaza-kucuk { right: 0; width: 60%; border-width: 6px; }
  .magaza dl > div { grid-template-columns: 1fr; gap: 4px; }
  .wa-sabit { right: 16px; bottom: 16px; width: 54px; height: 54px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .belir { opacity: 1; transform: none; }
}