/* ==========================================================================
   VitrinGold — arayuz bilesenleri  ("Beyaz Galeri")
   Cerceve degil cizgi; dolgu degil bosluk. Hareket olculu.
   ========================================================================== */

/* ================================================================= BUTONLAR */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--b-2);
  min-height: 3rem;
  padding: 1.05rem 2.4rem;
  font-family: var(--disp);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1;
  border: 1px solid var(--murekkep);
  background: var(--murekkep);
  color: #fff;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--gecis), color var(--gecis), border-color var(--gecis);
}
.btn:hover { background: transparent; color: var(--murekkep); }
.btn .ikon { width: 1.05em; height: 1.05em; flex: none; }

.btn-cizgi { background: transparent; color: var(--murekkep); border-color: var(--cizgi-koyu); }
.btn-cizgi:hover { background: var(--murekkep); color: #fff; border-color: var(--murekkep); }

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

.btn-sade {
  background: transparent; border-color: transparent; color: var(--murekkep);
  padding-inline: 0; min-height: 2.25rem;
}
.btn-sade:hover { color: var(--altin); background: transparent; }

.btn-kucuk { min-height: 2.5rem; padding: 0.7rem 1.5rem; font-size: 11.5px; }
.btn-genis { width: 100%; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; }

/* ================================================================== ROZET */
.rozet {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  padding: 0.3rem 0.7rem;
  font-family: var(--disp);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  background: var(--kagit-2);
  color: var(--murekkep-2);
  white-space: nowrap;
}
.rozet-koyu { background: var(--murekkep); color: #fff; }
.rozet-stok { background: #eef4ef; color: var(--basari); }
.rozet-yok  { background: var(--kagit-2); color: var(--murekkep-3); }

/* ========================================================= GALERI OGESI
   Urun karti: cerceve yok, yalnizca hairline ayrac. Kenardan kenara
   seritlerde ve izgarada ayni bileseni kullaniyoruz. */
.oge {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(1.6rem, 2.6vw, 2.4rem) clamp(1.1rem, 2.2vw, 2rem) clamp(1.5rem, 2.4vw, 2.2rem);
  background: var(--beyaz);
  color: var(--murekkep);
  text-decoration: none;
  transition: background var(--gecis);
}
.oge:hover { background: var(--kagit); color: var(--murekkep); }

.oge-g { aspect-ratio: 1; display: grid; place-items: center; margin-bottom: var(--b-5); }
.oge-g img {
  max-width: 100%; max-height: 100%;
  object-fit: contain;
  transition: transform var(--gecis-yavas);
}
.oge:hover .oge-g img { transform: scale(1.05); }

.oge-k {
  font-family: var(--disp);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--murekkep-3);
  margin-bottom: var(--b-2);
}
/* Urun adi gercek baglantidir; ::after tum karti tiklanabilir yapar */
.oge-ad {
  font-family: var(--disp);
  font-size: 0.98rem;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -0.012em;
  margin-bottom: var(--b-3);
  color: inherit;
  text-decoration: none;
}
.oge-ad::after { content: ''; position: absolute; inset: 0; }
/* Odak halkasi baglantinin kendisinde kalir (":has" desteklenmese de gorunur);
   destekleniyorsa tum kart da vurgulanir. */
.oge:has(.oge-ad:focus-visible) { outline: 2px solid var(--altin); outline-offset: -2px; }

.oge-f {
  margin-top: auto;
  font-family: var(--disp);
  font-size: 1.08rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--altin);
}

/* Sepet butonu baglantinin ustunde durur; masaustunde hover ile belirir */
.oge-sepet {
  position: relative; z-index: 1;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem;
  width: 100%;
  margin-top: var(--b-4);
  padding: 0.62rem 0.8rem;
  background: transparent;
  border: 1px solid var(--cizgi-koyu);
  color: var(--murekkep-2);
  font-family: var(--disp);
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  cursor: pointer;
  transition: background var(--gecis), border-color var(--gecis), color var(--gecis);
}
.oge-sepet .ikon { width: 0.95rem; height: 0.95rem; }
.oge-sepet:hover { background: var(--murekkep); border-color: var(--murekkep); color: var(--beyaz); }
.oge-sepet.eklendi { background: var(--altin); border-color: var(--altin); color: var(--murekkep); }
.oge-rozet {
  position: absolute; top: 0; inset-inline-start: 0; z-index: 1;
  background: var(--murekkep); color: #fff;
  font-family: var(--disp); font-size: 9.5px; font-weight: 600;
  letter-spacing: 0.18em; padding: 0.4rem 0.75rem;
}

/* ------------------------------------------------------- adet secici */
.adet-secici {
  display: inline-flex; align-items: stretch;
  border: 1px solid var(--cizgi-koyu);
}
.adet-secici button {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.8rem;
  background: none; border: 0; color: var(--murekkep-2);
  cursor: pointer;
  transition: background var(--gecis), color var(--gecis);
}
.adet-secici button:hover { background: var(--kagit); color: var(--murekkep); }
.adet-secici button .ikon { width: 1rem; height: 1rem; }
.adet-secici .girdi {
  width: 3.4rem;
  min-height: auto;
  padding: 0.7rem 0.2rem;
  border: 0;
  border-inline: 1px solid var(--cizgi-koyu);
  text-align: center;
  font-family: var(--disp); font-weight: 600;
  font-variant-numeric: tabular-nums;
  -moz-appearance: textfield;
}
.adet-secici .girdi::-webkit-outer-spin-button,
.adet-secici .girdi::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* Cerceve ve dolgu tasimayan metin eylemi (buton ya da baglanti olabilir) */
.btn-metin {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0;
  background: none; border: 0;
  color: var(--murekkep-2);
  font-family: var(--sans);
  font-size: var(--olcek-sm);
  text-decoration: underline; text-underline-offset: 3px;
  text-decoration-color: var(--cizgi-koyu);
  cursor: pointer;
  transition: color var(--gecis), text-decoration-color var(--gecis);
}
.btn-metin:hover { color: var(--murekkep); text-decoration-color: var(--altin); }

.sepet-eylem { display: flex; flex-wrap: wrap; gap: var(--b-3); margin-block: var(--b-5); }
.sepet-eylem .btn-genis { flex: 1; min-width: 13rem; }
.btn.eklendi { background: var(--altin) !important; border-color: var(--altin) !important; color: var(--murekkep) !important; }

/* Kenardan kenara serit — hairline ile bolunmus galeri */
.tam-serit { border-block: 1px solid var(--cizgi); }
.tam-serit-ic { display: grid; grid-template-columns: repeat(2, 1fr); }
.tam-serit-ic > * {
  border-inline-end: 1px solid var(--cizgi);
  border-block-end: 1px solid var(--cizgi);
}
.tam-serit-ic > *:nth-child(2n) { border-inline-end: 0; }

/* Izgara icinde ayni oge — cizgi kafesi */
.oge-izgara {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr));
  gap: 1px;
  background: var(--cizgi);
  border: 1px solid var(--cizgi);
}

