/* ==========================================================================
   1. FONTLAR (FONT-FACE)
   ========================================================================== */

@font-face {
    font-family: DigiBop;
    src: url('https://dl.dropboxusercontent.com/s/8maabpvuycdrlai/DigiBop-Regular.ttf');
    unicode-range: U+0000-00FF, U+0100-017F, U+0180-024F, U+1E00-1EFF;
}

@font-face {
    font-family: Nintendo-DS-BIOS;
    src: url('https://dl.dropbox.com/s/vlxjtnvrl9s0snp/Nintendo-DS-BIOS.ttf');
    unicode-range: U+0000-00FF, U+0100-017F, U+0180-024F, U+1E00-1EFF;
}

@font-face {
    font-family: EnchantedSword;
    src: url('EnchantedSword.ttf');
    unicode-range: U+0000-00FF, U+0100-017F, U+0180-024F, U+1E00-1EFF;
}

@font-face {
    font-family: DoubleHomicide;
    src: url('font/DoubleHomicide.ttf');
    unicode-range: U+0000-00FF, U+0100-017F, U+0180-024F, U+1E00-1EFF;
}

@font-face {
    font-family: 'Alghorie Syawal';
    src: url('font/Alghorie Syawal.ttf');
    unicode-range: U+0000-00FF, U+0100-017F, U+0180-024F, U+1E00-1EFF;
}

@font-face {
    font-family: Alkhemikal;
    src: url('font/Alkhemikal.ttf');
    unicode-range: U+0000-00FF, U+0100-017F, U+0180-024F, U+1E00-1EFF;
}

@font-face {
    font-family: Bonefish;
    src: url('font/Bonefish.ttf');
    unicode-range: U+0000-00FF, U+0100-017F, U+0180-024F, U+1E00-1EFF;
}

@font-face {
    font-family: CutePixel;
    src: url('font/CutePixel.ttf');
    unicode-range: U+0000-00FF, U+0100-017F, U+0180-024F, U+1E00-1EFF;
}

@font-face {
    font-family: 'Khodijah Free';
    src: url('font/Khodijah Free.ttf');
    unicode-range: U+0000-00FF, U+0100-017F, U+0180-024F, U+1E00-1EFF;
}

@font-face {
    font-family: KiwiSoda;
    src: url('font/KiwiSoda.ttf');
    unicode-range: U+0000-00FF, U+0100-017F, U+0180-024F, U+1E00-1EFF;
}

@font-face {
    font-family: KiwiSoda;
    src: url('font/KiwiSoda.ttf');
    unicode-range: U+0000-00FF, U+0100-017F, U+0180-024F, U+1E00-1EFF;
}


@font-face {
  font-family: EmilysCandy-Regular;
  src: url('font/EmilysCandy-Regular.ttf');
  unicode-range: U+0000-00FF, U+0100-017F, U+0180-024F, U+1E00-1EFF;
}


@font-face {
    font-family: Honk-Regular;
    src: url('font/Honk-Regular.ttf');
    unicode-range: U+0000-00FF, U+0100-017F, U+0180-024F, U+1E00-1EFF;
}


@font-face {
  font-family: BitcountPropDoubleInk;
  src: url(font/BitcountPropDoubleInk.ttf);
  unicode-range: U+0000-00FF, U+0100-017F, U+0180-024F, U+1E00-1EFF;
}


@font-face {
    font-family: Scriptorium;
    src: url('font/Scriptorium.ttf');
    unicode-range: U+0000-00FF, U+0100-017F, U+0180-024F, U+1E00-1EFF;
}

@font-face {
    font-family: Unbalanced;
    src: url('font/Unbalanced.ttf');
    unicode-range: U+0000-00FF, U+0100-017F, U+0180-024F, U+1E00-1EFF;
}

body,
.window,
.title-bar,
.title-bar-text,
.window-body,
button {
    font-family: DigiBop, EnchantedSword, DoubleHomicide, Unbalanced, Scriptorium, KiwiSoda, Khodijah Free, CutePixel, Bonefish, Alkhemikal, 'Alghorie Syawal', EmilysCandy-Regular, Honk-Regular, BitcountPropDoubleInk ;
}


.window {
    font-family: DigiBop, Nintendo-DS-BIOS, EnchantedSword, Unbalanced, Scriptorium, KiwiSoda, 'Khodijah Free', CutePixel, Bonefish, Alkhemikal, 'Alghorie Syawal', EmilysCandy-Regular, Honk-Regular, BitcountPropDoubleInk;
}


body {
    background-image: url('/backgroundalleyy.jpg'), linear-gradient(plum, hotpink);
    background-size: cover;
    background-position: center;
    min-height: 100vh;
    margin: 0;
    box-sizing: border-box;
    display: flex;
    cursor: url('https://cdn.cursors-4u.net/css-previews/pink-electricity-lightning-c78cedc5-css.webp') 0 0, auto !important;
}


.paintings {
  grid-area: paint;
}
.sag-menu {
  grid-area: sag;
}


body .title-bar-controls {
    align-self: flex-start !important;
    margin-top: 2px !important;
}

.title-bar {
    background: linear-gradient(90deg, #ff69b4, #808080) !important;
    text-align: center;
    font-variant-caps: petite-caps;
    font-family: DigiBop;
}






.ana-hat {
width: 100%;

height: 800px;
padding: 20px;
border: 10px solid hotpink;
border-radius: 50px;
background: rgba(255, 105, 180, 0.0);
margin:40px auto;
display: grid;
    grid-template-columns: 3fr 200px ;
    grid-template-rows:  3fr 1fr 1fr ;

    grid-template-areas:
        "paint sag"
        "paint sag"
        "paint .";
        column-gap: 20px;

}

/*======paintings-sutunu=======*/



.paintings .window-body {
  width: 100%;
  max-height: 1200px;
  margin: 4px auto;
  overflow-y: auto;
}

.paintings {
  margin-right: 100px;
}


html body .window.paintings,
html body .window.paintings .window-body {
    background-color: rgba(196, 172, 179, 0.3) !important;
    background-image: none !important;
}


/* Menu*/

 .sag-menu .menu-butonlar button {
  padding: 15px 20px;
  width: 100%;
  height: 40px;
  margin: auto;
  width: 150px;
  justify-content: center;
  align-items: center;
  margin-left: 20px;
  font-family: 'Scriptorium'!important;
  font-size: 18px;
}


.sag-menu .window-body {
  width: 100%;
  
}

/* 1. Akıcı Büyüme Animasyonu */
@keyframes win98Zoom {
    0% {
        transform: scale(0.05); /* Çok küçük başlar */
        opacity: 0;
    }
    100% {
        transform: scale(1); /* Normal boyutuna ulaşır */
        opacity: 1;
    }
}

/* 2. Pencereye Köşeden Büyüme Uygulaması */
.paintings {
    /* ease-out: Zıplamayı siler, Windows gibi yavaşlayarak duran akıcı geçiş sağlar */
    animation: win98Zoom 0.35s ease-out forwards;
    
    /* Büyümenin başlayacağı nokta: Sol üst köşe */
    transform-origin: top right; 
}