/* Manira Bodrum — orijinal temanin renk ve tipografi kimligi
   Altin #d5ad7f · koyu #28262b · Prata (baslik) + Montserrat (govde) */

:root {
  --altin: #d5ad7f;
  --altin-koyu: #c39f76;
  --koyu: #28262b;
  --koyu-2: #242424;
  --gri: #727272;
  --gri-acik: #cdcdcd;
  --zemin: #ffffff;
  --zemin-2: #f8f6f3;
  --cizgi: #e8e4de;
  --kap: 1180px;
  --serif: "Prata", Georgia, "Times New Roman", serif;
  --sans: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--zemin);
  color: var(--koyu);
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 300;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

a { color: inherit; text-decoration: none; }
a:hover { color: var(--altin-koyu); }

h1, h2, h3 { font-family: var(--serif); font-weight: 400; line-height: 1.3; margin: 0; }

.gizli {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.atla {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--koyu); color: #fff; padding: 10px 18px;
}
.atla:focus { left: 8px; top: 8px; }

:focus-visible { outline: 2px solid var(--altin-koyu); outline-offset: 3px; }

/* ---------- yerlesim ---------- */
.kap { width: min(100% - 40px, var(--kap)); margin-inline: auto; }
.kap.dar { max-width: 760px; }

.bolum { padding: 64px 0; }
.bolum-baslik,
.sayfa-baslik {
  font-size: clamp(22px, 3vw, 30px);
  letter-spacing: .22em;
  text-transform: uppercase;
  text-align: center;
  margin-bottom: 44px;
}

/* ---------- ust menu ---------- */
.ust {
  position: sticky; top: 0; z-index: 40;
  background: rgba(255, 255, 255, .96);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--cizgi);
}
.ust-ic { display: flex; align-items: center; gap: 24px; min-height: 84px; }
.logo img { width: 168px; height: auto; }

.ana-nav { margin-left: auto; }
.ana-nav ul { display: flex; align-items: center; gap: 26px; list-style: none; margin: 0; padding: 0; }
.ana-nav a {
  font-size: 12px; font-weight: 400; letter-spacing: .14em; text-transform: uppercase;
  padding: 6px 0; border-bottom: 1px solid transparent;
}
.ana-nav a:hover, .ana-nav a.aktif { border-bottom-color: var(--altin); color: var(--koyu); }
.ana-nav .dil a {
  border: 1px solid var(--cizgi); border-radius: 2px; padding: 5px 10px; letter-spacing: .1em;
}
.ana-nav .dil a:hover { border-color: var(--altin); }

