/* ==========================================================================
   Soul Market – temel stiller ve masaüstü düzeni
   Masaüstünde sayfa, referansla aynı 1672x941 tasarım alanında çizilir ve
   --z ile ekran boyutuna ölçeklenir. Koordinatlar referansın pikselleridir.
   ========================================================================== */
@font-face { font-family: 'Tinos'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('../assets/fonts/tinos-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Tinos'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('../assets/fonts/tinos-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Roboto'; font-style: normal; font-weight: 400 700; font-stretch: 75% 100%; font-display: swap;
  src: url('../assets/fonts/roboto-wdth-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Roboto'; font-style: normal; font-weight: 400 700; font-stretch: 75% 100%; font-display: swap;
  src: url('../assets/fonts/roboto-wdth-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  color-scheme: dark;
  --z: 1;
  --bg: #070513;
  --bg-2: #0d0919;
  --panel: #120c22;
  --line: #3a2960;
  --line-2: #5b488e;
  --text: #f6f1ff;
  --text-2: #c9b8ea;
  --text-3: #af9bdd;
  --mute: #8275b3;
  --lilac: #b79ee8;
  --violet: #a855f7;
  --pink: #f8c5fe;
  --accent: #d57df9;
  --green: #c9ef88;
  --gold: #fff4b8;
  --red: #e6343f;
  --serif: 'Tinos', 'Times New Roman', Times, serif;
  --sans: 'Roboto', 'Segoe UI', Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body { min-height: 100vh; overflow-x: hidden; -webkit-tap-highlight-color: transparent; }
body.is-loading .page { opacity: 0; }
.page { transition: opacity .35s ease; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
button:disabled { cursor: not-allowed; }
a { color: inherit; text-decoration: none; }
img { display: block; user-select: none; -webkit-user-drag: none; }
h1, h2, h3, h4, p, ol, ul, dl, dd { margin: 0; padding: 0; }
ol, ul { list-style: none; }
:focus-visible { outline: 2px solid #c79bff; outline-offset: 2px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------------- Sayfa (masaüstü tasarım alanı) ---------------- */
.is-desktop .page {
  position: relative;
  width: 1672px;
  min-height: 941px;
  margin: 0 auto;
  padding: 96px 288px 30px 294px;
  zoom: var(--z);
  background:
    radial-gradient(60% 40% at 50% 0%, rgba(40, 18, 80, .25), transparent 70%),
    var(--bg);
}
.is-desktop .page::before {          /* sol sütun ayırıcı çizgisi */
  content: '';
  position: absolute;
  left: 254px;
  top: 0;
  bottom: 0;
  width: 1px;
  background: linear-gradient(180deg, rgba(58, 41, 96, .35), #3a2960 12%, #3a2960 88%, rgba(58, 41, 96, .2));
}

/* ---------------- Üst bar ---------------- */
.is-desktop .hdr { position: absolute; left: 0; top: 0; width: 1672px; height: 96px; z-index: 5; }
.is-desktop .logo { position: absolute; left: 10px; top: 4px; }
.is-desktop .logo img { width: 248px; height: 98px; }
.deco-spire { position: absolute; left: 822px; top: 0; width: 468px; height: 96px; pointer-events: none; }
.is-mobile .deco-spire { display: none; }

.search {
  position: absolute;
  left: 300px;
  top: 25px;
  width: 516px;
  height: 45px;
  border-radius: 23px;
  border: 1.5px solid #3f2d5c;
  background: rgba(6, 4, 15, .92);
  box-shadow: inset 0 0 12px rgba(80, 50, 140, .12);
  transition: border-color .2s, box-shadow .2s;
}
.search:focus-within { border-color: #7b5bc4; box-shadow: 0 0 14px rgba(140, 80, 240, .35), inset 0 0 12px rgba(80, 50, 140, .2); }
.search-ico { position: absolute; left: 13px; top: 11px; width: 21px; height: 21px; color: #8a78c0; }
.search-ico svg { width: 100%; height: 100%; }
.search input {
  width: 100%;
  height: 100%;
  padding: 0 44px 0 47px;
  border: 0;
  outline: 0;
  background: transparent;
  font-size: 17px;
  color: #ece6fa;
  border-radius: 23px;
}
.search input::placeholder { color: #6f5fa1; opacity: 1; }
.search input::-webkit-search-cancel-button { -webkit-appearance: none; }
.search-clear { position: absolute; right: 12px; top: 11px; width: 22px; height: 22px; color: #8a78c0; display: none; }
.search-clear svg { width: 100%; height: 100%; }
.search.has-text .search-clear { display: block; }
.search-clear:hover { color: #fff; }

.wallet { position: absolute; left: 1296px; top: 25px; width: 166px; height: 45px; border-radius: 23px; background: rgba(18, 12, 34, .55); box-shadow: inset 0 0 0 1px rgba(80, 60, 130, .35); }
.wallet-main { position: absolute; left: 0; top: 0; height: 45px; width: 124px; border-radius: 23px 0 0 23px; text-align: left; }
.wallet-gem { position: absolute; left: 2px; top: 0; width: 45px; height: 45px; filter: drop-shadow(0 0 6px rgba(168, 85, 247, .55)); }
.wallet-amt { position: absolute; left: 54px; top: 9px; font-size: 22px; font-weight: 500; line-height: 26px; color: #fff; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.wallet-main:hover .wallet-amt { color: #f1dcff; text-shadow: 0 0 10px rgba(200, 140, 255, .7); }
.wallet-plus { position: absolute; left: 128px; top: 5px; width: 34px; height: 34px; border-radius: 50%; border: 1.6px solid rgba(214, 196, 245, .8); color: #fff; display: grid; place-items: center; background: rgba(20, 12, 40, .6); transition: box-shadow .2s, background .2s; }
.wallet-plus svg { width: 19px; height: 19px; }
.wallet-plus:hover { background: rgba(120, 70, 210, .45); box-shadow: 0 0 14px rgba(168, 85, 247, .8); }
.wallet.bump .wallet-amt { animation: bump .45s ease-out; }
@keyframes bump { 40% { transform: scale(1.12); color: #e7c8ff; } }

.cart-btn { position: absolute; left: 1494px; top: 31px; width: 36px; height: 36px; color: #f2ecff; }
.cart-btn > svg { width: 33px; height: 33px; filter: drop-shadow(0 0 4px rgba(200, 170, 255, .35)); }
.cart-btn:hover > svg { color: #fff; filter: drop-shadow(0 0 8px rgba(190, 120, 255, .9)); }
.cart-btn.bump > svg { animation: bump .45s ease-out; }
.badge { position: absolute; left: 20px; top: -11px; min-width: 22px; height: 22px; padding: 0 5px; border-radius: 11px; background: #e3323d; color: #fff; font-size: 13.5px; font-weight: 700; line-height: 22px; text-align: center; box-shadow: 0 0 0 1.5px rgba(7, 5, 19, .9), 0 0 8px rgba(230, 50, 60, .5); }
[hidden] { display: none !important; }

.user { position: absolute; left: 1558px; top: 19px; }
.user-btn { display: flex; align-items: center; gap: 12px; border-radius: 30px; padding: 1px 4px 1px 3px; }
.avatar { width: 52px; height: 54px; border-radius: 50%; }
.avatar.is-round, .um-head img.is-round { height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 50%; }
.user-btn:hover .avatar { filter: drop-shadow(0 0 8px rgba(190, 120, 255, .8)); }
.chev { width: 13px; height: 9px; color: #c6b2ef; transition: transform .2s; }
.user-btn[aria-expanded='true'] .chev { transform: rotate(180deg); }
.user-menu {
  position: absolute;
  right: -2px;
  top: 64px;
  width: 260px;
  padding: 8px;
  border-radius: 10px;
  background: linear-gradient(180deg, #1a1130, #0e0919);
  border: 1px solid rgba(160, 130, 220, .38);
  box-shadow: 0 16px 40px rgba(0, 0, 0, .6), 0 0 22px rgba(110, 50, 210, .25);
  z-index: 20;
  animation: menuIn .18s ease-out;
}
@keyframes menuIn { from { opacity: 0; transform: translateY(-6px); } }
.um-head { display: flex; align-items: center; gap: 10px; padding: 6px 6px 10px; margin-bottom: 4px; border-bottom: 1px solid rgba(255, 255, 255, .07); }
.um-head img { width: 40px; height: 42px; border-radius: 50%; }
.um-head b { display: block; font-size: 15px; font-weight: 500; }
.um-head span { font-size: 12.5px; color: var(--mute); }
.user-menu > button, .user-menu > a { width: 100%; display: flex; align-items: center; gap: 10px; padding: 9px 8px; border-radius: 7px; font-size: 14.5px; color: var(--text-2); text-align: left; }
.user-menu > button svg, .user-menu > a svg { width: 19px; height: 19px; color: #a98fe0; flex: none; }
.user-menu > button:hover, .user-menu > a:hover, .user-menu > button:focus-visible, .user-menu > a:focus-visible { background: rgba(140, 80, 240, .18); color: #fff; outline: none; }
.user-menu em { margin-left: auto; font-style: normal; font-size: 12px; min-width: 20px; padding: 1px 6px; border-radius: 10px; background: rgba(140, 80, 240, .35); color: #fff; text-align: center; }
.um-test { color: #f0d39b !important; }
.um-test svg { color: #e8c27a !important; }
.um-mode { margin: 0 4px 6px; padding: 5px 8px; border-radius: 6px; font-size: 12px; color: #e3c48a; background: rgba(80, 52, 14, .35); border: 1px dashed rgba(255, 200, 120, .35); }
.um-mode.is-server { color: #a6e6bf; background: rgba(20, 70, 44, .35); border-color: rgba(120, 220, 160, .35); }

/* ---------------- Ülke seçici ---------------- */
.country { position: absolute; left: 1146px; top: 28px; }
.country-btn { display: flex; align-items: center; gap: 8px; height: 39px; padding: 0 12px 0 10px; border-radius: 20px; border: 1.5px solid #3f2d5c; background: rgba(8, 5, 18, .78); color: #ece6fa; font-size: 15px; font-stretch: 92%; transition: border-color .2s, box-shadow .2s; }
.country-btn .flag { width: 25px; height: 17px; }
.country-btn .chev { width: 11px; height: 8px; }
.country-btn:hover, .country-btn[aria-expanded='true'] { border-color: #7b5bc4; box-shadow: 0 0 12px rgba(140, 80, 240, .4); }
.country-btn[aria-expanded='true'] .chev { transform: rotate(180deg); }
.country-menu { position: absolute; right: 0; top: 48px; width: 260px; padding: 8px; border-radius: 10px; background: linear-gradient(180deg, #1a1130, #0e0919); border: 1px solid rgba(160, 130, 220, .38); box-shadow: 0 16px 40px rgba(0, 0, 0, .6), 0 0 22px rgba(110, 50, 210, .25); z-index: 20; animation: menuIn .18s ease-out; }
.country-menu .cm-head { padding: 4px 8px 8px; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--mute); }
.country-menu button { width: 100%; display: grid; grid-template-columns: 26px 1fr; grid-template-rows: auto auto; column-gap: 10px; align-items: center; padding: 8px; border-radius: 7px; text-align: left; color: var(--text-2); }
.country-menu button .flag { grid-row: 1 / span 2; width: 26px; height: 17px; }
.country-menu button span { font-size: 15px; color: #fff; }
.country-menu button em { font-style: normal; font-size: 12px; color: var(--mute); }
.country-menu button:hover, .country-menu button:focus-visible { background: rgba(140, 80, 240, .18); outline: none; }
.country-menu button[aria-checked='true'] { background: rgba(140, 80, 240, .26); box-shadow: inset 2px 0 0 #c79bff; }
.country-menu .cm-note { padding: 8px 8px 2px; font-size: 12px; line-height: 1.4; color: var(--mute); border-top: 1px solid rgba(255, 255, 255, .06); margin-top: 6px; }

/* ---------------- Sol: kategoriler ---------------- */
.is-desktop .side { position: absolute; left: 0; top: 0; width: 270px; height: 941px; }
.is-desktop .cats { position: absolute; inset: 0; }
.is-desktop .cat { position: absolute; left: 12px; top: calc(190px + (var(--i) - 1) * 51px); width: 256px; height: 64px; }
.is-desktop .cat:first-child { top: 123px; }
.cat { display: block; color: var(--lilac); }
.is-desktop .cat-ico { position: absolute; left: 17px; top: 13.5px; width: 37px; height: 37px; }
.cat-ico-svg { display: grid; place-items: center; color: #a98be6; filter: drop-shadow(0 0 3px rgba(168, 120, 240, .45)); }
.cat-ico-svg svg { width: 100%; height: 100%; }
.cat-ico-svg.is-grid { color: #c9a8ff; }
.cat-ico-svg.is-grid svg { width: 27px; height: 27px; }
.is-desktop .cat-name { position: absolute; left: 70px; top: 21px; font-size: 16.5px; line-height: 22px; font-stretch: 97%; white-space: nowrap; }
.cat:hover { color: #e6d8ff; }
.cat:hover .cat-ico { filter: brightness(1.35) drop-shadow(0 0 5px rgba(190, 130, 255, .7)); }
.cat.is-active { background: url('../assets/img/nav-active.png') 0 0 / 100% 100% no-repeat; color: #f9f4fd; }
.cat.is-active .cat-ico { filter: brightness(2.1) saturate(.25) drop-shadow(0 0 4px rgba(255, 255, 255, .45)); }
.cat.is-active .cat-ico-svg { filter: none; color: #fff; }
.cat.is-active .cat-ico-svg svg { filter: drop-shadow(0 0 3px rgba(255, 255, 255, .6)); }

/* ---------------- Sanatlı paneller (referanstan) ---------------- */
.art-panel { position: absolute; background-size: 100% 100%; background-repeat: no-repeat; }
.art-panel h3, .art-panel p { position: absolute; white-space: nowrap; }

.offer { left: 12px; top: 568px; width: 232px; height: 342px; background-image: url('../assets/img/panel-offer.webp'); }
.offer h3 { left: 0; right: 0; top: 198px; text-align: center; font: 400 30px/36px var(--serif); transform: scaleX(.875); color: #f1a0fe; text-shadow: 0 0 14px rgba(220, 120, 255, .45), 0 2px 2px rgba(0, 0, 0, .7); }
.offer p { left: 0; right: 0; top: 240px; text-align: center; font-size: 16.5px; line-height: 20px; font-stretch: 79%; color: #ece0d6; text-shadow: 0 1px 2px rgba(0, 0, 0, .9); }
.offer .btn-explore { position: absolute; left: 48px; top: 272px; width: 136px; height: 46px; }

.is-desktop .rail { position: absolute; left: 0; top: 0; width: 0; height: 0; }
.history { left: 1406px; top: 103px; width: 254px; height: 385px; background-image: url('../assets/img/panel-history.webp'); }
.history h3 { left: 21px; top: 21px; font-size: 17.5px; font-weight: 500; line-height: 24px; font-stretch: 84%; color: #fbecfe; }
.feed { position: absolute; inset: 0; }
.fd { position: absolute; left: 0; right: 0; top: calc(76px + var(--i) * 105px); height: 64px; }
.fd-thumb { position: absolute; left: 21px; top: 1px; font-size: 22.5px; }
.fd > span:not(.mini), .fd > time { position: absolute; left: 97px; font-size: 13.8px; line-height: 18px; font-stretch: 93%; white-space: nowrap; max-width: 150px; overflow: hidden; text-overflow: ellipsis; }
.fd-name { top: -4px; color: #f0c8fc; font-weight: 500; }
.fd-prod { top: 16px; color: #c9a6ec; }
.fd-amt { top: 34px; color: #d5cfe4; font-stretch: 100% !important; }
.fd-amt b { color: var(--green); font-weight: 700; }
.fd-time { top: 54px; color: var(--mute); }
.fd.is-me .fd-name { color: #ffd9ff; }
.fd.is-new { animation: feedIn .7s ease-out; }
@keyframes feedIn { from { opacity: 0; transform: translateX(14px); filter: brightness(2); } }

.season { left: 1406px; top: 500px; width: 254px; height: 241px; background-image: url('../assets/img/panel-season.webp'); }
.season h3 { left: 0; right: 0; top: 110px; text-align: center; font: 400 21px/28px var(--serif); transform: scaleX(.94); color: #fbd7fc; text-shadow: 0 0 10px rgba(220, 140, 255, .45), 0 2px 2px rgba(0, 0, 0, .8); }
.countdown { position: absolute; left: 0; right: 0; top: 140px; text-align: center; font-size: 22.5px; font-weight: 700; line-height: 26px; font-stretch: 75%; word-spacing: -2px; color: var(--gold); font-variant-numeric: tabular-nums; text-shadow: 0 0 10px rgba(255, 230, 140, .35), 0 2px 2px rgba(0, 0, 0, .8); white-space: pre; }
.season p { left: 0; right: 0; top: 170px; text-align: center; font-size: 13.8px; line-height: 18px; font-stretch: 81%; color: #b58cd5; }
.season .btn-details { position: absolute; left: 68px; top: 198px; width: 119px; height: 33px; font-size: 13.5px; font-stretch: 93%; }

.power { left: 1406px; top: 753px; width: 254px; height: 163px; background-image: url('../assets/img/panel-power.webp'); }
.power h3 { left: 21px; top: 69px; font: 400 23.5px/30px var(--serif); color: #f4c3fa; text-shadow: 0 0 10px rgba(220, 140, 255, .4), 0 2px 2px rgba(0, 0, 0, .8); }
.power p { left: 20px; top: 95px; font-size: 14.6px; line-height: 20px; color: #e2dae3; text-shadow: 0 1px 2px rgba(0, 0, 0, .9); }
.power .btn-explore-sm { position: absolute; left: 15px; top: 118px; width: 92px; height: 33px; font-size: 12.5px; font-stretch: 90%; }

/* ---------------- Görsel butonlar (referanstan) ---------------- */
.btn-img {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: center / 100% 100% no-repeat;
  color: #fff;
  font-weight: 700;
  text-shadow: 0 1px 2px rgba(30, 0, 60, .9);
  transition: filter .2s ease, transform .12s ease;
}
.btn-img:hover:not(:disabled) { filter: brightness(1.18) drop-shadow(0 0 10px rgba(190, 120, 255, .75)); }
.btn-img:active:not(:disabled) { transform: translateY(1px) scale(.985); }
.btn-img:disabled { filter: grayscale(.8) brightness(.6); }
.btn-buy { background-image: url('../assets/img/btn-buy.png'); }
.btn-shop { background-image: url('../assets/img/btn-shop.png'); }
.btn-explore { background-image: url('../assets/img/btn-explore.png'); font-size: 17.5px; font-stretch: 90%; }
.btn-details { background-image: url('../assets/img/btn-details.png'); }
.btn-explore-sm { background-image: url('../assets/img/btn-explore-sm.png'); }

/* ---------------- Hero ---------------- */
.hero { position: relative; width: 1090px; height: 274px; background: url('../assets/img/hero.webp') 0 0 / 100% 100% no-repeat; }
.hero h1 { position: absolute; left: 43px; top: 43px; font: 400 50px/48px var(--serif); color: #dc86fb; transform: scaleX(.83); transform-origin: 0 0; white-space: nowrap; }
.hero h1 span { display: block; background: linear-gradient(180deg, #d77ffa 10%, #e391fd 90%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 0 12px rgba(200, 100, 255, .35)) drop-shadow(0 2px 1px rgba(0, 0, 0, .6)); }
.hero p { position: absolute; left: 44px; top: 147px; font-size: 17px; line-height: 22px; font-stretch: 90%; color: #b39fe0; }
.hero .btn-shop { position: absolute; left: 36px; top: 186px; width: 222px; height: 62px; font-size: 18.5px; font-stretch: 90%; padding-left: 14px; gap: 12px; }
.hero .btn-shop svg { width: 18px; height: 18px; margin-left: 2px; color: #d9c6ff; }

/* ---------------- Ürünler ---------------- */
.sec-head { position: relative; height: 31px; margin-top: 21px; }
.crown { position: absolute; left: 6px; top: 0; width: 34px; height: 31px; }
.sec-head h2 { position: absolute; left: 54px; top: -4px; font: 400 26.5px/36px var(--serif); transform: scaleX(.94); transform-origin: 0 50%; color: var(--pink); white-space: nowrap; text-shadow: 0 0 10px rgba(240, 160, 255, .35); }
.sec-line { position: absolute; left: 230px; width: 730px; top: 15px; height: 1px; background: linear-gradient(90deg, #7656b4, rgba(118, 86, 180, .75) 75%, rgba(118, 86, 180, 0)); }
.sec-line::before { content: ''; position: absolute; left: -6px; top: -3.5px; width: 7px; height: 7px; transform: rotate(45deg); border: 1.4px solid #8e6fcf; background: var(--bg); }
.see-all { position: absolute; right: 6px; top: 5px; display: inline-flex; align-items: center; gap: 7px; font-size: 16.2px; line-height: 20px; font-stretch: 94%; color: #a071db; }
.see-all svg { width: 16px; height: 16px; }
.see-all:hover { color: #d9b8ff; }
.back, .sec-count, .sort { display: none; }

.grid { display: grid; grid-template-columns: repeat(4, 256px); column-gap: 20px; row-gap: 16px; margin: 18px 0 0 6px; grid-auto-rows: 228px; }
.grid.is-home { grid-template-rows: 243px 212px; grid-auto-rows: 0; }

.card {
  position: relative;
  width: 256px;
  height: 100%;
  background: #0d0919 center / 100% 100% no-repeat;
  transition: transform .2s ease, filter .2s ease;
}
.card:hover { transform: translateY(-3px); filter: brightness(1.08) drop-shadow(0 6px 16px rgba(120, 50, 220, .35)); }
.card-hit { position: absolute; inset: 0; z-index: 0; border-radius: 6px; }
.card-hit:focus-visible { outline-offset: -3px; }
.c-name { position: absolute; left: 16px; bottom: 71px; font-size: 16px; font-weight: 500; line-height: 20px; font-stretch: 79%; color: #fcf6fe; white-space: nowrap; pointer-events: none; text-shadow: 0 1px 2px rgba(0, 0, 0, .9); }
.c-sub { position: absolute; left: 17px; bottom: 54px; font-size: 13.5px; line-height: 17px; font-stretch: 77%; color: #6d5d9e; white-space: nowrap; pointer-events: none; }
.c-price { position: absolute; left: 12px; bottom: 11px; height: 31px; display: flex; align-items: center; gap: 7px; pointer-events: none; }
.c-price img { width: 32px; height: 31px; }
.c-price span { font-size: 20.5px; font-weight: 500; font-stretch: 83%; color: #fff; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.c-buy { position: absolute; left: 134px; bottom: 8px; width: 111px; height: 36px; z-index: 1; font-size: 13.8px; font-stretch: 76%; padding-left: 1px; }
.grid.is-home .row-2 .c-price { bottom: 15px; }
.grid.is-home .row-2 .c-buy { bottom: 12px; }
.card { background-image: url('../assets/img/card-frame-1.webp'); }
.card.row-2 { background-image: url('../assets/img/card-frame-2.webp'); }
.c-name, .c-sub { max-width: 226px; overflow: hidden; text-overflow: ellipsis; }

/* Kart görseli: mor sis içinde süzülen hediye kartı */
.c-art { position: absolute; left: 6px; right: 6px; top: 6px; bottom: 96px; display: grid; place-items: center; pointer-events: none; perspective: 520px; overflow: hidden; border-radius: 4px 4px 0 0; }
.card.row-2 .c-art { bottom: 92px; }
.c-glow { position: absolute; left: 12%; right: 12%; bottom: -6%; height: 46%; border-radius: 50%; background: radial-gradient(closest-side, rgba(176, 102, 255, .55), rgba(120, 50, 230, .18) 60%, transparent); filter: blur(2px); }
.c-art .gc { font-size: 14px; transform: rotateY(-16deg) rotateX(10deg) rotate(-7deg); transition: transform .35s cubic-bezier(.2, .8, .2, 1); }
.card.row-2 .c-art .gc { font-size: 12.4px; }
.card:hover .c-art .gc { transform: rotateY(-6deg) rotateX(4deg) rotate(-3deg) translateY(-4px) scale(1.04); }

/* ---------------- Hediye kartı (em tabanlı) ---------------- */
.gc {
  position: relative;
  flex: none;
  width: 10em;
  height: 6.3em;
  border-radius: .6em;
  overflow: hidden;
  color: var(--fg);
  font-family: var(--sans);
  background:
    radial-gradient(120% 90% at 85% 0%, rgba(255, 255, 255, .16), transparent 55%),
    linear-gradient(135deg, var(--c1), var(--c2));
  box-shadow: 0 .7em 1.5em rgba(0, 0, 0, .6), 0 0 1.8em rgba(160, 90, 255, .5), inset 0 0 0 .07em rgba(255, 255, 255, .28);
}
.gc-glare { position: absolute; top: -60%; right: -30%; width: 75%; height: 220%; background: linear-gradient(100deg, transparent 35%, rgba(255, 255, 255, .2) 50%, transparent 65%); transform: rotate(18deg); }
.gc-band { position: absolute; left: 0; right: 0; bottom: 0; height: .34em; background: var(--ac); }
.gc-brand { position: absolute; left: .62em; top: .5em; right: .6em; font-size: 1.12em; font-weight: 700; line-height: 1.15; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gc-kind { position: absolute; left: 1.3em; top: 3.3em; font-size: .5em; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; opacity: .78; }
.gc-chip { position: absolute; left: .65em; top: 2.75em; width: 1.25em; height: .92em; border-radius: .2em; background: linear-gradient(135deg, #f6e2a4, #b58f3d); box-shadow: inset 0 0 0 .05em rgba(0, 0, 0, .25); }
.gc-val { position: absolute; right: .6em; bottom: .55em; font-size: 1.22em; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.gc-flag { position: absolute; left: .65em; bottom: .62em; width: 1.4em; height: .93em; }

.flag { display: inline-block; flex: none; width: 24px; height: 16px; border-radius: 2px; overflow: hidden; box-shadow: 0 0 0 1px rgba(255, 255, 255, .28); vertical-align: middle; }
.flag svg { display: block; width: 100%; height: 100%; }
.gc .flag { border-radius: .12em; box-shadow: 0 0 0 .06em rgba(255, 255, 255, .45); }

/* Küçük yuvarlak marka ikonu */
.mini { position: relative; flex: none; display: grid; place-items: center; width: 2.7em; height: 2.7em; border-radius: 50%; font-size: 20px; color: var(--fg); background: radial-gradient(circle at 30% 22%, rgba(255, 255, 255, .28), transparent 52%), linear-gradient(135deg, var(--c1), var(--c2)); box-shadow: 0 0 0 .1em rgba(160, 120, 235, .55), 0 0 .7em rgba(168, 85, 247, .55); }
.mini b { font-size: .9em; font-weight: 700; letter-spacing: -.02em; }
.mini-flag { position: absolute; right: -.05em; bottom: .05em; width: 1em !important; height: .67em !important; box-shadow: 0 0 0 .08em #0b0816 !important; }

.empty { grid-column: 1 / -1; padding: 50px 20px; text-align: center; border: 1px dashed rgba(160, 130, 220, .3); border-radius: 10px; display: grid; justify-items: center; gap: 10px; }
.empty h3 { font: 400 26px var(--serif); color: var(--pink); }
.empty p { color: var(--text-3); }

/* Liste görünümü (kategori, arama, tümü) */
.view-list .hero { display: none; }
.view-list .sec-head { margin-top: 22px; height: 44px; }
.view-list .crown { display: none; }
.view-list .back { display: inline-flex; position: absolute; left: 6px; top: 12px; align-items: center; gap: 6px; font-size: 14.5px; color: #a98fe0; }
.view-list .back svg { width: 16px; height: 16px; }
.view-list .back:hover { color: #fff; }
.view-list .sec-head h2 { left: 120px; top: 2px; }
.view-list .sec-count { display: block; position: absolute; left: 120px; top: 40px; font-size: 13px; color: var(--mute); }
.view-list .sec-line, .view-list .see-all { display: none; }
.view-list .sort { display: block; position: absolute; right: 6px; top: 6px; }
.sort select { -webkit-appearance: none; appearance: none; height: 34px; padding: 0 34px 0 12px; border-radius: 8px; border: 1px solid #3f2d5c; background: #0e0a1a url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 10'%3E%3Cpath d='M2 2l6 6 6-6' fill='none' stroke='%23c6b2ef' stroke-width='2'/%3E%3C/svg%3E") right 11px center / 12px no-repeat; font-size: 14px; color: var(--text-2); cursor: pointer; }
.sort option { background: #150e24; }
.view-list .grid { margin-top: 26px; }

/* ---------------- Ortak buton ---------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 22px;
  border-radius: 10px;
  font-size: 15.5px;
  font-weight: 700;
  color: #fff;
  transition: filter .2s, box-shadow .2s, transform .12s;
}
.btn.primary { background: linear-gradient(180deg, #8d4ff0 0%, #6a2ed2 55%, #4c1c9f 100%); box-shadow: inset 0 0 0 1.5px rgba(232, 205, 255, .65), inset 0 1px 0 rgba(255, 255, 255, .3), 0 0 14px rgba(150, 80, 240, .45); text-shadow: 0 1px 2px rgba(30, 0, 60, .9); }
.btn.ghost { background: rgba(40, 26, 70, .65); box-shadow: inset 0 0 0 1px rgba(170, 140, 230, .45); color: var(--text-2); }
.btn.danger { background: linear-gradient(180deg, #b8324e, #861c35); box-shadow: inset 0 0 0 1.5px rgba(255, 180, 200, .5); }
.btn:hover:not(:disabled) { filter: brightness(1.15); box-shadow: inset 0 0 0 1.5px rgba(232, 205, 255, .8), 0 0 18px rgba(168, 85, 247, .6); }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:disabled { filter: grayscale(.7) brightness(.6); }
.btn.block { width: 100%; }
.link { color: #c49cff; font-size: 14px; text-decoration: underline; text-underline-offset: 3px; }
.link:hover { color: #fff; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* Çevrim içi mod: giriş yapılmamış uyarısı */
.login-banner { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 16px; padding: 10px 16px; font-size: 15px; color: #fde68a; background: rgba(251, 191, 36, 0.1); border-bottom: 1px solid rgba(251, 191, 36, 0.35); text-align: center; }
.login-banner .btn-login { display: inline-flex; align-items: center; min-height: 36px; padding: 0 16px; border-radius: 8px; font-weight: 700; color: #fff; text-decoration: none; background: linear-gradient(180deg, #7c3aed, #5b21b6); }

.user-btn.is-guest .avatar { filter: grayscale(1) brightness(.7); }
.um-login { color: #fde68a !important; font-weight: 600; }