/* ==========================================================================
   VitrinGold — yerlesim ve sayfa duzenleri
   ========================================================================== */

/* ================================================================= DUYURU */
/* Sayfadaki tek koyu bant: acik baslikla arasindaki kontrast basligi
   canli tutuyor, renk oyununa gerek kalmiyor. */
.duyuru {
  background: var(--murekkep);
  color: #97948e;
  text-align: center;
  font-family: var(--disp);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.duyuru-ic {
  display: flex; align-items: center; justify-content: center; gap: var(--b-2);
  min-height: 2.4rem;
}
.duyuru .ikon { width: 0.95rem; height: 0.95rem; color: var(--altin); flex: none; }

/* ================================================================== BASLIK */
.ust {
  position: sticky; top: 0; z-index: 60;
  background: linear-gradient(180deg, var(--beyaz) 0%, #fcf9f3 100%);
  border-bottom: 1px solid var(--cizgi);
  transition: box-shadow var(--gecis);
}
.ust.kaydirildi { box-shadow: 0 16px 34px -28px rgb(10 10 10 / 0.45); }
.ust-ic { display: flex; align-items: center; gap: var(--b-6); min-height: 5.6rem; }

.marka { display: inline-flex; align-items: center; text-decoration: none; }
/* Gercek marka logosu; en-boy orani korunur, yukseklikten olceklenir */
.marka-logo { width: auto; height: 2.1rem; }

/* Cercevesiz arama: yalnizca alt cizgi */
.ust-arama { display: none; flex: 1; max-width: 24rem; margin-inline: auto; }
.ust-arama .girdi {
  min-height: 2.6rem;
  padding: 0.5rem 0 0.5rem 2rem;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--cizgi-koyu);
  color: var(--murekkep);
  font-size: var(--olcek-sm);
}
.ust-arama .girdi::placeholder { color: var(--murekkep-3); letter-spacing: 0.02em; }
.ust-arama .girdi:hover { border-color: var(--murekkep-3); }
.ust-arama .girdi:focus { box-shadow: none; border-bottom-color: var(--altin); }
.ust-arama .ikon { inset-inline-start: 0; width: 1rem; height: 1rem; color: var(--murekkep-3); }

.ust-eylem {
  margin-inline-start: auto;
  display: flex; align-items: center; gap: var(--b-4);
  font-family: var(--disp);
  font-size: 11px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
}
.ust-eylem a { text-decoration: none; color: var(--murekkep-2); }
.ust-eylem a:hover { color: var(--altin-koyu); }
.ust .ikon-btn { color: var(--murekkep); }
.ust .ikon-btn:hover { color: var(--altin-koyu); }

.ust-telefon { display: none; align-items: center; gap: 0.55rem; color: var(--murekkep) !important; }
.ust-telefon .ikon { width: 0.95rem; height: 0.95rem; color: var(--altin); }

/* Sepet ve hesap ikonlari */
.ust-hesap { display: none; }
.ust-sepet { position: relative; }
.sepet-rozet {
  position: absolute; top: -0.28rem; inset-inline-end: -0.34rem;
  min-width: 1.05rem; height: 1.05rem; padding-inline: 0.22rem;
  display: grid; place-items: center;
  background: var(--altin); color: var(--murekkep);
  border-radius: 999px;
  font-family: var(--disp);
  font-size: 9.5px; font-weight: 700; letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}
.sepet-rozet-mobil {
  position: static;
  min-width: 1.3rem; height: 1.3rem;
  font-size: 10.5px;
}

/* Tek eylem: koyu dolgu — acik basligin odak noktasi */
.ust-iletisim {
  display: none;
  padding: 0.72rem 1.35rem;
  background: var(--murekkep);
  color: var(--beyaz) !important;
  transition: background var(--gecis), color var(--gecis);
}
.ust-iletisim:hover { background: var(--altin); color: var(--murekkep) !important; }
.ust-menu-btn, .ust-arama-btn { display: inline-flex; }

/* --- ana menu: ayri, yapiskan cubuk --- */
.menu-bar {
  display: none;
  position: sticky;
  top: 5.6rem;                 /* baslik yuksekligi kadar asagida yapisir */
  z-index: 55;
  background: var(--beyaz);
  border-bottom: 1px solid rgb(183 136 54 / 0.32);
}
.ana-menu-liste { display: flex; flex-wrap: wrap; align-items: stretch; }
.ana-menu-liste > li { position: relative; }
/* Yedi menu ogesi dar masaustunde tek satira sigmiyor; harf araligi ve
   ic bosluk kirilima gore aciliyor (bkz. 80rem / 90rem). */
.ana-menu-liste > li > a {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 1.15rem 0.85rem;
  font-family: var(--disp);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--murekkep-2);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  transition: color var(--gecis), border-color var(--gecis);
}
.ana-menu-liste > li:first-child > a { padding-inline-start: 0; }
.ana-menu-liste > li > a:hover,
.ana-menu-liste > li > a[aria-current] {
  color: var(--murekkep);
  border-bottom-color: var(--altin);
}

.menu-rozet {
  font-family: var(--disp);
  font-size: 8px; font-weight: 600; letter-spacing: 0.12em;
  color: var(--altin);
  border: 1px solid rgb(183 136 54 / 0.5);
  padding: 0.12rem 0.34rem;
}

