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

html,body{
    width: 100%;
    height: 100%;
}

.main {
    min-height: calc(100% - 65px);
    width: 100%;
    margin: auto;
    margin-top: 65px;
    display: flex;
    flex-direction: row;
    justify-content: center;
}

nav.main__navbar {
    width: 260px;
    background: #ffffff;
    height: fit-content;
    position: sticky;
    top: 20px;
}

.main__navbar-head {
    border-bottom: 1px solid #ececec;
    padding: 40px 35px 10px 17px;
    width: 100%;
    font-family: "Source Sans 3", sans-serif;
    font-size: 18px;
    font-weight: 600;
    color: #000000;
    text-align: right;
}

.main__navbar-body {
    display: flex;
    padding: 0;
    width: 100%;
}

.main__categories {
    display: flex;
    flex-direction: column;
    padding: 15px 0px 0 0;
    gap: 1px;
    font-family: "Source Sans 3", sans-serif;
    font-size: 14px;
    line-height: 20px;
    font-weight: 400;
    color: #444;
    width: 100%;
    padding: 15px 10px 0 0;
}

.main__category {
    display: flex;
    gap: 4px;
    flex-direction: row;
    align-items: center;
    cursor: pointer;
    text-decoration: none;
}

.main__category-symbol {
    width: 5px;
    height: 100%;
    order: 2;
    border-radius: 50% 0 0 50%;
}

.main__category-text {
    padding: 6px 30px;
    border-radius: 4px;
    unicode-bidi: isolate;
    font-variant-numeric: tabular-nums;
    text-transform: none;
    text-indent: 0px !important;
    text-align: right;
    text-align-last: auto !important;
    width: calc(100% - 8px);
    text-align: right;
    color: #444;
}

.main__category--selected > .main__category-symbol {
    background: #d0d0d0;
    border-radius: 0 50% 50% 0;
    width: 4px;
}

.main__category--selected > .main__category-text {
    font-weight: 600;
    color: #3b3b3b;
    background: #f4f5f7;
}

.main__category:hover > .main__category-text {
    background: #f4f5f7;
}

.main__area {
    width: 1030px;
    height: fit-content;
    border-left: 1px solid #ececec;
    margin-bottom: 50px;
    padding: 41px;
}

.main__category--opacity > .main__category-text {background: #fff!important;font-size: 12px;color: #333;font-weight: 700;}

.main__category--opacity {
    cursor: unset;
    user-select: none;
    margin-top: 15px;
}

#siparis-wrapper { max-width:600px; margin:auto; background:#fff; padding:20px; border-radius:8px; box-shadow:0 2px 8px rgba(0,0,0,0.1); }

input, button { padding:10px; margin:5px 0; width:100%; box-sizing:border-box; }
button { background:#3498db; color:#fff; border:none; cursor:pointer; border-radius:4px; }
button:hover { background:#2980b9; }

#captcha-wrapper { display:none; margin-top:10px; }
#spinner { display:none; position:fixed; top:0; left:0; width:100%; height:100%; 
    background:rgba(0,0,0,0.5); z-index:9999; text-align:center; }
#spinner div { position:absolute; top:50%; left:50%; transform:translate(-50%, -50%);
    width:50px; height:50px; border:5px solid #f3f3f3; border-top:5px solid #3498db;
    border-radius:50%; animation: spin 1s linear infinite; }
@keyframes spin { 100% { transform: rotate(360deg); } }

.table-responsive { overflow-x:auto; margin-top:20px; animation: fadeIn 0.5s ease-in; }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }

.table { width:100%; border-collapse: collapse; }
.table th, .table td { padding:10px; border:1px solid #ddd; text-align:left; }

@media (max-width: 600px) {
    .table-responsive table, .table-responsive thead, .table-responsive tbody, .table-responsive th, .table-responsive td, .table-responsive tr {
        display:block;
    }
    .table-responsive tr { margin-bottom:15px; border-bottom:1px solid #ccc; }
    .table-responsive td { text-align:right; padding-left:50%; position:relative; }
    .table-responsive td::before { 
        content: attr(data-label); 
        position:absolute; left:10px; width:45%; text-align:left; font-weight:bold; 
    }
}

@media screen and (max-width: 1350px) {
    nav.main__navbar {
    width: 180px;
}

.main__category-text {
    padding: 6px 10px;
}

.main__navbar-head {
    padding: 25px 19px 10px 17px;
    text-align: left;
}

.main__area {
    width: 660px;
}
}


.modal__eczaneler {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 10px;
}

.modal__eczane {
    width: 150px;
    padding: 5px;
    /* border: 1px solid #ececec; */
    display: flex;
    flex-direction: column;
    align-items: center;
}

.eczane__logo {
    width: 100%;
    order: 2;
}

.eczane__logo > svg {
    width: 100%;
    height: 100%;
}

.eczane__logo > svg > path {
    fill: #ee0a1b;
    stroke: none;
}

.eczane__adi {
    font-size: 14px;
    color: #333;
    font-weight: 600;
    order: 1;
}

.eczane__adres {
    font-size: 12px;
    order: 3;
    text-align: center;
    color: #444;
    font-weight: 700;
}

.eczane__tel {
    order: 4;
    font-size: 13px;
}

@media screen and (max-width: 900px){
    nav.main__navbar {
    position: fixed;
    right: 0;
    height: calc(100% - 5px);
    top: 5px;
    background: #fff;
    z-index: 9999999991;
    box-shadow: -1px 0px 3px #0000001f;
    width: fit-content;
    display: none;
}

.main__category-symbol {
    order: unset;
}

.main__category.main__category--selected {
    padding: 0 4px 0 0;
}

.main__category-text {
    text-align: left;
}

.main__area {
    width: 100%;
    padding: 20px 15px;
    zoom: .8;
}

.main__navbar-head {
    border: none;
}
.header{border: none;}
}