* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: Tahoma, Arial, sans-serif;
    background: #ececec;
    color: #222;
}

a {
    color: #114d8f;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

.wrap {
    width: 96%;
    max-width: 1180px;
    margin: 0 auto;
}

.site-shell {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.header {
    background: #ffffff;
    border-bottom: 1px solid #cfcfcf;
    box-shadow: 0 1px 0 #d8d8d8;
}

.top-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 14px 0;
}

.logo-box {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    color: #1c1c1c;
    font-weight: bold;
    font-size: 20px;
}

.logo-main-image {
    width: 230px;
    height: auto;
    display: block;
}

.logo-note {
    font-size: 12px;
    font-weight: normal;
    color: #5b6874;
}

.top-actions {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.welcome-text {
    color: #4d4d4d;
    font-size: 13px;
}

.text-link {
    display: inline-block;
    padding: 7px 10px;
    border: 1px solid #ccd5e0;
    background: #f7f9fc;
    font-size: 13px;
}

.primary-link {
    background: #114d8f;
    color: #fff;
    border-color: #0c3d71;
}

.danger-link {
    color: #8c1b1b;
}

.icon-link {
    padding-left: 34px;
    background-repeat: no-repeat;
    background-position: 10px center;
    background-size: 15px 15px;
}

.link-login {
    background-image: url("../images/ui/icon-giris.svg");
}

.link-register,
.link-profile {
    background-image: url("../images/categories/icon-profil.svg");
}

.link-messages {
    background-image: url("../images/categories/icon-mesajlar.svg");
}

.link-admin {
    background-image: url("../images/categories/icon-admin.svg");
}

.link-logout {
    background-image: url("../images/ui/icon-cikis.svg");
}

.menu-bar {
    background: #2f3a48;
    border-top: 1px solid #425162;
    border-bottom: 1px solid #222c38;
}

.menu-inner {
    display: flex;
    flex-wrap: wrap;
}

.menu-link {
    color: #fff;
    padding: 12px 16px 12px 40px;
    border-right: 1px solid #425162;
    font-size: 14px;
    background-repeat: no-repeat;
    background-position: 14px center;
    background-size: 16px 16px;
}

.menu-home {
    background-image: url("../images/logo/site-logo.svg");
}

.menu-listings {
    background-image: url("../images/categories/icon-konut.svg");
}

.menu-add {
    background-image: url("../images/categories/icon-ilan-ekle.svg");
}

.menu-profile {
    background-image: url("../images/categories/icon-profil.svg");
}

.menu-messages {
    background-image: url("../images/categories/icon-mesajlar.svg");
}

.menu-admin {
    background-image: url("../images/categories/icon-admin.svg");
}

.menu-link:hover,
.menu-link.active {
    background: #203244;
    text-decoration: none;
}

.content-area {
    flex: 1;
    width: 96%;
    padding: 18px 0 26px;
}

.page-box,
.panel-box,
.form-box,
.detail-box,
.list-box,
.message-box,
.sidebar-box,
.stats-box,
.hero-box {
    background: #fff;
    border: 1px solid #cfcfcf;
    margin-bottom: 16px;
    box-shadow: 0 1px 0 #e3e3e3;
}

.box-title,
.section-title {
    margin: 0;
    padding: 12px 14px;
    background: #23384b url("../images/banners/panel-header-bg.svg") repeat-x left top;
    border-bottom: 1px solid #1c2d3d;
    font-size: 18px;
    color: #fff;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
}

.box-body,
.section-body {
    padding: 14px;
}

.hero-box {
    padding: 18px;
    background: linear-gradient(180deg, #fcfdff 0%, #f2f6fa 100%);
}

.home-hero {
    background: linear-gradient(180deg, #fcfdff 0%, #f1f5f9 100%);
    background-image: url("../images/banners/kategori-kutu.svg");
    background-repeat: no-repeat;
    background-position: right 18px top 18px;
    background-size: 150px auto;
}

.hero-badge-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.hero-badge {
    display: inline-block;
    padding: 5px 9px;
    font-size: 12px;
    background: #eef3f8;
    border: 1px solid #c4d0dc;
    color: #33485d;
}

.hero-grid,
.two-column,
.three-column,
.profile-grid,
.detail-grid {
    display: grid;
    gap: 16px;
}

.hero-grid {
    grid-template-columns: 2fr 1fr;
}

.two-column {
    grid-template-columns: 2fr 1fr;
}

.three-column {
    grid-template-columns: repeat(3, 1fr);
}

.profile-grid {
    grid-template-columns: 1.15fr 1.85fr;
}

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

.search-strip {
    display: grid;
    grid-template-columns: 2fr repeat(3, 1fr) auto;
    gap: 10px;
    align-items: end;
}

.cards-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}

.category-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}

.category-tile {
    display: block;
    min-height: 138px;
    padding: 14px 14px 16px;
    border: 1px solid #ccd6df;
    background: #fff url("../images/banners/kategori-kutu.svg") no-repeat right 10px bottom 10px;
    background-size: 72px auto;
    color: #22364a;
}

.category-tile:hover {
    text-decoration: none;
    border-color: #9fb4c9;
    background-color: #f9fbfd;
}

.category-tile strong {
    display: block;
    margin: 8px 0 6px;
    font-size: 16px;
}

.category-tile span {
    display: block;
    max-width: 80%;
    font-size: 13px;
    color: #5a6875;
    line-height: 1.5;
}

.category-icon {
    width: 34px;
    height: 34px;
    display: block;
}

.listing-card,
.mini-card,
.stats-item {
    border: 1px solid #d8d8d8;
    background: #fff;
    position: relative;
    overflow: hidden;
}

.listing-photo,
.detail-main-image,
.mini-photo {
    width: 100%;
    display: block;
    object-fit: cover;
    background: #eef2f6 url("../images/ui/icon-resim.svg") no-repeat center center;
    background-size: 54px 54px;
}

.listing-photo,
.mini-photo {
    height: 190px;
    border-bottom: 1px solid #ddd;
}

.detail-main-image {
    height: 360px;
}

.vitrin-ribbon {
    position: absolute;
    top: 12px;
    right: -3px;
    width: 102px;
    height: auto;
    z-index: 2;
}

.listing-card .card-body,
.mini-card .card-body {
    padding: 12px;
}

.price-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.price-label {
    color: #8c1b1b;
    font-weight: bold;
    font-size: 20px;
}

.muted {
    color: #666;
    font-size: 13px;
}

.meta-line,
.detail-meta {
    color: #4f4f4f;
    font-size: 13px;
    line-height: 1.6;
}

.meta-with-icon {
    display: flex;
    align-items: center;
    gap: 8px;
}

.meta-icon {
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
}

.summary-table,
.data-table {
    width: 100%;
    border-collapse: collapse;
}

.summary-table th,
.summary-table td,
.data-table th,
.data-table td {
    border: 1px solid #dadada;
    padding: 9px 10px;
    text-align: left;
    font-size: 14px;
}

.summary-table th,
.data-table th {
    background: #f4f4f4;
    width: 30%;
}

.data-table th {
    width: auto;
}

.form-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-bottom: 12px;
}

.form-row.single {
    grid-template-columns: 1fr;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

label {
    font-size: 13px;
    color: #333;
    font-weight: bold;
}

input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
textarea,
select {
    width: 100%;
    padding: 9px 10px;
    border: 1px solid #bcc7d4;
    background: #fff;
    font-size: 14px;
    font-family: Tahoma, Arial, sans-serif;
}

textarea {
    min-height: 120px;
    resize: vertical;
}

input[type="file"] {
    padding: 7px 0;
}

.button,
input[type="submit"],
button,
.aspNetDisabled {
    display: inline-block;
    padding: 10px 16px;
    border: 1px solid #0c4a86;
    background: #155c9f;
    color: #fff;
    font-size: 14px;
    cursor: pointer;
}

.button.secondary {
    background: #eceff3;
    color: #22364a;
    border-color: #bcc7d4;
}

.button.danger {
    background: #8c1b1b;
    border-color: #6e1212;
}

.button.small {
    padding: 6px 9px;
    font-size: 12px;
}

.button:hover,
input[type="submit"]:hover,
button:hover {
    opacity: 0.92;
    text-decoration: none;
}

.button[class*="btn-"],
input[type="submit"][class*="btn-"] {
    padding-left: 38px;
    background-repeat: no-repeat;
    background-position: 12px center;
    background-size: 16px 16px;
}

.btn-search {
    background-image: url("../images/ui/icon-arama.svg");
}

.btn-login,
.btn-login-link {
    background-image: url("../images/ui/icon-giris.svg");
}

.btn-register-action,
.btn-register-link {
    background-image: url("../images/categories/icon-profil.svg");
}

.btn-listings {
    background-image: url("../images/categories/icon-konut.svg");
}

.btn-add-listing {
    background-image: url("../images/categories/icon-ilan-ekle.svg");
}

.btn-messages-link,
.btn-mail-link {
    background-image: url("../images/ui/icon-mail.svg");
}

.btn-follow {
    background-image: url("../images/categories/icon-favoriler.svg");
}

.btn-related-link,
.btn-detail-link {
    background-image: url("../images/ui/icon-duzenle.svg");
}

.btn-admin-login,
.btn-admin-manage {
    background-image: url("../images/categories/icon-admin.svg");
}

.btn-vitrin-manage {
    background-image: url("../images/ui/icon-vitrin.svg");
}

.btn-approve {
    background-image: url("../images/ui/icon-onayla.svg");
}

.btn-reject {
    background-image: url("../images/ui/icon-sil.svg");
}

.btn-pending {
    background-image: url("../images/ui/icon-duzenle.svg");
}

.info-alert,
.success-alert,
.warning-alert,
.error-alert {
    padding: 12px 14px;
    margin-bottom: 14px;
    border: 1px solid;
    font-size: 14px;
}

.info-alert {
    background: #eef6ff;
    border-color: #aac7ea;
    color: #214d78;
}

.success-alert {
    background: #eef8ef;
    border-color: #9dc29e;
    color: #236127;
}

.warning-alert {
    background: #fff7df;
    border-color: #e6cf7a;
    color: #725700;
}

.error-alert {
    background: #fdeeee;
    border-color: #db9a9a;
    color: #8a2020;
}

.badge-approved,
.badge-pending,
.badge-rejected,
.badge-vitrin {
    display: inline-block;
    padding: 4px 8px;
    border-radius: 3px;
    font-size: 12px;
    font-weight: bold;
}

.badge-approved {
    background: #deefe0;
    color: #226b2d;
}

.badge-pending {
    background: #fff3cf;
    color: #825c00;
}

.badge-rejected {
    background: #fde2e2;
    color: #8a2020;
}

.badge-vitrin {
    background: #e2edf8;
    color: #1b4d85;
}

.stats-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}

.stats-item {
    padding: 14px;
}

.stats-item strong {
    display: block;
    margin-top: 6px;
    font-size: 24px;
    color: #1b446f;
}

.title-with-icon {
    display: flex;
    align-items: center;
    gap: 10px;
}

.title-icon {
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
}

.inline-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.empty-note {
    padding: 12px;
    border: 1px dashed #c5ced8;
    background: #fafcfe;
    color: #555;
}

.detail-description {
    white-space: pre-line;
    line-height: 1.7;
}

.auth-visual,
.profile-visual {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 14px;
    padding: 12px;
    border: 1px solid #d8e0e7;
    background: #f7fafc;
}

.auth-visual-icon,
.profile-visual-icon {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
}

.auth-visual-logo,
.profile-visual-logo {
    width: 170px;
    max-width: 100%;
    height: auto;
    display: block;
}

.footer {
    background: #25313c;
    color: #d8dde3;
    margin-top: auto;
    border-top: 1px solid #1a232b;
}

.footer-inner {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: center;
    padding: 14px 0;
    font-size: 13px;
}

.footer a {
    color: #fff;
    margin-left: 10px;
}

.form-shell {
    max-width: 760px;
    margin: 0 auto;
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.form-group.wide {
    grid-column: 1 / -1;
}

.checkbox-row {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.detail-layout,
.messages-layout {
    display: grid;
    grid-template-columns: minmax(260px, 420px) 1fr;
    gap: 18px;
}

.detail-photo {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border: 1px solid #d8dde3;
    background: #f7fafc;
}

.price-large {
    font-size: 26px;
    font-weight: 700;
    color: #1f6f43;
    margin: 8px 0;
}

.info-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.simple-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.simple-table th,
.simple-table td {
    border: 1px solid #d8dde3;
    padding: 8px;
    text-align: left;
    vertical-align: top;
}

.simple-table th {
    background: #eef2f5;
}

.simple-list,
.message-list {
    margin: 0;
    padding-left: 18px;
}

.message-list li {
    margin-bottom: 10px;
}

.message-list span {
    display: block;
    color: #607080;
    font-size: 13px;
}

.inline-form {
    display: inline-flex;
    gap: 5px;
    flex-wrap: wrap;
}

.small-button {
    padding: 5px 8px;
    font-size: 12px;
    border: 1px solid #263542;
    background: #334557;
    color: #fff;
    cursor: pointer;
}

.small-button.warning {
    background: #8a5b1f;
}

.small-button.secondary {
    background: #eef2f5;
    color: #25313c;
}

.inline-icon {
    width: 18px;
    height: 18px;
    vertical-align: middle;
}

@media (max-width: 980px) {
    .hero-grid,
    .two-column,
    .three-column,
    .profile-grid,
    .detail-grid,
    .detail-layout,
    .messages-layout,
    .form-grid,
    .info-grid,
    .category-grid,
    .cards-grid,
    .stats-row {
        grid-template-columns: 1fr;
    }

    .search-strip {
        grid-template-columns: 1fr;
    }

    .form-row {
        grid-template-columns: 1fr;
    }

    .footer-inner,
    .top-row {
        flex-direction: column;
        align-items: flex-start;
    }

    .logo-main-image,
    .auth-visual-logo,
    .profile-visual-logo {
        width: 190px;
    }

    .menu-inner {
        flex-direction: column;
    }

    .menu-link {
        border-right: 0;
        border-bottom: 1px solid #425162;
    }
}