/* Çırak – 0.67.0: mağaza arayüzü (magazaEk.js, magazaEk2.js, albumSayfa.js). oyun.css'ten sonra bağlanır.
   Var olan .ek-* mağaza kartları oyun.css'te; burada yeni parçalar ve koyu tema (body.koyu-tema) düzeltmeleri. */

.mg { --mg-kagit: #FFFDF8; --mg-cizgi: #EFE5CF; --mg-zemin: rgba(127, 127, 127, .08); --mg-altin: #B8860B; --mg-altin-acik: #FFF1C7; --mg-yesil: #DDF5E7; --mg-mavi: #E3EEFD; }
body.koyu-tema .mg, body.koyu-tema .mg-cekmece { --mg-kagit: #1A2844; --mg-cizgi: #2E3E61; --mg-zemin: rgba(255, 255, 255, .06); --mg-altin: #FFD666; --mg-altin-acik: #3A2E0A; --mg-yesil: #123A27; --mg-mavi: #17325C; }
.mg :focus-visible, .mg-cekmece :focus-visible, .mg-serit :focus-visible { outline: 3px solid var(--mavi); outline-offset: 2px; }
.gizli-etiket { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---- sekme rayı: 18 sekme tek satırda, tam adlarıyla; yatay kaydırılır (ana.js'in "cok-satir" ızgarası mağazada kapalı:
   dar pencerede sütunlara bölünce adlar "…" ile kesiliyordu) */
.panel-govde #magaza-odeme ~ .sekmeler.kaydir, .panel-govde #magaza-odeme ~ .sekmeler.cok-satir { display: flex; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; gap: 6px; padding: 0 0 6px; scrollbar-width: thin; scroll-snap-type: x proximity; -webkit-mask-image: none; mask-image: none; }
.panel-govde #magaza-odeme ~ .sekmeler.kaydir > button, .panel-govde #magaza-odeme ~ .sekmeler.cok-satir > button { flex: none; min-height: 44px; padding: 0 12px; font-size: 14.5px; white-space: nowrap; overflow: visible; text-overflow: clip; scroll-snap-align: start; }
/* 0.68.1: kaydırma çubuğu gizli; devamı olan kenar yumuşakça solar (sol-var / sag-var sınıflarını devlet.js koyar),
   fare tekerleği ve sürükleme yatay kaydırır */
.panel-govde #magaza-odeme ~ .sekmeler.kaydir { scrollbar-width: none; padding-bottom: 2px; cursor: grab; }
.panel-govde #magaza-odeme ~ .sekmeler::-webkit-scrollbar { display: none; }
.panel-govde #magaza-odeme ~ .sekmeler.sag-var { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent); }
.panel-govde #magaza-odeme ~ .sekmeler.sol-var { -webkit-mask-image: linear-gradient(90deg, transparent, #000 40px); mask-image: linear-gradient(90deg, transparent, #000 40px); }
.panel-govde #magaza-odeme ~ .sekmeler.sol-var.sag-var { -webkit-mask-image: linear-gradient(90deg, transparent, #000 40px, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(90deg, transparent, #000 40px, #000 calc(100% - 40px), transparent); }

/* ---- ödeme şeridi */
.mg-serit { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; padding: 6px 12px 6px 6px; border-radius: 14px; background: #FFF4D1; box-shadow: inset 0 0 0 1.5px #EBCB6B; } /* 0.68.1: tek renk */
.mg-serit.altinla { background: #FFE08A; box-shadow: inset 0 0 0 2px #D99A00; }
.mg-bakiye { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 12px; border-radius: 11px; background: #fff; color: #5C3D00; font-size: 17px; text-decoration: none; box-shadow: 0 1px 2px rgba(16, 24, 40, .08); font-variant-numeric: tabular-nums; }
.mg-anahtar { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; cursor: pointer; font-weight: 800; color: #3D2A00; }
.mg-anahtar input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.mg-anahtar-ray { position: relative; width: 46px; height: 26px; border-radius: 999px; background: #C9B78A; transition: background .15s; flex: none; }
.mg-anahtar-ray::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .3); transition: transform .15s; }
.mg-anahtar input:checked + .mg-anahtar-ray { background: #1FA25A; }
.mg-anahtar input:checked + .mg-anahtar-ray::after { transform: translateX(20px); }
.mg-anahtar input:focus-visible + .mg-anahtar-ray { outline: 3px solid var(--mavi); outline-offset: 2px; }
.mg-serit-not { margin-inline-start: auto; color: #6B5320; font-size: 12.5px; font-weight: 700; }
body.koyu-tema .mg-serit { background: #1B2846; box-shadow: inset 0 0 0 1.5px #2E4170; }
body.koyu-tema .mg-serit.altinla { background: #3A300E; box-shadow: inset 0 0 0 2px #FFC42E; }
body.koyu-tema .mg-anahtar-ray { background: #3A4D78; } /* 0.68.1: koyu temada kapalı anahtar */
body.koyu-tema .mg-bakiye { background: #24345A; color: #FFD666; box-shadow: none; }
body.koyu-tema .mg-anahtar { color: #FFE6A3; }
body.koyu-tema .mg-serit-not { color: #B9C7E6; }
.mg-yasal { margin: 14px 2px 4px; line-height: 1.45; }

/* ---- kartlar */
.mg .ek-urun { background: var(--mg-kagit); border-color: var(--mg-cizgi); position: relative; }
.mg-gorsel-dugme { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: pointer; color: inherit; font: inherit; text-align: inherit; }
.mg-gorsel-dugme:hover .ek-gorsel { filter: brightness(1.04); }
.mg .ek-dinle { top: 50px; bottom: auto; right: 8px; width: 40px; height: 40px; z-index: 2; }
.mg .ek-gorsel.mg-on { padding: 6px; }
.mg .ek-gorsel.mg-on > :not(em) { max-width: 100%; max-height: 100%; }
.mg-kucuk-simge { position: absolute; right: 8px; bottom: 6px; font-size: 26px !important; }
.mg-indirim { font-style: normal; font-weight: 900; font-size: 11.5px; color: #fff; background: #E0493C; padding: 1px 6px; border-radius: 999px; vertical-align: 1px; }
.mg-ind-rozet { background: #E0493C !important; color: #fff !important; box-shadow: 0 1px 2px rgba(16, 24, 40, .08) !important; }
.mg .rozetcik.mg-kilit { background: #EEE8F7; color: #5B4A7A; white-space: normal; }
body.koyu-tema .mg .rozetcik.mg-kilit { background: #2A2445; color: #C9BDF0; }
.mg .ek-satir .rozetcik.iyi { background: var(--mg-yesil); }
.mg .ek-not { padding-top: 0; }
.mg-alt-baslik { margin: 14px 0 0; font-size: 15px; color: var(--soluk); }
.mg .ek-icerik { background: var(--mg-zemin); }
/* seçenek önizlemeleri */
.mg-sec-renk { display: inline-block; width: 30px; height: 30px; border-radius: 50%; background: var(--renk); box-shadow: inset 0 0 0 2.5px rgba(255, 255, 255, .85), 0 0 0 1.5px rgba(0, 0, 0, .18); flex: none; }
.mg-sec-renk.buyuk { width: 58px; height: 58px; }
.mg-sec-simge { font-size: 26px; line-height: 1; }
.mg-sec-simge.buyuk { font-size: 54px; }
.mg-sec-on { display: grid; place-items: center; width: 100%; max-height: 64px; overflow: hidden; }
.mg-sec-on.buyuk { max-height: 150px; }
.mg-sec-on > * { max-width: 100%; max-height: 100%; }
/* altın paketleri */
.mg-altin-miktar { display: flex; align-items: center; gap: 6px; padding: 0 10px 8px; font-size: 18px; color: var(--mg-altin); }
.mg-altin-miktar b { font-size: 22px; font-variant-numeric: tabular-nums; }
.mg-bonus { font-style: normal; font-size: 12px; font-weight: 900; color: #fff; background: #1FA25A; padding: 2px 8px; border-radius: 999px; }
/* numaralı ürünler */
.mg-kalan { height: 8px; margin: 0 10px 4px; border-radius: 4px; background: var(--mg-zemin); overflow: hidden; }
.mg-kalan i { display: block; height: 100%; background: linear-gradient(90deg, #D4AF37, #FFE08A); }
.mg .rozetcik.mg-no { font-size: 13px; background: linear-gradient(135deg, #FFE38A, #D4AF37); color: #3D2A00; }
.mg .g-sinirli { border-color: #D4AF37; }
/* eylem formları */
.mg-secim { display: flex; flex-wrap: wrap; gap: 6px; }
.mg-secim-k { position: relative; display: flex; align-items: center; gap: 6px; min-height: 44px; padding: 4px 10px 4px 6px; border-radius: 12px; background: var(--mg-zemin); cursor: pointer; font-size: 13px; }
.mg-secim-k input { position: absolute; opacity: 0; }
.mg-secim-k .mg-sec-renk, .mg-secim-k .mg-sec-on { width: 26px; height: 26px; max-height: 26px; }
.mg-secim-k .mg-sec-simge { font-size: 20px; }
.mg-secim-k small { color: var(--soluk); font-size: 11.5px; }
.mg-secim-k:has(input:checked) { box-shadow: inset 0 0 0 2px #1FA25A; background: var(--mg-yesil); }
.mg-secim-k:has(input:focus-visible) { outline: 3px solid var(--mavi); outline-offset: 2px; }
.mg .ek-eylem select { width: 100%; }
/* geri sayım */
.mg-geri { margin-inline-start: auto; font-size: 13px; font-weight: 800; color: #A92E23; background: #FDE5E2; padding: 2px 9px; border-radius: 999px; }
body.koyu-tema .mg-geri { background: #3A1612; color: #FF9A8E; }
.mg-sayac { font-variant-numeric: tabular-nums; }
.mg .ek-bolum h3 { flex-wrap: wrap; }

/* ---- araç süsleri */
details.ek-arac > summary { list-style: none; cursor: pointer; min-height: 44px; padding: 4px 0; }
details.ek-arac > summary::-webkit-details-marker { display: none; }
details.ek-arac > summary::after { content: "▾"; margin-inline-start: auto; color: var(--soluk); transition: transform .15s; }
details.ek-arac:not([open]) > summary::after { transform: rotate(-90deg); }
.mg .mg-arac-urun { grid-template-columns: auto minmax(0, 1fr) auto; }
.mg-arac-dugmeler { display: inline-flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; align-items: center; }
.mg .mg-arac-urun .ek-cesitler { padding: 0; }
.mg .ek-cesit { width: 40px; height: 40px; }
.mg-cipler { display: flex; flex-wrap: wrap; gap: 4px; margin: 2px 0; }
.mg-cip { display: inline-flex; align-items: center; gap: 2px; padding: 0 0 0 8px; border-radius: 999px; background: var(--mg-yesil); font-size: 12px; font-weight: 700; }
.mg-cip button { min-width: 32px; min-height: 32px; border: 0; background: none; cursor: pointer; color: var(--kirmizi-koyu); font-weight: 900; border-radius: 50%; }

/* ---- Fırsatlar */
.mg-firsat-hafta { box-shadow: 0 0 0 2px #E8B923, 0 1px 2px rgba(16, 24, 40, .08); }
.mg-firsat-ozel { box-shadow: 0 0 0 2px #E0493C, 0 1px 2px rgba(16, 24, 40, .08); }
.mg-adimlar { display: flex; gap: 6px; list-style: none; padding: 0; margin: 6px 0 4px; counter-reset: a; }
.mg-adimlar li { flex: 1; height: 8px; border-radius: 4px; background: var(--mg-zemin); position: relative; }
.mg-adimlar li span { position: absolute; left: 50%; top: -9px; transform: translateX(-50%); width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 900; background: var(--mg-kagit); box-shadow: 0 0 0 2px var(--mg-cizgi); }
.mg-adimlar li.tamam { background: #1FA25A; }
.mg-adimlar li.tamam span { background: #1FA25A; color: #fff; box-shadow: none; }
.mg-adimlar li.simdi span { background: #FFC42E; color: #3D2A00; box-shadow: 0 0 0 3px rgba(255, 196, 46, .4); }
.mg-yolculuk .mg-adimlar { margin: 18px 4px 14px; }

/* ---- Altın ve Üyelik */
.mg-altin-bas { background: linear-gradient(135deg, #FFF6D6, #FFE08A) !important; }
body.koyu-tema .mg-altin-bas { background: linear-gradient(135deg, #2B2610, #4A3A08) !important; }
.mg-altin-bakiye { display: flex; align-items: center; gap: 12px; }
.mg-altin-bakiye > span { font-size: 44px; line-height: 1; filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .2)); }
.mg-altin-bakiye small { display: block; font-weight: 800; color: #8A5B00; }
.mg-altin-bakiye b { font-size: 34px; line-height: 1.05; font-variant-numeric: tabular-nums; color: #5C3D00; }
body.koyu-tema .mg-altin-bakiye small { color: #FFD666; }
body.koyu-tema .mg-altin-bakiye b { color: #FFE6A3; }
.mg-altin-kart-durum { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.mg-gecmis { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.mg-gecmis li { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 10px; background: var(--mg-zemin); }
.mg-gecmis li > span { font-size: 18px; text-align: center; }
.mg-gecmis b { display: block; font-size: 13.5px; overflow-wrap: anywhere; }
.mg-gecmis small { color: var(--soluk); font-size: 12px; }
.mg-gecmis em { font-style: normal; font-weight: 900; font-variant-numeric: tabular-nums; }
.mg-gecmis em.arti { color: var(--yesil-koyu); }
.mg-gecmis em.eksi { color: var(--kirmizi-koyu); }
body.koyu-tema .mg-gecmis em.arti { color: #6FE3A1; }
body.koyu-tema .mg-gecmis em.eksi { color: #FF9A8E; }

/* ---- Çıraklık Yolu ve setler */
.mg-yol-ust { display: flex; align-items: flex-start; gap: 12px; }
.mg-yol-ust > div:first-child { flex: 1; min-width: 0; }
.mg-yol-ust h3 { margin: 0 0 2px; }
.mg-yol-kademe { text-align: center; line-height: 1; padding: 8px 12px; border-radius: 14px; background: var(--lacivert); color: #fff; }
.mg-yol-kademe b { font-size: 28px; display: block; }
.mg-yol-kademe small { font-size: 12px; opacity: .8; }
.mg-yol-cubuk > div { background: linear-gradient(90deg, #FFC42E, #FF8A3D); }
.mg-yol .dugme-satiri { flex-wrap: wrap; align-items: center; margin: 4px 0 8px; }
.mg-yol .dugme-satiri .dugme { flex: 1 1 200px; }
.mg-kademeler { list-style: none; margin: 10px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 6px; }
.mg-kademe { position: relative; display: grid; justify-items: center; gap: 2px; padding: 8px 4px 6px; border-radius: 12px; background: var(--mg-zemin); text-align: center; min-height: 92px; }
.mg-kademe small { font-size: 11px; line-height: 1.2; color: var(--soluk); overflow-wrap: anywhere; }
.mg-k-no { font-size: 11px; font-weight: 900; color: var(--soluk); }
.mg-k-simge { font-size: 24px; line-height: 1.1; }
.mg-kademe i { position: absolute; top: 4px; right: 6px; font-style: normal; font-size: 13px; }
.mg-kademe.alindi { background: var(--mg-yesil); }
.mg-kademe.hazir { background: var(--mg-altin-acik); box-shadow: inset 0 0 0 2px #FFC42E; animation: mgParla 1.6s ease-in-out infinite; }
.mg-kademe.uzak { opacity: .62; }
.mg-kademe.son { box-shadow: inset 0 0 0 2px #8A4DE0; }
@keyframes mgParla { 50% { box-shadow: inset 0 0 0 2px #FFC42E, 0 0 12px rgba(255, 196, 46, .7); } }
@media (prefers-reduced-motion: reduce) { .mg-kademe.hazir { animation: none; } }
.mg-set-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.mg-set-liste li { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; background: var(--mg-zemin); }
.mg-set-liste li.tamam { background: var(--mg-yesil); }
.mg-set-simge { font-size: 26px; text-align: center; }
.mg-set-liste b { font-size: 14px; }
.mg-set-liste small { font-size: 12px; color: var(--soluk); }
.mg-set-cubuk { height: 7px; margin: 4px 0 2px; }
.mg-set-cubuk > div { background: linear-gradient(90deg, #8A4DE0, #C59BFF); }

/* ---- kolaylık */
.mg-kayitlar { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.mg-kayitlar li { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; padding: 6px 8px 6px 12px; border-radius: 12px; background: var(--mg-zemin); }
.mg-kayitlar li > span { display: inline-flex; gap: 6px; }
.mg-ziyaret-sayi { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.mg-ziyaret-sayi b { font-size: 40px; line-height: 1; color: var(--lacivert); }
body.koyu-tema .mg-ziyaret-sayi b { color: #97C2F7; }
.mg-ziyaretciler { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.mg-ziyaretci { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; width: 100%; min-height: 48px; padding: 8px 12px; border: 0; border-radius: 12px; background: var(--mg-zemin); color: inherit; font: inherit; text-align: start; cursor: pointer; }
.mg-ziyaretci small { grid-column: 1; color: var(--soluk); font-size: 12px; }
.mg-ziyaretci em { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-style: normal; font-size: 12px; color: var(--soluk); }
.mg-logo-satir { display: flex; justify-content: center; padding: 0 10px 6px; }

/* ---- çekmece (alt pencere) */
.mg-perde { position: fixed; inset: 0; z-index: 70; display: flex; align-items: flex-end; justify-content: center; background: rgba(8, 14, 30, 0); transition: background .18s; }
.mg-perde.acik { background: rgba(8, 14, 30, .55); }
.mg-cekmece { --mg-kagit: #FFFDF8; --mg-cizgi: #EFE5CF; --mg-zemin: rgba(127, 127, 127, .08); --mg-yesil: #DDF5E7;
  display: flex; flex-direction: column; width: min(640px, 100%); max-height: min(88vh, 860px); border-radius: 22px 22px 0 0; background: var(--pk-kagit, #FBF4E2); color: var(--metin); box-shadow: 0 -8px 30px rgba(0, 0, 0, .25);
  transform: translateY(24px); opacity: 0; transition: transform .18s ease, opacity .18s ease; padding-bottom: var(--alt, 0px); }
.mg-cekmece.genis { width: min(860px, 100%); }
.mg-perde.acik .mg-cekmece { transform: none; opacity: 1; }
@media (min-width: 700px) { .mg-perde { align-items: center; padding: 20px; } .mg-cekmece { border-radius: 22px; } }
@media (prefers-reduced-motion: reduce) { .mg-cekmece, .mg-perde { transition: none; } }
body.koyu-tema .mg-cekmece { background: #111B31; color: #E7ECF6; }
.mg-c-ust { display: flex; align-items: center; gap: 10px; padding: 14px 14px 8px 16px; }
.mg-c-ust > div { flex: 1; min-width: 0; }
.mg-c-ust h3 { margin: 0; font-size: 19px; line-height: 1.2; }
.mg-c-ust small { display: block; color: var(--soluk); font-size: 13px; line-height: 1.3; }
.mg-c-simge { font-size: 32px; line-height: 1; }
.mg-c-ust .kapat { flex: none; width: 44px; height: 44px; border-radius: 50%; border: 0; cursor: pointer; font-size: 18px; }
.mg-c-govde { overflow-y: auto; overscroll-behavior: contain; padding: 4px 16px 16px; display: flex; flex-direction: column; gap: 10px; min-height: 0; }
.mg-c-secili { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 12px; align-items: center; padding: 10px; border-radius: 16px; background: var(--mg-kagit); box-shadow: 0 0 0 1.5px var(--mg-cizgi); }
.mg-c-onizleme { display: grid; place-items: center; min-height: 96px; border-radius: 12px; background: linear-gradient(135deg, #F1F3F6, #D5DAE1); overflow: hidden; padding: 4px; }
body.koyu-tema .mg-c-onizleme { background: linear-gradient(135deg, #22314F, #15203A); }
.mg-c-bilgi { display: grid; gap: 4px; min-width: 0; }
.mg-c-bilgi > b { font-size: 16px; overflow-wrap: anywhere; }
.mg-c-eylem { padding: 4px 0 0 !important; justify-content: flex-start !important; gap: 8px !important; }
.mg-c-ara input { width: 100%; min-height: 44px; padding: 8px 12px; border-radius: 12px; border: 2px solid var(--mg-cizgi); background: var(--mg-kagit); font-size: 16px; }
.mg-c-izgara { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 6px; }
.mg-cekmece.genis .mg-c-izgara { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); }
.mg-c-secenek { position: relative; display: grid; justify-items: center; align-content: start; gap: 4px; min-height: 84px; padding: 8px 4px 6px; border: 0; border-radius: 12px; background: var(--mg-kagit); color: inherit; font: inherit; cursor: pointer; box-shadow: 0 0 0 1.5px var(--mg-cizgi); content-visibility: auto; contain-intrinsic-size: 96px 90px; }
.mg-c-secenek[hidden] { display: none; }
.mg-c-secenek .mg-sec-on { max-height: 48px; }
.mg-c-ad { font-size: 12px; line-height: 1.2; text-align: center; overflow-wrap: anywhere; }
.mg-c-sinif { font-size: 10.5px; font-weight: 800; color: #8A5B00; background: var(--mg-altin-acik, #FFF1C7); padding: 0 6px; border-radius: 999px; }
.mg-c-isaret { position: absolute; top: 4px; right: 6px; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 12px; font-weight: 900; color: #fff; background: #1FA25A; }
.mg-c-secenek.sahip { background: var(--mg-yesil); }
.mg-c-secenek.aktif, .mg-c-secenek.takili { background: var(--mg-yesil); box-shadow: 0 0 0 2px #1FA25A; }
.mg-c-secenek.secili { box-shadow: 0 0 0 3px var(--mavi); }
.mg-ayrinti .ek-urun { border-radius: 16px; }
.mg-ayrinti .ek-gorsel { height: 150px; }
.mg-ayrinti .ek-simge { font-size: 72px; }
.mg-ayrinti .ek-bilgi small { -webkit-line-clamp: unset; display: block; }
.mg-cekmece .logo-secici { margin: 4px 0; }

/* ---- kendi paketini yap */
.mg-kendin-ozet { display: grid; gap: 8px; padding: 10px; border-radius: 16px; background: var(--mg-kagit); box-shadow: 0 0 0 1.5px var(--mg-cizgi); position: sticky; top: 0; z-index: 1; }
.mg-kendin-secilen { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.mg-kendin-secilen li { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; padding: 2px 2px 2px 8px; border-radius: 999px; background: var(--mg-yesil); font-size: 12.5px; }
.mg-kendin-secilen li b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 200px; }
.mg-kendin-secilen li.bos { width: 44px; justify-content: center; padding: 0; min-height: 32px; background: var(--mg-zemin); color: var(--soluk); }
.mg-kendin-secilen button { min-width: 32px; min-height: 32px; border: 0; border-radius: 50%; background: none; cursor: pointer; color: var(--kirmizi-koyu); font-weight: 900; }
.mg-kendin-fiyat { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.mg-kendin-fiyat > b { font-size: 20px; font-variant-numeric: tabular-nums; }
.mg-kendin-fiyat s { color: var(--soluk); }
.mg-kendin-fiyat .dugme { margin-inline-start: auto; }
.mg-kendin-fiyat small { flex: 1 1 200px; color: var(--soluk); }
.mg-kendin-suz { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.mg-kendin-suz select { min-height: 44px; border-radius: 12px; border: 2px solid var(--mg-cizgi); background: var(--mg-kagit); padding: 0 8px; }
.mg-kendin-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.mg-kendin-liste li { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto auto; align-items: center; gap: 8px; padding: 4px 6px 4px 8px; border-radius: 12px; background: var(--mg-zemin); }
.mg-kendin-liste li[hidden] { display: none; }
.mg-kendin-liste li b { display: block; font-size: 13.5px; overflow-wrap: anywhere; }
.mg-kendin-liste li small { font-size: 12px; color: var(--soluk); }
.mg-kendin-liste select { max-width: 130px; min-height: 40px; border-radius: 10px; border: 1.5px solid var(--mg-cizgi); background: var(--mg-kagit); }
.mg-k-simge { font-size: 22px; text-align: center; }

/* ---- albüm */
.mg-album-ust { display: grid; gap: 4px; }
.mg-album-ust small { display: block; color: var(--soluk); }
.mg-album-ust .cubuk { margin: 4px 0 0; }
.mg-album-sekmeler button small { opacity: .7; font-size: 12px; }
.mg-album-izgara { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; margin: 6px 0 10px; }
.mg-album-kare { position: relative; aspect-ratio: 3 / 4; display: grid; place-items: center; padding: 6px; border-radius: 12px; text-align: center; background: repeating-linear-gradient(45deg, rgba(127, 127, 127, .08) 0 6px, rgba(127, 127, 127, .14) 6px 12px); color: var(--soluk); font-weight: 800; font-size: 12.5px; border: 2px dashed rgba(127, 127, 127, .35); }
.mg-album-kare.var { background: #fff; color: var(--metin); border: 2px solid #E3D5B4; box-shadow: 0 1px 2px rgba(16, 24, 40, .08); }
.mg-album-kare.var.n2 { border-color: #5FA8F5; box-shadow: 0 0 10px rgba(95, 168, 245, .5); }
.mg-album-kare.var.n3 { border-color: #D4AF37; box-shadow: 0 0 14px rgba(212, 175, 55, .7); }
body.koyu-tema .mg-album-kare.var { background: #1A2844; border-color: #3A4E7A; box-shadow: none; }
.mg-album-nadir { position: absolute; top: 4px; left: 6px; font-style: normal; color: #D4AF37; font-size: 11px; }
.mg-album-kopya { position: absolute; bottom: 4px; right: 6px; font-style: normal; font-size: 11px; font-weight: 900; background: #E0493C; color: #fff; border-radius: 999px; padding: 0 6px; }
.mg-album-kopyalar { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.mg-album-kopyalar li { padding: 4px 4px 4px 10px; border-radius: 999px; background: var(--mg-zemin); font-size: 13px; }
.mg-takas-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.mg-takas-liste li { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 10px; border-radius: 12px; background: var(--mg-zemin); }
.mg-takas-liste li > div { flex: 1 1 200px; min-width: 0; }
.mg-takas-liste small { display: block; color: var(--soluk); font-size: 12.5px; }
.mg-takas-liste li > span { display: inline-flex; gap: 6px; }
.mg-album-dus { position: fixed; left: 50%; bottom: calc(var(--dock, 76px) + 16px + var(--alt, 0px)); z-index: 95; display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 8px 16px 8px 10px; border-radius: 18px; background: #fff; color: var(--metin); text-decoration: none; box-shadow: 0 8px 26px rgba(0, 0, 0, .28); transform: translate(-50%, 30px) scale(.9); opacity: 0; transition: transform .3s cubic-bezier(.2, 1.4, .4, 1), opacity .25s; }
.mg-album-dus.acik { transform: translate(-50%, 0) scale(1); opacity: 1; }
.mg-album-dus small { display: block; font-size: 12px; font-weight: 800; color: var(--soluk); }
.mg-album-dus b { font-size: 16px; }
.mg-ad-kart { font-size: 30px; display: inline-block; animation: mgDon .7s ease-out; }
.mg-album-dus.n2 { box-shadow: 0 0 0 3px #5FA8F5, 0 8px 26px rgba(0, 0, 0, .28); }
.mg-album-dus.n3 { box-shadow: 0 0 0 3px #D4AF37, 0 0 24px rgba(212, 175, 55, .8); }
.mg-album-dus i { font-style: normal; color: #D4AF37; }
body.koyu-tema .mg-album-dus { background: #1A2844; color: #E7ECF6; }
@keyframes mgDon { from { transform: rotateY(180deg) scale(.6); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) { .mg-album-dus, .mg-ad-kart { transition: none; animation: none; } }

/* ---- yolculuk bileti (seyahat.js) */
.yol-bilet { margin: 10px 0 0; min-height: 44px; padding: 6px 10px; border-radius: 12px; background: #FFF1C7; }
body.koyu-tema .yol-bilet { background: #3A2E0A; }

/* ---- dar ekran: tek sütun, yatay kart */
@media (max-width: 420px) {
  .mg .ek-izgara { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .mg .ek-urun { display: grid; grid-template-columns: 96px minmax(0, 1fr); grid-auto-rows: auto; }
  .mg .ek-urun > .mg-gorsel-dugme { grid-row: 1 / span 6; align-self: stretch; }
  .mg .ek-urun > .mg-gorsel-dugme .ek-gorsel { height: 100%; min-height: 96px; }
  .mg .ek-urun > :not(.mg-gorsel-dugme):not(.ek-dinle) { grid-column: 2; }
  .mg .ek-urun .ek-simge { font-size: 40px; }
  .mg .ek-dinle { top: auto; bottom: 8px; left: 52px; right: auto; }
  .mg .ek-satir { padding: 0 10px 10px; }
  .mg .ek-bilgi small { -webkit-line-clamp: 4; }
  .mg .mg-arac-urun { grid-template-columns: auto minmax(0, 1fr); }
  .mg .mg-arac-urun .mg-arac-dugmeler { grid-column: 1 / -1; justify-content: flex-start; }
  .mg-c-secili { grid-template-columns: 88px minmax(0, 1fr); }
  .mg-c-onizleme { min-height: 80px; }
  .mg-kendin-liste li { grid-template-columns: 28px minmax(0, 1fr) auto; }
  .mg-kendin-liste select { grid-column: 2 / -1; grid-row: 2; max-width: none; }
  .mg-serit-not { margin-left: 0; flex-basis: 100%; }
  .mg .ek-urun.mg-eylem { display: flex; flex-direction: column; }
  .mg .ek-urun.mg-eylem > .mg-gorsel-dugme .ek-gorsel { height: 72px; min-height: 0; }
}

/* A4'ün önizleme kutusu (.ek-gorsel.onz) seçenek ızgarasında ve çekmecede */
.mg-sec-on > .ek-gorsel { width: 100%; height: 48px; border-radius: 8px; }
.mg-sec-on.buyuk > .ek-gorsel { height: 120px; }
.mg-secim-k .mg-sec-on > .ek-gorsel { height: 26px; }