:root{
    --first: #ccb68d;
    --second: #011C1A;
    --first_light: #F4EDE7;
    --third: #47A779;
    --black: #000;
    --light: #FCF8F4;
    --white: #fff;
    --red: #ff0000;
    --gray: #f6f7fa;
    --darkgray: #cdd9e1;
    --lightgray: #f6f7fa;
    --darkblack: #1f2732;
    --radius: 100px;
    --radius30: 30px;
    --radius6: 6px;
    --imgbg: linear-gradient(0deg, var(--third) 0%, rgba(0, 0, 0, 0) 55%);
    --imgbgSecond: linear-gradient(0deg, var(--second) 0%, rgba(0, 0, 0, 0) 55%);
    --whatsapp: #74CB6B;

}
.mobil_menu{display: none}
h1,h2,h3,h4,h5,h6{line-height: 1.2em}
body{font-family: "PT Serif", serif; font-size: 16px;}
a,svg,.neden div,li,.button_second{transition-duration: 0.4s;}
ul{list-style: none;margin: 0;padding: 0}
button{border: none;}

/*Desktop Menu */
.menu .first_link{float: left;margin-right: 20px;border:none;padding: 0 16px;font-weight: 700}
.menu a:hover{color:red}
.menu .submenu{width: max-content;background-color: var(--white);padding: 10px;position: absolute;display: none;z-index: 2;border-bottom-right-radius: 5px;border-bottom-left-radius: 5px;}
.menu .submenu li{float: none;padding: 10px 10px 15px 10px;border-bottom: 1px solid var(--lightgray);margin-bottom: 10px;}
.menu .first_link a{display: flex;align-items: center;background-color: transparent;}
.body_overlay {position: fixed;top: 72px;left: 0;width: 100%;height: 100%;z-index: 1;background-color: rgba(0, 0, 0, .6);display: none;}
.menu .first_sublink:hover .submenu,.menu .first_sublink:hover ~ .body_overlay {display: block;transition-duration:0.4s;}
.menu .sublink{height: 72px;display: block}
.menu .sublink svg{margin-left: 10px}

/* Header */
.header{background-color: var(--first_light);height: 72px}
.header .logo{width: 250px}
.header .menu{width: calc(100% - 450px)}
.header .menu_right{width: 200px}

/* TABLET - IPAD YATAY */
@media only screen and (min-width: 992px) and (max-width: 1366px) and (orientation: landscape) {
    img {width:100%;height: auto}
    .mobil_menu{display: block}
}

/* TABLET - IPAD DİK */
@media (min-width: 600px) and (max-width: 1024px) and (orientation: portrait)  {
    img {width:100%;height: auto}
    .mobil_menu{display: block}
}

/* MOBIL CSS YATAY */
@media only screen and (max-width: 999px) and (orientation: landscape) {
    body{background-color: #212121;z-index: 9999;}
    body::after{background: url('../images/phone_device.jpg');background-position:  top; background-repeat:  no-repeat; background-size: cover; content:'';display: block;height: 500px}
    body div{display: none}
}

/* MOBIL CSS */
@media only screen and (max-width: 559px) {
    .mobil_menu{display: block}
}