/* Pembe İnci tasarım sistemi (Claude Design: "Pembe İnci Tasarım Sistemi", 07.11.2026).
   Renk, ölçü ve parçalar oradaki adlarla. Yeni ekranlar bunu kullanır; eski ekranlar görünüş adımında geçer.
   Yazı dosyaları: /assets/css/fonts.css (Bodoni Moda, Jost). */
:root {
  --zemin: #F7F5F2;
  --kart: #FFFEFC;
  --pudra: #F0E1DD;
  --pudra-cizgi: #E2CFCA;
  --secili: #F4E7E4;
  --cizgi: #E8E1DC;
  --alan-cizgi: #958784;
  --yazi: #2E2628;
  --soluk: #5F5558;
  --dugme: #3F2E33;
  --dugme-yazi: #F7F5F2;
  --vurgu: #85565E;
  --odak: #85565E;
  --arti: #2F6B4A;
  --arti-acik: #E6F0E9;
  --eksi: #B42318;
  --eksi-acik: #FBE9E7;
  --dikkat: #8A5A00;
  --dikkat-acik: #FBEFD0;

  --font-marka: "Bodoni Moda", Didot, "Bodoni 72", Georgia, serif;
  --font-govde: Jost, -apple-system, "Segoe UI", Arial, sans-serif;

  --bosluk-8: 8px;
  --bosluk-10: 10px;
  --bosluk-14: 14px;
  --bosluk-18: 18px;
  --bosluk-22: 22px;
  --bosluk-26: 26px;
  --bosluk-32: 32px;
  --kose: 3px;

  --dugme-yukseklik: 52px;
  --alan-yukseklik: 48px;
  --menu-yukseklik: 46px;
  --sekme-yukseklik: 54px;
  --secici-yukseklik: 62px;
  --kenar-genislik: 210px;
}

.pi { margin: 0; font-family: var(--font-govde); color: var(--yazi); background: var(--zemin); font-size: 16px; line-height: 1.5; font-variant-numeric: tabular-nums; -webkit-font-smoothing: antialiased; }
.pi *, .pi *::before, .pi *::after { box-sizing: border-box; }
.pi :focus-visible { outline: 2px solid var(--odak); outline-offset: 1px; }
.pi [hidden] { display: none !important; }

/* Düğme */
.pi-dugme { display: inline-flex; align-items: center; justify-content: center; gap: var(--bosluk-8); min-height: var(--dugme-yukseklik); padding: 0 var(--bosluk-22); border: 1px solid var(--yazi); border-radius: var(--kose); background: transparent; color: var(--yazi); font: 600 16px/1 var(--font-govde); letter-spacing: .03em; cursor: pointer; }
.pi-dugme--ana { background: var(--dugme); border-color: var(--dugme); color: var(--dugme-yazi); }
.pi-dugme--ikincil { border-color: var(--alan-cizgi); }
.pi-dugme--ikincil:hover { background: var(--secili); }
.pi-dugme--genis { width: 100%; }
.pi-dugme[aria-busy="true"] { cursor: progress; }
.pi-bag { border: 0; background: none; padding: 0; color: var(--vurgu); font: 500 15px var(--font-govde); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; min-height: 44px; }

/* Alan */
.pi-alan { display: grid; gap: 6px; }
.pi-alan__etiket { font-size: 12.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--soluk); }
.pi-alan__kutu { font: 500 18px var(--font-govde); min-height: var(--alan-yukseklik); padding: 0 12px; border: 1px solid var(--alan-cizgi); border-radius: var(--kose); background: var(--kart); color: var(--yazi); width: 100%; min-width: 0; }
.pi-alan__yardim { font-size: 14px; color: var(--soluk); }

/* Kart */
.pi-kart { background: var(--kart); border: 1px solid var(--cizgi); border-radius: var(--kose); padding: 24px var(--bosluk-26); min-width: 0; }
.pi-kart__baslik { margin: 0 0 var(--bosluk-18); font: 500 22px/1.25 var(--font-marka); letter-spacing: .01em; }

