:root {
  --zmr-900: #006c38;
  --zmr-800: #00863d;
  --zmr-700: #0c7f44;
  --zmr-500: #8dca08;
  --yazi-acik: #f7fff8;
  --yazi-koyu: #0d4f2b;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: "Trebuchet MS", "Segoe UI", sans-serif;
  background: radial-gradient(circle at top, #f8fffa 0%, #ecf8ef 60%, #e5f2e8 100%);
  color: var(--yazi-koyu);
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: #6db71a #dff0e2;
}

html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

*::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

*::-webkit-scrollbar-track {
  background: #dff0e2;
}

*::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #8ad218, #4ea318);
  border-radius: 999px;
}

*::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #9ee72a, #59b421);
}

.ust-serit {
  min-height: 94px;
  background: linear-gradient(90deg, var(--zmr-900), var(--zmr-800));
  border-top: 2px solid #0a542d;
  display: grid;
  grid-template-columns: 280px 1fr auto;
  align-items: center;
  padding: 0 26px;
  column-gap: 22px;
  box-shadow: 0 10px 28px rgba(0, 74, 34, 0.26);
}

.logo-baglanti {
  text-decoration: none;
  display: inline-flex;
  flex-direction: column;
  line-height: 1;
  transform: translateY(-1px);
}

.logo-ust {
  color: var(--zmr-500);
  font-size: 30px;
  font-weight: 900;
  letter-spacing: 1.2px;
  line-height: 1.05;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.14);
}

.logo-alt {
  color: var(--yazi-acik);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 3.6px;
  margin-top: 2px;
}

.ana-gezinti {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: nowrap;
}

.gezinti-ogesi {
  text-decoration: none;
  color: var(--yazi-acik);
  font-weight: 700;
  font-size: 15px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
  padding: 8px 10px;
  border-radius: 12px;
  position: relative;
  transition: color 0.25s ease, transform 0.2s ease, background 0.25s ease;
}

.gezinti-ogesi::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0));
  opacity: 0;
  transition: opacity 0.25s ease;
}

.gezinti-ogesi:hover {
  color: #dfff93;
  transform: translateY(-2px);
  background: rgba(8, 111, 55, 0.48);
}

.gezinti-ogesi:hover::before {
  opacity: 1;
}

.gezinti-ogesi .ikon {
  width: 22px;
  height: 22px;
  line-height: 0;
  position: relative;
}

.gezinti-ogesi .ikon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.25));
  transition: transform 0.25s ease, filter 0.25s ease;
}

.gezinti-ogesi:hover .ikon img {
  transform: scale(1.14);
  filter: drop-shadow(0 0 7px rgba(184, 255, 78, 0.75));
}

.gezinti-ogesi.aktif {
  color: var(--zmr-500);
  background: rgba(8, 87, 40, 0.45);
}

.gezinti-ogesi.aktif::after {
  content: "";
  position: absolute;
  bottom: -4px;
  left: 20%;
  right: 20%;
  height: 3px;
  border-radius: 6px;
  background: linear-gradient(90deg, #c8f933, #8dca08);
}

.bildirim em {
  position: absolute;
  top: -7px;
  right: -10px;
  font-style: normal;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #ff8300;
  color: #fff;
  font-size: 10px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  font-weight: 700;
  box-shadow: 0 0 0 2px rgba(0, 118, 55, 0.95);
}

.aksiyonlar {
  display: flex;
  align-items: center;
  gap: 10px;
}

.dugme {
  text-decoration: none;
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  border-radius: 12px;
  padding: 11px 18px;
  border: 1px solid transparent;
  transition: transform 0.2s ease, box-shadow 0.25s ease, filter 0.25s ease;
}

.dugme:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 14px rgba(0, 0, 0, 0.2);
  filter: saturate(1.08);
}