/* ============================================================== KATEGORI */
.kategori-kart {
  position: relative;
  display: grid;
  align-content: start;
  padding: clamp(1.6rem, 2.6vw, 2.4rem);
  background: var(--beyaz);
  color: var(--murekkep);
  text-decoration: none;
  transition: background var(--gecis);
}
.kategori-kart:hover { background: var(--kagit); color: var(--murekkep); }
.kategori-kart img {
  aspect-ratio: 4 / 3;
  width: 100%;
  object-fit: contain;
  margin-bottom: var(--b-5);
  transition: transform var(--gecis-yavas);
}
.kategori-kart:hover img { transform: scale(1.04); }
.kategori-ad { font-family: var(--disp); font-size: 1.05rem; font-weight: 500; letter-spacing: -0.022em; }
.kategori-sayi {
  font-family: var(--disp); font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--murekkep-3); margin-top: 0.3rem;
}
.kategori-ok {
  position: absolute;
  inset-inline-end: clamp(1.6rem, 2.6vw, 2.4rem);
  inset-block-end: clamp(1.6rem, 2.6vw, 2.4rem);
  color: var(--lacivert);
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity var(--gecis), transform var(--gecis);
}
.kategori-kart:hover .kategori-ok { opacity: 1; transform: none; }

.kategori-izgara {
  display: grid;
  gap: 1px;
  background: var(--cizgi);
  border: 1px solid var(--cizgi);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
}

/* ================================================================== FORM */
.alan { display: grid; gap: var(--b-2); }
.alan > label {
  font-family: var(--disp); font-size: 11px; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--murekkep-3);
}

.girdi, .secim, .metin-alan {
  width: 100%;
  min-height: 3rem;
  padding: 0.8rem 1rem;
  background: var(--beyaz);
  border: 1px solid var(--cizgi-koyu);
  color: var(--murekkep);
  font-size: var(--olcek-cap);
  transition: border-color var(--gecis);
}
.girdi::placeholder, .metin-alan::placeholder { color: var(--murekkep-3); }
.girdi:hover, .secim:hover, .metin-alan:hover { border-color: var(--murekkep-3); }
.girdi:focus, .secim:focus, .metin-alan:focus { outline: none; border-color: var(--murekkep); }
.metin-alan { min-height: 9rem; resize: vertical; }
.alan-ipucu { font-size: var(--olcek-xs); color: var(--murekkep-3); }

