body {
background: #f0f2f5;
color: #44546a;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
font-size: 14px;
min-width: 10px;
max-width: 550px;
margin: 0 auto;
box-shadow: 0 0 20px rgba(0,0,0,0.05);
}


.custom-forum-card {
    background: #ffffff; 
    border: 1px solid #e2e8f0; 
    border-left: 4px solid #2563eb; 
    border-radius: 12px; 
    margin: 15px 0; 
    padding: 18px 20px; 
    box-sizing: border-box; 
    width: 100%; 
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03); 
    transition: all 0.3s ease;
}


.custom-forum-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}


.alik-icon {
    width: 20px;
    height: 20px;
    vertical-align: middle;
    margin-right: 5px;
}



.story-scroll {
    display: flex;
    overflow-x: auto;
    gap: 12px;
    padding: 10px;
 margin: 0px 8px 8px 8px; 
    background: #fff;
    border-radius: 16px;
 box-sizing: border-box; 
}

.story-scroll::-webkit-scrollbar {
    display: none;
}

.story-item,
.story-add {
    flex: 0 0 auto;
  width: 60px; 
    text-align: center;
    text-decoration: none;
    color: #222;
    font-size: 11px;
}

.story-item img {
  width: 60px;
    height: 60px;
    border-radius: 50%;
    padding: 3px;
    background: linear-gradient(
        45deg,
        #ff004f,
        #ff7a00,
        #ffd500,
        #00d4ff,
        #7a5cff,
        #ff004f
    );
    background-size: 300% 300%;
    animation: storyGradient 5s linear infinite;
    object-fit: cover;
    box-sizing: border-box; /* Paddingin ölçünü böyütməməsi üçün */
    box-shadow: 0 3px 12px rgba(0,0,0,.15);
}

