* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: Arial, Helvetica, sans-serif;
}

body {
    background: #eef1f5;
    color: #20242b;
    padding-bottom: 90px;
}

button,
input,
select,
textarea {
    font: inherit;
}

button {
    cursor: pointer;
}

/* ANA UYGULAMA */

.app {
    max-width: 760px;
    margin: 0 auto;
    min-height: 100vh;
    background: #f5f6f8;
}

/* ÜST BAŞLIK */

.topbar {
    background: #27b9e6;
    color: white;
    height: 70px;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: none;
    position: sticky;
top: 0;
z-index: 1000;
opacity: 0.78;
}

.topbar h1 {
    font-size: 22px;
    font-weight: 800;
    letter-spacing: .5px;
}

.topbar p {
    font-size: 12px;
    opacity: .75;
    margin-top: 4px;
}

.user-box {
    display: flex;
    align-items: center;
    gap: 9px;
}

.user-box > span {
    width: 40px;
    height: 40px;
    background: rgba(255,255,255,.13);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.user-box div {
    display: flex;
    flex-direction: column;
}

.user-box strong {
    font-size: 13px;
}

.user-box small {
    font-size: 11px;
    opacity: .7;
    margin-top: 2px;
}

/* ÜST İSTATİSTİKLER */

.summary {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    background: white;
    border-bottom: 1px solid #e3e6eb;
}

.summary-item {
    padding: 17px 8px;
    text-align: center;
    position: relative;
}

.summary-item:not(:last-child)::after {
    content: "";
    position: absolute;
    right: 0;
    top: 18%;
    width: 1px;
    height: 64%;
    background: #e4e7eb;
}

.summary-item span {
    display: block;
    color: #737b87;
    font-size: 11px;
    min-height: 27px;
}

.summary-item strong {
    display: block;
    margin-top: 6px;
    font-size: 23px;
    color: #1e2e44;
}

/* BEKLEYEN BAKIM / ARIZA */

.info-row {
    display: flex;
    justify-content: center;
    gap: 18px;
    background: transparent;
    padding: 0 55px 14px;
}

.info-row > div {
    width: 330px;
    padding: 9px 18px;
    box-sizing: border-box;

    background: linear-gradient(to bottom, #ffffff, #f2f2f2);
    border-radius: 12px;
    border-left: 5px solid #666;

    box-shadow: 0 5px 10px rgba(0,0,0,0.14);

    display: flex;
    align-items: center;
    justify-content: space-between;
}

.info-row span {
    font-size: 14px;
    color: #666;
}

.info-row strong {
    font-size: 20px;
    color: #25b9e6;
    margin: 0;
}

/* İÇERİK */

.content {
    padding: 13px;
}

/* DURUM KARTLARI */

/* DURUM KARTLARI - REFERANS GÖRÜNÜM */

/* DURUM KARTLARI - REFERANS GÖRÜNÜM */

.status-card {
    width: 100%;
    min-height: 48px;
    margin-bottom: 6px;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr 58px;
    align-items: center;
    background: linear-gradient(100deg, #ffffff, #eeeeee);
    color: #333;
    border: none;
    border-radius: 0 25px 25px 0;
    box-shadow: 0 5px 12px rgba(0,0,0,.16);
    overflow: hidden;
    text-align: left;
}

.status-card.red {
    border-left: 7px solid #ed1c24;
}

.status-card.blue {
    border-left: 7px solid #2eb4df;
}

.status-card.dark {
    border-left: 7px solid #555;
}

.status-card div {
    display: flex;
    flex-direction: column;
    padding-left: 18px;
}

.status-card strong {
    font-size: 15px;
    color: #333;
    letter-spacing: 0;
}

.status-card small {
    margin-top: 4px;
    font-size: 12px;
    color: #666;
}

.status-card > b {
    border-radius: 0 50px 50px 0;
    width: 80px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    color: white;
    justify-self: end;
}

.status-card.red > b {
    background: #ed111c;
}

.status-card.blue > b {
    background: #2eb4df;
}

.status-card.dark > b {
    background: #4a4a4a;
}

.status-icon {
    display: none;
}

/* 4 ANA BUTON */

.action-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-top: 4px;
    margin-bottom: 85px;
}

.action {
    height: 70px;
    border: none;
    border-radius: 8px;
    background: linear-gradient(135deg, #3c5268, #26394d);
    color: white;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,.16);
}

.action span {
    font-size: 27px;
}

.action strong {
    font-size: 14px;
}

.action.maintenance {
    background: linear-gradient(135deg, #188cd1, #0872b6);
}

.action.fault {
    background: linear-gradient(135deg, #f04d56, #d63843);
}

/* ALT SABİT MENÜ */

.bottom-nav {
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 760px;
    height: 72px;
    background: white;
    border-top: 1px solid #dfe3e8;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    z-index: 50;
    box-shadow: 0 -2px 10px rgba(0,0,0,.06);
}

.bottom-nav button {
    border: none;
    background: white;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    color: #536171;
}

.bottom-nav button span {
    font-size: 23px;
}

.bottom-nav button small {
    font-size: 11px;
    font-weight: bold;
}

/* ALT SAYFALAR */

.page {
    position: fixed;
    inset: 0;
    z-index: 100;
    background: #f3f5f7;
    overflow-y: auto;
}

.hidden {
    display: none;
}

.page-header {
    max-width: 760px;
    margin: auto;
    min-height: 75px;
    background: linear-gradient(135deg, #182a42, #243b59);
    color: white;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
}

.page-header h2 {
    font-size: 20px;
}

.page-header p {
    font-size: 11px;
    opacity: .7;
    margin-top: 3px;
}

.back-button {
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 50%;
    background: rgba(255,255,255,.13);
    color: white;
    font-size: 23px;
}

/* BİNA EKLE FORMU */

.form-container {
    max-width: 720px;
    margin: 16px auto 40px;
    background: white;
    border-radius: 9px;
    padding: 20px;
    box-shadow: 0 2px 8px rgba(0,0,0,.07);
}

.form-container label {
    display: block;
    color: #394554;
    font-size: 13px;
    font-weight: bold;
    margin-bottom: 17px;
}

.form-container input,
.form-container select,
.form-container textarea {
    display: block;
    width: 100%;
    margin-top: 7px;
    border: 1px solid #d5dae0;
    border-radius: 6px;
    padding: 12px;
    outline: none;
    background: white;
}

.form-container input:focus,
.form-container select:focus,
.form-container textarea:focus {
    border-color: #208ed0;
    box-shadow: 0 0 0 3px rgba(32,142,208,.10);
}

.form-container textarea {
    min-height: 85px;
    resize: vertical;
}

.money-input {
    position: relative;
}

.money-input input {
    padding-right: 45px;
}

.money-input span {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    font-weight: bold;
    color: #697483;
}

.save-button {
    width: 100%;
    border: none;
    border-radius: 6px;
    padding: 14px;
    background: #1689cc;
    color: white;
    font-weight: bold;
    font-size: 14px;
}

/* BİNALAR */

.building-page {
    max-width: 720px;
    margin: 15px auto 40px;
    padding: 0 12px;
}

.search-input {
    width: 100%;
    background: white;
    border: 1px solid #d9dee4;
    border-radius: 7px;
    padding: 13px;
    margin-bottom: 12px;
    outline: none;
}

.building-card {
    background: white;
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 10px;
    box-shadow: 0 2px 7px rgba(0,0,0,.07);
}

/* TELEFON */

@media (max-width: 600px) {

    body {
        background: #f5f6f8;
    }

    .topbar {
        padding: 18px 14px;
    }

    .topbar h1 {
        font-size: 18px;
    }

    .topbar p {
        font-size: 10px;
    }

    .user-box strong {
        font-size: 11px;
    }

    .summary-item {
        padding: 14px 5px;
    }

    .summary-item span {
        font-size: 9px;
    }

    .summary-item strong {
        font-size: 20px;
    }

    .content {
        padding: 9px;
    }

    .status-card {
        min-height: 65px;
        margin-bottom: 7px;
    }

    .action-grid {
        gap: 8px;
    }

    .form-container {
        margin: 10px;
        padding: 16px;
    }
}
/* =========================================
   YENİ BİNALAR SAYFASI
========================================= */

.buildings-header {
    max-width: 760px;
    margin: 0 auto;
    height: 82px;
    background: linear-gradient(180deg, #59c8f2 0%, #3385a7 100%);
    color: white;

    display: grid;
    grid-template-columns: 60px 1fr 60px;
    align-items: center;

    padding: 0 18px;

    position: sticky;
    top: 0;
    z-index: 20;

    box-shadow: 0 2px 8px rgba(0,0,0,.10);
}

.buildings-header h2 {
    text-align: center;
    font-size: 22px;
    font-weight: 700;
}

.buildings-back,
.buildings-sort {
    width: 46px;
    height: 46px;

    border: none;
    border-radius: 50%;

    background: rgba(16, 77, 103, .55);
    color: white;

    font-size: 25px;

    display: flex;
    align-items: center;
    justify-content: center;
}

.buildings-sort {
    font-size: 21px;
}


/* ANA ALAN */

.buildings-container {
    max-width: 760px;
    margin: 0 auto;

    padding: 22px 18px 40px;

    background: #f4f7fa;

    min-height: calc(100vh - 82px);
}


/* BÖLGE SEÇİMİ */

.region-filter {
    height: 67px;

    background: white;

    border: 1px solid #dce5ed;
    border-radius: 15px;

    display: flex;
    align-items: center;

    position: relative;

    margin-bottom: 20px;

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

.region-filter select {
    width: 100%;
    height: 100%;

    border: none;
    outline: none;

    background: transparent;

    appearance: none;

    padding: 0 150px 0 20px;

    font-size: 18px;
    font-weight: 600;

    color: #29354a;

    cursor: pointer;
}

.region-filter::after {
    content: "⌄";

    position: absolute;
    right: 19px;

    font-size: 23px;
    color: #62718a;

    pointer-events: none;
}

#binaSayisiFiltre {
    position: absolute;
    right: 48px;

    font-size: 14px;
    font-weight: 600;

    color: #76849a;

    pointer-events: none;
}


/* TÜM BİNALAR / SORUMLU OLDUKLARIM */

.building-tabs {
    background: white;

    border: 1px solid #dce5ed;
    border-radius: 15px;

    padding: 7px;

    display: grid;
    grid-template-columns: 1fr 1fr;

    margin-bottom: 20px;

    min-height: 65px;
}

.building-tab {
    border: none;
    background: transparent;

    border-radius: 11px;

    color: #66748c;

    font-size: 16px;
    font-weight: 700;
}

.building-tab.active {
    background: #5cc4ee;
    color: white;

    box-shadow: 0 2px 6px rgba(46,164,214,.20);
}


/* ARAMA */

.building-search {
    height: 67px;

    background: white;

    border: 1px solid #dce5ed;
    border-radius: 15px;

    display: flex;
    align-items: center;

    padding: 0 20px;

    margin-bottom: 22px;
}

.building-search span {
    font-size: 31px;
    color: #a8b0ba;

    margin-right: 13px;

    transform: rotate(-20deg);
}

.building-search input {
    width: 100%;

    border: none;
    outline: none;

    font-size: 17px;

    color: #29354a;
    background: transparent;
}

.building-search input::placeholder {
    color: #aeb4bd;
}


/* BİNA LİSTESİ */

.building-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}


/* HER BİR BİNA */

.building-card {
    min-height: 100px;

    background: white;

    border-radius: 16px;

    padding: 17px 18px;

    display: grid;
    grid-template-columns: 60px 1fr;
    align-items: center;

    margin: 0;

    border: 1px solid #edf0f3;

    box-shadow: 0 3px 10px rgba(44,62,80,.04);

    cursor: pointer;

    transition:
        transform .12s ease,
        box-shadow .12s ease;
}

.building-card:active {
    transform: scale(.99);
}


/* BİNA İKONU */

.building-card::before {
    content: "🏢";

    width: 48px;
    height: 48px;

    border-radius: 12px;

    background: #f6f8fa;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 24px;
}


/* KART YAZILARI */

.building-card h3 {
    font-size: 18px;

    color: #263247;

    margin-bottom: 7px;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.building-card p {
    color: #708098;

    font-size: 13px;

    margin: 3px 0;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.building-card p strong {
    color: #64748b;
}


/* TELEFON */

@media (max-width: 600px) {

    .buildings-header {
        height: 75px;
        padding: 0 14px;
    }

    .buildings-header h2 {
        font-size: 20px;
    }

    .buildings-back,
    .buildings-sort {
        width: 43px;
        height: 43px;
    }

    .buildings-container {
        padding: 18px 14px 35px;
    }

    .region-filter,
    .building-search {
        height: 62px;
    }

    .region-filter select {
        font-size: 16px;
        padding-left: 17px;
        padding-right: 125px;
    }

    #binaSayisiFiltre {
        font-size: 12px;
        right: 43px;
    }

    .building-tabs {
        min-height: 60px;
    }

    .building-tab {
        font-size: 14px;
    }

    .building-card {
        min-height: 92px;

        grid-template-columns: 55px 1fr;

        padding: 14px;
    }

    .building-card::before {
        width: 44px;
        height: 44px;

        font-size: 21px;
    }

    .building-card h3 {
        font-size: 16px;
    }

    .building-card p {
        font-size: 12px;
    }
}
/* =========================================
   AL-KA BİNA DETAY EKRANI
========================================= */

.alka-detail-header {
    max-width: 760px;
    margin: 0 auto;
    min-height: 92px;
    padding: 16px 20px;

    background: linear-gradient(135deg, #14263c, #244b69);
    color: white;

    display: grid;
    grid-template-columns: 50px 1fr 50px;
    align-items: center;

    position: sticky;
    top: 0;
    z-index: 20;

    box-shadow: 0 3px 12px rgba(0,0,0,.15);
}

.alka-detail-header > div {
    text-align: center;
}

.alka-detail-header small {
    display: block;
    font-size: 10px;
    letter-spacing: 1.5px;
    opacity: .65;
    margin-bottom: 4px;
}

.alka-detail-header h2 {
    font-size: 20px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.alka-back,
.alka-menu-button {
    width: 42px;
    height: 42px;
    border: none;
    border-radius: 50%;

    background: rgba(255,255,255,.12);
    color: white;

    font-size: 23px;

    display: flex;
    align-items: center;
    justify-content: center;
}


/* ANA DETAY ALANI */

.alka-detail-container {
    max-width: 760px;
    min-height: calc(100vh - 92px);

    margin: 0 auto;
    padding: 16px 16px 45px;

    background: #f2f5f8;
}


/* BİNA PROFİL KARTI */

.building-profile {
    background: white;
    border-radius: 18px;

    padding: 20px;

    box-shadow: 0 4px 16px rgba(35,55,75,.07);

    margin-bottom: 14px;
}

.building-profile-top {
    display: flex;
    align-items: center;
    gap: 15px;

    padding-bottom: 17px;

    border-bottom: 1px solid #edf0f3;
}

.building-big-icon {
    width: 62px;
    height: 62px;

    border-radius: 17px;

    background: #e8f5fb;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 31px;

    flex-shrink: 0;
}

.building-main-info {
    min-width: 0;
}

.building-main-info h2 {
    color: #202e41;

    font-size: 21px;

    margin-bottom: 7px;
}

.building-main-info p {
    color: #7a8799;

    font-size: 12px;
    line-height: 1.5;
}


/* YÖNETİCİ */

.manager-line {
    padding-top: 17px;

    display: flex;
    justify-content: space-between;
    align-items: center;

    gap: 15px;
}

.manager-line > div:first-child {
    display: flex;
    flex-direction: column;
}

.manager-line small {
    color: #8c97a6;
    font-size: 10px;

    margin-bottom: 4px;
}

.manager-line strong {
    color: #27364a;

    font-size: 14px;
}

.contact-buttons {
    display: flex;
    gap: 7px;
}

.contact-buttons a {
    text-decoration: none;

    height: 36px;

    padding: 0 12px;

    border-radius: 9px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    color: white;

    font-size: 11px;
    font-weight: bold;
}

.contact-call {
    background: #278bc2;
}

.contact-whatsapp {
    background: #27a96b;
}


/* DURUM ÖZETİ */

.building-status-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);

    gap: 8px;

    margin-bottom: 17px;
}

.building-status-box {
    background: white;

    min-height: 100px;

    border-radius: 15px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    box-shadow: 0 3px 12px rgba(35,55,75,.05);
}

.building-status-box span {
    font-size: 21px;
    margin-bottom: 7px;
}

.building-status-box strong {
    color: #233348;

    font-size: 16px;
}

.building-status-box small {
    color: #8995a5;

    font-size: 9px;

    margin-top: 4px;
}


/* BÖLÜM */

.detail-section {
    margin-bottom: 17px;
}

.detail-section-title {
    color: #4d5d70;

    font-size: 12px;
    font-weight: 800;

    margin: 0 5px 9px;

    text-transform: uppercase;

    letter-spacing: .6px;
}


/* HIZLI İŞLEMLER */

.quick-actions {
    display: grid;
    grid-template-columns: repeat(4, 1fr);

    gap: 8px;
}

.quick-action {
    min-height: 77px;

    border: none;
    border-radius: 13px;

    color: white;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    gap: 7px;

    font-size: 10px;
    font-weight: bold;

    box-shadow: 0 3px 9px rgba(0,0,0,.08);
}

.quick-action span {
    font-size: 20px;
}

.quick-action.maintenance {
    background: #268cc4;
}

.quick-action.fault {
    background: #df4a51;
}

.quick-action.part {
    background: #556a7f;
}

.quick-action.payment {
    background: #29a66c;
}


/* MALİ ÖZET */

.financial-summary {
    background: #182b40;

    color: white;

    border-radius: 15px;

    display: grid;
    grid-template-columns: 1fr 1fr;

    margin-bottom: 18px;

    overflow: hidden;
}

.financial-summary > div {
    padding: 16px 18px;
}

.financial-summary > div:first-child {
    border-right: 1px solid rgba(255,255,255,.12);
}

.financial-summary small {
    display: block;

    font-size: 9px;

    opacity: .65;

    margin-bottom: 6px;
}

.financial-summary strong {
    font-size: 18px;
}


/* BİNA İŞLEMLERİ */

.detail-menu-new {
    display: grid;
    grid-template-columns: 1fr 1fr;

    gap: 9px;
}

.detail-menu-new button {
    min-height: 82px;

    background: white;

    border: 1px solid #e8edf2;
    border-radius: 14px;

    display: grid;
    grid-template-columns: 42px 1fr 15px;

    align-items: center;

    text-align: left;

    padding: 12px;

    box-shadow: 0 3px 10px rgba(35,55,75,.04);
}

.detail-menu-icon {
    width: 35px;
    height: 35px;

    border-radius: 10px;

    background: #edf6fb;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 18px;
}

.detail-menu-new button div {
    min-width: 0;
}

.detail-menu-new strong {
    display: block;

    color: #29384c;

    font-size: 12px;

    margin-bottom: 4px;
}

.detail-menu-new small {
    display: block;

    color: #909baa;

    font-size: 9px;
    line-height: 1.3;
}

.detail-menu-new b {
    color: #9ba6b3;

    font-size: 20px;
}


/* BİNA NOTU */

.building-note {
    background: #fffbea;

    border: 1px solid #f0e6ae;
    border-radius: 14px;

    padding: 16px;
}

.building-note > div {
    display: flex;
    gap: 7px;
    align-items: center;

    color: #665b2c;

    font-size: 12px;

    margin-bottom: 8px;
}

.building-note p {
    color: #81764c;

    font-size: 11px;
    line-height: 1.5;
}


/* TELEFON */

@media(max-width: 600px) {

    .alka-detail-header {
        min-height: 82px;
        padding: 13px;
    }

    .alka-detail-header h2 {
        font-size: 17px;
    }

    .alka-detail-container {
        padding: 12px 11px 35px;
    }

    .building-profile {
        padding: 16px;
    }

    .building-big-icon {
        width: 55px;
        height: 55px;

        font-size: 27px;
    }

    .building-main-info h2 {
        font-size: 18px;
    }

    .building-status-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .quick-actions {
        grid-template-columns: repeat(2, 1fr);
    }

    .quick-action {
        min-height: 70px;
    }

    .detail-menu-new {
        grid-template-columns: 1fr;
    }

    .manager-line {
        align-items: flex-start;
        flex-direction: column;
    }
}
/* YENİ ASANSÖR FORMU */

#yeniAsansorSayfa .detail-section {
    max-width: 600px;
    margin: 20px auto;
    padding: 25px;
    box-sizing: border-box;
}

#yeniAsansorSayfa .detail-section label {
    display: block;
    margin: 14px 0 6px;
    font-weight: 600;
}

#yeniAsansorSayfa .detail-section input,
#yeniAsansorSayfa .detail-section select,
#yeniAsansorSayfa .detail-section textarea {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 12px;
    border: 1px solid #d5dbe3;
    border-radius: 8px;
    font-size: 15px;
}

#yeniAsansorSayfa .detail-section textarea {
    min-height: 90px;
}
#yeniAsansorSayfa .detail-section {
    display: flex !important;
    flex-direction: column !important;
}

#yeniAsansorSayfa .detail-section label,
#yeniAsansorSayfa .detail-section input,
#yeniAsansorSayfa .detail-section select,
#yeniAsansorSayfa .detail-section textarea {
    width: 100% !important;
    display: block !important;
    float: none !important;
}
/* ASANSÖR YÖNETİMİ KART GÖRÜNÜMÜ */