.dugme-uygulama {
  background: linear-gradient(#ebf8ef, #cce9d7);
  color: #3a8c43;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.dugme-uygulama,
.dugme-giris {
  display: none !important;
}

.dugme-ikon {
  width: 14px;
  height: 14px;
}

.dugme-giris {
  border-color: #65c882;
  background: transparent;
}

.dugme-kayit {
  background: linear-gradient(#b1ec1f, #79b600);
  color: #fff;
  border-color: #c9f54b;
  box-shadow: 0 0 0 2px rgba(210, 255, 120, 0.25), 0 0 22px rgba(176, 240, 62, 0.55);
  animation: kayitParlama 1.25s ease-in-out infinite;
}

@keyframes kayitParlama {
  0%,
  100% {
    box-shadow: 0 0 0 2px rgba(210, 255, 120, 0.2), 0 0 16px rgba(176, 240, 62, 0.45);
    filter: brightness(1);
  }
  50% {
    box-shadow: 0 0 0 2px rgba(218, 255, 138, 0.35), 0 0 30px rgba(197, 255, 92, 0.75);
    filter: brightness(1.08);
  }
}

.uyari-seridi {
  background: #e9f8ec;
  border-top: 1px solid #c9eccc;
  color: #1d6c3d;
  padding: 10px 22px;
  font-size: 13px;
  font-weight: 700;
  text-align: center;
}

.uyari-seridi p {
  margin: 0;
}

.sayfa-icerik-kabugu {
  max-width: 1000px;
  margin: 34px auto;
  background: #ffffff;
  border: 1px solid #d4e8d8;
  border-radius: 18px;
  padding: 28px;
  box-shadow: 0 16px 30px rgba(8, 90, 40, 0.08);
}

.sayfa-icerik-kabugu h1 {
  margin-top: 0;
}

.kahraman-bolumu {
  position: relative;
  min-height: 360px;
  background-image:
    linear-gradient(100deg, rgba(8, 63, 33, 0.30), rgba(16, 120, 54, 0.18), rgba(10, 66, 32, 0.30)),
    var(--slide-bg, url("../../varliklar/slider/slide-bg-01.svg"));
  background-size: cover;
  background-position: center;
  overflow: hidden;
  padding: 18px 0 58px;
  transition: background-image 0.35s ease;
}

.kampanya-katmani {
  position: relative;
  max-width: 1220px;
  margin: 0 auto;
  min-height: 248px;
}

.kampanya {
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  padding: 10px 26px 0;
}

.kampanya.aktif {
  display: flex;
}

.kampanya-yazi {
  color: #fff;
  max-width: 560px;
}

.kampanya-etiket {
  color: #c8f48e;
  margin: 0 0 8px;
  font-weight: 700;
}

.kampanya-yazi h1 {
  margin: 0;
  font-size: 36px;
  line-height: 1.08;
}

.kampanya-yazi p {
  margin: 10px 0 0;
  font-size: 18px;
}

.kampanya-dugme {
  margin-top: 16px;
  display: inline-block;
  background: linear-gradient(#9bd908, #71af00);
  color: #fff;
  text-decoration: none;
  font-size: 16px;
  font-weight: 800;
  border-radius: 12px;
  padding: 13px 24px;
}

.kampanya-gorsel {
  width: 470px;
  height: 250px;
  border-radius: 24px;
  position: relative;
  background-size: cover;
  background-position: center;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 18px 30px rgba(0, 0, 0, 0.25);
}

.kampanya-gorsel::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.02));
}

.kaydir-ok {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: none;
  color: #d7e8db;
  font-size: 50px;
  cursor: pointer;
  z-index: 5;
}

.kaydir-ok.sol {
  left: 20px;
}

.kaydir-ok.sag {
  right: 20px;
}

.nokta-kontrol {
  position: absolute;
  left: 50%;
  bottom: 92px;
  transform: translateX(-50%);
  display: flex;
  gap: 7px;
}

.nokta {
  width: 26px;
  height: 6px;
  border: none;
  border-radius: 100px;
  background: rgba(255, 255, 255, 0.45);
  cursor: pointer;
}

.nokta.aktif {
  background: #ffffff;
}

.arama-paneli {
  position: absolute;
  left: 50%;
  bottom: -27px;
  transform: translateX(-50%);
  width: min(1220px, calc(100% - 30px));
  display: grid;
  grid-template-columns: 1fr 230px 230px;
  gap: 14px;
}

.arama-paneli-alt {
  position: relative;
  left: auto;
  bottom: auto;
  transform: none;
  margin: -36px auto 16px;
  z-index: 12;
}

.arama-kutusu,
.filtre-kutu {
  background: #f2f2f2;
  border-radius: 16px;
  min-height: 56px;
  display: flex;
  align-items: center;
  padding: 0 14px;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.12);
  border: 1px solid #e2e2e2;
}

.arama-ikon {
  font-size: 22px;
  opacity: 0.7;
  margin-right: 10px;
}

.arama-kutusu input {
  border: none;
  background: transparent;
  width: 100%;
  font-size: 15px;
  color: #2b2b2b;
  font-weight: 600;
}

.arama-kutusu input:focus {
  outline: none;
}

.arama-dugme {
  background: #ef7f09;
  color: #fff;
  border: none;
  border-radius: 12px;
  font-size: 18px;
  font-weight: 700;
  padding: 10px 22px;
  cursor: pointer;
  min-width: 74px;
}

.filtre-kutu {
  justify-content: space-between;
  gap: 8px;
  padding-right: 10px;
}

.filtre-kutu span {
  font-size: 16px;
  font-weight: 700;
  color: #222;
}

.filtre-kutu select {
  border: none;
  background: transparent;
  font-size: 15px;
  font-weight: 600;
}

.tema-acilir {
  position: relative;
}

.tema-dugme {
  width: 100%;
  min-height: 56px;
  border-radius: 16px;
  border: 1px solid #e2e2e2;
  background: #f2f2f2;
  padding: 0 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.12);
  cursor: pointer;
  font-size: 15px;
}

.tema-dugme span {
  font-weight: 700;
}

.tema-dugme strong {
  font-weight: 700;
}

.tema-dugme em {
  font-style: normal;
  color: #6db71a;
}

.tema-menu {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  width: 100%;
  background: #f7f7f7;
  border: 1px solid #e3e3e3;
  border-radius: 14px;
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.16);
  padding: 8px;
  z-index: 20;
}

.tema-menu.acik {
  display: block;
}

.tema-menu a {
  display: block;
  text-decoration: none;
  color: #2a2a2a;
  padding: 9px 10px;
  border-radius: 10px;
  font-weight: 600;
}

.tema-menu a:hover {
  background: #ececec;
}

.theme-item {
  display: flex !important;
  align-items: center;
  gap: 10px;
}

.theme-item::before {
  content: "";
  width: 16px;
  height: 16px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  opacity: 0.7;
}