@keyframes storyGradient {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.story-plus {
  width: 60px;
    height: 60px;
    border-radius: 50%;
    background: #2979ff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: #fff;
    margin: auto;
    box-sizing: border-box;
    box-shadow: 0 3px 12px rgba(41, 121, 255, 0.3);
}

.story-item span,
.story-add span {
    display: block;
    margin-top: 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.top-bar{
    display:flex;
    justify-content:space-around;
    background:#fff;
    border-bottom:1px solid #ddd;
    padding:8px 0;
}

.top-bar a{
    color:#333;
    font-size:18px;
}


.right-menu{
    position:fixed;
    top:0;
    right:-260px;
    width:240px;
    height:100%;
    background:#fff;
    box-shadow:-2px 0 10px rgba(0,0,0,0.2);
    transition:0.3s;
    z-index:9999;
    padding:10px;
}

.right-menu a{
    display:block;
    padding:12px;
    border-bottom:1px solid #eee;
    color:#333;
    text-decoration:none;
}

.right-menu i{
    width:20px;
}

.rm-header{
    font-weight:bold;
    padding:10px;
    border-bottom:1px solid #ddd;
}

.rm-line{
    height:10px;
}

.menu-overlay{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,0.4);
    display:none;
    z-index:9998;
}


.icon_cards{
    padding:10px;
}

.icon_card{
    background:#ffffff;
    border-radius:12px;
    margin-bottom:10px;
    overflow:hidden;
    border:1px solid #e5e5e5;
    box-shadow:0 1px 3px rgba(0,0,0,0.08);
    transition:0.2s;
}

.icon_card:hover{
    transform:translateY(-2px);
    box-shadow:0 4px 10px rgba(0,0,0,0.12);
}

.icon_card a{
    display:flex;
    align-items:center;
    gap:12px;
    padding:12px;
    text-decoration:none;
    color:#222;
}

.icon_card i{
    width:42px;
    height:42px;
    line-height:42px;
    text-align:center;
    border-radius:10px;
    font-size:18px;
    background:#f2f4f7;
    color:#333;
}

.icon_text{
    flex:1;
}

.icon_title{
    font-size:14px;
    font-weight:600;
    color:#111;
}

.icon_desc{
    font-size:12px;
    color:#777;
}


.count {
    font-size: 11px;
    color: #475569;
    background: #f1f5f9;
    padding: 4px 8px;
    border: 1px solid #cbd5e1;
    font-weight: bold;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 18px;
    text-shadow: none;
    float: right;
    margin-top: 2px;
    margin-left: 6px;
}

/* Əgər sistem yeni post sayını birbaşa a teqi daxilinə və ya kənara atarsa, kart dağılmasın */
.list1, .list2, .menu {
    overflow: hidden;
    position: relative;
}



.head {
	background: linear-gradient(135deg, #4f46e5 0%, #3b82f6 100%);
	color: #fff;
	width: 100%;
	border-bottom: 2px solid rgba(255,255,255,0.1);
}

.head a {
	display: inline-block;
	padding: 15px 0;
	float: left;
	width: 20%;
	height: 8%;
	text-align: center;
	margin: 0px;
	color: #fff !important;
	opacity: 0.85;
}

.head a:hover {
	background: rgba(255,255,255,0.15);
	opacity: 1;
}

.head a{
	box-shadow: 1px 0px 0px rgba(255,255,255,0.1), -1px 0px 0px rgba(0,0,0,0.1);
}

.head .home {
	box-shadow: 0px 0px 0px, 1px 0px 0px rgba(255,255,255,0.1);
}

.head .exit {
	box-shadow: -1px 0px 0px rgba(0,0,0,0.1), 0px 0px 0px ;
}

.umenu {
list-style-type: none;
position: relative;
background: #fff;
padding: 0;
}

.umenu li {
display: block;
}

.umenu li a {
border-bottom: 1px solid #e5e7eb;
display: block;
border-left: 1px solid #e5e7eb;
border-right: 1px solid #e5e7eb;
color: #4b5563;
text-decoration: none;
background: #ffffff;
padding: 12px;
font-weight: 500;
}

.umenu li a:hover {
background: linear-gradient(90deg, #f3f4f6 0%, #ffffff 100%);
color: #1d4ed8;
padding-left: 15px;
}


.umenu span.count a {
background: none;
border: none;
display: inline!important;
color: #fff;
padding: 0;
}

form {
font-size: small;
margin: 0;
padding: 0;
}

h3 {
margin: 0;
padding: 0 0 5px;
color: #1e293b;
}

hr {
border: 0;
border-top: 1px solid #e5e7eb;
margin: 10px 0;
}

p {
margin-bottom: 8px;
margin-top: 8px;
line-height: 1.5;
}

textarea {
width: 93%;
max-width: 490px;
border: 1px solid #cbd5e1;
background: #fff;
box-shadow: inset 0 1px 3px rgba(0,0,0,0.05);
border-radius: 6px;
margin-bottom: 8px;
padding: 10px;
outline: none;
}

textarea:focus {
border-color: #3b82f6;
box-shadow: 0 0 0 3px rgba(59,130,246,0.15);
}

select, input[type=file], input[type=text], input[type=password], input[type=email] {
border: 1px solid #cbd5e1;
background: #fff;
box-shadow: inset 0 1px 3px rgba(0,0,0,0.05);
margin-bottom: 6px;
border-radius: 6px;
padding: 8px;
outline: none;
}

select:focus, input:focus {
border-color: #3b82f6;
box-shadow: 0 0 0 3px rgba(59,130,246,0.15);
}

input[type=submit] {
background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
border-radius: 6px;
margin-left: 1px;
color: #fff;
border: none;
font-weight: bold;
padding: 8px 24px;
cursor: pointer;
box-shadow: 0 3px 6px rgba(29,78,216,0.2);
}

input[type=submit]:hover {
background: linear-gradient(135deg, #1d4ed8 0%, #1e40af 100%);
box-shadow: 0 4px 12px rgba(29,78,216,0.3);
}

ul {
padding-left: 20px;
list-style: none;
margin: 0;
}

.alarm {
background: linear-gradient(135deg, #ef4444 0%, #b91c1c 100%);
border: none;
color: #fff;
font-weight: 700;
padding: 6px 10px;
border-radius: 4px;
}

.bblist {
color: #4b5563;
background: transparent url(../../images/dot.gif) no-repeat left;
padding: 0 0 0 12px;
}

.bmenu {
background: #f8fafc;
border-left: 1px solid #e2e8f0;
border-right: 1px solid #e2e8f0;
border-bottom: 1px solid #e2e8f0;
color: #1e293b;
margin: 0;
padding: 10px;
}

.end {
text-align: center;
padding: 10px;
}

.gmenu ul {
	margin: 0;
	padding: 0;
}

.fmenu a{
background: linear-gradient(135deg, #64748b 0%, #475569 100%);
color: #FFF;
border-top: 1px solid rgba(255,255,255,0.1);
text-align: center;
margin: 0;
display: block;
padding: 12px;
font-weight: bold;
}

.fmenu a:hover {
background: linear-gradient(135deg, #475569 0%, #334155 100%);
color: #fff;
}

.footer {
background: #1e293b;
}

.footer a:link, .footer a:visited {
background: #1e293b;
color: #cbd5e1;
font-weight: bold;
text-align: center;
display: block;
margin: 0;
padding: 16px;
}

.footer a:hover {
color: #fff;
background: #0f172a;
}

.func {
border-left: 4px solid #10b981;
color: #64748b;
font-size: 12px;
margin-left: 2px;
margin-top: 5px;
padding-left: 6px;
}

.gmenu {
background: #f8fafc;
color: #64748b;
border-left: 1px solid #e2e8f0;
border-right: 1px solid #e2e8f0;
border-bottom: 1px solid #e2e8f0;
padding: 12px;
margin-bottom: 8px;
border-radius: 0 0 6px 6px;
}

.gray {
color: #94a3b8;
}

.greply {
border-left: 4px solid #10b981;
color: #10b981;
padding: 4px 0 4px 6px;
font-weight: 500;
}

.hdr {
background: linear-gradient(90deg, #f1f5f9 0%, #e2e8f0 100%);
border-bottom: 1px solid #cbd5e1;
font-weight: 700;
padding: 6px;
color: #334155;
}

.left {
float: left;
}

.list1 {
background: #ffffff;
color: #334155;
border-left: 1px solid #e2e8f0;
border-right: 1px solid #e2e8f0;
border-bottom: 1px solid #f1f5f9;
padding: 10px;
}

.list2, .rmenu {
background: #f8fafc;
color: #334155;
border-left: 1px solid #e2e8f0;
border-right: 1px solid #e2e8f0;
border-bottom: 1px solid #e2e8f0;
padding: 10px;
}

.list1 a:link, .list1 a:visited, .list2 a:link, .list2 a:visited, .rmenu a:link, .rmenu a:visited {
color: #2563eb;
font-weight: 500;
}

.maintxt {
background: #f1f5f9;
font-weight: 400;
padding: 12px;
}

.menu {
background: #ffffff;
color: #1e293b;
border-left: 1px solid #e2e8f0;
border-right: 1px solid #e2e8f0;
margin: 0;
padding: 10px;
}

.news {
background-color: #fff;
border-bottom: 1px solid #f1f5f9;
color: #334155;
font-size: 12px;
padding: 6px;
}

.phdr {
	border-radius: 6px 6px 0px 0px;
	background: linear-gradient(135deg, #4f46e5 0%, #3b82f6 100%);
	padding: 12px;
	color: #fff;
	border: 1px solid #4f46e5;
	margin-top: 8px;
	box-shadow: 0 2px 4px rgba(79,70,229,0.15);
}

.phdr a:link, .phdr a:visited {
	font-weight: bold;
	color: #fff;
	text-decoration: underline;
}

.phpcode {
background-color: #f8fafc;
border: 1px dashed #cbd5e1;
margin-top: 6px;
padding: 6px;
font-family: Courier, monospace;
border-radius: 4px;
}

.quote {
border-left: 4px solid #94a3b8;
color: #64748b;
font-size: 12px;
margin-left: 2px;
padding: 4px 0 4px 6px;
background: #f1f5f9;
}

.reply {
border-left: 4px solid #ef4444;
color: #ef4444;
padding: 4px 0 4px 6px;
font-weight: 500;
}

.rmenu {
color: #ef4444;
margin: 2px 0px;
padding-bottom: 10px;
border-radius: 4px;
background: #fef2f2;
border: 1px solid #fee2e2;
}

.rmenu a:link, .rmenu a:visited {
	color: #dc2626;
}

.sitemap {
background-color: #fef08a;
font-size: 11px;
height: 40px;
overflow: auto;
margin: 0;
padding: 4px;
border-radius: 4px;
color: #713f12;
}

.status {
color: #d97706;
font-size: 12px;
font-weight: 700;
padding-left: 0;
}

.sub {
font-size: 12px;
margin-top: 5px;
color: #64748b;
}

.sub a:link, .sub a:visited {
color: #4f46e5;
}

.topmenu {
background-color: #ffffff;
color: #64748b;
border-left: 1px solid #e2e8f0;
border-right: 1px solid #e2e8f0;
border-bottom: 1px solid #e2e8f0;
padding: 8px;
}

.topmenu input {
font-size: 11px;
}

.user {
background: #f1f5f9;
border-left: 1px solid #e2e8f0;
border-right: 1px solid #e2e8f0;
border-bottom: 1px solid #e2e8f0;
color: #1e293b;
margin: 0;
padding: 10px;
}

.alarm a:link, .alarm a:visited {
color: #FFF;
font-size: 12px;
}

.topmenu a:link, .topmenu a:visited {
	color: #3b82f6;
}

.clip a:link, .clip a:visited {
color: #475569;
}

.green, .green a:link, .green a:visited {
color: #10b981;
}

.greply a:link, .greply a:visited {
color: #059669;
}

.red, .red a:link, .red a:visited {
color: #ef4444;
}

.reply a:link, .reply a:visited {
color: #dc2626;
}

a:active {
color: #1d4ed8;
text-decoration: underline;
}

a:hover {
color: #ef4444;
text-decoration: none;
}

a:link, a:visited {
color: #334155;
text-decoration: none;
}

.currentpage {
background: linear-gradient(135deg, #ec4899 0%, #f43f5e 100%);
border: none;
padding: 3px 12px;
color: #fff;
border-radius: 4px;
font-weight: bold;
box-shadow: 0 2px 6px rgba(244,63,94,0.2);
}

a.pagenav {
border: 1px solid #cbd5e1;
text-decoration: none;
padding: 3px 10px;
border-radius: 4px;
color: #64748b;
background: #fff;
}

a.pagenav:hover {
background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
color: #1e293b;
border-color: #94a3b8;
}

.bmenu ul, .menu ul {
list-style: none;
}