/*
Theme Name: teraniaya
Theme URI: https://amavi999.net/
Author: Generated
Description: Sidebar kiri ala suriya88 + section Bola & Togel. AMP-friendly.
Version: 1.1.0
License: GPLv2 or later
Text Domain: teraniaya
*/

:root{
  --tt25-bg:#0b1324;
  --tt25-line:rgba(255,255,255,.08);
  --tt25-text:#eaf0ff;
  --tt25-muted:rgba(234,240,255,.75);
  --tt25-accent:#f5b400;
  --tt25-accent2:#21c2ff;
  --tt25-sidebar-w:280px;
  /* Lebarkan layout desktop agar konten tidak terlihat terlalu kecil di layar besar */
  --tt25-maxw:1920px;
}

/* Isi area konten di desktop agar tidak "ngecil" karena .container di-center */
.main-inner .container{
  max-width: 100%;
  margin: 0;
  padding-left: 18px;
  padding-right: 18px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--tt25-bg);color:var(--tt25-text);font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto}
.container{max-width:var(--tt25-maxw);margin:0 auto;padding:0 18px}
.site-header{background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,0));border-bottom:1px solid var(--tt25-line)}
.brandbar{display:flex;align-items:center;justify-content:space-between;height:64px}
.brandbar .logo{font-weight:800;letter-spacing:.04em}
.brandbar .loginbtn{background:linear-gradient(90deg,#2ecc71,#21c2ff);color:#071022;border-radius:10px;padding:10px 14px;font-weight:800}
.layout{display:flex}
.sidebar{width:var(--tt25-sidebar-w);background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,0));border-right:1px solid var(--tt25-line);min-height:calc(100vh - 64px);position:sticky;top:64px}
.sidebar-inner{padding:14px 12px;overflow:auto;max-height:calc(100vh - 64px)}
.userbox{display:flex;align-items:center;gap:10px;padding:8px 6px 14px;border-bottom:1px solid var(--tt25-line);margin-bottom:10px}
.userbox .avatar{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.12);font-weight:800}
.badge{font-size:12px;color:var(--tt25-muted)}
.section-title{display:flex;align-items:center;gap:8px;margin:14px 6px 10px;font-weight:800}
.section-title .dot{width:18px;height:18px;border-radius:6px;background:rgba(255,255,255,.12);display:grid;place-items:center;font-size:12px}
.hr{height:1px;background:var(--tt25-line);margin:12px 6px}
.social-grid{display:flex;flex-wrap:wrap;gap:10px;padding:6px}
.social-grid a{width:34px;height:34px;border-radius:10px;background:rgba(255,255,255,.08);display:grid;place-items:center;box-shadow:0 8px 22px rgba(0,0,0,.25)}
.social-grid a span{width:22px;height:22px;display:block;background-size:contain;background-repeat:no-repeat;background-position:center}
.menu-list{list-style:none;margin:10px 0 0;padding:0}
.menu-list a{display:flex;align-items:center;gap:12px;padding:10px 10px;border-radius:12px;font-weight:750}
.menu-list a:hover{background:rgba(255,255,255,.06)}
.menu-list .mi{width:32px;height:32px;border-radius:10px;background:rgba(255,255,255,.08);display:block;object-fit:contain;padding:4px;box-sizing:border-box}
.main{flex:1;min-width:0}
.main-inner{padding:18px 0 40px}

