/* ==========================================================================
   Minelli Banyo Sistemleri — tasarım sistemi
   ========================================================================== */

/* --- Tokenlar ------------------------------------------------------------ */
:root {
  /* Renk — sıcak kağıt zemin, mürekkep siyahı, pirinç vurgu */
  --kagit:        #faf8f5;
  --kagit-2:      #f2eee8;
  --kagit-3:      #e8e2d9;
  --panel:        #ffffff;
  --murekkep:     #171614;
  --murekkep-2:   #3d3a35;
  --sessiz:       #7d766c;
  --cizgi:        #e2dcd2;
  --pirinc:       #9a7b4f;
  --pirinc-acik:  #c9a86f;
  --bordo:        #6e1423;

  /* Tipografi */
  /* Montserrat — SIL Open Font License, ticari kullanıma açık. */
  --font-display: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  --font-govde:   "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --olcek-xs: 0.75rem;
  --olcek-sm: 0.875rem;
  --olcek-md: 1rem;
  --olcek-lg: 1.125rem;
  --olcek-xl: clamp(1.25rem, 1.02rem + 1.0vw, 1.625rem);
  --olcek-2xl: clamp(1.625rem, 1.2rem + 1.9vw, 2.5rem);
  --olcek-3xl: clamp(2.05rem, 1.35rem + 3.0vw, 3.5rem);

  /* Boşluk — 4px tabanlı */
  --bosluk-1: 0.25rem;
  --bosluk-2: 0.5rem;
  --bosluk-3: 0.75rem;
  --bosluk-4: 1rem;
  --bosluk-6: 1.5rem;
  --bosluk-8: 2rem;
  --bosluk-12: 3rem;
  --bosluk-16: 4rem;
  --bosluk-24: 6rem;
  --bolum: clamp(3.5rem, 2rem + 6vw, 7.5rem);

  --genislik: 1280px;
  --dar: 760px;

  --yuvarlak: 2px;
  --yuvarlak-lg: 4px;

  --golge-sm: 0 1px 2px rgba(23, 22, 20, .06);
  --golge-md: 0 4px 24px rgba(23, 22, 20, .08);
  --golge-lg: 0 24px 64px rgba(23, 22, 20, .14);

  --gecis: 320ms cubic-bezier(.22, .61, .36, 1);
  --gecis-hizli: 180ms cubic-bezier(.22, .61, .36, 1);
}

/* --- Temel --------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;
}

body {
  background: var(--kagit);
  color: var(--murekkep);
  font-family: var(--font-govde);
  font-size: var(--olcek-md);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* `hidden` kaydırma kapsayıcısı oluşturup sticky başlığı bozar; `clip` bozmaz. */
  overflow-x: clip;
}

img, picture, svg, video { display: block; max-width: 100%; height: auto; }
/* <picture> satır-içi kutudur; kırpma çerçevelerinde kapsayıcıyı doldurmalı. */
.kart__cerceve picture, .galeri__ana picture, .hero__gorsel picture,
.galeri__kucuk picture, .katalog-izgara picture {
  display: block; width: 100%; height: 100%;
}
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; color: inherit; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.14;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
p { text-wrap: pretty; }

:focus-visible {
  outline: 2px solid var(--pirinc);
  outline-offset: 3px;
  border-radius: var(--yuvarlak);
}

::selection { background: var(--pirinc-acik); color: var(--murekkep); }

/* --- Yardımcılar --------------------------------------------------------- */
.kap {
  width: min(100% - 2.5rem, var(--genislik));
  margin-inline: auto;
}
@media (min-width: 768px) { .kap { width: min(100% - 5rem, var(--genislik)); } }

.bolum { padding-block: var(--bolum); }
.dar { max-width: var(--dar); }
.gorunmez {
  position: absolute; width: 1px; height: 1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.atla {
  position: absolute; left: var(--bosluk-4); top: -100%;
  background: var(--murekkep); color: var(--kagit);
  padding: var(--bosluk-3) var(--bosluk-6); z-index: 200;
  transition: top var(--gecis-hizli);
}
.atla:focus { top: var(--bosluk-4); }

/* Üst başlık etiketi — pirinç, seyrek harf aralıklı */
.etiket {
  font-size: var(--olcek-xs);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--pirinc);
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: var(--bosluk-3);
  margin-bottom: var(--bosluk-4);
}
.etiket::before {
  content: "";
  width: 2rem; height: 1px;
  background: var(--pirinc);
  flex: 0 0 auto;
}
@media (max-width: 560px) {
  .etiket { flex-wrap: wrap; letter-spacing: .16em; }
  .etiket::before { width: 1.5rem; }
}
.etiket.orta { justify-content: center; }
.etiket.orta::after {
  content: ""; width: 2rem; height: 1px; background: var(--pirinc);
}

/* --- Butonlar ------------------------------------------------------------ */
.btn {
  --btn-bg: var(--murekkep);
  --btn-ink: var(--kagit);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--bosluk-3);
  padding: 0.95rem 2rem;
  background: var(--btn-bg);
  color: var(--btn-ink);
  border: 1px solid var(--btn-bg);
  border-radius: var(--yuvarlak);
  font-size: var(--olcek-sm);
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: background var(--gecis-hizli), color var(--gecis-hizli),
              border-color var(--gecis-hizli), transform var(--gecis-hizli);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--hat {
  --btn-bg: transparent;
  --btn-ink: var(--murekkep);
  border-color: var(--murekkep);
}
.btn--hat:hover { background: var(--murekkep); color: var(--kagit); }