#asansorlerSayfa .detail-section {
    background: white;
    border-radius: 16px;
    padding: 22px;
    margin-top: 18px;
    box-shadow: 0 4px 18px rgba(0,0,0,0.08);
}

#asansorlerSayfa .detail-section-title {
    font-size: 18px;
    font-weight: 700;
    color: #123d63;
    padding-bottom: 12px;
    margin-bottom: 15px;
    border-bottom: 1px solid #e5e7eb;
}

#asansorlerSayfa .maintenance-note {
    background: white;
    border-radius: 16px;
    padding: 22px;
    margin-top: 18px;
    box-shadow: 0 4px 18px rgba(0,0,0,0.08);
    line-height: 1.7;
}
/* ARIZA EKLE SAYFASI */

#arizaEkleSayfa .alka-detail-container {
    max-width: 650px;
    margin: 0 auto;
    padding: 20px;
}

#arizaEkleSayfa .detail-section {
    background: white;
    border-radius: 18px;
    padding: 28px;
    box-shadow: 0 4px 18px rgba(0,0,0,0.08);
}

#arizaEkleSayfa .detail-section-title {
    text-align: center;
    font-size: 22px;
    font-weight: 700;
    color: #123d68;
    margin-bottom: 25px;
}

#arizaEkleSayfa label {
    display: block;
    font-size: 15px;
    font-weight: 600;
    color: #263747;
    margin-top: 16px;
    margin-bottom: 7px;
}