.menu-dugme {
  display: none; margin-left: auto; width: 42px; height: 42px;
  background: none; border: 0; cursor: pointer; padding: 10px 8px;
}
.menu-dugme span { display: block; height: 1px; background: var(--koyu); margin: 6px 0; transition: .25s; }
.menu-dugme[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-dugme[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menu-dugme[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- hero ---------- */
.hero { position: relative; background: var(--koyu); overflow: hidden; }
.slaytlar { list-style: none; margin: 0; padding: 0; }
.slayt {
  position: absolute; inset: 0; opacity: 0; transition: opacity 1.1s ease;
}
.slayt.etkin { opacity: 1; }
.slayt:first-child { position: relative; }
.slayt img { width: 100%; height: clamp(340px, 56vh, 620px); object-fit: cover; object-position: center 42%; }

/* Hero uzerinde yazi YOK (kullanici karari) — sadece slayt ve noktalar.
   Noktalar acik fotograflarda da secilsin diye hafif bir govde golgesi var. */
.hero-nokta { position: absolute; left: 0; right: 0; bottom: 18px; display: flex; justify-content: center; gap: 9px; }
.hero-nokta button {
  width: 9px; height: 9px; padding: 0; border-radius: 50%; cursor: pointer;
  border: 1px solid rgba(255, 255, 255, .9); background: rgba(0, 0, 0, .18);
  box-shadow: 0 0 4px rgba(0, 0, 0, .35);
}
.hero-nokta button[aria-selected="true"] { background: #fff; }

/* ---------- urun izgarasi ---------- */
.izgara {
  display: grid; gap: 44px 26px;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
}
.kart { text-align: center; }
.kart-gorsel { position: relative; display: block; overflow: hidden; background: var(--zemin-2); }
.kart-gorsel img { width: 100%; aspect-ratio: 1; object-fit: cover; transition: opacity .5s, transform .8s; }
.kart-ust { position: absolute; inset: 0; opacity: 0; }
.kart-gorsel:hover .kart-ust { opacity: 1; }
.kart-gorsel:hover img { transform: scale(1.03); }

.kart-ad {
  font-family: var(--sans); font-size: 12px; font-weight: 400;
  letter-spacing: .13em; text-transform: uppercase; margin: 16px 0 6px;
}

/* Fiyat, indirim rozeti ve stok gostergesi kaldirildi (kullanici karari).
   Kart artik sade: gorsel + urun adi. */

/* ---------- dugme ---------- */
.dugme {
  display: inline-block; margin-top: 8px;
  font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
  padding: 13px 30px; border: 1px solid var(--koyu); color: var(--koyu);
  transition: .25s;
}
.dugme:hover { background: var(--koyu); color: #fff; }

/* ---------- serbest metin ---------- */
.serbest p { margin: 0 0 18px; }
.serbest h2 {
  font-size: 19px; letter-spacing: .2em; text-transform: uppercase;
  margin: 44px 0 18px; text-align: center;
}
.serbest .giris { color: var(--gri); }
.numarali { padding-left: 20px; }
.numarali li { margin-bottom: 14px; }

.hikaye { background: var(--zemin-2); text-align: center; }

.not {
  margin-top: 48px; padding: 26px 28px;
  border: 1px solid var(--cizgi); background: var(--zemin-2); text-align: center;
}
.not h2 {
  font-family: var(--serif); font-size: 16px; letter-spacing: .18em;
  text-transform: uppercase; margin: 0 0 10px;
}
.not p { margin: 0 auto; max-width: 560px; }

/* ---------- satin alma (Hipicon) ---------- */
/* Sitede sepet/fiyat yok; satis Hipicon'da. Bu blok magazanin en ustunde
   vurgulu, urun sayfasinda daha sakin bir bicimde duruyor. */
.magaza-giris {
  max-width: 720px; margin: -20px auto 34px; text-align: center; color: var(--gri);
}
.satin-al.vurgulu {
  margin: 0 0 52px; padding: 32px 28px;
  border-color: var(--altin); background: #fdfbf8;
}
.not-dugmeler { margin-top: 20px !important; }
.not-ek { margin-top: 16px !important; font-size: 13px; color: var(--gri); }
.not-ek a { color: var(--koyu); border-bottom: 1px solid var(--cizgi); }
.not-ek a:hover { border-bottom-color: var(--altin); }

.dugme.dolu { background: var(--koyu); color: #fff; border-color: var(--koyu); }
.dugme.dolu:hover { background: var(--altin-koyu); border-color: var(--altin-koyu); color: #fff; }

.urun-bilgi .satin-al { text-align: left; margin-top: 30px; }
.urun-bilgi .satin-al p { margin-left: 0; }

/* ---------- iletisim ---------- */
.iletisim-liste { margin: 30px 0; }
.iletisim-liste dt {
  font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--gri); margin-top: 18px;
}
.iletisim-liste dd { margin: 4px 0 0; }

/* ---------- S.S.S ---------- */
.sss-oge { border-bottom: 1px solid var(--cizgi); }
.sss-oge summary {
  cursor: pointer; list-style: none; padding: 20px 34px 20px 0; position: relative;
  font-size: 13px; letter-spacing: .06em; font-weight: 500;
}
.sss-oge summary::-webkit-details-marker { display: none; }
.sss-oge summary::after {
  content: "+"; position: absolute; right: 4px; top: 17px;
  font-size: 19px; color: var(--altin-koyu); font-weight: 300;
}
.sss-oge[open] summary::after { content: "–"; }
.sss-oge div { padding-bottom: 20px; color: var(--gri); }
.sss-oge p { margin: 0; }

/* ---------- urun detay ---------- */
.geri { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; margin: 0 0 28px; }
.urun-duzen { display: grid; gap: 44px; grid-template-columns: 1.1fr .9fr; align-items: start; }
.buyukler { list-style: none; margin: 0; padding: 0; position: relative; background: var(--zemin-2); }
.buyukler li { display: none; }
.buyukler li.etkin { display: block; }
.buyukler img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.kucukler { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.kucukler button {
  width: 74px; padding: 0; border: 1px solid transparent; background: none; cursor: pointer;
}
.kucukler button.etkin { border-color: var(--altin); }
.kucukler img { aspect-ratio: 1; object-fit: cover; }

.urun-bilgi h1 {
  font-size: clamp(21px, 2.6vw, 27px); letter-spacing: .12em;
  text-transform: uppercase; margin-bottom: 14px;
}

/* ---------- alt bilgi ---------- */
.alt { border-top: 1px solid var(--cizgi); padding: 46px 0 34px; background: var(--zemin-2); }
.alt-ic { text-align: center; }
.alt-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 26px; }
.alt-nav a { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; }
.alt-iletisim { margin-top: 20px; font-size: 13px; color: var(--gri); }
.alt-iletisim a { color: var(--koyu); }
.ayrac { margin: 0 10px; color: var(--gri-acik); }

.alt-son {
  margin-top: 30px; padding-top: 22px; border-top: 1px solid var(--cizgi);
  display: flex; align-items: center; justify-content: center; gap: 18px; flex-wrap: wrap;
}
.telif { margin: 0; font-size: 11px; letter-spacing: .1em; color: var(--gri); }

.rozet {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; font-weight: 400; line-height: 1; color: #64748b;
}
.rozet svg { display: block; flex: none; }
.rozet-ad { font-weight: 700; font-size: 13px; color: #0f1115; letter-spacing: -.02em; }
.rozet:hover { color: #475569; }

/* ---------- duyarli ---------- */
@media (max-width: 860px) {
  .urun-duzen { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .menu-dugme { display: block; }
  .ana-nav {
    position: fixed; inset: 84px 0 auto 0; margin: 0;
    background: #fff; border-bottom: 1px solid var(--cizgi);
    max-height: 0; overflow: hidden; transition: max-height .3s ease;
  }
  .ana-nav.acik { max-height: 70vh; overflow-y: auto; }
  .ana-nav ul { flex-direction: column; align-items: stretch; gap: 0; padding: 8px 20px 20px; }
  .ana-nav li { border-bottom: 1px solid var(--cizgi); }
  .ana-nav li:last-child { border-bottom: 0; }
  .ana-nav a { display: block; padding: 15px 0; }
  .ana-nav .dil a { display: inline-block; margin-top: 12px; }
  .bolum { padding: 46px 0; }
  .izgara { gap: 32px 16px; grid-template-columns: repeat(2, 1fr); }
  .kart-ad { font-size: 11px; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}