/* Mel's Atelier — katalog omurgasi
   Yapi: sabit ust bant + sol parca seridi + sag tek parca alani. */

@import url("tokens.css?s=9");

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

body {
  margin: 0;
  background: var(--zemin);
  color: var(--murekkep);
  font-family: var(--serif);
  font-optical-sizing: auto;
  font-variation-settings: "SOFT" 0, "WONK" 0;
  font-size: var(--olcek-4);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }

::selection { background: var(--patina); color: var(--zemin); }

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

/* ------------------------------------------------------------ tipografi ---- */
h1, h2, h3 { font-weight: 400; margin: 0; letter-spacing: -0.015em; }

.mono, .veri, .etiket, .parca-no, .fiyat, input, select, textarea, button {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}

.etiket {
  font-size: var(--olcek-6);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sonuk);
}

.parca-no {
  font-size: var(--olcek-5);
  letter-spacing: 0.12em;
  color: var(--patina);
}

.fiyat { font-size: var(--olcek-4); letter-spacing: 0.02em; }

.kural { border: 0; border-top: 1px solid var(--cizgi); margin: 0; }

/* ------------------------------------------------------------- ust bant ---- */
.ust {
  position: fixed;
  top: 0; left: 0; right: 0;      /* eski Safari 'inset' kisayolunu bilmez */
  height: var(--ust);
  z-index: 60;
  display: flex;
  align-items: center;
  gap: var(--bosluk);
  padding: 0 var(--kenar);
  background: var(--zemin);
  border-bottom: 1px solid var(--cizgi);
}

/* Marka isareti: el yazisi, arayuzdeki her seyden buyuk. */
.marka {
  font-family: var(--imza);
  font-size: clamp(2.9rem, 4.6vw, 4rem);
  line-height: 1;
  letter-spacing: 0.01em;
  color: var(--murekkep);
  margin-right: auto;
  padding-bottom: 0.18em;      /* alt uzantilar bandın icinde kalsin */
  transition: color var(--gecis);
}
.marka:hover { color: var(--patina); }
.marka em { font-style: normal; }

.gezinti { display: flex; align-items: center; gap: 1.4rem; }
.gezinti a {
  font-family: var(--mono);
  font-size: var(--olcek-6);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--murekkep-2);
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
  transition: color var(--gecis), border-color var(--gecis);
}
.gezinti a:hover, .gezinti a[aria-current="page"] {
  color: var(--patina);
  border-bottom-color: var(--patina);
}

/* Tema degistirici: gezintinin sonunda, tek dugme. */
.tema-dugme {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--cizgi);
  border-radius: var(--kose);
  color: var(--murekkep-2);
  cursor: pointer;
  flex: none;
  transition: color var(--gecis), border-color var(--gecis), background var(--gecis);
}
.tema-dugme svg { display: block; }
.tema-dugme:hover {
  color: var(--patina);
  border-color: var(--patina);
  background: var(--patina-sis);
}
.tema-dugme:active { transform: translateY(1px); }

/* ---------------------------------------------------------- acilir menu --- */
/* Telefonda gezinti ust bandin sag ucundeki dugmeden acilir. Genis ekranda
   ne dugme ne cekmece gorunur; ust bant oldugu gibi gecerlidir.             */
.menu-dugme, .acilir-menu, .menu-perde,
.ust-simgeler, .arama-katman { display: none; }

/* Koleksiyon sayfasinda hangi terimin suzuldugunu gosteren satir. */
.arama-satir {
  margin: 1.1rem 0 0;
  font-family: var(--mono);
  font-size: var(--olcek-5);
  color: var(--sonuk);
}
.arama-satir strong { color: var(--murekkep); font-weight: 500; }
.arama-satir a {
  margin-left: 0.75rem;
  color: var(--patina);
  border-bottom: 1px solid var(--patina);
}

.sepet-sayac {
  display: inline-block;
  min-width: 1.4em;
  padding: 1px 5px;
  margin-left: 6px;
  background: var(--patina);
  color: var(--zemin);
  font-size: 0.625rem;
  text-align: center;
  border-radius: var(--kose);
}
.sepet-sayac[data-bos="1"] { display: none; }

/* ----------------------------------------------------- sol parca seridi ---- */
.serit {
  position: fixed;
  top: var(--ust);
  bottom: 0;
  left: 0;
  width: var(--serit);
  z-index: 50;
  border-right: 1px solid var(--cizgi);
  background: var(--zemin);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 1.25rem 0 1.25rem;
  overflow: hidden;
}

.serit-baslik {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  margin: 0 auto;
  font-family: var(--mono);
  font-size: var(--olcek-6);
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--sonuk);
}

.serit-liste {
  list-style: none;
  /* Baslik ile ilk numara arasi acilir; ilerleme cizgisi flex:1 oldugu icin
     bosluk burada acikca verilmezse liste basliga yapisir. */
  margin: 2.5rem 0 1.5rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.35rem;
  overflow: hidden;
}
.serit-liste a {
  display: block;
  font-family: var(--mono);
  font-size: 0.625rem;
  letter-spacing: 0.06em;
  color: var(--sonuk);
  padding: 2px 4px;
  transition: color var(--gecis);
}
.serit-liste a:hover { color: var(--murekkep); }
.serit-liste li[data-etkin="1"] a {
  color: var(--patina);
  border-left: 2px solid var(--patina);
  padding-left: 6px;
}

.serit-ilerleme {
  margin: 0 auto;
  width: 1px;
  flex: 1;
  background: var(--cizgi-ince);
  position: relative;
}
.serit-ilerleme span {
  position: absolute;
  left: -1px; top: 0;
  width: 3px;
  background: var(--patina);
  height: 0;
  transition: height 120ms linear;
}

@media (max-width: 900px) { .serit { display: none; } }

/* ---------------------------------------------------------------- govde ---- */
.govde {
  margin-left: var(--serit);
  padding-top: var(--ust);
  min-height: 100vh;
}

.kap {
  max-width: var(--azami);
  margin: 0 auto;
  padding: 0 var(--kenar);
}