#arizaEkleSayfa select,
#arizaEkleSayfa textarea {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 14px 15px;
    border: 1px solid #d7dee7;
    border-radius: 11px;
    background: white;
    font-size: 15px;
    color: #263747;
}

#arizaEkleSayfa textarea {
    min-height: 135px;
    resize: vertical;
    font-family: inherit;
}

#arizaEkleSayfa #arizaFotograflar {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 12px;
    border: 1px dashed #cbd5e1;
    border-radius: 11px;
    background: #f8fafc;
}

#arizaEkleSayfa #arizaKaydetBtn {
    display: block;
    width: 100%;
    border: none;
    border-radius: 11px;
    padding: 16px;
    margin-top: 22px !important;
    background: #e53935;
    color: white;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    box-sizing: border-box;
}
/* ARIZALAR / ONARIMLAR SAYFASI */

#arizalarSayfa .alka-detail-container {
    max-width: 850px;
    margin: 0 auto;
    padding: 22px;
}

#arizalarSayfa .ariza-tabs {
    display: flex;
    width: 100%;
    background: #e9eef3;
    border-radius: 25px;
    overflow: hidden;
    margin-bottom: 20px;
}

#arizalarSayfa .ariza-tab {
    width: 50%;
    padding: 13px;
    border: none;
    background: transparent;
    font-size: 15px;
    cursor: pointer;
}

