/*
 * Waryong2 yeni tasarım (turtle teması üzerine).
 * Arka plan: public_html/images/bg.jpg (yoksa temanın eski arka planı görünür).
 * Masaüstü yerleşimi 1200px ve üstü içindir; telefon/tablet düzeni mobile.php'dedir.
 */

:root {
    --wr-gold: #e8c66a;
    --wr-gold-dark: #b8862f;
    --wr-text: #e9dfc7;
    --wr-muted: #b9a984;
    --wr-card: rgba(16, 12, 9, 0.80);
    --wr-card-border: rgba(232, 198, 106, 0.28);
}

/* Arka plan: resim ekranı kaplar, üstünde okunurluk için koyu katman */
body {
    background:
        linear-gradient(180deg, rgba(8, 6, 4, 0.25) 0%, rgba(8, 6, 4, 0.55) 420px, rgba(8, 6, 4, 0.82) 900px),
        url(../../../../../../images/bg.jpg) center top / cover no-repeat fixed,
        url(../images/top-bg.jpg) top center no-repeat,
        #120f0c;
}

@media (max-width: 1199px) {
    body {
        background-attachment: scroll;
    }
}

/* Giriş alanı butonları (logonun altında) */
.wr-hero {
    position: relative;
    z-index: 5;
    text-align: center;
    font-family: 'Open Sans', sans-serif;
}

