/* =========================================================
   PIXELARASI THEME SYSTEM
   - Base theme (asla override edilmemeli)
   - Widget system
   - Layout system
   ========================================================= */
/* https://lospec.com/palette-list/muddled-mania */

@import url("themes.css");

/* =========================================================
   FONTS
========================================================= */

@font-face {
    font-family: "PixemonTrial";
    src: url("PixemonTrialRegular.ttf") format("truetype");
    font-display: swap;
}

@font-face {
    font-family: "TwoFiftySixBytes";
    src: url("TwofiftysixbytesRegular.otf") format("opentype");
    font-display: swap;
}

/* =========================================================
   BASE
========================================================= */

body{
    margin:0;
    padding:0;
    background:var(--bg);
    color:var(--text);
    font-family:var(--font-body);
    font-size:16px;
    font-weight:500;
    transition:
        background .25s ease,
        color .25s ease;
}

#wrapper{
    width:1200px;
    margin:20px auto;
}

/* =========================================================
   BANNER
========================================================= */

#banner{
    background:var(--surface);
    border-bottom:2px solid #444;
    text-align:center;
    padding:25px 10px;
    transition:background .25s ease;
}

#banner h1{
    margin:0;
    font-size:44px;
    font-family:"PixemonTrial";
    letter-spacing:10px;
    text-shadow:4px 4px var(--bg);
    transition:.3s;
}

#banner h1:hover{
    text-shadow:-4px -4px var(--accent);
}

#banner p{
    margin-top:8px;
    color:var(--secondary);
    font-size:14px;
    font-weight:bold;
}

/* =========================================================
   MENU
========================================================= */

#menu{
    text-align:center;
    font-family:"Papyrus";
    padding:10px;
    background:var(--surface2);
    border:1px solid #444;
    margin-bottom:15px;
    transition:background .25s ease;
}

#menu a{
    color:var(--highlight);
    text-decoration:none;
    margin:0 12px;
    font-size:20px;
    font-weight:bold;
    transition:.2s;
}

#menu a:hover{
    color:var(--text);
    text-shadow:0 0 6px var(--primary);
}

/* =========================================================
   MAIN LAYOUT
========================================================= */

#content{
    display:flex;
    gap:16px;
}

/* =========================================================
   SIDEBAR
========================================================= */

#sidebar{
    width:280px;
    background:rgba(0,0,0,.18);
    border-left:2px solid var(--surface);
    padding-left:10px;
    transition:.3s;
}

#sidebar:hover{
    border-left-color:var(--highlight);
}

/* =========================================================
   BOXES
========================================================= */

.box{
    background: var(--surface-gradient);
    border:2px solid var(--border);
    border-radius:6px;
    padding:12px;
    margin-bottom:15px;
    box-shadow:
        inset 0 1px rgba(255,255,255,.08),
        inset 0 -1px rgba(0,0,0,.18),
        0 0 8px rgba(0,0,0,.25);
    transition:.25s;
}

.box:hover{
    transform:translateY(-1px);
    border-color:var(--highlight);
    box-shadow:
        inset 0 0 10px rgba(0,0,0,.6),
        0 0 12px var(--primary);
}

.box h3{
    margin:0 0 8px;
    padding-bottom:6px;
    font-family:"TwoFiftySixBytes";
    font-size:14px;
    letter-spacing:2px;
    text-transform:uppercase;
    color:var(--text);
    border-bottom:1px solid var(--border);
}

/* =========================================================
   POSTS
========================================================= */

#main{
    flex:1;
}

.post{
    background:var(--surface2);
    border:1px solid #444;
    padding:15px;
    margin-bottom:15px;
    transition:.25s;
}

.post:hover{
    border-color:var(--primary);
    box-shadow:0 0 10px rgba(88,131,146,.25);
}

.post h2{
    margin-top:0;
    text-decoration:underline;
}

/* =========================================================
   DATES
========================================================= */

.date-write,
.date-publish{
    display:flex;
    align-items:center;
    gap:6px;
    font-size:14px;
    color:var(--secondary);
}

.date-write::before,
.date-publish::before{
    content:"";
    width:1em;
    height:1em;
    display:inline-block;
    background:currentColor;
    vertical-align:-.1em;

    mask-position:center;
    mask-repeat:no-repeat;
    mask-size:contain;

    -webkit-mask-position:center;
    -webkit-mask-repeat:no-repeat;
    -webkit-mask-size:contain;
}