#arizalarSayfa .ariza-tab.active {
    background: #e53935;
    color: white;
    border-radius: 25px;
    font-weight: 700;
}

#arizalarSayfa #arizaAra,
#arizalarSayfa #arizaFiltre {
    width: 100%;
    box-sizing: border-box;
    padding: 12px 14px;
    border: 1px solid #d5dce5;
    border-radius: 8px;
    background: white;
    font-size: 14px;
    margin-bottom: 10px;
}

#arizalarSayfa #arizaListesi {
    margin-top: 8px;
}

#arizalarSayfa #arizaListesi > div {
    display: grid;
    grid-template-columns: 1fr 140px;
    gap: 20px;
    align-items: center;
    background: white;
    border: 1px solid #e3e7eb;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 12px;
    box-shadow: 0 3px 12px rgba(0,0,0,0.06);
}

#arizalarSayfa #arizaListesi strong {
    display: block;
    font-size: 17px;
    color: #263747;
    margin-bottom: 8px;
}

#arizalarSayfa #arizaListesi p {
    margin: 4px 0;
    font-size: 14px;
    color: #586574;
}

#arizalarSayfa #arizaListesi > div > div:last-child {
    text-align: center;
}

#arizalarSayfa #arizaListesi small {
    display: block;
    color: #64748b;
    margin-bottom: 8px;
}