.wr-hero-tagline {
    display: inline-block;
    margin: 0 0 18px;
    padding: 6px 16px;
    border: 1px solid rgba(232, 198, 106, 0.5);
    border-radius: 999px;
    background: rgba(10, 8, 6, 0.55);
    color: var(--wr-gold);
    font-size: 12px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.wr-hero-actions {
    display: flex;
    justify-content: center;
    gap: 14px;
}

.wr-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 190px;
    height: 52px;
    padding: 0 26px;
    border: 1px solid rgba(232, 198, 106, 0.7);
    border-radius: 12px;
    background: rgba(10, 8, 6, 0.6);
    color: #f3dfa6;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

.wr-btn:hover {
    color: #fff3d1;
}

.wr-btn-primary {
    border-color: #f3d27a;
    background: linear-gradient(180deg, #f3d27a, var(--wr-gold-dark));
    color: #2a1c06;
}

.wr-btn-primary:hover {
    color: #000;
}

.wr-btn svg {
    width: 18px;
    height: 18px;
    fill: currentColor;
}

/* Butonlarda ejderha başı filigranı (sağ uçta) */
.wr-btn,
.mh-cta .mh-btn {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.wr-btn::before,
.mh-cta .mh-btn::before {
    content: "";
    position: absolute;
    top: 4px;
    right: 6px;
    bottom: 4px;
    left: 6px;
    z-index: -1;
    pointer-events: none;
    background: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20240%2048%22%3E%3Cdefs%3E%3Cmask%20id=%22e%22%3E%3Crect%20width=%22240%22%20height=%2248%22%20fill=%22%23fff%22/%3E%3Cellipse%20cx=%22183%22%20cy=%2216%22%20rx=%223%22%20ry=%222.2%22%20fill=%22%23000%22/%3E%3Ccircle%20cx=%22183.8%22%20cy=%2216%22%20r=%221%22%20fill=%22%23fff%22/%3E%3Ccircle%20cx=%22146%22%20cy=%2222.5%22%20r=%221.1%22%20fill=%22%23000%22/%3E%3C/mask%3E%3C/defs%3E%3Cg%20fill=%22%23e8c66a%22%20fill-rule=%22evenodd%22%20mask=%22url%28%23e%29%22%3E%3Cpath%20d=%22M140%2024%20C142%2021%20145%2019%20150%2019%20L168%2016%20C173%2015%20177%2012%20181%209%20L185%207%20L188%201%20L190%201%20L189%207%20L195%202%20L196%204%20L191%2010%20L199%209%20L205%207%20L213%201%20L211%2011%20L222%205%20L217%2015%20L230%2011%20L224%2022%20L236%2019%20L230%2030%20L238%2033%20L237%2048%20L213%2048%20C212%2042%20207%2036%20198%2034%20L189%2035%20L185%2042%20L179%2047%20L172%2044%20L167%2039%20L154%2035%20L146%2032%20L141%2028%20Z%20M158%2024%20L162%2032%20L166%2024%20Z%20M169%2023%20L172%2030%20L175%2023%20Z%20M180%2024%20L183%2031%20L186%2024%20Z%20M160%2038%20L163%2032%20L166%2038%20Z%20M171%2038%20L174%2032%20L177%2038%20Z%22/%3E%3C/g%3E%3Cpath%20d=%22M148%2028%20C140%2029%20134%2034%20129%2044%20M151%2030%20C146%2034%20143%2039%20142%2046%22%20fill=%22none%22%20stroke=%22%23e8c66a%22%20stroke-width=%221.4%22%20stroke-linecap=%22round%22/%3E%3C/svg%3E") right center / contain no-repeat;
    opacity: 0.3;
}

.wr-btn-primary::before,
.mh-cta .mh-btn-primary::before {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20240%2048%22%3E%3Cdefs%3E%3Cmask%20id=%22e%22%3E%3Crect%20width=%22240%22%20height=%2248%22%20fill=%22%23fff%22/%3E%3Cellipse%20cx=%22183%22%20cy=%2216%22%20rx=%223%22%20ry=%222.2%22%20fill=%22%23000%22/%3E%3Ccircle%20cx=%22183.8%22%20cy=%2216%22%20r=%221%22%20fill=%22%23fff%22/%3E%3Ccircle%20cx=%22146%22%20cy=%2222.5%22%20r=%221.1%22%20fill=%22%23000%22/%3E%3C/mask%3E%3C/defs%3E%3Cg%20fill=%22%23fff6d8%22%20fill-rule=%22evenodd%22%20mask=%22url%28%23e%29%22%3E%3Cpath%20d=%22M140%2024%20C142%2021%20145%2019%20150%2019%20L168%2016%20C173%2015%20177%2012%20181%209%20L185%207%20L188%201%20L190%201%20L189%207%20L195%202%20L196%204%20L191%2010%20L199%209%20L205%207%20L213%201%20L211%2011%20L222%205%20L217%2015%20L230%2011%20L224%2022%20L236%2019%20L230%2030%20L238%2033%20L237%2048%20L213%2048%20C212%2042%20207%2036%20198%2034%20L189%2035%20L185%2042%20L179%2047%20L172%2044%20L167%2039%20L154%2035%20L146%2032%20L141%2028%20Z%20M158%2024%20L162%2032%20L166%2024%20Z%20M169%2023%20L172%2030%20L175%2023%20Z%20M180%2024%20L183%2031%20L186%2024%20Z%20M160%2038%20L163%2032%20L166%2038%20Z%20M171%2038%20L174%2032%20L177%2038%20Z%22/%3E%3C/g%3E%3Cpath%20d=%22M148%2028%20C140%2029%20134%2034%20129%2044%20M151%2030%20C146%2034%20143%2039%20142%2046%22%20fill=%22none%22%20stroke=%22%23fff6d8%22%20stroke-width=%221.4%22%20stroke-linecap=%22round%22/%3E%3C/svg%3E");
    opacity: 0.55;
}

/* Giriş kutusu: buton solda, "şifremi/kullanıcı adımı/PIN'imi unuttum" linkleri sağda alt alta */
.login-block .login-button {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 12px;
    row-gap: 4px;
    align-items: center;
}

.login-block .login-button .green-button {
    grid-row: 1 / span 3;
}

.login-block .login-button a[data-hasevent] {
    grid-column: 2;
    justify-self: end;
    float: none !important;
    position: static !important;
    margin: 0 !important;
    text-align: right;
}

/* Sıralamada karakter yüzü (oyunun kendi ikonları: data/chrs/face) */
.wr-rank-job {
    width: 30px;
    padding-right: 0 !important;
}

.wr-rank-job img {
    display: block;
    width: 28px;
    height: 28px;
    border-radius: 6px;
}

/* Oyuncunun imparatorluk bayrağı (data/flags/1-3.png) */
.wr-rank-flag {
    width: 20px;
    height: 10px;
    margin-right: 6px;
    vertical-align: middle;
    border-radius: 2px;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.4);
}

/* Oyuncu sıralaması sayfasındaki sınıf sütunu (kenar sütundaki ikonla aynı) */
.wr-rank-face {
    display: inline-block;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    vertical-align: middle;
}

@media (max-width: 767px) {
    .wr-hero {
        display: none;
    }
}

/* Tablet ve masaüstü: giriş alanı, kartlar ve alt bilgi */
@media (min-width: 768px) {
    .header {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 22px;
        height: 460px;
        padding-top: 64px;
        box-sizing: border-box;
    }

    .header .logo-header .logo {
        position: static;
        max-width: 560px;
        height: auto;
        filter: drop-shadow(0 10px 24px rgba(0, 0, 0, 0.55));
    }

    /* Logo animasyonu: hafif süzülme, nefes alan kor parıltısı ve ara ara geçen ışık süpürmesi
       (süpürme yalnızca logonun dolu piksellerinde görünür: maske --wr-logo-mask, master.php) */
    .header .logo-header {
        position: relative;
        display: inline-block;
        line-height: 0;
        animation: wrLogoFloat 6s ease-in-out infinite;
    }

    .header .logo-header .logo {
        animation: wrLogoGlow 3.6s ease-in-out infinite;
    }

    /* Işık süpürmesi: logonun parlatılmış kopyası, gradient maskeyle yalnızca dar bir şeritte görünür.
       Logo başka bir adresten gelse bile çalışır (görsel maske yerine gradient maske). */
    .header .logo-header::after {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        background: var(--wr-logo-src) center / 100% 100% no-repeat;
        filter: brightness(2.2) saturate(0.4);
        mix-blend-mode: screen;
        -webkit-mask: linear-gradient(110deg, transparent 43%, #fff 50%, transparent 57%) 100% 0 / 260% 100% no-repeat;
        mask: linear-gradient(110deg, transparent 43%, #fff 50%, transparent 57%) 100% 0 / 260% 100% no-repeat;
        animation: wrLogoShine 7s ease-in-out infinite;
    }

    @media (prefers-reduced-motion: reduce) {
        .header .logo-header,
        .header .logo-header .logo,
        .header .logo-header::after {
            animation: none;
        }
    }

    .content {
        display: flow-root; /* içerideki float'lar (profil karakter kartları) kutudan taşmasın */
        border: 1px solid var(--wr-card-border);
        border-radius: 16px;
        background: var(--wr-card);
        box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
        color: var(--wr-text);
    }

    .content:before,
    .content:after {
        display: none;
    }

    .widget,
    .red-light,
    .red-dark,
    .light,
    .login-block,
    .status-block {
        background: var(--wr-card);
        box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4);
    }

    .left-sidebar > div,
    .right-sidebar > div {
        margin-bottom: 20px;
        border: 1px solid var(--wr-card-border);
        border-radius: 16px;
        overflow: hidden;
    }

    .widget {
        min-height: 0;
        padding: 22px 24px 26px;
    }

    .widget-title,
    .sidebar-title {
        color: var(--wr-gold);
    }

    .status-block {
        height: auto;
        padding: 18px 20px 18px 110px;
    }

    .sidebar_rank tr {
        border-bottom: 1px solid rgba(232, 198, 106, 0.1);
    }

    .footer {
        height: auto;
        margin: 10px 0 40px;
        padding: 100px 24px 30px;
        border: 1px solid var(--wr-card-border);
        border-radius: 16px;
        background: rgba(12, 9, 7, 0.82);
        color: var(--wr-muted);
    }

    .footer #toTop {
        top: -43px;
    }

    .footer-info,
    .f-logo {
        position: static;
    }

    .footer-info {
        margin-top: -50px;
    }

    .f-logo {
        margin-top: 18px;
    }

    .f-menu li a {
        color: #cdbb8f;
        font-size: 11px;
    }
}

/* Geniş ekran: sabit üst menü ve iki sütunlu yerleşim */
@media (min-width: 1200px) {
    .top-panel {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 1500;
        height: 64px;
        background: rgba(12, 9, 7, 0.78);
        border-bottom: 1px solid rgba(232, 198, 106, 0.2);
        box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
        -webkit-backdrop-filter: blur(10px);
        backdrop-filter: blur(10px);
    }

    .top-panel .top-panel-container {
        justify-content: center;
    }

    .top-panel .menu li a {
        line-height: 64px;
        color: #eadcae;
        font-size: 12px;
        font-weight: 600;
        letter-spacing: 0.05em;
        border-bottom: 2px solid transparent;
    }

    .top-panel .menu li a:hover,
    .top-panel .menu li.active a {
        color: var(--wr-gold);
        border-bottom-color: var(--wr-gold);
        text-shadow: none;
    }

    #wr-lang {
        top: 12px;
        z-index: 1600;
    }

    .header {
        height: 520px;
    }

    .container {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 340px;
        /* İçerik uzun olunca fazla boşluk kenar sütundaki kutuların arasına değil en alta gitsin */
        grid-template-rows: auto 1fr;
        column-gap: 24px;
        align-items: start;
        min-height: 0;
        padding-bottom: 40px;
    }

    .container:before,
    .container:after,
    .left-sidebar:after,
    .right-sidebar:after {
        display: none;
    }

    .content {
        grid-column: 1;
        grid-row: 1 / span 2;
        width: auto;
        min-height: 640px;
        padding: 28px 32px 36px;
    }

    .content img {
        max-width: 100%;
    }

    .left-sidebar,
    .right-sidebar {
        width: auto;
        padding-top: 0;
        margin-bottom: 0;
    }

    .left-sidebar {
        grid-column: 2;
        grid-row: 1;
    }

    .right-sidebar {
        grid-column: 2;
        grid-row: 2;
    }

    /* Oyunu indir butonu giriş alanında olduğu için kenar sütunda tekrar gösterilmez */
    .left-sidebar .download-block {
        display: none;
    }
}

/* Giriş sayfası: şifremi/kullanıcı adımı/PIN'imi unuttum ve hesap oluştur bağlantıları */
.wr-login-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px 22px;
    margin: 18px 0 6px;
    padding-top: 14px;
    border-top: 1px solid var(--wr-card-border);
    font-size: 13px;
}

