/* Yeşil Okey — site teması
   Düzen fikri: gece, tepeden lamba ışığı düşen bir okey masası. Zemin keçe, bölümleri ahşap ıstaka çıtaları ayırır,
   başlık etiketleri ve sayılar okey taşlarıdır. Bootstrap yalnızca ızgara, menü, akordeon ve pencere için kullanılır. */
:root {
  --felt-0: #020d07;
  --felt-1: #04190e;
  --felt-2: #0a3a22;
  --felt-3: #0b6e3a;
  --glow: #3cff9a;
  --mint: #8affc4;
  --mist: #d4f7e4;
  --muted: #8fbca5;
  --ivory: #f3eee2;
  --ivory-2: #e6dfcf;
  --ivory-edge: #c4b89e;
  --gold: #ffd64a;
  --gold-2: #e89a00;
  --gold-ink: #3a2000;
  --wood-1: #8a5428; --wood-2: #6b3d18; --wood-3: #4a2810; --wood-4: #2a1606;
  --t-red: #e0401e; --t-blue: #2a78ea; --t-yellow: #e9a91c; --t-black: #1b2420;
  --line: rgba(138,255,196,.16);
  --line-2: rgba(138,255,196,.3);
  --panel: rgba(4,25,14,.72);
  --logo: 'Baloo 2', 'Rubik', 'Segoe UI', sans-serif;
  --body: 'Rubik', 'Segoe UI', system-ui, sans-serif;
  --r: 18px;
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 .09 0 0 0 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  color-scheme: dark;

  --bs-body-bg: var(--felt-0);
  --bs-body-color: var(--mist);
  --bs-body-font-family: var(--body);
  --bs-border-color: var(--line);
  --bs-link-color-rgb: 138,255,196;
  --bs-link-hover-color-rgb: 255,214,74;
  --bs-emphasis-color: #fff;
  --bs-heading-color: #fff;
}

* { -webkit-tap-highlight-color: transparent; }
img { max-width: 100%; height: auto; }
html { scroll-behavior: smooth; scroll-padding-top: 88px; overflow-x: hidden; overflow-x: clip; }
html, body { max-width: 100%; }
body {
  background-color: var(--felt-0);
  background-image:
    var(--grain),
    radial-gradient(ellipse 80% 55% at 50% -6%, rgba(36,170,100,.42), transparent 70%),
    linear-gradient(180deg, var(--felt-2) 0, var(--felt-1) 680px, var(--felt-0) 1400px);
  background-repeat: repeat, no-repeat, no-repeat;
  color: var(--mist);
  font: 400 1rem/1.65 var(--body);
  overflow-x: hidden; overflow-x: clip;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } }

h1, h2, h3, h4, .disp { font-family: var(--logo); font-weight: 800; letter-spacing: -.01em; line-height: 1.05; color: #fff; text-wrap: balance; }
h1 { font-size: clamp(2.5rem, 7vw, 5.2rem); }
h2 { font-size: clamp(2rem, 4.6vw, 3.4rem); }
h3 { font-size: clamp(1.35rem, 2.4vw, 1.75rem); }
p { text-wrap: pretty; }
a { text-underline-offset: 3px; }
.lead-x { font-size: clamp(1.08rem, 1.6vw, 1.3rem); color: var(--mist); max-width: 60ch; }
.muted { color: var(--muted); }
.em-glow { color: var(--glow); }
.em-gold { color: var(--gold); }
.wrapx { width: 100%; max-width: 1240px; margin-inline: auto; padding-left: max(24px, env(safe-area-inset-left, 0px)); padding-right: max(24px, env(safe-area-inset-right, 0px)); }
.eyebrow { display: inline-flex; align-items: center; gap: .6rem; font: 700 .78rem/1 var(--body); letter-spacing: .22em; text-transform: uppercase; color: var(--mint); }
.eyebrow::before { content: ""; width: 26px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, transparent, var(--glow)); }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; border-radius: 6px; }