#arizalarSayfa #arizaListesi button {
    display: block;
    width: 100%;
    border: none;
    border-radius: 7px;
    padding: 8px 5px;
    margin: 6px 0;
    font-weight: 600;
    cursor: pointer;
}

#arizalarSayfa #arizaListesi button:nth-of-type(1) {
    background: #f59e0b;
    color: white;
}

#arizalarSayfa #arizaListesi button:nth-of-type(2) {
    background: #38a169;
    color: white;
}

#arizalarSayfa #arizaListesi button:nth-of-type(3) {
    background: #17212b;
    color: white;
}

#arizalarSayfa #arizaListesi button:nth-of-type(4) {
    background: #247ba0;
    color: white;
}
#arizalarSayfa #arizaListesi .arizaSilBtn {
    background: #d1d5db;
    color: #6b7280;
    margin-top: 14px;
}
/* ARIZA NOT KUTUSU */
#arizalarSayfa .ariza-not-kutusu {
    display: inline-block;
    margin-top: 10px;
    padding: 10px 14px;
    background: #fff8e8;
    border: 1px solid #f0c36d;
    border-radius: 10px;
    min-width: 220px;
    box-sizing: border-box;
}

#arizalarSayfa .ariza-not-kutusu strong {
    display: block;
    color: #c87900;
    margin-bottom: 5px;
}

#arizalarSayfa .ariza-not-kutusu div {
    color: #333;
    margin-bottom: 8px;
}

#arizalarSayfa .ariza-not-kutusu small {
    display: block;
    color: #777;
}
/* ONARIM KAYITLARI */

#arizalarSayfa .onarim-karti {
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 18px;
    margin-bottom: 15px;
    box-shadow: 0 3px 10px rgba(0,0,0,0.06);
}
/* YENİ ANA SAYFA - ÜST GÖSTERGELER */

.summary {
    background: #f5f5f5;
    padding: 28x 20px 8px;
    text-align: center;
}

.summary-circles {
    display: flex;
    justify-content: center;
    gap: 22px;
}

