/* =========================================================
   SAHMAT UI 3.0 — polished header / footer / modes / blog
   ========================================================= */
:root{
 --sm-bg:#08091a; --sm-surface:#0d1024; --sm-surface-2:#11152e;
 --sm-text:#f7f8ff; --sm-muted:#8992b0; --sm-line:rgba(155,165,230,.16);
 --sm-pink:#ff0a91; --sm-purple:#7657ff; --sm-cyan:#36d9ff;
}
html{scroll-behavior:smooth;overflow-y:auto!important}
body{min-height:100%;overflow-x:hidden!important;overflow-y:auto!important}
.sm-main{overflow:visible!important;min-height:1px}

/* HEADER */
.sm-header{
 position:sticky;top:0;z-index:9999;
 background:rgba(7,8,21,.88)!important;
 border-bottom:1px solid rgba(255,255,255,.08)!important;
 box-shadow:0 10px 35px rgba(0,0,0,.24);
}
.sm-nav-wrap{min-height:70px!important;gap:22px!important}
.sm-brand{gap:9px!important;font-size:20px!important}
.sm-brand-icon{
 width:38px;height:38px;border-radius:12px;
 background:linear-gradient(135deg,#7657ff,#ff0a91)!important;
 color:#fff!important;font-size:18px!important;
 box-shadow:0 8px 24px rgba(110,70,255,.30);
}
.sm-brand-copy{display:flex;flex-direction:column;line-height:1}
.sm-brand-copy strong{font-size:18px;letter-spacing:-.6px}
.sm-brand-copy small{font-size:7px;margin-top:5px;color:#98a0bf;font-weight:600;letter-spacing:.1px}
.sm-nav{gap:12px!important}
.sm-menu{gap:2px!important}
.sm-menu li a{
 padding:11px 13px!important;border-radius:12px!important;
 font-size:12px!important;color:#c6cbe0!important;
}
.sm-menu li a:hover,.sm-menu .current-menu-item>a{
 background:rgba(118,87,255,.13)!important;
 color:#fff!important;box-shadow:none!important;
}
.sm-menu .current-menu-item>a:after{
 content:"";display:block;position:absolute;left:13px;right:13px;bottom:5px;height:2px;border-radius:99px;
 background:linear-gradient(90deg,#7657ff,#ff0a91);
}
.sm-menu li a{position:relative}
.sm-nav-tools{display:flex;align-items:center;gap:8px;position:relative}
.sm-nav-cta{
 margin-left:2px!important;padding:11px 17px!important;border-radius:13px!important;
 background:linear-gradient(135deg,#6f52ff,#ff0a91)!important;
 box-shadow:0 8px 25px rgba(113,74,255,.22)!important;font-size:11px!important;
 white-space:nowrap;
}
.sm-lang-switch,.sm-theme-toggle{
 height:38px;border:1px solid rgba(144,154,220,.22);background:rgba(255,255,255,.035);
 color:#dce0f2;border-radius:12px;padding:0 11px;display:inline-flex;align-items:center;gap:7px;
 font:600 10px Poppins,sans-serif;cursor:pointer;transition:.2s;
}
.sm-lang-switch:hover,.sm-theme-toggle:hover{border-color:rgba(255,10,145,.45);background:rgba(255,255,255,.07)}
.sm-lang-switch .fa-chevron-down{font-size:8px;color:#8f97b7}
.sm-theme-toggle{min-width:83px;justify-content:center}
.sm-theme-toggle i{color:#ffd25c}
.sm-lang-menu{
 display:none;position:absolute;right:90px;top:47px;min-width:125px;padding:6px;
 background:#0e1126;border:1px solid rgba(255,255,255,.1);border-radius:13px;
 box-shadow:0 18px 45px rgba(0,0,0,.45);
}
.sm-lang-menu.is-open{display:block}
.sm-lang-menu button{
 width:100%;border:0;background:transparent;color:#dfe3f5;padding:9px 10px;border-radius:9px;
 text-align:left;font:600 11px Poppins,sans-serif;cursor:pointer;
}
.sm-lang-menu button:hover{background:rgba(118,87,255,.16)}
.sm-menu-toggle{border:1px solid rgba(255,255,255,.1)!important;border-radius:10px!important;padding:8px 11px!important}

/* HERO IMAGE — no clipping / no accidental floating overlays */
.sm-hero-visual{z-index:2!important;isolation:isolate}
.sm-hero-visual img{object-position:center center!important}
.sm-visual-note{pointer-events:none}
.sm-visual-note span{margin-top:150px!important}
.sm-hero-grid:after{display:none!important}

/* BLOG */
.sm-blog-page{padding:64px 0 80px;min-height:55vh}
.sm-page-hero{text-align:center;max-width:850px;margin:0 auto 38px}
.sm-page-kicker{display:inline-flex;align-items:center;gap:8px;color:#ff69c5;font-size:10px;font-weight:800;letter-spacing:1.7px}
.sm-page-hero h1{margin:12px 0 10px;color:#fff;font-size:clamp(34px,4vw,54px);font-weight:900;letter-spacing:-1.8px}
.sm-page-hero p{margin:0;color:#8992b0;font-size:14px;line-height:1.8}
.sm-blog-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.sm-blog-item{
 overflow:hidden;background:linear-gradient(145deg,rgba(17,21,46,.98),rgba(8,10,27,.98));
 border:1px solid rgba(112,128,220,.2);border-radius:20px;box-shadow:0 18px 50px rgba(0,0,0,.22);
 transition:transform .25s,border-color .25s,box-shadow .25s;
}
.sm-blog-item:hover{transform:translateY(-5px);border-color:rgba(255,10,145,.38);box-shadow:0 25px 60px rgba(0,0,0,.34),0 0 35px rgba(255,0,145,.08)}
.sm-blog-item-image{display:block;height:210px;overflow:hidden;background:#11152b}
.sm-blog-item-image img{width:100%;height:100%;object-fit:cover;transition:transform .45s}
.sm-blog-item:hover img{transform:scale(1.045)}
.sm-blog-item-body{padding:20px}
.sm-blog-item-meta{display:flex;justify-content:space-between;gap:10px;color:#77819f;font-size:9px;text-transform:uppercase;letter-spacing:.6px}
.sm-blog-item-meta span{color:#ff4fb5;font-weight:800}
.sm-blog-item h2{margin:11px 0 9px;font-size:18px;line-height:1.35}
.sm-blog-item h2 a{color:#fff!important;text-decoration:none!important}
.sm-blog-item-body p{color:#8f98b5;font-size:11px;line-height:1.7;min-height:56px;margin:0 0 16px}
.sm-blog-read{display:inline-flex;align-items:center;gap:7px;color:#fff!important;text-decoration:none!important;font-size:10px;font-weight:800}
.sm-blog-read i{color:#ff0a91;transition:transform .2s}
.sm-blog-read:hover i{transform:translateX(4px)}
.sm-blog-pagination{margin-top:32px}
.sm-blog-pagination .page-numbers{display:flex;justify-content:center;gap:7px;list-style:none;padding:0;margin:0}
.sm-blog-pagination a,.sm-blog-pagination span{
 display:inline-flex;align-items:center;justify-content:center;min-width:38px;height:38px;padding:0 11px;
 border-radius:10px;border:1px solid rgba(125,140,225,.2);background:#0e1126;color:#cbd1e8;text-decoration:none;font-size:11px;
}
.sm-blog-pagination .current{background:linear-gradient(135deg,#7657ff,#ff0a91);color:#fff;border-color:transparent}

/* FOOTER — reference-like four-column layout */
.sm-footer{background:#090b18!important;border-top:1px solid rgba(255,255,255,.08)!important;padding:58px 0 0!important}
.sm-footer-grid{display:grid;grid-template-columns:1.55fr repeat(3,1fr);gap:55px;padding-bottom:45px}
.sm-footer-brand .sm-brand{margin-bottom:20px}
.sm-footer-brand>p{max-width:310px;color:#8c95b2;font-size:12px;line-height:1.9;margin:0 0 20px}
.sm-socials{display:flex;gap:8px}
.sm-socials a{
 width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;
 background:#f4f5fb;color:#7657ff!important;text-decoration:none!important;font-size:12px;transition:.2s;
}
.sm-socials a:hover{transform:translateY(-3px);background:#7657ff;color:#fff!important}
.sm-footer-col h3{margin:8px 0 22px;color:#fff;font-size:13px;font-weight:800;letter-spacing:.2px}
.sm-footer-col a{display:block;color:#a0a8c2!important;text-decoration:none!important;font-size:10px;margin:0 0 14px;transition:.2s}
.sm-footer-col a:hover{color:#ff5fbe!important;transform:translateX(3px)}
.sm-footer-bottom{
 min-height:68px;border-top:1px solid rgba(255,255,255,.08);
 display:flex;align-items:center;justify-content:space-between;gap:20px;
 color:#75809e;font-size:10px;
}
.sm-footer-bottom strong{color:#ff4eb4}
.sm-footer-bottom div{display:flex;gap:25px}
.sm-footer-bottom a{color:#8e97b0!important;text-decoration:none!important}
.sm-footer-bottom a:hover{color:#fff!important}

/* LIGHT MODE */
html.sm-light-mode body{
 background:#f4f6fb!important;color:#1b2033!important;
 background-image:radial-gradient(circle at 10% 20%,rgba(118,87,255,.10),transparent 35%),radial-gradient(circle at 90% 10%,rgba(255,10,145,.07),transparent 35%)!important;
}
html.sm-light-mode .sm-header{background:rgba(255,255,255,.90)!important;border-bottom-color:rgba(31,39,70,.1)!important}
html.sm-light-mode .sm-brand-copy strong{color:#171b2b}
html.sm-light-mode .sm-menu li a{color:#424a65!important}
html.sm-light-mode .sm-menu li a:hover,html.sm-light-mode .sm-menu .current-menu-item>a{color:#171b2b!important;background:rgba(118,87,255,.08)!important}
html.sm-light-mode .sm-lang-switch,html.sm-light-mode .sm-theme-toggle{color:#333a55;background:#fff;border-color:rgba(31,39,70,.12)}
html.sm-light-mode .sm-main{background:linear-gradient(180deg,#f7f8fc,#eef1f8)!important}
html.sm-light-mode .sm-hero-copy h1,html.sm-light-mode .sm-page-hero h1{color:#171b2b!important}
html.sm-light-mode .sm-hero-copy p,html.sm-light-mode .sm-page-hero p{color:#68718c}
html.sm-light-mode .sm-stat,html.sm-light-mode .sm-rooms-card,html.sm-light-mode .sm-premium-chat,html.sm-light-mode .sm-radio-card,html.sm-light-mode .sm-premium-blog,html.sm-light-mode .sm-premium-benefits>div,html.sm-light-mode .sm-blog-item{background:#fff!important;border-color:rgba(31,39,70,.10)!important;box-shadow:0 15px 35px rgba(31,39,70,.08)}
html.sm-light-mode .sm-stat strong,html.sm-light-mode .sm-room strong,html.sm-light-mode .sm-premium-chat,.sm-light-mode .sm-radio-inner strong,html.sm-light-mode .sm-blog-item h2 a{color:#20263b!important}
html.sm-light-mode .sm-room small,html.sm-light-mode .sm-premium-chat .sm-message p,html.sm-light-mode .sm-blog-item-body p{color:#69728c!important}
html.sm-light-mode .sm-login-card{background:#fff;border-color:rgba(31,39,70,.12);box-shadow:0 20px 50px rgba(31,39,70,.12)}
html.sm-light-mode .sm-input-wrap input{background:#f1f3f8!important;color:#20263b!important;border-color:#dde1eb!important}
html.sm-light-mode .sm-input-wrap input::placeholder{color:#7b849c}
html.sm-light-mode .sm-footer{background:#fff!important}
html.sm-light-mode .sm-footer-col h3{color:#1d2338}
html.sm-light-mode .sm-footer-brand>p,html.sm-light-mode .sm-footer-col a{color:#68718a!important}
html.sm-light-mode .sm-footer-bottom{border-top-color:rgba(31,39,70,.1)}
html.sm-light-mode .sm-footer-bottom a{color:#68718a!important}

/* responsive */
@media(max-width:1250px){
 .sm-nav-wrap{gap:12px!important}
 .sm-menu li a{padding-left:9px!important;padding-right:9px!important}
 .sm-nav-tools{gap:5px}
 .sm-nav-cta{padding-left:12px!important;padding-right:12px!important}
}
@media(max-width:1050px){
 .sm-menu li a{font-size:10px!important;padding:9px 7px!important}
 .sm-brand-copy strong{font-size:16px}
 .sm-brand-icon{width:34px;height:34px}
 .sm-nav-tools .sm-theme-toggle span{display:none}
 .sm-theme-toggle{min-width:38px!important;width:38px;padding:0!important}
}
@media(max-width:900px){
 .sm-nav-wrap{min-height:64px!important}
 .sm-menu-toggle{display:block!important;margin-left:auto}
 .sm-nav{
   display:none;position:absolute;left:14px;right:14px;top:70px;
   padding:12px;background:#0d1024;border:1px solid rgba(255,255,255,.1);border-radius:16px;
   box-shadow:0 25px 60px rgba(0,0,0,.45);flex-direction:column;align-items:stretch;
 }
 .sm-nav.is-open{display:flex}
 .sm-menu{flex-direction:column;align-items:stretch}
 .sm-menu li a{justify-content:flex-start;padding:12px 14px!important}
 .sm-menu .current-menu-item>a:after{left:14px;right:auto;width:35px;bottom:7px}
 .sm-nav-tools{flex-wrap:wrap;padding-top:8px;border-top:1px solid rgba(255,255,255,.08);margin-top:6px}
 .sm-nav-cta{flex:1;justify-content:center}
 .sm-lang-menu{right:52px;top:auto;bottom:55px}
 .sm-blog-list{grid-template-columns:1fr 1fr}
 .sm-footer-grid{grid-template-columns:1.5fr 1fr 1fr;gap:30px}
 .sm-footer-brand{grid-column:1/-1}
}
@media(max-width:650px){
 .sm-blog-page{padding-top:42px}
 .sm-blog-list{grid-template-columns:1fr}
 .sm-blog-item-image{height:200px}
 .sm-footer-grid{grid-template-columns:1fr 1fr;gap:26px}
 .sm-footer-brand{grid-column:1/-1}
 .sm-footer-bottom{flex-direction:column;justify-content:center;padding:20px 0;gap:12px}
 .sm-footer-bottom div{gap:15px;flex-wrap:wrap;justify-content:center}
}
@media(max-width:480px){
 .sm-container{width:calc(100% - 28px)}
 .sm-brand-copy small{display:none}
 .sm-nav-tools{gap:6px}
 .sm-nav-cta span{font-size:10px}
 .sm-lang-switch{padding:0 9px}
 .sm-footer-grid{grid-template-columns:1fr}
 .sm-footer-col{padding-top:5px}
}


/* =========================================================
   SAHMAT POLISH v10
   ========================================================= */
.sm-skip-link{
 position:fixed;left:14px;top:-60px;z-index:100000;
 padding:10px 14px;border-radius:10px;background:var(--grad);color:#fff;
 font:700 13px "Times New Roman",Times,serif;text-decoration:none;
 transition:top .18s;
}
.sm-skip-link:focus{top:14px}
.sm-socials span{
 display:inline-grid;place-items:center;width:36px;height:36px;border-radius:10px;
 border:1px solid var(--line);background:rgba(255,255,255,.035);color:#bfc6dd;
 cursor:default;
}
.sm-socials span i{pointer-events:none}
.sm-blog-page-grid .sm-home-post h2{font-size:18px;line-height:1.12;margin:9px 0 6px}
.sm-blog-page-grid .sm-home-post p{min-height:55px}
.sm-blog-pagination{padding-bottom:4px}
.sm-blog-pagination a:hover,.sm-blog-pagination span:hover{border-color:var(--accent);color:#fff}
.sm-blog-pagination .current{color:#fff!important}
.sm-blog-filters{scrollbar-width:thin}
.sm-home-post-img img{background:#090b1b}
.sm-home-post h2 a{color:#fff;text-decoration:none}
.sm-home-post h2 a:hover{color:var(--accent)}
@media(min-width:1101px){
 .sm-blog-section .sm-home-post-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
 .sm-blog-section .sm-home-post-img{height:145px}
}
@media(max-width:1100px){
 .sm-blog-section .sm-home-post-grid,.sm-blog-page-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:650px){
 .sm-blog-section .sm-home-post-grid,.sm-blog-page-grid{grid-template-columns:1fr}
 .sm-blog-filters{flex-wrap:nowrap;overflow-x:auto;padding-bottom:4px}
 .sm-blog-filters a{flex:0 0 auto}
 .sm-home-post-img{height:185px}
 .sm-login-card{padding:20px!important}
 .sm-hero-copy h1{font-size:42px!important;letter-spacing:-1px!important}
 .sm-hero-copy p{font-size:16px!important}
 .sm-chatbox-body{grid-template-columns:1fr}
 .sm-active-users{display:none}
 .sm-chat-stream{border-right:0}
}

/* Radio hero link: keep the anchor visually identical to the action button. */
.sm-hero-actions a.sm-btn { text-decoration:none; display:inline-flex; align-items:center; justify-content:center; }