/* ------------------------------------------------------------- sayfa ust --- */
.sayfa-ust {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--bosluk);
  padding: 3.5rem 0 1rem;
  border-bottom: 1px solid var(--cizgi);
  flex-wrap: wrap;
}
.sayfa-ust h1 { font-size: var(--olcek-2); }

/* ============================================================ GIRIS BOLUMU = */
/* Site girisi: solda acilis yazisi, sagda fotograf. */
/* Yazi solda, fotograf sagda. Dar ekranda once yazi, sonra fotograf gelir;
   metin hicbir zaman fotografin altina sikismis gorunmez. */
.giris {
  display: grid;
  grid-template-columns: minmax(0, 46%) minmax(0, 1fr);
  min-height: calc(100vh - var(--ust));
  border-bottom: 1px solid var(--cizgi);
}

.giris-gorsel {
  margin: 0;
  position: relative;
  background: var(--zemin-derin);
  border-right: 1px solid var(--cizgi);
  overflow: hidden;
}
.giris-gorsel img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.giris-gorsel figcaption {
  position: absolute;
  left: 0; bottom: 0;
  padding: 0.5rem 0.9rem;
  background: var(--zemin);
  border-top: 1px solid var(--cizgi);
  border-right: 1px solid var(--cizgi);
  font-family: var(--mono);
  font-size: var(--olcek-6);
  letter-spacing: 0.1em;
  color: var(--sonuk);
  border-radius: 0 var(--kose) 0 0;
}

.giris-yazi {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(2.5rem, 7vh, 5.5rem) var(--kenar);
}
.giris-yazi h1 {
  font-size: clamp(2.2rem, 4.4vw, 3.9rem);
  line-height: 1.02;
  font-variation-settings: "SOFT" 24, "WONK" 1;
  margin: 1rem 0 1.5rem;
  max-width: 16ch;
}
.giris-yazi p {
  max-width: 44ch;
  color: var(--murekkep-2);
  font-size: 1.0625rem;
  margin: 0 0 1rem;
}
.giris-imza {
  font-family: var(--imza);
  font-size: 2.4rem;
  line-height: 1;
  color: var(--patina);
  margin-top: 1.5rem;
}

/* Dar ekranda once yazi, sonra fotograf: metin fotografin altina sikismaz.
   Genis ekranda DOM sirasi korunur (fotograf solda, yazi sagda). */
@media (max-width: 860px) {
  .giris { grid-template-columns: 1fr; min-height: 0; }
  .giris-yazi { order: 1; padding-bottom: 2rem; }
  .giris-gorsel {
    order: 2;
    border-right: 0;
    border-top: 1px solid var(--cizgi);
    aspect-ratio: 4 / 5;
  }
}

/* =========================================================== ACILIS SAYFA == */
/* Sol: parca kunyesi. Sag: tek parca tam boy. Kart yok, izgara yok. */
.acilis {
  display: grid;
  grid-template-columns: minmax(300px, 38%) 1fr;
  min-height: calc(100vh - var(--ust));
  border-bottom: 1px solid var(--cizgi);
}

.acilis-kunye {
  padding: clamp(2.5rem, 6vh, 5rem) var(--kenar) 3rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-right: 1px solid var(--cizgi);
}

.acilis-kunye h1 {
  font-size: var(--olcek-1);
  line-height: 0.95;
  font-variation-settings: "SOFT" 24, "WONK" 1;
  margin: 1rem 0 1.25rem;
}
.acilis-kunye h1 em { font-style: italic; }

.acilis-ozet {
  max-width: 34ch;
  color: var(--murekkep-2);
  font-size: 1.0625rem;
  margin: 0 0 2rem;
}

.acilis-gorsel {
  position: relative;
  background: var(--zemin-derin);
  overflow: hidden;
}
.acilis-gorsel img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.acilis-gorsel figcaption {
  position: absolute;
  left: 0; bottom: 0;
  padding: 0.5rem 0.9rem;
  background: var(--zemin);
  border-top: 1px solid var(--cizgi);
  border-right: 1px solid var(--cizgi);
  font-family: var(--mono);
  font-size: var(--olcek-6);
  letter-spacing: 0.1em;
  color: var(--sonuk);
  border-radius: 0 var(--kose) 0 0;
}

@media (max-width: 900px) {
  .acilis { grid-template-columns: 1fr; min-height: 0; }
  .acilis-kunye { border-right: 0; border-bottom: 1px solid var(--cizgi); }
  .acilis-gorsel { aspect-ratio: 4 / 5; }
}

/* --------------------------------------------------------- veri tablosu ---- */
.kunye-tablo {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--mono);
  font-size: var(--olcek-5);
}
.kunye-tablo th, .kunye-tablo td {
  text-align: left;
  padding: 0.45rem 0;
  border-bottom: 1px solid var(--cizgi-ince);
  vertical-align: baseline;
}
.kunye-tablo th {
  font-weight: 400;
  color: var(--sonuk);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: var(--olcek-6);
  width: 42%;
}
.kunye-tablo td { color: var(--murekkep); }

/* ============================================================ LOT DEFTERI == */
/* Katalog: satir satir defter kaydi. Yan yana kart kullanilmaz. */
.defter { list-style: none; margin: 0; padding: 0; }

.defter-satir {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr) 180px 130px 150px;
  align-items: center;
  gap: var(--bosluk);
  padding: 1.15rem 0;
  border-bottom: 1px solid var(--cizgi-ince);
  transition: background var(--gecis);
}
.defter-satir:hover { background: var(--zemin-derin); }

.defter-satir .ad {
  font-size: 1.35rem;
  font-variation-settings: "SOFT" 16;
}
.defter-satir .tanim {
  font-family: var(--mono);
  font-size: var(--olcek-5);
  color: var(--sonuk);
  margin-top: 2px;
}
.defter-satir .durum-yazi {
  font-family: var(--mono);
  font-size: var(--olcek-6);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--patina);
}

