/* Massi Milano — site stili.
   Ölçüler ve renkler Moncler ölçümlerinden: Site Tasarımı/moncler-masaustu-analiz.md ve moncler-mobil-analiz.md.
   Kural: bulanıklık (backdrop-filter) yok, ağır gölge yok, köşeler düz. */

@font-face { font-family: "Jost"; font-style: normal; font-weight: 300 600; font-display: swap;
  src: url(/assets/fontlar/jost-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Jost"; font-style: normal; font-weight: 300 600; font-display: swap;
  src: url(/assets/fontlar/jost-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Readex Pro"; font-style: normal; font-weight: 300 600; font-display: swap;
  src: url(/assets/fontlar/readex-arabic.woff2) format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: "MM Logo"; font-style: normal; font-weight: 500; font-display: swap;
  src: url(/assets/fontlar/cormorant-logo.woff2) format("woff2");
  unicode-range: U+20, U+41, U+45, U+49, U+4C-4F, U+53-54, U+59; }

:root {
  --bg: #F7F8F3;        /* sayfa zemini = stüdyo fotoğraf zemini */
  --yuzey: #EEEEE7;
  --ink: #141111;
  --ink-2: #6C6761;
  --cizgi: #DDDCD4;
  --koyu: #1F1818;      /* koyu kahve: duyuru, editoryal bölümler, footer */
  --koyu-ink: #F3F0EA;
  --koyu-ink-2: #B3ABA1;
  --koyu-cizgi: #3B3131;
  --g: 16px;            /* yan boşluk */
  --hdr: 56px;
  --duyuru: 32px;
  --cubuk: 64px;        /* telefon alt çubuğu */
  --yazi: "Jost", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --logo: "MM Logo", "Cormorant Garamond", Georgia, "Times New Roman", serif;
  color-scheme: light;
}
@media (min-width: 768px) { :root { --g: 28px; } }
@media (min-width: 1024px) { :root { --hdr: 72px; } }
[lang="ar"] { --yazi: "Readex Pro", "Jost", Tahoma, Arial, sans-serif; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 400 16px/1.45 var(--yazi); -webkit-font-smoothing: antialiased;
  padding-bottom: calc(var(--cubuk) + env(safe-area-inset-bottom, 0px));
}
@media (min-width: 1024px) { body { padding-bottom: 0; } body.s-urun { padding-bottom: 72px; } }
img, picture, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
h1, h2, h3 { font-weight: 400; text-wrap: balance; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.gizli, .gizli-radyo { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; opacity: 0; }
/* 2026-10-25 Mert: "bi tanesine tıklasam direkt beni sayfanın en yukarısına atıyo". Etikete tıklayınca gizli düğme odak alıyor, tarayıcı onu görünür yapmak için bölümün başına kaydırıyordu. Sabit konumda hep ekranda, kaydırma olmuyor. */
.gizli-radyo { position: fixed !important; top: 0; left: 0; }
.atla { position: absolute; inset-inline-start: var(--g); top: -80px; z-index: 100; background: var(--ink); color: var(--bg); padding: 12px 16px; }
.atla:focus { top: 8px; }
svg { width: 24px; height: 24px; flex: none; }
.chev { width: 16px; height: 16px; }
[dir="rtl"] .chev { transform: scaleX(-1); }
.kod { color: var(--ink-2); }
.bekleniyor { color: var(--ink-2); font-style: italic; }
.marka { font-family: var(--logo); font-weight: 500; letter-spacing: .16em; font-size: 20px; line-height: 1; white-space: nowrap; }
@media (min-width: 1024px) { .marka { font-size: 26px; } }
.marka--buyuk { font-size: clamp(40px, 9vw, 128px); letter-spacing: .08em; white-space: normal; }
.ust-yazi { font-size: 12px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 12px; }
.buyuk-metin { font-size: 20px; line-height: 1.4; max-width: 34em; }
@media (min-width: 1024px) { .buyuk-metin { font-size: 24px; } }
[lang="ar"] .ust-yazi, [lang="ar"] .dugme, [lang="ar"] .ok-link, [lang="ar"] .kirinti ol, [lang="ar"] .kutu span,
[lang="ar"] .iletisim-satiri, [lang="ar"] .ani-etiket, [lang="ar"] .menu-govde h2 { letter-spacing: 0; }

/* ------------------------------------------------ üst kısım */
.ust { position: sticky; top: calc(var(--duyuru) * -1); z-index: 40; background: var(--bg); }
.duyuru {
  background: var(--koyu); color: var(--koyu-ink); font-size: 12px; line-height: var(--duyuru); height: var(--duyuru);
  text-align: center; padding-inline: var(--g); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hdr {
  position: relative; height: var(--hdr); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  padding-inline: var(--g); border-bottom: 1px solid var(--cizgi);
}
.hdr .marka { grid-column: 2; }
.hdr-nav { display: none; }
.hdr-sag { grid-column: 3; justify-self: end; display: flex; align-items: center; gap: 2px; margin-inline-end: -10px; }
.ikon { display: grid; place-items: center; width: 44px; height: 44px; }
.masaustu { display: none; }
@media (min-width: 1024px) {
  .hdr-nav { display: block; grid-column: 1; align-self: stretch; }
  .hdr-nav > ul { display: flex; gap: 26px; height: 100%; }
  .nav-oge { display: flex; align-items: center; }
  .nav-oge > a { font-size: 15px; padding-block: 6px; border-bottom: 1px solid transparent; }
  .nav-oge > a:hover, .nav-oge:focus-within > a { border-color: currentColor; }
  .masaustu { display: grid; }
}
.mega {
  display: none; position: absolute; inset-inline: 0; top: 100%; color: var(--ink); background: var(--bg);
  border-top: 1px solid var(--cizgi); border-bottom: 1px solid var(--cizgi);
  padding: 32px var(--g) 40px; grid-template-columns: repeat(3, minmax(0, 1fr)) 260px; gap: 32px; animation: belir .2s ease;
}
@media (min-width: 1024px) { .nav-oge--mega:hover .mega, .nav-oge--mega:focus-within .mega { display: grid; } }
/* 2026-10-25: menüye "Ana sayfa" girdi, 5 bağlantı 1024–1279'da logoya sığmıyor → orada ☰ düğmesi; 1280–1439'da aralık daralır (FR en uzun) */
.ikon.hdr-menu { display: none; }
@media (min-width: 1024px) { .nav-oge > a { white-space: nowrap; } }
@media (min-width: 1024px) and (max-width: 1279px) {
  .hdr-nav { display: none; }
  .ikon.hdr-menu { display: grid; grid-column: 1; justify-self: start; margin-inline-start: -10px; }
}
@media (min-width: 1280px) and (max-width: 1439px) { .hdr-nav > ul { gap: 18px; } .nav-oge > a { font-size: 14px; } }
.mega h2 { font-size: 18px; margin-bottom: 14px; }
.mega li a { display: block; padding: 6px 0; font-size: 15px; }
.mega li a:hover { text-decoration: underline; text-underline-offset: 4px; }
.mega-foto img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.mega-foto span { display: block; margin-top: 10px; font-size: 14px; text-align: center; }
@keyframes belir { from { opacity: 0; } to { opacity: 1; } }
@keyframes indir { from { transform: translateY(-100%); } to { transform: none; } }

.dil-sec { position: relative; }
.dil-sec summary { list-style: none; display: grid; place-items: center; min-width: 44px; height: 44px; font-size: 13px; font-weight: 500; letter-spacing: .06em; cursor: pointer; }
.dil-sec summary::-webkit-details-marker { display: none; }
.dil-sec ul { position: absolute; inset-inline-end: 0; top: 100%; z-index: 5; min-width: 168px; padding: 6px 0; background: var(--bg); color: var(--ink); border: 1px solid var(--cizgi); }
.dil-sec li a { display: block; padding: 11px 16px; font-size: 15px; }
.dil-sec [aria-current], .alt-dil [aria-current], .menu-dil [aria-current] { text-decoration: underline; text-underline-offset: 4px; }

/* Fotoğrafın üstündeki başlık (ana sayfa, hikâye) */
.ust--hero { position: absolute; inset-inline: 0; top: 0; background: transparent; color: #fff; }
.ust--hero .hdr { border-color: transparent; }
.ust--hero.dolu { position: fixed; top: calc(var(--duyuru) * -1); background: var(--bg); color: var(--ink); animation: indir .25s ease; }
.ust--hero.dolu .hdr { border-color: var(--cizgi); }

/* 2026-11-01 (Mert): telefonda 5 bağlantı logonun altında, başlıkla birlikte hep görünür.
   Sığmazsa yana kayar. ≥1024 px'te gizli (orada üst menü veya ☰ var). */
:root { --mnav: 40px; }
/* 5'i de ekrana sığsın: aralık eşit dağılır; FR gibi uzun dillerde etiket gerekirse 2 satıra iner. */
.mobil-nav { min-height: var(--mnav); border-bottom: 1px solid var(--cizgi); }
.mobil-nav ul {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  min-height: var(--mnav); padding: 4px 12px; overflow-x: auto; scrollbar-width: none;
}
.mobil-nav ul::-webkit-scrollbar { display: none; }
.mobil-nav li { min-width: 0; }
.mobil-nav a { display: block; font-size: 13px; line-height: 1.2; text-align: center; padding-block: 4px; border-bottom: 1px solid transparent; }
.mobil-nav a[aria-current] { border-color: currentColor; }
.hdr, .ust--hero.dolu .hdr { border-bottom-color: transparent; }
.ust--hero .mobil-nav { border-color: transparent; }
.ust--hero.dolu .mobil-nav { border-color: var(--cizgi); }
/* 2026-11-01 (Mert): telefonda ana sayfada da başlık (logo + 5 bağlantı) hep beyaz zeminli ve en baştan
   yapışkan; fotoğrafın üstüne binmez. Fotoğraf başlığın altından başlar, ilk ekrana sığacak kadar kısalır.
   Masaüstünde (≥1024) eski saydam başlık aynen duruyor. */
@media (max-width: 1023px) {
  .ust--hero, .ust--hero.dolu { position: sticky; top: calc(var(--duyuru) * -1); background: var(--bg); color: var(--ink); animation: none; }
  .ust--hero .mobil-nav { border-color: var(--cizgi); }
  .ust--hero ~ main .hero .gecici, .hero .gecici { top: 12px; }
}
@media (min-width: 1024px) {
  :root { --mnav: 0px; }
  .mobil-nav { display: none; }
  .hdr { border-bottom-color: var(--cizgi); }
  .ust--hero .hdr { border-color: transparent; }
  .ust--hero.dolu .hdr { border-color: var(--cizgi); }
}

/* Telefon alt çubuğu */
.alt-cubuk {
  position: fixed; inset-inline: 0; bottom: 0; z-index: 45; display: grid; grid-template-columns: repeat(3, 1fr);
  background: var(--bg); border-top: 1px solid var(--cizgi); padding-bottom: env(safe-area-inset-bottom, 0px);
}
.alt-cubuk a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; height: var(--cubuk); font-size: 11px; }
@media (min-width: 1024px) { .alt-cubuk { display: none; } }

/* Menü (telefon) */
.menu-panel { position: fixed; inset: 0; z-index: 60; display: none; flex-direction: column; overflow: auto; background: var(--bg); color: var(--ink); animation: belir .2s ease; }
.menu-panel:target { display: flex; }
html:has(.menu-panel:target), html:has(.panel:target), html:has(.iz-kare:target) { overflow: hidden; }
.menu-ust { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; height: var(--hdr); padding-inline: var(--g); background: var(--bg); border-bottom: 1px solid var(--cizgi); }
.kapat { display: grid; place-items: center; width: 48px; height: 48px; margin-inline-end: -12px; }
.menu-govde { display: grid; gap: 28px; padding: 24px var(--g) calc(32px + env(safe-area-inset-bottom, 0px)); }
.menu-govde h2 { font-size: 12px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 6px; }
.menu-govde li a { display: flex; align-items: center; min-height: 44px; font-size: 20px; }
.menu-dil ul { display: flex; flex-wrap: wrap; gap: 0 20px; }
.menu-dil li a { font-size: 16px; }
.menu-foto img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.menu-foto span { display: block; margin-top: 8px; font-size: 14px; }
@media (min-width: 768px) { .menu-govde { grid-template-columns: 1fr 1fr; align-items: start; } .menu-foto { grid-column: 2; grid-row: 1 / span 4; } }

/* ------------------------------------------------ ortak parçalar */
.dugme {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 12px 24px;
  background: var(--ink); color: var(--bg); border: 1px solid var(--ink);
  font-size: 14px; font-weight: 500; letter-spacing: .01em; text-transform: uppercase; line-height: 1.15; text-align: center;
}
.dugme svg { width: 20px; height: 20px; }
.dugme--cizgi { background: transparent; color: var(--ink); }
.dugme--genis { width: 100%; }
.dugmeler { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.ok-link { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: 14px; font-weight: 500; letter-spacing: .01em; text-transform: uppercase; }
.koyu .dugme--cizgi { color: var(--koyu-ink); border-color: var(--koyu-ink); }

.yt {
  width: 100%; display: grid; place-items: center; padding: 16px; text-align: center; font-size: 13px; line-height: 1.4; color: var(--ink-2);
  background: repeating-linear-gradient(135deg, var(--yuzey) 0 14px, #E8E7DF 14px 28px); border: 1px dashed #CFCDC3;
}
.yt small { display: block; margin-top: 4px; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; }
.koyu .yt { color: var(--koyu-ink-2); background: repeating-linear-gradient(135deg, #2A2222 0 14px, #251E1E 14px 28px); border-color: var(--koyu-cizgi); }
.gecici { position: absolute; inset-inline-start: 12px; top: 12px; z-index: 2; padding: 5px 8px; font-size: 12px; line-height: 1.2; color: var(--ink); background: rgba(247, 248, 243, .92); pointer-events: none; }
.ust--hero ~ main .hero .gecici, .hero .gecici { top: calc(var(--duyuru) + var(--hdr) + var(--mnav) + 8px); }
.rozet { display: inline-block; padding: 2px 6px; font-size: 11px; line-height: 1.4; color: var(--ink-2); border: 1px solid var(--cizgi); }

.kirinti ol { display: flex; flex-wrap: wrap; align-items: center; gap: 0 6px; font-size: 12px; font-weight: 500; letter-spacing: .01em; text-transform: uppercase; }
.kirinti li { display: flex; align-items: center; gap: 6px; }
.kirinti a { display: inline-flex; align-items: center; min-height: 40px; }
.kirinti [aria-current] { color: var(--ink-2); }
.kirinti .chev { width: 12px; height: 12px; }

.sayfa-ust { padding: 20px var(--g) 16px; }
.sayfa-ust h1 { font-size: 28px; line-height: 1.15; }
@media (min-width: 1024px) { .sayfa-ust { padding-top: 28px; } .sayfa-ust h1 { font-size: 32px; } }
.sayfa-ust .buyuk-metin { margin-top: 16px; }
.dar { max-width: 800px; margin-inline: auto; }
section.dar { padding-inline: var(--g); padding-bottom: 56px; }
.sayfa-alt { padding: 8px var(--g) 32px; border-top: 1px solid var(--cizgi); }

.tablo { display: grid; margin: 8px 0 20px; }
.tablo > div { display: grid; grid-template-columns: minmax(110px, 38%) minmax(0, 1fr); gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--cizgi); }
.tablo dt { color: var(--ink-2); font-size: 14px; }
.tablo dd { font-size: 15px; }

/* ------------------------------------------------ ana sayfa */
.hero { position: relative; overflow: hidden; color: #fff; background: var(--koyu); }
.hero-resim img { width: 100%; height: calc(100svh - var(--cubuk)); min-height: 520px; object-fit: cover; }
@media (min-width: 768px) { .hero-resim img { height: min(56.25vw, 100svh); min-height: 560px; } }
/* 2026-11-01 (Mert): telefonda başlık fotoğrafın üstünde değil, üstünde duruyor → fotoğraf ilk ekrana sığacak kadar kısalır. */
@media (max-width: 767px) {
  .hero-resim img { height: calc(100svh - var(--cubuk) - var(--duyuru) - var(--hdr) - var(--mnav)); min-height: 420px; }
  /* 2026-11-01 (Mert: "kafalar kesik olmasın"): Safari çubuğu alanı basıklaştırınca fotoğraf yalnız alttan kırpılsın. */
  .hero-resim img { object-position: 50% 0; }
}
.hero-metin { position: absolute; inset-inline: 0; bottom: 0; padding: 140px var(--g) 36px; text-align: center; background: linear-gradient(to top, rgba(0, 0, 0, .42), transparent); }
/* 2026-11-01 (Mert): slayt gösterisi. Kareler yan yana durur; parmakla kaydırılır (yatay kaydırma + snap),
   site.js 5 sn'de bir kendiliğinden ilerletir. Yazı katmanı dokunuşu geçirir ki yazının üstünden de kaydırılabilsin.
   Krem kazaklı karede de yazı okunsun diye alttaki koyu geçiş ve yazı gölgesi biraz güçlü. */
.hero-slaytlar {
  display: flex; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory;
  scrollbar-width: none; overscroll-behavior-x: contain;
}
.hero-slaytlar::-webkit-scrollbar { display: none; }
.hero-slaytlar .hero-resim { flex: 0 0 100%; scroll-snap-align: start; scroll-snap-stop: always; }
.hero-metin { pointer-events: none; }
.hero-metin a, .hero-metin button { pointer-events: auto; }
.hero-noktalar { display: flex; justify-content: center; gap: 2px; margin: 14px 0 -10px; }
.hero-noktalar button { display: grid; place-items: center; width: 32px; height: 28px; padding: 0; border: 0; background: none; cursor: pointer; }
.hero-noktalar button::after { content: ""; width: 22px; height: 2px; background: rgba(255, 255, 255, .45); transition: background .3s; }
.hero-noktalar button[aria-current]::after { background: #fff; }
.hero-metin { background: linear-gradient(to top, rgba(0, 0, 0, .62), rgba(0, 0, 0, .28) 55%, transparent); }
.hero-ust, .hero-baslik, .hero .ok-link { text-shadow: 0 1px 14px rgba(0, 0, 0, .45); }
.hero-ust { font-size: 16px; }
.hero-baslik { margin: 6px 0 12px; font-size: clamp(36px, 5.6vw, 64px); line-height: 1.08; }
@media (min-width: 1024px) { .hero-ust { font-size: 20px; } .hero-metin { padding-bottom: 56px; } }

.makro { position: relative; color: #fff; background: var(--koyu); }
.makro-resim img { width: 100%; max-height: 100svh; object-fit: cover; }
.makro-metin { display: grid; gap: 14px; padding: 28px var(--g) 36px; }
@media (min-width: 1024px) { .makro-metin { position: absolute; inset: auto 0 0 0; background: linear-gradient(to top, rgba(0, 0, 0, .6), transparent); } }
.makro-baslik { font-size: clamp(28px, 3.6vw, 40px); line-height: 1.15; }
.makro-sag p { max-width: 30em; margin-bottom: 8px; }
@media (min-width: 1024px) { .makro-metin { grid-template-columns: 1fr 1fr; align-items: end; padding: 200px 8vw 56px; } }

.orta { position: relative; display: grid; gap: 20px; padding: 48px var(--g); grid-template-areas: "b" "s" "k" "m"; }
.orta-baslik { grid-area: b; font-size: 28px; line-height: 1.15; }
.orta-sahne { grid-area: s; }
.og { display: none; }
.og img { width: 100%; aspect-ratio: 2 / 3; object-fit: cover; }
.og figcaption { margin-top: 12px; font-size: 15px; text-align: center; }
.og figcaption .kart-tur { display: block; color: var(--ink-2); font-size: 13px; }
.orta-kucuk { grid-area: k; display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; margin-inline: calc(-1 * var(--g)); padding-inline: var(--g); }
.orta-kucuk::-webkit-scrollbar { display: none; }
.orta-kucuk label { flex: none; width: 64px; padding-bottom: 6px; cursor: pointer; opacity: .5; border-bottom: 2px solid transparent; }
.orta-kucuk img { aspect-ratio: 2 / 3; object-fit: cover; }
.orta-metin { grid-area: m; }
.orta-metin p { max-width: 28em; margin-bottom: 8px; }
.ok-link--koyu { color: var(--ink); }
@media (min-width: 1024px) {
  .orta { grid-template-columns: 1fr minmax(320px, 32vw) 1fr auto; grid-template-areas: "b s m k"; align-items: start; column-gap: 4vw; padding: 72px var(--g) 72px; }
  .orta-baslik { font-size: 32px; }
  .orta-kucuk { display: grid; grid-template-columns: repeat(2, clamp(44px, 3.8vw, 64px)); gap: 8px 10px; overflow: visible; margin: 0; padding: 0; }
  .orta-kucuk label { width: auto; }
}

.kutular { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 0 var(--g) 48px; }
@media (min-width: 1024px) { .kutular { grid-template-columns: repeat(4, 1fr); gap: 10px; padding-bottom: 72px; } }
.kutu { position: relative; display: block; overflow: hidden; background: var(--koyu); }
.kutu img { width: 100%; aspect-ratio: 1; object-fit: cover; transition: transform .6s ease; }
.kutu:hover img { transform: scale(1.03); }
.kutu span {
  position: absolute; inset-inline: 0; bottom: 0; display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 48px 8px 16px; color: #fff; font-size: 13px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase;
  background: linear-gradient(to top, rgba(0, 0, 0, .5), transparent);
}
.kutu .yt { aspect-ratio: 1; }

.serit { padding: 8px 0 56px; }
.serit-ust { display: flex; align-items: center; justify-content: space-between; padding: 0 var(--g) 20px; }
.serit-ust h2 { font-size: 28px; }
.oklar { display: none; gap: 8px; }
@media (min-width: 1024px) { .oklar { display: flex; } .serit-ust h2 { font-size: 32px; } }
.oklar button { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--cizgi); }
.serit-iz, .kombin-liste {
  display: grid; grid-auto-flow: column; grid-auto-columns: 64vw; gap: 12px; overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; padding-inline: var(--g); scroll-padding-inline: var(--g); scrollbar-width: none;
}
.serit-iz::-webkit-scrollbar, .kombin-liste::-webkit-scrollbar, .galeri-iz::-webkit-scrollbar, .iz-liste::-webkit-scrollbar { display: none; }
.serit-iz > li, .kombin-liste > li { scroll-snap-align: start; }
.serit-iz img { width: 100%; aspect-ratio: 2 / 3; object-fit: cover; background: var(--yuzey); }
@media (min-width: 768px) { .serit-iz { grid-auto-columns: 34vw; } }
@media (min-width: 1024px) { .serit-iz { grid-auto-columns: 22vw; } }
.kart-ad { display: block; margin-top: 10px; font-size: 14px; }
.kart-tur { display: block; margin-top: 2px; font-size: 13px; color: var(--ink-2); }
.kart-seri { margin-top: 2px; font-size: 13px; }

.teaser { display: grid; gap: 28px; padding: 56px var(--g); }
.teaser h2 { margin-bottom: 14px; font-size: clamp(28px, 3.6vw, 40px); line-height: 1.15; }
.teaser-metin p { max-width: 32em; margin-bottom: 14px; }
.teaser-resim img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.teaser .adres { display: flex; align-items: center; gap: 8px; color: var(--ink-2); }
.teaser .adres svg { width: 20px; height: 20px; }
.koyu { background: var(--koyu); color: var(--koyu-ink); }
.koyu .kod, .koyu .kart-tur { color: var(--koyu-ink-2); }
@media (min-width: 1024px) { .teaser { grid-template-columns: 1fr 1fr; align-items: center; gap: 8vw; padding: 96px 8vw; } }

/* ------------------------------------------------ liste */
.liste-ust { display: grid; gap: 16px; }
@media (min-width: 1024px) { .liste-ust { grid-template-columns: 1fr auto; align-items: end; } }
.adet { margin-top: 6px; font-size: 14px; color: var(--ink-2); }
.haplar { display: flex; flex-wrap: wrap; gap: 8px; }
.haplar a, .haplar span { display: inline-flex; align-items: center; min-height: 40px; padding: 8px 14px; font-size: 14px; background: var(--yuzey); }
.haplar [aria-current] { background: var(--ink); color: var(--bg); }
.liste { padding-bottom: 48px; }
.arac { display: flex; align-items: center; gap: 4px; padding: 4px var(--g) 16px; font-size: 14px; }
.arac label { display: inline-flex; align-items: center; min-height: 44px; padding: 0 8px; cursor: pointer; color: var(--ink-2); border-bottom: 1px solid transparent; }
#g-manken:checked ~ .arac [for="g-manken"], #g-urun:checked ~ .arac [for="g-urun"] { color: var(--ink); border-color: var(--ink); }
#g-manken:focus-visible ~ .arac [for="g-manken"], #g-urun:focus-visible ~ .arac [for="g-urun"] { outline: 2px solid var(--ink); }
.izgara { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 2px; }
@media (min-width: 768px) { .izgara { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .izgara { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.kart > a { display: block; }
.kart-resim { position: relative; background: var(--yuzey); }
.kart-resim img { width: 100%; aspect-ratio: 2 / 3; object-fit: cover; }
.k-urun { display: none; }
#g-urun:checked ~ .izgara .k-manken { display: none; }
#g-urun:checked ~ .izgara .k-urun { display: block; }
.izgara .kart-ad, .izgara .kart-tur, .izgara .kart-seri { padding-inline: 12px; }
.kart[hidden] { display: none; }

/* ------------------------------------------------ ürün */
.galeri { position: relative; --gh: min(calc(100svh - var(--hdr) - var(--mnav) - 80px), 960px); }
.galeri-iz { display: flex; gap: 2px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; }
.g-kare { position: relative; flex: 0 0 100%; scroll-snap-align: start; }
.g-ac { display: block; }
.g-kare img { width: 100%; aspect-ratio: 2 / 3; object-fit: cover; background: var(--yuzey); }
@media (min-width: 768px) {
  .g-kare { flex: 0 0 auto; width: calc(var(--gh) * 2 / 3); height: var(--gh); }
  .g-kare picture, .g-kare img { width: 100%; height: 100%; }
}
.g-ok { position: absolute; top: 50%; z-index: 2; display: none; place-items: center; width: 44px; height: 44px; transform: translateY(-50%); background: rgba(247, 248, 243, .92); }
.g-ok--onceki { inset-inline-start: 12px; }
.g-ok--sonraki { inset-inline-end: 12px; }
@media (hover: hover) and (min-width: 768px) { .g-ok { display: grid; } }
.sayac { direction: ltr; unicode-bidi: isolate; position: absolute; inset-inline-end: 12px; bottom: 12px; z-index: 2; padding: 4px 8px; font-size: 13px; background: rgba(247, 248, 243, .92); font-variant-numeric: tabular-nums; }

.urun-bilgi { display: grid; gap: 28px; padding: 16px var(--g) 40px; }
@media (min-width: 1024px) { .urun-bilgi { grid-template-columns: minmax(0, 1fr) minmax(0, 460px); gap: 8vw; padding: 32px var(--g) 64px; } }
.urun-ad { font-size: 22px; line-height: 1.2; }
.urun-tur { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-top: 4px; color: var(--ink-2); }
.urun-seri { margin-top: 6px; }
.urun-fiyat { margin-top: 2px; font-size: 14px; color: var(--ink-2); }
.ub-sol .dugme { margin-top: 20px; }
.urun-hikaye { margin-top: 20px; max-width: 34em; }
@media (min-width: 1024px) { .urun-ad { font-size: 24px; } .ub-sol .dugme--genis { width: auto; min-width: 320px; } }
.satirlar { border-top: 1px solid var(--cizgi); }
.satirlar a { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 56px; font-size: 16px; border-bottom: 1px solid var(--cizgi); }

.kombin { padding: 16px 0 48px; }
.kombin h2 { padding: 0 var(--g) 16px; font-size: 24px; }
.kombin-liste { grid-auto-columns: 62vw; }
.kombin-liste img { width: 100%; aspect-ratio: 2 / 3; object-fit: cover; background: var(--yuzey); }
@media (min-width: 768px) { .kombin-liste { grid-auto-columns: 30vw; } }
@media (min-width: 1024px) { .kombin-liste { grid-auto-flow: row; grid-template-columns: repeat(4, minmax(0, 1fr)); overflow: visible; } }
.bu-karede { display: flex; align-items: center; gap: 6px; min-height: 44px; margin-top: 6px; font-size: 14px; }
.bu-karede > span { text-decoration: underline; text-underline-offset: 4px; }
.kombin .kart-ad { display: block; padding-block: 12px 10px; margin-top: 0; }
.kombin .kart-tur { margin-top: -6px; }

.panel { position: fixed; inset: 0; z-index: 70; display: none; overflow: auto; background: var(--bg); color: var(--ink); animation: belir .2s ease; }
.panel:target { display: block; }
.panel-resim { display: none; }
.panel-govde { max-width: 640px; padding: 0 var(--g) calc(40px + env(safe-area-inset-bottom, 0px)); }
.panel-ust { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: var(--hdr); margin-bottom: 20px; background: var(--bg); border-bottom: 1px solid var(--cizgi); }
.panel-ust h2 { font-size: 20px; }
.panel-urun { margin-bottom: 16px; font-size: 14px; color: var(--ink-2); }
.panel-govde > p { max-width: 36em; margin-bottom: 16px; }
@media (min-width: 1024px) {
  .panel:target { display: grid; grid-template-columns: 1fr 1fr; }
  .panel-resim { position: sticky; top: 0; display: grid; place-items: center; height: 100svh; padding: 48px; border-inline-end: 1px solid var(--cizgi); }
  .panel-resim img { max-height: calc(100svh - 96px); width: auto; }
  .panel-govde { padding-inline: 56px; }
}

.izleyici { position: fixed; inset: 0; z-index: 80; display: none; background: var(--bg); }
.izleyici:has(.iz-kare:target) { display: block; }
.iz-liste { display: flex; height: 100%; overflow-x: auto; overscroll-behavior: contain; scroll-snap-type: x mandatory; scrollbar-width: none; }
.iz-kare { display: grid; place-items: center; flex: 0 0 100%; height: 100%; scroll-snap-align: start; }
.iz-kare picture { display: grid; place-items: center; height: 100%; }
.iz-kare img { width: auto; height: 100%; max-width: 100vw; object-fit: contain; }
.izleyici-kapat { position: absolute; top: 8px; inset-inline-end: 20px; z-index: 3; background: rgba(247, 248, 243, .92); }
.iz-kucuk { display: none; }
@media (min-width: 1024px) {
  .iz-kucuk { position: absolute; inset-inline-end: 24px; top: 50%; z-index: 2; display: flex; flex-direction: column; gap: 8px; max-height: 76svh; overflow: auto; transform: translateY(-50%); }
  .iz-kucuk a { width: 56px; opacity: .6; }
  .iz-kucuk a:hover { opacity: 1; }
  .iz-kucuk img { aspect-ratio: 2 / 3; object-fit: cover; }
}

.urun-cubuk {
  position: fixed; inset-inline: 0; bottom: 0; z-index: 45; display: flex; align-items: center; gap: 10px;
  padding: 8px var(--g) calc(8px + env(safe-area-inset-bottom, 0px)); background: var(--bg); border-top: 1px solid var(--cizgi);
}
.uc-meta { flex: 1 1 auto; min-width: 0; font-size: 13px; line-height: 1.3; }
.uc-meta b { display: block; font-size: 14px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.uc-meta span { display: block; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.uc-fiyat { display: none; }
.uc-wa { flex: 0 0 auto; min-height: 48px; padding: 10px 16px; }
.uc-menu { display: grid; flex: 0 0 auto; place-items: center; width: 44px; height: 48px; margin-inline-end: -8px; }
@media (min-width: 1024px) {
  .uc-fiyat { display: block; font-size: 14px; color: var(--ink-2); }
  .uc-meta { flex: 0 1 auto; }
  .urun-cubuk { gap: 32px; }
  .uc-wa { min-width: 320px; margin-inline-start: auto; }
  .uc-menu { display: none; }
}

/* ------------------------------------------------ hikâye */
.giris { padding: 56px var(--g); }
@media (min-width: 1024px) { .giris { padding: 96px 8vw; } }
.sabit-bolum { display: grid; gap: 24px; padding-bottom: 56px; }
.sabit-resim { position: relative; }
.sabit-resim img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.sabit-sag { padding-inline: var(--g); }
.sabit-metin { max-width: 32em; padding: 8px 0 32px; }
.sabit-metin h2 { margin-bottom: 12px; font-size: 28px; }
.sabit-metin p { margin-bottom: 8px; }
.sabit-izgara { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 8px; }
.sabit-izgara img { width: 100%; aspect-ratio: 2 / 3; object-fit: cover; background: var(--yuzey); }
@media (min-width: 1024px) {
  .sabit-bolum { grid-template-columns: 1fr 1fr; align-items: start; gap: 0; padding-bottom: 96px; }
  .sabit-sol { position: sticky; top: var(--hdr); height: calc(100svh - var(--hdr)); }
  .sabit-resim, .sabit-resim picture { height: 100%; }
  .sabit-resim img { height: 100%; aspect-ratio: auto; }
  .sabit-sag { padding: 56px 4vw 0; }
}
.zaman { padding: 56px var(--g) 72px; border-top: 1px solid var(--cizgi); }
.zaman > h2 { margin-bottom: 36px; font-size: 28px; }
.zaman-liste { display: grid; grid-template-columns: minmax(0, 1fr); gap: 52px; }
.z { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.z-yil { font-size: 40px; font-weight: 300; line-height: 1; }
.z-icerik h3 { margin-bottom: 8px; font-size: 20px; }
.z-icerik p { max-width: 34em; }
.z-resimler { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; max-width: 900px; margin-top: 20px; }
.z-resimler img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.ani { max-width: 40em; margin-top: 20px; padding: 20px; border: 1px dashed #CFCDC3; }
.ani-etiket { margin-bottom: 8px; font-size: 12px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }@media (min-width: 1024px) { .zaman { padding: 96px 8vw; } .z { grid-template-columns: 200px minmax(0, 1fr); gap: 40px; } .zaman > h2 { font-size: 32px; } }

/* ------------------------------------------------ showroom, toptan, iletişim, arama */
.iki-kolon { display: grid; gap: 28px; padding: 0 var(--g) 56px; }
.ik-resim img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.ik-metin .tablo { margin-top: 24px; }
@media (min-width: 1024px) { .iki-kolon { grid-template-columns: 1fr 1fr; align-items: start; gap: 6vw; } }

.adimlar { display: grid; gap: 28px; margin: 8px 0 32px; }
.adimlar li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 16px; align-items: start; }
.adim-no { display: grid; place-items: center; width: 40px; height: 40px; font-size: 16px; border: 1px solid var(--ink); font-variant-numeric: tabular-nums; }
.adimlar h2 { margin-bottom: 4px; font-size: 18px; }
.adimlar p { color: var(--ink-2); }

.iletisim-satiri { display: flex; flex-wrap: wrap; gap: 0 28px; margin-top: 16px; font-size: 14px; font-weight: 500; letter-spacing: .01em; text-transform: uppercase; }
.iletisim-satiri li { display: flex; align-items: center; gap: 6px; min-height: 44px; }
.iletisim-satiri a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; }
.iletisim-satiri svg { width: 18px; height: 18px; }
.sss { padding-top: 24px; }
.sss h2, .hizmetler h2 { margin-bottom: 16px; font-size: 24px; }
.sss details { border-bottom: 1px solid var(--cizgi); }
.sss summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 56px; font-size: 17px; list-style: none; cursor: pointer; }
.sss summary::-webkit-details-marker { display: none; }
.sss summary .chev { transition: transform .2s ease; }
.sss details[open] summary .chev { transform: rotate(90deg); }
[dir="rtl"] .sss details[open] summary .chev { transform: scaleX(-1) rotate(90deg); }
.sss details p { max-width: 40em; padding-bottom: 20px; color: var(--ink-2); }

.ara-form { position: relative; max-width: 640px; margin-top: 16px; }
.ara-form svg { position: absolute; inset-inline-start: 0; top: 50%; transform: translateY(-50%); color: var(--ink-2); }
.ara-form input {
  width: 100%; padding: 14px 0; padding-inline-start: 36px; font: inherit; font-size: 20px; color: var(--ink);
  background: transparent; border: 0; border-bottom: 1px solid var(--ink); border-radius: 0; -webkit-appearance: none; appearance: none;
}
.ara-form input:focus { outline: none; border-bottom-width: 2px; }
.ara-yok { padding: 0 var(--g) 24px; color: var(--ink-2); }

/* ------------------------------------------------ footer */
.alt { padding: 48px var(--g) 32px; color: var(--koyu-ink); background: var(--koyu); }
.alt-kolonlar { display: grid; gap: 32px; }
.alt h2 { margin-bottom: 10px; font-size: 18px; color: var(--koyu-ink-2); }
.alt li { font-size: 15px; line-height: 1.5; }
.alt li a { display: inline-flex; align-items: center; min-height: 36px; }
.alt .bekleniyor { color: var(--koyu-ink-2); }
.alt-dil-b { margin-top: 24px; }
.alt-dil { display: flex; flex-wrap: wrap; gap: 0 18px; }
.alt-marka { margin-top: 56px; padding-top: 28px; border-top: 1px solid var(--koyu-cizgi); }
.alt-marka .marka--buyuk { margin-bottom: 14px; font-size: clamp(34px, 10.4vw, 156px); line-height: .95; letter-spacing: .06em; color: var(--koyu-ink); }
.alt-marka p { font-size: 14px; color: var(--koyu-ink-2); }
.alt-haklar { margin-top: 4px; }
@media (min-width: 768px) { .alt-kolonlar { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .alt { padding: 72px var(--g) 40px; } .alt-kolonlar { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ------------------------------------------------ kök (dil seçimi) ve 404 */
body.kok { display: grid; place-items: center; min-height: 100svh; padding: 0; color: var(--koyu-ink); background: var(--koyu); }
.kok-govde { padding: 40px var(--g); text-align: center; }
.kok .marka--buyuk { font-size: clamp(34px, 8vw, 88px); letter-spacing: .1em; }
.kok-alt { margin: 14px 0 32px; color: var(--koyu-ink-2); }
.kok-diller { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.kok-diller a { display: inline-flex; align-items: center; min-height: 48px; padding: 0 20px; border: 1px solid #4A3E3E; }
.kok-baslik { margin: 16px 0; font-size: 48px; font-weight: 300; }
.kok-satir { margin: 8px 0; color: var(--koyu-ink-2); }
.kok-satir a { color: var(--koyu-ink); text-decoration: underline; text-underline-offset: 4px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

@media (max-width: 380px) { .uc-wa { padding: 10px 12px; gap: 8px; font-size: 13px; } .urun-cubuk { gap: 8px; } .uc-meta span { display: none; } .uc-meta b { white-space: normal; } }

/* 2026-10-25: M amblemi (kravat düğümü + kravatlı M), menüde yazının solunda, altta büyük yazının üstünde */
.marka { display: inline-flex; align-items: center; gap: .5em; }
.marka .amblem { height: 1.5em; width: auto; flex: none; }
.alt-amblem { margin-bottom: 18px; color: var(--koyu-ink); }
.alt-amblem .amblem { display: block; height: clamp(56px, 7vw, 104px); width: auto; }
/* 2026-10-25: ana sayfa girişinde amblem; zaman çizelgesinde arşiv fotoğrafları kendi oranında, baskı gibi */
.hero-amblem { margin-bottom: 14px; color: #fff; }
.hero-amblem .amblem { display: block; height: clamp(40px, 5vw, 64px); width: auto; margin-inline: auto; filter: drop-shadow(0 1px 6px rgba(0, 0, 0, .35)); }
.z-resimler { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 20px; max-width: 980px; }
.z-resimler figure { margin: 0; }
.z-resimler img { aspect-ratio: auto; height: auto; object-fit: initial; padding: 8px; background: #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .14); }
.z-resimler figcaption { margin-top: 10px; font-size: 13px; color: var(--ink-2); }
.ani { max-width: 36em; margin-top: 24px; padding: 4px 0 4px 20px; border: 0; border-inline-start: 2px solid var(--ink); }
.ani p { font-size: 20px; line-height: 1.45; }
.ani .ani-etiket { margin: 10px 0 0; }
.z-resimler:has(figure:only-child) { grid-template-columns: minmax(0, 1fr); max-width: 560px; }
/* 2026-10-25: Hikâyemiz kapağı sakin: başlık + giriş solda, arşiv fotoğrafı sağda baskı gibi (tam ekran fotoğraf "kaba" bulundu) */
.hk-kapak { display: grid; gap: 32px; padding: 40px var(--g) 56px; }
.hk-kapak-ust { font-size: 15px; color: var(--ink-2); }
.hk-kapak-baslik { margin: 6px 0 20px; font-size: clamp(40px, 6vw, 72px); line-height: 1.05; }
.hk-kapak-foto { margin: 0; }
.hk-kapak-foto img { width: 100%; height: auto; padding: 10px; background: #fff; box-shadow: 0 1px 6px rgba(0, 0, 0, .14); }
.hk-kapak-foto figcaption { margin-top: 10px; font-size: 13px; color: var(--ink-2); }
@media (min-width: 1024px) {
  .hk-kapak { grid-template-columns: minmax(0, 1fr) minmax(0, 46vw); align-items: center; gap: 6vw; padding: 64px 8vw 96px; }
  .hk-kapak-foto img { max-height: calc(100svh - var(--hdr) - 200px); width: auto; max-width: 100%; margin-inline-start: auto; }
  .hk-kapak-foto figcaption { text-align: end; }
}
/* "Deri, dikiş, sabır": üç detay karesi; telefonda yatay kayar */
.hk-detay { padding: 0 0 64px; }
.hk-detay-metin { display: grid; gap: 10px; padding: 0 var(--g) 24px; }
.hk-detay-metin h2 { font-size: clamp(28px, 3.6vw, 40px); line-height: 1.15; }
.hk-detay-metin p { max-width: 30em; color: var(--ink-2); }
.hk-detay-kareler { display: grid; grid-auto-flow: column; grid-auto-columns: 78vw; gap: 10px; padding-inline: var(--g); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.hk-detay-kareler li { scroll-snap-align: start; }
.hk-detay-kareler img { width: 100%; height: auto; }
@media (min-width: 1024px) {
  .hk-detay { padding: 0 8vw 96px; }
  .hk-detay-metin { grid-template-columns: 1fr 1fr; align-items: end; padding: 0 0 32px; }
  .hk-detay-kareler { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding: 0; overflow: visible; }
}