* {
  margin: 0; 
  padding: 0; 
  box-sizing: border-box;
}
:root{
  --bg:#fff;
  --posttxt:#222;
}
body {
  font-family: 'Inter', sans-serif;
  background:radial-gradient(1200px 600px at 10% -10%,rgba(79,140,255,.08),transparent 60%),
             radial-gradient(800px 400px at 100% 10%,rgba(34,197,94,.07),transparent 60%),
             var(--bg);

}
/* Poppins fontunu bir başlıkta kullanma */
h1, h2, h3, h4, h5 {
    font-family: 'HanzelWeb', sans-serif;
}
h1.baslik {
  
  /* 1. Temel Ayarlar */
  position: relative; /* ::before için referans noktası */
  display: block; /* H1 varsayılan bloktur, tam genişlik kaplar */
  
  /* 2. Alt Kenarlık (border-bottom) */
  /* NOT: Bu, öğe blok olduğu için zaten en sağdan en sola kadar uzayacaktır. */
  border-bottom: 1px solid #234; 
  padding-bottom: 5px; 
  border-radius: 5px;
  /* 3. ::before öğesine yer açmak için */
  /* Bu, metni sağa iterken ::before'un sol kenarda yer almasını sağlar. */
  padding-left: 13px; 
  margin: 0; /* Başlık varsayılan margin'lerini sıfırlamak faydalı olabilir */
}

h1.baslik::before {
  content: "";
  position: absolute;
  
  /* Eğik çizginin başlangıç noktasını H1'in sol kenarına (padding'in dışına) sıfırla */
  left: 0; 
  
  /* Çizginin üstten başlaması için */
  top: 0; 
  
  /* Çizginin, alt kenarlıkla tam birleşmesi için */
  /* (H1'in yüksekliğini kaplar) */
  height: 100%; 
  
  /* Çizginin kalınlığı ve rengi */
  width: 4px;
  background-color: #234; 

  /* Çizgiyi eğme */
  transform: skewX(-12deg); 
  
  /* Eğimin alt kenarlıkla birleşmesi için transform-origin'i alt-sol (bottom-left) olarak ayarla. */
  transform-origin: bottom left; 
}
/* Inter fontunu paragrafta veya genel metinde kullanma */
p {
    font-family: 'Inter', sans-serif;
    font-weight: 400; /* Seçtiğiniz ağırlığı kullanın */
}
header, footer {
    /*background-image: url('https://mcocinfo.com/assets/images/header2.png');*/
    background-color: #000;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center top;
    background-size: 100% auto;
    
  color: #fff;
  padding: 1rem;
  text-align: center;
}
header.glass{background:linear-gradient(180deg,rgba(11,15,20,.95),rgba(11,15,20,.72));}
.container{max-width:1200px;margin:10px 0 0 0; auto;padding:3px;}
header.sticky{position:sticky;top:0;
backdrop-filter:saturate(160%) blur(8px);z-index:10;border-bottom:1px solid var(--border)}

head-menu ul{
    
}

head-menu li a {
  color: #fff;
  text-decoration: none;
}
nav ul {
  list-style: none;
  display: flex;
  justify-content: center;
  gap: 1rem;
}

nav ul li a {
  color: #fff;
  text-decoration: none;
}

main {
  max-width: 800px;
  margin: 0 auto;
}

form label {
  display: block;
  margin: 10px 0 5px;
  font-weight: bold;
}

form input, form select, form button {
  width: 100%;
  padding: 8px;
  margin-bottom: 10px;
}

button {
  cursor: pointer;
;
  color: #fff;
  border: none;
  transition: background 0.3s ease;
}

button:hover {
  background: #237;
}

/* Küçük animasyon örneği */
h2 {
  animation: fadein 0.8s;
}

@keyframes fadein {
  from { opacity: 0; }
  to   { opacity: 1; }
}

 .btn-ghost {
  display: inline-block;
  margin-left: 7px;
  padding: 6px 10px;
  border-radius: 12px;
  color: #2b66ff;
  border: 1px dashed currentColor;
  background: transparent;
  letter-spacing: .08em;
  transition: background .18s ease, color .18s ease, transform .18s ease;
}
 .btn-ghost .shadow{
  box-shadow: 0 0 10px currentColor;
  }