.defter-onizleme {
  width: 150px;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  background: var(--zemin-derin);
  filter: saturate(0.92);
  transition: filter var(--gecis);
}
.defter-satir:hover .defter-onizleme { filter: saturate(1.05); }

.defter-satir .ad { display: block; }
.defter-satir .fiyat-kol { text-align: right; }

@media (max-width: 860px) {
  .defter-satir {
    grid-template-columns: 96px minmax(0, 1fr);
    grid-template-areas:
      "gorsel lot"
      "gorsel baslik"
      "gorsel veri"
      "gorsel fiyat";
    align-items: start;
    row-gap: 0.35rem;
    column-gap: 1rem;
  }
  .defter-satir > a:last-child { grid-area: gorsel; }
  .defter-onizleme { width: 96px; }
  .defter-satir > .parca-no { grid-area: lot; }
  .defter-satir .baslik-kol { grid-area: baslik; }
  .defter-satir .veri-kol { grid-area: veri; }
  .defter-satir .fiyat-kol { grid-area: fiyat; text-align: left; }
  .defter-satir .ad { font-size: 1.15rem; }
}

/* ============================================================ PARCA SAYFA == */
.parca {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, 40%);
  align-items: start;
}

.parca-galeri {
  border-right: 1px solid var(--cizgi);
  background: var(--zemin-derin);
}
.parca-galeri figure { margin: 0; border-bottom: 1px solid var(--cizgi); }
.parca-gorsel { width: 100%; display: block; }

.parca-fis {
  position: sticky;
  top: var(--ust);
  padding: 3rem var(--kenar) 4rem;
}
.parca-fis h1 {
  font-size: clamp(2rem, 3.4vw, 3rem);
  line-height: 1.02;
  margin: 0.75rem 0 0.5rem;
  font-variation-settings: "SOFT" 24, "WONK" 1;
}

.ai-metin {
  font-size: 1.0625rem;
  color: var(--murekkep-2);
  max-width: 40ch;
  margin: 0 0 1.75rem;
  padding-left: 0.9rem;
  border-left: 2px solid var(--patina);
}

@media (max-width: 950px) {
  .parca { grid-template-columns: 1fr; }
  .parca-galeri { border-right: 0; }
  .parca-fis { position: static; }
}

/* ---------------------------------------------------------------- dugme ---- */
.dugme {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  padding: 0.85rem 1.5rem;
  font-family: var(--mono);
  font-size: var(--olcek-5);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: var(--patina);
  color: var(--zemin);
  border: 1px solid var(--patina);
  cursor: pointer;
  transition: background var(--gecis), color var(--gecis);
}
.dugme:hover { background: var(--patina-koyu); border-color: var(--patina-koyu); }
.dugme[disabled] { background: var(--cizgi); border-color: var(--cizgi); color: var(--sonuk); cursor: not-allowed; }

.dugme.duz {
  background: transparent;
  color: var(--murekkep);
  border-color: var(--cizgi);
}
.dugme.duz:hover { border-color: var(--patina); color: var(--patina); background: transparent; }

.dugme.genis { width: 100%; }

.dugme-satir { display: flex; gap: 0.75rem; flex-wrap: wrap; margin: 1.5rem 0; }

/* favori dugmesi — ozel cizilmis ikon, kutuphane ikonu kullanilmaz */
.favori {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: transparent;
  border: 1px solid var(--cizgi);
  color: var(--murekkep-2);
  padding: 0.85rem 1.1rem;
  cursor: pointer;
  font-family: var(--mono);
  font-size: var(--olcek-6);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: color var(--gecis), border-color var(--gecis);
}
.favori svg { width: 15px; height: 15px; }
.favori[aria-pressed="true"] { color: var(--patina); border-color: var(--patina); }
.favori[aria-pressed="true"] svg { fill: var(--patina); }

/* ----------------------------------------------------------------- form ---- */
.alan-grup { margin-bottom: 1.1rem; }
.alan-grup label {
  display: block;
  font-family: var(--mono);
  font-size: var(--olcek-6);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sonuk);
  margin-bottom: 0.4rem;
}
.alan {
  width: 100%;
  padding: 0.75rem 0.85rem;
  background: var(--zemin);
  border: 1px solid var(--cizgi);
  color: var(--murekkep);
  font-family: var(--mono);
  font-size: 0.875rem;
}
.alan:focus { border-color: var(--patina); outline: none; }
textarea.alan { min-height: 100px; resize: vertical; }

.form-dar { max-width: 420px; }

.uyari-kutu {
  border-left: 2px solid var(--uyari);
  padding: 0.6rem 0.9rem;
  font-family: var(--mono);
  font-size: var(--olcek-5);
  color: var(--uyari);
  background: var(--zemin-derin);
  margin: 1rem 0;
}
.uyari-kutu:empty { display: none; }

/* --------------------------------------------------------------- adimlar --- */
.adimlar {
  display: flex;
  gap: 0;
  border: 1px solid var(--cizgi);
  margin: 2rem 0;
  overflow: hidden;
}
.adimlar div {
  flex: 1;
  padding: 0.7rem 1rem;
  font-family: var(--mono);
  font-size: var(--olcek-6);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sonuk);
  border-right: 1px solid var(--cizgi);
}
.adimlar div:last-child { border-right: 0; }
.adimlar div[data-etkin="1"] { background: var(--patina); color: var(--zemin); }

/* --------------------------------------------------------------- secenek --- */
.secenek {
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
  padding: 1rem;
  border: 1px solid var(--cizgi);
  margin-bottom: 0.6rem;
  cursor: pointer;
  border-radius: var(--kose);
  transition: border-color var(--gecis);
}
.secenek:hover { border-color: var(--patina); }
.secenek input { margin-top: 4px; accent-color: var(--patina); }
.secenek .ad { font-size: 1rem; }
.secenek .not { font-family: var(--mono); font-size: var(--olcek-5); color: var(--sonuk); }
.secenek .ucret { margin-left: auto; font-family: var(--mono); font-size: var(--olcek-5); }