.btn--pirinc { --btn-bg: var(--pirinc); --btn-ink: #fff; }
.btn--pirinc:hover { --btn-bg: #82683f; border-color: #82683f; }

.btn--acik {
  --btn-bg: transparent; --btn-ink: #fff; border-color: rgba(255,255,255,.5);
}
.btn--acik:hover { background: #fff; color: var(--murekkep); border-color: #fff; }

/* sahibinden.com mağaza bağlantısı — markanın sarısı, koyu yazı. */
.btn--sari {
  --btn-bg: #ffe800;
  --btn-ink: #1c1c1c;
  border-color: #ffe800;
  font-weight: 600;
}
.btn--sari:hover { --btn-bg: #ffd400; border-color: #ffd400; }

/* Alt çizgili metin bağlantısı */
.bag {
  display: inline-flex;
  align-items: center;
  gap: var(--bosluk-2);
  font-size: var(--olcek-sm);
  letter-spacing: .06em;
  text-transform: uppercase;
  font-weight: 500;
  padding-bottom: 2px;
  background-image: linear-gradient(var(--pirinc), var(--pirinc));
  background-size: 100% 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size var(--gecis);
}
.bag:hover { background-size: 0% 1px; }
/* Tek başına duran çağrı bağlantıları mobilde 25px'ti. */
@media (max-width: 760px) { .bag { padding-block: .6rem 0.55rem; } }
.bag svg { transition: transform var(--gecis-hizli); }
.bag:hover svg { transform: translateX(4px); }

/* --- Üst menü ------------------------------------------------------------ */
.ust {
  position: sticky; top: 0; z-index: 100;
  background: rgba(250, 248, 245, .82);
  backdrop-filter: saturate(1.4) blur(14px);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--gecis), background var(--gecis);
}
.ust.kaydi { border-bottom-color: var(--cizgi); }

.ust__ic {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--bosluk-8);
  height: 4.75rem;
}
@media (min-width: 1040px) { .ust__ic { height: 5.5rem; } }

.marka { display: flex; flex-direction: column; line-height: 1; flex: 0 0 auto; }
.marka__ad {
  font-family: var(--font-display);
  font-size: 1.55rem;
  font-weight: 700;
  letter-spacing: -.01em;
}
.marka__alt {
  font-size: 0.58rem;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--pirinc);
  margin-top: 3px;
}

.menu { display: none; }
@media (min-width: 1040px) {
  .menu { display: flex; align-items: center; gap: var(--bosluk-5, 1.25rem); }
}
@media (min-width: 1240px) { .menu { gap: var(--bosluk-8); } }
.menu a {
  font-size: var(--olcek-sm);
  letter-spacing: .04em;
  position: relative;
  padding-block: var(--bosluk-2);
  color: var(--murekkep-2);
  transition: color var(--gecis-hizli);
}
.menu a::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 100%; height: 1px; background: var(--pirinc);
  transform: scaleX(0); transform-origin: right;
  transition: transform var(--gecis);
}
.menu a:hover { color: var(--murekkep); }
.menu a:hover::after, .menu a[aria-current="page"]::after {
  transform: scaleX(1); transform-origin: left;
}
.menu a[aria-current="page"] { color: var(--murekkep); }

.ust__sag { display: flex; align-items: center; gap: var(--bosluk-4); }
.ust__sag .btn--hat { display: none; }
@media (min-width: 620px) { .ust__sag .btn--hat { display: inline-flex; } }
.ust__tel {
  display: none;
  font-size: var(--olcek-sm);
  font-weight: 600;
  letter-spacing: .04em;
  white-space: nowrap;
}
@media (min-width: 1240px) { .ust__tel { display: inline-flex; gap: var(--bosluk-2); align-items: center; } }
.ust__tel svg { color: var(--pirinc); }

/* Mobil menü düğmesi */
.menu-dugme {
  display: grid; place-items: center;
  width: 2.75rem; height: 2.75rem;
  background: none; border: 1px solid var(--cizgi);
  border-radius: var(--yuvarlak); cursor: pointer;
}
@media (min-width: 1040px) { .menu-dugme { display: none; } }
.menu-dugme span {
  display: block; width: 18px; height: 1.5px; background: var(--murekkep);
  transition: transform var(--gecis-hizli), opacity var(--gecis-hizli);
}
.menu-dugme span + span { margin-top: 4px; }
.menu-dugme[aria-expanded="true"] span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.menu-dugme[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menu-dugme[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }
.menu-dugme span:nth-child(1) { transform-origin: center; }
.menu-dugme span:nth-child(3) { transform-origin: center; }

.mobil-menu {
  position: fixed; inset: 4.75rem 0 0;
  background: var(--kagit);
  padding: var(--bosluk-8) 1.25rem var(--bosluk-16);
  display: flex; flex-direction: column; gap: var(--bosluk-2);
  transform: translateY(-8px); opacity: 0; pointer-events: none;
  transition: opacity var(--gecis), transform var(--gecis);
  z-index: 99; overflow-y: auto;
}
.mobil-menu.acik { opacity: 1; transform: none; pointer-events: auto; }
@media (min-width: 1040px) { .mobil-menu { display: none; } }
.mobil-menu a {
  font-family: var(--font-display);
  font-size: 1.75rem;
  padding-block: var(--bosluk-3);
  border-bottom: 1px solid var(--cizgi);
}
.mobil-menu .btn {
  margin-top: var(--bosluk-6);
  font-size: var(--olcek-sm);
  border-bottom: 0;
  padding-block: 1rem;
}
body.menu-acik { overflow: hidden; }

/* --- Hero ---------------------------------------------------------------- */
.hero { position: relative; background: var(--murekkep); color: #fff; overflow: hidden; }
.hero__gorsel { position: absolute; inset: 0; }
.hero__gorsel img {
  width: 100%; height: 100%; object-fit: cover;
  object-position: 58% 38%; opacity: .82;
}
.hero__gorsel::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(23,22,20,.55) 0%, rgba(23,22,20,.25) 40%, rgba(23,22,20,.85) 100%);
}
.hero__ic {
  position: relative;
  min-height: min(92svh, 860px);
  display: flex; flex-direction: column; justify-content: flex-end;
  padding-block: var(--bosluk-24) var(--bolum);
}
.hero h1 {
  font-size: var(--olcek-3xl);
  max-width: 16ch;
  margin-bottom: var(--bosluk-6);
}
.hero h1 em { font-style: normal; font-weight: 600; color: var(--pirinc-acik); }
.hero p {
  max-width: 52ch; font-size: var(--olcek-lg);
  color: rgba(255,255,255,.82); margin-bottom: var(--bosluk-8);
}
.hero .etiket { color: var(--pirinc-acik); }
.hero .etiket::before, .hero .etiket::after { background: var(--pirinc-acik); }
.hero__eylem { display: flex; flex-wrap: wrap; gap: var(--bosluk-4); }
@media (max-width: 760px) {
  /* Alt şeritte çerez bildirimi ve kayan düğmeler var; hero'nun kendi
     düğmeleri onların üstünde kalsın diye içerik yukarı çekiliyor. */
  .hero__ic { padding-bottom: 11rem; }
  .hero__eylem { gap: var(--bosluk-3); }
  .hero__eylem .btn { flex: 1 1 100%; }
}
.hero__btn { --btn-bg: var(--kagit); --btn-ink: var(--murekkep); }