.date-write::before{
    mask-image:url("/system/icons/edit-box.svg");
    -webkit-mask-image:url("/system/icons/edit-box.svg");
}

.date-publish::before{
    mask-image:url("/system/icons/cloud-upload.svg");
    -webkit-mask-image:url("/system/icons/cloud-upload.svg");
}

/* =========================================================
   IMAGES
========================================================= */

.imageBox{
    width:fit-content;
    max-width:640px;
    margin:20px auto;
    padding:15px;
    border:2px solid var(--bg);
    border-radius:12px;
    overflow:hidden;
    box-sizing:border-box;
}

.imageBox img{
    display:block;
    max-width:100%;
    object-fit:cover;
    border-radius:8px;
    background:#fff;
    transition:transform .4s;
}

.imageBox:hover img{
    transform:scale(1.08);
}

.imageBox.align-left{
    float:left;
    margin:10px 20px 10px 0;
}

.imageBox.align-right{
    float:right;
    margin:10px 0 10px 20px;
}

/* =========================================================
THEME CARTRIDGES
========================================================= */

.theme-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:8px;
}

.theme-btn{

    position:relative;
    overflow:hidden;

    aspect-ratio:1/0.78;

    border:2px solid var(--border);
    border-radius:4px;

    background:var(--surface2);

    cursor:pointer;

    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;

    gap:8px;

    padding:8px;

    transition:.18s ease;

}

.theme-btn:hover{

    transform:translateY(-2px);

    border-color:var(--highlight);

    box-shadow:0 0 10px var(--hover-glow);

}

.theme-btn.active{

    border-color:white;

    box-shadow:
        0 0 14px var(--hover-glow),
        inset 0 0 0 1px rgba(255,255,255,.25);

}

/* üst etiket */

.theme-btn::before{

    content:"";

    position:absolute;

    top:8px;
    left:8px;
    right:8px;

    height:30px;

    border-radius:2px;

    opacity:.95;

}

/* kartuş oyuğu */

.theme-btn::after{

    content:"";

    position:absolute;

    top:0;
    left:50%;

    transform:translateX(-50%);

    width:18px;
    height:5px;

    background:rgba(0,0,0,.25);

    border-radius:0 0 2px 2px;

}

/* Bunları GLOBAL değil, SADECE buton içinde uygula */

.theme-btn .theme-top{

    position:relative;
    z-index:1;

    font-size:9px;
    font-weight:bold;
    font-family:"TwoFiftySixBytes";

    letter-spacing:.6px;

    color:rgba(255,255,255,.9);

    text-shadow:1px 1px black;

    margin-top:4px;

}

.theme-btn .theme-code{

    position:relative;
    z-index:1;

    font-family:"TwoFiftySixBytes";

    font-size:16px;
    line-height:1;

    color:white;

    text-shadow:1px 1px black;

}

/* ---------------------------------------------------------
CARTRIDGE LABELS
--------------------------------------------------------- */

.theme-btn.original{
    background:#124559;
}
.theme-btn.original::before{
    background:#598392;
}

.theme-btn.forest{
    background:#4b5c39;
}
.theme-btn.forest::before{
    background:#b8bf58;
}

.theme-btn.twilight{
    background:#5d4a5d;
}
.theme-btn.twilight::before{
    background:#93b7be;
}

.theme-btn.gameboy{
    background:#306230;
}
.theme-btn.gameboy::before{
    background:#9bbc0f;
}

.theme-btn.nes{
    background:#2b2b2b;
}
.theme-btn.nes::before{
    background:#d64045;
}

.theme-btn.amber{
    background:#2d1a05;
}
.theme-btn.amber::before{
    background:#ffb347;
}

.theme-btn.vapor{
    background:#3d246c;
}
.theme-btn.vapor::before{
    background:#ff71ce;
}

.theme-btn.terminal{
    background:#111111;
}
.theme-btn.terminal::before{
    background:#00ff7f;
}

.theme-btn.paper{
    background:#d8cfbc;
}
.theme-btn.paper::before{
    background:#8b5e3c;
}

.theme-btn.mint{
    background:#d6ebe6;
}
.theme-btn.mint::before{
    background:#4f9d8f;
}

.theme-btn.lavender{
    background:#e5dff2;
}
.theme-btn.lavender::before{
    background:#8f74c9;
}