/* Make desktop content use available width (avoid too much empty space on wide screens) */
.main > .container{max-width:100%;margin:0;}
.hero{background:linear-gradient(180deg, rgba(0,0,0,.25), rgba(0,0,0,0));border:1px solid var(--tt25-line);border-radius:16px;overflow:hidden}
.hero .banner{height:220px;background:rgba(255,255,255,.06);display:flex;align-items:center;justify-content:center}
.hero .banner h1{margin:0;font-size:36px}
.hero .strip{padding:10px 14px;text-align:center;font-weight:900;letter-spacing:.08em}
.hero .strip span{color:var(--tt25-accent)}
.hero .marq{margin:0 14px 14px;border-radius:999px;border:1px dashed rgba(255,255,255,.45);padding:12px 16px;background:rgba(0,0,0,.35);text-align:center;font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono","Courier New", monospace}
.block{margin-top:18px}
.block h2{margin:0 0 10px;color:var(--tt25-accent);font-size:18px}
.carousel{position:relative}
.scroller{display:flex;gap:14px;overflow:auto;padding:6px 0 12px;scroll-snap-type:x mandatory}
.card{min-width:320px;max-width:340px;background:rgba(255,255,255,.06);border:1px solid var(--tt25-line);border-radius:16px;padding:14px;scroll-snap-align:start;box-shadow:0 14px 30px rgba(0,0,0,.35)}
.vs{margin-top:10px;font-weight:900}
.odds{display:grid;gap:8px;margin-top:12px}
.odds span{display:flex;justify-content:space-between;background:rgba(0,0,0,.25);border:1px solid var(--tt25-line);border-radius:12px;padding:8px 10px}
.navbtn{position:absolute;top:6px;right:0;display:flex;gap:6px}
.navbtn button{width:28px;height:28px;border-radius:8px;border:1px solid var(--tt25-line);background:rgba(255,255,255,.06);color:var(--tt25-text);cursor:pointer}
.results{display:flex;gap:14px;flex-wrap:wrap}
.res{flex:1;min-width:240px;background:rgba(255,255,255,.06);border:1px solid var(--tt25-line);border-radius:16px;padding:14px}
.site-footer{border-top:1px solid var(--tt25-line);background:rgba(255,255,255,.03);padding:22px 0;color:var(--tt25-muted)}
.footer-inner{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
@media (max-width:980px){
  .layout{flex-direction:column}
  .sidebar{width:100%;position:relative;top:0;min-height:auto;border-right:none;border-bottom:1px solid var(--tt25-line)}
  .sidebar-inner{max-height:none}
  .card{min-width:280px}
}

.tt25-social-ic{width:28px;height:28px;border-radius:10px;background:rgba(255,255,255,.08);display:block;object-fit:contain;padding:4px;box-sizing:border-box}


/* === Providers section (desktop only) === */
.tt25-providers{margin:18px 0 10px;}
.tt25-providers-head{display:flex;align-items:center;gap:10px;margin:16px 0 10px;}
.tt25-providers-dot{width:14px;height:14px;border-radius:50%;background:radial-gradient(circle at 30% 30%, #4cf, #0b6);}
.tt25-providers-head h2{margin:0;font-size:18px;font-weight:800;letter-spacing:.2px;}
.tt25-provider-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;}
@media (min-width: 992px){.tt25-provider-grid{grid-template-columns:repeat(6,minmax(0,1fr));}}
@media (max-width: 480px){.tt25-provider-grid{gap:10px;}.tt25-provider{padding:8px 8px 10px;border-radius:14px;}.tt25-provider-img{height:86px;border-radius:12px;}.tt25-provider-name{margin-top:8px;font-size:13px;}}

.tt25-provider{display:block;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.10);border-radius:16px;padding:10px 10px 12px;text-align:center;text-decoration:none;box-shadow:0 10px 30px rgba(0,0,0,.25);} 
.tt25-provider:hover{transform:translateY(-1px);} 
.tt25-provider-img{height:120px;border-radius:14px;background:rgba(0,0,0,.25);display:flex;align-items:center;justify-content:center;overflow:hidden;}
.tt25-provider-img img{max-width:92%;max-height:92%;display:block;}
/* AMP for WP: amp-img inside flex container can collapse without explicit width */
.tt25-provider-img amp-img{width:92%;max-width:92%;}
.tt25-provider-img amp-img.i-amphtml-layout-responsive{width:92% !important;}
.tt25-provider-img amp-img img{object-fit:contain;}
.tt25-provider-name{margin-top:10px;font-weight:800;color:#eaf1ff;}


/* === Footer posts === */
.tt25-footer-posts{margin:24px 0 10px;padding-top:18px;border-top:1px solid rgba(255,255,255,.10);}
.tt25-footer-posts h3{margin:0 0 12px;font-size:18px;font-weight:900;}
.tt25-footer-posts-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;}
.tt25-postcard{display:flex;gap:10px;align-items:center;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.10);border-radius:14px;padding:10px;text-decoration:none;}
.tt25-postcard:hover{transform:translateY(-1px);}
.tt25-postcard-thumb{width:64px;height:64px;border-radius:12px;background:rgba(0,0,0,.25);flex:0 0 auto;overflow:hidden;}
.tt25-postcard-thumb img{width:100%;height:100%;object-fit:cover;display:block;}
.tt25-postcard-title{font-weight:800;color:#eaf1ff;line-height:1.2;}
@media (max-width: 991px){.tt25-footer-posts-grid{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (max-width: 560px){.tt25-footer-posts-grid{grid-template-columns:1fr;}}


/* Banner image */
.banner{position:relative;border-radius:18px;overflow:hidden;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.04);}
.banner-img{width:100%;height:280px;object-fit:cover;display:block;filter:saturate(1.05) contrast(1.05);}
.banner-title{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-size:42px;font-weight:900;letter-spacing:1px;color:#ffffff;text-shadow:0 10px 30px rgba(0,0,0,.65);} 
@media (max-width: 768px){.banner-img{height:180px;} .banner-title{font-size:28px;}}


/* ==== TERANIAYA: ICON AVATAR & SUPPORT (AMP SAFE) ==== */
.userbox .avatar{
  background-image: url("assets/icons/user.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 22px 22px;
  color: transparent;
  font-size: 0;
}
.section-title .dot{
  background-image: url("assets/icons/support.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 14px 14px;
}


/* Team crest */
.vs-teams{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap}
.vs-teams .team{display:flex;align-items:center;gap:8px;min-width:0}
.vs-teams .team span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:120px;display:inline-block}
.vs-teams img.crest{width:22px;height:22px;border-radius:50%;background:#0b1324;object-fit:contain;box-shadow:0 0 0 2px rgba(255,255,255,.08)}