.menu-panel {
  position: absolute; inset-inline-start: 0; top: 100%; z-index: 70;
  min-width: 15rem;
  padding: var(--b-2);
  background: var(--beyaz);
  border: 1px solid var(--cizgi);
  box-shadow: 0 26px 50px -26px rgb(10 10 10 / 0.5);
  opacity: 0; visibility: hidden;
  transform: translateY(-6px);
  transition: opacity var(--gecis), visibility var(--gecis), transform var(--gecis);
}
.menu-altli:hover .menu-panel,
.menu-altli:focus-within .menu-panel { opacity: 1; visibility: visible; transform: none; }
.menu-panel a {
  display: flex; align-items: center; justify-content: space-between; gap: var(--b-4);
  padding: 0.62rem 0.8rem;
  font-size: var(--olcek-cap);
  color: var(--murekkep-2);
  text-decoration: none;
  transition: background var(--gecis), color var(--gecis);
}
.menu-panel a:hover { background: var(--kagit); color: var(--murekkep); }
.menu-panel .sayi { font-family: var(--disp); font-size: 11px; font-weight: 600; color: var(--murekkep-3); }
.menu-tumu { color: var(--altin) !important; font-weight: 600; }

/* --- mobil menu --- */
.mobil-menu-liste > li { border-bottom: 1px solid var(--cizgi); }
.mobil-menu-baslik {
  display: flex; align-items: center; justify-content: space-between; gap: var(--b-3);
  width: 100%;
  padding: var(--b-4) 0;
  background: none; border: 0;
  font-family: var(--disp);
  font-size: 12.5px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--murekkep);
  text-align: start; text-decoration: none; cursor: pointer;
}
.mobil-menu-baslik .ikon { width: 1rem; height: 1rem; color: var(--murekkep-3); transition: transform var(--gecis); }
.mobil-menu-baslik[aria-expanded="true"] .ikon { transform: rotate(180deg); color: var(--altin); }
.mobil-alt { display: none; padding-bottom: var(--b-3); }
.mobil-alt.acik { display: grid; gap: 1px; }
.mobil-alt a {
  display: flex; justify-content: space-between; gap: var(--b-3);
  padding: var(--b-2) var(--b-3);
  font-size: var(--olcek-cap); color: var(--murekkep-2); text-decoration: none;
}
.mobil-alt a:hover { background: var(--kagit); }

.ust-arama.gorunur {
  display: flex;
  position: absolute; inset-inline: var(--kenar); top: 1.1rem; z-index: 5;
  max-width: none; background: var(--beyaz);
}

/* ==================================================================== HERO */
.hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(2.5rem, 5vw, 4.5rem) clamp(2.5rem, 4vw, 4rem);
  /* Sicak sampanya zemin: sag ustte yogun, sola dogru beyaza cozulur */
  background:
    radial-gradient(1100px 620px at 88% 6%, #f6e6c8 0%, rgb(250 244 232 / 0.75) 34%, transparent 68%),
    linear-gradient(180deg, #fdfaf4 0%, var(--beyaz) 62%);
}
/* Ikinci, daha kucuk ve doygun isik odagi — derinlik verir */
.hero::before {
  content: '';
  position: absolute; top: -14%; inset-inline-end: 4%;
  width: min(460px, 46vw); aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgb(183 136 54 / 0.20) 0%, rgb(183 136 54 / 0.06) 45%, transparent 70%);
  pointer-events: none;
}
/* Alt kenarda ince altin hairline — bolum gecisini keskinlestirir */
.hero::after {
  content: '';
  position: absolute; inset-inline: 0; bottom: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--altin) 22%, var(--altin-acik) 50%, var(--altin) 78%, transparent);
  pointer-events: none;
}
.hero-ic { position: relative; display: grid; gap: clamp(2.5rem, 5vw, 4rem); align-items: center; }