/* Logo */
.pi-logo { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.pi-logo__amblem { width: 36px; height: 36px; color: var(--yazi); }
.pi-logo__ad { font: 500 17px/1 var(--font-marka); letter-spacing: .26em; text-transform: uppercase; }
.pi-logo__alt { font-size: 11px; letter-spacing: .24em; text-transform: uppercase; color: var(--soluk); margin-top: -6px; }

/* Sol menü (bilgisayar) */
.pi-kenar { background: var(--pudra); border-right: 1px solid var(--pudra-cizgi); width: var(--kenar-genislik); padding: 26px var(--bosluk-22) var(--bosluk-22); display: flex; flex-direction: column; gap: 34px; }
.pi-menu { display: flex; flex-direction: column; }
.pi-menu a { display: flex; align-items: center; min-height: var(--menu-yukseklik); padding-left: var(--bosluk-14); border-left: 1px solid transparent; color: var(--yazi); text-decoration: none; font-weight: 500; letter-spacing: .04em; }
.pi-menu a:hover { background: var(--secili); }
.pi-menu a.etkin { color: var(--vurgu); border-left-color: var(--vurgu); font-weight: 600; }

/* Alt sekmeler (telefon) */
.pi-sekmeler { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; background: var(--pudra); border-top: 1px solid var(--pudra-cizgi); padding: 0 4px; }
.pi-sekmeler a { display: flex; align-items: center; justify-content: center; min-height: var(--sekme-yukseklik); border-top: 2px solid transparent; color: var(--yazi); text-decoration: none; font-size: 12.5px; font-weight: 600; letter-spacing: .04em; }
.pi-sekmeler a.etkin { color: var(--vurgu); border-top-color: var(--vurgu); }

/* Seçici (Sat/Al, ödeme biçimi, banka) */
.pi-secici { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; border: 1px solid var(--yazi); border-radius: var(--kose); overflow: hidden; }
.pi-secici button { min-height: var(--secici-yukseklik); border: 0; background: transparent; color: var(--yazi); font: 600 22px var(--font-govde); letter-spacing: .08em; cursor: pointer; padding: 0 6px; }
.pi-secici button + button { border-left: 1px solid var(--yazi); }
.pi-secici button.secili { background: var(--dugme); color: var(--dugme-yazi); }
.pi-secici--odeme button { min-height: var(--sekme-yukseklik); font-size: 17px; letter-spacing: .04em; }

/* Ziynet kutuları */
.pi-kutular { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: var(--bosluk-10); }
.pi-kutu { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 5px; min-height: 84px; padding: 12px 14px; border: 1px solid var(--cizgi); border-radius: var(--kose); background: var(--kart); color: var(--yazi); text-align: left; font-family: var(--font-govde); cursor: pointer; }
.pi-kutu:hover { background: var(--secili); }
.pi-kutu__ad { font-size: 18px; font-weight: 600; line-height: 1.2; }
.pi-kutu__fiyat { font-size: 15.5px; font-weight: 500; color: var(--soluk); white-space: nowrap; }
.pi-kutu.secili { border-color: var(--vurgu); background: var(--secili); box-shadow: inset 0 0 0 1px var(--vurgu); }
.pi-kutu.secili .pi-kutu__ad { color: var(--vurgu); }
.pi-kutu.secili .pi-kutu__fiyat { color: var(--yazi); }

/* Adet seçici */
.pi-adet { display: inline-flex; border: 1px solid var(--alan-cizgi); border-radius: var(--kose); overflow: hidden; background: var(--kart); }
.pi-adet button { width: 52px; height: var(--dugme-yukseklik); border: 0; background: transparent; color: var(--yazi); font-size: 26px; cursor: pointer; line-height: 1; }
.pi-adet button:hover { background: var(--secili); }
.pi-adet__sayi { min-width: 52px; text-align: center; font-size: 22px; font-weight: 600; line-height: var(--dugme-yukseklik); border-left: 1px solid var(--alan-cizgi); border-right: 1px solid var(--alan-cizgi); }

/* Tutar */
.pi-tutar { display: grid; gap: 2px; }
.pi-tutar__ad { font-size: 14px; font-weight: 600; letter-spacing: .04em; color: var(--soluk); }
.pi-tutar__sayi { font: 500 44px/1.05 var(--font-govde); font-variant-numeric: lining-nums tabular-nums; }

/* Rozet */
.pi-rozet { display: inline-flex; align-items: center; min-height: 24px; padding: 0 8px; border-radius: var(--kose); font-size: 12.5px; font-weight: 600; letter-spacing: .04em; white-space: nowrap; }
.pi-rozet--arti { background: var(--arti-acik); color: var(--arti); }
.pi-rozet--eksi { background: var(--eksi-acik); color: var(--eksi); }
.pi-rozet--dikkat { background: var(--dikkat-acik); color: var(--dikkat); }

/* Ekran düzeni */
.pi-ekran { display: grid; grid-template-columns: var(--kenar-genislik) minmax(0, 1fr); min-height: 100vh; }
.pi-ust { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; padding: 26px var(--bosluk-32) var(--bosluk-18); border-bottom: 1px solid var(--cizgi); }
.pi-ust h1 { margin: 0; font: 500 30px/1.1 var(--font-marka); letter-spacing: .01em; }
.pi-ust__bilgi { font-size: 14.5px; font-weight: 500; color: var(--soluk); }
.pi-icerik { padding: 26px var(--bosluk-32) var(--bosluk-32); display: grid; gap: var(--bosluk-22); }

/* Ana menü sayısı ve bölüm sırası (ana-menu.js; Tezgâh ve eski ekranlar ortak) */
.pi-menu a { justify-content: space-between; gap: 8px; padding-right: 8px; font-size: 16px; }
/* Ayarlar: menünün altında küçük bağlantı, beş başlıkla yarışmaz. */
.pi-menu a.kenar-ayar { min-height: 44px; font-size: 14px; font-weight: 500; color: var(--soluk); }
.pi-menu a.kenar-ayar.etkin { color: var(--vurgu); font-weight: 600; }
.pi-sekmeler a { gap: 4px; }
.menu-sayi { min-width: 22px; height: 22px; padding: 0 6px; border-radius: var(--kose); background: var(--dikkat-acik); color: var(--dikkat); font-size: 12.5px; font-weight: 600; letter-spacing: 0; display: inline-flex; align-items: center; justify-content: center; }
.pi-sekmeler .menu-sayi { min-width: 18px; height: 18px; padding: 0 4px; font-size: 11px; }
.pi-altsira { display: flex; flex-wrap: wrap; gap: 0 var(--bosluk-22); padding: 0 var(--bosluk-32); border-bottom: 1px solid var(--cizgi); }
.pi-altsira a { font-size: 15px; display: inline-flex; align-items: center; gap: 6px; min-height: var(--menu-yukseklik); margin-bottom: -1px; border-bottom: 2px solid transparent; color: var(--soluk); text-decoration: none; font-weight: 500; letter-spacing: .02em; }
.pi-altsira a:hover { color: var(--yazi); }
.pi-altsira a.etkin { color: var(--vurgu); border-bottom-color: var(--vurgu); font-weight: 600; }
.pi-menu a:focus-visible, .pi-sekmeler a:focus-visible, .pi-altsira a:focus-visible { outline: 2px solid var(--odak); outline-offset: 1px; }