.theme-item.christmas::before { background-image: url("../../varliklar/isaretler/cat-new.svg"); }
.theme-item.fruit::before { background-image: url("../../varliklar/isaretler/cat-popular.svg"); }
.theme-item.joker::before { background-image: url("../../varliklar/isaretler/cat-random.svg"); }
.theme-item.books::before { background-image: url("../../varliklar/isaretler/cat-slots.svg"); }
.theme-item.seven::before { background-image: url("../../varliklar/isaretler/cat-buy.svg"); }
.theme-item.dragons::before { background-image: url("../../varliklar/isaretler/cat-mira.svg"); }

.tema-panel {
  max-width: 1220px;
  margin: 0 auto 14px;
  width: 260px;
  background: #f4f4f4;
  border: 1px solid #e3e3e3;
  border-radius: 14px;
  padding: 8px;
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1);
}

.tema-link {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: #1f1f1f;
  font-weight: 700;
  padding: 10px 10px;
  border-radius: 10px;
}

.tema-link:hover,
.tema-link.aktif {
  background: #e7e7e7;
}

.tema-link::before {
  content: "";
  width: 18px;
  height: 18px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  opacity: 0.7;
}

.tema-link.christmas::before { background-image: url("../../varliklar/isaretler/cat-new.svg"); }
.tema-link.fruit::before { background-image: url("../../varliklar/isaretler/cat-popular.svg"); }
.tema-link.joker::before { background-image: url("../../varliklar/isaretler/cat-random.svg"); }
.tema-link.books::before { background-image: url("../../varliklar/isaretler/cat-slots.svg"); }
.tema-link.seven::before { background-image: url("../../varliklar/isaretler/cat-buy.svg"); }
.tema-link.dragons::before { background-image: url("../../varliklar/isaretler/cat-mira.svg"); }

.oyun-pencereleri {
  max-width: 1220px;
  margin: 0 auto 16px;
  display: grid;
  grid-template-columns: repeat(3, minmax(180px, 1fr));
  gap: 12px;
}

.oyun-pencere {
  border-radius: 14px;
  border: 1px dashed #cfd4d1;
  background: linear-gradient(180deg, #f5f5f5, #ececec);
  min-height: 120px;
  padding: 12px;
}

.oyun-pencere h4 {
  margin: 0 0 4px;
  font-size: 14px;
}

.oyun-pencere p {
  margin: 0;
  color: #717a76;
  font-size: 12px;
}

.allgames-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(120px, 1fr));
  gap: 14px;
}

.allgame-card {
  background: transparent;
  content-visibility: auto;
  contain-intrinsic-size: 210px;
}

.allgame-thumb {
  height: 132px;
  border-radius: 16px;
  margin-bottom: 8px;
}

.allgame-card h4 {
  margin: 0;
  font-size: 14px;
  line-height: 1.2;
}

.allgame-card p {
  margin: 3px 0 0;
  color: #7d8581;
}

