body, html {margin: 0; padding: 0; background-color: #f2f2f2; box-sizing: border-box;}
h1,h2,h3,h4,h5,h6,a,p,label,time,dt,dl,dd,li,small,th,td {margin: 0; padding: 0; font-family: 'Open Sans'; color: #1f1f1f; text-decoration: none;}
img {max-width: 100%; height: auto; vertical-align: middle;}
div {margin: 0; padding: 0;}
table {border-collapse: collapse;}
tr, td {margin: 0; padding: 0; border: none;}

h1 {font-size: 32px; font-weight: 600;}
h2 {font-size: 26px; font-weight: 600;}
h3 {font-size: 20px; font-weight: 600;}
h4,p,label,dt,dl,dd,li,a,td,th {font-size: 16px; font-weight: 400;}
small {font-size: 14px; font-weight: 400;}
.turuncu-slogan {font-size: 20px; font-weight: 600; text-decoration: none; font-family: 'Open Sans'; color: #e52629be;}


/* En yukarıdaki mesaj */
#spin {color:#fff; font-size: 12px;}
#spin:after {content:""; animation: spin 10s linear infinite;}

/* Menü bölümü */
header {display: flex; justify-content: space-between; align-items: center; padding: 15px 40px; background-color: #fff; box-shadow: 0 2px 4px rgba(0,0,0,0.1); position: relative; z-index: 10;}
.logo {height: 50px; width: auto;}
.menu-toggle {display: none; width: 30px; height: 30px; background: url('/images/icon-menu.png') no-repeat center; background-size: contain; cursor: pointer;}
.main-nav {flex-grow: 1; text-align: right;}
.nav-list {list-style: none; margin: 0; padding: 0; display: flex; gap: 25px; justify-content: flex-end;}
.nav-list li a {text-decoration: none; color: #333; font-weight: 500;}
.mobilMenu {display: none;}

.logo {height: 50px; width: 307px; vertical-align: middle;}
.hiDiv {background-color: #e52629; text-align: center; padding: 6px;}

/* Hero resmi */
.container-default {display: flex; height: 500px;}
.default-bil {display: inherit; width: 100%; height: 100%; object-fit: cover;}
.default-cep {display: none; width: 100%; height: 100%; object-fit: cover;}
.hero-container {display: flex; width: 100%; height: 500px; box-sizing: border-box; gap: 10px; background-color: #fff;}
.hero-left {flex: 1; height: 100%;}
.hero-left img {width: 100%; height: 100%; object-fit: cover;}
.hero-right {width: 500px; height: 500px; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: calc(50% - 5px) calc(50% - 5px);  gap: 10px;}
.grid-item img {width: 100%; height: 100%; object-fit: cover;}
.hero-mobile {display: none;}    

/* Mobil menü ikonları */
.icon11,.icon12,.icon13,.icon14,.icon15,.icon16 {display: none; width: 30px; height: 30px; background-size: contain; vertical-align: middle;}
.icon11 {background-image: url('/images/icon-11.png');}
.icon12 {background-image: url('/images/icon-12.png');}
.icon13 {background-image: url('/images/icon-13.png');}
.icon14 {background-image: url('/images/icon-14.png');}
.icon15 {background-image: url('/images/icon-15.png');}
.icon16 {background-image: url('/images/icon-16.png');}


/* Ana Div */
.anadiv {width: 1200px; margin: 0 auto; padding: 0;}
.icerikdiv-1 {position: relative; background-color: #fff; padding: 40px 40px; margin: -50px 0 40px 0; border-radius: 10px; border: 1px solid #c1c5c6; text-align: center;}
.ustok {display: block; width: 50px; margin: 10px auto 0 auto;}    
.icerikdiv-3 {position: relative; background-color: #fff; padding: 40px 40px; margin: 80px 0 40px 0; border-radius: 10px; border: 1px solid #c1c5c6; text-align: center;}
.icerikdiv-2 {text-align: center; margin-bottom: 40px; padding: 20px 20px; border-radius: 10px; background-color: #f8f8f8; position: relative; border: 1px solid #c1c5c6;}
.sol-2 {position: absolute; width: 100px;}
.sag-2 {background-color: #fff; height: 100%; margin-left: 120px; padding: 40px; text-align: left; border-top-right-radius: 10px; border-bottom-right-radius: 10px; border-left: solid #c1c5c6 5px;}
        

@media (max-width: 768px) {
h1 {font-size: 22px;}
h2 {font-size: 18px;}
h3 {font-size: 16px;}
h4,p,label,dt,dl,dd,li,a,td,th {font-size: 14px;}
small {font-size: 12px;}
.turuncu-slogan {font-size: 18px;}


/* Menü bölümü */
header {flex-wrap: wrap; padding: 15px 10px;}
.menu-toggle {display: block;}
.main-nav {width: 100%;}
.nav-list {display: none; box-sizing: border-box; flex-direction: column; margin-top: 30px; padding: 10px 0; width: 100%;}
.nav-list.show {display: flex; flex-direction: column; align-items: flex-start; gap: 8px;}
.nav-list li {padding: 10px 20px; box-sizing: border-box; width: 100%; background-color: #f2f2f2; border-radius: 6px;}
.nav-list li a {font-size: 16px; display: flex; align-items: center; gap: 8px; text-align: left; font-weight: 600;}
.mobilMenu {display: list-item;}
.logo {height: 35px; width: 215px;}

/* Hero resmi */
.container-default {height: auto;}
.default-bil {display: none;}
.default-cep {display: inherit;}
.hero-container {height: auto;}
.hero-mobile {display: inherit; width: 100%;}
.hero-mobile img {width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block;}
.hero-left {display: none;}
.hero-right {display: none;}

/* Mobil menü ikonları */
.icon11,.icon12,.icon13,.icon14,.icon15,.icon16 {display: inline-block;}

/* Ana Div */
.anadiv {width: auto; margin: 0 10px;}
.icerikdiv-1 {padding: 40px 10px; margin: -30px 0 40px 0;}  
.icerikdiv-3 {padding: 40px 10px; margin: 40px 0 40px 0;}
.icerikdiv-2 {margin-bottom: 30px; padding: 10px 10px; background-color: #fff;}
.sol-2 {position: inherit; width: auto; display: none;}
.sag-2 {margin-left: 0; border-radius: 0; padding: 25px 0; border-left: none;} 
}