.arama { position: relative; display: flex; align-items: center; width: 100%; }
.arama .ikon {
  position: absolute; inset-inline-start: 0.9rem;
  width: 1.05rem; height: 1.05rem; color: var(--murekkep-3); pointer-events: none;
}
.arama .girdi { padding-inline-start: 2.7rem; }

/* ================================================================ AKORDIYON */
.akordiyon { border-top: 1px solid var(--cizgi); }
.akordiyon-oge { border-bottom: 1px solid var(--cizgi); }
.akordiyon-baslik {
  display: flex; align-items: center; justify-content: space-between; gap: var(--b-4);
  width: 100%;
  padding: var(--b-5) 0;
  background: none; border: 0;
  color: inherit;
  font-family: var(--disp);
  font-size: var(--olcek-cap);
  font-weight: 500;
  letter-spacing: -0.01em;
  text-align: start;
  cursor: pointer;
}
.akordiyon-baslik:hover { color: var(--altin); }
.akordiyon-baslik .ikon {
  flex: none; width: 1rem; height: 1rem; color: var(--murekkep-3);
  transition: transform var(--gecis), color var(--gecis);
}
.akordiyon-baslik[aria-expanded="true"] .ikon { transform: rotate(180deg); color: var(--altin); }
.akordiyon-govde { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--gecis-yavas); }
.akordiyon-govde > div { overflow: hidden; }
.akordiyon-oge.acik .akordiyon-govde { grid-template-rows: 1fr; }
.akordiyon-govde .ic { padding-bottom: var(--b-5); color: var(--murekkep-2); font-size: var(--olcek-cap); }
.akordiyon-govde p + p { margin-top: var(--b-3); }

/* =================================================================== SEKME */
.sekme-serit { display: flex; flex-wrap: wrap; gap: 0; border-bottom: 1px solid var(--cizgi); }
.sekme {
  padding: var(--b-3) var(--b-4);
  margin-bottom: -1px;
  background: none; border: 0; border-bottom: 2px solid transparent;
  font-family: var(--disp);
  font-size: 11.5px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--murekkep-3);
  cursor: pointer;
  transition: color var(--gecis), border-color var(--gecis);
}
.sekme:first-child { padding-inline-start: 0; }
.sekme:hover { color: var(--murekkep); }
.sekme[aria-selected="true"] { color: var(--murekkep); border-bottom-color: var(--altin); }
.sekme-panel[hidden] { display: none; }

/* ================================================================= KIRINTI */
.kirinti {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--b-2);
  font-family: var(--disp);
  font-size: 11px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--murekkep-3);
}
.kirinti a { color: var(--murekkep-3); text-decoration: none; }
.kirinti a:hover { color: var(--murekkep); }
.kirinti li { display: flex; align-items: center; gap: var(--b-2); }
.kirinti li + li::before { content: '/'; color: var(--cizgi-koyu); }
.kirinti [aria-current] { color: var(--murekkep); }

/* ============================================================== SAYFALAMA */
.sayfalama { display: flex; flex-wrap: wrap; gap: var(--b-2); justify-content: center; }
.sayfalama a, .sayfalama span {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 2.75rem; min-height: 2.75rem;
  padding: 0 0.75rem;
  border: 1px solid var(--cizgi);
  font-family: var(--disp); font-size: var(--olcek-sm); font-weight: 500;
  color: var(--murekkep-2); text-decoration: none;
}
.sayfalama a:hover { border-color: var(--murekkep); color: var(--murekkep); }
.sayfalama [aria-current="page"] { background: var(--murekkep); border-color: var(--murekkep); color: #fff; }

/* =================================================================== NOT */
.not {
  display: flex; gap: var(--b-3);
  padding: var(--b-4) var(--b-5);
  background: var(--kagit);
  border-inline-start: 2px solid var(--altin);
  font-size: var(--olcek-cap);
  color: var(--murekkep-2);
}
.not .ikon { flex: none; width: 1.1rem; height: 1.1rem; color: var(--altin); margin-top: 0.15rem; }

/* ================================================================ CEKMECE */
.perde {
  position: fixed; inset: 0; z-index: 90;
  background: rgb(10 10 10 / 0.42);
  opacity: 0; visibility: hidden;
  transition: opacity var(--gecis), visibility var(--gecis);
}
.perde.acik { opacity: 1; visibility: visible; }

.cekmece {
  position: fixed; inset-block: 0; inset-inline-end: 0; z-index: 100;
  display: flex; flex-direction: column;
  width: min(23rem, 100vw);
  background: var(--beyaz);
  box-shadow: var(--golge-lg);
  transform: translateX(100%);
  transition: transform var(--gecis-yavas);
}
.cekmece.acik { transform: translateX(0); }
.cekmece-sol { inset-inline: 0 auto; transform: translateX(-100%); width: min(21rem, 88vw); }
.cekmece-sol.acik { transform: translateX(0); }
.cekmece-ust {
  display: flex; align-items: center; justify-content: space-between; gap: var(--b-3);
  padding: var(--b-4) var(--b-5);
  border-bottom: 1px solid var(--cizgi);
}
.cekmece-govde { flex: 1; overflow-y: auto; padding: var(--b-4) var(--b-5); }

.ikon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.75rem; height: 2.75rem;
  background: none; border: 0;
  color: var(--murekkep);
  cursor: pointer;
  transition: color var(--gecis);
}
.ikon-btn:hover { color: var(--altin); }
.ikon-btn .ikon { width: 1.25rem; height: 1.25rem; }

