/*
Theme Name: TIMUNA Theme - Luxury Gold Edition
Author: Custom Extra
Version: 2.2.0
Text Domain: timuna-theme
Description: Theme landing modern dengan visual Luxury Gold & Premium Dark UI. FIX: Homepage optimal & responsive.
*/

@font-face{
  font-family:"digital_sans_ef_medium";
  src:url("https://images-2-7nl.pages.dev/gambar/webfonts/digital_sans_ef_medium.woff2") format("woff2");
  font-weight:400;font-style:normal;font-display:swap
}

:root{
  /* --- PALET WARNA LUXURY GOLD --- */
  --primary-color: #d4af37;       /* Metallic Gold */
  --secondary-color: #aa7c11;     /* Dark Gold */
  --accent-color: #f3e5ab;        /* Light Soft Gold */
  --hover-accent: #fff3a8;       /* Flash Gold Hover */
  
  /* --- GRADASI EMAS (PREMIUM) --- */
  --gold-gradient-bright: linear-gradient(135deg, #bf953f 0%, #fcf6ba 25%, #b38728 50%, #fbf5b7 75%, #aa771c 100%);
  --gold-gradient-dark: linear-gradient(135deg, #aa771c 0%, #b38728 50%, #4a3200 100%);
  --dark-gradient: linear-gradient(180deg, #1f1f1f 0%, #111111 100%);

  /* --- BACKGROUND (DARK MODERNE) --- */
  --dark-bg: #0b0c10;             /* Hitam Elegan */
  --light-bg: #1f2128;            /* Abu Gelap Kontras */
  --menu-bg: #12131c;
  --footer-bg: #0b0c10;
  --content-bg: #171921;
  --sidebar-bg: #1f2128;

  --games-bg: #171921;
  --games-col-bg: #d4af37;
  --games-border: #bf953f;

  /* --- TYPOGRAPHY --- */
  --text-primary: #ffffff;
  --text-secondary: #d4af37;      /* Teks Judul Emas */

  --link-color: #e5c158;
  --link-hover-color: #ffffff;

  /* --- BUTTONS --- */
  --button-primary: #d4af37;
  --button-primary-dark: #1f1400;

  --login-button-start: #222222;
  --login-button-end: #444444;

  --register-button-start: #bf953f;
  --register-button-end: #d4af37;

  /* --- SHADOWS & GLOWS --- */
  --border-primary: rgba(212, 175, 55, 0.3);
  --white: #fff;
  --text-shadow: #000000;
  --box-shadow: rgba(212, 175, 55, 0.2);
  --box-shadow-inset: rgba(0, 0, 0, 0.6);
  --gold-glow: 0 0 15px rgba(212, 175, 55, 0.5);
  --payment-shadow: rgba(212, 175, 55, 0.4);
  --contact-border: #bf953f;
}

/* --- GLOBAL STYLES & ANIMATIONS --- */
html,body{margin:0;padding:0; scroll-behavior: smooth;}
body{
  font-family:"digital_sans_ef_medium",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  font-size:14px;line-height:1.5;letter-spacing:.5px;
  color:var(--text-primary);
  background:var(--dark-bg);
  background-image: radial-gradient(circle at top, #1f1a10 0%, var(--dark-bg) 70%); /* Efek pencahayaan dari atas */
}
*{box-sizing:border-box; transition: all 0.25s ease-in-out;} /* Animasi halus untuk semua interaksi */
a{color:var(--link-color);text-decoration:none}
a:hover{color:var(--link-hover-color); text-shadow: 0 0 8px var(--primary-color);}
img{max-width:100%;height:auto;display:block}

/* --- ICONS --- */
.svg-menu{height:20px;width:20px;display:inline-block;background-size:18px;background-repeat:no-repeat;vertical-align:middle; filter: drop-shadow(0px 0px 2px var(--primary-color));}
.svg-content{display:inline-block;width:27px;height:22px;background-size:21px;background-repeat:no-repeat;vertical-align:middle;margin-right:8px}

.svg-beranda{background-image:url("https://images-2-7nl.pages.dev/gambar/images/icon/icon-beranda.svg")}
.svg-casino{background-image:url("https://images-2-7nl.pages.dev/gambar/images/icon/icon-casino.svg")}
.svg-slots{background-image:url("https://images-2-7nl.pages.dev/gambar/images/icon/icon-slots.svg")}
.svg-togel{background-image:url("https://images-2-7nl.pages.dev/gambar/images/icon/icon-togel.svg")}
.svg-poker{background-image:url("https://images-2-7nl.pages.dev/gambar/images/icon/icon-poker.svg")}
.svg-fishing{background-image:url("https://images-2-7nl.pages.dev/gambar/images/icon/icon-fishing.svg")}
.svg-gift{background-image:url("https://images-2-7nl.pages.dev/gambar/images/icon/icon-gift.svg")}
.svg-jackpot{background-image:url("https://images-2-7nl.pages.dev/gambar/images/icon/icon-jackpot.svg")}
.svg-livecasino{background-image:url("https://images-2-7nl.pages.dev/gambar/images/icon/icon-livecasino.svg")}
.svg-esports{background-image:url("https://images-2-7nl.pages.dev/gambar/images/icon/icon-esports.svg")}
.svg-arcade{background-image:url("https://images-2-7nl.pages.dev/gambar/images/icon/icon-arcade.svg")}
.svg-whatsapp{background-image:url("https://images-2-7nl.pages.dev/gambar/images/icon/icon-whatsapp.svg")}
.svg-telegram{background-image:url("https://images-2-7nl.pages.dev/gambar/images/icon/icon-telegram.svg")}
.svg-livechat{background-image:url("https://images-2-7nl.pages.dev/gambar/images/icon/icon-livechat.svg")}

/* --- LAYOUT CONTAINER --- */
.container{max-width:1170px;width:100%;margin:auto;overflow:hidden}
.row{width:100%;display:flex;flex-wrap:wrap}
.col-sm-12{flex:0 0 100%;max-width:100%}
.col-sm-2{flex:0 0 15.9%;max-width:15.9%;margin:5px 4px}

/* --- HEADER & NAVIGATION --- */
.header{width:100%;z-index:999999;position:fixed;background:var(--menu-bg); border-bottom: 1px solid rgba(212, 175, 55, 0.2); box-shadow: 0 4px 20px rgba(0,0,0,0.5);}
.header .bg-line{
  height:4px;background: var(--gold-gradient-bright); /* Line header menggunakan gradasi emas berkilau */
}
.top-left{float:left;width:27%;display:flex;justify-content:flex-start}
.top-right{float:right;width:70%;font-size:11px;line-height:1.2}
.site-logo{
  float:left;left:0;width:24%;
  background:url("https://images-2-7nl.pages.dev/gambar/images/bg-header.png") center 0/cover no-repeat;
  height:89px; filter: drop-shadow(0 2px 5px rgba(0,0,0,0.5));
}
.site-logo a{display:block}
.site-logo img{position:relative;top:18px;width:100%;height:auto}
.nav-bar,.contact-floating{background: var(--gold-gradient-dark);}
.sticky{height:138px}

/* --- MENUS & BUTTONS --- */
ul{list-style:none;margin:0;padding:0}
ul.menu,ul.contact-us,ul.main-menu{text-transform:uppercase}
.contact-us{float:right;height:36px;padding:15px 0;text-transform:capitalize}
.contact-us li{float:left;padding:0 10px;border-right:1px dotted var(--contact-border)}
.contact-us li:first-child{padding-left:0}
.contact-us li:last-child{border-right:0}
.contact-us li a{font-size:12px;color:var(--white); font-weight: bold;}
.contact-us li a:hover{color:var(--hover-accent)}

.menu{float:right;margin:0 auto; padding-top: 5px;}
.menu li{float:left;min-width:75px;margin:0 0 0 6px;text-align:center;padding:0;border-radius:27px; overflow:hidden; box-shadow: 0 2px 5px rgba(0,0,0,0.3);}
.menu li a{padding:6px 21px;display:block;color:var(--white);text-shadow:0 1px 3px var(--text-shadow); font-weight: bold; font-size: 12px;}
.menu li:hover { transform: translateY(-2px); } /* Efek tombol naik saat dihover */

/* Tombol Login: Sleek Dark Gold */
.login{background: linear-gradient(135deg, #2b2519 0%, #111111 100%); border: 1px solid var(--primary-color);}
.login:hover{ background: linear-gradient(135deg, #443722 0%, #111111 100%);}

/* Tombol Daftar: Premium Gold Blinking Efek */
.daftar{background: var(--gold-gradient-bright); border: 1px solid #fff;}
.daftar a{color: #000 !important; text-shadow: none !important;}
.daftar:hover{box-shadow: var(--gold-glow); background: linear-gradient(135deg, #fff 0%, #bf953f 100%);}

/* Navigasi Utama */
.main-menu{float:right}
.main-menu li{float:left}
.main-menu li a{display:inline-block;padding:20px 25px;color:var(--white);font-size:13px;line-height:18px; font-weight: 500;}
.main-menu li a:hover{color:var(--hover-accent); background: rgba(255,255,255,0.03); border-bottom: 2px solid var(--primary-color);}

/* --- MAIN CONTENT & CONTAINERS --- */
.main{background:var(--light-bg)}
.slide{margin-bottom:17px; border-radius: 12px; overflow: hidden; border: 1px solid rgba(212, 175, 55, 0.15);}
.bg-rounded .container{padding:25px;background:var(--content-bg);margin-bottom:30px;border-radius:12px; border: 1px solid rgba(212, 175, 55, 0.1); box-shadow: 0 10px 30px rgba(0,0,0,0.5);}

/* Fitur Baru: Efek Glow Premium untuk Banner Jackpot */
.jackpot img{margin:auto;border-radius:12px;border:3px solid var(--games-border); box-shadow: var(--gold-glow); animation: goldPulse 2s infinite alternate;}
@keyframes goldPulse {
  0% { box-shadow: 0 0 10px rgba(212, 175, 55, 0.4); }
  100% { box-shadow: 0 0 25px rgba(212, 175, 55, 0.8); }
}

.title-row{
  margin:21px auto;border-bottom:3px solid var(--games-border);
  font-size:19px;display:flex;align-items:center;color:var(--text-secondary); font-weight: bold; padding-bottom: 7px; text-transform: uppercase; letter-spacing: 1px;
}

/* --- GAME CARDS UI (ROMBAK TOTAL) --- */
.ct-rounded{
  padding:15px;background: #0f1015;margin:10px auto;border-radius:12px;
  box-shadow:0 0 20px var(--box-shadow-inset) inset;border:1px solid rgba(212,175,55,0.2);
}
/* Grid Game: Efek Card Lifting & Glassmorphism Glossy */
.ct-rounded .col-sm-2{
  padding:5px;background: linear-gradient(135deg, rgba(40,35,25,0.6) 0%, rgba(20,20,20,0.9) 100%);
  border-radius:12px;box-shadow:0 4px 10px rgba(0,0,0,0.4); border: 1px solid rgba(212,175,55,0.2); overflow: hidden;
}
.ct-rounded .col-sm-2:hover{
  transform: translateY(-6px) scale(1.02); /* Efek UI baru: Card melayang naik saat dilewati kursor */
  border-color: var(--primary-color);
  box-shadow: 0 8px 20px rgba(212, 175, 55, 0.3);
}
.image-wrapper{
  border-radius:10px;background: var(--dark-gradient);
  border-bottom:2px solid var(--primary-color);padding:10px
}
.slotgames img{width:75%;margin:auto; filter: drop-shadow(0 4px 6px rgba(0,0,0,0.3));}
.title-games{
  font-size:13px;padding:10px 5px 5px 5px;color:var(--white);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  text-align:center; font-weight: bold;
}
.ct-rounded .col-sm-2:hover .title-games{ color: var(--primary-color); }

/* SEO Content Wrap */
.content-wrap .container{padding:25px;background:var(--content-bg);border-radius:12px;margin-bottom:30px; border: 1px solid rgba(212, 175, 55, 0.1); line-height: 1.7;}
.content-wrap h1,.content-wrap h2,.content-wrap h3{color:var(--text-secondary); border-left: 4px solid var(--primary-color); padding-left: 10px;}

/* --- FOOTER SECTIONS --- */
.footer{width:100%;padding:20px 0 30px;background:var(--footer-bg); border-top: 2px solid var(--primary-color);}
.disclaimer{border-top:1px solid rgba(212, 175, 55, 0.2); padding-top: 15px;}
.article{color:#a0a5b5;padding:0; font-size: 13px;}
.footer-title{font-size:16px;color:var(--text-secondary);margin:20px auto; font-weight: bold; text-transform: uppercase;}
.col-border{border:1px solid rgba(212, 175, 55, 0.2);border-radius:8px;margin:5px auto;padding:18px; background: rgba(255,255,255,0.02);}

/* Bank / Payment Grid modern */
.payment .col-sm-2{
  margin:4px;flex:0 0 11.7%;max-width:11.7%;
  border-left:4px solid var(--primary-color);padding:8px;background: #16171e;
  border-radius:5px;box-shadow:0 2px 5px rgba(0,0,0,0.3);text-align:center; display: flex; align-items: center; justify-content: center;
}
.payment .col-sm-2:hover{ border-left-color: #fff; background: var(--secondary-color); box-shadow: var(--gold-glow); }
.copyright{font-size:12px;padding:20px 0;text-align:center; color: #777;}
.copyright a{color:var(--text-secondary); font-weight: bold;}

/* Quick Floating Menu Desktop Right */
.quick-footer{
  position:fixed;width:170px;height:42px;bottom:0;right:10px;
  background: var(--gold-gradient-bright);
  border-radius:8px 8px 0 0;z-index:100;padding:2px; box-shadow: 0 -2px 10px rgba(0,0,0,0.3);
}
.quick-footer li{margin:1px auto;padding:4px 12px}
.quick-footer li a{color:#000;display:flex;align-items:end;text-align:center;font-size:16px;text-transform:uppercase; font-weight: bold;}
.quick-footer .svg-menu{height:25px;width:30px;background-size:25px; filter: brightness(0);}

/* --- RESPONSIVE MOBILE STYLES (768px) --- */
.mobile{display:none}
@media (max-width:768px){
  .top-header,.main-menu,.quick-footer.desktop{display:none}
  .mobile{display:block}
  body{ background-image: radial-gradient(circle at top, #241e12 0%, var(--dark-bg) 50%); }
  .header{height:64px;border-bottom:1px solid rgba(212,175,55,0.3)}
  .sticky{height:62px}
  .site-logo{width:50%;float:none;margin:auto;position:absolute;left:0;right:0;background-size:contain}
  .site-logo img{top:11px}

  .bg-rounded .container{padding:10px;background:var(--content-bg);border-radius:0;margin-bottom:0}
  .ct-rounded{padding:8px; background: #0b0c10;}
  
  /* Grid game mobile dirombak agar pas 3 kolom rapi dengan gap proporsional */
  .games .col-sm-2{max-width:31.3%;flex:0 0 31.3%;margin:4px 1%; border-radius: 8px;}
  .footer .col-sm-2{max-width:22%;flex:1 0 22%;margin:5px;font-size:10px}
  .content-wrap .container{border-radius:0; padding: 15px;}

  /* Tombol Menu Mobile Atas (Login/Daftar) */
  .login-mobile{padding:5px;margin:0; background: #12131c; display: flex; justify-content: space-between;}
  .login-mobile li{display:inline-block;width:49%;text-align:center; border-radius: 6px; overflow: hidden;}
  .login-mobile li a{font-size:15px;padding:10px 10px;display:block; font-weight: bold;}
  
  .login-mobile li:first-child{ background: linear-gradient(135deg, #222 0%, #444 100%); border: 1px solid var(--primary-color); }
  .login-mobile li:first-child a { color: var(--primary-color); }
  .login-mobile li:last-child{ background: var(--gold-gradient-bright); }
  .login-mobile li:last-child a { color: #000; text-shadow: none; }

  .menu-mobile{width:100%;margin:auto; padding: 10px 5px;}
  .main-mobile li{width:23.5%;border-radius:8px;margin:2px 0.5%;display:inline-block; background: rgba(255,255,255,0.03); border: 1px solid rgba(212,175,55,0.15);}
  .main-mobile li a{padding:10px 5px;font-size:12px;display:flex;align-items:center;flex-direction:column;color:var(--white); font-weight: bold;}
  .main-mobile li .svg-menu{height:30px;width:25px;background-size:25px; margin-bottom: 5px;}
  .main-mobile li:hover{ border-color: var(--primary-color); background: rgba(212,175,55,0.05); }

  /* Floating Bottom Navigation Bar Mobile */
  .contact-floating{position:fixed;bottom:0;width:100%;padding:5px 0;z-index:99999; border-top: 2px solid var(--accent-color); box-shadow: 0 -4px 15px rgba(0,0,0,0.6);}
  .contact-floating li{display:inline-block;width:32.5%;text-align:center;padding:2px 0}
  .contact-floating li a{font-size:12px;color:var(--white); font-weight: bold; text-transform: uppercase; display: block;}
  .contact-floating li i{display:block;margin:0 auto 4px auto;background-size:18px;width:20px;height:20px}
  .copyright{padding-bottom:65px}
}