/* ============================================================
   MOBIL RESPONSIVE FIX v5.1 (2026-07-07) - metin2-tr2
   Kok neden: body VE header{min-width:960px} + .container 960/930 + float kolonlar.
   ============================================================ */

/* ============================================================
   SOSYAL IKONLAR (2026-07-11) — masaustu: header ustunde cubuk.
   Mobilde gizlenir, yerine cekmece icindeki sira gelir (en altta).
   Linkler DB settings'ten gelir; bos ayarin ikonu hic basilmaz.
   ============================================================ */
.tr2-social-bar {
  /* 15.09.2026 YEKTA2: logo uste, sosyal ikonlar logonun ALTINA (top 18px -> 138px, 60px -> 52px) */
  position: absolute; top: 138px; left: 50%; transform: translateX(-50%);
  z-index: 400;
  display: flex; gap: 14px; align-items: center;
}
.tr2-social-bar a {
  display: flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,.35);
  color: #fff; text-decoration: none;
  box-shadow: 0 5px 16px rgba(0,0,0,.55);
  transition: transform .18s ease, filter .18s ease, border-color .18s ease;
}
.tr2-social-bar a svg { width: 28px; height: 28px; }
/* 15.09.2026 YEKTA2: logo dar ekranda tasmasin (master.php inline width'i ezer) */
@media screen and (max-width: 768px) { .logo-header .logo { width: 72vw !important; } }
.tr2-social-bar a:hover { transform: translateY(-3px) scale(1.06); filter: brightness(1.15); border-color: rgba(255,255,255,.7); }

