/*
Theme Name: vivaturkiye 7.7
Theme URI: https://vivaturkiye.eu/
Author: vivaturkiye
Author URI: https://vivaturkiye.eu/
Description: Vivaturkiye teması
Version: 7.6
*/
@font-face {
font-family: Righteous-Regular;
src: url('fonts/Righteous-Regular.woff2') format('woff2');
font-weight: normal;
font-display: swap;
}
@font-face {
font-family: angelina;
src: url('fonts/angelina.woff2') format('woff2');
font-weight: normal;
font-display: swap;
}
@font-face {
font-family: Ubuntu-Light;
src: url('fonts/Ubuntu-Light.woff2') format('woff2');
font-weight: normal;
font-display: swap;
}
@font-face {
font-family: Lato;
src: url('fonts/Lato-Regular.woff2') format('woff');
font-weight: normal;
font-display: swap;
}
@font-face {
font-family: BebasNeue;
src: url('fonts/BebasNeue-Regular.woff2') format('woff');
font-weight: bold;
font-display: swap;
}
@font-face {
font-family: Exo-VariableFont_wght;
src: url('fonts/Exo-VariableFont_wght.woff2') format('woff2');
font-weight: normal;
font-display: swap;
}
*{box-sizing:border-box;padding:0;margin:0}