.wr-login-links a {
    color: var(--wr-gold);
    font-weight: 700;
}

.wr-login-links a:hover {
    color: #fff3d1;
}

.wr-login-links .wr-login-links-register {
    width: 100%;
    text-align: center;
    color: #fff0c2;
}

/* Üst menüdeki Giriş Yap yalnızca telefon/tablette (masaüstünde giriş kutusu var) */
@media (min-width: 1200px) {
    .top-panel .menu li.wr-menu-login {
        display: none;
    }
}

/* Alt bilgi, float ile dizilen içeriğin (profil karakter kartları) altına insin */
.footer {
    clear: both;
}

/* Profil sayfasındaki karakter kartları: oyun içi yüz ikonu (data/chrs/face), altın çerçeve */
.wr-profile-face {
    display: block;
    width: 76px;
    height: 76px;
    margin: 4px auto 12px;
    border: 2px solid #c9a84c;
    border-radius: 14px;
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.55), 0 8px 18px rgba(0, 0, 0, 0.5);
}

/* Giriş kutusundaki Cloudflare doğrulaması daha küçük: %80 ölçek, kutu genişliğinde kalır */
.login-block .cf-turnstile {
    width: 125%;
    height: 65px;
    transform: scale(0.8);
    transform-origin: 0 0;
    margin-bottom: -13px;
}