.summary-circle {
    width: 125px;
    height: 125px;
    border-radius: 50%;
    background: #ffffff;
    border: 1px solid #dddddd;
    border-top: 7px solid #20b9e7;
    box-shadow: 0 4px 12px rgba(0,0,0,0.10);

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.summary-circle strong {
    font-size: 30px;
    color: #333;
    margin-bottom: 5px;
}

.summary-circle span {
    font-size: 14px;
    line-height: 18px;
    color: #555;
}

.summary-building {
    margin-top: 10px;
    display: flex;
    justify-content: center;
    gap: 5px;
    font-size: 16px;
    color: #333;
}

.summary-building strong {
    font-size: 16px;
}

.summary-building span {
    font-weight: 700;
}
/* ÜST YUVARLAKLAR */

.summary {
    padding: 20px 0 5px;
}

.summary-circles {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 22px;
    width: 100%;
}

.summary-circle {
    width: 135px;
    height: 135px;
    flex: 0 0 135px;

    border-radius: 50%;

    background:
        linear-gradient(145deg, #ffffff 20%, #f4f4f4 70%, #dddddd 100%);

    border: 1px solid #d8d8d8;
    border-top: 8px solid #29b9e6;

    box-shadow:
        0 8px 14px rgba(0, 0, 0, 0.18),
        inset 0 2px 4px rgba(255, 255, 255, 0.9);

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    text-align: center;
    box-sizing: border-box;
    margin-bottom: -15px;
}

.summary-circle strong {
    font-size: 30px;
    font-weight: 400;
    line-height: 1;
    color: #444;
    margin-bottom: 9px;
}

.summary-circle span {
    font-size: 16px;
    font-weight: 400;
    line-height: 21px;
    color: #555;
}
.summary {
    padding: 22px 0 12px;
}

.summary-circles {
    gap: 8px;
}

.summary-circle {
    width: 135px;
    height: 135px;
    flex: 0 0 135px;
}
.summary {
    display: flex;
    justify-content: center;
    padding: 25px 0 18px;
}

.summary-circles {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
}

.summary-circle {
    width: 150px;
    height: 150px;
    flex: 0 0 150px;

    border-radius: 50%;

    background:
        linear-gradient(145deg, #ffffff 20%, #eeeeec 100%);

    border: 1px solid #e1e1df;
    border-top: 8px solid #29b9e5;

    box-shadow:
        0 8px 13px rgba(0,0,0,0.14),
        inset 0 2px 3px rgba(255,255,255,0.9);

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    text-align: center;
}

.summary-circle strong {
    font-size: 30px;
    font-weight: 400;
    color: #333;
    margin-bottom: 7px;
}

.summary-circle span {
    font-size: 16px;
    line-height: 21px;
    font-weight: 400;
    color: #555;
}
/* BEKLEYEN BAKIM - ATANAN ARIZA REFERANS GÖRÜNÜM */
.info-row {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 22px;
    padding: 0 70px 18px;
    background: transparent;
}

.info-row > div {
    width: 310px;
    height: 45px;
    padding: 0 18px;

    background: linear-gradient(180deg, #ffffff, #f2f2f0);
    border-radius: 11px;
    border: 1px solid #e1e1df;
    border-left: 5px solid #666;

    box-shadow: 0 4px 8px rgba(0,0,0,0.12);

    display: flex;
    align-items: center;
    justify-content: space-between;
}

.info-row span {
    font-size: 14px;
    color: #555;
}

.info-row strong {
    font-size: 20px;
    font-weight: 700;
    color: #28b9e6;
    margin: 0;
}
.ana-logo {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 5px 0 0;
}

.ana-logo img {
    width: 180px;
    height: auto;
    object-fit: contain;
}
.ana-logo {
    padding: 5px 0 0;
    margin-bottom: -35px;
}
/* ANA SAYFA ARKA PLANINI TEK RENK YAP */
.app,
.content,
.summary {
    background: #f5f6f8 !important;
}
/* YUVARLAKLARIN ALTINDAKİ ÇİZGİLERİ KALDIR */
.summary {
    border: none !important;
    border-bottom: none !important;
    box-shadow: none !important;
}

.summary-circles {
    border: none !important;
    border-bottom: none !important;
}

.waiting-row {
    border: none !important;
    border-top: none !important;
}


/* ===== ANA SAYFA 4 ANA ISLEM BUTONU - DUZELTILMIS ===== */
.action-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 10px !important;
    margin: 8px 10px 85px !important;
}

.action {
    width: 100% !important;
    min-width: 0 !important;
    height: 96px !important;
    border-radius: 12px !important;
    padding: 0 !important;
    box-shadow: 0 5px 10px rgba(0,0,0,.20) !important;
}

.action span {
    font-size: 29px !important;
}

.action strong {
    font-size: 13px !important;
    white-space: nowrap !important;
}

.action.maintenance {
    background: linear-gradient(180deg,#35c6ee,#1fa7d5) !important;
}

.action.fault {
    background: linear-gradient(180deg,#ff2929,#df1018) !important;
}

/* Referanstaki gibi 7 satiri biraz daha kompakt tutup 4 butona yer ac */
@media (max-width: 600px) {
    .status-card {
        min-height: 50px !important;
        margin-bottom: 6px !important;
    }

    .action-grid {
        gap: 6px !important;
        margin-left: 7px !important;
        margin-right: 7px !important;
    }

    .action {
        height: 82px !important;
    }

    .action span {
        font-size: 24px !important;
    }

    .action strong {
        font-size: 10px !important;
    }
}


/* ===== ANA SAYFA EKRANA SIGDIRMA - SON DUZELTME ===== */
@media (min-width: 601px) {
    .ana-logo { margin-bottom: -48px !important; }
    .summary { padding-top: 12px !important; padding-bottom: 8px !important; }
    .summary-circle {
        width: 130px !important; height: 130px !important; flex-basis: 130px !important;
    }
    .info-row { padding-bottom: 10px !important; }
    .content { padding-top: 6px !important; }
    .status-card {
        min-height: 43px !important; height: 43px !important; margin-bottom: 5px !important;
    }
    .status-card > b { height: 43px !important; }
    .action-grid { margin-top: 5px !important; margin-bottom: 78px !important; }
    .action { height: 82px !important; }
}
.action-grid {
    margin-top: 22px !important;
}
.info-row {
    margin-top: 20px !important;
}
.action-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 10px !important;
    margin: 20px 20px 40px !important;
}

.action {
    height: 90px !important;
    border-radius: 12px !important;
    border: none !important;
    box-shadow: 0 5px 12px rgba(0, 0, 0, 0.22) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 9px !important;
    color: white !important;
    background: linear-gradient(135deg, #45586d, #29394b) !important;
}

.action.maintenance {
    background: linear-gradient(135deg, #62c3e8, #3aa9d3) !important;
}

.action.fault {
    background: linear-gradient(135deg, #f0443b, #d92c25) !important;
}

.action span {
    font-size: 28px !important;
    line-height: 1 !important;
}

.action strong {
    font-size: 13px !important;
    font-weight: 700 !important;
    color: white !important;
}
.action-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 14px !important;
    margin: 20px 0 40px !important;
}

.action {
    height: 115px !important;
    border-radius: 14px !important;
    border: none !important;
    padding: 0 !important;
    box-shadow: 0 5px 10px rgba(0,0,0,.25) !important;

    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 13px !important;

    background: linear-gradient(180deg,#414141,#292929) !important;
}

.action.maintenance {
    background: linear-gradient(180deg,#35c8ee,#20a9d5) !important;
}

.action.fault {
    background: linear-gradient(180deg,#ff2525,#e10d14) !important;
}

.action span {
    font-size: 36px !important;
    line-height: 1 !important;
}

.action strong {
    font-size: 15px !important;
    font-weight: 500 !important;
    color: white !important;
}
.action-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 14px !important;
    margin: 20px 0 40px !important;
}

.action {
    height: 115px !important;
    border: 0 !important;
    border-radius: 13px !important;
    color: #fff !important;
    box-shadow:
        0 5px 8px rgba(0,0,0,.28),
        inset 0 1px 0 rgba(255,255,255,.18) !important;
}

/* BAKIM - TURKUAZ */
.action.maintenance {
    background: linear-gradient(
        180deg,
        #27c7ef 0%,
        #12acd8 55%,
        #0796c2 100%
    ) !important;
}

/* ARIZA - CANLI KIRMIZI */
.action.fault {
    background: linear-gradient(
        180deg,
        #ff2929 0%,
        #f10e16 55%,
        #d90008 100%
    ) !important;
}

/* PARÇA + BİNA - KOYU GRİ */
.action.part,
.action.building {
    background: linear-gradient(
        180deg,
        #444444 0%,
        #303030 55%,
        #222222 100%
    ) !important;
}

.action-icon {
    display: block !important;
    color: white !important;
    font-size: 31px !important;
    font-family: Arial, sans-serif !important;
    font-weight: bold !important;
    line-height: 32px !important;
    filter: none !important;
}

.action strong {
    color: white !important;
    font-size: 15px !important;
    font-weight: 500 !important;
}
.action-img {
    width: 42px;
    height: 42px;
    object-fit: contain;
}
/* Bakım Başlat görseli */
.action.maintenance .action-img {
    width: 64px !important;
    height: 64px !important;
    object-fit: contain !important;
    margin: 0 !important;
}

/* 4 butondaki ikon-yazı düzeni aynı olsun */
.action {
    gap: 8px !important;
}

.action strong {
    font-size: 15px !important;
    line-height: 18px !important;
    margin: 0 !important;
}
.action-img {
    width: 64px !important;
    height: 64px !important;
    object-fit: contain !important;
    margin: 0 !important;
}
.action-svg {
    width: 52px !important;
    height: 52px !important;

    fill: none !important;
    stroke: #ffffff !important;
    stroke-width: 3 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;

    display: block !important;
    flex-shrink: 0 !important;
}

.action {
    gap: 7px !important;
}

.action strong {
    color: #ffffff !important;
    font-size: 15px !important;
    line-height: 18px !important;
    font-weight: 500 !important;
}
/* ===== AL-KA PREMIUM ANA BUTONLAR ===== */

.action-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 14px !important;
    margin: 20px 0 40px !important;
}

.action {
    height: 120px !important;
    border-radius: 18px !important;
    border: 2px solid rgba(0,0,0,.22) !important;

    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 8px !important;

    color: white !important;

    box-shadow:
        0 7px 10px rgba(0,0,0,.28),
        inset 0 3px 3px rgba(255,255,255,.30),
        inset 0 -5px 7px rgba(0,0,0,.20) !important;

    transition: transform .15s ease, box-shadow .15s ease !important;
}

/* MAVİ */
.action.maintenance {
    background:
        linear-gradient(
            180deg,
            #35c9ff 0%,
            #129ee5 50%,
            #0877c9 100%
        ) !important;

    border-color: #0785d1 !important;
}

/* KIRMIZI */
.action.fault {
    background:
        linear-gradient(
            180deg,
            #ff3c39 0%,
            #ed1c1c 50%,
            #bd1010 100%
        ) !important;

    border-color: #c61616 !important;
}

/* SİYAH */
.action.part,
.action.building {
    background:
        linear-gradient(
            180deg,
            #3e444b 0%,
            #24272b 50%,
            #111315 100%
        ) !important;

    border-color: #17191c !important;
}

/* BEYAZ PROFESYONEL İKON */
.action .action-svg {
    width: 58px !important;
    height: 58px !important;

    filter:
        drop-shadow(0 2px 2px rgba(0,0,0,.30))
        drop-shadow(0 0 3px rgba(255,255,255,.30)) !important;
}

.action .action-svg,
.action .action-svg * {
    fill: none !important;
    stroke: white !important;
    stroke-width: 3.5px !important;
}

/* YAZILAR */
.action strong {
    color: white !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    line-height: 18px !important;

    text-shadow: 0 2px 2px rgba(0,0,0,.25) !important;
}

/* TIKLAYINCA HAFİF BASILMA */
.action:active {
    transform: translateY(2px) scale(.98) !important;

    box-shadow:
        0 3px 6px rgba(0,0,0,.25),
        inset 0 3px 6px rgba(0,0,0,.18) !important;
}
/* ===== PREMIUM 4 ANA BUTON ===== */

.action-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 14px !important;
    margin: 20px 0 40px !important;
}

.action {
    height: 125px !important;
    border-radius: 20px !important;
    position: relative !important;
    overflow: hidden !important;
    gap: 7px !important;

    border: 3px solid rgba(0,0,0,.22) !important;

    box-shadow:
        0 9px 12px rgba(0,0,0,.28),
        inset 0 3px 2px rgba(255,255,255,.38),
        inset 0 -7px 8px rgba(0,0,0,.24) !important;
}

/* ÜSTTEKİ PARLAK/CAM GÖRÜNÜM */
.action::before {
    content: "" !important;
    position: absolute !important;
    left: 5px !important;
    right: 5px !important;
    top: 4px !important;
    height: 45% !important;
    border-radius: 15px 15px 45% 45% !important;

    background: linear-gradient(
        180deg,
        rgba(255,255,255,.30),
        rgba(255,255,255,.08),
        transparent
    ) !important;

    pointer-events: none !important;
}

/* MAVİ */
.action.maintenance {
    background: linear-gradient(
        180deg,
        #38cfff 0%,
        #13aaf1 45%,
        #0085d5 75%,
        #006fbd 100%
    ) !important;

    border-color: #0086d5 !important;
}

/* KIRMIZI */
.action.fault {
    background: linear-gradient(
        180deg,
        #ff4541 0%,
        #f32121 45%,
        #d80e0e 75%,
        #b70707 100%
    ) !important;

    border-color: #c80d0d !important;
}

/* SİYAH */
.action.part,
.action.building {
    background: linear-gradient(
        180deg,
        #4c535b 0%,
        #30353a 40%,
        #1e2124 72%,
        #101214 100%
    ) !important;

    border-color: #171a1d !important;
}

/* İKONLAR ÖNDE KALSIN */
.action .action-svg {
    position: relative !important;
    z-index: 2 !important;
    width: 59px !important;
    height: 59px !important;

    filter:
        drop-shadow(0 2px 2px rgba(0,0,0,.35))
        drop-shadow(0 0 3px rgba(255,255,255,.35)) !important;
}

/* YAZILAR */
.action strong {
    position: relative !important;
    z-index: 2 !important;

    color: #fff !important;
    font-size: 16px !important;
    font-weight: 700 !important;

    text-shadow:
        0 2px 2px rgba(0,0,0,.35) !important;
}
/* ARIZA YOKSA YEŞİL */
.status-card.ariza-yok {
    border-left-color: #23864b !important;
}

.status-card.ariza-yok > b {
    background: #23864b !important;
}
/* SAĞDAKİ SAYI KUTULARINI BİRAZ KÜÇÜLT */
.status-card > b {
    width: 68px !important;
    height: 44px !important;
    font-size: 20px !important;
}
.etiket-ikon svg {
    width: 27px;
    height: 27px;
    fill: none;
    stroke: white;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.muhasebe-ikon svg {
    width: 29px;
    height: 29px;
    fill: none;
    stroke: white;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.alacak-ikon svg {
    width: 30px;
    height: 30px;
    fill: none;
    stroke: white;
    stroke-width: 2.1;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.status-png-icon {
    width: 52px !important;
    height: 52px !important;
    object-fit: contain !important;
    display: block !important;
}
/* ===== ALT MENÜ SON HALİ ===== */

html,
body,
.app,
.content,
.summary {
    background: #f1f3f5 !important;
}

.bottom-nav {
    position: fixed !important;
    bottom: 0 !important;

    /* Ana uygulama 760px olduğu için onunla birebir hizala */
    left: 50% !important;
    transform: translateX(-50%) !important;

    width: 760px !important;
    max-width: 100% !important;
    height: 68px !important;

    margin: 0 !important;
    padding: 0 !important;

    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;

    background: rgba(241, 243, 245, 0.78) !important;
backdrop-filter: blur(5px) !important;
-webkit-backdrop-filter: blur(5px) !important;

    border: none !important;
    border-top: 1px solid rgba(0,0,0,.05) !important;
    box-shadow: none !important;

    z-index: 9999 !important;
}

.bottom-nav button {
    width: 100% !important;
    height: 68px !important;

    margin: 0 !important;
    padding: 4px 0 !important;

    border: none !important;
    background: transparent !important;
    box-shadow: none !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;

    gap: 2px !important;
}

.bottom-nav-icon {
    width: 34px !important;
    height: 34px !important;
    object-fit: contain !important;
    display: block !important;
    margin: 0 !important;
}

.bottom-nav small {
    margin: 0 !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    color: #444 !important;
    text-align: center !important;
}

/* ===== ALT 7 MENÜ DÜZELTME ===== */

.extra-menu {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 0 90px 0 !important;
    display: block !important;
}

.extra-menu .status-card {
    width: 100% !important;
    min-width: 100% !important;
    height: 48px !important;
    min-height: 48px !important;
    margin: 0 0 6px 0 !important;
    display: grid !important;
    grid-template-columns: 1fr 58px !important;
}

.extra-menu .status-card > b {
    width: 80px !important;
    height: 48px !important;
}
.extra-menu .status-card > b {
    width: 68px !important;
}
.extra-menu-icon {
    width: 52px !important;
    height: 52px !important;
    object-fit: contain !important;
    display: block !important;
}
/* ===== ÜST BAR SON HALİ ===== */

.topbar {
    position: sticky !important;
    top: 0 !important;

    width: 100vw !important;
    max-width: none !important;

    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;

    background: #69bfea !important;

    z-index: 9999 !important;

    transition: background .25s ease,
                backdrop-filter .25s ease !important;
}

/* SAYFA AŞAĞI KAYDIRILINCA */
.topbar.scrolled {
    background: rgba(105, 191, 234, 0.60) !important;

    backdrop-filter: blur(5px) !important;
    -webkit-backdrop-filter: blur(5px) !important;
}
/* ===== BİNALARIN DÖKÜMANI + ASANSÖR MİNİ HESAP ===== */

.tools-menu {
    width: 94% !important;
    margin: 26px auto 100px !important;
}

.tools-menu button {
    width: 100% !important;
    height: 58px !important;

    margin-bottom: 10px !important;
    padding: 0 18px !important;

    border: 1px solid #d0d0d0 !important;
    border-radius: 14px !important;

    background: linear-gradient(
        180deg,
        #ffffff 0%,
        #f4f4f4 45%,
        #dedede 100%
    ) !important;

    box-shadow:
        0 3px 5px rgba(0,0,0,.18),
        inset 0 2px 2px rgba(255,255,255,.9) !important;

    display: flex !important;
    align-items: center !important;
    gap: 15px !important;

    color: #666 !important;
    font-size: 16px !important;
    font-weight: 500 !important;

    text-align: left !important;
}

.tools-icon {
    font-size: 27px !important;
    color: #333 !important;
}
.extra-menu {
    padding-bottom: 0 !important;
}

.tools-menu {
    width: 94% !important;
    margin: 28px auto 100px !important;
}
/* ===== SOL MENÜ ===== */

.side-menu {
    position: fixed !important;
    top: 64px !important;
    left: 0 !important;

    width: 220px !important;
    height: calc(100vh - 64px) !important;

    background: #ffffff !important;
    border-right: 1px solid #e1e4e8 !important;

    padding: 12px 14px !important;
    box-sizing: border-box !important;

    z-index: 9000 !important;

    display: flex !important;
    flex-direction: column !important;
}

/* AL-KA LOGOSU */
.side-brand {
    width: 100% !important;
    height: 65px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    margin-bottom: 10px !important;
}

.side-brand img {
    width: 135px !important;
    height: 55px !important;
    object-fit: contain !important;
}

/* MENÜ BUTONLARI */
.side-menu > button {
    width: 100% !important;
    height: 40px !important;

    border: none !important;
    border-bottom: 1px solid #eceff2 !important;
    border-radius: 0 !important;

    background: transparent !important;

    display: flex !important;
    align-items: center !important;
    gap: 12px !important;

    padding: 0 10px !important;

    color: #444 !important;
    text-align: left !important;
}

.side-menu > button span {
    width: 22px !important;
    font-size: 17px !important;
    text-align: center !important;
}

.side-menu > button strong {
    font-size: 14px !important;
    font-weight: 600 !important;
}

/* GECE MODU */
.night-mode {
    height: 45px !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-size: 12px !important;
}

/* AÇ/KAPA ANAHTARI */
.switch {
    position: relative !important;
    width: 58px !important;
    height: 27px !important;
}

.switch input {
    display: none !important;
}

.slider {
    position: absolute !important;
    inset: 0 !important;

    background: #111 !important;
    border-radius: 30px !important;
}

.slider::before {
    content: "" !important;
    position: absolute !important;

    width: 21px !important;
    height: 21px !important;

    left: 3px !important;
    top: 3px !important;

    background: #65c8f3 !important;
    border-radius: 50% !important;
}
/* ===== ÜST BAR HER ZAMAN ÜSTTE ===== */

.topbar {
    position: sticky !important;
    top: 0 !important;

    width: 100vw !important;
    max-width: none !important;

    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;

    z-index: 99999 !important;
}

.topbar.scrolled {
    background: rgba(105, 191, 234, 0.60) !important;
    backdrop-filter: blur(5px) !important;
    -webkit-backdrop-filter: blur(5px) !important;
}
/* ===== AL-KA ÜST BAR DÜZELTME ===== */

.topbar {
    position: sticky !important;
    top: 0 !important;
    z-index: 999999 !important;

    width: 100vw !important;
    max-width: none !important;

    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;

    background: rgba(39, 185, 230, 0.62) !important;

    backdrop-filter: blur(5px) !important;
    -webkit-backdrop-filter: blur(5px) !important;
}
/* ===== SOL MENÜ YAZI VE LOGO BÜYÜTME ===== */

.side-brand {
    height: 85px !important;
}

.side-brand img {
    width: 175px !important;
    height: 75px !important;
    object-fit: contain !important;
}

.side-menu > button {
    height: 46px !important;
}

.side-menu > button strong {
    font-size: 16px !important;
    font-weight: 600 !important;
}

.side-menu > button span {
    font-size: 20px !important;
}
body {
    overflow-x: clip !important;
}