/* Hero altındaki istatistik şeridi */
.olcut {
  display: grid; gap: 1px;
  grid-template-columns: repeat(2, 1fr);
  background: var(--cizgi);
  border-block: 1px solid var(--cizgi);
}
@media (min-width: 760px) { .olcut { grid-template-columns: repeat(4, 1fr); } }
.olcut > div { background: var(--kagit); padding: var(--bosluk-8) var(--bosluk-6); text-align: center; }
.olcut dt {
  font-family: var(--font-display);
  font-size: clamp(2rem, 1.4rem + 2vw, 3rem);
  line-height: 1; color: var(--murekkep);
}
.olcut dd {
  margin: var(--bosluk-2) 0 0;
  font-size: var(--olcek-xs); letter-spacing: .16em;
  text-transform: uppercase; color: var(--sessiz);
}

/* --- Bölüm başlığı ------------------------------------------------------- */
.baslik { margin-bottom: var(--bolum); }
.baslik h2 { font-size: var(--olcek-2xl); max-width: 20ch; }
.baslik p { color: var(--sessiz); max-width: 56ch; margin-top: var(--bosluk-4); }
.baslik--satir {
  display: flex; flex-wrap: wrap; align-items: flex-end;
  justify-content: space-between; gap: var(--bosluk-6);
}
.baslik--orta { text-align: center; }
.baslik--orta h2, .baslik--orta p { margin-inline: auto; }

/* --- Ürün kartı ---------------------------------------------------------- */
.izgara {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
  gap: var(--bosluk-8) var(--bosluk-6);
}

.kart { display: flex; flex-direction: column; }
.kart__cerceve {
  position: relative;
  aspect-ratio: 1 / 1;
  background: var(--kagit-2);
  overflow: hidden;
  border-radius: var(--yuvarlak);
}
.kart__cerceve img {
  width: 100%; height: 100%;
  /* `cover` ürünü kırpıyordu; `contain` ile fotoğrafın tamamı görünür. */
  object-fit: contain;
  transition: transform 640ms cubic-bezier(.22,.61,.36,1);
}
.kart:hover .kart__cerceve img { transform: scale(1.03); }
.kart__rozet {
  position: absolute; top: var(--bosluk-3); left: var(--bosluk-3);
  background: rgba(250,248,245,.92);
  color: var(--murekkep-2);
  font-size: var(--olcek-xs); letter-spacing: .1em; text-transform: uppercase;
  padding: .35rem .7rem; border-radius: var(--yuvarlak);
}
.kart__govde { padding-top: var(--bosluk-4); display: flex; flex-direction: column; gap: var(--bosluk-1); }
.kart__ad { font-family: var(--font-display); font-size: 1.25rem; line-height: 1.2; }
.kart__tip { font-size: var(--olcek-sm); color: var(--sessiz); }
.kart__alt {
  margin-top: var(--bosluk-3); padding-top: var(--bosluk-3);
  border-top: 1px solid var(--cizgi);
  display: flex; align-items: center; justify-content: space-between;
  font-size: var(--olcek-xs); letter-spacing: .1em; text-transform: uppercase;
  color: var(--sessiz);
}
.kart__alt .ok { color: var(--pirinc); transition: transform var(--gecis-hizli); }
.kart:hover .kart__alt .ok { transform: translateX(4px); }

