:root {
  --gold: #FFD700;
  --dark-gold: #B8860B;
  --brown: #8B4513;
  --dark-bg: #111;
  --card-bg: rgba(139,69,19,0.3);
}

body {
  margin: 0;
  font-family: 'Arial', sans-serif;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;

  background-image: linear-gradient(rgba(0,0,0,0.75), rgba(0,0,0,0.75)), url('./casino.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  color: #ffffff;
}

.login-card {
  background: rgba(0,0,0,0.5);
  backdrop-filter: blur(10px);
  padding: 40px;
  margin: 80px auto;
  width: 400px;
  border-radius: 20px;
  box-shadow: 0 0 40px var(--gold);
  border: 2px solid var(--dark-gold);
  text-align: center;
}

@keyframes slideDown {
  from { transform: translateY(-50px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

input[type=text], input[type=password] {
  width: 90%;
  padding: 12px;
  margin: 10px 0;
  border-radius: 10px;
  border: 1px solid var(--gold);
}

button {
  background: var(--gold);
  color: #111;
  font-weight: bold;
  padding: 12px 20px;
  border-radius: 10px;
  border: 2px solid var(--dark-gold);
  cursor: pointer;
  transition: 0.3s;
}

button:hover {
  background: var(--dark-gold);
  color: #ffffff;
  transform: translateY(-2px);
}

.game-grid {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 20px;
}

.game-card {
  background: var(--brown);
  padding: 20px;
  border-radius: 10px;
  width: 120px;
  text-align: center;
  border: 1px solid var(--gold);
  transition: 0.3s;
}

.game-card:hover {
  background: var(--gold);
  color: #111;
  transform: scale(1.05);
}

.banner-slider img {
  width: 100%;
  max-height: 200px;
  margin-bottom: 20px;
  border-radius: 10px;
}

h2{
  color: var(--gold);
  text-shadow: 0 0 10px var(--gold), 0 0 20px var(--gold);
  margin-top: -15px;   /* naikkan tulisan */
  margin-bottom: 20px;
  letter-spacing: 2px;
}

.logo{ 
  width: 250px;   /* sebelumnya misalnya 150px */
  height: auto;
  margin-bottom:10px;
  filter: drop-shadow(0 0 10px gold);
}

/* naikkan logo */
.logo{
  width:250px;
  height:auto;
  margin-top:-30px;
  margin-bottom:5px;
  filter: drop-shadow(0 0 10px gold);
}

/* tombol sejajar */
.btn-group{
  display:flex;
  gap:10px;
  justify-content:center;
  margin-top:15px;
}

/* tombol login */
.login-btn{
  flex:1;
  background: var(--gold);
  color:#111;
  font-weight:bold;
  padding:12px;
  border-radius:10px;
  border:2px solid var(--dark-gold);
}

/* tombol register */
.register-btn{
  flex:1;
  text-decoration:none;
  background:transparent;
  color:var(--gold);
  font-weight:bold;
  padding:12px;
  border-radius:10px;
  border:2px solid var(--gold);
  display:flex;
  align-items:center;
  justify-content:center;
  transition:0.3s;
}

.register-btn:hover{
  background:var(--gold);
  color:#111;
}

.btn-group{
  display:flex;
  gap:10px;
  justify-content:center;
  margin-top:15px;
}

.login-btn{
  flex:1;
}

.register-btn{
  flex:1;
  text-decoration:none;
  background:transparent;
  color:var(--gold);
  font-weight:bold;
  padding:12px;
  border-radius:10px;
  border:2px solid var(--gold);
  display:flex;
  align-items:center;
  justify-content:center;
  transition:0.3s;
}

.register-btn:hover{
  background:var(--gold);
  color:#111;
}

.register-page{
  margin: 0;
  font-family: 'Arial', sans-serif;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;

  background-image: linear-gradient(rgba(0,0,0,0.75), rgba(0,0,0,0.75)), url('./casino2.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  color: #ffffff;
}

/* HEADER */

.header{
display:flex;
justify-content:space-between;
align-items:center;
padding:15px 30px;
background:#000;
color:#gold;
}

.logo{
font-size:22px;
font-weight:bold;
color:gold;
}

.menu a{
margin:0 10px;
color:white;
text-decoration:none;
}

.menu a:hover{
color:gold;
}

.user{
color:white;
}

.user a{
color:red;
margin-left:10px;
text-decoration:none;
}


/* GAME GRID */

.game-container{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:20px;
padding:40px;
}

.game-card{
background:#111;
border-radius:10px;
text-align:center;
padding:20px;
transition:0.3s;
}

.game-card:hover{
transform:scale(1.05);
background:#1a1a1a;
}

.game-card img{
width:80px;
margin-bottom:10px;
}

.game-card h3{
color:gold;
}

body{
margin:0;
font-family:Arial;
background:#0b0b0b;
color:white;
}

/* TOPBAR */

.topbar{
display:flex;
justify-content:space-between;
align-items:center;
background:black;
padding:15px 30px;
border-bottom:2px solid gold;
}

.logo{
color:gold;
font-size:24px;
font-weight:bold;
}

.nav a{
margin:0 15px;
color:white;
text-decoration:none;
}

.nav a:hover{
color:gold;
}

.userbox a{
color:red;
margin-left:10px;
text-decoration:none;
}


/* BANNER */

.banner img{
width:100%;
height:250px;
object-fit:cover;
}


/* SECTION TITLE */

.section-title{
text-align:center;
margin-top:40px;
color:gold;
}


/* PROVIDER GRID */

.provider-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:20px;
padding:30px;
}

.provider-card{
background:#111;
text-align:center;
padding:20px;
border-radius:10px;
transition:0.3s;
}

.provider-card:hover{
background:#1a1a1a;
transform:scale(1.05);
}

.provider-card img{
width:70px;
}

.provider-card p{
color:gold;
}


/* GAME GRID */

.game-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:20px;
padding:30px;
}

.game-card{
background:#111;
border-radius:10px;
overflow:hidden;
text-align:center;
}

.game-card img{
width:100%;
height:160px;
object-fit:cover;
}

.game-card p{
padding:10px;
color:gold;
}

.logo img{
height:50px;
width:auto;
filter: drop-shadow(0 0 6px gold);
}

body.login-page {
  margin:0;
  font-family: Arial, sans-serif;
  min-height: 100vh;
  display:flex;
  justify-content:center;
  align-items:center;

  /* background image */
  background: linear-gradient(rgba(0,0,0,0.75), rgba(0,0,0,0.75)), 
              url('../assets/casino.png') no-repeat center center;
  background-size: cover;

  color: white;
}


.cs-link{
    margin-top:15px;
    text-align:center;
}

.cs-link a{
    display:inline-flex;
    align-items:center;
    gap:8px;

    color:#d4af37; /* gold */
    text-decoration:none;
    font-size:14px;
    font-weight:600;

    padding:8px 12px;
    border:1px solid #d4af37;
    border-radius:8px;

    transition:0.3s;
    box-shadow:0 0 10px rgba(212,175,55,0.2);
}

.cs-link a:hover{
    background:#d4af37;
    color:#111;
    box-shadow:0 0 20px rgba(212,175,55,0.6);
    transform:translateY(-2px);
}

.cs-icon{
    font-size:16px;
}