/* ---------- okey taşı ---------- */
.tas {
  --w: 46px;
  position: relative; flex: none; width: var(--w); aspect-ratio: 46 / 64;
  display: grid; place-items: center; padding-bottom: calc(var(--w) * .2); box-sizing: border-box; height: auto;
  border-radius: calc(var(--w) * .16);
  background: linear-gradient(180deg, #fffdf6 0%, #f3ecdc 60%, #e4dbc6 100%);
  box-shadow: 0 calc(var(--w) * .07) 0 var(--ivory-edge), 0 calc(var(--w) * .1) calc(var(--w) * .22) rgba(0,0,0,.42), inset 0 1px 0 #fff;
  font: 900 calc(var(--w) * .56)/1 var(--body); color: var(--t-black); letter-spacing: -.03em;
  user-select: none;
}
.tas::after { content: ""; position: absolute; bottom: 14%; left: 50%; width: 18%; aspect-ratio: 1; border-radius: 50%; transform: translateX(-50%); background: currentColor; opacity: .85; }
.tas.k { color: var(--t-red); } .tas.m { color: var(--t-blue); } .tas.s { color: var(--t-yellow); } .tas.y { color: var(--t-black); }
.tas.joker::after { display: none; }
.tas.joker svg { width: 66%; height: auto; margin-top: 8%; fill: #17a95e; }
.tas.okey { box-shadow: 0 calc(var(--w) * .07) 0 #c99a1e, 0 0 0 2px var(--gold), 0 0 22px rgba(255,214,74,.45); }
.tas.okey .muhur { position: absolute; bottom: 9%; left: 50%; transform: translateX(-50%); font: 900 calc(var(--w) * .15)/1 var(--body); letter-spacing: .08em; color: #fff4c8; background: #0b5a32; padding: .25em .4em; border-radius: 4px; }
.tas.okey::after { display: none; }

/* ---------- ahşap ıstaka ---------- */
.istaka { position: relative; padding: 12px 14px 0; border-radius: 16px;
  background: linear-gradient(180deg, #2a1708, #1a0d04); box-shadow: 0 30px 60px rgba(0,0,0,.55), inset 0 0 0 1px rgba(255,200,140,.08); }
.raf { position: relative; display: flex; gap: clamp(3px, .7vw, 7px); padding: 0 8px 14px; min-height: calc(var(--w, 46px) * 1.39 + 14px); align-items: flex-end;
  background: linear-gradient(180deg, #06331d, #0a4a2a 70%, #052a17); border-radius: 8px 8px 0 0; }
.raf + .raf { margin-top: 12px; }
.raf::after { content: ""; position: absolute; left: -10px; right: -10px; bottom: -8px; height: 18px; border-radius: 5px;
  background: linear-gradient(180deg, var(--wood-1) 0, var(--wood-2) 40%, var(--wood-3) 75%, var(--wood-4) 100%);
  box-shadow: inset 0 1px 0 rgba(255,215,160,.45), 0 6px 10px rgba(0,0,0,.45); z-index: 0; }
.raf .tas { z-index: 1; }
.istaka .ayak { height: 16px; }
.cita { height: 14px; border-radius: 7px; background: linear-gradient(180deg, var(--wood-1) 0, var(--wood-2) 40%, var(--wood-3) 75%, var(--wood-4) 100%);
  box-shadow: inset 0 1px 0 rgba(255,215,160,.45), 0 10px 20px rgba(0,0,0,.45); }

/* ---------- düğmeler ---------- */
.b-oyna, .b-fil, .b-cizgi {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem; min-height: 52px; padding: .75rem 1.5rem;
  border-radius: 14px; border: 0; font: 800 1.08rem/1 var(--logo); letter-spacing: .01em; text-decoration: none; white-space: nowrap;
  transition: transform .15s ease, box-shadow .15s ease, background .2s; cursor: pointer;
}
.b-oyna { color: var(--gold-ink); background: linear-gradient(180deg, #ffe680 0%, var(--gold) 40%, var(--gold-2) 100%);
  box-shadow: 0 5px 0 #8a5200, 0 14px 30px rgba(255,180,30,.35), inset 0 1px 0 rgba(255,255,255,.7); }
.b-oyna:hover { color: var(--gold-ink); transform: translateY(-2px); box-shadow: 0 7px 0 #8a5200, 0 18px 36px rgba(255,180,30,.45), inset 0 1px 0 rgba(255,255,255,.7); }
.b-oyna:active { transform: translateY(4px); box-shadow: 0 1px 0 #8a5200, 0 6px 16px rgba(255,180,30,.3); }
.b-oyna svg { width: 1.15em; height: 1.15em; }
.b-oyna.xl { min-height: 64px; padding: 1rem 2.2rem; font-size: 1.35rem; border-radius: 18px; }
.b-fil { color: #11301f; background: linear-gradient(180deg, #fffdf6, var(--ivory-2)); box-shadow: 0 5px 0 var(--ivory-edge), 0 12px 24px rgba(0,0,0,.35); }
.b-fil:hover { color: #11301f; transform: translateY(-2px); }
.b-fil:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--ivory-edge); }
.b-cizgi { color: #fff; background: rgba(138,255,196,.06); box-shadow: inset 0 0 0 1px var(--line-2); }
.b-cizgi:hover { color: #fff; background: rgba(138,255,196,.12); }

.gplay { display: inline-flex; align-items: center; gap: .7rem; min-height: 52px; padding: .45rem 1.1rem .45rem .9rem; border-radius: 14px;
  background: #050a07; color: #fff; text-decoration: none; box-shadow: inset 0 0 0 1px rgba(255,255,255,.22); transition: background .2s; }
.gplay:hover { background: #0d1a12; color: #fff; }
.gplay svg { width: 26px; height: 26px; flex: none; }
.gplay span { display: grid; line-height: 1.1; }
.gplay small { font: 500 .68rem var(--body); letter-spacing: .06em; text-transform: uppercase; opacity: .8; }
.gplay b { font: 700 1.12rem var(--body); }
.gplay.yakinda { pointer-events: none; }
.gplay.yakinda small::after { content: " · yakında"; color: var(--gold); }

.cip { display: inline-flex; align-items: center; gap: .45rem; padding: .42rem .8rem; border-radius: 10px; font: 700 .88rem/1 var(--body); color: #fff;
  background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 1px var(--line-2); white-space: nowrap; }
.cip i { width: 8px; height: 8px; border-radius: 50%; background: var(--glow); box-shadow: 0 0 8px var(--glow); }
.cip.altin { color: var(--gold-ink); background: linear-gradient(180deg, var(--gold), var(--gold-2)); box-shadow: none; }

/* ---------- üst menü ---------- */
.ust { position: sticky; top: 0; z-index: 1030; padding-top: env(safe-area-inset-top, 0px);
  background: rgba(2,14,8,.78); backdrop-filter: blur(14px) saturate(1.3); -webkit-backdrop-filter: blur(14px) saturate(1.3); }
.ust::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 6px;
  background: linear-gradient(180deg, var(--wood-2), var(--wood-4)); box-shadow: 0 6px 14px rgba(0,0,0,.4); }
.ust .navbar { padding-block: .65rem; }
.ust .navbar-brand img { height: 42px; width: auto; display: block; }
.ust .nav-link { position: relative; font: 600 .98rem var(--body); color: var(--mist); padding: .55rem .9rem !important; border-radius: 10px; }
.ust .nav-link:hover { color: #fff; background: rgba(138,255,196,.07); }
.ust .nav-link.aktif { color: #fff; }
.ust .nav-link.aktif::after { content: ""; position: absolute; left: 50%; bottom: 2px; width: 6px; height: 6px; border-radius: 50%; transform: translateX(-50%); background: var(--gold); box-shadow: 0 0 10px var(--gold); }
.ust .navbar-toggler { border: 0; padding: .5rem; border-radius: 12px; background: rgba(138,255,196,.08); box-shadow: inset 0 0 0 1px var(--line-2); }
.ust .navbar-toggler:focus { box-shadow: 0 0 0 3px var(--gold); }
.ust .navbar-toggler span { display: block; width: 22px; height: 2px; margin: 5px 0; border-radius: 2px; background: #fff; transition: transform .25s, opacity .25s; }
.ust .navbar-toggler[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.ust .navbar-toggler[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.ust .navbar-toggler[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
@media (max-width: 991.98px) {
  .ust .navbar-collapse { margin-top: .8rem; padding: .6rem 0 1rem; border-top: 1px solid var(--line); }
  .ust .nav-link { padding: .85rem .6rem !important; font-size: 1.1rem; }
  .ust .nav-link.aktif::after { left: auto; right: .8rem; top: 50%; bottom: auto; transform: translateY(-50%); }
  .ust .b-oyna { width: 100%; margin-top: .6rem; }
}

/* ---------- ortak bölüm yapısı ---------- */
.bolum { position: relative; padding-block: clamp(64px, 9vw, 120px); }
.bolum-bas { display: grid; gap: 1rem; margin-bottom: clamp(32px, 5vw, 56px); max-width: 760px; }
.bolum-bas.orta { margin-inline: auto; text-align: center; justify-items: center; }
.ayrac { position: relative; height: 14px; margin: 0; }
.ayrac .cita { position: absolute; inset: 0; border-radius: 0; }

/* ---------- ana sayfa: giriş ---------- */
.giris { position: relative; padding-block: clamp(36px, 6vw, 72px) clamp(40px, 6vw, 64px); }
.giris .lamba { position: absolute; inset: -120px 0 auto; height: 620px; pointer-events: none;
  background: radial-gradient(ellipse 46% 60% at 62% 30%, rgba(255,236,190,.13), transparent 70%); }
.giris h1 em { font-style: normal; background: linear-gradient(180deg, #b4ffd6, var(--glow) 50%, #14b862); -webkit-background-clip: text; background-clip: text; color: transparent; }
.giris .aksiyon { display: flex; flex-wrap: wrap; gap: .9rem; align-items: center; margin-top: 2rem; }
.giris .ciplar { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.6rem; }
.giris-sahne { position: relative; perspective: 1400px; }
.ekran3d { position: relative; transform: rotateY(-14deg) rotateX(6deg) rotateZ(1deg); transform-style: preserve-3d; transition: transform .6s cubic-bezier(.2,.8,.2,1); }
.giris-sahne:hover .ekran3d { transform: rotateY(-8deg) rotateX(4deg); }
.ekran { position: relative; padding: 10px; border-radius: 22px; background: linear-gradient(180deg, #17221c, #0a100c);
  box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 40px 80px rgba(0,0,0,.6), 0 0 0 10px rgba(0,0,0,.18); }
.ekran img { display: block; width: 100%; height: auto; border-radius: 14px; }
.ekran .yansima { position: absolute; inset: 10px; border-radius: 14px; pointer-events: none; background: linear-gradient(115deg, rgba(255,255,255,.12) 0%, transparent 30%); }
.giris-sahne .yuzen { position: absolute; z-index: 3; animation: suz 6s ease-in-out infinite; }
.giris-sahne .yuzen.a { --w: clamp(42px, 5.2vw, 64px); left: -4%; top: 6%; transform: rotate(-14deg); }
.giris-sahne .yuzen.b { --w: clamp(38px, 4.6vw, 56px); right: -2%; top: -6%; animation-delay: -2s; }
.giris-sahne .yuzen.c { --w: clamp(40px, 5vw, 60px); right: 6%; bottom: -10%; animation-delay: -4s; }
.giris-sahne .yuzen .tas { --w: inherit; }
@keyframes suz { 0%,100% { translate: 0 0; } 50% { translate: 0 -12px; } }
.sira-sende { position: absolute; z-index: 4; left: 50%; top: 50%; transform: translate(-50%, -50%); text-align: center; padding: .9rem 1.6rem; border-radius: 16px;
  background: linear-gradient(180deg, #ffe07a, #f0b52a); color: #2a1800; box-shadow: 0 16px 40px rgba(0,0,0,.45); animation: nabiz 2.4s ease-in-out infinite; }
.sira-sende b { display: block; font: 800 clamp(1.1rem, 2.4vw, 1.7rem)/1 var(--logo); letter-spacing: .14em; }
.sira-sende small { font: 600 .82rem var(--body); }
@keyframes nabiz { 0%,100% { box-shadow: 0 16px 40px rgba(0,0,0,.45), 0 0 0 0 rgba(255,214,74,.5); } 50% { box-shadow: 0 16px 40px rgba(0,0,0,.45), 0 0 0 14px rgba(255,214,74,0); } }

/* giriş altındaki el */
.el { margin-top: clamp(36px, 6vw, 70px); }
.el .istaka { --w: clamp(30px, 5.4vw, 60px); max-width: 1000px; margin-inline: auto; }
.el .raf { justify-content: center; }
.el .raf .tas { --w: inherit; animation: dagit .7s cubic-bezier(.2,.9,.25,1.2) both; animation-delay: calc(var(--i) * 55ms + .2s); }
@keyframes dagit { from { transform: translateY(-46px) rotate(-8deg); } to { transform: none; } }
.el .grup { display: flex; gap: inherit; position: relative; }
.el .grup + .grup { margin-left: clamp(8px, 2.4vw, 30px); }
.el .raf + .raf { margin-top: 46px; }
.el .istaka .ayak { height: 40px; }
.el .grup:not([data-puan])::before { display: none; }
.el .grup::before { content: attr(data-puan); position: absolute; left: 50%; bottom: -34px; transform: translateX(-50%); z-index: 2; white-space: nowrap;
  font: 800 .78rem/1 var(--body); color: #052a17; background: var(--glow); padding: .3rem .55rem; border-radius: 6px; box-shadow: 0 4px 10px rgba(0,0,0,.35); }
.el .sayac { display: flex; justify-content: space-between; flex-wrap: wrap; gap: .6rem 1.2rem; max-width: 1000px; margin: 48px auto 0; font: 600 .95rem var(--body); color: var(--muted); }
.el .sayac b { color: #fff; font-variant-numeric: tabular-nums; }
@media (max-width: 575.98px) {
  .el .raf { gap: 3px; padding-inline: 4px; }
  .el .raf .gizle-sm { display: none; }
  .el .grup::before { bottom: -30px; font-size: .7rem; }
}

/* ---------- mod şeridi ---------- */
.modlar-serit { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(280px, 1fr); gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 14px;
  scrollbar-width: thin; scrollbar-color: var(--felt-3) transparent; }
@media (min-width: 1200px) { .modlar-serit { grid-auto-columns: 1fr; overflow: visible; } }
.mod-kart { scroll-snap-align: start; position: relative; display: grid; border-radius: var(--r); overflow: hidden; text-decoration: none; color: inherit;
  background: #06120c; box-shadow: inset 0 0 0 1px var(--line); transition: transform .25s, box-shadow .25s; }
.mod-kart:hover { transform: translateY(-6px); box-shadow: inset 0 0 0 1px var(--line-2), 0 24px 40px rgba(0,0,0,.45); color: inherit; }
.mod-kart img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; }
.mod-kart .ic { padding: 1rem 1.1rem 1.2rem; display: grid; gap: .45rem; }
.mod-kart h3 { font-size: 1.4rem; margin: 0; }
.mod-kart p { margin: 0; color: var(--muted); font-size: .95rem; }
.mod-kart .ust-cip { position: absolute; top: 12px; left: 12px; }
.mod-kart .ok { margin-top: .3rem; font: 700 .9rem var(--body); color: var(--glow); }
.mod-kart[data-renk="kirmizi"] .ok { color: #ff8a5a; } .mod-kart[data-renk="mavi"] .ok { color: #7cc0ff; } .mod-kart[data-renk="altin"] .ok { color: var(--gold); }

/* ---------- özellik bölmeleri ---------- */
.bolme { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(32px, 6vw, 80px); align-items: center; }
.bolme.ters { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
.bolme.ters .bolme-gorsel { order: -1; }
@media (max-width: 991.98px) { .bolme, .bolme.ters { grid-template-columns: minmax(0, 1fr); } .bolme.ters .bolme-gorsel { order: 0; } }
.bolme-gorsel { position: relative; min-width: 0; }
.bolme-gorsel .etiket { position: absolute; z-index: 2; left: 18px; bottom: -16px; }
.liste-tas { list-style: none; padding: 0; margin: 1.6rem 0 0; display: grid; gap: 1rem; }
.liste-tas li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 1rem; align-items: start; }
.liste-tas .tas { --w: 34px; font-size: 18px; margin-top: 2px; }
.liste-tas b { display: block; color: #fff; font: 700 1.06rem/1.35 var(--body); }
.liste-tas span { color: var(--muted); font-size: .97rem; }

/* ---------- telefon ---------- */
.telefon { position: relative; padding: 12px 22px; border-radius: 40px; background: linear-gradient(180deg, #1d2a22, #0b120e);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.08), 0 40px 80px rgba(0,0,0,.6); }
.telefon::before { content: ""; position: absolute; left: 8px; top: 50%; width: 6px; height: 46px; border-radius: 4px; transform: translateY(-50%); background: #000; }
.telefon img { display: block; width: 100%; height: auto; border-radius: 22px; }

/* ---------- adımlar ---------- */
.adimlar { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; counter-reset: a; }
@media (max-width: 991.98px) { .adimlar { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 575.98px) { .adimlar { grid-template-columns: minmax(0, 1fr); } }
.adim { position: relative; padding: 1.4rem 1.3rem 1.5rem; border-radius: var(--r); background: var(--panel); box-shadow: inset 0 0 0 1px var(--line); display: grid; gap: .6rem; align-content: start; }
.adim .tas { --w: 44px; }
.adim h3 { font-size: 1.3rem; margin: .4rem 0 0; }
.adim p { margin: 0; color: var(--muted); font-size: .97rem; }

/* ---------- güven şeridi ---------- */
.guven { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-radius: var(--r); overflow: hidden; box-shadow: inset 0 0 0 1px var(--line); background: rgba(2,12,7,.6); }
.guven > div { padding: 1.6rem 1.5rem; display: grid; gap: .45rem; align-content: start; }
.guven > div + div { border-left: 1px solid var(--line); }
.guven svg { width: 30px; height: 30px; color: var(--glow); }
.guven b { color: #fff; font: 700 1.08rem var(--body); }
.guven span { color: var(--muted); font-size: .95rem; }
@media (max-width: 767.98px) { .guven { grid-template-columns: minmax(0, 1fr); } .guven > div + div { border-left: 0; border-top: 1px solid var(--line); } }

/* ---------- yapımcı ---------- */
.yapimci { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: clamp(20px, 4vw, 48px); align-items: center;
  padding: clamp(24px, 4vw, 44px); border-radius: 28px; overflow: hidden;
  background: radial-gradient(ellipse 60% 120% at 0% 100%, rgba(90,110,255,.22), transparent 60%), radial-gradient(ellipse 50% 100% at 100% 0%, rgba(255,90,170,.16), transparent 60%), #07110c;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); }
.yapimci .avi { width: clamp(110px, 14vw, 170px); height: auto; filter: drop-shadow(0 18px 24px rgba(0,0,0,.5)); animation: suz 5s ease-in-out infinite; }
.yapimci .logo-av { height: clamp(34px, 4vw, 46px); width: auto; display: block; margin-bottom: .8rem; }
.yapimci p { margin: 0; color: var(--mist); max-width: 56ch; }
@media (max-width: 767.98px) { .yapimci { grid-template-columns: minmax(0, 1fr); text-align: center; justify-items: center; } }

/* ---------- son çağrı ---------- */
.son-cagri { position: relative; text-align: center; padding-block: clamp(72px, 10vw, 130px); overflow: hidden; }
.son-cagri::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 50% 70% at 50% 100%, rgba(60,255,154,.18), transparent 70%); pointer-events: none; }
.son-cagri .isaret { width: clamp(90px, 12vw, 130px); height: auto; margin-bottom: 1.2rem; filter: drop-shadow(0 18px 30px rgba(0,0,0,.5)); }
.son-cagri .aksiyon { display: flex; flex-wrap: wrap; gap: .9rem; justify-content: center; margin-top: 2rem; }

/* ---------- alt bilgi ---------- */
.alt { position: relative; padding-block: 56px calc(40px + env(safe-area-inset-bottom, 0px)); background: #010804; border-top: 1px solid var(--line); }
.alt::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px; background: linear-gradient(180deg, var(--wood-1), var(--wood-3) 60%, var(--wood-4)); box-shadow: inset 0 1px 0 rgba(255,215,160,.4); }
.alt .logo { height: 48px; width: auto; }
.alt h4 { font: 700 .8rem var(--body); letter-spacing: .18em; text-transform: uppercase; color: var(--muted); margin-bottom: 1rem; }
.alt ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .55rem; }
.alt a { color: var(--mist); text-decoration: none; }
.alt a:hover { color: var(--gold); }
.alt .imza { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; align-items: center; margin-top: 44px; padding-top: 24px; border-top: 1px solid var(--line); color: var(--muted); font-size: .9rem; }
.alt .imza img { height: 26px; width: auto; vertical-align: middle; margin-left: .4rem; }

/* ---------- alt sayfa başlığı ---------- */
.sayfa-bas { position: relative; padding-block: clamp(48px, 8vw, 96px) clamp(36px, 6vw, 64px); overflow: hidden; }
.sayfa-bas .dizi { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 1.4rem; }
.sayfa-bas .dizi .tas { --w: 40px; }
.sayfa-bas p { max-width: 62ch; }
.sayfa-bas .yol { font-size: .9rem; color: var(--muted); margin-bottom: 1rem; }
.sayfa-bas .yol a { color: var(--muted); text-decoration: none; }
.sayfa-bas .yol a:hover { color: #fff; }

/* ---------- modlar sayfası ---------- */
.mod-dizin { display: flex; flex-wrap: wrap; gap: .5rem; }
.mod-dizin a { text-decoration: none; }
.mod-blok { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 64px); align-items: center; }
.mod-blok + .mod-blok { margin-top: clamp(72px, 10vw, 120px); }
.mod-blok.ters > :first-child { order: 2; }
@media (max-width: 991.98px) { .mod-blok { grid-template-columns: minmax(0, 1fr); } .mod-blok.ters > :first-child { order: 0; } }
.mod-gorsel { position: relative; border-radius: 22px; overflow: hidden; box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 30px 60px rgba(0,0,0,.5); }
.mod-gorsel img { display: block; width: 100%; height: auto; }
.mod-gorsel .no { position: absolute; top: 14px; left: 14px; }
.mod-gorsel .no .tas { --w: 46px; }
.olcu { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 1.4rem 0; }
.olcu div { padding: .85rem .9rem; border-radius: 14px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--line); }
.olcu small { display: block; font: 700 .7rem var(--body); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.olcu b { font: 800 1.35rem/1.2 var(--logo); color: #fff; }
@media (max-width: 420px) { .olcu { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.madde { list-style: none; padding: 0; margin: 0; display: grid; gap: .7rem; }
.madde li { position: relative; padding-left: 1.6rem; }
.madde li::before { content: ""; position: absolute; left: 0; top: .55em; width: 10px; height: 10px; border-radius: 3px; background: var(--glow); transform: rotate(45deg); box-shadow: 0 0 10px rgba(60,255,154,.5); }
.madde.altin li::before { background: var(--gold); box-shadow: 0 0 10px rgba(255,214,74,.5); }
.carpan { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 1.4rem; }
.carpan > div { display: grid; justify-items: center; gap: .6rem; padding: 1.1rem .6rem; border-radius: 16px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--line); text-align: center; }
.carpan .taslar { display: flex; gap: 6px; }
.carpan .tas { --w: 34px; }
.carpan b { font: 800 2rem/1 var(--logo); }
.carpan small { color: var(--muted); font-size: .85rem; }

/* tablo */
.tablo-kap { overflow-x: auto; border-radius: var(--r); box-shadow: inset 0 0 0 1px var(--line); background: rgba(2,12,7,.6); }
.tablo { width: 100%; min-width: 640px; border-collapse: collapse; font-size: .97rem; }
.tablo th, .tablo td { padding: .95rem 1.1rem; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
.tablo thead th { font: 700 .75rem var(--body); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); background: rgba(138,255,196,.04); }
.tablo tbody th { color: #fff; font: 800 1.08rem var(--logo); white-space: nowrap; }
.tablo tr:last-child > * { border-bottom: 0; }
.tablo td { color: var(--mist); font-variant-numeric: tabular-nums; }

/* ---------- özellikler sayfası ---------- */
.ozellik-grup + .ozellik-grup { margin-top: clamp(72px, 10vw, 120px); }
.kutular { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 991.98px) { .kutular { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 575.98px) { .kutular { grid-template-columns: minmax(0, 1fr); } }
.kutu { padding: 1.4rem 1.3rem; border-radius: var(--r); background: var(--panel); box-shadow: inset 0 0 0 1px var(--line); display: grid; gap: .5rem; align-content: start; transition: box-shadow .2s, transform .2s; }
.kutu:hover { box-shadow: inset 0 0 0 1px var(--line-2); transform: translateY(-3px); }
.kutu .simge { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: rgba(60,255,154,.1); color: var(--glow); }
.kutu .simge svg { width: 24px; height: 24px; }
.kutu b { color: #fff; font: 700 1.08rem/1.35 var(--body); }
.kutu span { color: var(--muted); font-size: .96rem; }
.kutu kbd { font: 700 .82rem var(--body); background: rgba(255,255,255,.08); color: #fff; padding: .1rem .4rem; border-radius: 5px; box-shadow: inset 0 0 0 1px var(--line-2); }
.kozmetik { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 767.98px) { .kozmetik { grid-template-columns: minmax(0, 1fr); } }
.kozmetik > div { padding: 1.3rem; border-radius: var(--r); background: var(--panel); box-shadow: inset 0 0 0 1px var(--line); }
.kozmetik h3 { font-size: 1.25rem; margin-bottom: 1rem; }
.kozmetik ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.kozmetik li { display: flex; align-items: center; gap: .8rem; justify-content: space-between; }
.kozmetik li > span { display: flex; align-items: center; gap: .7rem; color: #fff; font-weight: 600; }
.kozmetik li small { color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.numune { width: 30px; height: 30px; border-radius: 8px; flex: none; box-shadow: inset 0 0 0 1px rgba(255,255,255,.2); }

/* galeri */
.galeri { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 991.98px) { .galeri { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 575.98px) { .galeri { grid-template-columns: minmax(0, 1fr); } }
.galeri button { position: relative; padding: 0; border: 0; border-radius: 14px; overflow: hidden; background: #000; cursor: zoom-in; box-shadow: 0 0 0 1px var(--line); text-align: left; }
.galeri img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; transition: transform .4s; }
.galeri button:hover img { transform: scale(1.04); }
.galeri figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 2rem .9rem .7rem; font: 600 .9rem var(--body); color: #fff; background: linear-gradient(transparent, rgba(0,0,0,.8)); }
.galeri .genis { grid-column: span 2; grid-row: span 2; }
.galeri .genis figure, .galeri .genis img { height: 100%; }
@media (max-width: 575.98px) { .galeri .genis { grid-column: auto; grid-row: auto; } .galeri .genis img { height: auto; } }
.modal-content { background: #050c08; border: 1px solid var(--line-2); border-radius: 20px; }
.modal-header { border-bottom-color: var(--line); }
.modal-title { font: 800 1.2rem var(--logo); color: #fff; }
.btn-close { filter: invert(1); }

/* ---------- nasıl oynanır ---------- */
.ders { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: clamp(24px, 5vw, 64px); align-items: center; }
.ders + .ders { margin-top: clamp(48px, 7vw, 84px); }
.ders:nth-child(even) > :first-child { order: 2; }
@media (max-width: 991.98px) { .ders { grid-template-columns: minmax(0, 1fr); } .ders:nth-child(even) > :first-child { order: 0; } }
.ders .bas { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; }
.ders .bas .tas { --w: 50px; }
.ders h3 { margin: 0; font-size: clamp(1.5rem, 3vw, 2.1rem); }
.ders p { color: var(--mist); }
.ders img { display: block; width: 100%; height: auto; border-radius: 18px; box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 30px 60px rgba(0,0,0,.45); }
.ipucu { margin-top: 1rem; padding: .9rem 1rem; border-radius: 12px; background: rgba(255,214,74,.07); box-shadow: inset 0 0 0 1px rgba(255,214,74,.28); font-size: .95rem; }
.ipucu b { color: var(--gold); }
.kural-ozet { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 767.98px) { .kural-ozet { grid-template-columns: minmax(0, 1fr); } }
.kural-ozet > div { padding: 1.5rem; border-radius: var(--r); background: var(--panel); box-shadow: inset 0 0 0 1px var(--line); }
.kural-ozet h3 { font-size: 1.35rem; margin-bottom: .9rem; display: flex; align-items: center; gap: .7rem; }
.kural-ozet h3 .tas { --w: 30px; font-size: 16px; }
.kural-ozet p, .kural-ozet li { color: var(--mist); }
.formul { font: 600 .95rem/1.6 var(--body); padding: 1rem 1.1rem; border-radius: 12px; background: rgba(0,0,0,.35); box-shadow: inset 0 0 0 1px var(--line); color: #fff; overflow-x: auto; }

/* ---------- SSS ---------- */
.sss .accordion { --bs-accordion-bg: transparent; --bs-accordion-border-color: var(--line); --bs-accordion-btn-color: #fff; --bs-accordion-active-color: #fff;
  --bs-accordion-active-bg: rgba(60,255,154,.06); --bs-accordion-btn-focus-box-shadow: 0 0 0 3px var(--gold); --bs-accordion-border-radius: 18px; --bs-accordion-inner-border-radius: 18px;
  --bs-accordion-btn-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%238affc4' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M3 6l5 5 5-5'/%3E%3C/svg%3E");
  --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23ffd64a' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M3 6l5 5 5-5'/%3E%3C/svg%3E");
  background: rgba(2,12,7,.6); border-radius: 18px; }
.sss .accordion-button { font: 700 1.08rem/1.4 var(--body); padding: 1.2rem 1.3rem; }
.sss .accordion-button:not(.collapsed) { box-shadow: none; }
.sss .accordion-body { color: var(--mist); padding: 0 1.3rem 1.3rem; }
.sss .accordion-body p:last-child { margin-bottom: 0; }
.sss-yan { position: sticky; top: 110px; padding: 1.6rem; border-radius: 22px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--line); display: grid; gap: 1rem; justify-items: start; }
.sss-yan img { width: 110px; height: auto; }

/* ---------- arama metni (ana sayfa) ---------- */
.seo-metin { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(24px, 5vw, 72px); padding: clamp(24px, 4vw, 48px); border-radius: 28px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--line); }
.seo-metin p { color: var(--mist); max-width: 66ch; }
.seo-metin p:last-child { margin-bottom: 0; }
.seo-metin a { color: var(--mint); font-weight: 600; }
.seo-metin a:hover { color: var(--gold); }
@media (max-width: 991.98px) { .seo-metin { grid-template-columns: minmax(0, 1fr); } }
h1 .eyebrow { font-family: var(--body); }

/* ---------- telefonda yatay kaydırma yok ---------- */
html, body { touch-action: pan-y pinch-zoom; overscroll-behavior-x: none; }
main, header, footer, section { max-width: 100vw; overflow-x: clip; }
@media (max-width: 767.98px) {
  .modlar-serit { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: minmax(0, 1fr); overflow: visible; scroll-snap-type: none; padding-bottom: 0; }
  .tablo-kap.yigin { overflow: visible; background: none; box-shadow: none; }
  .tablo.yigin { min-width: 0; }
  .tablo.yigin thead { display: none; }
  .tablo.yigin tbody { display: grid; gap: 12px; }
  .tablo.yigin tr { display: grid; grid-template-columns: minmax(0, 1fr); padding: 1rem 1.1rem; border-radius: 16px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--line); }
  .tablo.yigin th, .tablo.yigin td { padding: .3rem 0; border: 0; }
  .tablo.yigin tbody th { font-size: 1.25rem; padding-bottom: .5rem; }
  .tablo.yigin td { display: flex; justify-content: space-between; gap: 1rem; text-align: right; }
  .tablo.yigin td::before { content: attr(data-l); color: var(--muted); font-size: .85rem; text-align: left; flex: none; }
}
.gizlilik-dizin { position: sticky; top: 110px; display: grid; gap: .2rem; }
.gizlilik-dizin a { padding: .45rem .8rem; border-radius: 10px; color: var(--mist); text-decoration: none; font-weight: 500; }
.gizlilik-dizin a:hover { background: rgba(138,255,196,.07); color: #fff; }
@media (max-width: 991.98px) { .gizlilik-dizin { position: static; display: flex; flex-wrap: wrap; gap: .4rem; } .gizlilik-dizin a { box-shadow: inset 0 0 0 1px var(--line-2); font-size: .9rem; padding: .35rem .7rem; } }
.gizlilik-metin h2 { font-size: clamp(1.5rem, 3vw, 2rem); margin: 2.6rem 0 1rem; }
.gizlilik-metin h2:first-child { margin-top: 0; }
.gizlilik-metin p, .gizlilik-metin li { color: var(--mist); max-width: 70ch; }
.gizlilik-metin a { color: var(--mint); }
@media (max-width: 767.98px) { .gizlilik .tablo { min-width: 0; } .gizlilik .tablo th, .gizlilik .tablo td { padding: .75rem .8rem; } }

/* ---------- Yeşil Okey alt modları ---------- */
.altmod { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: clamp(28px, 4vw, 44px); }
@media (max-width: 991.98px) { .altmod { grid-template-columns: minmax(0, 1fr); } }
.altmod-kart { padding: clamp(20px, 3vw, 30px); border-radius: 22px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--line-2); display: grid; gap: .9rem; align-content: start; }
.altmod-kart.pro { background: radial-gradient(ellipse 80% 70% at 100% 0%, rgba(255,214,74,.12), transparent 70%), var(--panel); box-shadow: inset 0 0 0 1px rgba(255,214,74,.35); }
.altmod-bas { display: flex; justify-content: space-between; align-items: center; gap: .8rem; flex-wrap: wrap; }
.altmod-bas h3 { margin: 0; font-size: clamp(1.3rem, 2.4vw, 1.6rem); }
.altmod-kart p { margin: 0; color: var(--mist); }
.altmod-kart .carpan { margin-top: .2rem; }
.carpan.iki { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.carpan .taslar { flex-wrap: wrap; justify-content: center; }
.gosterge-satir { display: flex; flex-wrap: wrap; gap: .5rem .9rem; align-items: center; padding-top: .9rem; border-top: 1px solid var(--line); font-size: .95rem; }
.gosterge-satir span { color: var(--muted); width: 100%; font-size: .78rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.gosterge-satir b { color: #fff; font-variant-numeric: tabular-nums; }
@media (max-width: 420px) { .carpan .tas { --w: 28px; font-size: 15px; } }