/* Renk noktaları */
.renkler { display: flex; gap: 5px; }
.renk {
  width: 12px; height: 12px; border-radius: 50%;
  border: 1px solid rgba(23,22,20,.18);
}
.renk[data-r="beyaz"]        { background: #f4f2ee; }
.renk[data-r="antrasit"]     { background: #3a3d40; }
.renk[data-r="bordo"]        { background: #6e1423; }
.renk[data-r="vizon"]        { background: #b8a394; }
.renk[data-r="krem"]         { background: #e6dccb; }
.renk[data-r="yeşil"]        { background: #7f9773; }
.renk[data-r="meşe"]         { background: #b58a55; }
.renk[data-r="safir meşe"]   { background: #8a6a45; }
.renk[data-r="atlantik çam"] { background: #c0a074; }
.renk[data-r="barok"]        { background: #6b4a33; }
.renk[data-r="krom"]         { background: linear-gradient(135deg,#e8e8ea,#9a9da1); }
.renk[data-r="siyah mat"]    { background: #26262a; }

/* --- Kategori filtresi --------------------------------------------------- */
.filtre {
  display: flex; flex-wrap: wrap; gap: var(--bosluk-2);
  margin-bottom: var(--bolum);
  padding-bottom: var(--bosluk-6);
  border-bottom: 1px solid var(--cizgi);
}
@media (max-width: 760px) {
  .filtre {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    margin-inline: -1.25rem;
    padding-inline: 1.25rem;
  }
  .filtre::-webkit-scrollbar { display: none; }
  .filtre button { flex: 0 0 auto; scroll-snap-align: start; padding-block: .7rem; }
}
.filtre button {
  background: none; border: 1px solid var(--cizgi);
  border-radius: 999px; padding: .5rem 1.1rem;
  font-size: var(--olcek-sm); color: var(--sessiz); cursor: pointer;
  transition: all var(--gecis-hizli);
}
.filtre button:hover { border-color: var(--murekkep-2); color: var(--murekkep); }
.filtre button[aria-pressed="true"] {
  background: var(--murekkep); border-color: var(--murekkep); color: var(--kagit);
}
.kart[hidden] { display: none; }

/* --- Öne çıkan / yan yana bölüm ------------------------------------------ */
.ikili {
  display: grid; gap: var(--bolum);
  align-items: center;
}
@media (min-width: 900px) {
  .ikili { grid-template-columns: 1fr 1fr; gap: var(--bosluk-16); }
  .ikili--ters > *:first-child { order: 2; }
}
.ikili__gorsel { position: relative; }
.ikili__gorsel img { width: 100%; border-radius: var(--yuvarlak); }
.ikili__gorsel::after {
  content: ""; position: absolute; inset: auto -1.25rem -1.25rem auto;
  width: 45%; height: 45%; border: 1px solid var(--pirinc);
  border-radius: var(--yuvarlak); z-index: -1;
}
.ikili h2 { font-size: var(--olcek-2xl); margin-bottom: var(--bosluk-4); }
.ikili p { color: var(--murekkep-2); margin-bottom: var(--bosluk-4); }

/* --- Özellik listesi ----------------------------------------------------- */
.ozellikler { list-style: none; padding: 0; display: grid; gap: var(--bosluk-3); }
.ozellikler li {
  display: flex; gap: var(--bosluk-3); align-items: flex-start;
  color: var(--murekkep-2);
}
.ozellikler li::before {
  content: ""; flex: 0 0 auto;
  width: 6px; height: 6px; margin-top: .65em;
  border: 1px solid var(--pirinc); transform: rotate(45deg);
}

/* Koleksiyon listesindeki model bağlantıları mobilde 26px'ti; parmak hedefi. */
@media (max-width: 760px) {
  .ozellikler li a { display: block; padding-block: .55rem; }
  .ozellikler li:has(a)::before { margin-top: 1.15em; }
}

/* --- Değer kartları ------------------------------------------------------ */
.degerler {
  display: grid; gap: 1px; background: var(--cizgi);
  border: 1px solid var(--cizgi); border-radius: var(--yuvarlak); overflow: hidden;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}
.deger { background: var(--kagit); padding: var(--bosluk-8); }
.deger__no {
  font-family: var(--font-display); font-size: 1.85rem;
  color: var(--pirinc); line-height: 1; margin-bottom: var(--bosluk-4);
}
.deger h3 { font-size: 1.35rem; margin-bottom: var(--bosluk-2); }
.deger p { font-size: var(--olcek-sm); color: var(--sessiz); }

/* --- Ürün detay ---------------------------------------------------------- */
.kirinti {
  font-size: var(--olcek-xs); letter-spacing: .12em; text-transform: uppercase;
  color: var(--sessiz); padding-block: var(--bosluk-6);
  display: flex; flex-wrap: wrap; gap: var(--bosluk-2); align-items: center;
}
.kirinti a { display: inline-block; padding-block: .45rem; }
.kirinti a:hover { color: var(--murekkep); }
.kirinti span { color: var(--cizgi); }

.detay { display: grid; gap: var(--bosluk-12); align-items: start; }
@media (min-width: 900px) {
  .detay { grid-template-columns: 1.15fr 1fr; gap: var(--bosluk-16); }
  .detay__yan { position: sticky; top: 7.5rem; }
}
.galeri__ana {
  background: var(--kagit-2); border-radius: var(--yuvarlak);
  overflow: hidden; aspect-ratio: 1 / 1;
  display: grid; place-items: center;
}
.galeri__ana img { width: 100%; height: 100%; object-fit: contain; }
.galeri__kucuk {
  display: flex; gap: var(--bosluk-3); margin-top: var(--bosluk-3);
  flex-wrap: wrap;
}
.galeri__kucuk button {
  width: 84px; aspect-ratio: 1; padding: 0; cursor: pointer;
  background: var(--kagit-2); border: 1px solid var(--cizgi);
  border-radius: var(--yuvarlak); overflow: hidden;
  transition: border-color var(--gecis-hizli);
}
.galeri__kucuk button[aria-current="true"] { border-color: var(--pirinc); }
.galeri__kucuk img { width: 100%; height: 100%; object-fit: contain; }

.detay h1 { font-size: var(--olcek-2xl); margin-bottom: var(--bosluk-2); }
.detay__tip { color: var(--pirinc); font-size: var(--olcek-sm); letter-spacing: .1em; text-transform: uppercase; }
.detay__kod { font-size: var(--olcek-xs); color: var(--sessiz); letter-spacing: .08em; }

.kunye { border-top: 1px solid var(--cizgi); margin-top: var(--bosluk-8); }
.kunye > div {
  display: grid; grid-template-columns: 8.5rem 1fr; gap: var(--bosluk-4);
  padding-block: var(--bosluk-4); border-bottom: 1px solid var(--cizgi);
  font-size: var(--olcek-sm);
}
.kunye dt { color: var(--sessiz); letter-spacing: .06em; text-transform: uppercase; font-size: var(--olcek-xs); padding-top: 2px; }
.kunye dd { margin: 0; }
.rozetler { display: flex; flex-wrap: wrap; gap: var(--bosluk-2); }
.rozet {
  border: 1px solid var(--cizgi); border-radius: var(--yuvarlak);
  padding: .25rem .6rem; font-size: var(--olcek-xs); color: var(--murekkep-2);
}

/* --- Form ---------------------------------------------------------------- */
.form { display: grid; gap: var(--bosluk-5, 1.25rem); }
.alan { display: grid; gap: var(--bosluk-2); }
.alan label {
  font-size: var(--olcek-xs); letter-spacing: .12em;
  text-transform: uppercase; color: var(--sessiz);
}
.alan input, .alan textarea, .alan select {
  background: var(--panel);
  border: 1px solid var(--cizgi);
  border-radius: var(--yuvarlak);
  padding: .85rem 1rem;
  font-size: var(--olcek-md);
  transition: border-color var(--gecis-hizli), box-shadow var(--gecis-hizli);
  width: 100%;
}
.alan textarea { min-height: 8rem; resize: vertical; }
.alan input:focus, .alan textarea:focus, .alan select:focus {
  outline: none; border-color: var(--pirinc);
  box-shadow: 0 0 0 3px rgba(154,123,79,.14);
}
.alan input[aria-invalid="true"], .alan textarea[aria-invalid="true"] { border-color: var(--bordo); }
.alan .hata { color: var(--bordo); font-size: var(--olcek-xs); }
.alan-ikili { display: grid; gap: inherit; }
@media (min-width: 640px) { .alan-ikili { grid-template-columns: 1fr 1fr; } }

.tuzak { position: absolute !important; left: -9999px; opacity: 0; height: 0; }

.onay { display: flex; gap: var(--bosluk-3); align-items: flex-start; font-size: var(--olcek-sm); color: var(--sessiz); }
.onay input { width: 1.1rem; height: 1.1rem; margin-top: .3rem; flex: 0 0 auto; accent-color: var(--pirinc); }
.onay a { text-decoration: underline; text-underline-offset: 2px; }

.form-durum {
  padding: var(--bosluk-4) var(--bosluk-6); border-radius: var(--yuvarlak);
  font-size: var(--olcek-sm); border: 1px solid;
}
.form-durum[data-tip="ok"]   { background: #f0f5ef; border-color: #b9d0b4; color: #2f5a2a; }
.form-durum[data-tip="hata"] { background: #fbf0f1; border-color: #e0b6bb; color: var(--bordo); }
.form-durum[hidden] { display: none; }

/* --- İletişim / harita --------------------------------------------------- */
.iletisim-izgara { display: grid; gap: var(--bolum); }
@media (min-width: 900px) { .iletisim-izgara { grid-template-columns: 1fr 1fr; gap: var(--bosluk-16); } }

.bilgi { list-style: none; padding: 0; display: grid; gap: var(--bosluk-6); }
.bilgi li { display: flex; gap: var(--bosluk-4); }
.bilgi svg { flex: 0 0 auto; color: var(--pirinc); margin-top: 3px; }
.bilgi dt, .bilgi strong {
  display: block; font-size: var(--olcek-xs); letter-spacing: .12em;
  text-transform: uppercase; color: var(--sessiz); font-weight: 500;
  margin-bottom: 2px;
}
.bilgi a:hover { color: var(--pirinc); }
@media (max-width: 760px) { .bilgi a { display: inline-block; padding-block: .5rem; } }

.harita {
  position: relative; border: 1px solid var(--cizgi);
  border-radius: var(--yuvarlak); overflow: hidden; background: var(--kagit-2);
}
.harita iframe { width: 100%; height: 100%; min-height: 420px; border: 0; display: block; filter: grayscale(.35) contrast(1.04); }
.harita__ort {
  position: absolute; inset: 0; display: grid; place-items: center;
  background: var(--kagit-2); text-align: center; padding: var(--bosluk-8); gap: var(--bosluk-4);
}
.harita__ort[hidden] { display: none; }

.yol-tarifi {
  display: flex; flex-wrap: wrap; gap: var(--bosluk-3);
  margin-top: var(--bosluk-4);
}
.yol-tarifi input { flex: 1 1 16rem; }
.yol-tarifi .btn { flex: 0 0 auto; }

/* --- Çağrı şeridi -------------------------------------------------------- */
.cagri {
  background: var(--murekkep); color: #fff;
  position: relative; overflow: hidden;
}
.cagri::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(60% 120% at 80% 0%, rgba(201,168,111,.22), transparent 60%);
}
.cagri__ic { position: relative; text-align: center; }
/* Başlık iki satıra elle bölünüyor (<br>); genişlik sınırı koymuyoruz ki
   satırlar üçe bölünmesin. Dar ekranda tarayıcı yine de sarar. */
.cagri h2 { font-size: var(--olcek-2xl); margin-bottom: var(--bosluk-5, 1.25rem); }
.cagri p { color: rgba(255,255,255,.75); max-width: 50ch; margin: 0 auto var(--bosluk-8); }
.cagri__eylem { display: flex; flex-wrap: wrap; gap: var(--bosluk-4); justify-content: center; }

/* --- Form doğrulama kodu alanı ------------------------------------------- */
/* Günün ikinci gönderiminde beliren alan; dikkat çeksin diye vurgulanır. */
.dogrulama-alan[hidden] { display: none; }
.dogrulama-alan {
  border: 1px solid var(--pirinc);
  border-radius: var(--yuvarlak);
  padding: var(--bosluk-4);
  background: color-mix(in srgb, var(--pirinc) 7%, transparent);
}
.dogrulama-kod {
  font-size: 1.5rem;
  letter-spacing: .45em;
  text-align: center;
  font-variant-numeric: tabular-nums;
  padding-inline-start: .45em;
  max-width: 12ch;
}

/* --- Katalog daveti (pop-up) ---------------------------------------------- */
.katalog-pop[hidden] { display: none; }
.katalog-pop {
  position: fixed; inset: 0; z-index: 90;
  /* Flex: kutunun `max-height: 100%` değeri kapsayıcının *dolgudan arta
     kalan* yüksekliğine göre çözülsün. Grid'de satır içeriğe göre büyüdüğü
     için kutu, çerez bildirimine ayrılan alt boşluğu görmezden gelirdi. */
  display: flex; align-items: center; justify-content: center;
  padding: var(--bosluk-6);
}
.katalog-pop__perde {
  position: absolute; inset: 0;
  background: rgba(23, 22, 20, .62);
  backdrop-filter: blur(3px);
  opacity: 0; transition: opacity var(--gecis);
}
.katalog-pop.gorunur .katalog-pop__perde { opacity: 1; }

.katalog-pop__kutu {
  position: relative;
  width: min(100%, 46rem);
  max-height: 100%;
  overflow: auto;
  display: grid;
  background: var(--panel);
  border-radius: var(--yuvarlak-lg);
  box-shadow: 0 30px 80px rgba(23, 22, 20, .35);
  opacity: 0; transform: translateY(1.25rem) scale(.98);
  transition: opacity var(--gecis), transform var(--gecis);
}
.katalog-pop.gorunur .katalog-pop__kutu { opacity: 1; transform: none; }
@media (min-width: 620px) {
  .katalog-pop__kutu { grid-template-columns: 15rem 1fr; }
}

.katalog-pop__gorsel {
  display: block; overflow: hidden;
  background: var(--kagit-2);
  border-radius: var(--yuvarlak-lg) var(--yuvarlak-lg) 0 0;
}
.katalog-pop__gorsel img {
  display: block; width: 100%; height: 100%;
  object-fit: cover; object-position: top center;
  max-height: 13rem;
  transition: transform var(--gecis);
}
.katalog-pop__gorsel:hover img { transform: scale(1.03); }
@media (min-width: 620px) {
  .katalog-pop__gorsel { border-radius: var(--yuvarlak-lg) 0 0 var(--yuvarlak-lg); }
  .katalog-pop__gorsel img { max-height: none; }
}

.katalog-pop__ic { padding: var(--bosluk-8); display: grid; align-content: center; gap: var(--bosluk-3); }
.katalog-pop__ic h2 { font-size: var(--olcek-2xl); max-width: 16ch; }
.katalog-pop__ic p:last-of-type { color: var(--sessiz); font-size: var(--olcek-sm); }
.katalog-pop__eylem {
  display: flex; flex-wrap: wrap; gap: var(--bosluk-3);
  margin-top: var(--bosluk-3);
}
.katalog-pop__eylem .btn { flex: 1 1 auto; text-align: center; justify-content: center; }

.katalog-pop__kapat {
  position: absolute; top: .55rem; right: .55rem; z-index: 2;
  display: grid; place-items: center;
  width: 2.5rem; height: 2.5rem;
  border: none; border-radius: 999px;
  background: var(--panel); color: var(--murekkep);
  box-shadow: var(--golge-sm, 0 2px 8px rgba(0,0,0,.15));
  cursor: pointer;
  transition: background var(--gecis-hizli), transform var(--gecis-hizli);
}
.katalog-pop__kapat:hover { background: var(--kagit-2); transform: rotate(90deg); }

/* Pop-up açıkken sayfanın kaymasını ve alttaki düğmelerin görünmesini engelle */
body.pop-acik { overflow: hidden; }
body.pop-acik .hizli { opacity: 0; visibility: hidden; }

/* Telefonda kapak görseli gösterilmez: kutu iki sütuna geçmediği için
   görsel yatay bir şeride kırpılıyor ve kataloğu temsil etmiyordu.
   Masaüstünde solda tam boy durmaya devam ediyor. */
@media (max-width: 619px) {
  .katalog-pop__gorsel { display: none; }
  .katalog-pop__kutu { border-radius: var(--yuvarlak-lg); }
  .katalog-pop__ic { padding: var(--bosluk-8) var(--bosluk-6) var(--bosluk-6); }
  /* Çerez bildirimi altta yer kaplarken metni sıkılaştır. */
  body.cerez-acik .katalog-pop__ic p:last-of-type { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .katalog-pop__perde, .katalog-pop__kutu, .katalog-pop__gorsel img,
  .katalog-pop__kapat { transition: none; }
}

/* --- Alt bilgi ----------------------------------------------------------- */
.alt { background: var(--kagit-2); border-top: 1px solid var(--cizgi); }
.alt__ust {
  display: grid; gap: var(--bosluk-12);
  padding-block: var(--bolum) var(--bosluk-12);
}
@media (min-width: 760px) { .alt__ust { grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: var(--bosluk-8); } }
.alt h3 {
  font-family: var(--font-govde); font-size: var(--olcek-xs);
  letter-spacing: .14em; text-transform: uppercase; color: var(--sessiz);
  margin-bottom: var(--bosluk-4); font-weight: 500;
}
.alt ul { list-style: none; padding: 0; display: grid; gap: var(--bosluk-3); }
.alt li a { font-size: var(--olcek-sm); color: var(--murekkep-2); }
.alt li a:hover { color: var(--pirinc); }
.alt__marka p { font-size: var(--olcek-sm); color: var(--sessiz); max-width: 34ch; margin-top: var(--bosluk-4); }

.sosyal { display: flex; gap: var(--bosluk-3); margin-top: var(--bosluk-6); }
.sosyal a {
  display: grid; place-items: center; width: 2.5rem; height: 2.5rem;
  border: 1px solid var(--cizgi); border-radius: 50%; color: var(--murekkep-2);
  transition: all var(--gecis-hizli);
}
.sosyal a:hover { background: var(--murekkep); color: var(--kagit); border-color: var(--murekkep); }

.alt__yasal {
  border-top: 1px solid var(--cizgi);
  padding-block: var(--bosluk-6);
  display: flex; flex-wrap: wrap; gap: var(--bosluk-3) var(--bosluk-6);
  align-items: center; justify-content: space-between;
  font-size: var(--olcek-xs); color: var(--sessiz);
}
.alt__yasal nav { display: flex; flex-wrap: wrap; gap: var(--bosluk-2) var(--bosluk-5, 1.25rem); }
.alt__yasal a:hover { color: var(--murekkep); }
.alt__yasal p { line-height: 1.5; }

@media (max-width: 760px) {
  .alt ul { gap: 0; }
  .alt li a { display: block; padding-block: .65rem; }
  .alt__yasal nav { gap: 0 var(--bosluk-5, 1.25rem); }
  .alt__yasal nav a { display: inline-block; padding-block: .78rem; }
}

/* --- Yasal metin sayfaları ----------------------------------------------- */
.metin { max-width: 68ch; }
.metin h2 { font-size: 1.75rem; margin-top: var(--bosluk-12); margin-bottom: var(--bosluk-4); }
.metin h3 { font-size: 1.25rem; margin-top: var(--bosluk-8); margin-bottom: var(--bosluk-3); }
.metin p, .metin li { color: var(--murekkep-2); }
.metin p + p { margin-top: var(--bosluk-4); }
.metin ul, .metin ol { margin-top: var(--bosluk-4); padding-left: 1.25rem; display: grid; gap: var(--bosluk-2); }
.metin a { color: var(--pirinc); text-decoration: underline; text-underline-offset: 2px; }
.metin .tarih { font-size: var(--olcek-sm); color: var(--sessiz); }

/* --- Sayfa başlığı bandı ------------------------------------------------- */
.sayfa-bas {
  border-bottom: 1px solid var(--cizgi);
  padding-block: var(--bosluk-12) var(--bolum);
}
.sayfa-bas h1 { font-size: var(--olcek-3xl); max-width: 18ch; }
.sayfa-bas p { color: var(--sessiz); max-width: 58ch; margin-top: var(--bosluk-6); font-size: var(--olcek-lg); }

/* --- Çerez bildirimi ----------------------------------------------------- */
.cerez {
  position: fixed; left: 1rem; right: 1rem; bottom: 1rem; z-index: 150;
  background: var(--panel); border: 1px solid var(--cizgi);
  border-radius: var(--yuvarlak-lg); box-shadow: var(--golge-lg);
  padding: var(--bosluk-6);
  display: flex; flex-wrap: wrap; gap: var(--bosluk-4);
  align-items: center; justify-content: space-between;
  max-width: 46rem; margin-inline: auto;
  transform: translateY(140%);
  transition: transform 420ms cubic-bezier(.22,.61,.36,1);
}
.cerez.gorunur { transform: none; }
.cerez p { font-size: var(--olcek-sm); color: var(--murekkep-2); flex: 1 1 20rem; }
.cerez a { color: var(--pirinc); text-decoration: underline; }
.cerez__eylem { display: flex; gap: var(--bosluk-3); }
.cerez .btn { padding: .6rem 1.2rem; }

@media (max-width: 620px) {
  /* Bildirim ekranın alt şeridinde kalsın; hero düğmelerini kapatmasın. */
  .cerez { padding: var(--bosluk-4); gap: var(--bosluk-3); left: .75rem; right: .75rem; }
  .cerez p { font-size: var(--olcek-xs); line-height: 1.45; flex: 1 1 100%; }
  .cerez__eylem { flex: 1 1 100%; }
  .cerez__eylem .btn { flex: 1; padding: .78rem .8rem; font-size: var(--olcek-xs); }
}

/* --- Katalog ------------------------------------------------------------- */
.katalog-izgara {
  display: grid; gap: var(--bosluk-6);
  grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
}
@media (max-width: 620px) {
  /* Tek sütunda 40 sayfa bitmek bilmiyordu; iki sütun. */
  .katalog-izgara { grid-template-columns: 1fr 1fr; gap: var(--bosluk-3); }
}
.katalog-izgara button {
  padding: 0; border: 1px solid var(--cizgi); background: var(--panel);
  border-radius: var(--yuvarlak); overflow: hidden; cursor: pointer;
  transition: transform var(--gecis-hizli), box-shadow var(--gecis-hizli);
}
.katalog-izgara button:hover { transform: translateY(-4px); box-shadow: var(--golge-md); }
.katalog-izgara img { width: 100%; }

.buyutec {
  position: fixed; inset: 0; z-index: 180;
  background: rgba(20,18,16,.94);
  display: none;
}
.buyutec.acik { display: block; }

/* Sayfanın durduğu alan. Kapat düğmesi ve gezinme çubuğu için üstte/altta
   yer bırakılır; sayfa bu alanın içine tamamen sığar. */
.buyutec__tuval {
  position: absolute;
  inset: 4.5rem var(--bosluk-4) 6rem;
  /* Flex kullanılıyor: grid'de satır yüksekliği içeriğe göre büyüdüğü için
     görselin `max-height: 100%` değeri kendi boyuna göre çözülüyor ve sınır
     işlevini yitiriyordu. Flex kapsayıcıda yüzde, kapsayıcının kesin
     yüksekliğine göre çözülür. */
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  touch-action: none;          /* yakınlaştırma ve kaydırmayı biz yönetiyoruz */
}
.buyutec__tuval img {
  max-width: 100%; max-height: 100%;
  width: auto; height: auto;
  object-fit: contain;
  border-radius: var(--yuvarlak);
  transform-origin: center center;
  cursor: zoom-in;
  user-select: none; -webkit-user-drag: none;
}
/* Yakınlaştırılmışken imleç kavrama biçimini alır. */
.buyutec.yakin .buyutec__tuval img { cursor: grab; }
.buyutec.suruklu .buyutec__tuval img { cursor: grabbing; }
/* Sürükleme sırasında geçiş olmaz; düğmeyle yakınlaşmada yumuşak olur. */
.buyutec:not(.suruklu) .buyutec__tuval img { transition: transform 180ms ease-out; }
@media (prefers-reduced-motion: reduce) {
  .buyutec .buyutec__tuval img { transition: none; }
}
.buyutec__kapat {
  position: fixed; top: 1rem; right: 1rem;
  width: 2.75rem; height: 2.75rem; border-radius: 50%;
  background: rgba(20,18,16,.72); border: 1px solid rgba(255,255,255,.35);
  color: #fff; cursor: pointer; display: grid; place-items: center;
  backdrop-filter: blur(6px);
}
.buyutec__gez {
  position: fixed; bottom: 1.5rem; left: 50%; transform: translateX(-50%);
  display: flex; gap: var(--bosluk-3); align-items: center;
  background: rgba(20,18,16,.78); border: 1px solid rgba(255,255,255,.28);
  border-radius: 999px; padding: .4rem .5rem; color: #fff;
  backdrop-filter: blur(6px);
}
.buyutec__gez button {
  width: 2.75rem; height: 2.75rem; border-radius: 50%; border: 0;
  background: transparent; color: #fff; cursor: pointer;
}
.buyutec__gez button:disabled { opacity: .3; cursor: default; }
.buyutec__gez span {
  font-size: var(--olcek-sm); font-variant-numeric: tabular-nums;
  padding-inline: var(--bosluk-2); white-space: nowrap;
}
.buyutec__ayrac {
  width: 1px; height: 1.5rem; padding: 0 !important;
  background: rgba(255,255,255,.28);
}
.buyutec__oran {
  width: auto !important; padding-inline: .6rem;
  font-size: var(--olcek-xs); font-variant-numeric: tabular-nums;
  border-radius: 999px !important;
}
.buyutec__oran:hover { background: rgba(255,255,255,.14) !important; }

@media (max-width: 560px) {
  /* Dar ekranda altı düğme sığmaz; ölçek yazısı gizlenir, düğmeler daralır. */
  .buyutec__gez { gap: var(--bosluk-1, .25rem); }
  .buyutec__gez button { width: 2.5rem; height: 2.5rem; }
  .buyutec__oran { display: none; }
  .buyutec__tuval { inset: 4rem .5rem 5.5rem; }
}

/* --- Giriş animasyonu ---------------------------------------------------- */
.beliren { opacity: 0; transform: translateY(18px); }
.beliren.gorundu {
  opacity: 1; transform: none;
  transition: opacity 720ms cubic-bezier(.22,.61,.36,1),
              transform 720ms cubic-bezier(.22,.61,.36,1);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
  .beliren { opacity: 1; transform: none; }
}

/* --- Baskı --------------------------------------------------------------- */
@media print {
  .ust, .alt, .cerez, .cagri, .menu-dugme { display: none !important; }
  body { background: #fff; }
}

/* --- Fiyat --------------------------------------------------------------- */
.kart__fiyat {
  font-family: var(--font-display);
  font-size: 1.15rem;
  color: var(--murekkep);
  margin-top: var(--bosluk-1);
}
.kart__fiyat:empty { display: none; }
.kart__fiyat small {
  display: block;
  font-family: var(--font-govde);
  font-size: var(--olcek-xs);
  color: var(--sessiz);
  letter-spacing: .02em;
}

.detay__fiyat {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem);
  line-height: 1.1;
  color: var(--murekkep);
  margin-top: var(--bosluk-6);
  padding-top: var(--bosluk-6);
  border-top: 1px solid var(--cizgi);
}
.detay__fiyat:empty { display: none; }
.detay__fiyat small {
  display: block;
  font-family: var(--font-govde);
  font-size: var(--olcek-sm);
  color: var(--sessiz);
  margin-top: var(--bosluk-2);
}

/* --- Sıkça sorulan sorular ------------------------------------------------ */
.sss { border-top: 1px solid var(--cizgi); }

.sss__oge { border-bottom: 1px solid var(--cizgi); }

.sss__oge summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--bosluk-6);
  padding-block: var(--bosluk-6);
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-size: 1.35rem;
  line-height: 1.25;
  transition: color var(--gecis-hizli);
}
.sss__oge summary::-webkit-details-marker { display: none; }
.sss__oge summary:hover { color: var(--pirinc); }

.sss__ikon {
  flex: 0 0 auto;
  margin-top: .35em;
  color: var(--pirinc);
  transition: transform var(--gecis);
}
.sss__oge[open] .sss__ikon { transform: rotate(135deg); }

.sss__cevap {
  padding-bottom: var(--bosluk-6);
  max-width: 62ch;
}
.sss__cevap p { color: var(--murekkep-2); }

@media (prefers-reduced-motion: no-preference) {
  .sss__oge[open] .sss__cevap { animation: sss-ac 320ms cubic-bezier(.22,.61,.36,1); }
}
@keyframes sss-ac {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}

/* --- Kayan hızlı iletişim ------------------------------------------------- */
.hizli {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 90;
  display: flex;
  flex-direction: column;
  gap: var(--bosluk-3);
  align-items: flex-end;
  /* Kapsayıcı dokunmayı yutmasın — yalnızca düğmelerin kendisi tıklanabilir. */
  pointer-events: none;
}
.hizli > * { pointer-events: auto; }

/* Bir form alanı yazmak için seçildiğinde düğmeler çekilir. */
body.form-yaziliyor .hizli {
  opacity: 0;
  visibility: hidden;
  transform: translateY(1rem);
}
.hizli { transition: opacity var(--gecis), transform var(--gecis), visibility var(--gecis); }

.hizli__btn {
  display: inline-flex;
  align-items: center;
  gap: var(--bosluk-3);
  padding: .8rem 1.1rem;
  border-radius: 999px;
  color: #fff;
  box-shadow: var(--golge-md);
  font-size: var(--olcek-sm);
  font-weight: 500;
  letter-spacing: .02em;
  white-space: nowrap;
  transition: transform var(--gecis-hizli), box-shadow var(--gecis-hizli);
}
.hizli__btn:hover { transform: translateY(-2px); box-shadow: var(--golge-lg); }
.hizli__btn--wa  { background: #1fa855; }
.hizli__btn--tel { background: var(--murekkep); }
/* Katalog düğmesi marka pirinci — diğer ikisinden ayrılsın. */
.hizli__btn--katalog { background: var(--pirinc); }
/* Katalog sayfasındayken kendi kendine bağlantı vermesin. */
body.katalog-sayfasi .hizli__btn--katalog { display: none; }

/* Çerez bildirimi açıkken üst üste binmesin */
.cerez.gorunur ~ .hizli { transform: translateY(-6rem); }

/* Dar ekranda yer yok: bildirim kapatılana kadar düğmeler beklesin. */
@media (max-width: 620px) {
  .cerez.gorunur ~ .hizli,
  body.hero-gorunur .hizli {
    opacity: 0; visibility: hidden; transform: translateY(1rem);
  }
}

/* Dar ekranda yalnız simge — parmak boyutunu koru, yer kaplama */
@media (max-width: 620px) {
  .hizli { bottom: .85rem; right: .85rem; gap: var(--bosluk-2); }
  .hizli__yazi { display: none; }
  .hizli__btn { width: 3rem; height: 3rem; padding: 0; justify-content: center; }
  /* Düğmeler sayfanın son satırlarını örtmesin. */
  main { padding-bottom: 4.5rem; }
}

/* Yazdırmada gizle */
@media print { .hizli { display: none !important; } }

/* Dört kartlı bölümler 2+2 dizilir — altta tek kart kalmaz. */
.degerler--dortlu { grid-template-columns: 1fr; }
@media (min-width: 640px) {
  .degerler--dortlu { grid-template-columns: repeat(2, 1fr); }
}

/* Altı kartlı bölüm: 2+2+2, geniş ekranda 3+3. */
.degerler--uclu { grid-template-columns: 1fr; }
@media (min-width: 640px)  { .degerler--uclu { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .degerler--uclu { grid-template-columns: repeat(3, 1fr); } }