/* --------------------------------------------------------------- sepet ----- */
.sepet-satir {
  display: grid;
  grid-template-columns: 92px 1fr auto auto;
  gap: var(--bosluk);
  align-items: center;
  padding: 1.1rem 0;
  border-bottom: 1px solid var(--cizgi-ince);
}
.sepet-satir img { width: 92px; aspect-ratio: 4/5; object-fit: cover; background: var(--zemin-derin); }

.ozet-tablo { width: 100%; border-collapse: collapse; font-family: var(--mono); font-size: 0.875rem; }
.ozet-tablo td { padding: 0.5rem 0; border-bottom: 1px solid var(--cizgi-ince); }
.ozet-tablo td:last-child { text-align: right; }
.ozet-tablo tr.toplam td { border-bottom: 0; border-top: 1px solid var(--murekkep); font-size: 1.0625rem; padding-top: 0.9rem; }

/* --------------------------------------------------------------- panel ----- */
.panel-izgara {
  display: grid;
  grid-template-columns: minmax(280px, 360px) minmax(0, 1fr);
  gap: 0;
  border-top: 1px solid var(--cizgi);
}
.panel-yan { border-right: 1px solid var(--cizgi); padding: 1.5rem var(--bosluk) 3rem 0; }
.panel-ana { padding: 1.5rem 0 3rem var(--bosluk); }

@media (max-width: 900px) {
  .panel-izgara { grid-template-columns: 1fr; }
  .panel-yan { border-right: 0; border-bottom: 1px solid var(--cizgi); padding-right: 0; }
  .panel-ana { padding-left: 0; }
}

.uye-satir {
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--cizgi-ince);
  padding: 0.85rem 0.6rem;
  cursor: pointer;
  font-family: var(--mono);
  font-size: var(--olcek-5);
  color: var(--murekkep-2);
}
.uye-satir:hover { background: var(--zemin-derin); }
.uye-satir[data-secili="1"] { border-left: 2px solid var(--patina); color: var(--murekkep); background: var(--patina-sis); }
.uye-satir .isim { font-family: var(--serif); font-size: 1.0625rem; color: var(--murekkep); }

.canli-nokta {
  display: inline-block;
  width: 6px; height: 6px;
  background: var(--patina);
  border-radius: var(--kose);
  margin-right: 6px;
  vertical-align: middle;
}

.olay-akis { list-style: none; margin: 0; padding: 0; font-family: var(--mono); font-size: var(--olcek-5); }
.olay-akis li {
  display: grid;
  grid-template-columns: 64px 120px 1fr auto;
  gap: 0.75rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--cizgi-ince);
  color: var(--murekkep-2);
}
.olay-akis .zaman { color: var(--sonuk); }
.olay-akis .tur { color: var(--patina); letter-spacing: 0.06em; text-transform: uppercase; font-size: var(--olcek-6); }

/* --------------------------------------------------------- siparis kart -- */
/* Her siparis kapanip acilan bir kayittir. Kapaliyken tek satir; boylece
   yuzlerce siparis ayni sayfada durur, gecmise gitmek icin sayfa
   degistirmek gerekmez.                                                    */
.siparis-arac {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}
.dugme.kucuk {
  padding: 0.45rem 0.85rem;
  font-size: var(--olcek-6);
}

.siparis-kart {
  border: 1px solid var(--cizgi);
  border-radius: var(--kose);
  margin-bottom: 0.5rem;
  background: var(--zemin);
}
.siparis-kart[open] { border-color: var(--murekkep-2); }

.siparis-ust {
  display: grid;
  grid-template-columns: 14px minmax(0, 1.1fr) minmax(0, 1fr) auto;
  align-items: center;
  gap: 1rem;
  padding: 0.85rem 1.25rem;
  cursor: pointer;
  list-style: none;
  transition: background var(--gecis);
}
.siparis-ust::-webkit-details-marker { display: none; }
.siparis-ust:hover { background: var(--zemin-derin); }
.siparis-kart[open] .siparis-ust { border-bottom: 1px solid var(--cizgi-ince); }

/* Ok isareti: iki cizgiden cizilmis, acilinca doner. */
.siparis-ok {
  width: 8px;
  height: 8px;
  border-right: 1px solid var(--sonuk);
  border-bottom: 1px solid var(--sonuk);
  transform: rotate(-45deg);
  transition: transform var(--gecis);
}
.siparis-kart[open] .siparis-ok { transform: rotate(45deg); }

.siparis-kimlik { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; }
.siparis-zaman {
  font-family: var(--mono);
  font-size: var(--olcek-6);
  color: var(--sonuk);
}
.siparis-kisi {
  font-family: var(--mono);
  font-size: var(--olcek-5);
  color: var(--murekkep-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.siparis-tutar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  justify-content: flex-end;
}
.siparis-tutar .fiyat { font-size: 1.05rem; }
.siparis-tutar .durum-rozet { margin-top: 0; }

.siparis-govde {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 1.75rem;
  padding: 1rem 1.25rem 0;
}
.siparis-kart .dugme-satir { padding: 0 1.25rem 1.25rem; }

/* Kargoyu hazirlayan kisinin okuyacagi satirlar kalin ve bir tik buyuk. */
.kargo-kunye td {
  font-weight: 600;
  font-size: 0.875rem;
  letter-spacing: 0.01em;
  color: var(--murekkep);
}
.durum-rozet {
  display: inline-block;
  margin-top: 0.35rem;
  padding: 2px 8px;
  border: 1px solid var(--cizgi);
  border-radius: var(--kose);
  font-family: var(--mono);
  font-size: var(--olcek-6);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sonuk);
}
.durum-rozet[data-durum="odendi"],
.durum-rozet[data-durum="hazirlaniyor"] { color: var(--patina); border-color: var(--patina); }
.durum-rozet[data-durum="kargoda"] { color: var(--murekkep); border-color: var(--murekkep-2); }
.durum-rozet[data-durum="teslim"] {
  color: var(--patina); border-color: var(--patina); background: var(--patina-sis);
}
.durum-rozet[data-durum="iptal"],
.durum-rozet[data-durum="iade"] { color: var(--uyari); border-color: var(--uyari); }