.allgame-thumb.g1 { background: linear-gradient(135deg, #0b3d8f, #2adf5f); }
.allgame-thumb.g2 { background: linear-gradient(135deg, #f39300, #ffd54f); }
.allgame-thumb.g3 { background: linear-gradient(135deg, #4f77bd, #bde2ff); }
.allgame-thumb.g4 { background: linear-gradient(135deg, #d97b00, #ff4040); }
.allgame-thumb.g5 { background: linear-gradient(135deg, #af4f09, #f2c94c); }
.allgame-thumb.g6 { background: linear-gradient(135deg, #4a2d00, #d9a45a); }
.allgame-thumb.g7 { background: linear-gradient(135deg, #01343a, #2ea2ff); }
.allgame-thumb.g8 { background: linear-gradient(135deg, #4db9ff, #d8f0ff); }
.allgame-thumb.g9 { background: linear-gradient(135deg, #623100, #f9a444); }
.allgame-thumb.g10 { background: linear-gradient(135deg, #6b8a0e, #f7e16a); }
.allgame-thumb.g11 { background: linear-gradient(135deg, #cf243f, #ffcc29); }
.allgame-thumb.g12 { background: linear-gradient(135deg, #2b4da7, #8ee6ff); }

.geri-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  color: #ffffff;
  background: linear-gradient(180deg, #3aa2ff, #1875d1);
  border-radius: 999px;
  padding: 10px 16px;
  font-weight: 700;
  box-shadow: 0 8px 16px rgba(19, 93, 166, 0.24);
}

.geri-link:hover {
  filter: brightness(1.05);
}

.populer-bolumu {
  max-width: 1220px;
  margin: 6px auto 24px;
}

.insta-bolumu {
  max-width: 1220px;
  margin: 4px auto 26px;
}

.populer-ust {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.populer-ust h2 {
  margin: 0;
}

.populer-aksiyon {
  display: flex;
  align-items: center;
  gap: 8px;
}

.pop-nav {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  border: 1px solid #ddd;
  background: #f8f8f8;
  cursor: pointer;
}

.pop-hepsi {
  text-decoration: none;
  color: #666;
  border: 1px solid #ddd;
  border-radius: 10px;
  padding: 7px 12px;
  font-weight: 700;
  background: #fafafa;
}

.popular-kaydirici {
  display: grid;
  grid-template-rows: repeat(2, 1fr);
  grid-auto-flow: column;
  grid-auto-columns: 130px;
  gap: 12px;
  overflow-x: auto;
  scroll-behavior: smooth;
  padding-bottom: 8px;
}

.popular-kart {
  text-decoration: none;
  color: inherit;
  content-visibility: auto;
  contain-intrinsic-size: 220px;
}

.popular-thumb {
  height: 130px;
  border-radius: 16px;
  margin-bottom: 6px;
}

.popular-kart h4 {
  margin: 0;
  font-size: 15px;
  line-height: 1.2;
}

.popular-kart p {
  margin: 2px 0 0;
  color: #7a827e;
}

.popular-kart:hover .popular-thumb {
  filter: brightness(1.06);
}

.ph1{background:linear-gradient(135deg,#6c0d32,#f7ad9d)} .ph2{background:linear-gradient(135deg,#7a1200,#ff9600)}
.ph3{background:linear-gradient(135deg,#6c2c06,#ffd36f)} .ph4{background:linear-gradient(135deg,#d32020,#ffde00)}
.ph5{background:linear-gradient(135deg,#193056,#f8d560)} .ph6{background:linear-gradient(135deg,#8c0e06,#ffb347)}
.ph7{background:linear-gradient(135deg,#3d2c10,#ffd248)} .ph8{background:linear-gradient(135deg,#3a1a78,#a84dff)}
.ph9{background:linear-gradient(135deg,#5e0909,#ff5f2e)} .ph10{background:linear-gradient(135deg,#90210f,#ffec55)}
.ph11{background:linear-gradient(135deg,#5c2e08,#ffc966)} .ph12{background:linear-gradient(135deg,#2f5d7c,#f0cc77)}
.ph13{background:linear-gradient(135deg,#2f7a35,#ff99aa)} .ph14{background:linear-gradient(135deg,#7c6418,#ffe67e)}
.ph15{background:linear-gradient(135deg,#925a21,#ffd895)} .ph16{background:linear-gradient(135deg,#ff53c8,#7ce5ff)}
.ph17{background:linear-gradient(135deg,#5f3a10,#f4cc58)} .ph18{background:linear-gradient(135deg,#0f6e8b,#9ce08f)}
.ph19{background:linear-gradient(135deg,#2561a1,#9de5ff)} .ph20{background:linear-gradient(135deg,#8b1d12,#f9c14f)}
.ph21{background:linear-gradient(135deg,#6f3d07,#ffdf7a)} .ph22{background:linear-gradient(135deg,#4d1b69,#faa1a8)}
.ph23{background:linear-gradient(135deg,#205b8a,#e4bd67)} .ph24{background:linear-gradient(135deg,#4b2f12,#ffd16f)}

.insta-grid {
  display: grid;
  grid-template-columns: repeat(8, minmax(100px, 1fr));
  gap: 12px;
}

.guncelleme-vitrini {
  width: min(100%, 1220px);
  max-width: 1220px;
  margin: 26px auto 18px;
  border-radius: 0;
  overflow: hidden;
  background:
    linear-gradient(110deg, rgba(4, 67, 35, 0.88), rgba(16, 122, 58, 0.72), rgba(6, 58, 30, 0.9)),
    radial-gradient(circle at 85% 18%, rgba(180, 255, 126, 0.28), transparent 36%),
    radial-gradient(circle at 12% 85%, rgba(252, 214, 119, 0.18), transparent 44%);
  box-shadow: 0 18px 34px rgba(4, 58, 30, 0.22);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.guncelleme-katman {
  padding: 34px 36px;
  color: #f6fff7;
  backdrop-filter: blur(1px);
}

.guncelleme-katman h2 {
  margin: 0 0 14px;
  font-size: 36px;
  line-height: 1.1;
  color: #d5ff9e;
}

.guncelleme-katman p {
  margin: 0 0 12px;
  max-width: 980px;
  font-size: 18px;
  line-height: 1.55;
}

.altbilgi {
  background: #f2f2f3;
  border-top: 1px solid #d8dcda;
  margin-top: 26px;
  padding: 36px 0 18px;
}

.altbilgi-grid {
  max-width: 1220px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, minmax(200px, 1fr));
  gap: 34px;
}

.altbilgi h3 {
  margin: 0 0 12px;
  font-size: 28px;
}

.altbilgi ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}

.altbilgi a {
  text-decoration: none;
  color: #1f2a25;
  font-weight: 600;
}

.altbilgi a:hover {
  color: #0d7a3d;
}

.altbilgi-alt {
  max-width: 1220px;
  margin: 24px auto 0;
  padding-top: 16px;
  border-top: 1px solid #d8dcda;
}

.altbilgi-uyari {
  margin: 10px 0 10px;
  color: #4e5d56;
  line-height: 1.45;
}

.altbilgi-mail {
  margin: 0;
  font-weight: 800;
}

.altbilgi-acilir {
  margin-bottom: 12px;
}

.altbilgi-acilir summary {
  cursor: pointer;
  font-weight: 800;
  color: #175f3a;
  list-style: none;
}

.altbilgi-acilir summary::-webkit-details-marker {
  display: none;
}

.altbilgi-acilir summary::after {
  content: " +";
}

.altbilgi-acilir[open] summary::after {
  content: " -";
}

.oyunlar-bolumu {
  background: #f4f4f4;
  padding: 24px 30px 34px;
}

.kategori-cizgisi {
  max-width: 1220px;
  margin: 0 auto 16px;
  display: flex;
  gap: 10px;
  flex-wrap: nowrap;
  overflow-x: auto;
  padding: 6px 2px 10px;
  scrollbar-width: thin;
}

.kategori {
  border: none;
  background: #ececec;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 700;
  padding: 10px 14px 10px 12px;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  color: #222;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid #e0e0e0;
  transition: transform 0.2s ease, box-shadow 0.25s ease, background 0.2s ease;
}

.kategori::before {
  content: "";
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  opacity: 0.9;
  background-image: url("../../varliklar/isaretler/cat-random.svg");
}

.kategori:nth-child(2)::before { background-image: url("../../varliklar/isaretler/cat-lobby.svg"); }
.kategori:nth-child(3)::before { background-image: url("../../varliklar/isaretler/cat-popular.svg"); }
.kategori:nth-child(4)::before { background-image: url("../../varliklar/isaretler/cat-new.svg"); }
.kategori:nth-child(5)::before { background-image: url("../../varliklar/isaretler/cat-slots.svg"); }
.kategori:nth-child(6)::before { background-image: url("../../varliklar/isaretler/cat-mira.svg"); }
.kategori:nth-child(7)::before { background-image: url("../../varliklar/isaretler/cat-live.svg"); }
.kategori:nth-child(8)::before { background-image: url("../../varliklar/isaretler/cat-buy.svg"); }

.kategori:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.08);
}

.kategori.aktif {
  background: #ef7f09;
  color: #fff;
  border-color: #ef7f09;
}

.kategori.aktif::before {
  filter: brightness(0) invert(1);
  opacity: 1;
}

.oyun-grid {
  max-width: 1220px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.oyun-kart {
  background: #fff;
  border: 1px solid #dde1df;
  border-radius: 13px;
  padding: 12px 14px;
}

.oyun-kart h3 {
  margin: 0;
}

.oyun-kart p {
  margin: 6px 0 0;
  color: #6b736f;
}

.arama-durum {
  max-width: 1220px;
  margin: 10px auto 0;
  color: #476b52;
  font-weight: 700;
}

.ust-oyunlar {
  max-width: 1220px;
  margin: 0 auto 24px;
  background: #f5f5f5;
  border-radius: 18px;
  padding: 16px 14px;
}

.ust-oyunlar h2 {
  margin: 0 0 16px;
  font-size: 36px;
}

.ust-oyun-yerlesim {
  display: grid;
  grid-template-columns: 420px minmax(0, 1fr);
  gap: 16px;
}

.mini-oyun-slayt {
  position: relative;
  min-width: 0;
  overflow: hidden;
}

.buyuk-oyun-kart {
  background: #fff;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid #e5e5e5;
  box-shadow: 0 12px 22px rgba(0, 0, 0, 0.06);
}

.buyuk-oyun-gorsel {
  height: 330px;
}

.buyuk-oyun-gorsel.joker {
  background: url("../../imagespagegame/galleryimg5.webp") center/cover no-repeat;
}

.buyuk-oyun-alt {
  padding: 14px 16px;
  color: #fff;
  background: linear-gradient(180deg, #ff9737, #ef1e1e);
}

.buyuk-oyun-alt h3 {
  margin: 0;
  font-size: 18px;
}

.buyuk-oyun-alt p {
  margin: 4px 0 0;
}

.mini-oyun-grid {
  display: grid;
  grid-template-rows: repeat(2, 1fr);
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 20px) / 3);
  gap: 10px;
  overflow-x: auto;
  scroll-behavior: smooth;
  padding-bottom: 8px;
  width: 100%;
}

.mini-nav {
  position: absolute;
  top: 38%;
  transform: translateY(-50%);
  width: 42px;
  height: 42px;
  border-radius: 13px;
  border: none;
  background: rgba(244, 244, 244, 0.95);
  color: #666;
  font-size: 34px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.14);
}

.mini-sol {
  left: -18px;
}

.mini-sag {
  right: -18px;
}

.mini-oyun {
  background: #fff;
  border-radius: 14px;
  padding: 0 0 8px;
  overflow: hidden;
  border: 1px solid #e5e5e5;
  transition: transform 0.2s ease, box-shadow 0.25s ease;
  content-visibility: auto;
  contain-intrinsic-size: 170px;
}

.mini-oyun:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.12);
}

.mini-gorsel {
  height: 98px;
}

.mini-gorsel.legacy { background: linear-gradient(135deg, #4a2f06, #f49c25); }
.mini-gorsel.book { background: linear-gradient(135deg, #594525, #d07a3a); }
.mini-gorsel.bass { background: linear-gradient(135deg, #1f4a64, #ffb24f); }
.mini-gorsel.charm { background: linear-gradient(135deg, #8f2660, #f89ec9); }
.mini-gorsel.ways { background: linear-gradient(135deg, #1c1414, #ff8e1b); }
.mini-gorsel.sugar { background: linear-gradient(135deg, #8d2fd0, #62d45e); }
.mini-gorsel.fallen { background: linear-gradient(135deg, #1d1d45, #d5962b); }
.mini-gorsel.ra { background: linear-gradient(135deg, #4b1705, #b76a2f); }
.mini-gorsel.piggy { background: linear-gradient(135deg, #c95cbf, #f5b773); }
.mini-gorsel.olympus { background: linear-gradient(135deg, #552b11, #d7a943); }

.mini-oyun h4 {
  margin: 8px 8px 2px;
  font-size: 13px;
}

.mini-oyun p {
  margin: 0 8px;
  color: #76807b;
  font-size: 12px;
}

.yandan-araclar {
  position: fixed;
  right: 0;
  top: 48%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 30;
  pointer-events: auto;
}

.yukari-cik {
  position: fixed;
  right: 14px;
  bottom: 16px;
  width: 48px;
  height: 48px;
  border: none;
  border-radius: 50%;
  background: linear-gradient(180deg, #86cf08, #5ea810);
  color: #fff;
  font-size: 24px;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 10px 18px rgba(25, 95, 34, 0.28);
  z-index: 35;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
}

.yukari-cik.goster {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.destek-fab {
  position: fixed;
  right: 14px;
  bottom: 74px;
  width: 52px;
  height: 52px;
  border: none;
  border-radius: 16px 16px 0 16px;
  background: #e07a00;
  color: #fff;
  font-size: 22px;
  cursor: pointer;
  z-index: 36;
}

.yas-dogrulama {
  position: fixed;
  inset: 0;
  background: rgba(8, 28, 14, 0.72);
  display: grid;
  place-items: center;
  z-index: 120;
}

.yas-kart {
  width: min(520px, calc(100% - 24px));
  background: #ffffff;
  border-radius: 16px;
  padding: 22px;
  box-shadow: 0 24px 50px rgba(0, 0, 0, 0.34);
  text-align: center;
}

.yas-kart h2 {
  margin: 0 0 10px;
}

.yas-kart p {
  margin: 0 0 16px;
  color: #526058;
}

.yas-aksiyon {
  display: flex;
  justify-content: center;
  gap: 10px;
}

.yas-aksiyon button {
  border: none;
  border-radius: 10px;
  padding: 10px 16px;
  font-weight: 800;
  cursor: pointer;
}

#age-yes {
  background: #0f8f42;
  color: #fff;
}

#age-no {
  background: #efefef;
  color: #333;
}

.destek-panel {
  position: fixed;
  right: 74px;
  bottom: 74px;
  width: 370px;
  max-height: 74vh;
  background: #f3f4f3;
  border: 1px solid #d9dfdb;
  border-radius: 14px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.22);
  overflow: hidden;
  z-index: 37;
  display: none;
}

.destek-panel.acik { display: block; }
.gizli { display: none !important; }

.destek-ust {
  background: linear-gradient(100deg, #0d8c3d, #0e6f2e);
  color: #fff;
  padding: 12px;
  display: grid;
  grid-template-columns: 44px 1fr auto;
  align-items: center;
  gap: 8px;
}

.destek-geri {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  border: 1px solid #84d44f;
  background: transparent;
  color: #fff;
  font-size: 22px;
}

.destek-ust h3 { margin: 0; font-size: 18px; line-height: 1.2; }
.destek-kapatma button {
  border: none;
  background: transparent;
  color: #fff;
  font-size: 26px;
  width: 28px;
  cursor: pointer;
}

.destek-icerik { padding: 12px; }

.destek-ara {
  width: 100%;
  border-radius: 12px;
  border: 1px solid #d8ded9;
  min-height: 44px;
  padding: 0 12px;
  font-size: 15px;
}

.destek-liste {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  max-height: 320px;
  overflow: auto;
}

.destek-liste button {
  width: 100%;
  text-align: left;
  border: none;
  background: #fff;
  border-radius: 10px;
  padding: 11px 12px;
  margin-bottom: 8px;
  font-weight: 700;
  cursor: pointer;
}

.destek-alt {
  border-top: 1px solid #d9dfdb;
  padding-top: 10px;
}

.destek-altbtn {
  border: none;
  background: #8ed100;
  color: #174b26;
  font-weight: 800;
  border-radius: 10px;
  padding: 10px 14px;
  cursor: pointer;
}

.destek-yardim strong { display: block; margin-bottom: 10px; }
.destek-yardim button {
  margin-right: 8px;
  border-radius: 10px;
  border: 1px solid #9bcf3a;
  padding: 8px 12px;
  background: #fff;
  font-weight: 700;
}

.destek-form {
  display: grid;
  gap: 8px;
}

.destek-form input,
.destek-form textarea {
  border: 1px solid #d1d8d3;
  border-radius: 10px;
  padding: 10px;
  font: inherit;
}

.destek-form button {
  justify-self: end;
  border: none;
  border-radius: 10px;
  background: #0f8a3d;
  color: #fff;
  font-weight: 800;
  padding: 10px 14px;
}

.destek-tesekkur {
  background: #e8f6ea;
  border: 1px solid #bfe4c4;
  border-radius: 10px;
  padding: 10px;
  margin-top: 10px;
  font-weight: 700;
}

.hediye-pop {
  position: fixed;
  left: 16px;
  bottom: 16px;
  width: 320px;
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 18px 38px rgba(0, 0, 0, 0.28);
  border: 1px solid #dce4df;
  z-index: 50;
  opacity: 0;
  visibility: hidden;
  transform: translateY(18px) scale(0.96);
  transition: all 0.28s ease;
}

.hediye-pop.goster {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}

.hediye-kapat {
  position: absolute;
  right: 8px;
  top: 8px;
  width: 30px;
  height: 30px;
  border: none;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.42);
  color: #fff;
  font-size: 20px;
  cursor: pointer;
  z-index: 2;
}

.hediye-gorsel {
  height: 124px;
  background: url("../../imagespagegame/galleryimg6.webp") center/cover no-repeat;
}

.hediye-yazi {
  padding: 12px;
}

.hediye-yazi h4 {
  margin: 0 0 6px;
  font-size: 18px;
}

.hediye-yazi p {
  margin: 0 0 10px;
  color: #5b6661;
  font-size: 14px;
}

.hediye-dugme {
  display: inline-block;
  text-decoration: none;
  color: #fff;
  background: linear-gradient(180deg, #8dd807, #68ad0b);
  border-radius: 10px;
  font-weight: 800;
  padding: 10px 14px;
}

.yan-link {
  width: 58px;
  height: 50px;
  border-radius: 25px 0 0 25px;
  background: linear-gradient(90deg, #8ed000, #77b800);
  color: #fff;
  text-decoration: none;
  overflow: hidden;
  transition: width 0.22s ease, background 0.22s ease;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
  border-top: 1px solid rgba(255, 255, 255, 0.22);
  position: relative;
  padding-left: 14px;
}

.yan-link img {
  width: 24px;
  height: 24px;
  display: block;
  flex: 0 0 auto;
  margin-left: 0;
}

.yan-link span {
  white-space: nowrap;
  font-size: 16px;
  font-weight: 700;
  opacity: 0;
  transform: translateX(8px);
  transition: opacity 0.28s ease, transform 0.28s ease;
}

.yan-link:hover,
.yan-link:focus-visible {
  width: 230px;
  justify-content: flex-start;
  padding-left: 16px;
  background: linear-gradient(90deg, #98da00, #78b700);
  outline: none;
  z-index: 2;
}

.yan-link:hover span,
.yan-link:focus-visible span {
  opacity: 1;
  transform: translateX(0);
}

.yan-link:not(:hover):not(:focus-visible) {
  width: 58px;
  justify-content: flex-start;
  padding-left: 14px;
}

@media (max-width: 1520px) {
  .ust-serit {
    grid-template-columns: 1fr;
    padding: 14px 12px;
    row-gap: 10px;
  }

  .marka-alani,
  .aksiyonlar,
  .ana-gezinti {
    justify-content: center;
  }

  .ana-gezinti {
    flex-wrap: wrap;
    gap: 10px;
  }

  .dugme {
    padding: 10px 14px;
  }

  .logo-ust {
    font-size: 24px;
  }
}

@media (max-width: 1050px) {
  .kampanya {
    flex-direction: column;
    align-items: flex-start;
    padding: 8px 12px 0;
  }

  .kampanya-yazi h1 {
    font-size: 34px;
  }

  .kampanya-yazi p {
    font-size: 18px;
  }

  .kampanya-yazi {
    max-width: 100%;
  }

  .kampanya-gorsel {
    width: min(100%, 470px);
  }

  .arama-paneli {
    position: static;
    transform: none;
    width: calc(100% - 20px);
    margin: 16px auto 0;
    grid-template-columns: 1fr;
  }

  .oyunlar-bolumu {
    padding-top: 24px;
  }

  .oyun-grid {
    grid-template-columns: 1fr;
  }

  .ust-oyun-yerlesim {
    grid-template-columns: 1fr;
  }

  .mini-oyun-grid {
    grid-template-rows: repeat(2, 1fr);
    grid-auto-columns: calc((100% - 10px) / 2);
  }

  .mini-sol {
    left: -6px;
  }

  .mini-sag {
    right: -6px;
  }

  .filtre-kutu span {
    font-size: 22px;
  }

  .allgames-grid {
    grid-template-columns: repeat(3, minmax(120px, 1fr));
  }

  .insta-grid {
    grid-template-columns: repeat(4, minmax(100px, 1fr));
  }

  .altbilgi-grid {
    grid-template-columns: 1fr;
    gap: 22px;
    padding: 0 14px;
  }

  .altbilgi-alt {
    padding: 16px 14px 0;
  }
}

@media (max-width: 768px) {
  .ust-serit {
    grid-template-columns: 1fr;
    padding: 10px 8px;
    row-gap: 8px;
  }

  .marka-alani,
  .aksiyonlar,
  .ana-gezinti {
    justify-content: center;
  }

  .ana-gezinti {
    flex-wrap: wrap;
    gap: 6px;
  }

  .gezinti-ogesi {
    font-size: 13px;
    padding: 6px 8px;
  }

  .uyari-seridi {
    padding: 10px 12px;
  }

  .kampanya-gorsel {
    width: 100%;
    max-width: 100%;
    height: 210px;
  }

  .oyunlar-bolumu {
    padding: 18px 12px 24px;
  }

  .allgames-grid {
    grid-template-columns: repeat(2, minmax(120px, 1fr));
    gap: 10px;
  }

  .insta-grid {
    grid-template-columns: repeat(2, minmax(100px, 1fr));
    gap: 10px;
  }

  .destek-panel {
    left: 10px;
    right: 10px;
    bottom: 10px;
    width: auto;
    max-height: 78vh;
  }

  .hediye-pop {
    left: 10px;
    right: 10px;
    bottom: 10px;
    width: calc(100vw - 20px);
    max-width: 340px;
  }

  .yas-aksiyon {
    flex-direction: column;
  }
}

@media (max-width: 480px) {
  .logo-ust {
    font-size: 21px;
  }

  .logo-alt {
    letter-spacing: 2.2px;
  }

  .allgames-grid,
  .insta-grid {
    grid-template-columns: 1fr;
  }

  .mini-oyun-grid {
    grid-auto-columns: 100%;
  }

  .kampanya-yazi h1 {
    font-size: 30px;
  }

  .kampanya-yazi p {
    font-size: 17px;
  }
}

/* === pagegame image overrides (auto) === */
.mini-gorsel.legacy { background: url('../../imagespagegame/1.webp') center/cover no-repeat !important; }
.mini-gorsel.book { background: url('../../imagespagegame/10.webp') center/cover no-repeat !important; }
.mini-gorsel.bass { background: url('../../imagespagegame/11.webp') center/cover no-repeat !important; }
.mini-gorsel.charm { background: url('../../imagespagegame/12.webp') center/cover no-repeat !important; }
.mini-gorsel.ways { background: url('../../imagespagegame/13.webp') center/cover no-repeat !important; }
.mini-gorsel.sugar { background: url('../../imagespagegame/14.webp') center/cover no-repeat !important; }
.mini-gorsel.fallen { background: url('../../imagespagegame/15.webp') center/cover no-repeat !important; }
.mini-gorsel.ra { background: url('../../imagespagegame/2.webp') center/cover no-repeat !important; }
.mini-gorsel.piggy { background: url('../../imagespagegame/3.webp') center/cover no-repeat !important; }
.mini-gorsel.olympus { background: url('../../imagespagegame/4.webp') center/cover no-repeat !important; }
.allgame-thumb.g1 { background: url('../../imagespagegame/5.webp') center/cover no-repeat !important; }
.allgame-thumb.g2 { background: url('../../imagespagegame/6.webp') center/cover no-repeat !important; }
.allgame-thumb.g3 { background: url('../../imagespagegame/7.webp') center/cover no-repeat !important; }
.allgame-thumb.g4 { background: url('../../imagespagegame/8.webp') center/cover no-repeat !important; }
.allgame-thumb.g5 { background: url('../../imagespagegame/9.webp') center/cover no-repeat !important; }
.allgame-thumb.g6 { background: url('../../imagespagegame/galleryimg6.webp') center/cover no-repeat !important; }
.allgame-thumb.g7 { background: url('../../imagespagegame/galleryimg7.webp') center/cover no-repeat !important; }
.allgame-thumb.g8 { background: url('../../imagespagegame/galleryimg8.webp') center/cover no-repeat !important; }
.allgame-thumb.g9 { background: url('../../imagespagegame/galleryimg9.webp') center/cover no-repeat !important; }
.allgame-thumb.g10 { background: url('../../imagespagegame/galleryimg10.webp') center/cover no-repeat !important; }
.allgame-thumb.g11 { background: url('../../imagespagegame/galleryimg11.webp') center/cover no-repeat !important; }
.allgame-thumb.g12 { background: url('../../imagespagegame/gallery1.webp') center/cover no-repeat !important; }
.ph1 { background: url('../../imagespagegame/gallery2.webp') center/cover no-repeat !important; }
.ph2 { background: url('../../imagespagegame/gallery3.webp') center/cover no-repeat !important; }
.ph3 { background: url('../../imagespagegame/galleryimg1.webp') center/cover no-repeat !important; }
.ph4 { background: url('../../imagespagegame/galleryimg10.webp') center/cover no-repeat !important; }
.ph5 { background: url('../../imagespagegame/galleryimg11.webp') center/cover no-repeat !important; }
.ph6 { background: url('../../imagespagegame/galleryimg12.webp') center/cover no-repeat !important; }
.ph7 { background: url('../../imagespagegame/galleryimg13.webp') center/cover no-repeat !important; }
.ph8 { background: url('../../imagespagegame/galleryimg14.webp') center/cover no-repeat !important; }
.ph9 { background: url('../../imagespagegame/galleryimg15.webp') center/cover no-repeat !important; }
.ph10 { background: url('../../imagespagegame/galleryimg16.webp') center/cover no-repeat !important; }
.ph11 { background: url('../../imagespagegame/galleryimg2.webp') center/cover no-repeat !important; }
.ph12 { background: url('../../imagespagegame/galleryimg3.webp') center/cover no-repeat !important; }
.ph13 { background: url('../../imagespagegame/galleryimg4.webp') center/cover no-repeat !important; }
.ph14 { background: url('../../imagespagegame/galleryimg5.webp') center/cover no-repeat !important; }
.ph15 { background: url('../../imagespagegame/galleryimg6.webp') center/cover no-repeat !important; }
.ph16 { background: url('../../imagespagegame/galleryimg7.webp') center/cover no-repeat !important; }
.ph17 { background: url('../../imagespagegame/galleryimg8.webp') center/cover no-repeat !important; }
.ph18 { background: url('../../imagespagegame/galleryimg9.webp') center/cover no-repeat !important; }
.ph19 { background: url('../../imagespagegame/img1.webp') center/cover no-repeat !important; }
.ph20 { background: url('../../imagespagegame/img15.webp') center/cover no-repeat !important; }
.ph21 { background: url('../../imagespagegame/img16.webp') center/cover no-repeat !important; }
.ph22 { background: url('../../imagespagegame/img17.webp') center/cover no-repeat !important; }
.ph23 { background: url('../../imagespagegame/img1.webp') center/cover no-repeat !important; }
.ph24 { background: url('../../imagespagegame/gallery1.webp') center/cover no-repeat !important; }