.hero-metin > * { animation: yukselt 0.7s cubic-bezier(0.22, 0.61, 0.36, 1) both; }
.hero-metin > *:nth-child(2) { animation-delay: 0.08s; }
.hero-metin > *:nth-child(3) { animation-delay: 0.16s; }
.hero-metin > *:nth-child(4) { animation-delay: 0.24s; }
.hero-metin > *:nth-child(5) { animation-delay: 0.32s; }
@keyframes yukselt { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

.hero h1 { font-size: var(--olcek-3xl); font-weight: 300; margin-top: var(--b-5); max-width: 13ch; }
.hero h1 em { color: var(--altin); }
.hero h1 u { text-decoration: none; position: relative; white-space: nowrap; }
.hero h1 u::after {
  content: ''; position: absolute; inset-inline: 0; bottom: 0.08em; height: 0.34em;
  background: linear-gradient(90deg, rgb(183 136 54 / 0.28), rgb(183 136 54 / 0.14));
  z-index: -1;
}
.hero-metin > p { color: var(--murekkep-2); font-size: var(--olcek-md); max-width: 44ch; margin: var(--b-6) 0 var(--b-8); }
.hero-eylem { gap: var(--b-3); }
/* Ikincil eylem altin cizgiyle: giriste iki renk birden calisir */
.hero-eylem .btn-cizgi { border-color: var(--altin); color: var(--altin-koyu); }
.hero-eylem .btn-cizgi:hover { background: var(--altin); border-color: var(--altin); color: #fff; }

.hero-olcu {
  display: flex; flex-wrap: wrap; gap: clamp(2rem, 5vw, 4.5rem);
  margin-top: clamp(2.5rem, 4vw, 3.5rem);
  padding-top: var(--b-6);
  border-top: 1px solid var(--cizgi);
}
.hero-olcu div { display: grid; gap: 0.3rem; }
.hero-olcu dt {
  font-family: var(--disp); font-size: 10px; font-weight: 600;
  letter-spacing: 0.24em; text-transform: uppercase; color: var(--murekkep-3);
}
.hero-olcu dd { font-family: var(--disp); font-size: 1.8rem; font-weight: 300; letter-spacing: -0.03em; margin: 0; }
.hero-olcu div:first-child dd { color: var(--altin); font-weight: 500; }

/* Katmanli urun kompozisyonu */
.hero-vitrin { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(0.8rem, 1.6vw, 1.2rem); }
.hero-kart {
  position: relative;
  background: var(--beyaz);
  border: 1px solid var(--cizgi);
  overflow: hidden;
  text-decoration: none;
  color: var(--murekkep);
  box-shadow: 0 14px 34px -26px rgb(10 10 10 / 0.35);
  animation: yukselt 0.8s cubic-bezier(0.22, 0.61, 0.36, 1) both;
  transition: border-color var(--gecis), box-shadow var(--gecis), transform var(--gecis);
}
.hero-kart:hover { border-color: var(--altin); box-shadow: 0 24px 48px -26px rgb(10 10 10 / 0.4); transform: translateY(-5px); color: var(--murekkep); }
/* Ilk kart one cikar: altin cerceve ve rozet */
.hero-kart:nth-child(1) {
  grid-row: span 2;
  animation-delay: 0.1s;
  border-color: var(--altin);
  box-shadow: 0 20px 44px -24px rgb(183 136 54 / 0.55);
}
.hero-kart:nth-child(1)::before {
  content: 'ÇOK SATAN';
  position: absolute; top: 0; inset-inline-start: 0; z-index: 2;
  background: var(--murekkep); color: var(--altin-acik);
  font-family: var(--disp); font-size: 9.5px; font-weight: 600;
  letter-spacing: 0.18em; padding: 0.45rem 0.8rem;
}
.hero-kart:nth-child(2) { animation-delay: 0.22s; }
.hero-kart:nth-child(3) { animation-delay: 0.34s; }
.hero-kart img { width: 100%; aspect-ratio: 1; object-fit: contain; padding: clamp(1rem, 2.4vw, 2rem); transition: transform var(--gecis-yavas); }
.hero-kart:nth-child(1) img { aspect-ratio: auto; height: 100%; }
.hero-kart:hover img { transform: scale(1.04); }
.hero-kart figcaption {
  position: absolute; inset-inline: 0; bottom: 0;
  padding: 1.1rem 0.95rem 0.85rem;
  background: linear-gradient(transparent, rgb(255 255 255 / 0.97) 34%);
  font-family: var(--disp); font-size: 11.5px; font-weight: 500; letter-spacing: 0.01em;
  color: var(--murekkep-2);
}
.hero-kart .f {
  color: var(--altin);
  display: block;
  margin-top: 0.22rem;
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

/* ================================================================ SAYFA UST */
.sayfa-ust { padding-top: var(--b-5); }

/* ================================================================ KATEGORI */
.kategori-giris { padding-block: clamp(2.5rem, 5vw, 4rem) var(--b-6); }
.alt-kategori-serit { display: flex; flex-wrap: wrap; gap: var(--b-2); justify-content: center; }
.bolum-basligi-sol + .alt-kategori-serit { justify-content: flex-start; }

.liste-arac {
  display: flex; align-items: center; gap: var(--b-3);
  padding-block: var(--b-4);
  border-bottom: 1px solid var(--cizgi);
  margin-bottom: 0;
}
.liste-arac label {
  font-family: var(--disp); font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--murekkep-3);
}
.liste-arac .secim { width: auto; min-width: 12rem; min-height: 2.5rem; padding-block: 0.4rem; }

/* =================================================================== URUN */
.urun-bolum { padding-top: var(--b-6); }
.urun-duzen { display: grid; gap: clamp(2rem, 4vw, 3.5rem); align-items: start; }
.urun-bilgi { display: grid; gap: var(--b-5); align-content: start; }
.urun-bilgi h1 { font-size: var(--olcek-xl); font-weight: 400; }
.urun-kategori { text-decoration: none; }

.urun-fiyat { display: grid; gap: 0.3rem; padding-block: var(--b-2); }
.urun-fiyat .tutar {
  font-family: var(--disp);
  font-size: clamp(1.9rem, 1.4rem + 1.8vw, 2.6rem);
  font-weight: 500; letter-spacing: -0.035em;
  color: var(--altin);
}
.urun-fiyat .havale { font-size: var(--olcek-cap); color: var(--murekkep-2); }
.urun-fiyat .havale strong { color: var(--murekkep); }

.kunye-tablo { width: 100%; border-collapse: collapse; font-size: var(--olcek-cap); }
.kunye-tablo th, .kunye-tablo td { padding: var(--b-3) 0; border-bottom: 1px solid var(--cizgi); text-align: start; }
.kunye-tablo th {
  width: 42%; font-weight: 500;
  font-family: var(--disp); font-size: 10.5px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--murekkep-3);
}
.kunye-tablo td { font-family: var(--disp); font-weight: 500; }
.kunye-tablo tr:last-child th, .kunye-tablo tr:last-child td { border-bottom: 0; }

.urun-eylem { gap: var(--b-3); }
.urun-guvence { display: grid; gap: var(--b-3); }
.urun-guvence li { display: flex; align-items: center; gap: var(--b-3); font-size: var(--olcek-sm); color: var(--murekkep-2); }
.urun-guvence .ikon { width: 1.1rem; height: 1.1rem; color: var(--altin); flex: none; }

/* ============================================================== KOLEKSIYON */
.kol { display: grid; border-block: 1px solid var(--cizgi); }
.kol-g { background: var(--kagit); display: grid; place-items: center; padding: clamp(2.5rem, 6vw, 5rem); min-height: 22rem; }
.kol-g img { max-height: 26rem; object-fit: contain; }
.kol-m { display: grid; align-content: center; padding: clamp(2.5rem, 6vw, 5.5rem) clamp(1.4rem, 5vw, 4.5rem); }
.kol-m h2 { font-size: var(--olcek-2xl); font-weight: 300; margin: var(--b-4) 0 var(--b-5); }
.kol-m p { color: var(--murekkep-2); max-width: 42ch; margin-bottom: var(--b-8); }
.kol-m .btn { justify-self: start; }

/* ================================================================= GUVENCE */
.guven { border-bottom: 1px solid var(--cizgi); }
.guven-ic {
  display: grid; gap: 1px; background: var(--cizgi);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
}
.guven-ic > div { background: var(--beyaz); padding: var(--b-8) clamp(1.2rem, 2.2vw, 2rem); text-align: center; }
.guven-ic dt { font-family: var(--disp); font-size: 0.95rem; font-weight: 600; letter-spacing: -0.015em; margin-bottom: 0.4rem; }
.guven-ic dd { font-size: var(--olcek-sm); color: var(--murekkep-2); margin: 0; }

/* ================================================================= STATIK */
.statik-giris { padding-block: clamp(3rem, 6vw, 5rem) var(--b-6); }
.statik-govde { padding-top: var(--b-6); }
.iletisim-duzen { display: grid; gap: clamp(2.5rem, 5vw, 4rem); align-items: start; }
.iletisim-kartlar { display: grid; gap: var(--b-8); align-content: start; }
.iletisim-kartlar .ozellik { display: flex; gap: var(--b-3); align-items: flex-start; }
.iletisim-kartlar .ikon { flex: none; width: 1.3rem; height: 1.3rem; color: var(--altin); }
.iletisim-kartlar h3 { font-family: var(--disp); font-size: var(--olcek-cap); font-weight: 600; }
.iletisim-kartlar p { font-size: var(--olcek-sm); color: var(--murekkep-2); }
.iletisim-form { display: grid; gap: var(--b-4); padding: clamp(1.5rem, 3vw, 2.5rem); background: var(--kagit); }
.iletisim-form h2 { font-size: var(--olcek-lg); font-weight: 500; }
.iletisim-form .btn { justify-self: start; }

.sss-grup { margin-top: var(--b-12); }
.sss-grup:first-of-type { margin-top: 0; }
.sss-grup > h2 {
  font-family: var(--disp); font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.28em; text-transform: uppercase; color: var(--altin);
  margin-bottom: var(--b-3);
}

/* ================================================================== ARAMA */
.arama-genis { max-width: 32rem; margin: 0 auto var(--b-10); }
.arama-baslik {
  margin-top: var(--b-12); margin-bottom: var(--b-5);
  font-family: var(--disp); font-size: var(--olcek-md); font-weight: 600; letter-spacing: -0.02em;
}
.arama-baslik span { color: var(--murekkep-3); font-weight: 400; }

/* =================================================================== HATA */
.hata-sayfa { display: grid; gap: var(--b-5); justify-items: center; text-align: center; padding-block: var(--b-24); }
.hata-sayfa .arama { max-width: 24rem; }
.hata-baglantilar { gap: var(--b-2); justify-content: center; }

/* ================================================================ ALT BILGI */
.alt { margin-top: 0; background: var(--murekkep); color: #a5a39e; font-size: var(--olcek-cap); }
.alt h2 { color: #fff; }
.alt a { color: #a5a39e; text-decoration: none; }
.alt a:hover { color: var(--altin-acik); }
.alt .marka-logo { height: 2.8rem; }

.alt-bulten {
  display: grid; gap: var(--b-5);
  padding-block: var(--b-12);
  border-bottom: 1px solid rgb(255 255 255 / 0.12);
}
.alt-bulten h2 { font-size: var(--olcek-lg); font-weight: 300; }
.alt-bulten p { color: #7e7c77; margin-top: var(--b-2); }
.alt-bulten-form { display: flex; flex-wrap: wrap; gap: var(--b-2); align-self: center; }
.alt-bulten-form .girdi {
  flex: 1 1 14rem;
  background: transparent;
  border-color: rgb(255 255 255 / 0.22);
  color: #fff;
}
.alt-bulten-form .girdi::placeholder { color: #6f6d68; }
.alt-bulten-form .btn { background: var(--altin); border-color: var(--altin); color: #fff; }
.alt-bulten-form .btn:hover { background: transparent; color: var(--altin-acik); border-color: var(--altin-acik); }

.alt-izgara {
  display: grid; gap: var(--b-8);
  padding-block: var(--b-12);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr));
}
.alt-marka { grid-column: 1 / -1; display: grid; gap: var(--b-4); align-content: start; }
.alt-slogan { color: #7e7c77; max-width: 32ch; }
.alt-iletisim { display: grid; gap: var(--b-2); }
.alt-iletisim li { display: flex; align-items: center; gap: var(--b-2); }
.alt-iletisim .ikon { width: 1rem; height: 1rem; color: var(--altin-acik); flex: none; }
.alt-sosyal { display: flex; gap: var(--b-3); }
.alt-sosyal a { display: inline-flex; }
.alt-sosyal .ikon { width: 1.2rem; height: 1.2rem; }

.alt-sutun h2 {
  margin-bottom: var(--b-4);
  font-family: var(--disp); font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.24em; text-transform: uppercase; color: #6f6d68;
}
.alt-sutun ul { display: grid; gap: var(--b-2); }

.alt-son {
  display: grid; gap: var(--b-2);
  padding-block: var(--b-6);
  border-top: 1px solid rgb(255 255 255 / 0.12);
  font-size: var(--olcek-sm);
  color: #6f6d68;
}
.alt-not { font-size: var(--olcek-xs); }

/* ============================================================== HIZMETLER */
.hizmet-giris { padding-block: clamp(2.5rem, 5vw, 4.5rem) var(--b-6); }
.hizmet-giris h1 { max-width: 18ch; }
.hizmet-ozet {
  max-width: 56ch;
  margin-top: var(--b-5);
  font-size: var(--olcek-lg);
  line-height: 1.65;
  color: var(--murekkep-2);
}

/* --- anasayfadaki hizmet kartlari --- */
.hizmet-izgara {
  display: grid;
  gap: 1px;
  background: var(--cizgi);
  border: 1px solid var(--cizgi);
}
.hizmet-kart {
  display: grid;
  align-content: start;
  gap: var(--b-3);
  padding: clamp(1.8rem, 3vw, 2.6rem);
  background: var(--beyaz);
  color: var(--murekkep);
  text-decoration: none;
  transition: background var(--gecis);
}
.hizmet-kart:hover { background: var(--kagit); }
.hizmet-kart h3 { font-size: 1.22rem; font-weight: 500; letter-spacing: -0.015em; }
.hizmet-kart p { color: var(--murekkep-2); font-size: var(--olcek-sm); line-height: 1.65; }
.hizmet-kart-ok {
  display: inline-flex; align-items: center; gap: 0.35rem;
  margin-top: var(--b-2);
  font-family: var(--disp);
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--altin-koyu);
}
.hizmet-kart-ok .ikon { width: 0.9rem; height: 0.9rem; transition: transform var(--gecis); }
.hizmet-kart:hover .hizmet-kart-ok .ikon { transform: translateX(3px); }

/* --- hesaplama araci --- */
.arac-panel {
  padding: clamp(1.6rem, 3.4vw, 3rem);
  background: var(--kagit);
  border: 1px solid var(--cizgi);
}
.arac-baslik { max-width: 52ch; margin-bottom: var(--b-8); }
.arac-baslik h2 { font-size: clamp(1.5rem, 3vw, 2rem); margin-block: var(--b-3) var(--b-3); }
.arac-baslik p { color: var(--murekkep-2); }

.arac-govde { display: grid; gap: var(--b-8); align-items: start; }
.arac-girdiler { display: grid; gap: var(--b-6); }
.ikili-alan { display: grid; gap: var(--b-4); grid-template-columns: 1fr 1fr; }
.arac-girdiler fieldset { border: 0; padding: 0; margin: 0; }
.arac-girdiler legend,
.arac-girdiler .alan > label {
  display: block;
  margin-bottom: var(--b-3);
  font-family: var(--disp);
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--murekkep-3);
}

.secenek-grubu { display: grid; gap: 1px; background: var(--cizgi); border: 1px solid var(--cizgi); }
.secenek { display: block; background: var(--beyaz); cursor: pointer; transition: background var(--gecis); }
.secenek:hover { background: var(--kagit-2); }
.secenek input { position: absolute; opacity: 0; pointer-events: none; }
.secenek-govde {
  display: flex; align-items: center; justify-content: space-between; gap: var(--b-4);
  padding: 0.95rem 1.1rem;
  border-inline-start: 3px solid transparent;
}
.secenek input:checked + .secenek-govde { border-inline-start-color: var(--altin); background: var(--altin-sis); }
.secenek input:focus-visible + .secenek-govde { outline: 2px solid var(--altin); outline-offset: -2px; }
.secenek-ad { font-family: var(--disp); font-weight: 500; }
.secenek-not { font-size: var(--olcek-xs); color: var(--murekkep-3); font-variant-numeric: tabular-nums; }

.tutar-girdi { position: relative; display: flex; align-items: center; }
.tutar-girdi .girdi {
  padding-inline-end: 2.6rem;
  font-family: var(--disp); font-size: 1.15rem; font-weight: 600;
  font-variant-numeric: tabular-nums;
  -moz-appearance: textfield;
}
.tutar-girdi .girdi::-webkit-outer-spin-button,
.tutar-girdi .girdi::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.tutar-birim {
  position: absolute; inset-inline-end: 1rem;
  color: var(--murekkep-3); font-family: var(--disp); font-weight: 600;
  pointer-events: none;
}

.hizli-tutar { display: flex; flex-wrap: wrap; gap: var(--b-2); margin-top: var(--b-3); }
.hizli-tutar button {
  padding: 0.42rem 0.8rem;
  background: var(--beyaz);
  border: 1px solid var(--cizgi-koyu);
  color: var(--murekkep-2);
  font-family: var(--disp); font-size: var(--olcek-xs); font-weight: 600;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: background var(--gecis), border-color var(--gecis), color var(--gecis);
}
.hizli-tutar button:hover { background: var(--murekkep); border-color: var(--murekkep); color: var(--beyaz); }

.arac-sonuc {
  padding: clamp(1.4rem, 2.6vw, 2rem);
  background: var(--murekkep);
  color: #d8d5cf;
}
.arac-sonuc .etiket { color: var(--altin-acik); }
.sonuc-ana { display: flex; align-items: baseline; gap: 0.5rem; margin-block: var(--b-3) 0.35rem; }
.sonuc-deger {
  font-family: var(--disp);
  font-size: clamp(2.4rem, 6vw, 3.4rem);
  font-weight: 300;
  letter-spacing: -0.035em;
  line-height: 1;
  color: var(--beyaz);
  font-variant-numeric: tabular-nums;
}
.sonuc-birim { font-family: var(--disp); font-size: 1rem; color: var(--altin-acik); }
.sonuc-alt { font-size: var(--olcek-xs); color: #97948e; }

.sonuc-detay { display: grid; gap: var(--b-3); margin-top: var(--b-6); padding-top: var(--b-5); border-top: 1px solid rgb(255 255 255 / 0.12); }
.sonuc-detay > div { display: flex; justify-content: space-between; gap: var(--b-4); }
.sonuc-detay dt { font-size: var(--olcek-sm); color: #97948e; }
.sonuc-detay dd { font-family: var(--disp); font-weight: 600; color: var(--beyaz); font-variant-numeric: tabular-nums; }

.sonuc-banka-not { margin-top: var(--b-4); font-size: var(--olcek-xs); color: var(--altin-acik); }
.arac-panel > .not { margin-top: var(--b-6); }

/* --- numarali adim listesi --- */
.adim-listesi { display: grid; gap: 1px; background: var(--cizgi); border: 1px solid var(--cizgi); }
.adim-listesi li {
  display: flex; gap: var(--b-4);
  padding: clamp(1.4rem, 2.6vw, 2rem);
  background: var(--beyaz);
}
.adim-no {
  flex: none;
  font-family: var(--disp);
  font-size: 1.5rem; font-weight: 300;
  letter-spacing: -0.03em;
  color: var(--altin);
  font-variant-numeric: tabular-nums;
}
.adim-listesi h3 { font-size: 1.05rem; font-weight: 500; margin-bottom: var(--b-2); }
.adim-listesi p { color: var(--murekkep-2); font-size: var(--olcek-sm); line-height: 1.7; }

/* --- not listesi --- */
.not-listesi { display: grid; gap: var(--b-4); }
.not-listesi li { display: flex; gap: var(--b-3); align-items: flex-start; }
.not-listesi .ikon { flex: none; width: 1.05rem; height: 1.05rem; margin-top: 0.28rem; color: var(--altin); }
.not-listesi span { color: var(--murekkep-2); line-height: 1.7; }

/* --- destek kapanisi --- */
.destek-kapanis {
  display: grid; gap: var(--b-6);
  padding: clamp(1.8rem, 3.4vw, 2.8rem);
  background: var(--kagit);
  border: 1px solid var(--cizgi);
}
.destek-kapanis h2 { font-size: 1.5rem; margin-block: var(--b-2) var(--b-2); }
.destek-kapanis p { color: var(--murekkep-2); }

/* --- guven seridi --- */
.bolum-ince { padding-block: clamp(1.8rem, 3.4vw, 2.8rem); }
.guven-seridi {
  display: grid;
  gap: var(--b-5) var(--b-4);
  grid-template-columns: repeat(2, 1fr);
}
.guven-seridi li {
  display: grid;
  gap: 0.32rem;
  justify-items: center;
  text-align: center;
  padding-inline: var(--b-2);
}
.guven-seridi .ikon { width: 1.5rem; height: 1.5rem; color: var(--altin); margin-bottom: 0.2rem; }
.guven-baslik {
  font-family: var(--disp);
  font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--murekkep);
}
.guven-metin { font-size: var(--olcek-xs); color: var(--murekkep-3); line-height: 1.5; }

/* --- ozellik / guvence seridi --- */
.ozellik-serit {
  display: grid; gap: 1px;
  background: var(--cizgi);
  border: 1px solid var(--cizgi);
}
.ozellik-serit li {
  display: flex; gap: var(--b-4); align-items: flex-start;
  padding: clamp(1.3rem, 2.4vw, 1.9rem);
  background: var(--beyaz);
}
.ozellik-serit .ikon { flex: none; width: 1.5rem; height: 1.5rem; color: var(--altin); }
.ozellik-serit h3 {
  font-family: var(--disp);
  font-size: 0.95rem; font-weight: 600;
  margin-bottom: 0.3rem;
}
.ozellik-serit p { font-size: var(--olcek-sm); color: var(--murekkep-2); line-height: 1.6; }

/* --- sekmeler --- */
.sekme-sayi {
  margin-inline-start: 0.35rem;
  color: var(--murekkep-3);
  font-variant-numeric: tabular-nums;
}
.sekme-liste button[aria-selected="true"] .sekme-sayi { color: var(--altin-acik); }
.sekme-liste {
  display: flex; flex-wrap: wrap; gap: var(--b-2);
  margin-bottom: var(--b-6);
}
.sekme-liste button {
  padding: 0.6rem 1.1rem;
  background: var(--beyaz);
  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);
}
.sekme-liste button:hover { border-color: var(--murekkep-3); }
.sekme-liste button[aria-selected="true"] {
  background: var(--murekkep); border-color: var(--murekkep); color: var(--beyaz);
}

/* Kurumsal kunye tablosu — urun kunyesinden daha genis etiket sutunu */
.kunye-genis th { width: 42%; vertical-align: top; }
.kunye-genis td { font-variant-numeric: tabular-nums; }

/* ====================================================== HESAP / FORMLAR */
/* Hesap sayfasi kap-dar'a sigmayacak kadar genis; kendi olcusunu kullanir */
.hesap-kap { max-width: 66rem; }
.hesap-duzen { display: grid; gap: var(--b-8); align-items: start; margin-top: var(--b-8); }

.hesap-form { padding: clamp(1.5rem, 3vw, 2.4rem); background: var(--kagit); border: 1px solid var(--cizgi); }
.form-duzen { display: grid; gap: var(--b-5); }
.form-duzen .alan > label,
.hesap-yan h2 + .not-listesi { display: block; }
.form-duzen .alan > label {
  display: block;
  margin-bottom: var(--b-2);
  font-family: var(--disp);
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--murekkep-3);
}
.form-duzen .girdi:disabled,
.form-duzen .secim:disabled {
  background: var(--kagit-2);
  color: var(--murekkep-3);
  cursor: not-allowed;
}
.form-satir { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--b-3); align-items: center; }

.onay-kutu { display: flex; gap: var(--b-3); align-items: flex-start; font-size: var(--olcek-sm); color: var(--murekkep-2); }
.onay-kutu input { margin-top: 0.22rem; accent-color: var(--altin); flex: none; }
.onay-kutu a { color: var(--murekkep); }

.hesap-yan { padding: clamp(1.5rem, 3vw, 2.4rem); border: 1px solid var(--cizgi); }
.hesap-yan h2 { font-size: 1.15rem; margin-bottom: var(--b-5); }
.hesap-yan-eylem { display: grid; gap: var(--b-3); margin-top: var(--b-7); padding-top: var(--b-6); border-top: 1px solid var(--cizgi); }
.hesap-yan-eylem p { color: var(--murekkep-2); font-size: var(--olcek-sm); margin-bottom: var(--b-2); }
.hesap-yan-eylem .btn-genis { width: 100%; }

/* ========================================================= SIPARIS TAKIBI */
.takip-panel { padding: clamp(1.5rem, 3vw, 2.4rem); background: var(--kagit); border: 1px solid var(--cizgi); }
.takip-sonuc {
  padding: var(--b-4);
  background: var(--altin-sis);
  border-inline-start: 3px solid var(--altin);
  font-size: var(--olcek-sm);
  line-height: 1.65;
  color: var(--murekkep-2);
}
.takip-sonuc strong { color: var(--murekkep); }

.durum-semasi { display: grid; gap: 1px; background: var(--cizgi); border: 1px solid var(--cizgi); }
.durum-semasi li {
  position: relative;
  display: grid; gap: var(--b-2);
  padding: clamp(1.4rem, 2.6vw, 2rem);
  background: var(--beyaz);
}
.durum-ikon {
  display: grid; place-items: center;
  width: 2.6rem; height: 2.6rem;
  background: var(--altin-sis);
  color: var(--altin-koyu);
}
.durum-ikon .ikon { width: 1.2rem; height: 1.2rem; }
.durum-no {
  position: absolute; top: clamp(1.4rem, 2.6vw, 2rem); inset-inline-end: clamp(1.4rem, 2.6vw, 2rem);
  font-family: var(--disp); font-size: 0.85rem; font-weight: 600;
  color: var(--cizgi-koyu);
  font-variant-numeric: tabular-nums;
}
.durum-semasi h3 { font-size: 1rem; font-weight: 600; }
.durum-semasi p { font-size: var(--olcek-sm); color: var(--murekkep-2); line-height: 1.65; }

/* ================================================================= SEPET */
/* Islevsel sayfalarin ortak giris bandi (sepet, giris, siparis takibi) */
.sayfa-giris { padding-block: clamp(2.5rem, 5vw, 4rem) var(--b-4); }
.sayfa-giris + .bolum { padding-top: var(--b-4); }

/* min-width:0 zinciri — grid ogeleri varsayilan olarak icerikten kucuk
   olamaz, uzun urun adlari dar ekranda satiri tasiriyordu. */
.sepet-duzen { display: grid; gap: var(--b-8); align-items: start; min-width: 0; }
.sepet-duzen > * { min-width: 0; }

.sepet-basliklar { display: none; }
.sepet-liste > ul { border-block: 1px solid var(--cizgi); }

.sepet-satir {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    'urun urun'
    'adet tutar'
    'sil  sil';
  gap: var(--b-4);
  align-items: center;
  padding: var(--b-5) 0;
  min-width: 0;
}
.sepet-satir > * { min-width: 0; }
.sepet-satir + .sepet-satir { border-top: 1px solid var(--cizgi); }

.sepet-urun { grid-area: urun; display: flex; gap: var(--b-4); align-items: center; min-width: 0; }
.sepet-g {
  flex: none;
  width: 4.6rem; height: 4.6rem;
  display: grid; place-items: center;
  background: var(--kagit-2);
}
.sepet-g img { max-width: 100%; max-height: 100%; object-fit: contain; }
.sepet-metin { display: grid; gap: 0.28rem; min-width: 0; }
.sepet-ad { font-family: var(--disp); font-weight: 500; line-height: 1.35; overflow-wrap: anywhere; }
.sepet-ad a { color: var(--murekkep); text-decoration: none; }
.sepet-ad a:hover { color: var(--altin-koyu); }
.sepet-kunye,
.sepet-birim {
  font-size: var(--olcek-xs);
  color: var(--murekkep-3);
  font-variant-numeric: tabular-nums;
}

.sepet-satir .adet-secici { grid-area: adet; justify-self: start; }
.adet-secici-kucuk button { width: 2.2rem; font-size: 1rem; line-height: 1; }
.adet-secici-kucuk .girdi { width: 2.8rem; padding-block: 0.5rem; }

.sepet-tutar {
  grid-area: tutar;
  justify-self: end;
  font-family: var(--disp);
  font-size: 1.05rem; font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.sepet-sil { grid-area: sil; }
.sepet-sil button {
  background: none; border: 0; padding: 0;
  color: var(--murekkep-3);
  font-size: var(--olcek-xs);
  text-decoration: underline; text-underline-offset: 3px;
  cursor: pointer;
}
.sepet-sil button:hover { color: var(--murekkep); }

.sepet-liste-alt {
  display: flex; flex-wrap: wrap; gap: var(--b-5);
  justify-content: space-between;
  padding-top: var(--b-5);
}

/* --- ozet paneli --- */
.sepet-ozet {
  padding: var(--b-6);
  background: var(--kagit);
  border: 1px solid var(--cizgi);
}
.sepet-ozet h2 { font-size: 1.15rem; margin-bottom: var(--b-5); }

.ozet-satirlar { display: grid; gap: var(--b-3); }
.ozet-satirlar > div { display: flex; justify-content: space-between; gap: var(--b-4); }
.ozet-satirlar dt { color: var(--murekkep-2); font-size: var(--olcek-sm); }
.ozet-satirlar dd { font-variant-numeric: tabular-nums; font-family: var(--disp); font-weight: 600; }
.ozet-havale dd { color: var(--murekkep-2); font-weight: 500; }
.ozet-kazanc dt, .ozet-kazanc dd { color: var(--altin-koyu); }

.ozet-toplam {
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--b-4);
  margin-top: var(--b-5);
  padding-top: var(--b-5);
  border-top: 1px solid var(--cizgi-koyu);
}
.ozet-toplam span { font-family: var(--disp); font-size: 11px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--murekkep-3); }
.ozet-toplam strong {
  font-family: var(--disp);
  font-size: 1.5rem; font-weight: 600; letter-spacing: -0.02em;
  color: var(--altin-koyu);
  font-variant-numeric: tabular-nums;
}

.ozet-eylem { display: grid; gap: var(--b-3); margin-block: var(--b-5); justify-items: stretch; }
.ozet-eylem .btn-genis { width: 100%; }
.sepet-ozet .urun-guvence { margin-top: var(--b-5); }

.bos-durum-genis { padding-block: var(--b-12); }
.bos-durum-genis h2 { font-size: 1.4rem; }

/* ============================================================== KIRILIMLAR */
@media (min-width: 48rem) {
  .ust-arama { display: flex; }
  .ust-arama-btn { display: none; }
  .ust-hesap { display: inline-flex; }
  .ust-iletisim { display: inline-flex; }
  .marka-logo { height: 2.7rem; }
  .alt-bulten { grid-template-columns: 1fr 1fr; align-items: center; }
  .alt-marka { grid-column: auto; }
  .tam-serit-ic { grid-template-columns: repeat(4, 1fr); }
  .tam-serit-ic > * { border-block-end: 0; }
  .tam-serit-ic > *:nth-child(2n) { border-inline-end: 1px solid var(--cizgi); }
  .tam-serit-ic > *:last-child { border-inline-end: 0; }

  .sepet-satir {
    grid-template-columns: 1fr 9rem 8rem 5rem;
    grid-template-areas: 'urun adet tutar sil';
  }
  .sepet-satir .adet-secici { justify-self: center; }
  .sepet-sil { justify-self: end; }
  .sepet-basliklar {
    display: grid;
    grid-template-columns: 1fr 9rem 8rem 5rem;
    gap: var(--b-4);
    padding-bottom: var(--b-3);
    font-family: var(--disp);
    font-size: 10px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase;
    color: var(--murekkep-3);
  }
  .sepet-basliklar > span:nth-child(2) { text-align: center; }
  .sepet-basliklar > span:nth-child(3) { text-align: end; }

  .hizmet-izgara { grid-template-columns: repeat(3, 1fr); }
  .ozellik-serit { grid-template-columns: repeat(3, 1fr); }
  .ozellik-serit-4 { grid-template-columns: repeat(2, 1fr); }
  .durum-semasi { grid-template-columns: repeat(4, 1fr); }
  .guven-seridi { grid-template-columns: repeat(4, 1fr); }
  .destek-kapanis { grid-template-columns: 1.4fr 1fr; align-items: center; }
}

@media (min-width: 64rem) {
  .ust-menu-btn { display: none; }
  .ust-telefon { display: inline-flex; }
  .menu-bar { display: block; }
  .hero-ic { grid-template-columns: 1.02fr 0.98fr; }
  .urun-duzen { grid-template-columns: 1fr 1fr; }
  .iletisim-duzen { grid-template-columns: 0.85fr 1.15fr; }
  .kol { grid-template-columns: 1.15fr 0.85fr; }
  .alt-izgara { grid-template-columns: 1.5fr repeat(4, 1fr); }
  .sepet-duzen { grid-template-columns: 1fr 22rem; gap: var(--b-10); }
  .sepet-ozet { position: sticky; top: 12rem; }
  .arac-govde { grid-template-columns: 1.05fr 0.95fr; gap: var(--b-10); }
  .adim-listesi { grid-template-columns: repeat(2, 1fr); }
  .ozellik-serit-4 { grid-template-columns: repeat(4, 1fr); }
  .hesap-duzen { grid-template-columns: 1.15fr 0.85fr; gap: var(--b-8); }
  .sekme-liste { flex-wrap: nowrap; }
}

/* Genis ekranlarda menu nefes alir — kap genisligi sabit oldugu icin
   bunun uzerinde daha fazla acilamiyor, yoksa ikinci satira sariyor. */
@media (min-width: 80rem) {
  .ana-menu-liste > li > a { padding-inline: 1.1rem; font-size: 11.5px; letter-spacing: 0.15em; }
}