.theme-btn.sky{
    background:#d7e8f3;
}
.theme-btn.sky::before{
    background:#5fa8d3;
}

.theme-caption{

    margin-top:10px;

    text-align:center;

    color:var(--secondary);

    font-size:11px;

    font-style:italic;

}

/* =========================================================
   SEARCH
========================================================= */

#search-box{
    position:relative;
    width:100%;
}

#search-box:hover{
    box-shadow:
        inset 0 0 10px rgba(0,0,0,.6),
        0 0 12px var(--primary);
}

#search-input{
    width:100%;
    height:28px;
    box-sizing:border-box;
    background:#1b1b1b;
    color:var(--text);
    border:1px solid var(--primary);
    font-family:"Courier New";
}

#search-input:focus{
    outline:none;
    border-color:var(--highlight);
    box-shadow:0 0 8px var(--primary);
}

#search-results{
    position:absolute;
    top:100%;
    left:0;
    width:100%;
    max-height:220px;
    overflow-y:auto;
    background:var(--surface2);
    border:1px solid #444;
    display:none;
    z-index:999;
}

#search-results a{
    display:block;
    padding:6px;
}

#search-results a:hover{
    background:rgba(255,255,255,.08);
}

/* =========================================================
   LINKS
========================================================= */

a{
    color:var(--primary);
}

/* =========================================================
   FOOTER
========================================================= */

footer{
    text-align:center;
    margin-top:25px;
    padding:15px;
    color:var(--secondary);
    font-size:12px;
    border-top:1px solid #333;
}

/* =========================================================
   CURSOR
========================================================= */

html,
body,
a,
button,
input,
textarea,
select{
    cursor:none;
}

#pixel-cursor{
    position:fixed;
    top:0;
    left:0;
    width:32px;
    height:32px;
    background:url("/system/cursor/cursor_mario.png") center/32px no-repeat;
    pointer-events:none;
    z-index:10000;
    will-change:transform;
}

#cursor-trail{
    position:fixed;
    inset:0;
    width:100vw;
    height:100vh;
    pointer-events:none;
    z-index:9999;
}

/* =========================================================
   POST CARD GRID
========================================================= */

.post-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:16px;
}

.post-card{
    display:block;
    overflow:hidden;
    background:var(--surface2);
    border:2px solid var(--border);
    border-radius:6px;
    color:var(--text);
    text-decoration:none;
    transition:.25s;
}

.post-card:hover{
    transform:translateY(-3px);
    border-color:var(--highlight);
    box-shadow:0 0 12px var(--primary);
}

.post-card-cover{
    width:100%;
    aspect-ratio:4/3;
    object-fit:cover;
    display:block;
}

.post-card-info{
    padding:10px 12px 12px;
}

.post-card-title{
    margin:0 0 5px;
    font-size:17px;
    font-weight:bold;
}

.post-card-date{
    margin-bottom:7px;
    color:var(--secondary);
    font-size:11px;
}

.post-card-excerpt{
    margin:0;
    color:var(--highlight);
    font-size:13px;
    line-height:1.4;
}

@media(max-width:700px){

    #wrapper{
        width:95%;
    }

    #content{
        flex-direction:column;
    }

    #sidebar{
        width:auto;
    }

    .post-grid{
        grid-template-columns:1fr;
    }

}

/* =========================================================
FONT PICKER
========================================================= */

.font-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:6px;
}

.font-btn{

    height:48px;

    background:var(--surface2);

    border:2px solid var(--border);

    border-radius:4px;

    color:var(--text);

    cursor:pointer;

    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;

    transition:.18s ease;
}

.font-btn:hover{

    transform:translateY(-2px);

    border-color:var(--highlight);

    box-shadow:0 0 8px var(--hover-glow);

}

.font-btn.active{

    border-color:white;

    box-shadow:
        0 0 12px var(--hover-glow),
        inset 0 0 0 1px rgba(255,255,255,.25);

}

.font-preview{

    font-size:16px;
    line-height:1;
    margin-bottom:2px;

}

.font-btn small{

    font-size:8px;
    letter-spacing:1px;
    color:var(--secondary);

}

.font-btn[data-font="mono"] .font-preview{
    font-family:"Courier New";
}

.font-btn[data-font="dev"] .font-preview{
    font-family:Consolas;
}

.font-btn[data-font="modern"] .font-preview{
    font-family:Verdana;
}