.siparis-govde:last-child { padding-bottom: 1.25rem; }

@media (max-width: 900px) {
  .siparis-govde { grid-template-columns: 1fr; gap: 1.25rem; }

  /* Dar ekranda ozet satiri iki satira doner: solda kimlik, sagda tutar. */
  .siparis-ust {
    grid-template-columns: 14px minmax(0, 1fr) auto;
    row-gap: 0.35rem;
    padding: 0.8rem 1rem;
  }
  .siparis-kisi { grid-column: 2 / 4; }
  .siparis-govde { padding-left: 1rem; padding-right: 1rem; }
  .siparis-kart .dugme-satir { padding-left: 1rem; padding-right: 1rem; }
}

.olcum-serisi {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  border: 1px solid var(--cizgi);
  margin: 1.5rem 0;
}
.olcum-serisi div { padding: 1rem; border-right: 1px solid var(--cizgi); }
.olcum-serisi div:last-child { border-right: 0; }
.olcum-serisi .sayi { font-family: var(--mono); font-size: 1.75rem; letter-spacing: -0.02em; }

/* --------------------------------------------------------------- yazi ------ */
.yazi { max-width: 68ch; }
.yazi h2 { font-size: var(--olcek-3); margin: 2.25rem 0 0.6rem; }
.yazi p { color: var(--murekkep-2); margin: 0 0 1rem; }
.yazi ul { padding-left: 1.1rem; color: var(--murekkep-2); }
.yazi li { margin-bottom: 0.4rem; }

/* --------------------------------------------------------------- alt ------- */
.alt {
  margin-left: var(--serit);
  background: var(--zemin-koyu);
  color: var(--ters);
  padding: 3rem var(--kenar) 2rem;
}
.alt-izgara {
  max-width: var(--azami);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 2.5rem;
  padding-bottom: 2.5rem;
  border-bottom: 1px solid rgba(239, 236, 228, 0.16);
}
/* Altbilgideki kare harita. Kose yaricapi yine tek deger. */
.alt-harita {
  margin: 1.25rem 0 0;
  max-width: 280px;
}
.alt-harita .cerceve {
  position: relative;
  aspect-ratio: 1 / 1;
  border: 1px solid rgba(239, 236, 228, 0.22);
  border-radius: var(--kose);
  overflow: hidden;
  background: var(--zemin-derin);
}
.alt-harita iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  /* Harita kendi renk dilini getiriyor; sitenin paletiyle catismasin diye
     doygunlugu biraz dusuruluyor. */
  filter: saturate(0.72) contrast(0.96);
}
.alt-harita .adres {
  display: block;
  margin-top: 0.5rem;
  font-family: var(--mono);
  font-size: var(--olcek-6);
  letter-spacing: 0.08em;
  color: rgba(239, 236, 228, 0.72);
}
.alt-harita .adres:hover { color: #fff; }

.alt h3 {
  font-family: var(--mono);
  font-size: var(--olcek-6);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(239, 236, 228, 0.55);
  margin-bottom: 0.9rem;
}
.alt a { color: rgba(239, 236, 228, 0.82); display: block; padding: 0.22rem 0; font-family: var(--mono); font-size: var(--olcek-5); }
.alt a:hover { color: #fff; }
.alt-son {
  max-width: var(--azami);
  margin: 0 auto;
  padding-top: 1.5rem;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  font-family: var(--mono);
  font-size: var(--olcek-6);
  letter-spacing: 0.06em;
  color: rgba(239, 236, 228, 0.5);
}
.alt-son a { display: inline; color: rgba(239, 236, 228, 0.82); }

@media (max-width: 760px) {
  .alt-izgara { grid-template-columns: 1fr; gap: 1.75rem; }
}

/* ------------------------------------------------------------- yardimci ---- */
.gizli { display: none !important; }
.gorsel-gizli {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.bosluk-2 { height: 2rem; }
.bosluk-4 { height: 4rem; }

.yukleniyor {
  font-family: var(--mono);
  font-size: var(--olcek-5);
  color: var(--sonuk);
  padding: 2rem 0;
}

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: 1ms !important; animation-duration: 1ms !important; }
  html { scroll-behavior: auto; }
}

/* ------------------------------------------------- serit icindeki menu --- */
/* Hesap bolumleri sol seritte, dikey yazi olarak durur. */
.serit-menu {
  list-style: none;
  /* Baslik kaldirildi; bolumler seridin en basindan baslar. */
  margin: 0;
  padding: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 1.75rem;
}
.serit-menu button {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  background: transparent;
  border: 0;
  padding: 0.5rem 0.3rem;
  font-family: var(--mono);
  font-size: var(--olcek-6);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--sonuk);
  cursor: pointer;
  transition: color var(--gecis), box-shadow var(--gecis);
}
.serit-menu button:hover { color: var(--murekkep); }
.serit-menu button[aria-current="true"] {
  color: var(--patina);
  box-shadow: inset 2px 0 0 var(--patina);
}
.serit-menu .sayi {
  font-size: 0.625rem;
  letter-spacing: 0.1em;
  color: var(--patina);
}

/* Serit dar ekranda gizlenir; o zaman icerik ustundeki yatay menu gorunur. */
.mobil-menu { display: none; }
@media (max-width: 900px) {
  .mobil-menu {
    display: flex;
    gap: 0;
    overflow-x: auto;
    scrollbar-width: none;
    border-top: 1px solid var(--cizgi);
    border-bottom: 1px solid var(--cizgi);
    margin: 1.25rem 0 1.75rem;
  }
  .mobil-menu::-webkit-scrollbar { display: none; }
  .mobil-menu li { border: 0; flex: none; }
  .mobil-menu button {
    white-space: nowrap;
    border-left: 0;
    border-bottom: 2px solid transparent;
    padding: 0.8rem 1rem;
    font-size: 0.9375rem;
  }
  .mobil-menu button[aria-current="true"] {
    border-left: 0;
    border-bottom-color: var(--patina);
    background: transparent;
  }
}