/* MARKA RENKLERI — ilk gorunuste de orjinal renk (masaustu cubugu + mobil cekmece) */
.tr2-social-bar a.s-discord,   .tr2-social-float a.s-discord,   div[role="navigation"] .tr2-social-drawer a.s-discord   { background: #5865F2 !important; }
.tr2-social-bar a.s-youtube,   .tr2-social-float a.s-youtube,   div[role="navigation"] .tr2-social-drawer a.s-youtube   { background: #FF0000 !important; }
.tr2-social-bar a.s-instagram, .tr2-social-float a.s-instagram, div[role="navigation"] .tr2-social-drawer a.s-instagram { background: linear-gradient(45deg, #F58529, #DD2A7B, #8134AF) !important; }
.tr2-social-bar a.s-tiktok,    .tr2-social-float a.s-tiktok,    div[role="navigation"] .tr2-social-drawer a.s-tiktok    { background: #111 !important; }
.tr2-social-bar a.s-facebook,  .tr2-social-float a.s-facebook,  div[role="navigation"] .tr2-social-drawer a.s-facebook  { background: #1877F2 !important; }

/* cekmece icindeki sira yalniz mobilde gorunur */
.tr2-social-drawer { display: none; }

@media screen and (max-width: 980px) {

  html, body {
    min-width: 0 !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  /* HEADER (banner) — min-width:960 kaldir, akiskanlastir, yuksekligi kisalt */
  body > header[role="banner"],
  header[role="banner"],
  body > header {
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 100px !important;
    box-sizing: border-box !important;
  }
  body > header > .ui.container,
  body > header > .container,
  .ui.container {
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  a.playfree, .playfree {
    max-width: 100% !important;
    width: auto !important;
    box-sizing: border-box !important;
  }

  /* Ana container'lar akiskan */
  body > .container,
  body > * > .container,
  .container,
  footer[role="contentinfo"] > .container {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  /* .container icindeki TUM kolonlar (menu / merkez / sag) -> dikey diz */
  body > .container > * {
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  body > .container > div.secondary { margin-top: 14px !important; }
  /* KRITIK TUZAK: div[role=main]'in margin-bottom:-230px'i var. Masaustunde kolonlar
     YAN YANA oldugu icin zararsiz; mobilde ALT ALTA dizdigimde sag kolonu 230px yukari
     cekip ana icerigin USTUNE bindiriyordu -> "Kayit Ol" butonuna basilamiyordu
     (dokunus Siralama kutusuna gidiyordu). Sifirla. */
  body > .container > div[role="main"],
  div[role="main"] { margin-bottom: 18px !important; }
  .secondary > aside {
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto 12px !important;
  }

  /* Medya asla tasmasin */
  iframe, img, table, video, object, embed {
    max-width: 100% !important;
    height: auto !important;
  }
  article.trailer, .trailer { width: 100% !important; }
  .trailer iframe, iframe[src*="youtube"] {
    width: 100% !important;
    aspect-ratio: 16 / 9;
    height: auto !important;
  }

  /* Online netbar (960px sabit) akiskan */
  #mmonetbar, .netbarslot, #mmoContent, .mmoGame, #mmoGame {
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  #mmoContent { overflow-x: auto !important; }

  /* Menu tam genislik */
  div[role="navigation"],
  div[role="navigation"] ul,
  nav ul {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Header banner'i kisalt (dev bos alan + menu bindirmesi gitsin) */
  body > header[role="banner"] {
    max-height: 150px !important;
    overflow: hidden !important;
  }
  /* HEMEN OYNA butonu: absolute konumdan cikar, normal blok yap, tam gorunur */
  body > header a.playfree, a.playfree {
    position: static !important;
    display: block !important;
    width: 88% !important;
    max-width: 320px !important;
    height: auto !important;
    margin: 12px auto !important;
    left: auto !important; right: auto !important; top: auto !important; bottom: auto !important;
    transform: none !important;
    float: none !important;
  }

  /* Menu arka plani: banner susleri arkadan gorunup dagitmasin -> koyu zemin */
  div[role="navigation"] {
    background: rgba(28,14,7,0.92) !important;
    padding: 6px 6px !important;
    border-radius: 6px;
  }
  div[role="navigation"] a { color: #f0d9b0 !important; }

  /* ===== Parchment ana icerik (.content 507px sabit) + form kutulari akiskan ===== */
  div[role="main"] { margin-left: 0 !important; margin-right: 0 !important; }
  div[role="main"] div.content,
  .content {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    background-size: 100% auto !important;
    box-sizing: border-box !important;
  }
  .content .content-bg,
  .content .content-bg-bottom {
    width: 100% !important;
    max-width: 100% !important;
    background-size: 100% auto !important;
    box-sizing: border-box !important;
  }
  .content .content-bg-bottom { padding-left: 10px !important; padding-right: 10px !important; }
  /* Dekoratif alt-png'ler mobilde gizli.
     ONEMLI: .secondary:after'in margin-bottom:-200px'i var; kapsayicinin yukseklik
     hesabini kisaltip sag kolonun footer'a tasmasina yol aciyordu (masaustunde
     footer'in 255px suslu alani yutuyor, mobilde toparladigim icin yutamiyor). */
  div[role="main"]:after,
  body > .container > div.secondary:after,
  div[role="navigation"]:after { display: none !important; }

  /* form cercevesi + form akiskan, ortala */
  .inner-form-border {
    width: auto !important;
    max-width: 100% !important;
    margin: 15px 8px 20px 8px !important;
    box-sizing: border-box !important;
  }
  .inner-form-box { box-sizing: border-box !important; }
  #registerForm, #loginForm, #pwlostForm, #lostPasswordCodeForm,
  #changepwForm, #emailChangeForm, #resendactivForm, #moveForm,
  #captchaForm, #regForm1 {
    width: 100% !important;
    max-width: 320px !important;
    margin: 15px auto !important;
    box-sizing: border-box !important;
  }
  /* input & select tam genislik (checkbox haric) */
  .inner-form-box input,
  .inner-form-box select,
  .select-box {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  .inner-form-box input.check-box,
  .inner-form-box input[type="checkbox"],
  #register #checkerror input, #login #checkerror input,
  #register #checktransfer input, #captcha #checkerror input {
    width: 15px !important;
  }

  /* ===== Ranking sayfalari: sekme butonlari alt alta + tablo sigsin ===== */
  #playerRanking [style*="flex"], #guildRanking [style*="flex"] {
    flex-wrap: wrap !important;
    row-gap: 6px !important;
  }
  #playerRanking table, #guildRanking table, #eventRanking table {
    width: 100% !important;
    max-width: 100% !important;
    table-layout: auto !important;
    box-sizing: border-box !important;
  }
  #playerRanking th, #playerRanking td,
  #guildRanking th, #guildRanking td {
    width: auto !important;
    min-width: 0 !important;
    padding-left: 4px !important;
    padding-right: 4px !important;
    font-size: 12px !important;
    line-height: 1.3 !important;
    word-break: break-word;
  }
  #playerRanking td img, #guildRanking td img {
    max-width: 30px !important;
    height: auto !important;
  }

  /* ===== Footer: dev 260px yan padding + 419px yukseklik mobilde topla ===== */
  footer[role="contentinfo"] {
    height: auto !important;
    min-height: 0 !important;
    padding: 26px 0 22px !important;
    background-size: cover !important;
    background-position: top center !important;
  }
  footer[role="contentinfo"] > .container {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    padding: 0 14px !important;
    box-sizing: border-box !important;
  }

  /* ===== Kutu alt-kenar susleri (481px sabit) + genel guvenlik agi ===== */
  .box-foot, .download-box-foot {
    width: 100% !important;
    max-width: 100% !important;
    background-size: 100% 100% !important;
  }
  .content .content-bg-bottom * {
    max-width: 100% !important;
    box-sizing: border-box;
  }
  #downloadText { width: 100% !important; }
}

/* ============================================================
   ITEM-TARZI MOBIL ALT MENU + CEKMECE (yalniz telefon <=768px)
   Masaustu HIC etkilenmez.
   ============================================================ */
.tr2-bottomnav { display: none; }
.tr2-menu-backdrop { display: none; }
.tr2-dc-drawer { display: none; }
.tr2-social-float { display: none; }

@media screen and (max-width: 768px) {
  .tr2-bottomnav {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    align-items: end;
    position: fixed !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
    margin: 0 !important; z-index: 1200;
    background: #140b06;
    border-top: 1px solid rgba(200,162,74,.35);
    padding: 5px 2px calc(5px + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -6px 20px rgba(0,0,0,.5);
  }
  /* panel global clearfix ::before/::after grid'de hucre isgal ediyordu -> iptal */
  .tr2-bottomnav::before, .tr2-bottomnav::after { content: none !important; display: none !important; }
  /* NOT: burada overflow:hidden OLMAYACAK — ortadaki yukseltilmis + butonunun
     tasan ustunu kirpiyordu ("Kayit Ol yarisi yok"). Grid zaten minmax(0,1fr) ile cozuldu. */
  .tr2-mbn-item {
    min-width: 0; width: 100%;
    display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 3px;
    text-decoration: none; color: #c7b393;
    font-size: 12px; font-weight: 700; line-height: 1.1;
    padding: 6px 2px; min-height: 56px;
    background: none; border: 0; font-family: inherit; cursor: pointer;
  }
  .tr2-mbn-item svg { width: 26px; height: 26px; flex: 0 0 auto; }
  .tr2-mbn-item span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
  .tr2-mbn-item:active, .tr2-mbn-item.active { color: #f0d9b0; }
  .tr2-mbn-center { color: #fff5dc; }
  .tr2-mbn-plus {
    display: flex; align-items: center; justify-content: center;
    width: 54px; height: 54px; margin-top: -20px; margin-bottom: 1px;
    border-radius: 50%; color: #2a1607;
    background: linear-gradient(180deg, #e9c876, #c8a24a);
    border: 3px solid #140b06; box-shadow: 0 6px 16px rgba(200,162,74,.55);
  }
  .tr2-mbn-plus svg { width: 28px; height: 28px; }

  /* Icerik alt cubugun + sosyal seridin arkasinda kalmasin */
  body { padding-bottom: calc(190px + env(safe-area-inset-bottom, 0px)) !important; }

  /* Ust menuyu (div[role=navigation]) alttan acilan CEKMECE yap */
  div[role="navigation"] {
    position: fixed !important; left: 0 !important; right: 0 !important;
    bottom: 0 !important; top: auto !important;
    z-index: 1205 !important;
    max-height: 76vh !important; overflow-y: auto !important;
    margin: 0 !important;
    border-radius: 14px 14px 0 0 !important;
    padding: 14px 12px calc(72px + env(safe-area-inset-bottom, 0px)) !important;
    background: #160d07 !important;
    border-top: 2px solid #c8a24a !important;
    transform: translateY(105%);
    transition: transform .28s ease;
    box-shadow: 0 -10px 30px rgba(0,0,0,.6) !important;
  }
  body.tr2-menu-open div[role="navigation"] { transform: translateY(0); }

  /* Cekmecede tum alt menuler acik gorunsun */
  div[role="navigation"] nav ul { width: 100% !important; }
  div[role="navigation"] nav > ul > li { border-bottom: 1px solid rgba(200,162,74,.15); }
  div[role="navigation"] nav ul ul { display: block !important; padding-left: 14px !important; }
  div[role="navigation"] a { display: block !important; padding: 10px 8px !important; color: #f0d9b0 !important; font-size: 15px !important; }
  div[role="navigation"] ul ul a { color: #c7b393 !important; font-size: 14px !important; }
  /* cekmece: ic doku sizmasin (duz koyu zemin) + fazla bosluklari topla */
  div[role="navigation"] nav,
  div[role="navigation"] nav ul,
  div[role="navigation"] nav li { background: transparent !important; margin: 0 !important; min-height: 0 !important; }
  div[role="navigation"] nav li { line-height: 1.2 !important; }

  /* Karartma arka plani */
  .tr2-menu-backdrop {
    display: block; position: fixed; inset: 0; z-index: 1201;
    background: rgba(0,0,0,.5);
    opacity: 0; visibility: hidden; transition: opacity .28s ease;
  }
  body.tr2-menu-open .tr2-menu-backdrop { opacity: 1; visibility: visible; }

  /* ===== DISCORD: cekmece ustu buyuk buton + sag-alt sabit baloncuk ===== */
  div[role="navigation"] a.tr2-dc-drawer {
    display: flex !important;
    align-items: center; justify-content: center; gap: 10px;
    margin: 0 0 12px !important;
    padding: 12px 14px !important;
    border-radius: 12px !important;
    background: linear-gradient(180deg, #5b6ef5, #4753d6) !important;
    color: #fff !important;
    font-size: 15px !important; font-weight: 700 !important;
    text-decoration: none !important;
    box-shadow: 0 4px 14px rgba(88,101,242,.45);
  }
  div[role="navigation"] a.tr2-dc-drawer svg { width: 22px; height: 22px; flex: 0 0 auto; }

  /* SOSYAL SERIT: tam genislik, kendi koyu zemini, alt cubuga yapisik.
     Zemin arkadaki icerigi kapatir -> "nizami" gorunum, cakisma yok. */
  .tr2-social-float {
    display: flex !important;
    align-items: center; justify-content: center; gap: 12px;
    position: fixed !important;
    left: 0 !important; right: 0 !important;
    bottom: calc(66px + env(safe-area-inset-bottom, 0px)) !important;
    z-index: 1198;
    /* alt bosluk fazla: ortadaki yukseltilmis + butonu ikonlara degmesin */
    padding: 15px 8px 26px;
    background: #140b06;
    border-top: 1px solid rgba(200,162,74,.22);
    box-shadow: 0 -4px 14px rgba(0,0,0,.45);
    transition: opacity .2s ease, visibility .2s ease;
  }
  .tr2-social-float a {
    display: flex !important; align-items: center; justify-content: center;
    width: 48px; height: 48px; border-radius: 50%;
    border: 2px solid rgba(255,255,255,.28);
    color: #fff !important; text-decoration: none !important;
    box-shadow: 0 3px 10px rgba(0,0,0,.45);
    flex: 0 0 auto;
  }
  .tr2-social-float a svg { width: 26px; height: 26px; }
  /* seridin ustune yumusak gecis: arkadaki sayfa icerigi keskin kesilmesin,
     hangi kaydirma konumunda olursa olsun duzgun gorunsun */
  .tr2-social-float::before {
    content: "";
    position: absolute; left: 0; right: 0; bottom: 100%;
    height: 26px;
    background: linear-gradient(to top, #140b06 0%, rgba(20,11,6,.85) 45%, rgba(20,11,6,0) 100%);
    pointer-events: none;
  }
  /* cekmece acikken sira gizlensin (cekmecede zaten var) */
  body.tr2-menu-open .tr2-social-float { opacity: 0 !important; visibility: hidden !important; }

  /* sosyal: header cubugunu gizle, cekmece icindeki sirayi goster */
  .tr2-social-bar { display: none !important; }
  div[role="navigation"] .tr2-social-drawer {
    display: flex !important;
    justify-content: center; gap: 10px;
    margin: 0 0 12px !important;
  }
  div[role="navigation"] .tr2-social-drawer a {
    display: flex !important; align-items: center; justify-content: center;
    width: 52px !important; height: 52px !important;
    padding: 0 !important; margin: 0 !important;
    border-radius: 50% !important;
    border: 2px solid rgba(255,255,255,.30) !important;
    color: #fff !important;
    flex: 0 0 auto;
    box-shadow: 0 4px 12px rgba(0,0,0,.45);
  }
  div[role="navigation"] .tr2-social-drawer a svg { width: 28px; height: 28px; }

  /* eski discord-widget (embed banner) mobilde gizli — yerine sosyal sira + cekmece butonu var */
  .discord-widget { display: none !important; }
}