@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

* 
{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    border: none;
    padding: none;
    font-family: 'Poppins';
}
body {background: #F7F9FB;}
.logo {margin: 50px;}
.side-bar {border-right: 2px solid #F7F9FB; display: flex; width: 300px; height: 954px; background: white; position: absolute;}
.upSideBar {position: relative;}
div.menu {display: flex; flex-direction: column; margin-left: -220px; margin-top: 150px;  padding: 0;}
span.menu-alt-title {color: #969696; font-weight: 400;  font-size: 14px;}
.menu-all {margin-top: 20px;}
.menu-all ul li {transition: .4s all; text-align: center; position: relative; padding: 16px; width: 212px; height: 53px; cursor: pointer; margin-bottom: 10px;}
.menu-all ul li:hover {background: #EBEEF0; border-radius: 8px; transition: .4s all;}
.menu-all ul li img {position: absolute; inset: 20px 0 0 20px;}
.menu-all ul li a {padding: 16px;}

div.hr {display: flex; width: 100%; height: 2px; background: #ddd; flex-direction: column; justify-content: flex-end; margin-top: 130%; margin-bottom: 30px;}


.top-bar {align-items: center; text-align: center;  align-items: center;  width: 1608px; max-width: 1608px; background: white; position: absolute; padding-left: 10px; padding-right: 20px; }
.topBAR {margin-left: 300px; position: relative;}
.user .group_1,
.user .group_2 { margin-right: 40px;}

.searchInput {background: #F7F9FB; outline: none; padding:24px; border-radius: 8px;}

.searchIcon img {margin-top: 16px; margin-left: 15px;}

.group_2::after {content: "1"; position: absolute; display: block; width: 20px; height: 20px; background: red; border-radius: 100px; color: white; top: 2vh; left: 152vh; margin-left: 0; margin-top: 0; font-size: 15px;}

.user-profil {display: inline-flex; text-align: center; padding: 6px 14px; border-radius: 100px;  background: #0085FF1A; color: #0084ff; font-size: 20px;}
.user-name {font-weight: 500;}



section.kargo {display: flex; justify-content: center; margin-top: -40%; margin-left: 24rem;}
.kargo_card_all {display: grid; gap: 12px; grid: 12px; width: auto; grid-template-columns: 1fr 1fr; /* 2 sütun */}
.kargo_card_all .card {width: 520px; height: 171px; border-radius: 8px; margin-right: 100px; }
.kargo_card_all .card_1 {background: #0099FF80;}
.kargo_card_all .card_2 {background: #FFDC72;}

.kargo_card_all .card {display: flex; flex-direction: column; justify-content: center; align-items: center;}
.kargo_card_all .card div {margin-bottom: 20px;}

section.genelBakis {display: flex; user-select: auto !important; display: flex; width: 60%; height: 705px; background-color: #FFFFFF; margin-left: 27%; margin-top: 50px; border-top-left-radius: 12px; box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.08);

box-shadow: 0px 2px 1px 0px rgba(0, 0, 0, 0.06);

box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.1);
}


.genel-bakis .head {font-weight: 500; font-size: 22px; margin: 36px 50px;}

.genel-bakis div.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.genel-bakis div.cards div.card {margin-left: 10%; margin-top: 40px; width: 350px; height: auto; border: 1px solid rgba(235, 238, 240, 1); }
.genel-bakis div.cards div.card span.card-text {display: inline-block; margin: 16px 24px; color: rgba(99, 99, 99, 1);}
.genel-bakis div.cards div.card h1 {font-size: 30px; font-weight: 500; margin: 0 24px;}
.genel-bakis div.cards div.card a {display: inline-block; color: rgba(0, 133, 255, 1); cursor: pointer; padding: 24px; margin-left: 220px;}


.kargo-group {
  display: flex;
  flex-wrap: nowrap;           /* Ekran daralınca alt alta geçer */
  gap: 20px;                 /* Kutular arası boşluk */
  justify-content: center;  /* Ortalamak için */
  padding: 20px;

}



.kargo-olustur,.kargo-hesapla {display: flex; justify-content: center; align-items: center; text-align: center;}
.kargo-olustur div,
.kargo-hesapla div {
  background-color: #0084ff;   /* Görünür olması için */
  width: 520px;            /* Masaüstü görünüm için genişlik */
  height: 171px;           /* Yükseklik */
  border-radius: 8px;
  margin-top: 120px;
}


@media (max-width: 650px) {
  .kargo-olustur,
  .kargo-hesapla {
    width: 100%;
  }
}