/* Gürses Beko tanıtım sitesi
   Renkler: Beko Kurumsal Kimlik Kılavuzu v.02-062024 (turuncu yalnız kampanya etiketi ve bilgi ikonlarında) */
/* Encode Sans (SIL Open Font License), Google Fonts'tan indirilip sitenin içinden sunuluyor */
@font-face {
  font-family: "Encode Sans"; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url(../assets/font/encode-sans-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: "Encode Sans"; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url(../assets/font/encode-sans-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;
}

:root {
  --mavi: #007DBA;
  --lacivert: #003E72;
  --gri: #474646;
  --kar: #E5E3DD;
  --turuncu: #ED7422;
  --zemin: #F5F5F7;
  --sicak: #FBFAF7;
  --kart: #FFFFFF;
  --murekkep: #1D1D1F;
  --soluk: #6E6E73;
  --cizgi: #E3E3E8;
  --wa: #128C4A;
  --ust-yuk: 56px;
  --kenar: 20px;
  --icerik: 1080px;
  --yumusak: cubic-bezier(.2, .7, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: var(--ust-yuk); }
body {
  margin: 0;
  font-family: "Encode Sans", system-ui, -apple-system, sans-serif;
  font-size: 17px;
  line-height: 1.5;
  color: var(--gri);
  background: var(--zemin);
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}
img, video, canvas { display: block; max-width: 100%; }
a { color: inherit; }
button { font-family: inherit; }
h1, h2, h3 { color: var(--murekkep); margin: 0; }
:focus-visible { outline: 3px solid var(--mavi); outline-offset: 3px; border-radius: 8px; }
[hidden] { display: none !important; }

.ust-baslik { margin: 0 0 8px; font-size: 15px; font-weight: 600; color: var(--mavi); letter-spacing: .01em; }
.aciklama { margin: 0; font-size: clamp(17px, 2.1vw, 21px); line-height: 1.5; max-width: 42ch; }

/* ---------- Üst menü (buzlu cam) ---------- */
.ust {
  position: fixed; inset: 0 0 auto; z-index: 50;
  background: rgba(251, 250, 247, .76);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid rgba(0, 0, 0, .06);
}
.ust-ic {
  max-width: var(--icerik); height: var(--ust-yuk); margin: 0 auto; padding: 0 var(--kenar);
  display: flex; align-items: center; gap: 24px;
}
.marka { display: flex; align-items: center; gap: 10px; text-decoration: none; margin-right: auto; }
.marka img { width: 38px; height: auto; }
.marka-yazi { display: flex; flex-direction: column; line-height: 1.15; }
.marka-yazi b { font-size: 13px; font-weight: 800; letter-spacing: .06em; color: var(--lacivert); white-space: nowrap; }
.marka-yazi small { font-size: 12px; font-weight: 500; color: var(--gri); }
.menu { display: none; gap: 26px; }
.menu a { font-size: 14px; font-weight: 500; text-decoration: none; color: var(--murekkep); opacity: .8; transition: opacity .2s; }
.menu a:hover { opacity: 1; }
.ust-wa {
  display: none; padding: 8px 16px; border-radius: 999px; background: var(--wa); color: #fff;
  font-size: 14px; font-weight: 700; text-decoration: none;
}

/* ---------- Düğmeler ---------- */
.dugme {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 0; cursor: pointer;
  padding: 14px 22px; border-radius: 999px; background: var(--mavi); color: #fff;
  font-size: 16px; font-weight: 700; line-height: 1.2; text-decoration: none; transition: filter .2s, transform .15s;
}
.dugme:hover { filter: brightness(1.08); }
.dugme:active { transform: scale(.97); }
.dugme.wa { background: var(--wa); }
.dugme.koyu { background: var(--murekkep); }
.dugme.acik { background: rgba(0, 125, 186, .1); color: var(--mavi); }
.dugme.buyuk { padding: 16px 26px; font-size: 17px; }
.wa-ikon { width: 22px; height: 22px; flex: none; }
.kapat {
  width: 40px; height: 40px; border-radius: 50%; border: 0; cursor: pointer; flex: none;
  background: rgba(0, 0, 0, .07); color: var(--murekkep); font-size: 26px; line-height: 1; display: grid; place-items: center;
}

/* ---------- Kaydırmalı sahneler (ortak) ---------- */
.sahne-alani { position: relative; }
.sahne { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.kaydir-pil {
  position: absolute; left: 50%; bottom: calc(92px + env(safe-area-inset-bottom)); transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 999px; white-space: nowrap;
  background: rgba(255, 255, 255, .78); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  color: var(--murekkep); font-size: 14px; font-weight: 600; box-shadow: 0 4px 20px rgba(0, 0, 0, .08);
  transition: opacity .5s ease;
}
.kaydir-pil svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; animation: sallan 1.8s ease-in-out infinite; }
.kaydir-pil.gizli { opacity: 0; }
@keyframes sallan { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(5px); } }

/* ---------- 1. Giriş: logodaki ev ---------- */
.ev-sahne { height: 520vh; }
.ev-sahne .sahne { background: var(--sicak); }
.ev-ic {
  position: absolute; inset: var(--ust-yuk) 0 0; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 2.4vh; padding: 0 var(--kenar);
}
.ev-yazi { text-align: center; }
.ev-yazi h1 { font-size: clamp(34px, 7vw, 84px); font-weight: 800; letter-spacing: -.03em; line-height: 1.04; }
.durumlar { position: relative; min-height: 3.4em; margin-top: 10px; font-size: clamp(16px, 1.9vw, 21px); }
.durum {
  position: absolute; inset: 0 0 auto; margin: 0; opacity: 0; transform: translateY(10px);
  transition: opacity .6s ease, transform .8s var(--yumusak);
}
.durum.gorunur { opacity: 1; transform: none; }
.durum b { display: block; color: var(--mavi); font-size: .82em; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 2px; }
.ev { position: relative; width: min(92vw, 56svh); aspect-ratio: 1; flex: none; overflow: hidden; border-radius: 28px; }
.kamera { position: absolute; inset: 0; transform-origin: 0 0; will-change: transform; }
.kamera svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.cizgi { fill: none; stroke: var(--mavi); stroke-width: 12; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.cizgi-iz { fill: none; stroke: #D3E6F2; stroke-width: 12; stroke-linecap: round; stroke-linejoin: round; }
.esya { opacity: 0; }
.duvar-arasi { fill: none; stroke: #D9D2C5; stroke-width: 9; stroke-linecap: round; }
.ev-urun { position: absolute; display: block; max-width: none; filter: drop-shadow(0 1px 1.5px rgba(40, 30, 20, .2)); opacity: 0; will-change: transform, opacity; }
.temas { position: absolute; border-radius: 50%; background: radial-gradient(closest-side, rgba(45, 35, 25, .32), rgba(45, 35, 25, 0)); opacity: 0; }
.oda {
  position: absolute; font-size: clamp(9px, 1.3vw, 13px); font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--mavi); opacity: 0; transition: opacity .6s ease;
}
.oda.gorunur { opacity: .9; }
.cati-yazi {
  position: absolute; left: 0; right: 0; top: 23.5%; line-height: 1; text-align: center; color: var(--lacivert);
  font-size: clamp(22px, 5.2vw, 52px); font-weight: 800; letter-spacing: .04em;
  opacity: 0; transform: translateY(10px); transition: opacity .8s ease, transform 1s var(--yumusak);
}
.cati-yazi.gorunur { opacity: 1; transform: none; }
.cati-yazi small { display: block; margin-top: .1em; font-size: .42em; letter-spacing: .32em; text-indent: .32em; }

/* ---------- Bölümler ---------- */
.bolum { padding: 88px 0; }
.bolum.dar { padding: 56px 0; }
.bolum-bas { max-width: var(--icerik); margin: 0 auto 28px; padding: 0 var(--kenar); }
.bolum h2 {
  font-size: clamp(34px, 7vw, 64px); font-weight: 800; line-height: 1.05; letter-spacing: -.028em;
  margin-bottom: 14px; max-width: 18ch;
}

/* ---------- Yana kayan raflar (Apple Store gibi) ---------- */
.raf { position: relative; }
.raf-ic {
  display: flex; gap: 16px; overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scrollbar-width: none;
  padding: 8px var(--kenar) 32px; scroll-padding-inline: var(--kenar);
}
.raf-ic::-webkit-scrollbar { display: none; }
.raf-ic > * { flex: 0 0 auto; scroll-snap-align: start; }
.raf-oklar { display: none; }
.ok {
  width: 44px; height: 44px; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(0, 0, 0, .07); color: var(--murekkep); font-size: 26px; font-weight: 500; line-height: 1;
  display: grid; place-items: center; padding-bottom: 3px; transition: background .2s, opacity .2s;
}
.ok:hover { background: rgba(0, 0, 0, .12); }
.ok:disabled { opacity: .3; cursor: default; }

/* Reyon kartları */
.reyon {
  position: relative; width: min(76vw, 320px); aspect-ratio: 3 / 4.3; border-radius: 28px; overflow: hidden;
  background: #2a2f36; color: #fff; text-decoration: none; isolation: isolate;
  box-shadow: 0 6px 24px rgba(0, 30, 60, .1); transition: transform .4s var(--yumusak), box-shadow .4s;
}
.reyon video, .reyon .hareketli { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.reyon::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to top, rgba(0, 20, 45, .82) 0%, rgba(0, 20, 45, .25) 42%, rgba(0, 20, 45, 0) 62%);
}
.reyon-yazi { position: absolute; left: 22px; right: 22px; bottom: 22px; }
.reyon h3 { color: #fff; font-size: 27px; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; }
.reyon p { margin: 6px 0 0; font-size: 15px; opacity: .9; }
.cip {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; padding: 9px 15px; border-radius: 999px;
  background: rgba(255, 255, 255, .2); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  font-size: 14px; font-weight: 700;
}

/* Ürün kartları (çok satanlar ve liste) */
.urun {
  width: min(72vw, 280px); display: flex; flex-direction: column; padding: 18px 20px 20px;
  background: var(--kart); border-radius: 28px; box-shadow: 0 2px 16px rgba(0, 0, 0, .05);
  transition: transform .4s var(--yumusak), box-shadow .4s;
}
.urun-foto { position: relative; aspect-ratio: 1; margin-bottom: 14px; }
.urun-foto img { position: absolute; inset: 6%; width: 88%; height: 88%; object-fit: contain; mix-blend-mode: multiply; }
.urun-tur { font-size: 12px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--soluk); }
.urun h3 { font-size: 19px; font-weight: 700; line-height: 1.25; margin: 4px 0 2px; }
.urun-model { font-size: 14px; color: var(--soluk); }
.urun-eylem { margin-top: auto; padding-top: 16px; display: flex; align-items: center; gap: 8px; }
.urun-eylem .fiyat-sor { font-size: 14px; font-weight: 700; color: var(--mavi); text-decoration: none; margin-right: auto; }
.ekle {
  display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 999px; cursor: pointer;
  border: 1.5px solid #D2D2D7; background: var(--kart); color: var(--murekkep);
  font-size: 14px; font-weight: 600; line-height: 1.2; transition: background .2s, border-color .2s, color .2s, transform .15s;
}
.ekle:active { transform: scale(.95); }
.ekle[aria-pressed="true"] { background: var(--mavi); border-color: var(--mavi); color: #fff; }

/* ---------- 4. Gürses farkı: dönen çamaşır makinesi ---------- */
.fark { height: 520vh; }
.fark .sahne {
  background: radial-gradient(56% 44% at 50% 50%, rgba(0, 125, 186, .5), rgba(0, 125, 186, 0) 72%), var(--lacivert);
  color: var(--kar);
}
.fark-ic {
  position: absolute; inset: var(--ust-yuk) 0 0; display: grid; grid-template-rows: auto 1fr auto auto;
  justify-items: center; padding: 3vh var(--kenar) calc(4vh + env(safe-area-inset-bottom));
}
/* telefonda sıra: başlık, ürün, madde, noktalar */
.fark-sol { display: contents; }
.fark-bas { order: 1; text-align: center; }
.urun-alani { order: 2; }
.maddeler { order: 3; }
.noktalar { order: 4; }
.fark-bas .ust-baslik { color: var(--kar); opacity: .75; }
.fark-bas h2 { color: #fff; font-size: clamp(30px, 7.4vw, 60px); font-weight: 800; line-height: 1.06; letter-spacing: -.028em; }
.urun-alani { position: relative; align-self: center; height: min(44svh, 86vw); aspect-ratio: 1158 / 1201; }
.urun-kutu { position: absolute; inset: 0; will-change: transform; }
.urun-kutu img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; }
.yer-golgesi {
  position: absolute; left: 8%; right: 8%; bottom: -5%; height: 10%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0, 8, 24, .62), rgba(0, 8, 24, 0));
}
.isik {
  position: absolute; inset: -18%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(255, 255, 255, .16), rgba(255, 255, 255, 0) 70%);
}
.maddeler { list-style: none; margin: 0; padding: 0; position: relative; width: 100%; max-width: 420px; height: 112px; }
.madde {
  position: absolute; inset: 0; text-align: center; opacity: 0; transform: translateY(16px);
  transition: opacity .6s ease, transform .8s var(--yumusak);
}
.madde.gorunur { opacity: 1; transform: none; }
.madde svg { width: 28px; height: 28px; margin: 0 auto 6px; display: block; fill: none; stroke: var(--turuncu); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.madde b { display: block; color: #fff; font-size: 21px; font-weight: 700; }
.madde span { font-size: 15px; color: var(--kar); }
.noktalar { display: flex; gap: 8px; justify-content: center; margin-top: 14px; }
.noktalar i { width: 7px; height: 7px; border-radius: 50%; background: rgba(229, 227, 221, .3); transition: background .3s, width .3s; }
.noktalar i.aktif { width: 22px; border-radius: 4px; background: #fff; }

/* ---------- 5. Ürün listesi ---------- */
.liste { background: var(--kart); }
.katalog { max-width: var(--icerik); margin: 0 auto; padding: 0 var(--kenar); }
.katalog-ust { display: grid; gap: 14px; margin-bottom: 22px; }
.sekmeler {
  display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 0 calc(-1 * var(--kenar)); padding: 2px var(--kenar);
}
.sekmeler::-webkit-scrollbar { display: none; }
.sekme {
  flex: none; padding: 10px 16px; border-radius: 999px; border: 0; cursor: pointer; white-space: nowrap;
  background: var(--zemin); color: var(--murekkep); font-size: 15px; font-weight: 600; transition: background .2s, color .2s;
}
.sekme[aria-selected="true"] { background: var(--murekkep); color: #fff; }
.ara {
  display: flex; align-items: center; gap: 10px; padding: 0 16px; height: 48px; border-radius: 14px; background: var(--zemin);
}
.ara svg { width: 20px; height: 20px; flex: none; fill: none; stroke: var(--soluk); stroke-width: 2; stroke-linecap: round; }
.ara input {
  flex: 1; min-width: 0; height: 100%; border: 0; background: none; outline: none;
  font-family: inherit; font-size: 16px; color: var(--murekkep);
}
.katalog-izgara { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.katalog-izgara .urun { width: auto; padding: 14px 14px 16px; border-radius: 22px; background: var(--zemin); box-shadow: none; }
.katalog-izgara .urun h3 { font-size: 16px; }
.katalog-izgara .urun-model { font-size: 13px; }
.katalog-izgara .urun-eylem { padding-top: 12px; }
.katalog-izgara .ekle { width: 100%; justify-content: center; }
.katalog-bos { grid-column: 1 / -1; text-align: center; padding: 40px 0; color: var(--soluk); }
.daha { display: flex; margin: 24px auto 0; }

/* ---------- 6. Kampanya + Instagram ---------- */
.kampanya-ic { max-width: var(--icerik); margin: 0 auto; padding: 0 var(--kenar); display: grid; gap: 48px; align-items: center; }
.etiket {
  display: inline-block; margin: 0 0 14px; padding: 6px 10px; border-radius: 8px; background: var(--turuncu); color: #fff;
  font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
}
.kampanya-dugmeler { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.telefon { position: relative; display: block; width: min(78vw, 340px); margin: 0 auto; text-decoration: none; color: inherit; }
/* Sağlıklı Yol bandı: Beko mavisi, 8° yükselen şerit */
.yol-bandi {
  position: absolute; left: -14%; right: -60vw; top: 58%; height: 54px; background: var(--mavi);
  transform: rotate(-8deg); z-index: 0;
}
.kampanya-yazi { position: relative; z-index: 2; }
.telefon-ic {
  position: relative; z-index: 1; aspect-ratio: 9 / 19; border-radius: 44px; background: #fff; overflow: hidden;
  box-shadow: 0 0 0 10px #1D1D1F, 0 30px 70px rgba(0, 30, 60, .3);
}
/* Instagram uygulaması gibi: telefonun kendi yazı tipi, ince çizgiler */
.ig { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; color: #000; font-size: 12px; line-height: 1.35; }
.ig-durum, .ig-ust { position: relative; z-index: 2; background: #fff; } /* profil kayınca üst çubukların altından geçer */
.ig-durum { display: flex; justify-content: space-between; align-items: center; padding: 12px 26px 4px; font-size: 13px; }
.ig-pil { width: 22px; height: 10px; border: 1.5px solid #000; border-radius: 3px; position: relative; }
.ig-pil::after { content: ""; position: absolute; inset: 1px 4px 1px 1px; background: #000; border-radius: 1px; }
.ig-ust { display: flex; align-items: center; gap: 10px; padding: 6px 14px 8px; font-size: 16px; }
.ig-ust b { flex: 1; text-align: center; }
.ig-geri { font-size: 26px; line-height: 1; }
.ig-nokta { font-weight: 700; letter-spacing: 1px; }
.ig-kaydir { will-change: transform; transition: transform 1.1s cubic-bezier(.4, 0, .2, 1); }
.ig-profil { display: flex; align-items: center; gap: 6px; padding: 6px 14px; }
.ig-avatar {
  width: 74px; height: 74px; border-radius: 50%; flex: none; display: grid; place-items: center; margin-right: 10px;
  background: #fff; box-shadow: 0 0 0 1px #DBDBDB;
}
.ig-avatar img { width: 72%; height: 72%; object-fit: contain; }
.ig-avatar.kucuk { width: 28px; height: 28px; margin: 0; }
.ig-sayi { flex: 1; display: flex; flex-direction: column; align-items: center; font-size: 12px; }
.ig-sayi b { font-size: 15px; }
.ig-bio { padding: 4px 14px 10px; }
.ig-bio b { display: block; }
.ig-kategori { display: block; color: #737373; }
.ig-dugmeler { display: flex; gap: 6px; padding: 0 14px 12px; }
.ig-dugmeler span { flex: 1; text-align: center; padding: 7px 0; border-radius: 8px; background: #EFEFEF; font-weight: 600; font-size: 13px; }
.ig-dugmeler .ig-takip { background: #0095F6; color: #fff; }
.ig-one-cikanlar { display: flex; gap: 12px; padding: 0 14px 12px; }
.ig-one-cikanlar span { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 60px; font-size: 11px; text-align: center; }
.ig-one-cikanlar img { width: 58px; height: 58px; border-radius: 50%; box-shadow: 0 0 0 1.5px #fff, 0 0 0 2.5px #DBDBDB; }
.ig-sekmeler { display: flex; border-top: 1px solid #DBDBDB; }
.ig-sekmeler svg { flex: 1; height: 38px; padding: 10px 0; fill: none; stroke: #8E8E8E; stroke-width: 1.7; stroke-linejoin: round; }
.ig-sekmeler svg.secili { stroke: #000; border-bottom: 1.5px solid #000; }
.ig-izgara { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; }
.ig-izgara img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; transition: filter .2s; }
.ig-izgara img.dokun { filter: brightness(.7); }
/* gönderi açılınca: Reels tam ekran */
.ig-reel {
  position: absolute; inset: 0; z-index: 3; background: #000 center / cover no-repeat; color: #fff; transform-origin: 0 0;
  transition: transform .35s cubic-bezier(.4, 0, .2, 1), opacity .3s ease;
}
.ig-reel video, .ig-hareketli { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ig-reel-ust { position: absolute; top: 34px; left: 14px; right: 14px; display: flex; align-items: center; gap: 12px; font-size: 18px; text-shadow: 0 1px 4px rgba(0, 0, 0, .5); }
.ig-reel-ust span { font-size: 28px; line-height: 1; }
.ig-reel-yan { position: absolute; right: 10px; bottom: 90px; display: grid; gap: 18px; }
.ig-reel-yan svg { width: 26px; height: 26px; fill: none; stroke: #fff; stroke-width: 1.8; stroke-linejoin: round; filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .5)); }
.ig-reel-alt {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 40px 14px 22px;
  background: linear-gradient(to top, rgba(0, 0, 0, .6), rgba(0, 0, 0, 0));
}
.ig-reel-hesap { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.ig-reel-takip { padding: 3px 10px; border: 1px solid rgba(255, 255, 255, .8); border-radius: 8px; font-size: 12px; font-weight: 600; }
.ig-reel-alt p { margin: 8px 0 0; font-size: 13px; padding-right: 40px; }
#kampanyalar { overflow: hidden; }

/* ---------- 7. Oyun ---------- */
.oyun-pencere { position: fixed; inset: 0; z-index: 90; background: var(--sicak); }
.oyun-pencere iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.oyun-pencere .kapat {
  position: absolute; z-index: 1; top: calc(8px + env(safe-area-inset-top)); right: 12px;
  background: rgba(255, 255, 255, .9); box-shadow: 0 2px 12px rgba(0, 0, 0, .12);
}

/* ---------- 8. Yorumlar ---------- */
.puan {
  display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 999px; background: var(--kart);
  color: var(--murekkep); font-size: 16px; text-decoration: none; box-shadow: 0 2px 12px rgba(0, 0, 0, .05);
}
.yildizlar { color: #F5A623; letter-spacing: 1px; }
.yorum {
  width: min(82vw, 380px); min-height: 250px; margin: 0; padding: 28px 26px; border-radius: 28px; background: var(--kart);
  display: flex; flex-direction: column; gap: 14px; box-shadow: 0 2px 16px rgba(0, 0, 0, .05);
}
.yorum .yildizlar { font-size: 15px; }
.yorum blockquote {
  margin: 0; color: var(--murekkep); font-size: clamp(19px, 4.4vw, 22px); font-weight: 600; line-height: 1.35; letter-spacing: -.01em;
}
.yorum figcaption { margin-top: auto; font-size: 15px; color: var(--soluk); }
.yorum figcaption b { color: var(--murekkep); }

/* ---------- 8b. 3D yol tarifi ---------- */
.yol-kutu {
  position: relative; overflow: hidden; min-height: 460px; border-radius: 28px; background: #E6EDF1;
  box-shadow: 0 2px 16px rgba(0, 0, 0, .06); isolation: isolate;
}
.yol-kapak {
  position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column; justify-content: flex-end; gap: 12px;
  padding: 24px; border: 0; cursor: pointer; text-align: left; color: #fff; font: inherit;
  background: linear-gradient(to top, rgba(0, 25, 50, .85), rgba(0, 25, 50, .15) 60%, rgba(0, 25, 50, 0)), url(../assets/img/cephe.webp) 50% 36% / cover;
}
.yol-kapak b { font-size: 22px; font-weight: 800; letter-spacing: -.01em; }
.yol-kapak span { font-size: 15px; opacity: .9; }
.yol-kapak i { display: inline-flex; width: max-content; font-style: normal; }
.yol-kutu .yol-harita { position: absolute; inset: 0; height: 100%; } /* maplibre kendi .maplibregl-map kuralıyla relative yapmasın */
.yol-secim { position: absolute; z-index: 2; top: 14px; left: 14px; right: 14px; display: flex; flex-wrap: wrap; gap: 8px; }
.yol-secim .sekme { background: rgba(255, 255, 255, .9); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 2px 10px rgba(0, 0, 0, .1); }
.yol-secim .sekme[aria-selected="true"] { background: var(--murekkep); color: #fff; }
.yol-alt {
  position: absolute; z-index: 2; left: 14px; right: 14px; bottom: 14px;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px;
}
.yol-bilgi {
  padding: 10px 16px; border-radius: 999px; font-size: 15px; font-weight: 600; color: var(--murekkep);
  background: rgba(255, 255, 255, .9); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 2px 10px rgba(0, 0, 0, .1);
}
.yol-isaret { display: flex; flex-direction: column; align-items: center; gap: 6px; pointer-events: none; }
.yol-isaret span {
  position: relative; width: 56px; height: 56px; border-radius: 50%; background: #fff; display: grid; place-items: center;
  box-shadow: 0 0 0 4px var(--mavi), 0 10px 24px rgba(0, 40, 80, .35);
}
.yol-isaret span::after {
  content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 3px solid var(--mavi); animation: nabiz 2s ease-out infinite;
}
@keyframes nabiz { from { transform: scale(1); opacity: .8; } to { transform: scale(1.9); opacity: 0; } }
.yol-isaret img { width: 36px; height: 36px; object-fit: contain; }
.yol-isaret b { padding: 4px 10px; border-radius: 8px; background: var(--murekkep); color: #fff; font-size: 13px; white-space: nowrap; }
.yol-yedek { position: absolute; inset: 0; display: grid; place-items: center; padding: 24px; text-align: center; color: var(--soluk); }

/* ---------- 9. Mağaza: kapıdan giriş ---------- */
.kapi { height: 460vh; }
.kapi .sahne { background: var(--lacivert); }
.kapi-arka { display: none; }
.kapi-medya { position: absolute; inset: 0; overflow: hidden; background: #DCE3E9; }
.kapi-medya .kare-tuval, .cephe { position: absolute; inset: 0; width: 100%; height: 100%; }
.cephe {
  object-fit: cover; object-position: 44% 38%;
  transform-origin: 44% 38%; transform: scale(2.4); will-change: transform;
}
.perde {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(0, 25, 50, .72) 0%, rgba(0, 25, 50, .35) 32%, rgba(0, 25, 50, 0) 55%);
}
.kapi-yazilar { position: absolute; inset: 0; pointer-events: none; }
.kapi-yazi {
  position: absolute; left: var(--kenar); right: var(--kenar); bottom: calc(108px + env(safe-area-inset-bottom));
  color: #fff; opacity: 0; transform: translateY(28px); container-type: inline-size;
  transition: opacity .7s ease, transform 1s var(--yumusak);
}
.kapi-yazi.gorunur { opacity: 1; transform: none; }
.kapi-yazi h2 { color: inherit; font-size: min(84px, 12cqi); font-weight: 800; letter-spacing: -.03em; line-height: 1.03; max-width: 12ch; }
.kapi-yazi .ust-baslik { color: #fff; opacity: .9; }
.kapi-yazi .alt { margin: 12px 0 0; font-size: 17px; font-weight: 500; opacity: .92; }
.kare-tuval { width: 100%; height: 100%; }

/* ---------- Mağaza bilgileri ---------- */
.magaza { max-width: var(--icerik); margin: 0 auto; padding: 0 var(--kenar); display: grid; gap: 16px; }
.magaza-bilgi { padding: 22px 26px 28px; border-radius: 28px; background: var(--kart); box-shadow: 0 2px 16px rgba(0, 0, 0, .05); }
.acik-rozet {
  display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 999px; font-size: 14px; font-weight: 700;
  background: rgba(18, 140, 74, .1); color: var(--wa);
}
.acik-rozet:empty { display: none; }
.acik-rozet::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.acik-rozet.kapali { background: rgba(0, 0, 0, .06); color: var(--soluk); }
.magaza-bilgi dl { margin: 8px 0 0; }
.magaza-bilgi dl > div { padding: 18px 0; border-bottom: 1px solid var(--cizgi); }
.magaza-bilgi dt { font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--soluk); }
.magaza-bilgi dd { margin: 6px 0 0; font-size: 19px; font-weight: 600; color: var(--murekkep); line-height: 1.4; }
.magaza-bilgi dd a { color: var(--mavi); text-decoration: none; }
.magaza-bilgi dd small { font-size: 14px; font-weight: 500; color: var(--soluk); }
.magaza-dugmeler { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }

/* ---------- Alt bilgi ---------- */
.alt-bilgi { background: var(--lacivert); color: var(--kar); padding: 48px var(--kenar) calc(112px + env(safe-area-inset-bottom)); }
.alt-ic { max-width: var(--icerik); margin: 0 auto; display: grid; gap: 22px; }
.alt-marka { display: flex; align-items: center; gap: 14px; font-size: 16px; line-height: 1.35; }
.alt-marka img { width: 56px; height: auto; }
.alt-marka b { color: #fff; letter-spacing: .04em; }
.alt-iletisim p { margin: 0 0 4px; }
.alt-iletisim a { color: #fff; text-decoration: none; }
.yasal { margin: 0; padding-top: 20px; border-top: 1px solid rgba(229, 227, 221, .16); font-size: 13px; line-height: 1.6; opacity: .72; }
.yasal a { color: inherit; }
.kunye { display: grid; gap: 4px 28px; margin: 0; padding-top: 20px; border-top: 1px solid rgba(229, 227, 221, .16); font-size: 14px; }
.kunye div { display: flex; gap: 8px; }
.kunye dt { opacity: .65; min-width: 104px; }
.kunye dd { margin: 0; color: #fff; }
.kunye a { color: #fff; text-decoration: none; }
.alt-baglanti { display: flex; flex-wrap: wrap; gap: 10px; }
.alt-baglanti a, .alt-baglanti button {
  display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 999px; border: 1px solid rgba(229, 227, 221, .22);
  background: none; color: var(--kar); font-size: 14px; font-weight: 600; text-decoration: none; cursor: pointer;
}
.alt-baglanti a:hover, .alt-baglanti button:hover { background: rgba(255, 255, 255, .08); }

/* ---------- Sabit WhatsApp düğmesi ve Listem çubuğu ---------- */
.sabit-wa {
  position: fixed; z-index: 60; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom));
  display: inline-flex; align-items: center; gap: 10px; padding: 14px 20px 14px 16px; border-radius: 999px;
  background: var(--wa); color: #fff; font-size: 16px; font-weight: 700; text-decoration: none;
  box-shadow: 0 10px 30px rgba(18, 140, 74, .38), 0 2px 6px rgba(0, 0, 0, .12);
  transition: transform .25s var(--yumusak);
}
.sabit-wa:active { transform: scale(.96); }
.sabit-wa .wa-ikon { width: 24px; height: 24px; }
.liste-cubuk {
  position: fixed; z-index: 61; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom));
  display: flex; align-items: center; gap: 8px; padding: 8px 8px 8px 18px; border-radius: 999px; max-width: 520px; margin: 0 auto;
  background: rgba(29, 29, 31, .92); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); color: #fff;
  box-shadow: 0 12px 34px rgba(0, 0, 0, .28); animation: yuksel .45s var(--yumusak);
}
@keyframes yuksel { from { transform: translateY(30px); opacity: 0; } }
.liste-ac { flex: 1; text-align: left; border: 0; background: none; color: inherit; font-size: 16px; font-weight: 600; cursor: pointer; padding: 8px 0; }
.liste-sayi { display: inline-grid; place-items: center; min-width: 26px; height: 26px; padding: 0 7px; margin-right: 6px; border-radius: 13px; background: var(--mavi); font-weight: 800; }
.liste-cubuk .dugme { padding: 12px 20px; }

.cekmece { position: fixed; inset: 0; z-index: 80; }
.cekmece-perde { position: absolute; inset: 0; background: rgba(0, 0, 0, .35); animation: belir .3s ease; }
@keyframes belir { from { opacity: 0; } }
.cekmece-ic {
  position: absolute; left: 0; right: 0; bottom: 0; max-height: 86vh; display: flex; flex-direction: column;
  background: var(--kart); border-radius: 28px 28px 0 0; padding: 18px 20px calc(18px + env(safe-area-inset-bottom));
  box-shadow: 0 -10px 40px rgba(0, 0, 0, .18); animation: yuksel .4s var(--yumusak);
}
.cekmece-ust { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.cekmece-ust h2 { font-size: 26px; font-weight: 800; }
.liste-ogeler { list-style: none; margin: 0; padding: 0; overflow: auto; flex: 1; }
.liste-ogeler li { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--cizgi); }
.liste-ogeler img { width: 52px; height: 52px; object-fit: contain; flex: none; mix-blend-mode: multiply; }
.liste-ogeler .og-yazi { flex: 1; min-width: 0; line-height: 1.3; }
.liste-ogeler .og-yazi b { display: block; color: var(--murekkep); font-size: 16px; }
.liste-ogeler .og-yazi small { color: var(--soluk); font-size: 13px; }
.adet { display: flex; align-items: center; gap: 4px; }
.adet button {
  width: 32px; height: 32px; border-radius: 50%; border: 0; cursor: pointer; background: var(--zemin);
  color: var(--murekkep); font-size: 18px; font-weight: 700; line-height: 1;
}
.adet span { min-width: 22px; text-align: center; font-weight: 700; color: var(--murekkep); }
.cekmece-alt { display: grid; gap: 10px; padding-top: 16px; }

/* ---------- Kaydırınca belirme ---------- */
.js [data-goster] { opacity: 0; transform: translateY(32px); transition: opacity .8s ease, transform 1s var(--yumusak); }
.js [data-goster].gorundu { opacity: 1; transform: none; }

@media (hover: hover) {
  .reyon:hover, .js .reyon.gorundu:hover { transform: scale(1.015); box-shadow: 0 14px 40px rgba(0, 30, 60, .18); }
  .raf .urun:hover, .js .raf .urun.gorundu:hover { transform: translateY(-4px); box-shadow: 0 14px 36px rgba(0, 0, 0, .1); }
}

/* ---------- Geniş ekran ---------- */
@media (min-width: 700px) {
  :root { --kenar: 32px; }
  .ust-wa { display: inline-flex; }
  .raf-ic { padding-inline: max(var(--kenar), calc(50vw - var(--icerik) / 2 + var(--kenar))); scroll-padding-inline: max(var(--kenar), calc(50vw - var(--icerik) / 2 + var(--kenar))); }
  .raf-oklar { display: flex; justify-content: flex-end; gap: 12px; max-width: var(--icerik); margin: -8px auto 0; padding: 0 var(--kenar); }
  .katalog-izgara { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  .katalog-ust { grid-template-columns: 1fr minmax(220px, 300px); align-items: center; }
  .sekmeler { margin: 0; padding: 2px 0; flex-wrap: wrap; }
  .magaza { grid-template-columns: 1fr 1fr; }
  .yol-kutu { min-height: 100%; }
  .alt-ic { grid-template-columns: auto 1fr; align-items: center; }
  .alt-iletisim { text-align: right; }
  .yasal, .kunye, .alt-baglanti { grid-column: 1 / -1; }
  .kunye { grid-template-columns: 1fr 1fr; }
  .cekmece-ic { left: 50%; right: auto; bottom: 50%; width: min(520px, 92vw); transform: translate(-50%, 50%); border-radius: 28px; animation: belir .3s ease; }
}

@media (min-width: 900px) {
  .menu { display: flex; }
  .bolum { padding: 120px 0; }
  .bolum.dar { padding: 72px 0; }
  .kaydir-pil { bottom: 28px; }

  /* Giriş: yazı solda, ev sağda */
  .ev-ic { flex-direction: row; justify-content: center; gap: 6vw; }
  .ev-yazi { text-align: left; width: min(36vw, 480px); }
  .ev { width: min(48vw, calc(100vh - var(--ust-yuk) - 80px)); }

  /* Reyonlar: kaydırma yok, altı reyon ekrana yayılır */
  .reyon-rafi .raf-ic {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; overflow: visible;
    max-width: var(--icerik); margin: 0 auto; padding: 8px var(--kenar) 0;
  }
  .reyon-rafi .reyon { width: auto; aspect-ratio: 4 / 4.6; }

  /* Fark: maddeler solda, ürün sağda */
  .fark-ic {
    grid-template-columns: minmax(0, 440px) minmax(0, 600px); grid-template-rows: 1fr; align-items: center;
    justify-content: center; column-gap: 7vw; padding-top: 0;
  }
  .fark-sol { display: grid; gap: 40px; grid-column: 1; grid-row: 1; }
  .fark-bas { text-align: left; }
  .urun-alani { grid-column: 2; grid-row: 1; height: min(66vh, 600px); }
  .maddeler { height: auto; display: grid; gap: 26px; max-width: none; }
  .madde { position: static; text-align: left; display: grid; grid-template-columns: 34px 1fr; column-gap: 14px; }
  .madde svg { margin: 2px 0 0; grid-row: span 2; }
  .madde.gorunur.gecmis { opacity: .45; }
  .noktalar { display: none; }

  .katalog-izgara { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .kampanya-ic { grid-template-columns: 1.1fr 1fr; gap: 64px; }
  .telefon { width: 360px; }

  /* Mağaza: arkada bulanık tam ekran görüntü, ortada dikey video, yazılar solda */
  .kapi-arka {
    display: block; position: absolute; inset: -40px; width: calc(100% + 80px); height: calc(100% + 80px); max-width: none;
    filter: blur(34px) brightness(.55) saturate(1.1);
  }
  .kapi-medya {
    inset: auto; top: calc(50% + var(--ust-yuk) / 2); right: max(6vw, calc(50vw - 540px));
    height: min(calc(100vh - var(--ust-yuk) - 64px), 900px); aspect-ratio: 9 / 16;
    transform: translateY(-50%); border-radius: 34px; box-shadow: 0 30px 80px rgba(0, 0, 0, .4);
  }
  .perde { display: none; }
  .kapi-yazi {
    left: max(6vw, calc(50vw - 540px)); right: auto;
    width: calc(100vw - 2 * max(6vw, calc(50vw - 540px)) - min(calc(100vh - var(--ust-yuk) - 64px), 900px) * .5625 - 56px);
    top: calc(50% + var(--ust-yuk) / 2); bottom: auto; transform: translateY(calc(-50% + 28px));
  }
  .kapi-yazi.gorunur { transform: translateY(-50%); }
  .kapi-yazi .ust-baslik { color: #8FD3F4; opacity: 1; }
  .sabit-wa { right: 24px; bottom: 24px; }
}

@media (min-width: 1200px) {
  .katalog-izgara { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

/* ---------- Hareket azaltma tercihi ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .ev-sahne, .fark, .kapi { height: auto; }
  .sahne { position: relative; }
  .cephe { transform: none; }
  .kapi-yazi, .madde, .durum, .js [data-goster] { transition: none; }
  .cizgi { stroke-dashoffset: 0; }
  .kaydir-pil { display: none; }
  .fark .maddeler { height: auto; }
  .fark .madde { position: static; margin-bottom: 18px; }
}

/* ---------- Listem kısayolu (ana sayfada, çok satanların altında) ---------- */
.liste-kisayol {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px;
  max-width: var(--icerik); margin: 8px var(--kenar) 0; padding: 26px 28px; border-radius: 28px; text-decoration: none;
  background: linear-gradient(120deg, #EAF4FA, #F7FAFC); box-shadow: inset 0 0 0 1px rgba(0, 125, 186, .12);
}
.liste-kisayol b { display: block; color: var(--murekkep); font-size: clamp(22px, 4vw, 28px); font-weight: 800; letter-spacing: -.02em; line-height: 1.15; }
.liste-kisayol span { display: block; margin-top: 6px; font-size: 16px; }
.liste-kisayol .dugme { flex: none; }
@media (min-width: 700px) { .liste-kisayol { margin: 8px auto 0; width: calc(100% - 2 * var(--kenar)); padding: 30px 36px; } }

/* ---------- Listem sayfası ---------- */
.liste-sayfa { padding-top: calc(var(--ust-yuk) + 40px); min-height: 80vh; }
.menu a.secili { opacity: 1; font-weight: 700; color: var(--mavi); }

/* ---------- Yan menü: sağ kenarda bölüm kısayolları; dokununca/üstüne gelince açılır ---------- */
.yan-menu {
  position: fixed; z-index: 55; right: 10px; top: 50%; transform: translateY(-50%);
  display: flex; flex-direction: column; align-items: flex-end;
}
.yan-ic {
  display: flex; flex-direction: column; gap: 2px; padding: 8px 6px; border-radius: 22px;
  background: rgba(251, 250, 247, .72); -webkit-backdrop-filter: saturate(180%) blur(18px); backdrop-filter: saturate(180%) blur(18px);
  box-shadow: 0 6px 24px rgba(0, 30, 60, .12), inset 0 0 0 1px rgba(255, 255, 255, .6);
  transition: padding .35s var(--yumusak), background .3s;
}
.yan-menu a, .yan-menu button {
  display: flex; align-items: center; justify-content: flex-end; gap: 10px; height: 28px; padding: 0 6px; border: 0; border-radius: 14px;
  background: none; color: var(--murekkep); font-family: inherit; font-size: 14px; font-weight: 600; line-height: 1; text-decoration: none; cursor: pointer; white-space: nowrap;
}
.yan-menu .ad { max-width: 0; overflow: hidden; opacity: 0; transition: max-width .35s var(--yumusak), opacity .25s; }
.yan-menu i { flex: none; width: 8px; height: 8px; border-radius: 50%; background: rgba(29, 29, 31, .28); transition: background .25s, transform .25s; }
.yan-menu a.aktif i { background: var(--mavi); transform: scale(1.35); }
.yan-menu a.aktif .ad { color: var(--mavi); }
.yan-menu hr { width: 100%; height: 1px; margin: 4px 0; border: 0; background: rgba(0, 0, 0, .08); }
.yan-menu .ikon-i { width: 14px; height: 14px; border-radius: 0; background: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.yan-menu.acik .yan-ic { padding: 10px 10px 10px 16px; background: rgba(251, 250, 247, .9); }
.yan-menu.acik .ad { max-width: 160px; opacity: 1; }
.yan-menu a:hover, .yan-menu button:hover { background: rgba(0, 125, 186, .08); }
.yan-menu.koyu:not(.acik) .yan-ic { background: rgba(0, 30, 60, .35); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); }
.yan-menu.koyu:not(.acik) i { background: rgba(255, 255, 255, .45); }
.yan-menu.koyu:not(.acik) a.aktif i { background: #fff; }
.yan-menu.koyu:not(.acik) .ikon-i { stroke: #fff; }
@media (hover: hover) and (min-width: 900px) {
  .yan-menu:hover .yan-ic { padding: 10px 10px 10px 16px; background: rgba(251, 250, 247, .9); }
  .yan-menu:hover .ad { max-width: 160px; opacity: 1; }
  .yan-menu.koyu:hover:not(.acik) .yan-ic { background: rgba(251, 250, 247, .9); box-shadow: 0 6px 24px rgba(0, 30, 60, .2); }
  .yan-menu.koyu:hover i { background: rgba(29, 29, 31, .28); }
  .yan-menu.koyu:hover a.aktif i { background: var(--mavi); }
  .yan-menu.koyu:hover .ikon-i { stroke: currentColor; }
}
.yan-menu { transition: opacity .3s ease; }
.yan-menu.gizli { opacity: 0; pointer-events: none; } /* alt bilgiye gelince yazıların üstüne binmesin */
@media (max-width: 699px) {
  .yan-menu { right: 4px; }
  .yan-ic { padding: 6px 2px; }
  .yan-menu a, .yan-menu button { height: 22px; padding: 0 5px; }
  .yan-menu i { width: 6px; height: 6px; }
}

/* ---------- Gizlilik sayfası ---------- */
.metin { max-width: 760px; margin: 0 auto; padding: calc(var(--ust-yuk) + 48px) var(--kenar) 80px; }
.metin h1 { font-size: clamp(32px, 6vw, 48px); font-weight: 800; letter-spacing: -.025em; margin-bottom: 10px; }
.metin h2 { font-size: 21px; font-weight: 700; margin: 34px 0 8px; }
.metin p, .metin li { font-size: 17px; line-height: 1.65; }
.metin ul { padding-left: 20px; }
.metin a { color: var(--mavi); }
.metin .tarih { color: var(--soluk); font-size: 15px; }
.sayfa-baslik { font-size: clamp(34px, 7vw, 60px); font-weight: 800; line-height: 1.05; letter-spacing: -.028em; margin-bottom: 14px; max-width: 18ch; }