*{margin: 0;padding: 0;box-sizing: border-box;} html, body {margin: 0;padding: 0; width: 100%;height: 100%; font-family: sans-serif;overflow: hidden;}

header{position:fixed;left:0;top:0;width:100%;height:56px;background:#fff;border-bottom:1px solid #eee;display:flex;align-items:center;justify-content:space-around;padding:0 10%;z-index:1000;transition:box-shadow .3s ease,background .3s ease;}

header .right{display:flex;align-items:center;gap:10px;}
header img{height:28px;width:auto;display:block;}
header span{font-weight:800;margin-top:2px;letter-spacing:.5px;}

header .center{flex:1;}

header .left{display:flex;align-items:center;gap:20px;}

header .left a{display:flex;align-items:center;justify-content:center;text-decoration:none;color:#333;background:#f2f2f2;width:32px;height:32px;border-radius:50%;transition:all .25s ease;position:relative;overflow:hidden;}

header .left a svg{width:20px;height:20px;transition:transform .25s ease;}

header .left a:hover{background:#b10b0b;color:#fff;transform:translateY(-2px);box-shadow:0 4px 10px rgba(177,11,11,.25);}
header .left a:hover svg{transform:scale(1.15) rotate(6deg);fill:#fff;}

header .left a:active{transform:scale(.92);}

.text-btn{font-weight:800;font-size:14px;}

#main-hed-da.scrolled{box-shadow:0 6px 14px rgba(0,0,0,.12);background:#fff;}
header .left a.active{background:#b10b0b;color:#fff;box-shadow:0 6px 16px rgba(177,11,11,.25);fill: #fff;stroke: #fff;}
 
.spa-post, .container{position: fixed;left: 0;top: 56px;width: 100%;height: calc(100vh - 56px);overflow-y: auto;}
.container h1{font-size: 18px;margin-bottom: 10px;color: #b10b0b;}

.spa-post{background: #fff; z-index: 999;display: none;}

  main{position: relative;width: 100%;max-width: 70%;min-height: 50vh; margin: 0 auto;padding: 20px;}
 
  /* post galery css da kana */ 
   .posts-grid {
        display: grid;
        width: 100%;max-width: 100%;
        grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
        gap: 20px;
        margin: 20px auto;
      } 
      .post {  
        padding:5px; 
        overflow: hidden;
        box-shadow: 0 5px 15px rgba(0,0,0,0.1);
        display: flex;
        flex-direction: column;gap: 5px;
        transition: transform 0.2s, box-shadow 0.2s;
      }

      .post:hover {
        transform: translateY(-3px);
        box-shadow: 0 10px 25px rgba(0,0,0,0.2);
      }
      .post .thumb{position: relative; width: 100%;padding-top: 70%;background: #555;border-radius: 5px;overflow: hidden;}
      .post .thumb img{position: absolute;left: 0;top:0; width: 100%;height: 100%;border: 0;object-fit: cover;display: block;}
    
     .user-info {display: flex;align-items: center;gap: 10px;white-space: nowrap;margin-top: 10px;}
     .posts-grid .user-info a{width: 25px;height: 25px;object-fit: fill;}
     .posts-grid .user-info a img{width: 25px;height: 25px; object-fit: cover;cursor: pointer;border-radius: 15%;}
     .posts-grid .user-info h2 {width: 100%;max-width: 50%; font-size: 12px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
     .posts-grid .user-info a img:hover{box-shadow: 0 0 10px rgba(0,0,0,0.2);transform: scale(1.1);}
    
    .post-title {
        width: 100%;
        max-width: 98%;
        margin-top: 5px; 
        font-size: 12px;
        font-weight: 600; 
        white-space: nowrap;      
        overflow: hidden;          
        text-overflow: ellipsis;   
    }
    .post-title a {
        text-decoration: none;
        color: #333;
    }

    
      .post-stats {width: 100%;right: 10px;
        display: flex;align-items: center;justify-content: end; gap: 5px;
        padding: 5px 0; 
        font-size: 12px;
        color: #666;
      }
     
      @media (max-width: 600px) {
        .posts {grid-template-columns: 1fr;}
        main{max-width: 100%;padding: 5px;}
      } 

    .no-net{background:#eee;padding:50px;border-radius:10px;width: 100%;max-width: 400px;margin: 10% auto;display: flex;flex-direction: column;gap:15px;}.no-net button{background: #b10b0b;color: #fff;cursor: pointer;padding: 5px 0px;border: 0;}.no-net button:hover{background: #b13b0b;}
    
 
  .skeleton {border-radius: 6px;position: relative;overflow: hidden;background: #eee !important;}
  .skeleton::after {content: "";position: absolute;top: 0;left: -100%;width: 100%;height: 100%;background: linear-gradient(90deg, transparent, #ffffff55, transparent);animation: shimmer 1.5s infinite;}
    
  .post-title.skeleton {
    width: 100%;
    height: 15px; 
  }
  
  .user-avatar.skeleton {
    width: 30px;
    height: 30px;
    border-radius: 15%;  
  }

  .user-name.skeleton {
    width: 130px;
    height: 12px; 
  }
  @keyframes shimmer {100% {left: 100%;}}
  
  #l-m-btn{width: 100%;display: flex;align-items: center;justify-content: center;margin-top: 100px;}
  #loadMore {
    display: block;
    padding: 10px 25px;
    background: #b10b0b;
    color: #fff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
    transition: background 0.2s;
  }

  #loadMore:hover {background: #b13b0b;}

.f-lo-da{
  position: fixed;width: 100%;height: calc(100% - 50px); left: 0;top: 50px;
  display: grid;
  place-items: center;
  z-index: 9;
  font-weight: 1000;color: red;
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
 
  transition: opacity .3s ease, visibility .3s ease;
}
.f-lo-da::before{
  content: "";
  position: absolute;
  width: 140px;
  height: 140px;
  background: radial-gradient(circle, rgba(0,0,0,.15), transparent 70%);
  filter: blur(20px);
}

.morevidsloader{
  width:100%;
  height:40px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.morevidsloader svg{
  width:50px;
  height:50px;
  animation: svg-rotate 2s linear infinite;
}
.morevidsloader circle{
  fill: none;
  stroke: #b10b0b;
  stroke-width: 10px;
  stroke-linecap: line;
  stroke-dasharray: 283;
  stroke-dashoffset: 280;
  transform-origin: 50% 50%;
  animation: circle-anim 2s ease-in-out infinite;
}
@keyframes svg-rotate{100%{transform: rotate(360deg);}}
@keyframes circle-anim{
  0%{stroke-dashoffset: 280;transform: rotate(0deg);}
  50%{stroke-dashoffset: 80;transform: rotate(135deg);}
  100%{stroke-dashoffset: 280;transform: rotate(360deg);
  }
}

.stargul-footer {position: relative;
 background: linear-gradient(135deg, #b10b0b 0%, #cc2f2f 60%, #ff8a8a 100%);
  color: #fff;
  font-family: Arial, sans-serif;margin-top: 100px;
}

.footer-container {
  max-width: 1200px;
  margin: auto;
  padding: 50px 20px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 30px;
}

.footer-box h3,
.footer-box h4 {
  margin-bottom: 15px;
  font-size: 18px;
  color: #00e6e6;
}

.footer-box p {
  font-size: 14px;
  line-height: 1.6;
  color: #ddd;
}

.footer-box ul {
  list-style: none;
  padding: 0;
}

.footer-box ul li {
  margin-bottom: 8px;
}

.footer-box ul li a,
.social-links a {
  color: #ddd;
  text-decoration: none;
  font-size: 14px;
  transition: 0.3s;
}

.footer-box ul li a:hover,
.social-links a:hover {
  color: #00e6e6;
  padding-left: 5px;
}

.social-links {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.footer-bottom {
  text-align: center;
  padding: 15px;
  background: #b01b0b;
  font-size: 13px;
  color: #bbb;
}