.font-btn[data-font="book"] .font-preview{
    font-family:"Palatino Linotype","Book Antiqua",Palatino,serif;
}

.font-btn[data-font="academic"] .font-preview{
    font-family:"Times New Roman";
}

.font-btn[data-font="epic"] .font-preview{
    font-family:Garamond;
}

.font-btn[data-font="comic"] .font-preview{
    font-family:"Comic Sans MS";
}
    
.font-btn[data-font="web"] .font-preview{
    font-family:"Trebuchet MS", Trebuchet, sans-serif;
}

/* =========================================================
KONAMI TOAST
========================================================= */

.pixel-toast{

    position:fixed;

    bottom:20px;
    left:50%;

    transform:
        translateX(-50%)
        translateY(20px);

    background:var(--surface2);

    color:var(--text);

    border:2px solid var(--highlight);

    padding:10px 16px;

    border-radius:6px;

    font-family:"TwoFiftySixBytes";

    font-size:12px;

    opacity:0;

    transition:.25s ease;

    z-index:999999;

}

.pixel-toast.show{

    opacity:1;

    transform:
        translateX(-50%)
        translateY(0);

}




/* =========================================================
   PIXEL ICONS
========================================================= */

.pixel-icon{
    display:inline-block;
    width:1.1em;
    height:1.1em;
    background-color:currentColor;

    mask-repeat:no-repeat;
    mask-position:center;
    mask-size:contain;

    -webkit-mask-repeat:no-repeat;
    -webkit-mask-position:center;
    -webkit-mask-size:contain;

    vertical-align:-0.2em;
}

.icon-edit-box{mask-image:url("/system/icons/edit-box.svg");-webkit-mask-image:url("/system/icons/edit-box.svg");}
.icon-headphone{mask-image:url("/system/icons/headphone.svg");-webkit-mask-image:url("/system/icons/headphone.svg");}
.icon-home{mask-image:url("/system/icons/home.svg");-webkit-mask-image:url("/system/icons/home.svg");}
.icon-image{mask-image:url("/system/icons/image.svg");-webkit-mask-image:url("/system/icons/image.svg");}
.icon-mail{mask-image:url("/system/icons/mail.svg");-webkit-mask-image:url("/system/icons/mail.svg");}
.icon-moon{mask-image:url("/system/icons/moon.svg");-webkit-mask-image:url("/system/icons/moon.svg");}
.icon-music{mask-image:url("/system/icons/music.svg");-webkit-mask-image:url("/system/icons/music.svg");}
.icon-save{mask-image:url("/system/icons/save.svg");-webkit-mask-image:url("/system/icons/save.svg");}
.icon-script-text{mask-image:url("/system/icons/script-text.svg");-webkit-mask-image:url("/system/icons/script-text.svg");}
.icon-sun{mask-image:url("/system/icons/sun.svg");-webkit-mask-image:url("/system/icons/sun.svg");}
.icon-teach{mask-image:url("/system/icons/teach.svg");-webkit-mask-image:url("/system/icons/teach.svg");}
.icon-book-open{mask-image:url("/system/icons/book-open.svg");-webkit-mask-image:url("/system/icons/book-open.svg");}
.icon-checkbox{mask-image:url("/system/icons/checkbox.svg");-webkit-mask-image:url("/system/icons/checkbox.svg");}
.icon-checkbox-on{mask-image:url("/system/icons/checkbox-on.svg");-webkit-mask-image:url("/system/icons/checkbox-on.svg");}
.icon-cloud-upload{mask-image:url("/system/icons/cloud-upload.svg");-webkit-mask-image:url("/system/icons/cloud-upload.svg");}
.icon-code{mask-image:url("/system/icons/code.svg");-webkit-mask-image:url("/system/icons/code.svg");}
.icon-coffee{mask-image:url("/system/icons/coffee.svg");-webkit-mask-image:url("/system/icons/coffee.svg");}
.icon-comment{mask-image:url("/system/icons/comment.svg");-webkit-mask-image:url("/system/icons/comment.svg");}
.icon-contact{mask-image:url("/system/icons/contact.svg");-webkit-mask-image:url("/system/icons/contact.svg");}
.icon-dice{mask-image:url("/system/icons/dice.svg");-webkit-mask-image:url("/system/icons/dice.svg");}
.icon-download{mask-image:url("/system/icons/download.svg");-webkit-mask-image:url("/system/icons/download.svg");}