body{background: #172035;direction:ltr;color:#ffffff;overflow-x:hidden;font-family:Ubuntu-Light;font-size:14px;}
:before,:after{transition:all 0.3s ease-out;}
h1, h2, h3, h4, h5, h6{font-family:Exo-VariableFont_wght;font-weight:normal;}
a{text-decoration:none;color:#21b2c3;}
a:hover{text-decoration:none;color:#197b30;}
ul, li{list-style:none;}
button,label,select{cursor:pointer;}
input, button, textarea, select {
    font-family: Ubuntu-Light;
    border: 0;
}
button{cursor:pointer;}
strong{font-weight:normal;}
.width{width:90%;margin:0px auto;}
.hnm {
    background: #e6e6e6;
    overflow: hidden;
    padding: 2em 0;
    background: linear-gradient(to right,#393E46 0,#0092CA 100%);
}
.hnm .headlogo {
    float: left;
    background: url("images/sprites.png") 0px -71px;
    width: 142px;
    height: 36px;
    margin-left: 1.5em;
    text-indent: -100%;
    overflow: hidden;
}
.hnm ul li {
    float: left;
}
.hnm ul li a {
    color: rgba(255, 255, 255, 0.7);
    display: block;
    font-size: 14px;
    line-height: 2.6;
    font-weight:normal;
    margin-left: 1.5em;
}
.hnm ul li a:hover {
    color: white;
}
.lms {
    float: left;
    margin-top: 8px;
}
.lms a {
    width: 30px;
    height: 30px;
    float: left;
    border-radius: 8px;
    margin-right: 8px;
    background: #e5e5e5;
    padding: 7px 8px;
    box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.05);
    position: relative;
}
.lms a::before {
    content: "";
    background: url("images/sprites.png");
    width: 14px;
    height: 14px;
    top: 50%;
    transform: translate(-50%, -50%);
    left: 50%;
    position: absolute;
}
.lms .fb:before{background-position:-36px 0px;}
.lms .gl:before{background-position:-49px 0px;}
.lms .tw:before{background-position:-63px 0px;}
.lms .ig:before{background-position:-78px 0px;}
.lms .fb:hover{background:#39599f;}
.lms .gl:hover{background:#db0000;}
.lms .tw:hover{background:#2bc6ff;}
.lms .ig:hover{background:linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%);}
.lmhd{padding:1em 0 0.5em;overflow:hidden;}
.titlelml{float:right;margin:0.7em 0 0 1em;}
.titlelml i{font-size:70px;color:#e5e5e5;}
.titlelmtxt {
    box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.09);
    background: rgb(255, 255, 255) none repeat scroll 0% 0%;
    padding: 1em;
    border-radius: 5px;
    margin: 0.5em 0;
}
.titlelmtxt h1 {
    font-size: 14px;
    color: #222831;
    font-weight:normal;
}
.titlelmtxt h1::before {
    content: "";
    background: url("images/sprites.png") -79px -43px;
    width: 14px;
    height: 13px;
    float: left;
    margin: 4px 4px 0 7px;
}
.titlelmtxt h1 a{color:#999;}
.titlelmtxt h1 a:hover{color:#9c27b0;}
.hnmb {
    overflow: hidden;
    background: #222831;
    border-bottom: 1px solid #e5e5e5;
}
.hnmb ul li{float:left;}
.hnmb ul li a {
    color: #CCC;
    display: block;
    font-size: 13px;
    padding: 1em;
    border-bottom: 2px solid white;
}
.hnmb ul li a:hover {
    color: #14FFEC;
    border-color: #0092CA;
}
.search form {
    float: right;
    background: #FFF;
    border-radius: 3px;
    padding: 8px 15px;
    position: relative;
    overflow: hidden;
    height: 36px;
}
.search input {
    color: #777;
	font-family:Exo-VariableFont_wght;
    width: 100%;
    font-weight: normal;
    font-size: 18px;
}
.search button {
    position: absolute;
    right: 0px;
    width: 36px;
    height: 36px;
    top: 0px;
    background: linear-gradient(#0D7377, #0D7377);
}
.search button:before {
    content: "";
    background: url("images/sprites.png") -20px 0px;
    width: 16px;
    height: 16px;
    top: 50%;
    transform: translate(-50%, -50%);
    left: 50%;
    position: absolute;
}
.headadver img{max-width:100%;height:auto;margin:5px;box-shadow:0 0px 5px RGBA(0, 0, 0, 0.2);}
.spt {
    position: relative;
    overflow: hidden;
    margin: 1.5em 0 1em;
}
.spt:after{content:"";background:#0092CA;height:2px;position:absolute;width:100%;right:0;top:50%;transform:translate(0,-50%);z-index:-1;}
.spt span{float:right;z-index:9;background:#fff;margin-right:1em;background:#fff;padding:0 1em;font-size:14px;color:#666;}
.spt span:nth-child(2){float:left;direction:ltr;text-align:left;margin-left:1em;color:#999;}
.specialpost{overflow:hidden;text-align:center;}
.specialpost .spbox{position:relative;display:inline-block;margin:5px;}
.specialpost .padding{float:right;width:150px;height:150px;box-shadow:0 0px 5px RGBA(0, 0, 0, 0.2);position:relative;overflow:hidden;}
.specialpost .padding img{width:150px;height:150px;}
.specialpost .padding .artist{position:absolute;transform:translate(-50%, 0px);left:50%;width:90%;top:40%;color:#fff;opacity:0;visibility:hidden;}
.specialpost .padding .artist i{color:#f5e215;font-style:normal;font-weight:normal;}
.specialpost .padding:hover .artist{opacity:1;visibility:visible;}
.specialpost .padding .hover{border-radius:50%;background:rgba(0, 0, 0, 0.5);height:100%;position:absolute;width:100%;left:50%;top:-50%;transform:scale(0);transition:all 0.4s;}
.specialpost .padding:hover .hover{transform:scale(3);}
.specialpost .spcat{position:absolute;top:6px;left:6px;background:RGBA(0, 0, 0, 0.6);color:rgba(255, 255, 255, 0.7);padding:1px 5px 0;border-radius:3px;font-size:11px;}
.sidebar.rsb{float:left;width:20%;margin-top:1em;box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.09); background: #111827;border-radius: 5px;}
.sidebar.lsb{float:left;width:33%;margin-top:1em;box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.09); background: #111827;border-radius: 5px;}
.mpwrap{width:78.2%;float:right;}
.postwrap {
    float: left;
    width: 65.5%;
    margin-left: -0.5em;
    margin: 1em 1em 1em -0.5em;
}
.sbtitle {
    position: relative;
	text-align: left;
    overflow: hidden;
    padding: 1.5em 1.7em;
    border-bottom: 2px solid #251B37;
    margin-bottom: 1.2em;
}
.sbtitle h3,.pwtitle .hding{
	direction:ltr;
    font-size: 14px;
	font-family: Exo-VariableFont_wght;
    font-weight: bold;
    color: #666;
}
.sbtitle2 h3,.pwtitle .hding{
	direction:ltr;
    font-size: 14px;
	font-family: Exo-VariableFont_wght;
    font-weight: bold;
    color: #666;
}
.sbtitle2 {
    position: relative;
	text-align: right;
    overflow: hidden;
    padding: 1.5em 1.7em;
    border-bottom: 2px solid #251B37;
    margin-bottom: 1.2em;
}
.sbtitle2 h3 strong{font-size:12px;opacity:0.6;}
.sbtitle2.sbt1 h3{color:#6f3ab0;}
.sbtitle2.sbt2 h3{color:#b03a77;}
.sbtitle2.sbt3 h3{color:#21b2c3;}
.sbtitle2.sbt4 h3{color:#c73139;}
.sbtitle2.sbt5 h3{color:#74b03a;}
.sbtitle2.sbt6 h3{color:#21b2c3;}
.sbtitle2.sbt7 h3{color:#ff731f;}
.sbtitle2.sbtd h3{color:#197b30;}
.pwtitle {
    position: relative;
	text-align: left;
    overflow: hidden;
    padding: 1.5em 1.7em;
    border-bottom: 2px solid #f2f2f2;
    margin-bottom: 1.2em;
}
.pwtitle {
    padding: 1.5em;
    margin: 0px;
    box-shadow: 0px 0px 7px rgba(0, 0, 0, 0.05);
    border-bottom: 1px solid #00AB78;
    background: #262f39;
    border-radius: 5px 5px 0px 0px;
}

.sbtitle h3,.pwtitle .hding{
	direction:ltr;
    font-size: 14px;
	font-family: Exo-VariableFont_wght;
    font-weight: bold;
    color: #666;
}
.pwtitle .hding{
    font-size: 16px;
    line-height: 1.7;
    color:#CCC;
}
.pwtitle .hding a:hover{color:#333;}
.pwtitle .hding a:hover{color:#FFF;}

.pwtitle .hding::before {
	content: "";
	background: url("images/sprites.png");
	width: 20px;
	height: 25px;
	float: left;
	margin-right: 15px;
}

.pwtitle .hding.music:before {background-position: 0px 0px;}
.pwtitle .hding.video::before {
    background-position: 0px -25px;
    margin-top: 5px;
    height: 19px;
}
.pwtitle .hding.video a:hover{color:#673ab7;}
.pwtitle .hding.soon::before {
    background-position: 0px -46px;
    margin-top: 4px;
    height: 20px;
}
.pwtitle .hding.soon a:hover{color:#CCC;}
.pwtitle .hding.album::before{background-position:-41px -49px;margin-top:3px;}
.pwtitle .hding.album a:hover{color:#0D9CAA;}
.pwtitle .hding.news::before {background-position:-20px -49px;margin-top:3px;}
.pwtitle .hding.news a:hover{color:#ff5722;}

.sbtitle h3 strong{font-size:12px;opacity:0.6;}
.sbtitle.sbt1 h3{color:#6f3ab0;}
.sbtitle.sbt2 h3{color:#b03a77;}
.sbtitle.sbt3 h3{color:#ff6464;}
.sbtitle.sbt4 h3{color:#21b2c3;}
.sbtitle.sbt5 h3{color:#21b2c3;}
.sbtitle.sbt6 h3{color:#21b2c3;}
.sbtitle.sbt7 h3{color:#ff0000;}
.sbtitle.sbtd h3{color:#197b30;}
.sbcontent1, .sbcontent, .pwcontent {
    padding: 0 1em;
    text-align: justify;
    overflow: hidden;
}
.sbcontent.adsside{text-align:center;padding-top:1.5em;}
.pwcontent {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
    font-size: 12px;
    line-height: 1.3;
    font-weight: 500;
    color: #F4F5F0;
    overflow: hidden;
    margin-bottom: 1.5em;
    padding: 1.5em;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
    background: #2E5283;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    max-width: 800px;
    width: 100%;
}

.pwcontent h1, .pwcontent h2, .pwcontent h3, .pwcontent h4 {
    color: #FFFFFF;
    font-weight: 600;
    margin: 0 0 0.3em 0;
    line-height: 1.5;
}

.pwcontent h1 { font-size: 1.8em; }
.pwcontent h2 { font-size: 1.6em; }
.pwcontent h3 { font-size: 1.4em; }
.pwcontent h4 { font-size: 1.2em; }

.pwcontent p {
    margin-bottom: 0.5em;
    color: #E0E0E0;
}

.pwcontent ul, .pwcontent ol {
    margin: 0.3em 0 0.5em 0;
    padding-left: 1.2em;
}

.pwcontent li {
    margin-bottom: 0.2em;
    line-height: 1.2;
}

.pwcontent a {
    color: #f5f7f9;
    text-decoration: none;
    border-bottom: 1px solid rgba(102, 178, 255, 0.3);
}

.pwcontent blockquote {
    margin: 0.8em 0;
    padding: 0.6em 1em;
    border-left: 3px solid #66B2FF;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 0 6px 6px 0;
    font-style: italic;
    line-height: 1.2;
}

@media (max-width: 768px) {
    .pwcontent {
        font-size: 15px;
        padding: 1.2em;
        border-radius: 10px;
    }
    
    .pwcontent h1 { font-size: 1.6em; }
    .pwcontent h2 { font-size: 1.4em; }
    .pwcontent h3 { font-size: 1.2em; }
}
.pwcontent img{max-width:100%;height:auto;margin:0.5em 0;box-shadow: 0 2px 7px rgba(0, 0, 0, 0.1);}
.pwinf {
    margin-top: 0.7em;
    width: 100%;
    float: right;
}
.pwinf .mre {
    float: right;
    background:#000;
    padding: 5px 15px;
    border-radius: 7px;
    color: #FFF;
    font-weight: normal;
    font-size: 14px;
    box-shadow: 0px 3px 7px rgba(0, 102, 204, 0.2);
}
.pwinf .mre:hover{background:#1c1d22;}
.pwinf .plike{background:#e5e5e5;float:right;padding:4px 5px 3px 7px;border-radius:4px;height:25px;margin-top:5px;}
.pwinf .plike i{font-size:15px;float:right;color:#f53752;}
.pwinf .plike span{float:left;margin-right:2px;font-size:12px;line-height:18px;cursor:pointer;color:#777;}
.pshare {
    float: right;
    margin: 11px 5px 0px 0px;
}
.pshare a {
    background: url("images/sprites.png");
    width: 19px;
    height: 19px;
    float: left;
    margin-right: 5px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
    border-radius: 4px;
}
.pshare a:hover {
    filter: opacity(70%);
}
.pshare .fb{background-position:-58px -30px;}
.pshare .gp{background-position:-39px -30px;}
.pshare .tw{background-position:-20px -30px;}
.pwds {
    overflow: hidden;
    padding: 12px 15px 10px;
    border-bottom: 1px solid #f2f2f2;
    margin: 0 -1.5em 1em;
    background: #1c1d22;
}
.pwds span {
    float: left;
    color: #FFF;
    font-size: 12px;
    margin-left:6px;
}
.pwds span:before{
    content: "";
    float: right;
    background: url("images/sprites.png");
    margin: 6px 0px 0px 6px;
    height: 13px;
}
.pwds .date:before {
    background-position:-20px -16px;
    width: 14px;
    margin-top: 5px;
}
.pwds .cat:before {
    background-position:-48px -16px;
    width: 16px;
}
.pwds .view:before {
    background-position:-34px -16px;
    width: 14px;
}
.pwds .cmt {
    float: right;
    margin: 0px;
    border-radius: 5px;
    font-size: 11px;
    height: 24px;
    line-height: 27px;
    background: #fff;
    padding: 0px 7px;
}

.pwds .cmt:before {
    content: "";
    background-image: url("images/sprites.png");
    height: 13px;
    background-position: -64px -16px;
    width: 14px;
    float: left;
    margin: 6px 5px 0px 0px;
}

.sbc1 {
	text-align: right;
    line-height: 2;
    font-size: 13px;
}
.sbc1 li{color:#333;font-weight:normal;}
.sbc1 li a:hover{color:#6f3ab0;}
.sbc1 li ul li:first-child{margin-top:8px;}
.sbc1 li ul li:last-child{margin-bottom:8px;}
.sbc1 li ul li a{color:#777;display:block;padding:4px 18px 5px 2px;font-weight:normal;}
.sbc1 li ul li a:hover{background:#6f3ab0;color:#fff;}
.sbcontent ul li {
    color: #777;
    font-weight: normal;
    font-size: 13px;
    padding: 5px 5px;
}

.sbcontent ul li::before {
    content: "";
    float: right;
    background: url("images/sprites.png");
    margin: 6px 0px 0px 7px;
    height: 12px;
    width: 11px;
	background-position: -78px -17px;
}
.sbcontent .music:before {background-position: -78px -17px;}
.sbcontent .video::before {
background-position: -89px -17px;
width: 15px;
}
.sbcontent .album::before {
    background-position: -104px -17px;
    width: 13px;
    height: 13px;
}
.sbcontent .soon::before {
    background-position: -77px -30px;
    width: 13px;
    height: 13px;
}
.sbcontent .news::before {
    background-position: -90px -30px;
    width: 10px;
}



.sbcontent ul li a {
    color: #777;
}
.sbcontent .sbc2 li a:hover{color:#b03a77;}
.sbcontent .sbc4 li a:hover{color:#c73139;}
.sbcontent .sbc5 li a:hover{color:#74b03a;}
.sbcontent .sbc6 li a:hover{color:#21b2c3;}
.sbcontent .sbc7 li a:hover{color:#ff731f;}
.sbcontent.dflt ul li a:hover{color:#197b30;}
.sbcontent.wtc,.sbc7{text-align:initial;padding-bottom: 1em;}
.sbcontent.wtc a {
    padding: 5px;
    border: 1px solid #336699;
    margin: 5px;
    color: #CDC6BD;
    font-weight: normal;
    border-radius: 3px;
    display: block;
    text-align: center;
}
.sbcontent.wtc a:hover{background:#005B88;border-color:#ffffff;color:#fff;}
.page-numbers{text-align:center;}
.page-numbers .current, .page-numbers a, .page-numbers .extend {
    display: inline-block;
    padding: 5px 13px;
    border: 1px solid #372948;
    font-size: 12px;
    font-weight: normal;
    margin: 3px 2px;
    border-radius: 3px;
}
.page-numbers .current,
.page-numbers a:hover{background:#007acc;color:#fff;border-color:#007acc;}
.tgfoot,
.bgfoot{overflow:hidden;background:#252525;width:100%;padding:2em 0;}
.tgfoot{margin-top:1em;float:right;}
.bgfoot{background:#1b1b1b;text-align:center;line-height:2.5;font-size:14px;color:#a3a3a3;}
.bgfoot a{color:#ff731f;}
.bgfoot a:hover{color:#a3a3a3;}
.bfpost{float:right;width:33.33%;}
.bfpost:nth-child(2){padding:0 20px;}
.bfpost .bftitle{border-bottom:1px solid #171717;padding-bottom:1em;font-weight:normal;color:#ff731f;font-size:14px;}
.bfpost .bftitle a{float:left;font-size:11px;color:#8b8b8b;padding:3px 5px;border-radius:3px;}
.bfpost ul{border-top:1px solid #3b3b3b;padding-top:1em;}
.bfpost ul li a{font-size:13px;color:#f2f2f2;display:block;padding:4px 10px;margin-bottom:5px;line-height:2;}
.bfpost ul li a:hover,
.bfpost .bftitle a:hover{background:#1b1b1b;color:#ff731f;}

.fpfoot{overflow:hidden;text-align:center;padding:1em 0 5px;}
.fpfoot span, .fpfoot a{background:#f2f2f2;color:#777;font-size:12px;padding:3px 15px;border-radius:3px;margin:0px 5px;display:inline-block;}
.fpfoot a{background:#c73139;color:#fff;font-weight:normal;font-size:14px;}
.fpfoot a:hover{background:#197b30;animation:none;}
.bgfoot.lbpd{padding-bottom:3.7em;}
.footads.falitebox{bottom:47px;}
.fixbox{position:fixed;bottom:0;left:0;width:100%;padding:1em;font-family: Exo-VariableFont_wght;text-align:center;font-weight:normal;font-size:14px;z-index:99;}
.fixbox a{color:#fff;}
.fixbox.fbblue{background:#21b2c3;}
.fixbox.fbred{background:#c73139;}
.fixbox.fbgreen{background:#197b30;}
.fixbox.fbblack{background:#111;}
.footads{position:fixed;bottom:0px;z-index:9;}
.footads .fat{text-align:center;color:#333;cursor:pointer;height:25px;text-align:center;line-height:23px;font-size:12px;opacity:0;visibility:hidden;transform:translateY(15px);background:#fff;}
.footads:hover .fat{opacity:1;visibility:visible;transform:translateY(0px);}
.footads.right{right:7px;}
.footads.left{left:7px;}
.scrolltop{background:#fff;width:45px;height:45px;cursor:pointer;transition:all 0.3s ease-out 0s;position:absolute;right:1em;bottom:1em;border-radius:50px;position:fixed;box-shadow:1px 1px 3px RGBA(0, 0, 0, 0.2);}
.scrolltop::before {
    content: "";
    background: url("images/sprites.png") -61px -49px;
    width: 18px;
    height: 10px;
    top: 50%;
    transform: translate(-50%, -50%);
    left: 50%;
    position: absolute;
}

.scrolltop.lbst{bottom:8em;}
.scrolltop:hover{background:#ff6464;}
.scrolltop:hover:before {background-position:-61px -60px;}

.statistics{display:none;}
.nf404 {
    text-align: center;
    padding: 2em;
    overflow: hidden;
    background: #fff;
    box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.09);
    border-radius: 3px;
}
.nf404 h2{direction:ltr;font-size:50px;color:#333;}
.nf404 .not{color:#666;}
.nf404 .help{color:#999;}
.frmsearch{margin:2em 1em 5em;display:inline-block;}
.frmsearch input, .frmsearch select{padding:1em 2em;font-family: Exo-VariableFont_wght;margin-left:55px;background:#f2f2f2;border-radius:0px 5px 5px 0px;font-size:14px;float:left;height:45px;}
.frmsearch button{background:#d9d900;color:#fff;float:left;padding:14px;height:45px;border-radius:5px 0px 0px 5px;}
.frmsearch button:hover{background:#333;}
.frmsearch.srms button{margin-right:-36px;}
.rphnmbutton,
.rphnm form,
.hnmimg,
.rphnm .lm-close{display:none;}


.fixtg {
    background: #2196f3;
    position: fixed;
    left: 15px;
    bottom: 15px;
    padding: 10px 15px;
    color: #fff;
    border-radius: 8px;
    font-weight: normal;
    font-size: 14px;
    text-shadow: 1px 2px 3px rgba(0, 0, 0, 0.3);
    box-shadow: 0px 3px 7px rgba(33, 150, 243, 0.41);
}
.fixtg:hover{opacity:0.7;color: #fff;}

.spcil ul {
    padding: 1em 0 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}
.spcil ul li {
    width: 25%;
    padding: 4px;
}
.spcil ul li figure{
    position: relative;
    overflow: hidden;
    width: 100%;
    height: auto;
}
.spcil ul li figure::after {
    position: absolute;
    top: -50%;
    left: -50%;
    z-index: 2;
    display: block;
    content: '';
    width: 0;
    height: 0;
    background: rgba(255,255,255,.2);
    border-radius: 100%;
    opacity: 0;
    overflow: hidden;
}
.spcil h4 span{color:#3d9e54;}

.spcil ul li:hover figure {animation: figanim ease-in-out .75s forwards;}
.spcil ul li:hover figure:after{animation:circle .75s}
@keyframes figanim{0%{filter:grayscale(.5)}40%{filter:grayscale(.3)}100%{filter:grayscale(0)}}
@keyframes circle{0%{opacity:.8;background:rgba(64,159,26,.2)}40%{opacity:1;background:rgba(93,197,30,.17)}100%{width:200%;height:200%;opacity:0}}
.spcil ul li figure img {
    width: 100%;
    height: auto;
    margin: 0;
}
.spcil ul li a {
    display: block;
    border-radius: 5px;
    overflow: hidden;
    transition: .3s all ease;
    border: 1px solid RGBA(0, 0, 0, 0.1);
}
.spcil ul li:hover a{	box-shadow: 0px 0px 25px rgba(0,0,0,.13);}
.spcil ul li a span {    padding: 0 5px 5px;    display: block;    text-align: center;}

.downloadlinks {text-align: center;}
.downloadlinks ul {padding: 1em 0px 0px;}
.downloadlinks li:last-child a{margin:0}
.downloadlinks a {
    background: #003eff;
    color: #121212;
    padding: 8px 20px 7px;
    border-radius: 3px;
    display: inline-block;
    border-bottom: 4px solid #fff;
    font-size: 18px;
    transform: perspective(1px) translateZ(0);
    position: relative;
    overflow: hidden;
    box-shadow: 0 1px 4px RGBA(0, 0, 0, 0.3);
    margin-bottom: 0.5em;
    font-weight: bold;
}
.downloadlinks a:before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #3871ac;
    transform: scaleY(0);
    transform-origin: 50% 100%;
    transition-property: transform;
    transition-duration: 0.3s;
    transition-timing-function: ease-out;
}
.downloadlinks a:hover:before {transform: scaleY(1);}

.downloadlinks li:nth-child(even) a{background: #df8c19;border-color:#fcae01;}
.downloadlinks li:nth-child(even) a:before {background: #fcc51a;}

.downloadlinks .dltg{background: #2EAEF7;border-color: #2BA2E6;}
.downloadlinks .dltg:before{background: #2BA2E6;}
.nold2 {
    text-align: center;
	font-size: 16px;
    color: #FFF;
    padding: 0.5em;
    font-weight: Bold;
    background: rgba(199, 49, 57, 0.08);
    margin: 0.7em 0;
    border-radius: 7px;
	
}
.nold2 span{animation: flash 2s infinite;}
.nold {
    text-align: center;
    color: #00ffff;
    padding: 0.5em;
    font-weight: normal;
    background: rgba(199, 49, 57, 0.08);
    margin: 0.7em 0;
    border-radius: 7px;
	
}

.nold span{animation: flash 3s infinite;}
@keyframes flash {from, 50%, to {opacity: 1;}  25%, 75% {opacity: 0;}}

.dlboxs {
    padding: 1em 0px;
    overflow: hidden;
}

.dlboxs .dlpt {
    position: relative;
    overflow: hidden;
    text-align: center;
    margin: -1em -1em 1em;
    padding: 1em;
}
.dlboxs .dlpt span {
    background: #fff;
    padding: 0 1em;
    font-size: 14px;
    color: #3b3b3b !important;
    position: absolute;
    top: 50%;
    transform: translate(-50%,-50%);
    z-index: 1;
    left: 50%;
}
.dlboxs .dlpt:after {
    content: "";
    background: #e5e5e5;
    height: 1px;
    position: absolute;
    width: 100%;
    right: 0;
    top: 50%;
    transform: translate(0,-50%);
}

.dlboxs audio, .dlboxs video {
	width: 100%;
	background: #fff;
	border-radius: 1em;
}

.dlbonline{overflow: initial;}

.dlboxs textarea {
    width: 100%;
    resize: vertical;
    background: #f2f2f2;
    overflow: hidden;
    height: 80px;
    text-align: left;
    padding: 1em;
    font-size: 12px;
    direction: ltr;
    border-radius: 6px;
    color: #999;
}
.dlboxs textarea:hover{background: #ebebeb;}

.clyric .dlpt span,.lyrictxt span{
    color: #b03a77;
    font-weight: normal;
}
.lyrictxt span {
width: 100%;
text-align: right;
display: block;
}
.lyrictxt {
    text-align: center;
	font-family: BebasNeue;
    font-size: 18px;
    color: #888;
    line-height: 2.5;
}

.lmtg {
    background: #f2f2f2;
    margin: 0 -1.5em 1em;
    text-align: center;
    padding-top: 0.7em;
}
.lmtg img {
    max-width: 100%;
    height: auto;
    border-radius: 4px;
    box-shadow: 0 1px 4px RGBA(0, 0, 0, 0.2);
}

.sgps{float:left}

.stags .dlpt span {font-weight: normal;}

.stags h2{
    text-align: justify;
    font-size: 12px;
    color: #999;
    line-height: 2;
}
.stags a{color: #999;}
.stags a:hover{color:#197b30;}

.audioplayer {
    height: 2.5em;
    color: #FFF;
    position: relative;
    z-index: 1;
    background: #152c27;
    display: block;box-shadow: 0 1px 4px RGBA(0, 0, 0, 0.3);
}
.audioplayer-mini{width:2.5em;margin:0 auto;}
.audioplayer > div{position:absolute;}
.audioplayer-playpause{width:2.5em;height:100%;text-align:left;text-indent:-9999px;cursor:pointer;z-index:2;top:0;left:0;}
.audioplayer-mini .audioplayer-playpause{width:100%;}
.audioplayer-playpause:hover,
.audioplayer-playpause:focus{background-color:#0d1c1a;}
.audioplayer-playpause a{display:block;}
.audioplayer-stopped .audioplayer-playpause a{width:0;height:0;border:0.5em solid transparent;border-right:none;border-left-color:#fff;content:'';position:absolute;top:50%;left:50%;margin:-0.5em 0 0 -0.25em;}
.audioplayer-playing .audioplayer-playpause a{width:0.75em;height:0.75em;position:absolute;top:50%;left:50%;margin:-0.375em 0 0 -0.375em;}
.audioplayer-playing .audioplayer-playpause a:before,
.audioplayer-playing .audioplayer-playpause a:after{width:40%;height:100%;background-color:#fff;content:'';position:absolute;top:0;}
.audioplayer-playing .audioplayer-playpause a:before{left:0;}
.audioplayer-playing .audioplayer-playpause a:after{right:0;}
.audioplayer-time {
    width: 4.375em;
    height: 100%;
    line-height: 3em;
    text-align: center;
    z-index: 2;
    top: 0;
    font-size: 11px;
}
.audioplayer-time-current{left:2.5em;}
.audioplayer-time-duration{right:2.5em;}
.audioplayer-novolume .audioplayer-time-duration{border-right:0;right:0;}
.audioplayer-bar{height:0.875em;background-color:#0d1c1a;cursor:pointer;z-index:1;top:50%;right:6.875em;left:6.875em;margin-top:-0.438em;}
.audioplayer-novolume .audioplayer-bar{right:4.375em;}
.audioplayer-bar div{width:0;height:100%;position:absolute;left:0;top:0;}
.audioplayer-bar-loaded{background-color:#060d0c;z-index:1;}
.audioplayer-bar-played{background:#007fd1;z-index:2;}
.audioplayer-volume{width:2.5em;height:100%;text-align:left;text-indent:-9999px;cursor:pointer;z-index:2;top:0;right:0;}
.audioplayer-volume:hover,
.audioplayer-volume:focus{background-color:#0d1c1a;}
.audioplayer-volume-button{width:100%;height:100%;}
.audioplayer-volume-button a{width:0.313em;height:0.375em;background-color:#FFF;display:block;position:relative;z-index:1;top:44%;left:-55%;}
.audioplayer-volume-button a:before,
.audioplayer-volume-button a:after{content:'';position:absolute;}
.audioplayer-volume-button a:before{width:0;height:0;border:0.5em solid transparent;border-left:none;border-right-color:#fff;z-index:2;top:50%;right:-0.25em;margin-top:-0.5em;}
.audioplayer:not(.audioplayer-muted) .audioplayer-volume-button a:after{width:0.313em;height:0.313em;border:0.25em double #fff;border-width:0.25em 0.25em 0 0;left:0.563em;top:-0.063em;border-radius:0 0.938em 0 0;transform:rotate(45deg);}
.audioplayer-volume-adjust{height:6.25em;cursor:default;position:absolute;left:0;right:0px;top:-9999px;background:#0d1c1a;}
.audioplayer-volume:not(:hover) .audioplayer-volume-adjust{opacity:0;}
.audioplayer-volume:hover .audioplayer-volume-adjust{top:auto;bottom:100%;}
.audioplayer-volume-adjust > div{width:40%;height:80%;background-color:#060d0c;cursor:pointer;position:relative;z-index:1;margin:30% auto 0;}
.audioplayer-volume-adjust div div{width:100%;height:100%;position:absolute;bottom:0;left:0;}
.audioplayer-novolume .audioplayer-volume{display:none;}
.audioplayer-bar-played,
.audioplayer-volume-adjust div div{background:#197b30;}
.audioplayer-bar,
.audioplayer-bar div,
.audioplayer-volume-adjust div{border-radius:4px;}
.audioplayer-volume-adjust{border-top-left-radius:2px;border-top-right-radius:2px;}
.audioplayer *,
.audioplayer *:before,
.audioplayer *:after{transition:color .25s ease, background-color .25s ease, opacity .5s ease;}



.addnewlyrics {
    margin-bottom: 1em;
}
.addnewlyrics a {
    display: block;
    text-align: center;
    background: #c73139;
    width: 100%;
    padding: 15px 10px;
    color: #fff;

    box-shadow: 0 1px 4px RGBA(0, 0, 0, 0.3);
}
.addnewlyrics a:hover{background: #444;}


.pwcontent .addnewlyrics{display:none;}

.shlink {
    background: #0F4C81;
    padding: 1em;
    margin: 1.2em 0 0em;
    float: right;
    width: 100%;
    border-radius: 5px;
}
.shlink span {
    float: right;
    font-weight: normal;
    font-size: 13px;
    color: #FFF;
}
.shlink textarea {
    font-size: 11px;
    direction: ltr;
    resize: none;
    color: #FFF;
    float: left;
    width: 50%;
    height: 19px;
    background: no-repeat;
    margin-top: 4px;
}

.sdcomment {
    padding: 1em;
    overflow: hidden;
    margin-bottom: 1.5em;
    background: #252526;
    box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.09);
}

.sdctitle {
    position: relative;
    overflow: hidden;
    margin-bottom: 1em;
}
.sdctitle:after {
    content: "";
    background: #e5e5e5;
    height: 2px;
    position: absolute;
    width: 100%;
    right: 0;
    top: 50%;
    transform: translate(0,-50%);
    z-index: -1;
}
.sdctitle .sdcnum {
    float: right;
    background: #f4f7fb;
    margin-right: 1em;
    padding: 0 1em;
    font-size: 11px;
    color: #999;
}



.sdcomment a{color:#777}
.sdcomment .comment-form {
    color: #ffffff;

}

.cmlists .comment-form{display: inline-block;
width: 100%;
margin-bottom: 10px;}


.sdcomment .comment-form a{color:#FFF;}
.sdcomment input, .sdcomment textarea, .cmlists input, .cmlists textarea {
    padding: 10px;
    margin-bottom: 10px;
    background: #f2f2f2;
    font-size: 11px;
    color: #666;
    border-radius: 3px;
	border:2px solid #006cd9;
}
.sdcomment input:hover,
.sdcomment textarea:hover,
.cmlists input:hover,
.cmlists textarea:hover{border-color:#ccc;}
.sdcomment input:focus,
.sdcomment textarea:focus,
.cmlists input:focus,
.cmlists textarea:focus{border-color:#121212;color: #121212;}

.sdcomment label, .cmlists label {
    position: relative;
    float: right;
    width: 100%;
}
.sdcomment label input,.cmlists label input{text-indent:5px;height:36px;}
.sdcomment textarea,.cmlists textarea{float:left;width:100%;height:130px;resize:vertical;}
.sdcomment button, .cmlists button {
    float: right;
    background: #c73139;
    padding: 5px 15px;
    border-radius: 5px;
    color: #fff;
    font-size: 14px;
    box-shadow: 0 3px 10px rgba(199, 49, 57, 0.4);
}
.sdcomment .resetbutton, .cmlists .resetbutton {
    background: #cecece;
    color: #fff;
    float: left;
    box-shadow: 0 3px 10px rgba(152, 152, 152, 0.4);
}
.sdcomment button:hover,.cmlists button:hover{background:#e6324b;}
.sdcomment .resetbutton:hover,.cmlists .resetbutton:hover{background:#bababa;}


.cmlists{overflow:hidden;}

.cmlists .comment {
    font-size: 11px;

    overflow: hidden;
}
.comments .form-submit{display:none;}


.comments .cmimg {
    float: right;
    width: 75px;
    margin-left: 1em;
    text-align: center;
}
.comments .cmimg img {
    width: 75px;
    height: 75px;
    border-radius: 50px;
}
.comments .cmimg a {
    background: #006cd9;
    text-align: center;
    color: #fff;

    margin-top: 5px;
    padding: 2px 15px 4px;
    display: inline-block;
    font-size: 13px;
}
.comments .cmimg a:hover{background: #372948;}

.comments .cmtit {
    overflow: hidden;
    margin-bottom: 1em;
}
.comments .cmname {
	color: #FFF;
    font-style: normal;
    font-size: 14px;
    float: right;
}
.comments .cmname a, .comments .cmname span {
    color: #FFF;
    font-weight: bold;
}
.comments .cmdate {
    color: #006cd9;
    font-size: 12px;
    float: left;
}



.comments-close{padding:1em}

.comments .cmbody {
    padding: 1em 1.5em;
    overflow: hidden;
    margin-bottom: 1em;
    min-height: 100px;
    font-size: 13px;
    text-align: justify;
    border-top: 1px solid #e8e8e8;
    border-bottom: 1px solid #e8e8e8;
}

.comment-reply-title{float:right;width:100%;}
#cancel-comment-reply-link {
    color: #fff;
    font-size: 13px;
    padding: 4px 10px;
    background: #c73139;
    margin-bottom: 5px;
    float: right;
    border-radius: 3px;

}
#cancel-comment-reply-link:hover{background: #e6324b;}


.depth-2{
    margin-right: 7.8em;
}
.depth-2 .cmimg{display:none;}
.depth-2 .cmbody {
    margin-bottom: 0;
    min-height: auto;
    text-align: justify;
    line-height: 2;
    border: 0;
    background: #0A4D68;
    padding: 0.5em 1em;
    margin-bottom: 10px;
}
.depth-2 .cmtit {
    overflow: hidden;
    margin-bottom: 0;
    background: #0A4D68;
    padding: 1em 1em 0;
}
.depth-2 .cmname{font-size: 12px;}


.cmwaiting {
    background: #fff;
    color: #c73139;
    padding: 1px 10px;
    border-radius: 4px;
    float: left;
    margin-top: 5px;
    font-size: 11px;
}

.comments .navigation-cm{float:right;width:100%;}
.comments .navigation-cm span{float:right;margin-bottom:10px;}
.comments .navigation-cm span a {
    background: #f2f2f2;
    color: #197B30;
    padding: 5px 10px;
    display: block;
}
.comments .navigation-cm .previous-cm{float:left;}
.comments .navigation-cm a:hover{background:#197B30;color:#fff;}


@media screen and (max-width:1024px){.width{width:95%;}
.postwrap{width:74%;margin:1em 0;}
.sidebar.rsb{width:25%;}
.mpwrap {width: 70.5%;}

.bfpost{width:33.33%;}
.bfpost:nth-child(2){padding:0 1em;margin:0;}
}
@media screen and (max-width:960px){
    
.mpwrap,.sidebar.lsb{width: 100%;}
    
.lms a{background:#146E29;}
.lms a:nth-child(2n+1){background:#146327;}
.lms a:hover{background:#333 !important;}
.rphnm .lm-close{position:absolute;color:red;font-size:13px;cursor:pointer;left:5px;top:5px;background:white;padding:4px 5px;border-radius:50px;height:23px;width:23px;box-shadow:1px 1px 3px RGBA(0, 0, 0, 0.6);display:block;}

.lmbody{width:100%;height:100%;background:rgba(0, 0, 0, 0.4);position:fixed;z-index:999;display:none;top:0px;cursor:default;}

.hnmimg{display:block;}
.rphnmbutton {
    float: right;
    color: #fff;
    font-weight: normal;
    font-size: 14px;
    cursor: pointer;
    text-shadow: 2px 3px 0px RGBA(0, 0, 0, 0.1);
    display: initial;
    padding: 6px 10px 7px;
    border-radius: 3px;
    margin-top: 2px;
	background: #354444;
}

.rphnmbutton:hover{background:#146E29;}

.rphnmbutton.rpbfix {
    position: fixed;
    right: 10px;
    top: 10px;
    background: linear-gradient(#FE8969, #F1658F);
    box-shadow: 1px 1px 3px RGBA(0, 0, 0, 0.2);
    color: #999;
    z-index: 9;
    color:#fff;
}

.rphnm{position:fixed;right:0px;top:0px;background:#3b393f;width:211px;transform:translateX(211px);height:100%;z-index:9999;transition:0.5s;box-shadow:-4px 0px 8px RGBA(0, 0, 0, 0.2);overflow-x:hidden;overflow-y:scroll;direction:ltr;text-align:right;}
.rphnm ul li{width:100%;border:0;border-bottom:1px solid #444;height:auto;margin:0;transform:initial;}
.hnm ul li a{color:#ccc;display:block;transform:rotate(0deg) skew(15deg);font-size:14px;padding:8px 15px;transform:initial;margin:0;}
.hnm ul li a:hover{color:#f1e822;}
.rphnm form{display:block;float:right;background:#fff;width:100%;position:relative;margin-top:1em;}
.rphnm input{background:none;width:100%;height:35px;padding:0 10px;font-size:12px;text-align:right;direction:rtl;}
.rphnm button{position:absolute;left:0;top:0;height:35px;width:35px;background:#22374e;color:#fff;font-size:20px;padding:5px;}
}
@media screen and (max-width:800px){
    
.sidebar.rsb,.sidebar.lsb,.postwrap,.mpwrap{width:100%;}
    
}
@media screen and (max-width:720px){
.sidebar.rsb .addnewlyrics{display:none;}
.specialpost .spbox{margin:4px;}
.pwcontent .addnewlyrics{display:block;}
}
@media screen and (max-width:640px){.bfpost{width:100%;margin-top:1em;}
.bfpost:nth-child(1){margin-top:0}
.bfpost:nth-child(2){padding:0;margin-top:1em;}
}
@media screen and (max-width:520px){.titlelmtxt{float:none;}
.pwtitle .cmp,
.pwtitle:after,.sidebar.rsb,.sidebar.lsb,.tgfoot,.lmhd,.lms{display:none;}

.specialpost .spbox{margin:1px;}

    .search form{width: 100%;
margin-top: 1em;}
.rphnmbutton {
    float: left;}

}

@media screen and (max-width:320px){.width{width:95%;}
.pwds div{width:auto;margin-left:1em;}
.pwds div:nth-child(3){text-align:right;width:auto;}
.pwinf .mre{width:100%;text-align:center;margin-top:1em;}
.pshare{float:left;}
.titlelml{display:none;}
.titlelmtxt{margin:0;padding:0 1em;}
.shlink span,
.shlink textarea{width:100%;}
.cmlists .comment{position:relative;}
.comments .cmimg{margin-left:0;text-align:center;margin-right:1em;}
.comments .cmimg img{display:block;margin:0 auto 10px;}
.comments .cmimg a{position:absolute;left:0;top:1.7em;}
.comments .cmtit{margin:1em 0;padding:0 1em;}
.comments .cmname, .comments .cmdate{float:right;width:100%;margin-top:5px;}
.comments .cmbody{min-height:initial;width:100%;background:#e5e5e5;}
.depth-2{margin:0;padding:0 1em;}
.depth-2 .cmtit{padding:1em 1em 0;margin:0;}
.depth-2 .cmbody{background:#f2f2f2;}
.depth-2 .cmname,
.depth-2 .cmdate{float:right;width:auto;margin-top:0;}
.depth-2 .cmdate{float:left;}
.sdcomment label input, .cmlists label input{text-indent:5px;height:36px;width:100%;}
.sdcomment button, .cmlists button{padding:5px 10px;}
.frmsearch{margin:1em 0em 0em;}
.specialpost .spbox{margin:0px;}
}
@media screen and (max-width:240px){.lms{margin-top:10px;}
.comments .cmimg img,
.spt span:nth-child(2){display:none;}
.comments .cmtit{margin:0 0 1em;}
.depth-2 .cmtit{margin:0;}
.comments .cmimg a{top:1em;}
.frmsearch input, .frmsearch select{width:127px;}
}
.stags h2{
text-align:center !important;
padding-bottom:10px
}
.stags h2 {
background-color:#3F51B5;
color:#FFF;
padding:5px 10% 5px 10%;
border-radius:3px
}
.stags h2:hover{
background-color:#00BCD4;
color:#FFF;

}
.stags h2 a{
color:#FFF;

}

.dlboxs .dlpt{
overflow:visible !important;
padding:30px !important

}
ul.singers-list{list-style:none;padding:5px 6px;height:400px;overflow-y:scroll;margin-left:1px}
ul.singers-list li{display:block;margin-top:10px}
ul.singers-list li a{font-size:14px;color:#CCC;font-weight:lighter;font-family: Exo-VariableFont_wght;}
ul.singers-list li a:hover{color:#6768d1}
ul.singers-list li:hover{-webkit-animation:swing .7s ease;animation:swing .7s ease;-webkit-animation-iteration-count:.7;animation-iteration-count:.7}
ul.singers-list{height:200px}
#style-3::-webkit-scrollbar-track{-webkit-box-shadow:inset 0 0 6px rgba(0,0,0,0.3);background-color:#F5F5F5}
#style-3::-webkit-scrollbar{width:6px;background-color:#F5F5F5}
#style-3::-webkit-scrollbar-thumb{background-color:#6768d1;border-radius:5px}
.irbox {
    background: linear-gradient(to bottom, #282D3C 0%, #0072B5 100%);
    border-radius: 7px;
    box-shadow: 0 0 12px RGBA(0, 0, 0, 0.1);
    overflow: hidden;
	margin-bottom:1.5em;
}
.irbox.sidads .h4 i {background-position: -125px -74px;}
.irbox.msoon .h4 i {background-position: -75px -98px;}
.irbox.relpost .h4 i {background-position: -25px -123px;;}
.irbox.icat .h4 i {
    background-position: -50px -98px;
    background-color: #fff;
    box-shadow: 0 0 5px rgb(232, 199, 19);
}
.irbox.icat .h4{color:#fff;}
.irbox.icat {background: linear-gradient(to top, # 0%, # 100%);}

.irbox.sidads .isbody{
	display: flex;
	flex-wrap: nowrap;
	justify-content: center;
}

.isbody {
    padding: 1em;
    line-height: 2;
}
.isbody > ul {
    
	font-family: Exo-VariableFont_wght;
    font-size: 14px;

}
.isbody > ul > li > a,
.isbody > ul > li > ul li a{
    display: flex;
    align-items: center;
}
.isbody a:hover{color: #00;}
.isbody > ul > li > a::before,
.isbody > ul > li > ul li a:before{
    content: "";
    width: 7px;
    height: 7px;
    border: 2px solid RGBA(0, 0, 0, 0.1);
    border-radius: 3px;
    margin-left: 0.5em;
	transition: all 300ms ease-out;
}
.isbody > ul > li > a:hover{color:#13a4e8;}
.isbody > ul > li > a:hover:before{border-color:#13a4e8;}
.isbody > ul > li > ul {
    font-size: 13px;
    margin-right: 1em;
}
.isbody > ul > li > ul li a::before {
    width: 6px;
    border-width: 1px;
    height: 6px;
}

.irbox.icat .isbody > ul > li > a,
.irbox.icat .isbody > ul > li > ul li a{color: RGBA(0, 0, 0, 0.7);}

.irbox.icat .isbody > ul > li > a:hover,
.irbox.icat .isbody > ul > li > ul li a:hover{color:#f90342;}
.irbox.icat .isbody > ul > li > a:hover:before,
.irbox.icat .isbody > ul > li > ul li a:hover:before{border-color:#f90342;}


.irbox.backlink{
background: none;
box-shadow: none;
}
.irbox.backlink .isbody{padding:0;}
.irbox.backlink .isbody > ul{
display: flex;
	flex-direction: column;
}
.irbox.backlink .isbody > ul > li {
    background: #bbe7fb;
    margin-bottom: 1em;
    padding: 0.5em 1em;
    font-size: 12px;
    border-radius: 4px;
    color: RGBA(0, 0, 0, 0.3);
    position: relative;
}
.irbox.backlink .isbody > ul > li a {font-size: 14px;color: #275368;}
.irbox.backlink .isbody > ul > li a:hover{color: #13a4e8;}
.irbox.backlink .isbody > ul > li a:before{display:none;}
.irbox.backlink .isbody > ul > li::before {
    content: "";
    position: absolute;
    left: 1em;
    top: 50%;
    transform: translate(0,-50%);
    width: 25px;
    height: 25px;
    background: url(images/iricon.png) no-repeat;
    background-position: -75px -73px;
}

.isbody p strong {
    border-right: 2px solid #13A4E8;
    color: #13A4E8 !important;
    padding: 0px 5px;
    font-size: 16px;
}
.isbody p a {
    border-right: 2px solid #e5e5e5;
    padding: 0px 5px;
}
.irbox2 {
	cursor:default;
	direction:ltr;
    background: #fff;
    border-radius: 7px;
    box-shadow: 0 0 12px RGBA(0, 0, 0, 0.1);
    overflow: hidden;
	margin-bottom:1.5em;
}
.irbox2.sidads .h4 i {background-position: -125px -74px;}
.irbox2.msoon .h4 i {background-position: -75px -98px;}
.irbox2.relpost .h4 i {background-position: -25px -123px;;}
.irbox2.icat .h4 i {
    background-position: -50px -98px;
    background-color: #fff;
    box-shadow: 0 0 5px rgb(232, 199, 19);
}
.irbox2.icat .h4{color:#fff;}
.irbox2.icat {background: linear-gradient(to top, #feb72f 0%, #fed52f 100%);}

.irbox2.sidads .isbody{
	display: flex;
	flex-wrap: nowrap;
	justify-content: center;
}

.isbody {
    padding: 1em;
    line-height: 2;
}

.irbox.icat2 .isbody > ul > li > a,
.irbox.icat2 .isbody > ul > li > ul li a{color: RGBA(0, 0, 0, 0.7);}

.irbox.icat2 .isbody > ul > li > a:hover,
.irbox.icat2 .isbody > ul > li > ul li a:hover{color:#f90342;}
.irbox.icat2 .isbody > ul > li > a:hover:before,
.irbox.icat2 .isbody > ul > li > ul li a:hover:before{border-color:#f90342;}


.irbox.backlink{
background: none;
box-shadow: none;
}
.irbox2.backlink .isbody{padding:0;}
.irbox2.backlink .isbody > ul{
display: flex;
	flex-direction: column;
}
.irbox2.backlink .isbody > ul > li {
    background: #bbe7fb;
    margin-bottom: 1em;
    padding: 0.5em 1em;
    font-size: 12px;
    border-radius: 4px;
    color: RGBA(0, 0, 0, 0.3);
    position: relative;
}
.irbox2.backlink .isbody > ul > li a {font-size: 14px;color: #275368;}
.irbox2.backlink .isbody > ul > li a:hover{color: #13a4e8;}
.irbox2.backlink .isbody > ul > li a:before{display:none;}
.irbox2.backlink .isbody > ul > li::before {
    content: "";
    position: absolute;
    left: 1em;
    top: 50%;
    transform: translate(0,-50%);
    width: 30px;
    height: 25px;
    background: url(images/iricon.png) no-repeat;
    background-position: -75px -73px;
}
.telegram {
    background: url('images/telegram.png') no-repeat scroll 12px center #006cd9;
    display: block;
	/* right: 1em;
	width: 300px;
    height: 70px; */
	color: #FFF;
    background: linear-gradient(to top, #006cd9 0%, #006cd9 100%);
    text-align: left;
    padding: 15px;
    margin-bottom: 10px;
    position: relative;
    border-radius: 3px;
    clear: both;
    font: bold 11px Exo-VariableFont_wght;
}
.telegram .title_tg {
    text-align: left;
	font-family:Exo-VariableFont_wght;
    text-indent: 5px;
    margin-bottom: 5px;
    display: block;
}
.telegram .desc_tg {
    font: 16px Exo-VariableFont_wght;
    text-align: left;
    text-indent: 5px;
    opacity:0.7;
    display: block;
}
.telegram:hover{
    color: #000;
}
.Instagram {
    background: url('images/instagram.png') no-repeat scroll 12px center #5C90D2;
    display: block;
    background: #f09433; 
    background: -moz-linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%); 
    background: -webkit-linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%); 
    background: linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%); 
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f09433', endColorstr='#bc1888',GradientType=1 );
    text-align: left;
    padding: 15px;
    margin-bottom: 10px;
	color: #FFF;
    position: relative;
    border-radius: 3px;
    clear: both;
    font: bold 11px Exo-VariableFont_wght;
}
.Instagram .title_tg {
    text-align: left;
	font-family:Exo-VariableFont_wght;
    text-indent: 5px;
    margin-bottom: 5px;
    display: block;
}
.Instagram .desc_tg {
    font: 16px Exo-VariableFont_wght;
    text-align: left;
    text-indent: 5px;
    opacity:0.7;
    display: block;
}
.Instagram:hover{
    color: #000;
}
.news {
  box-shadow: inset 0 -15px 30px rgba(0,0,0,0.4), 0 5px 10px rgba(0,0,0,0.5);
  width: 350px;
  height: 30px;
  margin: 20px auto;
  overflow: hidden;
  border-radius: 4px;
  padding: 3px;
  -webkit-user-select: none
} 
.full-width{
    width: 100%;
}
.news span {
  float: left;
  color: #fff;
  padding: 6px;
  position: relative;
  top: 1%;
  border-radius: 4px;
  box-shadow: inset 0 -15px 30px rgba(0,0,0,0.4);
  font: 16px 'Lato', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -webkit-user-select: none;
  cursor: pointer
}

.news ul {
  float: left;
  padding-left: 20px;
  animation: ticker 10s cubic-bezier(1, 0, .5, 0) infinite;
  -webkit-user-select: none
}

.news ul li {line-height: 30px; list-style: none }

.news ul li a {
  color: #fff;
  text-decoration: none;
  font: 20px Lato, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -webkit-user-select: none
}
@keyframes ticker {
	0%   {margin-top: 0}
	25%  {margin-top: -30px}
	50%  {margin-top: -60px}
	75%  {margin-top: -90px}
	100% {margin-top: 0}
}
.news ul:hover { animation-play-state: paused }
.news span:hover+ul { animation-play-state: paused }
.blue { background: #347fd0 }
.blue span { background: #2c66be }
.red { background: #e62200 }
.red span { background: #a6001a }
.green { background: #699B67 }
.green span { background: #547d52 }
.magenta { background: #b63ace }
.magenta span { background: #842696 }
.yellow {background : yellow}
.yellow span {background : yellow}
.floating-edit-button {
    position: fixed;
    bottom: 60px;
    left: 30px;
    left: auto;
    background: linear-gradient(135deg, #ff416c 0%, #ff4b2b 100%);
    color: white;
    padding: 14px 24px;
    border-radius: 50px;
    box-shadow: 0 8px 25px rgba(255, 65, 108, 0.4);
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 10px;
    z-index: 9999;
    transition: all 0.3s ease;
    border: none;
    font-family: inherit;
}

.floating-edit-button:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 30px rgba(255, 65, 108, 0.6);
    background: linear-gradient(135deg, #ff4b2b 0%, #ff416c 100%);
}

.feb-icon {
    font-size: 20px;
}

@media (max-width: 768px) {
    .feb-text {
        display: none;
    }
    .floating-edit-button {
        padding: 14px;
        border-radius: 50%;
        width: 56px;
        height: 56px;
        justify-content: center;
    }
    .feb-icon {
        font-size: 24px;
    }
}

body.admin-bar .floating-edit-button {
    bottom: 62px;
}

@media (min-width: 783px) {
    body.admin-bar .floating-edit-button {
        bottom: 62px;
    }
}
.yorumlar-alani.kucuk-font {
    font-family: 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
    margin: 30px 0;
    padding: 25px;
    background: linear-gradient(145deg, #0a0a0a, #1a1a1a);
    border-radius: 14px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
    border: 1px solid #333;
    text-align: left;
    direction: ltr;
    font-size: 13px !important;
    line-height: 1.5;
}

.yorumlar-baslik {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
    padding-bottom: 15px;
    border-bottom: 2px solid #e53935;
}

.yorum-sayisi {
    color: #fff;
    font-size: 1.4rem !important;
    font-weight: 700;
    margin: 0;
    text-shadow: 0 2px 3px rgba(0, 0, 0, 0.6);
    letter-spacing: 0.3px;
}

.yorum-sayfalama {
    font-size: 0.85rem !important;
}

.yorum-sayfalama a,
.yorum-sayfalama span {
    color: #ddd;
    padding: 6px 10px;
    margin: 0 3px;
    background-color: #222;
    border-radius: 5px;
    text-decoration: none;
    transition: all 0.3s ease;
    border: 1px solid #333;
    font-weight: 500;
    font-size: 0.85rem !important;
}

.yorum-sayfalama a:hover {
    background: linear-gradient(135deg, #e53935, #d32f2f);
    color: #fff;
    transform: translateY(-1px);
}

.yorum-listesi {
    list-style: none;
    padding: 0;
    margin: 0;
}

.yorum-item.kucuk-yorum {
    background: linear-gradient(145deg, #1e1e1e, #252525);
    border-radius: 10px;
    margin-bottom: 18px;
    padding: 20px;
    border-left: 4px solid #e53935;
    transition: all 0.3s ease;
    font-size: 13px !important;
}

.yorum-item.kucuk-yorum:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5);
    border-left-color: #ff5252;
}

.yorum-icerik {
    display: flex;
    gap: 15px;
    align-items: flex-start;
}

.yorum-avatar.kucuk-avatar img {
    border-radius: 50%;
    border: 2px solid #333;
    width: 45px !important;
    height: 45px !important;
    transition: all 0.3s ease;
}

.yorum-avatar.kucuk-avatar img:hover {
    border-color: #e53935;
}

.yorum-detay.kucuk-detay {
    flex: 1;
    font-size: 13px !important;
}

.yorum-ust.kucuk-ust {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    flex-wrap: wrap;
    gap: 10px;
}

.yorum-yazar-adi.kucuk-yazar {
    color: #fff;
    font-weight: 600;
    font-size: 0.95rem !important;
}

.yorum-yazar-adi.kucuk-yazar a {
    color: #fff;
    text-decoration: none;
    transition: all 0.3s ease;
}

.yorum-yazar-adi.kucuk-yazar a:hover {
    color: #ff5252;
}

.yorum-onay-bekliyor.kucuk-onay {
    color: #ff9800;
    font-size: 0.8rem !important;
    margin-left: 8px;
    background: rgba(255, 152, 0, 0.1);
    padding: 3px 8px;
    border-radius: 15px;
    font-weight: 500;
}

.yorum-tarih .yorum-zaman.kucuk-zaman {
    color: #aaa;
    font-size: 0.8rem !important;
    text-decoration: none;
    transition: all 0.3s ease;
}

.yorum-tarih .yorum-zaman.kucuk-zaman:hover {
    color: #e53935;
}

.yorum-metin.kucuk-metin {
    color: #e0e0e0;
    line-height: 1.6;
    font-size: 0.95rem !important;
    margin-bottom: 15px;
    text-align: justify;
}

.yorum-alt.kucuk-alt {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 12px;
    border-top: 1px solid #333;
    flex-wrap: wrap;
    gap: 10px;
    font-size: 0.9rem !important;
}

.yorum-cevap a,
.yorum-duzenle a {
    color: #e53935;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.85rem !important;
    padding: 6px 12px;
    background-color: rgba(229, 57, 53, 0.1);
    border-radius: 6px;
    transition: all 0.3s ease;
    border: 1px solid rgba(229, 57, 53, 0.2);
}

.yorum-cevap a:hover,
.yorum-duzenle a:hover {
    background-color: #e53935;
    color: #fff;
}

.yorum-kapali {
    color: #ff9800;
    background: rgba(255, 152, 0, 0.1);
    padding: 15px;
    border-radius: 8px;
    border-left: 4px solid #ff9800;
    text-align: center;
    font-weight: 600;
    font-size: 0.95rem !important;
    margin: 20px 0;
}

.yorum-form.kucuk-form {
    background: linear-gradient(145deg, #1e1e1e, #252525);
    padding: 25px;
    border-radius: 14px;
    margin-top: 30px;
    text-align: left;
    border: 1px solid #333;
    font-size: 13px !important;
}

.yorum-form.kucuk-form h3 {
    color: #fff;
    margin-top: 0;
    margin-bottom: 20px;
    font-size: 1.3rem !important;
    padding-bottom: 12px;
    border-bottom: 2px solid #e53935;
    text-align: left;
    font-weight: 700;
}

.yorum-form-grup {
    margin-bottom: 20px;
}

.yorum-etiket {
    display: block;
    color: #fff;
    font-weight: 600;
    margin-bottom: 8px;
    font-size: 0.95rem !important;
}

.gerekli {
    color: #e53935;
    margin-left: 4px;
    font-weight: 700;
}

.yorum-input.kucuk-input,
.yorum-textarea.kucuk-textarea {
    width: 100%;
    padding: 12px 15px;
    background-color: #2a2a2a;
    border: 2px solid #3a3a3a;
    border-radius: 8px;
    color: #fff;
    font-size: 0.95rem !important;
    transition: all 0.3s ease;
    box-sizing: border-box;
    font-family: 'Segoe UI', sans-serif;
}

.yorum-input.kucuk-input::placeholder,
.yorum-textarea.kucuk-textarea::placeholder {
    color: #888;
    font-size: 0.9rem !important;
}

.yorum-input.kucuk-input:focus,
.yorum-textarea.kucuk-textarea:focus {
    outline: none;
    border-color: #e53935;
    box-shadow: 0 0 0 3px rgba(229, 57, 53, 0.2);
}

.yorum-textarea.kucuk-textarea {
    min-height: 120px;
    resize: vertical;
    line-height: 1.5;
}

.yorum-gonder-alani {
    margin-top: 25px;
    text-align: right;
}

.yorum-gonder-btn.kucuk-btn {
    background: linear-gradient(135deg, #e53935, #c62828);
    color: #fff;
    border: none;
    padding: 12px 30px !important;
    font-size: 0.95rem !important;
    font-weight: 700;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 10px rgba(229, 57, 53, 0.3);
    display: inline-block;
    text-decoration: none;
    text-align: center;
    min-width: 150px;
    position: relative;
    overflow: hidden;
}

.yorum-gonder-btn.kucuk-btn::after {
    content: '↗';
    margin-left: 8px;
    font-size: 0.9rem;
}

.yorum-gonder-btn.kucuk-btn:hover {
    background: linear-gradient(135deg, #ff5252, #e53935);
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(229, 57, 53, 0.4);
}

.yorum-gonder-btn.kucuk-btn:active {
    transform: translateY(0);
}

.yorum-gonder-btn.kucuk-btn:disabled {
    background: #666;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.comment-form .submit {
    display: block;
    margin-top: 20px;
}

.yorum-not.kucuk-not {
    color: #aaa;
    font-size: 0.85rem !important;
    margin-bottom: 20px;
    padding: 12px;
    background-color: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    border-left: 3px solid #555;
    line-height: 1.5;
}

#respond {
    margin-top: 25px;
    padding-top: 20px;
    border-top: 1px solid #333;
    font-size: 13px !important;
}

.form-submit {
    margin-top: 25px !important;
    padding-top: 15px !important;
    border-top: 1px solid #444 !important;
}

#submit,
input[type="submit"] {
    background: linear-gradient(135deg, #e53935, #c62828) !important;
    color: #fff !important;
    border: none !important;
    padding: 12px 30px !important;
    font-size: 0.95rem !important;
    font-weight: 700 !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 4px 10px rgba(229, 57, 53, 0.3) !important;
    min-width: 150px !important;
}

#submit:hover,
input[type="submit"]:hover {
    background: linear-gradient(135deg, #ff5252, #e53935) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 15px rgba(229, 57, 53, 0.4) !important;
}

@media (max-width: 992px) {
    .yorumlar-alani.kucuk-font,
    .yorum-form.kucuk-form {
        padding: 20px;
        font-size: 12.5px !important;
    }
}

@media (max-width: 768px) {
    .yorumlar-baslik {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }
    
    .yorum-sayisi {
        font-size: 1.2rem !important;
    }
    
    .yorum-icerik {
        flex-direction: column;
        gap: 12px;
    }
    
    .yorum-avatar.kucuk-avatar img {
        width: 40px !important;
        height: 40px !important;
    }
    
    .yorum-ust.kucuk-ust {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
    
    .yorum-alt.kucuk-alt {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
    
    .yorum-item.kucuk-yorum,
    .yorum-form.kucuk-form {
        padding: 18px;
        font-size: 12.5px !important;
    }
    
    .yorum-gonder-btn.kucuk-btn {
        width: 100% !important;
        padding: 10px 20px !important;
        min-width: auto !important;
    }
}

@media (max-width: 480px) {
    .yorumlar-alani.kucuk-font,
    .yorum-form.kucuk-form {
        padding: 15px;
        margin: 20px 0;
        font-size: 12px !important;
    }
    
    .yorum-sayisi {
        font-size: 1.1rem !important;
    }
    
    .yorum-sayfalama a,
    .yorum-sayfalama span {
        padding: 5px 8px;
        margin: 0 2px;
        font-size: 0.8rem !important;
    }
    
    .yorum-cevap a,
    .yorum-duzenle a {
        padding: 5px 10px;
        font-size: 0.8rem !important;
    }
    
    .yorum-gonder-btn.kucuk-btn {
        padding: 10px 20px !important;
        font-size: 0.9rem !important;
    }
    
    .yorum-input.kucuk-input,
    .yorum-textarea.kucuk-textarea {
        padding: 10px 12px;
        font-size: 0.9rem !important;
    }
}

.yorumlar-alani,
.yorumlar-alani *:not(.yorum-sayisi):not(.yorum-form h3) {
    font-size: 13px !important;
    line-height: 1.5 !important;
}

.kucuk-font {
    font-size: 13px !important;
}

.kucuk-font h1,
.kucuk-font h2,
.kucuk-font h3,
.kucuk-font h4 {
    font-size: 1.3rem !important;
}

@keyframes yorumGirisKucuk {
    from {
        opacity: 0;
        transform: translateY(15px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.yorum-item.kucuk-yorum {
    animation: yorumGirisKucuk 0.4s ease forwards;
}

.yorum-gonder-btn.kucuk-btn.yukleniyor {
    position: relative;
    color: transparent !important;
}

.yorum-gonder-btn.kucuk-btn.yukleniyor::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    margin: -10px 0 0 -10px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: yukleniyorAnimasyon 0.8s linear infinite;
}

@keyframes yukleniyorAnimasyon {
    to {
        transform: rotate(360deg);
    }
}

::-webkit-scrollbar {
    width: 15px;
}

::-webkit-scrollbar-track {
    background: #1a1a1a;
}

::-webkit-scrollbar-thumb {
    background: #f2f2f2;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #3366cc;
}
@media print {
    .sidebar.lsb {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sidebar-post-item,
    .social-link,
    .sidebar-post-thumb img,
    .social-icon,
    .sidebar-section,
    .social-svg-icon,
    .widget-area .widget,
    .social-media-section .sbcontent {
        transition: none !important;
        animation: none !important;
    }
    
    .sidebar-post-item:hover,
    .social-link:hover,
    .widget-area .widget:hover,
    .social-media-section .sbcontent:hover {
        transform: none !important;
    }
    
    .sidebar-post-item:hover .sidebar-post-thumb,
    .social-link:hover .social-icon {
        transform: none !important;
    }
    
    .social-link:hover .social-svg-icon {
        transform: none !important;
    }
    
    .sidebar-post-item:hover .sidebar-post-thumb img {
        transform: none !important;
    }
    
    .social-link::before,
    .telegram-icon::before,
    .instagram-icon::before {
        display: none !important;
    }
}

.sidebar-post-item,
.social-link,
.sidebar-post-thumb,
.sidebar-post-thumb img,
.social-icon,
.social-svg-icon,
.widget-area .widget {
    transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.sidebar-post-link::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to right, transparent, rgba(99, 102, 241, 0.02), transparent);
    opacity: 0;
    transition: opacity 0.3s ease;
    border-radius: 8px;
    pointer-events: none;
}

.sidebar-post-link:hover::after {
    opacity: 1;
}

.social-link::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.02), transparent);
    opacity: 0;
    transition: opacity 0.3s ease;
    border-radius: 12px;
    pointer-events: none;
}

.social-link:hover::after {
    opacity: 1;
}
.error-404 {
    padding: 40px 20px;
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
}

.page-title {
    color: #d63638;
    margin-bottom: 20px;
    font-size: 2.5em;
}

.search-section {
    margin: 40px 0;
    padding: 30px;
    background: #f5f5f5;
    border-radius: 8px;
}

.search-title {
    margin-bottom: 20px;
    color: #23282d;
}

.search-form {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    align-items: center;
}

.category-dropdown,
.search-field {
    padding: 12px 15px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 16px;
    min-width: 250px;
}

.search-submit,
.home-link {
    padding: 12px 30px;
    background: #007cba;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
    text-decoration: none;
    display: inline-block;
}

.search-submit:hover,
.home-link:hover {
    background: #005a87;
}

.recent-posts-list {
    list-style: none;
    padding: 0;
    text-align: left;
    max-width: 500px;
    margin: 20px auto;
}

.recent-posts-list li {
    padding: 10px;
    border-bottom: 1px solid #eee;
}

.recent-posts-list li:last-child {
    border-bottom: none;
}

.recent-posts-list a {
    color: #007cba;
    text-decoration: none;
}

.recent-posts-list a:hover {
    text-decoration: underline;
}

.screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    border: 0;
}
.vip-pricing-page {
    max-width: 622px;
    margin: 30px auto;
    padding: 0 10px;
    font-family: Arial, sans-serif;
    color: #e0e0e0;
    background-color: #121212;
    box-sizing: border-box;
}

.vip-intro {
    text-align: center;
    margin-bottom: 40px;
}

.vip-intro h2 {
    font-size: 28px;
    color: #ffffff;
    margin-bottom: 15px;
}

.vip-intro p {
    font-size: 16px;
    margin-bottom: 25px;
    line-height: 1.6;
    color: #bbbbbb;
}

.vip-intro h3 {
    font-size: 22px;
    margin: 30px 0 15px;
    color: #ffffff;
}

.vip-benefits {
    text-align: left;
    max-width: 500px;
    margin: 0 auto;
    padding-left: 20px;
    font-size: 15px;
    line-height: 1.8;
    color: #cccccc;
}

.vip-benefits li::marker {
    color: #4CAF50;
}

.pricing-sections {
    margin: 40px 0;
}

.pricing-row {
    display: flex;
    gap: 12px;
    margin-bottom: 30px;
    justify-content: space-between;
}

.pricing-box {
    flex: 1;
    min-width: 0;
    background: #1e1e1e;
    border-radius: 10px;
    padding: 18px 12px;
    text-align: center;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
    transition: all 0.3s ease;
    position: relative;
    border: 1px solid #333333;
}

.pricing-box:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.6);
    background: #252525;
}

.pricing-box h3 {
    font-size: 17px;
    margin: 0 0 10px;
    color: #ffffff;
}

.pricing-box .price {
    font-size: 32px;
    font-weight: 700;
    color: #ff5252;
    margin: 12px 0;
}

.pricing-box .price span {
    font-size: 24px;
    font-weight: normal;
    color: #ff5252;
}

.pricing-box .desc {
    font-size: 13.5px;
    line-height: 1.5;
    margin: 15px 0;
    min-height: 50px;
    color: #bbbbbb;
}

.pricing-box .desc strong {
    color: #4CAF50;
}

/* Buton metin rengi siyah olarak değiştirildi */
.buy-button {
    display: inline-block;
    background: #004472;
    color: #000000;  /* Beyaz'dan siyah'a değiştirildi */
    padding: 10px 20px;
    border-radius: 50px;
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(76, 175, 80, 0.4);
}

/* Hover durumunda da siyah renk korundu */
.buy-button:hover {
    background: #66bb6a;
    color: #000000;  /* Hover'da da siyah */
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(76, 175, 80, 0.6);
}

.pricing-box.popular {
    border: 2px solid #64b5f6;
    transform: scale(1.03);
    background: #263238;
}

.pricing-box.popular .popular-badge {
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    background: #64b5f6;
    color: #121212;
    padding: 4px 14px;
    border-radius: 20px;
    font-size: 11.5px;
    font-weight: bold;
}

/* Popüler butonun metin rengi siyah */
.pricing-box.popular .buy-button {
    background: #64b5f6;
    color: #000000;  /* Popüler buton için siyah */
    box-shadow: 0 4px 15px rgba(100, 181, 246, 0.5);
}

/* Popüler buton hover durumunda siyah */
.pricing-box.popular .buy-button:hover {
    background: #90caf9;
    color: #000000;  /* Popüler buton hover'da siyah */
    box-shadow: 0 8px 20px rgba(100, 181, 246, 0.7);
}

.contact-section {
    background: #1a1a1a;
    padding: 25px;
    border-radius: 10px;
    text-align: center;
    margin-top: 40px;
    border: 1px solid #333;
}

.contact-section h3 {
    font-size: 22px;
    margin-bottom: 15px;
    color: #ffffff;
}

.contact-section p {
    font-size: 15px;
    line-height: 1.8;
    margin: 10px 0;
    color: #cccccc;
}

.contact-section strong {
    color: #64b5f6;
}

.contact-section .note {
    font-size: 14px;
    color: #ffb74d;
    font-weight: bold;
    margin-top: 20px;
}

@media (max-width: 680px) {
    .pricing-row {
        flex-direction: column;
        gap: 18px;
    }
    .pricing-box.popular {
        transform: none;
    }
    .vip-benefits {
        padding-left: 10px;
    }
    .vip-pricing-page {
        padding: 0 15px;
    }
}
.thcontent span {
	color: #fff !important;
}
.rainbow-vip {
    background: linear-gradient(
        90deg,
        #f00, #ff2b00, #f50, #ff8000, #fa0,
        #ffd500, #ff0, #d4ff00, #af0, #80ff00,
        #5f0, #2bff00, #0f0, #00ff2a, #0f5,
        #00ff80, #0fa, #00ffd5, #0ff, #00d5ff,
        #0af, #0080ff, #05f, #002aff, #00f,
        #2b00ff, #50f, #8000ff, #a0f, #d400ff,
        #f0f, #ff00d4, #f0a, #ff0080, #f05, #ff002b, #f00
    );
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    background-size: 600% 600%; 
    animation: rainbow 6s ease infinite;
}

@keyframes rainbow {
    0% {background-position: 0% 0%;}
    50% {background-position: 100% 100%;}
    100% {background-position: 0% 0%;}
}
/* =========================================
   POPÜLER SIDEBAR STYLES - DARK TEMA
   Aylık en çok okunan 10 post için özel tasarım
   ========================================= */

/* Renk değişkenleri */
:root {
    --sidebar-bg: #0f0f13;
    --sidebar-card: #1a1b1f;
    --primary-color: #ff4757;
    --secondary-color: #ffa502;
    --accent-color: #7d5fff;
    --text-primary: #ffffff;
    --text-secondary: #b0b0b0;
    --border-color: rgba(255, 255, 255, 0.05);
    --gradient-1: linear-gradient(135deg, #ff4757, #ff6b81);
    --gradient-2: linear-gradient(135deg, #7d5fff, #9b7bff);
    --gradient-3: linear-gradient(135deg, #ffa502, #ffcc80);
    --shadow-color: rgba(255, 71, 87, 0.15);
}

/* ===== Ana Container ===== */
.populer-sidebar-wrapper {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.populer-sidebar-container {
    background: var(--sidebar-bg);
    border-radius: 24px;
    padding: 25px 20px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6),
                0 0 0 1px rgba(255, 71, 87, 0.1);
    backdrop-filter: blur(10px);
    border: 1px solid var(--border-color);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.populer-sidebar-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--primary-color), var(--accent-color), var(--secondary-color));
    animation: gradientMove 3s linear infinite;
}

/* ===== Sidebar Başlık ===== */
.sidebar-baslik {
    text-align: center;
    margin-bottom: 30px;
    position: relative;
}

.baslik-ikon {
    margin-bottom: 10px;
}

.ikon-grafik {
    display: inline-block;
    font-size: 40px;
    animation: bounceIcon 2s ease infinite;
    filter: drop-shadow(0 0 15px var(--primary-color));
}

.baslik-metin h2 {
    font-size: 28px;
    font-weight: 800;
    margin: 0 0 5px;
    background: linear-gradient(135deg, #fff, var(--primary-color));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    letter-spacing: -0.5px;
}

.alt-baslik {
    color: var(--text-secondary);
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin: 0;
    opacity: 0.8;
}

.baslik-dekor {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 15px;
}

.dekor-cizgi {
    width: 30px;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--primary-color), transparent);
    border-radius: 2px;
    animation: pulseLine 2s ease infinite;
}

.dekor-cizgi:nth-child(2) {
    animation-delay: 0.3s;
    background: linear-gradient(90deg, transparent, var(--accent-color), transparent);
}

.dekor-cizgi:nth-child(3) {
    animation-delay: 0.6s;
    background: linear-gradient(90deg, transparent, var(--secondary-color), transparent);
}

/* ===== Post Listesi ===== */
.populer-liste {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 25px;
}

/* Post Öğeleri */
.populer-item {
    display: flex;
    align-items: center;
    gap: 15px;
    background: var(--sidebar-card);
    border-radius: 16px;
    padding: 12px;
    transition: all 0.3s ease;
    position: relative;
    border: 1px solid var(--border-color);
    overflow: hidden;
}

.populer-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 3px;
    background: transparent;
    transition: all 0.3s ease;
}

/* İlk 3 için özel stiller */
.populer-item.birinci {
    background: linear-gradient(90deg, rgba(255, 71, 87, 0.1), var(--sidebar-card));
    border-left-color: var(--primary-color);
    box-shadow: 0 5px 15px rgba(255, 71, 87, 0.2);
}

.populer-item.ikinci {
    background: linear-gradient(90deg, rgba(125, 95, 255, 0.1), var(--sidebar-card));
    border-left-color: var(--accent-color);
}

.populer-item.ucuncu {
    background: linear-gradient(90deg, rgba(255, 165, 2, 0.1), var(--sidebar-card));
    border-left-color: var(--secondary-color);
}

.populer-item:hover {
    transform: translateX(8px) scale(1.02);
    border-color: rgba(255, 71, 87, 0.3);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
    background: #1e1f24;
}

/* ===== Sıra Numarası - BEYAZ ===== */
.item-sira {
    position: relative;
    min-width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sira-numara {
    font-size: 20px;
    font-weight: 800;
    color: #ffffff;
    transition: all 0.3s ease;
    z-index: 1;
    text-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}

.birinci .sira-numara {
    color: #ffffff;
    font-size: 24px;
    text-shadow: 0 0 15px rgba(255, 71, 87, 0.7), 0 2px 5px rgba(0, 0, 0, 0.5);
}

.ikinci .sira-numara {
    color: #ffffff;
    font-size: 22px;
    text-shadow: 0 0 15px rgba(125, 95, 255, 0.7), 0 2px 5px rgba(0, 0, 0, 0.5);
}

.ucuncu .sira-numara {
    color: #ffffff;
    font-size: 22px;
    text-shadow: 0 0 15px rgba(255, 165, 2, 0.7), 0 2px 5px rgba(0, 0, 0, 0.5);
}

.sira-badge {
    position: absolute;
    top: -8px;
    right: -8px;
    font-size: 14px;
    animation: shine 2s infinite;
    filter: drop-shadow(0 0 8px currentColor);
}

.populer-item:hover .sira-numara {
    color: #ffffff;
    transform: scale(1.1);
    text-shadow: 0 0 20px rgba(255, 255, 255, 0.8), 0 2px 5px rgba(0, 0, 0, 0.5);
}

/* ===== Öne Çıkan Görsel ===== */
.item-resim {
    width: 65px;
    height: 65px;
    border-radius: 14px;
    overflow: hidden;
    position: relative;
    flex-shrink: 0;
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.3);
    border: 2px solid transparent;
    transition: all 0.3s ease;
}

.populer-item:hover .item-resim {
    border-color: var(--primary-color);
    transform: scale(1.05);
}

.populer-thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.populer-item:hover .populer-thumb {
    transform: scale(1.1);
}

.default-thumb {
    background: linear-gradient(135deg, #2a2a2a, #1a1a1a);
    object-fit: cover;
}

.resim-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 71, 87, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
    backdrop-filter: blur(3px);
}

.item-resim:hover .resim-overlay {
    opacity: 1;
}

.overlay-ikon {
    color: white;
    font-size: 20px;
    transform: scale(0.5);
    transition: transform 0.3s ease;
}

.item-resim:hover .overlay-ikon {
    transform: scale(1);
}

/* ===== Post İçeriği ===== */
.item-icerik {
    flex: 1;
    min-width: 0;
}

.icerik-baslik {
    margin: 0 0 6px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
}

/* 2 SATIR İÇİN YENİ SINIF */
.icerik-baslik.iki-satir {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    max-height: 2.8em;
    line-height: 1.4em;
    margin: 0 0 6px;
}

.icerik-baslik a {
    color: var(--text-primary);
    text-decoration: none;
    transition: color 0.3s ease;
    display: block;
}

.icerik-baslik a:hover {
    color: var(--primary-color);
}

/* Meta bilgileri */
.icerik-meta {
    display: flex;
    gap: 12px;
    font-size: 11px;
    color: var(--text-secondary);
    margin-bottom: 8px;
}

.meta-goruntulenme,
.meta-tarih {
    display: flex;
    align-items: center;
    gap: 3px;
    background: rgba(255, 255, 255, 0.03);
    padding: 2px 6px;
    border-radius: 12px;
}

.meta-ikon {
    font-size: 10px;
    opacity: 0.7;
}

/* İlerleme çubuğu */
.item-progress {
    height: 3px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 10px;
    overflow: hidden;
}

.progress-bar {
    height: 100%;
    background: linear-gradient(90deg, var(--primary-color), var(--accent-color));
    border-radius: 10px;
    transition: width 0.5s ease;
    position: relative;
}

.progress-bar::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    animation: shimmer 1.5s infinite;
}

/* ===== SOSYAL MEDYA BÖLÜMÜ - EŞİT İKONLAR ===== */
.sidebar-sosyal {
    margin-top: 30px;
}

.sosyal-baslik {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
}

.sosyal-cizgi {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--primary-color), var(--accent-color), var(--primary-color), transparent);
}

.sosyal-baslik h4 {
    color: var(--text-primary);
    font-size: 14px;
    font-weight: 600;
    margin: 0;
    white-space: nowrap;
}

.sosyal-butonlar {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Sosyal butonlar */
.sosyal-buton {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    border-radius: 12px;
    text-decoration: none;
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
}

/* Instagram butonu */
.sosyal-buton.instagram {
    background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
}

/* Telegram butonu */
.sosyal-buton.telegram {
    background: linear-gradient(45deg, #0088cc, #005f8c);
}

/* İKONLAR - EŞİT BOYUTTA */
.buton-ikon {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 12px;
    z-index: 1;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 50%;
    padding: 4px;
    transition: all 0.3s ease;
}

.sosyal-svg {
    width: 20px;
    height: 20px;
    display: block;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

.sosyal-buton:hover .buton-ikon {
    transform: scale(1.1);
    background: rgba(255, 255, 255, 0.25);
}

.buton-metin {
    flex: 1;
    font-weight: 600;
    font-size: 14px;
    color: white;
    z-index: 1;
    letter-spacing: 0.3px;
}

.buton-takipci {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.9);
    background: rgba(0, 0, 0, 0.25);
    padding: 4px 8px;
    border-radius: 20px;
    z-index: 1;
    font-weight: 500;
    margin-left: 5px;
}

.buton-hover {
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), transparent);
    transition: left 0.5s ease;
}

.sosyal-buton:hover .buton-hover {
    left: 100%;
}

.sosyal-buton:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(255, 71, 87, 0.25);
}

/* Davet mesajı */
.sosyal-davet {
    margin-top: 15px;
    text-align: center;
}

.sosyal-davet p {
    color: var(--text-secondary);
    font-size: 12px;
    background: rgba(255, 255, 255, 0.02);
    padding: 8px;
    border-radius: 20px;
    margin: 0;
    border: 1px dashed rgba(255, 71, 87, 0.2);
}

/* ===== Sidebar İstatistikleri ===== */
.sidebar-istatistik {
    display: flex;
    justify-content: space-around;
    margin-top: 25px;
    padding-top: 20px;
    border-top: 1px dashed var(--border-color);
}

.istatistik-item {
    text-align: center;
}

.istatistik-deger {
    display: block;
    font-size: 18px;
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: 4px;
}

.istatistik-etiket {
    font-size: 10px;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* ===== Boş Durum ===== */
.populer-yok {
    text-align: center;
    padding: 40px 20px;
    background: var(--sidebar-card);
    border-radius: 16px;
}

.yok-ikon {
    font-size: 48px;
    margin-bottom: 15px;
    opacity: 0.5;
    animation: float 3s ease infinite;
}

.populer-yok p {
    color: var(--text-secondary);
    font-size: 14px;
    margin: 0;
}

/* ===== Animasyonlar ===== */
@keyframes gradientMove {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

@keyframes bounceIcon {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
}

@keyframes pulseLine {
    0%, 100% { opacity: 0.5; width: 30px; }
    50% { opacity: 1; width: 40px; }
}

@keyframes shine {
    0%, 100% { opacity: 0.5; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.2); }
}

@keyframes shimmer {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

/* ===== Responsive Tasarım ===== */
@media (max-width: 768px) {
    .populer-sidebar-container {
        padding: 20px 15px;
    }

    .baslik-metin h2 {
        font-size: 24px;
    }

    .item-resim {
        width: 55px;
        height: 55px;
    }

    .icerik-baslik {
        font-size: 13px;
    }
    
    .icerik-baslik.iki-satir {
        max-height: 2.6em;
        line-height: 1.3em;
    }

    .sosyal-buton {
        padding: 10px 14px;
    }
    
    .buton-ikon {
        width: 26px;
        height: 26px;
    }
    
    .sosyal-svg {
        width: 18px;
        height: 18px;
    }
    
    .buton-metin {
        font-size: 13px;
    }
    
    .buton-takipci {
        font-size: 10px;
        padding: 3px 6px;
    }

    .istatistik-deger {
        font-size: 16px;
    }
}

@media (max-width: 480px) {
    .populer-item {
        padding: 10px;
    }

    .item-sira {
        min-width: 35px;
    }

    .sira-numara {
        font-size: 18px;
    }
    
    .birinci .sira-numara {
        font-size: 22px;
    }
    
    .ikinci .sira-numara,
    .ucuncu .sira-numara {
        font-size: 20px;
    }

    .icerik-meta {
        flex-wrap: wrap;
        gap: 6px;
    }
    
    .buton-takipci {
        display: none;
    }
}
/* Önce yanıp sönen animasyonu tanımlıyoruz */
@keyframes yanipSon {
  0%   { color: #ffffff; }       /* Başlangıç rengi (beyaz) */
  50%  { color: #00AB78; }       /* Ortada yeşil ton (sitenizin temasına uyumlu) */
  100% { color: #ffffff; }       /* Tekrar başlangıç rengine döner */
}

.rphnm {
	position: fixed;
	right: -100%;
	top: 0;
	width: 530px;
	height: 100%;
	background: #111;
	transition: 0.3s;
	z-index: 99999;
}

.rphnm.active{
    right:0;
}
.close-menu{
    background:none;
    border:none;
    cursor:pointer;
    padding:10px;
}

.close-icon {
	font-size: 16px;
	color: #fff;
	line-height: 1;
}

.close-menu{
    position:absolute;
    top:10px;
    left:10px;
    z-index:999999;
    pointer-events:auto !important;
}
.viva-offer-compact {
  max-width: 780px;
  margin: 28px auto;
  padding: 0 12px;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.viva-offer-box {
  background: linear-gradient(180deg, #141c34 0%, #0f1323 100%);
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 24px;
  box-shadow: 0 30px 80px rgba(0,0,0,0.24);
  overflow: hidden;
}
.viva-offer-head {
  padding: 28px 24px 16px;
}
.viva-offer-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 0.78rem;
  color: #e9efff;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.14);
  margin-bottom: 10px;
}
.viva-offer-head h2 {
  margin: 0;
  font-size: 1.35rem;
  line-height: 1.16;
  color: #f7f9ff;
}
.viva-offer-head p {
  margin: 10px 0 0;
  color: #bfc9e7;
  font-size: 0.93rem;
}
.viva-offer-tabs {
  padding: 18px 24px 22px;
}
.viva-offer-tabs input { display: none; }
.viva-offer-tab-list {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}
.viva-offer-tab-list label {
  flex: 1;
  min-width: 100px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  color: #d7e0ff;
  font-size: 0.88rem;
  font-weight: 700;
  cursor: pointer;
  transition: transform .22s ease, background .22s ease, border-color .22s ease;
}
.viva-offer-tab-list label:hover {
  transform: translateY(-1px);
  background: rgba(83, 114, 255, 0.14);
}
.viva-flag {
  width: 24px;
  height: 16px;
  display: inline-block;
  background-size: cover;
  background-position: center;
  border-radius: 3px;
}
.viva-flag-tr {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 16'%3E%3Crect width='24' height='16' fill='%23e30a17'/%3E%3Cpath d='M0 7.5h24v1H0z' fill='%23fff'/%3E%3Cpath d='M11.5 0h1v16h-1z' fill='%23fff'/%3E%3Ccircle cx='12' cy='8' r='3.7' fill='%23fff'/%3E%3Ccircle cx='13.4' cy='8' r='2.4' fill='%23e30a17'/%3E%3C/svg%3E");
}
.viva-flag-gb {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 16'%3E%3Crect width='24' height='16' fill='%23012169'/%3E%3Cpath d='M0 7h24v2H0z' fill='%23fff'/%3E%3Cpath d='M11 0h2v16h-2z' fill='%23fff'/%3E%3Cpath d='M0 0l24 16M24 0L0 16' stroke='%23fff' stroke-width='2'/%3E%3Cpath d='M0 0l24 16M24 0L0 16' stroke='%23c8102e' stroke-width='1'/%3E%3Cpath d='M11.5 0h1v16h-1z' fill='%23c8102e'/%3E%3Cpath d='M0 7.5h24v1H0z' fill='%23c8102e'/%3E%3C/svg%3E");
}
.viva-flag-de {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 16'%3E%3Crect width='24' height='5.33' fill='%23000'/%3E%3Crect y='5.33' width='24' height='5.33' fill='%23d00'/%3E%3Crect y='10.66' width='24' height='5.34' fill='%23ffce00'/%3E%3C/svg%3E");
}
#offer-tr:checked ~ .viva-offer-tab-list label[for="offer-tr"],
#offer-en:checked ~ .viva-offer-tab-list label[for="offer-en"],
#offer-de:checked ~ .viva-offer-tab-list label[for="offer-de"] {
  background: linear-gradient(135deg, #4a79ff, #6c97ff);
  color: #fff;
  border-color: rgba(255,255,255,0.22);
  box-shadow: 0 12px 28px rgba(74, 120, 255, 0.24);
}
.viva-offer-panels {
  min-height: 210px;
}
.viva-offer-panel {
  display: none;
}
#offer-tr:checked ~ .viva-offer-tab-list + .viva-offer-panels .viva-offer-panel[data-lang="tr"],
#offer-en:checked ~ .viva-offer-tab-list + .viva-offer-panels .viva-offer-panel[data-lang="en"],
#offer-de:checked ~ .viva-offer-tab-list + .viva-offer-panels .viva-offer-panel[data-lang="de"] {
  display: block;
}
.viva-offer-panel .viva-offer-lead {
  margin: 0 0 10px;
  font-size: 0.95rem;
  color: #d8e3ff;
}
.viva-offer-panel p {
  margin: 8px 0 12px;
  color: #bfc9e7;
  font-size: 0.9rem;
}
.viva-price {
  color: #fbbf24;
  font-weight: 700;
  text-shadow: 0 2px 8px rgba(251, 191, 36, 0.28);
  padding: 2px 6px;
  border-radius: 6px;
  background: rgba(251, 191, 36, 0.08);
}
.viva-offer-panel ul {
  padding: 0;
  margin: 12px 0 0;
  list-style: none;
  display: grid;
  gap: 10px;
}
.viva-offer-panel li {
  position: relative;
  padding-left: 22px;
  color: #e7efff;
  font-size: 0.9rem;
}
.viva-offer-panel li::before {
  content: "•";
  position: absolute;
  left: 0;
  color: #6fa0ff;
}
.viva-offer-panel a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 16px;
  padding: 12px 20px;
  border-radius: 999px;
  background: #1fb865;
  color: #fff;
  text-decoration: none;
  font-size: 0.92rem;
  font-weight: 700;
}
.viva-offer-foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px;
  padding: 16px 24px 24px;
  border-top: 1px solid rgba(255,255,255,0.08);
}
.viva-offer-foot span {
  color: #eef5ff;
  font-weight: 700;
  font-size: 0.92rem;
}
.viva-offer-foot small {
  color: #b8c3e4;
  font-size: 0.82rem;
}
@media (max-width: 720px) {
  .viva-offer-tab-list { flex-direction: column; }
  .viva-offer-foot { flex-direction: column; align-items: flex-start; }
}

.diskograpx{
    background:#fff;
    border:1px solid #e5e5e5;
    border-radius:10px;
    overflow:hidden;
    margin:15px 0;
    box-shadow:0 2px 8px rgba(0,0,0,.05);
}

.diskograpx h3{
    margin:0;
    padding:12px 15px;
    background:#222;
    color:#fff;
    font-size:16px;
    font-weight:700;
}

.diskograpx ul{
    list-style:none;
    margin:0;
    padding:10px;
    max-height:250px;
    overflow-y:auto;
}

.diskograpx ul li{
    margin:0 0 8px;
}

.diskograpx ul li:last-child{
    margin-bottom:0;
}

.diskograpx ul li a,
.diskograpx ul li{
    display:block;
    padding:10px 12px;
    background:#f8f8f8;
    border-radius:6px;
    text-decoration:none;
    color:#333;
    transition:.3s;
}

.diskograpx ul li a:hover,
.diskograpx ul li:hover{
    background:#f0f0f0;
    transform:translateX(-3px);
}

.diskograpx ul::-webkit-scrollbar{
    width:8px;
}

.diskograpx ul::-webkit-scrollbar-track{
    background:#f1f1f1;
}

.diskograpx ul::-webkit-scrollbar-thumb{
    background:#999;
    border-radius:10px;
}

.diskograpx ul::-webkit-scrollbar-thumb:hover{
    background:#666;
}

p.break-words {
    font-size: 14px;
}