.btn-ghost:hover { background: rgba(33,66,255,.08); transform: translateY(-2px); }

.cta{
  align-self:flex-start;
  display:inline-flex;align-items:center;gap:10px;
  padding:12px 16px;
  background:
     linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02)),
     linear-gradient(135deg,rgba(79,140,255,.25),rgba(34,197,94,.2));
  border:1px solid color-mix(in oklab, var(--accent) 60%, #fff 0%);
  border-radius:12px;
  color:#fff;text-decoration:none;
  font-weight:700;letter-spacing:.2px;
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  box-shadow:0 8px 20px rgba(79,140,255,.18);
}
.cta.ince{
    margin: 8px;
    padding:4px 8px;
    border-radius:4px;
}
.cta.uyari{
     background:
     linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.06)),
     linear-gradient(135deg,rgba(254,140,79,.55),rgba(190,97,94,.5));
     border-radius:0px;
}
.cta:hover{transform:translateY(-1px);box-shadow:0 14px 28px rgba(79,140,255,.25)}
.cta .tag{font-size:12px;opacity:.9;padding:2px 8px;border-radius:999px;background:rgba(0,0,0,.25);border:1px solid var(--border)}
.cta .altalta{font-size:12px;padding:8px 8px; margin-bottom: 8px; }

/* Normal input gizli */
.chk input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* Checkbox kutusu */
.chk .cbox {
  width: 18px;
  height: 18px;
  border-radius: 4px;
  border: 1px solid color-mix(in oklab, var(--accent) 60%, #fff 0%);
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)),
    linear-gradient(135deg, rgba(79,140,255,.20), rgba(34,197,94,.15));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all .2s ease;
  box-shadow: 0 4px 12px rgba(79,140,255,.18);
}

/* Check işareti */
.chk .cbox::after {
  content: "✔";
  font-size: 12px;
  opacity: 0;
  transform: scale(.6);
  transition: all .2s ease;
}

/* Checked durumunda stil değişimi */
.chk input:checked + .cbox {
  box-shadow: 0 6px 16px rgba(79,140,255,.30);
  border-color: var(--accent);
  transform: translateY(-1px);
}

/* Check işareti görünür */
.chk input:checked + .cbox::after {
  opacity: 1;
  transform: scale(1);
}
/* Hover efekti (cta ile tutarlı) */
.chk:hover .cbox {
  transform: translateY(-1px);
  box-shadow: 0 10px 20px rgba(79,140,255,.28);
}
.wrap{max-width:1100px;margin:0px auto;padding:0 0}

