* {
    margin: 0;
    padding: 0;
    box-sizing: content-box;
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #f4f4f5;
    font-family: Arial, Helvetica, sans-serif;
    overflow: hidden;
}

.main-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 25px;
}

/* --- CODEPEN JERRY ORİJİNAL CSS --- */
.jerry {
    background: #f1cb48;
    background: -moz-linear-gradient(left,  #f1cb48 0%, #f9d65c 24%, #f9d65c 48%, #e6bc3b 99%);
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,#f1cb48), color-stop(24%,#f9d65c), color-stop(48%,#f9d65c), color-stop(99%,#e6bc3b));
    background: -webkit-linear-gradient(left,  #f1cb48 0%,#f9d65c 24%,#f9d65c 48%,#e6bc3b 99%);
    background: linear-gradient(to right,  #f1cb48 0%,#f9d65c 24%,#f9d65c 48%,#e6bc3b 99%);
    width: 180px;
    height: 212px;
    border-top-left-radius: 75px;
    border-top-right-radius: 75px;
    border-bottom-left-radius: 65px;
    border-bottom-right-radius: 64px;
    position: relative;
}

.jerry * { 
    position: absolute; 
    box-sizing: content-box; 
}

.jerry .dark_light {
    width: 7px; 
    height: 50px; 
    top: 10px; 
    left: 136px;
    background-color: #cd9f08; 
    opacity: 0.2; 
    border-radius: 50%;
    box-shadow: 0px 3px 10px 8px #cd9f08; 
    transform: rotate(-42deg);
}

/* Gözlükler */
.glasses {
    background-color: rgba(0, 0, 0, 0);
    border: #949699 solid 11px;
    width: 57px; 
    height: 57px;
    border-radius: 50%; 
    top: 30px; 
    left: 31px; 
    z-index: 99;
}

.jerry .eyes1, .jerry .eyes2 {
    top: 4px; 
    transform: scale(0.9); 
    cursor: pointer;
}
.jerry .eyes1 { left: -20px; }
.jerry .eyes2 { left: 44px; }
.jerry .eyes1 .brown_eye { left: 24px; }

.white_part {
    width: 57px; 
    border-radius: 50%; 
    height: 48px;
    background-color: #FFF; 
    top: 44px; 
    left: 42px;
    box-shadow: 0 0 16px rgba(0, 0, 0, 0.3) inset;
    overflow: hidden;
    position: absolute;
}

.brown_eye {
    background-color: #a87a51; 
    width: 21px; 
    height: 21px;
    top: 13px; 
    right: 18px; 
    border-radius: 50%;
    transition: transform 0.05s ease-out;
    position: absolute;
}

.black_part {
    background-color: black; 
    width: 8px; 
    height: 8px;
    top: 6px; 
    left: 6px; 
    border-radius: 50%;
    position: absolute;
}
.black_part:after {
    background-color: #FFF; 
    width: 3px; 
    height: 3px;
    left: 1px; 
    top: 1px; 
    border-radius: 50%; 
    position: absolute; 
    content: '';
}

/* --- DÜZ BİRLEŞEN GÖZ KAPAKLARI --- */
.eyelid {
    position: absolute; 
    left: 0; 
    width: 100%; 
    height: 50%;
    background-color: #f9d65c; 
    transition: transform 0.2s ease-in-out; 
    z-index: 20;
    border-radius: 0;
}
.eyelid.top { 
    top: 0; 
    transform: translateY(-100%); 
}
.eyelid.bottom { 
    bottom: 0; 
    transform: translateY(100%); 
}

.jerry .eyes1:hover .eyelid.top, .jerry .eyes2:hover .eyelid.top { transform: translateY(0); }
.jerry .eyes1:hover .eyelid.bottom, .jerry .eyes2:hover .eyelid.bottom { transform: translateY(0); }

/* Gözlük Bandı ve Tokalar */
.black_tie { top: 61px; right: 0px; }
.right_tie { transform: rotate(2deg); right: 1px; }
.right_tie * { right: -3px; }
.right_tie .top_tie {
    background-color: #3E3E3C; width: 38px; height: 8px; right: -2px;
    border-top-right-radius: 6px; border-bottom-right-radius: 2px; border: 1px solid #30302E; border-top-left-radius: 3px;
}
.right_tie .top_tie:after {
    background-color: #FFF; width: 5px; height: 10px; right: 35px; z-index: 9999;
    position: absolute; content: ''; border-radius: 36%; border: 1px solid #30302E; bottom: -1px;
}
.right_tie .down_tie {
    background-color: #3E3E3C; width: 38px; height: 8px; right: -2px; top: 9px;
    border-top-right-radius: 2px; border-bottom-right-radius: 6px; border: 1px solid #30302E; border-top-left-radius: 2px;
}
.right_tie .down_tie:after {
    background-color: #FFF; width: 5px; height: 10px; right: 35px; z-index: 9999;
    position: absolute; content: ''; border-radius: 36%; border: 1px solid #30302E; bottom: -2px;
}

.left_tie { transform: scaleX(-1) rotate(2deg); right: 174px; }
.left_tie .top_tie {
    background-color: #3E3E3C; width: 7px; height: 8px; left: -3px;
    border-top-right-radius: 6px; border-bottom-right-radius: 2px; border: 1px solid #30302E; border-top-left-radius: 3px;
}
.left_tie .down_tie {
    background-color: #3E3E3C; width: 7px; height: 8px; left: -3px; top: 9px;
    border-top-right-radius: 2px; border-bottom-right-radius: 6px; border: 1px solid #30302E; border-top-left-radius: 2px;
}

/* Saçlar */
.jerry_hair ul { list-style: none; }
.jerry_hair ul li { width: 1px; background-color: #222; }
li.h1 { height: 27px; left: 92px; top: -18px; transform: rotate(5deg); }
li.h2 { height: 25px; left: 102px; top: -18px; transform: rotate(8deg); }
li.h3 { height: 23px; left: 111px; top: -17px; transform: rotate(10deg); }
li.h4 { height: 18px; left: 121px; top: -13px; transform: rotate(11deg); }
li.h5 { height: 23px; left: 82px; top: -17px; transform: rotate(-1deg); }
li.h6 { height: 27px; left: 72px; top: -18px; transform: rotate(-6deg); }
li.h7 { height: 24px; left: 62px; top: -16px; transform: rotate(-9deg); }
li.h8 { height: 17px; left: 53px; top: -9px; transform: rotate(-10deg); }
li.h9 { height: 12px; left: 44px; top: -3px; transform: rotate(-11deg); }
li.h10 { height: 20px; left: 130px; top: -14px; transform: rotate(13deg); }
li.h11 { height: 17px; left: 138px; top: -6px; transform: rotate(16deg); }
li.h12 { height: 15px; left: 35px; top: -3px; transform: rotate(-13deg); }

/* Kollar ve Eldivenler */
.jerry_lh {
    width: 39px; height: 15px; background-color: #F1CC49;
    top: 151px; left: -25px; border-bottom-left-radius: 11px; transform: rotate(-39deg);
}
.animated_lh {
    width: 27px; height: 15px; background-color: #F1CC49;
    top: 150px; left: -37px; border-bottom-right-radius: 11px; transform: rotate(40deg);
    animation: hand_animate 2s ease 1s infinite;
}
@keyframes hand_animate {
    0% { transform: rotate(40deg); }
    50% { transform: rotate(70deg); }
    100% { transform: rotate(40deg); }
}

.gloves_lh {
    width: 35px; height: 30px; top: -9px; left: -32px;
    background-color: #231F20; border-radius: 50%;
}
.gloves_lh:after {
    position: absolute; content: ''; width: 23px; left: -12px; top: 1px;
    background-color: #231F20; border-radius: 50%; height: 17px; transform: rotate(21deg);
}
.gloves_lh:before {
    position: absolute; content: ''; width: 31px; left: -11px; background-color: #231F20;
    border-radius: 50%; top: 14px; height: 18px; transform: rotate(-1deg);
}
.gloves_lh2 {
    width: 19px; height: 37px; transform: rotate(-22deg);
    top: -19px; left: -29px; background-color: #231F20; border-radius: 50%;
}
.gloves_lh2:before {
    position: absolute; content: ''; width: 14px; left: 22px; background-color: #231F20;
    top: 25px; height: 19px; border-top-left-radius: 6px; border-bottom-left-radius: 6px;
    transform: rotate(20deg) !important;
}

.jerry_rh {
    width: 34px; height: 15px; background-color: #EBC03D;
    top: 161px; left: 156px; border-bottom-left-radius: 11px; transform: rotate(-109deg);
    z-index: 999999; box-shadow: 3px 1px 0px 2px #E2B836 inset;
}
.gloves_rh {
    width: 20px; height: 15px; background-color: #EBC03D;
    top: 175px; left: 152px; border-bottom-left-radius: 11px; transform: rotate(-19deg);
    z-index: 999999; box-shadow: 3px 1px 0px 2px #E2B836 inset;
}
.gloves_rh:before {
    position: absolute; content: ''; width: 17px; left: -19px; background-color: #231F20;
    top: -3px; height: 22px; border-top-left-radius: 5px; border-bottom-left-radius: 16px;
    border-top-right-radius: 5px; border-bottom-right-radius: 5px; transform: rotate(-4deg);
}
.gloves_rh:after {
    position: absolute; content: ''; width: 13px; left: -6px; background-color: #231F20;
    top: -2px; height: 19px; border-top-left-radius: 4px; border-bottom-left-radius: 4px; transform: rotate(3deg);
}

/* Kıyafet & Dikişler */
.clothes .main_jerry {
    background-color: #35668F; width: 100px; height: 43px;
    top: 143px; left: 29px; z-index: 99999;
    border-left: 1px dotted #FFF; border-right: 1px dotted #FFF;
}
.right_shirt {
    background-color: #35668F; width: 45px; height: 10px;
    border: 1px dotted #DDD; border-bottom-right-radius: 9px; z-index: 99999;
}
.right_shirt:before {
    background-color: #000; height: 8px; width: 8px; left: 2px; position: absolute; content: ''; border-radius: 50%; top: 1px;
}
.right_shirt:after {
    background-color: #35668F; height: 2px; width: 2px; left: 5px; position: absolute; content: ''; border-radius: 50%; top: 4px;
}
.jerry_right_shirt { width: 64px; left: 117px; top: 139px; transform: rotate(-13deg); }
.jerry_left_shirt { top: 139px; width: 46px; left: -5px; transform: scaleX(-1) rotate(-23deg); }

/* Logosuz Cep */
.jerry .pocket {
    width: 40px; height: 37px; background-color: #245580;
    top: 152px; left: 57px; transform: scale(0.9); z-index: 99999;
    border-bottom-left-radius: 20px; border-bottom-right-radius: 20px; border: 1px dotted #B6B6B6;
    box-shadow: 0px 0px 3px 0px #133652;
}
.jerry .pocket:after {
    width: 43px; height: 15px; position: absolute; content: ''; top: -9px; left: -1px;
    border-radius: 50%; background-color: #35668F; border-bottom: 1px dotted #B6B6B6;
}

.jerry_bottom {
    background: radial-gradient(ellipse at top, #35668F 61%, #003e82 100%);
    height: 43px; width: 171px; top: 169px; left: 4px;
    border-bottom-right-radius: 70px; border-bottom-left-radius: 70px;
}

.jerry_curve1 {
    width: 40px; height: 29px; background-color: rgba(0, 0, 0, 0);
    top: 173px; z-index: 99999; left: 129px; border-bottom-left-radius: 20px;
    border-left: dotted 1px #FFF; box-shadow: 1px 0px 0px 0px #133652 inset;
}
.jerry_curve1:after {
    position: absolute; content: ''; width: 43px; top: -50px; height: 50px; left: 2px;
    border-bottom: dotted 1px #FFF; background-color: rgba(0, 0, 0, 0);
}
.jerry_left_curve { width: 12px; left: 17px; transform: scaleX(-1); }
.jerry_left_curve .jerry_curve1:after { width: 21px; }

.jerry_curve2 {
    width: 71px; height: 29px; background-color: rgba(0, 0, 0, 0);
    top: 118px; z-index: 100000; left: 43px; border-bottom: dotted 1px #CACACA;
}

/* Ağız ve Dişler */
.jerry_smile {
    width: 64px; height: 17px; background-color: #2B2B2B;
    top: 112px; left: 45px; border-bottom-left-radius: 130px;
    border-bottom-right-radius: 96px; transform: rotate(-5deg); z-index: 999;
}
.jerry_smile:before {
    position: absolute; content: ''; width: 54px; height: 12px; top: 7px; left: 6px;
    border-radius: 50%; background-color: #2B2B2B;
}
.jerry_smile:after {
    position: absolute; content: ''; width: 62px; height: 9px; top: -5px; left: 0px;
    transform: rotate(-1deg); border-radius: 50%; background-color: #F9D65C;
}

.teeth1 {
    width: 16px; height: 11px; border-bottom-right-radius: 8px;
    border-bottom-left-radius: 3px; right: -1px; background-color: #F3F3F3;
    box-shadow: 1px 3px 10px rgba(0, 0, 0, 0.2) inset;
}
.teeth1:after {
    width: 16px; height: 11px; position: absolute; content: '';
    border-bottom-right-radius: 5px; border-bottom-left-radius: 3px;
    right: 15px; top: 1px; background-color: #F3F3F3; box-shadow: 1px 4px 7px rgba(0, 0, 0, 0.2) inset;
}
.teeth2 {
    width: 18px; height: 11px; border-bottom-right-radius: 4px;
    border-bottom-left-radius: 6px; top: 1px; right: 28px; background-color: #F3F3F3;
    box-shadow: 1px 4px 10px rgba(0, 0, 0, 0.2) inset;
}
.teeth2:after {
    width: 16px; height: 11px; position: absolute; content: '';
    border-bottom-right-radius: 5px; border-bottom-left-radius: 9px;
    right: 17px; top: -1px; background-color: #F3F3F3; box-shadow: 2px 3px 7px rgba(0, 0, 0, 0.2) inset;
}

/* Ayakkabılar */
.legs { top: 212px; position: absolute; width: 100%; }
.jerry_shoes {
    background-color: #231F20; width: 45px; height: 9px;
    top: 0px; left: 84px; border-top-right-radius: 14px; transform: rotate(2deg);
}
.jerry_shoes:after {
    position: absolute; content: ''; border-top-right-radius: 30%; width: 30px; height: 6px;
    background-color: #231F20; top: 8px; right: 0px; border-bottom-right-radius: 31%; border-bottom-left-radius: 50%; transform: rotate(2deg);
}
.jerry_shoes:before {
    position: absolute; content: ''; width: 9px; height: 6px; background-color: #231F20; top: 6px; left: 0px; border-bottom-right-radius: 40%;
}
.jerry_small_shoes {
    border-radius: 40%; width: 30px; height: 10px; background-color: #231F20; top: -5px; right: 4px; transform: rotate(9deg);
}
.jerry_small_shoes:before {
    position: absolute; content: ''; width: 36px; height: 8px; background-color: #35668F; top: -2px; left: -11px; transform: rotate(-16deg) !important; border-bottom-right-radius: 4px;
}
.jerry_left_shoes { left: 30px; transform: scaleX(-1); }

/* Metin */
h1.welcome-text {
    font-size: 1.25rem;
    font-weight: normal;
    color: #27272a;
}