/* Gri Software — site stili. Telefon öncelikli, RTL uyumlu (mantıksal özellikler). */

@font-face { font-family: "Inter"; font-style: normal; font-display: swap; font-weight: 100 900; src: url(font/inter-latin-wght-normal.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: "Inter"; font-style: normal; font-display: swap; font-weight: 100 900; src: url(font/inter-latin-ext-wght-normal.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: "Inter"; font-style: normal; font-display: swap; font-weight: 100 900; src: url(font/inter-cyrillic-wght-normal.woff2) format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Inter"; font-style: normal; font-display: swap; font-weight: 100 900; src: url(font/inter-cyrillic-ext-wght-normal.woff2) format("woff2"); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
@font-face { font-family: "Space Grotesk"; font-style: normal; font-display: swap; font-weight: 300 700; src: url(font/space-grotesk-latin-wght-normal.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: "Space Grotesk"; font-style: normal; font-display: swap; font-weight: 300 700; src: url(font/space-grotesk-latin-ext-wght-normal.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; }

:root {
  --zemin: #0a0c11;
  --zemin-2: #10131a;
  --yuzey: #151922;
  --yuzey-2: #1b202b;
  --cizgi: rgba(255, 255, 255, .08);
  --cizgi-2: rgba(255, 255, 255, .14);
  --yazi: #eef1f7;
  --soluk: #9aa3b4;
  --sonuk: #6b7385;
  --vurgu: #8b7bff;
  --vurgu-2: #2ad4f0;
  --gecis: linear-gradient(120deg, var(--vurgu), var(--vurgu-2));
  --sicak: #ffb547;
  --yaricap: 18px;
  --yaricap-k: 12px;
  --golge: 0 18px 50px -20px rgba(0, 0, 0, .7);
  --baslik-font: "Space Grotesk", "Inter", system-ui, sans-serif;
  --govde-font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", "Noto Sans Arabic", "Noto Sans Devanagari", sans-serif;
  --ust-yukseklik: 68px;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; min-height: 100vh; display: flex; flex-direction: column;
  background: var(--zemin); color: var(--yazi);
  font: 400 16px/1.6 var(--govde-font);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
main { flex: 1; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3 { font-family: var(--baslik-font); line-height: 1.15; letter-spacing: -.02em; margin: 0; }
:lang(ar) h1, :lang(ar) h2, :lang(ar) h3, :lang(hi) h1, :lang(hi) h2, :lang(hi) h3 { font-family: var(--govde-font); letter-spacing: 0; }
p { margin: 0; }
button, input, select { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--vurgu-2); outline-offset: 3px; border-radius: 6px; }
::selection { background: rgba(139, 123, 255, .4); }

.kap { width: 100%; max-width: 1240px; margin-inline: auto; padding-inline: 16px; }
.kap.dar { max-width: 820px; }
@media (min-width: 720px) { .kap { padding-inline: 28px; } }

.atla { position: absolute; inset-inline-start: 12px; top: -60px; z-index: 100; background: var(--vurgu); color: #fff; padding: 10px 16px; border-radius: 10px; }
.atla:focus { top: 12px; }
.gizli-baslik { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.onizleme-serit { background: var(--sicak); color: #1a1200; text-align: center; font-size: 13px; font-weight: 600; padding: 6px 12px; }
.onizleme-serit a { margin-inline-start: 6px; text-decoration: underline; }

/* ---------- Üst çubuk ---------- */
.ust {
  position: sticky; top: 0; z-index: 50;
  background: rgba(10, 12, 17, .78);
  -webkit-backdrop-filter: saturate(160%) blur(16px); backdrop-filter: saturate(160%) blur(16px);
  border-bottom: 1px solid var(--cizgi);
}
.ust-ic { height: var(--ust-yukseklik); display: flex; align-items: center; gap: 20px; }
.logo { display: inline-flex; align-items: center; gap: 10px; font: 700 20px/1 var(--baslik-font); letter-spacing: -.02em; white-space: nowrap; }
.logo b { font-weight: 500; color: var(--soluk); margin-inline-start: 2px; }
.logo-isaret { width: 34px; height: 34px; flex: none; }

.ana-menu { display: flex; gap: 4px; }
.ana-menu a { padding: 8px 12px; border-radius: 10px; color: var(--soluk); font-weight: 500; font-size: 15px; transition: color .2s, background .2s; }
.ana-menu a:hover { color: var(--yazi); background: rgba(255, 255, 255, .05); }
.ana-menu a[aria-current="page"] { color: var(--yazi); background: rgba(139, 123, 255, .14); }

.ust-sag { margin-inline-start: auto; display: flex; align-items: center; gap: 8px; }
.ust-ara { position: relative; display: flex; align-items: center; }
.ust-ara svg, .suzgec-ara svg { position: absolute; inset-inline-start: 12px; width: 18px; height: 18px; fill: var(--sonuk); pointer-events: none; }
.ust-ara input, .suzgec-ara input {
  width: 230px; height: 40px; padding-inline: 38px 12px; border-radius: 12px;
  background: var(--yuzey); border: 1px solid var(--cizgi); outline: none; transition: border-color .2s, width .3s;
}
.ust-ara input:focus, .suzgec-ara input:focus { border-color: var(--vurgu); }
.ust-ara input::placeholder, .suzgec-ara input::placeholder { color: var(--sonuk); }

.dil-menu { position: relative; }
.dil-menu summary {
  list-style: none; cursor: pointer; height: 40px; display: flex; align-items: center; gap: 6px; padding-inline: 10px;
  border-radius: 12px; border: 1px solid var(--cizgi); background: var(--yuzey); font-weight: 600; font-size: 13px;
}
.dil-menu summary::-webkit-details-marker { display: none; }
.dil-menu summary svg { width: 18px; height: 18px; fill: var(--soluk); }
.dil-menu ul {
  position: absolute; inset-inline-end: 0; top: calc(100% + 8px); margin: 0; padding: 6px; list-style: none; min-width: 200px;
  background: var(--yuzey-2); border: 1px solid var(--cizgi-2); border-radius: 14px; box-shadow: var(--golge); z-index: 60;
}
.dil-menu li a { display: block; padding: 9px 12px; border-radius: 9px; font-size: 15px; }
.dil-menu li a:hover { background: rgba(255, 255, 255, .06); }
.dil-menu li a[aria-current] { color: var(--vurgu-2); font-weight: 600; }

.menu-btn { display: none; width: 42px; height: 40px; border-radius: 12px; border: 1px solid var(--cizgi); background: var(--yuzey); padding: 0; flex-direction: column; align-items: center; justify-content: center; gap: 4px; cursor: pointer; }
.menu-btn span { width: 18px; height: 2px; background: var(--yazi); border-radius: 2px; transition: transform .25s, opacity .25s; }
.menu-btn[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.menu-btn[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menu-btn[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 1080px) { .ust-ara input { width: 170px; } }
@media (max-width: 920px) {
  .ust-ara { display: none; }
  .menu-btn { display: flex; }
  .ana-menu {
    position: absolute; inset-inline: 0; top: var(--ust-yukseklik); flex-direction: column; gap: 2px; padding: 10px 16px 18px;
    background: rgba(12, 14, 20, .97); border-bottom: 1px solid var(--cizgi);
    -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
    visibility: hidden; opacity: 0; transform: translateY(-8px); transition: opacity .2s, transform .2s, visibility .2s;
  }
  .ana-menu.acik { visibility: visible; opacity: 1; transform: none; }
  .ana-menu a { padding: 13px 14px; font-size: 17px; }
}
@media (max-width: 400px) { .logo b { display: none; } }

/* ---------- Düğmeler ---------- */
.dugme {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 22px;
  border-radius: 14px; border: 0; cursor: pointer; font-weight: 600; color: #fff;
  background: var(--gecis); box-shadow: 0 10px 30px -10px rgba(139, 123, 255, .6);
  transition: transform .2s, box-shadow .2s, filter .2s;
}
.dugme:hover { transform: translateY(-2px); filter: brightness(1.08); }
.dugme.ikincil { background: rgba(255, 255, 255, .06); border: 1px solid var(--cizgi-2); box-shadow: none; }
.dugme.ikincil:hover { background: rgba(255, 255, 255, .1); }

.play-btn {
  display: inline-flex; align-items: center; gap: 10px; height: 52px; padding: 0 18px 0 14px; border-radius: 12px;
  background: #000; border: 1px solid rgba(255, 255, 255, .25); color: #fff; transition: transform .2s, border-color .2s;
}
.play-btn:hover { transform: translateY(-2px); border-color: rgba(255, 255, 255, .5); }
.play-btn svg { width: 26px; height: 26px; fill: #fff; }
.play-btn span { display: flex; flex-direction: column; font: 600 19px/1.05 var(--govde-font); letter-spacing: -.01em; }
.play-btn small { font-size: 10px; font-weight: 500; letter-spacing: .04em; opacity: .85; margin-bottom: 2px; }
.play-btn.yakinda-btn { opacity: .7; cursor: default; border-style: dashed; padding-inline: 18px; }
.play-btn.yakinda-btn:hover { transform: none; }
.play-btn.buyuk { height: 58px; }

.ust-etiket { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--vurgu-2); margin-bottom: 14px; }
:lang(ar) .ust-etiket, :lang(tr) .ust-etiket, :lang(hi) .ust-etiket { letter-spacing: .03em; text-transform: none; font-size: 13px; }
.etiket { display: inline-flex; align-items: center; height: 24px; padding: 0 9px; border-radius: 999px; font-size: 12px; font-weight: 600; color: #d6dbff; background: rgba(139, 123, 255, .14); border: 1px solid rgba(139, 123, 255, .22); white-space: nowrap; }
.rozet { position: absolute; top: 12px; inset-inline-start: 12px; z-index: 2; height: 26px; display: inline-flex; align-items: center; padding: 0 10px; border-radius: 8px; font-size: 12px; font-weight: 700; letter-spacing: .02em; background: var(--vurgu-2); color: #001318; }
.rozet-yakinda { background: var(--sicak); color: #231500; }
.urun-gelistirici .rozet { position: static; height: 22px; }

/* ---------- Üretilmiş kapak sanatı (görsel yokken) ---------- */
.kapak-sanat { position: absolute; inset: 0; overflow: hidden; background: radial-gradient(120% 120% at 0% 0%, var(--r1), transparent 60%), radial-gradient(120% 120% at 100% 100%, var(--r2), transparent 60%), linear-gradient(135deg, color-mix(in srgb, var(--r1) 55%, #0a0c11), color-mix(in srgb, var(--r2) 55%, #0a0c11)); }
.kapak-sanat i { position: absolute; border-radius: 50%; filter: blur(2px); opacity: .55; }
.kapak-sanat i:nth-child(1) { width: 60%; aspect-ratio: 1; top: -20%; inset-inline-end: -10%; background: radial-gradient(circle, rgba(255, 255, 255, .35), transparent 65%); }
.kapak-sanat i:nth-child(2) { width: 34%; aspect-ratio: 1; bottom: -12%; inset-inline-start: 8%; border: 2px solid rgba(255, 255, 255, .28); background: none; }
.kapak-sanat i:nth-child(3) { width: 14%; aspect-ratio: 1; top: 22%; inset-inline-start: 22%; background: rgba(255, 255, 255, .5); filter: blur(0); }
.kapak-sanat b { position: absolute; inset: 0; display: grid; place-items: center; font-size: clamp(42px, 9vw, 84px); filter: drop-shadow(0 10px 20px rgba(0, 0, 0, .35)); }
.kapak-sanat.buyuk b { font-size: clamp(90px, 18vw, 220px); inset-inline-start: 40%; opacity: .9; }
@media (max-width: 720px) { .kapak-sanat.buyuk b { inset-inline-start: 0; top: -30%; opacity: .5; } }

/* ---------- Vitrin (öne çıkanlar) ---------- */
.vitrin { position: relative; isolation: isolate; }
.vitrin-izler { position: relative; height: clamp(460px, 72vh, 660px); }
.vitrin-slayt { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity .8s ease, visibility .8s; display: flex; align-items: flex-end; }
.vitrin-slayt.etkin { opacity: 1; visibility: visible; }
.vitrin-arka { position: absolute; inset: 0; z-index: -1; }
.vitrin-arka img { width: 100%; height: 100%; object-fit: cover; }
.vitrin-arka::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, var(--zemin) 2%, rgba(10, 12, 17, .55) 45%, rgba(10, 12, 17, .15)), linear-gradient(to right, rgba(10, 12, 17, .85), transparent 65%); }
[dir="rtl"] .vitrin-arka::after { background: linear-gradient(to top, var(--zemin) 2%, rgba(10, 12, 17, .55) 45%, rgba(10, 12, 17, .15)), linear-gradient(to left, rgba(10, 12, 17, .85), transparent 65%); }
.vitrin-ic { padding-bottom: 80px; max-width: 1240px; }
.vitrin-ic > * { max-width: 620px; }
.vitrin-baslik { font-size: clamp(38px, 7vw, 72px); font-weight: 700; margin-bottom: 14px; text-shadow: 0 4px 30px rgba(0, 0, 0, .4); }
.vitrin-ic p { font-size: clamp(16px, 2.2vw, 19px); color: #d3d8e3; margin-bottom: 16px; }
.vitrin-etiketler { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 22px; }
.vitrin-dugmeler { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.vitrin-dugmeler.orta { justify-content: center; }
.vitrin-noktalar { position: absolute; bottom: 30px; inset-inline: 0; display: flex; gap: 8px; }
.vitrin-noktalar button { width: 44px; height: 24px; padding: 0; border: 0; background: none; cursor: pointer; display: grid; place-items: center; }
.vitrin-noktalar span { display: block; width: 100%; height: 4px; border-radius: 4px; background: rgba(255, 255, 255, .22); overflow: hidden; position: relative; }
.vitrin-noktalar [aria-selected="true"] span::after { content: ""; position: absolute; inset: 0; background: var(--gecis); transform-origin: left; animation: ilerle 7s linear forwards; }
[dir="rtl"] .vitrin-noktalar [aria-selected="true"] span::after { transform-origin: right; }
.vitrin.durdu .vitrin-noktalar [aria-selected="true"] span::after { animation: none; transform: scaleX(1); }
@keyframes ilerle { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ---------- Kahraman (katalog boşken) ---------- */
.kahraman { position: relative; overflow: hidden; isolation: isolate; padding: clamp(80px, 14vh, 150px) 0 clamp(60px, 10vh, 110px); }
.kahraman-sanat { position: absolute; inset: 0; z-index: -1; -webkit-mask-image: linear-gradient(#000 60%, transparent); mask-image: linear-gradient(#000 60%, transparent); }
.kahraman-sanat i { position: absolute; border-radius: 50%; filter: blur(60px); opacity: .55; animation: suzul 18s ease-in-out infinite alternate; }
.kahraman-sanat i:nth-child(1) { width: 520px; height: 520px; background: #6b5bff; top: -160px; inset-inline-end: -80px; }
.kahraman-sanat i:nth-child(2) { width: 420px; height: 420px; background: #11b5d6; bottom: -200px; inset-inline-end: 22%; animation-delay: -6s; }
.kahraman-sanat i:nth-child(3) { width: 260px; height: 260px; background: #ff5fa2; top: 30%; inset-inline-start: -120px; opacity: .3; animation-delay: -12s; }
.kahraman-sanat i:nth-child(4) { inset: 0; border-radius: 0; filter: none; opacity: 1; animation: none; background-image: linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px); background-size: 48px 48px; mask-image: radial-gradient(ellipse at 60% 30%, #000 20%, transparent 75%); -webkit-mask-image: radial-gradient(ellipse at 60% 30%, #000 20%, transparent 75%); }
@keyframes suzul { to { transform: translate3d(-40px, 50px, 0) scale(1.08); } }
.kahraman h1 { font-size: clamp(40px, 7.5vw, 80px); font-weight: 700; max-width: 900px; margin-bottom: 20px; background: linear-gradient(180deg, #fff 30%, #b9c0d4); -webkit-background-clip: text; background-clip: text; color: transparent; }
.kahraman p { font-size: clamp(17px, 2.3vw, 21px); color: var(--soluk); max-width: 640px; margin-bottom: 32px; }

/* ---------- Sayılar ---------- */
.sayilar { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 1px; background: var(--cizgi); border: 1px solid var(--cizgi); border-radius: var(--yaricap); overflow: hidden; margin-block: 8px 20px; padding: 0; }
.sayilar > div { background: var(--zemin-2); padding: 22px 20px; display: flex; flex-direction: column; gap: 2px; }
.sayilar strong { font: 700 30px/1.1 var(--baslik-font); background: var(--gecis); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sayilar span { color: var(--soluk); font-size: 14px; }

/* ---------- Sıralar ve ızgara ---------- */
.sira { padding-block: 36px; }
.sira-bas { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 22px; }
.sira-bas h2 { font-size: clamp(24px, 3.5vw, 32px); font-weight: 700; }
.tumu { color: var(--soluk); font-weight: 600; font-size: 15px; white-space: nowrap; transition: color .2s; }
.tumu:hover { color: var(--vurgu-2); }
[dir="rtl"] .tumu span { display: inline-block; transform: scaleX(-1); }

.izgara { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 20px; }
.izgara.tek { grid-template-columns: minmax(0, 360px); margin-block: 28px; }
@media (max-width: 640px) {
  .izgara-kaydir { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 78%; overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: -16px; padding-inline: 16px; padding-bottom: 6px; scrollbar-width: none; }
  .izgara-kaydir::-webkit-scrollbar { display: none; }
  .izgara-kaydir > * { scroll-snap-align: start; }
}

.kart { position: relative; display: flex; flex-direction: column; background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: var(--yaricap); overflow: hidden; transition: transform .25s, border-color .25s, box-shadow .25s; }
.kart:hover { transform: translateY(-4px); border-color: var(--cizgi-2); box-shadow: var(--golge); }
.kart-kapak { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--yuzey-2); }
.kart-kapak > img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.kart:hover .kart-kapak > img { transform: scale(1.05); }
.kart-govde { display: flex; gap: 12px; align-items: center; padding: 0 16px; margin-top: -26px; position: relative; z-index: 1; }
.simge { width: 56px; height: 56px; border-radius: 14px; flex: none; object-fit: cover; border: 3px solid var(--yuzey); background: var(--yuzey-2); box-shadow: 0 6px 18px rgba(0, 0, 0, .4); }
.simge-harf { display: grid; place-items: center; font: 700 24px var(--baslik-font); color: #fff; background: linear-gradient(135deg, var(--r1, var(--vurgu)), var(--r2, var(--vurgu-2))); }
.kart-yazi { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding-top: 28px; }
.kart-yazi strong { font: 600 17px/1.25 var(--baslik-font); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kart-etiketler { display: flex; gap: 5px; flex-wrap: wrap; }
.kart-etiketler .etiket { height: 21px; font-size: 11px; padding: 0 7px; }
.kart-kisa { padding: 12px 16px 18px; color: var(--soluk); font-size: 14px; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* ---------- Boş kutu ---------- */
.bos-kutu { text-align: center; padding: 64px 24px; border: 1px dashed var(--cizgi-2); border-radius: 24px; background: linear-gradient(180deg, rgba(139, 123, 255, .06), transparent); margin-block: 24px; }
.bos-kutu h1, .bos-kutu h2 { font-size: clamp(24px, 4vw, 34px); margin-bottom: 10px; }
.bos-kutu p { color: var(--soluk); max-width: 520px; margin-inline: auto; }
.bos-ikon { font-size: 48px; margin-bottom: 14px; }
.hata-404 { border: 0; background: none; padding-block: 110px; }
.kod-404 { font: 700 clamp(90px, 20vw, 170px)/1 var(--baslik-font); background: var(--gecis); -webkit-background-clip: text; background-clip: text; color: transparent; margin-bottom: 8px; }
.hata-404 .vitrin-dugmeler { margin-top: 28px; }

/* ---------- Neden / ilkeler ---------- */
.neden { padding-block: 36px; }
.neden-izgara, .iletisim-izgara { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 18px; }
.neden-kart { padding: 26px 22px; background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: var(--yaricap); position: relative; overflow: hidden; }
.neden-kart::before { content: ""; position: absolute; inset: 0 0 auto; height: 2px; background: var(--gecis); opacity: .7; }
.neden-ikon { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px; background: rgba(139, 123, 255, .12); font-size: 26px; margin-bottom: 18px; }
.neden-kart h2, .neden-kart h3 { font-size: 19px; margin-bottom: 8px; }
.neden-kart p { color: var(--soluk); font-size: 15px; }

/* ---------- Haberler ---------- */
.haber-izgara { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 20px; }
.haber-kart { display: flex; flex-direction: column; background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: var(--yaricap); overflow: hidden; transition: transform .25s, border-color .25s; }
.haber-kart:hover { transform: translateY(-4px); border-color: var(--cizgi-2); }
.haber-gorsel { position: relative; aspect-ratio: 2 / 1; overflow: hidden; }
.haber-gorsel img { width: 100%; height: 100%; object-fit: cover; }
.haber-govde { padding: 18px; display: flex; flex-direction: column; gap: 10px; }
.haber-ust { display: flex; align-items: center; gap: 10px; color: var(--sonuk); font-size: 13px; }
.haber-govde strong { font: 600 19px/1.3 var(--baslik-font); }
.haber-ozet { color: var(--soluk); font-size: 15px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* ---------- Çağrı ---------- */
.cagri { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; margin-block: 40px 70px; padding: 36px clamp(22px, 4vw, 48px); border-radius: 24px; background: radial-gradient(80% 140% at 100% 0%, rgba(42, 212, 240, .18), transparent 60%), radial-gradient(80% 140% at 0% 100%, rgba(139, 123, 255, .22), transparent 60%), var(--yuzey); border: 1px solid var(--cizgi-2); }
.cagri h2 { font-size: clamp(24px, 3.5vw, 32px); margin-bottom: 8px; }
.cagri p { color: var(--soluk); max-width: 560px; }
.kap.cagri { width: calc(100% - 32px); }
@media (min-width: 720px) { .kap.cagri { width: calc(100% - 56px); } }

/* ---------- Sayfa başı ---------- */
.sayfa-bas { position: relative; padding: clamp(56px, 9vh, 96px) 0 clamp(36px, 6vh, 56px); background: radial-gradient(60% 120% at 85% 0%, color-mix(in srgb, var(--r2, #2ad4f0) 22%, transparent), transparent 70%), radial-gradient(60% 120% at 10% 0%, color-mix(in srgb, var(--r1, #8b7bff) 22%, transparent), transparent 70%); border-bottom: 1px solid var(--cizgi); }
.sayfa-bas h1 { font-size: clamp(34px, 6vw, 58px); font-weight: 700; margin-bottom: 14px; }
.sayfa-bas p { color: var(--soluk); font-size: clamp(16px, 2vw, 19px); max-width: 680px; }
.kirinti { display: flex; flex-wrap: wrap; gap: 8px; font-size: 14px; color: var(--sonuk); margin-bottom: 18px; }
.kirinti a:hover { color: var(--yazi); }

/* ---------- Katalog ---------- */
.katalog { padding-block: 32px 70px; }
.suzgec { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.suzgec-ara { position: relative; display: flex; align-items: center; flex: 1 1 280px; max-width: 460px; }
.suzgec-ara input { width: 100%; height: 48px; }
.suzgec-sirala { display: flex; align-items: center; gap: 10px; color: var(--soluk); font-size: 14px; }
.suzgec-sirala select { height: 44px; padding: 0 12px; border-radius: 12px; background: var(--yuzey); border: 1px solid var(--cizgi); }
.cipler { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; margin-bottom: 24px; scrollbar-width: none; }
.cipler::-webkit-scrollbar { display: none; }
.cip { flex: none; height: 38px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--cizgi-2); background: var(--yuzey); cursor: pointer; font-size: 14px; font-weight: 500; color: var(--soluk); transition: all .2s; }
.cip small { opacity: .6; margin-inline-start: 4px; }
.cip:hover { color: var(--yazi); }
.cip[aria-pressed="true"] { background: var(--yazi); color: var(--zemin); border-color: var(--yazi); }
.sonuc-yok { text-align: center; color: var(--soluk); padding: 50px 0; }

/* ---------- Ürün sayfası ---------- */
.urun-bas { position: relative; isolation: isolate; overflow: hidden; padding: 40px 0 44px; min-height: 440px; display: flex; align-items: flex-end; }
.urun-arka { position: absolute; inset: 0; z-index: -1; }
.urun-arka img { width: 100%; height: 100%; object-fit: cover; }
.urun-arka::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, var(--zemin) 4%, rgba(10, 12, 17, .7) 50%, rgba(10, 12, 17, .35)); }
.urun-bas-ic { width: 100%; }
.urun-kimlik { display: flex; gap: 22px; align-items: center; margin-bottom: 18px; }
.urun-simge { width: 112px; height: 112px; border-radius: 26px; flex: none; object-fit: cover; box-shadow: 0 16px 40px rgba(0, 0, 0, .5); border: 1px solid rgba(255, 255, 255, .15); }
.urun-simge.simge-harf { font-size: 48px; }
.urun-kimlik h1 { font-size: clamp(32px, 6vw, 56px); font-weight: 700; margin-bottom: 6px; }
.urun-gelistirici { color: #c9cfdb; font-weight: 500; margin-bottom: 10px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.urun-kimlik .vitrin-etiketler { margin-bottom: 0; }
.urun-kisa { font-size: clamp(16px, 2.2vw, 19px); color: #d3d8e3; max-width: 720px; margin-bottom: 24px; }
@media (max-width: 560px) { .urun-kimlik { flex-direction: column; align-items: flex-start; gap: 14px; } .urun-simge { width: 88px; height: 88px; border-radius: 22px; } }

.urun-govde { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 36px; padding-block: 36px 20px; }
@media (max-width: 960px) { .urun-govde { grid-template-columns: 1fr; } }
.urun-bolum { margin-bottom: 40px; }
.urun-bolum h2, .bilgi-kutu h2 { font-size: 22px; margin-bottom: 16px; }
.ekranlar { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 10px; scrollbar-width: thin; }
.ekranlar a { flex: none; scroll-snap-align: start; border-radius: 16px; overflow: hidden; border: 1px solid var(--cizgi); }
.ekranlar img { height: clamp(300px, 52vh, 460px); width: auto; }
.video { position: relative; aspect-ratio: 16 / 9; border-radius: var(--yaricap); overflow: hidden; border: 1px solid var(--cizgi); background: #000; }
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.ozellik-liste { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.ozellik-liste li { position: relative; padding: 14px 16px; padding-inline-start: 46px; background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: var(--yaricap-k); }
.ozellik-liste li::before { content: ""; position: absolute; inset-inline-start: 16px; top: 17px; width: 18px; height: 18px; border-radius: 50%; background: var(--gecis); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm-1.2 14.2-4-4 1.4-1.4 2.6 2.6 5.6-5.6 1.4 1.4-7 7Z'/%3E%3C/svg%3E") center / contain; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm-1.2 14.2-4-4 1.4-1.4 2.6 2.6 5.6-5.6 1.4 1.4-7 7Z'/%3E%3C/svg%3E") center / contain; }

.urun-yan { display: flex; flex-direction: column; gap: 18px; }
.bilgi-kutu { background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: var(--yaricap); padding: 22px; }
.bilgi-kutu dl { margin: 0; display: grid; gap: 0; }
.bilgi-kutu dl > div { display: flex; justify-content: space-between; gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--cizgi); font-size: 15px; }
.bilgi-kutu dl > div:last-child { border-bottom: 0; }
.bilgi-kutu dt { color: var(--soluk); flex: none; }
.bilgi-kutu dd { margin: 0; text-align: end; font-weight: 500; }
.dil-listesi { font-size: 14px; line-height: 1.5; }
.yan-baglanti { display: flex; align-items: center; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid var(--cizgi); color: var(--soluk); transition: color .2s; }
.yan-baglanti:last-child { border-bottom: 0; }
.yan-baglanti::after { content: "→"; }
[dir="rtl"] .yan-baglanti::after { content: "←"; }
.yan-baglanti:hover { color: var(--vurgu-2); }

/* ---------- Metin / yasal ---------- */
.metin { padding-block: 40px 70px; font-size: 17px; line-height: 1.75; color: #d5dae4; }
.metin p, .metin ul { margin: 0 0 18px; }
.metin h2 { font-size: 24px; margin: 38px 0 14px; color: var(--yazi); }
.metin a { color: var(--vurgu-2); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.metin ul { padding-inline-start: 22px; }
.metin li { margin-bottom: 8px; }
.metin strong { color: var(--yazi); }
.yasal { font-size: 16px; }
.yasal h2 { font-size: 20px; }
.bilgi-not { padding: 12px 16px; border-radius: var(--yaricap-k); background: rgba(42, 212, 240, .08); border: 1px solid rgba(42, 212, 240, .25); font-size: 15px; }
.yasal-liste { columns: 2 220px; }
.yazi-gorsel { border-radius: var(--yaricap); margin-bottom: 30px; }
.yazi .sayfa-bas h1 { font-size: clamp(30px, 5vw, 48px); }

/* ---------- İletişim ---------- */
.iletisim-izgara { padding-block: 40px 20px; }
.iletisim-kart { display: flex; flex-direction: column; transition: transform .25s, border-color .25s; }
.iletisim-kart:hover { transform: translateY(-4px); border-color: var(--cizgi-2); }
.iletisim-kart p { flex: 1; margin-bottom: 18px; }
.iletisim-eposta { color: var(--vurgu-2); font-weight: 600; font-size: 15px; word-break: break-all; }
.iletisim-not { color: var(--sonuk); text-align: center; padding-bottom: 70px; }

/* ---------- Alt bilgi ---------- */
.alt { border-top: 1px solid var(--cizgi); background: var(--zemin-2); margin-top: 20px; }
.alt-ic { display: grid; grid-template-columns: 1.6fr repeat(auto-fit, minmax(130px, 1fr)); gap: 32px; padding-block: 52px 36px; }
@media (max-width: 820px) { .alt-ic { grid-template-columns: 1fr 1fr; } .alt-marka { grid-column: 1 / -1; } }
.alt-marka p { color: var(--soluk); font-size: 15px; margin: 16px 0 12px; max-width: 340px; }
.alt-eposta { color: var(--vurgu-2); font-weight: 600; font-size: 15px; }
.alt nav { display: flex; flex-direction: column; gap: 10px; }
.alt nav h2 { font: 700 12px/1 var(--govde-font); letter-spacing: .12em; text-transform: uppercase; color: var(--sonuk); margin-bottom: 6px; }
.alt nav a { color: var(--soluk); font-size: 15px; transition: color .2s; }
.alt nav a:hover { color: var(--yazi); }
.alt-son { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; padding-block: 20px 28px; border-top: 1px solid var(--cizgi); color: var(--sonuk); font-size: 13px; }

/* ---------- Büyüteç ---------- */
.buyutec { position: fixed; inset: 0; z-index: 200; background: rgba(0, 0, 0, .92); display: flex; align-items: center; justify-content: center; padding: 20px; }
.buyutec img { max-height: 92vh; max-width: 100%; border-radius: 14px; }
.buyutec button { position: absolute; top: 16px; inset-inline-end: 16px; width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--cizgi-2); background: rgba(255, 255, 255, .08); color: #fff; font-size: 22px; cursor: pointer; }

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

.urun-bolum.metin { padding-block: 0; }

/* Tarayıcıda oyna */
.web-btn { display: inline-flex; align-items: center; gap: 10px; height: 52px; padding: 0 20px 0 14px; border-radius: 12px; color: #1a1200; background: linear-gradient(135deg, #ffd36b, #ff9f43); box-shadow: 0 10px 30px -10px rgba(255, 159, 67, .7); font-weight: 700; transition: transform .2s, filter .2s; }
.web-btn:hover { transform: translateY(-2px); filter: brightness(1.06); }
.web-btn svg { width: 26px; height: 26px; fill: #1a1200; }
.web-btn span { display: flex; flex-direction: column; font: 700 18px/1.05 var(--govde-font); }
.web-btn small { font-size: 10px; font-weight: 600; letter-spacing: .04em; opacity: .8; margin-bottom: 2px; text-transform: uppercase; }
:lang(tr) .web-btn small { text-transform: none; }
.web-btn.buyuk { height: 58px; }
/* APK indir (Play öncesi doğrudan kurulum) */
.apk-btn { display: inline-flex; align-items: center; gap: 10px; height: 52px; padding: 0 20px 0 14px; border-radius: 12px; color: #eafff3; background: linear-gradient(135deg, #1f7a52, #12513a); box-shadow: 0 10px 30px -12px rgba(18, 81, 58, .8); font-weight: 700; transition: transform .2s, filter .2s; }
.apk-btn:hover { transform: translateY(-2px); filter: brightness(1.08); }
.apk-btn svg { width: 26px; height: 26px; color: #b8f5d4; }
.apk-btn span { display: flex; flex-direction: column; font: 700 18px/1.05 var(--govde-font); }
.apk-btn small { font-size: 10px; font-weight: 600; letter-spacing: .04em; opacity: .85; margin-bottom: 2px; }
.apk-btn.buyuk { height: 58px; }
.apk-not { margin: 10px 0 0; max-width: 560px; font-size: 13px; line-height: 1.5; opacity: .72; }

/* Alt bilgide düğme görünümlü bağlantı (çerez tercihleri) */
.alt nav .alt-bag { all: unset; cursor: pointer; color: var(--soluk); font-size: 15px; transition: color .2s; }
.alt nav .alt-bag:hover { color: var(--yazi); }
.alt nav .alt-bag:focus-visible { outline: 2px solid var(--vurgu-2); outline-offset: 3px; border-radius: 4px; }

/* Çerez onay bandı (yalnız ölçüm açıksa, olcum.js ekler) */
.cerez-bant { position: fixed; z-index: 60; inset-inline: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); max-width: 560px; margin-inline: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; padding: 16px 18px; background: rgba(21, 25, 34, .97); border: 1px solid var(--cizgi-2); border-radius: var(--yaricap-k); box-shadow: var(--golge); backdrop-filter: blur(12px); }
.cerez-bant p { margin: 0; flex: 1 1 260px; color: var(--soluk); font-size: 14px; line-height: 1.5; }
.cerez-bant p a { color: var(--yazi); text-decoration: underline; }
.cerez-bant div { display: flex; gap: 8px; flex: none; }
.cerez-bant button { font: 600 14px/1 var(--govde-font); min-height: 42px; padding: 0 18px; border-radius: 10px; cursor: pointer; border: 1px solid var(--cizgi-2); background: transparent; color: var(--yazi); }
.cerez-bant button.kabul { background: var(--gecis); color: #0a0c11; border-color: transparent; }
.cerez-bant button:focus-visible { outline: 2px solid var(--vurgu-2); outline-offset: 2px; }