.headevr{
background: linear-gradient(to bottom, #000000, #151823);

    margin:0 auto;
    padding:0 0px 0 15px;  
    font-size: clamp(0.6em, 3.5vw, 1em);
    color: #fff;
    justify-content: center;
    align-items: center;
    height: 2rem;
    overflow: visible; 
    display:flex;
    list-style:none;
    box-shadow: 0 8px 6px -6px black;
    gap: 1rem;
  display:flex; align-items:center;
  font-family: 'HanzelWeb';
}

/* Sol kısım: ana menü + more */
.menu-left{
  display:flex;
  align-items:center;
  text-align:center;
  gap:.5rem;
  justify-content: center;
  min-width:0; /* shrink edilebilir */
  flex:1 1 auto;
}

/* Sağ sabit: search2.php buraya yerleşir ve sabit kalır */
.menu-right{
  flex:0 0 auto;
  display:flex; align-items:center; gap:.5rem;
  min-width:40px; /* search kutun çok daralmasın diye koruma */
  margin-right:10px;
}

/* Ana menü */
.menu{
  display:flex; align-items:center; gap:0.8rem;
  list-style:none; margin:0; padding:0;
  font-size:clamp(.5em,3.4vw,1em);
  overflow:visible; /* JS ile biz yöneteceğiz */
  white-space:nowrap;
}

/* Linkler */
.menu a, .more-menu a{
  color:#fff; text-decoration:none;
}
.menu a:hover, .more-menu a:hover{
  text-decoration:underline;
}

/* More butonu + menüsü */
.more-wrap{ position:relative; flex:0 0 auto; }
.more-btn{
  display:none; /* Başlangıçta kapalı, JS gerekirse açar */
  border:1px solid rgba(255,255,255,.2);
  background:transparent; color:#fff;
  border-radius:8px; padding:.25rem .5rem;
  cursor:pointer; font-size:1.25rem; line-height:1;
}
.more-btn:focus{ outline:2px solid #5b8cff; outline-offset:2px; }

.more-menu{
  position:absolute; right:0; top:calc(100% + 6px);
  display:none; min-width:200px;
  background:#0f121b; border:1px solid rgba(255,255,255,.15);
  border-radius:10px; padding:.4rem; margin:0; list-style:none;
  
  z-index:9999;
}
.more-menu.show{ display:block; }
.more-menu li{ padding:.35rem .5rem; border-radius:8px; }
.more-menu li:hover{ background:rgba(255,255,255,.06); }

/* Küçük ekran dokunuşları */
@media (max-width:540px){
  .nav{  }
  .menu-right{ min-width:40px; }
}
@font-face {
    font-family: 'HanzelWeb';
    src: url('/assets/fonts/hanzel.ttf') format('truetype');   
    font-weight: 700; /* Bold/Kalın karşılığı */
    font-style: italic; /* Italic/Eğik karşılığı */
    font-display: swap;
}
/* Örneğin, tüm H2 başlıklarında kullanmak için: */
h2 {
    font-family: 'HanzelWeb', sans-serif; /* Yedek fontu eklemeyi unutmayın */
    font-size: 2.5em;
    /* Diğer özellikler zaten @font-face içinde tanımlandı, ancak tekrar belirtilebilir. */
}

/* Örneğin, belirli bir div içindeki metinde kullanmak için: */
a {
    font-family: Helvetica, Arial, ;
    font-weight: 700;
    line-height: 1.4;
}




/*lastblog*/
:root{
  --accent:#4f7cff;--border:#1f2a37;
  --title:#eaf0ff; --text:#e5e7eb; --chip:#fff; --chipText:#1e3a8a;
}
*{box-sizing:border-box;margin:0;padding:0}
.blog-wrap{
max-width: 1070px;
padding:8px}
h1{font-size:20px;margin:8px 0 12px}

.scroll-list2{
background: linear-gradient(to bottom, #151823 0%, #000000 70%, #151823 100%);

  display:flex;gap:12px;overflow-x:auto;
  padding:0px 0px 0px;
  margin-top:0;
  scroll-behavior:auto;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x;
  cursor: grab;
  border-radius:0 10px 10px 10px;
  box-shadow:inset 0 -1px 1px #fff;
}

.blog-tabs {
    width: 100%; 
    display: flex; 
    flex-wrap: nowrap;   
    scroll-behavior:auto;
    overflow-x:auto;
    position: relative;
}
/* .blog-tabs içindeki tüm doğrudan alt öğeler */

.tab-button {
  /* Temel Görünüm */
  position: relative;
  background: black;
  font-family: 'HanzelWeb';
  color: white; /* Beyaz yazı rengi */
  padding: 10px 20px; /* İç boşluk */
  border: none; /* Varsayılan kenarlığı kaldır */
  border-radius:10px 10px 0 0; 
  cursor: pointer; /* Fare imleci */
  font-weight: bold;
  box-shadow:inset 0 1px 1px #fff;
  /* Alt kenarlığı tamamen kaldır */
  border-bottom: 0; 
  transition: background-color 0.3s; /* Geçiş efekti */
}
.tab-button.active{
    background: linear-gradient(to bottom, #000000, #151823); 
    z-index:50;
}

/* Bu, alt kenarlığı olmayan bir sekme tutacağı görünümü verir. */
.tab-button.tab-button + .tab-button{
   margin-left:-5px;
}

.scroll-list2.dragging{cursor: grabbing; user-select: none}
.scroll-list2::-webkit-scrollbar{height:6px}
.scroll-list2::-webkit-scrollbar-thumb{background:#2c3648;border-radius:3px}

.blog-card{
  flex:0 0 auto;width:220px;
 /* background:var(--panel);*/
  background: linear-gradient(to bottom,#000,#000,#151823);
  border:1px solid var(--border);
  border-radius:10px;overflow:hidden;cursor:pointer;
  transition:transform .12s ease,box-shadow .12s ease,border-color .12s ease;
  border-color:#000;
  box-shadow:inset 0 1px 1px 1px rgba(255,200,255,.8), 
  4px 4px 8px rgba(0,0,0,.4);
  padding:2px;
}
a {
  text-decoration: none;
}

.blog-card.arena{
  border-color:#000;
  box-shadow:inset 1px 1px 1px 1px rgba(255,200,255,.4),
  inset -1px -1px 1px 1px rgba(255,100,0,.4), 
  4px 4px 8px rgba(0,0,0,.4);
}
.blog-card.gamemeta{
border-color:#000;
  box-shadow:inset 1px 1px 1px 1px rgba(255,200,255,.4),
  inset -1px -1px 1px 1px rgba(0,100,255,.4) ,
  4px 4px 8px rgba(0,0,0,.4);
  
}
.blog-card.apps{
border-color:#000;
  box-shadow:inset 1px 1px 1px 1px rgba(255,100,255,.4),
  inset -1px -1px 1px 1px rgba(255,0,0,.4) ,
  4px 4px 8px rgba(0,0,0,.4);
}



.blog-card:hover .tag{
  transform:translateY(-3px);
  box-shadow:0 10px 18px rgba(0,0,0,.4);
  border-color:#2a3950;
}
.thumb{border-radius:9px;width:100%;aspect-ratio:9/16;object-fit:cover;display:block;
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 70%, rgba(0,0,0,0) 100%);
  mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 70%, rgba(0,0,0,0) 100%);
}
.meta{padding:8px 10px;display:flex;flex-direction:column;gap:6px}
.title{ width:210px; font-family: 'HanzelWeb'; font-weight:600; font-size:14px;line-height:1.15;color:var(--title);height:10px;overflow:hidden;text-overflow: ellipsis;}
.summary{ width:200px; font-weight:200; font-size:10px;line-height:1.0;color:var(--title);white-space: normal; /* Gerekli standart özellikler */
  overflow: hidden;
  display: -webkit-box;
  
  /* Kaç satır görüneceğini belirler */
  -webkit-line-clamp: 2; /* Örneğin: 3 satır */
  
  /* Kutunun yönünü dikey olarak ayarlar */
  -webkit-box-orient: vertical; 
}

.info{font-size:12px;color:var(--muted);display:flex;gap:8px;flex-wrap:wrap;}
.tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:2px}
.tag{  font-family: 'HanzelWeb';background:var(--chip);color:var(--chipText);border:0px solid #c7d2fe;font-size:11px;padding:2px 6px;border-radius:999px;text-decoration:none;
box-shadow:inset 1px 1px 1px 1px rgba(0,0,0,.4);}

.blog-card.arena .tag{
  color:#620;
}
.blog-card.gamemeta .tag{
  color:#026;
}
.blog-card.apps .tag{
  color:#600;
}
.err{color:#ffb4c0;margin-top:10px}
.skel{
  width:220px; height:180px; border-radius:10px; border:1px solid var(--border);
  background:linear-gradient(90deg,#141a23 25%,#1b2431 37%,#141a23 63%); background-size:400% 100%;
  animation:shimmer 1.2s infinite; flex:0 0 auto;
}
@keyframes shimmer{0%{background-position:100% 0}100%{background-position:-100% 0}}

/*lastblog end*/