/* Giriş kutusu: başlıkta tek "Giriş Yap"; altta sadece "Hesap Oluştur" bağlantısı sağda */
.login-block .wr-login-title {
    justify-content: flex-start;
    padding-right: 70px;
}

/* Kullanıcı paneli butonları (Hesabım, Nesne Market, Destek Sistemi, Çıkış Yap):
   temanın özgün krem dokulu düğmesi, kutu genişliğinde ve biraz daha yüksek, altın-kahve kenarlık */
.login-block .wr-ub-list {
    display: grid;
    gap: 7px;
    margin-top: 14px;
}

.login-block .wr-ub-list .wr-ub {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 34px;
    margin: 0;
    padding: 0 12px;
    box-sizing: border-box;
    border: 1px solid #8f7a4c;
    border-radius: 4px;
    background: linear-gradient(180deg, #faf4e6 0%, #efe3c8 50%, #e2d0a8 100%);
    color: #2b2114;
    font-family: 'Open Sans', sans-serif;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.2;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.45);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.5);
    transition: filter 0.15s ease, border-color 0.15s ease;
}

.login-block .wr-ub-list .wr-ub:hover {
    filter: brightness(1.06);
    border-color: #d9b45a;
    color: #000;
    text-decoration: none;
}

/* Düğme başında emoji (metinler dil dosyasından geldiği için CSS ile) */
.login-block .wr-ub-list .wr-ub::before {
    content: "";
    margin-right: 8px;
    font-size: 15px;
    line-height: 1;
    font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif;
}

.login-block .wr-ub-list .wr-ub-account::before { content: "👤"; }
.login-block .wr-ub-list .wr-ub-shop::before { content: "🛒"; }
.login-block .wr-ub-list .wr-ub-support::before { content: "🎧"; }
.login-block .wr-ub-list .wr-ub-logout::before { content: "🚪"; }

/* Çıkış Yap bir ton daha koyu ve sade */
.login-block .wr-ub-list .wr-ub-logout {
    filter: brightness(0.9);
    color: #4a3a22;
}

.login-block .wr-ub-list .wr-ub-logout:hover {
    filter: brightness(0.96);
}

/* Panel üstündeki hesap bilgisi biraz daha okunaklı */
.login-block .master-profile {
    font-size: 13px;
    line-height: 1.7;
}

.login-block .master-profile b {
    color: #fff0c2;
}

/* Giriş kutusu ve kullanıcı paneli başlığında ateş topu yerine temanın yeşil taşlı kuşağı: sunucu çevrimiçi */
.login-block .widget-title:after {
    background: url(../images/img-server-left.png) center right / contain no-repeat;
    width: 50px;
    height: 66px;
    top: -18px;
    right: 6px;
}

/* Logo animasyonları (masaüstü başlık ve mobil giriş görseli ortak) */
@keyframes wrLogoFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
}

@keyframes wrLogoGlow {
    0%, 100% { filter: drop-shadow(0 10px 24px rgba(0, 0, 0, 0.55)) drop-shadow(0 0 6px rgba(255, 120, 30, 0.25)); }
    50% { filter: drop-shadow(0 10px 24px rgba(0, 0, 0, 0.55)) drop-shadow(0 0 16px rgba(255, 140, 40, 0.8)) drop-shadow(0 0 34px rgba(255, 80, 0, 0.45)); }
}

@keyframes wrLogoShine {
    0%, 68% { -webkit-mask-position: 100% 0; mask-position: 100% 0; }
    100% { -webkit-mask-position: 0 0; mask-position: 0 0; }
}