/* ------------------------------------------------------- hesap yan menu -- */
.yan-menu { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--cizgi); }
.yan-menu li { border-bottom: 1px solid var(--cizgi-ince); }
.yan-menu button {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  border-left: 2px solid transparent;
  padding: 0.95rem 0.75rem;
  cursor: pointer;
  font-family: var(--serif);
  font-size: 1.0625rem;
  color: var(--murekkep-2);
  transition: background var(--gecis), color var(--gecis), border-color var(--gecis);
}
.yan-menu button:hover { background: var(--zemin-derin); color: var(--murekkep); }
.yan-menu button[aria-current="true"] {
  border-left-color: var(--patina);
  background: var(--patina-sis);
  color: var(--murekkep);
}
.yan-menu .sayi {
  font-family: var(--mono);
  font-size: var(--olcek-6);
  letter-spacing: 0.08em;
  color: var(--sonuk);
}

.hesap-bolum[hidden] { display: none; }

/* Bolum menusu serite tasindigi icin icerik tek sutun akar. */
.hesap-icerik {
  max-width: 780px;
  padding-top: 1.75rem;
}

.adres-kart {
  border: 1px solid var(--cizgi);
  border-radius: var(--kose);
  padding: 1rem 1.1rem;
  margin-bottom: 0.75rem;
}
.adres-kart .baslik {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.4rem;
}
.adres-kart p {
  margin: 0;
  color: var(--murekkep-2);
  font-size: 0.9375rem;
}
.adres-kart .islem {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.75rem;
}
.adres-kart .islem button {
  background: transparent;
  border: 1px solid var(--cizgi);
  border-radius: var(--kose);
  padding: 0.35rem 0.7rem;
  font-family: var(--mono);
  font-size: var(--olcek-6);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--murekkep-2);
  cursor: pointer;
}
.adres-kart .islem button:hover { border-color: var(--patina); color: var(--patina); }

.varsayilan-etiket {
  font-family: var(--mono);
  font-size: var(--olcek-6);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--patina);
  border: 1px solid var(--patina);
  border-radius: var(--kose);
  padding: 1px 6px;
}

.basari-kutu {
  border-left: 2px solid var(--patina);
  padding: 0.6rem 0.9rem;
  font-family: var(--mono);
  font-size: var(--olcek-5);
  color: var(--patina);
  background: var(--patina-sis);
  margin: 1rem 0;
}
.basari-kutu:empty { display: none; }

/* ══════════════════════════════════════ CIHAZ VE TARAYICI UYUMU ═══════════ */
/* Hedef: telefon, tablet ve masaustunde; Chrome, Safari, Firefox ve Edge'de
   ayni yerlesim. Asagisi yalnizca duzeltmedir, yeni bir dil getirmez.        */

/* iOS Safari'de adres cubugu acilip kapandikca 100vh degisir; svh varsa onu
   kullan. svh yoksa 100vh gecerli kalir.                                     */
@supports (height: 100svh) {
  .giris, .acilis { min-height: calc(100svh - var(--ust)); }
  .govde { min-height: 100svh; }
}

/* Uzun e-posta ve numaralar dar ekranda tasmasin. */
.alt a, .fatura-taraflar dd, .yazi a, .uyari-kutu { overflow-wrap: anywhere; }

/* Yatay tasmaya karsi son emniyet: hicbir cocuk gorunumden genis olamaz. */
.govde, .kap, .giris, .acilis, .parca, .panel-izgara { max-width: 100%; }