/* ============================================================= YUKARI CIK */
.yukari-cik {
  position: fixed;
  inset-block-end: var(--b-6);
  inset-inline-end: var(--b-5);
  z-index: 60;
  width: 2.75rem; height: 2.75rem;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--murekkep); color: #fff;
  border: 0; cursor: pointer;
  opacity: 0; visibility: hidden;
  transform: translateY(0.5rem);
  transition: opacity var(--gecis), visibility var(--gecis), transform var(--gecis), background var(--gecis);
}
.yukari-cik.gorunur { opacity: 1; visibility: visible; transform: none; }
.yukari-cik:hover { background: var(--altin); }

/* ============================================================ ZENGIN METIN */
.metin { max-width: var(--genislik-dar); font-size: var(--olcek-md); line-height: 1.8; color: var(--murekkep-2); }
.metin > * + * { margin-top: var(--b-5); }
.metin h2 { margin-top: var(--b-12); font-size: var(--olcek-lg); color: var(--murekkep); font-weight: 500; }
.metin h3 { margin-top: var(--b-8); font-size: var(--olcek-md); font-weight: 600; color: var(--murekkep); }
.metin ul, .metin ol { padding-inline-start: 1.3em; display: grid; gap: var(--b-2); }
.metin ul { list-style: none; }
.metin ul > li { position: relative; }
.metin ul > li::before {
  content: ''; position: absolute; inset-inline-start: -1em; top: 0.75em;
  width: 4px; height: 1px; background: var(--altin);
}
.metin ol > li::marker { color: var(--altin); font-family: var(--disp); }
.metin img { margin-block: var(--b-8); }
.metin table { width: 100%; border-collapse: collapse; font-size: var(--olcek-cap); }
.metin th, .metin td { padding: var(--b-3); border-bottom: 1px solid var(--cizgi); text-align: start; }
.metin th { font-weight: 600; color: var(--murekkep); }
.metin blockquote { padding-inline-start: var(--b-5); border-inline-start: 2px solid var(--altin); }
.metin strong { color: var(--murekkep); }
.metin a { color: var(--altin); }

/* ================================================================= GALERI */
.galeri { display: grid; gap: var(--b-3); }
.galeri-ana { aspect-ratio: 1; background: var(--kagit); display: grid; place-items: center; }
.galeri-ana img { width: 100%; height: 100%; object-fit: contain; padding: clamp(1.5rem, 4vw, 3.5rem); }
.galeri-kucuk { display: flex; flex-wrap: wrap; gap: var(--b-2); }
.galeri-kucuk button {
  width: 4.5rem; height: 4.5rem;
  padding: 0.35rem;
  background: var(--kagit);
  border: 1px solid transparent;
  cursor: pointer;
  transition: border-color var(--gecis);
}
.galeri-kucuk button:hover { border-color: var(--cizgi-koyu); }
.galeri-kucuk button[aria-current="true"] { border-color: var(--altin); }
.galeri-kucuk img { width: 100%; height: 100%; object-fit: contain; }

/* ============================================================== BOS DURUM */
.bos-durum {
  display: grid; gap: var(--b-4); justify-items: center;
  padding: var(--b-20) var(--b-4);
  text-align: center;
  color: var(--murekkep-2);
}
.bos-durum .ikon { width: 2rem; height: 2rem; color: var(--cizgi-koyu); }