/* EP Yükle (mobil oyunda EP yüklenmez, web sitesinden yüklenir): her yerde aynı kırmızı-altın düğme.
   Bağlantı nesne market girişi (site oturumu açıksa doğrudan Ejderha Parası yükleme sayfası) */
.wr-btn-ep {
    border-color: #f0a080;
    background: linear-gradient(180deg, #d8452b 0%, #b02c18 55%, #8f2011 100%);
    color: #fff4e2;
    box-shadow: 0 8px 24px rgba(216, 69, 43, 0.35), inset 0 1px 0 rgba(255, 210, 170, 0.45);
}

.wr-btn-ep:hover {
    color: #fff;
    filter: brightness(1.08);
}

/* Üst menü: "Facebook Ticaret Grubu"nun yanında küçük kırmızı hap */
.top-panel .menu li.wr-menu-ep {
    display: flex;
    align-items: center;
}

.top-panel .menu li.wr-menu-ep a {
    margin: 0 4px;
    padding: 0 14px;
    border-radius: 999px;
    background: linear-gradient(180deg, #d8452b, #8f2011);
    color: #fff4e2;
    line-height: 30px;
}

@media (min-width: 1200px) {
    .top-panel .menu li.wr-menu-ep a,
    .top-panel .menu li.wr-menu-ep a:hover {
        line-height: 30px;
        color: #fff4e2;
        border: 1px solid #f0a080;
        text-shadow: none;
    }

    .top-panel .menu li.wr-menu-ep a:hover {
        filter: brightness(1.12);
    }

    /* Menü ekrana sığmazsa baştaki "Ana Sayfa" kesilmesin */
    .top-panel .top-panel-container {
        justify-content: safe center;
    }
}

/* Telefon / tablet: menü yana kaydırılan tek satır; EP Yükle "Ana Sayfa"dan hemen sonra görünsün */
@media (max-width: 1199px) {
    .top-panel .menu li:first-child {
        order: -2;
    }

    .top-panel .menu li.wr-menu-ep {
        order: -1;
    }
}

/* Kullanıcı paneli: ilk düğme */
.login-block .wr-ub-list .wr-ub-ep {
    border-color: #f0a080;
    background: linear-gradient(180deg, #d8452b 0%, #b02c18 55%, #8f2011 100%);
    color: #fff4e2;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.35);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 210, 170, 0.45);
}

.login-block .wr-ub-list .wr-ub-ep:hover {
    color: #fff;
    border-color: #ffc3a6;
}

/* Oyunun orijinal Ejderha Parası simgesi (nesne marketteki dragon-coin.png) */
.login-block .wr-ub-list .wr-ub-ep::before {
    content: "";
    width: 18px;
    height: 18px;
    background: url(../../../../shop/images/dragon-coin.png) center / contain no-repeat;
}

/* Giriş kutusu: "Şifremi / Kullanıcı Adımı / PIN'imi Unuttum" bağlantılarının altında tam genişlik */
.login-block .wr-login-ep,
.wr-ep-box .wr-ep-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 36px;
    margin-top: 14px;
    padding: 0 12px;
    border: 1px solid #f0a080;
    border-radius: 6px;
    background: linear-gradient(180deg, #d8452b 0%, #b02c18 55%, #8f2011 100%);
    color: #fff4e2;
    font-family: 'Open Sans', sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-decoration: none;
    box-shadow: 0 4px 12px rgba(216, 69, 43, 0.3), inset 0 1px 0 rgba(255, 210, 170, 0.45);
}

.login-block .wr-login-ep:hover,
.wr-ep-box .wr-ep-btn:hover {
    color: #fff;
    filter: brightness(1.08);
    text-decoration: none;
}

.wr-ep-ico {
    flex: none;
    width: 20px;
    height: 20px;
}

.wr-btn-ep .wr-ep-ico {
    width: 22px;
    height: 22px;
}

/* Giriş sayfası ve Hesabım: EP Yükle + kısa açıklama */
.wr-ep-box {
    margin: 16px 0 18px;
    text-align: center;
}

.wr-ep-box .wr-ep-btn {
    max-width: 360px;
    min-height: 42px;
    margin: 0 auto;
    font-size: 14px;
}

.wr-ep-box .wr-ep-hint {
    margin: 8px 0 0;
    color: #d9c9a3;
    font-size: 12.5px;
    line-height: 1.4;
}

/* Üst menü masaüstünde: geniş ekranda daha geniş alan (dil düğmesine çarpmadan); sığmazsa master.php'deki küçük betik
   önce aralıkları (wr-nav-tight), gerekirse yazıyı (wr-nav-tighter) küçültür. Uzun dillerde EP Yükle ile menü taşmasın. */
@media (min-width: 1200px) {
    .top-panel .top-panel-container {
        width: max(min(1200px, 100%), min(1600px, calc(100vw - 230px)));
        box-sizing: border-box;
    }

    .top-panel.wr-nav-tight .menu li a {
        padding: 0 8px;
        letter-spacing: 0.02em;
    }

    .top-panel.wr-nav-tight .menu li.wr-menu-ep a {
        margin: 0 2px;
        padding: 0 10px;
    }

    .top-panel.wr-nav-tighter .menu li a {
        padding: 0 6px;
        font-size: 11px;
        letter-spacing: 0;
    }

    .top-panel.wr-nav-tighter .menu li.wr-menu-ep a {
        padding: 0 9px;
    }
}

.top-panel.wr-nav-measure .menu li a {
    transition: none !important;
}

/* Hesabım: Ejderha Parası bakiyesinin başında oyunun orijinal simgesi (Ejderha Markası satırı kaldırıldı) */
.wr-balance-ico {
    width: 20px;
    height: 20px;
    margin-right: 6px;
    vertical-align: middle;
}

/* iPhone / iPad: TestFlight bağlantısı (App Store rozeti tarzında; resmî "App Store'dan İndir" rozeti yalnız App Store bağlantısı için kullanılabilir) */
.wr-ios {
    display:inline-flex;align-items:center;gap:10px;min-height:50px;padding:6px 16px 6px 10px;border:1px solid #a6a6a6;border-radius:10px;background:#000;color:#fff;text-decoration:none;line-height:1.1;box-shadow:0 6px 18px rgba(0,0,0,.35);transition:border-color .2s,transform .2s;box-sizing:border-box;max-width:100%}
.wr-ios:hover{border-color:#fff;color:#fff;transform:translateY(-1px);text-decoration:none}
.wr-ios-ico{flex:none;width:32px;height:32px;border-radius:7px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%231fc8fc'/%3E%3Cstop offset='1' stop-color='%231e6cf2'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='40' height='40' rx='9' fill='url(%23g)'/%3E%3Cg fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M21.2 9.6 12.4 25'/%3E%3Cpath d='M18.8 9.6 27.6 25'/%3E%3Cpath d='M10.6 21.6h18.8'/%3E%3Cpath d='M10.4 28.6l1.3-2.3'/%3E%3Cpath d='M28.3 26.3l1.3 2.3'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat}
.wr-ios-txt{display:flex;flex-direction:column;align-items:flex-start;min-width:0;text-align:start}
.wr-ios-txt small{font:400 11px/1.2 -apple-system,'Segoe UI',Roboto,'Open Sans',Arial,sans-serif;letter-spacing:.02em;color:#e6e6e6;text-transform:none}
.wr-ios-txt b{font:600 17px/1.15 -apple-system,'Segoe UI',Roboto,'Open Sans',Arial,sans-serif;letter-spacing:0;color:#fff;text-transform:none;white-space:nowrap}

/* Sol sütun: "Oyunu İndir" bloğunun altında; indirme sayfası: tablonun altında ortalı */
.wr-ios-side {
    margin: 0 0 18px;
    text-align: center;
}

.wr-ios-side .wr-ios {
    width: 100%;
    justify-content: center;
}

.wr-ios-dl {
    margin: 18px 0 4px;
    text-align: center;
}

/* Tablet (768-1199px): logonun altındaki düğmeler (Kayıt Ol / İndir / EP Yükle) içerik kutusunun ve sağ sütundaki
   "Oyunu İndir" kutusunun altında kalıp soluk görünüyordu: içerik düğmelerin altından başlar */
@media (min-width: 768px) and (max-width: 1199px) {
    .header + .container,
    header.header ~ .container {
        margin-top: 62px;
    }
}

/* Masaüstü: iPhone rozeti logonun altındaki düğmelere değmesin */
@media (min-width: 1200px) {
    .wr-ios-side {
        margin-top: 10px;
    }
}

/* Google Play rozeti (iPhone rozetiyle aynı kalıp; Play simgesi) ve sütundaki / indirme sayfasındaki dizilim */
.wr-ios-ico.wr-play-ico{border-radius:0;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%2300c3ff' d='M3.6 1.9 13.7 12 3.6 22.1c-.4-.2-.6-.6-.6-1.1V3c0-.5.2-.9.6-1.1z'/%3E%3Cpath fill='%2300e676' d='M3.6 1.9c.4-.2.8-.2 1.2 0l12.1 6.9L13.7 12z'/%3E%3Cpath fill='%23ffd400' d='m16.9 8.8 3.7 2.1c.9.5.9 1.7 0 2.2l-3.7 2.1-3.2-3.2z'/%3E%3Cpath fill='%23ff3d4e' d='M13.7 12l3.2 3.2-12.1 6.9c-.4.2-.8.2-1.2 0z'/%3E%3C/svg%3E")}
.wr-ios-side {
    display: grid;
    gap: 10px;
}

.wr-ios-dl {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}

/* Çok dar telefon: uzun dillerde rozet yazısı rozetin içinde kalsın */
@media (max-width:359px){.wr-ios{gap:8px;padding:6px 10px 6px 8px}.wr-ios-ico{width:28px;height:28px}.wr-ios-txt b{font-size:15px}}

/* ===== Ceza sistemi (@ceza, 21 Ekim 2026): Hesabım / Cezalarım kartları ve sayfa üstü şerit =====
   Görünümler: app/views/client/turtle/profile/ceza_parca.php, profile/index.php, profile/cezalarim.php, ceza_serit.php.
   Bütün kurallar .wr-ceza* ile sınırlı; sağdan sola dillerde (ar) kapsayıcının dir="rtl" özniteliğiyle yön değişir. */
.wr-ceza {
    margin: 0 0 18px;
    color: #e3d6b8;
    font-family: 'Open Sans', sans-serif;
    font-size: 13px;
    line-height: 1.45;
    text-align: left;
}

.wr-ceza[dir="rtl"] {
    text-align: right;
}

.wr-ceza *,
.wr-ceza *::before,
.wr-ceza *::after {
    box-sizing: border-box;
}

.wr-ceza .wr-ceza-baslik {
    margin: 4px 0 10px;
    color: #f0c27a !important; /* style.css: h3 { color: inherit !important } */
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.wr-ceza-kart {
    position: relative;
    margin: 0 0 14px;
    padding: 12px 14px 14px;
    border: 1px solid #2f3e50;
    border-left: 4px solid var(--wr-ceza-renk, #8fb0d6);
    border-radius: 6px;
    background: rgba(8, 13, 20, 0.62);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}

.wr-ceza[dir="rtl"] .wr-ceza-kart {
    border-left-width: 1px;
    border-right: 4px solid var(--wr-ceza-renk, #8fb0d6);
}

.wr-ceza-tur-1 { --wr-ceza-renk: #8fb0d6; }
.wr-ceza-tur-2 { --wr-ceza-renk: #e8b04a; }
.wr-ceza-tur-3 { --wr-ceza-renk: #ec7a3c; }
.wr-ceza-tur-4,
.wr-ceza-tur-5 { --wr-ceza-renk: #e0452c; }

/* Geçmiş (süresi dolan / kaldırılan / uyarı): daha sönük */
.wr-ceza-hal-doldu,
.wr-ceza-hal-kaldirildi,
.wr-ceza-hal-uyari {
    background: rgba(8, 13, 20, 0.4);
    box-shadow: none;
}

.wr-ceza-hal-kaldirildi {
    --wr-ceza-renk: #6f7d8c;
}

.wr-ceza-kart-ust {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin: 0 0 8px;
}

.wr-ceza-rozet,
.wr-ceza-hal {
    display: inline-block;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 700;
    line-height: 1.6;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.wr-ceza-rozet {
    background: var(--wr-ceza-renk, #8fb0d6);
    color: #160f0a;
}

.wr-ceza-hal {
    border: 1px solid rgba(227, 214, 184, 0.35);
    color: #e3d6b8;
}

.wr-ceza-hal-etkin .wr-ceza-hal {
    border-color: var(--wr-ceza-renk, #8fb0d6);
    color: #fff4e2;
}

.wr-ceza-satir {
    display: grid;
    grid-template-columns: minmax(96px, 32%) 1fr;
    gap: 2px 12px;
    padding: 5px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.wr-ceza-satir:first-child {
    border-top: 0;
}

.wr-ceza-et {
    color: #9fb0c2;
    font-size: 12px;
    font-weight: 700;
}

.wr-ceza-deger {
    min-width: 0;
    color: #f1e6cc;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.wr-ceza-sebep {
    white-space: pre-line;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.wr-ceza-yok {
    color: #b9ab8a;
}

.wr-ceza-zaman {
    unicode-bidi: isolate;
    white-space: nowrap;
}

/* Canlı geri sayım */
.wr-ceza-sayac {
    margin: 8px 0 2px;
    padding: 9px 10px 10px;
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.32);
    text-align: center;
}

.wr-ceza-sayac-et {
    display: block;
    margin: 0 0 6px;
    color: #9fb0c2;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.wr-ceza-kutular {
    display: flex;
    justify-content: center;
    gap: 8px;
}

.wr-ceza-kutu {
    flex: 0 1 72px;
    min-width: 0;
    padding: 6px 4px 5px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 5px;
    background: rgba(20, 28, 40, 0.85);
}

.wr-ceza-kutu b {
    display: block;
    color: #fff4e2;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.15;
    font-variant-numeric: tabular-nums;
}

.wr-ceza-kutu small {
    display: block;
    overflow: hidden;
    color: #c9b88f;
    font-size: 10.5px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wr-ceza-sayac.is-bitti .wr-ceza-kutular {
    color: #b9ab8a;
    font-weight: 700;
}

/* Kanıtlar */
.wr-ceza-kanit {
    margin: 8px 0 0;
    padding: 8px 0 0;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.wr-ceza-kanit > .wr-ceza-et {
    display: block;
    margin: 0 0 6px;
}

.wr-ceza-medya {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 8px;
}

.wr-ceza-resim {
    display: block;
    overflow: hidden;
    border: 1px solid #2f3e50;
    border-radius: 5px;
    background: #05080d;
    cursor: zoom-in;
}

.wr-ceza-resim img,
.content .wr-ceza-resim img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: 110px;
    object-fit: cover;
}

.wr-ceza-video {
    grid-column: 1 / -1;
}

.wr-ceza-video video {
    display: block;
    width: 100%;
    max-height: 340px;
    border-radius: 5px;
    background: #000;
}

.wr-ceza-video-ac {
    display: inline-block;
    margin-top: 4px;
    color: #9fc3ec;
    font-size: 12px;
}

.wr-ceza .wr-ceza-baglantilar {
    margin: 6px 0 0;
    padding: 0 0 0 18px;
    list-style: disc;
}

.wr-ceza[dir="rtl"] .wr-ceza-baglantilar {
    padding: 0 18px 0 0;
}

.wr-ceza-baglantilar a,
.wr-ceza-kanit .wr-ceza-sebep a {
    color: #9fc3ec;
    overflow-wrap: anywhere;
    word-break: break-all;
}

/* Hesabım: Cezalarım düğmesi */
.wr-ceza-ozet {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    margin: 0 0 12px;
}

.wr-ceza-dugme,
.wr-ceza-dugme:visited {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 0 16px;
    border: 1px solid #5d7fb3;
    border-radius: 6px;
    background: linear-gradient(180deg, #2b5285 0%, #1e3f62 60%, #162f4b 100%);
    color: #eaf2ff;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-decoration: none;
    text-transform: uppercase;
}

.wr-ceza-dugme:hover {
    color: #fff;
    filter: brightness(1.1);
    text-decoration: none;
}

.wr-ceza-bos,
.wr-ceza-destek {
    margin: 6px 0 14px;
    color: #b9ab8a;
    font-size: 12.5px;
}

.wr-ceza-bos {
    padding: 14px 0;
    color: #e3d6b8;
    font-size: 14px;
    text-align: center;
}

.wr-ceza-destek a {
    color: #9fc3ec;
    text-decoration: underline;
}

/* Resim kanıtı tam boy */
.wr-ceza-buyuk {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 3000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(0, 0, 0, 0.88);
    cursor: zoom-out;
}

.wr-ceza-buyuk img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6);
}

.wr-ceza-buyuk-kapat {
    position: absolute;
    top: 10px;
    right: 12px;
    width: 40px;
    height: 40px;
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    font-size: 26px;
    line-height: 36px;
    cursor: pointer;
}

/* Sayfa üstü şerit (etkin ban / sohbet yasağı) */
.wr-ceza-serit {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    margin: -8px 0 20px;
    padding: 10px 14px;
    border: 1px solid #a64b3b;
    border-radius: 6px;
    background: linear-gradient(to top left, #401212, #621e1e, #964141);
    color: #ffe3dc;
    font-family: 'Open Sans', sans-serif;
    font-size: 13px;
    line-height: 1.4;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
}

.wr-ceza-serit-2 {
    border-color: #a6803b;
    background: linear-gradient(to top left, #403212, #62441e, #966c41);
    color: #fff0d6;
}

.wr-ceza-serit-ico {
    flex: none;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
    font-weight: 700;
    line-height: 22px;
    text-align: center;
}

.wr-ceza-serit-metin {
    flex: 1 1 200px;
    min-width: 0;
    font-weight: 700;
}

.wr-ceza-serit-bag,
.wr-ceza-serit-bag:visited {
    flex: none;
    padding: 5px 12px;
    border: 1px solid rgba(255, 255, 255, 0.45);
    border-radius: 999px;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}

.wr-ceza-serit-bag:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    text-decoration: none;
}

@media (max-width: 767px) {
    .wr-ceza-kart {
        padding: 10px 11px 12px;
    }

    .wr-ceza-satir {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .wr-ceza-kutular {
        gap: 5px;
    }

    .wr-ceza-kutu b {
        font-size: 19px;
    }

    .wr-ceza-medya {
        grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
    }

    .wr-ceza-resim img,
    .content .wr-ceza-resim img {
        height: 90px;
    }

    .wr-ceza-dugme {
        flex: 1 1 100%;
    }

    .wr-ceza-serit {
        margin: 0 0 16px;
    }

    .wr-ceza-serit-bag {
        white-space: normal;
    }

    /* Telefon ana sayfası: üst kısım (header) gizli, içerik sayfanın en üstünden başlar; şerit üst menünün (64px) ve sabit dil
       düğmesinin (76-116px) altında */
    body.wr-page-index .wr-ceza-serit {
        position: relative;
        z-index: 5;
        margin: 124px 12px 0;
    }
}