/* Genis tablolar kendi icinde kaysin, sayfayi yana kaydirmasin. */
.kunye-tablo, .ozet-tablo { table-layout: auto; }
.tablo-kaydir { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ---------------------------------------------------------- tablet ve alti */
@media (max-width: 1024px) {
  .parca-fis { padding-top: 2rem; }
  .olcum-serisi { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
}

/* ------------------------------------------------------------- telefon --- */
@media (max-width: 760px) {
  :root {
    --ust: 76px;
    --kenar: 1.15rem;
    --bosluk: 1rem;
  }

  /* Ust bant telefonda uc bolme: solda menu dugmesi, ortada marka, sagda
     arama / hesap / sepet simgeleri. Yan bolmeler esit genislikte oldugu
     icin marka ekranin tam ortasina oturur. */
  .ust {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 0.5rem;
  }
  .ust .gezinti { display: none; }

  .marka {
    grid-column: 2;
    justify-self: center;
    margin: 0;
    font-size: clamp(1.75rem, 7.4vw, 2.5rem);
    white-space: nowrap;
  }

  .ust-simgeler {
    grid-column: 3;
    justify-self: end;
    display: flex;
    align-items: center;
    gap: 0.15rem;
  }
  .ust-simge {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    background: transparent;
    border: 0;
    color: var(--murekkep);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: color var(--gecis);
  }
  .ust-simge svg { display: block; width: 19px; height: 19px; }
  .ust-simge:active { color: var(--patina); }
  .ust-simge .sepet-sayac {
    position: absolute;
    top: 3px;
    right: 2px;
    margin-left: 0;
    padding: 0 4px;
    font-size: 0.5625rem;
    line-height: 1.55;
  }
  .ust-simge .sepet-sayac[data-bos="1"] { display: none; }

  /* Sayfa ici ikincil gezintiler tek satirda kalsin, gerekirse yatay kaysin. */
  .gezinti {
    gap: 0.95rem;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding-bottom: 2px;
  }
  .gezinti::-webkit-scrollbar { display: none; }
  .gezinti a { white-space: nowrap; font-size: 0.625rem; letter-spacing: 0.08em; }

  /* Menu dugmesi bandin sol ucunda: cerceve yok, yalniz uc cizgi. */
  .menu-dugme {
    grid-column: 1;
    justify-self: start;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    margin-left: -0.5rem;   /* cizgiler bandin kenariyla hizalansin */
    padding: 0;
    background: transparent;
    border: 0;
    color: var(--murekkep);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: color var(--gecis);
  }
  .menu-dugme svg { display: block; width: 22px; height: 22px; }

  /* Perde: cekmece acikken arkadaki sayfayi kapatir. Bulanik cam degil,
     duz bir mürekkep perdesi. */
  .menu-perde {
    display: block;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 80;
    background: var(--zemin-koyu);
    opacity: 0;
    transition: opacity var(--gecis);
  }
  .menu-perde[data-acik] { opacity: 0.5; }

  /* Cekmece: soldan iceri girer ve ust bandi da ortec; kendi ust satiri
     vardir. Sag kenarda sayfadan bir serit gorunur, oraya basinca kapanir. */
  .acilir-menu {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 90;
    width: min(400px, 90vw);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background: var(--zemin);
    border-right: 1px solid var(--cizgi);
    transform: translateX(-100%);
    transition: transform var(--gecis);
  }
  .acilir-menu[data-acik] { transform: translateX(0); }

  /* Cekmecenin ust satiri: kapatma, oturum baglantilari, sepet. */
  .menu-bas {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    flex: none;
    min-height: var(--ust);
    padding: 0 var(--kenar);
    border-bottom: 1px solid var(--cizgi);
  }
  .menu-kapa {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin-left: -0.6rem;
    padding: 0;
    background: transparent;
    border: 0;
    color: var(--murekkep);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .menu-kapa svg { display: block; width: 18px; height: 18px; }

  .menu-oturum {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-right: auto;
    font-family: var(--mono);
    font-size: var(--olcek-6);
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }
  .menu-oturum a, .menu-oturum button {
    padding: 0;
    background: transparent;
    border: 0;
    font: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    color: var(--murekkep);
    cursor: pointer;
  }
  .menu-oturum .ayrac { color: var(--cizgi); }

  .menu-liste { counter-reset: menu; }

  /* Her satir katalogdaki bir kayit gibi: solda sira numarasi, yaninda
     serif isim. Satirlar cekmece acilirken sirayla yerine oturur. */
  .menu-satir {
    display: flex;
    align-items: baseline;
    gap: 1rem;
    padding: 1.15rem 1.5rem;
    border-bottom: 1px solid var(--cizgi-ince);
    color: var(--murekkep);
    -webkit-tap-highlight-color: transparent;
    opacity: 0;
    transform: translateX(-14px);
    transition: opacity 260ms cubic-bezier(0.2, 0, 0.1, 1),
                transform 260ms cubic-bezier(0.2, 0, 0.1, 1),
                color var(--gecis), background var(--gecis);
  }
  .menu-satir::before {
    counter-increment: menu;
    content: counter(menu, decimal-leading-zero);
    flex: none;
    width: 1.6em;
    font-family: var(--mono);
    font-size: var(--olcek-6);
    letter-spacing: 0.1em;
    color: var(--sonuk);
    transition: color var(--gecis);
  }
  .menu-satir .ad {
    flex: 1 1 auto;
    min-width: 0;
    font-family: var(--serif);
    font-size: 1.5rem;
    font-variation-settings: "SOFT" 16;
    line-height: 1.15;
  }
  .menu-satir .sepet-sayac { flex: none; margin-left: 0; align-self: center; }
  .menu-satir .sepet-sayac[data-bos="1"] { display: none; }

  .menu-satir[aria-current="page"] { color: var(--patina); }
  .menu-satir[aria-current="page"]::before { color: var(--patina); }
  .menu-satir:active { background: var(--zemin-derin); }

  /* Sirali giris: satirlar birbiri ardina yerine oturur. */
  .acilir-menu[data-acik] .menu-satir { opacity: 1; transform: translateX(0); }
  .acilir-menu[data-acik] .menu-satir:nth-child(1) { transition-delay: 40ms; }
  .acilir-menu[data-acik] .menu-satir:nth-child(2) { transition-delay: 70ms; }
  .acilir-menu[data-acik] .menu-satir:nth-child(3) { transition-delay: 100ms; }
  .acilir-menu[data-acik] .menu-satir:nth-child(4) { transition-delay: 130ms; }
  .acilir-menu[data-acik] .menu-satir:nth-child(5) { transition-delay: 160ms; }
  .acilir-menu[data-acik] .menu-satir:nth-child(6) { transition-delay: 190ms; }
  .acilir-menu[data-acik] .menu-satir:nth-child(7) { transition-delay: 220ms; }

  /* Cekmecenin dibi: tema anahtari ve kunye. */
  .menu-dip { margin-top: auto; padding: 1.5rem; }

  .menu-tema {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 44px;
    padding: 0.6rem 0.9rem;
    background: transparent;
    border: 1px solid var(--cizgi);
    border-radius: var(--kose);
    font-family: var(--mono);
    font-size: var(--olcek-6);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--murekkep-2);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: color var(--gecis), border-color var(--gecis);
  }
  .menu-tema svg { display: block; order: 2; margin-left: auto; }
  .menu-tema[aria-pressed="true"] { color: var(--patina); border-color: var(--patina); }

  .menu-kunye {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 1.35rem;
    font-family: var(--mono);
    font-size: var(--olcek-6);
    letter-spacing: 0.06em;
    color: var(--sonuk);
  }
  .menu-kunye a { color: var(--murekkep-2); border-bottom: 1px solid var(--cizgi); }

  /* Cekmece acikken arkadaki sayfa kaymasin. */
  html.menu-acik, html.menu-acik body { overflow: hidden; }

  /* Kapaliyken tamamen devre disi: odak sirasina da girmez.
     Tarayici oncelikleri yuzunden hidden'i acikca yazmak gerekiyor. */
  .acilir-menu[hidden], .menu-perde[hidden], .arama-katman[hidden] { display: none; }

  /* Arama: ust bandin uzerine inen tek satirlik alan. */
  .arama-katman {
    display: block;
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 95;
    padding: calc((var(--ust) - 46px) / 2) var(--kenar);
    background: var(--zemin);
    border-bottom: 1px solid var(--cizgi);
    transform: translateY(-100%);
    transition: transform var(--gecis);
  }
  .arama-katman[data-acik] { transform: translateY(0); }

  .arama-kutu {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    height: 46px;
    padding: 0 0.5rem 0 0.85rem;
    border: 1px solid var(--cizgi);
    border-radius: var(--kose);
    background: var(--zemin-derin);
  }
  .arama-kutu .im { display: flex; color: var(--sonuk); }
  .arama-kutu .im svg { display: block; width: 17px; height: 17px; }
  .arama-kutu input {
    flex: 1 1 auto;
    min-width: 0;
    height: 100%;
    padding: 0;
    background: transparent;
    border: 0;
    font-family: var(--mono);
    font-size: 1rem;              /* 16px altinda iOS sayfayi yakinlastirir */
    color: var(--murekkep);
  }
  .arama-kutu input::placeholder { color: var(--sonuk); }
  .arama-kutu input:focus { outline: none; }
  .arama-kapa {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    flex: none;
    padding: 0;
    background: transparent;
    border: 0;
    color: var(--sonuk);
    cursor: pointer;
  }
  .arama-kapa svg { display: block; width: 16px; height: 16px; }

  .sayfa-ust { padding: 2.25rem 0 0.75rem; }

  /* Sepet ve favori satirlari: gorsel solda, bilgi sagda, fiyat altta. */
  .sepet-satir {
    grid-template-columns: 72px minmax(0, 1fr);
    row-gap: 0.5rem;
    align-items: start;
  }
  .sepet-satir img { width: 72px; }
  .sepet-satir > *:nth-child(3) { grid-column: 2; }
  .sepet-satir > *:nth-child(4) { grid-column: 2; justify-self: start; }

  /* Canli olay akisi mobilde tek sutuna dokulur. */
  .olay-akis li {
    grid-template-columns: 1fr;
    row-gap: 0.15rem;
    padding: 0.7rem 0;
  }

  .adimlar div { padding: 0.6rem 0.5rem; font-size: 0.575rem; letter-spacing: 0.06em; }

  .fatura-kagit { padding: 1.5rem; }
  .fatura-taraflar { grid-template-columns: 1fr; gap: 1.5rem; }
  .fatura-taraflar dt { float: none; width: auto; }
  .fatura-taraflar dd { margin-left: 0; margin-bottom: 0.5rem; }
  .fatura-toplam { width: 100%; }

  .giris-yazi h1 { max-width: none; }
  .giris-imza { font-size: 2rem; }

  /* Dokunma hedefleri: bagimsiz baglantilar en az 44 piksel yuksekliginde. */
  .dugme, .favori { min-height: 44px; }
}

/* -------------------------------------------------------- dar telefon ---- */
@media (max-width: 380px) {
  .marka { font-size: 1.95rem; }
  .gezinti { gap: 0.75rem; }
  .defter-satir .ad { font-size: 1.05rem; }
  .dugme { padding: 0.8rem 1.1rem; }
}

/* ------------------------------------------------------ cerez bildirimi -- */
/* Sayfanin altina oturur, iceriye hic girmez. Buzlu cam veya golgeli kutu
   degil: koyu bir bant, tek cizgiyle ayrilmis.                              */
.cerez {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 75;
  display: flex;
  align-items: center;
  gap: var(--bosluk);
  padding: 1.1rem var(--kenar) calc(1.1rem + env(safe-area-inset-bottom, 0px));
  background: var(--zemin-koyu);
  border-top: 1px solid var(--patina);
  color: var(--ters);
  transform: translateY(100%);
  transition: transform var(--gecis);
}
.cerez[data-acik] { transform: translateY(0); }

.cerez-metin { flex: 1 1 auto; min-width: 0; }
.cerez-metin .etiket { color: var(--patina); margin-bottom: 0.4rem; }
.cerez-metin p {
  margin: 0;
  max-width: 74ch;
  font-family: var(--mono);
  font-size: var(--olcek-5);
  line-height: 1.65;
  color: var(--ters);
}
.cerez-metin a { color: var(--patina); border-bottom: 1px solid var(--patina); }

.cerez-dugmeler { display: flex; gap: 0.6rem; flex: none; }
.cerez .dugme { padding: 0.7rem 1.2rem; white-space: nowrap; }
.cerez .dugme.duz { color: var(--ters); border-color: var(--sonuk); }
.cerez .dugme.duz:hover { color: var(--patina); border-color: var(--patina); }

/* Izin verilmeden once haritanin yerinde duran aciklama. Koyu alt bilginin
   uzerinde durdugu icin rengini oradan alir. */
.harita-kapali {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 0.8rem;
  height: 100%;
  margin: 0;
  padding: 1.1rem;
  font-family: var(--mono);
  font-size: var(--olcek-6);
  line-height: 1.65;
  color: rgba(239, 236, 228, 0.7);
  background: var(--zemin-koyu);
}
.harita-kapali .dugme.duz {
  color: rgba(239, 236, 228, 0.92);
  border-color: rgba(239, 236, 228, 0.3);
}
.harita-kapali .dugme.duz:hover { color: var(--patina); border-color: var(--patina); }

@media (max-width: 760px) {
  .cerez { flex-direction: column; align-items: stretch; gap: 0.9rem; }
  .cerez-metin p { font-size: var(--olcek-6); line-height: 1.7; }
  .cerez-dugmeler { flex-direction: column; }
  .cerez .dugme { width: 100%; min-height: 46px; }
}

/* --------------------------------------------------- dokunmatik cihazlar -- */
/* Hover'i olmayan cihazda hover durumlari yapisik kalmasin. */
@media (hover: none) {
  .defter-satir:hover { background: transparent; }
  .marka:hover { color: var(--murekkep); }
  .defter-satir:hover .defter-onizleme { filter: saturate(0.92); }
}

/* --------------------------------------------------------- yazdirma ------ */
@media print {
  .serit, .ust, .alt, .cerez, .acilir-menu,
  .menu-perde, .menu-dugme, .arama-katman { display: none !important; }
  .govde { margin-left: 0; padding-top: 0; }
}